/* ════════════════════════════════════════════════════════════════════════
   MAJLIS — Light ("cream") appearance
   ════════════════════════════════════════════════════════════════════════
   OPT-IN, ADDITIVE, AND FULLY REMOVABLE.

   Every rule in this file is scoped under `html[data-appearance="light"]`.
   With the attribute absent — the default — this stylesheet contributes
   nothing at all and the app renders exactly as it always has. To cut the
   feature entirely: delete this file, its two <link> tags, the boot snippet
   and the "المظهر" settings section in host.html / player.html.

   The palette is the project's original cream/burnt-orange scheme (see
   design-tokens.css @ 8580d42) re-applied on top of today's navy design.
   Brand hues — the orange primary and the six per-mode colors — are
   unchanged; only surfaces, ink and glass flip.
   ──────────────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════════
   1 — TOKENS
   Re-binds the color half of design-tokens.css. Type, spacing, radius,
   shadow geometry and motion are deliberately untouched.
   ════════════════════════════════════════════════════════════════════════ */
html[data-appearance="light"] {
  /* ── Surfaces ────────────────────────────────────────────────────────
     Flat, solid, no washes — sampled straight off the original cream
     screenshots in attached_assets/ (#F9F8F4 page, white cards). */
  --color-bg: #faf8f5; /* cream page background */
  --color-card: #ffffff; /* raised surface        */
  --color-surface-2: #f4efe8; /* recessed input / chip */
  --color-overlay-dim: rgba(20, 12, 5, 0.72);

  /* ── Ink / text ──────────────────────────────────────────────────────── */
  --color-text: #2d2d34;
  --color-text-soft: #5c5762;
  --color-muted: #8a8590;

  /* ── Functional / UI hardware ────────────────────────────────────────── */
  --color-toggle-off: #cfc6bc;
  --color-knob: #ffffff;
  --color-input-text: #241c16;
  --color-input-placeholder: rgba(36, 28, 22, 0.38);

  /* ── Decorative washes / hairlines ───────────────────────────────────── */
  --color-hero-glow-warm: rgba(229, 141, 0, 0.22);
  --color-hero-glow-deep: rgba(255, 176, 80, 0.28);
  --color-text-shadow-strong: rgba(60, 40, 20, 0.22);
  --color-text-shadow-soft: rgba(60, 40, 20, 0.14);
  --color-text-shadow-faint: rgba(60, 40, 20, 0.08);
  --color-overlay-faint: rgba(36, 28, 22, 0.045);
  --color-code-emboss: rgba(229, 141, 0, 0.16);
  --color-disabled-overlay: rgba(36, 28, 22, 0.18);
  --color-border-subtle: rgba(36, 28, 22, 0.1);
  --color-pill-border: rgba(36, 28, 22, 0.1);

  /* ── Shadows — warm and soft rather than black and heavy ─────────────── */
  --shadow-sm: 0 2px 6px rgba(120, 92, 60, 0.1);
  --shadow: 0 8px 24px rgba(120, 92, 60, 0.16);
  --shadow-lg: 0 16px 44px rgba(120, 92, 60, 0.22);
  --shadow-primary:
    0 4px 0 #b36e00, 0 6px 22px rgba(229, 141, 0, 0.35);
  --shadow-soft-card: 0 2px 10px rgba(120, 92, 60, 0.12);
  --shadow-floating-btn: 0 4px 14px rgba(120, 92, 60, 0.2);
  --shadow-rank-icon: 0 4px 12px rgba(120, 92, 60, 0.18);
  --shadow-vs-badge: 0 4px 24px rgba(120, 92, 60, 0.24);

  /* ── Overlay chrome ──────────────────────────────────────────────────── */
  --color-overlay-pause-soft: rgba(250, 248, 245, 0.86);
  --color-overlay-pause-deep: rgba(250, 248, 245, 0.94);
  --color-overlay-pause-mobile: rgba(250, 248, 245, 0.94);
  --color-overlay-rotate: rgba(250, 248, 245, 0.97);
  --color-overlay-glass: rgba(255, 255, 255, 0.86);
  --color-overlay-glass-border: rgba(36, 28, 22, 0.1);
  --color-overlay-tie-glass: rgba(255, 255, 255, 0.6);
  --color-overlay-input: rgba(36, 28, 22, 0.05);
  --color-overlay-on-dark-soft: rgba(36, 28, 22, 0.06);
  --color-overlay-on-dark-mid: rgba(36, 28, 22, 0.2);
  --color-overlay-on-dark-strong: rgba(36, 28, 22, 0.9);
  --color-overlay-on-dark-text: rgba(36, 28, 22, 0.72);
  --color-overlay-on-dark-text-faint: rgba(36, 28, 22, 0.55);

  /* ── In-game polish ──────────────────────────────────────────────────── */
  --color-winner-soft: rgba(255, 190, 60, 0.16);
  --color-winner-warm: rgba(255, 190, 60, 0.1);
  --color-winner-grad-1: rgba(255, 205, 90, 0.28);
  --color-winner-grad-2: rgba(255, 183, 50, 0.16);
  --color-spotlight-prompt-bg: rgba(36, 28, 22, 0.04);
  --color-progress-track: rgba(36, 28, 22, 0.12);
  --color-result-faker-bg: rgba(139, 26, 26, 0.1);
  --color-result-accused-bg: rgba(255, 107, 107, 0.12);
  --color-info-warn-bg: rgba(255, 107, 107, 0.12);

  /* Duel placeholder — warm peach shimmer instead of navy. */
  --color-placeholder-peach-1: #ffeacf;
  --color-placeholder-peach-2: #ffe2bb;
  --color-placeholder-ink: rgba(43, 24, 16, 0.32);

  /* Podium metals — the silver/neutral ramps were tuned for navy. */
  --color-podium-silver-1: #d8d8d8;
  --color-podium-silver-2: #a8a8a8;
  --color-podium-neutral-1: #c0b8d8;
  --color-podium-neutral-2: #9490b8;
  --color-podium-silver-depth: #6b6b6b;
  --color-podium-neutral-depth: #5f5a80;

  /* خلاط word bank — paper pills. */
  --color-word-pill-bg: #ffffff;
  --color-word-pill-text: #241c16;
  --color-word-pill-border: rgba(36, 28, 22, 0.12);
  --shadow-word-pill: 0 2px 5px rgba(120, 92, 60, 0.14);
  --shadow-word-pill-active: 0 1px 2px rgba(120, 92, 60, 0.12);
  --color-answer-area-bg: rgba(255, 255, 255, 0.75);
  --color-answer-area-border: rgba(229, 141, 0, 0.4);
  --color-answer-word-text: #241c16;
  --color-answer-word-underline: rgba(36, 28, 22, 0.25);
  --color-answer-word-active-bg: rgba(229, 141, 0, 0.15);

  /* Faker cinematic glows — black glows read as smudges on cream. */
  --shadow-faker-glow-soft: rgba(139, 26, 26, 0.22);
  --shadow-faker-glow-faint: rgba(139, 26, 26, 0.12);
  --shadow-faker-glow-mid: rgba(139, 26, 26, 0.35);
  --shadow-faker-glow-deep: rgba(139, 26, 26, 0.18);
  --shadow-duel-side-mobile: rgba(120, 92, 60, 0.3);

  /* Legacy aliases re-point automatically (they var() off the above), but
     --input-bg / --text / --muted are re-declared for clarity. */
  --bg: var(--color-bg);
  --card: var(--color-card);
  --input-bg: var(--color-surface-2);
  --text: var(--color-text);
  --muted: var(--color-muted);
}

