/* ===== Theme variables ===== */
:root {
  --paper: #f4ecd9;
  --paper-deep: #e8dcc1;
  --paper-soft: #ede2c5;
  --paper-bg-translucent: rgba(244,236,217,.92);
  --ink: #1f1a14;
  --ink-soft: #5d5240;
  --ink-faint: #8a7f68;
  --rule: #c9b993;
  --rule-soft: #d8c8a3;
  --accent: #6f3a1d;
  --win: #2d6a3e;
  --loss: #a93232;
  --tie: #b08a25;
  --bg-glow-1: 120,90,50;
  --bg-glow-alpha: .18;
  --era-classic-bg: var(--ink);
  --era-gfk-bg: var(--accent);
  --era-cfk-bg: #2c4f6a;
  --era-modern-bg: #1a4530;
  --era-fg: #fff;
  /* DAeC class badge palette (light mode: dark bg, white fg) */
  --cls-club-bg:      #6f3a1d;
  --cls-standard-bg:  #2c4f6a;
  --cls-fifteen-bg:   #2d6a3e;
  --cls-eighteen-bg:  #1f5b6a;
  --cls-open-bg:      #6a2330;
  --cls-doppel-bg:    #4a2d6a;
  --cls-special-bg:   #4a4032;
  --cls-fg:           #fff;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}
[data-theme="dark"] {
  --paper: #15110d;
  --paper-deep: #1c1812;
  --paper-soft: #19140f;
  --paper-bg-translucent: rgba(21,17,13,.92);
  --ink: #f0e5c8;
  --ink-soft: #b8a988;
  --ink-faint: #8a7f6a;
  --rule: #4a3e2d;
  --rule-soft: #38301f;
  --accent: #e0a26a;
  --win: #6cd28d;
  --loss: #ea7a7a;
  --tie: #eac562;
  --bg-glow-1: 220,170,100;
  --bg-glow-alpha: .07;
  /* Era badges in dark mode: light-saturated bg with dark fg —
     reads as a sticker on dark paper. All ratios > 8:1. */
  --era-classic-bg: #d8c8a3;
  --era-gfk-bg: #e0a874;
  --era-cfk-bg: #8fb8d2;
  --era-modern-bg: #88c4a0;
  --era-fg: #1a1612;
  /* Class badge palette (dark mode: light-saturated bg with dark fg) */
  --cls-club-bg:      #d8b070;
  --cls-standard-bg:  #8fb8d2;
  --cls-fifteen-bg:   #88c4a0;
  --cls-eighteen-bg:  #80b8c0;
  --cls-open-bg:      #d89090;
  --cls-doppel-bg:    #b8a0d8;
  --cls-special-bg:   #c0b8a0;
  --cls-fg:           #1a1612;
  /* Outcome icons (✓ ✗ =) — light-saturated bg requires dark text */
  --outcome-icon-fg: #1a1612;
  color-scheme: dark;
}
:root { --outcome-icon-fg: #fff; }

*, *::before, *::after { box-sizing: border-box; }
@media (min-width: 1440px) { html { font-size: 18px; } }
@media (min-width: 1920px) { html { font-size: 20px; } }
html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  min-height: 100vh;
  min-height: 100svh;     /* small viewport — avoids overflow when iOS URL bar is showing */
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bot);
}
body { overflow-x: hidden; }
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(var(--bg-glow-1), var(--bg-glow-alpha)), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(var(--bg-glow-1), var(--bg-glow-alpha)), transparent 50%);
}

