html{background:var(--color-background);color:var(--color-text);touch-action:none;user-select:none;-webkit-user-select:none}
body{background:radial-gradient(circle at 50% 20%,#152a43 0,#081423 42%,#040a12 100%);overscroll-behavior:none}
.app{width:100%;height:100dvh;display:grid;place-items:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.game-shell{position:relative;isolation:isolate;width:min(calc(100dvh - 52px),100vw - 20px,860px);aspect-ratio:1;overflow:hidden;border-radius:34px;background:#0a1826;box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.08)}
#game-canvas{width:100%;height:100%;touch-action:none}
.lane-controls{position:absolute;inset:0;z-index:8;pointer-events:none}.lane-control{position:absolute;border:0;padding:0;background:transparent;pointer-events:auto;cursor:pointer;outline:none}.lane-control.north{left:31.5%;top:0;width:37%;height:31.5%}.lane-control.south{left:31.5%;bottom:0;width:37%;height:31.5%}.lane-control.west{left:0;top:31.5%;width:31.5%;height:37%}.lane-control.east{right:0;top:31.5%;width:31.5%;height:37%}.lane-control:focus-visible{background:rgba(73,217,255,.08);box-shadow:inset 0 0 0 4px var(--color-cyan)}
.screen{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(20px,5%,52px);text-align:center;background:linear-gradient(180deg,rgba(4,12,23,.72),rgba(5,13,25,.94));animation:screen-in .28s ease-out}
.menu-screen{padding:0;background:#020b14;overflow:hidden}.splash-menu-artboard{position:relative;flex:0 0 auto;height:100%;aspect-ratio:2/3;max-width:none}.splash-menu-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill}.splash-hotspot{position:absolute;padding:0;border:0;border-radius:18px;background:transparent;cursor:pointer;outline:none}.splash-hotspot:focus-visible{background:rgba(73,217,255,.16);box-shadow:inset 0 0 0 4px #fff,0 0 22px var(--color-cyan)}.splash-hotspot:active{background:rgba(255,255,255,.12);transform:scale(.98)}.splash-play{left:27%;top:47.1%;width:47%;height:13.2%}.splash-how{left:34%;top:61.3%;width:34%;height:7.3%}.splash-sound{left:74.5%;top:1.3%;width:10.5%;height:8.5%;border-radius:50%}.splash-settings{left:87%;top:1.3%;width:10.5%;height:8.5%;border-radius:50%}.splash-best{position:absolute;left:2.7%;top:1.7%;width:28.5%;height:7.2%;display:flex;align-items:center;gap:min(1vw,10px);padding:1% 2.3%;border-radius:12px;background:#071321;color:#fff;text-align:left;box-shadow:inset 0 0 0 2px #38536d}.splash-best>span{font-size:min(3.2vw,3.2vh)}.splash-best p{font-size:min(1.6vw,1.6vh);font-weight:1000;line-height:1.05;white-space:nowrap}.splash-best strong{display:block;margin-top:3px;color:#ffc928;font-size:min(3vw,3vh);letter-spacing:.05em}
.eyebrow{font-size:clamp(9px,1.4vw,13px);font-weight:900;letter-spacing:.28em;color:var(--color-cyan);margin-bottom:8px}
h2{font-size:clamp(38px,8vw,72px);line-height:1;font-weight:1000;letter-spacing:-.05em}
.button{position:relative;border:0;border-radius:16px;min-height:50px;padding:0 22px;color:#fff;font-weight:900;letter-spacing:.08em;cursor:pointer;transition:transform .12s ease,filter .12s ease,background .12s ease;outline:none}
.button:active{transform:scale(.96)}.button:focus-visible,.icon-button:focus-visible{box-shadow:0 0 0 4px #fff,0 0 0 8px var(--color-cyan)}
.button-primary{width:min(310px,82%);min-height:clamp(54px,8vw,68px);font-size:clamp(15px,2.5vw,20px);background:linear-gradient(135deg,#ff6572,var(--color-red));box-shadow:0 10px 30px rgba(255,82,99,.36),inset 0 1px rgba(255,255,255,.32)}
.button-primary span{position:absolute;right:22px;font-size:28px;line-height:20px}.button-secondary{background:#1d3045;border:1px solid rgba(255,255,255,.12)}.button-quiet{background:transparent;color:var(--color-text-muted);font-size:11px}
.overlay-screen{background:rgba(3,9,17,.76);backdrop-filter:blur(8px)}.panel{width:min(510px,96%);padding:clamp(22px,5vw,44px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);background:linear-gradient(160deg,rgba(18,37,58,.98),rgba(8,20,35,.98));box-shadow:var(--shadow)}
.compact-panel{width:min(390px,92%);display:grid;gap:12px}.compact-panel h2{margin-bottom:14px}.compact-panel .button{width:100%}
.result-panel h2{color:var(--color-red);text-shadow:0 0 30px rgba(255,82,99,.36)}.record{display:inline-block;margin-bottom:10px;padding:6px 12px;border-radius:20px;background:var(--color-warning);color:#19202a;font-size:11px;font-weight:1000;letter-spacing:.12em}
.score-result{margin:18px 0}.score-result span,.stats-grid span{display:block;color:var(--color-text-muted);font-size:9px;font-weight:900;letter-spacing:.15em}.score-result strong{font-size:clamp(44px,9vw,78px);line-height:1;color:var(--color-warning)}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 10px;margin:0 0 24px}.stats-grid strong{display:block;margin-top:4px;font-size:clamp(18px,3vw,25px)}
.result-actions{display:flex;justify-content:center;margin-top:7px}.result-actions .button{padding:0 10px;font-size:10px}
.tutorial-panel{max-width:430px}.tutorial-panel h2{font-size:clamp(30px,6vw,46px)}.tutorial-panel>p:not(.eyebrow){min-height:50px;margin:15px 0;color:#d7e3ef;line-height:1.5}.tutorial-icon{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 18px;border-radius:22px;background:#122a40;color:var(--color-green);font-size:34px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}
.tutorial-dots{display:flex;justify-content:center;gap:7px;margin-bottom:22px}.tutorial-dots i{width:7px;height:7px;border-radius:50%;background:#3a4a5c}.tutorial-dots i.active{width:20px;border-radius:10px;background:var(--color-cyan)}
.hud{position:absolute;z-index:10;left:0;right:0;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:clamp(12px,3%,26px);pointer-events:none;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.hud-stat{display:flex;flex-direction:column}.hud-label,.level{font-size:clamp(8px,1.2vw,11px);font-weight:900;letter-spacing:.16em;color:#c6d0db}.hud-stat strong{font-size:clamp(25px,4vw,39px);line-height:1}.hud-center{text-align:center}.combo{display:block;color:var(--color-warning);font-size:clamp(12px,2vw,18px);animation:score-pop .3s ease}.level{display:block;margin-top:5px}.icon-button{justify-self:end;pointer-events:auto;width:clamp(40px,6vw,50px);height:clamp(40px,6vw,50px);border:1px solid rgba(255,255,255,.16);border-radius:14px;color:#fff;background:rgba(5,14,25,.72);font-weight:900;cursor:pointer}
.countdown{position:absolute;inset:0;z-index:15;display:grid;place-items:center;background:rgba(4,12,22,.28);font-size:clamp(90px,20vw,190px);font-weight:1000;text-shadow:0 8px 40px rgba(0,0,0,.5);animation:count-pop .55s ease both}
.toast{position:absolute;z-index:30;left:50%;top:23%;transform:translateX(-50%) translateY(8px);padding:10px 17px;border-radius:13px;background:rgba(6,16,29,.9);color:#fff;font-size:clamp(10px,1.8vw,14px);font-weight:1000;letter-spacing:.1em;opacity:0;pointer-events:none;white-space:nowrap}.toast.show{animation:toast-up 1.25s ease both}
.desktop-hint{position:fixed;bottom:8px;color:#6f8094;font-size:11px;letter-spacing:.06em}.is-hidden{display:none!important}.score-bump{animation:score-pop .25s ease}
@keyframes screen-in{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}@keyframes count-pop{0%{opacity:0;transform:scale(1.5)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.65)}}@keyframes toast-up{0%{opacity:0;transform:translate(-50%,10px)}15%,70%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-28px)}}@keyframes score-pop{50%{transform:scale(1.24)}}