/*
 * Race / Match Center — styly lightboxu pro sledujzive.cz
 * Vychází z dodané UX šablony UX_UI-race_match_center.html.
 */
:root {
  --mc-bg: #0b0e15;
  --mc-line: #1f2636;
  --mc-line-soft: #161c2a;
  --mc-text: #fff;
  --mc-text-2: #cfd4dd;
  --mc-text-3: #8a93a4;
  --mc-text-4: #5b6478;
  --mc-accent: rgb(233 30 99);
  --mc-accent-dim: rgba(233, 30, 99, .18);
  --mc-accent-mid: rgba(233, 30, 99, .4);
  --mc-warn: #f3b13c;
  --mc-err:  rgb(233 30 99);
  --mc-shadow: 0 30px 80px rgba(0,0,0,.55), 0 12px 30px rgba(0,0,0,.35);
  --mc-font: -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.open-mc-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--mc-accent); color:#0b0e15;
  border:0; border-radius:6px; padding:10px 16px;
  font-weight:700; cursor:pointer; font-family:inherit;
}

#match-center-lightbox {
  position:fixed; inset:0; z-index:9999;
  height:100vh;
  background:rgba(4,7,14,.5); backdrop-filter:none;
  display:flex; align-items:flex-start; justify-content:flex-end;
  padding:0;
  font-family:var(--mc-font);
  letter-spacing:-0.01em;
}
#match-center-lightbox[hidden] { display:none !important; }

.race-center {
  position:relative; width:100%; max-width:1040px;
  background:var(--mc-bg); color:var(--mc-text);
  border:0; border-radius:0;
  box-shadow:var(--mc-shadow); overflow:hidden;
  max-height:100vh;height:100vh;
  display:flex; flex-direction:column;
}

.race-center .close-btn {
  position:absolute; top:14px; right:14px; z-index:10; border-radius:50%;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1; border: none; width: 50px; height: 50px; background: #1f2637; color: white;
}
.race-center .close-btn:hover { color:var(--mc-text); }
.race-center .close-btn svg { max-width: 14px; }
.race-center .body {
  display:grid; grid-template-columns:380px 1fr; flex:1; min-height:0; width:100%;
}

/* ---- LEVÝ panel ---- */
.race-center .left {
  border-right:1px solid var(--mc-line);
  overflow-y:auto; display:flex; flex-direction:column;
}
.race-center .left::-webkit-scrollbar { width:6px; }
.race-center .left::-webkit-scrollbar-thumb { background:var(--mc-line); border-radius:3px; }

.race-center .sec {
  padding:22px 28px; border-bottom:1px solid var(--mc-line);
}
.race-center .sec:last-child { border-bottom:0; }

.race-center .kicker {
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mc-text-4); font-weight:700; line-height:1;
  margin-bottom:14px; display:block;
}

.race-center .live-line {
  display:flex; align-items:center; gap:8px; margin-bottom:10px; margin-top:10px;
}
.race-center .live-line .v {
  font-size:12px; font-weight:700; color:var(--mc-accent);
  font-variant-numeric:tabular-nums; letter-spacing:.04em;
}
.race-center .live-line.state-before .v { color:white }
.race-center .live-line.state-after  .v { color:var(--mc-text-3); }

/* Pulsing apostrof — indikátor že zápas běží */
.race-center .pulsing-apos {
  display:inline-block;
  animation: mc-apos-pulse 1.1s ease-in-out infinite;
}
@keyframes mc-apos-pulse {
  0%, 100% { opacity:1; }
  50%      { opacity:.25; }
}

/* Týmy + skóre */
.race-center .team-row {
  display:flex; align-items:baseline; justify-content:space-between;
  padding:7px 0;
}
.race-center .team-row + .team-row { border-top:1px solid var(--mc-line-soft); }
.race-center .team-row .name {
  font-size:25px; font-weight:700; letter-spacing:-0.015em; color:var(--mc-text);
}
.race-center .team-row .scr {
  font-size:32px; font-weight:800; font-variant-numeric:tabular-nums;
  letter-spacing:-0.03em; color:var(--mc-text);
}
.race-center .team-row.win .scr { /* color:var(--mc-accent);*/
 }
.race-center .partial {
  margin-top: 14px; font-size: 13px; color: var(--text-3); font-weight: 600; letter-spacing: .04em; line-height: 1.5;
}