/* ── Per-mode themes ───────────────────────────────────────────────────────
   design-tokens.css scopes these to `body[data-theme="…"]`, so the light
   overrides need the html prefix to out-specify them. Each mode keeps the
   hue it has today; only the plate behind it is lifted to a flat solid tint
   of that hue — the way the original cream build did it (faker #F0E8DF and
   the mint #EEF9F5 below are the exact values sampled from the old
   screenshots). No gradients: one solid color per mode. */
html[data-appearance="light"] body[data-theme="answers"] {
  --color-bg: #f4effe;
  --color-card: #ffffff;
  --color-surface-2: #e7defc;
  --color-primary-soft: #dcccfa;
  --shadow: 0 8px 24px rgba(124, 58, 237, 0.16);
  --shadow-lg: 0 14px 36px rgba(124, 58, 237, 0.24);
  --bg: var(--color-bg);
  --card: var(--color-card);
  --input-bg: var(--color-surface-2);
}
html[data-appearance="light"] body[data-theme="faker"] {
  --color-bg: #f0e8df;
  --color-card: #fff6ee;
  --color-surface-2: #e8ddd4;
  --color-primary-soft: #f2d9c8;
  --shadow: 0 8px 24px rgba(139, 26, 26, 0.16);
  --shadow-lg: 0 14px 36px rgba(139, 26, 26, 0.24);
  --bg: var(--color-bg);
  --card: var(--color-card);
  --input-bg: var(--color-surface-2);
}
html[data-appearance="light"] body[data-theme="khallat"] {
  --color-bg: #edf4fc;
  --color-card: #ffffff;
  --color-surface-2: #dbe8f7;
  --color-primary-soft: #cadff5;
  --shadow: 0 8px 24px rgba(21, 101, 192, 0.16);
  --shadow-lg: 0 14px 36px rgba(21, 101, 192, 0.24);
  --bg: var(--color-bg);
  --card: var(--color-card);
  --input-bg: var(--color-surface-2);
}
html[data-appearance="light"] body[data-theme="percent"] {
  --color-bg: #faf8f5;
  --color-card: #ffffff;
  --color-surface-2: #f4efe8;
  --color-primary-soft: #ffefe0;
  --shadow: 0 8px 24px rgba(210, 190, 170, 0.4);
  --shadow-lg: 0 14px 36px rgba(210, 190, 170, 0.55);
  --bg: var(--color-bg);
  --card: var(--color-card);
  --input-bg: var(--color-surface-2);
}
html[data-appearance="light"] body[data-theme="mahkama"] {
  --color-bg: #eef9f5;
  --color-card: #ffffff;
  --color-surface-2: #dff5ee;
  --color-primary: #0f9e8c;
  --color-primary-dark: #0b7a6c;
  --color-primary-soft: #c8efe2;
  --color-text: #14322c;
  --color-text-muted: #6f9a92;
  --shadow: 0 8px 24px rgba(15, 158, 140, 0.16);
  --shadow-lg: 0 14px 36px rgba(15, 158, 140, 0.24);
  --shadow-primary: 0 4px 0 #0b7a6c, 0 6px 22px rgba(15, 158, 140, 0.32);
  --bg: var(--color-bg);
  --card: var(--color-card);
  --input-bg: var(--color-surface-2);
  --primary: var(--color-primary);
  --primary-dark: var(--color-primary-dark);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
}
html[data-appearance="light"] body[data-theme="khedaa"] {
  --color-bg: #fbf6e9;
  --color-card: #fffdf6;
  --color-surface-2: #f3e9cf;
  --color-primary: #b58a1e;
  --color-primary-dark: #8c6a14;
  --color-primary-soft: #f0e2b8;
  --color-text: #33280d;
  --color-text-muted: #9a9070;
  --shadow: 0 8px 24px rgba(181, 138, 30, 0.16);
  --shadow-lg: 0 14px 36px rgba(181, 138, 30, 0.24);
  --shadow-primary: 0 4px 0 #8c6a14, 0 6px 22px rgba(181, 138, 30, 0.32);
  --bg: var(--color-bg);
  --card: var(--color-card);
  --input-bg: var(--color-surface-2);
  --primary: var(--color-primary);
  --primary-dark: var(--color-primary-dark);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
}

