/*
 * Chess Coach — its own look, deliberately unlike the rest of qpkit:
 * a dark app shell that fills the viewport, the board pinned on the left as
 * large as the viewport allows, everything else in a scrolling panel on the
 * right. Nothing on the page itself scrolls, so stepping through moves never
 * shifts the board. Prefix: cc-.
 */

:root {
  --bg: #12141a;
  --panel: #191c23;
  --raised: #21252e;
  --raised2: #2a2f3a;
  --line: #2e3340;
  --line2: #3b4150;
  --text: #f3f5f8;
  --muted: #a4acbb;
  --dim: #6f7788;
  --accent: #ffb454;
  --accent-ink: #1d1400;
  --accent-soft: rgba(255, 180, 84, .14);
  /* The classification palette is taken from the chess.com icons themselves
     (chess-coach-icons.js), so a chart dot and a badge are never a shade apart. */
  --brilliant: #1bada6;
  --great: #1bada6;
  --best: #96bc4b;
  --excellent: #96bc4b;
  --good: #96af8b;
  --book: #a88865;
  --inaccuracy: #f7c045;
  --mistake: #e58f2a;
  --blunder: #ca3431;
  --win: #4ec27b;
  --loss: #ff5f5f;
  --draw: #8b93a3;
  --radius: 14px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Consolas, monospace;
  /* vertical budget around the board: topbar, stage padding, two player bars, controls */
  --top-h: 48px;
  --bar-h: 34px;
  --ctl-h: 44px;
  --stage-pad: 8px;
  /* The viewport height the layout budgets against. On a phone 100vh is the
     height with the browser's toolbars retracted, which they are not on
     arrival, so the bottom bar sat under the toolbar; dvh is the real one. */
  --vh: 100vh;
  /* the eval bar column beside the board: the bar itself and the gap after it */
  --evalw: 26px;
  --eval-bar: 16px;
  /* a captured piece in a player bar */
  --capsz: 17px;
  color-scheme: dark;
}
@supports (height: 100dvh) { :root { --vh: 100dvh; } }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  /* An app shell, not a document: no pinch zoom and no double-tap zoom
     anywhere on it. A second tap on the next-move button used to zoom the
     page instead of stepping again. Panning stays for the panel. The
     viewport meta says the same for browsers that read that instead. */
  touch-action: pan-x pan-y;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
[hidden] { display: none !important; }

/* ----- shell ----- */

/* minmax(0,1fr) everywhere a track holds user content: a grid track defaults
   to auto and grows to its content's min-content width, so one wide table in
   the panel would silently widen the whole app past the viewport. */
/* overflow: hidden here and not only on body: body's propagates to the
   viewport and does not stop a phone browser counting overflowing content
   towards the page width, so a board mid-resize once zoomed a phone out to
   406px and it stayed there. Clipped on the app box, it cannot. */
.cc-app { display: grid; height: var(--vh); overflow: hidden; grid-template-rows: var(--top-h) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.cc-main, .cc-panel, .cc-view, .cc-acc-cell, .cc-summary, .cc-card, .cc-body, .cc-engine, .cc-moves { min-width: 0; }

.cc-top {
  position: relative;       /* the shortcuts popover hangs from it */
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 14px 0 62px;   /* room for the qpkit home button */
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.cc-helpbtn { font-weight: 800; font-size: 15px; }
/* Shortcuts, one click (or ?) away, under the top bar's right edge. */
.cc-pop {
  position: absolute; top: calc(100% + 8px); right: 14px; z-index: 40;
  width: min(360px, calc(100vw - 28px)); padding: 14px 16px;
  border: 1px solid var(--line2); border-radius: 14px;
  background: var(--panel); box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}
/* One grid for both groups, so the key column lines up throughout; the
   group names span it. */
.cc-help-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px 12px; color: var(--muted); font-size: 12.5px; }
.cc-help-grid > b { grid-column: 1 / -1; margin: 0 0 1px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.cc-help-grid > b:not(:first-child) { margin-top: 8px; }
.cc-keys { display: inline-flex; gap: 4px; }
.cc-keys kbd {
  display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px;
  border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 6px;
  color: var(--text); background: var(--raised2);
  font-family: var(--mono); font-size: 11.5px; line-height: 1;
}
.cc-brand { display: flex; align-items: center; font-size: 15px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }

.cc-panel-tabs { position: sticky; top: 0; z-index: 5; padding: 10px 14px 8px; background: var(--panel); border-bottom: 1px solid var(--line); }
.cc-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: 11px; background: var(--raised); }
.cc-tabs button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 6px; border: 0; border-radius: 8px;
  color: var(--muted); background: transparent; font-weight: 600; font-size: 13px; white-space: nowrap;
}
.cc-tabs button:hover { color: var(--text); }
.cc-tabs button[aria-selected="true"] { color: var(--text); background: var(--raised2); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 4px 12px rgba(0,0,0,.25); }
/* The UI font, not the mono one: DM Mono's "1" has a flag and narrow ink, so a
   single digit reads as left-of-centre inside a circle. line-height:1 plus
   tabular figures keeps one and two digits centred the same way. */
.cc-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px;
  color: var(--accent-ink); background: var(--accent);
  font-family: var(--font); font-size: 11px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cc-top-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cc-status { display: flex; align-items: center; gap: 8px; max-width: 360px; padding: 5px 10px 5px 8px; border-radius: 9px; background: var(--raised); color: var(--muted); font-size: 12.5px; }
