/* The Quick Game's pages (game.html, quick-leaderboard.html,
   quick-profile.html): the panels the server's quick_*.html fragments fill.
   The bar above is the homepage's (dashboard.css). */

[hidden] {
  display: none !important;
}

.quick-main {
  max-width: 880px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.quick-header h1 {
  margin-bottom: 0.25rem;
}

.quick-control {
  margin-top: 0;
  color: #5c5346;
}

/* The homepage's cards: white on its grey, a hairline, its corners. */
.quick-card,
.quick-message {
  background: var(--hp-surface, #fff);
  border: 1px solid var(--hp-border, #e2e8f0);
  border-radius: var(--hp-radius-card, 16px);
  padding: 1rem 1.25rem;
}

.quick-play[hidden],
[hidden].quick-play {
  display: none !important;
}

.quick-play {
  display: grid;
  grid-template-columns: minmax(240px, 520px) minmax(140px, 220px);
  gap: 1rem;
  align-items: start;
}

.quick-players,
.quick-side {
  display: contents;
}

/* The board takes its taps on the whole panel (chessboard-interaction.js
   listens on it, as on the lessons' #chessboard): no browser flash over it
   on a touch screen. */
#quick-game,
#quick-review {
  -webkit-tap-highlight-color: transparent;
}

.quick-board {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.quick-board .chessboard-server,
.quick-board .board-b72b1 {
  width: 100%;
  height: 100%;
}

.quick-player {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.2rem;
  font-size: 1.05rem;
}

.quick-player strong {
  font-variant-numeric: tabular-nums;
  min-width: 4.5rem;
  text-align: right;
}

.quick-grace {
  margin: 0;
  font-weight: 600;
  color: #1f4d2e;
}

.quick-result {
  grid-column: 1 / -1;
  font-weight: 600;
}

.quick-side {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.quick-banner,
.quick-result-panel {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem;
  border: 1px solid #e4dcc8;
  border-radius: 12px;
  background: #fff;
}

.quick-result-score {
  font-size: 1.4rem;
  font-weight: 700;
}

.quick-side button,
.quick-side a {
  align-self: flex-start;
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.flip-board {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.flip-board svg {
  width: 1.15rem;
  height: 1.15rem;
}

.flip-board[aria-pressed="true"] {
  background: #efe6d4;
}

.presence {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-left: 0.35rem;
  border-radius: 50%;
  background: #9aa0a6;
}

.presence.connected {
  background: #1f8a4c;
}

.presence.reconnecting {
  background: #d9a441;
}

.presence.disconnected {
  background: #9aa0a6;
}

.quick-player a {
  color: inherit;
}

@media (max-width: 720px) {
  .quick-play {
    grid-template-columns: 1fr;
  }

  .quick-board,
  .quick-side,
  .quick-result {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ===== the pages =====
   Under the fixed bar, on the homepage's background (dashboard.css). */
.quick-page .quick-main,
.game-page .quick-main {
  padding-top: calc(var(--header-block-size) + 1.5rem);
}

.quick-main.hidden {
  display: none;
}

.quick-header .quick-control a {
  color: inherit;
}

.game-page #quick-game:not(:empty) {
  display: block;
  margin-top: 1rem;
}

.game-page .quick-play:not(.quick-game) {
  background: #fff;
  border: 1px solid #e4dcc8;
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

/* ===== outside a game =====
   The lobby (game.html without ?game=): the page's tabs, the "Joacă" panel
   (a clock pressed is a public challenge, and the pressed tile says it is
   being searched), a friend's challenge when there is one, and the open
   challenges ("Provocări"), the player's own first. The homepage's look:
   white cards on its grey, blue for what the player does. */
/* Nunito, not the play font: Fredoka has no Romanian breves. */
.qg-header h1 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* The page's places, the homepage's title pills; the one shown filled. */
.qg-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qg-tabs a {
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--hp-border);
  border-radius: 999px;
  background: var(--hp-surface);
  color: var(--hp-muted);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--hp-ease), border-color var(--hp-ease), color var(--hp-ease);
}

.qg-tabs a:hover {
  border-color: var(--hp-blue-line);
  background: var(--hp-selected);
  color: var(--hp-blue-hover);
}

.qg-tabs a[aria-current="page"] {
  border-color: var(--hp-blue);
  background: var(--hp-blue);
  color: #fff;
}

.qg-tabs a:focus-visible {
  outline: 2px solid var(--hp-blue);
  outline-offset: 2px;
}

/* What only a phone shows: a tab's short name, the game's actions as marks
   (½, a flag), a draw offer's short form, the result's × and "Rezultat". */
.qg-tab-short,
.qg-act-mark,
.qg-offer-mark,
.qg-offer-short,
.qg-result-open,
.qg-result-close {
  display: none;
}

.quick-main .qg-panel {
  margin-top: 1rem;
  padding: 1.1rem 1.25rem 1.2rem;
}

.qg-panel-title {
  margin: 0;
  color: var(--hp-text);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
}

.qg-panel-note {
  max-width: 62ch;
  margin: 0.2rem 0 0;
  color: var(--hp-muted);
  font-size: 0.9rem;
}

/* The buttons: the homepage's (its lesson card's), blue for the one that
   moves the player on. */
.qg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 40px;
  margin: 0;
  padding: 0.4rem 1rem;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-btn);
  background: var(--hp-surface);
  color: var(--hp-text);
  font: 700 0.92rem/1.2 var(--hp-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--hp-ease), border-color var(--hp-ease), color var(--hp-ease);
}

.qg-btn:hover {
  border-color: #cbd5e1;
  background: var(--hp-subtle);
  color: var(--hp-text);
}

.qg-btn:focus-visible {
  outline: 2px solid var(--hp-blue);
  outline-offset: 2px;
}

.qg-btn.qg-btn-primary {
  border-color: var(--hp-blue);
  background: var(--hp-blue);
  color: #fff;
}

.qg-btn.qg-btn-primary:hover {
  border-color: var(--hp-blue-hover);
  background: var(--hp-blue-hover);
  color: #fff;
}

.qg-btn.qg-btn-primary:active {
  border-color: #1e40af;
  background: #1e40af;
}

.qg-btn svg {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qg-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* The clocks: the sidebar's "Joacă" tiles, larger. The pressed one is the
   choice (a friend's challenge takes it too); while the player's public
   challenge is open it turns blue and says it is being searched. Last, when
   the server has an engine, the computer's, its rating under its clock: one
   column per tile. */
.qg-clocks {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 10px;
  margin-top: 0.95rem;
}

.qg-clock-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 0.85rem 0.4rem 0.6rem;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-item);
  background: var(--hp-subtle);
  color: var(--hp-text);
  font-family: var(--hp-font);
  line-height: 1.1;
  cursor: pointer;
  transition: background-color var(--hp-ease), border-color var(--hp-ease), color var(--hp-ease),
    box-shadow var(--hp-ease);
}

.qg-tile-category {
  color: var(--hp-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.qg-tile-time {
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Under the time, its own line kept so a tile does not grow when it shows;
   the computer's rating in the same place, always shown. */
.qg-tile-seeking,
.qg-tile-rating {
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 700;
}

.qg-tile-seeking {
  visibility: hidden;
}

.qg-tile-rating {
  color: var(--hp-muted);
}

/* The computer's microchip, in the time's place: as tall as the line the
   numerals of the other tiles take, drawn with their weight and colour. */
.qg-tile-chip svg {
  display: block;
  width: 1.1em;
  height: 1.1em;
  margin: 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The computer's game is being started (hx-disable). */
.qg-computer-tile:disabled {
  opacity: 0.6;
  cursor: progress;
}

.qg-clock-tile:hover {
  border-color: var(--hp-blue-line);
  background: var(--hp-selected);
}

.qg-clock-tile:hover :is(.qg-tile-category, .qg-tile-time, .qg-tile-rating) {
  color: var(--hp-blue-hover);
}

.qg-clock-tile:focus-visible {
  outline: 2px solid var(--hp-blue);
  outline-offset: 2px;
}

.qg-clock-tile[aria-pressed="true"] {
  border-color: var(--hp-blue);
  background: var(--hp-selected);
  box-shadow: inset 0 0 0 1px var(--hp-blue);
}

.qg-clock-tile[aria-pressed="true"] :is(.qg-tile-category, .qg-tile-time) {
  color: var(--hp-blue-hover);
}

.is-seeking .qg-clock-tile[aria-pressed="true"] {
  border-color: var(--hp-blue);
  background: var(--hp-blue);
  box-shadow: none;
  color: #fff;
  animation: qg-seeking 1.8s ease-out infinite;
}

.is-seeking .qg-clock-tile[aria-pressed="true"] :is(.qg-tile-category, .qg-tile-time, .qg-tile-seeking) {
  color: #fff;
}

.is-seeking .qg-clock-tile[aria-pressed="true"] .qg-tile-seeking {
  visibility: visible;
}

/* The search, breathing: a ring that leaves the tile and fades. */
@keyframes qg-seeking {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
  }
  70%,
  100% {
    box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
  }
}

.qg-create-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
}

.qg-rated-toggle.auto-next-toggle {
  padding: 0;
  font-size: 0.95rem;
}

/* A friend's challenge, or one the player is invited to: its title, its
   clock and rated choice, the link to send, its buttons. Not the player's
   own public one, which the lobby lists, nor one its maker cancelled. */
.quick-challenge[data-seeking="1"],
.quick-challenge[data-creator="1"][data-status="cancelled"] {
  display: none;
}

.qg-challenger {
  color: var(--hp-blue);
}

.qg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0.5rem 0 0;
}

.qg-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--hp-border);
  border-radius: 999px;
  background: var(--hp-subtle);
  color: var(--hp-muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.qg-chip strong {
  color: var(--hp-text);
  font-weight: 800;
}

.qg-invite {
  margin: 0.8rem 0 0;
  padding: 0.55rem 0.8rem;
  border: 1px dashed #cbd5e1;
  border-radius: var(--hp-radius-btn);
  background: var(--hp-subtle);
  color: var(--hp-text);
  font-size: 0.9rem;
  font-weight: 600;
  overflow-wrap: anywhere;
  user-select: all;
}

.qg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.9rem;
}

/* Provocări: one row each, the player, the clock, rated or not, its button;
   the player's own first, in blue, where their search is cancelled. */
/* The games the player is in (one may play several at once), each with its
   way back. */
.qg-banner {
  margin-top: 0.8rem;
  padding: 0.7rem 0.8rem 0.7rem 1rem;
  border: 1px solid var(--hp-blue-line);
  border-radius: var(--hp-radius-item);
  background: var(--hp-selected);
}

.qg-banner p {
  margin: 0;
  font-weight: 700;
}

.qg-playing {
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
}

.qg-playing li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 0.4rem 0;
}

.qg-playing li + li {
  border-top: 1px solid var(--hp-blue-line);
}

.qg-playing-game {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  min-width: 0;
}

.qg-playing-name {
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qg-playing .qg-chip {
  background: var(--hp-surface);
}

.qg-playing-color {
  color: var(--hp-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.qg-playing .qg-btn {
  min-width: 6.5rem;
}

.qg-empty {
  margin: 0.8rem 0 0;
  padding: 1.1rem 1rem;
  border: 1px dashed #cbd5e1;
  border-radius: var(--hp-radius-item);
  color: var(--hp-muted);
  font-size: 0.92rem;
  text-align: center;
}

.lobby-list {
  display: flex;
  flex-direction: column;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.lobby-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem 7.5rem 7rem;
  grid-template-areas: "player clock rated button";
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.6rem 0.55rem 0.8rem;
  border: 1px solid transparent;
  border-radius: var(--hp-radius-item);
}

.lobby-row:not(.yours):hover {
  background: var(--hp-subtle);
}

.lobby-row.yours {
  order: -1;
  margin-bottom: 4px;
  border-color: var(--hp-blue-line);
  background: var(--hp-selected);
}

.lobby-player {
  grid-area: player;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.45rem;
  min-width: 0;
}

.lobby-name {
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-rating {
  color: var(--hp-rating);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* The player's own row: what it is doing, a dot breathing beside it. */
.lobby-seeking {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-basis: 100%;
  color: var(--hp-blue);
  font-size: 0.82rem;
  font-weight: 700;
}

.lobby-seeking::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hp-blue);
  animation: qg-dot 1.4s ease-in-out infinite;
}

@keyframes qg-dot {
  50% {
    opacity: 0.25;
  }
}

.lobby-clock {
  grid-area: clock;
  color: var(--hp-muted);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.lobby-clock strong {
  color: var(--hp-text);
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.lobby-rated {
  grid-area: rated;
  justify-self: start;
}

.lobby-row .qg-btn {
  grid-area: button;
  width: 100%;
  min-height: 36px;
  padding-inline: 0.75rem;
}

/* Every row has both buttons and the search's words: the player's own row
   (marked by multiplayer-game.js) shows Anulează and the words, the others
   Joacă. */
.lobby-row:not(.yours) .lobby-cancel,
.lobby-row:not(.yours) .lobby-seeking,
.lobby-row.yours .lobby-accept {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .is-seeking .qg-clock-tile[aria-pressed="true"],
  .lobby-seeking::before {
    animation: none;
  }
}

/* A phone: the open challenges in sight under the fold's first half. The
   page's title goes (the bar and the tabs say where one is: it stays for
   screen readers), the tabs share one segmented row by their short names,
   and "Joacă" is short rows: its title beside the rated switch, the four
   clocks side by side, the computer's tile under them (its three lines on
   one), the friend's button. Each challenge is two lines beside its
   button. */
@media (max-width: 640px) {
  .quick-page .quick-main,
  .game-page .quick-main {
    padding: calc(var(--header-block-size) + 10px) 10px 1.5rem;
  }

  .qg-header h1,
  .qg-tab-long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .qg-tab-short {
    display: inline;
  }

  .qg-tabs {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 2px;
    box-sizing: border-box;
    height: 38px;
    padding: 3px;
    border: 1px solid var(--hp-border);
    border-radius: 999px;
    background: var(--hp-surface);
  }

  .qg-tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 0.25rem;
    border: 0;
    font-size: 0.84rem;
    white-space: nowrap;
  }

  .quick-main .qg-panel {
    margin-top: 10px;
    padding: 12px;
  }

  #quick-create {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title rated"
      "clocks clocks"
      "friend friend";
    align-items: center;
    gap: 10px 8px;
  }

  #quick-create .qg-panel-note {
    display: none;
  }

  #quick-create-title {
    grid-area: title;
  }

  .qg-create-foot {
    display: contents;
  }

  .qg-rated-toggle.auto-next-toggle {
    grid-area: rated;
    font-size: 0.86rem;
  }

  #quick-friend {
    grid-area: friend;
    min-height: 38px;
    font-size: 0.88rem;
  }

  .qg-clocks {
    grid-area: clocks;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 6px;
    margin: 0;
  }

  .qg-clock-tile {
    gap: 0;
    padding: 0.5rem 0.15rem 0.35rem;
  }

  .qg-tile-category {
    font-size: 0.74rem;
  }

  .qg-tile-time {
    font-size: 1.2rem;
  }

  .qg-tile-seeking {
    margin-top: 1px;
    font-size: 0.64rem;
  }

  /* The computer's tile, after the tiles' rules it overrides. */
  .qg-computer-tile {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
  }

  .qg-computer-tile .qg-tile-time {
    align-self: center;
    font-size: 1.1rem;
  }

  .qg-computer-tile .qg-tile-rating {
    margin: 0;
    font-size: 0.74rem;
  }

  .qg-banner {
    margin-top: 0.6rem;
    padding: 0.5rem 0.6rem 0.5rem 0.75rem;
  }

  .lobby-list {
    margin-top: 0.4rem;
  }

  .lobby-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "player player button"
      "clock rated button";
    gap: 0.15rem 0.5rem;
    padding: 0.4rem 0.4rem 0.4rem 0.6rem;
  }

  .lobby-rated {
    max-width: 100%;
    padding: 0.05rem 0.45rem;
    overflow: hidden;
    font-size: 0.76rem;
    text-overflow: ellipsis;
  }

  .lobby-row .qg-btn {
    width: auto;
    min-width: 4.75rem;
  }
}

/* ===== the player's games (?history=1) =====
   A table of rows under their day, each opening the game's replay. The
   outcome in the result card's colours (won green, lost grey, drawn blue),
   on the row's left edge too; the rating change green up, red down; the
   numbers right-aligned in tabular figures. */
.history-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-head,
.history-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) 8.5rem 5.5rem 6.5rem 3.5rem;
  align-items: center;
  column-gap: 1rem;
  padding: 0.6rem 0.9rem;
}