/* ════════════════════════════════════════════════════════════════════════
   2 — BASE SHELL (host + player)
   The page backgrounds are dark-navy artwork sitting under blurred blue
   glow blobs. Light mode drops both and paints one flat cream fill — the
   original build had no washes, just a solid page. No bitmaps are tinted,
   so no new binary assets are introduced and nothing can 404.
   ════════════════════════════════════════════════════════════════════════ */
html[data-appearance="light"],
html[data-appearance="light"] body {
  background-color: var(--color-bg);
  background-image: none;
  color: var(--color-text);
}

/* Ambient blue glow blobs — every one of them. They are ~rgba(0,93,161,.5)
   circles under a 120–160px blur, and they are what makes an otherwise-cream
   page read as blue, so light mode removes them outright rather than
   recoloring. Three sources, all of them here:
     .mm-glow                     — main menu (real elements)
     body.select-phase::before/after — game picker
     .join-wrap::before/after     — player join screen
     .lobby-info-panel::before    — teal wash on the lobby's right panel
   If another ambient glow is ever added, grep for `blur(1` and for large
   `radial-gradient` washes to find it. */
html[data-appearance="light"] .mm-glow,
html[data-appearance="light"] body.select-phase::before,
html[data-appearance="light"] body.select-phase::after,
html[data-appearance="light"] .join-wrap::before,
html[data-appearance="light"] .join-wrap::after,
html[data-appearance="light"] .lobby-info-panel::before {
  display: none;
  content: none;
}

html[data-appearance="light"] ::-webkit-scrollbar {
  background: var(--color-bg);
}
html[data-appearance="light"] ::-webkit-scrollbar-thumb {
  background: rgba(36, 28, 22, 0.2);
}
html[data-appearance="light"] ::selection {
  background: rgba(229, 141, 0, 0.28);
  color: #241c16;
}

/* Boot loader (both surfaces) */
html[data-appearance="light"] #boot-loader {
  background: var(--color-bg);
}
html[data-appearance="light"] .boot-loader-track {
  background: rgba(36, 28, 22, 0.12);
}
html[data-appearance="light"] .boot-loader-pct {
  color: rgba(36, 28, 22, 0.6);
}

/* ════════════════════════════════════════════════════════════════════════
   3 — HOST: shared chrome
   ════════════════════════════════════════════════════════════════════════ */
