/* Chess (ADR-0103). The board's colours come from the skin (skins.js), set as
   custom properties on the stage; everything else uses the site's tokens. */

/* ---- tabs ---------------------------------------------------------------- */
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); }
.tabs button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding: var(--space-2) var(--space-1); border: 0; border-radius: var(--radius);
  background: var(--surface); color: var(--ink-soft); box-shadow: inset 0 0 0 2px var(--line);
  font: 600 var(--step--1)/1.15 var(--font-ui); cursor: pointer; touch-action: manipulation; text-align: center;
}
.tabs button > span:first-child { font-size: 1.25rem; line-height: 1; }
.tabs button[aria-selected="true"] { background: var(--arcade); color: var(--on-arcade); box-shadow: 0 0 16px var(--arcade-glow); }

/* who you play: always above the board on the Play tab */
.versus {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; width: min(100%, 36rem); margin: 0 auto var(--space-2);
  padding: 4px; border-radius: calc(var(--radius) + 4px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.versus button {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap); padding: var(--space-1) var(--space-2);
  border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-soft);
  font: 600 var(--step--1)/1.15 var(--font-ui); cursor: pointer; touch-action: manipulation; text-align: center;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.versus button > span:first-child { font-size: 1.2rem; }
.versus button[aria-pressed="true"] { background: color-mix(in srgb, var(--hot) 16%, var(--surface-2)); color: var(--ink); box-shadow: inset 0 0 0 2px var(--hot), 0 0 14px color-mix(in srgb, var(--hot) 35%, transparent); }
.versus .vs-label { overflow-wrap: anywhere; min-width: 0; }

/* how strong the bot is: − slider + and what it means */
.difficulty {
  width: min(100%, 36rem); margin: 0 auto var(--space-2); padding: var(--space-1) var(--space-3) var(--space-2);
  border-radius: var(--radius-lg); background: linear-gradient(160deg, color-mix(in srgb, var(--hot) 9%, var(--surface)), var(--surface) 60%);
  box-shadow: inset 0 0 0 1px var(--line);
}
.diff-row { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap) auto; gap: var(--space-2); align-items: center; }
.diff-row .auto-btn { padding: 0 var(--space-3); border-radius: var(--radius-full); font-size: var(--step--1); font-weight: 700; background: var(--surface-2); box-shadow: none; }
.diff-row .auto-btn[aria-pressed="true"] { background: var(--accent); color: var(--bg); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent); }
.diff-row .act { font-size: var(--step-1); border-radius: var(--radius-full); background: var(--surface-2); box-shadow: none; }
/* the slider, drawn the same in every browser: a track that fills up to the thumb */
.diff-row input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; min-height: var(--tap); margin: 0; background: transparent; cursor: pointer; accent-color: var(--hot);
}
.diff-row input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--arcade), var(--hot)); opacity: .9; }
.diff-row input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--arcade), var(--hot)); }
.diff-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%;
  background: #fff; border: 3px solid var(--hot); box-shadow: 0 0 12px color-mix(in srgb, var(--hot) 60%, transparent);
}
.diff-row input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--hot); box-shadow: 0 0 12px color-mix(in srgb, var(--hot) 60%, transparent); }
.diff-row input[type="range"]:disabled { cursor: default; filter: grayscale(.8); opacity: .55; }
.difficulty[data-locked="true"] .diff-words { color: var(--ink); }
.diff-words { margin: 0; text-align: center; font-weight: 700; color: var(--hot); max-width: none; }
.diff-note { margin: 0; text-align: center; font-size: var(--step--1); color: var(--ink-soft); max-width: none; }

