/* Board in white and brown, review panel on the right. */

:root {
  --light: #f2e0c6;          /* the white squares */
  --dark: #a97b52;           /* the brown ones */
  --highlight: #c9ad16;      /* the move just played */
  --highlight-strength: .62; /* how strongly it shows: stronger on paper, where it washed out */
  --select: #4f8a26;         /* the piece picked up */
  --dot: rgba(20, 40, 12, .5); /* the squares it can go to */
  --suggest: #6aa84f;        /* the move the engine wanted */
  --arrow-best: #7fb851;     /* the engine's arrow: green, bright enough on both square colours */
  --arrow-orange: #e8912b;   /* the arrows you draw yourself */
  --arrow-green: #5aa469;
  --arrow-blue: #4d8fd1;
  --arrow-red: #c8453f;
  /* Paper: the page as a book page, ink on cream, with the board's own browns for accents.
     The dark theme is below, under [data-theme="night"]. */
  --page: #f4ece0;           /* cream, a shade off the light squares */
  /* One logo file, two themes.
     The mark is a **negative-space** design: the knight and the B's bowl are both cream, and
     what separates them is the dark field behind. Cut the field away and drop it on a cream
     page and the knight merges into the bowl - the design simply stops working, and darkening
     it (which is what this used to do) does not help, because darkening keeps the two shapes
     the same colour as each other.
     Turning it over is what puts it right: the *relationship* carries the design, so dark
     shapes with a cream gap read exactly as cream shapes with a dark gap did. `invert(1)`
     alone would send the gold in ".LIVE" blue, which is what flipping a hue does, so
     `hue-rotate(180deg)` brings it back - and the two together land on a warm near-black mark
     with a dark bronze accent. Rendered against this page colour and looked at before it
     shipped, matrix and all. */
  --logo-ink: invert(1) hue-rotate(180deg);
  --panel: #fbf6ec;          /* the cards sit a little brighter than the page */
  --panel-2: #efe4d4;        /* the recessed bits: inputs, hovers */
  --line: #cbb797;           /* hairlines, the width of a printed rule */
  --text: #16100a;           /* ink, darker so it reads easily on the cream */
  --muted: #55483a;
  --sunk: #e4d7c3;           /* the empty half of a bar or meter */
  --board-tint: rgba(120, 86, 42, .045);   /* the squares behind the page, barely there */
  --press: #e6dac6;          /* a button being pressed */
  --on-accent: #12200b;      /* text on top of a coloured button */
  --coord: #000000a0;        /* the letters and numbers round the board */
  --shade: rgba(0, 0, 0, .12);
  --radius: 5px;             /* barely rounded: cards, not bubbles */
  --shadow: none;            /* edges are drawn with rules, not with blur */
  --ring: 0 0 0 2px rgba(124, 171, 82, .55);
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  /* The label colours, deep enough to read as text on the cream page */
  /* Violet for the brilliant move, black ink for the great one, green for best and good,
     blue for excellent, then amber into red as it goes wrong. Bright enough to pick out at a
     glance on cream. */
  --brilliant: #8e44c9;
  --great: #1b1a17;           /* the label only - see --accent for the blue furniture */
  --accent: #2f7fd4;
  --best: #3f9142;
  --excellent: #2f7fd4;
  --good: #6f9450;
  --book: #a07c3e;
  --inaccuracy: #d2a008;
  --mistake: #e07c1f;
  --miss: #dd5a25;
  --blunder: #cf3030;
}

/* Night: the same page after dark. The board keeps its own colours either way. */
[data-theme="night"] {
  --page: #171310;
  --logo-ink: none;          /* on a dark page the artwork is already the right way up */
  --panel: #1e1915;
  --panel-2: #262019;
  --line: #3a3128;
  --text: #ece3d6;
  --muted: #a3937f;
  --sunk: #2a231c;
  --board-tint: rgba(214, 178, 110, .028); /* lighter squares on a dark page, fainter still */
  --press: #332b22;
  --on-accent: #10200a;
  --coord: #00000066;
  --shade: rgba(0, 0, 0, .45);
  --highlight: #d7c14a;
  --highlight-strength: .45;
  --select: #6ea03f;
  --dot: rgba(20, 40, 12, .35);

  --brilliant: #c48cf0;
  --great: #0d0c0b;
  --accent: #62a9f0;
  --best: #63c266;
  --excellent: #62a9f0;
  --good: #93b874;
  --book: #b08b5e;
  --inaccuracy: #e6bd4b;
  --mistake: #e08a35;
  --miss: #e0663a;
  --blunder: #d1453f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--text);
  font: 15px/1.62 "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;   /* figures line up in columns, as in a results table */
}

/* Headings are set in a serif, the way a chess book sets them. `balance` keeps a heading from
   breaking with one word alone on the second line, and `pretty` does the same for the last line
   of a paragraph - the difference between a page that was set and one that was merely filled.
   Browsers that have never heard of either ignore them. */
h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 600; letter-spacing: 0; text-wrap: balance;
}
p, li { text-wrap: pretty; }

.shell { display: flex; align-items: flex-start; min-height: 100vh; }
/* How wide a page is allowed to get, in one place. Under it a page fills the window; over it
   the room left over is split evenly either side, so a wide monitor looks laid out rather than
   half used. Prose keeps its own measure in ch, because a 2,000-pixel line is unreadable
   however much room there is for it. */
/* The page fills the window. Only the lines of prose keep a measure of their own, because a
   paragraph 2,000 pixels wide cannot be read however much room there is for it. */
:root { --page-width: 100%; --measure: 84ch; }   /* not --page: that is the background colour */
/* One easing and two speeds for everything that moves, so nothing here moves in its own way:
   quick for something answering a finger, calm for something changing on its own. */
:root { --ease: cubic-bezier(.32, .72, .24, 1); --quick: .13s; --calm: .3s; }
/* A board is kept short enough to see all of without scrolling, so on a shallow window it is
   narrower than the column it sits in. The column is told the same thing, so the panel beside
   it takes the room the board did not want instead of a gap opening between them. */
:root { --board: max(74vh, 320px); --board-big: max(78vh, 320px); --board-small: max(64vh, 300px); }
.content {
  flex: 1; min-width: 0; padding: 0 28px 64px;
  max-width: var(--page-width); margin-inline: auto;
}

.sidenav {
  position: sticky; top: 0; align-self: stretch;
  flex: none; width: 200px; height: 100vh; overflow-y: auto;
  padding: 0 0 18px; background: var(--panel); border-right: 1px solid var(--line);
}
/* The artwork has no backdrop any more - the brown photograph behind it was cut away and what
   is left sits straight on the page, so there is no box inside a box to look odd. See
   `--logo-ink` below for how the same file reads on both themes. */
.brand { margin: 2px 0 14px; padding: 0 14px; }
.brand button { display: block; width: 100%; padding: 0; background: none; border: 0; }
.brand img { display: block; width: 100%; height: auto; filter: var(--logo-ink); }
.brand button:hover img { filter: var(--logo-ink) brightness(1.12); }
.sidenav { display: flex; flex-direction: column; }
.sidenav-list { display: flex; flex-direction: column; }
.sidenav-foot {
  margin-top: auto; padding: 14px 18px 0; display: flex; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--line);
}
.sidenav-foot a { color: var(--muted); font-size: 12px; text-decoration: none; }
.sidenav-foot a:hover { color: var(--text); text-decoration: underline; }
.sidenav button {
  background: none; border: 0; border-radius: 0; border-left: 3px solid transparent;
  color: var(--muted); text-align: left; padding: 9px 16px 9px 15px; font-size: 14px;
  width: 100%;
}
.sidenav button:hover:not(.active) { background: var(--panel-2); color: var(--text); }
.sidenav button.active {
  color: var(--text); font-weight: 600; border-left-color: var(--best); background: var(--panel-2);
}

/* Narrow windows and phones: the column lies down across the top again */
@media (max-width: 860px) {
  .shell { display: block; }
  .sidenav {
    position: static; width: auto; height: auto; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 0 0;
  }
  /* Lying down, the column is as wide as the screen, and a band that filled it would be a
     seventh of a phone before a word of the page. It goes back to a small mark with room
     around it, which on a band that is already full-width does not read as a pasted-in box. */
  /* Lying down, "bottom of the column" is just below the row of tabs, which is nowhere
     useful - so the two links go back to sitting in the page footer on a phone. */
  .sidenav-foot { display: none; }
  .site-foot .phone-only { display: block; }
  .brand { margin: 0 0 10px; padding: 12px 14px 0; }
  .brand button { width: auto; }
  .brand img { width: 176px; }
  .sidenav-list { flex-direction: row; overflow-x: auto; padding: 0 10px; }
  .sidenav button {
    width: auto; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent;
    padding: 8px 12px;
  }
  .sidenav button.active { border-left-color: transparent; border-bottom-color: var(--best); }
  .content { padding: 0 18px 48px; }
}