.cc-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: 0 0 auto; }
.cc-status.is-working .cc-status-dot { background: var(--accent); animation: cc-pulse 1.2s infinite; }
.cc-status.is-done .cc-status-dot { background: var(--win); }
.cc-status.is-error .cc-status-dot { background: var(--loss); }
.cc-status.is-error { color: #ffb3b3; }
.cc-status-track { width: 90px; height: 4px; overflow: hidden; border-radius: 4px; background: var(--line2); }
.cc-status-track i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
@keyframes cc-pulse { 50% { opacity: .35; } }

/* ----- buttons & fields ----- */

.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 16px;
  border: 1px solid var(--line2); border-radius: 10px;
  color: var(--text); background: var(--raised2);
  font-weight: 650; white-space: nowrap;
  transition: transform .12s, background .12s, border-color .12s;
}
.cc-btn:hover:not(:disabled) { background: #343a47; border-color: #4a5264; transform: translateY(-1px); }
.cc-btn:disabled { opacity: .45; cursor: not-allowed; }
.cc-btn-sm { height: 34px; padding: 0 12px; font-size: 13px; }
.cc-btn-primary { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }
.cc-btn-primary:hover:not(:disabled) { background: #ffc26e; border-color: #ffc26e; }
.cc-btn-ghost { background: transparent; }
.cc-btn-line { border-color: #5f9bff; color: #9dc0ff; background: rgba(95, 155, 255, .12); }
.cc-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.cc-btn-wide { width: 100%; }
.cc-iconbtn {
  display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 auto;
  border: 1px solid var(--line2); border-radius: 9px;
  color: var(--text); background: var(--raised2);
}
.cc-iconbtn:hover { background: #343a47; }
.cc-iconbtn svg { width: 17px; height: 17px; }
.cc-input {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--line2); border-radius: 10px;
  color: var(--text); background: #0d0f14; outline: 0;
}
.cc-input::placeholder { color: var(--dim); }
.cc-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cc-select { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a4acbb' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.cc-textarea { height: auto; min-height: 76px; max-height: 220px; padding: 10px 12px; resize: vertical; font-family: var(--font); }
/* Once it holds moves rather than a name, it should read like moves. */
.cc-textarea.is-pgn { font-family: var(--mono); font-size: 12.5px; min-height: 120px; }
.cc-check { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; }
.cc-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.cc-field { display: grid; gap: 6px; min-width: 0; }
.cc-field > span { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.cc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-field-row.cc-with-btn { grid-template-columns: 1fr auto; align-items: end; }
.cc-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; border-radius: 10px; background: var(--raised); }
.cc-seg button { height: 34px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-weight: 650; }
.cc-seg button[aria-pressed="true"] { color: var(--text); background: var(--raised2); }
.cc-muted { color: var(--muted); font-size: 13px; }
.cc-spacer { flex: 1; }
.cc-section-label { display: block; margin-bottom: 6px; color: var(--dim); font-size: 12px; font-weight: 600; }

/* ----- stage ----- */

.cc-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 470px); min-height: 0; }
/* The grid column is minmax(0,1fr) on purpose: chessground writes the board's
   pixel size onto cg-container, and an auto column would size itself from
   that, so the board could never shrink below its last size. */
/* The board is square, so its size is whichever is smaller: the column width
   or the height left after the bars around it. The 26px is the eval bar and
   its gap, which sit beside the board inside this box. */
.cc-stage {
  --board-max: calc(var(--vh) - var(--top-h) - 2 * var(--stage-pad) - 2 * var(--bar-h) - var(--ctl-h));
  display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-width: 0; min-height: 0; padding: var(--stage-pad) 16px;
}
.cc-stagebox { width: min(100%, calc(var(--board-max) + var(--evalw))); max-width: 100%; min-width: 0; }
.cc-board { min-width: 0; }
/* overflow: a bar carrying a long name and a long row of captured pieces must
   clip rather than widen the page — on a phone even one overflowing frame
   makes Chrome zoom the whole layout out and stay there. */
.cc-playerbar { display: flex; align-items: center; gap: 9px; height: var(--bar-h); padding: 0 2px 0 calc(var(--evalw) + 2px); overflow: hidden; }
.cc-avatar { position: relative; display: grid; width: 26px; height: 26px; place-items: center; overflow: hidden; border-radius: 7px; background: var(--raised2); font-size: 14px; }
.cc-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-playerbar.is-white .cc-avatar { background: #e9ecf1; color: #111; }
.cc-playerbar.is-black .cc-avatar { background: #2b2f38; color: #e9ecf1; border: 1px solid var(--line2); }
.cc-pname { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-prating { color: var(--muted); font-size: 12.5px; }
/* Captured material, the way chess.com shows it: every piece this player has
   taken, then the point lead, and that only on the side which is ahead. Each
   icon is the chosen piece set's artwork used as a mask over one flat colour,
   so both sides' pieces are the same grey silhouette — chess.com's look, and
   the reason is practical: a black piece drawn as itself is near-black on a
   near-black bar, and the light ring that was tried instead read as a blur on
   a sharp display. The colour is redundant anyway, since a bar can only hold
   the other side's pieces. The mask images come from the same generated
   stylesheet as the board. `flex: none` so a long name is what gives way;
   `:empty` collapses the element rather than leaving the bar's gap around
   nothing. */
.cc-taken { display: flex; flex: none; align-items: center; gap: 3px; }
.cc-taken:empty { display: none; }
.cc-capgrp { display: flex; }
.cc-cap { width: var(--capsz); height: var(--capsz); background: #c3cad6; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.cc-cap + .cc-cap { margin-left: calc(var(--capsz) * -.5); }
.cc-taken b { margin-left: 2px; font-size: 12px; color: var(--muted); }
.cc-pclock { margin-left: auto; padding: 2px 9px; border-radius: 7px; background: var(--raised); font-family: var(--mono); font-size: 13px; color: var(--muted); }
.cc-playerbar.is-turn .cc-pclock { color: var(--text); background: var(--raised2); }

/* isolation: chessground's shape layers carry z-indexes of their own, and
   without a stacking context here the phone's sheet slid under the arrows. */
.cc-boardrow { position: relative; isolation: isolate; display: grid; grid-template-columns: var(--eval-bar) minmax(0, 1fr); gap: calc(var(--evalw) - var(--eval-bar)); }
.cc-boardtip { position: absolute; inset: 0 0 0 var(--evalw); display: grid; place-items: center; z-index: 3; }
.cc-boardtip-card { display: grid; justify-items: center; gap: 8px; max-width: 300px; padding: 20px 22px; border: 1px solid var(--line2); border-radius: 16px; background: rgba(18, 20, 26, .92); box-shadow: 0 20px 60px rgba(0,0,0,.5); text-align: center; backdrop-filter: blur(6px); }
.cc-boardtip-card b { font-size: 17px; letter-spacing: -.01em; }
.cc-boardtip-card span { color: var(--muted); font-size: 13px; }
.cc-boardtip-card .cc-btn { margin-top: 6px; }
.cc-evalbar { position: relative; overflow: hidden; border-radius: 5px; background: #2b2f38; }
.cc-evalbar i { position: absolute; right: 0; bottom: 0; left: 0; height: 50%; background: #eef1f5; transition: height .35s ease; }
.cc-evalbar.is-flipped i { top: 0; bottom: auto; }
.cc-evalbar span { position: absolute; left: 0; right: 0; bottom: 6px; color: #1b1e25; font-family: var(--mono); font-size: 9.5px; text-align: center; writing-mode: vertical-rl; transform: rotate(180deg); }
.cc-evalbar.is-black span { top: 6px; bottom: auto; color: #eef1f5; }
/* No overflow:hidden here: it would clip a piece being dragged off the edge
   and a badge in the corner of an edge square. The rounding goes on cg-board. */
.cc-board { width: 100%; aspect-ratio: 1; border-radius: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.45); touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.cc-board.cg-wrap { width: 100%; height: auto; }
.cc-board cg-board { border-radius: 6px; }
/* chessground dims its arrow layer to .6; the brushes carry their own opacity */
.cc-board .cg-shapes { opacity: .92; }

/* Board colours: the steel default lives here so there is no flash before the
   script applies the chosen look (the same rules, rewritten into #boardLook). */
.cc-board cg-board { background-color: #dfe6ea; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='2' height='2' fill='%23dfe6ea'/%3E%3Crect x='1' y='0' width='1' height='1' fill='%236a879a'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%236a879a'/%3E%3C/svg%3E"); background-size: 25% 25%; image-rendering: pixelated; }
.cc-board cg-board square.last-move { background-color: rgba(255, 180, 84, .5); }
.cc-board cg-board square.selected { background-color: rgba(255, 180, 84, .6); }
.cc-board cg-board square.check { background: radial-gradient(ellipse at center, rgba(255, 60, 60, 1) 0%, rgba(255, 60, 60, .7) 35%, rgba(255,60,60,0) 80%); }
.cc-board cg-board square.move-dest { background: radial-gradient(rgba(20, 30, 40, .45) 22%, transparent 24%); }
.cc-board cg-board square.oc.move-dest { background: radial-gradient(transparent 0%, transparent 78%, rgba(20,30,40,.4) 80%); }
.cc-board cg-board square.move-dest:hover { background: rgba(20, 30, 40, .25); }
/* Arrows draw themselves out of the piece and the head lands as the shaft
   arrives; badges pop. Only a shape that is new to the board animates:
   chessground keeps the element of one whose markup has not changed. */
.cc-board .cc-arrow-shaft { stroke-dasharray: 1; animation: cc-arrow-draw .22s cubic-bezier(.2, .7, .3, 1) both; }
.cc-board .cc-arrow-head { transform-box: fill-box; transform-origin: center; animation: cc-arrow-land .16s .12s ease-out both; }
.cc-board .cc-badge-in { transform-box: fill-box; transform-origin: center; animation: cc-badge-pop .2s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes cc-arrow-draw { from { stroke-dashoffset: 1.1; } to { stroke-dashoffset: 0; } }
@keyframes cc-arrow-land { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes cc-badge-pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .cc-board .cc-arrow-shaft, .cc-board .cc-arrow-head, .cc-board .cc-badge-in { animation: none; }
}
.cc-board .cg-wrap coords, .cc-board coords { font-family: var(--mono); font-size: 9px; font-weight: 600; }
/* chessground offsets the file letters 24px to the right of the board so each
   one sits in the corner of its square. The layer then ends 24px past the
   board, which is a horizontal scrollbar once the board fills a phone screen.
   Aligning the layer to the board and pushing each letter into its own corner
   with padding looks the same and cannot overflow. */
.cc-board coords.files { left: 0; width: 100%; }
.cc-board coords.files coord { text-align: right; padding-right: 5px; }
.cc-board coords.ranks coord:nth-child(2n), .cc-board coords.files coord:nth-child(2n+1) { color: #dfe6ea; }
.cc-board coords.ranks coord:nth-child(2n+1), .cc-board coords.files coord:nth-child(2n) { color: #3c5563; }
/* promotion picker: four pieces over the promotion file */
.cc-promo { position: absolute; top: 0; z-index: 12; width: calc((100% - var(--evalw)) / 8); display: grid; gap: 2px; padding: 3px; border-radius: 8px; background: rgba(18, 20, 26, .96); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.cc-promo.is-bottom { top: auto; bottom: 0; }
.cc-promo button { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid var(--line2); border-radius: 6px; background: var(--raised2); }
.cc-promo button:hover { background: #343a47; border-color: var(--accent); }
.cc-promo piece { position: static; display: block; width: 100%; height: 100%; background-size: cover; }
.cc-mark.pending { background: var(--dim); color: var(--text); }
/* the qpkit home button is 42px tall; the topbar here is 48px */
.__accessbox-chess-coach .__accessbox-nav { top: 3px; left: 10px; }

.cc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: var(--ctl-h); padding-top: 6px; }
.cc-navgroup { display: flex; gap: 4px; }
.cc-navgroup-right { margin-left: auto; }
.cc-navbtn { display: grid; width: 40px; height: 34px; place-items: center; border: 1px solid var(--line2); border-radius: 9px; color: var(--text); background: var(--raised2); }
.cc-navbtn:hover { background: #343a47; }
.cc-navbtn svg { width: 16px; height: 16px; }
.cc-drillprompt { font-weight: 700; }
/* Two of the controls change shape on a small screen (see responsive): the
   best-move button becomes its star and the ask box is summoned by a button
   instead of always sitting under the panel. Neither exists on a desktop. */
.cc-compact-icon, .cc-tab-ic, .cc-tabs .cc-tab-settings, .cc-grab, .cc-mobile-only { display: none; }
#playBest .cc-compact-icon { width: 18px; height: 18px; }
/* One span holds the whole label: the button is a flex row with a gap, and
   as separate text nodes the words sat a gap apart. Squeezed, it ellipsises. */
.cc-btn .cc-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ----- panel ----- */

/* The panel is a column: tab strip, a scroller, and the ask box as a footer
   that is always in reach. Only the scroller scrolls. */
.cc-panel { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-left: 1px solid var(--line); background: var(--panel); }
.cc-panel-tabs { flex: none; }
.cc-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.cc-scroll::-webkit-scrollbar { width: 10px; }
.cc-scroll::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 99px; background: #3b4150; background-clip: padding-box; }
.cc-view { display: grid; gap: 12px; align-content: start; padding: 14px; }
.cc-body { display: grid; gap: 12px; }

.cc-empty { display: grid; justify-items: center; gap: 10px; padding: 48px 20px; text-align: center; }
.cc-empty-sm { padding: 30px 12px; }
.cc-empty-art { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 18px; background: var(--raised); font-size: 34px; }
.cc-empty h2 { margin: 6px 0 0; font-size: 19px; letter-spacing: -.02em; }
.cc-empty p { max-width: 320px; margin: 0; color: var(--muted); }

.cc-gamehead-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cc-gamehead-row > .cc-gamehead { flex: 1; }
.cc-gamehead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cc-gamehead-main { min-width: 0; flex: 1; }
.cc-gamehead-main > b { display: block; font-size: 15px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-gamehead-main > span { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-result { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 700; line-height: 1.4; color: #0d0f14; vertical-align: 1px; }
.cc-result.win { background: var(--win); }
.cc-result.loss { background: var(--loss); }
.cc-result.draw { background: var(--draw); }

/* coach bubble */
.cc-coach { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; }
.cc-coach-avatar { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: var(--accent-ink); background: var(--accent); font-size: 24px; box-shadow: 0 6px 18px rgba(255, 180, 84, .25); }
.cc-bubble { position: relative; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 14px; border-top-left-radius: 4px; background: var(--raised); }
.cc-bubble-head { display: flex; align-items: center; gap: 8px; min-height: 26px; margin-bottom: 6px; }
.cc-bubble-head b { font-size: 16px; white-space: nowrap; }
.cc-bubble-cls { color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-clock { color: var(--dim); font-family: var(--mono); font-size: 12px; }
.cc-bubble-text p, .cc-bubble-more p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; }
.cc-bubble-text p:last-child, .cc-bubble-more p:last-child { margin: 0; }
.cc-bubble-text .cc-rule { color: var(--muted); font-size: 13.5px; }
.cc-bubble-more { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line2); }
.cc-bubble-more.is-streaming::after { content: "▍"; color: var(--accent); animation: cc-blink 1s steps(2) infinite; }
.cc-bubble-more ul { margin: 0 0 8px; padding-left: 18px; }
.cc-bubble-label { display: block; margin-bottom: 5px; color: var(--accent); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.cc-bubble-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cc-bubble-actions:empty { display: none; }
.cc-voice-status { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 12px; }
.cc-voice-status.is-warn { color: #ffcf8a; }
.cc-voice-status i { width: 70px; height: 4px; overflow: hidden; border-radius: 4px; background: var(--line2); }
.cc-voice-status i b { display: block; height: 100%; background: var(--accent); }
.cc-voicebtn[aria-pressed="false"] { color: var(--dim); }
.cc-voicebtn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.cc-voicebtn.is-speaking { background: var(--accent); color: var(--accent-ink); animation: cc-pulse 1.4s infinite; }
@keyframes cc-blink { 50% { opacity: 0; } }

/* drill progress dots */
.cc-dots { display: inline-flex; gap: 5px; }
.cc-dots i { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--line2); background: var(--raised2); }
.cc-dots i.is-current { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }
.cc-dots i.ok { border-color: var(--win); background: var(--win); }
.cc-dots i.fail { border-color: var(--loss); background: var(--loss); }
.cc-dots i.skip { border-color: var(--dim); background: var(--dim); }

/* Classification marks. The icon is chess.com's own SVG, which draws its own
   coloured disc, so the box around it only has to centre it. `pending` and any
   classification without an icon fall back to a lettered disc. */
.cc-mark { display: inline-grid; place-items: center; flex: 0 0 auto; line-height: 0; }
.cc-icon { display: block; flex: 0 0 auto; }
.cc-mark.pending, .cc-mark-text {
  display: inline-grid; width: 22px; height: 22px; place-items: center; flex: 0 0 auto;
  border-radius: 50%; color: #0d0f14; background: var(--draw);
  font-family: var(--font); font-size: 12px; font-weight: 800; letter-spacing: -.04em; line-height: 1;
}
.cc-mark.pending { color: var(--text); background: var(--raised2); border: 1px solid var(--line2); }

/* engine lines */
.cc-engine { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #14171d; }
.cc-engine-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.cc-engine-head b { color: var(--text); font-size: 13px; }
.cc-engine-head #engineDepth { font-family: var(--mono); font-size: 12px; }
.cc-engine.is-live #engineDepth::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--accent); animation: cc-pulse 1s infinite; vertical-align: 1px; }
.cc-engine-hint { color: var(--dim); font-size: 11.5px; }
.cc-lines { display: grid; gap: 3px; }
.cc-line {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: center;
  min-height: 30px; padding: 3px 6px 3px 3px; border: 1px solid transparent; border-radius: 8px;
  color: var(--text); background: transparent; text-align: left;
}
.cc-line:hover { background: #1f232c; border-color: var(--line2); }
.cc-line-eval { display: inline-grid; place-items: center; height: 24px; border-radius: 6px; background: #eef1f5; color: #1b1e25; font-family: var(--mono); font-size: 12px; font-weight: 500; }
.cc-line-eval.is-black { background: #2b2f38; color: #eef1f5; border: 1px solid var(--line2); }
.cc-line-moves { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.cc-line-moves b { color: var(--text); font-weight: 600; }
.cc-lines:empty::before { content: "Waiting for the engine…"; color: var(--dim); font-size: 12.5px; }

/* summary */
.cc-summary { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); }
.cc-acc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-acc-cell { padding: 10px 12px; border-radius: 10px; background: #14171d; }
.cc-acc-cell.is-you { outline: 1px solid var(--accent); }
.cc-acc-cell small { display: block; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cc-acc-cell b { display: block; margin-top: 2px; font-size: 24px; letter-spacing: -.03em; line-height: 1.1; }
.cc-acc-cell b em { font-style: normal; color: var(--muted); font-size: 12px; font-weight: 600; margin-left: 4px; }
.cc-cls-table { display: grid; grid-template-columns: 58px 1fr 58px; row-gap: 3px; align-items: center; font-size: 13px; }
.cc-cls-table > span { text-align: center; font-family: var(--mono); font-size: 12.5px; }
.cc-cls-table > div { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); }
.cc-cls-table > span.is-zero { color: var(--dim); }
/* Accuracy by phase, one row each, in the columns the counts use above. */
.cc-phase-rows { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); row-gap: 5px; }
.cc-phase-val { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.cc-phase-val b { font-weight: 500; }
.cc-phase-val.is-you b { color: var(--accent); }
.cc-phase-val.is-none { color: var(--dim); }
.cc-summary-foot { color: var(--muted); font-size: 12.5px; }

/* phases strip */
.cc-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cc-phase { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); text-align: center; }
.cc-phase small { color: var(--dim); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cc-phase div { display: flex; justify-content: center; gap: 10px; font-family: var(--mono); font-size: 13px; }
.cc-phase div b { font-weight: 500; }
.cc-phase div b.is-you { color: var(--accent); }
.cc-phase div b.is-none { color: var(--dim); }

/* key moments */
.cc-moments { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-moment {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px 0 5px;
  border: 1px solid var(--line2); border-radius: 15px;
  color: var(--text); background: var(--raised); font-size: 13px; font-weight: 650;
}
.cc-moment:hover { border-color: #4a5264; }
.cc-moment.is-current { border-color: var(--accent); background: var(--accent-soft); }
.cc-moments-label { align-self: center; color: var(--dim); font-size: 12px; font-weight: 600; margin-right: 2px; }

/* graph + report actions */
.cc-graphbox { display: grid; }
.cc-graph { display: block; width: 100%; height: 110px; border-radius: 10px; background: #14171d; cursor: pointer; }
.cc-report-actions { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; }
.cc-report-actions .cc-btn { height: 38px; padding: 0 12px; font-size: 13px; }
.cc-lessonbox { margin-top: 0; padding: 12px 14px; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--raised); }

/* move list: explicit rows so a variation can be inserted between two moves */
.cc-moves {
  position: relative;
  display: grid; align-content: start;
  max-height: 250px; overflow: auto;
  border: 1px solid var(--line); border-radius: 10px; background: #14171d;
  font-size: 13.5px;
}
.cc-moves.is-drill { max-height: 160px; }
.cc-row { display: grid; grid-template-columns: 34px 1fr 1fr; border-bottom: 1px solid #1d2129; }
.cc-row > span { display: flex; align-items: center; padding: 0 8px; color: var(--dim); font-family: var(--mono); font-size: 11.5px; background: #171a21; }
.cc-row > .cc-filler { background: transparent; }
.cc-moves button.cc-mv { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 8px; border: 0; border-radius: 0; color: var(--text); background: transparent; text-align: left; font-weight: 600; }
.cc-moves button.cc-mv:hover { background: #1f232c; }
.cc-moves button.cc-mv.is-current { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.cc-moves.is-locked button.cc-mv { cursor: default; }
.cc-moves.is-locked button.cc-mv:hover { background: transparent; }
.cc-varline { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 5px 8px 5px 12px; border-bottom: 1px solid #1d2129; background: rgba(95, 155, 255, .07); box-shadow: inset 3px 0 0 #5f9bff; font-size: 13px; }
.cc-varline .cc-varlabel { color: #9dc0ff; font-size: 11.5px; font-weight: 700; margin-right: 4px; }
.cc-varline button { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px; border: 0; border-radius: 6px; color: var(--text); background: transparent; font-weight: 600; font-style: italic; }
.cc-varline button:hover { background: rgba(95, 155, 255, .15); }
.cc-varline button.is-current { background: rgba(95, 155, 255, .25); }
.cc-varline .cc-varnum { color: var(--dim); font-family: var(--mono); font-size: 11.5px; }
.cc-varline button:focus-visible { outline: 2px solid #5f9bff; outline-offset: -2px; }
.cc-bubble-text .cc-varnote { color: #9dc0ff; font-size: 12px; font-weight: 600; }
.cc-varline .cc-varback { margin-left: auto; height: 24px; padding: 0 8px; border: 1px solid #5f9bff; border-radius: 6px; color: #9dc0ff; background: transparent; font-size: 12px; font-style: normal; }

/* chat */
.cc-chat-log { display: grid; gap: 6px; }
.cc-chat-log:empty { display: none; }
.cc-msg { padding: 9px 11px; border-radius: 11px; font-size: 13.5px; line-height: 1.5; }
.cc-msg.user { justify-self: end; max-width: 90%; background: var(--raised2); }
.cc-msg.coach { position: relative; background: var(--raised); border: 1px solid var(--line2); }
.cc-msg p { margin: 0 0 6px; }
.cc-msg p:last-child { margin: 0; }
.cc-msg.is-streaming::after { content: "▍"; color: var(--accent); animation: cc-blink 1s steps(2) infinite; }
.cc-ask { flex: none; padding: 10px 14px 12px; background: var(--panel); border-top: 1px solid var(--line); }
.cc-chat-row { display: flex; gap: 6px; }
.cc-chat-row .cc-input { flex: 1; height: 38px; }
.cc-chat-row .cc-btn { height: 38px; }

/* profile chip */
.cc-profile { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); }
.cc-profile img, .cc-profile .cc-profile-fallback { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--raised2); display: grid; place-items: center; font-size: 20px; flex: 0 0 auto; }
.cc-profile b { display: block; }
.cc-profile small { display: block; color: var(--muted); font-size: 12px; }
.cc-profile .cc-ratings { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cc-profile .cc-ratings span { padding: 3px 8px; border-radius: 7px; background: #14171d; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cc-profile .cc-ratings span b { display: inline; color: var(--text); margin-left: 4px; }

/* bubble close */
.cc-bubble-more { position: relative; }
.cc-bubble-close { position: absolute; top: 8px; right: 0; display: grid; width: 24px; height: 24px; place-items: center; border: 0; border-radius: 7px; color: var(--dim); background: transparent; font-size: 14px; }
.cc-bubble-close:hover { color: var(--text); background: var(--raised2); }
.cc-lessonbox .cc-bubble-close { top: 10px; right: 8px; }

/* games list — the result is a rail down the left edge rather than a W/L tile,
   so the row leads with who you played instead of a coloured letter. */
.cc-gamestools { display: flex; align-items: center; gap: 6px; }
.cc-games { display: grid; gap: 4px; }
.cc-game {
  position: relative;
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 8px 10px 8px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised);
  cursor: pointer; text-align: left;
}
.cc-game::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: 6px; width: 3px; border-radius: 3px; background: var(--dim); }
.cc-game.win::before { background: var(--win); }
.cc-game.loss::before { background: var(--loss); }
.cc-game.draw::before { background: var(--draw); }
.cc-game:hover { border-color: var(--line2); background: #252a34; }
.cc-game.is-current { border-color: var(--accent); }
.cc-game-day { display: flex; align-items: center; gap: 8px; margin: 8px 2px 2px; color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cc-game-day:first-child { margin-top: 2px; }
.cc-game-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cc-game-av {
  position: relative; display: grid; width: 30px; height: 30px; place-items: center; overflow: hidden;
  border-radius: 9px; background: var(--raised2); color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase;
}
.cc-game-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-game-title { display: flex; align-items: baseline; gap: 6px; overflow: hidden; margin: 0; }
.cc-game-title b { min-width: 0; overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.cc-game-elo { flex: none; color: var(--dim); font-family: var(--mono); font-size: 11.5px; }
.cc-game-meta { display: flex; align-items: center; gap: 6px; overflow: hidden; margin: 1px 0 0; color: var(--muted); font-size: 12px; white-space: nowrap; }
.cc-game-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cc-game-col { flex: none; width: 9px; height: 9px; border: 1.5px solid var(--dim); border-radius: 50%; }
.cc-game-col.w { border-color: #e9ecf1; background: #e9ecf1; }
.cc-game-col.b { background: #14171d; }
.cc-game-side { display: flex; align-items: center; gap: 5px; }
.cc-game-acc { padding: 3px 8px; border-radius: 999px; color: var(--muted); background: #14171d; font-family: var(--mono); font-size: 12px; }
.cc-game-acc.hi { color: var(--best); background: rgba(150, 188, 75, .13); }
.cc-game-acc.mid { color: var(--inaccuracy); background: rgba(247, 192, 69, .13); }
.cc-game-acc.lo { color: var(--mistake); background: rgba(229, 143, 42, .13); }
.cc-game-prog { width: 70px; height: 5px; overflow: hidden; border-radius: 5px; background: var(--line2); }
.cc-game-prog i { display: block; height: 100%; background: var(--accent); }
.cc-game .cc-x { display: grid; width: 26px; height: 26px; place-items: center; border: 0; border-radius: 7px; color: var(--dim); background: transparent; opacity: 0; transition: opacity .12s; }
.cc-game:hover .cc-x, .cc-game:focus-within .cc-x, .cc-game .cc-x.is-on { opacity: 1; }
.cc-game .cc-x:hover { color: var(--loss); background: #14171d; }
@media (hover: none) { .cc-game .cc-x { opacity: 1; } }

/* profile + insights cards */
.cc-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); }
.cc-card h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .02em; text-transform: uppercase; }
.cc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cc-stat { padding: 9px 10px; border-radius: 10px; background: #14171d; }
.cc-stat b { display: block; font-size: 20px; letter-spacing: -.03em; line-height: 1.1; }
.cc-stat small { color: var(--muted); font-size: 11.5px; }
.cc-trend { display: flex; gap: 3px; align-items: flex-end; height: 40px; margin-top: 10px; }
.cc-trend i { flex: 1; min-width: 3px; border-radius: 3px 3px 0 0; background: var(--win); opacity: .85; }
.cc-trend i.loss { background: var(--loss); }
.cc-trend i.draw { background: var(--draw); }
.cc-bars { display: grid; gap: 6px; }
.cc-bar { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; align-items: center; font-size: 13px; }
.cc-bar > div { position: relative; height: 24px; overflow: hidden; border-radius: 7px; background: #14171d; }
.cc-bar > div i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--mistake), var(--blunder)); opacity: .55; }
.cc-bar > div span { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 9px; font-weight: 600; }
.cc-bar > b { font-family: var(--mono); font-size: 12px; font-weight: 500; text-align: right; color: var(--muted); }
.cc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cc-table th, .cc-table td { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: left; }
.cc-table th { color: var(--dim); font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; }
.cc-table td.num { font-family: var(--mono); text-align: right; }
.cc-report { padding: 12px 14px; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--raised); }
.cc-chart { display: block; width: 100%; border-radius: 10px; background: #14171d; }
.cc-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: -4px 0 8px; font-size: 12px; color: var(--muted); }
.cc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cc-legend i { width: 12px; height: 3px; border-radius: 2px; background: var(--accent); }
.cc-legend i.opp { background: #8b93a3; }
.cc-legend i.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blunder); }

/* drill feedback */
.cc-ok { color: var(--best); font-weight: 700; }
.cc-bad { color: var(--blunder); font-weight: 700; }
.cc-checking { color: var(--muted); }
.cc-checking::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--accent); animation: cc-pulse 1s infinite; vertical-align: 1px; }
/* your move / the best move / what happened in the game, side by side */
.cc-cmp { width: 100%; margin: 10px 0 8px; border-collapse: collapse; font-size: 13px; }
.cc-cmp td { padding: 5px 4px; border-top: 1px solid var(--line); vertical-align: middle; }
.cc-cmp tr:first-child td { border-top: 0; }
.cc-cmp .cc-cmp-label { color: var(--muted); white-space: nowrap; }
.cc-cmp .cc-cmp-move { font-weight: 700; white-space: nowrap; }
.cc-cmp .cc-cmp-mark { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.cc-cmp .cc-cmp-mark span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-cmp .num { font-family: var(--mono); font-size: 12px; text-align: right; white-space: nowrap; }

/* ----- modals ----- */

.cc-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(6, 8, 12, .7); backdrop-filter: blur(6px); }
.cc-modal-card { width: min(520px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 18px; border: 1px solid var(--line2); border-radius: 18px; background: var(--panel); box-shadow: 0 30px 80px rgba(0,0,0,.6); display: grid; gap: 12px; }
.cc-modal-card.cc-modal-sm { width: min(400px, 100%); }
.cc-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.cc-modal-head { display: flex; align-items: center; justify-content: space-between; }
.cc-modal-head b { font-size: 17px; letter-spacing: -.01em; }
.cc-addrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cc-addrow .cc-select { width: auto; height: 36px; padding-right: 30px; }
.cc-addhint { min-height: 18px; margin: 0; color: var(--muted); font-size: 12.5px; }
.cc-addhint.is-error { color: #ffb3b3; }
.cc-provblock { display: grid; gap: 8px; }
.cc-sheet-section { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.cc-sheet-section > h4 { margin: 0; color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.cc-toast { position: fixed; bottom: 22px; left: 50%; z-index: 60; padding: 10px 14px; border-radius: 10px; color: var(--accent-ink); background: var(--accent); font-weight: 600; font-size: 13px; transform: translateX(-50%); box-shadow: 0 10px 30px rgba(0,0,0,.4); }

/* ----- responsive -----
 *
 * Three shapes. A desktop is the grid above. A portrait screen up to 900px
 * wide (a phone, a tablet held upright) stacks the way the chess.com and
 * lichess apps do: player bar, board, player bar, the panel, and the move
 * controls pinned along the bottom edge where the thumbs are. The page still
 * never scrolls: the board is capped so the panel keeps at least --panel-min,
 * and only the panel scrolls. A landscape phone has no height to stack in, so
 * it keeps the board beside the panel, with a narrower panel and thinner
 * bars.
 *
 * Both flatten the stage wrappers with display: contents, so the bars, the
 * board row and the controls become direct children of .cc-app (portrait) or
 * .cc-stage (landscape) and can be ordered and sized on their own. That is
 * what lets the controls span the full width rather than the board's, and so
 * stay on one row beside a board smaller than they are.
 */

@media (max-width: 900px) and (orientation: portrait) {
  :root {
    --bar-h: 34px; --stage-pad: 0px; --evalw: 16px; --eval-bar: 12px; --capsz: 15px;
    --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
    --ctl-base: 60px; --ctl-h: calc(var(--ctl-base) + var(--safe-b));
    --panel-min: max(200px, calc(var(--vh) * .3));
  }
  /* No header: the home button, brand, add and settings buttons go (add
     lives in the Games tab, settings on the tab strip), the status becomes a
     pill over the board, and the stage wrappers flatten so the bars and the
     board are the app's own children. */
  .cc-app { position: relative; display: flex; flex-direction: column; padding-top: var(--safe-t); }
  .cc-main, .cc-stage, .cc-stagebox, .cc-top, .cc-top-right { display: contents; }
  .cc-brand, .cc-top-right > :not(.cc-status), .cc-pop, .__accessbox-chess-coach .__accessbox-nav { display: none; }
  #addBtn2 { display: inline-flex; width: 100%; order: -1; margin-bottom: 4px; }
  .cc-sheet-section.cc-mobile-only { display: grid; }
  .cc-status {
    position: fixed; top: calc(var(--safe-t) + 6px); left: 50%; z-index: 5; /* under an open sheet */
    max-width: calc(100vw - 24px); transform: translateX(-50%);
    border: 1px solid var(--line2); background: rgba(33, 37, 46, .96); box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  }
  .cc-status #statusText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cc-status-track { flex: none; width: 44px; }

  /* The board: as wide as the screen, or what is left after the bars, the
     controls and the sheet's peek. The sheet's resting edge is the bottom
     player bar, computed here so no script has to measure it. */
  .cc-app { --board-max: calc(var(--vh) - var(--safe-t) - 2 * var(--bar-h) - var(--ctl-base) - var(--panel-min)); }
  .cc-stage { --board-max: inherit; }
  .cc-app { --board-side: calc(min(100vw, var(--board-max) + var(--evalw)) - var(--evalw)); --sheet-top: calc(var(--safe-t) + 2 * var(--bar-h) + var(--board-side)); }
  .cc-playerbar, .cc-boardrow { flex: none; width: min(100%, calc(var(--board-max) + var(--evalw))); margin-inline: auto; }
  .cc-playerbar { padding: 0 10px 0 calc(var(--evalw) + 2px); }
  .cc-board { box-shadow: none; }
  .cc-evalbar { border-radius: 3px; }
  .cc-evalbar span { font-size: 8.5px; }

  /* The sheet. Closed, it rests under the board and does not scroll (a
     swipe on it opens it instead); open, it covers the board and scrolls. */
  .cc-panel {
    position: absolute; left: 0; right: 0; top: var(--sheet-top); bottom: var(--ctl-h); z-index: 6;
    border-left: 0; border-top: 1px solid var(--line2); border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .35);
    transition: top .32s cubic-bezier(.2, .8, .2, 1), border-radius .32s;
  }
  .cc-app.is-open .cc-panel { top: var(--safe-t); border-radius: 0; }
  .cc-app.is-dragging .cc-panel { transition: none; }
  .cc-app:not(.is-open) .cc-scroll { overflow: hidden; }
  .cc-app:not(.is-open) .cc-panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(transparent, var(--panel)); pointer-events: none; }
  .cc-panel-tabs { position: relative; padding: 6px 6px 0; border-bottom: 1px solid var(--line); }
  /* The grabber lies over the strip's top padding rather than taking a row. */
  .cc-grab { position: absolute; top: 0; left: 50%; z-index: 1; display: block; width: 90px; height: 16px; padding: 0; border: 0; background: transparent; transform: translateX(-50%); }
  .cc-grab::before { content: ""; display: block; width: 40px; height: 5px; margin: 4px auto 0; border-radius: 3px; background: var(--line2); }
  /* Icon tabs, the way a phone app's tab bar reads, with settings on the end. */
  .cc-tabs { display: flex; gap: 0; padding: 0; border-radius: 0; background: transparent; }
  .cc-tabs button[data-tab] { position: relative; flex: 1 1 0; flex-direction: column; gap: 3px; height: 52px; min-width: 0; padding: 4px 2px 0; border-radius: 10px; overflow: visible; color: var(--dim); font-size: 10.5px; font-weight: 600; }
  .cc-tabs button[aria-selected="true"] { color: var(--accent); background: transparent; box-shadow: none; }
  .cc-tab-ic { display: block; width: 22px; height: 22px; }
  .cc-tabs .cc-pill { position: absolute; top: 3px; left: calc(50% + 5px); min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
  .cc-tabs .cc-tab-settings { display: grid; place-items: center; flex: none; width: 44px; height: 52px; padding: 0; border: 0; border-radius: 10px; color: var(--dim); background: transparent; }
  .cc-tab-settings svg { width: 20px; height: 20px; }

  /* Inside the sheet: the coach's words first. The avatar column and the
     game header (the Report has it) would spend the peek on decoration. */
  .cc-view { padding: 12px 12px 20px; gap: 10px; }
  #viewAnalysis .cc-gamehead-row { display: none; } /* in a drill the dots count and the bar holds the leave button */
  #drillNav #drillStop2 { display: grid; flex: none; width: 44px; }
  .cc-coach { grid-template-columns: minmax(0, 1fr); }
  .cc-coach-avatar { display: none; }
  .cc-bubble { border-top-left-radius: 14px; }
  .cc-bubble-head { flex-wrap: wrap; row-gap: 4px; }
  .cc-bubble-head b { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .cc-empty { padding: 18px 14px; }
  .cc-empty-art { width: 52px; height: 52px; font-size: 28px; }
  .cc-empty h2 { font-size: 17px; }
  .cc-moves { max-height: 220px; }
  .cc-report-actions { grid-template-columns: 1fr 1fr; }
  .cc-report-actions .cc-btn:first-child { grid-column: 1 / -1; }
  .cc-gamestools { flex-wrap: wrap; }
  .cc-ask { padding: 0; border-top: 0; background: transparent; }
  .cc-input, .cc-select, .cc-textarea { font-size: 16px; } /* under 16px iOS zooms in */
  .cc-chat-row .cc-input, .cc-chat-row .cc-btn { height: 42px; }

  /* The bottom bar: previous and next for the thumbs, the key-moment button
     growing between them and the best-move and flip buttons. In a variation
     "Back to game" takes the key-moment button's place. */
  .cc-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; height: var(--ctl-h); flex-wrap: nowrap; gap: 8px; min-height: 0; padding: 8px 12px calc(8px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--panel); }
  .cc-app:has(#drillNav:not([hidden])) { --ctl-h: calc(98px + var(--safe-b)); }
  /* With no game open there is no bar, and the sheet reaches the edge. */
  .cc-app:not(:has(.cc-controls:not([hidden]))) { --ctl-h: var(--safe-b); }
  .cc-controls .cc-navgroup { gap: 6px; }
  .cc-navbtn { flex: 1 1 48px; width: auto; min-width: 46px; height: 44px; border-radius: 11px; }
  #nextMoment, #backToGame { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; overflow: hidden; }
  .cc-controls:has(#backToGame:not([hidden])) #nextMoment { display: none; }
  .cc-navgroup-right { margin-left: 0; }
  .cc-controls .cc-btn, .cc-controls .cc-iconbtn { height: 44px; }
  .cc-controls .cc-iconbtn { width: 44px; }
  #drillNav { flex-wrap: wrap; row-gap: 6px; }
  .cc-drillprompt { flex: 1 1 100%; font-size: 13px; line-height: 1.3; text-align: center; }
  #drillNav .cc-navgroup-right { width: 100%; gap: 6px; }
  #drillNav .cc-btn { flex: 1 1 auto; height: 40px; padding: 0 8px; }

  /* Windows become sheets from the bottom edge. */
  .cc-modal { place-items: end center; padding: 0; }
  .cc-modal-card { width: 100%; max-height: calc(var(--vh) - 32px); padding: 16px 16px calc(16px + var(--safe-b)); border-bottom: 0; border-radius: 18px 18px 0 0; }
  .cc-modal-card.cc-modal-sm { width: 100%; }
  .cc-toast { right: 12px; bottom: calc(var(--ctl-h) + 12px); left: 12px; transform: none; white-space: normal; text-align: center; }
}

/* A landscape phone: the desktop shape with everything thinner. */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --top-h: 44px; --bar-h: 28px; --ctl-h: 40px; --stage-pad: 4px; --capsz: 14px; }
  .cc-main { grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); }
  .cc-top { padding: 0 8px 0 54px; gap: 8px; }
  .cc-top-right { gap: 8px; }
  .cc-helpbtn { display: none; }
  .__accessbox-chess-coach .__accessbox-nav { top: 1px; left: 6px; }
  .cc-stage { display: flex; flex-direction: column; align-items: center; padding: var(--stage-pad) 8px; }
  .cc-stagebox { display: contents; }
  .cc-playerbar, .cc-boardrow { width: min(100%, calc(var(--board-max) + var(--evalw))); }
  .cc-playerbar { font-size: 13px; }
  .cc-controls { width: 100%; flex-wrap: nowrap; gap: 6px; min-height: 0; padding-top: 4px; }
  .cc-navbtn { width: 36px; height: 34px; }
  #nextMoment, #backToGame { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .cc-controls:has(#backToGame:not([hidden])) #nextMoment { display: none; }
  .cc-drillprompt { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
  .cc-panel-tabs { padding: 6px 8px; }
  .cc-tabs button { height: 30px; padding: 0 3px; font-size: 12px; }
  .cc-view { padding: 10px; gap: 10px; }
  .cc-empty { padding: 16px 10px; }
  .cc-ask { padding: 6px 8px 8px; }
  .cc-modal-card { max-height: calc(var(--vh) - 16px); padding: 14px; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 720px) {
  /* A grid gives the panel its maximum before the board's column gets the
     rest, so on a 640px-wide phone the panel has to ask for less. */
  .cc-main { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); }
  #navFirst, #navLast { display: none; }
}

/* Where the controls row is narrow, two of its buttons change shape: the
   key-moment button loses a word and the best-move button becomes its star. */
@media (max-width: 479px) and (orientation: portrait), (orientation: landscape) and (max-height: 520px) {
  .cc-opt { display: none; }
  #playBest { width: 40px; padding: 0; }
  #playBest .cc-label { display: none; }
  #playBest .cc-compact-icon { display: block; }
}
@media (max-width: 479px) and (orientation: portrait) {
  #navFirst, #navLast { display: none; }
  .cc-controls { gap: 6px; padding-left: 10px; padding-right: 10px; }
  #playBest { width: 44px; }
}

/* Touch: a finger leaves :hover behind after the tap, so the hover looks are
   undone and a press is answered with a squeeze instead. */
@media (hover: none) {
  button { -webkit-tap-highlight-color: transparent; }
  .cc-btn:hover:not(:disabled) { transform: none; background: var(--raised2); border-color: var(--line2); }
  .cc-btn-primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
  .cc-btn-ghost:hover:not(:disabled) { background: transparent; }
  .cc-btn-line:hover:not(:disabled) { border-color: #5f9bff; background: rgba(95, 155, 255, .12); }
  .cc-btn[aria-pressed="true"]:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
  .cc-iconbtn:hover:not(.is-speaking), .cc-navbtn:hover { background: var(--raised2); }
  .cc-line:hover { background: transparent; border-color: transparent; }
  .cc-moves button.cc-mv:hover { background: transparent; }
  .cc-moves button.cc-mv.is-current:hover { background: var(--accent-soft); }
  .cc-varline button:hover { background: transparent; }
  .cc-varline button.is-current:hover { background: rgba(95, 155, 255, .25); }
  .cc-game:hover { border-color: var(--line); background: var(--raised); }
  .cc-game.is-current:hover { border-color: var(--accent); }
  .cc-game .cc-x { width: 34px; height: 34px; }
  .cc-moment:hover { border-color: var(--line2); }
  .cc-moment.is-current:hover { border-color: var(--accent); }
  .cc-board cg-board square.move-dest:hover { background: radial-gradient(rgba(20, 30, 40, .45) 22%, transparent 24%); }
  .cc-board cg-board square.oc.move-dest:hover { background: radial-gradient(transparent 0%, transparent 78%, rgba(20,30,40,.4) 80%); }
  .cc-btn:active:not(:disabled), .cc-navbtn:active, .cc-iconbtn:active, .cc-game:active, .cc-line:active { transform: scale(.96); transition: transform .06s; }
}