/* ============ Design tokens (COLOR-REDESIGN-SPEC v2 "Modern Felt", D1) ============
   Conflict record 2026-08-09: the spec's hex references (DESIGN-ROUND5/audit:
   `#265e51`) do NOT match the token literal's true render — oklch(0.34 0.055 165)
   renders #174131. Implemented the DOCUMENTED felt appearance; family re-derived
   from oklch(0.44 0.063 176) ≈ #265e51 keeping the sheet's L/C spacing/hue rules. */
:root {
  /* ---- surfaces — the felt, modernized (deeper + cooler than old #1f7a5c) ---- */
  --bg:        oklch(0.44 0.063 176);   /* deep calm green felt ≈ #265e51 */
  --surface:   oklch(0.52 0.073 176);   /* drop wells / valid target lighten */
  --surface-2: oklch(0.38 0.05 176);    /* recessed wells (stats) */
  --shade:      oklch(0 0 176);         /* darken mix target — SAME hue as felt; plain oklch(0 0 0) interpolates hue 176→0 through olive (C10) */
  --suit-ghost: oklch(0.514 0.033 155); /* empty-well suit glyph — documented render #596D5F (C9) */

  /* ---- ink on felt ---- */
  --fg:       oklch(0.94 0.015 100);    /* crisp cream-white on green */
  --muted:    oklch(0.85 0.02 100);
  --on-ink:   oklch(0.26 0.02 100);     /* dark text on card */

  /* ---- structure — soft modern depth ---- */
  --border:     oklch(1 0 0 / 0.14);      /* hairline on felt */
  --hairline:   oklch(1 0 0 / 0.09);
  --shadow-card: 0 1px 2px oklch(0.12 0.04 176 / 0.30),
                 0 6px var(--col-gap) oklch(0.12 0.04 176 / 0.38);

  /* ---- the one accent — amber, modernized (richer, fewer warm tones) ---- */
  --accent:       oklch(0.80 0.13 72);
  --accent-ink:   oklch(0.28 0.04 72);
  --accent-focus: oklch(0.87 0.07 80);    /* focus rings / back motif strokes */
  --accent-ghost: oklch(0.80 0.13 72 / 0.22);   /* ghost-well tint / valid drop */

  /* ---- semantics ---- */
  --success: oklch(0.74 0.13 155);
  --danger:  oklch(0.62 0.19 28);
  --settings-fg: oklch(0.97 0.005 100);
  --settings-muted: oklch(0.95 0.01 100);
  --settings-danger: oklch(0.97 0.04 28);

  /* ---- cards — crisp cool whites now (the cream is gone) ---- */
  --card-face:   oklch(0.97 0.005 100);   /* near-white, cool, never cream, never #fff */
  --card-back:   oklch(0.24 0.04 165);    /* deep green-charcoal back, motif in accent */
  --card-ink:    oklch(0.16 0.015 200);
  --type-red:    oklch(0.52 0.19 28);     /* hearts & diamonds */
  --type-black:  oklch(0.18 0.02 200);    /* spades & clubs */

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-reverse: cubic-bezier(.64,0,.78,.39);
  --ease-glide: cubic-bezier(.2,.7,.2,1);
  --ease-glide-reverse: cubic-bezier(.8,0,.8,.3);

  --font: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --mono: 'Cascadia Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace;

  /* ---- paper system (Round 9): the reading surface below the felt.
     Light = cool near-white; ink = card-ink family. Dark (system pref)
     = near-black neutral; ink = cream. Amber never carries text on
     paper (AA) — links are ink + underline; amber is the one CTA/focus.
     The FELT band does NOT change in dark — game dark mode stays off. ---- */
  --paper:          oklch(0.985 0.003 200);
  --paper-ink:      oklch(0.16 0.015 200);
  --paper-muted:    oklch(0.45 0.02 200);
  --paper-hairline: oklch(0.16 0.015 200 / 0.14);
  --paper-accent:   var(--accent);
  --paper-focus:    oklch(0.55 0.12 72);   /* amber dark enough for WCAG 3:1 on paper */

  --card-w: 100px;
  --card-h: 140px;
  --card-r: 8px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --col-gap: 12px;
  --step-down: 30.8px;
  --step-up: 44.8px;
  --waste-shift: 22px;
  --zone-gap: 16px;
  --deck-step: 2px;
  --pile-reserve: 42px;
  --tableau-budget: 677.6px;
  --board-content-w: 772px;
  --topbar-h: 72px;
  --nudge-dur: 2.4s;

  --dur-base: 220ms;
  --dur-glide: 220ms;
  --dur-draw: 140ms;
  --dur-flip: 260ms;
  --dur-flick: 260ms;
  --dur-gather: 180ms;
  --dur-deal: 300ms;
  --dur-drop: 150ms;
  --dur-banner: 320ms;
  --dur-fade: 200ms;
  --dur-fall: 1200ms;
  --dur-cascade: 30ms;          /* per-card cascade inside a pile run */
  --dur-run: 45ms;              /* per-card cascade for tableau runs */
  --dur-grace-ghost: 100ms;
  --dur-grace-cleanup: 150ms;
  --dur-grace-lock: 250ms;
  --dur-lock-flip: 320ms;
  --dur-deal-settle: 320ms;
  --dur-aces-delay: 340ms;
  --dur-lock-deal: 680ms;
  --dur-tick: 1000ms;           /* hud timer */
  --dur-nudge: 2200ms;          /* includes fade-in, hold, and fade-out */
  --dur-hint: 1200ms;           /* hint highlight stay */
  --dur-finish-bar: 8000ms;     /* finish-bar auto hide */
  --dur-finish-step: 90ms;      /* autoplay pacing */
  --dur-autoplay-poll: 40ms;    /* autoplay settled-check interval */
  --dur-autoplay-stall: 3000ms; /* autoplay settle timeout */
  --dur-release: 200ms;

  --animate: full;
}

