:root{color-scheme:dark;--cyan:#42e8ff;--lime:#b7ff58;--orange:#ffb547;--pink:#ff4f9a;--ink:#06121a;--panel:rgba(7,24,32,.96)}
*{box-sizing:border-box}html,body{width:100%;height:100%;height:100dvh;margin:0;overflow:hidden;background:var(--ink);color:#effcff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button{font:inherit}button:focus-visible{outline:3px solid #fff;outline-offset:3px}.skip-link{position:fixed;left:1rem;top:-5rem;z-index:99;background:#fff;color:#000;padding:.7rem}.skip-link:focus{top:1rem}
#game-shell,#game-canvas{position:fixed;inset:0;width:100%;height:100%}#game-canvas{display:block;outline:none;touch-action:none}
.hud{position:fixed;left:clamp(.55rem,2vw,1.4rem);right:clamp(.55rem,2vw,1.4rem);top:max(.55rem,env(safe-area-inset-top));display:flex;justify-content:space-between;gap:1rem;pointer-events:none;z-index:5}.brand,.meters span,.mission,.sample-card{border:1px solid rgba(66,232,255,.38);background:rgba(4,19,27,.88);box-shadow:0 10px 30px rgba(0,0,0,.28),inset 0 0 22px rgba(66,232,255,.05);backdrop-filter:blur(10px)}.brand{padding:.52rem .78rem;border-left:4px solid var(--lime)}.brand small,.mission small,.meters small,.sample-card small{display:block;color:#8fb5c0;font-size:.6rem;font-weight:900;letter-spacing:.12em}.brand strong{font-size:clamp(.82rem,1.4vw,1.15rem);letter-spacing:.04em}.brand em{color:var(--orange);font-style:normal}.meters{display:flex;gap:.35rem}.meters span{min-width:5rem;padding:.47rem .58rem;text-align:center}.meters b{font:900 .88rem ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff}
.mission{position:fixed;z-index:5;top:5rem;left:50%;transform:translateX(-50%);width:min(45rem,calc(100% - 2rem));padding:.62rem .9rem;text-align:center;pointer-events:none;border-color:rgba(183,255,88,.38)}.mission strong{display:block;font-size:.93rem}.mission span{display:block;color:#b1cbd3;font-size:.77rem;margin-top:.18rem}.sample-card{position:fixed;z-index:7;right:1rem;bottom:8.5rem;width:12rem;padding:.68rem .8rem;border-color:var(--orange)}.sample-card[hidden]{display:none}.sample-card strong{display:block;color:var(--lime);font-size:1rem;margin:.15rem 0}.sample-card strong.bad{color:var(--pink)}.sample-card span{color:#bed4da;font:700 .73rem ui-monospace,monospace}
.message{position:fixed;left:50%;bottom:8.6rem;transform:translateX(-50%) translateY(1rem);z-index:8;background:rgba(6,21,29,.95);border:1px solid var(--cyan);padding:.68rem 1rem;opacity:0;transition:.18s;pointer-events:none;max-width:min(42rem,86vw);text-align:center}.message.show{opacity:1;transform:translateX(-50%) translateY(0)}.interaction{position:fixed;z-index:6;left:50%;bottom:2rem;transform:translateX(-50%);display:flex;gap:.55rem;align-items:center;background:#071923ed;border:1px solid var(--lime);padding:.55rem .8rem;font-weight:900}.interaction[hidden]{display:none}.interaction kbd,.controls kbd{border:1px solid #52747b;background:#0b2732;border-radius:.25rem;padding:.12rem .35rem;box-shadow:inset 0 -2px #041015}
.overlay{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(19,100,100,.38),rgba(2,10,14,.96) 60%);z-index:20;overflow-y:auto;padding-top:max(1rem,env(safe-area-inset-top));padding-right:max(1rem,env(safe-area-inset-right));padding-bottom:max(1rem,env(safe-area-inset-bottom));padding-left:max(1rem,env(safe-area-inset-left))}.overlay[hidden]{display:none}.panel{width:min(47rem,100%);border:1px solid rgba(66,232,255,.55);background:linear-gradient(145deg,rgba(7,29,38,.99),rgba(4,15,23,.99));padding:clamp(1.2rem,4vw,2.7rem);box-shadow:0 24px 80px #000c,inset 0 0 80px rgba(66,232,255,.04)}.eyebrow{color:var(--cyan);letter-spacing:.18em;font-size:.72rem;font-weight:900}.panel h1{font-size:clamp(3rem,8vw,6.2rem);line-height:.76;margin:.65rem 0 1.2rem;letter-spacing:-.065em}.panel h1 span{color:var(--orange);font-size:.55em}.pitch{max-width:40rem;color:#c9dde2;line-height:1.5}.loop{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:1rem 0}.loop span{border:1px solid #28525d;padding:.62rem;font-weight:850;font-size:.76rem}.loop b{color:var(--lime);margin-right:.35rem}.controls{display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem;margin:1rem 0}.controls span{border:1px solid #244851;padding:.5rem .25rem;text-align:center}.controls small{display:block;color:#9bb9c0;font-size:.66rem;margin-top:.32rem}.primary{width:100%;min-height:48px;border:0;background:linear-gradient(90deg,var(--cyan),var(--lime));color:#04131a;padding:.95rem;font-weight:950;cursor:pointer;box-shadow:0 0 30px rgba(66,232,255,.18)}.primary small{display:block;font-size:.66rem;margin-top:.2rem}.note{font-size:.7rem;text-align:center;color:#88a8b0;margin:.75rem 0 0}
.end-panel h2{font-size:clamp(2.2rem,7vw,5rem);line-height:.9;margin:.45rem 0;color:var(--lime)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin:1rem 0}.stats span{border:1px solid #2b515a;padding:.68rem;text-align:center}.stats small{display:block;color:#8fadb5;font-size:.62rem}.stats b{font:900 1.35rem ui-monospace,monospace}.debrief{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin:1rem 0 1.1rem}.debrief article{border-left:3px solid var(--cyan);background:rgba(66,232,255,.055);padding:.7rem}.debrief b{display:block;color:var(--orange);font-size:.72rem;margin-bottom:.2rem}.debrief span{display:block;color:#bdd2d7;font-size:.74rem;line-height:1.35}
.stats-label{margin:.9rem 0 .35rem;color:#88a8b0;font-size:.6rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.stats-label+.stats{margin-top:.35rem}
.touch-controls{display:none;position:fixed;z-index:10;left:max(.7rem,env(safe-area-inset-left));right:max(.7rem,env(safe-area-inset-right));bottom:max(.7rem,env(safe-area-inset-bottom));justify-content:space-between;align-items:end;pointer-events:none}.touch-controls button{pointer-events:auto;min-width:44px;min-height:44px;border:1px solid rgba(66,232,255,.55);background:rgba(5,22,30,.84);color:#fff;border-radius:.4rem;font-weight:950;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none}.touch-controls button:active{filter:brightness(1.25)}.dpad{width:9.4rem;height:9.4rem;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:.2rem}.dpad [data-control=up]{grid-area:1/2}.dpad [data-control=left]{grid-area:2/1}.dpad [data-control=down]{grid-area:2/2}.dpad [data-control=right]{grid-area:2/3}.touch-actions{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}.touch-actions button{padding:.72rem}.touch-actions .act{grid-column:1/3;border-color:var(--lime);padding:.95rem}
@media(max-width:760px),(pointer:coarse){.hud{top:max(.3rem,env(safe-area-inset-top));left:.3rem;right:.3rem}.brand{padding:.32rem .42rem}.brand small{display:none}.brand strong{font-size:.66rem}.meters{gap:.14rem}.meters span{min-width:0;padding:.28rem .3rem}.meters small{font-size:.42rem}.meters b{font-size:.62rem}.meters span:nth-child(2){display:none}.mission{top:3.1rem;padding:.38rem .48rem}.mission strong{font-size:.7rem}.mission span{display:none}.touch-controls{display:flex}.interaction{bottom:10.7rem}.message{bottom:10.9rem;font-size:.74rem}.sample-card{right:.5rem;bottom:10.8rem;width:10.8rem;padding:.5rem}.sample-card strong{font-size:.78rem}.sample-card span{font-size:.64rem}.controls{grid-template-columns:repeat(3,1fr)}.controls span:nth-child(4),.controls span:nth-child(5){display:none}.panel{padding:1rem}.panel h1{font-size:3.25rem}.pitch{font-size:.84rem}.stats b{font-size:1rem}.debrief{grid-template-columns:1fr}.debrief article{padding:.5rem}.end-panel{margin:auto}}
@media(max-width:380px){.dpad{width:8.2rem;height:8.2rem}.touch-actions button{padding:.52rem;font-size:.72rem}.touch-actions .act{padding:.75rem}.interaction{bottom:9.5rem}.message,.sample-card{bottom:9.7rem}}
@media(orientation:landscape) and (max-height:520px){.overlay{display:block;padding-top:max(.4rem,env(safe-area-inset-top));padding-bottom:max(.4rem,env(safe-area-inset-bottom))}.overlay[hidden]{display:none}.panel{max-width:44rem;margin:auto;padding:.72rem 1rem}.panel h1{font-size:2.65rem;margin:.28rem 0 .5rem}.pitch{margin:.35rem 0;font-size:.74rem;line-height:1.3}.controls,.note{display:none}.loop{margin:.45rem 0}.primary{padding:.6rem}.hud{top:max(.22rem,env(safe-area-inset-top))}.mission{top:2.75rem}.dpad{width:8rem;height:8rem}.touch-controls{bottom:max(.3rem,env(safe-area-inset-bottom))}.touch-actions button{padding:.48rem;font-size:.7rem}.touch-actions .act{padding:.68rem}.interaction{bottom:8.5rem}.message{bottom:8.7rem}.sample-card{bottom:8.7rem}.end-panel h2{font-size:2.1rem}.stats{margin:.5rem 0}.debrief{grid-template-columns:repeat(3,1fr);margin:.5rem 0}.debrief article{padding:.42rem}.debrief span{font-size:.65rem}}

.controls-touch,.touch-cue{display:none}
.controls-touch b{display:block;color:var(--lime);font-size:.78rem}
.touch-actions button{touch-action:manipulation}
.dpad button{touch-action:none}
@media(max-width:760px),(pointer:coarse){
  .controls-keyboard{display:none}
  .controls.controls-touch{display:grid;grid-template-columns:repeat(2,1fr)}
  .keyboard-cue{display:none}
  .touch-cue{display:inline-flex;border:1px solid var(--lime);background:#0b2732;border-radius:.25rem;padding:.16rem .4rem;box-shadow:inset 0 -2px #041015;font-size:.7rem}
  .message{top:6.9rem;bottom:auto}
  .sample-card{top:11.7rem;right:.5rem;bottom:auto}
}
@media(orientation:landscape) and (max-height:520px){
  .message{top:5.35rem;left:.5rem;bottom:auto;max-width:48vw;transform:translateY(1rem)}
  .message.show{transform:translateY(0)}
  .sample-card{top:5.35rem;right:.5rem;bottom:auto}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}