/* ===== Head ===== */
.head {
  position: sticky;
  top: var(--safe-top);
  z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: .65rem;
  padding: .3rem .65rem;
  background: var(--paper-bg-translucent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
  font-size: .95rem;
  min-height: 40px;
}
.head-btn {
  background: transparent; border: 0;
  color: var(--accent); text-decoration: none;
  padding: .25rem; cursor: pointer; font: inherit;
  border-radius: 6px;
  touch-action: manipulation;
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  transition: background .15s ease;
}
.head-btn svg {
  width: 24px; height: 24px;
  fill: currentColor;
  display: block;
}
.head-btn:hover, .head-btn:active { background: rgba(111,58,29,.1); }
[data-theme="dark"] .head-btn:hover, [data-theme="dark"] .head-btn:active { background: rgba(224,162,106,.12); }
.head-score {
  display: flex; align-items: center; justify-content: center;
  gap: 1.6rem; font-feature-settings: "tnum";
}
body.no-game .head-score { visibility: hidden; }
.head-side {
  display: flex; flex-direction: column; align-items: center;
  gap: .05rem;
  position: relative;
  line-height: 1;
}
.head-side-label {
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .68rem; font-weight: 600; color: var(--ink-soft);
}
.head-num {
  font-size: 1.45rem; font-weight: 700;
  min-width: 1.2rem; text-align: center;
  line-height: 1;
  display: inline-block;
  transform-origin: center;
}
.head-num.bump { animation: scoreBump 500ms cubic-bezier(.2,1.4,.3,1); }
@keyframes scoreBump {
  0%   { transform: scale(1);    color: var(--ink); }
  30%  { transform: scale(1.35); color: var(--accent); }
  100% { transform: scale(1);    color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .head-num.bump { animation: none; }
}
.head-mid {
  display: flex; align-items: center; gap: .35rem;
  color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .82rem;
  font-weight: 600;
}
.head-pot { color: var(--accent); }

/* ===== Board ===== */
main#board {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem .9rem 1.8rem;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: .85rem;
  position: relative;
  z-index: 1;
  perspective: 1600px;
}
main#board[hidden] { display: none; }

.midslot {
  min-height: 4.4rem;
  display: grid; place-items: center;
  position: relative;
  padding: .35rem 0;
}
/* Starter announcement: the same up/down arrow SVG used for turn-state pills,
   rotated to land at up (top player) or down (bottom player). Lives inside
   the standard .status-icon so it sits next to the announcement text. */
.starter-arrow { transform-origin: 50% 50%; }

/* ===== Card ===== */
.card-slot {
  position: relative;
  width: 100%;
  max-width: 28rem;
  aspect-ratio: 8 / 5;       /* landscape, 1.6:1 */
  margin: 0 auto;
}
.card-stack {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.stack-layer {
  position: absolute; inset: 0;
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  background: var(--paper-soft);
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 4px 10px rgba(40,30,15,.16);
  transform-origin: 50% 60%;
}
[data-theme="dark"] .stack-layer {
  background: var(--paper-deep);
  box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.5);
}
.card {
  width: 100%;
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
  box-shadow:
    0 1px 0 rgba(0,0,0,.06),
    0 4px 8px rgba(40,30,15,.14),
    0 12px 22px rgba(40,30,15,.22);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: absolute;
  inset: 0;
  z-index: 1;
}
[data-theme="dark"] .card {
  box-shadow:
    0 1px 0 rgba(0,0,0,.45),
    0 4px 10px rgba(0,0,0,.45),
    0 12px 26px rgba(0,0,0,.6);
}
.card-front { flex: 1; min-height: 0; }
.card-stats { flex: 1; min-height: 0; grid-auto-rows: 1fr; }

.card-front { display: flex; flex-direction: column; }
.card-loading { padding: 1.5rem; text-align: center; color: var(--ink-faint); margin: auto; }

.card-back {
  background: var(--paper) url('/images/backside-crop.png?v=2') center / cover;
  border-color: #6f3a1d !important;
}
[data-theme="dark"] .card-back {
  filter: brightness(0.82);
}

/* Card head */
.card-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .6rem .95rem .25rem;
  border-bottom: 1.5px solid var(--ink);
  background: var(--paper-soft);
  position: relative;
  overflow: hidden;
}
.card-head-l { min-width: 0; }
.card-mfr {
  font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.card-model {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem; line-height: 1.62rem; height: 1.62rem; margin: .15rem 0 0;
  font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-model--md { font-size: 1.05rem; }
.card-model--sm { font-size: .88rem; }
.card-head-r { display: flex; flex-direction: column; align-items: flex-end; gap: .22rem; text-align: right; }
.era {
  text-transform: uppercase; letter-spacing: .12em;
  background: var(--era-classic-bg); color: var(--era-fg);
  padding: .08rem .5rem;
  border-radius: 3px; font-size: .72rem; font-weight: 600;
}
.era.gfk { background: var(--era-gfk-bg); }
.era.cfk { background: var(--era-cfk-bg); }
.era.modern { background: var(--era-modern-bg); }

.class-badge {
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--cls-fg);
  padding: .08rem .5rem;
  border-radius: 3px; font-size: .72rem; font-weight: 600;
  white-space: nowrap;
}
.cls-club      { background: var(--cls-club-bg); }
.cls-standard  { background: var(--cls-standard-bg); }
.cls-fifteen   { background: var(--cls-fifteen-bg); }
.cls-eighteen  { background: var(--cls-eighteen-bg); }
.cls-open      { background: var(--cls-open-bg); }
.cls-doppel    { background: var(--cls-doppel-bg); }
.cls-special   { background: var(--cls-special-bg); }

/* Stat grid */
.card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Rows share available space evenly. With 8 stats this is 4 equal rows;
     no fixed minimum so the card stays the same height as with 6 stats. */
  grid-auto-rows: minmax(0, 1fr);
  position: relative;
  background: var(--paper);
}
.card-stats::before {
  content: ""; position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px; background: var(--rule-soft);
  pointer-events: none; z-index: 0;
}
.stat-row {
  display: flex; flex-direction: column; justify-content: center;
  padding: .35rem 1.15rem;
  background: var(--paper);
  cursor: pointer;
  position: relative;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  min-height: 0;     /* size determined by grid track (1fr) */
  transition: background .15s ease;
  z-index: 1;
}
.stat-row.locked { cursor: default; }
.card-stats > .stat-row:nth-child(n+3) { border-top: 1px dashed var(--rule); }
@media (hover: hover) {
  .stat-row:hover:not(.locked) { background: var(--paper-soft); }
}
.stat-row:active:not(.locked) { background: var(--paper-deep); }
.stat-row .stat-label {
  font-size: .8rem; letter-spacing: .04em;
  color: var(--ink-soft); display: flex; align-items: baseline; gap: .25rem;
  text-transform: uppercase;
}
.stat-row .stat-label .arrow {
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}
.stat-row .stat-val {
  font-feature-settings: "tnum";
  font-size: 1.1rem; font-weight: 700; line-height: 1.15;
  margin-top: .15rem;
}
.stat-row .stat-unit { color: var(--ink-faint); font-size: .82rem; font-weight: 400; margin-left: .15rem; }
.stat-row .stat-est {
  color: var(--ink-faint); font-size: .9rem; font-weight: 400;
  margin-right: .15rem; cursor: help;
}

.stat-row.last-played {
  background: rgba(255,250,220,.85);
  box-shadow: inset 0 0 0 1.5px var(--accent);
  z-index: 2;
}
[data-theme="dark"] .stat-row.last-played { background: rgba(70,55,30,.6); }

/* Roulette spin highlight while AI is choosing */
.stat-row.roulette {
  background: rgba(255,250,220,.7);
  box-shadow: inset 0 0 0 2px var(--accent);
  z-index: 2;
  transition: background 60ms ease, box-shadow 60ms ease;
}
[data-theme="dark"] .stat-row.roulette { background: rgba(70,55,30,.55); }
.stat-row.last-played::after {
  content: ""; position: absolute; right: .55rem; top: .4rem;
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700;
  color: var(--outcome-icon-fg); line-height: 1;
}
.stat-row.last-played.win::after { content: "✓"; background: var(--win); }
.stat-row.last-played.loss::after { content: "✗"; background: var(--loss); }
.stat-row.last-played.tie::after { content: "="; background: var(--tie); }
.stat-row.last-played.win .stat-val { color: var(--win); }
.stat-row.last-played.loss .stat-val { color: var(--loss); }
.stat-row.last-played.tie .stat-val { color: var(--tie); }