/* ---- felt themes F12 (only these three) ---- */
html[data-felt='green'] {
  --bg: oklch(0.44 0.063 176);
  --surface: oklch(0.52 0.073 176);
  --surface-2: oklch(0.38 0.05 176);
  --shadow-card: 0 1px 2px oklch(0.12 0.04 176 / 0.30), 0 6px var(--col-gap) oklch(0.12 0.04 176 / 0.38);
}
html[data-felt='slate'] {
  --bg: oklch(0.40 0.035 250);
  --surface: oklch(0.48 0.045 250);
  --surface-2: oklch(0.34 0.03 250);
  --shade: oklch(0 0 250);
  --card-back: oklch(0.24 0.04 250);
  --shadow-card: 0 1px 2px oklch(0.12 0.035 250 / 0.30), 0 6px var(--col-gap) oklch(0.12 0.035 250 / 0.38);
}
html[data-felt='charcoal'] {
  --bg: oklch(0.42 0.02 90);
  --surface: oklch(0.50 0.03 90);
  --surface-2: oklch(0.36 0.015 90);
  --shade: oklch(0 0 90);
  --card-back: oklch(0.24 0.04 90);
  --shadow-card: 0 1px 2px oklch(0.12 0.02 90 / 0.30), 0 6px var(--col-gap) oklch(0.12 0.02 90 / 0.38);
}

/* ---- viewports: the 7 columns always fit, no horizontal scroll ---- */
@media (max-width: 1260px) {
  :root { --col-gap: 10px; --waste-shift: 18px; }
}
@media (max-width: 1000px) and (min-width: 721px) {
  :root {
    --col-gap: 10px;
    --waste-shift: 15px;
    --card-w: calc((min(88vw, 1280px) - 24px - 6 * var(--col-gap)) / 7);
    --card-h: calc(var(--card-w) * 1.40);
  }
  /* foundations flow to a second row next to the stock (§5 breakpoints) */
  .toprow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--col-gap);
    row-gap: var(--pile-reserve);
    padding-bottom: 0;
  }
  .tablerow { padding-top: calc(var(--pile-reserve) + 8px); }
}
@media (max-width: 720px) {
  :root {
    --card-w: calc((100vw - 6 * var(--col-gap) - 8px) / 7);
    --card-h: calc(var(--card-w) * 1.40);
    --step-down: 9px;
    --step-up: clamp(14px, calc(var(--card-h) * 0.22), 28px);
    --col-gap: clamp(6px, 1.8vw, 12px);
    --waste-shift: 13px;
    --topbar-h: 64px;
  }
  .topbar { flex-wrap: wrap; row-gap: 6px; padding: 8px 10px; }
  .brand { font-size: 15px; }
  .topbar .stats { display: none; }
  .topbar .btn-primary { width: 40px; height: 40px; padding: 0; min-height: 40px; }
  .topbar .btn-primary .lbl { display: none; }
  .topbar .btn-primary .ico { display: block; }
  .sheet-stats { display: grid; }
}
@media (max-width: 420px) {
  :root { --waste-shift: 10px; }
  .brand { font-size: 14px; }
  .seg button { padding: 9px 8px; }
  .sheet-stats .stat-score, .sheet-stats .stat-streak { display: none; }
}
@media (max-height: 840px) and (min-width: 721px) {
  :root {
    --card-w: calc(clamp(64px, 100vh - 470px, 96px));
    --card-h: calc(var(--card-w) * 1.40);
    --step-up: clamp(16px, calc(var(--card-h) * 0.26), 28px);
  }
}
/* short landscape: keep a full 13-card column on screen without scroll */
@media (max-height: 620px) {
  :root {
    --step-down: 8px;
    --step-up: clamp(12px, calc(var(--card-h) * 0.2), 22px);
  }
}

*, *::before, *::after { box-sizing: border-box; }
* { touch-action: manipulation; }

/* ---- dark paper ONLY (system preference). The felt/game tokens above are
   untouched: Green/Slate/Charcoal stay canonical-light per user override
   2026-08-14 — only the reading surface adapts. ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:        oklch(0.18 0.012 200);
    --paper-ink:    oklch(0.92 0.008 100);
    --paper-muted:  oklch(0.72 0.01 100);
    --paper-hairline: oklch(1 0 0 / 0.14);
    --paper-focus:  oklch(0.87 0.07 80);
  }
}

html, body { margin: 0; min-height: 100%; }

body {
  font-family: var(--font);
  line-height: 1.5;
  color: var(--paper-ink);
  background: var(--paper);
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: var(--font); }

/* ============ Top rail (72px, the field owns the screen) ============ */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  background: var(--bg);
  color: var(--fg);
  border-bottom: 1px solid var(--border);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: var(--topbar-h);
  padding: 0 16px;
  background: color-mix(in oklch, var(--bg), var(--shade) 18%);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.brand {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.stats {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--surface-2);
  border-radius: 8px;
  padding: 7px 16px;
}

