/* =====================================================================
   BITVA O PRAHU — Hokejový souboj univerzit · Landing page
   UK × ČVUT · ČZU × VŠE · SH Fortuna, Praha
   Statický web pro nahrání přes FTP (Wedos) — žádný build, žádná DB.
   ---------------------------------------------------------------------
   Paleta „Modrá a zlato":
   · navy ze štítu v logu (#0a2a5c) místo uhlové — tmavé sekce, patička
   · zlatá jako akcent, který na navy svítí (na modrou by modrá nestačila)
   · chladný papír #eff2f7 + inkoust #0d1526 místo teplých tónů derby
   · barvy univerzit jen jako akcent: UK #c01840 · ČVUT #0060b8
     · ČZU #5aa62f · VŠE #2b2b2b (její znak je černý na bílé)
   ===================================================================== */

:root{
  /* --- základ ---
     Paleta „Vice City" podle plakátu IV. ročníku: západ slunce nad Prahou,
     palmy, růžová do oranžové. Tmavá je fialovočerná z oblohy na plakátu
     (dřív navy ze štítu, před tím uhlová z derby). */
  --night-950:#0d0018;
  --night-900:#16002a;
  --night-800:#240040;
  --night-700:#351055;
  --night-badge:#3d1259;

  /* --- hlavní akcent ---
     Oranžová ze spodku loga a ze slunce nad Hradem. Na fialovočerné má
     kontrast přes 7:1, nese claimy, štítky a hlavní tlačítka. */
  --brand:#ff7a2f;
  --brand-hot:#ff9442;
  --brand-deep:#d2560c;

  /* horká růžová z horní části loga — pro prvky, co mají být vyloženě
     „bitevní" (dřív tu byla modrá ze štítu) */
  --royal:#ff3c9c;
  --royal-deep:#a8128f;

  /* Světlé sekce zůstávají světlé — vstupenky v ceníku mají vypadat jako
     papírové lístky. Jen jsou laděné do fialova, ať nestudí proti pozadí. */
  --paper:#f5eff6;
  --paper-2:#e9e0ec;
  --card:#fdfbfe;
  --line:#ddd2e2;
  --line-2:#ece4ef;

  --ink:#1b0a26;
  --ink-2:#584964;
  --ink-3:#8c7d96;

  /* --- barvy univerzit --- */
  --uk:#c01840;
  --cvut:#0060b8;
  --czu:#5aa62f;
  --vse:#2b2b2b;

  --csob:#0099cc;   /* firemní modrá ČSOB — jen pro slevu, jinde se nepoužívá */

  /* růžová: kolečko slevy, řádek „Balíček s afterparty", Party box, CTA
     v liště cookies. Musí být odlišitelná od oranžové i od modré ČSOB. */
  --accent:#ff3c9c;
  --accent-hot:#ff5fb0;
  --accent-lt:#ff92c9;

  /* --- typografie ---
     Tungsten (Hoefler & Co.) je firemní písmo akce a má PLNOU českou
     diakritiku. Je ale úzký displejový grotesk, takže běžný text drží Muller. */
  --disp:"Tungsten Black","Muller Black",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --sans:"Muller",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --wordmark:"Tungsten Black","Muller Black",system-ui,sans-serif;
  /* --mono není monospace: „technický" ráz štítků drží verzálky
     a široké prostrkání, ne rodina písma. */
  --mono:"Muller",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --r:16px;
  --r-sm:12px;
  --wrap:1140px;

  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}


/* Tungsten Black je schválně samostatná rodina: displejové prvky v šabloně
   mají font-weight:400, takže v jedné rodině s celým žebříčkem řezů by se
   vybral Light. Takhle padne Black při libovolné váze. */
