/* ==========================================================================
   themes.css — game themes for pages built on the site shell (StepWords,
   and the shell parts of Timeline). js/theme.js puts the theme's class on
   <html>; Timeline's own cards and modals are themed in timeline/style.css
   under the same class names, so one choice re-skins every game.

   Each theme overrides the shell tokens from site.css (--ink, --bar, the
   season wash) plus the --sw-* tokens StepWords reads. The default theme,
   The Seasons, sets nothing here: it is the site's own seasonal skin worn
   by the games, so the wash, particles and chrome keep following the
   season exactly as they do on every other page.
   ========================================================================== */

/* ------------------------------------------------------- shared behaviour */
/* Looping video behind the page, added by js/theme.js for themes that have
   one. Sits above the page background (a negative z-index child of the root
   still paints over the canvas) and below all content. */
#theme-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  transition: opacity 1.4s ease;
}
#theme-video.is-playing { opacity: 1; }

html.theme-glass-light #backdrop,
html.theme-elegant-dark #backdrop,
html.theme-elegant-light #backdrop,
html.theme-steampunk #backdrop,
html.theme-classic[data-game="6lets"] #backdrop,
html.theme-classic[data-game="timeline"] #backdrop,
html.theme-wordle #backdrop,
html.theme-botanical #backdrop {
  animation: none;
  background-size: cover;
  background-position: center;
}
html.theme-elegant-dark #backdrop::after,
html.theme-steampunk #backdrop::after {
  /* the seasonal white vignette would fog a dark image */
  background: radial-gradient(120% 80% at 50% 42%,
              rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.45) 100%);
}
html.theme-elegant-light #backdrop::after {
  background: radial-gradient(120% 80% at 50% 42%,
              rgba(255,255,255,.35) 0%, rgba(255,255,255,.1) 50%, rgba(255,255,255,0) 80%);
}
html.theme-glass-light #particles,
html.theme-elegant-dark #particles,
html.theme-elegant-light #particles,
html.theme-steampunk #particles,
html.theme-classic[data-game="6lets"] #particles,
html.theme-classic[data-game="timeline"] #particles,
html.theme-wordle #particles,
html.theme-botanical #particles {
  display: none;
}
html.theme-classic[data-game="6lets"] #backdrop::after,
html.theme-classic[data-game="timeline"] #backdrop::after,
html.theme-wordle #backdrop::after,
html.theme-botanical #backdrop::after {
  background: none;
}

/* ------------------------------------------------------------ Glass Light */
/* Timeline's original look, before the games moved into the site shell: a
   flat, cool off-white page with white cards and the navy brand ink. The
   ink tokens are the site defaults already, so only the season's wash and
   particles are switched off. */
html.theme-glass-light {
  --season-bg-flat: #f7f9fc;
  --season-theme:   #26456b;
  --season-plaque-shadow: rgba(20,35,60,.25);
  --season-wash: linear-gradient(180deg, #fbfcfe 0%, #f7f9fc 55%, #eef4ff 100%);

  --sw-modal-bg:   #ffffff;
  --sw-box-bg:     #ffffff;
  --sw-box-border: rgba(47,74,114,.3);
  --sw-goal-ink:   rgba(29,49,83,.5);
  --sw-key-bg:     rgba(47,74,114,.12);
  --sw-key-active: rgba(47,74,114,.28);
  --sw-toast-bg:   #1d3153;
  --sw-toast-ink:  #ffffff;
  --sw-input-bg:   #ffffff;
}
html.theme-glass-light #backdrop::after { background: none; }

/* ---------------------------------------------------------- Elegant Dark */
html.theme-elegant-dark {
  color-scheme: dark;
  --ink:        #e8dcc5;
  --ink-deep:   #e8dcc5;
  --ink-soft:   #a39581;
  --bar:        #241b15;
  --bar-hi:     #3a2c20;
  --season-bg-flat: #1a1512;
  --season-theme:   #241b15;
  --season-plaque-shadow: rgba(0,0,0,.6);
  --season-wash: url('/timeline/images/bg_elegant_dark.jpg');
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 6px 20px rgba(0,0,0,.55);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.6);

  --sw-modal-bg:   #241b15;
  --sw-box-bg:     rgba(232,220,197,.06);
  --sw-box-border: rgba(232,220,197,.32);
  --sw-goal-ink:   rgba(232,220,197,.62);
  --sw-key-bg:     rgba(232,220,197,.14);
  --sw-key-active: rgba(232,220,197,.3);
  --sw-toast-bg:   #f2e2aa;
  --sw-toast-ink:  #1a1512;
  --sw-input-bg:   rgba(0,0,0,.25);

  /* plate behind a game's board and keyboard, as Timeline draws behind its
     events; the photograph otherwise makes the letters hard to read */
  --game-panel-bg:     rgba(26,21,18,.85);
  --game-panel-border: 1px solid #4a382b;
  --game-panel-pad:    .5rem 1.25rem 1.5rem;
}

