/* The in-app game screen, rebuilt for the site: top bar, board on the left,
 * player tabs / move history / transport controls on the right.
 *
 * Both interactive pages (play.html, puzzle.html) use this file, so they are
 * the same screen with different contents. The board itself stays in the
 * shared board.css so its tiles, pieces and overlays match the app.
 *
 * The app paints this screen on dark blue; the site is light paper, and the
 * site wins here — the tokens below are the paper ones from styles.css.
 */

:root {
  --app-text: var(--ink);
  --app-muted: var(--muted);
  --app-line: var(--line);
  --app-panel: var(--paper-strong);
  --app-panel-soft: var(--paper);
  --app-blue: #2b6f93;
  --app-gold: var(--accent-dark);
  --app-green: #2b7d5f;
  --app-red: #b1453a;
}

.app-page {
  color: var(--app-text);
}

.app-shell {
  width: min(1560px, 100%);
  min-height: calc(100vh - 52px);
  margin: 0 auto;
  padding: 28px clamp(16px, 3vw, 52px) 44px;
}

/* --- top bar --------------------------------------------------------------- */

.app-topbar {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.back-link {
  color: var(--app-text);
  font-size: 3.6rem;
  font-weight: 300;
  line-height: 0.6;
  text-decoration: none;
}

.back-link:hover { color: var(--app-blue); }

.app-title { text-align: center; }

.app-kicker {
  margin: 0 0 6px;
  color: var(--app-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.app-title h1 {
  margin: 0;
  color: var(--app-text);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  letter-spacing: -0.03em;
}

.app-top-actions {
  display: flex;
  gap: 14px;
}

.app-action,
.transport-button,
.exit-button {
  border: 1px solid var(--app-line);
  border-radius: 18px;
  color: var(--app-text);
  background: var(--app-panel);
  box-shadow: var(--shadow);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.app-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 168px;
  min-height: 64px;
  padding: 0 22px;
  font-size: 1.05rem;
}

.app-action:hover,
.transport-button:not(:disabled):hover,
.exit-button:hover {
  border-color: rgba(43, 111, 147, 0.4);
  background: #fff;
}

.app-action-icon,
.app-action-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: var(--app-blue);
  background: rgba(43, 111, 147, 0.12);
  font-size: 1.25rem;
}

/* --- layout ---------------------------------------------------------------- */

.app-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(340px, 0.88fr);
  gap: clamp(22px, 3vw, 56px);
  align-items: start;
}

.board-column { min-width: 0; }

.app-board-frame {
  width: min(100%, 820px);
  margin: 0 auto;
}

.board-caption {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  color: var(--app-muted);
  font-size: 0.78rem;
  text-align: center;
}

.engine-badge {
  padding: 6px 10px;
  border: 1px solid rgba(43, 111, 147, 0.3);
  border-radius: 999px;
  color: var(--app-blue);
  background: rgba(43, 111, 147, 0.1);
  font-weight: 700;
}

.engine-badge.is-ready {
  border-color: rgba(43, 125, 95, 0.34);
  color: var(--app-green);
  background: rgba(43, 125, 95, 0.1);
}

.engine-badge.is-fallback {
  border-color: rgba(180, 140, 60, 0.4);
  color: var(--app-gold);
  background: var(--accent-soft);
}

/* --- sidebar --------------------------------------------------------------- */

.game-sidebar {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.player-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
  border: 1px solid var(--app-line);
  border-radius: 18px;
  background: var(--app-panel-soft);
}

.player-tab {
  padding: 13px 16px;
  border-radius: 13px;
  color: var(--app-muted);
  font-size: 0.98rem;
  font-weight: 700;
  text-align: center;
}

.player-tab.is-active {
  color: var(--app-gold);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(180, 140, 60, 0.45);
}

.sidebar-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.sidebar-heading-row h2 {
  margin: 0;
  color: var(--app-muted);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.game-status {
  margin: -6px 0 0;
  color: var(--app-gold);
  font-weight: 700;
  min-height: 1.6em;
}

.game-status.is-wrong { color: var(--app-red); }
.game-status.is-solved { color: var(--app-green); }

/* Move notation is Latin letters and digits and reads left to right, whatever
 * the page around it does. */
[dir="rtl"] .move-history {
  direction: ltr;
}

.move-history {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  column-gap: 1.1em;
  min-height: 104px;
  max-height: 48vh;
  margin: 0;
  padding: 20px 24px 24px;
  overflow: auto;
  list-style: none;
  border: 1px solid var(--app-line);
  border-radius: 20px;
  color: var(--app-text);
  background: var(--app-panel);
  box-shadow: inset 0 1px 0 #fff;
  font-size: clamp(0.9rem, 1.2vw, 1.08rem);
  line-height: 1.85;
  font-variant-numeric: tabular-nums;
}

/* The empty-state text comes from the markup (data-empty), not from this file:
   a string in a CSS content: property is invisible to tool/site_i18n.py, so it
   would stay English on all four translated copies of the page. */
.move-history:empty::before {
  content: attr(data-empty);
  color: var(--app-muted);
  font-size: 0.88rem;
  font-style: italic;
}

/* A wrapping run of moves, like the app's history panel. The list is a flex
   container because the entries are appended with no whitespace between them
   (see move-timeline.js), so inline boxes would have no break opportunity and
   the whole game would sit on one line. */
.move-history li {
  white-space: nowrap;
}

.move-history li.is-viewed { color: var(--app-gold); }

/* The promotion picker, shared by the game and the puzzle: one button per piece
   the promoting side may choose, which on a variant side includes the compound
   ones. */
.promotion-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.promotion-choice-label {
  width: 100%;
  margin: 0;
  color: var(--app-muted);
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.transport-controls {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.transport-button {
  min-height: 62px;
  border-radius: 15px;
  color: var(--app-blue);
  background: rgba(43, 111, 147, 0.08);
  font-size: 1.5rem;
  line-height: 1;
}

.transport-button-play {
  color: var(--app-green);
  border-color: rgba(43, 125, 95, 0.4);
  background: rgba(43, 125, 95, 0.12);
}

.transport-button:disabled { cursor: not-allowed; opacity: 0.35; }

.exit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60px;
  border-radius: 18px;
  color: var(--app-text);
  font-size: 1.02rem;
}

.exit-button span { color: var(--app-red); font-size: 1.4rem; }

/* `hidden` must win over the display rules above. */
.game-sidebar [hidden] { display: none; }

/* What a finished game or a solved puzzle turns into. The end of a game is the
 * one moment the player is definitely looking at this panel, so it is the one
 * place worth offering the next thing to do. */
.result-card {
  padding: 18px 20px;
  border: 1px solid rgba(180, 140, 60, 0.35);
  border-radius: 18px;
  background: var(--accent-soft);
}

.result-card h2 { margin: 0 0 8px; font-size: 1.2rem; }
.result-card p { margin: 0 0 14px; }
.result-card .button { width: 100%; }

.result-card-actions {
  display: grid;
  gap: 8px;
}

/* --- responsive ------------------------------------------------------------ */

@media (max-width: 1050px) {
  .app-layout { grid-template-columns: minmax(0, 1fr); }
  .app-board-frame { max-width: 720px; }
  .game-sidebar { width: min(100%, 720px); margin: 0 auto; }
  .move-history { max-height: 340px; }

  /* Whose move it is belongs next to the board, and in one column the sidebar
     is below the board — far below it on a phone, where the strip is the first
     thing scrolled off. `display: contents` drops the sidebar's own box so its
     children become items of this grid, which is what lets `order` lift the
     strip past the board. The markup keeps the strip where it belongs (in the
     sidebar, next to the history it labels) and wide screens never see any of
     this. The sidebar's own 18px gap has to be restated for the same reason:
     its box, and with it the gap, is gone. */
  .app-layout.has-turn-strip { row-gap: 18px; }
  .app-layout.has-turn-strip > .game-sidebar { display: contents; }
  .app-layout.has-turn-strip > .game-sidebar > * { width: min(100%, 720px); margin-inline: auto; }
  .app-layout.has-turn-strip .turn-strip { order: -1; }
}

/* The phone budget: the nav takes two rows here, so everything above the board
 * is squeezed until the board itself clears the fold on a 390x844 screen —
 * that board is the whole reason the page exists. */
@media (max-width: 720px) {
  .app-shell { padding: 12px 12px 26px; }
  .app-topbar { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; margin-bottom: 12px; }
  .back-link { font-size: 2.4rem; }
  .app-top-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
  .app-action { min-width: 0; min-height: 44px; padding: 0 10px; border-radius: 14px; font-size: 0.85rem; }
  .app-action-icon { width: 26px; height: 26px; border-radius: 8px; font-size: 0.95rem; }
  .app-title { text-align: start; }
  .app-kicker { margin-bottom: 2px; font-size: 0.56rem; }
  .app-title h1 { font-size: 1.55rem; }
  .board-caption { font-size: 0.68rem; }
  .move-history { min-height: 82px; max-height: 240px; padding: 14px 16px; }
  .transport-controls { gap: 8px; }
  .transport-button { min-height: 52px; font-size: 1.25rem; }
  .sidebar-heading-row { align-items: flex-start; flex-direction: column; }
}