/* ============================================================
   KVP PŘEROV — v4 podle grafické reference
   Tmavý foto-driven design: karty s modrými hairline rámy,
   žlutá CTA + cyan akcenty, „//" sekční titulky.
   ============================================================ */

:root {
  --bg:      #05080e;
  --bg-2:    #0a101a;
  --card:    #0c1420;
  --card-2:  #101a29;
  --line:    rgba(86, 140, 190, .3);
  --line-2:  rgba(86, 140, 190, .14);

  --yellow:  #ffd200;
  --cyan:    #35a8d8;
  --blue:    #1d5fa0;
  --paper:   #f2f6fa;
  --mute:    #93a2b5;

  --f-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Barlow", "Helvetica Neue", sans-serif;

  --r: 10px;
  --r-s: 6px;
  --wrap: 1280px;
  --gut: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 15.5px;
  line-height: 1.6;
  overflow-x: clip;   /* zabrání vodorovnému posunu bez vytvoření scroll kontejneru */
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::selection { background: var(--yellow); color: #0a0a0a; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* ============ Typo ============ */

h1, h2, h3, h4, .hfont {
  font-family: var(--f-head);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: .01em;
}

/* Sekční titulek: // PREFIX */
.sec-title {
  font-size: clamp(24px, 2.4vw, 32px);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.sec-title::before {
  content: "//";
  color: var(--yellow);
  font-weight: 700;
}
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.label {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
}

section { padding: 56px 0; }

/* ============ Tlačítka & chipy ============ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: var(--r-s);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn .ar { font-family: var(--f-body); font-weight: 600; }

.btn-y { background: var(--yellow); color: #0b0b0b; }
.btn-y:hover { background: #ffe04d; }
.btn-o {
  background: rgba(13, 21, 33, .55);
  border-color: var(--line);
  color: var(--paper);
}
.btn-o:hover { border-color: var(--cyan); color: #fff; }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }

.chip {
  display: inline-block;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}
.chip-y { background: var(--yellow); color: #0b0b0b; }
.chip-c { background: var(--cyan); color: #06121c; }
.chip-o { border: 1px solid var(--line); color: var(--mute); }

.t-link {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
  transition: color .15s;
  white-space: nowrap;
}
.t-link:hover { color: var(--yellow); }
.t-link .ar { font-family: var(--f-body); }

/* ============ Karty ============ */

.card {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.card-pad { padding: 20px; }

/* Foto placeholder — vodní duotone, čeká na reálné fotky */
.ph {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 25% 10%, rgba(53, 168, 216, .28), transparent 55%),
    radial-gradient(100% 100% at 85% 95%, rgba(29, 95, 160, .45), transparent 60%),
    linear-gradient(165deg, #123252, #0a1524 75%);
}
.ph::before {
  content: "";
  position: absolute; inset: -12%;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(ellipse 90px 58px at 50% 50%, rgba(70, 200, 242, .12), transparent 62%),
    radial-gradient(ellipse 150px 95px at 30% 60%, rgba(62, 139, 232, .09), transparent 66%);
  background-size: 210px 150px, 340px 250px;
  animation: caustics 22s linear infinite;
}
@keyframes caustics {
  from { background-position: 0 0, 0 0; }
  to { background-position: 210px 45px, -340px 90px; }
}
.ph::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 55%, rgba(4, 8, 14, .55));
}
.ph .ph-label {
  position: absolute;
  right: 14px; bottom: 12px;
  z-index: 2;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242, 246, 250, .35);
  text-align: right;
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.reveal.d1.in { transition-delay: .07s; }
.reveal.d2.in { transition-delay: .14s; }
.reveal.d3.in { transition-delay: .21s; }

/* ============ Header ============ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(4, 7, 12, .96), rgba(4, 7, 12, .82));
  backdrop-filter: blur(12px);
  /* jemný stín místo tvrdé čáry — logo přesahuje bez rušivé linky */
  box-shadow: 0 12px 34px -18px rgba(0, 0, 0, .9);
}
.header-in {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
}

/* Logo — velké s přesahem pod hlavičku do stránky (nezvětšuje menu) */
.site-header { overflow: visible; }
.header-in { position: relative; min-height: 48px; }
.logo-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 5;
}
/* Vytržení z toku patří jen hlavičce — tam je `.header-in` relative a logo má
   schválně přesahovat pod okraj. Stejnou třídu ale nese i lockup v patičce
   (`.f-brand`), a ta pozicovaná není: absolutní box se vztáhl k celému
   dokumentu a logo z patičky přistálo na (24, 2), schované pod hlavičkou. */
.header-in .logo-lockup {
  position: absolute;
  left: 24px; top: 2px;                                      /* zarovnáno s levým krajem obsahu (jako text) */
  transition: top .22s ease;
}
.logo-lockup img {
  /* Prozatímní značka je na šířku (1200x888), stará plaketa byla na výšku.
     Při 144 px na výšku by měřila 195 px na šířku a v pásmu 1121-1230 px,
     kde ještě stojí vodorovná navigace, by míč dosedl na „AKTUALITY". */
  height: 112px;
  width: auto;
  /* ŽÁDNÝ filter/will-change — v Safari nutí logo přerasterovat při každém snímku scrollu
     (blur backdrop hlavičky + drop-shadow = "kostičkovaný" mezikrok). Statická bitmapa
     na vlastní GPU vrstvě se jen skládá (transform), nikdy nerasterizuje znovu. */
  transition: height .22s ease, transform .2s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.logo-lockup:hover img { transform: translate3d(0, -2px, 0); }
/* Přesah pod lištu má smysl jen nahoře, kde je za ním hero. Jakmile se pod
   hlavičku nasune obsah, spodní část značky (nápis „vodní pólo přerov")
   dosedne na karty článků. Ve zmenšeném stavu se proto logo vejde celé do
   lišty: ta měří 62 px (10 px padding + 42 px řádek + 10 px), takže 56 px
   výšky a top 3 px dá 3 px vzduchu nahoře i dole. */
.site-header.scrolled .logo-lockup img { height: 56px; }
.site-header.scrolled .header-in .logo-lockup { top: 3px; }
.header-in { padding-left: 200px; }                          /* místo pro přesah loga */

.main-nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.main-nav a:not(.btn) {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 11px;
  color: rgba(242, 246, 250, .85);
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.main-nav a:not(.btn):hover { color: var(--yellow); }

/* Aktuální stránka v menu (schůzka 3. 9. 2026) — značku nastavuje app.js přes aria-current. */
.main-nav a:not(.btn)[aria-current="page"] {
  color: var(--yellow);
  background: rgba(255, 210, 0, .08);
  box-shadow: inset 0 -2px 0 var(--yellow);
}
.f-links a[aria-current="page"] { color: var(--yellow); }

.header-ctas { display: flex; align-items: center; gap: 10px; flex: none; }

.burger {
  display: none;
  background: none; border: 0;
  width: 44px; height: 44px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.burger span { width: 24px; height: 2px; background: var(--paper); transition: transform .2s, opacity .2s; }
.burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============ Hero ============ */

.hero {
  position: relative;
  padding: 172px 0 56px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-2);
}
/* foto pozadí + diagonální modré přechody jako v referenci */
.hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-bg .ph { position: absolute; inset: 0; }
.hero-bg::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(4, 7, 12, .96) 22%, rgba(4, 7, 12, .55) 55%, rgba(4, 7, 12, .35));
}
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background:
    linear-gradient(115deg, transparent 42%, rgba(53, 168, 216, .16) 42%, rgba(53, 168, 216, .16) 47%, transparent 47%),
    linear-gradient(115deg, transparent 55%, rgba(29, 95, 160, .22) 55%, rgba(29, 95, 160, .22) 62%, transparent 62%);
}

.hero .wrap { position: relative; z-index: 3; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(52px, 6.5vw, 88px);
  line-height: .95;
}
.hero-copy h1 .yl { color: var(--yellow); }
.hero-copy .strong {
  font-weight: 700;
  font-size: 17px;
  margin: 22px 0 8px;
}
.hero-copy .desc { color: var(--mute); max-width: 420px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Karta NEXT MATCH */
.match-card {
  background: rgba(10, 16, 26, .82);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 24px;
}
.match-card .mc-label {
  text-align: center;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.mc-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  text-align: center;
  margin-bottom: 20px;
}
.mc-team .crest {
  width: 74px; height: 74px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #0e1826;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.mc-team .crest img { height: 58px; width: auto; }
.mc-team .crest b {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 20px;
  color: var(--cyan);
}
.mc-team .t-name {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  line-height: 1.15;
}
.mc-vs {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  transform: rotate(45deg);
  border-radius: 6px;
}
.mc-vs span {
  transform: rotate(-45deg);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 16px;
  color: #06121c;
}
.mc-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 12px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 14px;
}
.mc-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mc-meta svg { width: 14px; height: 14px; stroke: var(--yellow); fill: none; stroke-width: 2; }
.mc-league {
  text-align: center;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 16px;
}
.match-card .btn { width: 100%; }

/* Poslední výsledek — pruh pod hero */
.hero-lastres {
  position: relative;
  z-index: 3;
  margin-top: 34px;
  display: flex;
  justify-content: flex-end;
}
.lastres {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: rgba(10, 16, 26, .82);
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  padding: 10px 18px;
}
.lastres .crest-s {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #0e1826;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.lastres .crest-s img { height: 26px; width: auto; }
.lastres .crest-s b { font-family: var(--f-head); font-size: 12px; color: var(--cyan); }
.lastres .score {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

/* ============ Aktuality ============ */

.news-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 18px;
}
.news-feat { grid-row: span 2; display: flex; flex-direction: column; }
.news-feat .ph { flex: 1; min-height: 320px; }
.news-feat .nf-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-feat h3 { font-size: 26px; }
.news-feat p { color: var(--mute); font-size: 14.5px; }

.news-card { display: flex; flex-direction: column; transition: transform .18s ease, border-color .18s ease; }
.news-card:hover, .news-feat:hover { transform: translateY(-4px); border-color: var(--line); }
.news-card .ph { aspect-ratio: 16 / 9; }
.news-card .nc-body { padding: 14px 16px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.news-card h4 { font-size: 17.5px; line-height: 1.1; }

/* Kategorie a datum karty sedí pod fotkou, ne na ní — štítek přes obrázek zakrýval
   text v grafice (plakát náboru). .date-flag zůstává jen pro případné staré použití. */
.ak-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.ak-date {
  font-family: var(--f-head); font-weight: 600; font-size: 12px; line-height: 1.25;
  letter-spacing: .06em; color: var(--mute); white-space: nowrap;
}
.date-flag {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
}
.cat-flag {
  position: absolute;
  bottom: 10px; left: 10px;
  z-index: 2;
}

/* ============ Zápasy a výsledky ============ */

.matches-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: 18px;
  align-items: stretch;
}
.panel-h {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
}
.panel-b { padding: 18px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.matches-grid .card { display: flex; flex-direction: column; }

/* mini lockup týmů */
.mini-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.mini-teams .crest {
  width: 56px; height: 56px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: #0e1826;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.mini-teams .crest img { height: 42px; width: auto; }
.mini-teams .crest b { font-family: var(--f-head); font-size: 15px; color: var(--cyan); }
.mini-teams .t-name {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  line-height: 1.15;
}
.mini-teams .vs-s {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 14px;
  color: #06121c;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  transform: rotate(45deg);
}
.mini-teams .vs-s i { font-style: normal; transform: rotate(-45deg); }

.meta-rows { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.meta-rows span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(242, 246, 250, .85);
}
.meta-rows svg { width: 13px; height: 13px; stroke: var(--yellow); fill: none; stroke-width: 2; }

.big-score {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 46px;
  letter-spacing: .04em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.quarters { display: flex; justify-content: center; gap: 8px; }
.quarters b {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .06em;
  background: var(--card-2);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 5px 10px;
  font-variant-numeric: tabular-nums;
}
.panel-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Bilanční řádek (výhry/body) */
.record-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-bottom: 4px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line-2);
}
.rec { text-align: center; }
.rec b {
  display: block;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rec b.win { color: var(--yellow); }
.rec .label { font-size: 10.5px; display: block; margin-top: 4px; }

/* Řádek výsledku */
.res-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(86, 140, 190, .08);
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: .02em;
}
.res-line b {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}
.res-line b.win { color: var(--yellow); }

/* Tabulka */
.standings table { width: 100%; border-collapse: collapse; }
.standings th {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-2);
}
.standings td {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 14.5px;
  padding: 10px;
  border-bottom: 1px solid rgba(86, 140, 190, .08);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.standings th:not(:nth-child(2)), .standings td:not(:nth-child(2)) { text-align: center; }
/* klubový seznam (2 sloupce) — název vlevo, sídlo vpravo */
.standings th:first-child, .standings td:first-child { text-align: left; }
.standings th:last-child:nth-child(2), .standings td:last-child:nth-child(2) { text-align: right; color: var(--mute); font-weight: 500; }
.standings tr.me td {
  color: var(--yellow);
  background: rgba(255, 210, 0, .06);
}
.standings tr.me td:first-child { box-shadow: inset 3px 0 0 var(--yellow); }

/* ============ A-tým + Začni ============ */

.team-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: stretch;
}
.team-card .ph { aspect-ratio: 16 / 8.2; }
.team-card .tc-body { padding: 18px 20px 20px; }
.team-card .tc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.team-card p { color: var(--mute); font-size: 14px; max-width: 560px; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 18px; }
.tab {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 4px;
  /* Neaktivní záložka měla jen průhledné pozadí a skoro neviditelný rámeček, takže
     vedle plné žluté vypadala jako vypnutá. Vlastní plocha + světlejší text (3. 9. 2026). */
  background: var(--card);
  border: 1px solid var(--line);
  color: #cfdae6;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.tab:hover { color: var(--paper); border-color: rgba(255, 210, 0, .55); background: #12202f; }
.tab.active { background: var(--yellow); color: #0b0b0b; border-color: var(--yellow); font-weight: 700; }

.players-row { display: flex; align-items: center; gap: 10px; }
.players-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 132px;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  flex: 1;
  cursor: grab;
}
.players-strip::-webkit-scrollbar { display: none; }
.players-strip.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.players-strip.dragging .p-mini { pointer-events: none; }

.p-mini {
  scroll-snap-align: start;
  background: var(--card-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  overflow: hidden;
}
.p-mini .ph { aspect-ratio: 3 / 3.1; }
.p-mini .num {
  position: absolute;
  left: 8px; bottom: 6px;
  z-index: 2;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 30px;
  color: var(--yellow);
  line-height: 1;
}
.p-mini .pm-body { padding: 8px 10px 10px; }
.p-mini b {
  display: block;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  line-height: 1.05;
}
.p-mini small {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
}
.strip-arrow {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--paper);
  font-size: 15px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .15s, color .15s;
}
.strip-arrow:hover { border-color: var(--yellow); color: var(--yellow); }

/* Začni s pólem */
.join-card {
  border-color: rgba(53, 168, 216, .35);
  background: linear-gradient(160deg, #0d1a2b, #0a1220 70%);
  display: flex;
  flex-direction: column;
}
.join-card .jc-grid {
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 18px;
  padding: 22px;
  flex: 1;
}
.join-card h3 { font-size: 24px; margin-bottom: 10px; }
.join-card .jc-desc { color: var(--mute); font-size: 14px; margin-bottom: 18px; }

.cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.cat {
  aspect-ratio: 1;
  width: 100%;
  max-width: 176px;
  margin-inline: auto;
  border: 1.5px solid rgba(53, 168, 216, .5);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 10px;
  transition: border-color .15s, background .15s, transform .15s;
}
.cat:hover { border-color: var(--yellow); background: rgba(255, 210, 0, .06); transform: translateY(-3px); }
.cat b {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.05;
  text-transform: uppercase;
}
.cat small {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--cyan);
  text-transform: uppercase;
}
.jc-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }

.jc-photo {
  position: relative;
  border-radius: var(--r-s);
  overflow: hidden;
  border: 1px solid var(--line-2);
  min-height: 300px;
}
.jc-photo .ph { position: absolute; inset: 0; }
.jc-photo .jp-text {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 2;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--yellow);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}

/* ============ Momentky ============ */

.gal-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.gal-grid a {
  border-radius: var(--r-s);
  overflow: hidden;
  border: 1px solid var(--line-2);
  transition: transform .18s ease, border-color .18s ease;
}
.gal-grid a:hover { transform: translateY(-4px); border-color: var(--line); }
.gal-grid .ph { aspect-ratio: 4 / 3.4; }

/* ============ Tradice + Partneři ============ */

.trad-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: start;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 26px;
}
.tl-item { position: relative; padding-right: 20px; }
.tl-item:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: 2px; top: 16px;
  color: var(--yellow);
  font-weight: 700;
}
.tl-item .tl-ico {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}
.tl-item .tl-ico svg { width: 20px; height: 20px; stroke: var(--paper); fill: none; stroke-width: 1.6; }
.tl-item b {
  display: block;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 5px;
}
.tl-item:first-child b { color: var(--paper); }
.tl-item p { color: var(--mute); font-size: 12.5px; line-height: 1.45; }

.partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 26px;
}
.partner {
  height: 80px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  background: #f4f7fb;
  display: grid;
  place-items: center;
  padding: 12px 16px;
  transition: border-color .15s, transform .15s;
}
.partner img { max-width: 100%; max-height: 56px; object-fit: contain; }
.partner:hover { border-color: var(--cyan); transform: translateY(-2px); }
.partners-foot { display: flex; justify-content: flex-end; margin-top: 16px; }

/* ============ Footer ============ */

.site-footer {
  background: #04070c;
  border-top: 1px solid var(--line-2);
  padding: 54px 0 0;
}
.f-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  gap: 40px;
  padding-bottom: 40px;
}
.f-brand .logo-lockup img { height: 56px; }
.f-brand .f-claim {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 16px 0 6px;
}
.f-brand p { color: var(--mute); font-size: 13.5px; }

.f-col h5 {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 14px;
}
.f-links {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 4px 28px;
}
.f-links a {
  font-family: var(--f-head);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: .04em;
  color: rgba(242, 246, 250, .8);
  padding: 4px 0;
  transition: color .15s;
}
.f-links a:hover { color: var(--yellow); }

.f-contact li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  font-size: 14px;
  color: rgba(242, 246, 250, .85);
}
.f-contact li svg { width: 13px; height: 13px; stroke: var(--yellow); fill: none; stroke-width: 2; flex: none; align-self: center; }
.f-contact a:hover { color: var(--yellow); }

.socials { display: flex; gap: 8px; margin-top: 14px; }
.socials a {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  transition: border-color .15s, background .15s;
}
.socials a:hover { border-color: var(--yellow); }
.socials svg { width: 14px; height: 14px; fill: var(--paper); }

.f-stamp {
  width: 108px; height: 108px;
  border: 1px dashed var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  opacity: .8;
}
.f-stamp img { height: 64px; width: auto; }

.f-bottom {
  border-top: 1px solid var(--line-2);
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--f-head);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ============================================================
   Podstránky — detail zápasu, článek, nábor (v4)
   ============================================================ */

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 20px;
  transition: color .15s;
}
.crumb:hover { color: var(--yellow); }

.sub-hero {
  position: relative;
  padding: 152px 0 48px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-2);
  overflow: hidden;
}
.sub-hero .hero-bg { position: absolute; inset: 0; }
.sub-hero .wrap { position: relative; z-index: 3; }

/* Velká zápasová karta */
.mdetail-card {
  background: rgba(10, 16, 26, .85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 28px;
  max-width: 760px;
  margin: 0 auto;
}
.mdetail-card .md-top {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 22px;
}
.md-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  text-align: center;
  margin-bottom: 20px;
}
.md-teams .crest {
  width: 84px; height: 84px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #0e1826;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.md-teams .crest img { height: 64px; width: auto; }
.md-teams .crest b { font-family: var(--f-head); font-weight: 700; font-size: 22px; color: var(--cyan); }
.md-teams .t-name {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  line-height: 1.15;
}
.md-score {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: clamp(52px, 6vw, 72px);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.md-ctas { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

/* Tělo detailu */
.detail-body { padding: 52px 0 64px; }
.detail-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 18px;
  align-items: start;
}
.detail-grid aside { display: flex; flex-direction: column; gap: 18px; }
.detail-grid aside .card { display: flex; flex-direction: column; }

/* Duální stat bary: žlutá = KVP, cyan = soupeř */
.sbars { display: flex; flex-direction: column; gap: 16px; }
.sbar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
}
.sbar-head b {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  min-width: 48px;
}
.sbar-head b:last-child { text-align: right; color: rgba(242, 246, 250, .75); }
.sbar-head .label { font-size: 12px; }
.sbar-track {
  display: flex;
  height: 7px;
  gap: 3px;
  border-radius: 4px;
  overflow: hidden;
}
.sbar-track i { display: block; background: var(--yellow); border-radius: 4px; }
.sbar-track u { display: block; flex: 1; background: var(--cyan); border-radius: 4px; }

/* Střelci */
.scorers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.scorers h4 {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 4px;
}
.scorer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(86, 140, 190, .08);
  font-weight: 600;
  font-size: 14.5px;
}
.scorer .g-count { display: flex; align-items: center; gap: 9px; }
.scorer .g-dots { display: flex; gap: 3px; }
.scorer .g-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.scorers .away .g-dots span { background: var(--cyan); }
.scorer b { font-family: var(--f-head); font-weight: 700; font-size: 17px; }

/* Text / report / článek */
.prose p { color: #c3cfdd; font-size: 15.5px; margin-bottom: 16px; }
.prose .lead { font-size: 18px; font-weight: 600; color: var(--paper); }
.quote {
  margin: 22px 0;
  padding: 14px 20px;
  border-left: 3px solid var(--yellow);
  background: var(--card-2);
  border-radius: 0 var(--r-s) var(--r-s) 0;
}
.quote p { font-style: italic; font-size: 16.5px; color: var(--paper); margin-bottom: 8px; }
.quote cite {
  font-style: normal;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* MVP */
.mvp-card .ph { aspect-ratio: 16 / 9; }
.mvp-card .mvp-body { padding: 16px 18px; }
.mvp-card .mvp-body h4 { font-size: 22px; margin: 8px 0 4px; }
.mvp-card .mvp-body small {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* --- Článek --- */
.article-hero-card { margin-top: 8px; }
.article-hero-card .ph { aspect-ratio: 21 / 8; border-radius: var(--r); border: 1px solid var(--line-2); }
.article-head { max-width: 860px; padding: 26px 0 6px; }
.article-head h1 { font-size: clamp(32px, 4vw, 52px); margin: 12px 0; }
.article-head .perex { color: var(--mute); font-size: 17px; }
.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.stat-embed { margin: 22px 0; }
.stat-embed .quarters { padding-bottom: 4px; }

.article-gal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 22px 0;
}
.article-gal .ph { aspect-ratio: 4 / 3; border-radius: var(--r-s); border: 1px solid var(--line-2); }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.share-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}
.share-row .socials { margin: 0; }

.pop {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(86, 140, 190, .08);
}
.pop:last-of-type { border-bottom: 0; }
.pop .pop-n { font-family: var(--f-head); font-weight: 700; font-size: 14px; color: var(--yellow); }
.pop a {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.1;
  text-transform: uppercase;
  transition: color .15s;
}
.pop a:hover { color: var(--yellow); }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Nábor --- */
.join-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 34px;
}
.jf { padding: 16px 18px; }
.jf b {
  display: block;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.jf .label { font-size: 12px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step { padding: 20px; }
.step .st-no {
  display: inline-block;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 14px;
  color: #0b0b0b;
  background: var(--yellow);
  border-radius: 4px;
  padding: 3px 9px;
  margin-bottom: 14px;
}
.step h4 { font-size: 20px; margin-bottom: 8px; }
.step p { color: var(--mute); font-size: 14px; }

.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.check-card { padding: 20px; }
.check-card h4 { font-size: 20px; margin-bottom: 12px; }
.check-card li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(86, 140, 190, .08);
  font-size: 14.5px;
}
.check-card li:last-child { border-bottom: 0; }
.check-card li::before { font-family: var(--f-head); font-weight: 700; }
.check-yes li::before { content: "+"; color: var(--yellow); }
.check-no li::before { content: "–"; color: var(--mute); }
.check-no li { color: var(--mute); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 18px;
  align-items: stretch;
}
.form-note { padding: 22px; }
.form-note h3 { font-size: 26px; margin-bottom: 10px; }
.form-note p { color: var(--mute); font-size: 14.5px; margin-bottom: 16px; }
.form-note .contact-line { border-top: 1px solid var(--line-2); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }

.join-form {
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-content: start;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}
.field input, .field select, .field textarea {
  background: var(--card-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 15px;
  padding: 11px 13px;
  transition: border-color .15s;
}
.field textarea { min-height: 92px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--yellow);
}
.join-form .btn { grid-column: 1 / -1; justify-self: start; }
.form-success {
  grid-column: 1 / -1;
  border: 1px solid var(--yellow);
  border-radius: var(--r-s);
  padding: 16px 18px;
  display: none;
}
.form-success.show { display: block; }
.form-success b {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  display: block;
  color: var(--yellow);
  margin-bottom: 4px;
}
.form-success p { color: var(--mute); font-size: 14px; }

.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 4px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  transition: color .15s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--yellow); font-size: 20px; flex: none; }
.faq details[open] summary { color: var(--yellow); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 4px 18px; color: var(--mute); max-width: 640px; font-size: 14.5px; }