.card-foot {
  padding: .4rem .95rem;
  border-top: 1px solid var(--rule);
  background: var(--paper-soft);
  display: flex; justify-content: space-between; align-items: center;
  font-size: .76rem; color: var(--ink-faint);
  gap: .5rem;
}
.card-foot .foot-l {
  display: inline-flex; align-items: center; gap: .45rem;
  min-width: 0; flex: 1;
}
.card-info-btn {
  background: transparent;
  border: 1.5px solid var(--ink-faint);
  border-radius: 50%;
  width: 1.55rem; height: 1.55rem;
  min-width: 1.55rem;
  display: inline-grid; place-items: center;
  font: inherit;
  font-family: inherit;
  font-weight: 700;
  font-size: .85rem;
  line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  touch-action: manipulation;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.card-info-btn:hover, .card-info-btn:active {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--paper);
}
.card.showing-info .card-info-btn {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
[data-theme="dark"] .card.showing-info .card-info-btn { color: #1a1612; }

/* Card body view switching: stats / photo / info */
.card-stats, .card-photo, .card-info {
  flex: 1; min-height: 0;
  display: none;
}
.card[data-view="stats"] .card-stats { display: grid; }
.card[data-view="photo"] .card-photo {
  display: block;
  position: absolute;          /* fill the whole card so the photo gets the
                                   full 8:5 area instead of card-minus-header */
  inset: 0;
  background: var(--paper);
  overflow: hidden;
  z-index: 0;
}
.card[data-view="photo"] .card-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  background: var(--paper-soft);
  border-bottom: 1px solid var(--rule);
}
.card-photo-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: 50% 50%;
}
.card-photo-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 1rem;
  gap: .35rem;
}
.card[data-view="info"]  .card-info  {
  display: block;
  padding: .85rem 1rem .65rem;
  background: var(--paper);
  overflow-y: auto;
}
/* Default if no data-view yet — show stats. */
.card:not([data-view]) .card-stats { display: grid; }

.card-photo-mfr {
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--ink-faint);
  text-align: center;
  text-transform: uppercase;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-photo-model {
  font-size: 1.7rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: .04em;
  color: var(--ink);
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-info-designer {
  font-size: .85rem;
  color: var(--ink);
  margin-bottom: .55rem;
  padding-bottom: .45rem;
  border-bottom: 1px dashed var(--rule);
  font-style: italic;
}
.card-info-designer .card-info-key {
  font-style: normal;
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft);
  margin-right: .25rem;
}
.card-info-text {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-line;
}
.card-info-foot {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .4rem;
  row-gap: .18rem;
  align-items: baseline;
  margin-top: .4rem;
  padding-top: .4rem;
  border-top: 1px dashed var(--rule);
  font-size: .72rem;
  color: var(--ink-faint);
}
.card-info-foot .card-info-key {
  font-style: normal;
  font-weight: 600;
  font-size: .68rem;
  text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap;
}
.card-info-val {
  word-break: break-word;
}
.card-info-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 380px) {
  .card[data-view="info"] .card-info { padding: .7rem .85rem .55rem; }
  .card-info-text { font-size: .85rem; }
  .card-info-foot { font-size: .7rem; }
  .card-photo-model { font-size: 1.4rem; }
  .card-photo-mfr { font-size: .82rem; }
}

/* Tappable head — show pointer + faint hover. */
.card-head { cursor: pointer; user-select: none; -webkit-user-select: none; }
.card-head:hover { background: var(--paper-deep); }
.index-pill {
  background: var(--ink); color: var(--paper);
  padding: .08rem .5rem; border-radius: 3px;
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .62rem; font-weight: 700;
  white-space: nowrap;
  font-feature-settings: "tnum";
}
.head-tags {
  display: flex; flex-direction: column; align-items: flex-end; gap: .25rem;
}

/* Reveal flip — opp card transitions from face-down to face-up */
.card { transition: transform 240ms ease-out, box-shadow .15s ease; transform-style: preserve-3d; backface-visibility: hidden; }
.card.flipping-out { transform: rotateY(90deg); transition: transform 240ms ease-in; }
.card.flipping-in  { transform: rotateY(-90deg); transition: none; }
@media (prefers-reduced-motion: reduce) {
  .card { transition: box-shadow .15s ease; }
  .card.flipping-out, .card.flipping-in { transform: none; }
}

.card.thinking { animation: thinking 1.4s ease-in-out infinite; }
@keyframes thinking {
  0%,100% { box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 6px 18px rgba(40,30,15,.18); }
  50%     { box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 6px 22px rgba(111,58,29,.4), 0 0 0 2px rgba(111,58,29,.25); }
}
[data-theme="dark"] .card.thinking { animation-name: thinkingDark; }
@keyframes thinkingDark {
  0%,100% { box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.55); }
  50%     { box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 8px 26px rgba(224,162,106,.35), 0 0 0 2px rgba(224,162,106,.3); }
}

