@font-face{font-family:Bangers;src:url(assets/Bangers.ttf) format("truetype");font-display:swap}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#05061a;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none}
body{font-family:Bangers,Impact,"Arial Black",sans-serif;color:#fff;letter-spacing:.04em}
#game{position:fixed;inset:0;overflow:hidden;background:linear-gradient(#070a2a,#121c5c 60%,#0a0f33)}
#world{position:absolute;left:0;right:0;top:0;bottom:0;perspective:900px;overflow:hidden}
#bg{position:absolute;left:-14%;right:-14%;top:-8%;bottom:-8%;transform-origin:50% 60%;will-change:transform}
#bg img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block;filter:saturate(1.1)}
#floor{position:absolute;left:-30%;right:-30%;bottom:-6%;height:40%;transform:rotateX(62deg);transform-origin:50% 100%;
 background:radial-gradient(ellipse at 50% 30%,rgba(120,160,255,.35),rgba(0,0,30,0) 60%),
 repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 80px),
 repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 2px,transparent 2px 80px),linear-gradient(#1a2a6c,#0a0f33);opacity:.85}
.fighter{position:absolute;bottom:var(--ground);width:var(--fw);height:calc(var(--fw)*.8);left:0;will-change:transform;transform-origin:50% 100%}
.fighter .body{position:absolute;inset:0;transform-origin:50% 100%}
.fighter img{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
#f2 .body{transform:scaleX(-1)}
.fighter .shadow{position:absolute;left:33%;right:33%;bottom:-3%;height:8%;border-radius:50%;background:radial-gradient(rgba(0,0,0,.6),rgba(0,0,0,0) 70%)}
.fighter.idle .body img{animation:bob .9s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(2.5%) scaleY(.985)}}
.fighter.flash img{filter:drop-shadow(0 0 10px #fff) brightness(1.8)}
.fighter.rage img{filter:drop-shadow(0 0 14px #ffd23f) drop-shadow(0 0 4px #ff3b3b)}
.fighter.blocking .body img{filter:drop-shadow(0 0 8px #6cf) brightness(1.05)}
#hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;gap:8px;padding:calc(env(safe-area-inset-top) + 10px) 10px 0;z-index:5}
.side{flex:1}
.bar{height:20px;border:3px solid #ffd23f;border-radius:4px;background:#5a0000;position:relative;overflow:hidden;box-shadow:0 3px 0 #000}
.bar i{position:absolute;top:0;bottom:0;left:0;width:100%;transition:width .12s}
.bar .lag{background:#fff6a8;transition:width .8s .25s}
.bar .hp{background:linear-gradient(#7dff6a,#1fae2f)}
.s2 .bar i{left:auto;right:0}
.nm{font-size:18px;margin-top:3px;text-shadow:2px 2px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2 .nm{text-align:right}
#timer{font-size:34px;line-height:1;min-width:52px;text-align:center;color:#ffd23f;text-shadow:3px 3px 0 #b00,-1px -1px 0 #000}
#meter{position:absolute;right:10px;top:calc(env(safe-area-inset-top) + 64px);width:38%;height:10px;border:2px solid #000;background:#222;z-index:5;opacity:0;transition:opacity .4s}
#meter.on{opacity:1}
#meter i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#ff3b3b,#ffd23f);transition:width .3s}
#meter span{position:absolute;right:0;top:12px;font-size:13px;color:#ffd23f;text-shadow:1px 1px 0 #000}
#announce{position:absolute;left:0;right:0;top:32%;text-align:center;z-index:8;pointer-events:none;font-size:min(22vw,150px);line-height:.9;color:#ffd23f;
 -webkit-text-stroke:3px #000;text-shadow:5px 6px 0 #b00000;opacity:0}
#announce.go{animation:ann 1.1s ease-out forwards}
#announce.small{font-size:min(12vw,80px)}
@keyframes ann{0%{opacity:0;transform:scale(3) rotate(-8deg)}18%{opacity:1;transform:scale(.95) rotate(-3deg)}30%{transform:scale(1.05)}80%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
#fx{position:absolute;inset:0;z-index:4;pointer-events:none}
.spark{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;pointer-events:none;animation:spark .38s ease-out forwards;
 background:radial-gradient(circle,#fff 0 12%,#ffe066 13% 28%,rgba(255,120,0,.85) 29% 40%,transparent 41%);
 clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
@keyframes spark{0%{transform:scale(.2) rotate(0)}60%{opacity:1}100%{transform:scale(1.5) rotate(40deg);opacity:0}}
.pow{position:absolute;font-size:38px;color:#fff;-webkit-text-stroke:2px #000;text-shadow:3px 3px 0 #e0182d;animation:pow .8s ease-out forwards;white-space:nowrap;transform:translateX(-50%)}
.pow.big{font-size:54px;color:#ffd23f}
.pow.weak{font-size:26px;color:#9cf;text-shadow:2px 2px 0 #024}
@keyframes pow{0%{opacity:0;margin-top:20px;scale:.4}20%{opacity:1;scale:1.15}100%{opacity:0;margin-top:-60px;scale:1}}
#confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
#confetti i{position:absolute;top:-20px;width:8px;height:12px;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
#controls{position:absolute;left:0;right:0;bottom:0;display:flex;gap:10px;padding:10px 10px calc(env(safe-area-inset-bottom) + 14px);z-index:6}
#controls button{flex:1;height:84px;border-radius:18px;border:3px solid #000;font-family:inherit;color:#fff;font-size:28px;letter-spacing:.06em;
 box-shadow:0 7px 0 #000,inset 0 3px 0 rgba(255,255,255,.4);text-shadow:2px 2px 0 rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:manipulation}
#controls small{font-size:12px;opacity:.7}
#bPunch{background:linear-gradient(#ff5a5a,#c0101e)}
#bKick{background:linear-gradient(#ffb340,#d76a00)}
#bBlock{background:linear-gradient(#59a8ff,#1546b8)}
#controls button:active,#controls button.down{transform:translateY(6px);box-shadow:0 1px 0 #000}
#controls.off{opacity:.45;pointer-events:none}
#snd{position:absolute;right:10px;bottom:calc(env(safe-area-inset-bottom) + 118px);z-index:7;width:40px;height:40px;border-radius:50%;border:2px solid #000;background:rgba(255,255,255,.85);font-size:18px}
.screen{position:absolute;inset:0;z-index:20;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;
 background:radial-gradient(ellipse at 50% 30%,rgba(40,20,120,.88),rgba(5,6,26,.97))}
.screen.show{display:flex}
h1{line-height:.85;transform:rotate(-4deg)}
h1 span{display:block;font-size:min(14vw,90px);color:#fff;-webkit-text-stroke:2px #000;text-shadow:4px 4px 0 #1546b8}
h1 em{display:block;font-style:normal;font-size:min(22vw,150px);color:#ffd23f;-webkit-text-stroke:3px #000;text-shadow:5px 6px 0 #c0101e}
.sub{font-size:26px;margin:18px 0 10px;color:#fff}
.pick{display:flex;gap:12px;width:100%;max-width:520px}
.pick button{flex:1;background:linear-gradient(#26307a,#0d1240);border:3px solid #ffd23f;border-radius:16px;padding:8px 6px 10px;color:#fff;font-family:inherit;font-size:22px;box-shadow:0 6px 0 #000}
.pick button:active{transform:translateY(5px);box-shadow:0 1px 0 #000}
.pick img{width:100%;height:200px;object-fit:contain;object-position:50% 100%;display:block}
.flip{transform:scaleX(-1)}
.pick b{display:block;font-weight:normal;margin-top:4px}
.hint{margin-top:16px;font-size:15px;opacity:.65;font-family:Arial,sans-serif;letter-spacing:0}
#end .winner img{height:min(42vh,340px);object-fit:contain;filter:drop-shadow(0 0 22px #ffd23f)}
#end h2{font-size:min(16vw,96px);line-height:.9;color:#ffd23f;-webkit-text-stroke:3px #000;text-shadow:5px 6px 0 #c0101e;margin-top:6px}
#end p{font-size:24px;margin:10px 0 18px}
#again{font-family:inherit;font-size:32px;padding:14px 36px;border-radius:16px;border:3px solid #000;color:#fff;background:linear-gradient(#7dff6a,#1fae2f);box-shadow:0 7px 0 #000;text-shadow:2px 2px 0 #000}
#again:active{transform:translateY(6px);box-shadow:0 1px 0 #000}
@media (min-aspect-ratio:1/1){#controls{left:auto;right:auto;width:100%;max-width:620px;margin:0 auto;inset:auto 0 0 0}#controls button{height:72px}.pick img{height:240px}}