/* Room on the right so the line never runs under the light switch */
.topbar { padding: 24px 232px 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.topbar h1 { margin: 0; font-size: 24px; letter-spacing: .2px; }
.tagline { margin: 6px 0 0; color: var(--muted); max-width: var(--measure); }
.engine { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.engine.weak { color: var(--inaccuracy); }

.hidden { display: none !important; }

/* ---- the paste-your-game panel ---- */
.loader {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; max-width: min(1060px, 100%); box-shadow: var(--shadow);
}
.loader label { display: inline-block; margin: 0 8px 6px 0; color: var(--muted); }
textarea {
  width: 100%; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 12px;
  font: 14px/1.5 "Cascadia Mono", Consolas, monospace; resize: vertical;
}
.loader-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
select, button {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px; padding: 7px 13px; font-size: 14px;
  transition: background var(--quick) var(--ease), border-color var(--quick) var(--ease);
}
button { cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--muted); background: var(--press); }
button:active:not(:disabled) { background: var(--sunk); }
button:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--ring); }
button:disabled { opacity: .45; cursor: default; }
#review, #next, #drill-next, #vision-start, #play-start {
  background: var(--best); border-color: var(--best); color: #fbf7ef; font-weight: 600;
}
#review:hover:not(:disabled), #next:hover:not(:disabled),
#drill-next:hover:not(:disabled), #vision-start:hover:not(:disabled),
#play-start:hover:not(:disabled) { filter: brightness(1.08); }
.ghost { background: transparent; }
.status { min-height: 20px; margin: 12px 0 0; color: var(--inaccuracy); }

/* ---- layout: board left, review right ---- */
main {
  display: grid;
  grid-template-columns: minmax(320px, min(820px, var(--board))) minmax(340px, 1fr);
  gap: 24px; align-items: start; max-width: min(var(--page-width), 100%);
}
@media (max-width: 900px) { main { grid-template-columns: 1fr; } }

/* A grid, not a flex row: the board sets its own height from its 1:1 ratio (align-self:
   start stops it being stretched), and the eval bar then stretches to match it. */
.board-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }

.board {
  align-self: start;
  position: relative;                   /* the arrows are drawn over the squares */
  box-shadow: var(--shadow);
  display: grid;
  /* minmax(0, …) rather than a plain 1fr: the pieces are images with a natural size of their
     own, and a plain 1fr track refuses to go below it - which pushed the board off the side of
     a phone screen. The squares are told they may shrink as far as the board needs. */
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));   /* without this the rows size to the pieces */
  width: 100%;
  max-width: min(100%, 68vh);           /* keep the board on screen beside the review */
  aspect-ratio: 1 / 1;
  border: 3px solid #6f4b2d; border-radius: 6px; overflow: hidden;
  user-select: none;
  container-type: inline-size;          /* so the pieces can scale with the board */
  /* A finger dragging a piece should move the piece, not scroll the page behind it */
  touch-action: none;
}
.square {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
}
.square.light { background: var(--light); }
.square.dark  { background: var(--dark); }
.square.moved::after {
  content: ""; position: absolute; inset: 0; background: var(--highlight); opacity: var(--highlight-strength);
}
.board-arrows {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3;
}
.board-arrow {
  color: var(--arrow-best); opacity: .9;
  filter: drop-shadow(0 .02px .04px rgba(20, 14, 8, .55));
}
.board-arrow path { fill: none; stroke: currentColor; stroke-linejoin: round; stroke-linecap: butt; }
.board-arrow polygon { fill: currentColor; }
.board-arrow.orange { color: var(--arrow-orange); }
.board-arrow.green { color: var(--arrow-green); }
.board-arrow.blue { color: var(--arrow-blue); }
.board-arrow.red { color: var(--arrow-red); }

/* A square you coloured in yourself, with the right button */
.square.marked::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  box-shadow: inset 0 0 0 5px var(--arrow-orange); background: rgba(232, 145, 43, .22);
}
.square.marked[data-mark="green"]::before {
  box-shadow: inset 0 0 0 5px var(--arrow-green); background: rgba(90, 164, 105, .22);
}
.square.marked[data-mark="blue"]::before {
  box-shadow: inset 0 0 0 5px var(--arrow-blue); background: rgba(77, 143, 209, .22);
}
.square.marked[data-mark="red"]::before {
  box-shadow: inset 0 0 0 5px var(--arrow-red); background: rgba(200, 69, 63, .22);
}

/* The pieces are drawn pictures now, so they size with the square rather than with a font */
.piece {
  position: relative; z-index: 1; display: block;
  width: 100%; height: 100%; object-fit: contain;
  user-select: none; -webkit-user-drag: none;
}
.coord {
  position: absolute; font-size: 11px; color: var(--coord); z-index: 2;
  bottom: 1px; right: 3px; font-weight: 700;
}
.coord.rank { top: 1px; left: 3px; bottom: auto; right: auto; }

