:root{--result-accent: #e4c56b;--bg: #4c4d6b;--panel: #30314c;--rim: #a2b5e7;--ink: #f2f3ff;--accent: #9aa0ff;--danger: #ff7a8a}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:none}#stage{position:fixed;inset:0}#view{display:block;width:100%;height:100%}#hud{position:absolute;inset:0;pointer-events:none}.counter{position:absolute;font-size:3.6vmin;font-weight:800;letter-spacing:.02em;text-shadow:0 .25vmin 0 rgba(20,20,34,.55);transform:translate(-50%,-50%);transition:color .12s linear}.counter.full{color:var(--danger)}.topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:2.4vmin 3.2vmin;font-size:2.5vmin;font-weight:700;opacity:.88}.progress{position:relative;flex:1;height:1.1vmin;margin:0 3vmin;border-radius:1vmin;background:#14142273;overflow:hidden}.progress>i{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg,var(--accent),var(--rim));border-radius:1vmin;transition:right .18s ease-out}.panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4vmin;background:#161626b8;opacity:0;pointer-events:none;transition:opacity .26s ease-out}.panel.show{opacity:1;pointer-events:auto}.panel h1{margin:0;font-size:9vmin;letter-spacing:.04em;transform:scale(.82);transition:transform .32s cubic-bezier(.18,1.5,.4,1)}.panel.show h1{transform:scale(1)}.panel.lose h1{color:var(--danger)}.panel p{margin:0;font-size:3vmin;opacity:.82}.panel button{margin-top:2vmin;padding:1.8vmin 6vmin;font:inherit;font-size:3.2vmin;font-weight:800;color:#1c1c2e;background:var(--ink);border:none;border-radius:2.2vmin;cursor:pointer;transition:transform 90ms ease-out}.panel button:active{transform:scale(.94)}.toast{position:absolute;left:50%;bottom:42%;transform:translate(-50%) scale(.9);padding:10px 17px;border:2px solid #cfd9ed;border-radius:12px;background:#252a45ed;box-shadow:0 7px 20px #0d102599;font-size:clamp(13px,3vw,17px);font-weight:700;opacity:0;transition:opacity .14s ease-out,transform .14s ease-out}.toast.show{opacity:1;transform:translate(-50%,-1vmin) scale(1)}.counter{min-width:4.4em;padding:clamp(12px,1.55vmin,17px) clamp(8px,1.4vmin,14px) clamp(4px,.55vmin,8px);border:clamp(2px,.24vmin,3px) solid #dce6ff;border-radius:999px;color:#fff;background:linear-gradient(180deg,#656b98,#3e4269);box-shadow:0 clamp(3px,.45vmin,6px) 0 #242742,0 0 1.5vmin #c8d8ff59;font-size:clamp(14px,3.4vmin,28px);font-weight:900;line-height:1;text-align:center}.counter:before{content:"FREE SEATS";white-space:nowrap;position:absolute;top:clamp(3px,.35vmin,5px);left:50%;transform:translate(-50%);color:#dce6ff;font-size:clamp(7px,1.05vmin,10px);font-weight:900;letter-spacing:.12em;line-height:1;text-shadow:none}.speed-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}.speed-toggle:before{content:"▶";font-size:1.05em;letter-spacing:-.2em;margin-right:.2em}.speed-toggle[data-speed="2"]:before{content:"▶▶"}.speed-toggle[data-speed="3"]:before{content:"▶▶▶";font-size:.85em}.session-bar button,.speed-toggle{border:0!important;box-shadow:none!important}.session-bar .level-title,.session-bar .level-timer,.counter,.toast{-webkit-text-stroke:0!important;text-shadow:none!important;box-shadow:none!important}.counter{border:0!important}.completion{width:min(86vw,420px);text-align:center}.completion[hidden]{display:none}.completion-rank{display:inline-grid;place-items:center;width:74px;height:74px;border:3px solid var(--result-accent);border-radius:50%;font-size:48px;font-weight:900;color:var(--result-accent);background:#132b3bdd}.completion-rank[data-rank=S]{box-shadow:0 0 24px #e4c56b77}.completion-best,.completion-status{font-size:clamp(12px,2vmin,16px)}.completion-save{display:flex;justify-content:center;gap:8px}.completion-save[hidden]{display:none}.completion-save input{min-width:0;width:48%;padding:10px;border-radius:8px;border:1px solid #cbd5e1;font:inherit;font-size:14px;background:#fff;color:#142330;user-select:text;touch-action:manipulation}.completion-save button{font-size:14px!important;padding:10px!important;margin:0!important}.completion-save button:disabled{opacity:.5}.completion-leaders{margin:10px auto;max-height:130px;overflow:auto;text-align:left;width:fit-content;font-size:14px;line-height:1.8;touch-action:pan-y}.panel.show{overflow-y:auto;padding:20px}html[data-skin=block-shooter]{--bg: #4c4d6b;--rim: #dce6ff;--accent: #c8d8ff}html[data-skin=block-shooter] .counter{color:#fff;text-shadow:1px 2px 0 #11131e}#hud{font-family:var(--game-font, system-ui, sans-serif)}#hud .counter{font-family:inherit}.result-card{width:min(90vw,430px);max-height:90dvh;overflow:auto;padding:clamp(22px,5vmin,34px);display:flex;flex-direction:column;align-items:center;gap:12px;border:2px solid #c4d6ed;border-radius:20px;background:#222b45f2;box-shadow:0 18px 48px #070c20a8,inset 0 1px #fff3;touch-action:pan-y}.panel.lose .result-card{border-color:#ff967088;background:linear-gradient(160deg,#51333ff2,#202438f5)}.panel .result-card h1{font-size:clamp(28px,7vmin,44px);text-align:center;letter-spacing:0}.panel .result-card>p{font-size:clamp(13px,3vmin,17px);text-align:center;line-height:1.45}.result-card .completion{width:100%}.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%}.panel .result-actions button{margin:0;min-height:46px;padding:12px 20px;font-size:16px;border-radius:14px;background-image:var(--button-secondary-art, linear-gradient(#e2f5fa, #a8cfdd));background-size:100% 100%}.panel .result-actions .result-next,.panel.lose .result-actions [data-role=again]{background-image:var(--button-primary-art, linear-gradient(#ffe093, #f6be4e))}.panel .result-card h1{background:none;padding:4px 8px 10px}.panel.lose .result-card h1{background:none}.result-hint[hidden]{display:none}.speed-toggle{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;z-index:20;min-width:52px;height:40px;padding:0 12px;border:3px solid #fff;border-radius:20px;background:#141830b8;color:#fff;font:900 18px/1 Trebuchet MS,Arial Rounded MT Bold,system-ui,sans-serif;box-shadow:0 3px #00000059;cursor:pointer;pointer-events:auto;touch-action:manipulation}.speed-toggle.fast{background:#e62f42;border-color:#ffd657}.speed-toggle:active{transform:translateY(2px);box-shadow:0 1px #00000059}.tutorial-hand{--hand-skin: #f4f5ff;--hand-shade: #b9bde0;--hand-ink: #1b1c2e;--hand-ring: rgba(255, 255, 255, .9);--hand-period: .9s;position:absolute;width:0;height:0;pointer-events:none;margin-top:.6vmin;opacity:0;transition:opacity .18s ease-out}.tutorial-hand.show{opacity:1}.tutorial-hand--fof{--hand-skin: #f5bd8c;--hand-shade: #d98d5c;--hand-ink: #5a2b17;--hand-ring: rgba(255, 255, 255, .95)}.tutorial-hand--tank{--hand-skin: #ffffff;--hand-shade: #c7cfe4;--hand-ink: #11141f;--hand-ring: rgba(255, 214, 87, .95)}.tutorial-hand__art{position:absolute;left:0;top:0;width:13vmin;height:17vmin;transform-origin:0 0;transform:rotate(-24deg);animation:tutorial-hand-press var(--hand-period) ease-in-out infinite;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(.4vmin .8vmin 0 rgba(0,0,0,.28))}.tutorial-hand__finger,.tutorial-hand__palm,.tutorial-hand__thumb{position:absolute;background:var(--hand-skin);border:.55vmin solid var(--hand-ink);box-shadow:inset -1vmin -.8vmin 0 var(--hand-shade)}.tutorial-hand__finger{left:-1.6vmin;top:-.6vmin;width:3.4vmin;height:9vmin;border-radius:1.7vmin 1.7vmin 1vmin 1vmin;z-index:2}.tutorial-hand__palm{left:-2.2vmin;top:6.4vmin;width:9.6vmin;height:8.6vmin;border-radius:2.6vmin 3.6vmin 3.6vmin 4vmin;z-index:1}.tutorial-hand__thumb{left:-4.4vmin;top:7.6vmin;width:3.4vmin;height:5.2vmin;border-radius:1.7vmin;transform:rotate(32deg);z-index:0}.tutorial-hand--image .tutorial-hand__finger,.tutorial-hand--image .tutorial-hand__palm,.tutorial-hand--image .tutorial-hand__thumb{display:none}.tutorial-hand__ring{position:absolute;left:-5vmin;top:-5vmin;width:10vmin;height:10vmin;border-radius:50%;border:.8vmin solid var(--hand-ring);opacity:0;animation:tutorial-hand-ring var(--hand-period) ease-out infinite}@keyframes tutorial-hand-press{0%,to{transform:translate(.9vmin,1.3vmin) rotate(-24deg) scale(1.04)}45%{transform:translate(0) rotate(-24deg) scale(1)}60%{transform:translate(0) rotate(-24deg) scale(.96)}}@keyframes tutorial-hand-ring{0%,44%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(.35)}to{opacity:0;transform:scale(1.1)}}@media(prefers-reduced-motion:reduce){.tutorial-hand__art,.tutorial-hand__ring{animation:none}}.session-bar{position:fixed;inset:0 0 auto;z-index:20;pointer-events:none;font-family:var(--game-font, system-ui)}.session-bar button{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);height:40px;border:2px solid #ffffffaa;border-radius:14px;padding:0 12px;background:#142330c9;color:#fff;cursor:pointer;font:800 13px var(--game-font, system-ui);box-shadow:0 3px #0003;pointer-events:auto;touch-action:manipulation}.session-bar .sound-toggle{left:12px;min-width:88px}.session-bar [data-action=pause]{right:76px;width:40px;padding:0;font-size:22px}.session-bar .level-title{position:fixed;top:calc(env(safe-area-inset-top,0px) + 32px);left:50%;transform:translate(-50%,-50%);color:#fff8da;font-size:clamp(18px,4.5vw,26px);font-weight:900;white-space:nowrap;text-shadow:0 2px 0 #16344f,0 3px 10px #0005}.session-bar button:focus-visible{outline:3px solid #ffca32}.panel button[hidden],.results-open .session-bar,.results-open .speed-toggle{display:none}:root{--ui-edge: 16px;--ui-gap: 12px;--ui-touch: clamp(48px, 11vw, 60px);--ui-top: calc(env(safe-area-inset-top, 0px) + var(--ui-edge));--hud-size: var(--ui-touch);--hud-gap: var(--ui-edge)}@media(max-width:380px),(max-height:600px){:root{--ui-edge: 12px;--ui-gap: 8px;--ui-touch: 44px}}.session-bar button,.speed-toggle{top:calc(env(safe-area-inset-top,0px) + var(--hud-gap));width:var(--hud-size);min-width:0;height:var(--hud-size);padding:0;border:3px solid #fff;border-radius:50%;background:#1d2440;box-shadow:0 4px #0006}.session-bar .sound-toggle{left:var(--hud-gap);min-width:0;font-size:0}.session-bar .sound-toggle:before{content:"♪";font-size:calc(var(--hud-size) * .46);color:#fff}.session-bar .sound-toggle[aria-pressed=false]:after{content:"";position:absolute;left:22%;right:22%;top:50%;height:3px;background:#ff6b6b;transform:rotate(-45deg);border-radius:2px}.session-bar [data-action=pause]{right:var(--hud-gap);width:var(--hud-size);font-size:calc(var(--hud-size) * .38)}.speed-toggle{right:calc(var(--ui-edge) + var(--hud-size) + var(--ui-gap));font-size:calc(var(--hud-size) * .3)}.session-bar .level-title{top:calc(env(safe-area-inset-top,0px) + var(--hud-gap) + var(--hud-size) * .5);color:#fff;font-size:clamp(22px,6vw,34px);font-weight:900;letter-spacing:.02em;-webkit-text-stroke:5px #151a33;paint-order:stroke fill;text-shadow:0 4px 0 #151a33,0 6px 14px #0008}.session-bar .level-timer{position:fixed;left:50%;transform:translate(-50%);top:calc(var(--ui-top) + var(--hud-size) + var(--ui-gap) * .5);padding:2px 12px;border-radius:999px;background:#151a33cc;color:#fff;font:900 clamp(15px,4vw,20px) var(--game-font, system-ui);letter-spacing:.04em;font-variant-numeric:tabular-nums;box-shadow:0 3px #0005}.session-bar .level-timer.warn{background:#e2384b;animation:timer-pulse .6s ease-in-out infinite alternate}@keyframes timer-pulse{to{transform:translate(-50%) scale(1.12)}}:root{--title-room: calc(100vw - 2 * (var(--ui-edge) + 2 * var(--ui-touch) + 2 * var(--ui-gap)))}.session-bar .level-title{font-size:min(clamp(22px,6vw,34px),calc(var(--title-room) / 4.6))}.end-fx{position:fixed;inset:0;pointer-events:none;overflow:hidden}.end-fx--win:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#fff6c8cc,#ffd65733 45%,transparent 70%);animation:end-fx-flash .9s ease-out forwards}.end-fx i{position:absolute;left:var(--x0);top:100vh;width:10px;height:16px;border-radius:3px;animation:end-fx-throw 2.3s cubic-bezier(.15,.7,.35,1) var(--delay) forwards;opacity:0}@keyframes end-fx-flash{0%{opacity:0}15%{opacity:1}to{opacity:0}}@keyframes end-fx-throw{0%{opacity:1;transform:translate(0) rotate(0)}55%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(calc(var(--spin) * .6))}to{opacity:0;transform:translate(calc(var(--dx) * 1.15),calc(var(--dy) + 30vh)) rotate(var(--spin))}}.end-fx--lose:before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 18vmin 4vmin #e2263bcc;animation:end-fx-pulse 1.3s ease-out forwards}.end-fx--lose{backdrop-filter:saturate(.55);animation:end-fx-desat 1.3s ease-out forwards}@keyframes end-fx-pulse{0%{opacity:0}12%{opacity:1}40%{opacity:.55}55%{opacity:.9}to{opacity:.35}}@keyframes end-fx-desat{0%{backdrop-filter:saturate(1)}to{backdrop-filter:saturate(.55)}}@media(prefers-reduced-motion:reduce){.end-fx--win:before,.end-fx--lose:before{animation-duration:1ms}}.end-fx-fireworks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.panel>.result-card{position:relative;z-index:1}.pass-switch{position:fixed;z-index:21;left:var(--ui-edge, 16px);top:calc(var(--ui-top, 16px) + var(--ui-touch, 52px) + var(--ui-gap, 12px));display:flex;gap:4px;padding:4px;border-radius:999px;background:#151a33d9;box-shadow:0 3px #0005;pointer-events:auto}.pass-switch button{min-width:44px;height:36px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:#ffffffb3;cursor:pointer;font:900 15px var(--game-font, system-ui);touch-action:manipulation}.pass-switch button[aria-pressed=true]{background:#fff;color:#151a33}.pass-switch button:focus-visible{outline:3px solid #ffca32}.results-open .pass-switch{display:none}
