/* Website-only side-panel structure. The desktop build concatenates
   game-board.css directly, so these rules intentionally live in a separate
   asset loaded only by the web Analysis and game-detail templates. */

body.game-board-page .history-column {
  --viewer-panel-row-height: 40px;
  container-type: inline-size;
}

body.game-board-page .viewer-panel-view,
body.game-board-page .game-rail-panel.viewer-panel-view,
body.game-board-page .annotation-rail.viewer-panel-view {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

body.game-board-page .viewer-panel-view[hidden],
body.game-board-page .game-rail-panel.viewer-panel-view[hidden],
body.game-board-page .annotation-rail.viewer-panel-view[hidden] {
  display: none;
}

body.game-board-page .game-rail-panel.viewer-panel-view,
body.game-board-page .annotation-rail.viewer-panel-view {
  grid-row: 2;
}

body.game-board-page .viewer-panel-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* Only the long lists scroll on their own and keep the page still at their
   ends: the moves list (game-board.css) and the playlist. Containment on
   every panel body trapped a phone swipe over a panel that does not overflow
   — Share and export filled most of the screen and the page would not move
   (owner, 2026-09-23: "i cant scroll the page by touching in that area";
   "the move panel is supposed to scroll independantly"). */
body.game-board-page .game-playlist-body {
  overscroll-behavior: contain;
}

body.game-board-page #game-share-rail-panel .viewer-panel-body {
  scrollbar-gutter: auto;
}

body.game-board-page .viewer-panel-footer {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: var(--viewer-panel-row-height);
  margin: 0;
  padding: 7px 10px;
  border-top: 1px solid rgba(var(--tint-rgb), 0.18);
  background: rgba(0, 0, 0, 0.16);
}

body.game-board-page .viewer-panel-footer:empty {
  display: none;
}

body.game-board-page .viewer-panel-row {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(76px, 28%) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: var(--viewer-panel-row-height);
  margin: 0;
  padding: 7px 12px;
  border: 0;
  border-radius: 0;
  color: var(--data-secondary);
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  line-height: 1.35;
}

body.game-board-page .viewer-panel-rows > .viewer-panel-row:nth-child(even),
body.game-board-page .analysis-import-fields > .viewer-panel-row:nth-child(even),
body.game-board-page .annotation-rail-list > .viewer-panel-row:nth-child(even),
body.game-board-page .game-underboard-actions > .viewer-panel-row:nth-child(even),
body.game-board-page .game-underboard-actions > details:nth-child(even) > .viewer-panel-row {
  background: rgba(255, 255, 255, 0.035);
}

body.game-board-page .viewer-panel-row-label {
  min-width: 0;
  color: var(--muted);
  font-weight: 700;
  overflow-wrap: anywhere;
}

body.game-board-page .viewer-panel-row-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.game-board-page #moves-history.viewer-panel-body {
  padding-top: 0;
}

body.game-board-page #moves-history .move-result {
  box-sizing: border-box;
  width: 100%;
}

body.game-board-page #moves-history .move-result-terminal {
  display: grid;
  place-items: center;
  min-height: var(--viewer-panel-row-height);
  padding: 6px 12px;
  text-align: center;
}

body.game-board-page #moves-history .move-result-pending {
  display: block;
  min-height: 0;
  padding: 8px 12px;
  text-align: left;
}

/* The game-info table is the reference row treatment. */
body.game-board-page .game-info-table.viewer-panel-rows {
  display: grid;
  flex: 1 0 auto;
  grid-auto-rows: minmax(48px, auto);
  overflow: visible;
  border: 0;
  background: transparent;
}

body.game-board-page .game-info-body {
  display: flex;
  flex-direction: column;
}

body.game-board-page .game-info-row.viewer-panel-row {
  grid-template-columns: minmax(76px, 28%) minmax(0, 1fr);
  min-height: 48px;
  padding: 9px 12px;
  color: var(--data-secondary);
  font-size: 14px;
}

body.game-board-page .game-info-row-date .game-info-value {
  color: var(--white);
  font-weight: 700;
  letter-spacing: 0.5px;
}

body.game-board-page .game-info-row-head-to-head a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.game-board-page .game-related-links {
  flex: 0 0 auto;
  margin: 0;
  padding: 12px;
  font-size: 12px;
}

