/* ---- Live (tab-live.js) ---- */
.not-started { text-align: center; padding: 40px 20px; color: var(--md-sys-color-on-surface-variant); }
.not-started h2 { color: var(--md-sys-color-on-surface); font-size: 22px; margin-bottom: 8px; }
#notStartedSub { margin-top: 8px; }
#preRaceGuide { max-width: 480px; margin: 28px auto 0; text-align: left; }
#preRaceGuide .section-title { margin-bottom: 8px; }
/* Boxen Aktiv / Nächster / Übernächster */
.live-rider-box { position: relative; background: var(--md-sys-color-surface-container-high); border-radius: 12px;
                  padding: 12px 14px; border: 1px solid var(--md-sys-color-outline-variant);
                  margin-bottom: 8px; }
.live-rider-box.live-rider-active { border-width: 2px; padding: 16px 14px; }
.live-rider-box.live-rider-next { border-color: var(--md-sys-color-secondary); border-width: 2px; }
.live-box-name { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.live-rider-active .live-box-name { font-size: 20px; }
.live-box-sub { font-size: 12px; color: var(--md-sys-color-on-surface-variant); margin-top: 2px; }
.live-status-msym { width: 22px; height: 22px; flex-shrink: 0; }
.live-finish-line { margin-top: 4px; }
.live-rider-active .lap-chip { font-size: 13px; }
.live-rider-active .lights-badge, .live-rider-active .start-lap-badge { width: 26px; height: 26px; }
.live-rider-active .lights-badge svg, .live-rider-active .start-lap-badge svg { width: 17px; height: 17px; }
/* Eine Zeile, kein Umbruch (.live-name-line der Live-Boxen): Status-Icon · Name (füllt den Rest) ·
   Runden-Symbole rechtsbündig darüber gelegt. Ein zu langer Name blendet vor den Symbolen aus (mask);
   --rounds (Anzahl Symbole, inline gesetzt in renderLiveRiders) bestimmt, wo: Symbolbreite = Anzahl × 20 px + Abstände 3 px. */
.live-name-line { display: flex; align-items: center; gap: 6px; position: relative;
  --rounds-w: calc(var(--rounds, 1) * 23px - 3px); }
.live-name-line .rider-tag { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--rounds-w) - 32px), transparent calc(100% - var(--rounds-w) - 6px));
          mask-image: linear-gradient(to right, #000 calc(100% - var(--rounds-w) - 32px), transparent calc(100% - var(--rounds-w) - 6px)); }
/* Runden-Symbole als Reihe; in Live direkt hinter dem Namen, 30 % größer (15 → 20 px) */
.live-lap-icons { display: inline-flex; gap: 3px; align-items: center; margin-top: 4px; }
#liveRidersView .live-lap-icons { margin: 0 0 0 8px; vertical-align: middle; }
#liveRidersView .live-lap-icons .lucide-icon { width: 20px; height: 20px; }
#liveRidersView .live-name-line .live-lap-icons {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; }
/* Chip rechts vor den Runden-Symbolen; der Name blendet dann vor dem Chip aus */
#liveRidersView .live-name-line .lap-chip { margin: 0 calc(var(--rounds-w) + 8px) 0 0; }
#liveRidersView .live-name-line:has(.lap-chip) .rider-tag {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); }
/* Übergabe-Zeile zwischen den Boxen: Symbol und Zeit linksbündig, mit gestrichelter Linie links */
.live-handover-box { display: flex; align-items: center; justify-content: center; gap: 6px;
                     font-size: 12px; color: var(--md-sys-color-on-surface-variant);
                     padding: 6px 0; }
.live-handover-box .lucide-status-icon { width: 18px; height: 18px; }
#liveRidersView .live-handover-box { justify-content: flex-start;
  border-left: 2px dashed var(--md-sys-color-outline-variant); margin-left: 20px; padding-left: 10px; }
/* unter dem Übernächsten: „· danach noch n Runden geplant“ */
.live-handover-more::before { content: '·'; margin: 0 6px 0 0; }
/* „Im Fahrerlager“: schmale Panels untereinander, 2 px Abstand */
#benchPanel .section-title { margin-top: 16px; }
.live-bench-card { background: var(--md-sys-color-surface-container-high); border-radius: 12px; padding: 8px 14px;
                  border: 1px solid var(--md-sys-color-outline-variant); margin-bottom: 2px; }
.live-bench-card .live-action-row { margin-top: 6px; }
.next-name { font-size: 15px; font-weight: 700; }
/* Aktions-Buttons aller Live-Boxen (actionButtonHtml/actionRowHtml in tab-live.js) */
.live-action-row { display: flex; gap: 8px; margin-top: 10px; }
/* Dunkler 2-px-Rand, damit sich die Buttons auch von der farbigen Fortschritts-Füllung abheben.
   Als innerer Ring (inset) statt border: ändert die Breite nicht – Dreier-Reihen passen auf 360 px ohne Spielraum. */
.live-action-row .btn { margin: 0; flex: 1; min-width: 0; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .55); }
/* Drei Buttons nebeneinander: kompakter, einzeilig (passt auf 360 px breite Handys) */
.live-action-row-3 { gap: 6px; }
.live-action-row-3 .btn { font-size: 13px; padding: 14px 4px; gap: 4px; white-space: nowrap; letter-spacing: 0; }
/* Countdown/Restzeit unter 3 min */
/* Countdown unter 3 min bzw. „Jetzt!“ (Live, Einsätze) und „Runde überfällig“: kräftiges Rot statt des blassen Theme-Fehlerrots */
.is-urgent { color: var(--red-text); font-weight: 700; }

/* Block startet nach dem Rennende: nur die Namenszeile gedimmt (ohne flag-off), Buttons bleiben in voller Farbe */
.live-rider-box.is-after-end .live-name-line > :not(.after-end-badge) { opacity: .5; }