.history-head {
  padding-block: 0 0.55rem;
  border-bottom: 1px solid var(--hp-border);
  color: var(--hp-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.history-num {
  justify-self: end;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.history-day {
  margin: 1.1rem 0 0.35rem;
  padding: 0 0.9rem;
  color: var(--hp-muted);
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.history-head + .history-day {
  margin-top: 0.8rem;
}

.history-item + .history-item {
  margin-top: 2px;
}

.history-row {
  position: relative;
  border-radius: var(--hp-radius-item);
  color: var(--hp-text);
  text-decoration: none;
  transition: background-color var(--hp-ease);
}

/* The outcome's mark: a bar down the row's left edge. */
.history-row::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--history-edge, var(--hp-border));
}

.history-row:hover {
  background: var(--hp-subtle);
}

.history-row:focus-visible {
  outline: 2px solid var(--hp-blue);
  outline-offset: 2px;
}

.history-win {
  --history-edge: var(--hp-green);
  --history-ink: var(--hp-green);
}

.history-loss {
  --history-edge: #cbd5e1;
  --history-ink: var(--hp-muted);
}

.history-draw {
  --history-edge: var(--hp-blue-line);
  --history-ink: var(--hp-blue);
}

.history-outcome {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.history-outcome strong {
  color: var(--history-ink);
  font-size: 1rem;
  font-weight: 800;
}

.history-reason {
  color: var(--hp-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.history-opponent {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

/* The player's colour: the board's own pawn, white or black. */
.history-piece {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin-block: -0.2rem;
  background: center / contain no-repeat;
}

.history-piece-white {
  background-image: url("/img/chesspieces/wikipedia/wP.png");
}

.history-piece-black {
  background-image: url("/img/chesspieces/wikipedia/bP.png");
}

.history-name {
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-clock {
  color: var(--hp-muted);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}

.history-clock strong {
  color: var(--hp-text);
  font-weight: 800;
}

.history-rating {
  font-size: 1rem;
  font-weight: 800;
}

.history-even,
.history-muted {
  color: var(--hp-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.history-moves,
.history-time {
  color: var(--hp-muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.history-time {
  color: var(--hp-text);
}

.history-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hp-divider);
}

.history-pages p {
  margin: 0;
  color: var(--hp-muted);
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.history-pages .qg-actions {
  margin: 0 0 0 auto;
}

/* Any game's PGN replayed: above the games, at the card's right. */
.qg-history-tools {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.9rem;
}

.qg-history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.6rem 1rem;
  border: 1px dashed #cbd5e1;
  border-radius: var(--hp-radius-item);
  text-align: center;
}

.qg-history-empty p {
  max-width: 46ch;
  margin: 0;
  color: var(--hp-muted);
}

/* A phone: each game on three lines, the outcome and rating change first. */
@media (max-width: 640px) {
  .history-head {
    display: none;
  }

  .history-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "outcome rating"
      "opponent time"
      "clock moves";
    row-gap: 0.3rem;
    padding: 0.7rem 0.8rem 0.7rem 1rem;
  }

  .history-outcome {
    grid-area: outcome;
    flex-direction: row;
    align-items: baseline;
    gap: 0.45rem;
  }

  .history-opponent {
    grid-area: opponent;
  }

  .history-clock {
    grid-area: clock;
  }

  .history-rating {
    grid-area: rating;
  }

  .history-moves {
    grid-area: moves;
  }

  .history-time {
    grid-area: time;
  }

  .history-day {
    padding-left: 1rem;
  }
}

/* ===== the leaderboard and a profile =====
   The lobby's header above them; the homepage's ranking dialogs' tabs for
   the categories, its trophies for the first three places, its blue for the
   viewer's own row. */
.qg-board-head,
.qg-category-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
}

.qg-category-head .qg-panel-note {
  margin: 0;
}

/* The categories are the homepage's ranking tabs (dashboard.css's
   .ranking-tabs), here beside the title: as wide as their names, and the
   head's gap for a margin. */
.qg-board-head .ranking-tabs {
  margin-bottom: 0;
}

.qg-board-head .ranking-tab {
  flex: 0 1 auto;
  padding-inline: 12px;
}

/* The viewer's standing: their place, or how far they are from one. */
.qg-standing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--hp-blue-line);
  border-radius: var(--hp-radius-item);
  background: var(--hp-selected);
}

.qg-standing > p,
.qg-standing-body {
  flex: 1 1 16rem;
  min-width: 0;
  margin: 0;
}

.qg-standing p {
  margin: 0;
}

.qg-standing-place .rail-medal {
  transform: scale(1.35);
}

.qg-standing-rating {
  color: var(--hp-rating);
  font-weight: 800;
}

.qg-progress {
  height: 8px;
  margin-top: 0.55rem;
  border-radius: 999px;
  background: var(--hp-surface);
  box-shadow: inset 0 0 0 1px var(--hp-blue-line);
  overflow: hidden;
}

.qg-progress span {
  display: block;
  width: calc(100% * var(--done) / var(--needed));
  height: 100%;
  border-radius: inherit;
  background: var(--hp-blue);
}

.qg-progress-label {
  margin-top: 0.3rem !important;
  color: var(--hp-muted);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The players. */
.qg-standings {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.qg-standings-head,
.qg-standings-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 5rem 5.5rem;
  align-items: center;
  column-gap: 1rem;
  padding: 0.5rem 0.9rem;
}

.qg-standings-head {
  padding-block: 0 0.55rem;
  border-bottom: 1px solid var(--hp-border);
  color: var(--hp-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.qg-standings-row {
  margin-top: 2px;
  border-radius: var(--hp-radius-item);
}

.qg-standings-head + .qg-standings-row {
  margin-top: 0.4rem;
}

.qg-standings-row:hover {
  background: var(--hp-subtle);
}

.qg-standings-row.is-me {
  background: var(--hp-selected);
  box-shadow: inset 0 0 0 1.5px var(--hp-blue);
}

.qg-standings-place {
  display: flex;
  justify-content: center;
}

.qg-standings-name {
  overflow: hidden;
  color: var(--hp-text);
  font-weight: 800;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qg-standings-name:hover {
  color: var(--hp-blue);
  text-decoration: underline;
}

.qg-standings-name:focus-visible {
  outline: 2px solid var(--hp-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.qg-standings-games {
  color: var(--hp-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.qg-standings-rating {
  color: var(--hp-rating);
  font-size: 1.05rem;
  font-weight: 800;
}

/* A profile: the player's name over a tile per category. */
.qg-profile-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
}

.qg-profile-name {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
}

.qg-profile-head .qg-panel-note {
  margin: 0;
}

.qg-rating-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 1rem;
}

/* The lobby's clock tiles, the rating in the homepage's orange. */
.qg-rating-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 0.8rem 0.4rem 0.75rem;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-item);
  background: var(--hp-subtle);
  color: var(--hp-text);
  font-family: var(--hp-font);
  line-height: 1.15;
  cursor: pointer;
  transition: background-color var(--hp-ease), border-color var(--hp-ease), box-shadow var(--hp-ease);
}

.qg-rating-value {
  color: var(--hp-rating);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.qg-rating-value.qg-rating-none {
  color: #cbd5e1;
}

.qg-rating-meta {
  color: var(--hp-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}

.qg-rating-tile:hover {
  border-color: var(--hp-blue-line);
  background: var(--hp-selected);
}

.qg-rating-tile:focus-visible {
  outline: 2px solid var(--hp-blue);
  outline-offset: 2px;
}

.qg-rating-tile[aria-pressed="true"] {
  border-color: var(--hp-blue);
  background: var(--hp-selected);
  box-shadow: inset 0 0 0 1px var(--hp-blue);
}

.qg-rating-tile[aria-pressed="true"] .qg-tile-category {
  color: var(--hp-blue-hover);
}

/* A category's record: won, drawn and lost as one bar, then the numbers. */
.qg-record {
  margin-top: 1rem;
}

.qg-record-bar {
  display: flex;
  gap: 3px;
  height: 10px;
}

.qg-record-bar span {
  flex-basis: 0;
  min-width: 0;
  border-radius: 999px;
}

.qg-record-bar .qg-record-win {
  background: var(--hp-green);
}

.qg-record-bar .qg-record-draw {
  background: var(--hp-blue);
}

.qg-record-bar .qg-record-loss {
  background: #cbd5e1;
}

.qg-record-numbers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.8rem 0 0;
}

.qg-record-numbers div {
  min-width: 0;
}

.qg-record-numbers dt {
  color: var(--hp-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.qg-record-numbers dd {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.qg-record-numbers .qg-record-win dd {
  color: var(--hp-green);
}

.qg-record-numbers .qg-record-draw dd {
  color: var(--hp-blue);
}

.qg-record-numbers .qg-record-loss dd {
  color: var(--hp-muted);
}

/* The rating after each rated game: a blue line over a pale fill, between
   two guides (the lowest and the highest). */
.qg-chart {
  margin: 1.2rem 0 0;
}

.qg-chart-plot {
  position: relative;
  height: clamp(150px, 22vw, 200px);
}

.qg-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.qg-chart-guide {
  stroke: var(--hp-divider);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.qg-chart-area {
  fill: var(--hp-selected);
}

.qg-chart-line {
  fill: none;
  stroke: var(--hp-blue);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* A rated game: a dot on the line, its rating and date on hover. HTML,
   placed in the SVG's units, so it stays round however the chart stretches. */
.qg-chart-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border: 2px solid var(--hp-blue);
  border-radius: 50%;
  background: var(--hp-surface);
  transition: transform var(--hp-ease);
}

.qg-chart-dot:hover {
  transform: scale(1.5);
  background: var(--hp-blue);
}

.qg-chart figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  margin-top: 0.6rem;
  color: var(--hp-muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.qg-chart figcaption strong {
  color: var(--hp-text);
  font-weight: 800;
}

.qg-chart figcaption > span:last-child {
  font-size: 1rem;
  font-weight: 800;
}

.qg-link {
  color: var(--hp-blue);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.qg-link:hover {
  text-decoration: underline;
}

.qg-link:focus-visible {
  outline: 2px solid var(--hp-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* A profile's recent games: the history's rows, with the date, and the
   whole row opening the replay (when the viewer played it) under the
   opponent's own link. */
.qg-recent {
  margin-top: 0.8rem;
}

.qg-recent .history-row {
  grid-template-columns: 8.5rem minmax(0, 1fr) 8.5rem 5.5rem 8.5rem;
}

.qg-recent .history-name {
  position: relative;
  z-index: 1;
  color: var(--hp-text);
  text-decoration: none;
}

.qg-recent .history-name:hover {
  color: var(--hp-blue);
  text-decoration: underline;
}

.qg-recent .history-name:focus-visible {
  outline: 2px solid var(--hp-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.qg-recent .history-row:not(:has(.qg-recent-review)):hover {
  background: none;
}

.qg-recent-review {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.qg-recent-review:focus-visible {
  outline: 2px solid var(--hp-blue);
  outline-offset: 2px;
}

.qg-recent .history-time {
  color: var(--hp-muted);
}

@media (max-width: 640px) {
  .qg-board-head {
    align-items: stretch;
    flex-direction: column;
  }

  .qg-board-head .ranking-tab {
    flex: 1 1 0;
    padding-inline: 4px;
  }

  .qg-standings-head,
  .qg-standings-row {
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    padding-inline: 0.6rem;
  }

  .qg-standings-games,
  .qg-standings-head > :nth-child(3) {
    display: none;
  }

  .qg-rating-tiles,
  .qg-record-numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qg-recent .history-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ===== a game =====
   As a puzzle's player: the board as large as a puzzle's (the homepage's
   height rule: the window less the bar, 4px over the board and 26px under
   it), a column at its left with "Revizuire" at the top while an earlier
   position is shown, and at its right a column as tall as the board. The
   top seat's clock and name open that column, the bottom seat's name and
   clock close it; between them the game's clock and rated choice, the moves
   (the lessons' card, which takes the free height and scrolls) and the
   game's actions or its result, scrolling themselves should they not fit:
   the page never scrolls. */
.game-page.in-game .quick-main {
  max-width: none;
  padding: calc(var(--header-block-size) + 4px) 16px 0;
}

@media (min-width: 900px), (max-height: 520px) {
  body.game-page.in-game {
    overflow: hidden;
  }
}

.game-page.in-game #quick-game:not(:empty) {
  margin-top: 0;
}

.game-page #quick-game .quick-game {
  --side: 140px;
  --col: clamp(260px, 22vw, 340px);
  --gap: 16px;
  --board: max(
    240px,
    min(
      100dvh - var(--header-block-size) - 30px,
      100vw - var(--side) - var(--col) - 2 * var(--gap) - 48px
    )
  );
  display: grid;
  grid-template-columns: var(--side) var(--board) var(--col);
  grid-template-rows: var(--board);
  grid-template-areas: "badge board side";
  column-gap: var(--gap);
  justify-content: center;
  color: var(--hp-text);
}

.game-page #quick-game .quick-board {
  grid-area: board;
  width: var(--board);
  height: var(--board);
}

/* An earlier position: the board dimmed and locked (the lessons'
   .board-locked, chess-lesson-player.css), "Revizuire" at the top of the
   column at its left, as a puzzle's. */
.game-page #quick-game .quick-board.board-locked::after {
  content: none;
}

.game-page #quick-game .board-review-badge {
  grid-area: badge;
  align-self: start;
  justify-self: center;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0.35rem 0.75rem;
  border-radius: var(--hp-radius-btn);
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.qg-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--board);
}

.qg-end {
  flex: none;
}

.qg-middle {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* The clocks: dark while running, red once under a tenth of the time (the
   server's low_time_ms) for the rest of the game. */
.qg-clock .quick-clock {
  display: inline-block;
  min-width: 6.2ch;
  padding: 0.05em 0.45em;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-item);
  background: var(--hp-surface);
  color: var(--hp-text);
  font-family: var(--hp-font);
  font-size: clamp(2.1rem, calc(var(--col) / 7), 3rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  text-align: center;
  transition: background-color var(--hp-ease), color var(--hp-ease);
}

.qg-clock .quick-clock[data-running="1"] {
  border-color: var(--hp-text);
  background: var(--hp-text);
  color: #fff;
}

.qg-clock .quick-clock.low {
  color: #dc2626;
}

.qg-clock .quick-clock.low[data-running="1"] {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
}

/* A seat: the player's name and rating, the opponent's presence; under its
   clock at the top, over it at the bottom. */
.qg-top-seat {
  margin-top: 6px;
}

.qg-bottom {
  margin-top: 14px;
}

.qg-bottom-clock {
  margin-top: 6px;
}

.qg-seat {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-size: 1.25rem;
}

.qg-seat a,
.qg-seat .qg-player {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qg-seat a:hover .qg-name {
  text-decoration: underline;
}

.qg-name {
  font-weight: 800;
}

/* The rating in the homepage's orange (a puzzle's rating beside its board). */
.qg-rating {
  color: var(--hp-rating);
  font-weight: 800;
}

.qg-seat .presence {
  flex: none;
  margin-left: 0;
}

.qg-control {
  flex: none;
  margin: 1.75rem 0 0;
  color: var(--hp-muted);
  font-size: 0.95rem;
  font-weight: 700;
}

.qg-notes {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.qg-notes > :first-child {
  margin-top: 0.75rem;
}

.qg-notes .quick-message,
.qg-notes .quick-grace {
  margin-bottom: 0;
}

.qg-notes .quick-banner {
  border-color: var(--hp-border);
  border-radius: var(--hp-radius-item);
}

.qg-notes .quick-banner p {
  margin: 0;
  font-weight: 700;
}

/* The moves: the lessons' card, every move a step back to (data-view-ply). */
.game-page #quick-game .moves-history-container {
  order: 0; /* the lessons' card is last in their column (order: 4) */
  flex: 1 1 0;
  min-height: 4.5rem;
  max-height: none;
  margin-top: 0.75rem;
}

.game-page #quick-game .moves-history-list {
  font-size: 0.92rem;
}

.game-page #quick-game .quick-actions {
  flex: none;
  margin-top: 0.75rem;
}

/* The game's own buttons, the homepage's. */
.game-page #quick-game .quick-game button {
  min-height: 2.25rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-btn);
  background: var(--hp-surface);
  color: var(--hp-text);
  font: 700 0.9rem var(--hp-font);
  cursor: pointer;
  transition: background-color var(--hp-ease), border-color var(--hp-ease);
}

.game-page #quick-game .quick-game button:hover:not(:disabled) {
  border-color: var(--hp-blue-line);
  background: var(--hp-selected);
}

.game-page #quick-game .quick-game button:focus-visible {
  outline: 2px solid var(--hp-blue);
  outline-offset: 2px;
}

/* A draw offered: it stands, greyed, until the opponent answers it. */
.game-page #quick-game .quick-game button:disabled {
  border-color: var(--hp-divider);
  background: var(--hp-divider);
  color: var(--hp-muted);
  cursor: default;
}

.game-page #quick-game .quick-game .flip-board {
  width: 2.25rem;
  padding: 0;
}

/* The result: the score, large, then what it means for the player. */
.game-page #quick-game .qg-result {
  flex: none;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.75rem;
  padding: 0.9rem 1rem 0.95rem;
  border-color: var(--hp-border);
  border-radius: var(--hp-radius-card);
  text-align: center;
}

.qg-result p {
  margin: 0;
}

.qg-result-score {
  font-family: var(--hp-font-play);
  font-size: clamp(2.8rem, calc(var(--col) / 5.2), 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.qg-result-title {
  font-family: var(--hp-font-play);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.15;
}

.qg-won .qg-result-title {
  color: var(--hp-green);
}

.qg-lost .qg-result-title {
  color: var(--hp-muted);
}

.qg-draw .qg-result-title {
  color: var(--hp-blue);
}

.qg-result-reason,
.qg-result-note {
  color: var(--hp-muted);
  font-size: 0.85rem;
}

.qg-result-rating {
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
}

.qg-delta-up {
  color: var(--hp-green);
}

.qg-delta-down {
  color: #dc2626;
}

.qg-rematch-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.45rem 0 0.15rem;
}

/* Revanșă and Joc nou: an invitation to another game, chunky keys pressed
   down; the rematch amber, a new game the homepage's blue. */
.game-page #quick-game .quick-game .qg-rematch,
.game-page #quick-game .qg-new-game {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 10rem;
  min-height: 0;
  padding: 0.5rem 1.35rem 0.55rem;
  border: 0;
  border-radius: 999px;
  background: var(--hp-amber);
  box-shadow: 0 4px 0 var(--hp-amber-ink);
  color: #3b1d02;
  font: 600 1.2rem var(--hp-font-play);
  letter-spacing: 0.01em;
  text-decoration: none;
  transform: translateY(0);
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.game-page #quick-game .qg-new-game {
  margin-top: 0.6rem;
  background: var(--hp-blue);
  box-shadow: 0 4px 0 #1e3a8a;
  color: #fff;
}

.qg-rematch svg,
.qg-new-game svg {
  width: 1.05em;
  height: 1.05em;
  transition: transform 300ms ease;
}

.game-page #quick-game .quick-game .qg-rematch:hover {
  background: #fbbf24;
  box-shadow: 0 5px 0 var(--hp-amber-ink);
  transform: translateY(-1px);
}

.game-page #quick-game .qg-new-game:hover {
  background: var(--hp-blue-hover);
  box-shadow: 0 5px 0 #1e3a8a;
  transform: translateY(-1px);
}

.qg-rematch:hover svg {
  transform: rotate(-200deg);
}

.qg-new-game:hover svg {
  transform: rotate(90deg);
}

.game-page #quick-game .quick-game .qg-rematch:active {
  box-shadow: 0 1px 0 var(--hp-amber-ink);
  transform: translateY(3px);
}

.game-page #quick-game .qg-new-game:active {
  box-shadow: 0 1px 0 #1e3a8a;
  transform: translateY(3px);
}

.game-page #quick-game .quick-game .qg-rematch:focus-visible,
.game-page #quick-game .qg-new-game:focus-visible {
  outline: 3px solid var(--hp-text);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .game-page #quick-game .quick-game .qg-rematch,
  .game-page #quick-game .qg-new-game,
  .qg-rematch svg,
  .qg-new-game svg {
    transition: none;
  }

  .qg-rematch:hover svg,
  .qg-new-game:hover svg {
    transform: none;
  }
}

/* A short window: the column closer set, so that a finished game's card
   fits beside the moves. */
@media (min-width: 900px) and (max-height: 820px) {
  .qg-clock .quick-clock {
    font-size: clamp(1.8rem, calc(var(--col) / 8.5), 2.4rem);
  }

  .qg-control {
    margin-top: 1rem;
  }

  .game-page #quick-game .moves-history-container {
    min-height: 3.5rem;
  }

  .game-page #quick-game .qg-result {
    gap: 0.15rem;
    padding: 0.6rem 0.8rem 0.75rem;
  }

  .qg-result-score {
    font-size: 2.4rem;
  }

  .qg-result-title {
    font-size: 1.3rem;
  }

  .qg-rematch-row {
    margin: 0.3rem 0 0.1rem;
  }

  .game-page #quick-game .quick-game .qg-rematch,
  .game-page #quick-game .qg-new-game {
    padding: 0.4rem 1.1rem 0.45rem;
    font-size: 1.05rem;
  }

  .game-page #quick-game .qg-new-game {
    margin-top: 0.4rem;
  }
}

/* A phone, or any window narrower than the board and its column (but
   not a phone held sideways, whose board stays beside its column): one
   column the window's height, with nothing to scroll. Top to bottom: the
   opponent's seat (name, clock), the board, the player's seat, the moves on
   one line that scrolls sideways (the puzzles' strip), and a bar with the
   game's clock at its left and its actions at its right as marks (⟳ ½ ⚑).
   Every row but the board's has a fixed height, so the board is as large as
   the window leaves it. A draw offered, the first move's countdown or a
   refusal cover the bar while they stand; a finished game's result is a
   card over the board, closed with its × and opened again by the bar's
   "Rezultat" (multiplayer-game.js keeps which). */
@media (max-width: 899px) and (min-height: 521px) {
  body.game-page.in-game {
    overflow: hidden;
  }

  .game-page.in-game .quick-main {
    padding: calc(var(--header-block-size) + 6px) 10px 0;
  }

  .game-page #quick-game .quick-game {
    --gap: 6px;
    --seat: 40px;
    --strip: 34px;
    --bar: 40px;
    --board: max(
      180px,
      min(
        100vw - 20px,
        100dvh - var(--header-block-size) - 12px - 2 * var(--seat) - var(--strip) - var(--bar) - 4 * var(--gap)
      )
    );
    width: var(--board);
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: var(--seat) var(--board) var(--seat) var(--strip) var(--bar);
    grid-template-areas:
      "top-seat top-clock"
      "board board"
      "bottom-seat bottom-clock"
      "moves moves"
      "bar bar";
    row-gap: var(--gap);
    column-gap: 8px;
    align-items: center;
  }

  .qg-side,
  .qg-end,
  .qg-middle {
    display: contents;
  }

  /* "Revizuire" over the board's corner. */
  .game-page #quick-game .board-review-badge {
    grid-area: board;
    align-self: start;
    justify-self: start;
    z-index: 3;
    margin: 8px;
    font-size: 0.82rem;
  }

  .qg-top-clock {
    grid-area: top-clock;
  }

  .qg-top-seat {
    grid-area: top-seat;
    margin-top: 0;
  }

  .qg-bottom-seat {
    grid-area: bottom-seat;
  }

  .qg-bottom-clock {
    grid-area: bottom-clock;
    margin-top: 0;
  }

  .qg-seat {
    font-size: 1.05rem;
  }

  .qg-clock .quick-clock {
    min-width: 5.4ch;
    font-size: 1.6rem;
    line-height: 1.2;
  }

  /* The bar: the game's clock and rated choice, clear of the actions. */
  .qg-control {
    grid-area: bar;
    justify-self: start;
    max-width: calc(100% - 140px);
    margin: 0;
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .quick-game[data-status="finished"] .qg-control {
    max-width: calc(100% - 172px);
  }

  .game-page #quick-game .quick-actions {
    grid-area: bar;
    justify-self: end;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
  }

  /* "Rezultat" and the score, in the result's colours, opening its card. */
  .game-page #quick-game .quick-game .quick-actions .qg-result-open {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: auto;
    height: 40px;
    min-height: 0;
    padding: 0 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
  }

  .qg-result-open strong {
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  .game-page #quick-game .quick-game .qg-result-open.qg-won {
    border-color: #86efac;
    background: #f0fdf4;
    color: #15803d;
  }

  .game-page #quick-game .quick-game .qg-result-open.qg-draw {
    border-color: var(--hp-blue-line);
    background: var(--hp-selected);
    color: var(--hp-blue);
  }

  /* What stands over the bar (styled for any narrow window, below) covers
     it while it stands. */
  .qg-notes {
    grid-area: bar;
    z-index: 2;
    align-self: stretch;
  }

  /* The moves: one line, the last in sight (the puzzles' strip). */
  .game-page #quick-game .moves-history-container {
    grid-area: moves;
    display: flex;
    align-items: stretch;
    height: var(--strip);
    min-height: 0;
    max-height: none;
    margin: 0;
    overflow: hidden;
    border-radius: var(--hp-radius-item);
  }

  .game-page #quick-game .moves-header {
    display: none;
  }

  .game-page #quick-game .moves-history-list {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    height: 100%;
    padding: 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    font-size: 0.9rem;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .game-page #quick-game .moves-history-list::-webkit-scrollbar {
    display: none;
  }

  .game-page #quick-game .move-pair {
    flex: 0 0 auto;
    margin-bottom: 0;
  }

  /* The result: a card over the board, which dims under it. */
  .game-page #quick-game .qg-result {
    grid-area: board;
    position: relative;
    z-index: 5;
    align-self: center;
    justify-self: center;
    gap: 0.2rem;
    box-sizing: border-box;
    width: min(100% - 28px, 330px);
    max-height: calc(var(--board) - 20px);
    margin: 0;
    padding: 1.1rem 1rem 1.15rem;
    overflow-y: auto;
    box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.5), 0 0 0 1px rgba(15, 23, 42, 0.06);
  }

  #quick-game.result-closed .qg-result {
    display: none;
  }

  #quick-game:not(.result-closed) .quick-game[data-status="finished"] .quick-board {
    position: relative;
  }

  #quick-game:not(.result-closed) .quick-game[data-status="finished"] .quick-board::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.5);
  }

  #quick-game.result-pop .qg-result {
    animation: qg-result-in 360ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
  }

  #quick-game.result-pop .quick-board::after {
    animation: qg-fade-in 240ms ease-out both;
  }

  .game-page #quick-game .quick-game .qg-result-close {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--hp-muted);
  }

  .qg-result-close svg {
    width: 18px;
    height: 18px;
  }

  .qg-result-score {
    font-size: 2.7rem;
  }

  .qg-result-title {
    font-size: 1.35rem;
  }

  .qg-rematch-row {
    margin: 0.35rem 0 0.1rem;
  }

  .game-page #quick-game .quick-game .qg-rematch,
  .game-page #quick-game .qg-new-game {
    min-width: 9rem;
    padding: 0.4rem 1.1rem 0.45rem;
    font-size: 1.05rem;
  }

  .game-page #quick-game .qg-new-game {
    margin-top: 0.45rem;
  }
}