/* Tournament: one switch, gold when on */
.tour { width: min(100%, 36rem); margin: 0 auto var(--space-2); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-items: center; }
.tour-btn {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-2) 0 var(--space-3);
  border: 0; border-radius: var(--radius-full); background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line);
  font: 700 var(--step-0)/1 var(--font-ui); cursor: pointer; touch-action: manipulation;
}
.tour-btn .cup { font-size: 1.2rem; filter: grayscale(1); opacity: .6; transition: filter .25s, opacity .25s; }
.tour-btn .knob { position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line); transition: background-color .25s; }
.tour-btn .knob::after { content: ''; position: absolute; left: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-soft); transition: translate .25s cubic-bezier(.3,1.4,.5,1), background-color .25s; }
.tour-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #f5b301, 0 0 18px rgb(245 179 1 / .35); }
.tour-btn[aria-pressed="true"] .cup { filter: none; opacity: 1; }
.tour-btn[aria-pressed="true"] .knob { background: #f5b301; box-shadow: none; }
.tour-btn[aria-pressed="true"] .knob::after { translate: 18px 0; background: #1a1300; }
.tour-btn:disabled { cursor: default; }
.tour-note { margin: 0; font-size: var(--step--1); color: var(--ink-soft); max-width: none; }
.tour-tag { color: var(--ink) !important; }
@media (prefers-reduced-motion: reduce) { .tour-btn .knob::after { transition: none; } }

/* ---- the stage: bars, board, status, buttons --------------------------------- */
.stage { position: relative; --board: min(100%, 36rem, calc(100dvh - 15rem)); }
.stage .table { width: max(min(var(--board), 100%), min(18rem, 100%)); margin-inline: auto; }
.board-box { position: relative; }
.board {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 6px; isolation: isolate;
  box-shadow: 0 0 0 2px var(--edge), 0 0 26px var(--edge-glow);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.board .squares { position: absolute; inset: 0; display: grid; grid-template: repeat(8, 1fr) / repeat(8, 1fr); border-radius: 6px; overflow: hidden; }
.sq { position: relative; background: var(--sq-light); box-shadow: inset 0 0 0 .5px var(--lines); }
.sq.dark { background: var(--sq-dark); }
.sq::before, .sq::after { content: ''; position: absolute; pointer-events: none; }
.sq.last::before { inset: 0; background: var(--last); }
.sq.picked::before { inset: 0; background: color-mix(in srgb, var(--pick) 30%, transparent); box-shadow: inset 0 0 0 3px var(--pick); }
.sq.over::before { inset: 0; background: color-mix(in srgb, var(--pick) 22%, transparent); box-shadow: inset 0 0 0 3px var(--pick); }
.sq.target::after { left: 36%; top: 36%; width: 28%; height: 28%; border-radius: 50%; background: var(--dot); animation: dot-in .18s ease-out; }
.sq.takes::after { left: 4%; top: 4%; width: 92%; height: 92%; background: transparent; box-shadow: inset 0 0 0 5px var(--dot); }
.sq.check::before { inset: 0; background: radial-gradient(circle, var(--check) 0%, color-mix(in srgb, var(--check) 50%, transparent) 40%, transparent 72%); animation: check-pulse 1.1s ease-in-out infinite; }
.sq.threat::after { right: 3%; top: 3%; width: 22%; height: 22%; border-radius: 50%; background: var(--check); box-shadow: 0 0 8px var(--check); }
.sq.hinted::before { inset: 4%; border-radius: 50%; box-shadow: 0 0 0 4px var(--arrow), 0 0 18px var(--arrow); animation: check-pulse 1s ease-in-out infinite; }
.sq.wrong::before { inset: 0; background: color-mix(in srgb, var(--check) 55%, transparent); animation: flash .6s ease-out both; }
.sq.right::before { inset: 0; background: rgb(34 197 94 / .55); animation: flash .8s ease-out both; }
@keyframes dot-in { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes check-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes flash { from { opacity: 1; } to { opacity: .15; } }
.co { position: absolute; font: 700 clamp(8px, 2.4vw, 12px)/1 var(--font-ui); color: var(--coord-on-light); pointer-events: none; opacity: .9; }
.sq.dark .co { color: var(--coord-on-dark); }
.co.file { right: 4%; bottom: 3%; }
.co.rank { left: 4%; top: 4%; }

.pieces, .fx { position: absolute; inset: 0; pointer-events: none; }
.piece { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; will-change: transform; }
.piece svg { width: 100%; height: 100%; transition: transform .14s ease, opacity .2s ease; }
.piece.w, .piece-btn.w, .taken .w { --fill: var(--w-fill); --line: var(--w-line); --detail: var(--w-detail); --glow: var(--w-glow); }
.piece.b, .piece-btn.b, .taken .b { --fill: var(--b-fill); --line: var(--b-line); --detail: var(--b-detail); --glow: var(--b-glow); }
.glow .piece svg { filter: drop-shadow(0 0 2.5px var(--glow)); }
.piece.lifted svg { transform: translateY(-5%) scale(1.07); }
.piece.dragging { z-index: 5; }
.piece.dragging svg { transform: translateY(-14%) scale(1.3); filter: drop-shadow(0 8px 10px rgb(0 0 0 / .35)); }
.piece.gone svg { animation: gone .34s ease-in forwards; }
.piece.fresh svg { animation: fresh .28s ease-out; }
@keyframes gone { to { transform: scale(.2) rotate(40deg); opacity: 0; } }
@keyframes fresh { from { transform: scale(.4); opacity: 0; } }
.board[data-facing="on"] .piece.b svg, .board[data-facing="on"] .piece-btn.b svg { rotate: 180deg; }

.ring, .burst { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; }
.ring::before { content: ''; position: absolute; inset: 10%; border-radius: 50%; box-shadow: 0 0 0 3px var(--pick); opacity: 0; animation: ring-out .5s ease-out both; animation-delay: inherit; }
@keyframes ring-out { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.burst i { position: absolute; left: 50%; top: 50%; width: 16%; height: 16%; clip-path: polygon(50% 0, 100% 100%, 0 80%); }
.burst i.w { background: var(--w-line); box-shadow: 0 0 6px var(--w-glow); }
.burst i.b { background: var(--b-line); box-shadow: 0 0 6px var(--b-glow); }
.burst b { position: absolute; inset: -10%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pick) 80%, transparent), transparent 65%); }
.burst.promo b { background: radial-gradient(circle, rgb(255 255 255 / .9), transparent 65%); }

.arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.arrow line { stroke: var(--arrow); stroke-linecap: round; opacity: .85; }
.arrow polygon { fill: var(--arrow); opacity: .85; }
.arrow.best line { stroke: #22c55e; } .arrow.best polygon { fill: #22c55e; }
.arrow.played line { stroke: var(--check); opacity: .6; } .arrow.played polygon { fill: var(--check); opacity: .6; }

.veil { position: absolute; inset: 0; z-index: 8; background: rgb(0 0 0 / .4); border-radius: 6px; }
.promo { position: absolute; z-index: 9; width: 12.5%; display: grid; grid-auto-rows: 1fr; height: 50%; background: var(--sq-light); box-shadow: 0 0 0 2px var(--pick), 0 10px 30px rgb(0 0 0 / .5); border-radius: 4px; overflow: hidden; }
.piece-btn { border: 0; padding: 0; background: transparent; cursor: pointer; min-height: 0; }
.piece-btn:hover, .piece-btn:focus-visible { background: color-mix(in srgb, var(--pick) 30%, transparent); }
.piece-btn svg { width: 100%; height: 100%; }

/* the result over the board */
.over {
  position: absolute; z-index: 7; left: 50%; top: 50%; translate: -50% -50%; width: min(86%, 22rem);
  padding: var(--space-4); border-radius: var(--radius-lg); text-align: center;
  background: color-mix(in srgb, var(--scene) 88%, transparent); color: var(--over-ink, #fff);
  box-shadow: 0 0 0 2px var(--edge), 0 0 40px var(--edge-glow); backdrop-filter: blur(4px);
  animation: over-in .4s cubic-bezier(.2,.9,.3,1.2) both; animation-delay: .25s;
}
.over h3 { margin: 0 0 var(--space-2); font-size: var(--step-1); }
.over p { margin: 0 0 var(--space-3); }
.over .row { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
@keyframes over-in { from { scale: .7; opacity: 0; } }
.stage[data-scene="light"] .over { --over-ink: #11141d; }

/* players' bars */
.bar { display: flex; align-items: center; gap: var(--space-2); min-height: 2.6rem; padding: var(--space-1) 0; }
.bar .who { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; min-width: 0; flex: 0 1 auto; white-space: nowrap; padding-left: 2px; }
.bar .who > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bar .who .avatar {
  flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--sq-dark); box-shadow: 0 0 0 2px var(--line); transition: box-shadow .25s;
}
.bar .who .avatar svg { width: 1.6rem; height: 1.6rem; }
.bar .who .avatar .w { --fill: var(--w-fill); --line: var(--w-line); --detail: var(--w-detail); }
.bar .who .avatar .b { --fill: var(--b-fill); --line: var(--b-line); --detail: var(--b-detail); }
.bar .who.moving .avatar { box-shadow: 0 0 0 2px var(--pick), 0 0 14px var(--pick); }
.bar .who .thinking { color: var(--ink-soft); font-weight: 400; animation: check-pulse 1s infinite; }
.bar .taken { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; flex: 1 1 auto; }
.bar .taken svg { width: 1.15rem; height: 1.15rem; margin-right: -.3rem; }
.bar .diff { font: 600 var(--step--1)/1 var(--font-ui); color: var(--ink-soft); margin-left: var(--space-2); }
.bar .clock {
  flex: 0 0 auto; margin-left: auto; padding: var(--space-1) var(--space-3); border-radius: var(--radius);
  font: 700 var(--step-1)/1.2 var(--font-mono); font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--ink-soft); box-shadow: inset 0 0 0 2px var(--line);
}
.bar .clock.on { background: var(--arcade); color: var(--on-arcade); box-shadow: 0 0 14px var(--arcade-glow); }
.bar .clock.low { background: var(--hot); color: var(--on-hot); animation: check-pulse .8s infinite; }
.stage[data-facing="on"] #bar-top { rotate: 180deg; }

.status { min-height: 1.6em; margin: var(--space-3) auto 0; text-align: center; font-weight: 700; color: var(--ink); max-width: none; }
.status:not(:empty) { width: fit-content; max-width: 100%; padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); background: var(--surface-2); }
.status .good { color: var(--accent); } .status .bad { color: var(--hot); }
.opening { min-height: 1.3em; margin: 0 auto; text-align: center; color: var(--ink-soft); font-size: var(--step--1); max-width: 36rem; }
.opening b { color: var(--arcade); }

.actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); width: min(100%, 36rem); margin: var(--space-3) auto 0; }
.act {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--tap); min-width: var(--tap); padding: var(--space-1); border: 0; border-radius: var(--radius);
  background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
  font: 600 var(--step--1)/1.1 var(--font-ui); cursor: pointer; touch-action: manipulation; text-align: center;
  transition: transform .12s, box-shadow .2s;
}
.act:not(:disabled):active { transform: scale(.96); }
.act > span:first-child { font-size: 1.25rem; line-height: 1; }
.act > span:last-child, .tabs button > span:last-child { max-width: 100%; overflow-wrap: anywhere; }
.act:disabled { opacity: .35; cursor: default; }
.act[aria-pressed="true"] { color: var(--arcade); box-shadow: inset 0 0 0 2px var(--arcade); }
.act.sm { font-size: var(--step-0); }

