:root{color-scheme:dark;--cyan:#6ff7ff;--green:#7dff9b;--red:#ff596f;--amber:#ffc35a;--ink:#05090f;--panel:rgba(6,14,24,.94);font-family:Inter,ui-sans-serif,system-ui,sans-serif}
*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;min-height:100%;background:#020407;color:#eefcff;overflow:hidden;touch-action:none}body{display:grid;place-items:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#app{width:min(100vw,780px);display:grid;gap:8px;padding:8px}#stage{position:relative;width:100%;aspect-ratio:1;border:1px solid #1d5260;background:#05090f;box-shadow:0 0 0 1px #071b26,0 0 32px rgba(46,221,255,.12);overflow:hidden}canvas{display:block;width:100%;height:100%}
.screen{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(18px,5vw,44px);background:rgba(2,5,10,.72);backdrop-filter:blur(2px)}.screen:empty{display:none}.card{width:min(100%,560px);padding:clamp(20px,5vw,38px);border:1px solid #36889c;background:linear-gradient(145deg,rgba(8,21,33,.97),rgba(3,8,15,.97));text-align:center;box-shadow:inset 0 0 38px rgba(46,221,255,.05)}
.eyebrow{margin:0 0 8px;color:var(--green);font-size:clamp(11px,2vw,15px);letter-spacing:.18em;font-weight:800}.logo{margin:0;color:#fff;font-size:clamp(38px,9vw,76px);line-height:.88;letter-spacing:-.065em;text-transform:uppercase;text-shadow:0 0 22px rgba(111,247,255,.38)}.tagline{color:var(--cyan);font-weight:750;letter-spacing:.12em;font-size:clamp(13px,2.6vw,20px)}.copy{max-width:42ch;margin:18px auto;color:#bfd0d9;font-size:clamp(14px,2.8vw,18px);line-height:1.45}.hint{margin:22px 0 0;color:white;font-size:clamp(15px,3vw,20px);font-weight:800;animation:pulse 1.7s ease-in-out infinite}.small{font-size:12px;color:#8eabb5;line-height:1.4}.legal{border-left:3px solid var(--amber);padding-left:14px;text-align:left}
.upgrade-card{display:grid;grid-template-columns:46px 1fr auto;gap:12px;align-items:center;width:100%;margin:8px 0;padding:12px;border:1px solid #234454;background:#07111b;text-align:left;color:#eafcff}.upgrade-card.selected{border-color:var(--cyan);background:#0b2531;box-shadow:0 0 18px rgba(111,247,255,.15)}.upgrade-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid currentColor;border-radius:50%;color:var(--cyan);font-weight:900}.upgrade-name{font-weight:850;font-size:16px}.upgrade-desc{color:#a8c3cc;font-size:13px;margin-top:3px}.upgrade-level{color:var(--green);font-size:11px;font-weight:900;letter-spacing:.08em}.results{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:18px 0}.result{padding:10px;background:#07111b;border:1px solid #183947}.result b{display:block;font-size:19px}.result span{font-size:10px;color:#91adb7;letter-spacing:.09em}
.debug-controls{position:absolute;inset:auto 8px 8px 8px;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}.debug-controls button{pointer-events:auto;width:48px;height:44px;border:1px solid #56bfd0;background:rgba(4,18,27,.82);color:white;font-weight:900}.dpad{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(2,42px);gap:3px}.dpad [data-dir=up]{grid-column:2}.dpad [data-dir=left]{grid-column:1}.dpad [data-dir=down]{grid-column:2}.dpad [data-dir=right]{grid-column:3}.debug-controls .tap{border-radius:50%;height:56px;width:56px}.debug-controls .dash{width:58px;color:var(--amber)}.debug-panel{position:absolute;top:48px;left:8px;padding:7px 9px;background:rgba(0,0,0,.82);border:1px solid #28566a;font:11px/1.45 ui-monospace,monospace;color:#bff9ff;white-space:pre;pointer-events:none}
.capability{margin:0;text-align:center;color:#6f8790;font-size:10px;letter-spacing:.04em}.capability span{color:#9ecad2;font-weight:800}@keyframes pulse{50%{opacity:.5}}@media(max-height:620px){#app{width:min(100vw,600px)}.capability{display:none}.card{padding:18px}.copy{margin:10px auto}.hint{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}