.stat {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.stat b {
  margin-left: 5px;
  color: var(--fg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* segmented control — neutral, never accent */
.seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.seg button {
  appearance: none;
  background: transparent;
  border: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 9px 12px;
  min-height: 40px;
  cursor: pointer;
}

.seg button:hover { color: var(--fg); }
.seg button.on { color: var(--fg); background: rgba(255, 255, 255, 0.1); }
.seg button:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: -2px; }

/* buttons — one primary per action, ghosts everywhere else */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  min-height: 40px;
  cursor: pointer;
  transition: background 0.12s var(--ease), border-color 0.12s var(--ease), transform 0.12s var(--ease);
}

.btn:hover { background: rgba(255, 255, 255, 0.1); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible,
.card:focus-visible,
.pad[data-board-control]:focus-visible,
.icon-btn:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 3px;
}

.btn-ghost { border-color: rgba(255, 255, 255, 0.28); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover {
  background: color-mix(in oklch, var(--accent), oklch(0 0 72 / 14%));
}

.btn.ic, .icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  min-height: 40px;
}

.btn:disabled { opacity: 0.55; }
.btn-small { min-height: 34px; padding: 4px 10px; font-size: 12px; }
.btn-block { width: 100%; }

.btn svg { flex: 0 0 auto; }

/* ============ Deck row (mode + context) + bottom felt bar — one fixed layout at every width ============ */
.deckrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 12px 0;
}

.modeseg {
  display: inline-flex;
  gap: 6px;
}

.modeseg button {
  appearance: none;
  border: 1px solid color-mix(in oklch, var(--bg), var(--shade) 30%);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  min-height: 44px;
}

.modeseg button:hover { background: color-mix(in oklch, var(--bg), var(--shade) 14%); }
.modeseg button.on { background: color-mix(in oklch, var(--bg), var(--shade) 24%); }
.modeseg button:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }

.modeseg .lblshort { display: none; }

.deckdaily { min-height: 44px; font-size: 13px; }

.lblbtn { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

.bottombar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  background: color-mix(in oklch, var(--bg), var(--shade) 10%);
  border-top: 1px solid var(--border);
}

.bottombar .btn {
  min-width: 108px;
  min-height: 44px;
  font-size: 13px;
}

.bottombar .btn[disabled] {
  opacity: 0.45;
  cursor: default;
}

.bottombar .btn-primary { min-width: 128px; }

@media (max-width: 420px) {
  .modeseg .lblfull { display: none; }
  .modeseg .lblshort { display: inline; }
  .modeseg button { padding: 10px 16px; }
  .bottombar .btn { min-width: 92px; }
  .bottombar .btn-primary { min-width: 104px; }
}

/* ============ Board ============ */
#board {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 8px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--zone-gap);
  overflow: hidden;
}


.toprow, .tablerow {
  display: grid;
  gap: var(--col-gap);
  justify-content: center;
  margin: 0;
  position: relative;
  width: var(--board-content-w);
}

.toprow {
  grid-template-columns: repeat(2, var(--card-w)) 1fr repeat(4, var(--card-w));
}

.toprow > :nth-child(1) { grid-column: 1; }
.toprow > :nth-child(2) { grid-column: 2; }
.toprow > :nth-child(3) { grid-column: 4; }
.toprow > :nth-child(4) { grid-column: 5; }
.toprow > :nth-child(5) { grid-column: 6; }
.toprow > :nth-child(6) { grid-column: 7; }

.tablerow {
  grid-template-columns: repeat(7, var(--card-w));
  align-items: start;
  height: calc(var(--tableau-budget) + var(--pile-reserve));
  padding-top: var(--pile-reserve);
}

.pad {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-r);
  background: color-mix(in oklch, var(--surface), var(--shade) 14%);
  border: 1px dashed var(--border);
  grid-column: span 1;
}

.pad.waste { position: relative; isolation: isolate; }

.pad .wellmark {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--card-h);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  opacity: 0.4;
  font-size: 22px;
  font-weight: 600;
  pointer-events: none;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* keep the empty-hint glyph beneath transient waste "keeper" cards */
.pad.waste .wellmark { z-index: -2; }

.pad .wellmark svg { width: 100%; height: 100%; display: block; }

/* foundation empty hint well */
.pad.foundation .wellmark { opacity: 0.45; }
.pad.foundation { border-style: solid; border-color: color-mix(in oklch, var(--border), transparent 30%); }
.pad.tableau { border: none; background: transparent; }
.pad.tableau::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--card-h);
  border-radius: var(--card-r);
  background: color-mix(in oklch, var(--surface), var(--shade) 14%);
  border: 1px dashed var(--border);
}


/* the card (face & back live in js/cards.js) */
.card {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-r);
  background: var(--card-face);
  box-shadow: var(--shadow-card);
  color: var(--card-ink);
  cursor: grab;
  touch-action: none;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.card svg { width: 100%; height: 100%; display: block; }

.waste .card { left: min(calc(var(--shift, 0) * var(--waste-shift)), calc(var(--card-w) - 8px)); top: calc(var(--deck-i, 0) * var(--deck-step)); }
.stock .card { top: calc(var(--deck-i, 0) * var(--deck-step)); }
.foundation .card { top: calc(var(--deck-i, 0) * var(--foundation-step, var(--deck-step))); }
.waste .card[data-role='waste-buried'],
.waste .card[data-role='waste-fan'],
.stock .card[data-role='stock-buried'],
.foundation .card[data-role='foundation-buried'] { pointer-events: none; cursor: default; }
.stock .card, .found .card { cursor: default; }