/* ---- big screen ------------------------------------------------------------
   The same two mechanisms as Spike Run (ADR-0017): our own full-window layout,
   which works on an iPhone, plus the real fullscreen call where it exists. */
body.big { overflow: hidden; }
body.big > :not(.wrap) { display: none; }
body.big .wrap > :not(.stage):not(dialog) { display: none; }
body.big .wrap { width: 100%; padding: 0; }
body.big .stage {
  position: fixed; inset: 0; z-index: 60; overflow: hidden; overscroll-behavior: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(var(--space-3), var(--app-top)) max(var(--space-3), env(safe-area-inset-right)) max(var(--space-3), env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left));
  background: var(--scene); color: var(--scene-ink, var(--ink));
  --board: min(calc(100vw - 1.5rem), calc(100dvh - 13rem));
}
body.big .stage .table { width: var(--board); }
body.big .actions { width: var(--board); }
/* what Big screen keeps (Settings → Big screen): each thing switched off gives its room to the board */
body.big .stage { --r-bars: 5.2rem; --r-status: 2.6rem; --r-acts: 3.6rem; }
body.big.big-no-bars .stage { --r-bars: 0rem; }
body.big.big-no-status .stage { --r-status: 0rem; }
body.big.big-no-actions .stage { --r-acts: 0rem; }
body.big .stage { --board: min(calc(100vw - 1.5rem), calc(100dvh - var(--r-bars) - var(--r-status) - var(--r-acts) - 1.6rem)); }
body.big.big-no-bars .bar { display: none; }
body.big.big-no-status :is(.status, .opening) { display: none; }
body.big.big-no-actions .actions { display: none; }
body.big.big-no-sun .stage::before, body.big.big-no-sun .stage::after { display: none; }
body.big:not(.big-no-actions) #big-set { display: none; }
.exit.gear { right: calc(max(var(--space-3), env(safe-area-inset-right)) + var(--tap) + var(--space-2)); font-size: 22px; }
body.big .stage[data-scene="dark"] { --scene-ink: #f3f4f8; --line: rgb(255 255 255 / .22); --ink: #f3f4f8; --ink-soft: #c0c6d6; --surface-2: rgb(255 255 255 / .08); }
body.big .stage[data-scene="light"] { --scene-ink: #11141d; --line: rgb(17 20 29 / .2); --ink: #11141d; --ink-soft: #4b5568; --surface-2: rgb(17 20 29 / .06); }
/* the synthwave sun and its grid, behind the board on Neon and Sunset */
body.big .stage[data-sun="on"]::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 18%; width: min(90vmin, 40rem); aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: linear-gradient(#ffd319 0%, #ff8c42 35%, #ff2bd6 70%, transparent 100%);
  -webkit-mask: repeating-linear-gradient(transparent 0 58%, #000 58% 100%) , linear-gradient(#000 0 55%, transparent 55%);
  mask: linear-gradient(#000 0 52%, transparent 52%), repeating-linear-gradient(#000 0 7px, transparent 7px 11px);
  opacity: .32; filter: blur(.5px);
}
body.big .stage[data-sun="on"]::after {
  content: ''; position: absolute; z-index: -1; left: -20%; right: -20%; bottom: 0; height: 42%;
  background:
    repeating-linear-gradient(90deg, rgb(255 43 214 / .35) 0 2px, transparent 2px 9%),
    repeating-linear-gradient(0deg, rgb(53 243 255 / .3) 0 2px, transparent 2px 14%);
  transform: perspective(300px) rotateX(58deg); transform-origin: bottom; opacity: .55;
}
.exit {
  position: absolute; z-index: 61; top: max(var(--space-3), var(--app-top)); right: max(var(--space-3), env(safe-area-inset-right));
  width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--radius-full);
  background: rgb(5 1 15 / .55); color: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .35);
  font: 400 26px/1 var(--font-ui); cursor: pointer; touch-action: manipulation;
}
.stage[data-scene="light"] .exit { background: rgb(255 255 255 / .7); color: #11141d; box-shadow: inset 0 0 0 2px rgb(17 20 29 / .3); }
/* on its side, the board takes the height and everything else goes beside it */
@media (orientation: landscape) {
  body.big .stage {
    display: grid; align-content: center; justify-content: center; column-gap: var(--space-6);
    grid-template-columns: min(calc(100dvh - 1.5rem), calc(100vw - 15rem)) minmax(12rem, 20rem);
    grid-template-rows: auto auto auto 1fr auto;
    --board: min(calc(100dvh - 1.5rem), calc(100vw - 15rem));
  }
  body.big .stage .table { display: contents; }
  body.big .board-box { grid-column: 1; grid-row: 1 / -1; align-self: center; width: var(--board); }
  body.big #bar-top { grid-column: 2; grid-row: 1; }
  body.big .status { grid-column: 2; grid-row: 2; text-align: left; margin: var(--space-3) 0 0; }
  body.big .opening { grid-column: 2; grid-row: 3; text-align: left; margin: 0; }
  body.big .actions { grid-column: 2; grid-row: 4; align-self: center; width: 100%; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.big #bar-bottom { grid-column: 2; grid-row: 5; }
  /* the × stays top right, over the side column, and the bar starts under it
     (on the left it sat on the a8 rook) */
  body.big #bar-top { padding-top: calc(var(--tap) + var(--space-2)); }
  body.big .stage { --board: min(calc(100dvh - 1.5rem), calc(100vw - 15rem)); }
  /* nothing left beside it: the board alone, in the middle */
  body.big.big-bare .stage { grid-template-columns: min(calc(100dvh - 1.5rem), calc(100vw - 7rem)); --board: min(calc(100dvh - 1.5rem), calc(100vw - 7rem)); }
}

/* ---- move list ---------------------------------------------------------------- */
.nav-moves { margin: var(--space-4) auto 0; width: min(100%, 36rem); }
.nav-moves .steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
.moves { position: relative; display: flex; flex-wrap: wrap; gap: 4px var(--space-1); max-height: 9.5rem; overflow-y: auto; margin: var(--space-2) 0 0; padding: var(--space-2); list-style: none; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.moves li { display: contents; }
.moves .n { color: var(--ink-soft); font: 400 var(--step--1)/2 var(--font-mono); padding-left: var(--space-1); }
.moves button { min-height: 2.25rem; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: 600 var(--step-0)/1 var(--font-mono); cursor: pointer; touch-action: manipulation; }
.moves button[aria-current="true"] { background: var(--arcade); color: var(--on-arcade); }
.moves button .q { margin-left: 2px; }
.moves button.blunder .q { color: var(--hot); } .moves button.mistake .q { color: #f97316; } .moves button.inaccuracy .q { color: var(--warm); }
.moves button.best .q { color: var(--accent); }

/* ---- the panel under the board ------------------------------------------------- */
.panel { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.panel .card { padding: var(--space-4); }
.panel h2 { font-size: var(--step-1); margin-bottom: var(--space-3); }
.panel h3 { font-size: var(--step-0); margin: var(--space-4) 0 var(--space-2); }
.panel p { color: var(--ink-soft); }
.panel .lead { color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips button, .chip {
  min-height: var(--tap); padding: 0 var(--space-4); border: 0; border-radius: var(--radius); cursor: pointer; touch-action: manipulation;
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); font: 600 var(--step-0)/1.1 var(--font-ui);
}
.chips button[aria-pressed="true"] { background: var(--arcade); color: var(--on-arcade); box-shadow: none; }
.chips button small { display: block; font-weight: 400; font-size: var(--step--1); opacity: .85; }
.row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.item {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); align-items: center;
  width: 100%; min-height: var(--tap); padding: var(--space-3); border: 0; border-radius: var(--radius); text-align: left;
  background: var(--surface-2); color: var(--ink); font: inherit; cursor: pointer; touch-action: manipulation;
}
.item b { display: block; }
.item small { display: block; color: var(--ink-soft); font-size: var(--step--1); }
.item .mark { font-size: var(--step-1); color: var(--accent); }
.item .stars { color: var(--warm); font-size: var(--step--1); letter-spacing: 1px; }
.item[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--arcade); }
.item-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); grid-column: 1 / -1; }
.item-actions .btn { min-height: 40px; padding: var(--space-2) var(--space-3); font-size: var(--step--1); }
.story { color: var(--ink); }
.note { padding: var(--space-3); border-radius: var(--radius); background: var(--surface-2); color: var(--ink); border-left: 4px solid var(--arcade); margin: var(--space-3) 0 0; }
.note:empty { display: none; }
.progress { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin: var(--space-2) 0; }
.progress i { display: block; height: 100%; width: 0; background: var(--arcade); transition: width .2s; }
.summary { display: grid; grid-template-columns: auto 1fr 1fr; gap: 2px var(--space-3); font-variant-numeric: tabular-nums; }
.summary span:nth-child(3n+1) { color: var(--ink-soft); }

/* the editor's tray of pieces */
.tray-slot { width: min(100%, var(--board)); margin-inline: auto; }
body.big .tray-slot { width: var(--board); }
.tray { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); margin: var(--space-3) 0; padding: var(--space-2); border-radius: var(--radius); background: var(--sq-dark); }
.tray button { aspect-ratio: 1; min-height: var(--tap); padding: 2px; border: 0; border-radius: var(--radius-sm); background: var(--sq-light); cursor: pointer; touch-action: manipulation; color: var(--ink); font: 700 var(--step-1)/1 var(--font-ui); }
.tray button svg { width: 100%; height: 100%; }
.tray button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--pick), 0 0 12px var(--pick); }
.msg { min-height: 1.5em; margin: var(--space-2) 0 0; font-weight: 600; color: var(--warm); }
.msg.ok { color: var(--accent); }