/* Aktuální situace (narrative) */
.race-center .ed-dyn-text {
  font-size:18px; font-weight:700; letter-spacing:-0.015em;
  color:var(--mc-text); line-height:1.35;
  padding-left:14px; border-left:2px solid var(--mc-accent);
}

/* Cyklistika / rally — editorial layout */
.race-center .ed-name {
  font-size:28px; font-weight:700; letter-spacing:-0.02em;
  color:var(--mc-text); line-height:1.2;
}
.race-center .ed-name em { font-style: normal; font-weight: 400; color: var(--mc-text-3); font-size: 13px; display: block; margin-top: 4px; font-size: 25px; color: var(--text-3); font-weight: 600; line-height: 1.5; }
.race-center .ed-info-line {
  margin-top:14px; font-size:13px; color:var(--mc-text-3);
  font-weight:600; letter-spacing:.04em; line-height:1.5;
}
.race-center .ed-info-line b {
  color:var(--mc-accent); font-weight:800;
  font-variant-numeric:tabular-nums; font-size:16px; letter-spacing:-0.01em;
}
.race-center .ed-info-line b.name {
  color:var(--mc-text); font-weight:700; font-size:14px; letter-spacing:-0.005em;
}

/* Klíčové momenty (events) */
.race-center .events { display:flex; flex-direction:column; gap:0px; }
.race-center .event {
  display:grid; grid-template-columns:43px 72px 1fr auto;
  align-items:center; gap:10px; padding:6px 0; font-size:13px;
}
.race-center .event .min {
  font-weight:600; color:var(--mc-text-3); font-variant-numeric:tabular-nums;
}
.race-center .event .tag {
  font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:800; color:var(--mc-accent); text-align:left;
}
/* Gól — výrazná barva (akcent). Trest/karta — tlumeně. */
.race-center .event .tag.goal { color:var(--mc-accent); }
.race-center .event .tag.penalty,
.race-center .event .tag.pen,
.race-center .event .tag.miss { color:var(--mc-text-3); }
.race-center .event .tag.yel { color:var(--mc-warn); }
.race-center .event .tag.red { color:#c0392b; }
.race-center .event .player { color:var(--mc-text-2); font-weight:600; }
/* Asistence u gólu i důvod u vyloučení/karty — oboje inline uvnitř .player,
   stejný vizuál, jen šedý nenápadný text v závorce za jménem hráče. */
.race-center .event .player .assist,
.race-center .event .player .reason {
  color:var(--mc-text-4); font-weight:400; font-size:12px;
}
.race-center .event .team { color:var(--mc-text-4); font-size:11.5px; }
/* Trest má decentní šedý pruh vlevo, gól ne */
.race-center .event.penalty,
.race-center .event.card-yel,
.race-center .event.card-red,
.race-center .event.miss {
}
.race-center .event.card-red { border-left-color:#c0392b; }

/* Skupiny událostí po třetinách */
.race-center .period-block + .period-block { margin-top: 10px; }
.race-center .period-title {
  margin: 8px 0 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--mc-text-3);
  border-top: 1px solid var(--mc-line);
  padding-top: 15px;
}
.race-center .period-block:first-child .period-title {
  border-top: 0; padding-top: 0;
}

/* ---- PRAVÝ panel — feed ---- */
.race-center .right {
  display:flex; flex-direction:column; min-height:0; position:relative;
}
.race-center .feed-header {
  padding:24px 28px 18px; 
}
.race-center .feed-header h2 {
  margin:0; font-size:22px; font-weight:700;
  letter-spacing:-0.02em; color:var(--mc-text); text-transform: none;
}
.race-center .feed-header h2 em {
  font-style:normal; font-weight:400; color:var(--mc-text-3);
  margin-left:4px; font-size:14px;
}

.race-center .feed {
  flex:1; overflow-y:auto; padding:0 28px 100px;
}
.race-center .feed::-webkit-scrollbar { width:8px; }
.race-center .feed::-webkit-scrollbar-thumb { background:var(--mc-line); border-radius:4px; }

.race-center .block {
  padding:22px 0; border-bottom:1px solid var(--mc-line-soft);
}
.race-center .block:last-child { }
article.block.welcome { border-bottom: none; }

.race-center .block-min {
  font-size:26px; font-weight:800; color:var(--mc-text-3);
  font-variant-numeric:tabular-nums; letter-spacing:-0.02em; line-height:1;
  margin-bottom:12px; display:flex; align-items:baseline; gap:10px;
}
.race-center .block-min .unit {
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mc-text-4); font-weight:700;
}
.race-center .block-min .status {
  margin-left:auto; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mc-text-4); font-weight:700;
}
.race-center .block.latest .block-min { color:var(--mc-accent); }
.race-center .block.latest .block-min .unit { color:var(--mc-accent); opacity:.7; }
.race-center .block.latest .block-min .status { color:var(--mc-accent); }