/* A narrow window's game, upright or sideways: what stands, one at a time
   and on one line (a draw offered, "½ Remiză?" and its two buttons, else a
   refusal's reason, else the first move's countdown), over the bar on a
   phone held upright and in the column beside the board on one held
   sideways; and the game's actions as marks. */
@media (max-width: 899px) {
  .qg-notes {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-sizing: border-box;
    min-width: 0;
    min-height: 40px;
    padding: 0 4px 0 10px;
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-item);
    background: var(--hp-surface);
  }

  .qg-notes:not(:has(*)) {
    display: none;
  }

  .qg-notes:has(.qg-offer) > :not(.qg-offer),
  .qg-notes:has([role="alert"]) > .quick-grace {
    display: none;
  }

  .qg-notes > *,
  .qg-notes > :first-child {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 0.85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .qg-notes .quick-message {
    padding: 0;
    border: 0;
    background: none;
    font-weight: 700;
  }

  .qg-notes:has(.qg-offer) {
    border-color: var(--hp-amber);
    background: #fffbeb;
  }

  .qg-notes .quick-banner.qg-offer {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
  }

  .qg-offer p {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .qg-offer-mark {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--hp-amber);
    color: #3b1d02;
    font: 800 0.95rem/1 var(--hp-font);
  }

  .qg-offer-long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .qg-offer-short {
    display: inline;
  }

  .qg-offer-more {
    display: none;
  }

  .game-page #quick-game .quick-game .qg-offer button {
    flex: none;
    height: 30px;
    min-height: 0;
    padding: 0 0.75rem;
    font-size: 0.84rem;
  }

  .game-page #quick-game .quick-game .qg-offer .qg-offer-accept {
    border-color: var(--hp-blue);
    background: var(--hp-blue);
    color: #fff;
  }

  /* The game's actions as marks: ⟳, ½, a flag. */
  .game-page #quick-game .quick-game .quick-actions button:not(.qg-result-open) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-height: 0;
    padding: 0;
  }

  .quick-actions .qg-act-label {
    display: none;
  }

  .qg-act-mark {
    display: block;
  }

  span.qg-act-mark {
    font: 800 1.3rem/1 var(--hp-font);
  }

  svg.qg-act-mark {
    width: 20px;
    height: 20px;
  }

  /* The player's own draw offer, standing: the ½ key held down in amber. */
  .game-page #quick-game .quick-game .qg-draw-offered:disabled {
    border-color: var(--hp-amber);
    background: #fef3c7;
    box-shadow: inset 0 2px 0 rgba(180, 83, 9, 0.18);
    color: var(--hp-amber-ink);
  }

}

