:root{--yellow:#ffd23f;--pink:#ff3d7f;--cyan:#35e0ff;--ink:#0b0d1c;--paper:#fff8e6;--hp:linear-gradient(90deg, #36e27a, #b8f35a);--display:"Bangers", Impact, "Arial Black", sans-serif;--ui:"Inter", system-ui, sans-serif;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px)}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--ink);width:100%;height:100%;color:var(--paper);font-family:var(--ui);overflow:hidden}body{-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}#app canvas{display:block}.hidden{display:none!important}.ink-text{-webkit-text-stroke:2px #000;paint-order:stroke fill}#hud{pointer-events:none;position:fixed;inset:0}.player-card{top:calc(16px + var(--safe-t));left:calc(16px + var(--safe-l));align-items:center;gap:12px;display:flex;position:absolute}.portrait{background:var(--yellow);border:3px solid #000;border-radius:50%;flex:none;place-items:center;width:64px;height:64px;display:grid;position:relative;overflow:hidden;box-shadow:4px 4px #000}.portrait img{object-fit:cover;opacity:0;width:100%;height:100%;position:absolute;inset:0}.portrait.has-img img{opacity:1}.portrait.has-img span{display:none}.portrait span{font:40px/1 var(--display);color:#000}.player-info{flex-direction:column;gap:5px;display:flex}.name{font:26px/1 var(--display);letter-spacing:1.5px;color:var(--yellow);-webkit-text-stroke:1.5px #000;paint-order:stroke fill;text-shadow:3px 3px #000}.bar{background:#1b1026;border:3px solid #000;border-radius:4px;width:min(280px,46vw);height:16px;position:relative;overflow:hidden;transform:skew(-12deg);box-shadow:3px 3px #000}.bar-fill,.bar-ghost{transform-origin:0;position:absolute;inset:0}.bar-ghost{opacity:.85;background:#fff}.bar-fill{background:var(--hp);transition:transform 80ms linear}.bar-fill:after{content:"";background:#ffffff59;height:40%;position:absolute;top:0;left:0;right:0}.bar-fill.low{background:linear-gradient(90deg,#ff3d3d,#ff8a3d);animation:.6s ease-in-out infinite alternate pulse}@keyframes pulse{to{filter:brightness(1.5)}}.special{font:800 10px/1 var(--ui);letter-spacing:1.2px;color:#b9b3d6;align-items:center;gap:8px;display:flex}.special .mini{background:#1b1026;border:2px solid #000;border-radius:3px;width:90px;height:7px;overflow:hidden}.special .mini div{background:var(--cyan);transform-origin:0;height:100%}.special.ready{color:var(--cyan)}.special.ready .mini div{box-shadow:0 0 10px var(--cyan)}.special.power{margin-top:4px}.special.power .mini div{background:#ff8a3d}.special.power.ready{color:#ff8a3d;animation:.5s infinite alternate pulse}.special.power.ready .mini div{box-shadow:0 0 10px #ff8a3d}.special.power.smoking{color:#ffb37a}.score-box{top:calc(16px + var(--safe-t));right:calc(20px + var(--safe-r));text-align:right;position:absolute}#score{font:34px/1 var(--display);letter-spacing:1px;color:var(--paper);-webkit-text-stroke:1.5px #000;paint-order:stroke fill;text-shadow:3px 3px #000;font-variant-numeric:tabular-nums}.combo{font:30px/1 var(--display);color:var(--pink);-webkit-text-stroke:1.5px #000;paint-order:stroke fill;text-shadow:3px 3px #000;transform-origin:100%;margin-top:4px}.combo.pop{animation:.25s cubic-bezier(.2,2,.4,1) pop}@keyframes pop{0%{transform:scale(1.5)rotate(-6deg)}}.boss{bottom:calc(26px + var(--safe-b));flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.boss-name{font:24px/1 var(--display);letter-spacing:2px;color:#ff5b5b;-webkit-text-stroke:1.5px #000;paint-order:stroke fill;text-shadow:3px 3px #000}.boss-bar{width:min(520px,80vw);height:18px}.boss-bar .bar-fill{background:linear-gradient(90deg,#ff2d55,#ff8a3d)}.banner{text-align:center;font:clamp(34px, 7vw, 76px)/1 var(--display);letter-spacing:2px;color:var(--yellow);-webkit-text-stroke:3px #000;paint-order:stroke fill;text-shadow:5px 5px #000;opacity:0;padding:0 16px;position:absolute;top:28%;left:0;right:0;transform:scale(.6)rotate(-4deg)}.banner.show{animation:2.2s cubic-bezier(.2,1.6,.4,1) forwards banner}@keyframes banner{0%{opacity:0;transform:scale(2.2)rotate(-8deg)}12%{opacity:1;transform:scale(1)rotate(-3deg)}80%{opacity:1;transform:scale(1.04)rotate(-3deg)}to{opacity:0;transform:scale(.9)rotate(-3deg)}}.go{right:calc(28px + var(--safe-r));font:48px/1 var(--display);color:var(--yellow);-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:4px 4px #000;animation:.9s steps(2,end) infinite blink;position:absolute;top:45%}.go span{animation:.45s ease-in-out infinite alternate nudge;display:inline-block}@keyframes blink{50%{opacity:.35}}@keyframes nudge{to{transform:translate(10px)}}#damage-vignette{pointer-events:none;opacity:0;position:fixed;inset:0;box-shadow:inset 0 0 120px 30px #ff1428bf}#damage-vignette.hit{animation:.45s ease-out vig}@keyframes vig{0%{opacity:1}to{opacity:0}}#float-layer{pointer-events:none;position:fixed;inset:0;overflow:hidden}.float-text{white-space:nowrap;will-change:transform, opacity;font:30px/1 var(--display);letter-spacing:1px;color:#fff;-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:3px 3px #000;position:absolute;top:0;left:0}.float-text.big{color:var(--yellow);font-size:46px}.float-text.ko{color:var(--pink);font-size:90px}.float-text.heal{color:#5bff9a;font-size:34px}.speech{color:#111;width:max-content;max-width:240px;font:800 15px/1.2 var(--ui);text-align:center;will-change:transform, opacity;background:#fff;border:3px solid #000;border-radius:14px;margin-top:-12px;padding:8px 12px;position:absolute;top:0;left:0;box-shadow:3px 3px #000}.speech:after{content:"";border:9px solid #0000;border-top:12px solid #000;border-bottom:0;position:absolute;bottom:-12px;left:50%;transform:translate(-50%)}.speech.player{background:var(--yellow)}.speech.talk-boss{color:#fff;background:#ff5b5b;max-width:300px;font-size:17px}.dialog{padding:0 16px calc(28px + var(--safe-b));z-index:20;cursor:pointer;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.dlg-box{outline:2px solid var(--yellow);background:#0c0a18eb;border:3px solid #000;border-radius:14px;width:min(760px,100%);padding:22px 26px 26px;position:relative;box-shadow:6px 6px #000}.dlg-name{background:var(--yellow);color:#000;font:22px/1 var(--display);letter-spacing:1.5px;border:3px solid #000;border-radius:8px;padding:4px 14px;position:absolute;top:-18px;left:18px}.dlg-text{min-height:2.6em;font:700 clamp(17px, 2.6vw, 22px)/1.35 var(--ui);color:var(--paper)}.dlg-next{color:var(--yellow);opacity:0;font-size:14px;position:absolute;bottom:10px;right:16px}.dialog.done .dlg-next{opacity:1;animation:.8s steps(2,end) infinite blink}#touch{pointer-events:none;position:fixed;inset:0}#touch *,canvas,.hud,#hud *{touch-action:none}button{touch-action:manipulation}#stick-zone{pointer-events:auto;width:50%;position:absolute;top:30%;bottom:0;left:0}#stick-base{left:90px;top:calc(100% - 110px - var(--safe-b));opacity:.55;background:#ffffff14;border:2px solid #ffffff40;border-radius:50%;width:120px;height:120px;margin:-60px 0 0 -60px;transition:opacity .15s;position:absolute}#stick-base.active{opacity:1}#stick-knob{background:var(--yellow);border:3px solid #000;border-radius:50%;width:54px;height:54px;margin:-27px 0 0 -27px;position:absolute;top:50%;left:50%;box-shadow:3px 3px #000}.buttons{right:calc(16px + var(--safe-r));bottom:calc(20px + var(--safe-b));pointer-events:auto;grid-template-rows:auto auto;grid-template-columns:auto auto;align-items:end;gap:12px;display:grid;position:absolute}.btn{font:15px/1 var(--display);letter-spacing:1px;color:#000;border:3px solid #000;border-radius:50%;place-items:center;transition:transform 60ms,box-shadow 60ms;display:grid;box-shadow:4px 4px #000}.btn.pressed{transform:translate(3px,3px);box-shadow:1px 1px #000}.btn-punch{background:var(--yellow);grid-area:1/2/3;width:92px;height:92px;font-size:20px}.btn-heavy{background:var(--cyan);grid-area:1/1;width:66px;height:66px}.btn-dodge{background:var(--pink);grid-area:2/1;width:66px;height:66px;font-size:12px}.btn-power{opacity:.45;background:#ff8a3d;border-radius:22px;grid-area:3/1/auto/3;justify-self:end;width:92px;height:44px;font-size:14px}.btn-power.ready{opacity:1;animation:.5s infinite alternate pulse}.screen{background:radial-gradient(#0b0d1c59,#0b0d1ce0);place-items:center;padding:24px 16px;animation:.4s ease-out fade;display:grid;position:fixed;inset:0}@keyframes fade{0%{opacity:0}}.screen-bottom{padding-bottom:max(16px, env(safe-area-inset-bottom));pointer-events:none;background:linear-gradient(#0b0d1c00 55%,#0b0d1cd9);place-items:end center}.screen-bottom .screen-inner{pointer-events:auto;gap:8px}.screen-bottom .big-title{font-size:clamp(34px,8vw,56px)}.screen-bottom .tagline{display:none}.screen-bottom .cta{padding:10px 32px;font-size:24px}.screen-inner{text-align:center;flex-direction:column;align-items:center;gap:18px;max-width:640px;display:flex}.logo{flex-direction:column;align-items:center;line-height:.85;display:flex;transform:rotate(-4deg)}.logo span{font-family:var(--display);-webkit-text-stroke:4px #000;paint-order:stroke fill;font-weight:400}.logo .l1{color:var(--yellow);text-shadow:7px 7px 0 var(--pink), 12px 12px 0 #000;font-size:clamp(72px,19vw,150px)}.logo .l2{color:var(--cyan);letter-spacing:6px;text-shadow:5px 5px #000;font-size:clamp(38px,10vw,76px)}.tagline{font:700 16px/1.4 var(--ui);color:#d9d4f0}.big-title{font:clamp(52px, 12vw, 96px)/1 var(--display);color:var(--yellow);-webkit-text-stroke:3px #000;paint-order:stroke fill;text-shadow:6px 6px #000;transform:rotate(-3deg)}.big-title.bad{color:var(--pink)}.cta{font:30px/1 var(--display);letter-spacing:2px;color:#000;background:var(--yellow);cursor:pointer;border:3px solid #000;border-radius:12px;padding:14px 44px;transition:transform 80ms,box-shadow 80ms;box-shadow:6px 6px #000}.cta:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:8px 8px #000}.cta:active:not(:disabled){transform:translate(4px,4px);box-shadow:2px 2px #000}.cta:disabled{opacity:.7;cursor:wait;font-size:22px}.cta:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}.help{font:600 13px/1 var(--ui);color:#b9b3d6;grid-template-columns:repeat(2,auto);gap:8px 22px;display:grid}.help kbd{min-width:22px;font:700 11px/1 var(--ui);color:var(--paper);background:#1d1a33;border:1px solid #3a355c;border-bottom-width:3px;border-radius:5px;margin-right:4px;padding:4px 6px;display:inline-block}p.help{display:block}.touch-only,body.touch-device .desktop-only{display:none!important}body.touch-device .touch-only{display:block!important}.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:min(560px,92vw);display:grid}.stats div{background:#141228d9;border:2px solid #000;border-radius:10px;flex-direction:column;gap:6px;padding:12px 6px;display:flex;box-shadow:4px 4px #000}.stats b{font:28px/1 var(--display);letter-spacing:1px;color:var(--yellow)}.stats span{font:700 10px/1 var(--ui);letter-spacing:1px;text-transform:uppercase;color:#b9b3d6}@media (max-width:560px){.portrait{width:48px;height:48px}.portrait span{font-size:30px}.name{font-size:20px}#score{font-size:26px}.combo{font-size:22px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.go{font-size:36px}}.sound-hint{font:800 14px/1.2 var(--ui);color:var(--cyan);margin:0;animation:1.2s ease-in-out infinite blink}#screen-title{align-content:safe center;gap:22px;overflow-y:auto}.board{background:#141228e0;border:2px solid #000;border-radius:14px;width:min(340px,92vw);padding:12px 12px 10px;box-shadow:5px 5px #000}.board h3{text-align:center;font:30px/1 var(--display);letter-spacing:2px;color:var(--yellow);-webkit-text-stroke:1.5px #000;paint-order:stroke fill;text-shadow:3px 3px 0 var(--pink);margin:0 0 8px}.board-list{max-height:38vh;margin:0;padding:0;list-style:none;overflow-y:auto}.board-list li{font:700 14px/1.2 var(--ui);color:var(--paper);border-radius:7px;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:6px 8px;display:grid}.board-list li:nth-child(odd){background:#ffffff0d}.board-list .pos{font:20px/1 var(--display);color:#b9b3d6;text-align:center}.board-list li:first-child .pos{color:#ffd23f}.board-list li:nth-child(2) .pos{color:#d9dde8}.board-list li:nth-child(3) .pos{color:#e0955a}.board-list .who{text-overflow:ellipsis;white-space:nowrap;text-align:left;overflow:hidden}.board-list .pts{font:20px/1 var(--display);letter-spacing:1px;color:var(--yellow)}.board-list li.me{background:var(--pink);color:#fff;animation:1s ease-in-out 3 pulse-me}.board-list li.me .pos,.board-list li.me .pts{color:#fff}.board-list li.empty{text-align:center;color:#b9b3d6;font-weight:600;display:block}@keyframes pulse-me{50%{transform:scale(1.04)}}.save-score{flex-direction:column;align-items:center;gap:8px;width:min(420px,92vw);display:flex}.save-score:empty{display:none}.save-msg{font:800 15px/1.3 var(--ui);color:var(--paper);text-shadow:2px 2px #000;margin:0}.save-msg.ok{color:var(--yellow)}.save-form{gap:8px;width:100%;display:flex}.save-form input{min-width:0;font:700 17px/1 var(--ui);color:var(--ink);background:var(--paper);border:2px solid #000;border-radius:9px;flex:1;padding:10px 12px;box-shadow:3px 3px #000}.save-form input:focus{outline:3px solid var(--cyan);outline-offset:1px}.save-btn{cursor:pointer;font:20px/1 var(--display);letter-spacing:1px;color:#fff;background:var(--pink);border:2px solid #000;border-radius:9px;padding:0 16px;box-shadow:3px 3px #000}.save-btn:disabled{opacity:.6}.board-mini{background:#141228d9;border:2px solid #000;border-radius:10px;width:100%;max-height:24vh}.board-mini li{padding:4px 8px;font-size:13px}.board-mini .pos,.board-mini .pts{font-size:17px}@media (min-aspect-ratio:5/4){#screen-title{grid-auto-flow:column;justify-content:center;gap:clamp(20px,5vw,70px)}.board-title .board-list{max-height:60vh}}@media (max-height:520px){.logo .l1{font-size:64px}.logo .l2{font-size:32px}#screen-title .screen-inner{gap:10px}.board-title{padding:8px}.board-title h3{margin-bottom:4px;font-size:24px}.board-title .board-list{max-height:64vh}.board-list li{padding:3px 8px}.screen-bottom .big-title{font-size:30px}.board-mini{max-height:30vh}}