/* Stavové badge pod nadpisem RZ (zrušená/pozastavená RZ).
   Vykresluje se na základě nejnovějšího info_extra textu z rally-base. */
.race-center .rz-alert {
font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 4px; line-height: 1.3; font-size: 10px; padding: 3px 7px; margin: 0px 0 15px 0; display: table;
}
.race-center .rz-alert + .rz-alert { margin-left:8px; }
.race-center .rz-alert-cancelled {
background: rgb(233 30 99 / 15%); color: #E91E63;
}
.race-center .rz-alert-paused {
  background:rgba(230, 126, 34, .12); color:var(--mc-warn);
  border:1px solid rgba(230, 126, 34, .3);
}

.race-center .block-body {
  font-size:15px; line-height:1.7; color:var(--mc-text-2); margin:0;
}
.race-center .block-body b { color:var(--mc-text); font-weight:700; }
.race-center .block-body b.goal { color:var(--mc-accent); }

.race-center .summary-block .block-body {
  font-size:16px; color:var(--mc-text);
}

article.block.summary-block p.block-body {
    font-size: 18px;
    color: var(--text-2);
    line-height: 1.6;
    font-weight: 400;
    margin-top: 10px;
}
span.paragraph-break { display: block; margin-bottom: 0.5em; }

/* ---- Skončená událost — vizuální úklid ---- */
/* Žádný "Aktuální situace" panel, ten dává smysl jen během hry */
.race-center.state-after .narrative-wrap { display:none; }
/* Časově orientovaný "nejnovější" už není relevantní — zrušíme zelenou
 * highlighta a status nálepku ("nejnovější"), tenhle blok je teď
 * jen poslední úsek hry */
.race-center.state-after .block.latest .block-min { color:var(--mc-text-3); }
.race-center.state-after .block.latest .block-min .unit { color:var(--mc-text-4); opacity:1; }
.race-center.state-after .block.latest .block-min .status { display:none; }
/* Místo toho dáme zelený highlight na shrnutí — to je teď skutečně
 * "nejdůležitější" blok */
.race-center.state-after .summary-block .block-min { color:var(--mc-accent); }
.race-center.state-after .summary-block .block-min .unit { color:var(--mc-accent); opacity:.7; }
.race-center.state-after .summary-block .block-min .status { color:var(--mc-accent); }

/* Rally tabulky uvnitř bloku */
.race-center .feed table {
  width:100%; border-collapse:collapse; margin-top:14px; font-size:13px;
}
.race-center .feed table th {
  font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--mc-text-4); font-weight:700; text-align:left;
  padding:6px 4px; border-bottom:1px solid var(--mc-line);
}
.race-center .feed table td {
  padding:6px 4px; color:var(--mc-text-2);
  border-bottom:1px solid var(--mc-line-soft);
}

/* Refresh tlačítko */
.race-center .refresh-fixed {
  position:absolute; left:0; right:0; bottom:0;
  padding:18px 28px;
  background:linear-gradient(180deg, transparent 0%, rgba(11,14,21,.92) 30%, var(--mc-bg) 100%);
  pointer-events:none; z-index:5;
}
.race-center .refresh {
  pointer-events:auto; position:relative; width:100%;
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; background:var(--mc-bg);
  border:1px solid var(--mc-line-soft); border-radius:999px;
  color:var(--mc-text); cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600; text-align:left;
  overflow:hidden; transition:border-color .2s;
}
/* Progress bar — GPU-akcelerovaný přes transform: scaleX.
 * Pure CSS animace, žádné per-second updaty z JS = žádné layout/paint cykly.
 * Délka cyklu se nastavuje přes CSS proměnnou ``--mc-refresh-duration``. */
