/*
 * Styles fuer die persistente Player-Leiste (MiniPlayer.jsx, gerendert auf
 * hub/field/social). Eine Datei, eine Quelle -- die Host-Seiten binden sie
 * nur ein.
 *
 * CEO 15.9. mit Referenz (Leiste eines Radiosenders, grosses Bild): die
 * Leiste ist WEISS mit schwarzer Schrift, sehr flach, und jedes Bedienelement
 * sitzt in einer eigenen ZELLE -- getrennt durch senkrechte Haarlinien, die
 * ueber die volle Leistenhoehe durchlaufen ("schmal und digital code artig,
 * also so Kaestchen usw."). Schwarz bleibt nur die Navigationszeile darueber.
 *
 * Definiert --live lokal (statt sich auf einen Wert der Gastseite zu
 * verlassen): eine gescopete Custom Property der Gastseite gilt nur fuer
 * deren Nachfahren, und die Leiste haengt bewusst ausserhalb -- siehe
 * CLAUDE.md, das war hier schon einmal ein echter Fehler.
 */

/* Leistenhoehe an EINER Stelle: .player-bar-spacer und jede Host-Seite mit
   eigener Hoehenrechnung ziehen darueber automatisch nach. */
:root{ --nd-player-h:42px; }
/* Kombinierte Hoehe beider fixierten Leisten -- damit nicht jede Stelle im
   Code (Overlays, Toasts, App-Rahmen) die Summe selbst bildet und dabei,
   wie mehrfach passiert, eine der beiden vergisst. */
:root{ --nd-bars-h:calc(var(--nd-topbar-h, 60px) + var(--nd-player-h)); }
.player-bar-spacer{ height:var(--nd-player-h); }

.player-sticky-bar{
  --live:#e6483c;
  /* CEO 15.9.: erst "kann man das vielleicht doch weiss machen", nach dem
     Sehen dann "ich will den Player schwarz". Die Zellenstruktur bleibt --
     nur Grund und Schrift tauschen. --pl-paper ist der Grund der Leiste,
     --pl-ink Schrift und Trennlinien; beide Namen behalten dadurch ihre
     Rolle, und die Schrift auf dem roten Live-Feld (var(--pl-paper))
     stimmt automatisch mit. */
  --pl-ink:#f2f2f2;
  --pl-paper:#0a0a0a;
  --pl-cell:44px;
  position:fixed; top:var(--nd-topbar-h, 60px); left:0; right:0; z-index:95;
  width:100%; height:var(--nd-player-h); overflow:hidden;
  display:flex; align-items:stretch; gap:0; padding:0;
  background:var(--pl-paper); color:var(--pl-ink);
  border-bottom:1px solid rgba(242,242,242,0.22);
}
/* Ein-/Ausblenden auf bestimmten Screens (hub's Hauptmenue) ist
   Seiten-spezifisch und lebt in der Host-Seite, nicht hier -- dasselbe
   Muster wie bei shared/topbar.css. */

/* ---- Die Zelle ----
   Die Haarlinie sitzt LINKS an der Zelle, damit am aeusseren Rand keine
   doppelte Kante entsteht. height:100% wirkt trotz align-items am
   Elternelement, weil ein expliziter Hoehenwert am Flex-Kind Vorrang vor
   der Stretch-Ausrichtung hat -- die Linien laufen dadurch wirklich durch. */
.pl-cell{
  flex:0 0 var(--pl-cell); height:100%; min-width:var(--pl-cell); padding:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-left:1px solid rgba(242,242,242,0.22);
  color:inherit; font:inherit; cursor:pointer;
}
.pl-cell:first-child{ border-left:none; }
.pl-cell:focus-visible{ outline:2px solid var(--live); outline-offset:-3px; }
.pl-cell:active{ background:rgba(255,255,255,0.10); }

/* Wiedergabe/Pause -- das Icon traegt die Zelle, kein zusaetzlicher Rahmen. */
.radio-play-btn svg{ width:16px; height:16px; fill:currentColor; }
.player-sticky-bar .radio-play-btn.loading{ opacity:.45; cursor:wait; }
.player-sticky-bar .radio-play-btn[disabled]{ opacity:.3; cursor:default; }
.player-sticky-bar .radio-play-btn[disabled]:active{ background:none; }

