/* ══════════════════════════════════════════════════════════════════════════
   THEMES — applied via html[data-theme="…"]

   The default theme (Midnight Green) lives in :root in style.css. A theme
   is primarily a variable-override block; a few scoped rules per theme are
   allowed for things variables can't express (fonts, images, toned-down
   effects). To add a theme: (1) a block here, (2) an entry in the THEMES
   registry at the top of app.js, (3) a .theme-swatch button in index.html
   plus a .theme-swatch-dot--<id> rule below.

   NOTE: --accent-rgb / --gold-rgb / --bar-rgb / --glass-rgb must stay in
   sync with their hex counterparts — they feed rgba() tints in style.css.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Vintage Parlour ─────────────────────────────────────────────────────────
   A 1940s East-Coast sitting room: parchment walls papered in a genuine
   William Morris "Marigold" floral (1875, CC0 scan — The Met, DP306733),
   ink-brown text, muted brick-red accents, and card backs printed with
   Morris & Co.'s "Poppy" (1887 sample book, public domain — Cooper
   Hewitt, CH 102200147). Serif type, no neon. */
html[data-theme="parlour"] {
  --bg-deep:        #E9DEC9;
  --bg-glow:        #F6EFDF;
  --bar-rgb:        242, 235, 220;
  --glass-rgb:      247, 241, 228;
  --accent:         #9E3F38;
  --accent-rgb:     158, 63, 56;
  --accent-dim:     #BA8078;
  --accent-contrast:#FBF4E6;
  --text:           #362A20;
  --text-muted:     #766450;
  --surface:        rgba(62,42,30,.05);
  --surface-border: rgba(62,42,30,.17);
  --control-bg:      #FFFDF5;
  --control-hover:   #F4EDDD;
  --control-ink:     #362A20;
  --control-ink-rgb: 62, 42, 30;
  --card-bg:        #FFFDF5;
  --card-black:     #2F2721;
  --card-red:       #A63A3E;
  --card-back-bg:   #96453D;
  --card-back-gold: #E8CFA4;
  --gold-rgb:       156, 116, 58;
  --green-win:      #567B56;
  --red-lose:       #A04A44;
  --status-accent:  #8A6B3E;
  --glow-petal-1:   #F5E7CB;   /* screen-blended: reads as faint lamplight */
  --glow-petal-2:   #F0DFC4;
  --glow-petal-3:   #EBD6B8;
  --home-glow-1:    rgba(156,116,58,.12);  /* home ambience: warm lamplight, not red */
  --home-glow-2:    rgba(158,63,56,.06);
  --card-back-medallion: '';
  --placeholder-border: rgba(62,42,30,.28);
  --floral:         url('assets/parlour-wallpaper.jpg');
  --floral-size:    520px;
  /* Period serif UI type — system serifs, no webfont cost */
  --font-ui: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
}

/* Ink on paper, not neon: swap the glow for a letterpress shadow */
html[data-theme="parlour"] .home-logo {
  text-shadow: 0 1px 0 rgba(255,253,245,.8), 0 2px 5px rgba(80,50,30,.28);
}
html[data-theme="parlour"] .live-dot { box-shadow: none; }

/* Card backs: the Poppy print itself — no trellis, no medallion */
html[data-theme="parlour"] .card-back-pattern {
  background: #96453D url('assets/parlour-cardback.png') center / cover repeat;
}

/* Form controls & secondary actions: translucent tints let the wallpaper
   bleed through, which reads as murky and unfinished. Print them on solid
   card stock instead — opaque paper base, a real ink border, and a slight
   shadow so each control sits on top of the pattern. */
html[data-theme="parlour"] .form-input {
  background: var(--card-bg);
  border-color: rgba(62,42,30,.4);
  box-shadow: inset 0 1px 2px rgba(62,42,30,.08);
}
html[data-theme="parlour"] .form-input:focus {
  border-color: var(--accent);
  box-shadow: inset 0 1px 2px rgba(62,42,30,.06), 0 0 0 3px rgba(var(--accent-rgb), .14);
}
html[data-theme="parlour"] .form-label,
html[data-theme="parlour"] .toggle-label { color: var(--text); }

/* Ghost buttons (Back / Keep Playing / Rules / Stats …) */
html[data-theme="parlour"] .btn--ghost {
  color: var(--text);
  background: var(--card-bg);
  border-color: rgba(62,42,30,.35);
  box-shadow: 0 1px 2px rgba(62,42,30,.12);
}
html[data-theme="parlour"] .btn--ghost:hover:not(:disabled) {
  color: var(--text);
  background: var(--card-bg);
  border-color: var(--accent-dim);
}

/* Secondary buttons (Join / Share): the base accent tint goes muddy over
   the wallpaper — layer it on the same solid paper base */
html[data-theme="parlour"] .btn--secondary {
  background: linear-gradient(rgba(var(--accent-rgb), .08), rgba(var(--accent-rgb), .08)) var(--card-bg);
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(62,42,30,.12);
}
html[data-theme="parlour"] .btn--secondary:hover:not(:disabled) {
  background: linear-gradient(rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .16)) var(--card-bg);
}

/* Setup pills (difficulty / points / speed) */
html[data-theme="parlour"] .radio-option {
  color: var(--text);
  background: var(--card-bg);
  border-color: rgba(62,42,30,.35);
  box-shadow: 0 1px 2px rgba(62,42,30,.12);
}
html[data-theme="parlour"] .radio-option:hover:not(:has(input:checked)) {
  border-color: var(--accent-dim);
}
html[data-theme="parlour"] .radio-option:has(input:checked) {
  background: linear-gradient(rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .12)) var(--card-bg);
  border-color: var(--accent);
  color: var(--accent);
}

/* Theme swatches in the home footer: same solid-paper treatment */
html[data-theme="parlour"] .theme-swatch {
  background: var(--card-bg);
  border-color: rgba(62,42,30,.3);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(62,42,30,.12);
}
html[data-theme="parlour"] .theme-swatch[aria-checked="true"] {
  background: linear-gradient(rgba(var(--accent-rgb), .1), rgba(var(--accent-rgb), .1)) var(--card-bg);
  border-color: var(--accent);
}

/* Light-surface fixes: hairlines that are white-on-white otherwise */
html[data-theme="parlour"] dialog[open],
html[data-theme="parlour"] .dialog-inner,
html[data-theme="parlour"] .bid-toast-inner {
  border-color: rgba(62,42,30,.22);
}

/* ── Theme picker (home screen) ──────────────────────────────────────────── */
.theme-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  flex-wrap: wrap;
}
.theme-picker-label {
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.theme-swatch {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .8rem .3rem .35rem;
  border-radius: 9999px;
  border: 1px solid rgba(var(--control-ink-rgb), .25);
  background: var(--control-bg);
  color: var(--control-ink);
  font-size: .75rem;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.theme-swatch:hover { border-color: var(--accent-dim); }
.theme-swatch[aria-checked="true"] {
  border-color: var(--accent);
  background: linear-gradient(rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .12)) var(--control-bg);
}
.theme-swatch-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(128,110,90,.45);
}
/* Swatch previews are fixed per theme — they must look the same no matter
   which theme is active. */
.theme-swatch-dot--default {
  background:
    radial-gradient(circle at 68% 32%, #93F005 0 34%, transparent 36%),
    radial-gradient(circle at 40% 60%, #11381A 0%, #030805 75%);
}
.theme-swatch-dot--parlour {
  background:
    radial-gradient(circle at 68% 32%, #9E3F38 0 34%, transparent 36%),
    radial-gradient(circle at 40% 60%, #F6EFDF 0%, #E5D8BE 75%);
}