/* ============================================================
   Shared battle layout (TT 2026-09-06, from Numbreon's idea 4 + option 5).
   One file for every battle page that uses the shared NPC engine markup:
   .arena / #battle-log / #move-panel (.move-select-card + .attack-card) /
   #rosters. assets/battle-layout.js wraps those siblings in .bl-row > .bl-main
   at load, so this file only has to lay out the wrapper.

   Desktop (>1100px):  [your team] [ arena            ] [their team]
                                   [toggle             ]
                                   [log | ATTACK | moves]
   Tablet  (761-1100): same middle block, both teams below it side by side.
   Phone   (<=760):    arena, moves, Attack zone, log, teams -- stacked.

   The Attack button keeps blinking to a random spot inside .attack-zone
   (jitterAttackButton in each page); only the zone's place on screen moved.
   Stat-change chips and status badges reserve their maximum height so the
   HP bars never move (TT). Specificity is kept at (0,2,0) or more so these
   rules beat each page's own single-class battle CSS regardless of order.
   ============================================================ */

body .battle-wrap { max-width: 1400px; }

.bl-row { display: grid; grid-template-columns: 220px minmax(0, 1fr) 220px; gap: 0 14px; align-items: start; }
.bl-row > .rosters { display: contents; margin: 0; }
.bl-row > .rosters > .roster-half:first-child { grid-column: 3; grid-row: 1; order: 0; }   /* opponent, right */
.bl-row > .rosters > .roster-half:last-child  { grid-column: 1; grid-row: 1; }             /* you, left */
.bl-row > .bl-main {
  grid-column: 2; grid-row: 1; min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(420px, 2.6fr) minmax(210px, 0.8fr);
  grid-template-areas:
    "arena  arena  arena"
    "toggle .      ."
    "log    zone   moves";
  gap: 0 14px; align-items: start;
}
/* Anything else that lives between the arena and the rosters (story
   progress bars etc.) spans the block and lands under the action row. */
.bl-main > * { grid-column: 1 / -1; }
.bl-main > .arena { grid-area: arena; padding: 12px 20px 14px; margin: 0 0 12px; align-items: start; }
.bl-main > #battle-log-toggle { grid-area: toggle; margin: 0 0 4px 0 !important; justify-self: start; }
.bl-main > .battle-log { grid-area: log; height: 214px; margin: 0; max-width: none; width: auto; }
.bl-main > #move-panel { display: contents; }
.bl-main .attack-card { grid-area: zone; padding: 12px; margin: 0; max-width: none; width: auto; }
.bl-main .attack-zone { height: 190px; }
.bl-main .attack-btn { width: 96px; height: 36px; line-height: 36px; font-size: 14px; padding: 0 10px; }
.bl-main .move-select-card { grid-area: moves; max-width: none; width: auto; margin: 0; }

/* Arena: shorter sprite boxes (sprites still native size), HP bars pinned. */
.bl-main .pp-sprite-box { height: 132px; }
.bl-main .pp-sprite { max-height: 120px; }
.bl-main [id$="-stage-chips"] { min-height: 44px; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; margin: 2px 0 4px !important; }
.bl-main .pp-status { height: 20px; min-height: 20px; margin: 0 0 4px; }

@media (max-width: 1100px) {
  .bl-row { grid-template-columns: minmax(0, 1fr); }
  .bl-row > .bl-main { grid-column: 1; grid-row: 1;
    grid-template-columns: minmax(190px, 0.8fr) minmax(360px, 2.4fr) minmax(210px, 0.8fr); }
  .bl-row > .rosters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; grid-column: 1; grid-row: 2; margin-top: 14px; }
  .bl-row > .rosters > .roster-half:first-child, .bl-row > .rosters > .roster-half:last-child { grid-column: auto; grid-row: auto; }
  .bl-row > .rosters > .roster-half:first-child { order: 1; }
}

@media (max-width: 760px) {
  .bl-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .bl-row > .bl-main { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .bl-main > * { order: 10; }
  .bl-main > .arena { order: 1; margin: 0; padding: 10px; gap: 6px; grid-template-columns: 1fr auto 1fr; }
  .bl-main .poke-panel.enemy { order: 2; } .bl-main .vs-label { order: 1; } .bl-main .poke-panel.player { order: 0; }
  .bl-main .pp-sprite-box { height: 92px; }
  .bl-main .pp-sprite { max-width: 90px; max-height: 80px; }
  .bl-main .pp-name { font-size: 13px; }
  .bl-main .hp-bar-wrap { max-width: 120px; }
  .bl-main [id$="-stage-chips"] { min-height: 88px; }   /* seven chips = four rows at phone width */
  /* Moves + Attack straight under the arena so both HP bars, the move and
     the button share the first screen; the log sits below. */
  .bl-main .move-select-card { order: 2; }
  .bl-main .attack-card { order: 3; }
  .bl-main .attack-zone { height: 130px; }
  .bl-main > #battle-log-toggle { order: 4; align-self: flex-end; }
  .bl-main > .battle-log { order: 5; height: 140px; }
  .bl-row > .rosters { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; }
  .bl-row > .rosters > .roster-half:first-child, .bl-row > .rosters > .roster-half:last-child { grid-column: auto; grid-row: auto; margin: 0; }
  .bl-row > .rosters > .roster-half:first-child { order: 1; }
  body .battle-header { flex-wrap: wrap; gap: 2px 10px; }
  body .battle-header h2 { width: 100%; order: 3; text-align: center; font-size: 15px; }
}