*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#070b18;color:white;font-family:Arial,sans-serif;overflow:hidden}.game{height:100vh;display:grid;grid-template-rows:96px 1fr 70px;background:radial-gradient(circle at 50% 0,#29345a,#060914 55%)}header{display:grid;grid-template-columns:1fr 110px 1fr;gap:24px;align-items:center;padding:14px 5vw;background:#090d1c;border-bottom:3px solid #f0bc2d}.player{font-size:24px;letter-spacing:2px}.player small{font-size:11px;color:#ffd323}.p2{text-align:right}.bar{height:24px;background:#27141a;border:3px solid #fff;border-radius:4px;overflow:hidden;margin-top:7px}.bar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ffbe22,#f23030);transition:width .2s}.p2 .bar i{margin-left:auto;background:linear-gradient(90deg,#f23030,#ffbe22)}.timer{font:42px Impact;text-align:center;background:#f0bc2d;color:#111;clip-path:polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%)}.arena{position:relative;overflow:hidden;background:linear-gradient(#101b38 0 52%,#b34a24 52% 55%,#253047 55%)}.lights{position:absolute;inset:0;background:radial-gradient(ellipse at 25% 0,#fff8 0,transparent 25%),radial-gradient(ellipse at 75% 0,#fff8 0,transparent 25%)}.crowd{position:absolute;left:0;right:0;bottom:45%;height:28%;opacity:.7;background:radial-gradient(circle,#080a10 0 8px,transparent 9px) 0 0/35px 35px,linear-gradient(transparent,#050609)}.ring{position:absolute;left:5%;right:5%;bottom:5%;height:45%;border:12px solid #d6d8e0;background:linear-gradient(#b7c0cc,#e9edf0);transform:perspective(600px) rotateX(12deg);box-shadow:0 20px 60px #000}.rope{position:absolute;left:-5%;width:110%;height:7px;background:#db2430;box-shadow:0 3px #751019;z-index:5}.r1{top:10%}.r2{top:35%}.r3{top:60%}.fighter{position:absolute;bottom:8%;width:37vw;max-width:500px;height:75%;background-image:url('assets/fighters.png');background-size:200% 100%;background-repeat:no-repeat;filter:drop-shadow(0 15px 8px #0008);transition:filter .12s;z-index:4;will-change:transform}.f1{left:8%;background-position:left center}.f2{left:56%;background-position:right center}.fighter.punch{animation:punch .18s ease-out}.fighter.block{filter:brightness(.75) drop-shadow(0 15px 8px #0008)}.fighter.hurt{filter:sepia(1) saturate(6) hue-rotate(320deg) drop-shadow(0 0 20px red);animation:hurt .22s}.hit{position:absolute;display:none;z-index:10;font:70px Impact;color:#ffd323;text-shadow:5px 5px #e31c25;transform:rotate(-12deg)}.message{position:absolute;z-index:20;inset:0;display:grid;place-content:center;text-align:center;background:#03050baa;backdrop-filter:blur(4px)}.message h1{font:clamp(45px,8vw,100px) Impact;margin:0;color:#f7bd25;text-shadow:6px 6px #d3222c}.message p{font-size:22px}.message.hide{display:none}.modes{display:flex;gap:14px;justify-content:center;margin-top:12px}.modes button{font-size:18px;padding:15px 22px;background:#efb925;color:#111}.modes button:last-child{background:#e52a36;color:#fff}footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:10px 3vw;background:#090d1c;font-size:14px}footer div:last-child{text-align:right}button{background:#e52a36;color:white;border:0;padding:12px 22px;font-weight:800;cursor:pointer;border-radius:5px}@keyframes punch{50%{transform:translateX(7vw) scale(1.04)}}.f2.punch{animation-name:punch2}@keyframes punch2{50%{transform:translateX(-7vw) scale(1.04)}}@keyframes hurt{50%{transform:translateX(-20px) rotate(-3deg)}}.f2.hurt{animation-name:hurt2}@keyframes hurt2{50%{transform:translateX(20px) rotate(3deg)}}@media(max-width:700px){.game{grid-template-rows:82px 1fr 100px}.fighter{width:48vw;height:67%;}.f1{left:0}.f2{left:52%}footer{font-size:11px}.player{font-size:16px}}
.custom-photo:after{content:"";position:absolute;top:3%;left:35%;width:27%;aspect-ratio:1;border-radius:50%;background-image:var(--custom-face);background-size:cover;background-position:center;border:4px solid #efb925;box-shadow:0 4px 12px #000;z-index:3}.f1.custom-photo:after{left:39%}.photo-row{margin-top:18px;padding:12px;background:#11182dcc;border:1px solid #ffffff33;border-radius:8px}.photo-row input{max-width:260px}.photo-actions{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}.arena:focus{outline:none}.attack-limb{position:absolute;z-index:8;display:block;opacity:0;pointer-events:none}.glove{width:17%;aspect-ratio:1;border-radius:48% 55% 50% 45%;top:23%;left:57%;background:radial-gradient(circle at 35% 25%,#ff8b77,#db161c 58%,#71090d);border:3px solid #fff;box-shadow:0 5px 10px #0008}.f2 .glove{left:27%;background:radial-gradient(circle at 35% 25%,#fff49b,#e5ad13 58%,#765207);border-color:#151515}.boot{width:27%;height:10%;border-radius:40% 12% 15% 40%;top:69%;left:56%;background:linear-gradient(#27344d,#070a10);border:3px solid #e9edf5;transform-origin:left center}.f2 .boot{left:18%;transform-origin:right center;border-color:#e8b82b}.move-label{position:absolute;top:7%;left:35%;opacity:0;font:28px Impact;color:#ffd323;text-shadow:3px 3px #b31520;z-index:9;white-space:nowrap}.fighter.jab .glove{animation:glove-jab .32s ease-out}.fighter.cross .glove{animation:glove-cross .4s ease-out}.fighter.uppercut .glove{animation:glove-upper .48s ease-out}.fighter.kick .boot{animation:boot-kick .58s ease-out}.fighter.jab,.fighter.cross,.fighter.uppercut,.fighter.kick{animation-duration:.55s;animation-timing-function:ease-out}.fighter.jab{animation-name:body-jab}.fighter.cross{animation-name:body-cross}.fighter.uppercut{animation-name:body-upper}.fighter.kick{animation-name:body-kick}.fighter.jab .move-label,.fighter.cross .move-label,.fighter.uppercut .move-label,.fighter.kick .move-label{animation:label-pop .55s}@keyframes glove-jab{0%,100%{opacity:0;transform:translate(0,0) scale(.7)}25%,65%{opacity:1;transform:translate(120%,0) scale(1.05)}}@keyframes glove-cross{0%,100%{opacity:0;transform:translate(-15%,10%) rotate(-20deg)}30%,70%{opacity:1;transform:translate(155%,-12%) rotate(18deg) scale(1.15)}}@keyframes glove-upper{0%,100%{opacity:0;transform:translate(0,70%) rotate(20deg)}30%,75%{opacity:1;transform:translate(95%,-95%) rotate(-35deg) scale(1.12)}}@keyframes boot-kick{0%,100%{opacity:0;transform:rotate(-30deg) scaleX(.45)}28%,72%{opacity:1;transform:translateX(135%) rotate(-7deg) scaleX(1.3)}}@keyframes body-jab{45%{transform:translateX(3vw) rotate(-1deg)}}@keyframes body-cross{45%{transform:translateX(5vw) rotate(-3deg) scale(1.02)}}@keyframes body-upper{45%{transform:translate(3vw,-2vh) rotate(-4deg)}}@keyframes body-kick{45%{transform:translateX(4vw) rotate(-5deg)}}@keyframes label-pop{20%,70%{opacity:1;transform:translateY(-15px) scale(1.15)}}.f2.jab,.f2.cross,.f2.uppercut,.f2.kick{animation-direction:normal}.f2.jab .glove{animation-name:glove-jab-left}.f2.cross .glove{animation-name:glove-cross-left}.f2.uppercut .glove{animation-name:glove-upper-left}.f2.kick .boot{animation-name:boot-kick-left}@keyframes glove-jab-left{0%,100%{opacity:0;transform:translate(0,0) scale(.7)}25%,65%{opacity:1;transform:translate(-120%,0) scale(1.05)}}@keyframes glove-cross-left{0%,100%{opacity:0;transform:translate(15%,10%) rotate(20deg)}30%,70%{opacity:1;transform:translate(-155%,-12%) rotate(-18deg) scale(1.15)}}@keyframes glove-upper-left{0%,100%{opacity:0;transform:translate(0,70%) rotate(-20deg)}30%,75%{opacity:1;transform:translate(-95%,-95%) rotate(35deg) scale(1.12)}}@keyframes boot-kick-left{0%,100%{opacity:0;transform:rotate(30deg) scaleX(.45)}28%,72%{opacity:1;transform:translateX(-135%) rotate(7deg) scaleX(1.3)}}/* Real pose sprites replace the earlier artificial limb overlays. */
.attack-limb{display:none!important}.fighter{width:30vw;max-width:430px;background-size:600% 100%;background-repeat:no-repeat;transition:filter .16s}.f1{background-image:url("assets/maxim-sprites.png");background-position:0% center}.f2{background-image:url("assets/edik-sprites.png");background-position:0% center}.fighter.jab{background-position:20% center;animation:real-jab .34s ease-out}.fighter.cross{background-position:40% center;animation:real-cross .42s ease-out}.fighter.hook{background-position:60% center;animation:real-hook .46s ease-out}.fighter.uppercut{background-position:80% center;animation:real-upper .5s ease-out}.fighter.kick{background-position:100% center;animation:real-kick .58s ease-out}.fighter.hurt{animation:real-hurt .24s}.fighter.damage1{filter:saturate(.92) contrast(1.04) drop-shadow(0 15px 8px #0008)}.fighter.damage2{filter:saturate(.82) contrast(1.08) drop-shadow(0 0 8px #633c80)}.fighter.damage3{filter:saturate(.7) contrast(1.14) drop-shadow(0 0 12px #79334b)}@keyframes real-jab{35%{transform:translateX(2.5vw)}}@keyframes real-cross{40%{transform:translateX(3.5vw) rotate(-1deg)}}@keyframes real-hook{40%{transform:translateX(2.8vw) rotate(-2deg)}}@keyframes real-upper{40%{transform:translate(2vw,-2vh)}}@keyframes real-kick{40%{transform:translateX(4vw)}}@keyframes real-hurt{45%{transform:translateX(-1.5vw);filter:brightness(.7) sepia(.5) hue-rotate(300deg)}}.f2.jab,.f2.cross,.f2.hook,.f2.uppercut,.f2.kick{animation-name:real-left}.f2.hurt{animation-name:real-hurt-left}@keyframes real-left{40%{transform:translateX(-3vw)}}@keyframes real-hurt-left{45%{transform:translateX(1.5vw);filter:brightness(.7) sepia(.5) hue-rotate(300deg)}}.blood{display:none;position:absolute;z-index:12;width:7px;height:7px;border-radius:50%;background:#a50e19;box-shadow:12px -8px #cf2630,22px 4px #7f0710,34px -15px #e13a3e,45px 8px #8d0a12}.blood.show{display:block;animation:blood-spray .42s ease-out forwards}@keyframes blood-spray{0%{opacity:.9;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(55px,22px) scale(1.2)}}@media(max-width:700px){.fighter{width:40vw}}/* Individually cropped frames prevent neighboring poses from bleeding into view. */
.fighter{background-size:contain;background-position:center bottom;background-repeat:no-repeat;transition:none}.f1{background-image:url("assets/maxim-idle.png")}.f2{background-image:url("assets/edik-idle.png")}.f1.jab{background-image:url("assets/maxim-jab.png");background-position:center bottom}.f1.cross{background-image:url("assets/maxim-cross.png");background-position:center bottom}.f1.hook{background-image:url("assets/maxim-hook.png");background-position:center bottom}.f1.uppercut{background-image:url("assets/maxim-uppercut.png");background-position:center bottom}.f1.kick{background-image:url("assets/maxim-kick.png");background-position:center bottom}.f2.jab{background-image:url("assets/edik-jab.png");background-position:center bottom}.f2.cross{background-image:url("assets/edik-cross.png");background-position:center bottom}.f2.hook{background-image:url("assets/edik-hook.png");background-position:center bottom}.f2.uppercut{background-image:url("assets/edik-uppercut.png");background-position:center bottom}.f2.kick{background-image:url("assets/edik-kick.png");background-position:center bottom}body[data-pair="women"] .f1{background-image:url("assets/marie-idle.png")}body[data-pair="women"] .f2{background-image:url("assets/violetta-idle.png")}body[data-pair="women"] .f1.jab{background-image:url("assets/marie-jab.png")}body[data-pair="women"] .f1.cross{background-image:url("assets/marie-cross.png")}body[data-pair="women"] .f1.hook{background-image:url("assets/marie-hook.png")}body[data-pair="women"] .f1.uppercut{background-image:url("assets/marie-uppercut.png")}body[data-pair="women"] .f1.kick{background-image:url("assets/marie-kick.png")}body[data-pair="women"] .f2.jab{background-image:url("assets/violetta-jab.png")}body[data-pair="women"] .f2.cross{background-image:url("assets/violetta-cross.png")}body[data-pair="women"] .f2.hook{background-image:url("assets/violetta-hook.png")}body[data-pair="women"] .f2.uppercut{background-image:url("assets/violetta-uppercut.png")}body[data-pair="women"] .f2.kick{background-image:url("assets/violetta-kick.png")}.back-button{background:#3b4663!important;color:#fff!important}.player .score{display:block;margin-top:2px;font-size:13px;color:#ffd323;letter-spacing:.5px}.timer{display:flex;flex-direction:column;justify-content:center;line-height:1.05;padding:6px 10px}.timer small{font:11px Arial,sans-serif;letter-spacing:1px}.timer strong{font:34px Impact,Arial,sans-serif}.regen{filter:drop-shadow(0 0 13px #46e58a)!important}.round-result{color:#fff;font-size:18px}.round-result b{color:#ffd323}.touch-hint{display:none}@media(max-width:760px),(pointer:coarse){.game{grid-template-rows:82px 1fr 64px}.touch-hint{display:block;position:absolute;z-index:15;left:50%;bottom:2%;transform:translateX(-50%);padding:.65rem 1rem;border:1px solid #ffffff3b;border-radius:999px;background:#080c18cc;color:#fff;font-size:.74rem;letter-spacing:.08em;white-space:nowrap;pointer-events:none;animation:touchPulse 1.7s infinite}.fighter{height:72%;width:42vw}.message{padding:1rem}.message h1{font-size:clamp(40px,14vw,72px)}.message p{font-size:17px}.modes{flex-direction:column;align-items:stretch;width:min(360px,88vw);margin-left:auto;margin-right:auto}.modes button{min-height:56px;font-size:16px}footer{grid-template-columns:1fr;padding:.45rem 1rem}footer>div{display:none}footer button{min-height:48px;font-size:.8rem}.player{font-size:15px}.player .score{font-size:10px}.bar{height:18px}.timer strong{font-size:28px}}@keyframes touchPulse{50%{transform:translateX(-50%) scale(1.04);box-shadow:0 0 24px #7952b855}}
.mobile-controls{display:none}
@media(max-width:760px),(pointer:coarse){
  .game{grid-template-rows:82px 1fr 64px}
  .mobile-controls{position:absolute;z-index:18;left:50%;bottom:1rem;display:grid;grid-template-columns:68px 86px 68px;gap:.55rem;transform:translateX(-50%);touch-action:none}
  .mobile-controls button{min-width:0;height:58px;border:1px solid rgba(247,216,143,.75);border-radius:18px;background:linear-gradient(145deg,#d8b663,#8e6726);color:#171109;box-shadow:0 10px 26px #0008,inset 0 1px #fff8;font-weight:900}
  .move-control{font-size:2rem;line-height:1}
  .tilt-control{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;padding:.25rem}
  .tilt-control span{font-size:1.25rem;line-height:1}
  .tilt-control small{font-size:.62rem;letter-spacing:.04em}
  .mobile-controls button.is-pressed,.tilt-control.is-moving{transform:translateY(2px) scale(.96);filter:brightness(1.12)}
  .tilt-control.is-enabled{outline:2px solid #fff2b9;outline-offset:2px}
  .touch-hint{bottom:5.4rem;max-width:92vw;text-align:center}
}
@media(max-width:390px){
  .mobile-controls{grid-template-columns:62px 78px 62px;gap:.4rem}
  .mobile-controls button{height:54px}
  .touch-hint{font-size:.67rem}
}