@font-face{
  font-family:"Tungsten Black";
  src:url("../fonts/tungsten-black.woff2") format("woff2"),
      url("../fonts/tungsten-black.woff") format("woff");
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* Tungsten s pravým žebříčkem řezů — pro prvky, kde chci váhu řídit ručně. */
@font-face{
  font-family:"Tungsten";
  src:url("../fonts/tungsten-thin.woff2") format("woff2"),
      url("../fonts/tungsten-thin.woff") format("woff");
  font-weight:100;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Tungsten";
  src:url("../fonts/tungsten-light.woff2") format("woff2"),
      url("../fonts/tungsten-light.woff") format("woff");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Tungsten";
  src:url("../fonts/tungsten-medium.woff2") format("woff2"),
      url("../fonts/tungsten-medium.woff") format("woff");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Tungsten";
  src:url("../fonts/tungsten-semibold.woff2") format("woff2"),
      url("../fonts/tungsten-semibold.woff") format("woff");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Tungsten";
  src:url("../fonts/tungsten-bold.woff2") format("woff2"),
      url("../fonts/tungsten-bold.woff") format("woff");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Tungsten";
  src:url("../fonts/tungsten-black.woff2") format("woff2"),
      url("../fonts/tungsten-black.woff") format("woff");
  font-weight:900;font-style:normal;font-display:swap;
}

/* Muller (Fontfabric) — běžný text, plná česká diakritika. */
@font-face{
  font-family:"Muller Black";
  src:url("../fonts/muller-black.woff") format("woff");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Muller";
  src:url("../fonts/muller-regular.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Muller";
  src:url("../fonts/muller-bold.woff") format("woff");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Muller";
  src:url("../fonts/muller-extrabold.woff") format("woff");
  font-weight:800;font-style:normal;font-display:swap;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
/* overflow-x i na <html>: běžící páska je kvůli sklonu o 2 % širší než
   obrazovka (.tape má scale(1.02)), takže bez tohohle šlo stránkou
   na telefonu o 6 px šoupat do strany. body:overflow-x sám nestačí. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--night-950);
  overflow-x:hidden;
}
h1,h2,h3,h4,p,figure{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}
strong{font-weight:700}

::selection{background:var(--brand);color:#fff}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--brand);color:#fff;padding:12px 18px;font-weight:700;border-radius:0 0 10px 0;
}
.skip:focus{left:0}

/* text jen pro čtečky a vyhledávače (vizuálně skrytý, ale čitelný) */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* =====================================================================
   OBECNÉ
   ===================================================================== */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

.sec{padding:clamp(60px,9vw,104px) 0}
.sec-head{max-width:760px;margin-bottom:clamp(28px,4vw,46px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

.eyebrow{
  font-family:var(--mono);font-weight:700;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--brand);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;flex:none}
.sec-head.center .eyebrow::after{content:"";width:22px;height:2px;background:currentColor;flex:none}

.sec-title{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(1.9rem,4.6vw,3.3rem);
  /* 1.08 (dřív 1.02): Muller Black má vyšší háčky/čárky než REDOB a při
     těsnějším řádkování se u víceřádkových českých nadpisů tiskly na sebe */
  line-height:1.08;text-transform:uppercase;letter-spacing:.065em;
  margin-top:12px;
  text-wrap:balance;
}
.lead{color:var(--ink-2);margin-top:14px;max-width:62ch;font-size:16.5px}
.sec-head.center .lead{margin-left:auto;margin-right:auto}

/* světlé / tmavé sekce */
.sec-paper{background:var(--paper);color:var(--ink)}
.sec-paper.tint{background:var(--paper-2)}
.sec-dark{background:var(--night-900);color:#fff;position:relative}
.sec-dark .sec-title{color:#fff}
.sec-dark .lead{color:#c6b6d1}
.sec-dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);opacity:.05;mix-blend-mode:screen;
}
.sec-dark > .wrap{position:relative;z-index:1}

/* =====================================================================
   FANOUŠCI — vykukují zpoza spodní hrany světlé sekce
   ===================================================================== */
.sec.has-fans{
  position:relative;
  /* spodní pás, ve kterém fanoušci stojí, aby nelezli do textu */
  padding-bottom:clamp(150px,17vw,240px);
}
/* obsah sekce zůstává nad nimi — fanoušci se tak schovávají za karty */
.sec.has-fans > .wrap{position:relative;z-index:1}
.fans{
  position:absolute;bottom:0;z-index:0;
  line-height:0;pointer-events:none;
  filter:drop-shadow(0 18px 30px rgba(21,26,35,.28));
}
.fans.left{left:0}
.fans.right{right:0}
/* velikost se řídí VÝŠKOU, ne šířkou — fotky mají různý poměr stran
   (parta je široká a nízká, holky vysoké) a takhle obě vyplní stejný pás */
.fans img{height:clamp(140px,16vw,225px);width:auto;display:block}

/* =====================================================================
   TLAČÍTKA
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:800 15px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;
  padding:17px 26px;border-radius:0;border:0;cursor:pointer;
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease;
  white-space:nowrap;
}
.btn svg{flex:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--brand-hot);outline-offset:3px}

/* ⏳ Tlačítko vypnuté do startu prodeje („Spouštíme zítra!").
   V HTML je to <span>, ne <a> — nejde na něj kliknout ani se na něj dostat
   tabulátorem, takže se nikdo neproklikne na prodej, který ještě neběží.
   Drží rozměry původního tlačítka, aby se při zítřejším zapnutí nic
   nepřeskládalo. Platí pro všechny varianty (.btn, .wbtn, .cs-btn). */
.is-soon{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  background:rgba(255,255,255,.09)!important;
  color:rgba(255,255,255,.78)!important;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26)!important;
  cursor:default;pointer-events:none;transform:none!important;
}
/* v ceníku je mřížka 2 sloupce — jedno vypnuté tlačítko ať je přes oba */
.tk-cta .is-soon{grid-column:1/-1}

.btn-primary{
  background:var(--brand);color:#fff;
  box-shadow:0 14px 34px -14px rgba(255,122,47,.75);
}
.btn-primary:hover{background:var(--brand-hot);transform:translateY(-2px)}

.btn-dark{background:var(--night-900);color:#fff;box-shadow:0 14px 34px -18px rgba(15,12,10,.8)}
.btn-dark:hover{background:var(--night-800);transform:translateY(-2px)}

.btn-accent{background:var(--accent);color:#fff;box-shadow:0 14px 34px -18px rgba(255,60,156,.9)}
.btn-accent:hover{background:var(--accent-hot);transform:translateY(-2px)}

.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.38)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);transform:translateY(-2px)}

.btn-sm{padding:12px 18px;font-size:13px}

/* =====================================================================
   TOPBAR (objeví se po odscrollování hera)
   ===================================================================== */
/* Lišta je navy, ne zlatá: brand Bitvy je modrý štít a plná zlatá plocha
   přes celou šířku by přebila hero i sama sebe. Zlatá tu drží jen linku
   dole a hover odkazů. */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:rgba(13,0,24,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:2px solid var(--brand);
}
.topbar .wrap{display:flex;align-items:center;gap:20px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:11px;color:#fff}
/* logo bez rámečku, větší, přesahuje spodní hranu lišty */
/* Znak je od IV. ročníku široký wordmark, ne čtvercový štít — proto širší
   box a bez přetékání pod lištu. */
.brand img{
  width:clamp(58px,4.8vw,72px);height:auto;
  margin:0;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
.brand .t{font-family:var(--disp);font-size:15px;letter-spacing:.03em;text-transform:uppercase;line-height:1.1}
.brand .t small{display:block;font-family:var(--mono);font-weight:700;font-size:9.5px;letter-spacing:.2em;color:#ffe0cf;margin-top:2px}
.topnav{display:none;gap:26px;margin-left:auto;margin-right:6px}
.topnav a{color:#d6c6e0;font-weight:600;font-size:14px;transition:color .15s}
.topnav a:hover{color:var(--brand-hot)}
.topbar .btn{margin-left:10px}
/* přepínač jazyka — pod 900 px odsazuje sebe i tlačítko doprava (nav je skrytá) */
.lang{
  flex:none;margin-left:auto;
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;
  color:#fff;padding:9px 11px;line-height:1.12;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.45);
  transition:box-shadow .15s,background .15s;
}
.lang:hover{box-shadow:inset 0 0 0 2px #fff;background:rgba(255,255,255,.14)}
.lang:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(min-width:900px){
  .topnav{display:flex}
  .lang{margin-left:0}
}
/* Pod 900 px (kde mizí navigace) se do lišty musí vejít logo + přepínač jazyka
   + DVĚ tlačítka. Název akce proto padá pryč a „Koupit“ se z tlačítka zkracuje
   — zbude jen „VSTUPENKY“. Logo zároveň nepřesahuje ven z lišty (sedí uvnitř,
   svisle na střed; výšku si JS přeměří do --tb-h a hero se přizpůsobí samo). */
/* Název akce mizí dřív než navigace: mezi 900 a 1040 px se logo + název +
   menu + přepínač + dvě tlačítka do lišty nevejdou a název přetékal přes
   navigaci. Nad 1040 px je místa dost. */
@media(max-width:1040px){
  .brand .t{display:none}
}
@media(max-width:899px){
  .hide-sm{display:none}
  .topbar .wrap{gap:10px}
  .brand img{width:48px;margin:0}
  .topbar .btn{margin-left:8px;padding:11px 13px;font-size:12px}
  .lang{padding:9px 10px}
}
@media(max-width:400px){
  .topbar .wrap{gap:6px;padding-left:14px;padding-right:14px}
  .topbar .btn{margin-left:5px;padding:10px 9px;font-size:10.5px;letter-spacing:.03em}
  .lang{padding:8px 7px;font-size:10.5px;letter-spacing:.04em}
  .brand img{width:42px}
}

/* =====================================================================
   HERO
   ===================================================================== */
/* Na telefonu je hero o kus vyšší než obrazovka: na výšku se pod znak jinak
   vejdou jen dva hráči ze čtyř a krajní dva zůstanou za okrajem. Spodní lišta
   s CTA je i tak nad ohybem, protože znak i hráči jsou menší. */
.hero{
  position:relative;color:#fff;isolation:isolate;
  display:flex;flex-direction:column;
  min-height:100svh;
  overflow:hidden; /* ořez parallaxového posunu pozadí */

}
/* Pozadí hera: fotka západu slunce nad Prahou z plakátu. Pod ní fialová,
   která se ukáže, než se obrázek načte. Gradient už tu není — barvu teď
   nese sama fotka. */
.hero-bg{
  position:absolute;inset:0;z-index:-2;overflow:hidden;container-type:size;
  background:var(--night-900);
}
.hero-bg img{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
}
/* jemné zrno, ať plocha nevypadá jako plochý tisk */
.hero-bg::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--grain);background-size:240px 240px;
  opacity:.05;mix-blend-mode:overlay;
}
/* video na pozadí hera — iframe drží 16:9 a přetéká přes okraje (efekt „cover").
   Je neviditelné, dokud opravdu nehraje (třídu .video-on nasadí main.js). */
#hero-video{
  position:absolute;top:50%;left:50%;z-index:0;
  width:max(100vw,177.78vh);height:max(100vh,56.25vw);
  width:max(100cqw,calc(100cqh*16/9));
  height:max(100cqh,calc(100cqw*9/16));
  transform:translate(-50%,-50%);
  border:0;pointer-events:none;
  opacity:0;
}
.hero.video-on #hero-video{opacity:1;transition:opacity .9s ease}

/* Závoj přes pozadí. Fotka má barvy sama, takže tu NENÍ duotone jako dřív —
   jen ztmavení nahoře a dole, aby byl čitelný znak a spodní lišta, a lehké
   zafialovění ve středu, aby fotka nepřebila logo. */
.hero-veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(13,0,24,.74) 0%,rgba(13,0,24,.26) 24%,rgba(13,0,24,.1) 50%,rgba(13,0,24,.52) 86%,rgba(13,0,24,.82) 100%),
    radial-gradient(70% 48% at 50% 36%, rgba(36,0,64,.42) 0%, rgba(36,0,64,0) 70%);
}

/* --- hráči vystupující zpoza spodní lišty ---
   Sedí uvnitř .hero-inner, jehož spodní hrana je přesně horní hrana lišty.
   Záporný `bottom` je nechá kousek zajet pod ni; lišta má z-index 4, takže
   je zespodu ořízne. Kotvit je ke spodku celého hera nešlo — na telefonu je
   vysoká lišta (přes 250 px) spolkla celé.
   Výška je v procentech .hero-inner, takže poměr sedí na mobilu i monitoru. */
.hero-players{
  position:absolute;left:0;right:0;
  bottom:calc(-1 * clamp(18px,3.4vh,44px));
  z-index:1;height:100%;pointer-events:none;
  -webkit-user-select:none;user-select:none;
}
.hero-players img{
  position:absolute;bottom:0;
  width:auto;height:min(76%,600px);
  object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.42));
}
.hp-l{left:0}
.hp-r{right:0}

/* Střední šířky (notebook na půl obrazovky): hráči by se ve středu potkali
   rameny. Kousek je proto vysunu za okraj, ať střed zůstane volný. */
@media(max-width:1100px){
  .hp-l{left:-2%}
  .hp-r{right:-2%}
}
@media(max-width:900px){
  .hero-players img{height:min(66%,470px)}
  .hp-l{left:-4%}
  .hp-r{right:-4%}
}
/* Telefon: hero je na výšku a svisle se tam znak, dvojice, hráči i lišta
   (ta je na mobilu přes 250 px vysoká) prostě nevejdou. Pilulky s dvojicemi
   proto na úzkém displeji mizí — kdo s kým hraje, řeknou dresy hráčů i běžící
   páska hned pod herem.
   Hráči MUSÍ kouskem zajet pod lištu: fotka je oříznutá v půlce trupu a lišta
   ten ostrý řez zakryje. */
@media(max-width:700px){
  .hero-players{bottom:calc(-1 * clamp(4px,0.8vh,12px))}
  /* Fotky jsou od IV. ročníku na VÝŠKU (poměr ~0,72), dřív byly na šířku.
     Při stejné výšce jsou tedy skoro o polovinu užší — velký zátah za okraj,
     který dřív jen uvolňoval střed, z nich na telefonu udělal proužky.
     Teď sahají skoro k okraji a jsou vyšší. */
  .hero-players img{height:min(46%,300px)}
  .hp-l{left:-6%}
  .hp-r{right:-6%}
}
@media(max-width:480px){
  .hero-players img{height:min(44%,265px)}
  .hp-l{left:-5%}
  .hp-r{right:-5%}
}
@media(max-width:380px){
  .hero-players img{height:min(42%,240px)}
  .hp-l{left:-4%}
  .hp-r{right:-4%}
}

/* plocha nad spodním pruhem — v ní jsou všechny vrstvy plakátu absolutně */
.hero-inner{position:relative;flex:1;min-height:0}

/* --- obří wordmark: přetéká přes horní okraj, ořezává ho lišta --- */
/* --- horní blok hera: razítko + znak akce ---
   V derby to byly dva samostatně absolutně umístěné prvky nad sebou a na
   úzkém displeji razítko zajíždělo do věží štítu. Teď je to jeden sloupec
   v normálním toku, takže se překrýt nemůžou při žádné šířce. */
/* Sloupec je OHRANIČENÝ shora i zdola, takže nikdy nepřeteče do spodní lišty.
   Razítko, datum a pilulky mají pevnou velikost; veškeré stlačení pohltí
   znak, který se zmenší. Dřív měl znak velikost jen podle ŠÍŘKY okna — na
   širokém a nízkém okně (třeba notebook 1600×833) proto vyrostl a vytlačil
   pilulky s dvojicemi pod lištu, která je ořízla. */
.hero-top{
  position:absolute;left:0;right:0;
  top:calc(var(--tb-h,58px) + clamp(12px,2.4vh,26px));
  bottom:clamp(10px,1.8vh,22px);
  z-index:3;display:flex;flex-direction:column;align-items:center;
  justify-content:center;
  gap:clamp(12px,2.4vh,28px);
  padding:0 16px;pointer-events:none;
  min-height:0;
}
.hero-stamp,.hero-when,.hero-duels{flex:none}
/* znak je jediný prvek, který se smí zmenšit — proto flex:1 1 auto */
.hero-mark{
  flex:1 1 auto;min-height:0;width:100%;
  display:flex;align-items:center;justify-content:center;
  margin:0;line-height:0;
  -webkit-user-select:none;user-select:none;
}
.hero-mark img{
  /* max-height drží znak uvnitř sloupce, max-width mu dává horní strop;
     obrázek si sám dopočítá menší z obou a zachová poměr stran */
  max-height:100%;
  max-width:min(80vw, clamp(190px,26vw,440px));
  width:auto;height:auto;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.5));
}

/* --- telefon: nižší znak, vyšší hero ---
   Hero je na výšku o kus delší než obrazovka, aby se pod znak vešli všichni
   čtyři hráči (na 100svh se vejdou jen dva a krajní zůstanou za okrajem).
   Razítko se znakem se přitom NEKOTVÍ k horní hraně, ale vycentruje se do
   pásu nad hráči — jinak by mezi znakem a hráči zůstala prázdná díra. */
@media(max-width:700px){
  .hero{min-height:108svh}
  .hero-mark img{max-width:clamp(170px,52vw,280px)}
  .hero-top{
    top:calc(var(--tb-h,58px) + 10px);
    bottom:34%;
    justify-content:center;
    gap:clamp(14px,2.6vh,24px);
  }
  /* Tady se znak NESMÍ nafukovat (flex:1 by sloupec roztáhl přes celý pás
     a razítko by zůstalo nalepené pod lištou — centrování by nemělo co dělat).
     S flex:0 1 auto je sloupec vysoký jako jeho obsah, takže se celá trojice
     razítko–znak–datum vycentruje do volného pásu nad hráče. Zmenšit se znak
     pořád umí (shrink 1), takže se na nízkém displeji nic neuřízne. */
  .hero-mark{flex:0 1 auto}
}
@media(max-width:480px){
  .hero{min-height:112svh}
  .hero-mark img{max-width:clamp(155px,56vw,250px)}
  .hero-top{bottom:32%}
}

/* --- datum pod znakem (jen telefon) ---
   Na desktopu nese datum spodní lišta; na telefonu je lišta vysoká a datum
   se v ní ztrácelo nad tlačítky, tak stojí rovnou pod znakem. Vždy je vidět
   jen jedna z obou verzí (ta druhá má display:none), takže se text nikde
   nečte dvakrát. */
.hero-when{display:none;margin:0;text-align:center}
.hero-when b{
  display:block;font-family:var(--disp);font-weight:400;
  font-size:clamp(22px,6.4vw,30px);line-height:1.12;letter-spacing:.03em;
  text-transform:uppercase;color:#fff;
  text-shadow:0 4px 18px rgba(13,0,24,.75);
}
.hero-when span{
  display:block;margin-top:4px;
  font-family:var(--disp);font-weight:400;
  font-size:clamp(17px,4.8vw,22px);letter-spacing:.03em;
  text-transform:uppercase;color:var(--brand-hot);
  text-shadow:0 3px 14px rgba(13,0,24,.7);
}
@media(max-width:700px){
  .hero-when{display:block}
  .hero-bar .hb-when{display:none}
}