/* ---- settings sheet ----------------------------------------------------------- */
.sheet {
  width: min(100vw, 36rem); max-width: 100vw; max-height: 88dvh; margin: auto auto 0; padding: 0 var(--space-4) max(var(--space-6), env(safe-area-inset-bottom));
  border: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface); color: var(--ink);
  box-shadow: 0 -10px 40px rgb(0 0 0 / .35); overflow-y: auto; overscroll-behavior: contain;
}
@media (min-width: 40rem) { .sheet { margin: auto; border-radius: var(--radius-lg); } }
.sheet::backdrop { background: rgb(0 0 0 / .45); }
.sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 0 var(--space-2); background: var(--surface); }
.sheet-head h2 { margin: 0; font-size: var(--step-1); }
.sheet section { padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.sheet h3 { font-size: var(--step-0); margin: 0 0 var(--space-2); }
.sheet p { color: var(--ink-soft); font-size: var(--step--1); margin: var(--space-2) 0; }
.switch { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); cursor: pointer; }
.switch input { width: 26px; height: 26px; accent-color: var(--arcade); flex: 0 0 auto; }
.switch span { min-width: 0; }
.switch em { display: block; font-style: normal; font-size: var(--step--1); color: var(--ink-soft); }
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--space-2); }
.skins button { display: grid; gap: 4px; padding: var(--space-2); border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; font: 600 var(--step--1)/1.1 var(--font-ui); min-height: var(--tap); }
.skins button[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--arcade); }
.skins .swatch { display: grid; grid-template-columns: repeat(4, 1fr); aspect-ratio: 2; border-radius: 4px; overflow: hidden; }
.skins .swatch i:nth-child(odd) { background: var(--a); } .skins .swatch i:nth-child(even) { background: var(--b); }
.skins .swatch i:nth-child(n+5):nth-child(odd) { background: var(--b); } .skins .swatch i:nth-child(n+5):nth-child(even) { background: var(--a); }

