body.game-board-page .pgn-container {
  /* The automatic fit keeps the whole board and both name strips on screen
     (100vh - 200px). A size the reader dragged to is theirs to make larger,
     up to nearly the full window height as Lichess allows (owner,
     2026-09-22: "i cant make the board any bigger with the adjustable
     resizer"), but it never pushes into the move panel: the width caps apply
     to it exactly as to the fit (a preference used to bypass them, which drove
     the panel into the board at narrow windows). The requested size comes
     back when the window grows, so moving between monitors does not discard
     it. The height term is `--game-board-height-room`, measured by the viewer
     so the lower name strip can reach the window's bottom edge with the header
     still in view (owner, 2026-09-23, with Lichess as the reference). */
  --game-board-fit: min(780px, calc(100vh - 200px));
  --game-board-size: clamp(360px, min(var(--preferred-board-size, var(--game-board-fit)), 56vw, var(--game-board-height-room, calc(100vh - 80px)), calc(100vw - 524px)), 780px);
  display: grid;
  grid-template-columns: var(--game-board-size) minmax(320px, 430px);
  /* Keep a clear desktop gutter for the external board resize handle. */
  column-gap: 30px;
  row-gap: 0;
  align-items: start;
  justify-content: center;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.game-board-page .board-column {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  width: 100%;
  max-width: var(--game-board-size);
  margin: 0 auto;
}

body.game-board-page .board-skin {
  position: relative;
}

/* Sized against the board square itself (top/bottom 0 inside .board-skin):
   the bar must always read as exactly board-height. Lichess-style: a solid
   white/ink column, a bit of width, no glow. */
body.game-board-page .engine-eval-gauge {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -18px;
  width: 11px;
  z-index: 4;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 3px;
  background: #dfe6eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, border-color 0.18s ease;
}

body.game-board-page .engine-eval-gauge.active {
  opacity: 1;
}

body.game-board-page .engine-eval-gauge.empty {
  opacity: 0;
}

body.game-board-page .engine-eval-gauge.active.empty {
  opacity: 0.32;
}

body.game-board-page .engine-eval-gauge.reverse {
  transform: rotateX(180deg);
}

body.game-board-page .engine-eval-gauge-black {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: rgb(var(--ink-rgb));
  transition: height 0.3s ease;
}

body.game-board-page .engine-eval-gauge::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

body.game-board-page .engine-eval-gauge-tick {
  position: absolute;
  left: 0;
  width: 100%;
  border-bottom: 1px solid rgba(var(--tint-rgb), 0.38);
}

body.game-board-page .engine-eval-gauge-tick.tick-25 {
  top: 25%;
}

body.game-board-page .engine-eval-gauge-tick.tick-50 {
  top: 50%;
  border-bottom-color: rgba(var(--gold-rgb), 0.82);
}

body.game-board-page .engine-eval-gauge-tick.tick-75 {
  top: 75%;
}

body.game-board-page #chessground-node,
body.game-board-page #gym-board {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(var(--tint-rgb), 0.72);
  box-shadow: 0 0 18px rgba(var(--tint-rgb), 0.28);
  background-color: rgb(var(--slate-rgb));
  position: relative;
}

body.game-board-page #chessground-node:not(.cg-wrap),
body.game-board-page #gym-board:not(.cg-wrap) {
  background-color: var(--cg-light);
  background-image: conic-gradient(var(--cg-dark) 25%, var(--cg-light) 0 50%, var(--cg-dark) 0 75%, var(--cg-light) 0);
  background-size: 25% 25%;
}

body.game-board-page #chessground-node cg-board,
body.game-board-page #gym-board cg-board {
  background-color: var(--cg-light) !important;
  background-image: conic-gradient(var(--cg-dark) 25%, var(--cg-light) 0 50%, var(--cg-dark) 0 75%, var(--cg-light) 0) !important;
  background-size: 25% 25% !important;
}

body.game-board-page #promotion-choice {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: rgba(var(--ink-rgb), 0.28);
}

body.game-board-page #promotion-choice .promotion-square {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(var(--tint-rgb), 0.52);
  border-radius: 50%;
  background: rgba(218, 229, 234, 0.92);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.28), 0 0 18px rgba(var(--tint-rgb), 0.22);
  cursor: pointer;
  transition: border-radius 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

body.game-board-page #promotion-choice .promotion-square:hover,
body.game-board-page #promotion-choice .promotion-square:focus-visible {
  border-color: var(--cyan);
  border-radius: 0;
  box-shadow: inset 0 0 26px rgba(var(--tint-rgb), 0.24), 0 0 24px rgba(var(--tint-rgb), 0.36);
  outline: none;
}

body.game-board-page #promotion-choice piece {
  position: static;
  width: 100%;
  height: 100%;
  display: block;
  background-size: cover;
  pointer-events: none;
  transform: scale(0.82);
  transition: transform 0.16s ease;
}

body.game-board-page #promotion-choice .promotion-square:hover piece,
body.game-board-page #promotion-choice .promotion-square:focus-visible piece {
  transform: scale(0.96);
}

body.game-board-page .board-resize-handle {
  position: absolute;
  /* Keep the hit target just outside the board; only its innermost pixel
     reaches the existing frame, never a playable square. */
  right: -26px;
  bottom: -26px;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  cursor: nwse-resize;
  z-index: 5;
  touch-action: none;
  transform: none;
}

/* Blue and thick on purpose: the corner marks are the only hint the board
   is resizable, so they read as a control, not a decoration. */
body.game-board-page .board-resize-handle::before,
body.game-board-page .board-resize-handle::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
  border-right: 3px solid rgba(var(--cyan-rgb), 0.9);
  border-bottom: 3px solid rgba(var(--cyan-rgb), 0.9);
}

body.game-board-page .board-resize-handle::before {
  top: -15px;
  left: -15px;
  width: 16px;
  height: 16px;
}

body.game-board-page .board-resize-handle::after {
  top: -8px;
  left: -8px;
  width: 9px;
  height: 9px;
}

