/* Two clear levels: navigation above, live match counters below. */
body.arena-battle-open #tab-arena #arena-battle { grid-template-rows: 84px 64px minmax(300px,1fr) auto; }
#tab-arena #arena-battle .arena-battle-hud { max-height: none; grid-template-columns: 40px minmax(0,1fr) 40px 40px; grid-template-rows: 44px 27px; gap: 0 10px; padding: 6px 10px 0; border: 1px solid #e2e4ec22; border-radius: 15px; background: #12151dd9; box-shadow: 0 8px 20px #0003; }
#arena-battle .battle-brand { gap: 9px; }
#arena-battle .battle-brand > svg { width: 26px; height: 26px; flex-basis: 26px; stroke-width: 2; }
#arena-battle .battle-brand b { color: #f5f5f7; font-size: 21px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
#arena-battle .battle-brand small { margin-top: 4px; color: #a8afbc; font-size: 8px; font-weight: 700; letter-spacing: .12em; line-height: 1; }
#arena-battle :is(.arena-battle-back,.battle-help-button,.battle-options summary) { width: 40px; min-width: 40px; height: 40px; min-height: 40px; border: 0; border-radius: 11px; background: #ffffff08; box-shadow: none; color: #dfe2e9; }
#arena-battle :is(.arena-battle-back,.battle-help-button) span { display: none; }
#arena-battle :is(.arena-battle-back,.battle-help-button) svg { width: 21px; height: 21px; stroke-width: 1.7; }
#arena-battle .arena-battle-back { grid-column: 1; grid-row: 1; }
#arena-battle .battle-brand { grid-column: 2; grid-row: 1; }
#arena-battle .battle-help-button { grid-column: 3; grid-row: 1; }
#arena-battle .battle-options { grid-column: 4; grid-row: 1; }
#arena-battle .battle-match-meta { grid-column: 1/-1; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 27px; padding-inline: 4px; border-top: 1px solid #ffffff0e; }
#arena-battle .battle-match-meta :is(.battle-mode-label,.arena-battle-score,#battle-round-badge) { display: flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: #b8bfcb; font: 600 10px/1 var(--font-body); white-space: nowrap; }
#arena-battle .battle-match-meta .arena-battle-score { color: #f0f1f5; font-weight: 800; font-size: 12px; letter-spacing: .08em; }
#arena-battle .battle-mode-label svg { width: 14px; height: 14px; fill: none; stroke: #bb8290; stroke-width: 1.5; }
#arena-battle .battle-options-menu { top: calc(100% + 12px); right: -3px; width: 208px; padding: 6px; border-color: #ffffff20; border-radius: 14px; background: #1b1e28; }
#arena-battle .battle-options-menu button { min-height: 44px; padding: 10px; border-radius: 8px; font-size: 12px; }
#arena-battle .battle-options-menu button svg { color: #bb8290; }
#arena-battle :is(button,summary):focus-visible { outline: 2px solid #f0b3c0; outline-offset: 3px; }
@media (hover:hover) { #arena-battle :is(.arena-battle-back,.battle-help-button,.battle-options summary):hover { background: #ffffff12; color: #fff; } #arena-battle .battle-options-menu button:hover { background: #ffffff0b; } }
@media (min-width:1000px) {
  body.arena-battle-open #tab-arena #arena-battle { grid-template-rows: 68px 68px minmax(300px,1fr) auto; }
  #tab-arena #arena-battle .arena-battle-hud { grid-template-columns: auto minmax(0,1fr) auto auto auto; grid-template-rows: 1fr; padding: 10px 12px; gap: 18px; }
  #arena-battle :is(.arena-battle-back,.battle-help-button) { width: auto; min-width: 96px; padding: 0 12px; gap: 7px; }
  #arena-battle :is(.arena-battle-back,.battle-help-button) span { display: inline; }
  #arena-battle .battle-help-button { grid-column: 4; }
  #arena-battle .battle-options { grid-column: 5; }
  #arena-battle .battle-match-meta { grid-column: 3; grid-row: 1; height: 40px; border: 0; padding: 0 16px; border-inline: 1px solid #ffffff12; gap: 20px; }
  #arena-battle .battle-match-meta :is(.battle-mode-label,#battle-round-badge) { font-size: 12px; }
  #arena-battle .battle-brand b { font-size: 24px; }
}
@media (max-width:359px) { #tab-arena #arena-battle .arena-battle-hud { gap: 0 6px; padding-inline: 6px; } #arena-battle .battle-brand { gap: 6px; } #arena-battle .battle-brand b { font-size: 19px; } }