/* ===== Status pill ===== */
.status-pill {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: .45rem .95rem .45rem .55rem;
  display: inline-flex; align-items: center; gap: .55rem;
  box-shadow: 0 3px 0 rgba(0,0,0,.08), 0 8px 18px rgba(40,30,15,.25);
  animation: pillIn .26s cubic-bezier(.2,1.4,.3,1);
  pointer-events: none;
  max-width: calc(100% - 1rem);
}
[data-theme="dark"] .status-pill { box-shadow: 0 3px 0 rgba(0,0,0,.5), 0 8px 18px rgba(0,0,0,.6); }
.status-pill[hidden] { display: none; }
.status-pill.fading { animation: pillOut .32s ease forwards; }
@keyframes pillIn {
  from { transform: translateY(6px) scale(.94); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes pillOut {
  to { transform: translateY(4px); opacity: 0; }
}
.status-icon-wrap {
  position: relative;
  width: 2.3rem; height: 2.3rem;
  flex-shrink: 0;
}
.status-icon {
  position: absolute; inset: .35rem;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: .92rem;
  color: var(--outcome-icon-fg);
  background: var(--ink-faint);
}
.status-progress {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.status-progress circle {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.status-progress circle.track {
  stroke: var(--rule);
  stroke-width: 4;
  opacity: .55;
}
.status-progress circle.bar {
  stroke: currentColor;
  stroke-width: 4;
  color: var(--ink-faint);
  filter: drop-shadow(0 0 1px currentColor);
}
.status-pill.countdown .status-progress { opacity: 1; }
.status-pill.countdown .status-progress circle.bar {
  animation: ringDeplete var(--countdown, 4500ms) linear forwards;
}
/* Countdown ring is a neutral countdown indicator — outcome is conveyed by the
   pill text color, not the ring. */
.status-pill.countdown .status-progress circle.bar { color: var(--ink); }
@keyframes ringDeplete {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 100; }
}
@media (prefers-reduced-motion: reduce) {
  .status-pill.countdown .status-progress circle.bar { animation: none; stroke-dashoffset: 50; }
}
.status-text {
  text-transform: uppercase; letter-spacing: .12em;
  font-weight: 600; font-size: .78rem;
  white-space: nowrap;
  color: var(--ink);
}
/* Outcome color stays on the text + countdown ring; icon background is neutral. */
.status-pill.win .status-text { color: var(--win); }
.status-pill.loss .status-text { color: var(--loss); }
.status-pill.tie .status-text { color: var(--tie); }
.status-pill.thinking .status-icon { background: var(--accent); animation: dot 1.1s ease-in-out infinite; }
/* Pill is the central flow control during reveal: tappable for pause/continue. */
.status-pill.flow-tap {
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.status-pill.flow-tap:hover { transform: translateY(-1px); transition: transform .12s ease; }
.status-pill.flow-tap:active { transform: translateY(0); }
/* Frozen state: ring hidden, icon keeps its outcome color (win/loss/tie), gentle pulse. */
.status-pill.paused .status-progress { opacity: 0; }
.status-pill.paused .status-icon { animation: pillPausedPulse 1.6s ease-in-out infinite; }
@keyframes pillPausedPulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .7; }
}
/* SVG glyphs inside the pill icon — sized to fit the circle, color via currentColor. */
.status-icon svg {
  width: 1.05rem; height: 1.05rem;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.status-icon svg.fill { fill: currentColor; stroke: none; }
@keyframes dot {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(.8); opacity: .6; }
}

/* ===== Intro screen ===== */
.intro {
  max-width: 32rem;
  margin: 0 auto;
  padding: 1.1rem 1rem 3rem;
  position: relative;
}
.intro[hidden] { display: none; }
.intro-title {
  margin: 0 0 .65rem;
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .9rem; font-weight: 600;
  text-align: center;
  color: var(--ink-soft);
}
.intro-title.intro-subtitle {
  margin-top: .9rem;
}
.instructions {
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  background: var(--paper-soft);
  margin: 1.5rem 0;
  overflow: hidden;
}
@media (min-width: 720px) {
  .instructions { margin: 1rem auto; border-radius: 16px; max-width: 32rem; }
}
.instructions summary {
  padding: 1rem 1.2rem;
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  user-select: none;
  -webkit-user-select: none;
}
.instructions summary::-webkit-details-marker { display: none; }
.instructions summary::after {
  content: '+';
  display: inline-block;
  width: 1.4rem; height: 1.4rem;
  text-align: center;
  font-size: 1.3rem; line-height: 1.3rem;
  font-weight: 400;
  color: var(--ink-faint);
  transition: transform .2s ease;
}
.instructions[open] summary::after {
  content: '−';
}
.instructions summary:hover { background: var(--paper-deep); }
.instructions ul {
  margin: 0;
  padding: .5rem 1.2rem 1.2rem 2.3rem;
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.instructions li { margin-bottom: .5rem; }
.instructions li:last-child { margin-bottom: 0; }
.instructions .instr-hint {
  margin: .85rem 1.2rem 1.1rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--rule);
  font-size: .85rem;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.45;
}
@media (min-width: 720px) {
  .instructions summary  { padding: 1.4rem 1.6rem; font-size: 1.2rem; }
  .instructions ul       { padding: .9rem 1.6rem 1.6rem 3rem; font-size: 1.15rem; line-height: 1.55; }
  .instructions li       { margin-bottom: .8rem; }
  .instructions .instr-hint { margin: 1.2rem 1.6rem 1.5rem; padding-top: 1.1rem; font-size: 1.05rem; }
}
.instr-sample {
  padding: 1.1rem 1rem 1.6rem;
  display: flex;
  justify-content: center;
  /* Card internals (font sizes, paddings) are sized for the in-game 28rem
     slot. Render the slot at design size and scale the whole subtree down
     to fit the narrower intro column. Quick fix — revisit with em-based
     internals later. */
  --instr-scale: 0.78;
  --instr-design-w: 28rem;
}
.instr-sample .card-slot {
  width: var(--instr-design-w);
  max-width: var(--instr-design-w);
  transform: scale(var(--instr-scale));
  transform-origin: top center;
  /* Reclaim the vertical space the scale frees up: the slot's natural height
     is design-w × 5/8; we shave off (1 − scale) × that. */
  margin-bottom: calc(var(--instr-design-w) * 5 / 8 * (var(--instr-scale) - 1));
}

/* Intro stages: title screen → settings screen. Each is a self-contained
   panel; one is hidden at any moment. The transition is JS-driven. */
.intro-stage[hidden] { display: none; }

/* Light-theme intro: force warm cream palette when NOT in dark mode.
   In dark mode these are skipped and the global dark vars take over. */
html:not([data-theme="dark"]) body.no-game,
html:not([data-theme="dark"]) body.no-game #intro {
  --paper: #f4ecd9;
  --paper-deep: #e8dcc1;
  --paper-soft: #ede2c5;
  --paper-bg-translucent: rgba(244,236,217,.92);
  --ink: #1f1a14;
  --ink-soft: #5d5240;
  --ink-faint: #8a7f68;
  --rule: #c9b993;
  --rule-soft: #d8c8a3;
  --accent: #6f3a1d;
  --bg-glow-1: 120,90,50;
  --bg-glow-alpha: .18;
  --outcome-icon-fg: #fff;
  color-scheme: light;
}
body.no-game { background: var(--paper); color: var(--ink); }

/* Dark-mode intro: logo can't use multiply on dark bg — show it as a
   framed illustration instead. Mode-card JPEGs have cream backgrounds
   which sit naturally as "cards" on the dark surface. */
[data-theme="dark"] body.no-game .intro-logo {
  mix-blend-mode: normal;
  filter: none;
  border-radius: 10px;
  box-shadow: 0 2px 16px rgba(0,0,0,.45);
}

/* Brand block (wordmark + tagline) at the top of the title stage. */
.intro-brand {
  display: flex; flex-direction: column; align-items: center;
  gap: 0;
  margin: .25rem 0 2.5rem;
  text-align: center;
}
.intro-logo {
  display: block;
  width: min(62vw, 224px);
  height: auto;
  mix-blend-mode: multiply;
  filter: brightness(1.2) saturate(1.1);
}
@media (min-width: 720px) {
  .intro-logo { width: 276px; }
}
.intro-tagline {
  margin: -.25rem 0 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.44rem;
  font-style: italic;
  font-weight: 700;
  color: var(--ink-soft);
}
@media (min-width: 720px) {
  .intro-brand   { margin: 1rem 0 3rem; gap: 0; }
  .intro-tagline  { font-size: 2.08rem; }
}

/* Mode picker — 2x2 grid on desktop, swipe carousel on mobile. */
.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: .5rem 0 .25rem;
}
@media (min-width: 720px) {
  .intro { max-width: 62rem; padding: .5rem 1.5rem 2rem; }
  .intro-brand { margin: 0 0 5rem; }
  .mode-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: .5rem 0 .25rem; }
}
.mode-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 14px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: box-shadow .15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mode-card.active {
  box-shadow: 0 0 0 3px var(--accent);
}
.mode-card-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 14px;
  pointer-events: none;
}

