:root{color-scheme:dark;--cyan:#68f8ff;--white:#f4feff;--red:#ff5a58;--amber:#ffbf4a;--dim:#78949a;--panel:rgba(0,12,16,.9);--line:rgba(104,248,255,.35)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:var(--white);font-family:Consolas,"SFMono-Regular",monospace}button,input{font:inherit}[hidden]{display:none!important}
body.transparent{background:transparent}#app{position:relative;width:min(100vw,100vh);height:min(100vw,100vh);max-width:600px;max-height:600px;margin:auto;overflow:hidden;background:radial-gradient(circle at center,#07151b,#000 72%);touch-action:none}body.transparent #app{background:transparent}
canvas{display:block;width:100%;height:100%;background:transparent}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));pointer-events:none}.overlay:empty{display:none}.screen{display:none;width:100%;text-align:center;pointer-events:auto}.screen.active{display:grid;justify-items:center;gap:14px;animation:screen-in .18s ease-out}.eyebrow{font-size:14px;letter-spacing:.15em;color:var(--cyan)}h1,h2,p{margin:0}h1{font-size:clamp(42px,11vw,72px);line-height:.82;letter-spacing:.08em}h1 span{color:var(--cyan)}h2{font-size:clamp(18px,4vw,26px);letter-spacing:.12em;color:var(--cyan)}p{font-size:clamp(14px,3vw,18px);line-height:1.45;color:#c8d9dc}.safety-icon,#tutorialGlyph{font-size:64px;color:var(--cyan);filter:drop-shadow(0 0 10px var(--cyan))}
button{min-width:210px;padding:12px 18px;border:1px solid var(--line);background:rgba(1,20,25,.88);color:var(--white);letter-spacing:.08em;text-transform:uppercase}button.primary,button:focus{outline:3px solid var(--cyan);outline-offset:3px;background:var(--cyan);color:#001014}button.compact{min-width:0;font-size:12px;padding:8px 12px}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(410px,90%)}.control-grid span{border:1px solid var(--line);padding:10px;color:var(--dim);font-size:12px}.control-grid b{color:var(--white);font-size:14px}.choice-screen{align-content:center}.choice-screen #choices{display:grid;gap:8px;width:min(440px,95%)}.choice{display:grid;grid-template-columns:42px 1fr auto;align-items:center;text-align:left;gap:8px;min-width:0;width:100%;padding:10px}.choice .icon{font-size:26px;color:var(--cyan)}.choice small{color:var(--dim)}.choice.selected{outline:3px solid var(--cyan);background:var(--cyan);color:#001014}.choice.selected small,.choice.selected .icon{color:#001014}.hint{font-size:12px}.screen label{display:flex;align-items:center;gap:12px;width:min(340px,90%);padding:6px;text-align:left}
#hud{position:absolute;inset:0;pointer-events:none;font-size:12px;text-shadow:0 1px 2px #000}.hud-block{position:absolute;display:flex;flex-direction:column;gap:3px}.hud-tl{left:17px;top:15px;width:122px}.hud-tc{top:15px;left:50%;transform:translateX(-50%);align-items:center}.hud-tr{right:17px;top:15px;align-items:flex-end}.hud-bl{left:17px;bottom:24px}.hud-bc{bottom:20px;left:50%;transform:translateX(-50%);align-items:center;width:150px}.hud-br{right:17px;bottom:24px;align-items:flex-end}.label{display:flex;justify-content:space-between;color:var(--red)}.label.shield{color:var(--cyan)}.bar{height:5px;border:1px solid rgba(255,255,255,.45)}.bar i{display:block;height:100%;width:100%;background:var(--red)}.bar.shield i,.bar.charge i{background:var(--cyan)}.charge{width:100%}.hud-tc b{font-size:18px}.hud-tr b{font-size:20px;color:var(--amber)}#xpBar{position:absolute;bottom:7px;left:16px;right:16px;height:4px;background:rgba(255,255,255,.12)}#xpBar i{display:block;width:0;height:100%;background:var(--cyan)}#warning{position:absolute;top:80px;left:50%;transform:translateX(-50%);color:var(--amber);font-weight:bold;letter-spacing:.1em;white-space:nowrap}#toast{position:absolute;left:50%;top:68%;transform:translate(-50%,-50%);color:var(--cyan);font-size:18px;font-weight:bold;letter-spacing:.08em;white-space:nowrap}
#results{display:grid;grid-template-columns:1fr 1fr;gap:7px 24px;width:min(400px,90%);text-align:left;font-size:13px}#results b{text-align:right;color:var(--cyan)}#debugPanel{position:absolute;top:70px;left:10px;width:190px;padding:8px;background:rgba(0,0,0,.86);border:1px solid var(--cyan);font-size:10px;pointer-events:none}#debugPanel pre{white-space:pre-wrap;margin:6px 0 0}#debugControls{position:fixed;right:12px;bottom:12px;display:flex;gap:14px;padding:10px;background:rgba(0,0,0,.82);border:1px solid var(--line)}#debugControls button{min-width:54px;padding:9px}.dpad{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(2,42px)}.dpad button:nth-child(1){grid-column:2}.dpad button:nth-child(2){grid-row:2;grid-column:1}.dpad button:nth-child(3){grid-row:2;grid-column:2}.dpad button:nth-child(4){grid-row:2;grid-column:3}.gestures{display:grid;grid-template-columns:1fr 1fr;gap:5px}
@keyframes screen-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}@media(max-width:450px){.hud-block{font-size:10px}.hud-tl{width:100px}.hud-bc{width:120px}.control-grid{gap:5px}.screen.active{gap:10px}}