/* Chess Walkthrough
   A study-room palette: deep slate, a blue-grey board, and one amber for "your move". */

@font-face { font-family: "Bricolage"; src: url("fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/plex-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/plex-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/plex-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Dark (default). Every token has a real value here; the light blocks below only swap them. */
  --bg: #080c16;
  --surface: #10172a;
  --raised: #182139;
  --line: #26314d;
  --line-soft: #1b2440;
  --text: #eef2fb;
  --muted: #8d99b3;
  --amber: #f3b94d;
  --amber-ink: #1d1503;
  --accent: #2fd3a0;
  --accent-hi: #4fe2b5;
  --accent-d: #179a75;
  --accent-ink: #03140e;
  --accent-text: #5fe4bb;
  --accent-soft: rgba(47, 211, 160, 0.14);
  --grad: linear-gradient(135deg, #48e3b3 0%, #22c3a0 55%, #14a9a0 100%);
  --grad-text: linear-gradient(100deg, #5fe8bf 0%, #7cc8ff 60%, #a99bff 100%);
  --hover: #1e2843;
  --soft: #c4ccdd;
  --soft2: #a3aec6;
  --input-bg: #0b1122;
  --track: #1b2440;
  --pop-bg: #141c33;
  --pop-line: #313d5c;
  --sel-bg: rgba(47, 211, 160, 0.08);
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.25);
  --warn-bg: rgba(243, 185, 77, 0.09);
  --warn-line: rgba(243, 185, 77, 0.32);
  --err-bg: #2a1520;
  --evalfill: linear-gradient(90deg, #cfd9e8, #f5f8fc);
  --glow: rgba(47, 211, 160, 0.16);
  --glow2: rgba(108, 99, 255, 0.20);
  --glass: rgba(16, 23, 42, 0.66);
  --glass-line: rgba(160, 180, 230, 0.10);
  --glass-hi: rgba(255, 255, 255, 0.05);
  --dot: rgba(160, 180, 230, 0.07);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 50px -28px rgba(0, 0, 0, 0.8);
  --graph-bg: #0b1122; --graph-fill: #dbe4f3; --graph-mid: #3a4766;
  --coral: #ef6b5b;
  --mint: #54c9a0;
  --sq-light: #eeeed2;
  --sq-dark: #769656;
  --hl-l: #f5f682;
  --hl-d: #bbcb2b;
  --c-brilliant: #26c2a3;
  --c-great: #749bbf;
  --c-best: #81b64c;
  --c-excellent: #96bc4b;
  --c-good: #95b776;
  --c-book: #a88865;
  --c-inaccuracy: #f7c631;
  --c-mistake: #ffa459;
  --c-miss: #ff7769;
  --c-blunder: #fa412d;
  --green: #7fb243;
  --green-d: #5b8a2b;
  --r-card: 20px;
  --r-ctl: 12px;
  --display: "Bricolage", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Plex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
  --ev-good: #7ae0bd; --ev-bad: #ff9a8c; --ev-mid: #f6cf85; --played: #aab4ff;
  --bubble-bg: #182139; --bubble-text: #f2f5fc; --bubble-soft: #c4ccdd; --bubble-mute: #8d99b3; --bubble-line: #2a3654;
  --pill-bg: #26314d; --hbar-bg: #1b2440; --hbar-fill: #eef2fb;
}


* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 500px at 85% -10%, var(--glow), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.5 var(--body);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.hidden { display: none !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Header ---------- */
.top { max-width: 1120px; margin: 0 auto; padding: 22px 16px 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; }
.brand { display: flex; align-items: center; gap: 12px; }
.mark {
  width: 26px; height: 26px; border-radius: 6px; flex: none;
  background: conic-gradient(var(--sq-dark) 25%, var(--sq-light) 0 50%, var(--sq-dark) 0 75%, var(--sq-light) 0);
  box-shadow: 0 0 0 2px var(--accent);
}
h1 { font: 650 clamp(1.45rem, 4.2vw, 2rem)/1.1 var(--display); letter-spacing: -0.02em; margin: 0; }
.sub { margin: 8px 0 0; color: var(--muted); max-width: 52ch; }

main { max-width: 1120px; margin: 0 auto; padding: 14px 12px 28px; }
footer { max-width: 1120px; margin: 0 auto; padding: 0 16px 32px; color: var(--muted); font-size: 13px; }

/* ---------- Cards, controls ---------- */
.card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-card); padding: 14px; }
#analysis { margin-top: 14px; }

input, textarea {
  width: 100%; margin: 0 0 8px; padding: 12px 13px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  font: inherit;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { resize: vertical; font-size: 13px; }

button {
  background: var(--raised); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  padding: 10px 14px; min-height: 44px;
  font: 500 14.5px/1.2 var(--body); cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}
@media (hover: hover) { button:hover { border-color: var(--pop-line); background: var(--hover); } }
button:active { transform: translateY(1px); }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 650; box-shadow: 0 3px 0 var(--accent-d); }
@media (hover: hover) { button.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); } }
button.link { background: none; border: none; color: var(--accent-text); box-shadow: none; padding: 6px 2px; min-height: 0; text-decoration: underline; text-underline-offset: 3px; }

.row { display: flex; gap: 8px; align-items: center; }
.row.between { justify-content: space-between; }
.row > button { flex: 1; }
.hint { color: var(--muted); font-size: 13.5px; margin: 0 0 8px; }

/* ---------- Importer ---------- */
#importer > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: 600 1.05rem/1.2 var(--display); letter-spacing: -0.01em; padding: 2px;
}
#importer > summary::-webkit-details-marker { display: none; }
.chev { width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.2s; margin-right: 4px; }
#importer:not([open]) .chev { transform: rotate(-45deg); }
.importer-body { margin-top: 12px; }

.tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 4px; margin-bottom: 12px; background: var(--input-bg); border-radius: 12px; }
.tab { min-height: 38px; padding: 8px 4px; font-size: 14px; background: transparent; border-color: transparent; color: var(--muted); }
.tab.active { background: var(--raised); color: var(--text); border-color: var(--line); }
.quick { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; }

.game-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.game-list li { display: flex; gap: 6px; }
.game-list li > button:first-child { flex: 1; text-align: left; display: flex; justify-content: space-between; gap: 10px; background: var(--bg); }
.game-list .meta { color: var(--muted); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.game-list .del { flex: none; min-width: 44px; color: var(--coral); background: var(--bg); }
.auth { margin-bottom: 12px; }

/* ---------- Toast (status) ---------- */
.toast {
  position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top)); z-index: 50;
  transform: translateX(-50%); max-width: min(92vw, 520px);
  padding: 11px 16px; border-radius: 12px; font-size: 14px;
  background: var(--pop-bg); border: 1px solid var(--pop-line); color: var(--text);
  box-shadow: var(--shadow);
}
.toast:empty { display: none; }
.toast.err { border-color: var(--coral); background: var(--err-bg); }

/* ---------- Workspace layout ---------- */
#workspace { margin-top: 14px; }
.gameinfo { display: flex; justify-content: space-between; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 10px; }
#players { font: 600 1.1rem/1.25 var(--display); letter-spacing: -0.01em; }
#players span { color: var(--muted); font-weight: 400; font-family: var(--body); font-size: 0.9rem; }
.side-toggle { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; }
.chip { padding: 6px 12px; min-height: 34px; border-radius: 999px; font-size: 13.5px; }
.chip.active { background: var(--text); color: var(--surface); border-color: var(--text); font-weight: 600; }
.chip.save { margin-left: 4px; border-color: var(--accent); color: var(--accent-text); background: transparent; }

