/* ============================================================================
   bar.css — "HORSE Himmel-Lobby" (Cartoon: blauer Himmel mit Wolken).
   Baut das Lobby-Menü als fröhlichen Cartoon-Himmel. Aufbau von oben nach unten:
     1. Blaues Hängeschild "HORSE" (Text, an zwei Schnüren)
     2. Spielerliste auf weißem Wolken-Panel mit Drink-Zähler
     3. Spiele-Grid als RECHTECKIGE Karten (abgerundete Ecken, kein Bierdeckel)
     4. Sticky-artiger CTA-Button unten
   Lädt NACH general-style.css → überschreibt die frühere Lobby vollständig.
   Nur das Lobby-Markup/Logik bleibt unverändert (gleiche IDs); reines Re-Design.
   Alles unter #screen-lobby gescoped → schlägt die general-Regeln per Spezifität.
   Die --sp-*-Variablennamen sind historisch (Bar-Spezifikation) und wurden
   beibehalten — nur die WERTE sind jetzt Himmel-Farben.
   ========================================================================== */

/* ---- Farbpalette HIMMEL/WOLKEN (nur hier, lobby-lokal; Namen beibehalten) --- */
#screen-lobby.bar-scene {
  --sp-card:      #4aa3ea;   /* Himmel-Grundton (Card) */
  --sp-plank-a:   #3d9be9;   /* Himmel oben (kräftig) */
  --sp-plank-b:   #8ecdf7;   /* Himmel unten (hell) */
  --sp-sign:      #3d8fd4;   /* Schild-Blau */
  --sp-sign-edge: #1b3556;   /* Schild-/Karten-Rand (Marine-Tinte) */
  --sp-screw:     #0e2038;   /* Punkte/Schlagschatten */
  --sp-gold:      #ffcf3f;   /* Sonnen-Gelb (HORSE-Text, Akzent) */
  --sp-beige:     #eaf6ff;   /* Untertitel (helles Wolken-Blau) */
  --sp-cream:     #ffffff;   /* Wolken-Weiß für Panels/Karten */
  --sp-panel-edge:#2e6da8;   /* Panel-Rand */
  --sp-ink:       #1b3556;   /* Dunkle Schrift/Tinte */
  --sp-badge:     #ffb63c;   /* Drink-Badge (orange) */
  --sp-badge-ink: #7a4d12;   /* Drink-Badge Text dunkel */
  --sp-red:       #ffcf3f;   /* CTA/Highlight → einheitliches Gelb (= --sp-gold) */
  --sp-gold-deep: #b8860b;   /* dunkleres Gold für Marken auf Weiß (lesbar) */
  --sp-avatar-bg: #bfe3ff;   /* Avatar-BG hinter transparenter Grafik */
  --sp-icon-bg:   #10233c;   /* Icon-Flächen-BG (dunkles Marine) */

  position: relative;
  overflow: hidden;
  padding: 0 0 110px;   /* unten Platz für das fixierte Apple-Dock */
  /* KEINE gerahmte Card mehr: rahmen-/randlos & transparent. Den Himmel
     liefert jetzt seitenfüllend der body (siehe body.lobby-active unten). */
  border: none;
  border-radius: 0;
  color: var(--sp-cream);
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: none;
}

/* ---- Lobby = vollflächiger Himmel statt zentrierter Card --------------------
   Wenn die Lobby sichtbar ist (body.lobby-active wird in core.js gesetzt), füllt
   der Cartoon-Himmel die GANZE Seite bis an alle Ränder. Das Lobby-Element
   selbst ist transparent (oben), sein Inhalt sitzt direkt auf dem Himmel. */
body.lobby-active {
  padding: 0;
  background: var(--sp-card, #4aa3ea);   /* Grundton, falls die Ebene fehlt */
}
/* Der Himmel liegt auf einer eigenen fixen Pseudo-Ebene hinter dem Inhalt:
   Sonnen-Glow oben + Verlauf von kräftigem Blau zum hellen Horizont. */
body.lobby-active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(255, 240, 170, 0.5), transparent 62%),
    linear-gradient(var(--sp-plank-a, #3d9be9), var(--sp-plank-b, #8ecdf7));
}

/* Sonnen-Glow oben hinter dem Schild. */
#screen-lobby.bar-scene::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 320px;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 60% at 50% 10%, rgba(255, 244, 190, 0.4), transparent 70%);
  z-index: 0;
}
#screen-lobby.bar-scene > * { position: relative; z-index: 1; }