html[data-appearance="light"] h1.title,
html[data-appearance="light"] .label,
html[data-appearance="light"] .mission-classified-badge,
html[data-appearance="light"] .mission-tagline,
html[data-appearance="light"] .faker-vote-question,
html[data-appearance="light"] .contrib-name,
html[data-appearance="light"] .word-chip,
html[data-appearance="light"] .rules-title,
html[data-appearance="light"] .rules-step-num,
html[data-appearance="light"] .lobby-bubble-name,
html[data-appearance="light"] .pack-section-title {
  color: var(--color-text);
}
html[data-appearance="light"] .small-label,
html[data-appearance="light"] .url-hint,
html[data-appearance="light"] .lobby-wait-label {
  color: rgba(36, 28, 22, 0.45);
}
html[data-appearance="light"] .mission-warn,
html[data-appearance="light"] .avatar-grid-name,
html[data-appearance="light"] .faker-vote-eyebrow,
html[data-appearance="light"] .prompt-reveal-line,
html[data-appearance="light"] .rules-step-text {
  color: rgba(36, 28, 22, 0.78);
}
html[data-appearance="light"] .result-card .result-avatar,
html[data-appearance="light"] .tie-avatar {
  border-color: rgba(36, 28, 22, 0.14);
}
html[data-appearance="light"] .vote-bar-wrap {
  background: rgba(36, 28, 22, 0.1);
}
html[data-appearance="light"] .lobby-chip,
html[data-appearance="light"] .player-chip {
  background: #ffffff;
  border-color: rgba(36, 28, 22, 0.1);
  color: var(--color-text);
}
html[data-appearance="light"] .rules-card {
  background: #ffffff;
  border-color: rgba(36, 28, 22, 0.1);
}
html[data-appearance="light"] .rules-back-btn {
  background: rgba(36, 28, 22, 0.06);
  border-color: rgba(36, 28, 22, 0.12);
  color: rgba(36, 28, 22, 0.75);
}
html[data-appearance="light"] .rules-back-btn:hover {
  background: rgba(36, 28, 22, 0.12);
}
html[data-appearance="light"] .contrib-avatar {
  background: rgba(36, 28, 22, 0.06);
}
html[data-appearance="light"] .contrib-pts {
  background: rgba(36, 28, 22, 0.08);
}
html[data-appearance="light"] .contrib-card {
  box-shadow:
    0 0 18px rgba(120, 92, 60, 0.18),
    0 0 28px var(--cc-glow, rgba(120, 92, 60, 0.12));
}
html[data-appearance="light"] .word-chip-neutral {
  background: rgba(36, 28, 22, 0.08) !important;
  border-color: rgba(36, 28, 22, 0.16) !important;
  color: rgba(36, 28, 22, 0.55) !important;
}
html[data-appearance="light"] #back-btn {
  background: rgba(36, 28, 22, 0.08);
  border-color: rgba(36, 28, 22, 0.14);
  color: var(--color-text);
}
html[data-appearance="light"] #back-btn:hover {
  background: rgba(36, 28, 22, 0.16);
}
html[data-appearance="light"] #room-code-pill {
  background: #ffffff;
  border-color: rgba(36, 28, 22, 0.12);
}
html[data-appearance="light"] #room-code-pill .rcp-label {
  color: rgba(36, 28, 22, 0.45);
}
/* host.html's blanket `button { color: #ffffff }` leaves the gear white-on-white
   once --card becomes paper. */
html[data-appearance="light"] #gear-btn {
  color: var(--color-text);
  box-shadow: 0 6px 18px rgba(120, 92, 60, 0.2);
}

/* ── SELECT phase ─────────────────────────────────────────────────────────
   The dark bitmap backdrop is replaced with the cream wash; the game-pick
   cards become paper tiles. */
html[data-appearance="light"] body.select-phase {
  background-color: var(--color-bg);
  background-image: none;
  color: var(--color-text);
  --bg: #faf8f5;
  --card: #ffffff;
  --color-bg: #faf8f5;
  --color-overlay-glass: rgba(255, 255, 255, 0.8);
  --color-overlay-glass-border: rgba(36, 28, 22, 0.1);
  --muted: #8a8590;
  --primary: #2d2d34;
  --text: #2d2d34;
}
html[data-appearance="light"] body.select-phase .url-hint {
  color: rgba(36, 28, 22, 0.45);
}
html[data-appearance="light"] body.select-phase #fullscreen-btn {
  background: rgba(36, 28, 22, 0.08);
  color: var(--color-text);
}
html[data-appearance="light"] .pack-section + .pack-section {
  border-top-color: rgba(36, 28, 22, 0.14);
}
html[data-appearance="light"] .btn-game-pick {
  background: #ffffff;
  border-color: rgba(36, 28, 22, 0.1);
  color: var(--color-text);
}
html[data-appearance="light"] .btn-game-pick:hover {
  background: #ffffff;
  color: var(--color-text);
}
html[data-appearance="light"] .btn-game-pick .sub {
  color: rgba(36, 28, 22, 0.5);
}
/* Cream re-cuts of the near-black Figma artwork. The pack headers are white
   copy on transparent, so on cream they would vanish entirely; the mode cards
   would read as black slabs. Both are regenerated by
   scripts/make-light-assets.ps1 into /assets/light/. */
html[data-appearance="light"]
  body.select-phase
  [data-pack-series="1"]
  .pack-section-title {
  background-image: url("/assets/light/select-pack1-header.png");
}
html[data-appearance="light"]
  body.select-phase
  [data-pack-series="2"]
  .pack-section-title {
  background-image: url("/assets/light/select-pack2-header.png");
}
html[data-appearance="light"] body.select-phase .btn-game-pick.khallat::before {
  background-image: url("/assets/light/card-khallat.png");
}
html[data-appearance="light"] body.select-phase .btn-game-pick.faker::before {
  background-image: url("/assets/light/card-faker.png");
}
html[data-appearance="light"] body.select-phase .btn-game-pick.shathaat::before {
  background-image: url("/assets/light/card-shathaat.png");
}
html[data-appearance="light"] body.select-phase .btn-game-pick.nesba::before {
  background-image: url("/assets/light/card-nesba.png");
}
html[data-appearance="light"] body.select-phase .btn-game-pick.khedaa::before {
  background-image: url("/assets/light/card-khedaa.png");
}
html[data-appearance="light"] body.select-phase .btn-game-pick.mahkama::before {
  background-image: url("/assets/light/card-mahkama.png");
}

