:root{color-scheme:dark;font-family:Russo One,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}html,body,#root{width:100%;height:100%;overflow:hidden;background:#0a0a12;color:#fafafa}#root{display:flex;align-items:center;justify-content:center}@keyframes shake{0%,to{transform:translate(0)}10%{transform:translate(-10px,-8px)}20%{transform:translate(8px,10px)}30%{transform:translate(-12px,5px)}40%{transform:translate(10px,-8px)}50%{transform:translate(-5px,10px)}60%{transform:translate(12px,-5px)}70%{transform:translate(-8px,8px)}80%{transform:translate(5px,-10px)}90%{transform:translate(-10px,3px)}}@keyframes shakeHard{0%,to{transform:translate(0)}10%{transform:translate(-16px,-12px)}20%{transform:translate(14px,16px)}30%{transform:translate(-18px,8px)}40%{transform:translate(14px,-12px)}50%{transform:translate(-8px,14px)}60%{transform:translate(16px,-8px)}70%{transform:translate(-12px,12px)}80%{transform:translate(8px,-14px)}90%{transform:translate(-14px,5px)}}@keyframes pulseGlow{0%,to{filter:drop-shadow(0 0 8px rgba(0,170,255,.6))}50%{filter:drop-shadow(0 0 20px rgba(0,170,255,1))}}@keyframes slideUp{0%{transform:translate(-50%,-50%) scale(.3) rotate(-8deg);opacity:0}15%{transform:translate(-50%,-50%) scale(1.25) rotate(2deg);opacity:1}30%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}75%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}to{transform:translate(-50%,-80%) scale(.7) rotate(-2deg);opacity:0}}@keyframes scoreBump{0%{transform:scale(1)}20%{transform:scale(1.3)}40%{transform:scale(.92)}60%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes comboFadeIn{0%{transform:scale(.3) rotate(-10deg);opacity:0}50%{transform:scale(1.2) rotate(3deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}@keyframes particleFly{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--px),var(--py)) scale(0);opacity:0}}@keyframes barGlow{0%,to{box-shadow:0 0 10px #00aaff4d}50%{box-shadow:0 0 25px #0afc}}@keyframes fistPunch{0%{transform:translate(0) scaleX(1) scaleY(1)}40%{transform:translate(0) scaleX(.7) scaleY(1.3)}60%{transform:translate(var(--punch-dist)) scaleX(1.2) scaleY(.85)}75%{transform:translate(var(--punch-dist)) scaleX(1) scaleY(1)}to{transform:translate(0) scaleX(1) scaleY(1)}}@keyframes bagSwing{0%{transform-origin:50% 0%;transform:rotate(0)}15%{transform:rotate(var(--swing-angle))}40%{transform:rotate(calc(var(--swing-angle) * -.5))}60%{transform:rotate(calc(var(--swing-angle) * .3))}75%{transform:rotate(calc(var(--swing-angle) * -.15))}90%{transform:rotate(calc(var(--swing-angle) * .05))}to{transform:rotate(0)}}@keyframes impactFlash{0%{opacity:.9;transform:translate(-50%,-50%) scale(.3)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}to{opacity:0;transform:translate(-50%,-50%) scale(2.5)}}@keyframes glowBurst{0%{opacity:.8;transform:translate(-50%,-50%) scale(.5)}40%{opacity:.6;transform:translate(-50%,-50%) scale(1.8)}to{opacity:0;transform:translate(-50%,-50%) scale(3)}}@keyframes hitStopFreeze{0%,to{filter:brightness(1)}30%{filter:brightness(2.5)}}@keyframes floatingText{0%{transform:translate(-50%) scale(.5);opacity:0}20%{transform:translate(-50%,-10px) scale(1.2);opacity:1}40%{transform:translate(-50%,-20px) scale(1);opacity:1}to{transform:translate(-50%,-80px) scale(.8);opacity:0}}@keyframes zoomPunch{0%{transform:scale(1)}40%{transform:scale(1.04)}to{transform:scale(1)}}@keyframes chainSwing{0%{transform:rotate(0)}25%{transform:rotate(3deg)}50%{transform:rotate(-2deg)}75%{transform:rotate(1deg)}to{transform:rotate(0)}}@keyframes chargeGlow{0%,to{box-shadow:0 0 15px #f803}50%{box-shadow:0 0 35px #f809}}.game{width:100%;max-width:420px;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:12px 16px 20px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 20%,rgba(0,100,200,.12) 0%,transparent 60%),radial-gradient(ellipse at 50% 80%,rgba(255,120,0,.08) 0%,transparent 50%),#0a0a12}.game.shaking{animation:shake .35s ease-out}.game.shaking-hard{animation:shakeHard .45s ease-out}.game.zooming{animation:zoomPunch .3s ease-out}.game.hit-stopped{animation:hitStopFreeze .06s linear}.header{text-align:center;width:100%;flex-shrink:0}.title{font-family:Orbitron,sans-serif;font-size:clamp(1.3rem,5vw,1.8rem);font-weight:900;background:linear-gradient(135deg,#0af,#0df,#f80);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-transform:uppercase;letter-spacing:.08em}.score-display{font-family:Orbitron,sans-serif;font-size:clamp(2.8rem,14vw,5rem);font-weight:900;color:#fff;text-shadow:0 0 20px rgba(0,170,255,.8),0 0 60px rgba(0,170,255,.3);line-height:1;transition:transform .15s ease;min-height:1.1em}.score-display.bumped{animation:scoreBump .35s ease-out}.score-label{font-family:Orbitron,sans-serif;font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:#ffffff4d;margin-top:2px}.combo{font-family:Orbitron,sans-serif;font-size:clamp(1rem,4vw,1.3rem);font-weight:700;color:#f80;text-shadow:0 0 15px rgba(255,136,0,.8);animation:comboFadeIn .4s ease-out;min-height:1.4em}.bag-area{position:relative;width:100%;height:clamp(140px,28vh,220px);display:flex;align-items:flex-start;justify-content:center;flex-shrink:0}.chain{width:4px;height:30px;background:linear-gradient(180deg,#888,#555);border-radius:2px;position:absolute;top:0;left:50%;transform:translate(-50%);box-shadow:0 0 6px #ffffff1a}.chain.swinging{animation:chainSwing var(--swing-dur, .8s) ease-out}.bag-assembly{position:absolute;top:28px;left:50%;transform-origin:50% 0%;display:flex;flex-direction:column;align-items:center}.bag-assembly.swinging{animation:bagSwing var(--swing-dur, .8s) ease-out}.bag-top{width:40px;height:14px;background:linear-gradient(180deg,#888,#666);border-radius:4px 4px 0 0;border:1px solid rgba(255,255,255,.15)}.bag-body{width:clamp(64px,20vw,90px);height:clamp(90px,18vh,130px);background:linear-gradient(160deg,#2a1a0a,#1a0e05 40%,#3a2a10);border:2px solid rgba(255,136,0,.25);border-radius:8px 8px 20px 20px;position:relative;box-shadow:0 4px 20px #00000080,inset 0 -10px 20px #ff880014;overflow:hidden}.bag-body:before{content:"";position:absolute;top:15%;left:10%;width:80%;height:20%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);border-radius:50%}.bag-body:after{content:"";position:absolute;bottom:10%;left:50%;transform:translate(-50%);width:60%;height:6px;background:#ff88004d;border-radius:3px;filter:blur(2px)}.bag-target{position:absolute;top:35%;left:50%;transform:translate(-50%);width:28px;height:28px;border:2px solid rgba(255,60,60,.6);border-radius:50%;display:flex;align-items:center;justify-content:center}.bag-target:after{content:"";width:10px;height:10px;background:#f33;border-radius:50%;box-shadow:0 0 10px #ff323299}.bag-score-ring{position:absolute;bottom:-8px;left:50%;transform:translate(-50%);font-family:Orbitron,sans-serif;font-size:.5rem;font-weight:700;color:#ff880080;letter-spacing:.1em;white-space:nowrap}.fist-area{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:70px;height:60px;z-index:5}.fist{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:52px;height:44px;pointer-events:none}.fist.punching{animation:fistPunch var(--punch-dur, .35s) ease-out forwards}.fist-glove{width:100%;height:100%;position:relative}.glove-body{width:44px;height:36px;background:linear-gradient(160deg,#c20,#910);border-radius:18px 22px 14px 10px;position:absolute;bottom:0;left:4px;border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px #0006}.glove-thumb{width:14px;height:18px;background:linear-gradient(160deg,#d31,#a20);border-radius:8px 10px 6px 4px;position:absolute;bottom:6px;left:-4px;transform:rotate(-20deg);border:1px solid rgba(255,255,255,.08)}.glove-stripe{position:absolute;top:40%;left:20%;width:60%;height:3px;background:#ffffff26;border-radius:2px}.fist-area.idle .fist{transform:translate(-50%) translateY(5px)}.fist-area.charging .fist{transform:translate(-50%) translateY(-10px) scaleX(.85) scaleY(1.15);transition:transform .2s}.impact-flash{position:absolute;top:38%;left:50%;width:80px;height:80px;border-radius:50%;pointer-events:none;z-index:8;animation:impactFlash .35s ease-out forwards}.impact-flash.good{background:radial-gradient(circle,rgba(255,200,0,.8),transparent 70%)}.impact-flash.great{background:radial-gradient(circle,rgba(0,200,100,.8),transparent 70%)}.impact-flash.perfect{background:radial-gradient(circle,rgba(0,220,255,.9),transparent 70%)}.impact-flash.miss{background:radial-gradient(circle,rgba(255,50,50,.5),transparent 70%)}.glow-burst{position:absolute;top:38%;left:50%;width:60px;height:60px;border-radius:50%;pointer-events:none;z-index:7;animation:glowBurst .5s ease-out forwards}.glow-burst.good{background:radial-gradient(circle,rgba(255,200,0,.4),transparent 70%)}.glow-burst.great{background:radial-gradient(circle,rgba(0,200,100,.5),transparent 70%)}.glow-burst.perfect{background:radial-gradient(circle,rgba(0,220,255,.6),transparent 70%)}.floating-text{position:absolute;top:25%;left:50%;font-family:Orbitron,sans-serif;font-weight:900;font-size:clamp(2rem,10vw,3.5rem);text-transform:uppercase;letter-spacing:.08em;pointer-events:none;z-index:12;animation:floatingText 1s ease-out forwards;white-space:nowrap}.floating-text.miss{color:#f33;text-shadow:0 0 30px rgba(255,50,50,.8)}.floating-text.good{color:#fc0;text-shadow:0 0 30px rgba(255,200,0,.8)}.floating-text.great{color:#0c6;text-shadow:0 0 30px rgba(0,200,100,.8)}.floating-text.perfect{color:#0df;text-shadow:0 0 40px rgba(0,200,255,1),0 0 80px rgba(0,200,255,.5)}.floating-score{position:absolute;top:18%;left:50%;font-family:Orbitron,sans-serif;font-weight:700;font-size:clamp(1rem,5vw,1.6rem);color:#fffc;text-shadow:0 0 10px rgba(255,255,255,.4);pointer-events:none;z-index:12;animation:floatingText 1.1s ease-out forwards;white-space:nowrap}.result-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:Orbitron,sans-serif;font-weight:900;font-size:clamp(2.5rem,12vw,4.5rem);text-transform:uppercase;letter-spacing:.1em;pointer-events:none;z-index:10;animation:slideUp 1s ease-out forwards;white-space:nowrap}.result-popup.miss{color:#f33;text-shadow:0 0 30px rgba(255,50,50,.8)}.result-popup.good{color:#fc0;text-shadow:0 0 30px rgba(255,200,0,.8)}.result-popup.great{color:#0c6;text-shadow:0 0 30px rgba(0,200,100,.8)}.result-popup.perfect{color:#0df;text-shadow:0 0 40px rgba(0,200,255,1),0 0 80px rgba(0,200,255,.5)}.particles-container{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9}.particle{position:absolute;border-radius:50%;animation:particleFly .7s ease-out forwards}.punch-trail{position:absolute;bottom:20%;left:50%;width:4px;height:50px;pointer-events:none;z-index:6;opacity:0}.punch-trail.active{opacity:1;background:linear-gradient(0deg,rgba(255,136,0,.7),rgba(0,170,255,.4),transparent);animation:particleFly .3s ease-out forwards;--px: 0px;--py: -80px}.timing-zone{position:relative;width:90%;max-width:340px;height:50px;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden;animation:barGlow 2s ease-in-out infinite}.timing-bar{position:absolute;top:0;left:0;width:100%;height:100%}.timing-segment{position:absolute;top:0;height:100%;border-right:2px solid rgba(255,255,255,.15)}.timing-segment.miss{background:#ff323226}.timing-segment.good{background:#ffc80033}.timing-segment.great{background:#00c86440}.timing-segment.perfect{background:#00c8ff59;border:2px solid rgba(0,200,255,.6);border-radius:4px}.timing-cursor{position:absolute;top:-4px;width:4px;height:calc(100% + 8px);background:#fff;border-radius:2px;box-shadow:0 0 10px #ffffffe6,0 0 30px #0af9;transition:none;z-index:2}.timing-labels{display:flex;justify-content:space-between;width:90%;max-width:340px;margin-top:4px;font-family:Orbitron,sans-serif;font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:#ffffff40}.power-section{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;flex-shrink:0}.power-bar-container{width:90%;max-width:340px;height:18px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;position:relative}.power-bar-fill{height:100%;border-radius:10px;transition:width .05s linear;background:linear-gradient(90deg,#06f,#0af,#f80);box-shadow:0 0 15px #00aaff80}.hold-btn{width:clamp(140px,44vw,190px);height:clamp(140px,44vw,190px);border-radius:50%;border:4px solid rgba(0,170,255,.6);background:radial-gradient(circle at 40% 35%,#1a3a5c,#0a1a2e);color:#0df;font-family:Orbitron,sans-serif;font-size:clamp(1.1rem,3.5vw,1.5rem);font-weight:900;text-transform:uppercase;letter-spacing:.15em;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px #00aaff4d,inset 0 0 30px #00aaff1a;transition:transform .1s,box-shadow .1s,border-color .1s;touch-action:none;flex-shrink:0}.hold-btn:active,.hold-btn.active{transform:scale(.93);border-color:#f80;background:radial-gradient(circle at 40% 35%,#3a2a10,#1a0e00);color:#f80;box-shadow:0 0 40px #ff880080,inset 0 0 40px #ff880026;animation:chargeGlow .6s ease-in-out infinite}.hold-btn.ready{animation:pulseGlow 1.5s ease-in-out infinite}.hold-btn:disabled{opacity:.4;cursor:default;animation:none}.bottom-bar{display:flex;justify-content:space-between;align-items:flex-end;width:100%;padding:0 4px;flex-shrink:0}.meta-item{text-align:center}.meta-label{font-family:Orbitron,sans-serif;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:#ffffff4d;margin-bottom:2px}.meta-value{font-family:Orbitron,sans-serif;font-size:clamp(.9rem,3.5vw,1.3rem);font-weight:700;color:#0af;text-shadow:0 0 10px rgba(0,170,255,.4)}.leaderboard-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#ffffff80;font-family:Orbitron,sans-serif;font-size:.55rem;letter-spacing:.12em;padding:5px 10px;cursor:pointer;transition:all .2s}.leaderboard-btn:hover{background:#ffffff1a;color:#fff}.leaderboard-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}.leaderboard-panel{width:100%;max-width:380px;background:#0a0f1ef2;border:1px solid rgba(0,170,255,.3);border-radius:16px;padding:24px;max-height:80vh;overflow-y:auto}.leaderboard-title{font-family:Orbitron,sans-serif;font-size:1.1rem;font-weight:900;text-align:center;color:#0df;text-shadow:0 0 15px rgba(0,200,255,.5);margin-bottom:18px;letter-spacing:.1em}.lb-entry{display:flex;align-items:center;padding:8px 10px;margin-bottom:5px;background:#ffffff08;border-radius:8px;border:1px solid rgba(255,255,255,.05)}.lb-entry.highlight{background:#00aaff1a;border-color:#00aaff4d}.lb-rank{font-family:Orbitron,sans-serif;font-size:.75rem;font-weight:700;color:#fff6;width:28px;text-align:center}.lb-entry:nth-child(1) .lb-rank{color:gold;text-shadow:0 0 8px rgba(255,215,0,.5)}.lb-entry:nth-child(2) .lb-rank{color:silver}.lb-entry:nth-child(3) .lb-rank{color:#cd7f32}.lb-score{flex:1;text-align:right;font-family:Orbitron,sans-serif;font-size:.95rem;font-weight:700;color:#0af}.lb-details{font-family:Orbitron,sans-serif;font-size:.5rem;color:#ffffff4d;margin-left:10px;text-align:right;line-height:1.4}.lb-close{display:block;margin:14px auto 0;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#fff;font-family:Orbitron,sans-serif;font-size:.65rem;letter-spacing:.12em;padding:8px 20px;cursor:pointer;transition:background .2s}.lb-close:hover{background:#ffffff26}