/* Board resizing is a desktop workspace control.  On the mobile game viewer
   it would sit over the h1 square and compete with normal board input.
   Only website pages carry the site theme class; the Notebook workbench
   (Desktop and /workbench/) is isolated from it and keeps its desktop layout
   down to its 900px minimum window. `:where()` adds no specificity, so these
   rules still rank exactly as before on the website. */
@media (max-width: 900px) {
  body.game-board-page:where(.site-theme-charcoal) .board-resize-handle {
    display: none;
  }
}

body.game-board-page .result-strip {
  display: grid;
  place-items: center;
  min-height: 32px;
  margin-bottom: 6px;
  color: var(--gold);
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 2px;
}

body.game-board-page .player-tag {
  height: 32px;
  display: flex;
  align-items: center;
  color: var(--white);
  font-family: 'Share Tech Mono', monospace;
  font-size: 15px;
  letter-spacing: 1px;
}

body.game-board-page .player-tag.top {
  margin-bottom: 4px;
}

body.game-board-page .player-tag.bottom {
  margin-top: 4px;
}

body.game-board-page .player-info-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

body.game-board-page .color-indicator {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.game-board-page .color-indicator.white {
  background: #f0f0f0;
}

body.game-board-page .color-indicator.black {
  background: #1a1a1a;
  border-color: rgba(var(--tint-rgb), 0.3);
}

body.game-board-page .player-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  color: var(--white);
  font-size: 15px;
}

/* Archive players link to a biography; that must be visible, not something
   you discover by hovering (owner call). Names without a bio stay plain. */
body.game-board-page a.player-name {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-color: rgba(var(--cyan-rgb), 0.45);
  text-underline-offset: 3px;
}
body.game-board-page a.player-name:hover {
  text-decoration-color: var(--cyan);
}

/* A study player's portrait before the name, scaled into the 32px name row so
   the row keeps its height (owner, 2026-09-23). */
body.game-board-page .player-portrait {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  object-fit: cover;
}

body.game-board-page .player-rating {
  color: var(--muted);
  font-size: 13px;
}

/* Result badge beside each player name (lichess-style): green 1 for the
   winner, red 0 for the loser, neutral ½ for a draw — the result reads at a
   glance without scrolling the move list. Pinned to the far edge of each
   player row so the two chips sit vertically parallel at the board corner
   above and below the board (owner call), not inline after the names. */
body.game-board-page .player-result-chip {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 10px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  color: #ffffff;
}
body.game-board-page .result-chip-win {
  background: var(--mint);
  border: 1px solid rgba(0, 0, 0, 0.35);
}
body.game-board-page .result-chip-loss {
  background: var(--danger);
  border: 1px solid rgba(0, 0, 0, 0.35);
}
body.game-board-page .result-chip-draw {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(0, 0, 0, 0.35);
  color: var(--white);
}

body.game-board-page .history-column {
  --engine-panel-height: 52px;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-rows: var(--engine-panel-height) minmax(0, 1fr) 48px;
  gap: 0;
  height: var(--game-board-size);
  margin-top: 74px;
  min-width: 0;
  max-width: 430px;
  border: 1px solid rgba(var(--tint-rgb), 0.18);
  background: rgba(0, 0, 0, 0.46);
  overflow: hidden;
}

body.game-board-page .moves-list {
  flex: 1;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--chrome);
  font-family: 'Share Tech Mono', monospace;
  font-size: 15px;
  line-height: 1.35;
}

body.game-board-page .moves-list.moves-list-blank {
  color: transparent;
}

body.game-board-page .move-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 29px;
  padding: 0;
}

body.game-board-page .move-row:hover {
  background: rgba(var(--tint-rgb), 0.05);
}

body.game-board-page .move-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 0 10px;
  cursor: pointer;
  border: 0;
  border-radius: 2px;
  background: transparent;
  font: inherit;
  text-align: left;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.game-board-page .move-link:hover {
  background: rgba(var(--tint-rgb), 0.2);
}

body.game-board-page .move-link.active {
  background: var(--cyan);
  color: var(--void);
  font-weight: bold;
}

body.game-board-page .move-placeholder {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 0 10px;
  color: var(--muted);
  opacity: 0.7;
  white-space: nowrap;
}

body.game-board-page .move-num {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.9em;
}

body.game-board-page .move-result {
  padding: 8px 12px;
  color: var(--gold);
  font-weight: bold;
}

body.game-board-page .controls {
  display: grid;
  grid-template-columns: repeat(6, minmax(44px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

body.game-board-page .move-navigation {
  align-self: stretch;
  min-height: 0;
  margin-top: 0;
  padding: 6px 10px;
  border-top: 1px solid rgba(var(--tint-rgb), 0.18);
}

body.game-board-page .move-navigation .btn-node {
  min-width: 0;
  height: 34px;
  padding: 0;
  font-size: 16px;
}

/* The reset/rotate icon's own presentation lives in `style.css` now, unscoped.
   It was defined here behind `body.game-board-page`, so the same markup on the
   opening explorer got no `fill: none` and no `stroke` — the browser filled
   both paths solid black and drew the arc as a blob (owner, 2026-08-05: "seems
   weirdly drawn to me"). An icon's stroke is a property of the icon, not of
   the page it happens to be on. */

body.game-board-page .opening-explorer-nav-toggle.active {
  color: var(--mint);
  border-color: rgba(var(--mint-rgb), 0.55);
  background: rgba(var(--mint-rgb), 0.12);
  box-shadow: 0 0 15px rgba(var(--mint-rgb), 0.22);
}

body.game-board-page .btn-node {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--chrome);
  padding: 9px 12px;
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body.game-board-page .btn-node:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 15px var(--cyan-glow);
}

body.game-board-page .position-tools {
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: var(--game-board-size);
  min-width: 0;
  margin-top: 12px;
  padding: 6px 10px;
  border: 1px solid rgba(var(--tint-rgb), 0.18);
  background: rgba(0, 0, 0, 0.28);
}

body.game-board-page .position-action {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
}

body.game-board-page .position-action.active {
  border-color: var(--cyan);
  background: rgba(var(--tint-rgb), 0.12);
  box-shadow: 0 0 15px var(--cyan-glow);
}

body.game-board-page .position-status {
  flex: 1;
  min-width: 0;
  min-height: 0;
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.game-board-page .mobile-move-navigation {
  display: none;
}

body.game-board-page .analysis-panel {
  height: var(--engine-panel-height);
  overflow: hidden;
  border-bottom: 1px solid rgba(var(--tint-rgb), 0.18);
  font-family: 'Share Tech Mono', monospace;
  color: var(--chrome);
  position: relative;
}

body.game-board-page .analysis-panel.engine-active,
body.game-board-page .history-column:has(.analysis-panel.engine-active) {
  --engine-panel-height: var(--engine-active-height, 258px);
}

body.game-board-page .analysis-panel.panel-settings-open {
  overflow: visible;
  z-index: 30;
}

body.game-board-page .analysis-panel.engine-off .analysis-lines,
body.game-board-page .analysis-panel.engine-off .analysis-mode {
  display: none;
}

body.game-board-page .analysis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(var(--tint-rgb), 0.16);
}

body.game-board-page .engine-power {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 96px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(var(--tint-rgb), 0.35);
  background: rgba(0, 0, 0, 0.45);
  color: var(--muted);
  cursor: pointer;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
}

body.game-board-page .engine-power::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.25);
}