/* A phone held sideways: the board beside its column, as on a computer,
   without the column at its left ("Revizuire" goes over the board's
   corner); the clocks smaller and the moves on one line, so the column's
   middle has room for the game's actions. */
@media (max-width: 899px) and (max-height: 520px) {
  .game-page.in-game .quick-main {
    padding-inline: 10px;
  }

  .game-page #quick-game .quick-game {
    --side: 0px;
    --col: clamp(250px, 36vw, 320px);
    grid-template-columns: var(--board) var(--col);
    grid-template-areas: "board side";
  }

  .game-page #quick-game .board-review-badge {
    grid-area: board;
    justify-self: start;
    z-index: 3;
    margin: 8px;
    font-size: 0.82rem;
  }

  .qg-clock .quick-clock {
    font-size: 1.6rem;
  }

  .qg-seat {
    font-size: 1.05rem;
  }

  .qg-top-seat,
  .qg-bottom-clock {
    margin-top: 2px;
  }

  .qg-bottom {
    margin-top: 8px;
  }

  .qg-control {
    margin-top: 0.5rem;
    font-size: 0.82rem;
  }

  .qg-notes > :first-child {
    margin-top: 0;
  }

  .qg-notes {
    flex: none;
    margin-top: 0.5rem;
  }

  .game-page #quick-game .moves-history-container {
    flex: none;
    height: 34px;
    min-height: 0;
    margin-top: 0.5rem;
  }

  .game-page #quick-game .moves-history-list {
    height: 100%;
    padding: 0 8px;
    scrollbar-width: none;
  }

  .game-page #quick-game .quick-actions {
    margin-top: 0.5rem;
  }
}

