/* set area: styles for this area's pages only (loaded on every page, so every rule is scoped by an area class or a page-specific selector).
   The base look of the scoreboard, boards, replay and tabs is in style.css; this file adds the broadcast bar's clocks,
   the telemetry strip, the record strip, the scrubber's ticks, the Events and Receipts tabs, the "why it ended" card
   and the two dialogs. Everything here is under .area-set. */

/* ---- back to live ---- */
.area-set .live-return { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.6rem 0 0; font-size: 0.875rem; }
.area-set .live-return[hidden] { display: none; }

/* ---- head to head ---- */
.area-set .h2h { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.25rem; margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--ink-2); }
.area-set .h2h b { font-family: var(--font-mono); color: var(--ink); font-weight: 650; }
.area-set .h2h strong { color: var(--ink); }
.area-set .h2h-last { display: inline-flex; align-items: center; gap: 0.5rem; }
.area-set .pips { display: inline-flex; gap: 0.25rem; }
.area-set .hp { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; font: 700 0.75rem var(--font-mono); border: 1.5px solid var(--check); color: var(--check); border-radius: 50%; }
.area-set .hp-l { border-color: var(--err); color: var(--err); border-radius: 3px; }
.area-set .hp-d { border-color: var(--ink-2); color: var(--ink-2); border-radius: 50% 50% 3px 3px; }

/* ---- replay: copy link, shortcuts, the scrubber's ticks ---- */
.area-set .replay-extra { margin: 0.5rem 0 0; }
.area-set .replay-extra[hidden] { display: none; }
.area-set .slider-wrap { position: relative; flex: 1; min-width: 0; padding-bottom: 0.9rem; display: block; }
.area-set .slider-wrap .replay-slider { display: block; width: 100%; }
.area-set .arena .slider-wrap > button.tick { position: absolute; bottom: 0; left: calc(0.5rem + var(--p, 0) * (100% - 1rem)); transform: translateX(-50%); width: 1.25rem; height: 1.1rem; min-height: 0; padding: 0; margin: 0; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
.area-set .tick::before { content: ""; width: 0.6rem; height: 0.6rem; background: var(--slate-err); }
.area-set .tick-rejected::before { border-radius: 1px; }
.area-set .tick-timeout::before { width: 0.7rem; height: 0.6rem; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.area-set .tick-resign::before { transform: rotate(45deg); background: var(--slate-ink); }
.area-set .tick-result::before { border-radius: 50%; background: var(--teal); }
.area-set .arena .slider-wrap > button.tick:hover::before { outline: 2px solid var(--slate-ink); outline-offset: 2px; }
.area-set .arena .slider-wrap > button.tick:hover { background: transparent; }

/* ---- Events ---- */
.area-set .ev-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.25rem; border: 0; margin: 0 0 0.75rem; padding: 0; }
.area-set .ev-filter label { flex-direction: row; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; cursor: pointer; }
.area-set .ev-filter input { accent-color: var(--teal); width: 1rem; height: 1rem; margin: 0; }
.area-set .ev-count, .area-set .ev-note { font-size: 0.8125rem; }
.area-set .ev-note { margin: 0 0 0.75rem; }
.area-set .ev-game h3 { margin: 0.75rem 0 0.4rem; font-size: 1rem; }
.area-set ol.ev-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--r-sheet); max-height: 32rem; overflow: auto; }
.area-set .ev { display: grid; grid-template-columns: 2.75rem minmax(0, 9.5rem) minmax(0, 1fr) minmax(0, 13rem); align-items: start; gap: 0.25rem 0.6rem; padding: 0.4rem 0.75rem 0.4rem 0.4rem; border-bottom: 1px solid var(--rule); font-size: 0.875rem; }
.area-set .ev:last-child { border-bottom: 0; }
.area-set .ev-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink-2); }
.area-set .ev-seat { font-size: 0.8125rem; font-weight: 600; }
.area-set .ev-seat .badge-seat { width: 1.25rem; height: 1.25rem; font-size: 0.75rem; }
.area-set .ev-body { min-width: 0; overflow-wrap: anywhere; }
.area-set .ev-text { font-family: var(--font-mono); font-size: 0.8125rem; background: none; padding: 0; }
.area-set .ev-words { display: block; margin-top: 0.15rem; font-size: 0.8125rem; }
.area-set .ev-proof { font-size: 0.8125rem; display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; align-items: baseline; justify-content: flex-end; text-align: right; }
.area-set .ev-proof code { font-size: 0.75rem; }
.area-set .ev-rejected, .area-set .ev-timeout, .area-set .ev-resign { background: color-mix(in srgb, var(--err) 7%, transparent); box-shadow: inset 3px 0 0 var(--err); }
.area-set .ev-rejected .ev-label, .area-set .ev-timeout .ev-label { color: var(--err); }
.area-set .ev-result { box-shadow: inset 3px 0 0 var(--teal); }
.area-set .ev-legal { margin-top: 0.3rem; }
.area-set .ev-legal summary { cursor: pointer; color: var(--ink-2); }
.area-set .ev-legal p { margin: 0.3rem 0 0; max-height: 8rem; overflow: auto; line-height: 1.7; }
.area-set .ev-legal code { font-size: 0.75rem; margin-right: 0.15rem; }
.area-set .ev-none { display: none; margin: 0.5rem 0 0; }
.area-set .events:has(input[value="problems"]:checked) .ev:not([data-problem]) { display: none; }
.area-set .events:has(input[value="problems"]:checked) .ev-game:not(:has(.ev[data-problem])) .ev-list { display: none; }
.area-set .events:has(input[value="problems"]:checked) .ev-game:not(:has(.ev[data-problem])) .ev-none { display: block; }

