/* Fluffy & Friends – Website-Teile im Spiel FLUFFYBANG (06.11.2026, Claude auf dem VPS)
   Ladeschirm nach Website-Vorgabe (Punkt 11) und Datenschutz-Fenster der Website (Punkte 7 und 18). */

/* ── Ladeschirm: Markengrün 25 % über dem dunklen Grund, Weichzeichnung, drehender Fluffy-Kopf; blendet sanft aus.
   Fortschrittsbalken und Hinweistext des Spiels bleiben. ── */
#loading {
  background: linear-gradient(rgb(155 225 93 / .25), rgb(155 225 93 / .25)), radial-gradient(circle at 50% 40%, #232129 0%, #0d0c10 70%);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
#loading:not(.show) {
  display: flex; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .55s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .55s;
}
.lade-kopf {
  display: block; width: clamp(72px, 11vmin, 104px); aspect-ratio: 1;
  background: url("/assets/img/lade-kopf.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 18px rgb(0 0 0 / .6));
  animation: ff-drehen 2.4s linear infinite;
}
#loading:not(.show) .lade-kopf { animation-play-state: paused; }
@keyframes ff-drehen { to { transform: rotate(360deg); } }
/* Solange das Datenschutz-Fenster offen ist, rückt der Ladeinhalt nach oben (sonst verdeckt es auf dem Handy „Fertig!“). */
@media (max-width: 700px) {
  body:has(.st-consent:not([hidden])) #loading { justify-content: flex-start; padding-top: max(9svh, env(safe-area-inset-top)); }
}

/* ── Nur für Screenreader ── */
.st-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── Datenschutz-Fenster in den Farben und Schriften des Spiels (Werte nur innerhalb des Fensters) ── */
.st-consent {
  --text: #f6f3ea; --text-muted: #b9b4a8; --accent: #9be15d; --surface: #16151b; --surface-hover: #25232c;
  --surface-raised: #1d1c23; --line: rgb(255 255 255 / .16); --radius-lg: 18px; --radius-sm: 10px;
  --font-sans: BangText, ui-rounded, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-display: BangDisplay, Impact, "Arial Narrow Bold", sans-serif;
  z-index: 2147483100; pointer-events: auto; user-select: text; -webkit-user-select: text;
}
/* consent.css setzt display:flex; ohne globale [hidden]-Regel (wie auf der Website) bliebe das Fenster nach der Wahl sichtbar */
.st-consent[hidden] { display: none !important; }
.st-consent h2 { letter-spacing: .02em; }
.st-consent .st-lang { display: inline-flex; align-items: center; gap: 2px; }
.st-consent .st-lang__item { display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -4px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .55; transition: opacity .2s; }
.st-consent .st-lang__item svg { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(255 255 255 / .25); }
.st-consent .st-lang__item:hover, .st-consent .st-lang__item:focus-visible, .st-consent .st-lang__item[aria-pressed="true"] { opacity: 1; }
.st-consent .st-lang__item[aria-pressed="true"] svg { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--accent); }
.st-consent[data-ff-sprache="de"] [lang="en"]:not(.st-lang__item),
.st-consent[data-ff-sprache="en"] [lang="de"]:not(.st-lang__item) { display: none !important; }

/* „Cookies“ im Rechtsteil des Hauptmenüs: sieht aus wie die Nachbarlinks */
.game-legal .ff-cookies { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-decoration: inherit; cursor: pointer; opacity: inherit; }
.game-legal .ff-cookies[hidden] { display: none; }
.game-legal .ff-cookies:hover, .game-legal .ff-cookies:focus-visible { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .lade-kopf { animation: none; }
  #loading:not(.show) { transition-duration: .2s, 0s; transition-delay: 0s, .2s; }
}