/* Import is a title + scrollable rows + natural-width action footer. */
body.game-board-page .analysis-import-rail-content,
body.game-board-page .analysis-import-panel.analysis-import-rail-content {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.game-board-page .analysis-import-rail-content form {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

body.game-board-page .analysis-import-fields {
  display: flex;
  flex-direction: column;
}

body.game-board-page .analysis-import-row {
  flex: 0 0 auto;
}

body.game-board-page .analysis-import-pgn-row {
  flex: 1 0 calc(var(--viewer-panel-row-height) * 4);
  align-items: stretch;
}

body.game-board-page .analysis-import-label.viewer-panel-row-label {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
}

body.game-board-page .analysis-import-value {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: center;
}

body.game-board-page .analysis-game-link-input,
body.game-board-page .analysis-fen-input,
body.game-board-page .analysis-pgn-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(var(--tint-rgb), 0.3);
  border-radius: 2px;
  outline: 0;
  background: rgba(0, 0, 0, 0.38);
  color: var(--white);
}

body.game-board-page .analysis-game-link-input,
body.game-board-page .analysis-fen-input {
  min-height: 34px;
  padding: 6px 9px;
}

body.game-board-page .analysis-pgn-input {
  flex: 1;
  min-height: calc(var(--viewer-panel-row-height) * 3);
  padding: 8px 9px;
  resize: vertical;
}

body.game-board-page .analysis-game-link-input:focus-visible,
body.game-board-page .analysis-fen-input:focus-visible,
body.game-board-page .analysis-pgn-input:focus-visible,
body.game-board-page .game-share-fen textarea:focus-visible {
  border-color: var(--cyan);
  outline: 2px solid rgba(var(--cyan-rgb), 0.28);
  outline-offset: 1px;
  box-shadow: inset 0 0 18px rgba(var(--tint-rgb), 0.14);
}

body.game-board-page .analysis-game-link-status {
  margin: 3px 0 0;
}

body.game-board-page .analysis-import-actions.viewer-panel-footer {
  display: flex;
  grid-template-columns: none;
  justify-content: flex-end;
}

body.game-board-page .analysis-import-actions.viewer-panel-footer :is(.btn-node, .action-primary, .action-secondary) {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  padding-inline: 14px;
}

/* The FEN wraps in a two-row well at one fixed size with its copy key joined
   to it. The share/export actions were once rows in this panel's row
   language; the owner reviewed a flat list of them as "worse" (2026-09-19)
   and they are a sheet of keys now — see game_detail.html's tile rules and
   the charcoal theme's share-panel block. */
body.game-board-page .game-share-fen.viewer-panel-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 4px;
  margin: 0;
  padding-block: 6px;
}

body.game-board-page .game-share-fen-field {
  grid-template-columns: minmax(0, 1fr) 32px;
}

body.game-board-page .game-share-fen textarea {
  min-height: 36px;
  padding: 6px 6px;
  border-color: rgba(var(--tint-rgb), 0.3);
  background: rgba(0, 0, 0, 0.38);
  font-family: 'Noto Sans', 'Segoe UI', system-ui, Roboto, Helvetica, Arial, sans-serif;
  font-size: 10.5px;
  letter-spacing: -0.25px;
  white-space: pre-wrap;
}

body.game-board-page .game-share-fen-copy {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: auto;
  min-height: 36px;
  padding: 0;
}

body.game-board-page .game-share-fen-copy svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

body.game-board-page .game-underboard-actions {
  display: grid;
  gap: 12px;
}

body.game-board-page .game-underboard-actions > * {
  width: 100%;
  margin: 0;
}

body.game-board-page .annotation-rail-note.viewer-panel-row:hover,
body.game-board-page .annotation-rail-note.viewer-panel-row:focus-visible {
  outline: 0;
  background: rgba(var(--tint-rgb), 0.1);
  box-shadow: inset 2px 0 0 var(--cyan);
  color: var(--white);
}

body.game-board-page .game-open-notebook-status {
  padding: 8px 12px;
  border-top: 1px solid rgba(var(--tint-rgb), 0.18);
  color: var(--data-secondary);
  font-size: 0.78rem;
  line-height: 1.45;
}

body.game-board-page .game-open-notebook-status span,
body.game-board-page .game-open-notebook-status a {
  display: block;
}

body.game-board-page .game-open-notebook-status a {
  margin-top: 4px;
  color: var(--cyan);
}

/* An annotated-book playlist is a compact table of contents. Its book title,
   filter, scrolling entries, and book navigation own four distinct rows; the
   separate move-navigation rail below remains untouched. */