/* --------------------------------------------------------- Elegant Light */
html.theme-elegant-light {
  --ink:        #3e3328;
  --ink-deep:   #3e3328;
  --ink-soft:   #8a7a69;
  --bar:        #6e5f4f;
  --bar-hi:     #8a7a69;
  --season-bg-flat: #fbf8f1;
  --season-theme:   #6e5f4f;
  --season-plaque-shadow: rgba(62,51,40,.3);
  --season-wash: url('/timeline/images/bg_elegant_light.jpg');
  --shadow-sm: 0 1px 3px rgba(62,51,40,.18);
  --shadow-md: 0 6px 20px rgba(62,51,40,.2);
  --shadow-lg: 0 18px 48px rgba(62,51,40,.28);

  --sw-modal-bg:   #f0e8d9;
  --sw-box-bg:     rgba(255,255,255,.55);
  --sw-box-border: #d4c5b0;
  --sw-goal-ink:   rgba(62,51,40,.55);
  --sw-key-bg:     rgba(62,51,40,.12);
  --sw-key-active: rgba(62,51,40,.28);
  --sw-toast-bg:   #3e3328;
  --sw-toast-ink:  #fbf8f1;
  --sw-input-bg:   rgba(255,255,255,.5);

  --game-panel-bg:     rgba(251,248,241,.85);
  --game-panel-border: 1px solid #d4c5b0;
  --game-panel-pad:    .5rem 1.25rem 1.5rem;
}

