/* Player entry only: the analytics app keeps its existing stylesheet. */
:root{font-family:"Arial Rounded MT Bold","Segoe UI","Malgun Gothic",sans-serif;color:#223c3c;background:#f7faf5;font-synthesis:none;--ink:#223c3c;--muted:#647975;--mint:#66d6b0;--lime:#d5f77c;--sky:#a6e4fa;--line:#d9e5de;--green:#4d9b18}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{position:relative;cursor:pointer;border:2px solid var(--line);border-bottom-width:5px;background:#fff;color:var(--ink);border-radius:18px;min-height:50px;padding:12px 20px;font-weight:800;transition:transform .12s,background .12s,border-color .12s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:hover:not(:disabled){background:#f1f8ec;border-color:#abc5ae;transform:translateY(-2px)}button:active:not(:disabled){transform:translateY(3px);border-bottom-width:2px}button:disabled{cursor:default}button.primary{background:#a8e94e;border-color:#76b52e;color:#254606}button.primary:hover:not(:disabled){background:#b8f268;border-color:#69a527}button.primary:disabled{background:#e3edda;border-color:#cbd9c0;color:#637758}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #266acc;outline-offset:4px}.quiet{border:0;background:transparent;color:#536c65;padding:10px 12px;min-height:42px;font-size:13px;box-shadow:none}.quiet:hover:not(:disabled){background:#e9f2e9;transform:none}.quiet:active:not(:disabled){margin:0;transform:none}[hidden]{display:none!important}.app{max-width:1100px;margin:auto;padding:0 36px;min-height:100svh;display:flex;flex-direction:column}header{height:80px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:20px;font-weight:900;letter-spacing:-1px}.brand-ball{width:34px;height:34px}.header-tools{display:flex;align-items:center;gap:14px}#connection{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}#connection:before{content:'';width:7px;height:7px;border-radius:50%;background:#adbeb8}#connection.connected:before{background:#6ab82b}main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px 0}.home{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center;width:100%}.home-stage{isolation:isolate;position:relative;min-height:460px;background:var(--mint);border-radius:40px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding-top:32px}.home-stage:before{content:'';position:absolute;width:400px;height:400px;border:44px solid #8fe4b7;border-radius:50%;left:-140px;top:150px;z-index:-1}.home-stage:after{content:'';position:absolute;width:230px;height:500px;background:var(--lime);transform:rotate(25deg);right:-130px;top:-120px;z-index:-1}.home h1{text-align:center;font-size:clamp(38px,4.4vw,58px);line-height:1.1;letter-spacing:-3px;font-weight:950;margin:12px 0 0;color:#174b3e;transform:rotate(-4deg)}#home-fighters{position:relative;display:flex;justify-content:center;align-items:flex-end;padding:40px 8px 38px;z-index:2}.home-fighter{width:51%;flex-shrink:0;position:relative}.home-fighter:first-child{transform:rotate(-7deg) translateX(4px);z-index:2}.home-fighter:last-child{transform:scaleX(-1) rotate(-7deg) translateX(4px)}.home-fighter .character{animation:idle 3s ease-in-out infinite}.home-fighter:last-child .character{animation-delay:-1.5s}.home-versus{position:absolute;top:37%;left:50%;transform:translate(-50%,-50%) rotate(-8deg);font-size:32px;font-weight:950;font-style:italic;color:#fff;text-shadow:0 3px 0 #328b6e;z-index:4}.home-platform{position:absolute;bottom:-25px;left:-20%;width:140%;height:150px;border-radius:50%;background:#40b98e;transform:rotate(-7deg);border-top:14px solid #b9f18c}.home-menu{width:100%;padding:16px 0}.home-actions{display:grid;gap:16px}.home-actions>.primary{display:flex;align-items:center;justify-content:space-between;font-size:21px;min-height:74px;border-radius:20px;padding:18px 24px}.home-actions svg{width:26px;height:26px}.split{display:flex;gap:12px}.split>*{flex:1;min-width:0}.home-actions .split button{min-height:62px;padding:12px 8px}.stats{display:flex;margin-top:30px;border-top:2px solid var(--line);padding-top:23px}.stat-mode{flex:1;padding:0 22px}.stat-mode:first-child{padding-left:4px}.stat-mode+.stat-mode{border-left:2px solid var(--line)}.stat-mode>span{font-size:13px;font-weight:800;color:#526d61}.stat-mode>div{display:flex;gap:24px;margin-top:10px;font-size:11px;color:#657b6b}.stat-mode strong{display:block;font-size:30px;line-height:1.4;color:#284839;font-variant-numeric:tabular-nums}.join-form{margin-top:24px;text-align:left}.join-form label{display:block;font-size:13px;font-weight:800;margin-bottom:8px}.join-form>div{display:flex;gap:8px}.join-form input{min-width:0;flex:1}.join-form>.quiet{display:block;margin:8px auto 0}input{border:2px solid #c6d8c8;border-radius:14px;min-height:50px;background:#fff;color:var(--ink);padding:12px}#room-code{font-size:22px;letter-spacing:5px;font-family:monospace;text-transform:uppercase}.waiting{width:min(100%,440px);margin:auto;text-align:center}.waiting h1{font-size:26px;letter-spacing:-1px;display:flex;justify-content:center;align-items:center;gap:12px}#waiting-fighter{width:210px;margin:0 auto -8px;background:var(--mint);border-radius:50%}.waiting-dots{display:flex;gap:4px}.waiting-dots i{width:5px;height:5px;border-radius:50%;background:#5c8a50;animation:waiting 1s infinite alternate}.waiting-dots i:nth-child(2){animation-delay:.2s}.waiting-dots i:nth-child(3){animation-delay:.4s}.room-code{font-family:monospace;font-size:44px;letter-spacing:8px;background:#e8f6d6;border:2px dashed #a2c781;border-radius:20px;padding:24px 12px;margin:24px 0}.subtle{font-size:12px;color:var(--muted)}.notice{max-width:680px;text-align:center;margin:18px auto 0;color:#9c442d;font-size:13px;line-height:1.7}.notice:empty{display:none}#reconnect{margin:14px auto;width:max-content}footer{display:flex;justify-content:center;padding:6px 0 12px}footer .quiet{font-size:11px;color:#718577}body[data-screen=match] footer,body[data-screen=result] footer{padding:0}body[data-screen=match] main,body[data-screen=result] main{justify-content:flex-start;padding-top:8px}
/* The arena is the primary surface, not a card surrounding small avatars. */
#match{width:100%;max-width:920px;margin:auto}.match-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.match-title{display:flex;align-items:center;gap:14px}.mode-label{font-size:12px;font-weight:800;color:#557363;background:#e4eedb;border-radius:8px;padding:7px 10px}.turn-heading{font-size:25px;letter-spacing:-1px;margin:0}.leave{border:2px solid #d9e5de;border-radius:13px;min-height:38px;font-size:12px}.timing{position:relative;display:flex;justify-content:space-between;align-items:flex-start;min-height:48px;font-size:13px;font-weight:800;padding-bottom:22px}.time-label{font-size:17px;font-variant-numeric:tabular-nums;line-height:1}.time-track{position:absolute;bottom:10px;left:0;right:0;height:10px;background:#e1eade;border-radius:10px;overflow:hidden}.time-track span{display:block;height:100%;width:100%;transform:scaleX(var(--time,1));transform-origin:left;background:#82ca35;border-radius:10px;transition:transform .1s linear}.timing[data-urgent=true]{color:#c65c31}.timing[data-urgent=true] .time-track span{background:#ef915b}#match[data-locked=true] .time-track span{background:#55b8bd}.arena{isolation:isolate;position:relative;display:flex;justify-content:space-between;align-items:flex-end;overflow:hidden;min-height:360px;padding:20px 38px 18px;background:var(--mint);border-radius:30px}.arena:before{content:'';position:absolute;inset:-40% -30% -10% 52%;background:var(--sky);transform:rotate(13deg);z-index:-2;border-left:10px solid #ffffff36}.arena:after{content:'';position:absolute;left:-15%;top:40%;width:62%;height:90%;border:32px solid #b9f19370;border-radius:50%;z-index:-2}.arena-floor{position:absolute;bottom:-20%;left:-10%;width:120%;height:47%;border-radius:50%;background:#258f7b20;border-top:3px solid #ffffff60;z-index:-1}.fighter{position:relative;width:43%;text-align:center;--direction:1;--fx:#fff4b1;z-index:2}.fighter[data-fighter="1"]{--direction:-1;--fx:#f3fdff}.fighter-info{display:flex;justify-content:center;align-items:center;gap:10px;position:relative;z-index:6;height:38px}.fighter-name{font-size:14px;font-weight:900;white-space:nowrap;background:#fff9;border-radius:11px;padding:6px 13px}.fighter.self .fighter-name{background:#214c42;color:#fff}.energy{display:flex;align-items:center;gap:3px;background:#fffffff0;border:2px solid #ffffff80;border-radius:12px;padding:3px 10px 3px 6px;position:relative;min-width:64px}.energy>svg{width:24px;height:24px;color:#628c23}.energy-count{font-size:20px;line-height:1.2;font-variant-numeric:tabular-nums}.energy-change{position:absolute;right:-30px;top:0;font-size:24px;font-weight:950;color:#245938;text-shadow:0 2px #fff;z-index:8}.avatar{position:relative;width:min(100%,300px);margin:8px auto 0;aspect-ratio:260/300}.character-direction{height:100%;position:relative;z-index:2}.fighter[data-fighter="1"] .character-direction{transform:scaleX(-1)}.fighter-art{width:100%;height:100%;display:block;overflow:visible}.character{transform-origin:130px 260px}.portrait{transform-origin:130px 125px}.pose,.face{display:none}.pose-ready,.face-ready{display:inline}.fighter-caption{min-height:30px;position:relative;z-index:7;display:flex;align-items:center;justify-content:center;margin-top:-3px;font-size:12px;font-weight:900}.choice-status:not(:empty),.action-label:not(:empty){display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 12px;background:#faffed;border-radius:10px;color:#235646;box-shadow:0 3px 0 #2c896738}.fighter[data-locked=true] .choice-status{background:#d6f789;animation:lock-in .2s ease-out}.fighter[data-locked=true] .fighter-name{box-shadow:0 0 0 3px #d6f789}.duel-cue{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;z-index:5}.versus{font-size:31px;font-weight:950;font-style:italic;color:#fff;text-shadow:0 3px 0 #318d7b;transform:rotate(-9deg)}.countdown-number{display:none}.clash-label{position:absolute;left:50%;top:21%;transform:translate(-50%,-50%) rotate(-5deg);background:#fff6c7;color:#27483d;border:3px solid #fff;box-shadow:0 5px 0 #20695830;border-radius:15px;padding:8px 20px;font-size:26px;font-weight:950;white-space:nowrap;z-index:10}.clash-label:empty{display:none}#match[data-phase=countdown] .duel-cue{top:49%}#match[data-phase=countdown] .versus{font-size:20px;margin-bottom:8px}#match[data-phase=countdown] .countdown-number{display:grid;place-items:center;background:#fff9de;width:88px;height:94px;border-radius:27px;color:#28533e;font-size:66px;line-height:1;box-shadow:0 7px 0 #2b876135;transform:rotate(-5deg)}.countdown-number[data-count="3"]{animation:count-three .25s ease-out}.countdown-number[data-count="2"]{animation:count-two .25s ease-out}.countdown-number[data-count="1"]{animation:count-one .25s ease-out}#match[data-phase=countdown] .fighter .character{animation:enter-left .4s ease-out}#match[data-phase=selecting] .character{animation:idle 2.6s ease-in-out infinite}#match[data-phase=selecting] .fighter[data-fighter="1"] .character{animation-delay:-1.3s}
/* Fixed order and tactile depth keep action targeting stable throughout a turn. */
.action-buttons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:20px;padding-bottom:5px}.action-buttons button{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:7px;min-height:128px;padding:12px 4px 10px;border-radius:20px;border-color:#cbdccb;border-bottom-width:6px;background:#fff;--action-color:#6aa72b}.action-buttons button[data-action=blast]{--action-color:#ec8c34}.action-buttons button[data-action=guard]{--action-color:#379dd0}.action-buttons button[data-action=beam]{--action-color:#9564d7}.action-buttons button[data-action=dodge]{--action-color:#da7496}.action-symbol{width:44px;height:44px;color:var(--action-color);display:block}.action-symbol svg{width:100%;height:100%}.action-buttons strong{font-size:15px;line-height:1.3;letter-spacing:-.5px}.action-buttons small{font-size:11px;line-height:1.3;color:#5e7366;font-weight:600;white-space:nowrap}.action-buttons button:hover:not(:disabled){border-color:var(--action-color);background:#f5fce9}.action-buttons button:disabled{background:#f0f3ed;border-color:#dce4d9;color:#748071}.action-buttons button:disabled .action-symbol{opacity:.45}.action-buttons button[data-unavailable=true] .action-symbol{filter:grayscale(.8)}.action-buttons button.chosen{border-color:#79b835;background:#e6fbbd;color:#305615;box-shadow:0 0 0 2px #a9d85f}.action-buttons button.chosen .action-symbol{opacity:1}.chosen-mark{display:none;position:absolute;right:-5px;top:-8px;width:28px;height:28px;padding:5px;border-radius:50%;color:#fff;background:#609f26;border:2px solid #f7faf5}.chosen-mark svg{width:100%;height:100%}.chosen .chosen-mark{display:block;animation:lock-in .2s ease-out}.match-result{padding:18px 26px 20px;background:#e9f5d5;border:2px solid #c9dfa8;border-bottom-width:5px;border-radius:24px;margin:18px auto 0;text-align:center;max-width:580px}.result-heading{display:flex;justify-content:center;align-items:center;gap:14px}.result-medal{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#d4eba2;color:#638f20;transform:rotate(-7deg)}.result-medal svg{width:38px;height:38px}.match-result h2{font-size:33px;letter-spacing:-1px;margin:0;line-height:1.15;color:#487718}.finish-reason{font-size:12px;color:#64735b;margin:5px 0 0}.result-stats{font-size:13px;margin-top:12px;font-weight:800;color:#4f6743}.save-status,.rematch-status{font-size:12px;margin:10px 0 0;color:#637560;line-height:1.5}.save-status:empty,.rematch-status:empty,.result-stats:empty{display:none}.match-result .split{margin-top:16px}.match-result[data-result=loss]{background:#f1eef8;border-color:#dbd4e9}.match-result[data-result=loss] h2{color:#6d608a}.match-result[data-result=loss] .result-medal{background:#e0d9ed;color:#8e7bab;transform:rotate(14deg)}.match-result[data-result=draw]{background:#e8f2f6;border-color:#c7dce4}.match-result[data-result=draw] h2{color:#547c89}.match-result[data-result=draw] .result-medal{background:#d3e7ed;color:#6699a5}.match-result[data-result=loss] .result-medal svg,.match-result[data-result=draw] .result-medal svg{display:none}.match-result[data-result=loss] .result-medal:after{content:'';width:26px;height:20px;border-top:5px solid currentColor;border-radius:50%;transform:translateY(8px)}.match-result[data-result=draw] .result-medal:after{content:'';width:26px;height:14px;border-block:5px solid currentColor}#match[data-phase=finished] .timing{display:none}#match[data-phase=finished] .arena{min-height:300px}#match[data-phase=finished] .avatar{max-width:240px}#match[data-phase=finished] .fighter-caption{display:none}
/* Action poses and expressions. No action is placed on the opponent until reveal. */
.fighter[data-action] .pose-ready,.fighter[data-action] .face-ready,.fighter[data-reaction] .pose-ready,.fighter[data-reaction] .face-ready{display:none}.fighter[data-action=charge] .pose-charge,.fighter[data-action=blast] .pose-attack,.fighter[data-action=beam] .pose-attack,.fighter[data-action=guard] .pose-guard,.fighter[data-action=dodge] .pose-dodge,.fighter[data-action] .face-focus{display:inline}.fighter[data-hit=true] .face-focus{display:none}.fighter[data-hit=true] .face-loss{display:inline}.fighter[data-reaction] .pose,.fighter[data-reaction] .face{display:none}.fighter[data-reaction=win] .pose-win,.fighter[data-reaction=win] .face-win,.fighter[data-reaction=loss] .pose-loss,.fighter[data-reaction=loss] .face-loss,.fighter[data-reaction=draw] .pose-draw,.fighter[data-reaction=draw] .face-draw{display:inline}.fighter[data-reaction=win] .character{animation:victory .7s ease-out both}.fighter[data-reaction=loss] .character{transform:translateY(8px) rotate(-5deg);transform-origin:130px 275px}.fighter[data-reaction=loss] .portrait{transform:rotate(-7deg)}.fighter[data-reaction=draw] .portrait{transform:rotate(8deg)}.fighter[data-reaction=draw] .character{animation:shrug .6s ease-out both}
/* All reveal motion shares a server-supplied duration and negative elapsed offset. */
.aura,.projectile,.shield,.impact,.motion-trails,.clash-burst{position:absolute;pointer-events:none;opacity:0}.aura{inset:12% 2% 7%;border-radius:45% 45% 40% 40%;background:#e8ff92;border:7px solid #ffffbb;box-shadow:0 0 0 12px #d4fd8740;z-index:0}.projectile{top:50%;left:78%;width:44%;height:25%;border-radius:50%;background:#fff8c4;border:6px solid #ffc55c;box-shadow:0 0 0 8px #fff4b650;z-index:5;transform-origin:left center}.fighter[data-fighter="1"] .projectile{left:auto;right:78%}.projectile:before{content:'';position:absolute;right:80%;top:20%;width:60%;height:60%;background:#fff4b699;clip-path:polygon(0 0,100% 15%,100% 85%,0 100%,35% 50%)}.fighter[data-fighter="1"] .projectile:before{right:auto;left:80%;transform:scaleX(-1)}.fighter[data-action=beam] .projectile{width:75%;height:32%;border-radius:45%;border-color:#9a9aef;background:#edffff;box-shadow:0 0 0 9px #eafaff70}.fighter[data-action=beam] .projectile:before{background:#e9fdff}.shield{inset:13% -3% 6% 50%;border:7px solid #f3ffff;background:#8fdafa77;border-radius:55%;box-shadow:0 0 0 7px #60b4e579;z-index:4}.fighter[data-fighter="1"] .shield{inset:13% 50% 6% -3%}.impact{width:55%;height:55%;left:22%;top:22%;background:#fff6bd;clip-path:polygon(50% 0,60% 29%,86% 8%,75% 39%,100% 50%,75% 61%,90% 90%,59% 75%,50% 100%,40% 74%,10% 90%,25% 60%,0 50%,25% 40%,10% 10%,40% 28%);z-index:7}.motion-trails{inset:20% 0;z-index:3}.motion-trails i{display:block;height:7px;background:#f4ffff;border-radius:8px;width:95%;margin:26px 0;transform:rotate(-12deg)}.clash-burst{top:45%;left:50%;width:100px;height:120px;background:#fff6b5;clip-path:polygon(50% 0,60% 33%,88% 9%,77% 43%,100% 50%,73% 62%,88% 95%,58% 76%,50% 100%,40% 73%,10% 94%,23% 58%,0 50%,23% 40%,10% 10%,40% 30%);z-index:8}.fighter[data-action=charge] .aura{animation:charge var(--reveal-duration) var(--elapsed) both}.fighter[data-action=charge] .character{animation:power-up var(--reveal-duration) var(--elapsed) both}.fighter[data-action=blast] .projectile,.fighter[data-action=beam] .projectile{animation:projectile var(--reveal-duration) var(--elapsed) both}.fighter[data-action=blast] .character,.fighter[data-action=beam] .character{animation:attack var(--reveal-duration) var(--elapsed) both}.fighter[data-action=guard] .shield{animation:shield var(--reveal-duration) var(--elapsed) both}.fighter[data-action=dodge] .character-direction{animation:teleport var(--reveal-duration) var(--elapsed) both}.fighter[data-action=dodge] .motion-trails{animation:shield var(--reveal-duration) var(--elapsed) both}.fighter[data-hit=true] .character{animation:hit var(--reveal-duration) var(--elapsed) both}.fighter[data-hit=true] .impact{animation:impact var(--reveal-duration) var(--elapsed) both}.arena[data-outcome=clash] .clash-burst{animation:clash var(--reveal-duration) var(--elapsed) both}.arena[data-outcome] .clash-label{animation:outcome var(--reveal-duration) var(--elapsed) both}.arena[data-outcome] .energy-change{animation:energy-gain var(--reveal-duration) var(--elapsed) both}
dialog{max-width:560px;width:calc(100% - 32px);max-height:85svh;border:2px solid #d2e1d4;border-bottom-width:6px;border-radius:25px;padding:24px;color:var(--ink);box-shadow:0 25px 70px #214b4330}dialog::backdrop{background:#183e3c80;backdrop-filter:blur(4px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-top h2{font-size:21px;margin:0}.rule-row{display:grid;grid-template-columns:95px 1fr;gap:12px;font-size:13px;padding:12px 0;border-bottom:1px solid var(--line)}dialog p{font-size:13px;line-height:1.8;color:#536b62}
@keyframes idle{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}@keyframes waiting{to{opacity:.2;transform:translateY(-4px)}}@keyframes lock-in{from{transform:scale(.7)}to{transform:scale(1)}}@keyframes count-three{from{transform:scale(1.2) rotate(-8deg)}to{transform:scale(1) rotate(-5deg)}}@keyframes count-two{from{transform:scale(1.2) rotate(8deg)}to{transform:scale(1) rotate(-5deg)}}@keyframes count-one{from{transform:scale(1.2) rotate(-8deg)}to{transform:scale(1) rotate(-5deg)}}@keyframes enter-left{from{transform:translateX(-60px)}to{transform:translateX(0)}}@keyframes charge{0%,100%{opacity:0;transform:scale(.8)}25%,75%{opacity:.85;transform:scale(1.06)}45%{transform:scale(.98)}}@keyframes power-up{0%,100%{transform:translateY(0)}25%,45%,65%{transform:translateY(-5px)}35%,55%{transform:translateY(-2px)}}@keyframes attack{0%,15%,100%{transform:translateX(0)}35%,70%{transform:translateX(12px) rotate(3deg)}}@keyframes projectile{0%,15%{opacity:0;transform:translateX(0) scale(.2)}30%{opacity:1;transform:translateX(0) scale(.85)}65%{opacity:1;transform:translateX(calc(var(--direction)*60%)) scale(1.1)}85%,100%{opacity:0;transform:translateX(calc(var(--direction)*100%)) scale(.6)}}@keyframes shield{0%,100%{opacity:0;scale:.85}20%,75%{opacity:.85;scale:1}}@keyframes teleport{0%,100%{opacity:1;translate:0}28%,68%{opacity:.08;translate:calc(var(--direction)*-24px) 0}80%{opacity:.5;translate:0}}@keyframes hit{0%,38%{transform:translateX(0)}48%,65%{transform:translateX(-16px) rotate(-9deg)}55%,75%{transform:translateX(-5px) rotate(-5deg)}100%{transform:translateX(0)}}@keyframes impact{0%,35%,80%,100%{opacity:0;transform:scale(.5)}48%,60%{opacity:.9;transform:scale(1)}}@keyframes clash{0%,30%,90%,100%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-15deg)}45%,70%{opacity:1;transform:translate(-50%,-50%) scale(1.3) rotate(10deg)}}@keyframes outcome{0%,15%{opacity:0;translate:0 10px;scale:.8}35%,100%{opacity:1;translate:0;scale:1}}@keyframes energy-gain{0%,20%{opacity:0;transform:translateY(10px)}40%,85%{opacity:1;transform:translateY(-5px)}100%{opacity:0;transform:translateY(-16px)}}@keyframes victory{0%{transform:translateY(0)}40%{transform:translateY(-20px) rotate(-4deg)}70%{transform:translateY(0) rotate(2deg)}100%{transform:translateY(0)}}@keyframes shrug{0%{transform:translateY(5px)}60%{transform:translateY(-5px)}100%{transform:translateY(0)}}
@media(min-width:1100px){.avatar{width:280px}.arena{padding-inline:55px}.home-stage{min-height:500px}}
@media(max-width:760px){.app{padding:0 22px}header{height:68px}.home{grid-template-columns:1fr;gap:24px;max-width:480px;margin:auto}.home-stage{min-height:0;height:340px;padding-top:16px;border-radius:30px}.home h1{font-size:44px;margin:8px 0 0}#home-fighters{width:100%;max-width:390px;margin:auto;padding:15px 8px 8px}.home-fighter{width:47%;max-width:180px}.home-menu{padding:0}.home-versus{top:42%;font-size:28px}.home-platform{height:110px}.stats{margin-top:24px;padding-top:18px}.home-actions>.primary{min-height:64px;font-size:19px}.home-actions .split button{min-height:54px}.stat-mode>div{gap:30px}.stat-mode{padding:0 26px}.stat-mode:first-child{padding-left:18px}.stat-mode strong{font-size:26px}.arena{min-height:310px;padding:16px 15px 13px}.avatar{max-width:220px}.action-buttons{gap:9px}.action-buttons strong{font-size:13px}.action-buttons small{font-size:10px}.match-top{margin-bottom:12px}.turn-heading{font-size:22px}.fighter-info{gap:6px}.energy{padding-right:7px;min-width:58px}.energy-change{right:-22px;font-size:20px}.clash-label{font-size:21px;padding:7px 14px}.match-result{margin-top:14px;padding:15px 20px}}
@media(max-width:520px){.app{padding:0 16px}header{height:60px;gap:8px}.brand{font-size:17px;gap:7px}.brand-ball{width:30px;height:30px}.header-tools{gap:4px}#connection{font-size:10px;gap:4px}.quiet{padding:9px 10px;font-size:12px}main{padding:12px 0 18px}.home{gap:20px}.home-stage{height:300px;border-radius:25px}.home h1{font-size:40px}#home-fighters{max-width:340px;padding-bottom:5px}.home-fighter{max-width:155px}.home-menu{padding-inline:5px}.home-actions{gap:12px}.stats{margin-top:22px}.stat-mode>div{gap:24px}.stat-mode>span{font-size:12px}.stat-mode strong{font-size:24px}.match-title{gap:9px}.mode-label{font-size:11px;padding:6px 8px}.turn-heading{font-size:21px}.match-top{margin-bottom:9px}.timing{min-height:44px;font-size:12px}.time-label{font-size:16px}.time-track{height:8px;bottom:9px}.arena{min-height:262px;padding:13px 8px 10px;border-radius:23px}.fighter{width:46%}.fighter-info{height:32px;gap:5px}.fighter-name{font-size:12px;padding:5px 9px;border-radius:8px}.energy{border-radius:9px;min-width:48px;padding:1px 6px 1px 2px;gap:1px}.energy>svg{width:21px;height:21px}.energy-count{font-size:17px}.energy-change{font-size:18px;right:-20px;top:3px}.avatar{width:100%;max-width:185px;margin-top:9px}.fighter-caption{min-height:27px;font-size:10px;margin-top:0}.choice-status:not(:empty),.action-label:not(:empty){min-height:25px;padding:5px 8px;border-radius:8px}.versus{font-size:24px}.duel-cue{top:48%}#match[data-phase=countdown] .countdown-number{width:62px;height:70px;font-size:47px;border-radius:20px}#match[data-phase=countdown] .versus{font-size:16px}.clash-label{font-size:19px;padding:6px 12px;top:27%;border-radius:12px}.action-buttons{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:15px}.action-buttons button{grid-column:span 2;min-height:96px;padding:9px 4px 8px;gap:4px;border-radius:15px;border-bottom-width:5px}.action-buttons button:nth-child(4),.action-buttons button:nth-child(5){grid-column:span 3;display:grid;grid-template-columns:42px auto;grid-template-rows:auto auto;align-content:center;column-gap:10px;row-gap:4px;padding:9px 12px;min-height:78px;text-align:left}.action-buttons button:nth-child(4) .action-symbol,.action-buttons button:nth-child(5) .action-symbol{grid-row:span 2;align-self:center}.action-buttons strong{font-size:13px;white-space:nowrap}.action-buttons small{font-size:10px}.action-symbol{width:34px;height:34px}.action-buttons button:nth-child(4) .action-symbol,.action-buttons button:nth-child(5) .action-symbol{width:39px;height:39px}.chosen-mark{width:25px;height:25px;right:-4px;top:-7px}.match-result{padding:14px 16px 16px;border-radius:20px}.match-result h2{font-size:28px}.result-medal{width:48px;height:48px;border-radius:14px}.result-medal svg{width:33px;height:33px}.result-stats{font-size:12px;margin-top:9px}.match-result .split{margin-top:12px}.match-result .split button{font-size:14px;padding:10px 12px}.finish-reason{font-size:11px}#match[data-phase=finished] .arena{min-height:250px}#match[data-phase=finished] .avatar{max-width:170px}footer{padding:4px 0 8px}footer .quiet{font-size:10px;min-height:34px}.room-code{font-size:36px;letter-spacing:6px}.waiting .split button{padding:12px 8px;font-size:13px}.rule-row{grid-template-columns:82px 1fr;gap:8px;font-size:12px}}
@media(max-width:380px){.app{padding:0 12px}.home-stage{height:270px}.home h1{font-size:35px}.home-fighter{max-width:139px}.arena{min-height:236px}.avatar{max-width:157px}.action-buttons button:nth-child(4),.action-buttons button:nth-child(5){grid-template-columns:30px auto;column-gap:6px;padding-inline:9px}.action-buttons button:nth-child(4) .action-symbol,.action-buttons button:nth-child(5) .action-symbol{width:29px;height:29px}.energy-change{right:-16px;font-size:16px}.fighter-info{gap:4px}.fighter-name{padding-inline:7px}.stat-mode{padding-inline:19px}.match-title{gap:7px}}
@media(max-height:720px) and (max-width:520px){header{height:52px}main{padding-top:6px;padding-bottom:8px}.arena{min-height:222px}.avatar{max-width:150px}.action-buttons{gap:8px;margin-top:12px}.action-buttons button{min-height:87px}.action-buttons button:nth-child(4),.action-buttons button:nth-child(5){min-height:69px}.match-top{margin-bottom:7px}.timing{min-height:40px}.home-stage{height:250px}.home-fighter{max-width:130px}.home h1{font-size:34px}.home{gap:16px}.home-actions>.primary{min-height:58px}.stats{margin-top:18px;padding-top:14px}#match[data-phase=finished] .arena{min-height:220px}#match[data-phase=finished] .avatar{max-width:148px}.match-result{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.fighter[data-action=charge] .aura{opacity:.5}.fighter[data-action=guard] .shield{opacity:.75}.fighter[data-action=blast] .projectile,.fighter[data-action=beam] .projectile{opacity:1}.fighter[data-action=dodge] .character-direction{opacity:.4}.fighter[data-action=dodge] .motion-trails{opacity:.8}.fighter[data-hit=true] .impact{opacity:.6}.arena[data-outcome=clash] .clash-burst{opacity:.8;transform:translate(-50%,-50%)}}
/* Keep every action visible before the deadline on shorter desktop windows. */
@media(min-width:521px) and (max-height:800px){
  body[data-screen=match] header,body[data-screen=result] header{height:60px}
  body[data-screen=match] main,body[data-screen=result] main{padding:4px 0}
  body[data-screen=match] footer,body[data-screen=result] footer{display:none}
  .match-top{margin-bottom:8px}.timing{min-height:36px;padding-bottom:16px}.time-track{bottom:6px;height:8px}
  .arena{min-height:280px;padding:16px 24px 12px}
  .avatar{width:clamp(150px,calc((100svh - 480px)*.8),245px)}
  .action-buttons{margin-top:14px}.action-buttons button{min-height:104px;gap:5px;padding-block:9px}
  .action-symbol{width:36px;height:36px}
}
@media(min-width:521px) and (max-height:660px){
  body[data-screen=match] header,body[data-screen=result] header{height:48px}
  .match-top{margin-bottom:6px}.leave{min-height:32px;padding-block:6px}.timing{min-height:30px}
  .arena{min-height:230px;padding-block:10px}.avatar{width:130px}
  .action-buttons{margin-top:10px}.action-buttons button{min-height:84px;gap:4px;padding-block:7px}
  .action-symbol{width:28px;height:28px}
}
/* Keep both action rows in reach on short phones. */
@media(max-height:720px) and (max-width:520px){
  body[data-screen=match] header,body[data-screen=result] header{height:48px}
  body[data-screen=match] main,body[data-screen=result] main{padding:4px 0}
  body[data-screen=match] footer,body[data-screen=result] footer{display:none}
  .match-top{margin-bottom:5px}.leave{min-height:32px;padding-block:6px}
  .timing{min-height:32px;padding-bottom:15px}.time-track{bottom:5px;height:7px}
  .arena{padding-block:8px;min-height:214px}.fighter-info{height:28px}
  .avatar{max-width:128px;margin-top:4px}.fighter-caption{min-height:23px}
  .choice-status:not(:empty),.action-label:not(:empty){min-height:22px;padding-block:4px}
  .action-buttons{margin-top:10px}.action-buttons button{min-height:78px;padding-block:6px}
  .action-buttons button:nth-child(4),.action-buttons button:nth-child(5){min-height:64px}
  .action-symbol{width:29px;height:29px}
}
/* Ink, mineral tones and cloth colours; viewport sizing above stays shared. */
:root{font-family:"Segoe UI","Malgun Gothic",sans-serif;color:#303638;background:#f3f1eb;--ink:#303638;--muted:#6d7372;--mint:#dedfd5;--lime:#a5ad92;--sky:#c7d0cf;--line:#d2d4ca;--green:#6c7652}
button{border-radius:13px}button:hover:not(:disabled){background:#ebece5;border-color:#a9b0a2}button.primary{background:#a85039;border-color:#773927;color:#fff9ee}button.primary:hover:not(:disabled){background:#b45c44;border-color:#773927}button.primary:disabled{background:#ddd9ce;border-color:#c2c0b3;color:#7c7c70}.quiet{color:#606964}.quiet:hover:not(:disabled){background:#e5e7de}#connection{color:#6e746c}#connection.connected:before{background:#718158}
.home-stage{background:#dddcd2;border-radius:22px;border:1px solid #c8c8bc}.home-stage:before{inset:0;width:auto;height:auto;border:0;border-radius:0;background:repeating-linear-gradient(153deg,transparent 0 65px,#6c79771c 66px 68px,transparent 69px 100px);z-index:-1}.home-stage:after{background:#b9c5c2;right:-80px;width:52%;border-left:2px solid #889692;transform:skew(-16deg)}.home h1{color:#303b3a;transform:none;letter-spacing:-2px}.home-fighter:first-child{transform:translateX(6px)}.home-fighter:last-child{transform:scaleX(-1) translateX(6px)}.home-fighter .character{animation:combat-breathe 4s ease-in-out infinite}.home-platform{background:#b3b5a7;border-top:3px solid #8a9287;border-radius:0;transform:skewY(-6deg);height:90px;bottom:-20px}.home-versus{color:#98543e;text-shadow:2px 2px #eee9d9;font-style:italic;letter-spacing:-3px}.home-actions>.primary{border-radius:16px}.stat-mode>span,.stat-mode strong{color:#4d5951}.stat-mode>div{color:#6b756c}.stats{border-color:#d0d3c7}.stat-mode+.stat-mode{border-color:#d0d3c7}.room-code{background:#e6e6db;border-color:#aeb4a0;border-radius:14px}#waiting-fighter{background:#d8ddd3;border-radius:12px}.waiting-dots i{background:#8a735b}
.mode-label{color:#566057;background:#e0e4d8;border-radius:5px}.time-track{background:#d9dbd0}.time-track span{background:#858d68}#match[data-locked=true] .time-track span{background:#687f84}.arena{background:#e5e2d9;border-radius:18px;border:1px solid #bec4b9}.arena:before{background:#c4cfcd;border-left:3px solid #f1f0e0;transform:skew(-14deg)}.arena:after{inset:35% -10% 0;width:120%;height:75%;border:0;border-radius:0;background:repeating-linear-gradient(172deg,transparent 0 32px,#7c858514 33px 34px,transparent 35px 60px);z-index:-1}.arena-floor{height:25%;bottom:-8%;background:#8d998b25;border-top:2px solid #949d9130}.fighter-name{background:#f5f2e8;color:#3b4541;border-radius:6px}.fighter.self .fighter-name{background:#414f47}.energy{background:#f4f1e5;border-color:#f8f6ef;border-radius:7px}.energy>svg{color:#8a7642}.energy-change{color:#6d5436;text-shadow:0 1px #f5f0df}.choice-status:not(:empty),.action-label:not(:empty){background:#f6f0df;color:#3f4840;border-radius:5px;box-shadow:0 2px 0 #6c756b35}.fighter[data-locked=true] .choice-status{background:#e0e7cd}.fighter[data-locked=true] .fighter-name{box-shadow:0 0 0 2px #a9b293}.versus{color:#65716a;text-shadow:1px 2px #f8f3e8;letter-spacing:-3px}#match[data-phase=countdown] .countdown-number{background:#f5efdf;border:2px solid #3f4b45;color:#3f4b45;border-radius:14px;box-shadow:4px 5px 0 #69756935}.clash-label{background:#f6efda;color:#3d4841;border-color:#48534b;border-width:2px;border-radius:6px;box-shadow:3px 4px 0 #454a3535}.action-buttons button{border-radius:12px;border-color:#b7beb0;background:#fdfcf6;--action-color:#78835a}.action-buttons button[data-action=blast]{--action-color:#ad5a3e}.action-buttons button[data-action=guard]{--action-color:#537c89}.action-buttons button[data-action=beam]{--action-color:#925d51}.action-buttons button[data-action=dodge]{--action-color:#666e85}.action-buttons button:hover:not(:disabled){background:#f1f0e6}.action-buttons button:disabled{background:#e9eae2;border-color:#d0d4c8;color:#757c70}.action-buttons button.chosen{background:#ebe6d4;border-color:#a98452;color:#5b4f36;box-shadow:0 0 0 1px #bea577}.action-buttons small{color:#677162}.chosen-mark{background:#8b744d;border-color:#f3f1eb}.match-result{background:#e7eadf;border-color:#bec7af;border-radius:16px}.match-result h2{color:#556449}.result-medal{background:#d3dcc3;color:#697b50;border-radius:10px;transform:rotate(-5deg)}.result-stats{color:#56614e}.match-result[data-result=loss]{background:#e7e3df;border-color:#cbbfb7}.match-result[data-result=loss] h2{color:#8b584b}.match-result[data-result=loss] .result-medal{background:#d9ccc3;color:#95634f}.match-result[data-result=draw]{background:#e2e8e5;border-color:#bacac2}.match-result[data-result=draw] h2{color:#556b66}.match-result[data-result=draw] .result-medal{background:#cbd9d2;color:#627a6d}
/* Adult proportions fill exactly the old art box, with individually drawn limbs. */
.character{transform-origin:130px 230px}.portrait{transform-origin:130px 61px}.legs-airborne{display:none}#match[data-phase=selecting] .character{animation:combat-breathe 4s ease-in-out infinite}.fighter[data-reaction=win] .character{animation:resolve-stance .45s ease-out both}.fighter[data-reaction=loss] .character{transform:translateY(5px) rotate(-9deg)}.fighter[data-reaction=loss] .portrait{transform:rotate(-9deg)}.fighter[data-reaction=draw] .portrait{transform:rotate(2deg)}.fighter[data-reaction=draw] .character{animation:resolve-stance .45s ease-out both}.fighter[data-hit=true] .pose,.fighter[data-hit=true] .face,.fighter[data-hit=true] .legs-stance{display:none}.fighter[data-hit=true] .pose-hit,.fighter[data-hit=true] .face-shock,.fighter[data-hit=true] .legs-airborne{display:inline}
.aura{background:radial-gradient(ellipse at 50% 65%,#fff6ad 0%,#ffdc45 48%,#f5a623 100%);border-color:#ffe46b;border-width:3px;border-radius:0;box-shadow:none;clip-path:polygon(8% 100%,0 51%,15% 60%,12% 20%,32% 43%,40% 0,58% 27%,79% 8%,77% 48%,98% 28%,93% 85%,100% 100%)}.projectile{top:34%;height:16%;border-width:3px;border-color:#b46b46;background:#fff2c8;box-shadow:0 0 0 5px #e7c87e60;border-radius:48% 55% 55% 48%}.fighter[data-action=beam] .projectile{height:23%;border-color:#688a97;background:#eef3e8;box-shadow:0 0 0 5px #a5bfbd70;border-radius:35%}.shield{border-width:3px;border-color:#547c89;background:#b0cfd149;box-shadow:none;border-radius:40%;transform:skewY(-10deg)}.fighter[data-fighter="1"] .shield{transform:skewY(10deg)}.motion-trails i{height:3px;background:#465b62}.clash-burst{background:#ede1b8;border-color:#3d4445}.fighter[data-action=blast] .projectile,.fighter[data-action=beam] .projectile{animation-name:combat-projectile}
@keyframes combat-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes resolve-stance{from{transform:translateY(3px)}to{transform:translateY(0)}}
@keyframes combat-projectile{0%,12%{opacity:0;transform:translateX(0) scale(.25)}24%{opacity:1;transform:translateX(0) scale(.7)}58%,72%{opacity:1;transform:translateX(var(--shot-distance)) scale(1)}90%,100%{opacity:0;transform:translateX(var(--shot-distance)) scale(.65)}}
/* Full viewport, native top-layer modal: no app chrome or background tab targets. */
body[data-cutscene=active]{overflow:hidden}
body[data-cutscene=active] .app{visibility:hidden}
dialog.finish-cutscene{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#080a0a;color:#eee7d6;overflow:hidden;box-shadow:none;outline:none;--combatant-size:min(42vw,35dvh);--hit-x:calc(50% + var(--combatant-size)*.48)}
dialog.finish-cutscene::backdrop{background:#080a0a;backdrop-filter:none}
.finish-cutscene[data-hit-index="0"]{--hit-x:calc(50% - var(--combatant-size)*.48)}
.cutscene-page{position:absolute;inset:0;overflow:hidden;background:#080a0a;isolation:isolate}
.cutscene-panel{position:absolute;left:0;width:100%;overflow:hidden;isolation:isolate;background:#e6dfc9}
.cutscene-attack{top:0;height:36%;clip-path:polygon(0 0,100% 0,100% 100%,0 76%);background:#b8c3bc}
.cutscene-impact{top:28%;height:43%;clip-path:polygon(0 0,100% 22%,100% 100%,0 82%);background:#f3ecd4}
.cutscene-fallen{top:64.4%;height:35.6%;clip-path:polygon(0 0,100% 22%,100% 100%,0 100%);background:#d3c8ac}
.cutscene-panel:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(#1e2d272e .7px,transparent .9px) 0 0/4px 4px;z-index:5;mix-blend-mode:multiply}
.cutscene-ink-strokes{position:absolute;inset:-30%;background:repeating-linear-gradient(167deg,transparent 0 19px,#2c363c70 20px 22px,transparent 24px 48px);transform:skewY(-5deg)}
.cutscene-attack:before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,#263433b3,transparent 46%,#eee4cb88)}
.finish-cutscene .cutscene-closeup{position:absolute;inset:-5% 0 -55%;width:100%;margin:0}
.cutscene-closeup .fighter-art{filter:drop-shadow(8px 6px 0 #30383144)}
.finish-cutscene .character{animation:none;transform:none}
.finish-cutscene .ground-shadow{display:none}
.finish-cutscene .cutscene-closeup .pose{display:none}
.cutscene-speedlines{position:absolute;left:calc(var(--hit-x) - 50%);top:0;width:100%;height:100%;overflow:visible;opacity:.7}
.finish-cutscene .cutscene-combatant{position:absolute;left:calc(50% - var(--combatant-size));top:53%;width:var(--combatant-size);height:auto;aspect-ratio:260/300;translate:0 -50%;z-index:2}
.finish-cutscene .cutscene-combatant[data-fighter="1"]{left:50%}
.cutscene-combatant .character-direction{height:100%}
.finish-cutscene .cutscene-combatant[data-hit=false] .character{transform:translateX(10px) rotate(3deg)}
.finish-cutscene .cutscene-combatant[data-hit=true] .character{transform:translate(-23px,-10px) rotate(-35deg);transform-origin:130px 150px}
.cutscene-shot{position:absolute;left:calc(50% - var(--combatant-size)*.12);top:43%;width:calc(var(--combatant-size)*.7);height:12%;z-index:3;background:#fffae7;border:3px solid #8c7250;clip-path:polygon(0 27%,80% 0,100% 48%,81% 100%,0 73%);transform:rotate(-4deg)}
.finish-cutscene[data-attack=beam] .cutscene-shot{height:19%;top:40%;border-color:#4d7680;background:#e3f0e7;clip-path:polygon(0 0,84% 8%,100% 50%,84% 92%,0 100%)}
.finish-cutscene[data-hit-index="0"] .cutscene-shot{left:calc(50% - var(--combatant-size)*.58);transform:scaleX(-1) rotate(-4deg)}
.cutscene-contact{position:absolute;left:var(--hit-x);top:47%;width:calc(var(--combatant-size)*.54);height:auto;aspect-ratio:1;transform:translate(-50%,-50%);z-index:4}
.cutscene-sfx{position:absolute;left:50%;top:20%;translate:-50% 0;font-family:"Malgun Gothic","Arial Black",sans-serif;font-size:clamp(54px,12dvh,130px);font-weight:1000;line-height:1;letter-spacing:-.12em;color:#a23f2b;-webkit-text-stroke:5px #202529;paint-order:stroke fill;filter:drop-shadow(3px 4px 0 #f5eedc);transform:rotate(-13deg) skew(-10deg);z-index:6}
.fallen-fighter-art{position:absolute;inset:4% 0 0;width:100%;height:96%;display:block}
.rock-fallen-head .face{display:none}.rock-fallen-head .face-loss{display:inline}
.rock-fallen-art{overflow:visible}
/* Stage changes reveal additional panels; previously revealed panels stay on the page. */
.finish-cutscene[data-stage=attack] .cutscene-impact,.finish-cutscene[data-stage=attack] .cutscene-fallen,.finish-cutscene[data-stage=impact] .cutscene-fallen{visibility:hidden}
.finish-cutscene[data-stage=attack] .cutscene-attack{animation:cutscene-enter calc(.28s * var(--cutscene-time-scale, 1)) ease-out both}
.finish-cutscene[data-stage=impact] .cutscene-impact{animation:cutscene-enter calc(.22s * var(--cutscene-time-scale, 1)) ease-out both}
.finish-cutscene[data-stage=fallen] .cutscene-fallen{animation:cutscene-enter calc(.4s * var(--cutscene-time-scale, 1)) ease-out both}
.finish-cutscene[data-stage=impact] .cutscene-combatant[data-hit=true] .character{animation:cutscene-hit calc(.35s * var(--cutscene-time-scale, 1)) ease-out both}
@keyframes cutscene-enter{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes cutscene-hit{from{transform:translate(-6px,-3px) rotate(-12deg)}to{transform:translate(-23px,-10px) rotate(-35deg)}}
@media(max-width:520px){
  .cutscene-sfx{-webkit-text-stroke-width:3px;filter:drop-shadow(2px 3px 0 #f5eedc)}
  .fallen-fighter-art{left:-15%;width:130%}
  .home-stage{border-radius:18px}.action-buttons button{border-radius:11px}
}
@media(prefers-reduced-motion:reduce){
  .finish-cutscene .cutscene-panel{animation:none;translate:none;opacity:1}
  .fighter[data-action=blast] .projectile,.fighter[data-action=beam] .projectile{transform:translateX(var(--shot-distance))}
}
/* Beam panels share the character's 260 × 300 hand coordinates. */
.finish-cutscene[data-attack=beam]{--beam-caster-size:min(48vw,30dvh)}
.finish-cutscene[data-attack=beam] .beam-impact{background:#d5e6e5}
.finish-cutscene[data-attack=beam] .beam-rush-lines{position:absolute;inset:-50%;background:repeating-linear-gradient(172deg,transparent 0 16px,#344e5970 17px 19px,transparent 20px 37px);transform:skewY(-7deg)}
.finish-cutscene[data-attack=beam] .beam-launch{position:absolute;left:4%;top:54%;width:var(--beam-caster-size);aspect-ratio:260/300;translate:0 -50%;z-index:3}
.finish-cutscene[data-attack=beam] .beam-launch[data-caster="1"]{left:auto;right:4%;transform:scaleX(-1)}
.finish-cutscene[data-attack=beam] .beam-caster{width:100%;height:100%}
.finish-cutscene[data-attack=beam] .beam-caster .character-direction{transform:none}
.finish-cutscene[data-attack=beam] .beam-ray{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:3;transform-origin:80% 40%;filter:drop-shadow(0 0 4px #c7f9ff)}
.finish-cutscene[data-attack=beam] .beam-impact-victim{position:absolute;right:2%;top:54%;width:var(--beam-caster-size);aspect-ratio:260/300;translate:0 -50%;z-index:2;visibility:hidden}
.finish-cutscene[data-attack=beam] .beam-impact-victim[data-fighter="0"]{right:auto;left:2%}
.finish-cutscene[data-attack=beam] .beam-impact-victim .character{transform:translate(-10px,-8px) rotate(-25deg);transform-origin:130px 150px}
.finish-cutscene[data-attack=beam][data-stage=impact] .beam-ray{animation:beam-cutscene-fire calc(.3s * var(--cutscene-time-scale, 1)) ease-out both}
.finish-cutscene[data-attack=beam] .beam-aftermath{background:#080a0a;animation:none;translate:none;opacity:1}
.finish-cutscene[data-attack=beam] .beam-aftermath:after{opacity:.16}
.finish-cutscene[data-attack=beam] .beam-reaction{position:absolute;inset:0 0 0 42%;overflow:hidden;clip-path:polygon(24% 0,100% 0,100% 100%,0 100%);background:#fcffff;visibility:hidden}
.finish-cutscene[data-attack=beam] .beam-shock-lines{position:absolute;inset:-30%;background:repeating-linear-gradient(153deg,transparent 0 39px,#a9e9f044 40px 41px,transparent 42px 71px),radial-gradient(ellipse at 40% 45%,#fcffff 20%,#d4faff 100%)}
.finish-cutscene[data-attack=beam] .beam-reaction-portrait{position:absolute;inset:-1% -10% -40% -8%;width:118%;height:141%}
.finish-cutscene[data-attack=beam] .beam-reaction-art{display:block;width:100%;height:100%;overflow:visible}
.finish-cutscene[data-attack=beam] .beam-reaction-remnant{filter:brightness(1.18) saturate(.75)}
.finish-cutscene[data-attack=beam] .beam-reaction-erosion{transform:translateX(0)}
.finish-cutscene[data-attack=beam] .beam-reaction-light{opacity:.85}
.finish-cutscene[data-attack=beam] .beam-reaction-portrait .pose{display:none}
.finish-cutscene[data-attack=beam] .beam-dissolve{position:absolute;inset:0 auto 0 0;width:62%;overflow:hidden;clip-path:polygon(0 0,89% 0,66% 100%,0 100%);background:#fcffff;visibility:hidden}
.finish-cutscene[data-attack=beam] .beam-dissolve-lines{position:absolute;inset:0;background:linear-gradient(145deg,#d4faff55,#fcffff 48%,#e4fcfc)}
.finish-cutscene[data-attack=beam] .beam-dissolve-art{position:absolute;left:0;top:6%;width:90%;height:94%;overflow:visible}
.finish-cutscene[data-attack=beam] .beam-remnant{opacity:.38;filter:brightness(1.25) saturate(.55)}
.finish-cutscene[data-attack=beam] .beam-remnant .character{transform:rotate(-14deg);transform-origin:130px 150px}
.finish-cutscene[data-attack=beam] .beam-vanish-wake{opacity:.42}
.finish-cutscene[data-attack=beam] .beam-fragments{opacity:.6;transform:translateX(0)}
.finish-cutscene[data-attack=beam]:is([data-stage=reaction],[data-stage=fallen],[data-stage=complete]) .beam-reaction{visibility:visible}
.finish-cutscene[data-attack=beam]:is([data-stage=fallen],[data-stage=complete]) .beam-dissolve{visibility:visible}
.finish-cutscene[data-attack=beam][data-stage=reaction] .beam-reaction-erosion{animation:beam-cutscene-erode calc(.55s * var(--cutscene-time-scale, 1)) ease-out both}
.finish-cutscene[data-attack=beam][data-stage=reaction] .beam-reaction-light{animation:beam-cutscene-irradiate calc(.55s * var(--cutscene-time-scale, 1)) ease-out both}
.finish-cutscene[data-attack=beam][data-stage=fallen] .beam-remnant{animation:beam-cutscene-fade calc(.55s * var(--cutscene-time-scale, 1)) ease-out both}
.finish-cutscene[data-attack=beam][data-stage=fallen] .beam-fragments{animation:beam-cutscene-scatter calc(.55s * var(--cutscene-time-scale, 1)) ease-out both}
@keyframes beam-cutscene-fire{from{opacity:.35;transform:scaleX(.15)}to{opacity:1;transform:scaleX(1)}}
@keyframes beam-cutscene-erode{from{transform:translateX(22px)}to{transform:translateX(0)}}
@keyframes beam-cutscene-irradiate{from{opacity:.2}to{opacity:.85}}
@keyframes beam-cutscene-fade{from{opacity:.68}to{opacity:.38}}
@keyframes beam-cutscene-scatter{from{opacity:0;transform:translateX(-12px)}to{opacity:.6;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){
  .finish-cutscene[data-attack=beam] .beam-ray{animation:none;transform:none;opacity:1}
  .finish-cutscene[data-attack=beam] .beam-reaction-erosion,.finish-cutscene[data-attack=beam] .beam-reaction-light,.finish-cutscene[data-attack=beam] .beam-remnant,.finish-cutscene[data-attack=beam] .beam-fragments{animation:none}
}
/* Result-only ash occupies the existing avatar box without hiding player information. */
.ash-pile-art{display:none}
.arena .fighter[data-ash=true] .avatar > :is(.character-direction,.aura,.motion-trails,.projectile,.shield,.impact){display:none}
.arena .fighter[data-ash=true] .avatar > .ash-pile-art{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.arena .fighter[data-ash=true] .ash-drift{opacity:.55;animation:ash-pile-drift 3.2s ease-out infinite}
.arena .fighter[data-ash=true] .ash-drift-late{animation-delay:-1.6s}
@keyframes ash-pile-drift{0%{opacity:0;transform:translate(0,4px)}20%{opacity:.55}100%{opacity:0;transform:translate(7px,-9px)}}
@media(prefers-reduced-motion:reduce){
  .arena .fighter[data-ash=true] .ash-drift{animation:none;opacity:.55;transform:none}
}