body.game-board-page .game-playlist-title {
  box-sizing: border-box;
  display: grid;
  flex: 0 0 auto;
  gap: 4px;
  min-width: 0;
  min-height: calc(var(--viewer-panel-row-height) + 20px);
  padding-block: 9px;
  padding-inline: 12px;
  border-bottom: 1px solid rgba(var(--tint-rgb), 0.18);
  background: rgba(0, 0, 0, 0.22);
}

body.game-board-page .game-playlist-title h2 {
  color: var(--white);
  font-size: 0.78rem;
  line-height: 1.35;
  letter-spacing: 1px;
  overflow-wrap: anywhere;
  text-transform: none;
  white-space: normal;
}

body.game-board-page .game-playlist-title > span {
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.4px;
}

body.game-board-page .game-playlist-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 8px;
  flex: 0 0 auto;
  align-items: center;
  min-width: 0;
  min-height: 46px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(var(--tint-rgb), 0.16);
  background: rgba(255, 255, 255, 0.025);
}

body.game-board-page .game-playlist-filter .game-playlist-autoplay-toggle {
  width: 32px;
  min-width: 32px;
  height: 34px;
  min-height: 34px;
  margin: 0;
}

body.game-board-page .game-playlist-filter-field {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid rgba(var(--tint-rgb), 0.3);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.38);
}

/* The shared sprite's magnifier, not a "⌕" character: controls use the icon
   vocabulary, and the glyph drew in whatever the fallback font had. */
body.game-board-page .game-playlist-filter-glyph {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding-left: 10px;
  color: var(--muted);
  fill: none;
  pointer-events: none;
}

body.game-board-page .game-playlist-filter input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--white);
  font-family: 'Share Tech Mono', monospace;
}

body.game-board-page .game-playlist-filter-field:focus-within {
  border-color: var(--cyan);
  outline: 2px solid rgba(var(--cyan-rgb), 0.28);
  outline-offset: 1px;
  box-shadow: inset 0 0 18px rgba(var(--tint-rgb), 0.14);
}

body.game-board-page .game-playlist-body {
  padding: 0;
}

body.game-board-page .game-playlist-games {
  overflow: visible;
}

body.game-board-page .game-playlist-row {
  display: grid;
  min-height: 44px;
  border-bottom: 1px solid rgba(var(--tint-rgb), 0.1);
}

body.game-board-page .game-playlist-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.025);
}

body.game-board-page .game-playlist-row > .game-playlist-link,
body.game-board-page .game-playlist-row > .game-playlist-menu {
  grid-area: 1 / 1;
}

body.game-board-page .game-playlist-row > .game-playlist-link.viewer-panel-row {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  min-height: 44px;
  padding: 5px 12px 5px 8px;
}

body.game-board-page .game-playlist-row > .game-playlist-menu {
  align-self: start;
  justify-self: end;
  margin: 4px;
  z-index: 1;
}

body.game-board-page .game-playlist-number.viewer-panel-row-label {
  align-self: center;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 400;
  text-align: right;
}

body.game-board-page .game-playlist-game {
  display: block;
  overflow: hidden;
}

body.game-board-page .game-playlist-game > strong,
body.game-board-page .game-playlist-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.game-board-page .game-playlist-game > strong {
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.35;
}

body.game-board-page .game-playlist-player {
  color: var(--cyan);
}

body.game-board-page .game-playlist-vs,
body.game-board-page .game-playlist-date {
  color: var(--muted);
}

body.game-board-page .game-playlist-result {
  color: var(--chrome);
}

body.game-board-page .game-playlist-opening,
body.game-board-page .game-playlist-meta .sep {
  color: var(--gold);
}

body.game-board-page .game-playlist-meta {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.25;
}

body.game-board-page .game-playlist-games .game-playlist-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--viewer-panel-row-height);
  padding: 7px 12px;
  border-bottom: 1px solid rgba(var(--tint-rgb), 0.1);
  background: transparent;
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.4px;
  text-decoration: none;
}

body.game-board-page .game-playlist-games .game-playlist-load-more:hover,
body.game-board-page .game-playlist-games .game-playlist-load-more:focus-visible {
  outline: 0;
  background: rgba(var(--tint-rgb), 0.08);
  box-shadow: inset 2px 0 0 var(--cyan);
  color: var(--cyan);
}

body.game-board-page .game-playlist-footer {
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  min-height: var(--viewer-panel-row-height);
  padding-block: 5px;
}

