:root{--bg:#070914;--panel:#0d1122;--cyan:#5ffbf1;--pink:#ff3d88;--gold:#ffd166;--text:#f3f6ff;--muted:#9da6c5}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 15% 20%,#22396d66,transparent 35%),radial-gradient(circle at 85% 75%,#5c154e55,transparent 32%);pointer-events:none}.app{width:min(1180px,100%);margin:auto;padding:20px}.topbar{height:62px;display:flex;align-items:center;justify-content:space-between}.brand{color:white;text-decoration:none;font-family:Unbounded,sans-serif;font-size:14px;letter-spacing:.1em}.brand i{display:inline-block;width:12px;height:12px;background:var(--cyan);box-shadow:0 0 18px var(--cyan);transform:rotate(45deg);margin-right:12px}.sound{border:1px solid #313956;background:#0d1221;color:var(--muted);border-radius:99px;padding:9px 14px;font:700 10px Unbounded;cursor:pointer}.game-shell{position:relative;width:100%;height:min(760px,calc(100vh - 130px));min-height:570px;border:1px solid #252c48;border-radius:24px;overflow:hidden;background:linear-gradient(145deg,#0a1022,#070914 55%,#170b20);box-shadow:0 30px 100px #0009,inset 0 0 70px #0e1734}canvas{position:absolute;inset:0;width:100%;height:100%}.scanlines{position:absolute;inset:0;pointer-events:none;opacity:.13;background:repeating-linear-gradient(0deg,transparent,transparent 3px,#fff 4px)}.screen{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;background:radial-gradient(circle at 50% 48%,#101c38dd,#070914f5 60%)}.hidden{display:none!important}.eyebrow{font:700 11px Unbounded;color:var(--cyan);letter-spacing:.22em;margin:0 0 22px}.intro h1{font:800 clamp(40px,7vw,86px)/.95 Unbounded;margin:0;letter-spacing:-.055em}.intro h1 em{color:transparent;font-style:normal;-webkit-text-stroke:1px var(--pink);filter:drop-shadow(0 0 15px #ff3d8866)}.lead{max-width:650px;color:var(--muted);font-size:16px;line-height:1.7;margin:26px auto}.controls{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:28px}.controls span{padding:10px 15px;border:1px solid #28304c;border-radius:8px;color:var(--muted);font-size:11px}.controls b{color:white;margin-right:6px}.primary{border:0;border-radius:12px;color:#051315;background:var(--cyan);font:800 12px Unbounded;letter-spacing:.06em;padding:17px 24px;cursor:pointer;box-shadow:0 10px 40px #5ffbf144;transition:.2s}.primary:hover{transform:translateY(-2px);box-shadow:0 14px 50px #5ffbf177}.primary span{font-size:18px;margin-left:20px}.record{font:600 10px Unbounded;color:#626b8a;margin-top:22px}.record b{color:var(--gold)}.hud{position:absolute;z-index:4;left:24px;right:24px;top:20px;display:flex;gap:28px;align-items:flex-start;pointer-events:none}.hud span{font:700 9px Unbounded;letter-spacing:.14em;color:#707997;display:block}.hud strong{font:800 22px Unbounded;display:block;margin-top:5px}.combo strong{color:var(--cyan)}.energy{margin-left:auto;width:160px}.energy>div{height:7px;margin-top:9px;border:1px solid #34405f;border-radius:10px;padding:1px}.energy i{display:block;width:100%;height:100%;background:var(--cyan);border-radius:8px;box-shadow:0 0 10px var(--cyan);transition:width .15s}.result h2{font:800 clamp(30px,5vw,55px) Unbounded;margin:0 0 28px}.final-score span{font:700 10px Unbounded;color:var(--muted);letter-spacing:.15em}.final-score strong{display:block;font:800 clamp(50px,10vw,100px) Unbounded;color:var(--cyan);text-shadow:0 0 30px #5ffbf166}.stats{display:flex;gap:12px;margin:10px 0 28px}.stats div{min-width:120px;padding:13px;border:1px solid #29304a;border-radius:10px}.stats span{font:700 8px Unbounded;color:var(--muted);display:block}.stats b{font:800 18px Unbounded;display:block;margin-top:6px}.toast{position:absolute;z-index:6;top:85px;left:50%;transform:translate(-50%,-20px);font:800 12px Unbounded;color:var(--gold);opacity:0;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}footer{height:48px;display:flex;align-items:center;justify-content:center;gap:30px;color:#717a98;font-size:11px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:5px}.cyan{background:var(--cyan);box-shadow:0 0 9px var(--cyan)}.pink{background:var(--pink);box-shadow:0 0 9px var(--pink)}.gold{background:var(--gold);box-shadow:0 0 9px var(--gold)}
@media(max-width:650px){.app{padding:10px}.topbar{height:52px}.brand{font-size:10px}.game-shell{height:calc(100vh - 104px);min-height:530px;border-radius:18px}.screen{padding:22px}.lead{font-size:14px}.controls span:nth-child(2){display:none}.hud{left:15px;right:15px;top:15px;gap:18px}.hud strong{font-size:17px}.energy{width:95px}.stats div{min-width:88px;padding:10px 6px}.stats b{font-size:15px}footer{display:none}}

/* Mobile-first game mode */
html,body{overflow:hidden;overscroll-behavior:none}
.app{height:100dvh;display:flex;flex-direction:column}
.game-shell{height:auto;min-height:0;min-width:0;flex:1}
canvas{touch-action:none}
@media(max-width:650px){.app{padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom))}.topbar{height:46px;flex:none}.brand{font-size:9px}.sound{padding:8px 10px;font-size:8px}.game-shell{height:auto;min-height:0;border-radius:18px}.screen{padding:18px 18px 28px;overflow:hidden}.eyebrow{font-size:8px;margin-bottom:15px}.intro h1{width:100%;font-size:clamp(31px,10.5vw,48px);line-height:1.04;overflow-wrap:anywhere}.intro h1 em{display:block}.lead{width:100%;font-size:13px;line-height:1.5;margin:18px auto;max-width:340px}.controls{margin-bottom:18px}.controls span{font-size:9px;padding:8px 11px}.primary{min-height:54px;width:min(100%,300px);font-size:10px}.record{margin-top:15px;font-size:8px}.hud{left:13px;right:13px;top:13px;gap:14px}.hud span{font-size:7px}.hud strong{font-size:16px}.energy{width:92px}.result h2{font-size:30px;margin-bottom:20px}.final-score strong{font-size:58px}.stats{gap:6px;width:100%;justify-content:center}.stats div{min-width:0;flex:1;max-width:105px;padding:10px 4px}.stats b{font-size:14px}}
@media(max-width:380px), (max-height:650px){.intro h1{font-size:34px}.lead{margin:12px auto;font-size:12px}.eyebrow{margin-bottom:10px}.controls{margin-bottom:12px}.record{margin-top:10px}.screen{padding:12px}.result h2{font-size:25px}.final-score strong{font-size:48px}}
@media(max-width:650px){.screen{padding-left:14px;padding-right:14px}.intro h1{max-width:350px;font-size:clamp(25px,8vw,34px);line-height:1.08;letter-spacing:-.07em}.lead{max-width:310px;font-size:12px}}
@media(max-width:380px), (max-height:650px){.intro h1{font-size:27px}}