body.game-board-page .engine-power.active {
  color: var(--white);
  border-color: rgba(var(--mint-rgb), 0.55);
  background: rgba(var(--mint-rgb), 0.08);
}

body.game-board-page .engine-power.active::before {
  background: var(--mint);
  box-shadow: 0 0 12px rgba(var(--mint-rgb), 0.5);
}

body.game-board-page .engine-power:disabled,
body.game-board-page .engine-power.engine-unavailable {
  cursor: not-allowed;
  opacity: 0.48;
  border-color: rgba(119, 132, 145, 0.35);
  color: rgba(var(--white-rgb), 0.42);
}

body.game-board-page .engine-power:disabled::before,
body.game-board-page .engine-power.engine-unavailable::before {
  background: rgba(119, 132, 145, 0.55);
  box-shadow: none;
}

body.game-board-page .analysis-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
  font-size: 10px;
  letter-spacing: 1px;
}

body.game-board-page .engine-summary {
  color: var(--white);
  font-family: 'Orbitron', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

body.game-board-page .analysis-status {
  color: var(--muted);
  display: block;
  font-size: 10px;
  letter-spacing: 1px;
  width: auto;
  white-space: nowrap;
}

body.game-board-page .engine-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.game-board-page .engine-icon-toggle,
body.game-board-page .engine-panel-settings-toggle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(var(--tint-rgb), 0.35);
  background: rgba(0, 0, 0, 0.45);
  color: var(--chrome);
  cursor: pointer;
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
}

body.game-board-page .engine-icon-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.game-board-page .engine-icon-toggle.active svg {
  opacity: 0.42;
}

body.game-board-page .engine-icon-toggle:hover,
body.game-board-page .engine-icon-toggle.active,
body.game-board-page .engine-panel-settings-toggle:hover,
body.game-board-page .engine-panel-settings-toggle[aria-expanded="true"] {
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(var(--tint-rgb), 0.22);
}

body.game-board-page .engine-icon-toggle:disabled {
  border-color: rgba(var(--tint-rgb), 0.18);
  box-shadow: none;
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.42;
}

body.game-board-page .engine-panel-settings-popover {
  position: absolute;
  top: 50px;
  right: 12px;
  z-index: 20;
  width: min(340px, calc(100% - 24px));
  padding: 14px;
  border: 1px solid rgba(var(--tint-rgb), 0.42);
  background: rgba(var(--ink-rgb), 0.98);
}

body.game-board-page .engine-panel-settings-popover[hidden] {
  display: none;
}

body.game-board-page .engine-setting-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 38px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

body.game-board-page .engine-setting-row + .engine-setting-row {
  margin-top: 8px;
}

body.game-board-page .engine-setting-row select {
  width: 92px;
  height: 30px;
  border: 1px solid rgba(var(--tint-rgb), 0.35);
  background: rgba(0, 0, 0, 0.45);
  color: var(--chrome);
  font-family: 'Share Tech Mono', monospace;
}

/* Check rows carry only a label and a checkbox, so the label gets the full
   row width instead of the 72px column sized for the slider/select rows. */
body.game-board-page .engine-setting-check {
  grid-template-columns: minmax(0, 1fr) auto;
}

body.game-board-page .engine-setting-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--cyan);
  justify-self: end;
}

body.game-board-page .engine-range-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
}

body.game-board-page .engine-range-control input[type="range"] {
  width: 100%;
  accent-color: var(--cyan);
}

body.game-board-page .engine-range-control output {
  color: var(--white);
  text-align: right;
  font-weight: bold;
}

body.game-board-page .engine-setting-check input {
  justify-self: end;
  width: 18px;
  height: 18px;
  accent-color: var(--cyan);
}

body.game-board-page .analysis-lines {
  display: grid;
  gap: 1px;
  padding: 6px;
  grid-auto-rows: auto;
  overflow: hidden;
}