/* Caption beneath the grid — describes the active mode. */
.mode-caption {
  position: relative;
  z-index: 1;
  margin: .2rem 0 2rem;
  text-align: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink-soft);
  min-height: 1.3em;
  transition: opacity .2s ease;
}
.mode-caption.fade { opacity: 0; transition: opacity .12s ease; }
@media (min-width: 720px) {
  .mode-caption { margin: .15rem 0 1rem; font-size: 1.5rem; }
}

/* Mobile: swipe carousel — grid becomes a horizontally scroll-snapped row. */
@media (max-width: 640px) {
  .mode-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: .8rem;
    padding: .25rem .6rem .6rem;
    margin-left: -1rem; margin-right: -1rem;
    scroll-padding-inline: .6rem;
    scrollbar-width: none;
  }
  .mode-grid::-webkit-scrollbar { display: none; }
  .mode-card {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }
}


/* Settings stage: per-mode options after the user picks a mode. */
.intro-stage-title {
  margin: .3rem 0 .75rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
}
.intro-back {
  position: absolute;
  top: 0; left: 0;
  background: transparent;
  border: 0;
  padding: .55rem .7rem;
  cursor: pointer;
  color: var(--ink-soft);
  border-radius: 8px;
  display: grid; place-items: center;
}
.intro-back:hover { color: var(--ink); background: var(--paper-soft); }
.intro-back svg { width: 1.5rem; height: 1.5rem; display: block; }
#intro-stage-settings { position: relative; padding-top: .4rem; }
/* Reclaim the title-screen bottom breathing-room when settings stage is visible. */
#intro:has(#intro-stage-settings:not([hidden])) { padding-bottom: .75rem; }

.settings-pane {
  display: flex; flex-direction: column; gap: .55rem;
  margin-bottom: .9rem;
}
.settings-pane[hidden] { display: none; }

/* Soft per-mode hint text shown beneath segmented controls. */
.mode-tile-hint {
  font-size: .88rem;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.35;
}

/* Desktop scaling for intro-scoped form controls (don't touch the in-game
   settings popover, which uses the same classes). */
