/* =========================================================
   Devils Lair – seasons.css
   Saison-Themes. Aktiv ueber <html data-season="...">  (gesetzt von boot.js / seasons.js)
   Ohne data-season gilt das normale Hoellen-Design aus base.css.
   Die Fraktionsfarben (--c-*) werden bewusst NICHT veraendert.
   ========================================================= */

.menu li.season-li { position: relative; margin-left: 6px; }

/* Bild-Tint (Logo, Siegel, Banner) je Saison */
.brand img, .sigil img, .discord-card .art img { filter: var(--img-filter); }
.sigil svg { color: var(--red); }

/* ---------- Auswahl-Button + Popover ---------- */
.season-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); color: var(--ash); font-size: .88rem; letter-spacing: .04em;
  transition: border-color .2s, color .2s, background .2s; }
.season-btn:hover, .season-btn[aria-expanded="true"] { border-color: var(--red); color: var(--bone); background: rgba(var(--glow-rgb), .1); }
.season-ico { font-size: 1.05rem; line-height: 1; }
.season-pop { position: absolute; right: 0; top: calc(100% + 14px); z-index: 60; width: 270px; padding: 10px; border-radius: var(--radius);
  background: var(--bg-2); border: 1px solid var(--line-red); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .9), 0 0 40px -22px var(--red); }
.season-pop[hidden] { display: none; }
.season-pop h2 { font: 700 .72rem/1 var(--font-display); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); padding: 6px 8px 10px; }
.season-pop ul { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.season-pop li { margin: 0 !important; }
.season-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; cursor: pointer;
  color: var(--ash); text-align: left; font-size: .93rem; transition: background .15s, color .15s; }
.season-opt:hover, .season-opt:focus-visible { background: rgba(255, 255, 255, .06); color: var(--bone); }
.season-opt[aria-checked="true"] { color: var(--bone); background: rgba(var(--glow-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--glow-rgb), .45); }
.season-opt .ico { width: 1.5em; text-align: center; font-size: 1.1rem; }
.season-opt small { margin-left: auto; color: var(--dim); font-size: .75rem; }
.season-sep { height: 1px; margin: 6px 4px; background: var(--line); }
.season-note { padding: 8px 10px 4px; font-size: .76rem; line-height: 1.45; color: var(--dim); }
html:not(.js) .season-li { display: none; }

@media (max-width: 820px) {
  .menu { max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto; }
  .menu li.season-li { margin: 10px 0 0; }
  .season-btn { width: 100%; justify-content: center; padding: 12px; }
  .season-pop { position: static; width: 100%; margin-top: 8px; box-shadow: none; }
}

/* ---------- Spinnweben nur in dunklen Saisons ---------- */
html[data-season="weihnachten"] .web, html[data-season="weihnachten"] .orn,
html[data-season="fruehling"] .web, html[data-season="fruehling"] .orn,
html[data-season="sommer"] .web, html[data-season="sommer"] .orn { display: none; }

/* ---------- Halloween: Orange + Violett ---------- */
html[data-season="halloween"] {
  --bg: #07040b; --bg-2: #0d0713; --bg-3: #150c1c; --bg-rgb: 7, 4, 11;
  --red: #ff7a1a; --red-hot: #ff9a3c; --red-deep: #9a3d00; --red-dark: #2b1100;
  --glow-rgb: 255, 122, 26; --hot-rgb: 255, 154, 60; --deep-rgb: 110, 40, 160; --dark-rgb: 43, 17, 0;
  --img-filter: hue-rotate(28deg) saturate(1.1);
}

/* ---------- Weihnachten: Festliches Rot, Tannengruen, Schnee ---------- */
html[data-season="weihnachten"] {
  --bg: #040a08; --bg-2: #08120e; --bg-3: #0d1a14; --bg-rgb: 4, 10, 8;
  --red: #e0343f; --red-hot: #ff5c68; --red-deep: #8f1420; --red-dark: #2a0a0e;
  --glow-rgb: 224, 52, 63; --hot-rgb: 255, 92, 104; --deep-rgb: 22, 120, 70; --dark-rgb: 8, 42, 26;
  --img-filter: hue-rotate(-4deg);
}

/* ---------- Fruehling: Kirschbluete-Rosa + frisches Gruen ---------- */
html[data-season="fruehling"] {
  --bg: #060a08; --bg-2: #0a110d; --bg-3: #101a14; --bg-rgb: 6, 10, 8;
  --red: #ff6fae; --red-hot: #ff93c4; --red-deep: #a8386d; --red-dark: #3a0f26;
  --glow-rgb: 255, 111, 174; --hot-rgb: 255, 147, 196; --deep-rgb: 63, 174, 74; --dark-rgb: 58, 15, 38;
  --img-filter: hue-rotate(-32deg) saturate(.9) brightness(1.1);
}

/* ---------- Sommer: Sonnen-Gold + Tuerkis ---------- */
html[data-season="sommer"] {
  --bg: #050809; --bg-2: #0a1013; --bg-3: #101a1e; --bg-rgb: 5, 8, 9;
  --red: #ffb81f; --red-hot: #ffd04d; --red-deep: #a86a00; --red-dark: #3a2500;
  --glow-rgb: 255, 184, 31; --hot-rgb: 255, 208, 77; --deep-rgb: 34, 184, 207; --dark-rgb: 58, 37, 0;
  --img-filter: hue-rotate(30deg) saturate(1.05) brightness(1.15);
}
html[data-season="sommer"] .btn-primary { color: #1a1100; }

/* ---------- Herbst: Bernstein + Rostbraun ---------- */
html[data-season="herbst"] {
  --bg: #080605; --bg-2: #100c09; --bg-3: #1a130e; --bg-rgb: 8, 6, 5;
  --red: #dd7a1f; --red-hot: #f4a04a; --red-deep: #84400a; --red-dark: #2e1503;
  --glow-rgb: 221, 122, 31; --hot-rgb: 244, 160, 74; --deep-rgb: 150, 52, 20; --dark-rgb: 46, 21, 3;
  --img-filter: hue-rotate(22deg) saturate(.95);
}