/* ---- Receipts: the chain as linked boxes ---- */
.area-set .rc-game h3 { margin: 0.9rem 0 0.5rem; font-size: 1rem; }
.area-set ol.chain { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11.5rem, 100%), 1fr)); gap: 0.9rem 1.6rem; max-height: 30rem; overflow: auto; padding: 0.25rem 0.9rem 0.25rem 0.25rem; }
.area-set .rc { position: relative; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; padding: 0.5rem 0.65rem; border: 1px solid var(--rule-strong); border-radius: var(--r-control); background: var(--sheet); font-size: 0.8125rem; }
.area-set .rc:not(:last-child)::after { content: ""; position: absolute; top: 50%; left: 100%; width: 1.6rem; border-top: 2px solid var(--rule-strong); }
.area-set .rc:not(:last-child)::before { content: ""; position: absolute; top: calc(50% - 4px); left: calc(100% + 1.6rem - 6px); width: 6px; height: 6px; border-top: 2px solid var(--rule-strong); border-right: 2px solid var(--rule-strong); transform: rotate(45deg); }
.area-set .rc-head { display: flex; align-items: center; gap: 0.4rem; }
.area-set .rc-seq { font-family: var(--font-mono); font-weight: 700; }
.area-set .rc-kind { font-weight: 650; }
.area-set .rc-timeout, .area-set .rc-resign { border-color: var(--err); }
.area-set .rc-hash { font-size: 0.8125rem; background: none; padding: 0; }
.area-set .rc-prev code { font-size: 0.75rem; background: none; padding: 0; }
.area-set tr.target-row td { background: var(--hover); }

/* ---- why it ended ---- */
.area-set .why { margin: 1rem 0 0; padding: 1rem 1.25rem; border: 1px solid var(--rule-strong); border-radius: var(--r-sheet); background: var(--sheet); display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.area-set .why-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.area-set .why h2 { margin: 0; font-size: 1.125rem; }
.area-set .why p { margin: 0; line-height: 1.5; }
.area-set .lnk { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 0.2em; }

/* ---- details: build a bot, replay locally ---- */
.area-set .set-cta { margin: 1.25rem 0 0; padding: 0.9rem 1rem; border: 1px solid var(--rule); border-radius: var(--r-sheet); }
.area-set .set-cta h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.area-set .set-cta p { margin: 0 0 0.6rem; }

/* ---- dialogs ---- */
.area-set dialog.set-dlg { width: min(34rem, calc(100vw - 32px)); }
.area-set .vd-checks { list-style: none; margin: 0.5rem 0; padding: 0; display: grid; gap: 0.4rem; }
.area-set .vd-checks li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.1rem 0.6rem; align-items: baseline; padding: 0.4rem 0.6rem; border: 1px solid var(--rule); border-radius: var(--r-control); font-size: 0.875rem; color: var(--ink); animation: set-tick-in 0.18s ease both; }
.area-set .vd-checks li small { grid-column: 2; overflow-wrap: anywhere; }
.area-set .vd-checks li.ok { border-color: var(--check); }
.area-set .vd-checks li.fail { border-color: var(--err); }
.area-set .vd-mark { font-weight: 700; }
.area-set .vd-checks li.ok .vd-mark { color: var(--check); }
.area-set .vd-checks li.fail .vd-mark { color: var(--err); }
.area-set .vd-verdict { font-weight: 700; color: var(--ink); min-height: 1.5em; }
.area-set .vd-verdict[data-verdict="VERIFIED"] { color: var(--check); }
.area-set .vd-verdict[data-verdict="FAILED"] { color: var(--err); }
.area-set .vd-caveat { font-size: 0.875rem; }
.area-set .vd-full { margin-right: auto; align-self: center; font-size: 0.875rem; }
.area-set dl.keys { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem 1rem; margin: 0.5rem 0; color: var(--ink); }
.area-set dl.keys dd { margin: 0; }
.area-set kbd { font-family: var(--font-mono); font-size: 0.75rem; padding: 0.1rem 0.4rem; border: 1px solid var(--rule-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--sheet); }
@keyframes set-tick-in { from { opacity: 0; translate: 0 6px; } }

