/**
 * Optional holiday themes.
 * Default site styles are unchanged unless html has a theme class
 * (e.g. theme-valentines), set by holiday-theme.js from /api/site/theme.
 */

/* ─── Valentine’s Day ───────────────────────────────────────────── */
html.theme-valentines {
  --bg: #fff5f7;
  --bg-deep: #ffe9ef;
  --panel: rgba(255, 255, 255, 0.72);
  --panel-solid: #ffffff;
  --panel-2: rgba(255, 252, 253, 0.88);
  --text: #2a1520;
  --muted: #8a5a6a;
  --accent: #e11d48;
  --accent-2: #be123c;
  --border: rgba(225, 29, 72, 0.22);
  --border-strong: rgba(190, 18, 60, 0.38);
  --glass-shine: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 240, 245, 0.65) 42%,
    rgba(255, 220, 230, 0.45) 100%
  );
  --shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 30px rgba(190, 60, 90, 0.1),
    0 2px 8px rgba(120, 40, 60, 0.05);
  --shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 18px 40px rgba(190, 50, 80, 0.16),
    0 4px 12px rgba(120, 40, 60, 0.08);
  --slime: #f472b6;
  --slime-bright: #fb7185;
  --slime-dim: #e11d48;
  --slime-glow: rgba(244, 114, 182, 0.35);
  --water: #fb7185;
  --water-glow: rgba(251, 113, 133, 0.4);
  --tile-bg: #2a1520;
  --tile-border: #4a2030;
}

html.theme-valentines,
html.theme-valentines body {
  background-color: var(--bg-deep) !important;
}

html.theme-valentines body {
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(255, 180, 200, 0.45) 0%, transparent 55%),
    radial-gradient(800px 480px at 92% 6%, rgba(255, 150, 180, 0.35) 0%, transparent 50%),
    radial-gradient(900px 500px at 50% 100%, rgba(255, 200, 210, 0.4) 0%, transparent 60%),
    linear-gradient(180deg, #fff9fb 0%, var(--bg) 40%, var(--bg-deep) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-attachment: fixed !important;
}

/* ── Floating hearts (balloons rising bottom → top) ── */
/* Keep hearts behind UI; do NOT set position on body children - that
   overrides position:fixed win modals and pins them to the page bottom. */
#ms-valentines-hearts {
  display: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

html.theme-valentines #ms-valentines-hearts {
  display: block;
}

/*
 * Win / dialog layers: keep viewport-centered without breaking stacking.
 * Do NOT raise .modal-backdrop above .modal-card - that puts backdrop-filter
 * blur on top of the dialog and makes the whole UI look permanently fuzzy.
 */
html.theme-valentines .modal,
html.theme-valentines #win-modal,
html.theme-valentines #result-modal {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 10050 !important;
  align-items: center !important;
  justify-content: center !important;
}

html.theme-valentines .modal:not([hidden]):not(.hidden),
html.theme-valentines #win-modal:not([hidden]):not(.hidden),
html.theme-valentines #result-modal:not([hidden]):not(.hidden) {
  display: flex !important;
}

/* Backdrop inside the modal shell stays under the card */
html.theme-valentines .modal .modal-backdrop,
html.theme-valentines #win-modal .modal-backdrop,
html.theme-valentines #result-modal .modal-backdrop,
html.theme-valentines .modal > #win-modal-backdrop,
html.theme-valentines .modal > #result-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

/* Sibling backdrops (crossword/wordsearch style) sit just under the modal */
html.theme-valentines body > .modal-backdrop,
html.theme-valentines body > #win-modal-backdrop,
html.theme-valentines body > #result-modal-backdrop,
html.theme-valentines .app > .modal-backdrop,
html.theme-valentines .app > #win-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10040 !important;
}

/* Card always above its backdrop, sharp (no inherited filter) */
html.theme-valentines .modal-card {
  position: relative !important;
  z-index: 1 !important;
  margin: auto !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#ms-valentines-hearts .ms-heart {
  position: absolute;
  bottom: -3.5rem;
  left: 0;
  font-size: 1.85rem;
  line-height: 1;
  color: #e11d48;
  opacity: 0;
  will-change: transform, opacity;
  animation-name: ms-heart-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  user-select: none;
  filter: drop-shadow(0 3px 6px rgba(190, 40, 70, 0.28));
}

#ms-valentines-hearts .ms-heart.ms-heart-soft {
  color: #f472b6;
}

#ms-valentines-hearts .ms-heart.ms-heart-deep {
  color: #be123c;
}

@keyframes ms-heart-rise {
  0% {
    transform: translate3d(0, 0, 0) scale(0.85) rotate(-8deg);
    opacity: 0;
  }
  8% {
    opacity: 0.85;
  }
  50% {
    opacity: 0.75;
  }
  100% {
    transform: translate3d(var(--drift, 20px), -110vh, 0) scale(1.05) rotate(12deg);
    opacity: 0;
  }
}

/* ── Greeting under Mootsmog logo (hub + site header) ── */
.valentines-greeting {
  display: none;
  margin: 0;
}

html.theme-valentines .valentines-greeting {
  display: block;
  margin: 0.35rem 0 0;
  font-family: "Segoe Script", "Apple Chancery", "Snell Roundhand", "Brush Script MT",
    "Lucida Handwriting", cursive;
  font-size: 1.15rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.01em;
  color: #e11d48;
  text-align: center;
}

/* Hub header: under h1.Mootsmog */
html.theme-valentines header > h1 + .valentines-greeting {
  margin-top: 0.3rem;
  margin-bottom: 0.4rem;
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  background: linear-gradient(120deg, #be123c 0%, #e11d48 45%, #f472b6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Site header brand stack */
.brand-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: auto;
  text-decoration: none;
}

.brand-stack .brand {
  margin-right: 0;
}

.brand-stack .valentines-greeting {
  font-family: "Segoe Script", "Apple Chancery", "Snell Roundhand", "Brush Script MT",
    "Lucida Handwriting", cursive;
  font-size: 0.88rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  color: #e11d48;
  text-align: left;
  margin-top: 2px;
  line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  #ms-valentines-hearts .ms-heart {
    animation: none !important;
    opacity: 0.35;
    bottom: auto;
    top: 70%;
  }
}

/* ─── Christmas (classic red / evergreen / gold - distinct from Winter frost) ── */
html.theme-christmas {
  --bg: #1a120e;
  --bg-deep: #0d0a08;
  --panel: rgba(32, 18, 14, 0.86);
  --panel-solid: #1f1410;
  --panel-2: rgba(40, 22, 16, 0.92);
  --text: #fff5e8;
  --muted: #d4a574;
  --accent: #c41e3a;
  --accent-2: #166534;
  --border: rgba(212, 175, 55, 0.35);
  --border-strong: rgba(196, 30, 58, 0.5);
  --glass-shine: linear-gradient(
    145deg,
    rgba(80, 30, 28, 0.95) 0%,
    rgba(30, 18, 14, 0.85) 42%,
    rgba(14, 30, 18, 0.75) 100%
  );
  --shadow:
    0 1px 0 rgba(212, 175, 55, 0.1) inset,
    0 10px 30px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-hover:
    0 1px 0 rgba(212, 175, 55, 0.14) inset,
    0 18px 40px rgba(196, 30, 58, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.35);
  --slime: #d4af37;
  --slime-bright: #f0d78c;
  --slime-dim: #c41e3a;
  --slime-glow: rgba(212, 175, 55, 0.4);
  --water: #22c55e;
  --water-glow: rgba(34, 197, 94, 0.35);
  --tile-bg: #0d0a08;
  --tile-border: #3d1a14;
}

html.theme-christmas,
html.theme-christmas body {
  background-color: var(--bg-deep) !important;
  color: var(--text);
}

html.theme-christmas body {
  background-image:
    radial-gradient(900px 520px at 8% -6%, rgba(196, 30, 58, 0.35) 0%, transparent 55%),
    radial-gradient(780px 460px at 94% 4%, rgba(22, 101, 52, 0.4) 0%, transparent 52%),
    radial-gradient(700px 400px at 50% 0%, rgba(212, 175, 55, 0.12) 0%, transparent 50%),
    radial-gradient(900px 500px at 50% 100%, rgba(80, 20, 18, 0.45) 0%, transparent 60%),
    linear-gradient(180deg, #241612 0%, var(--bg) 42%, var(--bg-deep) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-attachment: fixed !important;
}

/* ── Floating ornaments / trees / holly (rise) ── */
#ms-christmas-festive {
  display: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

html.theme-christmas #ms-christmas-festive {
  display: block;
}

/* Keep old snow id hidden if any stale layer exists */
#ms-christmas-snow {
  display: none !important;
}

/* Modal layering */
html.theme-christmas .modal,
html.theme-christmas #win-modal,
html.theme-christmas #result-modal {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 10050 !important;
  align-items: center !important;
  justify-content: center !important;
}

html.theme-christmas .modal:not([hidden]):not(.hidden),
html.theme-christmas #win-modal:not([hidden]):not(.hidden),
html.theme-christmas #result-modal:not([hidden]):not(.hidden) {
  display: flex !important;
}

html.theme-christmas .modal .modal-backdrop,
html.theme-christmas #win-modal .modal-backdrop,
html.theme-christmas #result-modal .modal-backdrop,
html.theme-christmas .modal > #win-modal-backdrop,
html.theme-christmas .modal > #result-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

html.theme-christmas body > .modal-backdrop,
html.theme-christmas body > #win-modal-backdrop,
html.theme-christmas body > #result-modal-backdrop,
html.theme-christmas .app > .modal-backdrop,
html.theme-christmas .app > #win-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10040 !important;
}

html.theme-christmas .modal-card {
  position: relative !important;
  z-index: 1 !important;
  margin: auto !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#ms-christmas-festive .ms-xmas {
  position: absolute;
  bottom: -3.5rem;
  left: 0;
  font-size: 1.55rem;
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity;
  animation-name: ms-xmas-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  user-select: none;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.35));
}

#ms-christmas-festive .ms-xmas.ms-xmas-soft {
  filter: drop-shadow(0 0 8px rgba(196, 30, 58, 0.4));
}

#ms-christmas-festive .ms-xmas.ms-xmas-deep {
  filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.4));
}

