/* Shared combat destinations: imagery, hierarchy and calm motion. */
/* Partial NPC rows use the same card width as full rows. The surrounding
   content width, including a visible sidebar, determines the column count. */
.game-frame[data-page="npcs"] .combat-cards:has(> .encounter-card){--npc-columns:1;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:20px}
.game-frame[data-page="npcs"] .combat-cards>.encounter-card{flex:0 1 calc((100% - (var(--npc-columns) - 1) * 20px) / var(--npc-columns));min-width:0;max-width:400px;box-sizing:border-box}
.game-frame[data-page="npcs"] .game-main{container-type:inline-size}
@container(min-width:640px){.game-frame[data-page="npcs"] .combat-cards:has(> .encounter-card){--npc-columns:2}}
@container(min-width:980px){.game-frame[data-page="npcs"] .combat-cards:has(> .encounter-card){--npc-columns:3}}
@container(min-width:1320px){.game-frame[data-page="npcs"] .combat-cards:has(> .encounter-card){--npc-columns:4}}
/* Directory states share a quiet, content-sized row rather than a tall banner. */
.battle-empty{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:12px 16px;margin:10px 0;border:1px dashed var(--theme-line,#cce2e6);border-radius:14px;background:var(--theme-surface,#ffffffbd);color:var(--theme-muted,#5b7e89);font-size:13px;line-height:1.5}
.battle-empty>span{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--theme-soft,#e9f8f7);color:var(--theme-accent,#1597a4);font-size:20px}
.battle-empty>p{flex:1 1 220px;margin:0}
.battle-empty>.training-secondary{min-height:40px;font-size:12px}
.arena-selection>.arena-create-heading{margin:12px 0 10px;font-size:18px}
.game-main .arena-selection>.open-lobbies{margin-bottom:12px}
.arena-selection .compact-arena-modes .compact-mode-heading{min-height:52px}
.arena-selection .compact-arena-modes .compact-mode-description{min-height:2.9em;margin:10px 0}
.arena-selection .compact-arena-modes .compact-mode-options{padding-top:10px}
.arena-selection .compact-mode-footer{padding-top:12px;gap:8px}
.arena-selection .ranked-growth-bonus{margin-top:10px;padding:10px 12px}
.arena-selection .compact-arena-modes .arena-mode-card{padding:18px}
.game-main .foreign-battle{padding:10px 14px;margin:10px 0;gap:12px;border-radius:14px;font-size:13px}
.game-main .foreign-battle>span{font-size:24px}
.game-main .foreign-battle p{font-size:12px;margin:3px 0 0}
.game-main .foreign-battle .training-primary{min-height:40px;padding:8px 12px;font-size:12px}
/* Keep shifted portrait planes out of text selection; card labels remain copyable. */
img[data-no-select]{user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.arena-selection,.premium-lobby,.campaign-stage{--ink:var(--theme-ink,#163e4d);--cyan:#009db0;--gold:#dfa741;color:var(--ink)}
.arena-invitation{margin:1.6rem 0}.arena-invitation h2{font-size:clamp(1.5rem,2.5vw,2.3rem);margin:.4rem 0}.arena-invitation p{color:var(--theme-muted,#5b7e89)}
.arena-mode-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}.arena-mode-card{position:relative;overflow:hidden;padding:2rem;border:1px solid var(--theme-line,#c9e2e6);border-radius:24px;background:linear-gradient(135deg,var(--theme-surface,#fff) 25%,var(--theme-soft,#e9f8f7));box-shadow:0 15px 35px #1643530a;display:flex;flex-direction:column;align-items:flex-start}.arena-mode-card.ranked{background:linear-gradient(135deg,var(--theme-surface,#fff) 25%,var(--theme-soft,#fff6df));border-color:var(--theme-line,#ecdcb9)}.arena-mode-card:before{content:"";position:absolute;width:240px;height:240px;border:1px solid #15a8af18;border-radius:50%;right:-90px;top:-100px;box-shadow:0 0 0 28px #15a8af06,0 0 0 57px #15a8af05;pointer-events:none}.mode-emblem{width:58px;height:58px;display:grid;place-items:center;background:var(--theme-soft,#e0f4f2);border:1px solid var(--theme-line,#b9e1df);border-radius:18px;color:var(--theme-ink,#008d9d);font-size:2rem;margin-bottom:1.4rem;box-shadow:0 6px 18px #188a9811}.ranked .mode-emblem{background:var(--theme-soft,#fff2cf);color:var(--theme-gold,#a87519);border-color:var(--theme-line,#ebd49c)}.arena-mode-card h3{font-size:1.8rem;margin:.45rem 0}.mode-tagline{color:var(--theme-muted,#607d87);margin:0 0 1.5rem}.prize-pair{display:flex;gap:2rem;flex-wrap:wrap;padding:1rem 0;border-top:1px solid var(--theme-line,#c9dddd);width:100%}.prize-pair small,.prize-pair strong{display:block}.prize-pair small{font-size:.65rem;letter-spacing:.13em;color:var(--theme-muted,#65808a)}.prize-pair strong{font-size:1.5rem}.prize-pair em{font-size:.8rem;font-style:normal;font-weight:400}.quota-pill{background:var(--theme-surface,#ffffffb8);border:1px solid var(--theme-line,#d9e8e5);border-radius:20px;padding:.5rem .8rem;font-size:.8rem;margin:.7rem 0 1.4rem}.arena-mode-card .training-primary{min-width:190px;box-shadow:0 5px 12px #17425114}.arena-mode-card details,.mode-footnote{font-size:.78rem;color:var(--theme-muted,#587580);margin:1rem 0 0}.arena-mode-card details p{max-width:45em;line-height:1.6}.open-lobbies{margin-top:2rem}.open-lobbies h2 small{background:var(--theme-soft,#def0ef);border-radius:10px;padding:.2rem .6rem;font-size:.8rem}.open-lobby,.lobby-empty{display:flex;align-items:center;gap:1.2rem;padding:1.4rem;background:var(--theme-surface,#ffffffbd);border:1px solid var(--theme-line,#cce2e6);border-radius:18px;margin:.8rem 0}.open-lobby h3,.open-lobby p,.lobby-empty p{margin:.2rem 0}.open-lobby>div{flex:1}.open-lobby-symbol,.lobby-empty>span{font-size:2rem;color:var(--theme-accent,#2fabb6)}.lobby-empty{border-style:dashed;min-height:110px}.lobby-empty p{color:var(--theme-muted,#6a8790);font-size:.9rem}
.premium-lobby{background:linear-gradient(125deg,var(--theme-surface,#fff),var(--theme-surface,#f4fbfa));border:1px solid var(--theme-line,#cce3e6);border-radius:25px;padding:clamp(1rem,3vw,2.3rem);box-shadow:0 18px 48px #12445809}.premium-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem}.premium-heading h2{font-size:2rem;margin:.5rem 0}.premium-heading p{color:var(--theme-muted,#63818a);margin:0}.lobby-status{border:1px solid var(--theme-line,#c5e4df);background:var(--theme-soft,#e5f5ef);padding:.5rem 1rem;border-radius:22px;white-space:nowrap;color:var(--theme-accent,#378778);font-size:.8rem}.lobby-lineup{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1.3rem;margin:2rem 0}.lobby-team{border:1px solid var(--theme-line,#d2e5e7);border-radius:19px;overflow:hidden;background:var(--theme-soft,#edf8f7)}.lobby-team h3{margin:0;padding:1rem 1.2rem;background:var(--theme-surface,#ffffffb0);font-size:1rem;display:flex;justify-content:space-between;align-items:center}.lobby-team h3 small{font-weight:400;font-size:.7rem;color:var(--theme-muted,#78929a)}.lobby-fighters{padding:1rem;display:grid;gap:.8rem}.lobby-player{display:flex;align-items:center;gap:1rem;background:var(--theme-surface,#fff);border-radius:14px;overflow:hidden;box-shadow:0 4px 18px #16445208;border:1px solid var(--theme-line,#d2e5e5)}.lobby-player img{width:110px;height:130px;object-fit:cover;object-position:center 20%}.lobby-player strong,.lobby-player small,.lobby-player span{display:block}.lobby-player strong{font-size:1.1rem}.lobby-player small{font-size:.75rem;color:var(--theme-muted,#6b8790);margin:.3rem 0 .9rem}.lobby-player span{font-size:.75rem;color:var(--theme-muted,#8b743c)}.lobby-player.is-ready{border-color:var(--theme-line,#4bbfa8);box-shadow:0 0 0 2px #5ccdb313}.lobby-player.is-ready span{color:var(--theme-ink,#18876f)}.lobby-vacancy{min-height:132px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px dashed var(--theme-line,#bddadd);border-radius:14px;color:var(--theme-muted,#6d9299)}.lobby-vacancy b{font-size:1.7rem}.lobby-vacancy strong{font-size:.9rem}.lobby-vacancy small{font-size:.75rem}.lobby-controls{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;border-top:1px solid var(--theme-line,#d6e7e9);padding-top:1.5rem}.lobby-controls>div{flex-basis:100%}.lobby-controls p{color:var(--theme-muted,#6e8991);font-size:.85rem}.lobby-controls label{display:flex;align-items:center;gap:.5rem}.lobby-controls select{background:var(--theme-surface,white);border:1px solid var(--theme-line,#b9d9df);border-radius:10px;padding:.65rem}.lobby-leave{margin-left:auto;background:var(--theme-surface,#fff);border:1px solid var(--theme-line,#9bbec5);border-radius:11px;color:var(--theme-ink,#194957);font-size:.85rem;font-weight:600;padding:.85rem 1.2rem;cursor:pointer;min-height:44px}.lobby-leave:hover:not(:disabled){background:var(--theme-soft,#e6f4f3);border-color:var(--theme-accent,#268a93)}.lobby-leave:focus-visible{outline:2px solid var(--theme-accent,#268a93);outline-offset:3px}.lobby-invite{display:block;font-size:.8rem;margin-top:1rem}.lobby-invite input{display:block;width:100%;border:1px solid var(--theme-line,#c7dfe3);border-radius:10px;padding:.65rem;margin-top:.4rem;background:var(--theme-surface,#f8fcfb)}
.campaign-stage{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(300px,1.1fr);border-radius:26px;border:1px solid var(--theme-line,#c7e1e5);overflow:hidden;background:var(--theme-surface,#fff);box-shadow:0 20px 50px #153f4e0d;margin:1.4rem 0}.campaign-art{position:relative;display:flex;align-items:center;justify-content:center;padding:4rem 2rem 2.5rem;background:radial-gradient(ellipse at 50% 45%,var(--theme-soft,#e4ffff),var(--theme-soft,#c4e9eb) 65%,var(--theme-soft,#b5dce0));isolation:isolate}.campaign-art:before,.campaign-art:after{content:"";position:absolute;width:75%;aspect-ratio:1;border:1px solid var(--theme-line,#ffffffb0);border-radius:50%;z-index:-1}.campaign-art:after{width:90%;border-style:dashed;opacity:.6;transform:rotate(-25deg)}.chapter-seal{position:absolute;top:1.2rem;left:1.4rem;font-size:.6rem;letter-spacing:.18em;color:var(--theme-muted,#387682);display:flex;align-items:center;gap:.7rem}.chapter-seal b{font-size:1.35rem;letter-spacing:0}.campaign-opponents{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:1rem}.campaign-portrait{position:relative;margin:0;aspect-ratio:4/5;max-height:370px;width:100%;border-radius:18px;overflow:hidden;box-shadow:0 18px 30px #19495735,0 0 0 5px #ffffff6b;transform:translateY(0);transition:transform .3s}.campaign-portrait:hover{transform:translateY(-4px)}.campaign-portrait img{width:100%;height:100%;object-fit:cover}.campaign-portrait figcaption{position:absolute;inset:auto 0 0;padding:3rem 1.3rem 1.2rem;background:linear-gradient(transparent,#103e4cea);color:white;display:flex;flex-direction:column}.campaign-portrait figcaption small{font-size:.58rem;letter-spacing:.2em;color:#c4eceb}.campaign-portrait figcaption strong{font-size:1.6rem}.campaign-portrait figcaption span{font-size:.85rem;color:#d0e9e9}.portrait-corners{position:absolute;inset:10px;border:1px solid #ffffff55;border-radius:10px;z-index:1;pointer-events:none}.campaign-energy{position:absolute;inset:0;background:linear-gradient(110deg,transparent 32%,#e4fffa08 39%,#effffc26 45%,#ffffff66 49%,#fff4d530 52%,#f0fffc0d 58%,transparent 66%);opacity:0;transform:translateX(-110%);animation:campaign-sheen 2s linear infinite;pointer-events:none}.campaign-story{padding:clamp(1.4rem,3vw,3rem);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.campaign-story h2{font-size:clamp(1.7rem,2.7vw,2.7rem);line-height:1.15;margin:.8rem 0}.chapter-description{font-size:1rem;color:var(--theme-muted,#63818a);line-height:1.7}.chapter-facts{display:flex;gap:2rem;flex-wrap:wrap;padding:1.2rem 0;width:100%;border-top:1px solid var(--theme-line,#dfebed)}.chapter-facts span,.chapter-facts strong{display:block}.chapter-facts span{font-size:.6rem;letter-spacing:.12em;color:var(--theme-muted,#71909a);margin-bottom:.4rem}.chapter-facts strong{font-size:.95rem}.chapter-reward{display:flex;gap:1rem;align-items:center;background:linear-gradient(110deg,var(--theme-soft,#fff5dc),var(--theme-surface,#fffdf6));border:1px solid var(--theme-line,#eddeba);border-radius:15px;width:100%;padding:1rem 1.2rem;margin:.5rem 0 1.4rem}.chapter-reward>span{font-size:2rem;color:var(--theme-gold,#dca53c)}.chapter-reward small,.chapter-reward strong{display:block}.chapter-reward small{font-size:.6rem;letter-spacing:.12em;color:var(--theme-gold,#987329)}.chapter-reward strong{font-size:1.5rem}.chapter-reward p{font-size:.75rem;color:var(--theme-muted,#8a805f);margin:.15rem 0}.chapter-hint{font-size:.7rem;color:var(--theme-muted,#76919a);margin-top:.8rem}.foreign-battle{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.5rem;border:1px solid var(--theme-line,#e4cea0);background:var(--theme-soft,#fff6df);border-radius:18px;margin:1rem 0}.foreign-battle>span{font-size:1.8rem;color:var(--theme-gold,#ad7b28)}.foreign-battle>div{flex:1}.foreign-battle p{margin:.3rem 0;font-size:.85rem}.npc-focus-editor{display:grid;grid-template-columns:minmax(180px,300px) 1fr;gap:1.2rem;padding:1rem;border:1px solid var(--theme-line,#c9e0e4);border-radius:15px;background:var(--theme-surface,#ffffff90)}.npc-focus-editor figure{margin:0;height:180px;position:relative;overflow:hidden;border-radius:12px}.npc-focus-editor img{width:100%;height:100%;object-fit:cover}.npc-focus-editor figcaption{position:absolute;bottom:0;inset-inline:0;padding:1rem;color:white;background:linear-gradient(transparent,#143f4de6)}
.arena .resource{position:relative;margin-bottom:15px}.arena .resource .bar{position:relative;overflow:hidden}.arena .resource.stamina .bar i{background:linear-gradient(90deg,hsl(34 65% var(--stamina-light,58%)),hsl(43 78% calc(var(--stamina-light,58%) + 10%)))}.resource-cost{position:absolute;top:0;height:100%;background:#ffcbd3;z-index:2}.energy .resource-cost{background:#b0eef0}.stamina .resource-cost{background:hsl(var(--exhaustion-hue) 75% 78%)}.resource-after{position:absolute;right:0;bottom:-12px;font-size:8px;color:var(--theme-muted,#627f88);line-height:10px}.critical-resource .bar > i{animation:critical-lp 1.35s ease-in-out infinite}.arena .action-banner{height:29px;min-height:29px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,var(--theme-soft,#e8f6f4),var(--theme-soft,#d6eeec),var(--theme-soft,#e8f6f4));position:relative}.tech-callout{position:relative;display:flex;align-items:center;gap:8px;justify-content:center;width:100%;height:100%;background:linear-gradient(100deg,#134654,#247d87,#134654);color:#f1ffff;font-size:11px;letter-spacing:.04em;overflow:hidden}.tech-callout:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,#b9fff655 48%,transparent 70%);transform:translateX(-100%);animation:callout-sweep 1s ease-out}.callout-icon{width:25px;height:25px;border-radius:6px;flex:none;box-shadow:0 0 8px #9df8ef55}.tech-callout b{max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@keyframes critical-lp{50%{box-shadow:inset 0 0 5px #ffd6dd;filter:brightness(1.25)}}@keyframes campaign-sheen{0%{transform:translateX(-110%);opacity:0}10%{transform:translateX(-84%);opacity:.85}70%{transform:translateX(77%);opacity:.85}85%,100%{transform:translateX(110%);opacity:0}}@keyframes callout-sweep{to{transform:translateX(100%)}}
@media(max-width:700px){.arena-mode-cards,.campaign-stage{grid-template-columns:1fr}.arena-mode-card{padding:1.4rem}.campaign-art{padding:3.5rem 2rem 1.8rem}.campaign-portrait{aspect-ratio:5/4;max-height:260px}.campaign-story{padding:1.5rem}.premium-heading{align-items:flex-start}.premium-heading h2{font-size:1.5rem}.lobby-status{font-size:.65rem;padding:.4rem .6rem}.lobby-controls>button{flex:1}.lobby-leave{margin-left:0}.open-lobby{flex-wrap:wrap}.open-lobby>div{min-width:55%}.foreign-battle{flex-wrap:wrap}.foreign-battle a{margin-left:auto}.npc-focus-editor{grid-template-columns:1fr}.prize-pair{gap:1.3rem}}
@media(prefers-reduced-motion:reduce){.critical-resource .bar > i,.campaign-energy,.tech-callout:after{animation:none}.critical-resource .bar > i{box-shadow:inset 0 0 0 1px #ef7083}.campaign-portrait{transition:none}.campaign-portrait:hover{transform:none}}
.arena.reduced-motion .critical-resource .bar > i,.arena.reduced-motion .tech-callout:after{animation:none}
.vital-track{height:6px;border-radius:8px;background:var(--theme-soft,#e4ecee);overflow:visible;position:relative}.vital-track i{display:block;height:100%;border-radius:8px;transition:width .65s cubic-bezier(.2,.8,.2,1);background:linear-gradient(90deg,#e7637d,#ffa18d)}.vital-energy .vital-track i{background:linear-gradient(90deg,#089bad,#66cfcf)}
@media(prefers-reduced-motion:reduce){.vital-track i{transition:none}}
.arena .command-center{position:relative}.arena .resource .bar{height:6px}.arena .action-banner{min-height:0}.arena.large-battle .action-banner{height:18px;line-height:18px}.arena.large-battle .tech-callout{font-size:8px;gap:5px}.arena.large-battle .callout-icon{width:16px;height:16px}.detail-costs b small{font-size:9px;font-weight:400}
@media(max-width:700px){.foreign-battle>div{flex:1 1 70%}.foreign-battle a{margin-left:0}.arena .resource-label{gap:3px}.arena .resource-label b{white-space:nowrap}}
@media(max-width:820px){.arena.large-battle .team-roster .resource-label b{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px}.arena.large-battle .team-roster .resource-label small.resource-percent{display:inline;font-size:7px;margin:0}.arena .resource{margin-bottom:12px}.arena .resource-after{font-size:7px}.arena .resource-label b{display:flex;flex-wrap:wrap;justify-content:flex-end;white-space:normal}.arena .resource-label small{margin-left:2px}}
@media(max-width:820px){.arena.large-battle .fighter.selected:before{left:3px;right:auto}}
.vital-bars b{position:relative}.vital-animated{display:none;position:absolute;inset:0;white-space:nowrap;text-align:right}.vital-counting .vital-current{visibility:hidden}.vital-counting .vital-animated{display:block}
/* Explicit match formats and complete team lineups. */
.arena-format{display:flex;align-items:end;gap:1rem;width:100%;padding:1rem 0;border-top:1px solid var(--theme-line,#cee2e3)}.arena-format label{display:grid;gap:.5rem;flex:1;font-size:.8rem;color:var(--theme-muted,#527781)}.arena-format select{width:100%;min-height:44px;border:1px solid var(--theme-line,#b6d8db);border-radius:12px;padding:.6rem;background:var(--theme-surface,#fff);color:var(--theme-ink,#173f4d);font:inherit}.arena-format>span{align-self:center;color:var(--theme-accent,#42a9ac);font-size:1.4rem}.format-summary{font-size:.8rem;color:var(--theme-muted,#527781);line-height:1.5}.lobby-format{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1.3rem;margin-top:1.6rem;padding:1rem 1.2rem;background:linear-gradient(110deg,var(--theme-soft,#ddf3f0),var(--theme-surface,#f5faf7));border:1px solid var(--theme-line,#c7e5df);border-radius:14px}.lobby-format strong{font-size:1.1rem}.lobby-format strong span{padding:0 .4rem;color:var(--theme-muted,#60a3a7)}.lobby-format>span{margin-left:auto;color:var(--theme-muted,#347e76);font-size:.85rem}.lobby-format p{width:100%;margin:0;font-size:.8rem;color:var(--theme-muted,#62838a)}.lobby-team{display:flex;flex-direction:column;min-width:0}.lobby-team.is-own-team{border-color:#24a4ac;box-shadow:0 0 0 1px #24a4ac22,0 10px 25px #218d9710}.lobby-team h3 em{display:block;margin-top:.35rem;font-size:.55rem;letter-spacing:.12em;color:var(--theme-accent,#1595a0);font-style:normal}.lobby-team .lobby-fighters{flex:1;align-content:start}.lobby-team .lobby-player img{width:76px;height:98px}.lobby-team .lobby-player>div{min-width:0;padding:.5rem .5rem .5rem 0}.lobby-team .lobby-player strong{overflow-wrap:anywhere}.lobby-team .lobby-player small{margin:.3rem 0 .5rem}.lobby-team .lobby-vacancy{min-height:98px;gap:.2rem}.lobby-team-pick{margin:0 1rem 1rem;min-height:44px;padding:.6rem;border:1px solid var(--theme-line,#add8d9);background:var(--theme-surface,#fff);border-radius:11px;color:var(--theme-ink,#187d87);cursor:pointer;transition:background .2s,box-shadow .2s}.lobby-team-pick:hover:not(:disabled){background:var(--theme-hover,#d9f2ef);box-shadow:0 3px 12px #178c9820}.lobby-team-pick:disabled{cursor:default;color:var(--theme-muted,#708d90);background:var(--theme-soft,#eaf3f2);border-color:var(--theme-line,#d3e5e4)}.lobby-team-pick:focus-visible,.arena-format select:focus-visible{outline:3px solid #1cabb3;outline-offset:3px}.lobby-host-note{font-size:.75rem;line-height:1.5;color:var(--theme-muted,#64838b);margin:1rem 0 0}.premium-lobby{max-width:1600px;margin-inline:auto}.lobby-lineup{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
@media(max-width:600px){.lobby-lineup{gap:1rem;margin:1.3rem 0}.lobby-format{padding:.9rem}.lobby-format>span{margin-left:0}.arena-format{gap:.6rem}.premium-lobby .lobby-controls>button{flex-basis:100%}}

.arena-mode-card.death{background:linear-gradient(140deg,var(--theme-soft,#f9f5ed),var(--theme-soft,#e9f1f2));border-color:var(--theme-line,#c9d5d5)}.arena-mode-card.death .mode-emblem{color:var(--theme-gold,#916f38)}.arena-mode-card.death .training-primary{background:#385962}
@media(min-width:1200px){.arena-mode-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.campaign-opponent-profile{min-width:0;max-width:360px;width:100%;justify-self:center;background:var(--theme-surface,#f4fbfb);border:1px solid var(--theme-line,#c6e0e3);border-radius:18px;overflow:hidden;box-shadow:0 12px 28px #19495718}
.campaign-opponent-profile .campaign-portrait{border-radius:0;box-shadow:none;aspect-ratio:1.45;max-height:260px}
.campaign-opponent-profile .campaign-portrait:hover{transform:none}
.campaign-opponent-profile .opponent-radar{padding-top:8px}
@media(max-width:400px){.combat-cards:has(.encounter-card){grid-template-columns:minmax(0,1fr)}.campaign-art{padding-inline:16px}}
@media(min-width:701px) and (max-height:850px){.encounter-card{gap:8px!important}.encounter-card>button{margin-bottom:14px}.encounter-card .stat-radar{max-width:175px}}
.campaign-opponent-profile{container-type:inline-size}
.campaign-opponent-profile .campaign-portrait figcaption{padding:2rem 12px 12px}
.campaign-opponent-profile .campaign-portrait figcaption strong{font-size:clamp(18px,1.6vw,25px);overflow-wrap:anywhere;line-height:1.2}
@media(min-width:701px) and (max-height:800px){.encounter-card:has(.npc-record){gap:6px!important}}

.campaign-story { position:relative; }
.campaign-admin-navigation { order:0;padding:0;border:0;width:auto;display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-bottom:14px;font-size:12px;color:var(--theme-muted,#547580); }
.campaign-story>.campaign-admin-navigation { position:absolute;top:18px;right:22px; }
.campaign-admin-navigation small { font-size:8px;letter-spacing:1px; }
.campaign-admin-navigation button { width:34px;height:34px;padding:0;border-radius:50%;border:1px solid var(--theme-line,#bddcde);background:var(--theme-soft,#e8f4f2);color:var(--theme-ink,#173c4b);cursor:pointer; }
.campaign-admin-navigation button:disabled { opacity:.35;cursor:default; }
.campaign-admin-navigation button:focus-visible { outline:2px solid var(--theme-accent,#168c95);outline-offset:2px; }
@media(max-width:700px){.campaign-admin-navigation button{width:40px;height:40px;}}

/* Let the chapter breathe at large heights. Long stories scroll in their own
   reading area while title, destination and the primary action remain visible. */
.campaign-stage{height:auto;grid-template-rows:auto;margin:14px 0}
.campaign-art,.campaign-story{min-width:0;min-height:0}
.campaign-stage .campaign-art{padding:22px 24px;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:10px}
.campaign-stage .chapter-seal{position:static;align-self:flex-start}
.campaign-opponents{max-height:clamp(380px,65dvh,640px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--theme-line,#bddcde) transparent}
.campaign-stage .campaign-story{display:flex;flex-direction:column;justify-content:flex-start;gap:12px;align-items:stretch;padding:24px}
.campaign-stage .chapter-heading{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.campaign-stage .chapter-heading>.eyebrow{flex:1 1 170px}
.campaign-stage .chapter-heading>.campaign-admin-navigation{position:static;margin:0 0 0 auto}
.campaign-stage .chapter-heading h2{flex:1 0 100%;min-width:0;font-size:clamp(25px,2.2vw,36px);margin:0;overflow-wrap:anywhere}
.chapter-copy{min-height:0;max-height:clamp(150px,25dvh,300px);overflow:auto;overflow-wrap:anywhere;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--theme-line,#bddcde) transparent;padding-right:.5rem}
.chapter-copy .chapter-description{margin:0}
.chapter-copy:focus-visible,.campaign-opponents:focus-visible{outline:2px solid var(--theme-accent,#168c95);outline-offset:3px;border-radius:4px}
.chapter-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px;align-items:stretch;margin-top:auto}
.campaign-story .chapter-facts{min-height:0;display:grid;gap:10px;align-content:center;padding:10px 0;overflow-wrap:anywhere}
.campaign-story .chapter-facts span{margin-bottom:3px}
.campaign-story .chapter-reward{min-height:0;margin:0;padding:10px 12px;gap:10px}
.campaign-story .chapter-reward strong{font-size:20px}
.campaign-story .chapter-reward>span{font-size:24px}
.campaign-story>.training-primary{align-self:flex-start;max-width:100%;min-height:44px;margin:0}
.campaign-story .chapter-hint{margin:0;line-height:1.4}
@media(min-width:701px) and (max-height:1000px){
 .campaign-stage{grid-template-columns:minmax(250px,.8fr) minmax(320px,1.2fr)}
 .campaign-stage .campaign-story{padding:18px 20px;gap:10px}
 .campaign-stage .campaign-art{padding:18px}
 .campaign-stage .chapter-description{font-size:14px;line-height:1.65}
 .campaign-stage .campaign-opponent-profile .campaign-portrait{max-height:210px}
 .campaign-stage .campaign-opponent-profile .opponent-radar .stat-radar{max-width:160px}
}
@media(max-width:700px){
 .campaign-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
 .campaign-stage .campaign-art{padding:16px}
 .campaign-stage .campaign-story{padding:18px;gap:12px}
 .campaign-opponents{max-height:440px}
 .chapter-copy{max-height:240px}
 .chapter-summary{gap:10px}
 .campaign-story .chapter-reward{padding:10px;gap:7px}
 .campaign-story .chapter-reward>span{display:none}
}

/* Exhaustion grows from zero; only the projected difference is faded. */
.arena .resource.exhaustion .bar{background:var(--theme-line,#dce9e8)}
.arena .resource.exhaustion .bar>i{background:linear-gradient(90deg,hsl(var(--exhaustion-hue) 78% 52%),hsl(var(--exhaustion-hue) 86% 62%))}
.exhaustion-difference{position:absolute;top:0;height:100%;pointer-events:none;z-index:2;background:hsl(var(--exhaustion-hue) 75% 78%)}
.exhaustion-preview.unaffordable{color:var(--theme-danger,#b24748)}
.high-exhaustion>.resource-label>span{color:var(--theme-danger,#b24748)}
@media(forced-colors:active){.exhaustion-difference{background:GrayText}}

/* Keep all cost previews in flow; reserve space on the acting player's card. */
.arena .resource .resource-after{position:static;display:block;min-height:11px;margin-top:4px;text-align:right;font-size:9px;line-height:11px}

/* Mobile fighter cards share preview, stat and effect space on both teams. */
@media(min-width:601px){.arena .fighter:not(.is-me) .resource-after[style*="visibility:hidden"]{display:none}}
@media(max-width:600px){
 .arena:not(.large-battle) .stats{display:flex;gap:12px;font-size:9px;margin:5px 0 0;padding:3px 0 6px}
 .arena:not(.large-battle) .effects,.arena:not(.large-battle) .effects:has(.effects-caption:only-child){display:flex;min-height:32px;box-sizing:border-box;margin-top:4px;padding:2px 0;gap:5px}
 .arena:not(.large-battle) .effects-caption{display:block;font-size:8px}
 .arena:not(.large-battle) .effect{width:28px;height:28px}
 .arena.large-battle .fighter:not(.is-me) .resource-after[style*="visibility:hidden"]{display:none}
}

.touch-preview-hint{display:none}
@media(hover:none) and (pointer:coarse){.touch-preview-hint{display:block;font-size:9px;color:var(--theme-muted,#627f88);margin:4px 0}}

.detail-close{display:none}
@media(max-width:600px){.arena .detail-close{display:block;margin:0 0 8px auto;padding:7px 10px;font-size:11px;color:var(--theme-ink,#173f4d);background:var(--theme-soft,#e8f4f2);border:1px solid var(--theme-line,#bddcde);border-radius:8px}}

/* A held preview must not steal the active finger or trigger hover feedback. */
.arena .tech-detail.touch-preview-open{pointer-events:none}
.arena .touch-preview-open .detail-close{visibility:hidden}

.arena [data-technique-id] button{user-select:none;-webkit-user-select:none}
.arena [data-technique-id] img{-webkit-user-drag:none}

/* Keep the face clear while the caption remains readable. NPC art retains its own crop. */
.arena .player-portrait:after{background:var(--player-portrait-shade,linear-gradient(transparent 50%,#0f3037b8 78%,#0f3037f5))}

/* Player portraits keep the uploaded crop and shared focus in every card format. */

/* Shared compact resource rows; previews never reserve a separate line. */
.arena .fighter .resource{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:5px;row-gap:4px;margin-bottom:9px}
.arena .fighter .resource-label{grid-column:1;grid-row:1;margin:0;min-width:0;align-items:center}
.arena .fighter .resource .bar{grid-column:1/-1;grid-row:2}
.arena .fighter .resource .resource-after{position:static;grid-column:2;grid-row:1;min-height:0;margin:0;align-self:center;white-space:nowrap;font-size:9px;line-height:normal}
.arena .fighter .resource-after[style*="visibility:hidden"]{display:none}
.arena .fighter .resource:has(.resource-after:not([style*="visibility:hidden"])) .resource-max{display:none}
@media(min-width:1101px){.arena.large-battle .fighter:not(.is-me) .resource{margin-bottom:5px}}
@media(max-width:600px){.arena .fighter .resource{margin-bottom:4px;row-gap:2px}.arena .fighter .resource .resource-after{font-size:8px}}

/* Additional combat reserves: gold segment overlays the normal full bar. */
.arena .resource-overcharge{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#e6bc56,#fff0a3);pointer-events:none;z-index:1}

.arena .resource-overcharge-cost{position:absolute;top:0;height:100%;background:#fff0bf;z-index:1;pointer-events:none}

/* Compact journal: one action and its outcomes share a row. */
.arena .log-event{padding:9px 14px;gap:10px;line-height:1.5}
.arena .log-event .tile{width:28px;height:28px;flex-shrink:0}

/* Motion Lab transfer: card surfaces and local effects, existing movement intact. */
.arena .fighter{border-radius:14px;background:var(--theme-surface,#fff);box-shadow:0 6px 22px #1028380a}
.arena .fighter.selected{box-shadow:0 0 0 1px color-mix(in srgb,var(--teal) 25%,transparent);border-width:1px}
.arena .portrait-button{border-radius:13px 13px 0 0}
.arena .fighter .form-line{background:var(--theme-soft,#edf7f6)}
.arena .fighter-body,.arena .compact .fighter-body{padding:14px 16px 12px}
.arena .fighter .effects{min-height:22px;margin-top:8px}
.arena .fighter .stats{padding-bottom:8px}
.arena .fighter .action-banner{position:absolute;left:9px;right:9px;top:9px;height:auto;min-height:0;overflow:visible;justify-content:flex-start;z-index:6;background:none;pointer-events:none;line-height:1.2}
.arena .fighter .action-label-live{display:contents}
.arena .fighter .action-banner[data-action-ready]>.action-label-fallback{display:none}
.arena .fighter.selected .action-banner{right:75px}
.arena .fighter .tech-callout{width:max-content;max-width:100%;height:auto;min-height:32px;padding:5px 9px 5px 5px;gap:7px;border:1px solid #76d4db70;border-radius:8px;background:#0d2938ed;box-shadow:0 4px 16px #071c2a33;color:#e5fbfb;font-size:11px;letter-spacing:0;text-align:left;justify-content:flex-start}
.arena .fighter .tech-callout:after{display:none}
.arena .fighter .callout-icon{width:25px;height:25px;box-shadow:none}
.arena .fighter .tech-callout b{max-width:none;min-width:0}
.arena .floating-number{font-size:clamp(18px,2.5vw,32px);white-space:nowrap;letter-spacing:-.03em}
.arena .arena-portrait-fx{position:absolute;inset:0;margin:auto;width:min(80%,220px);height:100%;z-index:3;pointer-events:none;fill:none;stroke:var(--fx-color,#b0f4f0);stroke-width:1.6;filter:drop-shadow(0 0 5px var(--fx-color,#b0f4f0));animation:portrait-fx 1.1s ease-out both}
.arena .arena-fx-heal{--fx-color:#9bf0c8}.arena .arena-fx-focus{--fx-color:#f4d69b}.arena .arena-fx-impact{--fx-color:#f7cea7}
.arena .fx-shield{fill:#73dada12;stroke-width:2}.arena .fx-mark{stroke-width:1.8}
.arena .fx-ring{transform-origin:center;animation:portrait-ring 1s ease-out both}.arena .fx-inner{opacity:.3;transform-origin:center;animation:portrait-ring 1.1s ease-out both}
.arena .fx-spark{animation:portrait-spark 1s ease-out both;animation-delay:var(--spark-delay)}
@keyframes portrait-fx{0%{opacity:0;scale:.87}18%{opacity:.9;scale:1}65%{opacity:.75}100%{opacity:0;scale:1.05}}
@keyframes portrait-ring{from{scale:.45;opacity:0}20%{opacity:.8}to{scale:1.12;opacity:0}}
@keyframes portrait-spark{from{translate:0 14px;opacity:0}25%{opacity:.9}to{translate:0 -20px;opacity:0}}
.arena .mobile-command-tools{display:none}

/* Compact fighter presentation; battle-workspace.css defines mobile flow and controls. */
@media(max-width:1100px){
 .arena{--arena-chat-gap:0px}
 .game-frame .arena{--arena-chat-gap:44px}
 .arena .battle-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
 .arena .team-column,.arena.large-battle .team-column{max-height:none!important;overflow:visible;scrollbar-gutter:auto;min-width:0}
 .arena .team-roster{grid-template-columns:minmax(0,1fr);gap:12px}
 .arena .command-center{grid-row:2;grid-column:1/-1;overscroll-behavior:contain;scrollbar-width:thin;padding:10px 12px;background:var(--theme-surface,#f6fcfc);border-radius:15px;box-shadow:0 -12px 30px #10283820;scroll-padding-block:10px}
 .arena.is-finished .command-center{position:relative;bottom:auto;max-height:none;overflow:visible}
 .arena .round-header{padding-bottom:6px;gap:8px}.arena .round-header h2{font-size:15px}.arena .round-header h2 span{font-size:21px}.arena .round-header .eyebrow{display:none}.arena .round-state{font-size:10px}.arena .round-state small{font-size:8px;margin-top:2px}
 .arena .target-line{min-height:28px;margin-bottom:6px;padding:4px 8px}.arena .target-line strong{font-size:11px}.arena .target-cross{font-size:16px}
 .arena .tech-heading,.arena .target-line,.arena .routine-feedback,.arena .touch-preview-hint{display:none}
 .arena .mobile-command-tools{display:flex;gap:8px;align-items:center;margin:0 0 7px}
 .arena .mobile-command-tools select{flex:1;min-width:0;width:0;min-height:30px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--theme-soft,#edf7f6);color:var(--ink);font:inherit;font-size:11px}
 .arena .tech-size{gap:3px}.arena .tech-size button{width:26px;height:26px}
 .arena .tech-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;overflow-y:auto;overscroll-behavior:contain;padding:2px}
 .arena .tech-entry{width:100%;max-width:none}
 .arena .tech-title{font-size:9px;min-height:27px}.arena .tech-meta{font-size:7px;min-height:21px}
 .arena .mode-heading{margin-top:12px}.arena .mode-grid{max-height:none}.arena .action-footer{margin-top:9px}
 .arena .action-feedback{font-size:9px;min-height:0;margin:5px 0 0}.arena .touch-preview-hint{font-size:8px;margin-top:3px}
 .arena .tech-detail{display:none}
 .arena .tech-detail.details-open{display:block;position:fixed;z-index:95;top:10dvh;left:50%;transform:translateX(-50%);width:min(440px,calc(100vw - 24px));height:auto;min-height:0;max-height:36dvh;overflow:auto;margin:0;padding:16px;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 45px #12394655}
 .arena .detail-close{display:block;margin:0 0 8px auto;padding:7px 10px;border-radius:7px;background:var(--theme-soft,#edf7f6);color:var(--ink);font-size:11px}
 .arena .fighter,.arena.large-battle .team-roster .fighter{display:block;border-radius:14px;overflow:visible}
 .arena .portrait-button,.arena .compact .portrait-button,.arena.large-battle .team-roster .portrait-button{height:auto!important;aspect-ratio:1.45;border-radius:13px 13px 0 0}
 .arena.large-battle .fighter .player-portrait img,.arena.large-battle .fighter:not(.is-me) .player-portrait img{object-fit:cover!important}
 .arena .portrait-name,.arena.large-battle .team-roster .portrait-name,.arena.large-battle .player-portrait .portrait-name{left:10px;right:48px;bottom:10px;line-height:1.1}
 .arena .portrait-name strong,.arena .compact .portrait-name strong,.arena.large-battle .team-roster .portrait-name strong{font-size:16px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .arena .ki-tag,.arena.large-battle .team-roster .ki-tag{top:auto;right:8px;bottom:11px}.arena .ki-tag b,.arena.large-battle .team-roster .ki-tag b{font-size:12px}
 .arena .fighter-body,.arena .compact .fighter-body,.arena.large-battle .team-roster .fighter-body{padding:10px}
 .arena .fighter .form-line,.arena.large-battle .team-roster .form-line{padding:6px 9px;font-size:8px}
 .arena .fighter .stats,.arena.large-battle .fighter .stats{display:flex;font-size:8px;margin:0;padding:3px 0 7px}
 .arena .fighter .effects{display:flex;min-height:20px;margin-top:6px;padding:0}.arena .fighter .effects:has(.effects-caption:only-child){display:flex}
 .arena .fighter .effects-caption{display:block;font-size:7px}.arena .fighter .effect{width:24px;height:24px}
 .arena .fighter.selected:before,.arena.large-battle .fighter.selected:before{left:auto;right:6px;top:6px;font-size:7px;padding:4px 6px}
 .arena .fighter .action-banner{left:5px;right:5px;top:6px}.arena .fighter.selected .action-banner{right:51px}
 .arena .fighter .tech-callout{font-size:9px;gap:4px;padding:4px;min-height:25px}.arena .fighter .callout-icon{width:19px;height:19px}
 .arena .battle-history{padding-bottom:var(--arena-chat-gap)}
}
@media(max-width:400px){.arena .tech-size span{display:none}.arena .fighter-body,.arena .compact .fighter-body,.arena.large-battle .team-roster .fighter-body{padding:8px}.arena .portrait-name strong,.arena .compact .portrait-name strong,.arena.large-battle .team-roster .portrait-name strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){.arena .arena-portrait-fx{display:none}}
.arena.reduced-motion .arena-portrait-fx{display:none}
.arena .floating-number>span{display:block;text-align:center;line-height:1.18}
.arena .floating-number:has(>span:nth-child(2)){font-size:clamp(15px,2vw,25px)}
.arena .arena-fx-disrupt{--fx-color:#c9b2f4}
.arena .battle-target-picker{display:grid;gap:5px;margin-bottom:10px;font-size:11px;color:var(--muted)}
.arena .battle-target-picker select{width:100%;min-width:0;min-height:34px;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--theme-soft,#edf7f6);color:var(--ink);font:inherit}

@media(max-width:1100px){.arena .battle-target-picker{display:none}}

.arena .log-event .journal-symbol{display:grid;place-items:center;background:var(--surface-soft, #e6f1f2);color:var(--muted, #58747c);font-size:1.2rem}
.arena .log-event .journal-result{font-weight:700}
.arena .log-event .journal-damage{color:var(--theme-danger,#c95b6b)}
.arena .log-event .journal-heal{color:var(--theme-accent,#1d9c81)}

/* A pending mode is a local selection, distinct from an already active mode. */
.arena .mode.pending-mode{outline:2px solid var(--accent,#149eac);outline-offset:2px;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent,#149eac) 15%,transparent)}
.arena .mode.unavailable,.arena .charge-fire.unavailable{filter:grayscale(1);opacity:.5}

.campaign-participation{color:var(--theme-muted,#63818a);font-size:.875rem;line-height:1.6}.lobby-player .campaign-role{margin:.45rem 0;font-weight:600}.campaign-password{margin:0 0 1rem;color:var(--theme-muted,#63818a);font-size:.85rem}.campaign-password summary{cursor:pointer}.campaign-password label{display:grid;gap:.3rem;margin:.65rem 0;max-width:24rem}.campaign-password input{min-width:0;padding:.65rem;border:1px solid var(--theme-line,#bddadd);border-radius:9px;background:var(--theme-surface,#fff);color:var(--theme-ink,#194957)}

.duel-campaign .duel-identity h3{font-size:clamp(1.15rem,1.7vw,1.5rem);overflow-wrap:anywhere}.campaign-join-role{margin-top:.7rem;font-size:.8rem;line-height:1.55}.campaign-join-role strong{color:var(--theme-accent,#237e88)}.campaign-join-role p{margin:.2rem 0 0}.duel-campaign .duel-identity{min-width:0}.lobby-player>div{min-width:0;padding:.5rem .75rem .5rem 0}.lobby-player strong{overflow-wrap:anywhere}

.campaign-group-story .campaign-password{margin:0;padding:0;border:0;min-width:0}.campaign-password input{min-height:44px}
.arena .portrait-name,.arena .ki-tag{color:#fff;text-shadow:0 1px 3px #071e25,0 0 8px #071e2566}
/* Spectators get a balanced matchup, without stretching portraits across half the screen. */
.arena .spectator-motion{background:transparent;border:0;padding:4px 0;color:var(--theme-muted,#587580);font-size:11px;cursor:pointer;text-underline-offset:3px}
.arena .spectator-motion:hover,.arena .spectator-motion:focus-visible{text-decoration:underline;color:var(--theme-ink,#174a56)}
.arena .spectator-roster{grid-template-columns:repeat(auto-fit,minmax(230px,400px));justify-content:center}
.arena .spectator-roster.spectator-duel{grid-template-columns:minmax(0,400px) 112px minmax(0,400px);gap:24px}
.spectator-versus{display:grid;place-items:center;align-self:start;margin-top:130px;position:relative;isolation:isolate;height:80px;color:var(--theme-ink,#174a56);font-size:30px;font-weight:850;font-style:italic;letter-spacing:-2px;text-shadow:0 1px var(--theme-surface,#fff)}
.spectator-versus:before{content:"";position:absolute;width:70px;height:70px;z-index:-1;transform:rotate(45deg);border:1px solid var(--theme-line,#b0d7dd);border-radius:18px;background:linear-gradient(135deg,var(--theme-surface,#fff),var(--theme-soft,#e5f4f0));box-shadow:0 8px 24px #173f4b12,inset 0 0 0 5px var(--theme-surface,#fff)}
.spectator-versus:after{content:"";position:absolute;top:-30px;bottom:-30px;width:1px;z-index:-2;background:linear-gradient(transparent,var(--theme-line,#b0d7dd),transparent)}
.spectator-fighters{display:grid;gap:10px;min-width:0}
.encounter-unavailable .encounter-portrait>img{filter:brightness(.62) saturate(.55)}
.encounter-unavailable .encounter-light{visibility:hidden}
.npc-access-note{font-size:.85rem;color:var(--theme-muted,#587580)}
.npc-travel-option{display:grid;gap:6px}
.npc-travel-option button{width:100%;min-width:0;white-space:normal}
.npc-travel-option small{color:var(--theme-muted,#587580);font-size:.75rem}
@media(max-width:700px){.arena .spectator-roster.spectator-duel{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);grid-template-rows:auto 1fr;gap:0 7px}.arena .spectator-duel>section{display:grid;grid-template-rows:subgrid;grid-row:1 / span 2;row-gap:0;min-width:0}.spectator-duel .spectator-fighters>.fighter:last-child{margin-bottom:0}.spectator-duel>section:first-child{grid-column:1}.spectator-duel>section:last-child{grid-column:3}.spectator-versus{grid-column:2;grid-row:2;align-self:center;height:36px;margin-top:0;font-size:17px;letter-spacing:-1px}.spectator-versus:before{width:32px;height:32px;border-radius:9px;box-shadow:0 4px 12px #173f4b12}.spectator-versus:after{top:-14px;bottom:-14px}.spectator-duel>section>h3 small{display:block;margin:3px 0 0}}

/* Resolved-round playback: local overlays, no layout shifts or locked commands. */
.is-replaying .fighter .resource{position:relative}
.is-replaying .fighter .resource>:not(.playback-resource){visibility:hidden}
.playback-resource{position:absolute;inset:0;pointer-events:none;display:grid;grid-template-columns:inherit;column-gap:inherit;row-gap:inherit;align-content:start}.playback-resource .bar i{transition:width .25s ease-out}.is-fast-forwarding .playback-resource .bar i{transition-duration:45ms}
.playback-overcharge{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#ebbf59,#fff0a0);height:100%}
.arena.is-replaying .fighter.defeated{opacity:1;filter:none}.arena.is-replaying .fighter.defeated .portrait-button{filter:none}
.arena.is-replaying .fighter[data-playback-alive="false"] .portrait-button{filter:grayscale(.8);opacity:.65}
.arena .playback-number{animation:none;z-index:6}.arena .playback-callout{font-size:12px;padding:0 6px}.arena .playback-callout:after{animation-duration:.65s}
.arena.is-replaying .arena-result{position:relative}.arena.is-replaying .arena-result>*{visibility:hidden}.arena.is-replaying .arena-result:after{content:"Die letzte Runde wird wiedergegeben …";position:absolute;inset:30px 15px auto;color:var(--theme-text);font-size:15px}
@media(prefers-reduced-motion:reduce){.playback-resource .bar i{transition:none}}

.arena.is-replaying .fighter[data-playback-alive="true"] .portrait-name strong:after{content:none}
.arena.is-replaying .fighter[data-playback-alive="false"] .portrait-name strong:after{content:" · Besiegt";font-size:12px}

.arena.is-replaying .ki-tag{display:grid}.arena.is-replaying .ki-tag>b{grid-area:2/1}.arena.is-replaying .ki-tag>b:not(.playback-ki){visibility:hidden}
/* Complete historical cards, with Blazor's current controls kept intact underneath. */
.arena .playback-projecting{position:relative;visibility:hidden!important}
.arena .playback-projection{position:absolute!important;inset:0;margin:0!important;visibility:visible!important;min-height:0!important;box-sizing:border-box}
.arena .playback-effect-note{position:absolute;z-index:12;left:10px;right:10px;bottom:45px;padding:12px;border:1px solid #71c4cb;border-radius:10px;background:#102d3ff5;color:#f0ffff;font-size:12px;line-height:1.6;box-shadow:0 8px 28px #07172540;pointer-events:none}
.arena.is-replaying .fighter .effects.playback-projecting{overflow:visible}
.arena .playback-projection.effects{align-items:center;align-content:start;gap:5px;flex-wrap:wrap}
.arena .playback-projection .tile,.arena .playback-projection .tile img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.arena.is-replaying .aura:not(.playback-aura),.arena.is-replaying .aura-lightning:not(.playback-aura),.arena.is-replaying .sparks:not(.playback-aura){visibility:hidden}
.arena.is-replaying .playback-aura{visibility:visible}
.arena.is-replaying .fighter .resource.critical-resource .bar>i{animation:none}
.arena.is-replaying .round-header{position:relative}
.arena.is-replaying .round-header>:not(.playback-round-head){visibility:hidden}
.playback-round-head{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:inherit}
.arena .fighter.playback-attacker{z-index:8;box-shadow:0 0 0 1px #b8f4e6,0 0 0 4px #40c9c626,0 0 32px #48d3dc33,0 18px 34px #061e3445}
.arena.is-replaying .fighter{overflow:visible}
.arena .playback-particles{position:absolute;z-index:9;pointer-events:none;border-radius:inherit}
.arena .playback-shine{position:absolute;inset:-20% auto -20% -20%;width:45%;z-index:4;pointer-events:none;background:linear-gradient(90deg,transparent,#fff8d211,#fffde8bb 48%,#c2fff344 53%,transparent 70%);mix-blend-mode:screen}
.arena .playback-number{font-size:clamp(20px,2.7vw,38px);font-weight:850;letter-spacing:-.04em;text-shadow:0 2px 2px #521c27,0 0 5px #521c27,0 0 20px #f94f6055;z-index:11}
.arena .playback-callout{border-color:#b8e9e4a0;font-size:12px!important;padding:7px 10px!important;min-height:30px;line-height:1.25}
.arena .fighter .tech-callout{transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease,color .35s ease;white-space:normal;overflow-wrap:anywhere}
/* The label stays legible over both pale and dark portraits, while the strong
   action frame fades. No opacity/filter on the portrait or the fighter card. */
.arena .fighter .tech-callout.last-action{background:#10233270;border-color:#c3e9ed18;box-shadow:none;color:#f0f8fac9;text-shadow:0 1px 2px #081623c0}
@media(prefers-reduced-motion:reduce){.arena .fighter .tech-callout{transition:none}}
@media(max-width:1100px){.arena .playback-callout{font-size:9px!important;padding:5px 6px!important;min-height:24px}.arena .playback-number{font-size:22px}.arena .playback-effect-note{left:2px;right:2px;font-size:10px;padding:8px}}
@media(prefers-reduced-motion:reduce){.playback-particles,.playback-shine{display:none}}

/* Stable space for the status row, including activation/expiry during a round. */
.arena .fighter .effects{min-height:38px}
.arena .playback-number .playback-heal{color:#c9ffe6;text-shadow:0 2px 2px #104d40,0 0 5px #104d40,0 0 18px #60ffc477}
.arena .playback-number .playback-energy{color:#d9fbff;text-shadow:0 2px 2px #174b61,0 0 5px #174b61,0 0 18px #60dcff77}
.arena .playback-number .playback-exhaustion{color:#ffe7b5;text-shadow:0 2px 2px #61431c,0 0 5px #61431c}
@media(max-width:1100px){.arena .fighter .effects{min-height:28px}}

/* Battle controls share the round heading; no standalone header or recap strip. */
.arena .command-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.arena .command-top .round-header{flex:1 0 95px;min-width:0;padding:0;align-self:stretch;display:flex;align-items:center}
.arena .command-top .round-header .eyebrow{display:none}
.arena .command-top .round-header h2{font-size:20px;white-space:nowrap;line-height:1.2}
.arena .command-top .round-header h2 span{font-size:28px}
.arena .battle-tools,.battle-playback-controls{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}
.arena .battle-tools{margin-left:auto}
.arena .battle-tools button,.arena .battle-playback-controls button,.arena .surrender-confirmation button{min-height:36px;padding:6px 10px;border:1px solid var(--theme-line,#b7d8df);border-radius:9px;background:var(--theme-soft,#eaf5f4);color:var(--theme-ink,#173d4c);font:inherit;font-size:12px;line-height:1.25;white-space:nowrap;cursor:pointer}
.arena .battle-tools button:hover:not(:disabled),.arena .battle-playback-controls button:hover:not(:disabled){background:var(--theme-hover,#d9f2ef);border-color:var(--theme-accent,#139eac)}
.arena .battle-tools button:focus-visible,.arena .battle-playback-controls button:focus-visible,.arena .surrender-confirmation button:focus-visible{outline:2px solid var(--theme-accent,#139eac);outline-offset:3px}
.arena .battle-tools button:disabled,.arena .battle-playback-controls button:disabled{opacity:.5;cursor:default}
.arena .battle-playback-controls .playback-mode{min-width:100px;display:flex;align-items:center;justify-content:center;gap:6px}
.arena .battle-playback-controls .playback-mode>span{font-size:17px;line-height:1;width:14px}
.arena .battle-playback-controls .playback-skip{visibility:hidden;width:32px;padding:5px;font-size:17px}
.arena.is-replaying .playback-skip{visibility:visible}
.arena .battle-tools .battle-surrender{margin-left:8px;background:transparent;color:var(--theme-muted,#587580)}
.arena .battle-tools .battle-surrender:hover{color:var(--theme-danger,#ac4358);border-color:currentColor}
.playback-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.arena .command-status{margin:0 0 12px}
.arena .command-status .round-state{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:11px;text-align:left}
.arena .command-status .round-state small{display:inline;max-width:none;margin:0 0 0 auto;font-size:10px}
.arena .command-center>.action-feedback{min-height:0;margin:0 0 10px;font-size:12px}
.arena .surrender-confirmation{padding:12px;margin:0 0 12px;background:var(--theme-soft,#eaf5f4);border:1px solid var(--theme-line,#b7d8df);border-radius:10px;font-size:12px;line-height:1.5}
.arena .surrender-confirmation p{margin:0 0 10px}
.arena .surrender-confirmation>div{display:flex;flex-wrap:wrap;gap:8px}
.arena .surrender-confirmation .surrender-confirm{color:var(--theme-danger,#ac4358);border-color:currentColor}
.arena .spectator-summary{flex-wrap:wrap}
.arena .spectator-summary .battle-playback-controls{margin-left:auto}
@media(max-width:1100px){
 .arena .command-top{gap:6px;margin-bottom:5px}
 .arena .command-top .round-header h2{font-size:16px}.arena .command-top .round-header h2 span{font-size:23px}
 .arena .command-status{margin-bottom:7px}.arena .command-status .round-state{font-size:10px}.arena .command-status .round-state small{font-size:9px}
}
@media(pointer:coarse){.arena .battle-tools button,.arena .battle-playback-controls button,.arena .surrender-confirmation button{min-height:44px}.arena .battle-playback-controls .playback-skip{width:44px}}

/* Technique workspace: clear effects, fluid tiles, independent account preferences. */
.arena .tech-detail{height:auto;min-height:162px;max-height:none;overflow:visible;padding:14px 16px;scrollbar-gutter:auto}
.arena .tech-detail:before{display:none}
.arena .summary-heading{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.arena .summary-title{display:flex;align-items:center;gap:6px;min-width:0}
.arena .summary-hint-slot{flex:0 0 24px;align-self:center;width:24px;height:24px}
.arena .summary-hint-button{display:grid;place-items:center;width:24px;height:24px;padding:2px;border:1px solid #afd5da66;border-radius:50%;background:#ffffff0a;color:#b4eeed;cursor:help}
.arena .summary-hint-button.is-warning{color:#ffe0a4;border-color:#ffe0a466}
.arena .summary-hint-button:hover,.arena .summary-hint-button[aria-expanded=true]{background:#ffffff16}
.arena .summary-hint-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.arena .summary-hint{position:absolute;z-index:5;top:100%;left:0;box-sizing:border-box;width:min(340px,100%);padding:10px 12px;border:1px solid #ffe0a477;border-radius:9px;background:#102c40;color:#fff0d5;box-shadow:0 8px 24px #00121f55;font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.arena .summary-hint[hidden]{display:none}
.arena .summary-heading h3{font-size:17px;line-height:1.3;margin:0;overflow-wrap:anywhere}
.arena .summary-speed{font-size:11px;white-space:nowrap;color:#d1edf0}
.arena .summary-costs{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:12px;padding-bottom:9px;border-bottom:1px solid #ffffff24;color:#e5f3f5}
.arena .summary-costs b{color:#fff}.arena .summary-label{color:#afd5da;font-size:11px}.arena .summary-cooldown{margin-left:auto}
.arena .summary-effects{display:grid;gap:5px;margin-top:9px;font-size:12px;line-height:1.45;color:#f1f9fa}
.arena .summary-effect{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px}
.arena .summary-effect>strong{font-size:11px;color:#8be3df}.arena .summary-duration{color:#cee0e5}
.arena .tech-detail p.summary-charge{margin:7px 0 0;max-width:none;font-size:11px;line-height:1.4}
.arena .summary-more{margin-top:8px;border:0;padding:0;color:#bed8df;font-size:11px}
.arena .summary-more summary{cursor:pointer;width:fit-content;padding:2px 0}.arena .summary-more p{max-width:none;margin:8px 0 0;font-size:12px}
.arena .tech-heading{margin:12px 0 8px;gap:8px}.arena .tech-heading h3{font-size:13px;margin:0}
.arena .tech-display-controls{display:flex;align-items:center;gap:10px}
.arena .tech-names-toggle{display:flex;align-items:center;gap:5px;min-height:30px;padding:4px 7px;font-size:11px;border:1px solid var(--line);border-radius:7px;background:var(--theme-soft,#edf7f6);color:var(--ink)}
.arena .tech-names-toggle[aria-pressed=true]{border-color:var(--accent,#149eac);background:color-mix(in srgb,var(--accent,#149eac) 12%,var(--theme-soft,#edf7f6))}
.arena .tech-size{gap:5px}.arena .tech-size span{display:inline-block;min-width:24px;font-size:10px}.arena .tech-size button{width:30px;height:30px}
.arena .tech-grid{grid-template-columns:repeat(auto-fill,minmax(max(44px,calc(var(--tech-size) * .9)),1fr));gap:6px;max-height:clamp(300px,calc(100dvh - 405px),760px);overflow-y:auto;overflow-x:hidden;scrollbar-gutter:auto;align-items:start;padding:2px}
/* Cap stretching at the chosen size: the next step's minimum is larger.
   Equal column counts therefore cannot collapse L and XL (or other steps). */
.arena .tech-entry{width:100%;max-width:var(--tech-size);min-width:0;justify-self:center}
.arena .tech-image{display:block;position:relative;aspect-ratio:1;overflow:hidden;border-radius:inherit}
.arena .tech-image .tile{display:block}.arena .tech-image .cooldown{inset:0;z-index:2;border-radius:0}
.arena .tech-speed,.arena .tech-energy{position:absolute;background:#102c40ed;border:1px solid #b8d9df55;color:#fff;border-radius:4px;font-variant-numeric:tabular-nums;line-height:1.25;white-space:nowrap;pointer-events:none}
.arena .tech-speed{top:4px;right:4px;font-size:9px;padding:2px 3px}
.arena .tech-energy{bottom:3px;left:3px;font-size:10px;font-weight:650;padding:2px 4px;max-width:calc(100% - 6px)}
.arena .tech-energy small{font-size:8px;font-weight:400;margin-left:2px}
.arena .tech-entry .tech-title{display:block;font-size:10px;line-height:1.25;min-height:30px;padding:5px 4px 0;white-space:normal;overflow-wrap:normal;word-break:normal}
/* Wrap at words; a word wider than the chosen image size is ellipsized instead
   of leaving a single letter on another line. Full names remain in the existing
   focus/touch preview and accessible button label. */
.arena .tech-name-lines{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;height:2.5em}
.arena .tech-name-word{display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:top}
.arena .tech-entry .tech-meta{font-size:9px;line-height:1.3;min-height:0;padding:3px 4px 5px}
.arena[data-tech-names=hidden] .tech-title,.arena[data-tech-names=hidden] .tech-meta:not(.tech-charge-meta){display:none}
.arena:is([data-tech-size=XS],[data-tech-size=XXS]) .tech-entry .tech-title{font-size:9px;min-height:28px;padding:4px 3px 0}
.arena:is([data-tech-size=XS],[data-tech-size=XXS]) .tech-entry .tech-meta:not(.tech-charge-meta){display:none}
.arena[data-tech-size=XXS] .tech-speed{top:2px;right:2px;font-size:8px;padding:1px 2px}
.arena[data-tech-size=XXS] .tech-energy{bottom:2px;left:2px;padding:1px 2px;font-size:9px;letter-spacing:-.15px}
.arena[data-tech-size=XXS] .tech-energy small{font-size:7px;margin-left:1px}
.arena[data-tech-size=XXS] .cooldown{font-size:8px}.arena[data-tech-size=XXS] .cooldown b{font-size:19px}
@media(max-width:1100px){
 .arena .tech-heading{display:flex;margin:6px 0}.arena .tech-heading h3{font-size:12px}
 .arena .tech-display-controls{gap:5px}.arena .names-label{display:none}
 .arena .tech-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,max(44px,calc(var(--tech-size) * .9))),1fr));gap:5px}
 .arena .tech-detail{display:none;min-height:0}
 .arena .tech-detail.details-open{display:block;height:auto;min-height:0;max-height:50dvh;overflow:auto}
 .arena .summary-effect{grid-template-columns:76px minmax(0,1fr);gap:6px}
}
@media(pointer:coarse){.arena .tech-names-toggle,.arena .tech-size button{min-width:44px;min-height:44px}.arena .summary-hint-slot,.arena .summary-hint-button{width:44px;height:44px}.arena .summary-hint-slot{flex-basis:44px}}