/* Logical desktop dimensions remain usable; zoom fits them to the viewport. */
@media (min-width: 751px) {
  body[data-game="battleground"] .game-shell {
    --rail: clamp(190px, calc(var(--layout-width, 100vw) * .11), 280px);
    --right-rail: clamp(170px, calc(var(--layout-width, 100vw) * .09), 240px);
    --shop-height: clamp(164px, calc(var(--layout-height, 100dvh) * .19), 236px);
    zoom: var(--arena-zoom, 1);
    width: var(--layout-width, 100%);
    height: var(--layout-height, 100dvh);
    min-height: 0;
    max-width: none;
    padding: 10px;
    gap: 10px;
    grid-template-rows: minmax(0, 1fr) max-content;
  }
  body[data-game="battleground"] .play-layout {
    grid-template-columns: var(--rail) minmax(0, 1fr) var(--right-rail);
  }
  body[data-game="battleground"] .arena-column {
    grid-template-rows: minmax(0, 1fr) clamp(94px, calc(var(--layout-height, 100dvh) * .08), 110px);
  }
  body[data-game="battleground"] .arena {
    min-height: 0;
    --unit-height: clamp(100px, calc((var(--layout-height, 100dvh) - 450px) / 4), 176px);
  }
  body[data-game="battleground"] .rivals-panel { display: flex; flex-direction: column; }
  body[data-game="battleground"] .shop-dock {
    grid-template-columns: var(--rail) minmax(0, 1fr) var(--right-rail);
    min-height: 0;
  }
  body[data-game="battleground"] .shop { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body[data-game="battleground"] .shop-heading > span { display: inline; }
  body[data-game="battleground"] .bench { grid-template-columns: repeat(10, minmax(0, 74px)); }
  body[data-game="battleground"] .hero-info-panel {
    position: relative;
    inset: auto;
    grid-column: 3;
    grid-row: 1;
    width: 100%;
    height: 100%;
    max-height: none;
  }
  body[data-game="battleground"] .play-layout:has(#hero-info-panel:not([hidden])) .rivals-panel { display: none; }
  body[data-game="battleground"] .play-layout:has(#hero-info-panel:not([hidden])) {
    grid-template-columns: var(--rail) minmax(0, 1fr) var(--hero-panel-width);
  }
}

@media (max-width: 750px) {
  body[data-game="battleground"] .game-shell { height: auto; }
  body[data-game="battleground"] .shop { grid-template-columns: repeat(5, minmax(110px, 1fr)); overflow-x: auto; }
  body[data-game="battleground"] .shop-area { overflow: hidden; }
}