:root{color-scheme:dark;--ink:#f9f3ff;--muted:#bcb2d7;--violet:#8e6cff;--pink:#ff66c4;--amber:#ffcc66;--panel:rgba(21,17,52,.82);--line:rgba(210,196,255,.18)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#090817;color:var(--ink);font-family:Inter,ui-rounded,"SF Pro Rounded",system-ui,sans-serif}body{background:radial-gradient(circle at 18% 8%,#2b2159 0,transparent 30%),radial-gradient(circle at 82% 18%,#3a183f 0,transparent 26%),linear-gradient(155deg,#090817,#120d29 62%,#070612);overflow-x:hidden}.shell{width:min(1100px,calc(100% - 28px));margin:auto;padding:34px 0 26px}header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.eyebrow{margin:0 0 4px;text-transform:uppercase;letter-spacing:.18em;color:var(--amber);font-weight:800;font-size:.72rem}h1{font-size:clamp(2.1rem,5vw,4.4rem);line-height:.9;margin:0;letter-spacing:-.06em}.lede{color:var(--muted);max-width:650px;margin:12px 0 0;font-size:clamp(.96rem,2vw,1.1rem)}button{font:inherit;color:var(--ink);background:#28214c;border:1px solid var(--line);border-radius:14px;min-height:46px;padding:10px 18px;font-weight:800;cursor:pointer;box-shadow:0 7px 20px rgba(0,0,0,.18);transition:transform .12s,background .12s,border-color .12s}button:hover{background:#372d65;border-color:#8e6cff}button:active{transform:translateY(2px)}button:focus-visible,canvas:focus-visible{outline:3px solid var(--amber);outline-offset:3px}.ghost{background:rgba(25,21,50,.76)}.game-card{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:14px;box-shadow:0 26px 90px rgba(0,0,0,.38);backdrop-filter:blur(16px)}.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}.hud div{background:#0f0d24;border:1px solid var(--line);border-radius:13px;padding:9px 14px;display:flex;align-items:center;justify-content:space-between}.hud span{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:800}.hud strong{font-variant-numeric:tabular-nums;color:var(--amber)}.stage-wrap{position:relative;border-radius:18px;overflow:hidden;background:#080713;aspect-ratio:8/5;border:1px solid rgba(255,255,255,.12)}canvas{display:block;width:100%;height:100%;touch-action:none}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;background:linear-gradient(rgba(7,6,20,.62),rgba(7,6,20,.88));transition:opacity .2s}.overlay[hidden]{display:none}.moon-mark{font-size:3.6rem;color:var(--amber);filter:drop-shadow(0 0 20px #ffcc6688)}.overlay p{max-width:570px;color:var(--muted);margin:8px auto}.overlay #kicker{color:var(--pink);text-transform:uppercase;letter-spacing:.15em;font-weight:900;font-size:.74rem}.overlay h2{font-size:clamp(1.7rem,4vw,3rem);margin:3px 0}.primary{margin-top:12px;background:linear-gradient(135deg,var(--violet),#b052d5);border:0;min-width:190px}.controls{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:10px;margin-top:12px}.controls .launch{background:linear-gradient(135deg,#663fe3,#a84db8)}.secondary{display:flex;justify-content:center;gap:10px;margin-top:10px}.status{text-align:center;color:var(--muted);min-height:1.5em;margin:10px 0 0}.guide{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.guide div{background:rgba(22,18,49,.62);border:1px solid var(--line);border-radius:14px;padding:13px}.guide b,.guide span{display:block}.guide b{color:var(--amber);margin-bottom:4px}.guide span{font-size:.84rem;color:var(--muted)}footer{text-align:center;color:#8f86a8;font-size:.8rem;margin-top:18px}footer a{color:#cdbdff}@media(max-width:700px){.shell{width:min(100% - 18px,1100px);padding-top:18px}header{align-items:flex-start}.hud{grid-template-columns:1fr 1fr}.guide{grid-template-columns:1fr 1fr}.stage-wrap{aspect-ratio:3/4}.controls button{padding:8px}.overlay{padding:14px}.overlay h2{font-size:1.65rem}.moon-mark{font-size:2.8rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}