/* Wider phones have room for the offer's whole sentence. */
@media (min-width: 440px) and (max-width: 899px) and (min-height: 521px) {
  .qg-offer-long {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
  }

  .qg-offer-short {
    display: none;
  }

  .qg-offer-more {
    display: inline;
  }
}

@keyframes qg-result-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.94);
  }
}

@keyframes qg-fade-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #quick-game.result-pop .qg-result,
  #quick-game.result-pop .quick-board::after {
    animation: none;
  }
}

/* ===== a finished game replayed (?review=) =====
   The page's header and tabs, then the game as a game is shown: the board
   as large as the window leaves it (the window less the bar, the header
   and the margins, or its width less the column), the column beside it as
   tall as it; header and game share one width, so they line up. The page
   does not scroll: on a phone held sideways the title goes, and on one
   held upright the game is one column (below). */
.game-page.in-review {
  --col: clamp(260px, 24vw, 320px);
  --gap: 16px;
  /* The page's header (title and tabs, .qg-header) and the space around
     the game: above the header, between it and the game, under the game. */
  --review-head: 82px;
  --review-space: calc(1.5rem + 1rem + 20px);
  --board: max(
    260px,
    min(
      100dvh - var(--header-block-size) - var(--review-head) - var(--review-space),
      100vw - var(--col) - var(--gap) - 48px
    )
  );
}

