/* ===== Solo Party Games — Arcade Pop design system (DESIGN-SYSTEM.md tokens) ===== */
/* Self-hosted fonts (SIL OFL 1.1 — license texts in /assets/fonts/OFL-*.txt).
   Bricolage Grotesque (c) 2022 The Bricolage Grotesque Project Authors;
   DM Sans (c) 2014 The DM Sans Project Authors. Latin subset, variable weight. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600 800;font-stretch:100%;font-display:swap;src:url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/dm-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --background:#111128; --surface:#1D1D35; --surface-high:#282840; --surface-highest:#33324B;
  --surface-lowest:#0C0C22; --surface-low:#191930; --surface-bright:#373750;
  --lime:#C6F135; --lime-dim:#ACD60E; --lime-fixed:#C7F337; --on-lime:#556B00;
  --coral:#FF6B6B; --coral-on-dark:#FFB3B0; --on-coral:#68000F;
  --text:#E2DFFF; --text-2:#C5C9AE; --outline:#8E937B; --outline-var:#444934;
  --error:#FFB4AB; --error-container:#93000A;
  --display-font:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;
  --body-font:"DM Sans",system-ui,sans-serif;
  --r-sm:4px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:9999px;
  --section-gap:60px; --container-pad:20px; --gutter:24px;
}
@media(min-width:768px){:root{--section-gap:100px;--container-pad:32px}}
*{margin:0;padding:0;box-sizing:border-box}
p,li,a,span,td,th,summary,h1,h2,h3{overflow-wrap:break-word}
html{scroll-behavior:smooth}
body{background:var(--background);color:var(--text);font-family:var(--body-font);font-size:16px;line-height:24px;overflow-x:hidden}
h1,h2,h3,.display{font-family:var(--display-font)}
h1{font-size:32px;line-height:40px;font-weight:700;letter-spacing:-0.01em}
h2{font-size:26px;line-height:34px;font-weight:700;letter-spacing:-0.01em;margin-bottom:16px}
h3{font-size:20px;line-height:28px;font-weight:600}
@media(min-width:768px){
  h1{font-size:56px;line-height:64px;font-weight:800;letter-spacing:-0.02em}
  h2{font-size:40px;line-height:48px}
  h3{font-size:24px;line-height:32px}
}
a{color:var(--lime-fixed);text-decoration:none}
img,svg{max-width:100%;height:auto}
p.lead{font-size:18px;line-height:28px;color:var(--text-2)}
.small{font-size:13px;line-height:20px;color:var(--text-2)}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--container-pad)}
section{padding:var(--section-gap) 0}
/* confetti decoration (CSS-generated, no bitmap) */
.confetti{position:relative}
.confetti::before{content:"";position:absolute;inset:0;opacity:.5;border-radius:var(--r-xl);pointer-events:none;
  background-image:radial-gradient(circle at 10% 20%,rgba(198,241,53,.12) 4px,transparent 5px),radial-gradient(circle at 80% 40%,rgba(255,107,107,.12) 6px,transparent 7px),radial-gradient(circle at 30% 70%,rgba(198,241,53,.10) 3px,transparent 4px),radial-gradient(circle at 70% 90%,rgba(255,107,107,.10) 5px,transparent 6px);background-size:150px 150px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body-font);font-weight:700;font-size:14px;letter-spacing:.05em;border:none;cursor:pointer;border-radius:var(--r-full);padding:14px 28px;min-height:44px;transition:transform .2s;text-decoration:none}
