.mma-page{height:100vh;overflow:hidden;background:#08060d;user-select:none}.punch-hud{position:fixed;z-index:20;top:0;left:0;right:0;height:94px;padding:9px 64px 9px 12px;display:flex;align-items:center;justify-content:space-around;gap:10px;background:linear-gradient(#05050bf2,#16101df2);border-bottom:2px solid #d6ac3c;box-shadow:0 6px 25px #000}.punch-stat{text-align:center;min-width:65px}.punch-stat small{display:block;color:#9298b8;font:700 8px system-ui;letter-spacing:.16em}.punch-stat b{font-size:25px;color:var(--gold)}.punch-title{text-align:center;display:flex;align-items:center;gap:8px;font-size:20px;letter-spacing:.08em}.punch-title span{font:28px system-ui}.punch-hud .sound-toggle{position:fixed}.punch-arena{position:fixed;inset:94px 0 126px;overflow:hidden;background:radial-gradient(ellipse at 50% 5%,#5d3529,#1b111d 47%,#05050a 85%)}.spotlight{position:absolute;top:-35%;left:7%;width:26%;height:120%;background:linear-gradient(#fff6ae55,transparent);filter:blur(16px);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);transform:rotate(-12deg)}.spotlight.right{left:auto;right:7%;transform:rotate(12deg)}.crowd{position:absolute;left:0;right:0;bottom:21%;height:38%;background:radial-gradient(circle at 15px 20px,#302933 0 9px,transparent 10px) 0 0/35px 45px,linear-gradient(transparent,#08070b);opacity:.85}.cage{position:absolute;inset:5% 5% 9%;border:6px solid #3b3940;clip-path:polygon(10% 0,90% 0,100% 24%,96% 100%,4% 100%,0 24%);background:repeating-linear-gradient(60deg,transparent 0 38px,#ffffff0d 39px 41px),repeating-linear-gradient(-60deg,transparent 0 38px,#ffffff0d 39px 41px)}.ring-floor{position:absolute;z-index:0;left:4%;right:4%;bottom:-10%;height:39%;border-radius:50%;background:radial-gradient(ellipse,#51474a,#141216 72%);border-top:4px solid #8a7b69}.punch-zone{position:absolute;z-index:2;left:50%;top:10%;bottom:12%;width:clamp(135px,19vw,245px);transform:translateX(-50%);border:2px dashed #ffd34e66;background:linear-gradient(90deg,transparent,#ffd34e13,transparent);box-shadow:inset 0 0 35px #ffd34e16;display:flex;justify-content:center}.punch-zone:before{content:"";position:absolute;left:50%;top:50%;width:86px;height:86px;border:2px solid var(--gold);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 25px #ffbd1f88,inset 0 0 18px #ffbd1f55;animation:zonePulse 1.25s ease-in-out infinite}.punch-zone span{margin-top:8px;color:#ffd34eaa;font:700 9px system-ui;letter-spacing:.25em}.moving-target{position:absolute;z-index:4;left:0;bottom:10%;width:clamp(100px,13vw,175px);height:min(63vh,480px);padding:0;border:0;background:transparent;cursor:crosshair;filter:drop-shadow(0 7px 10px #000);will-change:transform}.moving-target img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:43% 43% 12% 12%;border:2px solid #48d8ff66;box-shadow:0 0 24px #36d9ff3b;user-select:none}.moving-target.hit{animation:targetHit .38s}.moving-target:focus-visible{outline:3px solid var(--gold)}.announcement{position:absolute;z-index:12;left:50%;top:42%;transform:translate(-50%,-50%) scale(0);font-size:clamp(52px,12vw,125px);color:var(--gold);text-shadow:5px 5px #b51a28;pointer-events:none}.announcement.show{animation:announce .75s}.punch-controls{position:fixed;z-index:22;left:0;right:0;bottom:0;height:126px;display:flex;align-items:center;justify-content:center;gap:35px;padding:10px;background:#07070ef2;border-top:1px solid #ffffff22}.punch-controls p{font:700 11px system-ui;letter-spacing:.08em;color:#aeb2c7}.punch-controls p span{display:block;color:var(--gold);margin-top:7px}.punch-controls button{width:min(260px,50vw);height:92px;border:2px solid var(--gold);border-radius:12px;background:linear-gradient(#fb633d,#b71929);box-shadow:0 0 28px #ff3b3255,inset 0 2px #ffffff66;cursor:pointer;transition:.1s}.punch-controls button:hover{transform:translateY(-4px);filter:brightness(1.15)}.punch-controls button:active,.punch-controls button.miss{transform:scale(.93);filter:grayscale(.35)}.punch-controls button span{font:30px system-ui;margin-right:8px}.punch-controls button b{font-size:27px;letter-spacing:.08em}.punch-controls button small{display:block;font:700 8px system-ui;letter-spacing:.2em}.damage-number{position:absolute;z-index:15;color:#fff34a;font-size:31px;text-shadow:3px 3px #9e1520;pointer-events:none;animation:floatScore .9s forwards}.punch-arena.shake{animation:screenShake .3s}.hit-flash{position:absolute;z-index:10;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,#fff 0 8%,#ffda35 9% 22%,#ff422e88 23% 42%,transparent 43%);transform:translate(-50%,-50%);animation:flash .42s forwards;pointer-events:none}@keyframes zonePulse{50%{transform:translate(-50%,-50%) scale(1.16);opacity:.55}}@keyframes targetHit{35%{filter:brightness(2) drop-shadow(0 0 25px #ffdf46);scale:.88;rotate:6deg}}@keyframes announce{0%{transform:translate(-50%,-50%) scale(1.8);opacity:0}25%,70%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(.6);opacity:0}}@keyframes floatScore{to{transform:translateY(-85px) scale(1.3);opacity:0}}@keyframes screenShake{25%{transform:translate(8px,3px)}50%{transform:translate(-7px,-3px)}75%{transform:translate(5px,-2px)}}@keyframes flash{to{transform:translate(-50%,-50%) scale(1.8) rotate(80deg);opacity:0}}@media(max-width:760px){.punch-hud{height:116px;flex-wrap:wrap;padding:7px 50px 7px 5px;gap:2px}.punch-title{order:-1;width:100%;justify-content:center;font-size:15px}.punch-stat{min-width:48px}.punch-stat small{font-size:6px}.punch-stat b{font-size:17px}.punch-hud .back-button{font-size:8px;padding:7px}.punch-arena{inset:116px 0 116px}.moving-target{width:clamp(82px,25vw,125px);height:min(48vh,340px);bottom:11%}.punch-zone{width:30vw;min-width:108px}.punch-controls{height:116px;gap:7px;padding:7px}.punch-controls p{width:42%;font-size:8px}.punch-controls button{height:87px;width:55%}.punch-controls button b{font-size:21px}.punch-controls button span{font-size:24px;margin-right:3px}}@media(max-height:600px){.punch-hud{height:78px}.punch-arena{inset:78px 0 92px}.punch-controls{height:92px}.punch-controls button{height:70px}.moving-target{height:55vh}}