@keyframes ms-xmas-rise {
  0% {
    transform: translate3d(0, 0, 0) scale(0.85) rotate(-6deg);
    opacity: 0;
  }
  8% {
    opacity: 0.95;
  }
  50% {
    opacity: 0.85;
  }
  100% {
    transform: translate3d(var(--drift, 20px), -110vh, 0) scale(1.08)
      rotate(var(--spin, 12deg));
    opacity: 0;
  }
}

/* Legacy flake keyframes kept for any residual refs */
@keyframes ms-flake-fall {
  0% {
    transform: translate3d(0, 0, 0) scale(0.85) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 0.9;
  }
  100% {
    transform: translate3d(var(--drift, 24px), 110vh, 0) scale(1.05)
      rotate(var(--spin, 180deg));
    opacity: 0;
  }
}

/* ── Greeting under Mootsmog logo ── */
.christmas-greeting {
  display: none;
  margin: 0;
}

html.theme-christmas .christmas-greeting {
  display: block;
  margin: 0.35rem 0 0;
  font-family: "Segoe Script", "Apple Chancery", "Snell Roundhand", "Brush Script MT",
    "Lucida Handwriting", cursive;
  font-size: 1.15rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.01em;
  color: #f0d78c;
  text-align: center;
  text-shadow: 0 0 14px rgba(212, 175, 55, 0.4);
}

html.theme-christmas header > h1 + .valentines-greeting + .christmas-greeting,
html.theme-christmas header > h1 + .christmas-greeting,
html.theme-christmas header > h1 ~ .christmas-greeting {
  margin-top: 0.3rem;
  margin-bottom: 0.4rem;
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  background: linear-gradient(120deg, #c41e3a 0%, #d4af37 48%, #22c55e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.35));
}

.brand-stack .christmas-greeting {
  font-family: "Segoe Script", "Apple Chancery", "Snell Roundhand", "Brush Script MT",
    "Lucida Handwriting", cursive;
  font-size: 0.88rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  color: #f0d78c;
  text-align: left;
  margin-top: 2px;
  line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  #ms-christmas-festive .ms-xmas {
    animation: none !important;
    opacity: 0.45;
    bottom: auto;
    top: 60%;
  }
}

/* Win modal: light card on dark Christmas theme */
html.theme-christmas .modal-card {
  background: linear-gradient(
    145deg,
    rgba(255, 252, 247, 0.98) 0%,
    rgba(255, 243, 224, 0.96) 100%
  ) !important;
  border-color: rgba(196, 30, 58, 0.35) !important;
  color: #1a120e !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 20px 50px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(212, 175, 55, 0.2) !important;
}

html.theme-christmas .modal-card h2,
html.theme-christmas .modal-card #win-title,
html.theme-christmas .modal-card .win-stats strong,
html.theme-christmas .next-puzzle-countdown,
html.theme-christmas #next-puzzle-countdown {
  color: #1a120e !important;
}

html.theme-christmas .modal-card .muted,
html.theme-christmas .modal-card .win-stats,
html.theme-christmas .modal-card .mono,
html.theme-christmas .next-puzzle-note,
html.theme-christmas .next-puzzle-label {
  color: #7c4a28 !important;
}

html.theme-christmas .next-puzzle-note {
  background: rgba(254, 226, 226, 0.75) !important;
  border-color: rgba(196, 30, 58, 0.28) !important;
}

html.theme-christmas .modal-actions .primary,
html.theme-christmas .modal-actions button.primary {
  background: #c41e3a !important;
  color: #fff !important;
}

html.theme-christmas .modal-actions .btn-link,
html.theme-christmas .modal-actions a.btn-link {
  background: rgba(255, 252, 247, 0.95) !important;
  border-color: rgba(22, 101, 52, 0.4) !important;
  color: #166534 !important;
}

html.theme-christmas .modal-actions button:not(.primary):not(.btn-primary) {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
  color: #1a120e !important;
}

/* ─── Halloween ─────────────────────────────────────────────────── */
html.theme-halloween {
  --bg: #1a1008;
  --bg-deep: #0c0805;
  --panel: rgba(28, 16, 8, 0.82);
  --panel-solid: #1c120a;
  --panel-2: rgba(36, 20, 10, 0.9);
  --text: #fff4e6;
  --muted: #c4a07a;
  --accent: #f97316;
  --accent-2: #ea580c;
  --border: rgba(249, 115, 22, 0.3);
  --border-strong: rgba(234, 88, 12, 0.5);
  --glass-shine: linear-gradient(
    145deg,
    rgba(60, 32, 12, 0.95) 0%,
    rgba(30, 16, 8, 0.75) 42%,
    rgba(12, 8, 4, 0.65) 100%
  );
  --shadow:
    0 1px 0 rgba(255, 160, 80, 0.08) inset,
    0 10px 30px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-hover:
    0 1px 0 rgba(255, 180, 100, 0.12) inset,
    0 18px 40px rgba(249, 115, 22, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.35);
  --slime: #fb923c;
  --slime-bright: #fdba74;
  --slime-dim: #ea580c;
  --slime-glow: rgba(249, 115, 22, 0.4);
  --water: #fb923c;
  --water-glow: rgba(251, 146, 60, 0.4);
  --tile-bg: #0a0604;
  --tile-border: #3d220e;
}

html.theme-halloween,
html.theme-halloween body {
  background-color: var(--bg-deep) !important;
  color: var(--text);
}

html.theme-halloween body {
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(249, 115, 22, 0.28) 0%, transparent 55%),
    radial-gradient(800px 480px at 92% 6%, rgba(234, 88, 12, 0.2) 0%, transparent 50%),
    radial-gradient(900px 500px at 50% 100%, rgba(120, 50, 10, 0.35) 0%, transparent 60%),
    linear-gradient(180deg, #1f140a 0%, var(--bg) 40%, var(--bg-deep) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-attachment: fixed !important;
}

/* ── Floating ghosts (rise bottom → top) ── */
#ms-halloween-ghosts {
  display: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

html.theme-halloween #ms-halloween-ghosts {
  display: block;
}

/* Modal layering (same fix as other holiday themes) */
html.theme-halloween .modal,
html.theme-halloween #win-modal,
html.theme-halloween #result-modal {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 10050 !important;
  align-items: center !important;
  justify-content: center !important;
}

html.theme-halloween .modal:not([hidden]):not(.hidden),
html.theme-halloween #win-modal:not([hidden]):not(.hidden),
html.theme-halloween #result-modal:not([hidden]):not(.hidden) {
  display: flex !important;
}

html.theme-halloween .modal .modal-backdrop,
html.theme-halloween #win-modal .modal-backdrop,
html.theme-halloween #result-modal .modal-backdrop,
html.theme-halloween .modal > #win-modal-backdrop,
html.theme-halloween .modal > #result-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

html.theme-halloween body > .modal-backdrop,
html.theme-halloween body > #win-modal-backdrop,
html.theme-halloween body > #result-modal-backdrop,
html.theme-halloween .app > .modal-backdrop,
html.theme-halloween .app > #win-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10040 !important;
}

html.theme-halloween .modal-card {
  position: relative !important;
  z-index: 1 !important;
  margin: auto !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#ms-halloween-ghosts .ms-ghost {
  position: absolute;
  bottom: -3.5rem;
  left: 0;
  font-size: 1.85rem;
  line-height: 1;
  color: rgba(255, 250, 240, 0.92);
  opacity: 0;
  will-change: transform, opacity;
  animation-name: ms-ghost-float;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  user-select: none;
  filter: drop-shadow(0 0 10px rgba(255, 200, 120, 0.35));
}

#ms-halloween-ghosts .ms-ghost.ms-ghost-soft {
  color: rgba(255, 237, 213, 0.75);
  filter: drop-shadow(0 0 8px rgba(251, 146, 60, 0.25));
}

#ms-halloween-ghosts .ms-ghost.ms-ghost-deep {
  color: rgba(254, 215, 170, 0.95);
  filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.4));
}

@keyframes ms-ghost-float {
  0% {
    transform: translate3d(0, 0, 0) scale(0.85) rotate(-6deg);
    opacity: 0;
  }
  8% {
    opacity: 0.8;
  }
  40% {
    transform: translate3d(calc(var(--drift, 20px) * 0.4), -44vh, 0) scale(1)
      rotate(4deg);
    opacity: 0.72;
  }
  70% {
    opacity: 0.55;
  }
  100% {
    transform: translate3d(var(--drift, 20px), -110vh, 0) scale(1.08) rotate(10deg);
    opacity: 0;
  }
}

/* ── Greeting under Mootsmog logo ── */
.halloween-greeting {
  display: none;
  margin: 0;
}

html.theme-halloween .halloween-greeting {
  display: block;
  margin: 0.35rem 0 0;
  font-family: "Segoe Script", "Apple Chancery", "Snell Roundhand", "Brush Script MT",
    "Lucida Handwriting", cursive;
  font-size: 1.15rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  color: #f97316;
  text-align: center;
  text-shadow: 0 0 18px rgba(249, 115, 22, 0.35);
}

html.theme-halloween header > h1 + .valentines-greeting + .christmas-greeting + .halloween-greeting,
html.theme-halloween header > h1 + .halloween-greeting {
  margin-top: 0.3rem;
  margin-bottom: 0.4rem;
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  background: linear-gradient(120deg, #ea580c 0%, #f97316 45%, #fdba74 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.35));
}

.brand-stack .halloween-greeting {
  font-family: "Segoe Script", "Apple Chancery", "Snell Roundhand", "Brush Script MT",
    "Lucida Handwriting", cursive;
  font-size: 0.88rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  color: #f97316;
  text-align: left;
  margin-top: 2px;
  line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  #ms-halloween-ghosts .ms-ghost {
    animation: none !important;
    opacity: 0.4;
    bottom: auto;
    top: 65%;
  }
}

