/* TELACY ESPORTS — Twitch live (C3, 04.10.2026)
   Leiste "Live now" auf Startseite und Teamseite, Player im Profil,
   Bereich "Featured streamers" im Dashboard. Farben und Abstaende aus
   site.css (--live, --brand, --gap, --pad). Live ist Petrol (--live),
   wie der Live-Punkt im Rest der Seite, nicht Twitch-Lila. */

/* ── Live-Marke ─────────────────────────────────────────────── */
.lvs-live{display:inline-flex;align-items:center;gap:7px;padding:4px 8px;background:rgba(13,13,16,.82);
  border:1px solid rgba(56,163,165,.55);color:#fff;font:700 10.5px/1 'Chakra Petch',sans-serif;
  letter-spacing:.16em;text-transform:uppercase}
.lvs-live i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--live);flex:none}
.lvs-live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--live);animation:ping 2.4s var(--e) infinite}
@media (prefers-reduced-motion:reduce){.lvs-live i::after{animation:none}}

/* ── Leiste ─────────────────────────────────────────────────── */
.lvs-leiste{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--gap)}
.lvs-karte{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);background:var(--s1);
  transition:border-color .25s,transform .35s var(--e)}
.lvs-karte:hover{border-color:var(--line2);transform:translateY(-3px)}
.lvs-karte.an{border-color:rgba(56,163,165,.6)}
.lvs-wahl{display:block;width:100%;padding:0;text-align:left}
.lvs-bild{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--s2)}
.lvs-bild .lvs-vor{width:100%;height:100%;object-fit:cover}
.lvs-bild .lvs-live{position:absolute;left:10px;top:10px}
.lvs-zus{position:absolute;right:10px;bottom:10px;padding:3px 7px;background:rgba(13,13,16,.82);color:var(--txt);font-size:12px}
.lvs-bild .lvs-ava{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px}
.lvs-txt{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px;min-width:0}
.lvs-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.lvs-name{font:700 15px/1.2 'Chakra Petch',sans-serif;color:var(--white);text-transform:uppercase;letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
a.lvs-name:hover{color:var(--brand-l)}
.lvs-wer{flex:none;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim);
  font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.lvs-titel{margin:0;color:var(--txt);font-size:14px;line-height:1.4;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.lvs-spiel{margin:0;color:var(--dim);font-size:13px}
.lvs-hinweis{margin:0;color:var(--dim);font-size:12.5px;line-height:1.5}
.lvs-hinweis a{color:var(--brand-l);text-decoration:underline;text-underline-offset:2px}
.lvs-unten{margin-top:14px}

/* ── Buehne: Player oder Platzhalter ────────────────────────── */
.lvs-buehne{margin-bottom:var(--gap)}
.lvs-rahmen{position:relative;aspect-ratio:16/9;width:100%;background:#000;overflow:hidden;border:1px solid var(--line)}
.lvs-rahmen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lvs-grund{position:absolute;inset:0;background:radial-gradient(90% 120% at 20% 0%,rgba(120,64,224,.35),transparent 60%),
  linear-gradient(160deg,var(--s2),var(--s1));background-size:cover;background-position:center}
.lvs-platz .lvs-grund{filter:saturate(.9)}
.lvs-schleier{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,16,.35),rgba(13,13,16,.9))}
.lvs-platzin{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  gap:10px;padding:clamp(16px,3vw,32px);overflow:auto}
.lvs-platzkopf{display:flex;align-items:center;gap:14px;min-width:0;max-width:100%}
.lvs-platzkopf > div{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.lvs-platzkopf .lvs-name{font-size:clamp(18px,2.4vw,26px)}
.lvs-platz .lvs-titel{max-width:60ch;font-size:15px}
.lvs-meta{margin:0;color:var(--dim);font-size:13.5px}
.lvs-platz .lvs-hinweis{max-width:56ch}
.lvs-ava{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid rgba(56,163,165,.7);flex:none;background:var(--s3)}
.lvs-ava.leer{display:grid;place-items:center;color:var(--white);font:700 22px/1 'Chakra Petch',sans-serif}

/* Startseite: erster Abschnitt unter dem Hero */
.lvs-start .sh{padding-top:var(--sec)}

/* Teamseite: Live steht ueber dem Kader. Der Kader traegt padding-top:0
   inline, weil er sonst der erste Abschnitt ist; mit Live darueber braucht
   er wieder den normalen Abstand. */
#live > .sh{padding-top:0}
#live:not([hidden]) ~ #roster > .sh{padding-top:var(--sec) !important}

/* Profil: Player ueber den Teams */
.lvs-profil > .sh{padding-top:0}
.lvs-profil .lvs-buehne{margin-bottom:10px}
.lvs-pzeile{margin:0;color:var(--dim);font-size:14px;overflow-wrap:anywhere}
.lvs-profil + section > .sh{padding-top:var(--sec)}

@media (max-width:640px){
  .lvs-leiste{grid-template-columns:1fr}
  .lvs-platzin{gap:8px;padding:14px}
  .lvs-ava{width:44px;height:44px}
  .lvs-platz .lvs-titel{font-size:13.5px;-webkit-line-clamp:2}
  .lvs-platz .lvs-hinweis{font-size:11.5px}
  /* Auf dem Telefon ist 16:9 fuer Platzhalter mit Text zu flach. */
  .lvs-rahmen.lvs-platz{aspect-ratio:auto;min-height:300px}
  .lvs-platzin{position:relative;inset:auto;min-height:300px}
}

/* ══ Dashboard: Featured streamers ═══════════════════════════ */
.lvsd-hinweis{margin-bottom:18px;padding:12px 14px;border:1px solid rgba(253,197,0,.4);background:rgba(253,197,0,.07);
  color:var(--txt);font-size:14px;line-height:1.5}
.lvsd-kopf{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.lvsd-suchf{flex:1 1 240px;max-width:360px}
.lvsd-stand{margin-left:auto;color:var(--dim);align-self:center}
.lvsd-h{margin:26px 0 6px;font-size:15px;color:var(--white);text-transform:uppercase;letter-spacing:.08em}
.lvsd-h .sm{margin-left:6px;color:var(--dim);font:500 13px/1 Barlow,sans-serif;letter-spacing:0}
.lvsd-satz{margin:0 0 12px;color:var(--dim);font-size:13.5px}
.lvsd-liste{display:flex;flex-direction:column;border:1px solid var(--line)}
.lvsd-zeile{display:grid;grid-template-columns:18px auto minmax(0,1.4fr) minmax(0,1fr) auto 72px;align-items:center;gap:14px;
  padding:10px 14px;border-top:1px solid var(--line);background:var(--s1)}
.lvsd-zeile:first-child{border-top:0}
.lvsd-zeile[draggable]{cursor:grab}
.lvsd-zeile.zieht{opacity:.45}
.lvsd-zeile.ziel{box-shadow:inset 0 2px 0 var(--brand)}
.lvsd-zeile.ziel.unten{box-shadow:inset 0 -2px 0 var(--brand)}
.lvsd-griff{color:var(--dim);display:grid;place-items:center}
.lvsd-griff svg{width:16px;height:16px}
.lvsd-wer{display:flex;flex-direction:column;gap:3px;min-width:0}
.lvsd-wer b{color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvsd-kanal{color:var(--dim);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvsd-kanal:hover{color:var(--brand-l)}
.lvsd-teams{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.lvsd-teams .pill{font-size:11.5px;padding:3px 7px}
.lvsd-live{display:inline-flex;align-items:center;gap:8px;color:var(--txt);font-size:12.5px;white-space:nowrap}
.lvsd-aus{color:var(--dim);font-size:12.5px}
.lvsd-akt{display:inline-flex;gap:6px;justify-content:flex-end}
.lvsd-sw{display:inline-flex;align-items:center;min-height:34px}
.lvsd-sw[disabled]{opacity:.6;cursor:progress}
.lvsd-spur{position:relative;width:38px;height:22px;border-radius:11px;background:var(--s3);border:1px solid var(--line2);
  transition:background .2s var(--e),border-color .2s var(--e)}
.lvsd-spur::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--dim);
  transition:transform .2s var(--e),background .2s var(--e)}
.lvsd-sw[aria-checked="true"] .lvsd-spur{background:var(--brand);border-color:var(--brand)}
.lvsd-sw[aria-checked="true"] .lvsd-spur::after{transform:translateX(16px);background:var(--white)}
@media (max-width:900px){
  .lvsd-zeile{grid-template-columns:18px auto minmax(0,1fr) auto;grid-template-areas:"g s w a" "g s t l";row-gap:8px}
  .lvsd-griff{grid-area:g}.lvsd-sw{grid-area:s}.lvsd-wer{grid-area:w}.lvsd-teams{grid-area:t}.lvsd-live,.lvsd-aus{grid-area:l}.lvsd-akt{grid-area:a}
  .lvsd-stand{margin-left:0;flex-basis:100%}
}

/* Gruppen nach Team und von Hand dazuholen (05.10.2026) */
.lvsd-gruppe{margin:14px 0 0;padding:10px 14px 6px;font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);border-top:1px solid var(--line)}
.lvsd-liste > .lvsd-gruppe:first-child{margin-top:0;border-top:0}
.lvsd-dazuf{max-width:520px;margin:6px 0 14px}
.lvsd-dazuliste{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.lvsd-dazuliste:empty{display:none}
.lvsd-dazuz{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border:1px solid var(--line);background:var(--s2)}
.lvsd-dazuz .lvsd-wer{display:flex;flex-direction:column;min-width:0}
.lvsd-weg{font-size:18px;line-height:1}