/* Offscreen combat particles must not enlarge the viewport or displace fixed UI. */
html:has(.arena[data-tech-size]){overflow-x:clip}
/* Stable technique preview: every closed summary contributes to one intrinsic row.
   The sizing component only renders when the battle's known techniques change. */
.arena[data-tech-size] .tech-detail-stack{display:grid;min-width:0}
.arena[data-tech-size] .summary-measurements{display:grid;visibility:hidden;pointer-events:none;grid-area:1/1;min-width:0}
.arena[data-tech-size] .summary-measurement,.arena[data-tech-size] .tech-detail-stack>.tech-detail{grid-area:1/1;min-width:0;margin:0}
.arena[data-tech-size] .summary-measurement{height:auto;align-self:stretch}
.arena[data-tech-size] .tech-detail-stack>.tech-detail{align-self:stretch}
.arena[data-tech-size] .battle-settings{display:contents}
.arena[data-tech-size] .battle-menu-toggle,.arena[data-tech-size] .mobile-display-settings,.arena[data-tech-size] .mobile-tech-tabs{display:none}
.arena[data-tech-size] .command-status .round-state{min-height:0;height:auto;position:static}
.arena[data-tech-size] .battle-tools>.battle-wait{order:1}
.arena[data-tech-size] .battle-playback-controls{order:0}
/* Keep the skip slot; combat-premium.css toggles visibility without reflow. */

/* Desktop chrome can leave less room than the viewport suggests (e.g. sidebar).
   Three columns need 240 + 380 + 240 + two 22px gaps. Change the whole grid and
   all placements together; legacy container rules only moved the command row. */