/* Tighten segmented controls inside the intro on mobile. */
#intro .settings-segmented button { padding: .55rem .35rem; }
@media (min-width: 720px) {
  #intro .settings-segmented      { border-radius: 10px; }
  #intro .settings-segmented button { padding: .7rem .5rem; }
  #intro .settings-select         { border-radius: 10px; }
  #intro .class-pill              { font-size: 1.05rem; padding: .55rem .9rem; }
}
.cpuvscpu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.intro-section {
  margin-top: .9rem;
  display: flex; flex-direction: column; gap: .45rem;
}
@media (min-width: 720px) {
  .intro-section { margin-top: 1.75rem; gap: .8rem; }
}
.section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem;
}
.class-filter {
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.class-pill {
  border: 1.5px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  padding: .4rem .75rem;
  border-radius: 999px;
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
  touch-action: manipulation;
  display: inline-flex; align-items: center; gap: .35rem;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.class-pill .pill-dot {
  width: .55rem; height: .55rem; border-radius: 50%;
  display: inline-block;
  background: var(--rule);
}
.class-pill.active {
  background: var(--paper-deep);
  border-color: var(--ink);
  color: var(--ink);
}
.class-pill:not(.active) { opacity: .55; }
.class-pill .pill-count {
  font-size: .78rem; color: var(--ink-faint);
  font-feature-settings: "tnum";
}
/* #filter-summary now uses .mode-tile-hint directly — this rule is kept as a safety net. */
.filter-summary {
  font-size: .88rem; color: var(--ink-soft);
  font-style: italic;
}
.settings-select {
  width: 100%;
  margin-top: .35rem;
  padding: .55rem .65rem;
  font: inherit;
  font-size: .95rem;
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  min-height: 40px;
  cursor: pointer;
}
.intro-start-btn {
  display: block;
  margin-top: 1.1rem;
  width: 100%;
  align-self: center;
  background: var(--accent);
  color: var(--paper);
  border: 0;
  border-radius: 10px;
  padding: .9rem 2.5rem;
  font: inherit;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  min-height: 48px;
  touch-action: manipulation;
  transition: filter .15s ease;
}
@media (min-width: 720px) {
  .intro-start-btn { margin-top: 2rem; width: auto; }
}
[data-theme="dark"] .intro-start-btn { color: #1a1612; }
.intro-start-btn:hover, .intro-start-btn:active { filter: brightness(1.08); }
.intro-start-btn:disabled { opacity: .4; cursor: not-allowed; filter: none; }
html[data-vintage="true"] .intro-start-btn {
  background-color: #1e0f04;
  background-image:
    linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
    url('/images/wood-table.jpg');
  background-size: auto, 512px 512px;
  color: #f2e4a8;
  border: 2px solid rgba(180,110,30,.65);
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
  box-shadow:
    0 2px 0 rgba(0,0,0,.35),
    0 6px 16px rgba(10,5,0,.55),
    inset 0 1px 0 rgba(200,140,40,.18);
}
html[data-vintage="true"] .intro-start-btn:hover,
html[data-vintage="true"] .intro-start-btn:active {
  filter: brightness(1.18);
}

/* ===== Lobby (multiplayer waiting room) ===== */
.lobby {
  max-width: 32rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 2rem;
  position: relative;
  z-index: 1;
}
.lobby[hidden] { display: none; }
.lobby-status {
  text-align: center;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-soft);
  font-size: .75rem; font-weight: 600;
  margin-bottom: 1.25rem;
  min-height: 1.5em;
}
.lobby-share {
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  padding: 1rem;
  background: var(--paper-soft);
  margin-bottom: 1.25rem;
}
.lobby-share-label {
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft);
  font-size: .68rem; font-weight: 600;
  margin-bottom: .55rem;
}
.lobby-qr {
  display: flex; justify-content: center;
  margin: .25rem 0 .9rem;
}
.lobby-qr svg {
  width: 14rem; height: 14rem;
  max-width: 100%;
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  padding: .55rem;
  box-sizing: border-box;
  shape-rendering: crispEdges;
}
.lobby-qr:empty { display: none; }
.lobby-url-row { display: flex; gap: .5rem; }
.lobby-url-row input {
  flex: 1; min-width: 0;
  padding: .55rem .65rem;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit; font-size: .92rem;
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-feature-settings: "tnum";
}
.lobby-copy-btn {
  background: var(--accent);
  color: var(--paper);
  border: 0;
  border-radius: 8px;
  padding: .55rem 1rem;
  font: inherit; font-weight: 600;
  cursor: pointer;
  min-height: 40px;
  touch-action: manipulation;
}
[data-theme="dark"] .lobby-copy-btn { color: #1a1612; }
.lobby-copy-btn:hover, .lobby-copy-btn:active { filter: brightness(1.08); }
.lobby-copy-btn.copied { background: var(--win); }
.lobby-players {
  display: flex; flex-direction: column;
  gap: .45rem;
  margin-bottom: 1.25rem;
}
.lobby-player {
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  padding: .65rem .9rem;
  background: var(--paper);
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
}
.lobby-player.empty { opacity: .55; font-style: italic; color: var(--ink-soft); }
.lobby-player.you { border-color: var(--accent); }
.lobby-player .lobby-player-name { font-weight: 600; }
.lobby-player .lobby-player-tag {
  font-size: .65rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft);
  padding: .14rem .55rem;
  border-radius: 999px;
  background: var(--paper-deep);
}
.lobby-player .lobby-player-tag.ready { background: var(--win); color: #fff; }
[data-theme="dark"] .lobby-player .lobby-player-tag.ready { color: #1a1612; }
.lobby-cancel-btn {
  width: 100%;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: .75rem;
  font: inherit; font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  touch-action: manipulation;
}
.lobby-cancel-btn:hover { background: var(--paper-deep); }

/* ===== Settings popover ===== */
.settings-pop {
  position: fixed;
  top: calc(var(--safe-top) + 48px);
  right: .65rem;
  z-index: 20;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(40,30,15,.35);
  width: min(20rem, calc(100% - 1.3rem));
  padding: .9rem 1rem 1rem;
  font-size: .92rem;
  animation: settingsIn .18s ease-out;
}
[data-theme="dark"] .settings-pop { box-shadow: 0 10px 30px rgba(0,0,0,.7); }
.settings-pop[hidden] { display: none; }
@keyframes settingsIn {
  from { transform: translateY(-6px) scale(.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.settings-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: .55rem; margin-bottom: .65rem;
  border-bottom: 1px solid var(--rule);
}
.settings-title {
  text-transform: uppercase; letter-spacing: .12em;
  font-weight: 700; font-size: .88rem;
}
.settings-close {
  background: transparent; border: 0; color: var(--ink-soft);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  padding: 0 .25rem; min-width: 28px; min-height: 28px;
  border-radius: 4px;
  transition: background .15s ease;
}
.settings-close:hover, .settings-close:active { background: var(--paper-deep); }
.settings-body { display: flex; flex-direction: column; gap: .85rem; }
.settings-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .35rem;
}
.settings-label {
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .82rem; font-weight: 600; color: var(--ink-soft);
}
.settings-segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
}
.settings-segmented button {
  background: var(--paper);
  color: var(--ink);
  border: 0;
  border-right: 1px solid var(--rule);
  padding: .65rem .35rem;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  min-height: 40px;
  touch-action: manipulation;
  transition: background .15s ease;
}
.settings-segmented button:last-child { border-right: 0; }
.settings-segmented button:hover { background: var(--paper-deep); }
.settings-segmented button.active {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}
[data-theme="dark"] .settings-segmented button.active { color: var(--paper); }
html[data-vintage="true"] .settings-segmented button {
  background-color: #c8a060;
  background-image:
    linear-gradient(rgba(238,210,148,.72), rgba(238,210,148,.72)),
    url('/images/wood-table.jpg');
  background-size: auto, 512px 512px;
}
html[data-vintage="true"] .settings-segmented button:hover {
  background-image:
    linear-gradient(rgba(220,188,120,.72), rgba(220,188,120,.72)),
    url('/images/wood-table.jpg');
}
html[data-vintage="true"] .settings-segmented button.active {
  background-color: #2e1a08;
  background-image:
    linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.42)),
    url('/images/wood-table.jpg');
  background-size: auto, 512px 512px;
  color: #f2e4a8;
}
.settings-segmented button:disabled { opacity: .35; cursor: not-allowed; }
.settings-segmented button:disabled:hover { background: transparent; }

.settings-feedback-btn {
  margin-top: .2rem;
  padding: .5rem;
  width: 100%;
  background: transparent;
  border: 1.5px dashed var(--rule);
  border-radius: 8px;
  color: var(--ink-soft);
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.settings-feedback-btn:hover { background: var(--paper-soft); color: var(--ink); }
html[data-vintage="true"] .settings-feedback-btn {
  color: var(--ink);
  border-color: var(--ink);
}
.feedback-textarea {
  width: 100%;
  padding: .5rem .65rem;
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
  resize: vertical;
  min-height: 5rem;
}
.feedback-textarea:focus { outline: none; border-color: var(--accent); }
.feedback-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .1rem; }
.feedback-cancel {
  padding: .45rem .85rem;
  background: transparent;
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  color: var(--ink-soft);
  font: inherit; font-size: .9rem;
  cursor: pointer;
}
.feedback-send {
  padding: .45rem .85rem;
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  color: var(--paper);
  font: inherit; font-size: .9rem; font-weight: 700;
  cursor: pointer;
}
[data-theme="dark"] .feedback-send { color: #1a1612; }
.feedback-send:disabled { opacity: .5; cursor: not-allowed; }
.feedback-thanks { margin: .5rem 0; text-align: center; color: var(--ink-soft); font-style: italic; }
.feedback-error  { margin: .4rem 0 0; font-size: .85rem; color: var(--loss); }

/* ===== Game-over dialog ===== */
dialog.game-over {
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  padding: 1.5rem 1.6rem;
  max-width: 22rem;
  width: calc(100% - 2rem);
  box-shadow: 0 20px 60px rgba(40,30,15,.4);
}
[data-theme="dark"] dialog.game-over { box-shadow: 0 20px 60px rgba(0,0,0,.7); }
dialog::backdrop { background: rgba(0,0,0,.55); }
.game-over h2 { margin: 0 0 .4rem; font-family: 'Playfair Display', Georgia, serif; }
.game-over p { margin: 0 0 1rem; color: var(--ink-soft); line-height: 1.45; }
.go-actions { display: flex; gap: .55rem; flex-wrap: wrap; }
.game-over button {
  background: var(--accent); color: var(--paper);
  border: 0; border-radius: 8px;
  padding: .7rem 1.1rem; font: inherit; font-weight: 600;
  cursor: pointer; min-height: 44px; touch-action: manipulation;
  flex: 1;
}
.game-over button.secondary {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink);
}
[data-theme="dark"] .game-over button { color: #1a1612; }
[data-theme="dark"] .game-over button.secondary { color: var(--ink); }
.game-over button:hover, .game-over button:active { filter: brightness(1.1); }

/* ===== Help dialog ===== */
dialog.help-dialog {
  border: 1.5px solid var(--rule);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  padding: 0;
  max-width: 32rem;
  width: calc(100% - 2rem);
  max-height: 92dvh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 20px 60px rgba(40,30,15,.35);
}
[data-theme="dark"] dialog.help-dialog { box-shadow: 0 20px 60px rgba(0,0,0,.65); }
.help-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--rule-soft);
}
.help-head h2 {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
}
/* Card guide — overlays the sample card in the help dialog, labelling tap zones */
.card-guide {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  display: flex;
  flex-direction: column;
  animation: card-guide-fade 3.5s ease-out forwards;
}
.card-guide-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.card-guide-top {
  /* matches card-head padding so the tint sits flush over it */
  padding: .6rem .95rem;
  background: rgba(111,58,29,.14);
  border-bottom: 1.5px solid rgba(111,58,29,.22);
  flex-shrink: 0;
}
.card-guide-body {
  flex: 1;
  background: rgba(111,58,29,.06);
}
.card-guide-top svg, .card-guide-body svg {
  width: 15px; height: 15px;
  fill: currentColor;
  flex-shrink: 0;
}
@keyframes card-guide-fade {
  0%, 65% { opacity: 1; }
  100%    { opacity: 0; }
}

