/*
 * Phone-width fixes for the workbench modes (Bot play, Bot vs Bot, Arena,
 * Position lab, Leaderboard). Linked from index.html under the same media
 * query as css/mobile.css, so a desktop browser never applies it.
 *
 * These modes are Jordan's workbench (BOBS.md, Article 5): nothing in here
 * hides, caps, or simplifies an option. Every rule groups, labels, stacks,
 * resizes, or scrolls. Class names and data attributes are the modes' own
 * contracts (see tests/36-mobile-workbench.test.js); they are styled, never
 * renamed.
 */

/* ---------- Button rows: never break a label across two lines ---------- */

/* "Start | Step | New game" at 360px: the row wraps before a button does. */
.button-row {
  flex-wrap: wrap;
}

.button-row button {
  flex: 1 1 auto;
  min-width: max-content;
  padding-left: 10px;
  padding-right: 10px;
}

/* ---------- Engine parameter forms (Bot play, Bot vs Bot) ---------- */

/* Groups read as sections when they run past a screen: a slightly bigger
   legend, a little more air, and the whole row is the tap target. */
.engine-params-group {
  padding: 6px 10px 8px;
  gap: 2px 14px;
}

.engine-params-group legend {
  font-size: 0.8rem;
}

.engine-params .field.inline {
  padding: 0 2px;
}

.engine-params .field.inline span {
  line-height: 1.3;
}

/* ---------- Bot vs Bot: the side boxes ---------- */

/* With Debug Bot on both sides the panel is a few screens long. The White or
   Black head sticks to the top of the screen while its own box scrolls past,
   so a thumb deep in a parameter list always knows whose bot it is editing.
   The box's own padding is folded into the head so it sits flush. */
.side-head {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: -10px -10px 0;
  padding: 10px;
  border-radius: 8px 8px 0 0;
  background: var(--panel-2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* ---------- Free play, Bot play, Bot vs Bot: the name plates ---------- */

/* Around the board (see mobile.css) the plates are a scoreboard: one line
   each, the taken pieces a little smaller so a long bot name and a row of
   pawns share the width. */
.plate {
  min-height: 30px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.85rem;
}

.plate-piece {
  width: 18px;
  height: 18px;
}

/* ---------- Bot vs Bot: the dashboard ---------- */

/* Under the board the controls read as a dashboard: status, Start | Step |
   New game, the pace, then the two side boxes. From 400px across (most
   phones sold since 2020) White and Black sit side by side, which halves
   the scroll through two parameter forms; the sticky heads still tell a
   thumb whose bot it is. Only Bot vs Bot builds a .side-box. */
#viz-controls:has(> .side-box) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

#viz-controls:has(> .side-box) > * {
  grid-column: 1 / -1;
}

@media (min-width: 400px) {
  #viz-controls:has(> .side-box) > .side-box {
    grid-column: auto;
  }
}

/* ---------- Arena ---------- */

/* Every board on one screen. The "Boards at once" option is untouched; the
   grid counts its own cells (:has on the nth child: "at least N boards") to
   pick how many go across and how many rows that makes, and each board is
   then capped by its share of the height, so six boards are two across and
   three down and all in view, and sixteen are four by four. --arena-chrome
   is what the screen spends above and below the grid; --arena-plates is a
   cell's own overhead (the two name plates, padding, gaps). Padding and gaps
   are tightened to give the boards the room. */
.arena-grid {
  --arena-across: min(var(--arena-cols, 3), 2);
  --arena-rows: 1;
  /* The deck's strip over the grid, measured into --deck-h by js/deck.js (0 when it is
     hidden), plus the bar and 18px of margins: main's padding above and below (6 + 6)
     and the board area's gap under the strip (6). The cells follow the strip by this
     calc alone; arena.js is untouched. */
  --arena-chrome: calc(18px + var(--deck-h, 0px) + var(--bar-h) + var(--safe-b));
  /* A playing cell at 390x844, measured: the "vs" line (14), the two-line name
     plate (31), padding (7), gaps (4) and the border (2) make 58, plus one so the
     three rows' sub-pixel rounding lands above the board area's edge; the idle
     plates reserve the same lines (min-heights below), so the ladder is one size
     idle and running. */
  --arena-plates: 59px;
  grid-template-columns: repeat(var(--arena-across), minmax(0, 1fr));
  gap: 4px;
  max-width: none;
}

.arena-grid:has(> :nth-child(3)) { --arena-rows: 2; }
.arena-grid:has(> :nth-child(5)) { --arena-rows: 3; }
/* One-line plates from three across: 12 + 13 with the same padding, gaps and border, measured at nine boards. */
.arena-grid:has(> :nth-child(7)) { --arena-across: 3; --arena-rows: 3; --arena-plates: 38px; }
.arena-grid:has(> :nth-child(10)) { --arena-rows: 4; }
.arena-grid:has(> :nth-child(13)) { --arena-across: 4; }

/* Everything a cell showed, it still shows, in the least chrome that reads: the boards get the room. */
.arena-cell {
  padding: 3px 3px 4px;
  gap: 2px;
  border-radius: 8px;
}

