*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#222;font-family:sans-serif}#app{position:relative;width:100vw;height:100vh;transform-origin:center center}#camera-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}#opponent{max-width:70%;max-height:80%}#opponent.hit{animation:opponent-shake .25s ease-in-out}@keyframes opponent-shake{0%,to{transform:translate(0) rotate(0)}20%{transform:translate(-12px) rotate(-4deg)}40%{transform:translate(10px) rotate(3deg)}60%{transform:translate(-8px) rotate(-2deg)}80%{transform:translate(6px) rotate(1deg)}}#fists{position:fixed;bottom:-20px;left:0;right:0;display:flex;justify-content:space-between;padding:0 2vw;pointer-events:none}.fist{width:380px}.fist-svg{width:100%;height:auto;filter:url(#sketchy-filter)}#fist-right{transform:scaleX(-1)}#fist-left.jab{animation:jab-left .13s cubic-bezier(.2,.9,.3,1)}#fist-right.jab{animation:jab-right .13s cubic-bezier(.2,.9,.3,1)}@keyframes jab-left{0%{transform:translate(0) scale(1)}25%{transform:translate(30vw,-48vh) scale(1.35)}50%{transform:translate(30vw,-48vh) scale(1.35)}to{transform:translate(0) scale(1)}}@keyframes jab-right{0%{transform:scaleX(-1) translate(0) scale(1)}25%{transform:scaleX(-1) translate(30vw,-48vh) scale(1.35)}50%{transform:scaleX(-1) translate(30vw,-48vh) scale(1.35)}to{transform:scaleX(-1) translate(0) scale(1)}}.impact-burst{position:absolute;top:50%;left:50%;width:220px;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;z-index:5}.impact-burst-svg{width:100%;height:auto}.impact-burst.show{animation:impact-pop .26s ease-out}@keyframes impact-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-10deg)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(6deg)}to{opacity:0;transform:translate(-50%,-50%) scale(1.3) rotate(10deg)}}#permission-message{display:none;position:fixed;top:16px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:12px 20px;border-radius:8px;font-size:1rem}#permission-message.visible{display:block}#hud{position:fixed;top:2vh;left:3vw;right:3vw;display:flex;align-items:center;gap:2vw;z-index:500;pointer-events:none}#hit-count{flex:1;font-size:clamp(40px,9vh,96px);font-weight:900;color:#ffe600;-webkit-text-stroke:3px #111}#timer{min-width:4.5ch;font-size:clamp(40px,9vh,96px);font-weight:900;color:#ffe600;text-shadow:4px 4px 0 #111;font-variant-numeric:tabular-nums;text-align:right}#result{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:3vh;background:#000000e0;color:#fff;z-index:1000}#result.visible{display:flex}#result-hits{font-size:clamp(80px,22vh,240px);font-weight:900;color:#ffe600;text-shadow:6px 6px 0 #d91e1e;font-variant-numeric:tabular-nums}#result-best{font-size:clamp(28px,6vh,64px);font-weight:800}#retry-button{font-size:clamp(36px,8vh,88px);font-weight:900;padding:2vh 6vw;background:#1e5fd9;color:#fff;border:6px solid #111;border-radius:20px;box-shadow:0 8px #111;cursor:pointer}#retry-button:active{transform:translateY(6px);box-shadow:0 2px #111}#result-label,#result-diff,#result-breakdown{font-size:clamp(22px,4.5vh,48px);font-weight:800}#body-guide{display:none;position:fixed;left:50%;bottom:8vh;transform:translate(-50%);max-width:calc(100vw - 32px);padding:16px 24px;background:#000c;color:#fff;font-size:clamp(18px,3.5vh,36px);font-weight:800;text-align:center;border-radius:12px;z-index:50}#body-guide.visible{display:block}#debug-overlay{display:none;position:fixed;left:8px;bottom:8px;margin:0;padding:8px 12px;background:#000000bf;color:#7fff7f;font:13px/1.4 ui-monospace,Menlo,monospace;white-space:pre;z-index:60;pointer-events:none}#debug-overlay.visible{display:block}.hit-popup{position:absolute;top:30%;transform:translate(-50%);font-size:clamp(32px,7vh,80px);font-weight:900;color:#ffe600;-webkit-text-stroke:3px #111;pointer-events:none;animation:hit-popup .7s ease-out forwards;z-index:20}@keyframes hit-popup{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -12vh}}#hud{gap:3vw}#score{flex:1;font-size:clamp(40px,9vh,96px);font-weight:900;color:#ffe600;-webkit-text-stroke:3px #111;font-variant-numeric:tabular-nums}#round,#lives{font-size:clamp(28px,6vh,64px);font-weight:900;color:#fff;text-shadow:3px 3px 0 #111}#lives{color:#ff3b3b;letter-spacing:.1em}.target{position:fixed;width:var(--size);height:var(--size);transform:translate(-50%,-50%);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:calc(var(--size) * .36);font-weight:900;color:#fff;-webkit-text-stroke:2px #111;background:color-mix(in srgb,var(--c) 40%,transparent);border:3px solid rgba(255,255,255,.9);box-shadow:0 0 0 3px #00000080,0 0 22px color-mix(in srgb,var(--c) 70%,transparent);z-index:10;pointer-events:none;opacity:.35;scale:.75;transition:opacity 80ms,scale .12s}.target.left{--c: #1e5fd9}.target.right{--c: #e0701a}.target.active{opacity:1;scale:1;animation:target-in .2s ease-out,target-pulse .7s .2s ease-in-out infinite alternate}.target.done{opacity:0;scale:1.4;transition:opacity .2s,scale .2s;animation:none}.target:before{content:"";position:absolute;inset:-14%;border-radius:50%;background:conic-gradient(#ffe600 calc(var(--p, 1) * 360deg),#00000059 0);-webkit-mask:radial-gradient(circle,transparent 0 62%,#000 63%);mask:radial-gradient(circle,transparent 0 62%,#000 63%)}.target .label{position:relative;top:-.05em}.target .order{position:absolute;top:0;right:0;font-size:.4em;background:#111;color:#ffe600;-webkit-text-stroke:0;border-radius:999px;min-width:1.6em;height:1.6em;padding:0 .3em;display:flex;align-items:center;justify-content:center}@keyframes target-in{0%{scale:.4;opacity:0}}@keyframes target-pulse{to{scale:1.07}}#opponent.hit-head{transform-origin:50% 45%;animation:hit-head var(--hit-ms, .38s) ease-out}#opponent.hit-body{transform-origin:50% 90%;animation:hit-body var(--hit-ms, .3s) ease-out}@keyframes hit-head{0%{transform:none}20%{transform:translate(calc(var(--hit-dir) * -18px),-10px) rotate(calc(var(--hit-dir) * -9deg)) scale(.97)}55%{transform:translate(calc(var(--hit-dir) * 6px)) rotate(calc(var(--hit-dir) * 3deg))}to{transform:none}}@keyframes hit-body{0%{transform:none}25%{transform:translateY(14px) scale(.97,.94) rotate(calc(var(--hit-dir) * -3deg))}60%{transform:translateY(-4px) scale(1.01,1.02)}to{transform:none}}#opponent.windup{rotate:var(--lean, 0deg);animation:windup-shake 70ms linear infinite alternate;transform-origin:50% 90%}@keyframes windup-shake{0%{translate:calc(var(--shake, 0px) * -1) 0}to{translate:var(--shake, 0px) 0}}#counter-fist{position:fixed;width:var(--fist, 16vh);height:var(--fist, 16vh);border-radius:45% 45% 40% 40%;background:radial-gradient(circle at 35% 30%,#ff7a7a,#c8161d 55%,#6d0a0e);border:5px solid #2a1608;transform:translate(-50%,-50%) scale(calc(.7 + var(--k, 0) * .6));filter:drop-shadow(0 0 18px #ff2020) drop-shadow(0 0 6px #ff0);z-index:11;pointer-events:none;opacity:0}#counter-fist.windup{opacity:1;animation:windup-shake 70ms linear infinite alternate;--shake: 4px}#counter-fist.thrust{opacity:1;animation:fist-thrust .34s ease-in forwards}@keyframes fist-thrust{0%{opacity:1}45%{left:50%;top:45%;transform:translate(-50%,-50%) scale(3.2);opacity:1}to{left:50%;top:45%;transform:translate(-50%,-50%) scale(3.6);opacity:0}}#counter-fist.thrust:not(.connect){animation-name:fist-miss}@keyframes fist-miss{0%{opacity:1}50%{left:50%;top:40%;transform:translate(-50%,-50%) scale(2.4);opacity:.8}to{left:50%;top:40%;transform:translate(-50%,-50%) scale(2.6);opacity:0}}#combo-name{position:fixed;top:16%;left:50%;transform:translate(-50%);font-size:clamp(36px,9vh,96px);font-weight:900;color:#fff;-webkit-text-stroke:3px #d91e1e;opacity:0;pointer-events:none;z-index:20;white-space:nowrap}#combo-name.show{animation:combo-name 1.2s ease-out forwards}@keyframes combo-name{0%{opacity:0;scale:1.6}15%{opacity:1;scale:1}75%{opacity:1}to{opacity:0}}.hit-popup.combo{font-size:clamp(40px,9vh,100px)}.hand-cursor{position:fixed;width:var(--hs, 8vh);height:var(--hs, 8vh);transform:translate(-50%,-50%);border-radius:50%;border:5px solid #fff;box-shadow:0 0 0 3px #111,0 0 18px #fffc;color:#fff;font:900 calc(var(--hs, 8vh) * .5) sans-serif;-webkit-text-stroke:1px #111;display:none;align-items:center;justify-content:center;z-index:15;pointer-events:none}#hand-left{background:#1e5fd9d9}#hand-right{background:#e0701ad9}.hand-cursor.visible{display:flex}.counter{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:30vh;height:30vh;display:none;align-items:center;justify-content:center;z-index:12;pointer-events:none}.counter.visible{display:flex}.counter-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.counter-ring circle{fill:none;stroke-width:9}.counter-ring .ring-bg{stroke:#00000073;fill:#00000040}.counter-ring .ring-fg{stroke:#ff2020;stroke-dasharray:100;stroke-dashoffset:calc((1 - var(--p, 1)) * 100);stroke-linecap:round}.counter.dodged .ring-fg{stroke:#3cff6e}.counter-count{font-size:9vh;font-weight:900;color:#fff;-webkit-text-stroke:3px #d91e1e;font-variant-numeric:tabular-nums}.counter-arrow{position:absolute;top:102%;font-size:clamp(32px,8vh,84px);font-weight:900;color:#fff;-webkit-text-stroke:3px #d91e1e;white-space:nowrap;animation:counter-pulse .3s infinite alternate}.counter.dodged .counter-arrow{-webkit-text-stroke-color:#139c3a;animation:none}@keyframes counter-pulse{to{scale:1.12}}#banner{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);font-size:clamp(48px,14vh,160px);font-weight:900;color:#ffe600;-webkit-text-stroke:4px #111;text-align:center;z-index:40;pointer-events:none;white-space:pre-line}#banner.small{font-size:clamp(22px,5vh,52px);color:#fff;-webkit-text-stroke:0;background:#000000b3;padding:12px 24px;border-radius:12px}#flash{position:fixed;inset:0;background:red;opacity:0;pointer-events:none;z-index:30}#flash.show{animation:flash .45s ease-out}@keyframes flash{0%{opacity:.55}to{opacity:0}}#app.shake{animation:screen-shake .4s}@keyframes screen-shake{20%{transform:translate(-18px,8px)}40%{transform:translate(14px,-10px)}60%{transform:translate(-10px,6px)}80%{transform:translate(6px,-4px)}}.hit-popup.grade-PERFECT{color:#ffe600}.hit-popup.grade-GOOD{color:#7fff7f}.hit-popup.grade-OK{color:#fff}.hit-popup.bad{color:#ff3b3b}#result-score{font-size:clamp(80px,20vh,220px);font-weight:900;color:#ffe600;text-shadow:6px 6px 0 #d91e1e;font-variant-numeric:tabular-nums}#result-new{font-size:clamp(28px,6vh,64px);font-weight:900;color:#ff3b3b}#debug-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:55;display:none}#debug-canvas.visible{display:block}