/* Card in help dialog: full width, no scale transform */
.help-dialog .instr-sample {
  padding: .75rem 0 0;
  --instr-scale: 1;
}
.help-dialog .instr-sample .card-slot {
  width: 100%;
  max-width: 100%;
  transform: none;
  margin-bottom: 0;
}
.help-rules {
  margin: 0;
  padding: 1rem 1.3rem 0 2.4rem;
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.help-rules li { margin-bottom: .5rem; }
.help-rules li:last-child { margin-bottom: 0; }
.help-dialog .instr-hint {
  margin: .75rem 1.3rem 1.2rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--rule);
  font-size: .85rem;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.45;
}
.help-dialog .instr-disclaimer {
  margin: .4rem 1.3rem 1.2rem;
  font-size: .85rem;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.45;
}

/* ===== Narrow phones ===== */
@media (max-width: 380px) {
  .card-model { font-size: 1.2rem; line-height: 1.44rem; height: 1.44rem; }
  .card-model--md { font-size: .94rem; }
  .card-model--sm { font-size: .78rem; }
  .stat-row { padding: .25rem .7rem; min-height: 0; }
  .stat-row .stat-val { font-size: .95rem; }
  .stat-row .stat-label { font-size: .7rem; letter-spacing: .02em; }
  .stat-row .stat-unit { font-size: .72rem; }
  .card-head { padding: .5rem .7rem .2rem; }
  .card-foot { padding: .35rem .7rem; font-size: .72rem; }
  main#board { padding: 1.5rem .65rem 1.5rem; gap: .7rem; }
  .midslot { min-height: 4rem; }
  .head-num { font-size: 1.3rem; }
  .head-side-label { font-size: .76rem; }
}

/* ===== Wider screens — let the cards spread out ===== */
@media (min-width: 700px) {
  main#board { padding: 2.5rem 1.2rem; gap: 1rem; }
  .midslot { min-height: 4.8rem; }
  .card-model { font-size: 1.55rem; line-height: 1.86rem; height: 1.86rem; }
  .card-model--md { font-size: 1.2rem; }
  .card-model--sm { font-size: 1.0rem; }
  .stat-row { min-height: 0; padding: .45rem 1.1rem; }
  .stat-row .stat-val { font-size: 1.3rem; }
  .stat-row .stat-label { font-size: .82rem; }
  .head { padding: .35rem 1rem; font-size: 1rem; }
  .head-num { font-size: 1.6rem; }
  .head-side-label { font-size: .9rem; }
  .head-mid { font-size: 1.15rem; }
  .card-mfr { font-size: .82rem; }
  .card-foot { font-size: .82rem; }
}

/* ===== Vintage mode ===== */

/* Aged parchment palette (light mode) */
html[data-vintage="true"] {
  --paper:                #f0e6c8;
  --paper-deep:           #e2d4ae;
  --paper-soft:           #e8ddc0;
  --paper-bg-translucent: rgba(220,198,148,.95);
  --ink:                  #180c02;
  --ink-soft:             #523210;
  --ink-faint:            #806228;
  --rule:                 #b07c18;
  --rule-soft:            #c89830;
  --bg-glow-alpha:        0;
}

/* Dark vintage: dark parchment cards, warm cream ink — not brown */
html[data-theme="dark"][data-vintage="true"] {
  --paper:                #28190a;
  --paper-deep:           #1e1206;
  --paper-soft:           #231508;
  --paper-bg-translucent: rgba(38,24,10,.96);
  --ink:                  #ecdcac;
  --ink-soft:             #c8a86a;
  --ink-faint:            #a08040;
  --rule:                 #6a4c1a;
  --rule-soft:            #7a5c28;
}

/* On-wood text: bright cream + dark shadow for legibility on wood in both vintage modes.
   Scoped to elements that sit directly on the body background (no --paper ancestor).
   Note: .settings-label / .mode-tile-hint intentionally scoped to #intro so the
   floating #settings-pop (which has its own --paper background) keeps dark ink. */
html[data-vintage="true"] .intro-stage-title,
html[data-vintage="true"] .intro-title,
html[data-vintage="true"] .mode-caption,
html[data-vintage="true"] .intro-back,
html[data-vintage="true"] #intro .settings-label,
html[data-vintage="true"] #intro .mode-tile-hint,
html[data-vintage="true"] .lobby-status,
html[data-vintage="true"] .gallery-foot {
  color: #f2e4a8;
  text-shadow: 0 1px 2px rgba(0,0,0,.92), 0 2px 10px rgba(0,0,0,.65);
}