/* ---- 1) Hängeschild "HORSE" ----------------------------------------------- */
#screen-lobby .bar-sign {
  position: relative;
  padding: 34px 18px 6px;
  text-align: center;
}
/* Logo (statt des früheren Holz-Hängeschilds). Sanfter Schlagschatten + weicher
   Glow, damit es klar vom Himmel absteht. Leichte Schwebe-Animation. */
#screen-lobby .horse-logo {
  display: block;
  width: min(60%, 220px);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 0 rgba(14, 32, 56, 0.25))
          drop-shadow(0 0 24px rgba(255, 255, 255, 0.5));
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
#screen-lobby .bar-sign .sign-sub {
  margin: 8px 0 0;
  font-family: 'Bangers', sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sp-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  #screen-lobby .horse-logo { animation: none !important; }
}

/* ---- Rollen-Banner (kleines Holz-Schild) ---------------------------------- */
#screen-lobby .role-banner {
  margin: 16px 16px 0;
  padding: 9px 14px;
  text-align: center;
  font-size: 14px;
  color: var(--sp-ink);
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(27, 53, 86, 0.4);
  border-style: dashed;
  border-radius: 12px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#screen-lobby .role-banner b {
  font-family: 'Bangers', sans-serif;
  font-weight: normal;
  letter-spacing: 1px;
  color: var(--sp-gold-deep);
}

/* ============================================================================
   APPLE-REDESIGN der Lobby (bei gleicher Himmel-Palette):
   - "Beste Reiter:" als weiße Überschrift + Olympia-PODIUM-Karussell (statt Panel)
   - Spiele als KARUSSELL (Mitte groß = ausgewählt, Seiten kleiner, Loop)
   - Apple-DOCK unten (Home / Spieler / Einstellung) + Einstellungs-Sheet
   ========================================================================== */

/* ---- 2) "Beste Reiter:" — weiße Abschnitts-Überschrift + Podium ------------ */
#screen-lobby .section-title {
  margin: 26px 22px 14px;
  font-family: var(--font-ui);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(27, 53, 86, 0.30);
  text-align: left;
}
#screen-lobby .games-title { margin-top: 34px; }

/* Podium: 3 Slots — LINKS Platz 2, MITTE Platz 1 (am größten), RECHTS Platz 3
   (Olympia-Treppchen via align-items:flex-end). Tipp auf eine Seite oder
   horizontales Wischen rotiert die sortierte Spielerliste im Loop. */
#screen-lobby .podium {
  display: flex;
  flex-wrap: nowrap;                 /* nie umbrechen — Slots skalieren stattdessen */
  align-items: flex-end;
  justify-content: center;
  gap: 0 clamp(10px, 3vw, 30px);
  min-height: 190px;
  padding: 10px 8px 0;
  touch-action: pan-y;
}
/* Slot-Breiten responsiv: die Name+Counter-Pille wird auf die Slot-Breite
   begrenzt (max-width:100%) → langer Name kürzt mit … statt den Slot zu sprengen. */
#screen-lobby .pod-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: none;
  background: none;
  padding: 0;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s ease;
}
#screen-lobby .pod-center { width: min(38vw, 150px); }
#screen-lobby .pod-left   { width: min(26vw, 104px); }
#screen-lobby .pod-right  { width: min(22vw, 88px); }
#screen-lobby .pod-slot.side { cursor: pointer; }
#screen-lobby .pod-slot.side:active { transform: scale(0.95); }

/* Avatar-Größen: Mitte dominant, links kleiner, rechts noch etwas kleiner. */
#screen-lobby .pod-slot .pod-av { position: relative; }
#screen-lobby .pod-slot .pod-av img {
  display: block;
  border-radius: 50%;
  object-fit: cover;
  background: var(--sp-avatar-bg);
  box-shadow: 0 14px 30px rgba(27, 53, 86, 0.30), 0 0 0 4px #ffffff;
  transition: width 0.25s ease, height 0.25s ease;
}
#screen-lobby .pod-center .pod-av img { width: min(31vw, 118px); height: min(31vw, 118px); }
#screen-lobby .pod-left  .pod-av img { width: min(23vw, 88px);  height: min(23vw, 88px); }
#screen-lobby .pod-right .pod-av img { width: min(18vw, 68px);  height: min(18vw, 68px); }
/* Rang-Umrandung des Avatars — Platz 1 GOLD, Platz 2 SILBER, Platz 3 BRONZE.
   ALLE anderen Plätze (4+) behalten den WEISSEN Standard-Ring aus der Basisregel
   oben (kein Sonder-Ring für den eigenen Avatar mehr). */