/* hover — lifts 4px with a deeper shadow, cursor stays grab via .card.
   Exclude cards mid-flight (.glide) and mid-flip (.drawing): their animated
   transform would be overridden anyway, and the hover shadow would paint a
   full-card ghost behind the transparent rotating faces. */
@media (hover: hover) and (pointer: fine) {
  .card:hover:not(.face-down):not(.drawing):not(.glide) {
    transform: translateY(-4px);
    box-shadow: 0 10px var(--col-gap) oklch(0.15 0.04 176 / 0.45);
  }
}

/* interaction states (§7) — selection ring comes from keyboard focus (:focus-visible), never click/tap */
.card.selected { outline: none; }

.valid, .valid-target { box-shadow: inset 0 0 0 2px var(--accent); background: var(--surface); }
.drop-valid { box-shadow: inset 0 0 0 2px var(--accent); background: var(--surface); }

.hinted { outline: 2px solid var(--accent); outline-offset: 2px; }

.bump { animation: bump var(--dur-flick) var(--ease); }
@keyframes bump {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1.5px); }
  75% { transform: translateX(1.5px); }
}

@media (prefers-reduced-motion: reduce), html[data-motion='off'] {
  .bump { animation-duration: 100ms; }
}

/* deal-in */
.deal .card { animation: deal var(--dur-deal) var(--ease) both; animation-delay: calc(var(--deal-delay, 0) * 1ms); }
@keyframes deal {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* draw: the card turns over while flying in — back face first, then the face.
   .flip-stage rotates 0→180 with only ONE face opaque at a time: the back is
   shown for the first half, the faces swap opacity at 90° (where the card is
   edge-on / invisible), then the front shows for the second half. No
   backface-visibility or preserve-3d needed, so stacking contexts can never
   make a mirrored ghost face leak through. The glide (translate) runs on the
   .card itself; the turn runs on the stage, so they never fight. */
.card.drawing {
  background: transparent;
  box-shadow: none;
  transition: none;
  perspective: 1000px;
}
.flip-stage {
  position: absolute;
  inset: 0;
  border-radius: var(--card-r);
  box-shadow: var(--shadow-card);
  animation: flipOver var(--flip-dur, var(--dur-flip)) cubic-bezier(.45, .2, .55, .9) var(--flip-delay, 0s) both;
}
.flip-face {
  position: absolute;
  inset: 0;
}
.flip-back { animation: backGone var(--flip-dur, var(--dur-flip)) linear var(--flip-delay, 0s) both; }
.flip-front { transform: rotateY(180deg); animation: frontGone var(--flip-dur, var(--dur-flip)) linear var(--flip-delay, 0s) both; }
.turn-reverse .flip-stage,
.turn-reverse .flip-back,
.turn-reverse .flip-front { animation-direction: reverse; }
@keyframes flipOver {
  from { transform: rotateY(0); }
  to { transform: rotateY(180deg); }
}
@keyframes backGone {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@keyframes frontGone {
  0%, 50% { opacity: 0; }
  50.01%, 100% { opacity: 1; }
}

/* undo of draw: the departing packet keeps the pad's prior cards underneath
   (z-1) so the persistent fan stays continuous while drawn cards glide back. */
.waste-arrival-stay {
  z-index: -1;
  pointer-events: none;
}

/* FLIP glide — the card rides from its previous spot (--fx/--fy set in JS) to rest. */
.glide {
  z-index: var(--glide-z, 300);
  animation: glide var(--glide-dur, var(--dur-glide)) var(--ease-glide) backwards;
}
.glide.glide-reverse { animation-timing-function: var(--ease-glide-reverse); }
@keyframes glide {
  from { transform: translate(var(--fx, 0px), var(--fy, 0px)); }
  to { transform: translate(0, 0); }
}

.draw-reverse,
.redeal-flyer {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  perspective: 1000px;
  width: var(--card-w);
  height: var(--card-h);
}

.draw-reverse {
  z-index: var(--glide-z, 300);
  animation: glide var(--fly-dur, var(--dur-glide)) var(--ease-glide) var(--fd, 0ms) reverse backwards;
}
.draw-reverse .flip-stage,
.draw-reverse .flip-back,
.draw-reverse .flip-front { animation-direction: reverse; }

.fly-hidden { opacity: 0; }
.drag-reverse-flyer {
  position: fixed;
  z-index: 350;
  pointer-events: none;
  box-shadow: 0 18px 34px oklch(0.15 0.04 176 / 0.55);
  transition: none !important;
}
.fold-stage { position: absolute; inset: 0; perspective: 1000px; }

/* redeal: each waste card flies straight from its own position to its stock
   slot, staggered one per slot tick so only a few cards are airborne at once
   (a sequential trail, not a moving block), face turning down mid-flight. The
   .fold-stage carries the whole flight (its translate goes from the card's own
   waste position --gx/--gy to the stock slot --tx/--ty), so there is no
   intermediate rally point and the pile never moves as one group. The turn
   reuses the draw's flip-stage component verbatim (flipOver/backGone/
   frontGone) with direction reversed so the face leads and the back settles in
   — the same 90deg-edge opacity swap as a normal card turn. Waiting/settled
   wrappers and the first 10% of source-resident motion stay at z40. Departing
   faces keep waste-pile order; at the exact face/back swap zBump inverts to
   stock order. Undo reverses the same layer and face keyframes. Durations are
   written as longhands (not the animation shorthand) so the inline --fly-dur
   slot timing resolves instead of falling back to the root --dur-glide. */
.redeal-flyer {
  animation-name: zBump;
  animation-duration: var(--fly-dur, var(--dur-glide));
  animation-delay: var(--fd, 0ms);
  animation-fill-mode: both;
}
.redeal-flyer .gather-stage {
  position: absolute;
  inset: 0;
  perspective: 1000px;
}
.redeal-flyer .fold-stage {
  animation-name: redealFly;
  animation-duration: var(--fly-dur, var(--dur-glide));
  animation-timing-function: var(--ease-glide);
  animation-delay: var(--fd, 0ms);
  animation-fill-mode: both;
}
.redeal-flyer .flip-stage,
.redeal-flyer .flip-back,
.redeal-flyer .flip-front { animation-direction: reverse; }
.redeal-flyer.redeal-reverse .flip-stage,
.redeal-flyer.redeal-reverse .flip-back,
.redeal-flyer.redeal-reverse .flip-front { animation-direction: normal; }
.redeal-flyer.redeal-reverse,
.redeal-flyer.redeal-reverse .fold-stage { animation-direction: reverse; }
@keyframes zBump {
  from, 10% { z-index: 40; }
  10.01%, 50% { z-index: var(--redeal-face-z, 120); }
  50.01%, to { z-index: var(--redeal-back-z, 60); }
}
@keyframes redealFly {
  from { transform: translate(var(--gx, 0px), var(--gy, 0px)); }
  to { transform: translate(var(--tx, 0px), var(--ty, 0px)); }
}

@media (prefers-reduced-motion: reduce), html[data-motion='off'] {
  .bump,
  .glide,
  .draw-reverse,
  .redeal-flyer,
  .fold-stage { animation: none !important; }
  .redeal-flyer .flip-stage,
  .redeal-flyer .flip-back,
  .redeal-flyer .flip-front { animation: none; }
  .redeal-flyer .flip-front { opacity: 0; }
  .drawing .flip-stage,
  .drawing .flip-back,
  .drawing .flip-front { animation: none; }
  .drawing .flip-back { opacity: 0; }
  .drawing .flip-front { opacity: 1; }
  .deal .card,
  .banner,
  .sheet { animation: reducedFade 100ms linear both !important; }
}

@keyframes reducedFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* win banner */
.overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: oklch(0.12 0.04 176 / 0.5);
  z-index: 400;
  padding: 20px;
}

.overlay[open] { display: flex; }
.overlay::backdrop { background: transparent; }

.banner {
  position: relative;
  width: min(420px, 92vw);
  background: var(--card-face);
  color: var(--card-ink);
  border-radius: var(--r-lg);
  padding: 36px 40px 32px;
  text-align: center;
  box-shadow: 0 22px 60px oklch(0.12 0.05 176 / 0.55);
  border: 2px solid var(--success);
  animation: banner var(--dur-banner) var(--ease);
}
@keyframes banner {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--success), var(--card-ink) 40%);
}