.race-center .refresh::before {
  content:""; position:absolute; left:0; top:0; bottom:0; right:0;
  background:var(--mc-accent-dim);
  transform:scaleX(0); transform-origin:left;
  animation: mc-refresh-progress var(--mc-refresh-duration, 30s) linear infinite;
  will-change: transform;
}
@keyframes mc-refresh-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* Reset (manuální klik nebo dokončený cyklus) — krátkodobé zrušení animace
 * která se hned po reflow znovu nastartuje. */
.race-center .refresh.mc-reset-progress::before { animation: none; }

.race-center .refresh > * { position:relative; }
.race-center .refresh:hover { border-color:var(--mc-accent-mid); }
.race-center .refresh .ico {
  width:32px; height:32px; border-radius:50%;
  background:rgba(233, 30, 99,.12); color:var(--mc-accent);
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 32px;
}
.race-center .refresh .ico svg { width:14px; height:14px; }
.race-center .refresh .lbl { flex:1; }
.race-center .refresh .lbl .t {
  display:block; font-size:13px; font-weight:700; color:var(--mc-text);
}
.race-center .refresh .lbl .s {
  display:block; font-size:11px; color:var(--mc-text-3);
  font-weight:500; margin-top:1px;
}
.race-center .refresh .count {
  font-size:13px; font-weight:700; color:var(--mc-text-3);
  font-variant-numeric:tabular-nums;
}
.race-center .refresh .count small {
  font-size:10px; color:var(--mc-text-4); margin-left:1px;
}

/* ---- TABY: "Online přenos" / "Klíčové momenty" (desktop + mobile) ----
   Taby se zobrazují jen pro sporty s klíčovými momenty (hokej, fotbal).
   Pro cyklo/rally zůstává klasický h2 nadpis a tab bar zmizí.
   Viditelnost je řízena třídou .has-key-moments na .race-center, kterou
   JS přidává/odebírá podle aktuálního sportu. */
.race-center .feed-tabs { display:none; }
.race-center .events-tab { display:none; }

.race-center.has-key-moments .feed-header {
  padding:0; border-bottom:0;
}
.race-center.has-key-moments .feed-header h2 { display:none; }

.race-center.has-key-moments .feed-tabs {
  display:grid; grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--mc-line); width:100%;
}
.race-center .tab-btn {
  appearance:none; background:transparent; border:0; padding:16px 12px;
  font-family:inherit; font-size:13px; font-weight:700;
  color:var(--mc-text-3); letter-spacing:-0.01em; cursor:pointer;
  position:relative; transition:color .15s;
}
.race-center .tab-btn:hover { color:var(--mc-text-2); }
.race-center .tab-btn.active { color:var(--mc-text); }
.race-center .tab-btn.active::after {
  content:""; position:absolute; left:18px; right:18px; bottom:-1px;
  height:2px; background:var(--mc-accent); border-radius:2px;
}

/* Events tab — zobrazí se až po kliknutí na "Klíčové momenty" */
.race-center.has-key-moments .events-tab.active {
  display:block;
  flex:1; overflow-y:auto; padding:18px 28px 100px;
}
.race-center .events-tab .events { gap:0px; }
.race-center .events-tab .event { padding:8px 0; font-size:14px; }

/* Když je aktivní events tab, feed se skryje */
.race-center .feed.hidden { display:none; }

.race-center.state-after .refresh .count{ display: none; } .race-center.state-after .refresh .lbl .s{ display: none; } .race-center.state-after .refresh::before {animation:none; }

