/* ChessBay — dark, quiet, board-first. Depth over decoration. */
:root {
  color-scheme: dark;
  --bg: #14171c;
  --bg-glow: #1a1f27;
  --bg-raised: #1d2129;
  --bg-inset: #10131a;
  --line: #2a303b;
  --line-soft: #232833;
  --text: #d9dee6;
  --text-dim: #8b93a3;
  --accent: #d9a03f;          /* brass */
  --accent-soft: #d9a03f22;
  --accent-ink: #241a06;
  --good: #63ad63;
  --bad: #c96565;
  --link: #85b4e0;
  --radius: 12px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.55);
  --shadow-panel: 0 2px 6px rgba(0,0,0,.45), 0 18px 40px -18px rgba(0,0,0,.6);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* scrollbar-gutter is load-bearing, not cosmetic. The board is `width: 100%`
 * of a grid column, so its height follows the page width -- and without a
 * reserved gutter, the page width follows whether there's a scrollbar, which
 * follows the page height. Cross the threshold (toggling the engine panel does
 * it) and the board oscillates between two sizes forever: scrollbar appears,
 * column narrows, board shrinks, page fits, scrollbar goes, board grows. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  min-height: 100vh; display: flex; flex-direction: column;
  background:
    radial-gradient(1100px 420px at 50% -160px, var(--bg-glow) 0%, transparent 70%),
    var(--bg);
  color: var(--text);
  font: 16px/1.55 system-ui, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.55rem; letter-spacing: .01em; }
