.battle-compact .battlefield{position:relative;background:linear-gradient(#102a24,#081c18);isolation:isolate}
.battle-compact .battle-viewport{position:relative;container-type:inline-size;aspect-ratio:1280/650;width:100%;max-width:1280px;min-width:0;margin-inline:auto}
.battle-page .battle-compact .battle-viewport canvas{display:block;width:100%;height:auto;max-height:none;aspect-ratio:1280/650;object-fit:contain}
.battle-compact .toolbar{border-top:0;border-bottom:1px solid #b89b5755;padding:8px 16px;flex-wrap:wrap}
.battle-compact .toolbar #field-count{font-size:10px;color:#dac58e}
.battle-compact .battle-dock{position:relative;background:linear-gradient(180deg,#18392eee,#081b17);border-top:1px solid #c5a45b66;box-shadow:0 -10px 25px #04151155;z-index:4}
.battle-compact .war-meter{position:absolute;inset:0 0 auto;z-index:3;background:linear-gradient(#071a18e6,#071a18a8 65%,transparent);padding:12px 18px 18px;border:0;gap:24px;pointer-events:none}
.battle-compact .war-label{font-size:10px;margin-bottom:5px}
.battle-compact .timed-statuses{min-height:0;margin-top:5px}
.battle-compact .battle-menu{position:relative;display:flex;align-items:center;gap:10px;padding:8px 18px 12px}
.battle-compact .battle-menu .queue-popover{position:static;margin-inline:auto}
.battle-compact .queue-button{width:auto;min-width:110px;padding:0 12px}
.battle-compact .queue-button strong{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap}
.battle-compact .queue-button #queue-count{font:700 14px/1.2 'Be Vietnam Pro',sans-serif;padding:3px 6px;border-radius:4px;background:#091f19;color:#f3d58e}
.battle-compact .queue-popover>.queue-panel{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);width:min(420px,calc(100% - 16px));padding:14px;border:1px solid #c4a35f;border-radius:8px;background:#102b24;box-shadow:0 8px 30px #0009;z-index:10}
.battle-compact .queue-popover:not([open])>.queue-panel{display:none}
.battle-compact .queue-popover #queue-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:240px;margin:0;overflow-y:auto;white-space:normal}
.battle-compact .queue-popover #queue-list span{font-size:11px;white-space:normal;min-width:0}
.battle-compact .flip-heading{display:flex;flex:1;min-width:0;margin:0;gap:12px}
.battle-compact .flip-heading>div{margin-left:4px}
.battle-compact .flip-heading strong{font-size:13px}
.battle-compact .flip-heading small{font-size:10px;margin-top:4px}
.battle-compact #flip{min-height:44px;padding:10px 22px;gap:14px}
.battle-compact .battle-popover{position:relative;flex:none}
.battle-compact .battle-icon{display:flex;align-items:center;justify-content:center;gap:2px;flex-direction:column;width:44px;height:44px;cursor:pointer;border:1px solid #b89c6266;border-radius:6px;background:linear-gradient(#2c493b,#10291e);color:#eed5a0;list-style:none;user-select:none}
.battle-compact .battle-icon::-webkit-details-marker{display:none}
.battle-compact .battle-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.battle-compact .battle-icon span{font-size:24px;line-height:22px}.battle-compact .battle-icon small{font-size:8px;line-height:10px}
.battle-compact .battle-icon:focus-visible{outline:2px solid #f1d59a;outline-offset:3px}
.battle-compact .battle-popover[open]>.battle-icon{border-color:#f1d59a;background:#375641}
.battle-compact .battle-popover>.audio-panel,.battle-compact .battle-popover>.auto-flip-settings{position:absolute;bottom:54px;left:0;width:min(320px,calc(100vw - 54px));padding:16px;margin:0;border:1px solid #c4a35f;border-radius:8px;background:#102b24;box-shadow:0 8px 30px #0009;display:grid;grid-template-columns:1fr;gap:14px;z-index:10}
.battle-compact .battle-popover:not([open])>.audio-panel,.battle-compact .battle-popover:not([open])>.auto-flip-settings{display:none}
.battle-compact .audio-panel label{display:flex;justify-content:space-between;font-size:12px;gap:10px}
.battle-compact .audio-panel input[type=range]{width:150px;min-height:28px}
.battle-compact .audio-panel small{margin:0;width:auto;font-size:10px;line-height:1.5}
.battle-compact .auto-flip-settings small{margin:0;grid-column:auto}.battle-compact .auto-flip-settings select{width:100%;min-height:44px}
.battle-compact .flip-panel{padding-top:14px}
.battle-page .battle-compact:fullscreen .battle-viewport,.battle-page .battle-compact.mobile-expanded .battle-viewport{width:var(--battle-fit-width,100%);max-width:min(1280px,100%);margin-inline:auto}
.battle-page .battle-compact:fullscreen canvas,.battle-page .battle-compact.mobile-expanded canvas{width:100%;height:auto;max-height:none;aspect-ratio:1280/650}
/* Match the half-window layout on large screens; only the arena shrinks when
   height is scarce. Draw slots retain their readable size and remain in flow. */
.battle-page .battle-compact .battle-dock,.battle-page .battle-compact .flip-panel{max-width:1280px;width:100%;margin-inline:auto;box-sizing:border-box}
.battle-page .battle-compact:fullscreen,.battle-page .battle-compact.mobile-expanded{min-height:0;max-height:100dvh;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:auto}
@media(max-width:620px){
 .battle-compact .toolbar{padding:8px;gap:6px}.battle-compact .toolbar button{min-height:40px;font-size:10px;padding:8px}
 .battle-compact .toolbar #field-count{font-size:9px}.battle-compact .toolbar #status{font-size:9px}
 .battle-compact .war-meter{padding:6px 8px 14px;gap:10px;grid-template-columns:1fr 1fr}
 .battle-compact .war-label{font-size:9px}.battle-compact .war-gauge{height:22px}
 .battle-compact .battle-menu{padding:8px;gap:6px}.battle-compact .battle-icon{width:40px;height:44px}
 .battle-compact .flip-heading{gap:6px}.battle-compact .flip-heading>div{margin:0}
 .battle-compact .flip-heading strong{font-size:11px}.battle-compact .flip-heading small{font-size:8px;max-width:110px;line-height:1.5}
 .battle-compact #flip{min-width:0;min-height:44px;font-size:11px;padding:8px 10px;gap:6px}.battle-compact #flip span{font-size:8px}
 .battle-compact .auto-settings>.auto-flip-settings{left:-46px}
 .battle-compact .queue-button{min-width:74px;padding:0 5px}.battle-compact .queue-button strong{font-size:9px;gap:4px}.battle-compact .queue-button #queue-count{font-size:11px;padding:3px 4px}
 .battle-compact .flip-heading>div{max-width:80px}
}
/* Size the HUD from the battlefield, rather than window breakpoints. */
.battle-page .battle-compact .war-meter{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.875cqw,24px);padding:clamp(6px,.9375cqw,12px) clamp(8px,1.40625cqw,18px) clamp(10px,1.40625cqw,18px)}
.battle-page .battle-compact .war-side{min-width:0}
.battle-page .battle-compact .war-label{font-size:clamp(8px,.78125cqw,10px);margin-bottom:clamp(2px,.390625cqw,5px);line-height:1.5}
.battle-page .battle-compact .war-label>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.battle-page .battle-compact .war-label>b{flex:none}
.battle-page .battle-compact .war-gauge{height:clamp(20px,2.1875cqw,28px)}
.battle-page .battle-compact .timed-statuses{min-height:0;flex-wrap:nowrap;overflow-x:auto}