@media (max-width: 40rem) {
  .area-set .ev { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .area-set .ev-body { grid-column: 2; }
  .area-set .ev-seat .badge-name { display: none; }
  .area-set .ev-proof { grid-column: 2; justify-content: flex-start; text-align: left; }
  .area-set ol.chain { grid-template-columns: 1fr; gap: 1.4rem; }
  .area-set .rc:not(:last-child)::after { top: 100%; left: 50%; width: 0; height: 1.4rem; border-top: 0; border-left: 2px solid var(--rule-strong); }
  .area-set .rc:not(:last-child)::before { top: calc(100% + 1.4rem - 6px); left: calc(50% - 4px); transform: rotate(135deg); }
  .area-set dl.keys { grid-template-columns: 1fr; gap: 0.1rem; }
  .area-set dl.keys dd { margin-bottom: 0.4rem; }
  .area-set .telemetry { gap: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .area-set .vd-checks li { animation: none; }
}

/* ======================================================================================================
   Round 2: one composed screen. The broadcast bar on top, then the board with its caption, controls and
   scrubber on the left and the rail (Moves, Events, Receipts, Fairness, Details) on the right.
   ====================================================================================================== */
.area-set {
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --d1: 120ms; --d2: 200ms; --d3: 360ms;
  --rail-w: 22.5rem;
}
.area-set .set-top { margin: 0; }

/* ---- broadcast bar ---- */
.area-set .scoreboard { padding: 0.75rem 1rem; border-radius: 12px; }
.area-set .sb-duel { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.5rem 1rem; align-items: center; }
.area-set .sb-side { flex-direction: row; align-items: center; gap: 0.7rem; min-width: 0; }
.area-set .sb-side.right { flex-direction: row-reverse; text-align: right; align-items: center; }
.area-set .disc { --c: var(--rule-strong); flex: none; position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--c); color: var(--numeral); font: 800 1.0625rem var(--font-head); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25); transition: box-shadow var(--d2) var(--ease-out); }
.area-set .disc.s1 { --c: var(--seat1-deep); --ring: var(--seat1); }
.area-set .disc.s2 { --c: var(--seat2-deep); --ring: var(--seat2); }
.area-set .disc.on-move { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25), 0 0 0 3px var(--sheet), 0 0 0 5px var(--ring, var(--ink)); }
.area-set .disc.on-move::after { content: ""; position: absolute; inset: -0.5rem; border-radius: 50%; border: 2px solid var(--ring, var(--ink)); animation: set-ping 1.4s var(--ease-out) infinite; pointer-events: none; }
.area-set .who { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 0.1rem; }
.area-set .sb-side.right .who { align-items: flex-end; }
.area-set .who-name { font: 650 1.125rem/1.2 var(--font-head); color: var(--ink); text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-set a.who-name:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.area-set .sb-side.won .who-name { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.25em; text-decoration-color: var(--check); }
.area-set .sb-role { font-size: 0.8125rem; }
.area-set .sb-rating { font-size: 0.8125rem; font-weight: 600; }
.area-set .sb-clock { font-family: var(--font-mono); flex: none; font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-2); padding: 0.3rem 0.6rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; white-space: nowrap; transition: background var(--d2), color var(--d2), border-color var(--d2); }
.area-set .sb-side.lit .sb-clock { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.area-set .sb-mid { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.area-set .sb-score { font-family: var(--font-mono); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 600; gap: 0.35rem; letter-spacing: 0; align-items: center; line-height: 1; }
.area-set .sb-points { min-width: 1ch; text-align: center; }
.area-set .sb-state { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.25rem 0.6rem; margin: 0; font-size: 0.8125rem; }
.area-set .sb-state .sb-game { font-weight: 650; }
.area-set .sb-result { margin: 0.6rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--rule); font-size: 0.9375rem; }
.area-set .sb-money { margin: 0.15rem 0 0; font-size: 0.8125rem; }
.area-set .scoreboard.table .sb-state { justify-content: flex-start; margin-bottom: 0.4rem; }
.area-set ul.sb-games { margin-top: 0.6rem; }
.area-set .set-notices:empty { display: none; }
.area-set .set-notices .notice { margin: 0 0 0.6rem; }

/* head to head under the bar */
.area-set .h2h { justify-content: center; margin: 0.5rem 0 0; font-size: 0.8125rem; gap: 0.25rem 1rem; }
.area-set .hp { width: 1.25rem; height: 1.25rem; }
.area-set .set-chips { margin: 0.5rem 0 0; justify-content: center; }
.area-set .live-return { margin: 0.5rem 0 0; justify-content: center; }

/* ---- one column for every game: boards (one or a swap pair) with one transport bar, then the tabs rail ---- */
.area-set .set-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 1rem; align-items: start; }
.area-set .set-main { min-width: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.area-set .boards.arena { display: block; margin: 0; padding: 0; border-image: none; background: transparent; }
.area-set .board { max-width: none; width: 100%; margin: 0; }
.area-set .board:only-child { max-width: none; }
.area-set .board-head { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; margin: 0 0 0.6rem; }
.area-set .board-head .seats { display: none; }
.area-set .board-head h2 { order: 2; font: 600 0.8125rem var(--font); margin: 0; color: var(--ink-2); }
.area-set .board-head h2 small { font-size: 0.75rem; margin-left: 0.4rem; }
.area-set .board-head .game-result { order: 1; flex: none; margin: 0; }
.area-set .board-head { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "cap"; }
/* caption bar under the board */
.area-set .board { display: flex; flex-direction: column; }
.area-set .board .fragment { order: 1; border-radius: 12px; border: 1px solid var(--rule); background: var(--paper); }
.area-set .board-head { order: 2; margin: 0.6rem 0 0; }
.area-set .board .replay, .area-set .board .board-foot { order: 3; }
.area-set .board-head .game-result { grid-area: cap; display: block; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: 0.6rem 0.9rem; font-size: 0.9375rem; line-height: 1.4; color: var(--ink); min-height: 2.75rem; }
.area-set .board-head h2 { grid-area: auto; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.area-set .board-head .game-result .places { display: block; color: var(--ink-2); font-size: 0.8125rem; }
.area-set .board-head .game-result[data-panel-part] { animation: set-slide var(--d3) var(--ease-out); }
.area-set .board.focus .fragment, .area-set .board.focus .render-board { box-shadow: none; border-color: var(--rule); }

/* ---- control bar: one compact row, then the scrubber ---- */
.area-set .replay { margin: 0.6rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.area-set .replay-controls { flex-wrap: wrap; gap: 0.4rem 0.5rem; align-items: center; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 0.5rem 0.6rem; }
.area-set .replay-controls button, .area-set .replay-controls select, .area-set .display-menu > summary { min-height: 2.25rem; border-radius: 8px; font-size: 0.875rem; transition: background var(--d1), border-color var(--d1), transform var(--d2) var(--spring); }
@media (hover: none) and (pointer: coarse), (max-width: 640px) { .area-set .replay-controls select { font-size: 16px; } }
.area-set .replay-controls button:active, .area-set .display-menu > summary:active { transform: scale(0.96); }
.area-set .replay-controls .replay-play { min-width: 4.5rem; font-weight: 700; }
.area-set .replay-controls label { font-size: 0.8125rem; }
.area-set .replay-extra { margin: 0 0 0 auto; }
.area-set .replay-extra[hidden] { display: none; }
.area-set .replay-extra .btn { min-height: 2.25rem; }
.area-set .display-menu { margin-left: 0; }
.area-set .replay-controls .replay-scrub { order: 9; flex: 1 0 100%; margin: 0; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 0.55rem 0.75rem 0.55rem; position: relative; }
.area-set .replay-label { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-2); }
.area-set .replay-slider { appearance: none; -webkit-appearance: none; height: 1.5rem; background: transparent; accent-color: var(--teal); cursor: pointer; --fill: 100%; }
.area-set .replay-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--teal) var(--fill), var(--rule) var(--fill)); }
.area-set .replay-slider::-moz-range-track { height: 6px; border-radius: 3px; background: var(--rule); }
.area-set .replay-slider::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--teal); }
.area-set .replay-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--teal); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--teal); transition: scale var(--d2) var(--spring); }
.area-set .replay-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--teal); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--teal); }
.area-set .replay-slider:hover::-webkit-slider-thumb { scale: 1.2; }
.area-set .replay-slider:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.area-set .slider-wrap { padding-bottom: 1.1rem; }
.area-set .arena .slider-wrap > button.tick { bottom: 0.05rem; }
.area-set .tick::before { background: var(--err); }
.area-set .tick-result::before { background: var(--teal); }
.area-set .tick-resign::before { background: var(--ink); }
.area-set .tick:hover::before, .area-set .tick:focus-visible::before { scale: 1.3; }
.area-set .tick::before { transition: scale var(--d2) var(--spring); }
.area-set .replay-status { margin: 0; }