@media (min-width: 980px) {
  #workspace { display: grid; grid-template-columns: minmax(0, 580px) minmax(0, 1fr); gap: 20px; align-items: start; }
  .stage { position: sticky; top: 10px; }
  #analysis { margin-top: 0; }
  .side { display: grid; gap: 14px; }
}

/* ---------- Board ---------- */
.board-wrap { position: relative; width: min(100%, 580px, calc(100dvh - 300px)); min-width: 280px; margin: 0 auto; aspect-ratio: 1; }
.board { container-type: inline-size; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: 100%; height: 100%; border-radius: 10px; overflow: hidden; user-select: none; -webkit-user-select: none; box-shadow: 0 0 0 1px var(--line); }
.sq { position: relative; }
.sq.l { background: var(--sq-light); }
.sq.d { background: var(--sq-dark); }
.sq.hl.l { background: var(--hl-l); }
.sq.hl.d { background: var(--hl-d); }
.sq.hl-brilliant.l { background: #8fe0cf; } .sq.hl-brilliant.d { background: #3fb7a3; }
.sq.hl-great.l { background: #b3cdea; } .sq.hl-great.d { background: #7aa5d4; }
.sq.hl-best.l, .sq.hl-excellent.l { background: #c3e48e; } .sq.hl-best.d, .sq.hl-excellent.d { background: #8fc23d; }
.sq.hl-good.l { background: #d6e5b8; } .sq.hl-good.d { background: #a9c27a; }
.sq.hl-book.l { background: #ead7b4; } .sq.hl-book.d { background: #c9a66f; }
.sq.hl-inaccuracy.l { background: #f8e48f; } .sq.hl-inaccuracy.d { background: #e3bf3f; }
.sq.hl-mistake.l { background: #f9d3a6; } .sq.hl-mistake.d { background: #e9a24c; }
.sq.hl-miss.l { background: #f7b9a8; } .sq.hl-miss.d { background: #e8836a; }
.sq.hl-blunder.l { background: #f5aaa5; } .sq.hl-blunder.d { background: #dd6b66; }
.sq.pick.l { background: #f6e36a; }
.sq.pick.d { background: #d9b92c; }
.sq.dot::before { content: ""; position: absolute; left: 36%; top: 36%; width: 28%; height: 28%; border-radius: 50%; background: rgba(12, 18, 28, 0.32); z-index: 2; }
.sq.live-click { cursor: pointer; touch-action: none; }
.pc { position: absolute; inset: 3%; z-index: 1; background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; }
.coord { position: absolute; font: 600 10px/1 var(--body); z-index: 3; pointer-events: none; }
.coord.f { right: 4px; bottom: 3px; }
.coord.r { left: 4px; top: 3px; }
.sq.l .coord { color: var(--sq-dark); }
.sq.d .coord { color: var(--sq-light); }
.arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }

.controls { display: flex; gap: 6px; margin: 12px auto 0; max-width: 580px; }
.controls button { flex: none; min-width: 46px; padding: 8px; display: inline-flex; align-items: center; justify-content: center; }
.controls .primary { flex: 1; padding-inline: 12px; }
.controls svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.live { display: flex; gap: 6px; max-width: 580px; margin: 10px auto 0; }
.live input { margin: 0; flex: 1; }

.movelist { max-width: 580px; margin: 12px auto 0; max-height: 132px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 3px; padding: 8px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; }
.mv { padding: 3px 8px; border-radius: 7px; font-size: 13.5px; cursor: pointer; border: 1px solid transparent; font-variant-numeric: tabular-nums; }
.mv .n { color: var(--muted); margin-right: 4px; }
.mv.opp { color: var(--text); font-weight: 600; }
.mv.me { color: var(--muted); }
.flag { margin-left: 3px; font-weight: 700; }
.f-brilliant { color: var(--c-brilliant); }
.f-great { color: var(--c-great); }
.f-inaccuracy { color: var(--c-inaccuracy); }
.f-mistake { color: var(--c-mistake); }
.f-miss { color: var(--c-miss); }
.f-blunder { color: var(--c-blunder); }
.mv.cur { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
@media (hover: hover) { .mv:hover { background: var(--raised); } }

/* ---------- Analysis ---------- */
#analysis-head h2 { font: 650 1.25rem/1.2 var(--display); letter-spacing: -0.015em; margin: 2px 0 4px; }
#analysis-head p { margin: 0 0 10px; color: var(--muted); font-size: 14px; max-width: 60ch; }
#reset-board { margin: -2px 0 8px; }

.evalbar { height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; margin: 10px 0 8px; border: 1px solid var(--line); }
.evalbar > div { height: 100%; background: var(--evalfill); transition: width 0.3s; }
.note { padding: 11px 13px; border-radius: 12px; background: var(--raised); font-size: 14px; margin-bottom: 10px; color: var(--soft); }
.note b { color: var(--text); font-weight: 600; }
.spinner { color: var(--muted); font-size: 14px; padding: 8px 2px; }
.spinner::before { content: ""; display: inline-block; width: 12px; height: 12px; border: 2px solid var(--muted); border-right-color: transparent; border-radius: 50%; margin-right: 9px; vertical-align: -2px; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul ul, .node > ul { margin: 6px 0 0 10px; padding-left: 12px; border-left: 2px solid var(--line); }
.node { margin: 8px 0; }
.node-row { background: var(--raised); border: 1px solid var(--line-soft); border-left: 4px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.node-row[data-rank="1"] { border-left-color: var(--accent); }
@media (hover: hover) { .node-row:hover { background: var(--hover); } }
.node-row.sel { border-color: var(--accent); background: var(--sel-bg); }
.node-row.played { box-shadow: inset 0 0 0 1px var(--played); }
.node-top { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.rank { width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--text); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.node-row[data-rank="1"] .rank { background: var(--accent); color: var(--accent-ink); }
.who { font-size: 12.5px; color: var(--muted); }
.san { font: 650 1.1rem/1.1 var(--display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.eval { padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--line); font-variant-numeric: tabular-nums; }
.eval.good { background: rgba(84, 201, 160, 0.18); color: var(--ev-good); }
.eval.bad { background: rgba(239, 107, 91, 0.2); color: var(--ev-bad); }
.eval.mid { background: rgba(243, 185, 77, 0.16); color: var(--ev-mid); }
.verdict { color: var(--muted); font-size: 13px; }
.gauge { position: relative; height: 4px; margin-top: 9px; border-radius: 2px; background: var(--line-soft); }
.gauge::after { content: ""; position: absolute; left: 50%; top: -2px; width: 1px; height: 8px; background: #4a5f84; }
.gauge span { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.gauge .pos { background: var(--mint); }
.gauge .neg { background: var(--coral); }
.tags { margin-top: 8px; display: flex; gap: 5px; flex-wrap: wrap; }
.tag { font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.pvline { margin-top: 8px; color: var(--soft2); font-size: 13.5px; font-variant-numeric: tabular-nums; word-break: break-word; }
.expand { margin-top: 7px; font-size: 13px; color: var(--accent-text); }
.played-badge { font-size: 12px; color: var(--played); border: 1px solid var(--played); padding: 0 8px; border-radius: 999px; }

@media (max-width: 480px) {
  .controls { flex-wrap: wrap; }
  .controls button:not(.primary) { flex: 1; }
  .controls .primary { order: 10; flex: 1 1 100%; }
}
@media (max-width: 420px) {
  .tab { font-size: 13px; }
  .side-toggle > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation-duration: 0.01ms !important; }
}

/* ---------- Compact header while a game is open ---------- */
body.in-game .top { padding-top: 12px; padding-bottom: 0; }
body.in-game h1 { font-size: 1.2rem; }
body.in-game .mark { width: 20px; height: 20px; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 32px; align-items: center; padding: 28px 8px 20px; }
.hero h2 { font: 650 clamp(1.9rem, 5.5vw, 3rem)/1.05 var(--display); letter-spacing: -0.03em; margin: 0 0 14px; max-width: 16ch; }
.hero p { color: var(--muted); font-size: 1.05rem; max-width: 46ch; margin: 0 0 22px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
button.big { min-height: 50px; padding: 12px 22px; font-size: 16px; font-weight: 600; }
.hero-preview .board-wrap { width: 100%; min-width: 0; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding-top: 14px; }
  .hero-preview { display: none; }
  .hero-actions button { flex: 1 1 100%; }
}

/* ---------- Live mode ---------- */
.live-mode #next-opp { display: none; }
.movelist:empty { display: none; }
.live-hint { max-width: 580px; margin: 10px auto 0; }

/* ---------- Graph ---------- */
.graph-wrap { max-width: 580px; margin: 12px auto 0; }
.graph { display: block; width: 100%; height: 72px; border-radius: 10px; cursor: pointer; border: 1px solid var(--line); }
.graph-wrap .hint { margin: 6px 2px 0; font-size: 12.5px; }

/* ---------- Review ---------- */
.review h2 { font: 650 1.25rem/1.2 var(--display); letter-spacing: -0.015em; margin: 2px 0 10px; }
.review h3 { font: 600 0.95rem/1.2 var(--display); margin: 14px 0 8px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { background: var(--raised); border-radius: 12px; padding: 10px 12px; border: 1px solid var(--line-soft); }
.stat.me { border-color: var(--accent); }
.stat-name { color: var(--muted); font-size: 13px; }
.stat-num { font: 650 2rem/1.1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-sub { color: var(--muted); font-size: 12.5px; }
.stat-counts { margin-top: 6px; font-size: 12.5px; color: var(--soft); }
.moments { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.moments button { width: 100%; text-align: left; display: grid; gap: 3px; background: var(--raised); }
.moment-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.moment-move { font: 650 1.05rem/1.1 var(--display); }
.flag-pill { font-size: 12px; padding: 1px 9px; border-radius: 999px; border: 1px solid currentColor; }
.moment-detail { color: var(--muted); font-size: 13.5px; }
.progress { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); transition: width 0.2s; }

/* ---------- Explanations ---------- */
.why { margin-top: 8px; font-size: 13.5px; color: var(--soft); }
.note.warn { background: var(--warn-bg); border: 1px solid var(--warn-line); }
.node-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Phone: board stays visible while you read ---------- */
@media (max-width: 979px) {
  .stage { display: contents; }
  .board-dock { position: sticky; top: 0; z-index: 20; background: var(--bg); padding: 6px 0; margin: 0 -12px; }
  .board-dock .board-wrap { width: min(100%, 40dvh); min-width: 0; }
  .gameinfo, .controls, .live, .movelist, .graph-wrap, .live-hint { margin-left: auto; margin-right: auto; width: 100%; }
  .side { margin-top: 14px; display: grid; gap: 14px; }
}

/* ---------- Board themes ---------- */
body[data-board="slate"] { --sq-light: #d9e2ee; --sq-dark: #6d88ad; --hl-l: #f5df9a; --hl-d: #d8b255; }
body[data-board="walnut"] { --sq-light: #f0d9b5; --sq-dark: #b58863; --hl-l: #cdd26a; --hl-d: #aaa23a; }

/* ---------- Settings ---------- */
.icon-btn { flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.settings { position: absolute; right: 12px; top: calc(100% - 2px); z-index: 60; min-width: 270px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); display: grid; gap: 12px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 14px; }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--input-bg); border-radius: 10px; }
.seg button { min-height: 32px; padding: 4px 11px; border-color: transparent; background: transparent; color: var(--muted); font-size: 13.5px; }
.seg button.on { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.18); color: var(--text); border-color: var(--line); }

/* ---------- Badges on the board and in lists ---------- */
.badge { position: absolute; top: 2%; right: 2%; width: 38%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; z-index: 3; font: 800 3cqw/1 var(--body); color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); pointer-events: none; }
.badge-lg, .lchip { width: 28px; height: 28px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font: 800 13px/1 var(--body); color: #fff; }
.lchip { width: 22px; height: 22px; font-size: 11px; }
.badge-lg.hidden { display: none; }
.mini { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font: 800 9px/1 var(--body); color: #fff; margin-right: 4px; }
.b-brilliant { background: var(--c-brilliant); } .b-great { background: var(--c-great); } .b-best { background: var(--c-best); }
.b-excellent { background: var(--c-excellent); } .b-good { background: var(--c-good); } .b-book { background: var(--c-book); }
.b-inaccuracy { background: var(--c-inaccuracy); color: #3a2c00; } .b-mistake { background: var(--c-mistake); color: #3b1d00; }
.b-miss { background: var(--c-miss); } .b-blunder { background: var(--c-blunder); }

/* ---------- Evaluation bar ---------- */
.hbar { position: relative; height: 26px; margin: 0 auto 8px; width: min(100%, 580px); background: var(--hbar-bg); border-radius: 7px; overflow: hidden; }
.hbar-fill { height: 100%; background: var(--hbar-fill); transition: width 0.3s; }
.hbar-num { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font: 700 13px/1 var(--body); color: #262421; font-variant-numeric: tabular-nums; }
.hbar-num.on-dark { color: #fff; }

/* ---------- Coach ---------- */
.coach-row { display: flex; gap: 12px; align-items: flex-start; }
.coach-avatar { flex: none; width: 56px; height: 56px; color: var(--amber); }
.coach-avatar svg { width: 100%; height: 100%; }
.coach-row.small .coach-avatar { width: 44px; height: 44px; }
.bubble { position: relative; flex: 1; min-width: 0; background: var(--bubble-bg); color: var(--bubble-text); border-radius: 14px; border: 1px solid var(--bubble-line); padding: 12px 14px; }
.bubble::before { content: ""; position: absolute; left: -7px; top: 20px; border: 8px solid transparent; border-right-color: var(--bubble-bg); border-left: 0; }
.bubble p { margin: 0; color: var(--bubble-soft); font-size: 15px; }
.bubble-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.bubble-top h2 { flex: 1; min-width: 0; margin: 0; font: 700 1.05rem/1.2 var(--body); color: var(--bubble-text); }
.eval-pill { flex: none; background: var(--pill-bg); color: #fff; border-radius: 8px; padding: 3px 9px; font: 700 13.5px/1.3 var(--body); font-variant-numeric: tabular-nums; }
.opening-name { margin-top: 6px !important; font-size: 13px !important; color: var(--bubble-mute) !important; }
.coach-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }

/* ---------- Review actions and move strip ---------- */
.rv-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.7fr); gap: 8px; max-width: 580px; margin: 12px auto 0; }
.rv-actions button { min-height: 58px; flex-direction: column; display: inline-flex; gap: 3px; align-items: center; justify-content: center; background: transparent; border-color: transparent; color: var(--muted); font-size: 13.5px; }
.rv-actions button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rv-actions button.on { color: var(--text); background: var(--raised); border-color: var(--line); }
.rv-actions button:disabled { opacity: 0.35; }
.rv-actions .primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 4px 0 var(--accent-d); font-size: 1.15rem; font-weight: 700; }
.rv-actions .primary:disabled { opacity: 0.5; }
.strip-wrap { display: flex; align-items: center; gap: 4px; max-width: 580px; margin: 8px auto 0; }
.strip-wrap > button { flex: none; width: 40px; min-width: 40px; padding: 6px; background: transparent; border-color: transparent; }
.strip-wrap svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.strip { flex: 1; min-width: 0; display: flex; gap: 2px; overflow: hidden; justify-content: center; }
.chip-mv { min-height: 36px; padding: 4px 8px; background: transparent; border-color: transparent; color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; white-space: nowrap; border-radius: 8px; }
.chip-mv .n { margin-right: 4px; font-size: 13px; }
.chip-mv.cur { color: var(--text); background: var(--raised); border-color: var(--line); font-weight: 600; }
.reviewing #analysis, .reviewing .controls, .reviewing #movelist { display: none; }
.ghost { z-index: 99; }

/* ---------- Review summary ---------- */
.rtable { margin-top: 14px; }
.rrow { display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line-soft); text-align: center; font-variant-numeric: tabular-nums; }
.rrow .rl, .rrow .rr { font-weight: 700; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow .rm { color: var(--muted); font-size: 14px; }
.rhead { border-top: 0; }
.rhead .rl, .rhead .rr { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.big .rl, .big .rr { border-radius: 9px; padding: 8px 4px; font: 700 1.5rem/1.1 var(--display); letter-spacing: -0.01em; }
.big .rl { background: var(--text); color: var(--surface); }
.big .rr { background: var(--raised); }
.lmid { display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.lname { color: var(--muted); font-size: 14px; }
.lrow.zero { opacity: 0.4; }
.c-brilliant .rl, .c-brilliant .rr { color: var(--c-brilliant); } .c-great .rl, .c-great .rr { color: var(--c-great); }
.c-best .rl, .c-best .rr { color: var(--c-best); } .c-excellent .rl, .c-excellent .rr { color: var(--c-excellent); }
.c-good .rl, .c-good .rr { color: var(--c-good); } .c-book .rl, .c-book .rr { color: var(--c-book); }
.c-inaccuracy .rl, .c-inaccuracy .rr { color: var(--c-inaccuracy); } .c-mistake .rl, .c-mistake .rr { color: var(--c-mistake); }
.c-miss .rl, .c-miss .rr { color: var(--c-miss); } .c-blunder .rl, .c-blunder .rr { color: var(--c-blunder); }
.prow .rl, .prow .rr { font-size: 1.05rem; }
.cta { display: block; width: 100%; min-height: 54px; margin-top: 18px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font: 700 1.15rem/1 var(--body); box-shadow: 0 4px 0 var(--accent-d); }
@media (hover: hover) { .cta:hover { background: var(--accent-hi); border: 0; } }
.cta:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--accent-d); }
@media (max-width: 979px) {
  .hbar { width: 100%; margin-bottom: 4px; height: 22px; }
  .coach-avatar { width: 44px; height: 44px; }
}
@media (hover: hover) { .rv-actions .primary:hover:not(:disabled) { background: var(--accent-hi); border-color: var(--accent-hi); } .rv-actions button:hover:not(.primary):not(:disabled) { background: var(--raised); border-color: var(--line); } }

.coach-links { max-width: 580px; margin: 6px auto 0; display: flex; justify-content: space-between; gap: 12px; padding: 0 4px; }
@media (max-width: 979px) {
  .board-dock .coach { background: transparent; border: 0; padding: 0 0 6px; }
  .board-dock .coach .bubble { padding: 9px 12px; }
  .board-dock .coach .bubble p { font-size: 14px; }
  .board-dock .coach .bubble-top { margin-bottom: 3px; }
  .board-dock .coach .bubble-top h2 { font-size: 1rem; }
  .board-dock .coach-avatar { width: 38px; height: 38px; }
  .board-dock .badge-lg { width: 24px; height: 24px; font-size: 11px; }
  body.rv .board-dock .board-wrap { width: min(100%, 35dvh); }
}
@media (min-width: 980px) { .reviewing #movelist { display: flex; } }

.coach-text p { margin: 0 0 6px; }
.coach-text p:first-child { font-weight: 600; color: var(--bubble-text); }
.coach-text p:last-child { margin-bottom: 0; }
.coach-avatar svg { display: block; width: 100%; height: 100%; fill: none; stroke: none; }
.coach-avatar { width: 72px; height: 72px; }
.coach-row.small .coach-avatar { width: 64px; height: 64px; }
.coach-avatar.pop { animation: pop 0.28s ease-out; }
@keyframes pop { 0% { transform: scale(0.88) rotate(-4deg); } 60% { transform: scale(1.06); } 100% { transform: none; } }
.bubble p + p { margin-top: 6px; }
@media (max-width: 979px) {
  .board-dock .coach-avatar { width: 52px; height: 52px; }
  .board-dock .coach .coach-text p { font-size: 13.5px; margin-bottom: 3px; }
}
@media (prefers-reduced-motion: reduce) { .coach-avatar.pop { animation: none; } }


/* ======================================================================
   Appearance: light and dark. Dark is the base; auto follows the system.
   ====================================================================== */
:root[data-mode="light"] {
  --bg: #f4f6fb; --surface: #ffffff; --raised: #f1f4fa; --line: #d9e0ec; --line-soft: #e7ecf4;
  --text: #0e1630; --muted: #5a6681;
  --accent: #0c9a72; --accent-hi: #0aa97c; --accent-d: #077a5a; --accent-ink: #ffffff; --accent-text: #077d5d; --accent-soft: rgba(12, 154, 114, 0.11);
  --grad: linear-gradient(135deg, #12b386 0%, #0c9a7c 55%, #0b8a8f 100%);
  --grad-text: linear-gradient(100deg, #0c9a72 0%, #2f7fd6 60%, #6b55e0 100%);
  --hover: #e9eef7; --soft: #2f3b57; --soft2: #4a5774; --input-bg: #f6f8fc; --track: #e2e8f1;
  --pop-bg: #ffffff; --pop-line: #d0d8e6; --sel-bg: rgba(12, 154, 114, 0.06);
  --shadow: 0 24px 50px -24px rgba(25, 40, 80, 0.28), 0 2px 6px rgba(25, 40, 80, 0.06);
  --card-shadow: 0 1px 2px rgba(25, 40, 80, 0.05), 0 12px 32px -18px rgba(25, 40, 80, 0.22);
  --warn-bg: #fff6e2; --warn-line: #ecc77c; --err-bg: #fdeaec;
  --evalfill: linear-gradient(90deg, #c4cfe0, #e9eef6);
  --glow: rgba(18, 179, 134, 0.13); --glow2: rgba(108, 99, 255, 0.11);
  --glass: rgba(255, 255, 255, 0.78); --glass-line: rgba(20, 40, 90, 0.08); --glass-hi: rgba(255, 255, 255, 0.9);
  --dot: rgba(20, 40, 90, 0.06);
  --graph-bg: #232c47; --graph-fill: #ffffff; --graph-mid: #6c7a98;
  --bubble-bg: #ffffff; --bubble-text: #0e1630; --bubble-soft: #2f3b57; --bubble-mute: #5a6681; --bubble-line: #dfe5ef;
  --pill-bg: #1d2742; --hbar-bg: #1d2742; --hbar-fill: #f4f6fb;
  --c-good: #7ea35c; --c-book: #94744f; --c-inaccuracy: #e0a912; --c-excellent: #7fa23a;
  color-scheme: light;
  --ev-good: #1d7a57; --ev-bad: #b6372a; --ev-mid: #8a5d00; --played: #4b5bd0;
}
@media (prefers-color-scheme: light) {
  :root[data-mode="auto"] {
  --bg: #f4f6fb; --surface: #ffffff; --raised: #f1f4fa; --line: #d9e0ec; --line-soft: #e7ecf4;
  --text: #0e1630; --muted: #5a6681;
  --accent: #0c9a72; --accent-hi: #0aa97c; --accent-d: #077a5a; --accent-ink: #ffffff; --accent-text: #077d5d; --accent-soft: rgba(12, 154, 114, 0.11);
  --grad: linear-gradient(135deg, #12b386 0%, #0c9a7c 55%, #0b8a8f 100%);
  --grad-text: linear-gradient(100deg, #0c9a72 0%, #2f7fd6 60%, #6b55e0 100%);
  --hover: #e9eef7; --soft: #2f3b57; --soft2: #4a5774; --input-bg: #f6f8fc; --track: #e2e8f1;
  --pop-bg: #ffffff; --pop-line: #d0d8e6; --sel-bg: rgba(12, 154, 114, 0.06);
  --shadow: 0 24px 50px -24px rgba(25, 40, 80, 0.28), 0 2px 6px rgba(25, 40, 80, 0.06);
  --card-shadow: 0 1px 2px rgba(25, 40, 80, 0.05), 0 12px 32px -18px rgba(25, 40, 80, 0.22);
  --warn-bg: #fff6e2; --warn-line: #ecc77c; --err-bg: #fdeaec;
  --evalfill: linear-gradient(90deg, #c4cfe0, #e9eef6);
  --glow: rgba(18, 179, 134, 0.13); --glow2: rgba(108, 99, 255, 0.11);
  --glass: rgba(255, 255, 255, 0.78); --glass-line: rgba(20, 40, 90, 0.08); --glass-hi: rgba(255, 255, 255, 0.9);
  --dot: rgba(20, 40, 90, 0.06);
  --graph-bg: #232c47; --graph-fill: #ffffff; --graph-mid: #6c7a98;
  --bubble-bg: #ffffff; --bubble-text: #0e1630; --bubble-soft: #2f3b57; --bubble-mute: #5a6681; --bubble-line: #dfe5ef;
  --pill-bg: #1d2742; --hbar-bg: #1d2742; --hbar-fill: #f4f6fb;
  --c-good: #7ea35c; --c-book: #94744f; --c-inaccuracy: #e0a912; --c-excellent: #7fa23a;
  color-scheme: light;
  --ev-good: #1d7a57; --ev-bad: #b6372a; --ev-mid: #8a5d00; --played: #4b5bd0;
  }
}

/* ---------- Refinements ---------- */
html { scroll-behavior: smooth; }
body { transition: background-color .2s, color .2s; }
.card { box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -12px rgba(0,0,0,.35); }
:root[data-mode="light"] .card, :root[data-mode="light"] .movelist { box-shadow: 0 1px 2px rgba(30,50,90,.06), 0 8px 24px -14px rgba(30,50,90,.18); }
@media (prefers-color-scheme: light) { :root[data-mode="auto"] .card, :root[data-mode="auto"] .movelist { box-shadow: 0 1px 2px rgba(30,50,90,.06), 0 8px 24px -14px rgba(30,50,90,.18); } }
button { box-shadow: 0 1px 0 rgba(0,0,0,.12); }
button.link, .tab, .chip-mv, .strip-wrap > button, .rv-actions button:not(.primary), .seg button, .icon-btn, .game-list .del { box-shadow: none; }
button.primary:active, .cta:active { box-shadow: 0 0 0 var(--accent-d); transform: translateY(3px); }
.icon-btn { background: transparent; border-color: transparent; color: var(--muted); }
@media (hover: hover) { .icon-btn:hover { background: var(--raised); color: var(--text); } }
.tab.active { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.hero h2 { max-width: 15ch; }
.hero-preview { padding: 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--shadow); }
.hero-preview .board { border-radius: 12px; }
.hero-actions .primary { box-shadow: 0 4px 0 var(--accent-d); }
.toast { box-shadow: var(--shadow); }
.help-link { justify-self: start; padding-left: 0; }

/* ---------- Key moments ---------- */
.moments-card { padding: 12px; }
.mc-head h2 { font: 650 1.1rem/1.2 var(--display); letter-spacing: -.01em; margin: 0; }
.mc-nav { display: flex; gap: 6px; }
.mc-nav button { width: 40px; min-width: 40px; min-height: 40px; padding: 0; display: inline-grid; place-items: center; }
.mc-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.km-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; max-height: 280px; overflow-y: auto; }
.km { width: 100%; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; text-align: left; background: transparent; border-color: transparent; padding: 6px 8px; min-height: 40px; box-shadow: none; }
.km.cur { background: var(--accent-soft); border-color: var(--accent); }
.km-move { font: 650 1rem/1 var(--display); font-variant-numeric: tabular-nums; }
.km-who { color: var(--muted); font-size: 13px; text-align: right; }
.km-hint { margin: 10px 0 0; font-size: 12.5px; }
@media (max-width: 979px) { .moments-card { display: none; } .km-hint { display: none; } }

/* ---------- Help sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(6, 10, 18, .6); backdrop-filter: blur(4px); }
.sheet-card { width: min(520px, 100%); max-height: 86dvh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px 20px; box-shadow: var(--shadow); }
.sheet-card h2 { font: 650 1.25rem/1.2 var(--display); margin: 0; letter-spacing: -.015em; }
.sheet-card h3 { font: 650 .95rem/1.2 var(--display); margin: 16px 0 4px; }
.sheet-card p { margin: 0; color: var(--soft); font-size: 14.5px; }
.sheet-card .icon-btn svg { fill: none; }

/* ---------- Light-mode fixes ---------- */
.stat { background: var(--raised); }
.quick .link { padding-left: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .sheet { backdrop-filter: none; } }

/* ======================================================================
   Modern layer
   Ink-navy ground with soft colour glows, frosted cards, an emerald
   gradient accent and a sage board. Everything below only restyles.
   ====================================================================== */

/* ---------- Boards: Modern is the default, Green keeps the classic look ---------- */
:root { --sq-light: #e6eee8; --sq-dark: #74a08f; --hl-l: #f3eb98; --hl-d: #c8c160; }
body[data-board="green"] { --sq-light: #eeeed2; --sq-dark: #769656; --hl-l: #f5f682; --hl-d: #bbcb2b; }

/* ---------- Ground ---------- */
body {
  background:
    radial-gradient(900px 520px at 88% -8%, var(--glow), transparent 62%),
    radial-gradient(760px 480px at -6% 4%, var(--glow2), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}
::selection { background: var(--accent-soft); }

/* ---------- Header ---------- */
.top { padding-top: 20px; }
.mark {
  width: 30px; height: 30px; border-radius: 9px;
  background:
    conic-gradient(var(--sq-dark) 25%, var(--sq-light) 0 50%, var(--sq-dark) 0 75%, var(--sq-light) 0) 0 0 / 50% 50%;
  box-shadow: 0 0 0 1px var(--glass-line), 0 6px 18px -6px var(--accent);
  position: relative; overflow: hidden;
}
.mark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.35), transparent 55%); }
h1 { font-size: clamp(1.2rem, 3.2vw, 1.45rem); font-weight: 700; letter-spacing: -0.025em; }
body.in-game h1 { font-size: 1.15rem; }
.icon-btn { border: 1px solid var(--glass-line); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
@media (hover: hover) { .icon-btn:hover { background: var(--raised); color: var(--text); border-color: var(--pop-line); } }
.icon-btn[aria-expanded="true"] { color: var(--accent-text); border-color: var(--accent); }

/* ---------- Cards: frosted glass ---------- */
.card, .movelist, .settings, .sheet-card, .toast {
  background: linear-gradient(180deg, var(--glass-hi), transparent 120px), var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.card { border-radius: var(--r-card); padding: 18px; box-shadow: var(--card-shadow); }
:root[data-mode="light"] .card, :root[data-mode="light"] .movelist { box-shadow: var(--card-shadow); }
@media (prefers-color-scheme: light) { :root[data-mode="auto"] .card, :root[data-mode="auto"] .movelist { box-shadow: var(--card-shadow); } }
.settings { border-radius: 18px; padding: 14px; box-shadow: var(--shadow); }
.toast { border-radius: 14px; box-shadow: var(--shadow); font-weight: 500; }
.toast.err { border-color: rgba(239, 107, 91, .5); background: var(--err-bg); }

/* ---------- Buttons ---------- */
button {
  border-radius: var(--r-ctl); border-color: var(--glass-line);
  background: var(--raised); box-shadow: none;
  transition: background-color .15s, border-color .15s, color .15s, transform .12s, box-shadow .2s, filter .15s;
}
@media (hover: hover) { button:hover { background: var(--hover); border-color: var(--pop-line); } }
button:active { transform: scale(0.98); }
button.primary, .rv-actions .primary, .cta, .hero-actions .primary {
  background: var(--grad); color: var(--accent-ink); border: 1px solid transparent;
  font-weight: 650;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 10px 24px -10px var(--accent), 0 2px 4px -1px rgba(0,0,0,.2);
}
@media (hover: hover) {
  button.primary:hover, .rv-actions .primary:hover:not(:disabled), .cta:hover {
    background: var(--grad); border-color: transparent; filter: brightness(1.07) saturate(1.05);
    box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 14px 30px -10px var(--accent), 0 2px 4px -1px rgba(0,0,0,.2);
  }
}
button.primary:active, .rv-actions .primary:active, .cta:active {
  transform: scale(0.98); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 6px 14px -8px var(--accent);
}
button:disabled { cursor: default; }
button.link { color: var(--accent-text); text-decoration: none; font-weight: 600; border-radius: 6px; }
button.link::after { content: " \2192"; transition: margin .15s; }
@media (hover: hover) { button.link:hover { background: none; text-decoration: underline; text-underline-offset: 4px; } }
#auth-logout::after, .help-link::after { content: none; }
button.big { min-height: 52px; padding: 14px 24px; border-radius: 14px; font-size: 15.5px; }
.hero-actions button:not(.primary) { background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ---------- Inputs ---------- */
input, textarea { border-radius: var(--r-ctl); background: var(--input-bg); border-color: var(--line-soft); transition: border-color .15s, box-shadow .15s; }
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- Hero ---------- */
.hero { padding: 44px 8px 34px; gap: 56px; }
@media (min-width: 761px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); } }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 12px 6px 8px;
  border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass);
  color: var(--soft); font-size: 13px; font-weight: 500;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.eyebrow .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px transparent; } }
.hero h2 { font-size: clamp(2.2rem, 5.6vw, 3.7rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 700; max-width: 14ch; margin-bottom: 18px; }
.hero h2 em {
  font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { font-size: 1.08rem; line-height: 1.6; color: var(--muted); }
.hero-actions { gap: 12px; }
.features { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--muted); font-size: 13.5px; }
.features li { display: inline-flex; align-items: center; gap: 8px; }
.features svg { width: 17px; height: 17px; fill: none; stroke: var(--accent-text); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.hero-preview {
  position: relative; padding: 14px; border-radius: 26px;
  background: linear-gradient(180deg, var(--glass-hi), transparent), var(--glass);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transform: perspective(1400px) rotateY(-9deg) rotateX(5deg) rotateZ(1deg);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.hero-preview::before {
  content: ""; position: absolute; inset: 8% -8% -10% 8%; z-index: -1; border-radius: 40px;
  background: radial-gradient(closest-side, var(--glow), transparent), radial-gradient(closest-side at 30% 70%, var(--glow2), transparent);
  filter: blur(30px);
}
@media (hover: hover) { .hero-preview:hover { transform: perspective(1400px) rotateY(-3deg) rotateX(2deg); } }
.hero-preview .board { border-radius: 14px; }
.hero-chip {
  position: absolute; left: -34px; bottom: -22px; z-index: 6;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px;
  border-radius: 14px; background: var(--pop-bg); border: 1px solid var(--glass-line); box-shadow: var(--shadow);
  font-size: 13px; color: var(--muted); line-height: 1.25;
}
.hero-chip b { display: block; color: var(--text); font: 700 1rem/1.2 var(--display); }
.hero-chip .num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--grad); color: var(--accent-ink); font-weight: 800; }
.hero-chip.two { left: auto; right: -30px; top: -24px; bottom: auto; }
.hero-chip.two .num { background: var(--amber); color: var(--amber-ink); }
@media (max-width: 760px) { .hero { padding-top: 22px; } .features { margin-top: 24px; } }

/* ---------- Importer ---------- */
#importer > summary { font-size: 1.1rem; }
.tabs { background: var(--input-bg); border: 1px solid var(--line-soft); border-radius: 14px; padding: 4px; }
.tab { border-radius: 10px; font-weight: 500; }
.tab.active { background: var(--raised); color: var(--text); border-color: var(--glass-line); box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 0 0 1px var(--glass-line); }
@media (hover: hover) { .tab:hover:not(.active) { background: transparent; color: var(--text); border-color: transparent; } }
.pane { display: flex; flex-wrap: wrap; gap: 8px; }
.pane > input, .pane > textarea { margin: 0; flex: 1 1 260px; }
.pane > button { flex: none; min-width: 140px; }
.pane > .game-list, .pane > .auth, .pane > #saved-where, .pane > textarea + button { flex-basis: 100%; }
#pane-pgn { flex-direction: column; }
#pane-pgn > button { align-self: flex-start; }
#pane-saved { display: block; }
#pane-saved.hidden, .pane.hidden { display: none !important; }
.quick { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.game-list li > button:first-child, .game-list .del { background: var(--input-bg); border-color: var(--line-soft); }

/* ---------- Game info ---------- */
#players { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.chip { border-color: var(--glass-line); background: var(--glass); font-weight: 500; }
.chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip.save { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }

/* ---------- Board ---------- */
.board {
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--glass-line), 0 30px 60px -30px rgba(0,0,0,.65), 0 8px 20px -10px rgba(0,0,0,.35);
}
.board-wrap { filter: none; }
.coord { font: 700 9.5px/1 var(--body); opacity: .85; letter-spacing: .02em; }
.sq.dot::before { left: 37%; top: 37%; width: 26%; height: 26%; background: rgba(8, 12, 22, 0.28); }
.badge { box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.85); }

/* ---------- Eval bar ---------- */
.hbar { height: 28px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--hbar-bg); }
.hbar-fill { background: linear-gradient(90deg, #dfe6f2, #fbfcff); border-radius: 999px 0 0 999px; transition: width .45s cubic-bezier(.2,.7,.2,1); }
.hbar-num { left: 12px; font-size: 12.5px; color: #0e1630; }
.hbar-num.on-dark { color: #eef2fb; }

/* ---------- Controls: one toolbar ---------- */
.controls { gap: 6px; padding: 6px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.controls button:not(.primary) { background: transparent; border-color: transparent; color: var(--soft); min-width: 44px; }
@media (hover: hover) { .controls button:not(.primary):hover { background: var(--hover); color: var(--text); } }
.controls .primary { border-radius: 11px; }

/* ---------- Move list ---------- */
.movelist { border-radius: 16px; padding: 10px; gap: 2px 4px; scrollbar-width: thin; }
.mv { border-radius: 8px; padding: 3px 8px; }
.mv.cur { background: var(--accent-soft); border-color: transparent; box-shadow: inset 0 0 0 1px var(--accent); color: var(--text); }
@media (hover: hover) { .mv:hover { background: var(--hover); } }

/* ---------- Graph ---------- */
.graph { border-radius: 14px; border-color: var(--glass-line); }
.graph rect { fill: var(--graph-bg); }
.graph polygon { fill: var(--graph-fill); opacity: .9; }
.graph line[stroke-dasharray] { stroke: var(--graph-mid); }
.graph circle { stroke: var(--graph-bg); }

/* ---------- Analysis tree ---------- */
#analysis-head h2, .review h2, .mc-head h2 { font-weight: 700; letter-spacing: -0.025em; }
.evalbar { height: 8px; border: 0; background: var(--track); }
.evalbar > div { background: linear-gradient(90deg, #cfd9e8, #fbfcff); border-radius: 999px; }
.note { border-radius: 14px; background: var(--raised); border: 1px solid var(--glass-line); }
.node-row {
  border-radius: 14px; border: 1px solid var(--glass-line); border-left-width: 1px;
  background: var(--raised); position: relative; overflow: hidden; padding: 12px 14px;
}
.node-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); }
.node-row[data-rank="1"]::before { background: var(--grad); }
.node-row[data-rank="1"] { border-left-color: var(--glass-line); }
@media (hover: hover) { .node-row:hover { background: var(--hover); border-color: var(--pop-line); } }
.node-row.sel { border-color: var(--accent); background: linear-gradient(0deg, var(--sel-bg), var(--sel-bg)), var(--raised); box-shadow: 0 0 0 3px var(--accent-soft); }
.rank { background: var(--hover); border: 1px solid var(--glass-line); }
.node-row[data-rank="1"] .rank { background: var(--grad); border-color: transparent; }
.san { font-weight: 700; }
.gauge { height: 4px; background: var(--track); }
.gauge::after { background: var(--graph-mid); }
.tree ul ul, .node > ul { border-left-color: var(--line-soft); }
.tag { border-color: var(--glass-line); background: var(--input-bg); }

/* ---------- Review summary ---------- */
.big .rl, .big .rr { border-radius: 12px; }
.big .rl { background: var(--text); color: var(--bg); }
.big .rr { background: var(--raised); border: 1px solid var(--glass-line); }
.rrow { border-top-color: var(--line-soft); }
.moments button, .km { border-radius: 12px; }
.moments button { background: var(--raised); border-color: var(--glass-line); }
.cta { border-radius: 14px; min-height: 56px; font-size: 1.05rem; letter-spacing: -0.01em; }
.progress { height: 6px; background: var(--track); }
.progress > div { background: var(--grad); }

/* ---------- Coach ---------- */
.bubble { border-radius: 16px; border-color: var(--bubble-line); box-shadow: 0 10px 30px -18px rgba(0,0,0,.5); }
.bubble::before { border-right-color: var(--bubble-line); left: -8px; }
.bubble::after { content: ""; position: absolute; left: -6px; top: 21px; border: 7px solid transparent; border-right-color: var(--bubble-bg); border-left: 0; }
.eval-pill { border-radius: 999px; padding: 3px 10px; background: var(--pill-bg); }
.coach-avatar { border-radius: 50%; }

/* ---------- Review actions and move strip ---------- */
.rv-actions button:not(.primary) { border-radius: 14px; }
.rv-actions button.on { background: var(--raised); border-color: var(--glass-line); }
.rv-actions .primary { border-radius: 14px; font-size: 1.05rem; }
.chip-mv.cur { background: var(--raised); border-color: var(--glass-line); }

/* ---------- Settings and sheet ---------- */
.seg { background: var(--input-bg); border: 1px solid var(--line-soft); border-radius: 12px; }
.seg button { border-radius: 9px; }
.seg button.on { background: var(--raised); color: var(--text); border-color: var(--glass-line); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.sheet { background: rgba(4, 7, 14, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sheet-card { border-radius: 22px; padding: 22px 24px 24px; box-shadow: var(--shadow); }

/* ---------- Footer ---------- */
footer { text-align: center; padding-top: 18px; opacity: .85; }

/* ---------- Entrance motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero-copy > *, #importer, #workspace .card { animation: rise .55s cubic-bezier(.2,.7,.2,1) both; }
.hero-copy > :nth-child(2) { animation-delay: .05s; }
.hero-copy > :nth-child(3) { animation-delay: .1s; }
.hero-copy > :nth-child(4) { animation-delay: .15s; }
.hero-copy > :nth-child(5) { animation-delay: .2s; }
#importer { animation-delay: .22s; }
@keyframes float-in { from { opacity: 0; transform: perspective(1400px) rotateY(-16deg) rotateX(8deg) translateY(16px); } }
.hero-preview { animation: float-in .9s cubic-bezier(.2,.7,.2,1) both .1s; }

/* ---------- Phone ---------- */
@media (max-width: 979px) {
  .board-dock {
    margin: 0 -12px; padding: 8px 12px;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--glass-line);
  }
  .board-dock .coach .bubble { box-shadow: none; }
}
@media (max-width: 480px) {
  .card { padding: 14px; border-radius: 18px; }
  .pane > button { flex: 1 1 100%; }
  .hero h2 { font-size: clamp(2.1rem, 10vw, 2.6rem); }
  .controls { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-preview, .hero-copy > *, #importer, #workspace .card { animation: none; }
  .hero-preview { transform: none; }
  .eyebrow .pulse { animation: none; }
}

/* ---------- Taps: no double-tap zoom ----------
   Quick repeated taps (Next, arrows, board) should act, not zoom the page.
   Pinch zoom still works. Squares that drag pieces keep touch-action: none. */
html, body, button, a, input, textarea, summary, .sq, .mv, .chip-mv, .node-row, .km, .graph, .board, .strip { touch-action: manipulation; }
.sq.live-click { touch-action: none; }

/* ======================================================================
   Identity: the analysis room
   Ink and paper taken from the board itself (a green-tinted black and a
   cool grey-green paper), and one accent: electric blue, used for "your move"
   (buttons, arrows, the top-ranked reply). Surfaces are solid; the board is
   the only bold thing on the page.
   ====================================================================== */
:root {
  --bg: #0d1210; --surface: #141b18; --raised: #1b2420; --line: #2a3530; --line-soft: #212b27;
  --text: #edf1ec; --muted: #9aa69f; --soft: #c9d1cb; --soft2: #a9b4ad;
  --accent: #2f74ef; --accent-hi: #4b88f3; --accent-d: #1f5bd0; --accent-ink: #ffffff; --accent-text: #8ab4ff;
  --accent-soft: rgba(59, 130, 246, 0.18); --sel-bg: rgba(59, 130, 246, 0.08); --amber: #3b82f6; --amber-ink: #ffffff;
  --grad: linear-gradient(var(--accent), var(--accent));
  --hover: #212b27; --input-bg: #101614; --track: #212b27; --pop-bg: #18201c; --pop-line: #34413b;
  --glow: transparent; --glow2: transparent; --dot: transparent;
  --glass: var(--surface); --glass-hi: transparent; --glass-line: var(--line-soft);
  --card-shadow: none; --shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
  --bubble-bg: #1b2420; --bubble-line: #2a3530; --bubble-mute: #9aa69f; --bubble-soft: #c9d1cb;
  --pill-bg: #2a3530; --hbar-bg: #212b27; --graph-bg: #101614; --graph-mid: #4a5751;
  --played: #9cc4b2;
}
:root[data-mode="light"] {
  --bg: #eef1ed; --surface: #ffffff; --raised: #f3f6f2; --line: #d3dbd4; --line-soft: #e2e8e2;
  --text: #111814; --muted: #56625b; --soft: #2c3631; --soft2: #45514a;
  --accent: #2563eb; --accent-hi: #3b76f0; --accent-d: #1d4fc4; --accent-ink: #ffffff; --accent-text: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.12); --sel-bg: rgba(37, 99, 235, 0.06); --amber: #2563eb; --amber-ink: #ffffff;
  --hover: #e8ede7; --input-bg: #f7f9f6; --track: #e2e8e2; --pop-bg: #ffffff; --pop-line: #cbd4cc;
  --glow: transparent; --glow2: transparent; --dot: transparent;
  --glass: var(--surface); --glass-hi: transparent; --glass-line: var(--line);
  --card-shadow: 0 1px 2px rgba(17, 24, 20, 0.05); --shadow: 0 18px 40px -22px rgba(17, 24, 20, 0.3);
  --bubble-bg: #ffffff; --bubble-text: #111814; --bubble-line: #dbe2db; --bubble-mute: #56625b; --bubble-soft: #2c3631;
  --pill-bg: #1b2420; --hbar-bg: #1b2420; --hbar-fill: #eef1ed; --graph-bg: #1b2420; --graph-mid: #6b7870;
  --played: #3f7562;
}
@media (prefers-color-scheme: light) {
  :root[data-mode="auto"] {
    --bg: #eef1ed; --surface: #ffffff; --raised: #f3f6f2; --line: #d3dbd4; --line-soft: #e2e8e2;
    --text: #111814; --muted: #56625b; --soft: #2c3631; --soft2: #45514a;
    --accent: #2563eb; --accent-hi: #3b76f0; --accent-d: #1d4fc4; --accent-ink: #ffffff; --accent-text: #1d4ed8;
    --accent-soft: rgba(37, 99, 235, 0.12); --sel-bg: rgba(37, 99, 235, 0.06); --amber: #2563eb; --amber-ink: #ffffff;
    --hover: #e8ede7; --input-bg: #f7f9f6; --track: #e2e8e2; --pop-bg: #ffffff; --pop-line: #cbd4cc;
    --glow: transparent; --glow2: transparent; --dot: transparent;
    --glass: var(--surface); --glass-hi: transparent; --glass-line: var(--line);
    --card-shadow: 0 1px 2px rgba(17, 24, 20, 0.05); --shadow: 0 18px 40px -22px rgba(17, 24, 20, 0.3);
    --bubble-bg: #ffffff; --bubble-text: #111814; --bubble-line: #dbe2db; --bubble-mute: #56625b; --bubble-soft: #2c3631;
    --pill-bg: #1b2420; --hbar-bg: #1b2420; --hbar-fill: #eef1ed; --graph-bg: #1b2420; --graph-mid: #6b7870;
    --played: #3f7562;
  }
}

/* Plain ground: no glows, no dot grid. */
body { background: var(--bg); }
body::before { content: none; }

/* Solid surfaces instead of frosted glass. */
.card, .movelist, .settings, .sheet-card, .toast, .icon-btn, .hero-actions button:not(.primary) {
  background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.card { border-radius: 16px; }

/* One solid accent for actions; no glow, no gradient. */
button.primary, .rv-actions .primary, .cta, .hero-actions .primary {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: none; font-weight: 700;
}
@media (hover: hover) {
  button.primary:hover, .rv-actions .primary:hover:not(:disabled), .cta:hover { background: var(--accent-hi); border-color: var(--accent-hi); filter: none; box-shadow: none; }
}
button.primary:active, .rv-actions .primary:active, .cta:active { box-shadow: none; }
button.link::after { content: none; }
.mark { box-shadow: 0 0 0 1px var(--line); }
.mark::after { content: none; }

/* Hero: the headline is two short turns, set tight; the board carries the colour. */
.hero h2 { max-width: 12ch; letter-spacing: -0.045em; }
.hero h2 span { display: block; }
.hero h2 span + span { color: var(--muted); }
.hero-preview::before { content: none; }
.hero-chip .num { background: var(--accent); color: var(--accent-ink); }
.hero-chip.two .num { background: var(--raised); color: var(--text); border: 1px solid var(--line); }
.hero-chip b .ev { font: 600 .82rem/1 var(--body); color: var(--muted); margin-left: 6px; font-variant-numeric: tabular-nums; }
.features svg { stroke: var(--muted); }
.coach-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; }
footer a { color: inherit; text-underline-offset: 2px; }
/* Coach: a gentle fade when the expression changes; no scaling, tilting or bouncing. */
.coach-avatar.pop { animation: none; }
.coach-avatar.fade img { animation: coach-fade .25s ease-out; }
@keyframes coach-fade { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .coach-avatar.fade img { animation: none; } }

/* ---------- My games, Play, Puzzles ---------- */
@media (max-width: 420px) { .tab { font-size: 12.5px; padding: 8px 2px; } }
.pane-h { margin: 14px 0 8px; font-size: 14px; font-weight: 650; color: var(--soft); }
#pane-lichess .pane-h { margin-top: 0; }
.links { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-bottom: 10px; }
.links label, .play-card label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
@media (max-width: 620px) { .links { grid-template-columns: 1fr; } }
.play-card { padding: 14px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--bg); margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.play-card h3 { margin: 0; font-size: 15.5px; }
.play-card .hint { margin: 0; }
.row.wrap { flex-wrap: wrap; }
.row.wrap > button { flex: 0 1 auto; }
select { min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--input-bg); color: var(--text); font: inherit; }
select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
label.check { flex-direction: row !important; align-items: center; gap: 8px !important; color: var(--soft) !important; font-size: 14px !important; }
a.btn { display: inline-flex; align-self: flex-start; align-items: center; min-height: 42px; padding: 8px 16px; border-radius: 12px; border: 1px solid var(--line); color: var(--text); text-decoration: none; background: var(--raised); font-weight: 600; }
a.btn:hover { background: var(--hover); }
.game-list li.live > button:first-child { border-color: var(--warn-line); background: var(--warn-bg); }
.note.lock { max-width: 580px; margin: 10px auto 0; background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--soft); }
.mode-bar { max-width: 580px; margin: 10px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.mode-bar > .hint { flex: 1 1 220px; margin: 0; color: var(--soft); font-size: 14.5px; }
.mode-bar > button { flex: 0 0 auto; }
.mode-bar.play { flex-direction: column; align-items: stretch; }
.clocks { display: flex; justify-content: space-between; gap: 10px; }
.clock { flex: 1; padding: 8px 12px; border-radius: 10px; background: var(--input-bg); border: 1px solid var(--line); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--muted); }
.clock.on { color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#pz-stats { font-weight: 600; color: var(--soft); }
#pane-play:not(.hidden), #pane-puzzles:not(.hidden) { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; align-items: stretch; }
#pane-play .play-card, #pane-puzzles .play-card { margin: 0; }
#pane-play .play-card > :last-child, #pane-puzzles .play-card > :last-child { margin-top: auto; }
#pz-stats { grid-column: 1 / -1; margin: 0; }