@media (min-width: 900px), (max-height: 520px) {
  body.game-page.in-review {
    overflow: hidden;
  }

  .game-page.in-review .quick-main {
    max-width: calc(var(--board) + var(--gap) + var(--col));
    padding-inline: 0;
    padding-bottom: 0;
  }

  .game-page.in-review .qg-header {
    height: var(--review-head);
    overflow: hidden;
  }
}

.game-page #quick-review:not(:empty) {
  margin-top: 1rem;
}

/* A phone held sideways: the tabs alone over the game, closer to it. */
@media (max-width: 899px) and (max-height: 520px) {
  .game-page.in-review {
    --review-head: 32px;
    --review-space: calc(1.5rem + 10px + 8px);
    --board: max(
      180px,
      min(
        100dvh - var(--header-block-size) - var(--review-head) - var(--review-space),
        100vw - var(--col) - var(--gap) - 48px
      )
    );
  }

  .game-page.in-review .qg-header h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .game-page.in-review #quick-review:not(:empty) {
    margin-top: 10px;
  }

  /* The column: the moves on one line, then the four step keys and the
     PGN's in one row, as on a phone held upright. */
  .game-page.in-review .qg-review .qg-middle {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 3fr);
    align-content: start;
    gap: 6px;
    margin-top: 6px;
  }

  .game-page.in-review .qg-review .qg-middle > * {
    grid-column: 1 / -1;
    margin: 0;
  }

  .game-page.in-review .qg-review .qg-middle > .qg-review-nav {
    grid-column: 1;
  }

  .game-page.in-review .qg-review .qg-middle > .qg-review-pgn {
    grid-column: 2;
  }

  .game-page.in-review #quick-review .moves-history-container {
    height: 34px;
    min-height: 0;
  }

  .game-page.in-review #quick-review .moves-history-list {
    height: 100%;
    padding: 0 8px;
    scrollbar-width: none;
  }

  .game-page.in-review .qg-review-nav button,
  .game-page.in-review .qg-review-pgn .qg-btn {
    height: 36px;
    min-height: 0;
    padding: 0;
  }

  .game-page.in-review .qg-review-pgn .qg-act-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* The PGN's keys side by side, as marks. */
  .game-page.in-review .qg-review-pgn {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .game-page.in-review .qg-review-pgn [data-open-pgn] {
    grid-column: auto;
  }
}