/* ------------------------------------------------------------- Steampunk */
html.theme-steampunk {
  color-scheme: dark;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --ink:        #d1bfae;
  --ink-deep:   #d1bfae;
  --ink-soft:   #8c7e73;
  --bar:        #2b2521;
  --bar-hi:     #4d3928;
  --season-bg-flat: #211c19;
  --season-theme:   #2b2521;
  --season-plaque-shadow: rgba(0,0,0,.7);
  --season-wash: url('/timeline/images/bg_steampunk.jpg');
  --shadow-sm: 0 1px 3px rgba(0,0,0,.6);
  --shadow-md: 0 6px 20px rgba(0,0,0,.65);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.7);

  --sw-modal-bg:   #2b2521;
  --sw-box-bg:     rgba(230,168,108,.06);
  --sw-box-border: #b36e3c;
  --sw-goal-ink:   rgba(209,191,174,.6);
  --sw-key-bg:     rgba(179,110,60,.22);
  --sw-key-active: rgba(179,110,60,.45);
  --sw-toast-bg:   #e6a86c;
  --sw-toast-ink:  #211c19;
  --sw-input-bg:   rgba(0,0,0,.3);

  --game-panel-bg:     rgba(33,28,25,.85);
  --game-panel-border: 1px solid #4d3928;
  --game-panel-pad:    .5rem 1.25rem 1.5rem;
}
html.theme-glass-light .modal-content { border: 1px solid rgba(47,74,114,.2); }
html.theme-steampunk .modal-content { border: 1px solid #4d3928; }
html.theme-elegant-dark .modal-content { border: 1px solid #4a382b; }
html.theme-elegant-light .modal-content { border: 1px solid #d4c5b0; }

/* ---------------------------------------------------------------- Classic */
/* Each game as it originally looked. 6Lets: its Original theme — black page,
   orange bar, white lettering (the grid and keys are in 6lets/style.css).
   Timeline: the Glass Dark look of timeline-74i.pages.dev — near-black navy,
   gradient cards. StepWords began on this site, so its classic look is The
   Seasons and nothing here applies to it; the hub likewise keeps the season. */
html.theme-classic[data-game="6lets"],
html.theme-classic[data-game="timeline"] {
  color-scheme: dark;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.6);
  --shadow-md: 0 6px 20px rgba(0,0,0,.6);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.7);
}
html.theme-classic[data-game="6lets"] {
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --ink:        #ffffff;
  --ink-deep:   #ffffff;
  --ink-soft:   #bdbdbd;
  --bar:        #ff7547;
  --bar-hi:     #ff8d6b;
  --season-bg-flat: #121213;
  --season-theme:   #ff7547;
  --season-plaque-shadow: rgba(0,0,0,.7);
  --season-wash: linear-gradient(#121213, #121213);
}
html.theme-classic[data-game="timeline"] {
  --font-display: 'Cormorant Garamond', "Iowan Old Style", Palatino, Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --ink:        #f8fafc;
  --ink-deep:   #f8fafc;
  --ink-soft:   #94a3b8;
  --bar:        #121822;
  --bar-hi:     #1d2d3e;
  --season-bg-flat: #080b10;
  --season-theme:   #121822;
  --season-plaque-shadow: rgba(0,0,0,.7);
  --season-wash: linear-gradient(#080b10, #080b10);
}

/* ---------------------------------------------------------------- Wordle */
/* White page, near-black type, the familiar grey keys and green and yellow.
   The bar goes white with a hairline, so its icons take the dark ink. */
html.theme-wordle {
  --font-body: "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ink:        #1a1a1b;
  --ink-deep:   #1a1a1b;
  --ink-soft:   #787c7e;
  --bar:        #ffffff;
  --bar-hi:     #ffffff;
  --bar-ink:    #1a1a1b;
  --season-bg-flat: #ffffff;
  --season-theme:   #ffffff;
  --season-plaque-shadow: rgba(0,0,0,.15);
  --season-wash: linear-gradient(#ffffff, #ffffff);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.08);
  --shadow-md: 0 4px 14px rgba(0,0,0,.1);
  --shadow-lg: 0 14px 40px rgba(0,0,0,.14);

  --sw-modal-bg:   #ffffff;
  --sw-box-bg:     transparent;
  --sw-box-border: #d3d6da;
  --sw-goal-ink:   #787c7e;
  --sw-key-bg:     #d3d6da;
  --sw-key-active: #787c7e;
  --sw-toast-bg:   #1a1a1b;
  --sw-toast-ink:  #ffffff;
  --sw-input-bg:   #ffffff;
}
html.theme-wordle .topbar { box-shadow: none; border-bottom: 1px solid #d3d6da; }
html.theme-wordle .topbar .iconbtn:hover { background: rgba(0,0,0,.06); }
html.theme-wordle .installpill { border: 1px solid #d3d6da; }
html.theme-wordle .modal-content { border: 1px solid #d3d6da; }
html.theme-wordle .letter-box { border-width: 2px; font-weight: bold; }

/* ---------------------------------------------------- Botanical Sketchbook */
/* Parchment, brown ink, Georgia, sage green and mustard, tan keys. */
html.theme-botanical {
  --font-body: Georgia, "Times New Roman", serif;
  --font-display: Georgia, "Times New Roman", serif;
  --ink:        #3b2f2f;
  --ink-deep:   #3b2f2f;
  --ink-soft:   #7a6a5a;
  --bar:        #6b7a58;
  --bar-hi:     #8b9c73;
  --bar-ink:    #f4ecd8;
  --season-bg-flat: #f4ecd8;
  --season-theme:   #6b7a58;
  --season-plaque-shadow: rgba(59,47,47,.3);
  --season-wash:
    radial-gradient(60% 45% at 20% 20%, rgba(255,250,238,.9), rgba(255,250,238,0) 70%),
    radial-gradient(55% 45% at 80% 75%, rgba(217,194,152,.55), rgba(217,194,152,0) 72%),
    linear-gradient(168deg, #f7f0dd 0%, #f4ecd8 50%, #eadfc4 100%);
  --shadow-sm: 0 1px 3px rgba(59,47,47,.18);
  --shadow-md: 0 6px 20px rgba(59,47,47,.2);
  --shadow-lg: 0 18px 48px rgba(59,47,47,.28);

  --sw-modal-bg:   #f4ecd8;
  --sw-box-bg:     rgba(255,255,255,.25);
  --sw-box-border: #bda881;
  --sw-goal-ink:   rgba(59,47,47,.55);
  --sw-key-bg:     #d9c298;
  --sw-key-active: #bda881;
  --sw-toast-bg:   #3b2f2f;
  --sw-toast-ink:  #f4ecd8;
  --sw-input-bg:   rgba(255,255,255,.45);
}
html.theme-botanical .modal-content { border: 1px solid #bda881; }
html.theme-botanical .letter-box { border-radius: 2px; }
html.theme-botanical .key { border-radius: 16px; border: 1px solid #bda881; }