.btn:hover{transform:scale(1.05)}
.btn-coral{background:var(--coral);color:var(--on-coral);font-size:16px;padding:16px 32px}
.btn-lime{background:var(--lime);color:var(--on-lime)}
.btn-ghost{background:transparent;color:var(--lime-fixed);padding:10px 4px}
.btn-neutral{background:var(--surface-high);color:var(--text)}
.btn-block{display:flex;width:100%;justify-content:center}
/* nav */
.nav-shell{position:sticky;top:0;z-index:50;background:var(--surface);border-radius:0 0 var(--r-lg) var(--r-lg)}
.topnav{display:flex;justify-content:space-between;align-items:center;padding:0 var(--container-pad);height:64px;max-width:1200px;margin:0 auto;gap:8px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display-font);font-weight:700;font-size:18px;color:var(--text);white-space:nowrap}
.brand img{width:34px;height:34px;border-radius:10px;flex:none}
.navlinks{display:none;gap:28px;align-items:center}
.navlinks a{color:var(--text-2);font-weight:700;font-size:14px}
.navlinks a:hover{color:var(--lime-fixed)}
.menu-btn{background:var(--surface-high);border:none;color:var(--text);border-radius:var(--r-md);width:44px;height:44px;font-size:24px;cursor:pointer;flex:none;display:inline-flex;align-items:center;justify-content:center}
@media(min-width:900px){.navlinks{display:flex}.menu-btn{display:none}}
.nav-panel{display:none;flex-direction:column;padding:8px var(--container-pad) 16px;max-width:1200px;margin:0 auto}
.nav-panel.open{display:flex}
.nav-panel a{color:var(--text);font-weight:700;font-size:16px;padding:12px 8px;min-height:44px;display:flex;align-items:center;border-top:1px solid var(--surface-high)}
/* hero */
.hero{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media(min-width:900px){.hero{grid-template-columns:7fr 5fr}}
.hero h1 .hl{color:var(--lime-fixed)}
.quickplay{background:var(--surface);border-radius:var(--r-xl);padding:28px;border:1px solid var(--outline-var);display:flex;flex-direction:column;gap:20px}
.quickplay h3{color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:var(--surface-high);color:var(--text-2);padding:10px 18px;border-radius:var(--r-full);font-weight:700;font-size:14px;border:1px solid var(--outline-var);cursor:pointer;min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.chip:hover{border-color:var(--lime-fixed);color:var(--lime-fixed)}
.mascot{width:150px;height:150px;margin:0 auto;display:block}
/* cards */
.grid{display:grid;grid-template-columns:1fr;gap:var(--gutter)}
@media(min-width:700px){.grid.c2{grid-template-columns:1fr 1fr}.grid.c3{grid-template-columns:1fr 1fr 1fr}}
.card{background:var(--surface);border-radius:var(--r-xl);padding:28px;border:1px solid transparent;transition:transform .3s,border-color .3s}
.card:hover{transform:scale(1.02);border-color:var(--lime-fixed)}
.card .icn{width:48px;height:48px;border-radius:var(--r-md);background:var(--lime);color:var(--on-lime);display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:18px}
.card h3{margin-bottom:10px}
.card p{color:var(--text-2);margin-bottom:18px}
.card-lime{background:var(--lime);color:var(--on-lime)}
.card-lime h3{color:var(--on-lime)}
.card-lime p{color:var(--on-lime);opacity:.85}
.card-lime .icn{background:var(--on-lime);color:var(--lime)}
.card-lime .btn-ghost{color:var(--on-lime)}
.tag{display:inline-block;background:var(--surface-high);color:var(--text-2);border-radius:var(--r-full);padding:4px 12px;font-size:12px;font-weight:700;letter-spacing:.05em;margin-right:6px}
/* steps */
.step{background:var(--surface);border-radius:var(--r-xl);padding:28px}
.step .num{font-family:var(--display-font);font-size:44px;font-weight:800;color:var(--lime-fixed);line-height:1;margin-bottom:12px}
/* ad slot (D-6: neutral dashed, labelled, no brand styling) */
.ad-slot{border:1.5px dashed var(--outline);border-radius:var(--r-md);margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text-2);width:320px;height:100px;min-height:100px;max-width:100%}
@media(min-width:820px){.ad-slot{width:728px;height:90px;min-height:90px}}
.ad-slot .lbl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
/* faq */
.faq{background:var(--surface);border-radius:var(--r-lg);padding:18px 22px;margin-bottom:12px}
.faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:44px}
.faq summary::after{content:"+";color:var(--lime-fixed);font-size:22px;font-family:var(--display-font)}
.faq[open] summary::after{content:"–"}
.faq p{color:var(--text-2);margin-top:8px}
/* nav active chip state */
.chip.active{background:var(--lime);color:var(--on-lime);border-color:var(--lime)}
/* footer */
footer{background:var(--surface-lowest);border-top:1px solid var(--surface-low);margin-top:60px}
.foot-grid{display:grid;grid-template-columns:1fr;gap:28px;padding:48px 0}
@media(min-width:768px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.foot-grid h4{font-size:14px;letter-spacing:.05em;color:var(--lime-fixed);margin-bottom:14px;text-transform:uppercase}
.foot-grid a{display:block;color:var(--text-2);padding:6px 0;font-size:14px;min-height:32px}
.foot-legal{border-top:1px solid var(--surface-low);padding:20px 0 36px;display:flex;flex-direction:column;gap:8px}
.foot-legal a{color:var(--text-2);font-size:13px;background:none;border:none;padding:6px 0;min-height:32px;text-align:left;cursor:pointer;font-family:var(--body-font)}
/* game stage: three states swap inside one container */
.stage{background:var(--surface);border:1px solid var(--outline-var);border-radius:var(--r-xl);padding:32px 28px;text-align:center;position:relative;min-height:360px}
@media(min-width:768px){.stage{min-height:420px;padding:32px}}
.stage-pane{display:none;flex-direction:column;gap:16px;align-items:center}
.stage-pane.active{display:flex}
.stage .tagline{font-family:var(--display-font);font-size:20px;font-weight:700;color:var(--lime-fixed)}
.stage .body{color:var(--text-2);max-width:520px}
.stage-icon{width:96px;height:96px;border-radius:24px;background:var(--surface-high);display:flex;align-items:center;justify-content:center;color:var(--lime-dim);font-size:44px}
/* HUD */
.hud{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;width:100%;align-items:center}
.hud .hud-row{display:flex;flex-wrap:wrap;gap:8px 20px;width:100%;justify-content:space-between;align-items:center}
.hud-item{font-weight:700;font-size:14px;letter-spacing:.05em;color:var(--text-2)}
.hud-item b{color:var(--text);font-variant-numeric:tabular-nums}
.hud-timer{font-family:var(--display-font);font-size:28px;font-weight:800;color:var(--lime-fixed);font-variant-numeric:tabular-nums}
.hud-timer.low{color:var(--coral)}
.hud-cat{width:100%;text-align:left;font-size:15px;color:var(--text)}
/* toast (inside stage top, never covers HUD) */
.toast{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:var(--surface-highest);color:var(--lime-fixed);font-weight:700;font-size:14px;letter-spacing:.05em;border-radius:var(--r-full);padding:8px 20px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:5;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1}
.toast.err{color:var(--error)}
/* inputs */
.game-input{width:100%;max-width:440px;height:56px;border-radius:8px;background:var(--surface-high);border:1px solid var(--outline-var);color:var(--text);font-family:var(--body-font);font-size:16px;padding:0 16px}
.game-input:focus{outline:2px solid var(--lime-dim)}
/* word chips in blitz end screen / live list */
.word-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:560px}
/* robot grid (G2) */
.robot-grid{display:grid;gap:8px;width:100%;max-width:560px;margin:0 auto}
.robot-cell{aspect-ratio:1;min-width:48px;min-height:48px;border:none;border-radius:16px;background:var(--surface-high);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:6px;transition:transform .15s}
.robot-cell:hover{transform:scale(1.04)}
.robot-cell svg{width:100%;height:100%}
.robot-cell.shake{outline:2px solid var(--error);animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* trivia options */
.quiz-opts{display:grid;grid-template-columns:1fr;gap:10px;width:100%;max-width:520px}
@media(min-width:700px){.quiz-opts{grid-template-columns:1fr 1fr}}
.quiz-opt{background:var(--surface-high);border:1px solid var(--outline-var);color:var(--text);border-radius:var(--r-md);padding:14px 16px;min-height:52px;font-weight:700;font-size:15px;cursor:pointer;text-align:left}
.quiz-opt:hover{border-color:var(--lime-fixed)}
.quiz-opt.right{border-color:var(--lime);background:rgba(198,241,53,.12)}
.quiz-opt.wrong{border-color:var(--error);background:rgba(255,180,171,.08)}
.quiz-q{font-family:var(--display-font);font-size:20px;line-height:28px;font-weight:700;max-width:560px}
.emoji-clue{font-size:52px;letter-spacing:8px;line-height:1.3}
/* end screen */
.endcard{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}
.endcard .score{font-family:var(--display-font);font-size:34px;font-weight:800;color:var(--text)}
.pb{color:var(--lime-fixed);font-weight:700}
.badge{display:inline-flex;align-items:center;gap:6px;background:var(--surface-high);border:1px solid var(--lime-dim);color:var(--lime-fixed);border-radius:var(--r-full);padding:6px 16px;font-weight:700;font-size:13px}
/* records card */
.records{background:var(--surface-high);border-radius:var(--r-xl);padding:28px;border:1px solid var(--outline-var)}
.records .rec-grid{display:flex;flex-wrap:wrap;gap:24px;margin:14px 0}
.records .rec-val{font-family:var(--display-font);font-size:32px;font-weight:800;color:var(--lime-fixed);font-variant-numeric:tabular-nums}
.records .rec-lbl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
/* generator */
.gen-card{background:var(--surface);border-radius:var(--r-xl);padding:36px 28px;border:1px solid var(--outline-var);text-align:center;display:flex;flex-direction:column;gap:20px;align-items:center}
.gen-prompt{font-family:var(--display-font);font-size:22px;line-height:30px;font-weight:700;min-height:90px;display:flex;align-items:center;justify-content:center;color:var(--text)}
.gen-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
@media(max-width:479px){.gen-tabs{flex-direction:column;width:100%}.gen-tab{width:100%}}
.gen-tab{background:var(--surface-high);color:var(--text-2);border:1px solid var(--outline-var);border-radius:var(--r-full);padding:10px 18px;font-weight:700;font-size:14px;min-height:44px;cursor:pointer}
.gen-tab.active{background:var(--lime);color:var(--on-lime);border-color:var(--lime)}
.gen-cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
/* legal doc */
.doc{max-width:720px;margin:0 auto}
.doc h2{margin:40px 0 12px;font-size:24px;line-height:32px}
.doc h3{margin:36px 0 12px;color:var(--text)}
.doc p{color:var(--text-2);margin-bottom:12px}
.doc ul{padding-left:22px;color:var(--text-2);margin-bottom:12px}
.doc li{margin-bottom:6px}
.doc strong{color:var(--text)}
.toc{background:var(--surface);border-radius:var(--r-lg);padding:24px;margin:24px 0}
.toc a{display:block;padding:6px 0;color:var(--text-2);font-size:14px}
.callout{background:var(--surface);border-left:4px solid var(--lime);border-radius:var(--r-md);padding:20px 24px;margin:24px 0}
.callout strong{color:var(--lime-fixed)}
.notice-bold{background:var(--surface);border:2px solid var(--coral);border-radius:var(--r-md);padding:20px 24px;margin:24px 0;font-weight:700}
table.glance{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px;display:block;overflow-x:auto}
table.glance tbody{display:table;width:100%}
table.glance th,table.glance td{border:1px solid var(--outline-var);padding:10px 12px;text-align:left}
table.glance th{background:var(--surface-high);color:var(--text)}
@media(max-width:480px){table.glance th,table.glance td{padding:6px 6px;font-size:12px;line-height:16px}}
@media(max-width:380px){table.glance th,table.glance td{padding:6px 5px;font-size:12px}}
/* cookie banner + modal (D-5) */
.cookie{position:fixed;bottom:0;left:0;right:0;background:var(--surface-lowest);border-top:1px solid var(--outline-var);padding:16px var(--container-pad);display:none;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;z-index:60;max-height:40vh;overflow-y:auto}
.cookie.open{display:flex}
.cookie p{font-size:13px;color:var(--text-2);flex:1;min-width:240px}
.cookie .btn{padding:10px 20px;font-size:13px}
.cookie-modal{position:fixed;inset:0;background:rgba(12,12,34,.8);display:none;align-items:center;justify-content:center;z-index:70;padding:20px}
.cookie-modal.open{display:flex}
.cookie-modal .box{background:var(--surface);border:1px solid var(--outline-var);border-radius:var(--r-xl);padding:28px;max-width:480px;width:100%;display:flex;flex-direction:column;gap:16px}
.cookie-row{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--surface-high);border-radius:var(--r-md);padding:14px 16px}
.cookie-row .lbl{font-weight:700}
.cookie-row .desc{font-size:13px;color:var(--text-2)}
.toggle{position:relative;width:52px;height:28px;flex:none;border-radius:var(--r-full);background:var(--surface-bright);border:1px solid var(--outline-var);cursor:pointer}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--text-2);transition:left .15s,background .15s}
.toggle[aria-checked="true"]{background:var(--lime)}
.toggle[aria-checked="true"]::after{left:27px;background:var(--on-lime)}
.toggle[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
/* overlay (how to play) */
.overlay{position:fixed;inset:0;background:rgba(12,12,34,.82);display:none;align-items:center;justify-content:center;z-index:70;padding:20px}
.overlay.open{display:flex}
.overlay .box{background:var(--surface);border:1px solid var(--outline-var);border-radius:var(--r-xl);padding:28px;max-width:520px;width:100%;display:flex;flex-direction:column;gap:14px;max-height:86vh;overflow-y:auto}
.overlay ol{padding-left:22px;color:var(--text-2)}
.overlay li{margin-bottom:10px}
/* misc */
.crumb{font-size:13px;color:var(--text-2);margin-bottom:12px}
.crumb a{color:var(--text-2)}
h1.page-h{margin-bottom:16px}
.section-intro{color:var(--text-2);max-width:720px;margin-bottom:32px;font-size:17px;line-height:27px}
.guide-item{display:flex;gap:20px;background:var(--surface);border-radius:var(--r-xl);padding:24px;margin-bottom:16px;align-items:flex-start}
.guide-item .num{font-family:var(--display-font);font-size:32px;font-weight:800;color:var(--lime-fixed);min-width:44px;height:44px}
ul.checks{list-style:none;display:grid;gap:14px}
ul.checks li{display:flex;gap:12px;align-items:flex-start;color:var(--text-2)}
ul.checks li .msicon{color:var(--lime-fixed)}
.center-cta{text-align:center;margin-top:36px}
.msicon{display:inline-flex;align-items:center;justify-content:center;flex:none}
.msicon-svg{width:1em;height:1em;display:block}
/* animations (end screen) */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.anim-in{animation:fadeUp .2s ease-out both}
.anim-fade{animation:fadeIn .15s ease-out both}
.anim-pulse{animation:pulse .5s ease-out 1}
.loading-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--lime);animation:pulse 1s infinite}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}