.qg-review {
  display: grid;
  grid-template-columns: var(--board) var(--col);
  grid-template-rows: var(--board);
  grid-template-areas: "board side";
  column-gap: var(--gap);
  color: var(--hp-text);
}

#quick-review .quick-board {
  grid-area: board;
  width: var(--board);
  height: var(--board);
}

.qg-review .qg-side {
  height: var(--board);
}

.qg-review .qg-seat {
  flex: none;
}

.qg-review .qg-seat .history-piece {
  width: 1.5rem;
  height: 1.5rem;
}

.qg-review .qg-top-seat {
  margin-top: 0;
}

.qg-review .qg-bottom-seat {
  margin-top: 12px;
}

.qg-review .qg-middle {
  margin-top: 12px;
}

.qg-review .qg-control {
  margin: 0;
}

/* The result: the score in the finished game's card's colours (won green,
   lost grey, drawn blue), how it ended beside it. */
.qg-review-result {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  margin: 0.5rem 0 0;
}

.qg-review-result strong {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.qg-review-result span {
  color: var(--hp-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.qg-review-result.qg-won strong {
  color: var(--hp-green);
}

.qg-review-result.qg-lost strong {
  color: var(--hp-muted);
}

.qg-review-result.qg-draw strong {
  color: var(--hp-blue);
}

/* The moves: the lessons' card, as in a game. */
#quick-review .moves-history-container {
  order: 0;
  flex: 1 1 0;
  min-height: 4.5rem;
  max-height: none;
  margin-top: 0.75rem;
}

#quick-review .moves-history-list {
  font-size: 0.92rem;
}

/* First, previous, next, last: one row of the homepage's buttons. */
.qg-review-nav {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 0.75rem;
}

.qg-review-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-btn);
  background: var(--hp-surface);
  color: var(--hp-text);
  cursor: pointer;
  transition: background-color var(--hp-ease), border-color var(--hp-ease), color var(--hp-ease);
}

