/**
 * The Games screen.
 *
 * Borrows build.css for the shared furniture — .bar, .panel, .btn, .row,
 * .hint, .connline — so a theme edit reaches this page too. Only what is
 * genuinely new to this screen lives here.
 */

/* ── this page scrolls ────────────────────────────────────────────────────
   It borrows build.css, and build.css says `body { overflow: hidden }` — the
   Build screen is exactly one window tall and never scrolls. That rule came
   here with the rest of the furniture, and inside the Build screen's Games
   iframe it meant everything past the fold was simply unreachable: "Your
   games" and "Worth preparing" were both below the Lichess panel and neither
   could be got to at all, with no scrollbar to say so.

   `.gameslayout` takes the height the body has and scrolls inside it, rather
   than the body being let go — so the page behaves the same framed and
   standalone. */
.gameslayout {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-width: 56.25rem;
  width: 100%;
  margin: 0 auto;
  padding: 1.375rem;
}

/* ── filter rows ──────────────────────────────────────────────────────────
   The active filter has to be obvious: without it, a list filtered down to
   three rows reads as "you have three games". */

.filters { margin: 0.75rem 0 0.625rem; }

.filters .btn.is-on {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: var(--ui-accent-text);
}

.gsummary {
  font-size: 0.8125rem; /* 13px */
  color: var(--ui-text);
}

/* ── the game list ── */

/* Its own scroll, so a synced account with four hundred games does not turn
   the page into one enormous scroll with the Lichess panel left far above it.
   The cap is in `vh` rather than pixels so a short window gets a short list and
   a tall one gets a tall one.

   It was originally here to keep "Worth preparing" above the fold. That panel
   left on 2026-09-04 and the cap stayed, because keeping the account controls
   reachable is reason enough on its own. */
.gamelist {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  /* 2026-09-13: stays `vh`, not `dvh`. This is a PROPORTION of the window, not
     a "fit the window exactly" cap — the list has its own scrollbar, so being
     a few percent generous hides nothing, while `dvh` would re-measure the list
     every time the URL bar moved. `dvh` is for boxes whose bottom edge has to
     land on the bottom of the screen; this one's does not. */
  max-height: 46vh;
  min-height: 7.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.gamerow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-input-bg);
  font-size: 0.8125rem; /* 13px */
}

/* A coloured left edge, so scanning the list for the games that went wrong
   does not mean reading every row. */
.gamerow.deviated { border-left: 3px solid var(--status-down); }
.gamerow.opponent-deviation { border-left: 3px solid var(--ui-accent); }
.gamerow.in-repertoire { border-left: 3px solid var(--status-up); }
.gamerow.unanalyzable { border-left: 3px solid var(--ui-dim); }

.gametext { flex: 1 1 auto; overflow-wrap: anywhere; }

/* Wraps, since "Build this line" joined the row on 2026-09-15: text, a button
   and a link do not fit one line of a phone, and a squeezed sentence is worse
   than a button on the line below it. */
.gamerow { flex-wrap: wrap; }
.gamerow .buildline { flex: 0 0 auto; white-space: nowrap; }

/* ── "This is a deviation from your repertoire" ──────────────────────────
   The dialog for a game where YOU left the repertoire. build.css has no dialog
   rule, so the frame is here — the same panel, line and radius as everything
   else, so a theme edit reaches it. */
dialog.devdialog {
  color: var(--ui-text);
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  padding: 1.125rem 1.25rem;
  width: min(34rem, 94vw);
  max-height: 92vh;
  overflow-y: auto;
}
dialog.devdialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.devdialog h2 { margin: 0 0 0.625rem; font-size: 1rem; line-height: 1.35; }
.devdialog p.hint { margin: 0.375rem 0; }

/* The three answers, one under the other and full width: they are sentences,
   not labels, and the first one does something that needs reading. */
.devchoices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.875rem 0 0.5rem;
}
.devchoices[hidden] { display: none; }
.devchoices .btn { width: 100%; text-align: left; white-space: normal; }

.devcompare { margin-top: 0.75rem; }
.devprogress .row { margin-top: 0.375rem; }
.devevals {
  list-style: none;
  margin: 0.625rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.875rem;
}
.devevals li {
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-input-bg);
}
.devevals li.mine { border-left: 3px solid var(--status-down); }
.devscore { font-variant-numeric: tabular-nums; }
.devfoot { margin-top: 0.5rem; }

.gamerow a {
  color: var(--ui-accent);
  text-decoration: none;
  font-size: 0.75rem;
  white-space: nowrap;
}
@media (hover: hover) { .gamerow a:hover { text-decoration: underline; } }

/* ── preparation ──
   .preplist, .preprow and .prepdetail were here, dressing the "Worth
   preparing" panel: the column, the full-width left-aligned row button, and
   the monospace block a row opened into. The panel came out of games.html on
   2026-09-04 and these had nothing left to style.

   build.css has a note of its own about the same three class names — that copy
   was already dead when the Prep panel left the shell on 2026-08-31, and its
   note says games.css still carries the live ones. As of today it does not. */

.fallback { margin-top: 0.75rem; }
.fallback summary { cursor: pointer; font-size: 0.75rem; color: var(--ui-dim); }
.fallback input { width: 100%; margin: 0.5rem 0; }