/* --- razítko ročníku --- */
.hero-stamp{
  flex:none;display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  margin:0;
  font-family:var(--mono);font-weight:700;
  font-size:clamp(9.5px,1.25vw,13px);letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper);border:2px solid rgba(239,242,247,.85);
  padding:7px 14px 7px 7px;
  background:rgba(6,13,28,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.hero-stamp b{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(12px,1.55vw,16px);letter-spacing:.05em;
  color:var(--night-900);background:var(--paper);
  padding:5px 10px;
}
/* na nejužších displejích se popisek za razítkem už nevejde vedle */
@media(max-width:400px){
  .hero-stamp{font-size:8.5px;gap:8px;padding:6px 10px 6px 6px}
}

/* --- dva zápasy večera (v derby tu byli vyříznutí hráči) ---
   Bitva má čtyři univerzity ve dvou utkáních, takže hero musí říct i to,
   KDO s kým hraje. Loga jsou kolečka, mezi nimi křížek. */
/* Dvojice visí pod znakem, ne u spodní hrany — dole jsou teď hráči a pilulky
   by jim seděly na hlavách. Jsou proto součástí sloupce .hero-top. */
.hero-duels{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,4vw,56px);flex-wrap:wrap;
  width:min(96%,1000px);
  pointer-events:auto;
}
/* Na telefonu se svisle nevejdou znak, dvojice, hráči i lišta zároveň.
   Pilulky proto pod 620 px mizí — kdo s kým hraje, řeknou dresy hráčů
   a běžící páska hned pod herem. (Musí stát AŽ ZA základním pravidlem,
   jinak ho display:flex přebije — stejná specificita, rozhoduje pořadí.) */
@media(max-width:620px){
  .hero-duels{display:none}
}
.duel{
  display:flex;align-items:center;gap:clamp(9px,1.5vw,18px);
  padding:clamp(8px,1.2vw,14px) clamp(12px,2vw,22px);
  background:rgba(6,13,28,.52);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.duel img{
  width:clamp(42px,6vw,74px);height:auto;border-radius:50%;
  /* VŠE má bílý znak — bez obrysu by na světlém místě pozadí zmizel */
  box-shadow:0 0 0 2px rgba(255,255,255,.22), 0 10px 22px rgba(0,0,0,.4);
}
.duel .x{
  font-family:var(--disp);font-weight:400;font-style:normal;
  font-size:clamp(15px,2vw,24px);color:var(--brand);
}

/* --- spodní tmavý pruh: datum · odpočet · CTA --- */
.hero-bar{
  position:relative;z-index:4;
  background:var(--night-900);
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12px,2.4vw,36px);
  /* spodní rezerva 30px: nakloněná páska pod herem má margin -26px a jinak
     by přejela ČSOB poznámku */
  padding:clamp(13px,1.7vw,20px) clamp(16px,3vw,44px) calc(clamp(13px,1.7vw,20px) + 30px);
}
.hb-when{
  flex:none;
  font-family:var(--disp);font-weight:400;letter-spacing:.03em;text-transform:uppercase;
  line-height:1.2;
}
/* datum je v liště to hlavní sdělení — dřív bylo menší než tlačítko vedle
   a na mobilu se v Tungstenu skoro nedalo přečíst */
