:root{--ink:#1a1a1a;--yellow:#ffd21f;--red:#e63946;--teal:#45b39d;--floor-y:75vh;--unit:120px;--center-x:50vw}*{box-sizing:border-box}body{color:#fff;letter-spacing:.02em;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#140b2b;margin:0;font-family:Lilita One,Arial Rounded MT Bold,system-ui,sans-serif;overflow:hidden}[hidden]{display:none!important}#arena{background:radial-gradient(at 50% -10%,#6b4cc2 0%,#2e1d63 40%,#140b2b 80%);position:fixed;inset:0;overflow:hidden}.spotlight{left:var(--center-x);width:calc(var(--unit) * 9);height:calc(var(--floor-y) + 10vh);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);background:linear-gradient(#fff5c82e,#fff5c80d);position:absolute;top:-10vh;transform:translate(-50%)}.crowd{left:0;right:0;top:calc(var(--floor-y) - var(--unit) * 3.6);height:calc(var(--unit) * 1.6);background:radial-gradient(circle at 50% 30%, #0b0619 0 28%, transparent 30%) 0 0 / calc(var(--unit) * .55) calc(var(--unit) * .6) repeat-x, radial-gradient(ellipse at 50% 100%, #0b0619 0 45%, transparent 47%) 0 calc(var(--unit) * .35) / calc(var(--unit) * .55) calc(var(--unit) * .6) repeat-x, radial-gradient(circle at 50% 30%, #1a1036 0 28%, transparent 30%) calc(var(--unit) * .27) calc(var(--unit) * .5) / calc(var(--unit) * .55) calc(var(--unit) * .6) repeat-x, radial-gradient(ellipse at 50% 100%, #1a1036 0 45%, transparent 47%) calc(var(--unit) * .27) calc(var(--unit) * .85) / calc(var(--unit) * .55) calc(var(--unit) * .6) repeat-x;position:absolute}.rope{left:4vw;right:4vw;top:calc(var(--floor-y) - var(--unit) * (.55 + var(--rope) * .6));height:calc(var(--unit) * .09);background:linear-gradient(#ff8a8a, var(--red) 45%, #a4161a);border:3px solid var(--ink);border-radius:999px;position:absolute}.post{top:calc(var(--floor-y) - var(--unit) * 2.55);bottom:calc(100vh - var(--floor-y) - var(--unit) * .1);width:calc(var(--unit) * .22);border:3px solid var(--ink);background:linear-gradient(90deg,#8fa3b8,#e8eef5 40%,#6c7f93);border-radius:8px;position:absolute}.post.left{left:calc(4vw - var(--unit) * .11)}.post.right{right:calc(4vw - var(--unit) * .11)}.floor{left:0;right:0;top:calc(var(--floor-y) - var(--unit) * .25);border-top:4px solid var(--ink);background:linear-gradient(#ece8f6,#b9b3d1);position:absolute;bottom:0}.shadow{left:var(--center-x);top:calc(var(--floor-y) - var(--unit) * .12);width:calc(var(--unit) * 2.2);height:calc(var(--unit) * .3);background:#2814504d;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}#scene{position:fixed;inset:0}body[data-phase=fight],body[data-phase=fight] #scene canvas{cursor:none}#glove{pointer-events:none;opacity:0;z-index:20;width:64px;height:64px;margin:-14px 0 0 -32px;transition:opacity .15s;position:fixed;top:0;left:0}body[data-phase=fight] #glove.active{opacity:1}#glove.punch g{transform-origin:50% 70%;animation:.14s ease-out punch}@keyframes punch{40%{transform:scale(.72)rotate(-12deg)}}#hud{pointer-events:none;z-index:10;grid-template-columns:1fr auto 1fr;align-items:start;padding:14px 18px;display:grid;position:fixed;top:0;left:0;right:0}.health{align-items:center;gap:8px;min-width:0;display:flex}.portrait{filter:drop-shadow(0 3px #00000059);flex:none;width:56px;height:56px}.bar{border:4px solid var(--ink);background:#3b2a5e;border-radius:999px;flex:1;max-width:340px;height:28px;position:relative;overflow:hidden;box-shadow:0 4px #00000059}#health-fill,#health-chunk{width:100%;position:absolute;inset:0 auto 0 0}#health-chunk{background:#fff3b0;transition:width .45s ease-in .35s}#health-fill{background:linear-gradient(#ffe36b, var(--yellow) 50%, #e6ac00);transition:background-color .3s}#health-fill.hurt{background:linear-gradient(#ffb36b,#ff8c1f 50%,#d96a00)}#health-fill.critical{background:linear-gradient(#ff8a8a, var(--red) 50%, #a4161a)}#health-text{color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;place-items:center;font-size:16px;display:grid;position:absolute;inset:0}#timer{text-align:center;color:#fff;-webkit-text-stroke:8px var(--ink);paint-order:stroke fill;grid-column:2;min-width:3.2em;font-size:clamp(36px,7vw,60px);line-height:1}#timer.danger{color:#ff5a5a;animation:1s ease-in-out infinite pulse}@keyframes pulse{50%{transform:scale(1.12)}}#combo{color:var(--yellow);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;opacity:0;grid-column:2;justify-self:center;margin-top:4px;font-size:clamp(20px,3.5vw,30px);transition:opacity .2s}#combo.show{opacity:1}#combo.bump{animation:.18s ease-out bump}@keyframes bump{40%{transform:scale(1.3)rotate(-4deg)}}.icon-button{border:4px solid var(--ink);cursor:pointer;width:52px;height:52px;box-shadow:0 4px 0 var(--ink);z-index:50;background:#fff;border-radius:50%;font-size:24px;position:fixed;top:14px;right:14px}body[data-phase=fight] .icon-button{top:auto;bottom:14px}#fx{pointer-events:none;z-index:15;position:fixed;inset:0}.pop{color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;white-space:nowrap;font-size:26px;animation:.7s ease-out forwards rise;position:absolute;transform:translate(-50%,-50%)}.pop.crit{color:#ff4040;font-size:40px;animation-duration:.9s}.pop.miss{color:#b9b3d1;font-size:22px}@keyframes rise{0%{opacity:0;transform:translate(-50%,-30%)scale(.5)}15%{opacity:1;transform:translate(-50%,-60%)scale(1.15)}to{opacity:0;transform:translate(-50%,-220%)scale(1)}}#banner{white-space:nowrap;color:var(--yellow);-webkit-text-stroke:.1em var(--ink);paint-order:stroke fill;text-shadow:0 .06em 0 var(--ink);pointer-events:none;opacity:0;z-index:25;font-size:clamp(64px,16vw,160px);line-height:1;position:fixed;top:38%;left:50%;transform:translate(-50%,-50%)}#banner.show{animation:.9s ease-out forwards slam}#banner.show.hold{animation:2.2s ease-out forwards slam-hold}@keyframes slam{0%{opacity:0;transform:translate(-50%,-50%)scale(2.6)rotate(-8deg)}18%{opacity:1;transform:translate(-50%,-50%)scale(.92)rotate(-4deg)}30%{transform:translate(-50%,-50%)scale(1)rotate(-4deg)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-50%)scale(1.05)rotate(-4deg)}}@keyframes slam-hold{0%{opacity:0;transform:translate(-50%,-50%)scale(2.6)rotate(-8deg)}8%{opacity:1;transform:translate(-50%,-50%)scale(.92)rotate(-4deg)}14%,85%{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(-4deg)}to{opacity:0;transform:translate(-50%,-50%)scale(1)rotate(-4deg)}}.screen{text-align:center;z-index:40;background:linear-gradient(#140b2bcc,#140b2b59 60%,#140b2b99);flex-direction:column;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.logo{color:var(--yellow);-webkit-text-stroke:.09em var(--ink);paint-order:stroke fill;text-shadow:0 .07em 0 var(--ink);margin:0;font-size:clamp(64px,15vw,140px);font-weight:400;line-height:.9;transform:rotate(-4deg)}.logo span{color:#fff;font-size:.45em;display:block}.tagline{-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;margin:18px 0 8px;font-size:clamp(20px,4vw,28px)}.how-to{color:#e8e1ff;text-shadow:0 2px 0 var(--ink);margin:0 0 22px;padding:0;font-family:system-ui,sans-serif;font-size:16px;line-height:1.6;list-style:none}.how-to strong{color:var(--yellow)}.title{color:var(--yellow);-webkit-text-stroke:.1em var(--ink);paint-order:stroke fill;margin:0;font-size:clamp(44px,9vw,72px);font-weight:400;line-height:1}.button{font:inherit;color:var(--ink);background:var(--yellow);border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);cursor:pointer;border-radius:999px;padding:10px 40px 12px;font-size:28px;transition:transform 80ms}.button:hover{transform:translateY(-2px)rotate(-1deg)}.button:active{box-shadow:0 2px 0 var(--ink);transform:translateY(4px)}.button:focus-visible{outline-offset:4px;outline:4px solid #fff}.button.secondary{background:#fff}.hint{opacity:.75;margin:10px 0 0;font-family:system-ui,sans-serif;font-size:14px}.best{color:var(--yellow);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;margin:14px 0 0;font-size:20px}.results{text-align:center;width:min(400px,90vw);color:var(--ink);border:4px solid var(--ink);box-shadow:0 8px 0 var(--ink);z-index:40;background:#fffffff2;border-radius:24px;padding:22px 24px 18px;animation:.35s ease-out card-in;position:fixed;top:50%;right:5vw;transform:translateY(-50%)}@media (aspect-ratio<=5/4){.results{top:auto;bottom:3vh;right:50%;transform:translate(50%)}}@keyframes card-in{0%{opacity:0;translate:0 30px}}.results .title{font-size:clamp(36px,7vw,52px)}.subtitle{margin:6px 0 0;font-family:system-ui,sans-serif;font-size:15px}.record{color:#fff;background:var(--red);border:3px solid var(--ink);border-radius:999px;margin:10px 0 0;padding:4px 14px;font-size:20px;animation:.6s ease-out .3s 2 bump;display:inline-block;transform:rotate(-3deg)}.stats{grid-template-columns:1fr 1fr;gap:8px;margin:16px 0;display:grid}.stats div{border:3px solid var(--ink);background:#f3effc;border-radius:12px;padding:6px 4px}.stats dt{text-transform:uppercase;letter-spacing:.06em;opacity:.7;font-family:system-ui,sans-serif;font-size:12px}.stats dd{margin:0;font-size:26px}.actions{justify-content:center;gap:10px;display:flex}.actions .button{padding:8px 22px 10px;font-size:22px}.results .hint{color:var(--ink)}@media (width<=600px){#hud{grid-template-columns:1fr;gap:6px;padding:10px 12px}#timer,#combo{grid-column:1;justify-self:center}.portrait{width:44px;height:44px}.how-to{font-size:14px}.results{padding:14px 14px 12px}.stats{gap:6px;margin:10px 0}.stats dd{font-size:20px}.actions .button{padding:6px 18px 8px;font-size:19px}}@media (prefers-reduced-motion:reduce){#timer.danger,#combo.bump,.record{animation:none}}