.yours { margin-top: var(--space-8); }

/* ---- wide screens: the board on the left, the rest beside it ---------------------- */
@media (min-width: 64rem) {
  /* left: tabs, who you play, the board; right: the moves and the panel, in
     one column. The board's row takes any spare height, so a long panel never
     pushes the board down or opens gaps above it. */
  body:not(.big) .wrap { display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); grid-template-rows: auto auto auto auto auto 1fr; column-gap: var(--space-8); align-items: start; }
  body:not(.big) .wrap > * { grid-column: 1 / -1; }
  body:not(.big) .room-top { grid-row: 1; }
  body:not(.big) .tabs { grid-column: 1; grid-row: 2; }
  body:not(.big) .versus { grid-column: 1; grid-row: 3; }
  body:not(.big) .difficulty { grid-column: 1; grid-row: 4; }
  body:not(.big) .tour { grid-column: 1; grid-row: 5; }
  body:not(.big) .stage { grid-column: 1; grid-row: 6; }
  body:not(.big) .side { grid-column: 2; grid-row: 2 / 7; }
  body:not(.big) #moves-box { margin-top: 0; }
  body:not(.big) #moves-box:not([hidden]) + #panel { margin-top: var(--space-4); }
  body:not(.big) #moves-box[hidden] + #panel { margin-top: 0; }
}