.banner h3 {
  margin: 8px 0 20px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.banner-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.banner-stats div {
  background: color-mix(in oklch, var(--card-ink), oklch(1 0 0 / 6%));
  border-radius: var(--r-md);
  padding: 10px 8px;
}

.banner-stats span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.banner-stats b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

.banner .btn { width: 100%; }

/* confetti — short, non-blocking, reduced-motion aware */
.confetti {
  position: fixed;
  top: -12px;
  left: 0;
  right: 0;
  height: 60vh;
  pointer-events: none;
  z-index: 401;
  overflow: hidden;
}

.confetti i {
  position: absolute;
  top: -14px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  animation: fall var(--dur-fall) var(--ease) forwards;
}

.confetti i:nth-child(3n) { background: var(--success); }
.confetti i:nth-child(3n + 1) { background: var(--danger); }

@keyframes fall {
  from { opacity: 1; transform: translateY(0) rotate(0deg); }
  to {
    opacity: 0.6;
    transform: translateY(58vh) rotate(540deg);
  }
}

@media (prefers-reduced-motion: reduce), html[data-motion='off'] {
  .confetti i { animation: none; opacity: 0; }
}

/* settings sheet */
.sheet {
  width: min(460px, 94vw);
  max-height: 86vh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  animation: banner var(--dur-banner) var(--ease);
  color: var(--settings-fg);
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.sheet h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }

/* session stats — shown inside the sheet on mobile (topbar collapses) */
.sheet-stats {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 4px 0 0;
}

.sheet-stats .stat {
  background: color-mix(in oklch, var(--surface-2), var(--shade) 20%);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 4px;
  text-align: center;
}

.sheet-stats .stat span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--settings-muted);
}

.sheet-stats .stat b {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
}

.row:first-of-type { border-top: none; }
.row .lbl { line-height: 1.35; }
.row .lbl small {
  display: block;
  color: var(--settings-muted);
  font-size: 12px;
  font-weight: 400;
}

.switches { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; }

.switches button {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--settings-fg);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  min-height: 38px;
}

.switches button:hover { background: color-mix(in oklch, var(--surface), var(--shade) 12%); }
.switches button.on { background: color-mix(in oklch, var(--surface), var(--shade) 20%); color: var(--settings-fg); }
.switches button:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }

.btn-danger {
  color: var(--settings-danger);
  border-color: color-mix(in oklch, var(--settings-danger), transparent 35%);
}
.btn-danger:hover { background: color-mix(in oklch, var(--surface), var(--shade) 14%); }
.sheet .btn:not(.btn-danger) { color: var(--settings-fg); }

