/* ═══════════ Layout — the codex page ═══════════ */

html, body {
  min-height: 100%;
}

html {
  background: #0e1726;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--text-primary);
  background:
    linear-gradient(180deg, #162a43 0%, #0e1726 100%);
  background-attachment: fixed;
  position: relative;
}

/* Subtle iron-filigree dots across the dark backdrop */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(201, 162, 74, 0.06) 1px, transparent 2px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}

#app {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) 80px;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ── Page title ── */
.page-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 400;
  color: var(--gold-bright);
}

.page-subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--ink-muted);
  margin-top: var(--space-xs);
}

/* ── Topic / level grids ── */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.level-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.problem-container {
  max-width: 640px;
  margin: 0 auto;
}

@media (max-width: 720px) {
  #app { padding: var(--space-md); }
  .topic-grid { grid-template-columns: 1fr; }
  .page-title { font-size: var(--text-3xl); }
}

/* ═══════════ The Parchment ═══════════
   Wraps each screen. Deckled edges, tea staining,
   ink-spot freckles, soft inner vignette.
*/
.screen {
  position: relative;
  background-color: #f3e3c0;
  background-image: var(--tex-parchment);
  color: var(--ink);
  padding: var(--space-2xl) var(--space-xl);
  box-shadow:
    var(--shadow-inset),
    0 0 0 1px rgba(138, 106, 32, 0.45),
    0 0 0 6px rgba(245, 229, 188, 0.08),
    0 24px 60px rgba(0,0,0,0.55);
  border-radius: 2px;
}

/* torn top/bottom edges using mask */
.screen::before,
.screen::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 12px;
  background:
    radial-gradient(circle at 6px 0, transparent 0 5px, #f3e3c0 5.5px),
    radial-gradient(circle at 12px 6px, transparent 0 4px, #f3e3c0 4.5px);
  background-size: 12px 12px;
}
.screen::before { top: -1px; transform: scaleY(-1); }
.screen::after { bottom: -1px; }

/* soft ink freckles */
.screen > * { position: relative; z-index: 1; }

/* Thin gold rule used between sections */
.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: var(--space-lg) 0;
  position: relative;
}
.rule::after {
  content: '✦';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--gold);
  background: var(--bg-parchment);
  padding: 0 10px;
  font-size: 14px;
}