/* ---- MOBILE ---- */
@media (max-width:820px) {
  #match-center-lightbox { padding:40px 0 0; background: rgba(4, 7, 14, .75);}
  .race-center {
    max-width:100%; border-radius:0; border:0;
    max-height:calc(100dvh - 39px); overflow: unset;
  }
  .race-center .close-btn{ top: -25px; }
  .race-center .refresh .lbl .t{ line-height: 1.6; }
  .race-center .team-row .name { font-size: 20px; } .race-center .team-row .scr{ font-size: 25px; }
  .race-center .body { grid-template-columns:1fr; }
  .race-center .left {
    border-right:0; border-bottom:1px solid var(--mc-line);
  }
  .race-center .sec { padding:18px; }
  .race-center .feed { padding:0 18px 100px; }
  .race-center .refresh-fixed { padding:16px 18px; }

  /* Na mobilu posuneme padding events tabu (na desktopu má 28px po stranách) */
  .race-center.has-key-moments .events-tab.active {
    padding:18px 18px 100px;
  }

  /* Cyklo/rally na mobilu — vrátíme h2 stejně jako na desktopu
     (nemají taby, takže feed-header zůstává klasický) */
  .race-center .feed-header {
    padding:18px 18px 14px; border-bottom:1px solid var(--mc-line);
  }
  /* Pro hokej/fotbal už feed-header s padding=0 řeší pravidlo
     .race-center.has-key-moments .feed-header výše (universal scope). */


  /* ================================================================
   V3 — KOMPLETNÍ mobilní layout
   ================================================================ */

  /* ---- Close button: dovnitř modalu, menší ---- */
  .race-center .close-btn {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    width: 32px; height: 32px; top: 10px; right: 8px;
  }
  .race-center .close-btn svg { max-width: 12px; }

  /* ---- Sekce skóre ---- */
  .race-center .header-wrap .sec { padding: 14px 18px; }

  .race-center .live-line {
    margin-top: 4px;
    margin-bottom: 6px;
    margin-top: 11px;
  }
  .race-center .live-line .v { font-size: 11px; }

  .race-center .team-row { padding: 4px 0; }
  .race-center .team-row .name { font-size: 16px; }
  .race-center .team-row .scr  { font-size: 20px; }

  .race-center .partial {
    margin-top: 8px;
    font-size: 11px;
  }

  /* ---- Sekce narrative ---- */
  .race-center .narrative-wrap .sec { padding: 19px 18px; }
  .race-center .narrative-wrap .kicker { margin-bottom: 10px; }
  .race-center .ed-dyn-text {
    font-size: 14px;
    line-height: 1.4;
    padding-left: 10px;
  }

  /* ---- Mobile tabs ---- */
  .race-center .tab-btn {
    padding: 14px 8px;
    font-size: 12px;
  }
  .race-center .tab-btn.active::after {
    left: 18px;
    right: 18px;
  }

  /* ---- Feed: kontejner ---- */
  .race-center .feed {
    padding: 0 18px 80px;
  }

  /* ---- Feed: blocks ---- */
  .race-center .block { padding: 14px 0; }

  .race-center .block-min {
    font-size: 18px;
    margin-bottom: 6px;
    gap: 8px;
  }
  .race-center .block-min .unit   { font-size: 10px; }
  .race-center .block-min .status { font-size: 9px; }

  .race-center .block-body {
    font-size: 13px;
    line-height: 1.7;
  }

  /* ---- Feed: summary block (úvodní shrnutí) ---- */
  .race-center .summary-block .block-body,
  .race-center article.block.summary-block p.block-body {
    font-size: 15px;
    line-height: 1.6;
    margin-top: 11px;
  }

  /* ---- Refresh button: kompaktní pill ---- */
  .race-center .refresh-fixed { padding: 14px 18px; }

  .race-center .refresh {
    gap: 10px;
    padding: 10px 14px;
  }
  .race-center .refresh .ico {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
  }
  .race-center .refresh .ico svg { width: 12px; height: 12px; }

  .race-center .refresh .lbl .t {
    font-size: 12px;
    line-height: 1;
  }
  .race-center .refresh .lbl .s { display: none; }

  .race-center .refresh .count { font-size: 11px; }
  .race-center .refresh .count small { font-size: 9px; }

  .race-center {max-height: calc(100dvh - 0px);} #match-center-lightbox { padding: 0px 0 0;  }

  article.block.welcome { border-bottom: none; padding-bottom: 0px; }
  .race-center .narrative-wrap .sec { padding-top: 0px; border-top: 1px solid var(--mc-line);}
  .race-center .narrative-wrap .kicker { padding-top: 0px;}
  .race-center .events-tab .event { padding: 4px 0; font-size:13px}
  .race-center .ed-info-line {margin-top:5px}

}

.sport-rally .ed-name em { display: none; }
.race-center .rally-live-wrap:not(:empty) + .feed-wrap .block.latest .block-min {
  color: var(--mc-text-3);
}
.race-center .rally-live-wrap:not(:empty)+ .feed-wrap .block.latest .block-min .status {
  display: none;
}
.race-center .rally-live-wrap:not(:empty) + .feed-wrap .block.latest .block-min .unit { color: var(--mc-text-4); opacity: 1; }