/* ── LOBBY phase ───────────────────────────────────────────────────────── */
html[data-appearance="light"] body.lobby-phase {
  background-color: var(--color-bg);
}
html[data-appearance="light"] body.lobby-phase .lobby-layout {
  background: var(--color-bg);
}
html[data-appearance="light"] .lobby-bubble-dot {
  border-color: var(--color-bg);
}
/* Intentionally faint placeholder. Dark ink needs more alpha than white ink to
   read as equally recessive on paper. */
html[data-appearance="light"] .lobby-empty-scatter {
  color: rgba(36, 28, 22, 0.3);
}
html[data-appearance="light"] .btn-lobby-start-new:disabled {
  background: rgba(36, 28, 22, 0.08);
  color: rgba(36, 28, 22, 0.42);
  border-color: rgba(36, 28, 22, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
html[data-appearance="light"] .lobby-qr-card {
  box-shadow:
    0 6px 26px rgba(120, 92, 60, 0.22),
    0 0 0 1px rgba(36, 28, 22, 0.08);
}
html[data-appearance="light"] .lobby-room-code,
html[data-appearance="light"] .lobby-player-count {
  color: var(--color-text);
}
html[data-appearance="light"] .lobby-join-url {
  background: #ffffff;
  border-color: rgba(36, 28, 22, 0.12);
  color: rgba(36, 28, 22, 0.72);
}
html[data-appearance="light"] .lobby-join-url .lju-copy-btn {
  background: rgba(36, 28, 22, 0.1);
  color: rgba(36, 28, 22, 0.75);
}
html[data-appearance="light"] .lobby-join-url .lju-copy-btn:hover {
  background: rgba(36, 28, 22, 0.2);
  color: var(--color-text);
}
html[data-appearance="light"] .lobby-player-count .lpc-dot {
  border-color: var(--color-bg);
}
html[data-appearance="light"] .lobby-player-count .lpc-total {
  color: rgba(36, 28, 22, 0.45);
}
html[data-appearance="light"] .lobby-ctrl-settings-btn {
  color: rgba(36, 28, 22, 0.85);
}

/* ── LEADERBOARD phase ─────────────────────────────────────────────────────
   Podium, medals and rank pills are colored artwork and stay as-is; only
   the navy plate behind them and the white page title need flipping. */
html[data-appearance="light"] body.leaderboard-phase {
  background-color: var(--color-bg);
  background-image: none;
}
html[data-appearance="light"] .lb-results-title {
  color: var(--color-text);
  text-shadow: 1.22px 2.44px 0 rgba(255, 255, 255, 0.9);
}

/* ── MAIN MENU ─────────────────────────────────────────────────────────────
   The cartoon buttons (orange / teal / maroon with a dark outline and 3D
   drop) are colored objects that read correctly on cream, so they are left
   untouched. Only the plate behind them changes. */
html[data-appearance="light"] #main-menu {
  background-color: var(--color-bg);
  background-image: none;
}
html[data-appearance="light"] .btn-mm-exit {
  background: rgba(36, 28, 22, 0.08);
  color: rgba(36, 28, 22, 0.7);
}
html[data-appearance="light"] .btn-mm-exit:hover {
  background: rgba(36, 28, 22, 0.16);
  color: var(--color-text);
}

/* ════════════════════════════════════════════════════════════════════════
   4 — HOST: full-screen overlays (Settings · Store · Questions · History)
   host.html paints these navy with blue glow blobs and white glass. Light
   mode swaps the plate for cream and inverts the glass to ink-on-paper.
   ════════════════════════════════════════════════════════════════════════ */
html[data-appearance="light"] #settings-overlay,
html[data-appearance="light"] #store-overlay,
html[data-appearance="light"] #custom-overlay,
html[data-appearance="light"] #cqhub-overlay,
html[data-appearance="light"] #history-overlay,
html[data-appearance="light"] #admin-overlay {
  background: #faf8f5;
  color: #2d2d34;
  --bg: #faf8f5;
  --card: #ffffff;
  --color-card: #ffffff;
  --color-bg: #faf8f5;
  --text: #2d2d34;
  --color-text: #2d2d34;
  --color-text-soft: #5c5762;
  --muted: #8a8590;
  --color-muted: #8a8590;
  --color-surface-2: rgba(36, 28, 22, 0.06);
  --color-border-subtle: rgba(36, 28, 22, 0.1);
  --color-overlay-glass: rgba(255, 255, 255, 0.85);
  --color-overlay-glass-border: rgba(36, 28, 22, 0.1);
  --color-toggle-off: #cfc6bc;
  --color-knob: #ffffff;
  --shadow: 0 2px 18px rgba(120, 92, 60, 0.16);
  --shadow-sm: 0 1px 6px rgba(120, 92, 60, 0.12);
  --shadow-lg: 0 8px 36px rgba(120, 92, 60, 0.22);
}