/* ─── New Year ──────────────────────────────────────────────────── */
html.theme-newyear {
  --bg: #0c1a32;
  --bg-deep: #060e1c;
  --panel: rgba(12, 28, 52, 0.82);
  --panel-solid: #0f1f3a;
  --panel-2: rgba(18, 36, 64, 0.9);
  --text: #f5ecd0;
  --muted: #a8b8d0;
  --accent: #d4af37;
  --accent-2: #c9a227;
  --border: rgba(212, 175, 55, 0.32);
  --border-strong: rgba(240, 215, 140, 0.48);
  --glass-shine: linear-gradient(
    145deg,
    rgba(30, 50, 90, 0.95) 0%,
    rgba(12, 28, 52, 0.75) 42%,
    rgba(6, 14, 28, 0.7) 100%
  );
  --shadow:
    0 1px 0 rgba(240, 215, 140, 0.08) inset,
    0 10px 30px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-hover:
    0 1px 0 rgba(240, 215, 140, 0.12) inset,
    0 18px 40px rgba(212, 175, 55, 0.16),
    0 4px 12px rgba(0, 0, 0, 0.35);
  --slime: #f0d78c;
  --slime-bright: #f7e7b0;
  --slime-dim: #c9a227;
  --slime-glow: rgba(212, 175, 55, 0.4);
  --water: #7eb6ff;
  --water-glow: rgba(126, 182, 255, 0.35);
  --tile-bg: #060e1c;
  --tile-border: #1a3058;
}

html.theme-newyear,
html.theme-newyear body {
  background-color: var(--bg-deep) !important;
  color: var(--text);
}

html.theme-newyear body {
  background-image:
    radial-gradient(900px 520px at 14% -6%, rgba(40, 70, 130, 0.55) 0%, transparent 55%),
    radial-gradient(780px 460px at 90% 4%, rgba(212, 175, 55, 0.14) 0%, transparent 50%),
    radial-gradient(900px 500px at 50% 100%, rgba(20, 40, 80, 0.55) 0%, transparent 60%),
    linear-gradient(180deg, #0f2040 0%, var(--bg) 42%, var(--bg-deep) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-attachment: fixed !important;
}

/* ── Fireworks (visual only - no audio) ── */
#ms-newyear-fireworks {
  display: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

html.theme-newyear #ms-newyear-fireworks {
  display: block;
}

/* Modal layering */
html.theme-newyear .modal,
html.theme-newyear #win-modal,
html.theme-newyear #result-modal {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 10050 !important;
  align-items: center !important;
  justify-content: center !important;
}

html.theme-newyear .modal:not([hidden]):not(.hidden),
html.theme-newyear #win-modal:not([hidden]):not(.hidden),
html.theme-newyear #result-modal:not([hidden]):not(.hidden) {
  display: flex !important;
}

html.theme-newyear .modal .modal-backdrop,
html.theme-newyear #win-modal .modal-backdrop,
html.theme-newyear #result-modal .modal-backdrop,
html.theme-newyear .modal > #win-modal-backdrop,
html.theme-newyear .modal > #result-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

html.theme-newyear body > .modal-backdrop,
html.theme-newyear body > #win-modal-backdrop,
html.theme-newyear body > #result-modal-backdrop,
html.theme-newyear .app > .modal-backdrop,
html.theme-newyear .app > #win-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10040 !important;
}

html.theme-newyear .modal-card {
  position: relative !important;
  z-index: 1 !important;
  margin: auto !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.ms-fw {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  animation-name: ms-fw-cycle;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.ms-fw-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #f0d78c;
  box-shadow: 0 0 8px 2px rgba(240, 215, 140, 0.75);
  opacity: 0;
  animation-name: ms-fw-spark;
  animation-timing-function: cubic-bezier(0.15, 0.75, 0.35, 1);
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

.ms-fw-spark.ms-fw-gold {
  background: #d4af37;
  box-shadow: 0 0 10px 2px rgba(212, 175, 55, 0.85);
}

.ms-fw-spark.ms-fw-champagne {
  background: #f7e7b0;
  box-shadow: 0 0 10px 2px rgba(247, 231, 176, 0.8);
}

.ms-fw-spark.ms-fw-blue {
  background: #7eb6ff;
  box-shadow: 0 0 10px 2px rgba(126, 182, 255, 0.8);
}

.ms-fw-spark.ms-fw-white {
  background: #fffef8;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.85);
}

/* Core flash at burst */
.ms-fw-core {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #fffef8;
  box-shadow: 0 0 18px 6px rgba(240, 215, 140, 0.7);
  opacity: 0;
  animation-name: ms-fw-core;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

@keyframes ms-fw-cycle {
  0%,
  100% {
    opacity: 1;
  }
}

@keyframes ms-fw-spark {
  0%,
  12% {
    transform: translate3d(0, 0, 0) scale(0.4);
    opacity: 0;
  }
  18% {
    opacity: 1;
    transform: translate3d(
        calc(var(--dx) * 0.15),
        calc(var(--dy) * 0.15),
        0
      )
      scale(1.15);
  }
  55% {
    opacity: 0.85;
  }
  100% {
    transform: translate3d(var(--dx), var(--dy), 0) scale(0.15);
    opacity: 0;
  }
}

@keyframes ms-fw-core {
  0%,
  12% {
    transform: scale(0.2);
    opacity: 0;
  }
  18% {
    transform: scale(1.6);
    opacity: 1;
  }
  40% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/* ── Greeting under Mootsmog logo ── */
.newyear-greeting {
  display: none;
  margin: 0;
}

html.theme-newyear .newyear-greeting {
  display: block;
  margin: 0.35rem 0 0;
  font-family: "Segoe Script", "Apple Chancery", "Snell Roundhand", "Brush Script MT",
    "Lucida Handwriting", cursive;
  font-size: 1.15rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  color: #f0d78c;
  text-align: center;
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.4);
}

html.theme-newyear
  header
  > h1
  + .valentines-greeting
  + .christmas-greeting
  + .halloween-greeting
  + .newyear-greeting,
html.theme-newyear header > h1 + .newyear-greeting {
  margin-top: 0.3rem;
  margin-bottom: 0.4rem;
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  background: linear-gradient(120deg, #c9a227 0%, #f0d78c 48%, #fff8dc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.4));
}

.brand-stack .newyear-greeting {
  font-family: "Segoe Script", "Apple Chancery", "Snell Roundhand", "Brush Script MT",
    "Lucida Handwriting", cursive;
  font-size: 0.88rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  color: #f0d78c;
  text-align: left;
  margin-top: 2px;
  line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  #ms-newyear-fireworks .ms-fw-spark,
  #ms-newyear-fireworks .ms-fw-core {
    animation: none !important;
    opacity: 0.45;
  }
  #ms-newyear-fireworks .ms-fw-spark {
    transform: translate3d(
      calc(var(--dx) * 0.35),
      calc(var(--dy) * 0.35),
      0
    );
  }
}

/* ─── International Women's Day ─────────────────────────────────── */
html.theme-womensday {
  --bg: #f6f0ff;
  --bg-deep: #ebe0ff;
  --panel: rgba(255, 255, 255, 0.74);
  --panel-solid: #ffffff;
  --panel-2: rgba(250, 246, 255, 0.9);
  --text: #2e1065;
  --muted: #6b5a8a;
  --accent: #7c3aed;
  --accent-2: #6d28d9;
  --border: rgba(124, 58, 237, 0.24);
  --border-strong: rgba(109, 40, 217, 0.4);
  --glass-shine: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(245, 238, 255, 0.7) 42%,
    rgba(221, 214, 254, 0.5) 100%
  );
  --shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 10px 30px rgba(109, 40, 217, 0.1),
    0 2px 8px rgba(46, 16, 101, 0.05);
  --shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 18px 40px rgba(124, 58, 237, 0.16),
    0 4px 12px rgba(46, 16, 101, 0.08);
  --slime: #a78bfa;
  --slime-bright: #c4b5fd;
  --slime-dim: #7c3aed;
  --slime-glow: rgba(167, 139, 250, 0.4);
  --water: #a78bfa;
  --water-glow: rgba(167, 139, 250, 0.4);
  --tile-bg: #2e1065;
  --tile-border: #4c1d95;
}

html.theme-womensday,
html.theme-womensday body {
  background-color: var(--bg-deep) !important;
}

html.theme-womensday body {
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(196, 181, 253, 0.55) 0%, transparent 55%),
    radial-gradient(800px 480px at 92% 6%, rgba(167, 139, 250, 0.4) 0%, transparent 50%),
    radial-gradient(900px 500px at 50% 100%, rgba(221, 214, 254, 0.55) 0%, transparent 60%),
    linear-gradient(180deg, #faf7ff 0%, var(--bg) 40%, var(--bg-deep) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-attachment: fixed !important;
}

/* ── Floating flowers (rise bottom → top) ── */
#ms-womensday-flowers {
  display: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

html.theme-womensday #ms-womensday-flowers {
  display: block;
}

/* Modal layering */
html.theme-womensday .modal,
html.theme-womensday #win-modal,
html.theme-womensday #result-modal {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 10050 !important;
  align-items: center !important;
  justify-content: center !important;
}

html.theme-womensday .modal:not([hidden]):not(.hidden),
html.theme-womensday #win-modal:not([hidden]):not(.hidden),
html.theme-womensday #result-modal:not([hidden]):not(.hidden) {
  display: flex !important;
}

html.theme-womensday .modal .modal-backdrop,
html.theme-womensday #win-modal .modal-backdrop,
html.theme-womensday #result-modal .modal-backdrop,
html.theme-womensday .modal > #win-modal-backdrop,
html.theme-womensday .modal > #result-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

html.theme-womensday body > .modal-backdrop,
html.theme-womensday body > #win-modal-backdrop,
html.theme-womensday body > #result-modal-backdrop,
html.theme-womensday .app > .modal-backdrop,
html.theme-womensday .app > #win-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10040 !important;
}

html.theme-womensday .modal-card {
  position: relative !important;
  z-index: 1 !important;
  margin: auto !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#ms-womensday-flowers .ms-flower {
  position: absolute;
  bottom: -3.5rem;
  left: 0;
  font-size: 1.6rem;
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity;
  animation-name: ms-flower-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  user-select: none;
  filter: drop-shadow(0 3px 6px rgba(109, 40, 217, 0.22));
}

@keyframes ms-flower-rise {
  0% {
    transform: translate3d(0, 0, 0) scale(0.8) rotate(-12deg);
    opacity: 0;
  }
  8% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.78;
  }
  100% {
    transform: translate3d(var(--drift, 24px), -110vh, 0) scale(1.08)
      rotate(var(--spin, 20deg));
    opacity: 0;
  }
}

