:root{
  --bg:#040509;
  --panel:rgba(11,15,22,.86);
  --ink:#f3f0df;
  --dim:#9a9d9a;
  --green:#80ffb8;
  --cyan:#66e6ff;
  --red:#ff4d64;
  --gold:#f1cf75;
  --line:rgba(128,255,184,.36);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overscroll-behavior-y:auto;touch-action:pan-y}
body{background:radial-gradient(circle at 20% 0%,rgba(102,230,255,.18),transparent 32%),radial-gradient(circle at 80% 100%,rgba(255,77,100,.14),transparent 34%),linear-gradient(#05070d,#030405);}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px);mix-blend-mode:screen}
.shell{width:min(1180px,100%);min-height:100vh;margin:auto;padding:12px;display:grid;grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:auto 1fr auto;gap:12px}
.mast,.hud,.notes,.panel{border:1px solid var(--line);background:var(--panel);box-shadow:0 0 26px rgba(102,230,255,.08),inset 0 0 0 1px rgba(255,255,255,.035);backdrop-filter:blur(8px)}
.mast{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px}.mast h1{margin:0;color:var(--green);font-size:clamp(24px,5vw,44px);letter-spacing:.08em;text-shadow:0 0 14px rgba(128,255,184,.7)}.mast p{margin:2px 0 0;color:var(--dim);font-size:13px}.back,a{color:var(--cyan);text-decoration:none}.stage-wrap{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle,rgba(128,255,184,.06),transparent 65%);overflow:hidden}canvas{width:min(100%,calc(100vh - 132px));max-height:calc(100vh - 132px);aspect-ratio:1;display:block;touch-action:none;image-rendering:auto}.hud{padding:14px;display:grid;align-content:start;gap:10px}.hud div{display:flex;justify-content:space-between;gap:12px;padding:10px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.15)}.hud span{color:var(--dim);font-size:12px;text-transform:uppercase}.hud strong{color:var(--gold)}button{font:inherit;color:var(--ink);background:#121820;border:1px solid rgba(102,230,255,.5);padding:10px 12px;cursor:pointer;box-shadow:inset 3px 0 var(--cyan)}button:hover,button:focus-visible{outline:none;background:#1b2530;border-color:var(--green)}#resetBtn{box-shadow:inset 3px 0 var(--red)}.notes{grid-column:1/-1;padding:12px 14px;color:var(--dim);font-size:13px}.notes h2{margin:0 0 6px;color:var(--cyan);font-size:13px;text-transform:uppercase;letter-spacing:.12em}.notes p{margin:.4rem 0}.panel{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(560px,92%);padding:20px;z-index:5}.panel h2{margin:.2rem 0 1rem;color:var(--gold);font-size:clamp(24px,6vw,38px)}.panel p,.panel li{color:#d6d5ca;line-height:1.5}.panel ul{padding-left:1.1rem}.kicker{color:var(--red)!important;font-size:12px;letter-spacing:.13em}.message{position:absolute;left:12px;right:12px;bottom:12px;text-align:center;color:var(--gold);text-shadow:0 0 12px #000;background:rgba(0,0,0,.35);padding:8px;min-height:34px;pointer-events:none}.hidden{display:none!important}@media(max-width:860px){.shell{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;padding:8px}.mast{align-items:flex-start;gap:10px;flex-wrap:wrap}.stage-wrap{min-height:auto}canvas{width:100%;max-height:none}.hud{grid-template-columns:repeat(2,1fr);font-size:14px}.hud button{grid-column:1/-1}.notes{font-size:12px}.mast p{font-size:12px}}@media(max-width:430px){.hud{grid-template-columns:1fr}.panel{padding:16px}.panel ul{display:none}.mast h1{letter-spacing:.03em}}