/* continue-or-new sheet */
.continue-info {
  margin: 12px 0 18px;
  font-size: 13px;
  color: var(--settings-muted);
  font-variant-numeric: tabular-nums;
}

.continue-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.continue-actions .btn { min-width: 118px; min-height: 44px; }
.continue-actions .btn:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }

/* statistics sheet */
.stat-tabs { justify-content: flex-start; margin: 14px 0 6px; }
.stat-tabs button { min-height: 44px; padding: 8px 16px; }

.stat-empty {
  margin: 18px 0;
  font-size: 13px;
  color: var(--settings-muted);
}

.statgrid { margin: 10px 0 4px; }
.statgrid > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
}
.statgrid > div:first-child { border-top: none; }
.statgrid dt { font-size: 13px; color: var(--settings-muted); }
.statgrid dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.stat-foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* history sheet */
.history-list { display: flex; flex-direction: column; }

.hrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
}

.history-list .hrow:first-child { border-top: none; }

.hnum { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.hchip {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--settings-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
}

.hdate { font-size: 12px; color: var(--settings-muted); font-variant-numeric: tabular-nums; margin-right: auto; }

.hout { font-size: 12px; font-weight: 600; }
.out-won { color: var(--success); }
.out-lost { color: var(--danger); }
.out-abandoned { color: var(--settings-muted); }

.hrow .btn { min-height: 38px; padding: 6px 12px; font-size: 12px; }

.history-note {
  margin: 14px 0 2px;
  font-size: 12px;
  color: var(--settings-muted);
}

.win-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 16px;
  padding: 10px 12px;
  background: color-mix(in oklch, var(--card-ink), oklch(1 0 0 / 6%));
  border-radius: var(--r-md);
}

.win-deal-label { font-size: 13px; }
.win-deal-label b { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* achievements */
.awards-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

#awards-list .awards-row:first-child { border-top: none; }

.award-glyph {
  font-size: 18px;
  color: var(--settings-muted);
  width: 22px;
  text-align: center;
  flex: 0 0 auto;
}

.award-body { flex: 1 1 auto; line-height: 1.3; }
.award-body b { display: block; font-size: 14px; }
.award-body small { color: var(--settings-muted); font-size: 12px; }

.award-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--settings-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.awards-row.done .award-status { color: var(--success); }

.win-awards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 0 14px;
}

.award-new {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--card-ink), oklch(1 0 0 / 8%));
}

.award-new i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.09em;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--accent);
  color: oklch(0.25 0.06 60);
}

/* bug-report sheet */
.report-sheet { position: relative; }

.report-close {
  position: absolute;
  top: 14px;
  right: 14px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  line-height: 1;
}

.report-eyebrow {
  margin: 4px 0 10px;
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--settings-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
}

.report-sheet h3 { margin-bottom: 16px; }

.field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 12px 0 6px;
}

.report-sheet select,
.report-sheet textarea {
  width: 100%;
  appearance: none;
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--surface), var(--shade) 10%);
  color: var(--settings-fg);
  font: inherit;
  font-size: 14px;
  border-radius: var(--r-sm);
  padding: 11px 12px;
  min-height: 44px;
}

.report-sheet textarea { resize: vertical; min-height: 96px; }

.report-sheet select:focus-visible,
.report-sheet textarea:focus-visible,
.report-sheet button:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }

.report-quiet {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--settings-muted);
}

.hp-field { display: none !important; }

.report-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
}

.report-actions .btn { min-width: 128px; min-height: 44px; }

.report-result p { margin: 8px 0; font-size: 14px; }
.report-success { font-weight: 600; }
.report-note { font-size: 12.5px; color: var(--settings-muted); }
.report-error { font-weight: 600; }

/* status nudge — muted chip, never a toast */
.nudge {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
  padding: 10px 18px;
  opacity: 0;
  pointer-events: none;
  z-index: 350;
  transition: opacity var(--dur-fade) var(--ease);
  text-align: center;
  max-width: 80vw;
  white-space: nowrap;
}

.nudge.show { opacity: 1; }

/* ============ Embed widget (?embed=1) — board only, credit strip ============ */
.embed-strip {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 200;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: color-mix(in oklch, var(--surface-2), var(--shade) 10%);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  text-decoration: none;
  white-space: nowrap;
}

.embed-strip:hover { color: var(--fg); }

body.embed .topbar,
body.embed .deckrow,
body.embed .bottombar,
body.embed .paper,
body.embed .sitefooter,
body.embed .nudge { display: none; }

body.embed .embed-strip { display: block; }

body.embed #board { min-height: 100vh; }

body.embed .finish { bottom: 44px; }

/* auto-finish cue — quiet, ghost-level */
.finish {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 360;
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-card);
}

.finish[hidden] { display: none; }

/* sr-only for aria-live announcements */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* hide the deal animation after load */
#board.dealt .card { animation: none; }

/* real-card drag — the actual run follows the pointer, no clones */
.drag-run {
  position: fixed;
  margin: 0;
  z-index: 300;
  pointer-events: none;
  will-change: transform;
  box-shadow: 0 18px 34px oklch(0.15 0.04 176 / 0.55);
  transition: none;
}

.drag-run.drag-tween { transition: transform var(--dur-release) cubic-bezier(.2, .7,.2, 1); }

/* the run is position:fixed, but its z-index stays trapped inside the source
   pad's stacking context (.pad.waste isolates) — so the pad itself must rise
   above every auto-level pad while a run is lifted out of it */
.pad:has(.drag-run) { z-index: 800; }
.pad:has(.glide) { z-index: 300; }
.pad:has(.glide-flight) { z-index: 310; }