#screen-lobby .pod-slot.pod-r1 .pod-av img {
  box-shadow: 0 14px 30px rgba(27, 53, 86, 0.30), 0 0 0 4px #f5c33f;
}
#screen-lobby .pod-slot.pod-r2 .pod-av img {
  box-shadow: 0 14px 30px rgba(27, 53, 86, 0.30), 0 0 0 4px #cbd5df;
}
#screen-lobby .pod-slot.pod-r3 .pod-av img {
  box-shadow: 0 14px 30px rgba(27, 53, 86, 0.30), 0 0 0 4px #cd8f5c;
}

/* Rang-Badge (echter Rang laut Sortierung): 1 Gold, 2 Silber, 3 Bronze, sonst Glas. */
#screen-lobby .pod-rank {
  position: absolute;
  top: -6px; right: -4px;
  min-width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: rgba(27, 53, 86, 0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 4px 10px rgba(27, 53, 86, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  z-index: 2;
}
#screen-lobby .pod-rank.r1 { background: linear-gradient(#ffd95e, #f0b428); color: var(--sp-ink); }
#screen-lobby .pod-rank.r2 { background: linear-gradient(#e8eef4, #b9c5d1); color: var(--sp-ink); }
#screen-lobby .pod-rank.r3 { background: linear-gradient(#e8b27d, #c07f4a); color: #fff; }

/* (Admin-Krone entfernt — wird nicht mehr gebraucht.) */

/* Name + Bier-Counter in EINER Zeile: gemeinsame Glas-Pille unter dem Avatar. */
/* Name: WEISS, direkt unter dem Avatar, OHNE Hintergrund/Pille (eigenständig,
   ÜBER dem Bier-Counter). Kürzt bei Bedarf mit … innerhalb der Slot-Breite. */
#screen-lobby .pod-name {
  max-width: 100%;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 16px;                   /* +2px */
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(27, 53, 86, 0.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#screen-lobby .pod-left .pod-name, #screen-lobby .pod-right .pod-name { font-size: 14.5px; }
/* Bier-Counter: eigene Glas-Pille (gleiche Optik wie zuvor), UNTER dem Namen. */
#screen-lobby .pod-drinks {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.30);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
}
#screen-lobby .pod-drinks svg { display: block; }

/* Punkte-Indikator (Position im Spieler-Loop, Apple-Page-Dots). */
#screen-lobby .pod-dots {
  flex-basis: 100%;
  display: flex; justify-content: center; gap: 6px;
  margin-top: 14px;
}
#screen-lobby .pod-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: all 0.2s ease;
}
#screen-lobby .pod-dots i.on { background: #fff; width: 16px; border-radius: 999px; }

/* (Das frühere Tresen-Spieler-Grid (.tab-panel/.player/.pplate) und der
   .mat-divider wurden durch das Podium + .section-title ersetzt.) */

/* ---- 3) Spiele-KARUSSELL: Mitte = ausgewählt & groß, Seiten kleiner --------
   3 sichtbare Slots. Tipp auf eine Seiten-Karte oder horizontales Wischen
   rotiert im Loop; die Karte in der Mitte ist automatisch die ausgewählte. */
#screen-lobby .games-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 8px 10px;
  touch-action: pan-y;
}
/* Karten-Basis: Apple-Karte mit großem Radius + weichem Schatten. */
#screen-lobby .gc-card {
  position: relative;
  flex: 0 0 auto;
  border: none;
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 16px 36px rgba(27, 53, 86, 0.28);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
#screen-lobby .gc-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* contain statt cover: das ganze Bild bleibt sichtbar — die volle BREITE wird
     nie beschnitten. Die Karte hat unten (aspect-ratio) das Rohformat der Bilder,
     also füllt das Bild sie i.d.R. randlos aus. */
  object-fit: contain;
}
/* (Der dunkle Scrim am unteren Kartenrand wurde entfernt — es gibt keine
   Name/Beschreibung mehr, das Bild soll unverdunkelt bleiben.) */