.arena-board {
  max-width: calc((100vh - var(--arena-chrome) - (var(--arena-rows) - 1) * 4px) / var(--arena-rows) - var(--arena-plates));
  max-width: calc((100dvh - var(--arena-chrome) - (var(--arena-rows) - 1) * 4px) / var(--arena-rows) - var(--arena-plates));
  margin-inline: auto;
}

/* Three or more across: the plates go to one line and the type shrinks. */
.arena-grid:has(> :nth-child(7)) .arena-opponent {
  font-size: 0.62rem;
}

.arena-grid:has(> :nth-child(7)) .arena-name {
  flex-wrap: nowrap;
  min-height: 1.2em;
  padding: 0 0 0 1.1em;
  font-size: 0.7rem;
}

/* The zero-height break element loses its full-width basis, so nothing wraps. */
.arena-grid:has(> :nth-child(7)) .arena-name::after {
  flex-basis: 0;
}

.arena-grid:has(> :nth-child(7)) .arena-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arena-grid:has(> :nth-child(7)) .arena-score,
.arena-grid:has(> :nth-child(7)) .arena-elo {
  order: 0;
  font-size: 0.62rem;
}

/* Four across: everything stays, in the smallest type that still reads. */
.arena-grid:has(> :nth-child(13)) .arena-opponent {
  font-size: 0.55rem;
}

.arena-grid:has(> :nth-child(13)) .arena-name {
  font-size: 0.6rem;
  padding-left: 1em;
}

.arena-grid:has(> :nth-child(13)) .arena-score,
.arena-grid:has(> :nth-child(13)) .arena-elo {
  font-size: 0.55rem;
}

/* An idle cell has no opponent yet and one word on its name plate; both
   plates still reserve the lines a playing cell fills (one and two), so the
   cells are the same height before Start as after it and --arena-plates is
   one number. */
.arena-opponent {
  min-height: 1.2em;
  font-size: 0.72rem;
  line-height: 1.2;
}

/* The plate is two lines on a phone: the bot's name, then its score and Elo
   pill. The side dot (::before, from style.css) is anchored at the plate's
   left edge so a long name never pushes it onto a line of its own, and the
   zero-height ::after break is what puts the score on the second line. */
.arena-name {
  position: relative;
  flex-wrap: wrap;
  row-gap: 0;
  min-height: 2.4em;
  padding: 0 1.1em;
  font-size: 0.82rem;
  line-height: 1.2;
}

.arena-cell[data-side] .arena-name::before {
  position: absolute;
  left: 0.2em;
  top: 0.3em;
}

.arena-name::after {
  content: "";
  flex-basis: 100%;
  height: 0;
  order: 1;
}

.arena-name-text {
  max-width: 100%;
}

.arena-score,
.arena-elo {
  order: 2;
}

/* An idle board has no Elo yet; the empty pill should not draw as a dash. */
.arena-elo:empty {
  padding: 0;
  border-color: transparent;
}

.arena-overlay-text {
  font-size: 1.05rem;
}

.arena-cell[data-delta]::after {
  top: 4px;
  right: 6px;
  font-size: 0.9rem;
}

/* The floating rating change sits over the opponent line; leave it room. */
.arena-cell[data-delta] .arena-opponent {
  padding-right: 3em;
}

/* ---------- Leaderboard ---------- */

.lb-chart {
  padding: 12px 12px 14px;
}

/* Table rows are tap targets on a phone: thumb-height, not mouse-height.
   The Arena standings share the class and get the same air. */
.lb-table td {
  padding: 8px 4px;
}

.lb-table th {
  padding: 6px 4px;
}

/* ---------- Position lab ---------- */

/* The piece palette shares the row equally and never wraps the eraser onto
   a line of its own; every tile is finger-sized. */
.palette {
  gap: 4px;
}

.palette-btn {
  flex: 1 1 0;
  width: auto;
  min-width: 36px;
  height: 44px;
}

.palette-btn .piece.icon {
  width: 34px;
  height: 34px;
}

/* ---------- Short landscape: the stage modes ---------- */

/* The panel is in the sheet, docked beside the board area (css/mobile-sheet.css),
   and the bar is a rail at the right edge with its own track in main
   (css/mobile-deck.css), so the stage has the width and the whole height. On
   its side the screen is wide and short: the ladder goes across rather than
   down, two rows at most, under the strip as measured (a wrapping row there,
   --deck-h as in portrait). */
@media (max-height: 520px) and (orientation: landscape) {
  .arena-grid {
    --arena-across: min(var(--arena-cols, 3), 3);
    --arena-rows: 1;
    /* main's padding above and below (6 + 6) and the board area's gap under the strip (6), plus two so sub-pixel rounding never crosses the area's edge (at 19 the grid ended 1px past it and scrolled); no bar in the sum. */
    --arena-chrome: calc(var(--deck-h, 0px) + 20px);
  }

  .arena-grid:has(> :nth-child(4)) { --arena-rows: 2; }
  .arena-grid:has(> :nth-child(7)) { --arena-across: 4; --arena-rows: 2; }
  .arena-grid:has(> :nth-child(9)) { --arena-across: 5; }
  .arena-grid:has(> :nth-child(11)) { --arena-across: 6; }
  .arena-grid:has(> :nth-child(13)) { --arena-across: 8; }

  /* Three across leaves about 150px a cell: "Lost on time" still fits the pill. */
  .arena-overlay-text {
    font-size: 0.95rem;
  }
}