body.is-dragging { cursor: grabbing; }
body.is-dragging * { cursor: grabbing !important; }

@media (max-width: 1000px) {
  .topbar .stats { display: none; }
  .sheet-stats { display: grid; }
}

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; padding: 8px 10px; }
  .brand { font-size: 15px; }
  .topbar .stats { display: none; }
  .topbar .btn-primary { width: 40px; height: 40px; padding: 0; min-height: 40px; }
  .topbar .btn-primary .lbl { display: none; }
  .topbar .btn-primary .ico { display: block; }
  .sheet-stats { display: grid; }
}

@media (max-width: 480px) {
  .sheet {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 18px 18px 28px;
  }
  .row { flex-direction: column; align-items: stretch; gap: 8px; }
  .switches { width: 100%; justify-content: stretch; }
  .switches button { flex: 1 1 0; min-width: 0; padding-inline: 8px; }
}

@media (max-width: 420px) {
  .brand { flex-basis: 100%; text-align: center; font-size: 14px; }
  .controls { width: 100%; min-width: 0; justify-content: center; gap: 4px; }
  .seg button { padding-inline: 6px; font-size: 11px; }
  #btn-undo { padding-inline: 8px; }
  .sheet-stats .stat-score, .sheet-stats .stat-streak { display: none; }
}

/* touch: selection outlines & tap targets */
@media (pointer: coarse) {
  .btn, .seg button, .switches button { min-height: 44px; }
  .topbar .btn,
  .topbar .seg button,
  .topbar .btn-primary,
  .topbar .btn.ic,
  .topbar .icon-btn { min-height: 44px; height: 44px; }
  .topbar .btn-primary,
  .topbar .seg button,
  .topbar .btn.ic,
  .topbar .icon-btn { min-width: 44px; width: 44px; }
}

/* ============ Paper system (Round 9): felt = first screen, below fold = paper.
   Template for the content pages + the hub article; sitewide footer on every
   page incl. /. Structural model per user directive 2026-08-17. ============ */
.paper, footer.sitefooter { user-select: text; -webkit-user-select: text; }
.paper :focus-visible, footer.sitefooter :focus-visible { outline-color: var(--paper-focus); }

/* ---- felt band (content pages: slim brand row on felt) ---- */
.feltband {
  background: var(--bg); color: var(--fg);
  border-bottom: 1px solid var(--border);
}
.feltband .inner { padding: 18px clamp(16px, 5vw, 48px) 22px; }
.brandrow {
  display: flex; align-items: center; gap: 12px;
  max-width: 1120px; margin: 0 auto;
}
.brandrow .mark { flex: 0 0 auto; width: 30px; height: 30px; display: block; }
.brandrow .wordmark {
  font-size: 17px; font-weight: 600; letter-spacing: .01em; color: var(--fg);
  text-decoration: none;
}
.brandrow .wordmark:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- paper region ---- */
.paper { background: var(--paper); color: var(--paper-ink); }
.paper .inner {
  max-width: 720px; margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) clamp(20px, 6vw, 48px) clamp(40px, 8vw, 80px);
}
.breadcrumb {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper-muted); margin: 0 0 22px;
}
.breadcrumb a { color: var(--paper-ink); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb .sep { margin: 0 8px; opacity: .6; }

.paper h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  margin: 0 0 10px;
}
.lastupdated {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  color: var(--paper-muted); margin: 0 0 34px;
}

/* ---- hub article ---- */
.article p { margin: 0 0 18px; max-width: 45rem; font-size: 1.02rem; }
.article p:last-child { margin-bottom: 0; }
.article strong { font-weight: 650; }
.article ul { margin: 0 0 18px; padding-left: 22px; max-width: 45rem; }
.article li { margin: 0 0 10px; }
.article a { color: var(--paper-ink); text-underline-offset: 3px; }
.article .term { margin: 0 0 26px; max-width: 45rem; }
.article .term h2 {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em;
  margin: 0 0 8px; line-height: 1.3;
}
.article .term p { margin: 0 0 10px; }
.article h2.section {
  font-size: 1.35rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25;
  margin: 42px 0 12px;
}
.article h2.section:first-of-type { margin-top: 26px; }

/* ---- comparison table (stacked pure CSS on ≤720px — no copy/markup change) ---- */
.tablewrap { max-width: 640px; margin: 18px 0 10px; }
table.compare {
  width: 100%; border-collapse: collapse; font-size: 14.5px;
}
table.compare caption {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--paper-muted); padding: 0 0 10px;
}
table.compare th, table.compare td {
  text-align: left; vertical-align: top;
  padding: 10px 12px; border-top: 1px solid var(--paper-hairline);
}
table.compare thead th {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper-muted); font-weight: 600;
}
table.compare tbody th { font-weight: 650; white-space: nowrap; }
table.compare tbody tr:last-child th,
table.compare tbody tr:last-child td { border-bottom: 1px solid var(--paper-hairline); }
@media (max-width: 720px) {
  table.compare thead { display: none; }
  table.compare, table.compare tbody, table.compare tr,
  table.compare th, table.compare td { display: block; width: 100%; }
  table.compare tr { padding: 12px 0; border-top: 1px solid var(--paper-hairline); }
  table.compare tr:last-child { border-bottom: 1px solid var(--paper-hairline); }
  table.compare tbody th {
    white-space: normal;
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--paper-muted); padding: 0 0 6px; border: 0; font-weight: 600;
  }
  table.compare td { padding: 4px 0; border: 0; }
  table.compare td + td { margin-top: 4px; }
}

