/* ============================================================
     THEMES
  ============================================================ */
  .theme-16{
    --ink:#3a2a18; --muted:#7b5e44; --rail-bg:#f0e6d2; --focus:#a1693a; --bad:#b24b4b;
    --tip-ink:#ffffff; --tip-border: rgba(255,255,255,0.16); --tip-glow: rgba(161,105,58,0.32);
    --tip-bg1: rgba(56,34,18,0.96); --tip-bg2: rgba(36,22,12,0.96); --tip-arrow: rgba(36,22,12,0.96);
    --panel-sheen: rgba(161,105,58,0.20);
    --ink-rgb: 58,42,24; --muted-rgb: 123,94,68; --focus-rgb: 161,105,58;
    background: radial-gradient(120% 120% at 20% 0%, #b9a58d 0%, #a58f75 45%, #927960 100%);
  }

  /* Clue 16: retain the tan outer background, but use a lighter tan foreground. */
  .theme-16 .panel{
    background: #f7eddc;
  }

  .theme-16 .rail-card{
    background: rgba(255,250,240,0.72);
  }

  .theme-17{
    --ink:#1f2f3f; --muted:#4c6b86; --rail-bg:#d7ecff; --focus:#2d7dbf; --bad:#b24b4b;
    --tip-ink:#ffffff; --tip-border: rgba(255,255,255,0.16); --tip-glow: rgba(45,125,191,0.35);
    --tip-bg1: rgba(18,46,74,0.96); --tip-bg2: rgba(12,30,48,0.96); --tip-arrow: rgba(12,30,48,0.96);
    --panel-sheen: rgba(45,125,191,0.22);
    --ink-rgb: 31,47,63; --muted-rgb: 76,107,134; --focus-rgb: 45,125,191;
    background: radial-gradient(120% 120% at 20% 0%, #edf8ff 0%, #d9efff 45%, #c5e5fb 100%);
  }

  .theme-18{
    --ink:#1f1f1f; --muted:#666666; --rail-bg:#ffffff; --focus:#bc002d; --bad:#bc002d;
    --tip-ink:#ffffff; --tip-border: rgba(255,255,255,0.16); --tip-glow: rgba(188,0,45,0.28);
    --tip-bg1: rgba(82,0,20,0.96); --tip-bg2: rgba(48,0,12,0.96); --tip-arrow: rgba(48,0,12,0.96);
    --panel-sheen: rgba(0,0,0,0.02);
    --ink-rgb: 31,31,31; --muted-rgb: 102,102,102; --focus-rgb: 188,0,45;
    background: #ffffff;
  }

  /* Clue 18: clean white field with one Japanese-flag-inspired red sun. */
  .theme-18 .panel,
  .theme-18 .rail-card{
    background: #ffffff;
  }

  .theme-18 .rhs{
    background:
      radial-gradient(circle 72px at 50% 50%, #bc002d 0 98%, rgba(188,0,45,0) 100%),
      #ffffff;
  }

  .theme-18 .rhs .img-ph{
    background: transparent;
  }

  .theme-19{
    --ink:#1f2f3f; --muted:#4c6b86; --rail-bg:#d7ecff; --focus:#2d7dbf; --bad:#b24b4b;
    --tip-ink:#ffffff; --tip-border: rgba(255,255,255,0.16); --tip-glow: rgba(45,125,191,0.35);
    --tip-bg1: rgba(18,46,74,0.96); --tip-bg2: rgba(12,30,48,0.96); --tip-arrow: rgba(12,30,48,0.96);
    --panel-sheen: rgba(45,125,191,0.22);
    --ink-rgb: 31,47,63; --muted-rgb: 76,107,134; --focus-rgb: 45,125,191;
    background: radial-gradient(120% 120% at 20% 0%, #eaf6ff 0%, #cfeaff 45%, #b6dcff 100%);
  }

  .theme-20{
    --ink:#3a2a18; --muted:#7b5e44; --rail-bg:#efe3d2; --focus:#a1693a; --bad:#b24b4b;
    --tip-ink:#ffffff; --tip-border: rgba(255,255,255,0.16); --tip-glow: rgba(161,105,58,0.32);
    --tip-bg1: rgba(56,34,18,0.96); --tip-bg2: rgba(36,22,12,0.96); --tip-arrow: rgba(36,22,12,0.96);
    --panel-sheen: rgba(161,105,58,0.20);
    --ink-rgb: 58,42,24; --muted-rgb: 123,94,68; --focus-rgb: 161,105,58;
    background: radial-gradient(120% 120% at 20% 0%, #f6ede2 0%, #ead6c0 45%, #dbc3a5 100%);
  }

  .theme-21{
    --ink:#f0f0f0; --muted:#b9b9b9; --rail-bg: rgba(70,70,70,0.46); --focus:#a7a7a7; --bad:#ff6b6b;
    --tip-ink:#ffffff; --tip-border: rgba(255,255,255,0.16); --tip-glow: rgba(255,255,255,0.16);
    --tip-bg1: rgba(30,30,30,0.96); --tip-bg2: rgba(14,14,14,0.96); --tip-arrow: rgba(14,14,14,0.96);
    --panel-sheen: rgba(255,255,255,0.10);
    --ink-rgb: 240,240,240; --muted-rgb: 185,185,185; --focus-rgb: 167,167,167;
    --input-ink: rgba(0,0,0,0.88);
    background: radial-gradient(120% 120% at 20% 0%, #262626 0%, #1b1b1b 45%, #0f0f0f 100%);
  }

  .theme-22{
    --ink:#2a2a2a; --muted:#6b6b6b; --rail-bg:#f4f1ea; --focus:#8b7a67; --bad:#b24b4b;
    --tip-ink:#ffffff; --tip-border: rgba(255,255,255,0.16); --tip-glow: rgba(139,122,103,0.22);
    --tip-bg1: rgba(48,38,28,0.96); --tip-bg2: rgba(28,22,16,0.96); --tip-arrow: rgba(28,22,16,0.96);
    --panel-sheen: rgba(139,122,103,0.16);
    --ink-rgb: 42,42,42; --muted-rgb: 107,107,107; --focus-rgb: 139,122,103;
    background: radial-gradient(120% 120% at 20% 0%, #fbfaf7 0%, #f2efe9 45%, #e8e2d8 100%);
  }

  .theme-25{
    --ink:#263746; --muted:#607384; --rail-bg:#edf4f8; --focus:#527b96; --bad:#b24b4b;
    --tip-ink:#ffffff; --tip-border: rgba(255,255,255,0.16); --tip-glow: rgba(82,123,150,0.28);
    --tip-bg1: rgba(34,62,80,0.96); --tip-bg2: rgba(20,40,54,0.96); --tip-arrow: rgba(20,40,54,0.96);
    --panel-sheen: rgba(82,123,150,0.16);
    --ink-rgb: 38,55,70; --muted-rgb: 96,115,132; --focus-rgb: 82,123,150;
    background: radial-gradient(120% 120% at 20% 0%, #f7fbfd 0%, #e4f0f6 45%, #cfdee8 100%);
  }

  .theme-27{
    --ink:#173323; --muted:#4b6a57; --rail-bg:#d9eadf; --focus:#2f6b45; --bad:#b24b4b;
    --tip-ink:#ffffff; --tip-border: rgba(255,255,255,0.16); --tip-glow: rgba(47,107,69,0.32);
    --tip-bg1: rgba(18,48,30,0.96); --tip-bg2: rgba(10,30,18,0.96); --tip-arrow: rgba(10,30,18,0.96);
    --panel-sheen: rgba(47,107,69,0.18);
    --ink-rgb: 23,51,35; --muted-rgb: 75,106,87; --focus-rgb: 47,107,69;
    background: radial-gradient(120% 120% at 20% 0%, #eaf6ee 0%, #cfe8d8 45%, #b7d8c1 100%);
  }

  /* PURE WHITE + GREEN FLECKS */
  .theme-32{
    --ink:#1b1b1b; --muted:#5a5a5a; --rail-bg:#ffffff; --focus:#2b2b2b; --bad:#b24b4b;
    --tip-ink:#ffffff; --tip-border: rgba(255,255,255,0.16); --tip-glow: rgba(0,0,0,0.18);
    --tip-bg1: rgba(28,28,28,0.96); --tip-bg2: rgba(10,10,10,0.96); --tip-arrow: rgba(10,10,10,0.96);
    --panel-sheen: rgba(0,0,0,0.06);
    --ink-rgb: 27,27,27; --muted-rgb: 90,90,90; --focus-rgb: 43,43,43;

    background:
      radial-gradient(1px 1px at 12% 18%, rgba(36,120,72,0.18) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 22% 62%, rgba(36,120,72,0.16) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 38% 35%, rgba(36,120,72,0.14) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 46% 78%, rgba(36,120,72,0.16) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 64% 22%, rgba(36,120,72,0.14) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 78% 66%, rgba(36,120,72,0.13) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 88% 34%, rgba(36,120,72,0.12) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(120% 120% at 50% 50%, rgba(60,160,95,0.05) 0%, rgba(0,0,0,0) 70%),
      #ffffff;
  }

  /* Add flecks to the actual panel backgrounds too (rail + rhs) */
  .theme-32 .panel{
    background:
      radial-gradient(1px 1px at 14% 20%, rgba(36,120,72,0.14) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 28% 66%, rgba(36,120,72,0.12) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 42% 38%, rgba(36,120,72,0.10) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 62% 26%, rgba(36,120,72,0.11) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 78% 74%, rgba(36,120,72,0.10) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(120% 120% at 50% 50%, rgba(60,160,95,0.04) 0%, rgba(0,0,0,0) 70%),
      #ffffff;
  }

  .theme-32 .rail-card{
    background:
      radial-gradient(1px 1px at 16% 22%, rgba(36,120,72,0.10) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 34% 72%, rgba(36,120,72,0.08) 45%, rgba(0,0,0,0) 70%),
      radial-gradient(1px 1px at 62% 34%, rgba(36,120,72,0.08) 45%, rgba(0,0,0,0) 70%),
      rgba(255,255,255,0.56);
  }