/* Mitte: groß + Gold-Ring (= ausgewähltes Spiel). Die BREITE ist fix/screen-
   responsiv (min(52vw,200px)); die HÖHE folgt dem ROHFORMAT der Spielbilder
   (512×620 ≈ 512/620) → das Bild sitzt breitenfüllend & unbeschnitten drin. */
#screen-lobby .gc-center {
  width: min(52vw, 200px);
  aspect-ratio: 512 / 620;
  z-index: 2;
}
/* Ausgewählt: gleichmäßiger Gold-Rahmen (ringsum 4px, einheitlich) mit einem
   kleinen ABSTAND zum Bild via outline-offset. Der Rahmen überlappt das Bild
   NICHT mehr — das 3:4-Bild bleibt unangetastet und sitzt perfekt darin.
   (outline-offset = Knopf für den Abstand rundum.) */
#screen-lobby .gc-center.selected {
  outline: 4px solid var(--sp-gold);
  box-shadow: 0 18px 40px rgba(27, 53, 86, 0.32);
}
/* Alle ANGEZEIGTEN, aber NICHT ausgewählten Karten (Seiten + Mitte-ohne-Auswahl)
   bekommen eine WEISSE Umrandung — gleiche 4px-Stärke wie der Gold-Rahmen der
   Auswahl, damit der Look einheitlich bleibt. */
#screen-lobby .gc-card:not(.selected) {
  outline: 4px solid #ffffff;
}
/* Seiten: kleiner (allein über die Breite), leicht abgedunkelt. KEINE Ruhe-
   Transform (scale) — sonst würde die FLIP-Endlage (scale 1) einen 4%-Sprung
   machen; die Größe kommt rein aus der Breite. */
#screen-lobby .gc-side {
  width: min(30vw, 118px);
  aspect-ratio: 512 / 620;
  opacity: 0.75;
}
#screen-lobby .gc-side:hover { opacity: 0.95; }
/* Stimmen-Badge oben rechts. */
#screen-lobby .gc-votes {
  position: absolute; top: 8px; right: 8px;
  min-width: 24px; height: 24px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--sp-ink);
  font-family: var(--font-ui); font-size: 12px; font-weight: 800;
  box-shadow: 0 4px 10px rgba(27, 53, 86, 0.3);
  z-index: 3;
}

/* ---- 5) Apple-DOCK: rundes, blau-transparentes Menü, fixiert unten --------- */
#screen-lobby .dock {
  position: fixed;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(96, 165, 225, 0.38);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
          backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 14px 34px rgba(27, 53, 86, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  z-index: 60;
}
#screen-lobby .dock-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 66px;
  padding: 8px 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
#screen-lobby .dock-btn svg { display: block; }
#screen-lobby .dock-btn:active { transform: scale(0.94); }
#screen-lobby .dock-btn.active {
  background: rgba(255, 255, 255, 0.9);
  color: var(--sp-ink);
  box-shadow: 0 6px 16px rgba(27, 53, 86, 0.25);
}

/* Einstellungs-Sheet (öffnet über dem Dock). */
#screen-lobby .sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(14, 32, 56, 0.35);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  z-index: 70;
}
#screen-lobby .settings-sheet {
  position: fixed;
  left: 50%; bottom: 92px;
  transform: translateX(-50%);
  width: min(86vw, 340px);
  padding: 20px 20px 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
          backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 24px 60px rgba(27, 53, 86, 0.35);
  z-index: 71;
  animation: sheetUp 0.25s ease;
}
@keyframes sheetUp {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
#screen-lobby .settings-sheet h3 {
  font-family: var(--font-ui);
  font-size: 19px; font-weight: 800; letter-spacing: -0.3px;
  color: var(--sp-ink);
  margin: 0 0 14px;
}
#screen-lobby .settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600;
  color: var(--sp-ink);
}
#screen-lobby .settings-row .lang-switch { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  #screen-lobby .pod-slot, #screen-lobby .gc-card,
  #screen-lobby .settings-sheet { transition: none !important; animation: none !important; }
}