/* Battle fit (Phase 1 groundwork, Batch B; audit H1): the Skirmish board, your hand, End turn and the Commander power fit
   one laptop screen without page scrolling. Loaded last. Desktop two-column layout only (wider than 1050px); the
   stacked tablet/phone layouts below that keep their existing page-scrolling rules.
   The page becomes a 100dvh column: header, then the battle grid. Inside the arena the two board rows share the height
   left after the Commanders, the midline and the hand; the hand gets a viewport-driven height (--fit-hand-h).
   Collectible faces size from their slot (container query units) and bake at the size shown (collectible-cards.mjs). */

/* ---- Header: the shared site nav (site-nav.mjs, site-nav.css) in its compact battle form: icons only, shorter buttons ---- */

@media (min-width:1051px){
  /* ---- Page frame ------------------------------------------------------------------------------------------ */
  body:has(.game-layout){display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:0}
  body:has(.game-layout)>header{flex:none;padding-top:5px;padding-bottom:5px}
  body:has(.game-layout)>main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin:0 auto;padding-top:8px;padding-bottom:8px}
  .game-layout{--fit-hand-h:clamp(158px,calc(26.5dvh + 4px),300px);--fit-card-h:calc(var(--fit-hand-h) - 14px);
    flex:1 1 auto;min-height:0;height:100%;grid-template-rows:minmax(0,1fr);align-items:stretch}

  /* ---- Arena column: fixed bands plus two elastic board rows ------------------------------------------------- */
  .game-layout>.arena{display:flex;flex-direction:column;min-height:0;height:100%;padding:24px clamp(18px,2vw,42px) 6px}
  .game-layout>.arena>*{flex:none}
  .game-layout>.arena>.theater-label{top:6px}
  /* Each side's front line: its Station dock (station-dock.css) at the left flank, then the board row. */
  .game-layout>.arena>.front-line{flex:1 1 0;min-height:92px}
  .game-layout>.arena>.front-line>.board-row{flex:1 1 0;min-height:0;container-type:size;padding-top:5px;padding-bottom:5px;
    --cf-unit-w:calc(100cqh * .716)}
  .game-layout>.arena>.front-line>.station-dock{margin-top:5px;margin-bottom:5px}
  .game-layout>.arena>.midline{height:24px;margin-top:0;margin-bottom:0}
  .game-layout>.arena>.hand{height:var(--fit-hand-h);min-height:0;padding-top:8px;padding-bottom:4px;align-items:flex-end}

  /* Enemy hand (card backs) moves into the top rail beside the theatre name instead of taking its own band. */
  .game-layout>.arena>.enemy-hand{position:absolute;top:5px;right:34px;z-index:3;height:17px;margin:0;gap:3px;pointer-events:auto}
  .game-layout>.arena>.enemy-hand .card-back{width:12px;height:17px;font-size:9px;line-height:15px;border-radius:2px}
  .game-layout>.arena>.enemy-hand .card-back.revealed{width:auto;max-width:96px;padding:1px 5px;white-space:nowrap;text-overflow:ellipsis}

  /* Commander bars: compact height, same content. */
  .game-layout>.arena>.commander{min-height:0;padding-top:4px;padding-bottom:4px}
  .game-layout .arena .commander .commander-portrait{flex-basis:clamp(38px,5.4dvh,58px);width:clamp(38px,5.4dvh,58px);height:clamp(38px,5.4dvh,58px)}
  .game-layout .arena .commander>img.commander-faction{width:clamp(28px,4dvh,44px);height:clamp(28px,4dvh,44px);padding:4px}
  .game-layout .arena .commander .name small{margin-top:1px}
  .game-layout .arena .commander .health{font-size:22px}
  .game-layout .arena .commander-power{padding-top:3px;padding-bottom:3px}
  .game-layout .arena .commander-power .power-orb{width:30px;height:30px}

  /* Traps stay in flow, compacted. (Stations moved into the front-line docks above.) */
  .game-layout>.arena>.trap-zone{padding:3px 8px;margin:2px 0}

  /* ---- Board units --------------------------------------------------------------------------------------------- */
  .game-layout .arena .board-row>.slot{height:auto;max-height:none;align-self:stretch;min-height:0}
  /* Classic: the art takes what the row leaves after the name, types, effects and stats. */
  .game-layout .arena .board-row>.unit:not(.cf-on){height:auto;min-height:0;max-height:none;aspect-ratio:auto;align-self:stretch}
  .game-layout .arena .board-row>.unit:not(.cf-on)>img{flex:1 1 0;min-height:18px;height:auto;max-height:none;aspect-ratio:auto;object-fit:cover;object-position:50% 22%}
  .game-layout .arena .board-row>.unit:not(.cf-on) .unit-name{min-height:0;padding:2px 4px;font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .game-layout .arena .board-row>.unit:not(.cf-on) .unit-types{font-size:10px;padding-top:1px;padding-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .game-layout .arena .board-row>.unit:not(.cf-on) .effect-rack{padding:2px 3px;gap:2px}
  .game-layout .arena .board-row>.unit:not(.cf-on) .unit-stats{margin-top:0;padding-top:2px;padding-bottom:2px;font-size:15px}
  /* Collectible: width follows the row height (--cf-unit-w above), so the face keeps its .716 ratio and never overflows. */
  .game-layout .arena .board-row>.unit.cf-on{align-self:center;max-width:100%}

  /* ---- Hand ------------------------------------------------------------------------------------------------------ */
  /* The hand is a size container: a card is as tall as the band allows, narrowed so seven cards fit side by side
     (--fit-w); from the eighth card on, neighbours overlap instead of the hand scrolling sideways. */
  .game-layout>.arena>.hand{container-type:size;gap:0;--n:1}
  .game-layout>.arena>.hand:has(>.hand-card:nth-child(2)){--n:2}
  .game-layout>.arena>.hand:has(>.hand-card:nth-child(3)){--n:3}
  .game-layout>.arena>.hand:has(>.hand-card:nth-child(4)){--n:4}
  .game-layout>.arena>.hand:has(>.hand-card:nth-child(5)){--n:5}
  .game-layout>.arena>.hand:has(>.hand-card:nth-child(6)){--n:6}
  .game-layout>.arena>.hand:has(>.hand-card:nth-child(7)){--n:7}
  .game-layout>.arena>.hand:has(>.hand-card:nth-child(8)){--n:8}
  .game-layout>.arena>.hand:has(>.hand-card:nth-child(9)){--n:9}
  .game-layout>.arena>.hand:has(>.hand-card:nth-child(10)){--n:10}
  .game-layout>.arena>.hand:has(>.hand-card:nth-child(11)){--n:11}
  .game-layout>.arena>.hand:has(>.hand-card:nth-child(12)){--n:12}
  .game-layout .arena .hand>.hand-card{--fit-w:min(calc(var(--fit-card-h) * .716),calc((100cqw - 56px) / 7));
    width:var(--fit-w);flex:0 0 var(--fit-w);height:var(--fit-card-h);min-height:0;max-width:none;max-height:none;display:flex;flex-direction:column}
  .game-layout .arena .hand>.hand-card+.hand-card{margin-left:min(8px,calc((100cqw - 4px - var(--n) * var(--fit-w)) / (var(--n) - 1)))}
  .game-layout .arena .hand>.hand-card:is(:hover,:focus-visible,.selected){z-index:7}
  .game-layout .arena .hand>.hand-card:not(.cf-on){padding-top:24px}
  .game-layout .arena .hand>.hand-card:not(.cf-on)>img{flex:1 1 0;min-height:24px;height:auto;max-height:none;aspect-ratio:auto;object-fit:cover;object-position:50% 25%}
  .game-layout .arena .hand>.hand-card:not(.cf-on) .hand-name{min-height:0;padding:3px 7px 2px;font-size:11px;line-height:1.2}
  .game-layout .arena .hand>.hand-card:not(.cf-on) .unit-types{padding-top:1px;padding-bottom:1px;font-size:10px}
  .game-layout .arena .hand>.hand-card:not(.cf-on) .hand-text{max-height:none;flex:none;font-size:10px;line-height:1.3;padding:1px 7px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .game-layout .arena .hand>.hand-card:not(.cf-on) .hand-stats{padding:2px 7px 3px;font-size:12px}
  .game-layout .arena .hand>.hand-card.cf-on{height:calc(var(--fit-w) / .716)!important;aspect-ratio:.716}

  /* ---- Side panel: its own scroll; End turn stays at the top ---------------------------------------------------- */
  .game-layout>.side-panel{height:100%;max-height:none;min-height:0;overflow:auto;overscroll-behavior:contain}
  .game-layout>.side-panel>.panel{flex:none}
  .game-layout>.side-panel .panel:first-child .help{font-size:11px;line-height:1.4;margin:8px 0 0}
  /* While a card or action is selected, the generic help gives its room to the Confirm/Cancel controls. */
  .game-layout>.side-panel:has(#action-panel .selection-buttons) .panel:first-child .help{display:none}
  .game-layout>.side-panel .selection-art{max-height:clamp(70px,14dvh,160px)}
}

/* Short desktop screens (1366x768, 1280x720, 1536x864): trim the chrome a little more. */
@media (min-width:1051px) and (max-height:880px){
  body:has(.game-layout)>header .brand small{display:none}
  .game-layout>.side-panel>.panel{padding:10px 12px}
  .game-layout .side-panel .turn-button{padding-top:9px;padding-bottom:9px;margin-top:6px}
}

/* ---- Opening hand (mulligan): cards, text and Deploy on one screen ----------------------------------------------- */
@media (min-width:700px){
  body:has(.mulligan)>header{padding-top:5px;padding-bottom:5px}
  main:has(>.mulligan){padding-top:10px;padding-bottom:10px}
  .mulligan.panel{padding:clamp(12px,2dvh,22px) 22px}
  .mulligan h1{font-size:clamp(22px,4.2dvh,40px);margin:4px 0 6px}
  .mulligan .quiet{margin:4px 0}
  .mulligan .hand{padding-top:8px;padding-bottom:8px}
  .mulligan .hand>.hand-card:not(.cf-on)>img{height:clamp(90px,calc(100dvh - 520px),300px);aspect-ratio:auto;object-fit:cover;object-position:50% 25%}
  .mulligan .hand{container-type:inline-size}
  .mulligan .hand>.hand-card.cf-on{--mull-w:min(calc(clamp(180px,calc(100dvh - 330px),430px) * .716),calc((100cqw - 48px) / 5));
    width:var(--mull-w);flex:0 0 var(--mull-w);max-width:none;height:calc(var(--mull-w) / .716)!important;aspect-ratio:.716}
  .mulligan #begin{margin-top:10px;padding-top:12px;padding-bottom:12px}
}