/* ---- telemetry: small stat cards under the board ---- */
.area-set .tele-part:empty { display: none; }
.area-set .telemetry { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.6rem; margin: 0; padding: 0; border: 0; }
.area-set .tele-card { display: flex; flex-direction: column; min-width: 0; flex: none; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: 0.6rem 0.75rem; gap: 0.4rem; }
.area-set .tele-who { font: 650 0.875rem var(--font-head); }
.area-set .tele-card dl { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; }
.area-set .tele-card dl div { display: flex; flex-direction: column; }
.area-set .tele-card dd { margin: 0; font-family: var(--font-mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.area-set .tele-card dt { font-size: 0.75rem; }
.area-set .tele-note { grid-column: 1 / -1; font-size: 0.75rem; }

/* ---- why it ended ---- */
.area-set .why-slot { display: contents; }      /* the card's live slot: no box of its own, so no gap while it is empty */
.area-set .why { margin: 0; border-radius: 12px; border-color: var(--rule-strong); padding: 0.85rem 1rem; gap: 0.5rem; }
.area-set .why h2 { font-size: 1.0625rem; }
.area-set .perspective { margin: 0; font-size: 0.875rem; }

/* ---- the rail ---- */
.area-set .set-rail { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; position: static; height: auto; min-height: 0; display: flex; flex-direction: column; }
.area-set .set-rail .set-tabs { margin: 0; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.area-set .set-rail .tab-list { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0; gap: 0; flex: none; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; position: relative; }
.area-set .set-rail .tab-list .tab { padding: 0.85rem 0.25rem; text-align: center; font-size: 0.8125rem; transition: color var(--d1); }
.area-set .set-rail .tab-panel { flex: 1; min-height: 0; max-height: 34rem; overflow: auto; padding: 0.6rem; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
.area-set .set-rail .tab-panel:not([hidden]) { animation: set-fade var(--d2) var(--ease-out); }
.area-set .set-rail .tab-panel[hidden] { display: none; }
.area-set .set-tabs:not([data-tabs-ready]) .tab-panel { max-height: 30rem; margin-bottom: 0.5rem; }
@supports (anchor-name: --a) {
  .area-set .set-rail .tab-list .tab[aria-selected="true"] { border-bottom-color: transparent; }
  .area-set .set-rail .tab-list::after { background: var(--teal); height: 3px; border-radius: 3px 3px 0 0; bottom: 0; transition: left 0.36s var(--spring), right 0.36s var(--spring); }
}
.area-set .game-moves h3 { margin-top: 0.5rem; }

/* move rows */
.area-set ol.move-list { max-height: none; overflow: visible; border: 0; background: transparent; border-radius: 0; display: flex; flex-direction: column; gap: 2px; }
.area-set ol.move-list .mv, .area-set ol.move-list .mv:has(> .mv-score:empty) { grid-template-columns: 1.75rem 1.25rem minmax(0, 1fr) auto; gap: 0.5rem; padding: 0.4rem 0.5rem; border: 0; border-radius: 8px; cursor: default; transition: background var(--d1); }
.area-set ol.move-list .mv:has(> .mv-score:not(:empty)) { grid-template-columns: 1.75rem 1.25rem minmax(0, 1fr) auto auto; }
.area-set ol.move-list .mv:has(button.mv-n) { cursor: pointer; }
.area-set ol.move-list .mv:hover { background: var(--hover); }
.area-set ol.move-list .mv.current { background: var(--hover); box-shadow: inset 3px 0 0 var(--teal); }
.area-set .mv-n { font-family: var(--font-mono); font-size: 0.75rem; text-align: left; justify-self: start; }
.area-set button.mv-n { justify-self: start; padding: 0.1rem 0; font-size: 0.75rem; }
/* The whole row seeks (set.js), so the row is the touch target: its number button need not be 44 px tall on its own,
   and a move's text wraps instead of ending in an ellipsis. */
@media (pointer: coarse), (max-width: 640px) {
  .area-set ol.move-list .mv { margin: 0; min-height: 44px; }
  .area-set ol.move-list button.mv-n { justify-self: stretch; min-height: 0 !important; min-width: 0; align-self: stretch; margin: -0.4rem 0 -0.4rem -0.5rem; padding-left: 0.5rem; }   /* over the row's padding: the row's full height */
  .area-set code.mv-text, .area-set .mv-text > summary { white-space: normal; overflow-wrap: anywhere; }
}
.area-set .mv-seat .badge-name { display: none; }
.area-set .mv-seat .badge-seat { width: 1.2rem; height: 1.2rem; font-size: 0.75rem; }
.area-set .mv-text { color: var(--ink); }
.area-set .mv-gap { font-size: 0.75rem; }
.area-set ol.move-list .mv { animation: set-in var(--d3) var(--ease-out); }
.area-set .ev { grid-template-columns: 2rem minmax(0, 1fr); }
.area-set .ev .ev-seat { grid-column: 2; grid-row: 1; justify-self: start; }
.area-set .ev .ev-body, .area-set .ev .ev-proof { grid-column: 2; justify-content: flex-start; text-align: left; }
.area-set ol.ev-list { max-height: none; border: 0; display: flex; flex-direction: column; gap: 0.4rem; border-radius: 0; }
.area-set .ev { border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); padding: 0.5rem 0.6rem; }
.area-set ol.chain { max-height: none; grid-template-columns: 1fr; gap: 1.2rem; padding: 0.25rem; }
.area-set .rc:not(:last-child)::after { top: 100%; left: 50%; width: 0; height: 1.2rem; border-top: 0; border-left: 2px solid var(--rule-strong); }
.area-set .rc:not(:last-child)::before { top: calc(100% + 1.2rem - 6px); left: calc(50% - 4px); transform: rotate(135deg); }
.area-set .set-details .facts, .area-set .fairness .facts { font-size: 0.8125rem; }
.area-set .set-rail dl.facts { grid-template-columns: 6rem minmax(0, 1fr); }
.area-set .set-rail .cmd pre { max-width: 100%; overflow-x: auto; }

/* ---- keyframes ---- */
@keyframes set-ping { from { scale: 0.9; opacity: 0.9; } to { scale: 1.35; opacity: 0; } }
@keyframes set-blink { 50% { opacity: 0.25; } }
@keyframes set-slide { from { translate: 14px 0; opacity: 0; } }
@keyframes set-in { from { translate: 0 10px; opacity: 0; } }
@keyframes set-fade { from { opacity: 0; } }
@keyframes set-pop { from { scale: 0.6; opacity: 0; } }
.area-set .why:not([hidden]) { animation: set-in var(--d3) var(--spring); }

/* ---- narrow ---- */
@media (max-width: 40rem) {
  .area-set .scoreboard { padding: 0.65rem 0.7rem; }
  .area-set .sb-duel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b" "m m"; }
  .area-set .sb-duel > .sb-side:nth-child(1) { grid-area: a; }
  .area-set .sb-duel > .sb-side.right { grid-area: b; }
  .area-set .sb-duel > .sb-mid { grid-area: m; flex-direction: row; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
  .area-set .sb-side, .area-set .sb-side.right { flex-direction: row; text-align: left; flex-wrap: wrap; gap: 0.4rem 0.5rem; }
  .area-set .sb-side.right .who { align-items: flex-start; }
  .area-set .disc { width: 2.25rem; height: 2.25rem; font-size: 0.9375rem; }
  .area-set .who-name { font-size: 1rem; }
  .area-set .sb-clock { font-size: 0.875rem; padding: 0.2rem 0.45rem; }
  .area-set .replay-controls { padding: 0.4rem; }
  .area-set .replay-extra { margin-left: 0; flex: 1 0 100%; }
  .area-set .replay-extra .btn { width: 100%; }
  .area-set .set-chips { justify-content: flex-start; }
  .area-set .h2h { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .area-set *, .area-set *::before, .area-set *::after { animation: none !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
}
.area-set .board-foot { display: flex; justify-content: flex-end; margin-top: 0.6rem; }
.area-set .board-foot:empty { display: none; }

/* ---- a swap pair: both games together (side by side from 900px, stacked below), one transport, the rail under them ---- */
.area-set .gs-live { display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--teal); animation: set-blink 1.2s ease-in-out infinite; vertical-align: middle; }
.area-set .is-pair { grid-template-columns: minmax(0, 1fr); }
.area-set .is-pair .boards.arena { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.area-set .board-title a { color: inherit; text-decoration: none; }
.area-set .board-title a:hover { text-decoration: underline; }
.area-set .board-title { display: flex; align-items: center; gap: 0.5rem; order: 0; margin: 0 0 0.5rem; font: 650 0.9375rem var(--font-head); color: var(--ink); }
.area-set .is-pair .board { min-width: 0; position: relative; overflow-x: clip; }   /* the concealed board frame is absolute and as wide as a board: keep it inside its column */
.area-set .is-pair .board .fragment, .area-set .is-pair .board .render-board { width: 100%; }
.area-set .is-pair.has-transport .board .replay-controls > * { display: none; }
.area-set .is-pair.has-transport .board .replay-controls { padding: 0; border: 0; background: transparent; }
.area-set .is-pair.has-transport .board .replay-extra { margin: 0; }
.area-set .pair-bar { margin: 0; }
.area-set .pair-bar .replay-controls { position: sticky; bottom: 0.5rem; z-index: 2; }
.area-set .pair-play { display: contents; }
.area-set .pair-play[hidden] { display: none; }
.area-set .pair-controls:not(:has(> :not([hidden]))) { display: none; }
.area-set .pair-bar .pair-scrub { display: block; }
.area-set .pair-bar .pair-slider { display: block; width: 100%; }
.area-set .pair-bar .replay-label { white-space: normal; display: block; padding: 0.25rem 0 0.4rem; }
.area-set .is-pair .moves-games.pair { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
@media (min-width: 56.25rem) {
  .area-set .is-pair .boards.arena { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}

/* what next, under the scoreboard of a finished set (the viewer's rematch and the lobby) */
.area-set .next-steps { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.75rem 0 0; }
.area-set .next-steps .btn { min-height: 2.5rem; }
@media (max-width: 480px) { .area-set .next-steps .btn { flex: 1 1 100%; justify-content: center; text-align: center; } }
.area-set .notice.first-move .fm-line { margin: 0; }
.area-set .notice.first-move .fm-details { margin-top: 0.4rem; }
.area-set .notice.first-move .fm-details summary { cursor: pointer; font-size: 0.875rem; color: var(--ink-2); }
.area-set .notice.first-move .fm-item { margin-top: 0.6rem; }
.area-set .notice.first-move .fm-run:not(.mine) { display: none; }      /* how to run a bot: its owner's only (set.js) */

/* a single board keeps one pair column's reading width, centred; the scoreboard and the rail stay full width */
@media (min-width: 56.25rem) {
  .area-set .set-layout:not(.is-pair) .boards.arena { max-width: 44rem; margin-inline: auto; }
}

/* phone: the board jump links, the replay sliders and the "go to the last move" link are primary controls, 44px tall */
@media (max-width: 40rem) {
  .area-set .board-title a, .area-set a.lnk { display: inline-flex; align-items: center; min-height: 44px; }
  .area-set .replay-slider, .area-set .pair-slider { height: 44px; }
}