.qg-review-nav button:hover:not(:disabled) {
  border-color: var(--hp-blue-line);
  background: var(--hp-selected);
  color: var(--hp-blue-hover);
}

.qg-review-nav button:focus-visible {
  outline: 2px solid var(--hp-blue);
  outline-offset: 2px;
}

.qg-review-nav button:disabled {
  color: #cbd5e1;
  cursor: default;
}

.qg-review-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qg-review-pgn {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}

.qg-review-pgn .qg-btn {
  min-width: 0;
  padding-inline: 0.5rem;
}

/* Another game's PGN: under the game's own two, or alone in a PGN given. */
.qg-review-pgn [data-open-pgn] {
  grid-column: 1 / -1;
}

/* A phone, or any window narrower than the board and its column (not one
   held sideways): as a game is shown there, nothing to scroll. Under the tabs (the title goes), the
   opponent's name and clock, the board, the player's, the moves on one line
   that scrolls sideways, the result with the game's clock at its right, and
   one row of keys: first, previous, next, last, then the PGN copied,
   downloaded or another opened, as marks, each as wide as the others.
   Every row but the board's has a fixed height. */
@media (max-width: 899px) and (min-height: 521px) {
  body.game-page.in-review {
    overflow: hidden;
  }

  .game-page.in-review {
    --gap: 6px;
    --tabs: 38px;
    --seat: 32px;
    --strip: 34px;
    --info: 26px;
    --keys: 40px;
    --board: max(
      180px,
      min(
        100vw - 20px,
        100dvh - var(--header-block-size) - 20px - var(--tabs) - 10px - 2 * var(--seat) - var(--strip) -
          var(--info) - var(--keys) - 5 * var(--gap)
      )
    );
  }

  .game-page.in-review .quick-main {
    padding: calc(var(--header-block-size) + 10px) 10px 0;
  }

  .game-page.in-review .qg-header {
    height: var(--tabs);
  }

  .game-page.in-review .qg-header h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .game-page.in-review #quick-review:not(:empty) {
    margin-top: 10px;
  }

  .qg-review {
    width: var(--board);
    margin-inline: auto;
    grid-template-columns: minmax(0, 4fr) minmax(0, 3fr);
    grid-template-rows: var(--seat) var(--board) var(--seat) var(--strip) var(--info) var(--keys);
    grid-template-areas:
      "top top"
      "board board"
      "bottom bottom"
      "moves moves"
      "info info"
      "nav pgn";
    gap: var(--gap);
    align-items: center;
  }

  .qg-review .qg-side,
  .qg-review .qg-middle {
    display: contents;
  }

  #quick-review .quick-board {
    grid-area: board;
    width: var(--board);
    height: var(--board);
  }

  .qg-review .qg-top-seat {
    grid-area: top;
    margin: 0;
  }

  .qg-review .qg-bottom-seat {
    grid-area: bottom;
    margin: 0;
  }

  .qg-review .qg-seat .history-piece {
    width: 1.3rem;
    height: 1.3rem;
  }

  .qg-review-clock {
    font-size: 1rem;
  }

  /* The result at the left, cut short should it reach the game's clock. */
  .qg-review .qg-control {
    grid-area: info;
    justify-self: end;
    margin: 0;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .qg-review .qg-control-rated {
    display: none;
  }

  .qg-review-result {
    grid-area: info;
    justify-self: start;
    flex-wrap: nowrap;
    max-width: calc(100% - 92px);
    margin: 0;
    overflow: hidden;
  }

  .qg-review-result strong {
    flex: none;
    font-size: 1.15rem;
  }

  .qg-review-result span {
    min-width: 0;
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #quick-review .moves-history-container {
    grid-area: moves;
    display: flex;
    align-items: stretch;
    height: var(--strip);
    min-height: 0;
    max-height: none;
    margin: 0;
    overflow: hidden;
    border-radius: var(--hp-radius-item);
  }

  #quick-review .moves-header {
    display: none;
  }

  #quick-review .moves-history-list {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    height: 100%;
    padding: 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    font-size: 0.9rem;
    white-space: nowrap;
    scrollbar-width: none;
  }

  #quick-review .moves-history-list::-webkit-scrollbar {
    display: none;
  }

  #quick-review .move-pair {
    flex: 0 0 auto;
    margin-bottom: 0;
  }

  .qg-review-nav {
    grid-area: nav;
    margin: 0;
  }

  .qg-review-nav button {
    height: var(--keys);
  }

  .qg-review-pgn {
    grid-area: pgn;
    margin: 0;
  }

  .qg-review-pgn .qg-btn {
    height: var(--keys);
    min-height: 0;
    padding: 0;
  }

  .qg-review-pgn .qg-btn svg {
    width: 20px;
    height: 20px;
  }

  .qg-review-pgn .qg-act-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* The PGN's keys side by side, as marks. */
  .qg-review-pgn {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .qg-review-pgn [data-open-pgn] {
    grid-column: auto;
  }

  /* Copied: the key turns green for the two seconds its label would say so. */
  .qg-review-pgn .qg-btn.is-copied {
    border-color: #86efac;
    background: #f0fdf4;
    color: #15803d;
  }
}

/* A seat's clock in a replay: as it stood after the move shown, smaller
   than a game's, at the row's end. */
.qg-review-clock {
  flex: none;
  margin-left: auto;
  padding: 0.05em 0.45em;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-item);
  background: var(--hp-surface);
  color: var(--hp-text);
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}