/* Тоглох (/play, /play/arena, /play/computer, /play/local): the game screen
   beside its panels. The board is as large as the screen allows with both
   player strips in view (spec §7.3); on phones it is full width and the
   panels follow it. */
@layer page {
  .play {
    --chrome-h: 290px;
    --board-max: min(100%, 720px, calc(100svh - var(--chrome-h)));
    display: grid;
    gap: var(--sp-5);
    max-width: 1200px;
    margin: 0 auto;
  }
  .play-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); grid-column: 1 / -1; }
  .play-board { display: grid; gap: var(--sp-2); align-content: start; }
  /* While a game shows, its own panel (the moves, ◀ ▶, the game's buttons) comes first beside the board; the tab's
     panel (a lobby, the bot list, the engine's lines) follows. */
  .play-side > .play-game { order: -1; }
  .play-board player-strip, .play-board .eval { width: min(100%, var(--board-max)); margin-inline: auto; }
  .play-status { min-height: 1.5em; margin: 0; font-weight: var(--fw-bold); text-align: center; }
  .play-status.is-alert { color: var(--bad); }
  .play-review { justify-content: center; }
  .play-steps { justify-content: center; gap: var(--sp-1); }
  .play-actions { gap: var(--sp-2); }
  .play-result { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); font-weight: var(--fw-heavy); text-align: center; }
  .play-result p { margin: 0; }
  /* The player's big avatar acting out the result (avatar studio spec §5.3); empty without a face. */
  .play-result__av { display: flex; justify-content: center; margin-bottom: var(--sp-2); }
  .play-result__av:empty { display: none; }
  .play-offer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-md); }
  .play-empty { margin: 0; padding: var(--sp-4); }
  .play-bots { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-2); }
  .play-bot { display: grid; justify-items: start; gap: 2px; min-height: 44px; padding: var(--sp-3); border: 2px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; }
  .play-bot[aria-pressed='true'] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
  .play-bot__face { font-size: var(--fs-24); }
  .play-bot__name { font-weight: var(--fw-heavy); }
  .play-bot__blurb, .play-bot__elo { color: var(--muted); font-size: var(--fs-13); }
  /* Phones: a lobby comes first, as on today's pages; the board returns with a game. */
  .play[data-idle='true'] .play-board { display: none; }
  @media (min-width: 700px) {
    .play { --chrome-h: 260px; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
    .play[data-idle='true'] .play-board { display: grid; }
  }
  @media (min-width: 1100px) {
    .play { --chrome-h: 230px; grid-template-columns: minmax(0, 1fr) 340px; }
  }
  .play-conn { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
  .play-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--sp-3); }
  .fr-dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--line-strong); }
  .fr-dot[data-on='true'] { background: var(--good); }
  .play-chat__log { max-height: 10rem; overflow-y: auto; padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
  .play-chat__log:empty { display: none; }
  .play-chat__msg { padding: 2px 0; overflow-wrap: anywhere; }
  .play-chat__input { flex: 1 1 10rem; min-width: 0; }
  .arena-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
  .arena-me { align-items: center; }
  .arena-tcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
  .arena-tc { flex-direction: column; justify-content: center; gap: 0; min-height: 52px; }
  .arena-tc small { color: inherit; font-size: var(--fs-12); opacity: .85; }
  .arena-tc[aria-checked='true'] { background: var(--primary); border-color: transparent; color: var(--on-primary); }
  .arena-room__code { font-size: var(--fs-30); letter-spacing: .12em; }
  .arena-code-input { flex: 1 1 8rem; min-width: 0; letter-spacing: .08em; text-transform: uppercase; }

  /* Шинжилгээ (play/analysis.js): the engine's lines, each its score and its first moves. */
  .an-note { margin: 0; }
  .an-note:empty, .an-lines:empty { display: none; }
  .an-lines { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
  .an-lines li { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--surface-2); }
  .an-score { flex: none; min-width: 3.5em; }
  .an-pv { min-width: 0; overflow-wrap: anywhere; }
  .an-paste { min-height: 5.5rem; resize: vertical; font-size: var(--fs-13); overflow-wrap: anywhere; }

  /* Байрлал засах (board/setup.js): the tray in two rows, White's and Black's; the grid wears the board's theme. */
  .bs-tray { display: grid; grid-template-columns: repeat(6, var(--control-h)); gap: var(--sp-1); }
  .bs-piece { width: var(--control-h); height: var(--control-h); padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--piece-ground); cursor: pointer; }
  .bs-piece img, .bs-sq img { display: block; width: 100%; height: 100%; pointer-events: none; }
  .bs-tray [aria-pressed='true'] { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
  .bs-tray .btn { grid-column: 1 / -1; justify-self: start; }
  .bs-tray .btn[aria-pressed='true'] { background: var(--primary-soft); }
  .bs-grid { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(8, 1fr); }
  .bs-row { display: grid; grid-template-columns: repeat(8, 1fr); min-height: 0; }
  .bs-sq { position: relative; min-width: 0; padding: 0; border: 0; border-radius: 0; background: var(--sq-light); cursor: pointer; touch-action: manipulation; }
  .bs-sq[data-shade='dark'] { background: var(--sq-dark); }
  .bs-sq.is-picked { box-shadow: inset 0 0 0 100vmax var(--sq-select); }
  .bs-sq:focus-visible { z-index: 1; outline: 3px solid var(--focus); outline-offset: -3px; }
  .bs-castles { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
  .bs-castles legend { width: 100%; }
  .bs-check { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--control-h); }
  .bs-check input { width: 20px; height: 20px; margin: 0; }
  .bs-fen { font-size: var(--fs-13); }
  @media (min-width: 1100px) {
    .bs-check { min-height: var(--control-h-sm); }
  }
}