.evalbar {
  align-self: stretch;
  width: 18px; background: var(--sunk); border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line);
  display: flex; flex-direction: column-reverse;
}
.evalbar-white { background: #f7f1e4; height: 50%; transition: height .25s ease; }
[data-theme="night"] .evalbar-white { background: #f4ecdf; }

.player-strip {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 4px; color: var(--muted);
}
.player-strip strong { color: var(--text); }

.controls { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.controls button { min-width: 54px; }

/* ---- right-hand review panel ---- */
.info { display: flex; flex-direction: column; gap: 16px; }
.game-head h2 { margin: 0; font-size: 20px; }
.opening { margin: 4px 0 0; color: var(--muted); }
.game-select { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.current {
  background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--good);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
.current-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.badge {
  border-radius: 6px; padding: 3px 10px; font-weight: 700; font-size: 13px; color: #fbf7ef;
  background: var(--good);
}
.current-move { font-size: 17px; font-weight: 600; }
.current-eval { margin-left: auto; font-family: "Cascadia Mono", Consolas, monospace; color: var(--muted); }
.advice { margin: 10px 0 0; }
.better { margin: 8px 0 0; color: var(--suggest); }

.scoreboard { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.player-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px;
}
.player-card h3 { margin: 0 0 2px; font-size: 15px; }
.player-card .who { color: var(--muted); font-size: 13px; }
.accuracy { font-family: var(--display); font-size: 32px; font-weight: 600; margin: 10px 0 2px; }
.accuracy-word { color: var(--muted); font-size: 12px; letter-spacing: .04em; margin-bottom: 6px; }
.rating { color: var(--muted); font-size: 13px; }
.counts { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.counts div { display: flex; justify-content: space-between; gap: 10px; }
.counts .none { opacity: .45; }

/* The little round label icons that mark each move */
/* The mark against a move: a small chip, cut at one corner like a bookplate, rather than a
   coloured disc. The symbols inside are the ones chess writers have used for a century - !!, !,
   ?!, ?, ?? - and the rest are drawn as plain marks rather than ticks and stars. */
.icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 23px; height: 21px; flex: none;
  border-radius: 3px;
  clip-path: polygon(0 0, 100% 0, 100% 68%, 76% 100%, 0 100%);
  font-size: 12px; font-weight: 700; font-family: var(--display); color: #fbf7ef;
  letter-spacing: -.02em;
}
.icon.small { width: 18px; height: 16px; font-size: 11px; margin-right: 7px; }
.icon.on-board {
  position: absolute; top: -6px; right: -6px; z-index: 3;
  width: 25px; height: 23px; font-size: 13px;
  box-shadow: 0 1px 3px var(--shade); outline: 2px solid var(--panel);
}
.badge { display: inline-flex; align-items: center; gap: 7px; }
/* The great move's mark is black, which on a dark page needs an edge to be seen at all */
[data-theme="night"] .icon.for-great { box-shadow: inset 0 0 0 1px rgba(247, 241, 228, .5); }

.movelist {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  max-height: 340px; overflow-y: auto; padding: 6px; box-shadow: var(--shadow);
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.move-row { display: grid; grid-template-columns: 42px 1fr 1fr; gap: 4px; align-items: stretch; }
.move-no { color: var(--muted); padding: 5px 6px; font-size: 13px; }
.move {
  text-align: left; background: none; border: 0; border-radius: 6px; padding: 5px 8px;
  color: var(--text); font-size: 14px; display: flex; justify-content: space-between; gap: 8px;
}
.move:hover { background: var(--sunk); }
.move.current { background: var(--panel-2); font-weight: 700; box-shadow: inset 2px 0 0 var(--best); }
.move .mark { font-weight: 700; }
.move-score {
  font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}


/* ---- the board editor's analysis panel ---------------------------------------------------- */
/* No coach here, so the panel is a scoreboard: the score large enough to read across a desk,
   the handful of facts that change as you play, then the moves. */
.analysis {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 14px;
}
.analysis-score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.analysis-score strong {
  font-family: "Cascadia Mono", Consolas, monospace; font-size: 32px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.analysis-score span { color: var(--muted); font-size: 14px; }
.analysis-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 14px 0 0; }
.analysis-facts > div { min-width: 0; }
.analysis-facts dt {
  color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
}
.analysis-facts dd {
  margin: 2px 0 0; font-size: 15px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.analysis .status { margin-top: 12px; }
.analysis-heading {
  font-family: var(--display); font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 8px; font-weight: 600;
}
/* The panel is taller than the strip under a board was, so the list may use the room. */
#setup-playing .movelist { max-height: min(42vh, 460px); }

.fen-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.fen-row label {
  color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
}
.fen-row input {
  flex: 1 1 auto; min-width: 0; font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 12px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--sunk); color: var(--muted);
}

@media (max-width: 620px) {
  .analysis-facts { grid-template-columns: 1fr; }
  .analysis-score strong { font-size: 26px; }
}
.real-only {
  display: flex; align-items: baseline; gap: 7px; margin-top: 10px;
  font-size: 13px; color: var(--muted); cursor: pointer;
}
.real-only input { margin: 0; }

/* ---- training one motif, and how you do at each ------------------------------------------ */
.trainer { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.trainer-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 0 0 8px;
}
.trainer-head h3, h3.trainer-head {
  font-family: var(--display); font-size: 13px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin: 18px 0 8px; font-weight: 600;
}
.trainer > .trainer-head:first-child h3 { margin-top: 0; }
.theme-list { display: flex; flex-wrap: wrap; gap: 6px; }
.theme-pick {
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  border-radius: 999px; padding: 5px 11px; font-size: 13px; display: inline-flex;
  align-items: baseline; gap: 6px;
}
.theme-pick:hover { background: var(--panel-2); }
.theme-pick.on { background: var(--best); color: #fff; border-color: var(--best); }
.theme-pick .how-many { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.theme-pick.on .how-many { color: rgba(255, 255, 255, .8); }

.theme-record { display: flex; flex-direction: column; gap: 6px; }
.record-row { display: grid; grid-template-columns: 1fr 54px 44px; gap: 8px; align-items: center; }
.record-row .what { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-row .bar { height: 7px; border-radius: 4px; background: var(--sunk); overflow: hidden; }
.record-row .bar span { display: block; height: 100%; background: var(--best); }
.record-row .score {
  font-size: 12px; color: var(--muted); text-align: right;
  font-variant-numeric: tabular-nums;
}
.record-row.weak .bar span { background: var(--blunder); }
.record-row.thin { opacity: .55; }

/* ---- endings to play out ------------------------------------------------------------------ */
.drills { margin: 18px 0; }
.drills h3 {
  font-family: var(--display); font-size: 13px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin: 0 0 6px; font-weight: 600;
}
.drill-band { margin-top: 12px; }
.drill-band > h4 {
  margin: 0 0 6px; font-size: 12px; color: var(--muted); font-weight: 600;
}
.drill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.drill {
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  border-radius: var(--radius); padding: 7px 11px; font-size: 13px; text-align: left;
  display: inline-flex; align-items: baseline; gap: 8px;
}
.drill:hover { background: var(--panel-2); }
.drill .goal {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.drill.win .goal { color: var(--best); }
.drill.draw .goal { color: var(--accent); }

/* ---- the engine's top few moves ----------------------------------------------------------- */
.lines { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; }
.line-row {
  display: grid; grid-template-columns: 18px 1fr 56px; gap: 8px; align-items: baseline;
  background: none; border: 0; padding: 4px 6px; border-radius: 6px; color: var(--text);
  text-align: left; font-size: 13px;
}
.line-row:hover { background: var(--sunk); }
.line-row .rank { color: var(--muted); font-size: 11px; }
.line-row .san { font-weight: 600; }
.line-row .score {
  font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; color: var(--muted);
  text-align: right; font-variant-numeric: tabular-nums;
}
.line-row.best .score { color: var(--best); }

/* ---- what gets played here ---------------------------------------------------------------- */
.book { display: flex; flex-direction: column; gap: 3px; }
.book-row {
  display: grid; grid-template-columns: 52px 46px 1fr; gap: 8px; align-items: center;
  background: none; border: 0; padding: 4px 6px; border-radius: 6px; color: var(--text);
  text-align: left; font-size: 13px;
}
.book-row:hover { background: var(--sunk); }
.book-row .san { font-weight: 600; }
.book-row .share { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
/* One bar, three parts: how often White won, drew, and Black won with this move. */
.book-bar { display: flex; height: 13px; border-radius: 3px; overflow: hidden; }
.book-bar span { font-size: 9px; line-height: 13px; text-align: center; color: #3a3a3a; }
.book-bar .w { background: #efe7d7; }
.book-bar .d { background: #9b9387; color: #fff; }
.book-bar .b { background: #3b3732; color: #fff; }

/* ---- the evaluation graph --------------------------------------------------------------- */
/* White's share of the winning chances, move by move. Drawn as an area rather than a line
   because the thing worth seeing is which side is on top, not the exact number. */
.evalgraph { margin: 0 0 12px; }
.evalgraph svg {
  display: block; width: 100%; height: 70px; cursor: pointer;
  background: var(--sunk); border: 1px solid var(--line); border-radius: var(--radius);
}
.evalgraph .area { fill: var(--text); opacity: .82; }
.evalgraph .middle { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.evalgraph .at {
  stroke: var(--best); stroke-width: 2; vector-effect: non-scaling-stroke;
}
.evalgraph .slip { fill: var(--blunder); }
.evalgraph figcaption {
  color: var(--muted); font-size: 11px; margin-top: 4px; text-align: center;
}

/* ---- the promise at the sign-in box, and the footer ---------------------------------------- */
.signin-promise {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
.signin-promise p { margin: 0 0 8px; }
.signin-promise strong { color: var(--text); }
.signin-small { font-size: 12px; }

.site-foot {
  border-top: 1px solid var(--line); margin-top: 32px; padding: 18px 0 28px;
  text-align: center; color: var(--muted); font-size: 13px;
}
.site-foot p { margin: 0 0 6px; }
.phone-only { display: none; }
.site-foot-small { font-size: 12px; }

/* ---- the privacy and terms pages ----------------------------------------------------------- */
/* Their own small stylesheet inside the shared one: these are read, not used, so they get a
   reading measure and nothing else on the page to look at. */
.legal-page { background: var(--page); }
.legal {
  /* `display: block` on purpose: the app's own `main` is a two-column grid for a board and a
     panel, and these pages are a `main` too - without this the privacy policy came out in two
     columns with the headings in one and the text in the other. The same thing the
     Determine-your-rating page had to do. */
  display: block;
  max-width: 76ch; margin: 0 auto; padding: 32px 20px 64px;
  color: var(--text); text-wrap: pretty;
}
.legal h1 { font-family: var(--display); font-size: 32px; margin: 0 0 10px; }
.legal h2 {
  font-family: var(--display); font-size: 20px; margin: 32px 0 10px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.legal h3 { font-size: 15px; margin: 20px 0 6px; }
.legal p, .legal li { line-height: 1.65; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal-lead { font-size: 17px; color: var(--text); }
.legal-when { color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.legal-back, .legal-foot { font-size: 13px; }
.legal-foot { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); }
.legal-contact {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px;
}
.legal-table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 14px; }
.legal-table th, .legal-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line);
}
.legal-table th { color: var(--muted); font-weight: 600; font-size: 12px;
                  text-transform: uppercase; letter-spacing: .05em; }

/* ---- the About page ------------------------------------------------------------------------
   The legal pages' reading column, made a little warmer: it is the one page that is about a
   person rather than about the program. The portrait is an ellipse - a 4:5 frame with its
   corners rounded all the way - with a thin ring in the board's own brown, so it sits on the
   page the way a framed photograph would. */
.about { display: block; max-width: 78ch; margin: 0 auto; padding: 28px 20px 64px; color: var(--text); text-wrap: pretty; }
.about-hero {
  display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center;
  margin: 18px 0 8px; padding: 28px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.about-portrait { margin: 0; }
.about-portrait img {
  display: block; width: 210px; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: 50% 18%; border-radius: 50%;
  border: 4px solid var(--panel); box-shadow: 0 0 0 2px var(--dark), 0 10px 26px var(--shade);
}
.about-eyebrow {
  margin: 0 0 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.about h1 { font-family: var(--display); font-size: 40px; line-height: 1.1; margin: 0 0 12px; }
.about-lead { font-size: 17px; line-height: 1.6; margin: 0 0 14px; }
.about-sign { margin: 0; font-size: 13px; color: var(--muted); }
.about-section { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.about h2 { font-family: var(--display); font-size: 24px; margin: 0 0 12px; }
.about h3 { font-size: 15px; margin: 0 0 6px; }
.about p, .about li { line-height: 1.7; }
.about-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 6px; }
.about-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; transition: border-color var(--quick, .13s) ease;
}
.about-card:hover { border-color: var(--muted); }
.about-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.about-promises { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.about-promises li {
  padding: 12px 16px 12px 44px; position: relative; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.about-promises li::before {
  content: "\2713"; position: absolute; left: 16px; top: 12px; color: var(--best); font-weight: 700;
}
.about-interests { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 10px; }
.about-interest { padding: 16px 18px; border-left: 3px solid var(--dark); background: var(--panel); border-radius: 0 var(--radius) var(--radius) 0; }
.about-interest p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.about-interest-mark { display: block; font-size: 26px; line-height: 1; margin-bottom: 8px; color: var(--dark); }
.about-hello .legal-contact { display: inline-block; margin: 4px 0 10px; }
.about-closing { margin-bottom: 4px; }
.about-signature { font-family: var(--display); font-size: 24px; font-style: italic; margin: 0; }
@media (max-width: 640px) {
  .about-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 24px 18px; gap: 20px; }
  .about-portrait img { width: 170px; }
  .about h1 { font-size: 32px; }
}

/* ---- a chessboard behind everything -------------------------------------------------------
   Two diagonal gradients make the squares, which is the whole trick: no image to download, it
   scales to any screen, and both themes get it from the same four lines because the colour is
   a token. It is deliberately almost invisible - 64px squares at a few per cent - because a
   board you can actually see behind the text is a board that competes with the one you are
   meant to be looking at. */
body {
  background-color: var(--page);
  background-image:
    linear-gradient(45deg, var(--board-tint) 25%, transparent 25%, transparent 75%,
                    var(--board-tint) 75%),
    linear-gradient(45deg, var(--board-tint) 25%, transparent 25%, transparent 75%,
                    var(--board-tint) 75%);
  background-size: 128px 128px;
  background-position: 0 0, 64px 64px;
  background-attachment: fixed;      /* the board stays put while the page scrolls over it */
}
/* A machine asking for less motion is also, usually, asking for less going on. */
@media (prefers-reduced-motion: reduce) { body { background-attachment: scroll; } }

/* The sign-in card's logo. No bleed and no plaque now that there is no backdrop to hide:
   it is simply the artwork, sitting on the card. */
.signin-logo {
  display: block; width: 100%; max-width: 230px; height: auto; margin: 2px auto 22px;
  border: 0; filter: var(--logo-ink);
}

/* The same lockup at the head of the home page. The <h2> behind it stays in the markup as the
   page's real heading - a picture is not a heading - and is simply not drawn. */
.home-head .home-logo {
  display: block; width: 100%; max-width: 210px; height: auto; margin: 0 0 18px;
  filter: var(--logo-ink);
}
.home-head .home-logo + h2 { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

/* ---- where the game comes from: three tabs on one box ------------------------------------- */
.source-tabs {
  display: flex; gap: 2px; margin: -4px 0 16px; border-bottom: 1px solid var(--line);
}
.source-tab {
  background: none; border: 0; border-radius: 0; border-bottom: 2px solid transparent;
  color: var(--muted); padding: 7px 14px; font-size: 14px; margin-bottom: -1px;
}
.source-tab:hover:not(.active) { color: var(--text); }
.source-tab.active {
  color: var(--text); font-weight: 600; border-bottom-color: var(--best);
}
.source-panel { margin-bottom: 4px; }

.import-lead { margin: 0 0 12px; max-width: var(--measure); color: var(--muted); }
.import-lead strong { color: var(--text); }
#source-fetch input[type="text"] {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; min-width: 190px;
}
#source-fetch input:focus-visible { outline: none; box-shadow: var(--ring); }

/* One row per game, wide enough to read at a glance: what happened, then the detail under it,
   then the score on the right. A grid rather than flex so every row's score lines up however
   long the opponent's name is. */
/* Capped: the panel is as wide as the page, and a row stretched across it puts the score
   a thousand pixels from the name it belongs to. */
.import-list {
  display: flex; flex-direction: column; gap: 6px; margin-top: 12px;
  max-width: min(560px, 100%);
}
.import-game {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center;
  width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
}
.import-game:hover { border-color: var(--best); background: var(--panel); }
.import-game-main { grid-column: 1; font-size: 15px; }
.import-game-under { grid-column: 1; font-size: 13px; color: var(--muted); }
.import-game-result {
  grid-column: 2; grid-row: 1 / span 2; font-size: 13px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line);
}
.import-game-result.won { color: var(--best); border-color: var(--best); }
.import-game-result.lost { color: var(--blunder); border-color: var(--blunder); }
.import-game-result.drew { color: var(--muted); }

@media (max-width: 560px) {
  #source-fetch input[type="text"] { min-width: 0; width: 100%; }
}

/* The settings scene in the guide, showing the night theme without flipping the whole page
   under somebody who is reading it. The squares are deliberately left alone: the night theme
   changes the page around the board, not the board. */
.guide-figure.demo-night {
  background: #171310; border-color: #3a3128; color: #ece3d6;
  transition: background var(--calm) var(--ease), color var(--calm) var(--ease);
}
.guide-figure.demo-night figcaption,
.guide-figure.demo-night .demo-note,
.guide-figure.demo-night .demo-caption { color: #a3937f; }

/* The moves a game turned on. A grid rather than flex so the swing lines up down the right
   however long the player's name is. */
.key-moments { margin-bottom: 12px; }
.key-moments h3 { margin: 0 0 10px; font-size: 15px; }
.key-moment {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px;
  align-items: center; padding: 6px 0;
}
.key-moment + .key-moment { border-top: 1px solid var(--line); }
.key-moment-label {
  display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600;
}
.key-moment-what { font-size: 14px; color: var(--muted); min-width: 0; }
.key-moment-drop { font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) {
  .key-moment { grid-template-columns: auto minmax(0, 1fr); }
  .key-moment-drop { grid-column: 2; }
}

.coaching {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; box-shadow: var(--shadow);
}
.coaching summary { cursor: pointer; font-weight: 650; padding: 2px 0; }
.coaching summary::marker { color: var(--muted); }
.coaching[open] summary { margin-bottom: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }

.plan + .plan { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.plan-head { display: flex; align-items: baseline; gap: 10px; }
.plan-head strong { font-size: 15px; }
.plan-accuracy { margin-left: auto; color: var(--muted); font-size: 13px; }
.plan-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.plan-count {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px 3px 4px;
}
.plan-count.none { opacity: .45; }
.plan-headline {
  margin: 0 0 14px; padding: 11px 13px; border-radius: 10px; font-size: 14px;
  background: rgba(209, 69, 63, .12); border-left: 3px solid var(--blunder);
}
.plan-good h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
.plan-good ul { margin: 0 0 16px; padding-left: 18px; color: var(--text); }
.plan-good li { margin: 2px 0; }
.plan-none, .plan-also { color: var(--muted); font-size: 13px; }

.lesson {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 12px;
}
.lesson-title { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-size: 15px; }
.lesson-rank {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%; background: var(--best); color: #fbf7ef;
  font-size: 13px; font-weight: 700;
}
.lesson-seen {
  margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px;
}
.lesson-why { margin: 0 0 10px; color: var(--muted); }
.lesson-example {
  display: flex; gap: 8px; align-items: baseline; padding: 7px 0;
  border-top: 1px solid var(--line); font-size: 14px;
}
.lesson-example-text { flex: 1; }
.lesson-practice {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 9px;
  background: rgba(124, 171, 82, .1); border-left: 3px solid var(--best); font-size: 14px;
}
.lesson-practice-label {
  display: block; font-size: 11px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--best); font-weight: 700; margin-bottom: 3px;
}

/* ---- playing your own moves during a review ---- */
/* Sized to fit the window's height, but never so small it cannot be played on */
.board-wrap { position: relative; align-self: start; width: 100%; max-width: min(100%, max(68vh, 320px)); }
.board-wrap .board { max-width: 100%; }
.square { cursor: pointer; }
.square.selected::before {
  content: ""; position: absolute; inset: 0; background: var(--select); opacity: .55; z-index: 0;
}
/* A dot on an empty square you can move to, a ring on a piece you can take */
.square.target::before {
  content: ""; position: absolute; z-index: 2; left: 50%; top: 50%;
  width: 28%; height: 28%; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--dot);
}
.square.target.occupied::before {
  width: 88%; height: 88%; background: transparent;
  border: 5px solid var(--dot); box-sizing: border-box;
}
.piece.dragging { opacity: .25; }
.ghost-piece {
  position: fixed; z-index: 50; pointer-events: none; line-height: 1;
  transform: translate(-50%, -55%);
}
.promotion-choice {
  width: 72px; height: 72px; padding: 6px; background: var(--light); color: #262017;
  display: flex; align-items: center; justify-content: center;
}
.promotion {
  position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  gap: 10px; background: rgba(15, 11, 8, .72);
}
.promotion button { width: 72px; height: 72px; padding: 6px; background: var(--light); }
.controls-return { margin-top: 8px; }
.controls-return button { flex: 1; }
#return:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #0d1826; font-weight: 600; }
.board-hint { max-width: var(--measure); }
.board-hint { color: var(--muted); font-size: 13px; margin: 8px 0 0; }

.variation {
  background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
}
.variation-head { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); }
.variation-head strong { color: var(--text); }
.variation-moves { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.variation-moves button {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px 8px; font-size: 14px;
  background: var(--panel-2);
}
.variation-moves button.current { background: var(--sunk); font-weight: 700; }
.variation-next { margin: 10px 0 0; color: var(--suggest); }
.thinking { color: var(--muted); font-style: italic; }

/* ---- page tabs ---- */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 18px; }   /* unused now */
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--muted); padding: 8px 14px 9px; font-size: 14px;
}
.tabs button:hover:not(.active) { background: none; color: var(--text); border-bottom-color: var(--line); }
.tabs button.active { color: var(--text); border-bottom-color: var(--best); font-weight: 600; }

/* ---- puzzles ---- */
.puzzle-layout {
  display: grid;
  grid-template-columns: minmax(320px, min(800px, var(--board-big))) minmax(320px, 1fr);
  gap: 24px; align-items: start; max-width: min(var(--page-width), 100%); margin-top: 8px;
}
@media (max-width: 900px) { .puzzle-layout { grid-template-columns: 1fr; } }
.puzzle-board-wrap { max-width: min(100%, max(72vh, 320px)); }
.square.hinted::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  box-shadow: inset 0 0 0 5px var(--inaccuracy); background: rgba(230, 189, 75, .25);
}
.puzzle-score {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px;
}
.puzzle-score-label { color: var(--muted); font-size: 13px; }
.puzzle-target { grid-column: 1 / -1; order: 99; color: var(--muted); font-size: 13px; }
.puzzle-score-value { font-family: var(--display); font-size: 32px; font-weight: 600; }
.puzzle-score-small { font-size: 20px; font-weight: 600; margin-top: 6px; }
.rating-change { font-size: 15px; font-weight: 700; }
.rating-change.up { color: var(--best); }
.rating-change.down { color: var(--blunder); }

/* ---- playing with a coach ---- */
.play-setup h2 { margin: 0 0 4px; font-size: 20px; }
.coach-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow);
}
.coach-card h3 { margin: 0; font-size: 13px; color: var(--muted); letter-spacing: .6px; text-transform: uppercase; }
.coach-card .current { background: var(--panel-2); }
.tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tip { border-radius: 8px; padding: 9px 12px; background: var(--panel-2); border-left: 4px solid var(--good); }
.tip.warning { border-left-color: var(--blunder); }
.tip.chance { border-left-color: var(--accent); }
.tip.advice { border-left-color: var(--book); }
.tip.bot { border-left-color: var(--muted); color: var(--muted); }
#play-moves .move { display: flex; align-items: center; gap: 2px; cursor: default; }

/* A move inside the advice: press it to see that position on the board */
.move-link {
  flex: none; font: inherit; font-weight: 650; font-size: 13px; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 7px;
  padding: 2px 9px; margin: 0; cursor: pointer; white-space: nowrap;
}
.move-link:hover:not(:disabled) { border-color: var(--best); color: var(--best); background: var(--panel-2); }
.move-link:disabled { opacity: .6; cursor: default; }

.danger { color: var(--muted); }
.danger:hover:not(:disabled) { border-color: var(--blunder); color: var(--text); }
.danger.armed { background: var(--blunder); border-color: var(--blunder); color: #fbf7ef; font-weight: 600; }

/* ---- insights ---- */
.insights-layout { max-width: min(var(--page-width), 100%); margin-top: 8px; display: flex; flex-direction: column; gap: 16px; }
.insights-head h2 { margin: 0; font-size: 20px; }
.insights-head .tagline { max-width: 70ch; }

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.figure {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px;
}
.figure-value { font-family: var(--display); font-size: 32px; font-weight: 600; }
.figure-label {
  color: var(--muted); font-size: 11px; margin-top: 4px;
  letter-spacing: .09em; text-transform: uppercase;
}
.figure-note { color: var(--muted); font-size: 12px; margin-top: 6px; }

.insight-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.insight-card h3 { margin: 0 0 4px; font-size: 15px; }
.insight-note { margin: 0 0 12px; color: var(--muted); font-size: 13px; }

.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
.grid th {
  text-align: left; color: var(--muted); font-weight: 600; font-size: 12px;
  letter-spacing: .5px; text-transform: uppercase; padding: 0 10px 6px 0;
}
.grid td { padding: 6px 10px 6px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.grid td:last-child { width: 34%; }

.bar-rail { background: var(--sunk); border-radius: 999px; height: 8px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--best); border-radius: 999px; }
.bar-fill.bad { background: var(--mistake); }

.trend { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 6px; }
.trend-column { flex: 1; min-width: 4px; border-radius: 3px 3px 0 0; background: var(--muted); }
.trend-column.win { background: var(--best); }
.trend-column.loss { background: var(--blunder); }
.trend-column.draw { background: var(--book); }

.play-from {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px;
  padding: 10px 12px; border-radius: 10px; font-size: 14px;
  background: rgba(76, 147, 216, .12); border-left: 3px solid var(--accent);
}
#play-on { background: var(--panel-2); }

#play-fen {
  flex: 1; min-width: 260px; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px;
  font: 13px/1.5 "Cascadia Mono", Consolas, monospace;
}
#play-on { background: var(--panel-2); border-color: var(--line); }

/* ---- vision ---- */
.vision-layout {
  display: grid;
  grid-template-columns: minmax(300px, min(560px, var(--board-small))) minmax(300px, 1fr);
  gap: 24px; align-items: start; max-width: min(var(--page-width), 100%); margin-top: 8px;
}
@media (max-width: 900px) { .vision-layout { grid-template-columns: 1fr; } }
.vision-board-wrap { max-width: min(100%, max(60vh, 300px)); }
.vision-board-wrap .square { cursor: pointer; }
.vision-head h2 { margin: 0; font-size: 20px; }

.vision-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow); margin-bottom: 16px;
}
.vision-prompt {
  font-size: 40px; font-weight: 700; letter-spacing: 1px; text-align: center;
  font-family: "Cascadia Mono", Consolas, monospace; color: var(--best);
}
.vision-ask { margin: 2px 0 14px; text-align: center; color: var(--muted); }
.vision-score { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.vision-score > div { display: flex; flex-direction: column; gap: 2px; }
.vision-value { font-family: var(--display); font-size: 24px; font-weight: 600; }
.vision-value.good { color: var(--best); }
.vision-value.bad { color: var(--blunder); }
.vision-label { font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.vision-message { margin: 12px 0 0; text-align: center; color: var(--inaccuracy); min-height: 20px; }
.vision-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }

/* How far along a review is: a bar rather than a sentence that sits there */
.progress { margin: 10px 0 0; }
.progress-bar {
  height: 6px; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--muted) 25%, transparent);
}
.progress-bar span {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: var(--arrow-best); transition: width var(--calm) var(--ease);
}
.progress-text { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

.scoreboard-note { grid-column: 1 / -1; margin: 2px 0 0; }

/* The tray of pieces to lay a position out with */
.tray { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.tray-row { display: flex; align-items: center; gap: 6px; }
.tray-label { width: 62px; font-size: 12px; color: var(--muted); }
/* Each piece sits on a square the colour of a board square, in both themes. A black piece drawn
   straight onto the night theme's panel is very nearly invisible, and the tray is the one place
   you have to pick a piece out before you can use it. */
.tray-piece {
  width: 38px; height: 38px; padding: 3px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--light); border-color: rgba(43, 28, 15, .35);
}
.tray-piece .piece { width: 100%; height: 100%; }
.tray-piece:hover:not(:disabled) { background: #fbf0dd; }
.tray-piece.w { color: #fffdf8; text-shadow: 0 0 2px #2b1c0f, 1px 1px 0 #2b1c0f, -1px -1px 0 #2b1c0f; }
.tray-piece.b { color: #262017; }
.tray-piece.rubber { font-size: 20px; color: #6b5a44; background: var(--panel-2); }
.tray-piece.held { border-color: var(--arrow-best); box-shadow: 0 0 0 2px var(--arrow-best); }
.status.wrong { color: var(--blunder); }

/* The ladder: the level you have climbed to, and how far up the next one */
.level-band { margin: 0 0 12px; }
.level-head { display: flex; align-items: baseline; gap: 8px; }
.level-number { font-family: var(--display); font-size: 20px; font-weight: 600; }
.level-title { color: var(--muted); font-size: 13px; }
.level-bar {
  height: 8px; margin-top: 6px; border-radius: 4px; overflow: hidden;
  background: color-mix(in srgb, var(--muted) 25%, transparent);
}
.level-bar span {
  display: block; height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--best), var(--arrow-best));
  transition: width var(--calm) var(--ease);
}
.level-note { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.level-band.levelled .level-number { animation: level-up .9s ease-out; }
@keyframes level-up {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); color: var(--brilliant); }
  100% { transform: scale(1); }
}

/* A run on three lives */
.run-band {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.run-head { display: flex; align-items: center; gap: 10px; }
.run-name { font-family: var(--display); font-size: 14px; font-weight: 600; }
.run-score { margin-left: auto; }
.run-lives { font-size: 17px; letter-spacing: 2px; }
.run-score { font-family: var(--display); font-size: 24px; font-weight: 600; }
.run-note { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.run-band.over { border-color: var(--blunder); }

/* The guide, and the notes you leave about it */
.help-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 22px; }
.help-guide { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.help-part { padding: 14px 0; border-top: 1px solid var(--line); }
.help-part:first-of-type { border-top: 0; }
.help-part h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.help-part p { margin: 0 0 8px; line-height: 1.55; }
.read-aloud { margin-left: auto; font-size: 11px; padding: 3px 8px; }
.help-feedback textarea { width: 100%; margin-top: 8px; }
.stars { display: flex; align-items: center; gap: 4px; margin: 6px 0 2px; }
.star {
  background: none; border: 0; padding: 0 2px; font-size: 24px; line-height: 1;
  color: var(--muted); cursor: pointer;
}
.star.lit { color: var(--inaccuracy); }
.star-note { margin-left: 8px; font-size: 12px; color: var(--muted); }
.feedback-note { padding: 9px 0; border-top: 1px solid var(--line); }
.feedback-note p { margin: 4px 0 0; font-size: 13px; }
.feedback-head { display: flex; align-items: baseline; gap: 8px; }
.feedback-stars { color: var(--inaccuracy); font-size: 13px; letter-spacing: 1px; }
.feedback-when { font-size: 11px; color: var(--muted); }
@media (max-width: 900px) { .help-layout { grid-template-columns: 1fr; } }

/* How your game sits against players of the same strength */
.plan-level { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--panel-2); }
.plan-level h4 { margin: 0 0 6px; font-size: 13px; }
.plan-level ul { margin: 0; padding-left: 18px; }
.plan-level li { margin: 3px 0; font-size: 13px; line-height: 1.5; }
.plan-level li.worse { color: var(--text); }
.plan-level li.better { color: var(--muted); }

.voice-holder { display: inline-flex; }
.voice-button { font-size: 12px; }
.voice-button.muted { color: var(--muted); opacity: .8; }

.vision-choices { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.vision-row { display: flex; gap: 6px; }
.vision-key {
  flex: 1; padding: 10px 0; font-size: 15px; font-weight: 600;
  font-family: "Cascadia Mono", Consolas, monospace;
}
.vision-key.picked { background: var(--best); border-color: var(--best); color: #fbf7ef; }

/* ---- your own mistakes ---- */
.drill-layout {
  display: grid;
  grid-template-columns: minmax(300px, min(600px, var(--board))) minmax(300px, 1fr);
  gap: 24px; align-items: start; max-width: min(var(--page-width), 100%); margin-top: 8px;
}
@media (max-width: 900px) { .drill-layout { grid-template-columns: 1fr; } }
.drill-head h2 { margin: 0; font-size: 20px; }
.drill-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow); margin-bottom: 16px;
}
.drill-card h3 { margin: 0 0 6px; font-size: 15px; }
.drill-message { margin: 0 0 12px; color: var(--muted); }
.drill-message.right { color: var(--best); }
.drill-message.wrong { color: var(--miss); }
.drill-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.drill-stats > div { display: flex; flex-direction: column; gap: 2px; }
.drill-value { font-family: var(--display); font-size: 24px; font-weight: 600; }
.drill-label { font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }

/* ---- the finishing pass ---------------------------------------------------------------------
   Rules instead of shadows, a serif for anything that reads as a heading or a figure, and small
   caps for the labels under them. The board keeps its own colours; everything round it is paper
   and ink. */
.loader, .current, .movelist, .coaching, .variation, .insight-card, .vision-card, .drill-card,
.coach-card, .player-card, .figure, .puzzle-score {
  box-shadow: none;
}
.game-head h2, .insights-head h2, .vision-head h2, .drill-head h2, .play-setup h2 {
  font-size: 20px; letter-spacing: .2px;
}
.opening { font-style: italic; }
.current-move { font-family: var(--display); font-size: 17px; font-weight: 600; }
.badge { border-radius: 3px; font-family: "Segoe UI", system-ui, sans-serif; }
.lesson-title, .insight-card h3, .coach-card h3, .drill-card h3 { font-family: var(--display); }
.coach-card h3 { letter-spacing: .09em; }
.move { font-family: "Cascadia Mono", Consolas, ui-monospace, monospace; font-size: 13px; }
.move-no { font-family: "Cascadia Mono", Consolas, ui-monospace, monospace; }
.grid th { letter-spacing: .09em; }
.figures { gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); }
.figures .figure { border: 0; border-radius: 0; }

/* ---- the light switch ---- */
.topbar { position: relative; }
/* The pair sits in the corner together, and the buttons are in the flow inside it, so neither
   has to know how wide the other happens to be - "Sound on" and "Sound off" are not the same
   width, and neither is the theme switch in its two states. */
.topbar-switches { position: absolute; top: 20px; right: 0; display: flex; gap: 8px; }
#theme, .topbar-switches .sound-button {
  background: none; border: 1px solid var(--line); color: var(--muted);
  padding: 5px 12px; font-size: 13px; white-space: nowrap;
}
#theme:hover, .topbar-switches .sound-button:hover { color: var(--text); background: var(--panel); }

/* ---- courses ---- */
.learn-layout { max-width: min(var(--page-width), 100%); margin-top: 8px; display: flex; flex-direction: column; gap: 16px; }
.learn-head h2 { margin: 0; font-size: 20px; }
.learn-head .tagline { max-width: 70ch; }

.course {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 14px;
}
.course h3 { margin: 0 0 2px; font-size: 17px; }
.course-summary { margin: 0 0 12px; color: var(--muted); font-size: 14px; }

.lesson-row {
  display: grid; grid-template-columns: minmax(150px, 14rem) 1fr auto; gap: 14px;
  align-items: baseline; width: 100%; text-align: left;
  background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  padding: 11px 4px;
}
.lesson-row:hover { background: var(--panel-2); border-color: var(--line); }
.lesson-name { font-family: var(--display); font-size: 15px; font-weight: 600; }
.lesson-about { color: var(--muted); font-size: 13px; }
.lesson-mark {
  color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.lesson-row.done .lesson-mark { color: var(--best); }

.lesson-layout {
  display: grid;
  grid-template-columns: minmax(300px, min(600px, var(--board))) minmax(300px, 1fr);
  gap: 24px; align-items: start; max-width: min(var(--page-width), 100%); margin-top: 8px;
}
@media (max-width: 900px) { .lesson-layout { grid-template-columns: 1fr; } }
.lesson-head h2 { margin: 0; font-size: 20px; }
.lesson-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px;
}
.learn-note { margin: 0 0 14px; min-height: 3em; }
.learn-note.right { color: var(--best); }
.learn-note.wrong { color: var(--miss); }
.learn-line { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 12px; }
.learn-move { font-family: "Cascadia Mono", Consolas, monospace; font-size: 13px; color: var(--muted); }

.board.no-coords .coord { display: none; }

/* ---- Motion: moves slide, pages and notes ease in, nothing jumps ---- */
.piece.captured { position: absolute; z-index: 1; pointer-events: none; }
.board-arrow.next { color: var(--arrow-best); opacity: .95; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes note-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
[id$="-page"]:not(.hidden), #learn-lesson:not(.hidden), #learn-list:not(.hidden) {
  animation: page-in .28s ease-out;
}
.learn-note, .learn-next { animation: note-in .3s ease-out; }
/* The verdict under the board changes as you step; it fades in rather than switching under you */
.advice { animation: note-in .25s ease-out; }
.move.current { transition: background var(--quick) var(--ease), box-shadow var(--quick) var(--ease); }
.square::before, .square::after { transition: opacity .15s ease; }
.tabs button { transition: color var(--quick) var(--ease), border-color var(--quick) var(--ease), background var(--quick) var(--ease); }
.lesson-row, .course { transition: border-color var(--quick) var(--ease), background var(--quick) var(--ease); }
.lesson-row:hover { transform: translateX(2px); }
.evalbar-white { transition: height .4s cubic-bezier(.25, .8, .35, 1); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- The lesson: what to play next, and the voice ---- */
.learn-next {
  margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--arrow-best);
  background: var(--panel-2); border-radius: 4px;
}
.learn-next:empty { display: none; }
.learn-next strong { font-family: "Cascadia Mono", Consolas, monospace; }
.lesson-options { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.lesson-options label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* A variation, set in under the main line it branches from */
.lesson-row.variation { margin-left: 26px; width: calc(100% - 26px); border-left: 3px solid var(--line); }
.lesson-row.variation .lesson-name::before { content: "\21B3  "; color: var(--muted); }

/* ---- Today's plan, at the top of Learn ---- */
.plan-today {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--best);
  border-radius: var(--radius); padding: 14px 18px; margin: 4px 0 22px;
  max-width: min(var(--page-width), 100%);
}
.plan-today h3 { margin: 0 0 8px; font-family: var(--display); font-size: 20px; }
.plan-items { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.plan-item {
  display: grid; gap: 2px; width: 100%; text-align: left; background: none; border: 0;
  border-radius: 4px; padding: 6px 8px;
}
.plan-item:hover { background: var(--panel-2); }
.plan-item strong { font-size: 15px; }
.plan-why { color: var(--muted); font-size: 13px; }
.lesson-mark.due { color: var(--inaccuracy); font-weight: 600; }
.voice-pick { padding: 3px 6px; font-size: 12px; max-width: 16rem; }

/* ---- signing in (on the website only) ---- */
.signin {
  position: fixed; inset: 0; z-index: 50; background: var(--page);
  display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto;
}
.signin-card {
  width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 26px;
}
.signin-card form { display: flex; flex-direction: column; gap: 10px; }
.signin-card h2 { margin: 0; font-family: var(--display); font-size: 24px; }
.signin-card .tagline { margin: 0 0 6px; line-height: 1.5; }
.signin-card label { color: var(--muted); font-size: 13px; }
.signin-card input {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 4px; padding: 10px 12px; font-size: 15px;
}
.signin-card input:focus-visible { outline: none; box-shadow: var(--ring); }
#signin-code { font: 22px/1.2 "Cascadia Mono", Consolas, ui-monospace, monospace; letter-spacing: 6px; }
#signin-send, #signin-verify {
  background: var(--best); border-color: var(--best); color: #fbf7ef; font-weight: 600; padding: 10px 13px;
}
#signin-send:hover:not(:disabled), #signin-verify:hover:not(:disabled) { filter: brightness(1.08); }
.signin-links { display: flex; flex-wrap: wrap; gap: 8px; }
.signin-links button { font-size: 13px; padding: 5px 10px; }
.signin-card .status { margin-top: 12px; }
.signin-card .status.good { color: var(--muted); }

/* who is signed in, under the light switch */
/* In the flow, not floating over it. Absolutely positioned, the signed-in email sat on top of
   whatever the tab put at the top of its page - the paste box, the first card - instead of
   taking room of its own. It is a right-aligned row under the title now, and the topbar has
   padding beneath it so there is always a gap before the page starts. */
.account {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin: 10px 0 0; font-size: 13px; color: var(--muted);
}
.account #account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 48ch; }
.account button { font-size: 12px; padding: 4px 10px; }
@media (max-width: 700px) {
  .account { justify-content: flex-start; margin-top: 10px; flex-wrap: wrap; }
  .account #account-email { max-width: 100%; }
}

/* A match has no coach beside the board and no winning bar next to it, so the board takes
   that room back. The row is a two-column grid - the bar, then the board - and with the bar
   gone the board would otherwise drop into the bar's 18px column and shrink to nothing. */
/* A plain game has nothing beside the board, so the board sits in the middle of the page
   rather than against the left edge with the rest of the window empty. */
#play-game.no-coach {
  grid-template-columns: minmax(320px, min(860px, var(--board)));
  justify-content: center;
}
#play-game.no-coach .board-row { grid-template-columns: minmax(0, 1fr); }


/* ---- The guide, set out as a manual: contents, numbered chapters, a figure each ---- */
.manual { max-width: min(1040px, 100%); }
.manual-head { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 4px; }
.manual-head h2 { margin: 0 0 4px; }
#help-print { margin-top: 10px; }

.manual-contents {
  background: var(--panel-2); border-radius: 8px; padding: 12px 16px; margin: 16px 0 4px;
}
.manual-contents h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.manual-contents ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 26px; }
.manual-contents li { margin: 3px 0; break-inside: avoid; }
.manual-contents a { color: var(--text); text-decoration: none; }
.manual-contents a:hover { text-decoration: underline; }

.chapter-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: var(--best); color: #fbf7ef; font-size: 12px; font-weight: 700;
  font-family: "Segoe UI", system-ui, sans-serif;
}
.guide-chapter { padding: 22px 0 18px; }
.guide-chapter h3 { font-size: 20px; }
.guide-lead { margin: 0 0 12px; font-size: 15px; }
.guide-more { color: var(--muted); font-size: 14px; margin: 10px 0 0; }

/* The figure sits beside the steps on a wide page, and above them on a narrow one */
.guide-figure {
  margin: 0 0 12px; float: right; width: 272px; max-width: 42%;
  margin-left: 20px; clear: both;
}
.guide-board { width: 100%; }
.guide-chart { width: 100%; height: auto; color: var(--muted); }
.guide-figure figcaption {
  font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 7px;
}
.demo-note { display: block; color: var(--text); min-height: 2.6em; }
.demo-caption { display: block; margin-top: 4px; font-style: italic; }
.guide-steps { margin: 0; padding-left: 20px; }
.guide-steps li { margin: 6px 0; line-height: 1.55; }
.guide-chapter::after { content: ""; display: block; clear: both; }
@media (max-width: 700px) {
  .guide-figure { float: none; width: 100%; max-width: 340px; margin: 0 0 14px; }
  .manual-contents ol { columns: 1; }
}

/* ---- Printed, or saved as a PDF: just the manual, chapter by chapter ---- */
@media print {
  .sidenav, .topbar, #help-print, .read-aloud, .voice-holder, #account, #theme,
  .topbar-switches { display: none !important; }
  body { background: #fff; color: #000; }
  .content { padding: 0; }
  .shell { display: block; }
  .help-guide, .manual-contents { border: 0; background: none; padding: 0; }
  .guide-chapter { break-inside: avoid; page-break-inside: avoid; border-top: 1px solid #ccc; }
  .guide-figure { width: 46%; max-width: 46%; }
  .demo-note { display: none; }          /* a frame of an animation says nothing on paper */
  a[href^="#"] { text-decoration: none; color: #000; }
}


/* ---- The manual's figures, and the screen the review scene plays on ---- */
/* The guide had a second column for the feedback panel, which moved to a tab of its own in
   0.46.1 - the column stayed behind, empty, taking a third of the page with it. */
.help-layout.one-column { grid-template-columns: minmax(0, 1fr); }
.manual { max-width: none; }
.guide-figure { width: 400px; max-width: 44%; }
.guide-figure.wide { float: none; width: 100%; max-width: 100%; margin: 0 0 16px; }

.guide-screen {
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2);
  padding: 12px; display: block;
}
.screen-review { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 760px) { .screen-review { grid-template-columns: 1fr; } }

.screen-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.screen-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 12px; min-height: 76px; font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 12px; color: var(--muted); line-height: 1.7;
}
.screen-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.screen-field {
  background: var(--panel); border: 1px solid var(--line); border-radius: 5px;
  padding: 4px 10px; font-size: 12px; color: var(--text); white-space: pre;
}
.screen-button {
  background: var(--best); color: #fbf7ef; border-radius: 5px; padding: 5px 12px;
  font-size: 12px; font-weight: 600;
}
.screen-button.pressed { filter: brightness(.85); transform: translateY(1px); }
.screen-bar {
  height: 7px; border-radius: 4px; background: var(--panel); border: 1px solid var(--line);
  margin-top: 12px; overflow: hidden;
}
.screen-bar-fill { height: 100%; background: var(--best); transition: width var(--calm) var(--ease); }
.screen-progress-text { font-size: 12px; color: var(--muted); margin-top: 5px; }

.screen-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.screen-verdict {
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--miss);
  border-radius: 6px; padding: 9px 11px;
}
.screen-verdict-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.screen-badge {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 4px;
  padding: 2px 8px 2px 4px; color: #fbf7ef; font-size: 12px; font-weight: 600;
}
.screen-move { font-weight: 600; font-size: 13px; }
.screen-text { font-size: 12px; line-height: 1.5; }
.screen-scores { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px; }
.screen-accuracy { font-family: var(--display); font-size: 24px; font-weight: 600; line-height: 1.1; }
.screen-rating { font-size: 12px; color: var(--muted); }
.screen-count { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; margin-top: 4px; }
.screen-count span:first-child { display: inline-flex; align-items: center; }
.screen-moves {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px;
  font-size: 12px;
}
.screen-move-row { display: flex; justify-content: space-between; padding: 2px 4px; border-radius: 4px; }
.screen-move-row.at { background: var(--panel-2); font-weight: 700; }
.screen-score { color: var(--muted); font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.read-aloud.reading { color: var(--text); border-color: var(--best); }


/* ---- The page the site opens on: what this is, why it is, then how to use it ---- */
.home-head { border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.home-head h2 { margin: 0; font-size: 40px; letter-spacing: .3px; }
.home-line { margin: 2px 0 10px; font-size: 20px; color: var(--muted); font-family: var(--display); }
.home-line em { color: var(--text); font-style: italic; }
.home-blurb { margin: 0; max-width: 70ch; font-size: 15px; }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.home-actions button { padding: 8px 18px; }

.home-what, .home-why { padding: 20px 0 6px; }
.home-what h3, .home-why h3, .home-guide-head { font-size: 20px; margin: 0 0 12px; }
.home-guide-head { padding-top: 22px; border-top: 1px solid var(--line); margin-top: 14px; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.home-card {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; cursor: pointer;
  transition: border-color var(--quick) var(--ease), background var(--quick) var(--ease);
}
.home-card:hover { border-color: var(--muted); background: var(--panel); }
.home-card strong { font-family: var(--display); font-size: 15px; font-weight: 600; }
.home-card span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.home-why p { max-width: 78ch; margin: 0 0 10px; }
.brand { cursor: pointer; }


/* ---- The name, which is also the way back ---- */
.brand button {
  background: none; border: 0; padding: 0; border-radius: 0;
  font: inherit; color: inherit; cursor: pointer;
}
.brand button:hover { background: none; color: var(--best); }
.brand button span { color: var(--muted); font-weight: 400; }
.brand button:hover span { color: var(--best); }

/* ---- "there is more below this" ---- */
/* The hint belongs beside the paragraph, not against the far edge of a wide screen with a
   hole between them: the text column stops at its reading measure and the hint follows it. */
.home-top {
  display: grid; grid-template-columns: minmax(0, var(--measure)) 236px;
  gap: 28px; align-items: start; justify-content: start;
}
@media (max-width: 820px) { .home-top { grid-template-columns: 1fr; } }
.home-scroll {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--best);
  border-radius: 8px; padding: 12px 14px; color: var(--muted); font-size: 13px; line-height: 1.5;
}
.home-scroll-arrow { font-size: 20px; color: var(--best); line-height: 1.1; }
@media (prefers-reduced-motion: no-preference) {
  .home-scroll-arrow { animation: nudge-down 1.9s ease-in-out infinite; }
}
@keyframes nudge-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}


/* ---- On a phone ----------------------------------------------------------------------------
   The layouts already stack at 900px; this is the rest of it. A phone is not a narrow desktop:
   the rows have to wrap rather than overflow, the boards have to fit the screen with the panel
   under them instead of beside them, and anything meant to be tapped has to be big enough to
   tap with a thumb. */
@media (max-width: 560px) {
  body { font-size: 15px; }
  .content { padding: 0 14px 40px; }

  /* Rows of labels, dropdowns and buttons: wrap, and let the controls shrink to fit */
  .loader-row, .controls, .lesson-options, .home-actions, .stars { flex-wrap: wrap; }
  .loader-row > label { width: 100%; margin-bottom: 0; }
  .loader-row select, .loader-row input, .loader-row button { flex: 1 1 auto; min-width: 0; }
  .loader { padding: 14px; }
  select, button, input { font-size: 16px; }   /* not 15: below 16 iOS zooms the page in */
  textarea { font-size: 15px; }

  /* Anything tapped gets a thumb-sized target */
  .controls button, .sidenav button, .tray-piece, .star, .move { min-height: 40px; }
  .controls button { flex: 1 1 auto; }
  .move { padding: 6px 8px; }

  /* The board takes the width of the screen, and what was beside it goes underneath */
  .board-row { grid-template-columns: 14px minmax(0, 1fr); gap: 6px; }
  .board-wrap, .puzzle-board-wrap { max-width: 100%; }
  .board { max-width: 100%; }
  /* minmax(0, …) again, and for the same reason: a plain 1fr track will not go below the width
     its contents say they need, so one wide thing inside pushed the whole column off screen. */
  .puzzle-layout, .vision-layout, .drill-layout, .lesson-layout, .help-layout, main {
    grid-template-columns: minmax(0, 1fr) !important; gap: 14px;
  }

  /* Both player cards side by side is too narrow to read at this width */
  .scoreboard { grid-template-columns: 1fr; }
  .movelist { max-height: 40vh; }

  /* The guide: figures above the words, contents in one column */
  .guide-figure, .guide-figure.wide { float: none; width: 100%; max-width: 100%; margin: 0 0 12px; }
  .manual-contents ol { columns: 1; }
  .home-head h2 { font-size: 32px; }
  .home-line { font-size: 17px; }
  .home-cards { grid-template-columns: 1fr; }

  /* The feature list across the top scrolls sideways; make it feel like it is meant to */
  .sidenav-list { padding: 0 10px 4px; scroll-snap-type: x proximity; }
  .sidenav button { scroll-snap-align: start; }
  .brand { padding: 0 14px; }

  /* The switches sit in the flow rather than over the first line */
  .topbar { padding: 16px 0 0; }
  .topbar-switches { position: static; margin-top: 8px; }
}

/* Very small phones: the smallest things on the page stop shrinking */
@media (max-width: 380px) {
  .content { padding: 0 10px 36px; }
  .sidenav button { padding: 8px 10px; font-size: 13px; }
  .screen-review { gap: 10px; }
}
/* Dragging and drawing on a touch screen moves what is under the finger, not the page */
.board, .board * { touch-action: none; }
.tray-piece { touch-action: manipulation; }


/* ---- The courses, as tiles to choose from ---- */
.course-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.course-tile {
  display: flex; flex-direction: column; gap: 6px; text-align: left; align-items: stretch;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; cursor: pointer;
  transition: border-color var(--quick) var(--ease), background var(--quick) var(--ease);
}
.course-tile:hover { border-color: var(--muted); background: var(--panel-2); }
.course-tile h3 { margin: 0; font-size: 17px; }
.course-tile .course-summary { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.course-bar {
  display: block; height: 6px; border-radius: 3px; background: var(--panel-2);
  border: 1px solid var(--line); overflow: hidden; margin-top: 4px;
}
.course-bar-fill { display: block; height: 100%; background: var(--best); }
.course-count { font-size: 12px; color: var(--muted); }
.course-back { margin-bottom: 12px; }


/* ---- Determine your rating ---- */
/* This page is a <main>, so the two-column grid every other <main> gets applied to it as well
   and dropped the whole game into the left-hand column - which is why centring the board inside
   it did nothing. The page is a plain block; the game inside it is the grid. */
.elo-layout { display: block; max-width: min(var(--page-width), 100%); }
/* Nothing sits beside this board, so it is one column - the same width a board gets anywhere
   else - in the middle of the page. It used to borrow the puzzles' two-column layout, which
   with only one child gave it a 320px track and a board half the size of every other one. */
.elo-game-layout {
  display: grid; grid-template-columns: minmax(320px, min(800px, var(--board-big)));
  justify-content: center; margin-top: 8px;
}
.elo-bar {
  height: 8px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line);
  overflow: hidden; margin-top: 12px;
}
.elo-bar-fill { height: 100%; background: var(--best); transition: width var(--calm) var(--ease); }
.elo-result { max-width: 620px; }
.elo-result h2 { margin: 0 0 2px; }
#elo-number { color: var(--best); }
.elo-spread { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
#elo-guess { width: 15rem; max-width: 100%; }


/* ---- a dialog that has to be read before something long starts ---- */
.modal-shade {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: var(--shade); padding: 20px;
}
.modal-card {
  width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: 0 18px 40px var(--shade);
}
.modal-card h2 { margin: 0 0 12px; font-size: 20px; }
.modal-points { margin: 0 0 18px; padding-left: 20px; }
.modal-points li { margin: 0 0 10px; max-width: var(--measure); }
.modal-points strong { font-weight: 650; }
#elo-between { margin-top: 12px; }


/* ---- playing somebody else ---- */
/* display:block, because this page is itself a <main> and would otherwise be handed the
   two-column grid every other <main> gets - which puts the waiting panel beside the setup card
   instead of under it. The game inside it is the grid. */
.live-layout { display: block; max-width: min(var(--page-width), 100%); margin-top: 8px; }
.move-steps button { min-width: 44px; font-family: var(--display); }
#live-looking { color: var(--inaccuracy); }
#live-rating-change { font-size: 15px; }
/* An offer in the conversation: quieter than a message, with its answer beside it. */
.chat-note { color: var(--muted); font-style: italic; }
.chat-note strong { font-style: normal; }
.chat-answer { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }
.chat-answer button { padding: 2px 10px; font-size: 13px; }
.live-game-layout {
  display: grid;
  grid-template-columns: minmax(320px, min(760px, var(--board))) minmax(260px, 1fr);
  gap: 24px; align-items: start; margin-top: 8px;
}
@media (max-width: 900px) { .live-game-layout { grid-template-columns: 1fr; } }
.live-clock {
  font-family: var(--display); font-size: 24px; font-variant-numeric: tabular-nums;
  padding: 2px 10px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line);
}
/* The clock that is running is the one being spent, so it is the one that stands out. */
.live-clock.running { background: var(--text); color: var(--page); border-color: var(--text); }
.live-result { font-family: var(--display); font-size: 20px; margin: 6px 0 0; }
.live-side { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.live-side h3 { margin: 0 0 10px; font-size: 17px; }
.chat-log {
  height: 320px; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 10px; margin-bottom: 10px; font-size: 14px;
}
.chat-line { margin: 0 0 6px; word-break: break-word; }
.chat-line.mine strong { color: var(--best); }
#live-chat-text { flex: 1 1 auto; min-width: 0; }


/* ---- the moves and the chat, sharing one column ---- */
.side-tabs { display: flex; gap: 0; margin: 0 0 12px; border-bottom: 1px solid var(--line); }
.side-tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--muted); padding: 7px 14px; font-size: 14px;
}
.side-tabs button.active { color: var(--text); font-weight: 600; border-bottom-color: var(--best); }
.side-tabs button:hover:not(.active) { color: var(--text); }
.live-movelist {
  height: 320px; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px;
}
.live-move-row { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 4px; align-items: center; }
.live-move-row > span { padding: 3px 6px; font-size: 14px; }
.live-move-row .no { color: var(--muted); font-size: 12px; }
.live-move-row button {
  background: none; border: 0; border-radius: 4px; text-align: left; padding: 3px 6px;
  font-size: 14px; color: var(--text); width: 100%;
}
.live-move-row button:hover { background: var(--press); }
.live-move-row button.at { background: var(--sunk); font-weight: 650; }
.live-unrated { color: var(--muted); }


/* ---- the games already reviewed ---- */
.past-games { max-width: min(var(--page-width), 100%); margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.past-games h3 { margin: 0 0 12px; font-size: 17px; }
.past-game {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 14px;
  align-items: center; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel); margin: 0 0 7px;
}
.past-accuracy { font-family: var(--display); font-size: 17px; font-weight: 650; }
.past-what { color: var(--text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.past-outcome { color: var(--muted); font-size: 13px; white-space: nowrap; }
@media (max-width: 560px) {
  .past-game { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .past-outcome { grid-column: 2 / 4; }
}