/* Reuse original art and nine-slice dimensions without modifying offline CSS. */
.in-arena{background:#0d1511}.in-arena header{padding:5px 12px}.in-arena header h1{font-size:16px}.in-arena .eyebrow{font-size:8px}.in-arena main{max-width:none;margin:0;padding:0}.in-arena footer{display:none}.in-arena .room-bar{margin:0;padding:3px 10px;min-height:35px}.in-arena .room-bar button{min-height:30px;font-size:11px;padding:4px 8px}.live-battle{position:relative;isolation:isolate;min-height:390px;height:calc(100dvh - 88px);overflow:hidden;background:#0d1511 url('../assets/optimized/assets/arenas/central/arena-central-background.webp') center 30%/cover no-repeat}.arena-stage{position:absolute;width:min(100%,calc((100dvh - 80px)*2.2));aspect-ratio:2;left:50%;top:50%;transform:translate(-50%,-50%)}.arena-platform{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.live-board{position:absolute;left:14%;top:14%;width:72%;height:72%;max-height:none;overflow:visible}.live-board .tile,.live-board .tile:nth-child(odd){fill:transparent;stroke:#a4b47b99;stroke-width:.8}.live-board .tile.obstacle{fill:#465441bb;stroke:#c7cebf}.live-board .tile.zone{fill:#477d9188;stroke:#92d8ff;stroke-width:1.5}.live-board .tile.reachable{fill:#3e8d7088;stroke:#8de5c0;stroke-width:1.2}.live-board .tile.route{fill:#a9954899;stroke:#ffcf66;stroke-width:1.6}.live-board .tile.destination{fill:#d5b45bcc;stroke:#fff0bc;stroke-width:2}.live-board .trail{stroke:#ffda78;stroke-width:3}.live-board .champion-piece{filter:drop-shadow(0 2px 2px #0009)}.live-round,.live-roster,.live-command{position:absolute;z-index:3;color:#f4eedc;text-shadow:0 1px 2px #000}.live-round{top:12px;left:50%;transform:translateX(-50%);min-width:230px;display:flex;align-items:center;justify-content:center;gap:14px;padding:3px 25px;border:9px solid transparent;border-image:url('../../assets/ui/hud/round/hud-round-horizontal@2x.png') 18 84 18 84 fill stretch;border-image-width:9px 42px;font-size:12px}.live-round:before{content:'';position:absolute;top:-19px;left:calc(50% - 13px);width:26px;height:26px;background:url('../../assets/ui/hud/round/hud-round-emblem@2x.png') center/contain no-repeat}.live-round .timer{font-size:24px}.live-round strong{white-space:nowrap}.live-roster{top:68px;width:155px;border:14px solid transparent;border-image-repeat:stretch;filter:drop-shadow(0 3px 5px #0008)}.live-roster.own{left:10px;border-image-source:url('../../assets/ui/hud/team/team-panel-vertical-blue.png');border-image-slice:185 95 150 95 fill}.live-roster.rival{right:10px;border-image-source:url('../../assets/ui/hud/team/team-panel-vertical-red.png');border-image-slice:170 86 138 86 fill}.live-roster h2{font-size:11px;text-align:center;margin:-2px -5px 8px;padding:8px 4px;background:center/100% 100% no-repeat}.live-roster.own h2{background-image:url('../../assets/ui/hud/team/team-header-blue.png')}.live-roster.rival h2{background-image:url('../../assets/ui/hud/team/team-header-red.png')}.roster-entry{display:flex;gap:6px;align-items:center;padding:6px;background:#071a2ac9;border:1px solid #64c6f266;border-radius:6px}.rival .roster-entry{background:#32080dcc;border-color:#f18b8366}.roster-entry.active{outline:1px solid #ffcf66}.roster-entry img{width:32px;height:32px;border-radius:50%;object-fit:cover}.roster-entry strong{font-size:12px;display:block}.roster-entry small,.roster-entry span{font-size:10px;display:block}.roster-entry meter{width:100%;height:8px}.live-command{bottom:10px;left:50%;transform:translateX(-50%);width:min(660px,calc(100% - 28px));padding:7px 18px;border:18px solid transparent;border-image:url('../../assets/ui/hud/bottom/bottom-panel-base-horizontal.png') 78 185 78 185 fill stretch}.live-command .board-note{min-height:0;margin:0 0 5px;text-align:center;font-size:12px;color:#f5dfa1}.command-controls{display:flex;align-items:center;justify-content:center;gap:14px}.live-action{min-height:40px;padding:5px 14px;color:#f7f0dc;background:transparent;border:9px solid transparent;border-image:url('../../assets/ui/hud/bottom/action-button-secondary-gold.png') 46 62 46 62 fill stretch;border-radius:0;line-height:1;font-size:12px;text-shadow:0 1px 2px #000}.end-action{border-image-source:url('../../assets/ui/hud/bottom/action-button-end-turn.png')}.move-action{padding:6px 18px;border:9px solid transparent;border-image:url('../../assets/ui/hud/bottom/action-button-move.png') 44 62 44 62 fill stretch;font-size:12px;line-height:1;display:flex;align-items:center;gap:12px}.move-action span{color:#ffcf66}.live-command .phase-text{font-size:10px;max-width:140px}.live-action:disabled{opacity:.5}
@media(max-height:500px) and (orientation:landscape){.live-battle{min-height:0;height:calc(100dvh - 78px)}.live-round{top:6px;padding:0 20px}.live-roster{top:50px;width:133px;border-width:10px}.live-roster.own{left:6px}.live-roster.rival{right:6px}.roster-entry{display:block;padding:4px;text-align:center}.roster-entry img{width:28px;height:28px}.live-roster h2{padding:4px}.live-command{bottom:3px;padding:2px 12px;border-width:12px}.live-command .board-note{font-size:10px;margin-bottom:2px}.live-action{min-height:35px;font-size:11px}.move-action{font-size:10px;padding:4px 14px}.live-round .timer{font-size:20px}.arena-stage{width:min(100%,calc((100dvh - 60px)*2.3))}}
@media(orientation:portrait){.live-battle{min-height:550px;height:calc(100dvh - 110px)}.live-roster{top:58px;width:145px}.arena-stage{width:135%;top:49%}.live-round{top:15px}.live-command{bottom:14px}.command-controls{gap:6px;flex-wrap:wrap}.live-command .phase-text{max-width:none}.live-battle .live-roster{pointer-events:none}}

.hud-fold{position:absolute;right:-8px;top:-17px;min-height:24px;width:26px;padding:0;color:#efd98c;background:#13221b;border:1px solid #ad9352;font-size:18px}.live-command.collapsed{left:auto;right:8px;transform:none;width:auto;padding:0 8px}.live-command.collapsed .board-note,.live-command.collapsed .phase-text,.live-command.collapsed .move-action{display:none}.live-command.collapsed .command-controls{gap:4px}
/* Compact frame: the original full panel contains painted slots, so it cannot
   serve as a stretchable shell for this smaller set of controls. */
.live-command{width:min(520px,calc(100% - 24px));padding:6px 10px;border:10px solid transparent;border-image:url('../../assets/ui/hud/bottom/bottom-panel-champion-card.png') 48 48 48 48 fill stretch;background:#071a2ae8}
.live-command .board-note{font-size:11px;line-height:1.25}.command-controls{display:grid;grid-template-columns:auto auto minmax(90px,1fr);gap:8px}.live-command .phase-text{max-width:none;line-height:1.2}.live-action,.move-action{min-height:36px;white-space:nowrap}.live-command.collapsed{width:auto}.live-command.collapsed .command-controls{display:flex}.hud-fold{top:-17px;right:-10px}
@media(orientation:landscape){.live-roster{width:140px}.roster-entry{display:flex;text-align:left}.roster-entry img{width:27px;height:27px}.roster-entry strong{font-size:11px}.roster-entry small{font-size:9px}.roster-entry span{font-size:9px}.live-command{bottom:5px}}
@media(orientation:landscape) and (max-height:500px){.live-roster{top:43px;width:115px;border-width:8px}.live-roster h2{font-size:9px;margin:0 -3px 3px;padding:3px}.roster-entry{gap:4px;padding:3px}.roster-entry img{width:23px;height:23px}.roster-entry strong{font-size:10px}.roster-entry small{display:none}.roster-entry span{font-size:8px}.live-command{padding:3px 8px;border-width:8px;width:min(470px,calc(100% - 24px))}.live-command .board-note{font-size:9px;margin-bottom:3px}.live-action,.move-action{min-height:30px;padding:3px 8px;border-width:6px;font-size:10px}.live-command .phase-text{font-size:8px}.live-round{top:5px;min-width:190px;font-size:10px;padding:0 14px;border-width:7px}.live-round .timer{font-size:18px}}
@media(orientation:landscape) and (max-height:300px){.in-arena header{padding:2px 8px}.in-arena header h1{font-size:12px}.in-arena header>span{font-size:10px}.live-battle{height:calc(100dvh - 35px)}.in-arena:has(.room-bar) .live-battle{height:calc(100dvh - 68px)}.live-round{top:3px}.live-roster{top:38px;width:100px}.roster-entry img{display:none}.live-command .phase-text{display:none}.command-controls{grid-template-columns:auto auto;justify-content:center}.live-command{width:min(400px,calc(100% - 220px))}.arena-stage{top:45%;width:min(calc(100% - 170px),calc((100dvh - 50px)*2.8))}}
@media(orientation:portrait){.live-roster{top:64px;width:126px}.roster-entry{display:flex}.live-roster h2{font-size:10px}.roster-entry img{width:25px;height:25px}.live-command{width:calc(100% - 30px);bottom:10px}.command-controls{grid-template-columns:1fr 1fr;gap:6px}.live-command .phase-text{grid-column:1/-1;text-align:center}.live-command .board-note{font-size:10px}.live-action,.move-action{font-size:11px;min-height:38px;justify-content:center}}

/* Combat information uses confirmed state, never preview damage. */
.turn-order{position:absolute;z-index:4;top:56px;left:50%;transform:translateX(-50%);display:flex;gap:4px;margin:0;padding:3px 5px;list-style:none;background:#071a2ad9;border:1px solid #a38b48;border-radius:5px;max-width:46%;overflow-x:auto}.turn-order li{display:flex;align-items:center;gap:3px;padding:2px;border:1px solid transparent;font-size:9px;flex-shrink:0}.turn-order li.current{border-color:#ffcf66;background:#3b341c}.turn-order img{width:21px;height:21px;border-radius:50%}.piece-health{pointer-events:none}.piece-health .health-track{fill:#091515;stroke:#d4dfb5;stroke-width:.5}.piece-health .health-fill{fill:#53a765}.piece-health text{fill:white;stroke:#07100d;stroke-width:.7;paint-order:stroke;text-anchor:middle;font:bold 9px sans-serif}.piece-health .piece-status{font-size:7px;fill:#ffe1a3}.active-champion{display:flex;align-items:center;gap:7px;margin-bottom:4px}.active-champion>img{width:34px;height:34px;border-radius:50%;border:1px solid #cfb05b}.active-details{flex:1;min-width:0;font-size:10px}.active-details>strong{font-size:11px}.active-life{display:flex;gap:6px;align-items:center}.active-life meter{width:100%;height:10px;flex:1}.active-life span{white-space:nowrap}.active-resources{display:flex;gap:12px;color:#ead89b}.active-details small{font-size:9px}.combat-skills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-bottom:5px}.combat-skill{min-height:29px;padding:3px;color:#d8ceb7;background:#162a36;border:1px solid #917a45;border-radius:3px;font-size:9px;line-height:1.15;opacity:.75}.live-command.collapsed .active-champion,.live-command.collapsed .combat-skills{display:none}
@media(orientation:landscape) and (max-height:500px){.turn-order{top:38px;padding:1px 4px}.turn-order img{width:17px;height:17px}.turn-order li{font-size:8px;padding:1px}.active-champion{gap:4px;margin-bottom:2px}.active-champion>img{width:24px;height:24px}.active-details,.active-details>strong{font-size:9px}.active-resources{gap:8px}.active-life meter{height:7px}.combat-skill{min-height:22px;font-size:8px;padding:2px}.combat-skills{margin-bottom:3px}.live-command .board-note{margin-bottom:2px}}
@media(orientation:landscape) and (max-height:300px){.active-details>strong{display:none}.active-champion>img{width:20px;height:20px}.active-champion{margin-bottom:1px}.active-details{font-size:8px}.combat-skill{font-size:7px;min-height:20px}.combat-skills{margin-bottom:2px}.live-command .board-note{font-size:8px}.live-action,.move-action{min-height:25px}.live-command{padding:2px 6px}.turn-order{top:34px}}
@media(orientation:portrait){.turn-order{top:62px}.live-roster{top:98px}.active-champion>img{width:34px;height:34px}.combat-skill{font-size:9px;min-height:32px}}

/* Reference layout: one top frame; card, four skills and actions in one row. */
.live-round{width:min(680px,calc(100% - 150px));min-width:0;justify-content:flex-start;gap:12px;padding:4px 22px}.round-summary{display:flex;align-items:center;gap:9px;white-space:nowrap}.live-round .turn-order{position:static;transform:none;top:auto;left:auto;max-width:none;flex:1;border:0;border-left:1px solid #9c8b56;border-radius:0;background:transparent;padding:0 0 0 8px}.turn-order li{min-width:76px;flex:1;font-size:10px;background:#273b3899;border-color:#897e50;border-radius:5px;padding:3px}.turn-order img{width:25px;height:25px}.turn-order small{font-size:8px;display:block;opacity:.8}.turn-order li.current{background:#6a5e3299;border-color:#ffd568}.live-roster{top:auto;bottom:124px;width:180px;border-width:12px}.live-roster.own{border-image-source:url('../../assets/ui/hud/team/team-panel-horizontal-blue.png');border-image-slice:72 64 60 64 fill}.live-roster.rival{border-image-source:url('../../assets/ui/hud/team/team-panel-horizontal-red.png');border-image-slice:66 66 56 66 fill}.live-roster h2{margin:0 -4px 4px;padding:4px;font-size:10px}.roster-entry{display:flex;text-align:left}.roster-entry img{display:block;width:34px;height:34px}.roster-entry small{display:none}.roster-entry strong{font-size:11px}.roster-entry span{font-size:9px}.live-command{width:min(820px,calc(100% - 34px));padding:4px 8px;background:#061523e8;bottom:9px}.command-main{display:grid;grid-template-columns:minmax(140px,1.2fr) minmax(0,2.5fr) minmax(90px,.6fr);gap:6px;align-items:stretch}.active-champion{margin:0;padding:5px;border:6px solid transparent;border-image:url('../../assets/ui/hud/bottom/bottom-panel-champion-card.png') 48 48 48 48 fill stretch}.active-champion>img{width:40px;height:40px}.active-details>strong{display:block;font-size:10px}.active-details{font-size:9px}.active-resources{gap:6px;flex-wrap:wrap}.active-life{gap:3px;flex-wrap:wrap}.active-life meter{min-width:50px}.combat-skills{margin:0;gap:4px}.combat-skill{display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:74px;padding:5px 6px;border:0;border-radius:0;background:transparent url('../../assets/ui/hud/bottom/skill-slot-normal.png') center/100% 100% no-repeat;opacity:.8;color:#e9e2cf}.skill-meta{display:flex;justify-content:space-between;gap:3px;width:100%;font-size:8px;color:#e3d192}.skill-symbol{font-size:26px;line-height:1.1}.skill-name{font-size:9px;line-height:1.1}.command-controls{display:flex;flex-direction:column;justify-content:center;gap:4px}.move-action,.live-action{justify-content:center;min-height:32px;font-size:10px;padding:3px 5px;border-width:6px}.move-action{gap:5px}.command-feedback{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:3px}.live-command .board-note{font-size:9px;margin:0;text-align:left}.live-command .phase-text{font-size:8px;text-align:right;white-space:nowrap}.live-command.collapsed .command-main{display:block}.live-command.collapsed .command-feedback{display:none}.live-command.collapsed .command-controls{display:flex}.live-command.collapsed .active-champion,.live-command.collapsed .combat-skills{display:none}
@media(orientation:landscape) and (max-height:500px){.live-round{top:4px;width:min(620px,calc(100% - 100px));padding:2px 17px;font-size:10px;gap:7px}.live-round .timer{font-size:18px}.turn-order li{min-width:66px;font-size:9px;padding:2px}.turn-order img{width:19px;height:19px}.live-roster{top:auto;bottom:106px;width:150px;border-width:9px}.roster-entry img{width:27px;height:27px}.live-command{width:min(710px,calc(100% - 24px));bottom:4px;padding:3px 5px;border-width:8px}.command-main{grid-template-columns:minmax(125px,1.2fr) minmax(0,2.6fr) minmax(78px,.65fr);gap:4px}.active-champion{padding:3px;border-width:5px;gap:4px}.active-champion>img{width:29px;height:29px}.active-details>strong{font-size:9px}.active-details{font-size:8px}.combat-skill{min-height:58px;padding:4px}.skill-symbol{font-size:22px}.skill-meta{font-size:7px}.skill-name{font-size:8px}.move-action,.live-action{min-height:27px;font-size:9px;padding:2px 4px}.live-command .board-note{font-size:8px}.live-command .phase-text{font-size:7px}}
@media(orientation:landscape) and (max-height:300px){.live-roster{bottom:91px;width:126px;border-width:7px}.live-roster h2{font-size:8px;padding:2px;margin-bottom:2px}.roster-entry{padding:2px;gap:3px}.roster-entry img{width:23px;height:23px}.roster-entry strong{font-size:9px}.roster-entry span{font-size:7px}.live-command{width:min(610px,calc(100% - 22px));padding:2px 4px}.command-main{grid-template-columns:minmax(110px,1.25fr) minmax(0,2.65fr) minmax(67px,.7fr);gap:3px}.active-champion>img{width:24px;height:24px}.active-details>strong{display:block;font-size:8px}.active-details{font-size:7px}.active-life meter{height:5px}.active-resources{gap:4px}.combat-skill{min-height:48px;padding:3px}.skill-symbol{font-size:18px}.skill-name{font-size:7px}.skill-meta{font-size:6px}.move-action,.live-action{min-height:23px;font-size:8px;border-width:5px}.live-command .board-note{font-size:7px}.command-feedback .phase-text{display:none}.arena-stage{width:min(100%,calc((100dvh - 50px)*2.8));top:48%}}
@media(orientation:portrait){.live-round{width:calc(100% - 38px);flex-wrap:wrap;justify-content:center;padding:4px 12px;gap:3px}.round-summary{justify-content:center}.live-round .turn-order{flex-basis:100%;border:0;padding:0;max-width:100%;justify-content:center}.live-roster{top:105px;bottom:auto;width:126px;border-width:8px}.roster-entry img{width:23px;height:23px}.live-command{width:calc(100% - 24px);padding:4px 6px;bottom:8px}.command-main{grid-template-columns:minmax(0,1fr) 80px;gap:5px}.active-champion{grid-column:1/-1;padding:3px}.active-champion>img{width:32px;height:32px}.active-details>strong{font-size:10px}.combat-skills{grid-column:1;gap:2px}.combat-skill{min-height:63px;padding:4px 3px}.skill-symbol{font-size:22px}.skill-meta{font-size:6px;gap:2px}.skill-name{font-size:7px}.command-controls{grid-column:2}.command-feedback{display:block}.live-command .board-note{font-size:8px;text-align:center}.live-command .phase-text{display:block;text-align:center;font-size:7px;white-space:normal}.live-command.collapsed .command-main{display:block}}

/* Disabled skills stay readable; disabled affects input, not the information. */
.combat-skill:disabled{opacity:.88;color:#f7edcc;filter:saturate(.75)}.skill-meta b{margin-left:auto}.skill-name{color:#fff0cb;text-shadow:0 1px 2px #000}

/* Compact height first; keep the width close to the validated HUD. */
.live-command{width:min(790px,calc(100% - 40px));padding:2px 6px}
.active-champion{padding:2px;border-width:4px}.active-champion>img{width:34px;height:34px}
.combat-skill{min-height:60px;padding:3px 4px}.skill-symbol{font-size:23px}
.command-feedback{margin-top:1px;gap:5px}.live-command .board-note{line-height:1.1}
@media(orientation:landscape) and (max-height:500px){
.live-command{width:min(680px,calc(100% - 30px));padding:1px 4px;border-width:6px}
.active-champion{padding:1px;border-width:3px}.active-champion>img{width:27px;height:27px}
.combat-skill{min-height:46px;padding:2px 3px}.skill-symbol{font-size:19px}
.command-controls{gap:2px}.move-action,.live-action{min-height:27px;border-width:5px}
}
@media(orientation:landscape) and (max-height:300px){
.live-command{width:min(590px,calc(100% - 28px));padding:1px 3px;border-width:5px}
.active-champion>img{width:23px;height:23px}.combat-skill{min-height:40px;padding:2px}
.skill-symbol{font-size:16px}.move-action,.live-action{min-height:23px;border-width:4px}
}
@media(orientation:portrait){
.live-command{width:calc(100% - 32px);padding:2px 4px;border-width:7px}
.command-main{gap:3px}.active-champion{padding:1px 3px;border-width:3px}
.active-champion>img{width:29px;height:29px}
.active-details{display:flex;align-items:center;flex-wrap:wrap;column-gap:7px;row-gap:0}
.active-details>strong{font-size:10px}.active-life{flex:1;min-width:95px}
.active-resources{gap:7px}.active-details small{font-size:8px}
.combat-skill{min-height:49px;padding:2px 3px}.skill-symbol{font-size:19px}
.command-controls{gap:2px}.move-action,.live-action{min-height:32px;border-width:5px}
.command-feedback{margin-top:1px}.live-command .phase-text{line-height:1.1}
}

.live-board .tile.ability-target{fill:#ad443b99;stroke:#ffc18b;stroke-width:2}.live-board .tile.ability-selected{fill:#ed9844bb;stroke:#fff0bc;stroke-width:2.5}.combat-skill.selected-skill{outline:2px solid #ffdc77;outline-offset:-3px}.move-action[role=button]{cursor:pointer}

/* Full skill range, LOS blockers and actual single-cell effect preview. */
.live-board .tile.ability-range{fill:#2d6fb388;stroke:#72c9ff;stroke-width:1.5}
.live-board .tile.ability-range.ability-blocked{fill:#40566d99;stroke:#8daac3;stroke-width:1.2;stroke-dasharray:4 3}
.live-board .tile.ability-range.ability-target{fill:#ad443b99;stroke:#ffc18b;stroke-width:2}
.live-board .tile.ability-range.ability-effect{fill:#ed9844bb;stroke:#fff0bc;stroke-width:2.5;stroke-dasharray:none}
.range-legend{display:inline-flex;gap:6px;flex-wrap:wrap;font-size:9px;margin-right:6px}
.range-legend span:before{content:'';display:inline-block;width:7px;height:7px;margin-right:3px;border:1px solid currentColor;vertical-align:middle}
.range-key{color:#72c9ff}.range-key:before{background:#2d6fb3}.blocked-key{color:#8daac3}.blocked-key:before{background:#40566d;border-style:dashed!important}.target-key{color:#ffc18b}.target-key:before{background:#ad443b}.effect-key{color:#fff0bc}.effect-key:before{background:#ed9844}

.live-board .tile.forced-destination{fill:#8856bbaa;stroke:#d6adff;stroke-width:2.5;stroke-dasharray:3 2}
.live-board .forced-trail{fill:none;stroke:#d6adff;stroke-width:3;pointer-events:none}

.pillar-piece{pointer-events:none}.pillar-piece text{fill:#fff;stroke:#142018;stroke-width:3;paint-order:stroke;font-size:9px;font-weight:bold}
.pillar-action{font-size:9px;padding:2px 4px;min-height:20px}

.live-command .pillar-action{position:absolute;right:8px;bottom:calc(100% + 4px);min-height:24px;padding:2px 7px;font-size:9px}

.arena-obstacle{pointer-events:none}.arena-obstacle image{filter:drop-shadow(0 1px 1px #0006)}

.coloso-options{position:relative;font-size:11px}.coloso-options summary{cursor:pointer;padding:4px;background:#172e24;border:1px solid #d6b15a;border-radius:5px}.coloso-options[open]{position:absolute;right:0;bottom:100%;z-index:5;background:#091a14;padding:6px;max-width:180px}.coloso-options button{display:block;width:100%;margin-top:4px}


/* Offline parity v1 — confirmed-state status stack and inspection. */
.piece-health .piece-status{font-size:7px;fill:#ffe1a3}
.piece-health .piece-shield{font-size:7px;fill:#dcecff;font-weight:800}
.object-shield{fill:#dcecff;stroke:#07100d;stroke-width:.6;paint-order:stroke;font:700 7px sans-serif}
.inspected-entity .marker{stroke-width:2.4;filter:drop-shadow(0 0 3px #ffe29a)}
.roster-entry[data-inspect-id]{cursor:pointer}
.roster-entry.inspected{outline:1px solid #ffe29a;background:#3b341caa}
.inspected-card{min-width:0}
.object-avatar{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;font-size:25px;border:1px solid #cfb05b;border-radius:50%;background:#0c1d24}
.fighter-states.chips{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}
.state-chip{display:inline-flex;align-items:center;min-height:17px;padding:1px 5px;border:1px solid #8f7b4b;border-radius:8px;background:#10232de8;color:#eadfbf;font-size:8px;line-height:1.1;white-space:nowrap}
.state-empty{font-size:8px;opacity:.65}


/* Offline parity v2 — HUD móvil + cámara/parallax. El color de rango LIVE v2 no cambia. */
.live-battle{
  --arena-bg-parallax-x:0px;
  --arena-bg-parallax-y:0px;
  background-image:url('../assets/optimized/assets/arenas/central/arena-central-background.webp');
  background-repeat:no-repeat;
  background-size:110% auto;
  background-position:calc(50% + var(--arena-bg-parallax-x)) calc(-18px + var(--arena-bg-parallax-y));
  background-color:#0d1511;
}
.arena-stage{touch-action:none}
.arena-scene{position:absolute;inset:0;will-change:transform}
.arena-scene .arena-platform{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.arena-scene .live-board{position:absolute;left:14%;top:14%;width:72%;height:72%;max-height:none;overflow:visible}
.hud-drag-handle{touch-action:none;cursor:grab}
.dragging .hud-drag-handle{cursor:grabbing}
.hud-module-tools,.round-hud-tools,.command-hud-tools{display:flex;align-items:center;gap:2px}
.hud-tool,.camera-hud-btn,.reset-hud{
  min-width:22px;min-height:22px;padding:0 4px;border:1px solid #9f8750;border-radius:4px;
  background:#10231de8;color:#f0d98e;font:700 13px/1 sans-serif;text-shadow:0 1px 1px #000;
}
.hud-tool:active,.camera-hud-btn:active,.reset-hud:active{transform:translateY(1px)}
.round-hud-tools{position:absolute;left:-4px;top:-18px;z-index:6}
.command-hud-tools{position:absolute;right:-7px;top:-18px;z-index:7}
.live-roster h2{display:flex;align-items:center;justify-content:space-between;gap:4px}
.live-roster h2 .hud-module-tools{margin-left:auto}
.live-roster.collapsed{width:auto!important;min-width:96px;padding-bottom:0}
.live-roster.collapsed .roster-body{display:none}
.live-roster.collapsed h2{margin-bottom:0}
.live-round.collapsed .round-order-wrap{display:none}
.live-round.collapsed{width:auto!important;min-width:210px}
.live-command.collapsed{width:auto!important;min-width:110px;padding:5px 10px}
.live-command.collapsed .command-main,.live-command.collapsed .command-feedback{display:none!important}
.live-command.collapsed .command-hud-tools{position:static;justify-content:center}
.live-roster.hud-vertical{width:140px}
.live-roster.hud-vertical.own{border-image-source:url('../../assets/ui/hud/team/team-panel-vertical-blue.png');border-image-slice:185 95 150 95 fill}
.live-roster.hud-vertical.rival{border-image-source:url('../../assets/ui/hud/team/team-panel-vertical-red.png');border-image-slice:170 86 138 86 fill}
.live-roster.hud-vertical .roster-body{display:block}
.live-roster.hud-horizontal{width:220px}
.live-roster.hud-horizontal.own{border-image-source:url('../../assets/ui/hud/team/team-panel-horizontal-blue.png');border-image-slice:72 64 60 64 fill}
.live-roster.hud-horizontal.rival{border-image-source:url('../../assets/ui/hud/team/team-panel-horizontal-red.png');border-image-slice:66 66 56 66 fill}
.live-roster.hud-horizontal .roster-body{display:flex;gap:4px;overflow-x:auto}
.live-roster.hud-horizontal .roster-entry{min-width:132px;flex:1}
.camera-hud-panel{
  position:absolute;z-index:5;left:50%;top:70px;transform:translateX(-50%);
  display:flex;gap:3px;padding:4px;border:1px solid #9c8248;border-radius:7px;
  background:#071a2ad9;box-shadow:0 3px 7px #0008;color:#f4eedc
}
.camera-hud-panel .camera-drag{font-size:15px}
.reset-hud{margin-left:2px}
.pillar-piece[data-inspect-id]{pointer-events:auto;cursor:pointer}

@media(orientation:landscape) and (max-height:500px){
  .camera-hud-panel{top:48px;padding:2px}
  .hud-tool,.camera-hud-btn,.reset-hud{min-width:19px;min-height:19px;font-size:11px}
  .live-roster.hud-vertical{width:115px}
  .live-roster.hud-horizontal{width:190px}
}
@media(orientation:landscape) and (max-height:300px){
  .camera-hud-panel{top:35px}
  .live-roster.hud-vertical{width:100px}
  .live-roster.hud-horizontal{width:165px}
}
@media(orientation:portrait){
  .live-battle{
    background-size:cover;
    background-position:calc(50% + var(--arena-bg-parallax-x)) calc(30% + var(--arena-bg-parallax-y));
  }
  .camera-hud-panel{top:70px}
  .live-roster.hud-horizontal{width:190px}
}

.live-roster.collapsed .roster-body{display:none!important}


/* parity v2.1 — side HUD interaction fix + pinch zoom */
.live-battle .live-roster{
  pointer-events:auto!important;
  touch-action:auto;
}
.live-battle .live-roster .hud-module-tools,
.live-battle .live-roster .hud-tool{
  pointer-events:auto!important;
}
.live-battle .live-roster .hud-drag-handle{
  touch-action:none!important;
  min-width:28px;
  min-height:28px;
}
.arena-scene{
  transform-origin:50% 50%;
  will-change:transform;
}


/* Offline parity skills v1 — Mover / Habilidades / Fin turno + drawer. */
.offline-action-bar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;align-items:stretch}
.offline-action-bar .move-action,.offline-action-bar .live-action{min-height:36px}
.offline-action-bar .move-action{justify-content:center}
.offline-action-bar .active-action,.combat-skill.active-action{filter:brightness(1.22);outline:1px solid #ffe29a}
.skill-drawer.closed{display:none!important}
.skill-drawer.open{display:grid}
.skill-drawer{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-bottom:5px}
.skill-drawer [data-skill]{
  -webkit-touch-callout:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  touch-action:manipulation!important;
}
.skill-hold-tooltip{
  position:fixed;z-index:2400;left:50%;top:19%;width:min(430px,58vw);max-width:calc(100vw - 28px);
  transform:translate(-50%,-8px) scale(.98);padding:9px 11px;border:1px solid #8a9c7d;border-radius:11px;
  background:#101a14f2;box-shadow:0 8px 24px #000b,inset 0 0 0 1px #ffffff0d;color:#f5edd8;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,transform .12s ease,visibility 0s linear .12s;
  backdrop-filter:blur(4px)
}
.skill-hold-tooltip.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition:opacity .12s ease,transform .12s ease}
.skill-hold-tooltip-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px;padding-bottom:5px;border-bottom:1px solid #ffffff18}
.skill-hold-tooltip-icon{font-size:22px;line-height:1}
.skill-hold-tooltip-name{min-width:0;font-size:12px;font-weight:900;line-height:1.1}
.skill-hold-tooltip-cost{color:#efd173;font-size:10px;font-weight:900;white-space:nowrap}
.skill-hold-tooltip-text{margin:7px 0 6px;font-size:11px;line-height:1.32}
.skill-hold-tooltip-meta{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:9px;line-height:1.25;color:#d8ddcf}
.skill-hold-tooltip-meta span{min-width:0}
@media (orientation:landscape) and (max-height:430px){
  .skill-hold-tooltip{top:16%;width:min(390px,56vw);padding:7px 9px}
  .skill-hold-tooltip-icon{font-size:18px}.skill-hold-tooltip-name{font-size:10px}.skill-hold-tooltip-cost{font-size:8px}
  .skill-hold-tooltip-text{font-size:9px;margin:5px 0}.skill-hold-tooltip-meta{font-size:7.5px}
}


/* skills parity correction — abilities remain permanently visible, as in the validated HUD */
.battle-command-panel [data-skill]{
  -webkit-touch-callout:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  touch-action:manipulation!important;
}
.piece-hitbox{
  fill:transparent;
  pointer-events:all;
  cursor:pointer;
}


/* Offline AoE parity — preserve LIVE v2 blue range; affected area uses the offline magenta language. */
.live-board.aoe-preview-active{
  touch-action:none;
  cursor:crosshair;
}
.live-board .tile.aoe-preview{
  fill:#a62f6f!important;
  stroke:#ff78c4!important;
  stroke-width:2.55!important;
  filter:drop-shadow(0 0 5px rgba(255,82,179,.78))!important;
}
.live-board .tile.aoe-preview.aoe-preview-center{
  fill:#d13d87!important;
  stroke:#fff1f8!important;
  stroke-width:3.25!important;
  filter:drop-shadow(0 0 8px rgba(255,76,175,.95))!important;
}
.live-board .tile.aoe-preview-anchor{
  stroke:#fff!important;
  stroke-width:3.1!important;
}
.live-board .tile.aoe-preview.aoe-preview-locked{
  stroke-dasharray:5 2;
}
.range-legend .aoe-key{color:#ffb7dc}
.range-legend .aoe-key:before{
  background:#d13d87!important;
  border-color:#ffb7dc!important;
  box-shadow:0 0 7px rgba(255,76,175,.72);
}

.team-slot-chooser{display:flex;align-items:center;gap:8px;font-size:12px;margin:8px 0}.in-arena .team-slot-chooser{position:absolute;top:84px;left:50%;transform:translateX(-50%);z-index:5;background:#15262bee;border:1px solid #61787c;border-radius:9px;padding:3px 8px;margin:0}.in-arena .team-slot-chooser select{padding:5px;font-size:12px;min-height:30px}.teams .unit-card p{margin-bottom:0}

.invite-row{display:flex;gap:6px;align-items:center;margin:6px 0}.invite-row button{font-size:11px;flex-shrink:0}.invite-row input{min-width:0}.welcome [data-action="joinSlot"]{margin:6px}


/* Combat owns the viewport; installation controls remain in the lobby. */
body.in-arena{height:100dvh;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
body.in-arena>header{flex:none}
body.in-arena>#rotate,body.in-arena>.app-display-tools{display:none}
body.in-arena>main{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;overflow:hidden}
body.in-arena .room-bar{flex:none}
body.in-arena .live-battle{flex:1;min-height:0;height:auto;width:100%}

/* Room controls stay in preparation; the camera gear opens match options. */
body.in-arena>header,body.in-arena .room-bar{display:none}

/* Focused touch targets and deliberate movement preview. */
.live-board [data-motion-unit]{pointer-events:none}
.live-board [data-motion-unit] .piece-hitbox{pointer-events:all}
.combat-skill[aria-disabled="true"]{opacity:.65;cursor:help}
.live-board .tile.destination{fill:#e9c14dcc;stroke:#fff5be;stroke-width:3.5;filter:drop-shadow(0 0 3px #ffdc63)}
.move-action[aria-pressed="true"]{outline:2px solid #ffdc77;outline-offset:2px}

@keyframes selected-cell-pulse{from{stroke-width:5;fill:#fff0a5ee}to{stroke-width:3.5;fill:#e9c14dcc}}
.live-board .tile.destination,.live-board .tile.ability-selected{stroke:#fff5be;stroke-width:3.5;filter:drop-shadow(0 0 3px #ffdc63);animation:selected-cell-pulse .25s ease-out}
@media(prefers-reduced-motion:reduce){.live-board .tile.destination,.live-board .tile.ability-selected{animation:none}}

/* Feedback occupies its own row; it cannot cover draggable combat controls. */
body.in-arena #notice{position:static;flex:none;order:-1;transform:none;margin:0;width:100%;max-width:none;padding:4px 10px;font-size:12px;pointer-events:none;max-height:44px;overflow:auto}
#turn-announcement{position:fixed;left:50%;top:45%;transform:translate(-50%,-50%);z-index:80;pointer-events:none;background:#071a2aee;border:2px solid #d4b75c;border-radius:8px;padding:10px 18px;color:#fff0bd;font-size:clamp(16px,3vw,26px);font-weight:bold;text-align:center;max-width:70vw}
.live-command .command-feedback{height:26px;overflow:auto;align-items:flex-start}
.live-command .board-note{min-width:0;flex:1}
.live-command .command-controls{max-height:100px;overflow:auto;min-width:0}
.live-command .active-champion{min-width:0;max-height:100px;overflow:auto}
.live-command .combat-skill{min-width:0}
@media(orientation:landscape) and (max-height:500px){.live-command .command-controls,.live-command .active-champion{max-height:68px}.live-command .command-feedback{height:20px}}
@media(orientation:landscape){.live-command:not(.collapsed) .command-main{height:100px;min-height:0}.live-command .combat-skills{min-height:0;overflow:hidden}.live-command .combat-skill{min-height:0}}
@media(orientation:landscape) and (max-height:500px){.live-command:not(.collapsed) .command-main{height:68px}}
@media(orientation:landscape) and (max-height:300px){.live-command:not(.collapsed) .command-main{height:54px}.live-command .command-controls,.live-command .active-champion{max-height:54px}}
.live-command .command-controls{justify-content:flex-start;align-self:stretch;min-height:0;overscroll-behavior:contain}
.live-command .command-controls>*{flex-shrink:0}

/* Compact command row: no instruction/status footer consumes arena space. */
.live-command .command-feedback{display:none}
@media(orientation:landscape){.live-command:not(.collapsed) .command-main{height:64px}.live-command .active-champion,.live-command .command-controls{max-height:64px}}
@media(orientation:landscape) and (max-height:500px){.live-command:not(.collapsed) .command-main{height:56px}.live-command .active-champion,.live-command .command-controls{max-height:56px}}
@media(orientation:landscape) and (max-height:300px){.live-command:not(.collapsed) .command-main{height:48px}.live-command .active-champion,.live-command .command-controls{max-height:48px}}

/* Queue avatars share board target selection without changing HUD dimensions. */
.turn-order li{padding:0}.turn-avatar-select{display:flex;align-items:center;gap:3px;width:100%;min-height:32px;margin:0;padding:3px;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.turn-avatar-select:focus-visible{outline:2px solid #8beaff;outline-offset:-2px}.turn-order li.targetable{border-color:#74d5ff}.turn-order li.target-selected{background:#175473;border-color:#c4f3ff;box-shadow:inset 0 0 0 1px #c4f3ff}

/* Status strip stays inside queue cards; native actions occupy the existing card. */
.turn-avatar-select{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 3px;min-height:32px;padding:2px 3px}
.turn-avatar-select>span:not(.turn-states){min-width:0}
.turn-states{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1px;max-width:100%;font-size:8px;line-height:1.1}
.turn-state{display:inline-flex;align-items:center;background:#061827;border-radius:3px;padding:1px 2px;color:#fff;white-space:nowrap}
.live-command .active-champion.has-native-actions{display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 23px;gap:1px 3px;overflow:hidden}
.has-native-actions>img{width:24px;height:24px;align-self:center}
.has-native-actions .active-details{font-size:8px;line-height:1.1}
.has-native-actions .active-details>strong{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.has-native-actions .active-life{flex-wrap:nowrap}.has-native-actions .active-life meter{min-width:15px;height:6px}
.has-native-actions .active-resources{gap:4px;flex-wrap:nowrap;white-space:nowrap}
.native-actions{grid-column:1/-1;display:flex;gap:2px;min-width:0;min-height:0}
.native-action{display:flex;align-items:center;justify-content:center;gap:2px;flex:1;min-width:0;min-height:0;padding:1px 2px;border:1px solid #ac9050;border-radius:4px;background:#0b2638;color:#f2e8d0;font:8px/1 sans-serif;cursor:pointer}
.native-action small{display:block;font-size:7px;margin-top:1px}.native-action:disabled{opacity:.4;cursor:default}
.native-icon{display:flex;align-items:center;justify-content:center;width:17px;height:18px;font-size:16px;flex-shrink:0}.native-icon img{width:100%;height:100%;object-fit:contain}
.native-action.selected-skill{border-color:#9beaff;box-shadow:inset 0 0 0 1px #9beaff}.native-action:focus-visible{outline:2px solid #9beaff}
.hook-options{position:absolute;bottom:100%;right:0;display:flex;gap:3px;background:#061827;padding:3px}
@media(orientation:landscape) and (max-height:300px){.live-command .active-champion.has-native-actions{grid-template-columns:18px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 19px}.has-native-actions>img{width:18px;height:18px}.has-native-actions .active-details,.has-native-actions .active-details>strong{font-size:7px}.native-action{font-size:7px}.native-icon{width:12px;height:14px;font-size:12px}.native-action small{font-size:6px}.turn-states{font-size:7px}}
@media(orientation:portrait){.live-command .active-champion.has-native-actions{grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto 28px}.native-action{font-size:10px}.native-action small{font-size:8px}}

/* Six turn cards fit inside the existing round bar. */
.live-battle[data-format="3v3"] .turn-order li{min-width:48px;min-height:36px}
.live-battle[data-format="3v3"] .turn-avatar-select{gap:3px;padding:3px;min-width:0}
.live-battle[data-format="3v3"] .turn-avatar-select>span{font-size:8px}
.live-battle[data-format="3v3"] .turn-order img{width:19px;height:19px}

/* Object labels and art must not intercept a neighboring cell: use the body hitbox. */
.live-board .pillar-piece[data-inspect-id]{pointer-events:none}
.live-board .pillar-piece .object-hitbox{pointer-events:all}

/* Compact team cards; preserve inspection and the existing panel controls. */
.live-battle .live-roster{display:flex;flex-direction:column;width:136px;border-width:6px;top:72px;bottom:auto;max-height:calc(100% - 150px)}
.live-battle .live-roster.own{left:6px}.live-battle .live-roster.rival{right:6px}
.live-battle .live-roster h2{flex-shrink:0;font-size:9px;line-height:1.1;gap:2px;padding:0;margin:0 0 3px;min-height:28px;white-space:nowrap}
.live-battle .live-roster .hud-module-tools{gap:1px;flex-shrink:0}
.live-battle .live-roster .hud-tool{min-width:22px;min-height:28px;padding:1px;font-size:12px}
.live-battle .live-roster .hud-drag-handle{min-width:28px}
.live-battle .live-roster .roster-body{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.live-battle .live-roster .roster-entry{display:flex;align-items:center;gap:4px;padding:3px;margin:2px 0;min-height:44px;text-align:left;border-radius:5px}
.live-battle .live-roster .roster-entry img{display:block;width:26px;height:26px;flex:0 0 26px}
.live-battle .live-roster .roster-entry>div{flex:1;min-width:0;line-height:1.12}
.live-battle .live-roster .roster-entry strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-battle .live-roster .roster-entry span{display:block;font-size:9px;white-space:nowrap}
.live-battle .live-roster .roster-entry meter{display:block;width:100%;height:4px;margin-top:2px}
.live-battle .live-roster.hud-horizontal{width:274px}
.live-battle .live-roster.hud-horizontal .roster-body{display:flex;gap:3px;overflow-x:auto}
.live-battle .live-roster.hud-horizontal .roster-entry{min-width:122px;margin:0}
/* Always the player's upper right, outside the transformed arena scene. */
.live-battle .camera-hud-panel{position:absolute;top:6px;right:6px;left:auto;bottom:auto;transform:none;z-index:8;gap:3px;padding:3px}
.live-battle .camera-hud-panel .camera-hud-btn{min-width:32px;min-height:32px;padding:3px;font-size:18px}
.live-battle .live-round{width:min(680px,calc(100% - 250px))}
@media(orientation:landscape) and (max-height:300px){
 .live-battle .live-roster{top:58px;max-height:calc(100% - 126px)}
 .live-battle .live-roster .roster-entry{min-height:40px;padding:2px}
}
@media(orientation:portrait){
 .live-battle .live-round{top:48px;width:calc(100% - 30px)}
 .live-battle .live-roster{top:132px;max-height:calc(100% - 250px)}
}

/* Fit the playable floor independently of the original arena artwork.
   Grow 72 -> 80%, spending six points above and only two below. */
.arena-scene .live-board{left:10%;top:8%;width:80%;height:80%}
.basic-action{display:flex;align-items:center;justify-content:center;color:#f2e8d0;text-shadow:0 1px 2px #000;border:4px solid transparent;border-image:url('../../assets/ui/hud/bottom/action-button-move.png') 44 62 44 62 fill stretch;border-radius:0;background:transparent;touch-action:none;user-select:none;-webkit-touch-callout:none}
.basic-action[aria-pressed="true"]{filter:brightness(1.35) drop-shadow(0 0 3px #7de0ff)}
.basic-action[aria-disabled="true"]{opacity:.55}
.movement-tools{display:flex;gap:3px;min-height:0;align-items:stretch}
.movement-tools .basic-action{flex:0 0 36px;width:36px;min-height:0;flex-direction:column;padding:1px;font-size:8px;line-height:1.05;gap:1px}
.basic-action .basic-icon{font-size:12px;line-height:1;color:#f4d58a}.basic-action small{font-size:7px;color:#f4d58a}
.movement-tools .move-action{flex:1;min-width:0;padding:2px;border-width:4px;gap:3px;font-size:9px}

/* Two bounded rows share the command card; no control can push End below it. */
.live-command .command-controls{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:2px;overflow:visible;min-height:0;height:100%;box-sizing:border-box}
.live-command .command-controls>.movement-tools{display:flex;min-height:0;height:100%;gap:2px}
.live-command .movement-tools .basic-action{display:grid;grid-template-columns:10px minmax(0,1fr);grid-template-rows:1fr 1fr;align-items:center;justify-items:center;flex:0 0 39px;width:39px;min-height:0;height:100%;box-sizing:border-box;padding:0 1px;border-width:3px;font-size:7px;gap:0;line-height:1}
.live-command .basic-action .basic-icon{font-size:10px}.live-command .basic-action small{grid-column:1/-1;font-size:7px;line-height:1}
.live-command .movement-tools .move-action{min-height:0;height:100%;box-sizing:border-box;padding:0 1px;border-width:3px;font-size:8px;line-height:1;gap:2px;flex-wrap:wrap;align-content:center}
.live-command .command-controls>.end-action{min-height:0;height:100%;box-sizing:border-box;padding:0 2px;border-width:3px;font-size:8px;line-height:1;white-space:normal}
@media(orientation:portrait){.live-command .command-controls{min-height:52px}}

.live-command .command-controls>.movement-tools{grid-column:1;grid-row:1;width:100%}.live-command .command-controls>.end-action{grid-column:1;grid-row:2;width:100%}

.participant-nick{display:inline-block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-weight:700;font-size:inherit;line-height:1.25;background:#03111dcc;padding:0 3px;border-radius:3px;text-shadow:0 1px 2px #000;box-sizing:border-box}.participant-nick.ally{color:#8ce8ff!important}.participant-nick.opponent{color:#ff9a9f!important}.roster-entry .participant-nick{display:block;font-size:9px}.turn-order .participant-nick{max-width:100%;font-size:8px}


/* Beta touch/visibility trial: compact rosters without hiding controls. */
@media (orientation:landscape) {
  .live-battle .live-roster {width:clamp(94px,11vw,124px);border-width:7px;bottom:100px;filter:drop-shadow(0 2px 3px #0009)}
  .live-battle .live-roster.own {left:4px}
  .live-battle .live-roster.rival {right:4px}
  .live-battle .live-roster h2 {font-size:10px;padding:3px;margin:0 -3px 3px}
  .live-battle .roster-entry {gap:4px;padding:3px}
  .live-battle .roster-entry img {width:27px;height:27px;flex-shrink:0}
  .live-battle .roster-entry strong {font-size:10px}
  .live-battle .roster-entry .roster-vitals,
  .live-battle .roster-entry .roster-resources {font-size:10px;font-weight:700;line-height:1.3}
  .live-battle .roster-entry meter {height:5px}
}
@media (orientation:landscape) and (max-height:420px) {
  .live-battle .live-roster {width:96px;bottom:88px}
  .live-battle .roster-entry img {width:23px;height:23px}
  .live-battle .roster-entry strong {font-size:9px}
}
.live-battle .active-resources {font-size:clamp(11px,1.25vw,14px);font-weight:800}
.live-battle .active-life {font-size:clamp(11px,1.25vw,14px);font-weight:700}
.live-board .piece-health text {font-size:11px;stroke-width:1.1}
.live-board .piece-health .piece-status {font-size:8px}
.live-board .piece-shield {font-size:11px;font-weight:800;stroke:#07100d;stroke-width:1.2;paint-order:stroke}
.live-board .tile.ability-target,.live-board .tile.ability-selected {stroke-width:2.4;filter:drop-shadow(0 0 2px #ffe59b)}
.live-board .tile.reachable {stroke-width:1.8}


/* Beta round 2: keep the arena readable on short mobile screens. */
@media (orientation:landscape) and (max-height:500px) {
  .live-battle .live-round {max-width:calc(100% - 208px);padding:1px 9px;gap:5px}
  .live-battle .round-summary {gap:4px}
  .live-battle .live-round .timer {font-size:18px}
  .live-battle .turn-order {gap:2px;min-width:0}
  .live-battle .turn-order li {min-width:40px;padding:2px;gap:2px}
  .live-battle .turn-order img {width:22px;height:22px}
  .live-battle .live-command {bottom:3px;max-width:calc(100% - 18px)}
  .live-battle .active-champion>img {width:30px;height:30px}
  .live-battle .active-details>strong {font-size:12px}
  .live-battle .combat-skill {min-height:34px;font-size:10px}
}
@media (orientation:portrait) {
  .live-battle .live-roster {width:min(30vw,125px);border-width:7px}
  .live-battle .roster-entry {gap:3px;padding:3px}
  .live-battle .roster-entry img {width:26px;height:26px}
  .live-battle .roster-entry strong {font-size:10px}
  .live-battle .live-command {padding:4px 7px}
  .live-battle .active-resources,.live-battle .active-life {font-size:12px}
}


/* Beta feedback 2026-10-23: native ability must never cover champion vitals. */
.live-battle .live-command .active-champion.has-native-actions{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  overflow:visible;
  gap:4px 6px;
}
.live-battle .live-command .active-champion.has-native-actions>img{
  width:34px;height:34px;grid-column:1;grid-row:1;
}
.live-battle .live-command .active-champion.has-native-actions .active-details{
  grid-column:2;grid-row:1;min-width:0;font-size:11px;line-height:1.25;
}
.live-battle .live-command .active-champion.has-native-actions .active-details>strong{font-size:11px}
.live-battle .live-command .active-champion.has-native-actions .active-life{
  flex-wrap:wrap;gap:3px;
}
.live-battle .live-command .active-champion.has-native-actions .active-resources{
  flex-wrap:wrap;white-space:normal;gap:3px 7px;font-size:11px;
}
.live-battle .live-command .active-champion.has-native-actions .native-actions{
  grid-column:1/-1;grid-row:2;min-height:27px;display:flex;gap:4px;
  border-top:1px solid #9f875077;padding-top:3px;
}
.live-battle .live-command .native-action{min-height:26px;font-size:10px;padding:3px 5px}
.live-battle .live-command .native-action small{font-size:9px}
.live-battle .live-command .native-icon{width:20px;height:20px}

/* Keep roster header tools within the decorative panel's inner frame. */
.live-battle .live-roster h2{
  display:flex;align-items:center;justify-content:space-between;
  min-width:0;gap:2px;padding:5px 4px;margin:0 0 4px;
}
.live-battle .live-roster h2>span:first-child{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:10px;
}
.live-battle .live-roster h2 .hud-module-tools{
  position:static;display:flex;gap:2px;flex:0 0 auto;margin-left:auto;
}
.live-battle .live-roster .hud-tool{
  min-width:23px;min-height:26px;padding:2px;font-size:12px;
}
@media(orientation:landscape) and (max-height:500px){
  .live-battle .live-roster:not(.collapsed){width:clamp(145px,14vw,175px)}
  .live-battle .live-roster h2{padding:4px 3px}
  .live-battle .live-command .active-champion.has-native-actions{grid-template-columns:28px minmax(0,1fr);gap:3px}
  .live-battle .live-command .active-champion.has-native-actions>img{width:28px;height:28px}
  .live-battle .live-command .active-champion.has-native-actions .active-details,
  .live-battle .live-command .active-champion.has-native-actions .active-details>strong{font-size:10px}
}


/* Beta feedback: native skill beside avatar/vitals, not an extra bottom row. */
.live-battle .live-command .active-champion.has-native-actions{
  grid-template-columns:34px minmax(0,1fr);
  grid-template-rows:auto;
  position:relative;
  overflow:visible;
  padding-bottom:32px;
}
.live-battle .live-command .active-champion.has-native-actions>img{grid-column:1;grid-row:1}
.live-battle .live-command .active-champion.has-native-actions .active-details{grid-column:2;grid-row:1}
.live-battle .live-command .active-champion.has-native-actions .native-actions{
  position:absolute;
  left:5px;right:5px;bottom:3px;
  display:flex;align-items:center;
  min-height:27px;padding:0;border:0;
}
.live-battle .live-command .active-champion.has-native-actions .native-action{
  min-height:27px;width:100%;font-size:10px;
}
@media(orientation:landscape) and (max-height:500px){
  .live-battle .live-command .active-champion.has-native-actions{
    grid-template-columns:28px minmax(0,1fr);
    padding-bottom:30px;
  }
  .live-battle .live-command .active-champion.has-native-actions .native-actions{
    left:3px;right:3px;bottom:2px;
  }
}