.pl-icon-btn svg{ width:17px; height:17px; }
.pl-mute.muted{ color:#8a8a8a; }
.pl-share.done{ color:var(--live); }

/* Live-Feld: die EINZIGE Farbflaeche der Leiste. Aus = nur Schrift. */
.pl-live{
  flex:0 0 auto; min-width:56px; padding:0 10px;
  font-family:'Tabular Light','Archivo Variable',monospace;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  white-space:nowrap; cursor:default;
  color:#8a8a8a;
}
.pl-live.on{ background:var(--live); color:var(--pl-paper); }

/* Weltkugel (Three.js, siehe MiniPlayer.jsx). Der blaue Gradnetz-Umriss
   steht auf einer schwarzen Innenkugel -- auf weissem Grund bleibt die
   Kugel dadurch als Zeichen sichtbar, ohne dass an der Szene etwas
   umgebaut werden muesste. */
.play-mast-mini{ display:block; width:24px; height:24px; flex-shrink:0; }

/* Titelzelle: Punkt als Live-Marke, dahinter der Titel der laufenden
   SENDUNG (nie die Titeldaten des Streams). Sie nimmt den Rest der Breite. */
.pl-title{
  flex:1 1 auto; min-width:0; justify-content:flex-start;
  gap:8px; padding:0 12px; cursor:default;
}
.pl-dot{
  flex-shrink:0; width:6px; height:6px; border-radius:50%;
  background:#5a5a5a;
}
.player-sticky-bar.is-live .pl-dot{ background:var(--live); }

/* Laufschrift: der Titel steht einfach da und laeuft NUR, wenn er nicht in
   die Zelle passt -- dann als nahtlose Schleife aus zwei Kopien statt als
   einmaliges Wegschieben, das den Text am Rand abschneidet (genau das war
   auf jedem Bildschirmfoto als "FX RADIO" zu sehen). Die Strecke misst
   MiniPlayer.jsx in echten Pixeln und setzt sie als --run-distance. */
.player-ticker{
  position:relative; flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap;
  display:flex; align-items:center; gap:8px;
}
/* Schrift und Bewegung wie im alten Player (CEO 15.9.: "bitte wieder die
   gleiche Schrift und Animation des alten Players"). Archivo Black, rot,
   versal -- NICHT die Mikro-Schrift der uebrigen Zellen: der Titel ist die
   Ansage des Senders, nicht eine Beschriftung. */
.player-ticker-text{
  display:inline-block; flex-shrink:0;
  font-family:'Archivo Black','Archivo Variable',sans-serif; font-weight:900;
  font-size:15px; color:var(--live);
  letter-spacing:-.01em; text-transform:uppercase;
  will-change:transform;
}
/* Der gelegentliche Schwarzweiss-Wisch beim Titelwechsel -- gehoert zum
   alten Ablauf dazu. */
.player-ticker.mono-sweep .player-ticker-text{ animation:tickerMono .85s ease-in-out; }
.player-ticker.mono-sweep::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 15%, rgba(255,255,255,0.9) 45%, rgba(0,0,0,0.75) 55%, transparent 85%);
  mix-blend-mode:overlay;
  animation:tickerSweep .85s ease-in-out;
}
@keyframes tickerMono{
  0%, 100%{ filter:none; }
  50%{ filter:grayscale(1) contrast(1.4) brightness(1.2); }
}
@keyframes tickerSweep{
  0%{ transform:translateX(-140%); opacity:0; }
  15%, 85%{ opacity:1; }
  100%{ transform:translateX(140%); opacity:0; }
}

/* Schmale Telefone: die Zellen duerfen enger werden, aber nicht unter 40px
   -- darunter waere kein Tippziel mehr uebrig. */
@media (max-width:359px){
  .player-sticky-bar{ --pl-cell:40px; }
  .pl-live{ min-width:0; padding:0 8px; letter-spacing:.14em; }
  .pl-title{ padding:0 10px; }
}

@media (prefers-reduced-motion: reduce){
  .player-ticker{ transform:none !important; transition:none !important; }
  .player-ticker-text{
    max-width:100%; overflow:hidden; text-overflow:ellipsis;
    transform:none !important; transition:none !important; animation:none !important;
  }
  .player-ticker.mono-sweep::after{ display:none !important; }
}

/* ---- Sternschnuppe: "die Steuerung geht jetzt an den Player" ----
   CEO 15.9.: ein Klick auf LISTEN LIVE unten auf der Seite schiesst ein
   Signal hinauf zur Leiste. Der Flug selbst wird in MiniPlayer.jsx
   gerechnet (nur dort ist bekannt, wo die Leiste gerade sitzt); hier steht
   nur, wie das Signal aussieht.

   Rot ist dieselbe Sendefarbe wie das Live-Feld und der Wuerfel auf PLAY --
   das Signal gehoert sichtbar zum Sender, nicht zur Seite. Das Element
   haengt direkt am <body>, deshalb bekommt es --live hier selbst. */
.pl-signal{
  --live:#e6483c;
  position:fixed; left:0; top:0; width:10px; height:10px;
  z-index:96; pointer-events:none; will-change:transform, opacity;
}
.pl-signal-head{
  position:absolute; inset:0; border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 2px var(--live), 0 0 16px 5px rgba(230,72,60,.8);
}
/* Der Schweif liegt in der lokalen Minus-x-Richtung, also immer hinter dem
   Kopf: die Huelle wird pro Stuetzstelle tangential zur Flugbahn gedreht. */
.pl-signal-tail{
  position:absolute; top:50%; right:50%;
  width:var(--sig-tail, 70px); height:3px; transform:translateY(-50%);
  border-radius:3px;
  background:linear-gradient(to left, var(--live), rgba(230,72,60,0));
}

/* Ankunft: die Play-Zelle der Leiste blitzt einmal auf, sobald die
   Sternschnuppe sie erreicht -- erst damit ist die Uebergabe zu Ende
   erzaehlt. Kein Hover-Zustand, sondern eine einmalige Antwort auf einen
   Klick. */
@keyframes plHit{
  0%{ background:var(--live); color:var(--pl-paper); }
  70%{ background:var(--live); color:var(--pl-paper); }
  100%{ background:rgba(230,72,60,0); color:var(--pl-ink); }
}
.player-sticky-bar .radio-play-btn.pl-hit{ animation:plHit .62s ease-out 1; }

@media (prefers-reduced-motion: reduce){
  .player-sticky-bar .radio-play-btn.pl-hit{ animation-duration:.01ms; }
}