:root{
  --base:#0a0e14; --surface:#131a24; --surface-2:#0e141d;
  --grid:#1e2a38; --grid-soft:#172230;
  --teal:#5eead4; --teal-dim:#2f7d72; --amber:#f5a623;
  --text:#c8d3e0; --muted:#6b7c93; --white:#eef4fb;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--base);color:var(--text);font-family:var(--sans);
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
/* scanline atmosphere */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(94,234,212,.02) 0 1px,transparent 1px 3px);
  mix-blend-mode:screen;opacity:.6;
}

/* ---------- BOOT ---------- */
#boot{position:fixed;inset:0;z-index:100;background:var(--base);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  font-family:var(--mono);font-size:13px;color:var(--teal);padding:24px}
#boot pre{line-height:1.5;white-space:pre-wrap;max-width:560px;width:100%}
.blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- HUD ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 34px;border-bottom:1px solid var(--grid);
  background:linear-gradient(180deg,rgba(10,14,20,.95),rgba(10,14,20,.75));
  backdrop-filter:blur(6px)}
.brand{font-family:var(--mono);font-weight:700;letter-spacing:.5px;color:var(--white);font-size:24px}
.brand span{color:var(--teal)}
.tagline{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-top:4px}
.hud-stats{display:flex;gap:30px;font-family:var(--mono)}
.stat{text-align:right}
.stat b{display:block;font-size:30px;color:var(--teal);font-weight:700;transition:color .3s}
.stat small{font-size:13px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.stat.locked b{color:var(--grid)}

/* ---------- BANNER ---------- */
.banner{position:fixed;top:124px;left:50%;transform:translateX(-50%);z-index:24;
  font-family:var(--mono);font-weight:700;letter-spacing:1px;white-space:nowrap;text-align:center;
  font-size:clamp(26px,5vw,46px);color:var(--white)}
.banner span{color:var(--teal)}

/* ---------- STAGE ---------- */
#stage{position:fixed;inset:0;z-index:10}
canvas{display:block;width:100%;height:100%;cursor:grab}
canvas:active{cursor:grabbing}

.hint{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:25;
  font-family:var(--mono);font-size:15px;color:var(--text);letter-spacing:1px;
  border:1px solid var(--grid);padding:11px 20px;border-radius:3px;background:rgba(19,26,36,.85)}
.hint b{color:var(--teal)}
.progress{position:fixed;bottom:18px;right:18px;z-index:25;font-family:var(--mono);
  background:rgba(19,26,36,.85);border:1px solid var(--grid);border-radius:5px;
  padding:16px 22px;min-width:230px}
.progress-label{font-size:18px;letter-spacing:1.5px;color:var(--text);text-transform:uppercase}
.progress-label b{color:var(--amber);font-size:28px}
.progress-track{margin-top:11px;height:8px;border-radius:4px;background:var(--grid);overflow:hidden}
.progress-fill{height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--teal),var(--amber));
  box-shadow:0 0 8px rgba(245,166,35,.5);transition:width .45s cubic-bezier(.4,0,.2,1)}

.topnav{position:fixed;top:134px;left:34px;z-index:25;display:flex;gap:14px}
.escape,.arcade{font-family:var(--mono);font-size:15px;text-decoration:none;
  border-radius:3px;padding:13px 24px;letter-spacing:1px;font-weight:700;transition:.2s}
.escape{color:var(--muted);border:1px solid var(--grid)}
.escape:hover{color:var(--teal);border-color:var(--teal-dim)}
.arcade{color:var(--amber);border:1px solid #3d3320}
.arcade:hover{border-color:var(--amber);box-shadow:0 0 12px rgba(245,166,35,.3)}

/* ---------- PANEL ---------- */
#panel{position:fixed;top:0;right:-460px;width:440px;max-width:90vw;height:100%;z-index:40;
  background:var(--surface);border-left:1px solid var(--grid);
  transition:right .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;
  box-shadow:-20px 0 60px rgba(0,0,0,.5)}
#panel.open{right:0}
.p-head{padding:22px 24px 16px;border-bottom:1px solid var(--grid)}
.p-kicker{font-family:var(--mono);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--amber);display:flex;align-items:center;gap:8px}
.p-kicker::before{content:"";width:7px;height:7px;background:var(--amber);border-radius:50%;box-shadow:0 0 8px var(--amber)}
.p-title{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--white);margin-top:10px;line-height:1.15}
.p-body{padding:22px 24px;overflow-y:auto;flex:1;line-height:1.65;font-size:14px}
.p-body p{margin-bottom:14px}
.p-body h4{font-family:var(--mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--teal);margin:20px 0 8px}
.tag{display:inline-block;font-family:var(--mono);font-size:10px;color:var(--teal);border:1px solid var(--teal-dim);
  padding:3px 9px;border-radius:2px;margin:0 6px 6px 0;letter-spacing:.5px}
.p-close{position:absolute;top:18px;right:18px;background:none;border:1px solid var(--grid);color:var(--muted);
  font-family:var(--mono);width:30px;height:30px;border-radius:2px;cursor:pointer;font-size:14px;transition:.2s}
.p-close:hover{color:var(--teal);border-color:var(--teal-dim)}
.cta{display:block;margin:8px 24px 24px;padding:14px;text-align:center;font-family:var(--mono);
  font-size:13px;letter-spacing:1px;color:var(--base);background:var(--teal);text-decoration:none;
  border-radius:2px;font-weight:700;transition:.2s}
.cta:hover{background:var(--white);transform:translateY(-1px)}

/* ---------- FALLBACK / CLASSIC ---------- */
#classic{display:none}
.nojs #classic,.fallback #classic{display:block;position:fixed;inset:0;z-index:200;
  background:var(--base);overflow-y:auto;padding:40px 24px;font-family:var(--sans)}
#classic .wrap{max-width:760px;margin:0 auto}
#classic h1{font-family:var(--mono);color:var(--white);font-size:32px;margin-bottom:6px}
#classic h2{font-family:var(--mono);color:var(--teal);font-size:14px;letter-spacing:2px;text-transform:uppercase;margin:34px 0 12px;border-bottom:1px solid var(--grid);padding-bottom:8px}
#classic h3{color:var(--white);font-size:16px;margin:18px 0 4px}
#classic p{line-height:1.7;margin-bottom:10px;color:var(--text)}
#classic .lede{color:var(--muted);margin-bottom:20px}
#classic a{color:var(--teal)}

@media (max-width:760px){
  .hud-stats{display:none}
  header{padding:16px 18px}
  .brand{font-size:19px}
  .tagline{font-size:11px}
  .banner{top:88px}
  .topnav{top:128px;left:16px;gap:10px}
  .escape,.arcade{font-size:13px;padding:11px 16px}
  .hint{font-size:12px;bottom:12px;max-width:94vw;text-align:center;line-height:1.45;padding:8px 14px}
  .progress{left:50%;right:auto;transform:translateX(-50%);bottom:120px;min-width:0;padding:9px 16px}
  .progress-label{font-size:13px}
  .progress-label b{font-size:19px}
  .progress-track{margin-top:6px;height:6px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  body::after{display:none}
}