html[data-appearance="light"] #settings-overlay .btn-back,
html[data-appearance="light"] #store-overlay .btn-back,
html[data-appearance="light"] #cqhub-overlay .btn-back,
html[data-appearance="light"] #history-overlay .btn-back,
html[data-appearance="light"] #admin-overlay .btn-back {
  background: #ffffff;
  color: #241c16;
  border-color: rgba(36, 28, 22, 0.12);
}
html[data-appearance="light"] #settings-overlay .btn-back:hover,
html[data-appearance="light"] #store-overlay .btn-back:hover,
html[data-appearance="light"] #cqhub-overlay .btn-back:hover,
html[data-appearance="light"] #history-overlay .btn-back:hover,
html[data-appearance="light"] #admin-overlay .btn-back:hover {
  background: #ffffff;
}
html[data-appearance="light"] #settings-overlay .settings-section-title,
html[data-appearance="light"] #store-overlay .settings-section-title,
html[data-appearance="light"] #cqhub-overlay .settings-section-title {
  color: rgba(36, 28, 22, 0.45);
}

/* Paper cards — one shared look for every panelled row in the overlays. */
html[data-appearance="light"] #settings-overlay .toggle-row,
html[data-appearance="light"] #settings-overlay .vol-row,
html[data-appearance="light"] #settings-overlay .timer-pill,
html[data-appearance="light"] #settings-overlay .btn-fullscreen,
html[data-appearance="light"] #settings-overlay .how-to-card,
html[data-appearance="light"] #store-overlay .store-banner,
html[data-appearance="light"] #store-overlay .pack-card,
html[data-appearance="light"] #store-overlay .store-balance,
html[data-appearance="light"] #history-overlay .history-row,
html[data-appearance="light"] #cqhub-overlay .cqhub-card,
html[data-appearance="light"] #cqhub-overlay .cqhub-editor-head,
html[data-appearance="light"] #cqhub-overlay .cqhub-locked,
html[data-appearance="light"] #cqhub-overlay .cqhub-composer,
html[data-appearance="light"] #cqhub-overlay .cqhub-row,
html[data-appearance="light"] .cqhub-share-row,
html[data-appearance="light"] .cqhub-freegame.is-done {
  background: #ffffff;
  border-color: rgba(36, 28, 22, 0.1);
  box-shadow: 0 1px 4px rgba(120, 92, 60, 0.08);
}
html[data-appearance="light"] #settings-overlay .btn-fullscreen,
html[data-appearance="light"] #settings-overlay .timer-pill {
  color: rgba(36, 28, 22, 0.82);
}
html[data-appearance="light"] #settings-overlay .btn-fullscreen:hover,
html[data-appearance="light"] #settings-overlay .timer-pill:hover:not(.selected),
html[data-appearance="light"] #cqhub-overlay .cqhub-card:hover {
  background: #ffffff;
  border-color: rgba(36, 28, 22, 0.18);
}
html[data-appearance="light"] #settings-overlay .toggle-track {
  border-color: rgba(36, 28, 22, 0.16);
  background: rgba(36, 28, 22, 0.14);
}
/* The rule above out-specifies host.html's `#settings-overlay .toggle-track.on`,
   so the ON state has to be restated here or every switch reads as OFF. */