body.game-board-page .game-playlist-footer-position {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.66rem;
  white-space: nowrap;
}

body.game-board-page .game-playlist-book-navigation {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-left: auto;
}

body.game-board-page .game-playlist-book-navigation a,
body.game-board-page .game-playlist-book-navigation span {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.68rem;
  text-decoration: none;
  white-space: nowrap;
}

body.game-board-page .game-playlist-book-navigation span {
  color: var(--muted);
}

body.game-board-page .game-playlist-book-navigation a:hover,
body.game-board-page .game-playlist-book-navigation a:focus-visible {
  color: var(--white);
  outline: 1px solid var(--cyan);
  outline-offset: 3px;
}

/* Annotation notes are the long-form instance of the same label/value row. */
body.game-board-page .annotation-rail-body {
  padding: 0;
}

body.game-board-page .annotation-rail-intro {
  margin: 0;
  padding: 12px;
  border-bottom: 1px solid rgba(var(--tint-rgb), 0.16);
}

body.game-board-page .annotation-rail-note.viewer-panel-row {
  grid-template-columns: minmax(76px, 28%) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 9px 12px;
  border-top: 0;
  border-bottom: 1px solid rgba(var(--tint-rgb), 0.12);
}

body.game-board-page .annotation-rail-note.viewer-panel-row.current {
  border-color: rgba(var(--tint-rgb), 0.55);
}

/* Source pages: the game's mapped section of the original book, drawn as
   page-width crops like the Desktop Notebook's Source Pages view. */
body.game-board-page .source-pages-body {
  padding: 0;
  overflow: auto;
  cursor: grab;
  overscroll-behavior: contain;
}