@media (max-width: 1080px) {
  .detail-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .scorers { grid-template-columns: 1fr; }
  .steps, .join-facts { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
  .join-form { grid-template-columns: 1fr; }
  .article-gal { grid-template-columns: 1fr; }
  .article-hero-card .ph { aspect-ratio: 16 / 10; }
}

/* ============================================================
   v6 — Match bar (poslední/příští), YouTube, přepínání týmů
   ============================================================ */

/* Lišta poslední / příští zápas */
.match-bar { background: var(--bg-2); border-bottom: 1px solid var(--line-2); }
.match-bar-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-2);
}
/* Atribut `hidden` musí schovat vždycky. Jakékoli `display:` v komponentě je
   silnější než výchozí pravidlo prohlížeče, takže se atribut tiše ignoruje —
   nic nespadne, prvek jen zůstane vidět. Doplatily na to už .md-lb a .gal-lb
   a naposledy lišta zápasů, která dál ukazovala termín ze šablony. */
[hidden] { display: none !important; }

.mbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-2);
  /* Bez min-width:0 má grid položka výchozí min-width:auto a nikdy se nezmenší pod obsah:
     track 1fr narostl na šířku odpočtu a lišta na mobilu vylezla mimo obrazovku. A protože
     body má overflow-x:clip, nešlo k ní ani doscrollovat — obsah byl prostě pryč. */
  min-width: 0;
}
.mbar .mbar-tag {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 4px 0;
  border-right: 2px solid var(--yellow);
}
.mbar .mbar-body { flex: 1; min-width: 0; }
.mbar .mbar-teams {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 23px;
  text-transform: uppercase;
}
.mbar .mbar-teams .m-logo {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #f2f6fa;
  display: grid; place-items: center;
  overflow: hidden; flex: none;
}
.mbar .mbar-teams .m-logo img { max-width: 74%; max-height: 74%; object-fit: contain; }
.mbar .mbar-teams .sc { color: var(--yellow); font-variant-numeric: tabular-nums; }
.mbar .mbar-teams .vs { color: var(--cyan); font-size: 17px; }
.mbar .mbar-meta {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--mute);
  margin-top: 5px;
}
/* Dvě tlačítka pod sebou, ne vedle sebe: vedle sebe ukrojí ze jmen týmů tolik,
   že se skóre zalomí na druhý řádek. Ve sloupci zůstane lišta stejně vysoká. */
.mbar .mbar-cta { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
/* Tělo lišty „Poslední" je odkaz na statistiky zápasu — musí zůstat vypadat jako text. */
.mbar .mbar-link { display: block; color: inherit; text-decoration: none; }
.mbar .mbar-link:hover .mbar-teams { color: var(--yellow); }
.mbar .mbar-link:hover .mbar-meta { color: var(--paper); }
.mbar .mbar-link:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: 4px; }

/* YouTube tlačítko + živě odznak */
.btn-yt { background: #e23; border-color: #e23; color: #fff; }
.btn-yt:hover { background: #f34; }
.btn-yt svg { width: 15px; height: 15px; fill: currentColor; }
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ff4d4d;
}
.live-badge .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 0 0 rgba(255, 59, 59, .6);
  animation: livepulse 1.6s ease-out infinite;
}
@keyframes livepulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 59, 59, .55); }
  100% { box-shadow: 0 0 0 8px rgba(255, 59, 59, 0); }
}

/* Přepínání soupisek (taby) */
.roster-pane { display: none; }
.roster-pane.active { display: block; }

/* Info pruh o přenosech */
.stream-note {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--card);
  margin-bottom: 26px;
}
.stream-note .sn-ico {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: #e23;
  display: grid; place-items: center;
  flex: none;
}
.stream-note .sn-ico svg { width: 22px; height: 22px; fill: #fff; }
.stream-note b { font-family: var(--f-head); font-weight: 700; font-size: 17px; text-transform: uppercase; }
.stream-note p { color: var(--mute); font-size: 13.5px; }
.stream-note .btn { margin-left: auto; }

@media (max-width: 720px) {
  .match-bar-in { grid-template-columns: 1fr; }
  .mbar .mbar-cta .btn { padding: 8px 12px; font-size: 12px; }
  .header-in { padding-left: 84px; }
  .logo-lockup img { height: 72px; }
  .stream-note .btn { margin-left: 0; }
}

/* ============================================================
   v5 — Reálná fotografie (foto-forward)
   ============================================================ */

/* Fotka v placeholderu: <img class="cover"> uvnitř .ph */
.ph > img.cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ph.has-photo::before { display: none; }          /* vypni kaustiku pod fotkou */
.ph.has-photo .ph-label {
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}

/* Hero s reálnou fotografií */
.hero-bg img.cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 34%;
  z-index: 0;
}

/* ============ Soupiska s čísly + góly ============ */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.r-player {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 10px 14px 10px 10px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  transition: border-color .15s, transform .15s;
}
.r-player:hover { border-color: var(--line); transform: translateY(-2px); }
/* Fotka hráče + číslo dresu jako odznak */
.r-player .r-photo {
  position: relative;
  width: 54px; height: 54px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(120% 120% at 30% 20%, #16324e, #0a1420);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  flex: none;
}
.r-player .r-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.r-player .r-photo .r-num {
  position: absolute;
  right: -3px; bottom: -3px;
  min-width: 21px; height: 21px;
  padding: 0 3px;
  background: var(--yellow);
  color: #0b0b0b;
  border: 2px solid var(--card);
  border-radius: 7px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 12px;
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  z-index: 2;
}
.r-player.is-gk .r-photo .r-num { background: var(--cyan); }
/* Bez fotky — číslo uprostřed kruhu */
.r-player .r-photo.no-photo .r-num {
  position: static;
  min-width: 0; height: auto; padding: 0;
  background: none; border: 0;
  color: var(--yellow);
  font-size: 24px;
  line-height: 1;
}
.r-player.is-gk .r-photo.no-photo .r-num { color: var(--cyan); }
.r-player .r-name {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.r-player .r-pos {
  display: block;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 2px;
}
.r-player .r-goals {
  text-align: right;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}
.r-player .r-goals small {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--mute);
}
.roster-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* Trenérské duo */
.coaches {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.coaches .c-photo { position: relative; min-height: 260px; }
.coaches .c-photo img.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.coaches .c-body { padding: 24px; display: flex; flex-direction: column; justify-content: center; background: var(--card); }
.coaches .c-body h3 { font-size: 26px; margin-bottom: 8px; }
.coaches .c-body p { color: var(--mute); font-size: 14.5px; }
.coaches .c-names { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.coaches .c-names b {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
}
.coaches .c-names span { font-family: var(--mono); font-size: 11px; color: var(--cyan); }

/* ============ Stránka všech zápasů ============ */
.comp-block { margin-bottom: 40px; }
.comp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 2px solid var(--yellow);
  margin-bottom: 6px;
}
.comp-head h3 { font-size: clamp(22px, 2.4vw, 30px); }
.comp-head .comp-rec {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.comp-head .comp-rec b { color: var(--yellow); }

.mrow {
  display: grid;
  grid-template-columns: 92px 1fr auto 1fr 78px;
  align-items: center;
  gap: 14px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--line-2);
  transition: background .15s;
}
.mrow:hover { background: var(--card); }
.mrow .m-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  line-height: 1.3;
}
.mrow .m-team {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .01em;
  min-width: 0;
}
.mrow .m-team.home { justify-content: flex-end; text-align: right; }
.mrow .m-team .m-logo {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #f2f6fa;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
}
.mrow .m-team .m-logo img { max-width: 74%; max-height: 74%; object-fit: contain; }
.mrow .m-team.kvp { color: var(--paper); }
.mrow .m-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .m-score {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--card-2);
}
.mrow .m-score.w { color: var(--yellow); }
.mrow .m-score.l { color: var(--mute); }
.mrow .m-res {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}
.mrow .m-res.w { color: var(--yellow); }
.mrow .m-res.l { color: var(--mute); }

.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter-row .tab { background: var(--card); }

@media (max-width: 720px) {
  .coaches { grid-template-columns: 1fr; }
  .coaches .c-photo { min-height: 220px; }
  .mrow { grid-template-columns: 1fr auto 1fr; grid-template-areas: "h s a" "d d d"; gap: 8px 10px; padding: 12px 6px; }
  .mrow .m-date { grid-area: d; font-size: 10px; }
  .mrow .m-res { display: none; }
  .mrow .m-team { font-size: 13px; }
  .mrow .m-team .m-logo { width: 26px; height: 26px; }
}

/* ============ Klubové erby s reálnými logy ============
   Loga soupeřů (různé barvy/pozadí) sedí na světlém čipu, ať jsou čitelná. */
.crest, .crest-s, .mini-teams .crest, .md-teams .crest, .mc-team .crest {
  background: #f2f6fa;
  border-color: rgba(255, 255, 255, .15);
  /* flex + malý procentní padding = logo skoro přes celý kruh, spolehlivě vycentrované */
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 9%;
  box-sizing: border-box;
}
/* v hero kartě logo skoro přes celý kruh */
.mc-team .crest { padding: 5%; }
.crest img, .crest-s img, .mini-teams .crest img, .md-teams .crest img, .mc-team .crest img {
  height: auto !important;
  width: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.crest b, .crest-s b, .mini-teams .crest b, .md-teams .crest b {
  color: var(--blue);
}

/* ============ A11y ============ */

.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 3000;
  background: var(--yellow);
  color: #0b0b0b;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: var(--r-s);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* ============ Responzivita ============ */

@media (max-width: 1120px) {
  .main-nav { display: none; }
  .burger { display: flex; margin-left: auto; }
  .main-nav.open {
    display: flex;
    position: fixed;
    inset: 0;
    /* .site-header má backdrop-filter → je containing blockem pro fixed potomky;
       inset:0 by dalo jen výšku hlavičky, proto vynucujeme plnou výšku viewportu */
    height: 100vh;
    height: 100dvh;
    background: rgba(4, 7, 12, .97);
    flex-direction: column;
    /* Ne `center`: když se 10 položek do výšky nevejde, centrování je rozloží symetricky
       nad i pod viewport — a nahoru se doscrollovat NEDÁ (scroll neumí zápornou pozici),
       takže „Aktuality" a „Zápasy" byly na nižších displejích trvale nedostupné.
       Automatické okraje na pseudoprvcích centrují jen volné místo: když žádné není,
       smrsknou se na nulu a menu se chová jako běžný scrollovatelný sloupec odshora. */
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    padding: 16px;
    z-index: 1100;
    overflow-y: auto;
  }
  .main-nav.open::before,
  .main-nav.open::after { content: ''; margin: auto; }
  .main-nav.open a:not(.btn) { font-size: 22px; }
  /* telefon na šířku / nízké displeje — menu se jinak nevejde ani po opravě scrollu */
  @media (max-height: 620px) {
    .main-nav.open { gap: 2px; }
    .main-nav.open a:not(.btn) { font-size: 18px; }
  }
  .header-ctas { display: none; }

  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .match-card { max-width: 480px; }
  .news-grid { grid-template-columns: 1fr 1fr; }
  .news-feat { grid-column: 1 / -1; grid-row: auto; }
  .matches-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .gal-grid { grid-template-columns: repeat(3, 1fr); }
  .trad-grid { grid-template-columns: 1fr; }
  .f-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  section { padding: 42px 0; }
  .hero { padding-top: 140px; }
  .news-grid { grid-template-columns: 1fr; }
  .gal-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: 1fr 1fr; gap: 20px 8px; }
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
  .cats { grid-template-columns: repeat(3, 1fr); }
  .join-card .jc-grid { grid-template-columns: 1fr; }
  .jc-photo { min-height: 200px; }
  .f-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-lastres { justify-content: flex-start; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Redukce pohybu */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ============ Galerie 90 let + Lightbox ============ */
.gal-grid-90 {
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 2px;
}
.gal-grid-90 .ph { aspect-ratio: 1 / 1; }
.gal-grid-90 a {
  border-radius: var(--r-s);
  overflow: hidden;
  border: 1px solid var(--line-2);
  transition: transform .18s ease, border-color .18s ease;
  cursor: zoom-in;
}
.gal-grid-90 a:hover { transform: translateY(-3px); border-color: var(--cyan); }
.gal-grid[data-lightbox] a { cursor: zoom-in; }

.lightbox {
  position: fixed; inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(3, 6, 11, .93);
  backdrop-filter: blur(6px);
  padding: 40px;
}
.lightbox.open { display: flex; }
.lb-img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .7);
  object-fit: contain;
}
.lb-close, .lb-nav {
  position: absolute;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background .15s;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, .2); }