/* ── Greeting under Mootsmog logo ── */
.womensday-greeting {
  display: none;
  margin: 0;
}

html.theme-womensday .womensday-greeting {
  display: block;
  margin: 0.35rem 0 0;
  font-family: "Segoe Script", "Apple Chancery", "Snell Roundhand", "Brush Script MT",
    "Lucida Handwriting", cursive;
  font-size: 1.05rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.01em;
  color: #7c3aed;
  text-align: center;
}

html.theme-womensday
  header
  > h1
  + .valentines-greeting
  + .christmas-greeting
  + .halloween-greeting
  + .newyear-greeting
  + .womensday-greeting,
html.theme-womensday header > h1 + .womensday-greeting {
  margin-top: 0.3rem;
  margin-bottom: 0.4rem;
  font-size: clamp(1.05rem, 2.8vw, 1.35rem);
  background: linear-gradient(120deg, #5b21b6 0%, #7c3aed 45%, #c084fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-stack .womensday-greeting {
  font-family: "Segoe Script", "Apple Chancery", "Snell Roundhand", "Brush Script MT",
    "Lucida Handwriting", cursive;
  font-size: 0.82rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.01em;
  color: #7c3aed;
  text-align: left;
  margin-top: 2px;
  line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  #ms-womensday-flowers .ms-flower {
    animation: none !important;
    opacity: 0.4;
    bottom: auto;
    top: 68%;
  }
}

/* ─── Lunar New Year ────────────────────────────────────────────── */
html.theme-lunarnewyear {
  --bg: #4a0e12;
  --bg-deep: #2a080a;
  --panel: rgba(70, 14, 18, 0.82);
  --panel-solid: #3d0c10;
  --panel-2: rgba(90, 18, 22, 0.9);
  --text: #fff4e0;
  --muted: #e8b4a0;
  --accent: #eab308;
  --accent-2: #ca8a04;
  --border: rgba(234, 179, 8, 0.35);
  --border-strong: rgba(250, 204, 21, 0.5);
  --glass-shine: linear-gradient(
    145deg,
    rgba(120, 30, 30, 0.95) 0%,
    rgba(70, 14, 18, 0.8) 42%,
    rgba(40, 8, 10, 0.75) 100%
  );
  --shadow:
    0 1px 0 rgba(250, 204, 21, 0.1) inset,
    0 10px 30px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-hover:
    0 1px 0 rgba(250, 204, 21, 0.14) inset,
    0 18px 40px rgba(234, 179, 8, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.35);
  --slime: #facc15;
  --slime-bright: #fde047;
  --slime-dim: #ca8a04;
  --slime-glow: rgba(234, 179, 8, 0.4);
  --water: #f87171;
  --water-glow: rgba(248, 113, 113, 0.4);
  --tile-bg: #2a080a;
  --tile-border: #7f1d1d;
}

html.theme-lunarnewyear,
html.theme-lunarnewyear body {
  background-color: var(--bg-deep) !important;
  color: var(--text);
}

html.theme-lunarnewyear body {
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(185, 28, 28, 0.55) 0%, transparent 55%),
    radial-gradient(800px 480px at 92% 6%, rgba(234, 179, 8, 0.18) 0%, transparent 50%),
    radial-gradient(900px 500px at 50% 100%, rgba(127, 29, 29, 0.5) 0%, transparent 60%),
    linear-gradient(180deg, #5c1218 0%, var(--bg) 40%, var(--bg-deep) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-attachment: fixed !important;
}

/* ── Floating lanterns (rise bottom → top) ── */
#ms-lunarnewyear-lanterns {
  display: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

html.theme-lunarnewyear #ms-lunarnewyear-lanterns {
  display: block;
}

/* Modal layering */
html.theme-lunarnewyear .modal,
html.theme-lunarnewyear #win-modal,
html.theme-lunarnewyear #result-modal {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 10050 !important;
  align-items: center !important;
  justify-content: center !important;
}

html.theme-lunarnewyear .modal:not([hidden]):not(.hidden),
html.theme-lunarnewyear #win-modal:not([hidden]):not(.hidden),
html.theme-lunarnewyear #result-modal:not([hidden]):not(.hidden) {
  display: flex !important;
}

html.theme-lunarnewyear .modal .modal-backdrop,
html.theme-lunarnewyear #win-modal .modal-backdrop,
html.theme-lunarnewyear #result-modal .modal-backdrop,
html.theme-lunarnewyear .modal > #win-modal-backdrop,
html.theme-lunarnewyear .modal > #result-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

html.theme-lunarnewyear body > .modal-backdrop,
html.theme-lunarnewyear body > #win-modal-backdrop,
html.theme-lunarnewyear body > #result-modal-backdrop,
html.theme-lunarnewyear .app > .modal-backdrop,
html.theme-lunarnewyear .app > #win-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10040 !important;
}

html.theme-lunarnewyear .modal-card {
  position: relative !important;
  z-index: 1 !important;
  margin: auto !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#ms-lunarnewyear-lanterns .ms-lantern {
  position: absolute;
  bottom: -3.5rem;
  left: 0;
  font-size: 1.75rem;
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity;
  animation-name: ms-lantern-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  user-select: none;
  filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.35));
}

#ms-lunarnewyear-lanterns .ms-lantern.ms-lantern-soft {
  filter: drop-shadow(0 0 10px rgba(248, 113, 113, 0.4));
  opacity: 0.9;
}

#ms-lunarnewyear-lanterns .ms-lantern.ms-lantern-deep {
  filter: drop-shadow(0 0 14px rgba(234, 179, 8, 0.55));
}

@keyframes ms-lantern-rise {
  0% {
    transform: translate3d(0, 0, 0) scale(0.85) rotate(-4deg);
    opacity: 0;
  }
  8% {
    opacity: 0.95;
  }
  45% {
    transform: translate3d(calc(var(--drift, 16px) * 0.45), -48vh, 0) scale(1)
      rotate(2deg);
    opacity: 0.88;
  }
  100% {
    transform: translate3d(var(--drift, 16px), -110vh, 0) scale(1.08)
      rotate(var(--spin, 8deg));
    opacity: 0;
  }
}

/* ── Greeting under Mootsmog logo ── */
.lunarnewyear-greeting {
  display: none;
  margin: 0;
}

html.theme-lunarnewyear .lunarnewyear-greeting {
  display: block;
  margin: 0.35rem 0 0;
  font-family: "Segoe Script", "Apple Chancery", "Snell Roundhand", "Brush Script MT",
    "Lucida Handwriting", cursive;
  font-size: 1.15rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  color: #facc15;
  text-align: center;
  text-shadow: 0 0 16px rgba(250, 204, 21, 0.4);
}

html.theme-lunarnewyear
  header
  > h1
  + .valentines-greeting
  + .christmas-greeting
  + .halloween-greeting
  + .newyear-greeting
  + .womensday-greeting
  + .lunarnewyear-greeting,
html.theme-lunarnewyear header > h1 + .lunarnewyear-greeting {
  margin-top: 0.3rem;
  margin-bottom: 0.4rem;
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  background: linear-gradient(120deg, #ca8a04 0%, #facc15 45%, #fef08a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.4));
}

.brand-stack .lunarnewyear-greeting {
  font-family: "Segoe Script", "Apple Chancery", "Snell Roundhand", "Brush Script MT",
    "Lucida Handwriting", cursive;
  font-size: 0.88rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  color: #facc15;
  text-align: left;
  margin-top: 2px;
  line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  #ms-lunarnewyear-lanterns .ms-lantern {
    animation: none !important;
    opacity: 0.45;
    bottom: auto;
    top: 62%;
  }
}

/* ─── Full Moon ─────────────────────────────────────────────────── */
html.theme-fullmoon {
  --bg: #0f1628;
  --bg-deep: #080c18;
  --panel: rgba(14, 22, 40, 0.82);
  --panel-solid: #121a2e;
  --panel-2: rgba(22, 32, 52, 0.9);
  --text: #e8eef8;
  --muted: #9aadc8;
  --accent: #c5d0e6;
  --accent-2: #a8b8d4;
  --border: rgba(197, 208, 230, 0.28);
  --border-strong: rgba(245, 230, 168, 0.4);
  --glass-shine: linear-gradient(
    145deg,
    rgba(30, 42, 70, 0.95) 0%,
    rgba(14, 22, 40, 0.8) 42%,
    rgba(8, 12, 24, 0.75) 100%
  );
  --shadow:
    0 1px 0 rgba(245, 230, 168, 0.06) inset,
    0 10px 30px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-hover:
    0 1px 0 rgba(245, 230, 168, 0.1) inset,
    0 18px 40px rgba(197, 208, 230, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.35);
  --slime: #e8eef8;
  --slime-bright: #f5e6a8;
  --slime-dim: #a8b8d4;
  --slime-glow: rgba(245, 230, 168, 0.3);
  --water: #8ba3c7;
  --water-glow: rgba(139, 163, 199, 0.35);
  --tile-bg: #080c18;
  --tile-border: #1e2a44;
}

html.theme-fullmoon,
html.theme-fullmoon body {
  background-color: var(--bg-deep) !important;
  color: var(--text);
}

html.theme-fullmoon body {
  background-image:
    radial-gradient(700px 420px at 88% 10%, rgba(245, 230, 168, 0.12) 0%, transparent 55%),
    radial-gradient(900px 520px at 12% -6%, rgba(40, 60, 100, 0.45) 0%, transparent 55%),
    radial-gradient(900px 500px at 50% 100%, rgba(20, 30, 55, 0.55) 0%, transparent 60%),
    linear-gradient(180deg, #121a2e 0%, var(--bg) 42%, var(--bg-deep) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-attachment: fixed !important;
}

/* ── Night sky: glowing full moon + twinkling stars ── */
#ms-fullmoon-sky {
  display: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

html.theme-fullmoon #ms-fullmoon-sky {
  display: block;
}

/* Modal layering */
html.theme-fullmoon .modal,
html.theme-fullmoon #win-modal,
html.theme-fullmoon #result-modal {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 10050 !important;
  align-items: center !important;
  justify-content: center !important;
}

html.theme-fullmoon .modal:not([hidden]):not(.hidden),
html.theme-fullmoon #win-modal:not([hidden]):not(.hidden),
html.theme-fullmoon #result-modal:not([hidden]):not(.hidden) {
  display: flex !important;
}

