/* Layout: board on the left, opening panel on the right, opening list below. One column on mobile. */
:root {
  /* Sports-magazine look: cream paper, ink type, a heavy black rule over each panel, one orange.
     --data (orange) marks what you are working on; green and red stay for right and wrong. Headlines
     are Anton (--font-poster), the rest Geist. A dark variant below swaps paper and ink. */
  --bg: #e6dfd1;
  --surface: #efe8db;
  --raised: #ded5c3;
  --ink: #141414;
  --muted: #62594c;
  --line: #d3c8b3;
  --accent: #141414;
  --accent-ink: #efe8db;
  --data: #ff5a1f;
  --data-ink: #141414;
  --hot: #9c330a;          /* orange for text on paper (AA on every paper tone), --data for marks */
  --good: #226039;
  --bad: #b42318;
  --hint: #e0b23a;
  --rule: #141414;
  --track: #d9cfbc;
  --card: #141414; --card-ink: #f4efe6; --card-hot: #ff5a1f;
  --radius: 4px;
  /* Spacing roles: inside a group, between related parts, between groups. */
  --gap-tight: 8px;
  --gap-group: 12px;
  --gap-section: 24px;
  --shadow: none;
  --gutter: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left, 0px));
  --font-poster: "Anton", "Impact", sans-serif;
  --font-display: "Geist", Inter, system-ui, sans-serif;
  --font-body: "Geist", Inter, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12100e; --surface: #1b1815; --raised: #26221e; --ink: #f4efe6; --muted: #a8a093; --line: #2e2a25;
    --accent: #f4efe6; --accent-ink: #141414; --data: #ff6a2f; --data-ink: #141414; --hot: #ff7a45;
    --good: #5fc48a; --bad: #ff6b6b; --hint: #e8c25a; --rule: #f4efe6; --track: #2e2a25;
    --card: #f4efe6; --card-ink: #141414; --card-hot: #9c330a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #12100e; --surface: #1b1815; --raised: #26221e; --ink: #f4efe6; --muted: #a8a093; --line: #2e2a25;
  --accent: #f4efe6; --accent-ink: #141414; --data: #ff6a2f; --data-ink: #141414; --hot: #ff7a45;
  --good: #5fc48a; --bad: #ff6b6b; --hint: #e8c25a; --rule: #f4efe6; --track: #2e2a25;
  --card: #f4efe6; --card-ink: #141414; --card-hot: #9c330a; color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 16px/1.5 var(--font-body);
  background: var(--bg);
}
button { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { padding-inline: var(--gutter); }

.top {
  position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.brand span { color: var(--muted); }
.account { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.layout {
  display: grid; gap: clamp(20px, 3vw, 40px); padding-block: 28px; align-items: start;
  /* The board and a panel of at most 460px, centred together so the board sits near the middle */
  grid-template-columns: minmax(0, min(calc(100vh - 230px), 860px)) minmax(300px, 460px);
  justify-content: center;
  grid-template-areas: "play panel" "list list";
}
.play { grid-area: play; display: grid; gap: 14px; }
.panel {
  grid-area: panel; min-width: 0; display: grid; gap: var(--gap-section); align-content: start;
  padding: clamp(16px, 2vw, 28px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.list { grid-area: list; }

/* Board */
.board-frame { padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.board { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; max-width: 100%; user-select: none; border-radius: 4px; overflow: hidden; }
.board.shake { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.sq { position: relative; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; aspect-ratio: 1; }
/* Lichess default: brown board, cburnett pieces, green highlights */
.sq.light { background: #f0d9b5; }
.sq.dark { background: #b58863; }
.sq.last::after { content: ""; position: absolute; inset: 0; background: rgb(155 199 0 / .41); }
.sq.sel::after { content: ""; position: absolute; inset: 0; background: rgb(20 85 30 / .5); }
.sq.hint::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 4px var(--hint); }
.sq.wrong::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bad) 55%, transparent); }
.sq.dot::before { content: ""; position: absolute; width: 26%; height: 26%; border-radius: 50%; background: rgb(20 85 30 / .5); z-index: 2; }
.sq.cap::before { content: ""; position: absolute; inset: 0; background: radial-gradient(transparent 0 79%, rgb(20 85 30 / .3) 80%); z-index: 2; }
.pc { position: relative; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.lbl { position: absolute; font: 600 clamp(9px, 1.1vw, 12px) var(--font-body); z-index: 3; }
.sq.light .lbl { color: #b58863; }
.sq.dark .lbl { color: #f0d9b5; }
.lbl.f { right: 3px; bottom: 1px; }
.lbl.r { left: 3px; top: 1px; }

.controls { display: flex; gap: 8px; flex-wrap: wrap; }
.controls button, .ghost {
  border: 1px solid var(--line); background: var(--surface); padding: 9px 16px; border-radius: 8px; cursor: pointer; font-weight: 500;
  transition: border-color .15s, background .15s, transform .1s;
}
.controls button:hover, .ghost:hover { border-color: var(--accent); }
.controls button:active, .ghost:active { transform: translateY(1px); }
.controls .primary { margin-left: auto; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.controls .primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }

/* Panel */
.meta { margin: 0; color: var(--muted); font-size: 14px; display: flex; gap: 10px; align-items: center; }
.eco { font: 600 12px var(--font-mono); letter-spacing: .04em; color: var(--accent); }
h1 { margin: 4px 0 6px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.info { margin: 0; color: var(--muted); max-width: 46ch; }
.message { margin: 0; min-height: 3em; padding: 12px 14px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); font-weight: 500; }
.message.good { border-color: var(--good); color: var(--good); background: color-mix(in srgb, var(--good) 8%, var(--surface)); }
.message.bad { border-color: var(--bad); color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }

.progress { display: flex; align-items: center; gap: 12px; font: 13px var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.track { flex: 1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.fill { height: 100%; width: 0; background: var(--accent); transition: width .3s; }

.moves { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 16px; font: 15px var(--font-mono); }
.moves li { display: grid; grid-template-columns: 2.4em 1fr 1fr; gap: 6px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.num { color: var(--muted); }
.mv.todo { color: var(--muted); }
.mv.now { color: var(--accent); font-weight: 600; }

/* Opening list */
.list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; border-top: 1px solid var(--line); padding-top: 8px; }
.list ul { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 4px; }
.list li { display: contents; }
.group { margin: 14px 0 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.op {
  width: 100%; display: grid; grid-template-columns: 3.2em 1fr auto; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; text-align: left;
}
.op:hover { background: var(--surface); }
.op.active { background: var(--surface); border-color: var(--accent); }
.op-name { font-weight: 500; }
.chip { font: 12px var(--font-mono); padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.chip.sitter { background: var(--good); border-color: var(--good); color: var(--surface); }
.chip.pagar { border-color: var(--hint); color: var(--ink); }

.foot { padding-block: 8px 32px; color: var(--muted); font-size: 14px; }

@media (max-width: 820px) {
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "play" "panel" "side" "list"; gap: 20px; padding-block: 16px; }
  .board-frame { padding: 6px; }
  .top { position: static; }
  /* On a phone the feedback comes first, right under the board. */
  .coach { order: -2; }
  .panel > .moment { order: -3; } /* a moment comes before even that */
}
@media (prefers-reduced-motion: reduce) { .board.shake { animation: none; } .fill { transition: none; } }

/* Home */
.home { padding-block: clamp(32px, 7vh, 88px) 64px; }
.home h1 { font-size: clamp(2rem, 5vw, 3.6rem); margin: 0 0 10px; max-width: 18ch; }
.home .lede { margin: 0 0 clamp(24px, 4vh, 44px); color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.2rem); max-width: 56ch; }
.cards { display: grid; gap: clamp(14px, 2vw, 24px); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  display: grid; gap: 10px; align-content: start; padding: clamp(20px, 2.4vw, 32px); background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s;
}
.card:hover, .card:focus-visible { border-color: var(--accent); transform: translateY(-3px); }
.card img { width: 64px; height: 64px; padding: 8px; border-radius: 12px; background: #f0d9b5; }
.card:nth-child(2) img { background: #b58863; }
.card h2 { margin: 6px 0 0; font-size: clamp(1.2rem, 1.6vw, 1.45rem); letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--muted); }
.card .go { margin-top: 8px; color: var(--accent); font-weight: 700; }
.crumb { color: var(--muted); font-weight: 500; }

/* Explanations on drill pages */
.explain { display: grid; gap: 10px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.explain p { margin: 0; }
.explain .line { font-family: var(--font-mono); font-size: 14px; }
.explain .line span { display: block; font-family: var(--font-body); font-size: 13px; color: var(--muted); }
.explain .src { font-size: 14px; color: var(--muted); }
.explain a { color: var(--accent); }

/* Opening picker */
.picker { padding-block: clamp(24px, 5vh, 56px) 8px; }
.picker h1, .picker .pick-h { margin: 0 0 6px; font-size: clamp(2rem, 4.5vw, 3.2rem); }
.picker .pick-h { font-family: var(--font-poster); font-weight: 400; text-transform: uppercase; line-height: 1; }
/* The landing: look up any player, or open one of three examples, above the openings. */
.hero { padding-bottom: clamp(28px, 5vh, 48px); margin-bottom: clamp(24px, 4vh, 40px); border-bottom: 3px solid var(--rule, var(--line)); }
.picker .hero h1 { max-width: 16ch; margin: 0 0 12px; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: .95; text-wrap: balance; }
.hero-sub { max-width: 60ch; margin: 0 0 18px; color: var(--muted); font-size: 17px; }
.hero-search { display: flex; gap: 8px; max-width: 560px; }
.hero-search input { flex: 1; min-width: 0; font: inherit; font-size: 18px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.hero-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hero-search .cta { padding-inline: 20px; font-size: 16px; white-space: nowrap; }
.hero[hidden] { display: none; }
/* One row of cards from edge to edge: as many columns as fit, the rest of the cards hidden below */
.hero-ex { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); justify-items: center; grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0; column-gap: 18px; overflow: hidden; margin-top: 28px; }
.hero-p { display: grid; justify-items: start; gap: 8px; color: var(--ink); text-decoration: none; }
.hero-p > b { font: 400 22px/1.05 var(--font-poster); text-transform: uppercase; } /* before the cards arrive */
.hero-p .pf-pcard { zoom: .7; box-shadow: none; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.hero-p:hover .pf-pcard, .hero-p:focus-visible .pf-pcard { transform: translateY(-4px); }
.hero-r { font-size: 13px; color: var(--muted); }
@media (max-width: 560px) {
  .hero-search { flex-direction: column; } .hero-search .cta { padding-block: 12px; }
  /* Three whole cards across the phone */
  .hero-ex { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; }
  .hero-p { min-width: 0; gap: 4px; } .hero-p .pf-pcard { zoom: .35; } .hero-r { font-size: 11px; line-height: 1.3; }
}

.picker .info { max-width: 60ch; }
.back { justify-self: start; }
[hidden] { display: none !important; }
#items { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Opening list: one opening per row */
.picks { display: grid; gap: 14px; padding-block: 8px 40px; }
.side-seg { justify-self: start; }
.side-seg .og-n { margin-left: 4px; }
.og-h { margin: 0; font-size: 16px; font-weight: 600; }
/* Two openings per row once each card can be at least 560px wide; one on narrower screens */
.olist { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(560px, 100%), 1fr)); }
.ocard { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 20px; align-items: start; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color .15s; }
.ocard:hover, .ocard:focus-visible { border-color: var(--ink); outline: none; }
.ocard .board.mini { width: 136px; border-radius: 4px; overflow: hidden; }
.board.mini { pointer-events: none; }
.board.mini .lbl { display: none; }
.ocard-body { display: grid; gap: 6px; min-width: 0; }
.ocard-top { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.ocard h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.odesc { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); max-width: 64ch; }
.ostats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 4px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ostats b { color: var(--ink); font-weight: 500; }
.ostats .wdl { width: 120px; height: 6px; }
.ostats .tags { display: inline-flex; gap: 4px; }
.more { justify-self: start; }
@media (prefers-reduced-motion: reduce) {
  .ocard, .card, .controls button, .ghost { transition: none; }
  .ocard:hover, .card:hover { transform: none; }
}

/* Rating step on the openings page */
.rating-ask { display: grid; gap: 12px; margin-top: 20px; padding: clamp(18px, 2.4vw, 28px); max-width: 640px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.rating-ask label { font-weight: 700; font-size: 1.15rem; }
.rating-row { display: flex; gap: 10px; flex-wrap: wrap; }
.rating-row input { flex: 1 1 140px; font: inherit; font-size: 1.1rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.rating-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cta { border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: 10px 18px; border-radius: 8px; cursor: pointer; }
.cta:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.pill { border: 1px solid var(--line); background: transparent; color: var(--ink); padding: 4px 12px; border-radius: 99px; cursor: pointer; font-size: 14px; margin: 4px 2px 0; }
.pill:hover { border-color: var(--accent); }

/* Time control and style switches */
.choices { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 18px 0 10px; }
.choice { display: grid; gap: 6px; align-content: start; }
.choice-label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.seg { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; background: var(--surface); width: fit-content; max-width: 100%; }
.seg button { border: 0; background: transparent; color: var(--ink); padding: 7px 14px; border-radius: 7px; cursor: pointer; font-weight: 500; }
.seg button:hover { background: var(--bg); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.choice-about { margin: 0; color: var(--muted); font-size: 14px; min-height: 1.4em; }
.tags { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); }

/* Your own games */
.mine { margin: 6px 0 18px; padding: 14px clamp(14px, 2vw, 22px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.mine[open] { box-shadow: var(--shadow); }
.mine summary { cursor: pointer; font-weight: 700; }
.mine form { margin-top: 12px; }
.mine .info { margin-top: 8px; }
.og-about { margin: -6px 0 12px; color: var(--muted); font-size: 14px; }
.played { margin: 0; font-size: 13px; color: var(--muted); }
.played b { color: var(--ink); }
.wdl { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--line); }
.wdl .w { background: var(--good); }
.wdl .d { background: var(--muted); opacity: .55; }
.wdl .l { background: var(--bad); opacity: .75; }
.wdl-key { margin: 0; display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wdl-key b { color: var(--good); }

/* Move explanations */
.why { display: grid; gap: 8px; }
.why:empty { display: none; }
.why p { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); font-size: 15px; }
.why b { font-family: var(--font-mono); }

/* Move arrow, Lichess green */
.arrow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; opacity: .85; }
.arrow line { stroke: var(--arrow, #15781b); stroke-width: .17; stroke-linecap: round; }
.arrow polygon { fill: var(--arrow, #15781b); }

/* Dragging a piece */
.board:not(.mini) { touch-action: none; }
.drag-ghost { position: fixed; z-index: 50; pointer-events: none; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .35)); }
.pc.dragging { opacity: .3; }

/* Lines overview */
.lines summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.lines ol { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; max-height: 320px; overflow: auto; }
.line-btn { width: 100%; display: grid; grid-template-columns: 2.2em 1fr auto auto; gap: 6px; align-items: center; text-align: left;
  padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer; font-size: 14px; }
.line-btn:hover { background: var(--bg); }
.line-btn.now { border-color: var(--accent); background: var(--bg); }
.line-n, .line-share { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.line-ok { color: var(--good); font-weight: 700; text-align: center; }

/* Opening complete */
.complete { max-width: min(460px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 14px; padding: 28px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow); text-align: center; }
.complete::backdrop { background: rgb(0 0 0 / .55); }
.complete h2 { margin: 8px 0 10px; font-size: 1.8rem; letter-spacing: -0.02em; }
.complete p { color: var(--muted); }
.complete-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.line-name small { display: block; color: var(--muted); font-family: var(--font-mono); font-size: 12px; }

/* Lichess username step and search */
.rating-ask form { display: grid; gap: 10px; }
.rating-ask .or { margin: 0; text-align: center; color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: .1em; }
.search { width: 100%; max-width: 520px; margin: 4px 0 18px; font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; }
.search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ocard h3 .as { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 2px; }

/* Current line */
.line-box { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.line-box:empty { display: none; }
.lb-name { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.lb-name small { font: 13px var(--font-mono); color: var(--muted); }
.lb-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.lb-stats div { display: grid; }
.lb-stats b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.lb-stats span { font-size: 12px; color: var(--muted); line-height: 1.3; }
.lb-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--line); }
.lb-done { background: var(--good); }
.lb-played { background: var(--accent); opacity: .45; }
.why .reps { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; font-size: 14px; color: var(--muted); }
.why .rep { padding: 1px 7px; border-radius: 999px; background: var(--line); white-space: nowrap; }
.why .rep b { color: var(--ink); }
.why .rep.now { background: var(--accent); color: var(--accent-ink); }
.why .rep.now b { color: var(--accent-ink); }

/* Narrow phones: keep all board buttons on one row */
@media (max-width: 420px) {
  .controls { gap: 6px; }
  .controls button { padding: 8px 10px; font-size: 14px; }
}
.lb-note { margin: 0; font-size: 12px; color: var(--muted); }

/* Board view panel: context, feedback, progress, then the long list */
.p-head { display: grid; gap: var(--gap-group); }
.p-head .op-head h1 { margin-bottom: 4px; }
/* The coach: one box with what to do now and why */
.coach { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--gap-group); align-items: start;
  padding: 14px 16px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); transition: border-color .2s; }
.coach:has(.message.good) { border-color: var(--good); }
.coach:has(.message.bad) { border-color: var(--bad); }
.coach-face { width: 40px; height: 40px; padding: 4px; border-radius: 50%; background: #f0d9b5; }
.coach-body { display: grid; gap: var(--gap-tight); min-width: 0; }
.coach .message { padding: 0; border: 0; background: none; min-height: 0; font-weight: 600; font-size: 16px; }
.coach .message.good, .coach .message.bad { background: none; }
.coach .why p { padding: 0; border: 0; background: none; color: var(--muted); font-size: 15px; }
.coach .why b { color: var(--ink); }
.moves-box summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.moves-box .moves { margin-top: 8px; }
/* Desktop: the board stays in view while the panel scrolls (not where a list sits under it) */
@media (min-width: 821px) {
  .layout:has(.side) .play { position: sticky; top: 84px; align-self: start; }
}

/* Drawn icons */
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.back { display: inline-flex; align-items: center; gap: 6px; }
#step-back, #step-fwd { display: inline-grid; place-items: center; min-width: 44px; }
.line-ok .ico { width: 16px; height: 16px; stroke: var(--good); stroke-width: 3; }

/* Picker filters in one band */
.choice-search { flex: 1 1 260px; }
.choice-search .search { margin: 0; max-width: 420px; }

/* Browser surfaces in the palette */
:root { accent-color: var(--accent); caret-color: var(--accent); scrollbar-color: var(--line) transparent; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--ink); }
summary:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
summary { border-radius: 6px; }

/* Disabled controls */
button:disabled { opacity: .4; cursor: not-allowed; }
.controls button:disabled:hover { border-color: var(--line); }
.controls button:disabled:active { transform: none; }

/* Home: call to action with a drawn chevron */
.card .go { display: inline-flex; align-items: center; gap: 4px; }
.card .go .ico { width: 16px; height: 16px; transition: transform .15s; }
.card:hover .go .ico { transform: translateX(3px); }

/* Narrower headers (the section links take room): the rating label is read out but not shown, so the header fits one row */
@media (max-width: 1280px) {
  .account { flex-wrap: nowrap; }
  .account .ghost { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) { .card:hover .go .ico { transform: none; } }
.account .ghost { white-space: nowrap; }
.account .ghost::first-letter { text-transform: uppercase; }
@media (max-width: 560px) { .wide-only { display: none; } }
@media (min-width: 561px) { .narrow-only { display: none; } }
/* A phone: the side tabs and the sorting share one row, the search under them */
@media (max-width: 560px) {
  .og-bar { gap: 8px; flex-wrap: wrap; }
  .og-bar #side-tabs, .og-bar .sort-seg { flex: none; }
  .og-bar .side-seg button, .og-bar .sort-seg button { padding: 6px 6px; font-size: 13px; }
  .og-bar .side-seg .og-n { margin-left: 2px; padding: 1px 4px; font-size: 11px; }
  .og-bar .choice-search { flex-basis: 100%; }
}

/* Taken pieces and material lead */
.captured { display: flex; align-items: center; min-height: 22px; padding: 0 4px; gap: 0; }
.captured img { width: 20px; height: 20px; margin-right: -6px; }
.captured b { margin-left: 12px; font: 600 14px var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }

/* Evaluation bar, upright beside the board like on Lichess: White's share fills from White's side */
.board-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; }
/* Black taken pieces need a light edge to show on the dark page */
.captured img[src*="/bP"], .captured img[src*="/bN"], .captured img[src*="/bB"], .captured img[src*="/bR"], .captured img[src*="/bQ"] {
  filter: drop-shadow(0 0 1px rgb(255 255 255 / .75)) drop-shadow(0 0 1px rgb(255 255 255 / .5));
}

/* Right / wrong mark on a square */
.mark { position: absolute; top: 3%; right: 3%; width: 34%; height: 34%; border-radius: 50%; display: grid; place-items: center; z-index: 5;
  box-shadow: 0 1px 3px rgb(0 0 0 / .35); animation: mark-in .2s ease-out; }
.mark.ok { background: #2f9e5b; }
.mark.bad { background: #c8473a; }
.mark svg { width: 70%; height: 70%; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes mark-in { from { transform: scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mark { animation: none; } }
/* The board column holds progress, taken pieces, board and buttons; the board gives way so all fit on screen */
@media (min-width: 821px) {
  .board-row { width: min(100%, calc(100vh - 190px)); justify-self: center; }
  /* Tight around the board in the trainer: the taken pieces and the buttons sit close, the board gets the room */
  #trainer .play { gap: 6px; }
  #trainer .captured { min-height: 18px; }
  #trainer .captured img { width: 18px; height: 18px; }
  #trainer.layout { padding-block: 16px 20px; }
}

/* Phones: a compact picker and board view. Desktop is unchanged. */
/* The filters are always open, so nobody misses them; on a phone the summary line can fold them away */
.filters { margin-top: 14px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.filters > summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; font-weight: 700; list-style: none; }
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary span { color: var(--muted); font-weight: 500; }
.filters[open] .choices { margin: 12px 0 4px; }
@media (min-width: 561px) { .filters > summary { display: none; } .filters[open] .choices { margin-top: 0; } }
@media (max-width: 560px) {
  .top-in { padding-block: 10px; }
  .picker { display: flex; flex-direction: column; }
  .picker > .mine { order: 10; }
  .filters .seg:has([data-style]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .ocard { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .ocard .board.mini { width: 84px; }
  .ocard h3 { font-size: 16px; }
  .odesc { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ostats { gap: 4px 12px; font-size: 12px; }
  .ostats .wdl, .ostats .tags { display: none; }
  .more { justify-self: stretch; }
  .layout { gap: 14px; }
  .play { gap: 6px; }
  .captured { min-height: 18px; }
  .captured img { width: 18px; height: 18px; }
  .panel { gap: 16px; padding: 14px; }
  .lb-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lb-stats div:nth-child(2), .lb-note { display: none; }
}
/* Desktop: filters and search share one row, as before the filters got their own box */
@media (min-width: 561px) {
  .filters { display: block; } /* full width, so the box never changes size with what its labels say */
  /* inline blocks keep their margins apart, so trim what used to collapse with the heading and the box below */
  .filters .choices { margin-top: 12px; margin-bottom: 4px; }
}

/* Lichess board behaviour: drawn shapes, and pieces in flight above the other squares */
.shapes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; opacity: .6; overflow: hidden; }
.sq.anim { z-index: 8; }
.pc.fading { position: absolute; inset: 0; z-index: 1; opacity: .5; }
.line-done .summary { display: grid; gap: 6px; }
.line-done .summary b { display: block; margin-bottom: 2px; }
.line-done .tips { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: 15px; color: var(--ink); }

/* Board view details in the ledger style */
#trainer .panel, #trainer .board-frame { box-shadow: none; }
#trainer .panel { padding: 24px; gap: 20px; }
#trainer h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin: 2px 0 4px; }
.choice-label { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }
.seg button[aria-pressed="true"] { background: var(--raised); color: var(--ink); font-weight: 500; }
#trainer .controls .primary { font-weight: 500; }
#trainer .fill, #trainer .lb-done { background: var(--data); }
#trainer .lb-played { background: var(--data); opacity: .3; }
#trainer .why .rep { background: transparent; border: 1px solid var(--line); }
#trainer .why .rep.now { background: var(--data); border-color: var(--data); color: var(--data-ink); }
#trainer .why .rep.now b { color: var(--data-ink); }
#trainer .coach, #trainer .line-box { background: var(--surface); }
#trainer .coach .message { font-weight: 500; font-size: 16px; }
#trainer .why b { font-family: var(--font-mono); font-weight: 500; }
#trainer .lb-stats b, #trainer .progress, #trainer .line-share { font-variant-numeric: tabular-nums; font-weight: 500; }
#trainer .lb-name { font-size: 16px; font-weight: 600; }
#trainer .eco { font-family: var(--font-mono); }


/* Evaluation bar, upright beside the board like on Lichess: White's share fills from White's side */
.evalbar { position: relative; border-radius: 6px; overflow: hidden; background: #2a2724; border: 1px solid var(--line); }
.evalbar-white { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: #f2efe8; transition: height .3s ease-out; }
.evalbar.flip .evalbar-white { bottom: auto; top: 0; }
.evalbar-num { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 700 10px var(--font-mono); letter-spacing: -0.06em; color: #2a2724; }
.evalbar.flip .evalbar-num { bottom: auto; top: 6px; }
.evalbar.behind .evalbar-num { color: #f2efe8; }
.evalbar.stale { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .evalbar-white { transition: none; } }

/* Premove squares, Lichess blue */
.sq.pre::after { content: ""; position: absolute; inset: 0; background: rgb(20 30 85 / .5); }

/* Move badges: on the square of the last move and after moves in the list */
.mark[class*="k-"] { font: 700 11px/1 var(--font-body); color: #fff; letter-spacing: -0.04em; width: 30%; height: 30%; }
.mark[class*="k-"] { font-size: clamp(9px, 2.2vw, 15px); }
.mark.k-book svg { stroke: #fff; stroke-width: 2.2; }
.k-brilliant { --k: #1baca6; } .k-best { --k: #5c9e3a; } .k-good { --k: #7d9f5f; } .k-book { --k: #a88865; }
.k-inaccuracy { --k: #d6a21b; } .k-mistake { --k: #e07b24; } .k-blunder { --k: #ca3431; }
.mark[class*="k-"] { background: var(--k); }
.nag { margin-left: 2px; font: 700 .75em var(--font-body); color: var(--k); }
.why .verdict { background: color-mix(in srgb, var(--k) 12%, transparent); padding: 6px 10px !important; border-radius: 2px; }
.og-n { font: 500 12px var(--font-mono); padding: 1px 7px; border-radius: 99px; background: var(--raised); color: var(--muted); }
.side-seg button[aria-pressed="true"] .og-n { background: var(--surface); }
.ostats .wdl-key { display: none; }

.tag { background: var(--raised); color: var(--ink); }

/* Each card in its side's colour: White's openings on white, Black's on black, in both themes */
.ocard.side-w, .gm-moment.side-w { --accent: #141414; --surface: #efe8db; --ink: #141414; --muted: #62594c; --line: #d3c8b3; --raised: #ded5c3; --good: #226039; --bad: #b42318; }
.ocard.side-b, .gm-moment.side-b { --accent: #f4efe6; --surface: #141414; --ink: #f4efe6; --muted: #a8a093; --line: #2e2a25; --raised: #26221e; --good: #5fc48a; --bad: #ff6b6b; }
.ocard.side-w, .ocard.side-b { background: var(--surface); color: var(--ink); border-color: var(--line); }
.ocard.side-w:hover, .ocard.side-w:focus-visible, .ocard.side-b:hover, .ocard.side-b:focus-visible { border-color: var(--ink); }

/* Facts at the end of a line: how games at your level went from there */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 2px 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--line); }
.facts div { display: grid; gap: 2px; padding: 8px 10px; background: var(--surface); }
.facts b { font: 500 16px var(--font-body); font-variant-numeric: tabular-nums; color: var(--ink); }
.facts span { font-size: 12px; color: var(--muted); line-height: 1.3; }
@media (max-width: 420px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Every opening card the same size in every list: two lines of description, one line of figures */
.ocard-top { flex-wrap: wrap; }
.ocard-top h3 { min-width: 0; flex: 1 1 14ch; overflow-wrap: anywhere; }
.ocard-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.odesc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ostats { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.olist { grid-auto-rows: 1fr; }
@media (max-width: 560px) { .ocard-tags .tag { display: none; } .odesc { min-height: 0; } }


/* Your Lichess games: what you play most, and what to train, side by side */
.my-lichess { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 12px 32px; margin: 14px 0 6px; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.ml-col h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.ml-col h3 { margin: 12px 0 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
.ml-col .info { margin: 2px 0 6px; font-size: 13px; }
.ml-list { margin: 0; padding: 0; list-style: none; display: grid; }
.ml-row { width: calc(100% + 16px); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 8px; margin: 0 -8px;
  border: 0; border-radius: 6px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font-size: 14px; }
button.ml-row:hover, button.ml-row:focus-visible { background: var(--raised); }
.ml-static { cursor: default; }
.ml-name { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-meta { flex: none; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ml-meta b { color: var(--ink); font-weight: 500; }
.ml-meta b.up { color: var(--good); } .ml-meta b.down { color: var(--bad); }
.ml-meta small { font-size: 12px; }
#my-mistakes .cta { display: inline-block; margin-top: 8px; text-decoration: none; }
@media (max-width: 560px) { .ml-row { flex-direction: column; gap: 0; } }

/* This line: its box, the list of lines and the moves. Under the panel on laptops, in its own column
   to the left of the board on wide screens, so the space beside the board is used. */
.side { grid-area: side; min-width: 0; display: grid; gap: var(--gap-group); align-content: start; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
@media (min-width: 821px) { .layout:has(.side) { grid-template-areas: "play panel" "play side"; } }
@media (min-width: 1400px) {
  /* The board gets the room first: the lists and the panel keep a set width until the board is full size. */
  .layout:has(.side) { grid-template-columns: clamp(230px, 16vw, 320px) minmax(0, min(calc(100vh - 150px), 880px)) clamp(320px, 24vw, 460px); grid-template-areas: "side play panel"; gap: clamp(20px, 2vw, 40px); }
  .side { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; }
}
/* The line-done summary: its own box above the coach, kept while you play on */
.line-done { padding: 14px 16px; border: 1px solid var(--good); border-radius: 12px; background: var(--bg); }
.line-done p { margin: 0; padding: 0; border: 0; background: none; font-size: 15px; color: var(--ink); }
.line-done .done-head { font-weight: 600; color: var(--good); }
.line-done b { font-family: var(--font-body); }
@media (max-width: 820px) { .line-done { order: -1; } } /* after the coach, before the panel head */

/* Coach, clearest first: what to play and why, then the last move, then the other replies folded */
.coach .why .why-now { color: var(--ink); font-size: 1rem; }
.coach .why .why-now b { font-family: var(--font-body); margin-right: 4px; }
.coach .why .prev { font-size: 14px; }
.coach .why .prev b { font-family: var(--font-mono); font-weight: 500; }
.reps-box summary { cursor: pointer; font-size: 14px; color: var(--muted); }
.reps-box .reps { margin-top: 6px; }

/* How to go on: each option is a move you can click to play */
.line-done .tips { list-style: none; padding: 0; gap: 6px; }
.line-done .tip { width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--ink); font: inherit; font-size: 14px; line-height: 1.45; cursor: pointer; }
.line-done .tip:hover, .line-done .tip:focus-visible { border-color: var(--ink); }
.line-done .tip b { display: inline; margin: 0; }

/* Light / dark toggle in the header */
.theme { display: inline-grid; place-items: center; min-width: 40px; height: 38px; padding: 0 10px; }
.top-in .crumb { margin-left: auto; }

/* Moves so far: each move is a button that goes back to it */
.moves button.mv { border: 0; background: none; color: inherit; font: inherit; padding: 0 4px; margin: 0 -4px; border-radius: 4px; text-align: left; cursor: pointer; }
.moves button.mv:hover, .moves button.mv:focus-visible { background: var(--raised); }

/* Legend for the move symbols */
.legend { padding-block: 8px 4px; }
.legend h2 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.legend ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 20px; }
.legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.legend li b { color: var(--ink); font-weight: 500; margin-right: 2px; }
.legend .legend-badge { position: static; flex: none; width: 22px; height: 22px; font-size: 11px; animation: none; }
.legend .info { font-size: 12px; margin: 8px 0 0; }

/* Checkmate: a banner over the board, and confetti */
.board-frame { position: relative; container-type: inline-size; }
.mate-banner { position: absolute; inset: 0; display: grid; place-items: center; z-index: 20; pointer-events: none;
  font: 700 clamp(20px, 11cqi, 64px) var(--font-body); color: #fff; text-shadow: 0 2px 12px rgb(0 0 0 / .6);
  background: rgb(46 125 50 / .35); border-radius: var(--radius); animation: mate-in .4s ease-out; }
@keyframes mate-in { from { opacity: 0; transform: scale(.9); } }
.confetti { position: fixed; z-index: 60; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { to { transform: translate(var(--dx), 80vh) rotate(var(--rot)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mate-banner { animation: none; } }

/* The start of a line: what the opening is about and which line this is */
.coach .why .intro { color: var(--ink); font-size: 15px; }
.coach .why .intro b { font-family: var(--font-body); }
/* The end of a line: a clear head, and Next line right there */
.line-done .done-head { display: flex; align-items: center; gap: 6px; font-size: 1.05rem; }
.line-done .done-head .ico { stroke: var(--good); stroke-width: 3; }
.line-done .done-next { justify-self: start; margin-top: 4px; }
.line-banner { background: rgb(46 125 50 / .25); font-size: clamp(18px, 8cqi, 44px); }
.line-banner.trap-banner { background: rgb(196 36 42 / .28); }

/* Lines you have played through (green) and cleared (stronger green, with a tick) */
.line-btn.learned { background: color-mix(in srgb, var(--good) 10%, transparent); }
.line-btn.cleared { background: color-mix(in srgb, var(--good) 22%, transparent); }
.line-btn.learned .line-name, .line-btn.cleared .line-name { color: var(--ink); }
.line-btn.now.learned, .line-btn.now.cleared { border-color: var(--good); }

/* Done lines stand out: a green edge and a labelled tag; the line box says it too */
.line-btn.learned, .line-btn.cleared { box-shadow: inset 3px 0 0 var(--good); }
.done-tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 5px; border-radius: 99px; font-size: 11px; font-weight: 600;
  color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); white-space: nowrap; }
.line-btn.cleared .done-tag { color: #fff; background: var(--good); }
.line-btn.cleared .done-tag .ico { stroke: #fff; }
.done-tag .ico { width: 12px; height: 12px; stroke-width: 3.2; }
.lb-status { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; border-radius: 6px; font-size: 13px; font-weight: 600;
  color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.lb-status.cleared { color: #fff; background: var(--good); }
.lb-status .ico { width: 16px; height: 16px; stroke-width: 3; }
.lb-status.cleared .ico { stroke: #fff; }

/* Game over: how your moves were rated */
.game-stats { display: grid; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.game-stats .gs-head { margin: 0; padding: 0; border: 0; background: none; font-weight: 600; color: var(--ink); font-size: 15px; }
.game-stats ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.game-stats li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.game-stats li b { color: var(--ink); font-family: var(--font-body); min-width: 1.2em; text-align: right; }
.game-stats li.none { opacity: .45; }
.game-stats .legend-badge { position: static; flex: none; width: 20px; height: 20px; font-size: 10px; animation: none; }

/* Trap lines: a tag in the list, and a note when the mistake is played */
.trap-tag { display: inline-block; padding: 0 6px; margin-right: 2px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: #c4242a; vertical-align: 1px; }
.coach .why .trap-now { color: var(--ink); background: color-mix(in srgb, var(--bad) 12%, transparent); padding: 6px 10px !important; border-radius: 2px; }
.coach .why .intro.plan, .line-done .plan { font-size: 15px; color: var(--ink); }

/* Progress to a file and back */
.backup { padding-block: 12px 4px; }
.backup h2 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.backup .info { margin: 0 0 8px; font-size: 13px; }
.backup-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.file-btn { cursor: pointer; }

/* Star an opening into your repertoire */
.star { border: 0; background: none; padding: 0 2px; font-size: 18px; line-height: 1; cursor: pointer; color: var(--line); }
.ocard.side-w .star { color: #cfcfcf; } .ocard.side-b .star { color: #4a4744; }
.star[aria-pressed="true"], .ocard .star[aria-pressed="true"] { color: #e0b23a; }
.star:hover { color: #e0b23a; }
.game-stats li button { display: flex; align-items: center; gap: 6px; width: 100%; padding: 2px 4px; margin: -2px -4px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.game-stats li button:hover:not(:disabled) { background: var(--line); }
.game-stats li button:disabled { cursor: default; }
.done-why { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: 15px; color: var(--ink); }
button.link { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.message button.link { display: block; margin-top: 6px; }
.lb-choice { margin: 0; font-size: 13px; color: var(--ink); }
.lb-choice button.link { margin-left: 6px; font-size: 12px; color: var(--muted); }
/* A moment that matters: a strip above the board that stays until you choose what to do; the board
   stays in full view, with the moment's arrows on it. */
.moment { display: grid; gap: 6px; padding: 10px 14px; border-radius: 0 0 var(--radius) var(--radius); background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-top: 3px solid var(--tone); box-shadow: var(--shadow); animation: moment-in .2s ease-out; }
.moment-trap, .moment-blunder, .moment-wrong { --tone: var(--bad); }
.moment-chance, .moment-good { --tone: var(--good); }
.moment .moment-title { margin: 0; font: 800 clamp(20px, 2.4vw, 28px)/1 var(--font-display); color: var(--tone); letter-spacing: -.01em; }
.moment .moment-text { margin: 0; font-size: 15px; line-height: 1.4; }
.moment-swing { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.moment-swing b { color: var(--ink); font-variant-numeric: tabular-nums; }
.moment-swing i { position: relative; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.moment-swing s { position: absolute; inset: 0 auto 0 0; background: var(--muted); }
.moment-swing s.to { background: var(--good); opacity: .85; animation: moment-grow .8s .2s ease-out both; }
.moment-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.moment-actions button { padding: 7px 14px; }
@keyframes moment-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes moment-grow { from { transform: scaleX(.6); transform-origin: left; } }
@media (prefers-reduced-motion: reduce) { .moment, .moment-swing s.to { animation: none; } }
/* The lines as a list or as a tree */
.lines-view { display: flex; gap: 4px; margin: 8px 0 6px; }
.chip-btn { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.chip-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.lines-tree { max-height: 420px; overflow: auto; font-size: 13px; }
.lines-tree ul { margin: 0; padding: 0 0 0 14px; list-style: none; border-left: 1px solid var(--line); }
.lines-tree > ul { padding-left: 0; border-left: 0; }
.lines-tree li { margin: 4px 0; }
.tree-moves { font-family: var(--font-mono); color: var(--ink); margin-right: 6px; }
.tree-end { display: inline-flex; align-items: baseline; gap: 4px; margin: 2px 4px 2px 0; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.tree-end small { color: var(--muted); }
.tree-end.learned { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.tree-end.cleared { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--surface)); }
.tree-end.now { outline: 2px solid var(--ink); outline-offset: 1px; }
.trap-tag.soft { background: color-mix(in srgb, #e07b00 85%, black); }
.moment-quiz { --tone: var(--ink); }
.moment-quiz .moment-actions { display: grid; gap: 6px; }
.moment-quiz .moment-actions button { text-align: left; font-weight: 500; background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.moment-quiz .moment-actions button:hover { border-color: var(--ink); }
.coach .why .careful { color: var(--ink); background: color-mix(in srgb, var(--hot) 12%, transparent); padding: 6px 10px !important; border-radius: 2px; }
/* The sections, in the header of every page */
.top-nav { display: flex; gap: 4px; margin-right: auto; margin-left: 12px; }
.top-nav a { padding: 6px 10px; border-radius: 8px; color: var(--muted); font-weight: 500; text-decoration: none; }
.top-nav a:hover { color: var(--ink); background: var(--bg); }
.top-nav a[aria-current="page"] { color: var(--ink); background: var(--bg); box-shadow: inset 0 -2px 0 var(--ink); }
/* Find a player: in every header, it opens their profile */
.top-search input { width: 170px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.top-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 1600px) {
  .top-in { flex-wrap: wrap; }
  .top-in::after { content: ""; order: 2; flex-basis: 100%; height: 0; } /* the links and the search start a second row */
  .top-nav { order: 3; flex: 1 1 auto; margin: 0; } .top-search { order: 4; flex: 0 1 220px; } .top-search input { width: 100%; }
}
@media (max-width: 560px) { .top-search { flex: 1 1 200px; } }

/* Profile: the player card, poster headline and skill panels */
.profile { max-width: 1080px; margin-inline: auto; padding-block: clamp(16px, 3vh, 28px) 48px; display: grid; gap: 18px; }
/* Profile rhythm: generous space between groups, tight inside a group (rating + key numbers,
   analyse + skills, the players bar + hero, the small print + what next) */
#profile { --flow: 40px; --tight: 12px; display: grid; gap: var(--flow); }
@media (max-width: 560px) { #profile { --flow: 28px; --tight: 10px; } }
#profile > .pf-chart + .pf-kpis, #profile > .pf-skills-card + .pf-analyse, #profile > .pf-players + .pf-hero, #profile > .pf-name-row + .pf-hero, #profile > .pf-about-data + .pf-next { margin-top: calc(var(--tight) - var(--flow)); }
#profile-msg:empty { display: none; }
.pf-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.pf-bar .info { max-width: 60ch; font-size: 14px; }
.pf-search { flex: 1 1 280px; max-width: 440px; flex-wrap: nowrap; }
.pf-search input { flex: 1 1 0; min-width: 0; }
.pf-search button { flex: none; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.pf-search input { background: var(--surface); }

/* Hero: the black player card and the type in poster type */
.pf-hero { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 48px); align-items: start; padding-block: 12px; }
.pf-pcard { width: 300px; padding: 20px 20px 14px; background: var(--card); color: var(--card-ink); border-radius: 4px; box-shadow: 0 22px 44px rgb(20 20 20 / .25); }
.pf-pcard-top { display: flex; justify-content: space-between; align-items: flex-start; }
.pf-ovr { display: block; font: 400 72px/0.9 var(--font-poster); color: var(--card-hot); }
.pf-pos { font: 400 22px var(--font-poster); letter-spacing: .04em; }
.pf-piece { font-size: 84px; line-height: 1; }
.pf-pcard-name { margin: 12px 0 8px; padding: 6px 0; text-align: center; font: 400 26px var(--font-poster); letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere;
  border-block: 1px solid color-mix(in srgb, var(--card-ink) 30%, transparent); }
.pf-pcard-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; padding: 2px 10px; }
.pf-pcard-stats span { display: flex; gap: 8px; align-items: baseline; font: 400 16px var(--font-poster); letter-spacing: .04em; opacity: .85; }
.pf-pcard-stats b { font: 400 26px var(--font-poster); font-weight: 400; opacity: 1; min-width: 1.6em; }
.pf-pcard-foot { margin: 10px 0 0; text-align: center; font: 500 10px var(--font-body); letter-spacing: .18em; opacity: .7; }
.pf-h1 { margin: 6px 0 0; font: 400 clamp(3.4rem, 9vw, 6rem)/0.92 var(--font-poster); text-transform: uppercase; letter-spacing: 0; }
.pf-sub { margin: 6px 0 0; font: 400 clamp(1.5rem, 3.5vw, 2.2rem)/1.1 var(--font-poster); color: var(--muted); }
.pf-about { margin-top: 16px; display: grid; gap: 8px; max-width: 64ch; }
.pf-about p { margin: 0; }
.pf-about span { color: var(--muted); }
.pf-best { margin: 14px 0 0; font-size: 14px; }

/* Panels: paper with a heavy rule on top */
.pf-card, .pf-kpis > div { background: var(--surface); border-radius: 0; border-top: 3px solid var(--rule); padding: clamp(16px, 2vw, 24px); min-width: 0; }
.pf-card h2 { margin: 0 0 12px; font: 600 12px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pf-card h2.pf-good { color: var(--good); }
.pf-card h2.pf-bad { color: var(--hot); }
.pf-card h3 { margin: 18px 0 6px; font: 600 11px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pf-kpis { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.pf-kpis dt, .pf-stats dt { font: 600 11px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pf-kpis dd { margin: 4px 0 0; font: 400 34px/1 var(--font-poster); }
.pf-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.pf-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pf-rows li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; }
.pf-rows li .wdl { grid-column: 1 / -1; height: 6px; }
.pf-rows small { color: var(--muted); font-variant-numeric: tabular-nums; }
.pf-stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.pf-stats dd { margin: 2px 0 0; font: 400 28px/1 var(--font-poster); }

/* Skill bars: one orange, the value in ink beside it */
.pf-note { margin: -4px 0 16px; font-size: 13px; }
.pf-skills { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 32px; }
@media (max-width: 860px) { .pf-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pf-skills { grid-template-columns: 1fr; } }
.pf-skills li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; align-content: start; }
.pf-skill-name { font-weight: 600; }
.pf-skill-val { font: 400 26px/1 var(--font-poster); }
.pf-meter { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 3px; background: var(--track); }
.pf-meter i { display: block; height: 100%; border-radius: 3px; background: var(--data); }
.pf-meter::after { content: ""; position: absolute; left: var(--even, 50%); top: -3px; bottom: -3px; width: 1px; background: var(--muted); opacity: .5; } /* the mark: as good as the player's opponents (the level the rating sets) */
.pf-means { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13.5px; }
.pf-skills small { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.pf-train { grid-column: 1 / -1; margin: 4px 0 0; padding: 8px 10px; font-size: 13px; background: var(--raised); border-radius: 2px; }
.pf-skill-none .pf-skill-name, .pf-skill-none .pf-skill-val { color: var(--muted); }
@media (max-width: 640px) {
  .pf-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pf-about { text-align: left; }
  .pf-pcard { width: min(300px, 100%); }
}
/* Profile: rating over time (one line, one axis) */
.pf-chart { position: relative; }
.pf-chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 8px; }
.pf-chart-head h2 { margin: 0 auto 0 0; }
.pf-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.pf-seg button { border: 0; background: none; color: var(--muted); font: 600 12px var(--font-body); padding: 6px 10px; cursor: pointer; min-height: 32px; }
.pf-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.pf-chart-now { margin: 4px 0 6px; display: flex; align-items: baseline; gap: 10px; }
.pf-chart-now b { font: 400 40px/1 var(--font-poster); }
.pf-chart-now .up { color: var(--good); font-weight: 700; }
.pf-chart-now .down { color: var(--bad); font-weight: 700; }
.pf-chart-now small { color: var(--muted); }
.pf-line { display: block; width: 100%; height: auto; touch-action: pan-y; }
.pf-line .grid { stroke: var(--line); stroke-width: 1; }
.pf-line .ax { fill: var(--muted); font: 11px var(--font-body); }
.pf-line .ln { fill: none; stroke: var(--data); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pf-line .cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.pf-line circle { fill: var(--data); stroke: var(--surface); stroke-width: 2; }
.pf-line .hit { fill: transparent; }
.pf-tip { position: absolute; bottom: 8px; transform: translateX(-50%); margin: 0; padding: 0 8px; font: 600 12px var(--font-body); background: var(--ink); color: var(--bg); border-radius: 2px; white-space: nowrap; pointer-events: none; }
.pf-tip:empty { display: none; }
.pf-taste { margin: 12px 0 0; font-size: 15px; }
.pf-taste-say { margin: 0 0 10px; }
.pf-taste-grid h3 { margin-top: 0; }
.pf-rows li .pf-meter { height: 6px; }
.pf-about-data { border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 8px; }
.pf-about-data h2 { margin: 0; font: 600 12px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pf-about-data .info { max-width: 80ch; font-size: 13.5px; }
/* My practice: the plan, numbered like a training card */
.pr-head { padding-block: 8px 4px; }
.pr-head .info { margin-top: 10px; max-width: 70ch; }
.pr-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.pr-step { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: clamp(16px, 2vw, 24px); background: var(--surface); border-radius: 0; border-top: 3px solid var(--rule, var(--ink)); }
.pr-n { font: 400 48px/0.9 var(--font-poster, var(--font-display)); color: var(--hot, var(--data)); min-width: 1.2em; }
.pr-step h2 { margin: 0 0 6px; font: 400 26px/1.1 var(--font-poster, var(--font-display)); text-transform: uppercase; }
.pr-step h2 small { font: 600 13px var(--font-body); color: var(--muted); text-transform: none; margin-left: 6px; }
.pr-step p { margin: 0 0 6px; max-width: 70ch; }
.pr-how { font-size: 14px; color: var(--muted); }
.pr-go { margin-top: 12px !important; }
.pr-go .cta, .pr-ghost { display: inline-block; text-decoration: none; }
.pr-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pr-list li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.pr-list small { color: var(--muted); white-space: nowrap; }

/* Magazine details, site-wide: poster headlines, the brand, the current section, panels under a heavy rule */
.brand { font-family: var(--font-poster); font-weight: 400; font-size: 1.45rem; text-transform: uppercase; letter-spacing: .02em; }
.brand span { color: var(--hot); }
.top-nav a[aria-current="page"] { background: none; border-radius: 0; box-shadow: inset 0 -2px 0 var(--hot); }
h1, .picker h1 { font-family: var(--font-poster); font-weight: 400; text-transform: uppercase; letter-spacing: 0; line-height: .95; }
.picker .pick-h { font-size: clamp(2.6rem, 7vw, 4.6rem); }
.panel, .mine, .card { border-radius: 0 0 var(--radius) var(--radius); border-top: 3px solid var(--rule); }
.ocard { border-radius: var(--radius); }
.ocard h3 { font-family: var(--font-poster); font-weight: 400; font-size: 22px; text-transform: uppercase; letter-spacing: .01em; }
.seg { border-radius: var(--radius); }
.seg button { border-radius: 2px; }
.ghost, .controls button { color: var(--ink); }
/* Links never wear the browser's blue: plain text links are ink and bold, underlined on hover. */
:where(a) { color: inherit; }
main a:not(.cta):not(.pf-act):not(.lf-card):not(.lf-watch):not(.hero-p):not(.ocard):not(.card):not(.pf-res):not(.pf-op-link):not(.lb-op):not(.lbd-name):not(.pf-star-strip):not(.gm-who), button.link { color: var(--ink); font-weight: 700; text-decoration: none; }
main a:not(.cta):not(.pf-act):not(.lf-card):not(.lf-watch):not(.hero-p):not(.ocard):not(.card):not(.pf-res):not(.pf-op-link):not(.lb-op):not(.lbd-name):not(.pf-star-strip):not(.gm-who):hover, button.link:hover { text-decoration: underline; }
.cta { border-radius: var(--radius); }
a.cta { color: var(--accent-ink); }
@media (max-width: 560px) { /* five sections on a phone: one row that scrolls sideways if it must */
  .top-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0; margin-inline: -8px; }
  .top-nav a { white-space: nowrap; padding: 6px 8px; }
}
/* Dark mode: White's cards are dimmed warm paper, not bright cream, so they do not glare beside the
   black ones; the two sides still read apart. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ocard.side-w, :root:not([data-theme="light"]) .gm-moment.side-w { --accent: #f4efe6; --surface: #3a352e; --ink: #f4efe6; --muted: #c0b8aa; --line: #4b443b; --raised: #474037; --good: #5fc48a; --bad: #ff6b6b; }
}
:root[data-theme="dark"] .ocard.side-w, :root[data-theme="dark"] .gm-moment.side-w { --accent: #f4efe6; --surface: #3a352e; --ink: #f4efe6; --muted: #c0b8aa; --line: #4b443b; --raised: #474037; --good: #5fc48a; --bad: #ff6b6b; }
/* Profile: the slim analyse bar at the top */
.pf-analyse { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13.5px; color: var(--muted); }
.pf-analyse b { color: var(--ink); }
.pf-an-opt { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 99px; padding: 3px 10px; font: 600 13px var(--font-body); cursor: pointer; }
.pf-an-opt small { color: var(--muted); font-weight: 400; }
.pf-an-opt:hover:not(:disabled) { border-color: var(--hot); }
.pf-an-opt:disabled { opacity: .5; cursor: default; }
.pf-analyse.running { gap: 10px; }
.pf-an-bar { flex: 1 1 160px; max-width: 320px; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.pf-an-bar i { display: block; height: 100%; width: 0; background: var(--data); transition: width .3s; }

/* Openings list: the side tabs and the search on one row; the Lichess box below the list */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.og-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 6px 0 14px; }
.og-bar .choice-search { flex: 1 1 240px; max-width: 420px; }
.og-bar .search { width: 100%; }
.mine-bottom { margin-top: 28px; }
.tag.played { background: var(--data); color: var(--data-ink); }
/* Profile: star a player, compare, your starred players */
.pf-players { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.pf-players a.ghost, .pf-players .ghost { text-decoration: none; font-size: 14px; padding: 7px 12px; }
.pf-star[aria-pressed="true"] { border-color: var(--hot); color: var(--hot); }
.pf-players-list { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.pf-players-list small { color: var(--muted); font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; margin-right: 4px; }
.pf-chip { font-size: 13px; font-weight: 600; padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink) !important; text-decoration: none; }
.pf-chip.pf-vs { margin-left: -4px; padding: 4px 8px; color: var(--hot) !important; }

/* Compare: two players side by side; A is orange, B is ink-grey, each value written beside its bar */
.cmp-head .pf-h1 span { color: var(--muted); font-size: .55em; vertical-align: middle; }
.cmp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; justify-items: center; }
.cmp-type { text-align: center; margin: 10px 0 0; }
.cmp-key { display: flex; align-items: center; gap: 6px 10px; margin: -4px 0 14px; font-size: 13px; color: var(--muted); }
.cmp-key span { width: 14px; height: 6px; border-radius: 3px; display: inline-block; }
.cmp-a, .cmp-bar.a i { background: var(--data); }
.cmp-b, .cmp-bar.b i { background: var(--muted); }
.cmp-skills { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.cmp-skills li { display: grid; grid-template-columns: 150px 1fr auto; gap: 4px 16px; align-items: center; }
.cmp-label { font-weight: 600; }
.cmp-bars { display: grid; gap: 4px; }
.cmp-skills small { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.cmp-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cmp-table th, .cmp-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.cmp-table thead th { font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cmp-table tbody th { font-weight: 600; color: var(--muted); }
.cmp-table td { font-weight: 600; }
.cmp-table small { color: var(--muted); font-weight: 400; }
@media (max-width: 640px) { .cmp-skills li { grid-template-columns: 1fr auto; } .cmp-bars { grid-column: 1 / -1; grid-row: 2; } }
.cmp-head .pf-h1 { font-size: clamp(2rem, 5.5vw, 3.6rem); overflow-wrap: anywhere; }

/* Skills: six equal tiles; the explanations open together from one button */
.pf-skills-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.pf-skills-head h2 { margin: 0; }
.pf-skill-more { display: none; grid-column: 1 / -1; }
.pf-skills-card.open .pf-skill-more { display: grid; gap: 4px; }
.pf-skill-val { font-size: 34px; }
.pf-skills .pf-meter { height: 8px; border-radius: 4px; }
.pf-skills .pf-meter i { border-radius: 4px; }
/* the analyse bar above the skills, a little larger */
.pf-analyse { font-size: 14.5px; gap: 8px 10px; }
.pf-an-opt { padding: 6px 14px; font-size: 14px; }
.pf-an-opt small { font-size: 12.5px; }

.pf-analyse { display: grid; gap: 8px; }
.pf-an-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.pf-analyse.few { padding: 12px 14px; border: 1px solid var(--hot); border-radius: var(--radius); background: var(--surface); }
.pf-skill-lock { grid-column: 1 / -1; color: var(--hot); font-size: 12.5px; font-weight: 600; }
/* How games end: two rows of three numbers, each with a bar of its share (green wins, red losses) */
.pf-ends { display: grid; gap: 10px; }
.pf-ends-row { display: grid; grid-template-columns: 70px repeat(3, minmax(0, 1fr)); gap: 10px; align-items: center; }
.pf-ends-label { font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pf-ends-cell { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 8px; padding: 10px 12px; background: var(--bg); border-radius: var(--radius); }
.pf-ends-cell b { font: 400 28px/1 var(--font-poster); }
.pf-ends-cell small { color: var(--muted); font-size: 12px; }
.pf-ends-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.pf-ends-bar i { display: block; height: 100%; }
.pf-ends-row.won .pf-ends-bar i { background: var(--good); }
.pf-ends-row.lost .pf-ends-bar i { background: var(--bad); }
@media (max-width: 560px) { .pf-ends-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pf-ends-label { grid-column: 1 / -1; } }
.pf-rows .pf-meter::after { display: none; } /* the so-so mark only means something on skills */
/* The header's ★ menu of starred players */
.top-players { position: relative; }
.top-players summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 36px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--hot); font-size: 16px; }
.top-players summary::-webkit-details-marker { display: none; }
.top-players[open] summary { border-color: var(--hot); }
.top-players-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; max-height: 60vh; overflow: auto; display: grid; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--rule); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 12px 30px rgb(0 0 0 / .25); }
.top-players-menu a { padding: 8px 10px; border-radius: 4px; color: var(--ink); text-decoration: none; font-weight: 600; }
.top-players-menu a:hover, .top-players-menu a:focus-visible { background: var(--raised); }
.top-players-menu p { margin: 6px 8px; font-size: 13px; color: var(--muted); }
@media (max-width: 1600px) { .top-players { order: 5; } }
/* Rating graph: the period's high and low */
.pf-chart-now { flex-wrap: wrap; }
.pf-hilo i.hi, .pf-line circle.hi { background: var(--good); fill: var(--good); }
.pf-hilo i.lo, .pf-line circle.lo { background: var(--bad); fill: var(--bad); }
.pf-line circle.hi, .pf-line circle.lo { stroke: var(--surface); stroke-width: 2; }
/* Profile: the games list */
.pf-games { margin: 0 0 12px; padding: 0; list-style: none; display: grid; }
.pf-game { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 10px 8px; margin: 0 -8px; border-bottom: 1px solid var(--line); color: var(--ink) !important; text-decoration: none; border-radius: 4px; }
.pf-game:hover, .pf-game:focus-visible { background: var(--raised); }
.pf-game small { color: var(--muted); font-weight: 400; }
.pf-game-meta { text-align: right; font-size: 13px; }
.pf-res { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 4px; font: 400 18px var(--font-poster); color: var(--surface); }
.pf-res.r-W { background: var(--good); }
.pf-res.r-L { background: var(--bad); }
.pf-res.r-D { background: var(--muted); }
/* Game review: the story, the swing graph, the deciding moves and the move list */
.game-layout .controls button { min-width: 44px; font-size: 16px; }
.gm-here { margin: 10px 0 0; min-height: 1.5em; font-size: 14px; }
.gm-title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 4px 0; overflow-wrap: anywhere; }
.gm-title span { color: var(--muted); font-size: .6em; }
.gm-story { display: grid; gap: 6px; }
.gm-story h2, .gm-moments h2, .gm-moves h2 { margin: 10px 0 4px; font: 600 12px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.gm-story h2.pf-good { color: var(--good); }
.gm-story h2.pf-bad { color: var(--hot); }
.gm-story ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.gm-head { margin: 0; font-size: 17px; font-weight: 600; }
.gm-acc { margin: 0; color: var(--muted); }
.gm-acc b { color: var(--ink); }
.gm-noan { margin: 6px 0 0; display: grid; gap: 8px; justify-items: start; }
.gm-noan small { color: var(--muted); }
.gm-graph { margin: 0; }
.gm-graph svg { display: block; width: 100%; height: 90px; background: var(--bg); border-radius: var(--radius); cursor: pointer; }
.gm-graph .area { fill: color-mix(in srgb, var(--data) 18%, transparent); }
.gm-graph .ln { fill: none; stroke: var(--data); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.gm-graph .mid { stroke: var(--muted); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: .6; }
.gm-graph .now { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gm-graph circle.Blunder { fill: var(--bad); }
.gm-graph circle.Mistake { fill: var(--hot); }
.gm-graph circle.Inaccuracy { fill: var(--hint); }
.gm-graph circle.theirs { fill: var(--surface); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.gm-graph circle.theirs.Blunder { stroke: var(--bad); }
.gm-graph circle.theirs.Mistake { stroke: var(--hot); }
.gm-graph circle.theirs.Inaccuracy { stroke: var(--hint); }
.gm-graph .hit { fill: transparent; }
.gm-graph figcaption { margin-top: 6px; font-size: 12px; color: var(--muted); }
.gm-moments ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.gm-moment { width: 100%; margin: 0; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); cursor: pointer; font: inherit; font-size: 14px; }
.gm-moment:hover { border-color: var(--hot); }
.gm-moment.side-w, .gm-moment.side-b { background: var(--surface); color: var(--ink); border-color: var(--line); }
.gm-moment small { color: var(--muted); }
.gm-j { font: 700 15px var(--font-mono); }
.gm-j.j-Blunder, .gm-move.j-Blunder { color: var(--bad); }
.gm-j.j-Mistake, .gm-move.j-Mistake { color: var(--hot); }
.gm-j.j-Inaccuracy, .gm-move.j-Inaccuracy { color: var(--hint); }
.gm-moves ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 8px; max-height: 260px; overflow: auto; }
.gm-moves li { display: grid; grid-template-columns: 2.4em 1fr 1fr; align-items: center; }
.gm-moves .n { color: var(--muted); font: 12px var(--font-mono); }
.gm-move { border: 0; background: none; color: var(--ink); text-align: left; padding: 3px 6px; border-radius: 3px; cursor: pointer; font: 14px var(--font-mono); }
.gm-move:hover { background: var(--raised); }
.gm-move.on { background: var(--ink); color: var(--bg); }
/* Player card: the rating in the main time control, top right */
.cmp-speeds { margin-top: 12px; }
.cmp-speeds button:disabled { opacity: .4; cursor: default; }

/* Rating graph: high and low as two small stat blocks, label over number over day */
.pf-hilo { display: inline-flex; gap: 22px; margin-left: auto; }
.pf-hilo > span { display: grid; justify-items: end; gap: 2px; }
.pf-hilo small { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.pf-hilo small:first-child { font-weight: 600; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; }
.pf-hilo b { font: 400 26px/1 var(--font-poster); color: var(--ink); }
.pf-hilo i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
/* "?" help: the why on hover (title) or click */
.pf-help { display: inline-block; position: relative; vertical-align: middle; margin-left: 4px; }
.pf-help summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font: 700 11px var(--font-body); }
.pf-help summary::-webkit-details-marker { display: none; }
.pf-help[open] summary, .pf-help summary:hover { border-color: var(--hot); color: var(--hot); }
.pf-help p { position: absolute; z-index: 15; left: 0; top: calc(100% + 6px); width: min(300px, 80vw); margin: 0; padding: 10px 12px; font-size: 13px; line-height: 1.45; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--rule); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 10px 24px rgb(0 0 0 / .25); }
.pf-an-few { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }

/* Player card: the type in words under the overall; the player's piece and rating, top right */
.pf-pos { display: block; max-width: 9em; font-size: 17px; line-height: 1.05; text-transform: uppercase; }
.pf-pcard-side { display: grid; justify-items: end; gap: 6px; }
.pf-pcard-piece { width: 58px; height: 58px; }
.pf-pcard-rating { font: 400 20px/1 var(--font-poster); letter-spacing: .02em; }
.pf-pcard-rating small { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
/* Game review: who is White and who is Black */
.gm-player { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 15px; }
.gm-player img, .gm-sides img { width: 22px; height: 22px; }
.gm-player span { color: var(--muted); }
.gm-player small { color: var(--muted); margin-left: auto; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.gm-sides { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 2px 0 4px; }
.gm-sides span { display: inline-flex; align-items: center; gap: 6px; }

/* Compare: thicker bars, each value right where its bar ends */
.cmp-bars { gap: 6px; }
.cmp-bar { display: flex; align-items: center; gap: 8px; }
.cmp-bar i { display: block; flex: none; height: 14px; border-radius: 7px; min-width: 4px; }
.cmp-bar b { font: 400 22px/1 var(--font-poster); }
/* Compare: the summary in words; cards and names open each profile */
.cmp-story p { margin: 0 0 8px; max-width: 80ch; }
.cmp-story p:last-child { margin-bottom: 0; }
.cmp-card { display: block; text-decoration: none; border-radius: 4px; transition: transform .15s; }
.cmp-card:hover, .cmp-card:focus-visible { transform: translateY(-3px); }
.cmp-head .pf-h1 a { color: inherit !important; text-decoration: none; }
.cmp-head .pf-h1 a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
@media (prefers-reduced-motion: reduce) { .cmp-card { transition: none; } }
.pf-portrait { margin: 14px 0 0; max-width: 64ch; font-size: 16px; line-height: 1.55; }
.pf-about p { color: var(--muted); font-size: 14px; }
.pf-about p b { color: var(--ink); }

/* The parts the browser draws carry the palette too */
:root { accent-color: var(--data); caret-color: var(--hot); scrollbar-color: var(--line) transparent; }
::selection { background: var(--data); color: var(--data-ink); }
a { text-underline-offset: .18em; }
.pf-stats dd, .pf-kpis dd, .cmp-table td, .pf-rows small, .pf-game-meta { font-variant-numeric: tabular-nums; }
/* Drawn icons (one stroke family) in place of glyphs */
.ico.ico-solid { fill: currentColor; stroke: none; }
.pf-star .ico, .top-players .ico, .game-layout .controls .ico { vertical-align: -3px; stroke-width: 2; }
.top-nav a { white-space: nowrap; } /* "My practice" never breaks onto two lines */
.account { flex-wrap: nowrap; }

/* Header account: the rating as a small stat (label over number) */
.account { gap: 10px; align-items: center; }
.rating-hint { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: 270px; padding: 12px 30px 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); color: var(--ink); font: 400 13px/1.45 var(--font-body, inherit); letter-spacing: 0; text-transform: none; white-space: normal; box-shadow: 0 8px 24px rgb(0 0 0 / .25); }
.rating-hint[hidden], body:has(#picker[hidden]) .rating-hint { display: none; } /* only over the openings list, never over a trainer */
.hint-short { display: none; }
/* Phones: a short line in the header's free space, left of the search, pointing at the rating */
@media (max-width: 560px) {
  .rating-hint { top: 0; bottom: 0; right: calc(100% + 41px); width: max(70px, calc(100vw - 300px)); padding: 0 8px 0 0; display: flex; align-items: center; justify-content: flex-end;
    border: 0; background: none; box-shadow: none; color: var(--muted); font-size: 11.5px; line-height: 1.25; text-align: right; }
  .rating-hint::before, .rating-hint .hint-long, .rating-hint-x { display: none; }
  .rating-hint .hint-short { display: block; }
  .rating-hint .hint-short::after { content: " →"; color: var(--hot); }
}
.rating-hint::before { content: ""; position: absolute; top: -6px; right: 40px; width: 10px; height: 10px; background: var(--raised); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.rating-hint .link { font: inherit; padding: 0; }
.rating-hint-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.acct-stat { position: relative; display: grid; gap: 1px; padding: 0 12px; border-left: 1px solid var(--line); line-height: 1; white-space: nowrap; }
.account > .acct-stat:first-child { border-left: 0; padding-left: 0; }
.acct-k { font: 600 10px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.acct-stat b { font: 400 19px/1.1 var(--font-poster); color: var(--ink); letter-spacing: .01em; }
.account .acct-stat input { width: 3.4em; padding: 0; border: 0; border-bottom: 1px dashed var(--line); border-radius: 0; background: transparent; color: var(--ink); font: 400 19px/1.1 var(--font-poster); -moz-appearance: textfield; appearance: textfield; }
.account .acct-stat input::-webkit-outer-spin-button, .account .acct-stat input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.account .acct-stat input:hover { border-bottom-color: var(--muted); }
.account .acct-stat input:focus-visible { outline: 0; border-bottom: 2px solid var(--hot); }
@media (max-width: 560px) { .acct-stat { padding: 0 8px; } .acct-k { font-size: 9px; } }
@media (max-width: 560px) { .account { flex-wrap: wrap; row-gap: 8px; } #lichess-login { max-width: 9em; overflow: hidden; text-overflow: ellipsis; } }
/* Player card: rank on Lichess, and the card explained under it */
.pf-pcard-rank { font: 600 10px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--card-hot); }
.pf-card-col { display: grid; gap: 12px; justify-items: center; }
.pf-card-note { margin: 0; max-width: 300px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.pf-card-note b { color: var(--ink); font-weight: 600; }
.cmp-scope { margin: 8px 0 0; font-size: 13px; }

/* AA: placeholders in the muted ink; no text under 11px */
::placeholder { color: var(--muted); opacity: 1; }
.pf-pcard-foot, .pf-pcard-rank, .acct-k { font-size: 11px; }
.pf-game small, .pf-game-meta { font-size: 12.5px; }
/* Phones: how games end as a list, the portrait left-aligned, bigger tap targets, all five sections fit */
@media (max-width: 560px) {
  .pf-ends-row { grid-template-columns: 1fr; gap: 6px; }
  .pf-ends-cell { grid-template-columns: 4.2em 1fr; }
  .pf-ends-label { margin-top: 6px; }
  .pf-portrait { text-align: left; }
  .pf-train a, .pr-step a:not(.cta) { display: inline-block; padding: 6px 0; }
  .top-nav a { padding: 6px 6px; font-size: 14px; }
  .pf-line .ax { font-size: 19px; }
}
/* Profile: the lead story (form and the biggest leak), folded extra panels, and what next */
.pf-lead { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.pf-lead > div { background: var(--surface); border-top: 3px solid var(--rule); padding: clamp(16px, 2vw, 24px); display: grid; gap: 8px; align-content: start; }
.pf-lead h2, .pf-next h2 { margin: 0; font: 600 12px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pf-form-row { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.pf-more > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.pf-more > summary::-webkit-details-marker { display: none; }
.pf-more > summary h2 { margin: 0; }
.pf-more > summary span { color: var(--muted); font-size: 13.5px; }
.pf-more > summary::after { content: "+"; margin-left: auto; font: 400 26px/1 var(--font-poster); color: var(--hot); }
.pf-more[open] > summary::after { content: "–"; }
.pf-more[open] > summary::after { content: "−"; }
.pf-more[open] > summary { margin-bottom: 14px; }
.pf-more .pf-card { background: none; border: 0; padding: 0; }
.pf-more-body h3 { margin-top: 0; }
.pf-next { display: grid; gap: 10px; padding-top: 8px; }
.pf-next > div { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pf-next .cta, .pf-next .ghost { text-decoration: none; }
/* Opening style bars are categories, not "what you work on": ink, not orange */
.pf-taste-grid .pf-meter i { background: var(--muted); }
.link-out { font-size: 14px; }
/* Profile hero: the portrait in two sentences, the rest in one fold; the card explained in a fold */
.pf-why-type { margin-top: 12px; }
.pf-card-help > summary { cursor: pointer; color: var(--hot); font-weight: 600; font-size: 14px; list-style-position: inside; }
/* Opening taste: one tile per colour, with its king */
.pf-taste-tiles { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.pf-taste-tile { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-top: 3px solid var(--hot); background: var(--surface); }
.pf-taste-tile img { width: 36px; height: 36px; }
.pf-taste-tile span { display: grid; line-height: 1.15; text-align: left; }
.pf-taste-tile b { font: 400 22px/1.05 var(--font-poster); letter-spacing: .02em; text-transform: uppercase; }
.pf-taste-tile small { color: var(--muted); font-size: 11.5px; }
.pf-taste-tile small:first-child { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; }
@media (max-width: 860px) { .pf-taste-tiles { justify-content: center; } }
.pf-why-type .pf-about p { color: var(--ink); }
.pf-more-portrait { margin: 12px 0 0; color: var(--muted); max-width: 64ch; }
.pf-card-help { max-width: 300px; text-align: left; }
.pf-card-help .pf-card-note { margin-top: 8px; }
/* Lead story: latest news and the one leak */
.pf-latest { font-size: 14px; }
/* Phones: as on a computer, the card first with the style and strength beside it (a smaller card),
   then the opening taste and the portrait across the width; the stars, download and help under them. */
@media (max-width: 640px) {
  .pf-hero { grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; justify-items: stretch; align-items: start; text-align: left; }
  .pf-hero .pf-card-col, .pf-hero .pf-hero-text, .pf-hero .pf-type-row { display: contents; }
  .pf-hero .pf-pcard { zoom: .6; grid-area: 1 / 1 / 4 / 2; }
  #profile .pf-hero .pf-type-row > .pf-acts { grid-area: 4 / 2; position: static; flex-direction: row; gap: 6px; align-self: center; } /* level with the download button under the card */
  .pf-name-row:not(:has(.pf-acts)) .pf-name { padding-inline: 0; font-size: min(3rem, calc((100vw - 32px) / var(--n, 10) * 2)); }
  .pf-hero .pf-type-row > div:first-child { grid-area: 1 / 2; align-self: start; }
  #profile .pf-hero .pf-h1 { font-size: clamp(1.4rem, 7vw, 2.1rem); }
  .pf-hero .pf-sub { font-size: clamp(1rem, 4.6vw, 1.3rem); }
  .pf-hero .pf-hero-text > *, .pf-hero .pf-type-row > *:not(:first-child), .pf-hero .pf-card-col > *:not(.pf-pcard) { grid-column: 1 / -1; }
  /* The opening taste beside the card too, under the style: two plain rows on a rule, no boxes,
     on the same left edge as the style */
  .pf-hero .pf-type-row > .pf-taste-tiles { grid-area: 2 / 2; align-self: end; display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 0; margin: 0; width: 100%; }
  .pf-hero .pf-taste-tile { width: 100%; margin: 0; justify-self: stretch; text-align: left; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 0; border: 0; border-top: 1px solid var(--line); background: none; }
  .pf-hero .pf-taste-tile img { width: 22px; height: 22px; }
  .pf-hero .pf-taste-tile span { display: block; line-height: 1.15; }
  .pf-hero .pf-taste-tile small { display: block; font-size: 10.5px; letter-spacing: .08em; }
  .pf-hero .pf-taste-tile b { display: block; font-size: 19px; }
  .pf-hero .pf-taste-tile small:last-child { letter-spacing: 0; font-size: 11.5px; text-transform: none; }
  .pf-hero .pf-portrait { order: 2; margin: 0; } .pf-hero .pf-why-type { order: 3; }
  .pf-hero .pf-star-strip { order: 4; } .pf-hero .pf-card-col > .pf-dl { grid-area: 4 / 1; justify-self: center; margin: 0; } .pf-hero .pf-dl-menu { right: auto; left: 0; } /* straight under the card */ .pf-hero .pf-card-help { order: 6; max-width: none; }
}
/* Skeleton while the games are read */
.pf-skeleton .pf-pcard { min-height: 380px; opacity: .55; }
.pf-skeleton .pf-hero-text { display: grid; gap: 14px; }
.pf-sk-line { display: block; height: 18px; border-radius: 2px; background: var(--raised); animation: pf-pulse 1.4s ease-in-out infinite; }
.pf-sk-line.w60 { width: 60%; height: 64px; } .pf-sk-line.w80 { width: 80%; }
@keyframes pf-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .pf-sk-line { animation: none; } }
/* Skeleton while the games are read */
.pf-skeleton .pf-pcard { min-height: 380px; opacity: .55; }
.pf-skeleton .pf-hero-text { display: grid; gap: 14px; }
.pf-sk-line { display: block; height: 18px; border-radius: 2px; background: var(--raised); animation: pf-pulse 1.4s ease-in-out infinite; }
.pf-sk-line.w60 { width: 60%; height: 64px; } .pf-sk-line.w80 { width: 80%; }
@keyframes pf-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .pf-sk-line { animation: none; } }
/* Compare: the better value in each row, and two cards side by side on phones */
.cmp-table td.lead { color: var(--good); }
.cmp-table td.lead::after { content: " ▲"; font-size: .7em; vertical-align: .15em; }
@media (max-width: 560px) {
  .cmp-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cmp-cards .pf-pcard { zoom: .52; }
  .cmp-type { font-size: 12px; }
}
/* Analyse: one strip, one primary button, the bigger batches under More */
.pf-an-go { padding: 7px 16px; font-size: 14px; }
.pf-an-go small { font-weight: 400; opacity: .85; }
.pf-an-menu { position: relative; }
.pf-an-menu > summary { cursor: pointer; color: var(--muted); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; list-style: none; padding: 6px 2px; }
.pf-an-menu > summary::-webkit-details-marker { display: none; }
.pf-an-menu > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* Dark: the card is newsprint, so its big number takes a brighter orange to keep its punch */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pf-ovr { color: #c63f0a; } }
:root[data-theme="dark"] .pf-ovr { color: #c63f0a; }
.pf-analyse:not(.few):not(.running) { padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pf-lead.solo { grid-template-columns: 1fr; }
/* Panels that used to fold: always open, heading and a short line beside it */
.pf-more-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pf-more-head h2 { margin: 0; }
.pf-more-head span { color: var(--muted); font-size: 13.5px; }
.account .acct-stat input:read-only { border-bottom-color: transparent; cursor: default; }
/* Profile: facts about the last 10 games, under the form row */
.pf-facts { margin: 14px 0 0; display: grid; gap: 8px; }
.pf-facts div { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; align-items: baseline; }
.pf-facts dt { font: 700 11.5px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pf-facts dd { margin: 0; font-size: 15px; }
a.pf-res { text-decoration: none; transition: transform .12s; }
a.pf-res:hover, a.pf-res:focus-visible { transform: translateY(-2px); outline: 2px solid var(--ink); outline-offset: 1px; }
/* Skills: the scale, in its own small box under the six */
.pf-skills-card .pf-skill-scale { display: block; margin: 18px 0 0; padding: 0; border: 0; color: var(--muted); font-size: 12px; }
/* The type heading with the opening-taste tiles beside it */
.pf-type-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.pf-type-row .pf-taste-tiles { flex-direction: column; margin: 0 0 6px; }
@media (max-width: 860px) { .pf-type-row { justify-content: center; } .pf-type-row .pf-taste-tiles { flex-direction: row; } }
/* Result squares are links: black letters, not link orange */
/* Light edition: paper letters on the dark result green and red (about 6:1); dark edition: ink on the brighter ones */
a.pf-res, a.pf-res:visited { color: #f4efe6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a.pf-res { color: #141414; } }
:root[data-theme="dark"] a.pf-res { color: #141414; }
/* Download card */
.pf-card-actions { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; justify-content: center; }
/* Strengths and Train next, straight under the hero */
/* Results and openings: headings spaced inside each column; the endings grid fits a half column,
   three cells a row with the label above, on phones too */
.pf-more-body h3:not(:first-child) { margin-top: 26px; }
.pf-more-body .pf-ends-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pf-more-body .pf-ends-label { grid-column: 1 / -1; margin-top: 4px; }
.pf-more-body .pf-ends-cell { grid-template-columns: 1fr; padding: 8px 10px; }
.pf-more-body .pf-ends-cell b { font-size: 24px; }
@media (max-width: 560px) {
  /* Ten results always on one row; each square stays a full-height tap target */
  .pf-form-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
  .pf-form-row .pf-res { width: auto; height: 44px; } /* ten across the width, tall enough for a thumb */
  .pf-facts div { grid-template-columns: 1fr; gap: 2px; }
}
.pf-more-body .pf-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
/* Latest on its own: rating and form on the left, the facts about those games on the right */
@media (min-width: 761px) {
  .pf-lead.solo .pf-news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-content: start; }
  .pf-lead.solo .pf-news > * { grid-column: 1; }
  .pf-lead.solo .pf-news > .pf-facts { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; padding-left: 32px; border-left: 1px solid var(--line); }
}
.pf-news .info b.up { color: var(--good); }
.pf-news .info b.down { color: var(--bad); }
.pf-news h2 + .pf-form-row { margin-top: 4px; }
@media (max-width: 560px) {
  /* Game rows on phones: name on one line (cut with …), the details on one line under it */
  .pf-game { grid-template-columns: 34px minmax(0, 1fr); row-gap: 2px; }
  .pf-game-main { min-width: 0; }
  .pf-game-main b { display: inline-block; max-width: 72%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
  .pf-game-meta { grid-column: 2; text-align: left; }
  .pf-game-meta br { display: none; }
  .pf-game-meta small::before { content: " · "; }
}
.pf-card-actions > span { color: var(--muted); font-size: 13.5px; }
/* Phones: the board as large as the screen allows. The play column runs edge to edge, the frame
   loses its padding, and the evaluation bar is a thin strip (its number is left out). */
@media (max-width: 560px) {
  #trainer .board-row { margin-inline: -12px; }
  #trainer .board-frame { padding: 0; border: 0; background: none; }
  #trainer .board-row { grid-template-columns: 8px minmax(0, 1fr); gap: 4px; }
  #trainer .evalbar { border-radius: 3px; }
  #trainer .evalbar-num { display: none; }
}
/* Admin: visitors per day as bars, and plain count lists */
.ad-bars { width: 100%; height: auto; display: block; }
.ad-bars rect { fill: var(--hot); }
.ad-bars rect.hit { fill: transparent; }
.ad-bars g:hover rect:not(.hit) { fill: var(--ink); }
.ad-bars text { fill: var(--muted); font: 12px var(--font-body); }
.ad-rows li { grid-template-columns: minmax(0, 1fr) auto; }
.ad-rows small { font-variant-numeric: tabular-nums; }
#admin { display: grid; gap: 24px; }
#admin .pr-head .info { margin: 6px 0 0; }

/* The header as a TV scorebug: the brand in an orange slab, the sections in poster type, square cells
   on the right, and your rating always on screen in a paper box (header.js fills it on every page but
   Openings, where the rating box is the editable one in .account). On phones the sections drop to a
   row of three tabs and the search folds into an icon cell that opens across the bar. */
.top { border-bottom: 3px solid var(--rule); }
.top-in { flex-wrap: nowrap; gap: 0; padding: 0; min-height: 58px; align-items: stretch; position: relative; }
.top-in::after { display: none; }
.brand { display: flex; align-items: center; gap: 0; padding: 0 34px 0 var(--gutter); background: var(--data); color: #141414;
  font: 400 25px/1 var(--font-poster); letter-spacing: .02em; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); white-space: nowrap; }
.brand::before { content: ""; width: 28px; height: 28px; margin-right: 10px; background: currentColor; -webkit-mask: url(pieces/bN.svg) center / contain no-repeat; mask: url(pieces/bN.svg) center / contain no-repeat; }
.brand span { color: inherit; margin-left: .22em; }
.brand:focus-visible { outline-offset: -4px; outline-color: #141414; }
.top-nav { order: 0; flex: 0 1 auto; margin: 0 auto 0 10px; gap: 0; align-items: stretch; }
.top-nav a { display: flex; align-items: center; padding: 0 16px; border-radius: 0; font: 400 19px/1 var(--font-poster); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.top-nav a:hover { background: none; color: var(--ink); }
.top-nav a[aria-current="page"] { background: none; color: var(--ink); box-shadow: inset 0 -5px 0 var(--data); }
.top-search { order: 0; flex: none; display: flex; border-left: 1px solid var(--line); }
.top-search input { width: 200px; height: 100%; padding: 0 16px 0 40px; border: 0; border-radius: 0; background: transparent no-repeat 16px 50% / 15px; font-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23948b7e' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E"); }
.top-search input:hover { background-color: var(--surface); }
.top-search input:focus-visible { outline: 0; background-color: var(--surface); box-shadow: inset 0 -3px 0 var(--data); }
.top-players { order: 0; display: flex; }
.top-players summary, .top-in > .theme, .account .theme { width: 52px; height: auto; min-height: 58px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; color: var(--muted); }
.top-players summary:hover, .top-in .theme:hover { color: var(--ink); background: var(--surface); }
.top-players[open] summary { color: var(--hot); background: var(--surface); }
.top-players-menu { top: calc(100% + 3px); }
/* The rating box: label over name on the left, the number in poster type */
.top-bug, .account .acct-stat { display: flex; text-decoration: none; align-items: center; gap: 12px; padding: 0 18px; border: 0; background: var(--rule); color: var(--bg); white-space: nowrap; }
.top-bug small, .account .acct-k { font: 600 11px/1.15 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: inherit; opacity: .72; }
.top-bug strong { font: 400 30px/1 var(--font-poster); }
.top-bug:hover { color: var(--bg); background: color-mix(in srgb, var(--rule) 88%, var(--data)); }
.account { gap: 0; align-items: stretch; }
.account > .acct-stat:first-child { padding-left: 18px; }
.account .acct-stat input, .account .acct-stat input:hover { width: 2.3em; color: var(--bg); font-size: 30px; border-bottom-color: color-mix(in srgb, var(--bg) 35%, transparent); }
.account .acct-stat input:focus-visible { border-bottom-color: var(--data); }
.account .acct-stat input::placeholder { color: var(--bg); opacity: .5; }
.account #lichess-login { border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; padding: 0 16px; font-weight: 600; }
.account #lichess-login:hover { background: var(--surface); }
/* Logged out: Log in in the top row, on every page */
.top-login { display: flex; align-items: center; padding: 0 16px; border-left: 1px solid var(--line); font-weight: 700; color: var(--hot); text-decoration: none; white-space: nowrap; }
.top-login:hover { background: var(--surface); }
.account #lichess-login.acct-login { color: var(--hot); font-weight: 700; }
@media (max-width: 1100px) { .top-search input { width: 52px; padding: 0; background-position: center; } .top-search input::placeholder { color: transparent; }
  .top-search input:focus { position: absolute; inset: 0 0 0 auto; width: min(320px, 100%); z-index: 2; padding: 0 16px 0 40px; background-position: 16px 50%; background-color: var(--surface); }
  .top-search input:focus::placeholder { color: var(--muted); } }
@media (max-width: 820px) {
  .top-in { flex-wrap: wrap; }
  .top-nav { order: 5; flex: 1 0 100%; margin: 0; border-top: 1px solid var(--line); overflow: visible; }
  .top-nav a { flex: 1; justify-content: center; padding: 13px 4px 12px; font-size: 17px; }
  .brand { margin-right: auto; font-size: 20px; padding-right: 26px; padding-left: 16px; }
  .brand::before { width: 22px; height: 22px; }
  .top-in > *:not(.top-nav) { min-height: 50px; }
  .top-players summary, .top-in > .theme, .account .theme { width: 44px; min-height: 50px; }
  .top-search input { width: 44px; }
  .top-bug, .account .acct-stat { padding: 0 12px; gap: 8px; }
  .top-bug small, .account .acct-k { display: none; }
  .top-bug strong, .account .acct-stat input, .account .acct-stat input:hover { font-size: 24px; }
  .account { flex-wrap: nowrap; }
  .account #lichess-login { padding: 0 10px; font-size: 13px; }
}
@media (max-width: 560px) { .top-nav { margin-inline: 0; } .top-nav a { padding-inline: 2px; font-size: 16px; }
  .brand { font-size: 17px; padding: 0 20px 0 12px; }
  .account .acct-stat { padding: 0 10px; } .account .acct-stat input, .account .acct-stat input:hover { width: 2.1em; } .account #lichess-login { padding: 0 8px; } .brand::before { margin-right: 8px; }
  .top-players summary, .top-in > .theme, .account .theme, .top-search input { width: 40px; }
  .top-in:has(.account) .top-players { display: none; } /* Openings: rating, log in and theme need the room */
  /* One top row on phones: the brand shrinks to its knight so your rating, name and buttons sit beside it */
  .brand { font-size: 0; padding: 0 22px 0 14px; } .brand::before { margin-right: 0; width: 24px; height: 24px; }
  .top-in { flex-wrap: wrap; } .top-in > .top-search { margin-left: auto; }
  .account { flex: 0 1 auto; min-width: 0; }
  .account #lichess-login { min-width: 0; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
  /* The sections in larger poster type, scrolling sideways when they do not fit */
  .top-nav { overflow: hidden; justify-content: space-between; }
  .top-nav a { flex: 1 1 auto; padding: 14px 6px 13px; font-size: clamp(14px, 4.6vw, 19px); letter-spacing: .02em; } }

/* Stat accuracy: three steps (Fair 100, Good 250, Best 500 analysed games) under a heavy rule, the
   step reached in poster type, and the button to the next step */
.pf-analyse.pf-acc:not(.running) { display: grid; gap: 12px; padding: 16px 18px 18px; border: 0; border-top: 3px solid var(--rule); border-radius: 0 0 var(--radius) var(--radius); background: var(--surface); }
.pf-analyse.pf-acc.few:not(.running) { border: 0; border-top: 3px solid var(--data); }
.pf-acc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pf-acc-k { font: 600 11px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pf-acc-v { font: 400 28px/1 var(--font-poster); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.pf-acc-n { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pf-acc-head .pf-help { margin-left: auto; }
.pf-acc-head .pf-help p { left: auto; right: 0; } /* it sits at the right edge: open toward the page, never past it */
.pf-acc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; }
.pf-acc-bar { display: block; height: 8px; background: var(--track); border-radius: 2px; overflow: hidden; }
.pf-acc-bar i { display: block; height: 100%; background: var(--data); }
.pf-acc-label { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pf-acc-label b { font-weight: 600; color: var(--muted); }
.pf-acc-steps li.done .pf-acc-label b, .pf-acc-steps li.now .pf-acc-label b { color: var(--ink); }
.pf-acc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.pf-acc-say { margin: 0; font-size: 14px; color: var(--ink); text-wrap: pretty; }
.pf-acc-src { margin: -4px 0 0; font-size: 13px; color: var(--muted); text-wrap: pretty; }


/* Profile: which time control the page reads, under the players bar */
.pf-speeds { justify-self: start; flex-wrap: wrap; }
.pf-speeds small { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.pf-speeds [aria-pressed="true"] small { color: inherit; opacity: .7; }
#profile > .pf-speeds + .pf-hero { margin-top: calc(var(--tight) - var(--flow)); }

/* Admin: lists with a bar under each name, three narrow charts in a row, and the visitors table */
#admin .pf-card h2 small { font: 500 11px var(--font-body); letter-spacing: .06em; text-transform: none; color: var(--muted); margin-left: 6px; }
#admin .pf-kpis small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.ad-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ad-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; font-size: 14px; }
.ad-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-list li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ad-list li b small { font-weight: 400; color: var(--muted); margin-left: 4px; }
.ad-list li i { grid-column: 1 / -1; display: block; height: 4px; border-radius: 2px; background: var(--data); min-width: 4px; }
.ad-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .ad-three { grid-template-columns: minmax(0, 1fr); } }
.ad-cols text { font-size: 11px; }
.ad-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.ad-head small { font-size: 12.5px; color: var(--muted); }
.ad-table-wrap { overflow-x: auto; max-height: 520px; overflow-y: auto; margin-top: 12px; }
.ad-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ad-table th { position: sticky; top: 0; background: var(--surface); text-align: left; font: 600 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 8px 0; border-bottom: 2px solid var(--rule); white-space: nowrap; }
.ad-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ad-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ad-table td small { color: var(--muted); }

/* The card's link to the skills lands below the sticky header */
#pf-skills { scroll-margin-top: 80px; }

/* How to go on: the tips ranked, the number in poster type beside each */
.line-done .tip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.line-done .tip-n { font: 400 22px/1 var(--font-poster); color: var(--muted); min-width: .8em; }
.line-done li:first-child .tip-n { color: var(--hot); }
.line-done .tip-tag { display: inline-block; margin: 0 4px 2px 0; padding: 1px 7px; border-radius: 99px; background: var(--raised); color: var(--ink); font: 600 10.5px/1.5 var(--font-body); letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; }

/* The opening's idea, under its name */
.op-guide { margin-top: 10px; max-width: 70ch; font-size: 14px; color: var(--ink); }
.op-guide summary { cursor: pointer; font-weight: 600; color: var(--hot); }
.op-guide p { margin: 8px 0 0; line-height: 1.5; }
.op-guide ul { margin: 6px 0 0; padding-left: 1.1em; display: grid; gap: 4px; line-height: 1.45; }
.op-guide-k { font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.trap-tag.theory { background: var(--raised); color: var(--ink); }
.mate-banner.draw { background: rgb(120 110 95 / .45); font-size: clamp(18px, 8cqi, 48px); }
.mate-banner.lost { background: rgb(180 35 24 / .35); }

/* Under the board: the opening's name, what it is about, your plan and its idea (the panel beside the
   board is for the moves you play now) */
.op-about { margin-top: 28px; padding-top: 18px; border-top: 3px solid var(--rule); display: grid; gap: 8px; max-width: 70ch; }
.op-about .op-head h1 { margin: 2px 0 4px; font-size: clamp(2rem, 5vw, 2.8rem); }
.op-about .op-head .meta { margin: 0; }
#op-about p { margin: 0 0 8px; line-height: 1.55; font-size: 15px; }
#op-about .op-guide { margin-top: 4px; }

/* Moves so far: at most about 15 rows, scrolling inside; the move on the board is marked */
.moves-box .moves { max-height: calc(15 * 1.95rem); overflow-y: auto; overscroll-behavior: contain; }
.moves button.mv.now { background: var(--data); color: #141414; font-weight: 700; }

/* Under the opening's name: its results at a rating, and a slider to try others */
.op-odds { display: grid; gap: 6px; margin-top: 6px; max-width: 420px; }
.op-odds .wdl-key { margin: 4px 0 0; }
.op-odds-r { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.op-odds-r output { font: 400 18px var(--font-poster); color: var(--ink); min-width: 2.6em; }
.op-odds-r input { flex: 1; accent-color: var(--data); }
#op-about .op-lines { margin: 0 0 10px; padding-left: 1.1em; display: grid; gap: 4px; line-height: 1.5; font-size: 15px; }
#op-about .op-guide-k { margin: 6px 0 2px; font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* The opening book (Wikibooks) for the position on the board */
.why .wiki { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.why .wiki summary { cursor: pointer; font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.why .wiki p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; }
.why .wiki .wiki-h { font-weight: 700; margin-top: 10px; }
.why .wiki .wiki-src { font-size: 11.5px; color: var(--muted); }
.why .wiki .wiki-src a { color: var(--muted); }

/* Calmer trainer: the line and depth above the board, one coach card beside it, the rest folded */
#trainer .board-frame { position: relative; }
#line-at { color: var(--ink); white-space: nowrap; }
button.depth-btn { font: 600 12px var(--font-body); color: var(--ink); white-space: nowrap; padding: 3px 8px; border: 1px solid var(--line); border-radius: 99px; text-decoration: none; }
button.depth-btn:hover { border-color: var(--ink); }
#trainer .p-head .choice-label { display: none; }
.depth-ask { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(2px); }
.depth-card { width: min(380px, 100%); display: grid; gap: 8px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.depth-k { margin: 0; font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.depth-q { margin: 0 0 6px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.depth-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; text-align: left; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); cursor: pointer; }
.depth-opt:hover, .depth-opt.now { border-color: var(--ink); }
.depth-opt span:not(.depth-n) { grid-column: 1; color: var(--muted); font-size: 13px; }
.depth-n { grid-column: 2; grid-row: 1 / 3; align-self: center; font: 500 13px var(--font-mono); color: var(--muted); }
.depth-card .info { margin: 4px 0 0; font-size: 12px; }
.line-done .done-k { margin: 6px 0 0; font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.line-done .done-more summary { cursor: pointer; font-size: 14px; color: var(--muted); padding: 4px 0; }
.line-done .done-more[open] summary { color: var(--ink); }
.lines .line-box { margin: 8px 0; }

/* A quiet board: no frame, the opening's story folded in the panel, light controls */
#trainer .board-frame { padding: 0; border: 0; background: none; }
.p-head .op-head { margin-top: 10px; }
.p-head .op-head .meta { margin: 0; }
#trainer .p-head .op-head h1 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 2px 0 0; }
.op-more { border-top: 1px solid var(--line); padding-top: 12px; }
.op-more summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--muted); }
.op-more[open] summary { color: var(--ink); margin-bottom: 10px; }
.op-more #op-info { margin-bottom: 12px; }
#trainer .controls button:not(.primary) { background: none; border-color: transparent; color: var(--muted); }
#trainer .controls button:not(.primary):hover:not(:disabled) { color: var(--ink); border-color: var(--line); }

/* The page foot: move symbols in one small row, progress and privacy in one line */
.foot-mini { display: grid; gap: 8px; padding-block: 20px 28px; font-size: 12px; color: var(--muted); }
.legend-mini { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.legend-mini li { display: flex; align-items: center; gap: 5px; cursor: help; }
.legend-mini .legend-badge { position: static; flex: none; width: 20px; height: 20px; font-size: 11px; animation: none; }
.foot-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.foot-row .link { font-size: 12px; color: var(--muted); }
.foot-row label.link { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.foot-row .privacy summary { cursor: pointer; }
.foot-row .privacy p { margin: 6px 0 0; max-width: 70ch; }
/* A starred opening wears the star's yellow round its card */
.ocard.ocard:has(.star[aria-pressed="true"]), .ocard.ocard:has(.star[aria-pressed="true"]):hover { border-color: #e0b23a; box-shadow: inset 0 0 0 1px #e0b23a; }

/* One surface beside the board: no boxes inside boxes. The coach and the line lists sit flat on the
   page, split by thin rules; right and wrong show as a bar beside the coach. */
#trainer .panel { background: none; border: 0; padding: 0; gap: 18px; }
#trainer .coach { background: none; border: 0; border-radius: 0; padding: 2px 0; }
#trainer .coach:has(.message.good) .coach-face { box-shadow: 0 0 0 3px var(--good); }
#trainer .coach:has(.message.bad) .coach-face { box-shadow: 0 0 0 3px var(--bad); }
#trainer .back { border: 0; padding: 0; background: none; color: var(--muted); font-size: 14px; }
#trainer .back:hover { color: var(--ink); }
#trainer .p-head .op-head { margin-top: 6px; }
#trainer .side { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 12px 0 0; }
#trainer .line-box { background: none; border: 0; padding: 0; }
@media (min-width: 821px) and (max-width: 1399px) { #trainer.layout { grid-template-rows: auto 1fr; } }
/* All lines, grouped by depth; lines past your depth are paler until you open them */
.lines .line-group { margin: 10px 0 2px; font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lines .line-group:first-child { margin-top: 0; }
.line-btn.beyond { opacity: .55; }
.line-btn.beyond:hover { opacity: 1; }
#line-at { overflow: hidden; text-overflow: ellipsis; max-width: 40ch; }
.op-head .op-line { margin: 4px 0 0; font-size: 15px; color: var(--ink); }
.op-head .op-line:empty { display: none; }
#go-ask .go-on { justify-self: center; margin-top: 4px; font-size: 13px; color: var(--muted); }
/* A line's star in the list: green (Learn), gold (Practice), diamond (Time) */
.line-star { width: 18px; height: 18px; vertical-align: middle; stroke-width: 1.2; stroke-linejoin: round; }
.line-star.green { fill: var(--good); stroke: var(--good); }
.line-star.gold { fill: #e0b23a; stroke: #b88a12; }
.line-star.diamond { fill: #bdf0ff; stroke: #4fb8e0; filter: drop-shadow(0 0 3px rgb(120 220 255 / .7)); }
/* A player to learn from */
.learn-from { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } /* one column: heading, what was found, then the players */
.learn-from h2 { margin: 0; font-size: 18px; }
.lf-list small { color: var(--muted); font-family: var(--font-mono); }
.lf-meta { font-size: 13px; color: var(--muted); }
.lf-meta b { color: var(--ink); }
.lf-link { font-size: 13px; }
/* Leaderboard */
.lb { display: grid; gap: 14px; padding-block: 24px 40px; }
.lb-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.lb-list { margin: 0; padding: 0; list-style: none; display: grid; }
.lb-row { display: grid; grid-template-columns: 2.4em auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.lb-rank { font: 400 28px var(--font-poster); color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.lb-row:nth-child(-n+3) .lb-rank { color: var(--hot); }
.lb-card { display: block; color: inherit; text-decoration: none; }
.lb-card .pf-pcard { zoom: .5; width: 300px; box-shadow: none; transition: transform .15s; }
.lb-card:hover .pf-pcard { transform: translateY(-3px); }
.lb-card .pf-pcard-stats .lb-by { opacity: 1; color: var(--card-hot); }
.lb-info { display: grid; gap: 4px; min-width: 0; }
.lb-info p { margin: 0; }
.lbd-name { font: 400 26px var(--font-poster); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.lb-type { font-weight: 600; }
.lb-type span { color: var(--muted); font-weight: 500; }
.lb-ops { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 14px; }
.lb-ops small, .lb-value small { color: var(--muted); }
.lb-ops small { margin-right: 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.lb-value { font-size: 14px; }
@media (max-width: 560px) { .lb-row { grid-template-columns: 1.4em auto minmax(0, 1fr); gap: 10px; } .lb-card .pf-pcard { zoom: .34; } .lbd-name { font-size: 20px; } .lb-rank { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .lb-card .pf-pcard { transition: none; } }
.pf-op-link, .lb-op { color: var(--ink); font-weight: 600; text-decoration: none; }
.pf-op-link:hover, .lb-op:hover { text-decoration: underline; text-underline-offset: 2px; }
/* The opening's name beside the board: the poster face, a little larger and more open so it reads */
#trainer .p-head .op-head h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: .03em; line-height: 1.05; }
/* Admin: the visitors line and the visitors list */
.ad-line { width: 100%; height: auto; overflow: visible; }
.ad-line polyline, .ad-line .ad-curve { fill: none; stroke: var(--hot); stroke-width: 2; stroke-linejoin: round; }
.ad-line .ad-area { fill: color-mix(in srgb, var(--hot) 14%, transparent); stroke: none; }
.ad-line .ad-axis { stroke: var(--line); }
.ad-line circle { fill: var(--hot); }
.ad-line text { font: 11px var(--font-body); fill: var(--muted); }
.ad-line .hit { fill: transparent; }
.ad-line g:hover .hit { fill: color-mix(in srgb, var(--ink) 6%, transparent); }
.ad-visitors { display: grid; }
.ad-visitor { border-top: 1px solid var(--line); }
.ad-visitor summary { display: grid; grid-template-columns: minmax(10em, 1.4fr) 8em minmax(7em, 1fr) minmax(8em, 1fr) 11em 9em; gap: 10px; align-items: baseline; padding: 9px 0; cursor: pointer; font-size: 13px; list-style: none; }
.ad-visitor summary::-webkit-details-marker { display: none; }
.ad-visitor summary:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.ad-visitor .num { font-variant-numeric: tabular-nums; color: var(--muted); }
.ad-events { margin: 0 0 12px; padding: 0 0 0 12px; list-style: none; display: grid; gap: 3px; font-size: 13px; border-left: 2px solid var(--hot); }
.ad-events li { display: grid; grid-template-columns: 9em 1fr; gap: 10px; }
@media (max-width: 760px) { .ad-visitor summary { grid-template-columns: 1fr 1fr; } }
.ad-line-box { position: relative; }
.ad-line .ad-cross { stroke: var(--muted); stroke-dasharray: 3 3; }
.ad-line .ad-dot { fill: var(--hot); stroke: var(--surface); stroke-width: 2; }
.ad-tip { position: absolute; top: 0; transform: translateX(-50%); padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); font-size: 12px; line-height: 1.4; pointer-events: none; white-space: nowrap; }
.ad-key { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.ad-key span { display: inline-block; width: 14px; height: 3px; background: var(--hot); }
.ad-key .ad-k-area { height: 10px; margin-left: 12px; background: color-mix(in srgb, var(--hot) 25%, transparent); }
.ad-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ad-names { margin: 0; line-height: 1.8; }
.ad-v-head { display: grid; grid-template-columns: minmax(10em, 1.4fr) 8em minmax(7em, 1fr) minmax(8em, 1fr) 11em 9em; gap: 10px; padding: 6px 0; font: 600 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) { .ad-v-head { display: none; } }

/* The phone's bar above the board: back, the opening and line, and the mode; the panel's head moves here */
.m-bar { display: none; }
@media (max-width: 820px) {
  .m-bar { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
  .m-back { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--ink); }
  .m-title { display: grid; min-width: 0; line-height: 1.15; }
  .m-title b { font: 400 18px/1.05 var(--font-poster); letter-spacing: .02em; text-transform: uppercase; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .m-title small { font-size: 12px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .m-mode { position: relative; }
  #m-lines { max-width: 46vw; height: 40px; padding: 0 28px 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: 600 14px var(--font-body);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; }
  #m-lines::after { content: ''; position: absolute; right: 11px; top: 15px; width: 6px; height: 6px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
  .m-lines-pop { position: absolute; right: 0; top: 46px; z-index: 30; width: min(92vw, 380px); max-height: 70vh; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgb(0 0 0 / .35); }
  .m-lines-pop .line-btn { min-height: 44px; }
  .m-lines-pop .line-group { margin: 10px 6px 2px; font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  #trainer .p-head, #trainer #line-at { display: none; }
  /* One row on a 375px phone: the arrows, Hint, the modes and Restart squeezed a little */
  #trainer .controls { gap: 4px; }
  #trainer .controls > button { padding-inline: 6px; }
  #trainer #step-back, #trainer #step-fwd { min-width: 32px; padding-inline: 4px; }
  #trainer .controls .m-modes { display: flex; margin-left: auto; border: 1px solid var(--line); border-radius: 10px; padding: 1px; gap: 1px; }
  #trainer .controls .m-modes button { min-height: 40px; padding: 4px 5px; border: 0; border-radius: 7px; font-size: 13px; color: var(--muted); }
  #trainer .controls .m-modes button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
}
.m-modes { display: none; }
@media (max-width: 560px) { .ostats { flex-wrap: wrap; white-space: normal; } }

/* The path beside the board: 1 Learn, then 2 Practice; explore and the time trial are side roads */
.path { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; margin-top: 4px; }
.path-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--muted); text-align: left; cursor: pointer; }
.path-step b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.path-step small { display: block; font-size: 12px; }
.path-n { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); font: 600 12px var(--font-body); color: var(--muted); }
.path-step:hover { border-color: var(--muted); }
.path-step[aria-pressed="true"] { border-color: var(--hot); background: color-mix(in srgb, var(--hot) 8%, transparent); }
.path-step[aria-pressed="true"] .path-n { background: var(--hot); border-color: var(--hot); color: #fff; }
.path-arrow { width: 18px; height: 18px; color: var(--muted); }
.path-extra { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.path-extra .link { font-size: 13px; color: var(--muted); }
.path-extra .link[aria-pressed="true"] { color: var(--hot); }
#trainer #mode-about { margin: 6px 0 0; font-size: 13px; }
/* An opening card opens from its name (a real button), and anywhere on the card with the mouse */
.ocard-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.ocard:focus-within { border-color: var(--ink); }
.ocard-open:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; border-radius: 2px; }
/* The board's focus, and the move field: out of the way until the keyboard reaches it */
.board .sq:focus-visible { outline: 3px solid var(--hot); outline-offset: -3px; z-index: 9; }
.move-type { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.move-type:focus-within { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.move-type label { font-size: 13px; color: var(--muted); }
.move-type input { width: 12em; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: 15px var(--font-mono); }

/* The move symbols matter only where moves are judged: the trainer */
body:has(#trainer[hidden]) .legend-mini { display: none; }
/* Hint is the helpful button, so it reads clearly; Restart stays quiet until it means going on */
#trainer .controls #hint:not(:disabled) { color: var(--ink); border-color: var(--line); font-weight: 600; }
#trainer .controls #restart:not(.primary) { margin-left: auto; }

/* No lone word on the last line of a paragraph */
p, li, dd, small { text-wrap: pretty; }
/* The time trial's clock: big digits above the board, red in the last ten seconds, the seconds won or lost flashed beside it */
.trial-clock { display: flex; align-items: baseline; gap: 14px; }
.trial-clock[hidden] { display: none; }
#tc-time { font: 400 clamp(44px, 6vw, 64px)/0.9 var(--font-poster); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--ink); transition: color .2s; }
.trial-clock.low #tc-time { color: var(--bad); }
.tc-score { margin-left: auto; font-size: 15px; color: var(--muted); }
.tc-score b { font: 400 28px var(--font-poster); color: var(--ink); margin-right: 4px; }
.tc-flash { font: 600 18px var(--font-body); opacity: 0; }
.tc-flash.up { color: var(--good); }
.tc-flash.down { color: var(--bad); }
.tc-flash.show { animation: tc-flash 0.9s cubic-bezier(.16, 1, .3, 1); }
@keyframes tc-flash { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .tc-flash.show { animation: none; opacity: 1; } }
.tc-wait { display: none; font-size: 13px; color: var(--muted); }
.trial-clock.waiting #tc-time { opacity: .55; }
.trial-clock.waiting .tc-wait { display: inline; }
/* While a choice is over the board, what it locks is dimmed, so nothing behind it looks pressable */
#trainer [inert] { opacity: .4; transition: opacity .2s; }
.depth-opt.next { border-color: var(--hot); }
/* Contrast: the active step's number in dark ink on the orange; a picked segment carries an orange underline */
.path-step[aria-pressed="true"] .path-n { color: #141414; }
.seg button[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--hot); }
/* The material lead beside the taken pieces says what it is */
.captured .cap-k { margin-left: 4px; font-size: 12px; color: var(--muted); }
/* In the time trial the clock replaces the progress row, so the board moves less */
#trainer:has(#trial-clock:not([hidden])) .progress { display: none; }
/* On a phone the trainer has its own bar with a way back, so the site's section row steps aside */
@media (max-width: 820px) { body:has(#trainer:not([hidden])) .top-nav { display: none; } }

/* Line done: what you learned leads; the choice is Next line, then this line again as a small grid */
.line-done .done-learned { font-size: 15px; color: var(--ink); }
.go-next { display: grid; gap: 2px; width: 100%; text-align: left; padding: 12px 14px; }
.go-next small { font-size: 12px; font-weight: 400; opacity: .8; }
.go-grid { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px; align-items: center; margin-top: 6px; }
.go-col { display: grid; font: 600 12px var(--font-body); color: var(--ink); text-align: center; }
.go-col small, .go-row { font-size: 12px; font-weight: 400; color: var(--muted); }
.go-row { padding-right: 6px; }
.go-grid button { padding: 10px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: 600 13px var(--font-body); cursor: pointer; }
.go-grid button:hover, .go-grid button:focus-visible { border-color: var(--ink); }
/* While the line's summary is up, its own Next line is the one: the control under the board steps aside */
#trainer:has(#line-done:not([hidden])) #restart { visibility: hidden; }
.line-ok { display: inline-flex; gap: 2px; }
.line-ok .line-star { width: 15px; height: 15px; }
/* Your stars on the profile */
.pf-stars h2 { margin: 0 0 12px; }
.pf-star-totals { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 14px; }
.pf-star-totals div { display: flex; align-items: center; gap: 8px; }
.pf-star-totals .line-star { width: 24px; height: 24px; }
.pf-star-totals b { font: 400 30px var(--font-poster); }
.pf-star-totals span { font-size: 13px; color: var(--muted); }
.pf-star-ops { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pf-star-ops li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.pf-star-ops span { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pf-star-ops .line-star { width: 14px; height: 14px; margin-left: 6px; }
.pf-stars .info { margin: 10px 0 0; font-size: 12px; }
/* Download: one small icon at the card's corner, with a menu (the card, the card + style, or both) */
.pf-card-col { position: relative; }
.pf-dl { position: relative; justify-self: end; margin-top: -6px; }
.pf-dl > summary { list-style: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); cursor: pointer; }
.pf-dl > summary::-webkit-details-marker { display: none; }
.pf-dl > summary:hover, .pf-dl[open] > summary { color: var(--ink); border-color: var(--ink); }
.pf-dl-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; min-width: 150px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.pf-dl-menu button { padding: 8px 12px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: 500 14px var(--font-body); text-align: left; cursor: pointer; }
.pf-dl-menu button:hover, .pf-dl-menu button:focus-visible { background: var(--raised); }

/* The card's piece: the real black piece on the light card (dark theme), the white piece on the dark card
   (light theme); inverting the white one gave it a white outline */
.pf-pcard-piece.ink-on-light { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pf-pcard-piece.ink-on-light { display: block; } :root:not([data-theme="light"]) .pf-pcard-piece.ink-on-dark { display: none; } }
:root[data-theme="dark"] .pf-pcard-piece.ink-on-light { display: block; }
:root[data-theme="dark"] .pf-pcard-piece.ink-on-dark { display: none; }
.ad-visitors:not(.open) .ad-visitor:nth-of-type(n+11) { display: none; }
.ad-more { margin-top: 10px; }
.ad-demo-row { margin: 10px 0 0; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ad-demo-tag { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 99px; background: var(--hot); color: #141414; font-size: 12px; }
.pf-fetch { display: inline-flex; align-items: center; gap: 6px; }
.pf-fetched { color: var(--muted); font-size: 12px; }
/* Your stars in one row under the card */
.pf-star-strip { display: flex; align-items: center; justify-content: center; gap: 8px; width: min(300px, 100%); padding: 10px 14px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); text-decoration: none; font: 600 16px var(--font-body); font-variant-numeric: tabular-nums; }
.pf-star-strip b { margin-right: 8px; }
.pf-star-strip span { color: var(--muted); font-weight: 400; font-size: 13px; }
.pf-star-strip .line-star { width: 20px; height: 20px; }
.pf-star-strip:hover { border-color: var(--ink); }
/* A game's effect on the card */
.gm-impact h2 { margin: 0 0 8px; font: 600 12px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.gm-moves-card { margin: 0 0 8px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.gm-moves-card li { font-size: 15px; }
.gm-moves-card b { font: 400 22px var(--font-poster); margin-right: 4px; }
.gm-moves-card .up b { color: var(--good); }
.gm-moves-card .down b { color: var(--bad); }
.gm-moves-card .same b { color: var(--muted); }
.gm-moves-card small { color: var(--muted); margin-left: 4px; }
.gm-impact:empty { display: none; }

.path-step { padding: 10px; gap: 8px; }
.path-step b { font-size: 14px; }
.path-step small { font-size: 11px; }
/* Three steps side by side: the number above the words, so each step has the width it needs */
.path-step { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
.path-step b { white-space: nowrap; }
/* Players' names on the game page lead to their profiles */
.gm-who { color: inherit; text-decoration: none; }
.gm-who:hover { text-decoration: underline; text-underline-offset: 3px; }
.pf-news-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pf-news-head h2 { margin-right: auto; }
.pf-news-head .pf-fetch { padding: 6px 12px; font-size: 13px; }
.lb-later { padding: 18px 0 6px; font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.lb-row.unranked { opacity: .55; }
/* Fetching a player's games: a thin bar at the top of the page, filling as they come */
.pf-load { position: sticky; top: 0; z-index: 30; margin: 0 0 12px; padding: 8px 0 6px; background: var(--bg); }
.pf-load-track { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.pf-load i { display: block; height: 100%; width: 0; background: var(--data); border-radius: 4px; transition: width .3s ease-out; }
.pf-load-k { margin: 6px 0 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .pf-load i { transition: none; } }
.pf-fetch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0 4px; }
.pf-fetch-row .pf-fetch { padding: 6px 12px; font-size: 13px; }

/* Phones: the openings filters as three tight rows (label left, one sideways-scrolling row of
   choices right) and the opening cards tighter, so the list starts within the first screen. */
@media (max-width: 560px) {
  .picker { padding-top: 18px; } #picker .pick-h { font-size: 2.4rem; margin-bottom: 4px; }
  .filters { padding: 8px 10px; }
  .filters > summary { font-size: 14px; }
  .filters[open] .choices, .filters .choices { display: grid; gap: 6px; margin: 8px 0 2px; }
  .filters .choice { grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 8px; }
  .filters .choice-label { font-size: 12px; line-height: 1.2; }
  .filters .choice-about { display: none; } /* the summary line names the style */
  .filters .choice-band { grid-template-columns: 1fr; gap: 2px; } /* the slider needs the whole width */
  .filters .choice-band .choice-label { font-size: 13px; }
  .range2-ticks { font-size: 10px; letter-spacing: -.02em; }
  .filters .seg, .filters .seg:has([data-style]) { display: flex; flex-wrap: nowrap; width: auto; overflow-x: auto; scrollbar-width: none; padding: 2px; }
  .filters .seg::-webkit-scrollbar { display: none; }
  .filters .seg button { flex: none; padding: 6px 10px; font-size: 14px; white-space: nowrap; }
  #pick-msg, .og-about { font-size: 13px; margin-block: 6px; }
  .side-seg button { padding: 6px 10px; font-size: 14px; }
  .olist { gap: 8px; grid-auto-rows: auto; } /* each card its own height: one long description no longer stretches them all */
  .ocard { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .ocard .board.mini { width: 64px; }
  .ocard h3 { font-size: 18px; line-height: 1.05; }
  .ocard-body { gap: 4px; }
  .odesc { font-size: 13px; line-height: 1.4; }
  .ostats { gap: 4px 12px; font-size: 12px; margin-top: 2px; }
  .ostats .wdl { width: 80px; }
}

/* The player card with bars: a rule and the overall in the rating's colour (the leaderboard's bands),
   the style with its strength under it, and the six skills as bars. */
.pf-pcard { --band: #e2561c; border-top: 5px solid var(--band-ink, var(--band)); }
/* --band is set on each card from its rating (profile.js bandColor) */
.pf-pcard { --band-ink: var(--band); }
/* Dark mode turns the card cream: the colour a shade darker there, so it still reads */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pf-pcard { --band-ink: color-mix(in srgb, var(--band) 78%, #000); } }
:root[data-theme="dark"] .pf-pcard { --band-ink: color-mix(in srgb, var(--band) 78%, #000); }
:root .pf-pcard .pf-ovr { color: var(--band-ink); }
.pf-str { display: block; margin-top: 3px; font: 600 12px/1.2 var(--font-body); letter-spacing: .01em; text-transform: none; opacity: .8; }
.pf-pcard-bars { display: grid; gap: 7px; padding: 2px 4px 0; }
.pf-pcard-bars > div { display: grid; grid-template-columns: 52px minmax(0, 1fr) 30px; align-items: center; gap: 10px; font: 400 14px/1 var(--font-poster); letter-spacing: .05em; }
.pf-pcard-bars span { opacity: .8; }
.pf-pcard-bars i { height: 8px; border-radius: 2px; background: color-mix(in srgb, currentColor 16%, transparent); overflow: hidden; }
.pf-pcard-bars i::before { content: ""; display: block; width: var(--v); height: 100%; background: var(--band-ink); }
.pf-pcard-bars b { font-weight: 400; font-size: 20px; text-align: right; }
.pf-pcard-bars .on span, .pf-pcard-bars .on b { color: var(--band-ink); opacity: 1; }

/* Profile: the player's name heads the page, the actions in a row under it */
.pf-name { margin: 0 0 10px; font: 400 clamp(3rem, 9vw, 5.6rem)/.92 var(--font-poster); text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; }
#profile > .pf-name-row + .pf-players { margin-top: 0; }
#profile > .pf-players:empty { display: none; }
/* Star, compare and Lichess as small icons in the profile's top-right corner */
.pf-name-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf-name-row .pf-name { margin: 0; white-space: nowrap; overflow-wrap: normal; min-width: 0; font-size: min(clamp(3rem, 9vw, 5.6rem), calc((min(100vw, 1240px) - 240px) / var(--n, 10) * 2)); } /* one line always: long names get smaller (Anton is about half an em a letter) */
.pf-acts { display: flex; gap: 6px; flex: none; }
.pf-act { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: var(--radius); color: var(--muted); text-decoration: none; }
.pf-act:hover, .pf-act:focus-visible { color: var(--ink); }
.pf-act[aria-pressed="true"] { color: var(--hot); border-color: var(--hot); }
.pf-act .ico { width: 18px; height: 18px; }
/* The name is the headline; the style under it a step smaller */
.pf-hero .pf-h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
/* Phones: every control in the profile at least 44px tall, for a thumb */
@media (max-width: 640px) {
  .pf-players .ghost, .pf-players .link-out, .pf-seg button, .pf-an-opt, .pf-an-go, .pf-fetch, .pf-chip { min-height: 44px; display: inline-flex; align-items: center; }
  /* the ? keeps its small circle, inside a 44px tap area */
  .pf-help summary { position: relative; width: 44px; height: 44px; border: 0; font-size: 13px; }
  .pf-help summary::before { content: ""; position: absolute; inset: 11px; border: 1px solid currentColor; border-radius: 50%; }
  .pf-dl > summary { width: 44px; height: 44px; }
  .pf-more .pf-op-link, li > .pf-op-link { display: inline-flex; align-items: center; min-height: 44px; } /* in the opening rows; in running text the line height carries them */
  #refresh, .pf-card-help summary { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Phones: the name, then straight the card; Star, Compare, Games and Lichess come after the portrait */
@media (max-width: 640px) {
  #profile > .pf-players { order: 1; }
  .pf-name { text-align: center; }
  /* The icons stacked down the right edge beside the name and the style, taking no row of their own */
  .pf-name-row { display: block; position: relative; }
  .pf-name-row .pf-name { padding-inline: 46px; font-size: min(3rem, calc((100vw - 124px) / var(--n, 10) * 2)); }
  .pf-acts { position: absolute; top: 0; right: 0; z-index: 2; flex-direction: column; gap: 4px; }
  .pf-act { width: 40px; height: 40px; background: var(--bg); }
  #profile .pf-hero .pf-type-row > div:first-child { padding-right: 46px; }
  .pf-card-col .pf-speeds button { white-space: nowrap; }
  .pf-card-col .pf-speeds { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  #profile .pf-hero .pf-h1 { overflow-wrap: normal; } /* a style is never split mid-word ("Marathone-r") */
  #profile > .pf-hero ~ :not(.pf-players) { order: 2; }
}
/* The download menu's Dark / Light choice, above what to download */
.pf-dl-look { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; margin-bottom: 4px; border: 1px solid var(--line); border-radius: 6px; }
.pf-dl-look button { padding: 6px 8px; border: 0; border-radius: 4px; background: none; color: var(--muted); font: 600 13px var(--font-body); cursor: pointer; }
.pf-dl-look button[aria-pressed="true"] { background: var(--raised); color: var(--ink); }
/* Admin: the latest lists one compact line each */
.ad-recent li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 13.5px; line-height: 1.3; }
.ad-recent li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-recent li > small { flex: none; color: var(--muted); font-size: 12px; white-space: nowrap; }
/* What next, not logged in: your name, then Compare with me */
.pf-cmp-ask { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-cmp-ask input { flex: 1 1 180px; min-width: 0; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
/* Admin: hovering a player name shows their card beside the mouse */
.ad-card-tip { position: fixed; z-index: 60; pointer-events: none; }
.ad-card-tip[hidden] { display: none; }
.ad-card-tip .pf-pcard { zoom: .7; box-shadow: 0 18px 40px rgb(0 0 0 / .45); }
/* The hover card as it was downloaded: dark (black card) or light (cream card), and with the style beside it */
.ad-cv { display: flex; align-items: flex-start; gap: 14px; padding: 10px; border-radius: 8px; }
.ad-cv.with-style { background: #e6dfd1; color: #141414; }
.ad-cv-light.with-style { background: #1b1815; color: #f4efe6; }
:root .ad-cv-dark .pf-pcard { --card: #141414; --card-ink: #f4efe6; --band-ink: var(--band); }
:root .ad-cv-light .pf-pcard { --card: #f4efe6; --card-ink: #141414; --band-ink: color-mix(in srgb, var(--band) 78%, #000); }
:root .ad-cv-dark .pf-pcard-piece.ink-on-dark, :root .ad-cv-light .pf-pcard-piece.ink-on-light { display: block; }
:root .ad-cv-dark .pf-pcard-piece.ink-on-light, :root .ad-cv-light .pf-pcard-piece.ink-on-dark { display: none; }
.ad-cv-style { display: grid; gap: 4px; padding-top: 8px; max-width: 180px; }
.ad-cv-style b { font: 400 34px/1 var(--font-poster); text-transform: uppercase; }
.ad-cv-style span { font: 400 18px/1.1 var(--font-poster); opacity: .75; }
/* Compare: the download icon under the heading, its menu opening to the right */
.cmp-cards { position: relative; }
.cmp-dl { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); margin: 0; } /* between the two cards, at their foot */
.cmp-dl .pf-dl-menu { right: auto; left: 50%; transform: translateX(-50%); }
/* A player to learn from: the search's progress */
.lf-bar { height: 6px; margin-top: 10px; border-radius: 3px; background: var(--track, var(--line)); overflow: hidden; }
.lf-bar i { display: block; width: 3%; height: 100%; background: var(--hot); transition: width .6s ease-out; }
@media (prefers-reduced-motion: reduce) { .lf-bar i { transition: none; } }
/* A lesson on the game page: the note where the autoplay stops */
.gm-lesson { margin: 10px 0 0; padding: 12px 14px; border-left: 0; border-top: 3px solid var(--hot); background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); }
.gm-lesson p { margin: 0 0 8px; } .gm-lesson p:last-child { margin: 0; } .gm-lesson .cta { padding: 8px 16px; }
/* A player to learn from: the search panel and the players found */
.learn-from h2 small { color: var(--muted); font: 600 15px var(--font-body); margin-left: 8px; }
.lf-what { margin: 0; max-width: 70ch; color: var(--muted); }
.lf-steps { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 4px 0 0; padding: 0; list-style: none; counter-reset: lf; font-size: 14px; color: var(--muted); }
.lf-steps li { counter-increment: lf; display: flex; align-items: center; gap: 8px; }
.lf-steps li::before { content: counter(lf); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); font: 700 12px var(--font-body); }
.lf-steps li.now { color: var(--ink); font-weight: 600; } .lf-steps li.now::before { border-color: var(--hot); color: var(--hot); }
.lf-steps li.done::before { content: "✓"; background: var(--hot); border-color: var(--hot); color: #141414; }
.learn-from .lf-bar { height: 12px; border-radius: 6px; margin-top: 6px; }
.lf-now { margin: 0; font-size: 15px; }
.lf-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 28px 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.lf-list > li { display: grid; justify-items: center; gap: 10px; text-align: center; }
.lf-match { font-size: 13px; color: var(--muted); } .lf-match b { font: 400 30px/1 var(--font-poster); color: var(--hot); margin-right: 4px; }
.lf-card { text-decoration: none; color: inherit; } .lf-card .pf-pcard { zoom: .62; box-shadow: none; transition: transform .15s; }
.lf-card:hover .pf-pcard, .lf-card:focus-visible .pf-pcard { transform: translateY(-3px); }
.lf-why { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 14px; color: var(--muted); }
.lf-why li:first-child { color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.lf-why b { color: var(--ink); font-weight: 700; }
.lf-games { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .lf-games .ghost { padding: 7px 12px; font-size: 14px; text-decoration: none; color: var(--ink); }
main .learn-from a.lf-link { font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .lf-card .pf-pcard { transition: none; } }

/* Two-handle rating range: two range inputs on one track; only the thumbs take the pointer. It has a
   row of its own across the filter box, with a mark at every step. */
.choice-band { order: 10; flex: 1 1 100%; }
.choice-band .choice-label b { color: var(--ink); font-weight: 700; }
.range2 { position: relative; height: 32px; }
.range2-track { position: absolute; left: 9px; right: 9px; top: 13px; height: 6px; border-radius: 3px; background: var(--line); }
.range2-track i { position: absolute; top: 0; bottom: 0; background: var(--hot); border-radius: 3px; }
.range2 input { position: absolute; inset: 0; width: 100%; height: 32px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.range2 input::-webkit-slider-runnable-track { background: none; }
.range2 input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 3px solid var(--hot); cursor: grab; }
.range2 input::-moz-range-thumb { pointer-events: auto; width: 13px; height: 13px; border-radius: 50%; background: var(--surface); border: 3px solid var(--hot); cursor: grab; }
.range2 input::-moz-range-track { background: none; }
.range2-ticks { position: relative; height: 18px; margin: 0 9px; font: 500 12px/1 var(--font-mono); color: var(--muted); }
.range2-ticks span { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; }
.range2-ticks span.in { color: var(--ink); font-weight: 700; }
.range2 input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--hot); outline-offset: 2px; }

/* The lesson's first box: what to look for before the game plays itself. */
.gm-intro { max-width: 460px; width: calc(100% - 32px); padding: 22px 24px; border: 0; border-top: 4px solid var(--hot); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.gm-intro::backdrop { background: rgb(0 0 0 / .55); }
.gm-intro h2 { margin: 0 0 10px; font-size: 20px; }
.gm-intro p { margin: 0 0 10px; line-height: 1.45; }
.gm-intro form { margin: 16px 0 0; }
.gm-verdict { color: var(--muted); }
.gm-vs { display: grid; gap: 4px; margin-bottom: 6px; color: var(--ink); }
.gm-vs .bad { border-left: 3px solid var(--bad); padding-left: 8px; }
.gm-vs .good { border-left: 3px solid var(--good); padding-left: 8px; }

/* Admin: wider, cards in a row keep their own height, and long lists scroll inside their card. */
main.profile:has(#admin) { max-width: 1320px; }
/* Every card in a row is the same fixed height; what does not fit scrolls inside the card. */
#admin .pf-two > .pf-card, #admin .ad-three > .pf-card { height: 360px; display: flex; flex-direction: column; min-width: 0; }
#admin .pf-two > .pf-card > :last-child, #admin .ad-three > .pf-card > :last-child { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; }
#admin .ad-three > .pf-card > svg.ad-cols { flex: 0 1 auto; }
.range2-me { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.range2-me::after { content: 'You'; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); font: 700 10px/1 var(--font-mono); color: var(--ink); }
.choice-search { display: flex; align-items: center; gap: 8px; }
.pin-seg { flex: none; white-space: nowrap; } /* a one-button switch, the same as the side tabs beside it */
/* The scroll bar inside admin cards: orange, and in a lane of its own right of the numbers. */
#admin .pf-two > .pf-card > :last-child, #admin .ad-three > .pf-card > :last-child { padding-right: 14px; margin-right: -14px; scrollbar-width: thin; scrollbar-color: var(--data) transparent; }
#admin .pf-card > :last-child::-webkit-scrollbar { width: 6px; }
#admin .pf-card > :last-child::-webkit-scrollbar-thumb { background: var(--data); border-radius: 3px; }
#admin .pf-card > :last-child::-webkit-scrollbar-track { background: transparent; }
.ad-shot { display: block; width: 300px; height: auto; border-radius: 8px; }
.ad-shot.style { width: 420px; }
/* The line's end: what it gave you, then the ways on */
.depth-card.go-card { width: min(560px, 100%); max-height: calc(100% - 24px); overflow-y: auto; }
.go-sum { display: grid; gap: 6px; padding: 12px 0 4px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; }
.go-sum p, .go-sum ul { margin: 0; }
.go-sum .go-k { margin-top: 6px; font: 700 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.go-sum .go-k:first-child { margin-top: 0; }
.go-sum .done-why { padding-left: 18px; display: grid; gap: 4px; }
.go-sum .facts { margin: 2px 0; }
.go-ask-q { margin: 6px 0 0; font-weight: 700; }
/* Admin's latest downloads and analyses: an icon for the kind, what was made and its look */
.ad-act { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ad-act > .ico { flex: none; width: 18px; height: 18px; color: var(--hot); }
.ad-what { color: var(--muted); }
.ad-look { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; vertical-align: 1px; border: 1px solid var(--line); }
.ad-look.dark { background: #141414; color: #f4efe6; }
.ad-look.light { background: #f4efe6; color: #141414; }

.pf-card-col .pf-speeds { justify-self: center; } /* the time control right under the card it switches */
/* Phones: the line's end card over the whole screen, so it has room and opens at its top */
@media (max-width: 640px) {
  #go-ask { position: fixed; inset: 0; z-index: 60; padding: 12px; background: rgb(0 0 0 / .6); }
  #go-ask .depth-card.go-card { max-height: calc(100dvh - 24px); }
}
/* The filter box's summary (phones) shows it opens and closes: a small triangle, down when open */
.filters > summary { justify-content: flex-start; }
.filters > summary span { margin-left: auto; }
.filters > summary::before { content: ''; flex: none; align-self: center; width: 0; height: 0; margin-right: -4px; border-left: 6px solid currentColor; border-block: 5px solid transparent; transition: transform .15s; }
.filters[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .filters > summary::before { transition: none; } }
/* Phones: a latest-action row wraps, so where and when always shows under what was done */
@media (max-width: 640px) {
  .ad-recent li { flex-wrap: wrap; row-gap: 2px; }
  .ad-recent li > span { white-space: normal; }
  .ad-recent li > small { margin-left: auto; }
}
/* The time control under the card: as wide as the card, each button its name over its games; a small
   star on the one played most */
.pf-card-col .pf-speeds { display: flex; width: 300px; max-width: 100%; }
.pf-card-col .pf-speeds button { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 1px; padding: 6px 2px; font-size: 12.5px; line-height: 1.15; }
.pf-card-col .pf-speeds small { font-size: 11px; }
/* The star on the time control played most: a small sticker like the flag's, white edge, tilted, above
   its own button's top edge so it covers no text */
.pf-card-col .pf-speeds { overflow: visible; }
.pf-card-col .pf-speeds button { position: relative; overflow: visible; }
.pf-speed-star { position: absolute; top: -11px; right: 4px; z-index: 1; display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid #fff; border-radius: 5px; background: var(--hint); color: #141414; font-style: normal; font-size: 11px; line-height: 1; box-shadow: 0 2px 4px rgb(0 0 0 / .3); transform: rotate(10deg); }

/* A player's country flag (from Lichess) as a sticker on the card's corner: white edge, tilted, shadow */
.pf-pcard { position: relative; }
.pf-flag { position: absolute; top: -8px; right: -10px; z-index: 2; width: 52px; height: 38px; background: center / cover no-repeat; border: 3px solid #fff; border-radius: 6px; transform: rotate(8deg); box-shadow: 0 4px 8px rgb(0 0 0 / .3); pointer-events: none; }
/* Each example keeps room for its card's sticker and clips the rest, so the cards past the one row
   (zero high) show nothing, not even a sticker's edge */
.hero-ex > .hero-p { min-height: 0; overflow: hidden; padding: 10px 10px 0 0; }
/* A known pro's card: a gold frame and a PRO tag on the top edge */
.pf-pcard.pro { box-shadow: 0 0 0 3px #d4a017, 0 0 0 5px rgb(20 20 20 / .6), 0 22px 44px rgb(20 20 20 / .25); }
.pf-pcard.pro::before { content: 'PRO'; position: absolute; top: -11px; left: 16px; z-index: 2; padding: 3px 8px 2px; border-radius: 3px; background: #d4a017; color: #141414; font: 400 13px/1 var(--font-poster); letter-spacing: .12em; box-shadow: 0 2px 4px rgb(0 0 0 / .3); }
/* A pro's real name under the account name: the gold PRO tag, the name, the title */
#profile > .pf-pro-line { display: flex; align-items: center; gap: 10px; margin: -26px 0 0; font-size: clamp(1rem, 2.2vw, 1.35rem); }
.pf-pro-tag { padding: 4px 9px 3px; border-radius: 3px; background: #d4a017; color: #141414; font: 400 .8em/1 var(--font-poster); letter-spacing: .12em; }
.pf-pro-line b { font-weight: 700; }
.pf-pro-title { padding: 3px 7px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font: 700 .7em/1 var(--font-body); letter-spacing: .08em; }
@media (max-width: 640px) { #profile > .pf-pro-line { justify-content: center; margin-top: -14px; } }
/* A known streamer's card: the same frame and tag in pink, VIP */
.pf-pcard.vip { box-shadow: 0 0 0 3px #e0459b, 0 0 0 5px rgb(20 20 20 / .6), 0 22px 44px rgb(20 20 20 / .25); }
.pf-pcard.vip::before { content: 'VIP'; position: absolute; top: -11px; left: 16px; z-index: 2; padding: 3px 8px 2px; border-radius: 3px; background: #e0459b; color: #fff; font: 400 13px/1 var(--font-poster); letter-spacing: .12em; box-shadow: 0 2px 4px rgb(0 0 0 / .3); }
.pf-pro-line.vip .pf-pro-tag { background: #e0459b; color: #fff; }

.og-bar .sort-seg { flex: none; } /* sorting sits with the lists it sorts, between the tabs and the search */
/* Compare: the player you came from, VS, and the other to pick */
.cmp-pick { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 28px; margin-top: 12px; }
.cmp-pick-vs { font: 400 44px/1 var(--font-poster); color: var(--muted); }
.cmp-pick-b { display: grid; gap: 22px; width: min(100%, 380px); }
.cmp-pick-b h2 { margin: 0; font: 400 32px/1 var(--font-poster); text-transform: uppercase; }
.cmp-pick-g { display: grid; gap: 6px; }
.cmp-pick-k { margin: 0 0 2px; font: 700 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cmp-opt { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink) !important; text-decoration: none !important; transition: border-color .15s; }
.cmp-opt b { font-weight: 600; }
.cmp-opt span { color: var(--muted); transition: transform .15s, color .15s; }
.cmp-opt:hover, .cmp-opt:focus-visible { border-color: var(--ink); }
.cmp-opt:hover span, .cmp-opt:focus-visible span { color: var(--ink); transform: translateX(3px); }
.cmp-pick-form { display: flex; gap: 8px; }
.cmp-pick-form input { flex: 1; min-width: 0; height: 44px; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 14px; }
.cmp-pick-form input:focus { outline: none; border-color: var(--ink); }
.cmp-pick-form .cta { height: 44px; box-sizing: border-box; }
@media (max-width: 640px) { .cmp-pick { grid-template-columns: 1fr; justify-items: center; } .cmp-pick-a .pf-pcard { zoom: .8; } }
.coach .message:empty { display: none; } /* nothing to say: the card over the board speaks */
/* The line's end card: a close button to see the board, and a Time column */
.go-card { position: relative; }
.go-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.go-close:hover, .go-close:focus-visible { color: var(--ink); border-color: var(--ink); }
.go-card .go-grid { grid-template-columns: auto 1fr 1fr 1fr; }
/* The three ways in: the text wraps inside its box (no overflow), and hovering one rings it in the colour
   of the star it gives: green for Learn, gold for Practice, diamond blue for Time */
.path-step { min-width: 0; }
.path-step > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.path-step b, .path-step small { line-height: 1.2; white-space: normal; } /* "Time challenge" wraps in a narrow panel */
#mode-learn:hover, #mode-learn:focus-visible { border-color: var(--good); box-shadow: 0 0 0 1px var(--good); }
#mode-try:hover, #mode-try:focus-visible { border-color: #e0b23a; box-shadow: 0 0 0 1px #e0b23a; }
#mode-time:hover, #mode-time:focus-visible { border-color: #4fb8e0; box-shadow: 0 0 0 1px #4fb8e0; }
/* Your own card's piece: tap it to choose another */
.pf-pick-piece { cursor: pointer; border-radius: 6px; }
.pf-pick-piece:hover .pf-pcard-piece, .pf-pick-piece:focus-visible .pf-pcard-piece { transform: scale(1.06); }
.pf-pick-piece:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.pf-piece-menu { position: absolute; top: 70px; right: 12px; z-index: 5; display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #141414; color: #f4efe6; box-shadow: 0 10px 30px rgb(0 0 0 / .4); }
.pf-piece-menu p { margin: 0; font: 700 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #a8a093; }
.pf-piece-menu div { display: grid; grid-template-columns: repeat(3, 44px); gap: 6px; }
.pf-piece-menu div button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #3d3730; border-radius: 8px; background: none; cursor: pointer; }
.pf-piece-menu div button:hover, .pf-piece-menu div button:focus-visible { border-color: #f4efe6; }
.pf-piece-menu img { width: 30px; height: 30px; }
.pf-piece-menu { width: 180px; }
.pf-piece-menu div button.auto { border-color: #a8a093; } /* the one your games give */
/* The piece your games give: a row under the choices, icon, name and why */
.pf-piece-auto { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: start; padding: 8px; border: 1px solid #3d3730; border-radius: 8px; background: none; color: #f4efe6; text-align: left; cursor: pointer; }
.pf-piece-auto:hover, .pf-piece-auto:focus-visible { border-color: #f4efe6; }
.pf-piece-auto img { width: 28px; height: 28px; }
.pf-piece-auto small { display: block; font: 700 10px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #a8a093; }
.pf-piece-auto b { display: block; font-size: 14px; margin: 1px 0 3px; }
.pf-piece-auto em { display: block; font-style: normal; font-size: 12px; line-height: 1.35; color: #c9c1b4; }
.go-time { margin: 0 0 4px; font-size: 14px; color: var(--muted); } .go-time b { color: var(--ink); } /* the line's time and its best */
/* The line's end card, colour-coded: the kicker in the colour of the star just earned, results in their
   colours, and each column of ways on in its star's colour (green Learn, gold Practice, diamond blue Time),
   its buttons ringed in it on hover */
.go-k-gold { color: #e0b23a; } .go-k-green { color: var(--good); }
.go-sum .facts div:nth-child(1) b { color: var(--good); }
.go-sum .facts div:nth-child(3) b { color: var(--bad); }
.go-col::before { content: '★'; display: block; font-size: 13px; line-height: 1; margin-bottom: 2px; }
.go-col.go-learn::before { color: var(--good); } .go-col.go-try::before { color: #e0b23a; } .go-col.go-time-col::before { color: #4fb8e0; }
.go-grid button { transition: border-color .12s, box-shadow .12s; }
.go-grid [data-go^="learn"]:hover, .go-grid [data-go^="learn"]:focus-visible { border-color: var(--good); box-shadow: 0 0 0 1px var(--good); }
.go-grid [data-go^="try"]:hover, .go-grid [data-go^="try"]:focus-visible { border-color: #e0b23a; box-shadow: 0 0 0 1px #e0b23a; }
.go-grid [data-go="time"]:hover, .go-grid [data-go="time"]:focus-visible { border-color: #4fb8e0; box-shadow: 0 0 0 1px #4fb8e0; }
.depth-opt[data-trial="line"]:hover, .depth-opt[data-trial="line"]:focus-visible { border-color: #4fb8e0; }
@media (prefers-reduced-motion: reduce) { .go-grid button { transition: none; } }
/* Player search suggestions under the top search */
.top-search, .cmp-pick-form, .hero-search { position: relative; }
.hero-search .top-suggest { left: 0; right: auto; width: min(100%, 360px); }
@media (max-width: 560px) { .hero-search .top-suggest { top: 53px; width: 100%; } } /* under the field, over the button */
.cmp-pick-form .top-suggest { left: 0; right: auto; width: 100%; }
.top-suggest { position: absolute; top: 100%; right: 0; z-index: 30; width: min(300px, calc(100vw - 16px)); margin: 0; padding: 6px 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--data); box-shadow: 0 12px 28px rgb(0 0 0 / .25); }
.top-suggest li[role=option] { display: flex; align-items: center; gap: 6px; padding: 9px 14px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.top-suggest li[role=option]:hover, .top-suggest li[aria-selected=true] { background: var(--raised); }
.top-suggest-k { padding: 8px 14px 4px; font: 700 10px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.top-suggest-k:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.ts-title { font-size: 12px; color: var(--hot); }
.ts-on { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--good); }
.ts-who { font-weight: 500; color: var(--muted); }
.ts-tag { margin-left: auto; padding: 1px 5px; border-radius: 3px; font: 700 10px var(--font-body); letter-spacing: .08em; color: #141414; background: #d9a514; }
.ts-tag.vip { background: #e86fa8; }
.star-fly { position: fixed; z-index: 200; display: grid; justify-items: center; gap: 6px; pointer-events: none; transform-origin: 50% calc(50% - 16px); }
.star-fly .line-star { width: 100%; height: auto; aspect-ratio: 1; stroke-width: .8; filter: drop-shadow(0 0 18px rgb(120 220 255 / .8)); }
.star-fly b { font: 400 34px/1 var(--font-poster); text-transform: uppercase; letter-spacing: .03em; color: #bdf0ff; white-space: nowrap; text-shadow: 0 2px 12px rgb(0 0 0 / .6); }
.star-fly-glow { position: absolute; inset: -45% -60%; z-index: -1; background: radial-gradient(closest-side, rgb(8 18 28 / .85), rgb(8 18 28 / .5) 55%, transparent); }
.hint-tip { position: absolute; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 20; padding: 7px 11px; border-radius: var(--radius); background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; animation: hint-tip .2s ease-out; }
.hint-tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
@keyframes hint-tip { from { opacity: 0; transform: translate(-50%, 4px); } }
#trainer .controls { position: relative; }
.star-fly.green .line-star { filter: drop-shadow(0 0 18px rgb(95 196 138 / .8)); } .star-fly.green b { color: #8fe0b0; }
.star-fly.gold .line-star { filter: drop-shadow(0 0 18px rgb(232 194 90 / .85)); } .star-fly.gold b { color: #f3d27a; }
#tc-best.up { color: var(--good); font-weight: 700; }
.line-board { margin: 0 0 16px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.line-board h3 { margin: 0 0 8px; font: 700 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.line-board ol { margin: 0; padding: 0; list-style: none; }
.line-board li { display: flex; align-items: baseline; gap: 10px; padding: 6px 8px; border-radius: var(--radius); font-size: 14px; }
.line-board li span { width: 1.4em; color: var(--muted); font-variant-numeric: tabular-nums; }
.line-board li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.line-board li b { font-variant-numeric: tabular-nums; }
.line-board li.me { background: var(--raised); }
.line-board li:first-child b { color: #4fb8e0; }
.line-board .info { margin: 6px 0 0; font-size: 13px; }
.ad-line .ad-note line { stroke: var(--good); stroke-width: 1.5; stroke-dasharray: 2 3; }
.ad-line .ad-note circle { fill: var(--good); }
.ad-k-note { width: 10px; height: 10px; margin-left: 10px; border-radius: 50%; background: var(--good); }
.ad-tip-note { color: var(--good); font-weight: 600; }
.ad-notes { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ad-note-form { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-note-form input { font: inherit; font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; color-scheme: dark light; }
.ad-note-form input[name=text] { flex: 1 1 260px; min-width: 0; }
.ad-note-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.ad-note-list li { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.ad-note-list li span { width: 9.5em; flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.ad-note-list li b { flex: 1; min-width: 0; font-weight: 600; }
.ad-note-list button { border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; padding: 0 4px; }
.ad-note-list button:hover { color: var(--bad); }
.ad-line .ad-midnight { stroke: var(--line); stroke-width: 1; }
.intro-card { width: min(520px, 100%); max-height: calc(100% - 24px); overflow-y: auto; gap: 10px; }
.intro-card .intro-k { margin: 0 0 6px; font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.intro-about { font-size: 14px; line-height: 1.55; }
.intro-about p { margin: 0 0 8px; }
.intro-about ul { margin: 0 0 8px; padding-left: 18px; }