/* ==========================================================
   Element-Ansichten (Elfenwald, Tiefsee, Vulkan, Kosmos)
   Echte Fotos als Hintergrund + Fototexturen in den Fenstern.
   Die bewegten Effekte (Nebel, Blasen, Glut, Sterne) baut src/elemente.js.
   ========================================================== */

body[data-theme="wald"] {
  --bg: #0b1d14;
  --text: #ecf5e7;
  --muted: #b0cbac;
  --line: rgba(143, 209, 106, 0.3);
  --blue: #8fd16a;
  --blue-soft: #b9e89a;
  --fire: #d6f2a0;
  --ember: #eaf7c6;
  --accent-ink: #0d1f10;
  --accent-glow: 0 0 18px rgba(143, 209, 106, 0.35);
  --panel: linear-gradient(rgba(10, 26, 17, 0.84), rgba(8, 22, 14, 0.9)), url("../assets/elemente/tex-rinde.jpg") center / cover;
  --panel-strong: linear-gradient(rgba(8, 22, 14, 0.92), rgba(6, 18, 11, 0.95)), url("../assets/elemente/tex-rinde.jpg") center / cover;
  --accent-gradient: linear-gradient(100deg, #7cc456, #a9e07e);
  --brand-gradient: linear-gradient(135deg, #3f7d31, #0d2419 48%, #8fd16a);
  --cover-gradient: linear-gradient(rgba(5, 20, 12, 0.35), rgba(5, 20, 12, 0.6)), url("../assets/elemente/bg-wald.jpg") center / cover;
  --display-font: "Cormorant Garamond", Georgia, serif;
  --ui-font: "Alegreya Sans", Inter, sans-serif;
  --read-font: "Alegreya", Georgia, serif;
  --display-weight: 700;
  --display-case: none;
}

body[data-theme="wasser"] {
  --bg: #04192b;
  --text: #e6f6ff;
  --muted: #a9cfe6;
  --line: rgba(95, 212, 244, 0.3);
  --blue: #5fd4f4;
  --blue-soft: #a6f0ff;
  --fire: #a6f0e0;
  --ember: #d8f7ff;
  --accent-ink: #03263b;
  --accent-glow: 0 0 22px rgba(95, 212, 244, 0.4);
  --panel: linear-gradient(rgba(3, 22, 38, 0.74), rgba(3, 18, 32, 0.84)), url("../assets/elemente/tex-wasser.jpg") center / cover;
  --panel-strong: linear-gradient(rgba(3, 20, 36, 0.88), rgba(2, 16, 30, 0.93)), url("../assets/elemente/tex-wasser.jpg") center / cover;
  --accent-gradient: linear-gradient(100deg, #3fc2ea, #8fe9ff);
  --brand-gradient: linear-gradient(135deg, #0e5f8c, #04192b 48%, #5fd4f4);
  --cover-gradient: linear-gradient(rgba(2, 16, 28, 0.3), rgba(2, 16, 28, 0.6)), url("../assets/elemente/bg-tiefsee.jpg") center / cover;
  --display-font: "Marcellus", Georgia, serif;
  --ui-font: "Nunito", Inter, sans-serif;
  --read-font: "Nunito", Inter, sans-serif;
  --display-weight: 400;
  --display-case: none;
}

body[data-theme="feuer"] {
  --bg: #0d0605;
  --text: #fbeae0;
  --muted: #d3a894;
  --line: rgba(255, 110, 40, 0.28);
  --blue: #ff6a1e;
  --blue-soft: #ffa66b;
  --fire: #ffc04a;
  --ember: #ffe0c2;
  --accent-ink: #1a0602;
  --accent-glow: 0 0 22px rgba(255, 100, 30, 0.5);
  --panel: linear-gradient(rgba(20, 11, 8, 0.76), rgba(16, 9, 7, 0.84)), url("../assets/elemente/tex-vulkan.jpg") center / cover;
  --panel-strong: linear-gradient(rgba(18, 10, 7, 0.9), rgba(14, 8, 6, 0.94)), url("../assets/elemente/tex-vulkan.jpg") center / cover;
  --accent-gradient: linear-gradient(100deg, #ff5a14, #ff9a3c);
  --brand-gradient: linear-gradient(135deg, #c2280c, #140604 48%, #ff6a1e);
  --cover-gradient: linear-gradient(rgba(10, 3, 2, 0.25), rgba(10, 3, 2, 0.55)), url("../assets/elemente/bg-vulkan.jpg") 40% 30% / cover;
  --display-font: "Oswald", Inter, sans-serif;
  --ui-font: Inter, sans-serif;
  --read-font: Inter, sans-serif;
  --display-weight: 600;
  --display-case: uppercase;
}

body[data-theme="kosmos"] {
  --bg: #04030c;
  --text: #eeedff;
  --muted: #b4b1de;
  --line: rgba(180, 155, 255, 0.3);
  --blue: #b49bff;
  --blue-soft: #d6c9ff;
  --fire: #7fe3ff;
  --ember: #ebe2ff;
  --accent-ink: #120a2e;
  --accent-glow: 0 0 22px rgba(180, 155, 255, 0.45);
  --panel: linear-gradient(rgba(10, 8, 30, 0.62), rgba(8, 6, 24, 0.74)), url("../assets/elemente/tex-kosmos.jpg") center / cover;
  --panel-strong: linear-gradient(rgba(8, 6, 24, 0.86), rgba(6, 5, 20, 0.92)), url("../assets/elemente/tex-kosmos.jpg") center / cover;
  --accent-gradient: linear-gradient(100deg, #9d7dff, #c9b8ff);
  --brand-gradient: linear-gradient(135deg, #5a3fb0, #07051a 48%, #b49bff);
  --cover-gradient: linear-gradient(rgba(4, 3, 12, 0.2), rgba(4, 3, 12, 0.5)), url("../assets/elemente/bg-kosmos.jpg") 60% 50% / cover;
  --display-font: "Orbitron", Inter, sans-serif;
  --ui-font: "Exo 2", Inter, sans-serif;
  --read-font: "Exo 2", Inter, sans-serif;
  --display-weight: 700;
  --display-case: uppercase;
}

/* Gemeinsame Regeln fuer alle vier Element-Ansichten */
body[data-theme="wald"],
body[data-theme="wasser"],
body[data-theme="feuer"],
body[data-theme="kosmos"] {
  --body-bg: var(--bg);
  --hero-bg: var(--panel);
  background: var(--bg);
  font-family: var(--ui-font);
}

body[data-theme="wald"] :is(h1, h2, h3, .eyebrow),
body[data-theme="wasser"] :is(h1, h2, h3, .eyebrow),
body[data-theme="feuer"] :is(h1, h2, h3, .eyebrow),
body[data-theme="kosmos"] :is(h1, h2, h3, .eyebrow) {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
}

body[data-theme="feuer"] :is(.page-header h2, .brand h1),
body[data-theme="kosmos"] :is(.page-header h2, .brand h1) {
  text-transform: var(--display-case);
  letter-spacing: 0.05em;
}

body[data-theme="wald"] .primary,
body[data-theme="wasser"] .primary,
body[data-theme="feuer"] .primary,
body[data-theme="kosmos"] .primary {
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: var(--accent-glow);
}

body[data-theme="wald"] :is(input, select, textarea),
body[data-theme="wasser"] :is(input, select, textarea),
body[data-theme="feuer"] :is(input, select, textarea),
body[data-theme="kosmos"] :is(input, select, textarea) {
  background: rgba(0, 0, 0, 0.42);
}

/* Lebende Hintergrundszene */
#element-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}

#element-scene svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#element-veil {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: var(--bg);
  opacity: 0;
  transition: opacity 0.9s ease;
}

#element-veil.on {
  opacity: 1;
  transition: none;
}

/* Theme-Auswahl als runde Farbpunkte mit Namen */
.theme-switcher button[data-theme-choice] {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.theme-switcher button[data-theme-choice]::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  background: var(--swatch);
  box-shadow: 0 0 8px var(--swatch);
}

.theme-switcher [data-theme-choice="wald"] { --swatch: #8fd16a; }
.theme-switcher [data-theme-choice="wasser"] { --swatch: #5fd4f4; }
.theme-switcher [data-theme-choice="feuer"] { --swatch: #ff6a1e; }
.theme-switcher [data-theme-choice="kosmos"] { --swatch: #b49bff; }

@media (prefers-reduced-motion: reduce) {
  #element-scene svg animate,
  #element-scene svg animateTransform {
    display: none;
  }
}

/* Alte Farbverlaeufe (Mana-Blau/Orange) in den Element-Ansichten neutralisieren */
body:is([data-theme="wald"], [data-theme="wasser"], [data-theme="feuer"], [data-theme="kosmos"]) :is(.name-modal, .login-modal) {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
}

body:is([data-theme="wald"], [data-theme="wasser"], [data-theme="feuer"], [data-theme="kosmos"]) .reader-tab-panel {
  background: rgba(0, 0, 0, 0.18);
}

body:is([data-theme="wald"], [data-theme="wasser"], [data-theme="feuer"], [data-theme="kosmos"]) :is(.resume-card, .music-locked-card, .music-player-card) {
  background: var(--panel);
}

body:is([data-theme="wald"], [data-theme="wasser"], [data-theme="feuer"], [data-theme="kosmos"]) .reader-feed {
  background: rgba(0, 0, 0, 0.16);
}

body:is([data-theme="wald"], [data-theme="wasser"], [data-theme="feuer"], [data-theme="kosmos"]) .sidebar {
  background: var(--panel-strong);
  border-right: 1px solid var(--line);
}

/* Titelbild der Startseite: altes gezeichnetes Motiv ausblenden, echtes Foto zeigt sich ueber --cover-gradient */
body:is([data-theme="wald"], [data-theme="wasser"], [data-theme="feuer"], [data-theme="kosmos"]) .cover-art :is(.moon, .hero-silhouette, .fireline) {
  display: none;
}