body.game-board-page .analysis-line {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 4px;
  min-height: 30px;
  align-items: center;
  padding: 3px 4px;
  color: var(--muted);
  font-size: 13px;
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

body.game-board-page .analysis-line.expanded {
  align-items: start;
  min-height: 0;
}

body.game-board-page .analysis-line.placeholder {
  opacity: 0.55;
}

body.game-board-page .analysis-line.primary {
  background: rgba(var(--tint-rgb), 0.08);
}

body.game-board-page .analysis-score {
  color: var(--white);
  font-weight: bold;
  text-align: right;
}

body.game-board-page .analysis-line.expanded .analysis-score {
  padding-top: 1px;
}

body.game-board-page .analysis-pv {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

body.game-board-page .analysis-pv.has-toggle {
  grid-template-columns: minmax(0, 1fr) 12px;
  gap: 3px;
}

body.game-board-page .analysis-pv-moves {
  display: grid;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

body.game-board-page .analysis-line.expanded .analysis-pv {
  align-items: flex-start;
}

body.game-board-page .analysis-line.expanded .analysis-pv-moves {
  overflow: visible;
}

body.game-board-page .analysis-pv-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
}

body.game-board-page .analysis-pv-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.game-board-page .analysis-pv-move {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  cursor: pointer;
}

body.game-board-page .analysis-pv-move:hover,
body.game-board-page .analysis-pv-move:focus-visible {
  color: var(--cyan);
  background: rgba(var(--tint-rgb), 0.16);
  outline: none;
}

body.game-board-page .analysis-pv-toggle {
  display: grid;
  place-items: center;
  width: 12px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

body.game-board-page .analysis-pv-toggle:hover,
body.game-board-page .analysis-pv-toggle:focus-visible {
  color: var(--cyan);
  background: rgba(var(--tint-rgb), 0.16);
  outline: none;
}

body.game-board-page .analysis-mode {
  padding: 0 14px 10px;
  height: 36px;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 1px;
  overflow: hidden;
}

body.game-board-page .analysis-mode:empty {
  display: none;
}

body.game-board-page .move-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

body.game-board-page .move-panel.analysis-import-visible > #moves-history {
  display: none;
}

body.game-board-page .analysis-import-rail-panel {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

body.game-board-page .analysis-import-rail-panel[hidden] {
  display: none;
}

body.game-board-page .analysis-import-rail-content {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
}

body.game-board-page .analysis-import-rail-content form {
  grid-template-rows: 34px 42px 34px 42px 34px minmax(72px, 1fr) 48px;
  height: 100%;
}

body.game-board-page .move-panel.playlist-visible #moves-history {
  display: none;
}

body.game-board-page .game-playlist-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
}

body.game-board-page .game-playlist-panel[hidden] {
  display: none;
}

body.game-board-page .game-playlist-autoplay-toggle {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(var(--tint-rgb), 0.35);
  background: rgba(0, 0, 0, 0.45);
  color: var(--chrome);
  cursor: pointer;
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
}

body.game-board-page .game-playlist-autoplay-toggle:hover,
body.game-board-page .game-playlist-autoplay-toggle.active {
  border-color: var(--cyan);
  background: rgba(var(--tint-rgb), 0.12);
  box-shadow: 0 0 12px rgba(var(--tint-rgb), 0.22);
}

body.game-board-page .game-playlist-games {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

body.game-board-page .game-playlist-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid rgba(var(--tint-rgb), 0.08);
}

body.game-board-page .game-playlist-row.is-removable {
  grid-template-columns: minmax(0, 1fr) 38px;
}

body.game-board-page .game-playlist-games a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 7px 12px;
  color: var(--muted);
  text-decoration: none;
}

body.game-board-page .game-playlist-games a:hover,
body.game-board-page .game-playlist-games a:focus-visible {
  background: rgba(var(--tint-rgb), 0.08);
  color: var(--white);
  outline: none;
}

body.game-board-page .game-playlist-row.current {
  background: rgba(var(--cyan-rgb), 0.1);
  box-shadow: inset 3px 0 0 var(--cyan);
}

body.game-board-page .game-playlist-menu {
  position: relative;
  display: grid;
  place-items: center;
}

body.game-board-page .game-playlist-menu[open] {
  z-index: 4;
}

body.game-board-page .game-playlist-menu summary {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.72rem;
  letter-spacing: 1px;
  list-style: none;
}

body.game-board-page .game-playlist-menu summary::-webkit-details-marker {
  display: none;
}

body.game-board-page .game-playlist-menu summary:hover,
body.game-board-page .game-playlist-menu summary:focus-visible,
body.game-board-page .game-playlist-menu[open] summary {
  border-color: rgba(var(--tint-rgb), 0.42);
  color: var(--cyan);
  outline: none;
}

body.game-board-page .game-playlist-menu form {
  position: absolute;
  top: 50%;
  right: 34px;
  width: max-content;
  transform: translateY(-50%);
}

body.game-board-page .game-playlist-menu button {
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid rgba(var(--danger-rgb), 0.62);
  background: rgba(var(--ink-rgb), 0.98);
  color: var(--danger);
  cursor: pointer;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.68rem;
  white-space: nowrap;
}

body.game-board-page .game-playlist-number {
  color: var(--chrome);
  font-size: 0.72rem;
  text-align: center;
}

body.game-board-page .game-playlist-game {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.game-board-page .game-playlist-game strong {
  color: var(--white);
  font-size: 0.76rem;
  font-weight: 500;
}

body.game-board-page .game-playlist-game small {
  color: var(--muted);
  font-size: 0.66rem;
}

body.game-board-page .game-playlist-opening {
  line-height: 1.3;
}

body.game-board-page .game-playlist-empty {
  margin: 0;
  padding: 24px 14px;
  color: var(--muted);
  text-align: center;
}

body.game-board-page .game-playlist-end {
  color: var(--gold);
  font-size: 0.68rem;
  text-align: right;
}

body.game-board-page .history-column.explorer-visible .move-panel {
  display: none;
}

body.game-board-page .opening-explorer-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 12px;
  font-family: 'Share Tech Mono', monospace;
  color: var(--muted);
}

body.game-board-page .opening-explorer-panel[hidden] {
  display: none;
}

body.game-board-page .opening-explorer-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--chrome);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

body.game-board-page .opening-explorer-source {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.8px;
  text-align: right;
}

body.game-board-page .opening-explorer-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: end;
  margin-bottom: 12px;
}

body.game-board-page .opening-explorer-filters[hidden] {
  display: none;
}

body.game-board-page .opening-explorer-filters label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--gold);
  font-size: 0.64rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.game-board-page .opening-explorer-filters input,
