/* ============================================================
   Sprachwelten — lebendige Canvas-Hintergründe der App-Screens
   (gehört zu js/ui/worlds.js; FADE_MS dort = 720ms hier)
   ============================================================ */

/* Band-Container: volle Breite, Welt liegt hinter dem Inhalt */
.world-band {
  position: relative;
  overflow: hidden;
}
.world-band > *:not(.world-canvas):not(.world-scrim) {
  position: relative;
  z-index: 2;
}

/* Welt als Hintergrund eines ganzen Screens */
.world-band--backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.world-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 720ms var(--ease-out), filter 600ms var(--ease-out);
  pointer-events: none;
}
.world-canvas.is-live { opacity: 1; }

/* Scrim: hält Text/Karten über der Welt lesbar (Papier-Auslauf unten) */
.world-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--paper) 34%, transparent) 0%,
      transparent 22%,
      transparent 58%,
      color-mix(in srgb, var(--paper) 78%, transparent) 92%,
      var(--paper) 100%);
}
.world-band--backdrop .world-scrim {
  background:
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--paper) 42%, transparent) 46%,
      color-mix(in srgb, var(--paper) 86%, transparent) 100%);
}

/* Fokus-Modus: Welt dimmt sich beim Lernen (setDim(true)) */
.world-dim .world-canvas.is-live {
  opacity: 0.32;
  filter: saturate(0.55);
}

/* Handy: der Welt-Backdrop wird zur dezenten Textur — auf dem schmalen Schirm
   überlagerten die vollen Regenwald-Farne/Ranken sonst Karten & Eingabe und
   killten die Lesbarkeit. Auf großen Screens bleibt die Welt atmosphärisch. */
@media (max-width: 900px) {
  /* Handy: Welt-Backdrop komplett aus — auf dem schmalen Schirm überlagerten
     die Regenwald-Farne die Inhalte und killten die Lesbarkeit. */
  .world-band--backdrop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .world-canvas { transition: none; }
}
html[data-motion="reduced"] .world-canvas { transition: none; }