/* Subtitle: burned into the wood — dark charred marks with warm ember glow */
html[data-vintage="true"] .intro-tagline {
  color: rgba(0,0,0,.65);
  text-shadow: none;
  -webkit-text-stroke: 1px rgba(0,0,0,.5);
}

/* Wood table — tiling photo, warm dark fill as fallback */
html[data-vintage="true"] body {
  background-color: #2e1a08;
  background-image: url('/images/wood-table.jpg');
  background-size: 512px 512px;
  background-repeat: repeat;
}

/* body::before becomes a tint overlay to tune wood brightness per theme */
html[data-vintage="true"] body::before {
  display: block;
  background: rgba(200,130,20,.28);  /* light mode: saturated amber lifts + warms wood */
  pointer-events: none;
  position: fixed; inset: 0;
  z-index: 0;
}
html[data-theme="dark"][data-vintage="true"] body::before {
  background: rgba(8,4,0,.52);       /* dark mode: deepen the wood */
}

/* Settings popover — bright wood panel */
html[data-vintage="true"] .settings-pop {
  background-color: #c8a060;
  background-image:
    linear-gradient(rgba(238,210,148,.72), rgba(238,210,148,.72)),
    url('/images/wood-table.jpg');
  background-size: auto, 512px 512px;
}

/* Film grain — fixed overlay, pointer-events off */
html[data-vintage="true"]::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Card shadow — deep warm lift off the table */
html[data-vintage="true"] .card {
  border-color: rgba(90,55,8,.5) !important;
  box-shadow:
    0 2px 0 rgba(0,0,0,.18),
    0 6px 18px rgba(20,10,2,.6),
    0 22px 44px rgba(20,10,2,.65);
}

/* Stain layer — sparse small foxing spots, multiply over parchment */
html[data-vintage="true"] .card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='250'%3E%3Cfilter id='s' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.08' numOctaves='3' seed='12'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.48 0 0 0 0 0.24 0 0 0 0 0.04 0 0 0 1.8 -1.62'/%3E%3C/filter%3E%3Crect width='400' height='250' filter='url(%23s)'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  mix-blend-mode: multiply;
  opacity: .38;
  pointer-events: none;
  z-index: 10;
}

/* No stain over photos — it just reads as dithering on a smooth image */
html[data-vintage="true"] .card[data-view="photo"]::before { display: none; }

/* Worn-edge inner vignette */
html[data-vintage="true"] .card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 28px rgba(60,28,4,.38);
  pointer-events: none;
  z-index: 11;
}

/* Photos: light sepia tint only — keep the colour, just warm it slightly */
html[data-vintage="true"] .card-photo-img {
  filter: sepia(.2) contrast(1.08) brightness(.88) saturate(.95);
}

/* Card back — deeper worn */
html[data-vintage="true"] .card-back {
  filter: sepia(.65) saturate(.7) contrast(1.1) brightness(.78);
}

/* Stack shadow layers on wood */
html[data-vintage="true"] .stack-layer {
  box-shadow: 0 1px 0 rgba(0,0,0,.3), 0 4px 14px rgba(20,10,2,.55);
}

/* Mode-selection cards — same vintage depth as game cards */
html[data-vintage="true"] .mode-card {
  border: 1.5px solid rgba(90,55,8,.45) !important;
  box-shadow:
    0 2px 0 rgba(0,0,0,.18),
    0 6px 18px rgba(20,10,2,.6),
    0 22px 44px rgba(20,10,2,.65);
}
html[data-vintage="true"] .mode-card.active {
  border: 2px solid rgba(210,155,40,.95) !important;
  box-shadow:
    0 0 0 3px rgba(180,120,20,.55),
    0 2px 0 rgba(0,0,0,.18),
    0 6px 18px rgba(20,10,2,.6),
    0 22px 44px rgba(20,10,2,.65);
}
html[data-vintage="true"] .mode-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='s' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.08' numOctaves='3' seed='12'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.48 0 0 0 0 0.24 0 0 0 0 0.04 0 0 0 1.8 -1.62'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23s)'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  mix-blend-mode: multiply;
  opacity: .38;
  pointer-events: none;
  z-index: 10;
}
html[data-vintage="true"] .mode-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 28px rgba(60,28,4,.38);
  pointer-events: none;
  z-index: 11;
}
html[data-vintage="true"] .mode-card-img {
  filter: sepia(.2) contrast(1.08) brightness(.88) saturate(.95);
}
/* Mobile: compact shadows that don't bleed outside the scroll container */
@media (max-width: 640px) {
  html[data-vintage="true"] .mode-card {
    box-shadow: 0 2px 6px rgba(20,10,2,.55);
  }
  html[data-vintage="true"] .mode-card.active {
    box-shadow:
      0 0 0 3px rgba(180,120,20,.55),
      0 2px 6px rgba(20,10,2,.55);
  }
}

/* Logo — burned into wood (Brandzeichen / pyrography).
   PNG has a real alpha channel so transparent areas show pure wood grain;
   brightness(.28) only darkens the actual logo marks → dark burns. */
html[data-vintage="true"] .intro-logo {
  mix-blend-mode: multiply;
  filter: sepia(1) saturate(1.8) brightness(.42) contrast(1.7);
  opacity: 1;
}
html[data-vintage="false"] .intro-logo {
  mix-blend-mode: normal;
  filter: none;
}

/* Pill — warm tint, legibility kept */
html[data-vintage="true"] .pill {
  filter: sepia(.45) saturate(.95) brightness(.93);
}

/* ── PRIVACY MODAL ───────────────────────────────── */
.privacy-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 500;
  background: rgba(0,0,0,.55);
  align-items: center;
  justify-content: center;
}
.privacy-modal.open { display: flex; }
.privacy-box {
  background: var(--paper);
  border: 1.5px solid var(--rule);
  padding: 1.5rem 1.75rem 1.75rem;
  max-width: 380px;
  width: calc(100% - 2rem);
  position: relative;
  font-family: inherit;
}
.privacy-box h2 {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
  margin: 0 0 1rem;
  text-transform: uppercase;
}
.privacy-box h3 {
  font-size: .65rem;
  font-weight: 600;
  color: var(--accent);
  margin: .9rem 0 .25rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.privacy-box p {
  font-size: .7rem;
  line-height: 1.6;
  color: inherit;
  margin: 0;
  opacity: .85;
}
.privacy-close {
  position: absolute;
  top: .6rem; right: .75rem;
  background: none; border: none;
  color: var(--accent);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: .2rem;
  opacity: .7;
  transition: opacity .15s;
}
.privacy-close:hover { opacity: 1; }