html.theme-fullmoon .modal .modal-backdrop,
html.theme-fullmoon #win-modal .modal-backdrop,
html.theme-fullmoon #result-modal .modal-backdrop,
html.theme-fullmoon .modal > #win-modal-backdrop,
html.theme-fullmoon .modal > #result-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

html.theme-fullmoon body > .modal-backdrop,
html.theme-fullmoon body > #win-modal-backdrop,
html.theme-fullmoon body > #result-modal-backdrop,
html.theme-fullmoon .app > .modal-backdrop,
html.theme-fullmoon .app > #win-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10040 !important;
}

html.theme-fullmoon .modal-card {
  position: relative !important;
  z-index: 1 !important;
  margin: auto !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.ms-fullmoon-glow {
  position: absolute;
  /* Sit below the top bar so the moon glow doesn’t cover Login on X */
  top: 2%;
  right: 4%;
  width: min(42vw, 320px);
  height: min(42vw, 320px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(245, 230, 168, 0.45) 0%,
    rgba(245, 230, 168, 0.18) 35%,
    rgba(197, 208, 230, 0.06) 55%,
    transparent 72%
  );
  filter: blur(2px);
  animation: ms-moon-pulse 8s ease-in-out infinite;
}

.ms-fullmoon-disc {
  position: absolute;
  top: 10%;
  right: 10%;
  width: min(18vw, 140px);
  height: min(18vw, 140px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, #fffef5 0%, #f5e6a8 28%, #e8d99a 55%, #c9b87a 100%);
  box-shadow:
    0 0 40px 12px rgba(245, 230, 168, 0.45),
    0 0 80px 28px rgba(245, 230, 168, 0.2),
    inset -8px -6px 18px rgba(120, 100, 50, 0.18),
    inset 6px 4px 12px rgba(255, 255, 255, 0.35);
  animation: ms-moon-pulse 8s ease-in-out infinite;
}

/* Extra clearance under the hub topbar on phones */
@media (max-width: 600px) {
  .ms-fullmoon-glow {
    top: 6%;
    right: 2%;
    width: min(48vw, 220px);
    height: min(48vw, 220px);
  }
  .ms-fullmoon-disc {
    top: 14%;
    right: 6%;
    width: min(22vw, 96px);
    height: min(22vw, 96px);
  }
}

/* Soft crater suggestion */
.ms-fullmoon-disc::after {
  content: "";
  position: absolute;
  inset: 22% 28% auto auto;
  width: 18%;
  height: 18%;
  border-radius: 50%;
  background: rgba(180, 160, 100, 0.18);
  box-shadow:
    -18px 22px 0 -2px rgba(180, 160, 100, 0.12),
    14px 28px 0 -4px rgba(180, 160, 100, 0.1);
}

@keyframes ms-moon-pulse {
  0%,
  100% {
    filter: brightness(1);
    opacity: 1;
  }
  50% {
    filter: brightness(1.06);
    opacity: 0.96;
  }
}

.ms-star {
  position: absolute;
  border-radius: 50%;
  background: #e8eef8;
  box-shadow: 0 0 4px 1px rgba(232, 238, 248, 0.7);
  opacity: 0.35;
  animation-name: ms-star-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: opacity, transform;
}

.ms-star.ms-star-bright {
  background: #f5e6a8;
  box-shadow: 0 0 6px 2px rgba(245, 230, 168, 0.75);
}

.ms-star.ms-star-dim {
  background: #a8b8d4;
  box-shadow: 0 0 3px 0 rgba(168, 184, 212, 0.5);
}

@keyframes ms-star-twinkle {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.85);
  }
  40% {
    opacity: 0.95;
    transform: scale(1.15);
  }
  70% {
    opacity: 0.45;
    transform: scale(1);
  }
}

/* ── Greeting under Mootsmog logo ── */
.fullmoon-greeting {
  display: none;
  margin: 0;
}

html.theme-fullmoon .fullmoon-greeting {
  display: block;
  margin: 0.35rem 0 0;
  font-family: "Segoe Script", "Apple Chancery", "Snell Roundhand", "Brush Script MT",
    "Lucida Handwriting", cursive;
  font-size: 1.15rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  color: #f5e6a8;
  text-align: center;
  text-shadow: 0 0 16px rgba(245, 230, 168, 0.35);
}

html.theme-fullmoon
  header
  > h1
  + .valentines-greeting
  + .christmas-greeting
  + .halloween-greeting
  + .newyear-greeting
  + .womensday-greeting
  + .lunarnewyear-greeting
  + .fullmoon-greeting,
html.theme-fullmoon header > h1 + .fullmoon-greeting {
  margin-top: 0.3rem;
  margin-bottom: 0.4rem;
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  background: linear-gradient(120deg, #a8b8d4 0%, #e8eef8 40%, #f5e6a8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(245, 230, 168, 0.3));
}

.brand-stack .fullmoon-greeting {
  font-family: "Segoe Script", "Apple Chancery", "Snell Roundhand", "Brush Script MT",
    "Lucida Handwriting", cursive;
  font-size: 0.88rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  color: #f5e6a8;
  text-align: left;
  margin-top: 2px;
  line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  #ms-fullmoon-sky .ms-star {
    animation: none !important;
    opacity: 0.55;
  }
  .ms-fullmoon-glow,
  .ms-fullmoon-disc {
    animation: none !important;
  }
}

/* ─── Easter ────────────────────────────────────────────────────── */
/* Soft spring pastels: cream, mint, lilac, peach, butter yellow */
html.theme-easter {
  --bg: #fff9f2;
  --bg-deep: #f3f8f0;
  --panel: rgba(255, 255, 255, 0.76);
  --panel-solid: #ffffff;
  --panel-2: rgba(255, 252, 248, 0.9);
  --text: #3d2f45;
  --muted: #7a6b7a;
  --accent: #e8a0bf;
  --accent-2: #7ec8a3;
  --border: rgba(232, 160, 191, 0.3);
  --border-strong: rgba(126, 200, 163, 0.42);
  --glass-shine: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 245, 250, 0.7) 40%,
    rgba(236, 252, 243, 0.55) 100%
  );
  --shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 10px 30px rgba(180, 140, 170, 0.1),
    0 2px 8px rgba(100, 80, 100, 0.05);
  --shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 18px 40px rgba(232, 160, 191, 0.16),
    0 4px 12px rgba(126, 200, 163, 0.1);
  --slime: #f0c86a;
  --slime-bright: #f5d78e;
  --slime-dim: #e8a0bf;
  --slime-glow: rgba(240, 200, 106, 0.35);
  --water: #a8d8ea;
  --water-glow: rgba(168, 216, 234, 0.4);
  --tile-bg: #3d2f45;
  --tile-border: #5c4a66;
}

html.theme-easter,
html.theme-easter body {
  background-color: var(--bg-deep) !important;
}

html.theme-easter body {
  background-image:
    radial-gradient(900px 520px at 10% -8%, rgba(255, 214, 232, 0.55) 0%, transparent 55%),
    radial-gradient(800px 480px at 92% 4%, rgba(186, 230, 200, 0.45) 0%, transparent 50%),
    radial-gradient(700px 400px at 50% 0%, rgba(255, 236, 179, 0.35) 0%, transparent 50%),
    radial-gradient(900px 500px at 50% 100%, rgba(214, 232, 255, 0.4) 0%, transparent 60%),
    linear-gradient(180deg, #fffdf8 0%, var(--bg) 40%, var(--bg-deep) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-attachment: fixed !important;
}

/* ── Floating eggs, chicks & spring bits ── */
#ms-easter-eggs {
  display: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

html.theme-easter #ms-easter-eggs {
  display: block;
}

/* Modal layering */
html.theme-easter .modal,
html.theme-easter #win-modal,
html.theme-easter #result-modal {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 10050 !important;
  align-items: center !important;
  justify-content: center !important;
}

html.theme-easter .modal:not([hidden]):not(.hidden),
html.theme-easter #win-modal:not([hidden]):not(.hidden),
html.theme-easter #result-modal:not([hidden]):not(.hidden) {
  display: flex !important;
}

html.theme-easter .modal .modal-backdrop,
html.theme-easter #win-modal .modal-backdrop,
html.theme-easter #result-modal .modal-backdrop,
html.theme-easter .modal > #win-modal-backdrop,
html.theme-easter .modal > #result-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

html.theme-easter body > .modal-backdrop,
html.theme-easter body > #win-modal-backdrop,
html.theme-easter body > #result-modal-backdrop,
html.theme-easter .app > .modal-backdrop,
html.theme-easter .app > #win-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10040 !important;
}

html.theme-easter .modal-card {
  position: relative !important;
  z-index: 1 !important;
  margin: auto !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#ms-easter-eggs .ms-easter {
  position: absolute;
  bottom: -3.5rem;
  left: 0;
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity;
  animation-name: ms-easter-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  user-select: none;
  filter: drop-shadow(0 3px 6px rgba(120, 90, 120, 0.18));
}

#ms-easter-eggs .ms-easter.ms-easter-soft {
  filter: drop-shadow(0 2px 8px rgba(232, 160, 191, 0.35));
}

#ms-easter-eggs .ms-easter.ms-easter-deep {
  filter: drop-shadow(0 2px 8px rgba(126, 200, 163, 0.35));
}

@keyframes ms-easter-rise {
  0% {
    transform: translate3d(0, 0, 0) scale(0.8) rotate(-10deg);
    opacity: 0;
  }
  8% {
    opacity: 0.92;
  }
  40% {
    transform: translate3d(calc(var(--drift, 20px) * 0.4), -42vh, 0) scale(1)
      rotate(6deg);
    opacity: 0.85;
  }
  100% {
    transform: translate3d(var(--drift, 20px), -110vh, 0) scale(1.08)
      rotate(var(--spin, 18deg));
    opacity: 0;
  }
}

/* ── Greeting under Mootsmog logo ── */
.easter-greeting {
  display: none;
  margin: 0;
}

html.theme-easter .easter-greeting {
  display: block;
  margin: 0.35rem 0 0;
  font-family: "Segoe Script", "Apple Chancery", "Snell Roundhand", "Brush Script MT",
    "Lucida Handwriting", cursive;
  font-size: 1.15rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.01em;
  color: #d4789c;
  text-align: center;
}

