/* ============================================================
   Shared battle layout (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. 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; }
}

@media (max-width: 600px) {
  .result-card { padding: 22px 18px; border-radius: 16px; max-width: 340px; }
  .result-title { font-size: 19px; }
  .result-sub { font-size: 13.5px; margin-bottom: 16px; }
  .result-card .btn { font-size: 14px; padding: 10px 16px; }
}