.lb-close { top: 20px; right: 24px; width: 46px; height: 46px; font-size: 30px; line-height: 1; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 34px; line-height: 1; }
.lb-prev { left: 22px; }
.lb-next { right: 22px; }
@media (max-width: 720px) {
  .gal-grid-90 { grid-template-columns: repeat(3, 1fr); }
  .lb-nav { width: 44px; height: 44px; font-size: 26px; }
  .lb-prev { left: 8px; } .lb-next { right: 8px; }
  .lightbox { padding: 16px; }
}
@media (max-width: 460px) {
  .gal-grid-90 { grid-template-columns: repeat(2, 1fr); }
}

/* ============ Zápasy — archiv (data-driven) ============ */
.zx-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.zx-switch button {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: var(--r-s);
  border: 1px solid var(--line-2);
  background: rgba(13, 21, 33, .5);
  color: rgba(242, 246, 250, .82);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}
.zx-switch button:hover { border-color: var(--cyan); color: #fff; }
.zx-switch button.active { background: var(--yellow); color: #0b0b0b; border-color: var(--yellow); }
.zx-switch.zxcat button.active { background: var(--cyan); color: #06121c; border-color: var(--cyan); }
.zx-bar { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: flex-end; justify-content: space-between; margin: 8px 0 18px; }
.zx-bar .zx-col-label {
  font-family: var(--f-head); font-weight: 600; font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 8px;
}
.zx-recap {
  font-family: var(--f-head); font-weight: 600; font-size: 14px; letter-spacing: .04em;
  color: var(--mute); text-transform: uppercase;
}
.zx-recap b { color: var(--paper); }
.zx-recap .win { color: #58c98a; }

.zx-list { display: flex; flex-direction: column; gap: 8px; }
.zx-round {
  font-family: var(--f-head); font-weight: 600; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cyan); margin: 18px 0 4px;
}
.zx-match {
  display: grid;
  grid-template-columns: 84px 1fr 62px 1fr 108px;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--line-2);
  border-radius: var(--r-s);
  cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
}
.zx-match:hover { border-color: var(--line); transform: translateX(2px); background: #0e1725; }
.zx-match.win { border-left-color: #3f9d63; }
.zx-match.loss { border-left-color: #b3454a; }
.zx-date {
  font-family: var(--f-head); font-weight: 600; font-size: 12px; line-height: 1.25;
  color: var(--mute); letter-spacing: .03em;
}
.zx-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zx-team.away { flex-direction: row-reverse; text-align: right; }
.zx-team .nm {
  font-family: var(--f-head); font-weight: 600; font-size: 15.5px; text-transform: uppercase;
  letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zx-team.kvp .nm { color: var(--yellow); }
.zx-team .nm-kod { display: none; letter-spacing: .06em; }
.zx-team .lg {
  width: 46px; height: 46px; flex: none; border-radius: 50%; background: #f2f6fa;
  display: flex; align-items: center; justify-content: center; padding: 6px; box-sizing: border-box; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.zx-team .lg img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.zx-score {
  font-family: var(--f-head); font-weight: 700; font-size: 20px; text-align: center;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.zx-score.win { color: #58c98a; } .zx-score.loss { color: #e0686c; }
.zx-tail { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.zx-play {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  background: #e23; color: #fff; border-radius: 5px; padding: 4px 9px;
  font-family: var(--f-head); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.zx-play svg { width: 13px; height: 13px; fill: currentColor; }
.zx-arrow { color: var(--mute); font-size: 18px; flex: none; }
.zx-empty { color: var(--mute); padding: 30px 0; text-align: center; }

/* Detail modal */
.zx-modal {
  position: fixed; inset: 0; z-index: 3000; display: none;
  align-items: flex-start; justify-content: center;
  background: rgba(3, 6, 11, .8); backdrop-filter: blur(6px);
  padding: 40px 20px; overflow-y: auto;
}
.zx-modal.open { display: flex; }
.zx-dialog {
  width: min(860px, 100%); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
}
.zx-dhead { position: relative; padding: 20px 24px; border-bottom: 1px solid var(--line-2); }
.zx-dhead .meta { font-family: var(--f-head); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.zx-dclose {
  position: absolute; top: 14px; right: 16px; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.05);
  color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}
.zx-dclose:hover { background: rgba(255,255,255,.14); }
.zx-scoreline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 22px 24px 6px; }
.zx-scoreline .side { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.zx-scoreline .lg { width: 66px; height: 66px; border-radius: 50%; background: #f2f6fa; display: flex; align-items: center; justify-content: center; padding: 9px; box-sizing: border-box; overflow: hidden; }
.zx-scoreline .lg img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.zx-scoreline .nm { font-family: var(--f-head); font-weight: 700; font-size: 16px; text-transform: uppercase; line-height: 1.1; }
.zx-scoreline .big { font-family: var(--f-head); font-weight: 700; font-size: 46px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.zx-quarters { text-align: center; color: var(--mute); font-family: var(--f-head); font-weight: 600; letter-spacing: .08em; padding: 2px 24px 18px; font-variant-numeric: tabular-nums; }
.zx-embed { padding: 0 24px 8px; }
.zx-embed .frame { position: relative; aspect-ratio: 16/9; border-radius: var(--r-s); overflow: hidden; border: 1px solid var(--line-2); background: #000; }
.zx-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.zx-embed .yt-cta { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 2px; }
.zx-rosters { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 12px 24px 26px; }
.zx-roster h4 { font-family: var(--f-head); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.zx-roster.kvp h4 { color: var(--yellow); }
.zx-rrow { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13.5px; }
.zx-rrow .n { font-family: var(--f-head); font-weight: 700; color: var(--mute); text-align: center; font-size: 12px; }
.zx-rrow .g { font-family: var(--f-head); font-weight: 700; color: var(--yellow); font-variant-numeric: tabular-nums; }
.zx-rrow .g.zero { color: var(--mute); }
.zx-note { padding: 0 24px 22px; color: var(--mute); font-size: 12.5px; }

/* Sestava s fotkami nad statistikami (schůzka 3. 9. 2026) — kdo v tom zápase plaval,
   plus trenér. Tváře drží pozornost líp než tabulka čísel pod nimi. */
.zx-lineup { padding: 14px 24px 4px; }
.zx-lu-title {
  font-family: var(--f-head); font-weight: 700; font-size: 14px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--yellow);
  margin-bottom: 12px;
}
.zx-lu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 14px 10px; }
.zx-lu-p { display: grid; justify-items: center; gap: 4px; text-align: center; }
.zx-lu-ph {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(120% 120% at 30% 20%, #16324e, #0a1420);
  border: 1px solid var(--line);
  display: grid; place-items: center;
}
.zx-lu-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.zx-lu-ph.no-photo b { font-family: var(--f-head); font-weight: 700; font-size: 15px; color: var(--mute); }
.zx-lu-num {
  position: relative; top: -14px; margin-bottom: -14px; left: 18px;
  min-width: 21px; height: 21px; padding: 0 3px;
  background: var(--yellow); color: #0b0b0b;
  border: 2px solid var(--card); border-radius: 7px;
  font-family: var(--f-head); font-weight: 700; font-size: 12px; line-height: 17px;
  font-variant-numeric: tabular-nums;
  z-index: 2;
}
.zx-lu-p.is-gk .zx-lu-num { background: var(--cyan); }
.zx-lu-n { font-size: 12.5px; line-height: 1.25; }
.zx-lu-r {
  font-family: var(--f-head); font-weight: 700; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mute);
}
.zx-lu-p.is-coach .zx-lu-ph { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(255,210,0,.18); }
.zx-lu-p.is-coach .zx-lu-r { color: var(--yellow); }

@media (max-width: 640px) {
  .zx-match { grid-template-columns: 62px 1fr 52px 1fr; }
  .zx-tail { display: none; }
  .zx-team .nm { font-size: 15px; }
  /* Na mobilu se místo ořezaného názvu ukáže kód klubu (KVP, SLA, STE). */
  .zx-team .nm-full { display: none; }
  .zx-team .nm-kod { display: inline; }
}
/* Telefon: při 375 px měl sloupec týmu 68 px a po logu s mezerou zbývalo na název 12 px,
   takže se ořezával i třípísmenný kód. Užší datum, menší logo a těsnější mezery dají
   kódu ~44 px. */
@media (max-width: 480px) {
  .zx-match { grid-template-columns: 56px 1fr 44px 1fr; gap: 10px; padding: 12px 12px; }
  .zx-date { font-size: 11.5px; }
  .zx-score { font-size: 17px; }
  .zx-team { gap: 6px; }
  .zx-team .lg { width: 36px; height: 36px; padding: 5px; }
  .zx-team .nm { font-size: 14.5px; }
  .zx-rosters { grid-template-columns: 1fr; }
  .zx-scoreline .big { font-size: 36px; }
  .zx-lineup { padding: 12px 16px 2px; }
  .zx-lu-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 12px 8px; }
  .zx-lu-ph { width: 48px; height: 48px; }
}

/* ============ Trofejní síň (úspěchy klubu) ============ */
.honours-band {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 12px;
  margin-bottom: 40px;
}
.honour-card {
  position: relative;
  background: linear-gradient(160deg, #12203200, #101a28), var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 20px 16px 18px;
  overflow: hidden;
}
.honour-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--yellow), var(--cyan));
}
.honour-card .h-ico { color: var(--yellow); margin-bottom: 10px; display: block; }
.honour-card .h-ico svg { width: 26px; height: 26px; fill: currentColor; }
.honour-card .h-year {
  font-family: var(--f-head); font-weight: 700; font-size: 13px; letter-spacing: .1em;
  color: var(--cyan); font-variant-numeric: tabular-nums;
}
.honour-card .h-title {
  font-family: var(--f-head); font-weight: 700; font-size: 18px; line-height: 1.1;
  text-transform: uppercase; margin: 4px 0 6px;
}
.honour-card .h-note { color: var(--mute); font-size: 12px; line-height: 1.35; }
@media (max-width: 900px) { .honours-band { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .honours-band { grid-template-columns: 1fr; } }

/* ============ Profil hráče (modal) ============ */
.r-player { cursor: pointer; }
.pl-modal {
  position: fixed; inset: 0; z-index: 3000; display: none;
  align-items: flex-start; justify-content: center;
  background: rgba(3, 6, 11, .82); backdrop-filter: blur(6px);
  padding: 40px 20px; overflow-y: auto;
}
.pl-modal.open { display: flex; }
.pl-dialog {
  width: min(560px, 100%); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
}
.pl-hero {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px;
  background:
    radial-gradient(120% 160% at 88% -20%, rgba(53, 168, 216, .28), transparent 60%),
    linear-gradient(180deg, #12233a, var(--bg-2));
  border-bottom: 1px solid var(--line-2);
}
.pl-close {
  position: absolute; top: 14px; right: 16px; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.06);
  color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}
.pl-close:hover { background: rgba(255,255,255,.16); }
.pl-photo {
  position: relative; width: 96px; height: 96px; flex: none;
  border-radius: 50%; overflow: hidden; border: 2px solid var(--yellow);
  background: radial-gradient(120% 120% at 30% 20%, #16324e, #0a1420);
}
.pl-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.pl-photo .pl-num {
  position: absolute; right: -4px; bottom: -4px; min-width: 30px; height: 30px; padding: 0 6px;
  background: var(--yellow); color: #0b0b0b; border: 3px solid var(--bg-2); border-radius: 9px;
  font-family: var(--f-head); font-weight: 700; font-size: 16px; line-height: 24px; text-align: center;
}
.pl-photo.is-gk .pl-num { background: var(--cyan); }
.pl-id .pl-name { font-family: var(--f-head); font-weight: 700; font-size: 26px; line-height: 1.05; text-transform: uppercase; }
.pl-id .pl-meta { color: var(--cyan); font-family: var(--f-head); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }
.pl-stats { display: flex; gap: 10px; padding: 18px 24px; flex-wrap: wrap; }
.pl-stat { flex: 1; min-width: 90px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 12px 14px; text-align: center; }
.pl-stat b { display: block; font-family: var(--f-head); font-weight: 700; font-size: 28px; color: var(--yellow); font-variant-numeric: tabular-nums; }
.pl-stat span { font-family: var(--f-head); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.pl-section-h { font-family: var(--f-head); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); padding: 4px 24px 8px; }
.pl-matches { padding: 0 24px 22px; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.pl-mrow { display: grid; grid-template-columns: 66px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 12px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-s); font-size: 13px; }
.pl-mrow .d { color: var(--mute); font-family: var(--f-head); font-size: 11.5px; }
.pl-mrow .o { font-family: var(--f-head); font-weight: 600; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-mrow .o .pl-vs { color: var(--yellow); font-weight: 800; margin-right: 3px; }
.pl-mrow .sc { font-family: var(--f-head); font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-mrow .g { font-family: var(--f-head); font-weight: 700; color: var(--yellow); font-size: 12px; white-space: nowrap; }
.pl-note { padding: 0 24px 22px; color: var(--mute); font-size: 12.5px; }
@media (max-width: 480px) { .pl-hero { flex-direction: column; text-align: center; } .pl-photo { width: 110px; height: 110px; } }

/* ============ Historie klubu — přes celou šířku ============ */
.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 14px;
}
.history-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 20px 20px 18px 22px;
  overflow: hidden;
}
.history-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
}
.history-card .hy { font-family: var(--f-head); font-weight: 700; font-size: 22px; color: var(--yellow); line-height: 1; font-variant-numeric: tabular-nums; }
.history-card .ht { font-family: var(--f-head); font-weight: 700; font-size: 16px; text-transform: uppercase; line-height: 1.1; margin: 9px 0 6px; }
.history-card .hx { color: var(--mute); font-size: 13px; line-height: 1.5; }

/* partneři pod historií — širší */
.partners-wide { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) { .partners-wide { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .partners-wide { grid-template-columns: repeat(2, 1fr); } }

/* postupné animované načítání (stagger) */
.stagger-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.stagger-item.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .stagger-item { opacity: 1; transform: none; transition: none; }
}

/* ============ Archiv aktualit (aktuality.html) ============ */
.ak-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.ak-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
  overflow: hidden; transition: transform .18s ease, border-color .18s ease;
}
.ak-card:hover { transform: translateY(-4px); border-color: var(--line); }
.ak-card .ph { aspect-ratio: 16 / 9; }
.ak-card .ak-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ak-card h3 { font-size: 19px; line-height: 1.12; }
.ak-card p { color: var(--mute); font-size: 13.5px; flex: 1; }
.ak-card .ak-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; }

/* ============ Klub — solo stránka ============ */
.klub-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 6px; }
.klub-fact { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 16px 18px; }
.klub-fact b { display: block; font-family: var(--f-head); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 4px; }
.klub-fact span { font-size: 14.5px; }

/* ============ Vertikální časová osa (klub.html) ============ */
/* časová osa — střídavá serpentýna (had): čára uprostřed, karty vlevo/vpravo */
.timeline-v { position: relative; margin: 10px auto 0; padding: 0; max-width: 980px; }
.timeline-v::before {
  content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--cyan), var(--blue) 55%, var(--line-2));
}
.tv-item {
  position: relative; width: 50%; box-sizing: border-box; padding: 0 44px 32px 0;
  opacity: 0; transform: translateX(-32px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.tv-item:nth-child(even) { margin-left: 50%; padding: 0 0 32px 44px; transform: translateX(32px); }
.tv-item.in { opacity: 1; transform: none; }
.tv-item:last-child { padding-bottom: 4px; }
.tv-dot {
  position: absolute; top: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-2); border: 2px solid var(--cyan); display: grid; place-items: center; z-index: 2;
}
.tv-item .tv-dot { right: -10px; }
.tv-item:nth-child(even) .tv-dot { left: -10px; right: auto; }
.tv-dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.tv-item.is-title .tv-dot { border-color: var(--yellow); box-shadow: 0 0 0 5px rgba(255, 210, 0, .1); }
.tv-item.is-title .tv-dot::after { background: var(--yellow); }
.tv-card { position: relative; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 16px 20px; }
.tv-card::after { content: ""; position: absolute; top: 10px; width: 12px; height: 12px; background: var(--card); border: 1px solid var(--line-2); transform: rotate(45deg); }
.tv-item .tv-card::after { right: -7px; border-left: 0; border-bottom: 0; }
.tv-item:nth-child(even) .tv-card::after { left: -7px; border-right: 0; border-top: 0; }
.tv-item.is-title .tv-card { border-color: rgba(255, 210, 0, .3); background: linear-gradient(120deg, rgba(255, 210, 0, .07), var(--card) 62%); }
.tv-item.is-title .tv-card::after { border-color: rgba(255, 210, 0, .3); }
.tv-year { font-family: var(--f-head); font-weight: 700; font-size: 15px; letter-spacing: .06em; color: var(--cyan); font-variant-numeric: tabular-nums; }
.tv-item.is-title .tv-year { color: var(--yellow); }
.tv-title { font-family: var(--f-head); font-weight: 700; font-size: 19px; text-transform: uppercase; line-height: 1.12; margin: 3px 0 7px; display: flex; align-items: center; gap: 9px; }
.tv-title svg { width: 17px; height: 17px; fill: var(--yellow); flex: none; }
.tv-text { color: var(--mute); font-size: 14px; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .tv-item { opacity: 1; transform: none; transition: none; } }
@media (max-width: 760px) {
  .timeline-v { max-width: 640px; }
  .timeline-v::before { left: 9px; transform: none; }
  .tv-item, .tv-item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 26px 34px; transform: translateX(-18px); }
  .tv-item .tv-dot, .tv-item:nth-child(even) .tv-dot { left: 0; right: auto; }
  .tv-item .tv-card::after, .tv-item:nth-child(even) .tv-card::after { left: -7px; right: auto; border: 1px solid var(--line-2); border-right: 0; border-top: 0; }
  .tv-title { font-size: 17px; }
}

/* ============ Mládež (mladez.html) ============ */
.youth-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 16px; }
.youth-card {
  position: relative; background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 22px 24px 20px; overflow: hidden;
  transition: transform .18s ease, border-color .18s ease;
}
.youth-card:hover { transform: translateY(-4px); border-color: var(--cyan); }
.youth-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--yellow), var(--cyan)); }
.youth-card .yc-age {
  display: inline-block; font-family: var(--f-head); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: #06121c; background: var(--cyan);
  padding: 3px 10px; border-radius: 5px; margin-bottom: 12px;
}
.youth-card h3 { font-family: var(--f-head); font-weight: 700; font-size: 23px; text-transform: uppercase; line-height: 1.05; margin-bottom: 8px; }
.youth-card p { color: var(--mute); font-size: 14px; line-height: 1.5; }
.youth-path {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 26px;
  font-family: var(--f-head); font-weight: 600; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase;
}
.youth-path span { color: var(--paper); background: var(--card); border: 1px solid var(--line-2); padding: 8px 14px; border-radius: 999px; }
.youth-path .arr { color: var(--cyan); background: none; border: 0; padding: 0 2px; }
.youth-champ {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line); background: var(--card);
}
.youth-champ .yc-photo { position: relative; min-height: 260px; }
.youth-champ .yc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.youth-champ .yc-body { padding: 28px 30px; display: flex; flex-direction: column; justify-content: center; }
.youth-champ .yc-body h3 { font-size: 28px; margin-bottom: 10px; }
.youth-champ .yc-body p { color: var(--mute); font-size: 14.5px; margin-bottom: 16px; }
@media (max-width: 760px) { .youth-champ { grid-template-columns: 1fr; } .youth-champ .yc-photo { min-height: 200px; } }

/* ============ E-shop (eshop.html) ============ */
.shop-info { display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r); padding:16px 20px; margin-bottom:24px; color:var(--mute); font-size:13.5px; line-height:1.5; }
.shop-info svg { width:22px; height:22px; fill:var(--cyan); flex:none; margin-top:1px; }
.shop-filter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.shop-card { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; transition:transform .18s ease, border-color .18s ease; }
.shop-card:hover { transform:translateY(-4px); border-color:var(--cyan); }
.shop-card .sc-img { aspect-ratio:1; background:#0b1220; overflow:hidden; }
.shop-card .sc-img img { width:100%; height:100%; object-fit:cover; }
.shop-card .sc-body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:9px; flex:1; }
.shop-card .sc-cat { font-family:var(--f-head); font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); }
.shop-card h3 { font-family:var(--f-head); font-weight:700; font-size:18px; text-transform:uppercase; line-height:1.1; }
.shop-card .sc-desc { color:var(--mute); font-size:12.5px; line-height:1.45; flex:1; }
.shop-card .sc-price { font-family:var(--f-head); font-weight:700; font-size:22px; color:var(--paper); }
.shop-card select { width:100%; background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-s); color:var(--paper); padding:8px 10px; font:inherit; font-size:13px; }
.shop-card .sc-add { width:100%; justify-content:center; }