.hb-when b{display:block;font-weight:400;font-size:clamp(21px,2.5vw,32px);color:#fff}
.hb-when span{display:block;font-size:clamp(17px,2vw,25px);color:#ebe2f0;margin-top:5px}

.countdown{display:flex;align-items:center;gap:clamp(6px,1vw,14px);margin:0}
.cdlbl{
  flex:none;background:var(--brand);color:#fff;
  font-family:var(--mono);font-weight:700;font-size:clamp(9px,1vw,11px);
  letter-spacing:.16em;text-transform:uppercase;padding:6px 10px;
}
.cd{position:relative;text-align:center;padding:0 clamp(5px,.9vw,13px)}
.cd + .cd::before{
  content:"";position:absolute;left:0;top:10%;bottom:26%;
  width:1px;background:rgba(255,255,255,.24);
}
.cd b{
  display:block;font-family:var(--disp);font-weight:400;
  font-size:clamp(1.35rem,3.1vw,2.7rem);line-height:1;color:#fff;
}
.cd small{
  display:block;margin-top:3px;
  font-family:var(--mono);font-weight:700;font-size:clamp(8px,.85vw,10px);
  letter-spacing:.16em;text-transform:uppercase;color:#9d8bab;
}
.date-tba{
  display:none;margin:0;
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:#f8dcc8;background:rgba(255,122,47,.16);
  border:1px dashed rgba(255,148,66,.55);
  padding:11px 20px;width:max-content;max-width:100%;
}

/* Claim „DNES NEJLEVNĚJI" — místo vypnutého odpočtu vlny (oranžový box, velké bílé písmo) */
.hb-claim{
  margin:0;flex:0 1 auto;
  background:var(--brand);color:#fff;
  font-family:var(--disp);font-weight:400;letter-spacing:.055em;line-height:1.02;
  font-size:clamp(21px,3.05vw,40px);text-transform:uppercase;text-align:center;
  /* Tungsten je úzký kondenzovaný grotesk — záporné prostrkání ze šablony
     (kalibrované na široký Muller Black) mu slévalo verzálky do sebe.
     Odsazení zprava vyrovnává mezeru, kterou letter-spacing přidá za poslední písmeno. */
  text-indent:.055em;
  padding:clamp(9px,1.3vw,15px) clamp(15px,2.1vw,28px);
}

/* Pravý blok v úvodní liště má působit jako JEDEN celek: tlačítko a poznámka
   o ČSOB jsou stejně široké a zarovnané, logo ČSOB je menší než tlačítko,
   aby mu vizuálně nepřebíralo hlavní slovo (připomínka Ševči). */
.hb-cta{flex:none;display:flex;flex-direction:column;align-items:stretch;gap:10px}
.hb-cta .btn{width:100%;justify-content:center}
/* hlavní CTA v úvodu je fialové a o stupeň větší než ostatní tlačítka —
   je to jediná akce, kterou od návštěvníka v úvodu chceme */
.btn-hero{
  background:var(--accent);color:#fff;
  padding:18px 30px;font-size:clamp(13.5px,1.5vw,17px);letter-spacing:.06em;
  box-shadow:0 18px 40px -16px rgba(255,60,156,.95);
}
.btn-hero:hover{background:var(--accent-hot);transform:translateY(-2px)}
.btn-hero .prc{color:#e9d8ff}
.btn-paper{background:var(--paper);color:var(--ink);padding:15px 24px;font-size:clamp(12.5px,1.35vw,15px)}
.btn-paper:hover{background:#fff;transform:translateY(-2px)}
.prc{color:var(--brand);margin-left:-2px}
.hero-note{
  margin:0;display:flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--mono);font-weight:700;
  font-size:clamp(11px,1.05vw,12.5px);letter-spacing:.08em;text-transform:uppercase;
  color:#ebe2f0;
}

/* pruh se na užších displejích rozpadá na řádky */
@media(max-width:1000px){
  .hero-bar{flex-wrap:wrap;justify-content:center;text-align:center}
  .hb-when{width:100%;text-align:center}
  .hb-cta{align-items:center}
  .hero-note{justify-content:center}
}
@media(max-width:560px){
  .hero-bar{gap:12px;padding:14px 14px 44px}
  /* štítek nesmí zmizet — bez něj by odpočet vypadal, že běží k datu zápasu
     uvedenému hned nad ním; na mobilu jde nad čísla jako samostatný řádek */
  .cdlbl{
    width:100%;text-align:center;order:-1;margin-bottom:2px;
    background:transparent;color:var(--brand-hot);padding:0;
  }
  .countdown{width:100%;justify-content:center;flex-wrap:wrap}
  .hb-cta{width:100%}
  .hb-claim{width:100%;font-size:clamp(26px,7.6vw,36px);padding:12px 16px}
  .btn-paper{width:100%;justify-content:center}
  /* poznámka se na 375 px musí vejít na jeden řádek, jinak se láme uprostřed fráze */
  .hero-note{font-size:10px;letter-spacing:.03em;gap:6px}
  .hero-note .cb{height:22px}
  .hero-note .csob-hl{padding:2px 4px}
}

/* =====================================================================
   ORANŽOVÁ PÁSKA (marquee)
   ===================================================================== */
.tape{
  position:relative;z-index:5;
  background:var(--night-900);color:#fff;
  transform:rotate(-1.4deg) scale(1.02);
  margin:-26px 0;
  box-shadow:0 18px 44px -22px rgba(0,0,0,.55);
  overflow:hidden;
}
.tape-track{
  display:flex;white-space:nowrap;width:max-content;
  animation:tape 26s linear infinite;
  padding:13px 0;
}
.tape span{
  font-family:var(--disp);font-size:15px;letter-spacing:.12em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:26px;padding-right:26px;
}
.tape .x{font-family:var(--mono);font-weight:700;opacity:.75}
@keyframes tape{to{transform:translateX(-50%)}}

/* =====================================================================
   PROČ PŘIJÍT
   ===================================================================== */
.reasons{display:grid;gap:16px;grid-template-columns:1fr}
/* Karty mají reálné fotky z derby, ne ikony — každá fotka odpovídá tomu,
   co karta popisuje (připomínka Ševči k obsahu obrázků). */
.rcard{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.rcard:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(21,26,35,.35)}
.rphoto{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--night-800)}
.rphoto img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.rcard:hover .rphoto img{transform:scale(1.045)}
.rphoto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,12,10,.04) 55%,rgba(15,12,10,.32));
}
.rbody{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
/* Tungsten je úzký — při velikostech nastavených na Muller čte o stupeň míň,
   proto jsou nadpisy i texty po celém webu větší než v šabloně. */
.rcard h3{font-family:var(--disp);font-weight:400;font-size:clamp(21px,2.4vw,26px);text-transform:uppercase;line-height:1.14;letter-spacing:.02em}
.rcard p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.rcard p b{color:var(--ink)}
@media(min-width:640px){.reasons{grid-template-columns:repeat(2,1fr)}}
/* Michal chtěl karty 2 a 2 pod sebou, ne v jedné řadě po čtyřech —
   s fotkami tak zůstanou dost velké i na širokém displeji. */

/* hlavička ceníku: vlevo velké číslo vlny, vpravo dokdy platí + odpočet */
.tk-top{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:14px 20px;padding-bottom:16px;margin-bottom:2px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.tk-wave b{
  display:block;font-family:var(--disp);font-weight:400;
  font-size:clamp(28px,3.6vw,40px);line-height:1.1;
  text-transform:uppercase;color:var(--brand);
}
.tk-live{
  display:inline-flex;align-items:center;gap:8px;margin-top:9px;
  font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#c6b6d1;
}
.tk-live .dot{
  width:8px;height:8px;border-radius:50%;background:var(--brand-hot);flex:none;
  animation:fab-ping 1.9s ease-out infinite;
}
.tk-when{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
/* Odpočet u ceníku je záměrně velký — je to hlavní důvod, proč kupovat
   dneska a ne příště. Všechny čtyři boxy jsou plnou kampaňovou oranžovou
   s bílými čísly; mezera mezi nimi je jediné, co je dělí, takže to působí
   jako jeden blok (Michal chtěl dny a hodiny stejně výrazné jako sekundy).
   Že odpočet běží, prozradí samo tikající číslo v posledním boxu. */
.tk-cd{display:flex;gap:6px}
.tk-cd span{
  min-width:clamp(62px,8vw,86px);padding:11px 10px 9px;text-align:center;
  background:var(--brand);
}
.tk-cd b{
  display:block;font-family:var(--disp);font-weight:400;
  font-size:clamp(30px,4vw,44px);line-height:.95;letter-spacing:.02em;
  color:#fff;font-variant-numeric:tabular-nums;
}
.tk-cd small{
  display:block;margin-top:5px;
  font-family:var(--mono);font-weight:700;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;
}

/* Na nejužších telefonech se čtyři boxy o pevné minimální šířce do ceníku
   nevešly (4×62 + 3×6 = 266 px do 232 px vnitřku) — tady se dělí rovným
   dílem a zmenší se i písmo, aby se vešly i trojciferné dny. */
@media(max-width:699px){
  /* pod 700 px je odpočet přes celou šířku ceníku, ať jsou boxy co největší */
  .tk-when,.tk-cd{width:100%}
  .tk-cd span{min-width:0;flex:1}
}
/* až na opravdu úzkých telefonech se čísla zmenší, jinak by se trojciferné
   dny ořízly (na 375 px se ještě vejdou v plné velikosti) */
@media(max-width:340px){
  .tk-cd{gap:4px}
  .tk-cd span{padding:9px 3px 8px}
  .tk-cd b{font-size:25px}
  .tk-cd small{font-size:8px;letter-spacing:.08em}
}

/* Popisek nad odpočtem: datum tam schválně není, ať je vidět jen to, na čem
   záleží — kolik zbývá. Proto je velký, ať se čte společně s čísly. */
.tk-ends{
  margin:0;font-family:var(--disp);font-weight:400;
  font-size:clamp(24px,3.4vw,40px);letter-spacing:.02em;line-height:1.05;
  text-transform:uppercase;color:#fff;
}
@media(min-width:700px){.tk-ends{text-align:right}}
@media(min-width:700px){.tk-when{align-items:flex-end}}

/* co přijde po aktuální vlně — ať je vidět, že dnešní cena není trvalá */
.tk-plan{
  list-style:none;margin:16px 0 0;padding:0;
  display:grid;gap:8px;grid-template-columns:1fr;
}
@media(min-width:620px){.tk-plan{grid-template-columns:repeat(2,1fr)}}
.tk-plan li{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
  padding:10px 14px;background:rgba(255,255,255,.045);
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#8a7a97;
}
.tk-plan b{color:#c6b6d1}
.tk-plan i{margin-left:auto;font-style:normal;color:#ebe2f0;white-space:nowrap}

/* =====================================================================
   CENÍK — jeden velký obdélník, uvnitř tři vstupenky (kategorie)
   ---------------------------------------------------------------------
   Tvarosloví je opsané z tištěné vstupenky, kterou dodal Michal
   (assets/img/vstupenka.jpg): oranžové tělo se vzorem z plakátu, svislý
   nápis DERBY, perforace s výřezy po stranách a pod ní papírový útržek
   s obřím černým číslem a čárovým kódem.
   Ceny i procenta dopočítává JS podle data — viz TICKET_WAVES v main.js.
   ===================================================================== */
.tickets{
  max-width:1120px;margin:0 auto;
  background:linear-gradient(175deg,#26043c,#120022);
  border:2px solid var(--brand);border-radius:var(--r);
  padding:22px 20px 20px;
  box-shadow:0 26px 60px -28px rgba(255,122,47,.65);
}
/* Čtyři vstupenky: tři kategorie + samostatná afterparty.
   Na mobilu 2×2, ať se nemusí rolovat přes celou sekci (zadání Michala). */
/* Dvě karty (hokej + afterparty) a pod nimi VIP přes celou šířku.
   Na telefonu stojí pod sebou — dřív byly čtyři vedle sebe 2×2 a musely se
   kvůli tomu drasticky zmenšovat texty. */
.tkgrid{display:grid;gap:12px;margin-top:18px;grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.tkgrid{gap:16px}}
@media(min-width:1000px){.tkgrid{grid-template-columns:repeat(4,1fr);gap:18px}}
/* Party box není kategorie — ať se nemíchá do řady se vstupenkami, jde přes
   celou šířku stejně jako VIP karta pod ním. */
.tkc-box{grid-column:1 / -1}
.tkc-box .tkc-top{
  background:
    var(--grain) 0 0/240px 240px,
    linear-gradient(135deg,var(--accent-hot),var(--accent));
  background-blend-mode:overlay,normal;
}
.tkc-box .tkc-off{background:var(--night-800);box-shadow:0 0 0 4px var(--paper),0 10px 22px -12px rgba(0,0,0,.7)}
.tkc-box .tkc-off b{font-size:19px}

/* --- jedna vstupenka -------------------------------------------------
   --perf = výška oranžové hlavy, tedy i pozice perforace a výřezů.
   Musí být pevná, aby výřezy a kolečko se slevou seděly na milimetr. */
.tkc{
  --perf:100px;
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border-radius:var(--r-sm);
}
/* výřezy po stranách — barva je odstín uhlového pozadí .tickets v místě,
   kde vstupenka leží (gradient je tam prakticky plochý) */
.tkc::before,.tkc::after{
  content:"";position:absolute;z-index:2;
  top:calc(var(--perf) - 9px);width:18px;height:18px;border-radius:50%;
  background:#280046;
}
.tkc::before{left:-9px}
.tkc::after{right:-9px}

/* oranžová hlava — podklad je plakátové pozadí kampaně přebarvené
   do oranžové, stejně jako na tištěné vstupence (obrázek je stejný
   soubor jako v heru, takže se nestahuje znovu) */
.tkc-top{
  position:relative;height:var(--perf);flex:none;overflow:hidden;
  display:flex;align-items:flex-start;
  padding:13px 16px 0;border-radius:var(--r-sm) var(--r-sm) 0 0;
  background:
    var(--grain) 0 0/240px 240px,
    linear-gradient(135deg,rgba(255,148,66,.94),rgba(210,86,12,1));
  background-blend-mode:overlay,normal;
}
.tkc-cat{
  position:relative;z-index:1;
  font-family:var(--disp);font-size:clamp(20px,2.4vw,25px);line-height:1.05;letter-spacing:.02em;
  color:#fff;text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.28);
}
/* svislý nápis DERBY u pravého okraje hlavy — dekorace jako na vstupence */
.tkc-mark{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--wordmark);font-size:calc(var(--perf) * .185);line-height:1;
  color:rgba(255,255,255,.24);pointer-events:none;user-select:none;
}

/* kolečko se slevou sedí na perforaci — hlavní vizuální důraz sekce.
   Fialová je stejná jako u tlačítka „Hadry" (--accent); na oranžové hlavě
   se odděluje líp než oranžová na oranžové. */
.tkc-off{
  position:absolute;z-index:3;left:50%;top:var(--perf);
  transform:translate(-50%,-50%);
  width:96px;height:96px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);
  box-shadow:0 0 0 5px var(--paper),0 12px 26px -12px rgba(0,0,0,.7);
}
/* „DNES" nad procentem — bez něj kolečko neříká, že ta sleva platí teď.
   Je absolutně nad středem, aby procento zůstalo přesně uprostřed kolečka
   (jinak by ho popisek stlačil pod střed). top v % → škáluje i na mobilu. */
.tkc-off i{
  position:absolute;top:14%;left:0;right:0;text-align:center;
  font-style:normal;font-family:var(--mono);font-weight:700;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.tkc-off b{
  font-family:var(--disp);font-weight:400;font-size:25px;line-height:1;
  color:#fff;white-space:nowrap;letter-spacing:.025em;
}

/* papírový útržek s cenami */
.tkc-body{
  flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:60px 16px 14px;
  border-top:2px dashed rgba(26,21,15,.24);
  border-radius:0 0 var(--r-sm) var(--r-sm);
}
.tkc-lbl{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 11px 5px;background:var(--csob);color:#fff;
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;
}
.tkc-lbl .cb{height:20px}
/* hlavní cena je v modré ČSOB, aby bylo na první pohled vidět, čí sleva to je */
.tkc-main{
  margin-top:11px;
  font-family:var(--disp);font-weight:400;font-size:clamp(38px,4.6vw,52px);
  line-height:1;letter-spacing:.015em;color:var(--csob);
}

.tkc-alt{margin:16px 0 0;width:100%;display:grid;gap:0}
.tkc-r{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:9px 2px;border-top:1px solid var(--line);
}
.tkc-r dt{
  font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);text-align:left;
}
.tkc-r dd{
  margin:0;font-family:var(--disp);font-weight:400;font-size:27px;line-height:1;letter-spacing:.015em;
  color:var(--ink-2);white-space:nowrap;
}
/* běžná cena (bez karty) oranžově — kampaňová barva proti modré ČSOB */
.tkc-r:not(.then) dd{color:var(--brand)}
/* balíček s afterparty — stejný řádek jako „potom (3. vlna)", ale fialově */
.tkc-r.bundle dt{color:var(--accent)}
/* podtitulek v popisku balíčku („+200 Kč, do 7. 11.") — menší a bez verzálek */
.tkc-r.bundle dt small{
  display:block;margin-top:2px;
  font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:0;
  text-transform:none;color:var(--ink-3);
}
.tkc-r.bundle dd,.tkc-r.bundle dd b{color:var(--accent)}
/* „potom" má být velké a čitelné, ale jen JEMNĚ přeškrtnuté — tenká
   inkoustová linka; oranžová by se teď pletla s cenou „bez slevy" */
.tkc-r.then dd s{
  color:var(--ink-3);
  text-decoration:line-through;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(26,21,15,.42);
}
/* v poslední vlně by „potom" byla táž cena jako „bez slevy" — pryč s ní */
.tkgrid.no-ref .tkc-r.then{display:none}

/* --- balíček derby + afterparty ---------------------------------------
   Hlavní cena karty zůstává ta nejnižší (samotné derby s kartou ČSOB) —
   balíček se nabízí pod ní, aby nešlo dopředu větší číslo. */
.tkc-bundle{
  width:100%;margin-top:14px;padding:10px 12px;
  display:grid;gap:3px;text-align:left;
  background:rgba(255,60,156,.1);
  box-shadow:inset 0 0 0 1.5px rgba(255,60,156,.38);
  border-radius:var(--r-sm);
}
.tkc-bundle .bl,.tkc-bundle .bt{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-family:var(--mono);font-weight:700;font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);
}
.tkc-bundle .bl b{font-family:var(--disp);font-weight:400;font-size:14px;color:var(--accent);letter-spacing:0}
.tkc-bundle .bt{margin-top:1px}
.tkc-bundle .bt b{font-family:var(--disp);font-weight:400;font-size:21px;line-height:1;color:var(--accent);letter-spacing:.02em}
.tkc-bundle .bo{
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  margin-top:2px;padding-top:6px;border-top:1px solid rgba(255,60,156,.22);
}
.tkc-bundle .bo b{font-family:var(--disp);font-weight:400;font-size:14px;color:var(--accent)}
.tkc-bundle .bo i{
  font-style:normal;font-family:var(--mono);font-weight:700;font-size:8px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}

/* samostatná afterparty — tmavá hlava, ať je jasné, že je to „ta noční část" */
.tkc-ap .tkc-top{
  background:linear-gradient(135deg,#351055,#16002a);
}
.tkc-note{
  width:100%;margin-top:14px;text-align:left;
  font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.6;
}

/* čárový kód na patě útržku; margin-top:auto srovná paty všech karet */
.tkc-code{
  width:100%;height:26px;margin-top:auto;padding-top:14px;
  background:repeating-linear-gradient(90deg,
    var(--ink) 0 2px,transparent 2px 5px,
    var(--ink) 5px 6px,transparent 6px 10px,
    var(--ink) 10px 13px,transparent 13px 15px) 0 100%/100% 26px no-repeat;
  opacity:.34;
}

/* --- VIP Gold karta v ceníku -------------------------------------------
   Široký „zlatý útržek" pod čtyřmi vstupenkami: to nejlepší z VIP Gold
   vlevo, cena (s ČSOB / bez slevy) a tlačítko vpravo. Tlačítko NEprodává —
   jen sjede na sekci Hospitality (#vip) se všemi třemi úrovněmi. */
.tkc-vip{grid-column:1 / -1}
/* nápis v hlavě VIP karty výrazně větší než u běžných kategorií */
.tkc-vip .tkc-cat{font-size:clamp(24px,3.4vw,34px)}
.tkc-vip .tkc-top{
  background:
    var(--grain) 0 0/240px 240px,
    linear-gradient(135deg,rgba(201,153,47,.96),rgba(122,86,14,1));
  background-blend-mode:overlay,normal;
}
.tkc-vip .tkc-body{padding-top:22px}
.tkv-grid{
  width:100%;display:grid;grid-template-columns:1.1fr .9fr;
  gap:14px clamp(18px,3vw,44px);align-items:center;text-align:left;
}
.tkv-list{margin:0;padding:0;list-style:none}
.tkv-list li{
  position:relative;padding:8px 0 8px 27px;
  font-weight:700;font-size:clamp(13px,1.5vw,15.5px);line-height:1.4;color:var(--ink);
  border-top:1px solid var(--line);
}
.tkv-list li:first-child{border-top:0}
.tkv-list li::before{
  content:"★";position:absolute;left:2px;top:8px;
  font-size:12px;line-height:1.6;color:#b8891f;
}
.tkv-buy{display:flex;flex-direction:column;align-items:center;text-align:center}
.tkv-buy .tkc-alt{max-width:230px}
/* VIP ani Party box se se slevou ČSOB neprodávají, takže jejich cena
   nesmí být modrá —
   modrá na tomhle webu znamená „s kartou ČSOB". */
.tkc-vip .tkc-main,
.tkc-box .tkc-main{color:var(--ink)}
.tkv-per{
  display:block;margin-top:5px;
  font-family:var(--mono);font-weight:700;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
/* „Pouze 200 vstupenek!" — urgentní štítek na VIP kartě v ceníku (světlý papír) */
.tkv-limit{
  margin:12px 0 0;
  font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand-deep);
}
.tkv-btn{
  width:100%;max-width:230px;margin-top:14px;padding:15px 20px;font-size:14px;
  background:linear-gradient(135deg,#f0cd74,#c9992f);color:#3a2a06;
  box-shadow:0 14px 30px -16px rgba(184,137,31,.8);
}
.tkv-btn:hover{background:linear-gradient(135deg,#f5d88b,#d8a83c);transform:translateY(-2px)}
.tkv-btn:focus-visible{outline:3px solid var(--brand-hot);outline-offset:2px}
@media(max-width:700px){
  .tkv-grid{grid-template-columns:1fr;gap:12px}
  .tkv-buy{width:100%}
}

.tk-cta{display:grid;gap:10px;margin-top:22px}
.tk-cta .btn{width:100%;padding:16px 18px;font-size:clamp(12.5px,1.5vw,15px);white-space:normal}
@media(min-width:560px){.tk-cta{grid-template-columns:repeat(2,1fr)}}
.btn-csob{background:var(--csob);color:#fff;box-shadow:0 14px 34px -18px rgba(0,153,204,.9)}
.btn-csob:hover{background:#00a7e0;transform:translateY(-2px)}
.btn-csob .cb{height:24px}

/* odkazy do obchodů s aplikací Unilife pod tlačítky */
/* Upozornění, že se afterparty v prvních vlnách kupuje jen jako přídavek
   v košíku — zvlášť zatím není kam odkázat, tak ať to lidi vědí dřív,
   než začnou hledat tlačítko, které neexistuje. */
.tk-after{
  margin:14px 0 0;text-align:center;
  font-size:13.5px;line-height:1.6;color:#b9a9c6;
}
.tk-after b{color:#fff;font-weight:800}

.tk-apps{
  margin:12px 0 0;text-align:center;
  font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#8a7a97;line-height:1.7;
}
.tk-apps a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.tk-apps a:hover{color:var(--brand-hot)}

@media(max-width:999px){
  .tkc{--perf:80px}
  .tkc-off{width:76px;height:76px}
  .tkc-off b{font-size:20px}
  .tkc-body{padding:48px 14px 12px}
}
/* Pod 620 px stojí čtyři kategorie ve dvou sloupcích a karty jsou úzké.
   Řeší se to hlavně ZALOMENÍM — popisek jde nad číslo, takže se nemusí
   lámat uprostřed („BEZ / SLEVY", „POTOM / (4. / VLNA)"). Velikosti písma
   zůstávají čitelné, nezmenšují se na 7 px jako v šabloně. */
@media(max-width:619px){
  /* hlava musí být vyšší než poloměr kolečka, jinak kolečko přejede název
     kategorie (kolečko sedí na perforaci, tedy na spodní hraně hlavy) */
  .tkc{--perf:66px}
  .tkc-top{padding:9px 10px 0;align-items:flex-start}
  .tkc-cat{font-size:15px;line-height:1.1}
  .tkc-mark{display:none}
  .tkc-off{width:60px;height:60px;box-shadow:0 0 0 4px var(--paper),0 8px 18px -10px rgba(0,0,0,.7)}
  .tkc-off i{font-size:7px;letter-spacing:.1em}
  .tkc-off b{font-size:14px}
  .tkc-body{padding:32px 10px 10px}
  /* popisek a číslo vedle sebe se do 119 px nevejdou — pod sebe */
  .tkc-bundle .bl,.tkc-bundle .bt{flex-direction:column;align-items:flex-start;gap:1px}
  .tkc-lbl{padding:5px 8px 4px;font-size:9.5px;letter-spacing:.06em;gap:0}
  .tkc-lbl .cb{display:none}
  .tkc-main{margin-top:8px;font-size:27px}
  .tkc-alt{margin-top:11px}
  .tkc-r{padding:8px 0;flex-direction:column;align-items:flex-start;gap:3px}
  .tkc-r dt{font-size:10px;letter-spacing:.06em;line-height:1.35}
  /* „Potom (4. vlna)" se do dvou sloupců nevejde a lámalo se na tři řádky;
     v přehledu vln pod ceníkem je ta informace stejně znovu */
  .tkc-r.then{display:none}
  .tkc-r dd{font-size:20px}
  .tkc-bundle{margin-top:10px;padding:8px;gap:2px}
  .tkc-bundle .bl,.tkc-bundle .bt{font-size:9.5px;letter-spacing:.05em}
  .tkc-bundle .bl b{font-size:14px}
  .tkc-bundle .bt b{font-size:19px}
  .tkc-bundle .bo{gap:4px;padding-top:5px}
  .tkc-bundle .bo b{font-size:14px}
  .tkc-bundle .bo i{display:none}
  .tkc-note{margin-top:10px;font-size:9.5px;letter-spacing:.05em}
  .tkc-code{height:16px;padding-top:10px;background-size:100% 16px}
}

/* pásek slevy ČSOB v hlavičce ceníku vlny */
.csob-strip{
  display:flex;align-items:center;gap:9px;
  margin-top:14px;padding:7px 10px;
  background:var(--csob);color:#fff;
  font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;
}
/* logo ČSOB — jednobarevné bílé, na modrém i uhlovém podkladu.
   Je to stohovaný lockup (plavec + nápis), pod ~26 px je nápis nečitelný;
   aspect-ratio drží proporce i ve flex kontextech. */
.cb{
  flex:none;width:auto;height:28px;aspect-ratio:100/79;
  vertical-align:-.4em;object-fit:contain;
}
.csob-bar .cb{height:34px}
.hero-note .cb{height:18px}
.tickets-note .cb{display:inline-block;height:26px;margin-right:9px}

/* zvýraznění po kliknutí na „Mám kartu" ve spodní liště */
html.csob-yes .tkc-lbl{box-shadow:0 0 0 3px rgba(0,153,204,.35)}
/* „Mám kartu": cena bez slevy ztratí oranžový akcent a zešedne — pořád je
   ale čitelná (3,4:1). Ztlumit ji přes opacity nešlo: oranžová má na papíru
   jen 3,26:1, takže jakékoli vyblednutí ji shodí pod hranici čitelnosti. */
html.csob-yes .tkc-r:not(.then) dd{color:var(--ink-3)}
.wbtn{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:800 13.5px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;
  padding:14px 12px;border-radius:0;border:0;cursor:pointer;
  transition:transform .15s,background .15s;
}
.wbtn:focus-visible{outline:3px solid var(--brand-hot);outline-offset:2px}

.tickets-note{
  margin:22px auto 0;max-width:780px;
  text-align:center;font-size:13px;line-height:1.6;color:#9d8bab;
}
.tickets-note a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* =====================================================================
   MERCH — produktové karty s proklikem na e-shop
   ===================================================================== */
.shop{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.shop{grid-template-columns:repeat(4,1fr)}}

.prod{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;color:inherit;
  transition:transform .2s ease,box-shadow .2s ease;
}
.prod:hover{transform:translateY(-4px);box-shadow:0 24px 48px -26px rgba(21,26,35,.4)}
.prod:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

.pimg{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.pimg img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.prod:hover .pimg img{transform:scale(1.04)}
/* štítek školy v barvě týmu */
.pimg .ptag{
  position:absolute;top:10px;left:10px;z-index:1;
  font-family:var(--mono);font-weight:700;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;padding:5px 9px;border-radius:0;
}
.pimg .ptag.uk{background:var(--uk)}
.pimg .ptag.cvut{background:var(--cvut)}

.pbody{display:flex;flex-direction:column;gap:6px;padding:14px 14px 16px;flex:1}
.prod h3{
  font-family:var(--disp);font-weight:400;font-size:17px;
  text-transform:uppercase;line-height:1.15;
}
.prod p{font-size:12.5px;color:var(--ink-2);line-height:1.45;flex:1}
.pprice{
  font-family:var(--disp);font-size:22px;line-height:1;color:var(--brand-deep);
  margin-top:2px;
}
.shop-more{margin-top:clamp(20px,2.6vw,28px);text-align:center}

/* =====================================================================
   VIP / DERBY HOSPITALITY
   ===================================================================== */
.vip-note{
  margin:0 auto clamp(24px,3vw,34px);max-width:660px;text-align:center;
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);line-height:1.7;
  border-top:2px dashed var(--line);border-bottom:2px dashed var(--line);
  padding:13px 0;
}
.vips{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:880px){.vips{grid-template-columns:repeat(3,1fr)}}
/* jedna úroveň VIP -> karta se nerozlije přes celou šířku, ale stojí na středu */
.vips-one{max-width:520px;margin-inline:auto}
@media(min-width:880px){.vips-one{grid-template-columns:1fr}}

.vip{
  position:relative;overflow:hidden;
  background:var(--night-900);color:#fff;
  border-radius:var(--r);
  padding:26px 22px 22px;
  display:flex;flex-direction:column;
}
/* barevný pruh úrovně — jediné místo, kde se zlatá/stříbrná/bronzová používá */
.vip::before{content:"";position:absolute;left:0;right:0;top:0;height:5px}
.vip.gold::before{background:linear-gradient(90deg,#f0cd74,#b8891f)}
.vip.silver::before{background:linear-gradient(90deg,#e4e8ed,#93999f)}
.vip.bronze::before{background:linear-gradient(90deg,#dda067,#9c5f30)}
.vip.gold{box-shadow:0 26px 60px -30px rgba(184,137,31,.7)}

.vtag{font-family:var(--disp);font-size:21px;text-transform:uppercase;letter-spacing:.03em;line-height:1.12}
.vip.gold .vtag{color:#f0cd74}
.vip.silver .vtag{color:#e4e8ed}
.vip.bronze .vtag{color:#dda067}
.vlead{margin-top:10px;font-size:13.5px;line-height:1.5;color:#c6b6d1}
/* cena: modrá s kartou ČSOB je hlavní, běžná za ní tlumeně a přeškrtnutě */
.vprice{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
  margin:14px 0 0;font-family:var(--disp);line-height:1;
}
/* „Pouze 200 vstupenek!" — urgentní štítek na kartě Bronze (tmavý podklad) */
.vlimit{
  margin:10px 0 0;
  font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand-hot);
}
.vprice .csob{
  font-weight:400;font-size:clamp(28px,3.2vw,36px);
  background:var(--csob);color:#fff;padding:5px 9px 4px;
}
.vprice .csob small{font-size:.42em;color:rgba(255,255,255,.85)}
/* VIP má jedinou cenu — sleva ČSOB platí jen na základní vstupenky.
   Proto velké bílé číslo bez modrého rámečku a bez škrtání. */
.vprice .solo{
  font-weight:400;font-size:clamp(36px,4.4vw,50px);color:#fff;letter-spacing:.01em;
}
.vprice .solo small{font-size:.42em;color:rgba(255,255,255,.7)}
.vprice .std{
  font-weight:400;font-size:clamp(17px,1.9vw,21px);color:#9d8bab;
  text-decoration:line-through;text-decoration-color:var(--brand);text-decoration-thickness:2px;
}
.vprice .std small{font-size:.6em}
/* „za osobu" je na vlastním řádku — bez odsazení se lepilo těsně pod cenu
   a působilo to jako špatné zalomení (připomínka Ševči) */
.vprice .per{
  width:100%;margin-top:9px;
  font-family:var(--mono);font-weight:700;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:#9d8bab;
}
.vip .csob-strip{margin-top:14px}

.vlist{margin:18px 0 20px;display:grid;gap:9px;flex:1}
.vlist li{position:relative;padding-left:25px;font-size:15px;line-height:1.55;color:#ebe2f0}
.vlist li::before{
  content:"✓";position:absolute;left:0;top:-1px;
  font-family:var(--mono);font-weight:700;font-size:13px;color:#43d17e;
}
.vlist li.pay{color:#9d8bab}
.vlist li.pay::before{content:"+";color:var(--brand-hot)}
.vlist li i{
  font-style:normal;font-family:var(--mono);font-weight:700;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:#8a7a97;white-space:nowrap;
}

.vip .wbtn{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.vip .wbtn:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.vip.gold .wbtn{background:var(--brand);color:#fff;box-shadow:none}
.vip.gold .wbtn:hover{background:var(--brand-hot)}
/* VIP: dvojice tlačítek — se slevou (ČSOB → návod) + bez slevy (ghost → Enigoo) */
.vip-act{display:grid;gap:9px;margin-top:2px}
.vip .wbtn.csob{background:var(--csob);color:#fff;box-shadow:none}
.vip .wbtn.csob:hover{background:#00a7e0;transform:translateY(-2px)}
.vip .wbtn.csob .cb{height:22px}
.vip .wbtn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.30)}
.vip .wbtn.ghost:hover{background:rgba(255,255,255,.10);transform:translateY(-2px)}

.vip-firms{margin-top:clamp(20px,2.6vw,28px);text-align:center;font-size:13.5px;color:var(--ink-2)}
.vip-firms a{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* štítek školy přes fotku produktu v merch sekci
   (zbytek stylů zrušené sekce „Víc než jen hokej" byl smazán) */
.ptag{
  position:absolute;top:12px;left:12px;z-index:1;
  font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(15,12,10,.72);color:#fff;padding:6px 11px;border-radius:100px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}

/* =====================================================================
   HARMONOGRAM
   ===================================================================== */
.timeline{
  max-width:680px;margin:0 auto;position:relative;
  padding-left:34px;
}
.timeline::before{
  content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--brand),var(--line) 85%);
}
.tl{position:relative;padding:0 0 30px}
.tl:last-child{padding-bottom:0}
.tl::before{
  content:"";position:absolute;left:-33px;top:4px;width:16px;height:16px;border-radius:50%;
  background:var(--brand);border:4px solid var(--paper);
  box-shadow:0 0 0 1px var(--line);
}
/* body na ose mají u zápasů barvu prvního týmu, ať je poznat, že jde
   o dvě samostatná utkání, ne o jeden blok */
.tl.uk::before{background:var(--uk)}
.tl.cvut::before{background:var(--cvut)}
.tl.czu::before{background:var(--czu)}
.tl.vse::before{background:var(--vse)}
.tl .t{
  font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.14em;
  color:var(--brand-deep);text-transform:uppercase;
}
.tl.uk .t{color:#9c1233}
.tl.cvut .t{color:#004e96}
.tl.czu .t{color:#3f7a1e}
.tl.vse .t{color:#2b2b2b}
/* křížek mezi týmy v nadpisu na ose — zlatý, aby nesplýval s názvy */
.tl h4 .x{font-style:normal;color:var(--brand-deep);margin:0 .12em}
.tl h4{font-family:var(--disp);font-weight:400;font-size:22px;line-height:1.15;text-transform:uppercase;margin-top:5px;letter-spacing:.02em}
.tl p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin-top:7px;max-width:52ch}
/* na mobilu je fotka normální obrázek v kartě; na desktopu se z ní stane
   kulatý bod na ose (viz media query níž) */
.tl-photo{
  margin:12px 0 0;max-width:330px;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--line);
}
.tl-photo img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}

/* ---------------------------------------------------------------------
   „Had" na desktopu: body se střídají po obou stranách středové osy,
   takže se čtení klikatí místo rovné přímky. Na mobilu zůstává obyčejná
   svislá osa — zalomený sloupec by tam byl jen užší a hůř čitelný.
   --------------------------------------------------------------------- */
@media(min-width:900px){
  .timeline{max-width:980px;padding-left:0}
  .timeline::before{left:50%;margin-left:-1px}
  .tl{width:calc(50% - 52px);padding-bottom:34px}
  .tl:nth-child(odd){margin-right:auto;text-align:right}
  .tl:nth-child(even){margin-left:auto;text-align:left}
  .tl p{max-width:none}
  .tl:nth-child(odd) p{margin-left:auto}
  /* puntík sedí na ose, ne u levého okraje */
  .tl::before{left:auto}
  .tl:nth-child(odd)::before{right:-60px}
  .tl:nth-child(even)::before{left:-60px}
  /* spojnice od karty k ose — zaoblený loket, aby to působilo jako had */
  .tl::after{
    content:"";position:absolute;top:11px;width:40px;height:2px;
    background:rgba(26,21,15,.18);
  }
  .tl:nth-child(odd)::after{right:-52px}
  .tl:nth-child(even)::after{left:-52px}

  /* Body, ke kterým je fotka, mají místo puntíku kulatý snímek přímo na ose
     — to jsou ty „záchytné fotky" hada. Kruh je vycentrovaný na osu:
     karta končí 52 px před osou, poloměr je 44 px, tedy odsazení 96 px. */
  .tl.has-photo::before,.tl.has-photo::after{display:none}
  .tl-photo{
    position:absolute;z-index:1;top:-6px;margin:0;
    width:88px;height:88px;border-radius:50%;overflow:hidden;
    border:4px solid var(--paper);
    box-shadow:0 0 0 1px var(--line),0 16px 30px -16px rgba(0,0,0,.55);
  }
  .tl:nth-child(odd) .tl-photo{right:-96px}
  .tl:nth-child(even) .tl-photo{left:-96px}
  .tl-photo img{width:100%;height:100%;aspect-ratio:auto}
}

/* ---------------------------------------------------------------------
   AFTERPARTY — fotka nad údaji, ať je vidět, že vstupenka není jen na zápas
   --------------------------------------------------------------------- */
.ap-photo{
  margin:0 0 clamp(24px,3.4vw,36px);
  border-radius:var(--r);overflow:hidden;
  box-shadow:0 30px 60px -32px rgba(0,0,0,.9);
}
.ap-photo img{
  width:100%;height:auto;display:block;
  aspect-ratio:16/7;object-fit:cover;
}
@media(max-width:600px){.ap-photo img{aspect-ratio:4/3}}

/* =====================================================================
   AFTERPARTY — kdy/kde + lineup
   ===================================================================== */
.ap-meta{
  display:flex;flex-wrap:wrap;justify-content:center;
  /* velká svislá mezera: jakmile se položky zalomí pod sebe, popisek jedné
     jinak dosedl na štítek další a nedalo se to přečíst */
  gap:clamp(24px,4vw,34px) clamp(24px,5vw,64px);
  padding:24px 0;margin-bottom:clamp(28px,4vw,44px);
  border-top:2px dashed rgba(255,255,255,.14);
  border-bottom:2px dashed rgba(255,255,255,.14);
  text-align:center;
}
/* každá položka má vlastní sloupec s rozumnou šířkou, aby se popisek pod
   číslem lámal na dva řádky a ne přes celou sekci */
.ap-item{flex:0 1 260px;min-width:200px}
.ap-item span{
  display:block;
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-hot);margin-bottom:8px;
}
.ap-item b{
  display:block;font-family:var(--disp);font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.12;text-transform:uppercase;color:#fff;
}
.ap-item .ap-str{
  display:block;margin-top:9px;
  font-family:var(--sans);font-weight:400;font-size:14px;letter-spacing:0;
  line-height:1.5;color:#c6b6d1;
}

.ap-head{
  text-align:center;margin-bottom:16px;
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:#9d8bab;
}
.lineup{display:grid;gap:12px;grid-template-columns:1fr}
.dj{
  background:var(--night-800);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--r);
  padding:clamp(18px,2.4vw,26px) 16px;text-align:center;
  font-family:var(--disp);font-weight:400;
  font-size:clamp(1.1rem,2.6vw,1.7rem);line-height:1;
  text-transform:uppercase;letter-spacing:.02em;color:#fff;
  transition:transform .2s ease,border-color .2s ease;
}
.dj:hover{transform:translateY(-3px);border-color:rgba(255,122,47,.6)}
/* DJ s fotkou: obrázek nahoře, jméno pod ním v patičce dlaždice */
figure.dj{margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column}
figure.dj img{
  width:100%;height:auto;display:block;
  aspect-ratio:4/3;object-fit:cover;object-position:center 30%;
  transition:transform .35s ease;
}
figure.dj:hover img{transform:scale(1.05)}
figure.dj figcaption{padding:clamp(14px,1.8vw,20px) 14px}
/* Počet dlaždic se bude měnit, jak budou přibývat jména — auto-fit se
   přizpůsobí a nenechá po sobě prázdný sloupec. */
@media(min-width:640px){.lineup{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}

/* =====================================================================
   AFTERMOVIE
   ===================================================================== */
.video{
  max-width:920px;margin:0 auto;border-radius:var(--r);overflow:hidden;position:relative;
  aspect-ratio:16/9;background:var(--night-900);
  box-shadow:0 34px 70px -38px rgba(15,12,10,.75);
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-facade{
  position:absolute;inset:0;width:100%;padding:0;border:0;cursor:pointer;background:none;
}
.video-facade img{width:100%;height:100%;object-fit:cover;filter:saturate(.95)}
.video-facade::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 90% at 50% 50%,rgba(15,12,10,.06),rgba(15,12,10,.55));
  transition:background .2s;
}
.video-facade:hover::after{background:radial-gradient(90% 90% at 50% 50%,rgba(15,12,10,0),rgba(15,12,10,.45))}
.video-facade .play{
  position:absolute;inset:0;margin:auto;z-index:1;
  width:82px;height:82px;border-radius:0;
  background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 18px 44px -12px rgba(255,122,47,.8);
  transition:transform .18s ease,background .18s ease;
}
.video-facade:hover .play{transform:scale(1.08);background:var(--brand-hot)}
.video-facade:focus-visible{outline:4px solid var(--brand-hot);outline-offset:-4px}
.video-more{margin-top:22px;text-align:center;font-size:14px;color:var(--ink-2)}
.video-more a{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* =====================================================================
   FAQ
   Nahradilo sekci HISTORIE / STATISTIKY z derby — Bitva zatím nemá
   zveřejněné statistiky ročníků, zato má dvanáct otázek s odpověďmi.
   Accordion je nativní <details>/<summary>, takže funguje i bez JS
   a čtečky ho umí samy (žádné aria-expanded navíc).
   ===================================================================== */
.faq{display:grid;gap:10px;max-width:860px;margin:0 auto}
.faq-i{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.faq-i[open]{border-color:var(--brand);box-shadow:0 10px 30px -18px rgba(18,0,30,.5)}
.faq-i summary{
  display:flex;align-items:flex-start;gap:12px;
  padding:18px 48px 18px 18px;position:relative;
  cursor:pointer;list-style:none;
  font-family:var(--disp);font-weight:400;
  font-size:clamp(18px,2.1vw,23px);line-height:1.3;
  /* BEZ verzálek: otázky jsou dlouhé věty a Tungsten Black je úzký —
     v kapitálkách se slévaly do jednoho pruhu a nešly přeletět očima */
  text-transform:none;letter-spacing:.015em;color:var(--ink);
}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary:hover{color:var(--brand-deep)}
.faq-i summary:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}
.faq-n{color:var(--brand);flex:none}
/* šipka: čistě CSS, ať se nenačítá další ikonový soubor */
.faq-i summary::after{
  content:"";position:absolute;right:18px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:2.5px solid var(--ink-3);border-bottom:2.5px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .2s ease,border-color .2s ease;
}
.faq-i[open] summary::after{transform:rotate(-135deg);margin-top:-2px;border-color:var(--brand)}
.faq-a{padding:0 48px 20px 18px;font-size:16px;line-height:1.7;color:var(--ink-2)}
.faq-a a{color:var(--brand-deep);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.faq-a b{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.faq-i summary::after{transition:none}}

/* =====================================================================
   GALERIE
   ===================================================================== */
/* Zdivo (CSS columns), ne mřížka s pevným poměrem stran: mezi fotkami jsou
   snímky na výšku i na šířku a ořez do 16/10 by portrétům usekl půlku.
   Takhle si každá fotka nechá svůj formát a nikde nezůstane díra. */
.gal{columns:2;column-gap:14px}
.gtile{
  break-inside:avoid;margin:0 0 14px;
  position:relative;border-radius:var(--r-sm);overflow:hidden;
  background:var(--night-800);
}
.gtile img{
  display:block;width:100%;height:auto;
  filter:saturate(.92);transition:transform .4s ease;
}
.gtile:hover img{transform:scale(1.05)}
/* 3 sloupce, ne 4 — sedm fotek se do tří rozloží rovnoměrně a zůstanou
   dost velké na to, aby na nich bylo něco vidět */
@media(min-width:900px){.gal{columns:3;column-gap:18px}.gtile{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){.gtile img{transition:none}.gtile:hover img{transform:none}}

/* =====================================================================
   FINÁLE — oranžová výzva
   ===================================================================== */
.final{
  position:relative;color:#fff;text-align:center;
  background:
    radial-gradient(90% 140% at 50% 0%, #ff4d7a 0%, #b4157e 34%, #4a0a5e 68%, #16002a 100%),
    var(--night-950);
  padding:clamp(70px,10vw,120px) 0;overflow:hidden;
}
.final::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(80% 100% at 50% 50%,rgba(18,0,30,0) 40%,rgba(18,0,30,.34) 100%);
}
.final .wrap{position:relative;z-index:1}
.final .f-eyebrow{
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:#ffe0cf;
}
.final .f-title{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(2rem,6.2vw,4.2rem);line-height:1.04;text-transform:uppercase;
  margin-top:14px;text-shadow:0 10px 34px rgba(18,0,30,.4);
}
.final .f-meta{
  margin-top:18px;
  font-family:var(--mono);font-weight:700;font-size:clamp(12px,1.8vw,15px);
  letter-spacing:.16em;text-transform:uppercase;color:#ffeadd;
}
.final .fcta{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  margin-top:30px;
}
.final .btn-ghost{color:#fff}
@media(min-width:640px){.final .fcta{flex-direction:row;justify-content:center}}

/* =====================================================================
   PATIČKA + PARTNEŘI
   ===================================================================== */
.foot{background:var(--night-950);color:#9d8bab;font-size:14px;position:relative}
.foot::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);opacity:.04;mix-blend-mode:screen;
}
.foot .wrap{position:relative;z-index:1}

/* Bílý pás přes celou šířku, na kterém stojí všichni partneři.
   Uhlové pozadí patičky začíná až blokem „Ostravské derby" pod ním. */
.pband{position:relative;z-index:1;background:#fff}

.partners{padding:clamp(40px,5.4vw,58px) 0 clamp(30px,4vw,44px)}
.pgroup{margin-bottom:28px}
.pgroup:last-child{margin-bottom:0}
.pgroup h4{
  font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;
  display:flex;align-items:center;gap:14px;
}
/* linka po obou stranách, aby nadpis skupiny stál na středu */
.pgroup h4::before,.pgroup h4::after{content:"";height:1px;background:var(--line);flex:1}
/* Všichni partneři dostanou stejně velké okno a logo se do něj vepíše
   (object-fit:contain). Dřív měly dlaždice max-width podle typu loga, takže
   široká loga vycházela opticky skoro dvakrát větší než čtvercová.
   Flex, ne grid: grid by nedokončený poslední řádek nechal zarovnaný doleva,
   tady stojí na středu jako ostatní. */
.plogos{
  display:flex;flex-wrap:wrap;
  gap:10px;justify-content:center;align-items:center;
}
.plogo{
  background:transparent;flex:none;
  display:flex;align-items:center;justify-content:center;
  width:126px;height:82px;padding:10px 16px;
  transition:transform .15s ease;
}
.plogo:hover{transform:translateY(-3px)}
.plogo:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:8px}
.plogo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media(min-width:700px){
  .plogos{gap:18px}
  .plogo{width:148px;height:94px;padding:12px 20px}
}

/* partner bez dodaného loga — textová dlaždice ve stejném rastru */
.plogo.txt{
  font-family:var(--disp);font-weight:400;
  font-size:15px;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink);text-align:center;line-height:1.15;
}

/* odkaz na web partnera se chová stejně jako dlaždice */
a.plogo{cursor:pointer;border-radius:10px}
a.plogo:hover{box-shadow:0 0 0 2px var(--brand)}

/* Telefon: menší dlaždice a hlavně VÍC MEZERY, ať loga nesedí na sobě.
   (Tady dřív zůstal blok po derby, který logům povoloval max-width:165px —
   víc než byla samotná dlaždice — takže se na mobilu vzájemně překrývala.) */
@media(max-width:700px){
  .plogos{gap:14px 10px}
  .plogo{width:132px;height:80px;padding:8px 14px}
}
@media(max-width:480px){
  .plogos{gap:16px 8px}
  .plogo{width:calc(50% - 8px);max-width:150px;height:74px;padding:8px 16px}
}

.foot-main{
  display:grid;gap:34px;grid-template-columns:1fr;
  padding:clamp(30px,5vw,48px) 0;
  border-top:1px solid #1c0030;
}
.fbrand{display:flex;align-items:flex-start;gap:14px}
.fbrand img{width:52px;height:52px;background:var(--paper);border-radius:12px;padding:4px}
.fbrand .t{font-family:var(--disp);font-size:19px;color:#fff;text-transform:uppercase;line-height:1.15}
.fbrand p{margin-top:10px;max-width:44ch;font-size:13.5px;line-height:1.65}
.socials{display:flex;gap:10px;margin-top:16px}
.socials a{
  width:42px;height:42px;border-radius:0;
  background:#1c0030;color:#e0d5e6;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,transform .15s;
}
.socials a:hover{background:var(--brand);color:#fff;transform:translateY(-2px)}

.fcol h4{
  font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:#6f5f7d;margin:0 0 14px;
}
.fcol li{margin-bottom:9px;line-height:1.5}
.fcol a{color:#e0d5e6;transition:color .15s}
.fcol a:hover{color:#fff}
.fcol .mut{font-size:12.5px;color:#6f5f7d}

.foot-bottom{
  border-top:1px solid #1c0030;
  padding:20px 0 26px;
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  font-size:12.5px;color:#6f5f7d;
}
.foot-bottom a{color:#9d8bab;text-decoration:underline;text-underline-offset:3px}
@media(min-width:900px){
  .foot-main{grid-template-columns:1.3fr .8fr .8fr}
}

/* =====================================================================
   ČSOB LIŠTA — spodní okraj obrazovky
   ===================================================================== */
.csob-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:var(--csob);color:#fff;
  border-top:2px solid rgba(255,255,255,.28);
  box-shadow:0 -20px 50px -24px rgba(0,0,0,.7);
  transform:translateY(102%);transition:transform .45s ease;
}
.csob-bar.on{transform:none}
.csob-bar .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px 18px;flex-wrap:wrap;padding-top:11px;padding-bottom:11px;
}
.cs-txt{display:flex;align-items:center;gap:11px;font-size:14.5px;line-height:1.35}
.cs-txt .tx{text-wrap:balance}
.cs-txt b{font-weight:800}
.cs-act{display:flex;gap:8px;margin-left:auto}
.cs-btn{
  font:800 12.5px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;
  padding:13px 18px;border:0;border-radius:0;cursor:pointer;
  transition:background .15s,box-shadow .15s,transform .15s;
}
.cs-btn:active{transform:translateY(1px)}
.cs-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.cs-btn.yes{background:#fff;color:var(--csob)}
.cs-btn.yes:hover{background:var(--paper)}
.cs-btn.no{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.cs-btn.no:hover{box-shadow:inset 0 0 0 2px #fff}
@media(max-width:560px){
  .csob-bar .wrap{gap:10px}
  .cs-txt{font-size:13px;width:100%}
  .cs-act{margin-left:0;width:100%}
  /* „Koupit lístky se slevou" je delší než původní „Mám kartu", takže dvě
     stejně široká tlačítka lištu přetékala — hlavní dostane víc místa
     a min-width:0 dovolí textu se zalomit místo roztahování boxu. */
  .cs-act{gap:6px}
  .cs-btn{min-width:0;padding:12px 6px;font-size:11.5px;letter-spacing:.03em}
  .cs-btn.yes{flex:1.7}
  .cs-btn.no{flex:1;white-space:nowrap}
}

/* zvýraznění „−20 %" v podřádku hera */
.csob-hl{background:var(--csob);color:#fff;padding:2px 7px;font-weight:800}

/* =====================================================================
   PLOVOUCÍ WIDGET — konec cenových vln (pravý dolní roh)
   ===================================================================== */
.fab{
  position:fixed;right:16px;z-index:80;
  bottom:calc(16px + var(--csob-h,0px));  /* uhne ČSOB liště, když je vidět */
  width:min(322px,calc(100vw - 24px));
  background:linear-gradient(175deg,#240040,#16002a);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);
  padding:16px 16px 14px;
  color:#fff;
  box-shadow:0 34px 74px -28px rgba(0,0,0,.8);
  opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .45s ease,transform .45s ease,bottom .45s ease;
}
.fab.on{opacity:1;transform:none;pointer-events:auto}
.fab-x{
  position:absolute;top:8px;right:8px;
  width:30px;height:30px;border:0;border-radius:0;background:transparent;
  color:#9d8bab;font-size:15px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.fab-x:hover{background:rgba(255,255,255,.08);color:#fff}
/* „Tato cena platí ještě" — velké bílé, ať to ve widgetu čte jako oznámení,
   ne jako drobná poznámka nad čísly (zadání Michala) */
.fab-eyebrow{
  font-family:var(--disp);font-weight:400;font-size:19px;line-height:1.1;
  letter-spacing:.02em;text-transform:uppercase;color:#fff;
  margin:0 30px 12px 0;
}
.fab-cd{display:flex;gap:6px}
.fab-cd span{
  flex:1;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:0;
  padding:8px 2px 7px;text-align:center;
}
.fab-cd b{display:block;font-family:var(--disp);font-weight:400;font-size:19px;line-height:1}
.fab-cd small{
  display:block;margin-top:4px;
  font-family:var(--mono);font-weight:700;font-size:8px;letter-spacing:.16em;
  text-transform:uppercase;color:#9d8bab;
}
/* blok ceny: dominantní je nejnižší dosažitelná cena (s kartou ČSOB) */
.fab-save{
  position:relative;
  margin:12px 0 11px;padding:11px 2px 13px;
  border-top:2px dashed rgba(255,255,255,.13);border-bottom:2px dashed rgba(255,255,255,.13);
}
/* Procento úspory v kolečku — stejná fialová jako u kartiček v ceníku,
   ať je to na webu pořád tentýž signál „tolik ušetříš". */
.fab-off{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  margin:0;width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);
  box-shadow:0 0 0 4px #1a0030,0 10px 22px -12px rgba(0,0,0,.8);
}
.fab-off b{
  font-family:var(--disp);font-weight:400;font-size:19px;line-height:1;
  color:#fff;white-space:nowrap;
}
.fab-lbl{
  display:flex;align-items:center;gap:8px;margin:0 0 6px;
  font-family:var(--mono);font-weight:700;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#c6b6d1;
}
.fab-lbl .cb{height:22px}
.fab-save .big{
  display:flex;align-items:baseline;gap:6px;
  font-family:var(--disp);font-weight:400;line-height:1;
}
.fab-save .big b{font-weight:400;font-size:40px;color:var(--accent-lt)}
.fab-save .big small{
  font-family:var(--mono);font-weight:700;font-size:13px;
  letter-spacing:.06em;color:var(--accent-lt);
}
.fab-save .cmp{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:7px;
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;
}
.fab-save .cmp s{
  color:#9d8bab;
  text-decoration:line-through;text-decoration-color:var(--brand);text-decoration-thickness:2px;
}
.fab-save .cmp .new{color:var(--brand-hot)}

.fab-live{
  display:flex;align-items:center;gap:9px;margin:0 0 11px;
  font-size:12.5px;color:#c6b6d1;
}
.fab-live b{color:#fff;font-size:14px;display:inline-block}
.fab-live b.bump{animation:fab-bump .55s ease}
@keyframes fab-bump{40%{transform:scale(1.45);color:var(--brand-hot)}}
.fab-live .pulse{
  width:8px;height:8px;border-radius:50%;background:var(--brand-hot);flex:none;
  animation:fab-ping 1.9s ease-out infinite;
}
@keyframes fab-ping{
  0%{box-shadow:0 0 0 0 rgba(255,148,66,.5)}
  70%,100%{box-shadow:0 0 0 9px rgba(255,148,66,0)}
}
.fab-btn{
  display:flex;align-items:center;justify-content:center;width:100%;
  font:800 12.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  padding:12px 10px;border-radius:0;color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);
  transition:box-shadow .15s,transform .15s;
}
.fab-btn:hover{box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);transform:translateY(-1px)}
.fab-btn:focus-visible{outline:3px solid var(--brand-hot);outline-offset:2px}
@media(max-width:480px){
  .fab{right:12px;bottom:calc(12px + var(--csob-h,0px));padding:14px 14px 12px}
}

/* =====================================================================
   ANIMACE PŘI SCROLLU
   ===================================================================== */
/* skryté jen když běží JS (html.js) — bez JS je vše rovnou viditelné */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal.d1{transition-delay:.08s}
html.js .reveal.d2{transition-delay:.16s}
html.js .reveal.d3{transition-delay:.24s}

/* harmonogram: linka se kreslí podle scrollu (třídu .draw + --tlp řídí JS) */
html.js .timeline.draw::before{
  transform:scaleY(var(--tlp,0));transform-origin:top;
}

/* fotky v programu a galerii jemně plují při scrollu (jen moderní prohlížeče;
   scale v keyframes dává rezervu, aby při posunu nekoukaly okraje) */
@supports (animation-timeline: view()){
  html.js .pphoto img,
  html.js .gtile img{
    animation:photo-drift linear both;
    animation-timeline:view();
  }
  @keyframes photo-drift{
    from{scale:1.14;translate:0 -4.5%}
    to{scale:1.14;translate:0 4.5%}
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* kotvy pod fixní lištou */
section[id],#kontakt,#partneri{scroll-margin-top:74px}

/* =====================================================================
   STRÁNKA „JAK ZÍSKAT SLEVU" (/jaknaslevu)
   Šest kroků jako dlaždice: 1 sloupec na telefonu, 2 od 700 px, 3 od
   1040 px. Screenshoty mají různé poměry stran (jeden je výřez spodní
   lišty aplikace), takže se nikam neořezávají — proto align-items:start,
   ať se dlaždice v řádku nenatahují na nejvyšší z nich.
   ===================================================================== */
.guide-sec{padding-top:clamp(92px,12vh,132px);padding-bottom:clamp(40px,7vw,80px)}
.guide-head{margin-bottom:clamp(26px,4vw,44px)}

.guide{
  max-width:1140px;margin:0 auto;padding:0;list-style:none;
  display:grid;grid-template-columns:1fr;
  gap:clamp(22px,3vw,30px);align-items:start;
}
@media(min-width:700px){.guide{grid-template-columns:repeat(2,1fr)}}
/* čtyři kroky = čtyři sloupce, celý postup je na jednu obrazovku */
@media(min-width:1040px){.guide{grid-template-columns:repeat(4,1fr);gap:22px}}

/* krok: číslo vlevo, text vedle, screenshot pod tím přes celou šířku */
.gstep{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:13px;align-items:start;min-width:0;
}
.gnum{
  grid-row:1;grid-column:1;
  width:36px;height:36px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:400;font-size:21px;line-height:1;
  letter-spacing:0;background:var(--brand);color:#fff;
  /* kolečko sedí na prvním řádku nadpisu, ne uprostřed celého textu */
  margin-top:-1px;
}
.gtext{grid-row:1;grid-column:2;min-width:0}
.gstep h3{
  margin:0;font-family:var(--disp);font-weight:400;
  font-size:clamp(19px,2.1vw,24px);line-height:1.1;
  /* Tungsten je úzký — bez prostrkání se verzálky slepí a nejdou přečíst */
  letter-spacing:.055em;text-transform:uppercase;color:#fff;
}
.gstep p{
  margin:7px 0 0;font-size:clamp(13.5px,1.4vw,15.5px);line-height:1.55;color:#c6b6d1;
}
.gstep p b{color:#fff;font-weight:800}

.gshot{grid-row:2;grid-column:1 / -1;margin:14px 0 0}
.gshot img{
  width:100%;height:auto;display:block;border-radius:14px;
  border:4px solid #2d0a48;box-shadow:0 24px 48px -26px rgba(0,0,0,.9);
}

/* závěr pod kroky */
.guide-end{max-width:560px;margin:clamp(30px,5vw,50px) auto 0;text-align:center}
.guide-end p{margin:0;font-size:clamp(14px,1.5vw,16.5px);line-height:1.6;color:#c6b6d1}
.guide-dl{margin-top:18px}
.guide-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:0 14px}
.guide-btns .guide-dl{margin-top:18px}
@media(max-width:600px){.guide-btns .guide-dl{width:100%;justify-content:center}}

/* telefon: screenshot ať nezabere celou obrazovku, postup se tím zkrátí */
@media(max-width:699px){
  .gshot{margin-top:12px}
  .gshot img{max-width:235px;margin-left:49px}
}

/* claim místo vypnutého odpočtu u vstupenek */
.tk-claim{
  margin:0;font-family:var(--disp);font-weight:400;
  font-size:clamp(22px,3vw,36px);letter-spacing:.02em;line-height:1.05;
  text-transform:uppercase;color:#fff;
}
.tk-claim small{
  display:block;margin-top:7px;
  font-family:var(--mono);font-weight:700;font-size:clamp(10px,1.1vw,12px);
  letter-spacing:.12em;text-transform:uppercase;color:var(--brand-hot);
}
@media(min-width:700px){.tk-claim{text-align:right}}

/* VIP: „Afterparty v ceně zdarma" ať vyčnívá z výčtu výhod */
.vlist li.vfree{color:#fff;font-weight:700}
.vlist li.vfree::before{color:var(--brand-hot)}

/* =====================================================================
   COOKIES LIŠTA (assets/js/cookies.js) — vlevo dole, derby vzhled.
   „Povolit vše" a „Jen nutné" jsou schválně stejně velké a vedle sebe
   (GDPR: odmítnutí musí být stejně snadné jako souhlas).
   ===================================================================== */
.ckb{
  position:fixed;left:16px;bottom:16px;z-index:220;
  width:min(430px,calc(100vw - 24px));
  background:linear-gradient(175deg,#240040,#16002a);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
  padding:18px 18px 15px;color:#fff;
  box-shadow:0 34px 74px -28px rgba(0,0,0,.85);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .4s ease,transform .4s ease;
}
.ckb.on{opacity:1;transform:none;pointer-events:auto}
.ckb-t{margin:0;font-family:var(--disp);font-weight:400;font-size:19px;letter-spacing:.01em;text-transform:uppercase}
.ckb-x{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:#c6b6d1}
.ckb-act{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.ckb-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font:800 12.5px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;
  padding:13px 10px;border:0;border-radius:0;cursor:pointer;color:#fff;
  transition:background .15s,transform .15s;
}
.ckb-yes{background:var(--brand)}
.ckb-yes:hover{background:var(--brand-hot);transform:translateY(-1px)}
.ckb-no{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
.ckb-no:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}
.ckb-btn:focus-visible,.ckb-more:focus-visible{outline:3px solid var(--brand-hot);outline-offset:2px}
.ckb-more{
  grid-column:1 / -1;justify-self:center;margin-top:2px;
  background:none;border:0;cursor:pointer;padding:4px;
  font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#9d8bab;text-decoration:underline;text-underline-offset:3px;
}
.ckb-more:hover{color:#fff}
.ckb-opts{margin-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.ckb-row{padding:10px 0 9px;border-bottom:1px solid rgba(255,255,255,.08)}
.ckb-row-h{
  display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.ckb-row-h input{width:18px;height:18px;accent-color:var(--brand);cursor:pointer;flex:none}
.ckb-row-h input:disabled{accent-color:#6f5f7d;cursor:default}
.ckb-row p{margin:5px 0 0;font-size:11.5px;line-height:1.5;color:#9d8bab}
.ckb-save{width:100%;margin-top:11px;background:var(--accent)}
.ckb-save:hover{background:var(--accent-hot);transform:translateY(-1px)}
@media(max-width:480px){
  .ckb{left:10px;bottom:10px;width:calc(100vw - 20px);padding:15px 14px 13px}
}
@media(prefers-reduced-motion:reduce){
  .ckb{transition:none;transform:none}
}