html.theme-easter
  header
  > h1
  + .valentines-greeting
  + .christmas-greeting
  + .halloween-greeting
  + .newyear-greeting
  + .womensday-greeting
  + .lunarnewyear-greeting
  + .fullmoon-greeting
  + .easter-greeting,
html.theme-easter header > h1 + .easter-greeting {
  margin-top: 0.3rem;
  margin-bottom: 0.4rem;
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  background: linear-gradient(120deg, #d4789c 0%, #7ec8a3 48%, #f0c86a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-stack .easter-greeting {
  font-family: "Segoe Script", "Apple Chancery", "Snell Roundhand", "Brush Script MT",
    "Lucida Handwriting", cursive;
  font-size: 0.88rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.01em;
  color: #d4789c;
  text-align: left;
  margin-top: 2px;
  line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  #ms-easter-eggs .ms-easter {
    animation: none !important;
    opacity: 0.4;
    bottom: auto;
    top: 68%;
  }
}

/* ─── St. Patrick's Day ─────────────────────────────────────────── */
html.theme-stpatricks {
  --bg: #f0faf3;
  --bg-deep: #e2f3e8;
  --panel: rgba(255, 255, 255, 0.76);
  --panel-solid: #ffffff;
  --panel-2: rgba(245, 252, 247, 0.9);
  --text: #143d28;
  --muted: #4a7a5c;
  --accent: #16a34a;
  --accent-2: #15803d;
  --border: rgba(22, 163, 74, 0.28);
  --border-strong: rgba(21, 128, 61, 0.42);
  --glass-shine: linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(220,252,231,0.7) 42%, rgba(187,247,208,0.5) 100%);
  --shadow: 0 1px 0 rgba(255,255,255,0.92) inset, 0 10px 30px rgba(22,163,74,0.1), 0 2px 8px rgba(20,61,40,0.05);
  --shadow-hover: 0 1px 0 rgba(255,255,255,0.96) inset, 0 18px 40px rgba(22,163,74,0.16), 0 4px 12px rgba(20,61,40,0.08);
  --slime: #4ade80; --slime-bright: #86efac; --slime-dim: #16a34a; --slime-glow: rgba(74,222,128,0.35);
  --water: #4ade80; --water-glow: rgba(74,222,128,0.4);
  --tile-bg: #143d28; --tile-border: #1e5c3a;
}
html.theme-stpatricks, html.theme-stpatricks body { background-color: var(--bg-deep) !important; }
html.theme-stpatricks body {
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(134,239,172,0.5) 0%, transparent 55%),
    radial-gradient(800px 480px at 90% 6%, rgba(74,222,128,0.28) 0%, transparent 50%),
    linear-gradient(180deg, #f7fdf9 0%, var(--bg) 40%, var(--bg-deep) 100%) !important;
  background-repeat: no-repeat !important; background-size: 100% 100% !important; background-attachment: fixed !important;
}
#ms-stpatricks-clover { display: none; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
html.theme-stpatricks #ms-stpatricks-clover { display: block; }
html.theme-stpatricks .modal, html.theme-stpatricks #win-modal, html.theme-stpatricks #result-modal {
  position: fixed !important; inset: 0 !important; z-index: 10050 !important; align-items: center !important; justify-content: center !important;
}
html.theme-stpatricks .modal:not([hidden]):not(.hidden), html.theme-stpatricks #win-modal:not([hidden]):not(.hidden), html.theme-stpatricks #result-modal:not([hidden]):not(.hidden) { display: flex !important; }
html.theme-stpatricks .modal-card { position: relative !important; z-index: 1 !important; filter: none !important; backdrop-filter: none !important; }
#ms-stpatricks-clover .ms-shamrock {
  position: absolute; bottom: -3.5rem; left: 0; font-size: 1.5rem; line-height: 1; opacity: 0;
  animation-name: ms-rise-generic; animation-timing-function: linear; animation-iteration-count: infinite;
  filter: drop-shadow(0 3px 6px rgba(21,128,61,0.22));
}
@keyframes ms-rise-generic {
  0% { transform: translate3d(0,0,0) scale(0.85) rotate(-8deg); opacity: 0; }
  8% { opacity: 0.9; }
  100% { transform: translate3d(var(--drift,20px),-110vh,0) scale(1.05) rotate(var(--spin,14deg)); opacity: 0; }
}
.stpatricks-greeting { display: none; margin: 0; }
html.theme-stpatricks .stpatricks-greeting {
  display: block; margin: 0.35rem 0 0;
  font-family: "Segoe Script","Apple Chancery","Snell Roundhand","Brush Script MT","Lucida Handwriting",cursive;
  font-size: 1.15rem; font-weight: 600; font-style: italic; color: #15803d; text-align: center;
}
html.theme-stpatricks header > h1 ~ .stpatricks-greeting {
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  background: linear-gradient(120deg, #14532d 0%, #16a34a 50%, #4ade80 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-stack .stpatricks-greeting {
  font-family: "Segoe Script","Apple Chancery","Snell Roundhand","Brush Script MT","Lucida Handwriting",cursive;
  font-size: 0.88rem; font-weight: 600; font-style: italic; color: #15803d; text-align: left; margin-top: 2px; line-height: 1.25;
}

/* ─── April Fools ───────────────────────────────────────────────── */
html.theme-aprilfools {
  --bg: #fff7ed; --bg-deep: #ffedd5;
  --panel: rgba(255,255,255,0.78); --panel-solid: #fff; --panel-2: rgba(255,251,235,0.92);
  --text: #431407; --muted: #9a3412;
  --accent: #f97316; --accent-2: #db2777;
  --border: rgba(249,115,22,0.28); --border-strong: rgba(219,39,119,0.4);
  --glass-shine: linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(254,243,199,0.7) 40%, rgba(252,231,243,0.55) 100%);
  --shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 30px rgba(249,115,22,0.12), 0 2px 8px rgba(67,20,7,0.05);
  --shadow-hover: 0 1px 0 rgba(255,255,255,0.95) inset, 0 18px 40px rgba(219,39,119,0.14), 0 4px 12px rgba(249,115,22,0.1);
  --slime: #fbbf24; --slime-bright: #fde047; --slime-dim: #f97316; --slime-glow: rgba(251,191,36,0.4);
  --water: #f472b6; --water-glow: rgba(244,114,182,0.4);
  --tile-bg: #431407; --tile-border: #7c2d12;
}
html.theme-aprilfools, html.theme-aprilfools body { background-color: var(--bg-deep) !important; }
html.theme-aprilfools body {
  background-image:
    radial-gradient(800px 480px at 8% -6%, rgba(251,191,36,0.45) 0%, transparent 55%),
    radial-gradient(700px 420px at 92% 8%, rgba(244,114,182,0.35) 0%, transparent 50%),
    radial-gradient(600px 400px at 50% 100%, rgba(147,197,253,0.3) 0%, transparent 55%),
    linear-gradient(180deg, #fffbeb 0%, var(--bg) 40%, var(--bg-deep) 100%) !important;
  background-repeat: no-repeat !important; background-size: 100% 100% !important; background-attachment: fixed !important;
}

/*
 * Full-page flip until “I'm dizzy”.
 * Transform on html so the whole site (incl. fixed UI) inverts together.
 * The escape button counter-rotates so its label stays readable.
 */
html.theme-aprilfools:not(.april-fools-upright) {
  transform: rotate(180deg);
  transform-origin: center center;
  min-height: 100%;
  min-height: 100dvh;
}

html.theme-aprilfools:not(.april-fools-upright) body {
  min-height: 100%;
  min-height: 100dvh;
}

#ms-dizzy-btn,
.ms-dizzy-btn {
  display: none;
}

/*
 * Inserted above the Mootsmog title in the DOM. With the page rotated 180°,
 * that lands visually *below* the title - easy to find while upside-down.
 * Counter-rotate so the label stays readable.
 */
html.theme-aprilfools:not(.april-fools-upright) #ms-dizzy-btn,
html.theme-aprilfools:not(.april-fools-upright) .ms-dizzy-btn {
  display: block;
  position: relative;
  z-index: 20;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 0.55rem;
  appearance: none;
  border: 3px solid #431407;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: #431407;
  background: linear-gradient(135deg, #fde047 0%, #fb923c 45%, #f472b6 100%);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.9),
    0 8px 22px rgba(67, 20, 7, 0.28);
  pointer-events: auto;
  user-select: none;
  transform: rotate(180deg);
  animation: ms-dizzy-pulse 1.4s ease-in-out infinite;
}

/* Brand stack (Next header): left-align with Mootsmog */
html.theme-aprilfools:not(.april-fools-upright) .brand-stack > #ms-dizzy-btn,
html.theme-aprilfools:not(.april-fools-upright) .brand-stack > .ms-dizzy-btn {
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
  padding: 8px 14px;
}

html.theme-aprilfools:not(.april-fools-upright) #ms-dizzy-btn:hover,
html.theme-aprilfools:not(.april-fools-upright) .ms-dizzy-btn:hover {
  filter: brightness(1.05);
}

html.theme-aprilfools:not(.april-fools-upright) #ms-dizzy-btn:active,
html.theme-aprilfools:not(.april-fools-upright) .ms-dizzy-btn:active {
  transform: rotate(180deg) scale(0.97);
}

@keyframes ms-dizzy-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 4px rgba(255, 255, 255, 0.85),
      0 12px 32px rgba(67, 20, 7, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(255, 255, 255, 0.95),
      0 16px 40px rgba(219, 39, 119, 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.theme-aprilfools:not(.april-fools-upright) #ms-dizzy-btn,
  html.theme-aprilfools:not(.april-fools-upright) .ms-dizzy-btn {
    animation: none !important;
  }
}
#ms-aprilfools-joker { display: none; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
html.theme-aprilfools #ms-aprilfools-joker { display: block; }
html.theme-aprilfools .modal, html.theme-aprilfools #win-modal, html.theme-aprilfools #result-modal {
  position: fixed !important; inset: 0 !important; z-index: 10050 !important; align-items: center !important; justify-content: center !important;
}
html.theme-aprilfools .modal:not([hidden]):not(.hidden), html.theme-aprilfools #win-modal:not([hidden]):not(.hidden), html.theme-aprilfools #result-modal:not([hidden]):not(.hidden) { display: flex !important; }
html.theme-aprilfools .modal-card { position: relative !important; z-index: 1 !important; filter: none !important; backdrop-filter: none !important; }
#ms-aprilfools-joker .ms-fools {
  position: absolute; bottom: -3.5rem; left: 0; font-size: 1.55rem; line-height: 1; opacity: 0;
  animation-name: ms-rise-generic; animation-timing-function: linear; animation-iteration-count: infinite;
  filter: drop-shadow(0 3px 6px rgba(219,39,119,0.2));
}
.aprilfools-greeting { display: none; margin: 0; }
html.theme-aprilfools .aprilfools-greeting {
  display: block; margin: 0.35rem 0 0;
  font-family: "Segoe Script","Apple Chancery","Snell Roundhand","Brush Script MT","Lucida Handwriting",cursive;
  font-size: 1.15rem; font-weight: 600; font-style: italic; color: #db2777; text-align: center;
}
html.theme-aprilfools header > h1 ~ .aprilfools-greeting {
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  background: linear-gradient(120deg, #ea580c 0%, #db2777 45%, #7c3aed 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-stack .aprilfools-greeting {
  font-family: "Segoe Script","Apple Chancery","Snell Roundhand","Brush Script MT","Lucida Handwriting",cursive;
  font-size: 0.88rem; font-weight: 600; font-style: italic; color: #db2777; text-align: left; margin-top: 2px; line-height: 1.25;
}

/* ─── Pi Day ────────────────────────────────────────────────────── */
html.theme-piday {
  --bg: #0f172a; --bg-deep: #020617;
  --panel: rgba(15,23,42,0.85); --panel-solid: #0f172a; --panel-2: rgba(30,41,59,0.9);
  --text: #e2e8f0; --muted: #94a3b8;
  --accent: #38bdf8; --accent-2: #0ea5e9;
  --border: rgba(56,189,248,0.28); --border-strong: rgba(14,165,233,0.45);
  --glass-shine: linear-gradient(145deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.8) 50%, rgba(2,6,23,0.75) 100%);
  --shadow: 0 1px 0 rgba(56,189,248,0.08) inset, 0 10px 30px rgba(0,0,0,0.45);
  --shadow-hover: 0 1px 0 rgba(56,189,248,0.12) inset, 0 18px 40px rgba(14,165,233,0.16);
  --slime: #38bdf8; --slime-bright: #7dd3fc; --slime-dim: #0284c7; --slime-glow: rgba(56,189,248,0.35);
  --water: #22d3ee; --water-glow: rgba(34,211,238,0.35);
  --tile-bg: #020617; --tile-border: #1e293b;
}
html.theme-piday, html.theme-piday body { background-color: var(--bg-deep) !important; color: var(--text); }
html.theme-piday body {
  background-image:
    radial-gradient(900px 520px at 15% -8%, rgba(14,165,233,0.22) 0%, transparent 55%),
    radial-gradient(700px 400px at 90% 10%, rgba(56,189,248,0.12) 0%, transparent 50%),
    linear-gradient(180deg, #0f172a 0%, var(--bg) 40%, var(--bg-deep) 100%) !important;
  background-repeat: no-repeat !important; background-size: 100% 100% !important; background-attachment: fixed !important;
}
#ms-piday-pi { display: none; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
html.theme-piday #ms-piday-pi { display: block; }
html.theme-piday .modal, html.theme-piday #win-modal, html.theme-piday #result-modal {
  position: fixed !important; inset: 0 !important; z-index: 10050 !important; align-items: center !important; justify-content: center !important;
}
html.theme-piday .modal:not([hidden]):not(.hidden), html.theme-piday #win-modal:not([hidden]):not(.hidden), html.theme-piday #result-modal:not([hidden]):not(.hidden) { display: flex !important; }
html.theme-piday .modal-card { position: relative !important; z-index: 1 !important; filter: none !important; backdrop-filter: none !important; }
#ms-piday-pi .ms-pi {
  position: absolute; bottom: -3rem; left: 0; font-size: 1.35rem; line-height: 1; opacity: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: #7dd3fc;
  animation-name: ms-rise-generic; animation-timing-function: linear; animation-iteration-count: infinite;
  text-shadow: 0 0 10px rgba(56,189,248,0.55);
}
#ms-piday-pi .ms-pi.ms-pi-soft { color: #94a3b8; }
#ms-piday-pi .ms-pi.ms-pi-deep { color: #38bdf8; }
.piday-greeting { display: none; margin: 0; }
html.theme-piday .piday-greeting {
  display: block; margin: 0.35rem 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem; font-weight: 700; color: #7dd3fc; text-align: center; letter-spacing: 0.04em;
}
html.theme-piday header > h1 ~ .piday-greeting {
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  background: linear-gradient(120deg, #0ea5e9 0%, #7dd3fc 50%, #e0f2fe 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-stack .piday-greeting {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem; font-weight: 700; color: #7dd3fc; text-align: left; margin-top: 2px; line-height: 1.25;
}

/* ─── Spring ────────────────────────────────────────────────────── */
html.theme-spring {
  --bg: #f4fbf6; --bg-deep: #e8f6ee;
  --panel: rgba(255,255,255,0.76); --panel-solid: #fff; --panel-2: rgba(248,253,250,0.9);
  --text: #1e3a2f; --muted: #5a7a6a;
  --accent: #34d399; --accent-2: #10b981;
  --border: rgba(52,211,153,0.28); --border-strong: rgba(16,185,129,0.4);
  --glass-shine: linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(236,253,245,0.7) 50%, rgba(209,250,229,0.5) 100%);
  --shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 30px rgba(16,185,129,0.1);
  --shadow-hover: 0 1px 0 rgba(255,255,255,0.95) inset, 0 18px 40px rgba(52,211,153,0.16);
  --slime: #6ee7b7; --slime-bright: #a7f3d0; --slime-dim: #10b981; --slime-glow: rgba(110,231,183,0.35);
  --water: #5eead4; --water-glow: rgba(94,234,212,0.35);
  --tile-bg: #1e3a2f; --tile-border: #2d5a45;
}
html.theme-spring, html.theme-spring body { background-color: var(--bg-deep) !important; }
html.theme-spring body {
  background-image:
    radial-gradient(900px 520px at 10% -8%, rgba(167,243,208,0.55) 0%, transparent 55%),
    radial-gradient(800px 480px at 92% 6%, rgba(253,224,255,0.4) 0%, transparent 50%),
    linear-gradient(180deg, #f8fdf9 0%, var(--bg) 40%, var(--bg-deep) 100%) !important;
  background-repeat: no-repeat !important; background-size: 100% 100% !important; background-attachment: fixed !important;
}
#ms-spring-bloom { display: none; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
html.theme-spring #ms-spring-bloom { display: block; }
html.theme-spring .modal, html.theme-spring #win-modal, html.theme-spring #result-modal {
  position: fixed !important; inset: 0 !important; z-index: 10050 !important; align-items: center !important; justify-content: center !important;
}
html.theme-spring .modal:not([hidden]):not(.hidden), html.theme-spring #win-modal:not([hidden]):not(.hidden), html.theme-spring #result-modal:not([hidden]):not(.hidden) { display: flex !important; }
html.theme-spring .modal-card { position: relative !important; z-index: 1 !important; filter: none !important; backdrop-filter: none !important; }
#ms-spring-bloom .ms-spring {
  position: absolute; bottom: -3.5rem; left: 0; font-size: 1.45rem; line-height: 1; opacity: 0;
  animation-name: ms-rise-generic; animation-timing-function: linear; animation-iteration-count: infinite;
  filter: drop-shadow(0 3px 6px rgba(16,185,129,0.18));
}
.spring-greeting { display: none; margin: 0; }
html.theme-spring .spring-greeting {
  display: block; margin: 0.35rem 0 0;
  font-family: "Segoe Script","Apple Chancery","Snell Roundhand","Brush Script MT","Lucida Handwriting",cursive;
  font-size: 1.15rem; font-weight: 600; font-style: italic; color: #059669; text-align: center;
}
html.theme-spring header > h1 ~ .spring-greeting {
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  background: linear-gradient(120deg, #047857 0%, #34d399 50%, #f9a8d4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-stack .spring-greeting {
  font-family: "Segoe Script","Apple Chancery","Snell Roundhand","Brush Script MT","Lucida Handwriting",cursive;
  font-size: 0.88rem; font-weight: 600; font-style: italic; color: #059669; text-align: left; margin-top: 2px; line-height: 1.25;
}

/* ─── Summer ────────────────────────────────────────────────────── */
html.theme-summer {
  --bg: #fffbeb; --bg-deep: #fef3c7;
  --panel: rgba(255,255,255,0.78); --panel-solid: #fff; --panel-2: rgba(255,251,235,0.92);
  --text: #78350f; --muted: #a16207;
  --accent: #f59e0b; --accent-2: #ea580c;
  --border: rgba(245,158,11,0.3); --border-strong: rgba(234,88,12,0.42);
  --glass-shine: linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(254,243,199,0.7) 50%, rgba(253,230,138,0.5) 100%);
  --shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 30px rgba(245,158,11,0.12);
  --shadow-hover: 0 1px 0 rgba(255,255,255,0.95) inset, 0 18px 40px rgba(234,88,12,0.14);
  --slime: #fbbf24; --slime-bright: #fde047; --slime-dim: #f59e0b; --slime-glow: rgba(251,191,36,0.4);
  --water: #38bdf8; --water-glow: rgba(56,189,248,0.35);
  --tile-bg: #78350f; --tile-border: #a16207;
}
html.theme-summer, html.theme-summer body { background-color: var(--bg-deep) !important; }
html.theme-summer body {
  background-image:
    radial-gradient(900px 520px at 50% -10%, rgba(253,224,71,0.55) 0%, transparent 55%),
    radial-gradient(700px 420px at 10% 80%, rgba(56,189,248,0.2) 0%, transparent 50%),
    linear-gradient(180deg, #fffbeb 0%, var(--bg) 40%, var(--bg-deep) 100%) !important;
  background-repeat: no-repeat !important; background-size: 100% 100% !important; background-attachment: fixed !important;
}
#ms-summer-sun { display: none; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
html.theme-summer #ms-summer-sun { display: block; }
html.theme-summer .modal, html.theme-summer #win-modal, html.theme-summer #result-modal {
  position: fixed !important; inset: 0 !important; z-index: 10050 !important; align-items: center !important; justify-content: center !important;
}
html.theme-summer .modal:not([hidden]):not(.hidden), html.theme-summer #win-modal:not([hidden]):not(.hidden), html.theme-summer #result-modal:not([hidden]):not(.hidden) { display: flex !important; }
html.theme-summer .modal-card { position: relative !important; z-index: 1 !important; filter: none !important; backdrop-filter: none !important; }
#ms-summer-sun .ms-summer {
  position: absolute; bottom: -3.5rem; left: 0; font-size: 1.5rem; line-height: 1; opacity: 0;
  animation-name: ms-rise-generic; animation-timing-function: linear; animation-iteration-count: infinite;
  filter: drop-shadow(0 3px 8px rgba(245,158,11,0.25));
}
.summer-greeting { display: none; margin: 0; }
html.theme-summer .summer-greeting {
  display: block; margin: 0.35rem 0 0;
  font-family: "Segoe Script","Apple Chancery","Snell Roundhand","Brush Script MT","Lucida Handwriting",cursive;
  font-size: 1.15rem; font-weight: 600; font-style: italic; color: #d97706; text-align: center;
}
html.theme-summer header > h1 ~ .summer-greeting {
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  background: linear-gradient(120deg, #ea580c 0%, #f59e0b 45%, #fde047 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-stack .summer-greeting {
  font-family: "Segoe Script","Apple Chancery","Snell Roundhand","Brush Script MT","Lucida Handwriting",cursive;
  font-size: 0.88rem; font-weight: 600; font-style: italic; color: #d97706; text-align: left; margin-top: 2px; line-height: 1.25;
}

/* ─── Autumn ────────────────────────────────────────────────────── */
html.theme-autumn {
  --bg: #fff7ed; --bg-deep: #ffedd5;
  --panel: rgba(255,255,255,0.76); --panel-solid: #fff; --panel-2: rgba(255,247,237,0.9);
  --text: #7c2d12; --muted: #9a3412;
  --accent: #ea580c; --accent-2: #c2410c;
  --border: rgba(234,88,12,0.28); --border-strong: rgba(194,65,12,0.42);
  --glass-shine: linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(255,237,213,0.7) 50%, rgba(254,215,170,0.5) 100%);
  --shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 30px rgba(234,88,12,0.1);
  --shadow-hover: 0 1px 0 rgba(255,255,255,0.95) inset, 0 18px 40px rgba(194,65,12,0.14);
  --slime: #fb923c; --slime-bright: #fdba74; --slime-dim: #ea580c; --slime-glow: rgba(251,146,60,0.35);
  --water: #fbbf24; --water-glow: rgba(251,191,36,0.35);
  --tile-bg: #7c2d12; --tile-border: #9a3412;
}
html.theme-autumn, html.theme-autumn body { background-color: var(--bg-deep) !important; }
html.theme-autumn body {
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(251,146,60,0.4) 0%, transparent 55%),
    radial-gradient(800px 480px at 90% 8%, rgba(220,38,38,0.15) 0%, transparent 50%),
    linear-gradient(180deg, #fffaf5 0%, var(--bg) 40%, var(--bg-deep) 100%) !important;
  background-repeat: no-repeat !important; background-size: 100% 100% !important; background-attachment: fixed !important;
}
#ms-autumn-leaves { display: none; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
html.theme-autumn #ms-autumn-leaves { display: block; }
html.theme-autumn .modal, html.theme-autumn #win-modal, html.theme-autumn #result-modal {
  position: fixed !important; inset: 0 !important; z-index: 10050 !important; align-items: center !important; justify-content: center !important;
}
html.theme-autumn .modal:not([hidden]):not(.hidden), html.theme-autumn #win-modal:not([hidden]):not(.hidden), html.theme-autumn #result-modal:not([hidden]):not(.hidden) { display: flex !important; }
html.theme-autumn .modal-card { position: relative !important; z-index: 1 !important; filter: none !important; backdrop-filter: none !important; }
/* Leaves fall from the top */
#ms-autumn-leaves .ms-autumn {
  position: absolute; top: -3.5rem; left: 0; bottom: auto; font-size: 1.45rem; line-height: 1; opacity: 0;
  animation-name: ms-fall-generic; animation-timing-function: linear; animation-iteration-count: infinite;
  filter: drop-shadow(0 3px 6px rgba(194,65,12,0.2));
}
@keyframes ms-fall-generic {
  0% { transform: translate3d(0,0,0) scale(0.9) rotate(-10deg); opacity: 0; }
  8% { opacity: 0.9; }
  100% { transform: translate3d(var(--drift,24px),110vh,0) scale(1.05) rotate(var(--spin,40deg)); opacity: 0; }
}
.autumn-greeting { display: none; margin: 0; }
html.theme-autumn .autumn-greeting {
  display: block; margin: 0.35rem 0 0;
  font-family: "Segoe Script","Apple Chancery","Snell Roundhand","Brush Script MT","Lucida Handwriting",cursive;
  font-size: 1.15rem; font-weight: 600; font-style: italic; color: #c2410c; text-align: center;
}
html.theme-autumn header > h1 ~ .autumn-greeting {
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  background: linear-gradient(120deg, #9a3412 0%, #ea580c 45%, #fbbf24 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-stack .autumn-greeting {
  font-family: "Segoe Script","Apple Chancery","Snell Roundhand","Brush Script MT","Lucida Handwriting",cursive;
  font-size: 0.88rem; font-weight: 600; font-style: italic; color: #c2410c; text-align: left; margin-top: 2px; line-height: 1.25;
}

/* ─── Winter ────────────────────────────────────────────────────── */
html.theme-winter {
  --bg: #f0f7ff; --bg-deep: #e0effe;
  --panel: rgba(255,255,255,0.78); --panel-solid: #fff; --panel-2: rgba(248,252,255,0.92);
  --text: #0c4a6e; --muted: #4d7a94;
  --accent: #38bdf8; --accent-2: #0284c7;
  --border: rgba(56,189,248,0.28); --border-strong: rgba(2,132,199,0.4);
  --glass-shine: linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(224,242,254,0.7) 50%, rgba(186,230,253,0.5) 100%);
  --shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 30px rgba(14,116,180,0.1);
  --shadow-hover: 0 1px 0 rgba(255,255,255,0.95) inset, 0 18px 40px rgba(14,116,180,0.14);
  --slime: #7dd3fc; --slime-bright: #bae6fd; --slime-dim: #0284c7; --slime-glow: rgba(125,211,252,0.35);
  --water: #38bdf8; --water-glow: rgba(56,189,248,0.4);
  --tile-bg: #0c4a6e; --tile-border: #164e6b;
}
html.theme-winter, html.theme-winter body { background-color: var(--bg-deep) !important; }
html.theme-winter body {
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(186,230,253,0.65) 0%, transparent 55%),
    radial-gradient(800px 480px at 92% 6%, rgba(224,242,254,0.7) 0%, transparent 50%),
    linear-gradient(180deg, #f8fcff 0%, var(--bg) 40%, var(--bg-deep) 100%) !important;
  background-repeat: no-repeat !important; background-size: 100% 100% !important; background-attachment: fixed !important;
}
#ms-winter-frost { display: none; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
html.theme-winter #ms-winter-frost { display: block; }
html.theme-winter .modal, html.theme-winter #win-modal, html.theme-winter #result-modal {
  position: fixed !important; inset: 0 !important; z-index: 10050 !important; align-items: center !important; justify-content: center !important;
}
html.theme-winter .modal:not([hidden]):not(.hidden), html.theme-winter #win-modal:not([hidden]):not(.hidden), html.theme-winter #result-modal:not([hidden]):not(.hidden) { display: flex !important; }
html.theme-winter .modal-card { position: relative !important; z-index: 1 !important; filter: none !important; backdrop-filter: none !important; }
#ms-winter-frost .ms-winter-flake {
  position: absolute; top: -3rem; left: 0; font-size: 1.1rem; line-height: 1; opacity: 0; color: #7dd3fc;
  animation-name: ms-fall-generic; animation-timing-function: linear; animation-iteration-count: infinite;
  filter: drop-shadow(0 2px 4px rgba(14,116,180,0.2));
}
.winter-greeting { display: none; margin: 0; }
html.theme-winter .winter-greeting {
  display: block; margin: 0.35rem 0 0;
  font-family: "Segoe Script","Apple Chancery","Snell Roundhand","Brush Script MT","Lucida Handwriting",cursive;
  font-size: 1.15rem; font-weight: 600; font-style: italic; color: #0284c7; text-align: center;
}
html.theme-winter header > h1 ~ .winter-greeting {
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  background: linear-gradient(120deg, #0369a1 0%, #38bdf8 50%, #e0f2fe 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-stack .winter-greeting {
  font-family: "Segoe Script","Apple Chancery","Snell Roundhand","Brush Script MT","Lucida Handwriting",cursive;
  font-size: 0.88rem; font-weight: 600; font-style: italic; color: #0284c7; text-align: left; margin-top: 2px; line-height: 1.25;
}

/* Shared modal layering helpers for new light themes already covered above */
html.theme-stpatricks body > .modal-backdrop,
html.theme-aprilfools body > .modal-backdrop,
html.theme-piday body > .modal-backdrop,
html.theme-spring body > .modal-backdrop,
html.theme-summer body > .modal-backdrop,
html.theme-autumn body > .modal-backdrop,
html.theme-winter body > .modal-backdrop {
  position: fixed !important; inset: 0 !important; z-index: 10040 !important;
}

@media (prefers-reduced-motion: reduce) {
  #ms-stpatricks-clover .ms-shamrock,
  #ms-aprilfools-joker .ms-fools,
  #ms-piday-pi .ms-pi,
  #ms-spring-bloom .ms-spring,
  #ms-summer-sun .ms-summer,
  #ms-autumn-leaves .ms-autumn,
  #ms-winter-frost .ms-winter-flake {
    animation: none !important;
    opacity: 0.4;
  }
}