html[data-appearance="light"] #settings-overlay .toggle-track.on {
  background: #0f8a6e;
  border-color: #0f8a6e;
}
html[data-appearance="light"] #settings-overlay input[type="range"] {
  background: rgba(36, 28, 22, 0.12);
}
html[data-appearance="light"] #settings-overlay .vol-slider::-webkit-slider-thumb,
html[data-appearance="light"] #settings-overlay .vol-slider::-moz-range-thumb {
  border-color: #faf8f5;
  box-shadow: 0 1px 6px rgba(120, 92, 60, 0.28);
}
html[data-appearance="light"] #store-overlay .pack-card .pc-qcount {
  background: rgba(36, 28, 22, 0.07);
  color: rgba(36, 28, 22, 0.65);
}
html[data-appearance="light"] #store-overlay .store-balance {
  color: #241c16;
}
html[data-appearance="light"] #store-overlay .store-note {
  color: rgba(36, 28, 22, 0.65);
}
html[data-appearance="light"] #store-overlay .store-note strong {
  color: #241c16;
}
html[data-appearance="light"] #cqhub-overlay .cqhub-card-icon {
  background: rgba(36, 28, 22, 0.07);
}
html[data-appearance="light"] #cqhub-overlay .cqhub-card-status {
  background: rgba(36, 28, 22, 0.07);
  color: rgba(36, 28, 22, 0.55);
}
html[data-appearance="light"] #cqhub-overlay .cqhub-card-cta.is-secondary {
  color: #241c16;
}
html[data-appearance="light"] #cqhub-overlay .cqhub-locked-cta,
html[data-appearance="light"] #cqhub-overlay .cqhub-add-btn {
  color: #ffffff;
}
html[data-appearance="light"] #cqhub-overlay .cqhub-comp-tab {
  color: rgba(36, 28, 22, 0.45);
}
html[data-appearance="light"] #cqhub-overlay .cqhub-comp-tab.is-on {
  background: rgba(36, 28, 22, 0.08);
}
html[data-appearance="light"] #cqhub-overlay .cqhub-input-wrap textarea,
html[data-appearance="light"] #cqhub-overlay #cqhub-bulk textarea {
  background: #ffffff;
  border-color: rgba(36, 28, 22, 0.14);
  color: #241c16;
}
html[data-appearance="light"] #cqhub-overlay .cqhub-input-wrap textarea::placeholder,
html[data-appearance="light"] #cqhub-overlay #cqhub-bulk textarea::placeholder {
  color: rgba(36, 28, 22, 0.35);
}
html[data-appearance="light"] #cqhub-overlay .cqhub-percent-wrap {
  border-color: rgba(36, 28, 22, 0.1);
}
html[data-appearance="light"] #cqhub-overlay .cqhub-percent-row input[type="number"] {
  background: #ffffff;
  border-color: rgba(36, 28, 22, 0.14);
  color: #241c16;
}
html[data-appearance="light"] #cqhub-overlay .cqhub-row .cqhub-row-text-edit {
  color: #241c16;
}
html[data-appearance="light"] #cqhub-overlay .cqhub-beta {
  color: rgba(36, 28, 22, 0.8);
}
html[data-appearance="light"] .cqhub-freegame .cqfg-bar {
  background: rgba(36, 28, 22, 0.12);
}
html[data-appearance="light"] .cqhub-share-label {
  color: #241c16;
}
html[data-appearance="light"] .cqhub-share-hint,
html[data-appearance="light"] .cqhub-submit-intro {
  color: rgba(36, 28, 22, 0.62);
}
html[data-appearance="light"] .cqhub-submit-flabel {
  color: rgba(36, 28, 22, 0.82);
}
html[data-appearance="light"] .cqhub-suggest-btn {
  background: #ffffff;
  color: #241c16;
  border-color: rgba(36, 28, 22, 0.28);
}
html[data-appearance="light"] .cqhub-suggest-btn:hover {
  background: #ffffff;
  border-color: rgba(36, 28, 22, 0.45);
}
html[data-appearance="light"] .cqhub-game-chip,
html[data-appearance="light"] .cqhub-submit-answer {
  background: #ffffff;
  color: #241c16;
  border-color: rgba(36, 28, 22, 0.14);
}
html[data-appearance="light"] .cqhub-game-chip:hover {
  border-color: rgba(36, 28, 22, 0.4);
}

/* ════════════════════════════════════════════════════════════════════════
   5 — PLAYER (phone)
   ════════════════════════════════════════════════════════════════════════ */
html[data-appearance="light"] .player-header {
  border-bottom-color: rgba(36, 28, 22, 0.1);
}
html[data-appearance="light"] .header-mode-mark,
html[data-appearance="light"] h1,
html[data-appearance="light"] .game-name,
html[data-appearance="light"] .wait-title,
html[data-appearance="light"] .wait-me-name,
html[data-appearance="light"] .lap-title,
html[data-appearance="light"] .prules-title,
html[data-appearance="light"] .prules-step-num,
html[data-appearance="light"] .gp-bar-name,
html[data-appearance="light"] .join-sheet-title {
  color: var(--color-text);
}
html[data-appearance="light"] h2,
html[data-appearance="light"] .game-tagline,
html[data-appearance="light"] .waiting-sub,
html[data-appearance="light"] .wait-sub,
html[data-appearance="light"] .gp-bar-sub,
html[data-appearance="light"] .join-sheet-sub,
html[data-appearance="light"] .join-confirm-badge .jcb-label {
  color: rgba(36, 28, 22, 0.55);
}
html[data-appearance="light"] .waiting-card,
html[data-appearance="light"] .wait-sheet,
html[data-appearance="light"] .join-sheet,
html[data-appearance="light"] .prules-card {
  background: #ffffff;
  border-color: rgba(36, 28, 22, 0.1);
}
html[data-appearance="light"] .wait-me-row,
html[data-appearance="light"] .wait-count,
html[data-appearance="light"] .prules-wait {
  background: #ffffff;
  border-color: rgba(36, 28, 22, 0.1);
  color: rgba(36, 28, 22, 0.72);
}
html[data-appearance="light"] .prules-step-text {
  color: rgba(36, 28, 22, 0.85);
}
html[data-appearance="light"] .wait-rename-cancel {
  background: rgba(36, 28, 22, 0.07) !important;
  color: rgba(36, 28, 22, 0.65) !important;
}
html[data-appearance="light"] .btn-leave-room {
  border-color: rgba(36, 28, 22, 0.14);
  color: rgba(36, 28, 22, 0.42);
}
html[data-appearance="light"] .btn-leave-room:hover {
  color: rgba(36, 28, 22, 0.72);
  border-color: rgba(36, 28, 22, 0.28);
  background: rgba(36, 28, 22, 0.05);
}
html[data-appearance="light"] .rxn-toggle,
html[data-appearance="light"] .rxn-emoji {
  background: #ffffff;
  border-color: rgba(36, 28, 22, 0.12);
  color: #241c16;
  box-shadow: 0 6px 18px rgba(120, 92, 60, 0.22);
}