h2 { font-size: 1.15rem; margin-top: 2.2rem; letter-spacing: .01em; }
h3 { font-size: 1rem; }
main { width: 100%; max-width: 1080px; margin: 0 auto; padding: 1.1rem clamp(.75rem, 3vw, 2rem) 4rem; flex: 1; }
code { background: var(--bg-inset); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.skip-link {
  position: fixed; left: .75rem; top: -4rem; z-index: 100;
  background: var(--accent); color: var(--accent-ink); border-radius: 0 0 8px 8px;
  padding: .5rem .8rem; font-weight: 700;
}
.skip-link:focus { top: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}


/* header / footer */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem clamp(.75rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, #1e232c, #191d25);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 4px 18px -12px rgba(0,0,0,.7);
  position: sticky; top: 0; z-index: 50;
}
.brand { color: var(--text); font-weight: 700; letter-spacing: .02em; font-size: 1.12rem; }
.brand:hover { text-decoration: none; }
.brand-knight {
  color: var(--accent); display: inline-block; transform: translateY(1px);
  text-shadow: 0 0 18px rgba(217,160,63,.45);
}
.site-header nav { display: flex; gap: 1.1rem; }
.site-header nav a { color: var(--text-dim); font-size: .95rem; }
.site-header nav a:hover { color: var(--text); text-decoration: none; }
.site-header nav a.active { color: var(--accent); font-weight: 650; }
.admin-link { color: var(--accent) !important; }
.site-footer {
  border-top: 1px solid var(--line-soft); color: var(--text-dim);
  text-align: center; padding: 1.1rem; font-size: .85rem;
}

/* buttons & tags */
button, .button {
  background: linear-gradient(180deg, #232833, #1d222b);
  color: var(--text);
  border: 1px solid var(--line); border-radius: 9px;
  padding: .5rem .85rem; font-size: .92rem; cursor: pointer;
  display: inline-block;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.35);
  transition: border-color .12s ease, transform .05s ease, filter .12s ease;
}
button:hover, .button:hover { border-color: var(--text-dim); text-decoration: none; }
button:active, .button:active { transform: translateY(1px); }
button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: .48; transform: none; }
.primary {
  background: linear-gradient(180deg, #e5ad4c, #cf9636);
  border-color: #b8862f; color: var(--accent-ink); font-weight: 650;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 2px 8px -2px rgba(217,160,63,.5);
}
.primary:hover { filter: brightness(1.06); border-color: #b8862f; }
.danger { border-color: var(--bad); color: var(--bad); background: none; }
.button.small, button.small { padding: .2rem .55rem; font-size: .82rem; }
.tag {
  display: inline-block; padding: .12rem .6rem; border-radius: 99px;
  border: 1px solid var(--line); color: var(--text-dim); font-size: .82rem;
  background: var(--bg-raised);
}
.tag.active, .tag:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.tag.small { font-size: .72rem; padding: 0 .5rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 1.25rem; }
.count { color: var(--text-dim); font-weight: 400; font-size: .9em; }
.empty-note { color: var(--text-dim); font-style: italic; }
.error {
  background: #c9656522; border: 1px solid var(--bad); border-radius: 9px;
  padding: .55rem .85rem; margin: .6rem 0;
}

/* index */
.hero { margin: .4rem 0 1.2rem; }
.hero h1 { margin-bottom: .2rem; }
.hero-sub { color: var(--text-dim); max-width: 560px; margin: 0; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.game-card {
  display: block; overflow: hidden;
  background: linear-gradient(180deg, #1f242d, #1a1e26);
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); box-shadow: var(--shadow-card);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.game-card:hover {
  border-color: #4d5666; text-decoration: none; transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 16px 34px -14px rgba(0,0,0,.65);
}
.card-thumb { background: var(--bg-inset); border-bottom: 1px solid var(--line-soft); }
.card-thumb svg { display: block; width: 100%; height: auto; }
.card-body { padding: .8rem .95rem .9rem; }
.card-players { font-weight: 620; display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.card-players .vs { color: var(--text-dim); font-weight: 400; }
.card-result {
  margin-left: auto; color: var(--accent); font-weight: 700; font-size: .9em;
  background: var(--accent-soft); border-radius: 6px; padding: 0 .45rem;
}
.card-meta { color: var(--text-dim); font-size: .85rem; display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .25rem; }
.card-meta .opening { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.card-foot { margin-top: .55rem; display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.qcount { color: var(--accent); font-size: .82rem; margin-left: auto; }

/* game page header */
.game-head h1 { margin-bottom: .1rem; display: flex; flex-wrap: wrap; gap: .45rem; align-items: baseline; }
.game-head .vs { color: var(--text-dim); font-weight: 400; }
.elo { color: var(--text-dim); font-size: .8em; font-weight: 400; }
.result-badge {
  background: var(--accent-soft); color: var(--accent);
  border-radius: 6px; padding: 0 .5rem; font-size: .72em; align-self: center;
}
.game-meta { color: var(--text-dim); font-size: .9rem; display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }

/* layout: board column + content column; the board panel is sticky so it stays
   in view while the analysis/questions scroll (Lichess-study style) */
.game-layout { display: grid; grid-template-columns: minmax(0, 520px) minmax(280px, 1fr); gap: 1.5rem; margin-top: 1.2rem; }
.content-col { min-width: 0; }

/* board panel */
.board-sticky {
  background: linear-gradient(180deg, #1e232c, #181c24);
  border: 1px solid var(--line); border-radius: 16px;
  padding: .55rem .65rem .6rem; box-shadow: var(--shadow-panel);
  position: sticky; top: 4.2rem;
  /* Engine/preview panels live inside this panel so they stick with the
     board. If the whole stack outgrows the viewport, the panel becomes
     scrollable so everything remains accessible; the board never shrinks. */
  max-height: calc(100vh - 4.5rem);
  max-height: calc(100dvh - 4.5rem);
  overflow-y: auto;
  overflow-x: hidden;
  /* Same feedback loop as the one on `html`, one level down, and for the same
     reason: this panel scrolls, and the board inside it is `width: 100%`. Show
     a variation or an engine line and the panel grows; if that crosses the
     max-height, the scrollbar takes 15px, the board narrows by 15px, the board
     is square so the panel shrinks 15px -- back under the limit, scrollbar
     leaves, forever. Only bites when the content lands within a scrollbar's
     width of the threshold, which is why it looked like "certain variations".
     Reserving the gutter makes the board's width independent of the scrollbar,
     which is what kills it: no gutter, no loop. */
  scrollbar-gutter: stable;
}
.board-sticky > * { flex-shrink: 0; }
.board-sticky { scroll-margin-top: 4.2rem; }

.player-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .25rem; font-size: .95rem;
}
.pb-name { font-weight: 650; }
.pb-elo { color: var(--text-dim); font-size: .82rem; }
.pb-score { margin-left: auto; color: var(--accent); font-weight: 700; }
/* Captured material: the only imagery on the page, and it is information --
   what "+3" actually consists of, in the shapes you already read on the board.
   Sits between the name and the score so it never pushes either around. */
.captured {
  font-size: 1.02rem; line-height: 1; letter-spacing: -.12em;
  display: inline-flex; align-items: center; gap: .12rem; min-width: 0;
  overflow: hidden; white-space: nowrap;
}
.captured.c-white { color: #efece4; text-shadow: 0 1px 1px rgba(0,0,0,.55); }
.captured.c-black { color: #6d7686; }
.cap-lead {
  margin-left: .3rem; letter-spacing: 0; font-size: .74rem; font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.color-dot {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block;
  border: 1px solid #00000066; box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.dot-white { background: #e8e6e1; }
.dot-black { background: #23262b; border-color: #555c69; }
/* flip swaps the bars around the board; every panel child has an explicit
   order so the flip only ever touches the two player bars */
.board-sticky { display: flex; flex-direction: column; }
#player-top { order: 0; } .board-row { order: 1; } #player-bottom { order: 2; }
.board-status { order: 3; }
.board-controls { order: 4; }
.arrow-legend { order: 5; }
.board-settings { order: 6; }
.advice-chip { order: 7; }
#engine-panel { order: 8; }
.flipped #player-top { order: 2; }
.flipped #player-bottom { order: 0; }

/* current-move readout under the board */
.move-now {
  flex: 1; display: inline-flex; align-items: baseline; justify-content: center;
  gap: .45rem; min-height: 1.95rem; padding: .14rem .6rem; white-space: nowrap;
  background: var(--bg-inset); border: 1px solid var(--line-soft); border-radius: 8px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25);
  font-weight: 700; font-size: .95rem; line-height: 1.5;
}
#move-now-sub { color: var(--text-dim); font-weight: 500; font-size: .74rem; }
#move-now-nag:empty, #move-now-sub:empty { display: none; }
.move-now.explore, .move-now.preview {
  color: var(--accent); border-color: #b8862f66;
  background: linear-gradient(180deg, #2a2617, #221f13);
}

.board-row { display: flex; gap: .55rem; }
.board-wrap {
  flex: 1; min-width: 0; border-radius: 8px; overflow: hidden;
  box-shadow: 0 0 0 1px #00000055, 0 6px 18px -8px rgba(0,0,0,.7);
}
#board { width: 100%; touch-action: manipulation; }

/* eval bar */
.eval-bar {
  width: 15px; border-radius: 8px; overflow: hidden; position: relative;
  background: linear-gradient(180deg, #33383f, #2b2f37);
  display: flex; flex-direction: column-reverse;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.5);
}
.eval-white { background: linear-gradient(180deg, #f2f0eb, #ddd9d0); width: 100%; height: 50%; transition: height .3s ease; }
.eval-num {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-size: .62rem; font-weight: 700; white-space: nowrap;
  pointer-events: none; color: #ffffffbb; mix-blend-mode: difference;
}

/* Board controls: one row you use on every move, and a popover for the
   once-a-visit choices. Flip, the Lichess hand-off and the zoom slider used to
   sit in the same row as ▶, so the control pressed a hundred times a session
   competed for attention with three pressed once. */
.board-controls {
  display: flex; gap: .4rem; margin-top: .5rem; align-items: stretch;
}
.board-controls button, .board-controls .button {
  min-height: 2.5rem; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.transport { display: flex; gap: .3rem; flex: 1 1 auto; }
.transport button { min-width: 2.6rem; flex: 0 0 auto; }
.btn-wide { flex: 1 1 auto; }
#btn-replay { font-size: 1.05rem; }
.icon-btn { min-width: 2.6rem; flex: 0 0 auto; }

/* The engine button IS the engine readout for anyone who never opens the
   panel: state, score and depth, in the thing you already look at. */
.engine-btn {
  font-size: .88rem !important; gap: .4rem; flex: 0 0 auto; padding-inline: .7rem;
}
.engine-btn .eng-score {
  font-size: .8rem; font-weight: 700; border-radius: 5px; padding: .02rem .3rem;
  background: linear-gradient(180deg, #f2f0eb, #ddd9d0); color: #14171c;
}
.engine-btn .eng-score.black-better { background: linear-gradient(180deg, #2d3036, #23262b); color: #e8e6e1; }
.engine-btn .eng-depth { font-size: .7rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.engine-btn.on .eng-depth { color: #4c3b12; }
.engine-btn.on {
  background: linear-gradient(180deg, #e5ad4c, #cf9636);
  color: var(--accent-ink); border-color: #b8862f; font-weight: 700;
}

.board-settings {
  margin-top: .5rem; padding: .6rem .7rem; display: flex; flex-direction: column; gap: .55rem;
  background: var(--bg-inset); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.bs-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.bs-row button, .bs-row .button { min-height: 2.3rem; font-size: .84rem; }
.bs-check { display: flex; align-items: center; gap: .4rem; font-size: .86rem; flex-wrap: wrap; }
.bs-hint { color: var(--text-dim); font-size: .78rem; }
.lichess-link { font-size: .82rem !important; color: var(--text-dim); }
.board-hint { color: var(--text-dim); font-size: .84rem; margin: .55rem .2rem 0; }

/* The key to the arrow colours. Shown only with two or more arrows up: one
   arrow explains itself, and a legend that is always there stops being read. */
.arrow-legend {
  display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .45rem;
  font-size: .76rem; color: var(--text-dim);
}
.arrow-legend .leg { display: inline-flex; align-items: center; gap: .3rem; }
.arrow-legend .leg::before {
  content: ""; width: .9rem; height: 0; border-top: 3px solid currentColor;
  border-radius: 2px;
}
.leg-best { color: var(--good); }
.leg-bad { color: var(--bad); }
.leg-played { color: var(--link); }
.leg-plan { color: #d9a03f; }
.leg-context { color: var(--text-dim); }

/* Arrows, restyled off the vendor's primaries. Each colour means exactly one
   thing on this board, and the legend above names it. */
.cm-chessboard .arrow-success .arrow-head { fill: #57a85c; }
.cm-chessboard .arrow-success .arrow-line { stroke: #57a85c; opacity: .72; }
.cm-chessboard .arrow-danger .arrow-head { fill: #c25a5a; }
.cm-chessboard .arrow-danger .arrow-line { stroke: #c25a5a; opacity: .68; }
.cm-chessboard .arrow-info .arrow-head { fill: #6f9fd0; }
.cm-chessboard .arrow-info .arrow-line { stroke: #6f9fd0; opacity: .6; }
.cm-chessboard .arrow-warning .arrow-head { fill: #d9a03f; }
.cm-chessboard .arrow-warning .arrow-line { stroke: #d9a03f; opacity: .62; }
.cm-chessboard .arrow-secondary .arrow-head { fill: #7d8593; }
.cm-chessboard .arrow-secondary .arrow-line { stroke: #7d8593; opacity: .5; }

/* One status slot under the board instead of four stacked boxes. */
.board-status { margin-top: .5rem; display: flex; flex-direction: column; gap: .4rem; }
.status-note {
  padding: .4rem .6rem; border-radius: 9px; font-size: .86rem;
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--line); background: var(--bg-inset);
}
.status-tag {
  text-transform: uppercase; letter-spacing: .07em; font-size: .66rem; font-weight: 700;
  padding: .1rem .38rem; border-radius: 99px; background: var(--line); color: var(--text-dim);
  flex-shrink: 0;
}
.status-note .status-out { margin-left: auto; font-size: .78rem; min-height: 2rem; padding: .2rem .55rem; }
.status-step { min-height: 2rem; min-width: 2rem; padding: .1rem .4rem; font-size: .8rem; }

#explore-note { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
#explore-note .status-tag { background: var(--accent); color: var(--accent-ink); }
#explore-sans { font-weight: 650; }

.quiz-note { border-color: #6f9fd0; background: #6f9fd018; color: var(--text); }
.quiz-note .quiz-tag { background: #6f9fd0; color: #0e1620; }
.quiz-note.right { border-color: var(--good); background: #57a85c22; }

.engine-preview-note { border-color: #b8862f88; background: linear-gradient(180deg, #2a2617, #201d13); }
.engine-preview-note strong { color: var(--accent); font-size: .88rem; }
.engine-preview-san { display: flex; flex-wrap: wrap; gap: .25rem; font-size: .88rem; min-width: 0; }
.engine-preview-san span { padding: .08rem .28rem; border-radius: 5px; }
.engine-preview-san .current { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.engine-preview-san .upcoming { color: var(--text-dim); }
.engine-preview-note p, .engine-help { color: var(--text-dim); font-size: .78rem; margin: .4rem 0 0; }

#engine-panel {
  margin-top: .6rem; background: var(--bg-inset);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: .55rem .75rem; box-shadow: inset 0 2px 8px rgba(0,0,0,.25);
  /* the one child of .board-sticky allowed to give way when space runs out */
  display: flex; flex-direction: column; flex: 0 1 auto; min-height: 6.5rem;
}
#engine-panel .engine-head, #engine-panel .engine-help { flex-shrink: 0; }
.engine-status { color: var(--text-dim); font-size: .82rem; }
.engine-head { display: flex; gap: .6rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: .4rem; }
.engine-options { display: flex; gap: .4rem; flex-wrap: wrap; }
.engine-options label { color: var(--text-dim); font-size: .76rem; display: inline-flex; align-items: center; gap: .25rem; }
.engine-options select { background: var(--bg-raised); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: .16rem .3rem; font: inherit; }
.engine-lines {
  list-style: none; margin: 0; padding: 0; font-size: .9rem;
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
}
/* previous position's lines, kept greyed while the new search spins up --
   an emptied list would collapse the panel and jitter the layout each move */
.engine-lines.stale { opacity: .45; transition: opacity .15s ease; }
.engine-lines li { padding: 0; border-top: 1px solid var(--line-soft); }
.engine-lines li:first-child { border-top: 0; }
.engine-line {
  width: 100%; min-height: 2.75rem; padding: .32rem .25rem;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .55rem; align-items: center;
  border: 0; border-radius: 7px; background: transparent; box-shadow: none; text-align: left;
}
.engine-line:hover { border: 0; background: var(--accent-soft); }
.engine-line[aria-pressed="true"] { background: var(--accent-soft); box-shadow: 0 0 0 1px #b8862f88 inset; }
.engine-score {
  min-width: 3.4rem; text-align: center; border-radius: 6px; font-weight: 700; font-size: .82rem;
  background: linear-gradient(180deg, #f2f0eb, #ddd9d0); color: #14171c; padding: .05rem .3rem; flex-shrink: 0;
}
.engine-score.black-better { background: linear-gradient(180deg, #2d3036, #23262b); color: #e8e6e1; border: 1px solid #4a505c; }
.engine-pv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.engine-preview-cue { color: var(--accent); font-size: .72rem; font-weight: 650; }

/* moves & content column */
#sparkline-wrap svg {
  /* pan-y: vertical swipes still scroll the page; horizontal drags scrub */
  width: 100%; height: 64px; display: block; margin-bottom: .55rem;
  cursor: ew-resize; touch-action: pan-y;
  background: var(--bg-inset); border: 1px solid var(--line-soft); border-radius: 9px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.25);
}
.spark-mid { stroke: var(--line); stroke-width: .5; fill: none; }
.spark-line { stroke: var(--accent); stroke-width: 1.4; fill: none; vector-effect: non-scaling-stroke; }
.spark-cursor { stroke: #aeb6c4; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
/* Territory, not a wiggle: the same polygon twice, each half clipped to its
   own side of the midline, so "up" finally belongs to somebody. */
.spark-fill-white { fill: #e9e5dc; opacity: .17; clip-path: inset(0 0 50% 0); }
.spark-fill-black { fill: #0a0c10; opacity: .5; clip-path: inset(50% 0 0 0); }
.spark-dot { stroke: var(--bg-inset); stroke-width: .5; }
.spark-dot.g-blunder { fill: #c25a5a; }
.spark-dot.g-mistake { fill: #d98a3f; }
.spark-dot.g-dubious { fill: #d9c03f; }
.spark-key {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem;
  font-size: .74rem; color: var(--text-dim);
}
.spark-key .sk { display: inline-flex; align-items: center; gap: .3rem; }
.spark-key .sk-mid { flex: 1; text-align: center; text-transform: uppercase; letter-spacing: .08em; font-size: .66rem; }
.spark-hint { color: var(--text-dim); font-size: .76rem; margin: .35rem 0 0; }

/* Facts before furniture: the shortest true orientation, above the nav. */
.verdict {
  display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
  margin: 0 0 .7rem; padding: .5rem .7rem;
  background: var(--bg-inset); border: 1px solid var(--line-soft);
  border-radius: var(--radius); font-size: .86rem;
}
.verdict-who { display: inline-flex; align-items: center; gap: .35rem; font-weight: 650; }
.verdict-counts { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.verdict .vc { padding: .05rem .4rem; border-radius: 99px; font-size: .76rem; border: 1px solid currentColor; }
.verdict .g-blunder { color: #c25a5a; }
.verdict .g-mistake { color: #d98a3f; }
.verdict .g-dubious { color: #d9c03f; }
.verdict .g-clean { color: var(--good); }
.verdict-turn { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-dim); }
.verdict-swing { font-variant-numeric: tabular-nums; font-size: .8rem; }
.verdict-whose { color: var(--text-dim); }

/* Which brother's moments. The strip serves two reviews, so half of it is
   about the opponent unless somebody says otherwise. */
.moments-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.moments-head h3 { margin-bottom: .3rem; }
.moment-filter { display: flex; gap: .25rem; margin-left: auto; }
.moment-filter button {
  font-size: .76rem; padding: .12rem .5rem; min-height: 1.9rem; border-radius: 99px;
  display: inline-flex; align-items: center; gap: .3rem; color: var(--text-dim);
}
.moment-filter button[aria-pressed="true"] {
  color: var(--text); background: var(--accent-soft); border-color: #b8862f66;
}
.moment .color-dot { flex-shrink: 0; }
.moment-win.edge-white { color: #e9e5dc; }
.moment-win.edge-black { color: #97a1b3; }
.moment-win.edge-level { color: var(--text-dim); }

/* Board references carry the move's own verdict, so "and then 17.Rfe1" reads
   as the mistake it is without the reader going to look it up. */
.mv-ref.ref-g-blunder { color: #c25a5a; border-color: #c25a5a55; }
.mv-ref.ref-g-mistake { color: #d98a3f; border-color: #d98a3f55; }
.mv-ref.ref-g-dubious { color: #d9c03f; border-color: #d9c03f55; }

.rv-nits { color: #d98a3f; font-size: .78rem; }
.rv-lint { margin: .3rem 0 .5rem; padding-left: 1.1rem; color: #d98a3f; font-size: .82rem; }
.rv-lint li { margin: .2rem 0; }
.move-list {
  background: var(--bg-inset); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: .75rem .85rem; line-height: 2.05; max-height: 240px; overflow-y: auto;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.25);
}

/* sticky jump-links: the deep review lives well below the fold, so keep
   one-click access to every section while reading */
.section-nav {
  position: sticky; top: 3.8rem; z-index: 40;
  display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
  margin: 0 0 .8rem; padding: .4rem 0 .45rem;
  background: var(--bg); border-bottom: 1px solid var(--line-soft);
}
.section-nav a {
  color: var(--text-dim); font-size: .82em; font-weight: 600;
  padding: .16rem .62rem; border-radius: 99px; border: 1px solid transparent;
}
.section-nav a:hover { color: var(--text); border-color: var(--line); text-decoration: none; }
.section-nav a.active { color: var(--accent); background: var(--accent-soft); border-color: #b8862f44; }
#moves, #moments, #analysis, .review-thread, .game-questions { scroll-margin-top: 6.4rem; }
.mvno { color: var(--text-dim); font-size: .85em; margin-right: .1rem; }
.mv {
  background: none; border: 0; border-radius: 6px; padding: .1rem .34rem;
  color: var(--text); font-size: .95rem; cursor: pointer; font-family: inherit;
  box-shadow: none; min-height: 0;
}
.mv:hover { background: var(--accent-soft); border: 0; }
.mv.current {
  background: linear-gradient(180deg, #e5ad4c, #cf9636);
  color: var(--accent-ink); font-weight: 700;
}
.mv-comment { color: var(--text-dim); font-size: .85em; font-style: italic; margin: 0 .2rem; }
.mv-nag { color: var(--accent); }
.mv-nag.g-dubious { color: var(--accent); }
.mv-nag.g-mistake { color: #cf8a4b; }
.mv-nag.g-blunder { color: var(--bad); font-weight: 700; }

.moments { margin-top: 1.1rem; }
.moments h3 { margin-bottom: .3rem; color: var(--text-dim); text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; }
.moment {
  display: flex; gap: .6rem; align-items: baseline; width: 100%;
  text-align: left; margin-top: .45rem; padding: .55rem .7rem;
  border-radius: 10px;
}
.moment:hover { border-color: var(--accent); }
.moment-move { color: var(--accent); font-weight: 700; white-space: nowrap; }
.moment-label { flex: 1; font-size: .92rem; }
.moment-win { color: var(--text-dim); font-size: .8rem; white-space: nowrap; }

/* analysis prose */
.analysis { max-width: 680px; }
.analysis h2 { margin-top: 1.6rem; }
.prose { max-width: 760px; }
.analysis-body p, .md-body p { margin: .65rem 0; }
.mv-ref {
  background: var(--accent-soft); border: 0; border-radius: 6px;
  color: var(--accent); padding: 0 .32rem; cursor: pointer;
  font-family: inherit; font-size: inherit; font-weight: 620;
  box-shadow: none; min-height: 0; display: inline;
}
.mv-ref:hover { background: var(--accent); color: var(--accent-ink); border: 0; }

/* Variations: playable, but never mistakable for the game. The brass fill is
 * what "this happened" looks like, so a line that didn't happen gets none of
 * it -- an "if" tag, dim ink and a dashed underline instead. */
.var-line {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .22rem;
  padding: 0 .2rem; border-left: 2px dashed var(--line);
}
/* Move numbers hug the move they belong to: extra space opens BEFORE each
 * number so "6…Nxc4 7.Nxf5" groups by move, not by an even comb of gaps. */
.var-num { color: var(--text-dim); font-size: .82em; font-style: italic; margin-left: .34rem; }
.var-flag + .var-num { margin-left: 0; }
/* A single suggested move sits inside a sentence, so it drops the bracket and
 * leans on the dashed italic alone to say "not played". */
.var-line.var-solo { border-left: 0; padding: 0; }
.var-flag {
  color: var(--text-dim); font-size: .72em; font-style: italic;
  text-transform: lowercase; letter-spacing: .04em; padding-right: .1rem;
}
.var-move {
  background: none; border: 0; box-shadow: none; min-height: 0; display: inline;
  padding: 0 .12rem; cursor: pointer; font-family: inherit; font-size: inherit;
  color: var(--text-dim); font-weight: 560; font-style: italic;
  border-bottom: 1px dashed var(--line);
}
.var-move:hover { color: var(--accent); border-bottom-color: var(--accent); background: none; }
.engine-preview-note.is-variation { border-left: 2px dashed var(--line); }
.engine-preview-note.is-variation strong { color: var(--text-dim); }
.moment-note { display: flex; gap: .7rem; margin: .75rem 0; align-items: baseline; }
.moment-note-body { flex: 1; }
.moment-note-body p { margin: .2rem 0; }

/* questions */
.game-questions { margin-top: 2rem; }
.q-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.question-card {
  background: linear-gradient(180deg, #1f242d, #1a1e26);
  border: 1px solid var(--line);
  border-radius: var(--radius); padding: .85rem 1.05rem; margin-top: .85rem;
  box-shadow: var(--shadow-card);
}
.q-meta { display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap; font-size: .88rem; }
.q-game { font-size: .85rem; }
.q-game.general { color: var(--text-dim); }
.q-date { color: var(--text-dim); font-size: .8rem; }
.q-body { margin: .5rem 0; white-space: pre-wrap; }
.q-fen { display: block; margin: .3rem 0; font-size: .75rem; overflow-x: auto; }
.q-answer {
  border-left: 3px solid var(--accent); background: var(--bg-inset);
  padding: .6rem 1rem .7rem; border-radius: 0 10px 10px 0; margin-top: .6rem;
}
.answer-label {
  color: var(--accent); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: .1rem;
}
.status { font-size: .7rem; border-radius: 99px; padding: .05rem .55rem; text-transform: uppercase; letter-spacing: .06em; }
.status-new { background: var(--accent-soft); color: var(--accent); }
.status-answered { background: #63ad6322; color: var(--good); }
.status-hidden { background: #c9656522; color: var(--bad); }

/* ask form */
.ask-form {
  background: linear-gradient(180deg, #1f242d, #1a1e26);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.05rem; margin-top: .85rem; box-shadow: var(--shadow-card);
}
.ask-form label { display: block; margin-bottom: .75rem; color: var(--text-dim); font-size: .88rem; }
.ask-form input[type=text], .ask-form textarea, .admin-game-form input[type=text],
.admin-game-form textarea, .login-box input, .admin-q textarea {
  display: block; width: 100%; margin-top: .3rem;
  background: var(--bg-inset); color: var(--text);
  border: 1px solid var(--line); border-radius: 9px; padding: .55rem .7rem;
  font: inherit; box-shadow: inset 0 2px 6px rgba(0,0,0,.25);
}
.ask-form textarea:focus, .ask-form input:focus { outline: 1.5px solid var(--accent); }
.ask-actions { display: flex; gap: .5rem; margin-top: .55rem; flex-wrap: wrap; }
.ask-note { color: var(--text-dim); font-size: .8rem; margin-bottom: 0; }
.ask-anchor { color: var(--accent); font-size: .88rem; margin-bottom: .65rem; }
.ask-done {
  border: 1px solid var(--good); color: var(--good); border-radius: 10px;
  padding: .6rem .9rem; margin-top: .85rem; background: #63ad6315;
}
.ask-general { margin: 1rem 0; }
.hp-field { position: absolute; left: -9999px; top: -9999px; }

/* admin */
.admin-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; }
.admin-q textarea { margin: .5rem 0; }
.q-tools { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .45rem; }
.copy-hint { color: var(--text-dim); font-size: .8rem; }
.admin-games { border-collapse: collapse; width: 100%; margin-top: .6rem; }
.admin-games td { border-top: 1px solid var(--line-soft); padding: .5rem .55rem; font-size: .92rem; }
.opening-cell { color: var(--text-dim); font-size: .85rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-game-form label { display: block; margin-bottom: .8rem; color: var(--text-dim); font-size: .9rem; }
.admin-game-form details { margin-bottom: .8rem; }
.help { color: var(--text-dim); font-size: .82rem; }
.reanswer { flex: 1; }

/* login */
.login-box { max-width: 340px; margin: 3rem auto; }
.login-box label { display: block; margin: 1rem 0; color: var(--text-dim); }
.login-box button { width: 100%; margin-top: .4rem; }

/* misc */
details > summary { cursor: pointer; color: var(--text-dim); margin: .8rem 0 .4rem; }
.prose li { margin: .3rem 0; }

/* profile switcher (header) */
.profile-switch {
  display: flex; border: 1px solid var(--line); border-radius: 99px;
  background: var(--bg-inset); padding: 2px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.35);
}
.pswitch {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .7rem; border-radius: 99px;
  color: var(--text-dim); font-size: .88rem; line-height: 1.2;
}
.pswitch:hover { color: var(--text); text-decoration: none; }
.pswitch.active {
  background: linear-gradient(180deg, #e5ad4c, #cf9636);
  color: var(--accent-ink); font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 1px 6px -1px rgba(217,160,63,.6);
}
.pswitch-piece { font-size: 1.05em; transform: translateY(-1px); }

/* personalized hero + record */
.profile-hero { display: flex; gap: 1rem; align-items: center; }
.hero-medallion {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--accent);
  background: radial-gradient(circle at 35% 30%, #2a3040, #1b1f28 70%);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 6px 18px -8px rgba(0,0,0,.7),
              inset 0 1px 0 rgba(255,255,255,.06);
  text-shadow: 0 0 16px rgba(217,160,63,.5);
}
.rec-row { display: flex; gap: .4rem; align-items: baseline; margin-top: .45rem; }
.rec-chip {
  border-radius: 7px; padding: .02rem .5rem; font-weight: 700; font-size: .82rem;
  border: 1px solid var(--line); background: var(--bg-raised); color: var(--text-dim);
}
.rec-win  { color: var(--good); border-color: #63ad6355; background: #63ad6314; }
.rec-loss { color: var(--bad);  border-color: #c9656555; background: #c9656514; }
.rec-note { color: var(--text-dim); font-size: .78rem; }
.profile-notes {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, #1f242d, #1a1e26);
  padding: .15rem .95rem .35rem; margin: .9rem 0; box-shadow: var(--shadow-card);
}
.profile-notes > summary { color: var(--accent); font-weight: 650; margin: .5rem 0; }
.profile-notes-body { max-width: 680px; }
.tag-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 .25rem; }
.scope-tag { border-style: dashed; }

/* library cards: win/loss stripe from the viewer's side + review badge */
.game-card { border-left: 3px solid transparent; }
.game-card.outcome-win  { border-left-color: var(--good); }
.game-card.outcome-loss { border-left-color: var(--bad); }
.game-card.outcome-draw { border-left-color: var(--text-dim); }
.rcount { color: var(--accent); font-size: .78rem; font-weight: 650; }

/* featured player on the board */
.player-bar.featured .pb-name { color: var(--accent); }
.pb-badge {
  font-size: .72rem; color: var(--accent); background: var(--accent-soft);
  border-radius: 99px; padding: .02rem .5rem; font-weight: 650; white-space: nowrap;
}

/* board -> advice chip */
.advice-chip {
  order: 5; margin-top: .5rem; align-self: stretch;
  font-size: .85rem; padding: .35rem .7rem;
  color: var(--accent); border-color: #b8862f66;
  background: linear-gradient(180deg, #2a2617, #221f13);
}
.advice-chip:hover { border-color: var(--accent); }

/* prose refs lighting up with the board */
.mv-ref.at-ply {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 0 2px var(--accent-soft), 0 0 12px rgba(217,160,63,.4);
}
.mv.has-note { position: relative; }
.mv.has-note::after {
  content: ""; position: absolute; top: .35em; right: -1px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--link); opacity: .8;
}
@keyframes ref-flash {
  0% { background: var(--accent-soft); box-shadow: 0 0 0 6px var(--accent-soft); }
  100% { background: transparent; box-shadow: none; }
}
.ref-flash { animation: ref-flash 1.2s ease; border-radius: 8px; }

/* deep review thread */
.review-thread { margin-top: 2rem; }
.rt-head { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.rt-head h2 { margin: 0; }
.review-tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .8rem; border-bottom: 1px solid var(--line); }
.review-tab { border-radius: 8px 8px 0 0; border-bottom: 0; color: var(--text-dim); box-shadow: none; padding: .4rem .75rem; }
.review-tab[aria-selected="true"] { background: var(--bg-raised); color: var(--accent); border-color: var(--line); box-shadow: 0 -2px 0 var(--accent) inset; }
.rt-crown { color: var(--accent); text-shadow: 0 0 14px rgba(217,160,63,.45); }
.rt-chip {
  font-size: .74rem; border-radius: 99px; padding: .06rem .6rem;
  background: var(--accent-soft); color: var(--accent); font-weight: 650;
  display: inline-flex; align-items: center; gap: .3rem;
}
.rt-chip .color-dot { width: 9px; height: 9px; }
.rt-model { background: var(--bg-raised); color: var(--text-dim); border: 1px solid var(--line); }
.review-card {
  background: linear-gradient(180deg, #232837 0%, #1c212c 100%);
  border: 1px solid #3a4152; border-left: 3px solid #4d5666;
  border-radius: var(--radius); padding: .65rem 1.15rem .6rem; margin-top: .9rem;
  box-shadow: var(--shadow-panel);
}
/* Long pages: skip layout/paint for cards far off-screen. Keeps first render
   and the size slider cheap on review-heavy games; browsers lay the content
   out on demand when it scrolls (or is scrolled) into view. */
.review-card, .question-card { content-visibility: auto; contain-intrinsic-size: auto 380px; }
.review-card.for-active {
  border-left-color: var(--accent);
  box-shadow: var(--shadow-panel), 0 0 22px -12px rgba(217,160,63,.55);
}
.review-card.for-active .rt-chip:first-child {
  background: linear-gradient(180deg, #e5ad4c, #cf9636); color: var(--accent-ink);
}
.rt-hint { color: var(--text-dim); font-size: .78rem; }
.rc-head .q-date { margin-left: auto; }
.rc-head { display: flex; gap: .4rem; align-items: baseline; }
.review-card .review-body { max-width: 680px; }
.rc-foot { display: flex; justify-content: flex-end; }
.followup { margin: 1rem 0 0 1.1rem; padding-left: 1rem; border-left: 2px solid var(--line); }
.fu-q { color: var(--text); font-weight: 650; margin-bottom: .2rem; }
.fu-label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-dim); margin-right: .5rem; font-weight: 700;
}
.followup .review-body { color: var(--text); }
.review-pending {
  border: 1px dashed var(--accent); color: var(--accent); background: var(--accent-soft);
  border-radius: 10px; padding: .6rem .9rem;
}
.request-review { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .6rem; }
.rv-admin details { margin: .15rem 0 0; }
.rv-admin summary { font-size: .8rem; margin: .2rem 0; }
.rv-admin textarea, .rv-admin input[type=text] {
  display: block; width: 100%; margin: .35rem 0;
  background: var(--bg-inset); color: var(--text);
  border: 1px solid var(--line); border-radius: 9px; padding: .5rem .65rem; font: inherit;
}

/* coach workbench (admin) */
.workbench {
  margin-top: 1.1rem; border: 1px solid #b8862f55; border-radius: var(--radius);
  background: linear-gradient(180deg, #221f15, #1b1913);
  padding: .85rem 1rem 1rem; box-shadow: var(--shadow-card);
}
.wb-title { color: var(--accent); font-weight: 700; }
.wb-hint { color: var(--text-dim); font-weight: 400; font-size: .82rem; margin-left: .5rem; }
.wb-kind { display: flex; gap: 1.2rem; margin: .6rem 0 .2rem; color: var(--text-dim); font-size: .9rem; }
.wb-kind label { display: inline-flex; gap: .35rem; align-items: center; cursor: pointer; }
.wb-field { display: block; margin: .7rem 0; color: var(--text-dim); font-size: .88rem; }
.wb-field textarea, .wb-field select, .wb-model input {
  display: block; width: 100%; margin-top: .3rem;
  background: var(--bg-inset); color: var(--text);
  border: 1px solid var(--line); border-radius: 9px; padding: .5rem .7rem;
  font: inherit; box-shadow: inset 0 2px 6px rgba(0,0,0,.25);
}
.wb-steps { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .6rem 0; }
.wb-arrow { color: var(--text-dim); font-size: .85rem; }

/* Game-page zoom: board and reading text stay in step. ChessbayView (inline
   in game.html) maps any 100-200% value onto --board-width/--reader-scale/
   max-width and adds .view-stacked when the board stops leaving room for the
   reading column beside it.
   Feel: while the slider is being dragged (.view-dragging) values apply
   instantly, so the board tracks the pointer 1:1 -- easing a drag reads as
   lag. Discrete changes (keyboard steps, Reset) glide via the registered
   --board-width; --reader-scale is deliberately NOT transitioned because
   animating font-size lays out the whole reading column at a new glyph size
   every frame -- text snaps once, geometry glides under it. .view-animate
   arrives only after first paint so a restored size never animates on load.
   (Browsers without @property just change size instantly, as before.) */
@property --board-width { syntax: "<length>"; inherits: true; initial-value: 520px; }
@property --reader-scale { syntax: "<number>"; inherits: true; initial-value: 1; }
main.game-main { --board-width: 520px; --reader-scale: 1; max-width: 1140px; }
main.game-main.view-animate {
  transition: --board-width .18s ease-out, max-width .18s ease-out;
}
main.game-main.view-dragging { transition: none; }

.game-main .game-layout { grid-template-columns: minmax(0, var(--board-width)) minmax(280px, 1fr); }
.game-main.view-stacked .game-layout { grid-template-columns: minmax(0, var(--board-width)); }
.game-main.view-stacked .content-col { margin-top: 1.25rem; }
.game-main .content-col { font-size: calc(1rem * var(--reader-scale)); }
.game-main .content-col h2 { font-size: calc(1.15rem * var(--reader-scale)); }
.game-main .content-col h3 { font-size: calc(1rem * var(--reader-scale)); }
.game-main .game-head h1 { font-size: calc(1.55rem * var(--reader-scale)); }
.game-main .game-meta { font-size: calc(.9rem * var(--reader-scale)); }
.game-main .player-bar { font-size: calc(.95rem * var(--reader-scale)); }
.game-main .board-hint { font-size: calc(.84rem * var(--reader-scale)); }
.game-main .mv { font-size: .95em; }
.game-main .moment-label { font-size: .92em; }
.game-main .moment-win { font-size: .8em; }
.game-main .rt-chip { font-size: .74em; }
.game-main .q-date { font-size: .8em; }

.view-size { display: grid; grid-template-columns: auto minmax(9rem, 1fr) auto auto; align-items: center; gap: .45rem; width: 100%; color: var(--text-dim); font-size: .78rem; }
.view-size-label { white-space: nowrap; }
.view-size input { width: 100%; min-width: 0; accent-color: var(--accent); }
.view-size output { min-width: 3.1rem; text-align: center; color: var(--accent); font-variant-numeric: tabular-nums; }
.view-size button { min-height: 2rem; padding: .2rem .55rem; }

@media (max-width: 820px) {
  .game-main .game-layout { display: block; }
  .view-size { grid-template-columns: auto minmax(5rem, 1fr) auto auto; }
}
@media (max-width: 480px) {
  .game-main .player-bar { font-size: calc(.88rem * var(--reader-scale)); }
}
.wb-foot { display: flex; align-items: end; gap: .9rem; flex-wrap: wrap; }
.wb-model { color: var(--text-dim); font-size: .82rem; }
.wb-model input { width: 9rem; margin-top: .2rem; }
.wb-fallback { width: 100%; margin-top: .6rem; font-size: .8rem; }

/* mobile: board stays pinned while the analysis scrolls underneath.
   display:contents lifts .board-sticky into .game-layout's flow, so it can
   stick through the full height of the content column below it. */
@media (max-width: 820px) {
  .game-layout { display: block; }
  .board-col { display: contents; }
  .board-sticky { top: .5rem; z-index: 30; }
  .board-sticky { scroll-margin-top: .5rem; }
  .board-sticky { max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
  .content-col { margin-top: 1rem; }
  .move-list { max-height: 240px; }
  /* the board panel is the sticky element here; a sticky nav would hide
     behind it, so the jump links just flow at the top of the content */
  .section-nav { position: static; }
  #moves, #moments, #analysis, .review-thread, .game-questions {
    scroll-margin-top: min(calc(100vw + 11rem), 62vh);
    scroll-margin-top: min(calc(100vw + 11rem), 62dvh);
  }
  h1 { font-size: 1.25rem; }
  .site-header { position: relative; flex-wrap: wrap; gap: .4rem .8rem; }
  .site-header nav { gap: .8rem; }
  .site-header nav a { min-height: 2.5rem; display: inline-flex; align-items: center; }
  .pswitch-name { display: none; }
  .pswitch { padding: .3rem .6rem; }
  .pswitch-piece { font-size: 1.25em; }
  .hero-medallion { width: 48px; height: 48px; font-size: 1.5rem; }
  .advice-chip { font-size: .8rem; padding: .28rem .55rem; }
  .lichess-link { flex: 1 1 5rem; }
}
@media (max-width: 480px) {
  main { padding: .85rem .65rem 3rem; }
  .site-header {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    padding: .5rem .65rem .35rem; gap: .25rem .6rem;
  }
  .brand { align-self: center; }
  .site-header nav {
    grid-column: 1 / -1; grid-row: 2; justify-content: space-around;
    border-top: 1px solid var(--line-soft); padding-top: .12rem;
  }
  .profile-switch { grid-column: 2; grid-row: 1; }
  .pswitch.active .pswitch-name { display: inline; }
  .tag { padding: .22rem .62rem; }
  .tag.small { padding: .08rem .5rem; }
  .board-sticky { top: .35rem; padding: .4rem .45rem .45rem; }
  .player-bar { font-size: .88rem; padding: .2rem .2rem; }
  .board-controls { gap: .32rem; }
  .board-controls button, .board-controls .button { min-width: 2.35rem; min-height: 2.6rem; }
  .view-size { gap: .3rem; }
  .view-size-label { font-size: .72rem; }
  .engine-preview-cue { display: none; }
  .engine-line { grid-template-columns: auto minmax(0, 1fr); }
  .status-note { align-items: flex-start; }
  .status-note .status-out { margin-left: 0; }
  .moment { flex-wrap: wrap; }
  .moment-label { min-width: 60%; }
  .review-card { padding: .6rem .75rem; }
  .followup { margin-left: .35rem; padding-left: .7rem; }
  .q-head .primary, .request-review .primary { width: 100%; }
  .prose a { overflow-wrap: anywhere; }
}
@media (max-width: 820px) and (max-height: 650px) {
  .board-sticky { position: relative; top: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}