body.game-board-page .opening-explorer-filters button {
  height: 30px;
  border: 1px solid rgba(var(--tint-rgb), 0.2);
  background: rgba(0, 0, 0, 0.22);
  color: var(--white);
  font: inherit;
}

body.game-board-page .opening-explorer-filters input {
  width: 100%;
  min-width: 0;
  padding: 0 7px;
}

body.game-board-page .opening-explorer-filters button {
  padding: 0 9px;
  cursor: pointer;
}

body.game-board-page .opening-explorer-filters button:hover {
  border-color: rgba(var(--tint-rgb), 0.62);
  color: var(--cyan);
}

body.game-board-page .opening-explorer-filters[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

body.game-board-page .opening-explorer-body {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 14px;
  padding-right: 4px;
}

body.game-board-page .opening-explorer-summary {
  color: var(--white);
  font-size: 0.82rem;
  line-height: 1.35;
}

body.game-board-page .opening-explorer-section-title {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

body.game-board-page .opening-explorer-moves,
body.game-board-page .opening-explorer-games {
  display: grid;
  gap: 7px;
}

body.game-board-page .opening-explorer-move {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 46px;
  gap: 8px;
  align-items: center;
  width: 100%;
  border: 1px solid rgba(var(--tint-rgb), 0.2);
  background: rgba(var(--tint-rgb), 0.04);
  color: var(--muted);
  padding: 7px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

body.game-board-page .opening-explorer-move.is-tablebase {
  grid-template-columns: 58px minmax(0, 1fr);
}

body.game-board-page .opening-explorer-move:hover {
  border-color: rgba(var(--tint-rgb), 0.62);
  background: rgba(var(--tint-rgb), 0.1);
}

body.game-board-page .opening-explorer-san {
  color: var(--chrome);
  font-weight: 700;
}

body.game-board-page .opening-explorer-pct {
  color: var(--white);
  text-align: right;
  font-size: 0.76rem;
}

body.game-board-page .opening-explorer-bar {
  display: flex;
  min-width: 0;
  height: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.game-board-page .opening-explorer-white {
  background: rgba(var(--mint-rgb), 0.72);
}

body.game-board-page .opening-explorer-draw {
  background: rgba(var(--amber-rgb), 0.68);
}

body.game-board-page .opening-explorer-black {
  background: rgba(var(--danger-rgb), 0.7);
}

body.game-board-page .opening-explorer-game {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  border-top: 1px solid rgba(var(--tint-rgb), 0.14);
  color: var(--muted);
  text-decoration: none;
  padding: 7px 2px;
}

body.game-board-page .opening-explorer-game:hover {
  color: var(--white);
}

body.game-board-page .opening-explorer-game strong {
  min-width: 0;
  color: var(--white);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.game-board-page .opening-explorer-game span {
  color: var(--gold);
  font-size: 0.76rem;
}

body.game-board-page .opening-explorer-empty {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

body.game-board-page .variation-forest {
  grid-column: 1 / -1;
  margin: 0;
  padding: 2px 0;
  border-top: 1px solid rgba(var(--gold-rgb), 0.22);
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.16);
  background: rgba(var(--gold-rgb), 0.035);
  overflow: hidden;
}

body.game-board-page .variation-forest + .variation-forest {
  border-top: 0;
}

body.game-board-page .variation-line {
  --variation-guide-step: 14px;
  --variation-guide-x: 11px;
  --variation-guide-color: rgba(var(--white-rgb), 0.22);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 0;
  min-height: 28px;
  margin: 0;
  padding: 3px 8px 3px calc(26px + (var(--variation-depth, 1) - 1) * var(--variation-guide-step));
  border: 0;
  background-color: transparent;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 var(--variation-guide-x),
    var(--variation-guide-color) var(--variation-guide-x) calc(var(--variation-guide-x) + 1px),
    transparent calc(var(--variation-guide-x) + 1px) var(--variation-guide-step)
  );
  background-repeat: no-repeat;
  background-size: calc((var(--variation-depth, 1) - 1) * var(--variation-guide-step)) 100%;
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 13.5px;
  line-height: 1.5;
}

/* Sub-line numbering reads lichess-style: the number hugs its own move
   (`3.Nc3`), and the pair separation comes from the move's right margin. */
body.game-board-page .variation-line .move-num {
  display: inline;
  align-self: baseline;
  margin: 0 -3px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.92em;
}

body.game-board-page .variation-line::before,
body.game-board-page .variation-line::after {
  content: '';
  position: absolute;
  left: calc(var(--variation-guide-x) + (var(--variation-depth, 1) - 1) * var(--variation-guide-step));
  pointer-events: none;
  border-color: var(--variation-guide-color);
}

body.game-board-page .variation-line::before {
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--variation-guide-color);
}

body.game-board-page .variation-line::after {
  top: 50%;
  width: 11px;
  border-top: 1px solid var(--variation-guide-color);
}

body.game-board-page .variation-line.variation-branch-end::before {
  bottom: 50%;
}

body.game-board-page .variation-line:hover {
  background-color: rgba(var(--gold-rgb), 0.055);
}

body.game-board-page .sandbox-variation {
  background: rgba(var(--tint-rgb), 0.035);
}

body.game-board-page .sandbox-variation::before,
body.game-board-page .sandbox-variation::after {
  border-color: rgba(var(--tint-rgb), 0.48);
}

body.game-board-page .variation-prefix {
  color: var(--gold);
}

body.game-board-page .variation-move {
  border: 0;
  background: transparent;
  color: var(--chrome);
  cursor: pointer;
  font: inherit;
  line-height: 1.35;
  padding: 0 3px;
  margin-right: 6px;
  border-radius: 3px;
  text-decoration: none;
}

body.game-board-page .variation-move:hover,
body.game-board-page .variation-move.active {
  color: var(--white);
  background: rgba(var(--tint-rgb), 0.62);
  text-shadow: none;
}

/* Temporary account comparison treatment. It changes only the move hierarchy:
   the surrounding game-viewer chrome remains the established site design. */
body.game-board-page.move-tree-theme-neutral .moves-list {
  color: var(--white);
}

body.game-board-page.move-tree-theme-neutral .move-row {
  border-bottom: 1px solid rgba(var(--white-rgb), 0.07);
}

body.game-board-page.move-tree-theme-neutral .move-row:hover {
  background: rgba(var(--white-rgb), 0.035);
}

body.game-board-page.move-tree-theme-neutral .move-link:hover {
  background: rgba(var(--white-rgb), 0.09);
  color: var(--white);
}

body.game-board-page.move-tree-theme-neutral .move-result {
  border-top: 1px solid rgba(var(--white-rgb), 0.12);
  color: var(--white);
}

body.game-board-page.move-tree-theme-neutral .variation-forest {
  border-top-color: rgba(var(--white-rgb), 0.12);
  border-bottom-color: rgba(var(--white-rgb), 0.075);
  background: rgba(var(--white-rgb), 0.025);
}

body.game-board-page.move-tree-theme-neutral .variation-line {
  color: var(--data-secondary);
}

body.game-board-page.move-tree-theme-neutral .variation-line:hover {
  background: rgba(var(--white-rgb), 0.045);
}

body.game-board-page.move-tree-theme-neutral .variation-prefix {
  color: var(--muted);
}

body.game-board-page.move-tree-theme-neutral .variation-move {
  color: inherit;
}

body.game-board-page .variation-menu {
  position: fixed;
  z-index: 1000;
  min-width: 112px;
  border: 1px solid rgba(var(--gold-rgb), 0.55);
  background: rgba(var(--deep-rgb), 0.96);
  box-shadow: 0 0 18px rgba(var(--gold-rgb), 0.18);
  padding: 4px;
  font-family: 'Share Tech Mono', monospace;
}

body.game-board-page .variation-menu button {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  padding: 8px 10px;
  font: inherit;
  text-align: left;
}

body.game-board-page .variation-menu button:hover {
  background: rgba(var(--gold-rgb), 0.12);
}

/* The context menu now also opens on read-only game pages (copy PGN), so the
   title styling lives here instead of only in the analysis template. */
body.game-board-page .variation-menu-title {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.32);
  color: var(--white);
  font-weight: 700;
  text-align: center;
}

@media(max-width: 1180px) {
  body.game-board-page .pgn-container {
    --game-board-fit: min(620px, calc(100vh - 200px));
    --game-board-size: clamp(360px, min(var(--preferred-board-size, var(--game-board-fit)), 52vw, var(--game-board-height-room, calc(100vh - 80px)), calc(100vw - 490px)), 620px);
    grid-template-columns: var(--game-board-size) minmax(300px, 400px);
    column-gap: 30px;
  }
}

/* The website's phone layout, scoped to pages with the site theme class. The
   Notebook workbench is isolated from the site theme and keeps its desktop
   layout at its 900px minimum window; `:where()` adds no specificity, so the
   narrower website rules below still win as before. */
@media(max-width: 900px) {
  body.game-board-page:where(.site-theme-charcoal) .page {
    padding-left: 0;
    padding-right: 0;
  }

  body.game-board-page:where(.site-theme-charcoal) .pgn-container {
    --game-board-size: clamp(300px, min(var(--preferred-board-size, 520px), 100vw, calc(100svh - 204px)), 520px);
    grid-template-columns: var(--game-board-size);
    gap: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0;
    border: 0;
    background: transparent;
  }

  @supports not (height: 100svh) {
    body.game-board-page:where(.site-theme-charcoal) .pgn-container {
      --game-board-size: clamp(300px, min(var(--preferred-board-size, 520px), 100vw, calc(100vh - 204px)), 520px);
    }
  }

  body.game-board-page:where(.site-theme-charcoal) .board-column,
  body.game-board-page:where(.site-theme-charcoal) .history-column {
    max-width: var(--game-board-size);
    width: 100%;
    justify-self: center;
  }

  body.game-board-page:where(.site-theme-charcoal) .board-column {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-areas:
      "result"
      "user-top"
      "board"
      "user-bottom";
    grid-template-rows: auto 22px var(--game-board-size) 22px;
    align-items: stretch;
  }

  body.game-board-page:where(.site-theme-charcoal) .result-strip {
    grid-area: result;
  }

  body.game-board-page:where(.site-theme-charcoal) .player-tag.top {
    grid-area: user-top;
  }

  body.game-board-page:where(.site-theme-charcoal) .board-skin {
    grid-area: board;
  }

  body.game-board-page:where(.site-theme-charcoal) .player-tag.bottom {
    grid-area: user-bottom;
  }

  body.game-board-page:where(.site-theme-charcoal) .history-column {
    grid-column: 1;
    grid-row: 3;
    --mobile-move-list-height: max(400px, 48vh);
    grid-template-rows: 40px var(--engine-panel-height) var(--mobile-move-list-height);
    height: calc(40px + var(--engine-panel-height) + var(--mobile-move-list-height));
    margin-top: 0;
    overflow: visible;
  }

  body.game-board-page:where(.site-theme-charcoal) .result-strip {
    min-height: 22px;
    margin-bottom: 2px;
    font-size: 0.82rem;
    letter-spacing: 1px;
  }

  body.game-board-page:where(.site-theme-charcoal) .player-tag {
    height: 22px;
    font-size: 12px;
    letter-spacing: 0;
    padding: 0 3px;
    box-sizing: border-box;
  }

  body.game-board-page:where(.site-theme-charcoal) .player-tag.top {
    margin-bottom: 2px;
    align-self: end;
  }

  body.game-board-page:where(.site-theme-charcoal) .player-tag.bottom {
    margin-top: 2px;
    align-self: start;
  }

  body.game-board-page:where(.site-theme-charcoal) .player-info-wrapper {
    gap: 7px;
  }

  body.game-board-page:where(.site-theme-charcoal) .color-indicator {
    width: 10px;
    height: 10px;
  }

  body.game-board-page:where(.site-theme-charcoal) .player-name {
    font-size: 12px;
  }

  body.game-board-page:where(.site-theme-charcoal) .player-rating {
    font-size: 11px;
  }

  body.game-board-page:where(.site-theme-charcoal) .position-tools {
    display: none;
  }

  body.game-board-page:where(.site-theme-charcoal) .move-navigation {
    grid-row: 1;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    margin-top: 0;
    padding: 0;
    border-top: 0;
    border-bottom: 1px solid rgba(var(--tint-rgb), 0.18);
    background: rgba(0, 0, 0, 0.46);
  }

  body.game-board-page:where(.site-theme-charcoal) .move-navigation .btn-node {
    height: 40px;
    min-height: 40px;
    border-width: 0 0 0 1px;
    background: rgba(var(--panel-rgb), 0.78);
    box-shadow: none;
    font-size: 15px;
  }

  body.game-board-page:where(.site-theme-charcoal) .move-navigation .btn-node:first-child {
    border-left: 0;
  }

  body.game-board-page:where(.site-theme-charcoal) .analysis-panel {
    grid-row: 2;
    background: rgba(0, 0, 0, 0.46);
  }

  body.game-board-page:where(.site-theme-charcoal) .move-panel,
  body.game-board-page:where(.site-theme-charcoal) .opening-explorer-panel {
    grid-row: 3;
  }

  body.game-board-page:where(.site-theme-charcoal) .analysis-panel.engine-active,
  body.game-board-page:where(.site-theme-charcoal) .history-column:has(.analysis-panel.engine-active) {
    --engine-panel-height: var(--engine-active-height, 208px);
  }

  body.game-board-page:where(.site-theme-charcoal) .engine-eval-gauge {
    display: none;
  }

  body.game-board-page:where(.site-theme-charcoal) .analysis-header {
    min-height: 44px;
    gap: 8px;
    padding: 0 8px;
  }

  body.game-board-page:where(.site-theme-charcoal) .engine-power {
    min-width: 74px;
    height: 30px;
    padding: 0 8px;
    font-size: 10px;
  }

  body.game-board-page:where(.site-theme-charcoal) .analysis-title {
    gap: 2px;
  }

  body.game-board-page:where(.site-theme-charcoal) .engine-summary {
    font-size: 1rem;
  }

  body.game-board-page:where(.site-theme-charcoal) .analysis-status {
    font-size: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.game-board-page:where(.site-theme-charcoal) .engine-controls {
    gap: 6px;
  }

  body.game-board-page:where(.site-theme-charcoal) .engine-icon-toggle,
  body.game-board-page:where(.site-theme-charcoal) .engine-panel-settings-toggle {
    width: 30px;
    height: 30px;
  }

  body.game-board-page:where(.site-theme-charcoal) .engine-panel-settings-popover {
    top: 42px;
    right: 8px;
    width: min(320px, calc(100% - 16px));
    padding: 10px;
  }

  body.game-board-page:where(.site-theme-charcoal) .analysis-lines {
    padding: 4px;
  }

  body.game-board-page:where(.site-theme-charcoal) .analysis-line {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 28px;
    padding: 3px 4px;
    font-size: 12px;
  }

  body.game-board-page:where(.site-theme-charcoal) .analysis-pv-row {
    font-size: 12px;
    line-height: 1.32;
  }

  body.game-board-page:where(.site-theme-charcoal) .move-row {
    grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr);
    min-height: 28px;
    padding: 0;
  }

  body.game-board-page:where(.site-theme-charcoal) .move-link,
  body.game-board-page:where(.site-theme-charcoal) .move-placeholder {
    padding: 0 8px;
  }
}

@media(max-width: 560px) {
  body.game-board-page:where(.site-theme-charcoal) .pgn-container {
    --game-board-size: clamp(300px, min(100vw, calc(100svh - 204px)), 420px);
  }

  @supports not (height: 100svh) {
    body.game-board-page:where(.site-theme-charcoal) .pgn-container {
      --game-board-size: clamp(300px, min(100vw, calc(100vh - 204px)), 420px);
    }
  }

  body.game-board-page:where(.site-theme-charcoal) .result-strip {
    display: none;
  }

  body.game-board-page:where(.site-theme-charcoal) .board-column {
    grid-template-areas:
      "user-top"
      "board"
      "user-bottom";
    grid-template-rows: 26px var(--game-board-size) 26px;
  }

  body.game-board-page:where(.site-theme-charcoal) .player-tag {
    display: flex;
    height: 26px;
    padding: 0 6px;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1;
  }

  body.game-board-page:where(.site-theme-charcoal) .player-tag.top {
    margin-bottom: 0;
  }

  body.game-board-page:where(.site-theme-charcoal) .player-tag.bottom {
    margin-top: 0;
  }

  body.game-board-page:where(.site-theme-charcoal) .player-info-wrapper {
    width: 100%;
    min-width: 0;
  }

  body.game-board-page:where(.site-theme-charcoal) .player-name {
    min-width: 0;
    /* Keep the profile hit area on the rendered name; the row's remaining
       width belongs to move-navigation taps around the board. */
    flex: 0 1 auto;
  }

  body.game-board-page:where(.site-theme-charcoal) .analysis-panel.engine-active,
  body.game-board-page:where(.site-theme-charcoal) .history-column:has(.analysis-panel.engine-active) {
    --engine-panel-height: var(--engine-active-height, 198px);
  }

  body.game-board-page:where(.site-theme-charcoal) .analysis-header {
    min-height: 42px;
    align-items: center;
    flex-direction: row;
    padding: 0 6px;
  }

  body.game-board-page:where(.site-theme-charcoal) .engine-power {
    min-width: 68px;
    width: auto;
    justify-content: center;
  }

  body.game-board-page:where(.site-theme-charcoal) .engine-controls {
    justify-content: flex-end;
  }

  body.game-board-page:where(.site-theme-charcoal) .engine-panel-settings-popover {
    top: 40px;
    left: 8px;
    right: 8px;
    width: auto;
  }

  body.game-board-page:where(.site-theme-charcoal) .analysis-line {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 3px;
    padding: 3px 4px;
    font-size: 12px;
  }

  body.game-board-page:where(.site-theme-charcoal) .analysis-pv.has-toggle {
    grid-template-columns: minmax(0, 1fr) 12px;
    gap: 3px;
  }

  body.game-board-page:where(.site-theme-charcoal) .analysis-pv-row {
    gap: 2px;
    font-size: 12px;
  }

  body.game-board-page:where(.site-theme-charcoal) .analysis-pv-move {
    padding: 0;
  }

  body.game-board-page:where(.site-theme-charcoal) .analysis-pv-toggle {
    width: 12px;
  }
}

/* Full screen: only the board and move panel (owner, 2026-09-23: "a full
   screen mode where its only the board and move panel", "where the navs
   disappear", chess.com's focus mode as the reference). The site navigation,
   footer, guide links and the details under the board go; the board fills the
   window height, so the resize handle has nothing left to do. The viewer
   measures `--game-board-height-room` again when the mode changes. The page
   keeps the exit button's corner clear. */
body.game-board-page.board-focus-mode .header-nav-row,
body.game-board-page.board-focus-mode .mobile-nav-toggle,
body.game-board-page.board-focus-mode .footer,
body.game-board-page.board-focus-mode .message-stack,
body.game-board-page.board-focus-mode .game-archive-return,
body.game-board-page.board-focus-mode [data-board-resize-handle] {
  display: none;
}

body.game-board-page.board-focus-mode .page {
  --board-focus-exit-room: 48px;
  max-width: none;
  padding-top: 12px;
  padding-bottom: 0;
}

body.game-board-page.board-focus-mode .pgn-container[data-viewer-layout-root] {
  padding-top: 0;
  padding-bottom: 0;
}

body.game-board-page.board-focus-mode .page-body {
  min-height: 0;
}

body.game-board-page .board-focus-exit {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 40;
}

/* Wide windows keep the exit button's corner clear with a left margin; below
   1180px, where width limits the board, the button sits above the names. */
@media(min-width: 1181px) {
  body.game-board-page.board-focus-mode .page {
    padding-left: var(--board-focus-exit-room);
  }

  body.game-board-page.board-focus-mode .pgn-container {
    --game-board-size: clamp(360px, min(var(--game-board-height-room, calc(100vh - 80px)), calc(100vw - 524px - var(--board-focus-exit-room))), 2400px);
  }
}

@media(min-width: 901px) and (max-width: 1180px) {
  body.game-board-page.board-focus-mode .page {
    padding-top: var(--board-focus-exit-room);
  }

  body.game-board-page.board-focus-mode .pgn-container {
    --game-board-size: clamp(360px, min(var(--game-board-height-room, calc(100vh - 80px)), calc(100vw - 490px)), 2400px);
  }
}

/* When it gives the bigger board, the names move to a column on the left of
   the board, portrait above name as on chess.com (owner, 2026-09-23: "the
   players names can go on the left side of the board as chess.com shows to
   make full room"; "the players names should be next to their portaits when
   avaiable"). The viewer measures both arrangements in windows wider than
   1180px and sets `board-focus-names-beside`; a tall or narrow window keeps
   the names above and below, where a side column would cost more board than
   it frees. */
@media(min-width: 1181px) {
  body.game-board-page.board-focus-mode.board-focus-names-beside .pgn-container {
    --board-focus-names-width: 168px;
    --board-focus-names-gap: 20px;
    --game-board-size: clamp(360px, min(var(--game-board-height-room, calc(100vh - 80px)), calc(100vw - 524px - var(--board-focus-exit-room) - var(--board-focus-names-width) - var(--board-focus-names-gap))), 2400px);
    grid-template-columns: calc(var(--game-board-size) + var(--board-focus-names-width) + var(--board-focus-names-gap)) minmax(320px, 430px);
  }

  /* The move panel normally drops below the top name strip; with the names
     beside the board it starts level with the board. */
  body.game-board-page.board-focus-mode.board-focus-names-beside .history-column[data-viewer-layout-panel] {
    margin-top: 0;
  }

  body.game-board-page.board-focus-mode.board-focus-names-beside .board-column {
    display: grid;
    grid-template-columns: var(--board-focus-names-width) var(--game-board-size);
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: var(--board-focus-names-gap);
    max-width: none;
  }

  body.game-board-page.board-focus-mode.board-focus-names-beside .board-column > .player-tag {
    grid-column: 1;
    height: auto;
    margin: 0;
  }

  body.game-board-page.board-focus-mode.board-focus-names-beside .board-column > .player-tag.top {
    grid-row: 1;
    align-self: start;
  }

  body.game-board-page.board-focus-mode.board-focus-names-beside .board-column > .player-tag.bottom {
    grid-row: 3;
    align-self: end;
  }

  body.game-board-page.board-focus-mode.board-focus-names-beside .board-column > .board-skin {
    grid-column: 2;
    grid-row: 1 / 4;
  }

  body.game-board-page.board-focus-mode.board-focus-names-beside .player-info-wrapper {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  body.game-board-page.board-focus-mode.board-focus-names-beside .player-portrait {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 4px;
    order: -1;
  }

  body.game-board-page.board-focus-mode.board-focus-names-beside .player-info-wrapper .player-name {
    flex: 1 1 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
/* The public score is readable before the interactive viewer initializes.
   Keep its factual overview below the board and outside movable panels. */
.game-summary { margin-block: 32px; padding-inline: clamp(14px, 2vw, 32px); }
.game-summary .about-copy-card { max-width: none; }
.game-summary > h1 { text-align: center; }
.game-summary-links { margin-block: 16px; }
.game-pgn { margin-block-start: 24px; }
body.site-theme-charcoal .game-pgn > summary { display: flex; width: fit-content; text-align: center; }
.game-pgn .code-block { box-sizing: border-box; width: 100%; min-width: 0; margin-block-start: 16px; overflow: auto; }
body.board-focus-mode .game-summary { display: none; }