@media(min-width:1101px){
 @container arena (max-width:904px){
  .arena[data-tech-size] .battle-layout{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arena[data-tech-size] .team-column{min-width:0}
  .arena[data-tech-size] .own-team{grid-column:1;grid-row:1}
  .arena[data-tech-size] .other-teams{grid-column:2;grid-row:1}
  .arena[data-tech-size] .command-center{grid-column:1/-1;grid-row:2}
 }
}

/* Mobile is a continuous battlefield: the command panel never covers resources. */
@media(max-width:1100px){
 .arena[data-tech-size] .battle-layout{gap:10px;align-items:start}
 .arena[data-tech-size] .command-center{position:relative;bottom:auto;align-self:start;max-height:none;overflow:visible;padding:10px;box-shadow:none;--tech-size:inherit;z-index:auto}
 .arena[data-tech-size] .command-top{flex-wrap:nowrap;gap:8px;margin-bottom:5px}
 .arena[data-tech-size] .command-top .round-header{flex:1 1 auto;min-width:0}
 .arena[data-tech-size] .command-top .round-header h2{font-size:16px}
 .arena[data-tech-size] .command-top .round-header h2 span{font-size:22px}
 .arena[data-tech-size] .battle-tools{flex-wrap:nowrap;gap:6px}
 .arena[data-tech-size] .battle-tools>.battle-wait{order:0}
 .arena[data-tech-size] .battle-tools>.battle-menu-toggle{display:block;min-width:44px;min-height:44px;font-size:16px;letter-spacing:2px;padding:6px}
 .arena[data-tech-size] .battle-tools>.battle-wait{min-height:44px;padding:6px 10px}
 .arena[data-tech-size] .battle-settings{display:none;position:absolute;right:10px;top:58px;z-index:60;width:min(300px,calc(100% - 20px));padding:12px;background:var(--theme-surface,#f6fcfc);border:1px solid var(--theme-line,#b7d8df);border-radius:12px;box-shadow:0 12px 28px #00121f55}
 .arena[data-tech-size] .options-open .battle-settings{display:grid;gap:12px}
 .arena[data-tech-size] .battle-settings .battle-playback-controls{display:flex;gap:8px}
 .arena[data-tech-size] .battle-settings .battle-surrender{margin-left:auto}
 .arena[data-tech-size] .battle-settings button{min-height:44px}
 .arena[data-tech-size] .mobile-display-settings{display:block;border-top:1px solid var(--theme-line,#b7d8df);padding-top:12px}
 .arena[data-tech-size] .mobile-display-settings .tech-display-controls{justify-content:space-between}
 .arena[data-tech-size] .names-label{display:inline}
 .arena[data-tech-size] .tech-names-toggle,.arena[data-tech-size] .tech-size button{min-height:44px;min-width:44px}
 .arena[data-tech-size] .command-status{margin:0 0 7px}
 .arena[data-tech-size] .command-status .round-state{font-size:10px;line-height:1.3;min-height:14px;gap:4px;justify-content:flex-start;text-align:left}
 .arena[data-tech-size] .command-status .round-state .no-deadline{display:none}
 .arena[data-tech-size] .mobile-command-tools select{min-height:44px;font-size:12px}
 .arena[data-tech-size] .battle-target-picker,.arena[data-tech-size] .tech-heading,.arena[data-tech-size] .mode-heading{display:none}
 .arena[data-tech-size] .mobile-tech-tabs{display:flex;align-items:center;gap:6px;margin-bottom:7px;border-bottom:1px solid var(--theme-line,#b7d8df)}
 .arena[data-tech-size] .mobile-tech-tabs button{min-height:40px;padding:7px 10px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--theme-muted,#537480);font-size:12px;font-weight:650}
 .arena[data-tech-size] .mobile-tech-tabs button[aria-pressed=true]{color:var(--theme-ink,#173d4c);border-bottom-color:var(--theme-accent,#139eac)}
 .arena[data-tech-size] .mobile-tech-tabs .mobile-tech-help{margin-left:auto;min-width:44px;font-size:18px}
 .arena[data-tech-size] .command-center .tech-grid{max-height:clamp(190px,calc(100dvh - 535px),440px);grid-template-columns:repeat(auto-fill,minmax(min(100%,max(44px,calc(var(--tech-size) * .9))),1fr));gap:5px;overflow-y:auto;overscroll-behavior:contain}
 .arena[data-tech-size] .command-center:not(.show-modes) .mode-grid{display:none}
 .arena[data-tech-size] .command-center.show-modes .mode-grid{display:grid;max-height:clamp(190px,calc(100dvh - 535px),440px);overflow-y:auto;margin:0}
 .arena[data-tech-size] .command-center.show-modes .tech-grid{display:none}
 .arena[data-tech-size] .tech-detail-stack{display:contents}
 .arena[data-tech-size] .summary-measurements{display:none}
 .arena[data-tech-size] .tech-detail-stack>.tech-detail{display:none}
 .arena[data-tech-size] .tech-detail-stack>.tech-detail.details-open{display:block;position:fixed;top:12dvh;max-height:65dvh;overflow:auto;z-index:95;box-shadow:0 12px 45px #12394688}
 .arena[data-tech-size] .detail-close{min-height:44px}
 .arena[data-tech-size] .team-heading{margin:0 0 7px;padding-bottom:7px;gap:6px;min-height:32px}
 .arena[data-tech-size] .team-heading small,.arena[data-tech-size] .team-select{display:none}
 .arena[data-tech-size] .team-heading b{font-size:11px}
 .arena[data-tech-size] .team-number{width:22px;height:22px;font-size:9px;border-radius:7px}
 .arena[data-tech-size] .fighter{margin-bottom:0}
 .arena[data-tech-size] .portrait-button,.arena[data-tech-size] .compact .portrait-button,.arena[data-tech-size].large-battle .team-roster .portrait-button{aspect-ratio:1.65;max-height:170px}
 .arena[data-tech-size] .portrait-name strong,.arena[data-tech-size] .compact .portrait-name strong{font-size:13px}
 .arena[data-tech-size] .fighter-body,.arena[data-tech-size] .compact .fighter-body,.arena[data-tech-size].large-battle .team-roster .fighter-body{padding:7px 8px}
 .arena[data-tech-size] .fighter-body>small{display:none}
 .arena[data-tech-size] .fighter .resource{margin-bottom:8px}
 .arena[data-tech-size] .fighter .resource-label{grid-column:1/-1;flex-wrap:wrap;column-gap:6px;font-size:8px;line-height:12px;min-height:12px}
 .arena[data-tech-size] .fighter .resource-label b{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;max-width:100%;margin-left:auto;font-size:10px}
 /* Keep the full gauge readable on narrow cards, including playback overlays.
    Long numbers wrap between values instead of hiding maxima or percentages. */
 .arena[data-tech-size] .fighter .resource .resource-label :is(.resource-max,.resource-percent){display:inline;white-space:nowrap}
 .arena[data-tech-size] .fighter .resource-after{display:none}
 .arena[data-tech-size] .fighter .bar{height:5px}
 .arena[data-tech-size] .fighter .form-line{padding:4px 8px;min-height:20px}
 .arena[data-tech-size] .fighter .stats{padding:0 0 4px;min-height:13px}
 .arena[data-tech-size] .fighter .effects{min-height:28px;margin-top:4px;gap:4px}
 .arena[data-tech-size] .fighter .effect{width:28px;height:28px}
 .arena[data-tech-size] .fighter .effects-caption{font-size:8px}
 .arena[data-tech-size] .battle-history{margin-top:18px;padding-top:18px}
 .arena[data-tech-size].large-battle .team-column{max-height:45dvh!important;overflow-y:auto;overscroll-behavior:contain}
}

/* During combat, one header row and a compact chat launcher leave room for play. */
@media(max-width:850px),(max-width:1100px) and (max-height:500px){
 .game-frame:has(.arena[data-tech-size]){position:relative;padding-bottom:60px}
 .game-frame:has(.arena[data-tech-size]) .game-topbar{padding-left:56px}
 .game-frame:has(.arena[data-tech-size]) .game-topbar .brand{gap:6px}

 .game-frame:has(.arena[data-tech-size]) .game-main{padding-top:10px}
}

@media(max-width:850px),(max-width:1100px) and (max-height:500px){.game-frame:has(.arena[data-tech-size]) .arena[data-tech-size]{padding-top:0;margin-top:0}}

@media(min-width:1101px){
 .arena[data-tech-size] .battle-tools .battle-playback-controls{display:contents}
 .arena[data-tech-size] .battle-tools .playback-mode{order:0}
 .arena[data-tech-size] .battle-tools .battle-surrender{order:2}
 .arena[data-tech-size] .battle-tools .playback-skip{order:3}
}
@media(max-width:850px),(max-width:1100px) and (max-height:500px){.game-frame:has(.arena[data-tech-size]) .arena-host{margin-top:0}}

/* Shallow landscape: three useful columns instead of two giant portraits. */
@media(min-width:600px) and (max-width:1100px) and (max-height:500px){

 .game-frame:has(.arena[data-tech-size]) .game-topbar{display:flex!important;align-items:center;flex-wrap:nowrap;min-height:48px;height:48px;padding:2px calc(8px + env(safe-area-inset-right,0px)) 2px calc(54px + env(safe-area-inset-left,0px));gap:12px}
 .game-frame:has(.arena[data-tech-size]) .game-topbar>.brand{margin:0;gap:7px;flex:1}
 .game-frame:has(.arena[data-tech-size]) .game-topbar .dragonball{width:28px;height:28px;font-size:18px}
 .game-frame:has(.arena[data-tech-size]) .game-topbar .brand b{font-size:17px}
 .game-frame:has(.arena[data-tech-size]) .game-topbar .brand small{display:none}
 .game-frame:has(.arena[data-tech-size]) .game-top-actions{display:flex;align-items:center;gap:6px;margin:0}
 .game-frame:has(.arena[data-tech-size]) .game-topbar :is(.online-count,.sky-controls,.character-switcher,.game-logout,.quitte-herald){display:none!important}

 .game-frame:has(.arena[data-tech-size]) .game-main{padding:6px calc(10px + env(safe-area-inset-right,0px)) 60px calc(10px + env(safe-area-inset-left,0px))}
 .arena[data-tech-size] .battle-layout{grid-template-columns:minmax(135px,.7fr) minmax(265px,1.65fr) minmax(135px,.7fr);gap:9px}
 .arena[data-tech-size] .own-team{grid-column:1;grid-row:1}
 .arena[data-tech-size] .other-teams{grid-column:3;grid-row:1}
 .arena[data-tech-size] .command-center{grid-column:2;grid-row:1;padding:8px;border-radius:15px}
 .arena[data-tech-size] .team-heading{min-height:24px;padding:0 0 4px;margin-bottom:6px}
 .arena[data-tech-size] .portrait-button,.arena[data-tech-size] .compact .portrait-button,.arena[data-tech-size].large-battle .team-roster .portrait-button{height:clamp(60px,19dvh,92px)!important;min-height:0;max-height:92px;aspect-ratio:auto}
 .arena[data-tech-size] .portrait-name{left:7px;bottom:5px;line-height:1.1}
 .arena[data-tech-size] .portrait-name small,.arena[data-tech-size] .ki-tag small{display:none}
 .arena[data-tech-size] .ki-tag{right:7px;bottom:6px}
 .arena[data-tech-size] .ki-tag b{font-size:10px}
 .arena[data-tech-size] .fighter.selected:before{top:5px;right:5px;padding:3px 4px;font-size:7px;letter-spacing:.5px}
 .arena[data-tech-size] .fighter-body{padding:5px 7px}
 .arena[data-tech-size] .fighter .resource{margin-bottom:5px}
 .arena[data-tech-size] .fighter .form-line{font-size:8px;min-height:18px;padding:3px 7px}
 .arena[data-tech-size] .fighter .effects-caption{display:none}
 .arena[data-tech-size] .fighter .effects{min-height:24px}
 .arena[data-tech-size] .fighter .effect{width:24px;height:24px}
 .arena[data-tech-size] .target-line{display:none}
 .arena[data-tech-size] .mobile-tech-tabs{margin-bottom:5px}
 .arena[data-tech-size] .command-center .tech-grid,.arena[data-tech-size] .command-center.show-modes .mode-grid{max-height:max(130px,calc(100dvh - 195px));scrollbar-gutter:auto;padding-right:3px}
 .arena[data-tech-size] .command-center:has(.mobile-command-tools) .tech-grid,.arena[data-tech-size] .command-center.show-modes:has(.mobile-command-tools) .mode-grid{max-height:max(100px,calc(100dvh - 243px))}
 .arena[data-tech-size] .mobile-command-tools{margin:0 0 4px}
 .arena[data-tech-size] .mobile-command-tools select{width:100%}
 .arena[data-tech-size] .team-column,.arena[data-tech-size].large-battle .team-column{max-height:calc(100dvh - 66px)!important;overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain;padding:1px 2px 5px}
 .arena[data-tech-size] .team-roster{grid-template-columns:1fr;gap:8px}
 .arena[data-tech-size] .battle-settings{max-height:calc(100dvh - 125px);overflow-y:auto}
 .arena[data-tech-size] .tech-detail-stack>.tech-detail.details-open{inset:8px max(12px,env(safe-area-inset-right,0px)) auto max(12px,env(safe-area-inset-left,0px));transform:none;width:auto;max-width:none;max-height:calc(100dvh - 16px)}
 .arena[data-tech-size] .battle-history{margin-top:14px;padding-top:14px}
 html[data-mobile-header=hidden] .game-frame:has(.arena[data-tech-size]) .game-topbar{display:none!important}
 .arena[data-tech-size] .portrait-button.npc-backdrop>img{height:100%!important;aspect-ratio:auto!important}
 .arena[data-tech-size]:not(.large-battle) .team-column{overflow:visible;max-height:none!important}
 .arena[data-tech-size].large-battle .team-heading{min-height:40px}
}