:root {
  --bg: #e9eef5; --ink: #142033; --accent: #2563eb; --accent2: #059669;
  --panel: #f8fafc; --muted: color-mix(in srgb, var(--ink) 55%, transparent);
  --display: "Sora", system-ui, sans-serif;
  --body: "Public Sans", system-ui, sans-serif;
  --line: color-mix(in srgb, var(--ink) 18%, transparent);
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--body); color: var(--ink); background: var(--bg);
  line-height: 1.55; min-height: 100vh;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--panel) 80%, transparent), transparent 40%), repeating-linear-gradient(90deg, transparent, transparent 22px, color-mix(in srgb, var(--ink) 3%, transparent) 22px, color-mix(in srgb, var(--ink) 3%, transparent) 23px);
}
a { color: var(--accent); }
.wrap { width: min(1060px, calc(100% - 2rem)); margin-inline: auto; }
.site-header {
  position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:1rem; }
.logo { font-family: var(--display); font-weight: 700; text-decoration:none; color: var(--ink); letter-spacing:-0.02em; }
.nav { display:flex; gap:1rem; flex-wrap:wrap; }
.nav a { text-decoration:none; color: var(--muted); font-weight:600; }
.nav a[aria-current="page"], .nav a:hover { color: var(--ink); }
.hero { padding: 2.75rem 0 2rem; }
.hero-grid { display:grid; gap:1.5rem; align-items:center; }
.layout-split-rail .hero-grid { grid-template-columns: 1.2fr 0.8fr; }
.layout-stack-hero .hero-grid { grid-template-columns: 1fr; }
.layout-centered-column .hero-grid { grid-template-columns: minmax(0, 40rem); justify-content:center; text-align:center; }
.layout-neon-band .hero {
  border-bottom: 2px solid var(--accent); background: linear-gradient(120deg, #16141c, #241c33 55%, #1a1524);
  padding: 3.5rem 0;
}
.eyebrow { text-transform:uppercase; letter-spacing:0.14em; font-size:0.75rem; font-weight:700; color: var(--accent2); margin:0 0 0.6rem; }
h1 { font-family: var(--display); font-size: clamp(2.4rem, 6vw, 4rem); line-height:1; letter-spacing:-0.03em; margin:0 0 0.85rem; }
.lede { max-width: 38ch; margin:0 0 1.25rem; color: var(--muted); font-size:1.05rem; }
.layout-centered-column .lede { margin-inline:auto; }
.hero-actions { display:flex; flex-wrap:wrap; gap:0.7rem; }
.layout-centered-column .hero-actions { justify-content:center; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:0.8rem 1.25rem; font-weight:700; text-decoration:none; border:2px solid transparent; cursor:pointer; font-family: var(--body); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.score-card { background: var(--panel); border:1px solid var(--line); padding:1.25rem; }
.score-card strong { font-family: var(--display); font-size:2.6rem; display:block; }
.meta-row { display:flex; flex-wrap:wrap; gap:0.45rem; list-style:none; padding:0; margin:1.2rem 0 0; }
.meta-row li { border:1px solid var(--line); padding:0.3rem 0.65rem; font-size:0.8rem; color: var(--muted); }
.layout-centered-column .meta-row { justify-content:center; }
.section { padding: 2.5rem 0; }
.section h2 { font-family: var(--display); letter-spacing:-0.02em; margin:0 0 1rem; }
.prose p { max-width: 62ch; color: var(--muted); }
.layout-centered-column .prose p { margin-inline:auto; }
.steps { list-style:none; padding:0; margin:0; display:grid; gap:0.7rem; max-width:640px; }
.layout-centered-column .steps { margin-inline:auto; text-align:left; }
.steps li { background: var(--panel); border-left:4px solid var(--accent); padding:0.85rem 1rem; }
.chapters { display:grid; grid-template-columns: repeat(3, 1fr); gap:0.75rem; }
.chapter { background: var(--panel); border:1px solid var(--line); padding:1.1rem; }
.chapter h3 { margin:0 0 0.4rem; font-family: var(--display); font-size:1.05rem; }
.chapter p { margin:0; color: var(--muted); font-size:0.95rem; }
.cta { margin-top:1.5rem; padding:1.25rem; background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border:1px solid var(--line); display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.play-page { padding:2rem 0 3rem; }
.game-shell { border:2px solid var(--line); background: #0f2433; position:relative; overflow:hidden; box-shadow: 0 18px 50px color-mix(in srgb, var(--ink) 12%, transparent); }
.game-hud { display:flex; flex-wrap:wrap; gap:1rem; padding:0.8rem 1rem; color:#dbe7ef; background:#163044; border-bottom:1px solid #0a1620; }
.game-hud strong { color: #c6e26e; }
#game { display:block; width:100%; height:auto; max-height:70vh; margin:0 auto; touch-action:manipulation; }
.game-overlay { position:absolute; inset:48px 0 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.7rem; background:#0f2433ee; color:#eef5f8; text-align:center; padding:1.5rem; }
.game-overlay[hidden] { display:none !important; }
.overlay-title { font-family: var(--display); font-size:2rem; margin:0; }
.overlay-text { margin:0; color:#a9beca; max-width:34ch; }
.play-note { margin-top:1rem; color: var(--muted); font-size:0.9rem; }
.site-footer { border-top:1px solid var(--line); padding:1.2rem 0 2rem; margin-top:2rem; }
.footer-inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; color: var(--muted); font-size:0.9rem; }
.footer-inner nav { display:flex; gap:1rem; }
.footer-inner a { color: var(--muted); text-decoration:none; font-weight:600; }
.legal h1 { font-family: var(--display); }
@media (max-width: 820px) {
  .layout-split-rail .hero-grid, .chapters { grid-template-columns: 1fr; }
}