body.game-board-page .source-pages-body.is-panning { cursor: grabbing; }
body.game-board-page .game-rail-panel.source-pages-panel { grid-row: 2 / 4; }
body.game-board-page .history-column:has(#source-pages-rail-panel:not([hidden])) > .move-navigation { display: none; }
body.game-board-page .source-pages-navigation {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  flex: none;
  margin: 0;
  padding: 6px 8px;
}
body.game-board-page .source-pages-navigation .btn-node { min-width: 0; padding: 10px 0; }
body.game-board-page .source-pages-navigation svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
body.source-pages-window { margin: 0; padding: 0; }
body.source-pages-window .source-pages-panel { height: 100dvh; width: 100%; }
body.source-pages-window .source-pages-navigation { grid-template-columns: repeat(4, minmax(0, 1fr)); }

body.game-board-page .source-pages-status {
  margin: 0 0 10px;
}

body.game-board-page .source-pages-status[hidden] {
  display: none;
}

body.game-board-page .source-pages-status.is-error {
  color: var(--danger);
}

body.game-board-page .source-pages-surface {
  display: grid;
  gap: 0;
  position: relative;
  justify-items: start;
}

body.game-board-page .source-pages-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

body.game-board-page .annotation-rail-source.viewer-panel-footer {
  display: block;
  min-height: var(--viewer-panel-row-height);
  padding: 9px 12px;
}

/* Text identity wins space over toolbar chrome. View/action icons may scroll;
   the separate preference control stays reachable at the edge. */
body.game-board-page .analysis-header {
  justify-content: flex-start;
  gap: 8px;
}

body.game-board-page .analysis-title {
  flex: 1 1 92px;
  min-width: 58px;
}

body.game-board-page .analysis-status {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
}

body.game-board-page .analysis-panel.engine-off .analysis-title {
  flex-direction: row;
  align-items: center;
}

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

body.game-board-page .history-column:has(.viewer-panel-switcher):not(:has(.analysis-panel.engine-active)) {
  --engine-panel-height: 52px;
}

body.game-board-page .viewer-panel-switcher {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.game-board-page .analysis-header:has(.viewer-panel-switcher) {
  gap: 4px;
}

body.game-board-page .viewer-panel-switcher > * {
  flex: 0 0 32px;
}

body.game-board-page .viewer-panel-switcher .engine-bookmark-control,
body.game-board-page .viewer-panel-switcher .save-popover-shell {
  width: 32px;
  height: 32px;
}

body.game-board-page .viewer-panel-switcher .position-action {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
}

body.game-board-page .move-navigation:has(.annotation-rail-nav-toggle) {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

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

body.game-board-page .analysis-panel:has(.viewer-panel-switcher) .engine-controls-priority {
  flex: 0 0 32px;
  min-width: 32px;
  overflow: visible;
}

body.game-board-page .analysis-panel:has(.viewer-panel-switcher) .engine-toolbar-scroll {
  display: none;
}

body.game-board-page .engine-controls-priority {
  display: flex;
  flex: 0 1 190px;
  gap: 4px;
  min-width: 40px;
  overflow: hidden;
}

/* Analysis owns a compact action rail rather than the five-switch game-detail
   toolbar. Let its copy/replay/import icons size to their content so settings
   follows them directly instead of being stranded at the far edge. */
body.game-board-page .analysis-board-shell .engine-controls-priority {
  flex: 0 1 auto;
  min-width: 36px;
}

body.game-board-page .analysis-board-shell .engine-toolbar-scroll {
  flex: 0 1 auto;
}

body.game-board-page .engine-toolbar-scroll {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

body.game-board-page .engine-toolbar-scroll::-webkit-scrollbar {
  display: none;
}

body.game-board-page .engine-toolbar-scroll > * {
  flex: 0 0 32px;
}

body.game-board-page .engine-preference-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

body.game-board-page .game-viewer-settings-portal {
  display: contents !important;
}

body.game-board-page .game-viewer-settings-portal .engine-panel-settings-popover {
  position: fixed;
  z-index: 2000;
  max-width: calc(100vw - 20px);
  max-height: calc(100svh - 20px);
  overflow-x: hidden;
  overflow-y: auto;
}

@container (max-width: 340px) {
  body.game-board-page .analysis-header {
    gap: 3px;
    padding-inline: 6px;
  }

  body.game-board-page .engine-power {
    min-width: 74px;
    padding-inline: 8px;
  }

  body.game-board-page .analysis-title {
    min-width: 0;
  }

  body.game-board-page .viewer-panel-switcher {
    gap: 2px;
  }

  body.game-board-page .game-share-fen.viewer-panel-row {
    padding-inline: 7px;
  }

  body.game-board-page .game-share-fen textarea {
    font-size: 7.5px;
    letter-spacing: -0.18px;
  }
}

@container (max-width: 300px) {
  body.game-board-page .game-playlist-game > .entity-meta {
    display: none;
  }

}

@media (max-width: 900px) {
  body.game-board-page .history-column:has(.viewer-panel-switcher):not(:has(.analysis-panel.engine-active)) {
    --engine-panel-height: 44px;
  }

  body.game-board-page .game-rail-panel.viewer-panel-view,
  body.game-board-page .annotation-rail.viewer-panel-view {
    grid-row: 3;
  }
  body.game-board-page .game-rail-panel.source-pages-panel { grid-row: 3; }

  /* On phones the move navigation is the column's top row. The source pages
     replace it, so their page navigation takes that same row instead of
     leaving it empty and docking at the bottom (owner, 2026-10-01: "on
     mobile its supposed to be on top, not bottom"). The panel's box steps
     aside so its body and toolbar sit directly in the column grid. */
  body.game-board-page .history-column > .source-pages-panel:not([hidden]) { display: contents; }
  body.game-board-page .history-column > .source-pages-panel > .source-pages-body { grid-row: 3; }
  body.game-board-page .history-column > .source-pages-panel > .source-pages-navigation {
    grid-row: 1;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid rgba(var(--tint-rgb), 0.18);
    background: rgba(0, 0, 0, 0.46);
  }
  body.game-board-page .history-column > .source-pages-panel > .source-pages-navigation .btn-node {
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-width: 0 0 0 1px;
    background: rgba(var(--panel-rgb), 0.78);
    box-shadow: none;
  }
  body.game-board-page .history-column > .source-pages-panel > .source-pages-navigation .btn-node:first-child { border-left: 0; }
}

@media (max-width: 720px) {
  body.game-board-page .game-playlist-title,
  body.game-board-page .viewer-panel-footer,
  body.game-board-page .viewer-panel-row {
    padding-inline: 10px;
  }

  body.game-board-page .analysis-title {
    flex-basis: 78px;
  }

  body.game-board-page .engine-controls-priority {
    flex-basis: 150px;
  }

  body.game-board-page .analysis-panel:has(.viewer-panel-switcher) .engine-controls-priority {
    flex-basis: 32px;
  }
}

@media (max-width: 480px) {
  body.game-board-page .history-column:has(.viewer-panel-switcher):not(:has(.analysis-panel.engine-active)) {
    --engine-panel-height: 42px;
  }
}