/* ============================================================
   logo-buehne.css — großes, animiertes Logo rechts neben dem Startbildschirm
   der Daily-Spiele (js/logo-buehne.js). Nur auf breiten Bildschirmen;
   auf Tablet/Handy bleibt der Startbildschirm wie bisher.
   ============================================================ */

.logo-buehne { display: none; }

@media (min-width: 980px) {
  /* Text und Logo als Gruppe mittig; gleiche Breiten auf allen drei Seiten -> gleicher Abstand */
  .mit-buehne:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--buehne-abstand, 28px);
    width: auto;
    max-width: 1060px;
    margin-inline: auto;
    overflow-x: clip;                     /* wachsende Impulse dürfen nie seitlich scrollen lassen */
  }
  .mit-buehne > .buehne-links { flex: 0 1 560px; min-width: 0; }
  /* Ergebnisbildschirm mit Bestenliste darunter: Logo oben ausrichten, js/logo-buehne.js schiebt es
     neben die Mitte des Ergebnisses (sonst stünde es mittig neben Ergebnis + Bestenliste, viel zu tief) */
  .mit-buehne.buehne-oben:not([hidden]) { align-items: flex-start; }
  .mit-buehne > .logo-buehne {
    display: flex;
    flex: none;
    width: 360px;
    justify-content: center;
    align-items: center;
  }
}

/* Die Bühne nutzt die Kachel-Klassen nur als Auslöser und für die Spielfarben (--fade, --linie) —
   kein Kachel-Rahmen, kein Hintergrund, keine Schatten (auch nicht im Tagmodus aus theme.css) */
.logo-buehne .buehne-kachel {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0 10px;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* weicher Schein in der Spielfarbe hinter dem Logo */
.logo-buehne .buehne-kachel::before {
  content: "";
  position: absolute;
  inset: -10% 0 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--fade, var(--akzent)) 20%, transparent), transparent 75%);
  pointer-events: none;
  z-index: -1;
}
:root[data-theme="light"] .logo-buehne .buehne-kachel::before {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--fade, var(--akzent)) 22%, transparent), transparent 72%);
}

.logo-buehne .buehne-schweben .kachel-anim {           /* alle drei Logos gleich breit */
  width: 100%;
  max-width: none;
  isolation: isolate;                     /* Impulse liegen hinter dem Logo */
}
.logo-buehne .kachel-anim .kachel-bild { width: 100%; max-width: none; vertical-align: top; }

/* ---------- Schweben: das Logo hebt sich leicht und senkt sich wieder ---------- */
.buehne-schweben { position: relative; width: 86%; display: flex; justify-content: center; }
.nachlauf .buehne-schweben { animation: buehne-schweben 4.8s ease-in-out infinite; }
@keyframes buehne-schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
/* Schatten darunter wird kleiner/blasser, wenn das Logo oben ist */
.buehne-schatten {
  width: 58%;
  height: 18px;
  margin-top: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.38), transparent);
}
:root[data-theme="light"] .buehne-schatten { background: radial-gradient(closest-side, rgba(60, 45, 20, 0.2), transparent); }
.nachlauf .buehne-schatten { animation: buehne-schatten 4.8s ease-in-out infinite; }
@keyframes buehne-schatten {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50%      { transform: scaleX(0.84); opacity: 0.6; }
}

/* ---------- Impulse vom Umriss: Logo-Kopien wachsen hinter dem Logo und verblassen ---------- */
.buehne-echo {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.buehne-echo .kachel-bild { width: 100%; height: 100%; filter: saturate(1.3) brightness(1.1) !important; }
.nachlauf .buehne-echo { animation: buehne-echo 3.6s cubic-bezier(.2, .6, .35, 1) infinite; }
.nachlauf .buehne-echo.echo-2 { animation-delay: 1.2s; }
.nachlauf .buehne-echo.echo-3 { animation-delay: 2.4s; }
@keyframes buehne-echo {
  0%   { transform: scale(1);    opacity: 0.42; }
  60%  { opacity: 0.1; }
  100% { transform: scale(1.28); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nachlauf .buehne-schweben, .nachlauf .buehne-schatten, .nachlauf .buehne-echo { animation: none; }
}