/* Seasonal themes — Gamify's holiday looks (second major update).
   Every rule here is scoped under html[data-theme="..."], which
   js/themes.js sets only inside a theme's date window (America/Denver).
   Outside a window this file changes nothing.
   HARD RULE: accents, colors and backgrounds only. No layout property
   (position, size, margin, padding, display) may ever be themed, so the
   theme-on and theme-off geometry of every element stays identical. */

/* The theme canvas takes the starfield's slot: fixed, behind content,
   no pointer events, never in layout flow. It exists in the DOM only
   while a theme is active (inserted by js/themes.js). */
#gfy-theme-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* While a theme is active, the boot/loading screen sits ON the scene:
   its stock near-black backdrop goes transparent so the seasonal
   wallpaper scene shows through behind the stock boot icon. The icon's
   art, size and position are not themed. No theme = stock opaque
   loading screen, unchanged. */
html[data-theme] #loading-screen {
  background: transparent;
}


/* ── Halloween (Oct 17-31) ─────────────────────────────────────────────
   Established palette: badge orange #FF6B00, violet #9B59FF, deep red
   #C62828. Dark plum night surfaces, orange rim accents. */
html[data-theme="halloween"] {
  --bg: #0a0614;
  --surface: #150a20;
  --surface2: #1e1030;
  --border: rgba(255, 107, 0, 0.16);
  --border2: rgba(255, 107, 0, 0.28);
  --accent: #ff6b00;
}

html[data-theme="halloween"] body {
  background: radial-gradient(ellipse 120% 80% at 50% -30%, rgba(155, 89, 255, 0.10) 0%, transparent 55%), var(--bg);
}

html[data-theme="halloween"] .v2-home {
  background: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(255, 107, 0, 0.10) 0%, transparent 55%),
              radial-gradient(ellipse 80% 50% at 80% 100%, rgba(155, 89, 255, 0.08) 0%, transparent 50%),
              var(--bg);
}

/* ── Christmas (Dec 1-26) ──────────────────────────────────────────────
   Deep pine night, warm gold rims, crimson/pine glows. Tasteful:
   red and green live in the canvas lights and glows, gold carries the
   accent variable. */
html[data-theme="christmas"] {
  --bg: #07131c;
  --surface: #0c1d29;
  --surface2: #123041;
  --border: rgba(242, 179, 61, 0.16);
  --border2: rgba(242, 179, 61, 0.28);
  --accent: #f2b33d;
}

html[data-theme="christmas"] body {
  background: radial-gradient(ellipse 120% 80% at 50% -30%, rgba(46, 125, 90, 0.12) 0%, transparent 55%), var(--bg);
}

html[data-theme="christmas"] .v2-home {
  background: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(215, 38, 61, 0.07) 0%, transparent 55%),
              radial-gradient(ellipse 80% 50% at 80% 100%, rgba(46, 125, 90, 0.10) 0%, transparent 50%),
              var(--bg);
}

/* ── 4th of July (Jul 1-5) ───────────────────────────────────────────────
   Midnight navy, starlight-blue rims, red accent. The fireworks live
   on the canvas layer (js/themes.js). */
html[data-theme="july4"] {
  --bg: #060a1a;
  --surface: #0b1226;
  --surface2: #121c38;
  --border: rgba(110, 155, 255, 0.18);
  --border2: rgba(110, 155, 255, 0.30);
  --accent: #ff5964;
}

html[data-theme="july4"] body {
  background: radial-gradient(ellipse 120% 80% at 50% -30%, rgba(70, 110, 255, 0.10) 0%, transparent 55%), var(--bg);
}

html[data-theme="july4"] .v2-home {
  background: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(255, 89, 100, 0.07) 0%, transparent 55%),
              radial-gradient(ellipse 80% 50% at 80% 100%, rgba(70, 110, 255, 0.09) 0%, transparent 50%),
              var(--bg);
}