:root{--bg:#080b0f;--panel:#090e14d1;--panel-strong:#070a0feb;--line:#e9e1c42e;--ink:#f5f0df;--muted:#f5f0dfad;--red:#e2352f;--gold:#f0c95a;--blue:#55cfff;--violet:#8f6cff;--green:#9ce27d;--danger:#ff796d;--title-font:"Avenir Next Condensed", "Bahnschrift", "Arial Narrow", sans-serif;--body-font:"Avenir Next", "Trebuchet MS", sans-serif;--mono-font:"Menlo", "SFMono-Regular", monospace;color:var(--ink);font-family:var(--body-font);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at 18% 8%, #e2352f38, transparent 18rem), radial-gradient(circle at 86% 20%, #55cfff29, transparent 20rem), linear-gradient(180deg, #111822 0%, var(--bg) 62%, #030405 100%)}*{box-sizing:border-box}html,body{min-height:100%;margin:0}button{cursor:pointer;font:inherit}#app{min-height:100vh}.game-shell{grid-template-columns:minmax(0,1.9fr) minmax(18rem,25rem);gap:1rem;min-height:100vh;padding:1rem;display:grid}.game-stage{border:1px solid var(--line);background:#07090d;border-radius:1rem;min-height:calc(100vh - 2rem);position:relative;overflow:hidden;box-shadow:0 1.5rem 4rem #00000061,inset 0 0 0 1px #ffffff0a}.game-stage:after{content:"";pointer-events:none;mix-blend-mode:screen;background:linear-gradient(#ffffff0f,#0000 18%),linear-gradient(90deg,#e2352f33,#0000 15% 85%,#55cfff26);position:absolute;inset:0}.viewport{width:100%;height:100%;min-height:calc(100vh - 2rem)}.viewport canvas{width:100%;height:100%;display:block}.marquee{z-index:2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);font-family:var(--title-font);letter-spacing:.22em;text-transform:uppercase;background:#05080cb8;border:1px solid #ffffff29;border-radius:999px;align-items:center;gap:.7rem;padding:.55rem .9rem;font-size:.82rem;font-weight:800;display:inline-flex;position:absolute;top:.85rem;left:.85rem}.marquee-badge{background:var(--red);color:#fff7ed;letter-spacing:.08em;border-radius:999px;padding:.12rem .5rem}.stage-overlay{z-index:4;background:radial-gradient(circle at 50% 18%,#55cfff2e,#0000 18rem),linear-gradient(#0000002e,#000000b8);place-items:start center;padding:4.4rem 1.25rem 1.25rem;transition:opacity .25s,visibility .25s;display:grid;position:absolute;inset:0}.stage-overlay[hidden]{opacity:0;visibility:hidden;pointer-events:none}.overlay-card{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:linear-gradient(135deg,#e2352f24,#0000 28%),linear-gradient(225deg,#55cfff1f,#0000 32%),#070a0fe0;border:1px solid #f5f0df38;border-radius:1rem;width:min(34rem,100%);padding:1rem;box-shadow:0 1.25rem 4rem #00000075}.overlay-eyebrow{color:var(--gold);font-family:var(--title-font);letter-spacing:.18em;text-transform:uppercase;margin:0 0 .4rem;font-size:.86rem;font-weight:800}.overlay-card h1{max-width:12ch;font-family:var(--title-font);letter-spacing:0;margin:0 0 .75rem;font-size:clamp(2.4rem,5vw,4.6rem);line-height:.9}.overlay-card p{color:var(--muted);margin:0}.character-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:.85rem 0 0;display:grid}.world-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin-top:.75rem;display:grid}.world-option{min-height:2.85rem;color:var(--ink);font-family:var(--title-font);letter-spacing:.06em;text-transform:uppercase;background:#ffffff0f;border:1px solid #f5f0df2e;border-radius:.75rem;padding:.55rem;font-weight:800}.world-option.is-selected{background:#f0c95a33;border-color:#f0c95ac7}.character-option{min-height:10.5rem;color:var(--ink);font-family:var(--title-font);letter-spacing:.08em;text-transform:uppercase;text-align:left;background:#ffffff0f;border:1px solid #f5f0df2e;border-radius:.85rem;gap:.55rem;padding:.55rem;font-weight:800;display:grid;overflow:hidden}.character-option img{object-fit:cover;object-position:top center;filter:saturate(1.02)contrast(1.04);border-radius:.55rem;width:100%;height:8rem}.character-option span{padding-inline:.25rem}.character-option.is-selected{background:linear-gradient(#f0c95a3d,#e2352f2e);border-color:#f0c95ac7;box-shadow:0 0 1.5rem #f0c95a29}.overlay-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:1rem 0 1.2rem;padding:0;list-style:none;display:grid}.overlay-list li{min-height:5rem;color:var(--muted);background:#ffffff0b;border:1px solid #f5f0df1f;border-radius:.8rem;padding:.75rem;font-size:.93rem}.overlay-list strong{color:var(--ink);font-family:var(--title-font);letter-spacing:.04em;margin-bottom:.2rem;font-size:1rem;display:block}.overlay-cta{flex-wrap:wrap;align-items:center;gap:.85rem;margin-top:.85rem;display:flex}.primary-button,.secondary-button{min-height:2.75rem;font-family:var(--title-font);letter-spacing:.08em;text-transform:uppercase;border:1px solid #f5f0df2e;border-radius:.7rem;padding:.75rem 1.05rem;font-weight:800;transition:transform .18s,box-shadow .18s,border-color .18s}.primary-button{color:#160b08;background:linear-gradient(180deg, #ff604f, var(--red));border-color:#ffffff38;box-shadow:0 .9rem 2.4rem #e2352f47}.secondary-button{color:var(--ink);background:#ffffff14}.primary-button:hover,.secondary-button:hover,.character-option:hover,.world-option:hover{transform:translateY(-1px)}.primary-button:focus-visible,.secondary-button:focus-visible,.character-option:focus-visible,.world-option:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.footer-note{color:#f5f0df94;max-width:18rem;font-size:.9rem}.hud{grid-template-rows:repeat(5,max-content);align-content:start;gap:.9rem;display:grid}.hud-card{border:1px solid var(--line);background:linear-gradient(180deg, #ffffff0e, transparent 26%), var(--panel);border-radius:.9rem;padding:.95rem;box-shadow:0 1rem 2.7rem #0003}.hud-card h2,.hud-card h3{font-family:var(--title-font);letter-spacing:.1em;text-transform:uppercase;margin:0 0 .75rem}.command-card{background:radial-gradient(circle at top right, #e2352f38, transparent 44%), var(--panel-strong)}.timer-label{color:var(--muted);font-family:var(--title-font);letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;font-weight:800}.timer-value{font-family:var(--title-font);letter-spacing:0;margin-top:.3rem;font-size:clamp(2.6rem,4vw,4rem);font-weight:800;line-height:.92}.status-text,.result-copy{color:var(--muted);margin:.55rem 0 0}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;display:grid}.stat-grid div{background:#ffffff0e;border:1px solid #f5f0df1a;border-radius:.75rem;min-height:4.2rem;padding:.7rem}.stat-grid span{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;display:block}.stat-grid strong{font-family:var(--title-font);margin-top:.2rem;font-size:2rem;line-height:1;display:block}.info-grid,.controls-list{gap:.55rem;display:grid}.info-pill{min-height:2.35rem;color:var(--muted);background:#ffffff0e;border-radius:.7rem;align-items:center;gap:.5rem;padding:.45rem .6rem;display:flex}.info-pill b{color:var(--ink)}.pill-dot{background:var(--gold);border-radius:999px;flex:none;width:.55rem;height:.55rem;box-shadow:0 0 1rem #f0c95a61}.pill-dot.is-red{background:var(--red)}.pill-dot.is-blue{background:var(--blue)}.controls-list{color:var(--muted);margin:0;padding:0;list-style:none}.controls-list code{min-width:2.15rem;min-height:1.55rem;color:var(--ink);font-family:var(--mono-font);background:#55cfff21;border-radius:.45rem;justify-content:center;align-items:center;margin-right:.25rem;font-size:.82rem;display:inline-flex}.result-card[hidden],.restart-button[hidden]{display:none}.result-score{font-family:var(--title-font);font-size:2.5rem;line-height:1}.result-score.is-success{color:var(--green)}.result-score.is-failure{color:var(--danger)}@media (width<=1080px){.game-shell{grid-template-columns:1fr}.game-stage,.viewport{min-height:66vh}}@media (width<=720px){.game-shell{padding:.65rem}.game-stage,.viewport{border-radius:.8rem;min-height:72vh}.stage-overlay{padding:3.8rem .75rem .75rem;overflow-y:auto}.overlay-card{padding:.8rem}.overlay-card h1{max-width:11ch;font-size:2.5rem}.character-picker,.world-picker,.overlay-list,.stat-grid{grid-template-columns:1fr}.character-option{grid-template-columns:6.8rem 1fr;align-items:center;min-height:7.2rem}.character-option img{height:5.8rem}.marquee{letter-spacing:.14em;max-width:calc(100% - 1.5rem);font-size:.72rem}}