/* košík — plovoucí tlačítko */
.cart-fab { position:fixed; right:22px; bottom:22px; z-index:900; width:60px; height:60px; border-radius:50%; background:var(--yellow); color:#0b0b0b; border:0; display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.4); cursor:pointer; }
.cart-fab svg { width:26px; height:26px; fill:currentColor; }
.cart-fab .cf-count { position:absolute; top:-4px; right:-4px; min-width:24px; height:24px; padding:0 5px; background:var(--cyan); color:#06121c; border:2px solid var(--bg); border-radius:12px; font:700 13px/20px var(--f-head); text-align:center; }
.cart-fab .cf-count:empty, .cart-fab .cf-count.zero { display:none; }

/* košík drawer */
.cart-drawer { position:fixed; inset:0; z-index:1200; display:none; }
.cart-drawer.open { display:block; }
.cart-back { position:absolute; inset:0; background:rgba(3,6,11,.6); backdrop-filter:blur(3px); }
.cart-panel { position:absolute; top:0; right:0; bottom:0; width:min(430px,100%); background:var(--bg-2); border-left:1px solid var(--line); display:flex; flex-direction:column; box-shadow:-20px 0 60px rgba(0,0,0,.5); }
.cart-head { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line-2); }
.cart-head h3 { font-family:var(--f-head); font-weight:700; font-size:20px; text-transform:uppercase; }
.cart-close { background:none; border:0; color:var(--paper); font-size:26px; cursor:pointer; line-height:1; }
.cart-items { flex:1; overflow-y:auto; padding:16px 22px; display:flex; flex-direction:column; gap:12px; }
.cart-empty { color:var(--mute); text-align:center; padding:40px 0; }
.cart-item { display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--line-2); }
.cart-item img { width:56px; height:56px; border-radius:var(--r-s); object-fit:cover; }
.cart-item .ci-name { font-family:var(--f-head); font-weight:600; font-size:14px; text-transform:uppercase; line-height:1.1; }
.cart-item .ci-meta { color:var(--mute); font-size:12px; margin-top:2px; }
.cart-item .ci-qty { display:flex; align-items:center; gap:6px; margin-top:6px; }
.cart-item .ci-qty button { width:24px; height:24px; border:1px solid var(--line); background:var(--card); color:var(--paper); border-radius:6px; cursor:pointer; font-size:15px; line-height:1; }
.cart-item .ci-price { font-family:var(--f-head); font-weight:700; font-size:15px; text-align:right; white-space:nowrap; }
.cart-item .ci-rm { background:none; border:0; color:var(--mute); cursor:pointer; font-size:12px; margin-top:4px; }
.cart-foot { padding:18px 22px 22px; border-top:1px solid var(--line-2); }
.cart-total { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; font-family:var(--f-head); }
.cart-total b { font-size:26px; color:var(--yellow); }
.cart-foot .btn { width:100%; justify-content:center; }

/* pokladna / potvrzení uvnitř drawer */
.checkout label { display:block; font-family:var(--f-head); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin:12px 0 5px; }
.checkout input, .checkout textarea { width:100%; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-s); color:var(--paper); padding:10px 12px; font:inherit; }
.checkout .row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
/* Pole musí mít aspoň 16 px, jinak iOS Safari při klepnutí do nich přiblíží celou stránku
   a zákazník dopisuje adresu do rozjeté pokladny. `font:inherit` to nezaručí. */
