:root{color-scheme:dark;--cyan:#51f3e5;--pink:#ff5fa1;--ink:#070a1a;--muted:#94a0c0}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--ink);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
body{overflow:hidden;color:#f6f9ff}
.game{position:relative;min-height:100svh;overflow:hidden;background:radial-gradient(circle at 50% 0,#182456 0,#070a1a 58%)}
canvas{display:block;width:100%;height:100svh;touch-action:manipulation}
.hud{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:clamp(16px,3vw,34px);pointer-events:none}
.brand,.sound{pointer-events:auto}
.brand{display:flex;gap:11px;align-items:center;color:#f6f9ff;text-decoration:none;font-size:11px;letter-spacing:.14em}
.brand img{display:block;width:36px;height:36px;object-fit:contain}
.scoreboard{display:flex;gap:clamp(8px,1.6vw,22px);font-size:9px;letter-spacing:.1em;color:var(--muted)}
.scoreboard b{display:block;margin-top:3px;color:#fff;font-size:16px;letter-spacing:.08em}
.scoreboard .combo b{color:#ffd75c}
.scoreboard .sector b,.scoreboard .hp b{color:var(--pink)}
.hud-actions{display:flex;gap:7px;pointer-events:auto}
.sound{border:1px solid rgba(81,243,229,.5);padding:9px 10px;background:rgba(7,10,26,.45);color:var(--cyan);font:700 8px ui-monospace,monospace;letter-spacing:.1em;cursor:pointer}
.overlay{position:absolute;z-index:2;inset:0;display:none;place-content:center;justify-items:center;padding:85px 22px 30px;text-align:center;background:linear-gradient(90deg,rgba(7,10,26,.67),rgba(7,10,26,.08),rgba(7,10,26,.67))}
.overlay.visible,.overlay:not([hidden]){display:grid}
.overlay[hidden]{display:none}
.kicker,.hint{margin:0;color:var(--cyan);font-size:8px;letter-spacing:.22em}
.overlay h1,.overlay h2{margin:20px 0 13px;font-size:clamp(56px,13vw,144px);font-style:italic;line-height:.76;letter-spacing:-.1em;text-shadow:0 0 35px rgba(255,95,161,.25)}
.overlay h1 span{color:transparent;-webkit-text-stroke:1px var(--cyan);text-shadow:0 0 24px rgba(81,243,229,.42)}
.overlay h2{font-size:clamp(34px,7vw,74px);color:var(--pink)}
.lead{margin:0 0 24px;color:#c6d1ef;font-size:clamp(12px,2vw,17px);letter-spacing:.08em}
.primary{display:flex;align-items:center;justify-content:space-between;width:min(310px,90vw);padding:16px 18px;border:0;background:var(--cyan);color:#041012;font:900 11px ui-monospace,monospace;letter-spacing:.15em;cursor:pointer;box-shadow:0 0 34px rgba(81,243,229,.32)}
.primary:hover{transform:scale(1.025);background:#b9fff8}
.primary b{font-size:20px}
.hint{margin-top:14px;color:var(--muted);font-size:7px}
.links{display:flex;gap:18px;margin-top:24px}
.links a{color:#b9c5e5;font-size:8px;letter-spacing:.08em}
.result-score{margin:20px 0 4px;color:#b9c5e5;font-size:10px;letter-spacing:.15em}
.result-score b{display:block;margin-top:8px;color:#fff;font-size:34px}
.new-best{margin:10px 0;color:var(--cyan);font-size:10px;letter-spacing:.15em}
.feature-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:18px}
.feature-chips span{padding:6px 9px;border:1px solid rgba(81,243,229,.32);background:rgba(7,10,26,.56);color:#b9fff8;font-size:7px;letter-spacing:.12em}
.overdrive{position:absolute;z-index:3;left:50%;bottom:23px;width:min(360px,44vw);height:8px;transform:translateX(-50%);border:1px solid rgba(81,243,229,.5);background:rgba(7,10,26,.7);pointer-events:none}
.overdrive span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),#ffd75c,var(--pink));box-shadow:0 0 15px var(--cyan);transition:width .12s}
.overdrive b{position:absolute;top:-15px;left:0;color:#94a0c0;font-size:7px;letter-spacing:.15em}
.touch-controls button:nth-last-child(-n+2){background:rgba(255,95,161,.14);border-color:rgba(255,95,161,.58);color:#ffc0d9}
@media(max-width:760px){.sector,.combo{display:none}
.overdrive{bottom:96px;width:58vw}
.feature-chips{max-width:310px}
.touch-controls{gap:5px}
.touch-controls button{min-width:48px;padding-inline:10px}
}
@media(max-width:640px){.hud{padding:16px}
.brand b{display:none}
.sound{font-size:7px}
.scoreboard{gap:10px}
.scoreboard b{font-size:12px}
.overlay h1{font-size:clamp(54px,18vw,86px)}
}
.studio-endorsement{position:absolute;z-index:5;top:14px;left:14px;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;gap:8px;color:#b9fff8;text-decoration:none;font-size:7px;font-weight:800;letter-spacing:.14em}
.studio-endorsement img{display:block;width:30px;height:30px;object-fit:contain}
@media(max-width:520px){.studio-endorsement span{display:none}}