/* Color themes (Account > Appearance), on every page: html[data-theme].
   compat.js sets it before the page draws (saved per device, and with the account).
   night = the original look (no overrides). Holiday looks: html[data-holiday] (accents + a few
   small emoji, see compat.js). */

/* ---------- Daylight (light mode) ---------- */
html[data-theme="day"] {
  --bg: #eef2f7; --bg-2: #e4eaf2; --panel: #ffffff; --panel-2: #f2f5f9; --line: #cfd8e3;
  --text: #13202f; --muted: #5a6a7c; --hud: #0a6aa8; --info: #1f6fd1;
  --accent: #e0461f; --accent-2: #c93c18;
  --hud-rgb: 10, 106, 168; --hud2-rgb: 40, 110, 180; --accent-rgb: 224, 70, 31; --surface-rgb: 255, 255, 255;
  --field: #f7f9fc; --text-hi: #0f1b2a; --text-soft: #34465c; --hud-soft: #0a5a8e;
  color-scheme: light;
}
html[data-theme="day"] .btn { border-color: #c5d0dd; }
html[data-theme="day"] .btn:hover { background: #e8eef5; }
html[data-theme="day"] .btn.primary, html[data-theme="day"] .btn.primary:hover { color: #fff; }
html[data-theme="day"] .topbar { background: linear-gradient(180deg, #ffffff, #f2f5f9); }
html[data-theme="day"] input::placeholder, html[data-theme="day"] textarea::placeholder { color: #8a99aa; }
html[data-theme="day"] #space { filter: invert(1) hue-rotate(180deg) brightness(1.05) saturate(.7); }
html[data-theme="day"] .intro { background: radial-gradient(ellipse at center, rgba(255, 255, 255, .1), rgba(230, 236, 244, .85) 70%); }
html[data-theme="day"] .tour-card, html[data-theme="day"] .np-toast { background: #fff; color: #13202f; }
html[data-theme="day"] .tour-card h3 { color: #0f1b2a; }
html[data-theme="day"] .tour-card p { color: #34465c; }

/* ---------- Red Alert (red and black) ---------- */
html[data-theme="ember"] {
  --bg: #090404; --bg-2: #110707; --panel: #160909; --panel-2: #1f0e0e; --line: #3a1a1a;
  --text: #f6e9e7; --muted: #b59b97; --hud: #ff4b4b; --info: #ff7a6b;
  --accent: #ff2d2d; --accent-2: #ff6457;
  --hud-rgb: 255, 75, 75; --hud2-rgb: 255, 120, 110; --accent-rgb: 255, 45, 45; --surface-rgb: 24, 9, 9;
  --field: #130707; --text-hi: #fff0ee; --text-soft: #e2c6c1; --hud-soft: #ffb3a8;
}
html[data-theme="ember"] .btn { border-color: #4a1d1d; }
html[data-theme="ember"] .btn:hover { background: #2a1111; }
html[data-theme="ember"] .topbar { background: linear-gradient(180deg, #1a0909, #120606); }
html[data-theme="ember"] #space { filter: hue-rotate(150deg) saturate(1.3) brightness(.85); }

/* ---------- Forest (green and dark green) ---------- */
html[data-theme="forest"] {
  --bg: #040a06; --bg-2: #08110b; --panel: #0b160e; --panel-2: #102016; --line: #1d3524;
  --text: #e7f5ea; --muted: #93b39b; --hud: #4ade80; --info: #6ee7a0;
  --accent: #a3e635; --accent-2: #bef264;
  --hud-rgb: 74, 222, 128; --hud2-rgb: 120, 215, 150; --accent-rgb: 163, 230, 53; --surface-rgb: 10, 24, 14;
  --field: #07120a; --text-hi: #effcf2; --text-soft: #c4e2cc; --hud-soft: #a7f3c4;
}
html[data-theme="forest"] .btn { border-color: #1f4029; }
html[data-theme="forest"] .btn:hover { background: #132a1a; }
html[data-theme="forest"] .btn.primary { background: linear-gradient(180deg, #4caf50, #2e7d32); border-color: #66bb6a; }
html[data-theme="forest"] .topbar { background: linear-gradient(180deg, #0c1a10, #07120a); }
html[data-theme="forest"] #space { filter: hue-rotate(-95deg) saturate(1.1); }

/* ---------- Steel (graphite and amber) ---------- */
html[data-theme="steel"] {
  --bg: #0b0c0f; --bg-2: #111317; --panel: #15171c; --panel-2: #1c1f25; --line: #2b2f37;
  --text: #eceff3; --muted: #9aa3ae; --hud: #cfd8e3; --info: #a9b8c8;
  --accent: #f59e0b; --accent-2: #fbbf24;
  --hud-rgb: 207, 216, 227; --hud2-rgb: 175, 186, 200; --accent-rgb: 245, 158, 11; --surface-rgb: 22, 24, 29;
  --field: #101216; --text-hi: #f4f6f8; --text-soft: #c9d0d8; --hud-soft: #e2e8ee;
}
html[data-theme="steel"] .btn { border-color: #343943; }
html[data-theme="steel"] .btn:hover { background: #22262d; }
html[data-theme="steel"] .btn.primary { background: linear-gradient(180deg, #f59e0b, #d97706); border-color: #fbbf24; color: #111; }
html[data-theme="steel"] .topbar { background: linear-gradient(180deg, #181a1f, #101216); }
html[data-theme="steel"] #space { filter: saturate(.15) brightness(.9); }

/* A few small emoji drifting up the edges (menus and the website), or one small badge on the
   console and trainee screens so nothing gets in the way. */
.holiday-deco { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.holiday-deco span { position: absolute; bottom: -40px; font-size: 22px; opacity: .55; animation: holiday-rise linear infinite; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
@keyframes holiday-rise {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-115vh) rotate(25deg); }
}
.holiday-badge { position: fixed; left: 10px; bottom: 10px; z-index: 900; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px;
  background: rgba(var(--surface-rgb), .85); border: 1px solid rgba(var(--accent-rgb), .5); color: var(--text); font: 600 12px var(--font, sans-serif); pointer-events: auto; }
.holiday-badge button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 0 0 4px; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .holiday-deco span { animation: none; bottom: auto; } }
@media print { .holiday-deco, .holiday-badge { display: none; } }
html[data-theme="day"] .map { background: #e5e9ee; }
/* The website's live radio console stays a dark radio screen in the light theme. */
html[data-theme="day"] .np-console { --text: #e8f1fa; --text-hi: #e8f1fa; --text-soft: #c3d3e6; --muted: #8ea2b7; --surface-rgb: 10, 18, 32; --hud2-rgb: 110, 190, 255; color: #e8f1fa;
  background: linear-gradient(180deg, rgba(14, 26, 44, .96), rgba(10, 18, 32, .98)); }

/* ---------- five more color themes (Account > Appearance) ---------- */
html[data-theme="royal"] { --bg: #0b0716; --bg-2: #110b22; --panel: #160f2b; --panel-2: #1e1539; --line: #33275a; --text: #f1ecff; --muted: #a99fcc; --hud: #a78bfa; --info: #a78bfa; --accent: #ec4899; --accent-2: #f472b6; --hud-rgb: 167, 139, 250; --hud2-rgb: 196, 181, 253; --accent-rgb: 236, 72, 153; --surface-rgb: 22, 15, 43; --field: #0f0a1f; --text-hi: #f1ecff; --text-soft: #d6cdf5; --hud-soft: #ddd6fe; color-scheme: dark; }
html[data-theme="royal"] .btn { border-color: #33275a; }
html[data-theme="royal"] .btn:hover { background: #1e1539; }
html[data-theme="royal"] .btn.primary, html[data-theme="royal"] .btn.primary:hover { background: linear-gradient(180deg, #f472b6, #ec4899); border-color: #f472b6; color: #fff; }
html[data-theme="royal"] .topbar { background: linear-gradient(180deg, #160f2b, #110b22); }
html[data-theme="royal"] #space { filter: hue-rotate(45deg) saturate(1.2); }
html[data-theme="royal"] .intro { background: radial-gradient(ellipse at center, rgba(11, 7, 22, .2), rgba(11, 7, 22, .88) 70%); }
html[data-theme="royal"] input::placeholder, html[data-theme="royal"] textarea::placeholder { color: #a99fcc; opacity: .8; }

html[data-theme="ocean"] { --bg: #03100f; --bg-2: #061816; --panel: #08201d; --panel-2: #0d2b27; --line: #164640; --text: #e6fbf8; --muted: #8fbfb8; --hud: #2dd4bf; --info: #2dd4bf; --accent: #fb7185; --accent-2: #fda4af; --hud-rgb: 45, 212, 191; --hud2-rgb: 94, 234, 212; --accent-rgb: 251, 113, 133; --surface-rgb: 8, 32, 29; --field: #051614; --text-hi: #e6fbf8; --text-soft: #c2ece6; --hud-soft: #99f6e4; color-scheme: dark; }
html[data-theme="ocean"] .btn { border-color: #164640; }
html[data-theme="ocean"] .btn:hover { background: #0d2b27; }
html[data-theme="ocean"] .btn.primary, html[data-theme="ocean"] .btn.primary:hover { background: linear-gradient(180deg, #fda4af, #fb7185); border-color: #fda4af; color: #fff; }
html[data-theme="ocean"] .topbar { background: linear-gradient(180deg, #08201d, #061816); }
html[data-theme="ocean"] #space { filter: hue-rotate(-40deg) saturate(1.1); }
html[data-theme="ocean"] .intro { background: radial-gradient(ellipse at center, rgba(3, 16, 15, .2), rgba(3, 16, 15, .88) 70%); }
html[data-theme="ocean"] input::placeholder, html[data-theme="ocean"] textarea::placeholder { color: #8fbfb8; opacity: .8; }

html[data-theme="sunset"] { --bg: #12060c; --bg-2: #1a0912; --panel: #220c17; --panel-2: #2d1120; --line: #4d1f35; --text: #fff0f3; --muted: #c9a0ae; --hud: #fb923c; --info: #fb923c; --accent: #ec4899; --accent-2: #f472b6; --hud-rgb: 251, 146, 60; --hud2-rgb: 253, 186, 116; --accent-rgb: 236, 72, 153; --surface-rgb: 34, 12, 23; --field: #180810; --text-hi: #fff0f3; --text-soft: #f2cfd8; --hud-soft: #fed7aa; color-scheme: dark; }
html[data-theme="sunset"] .btn { border-color: #4d1f35; }
html[data-theme="sunset"] .btn:hover { background: #2d1120; }
html[data-theme="sunset"] .btn.primary, html[data-theme="sunset"] .btn.primary:hover { background: linear-gradient(180deg, #f472b6, #ec4899); border-color: #f472b6; color: #fff; }
html[data-theme="sunset"] .topbar { background: linear-gradient(180deg, #220c17, #1a0912); }
html[data-theme="sunset"] #space { filter: hue-rotate(140deg) saturate(1.3) brightness(.9); }
html[data-theme="sunset"] .intro { background: radial-gradient(ellipse at center, rgba(18, 6, 12, .2), rgba(18, 6, 12, .88) 70%); }
html[data-theme="sunset"] input::placeholder, html[data-theme="sunset"] textarea::placeholder { color: #c9a0ae; opacity: .8; }

html[data-theme="gold"] { --bg: #080806; --bg-2: #0e0d09; --panel: #15130c; --panel-2: #1e1b11; --line: #3a3320; --text: #fdfaf0; --muted: #b4ab8c; --hud: #facc15; --info: #facc15; --accent: #f59e0b; --accent-2: #fbbf24; --hud-rgb: 250, 204, 21; --hud2-rgb: 253, 230, 138; --accent-rgb: 245, 158, 11; --surface-rgb: 21, 19, 12; --field: #0f0e09; --text-hi: #fdfaf0; --text-soft: #e9e2c6; --hud-soft: #fef08a; color-scheme: dark; }
html[data-theme="gold"] .btn { border-color: #3a3320; }
html[data-theme="gold"] .btn:hover { background: #1e1b11; }
html[data-theme="gold"] .btn.primary, html[data-theme="gold"] .btn.primary:hover { background: linear-gradient(180deg, #fbbf24, #f59e0b); border-color: #fbbf24; color: #111; }
html[data-theme="gold"] .topbar { background: linear-gradient(180deg, #15130c, #0e0d09); }
html[data-theme="gold"] #space { filter: saturate(.1) sepia(.5) brightness(.75); }
html[data-theme="gold"] .intro { background: radial-gradient(ellipse at center, rgba(8, 8, 6, .2), rgba(8, 8, 6, .88) 70%); }
html[data-theme="gold"] input::placeholder, html[data-theme="gold"] textarea::placeholder { color: #b4ab8c; opacity: .8; }

html[data-theme="glacier"] { --bg: #0a1016; --bg-2: #0f171f; --panel: #141e28; --panel-2: #1b2833; --line: #2c3d4c; --text: #f0f7fc; --muted: #9fb3c4; --hud: #7dd3fc; --info: #7dd3fc; --accent: #34d399; --accent-2: #6ee7b7; --hud-rgb: 125, 211, 252; --hud2-rgb: 186, 230, 253; --accent-rgb: 52, 211, 153; --surface-rgb: 20, 30, 40; --field: #0e161e; --text-hi: #f0f7fc; --text-soft: #cfe0ec; --hud-soft: #e0f2fe; color-scheme: dark; }
html[data-theme="glacier"] .btn { border-color: #2c3d4c; }
html[data-theme="glacier"] .btn:hover { background: #1b2833; }
html[data-theme="glacier"] .btn.primary, html[data-theme="glacier"] .btn.primary:hover { background: linear-gradient(180deg, #6ee7b7, #34d399); border-color: #6ee7b7; color: #062016; }
html[data-theme="glacier"] .topbar { background: linear-gradient(180deg, #141e28, #0f171f); }
html[data-theme="glacier"] #space { filter: saturate(.5) brightness(1.05); }
html[data-theme="glacier"] .intro { background: radial-gradient(ellipse at center, rgba(10, 16, 22, .2), rgba(10, 16, 22, .88) 70%); }
html[data-theme="glacier"] input::placeholder, html[data-theme="glacier"] textarea::placeholder { color: #9fb3c4; opacity: .8; }

/* ---------- holiday palettes: while a holiday look is on, it recolors everything (any theme) ----------
   Halloween black + orange, Christmas red/white/green, July 4th red/white/blue, ... */
html[data-holiday="halloween"] { --bg: #060403; --bg-2: #0c0805; --panel: #140c06; --panel-2: #1d1209; --line: #3d2410; --text: #fff3e6; --muted: #c4a184; --hud: #ff8a1f; --info: #ff8a1f; --accent: #ff6a00; --accent-2: #ff9a3d; --hud-rgb: 255, 138, 31; --hud2-rgb: 255, 179, 107; --accent-rgb: 255, 106, 0; --surface-rgb: 20, 12, 6; --field: #0d0804; --text-hi: #fff3e6; --text-soft: #f2d6bd; --hud-soft: #ffd0a1; color-scheme: dark; }
html[data-holiday="halloween"] .btn { border-color: #3d2410; }
html[data-holiday="halloween"] .btn:hover { background: #1d1209; }
html[data-holiday="halloween"] .btn.primary, html[data-holiday="halloween"] .btn.primary:hover { background: linear-gradient(180deg, #ff9a3d, #ff6a00); border-color: #ff9a3d; color: #fff; }
html[data-holiday="halloween"] .topbar { background: linear-gradient(180deg, #140c06, #0c0805); }
html[data-holiday="halloween"] #space { filter: hue-rotate(175deg) saturate(1.6) brightness(.85); }
html[data-holiday="halloween"] .intro { background: radial-gradient(ellipse at center, rgba(6, 4, 3, .2), rgba(6, 4, 3, .88) 70%); }
html[data-holiday="halloween"] input::placeholder, html[data-holiday="halloween"] textarea::placeholder { color: #c4a184; opacity: .8; }

html[data-holiday="christmas"] { --bg: #04100a; --bg-2: #06160e; --panel: #0a1f14; --panel-2: #0f2a1c; --line: #1f4a33; --text: #ffffff; --muted: #b6d1c1; --hud: #ff4d5a; --info: #ff4d5a; --accent: #16a34a; --accent-2: #22c55e; --hud-rgb: 255, 77, 90; --hud2-rgb: 255, 138, 147; --accent-rgb: 22, 163, 74; --surface-rgb: 10, 31, 20; --field: #05130b; --text-hi: #ffffff; --text-soft: #e3f0e8; --hud-soft: #ffd1d5; color-scheme: dark; }
html[data-holiday="christmas"] .btn { border-color: #1f4a33; }
html[data-holiday="christmas"] .btn:hover { background: #0f2a1c; }
html[data-holiday="christmas"] .btn.primary, html[data-holiday="christmas"] .btn.primary:hover { background: linear-gradient(180deg, #22c55e, #16a34a); border-color: #22c55e; color: #fff; }
html[data-holiday="christmas"] .topbar { background: linear-gradient(180deg, #0a1f14, #06160e); }
html[data-holiday="christmas"] #space { filter: hue-rotate(-95deg) saturate(1.2); }
html[data-holiday="christmas"] .intro { background: radial-gradient(ellipse at center, rgba(4, 16, 10, .2), rgba(4, 16, 10, .88) 70%); }
html[data-holiday="christmas"] input::placeholder, html[data-holiday="christmas"] textarea::placeholder { color: #b6d1c1; opacity: .8; }

html[data-holiday="july4"] { --bg: #040a1c; --bg-2: #081028; --panel: #0c1734; --panel-2: #122043; --line: #26386b; --text: #ffffff; --muted: #b3c0e0; --hud: #ff4757; --info: #ff4757; --accent: #3b82f6; --accent-2: #60a5fa; --hud-rgb: 255, 71, 87; --hud2-rgb: 255, 138, 147; --accent-rgb: 59, 130, 246; --surface-rgb: 12, 23, 52; --field: #060d22; --text-hi: #ffffff; --text-soft: #e1e8f8; --hud-soft: #ffd1d5; color-scheme: dark; }
html[data-holiday="july4"] .btn { border-color: #26386b; }
html[data-holiday="july4"] .btn:hover { background: #122043; }
html[data-holiday="july4"] .btn.primary, html[data-holiday="july4"] .btn.primary:hover { background: linear-gradient(180deg, #60a5fa, #3b82f6); border-color: #60a5fa; color: #fff; }
html[data-holiday="july4"] .topbar { background: linear-gradient(180deg, #0c1734, #081028); }
html[data-holiday="july4"] #space { filter: saturate(1.2); }
html[data-holiday="july4"] .intro { background: radial-gradient(ellipse at center, rgba(4, 10, 28, .2), rgba(4, 10, 28, .88) 70%); }
html[data-holiday="july4"] input::placeholder, html[data-holiday="july4"] textarea::placeholder { color: #b3c0e0; opacity: .8; }

html[data-holiday="valentines"] { --bg: #12040b; --bg-2: #190611; --panel: #220817; --panel-2: #2c0c1f; --line: #521a39; --text: #fff0f6; --muted: #d1a3b9; --hud: #ff6fae; --info: #ff6fae; --accent: #e11d48; --accent-2: #f43f5e; --hud-rgb: 255, 111, 174; --hud2-rgb: 255, 156, 200; --accent-rgb: 225, 29, 72; --surface-rgb: 34, 8, 23; --field: #16050e; --text-hi: #fff0f6; --text-soft: #f7d1e2; --hud-soft: #ffd6e8; color-scheme: dark; }
html[data-holiday="valentines"] .btn { border-color: #521a39; }
html[data-holiday="valentines"] .btn:hover { background: #2c0c1f; }
html[data-holiday="valentines"] .btn.primary, html[data-holiday="valentines"] .btn.primary:hover { background: linear-gradient(180deg, #f43f5e, #e11d48); border-color: #f43f5e; color: #fff; }
html[data-holiday="valentines"] .topbar { background: linear-gradient(180deg, #220817, #190611); }
html[data-holiday="valentines"] #space { filter: hue-rotate(110deg) saturate(1.3); }
html[data-holiday="valentines"] .intro { background: radial-gradient(ellipse at center, rgba(18, 4, 11, .2), rgba(18, 4, 11, .88) 70%); }
html[data-holiday="valentines"] input::placeholder, html[data-holiday="valentines"] textarea::placeholder { color: #d1a3b9; opacity: .8; }

html[data-holiday="stpatricks"] { --bg: #03100a; --bg-2: #05170e; --panel: #082014; --panel-2: #0c2b1b; --line: #1a4a30; --text: #f0fff6; --muted: #a4cdb4; --hud: #34d399; --info: #34d399; --accent: #eab308; --accent-2: #facc15; --hud-rgb: 52, 211, 153; --hud2-rgb: 110, 231, 183; --accent-rgb: 234, 179, 8; --surface-rgb: 8, 32, 20; --field: #04130b; --text-hi: #f0fff6; --text-soft: #d0f0dd; --hud-soft: #bbf7d0; color-scheme: dark; }
html[data-holiday="stpatricks"] .btn { border-color: #1a4a30; }
html[data-holiday="stpatricks"] .btn:hover { background: #0c2b1b; }
html[data-holiday="stpatricks"] .btn.primary, html[data-holiday="stpatricks"] .btn.primary:hover { background: linear-gradient(180deg, #facc15, #eab308); border-color: #facc15; color: #111; }
html[data-holiday="stpatricks"] .topbar { background: linear-gradient(180deg, #082014, #05170e); }
html[data-holiday="stpatricks"] #space { filter: hue-rotate(-100deg) saturate(1.3); }
html[data-holiday="stpatricks"] .intro { background: radial-gradient(ellipse at center, rgba(3, 16, 10, .2), rgba(3, 16, 10, .88) 70%); }
html[data-holiday="stpatricks"] input::placeholder, html[data-holiday="stpatricks"] textarea::placeholder { color: #a4cdb4; opacity: .8; }

html[data-holiday="easter"] { --bg: #100c1a; --bg-2: #161124; --panel: #1d1730; --panel-2: #251e3d; --line: #40366a; --text: #fbf7ff; --muted: #bdb3dd; --hud: #c4b5fd; --info: #c4b5fd; --accent: #f9a8d4; --accent-2: #fbcfe8; --hud-rgb: 196, 181, 253; --hud2-rgb: 221, 214, 254; --accent-rgb: 249, 168, 212; --surface-rgb: 29, 23, 48; --field: #130f20; --text-hi: #fbf7ff; --text-soft: #e7e0fb; --hud-soft: #ede9fe; color-scheme: dark; }
html[data-holiday="easter"] .btn { border-color: #40366a; }
html[data-holiday="easter"] .btn:hover { background: #251e3d; }
html[data-holiday="easter"] .btn.primary, html[data-holiday="easter"] .btn.primary:hover { background: linear-gradient(180deg, #fbcfe8, #f9a8d4); border-color: #fbcfe8; color: #2a0f22; }
html[data-holiday="easter"] .topbar { background: linear-gradient(180deg, #1d1730, #161124); }
html[data-holiday="easter"] #space { filter: hue-rotate(40deg) saturate(.9) brightness(1.1); }
html[data-holiday="easter"] .intro { background: radial-gradient(ellipse at center, rgba(16, 12, 26, .2), rgba(16, 12, 26, .88) 70%); }
html[data-holiday="easter"] input::placeholder, html[data-holiday="easter"] textarea::placeholder { color: #bdb3dd; opacity: .8; }

html[data-holiday="thanksgiving"] { --bg: #100803; --bg-2: #170c05; --panel: #201108; --panel-2: #2b170b; --line: #4f2d14; --text: #fff6eb; --muted: #cfae90; --hud: #f59e0b; --info: #f59e0b; --accent: #c2410c; --accent-2: #ea580c; --hud-rgb: 245, 158, 11; --hud2-rgb: 251, 191, 36; --accent-rgb: 194, 65, 12; --surface-rgb: 32, 17, 8; --field: #140a04; --text-hi: #fff6eb; --text-soft: #f1dcc6; --hud-soft: #fde68a; color-scheme: dark; }
html[data-holiday="thanksgiving"] .btn { border-color: #4f2d14; }
html[data-holiday="thanksgiving"] .btn:hover { background: #2b170b; }
html[data-holiday="thanksgiving"] .btn.primary, html[data-holiday="thanksgiving"] .btn.primary:hover { background: linear-gradient(180deg, #ea580c, #c2410c); border-color: #ea580c; color: #fff; }
html[data-holiday="thanksgiving"] .topbar { background: linear-gradient(180deg, #201108, #170c05); }
html[data-holiday="thanksgiving"] #space { filter: hue-rotate(165deg) saturate(1.1) brightness(.8); }
html[data-holiday="thanksgiving"] .intro { background: radial-gradient(ellipse at center, rgba(16, 8, 3, .2), rgba(16, 8, 3, .88) 70%); }
html[data-holiday="thanksgiving"] input::placeholder, html[data-holiday="thanksgiving"] textarea::placeholder { color: #cfae90; opacity: .8; }

html[data-holiday="newyear"] { --bg: #060608; --bg-2: #0b0b0f; --panel: #121218; --panel-2: #1a1a22; --line: #34343f; --text: #fafafa; --muted: #b5b5c2; --hud: #f5c518; --info: #f5c518; --accent: #d4d4d8; --accent-2: #f4f4f5; --hud-rgb: 245, 197, 24; --hud2-rgb: 253, 230, 138; --accent-rgb: 212, 212, 216; --surface-rgb: 18, 18, 24; --field: #0c0c10; --text-hi: #fafafa; --text-soft: #e4e4e7; --hud-soft: #fef3c7; color-scheme: dark; }
html[data-holiday="newyear"] .btn { border-color: #34343f; }
html[data-holiday="newyear"] .btn:hover { background: #1a1a22; }
html[data-holiday="newyear"] .btn.primary, html[data-holiday="newyear"] .btn.primary:hover { background: linear-gradient(180deg, #f4f4f5, #d4d4d8); border-color: #f4f4f5; color: #111; }
html[data-holiday="newyear"] .topbar { background: linear-gradient(180deg, #121218, #0b0b0f); }
html[data-holiday="newyear"] #space { filter: saturate(.2) brightness(.75); }
html[data-holiday="newyear"] .intro { background: radial-gradient(ellipse at center, rgba(6, 6, 8, .2), rgba(6, 6, 8, .88) 70%); }
html[data-holiday="newyear"] input::placeholder, html[data-holiday="newyear"] textarea::placeholder { color: #b5b5c2; opacity: .8; }

html[data-holiday="firePrevention"] { --bg: #100404; --bg-2: #170606; --panel: #200808; --panel-2: #2b0c0c; --line: #521a1a; --text: #fff4f0; --muted: #d6a49a; --hud: #ffcc00; --info: #ffcc00; --accent: #ef2b2b; --accent-2: #ff5a4f; --hud-rgb: 255, 204, 0; --hud2-rgb: 255, 224, 102; --accent-rgb: 239, 43, 43; --surface-rgb: 32, 8, 8; --field: #140505; --text-hi: #fff4f0; --text-soft: #f5d2ca; --hud-soft: #fff3b0; color-scheme: dark; }
html[data-holiday="firePrevention"] .btn { border-color: #521a1a; }
html[data-holiday="firePrevention"] .btn:hover { background: #2b0c0c; }
html[data-holiday="firePrevention"] .btn.primary, html[data-holiday="firePrevention"] .btn.primary:hover { background: linear-gradient(180deg, #ff5a4f, #ef2b2b); border-color: #ff5a4f; color: #fff; }
html[data-holiday="firePrevention"] .topbar { background: linear-gradient(180deg, #200808, #170606); }
html[data-holiday="firePrevention"] #space { filter: hue-rotate(150deg) saturate(1.4) brightness(.85); }
html[data-holiday="firePrevention"] .intro { background: radial-gradient(ellipse at center, rgba(16, 4, 4, .2), rgba(16, 4, 4, .88) 70%); }
html[data-holiday="firePrevention"] input::placeholder, html[data-holiday="firePrevention"] textarea::placeholder { color: #d6a49a; opacity: .8; }

html[data-holiday] .np-console { background: linear-gradient(180deg, rgba(var(--surface-rgb), .95), rgba(var(--surface-rgb), .98)); }
html[data-holiday] .tour-card { background: var(--panel); color: var(--text); }
html[data-holiday] .tour-card h3 { color: var(--text-hi); }
html[data-holiday] .tour-card p { color: var(--text-soft); }

/* Headline highlight and avatar follow the theme / holiday colors too */
html[data-theme] .np-hero h1 em, html[data-holiday] .np-hero h1 em { background-image: linear-gradient(90deg, var(--hud-soft), var(--hud) 45%, var(--accent-2)); }
html[data-theme] .np-avatar, html[data-holiday] .np-avatar { background: linear-gradient(135deg, var(--hud), var(--hud-soft)); color: var(--bg); }
html[data-theme] .lib-thumb, html[data-holiday] .lib-thumb { background: linear-gradient(135deg, rgba(var(--hud-rgb), .2), rgba(var(--accent-rgb), .14)); }
@media (max-width: 720px) { .holiday-deco span { opacity: .3; font-size: 16px !important; } }