/* ── Player inputs / buttons / cards ───────────────────────────────────── */
html[data-appearance="light"] input,
html[data-appearance="light"] textarea,
html[data-appearance="light"] .join-input {
  background: #ffffff;
  color: #241c16;
  border-color: rgba(36, 28, 22, 0.14);
}
html[data-appearance="light"] input::placeholder,
html[data-appearance="light"] textarea::placeholder,
html[data-appearance="light"] .join-input::placeholder {
  color: rgba(36, 28, 22, 0.34);
}
html[data-appearance="light"] input:focus,
html[data-appearance="light"] textarea:focus,
html[data-appearance="light"] .join-input:focus {
  background: #ffffff;
}
html[data-appearance="light"] .btn-secondary {
  border-color: rgba(36, 28, 22, 0.14);
}
html[data-appearance="light"] .btn-vote,
html[data-appearance="light"] .btn-vote-avatar,
html[data-appearance="light"] .question-card {
  background: #ffffff;
  color: #241c16;
  border-color: rgba(36, 28, 22, 0.12);
}
html[data-appearance="light"] .btn-vote:not(:disabled):hover {
  background: #ffffff;
}
html[data-appearance="light"] .prompt-card {
  background: #ffffff;
  color: rgba(36, 28, 22, 0.82);
  border-color: rgba(36, 28, 22, 0.1);
}
html[data-appearance="light"] .bva-avatar {
  border-color: rgba(36, 28, 22, 0.14);
}
html[data-appearance="light"] .answer-timer.paused {
  background: rgba(36, 28, 22, 0.06);
  border-color: rgba(36, 28, 22, 0.14);
}
/* The faker "classified" card is intentionally a dark dossier — it reads as
   a deliberate object rather than chrome, so only its edge is softened. */
html[data-appearance="light"] .question-card.classified {
  box-shadow: 0 10px 30px rgba(120, 92, 60, 0.28);
}

/* ── Player join screen ────────────────────────────────────────────────── */
html[data-appearance="light"] .join-wrap {
  background-color: var(--color-bg);
  background-image: none;
}
html[data-appearance="light"] .join-confirm-badge .jcb-change {
  color: rgba(36, 28, 22, 0.7);
}
html[data-appearance="light"] .join-confirm-badge .jcb-change:active {
  background: rgba(36, 28, 22, 0.08);
}
html[data-appearance="light"] .join-label {
  color: rgba(36, 28, 22, 0.5);
}
html[data-appearance="light"] .join-input-code {
  color: #241c16;
}
html[data-appearance="light"] .join-input-code::placeholder {
  color: rgba(36, 28, 22, 0.25);
}
html[data-appearance="light"] .join-foot-hint {
  color: rgba(36, 28, 22, 0.45);
}
html[data-appearance="light"] .join-btn[disabled] {
  background: rgba(36, 28, 22, 0.12);
}
html[data-appearance="light"] .avatar-picker-col {
  background: #ffffff;
  border-color: rgba(36, 28, 22, 0.1);
}
html[data-appearance="light"] .avatar-col-title {
  color: rgba(36, 28, 22, 0.7);
}

/* ── Player settings bottom sheet ──────────────────────────────────────── */
html[data-appearance="light"] .player-settings {
  background: rgba(38, 26, 16, 0.35);
}
html[data-appearance="light"] .ps-card {
  background: #fffaf3;
  color: #241c16;
  border-top-color: rgba(36, 28, 22, 0.1);
}
html[data-appearance="light"] .ps-card::before {
  background: rgba(36, 28, 22, 0.18);
}
html[data-appearance="light"] .ps-title,
html[data-appearance="light"] .ps-label {
  color: #241c16;
}
html[data-appearance="light"] .ps-section {
  background: rgba(36, 28, 22, 0.04);
  border-color: rgba(36, 28, 22, 0.08);
}
html[data-appearance="light"] .ps-section-title {
  color: rgba(36, 28, 22, 0.42);
}
html[data-appearance="light"] .ps-row + .ps-row {
  border-top-color: rgba(36, 28, 22, 0.08);
}
html[data-appearance="light"] .ps-vol-pct {
  color: rgba(36, 28, 22, 0.55);
}
html[data-appearance="light"] .ps-cslider-track {
  background: rgba(36, 28, 22, 0.14);
}
html[data-appearance="light"] .ps-cslider-thumb {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(120, 92, 60, 0.35);
}
html[data-appearance="light"] .ps-mode-switch {
  color: rgba(36, 28, 22, 0.5);
  border-color: rgba(36, 28, 22, 0.12);
}
html[data-appearance="light"] .ps-mode-switch:hover {
  background: rgba(36, 28, 22, 0.06);
  color: rgba(36, 28, 22, 0.75);
}
html[data-appearance="light"] .ps-legal-links a {
  color: rgba(36, 28, 22, 0.6);
}
html[data-appearance="light"] .ps-legal-links a:active {
  color: #241c16;
}

/* ── Appearance switch (the control this feature adds) ─────────────────── */
.appearance-row .ap-hint {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-top: 2px;
}