/* ---- FAQ details (visible Q&As, 44px summaries) ---- */
details.faq {
  border-top: 1px solid var(--paper-hairline); max-width: 45rem;
}
details.faq:last-of-type { border-bottom: 1px solid var(--paper-hairline); }
details.faq summary {
  cursor: pointer; font-weight: 650; font-size: 1.02rem;
  padding: 16px 4px; min-height: 44px; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: '+'; font-family: var(--mono); font-size: 16px; color: var(--paper-muted);
}
details.faq[open] summary::after { content: '\2212'; }
details.faq p { margin: 0 0 16px; padding: 0 4px; }

/* ---- snippet block (/embed/) ---- */
.snippet { margin: 28px 0 8px; max-width: 640px; }
.snippet .label {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 0 0 8px;
}
.snippet .label span {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper-muted);
}
.snippet pre {
  margin: 0; padding: 16px 18px;
  background: var(--card-back); color: var(--fg);
  border: 1px solid var(--hairline); border-radius: 10px;
  font-family: var(--mono); font-size: 13px; line-height: 1.55;
  overflow-x: auto; white-space: pre; tab-size: 2;
}
.snippet pre .tag { color: var(--accent-focus); }
.copybtn {
  font: inherit; font-weight: 700; font-size: 13px; letter-spacing: .04em;
  color: var(--accent-ink); background: var(--accent);
  border: 0; border-radius: 999px;
  min-height: 44px; padding: 0 20px; cursor: pointer;
}
.copybtn:hover { filter: brightness(1.05); }
.copybtn:active { filter: brightness(.97); }

/* ---- sitewide footer (paper, every page incl. /) ---- */
footer.sitefooter {
  background: var(--paper); color: var(--paper-ink);
  border-top: 1px solid var(--paper-hairline);
}
footer.sitefooter .inner {
  max-width: 1120px; margin: 0 auto;
  padding: 22px clamp(20px, 5vw, 48px) 30px;
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center;
}
footer.sitefooter .brandline { display: flex; align-items: center; gap: 10px; }
footer.sitefooter .mark { width: 22px; height: 22px; display: block; }
footer.sitefooter .brandname { font-weight: 600; font-size: 14px; letter-spacing: .01em; }
footer.sitefooter .links { display: flex; flex-wrap: wrap; gap: 6px 4px; }
footer.sitefooter a {
  font-size: 14px; color: var(--paper-ink);
  text-decoration: underline; text-underline-offset: 3px;
  padding: 10px 10px; min-height: 44px; display: inline-flex; align-items: center;
}
footer.sitefooter .note {
  flex-basis: 100%; font-size: 12px; color: var(--paper-muted);
  letter-spacing: .02em;
}

/* ---- responsive ---- */
@media (max-width: 720px) {
  .brandrow { gap: 10px; }
  footer.sitefooter .links a { padding: 10px 8px; }
}

@media (forced-colors: active) {
  :root {
    --bg: Canvas;
    --surface: Canvas;
    --surface-2: Canvas;
    --fg: CanvasText;
    --muted: CanvasText;
    --settings-fg: CanvasText;
    --settings-muted: CanvasText;
    --settings-danger: CanvasText;
    --card-face: Canvas;
    --card-back: CanvasText;
    --card-ink: CanvasText;
    --type-red: CanvasText;
    --type-black: CanvasText;
    --suit-ghost: CanvasText;
    --accent: Highlight;
    --accent-focus: Highlight;
    --accent-ink: HighlightText;
    --border: CanvasText;
    --hairline: CanvasText;
  }
  .card,
  .pad,
  .sheet,
  .banner,
  .btn,
  .seg,
  .switches button { border-color: CanvasText; box-shadow: none; forced-color-adjust: auto; }
  .card { border: 1px solid CanvasText; }
  .card.face-up { background: Canvas; color: CanvasText; }
  .card.face-down { background: CanvasText; color: Canvas; }
  .card.face-up svg text,
  .wellmark svg text { fill: CanvasText !important; }
  .card.face-up svg path,
  .wellmark svg path { fill: CanvasText !important; stroke: CanvasText !important; }
  .pad .wellmark,
  .pad.foundation .wellmark { opacity: 1; }
  .card:focus-visible,
  .hinted,
  .valid,
  .valid-target,
  .drop-valid { outline: 3px solid Highlight; outline-offset: 2px; box-shadow: none; }
  .btn:focus-visible,
  .card:focus-visible,
  .pad[data-board-control]:focus-visible,
  .icon-btn:focus-visible { outline-color: Highlight; }
  .btn-primary { background: Highlight; color: HighlightText; }
  .btn-primary,
  .btn-primary .lbl { forced-color-adjust: none; }
  .snippet pre { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .snippet pre .tag { color: Highlight; }
  .copybtn { background: Highlight; color: HighlightText; }
  table.compare th, table.compare td,
  details.faq,
  footer.sitefooter { border-color: CanvasText; }
  .copybtn:focus-visible,
  footer.sitefooter a:focus-visible,
  .article a:focus-visible { outline-color: Highlight; }
}

.no-motion *, html[data-motion='off'] * {
  animation-duration: 0.12s !important;
  animation-delay: 0s !important;
}
.no-motion :is(.btn, .card, .nudge, .drag-run.drag-tween),
html[data-motion='off'] :is(.btn, .card, .nudge, .drag-run.drag-tween) {
  transition-duration: 0.12s !important;
}