/* ---- tournament results -------------------------------------------------------
   Win, draw and loss are three colours checked together for colour-blind eyes
   (aqua, blue, orange), and each has its own shape as well: a dot, a diamond,
   a cross. The dark steps are the same three hues, lighter, for a dark card. */
.results { --c-win: #199e70; --c-draw: #3987e5; --c-loss: #d95926; --c-line: #3987e5; }
[data-site="william"][data-theme="light"] .results { --c-win: #1baf7a; --c-draw: #2a78d6; --c-loss: #eb6834; --c-line: #2a78d6; }
.results .chips { margin-bottom: var(--space-3); }
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
.tile { grid-column: span 2; }
.tiles.five .tile:nth-child(n+4) { grid-column: span 3; }
.tile { display: grid; gap: 2px; padding: var(--space-2) var(--space-2); border-radius: var(--radius); background: var(--surface-2); text-align: center; }
.tile b { font: 800 var(--step-2)/1.1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ink); }
.tile span { font-size: var(--step--1); color: var(--ink-soft); overflow-wrap: anywhere; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--step--1); color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart { display: block; width: 100%; height: auto; margin-top: var(--space-2); overflow: visible; touch-action: pan-y; }
.chart .grid line { stroke: var(--line); stroke-width: 1; }
.chart .grid text { fill: var(--ink-soft); font: 500 12px var(--font-ui); }
.chart .hair { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .line { fill: none; stroke: var(--c-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .m-line { fill: var(--c-line); stroke: var(--surface); stroke-width: 2; }
.chart .m-win, .legend .m-win { fill: var(--c-win); stroke: var(--surface); stroke-width: 2; paint-order: stroke; }
.chart .m-draw, .legend .m-draw { fill: var(--c-draw); stroke: var(--surface); stroke-width: 2; paint-order: stroke; }
.chart .m-loss, .legend .m-loss { fill: none; stroke: var(--c-loss); stroke-width: 3; stroke-linecap: round; }
.chart .marks .on { transform-box: fill-box; transform-origin: center; scale: 1.45; }
.chart .hits rect { cursor: pointer; }
.chart-how { font-size: var(--step--1); margin: var(--space-1) 0 0; }
.chart-read { min-height: 3em; margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--surface-2); color: var(--ink) !important; }
.chart-read b { display: block; }
.res-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.res-table th, .res-table td { padding: var(--space-1) var(--space-2); text-align: right; border-bottom: 1px solid var(--line); }
.res-table th:first-child { text-align: left; font-weight: 600; }
.res-table thead th { color: var(--ink-soft); font-weight: 600; font-size: var(--step--1); }
.tiles:not(.five) .tile:nth-child(4) { grid-column: span 6; }

/* count this game for your rating? (ADR-0110) */
.over .count { margin: 0 0 var(--space-3); padding: var(--space-2) 0; border-block: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.over .count p { margin: 0 0 var(--space-2); font-weight: 700; }
.panel .count p { margin: var(--space-2) 0; color: var(--ink); font-weight: 700; }
/* with the rating question the result box has more in it: keep it inside the board on a phone */
@media (max-width: 30rem) {
  .over { padding: var(--space-3); }
  .over h3 { margin-bottom: var(--space-1); }
  .over p { margin-bottom: var(--space-2); }
  .over .row .btn { min-height: var(--tap); padding: var(--space-2) var(--space-3); font-size: var(--step-0); }
  .over .count { margin-bottom: var(--space-2); }
}

/* Settings in tabs (ADR-0113): every part one tap from the top */
.sheet-tabs { position: sticky; top: 4.2rem; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-2) 0 var(--space-3); background: var(--surface); }
.sheet-tabs button {
  display: flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: var(--tap); padding: var(--space-1);
  border: 0; border-radius: var(--radius); background: var(--surface-2); color: var(--ink); font: 600 var(--step--1)/1.1 var(--font-ui); cursor: pointer; touch-action: manipulation;
}
.sheet-tabs button > span:last-child { overflow-wrap: anywhere; min-width: 0; }
.sheet-tabs button[aria-selected="true"] { background: var(--arcade); color: var(--on-arcade); box-shadow: 0 0 12px var(--arcade-glow); }
.sheet section[hidden] { display: none; }
.sheet .sheet-tabs + section, .sheet section[role="tabpanel"] { border-top: 0; }
/* the sound button by the title */
.room-top .snd { flex: 0 0 auto; width: var(--tap); font-size: 1.3rem; }
.room-top .snd[aria-pressed="false"] { opacity: .6; }
.sheet section[role="tabpanel"] > h3:first-child { display: none; }