.checkout input, .checkout textarea { font-size: 16px; }
.ck-hint { color: var(--mute); font-size: 12px; margin: 12px 0 0; }
.order-done { text-align:center; padding:26px 10px; }
.order-done .od-ico { width:64px; height:64px; border-radius:50%; background:#173a26; display:grid; place-items:center; margin:0 auto 16px; }
.order-done .od-ico svg { width:32px; height:32px; stroke:#6fd79a; fill:none; stroke-width:2.5; }
@media (max-width:560px){ .cart-fab{ right:16px; bottom:16px; } }
.shop-filter button {
  font-family: var(--f-head); font-weight: 600; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--card); color: rgba(242,246,250,.82); cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.shop-filter button:hover { border-color: var(--cyan); color: #fff; }
.shop-filter button.active { background: var(--yellow); color: #0b0b0b; border-color: var(--yellow); }

/* ============ E-shop: členská zóna + segmenty ============ */
.shop-hero-row { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }

/* členská lišta */
.member-bar { flex:none; }
.member-bar .mb-in { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r); padding:12px 16px; min-width:300px; }
.member-bar .mb-in.is-on { border-color:rgba(53,168,216,.5); }
.member-bar .mb-lock { width:30px; height:30px; display:grid; place-items:center; color:var(--mute); flex:none; }
.member-bar .mb-lock svg { width:20px; height:20px; fill:currentColor; }
.member-bar .mb-badge { font-family:var(--f-head); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#06121c; background:var(--cyan); padding:5px 9px; border-radius:999px; flex:none; }
.member-bar .mb-txt { display:flex; flex-direction:column; line-height:1.15; }
.member-bar .mb-txt b { font-family:var(--f-head); font-weight:700; font-size:14px; text-transform:uppercase; }
.member-bar .mb-txt span { color:var(--mute); font-size:11.5px; }
.member-bar .mb-btn { margin-left:auto; font-family:var(--f-head); font-weight:600; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--bg-2); color:var(--paper); cursor:pointer; white-space:nowrap; }
.member-bar .mb-btn.is-y { background:var(--yellow); color:#0b0b0b; border-color:var(--yellow); }
.member-bar .mb-btn:hover { filter:brightness(1.08); }

/* segmenty Fanshop / Týmové */
.shop-segs { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.shop-seg { display:inline-flex; align-items:center; gap:8px; font-family:var(--f-head); font-weight:700; font-size:15px; letter-spacing:.03em; text-transform:uppercase; padding:11px 20px; border-radius:var(--r-s); border:1px solid var(--line-2); background:var(--card); color:rgba(242,246,250,.8); cursor:pointer; transition:border-color .15s, color .15s, background .15s; }
.shop-seg:hover { border-color:var(--cyan); color:#fff; }
.shop-seg.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.shop-seg .seg-lock { display:inline-grid; place-items:center; }
.shop-seg .seg-lock svg { width:15px; height:15px; fill:currentColor; opacity:.85; }
.shop-seg .seg-n { font-size:12px; opacity:.7; font-weight:600; }
.shop-seg.locked { color:var(--mute); }

/* placeholder produktu bez fotky + týmový odznak */
.shop-card .sc-img { position:relative; }
.sc-ph { width:100%; height:100%; display:grid; place-items:center; position:relative; background:linear-gradient(160deg,#0d1826,#0a1119); }
.sc-ph-logo { position:absolute; width:66%; max-width:150px; opacity:.06; filter:grayscale(1); pointer-events:none; }
.sc-ph-ico { width:44%; max-width:88px; height:auto; fill:none; stroke:var(--cyan); stroke-width:1.1; opacity:.5; }
/* Zúženo na kartu e-shopu: stejnou třídu .sc-team používá i sloupec „Klub" v tabulce střelců
   na /tym.html. Nezúžená verze mu vnutila position:absolute; top/left → všech 16 buněk se
   složilo na sobě do 16px čtverečku a text (mute na cyanu) měl kontrast 1,04:1. */
.sc-img .sc-team { position:absolute; top:10px; left:10px; z-index:2; font-family:var(--f-head); font-weight:700; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#06121c; background:var(--cyan); padding:4px 8px; border-radius:6px; }

/* buy řádek na kartě */
.shop-card .sc-buy { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.shop-card .sc-size { min-width:98px; }
.shop-card .sc-uni { font-size:12px; color:var(--mute); }

/* košík: týmový odznak + placeholder */
.cart-item .ci-team { font-family:var(--f-head); font-weight:700; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:#06121c; background:var(--cyan); padding:2px 5px; border-radius:4px; vertical-align:middle; }
.cart-item .ci-ph { width:56px; height:56px; border-radius:var(--r-s); background:#0d1826; display:grid; place-items:center; }
.cart-item .ci-ph img { width:64%; height:auto; opacity:.5; }
.ck-warn { background:rgba(229,72,77,.12); border:1px solid rgba(229,72,77,.4); color:#ffb4b6; font-size:12.5px; border-radius:var(--r-s); padding:9px 12px; margin:6px 0 2px; }

/* zamčená sekce týmového vybavení */
.member-locked { padding:16px 0 10px; }
.member-locked .ml-in { text-align:center; max-width:520px; margin:0 auto; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r); padding:40px 28px; }
.member-locked .ml-lock { display:inline-grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--bg-2); border:1px solid var(--line); margin-bottom:16px; }
.member-locked .ml-lock svg { width:30px; height:30px; fill:var(--cyan); }
.member-locked h3 { font-size:24px; text-transform:uppercase; margin-bottom:10px; }
.member-locked p { color:var(--mute); font-size:14px; line-height:1.55; margin-bottom:20px; }

/* přihlašovací modal člena */
.mem-modal { position:fixed; inset:0; z-index:1300; display:none; }
.mem-modal.open { display:block; }
.mem-back { position:absolute; inset:0; background:rgba(3,6,11,.7); backdrop-filter:blur(4px); }
.mem-panel { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(400px,92vw); background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:30px 28px 26px; box-shadow:0 30px 80px rgba(0,0,0,.6); text-align:center; }
.mem-close { position:absolute; top:12px; right:14px; background:none; border:0; color:var(--mute); font-size:26px; line-height:1; cursor:pointer; }
.mem-ico { width:56px; height:56px; border-radius:50%; background:var(--card); border:1px solid var(--line); display:grid; place-items:center; margin:0 auto 14px; }
.mem-ico svg { width:28px; height:28px; fill:var(--cyan); }
.mem-panel form { text-align:left; }
.mem-panel label { display:block; font-family:var(--f-head); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin:10px 0 5px; }
.mem-panel input { width:100%; background:var(--card); border:1px solid var(--line); border-radius:var(--r-s); color:var(--paper); padding:11px 13px; font:inherit; }
.mem-err { color:#ff9ea0; font-size:13px; margin-top:10px; background:rgba(229,72,77,.1); border:1px solid rgba(229,72,77,.35); border-radius:var(--r-s); padding:8px 11px; }

@media (max-width:640px){
  .shop-hero-row { align-items:flex-start; }
  .member-bar, .member-bar .mb-in { width:100%; min-width:0; }
  .shop-card .sc-buy { flex-direction:column; align-items:stretch; }
}

/* ============ Právní stránky + patička ============ */
.legal { max-width:820px; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r); padding:32px 34px; }
.legal h2 { font-family:var(--f-head); font-weight:700; font-size:20px; text-transform:uppercase; letter-spacing:.02em; color:var(--paper); margin:26px 0 10px; }
.legal h2:first-child { margin-top:0; }
.legal p { color:rgba(224,231,240,.86); font-size:14.5px; line-height:1.65; margin-bottom:12px; }
.legal ul { margin:0 0 14px 20px; color:rgba(224,231,240,.86); font-size:14.5px; line-height:1.6; }
.legal li { margin-bottom:5px; }
.legal a { color:var(--cyan); }
.legal a:hover { text-decoration:underline; }
.legal .legal-note { margin-top:22px; padding-top:16px; border-top:1px solid var(--line-2); color:var(--mute); font-size:13px; }

.f-legal { display:flex; gap:8px 18px; flex-wrap:wrap; padding:14px 0; border-top:1px solid var(--line-2); }
.f-legal a { color:var(--mute); font-size:13px; }
.f-legal a:hover { color:var(--cyan); }

.ck-consent { color:var(--mute); font-size:11.5px; line-height:1.5; margin-bottom:10px; }
.ck-consent a, .form-consent a { color:var(--cyan); }
.form-consent { color:var(--mute); font-size:12.5px; line-height:1.5; margin:4px 0 12px; }

/* ============ Ligová tabulka ============ */
.standings-wrap { margin: 4px 0 26px; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--card); }
.standings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line-2); }
.standings-head h3 { font-family: var(--f-head); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.standings-head .src { font-family: var(--mono); font-size: 11px; color: var(--mute); }
.standings-scroll { overflow-x: auto; }
table.standings { width: 100%; border-collapse: collapse; min-width: 560px; }
table.standings th, table.standings td { padding: 10px 8px; text-align: center; font-variant-numeric: tabular-nums; font-size: 13.5px; }
table.standings th { font-family: var(--f-head); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--line-2); }
table.standings td.team, table.standings th.team { text-align: left; font-family: var(--f-head); font-weight: 600; text-transform: uppercase; white-space: nowrap; padding-left: 16px; }
table.standings td.pos { color: var(--mute); width: 34px; }
table.standings td.pts { font-weight: 700; color: var(--paper); }
table.standings tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.04); }
table.standings tr.is-kvp td { background: rgba(255, 210, 0, .07); }
table.standings tr.is-kvp td.team { color: var(--yellow); }
table.standings tr.is-kvp td.pos { color: var(--yellow); font-weight: 700; }
table.standings .lg { width: 24px; height: 24px; border-radius: 50%; background: #f2f6fa; display: inline-flex; align-items: center; justify-content: center; padding: 3px; vertical-align: middle; margin-right: 8px; box-sizing: border-box; }
table.standings .lg img { max-width: 100%; max-height: 100%; }
@media (max-width: 620px) { table.standings th.hidesm, table.standings td.hidesm { display: none; } }

/* Soupiska účastníků — než se v nové sezoně odehraje první kolo. Vědomě to není
   tabulka: dokud nikdo nehrál, žádné pořadí neexistuje a nesmí se tak tvářit. */
.standings-note { padding: 12px 18px 0; margin: 0; font-size: 13px; color: var(--mute); }
.zx-chybi { color: var(--mute); }
/* upřesnění pod nadpisem bloku na stránce Tým — z které sezony čísla jsou */
.tym-note { margin: 0 0 14px; font-size: 13px; color: var(--mute); }
.roster-grid .tym-note { grid-column: 1 / -1; margin-bottom: 0; }
.standings-teams { list-style: none; margin: 0; padding: 12px 18px 16px; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.standings-teams li {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-family: var(--f-head); font-weight: 600; font-size: 12.5px; text-transform: uppercase;
}
.standings-teams li.is-kvp { border-color: rgba(255,210,0,.45); background: rgba(255,210,0,.07); color: var(--yellow); }
.standings-teams .lg { width: 24px; height: 24px; border-radius: 50%; background: #f2f6fa; display: inline-flex; align-items: center; justify-content: center; padding: 3px; box-sizing: border-box; flex: 0 0 auto; }
.standings-teams .lg img { max-width: 100%; max-height: 100%; }

/* foto v kartě časové osy */
.tv-card { overflow: hidden; }
.tv-card .tv-img {
  display: block; width: calc(100% + 40px); height: 190px; object-fit: cover;
  margin: -16px -20px 14px; border-bottom: 1px solid var(--line-2);
}
.tv-item.is-title .tv-card .tv-img { border-bottom-color: rgba(255,210,0,.25); }

/* ============ Vedení / osobnosti (klub.html) ============ */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 14px; }
.staff-card { display: flex; gap: 15px; align-items: flex-start; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 16px 18px; transition: border-color .15s; }
.staff-card:hover { border-color: var(--cyan); }
.staff-card .sf-photo { width: 62px; height: 62px; flex: none; border-radius: 50%; overflow: hidden; background: radial-gradient(120% 120% at 30% 20%, #16324e, #0a1420); border: 1px solid var(--line); display: grid; place-items: center; }
.staff-card .sf-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.staff-card .sf-photo b { font-family: var(--f-head); font-weight: 700; font-size: 22px; color: var(--cyan); }
.staff-card .sf-name { font-family: var(--f-head); font-weight: 700; font-size: 17px; text-transform: uppercase; line-height: 1.1; }
.staff-card .sf-role { font-family: var(--f-head); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--cyan); margin: 3px 0 6px; }
.staff-card .sf-note { color: var(--mute); font-size: 13px; line-height: 1.45; }

/* ============ Úvodní animace + jemné efekty (fx.js) ============ */
.fx-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--cyan), var(--yellow)); z-index: 2000; pointer-events: none; }
.fx-glow { position: fixed; top: 0; left: 0; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; z-index: 1; background: radial-gradient(circle, rgba(53,168,216,.09), transparent 62%); mix-blend-mode: screen; will-change: transform; }
body.intro-lock { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 3000; overflow: hidden; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 22%, #103049 0%, #0a1a29 45%, #05080e 100%); transition: clip-path .6s cubic-bezier(.76,0,.24,1), opacity .4s ease .32s; clip-path: inset(0 0 0 0); }
.intro.done { clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none; }
.intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.intro-sweep { position: absolute; top: -20%; left: -60%; width: 42%; height: 140%; background: linear-gradient(105deg, transparent, rgba(223,161,0,.12) 44%, rgba(255,219,130,.5) 50%, rgba(223,161,0,.12) 56%, transparent); transform: skewX(-12deg); animation: intro-sweep 1.2s cubic-bezier(.6,0,.3,1) both .12s; }
.intro-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.intro .intro-logo { position: relative; display: grid; place-items: center; animation: intro-logo .9s cubic-bezier(.16,1,.3,1) both; }
.intro .intro-logo img { width: min(140px, 32vw); filter: drop-shadow(0 8px 40px rgba(53,168,216,.55)); position: relative; z-index: 2; }
.intro-ring { position: absolute; width: min(176px, 40vw); height: min(176px, 40vw); border-radius: 50%; border: 2px solid rgba(223,161,0,.5); opacity: 0; animation: intro-ripple 1.4s ease-out .3s 1 both; }
.intro-word { font-family: var(--f-head); font-weight: 700; font-size: clamp(40px, 9.5vw, 96px); line-height: .92; letter-spacing: .005em; text-transform: uppercase; color: #fff; display: flex; gap: .26em; overflow: hidden; padding: .04em 0; }
.intro-word b { display: inline-block; animation: intro-word .8s cubic-bezier(.16,1,.3,1) both .42s; }
.intro-word b.yl { color: var(--yellow); animation-delay: .55s; }
.intro-line { width: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--yellow), transparent); animation: intro-line .7s cubic-bezier(.7,0,.2,1) both .78s; }
.intro-tag { font-family: var(--f-head); font-weight: 600; font-size: clamp(12px, 3vw, 17px); letter-spacing: .42em; text-transform: uppercase; color: rgba(232,241,248,.72); opacity: 0; animation: intro-tag .8s ease both .98s; padding-left: .42em; }
@keyframes intro-logo { 0% { opacity: 0; transform: scale(1.5); filter: blur(10px); } 55% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: scale(1); } }
@keyframes intro-ripple { 0% { opacity: .8; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes intro-word { 0% { opacity: 0; transform: translateY(115%) skewY(6deg); } 100% { opacity: 1; transform: translateY(0) skewY(0); } }
@keyframes intro-line { 0% { width: 0; } 100% { width: min(330px, 66vw); } }
@keyframes intro-tag { 0% { opacity: 0; transform: translateY(10px); letter-spacing: .2em; } 100% { opacity: .72; transform: translateY(0); letter-spacing: .42em; } }
@keyframes intro-sweep { 0% { left: -60%; } 100% { left: 132%; } }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } .fx-glow { display: none; } }

/* vypíchnutí (featured) trenéři v sekci Vedení */
.staff-card.is-featured { border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(53,168,216,.35), 0 12px 34px rgba(0,0,0,.32); background: linear-gradient(180deg, rgba(53,168,216,.06), transparent 60%), var(--card); }
.staff-card .sf-star { color: var(--yellow); font-size: .82em; vertical-align: middle; }

/* zápasy připojené k článku (sidebar detailu) */
.amatch{background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;padding:11px 13px}
.amatch-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.amatch-kvp,.amatch-opp{font-family:var(--f-head);font-weight:600;font-size:12.5px;text-transform:uppercase;flex:1;line-height:1.1}
.amatch-opp{text-align:right}
.amatch-score{font-family:var(--f-head);font-weight:700;font-size:18px;white-space:nowrap;color:var(--paper)}
.amatch-score.w{color:#6fd79a}
.amatch-score.l{color:#e8918f}
.amatch-meta{color:var(--mute);font-size:11.5px;margin-top:5px;text-align:center}

/* fotogalerie u článku + lightbox */
.article-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.article-gallery .ag-item{display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid var(--line-2);background:var(--bg-2)}
.article-gallery .ag-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.article-gallery .ag-item:hover img{transform:scale(1.06)}
.ag-lb{position:fixed;inset:0;z-index:2000;display:none;place-items:center;background:rgba(3,6,11,.94);backdrop-filter:blur(4px)}
.ag-lb.open{display:grid}
.ag-lb img{max-width:92vw;max-height:88vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.ag-lb button{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;width:48px;height:48px;border-radius:50%;font-size:24px;cursor:pointer;display:grid;place-items:center}
.ag-lb button:hover{background:rgba(255,255,255,.16)}
.ag-lb .ag-close{top:20px;right:20px}
.ag-lb .ag-prev{left:16px;top:50%;transform:translateY(-50%)}
.ag-lb .ag-next{right:16px;top:50%;transform:translateY(-50%)}
@media(max-width:560px){.ag-lb .ag-prev{left:8px}.ag-lb .ag-next{right:8px}}

/* ---------- Média (stránka + karty) ---------- */
.md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.md-card { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, border-color .18s ease; }
.md-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.18); }
.md-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #0c1620; cursor: pointer; }
.md-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.md-card:hover .md-thumb img { transform: scale(1.05); }
.md-thumb.md-noimg { display: flex; align-items: center; justify-content: center; cursor: default; }
.md-noimg .md-ph { font-size: 46px; opacity: .5; }
.md-play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; background: rgba(223,161,0,.94); color: #10202e; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.4); transition: transform .18s ease; }
.md-thumb:hover .md-play { transform: scale(1.1); }
.md-src { position: absolute; top: 10px; left: 10px; background: rgba(8,16,24,.82); color: #fff; font-family: var(--f-head); font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: 5px; }
.md-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.md-meta { color: var(--mute); font-family: var(--f-head); font-size: 12px; letter-spacing: .03em; text-transform: uppercase; }
.md-title { font-family: var(--f-head); font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--paper); }
.md-perex { color: var(--mute); font-size: 13.5px; line-height: 1.5; flex: 1; }
.md-open { margin-top: 6px; align-self: flex-start; background: none; border: 0; color: var(--yellow); font-family: var(--f-head); font-weight: 700; font-size: 13.5px; letter-spacing: .02em; cursor: pointer; padding: 0; }
.md-open:hover { text-decoration: underline; }
.md-lb { position: fixed; inset: 0; z-index: 200; background: rgba(4,8,12,.94); display: flex; align-items: center; justify-content: center; padding: 24px; }
.md-lb[hidden] { display: none; }
.md-lb-frame { width: min(1000px, 94vw); aspect-ratio: 16/9; }
.md-lb-frame iframe { width: 100%; height: 100%; border: 0; border-radius: 10px; }
.md-lb-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; border: 0; font-size: 20px; cursor: pointer; }
.md-lb-close:hover { background: rgba(255,255,255,.24); }

/* ---------- článek: boční galerie + média ---------- */
.ag-side { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ag-side .ag-item { display: block; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-2); }
.ag-side .ag-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ag-side .ag-item:hover img { transform: scale(1.08); }
.art-med { display: flex; flex-direction: column; gap: 6px; }
.art-med-vid { aspect-ratio: 16/9; border-radius: 9px; overflow: hidden; background: #0c1620; }
.art-med-vid iframe { width: 100%; height: 100%; border: 0; }
.art-med-t { font-family: var(--f-head); font-weight: 600; font-size: 13px; color: var(--mute); }
.art-med-link { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 13px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 9px; font-family: var(--f-head); font-weight: 600; font-size: 14px; color: var(--paper); }
.art-med-link span { color: var(--yellow); }
.art-med-link:hover { border-color: var(--yellow); }

/* ---------- média: patička karty + zdroj ---------- */
.md-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.md-srclink { font-family: var(--f-head); font-weight: 600; font-size: 11.5px; letter-spacing: .02em; color: var(--mute); }
a.md-srclink:hover { color: var(--yellow); }
.art-med-src { font-family: var(--f-head); font-weight: 600; font-size: 11px; letter-spacing: .02em; color: var(--mute); }

/* ---------- Odpočet do zápasu (kompaktně v liště) ---------- */
#countdownSlot:empty { display: none; }
#countdownSlot { display: flex; }
.match-bar-in.has-cd .mbar-next { display: none; }
.match-bar-in.has-cd .mbar { padding-top: 11px; padding-bottom: 11px; }
.mbar-cd { position: relative; overflow: hidden; flex: 1; gap: 14px; justify-content: space-between; }
.mbar-cd::before { content: ""; position: absolute; inset: 0; background: radial-gradient(85% 170% at 96% 0%, rgba(223,161,0,.13), transparent 58%); pointer-events: none; }
.mbar-cd .cd-info { position: relative; z-index: 1; min-width: 0; flex: 1; }
.mbar-cd .cd-tag { color: var(--yellow); }
.mbar-cd .cd-match { font-family: var(--f-head); font-weight: 700; font-size: clamp(16px, 1.5vw, 21px); text-transform: uppercase; color: var(--paper); line-height: 1.08; margin: 3px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbar-cd .cd-match .cd-vs { color: var(--yellow); font-size: .68em; margin: 0 .3em; }
.mbar-cd .mbar-meta { font-size: 11.5px; }
.cd-digits { position: relative; z-index: 1; display: flex; align-items: stretch; gap: 4px; flex: none; }
.cd-u { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 42px; background: rgba(4,12,20,.42); border: 1px solid rgba(255,255,255,.08); border-radius: 7px; padding: 4px 6px; }
.cd-u b { font-family: var(--f-head); font-weight: 700; font-size: clamp(17px, 1.7vw, 21px); color: var(--yellow); font-variant-numeric: tabular-nums; line-height: 1; }
.cd-u i { font-style: normal; font-family: var(--f-head); font-weight: 600; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: rgba(226,236,245,.55); margin-top: 2px; }
.cd-live { font-family: var(--f-head); font-weight: 700; font-size: 15px; color: var(--yellow); text-transform: uppercase; }
@media (max-width: 860px) { .match-bar-in.has-cd { grid-template-columns: 1fr; } .mbar-cd { flex-wrap: wrap; } }
/* Na úzkých displejích se odpočet musí umět zmenšit, jinak ho pevných 4×42 px vytlačí ven. */
@media (max-width: 560px) {
  .cd-digits { flex: 0 1 auto; }
  .cd-u { min-width: 34px; padding: 4px 3px; }
  .cd-u.cd-sec { display: none; }   /* dny/hodiny/minuty stačí, sekundy jsou na telefonu jen šum */
  .mbar { gap: 10px; padding: 14px 16px; }
  /* Dvě tlačítka (Statistiky + Záznam) vedle textu už se na telefon nevejdou —
     text by se smrskl na dvě písmena na řádek. Radši je pustíme pod sebe. */
  .mbar-last { flex-wrap: wrap; }
  .mbar-last .mbar-body { flex: 1 1 100%; }
  .mbar-last .mbar-cta { flex: 1 0 100%; flex-direction: row; justify-content: flex-start; }
}

/* ---------- média: statistiky v hlavičce + štítek kategorie ---------- */
.md-stats { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.md-stat { font-family: var(--f-head); font-weight: 600; font-size: 12.5px; letter-spacing: .02em; color: var(--mute); background: var(--bg); border: 1px solid var(--line-2); border-radius: 20px; padding: 5px 13px; white-space: nowrap; }
.md-stat b { color: var(--yellow); font-weight: 700; font-size: 14px; }
.md-stat-y { color: var(--paper); border-color: rgba(223,161,0,.35); }
.md-cat { position: absolute; top: 10px; right: 10px; z-index: 1; background: rgba(223,161,0,.92); color: #10202e; font-family: var(--f-head); font-weight: 700; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; }
.md-catfilter { margin-top: -4px; }
.md-catfilter .shop-seg { font-size: 12.5px; padding-top: 6px; padding-bottom: 6px; }

/* ---------- náborové video ---------- */
.nabor-video { max-width: 860px; margin: 0 auto; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 18px 50px rgba(0,0,0,.35); background: #0c1620; }
.nabor-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Galerie (alba + lightbox) ---------- */
.gal-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.gal-album { display: flex; flex-direction: column; text-align: left; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; cursor: pointer; padding: 0; transition: transform .18s ease, border-color .18s ease; }
.gal-album:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.2); }
.gal-cover { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #0c1620; display: block; }
.gal-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gal-album:hover .gal-cover img { transform: scale(1.06); }
.gal-count { position: absolute; bottom: 10px; right: 10px; background: rgba(8,16,24,.82); color: #fff; font-family: var(--f-head); font-weight: 700; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; }
.gal-info { padding: 15px 17px 18px; display: flex; flex-direction: column; gap: 4px; }
.gal-info b { font-family: var(--f-head); font-weight: 700; font-size: 20px; color: var(--paper); text-transform: uppercase; line-height: 1.1; }
.gal-meta { font-family: var(--f-head); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--yellow); }
.gal-desc { color: var(--mute); font-size: 13.5px; line-height: 1.5; margin-top: 3px; }
.gal-lb { position: fixed; inset: 0; z-index: 200; background: rgba(4,8,12,.96); display: flex; flex-direction: column; }
.gal-lb[hidden] { display: none; }
.gal-lb-bar { display: flex; align-items: center; gap: 14px; padding: 16px 22px; }
.gal-lb-title { font-family: var(--f-head); font-weight: 700; font-size: 17px; text-transform: uppercase; color: #fff; }
.gal-lb-count { font-family: var(--f-head); color: rgba(255,255,255,.6); font-size: 13px; }
.gal-lb-close { margin-left: auto; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; border: 0; font-size: 19px; cursor: pointer; }
.gal-lb-close:hover { background: rgba(255,255,255,.24); }
.gal-lb-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 18px 22px; min-height: 0; }
.gal-lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.gal-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; border: 0; font-size: 30px; line-height: 1; cursor: pointer; z-index: 2; }
.gal-lb-nav:hover { background: var(--yellow); color: #10202e; }
.gal-lb-prev { left: 16px; } .gal-lb-next { right: 16px; }
@media (max-width: 620px) { .gal-lb-nav { width: 42px; height: 42px; font-size: 24px; } }

/* ---------- živý zápas (LIVE) ---------- */
.mbar-cd.mbar-live::before { background: radial-gradient(85% 170% at 96% 0%, rgba(255,45,47,.18), transparent 56%); }
.cd-tag.live-tag { color: #ff5052 !important; border-right-color: #ff5052 !important; }
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ff2d2f; margin-bottom: 6px; animation: livePulse 1.1s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,45,47,.6); } 50% { opacity: .45; box-shadow: 0 0 0 7px rgba(255,45,47,0); } }
.mbar-live .cd-match { align-items: center; }
.mbar-live .live-score { color: var(--yellow); font-variant-numeric: tabular-nums; margin: 0 .3em; font-size: 1.18em; }
.cd-live-btn { flex: none; }

/* ---------- stránka Týmy ---------- */
.tym-cats { display: flex; gap: 10px; flex-wrap: wrap; }
.tym-cat { font-family: var(--f-head); font-weight: 700; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; padding: 12px 30px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--mute); cursor: pointer; transition: all .15s ease; }
.tym-cat:hover { color: var(--paper); border-color: rgba(255,255,255,.22); }
.tym-cat.active { background: var(--yellow); color: #0b0b0b; border-color: var(--yellow); }
.tym-seasonbar { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
.tym-seasonlbl { font-family: var(--f-head); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
#tymSeasons { display: inline-flex; gap: 6px; flex-wrap: wrap; }
#tymSeasons button { font-family: var(--f-head); font-weight: 600; font-size: 13px; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--mute); cursor: pointer; }
#tymSeasons button:hover { color: var(--paper); }
#tymSeasons button.active { border-color: var(--cyan); color: var(--cyan); background: rgba(15,134,184,.1); }
#tymSeasons .cur-dot { color: var(--yellow); }
.tym-block { margin-bottom: 42px; }
.tym-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; align-items: start; }
/* Tabulka uvnitř má min-width:560px. Bez min-width:0 na položce se track roztáhl na těch
   560 px, obal .standings-scroll nikdy nebyl užší než tabulka, takže se jeho overflow-x:auto
   neaktivoval — sloupec „Body" končil za okrajem displeje a doscrollovat k němu nešlo. */
.tym-cols > * { min-width: 0; }
@media (max-width: 900px) { .tym-cols { grid-template-columns: 1fr; } }
.scorers { width: 100%; border-collapse: collapse; font-family: var(--f-head); }
.scorers td { padding: 9px 8px; border-bottom: 1px solid var(--line-2); font-size: 14.5px; }
.scorers .sc-rank { color: var(--mute); width: 32px; font-weight: 700; }
.scorers .sc-name { font-weight: 600; color: var(--paper); }
.scorers .sc-team { color: var(--mute); font-size: 12px; text-align: right; }
.scorers .sc-g { text-align: right; font-weight: 700; color: var(--yellow); width: 44px; font-variant-numeric: tabular-nums; }
.scorers tr.is-kvp td { background: rgba(223,161,0,.09); }
.scorers tr.is-kvp .sc-name { color: var(--yellow); }
.tym-match { margin-bottom: 7px; }

/* ---------- bohatá tabulka střelců ---------- */
.scorers thead th { padding: 7px 8px; font-family: var(--f-head); font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--line-2); text-align: center; }
.scorers thead th.sc-rank, .scorers thead th.sc-name { text-align: left; }
.scorers thead th.sc-team { text-align: left; }
.scorers td { text-align: center; }
.scorers td.sc-rank, .scorers td.sc-name, .scorers td.sc-team { text-align: left; }
.tym-cols.single { grid-template-columns: 1fr; }

/* ---------- fix zarovnání tabulky střelců ---------- */
#tymScorers .scorers { display: table; table-layout: fixed; width: 100%; }
#tymScorers .scorers thead { display: table-header-group; }
#tymScorers .scorers tbody { display: table-row-group; }
#tymScorers .scorers tr { display: table-row; }
#tymScorers .scorers th, #tymScorers .scorers td { display: table-cell; vertical-align: middle; }
#tymScorers .scorers .sc-rank { width: 36px; }
#tymScorers .scorers .sc-team { width: 32%; }
#tymScorers .scorers thead th:not(.sc-rank):not(.sc-name):not(.sc-team),
#tymScorers .scorers tbody td:not(.sc-rank):not(.sc-name):not(.sc-team) { width: 44px; }

/* článek — média a galerie na celou šířku pod textem (v boku zůstávají jen zápasy) */
.detail-below { margin-top: 2px; }
.detail-below > div:empty { display: none; }
.detail-below #articleMedia .panel-b { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.detail-below #articleGallery .ag-side { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 720px){ .detail-below #articleMedia .panel-b { grid-template-columns: 1fr; } }

/* média — rok jako rozevírací seznam (místo přeplněných chipů) */
.md-yearfilter { display: flex; align-items: center; gap: 12px; }
.md-year-lbl { font-family: var(--f-head); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.md-year-wrap { position: relative; }
.md-year-wrap::after { content: "▾"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--cyan); pointer-events: none; font-size: 12px; }
.md-year-select { appearance: none; -webkit-appearance: none; background: var(--card); color: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 38px 10px 14px; font-family: var(--f-body); font-weight: 600; font-size: 14px; cursor: pointer; min-width: 190px; }
.md-year-select:focus { outline: none; border-color: var(--cyan); }

/* ============ Hledání v archivu článků ============ */
/* Web měl 498 článků a jediný způsob, jak se v nich hrabat, byly rubriky + „Načíst další". */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ak-search { margin: 0 0 14px; }
.ak-search-in { position: relative; display: flex; align-items: center; }
.ak-search-ico { position: absolute; left: 15px; width: 18px; height: 18px; fill: none; stroke: var(--mute); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.ak-search input {
  width: 100%; background: var(--card); color: var(--paper);
  border: 1px solid var(--line-2); border-radius: var(--r);
  /* 16px není estetické rozhodnutí: pod 16 px iOS Safari při klepnutí do pole přiblíží stránku */
  font-family: var(--f-body); font-size: 16px; font-weight: 500;
  padding: 14px 44px 14px 44px;
  -webkit-appearance: none; appearance: none;
}
.ak-search input::placeholder { color: var(--mute); font-weight: 400; }
.ak-search input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(53,168,216,.14); }
.ak-search input::-webkit-search-cancel-button { display: none; }
.ak-search-x {
  position: absolute; right: 8px; width: 30px; height: 30px; display: grid; place-items: center;
  background: none; border: 0; color: var(--mute); font-size: 15px; cursor: pointer; border-radius: 8px;
}
.ak-search-x:hover { color: var(--paper); background: rgba(255,255,255,.06); }
.ak-search-info { color: var(--mute); font-size: 13.5px; margin: 0 0 14px; }
.ak-search-info b { color: var(--paper); }
.ak-card mark { background: rgba(255,210,0,.22); color: var(--yellow); padding: 0 2px; border-radius: 3px; }

/* ============ 404 ============ */
/* Neexistující adresy dosud vracely výchozí anglickou stránku Expressu („Cannot GET /…").
   Odkazy na klubové články sdílené roky na Facebooku se přitom mění a lámou často. */
.nf-wrap { min-height: 72vh; display: grid; place-items: center; padding: 150px 0 90px; background: var(--bg-2); }
.nf-in { text-align: center; max-width: 620px; }
.nf-code {
  font-family: var(--f-head); font-weight: 700; font-size: clamp(96px, 22vw, 190px);
  line-height: .82; margin: 0 0 6px; letter-spacing: -.02em;
  /* obrys místo výplně: číslo drží kompozici, ale nepřebije nadpis, který nese sdělení */
  color: transparent; -webkit-text-stroke: 2px var(--line);
}
.nf-h { font-size: clamp(28px, 4.6vw, 44px); margin: 0 0 12px; text-wrap: balance; }
.nf-p { color: var(--mute); margin: 0 auto 22px; max-width: 480px; line-height: 1.6; }
.nf-search { text-align: left; margin-bottom: 24px; }
.nf-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Zápas bez určeného termínu. ČSVP mu dává zástupné 1. 1. o půlnoci se skóre „-:-";
   server ho označí příznakem tbd, tady jen ztlumíme „vs", ať to nevypadá jako výsledek. */
.zx-score.zx-tbd { color: var(--mute); font-weight: 600; letter-spacing: .04em; }

/* ============ Sezona 2026/2027 (termínová listina) ============ */
/* Rozpis se čte jako kalendář, ne jako tabulka výsledků: nejdřív měsíc, pak akce,
   teprve uvnitř zápasy. Proto tři úrovně a ne plochý seznam řádků jako v archivu. */
.sez-eyebrow {
  font-family: var(--f-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: .18em; font-size: 12.5px; color: var(--cyan); margin: 0;
}
.sez-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.sez-stat {
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 12px 18px; min-width: 118px;
}
.sez-stat b {
  display: block; font-family: var(--f-head); font-weight: 700; font-size: 26px;
  line-height: 1.05; color: var(--yellow); font-variant-numeric: tabular-nums;
}
.sez-stat span { display: block; color: var(--mute); font-size: 12.5px; margin-top: 3px; }

.sez-month + .sez-month { margin-top: 34px; }
.sez-month-h {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px;
  font-size: 22px; text-transform: uppercase; letter-spacing: .02em;
}
/* linka doprava dotáhne nadpis k okraji, aby měsíc fungoval jako předěl */
.sez-month-h::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.sez-month-h i { font-style: normal; color: var(--mute); font-size: 15px; font-weight: 500; }

.sez-month-list { display: grid; gap: 14px; }
.sez-ev {
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
  overflow: hidden;
}
/* Domácí akce má klub zajímat nejvíc — proto ji nese žlutý pruh, ne jiná barva pozadí:
   odliší se při rychlém projetí očima, ale nerozbije rytmus karet. */
.sez-ev.is-home { border-color: var(--line); box-shadow: inset 3px 0 0 var(--yellow); }
.sez-ev-head {
  display: flex; gap: 18px; padding: 16px 20px;
  border-bottom: 1px solid var(--line-2); flex-wrap: wrap;
}
.sez-ev-when { min-width: 132px; }
.sez-ev-date {
  display: block; font-family: var(--f-head); font-weight: 700; font-size: 19px;
  text-transform: uppercase; color: #fff;
}
.sez-ev-days { display: block; color: var(--mute); font-size: 12px; margin-top: 2px; }
.sez-ev-main { flex: 1; min-width: 240px; }
.sez-ev-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.sez-ev-title { font-size: 19px; margin: 0 0 4px; text-transform: uppercase; text-wrap: balance; }
.sez-ev-venue { color: var(--mute); font-size: 13.5px; margin: 0; }
.sez-ev-note { color: var(--mute); font-size: 12.5px; margin: 6px 0 0; opacity: .85; }

.sez-ev-body { padding: 14px 20px 18px; }
.sez-day + .sez-day { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.sez-day-h {
  font-family: var(--f-head); font-weight: 600; text-transform: uppercase;
  font-size: 12.5px; letter-spacing: .1em; color: var(--cyan); margin-bottom: 7px;
}
/* Tři sloupce s pevným prostředkem drží „vs" na svislé ose napříč všemi zápasy;
   bez toho se osa láme podle délky názvů klubů a seznam vypadá rozsypaně. */
.sez-m {
  display: grid; grid-template-columns: 1fr 54px 1fr; align-items: center;
  gap: 8px; padding: 5px 0; font-size: 14.5px;
}
.sez-m-t { color: var(--mute); }
.sez-m-t:first-child { text-align: right; }
.sez-m-t.is-kvp { color: #fff; font-weight: 600; }
.sez-m-v {
  text-align: center; font-family: var(--f-head); font-weight: 700;
  color: var(--mute); font-size: 13px; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.sez-ev-tbd { color: var(--mute); font-size: 12px; margin: 12px 0 0; opacity: .8; }
.sez-empty { color: var(--mute); padding: 20px 0; }

@media (max-width: 640px) {
  .sez-ev-head { gap: 10px; padding: 14px 16px; }
  .sez-ev-when { min-width: 100%; }
  .sez-ev-body { padding: 12px 16px 16px; }
  /* Na úzkém displeji se tři sloupce zlomí na dva řádky a „vs" spadne doprostřed —
     čitelnější je nechat zápas na jednom řádku a jen zmenšit písmo. */
  .sez-m { grid-template-columns: 1fr 42px 1fr; font-size: 13px; gap: 5px; }
  .sez-stat { min-width: calc(50% - 5px); flex: 1; }
}