:root{color-scheme:dark;--gold:#ffc34e;--navy:#06152b;--blue:#008bff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 90% 0,#153559,transparent 55%),#030b17;color:#f5f8ff;font:16px Arial,Helvetica,sans-serif}main{max-width:1150px;margin:auto;padding:22px 28px}header{display:flex;gap:14px;align-items:center}header img{width:64px;border-radius:50%}header b{font-size:22px;letter-spacing:3px}header small{display:block;color:#9cadc6;font-size:10px;letter-spacing:1.3px;margin-top:6px}button{font:inherit;color:inherit;border:1px solid #354b68;background:#11253e;border-radius:9px;padding:12px 18px;cursor:pointer}button:hover:not(:disabled),.primary:hover{filter:brightness(1.15)}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:3px}#sound{margin-left:auto;font-size:13px}.heading{display:flex;align-items:end;justify-content:space-between;margin:30px 0 22px;gap:20px}.eyebrow{color:var(--gold);font-size:11px;letter-spacing:2px;font-weight:bold}h1{font-size:clamp(32px,5vw,58px);letter-spacing:-1.5px;line-height:.99;margin:10px 0 0;font-weight:900}h1 span{color:var(--gold)}.heading>p{color:#aebdd2;line-height:1.6;font-size:15px}.arena{border:1px solid #415776;border-radius:16px;overflow:hidden;background:var(--navy);box-shadow:0 20px 90px #0008}.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;padding:16px 22px;background:linear-gradient(130deg,#183858,#09182f)}.fighterlabel{display:flex;align-items:center;gap:12px}.fighterlabel img{width:52px;height:52px;object-fit:cover;border-radius:8px}.fighterlabel>div{flex:1}.fighterlabel b{font-size:13px;letter-spacing:.6px}.fighterlabel small{display:block;color:#aabbd2;font-size:11px;margin-top:4px}.fighterlabel span{display:block;color:#b8c6d8;font-size:10px;margin-top:4px}.enemy{text-align:right}.health{height:8px;margin-top:9px;background:#020a17;border-radius:5px;overflow:hidden}.health i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#036bde,#49bcff);transition:width .1s}.enemy .health i{background:linear-gradient(90deg,#e88732,#ffcf65)}.hits{text-align:center}.hits b{font-size:24px;color:var(--gold);display:block}.hits small{font-size:9px;letter-spacing:1px}.stage{position:relative;background:#06152b}canvas{display:block;width:100%;height:auto}#overlay{position:absolute;inset:0;background:#06152be8;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px}#overlay h2{font-size:clamp(23px,3.5vw,39px);margin:7px 0 8px;letter-spacing:-.6px}#overlay p{font-size:15px;line-height:1.5;color:#becce0;margin:8px 0}#overlay .eyebrow{font-size:11px;color:var(--gold)}.instructions{display:flex;gap:24px;font-size:13px;color:white;margin:12px 0 18px}.primary{background:var(--gold);border:0;color:#0b1625;font-weight:bold;display:inline-block;padding:15px 24px;border-radius:8px;text-decoration:none}.small{font-size:11px!important}#warning{position:absolute;top:14px;left:0;right:0;text-align:center;font-size:26px;font-weight:900;color:#ffcf65;text-shadow:0 2px 5px #000;pointer-events:none}#message{padding:13px;text-align:center;color:#cad7e9;font-size:14px;min-height:43px;border-top:1px solid #253d59}.controls{display:flex;gap:12px;align-items:stretch;justify-content:center;padding:0 20px 18px}.movement{display:flex;gap:8px}.movement button{min-width:72px}.controls small{display:block;font-size:9px;letter-spacing:1px;margin-top:4px}.punch{background:#087bea;border-color:#49a6ff;font-weight:bold;min-width:180px}.controls button[data-hold]{touch-action:none;user-select:none;-webkit-user-select:none}.controls button.active{filter:brightness(1.6);transform:translateY(2px)}.issues{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:19px auto}.issues span{font-size:12px;color:#b4c4d8;border:1px solid #2b3e58;border-radius:30px;padding:7px 12px}.invitation{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 10px}.invitation h2{font-size:29px;margin:8px 0}.invitation p:not(.eyebrow){color:#aebdd2;font-size:14px;line-height:1.6}footer{font-size:11px;color:#7e93ad;text-align:center;line-height:1.6;max-width:830px;margin:10px auto 20px}.resultbuttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:12px 0}.resultbuttons button{font-size:14px}.ko{font-size:60px;color:var(--gold)}@media(max-width:640px){main{padding:13px 10px}header img{width:49px}header b{font-size:17px}header small{font-size:8px;max-width:170px}#sound{font-size:11px;padding:10px}.heading{display:block;margin:24px 4px 16px}.heading>p{font-size:13px;margin-bottom:0}.scoreboard{padding:12px 9px;gap:9px}.fighterlabel img{display:none}.fighterlabel b{font-size:10px}.fighterlabel small{font-size:9px}.hits b{font-size:19px}.hits small{font-size:8px}.stage{min-height:335px}canvas{height:335px;object-fit:fill}#overlay{padding:12px}#overlay h2{font-size:25px}#overlay p{font-size:13px}.instructions{font-size:11px;gap:18px;margin:8px 0 13px}.controls{padding:0 8px 12px;gap:7px}.controls button{padding:12px 8px}.movement{gap:5px}.movement button{min-width:43px}.punch{min-width:110px;flex:1}.controls #pause{font-size:12px}.controls small{font-size:8px}#message{font-size:12px;min-height:47px}.invitation{flex-direction:column;text-align:center;gap:4px}.invitation h2{font-size:26px}.issues{gap:5px}.issues span{font-size:10px;padding:6px 9px}.resultbuttons{gap:7px}.resultbuttons .primary{font-size:13px;padding:12px}.ko{font-size:42px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.boxerchoices{display:flex;gap:12px;margin:8px 0}.boxerchoices button{min-width:165px;padding:7px 14px;border:2px solid #36506b;background:#0b203b}.boxerchoices button[aria-pressed=true]{border-color:var(--gold);background:#17344d}.boxerchoices canvas{width:110px;height:95px;display:block;margin:auto}.boxerchoices b,.boxerchoices small{display:block}.boxerchoices b{font-size:14px;margin-top:3px}.boxerchoices small{font-size:11px;color:#b6c7dc;margin-top:4px}#overlay .instructions{margin:6px 0 12px}#choose{font-size:12px}@media(max-width:640px){.stage{min-height:430px}.stage>canvas{height:430px}.boxerchoices{gap:8px}.boxerchoices button{min-width:135px;padding:5px 9px}.boxerchoices canvas{height:80px;width:93px}.controls{flex-wrap:wrap}.controls #choose{padding:8px 12px}.controls .punch{max-width:200px}#overlay h2{margin:4px 0}#overlay .eyebrow{margin:5px 0}}