html{color-scheme:dark;scroll-behavior:smooth}
/* Cross-document page transitions (Chrome/Edge; others = instant nav) */
@view-transition {
navigation: auto;
}
@media (prefers-reduced-motion: no-preference){
/* Stránky se střídají po sobě, ne naráz: stará rychle zhasne (ostatní míče
a popisky řady zmizí dřív, než se míč rozletí daleko), nová naběhne až
ve druhé polovině. Míč tak letí po čisté tmavé scéně místo přes dvě
prolínající se stránky — dřív se obě překrývaly po celou dobu letu. */
::view-transition-old(root){
animation: ms-vt-fade-out calc(var(--ms-ball-vt-dur, .9s) * .36) cubic-bezier(.4,0,.6,1) both;
}
::view-transition-new(root){
animation: ms-vt-fade-in calc(var(--ms-ball-vt-dur, .9s) * .58) cubic-bezier(.33,1,.36,1) calc(var(--ms-ball-vt-dur, .9s) * .3) both;
}
/* Shared míč — měkký let; na konci old vybledne přes živý míč.
Cílíme přes view-transition-class, ne přes výčet slugů: nový sport tak
funguje sám od sebe, stačí že šablona nastaví `view-transition-class:
ms-ball`. Dřív se tu slugy vypisovaly a jezdectví chybělo → míč se sice
zachytil jako shared element, ale nedostal žádný styl (hlavně `opacity:0`
na ::view-transition-new), takže prázdný snapshot zůstal viset.
Podpora: view-transition-class je Chrome 125+, cross-document VT
(@view-transition výš) až Chrome 126+ — kdo umí přechod, umí i třídu. */
::view-transition-group(.ms-ball){
z-index: 9999;
animation-duration: var(--ms-ball-vt-dur, .9s);
/* Měkký rozjezd i dojezd. Původní křivka (.32,.72,0,1) vystřelila míč
za prvních 25 % času a zbytek se jen plazil — let nebyl čitelný. */
animation-timing-function: var(--ms-spring-soft);
animation-fill-mode: both;
isolation: isolate;
will-change: transform;
}
/* „Zvednutí“: míč se uprostřed letu mírně zvětší, jako by ho někdo zvedl
a položil na nové místo — to je to, co let udělá viditelným. */
::view-transition-image-pair(.ms-ball){
isolation: isolate;
animation: ms-ball-lift var(--ms-ball-vt-dur, .9s) cubic-bezier(.45,.05,.2,1) both;
}
::view-transition-old(.ms-ball){
width: 100%;
height: 100%;
overflow: clip;
object-fit: fill;
object-position: center;
/* linear opacity = predvídatelný crossfade se živým míčem */
animation: ms-ball-old-land var(--ms-ball-vt-dur, .9s) linear both !important;
mix-blend-mode: normal;
z-index: 2;
}
/* New = živý míč z hero. Leží POD letícím snímkem a je vidět od chvíle,
kdy je model hotový (do té doby je element průhledný). Starý snímek se
na konci rozplyne a odkryje už hotový míč — bez průhledné mezery.
Dřív tu bylo opacity:0, takže živý míč v přechodu vůbec nebyl vidět:
snímek zmizel a skutečný míč naskočil až po konci přechodu (záblesk). */
::view-transition-new(.ms-ball){
width: 100%;
height: 100%;
overflow: clip;
object-fit: fill;
object-position: center;
animation: none !important;
opacity: 1;
z-index: 1;
mix-blend-mode: normal;
}
}
@media (prefers-reduced-motion: reduce){
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*){
animation: none !important;
}
}
@keyframes ms-vt-fade-out{to{opacity:0}}
@keyframes ms-vt-fade-in{from{opacity:0}}
/*
Dopad bez blinku:
old drží 1 skoro celou dobu (live už je pod ním 1:1),
krátký měkký dissolve jen na samotném konci.
*/
@keyframes ms-ball-lift{
0%,100%{transform:scale(1)}
45%{transform:scale(1.1)}
}
@keyframes ms-ball-old-land{
0%,88%{opacity:1}
100%{opacity:0}
}
:root{
/* Jediná páka na rychlost přechodu mezi stránkami. Odvozuje se z ní let
míče, oba root fady (přes calc níž) i choreografie v sport_detail.html,
která si tuhle hodnotu čte — nikde jinde se doba nepíše. */
--ms-ball-vt-dur:.42s;
--ms-ball-size:min(220px,42vw);
/* Sdílený look míče (rail = hero) */
--accent:#e5202d;--accent2:#3d8fd9;
/* Jedna červená ve třech silách. Paleta je jinak čistě neutrální — dřív
měla černá i šedé růžový nádech a k tomu pět různých červených, takže
celek působil zaprášeně růžově místo černo-červeně.
--accent: obrysy, tečky, dekor. --accent-fill: plochy pod bílým textem
(bílá na něm 5,0:1). --accent-bright: text na tmavém (5,8:1 na pozadí, 4,8:1 na panelu v panelu). */
--accent-fill:#d91f2b;
--accent-bright:#ff4654;
--ink:#f4f4f5;--muted:#a1a1aa;
/* Figtree — stejné písmo jako předloha numa.uprock.pro. Čísla nejdou do
zvláštního monospace; Figtree má tabulkové číslice (tnum), takže se časy
pod sebou nerozjíždějí a přitom zůstanou ve stejném hlase jako text. */
--font-ui:'Figtree',-apple-system,'Segoe UI',Helvetica,sans-serif;
--font-num:var(--font-ui);
--bg:#0b0b0c;
--bg-soft:rgba(255,255,255,.035);
--surface:rgba(255,255,255,.055);
--surface-raised:rgba(255,255,255,.095);
--border:rgba(255,255,255,.10);--border-soft:rgba(255,255,255,.055);
--header-bg:rgba(14,14,15,.92);--radius:26px;
--radius-panel:36px;
--radius-squircle:40%;
--radius-chip:14px;
--shadow:0 4px 18px rgba(0,0,0,.4);
--btn-light-bg:#f4f4f5;--btn-light-hover:#d4d4d8;
--scrollbar:rgba(255,255,255,.22);
--divider:rgba(255,255,255,.12);
--page-pad:clamp(16px,3vw,40px);
--fold-peek:clamp(220px, 32vh, 300px);
--hero-fold:calc(100svh - var(--fold-peek));
}
*{margin:0;padding:0;box-sizing:border-box}
body{
position:relative;
font-family:var(--font-ui);
color:var(--ink);
line-height:1.55;
background:var(--bg);
}
h1,h2,h3{font-family:var(--font-ui);font-weight:700;letter-spacing:-.02em}
a{color:inherit;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(229,32,45,.18)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
outline:3px solid var(--accent);
outline-offset:3px;
border-radius:10px;
box-shadow:0 0 0 6px rgba(229,32,45,.22);
}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 18px;z-index:100}
.skip-link:focus-visible{left:max(12px,env(safe-area-inset-left));outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{text-wrap:balance}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:none;margin:0 auto;padding:0 var(--page-pad)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* NAV — two floating pills */
header{
position:sticky;top:0;z-index:50;padding:12px var(--page-pad) 0;
background:linear-gradient(180deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.28) 62%,transparent 100%);
border:none;transition:transform .35s ease;will-change:transform;pointer-events:none;
}
header.hdr-hidden{transform:translateY(calc(-100% - 12px))}
header .header-bar{pointer-events:auto}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:0 auto}
.nav-pill{
display:flex;align-items:center;gap:6px;min-height:54px;
padding:0 6px 0 14px;
background:rgba(228,228,231,.12);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
border:1px solid rgba(255,255,255,.28);border-radius:999px;
box-shadow:0 8px 28px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18);
}
.nav-pill--start{flex:0 1 auto;min-width:0;padding:0 8px 0 6px}
.nav-pill--end{flex:none;padding:0 6px 0 10px}
.navlink--logo{
font-weight:800;font-size:1.15rem;letter-spacing:-.55px;
padding:8px 12px;min-height:40px;color:#fff;
text-shadow:0 1px 10px rgba(0,0,0,.35),0 0 18px rgba(255,70,84,.22);
}
.navlink--logo:not(.is-lit){
color:#fff;
text-shadow:
0 1px 10px rgba(0,0,0,.4),
0 0 14px rgba(255,70,84,.28),
0 0 2px rgba(255,70,84,.35);
}
.navlink--logo span{
color:#ff4654;
text-shadow:0 0 12px rgba(255,70,84,.55),0 1px 2px rgba(0,0,0,.35);
transition:color .15s ease,text-shadow .15s ease;
}
.navlink--logo.is-lit{
color:#fff;
text-shadow:0 1px 8px rgba(0,0,0,.35);
}
/* Tmavé „sporty“ až když blob na logu dojede (is-settled), ne hned na hover */
.navlink--logo.is-settled span{
color:#0b0b0c;
text-shadow:none;
}
.logo{
display:inline-flex;align-items:center;align-self:center;
height:40px;line-height:1;
font-weight:800;font-size:1.28rem;letter-spacing:-.55px;white-space:nowrap;flex:none;
padding:0 10px 0 4px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35);transition:opacity .2s;
}
.logo span{color:#ff4654;line-height:1}
.logo.is-home{opacity:1}
.logo:not(.is-home):hover{opacity:.88}
.nav-rail{display:flex;align-items:center;gap:4px;min-width:0;position:relative;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav-rail::-webkit-scrollbar{display:none}
.nav-drawer{display:none}
.nav-indicator,.subtab-indicator{position:absolute;top:0;left:0;border-radius:999px;background:var(--accent-fill);z-index:0;pointer-events:none;opacity:0;transition:left .32s cubic-bezier(.45,0,.2,1),width .32s cubic-bezier(.45,0,.2,1),top .32s cubic-bezier(.45,0,.2,1),height .32s cubic-bezier(.45,0,.2,1);will-change:left,width,top,height}
.navlink{display:inline-flex;align-items:center;font-weight:700;font-size:.95rem;padding:8px 14px;min-height:40px;border-radius:999px;white-space:nowrap;position:relative;z-index:1;background:transparent!important;color:rgba(255,255,255,.88);transition:color .22s;line-height:1}
.navlink:hover{color:#fff}
.navlink.active{color:#fff}
.navlink.is-lit{color:#fff}
.nav-divider{display:none}
.nav-toggle{display:none;flex:none;width:44px;height:44px;border:0;border-radius:var(--radius-squircle);corner-shape:squircle;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0;transition:background-color .2s}
.nav-toggle:hover{background:rgba(255,255,255,.2)}
.nav-toggle-bar{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .25s}
body.nav-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle-bar:nth-child(2){opacity:0}
body.nav-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-scrim{position:fixed;inset:0;z-index:45;background:rgba(11,11,12,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.nav-scrim[hidden]{display:none}
/* Rezervace — výzva k akci. Bílá, ne červená: červená pilulka znamená
„tady jsi“, a dvě naráz vypadaly jako dvě vybrané záložky. */
#navSecondary .navlink[href*="rezervace"],
#navSecondary .navlink[href*="reservation"]{
background:#fff!important;color:#0b0b0c!important;
margin-right:4px;transition:background-color .18s,color .18s;
}
#navSecondary .navlink[href*="rezervace"]:hover,
#navSecondary .navlink[href*="reservation"]:hover{background:#e4e4e7!important}
#navSecondary .navlink[href*="rezervace"].is-lit,
#navSecondary .navlink[href*="reservation"].is-lit{color:#0b0b0c!important}
#navSecondary .nav-indicator{opacity:0!important}
/* Hranice pro hamburger. Sporty v horní liště nejsou (mají vlastní lištu
kanálů na stránce sportu), takže logo + tři odkazy se vejdou skoro všude;
hamburger s kompletním menu včetně sportů zůstává jen pro telefony.
Drží se v souladu s 640 ve skriptech v base.html. */
@media(max-width:640px){
header{padding:8px 12px 0}
header.hdr-hidden{transform:translateY(calc(-100% - 8px))}
.header-bar{gap:8px}
.nav-pill--start{flex:1;min-height:50px;padding:0 8px 0 6px}
.nav-pill--end{min-height:50px;padding:0 4px 0 6px}
.nav-rail{display:none}
#navPrimary{
display:flex;align-items:center;flex:1;min-width:0;overflow:visible;
}
#navPrimary .navlink:not(.navlink--logo){display:none}
#navPrimary .nav-indicator,#navSecondary .nav-indicator{display:none}
.navlink--logo{font-size:1.1rem;padding:8px 10px}
.nav-toggle{display:flex}
.nav-drawer{
display:none;position:fixed;top:72px;left:12px;right:12px;z-index:55;
flex-direction:column;align-items:stretch;gap:4px;flex:none;overflow:visible;
background:var(--surface);border:1px solid var(--border);border-radius:18px;
box-shadow:var(--shadow),0 16px 48px rgba(0,0,0,.22);
padding:12px;max-height:calc(100dvh - 88px);overflow-y:auto;
pointer-events:auto;
}
.nav-group{display:flex;flex-direction:column;align-items:stretch;width:100%;overflow:visible}
body.nav-open .nav-drawer{display:flex}
.navlink{font-size:1rem;padding:12px 14px;border-radius:12px;color:var(--ink)}
.navlink:hover{color:var(--accent-bright)}
.navlink.is-lit{color:#fff}
#navSecondary .navlink[href*="rezervace"],
#navSecondary .navlink[href*="reservation"]{background:transparent!important;box-shadow:none}
.nav-drawer .navlink[href*="rezervace"],
.nav-drawer .navlink[href*="reservation"]{
background:#fff!important;color:#0b0b0c!important;border-radius:12px;
}
.nav-divider{display:block;height:1px;background:var(--border);margin:6px 4px}
.nav-toggle{width:44px;height:44px}
}
/* SECTIONS */
section{padding:48px 0;scroll-margin-top:76px}
.sec-head{display:flex;align-items:baseline;justify-content:flex-start;text-align:left;width:100%;margin-bottom:24px;gap:12px;flex-wrap:wrap}
.sec-head h2{font-size:1.65rem;letter-spacing:-.5px;text-align:left;text-wrap:auto}
.sec-head-inset{padding-left:var(--page-pad);padding-right:var(--page-pad)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
/* HERO — full-bleed dark carousel; leaves a fold peek for next videos */
.hero-tv{position:relative;width:100%;min-height:var(--hero-fold);background:#0b0b0c;color:#fff;overflow:hidden;padding:0;isolation:isolate}
.hero-track{display:grid;grid-template-columns:1fr;min-height:var(--hero-fold);pointer-events:none}
.hero-slide{grid-area:1/1;position:relative;min-height:var(--hero-fold);opacity:0;visibility:hidden;transition:opacity .6s cubic-bezier(.6,.05,.2,1),visibility .6s;pointer-events:none}
.hero-slide.is-active{opacity:1;visibility:visible;z-index:1}
.hero-slide:only-child{opacity:1;visibility:visible;z-index:1}
.hero-slide.is-active .hero-tv-content,.hero-slide.is-active .hero-actions *{pointer-events:auto}
@media(min-width:861px){
.hero-tv--slide .hero-track{
display:flex;grid-template-columns:unset;min-height:var(--hero-fold);
/* transition jen přes JS — CSS transition by při skoku z klonu „protáčela“ celý track */
transition:none;will-change:transform;
}
.hero-tv--slide .hero-slide{
flex:0 0 100%;width:100%;min-height:var(--hero-fold);grid-area:unset;
opacity:1;visibility:visible;pointer-events:none;
}
.hero-tv--slide .hero-slide.is-active{z-index:1}
.hero-tv--slide .hero-slide.is-active .hero-tv-content,
.hero-tv--slide .hero-slide.is-active .hero-actions *{pointer-events:auto}
}
@media(min-width:861px) and (prefers-reduced-motion:reduce){
.hero-tv--slide .hero-track{transition:none}
}
.hero-controls{position:absolute;inset:0;z-index:20;pointer-events:none}
.hero-controls .hero-arrow,.hero-controls .hero-dot{pointer-events:auto}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.88) 0%,rgba(11,11,12,.45) 45%,rgba(11,11,12,.15) 70%),linear-gradient(0deg,rgba(11,11,12,.92) 0%,transparent 45%)}
.hero-tv-content{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:var(--hero-fold);padding:60px var(--page-pad) 90px;width:100%}
.hero-tv h1{font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.08;letter-spacing:-1px;max-width:16ch}
.hero-meta{display:flex;gap:14px;align-items:center;margin:14px 0 10px;font-size:.85rem;color:#d4d4d8;flex-wrap:wrap}
.hero-meta .pill{background:rgba(255,255,255,.14);padding:3px 12px;border-radius:var(--radius-chip);corner-shape:squircle;font-weight:600;color:#fff}
.hero-meta .pill-live{background:var(--accent-fill);color:#fff}
.hero-tv p{color:#d4d4d8;font-size:1rem;max-width:52ch}
.hero-actions{margin-top:22px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-actions .btn{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
min-height:48px;box-sizing:border-box;border:2px solid transparent;line-height:1.2;
}
@property --hero-play-angle{
syntax:"";
inherits:false;
initial-value:0deg;
}
@keyframes hero-play-orbit{
to{--hero-play-angle:360deg}
}
/* Shared orbit ring for pill play CTAs */
.hero-play.btn{
position:relative;
isolation:isolate;
z-index:0;
overflow:visible;
border-color:transparent;
box-shadow:0 0 0 1px rgba(255,255,255,.2);
}
.hero-play.btn::before{
content:"";
position:absolute;
inset:-3px;
border-radius:inherit;
z-index:-2;
background:conic-gradient(
from var(--hero-play-angle),
transparent 0deg,
transparent 250deg,
rgba(229,32,45,.15) 280deg,
var(--accent) 318deg,
#ff4654 338deg,
#fff 352deg,
transparent 360deg
);
animation:hero-play-orbit 2.2s linear infinite;
}
.hero-play.btn::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
z-index:-1;
transition:background-color .2s;
}
.hero-play.btn-light{
background:#fff;
color:#0b0b0c;
}
.hero-play.btn-light::after{background:#fff}
.hero-play.btn-light:hover::after{background:#f4f4f5}
.hero-play.btn-primary::after{background:var(--accent-fill)}
.hero-play.btn-primary:hover::after{background:#b81a25}
@media(prefers-reduced-motion:reduce){
.hero-play.btn::before{animation:none;background:var(--accent-fill)}
}
.hero-tv .btn-light{background:#fff;color:#0b0b0c;border-color:#fff}
.hero-tv .btn-light:hover{background:#f4f4f5;border-color:#f4f4f5}
.btn-light{background:var(--btn-light-bg);color:var(--ink)}
.btn-light:hover{background:var(--btn-light-hover)}
.btn-dark-ghost{border:2px solid rgba(255,255,255,.55);color:#fff}
.btn-dark-ghost:hover{background:rgba(255,255,255,.15)}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1;width:44px;height:44px;border:0;border-radius:var(--radius-squircle);corner-shape:squircle;background:rgba(255,255,255,.12);color:#fff;font-size:1.5rem;line-height:1;transition:background-color .2s;cursor:pointer}
.hero-arrow:hover{background:rgba(255,255,255,.28)}
.hero-arrow.prev{left:14px}
.hero-arrow.next{right:14px}
@media(max-width:640px){
:root{--fold-peek:clamp(180px,28vh,240px)}
.hero-tv-content{padding-top:48px;padding-bottom:64px}
.hero-arrow{width:40px;height:40px;font-size:1.3rem}
.hero-actions{flex-direction:column;width:100%}
.hero-actions .btn{width:100%;text-align:center}
}
/* LIVE NOW — homepage priority band */
.live-band{padding:28px 0 36px;background:linear-gradient(180deg,rgba(229,32,45,.08) 0%,transparent 100%)}
.live-band-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;padding:0 var(--page-pad);width:100%;margin:0}
.live-card{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid rgba(229,32,45,.35);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow),0 0 0 1px rgba(229,32,45,.08)}
.live-card-thumb{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;flex:none}
.live-card-badge{position:absolute;top:12px;left:12px;background:var(--accent-fill);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.08em;padding:4px 10px;border-radius:var(--radius-chip);corner-shape:squircle}
.live-card-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1;min-height:0}
.live-card-sport{font-size:.82rem;font-weight:700;color:var(--muted)}
.live-card-title{font-size:1.08rem;line-height:1.3;letter-spacing:-.2px}
.live-card-meta{font-size:.88rem;color:var(--muted)}
.live-card-btn{align-self:flex-start;margin-top:auto;padding:10px 18px;font-size:.88rem}
.channel--live .channel-thumb--ball{outline:none}
.sport-row--live .sr-live-tag,
.sr-head--live .sr-live-tag{
display:inline-flex;align-items:center;background:var(--accent-fill);color:#fff;
font-size:.72rem;font-weight:800;letter-spacing:.06em;padding:3px 10px;border-radius:var(--radius-chip);corner-shape:squircle;
visibility:visible;
}
.sr-live-tag{
display:inline-flex;align-items:center;justify-content:center;
min-width:52px;min-height:22px;padding:3px 10px;border-radius:var(--radius-chip);corner-shape:squircle;
font-size:.72rem;font-weight:800;letter-spacing:.06em;
visibility:hidden;
}
.sr-live-tag--empty{visibility:hidden}
.sport-row--live{border-top:0}
.hero-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:1;max-width:calc(100% - 48px)}
.hero-dots-track{
position:relative;display:flex;align-items:center;justify-content:center;
min-height:28px;padding:0 16px;border-radius:999px;
background:rgba(255,255,255,.14);
}
.hero-dots-list{display:flex;align-items:center;gap:12px;position:relative;z-index:1;padding:10px 0}
.hero-dot{
position:relative;width:8px;height:8px;border:0;border-radius:50%;padding:0;flex:none;
background:rgba(255,255,255,.38);cursor:pointer;overflow:hidden;
transition:width .25s ease,height .25s ease,transform .2s;
}
.hero-dot-fill{
position:absolute;inset:0;border-radius:inherit;background:#fff;
transform:scaleX(0);transform-origin:left center;will-change:transform;
}
.hero-dot.is-done{background:#fff}
.hero-dot.is-done .hero-dot-fill{transform:scaleX(1)}
.hero-dot.active{width:10px;height:10px;background:rgba(255,255,255,.38)}
.hero-dot:hover:not(.active),.hero-dot:focus-visible:not(.active){transform:scale(1.1)}
.hero-dot.active:hover,.hero-dot.active:focus-visible{transform:scale(1.06)}
.hero-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn{display:inline-block;padding:12px 24px;border-radius:999px;font-weight:700;font-size:.95rem;transition:background-color .2s,color .2s}
.btn-primary{background:var(--accent-fill);color:#fff}
.btn-primary:hover{background:#b81a25}
.btn-ghost{border:2px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#141415}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* FULLSCREEN PLAYER OVERLAY */
body.fs-open{overflow:hidden;padding:0!important;margin:0}
.fs-player{
position:fixed;inset:0;z-index:10000;
width:100%;height:100%;
min-width:100vw;min-height:100vh;min-height:100dvh;
margin:0;padding:0;border:0;
background:#000;box-sizing:border-box;
display:flex;align-items:stretch;justify-content:stretch;
}
.fs-player[hidden]{display:none!important}
.fs-frame{flex:1;position:relative;width:100%;height:100%;min-height:0;background:#000;overflow:hidden}
.fs-frame iframe{
position:absolute;top:50%;left:50%;
width:100vw;height:56.25vw;
min-height:100vh;min-width:177.78vh;
transform:translate(-50%,-50%);
border:0;display:block;background:#000;
}
.fs-player:fullscreen,.fs-player:-webkit-full-screen{
width:100%;height:100%;background:#000;
}
.fs-frame iframe:fullscreen,.fs-frame iframe:-webkit-full-screen{
width:100%;height:100%;background:#000;
}
.fs-close{
position:fixed;top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));
z-index:10001;width:44px;height:44px;border:0;border-radius:var(--radius-squircle);corner-shape:squircle;
background:rgba(0,0,0,.55);color:#fff;font-size:1.3rem;line-height:1;
cursor:pointer;transition:background-color .2s;box-shadow:0 2px 12px rgba(0,0,0,.4)
}
.fs-close:hover{background:rgba(0,0,0,.75)}
/* LIVE TAB — program pod streamem */
.live-stack{display:flex;flex-direction:column;gap:22px}
.live-stack .video-frame{width:100%}
.sport-section--split{
/* full-bleed within wrap: use almost the whole viewport */
width:100vw;max-width:100vw;
margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
padding-left:clamp(12px,2vw,28px);padding-right:clamp(12px,2vw,28px);
box-sizing:border-box;
}
.sport-split{
--split-gap:clamp(10px,1.2vw,16px);
display:grid;
grid-template-columns:minmax(0,2fr) minmax(0,1fr);
grid-template-areas:
"titleLive titleRec"
"main side";
column-gap:var(--split-gap);
row-gap:14px;
align-items:start;
width:100%;
container-type:inline-size;
container-name:sport-split;
}
.sport-split-title{
margin:0;padding:0;
font-size:clamp(1.35rem,2.2vw,1.75rem);letter-spacing:-.5px;line-height:1.15;
font-family:var(--font-ui);font-weight:800;
}
.sport-split-title--live{grid-area:titleLive}
.sport-split-title--rec{grid-area:titleRec}
.sport-split-main{grid-area:main;min-width:0;min-height:0}
.sport-split-side{grid-area:side;min-width:0;min-height:0;display:flex;flex-direction:column;align-self:stretch}
/* KALENDÁŘ AKCÍ — měsíční mřížka s atmosférou */
.sport-calendar .sec-head{margin-bottom:18px}
.sport-calendar-lead{margin:6px 0 0;color:var(--muted);font-weight:600;font-size:.95rem}
.ms-cal{
--ms-cal-glow:rgba(229,32,45,.14);
position:relative;isolation:isolate;overflow:hidden;
display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.85fr);
gap:clamp(18px,2.5vw,28px);align-items:stretch;
padding:clamp(16px,2.2vw,26px);
border:1px solid rgba(255,255,255,.08);
border-radius:calc(var(--radius) + 4px);
background:var(--bg-soft);
box-shadow:0 18px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
}
.ms-cal::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
background-size:28px 28px;
mask-image:radial-gradient(ellipse 80% 70% at 40% 35%,#000 20%,transparent 75%);
-webkit-mask-image:radial-gradient(ellipse 80% 70% at 40% 35%,#000 20%,transparent 75%);
opacity:.7;
}
.ms-cal-main,.ms-cal-side{position:relative;z-index:1}
.ms-cal-toolbar{
display:flex;align-items:center;justify-content:space-between;gap:12px;
margin-bottom:16px;
}
.ms-cal-title{
margin:0;font-size:clamp(1.25rem,2.4vw,1.65rem);letter-spacing:-.55px;
font-weight:800;text-transform:capitalize;text-align:center;flex:1;
background:linear-gradient(180deg,#fff 20%,rgba(228,228,231,.78));
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.ms-cal-nav{
width:44px;height:44px;border:1px solid rgba(255,255,255,.14);
border-radius:var(--radius-squircle);corner-shape:squircle;
background:rgba(28,28,30,.75);color:var(--ink);font-size:1.45rem;line-height:1;
cursor:pointer;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
transition:background-color .2s,border-color .2s,color .2s,transform .18s;
}
.ms-cal-nav:hover{
background:var(--surface-raised);border-color:rgba(255,70,84,.45);color:#fff;
transform:translateY(-1px);
}
.ms-cal-dows{
display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:8px;
}
.ms-cal-dows span{
text-align:center;font-size:.7rem;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;color:rgba(161,161,170,.85);padding:6px 0;
}
.ms-cal-dows span:nth-child(6),
.ms-cal-dows span:nth-child(7){color:rgba(255,70,84,.75)}
.ms-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.ms-cal-cell{
--cal-fill:var(--accent);
position:relative;min-height:78px;padding:9px 8px 10px;border:0;
border-radius:14px;
background:
linear-gradient(160deg,rgba(255,255,255,.04),transparent 55%),
rgba(20,20,22,.88);
color:var(--ink);text-align:left;font:inherit;cursor:pointer;
display:flex;flex-direction:column;gap:5px;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
transition:background-color .18s,box-shadow .18s,transform .18s,filter .18s;
}
.ms-cal-cell:hover{
background:
linear-gradient(160deg,rgba(255,255,255,.07),transparent 55%),
var(--surface);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.28);
transform:translateY(-1px);
}
.ms-cal-cell.is-muted{opacity:.34;filter:saturate(.6)}
.ms-cal-cell.is-today{
background:
linear-gradient(160deg,rgba(229,32,45,.22),transparent 60%),
var(--surface);
box-shadow:
inset 0 0 0 1px rgba(255,70,84,.45),
0 0 0 1px rgba(229,32,45,.2),
0 10px 26px rgba(229,32,45,.18);
}
.ms-cal-cell.is-today .ms-cal-num{
color:#ff4654;
}
.ms-cal-cell.is-selected{
background:
linear-gradient(160deg,rgba(229,32,45,.28),transparent 55%),
var(--surface-raised);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.2),
0 12px 28px rgba(0,0,0,.4);
}
.ms-cal-cell.has-events{
background:
linear-gradient(165deg,color-mix(in srgb,var(--cal-fill) 22%,transparent),transparent 62%),
linear-gradient(160deg,rgba(255,255,255,.05),transparent 55%),
rgba(20,20,22,.92);
box-shadow:
inset 3px 0 0 var(--cal-fill),
inset 0 0 0 1px color-mix(in srgb,var(--cal-fill) 28%,transparent);
}
.ms-cal-cell.has-events:hover{
background:
linear-gradient(165deg,color-mix(in srgb,var(--cal-fill) 32%,transparent),transparent 62%),
var(--surface);
}
.ms-cal-cell.has-events.is-selected{
box-shadow:
inset 3px 0 0 var(--cal-fill),
inset 0 0 0 1px rgba(255,255,255,.22),
0 12px 28px rgba(0,0,0,.42);
}
.ms-cal-num{font-size:.95rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.ms-cal-dots{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto}
.ms-cal-dot,
.ms-cal-legend-swatch,
.sport-schedule-swatch{
width:7px;height:7px;border-radius:50%;
background:var(--cal-other,#71717a);
box-shadow:0 0 0 2px rgba(113,113,122,.18);
}
.ms-cal-dot--top,
.ms-cal-legend-swatch.ms-cal-dot--top,
.sport-schedule-swatch.ms-cal-dot--top,
.ms-cal-pill--top,
.ms-cal-cell--top{--cal-fill:var(--accent,#e5202d);--cal-ring:rgba(229,32,45,.18)}
.ms-cal-dot--national,
.ms-cal-legend-swatch.ms-cal-dot--national,
.sport-schedule-swatch.ms-cal-dot--national,
.ms-cal-pill--national,
.ms-cal-cell--national{--cal-fill:var(--accent2,#3d8fd9);--cal-ring:rgba(61,143,217,.2)}
.ms-cal-dot--regional,
.ms-cal-legend-swatch.ms-cal-dot--regional,
.sport-schedule-swatch.ms-cal-dot--regional,
.ms-cal-pill--regional,
.ms-cal-cell--regional{--cal-fill:#c45c12;--cal-ring:rgba(196,92,18,.2)}
.ms-cal-dot--youth,
.ms-cal-legend-swatch.ms-cal-dot--youth,
.sport-schedule-swatch.ms-cal-dot--youth,
.ms-cal-pill--youth,
.ms-cal-cell--youth{--cal-fill:#8b2fc9;--cal-ring:rgba(139,47,201,.2)}
.ms-cal-dot--other,
.ms-cal-legend-swatch.ms-cal-dot--other,
.sport-schedule-swatch.ms-cal-dot--other,
.ms-cal-pill--other,
.ms-cal-cell--other{--cal-fill:#71717a;--cal-ring:rgba(113,113,122,.18)}
.ms-cal-dot--top,
.ms-cal-dot--national,
.ms-cal-dot--regional,
.ms-cal-dot--youth,
.ms-cal-dot--other,
.ms-cal-legend-swatch.ms-cal-dot--top,
.ms-cal-legend-swatch.ms-cal-dot--national,
.ms-cal-legend-swatch.ms-cal-dot--regional,
.ms-cal-legend-swatch.ms-cal-dot--youth,
.ms-cal-legend-swatch.ms-cal-dot--other,
.sport-schedule-swatch.ms-cal-dot--top,
.sport-schedule-swatch.ms-cal-dot--national,
.sport-schedule-swatch.ms-cal-dot--regional,
.sport-schedule-swatch.ms-cal-dot--youth,
.sport-schedule-swatch.ms-cal-dot--other{
background:var(--cal-fill);
box-shadow:0 0 0 2px var(--cal-ring);
}
.ms-cal-dot.is-live,
.ms-cal-legend-swatch.is-live,
.sport-schedule-swatch.is-live{
box-shadow:0 0 0 2px var(--accent-fill),0 0 0 4px rgba(229,32,45,.22);
}
.ms-cal-pill{
display:none;font-size:.62rem;font-weight:700;line-height:1.25;
color:rgba(228,228,231,.92);
background:rgba(0,0,0,.42);
border-radius:7px;padding:4px 6px 4px 7px;max-width:100%;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
border-left:3px solid var(--cal-fill,#71717a);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.ms-cal-pill.is-live{border-left-color:var(--accent-fill)}
.ms-cal-pill--top{border-left-color:var(--accent,#e5202d)}
.ms-cal-pill--national{border-left-color:var(--accent2,#3d8fd9)}
.ms-cal-pill--regional{border-left-color:#c45c12}
.ms-cal-pill--youth{border-left-color:#8b2fc9}
.ms-cal-pill--other{border-left-color:#71717a}
@media(min-width:1100px){
.ms-cal-cell{min-height:96px}
.ms-cal-pill{display:block}
.ms-cal-dots{display:none}
}
.ms-cal-legend{
display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;
margin-top:16px;padding-top:14px;
border-top:1px solid rgba(255,255,255,.08);
}
.ms-cal-legend-hint{
flex:1 0 100%;margin:0 0 2px;
font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--muted);
}
.ms-cal-legend-item{
--hero-play-angle:0deg;
position:relative;isolation:isolate;z-index:0;overflow:visible;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:40px;padding:8px 14px;box-sizing:border-box;
border:2px solid transparent;border-radius:999px;
background:transparent;color:#0b0b0c;
font:inherit;font-weight:700;font-size:.82rem;line-height:1.2;
cursor:pointer;
box-shadow:0 0 0 1px rgba(255,255,255,.22);
transition:opacity .2s,color .2s,box-shadow .2s;
}
.ms-cal-legend-item::before{
content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-2;
background:conic-gradient(
from var(--hero-play-angle),
transparent 0deg,
transparent 250deg,
rgba(229,32,45,.15) 280deg,
var(--accent) 318deg,
#ff4654 338deg,
#fff 352deg,
transparent 360deg
);
animation:hero-play-orbit 2.2s linear infinite;
opacity:0;transition:opacity .2s;
}
.ms-cal-legend-item::after{
content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
background:#fff;transition:background-color .2s;
}
.ms-cal-legend-item.is-on::before{opacity:1}
.ms-cal-legend-item.is-on:hover::after{background:#f4f4f5}
.ms-cal-legend-item:not(.is-on){
color:rgba(228,228,231,.78);
box-shadow:0 0 0 1px rgba(255,255,255,.32);
}
.ms-cal-legend-item:not(.is-on)::before{animation:none;opacity:0}
.ms-cal-legend-item:not(.is-on)::after{background:transparent}
.ms-cal-legend-item:not(.is-on):hover{color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.ms-cal-legend-item:not(.is-on) .ms-cal-legend-swatch{filter:grayscale(.7);opacity:.75}
.ms-cal-legend-swatch{
width:10px;height:10px;flex:none;
border:2px solid rgba(11,11,12,.2);box-shadow:none !important;
}
.ms-cal-legend-item.is-on .ms-cal-legend-swatch{border-color:rgba(11,11,12,.15)}
.ms-cal-legend-swatch--live{
background:transparent !important;
border-color:var(--accent-fill);
box-shadow:0 0 0 2px rgba(229,32,45,.22) !important;
}
.ms-cal-legend-item.is-on .ms-cal-legend-swatch--live{
border-color:var(--accent-fill);
}
.ms-cal-legend-item--live.is-on{
color:#0b0b0c;
}
.ms-cal-legend-item--live.is-on::before{
background:conic-gradient(
from var(--hero-play-angle),
transparent 0deg,
transparent 250deg,
rgba(229,32,45,.2) 280deg,
var(--accent-fill) 318deg,
#ff5c68 338deg,
#fff 352deg,
transparent 360deg
);
}
.ms-cal-legend-count{
margin-left:2px;min-width:1.35em;text-align:center;
font-size:.72rem;font-weight:800;
border-radius:999px;padding:2px 7px;
background:rgba(11,11,12,.08);color:rgba(11,11,12,.65);
}
.ms-cal-legend-item:not(.is-on) .ms-cal-legend-count{
background:rgba(255,255,255,.08);color:rgba(228,228,231,.65);
}
@media(prefers-reduced-motion:reduce){
.ms-cal-legend-item.is-on::before{animation:none;background:var(--accent-fill);opacity:1}
.ms-cal-legend-item--live.is-on::before{background:var(--accent-fill)}
.ms-cal-nav:hover,.ms-cal-cell:hover{transform:none}
}
.ms-cal-side{
display:flex;flex-direction:column;
padding:18px 18px 16px;
border-radius:16px;
background:
linear-gradient(180deg,rgba(255,255,255,.04),transparent 30%),
rgba(14,14,15,.72);
border:1px solid rgba(255,255,255,.08);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
min-height:300px;
}
.ms-cal-side-title{
margin:0 0 16px;font-size:1.12rem;letter-spacing:-.3px;font-weight:800;
}
.ms-cal-day-list{flex:1}
.ms-cal-day-list:empty,
.ms-cal-empty.is-hidden{display:none}
.ms-cal-empty{
color:var(--muted);font-weight:600;margin:auto 0;padding:28px 8px;
text-align:center;line-height:1.45;
}
.ms-cal-side .sport-schedule{gap:8px}
.ms-cal-side .sport-schedule-item{
display:flex;flex-direction:column;gap:0;
padding:0;border-bottom:0;border-radius:12px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.06);
overflow:hidden;
transition:background-color .18s,border-color .18s;
}
.ms-cal-side .sport-schedule-item:hover{
background:rgba(255,255,255,.055);
border-color:rgba(255,255,255,.12);
}
.ms-cal-side .sport-schedule-item.is-live{
border-color:rgba(229,32,45,.35);
background:linear-gradient(90deg,rgba(229,32,45,.12),rgba(255,255,255,.03) 55%);
}
.ms-cal-side .sport-schedule-cover{
width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
background:var(--bg);
}
.ms-cal-side .sport-schedule-row{
display:grid;grid-template-columns:64px minmax(0,1fr) auto;
gap:12px;align-items:start;
padding:12px 12px 12px 10px;
}
.ms-cal-side .sport-schedule-day{font-size:1.55rem}
.ms-cal-side .sport-schedule-more{
display:inline-flex;align-self:flex-start;margin-top:6px;
font-size:.78rem;font-weight:800;letter-spacing:.02em;
color:#fff;background:rgba(229,32,45,.92);
padding:6px 12px;border-radius:999px;
transition:background-color .18s,transform .18s;
}
.ms-cal-side .sport-schedule-more:hover{
background:var(--accent-fill);transform:translateY(-1px);
}
.ms-cal-side .sport-schedule-item.is-live .sport-schedule-more{
background:rgba(229,32,45,.92);
}
.ms-cal-side .sport-schedule-item.is-live .sport-schedule-more:hover{
background:var(--accent-fill);
}
.ms-cal-gcal-link{margin:14px 0 0;font-size:.9rem;font-weight:600}
@media(max-width:900px){
.ms-cal{grid-template-columns:1fr;padding:14px}
.ms-cal-side{
min-height:0;padding:14px;
}
.ms-cal-cell{min-height:58px;padding:6px}
.ms-cal-legend{gap:8px 10px}
}
/* ŽEBŘÍČEK SOUTĚŽÍ — pyramida pod mapou */
.liga-ladder{
margin-top:clamp(32px,4.4vw,56px);
padding-top:0;
border-top:0;
}
.liga-ladder-title{
margin:0 0 6px;
font-size:clamp(1.5rem,2.6vw,2rem);
font-weight:800;
letter-spacing:-.035em;
}
.liga-ladder .sec-head{margin-bottom:22px}
/* Žebříček: jeden levý sloupec rovných řádků (dřív se zužující pyramida
s tmavými kartami). Pořadí nese velké číslo, tenká kolejnice mezi čísly
ukazuje, že úrovně na sebe navazují. */
.liga-ladder-pyramid{
position:relative;
display:flex;flex-direction:column;
gap:10px;
width:100%;max-width:880px;margin:0;
}
.liga-ladder-tier{
position:relative;
width:100%;
}
.liga-ladder-tier--join::before{
content:"";
position:absolute;
left:calc(14px + 1.7rem - 1px);
top:100%;
width:2px;height:10px;
background:rgba(255,255,255,.18);
}
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
.liga-ladder-tier{
opacity:0;transform:translateY(16px);
transition:opacity .45s ease-out var(--delay,0ms), transform .95s var(--ms-spring) var(--delay,0ms);
}
.liga-ladder-tier.is-in{opacity:1;transform:none}
}
.liga-ladder-btn{
display:grid;grid-template-columns:3.4rem minmax(0,1fr) auto;
align-items:center;column-gap:16px;width:100%;
padding:16px 22px 16px 14px;text-align:left;cursor:pointer;
color:#fff;background:var(--surface);
border:0;border-radius:var(--radius);
transition:background-color .18s ease, transform .45s var(--ms-spring), box-shadow .18s ease;
}
.liga-ladder-btn:hover,
.liga-ladder-btn:focus-visible{
background:var(--surface-raised);
transform:scale(1.012);
}
/* Vybraný stupeň = plná červená, stejně jako vybraný sport v liště. */
.liga-ladder-btn.is-on,
.liga-ladder-btn.is-on:hover,
.liga-ladder-btn.is-on:focus-visible{
background:var(--accent-fill);
}
/* Najetí na klub na mapě podsvítí jeho stupeň tenkým obrysem. */
.liga-ladder-btn.is-active:not(.is-on){
box-shadow:inset 0 0 0 1.5px rgba(255,70,84,.55);
}
.liga-ladder-rank{
display:block;
width:auto;height:auto;border-radius:0;box-shadow:none;background:none;
font-size:2.4rem;font-weight:800;line-height:1;letter-spacing:-.05em;
text-align:center;color:rgba(255,255,255,.3);
font-variant-numeric:tabular-nums;
}
/* :first-child, ne atribut style — JS do style dopisuje --delay a text se přepíše. */
.liga-ladder-tier:first-child .liga-ladder-rank{color:var(--accent-bright)}
.liga-ladder-btn.is-on .liga-ladder-rank{color:#fff}
.liga-ladder-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.liga-ladder-name{
font-size:1.12rem;font-weight:800;letter-spacing:-.025em;line-height:1.2;
}
.liga-ladder-blurb{
font-size:.9rem;color:var(--muted);line-height:1.4;
}
.liga-ladder-btn.is-on .liga-ladder-blurb{color:#fff}
.liga-ladder-meta{
display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1;
}
.liga-ladder-count{
font-size:1.8rem;font-weight:800;letter-spacing:-.04em;color:var(--accent-bright);
font-variant-numeric:tabular-nums;
}
.liga-ladder-count-label{
font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.liga-ladder-btn.is-on .liga-ladder-count,
.liga-ladder-btn.is-on .liga-ladder-count-label{color:#fff}
.liga-ladder-legend{
display:flex;gap:18px;
margin:16px 0 0;max-width:880px;
font-size:.82rem;font-weight:700;color:var(--muted);
}
.liga-ladder-hint{
margin:6px 0 0;max-width:880px;text-align:left;
font-size:.88rem;font-weight:600;color:var(--muted);
}
@media(max-width:640px){
.liga-ladder-btn{grid-template-columns:2.6rem minmax(0,1fr) auto;column-gap:12px;padding:14px 16px 14px 10px}
.liga-ladder-tier--join::before{left:calc(10px + 1.3rem - 1px)}
.liga-ladder-rank{font-size:1.9rem}
.liga-ladder-count{font-size:1.45rem}
}
@media (prefers-reduced-motion:reduce){
.liga-ladder-btn{transition:none}
.liga-ladder-btn:hover,.liga-ladder-btn:focus-visible{transform:none}
}
.map-pin.is-dim{opacity:.16;filter:grayscale(1);transition:opacity .3s,filter .3s}
/* Vybraný stupeň: neutrální bílý prstenec, barva tečky zůstává podle typu. */
.map-pin.is-tier-on .map-pin-dot{
box-shadow:0 0 0 3px #fff,0 0 0 7px rgba(255,255,255,.28),0 4px 14px rgba(0,0,0,.5);
transform:scale(1.2);
}
.map-pin.is-tier-on{z-index:900 !important}
@media (prefers-reduced-motion: reduce){
.liga-ladder-tier{opacity:1;transform:none;transition:none}
}
/* MAPA — mapa 2/3 + panel 1/3, legenda pod mapou */
.map-layout{
display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
gap:clamp(16px,2.5vw,28px);align-items:stretch;width:100%;max-width:none;
}
.map-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.map-canvas{
width:100%;min-height:360px;height:min(58vh,520px);
border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
background:var(--surface);border:1px solid var(--border);
z-index:0;
}
.map-legend{
display:flex;flex-wrap:wrap;gap:12px;align-items:center;
}
.map-legend-item{
--hero-play-angle:0deg;
position:relative;isolation:isolate;z-index:0;overflow:visible;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:44px;padding:10px 18px;box-sizing:border-box;
border:2px solid transparent;border-radius:999px;
background:transparent;color:#0b0b0c;
font:inherit;font-weight:700;font-size:.9rem;line-height:1.2;
cursor:pointer;
box-shadow:0 0 0 1px rgba(255,255,255,.22);
transition:opacity .2s,color .2s,box-shadow .2s;
}
.map-legend-item::before{
content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-2;
background:conic-gradient(
from var(--hero-play-angle),
transparent 0deg,
transparent 250deg,
rgba(229,32,45,.15) 280deg,
var(--accent) 318deg,
#ff4654 338deg,
#fff 352deg,
transparent 360deg
);
animation:hero-play-orbit 2.2s linear infinite;
opacity:0;transition:opacity .2s;
}
.map-legend-item::after{
content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
background:#fff;transition:background-color .2s;
}
.map-legend-item.is-on::before{opacity:1}
.map-legend-item.is-on:hover::after{background:#f4f4f5}
.map-legend-item:not(.is-on){
color:rgba(228,228,231,.78);
box-shadow:0 0 0 1px rgba(255,255,255,.32);
}
.map-legend-item:not(.is-on)::before{animation:none;opacity:0}
.map-legend-item:not(.is-on)::after{background:transparent}
.map-legend-item:not(.is-on):hover{color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.map-legend-item:not(.is-on) .map-legend-swatch{filter:grayscale(.7);opacity:.75}
.map-legend-swatch{
width:10px;height:10px;border-radius:50%;flex:none;
border:2px solid rgba(11,11,12,.2);box-shadow:none;
}
.map-legend-item.is-on .map-legend-swatch{border-color:rgba(11,11,12,.15)}
.map-legend-swatch--stadium{background:var(--accent-fill)}
.map-legend-swatch--club{background:var(--accent2)}
.map-legend-count{
margin-left:2px;min-width:1.35em;text-align:center;
font-size:.78rem;font-weight:800;
border-radius:999px;padding:2px 7px;
background:rgba(11,11,12,.08);color:rgba(11,11,12,.65);
}
.map-legend-item:not(.is-on) .map-legend-count{
background:rgba(255,255,255,.08);color:rgba(228,228,231,.65);
}
@media(prefers-reduced-motion:reduce){
.map-legend-item.is-on::before{animation:none;background:var(--accent-fill);opacity:1}
}
.map-panel{
background:transparent;border:0;border-radius:0;
box-shadow:none;padding:clamp(4px,1vw,8px) 0;
min-height:360px;
display:flex;flex-direction:column;justify-content:flex-start;
width:100%;box-sizing:border-box;
}
.map-panel-hint{margin:0;color:var(--muted);font-weight:600;font-size:.95rem}
.map-panel-body{
flex:1;min-height:0;
display:flex;flex-direction:column;
opacity:0;
transform:translateY(10px);
transition:opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1);
}
.map-panel-body.is-in{opacity:1;transform:none}
.map-panel-main{flex:1 1 auto;min-width:0}
.map-panel-head{display:flex;align-items:flex-start;gap:14px;margin:0 0 14px}
.map-panel-logo-wrap{
flex:none;width:72px;height:72px;border-radius:var(--radius-squircle);corner-shape:squircle;overflow:hidden;
background:var(--bg-soft);
border:1px solid var(--border);
box-shadow:none;
}
.map-panel-logo-wrap.has-photo{background:#f4f4f5}
.map-panel-logo-wrap.has-venue{
width:112px;height:84px;background:#141415;
}
.map-panel-logo{
display:block;width:100%;height:100%;object-fit:cover;
background:transparent;padding:0;box-sizing:border-box;
}
.map-panel-logo-wrap.has-photo .map-panel-logo{
object-fit:contain;padding:8px;background:#f4f4f5;
}
.map-panel-logo-wrap.has-venue .map-panel-logo{
object-fit:cover;padding:0;background:transparent;
}
.map-panel-head-text{min-width:0;flex:1}
.map-panel-title{font-size:1.35rem;letter-spacing:-.035em;margin:0 0 6px;color:#fff;line-height:1.15}
.map-panel-address{margin:0;color:var(--muted);font-size:.9rem;line-height:1.4}
.map-panel-liga{
margin:0 0 12px;
font-size:.98rem;line-height:1.4;
color:rgba(228,228,231,.9);
}
.map-panel-label{
color:var(--muted);font-weight:600;margin-right:.35em;
}
.map-panel-lead{
margin:0;
color:rgba(228,228,231,.86);
font-size:1.02rem;line-height:1.55;
max-width:36rem;
}
.map-panel-links{
display:flex;flex-direction:column;align-items:flex-start;gap:8px;
margin-top:auto;padding-top:22px;
}
.map-panel-web,.map-panel-phone{
display:inline-flex;align-items:center;gap:6px;width:fit-content;
font-weight:700;font-size:.9rem;color:var(--accent-bright);transition:color .2s;
}
.map-panel-web:hover,.map-panel-phone:hover{color:#ff4654}
@media (prefers-reduced-motion:reduce){
.map-panel-body{opacity:1;transform:none;transition:none}
}
.map-pin{background:transparent;border:0}
.map-pin-dot{
display:block;width:16px;height:16px;margin:3px;border-radius:50%;
background:var(--accent-fill);border:2px solid #fff;
box-shadow:0 2px 10px rgba(0,0,0,.45),0 0 0 4px rgba(229,32,45,.28);
transition:transform .2s,box-shadow .2s;
}
.map-pin--club .map-pin-dot{
background:var(--accent2);
box-shadow:0 2px 10px rgba(0,0,0,.45),0 0 0 4px rgba(18,115,212,.28);
}
.map-pin.is-active .map-pin-dot,
.map-pin:hover .map-pin-dot{
transform:scale(1.18);
box-shadow:0 2px 12px rgba(0,0,0,.5),0 0 0 6px rgba(229,32,45,.35);
}
.map-pin--club.is-active .map-pin-dot,
.map-pin--club:hover .map-pin-dot{
box-shadow:0 2px 12px rgba(0,0,0,.5),0 0 0 6px rgba(18,115,212,.35);
}
.leaflet-container{font:inherit;background:#141415}
@media(max-width:860px){
.map-layout{grid-template-columns:1fr;gap:16px}
.map-canvas{height:300px;min-height:260px}
.map-panel{min-height:0;padding:clamp(14px,2vw,18px)}
}
/* SPORT WIDGETS — channel rail */
/* —— Objevuj malé sporty (manifesto band) —— */
/* .ms-discover — viz „Objevuj + Natočíme“ na konci souboru */
.sports-band{background:transparent;overflow:visible}
/* First fold: míče hned vidět pod hero */
.sports-band--peek{
padding:4px 0 8px;
margin-top:-4px;
}
.sports-band--peek .sec-head{
margin-bottom:2px;
}
.sports-band--peek .sec-head h2{
font-size:clamp(1rem, 2vw, 1.15rem);
letter-spacing:.04em;
text-transform:uppercase;
color:var(--muted);
font-weight:600;
}
.sports-band--peek .channel-rail--sports{
padding-top:0;
padding-bottom:8px;
}
.sports-band .channel--ball{
opacity:0;
transform:translateY(18px);
transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
.sports-band.is-in .channel--ball{opacity:1;transform:none}
.sports-band.is-in .channel--ball:nth-child(1){transition-delay:.04s}
.sports-band.is-in .channel--ball:nth-child(2){transition-delay:.1s}
.sports-band.is-in .channel--ball:nth-child(3){transition-delay:.16s}
.sports-band.is-in .channel--ball:nth-child(4){transition-delay:.22s}
.sports-band.is-in .channel--ball:nth-child(5){transition-delay:.28s}
.sports-band.is-in .channel--ball:nth-child(6){transition-delay:.34s}
@media (hover:hover) and (pointer:fine){
.sports-band.is-in .channel--ball{
transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1);
}
.sports-band.is-in .channel--ball:hover{transform:translateY(-8px)}
}
@media (prefers-reduced-motion:reduce){
.sports-band .channel--ball{opacity:1;transform:none;transition:none}
.sports-band.is-in .channel--ball:hover{transform:none}
}
.zapasy--peek{padding-top:20px;padding-bottom:40px}
.zapasy--peek .sec-head{margin-bottom:14px}
/* —— Homepage: dnešní zápasy (horizontální rail) —— */
.ms-upcoming{padding:20px 0 28px;overflow:hidden}
.ms-upcoming .sec-head{margin-bottom:10px}
.ms-upcoming-rail{
display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
padding:6px var(--page-pad) 18px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.ms-upcoming-rail::-webkit-scrollbar{height:8px}
.ms-upcoming-rail::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:8px}
.ms-upcoming-card{
position:relative;flex:0 0 clamp(240px,28vw,320px);scroll-snap-align:start;
display:flex;flex-direction:column;gap:12px;
color:inherit;text-decoration:none;text-align:left;
background:transparent;border:0;padding:0;cursor:pointer;font:inherit;
transition:transform .3s cubic-bezier(.22,1,.36,1);
}
#zapasy .ms-upcoming-card{
opacity:0;
transform:translateY(16px);
transition:opacity .48s cubic-bezier(.22,1,.36,1), transform .48s cubic-bezier(.22,1,.36,1);
}
#zapasy.is-in .ms-upcoming-card{opacity:1;transform:none}
#zapasy.is-in .ms-upcoming-card:nth-child(1){transition-delay:.04s}
#zapasy.is-in .ms-upcoming-card:nth-child(2){transition-delay:.1s}
#zapasy.is-in .ms-upcoming-card:nth-child(3){transition-delay:.16s}
#zapasy.is-in .ms-upcoming-card:nth-child(4){transition-delay:.22s}
#zapasy.is-in .ms-upcoming-card:nth-child(5){transition-delay:.28s}
#zapasy.is-in .ms-upcoming-card:nth-child(6){transition-delay:.34s}
button.ms-upcoming-card{appearance:none;-webkit-appearance:none}
@media (hover:hover) and (pointer:fine){
#zapasy.is-in .ms-upcoming-card{
transition:opacity .48s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1);
}
#zapasy.is-in .ms-upcoming-card:hover,
#zapasy.is-in .ms-upcoming-card:focus-visible{transform:translateY(-5px)}
}
.ms-upcoming-media{
position:relative;display:block;aspect-ratio:16/10;border-radius:16px;overflow:hidden;
background:#161617;box-shadow:var(--shadow);
}
.ms-upcoming-media img{
display:block;width:100%;height:100%;object-fit:cover;
transform:scale(1.02);transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.ms-upcoming-card:hover .ms-upcoming-media img,
.ms-upcoming-card:focus-visible .ms-upcoming-media img{transform:scale(1.1)}
.ms-upcoming-fallback{
width:56px!important;height:56px!important;margin:auto;object-fit:contain!important;
position:absolute;inset:0;opacity:.85;transform:none!important;
}
.ms-upcoming-shade{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(11,11,12,.05) 30%,rgba(11,11,12,.78) 100%);
pointer-events:none;
}
.ms-upcoming-when{
position:absolute;left:12px;bottom:12px;z-index:1;
display:flex;flex-direction:column;gap:2px;line-height:1.1;
}
.ms-upcoming-day{
font-size:.95rem;font-weight:700;letter-spacing:.02em;color:#fff;text-transform:uppercase;
}
.ms-upcoming-clock{
font-size:1.15rem;font-weight:700;color:#fff;
}
.ms-upcoming-card.is-live .ms-upcoming-clock{color:#b8f0d0}
.ms-upcoming-live{
position:absolute;top:12px;left:12px;z-index:1;
display:inline-flex;align-items:center;gap:6px;
font-size:.7rem;font-weight:800;letter-spacing:.08em;
color:#fff;background:var(--accent-fill);padding:6px 10px;border-radius:999px;
}
.ms-upcoming-live::before{
content:"";width:6px;height:6px;border-radius:50%;background:#fff;
animation:ms-upcoming-pulse 1.4s ease-out infinite;
}
@keyframes ms-upcoming-pulse{
0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}
70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}
100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@media (prefers-reduced-motion:reduce){
.ms-upcoming-live::before{animation:none}
#zapasy .ms-upcoming-card{opacity:1;transform:none;transition:none}
#zapasy.is-in .ms-upcoming-card:hover,
#zapasy.is-in .ms-upcoming-card:focus-visible{transform:none}
}
.ms-upcoming-info{display:flex;flex-direction:column;gap:3px;min-width:0;padding:0 2px}
.ms-upcoming-sport{
font-size:.78rem;font-weight:600;color:rgba(228,228,231,.55);letter-spacing:.02em;
}
.ms-upcoming-teams{
font-size:1.05rem;font-weight:700;color:#fff;letter-spacing:-.01em;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ms-upcoming-comp{
font-size:.82rem;color:var(--muted);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ms-upcoming-empty{
margin:0;padding:8px var(--page-pad);color:var(--muted);font-weight:600;
}
@media(max-width:640px){
.ms-upcoming-card{flex-basis:clamp(220px,72vw,280px)}
.ms-upcoming-teams{font-size:.98rem}
}
.sec-hint{margin-left:auto;text-align:right;flex-shrink:0;font-size:.8rem;color:var(--muted);font-weight:600}
.rail-wrap{position:relative}
.channel-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px var(--page-pad) 18px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.channel-rail::-webkit-scrollbar{height:8px}
.channel-rail::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:8px}
/* Sporty: rozprostřít k okrajům, bez „karet“ */
.channel-rail--sports{
justify-content:space-evenly;
align-items:stretch;
gap:0;
overflow:visible;
scroll-snap-type:none;
padding:8px var(--page-pad) 16px;
}
.channel{position:relative;flex:0 0 clamp(220px,26vw,300px);scroll-snap-align:start;color:var(--ink)}
.channel-rail--sports .channel--ball{
flex:1 1 0;
min-width:0;
max-width:280px;
scroll-snap-align:none;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
overflow:visible;
}
.channel-thumb-wrap{position:relative;display:block;width:100%;aspect-ratio:16/10;isolation:isolate}
.channel--ball .channel-thumb-wrap{
aspect-ratio:1/1;
width:var(--ms-ball-size);
max-width:var(--ms-ball-size);
margin:0 auto;
overflow:visible;
}
.channel-thumb{position:absolute;inset:0;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:linear-gradient(135deg,var(--accent),#b81a25)}
.channel-thumb--ball{
border-radius:0;
overflow:visible;
box-shadow:none;
background:transparent;
}
.sport-rail-ball{
position:absolute;inset:0;
pointer-events:none;z-index:1;
overflow:visible;
transition:transform .35s ease;
}
/* Stín jako samostatná elipsa pod míčem (ne drop-shadow na obalu).
Filtr na obalu se v přechodu ztratil: míč letí jako zvláštní vrstva, obal
zůstal prázdný, takže za letu stín chyběl a po dosednutí naskočil. Elipsa
se dá řídit zvlášť — v řadě zůstane pod dlaždicí a zhasne se starou
stránkou (míč se od ní odlepí), v hero naběhne, až míč dosedne.
Stejný tvar a barva v řadě i v hero, aby si byly rovné. */
.sport-rail-ball::after,
.sport-hero-ball::after{
content:"";
position:absolute;
z-index:0;
left:14%;right:14%;
/* Míč vyplňuje skoro celé plátno, takže elipsa uvnitř by byla celá za ním.
Posazená je pod dolní hranu, ať vykukuje zpod koule. */
bottom:-9%;
height:15%;
border-radius:50%;
background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.6) 0%, rgba(0,0,0,.34) 42%, transparent 72%);
filter:blur(5px);
pointer-events:none;
transition:opacity .35s ease;
}
.sport-rail-ball .sport-ball-vt{z-index:1}
/* VT target = čistý canvas (brand barvy z WebGL, bez CSS tintu) */
.sport-ball-vt{
position:absolute;inset:0;
width:100%;height:100%;
transform-origin:center center;
}
.sport-ball-vt canvas{
display:block;width:100%!important;height:100%!important;
}
.channel--ball:hover .sport-rail-ball{
transform:scale(1.08);
}
/* Capture: shell jen layout — snapshot = brand canvas 1:1 */
.sport-rail-ball.is-vt-capture{
transition:none !important;
transform:none !important;
}
.sport-ball-vt.is-vt-capture{
transition:none !important;
}
.channel-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s}
.channel:hover .channel-bg{transform:scale(1.08)}
.channel-badge{position:absolute;top:12px;left:12px;z-index:2;display:flex;align-items:center;gap:6px;background:var(--accent-fill);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.08em;padding:4px 9px;border-radius:var(--radius-chip);corner-shape:squircle}
.channel-badge i{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.channel-play{
position:absolute;top:50%;left:50%;z-index:3;
transform:translate(-50%,-50%) scale(1);
width:54px;height:54px;border-radius:var(--radius-squircle);corner-shape:squircle;
color:#0b0b0c;display:grid;place-items:center;font-size:1.2rem;padding-left:3px;
background:transparent;isolation:isolate;overflow:visible;
opacity:1;transition:opacity .25s,transform .25s;pointer-events:none;
}
.channel-play::before,.rec-play::before{
content:"";
position:absolute;
inset:-3px;
border-radius:inherit;
corner-shape:inherit;
z-index:-2;
background:conic-gradient(
from var(--hero-play-angle),
transparent 0deg,
transparent 250deg,
rgba(229,32,45,.15) 280deg,
var(--accent) 318deg,
#ff4654 338deg,
#fff 352deg,
transparent 360deg
);
animation:hero-play-orbit 2.2s linear infinite;
}
.channel-play::after,.rec-play::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
corner-shape:inherit;
z-index:-1;
background:rgba(255,255,255,.96);
box-shadow:0 6px 20px rgba(0,0,0,.28);
transition:background-color .2s,transform .2s;
}
@media(hover:hover) and (pointer:fine){
.channel-play{transform:translate(-50%,-50%) scale(.9)}
.channel:hover .channel-play{transform:translate(-50%,-50%) scale(1)}
}
@media(prefers-reduced-motion:reduce){
.channel-play::before,.rec-play::before{animation:none;background:var(--accent-fill)}
}
.channel-info{display:flex;align-items:center;gap:10px;padding:12px 4px 2px}
.channel-info--ball{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:100%;
padding:10px 0 0;
text-align:center;
}
.channel-emoji{font-size:1.6rem;line-height:1;flex:none}
.channel-info h3{font-size:1.05rem;letter-spacing:-.3px;transition:color .2s}
.channel-sport-name{
display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
margin:0;font-size:1.1rem;font-weight:700;line-height:1.2;
color:inherit;background:transparent;
transition:color .25s ease;
}
.channel--ball .channel-sport-name{
position:relative;
padding-bottom:8px;
}
.channel--ball .channel-sport-name::after{
content:"";
position:absolute;left:50%;bottom:0;
width:0;height:2px;
border-radius:2px;
background:var(--accent-fill);
transform:translateX(-50%);
transition:width .32s cubic-bezier(.22,1,.36,1);
}
.channel--ball:hover .channel-sport-name::after{width:2rem}
.channel-live-word{
display:inline-flex;align-items:center;gap:6px;
font-size:.68em;
font-weight:700;
letter-spacing:.04em;
color:#fff;
background:var(--accent-fill);
padding:6px 12px;
min-height:28px;
border-radius:999px;
}
.channel-live-word i{
width:6px;height:6px;border-radius:50%;flex:none;
background:#fff;
box-shadow:0 0 0 0 rgba(255,255,255,.5);
animation:channel-live-pulse 1.4s ease-out infinite;
}
@keyframes channel-live-pulse{
0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}
70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}
100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@media (prefers-reduced-motion:reduce){
.channel-live-word i{animation:none}
}
.channel:hover .channel-sport-name{color:var(--accent-bright)}
.channel:hover .channel-live-word{color:#fff;filter:brightness(1.06)}
.channel-info small{display:block;color:var(--muted);font-weight:600;font-size:.74rem;margin-top:2px}
@media(max-width:640px){
.channel-rail--sports{
justify-content:flex-start;
gap:8px;
overflow-x:auto;
scroll-snap-type:x mandatory;
}
.channel-rail--sports .channel--ball{
flex:0 0 clamp(140px,42vw,200px);
max-width:none;
scroll-snap-align:start;
}
}
.rail-arrow{position:absolute;top:calc(50% - 6px);transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:var(--radius-squircle);corner-shape:squircle;background:var(--surface-raised);box-shadow:var(--shadow);color:var(--ink);font-size:1.5rem;line-height:1;display:grid;place-items:center;transition:transform .2s,color .2s}
.rail-arrow:hover{transform:translateY(-50%) scale(1.08);color:var(--accent-bright)}
.rail-arrow.prev{left:8px}
.rail-arrow.next{right:8px}
.rail-arrow[hidden]{display:none!important}
.ms-rail-hint[hidden]{display:none!important}
@media(max-width:640px){.rail-arrow{display:none}}
/* MATCH WIDGETS */
.mw{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.mw-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border-soft);font-weight:800}
.mw-head .emoji{font-size:1.3rem}
.mw-head a{margin-left:auto;font-size:.8rem;color:var(--accent-bright);font-weight:700}
.mw ul{list-style:none}
.mw li{display:grid;grid-template-columns:74px 1fr;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border-soft);align-items:center}
.mw li:last-child{border-bottom:none}
.mw .d{font-weight:800;color:var(--accent-bright);font-size:.85rem}
.mw .d small{display:block;color:var(--muted);font-weight:600}
.mw .m{font-weight:600;font-size:.92rem}
.mw .m small{display:block;color:var(--muted);font-weight:500;font-size:.78rem}
.mw li.live .d{color:var(--accent-bright)}
/* UPCOMING MATCHES — sport rows (full-bleed) */
.sport-rows{display:flex;flex-wrap:wrap;justify-content:center;gap:0;padding:0 var(--page-pad);--sport-pad:var(--page-pad);--line-inset-x:28px;--line-inset-y:24px;width:100%;margin:0}
.sport-row{
display:flex;flex-direction:column;align-items:center;gap:16px;
width:100%;box-sizing:border-box;
background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;
overflow:visible;
}
.sport-row:not(:last-child){
padding-bottom:32px;
position:relative;
}
.sport-row:not(:last-child)::after{
content:'';display:block;position:absolute;left:calc(-1 * var(--sport-pad) + var(--line-inset-x));right:calc(-1 * var(--sport-pad) + var(--line-inset-x));bottom:0;
height:1px;background:var(--divider);
}
.sr-head{
display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;
gap:10px 12px;width:100%;max-width:400px;margin:0 auto;min-height:44px;flex:none;box-sizing:border-box;
}
.sr-title-row{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:8px 10px;min-width:0}
.sr-icon{width:44px;height:44px;object-fit:contain;display:block;flex:none}
.sr-name{font-weight:800;font-size:1.4rem;letter-spacing:-.3px;margin:0;line-height:1.1;white-space:nowrap;flex:none}
.sr-link{font-size:.82rem;color:var(--accent-bright);font-weight:700;white-space:nowrap;flex:none}
.sr-matches{display:flex;flex-wrap:nowrap;gap:18px;align-items:center;justify-content:center;width:100%}
@media(max-width:640px){
.sport-row{gap:12px}
.mimg-lg{width:100%;flex:none;max-width:100%}
.sport-rows{padding:0 16px;--sport-pad:16px}
.sport-row:not(:last-child){padding-bottom:24px}
.sec-head-inset{padding-left:16px;padding-right:16px}
section{padding:36px 0;scroll-margin-top:68px}
}
@media(min-width:1100px){
.sport-rows{
display:grid;
grid-template-columns:1fr 1fr;
column-gap:0;
row-gap:0;
align-items:stretch;
--line-inset-x:10%;
--line-inset-y:32px;
}
.sport-row{align-items:center}
.sport-row:not(:last-child){padding-bottom:40px}
.sport-row:not(:last-child)::after{display:none}
.sport-row:nth-child(odd){border-right:0;padding-right:24px;position:relative}
.sport-row:nth-child(odd)::before{
content:'';position:absolute;top:var(--line-inset-y);bottom:var(--line-inset-y);right:0;width:1px;background:var(--divider);pointer-events:none;
}
.sport-row:nth-child(even){padding-left:24px;position:relative}
.sport-row:nth-child(odd):not(:nth-last-child(1))::after,
.sport-row:nth-child(even):not(:nth-last-child(-n+2))::after{
display:block;content:'';position:absolute;bottom:0;height:1px;background:var(--divider);
}
.sport-row:nth-child(odd):not(:nth-last-child(1))::after{left:var(--line-inset-x);right:0}
.sport-row:nth-child(even):not(:nth-last-child(-n+2))::after{left:0;right:var(--line-inset-x)}
.sport-row:nth-child(n+3){padding-top:40px}
.sport-row:last-child:nth-child(odd){padding-right:0}
.sport-row:last-child:nth-child(odd)::before{display:none}
}
.sport-rows--pair .sport-row::before,
.sport-rows--pair .sport-row::after{display:none!important}
.sport-rows--pair .sport-row:not(:last-child){padding-bottom:0}
.sport-rows--trio .sport-row:not(:last-child)::after{
left:50%;
right:auto;
width:min(400px,100%);
transform:translateX(-50%);
}
@media(min-width:1100px){
.sport-rows--pair .sport-row:nth-child(odd){padding-right:24px}
.sport-rows--pair .sport-row:nth-child(even){padding-left:24px;padding-right:0}
.sport-rows--pair .sport-row:nth-child(n+3){padding-top:0}
.sport-rows--trio{
grid-template-columns:repeat(3,minmax(0,1fr));
grid-template-rows:auto auto auto;
row-gap:16px;
align-items:stretch;
}
.sport-rows--trio .sport-row::before{display:none!important}
.sport-rows--trio .sport-row::after{display:none!important}
.sport-rows--trio .sport-row:not(:last-child){padding-bottom:0}
.sport-rows--trio .sport-row{
display:grid;
grid-template-rows:subgrid;
grid-row:span 3;
grid-template-columns:minmax(0,1fr);
justify-items:center;
align-items:start;
gap:0;
row-gap:0;
padding:0 16px;
position:relative;
}
.sport-rows--trio .mc-viewport{position:relative}
.sport-rows--trio .sport-row:not(:last-child) .mc-viewport::after{
content:'';
position:absolute;
top:0;
left:auto;
right:-16px;
bottom:auto;
width:1px;
height:100%;
background:var(--divider);
pointer-events:none;
}
.sport-rows--trio .sport-row:first-child,
.sport-rows--trio .sport-row:last-child{padding-left:16px;padding-right:16px}
.sport-rows--trio .sport-row:nth-child(n+3){padding-top:0}
.sport-rows--trio .match-carousel,
.sport-rows--trio .mc-dates,
.sport-rows--trio .sr-head{width:100%;max-width:400px}
.sport-rows--trio .mc-dates{margin-top:0;height:52px}
}
.sr-matches.match-carousel{flex-direction:column;align-items:center;gap:0;width:100%;overflow:hidden}
.match-carousel{
--mc-gap:0;
--mc-lg:100%;
position:relative;
width:100%;
max-width:400px;
margin:0 auto;
display:flex;flex-direction:column;
}
.mc-viewport{overflow:hidden;width:100%;position:relative}
.mc-stage{
position:relative;
width:100%;
aspect-ratio:2/3;
}
.mc-tile.mimg{
display:block;position:absolute;inset:0;width:100%;height:100%;overflow:hidden;
transition:opacity .3s cubic-bezier(.25,.1,.25,1);
}
.mc-tile.is-big{z-index:2;opacity:1}
.mc-tile.is-hidden{display:none!important}
.mc-tile.fade-out{opacity:0;z-index:1}
.mc-tile.is-off{opacity:0;pointer-events:none;z-index:0}
.mc-dates{
display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;justify-items:center;
width:100%;max-width:400px;height:52px;margin:12px auto 0;padding:0;box-sizing:border-box;
}
.mc-date-list{
display:flex;align-items:center;justify-content:center;gap:6px;
width:100%;height:52px;margin:0;
}
.mc-date-arrow{
position:static;transform:none;z-index:2;
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;padding:0;border:2px solid transparent;border-radius:var(--radius-squircle);corner-shape:squircle;
background:#fff;color:#0b0b0c;font-size:1.35rem;line-height:0;font-weight:700;
cursor:pointer;box-sizing:border-box;
transition:background-color .2s,color .2s,border-color .2s;
}
.mc-date-arrow.prev{justify-self:start}
.mc-date-arrow.next{justify-self:end}
.mc-date-arrow:hover{background:#f4f4f5}
.mc-date{
flex:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
width:44px;height:52px;padding:0;border:2px solid transparent;border-radius:var(--radius-squircle);corner-shape:squircle;
background:#fff;color:#0b0b0c;font:inherit;font-size:1rem;font-weight:700;
cursor:pointer;box-sizing:border-box;line-height:1;
transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;
}
.mc-date-num{font-size:1rem;font-weight:700;line-height:1}
.mc-date-mon{
font-size:.62rem;font-weight:700;line-height:1;letter-spacing:.02em;
text-transform:lowercase;color:rgba(11,11,12,.55);
}
.mc-date.is-active .mc-date-mon{color:rgba(255,255,255,.85)}
.mc-date:hover{background:#f4f4f5}
.mc-date.is-active{
background:var(--accent-fill);color:#fff;border-color:var(--accent-bright);
box-shadow:0 4px 14px rgba(229,32,45,.35);
}
.mc-date:focus-visible,.mc-date-arrow:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.mc-date-arrow:disabled{opacity:.35;cursor:default}
.mc-date-arrow:disabled:hover{background:#fff}
.mc-dates--solo .mc-date-arrow{visibility:hidden}
@media(prefers-reduced-motion:reduce){.mc-tile{transition:none!important}.mc-date,.mc-date-arrow{transition:none!important}}
.mimg{position:relative;display:flex;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow);background:linear-gradient(135deg,var(--accent),#b81a25);color:#fff}
.mimg-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;will-change:transform;transform:scale(var(--photo-scale,1.12));transform-origin:var(--photo-origin,50% 22%);transition:transform .35s cubic-bezier(.25,.1,.25,1)}
.mc-tile.is-big .mimg-photo,.mimg-lg .mimg-photo{--photo-scale:var(--photo-hero-scale,1.14);transform-origin:var(--photo-hero-origin,50% 20%)}
.sport-row--florbal{--photo-hero-scale:1.12;--photo-peer-scale:1.34;--photo-hero-origin:36% 18%;--photo-peer-origin:40% 22%}
.sport-row--hazena{--photo-hero-scale:1.14;--photo-peer-scale:1.38;--photo-hero-origin:32% 16%;--photo-peer-origin:36% 20%}
.sport-row--volejbal{--photo-hero-scale:1.16;--photo-peer-scale:1.4;--photo-hero-origin:50% 15%;--photo-peer-origin:54% 19%}
.sport-row--futsal{--photo-hero-scale:1.1;--photo-peer-scale:1.32;--photo-hero-origin:44% 58%;--photo-peer-origin:48% 62%}
.mimg-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.55) 38%,rgba(11,11,12,.08) 68%)}
.mimg-info{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px;justify-content:flex-end;width:100%;min-width:0;padding:20px 22px;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.mimg-when{display:flex;align-items:center;gap:12px;line-height:1}
.mc-day{font-size:3rem;font-weight:800;color:#fff}
.mc-when-txt{display:flex;flex-direction:column;gap:3px}
.mc-mon{font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.85)}
.mc-dow{font-size:.9rem;font-weight:600;color:rgba(255,255,255,.85)}
.mc-teams{font-weight:700;font-size:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-comp{font-size:.95rem;color:rgba(255,255,255,.82);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mimg-sm .mimg-info{padding:16px 16px;gap:4px}
.mimg-sm .mc-day{font-size:2.1rem}
.mimg-sm .mimg-when{gap:8px}
.mimg-sm .mc-mon,.mimg-sm .mc-dow{font-size:.78rem}
.mimg-sm .mc-teams{font-size:1rem}
.mimg.live{outline:3px solid var(--accent-fill);outline-offset:-3px}
.mcard-live{position:absolute;top:12px;right:12px;z-index:3;font-size:.78rem;font-weight:800;letter-spacing:.5px;color:#fff;background:var(--accent-fill);padding:3px 11px;border-radius:var(--radius-chip);corner-shape:squircle;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.mimg-lg{flex:0 0 400px;width:400px;max-width:400px;margin:0 auto;aspect-ratio:2/3}
.mimg-sm{flex:0 0 260px;width:260px;aspect-ratio:2/3}
.mimg-sm .mcard-live{font-size:.68rem;top:10px;right:10px;padding:2px 9px}
.sr-empty{align-self:center;color:var(--muted);font-weight:600;font-size:1rem}
.mimg-lg{max-width:400px;width:100%;margin:0 auto;aspect-ratio:2/3}
@media(max-width:860px){
.sport-rows{padding:0 20px;--sport-pad:20px}
.sport-row:not(:last-child){padding-bottom:28px}
.sec-head-inset{padding-left:20px;padding-right:20px}
.mc-day{font-size:2.6rem}
.sr-matches{align-items:center;gap:0;width:100%}
.mimg-lg{width:100%;flex:none;max-width:400px;margin:0 auto}
.match-carousel{width:100%;max-width:400px}
.mc-dates{margin-top:10px;height:48px;grid-template-columns:40px minmax(0,1fr) 40px}
.mc-date{width:40px;height:48px;font-size:.95rem}
.mc-date-num{font-size:.95rem}
.mc-date-mon{font-size:.58rem}
.mc-date-arrow{width:40px;height:40px;font-size:1.2rem}
.mc-date-list{height:48px;margin:0}
}
/* ZÁZNAMY — video recordings grid */
.rec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;padding:0 var(--page-pad);width:100%;margin:0}
@media(min-width:1400px){.rec-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}
@media(max-width:720px){.rec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rec-card{display:flex;flex-direction:column;text-align:left;padding:0;border:0;background:transparent;color:var(--ink);cursor:pointer;font:inherit;width:100%;min-width:0}
/* Reveal jen na homepage section — ne na aside#zaznamy ve sport detailu */
section#zaznamy .rec-card{
opacity:0;
transform:translateY(16px);
transition:opacity .48s cubic-bezier(.22,1,.36,1), transform .48s cubic-bezier(.22,1,.36,1);
}
section#zaznamy.is-in .rec-card{opacity:1;transform:none}
section#zaznamy.is-in .rec-card:nth-child(1){transition-delay:.04s}
section#zaznamy.is-in .rec-card:nth-child(2){transition-delay:.09s}
section#zaznamy.is-in .rec-card:nth-child(3){transition-delay:.14s}
section#zaznamy.is-in .rec-card:nth-child(4){transition-delay:.19s}
section#zaznamy.is-in .rec-card:nth-child(5){transition-delay:.24s}
section#zaznamy.is-in .rec-card:nth-child(6){transition-delay:.29s}
section#zaznamy.is-in .rec-card:nth-child(7){transition-delay:.34s}
section#zaznamy.is-in .rec-card:nth-child(8){transition-delay:.39s}
@media (hover:hover) and (pointer:fine){
section#zaznamy.is-in .rec-card{
transition:opacity .48s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1);
}
section#zaznamy.is-in .rec-card:hover{transform:translateY(-5px)}
}
@media (prefers-reduced-motion:reduce){
section#zaznamy .rec-card{opacity:1;transform:none;transition:none}
section#zaznamy.is-in .rec-card:hover{transform:none}
}
.rec-thumb-wrap{position:relative;display:block;width:100%;aspect-ratio:16/9;flex:none;isolation:isolate}
.rec-thumb{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:linear-gradient(135deg,var(--accent),#b81a25)}
.rec-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.rec-card:hover .rec-bg{transform:scale(1.1)}
.rec-thumb::before{
content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
background:var(--accent-fill);transform:scaleX(0);transform-origin:left center;
transition:transform .35s cubic-bezier(.22,1,.36,1);pointer-events:none;
}
.rec-card:hover .rec-thumb::before{transform:scaleX(1)}
.rec-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,0) 55%,rgba(11,11,12,.35));opacity:0;transition:opacity .25s;pointer-events:none}
.rec-card:hover .rec-thumb::after{opacity:1}
.rec-play{
position:absolute;top:50%;left:50%;z-index:3;
transform:translate(-50%,-50%) scale(1);
width:54px;height:54px;border-radius:var(--radius-squircle);corner-shape:squircle;
color:#0b0b0c;display:grid;place-items:center;font-size:1.2rem;padding-left:3px;
background:transparent;isolation:isolate;overflow:visible;
opacity:1;transition:opacity .25s,transform .3s cubic-bezier(.22,1,.36,1);pointer-events:none;
}
@media(hover:hover) and (pointer:fine){
.rec-play{transform:translate(-50%,-50%) scale(.88)}
.rec-card:hover .rec-play{transform:translate(-50%,-50%) scale(1.08)}
}
.rec-info{display:flex;flex-direction:column;gap:5px;padding:12px 4px 2px}
.rec-title{font-size:.98rem;font-weight:700;line-height:1.35;letter-spacing:-.2px;transition:color .2s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rec-card:hover .rec-title{color:var(--accent-bright)}
.rec-tag{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:600;font-size:.78rem}
.rec-empty{color:var(--muted);font-weight:600;padding:0 var(--page-pad)}
@media(max-width:640px){.rec-grid{grid-template-columns:1fr;padding:0 16px}.rec-empty{padding:0 16px}}
/* VIDEO CARDS */
.vcard{background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s}
.vcard:hover{transform:translateY(-4px)}
.vcard .meta{padding:14px 16px 18px}
.vcard .tag{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--accent2)}
.vcard h3{font-size:1rem;margin-top:5px;line-height:1.35}
.vcard .video-frame{border-radius:0;box-shadow:none}
/* SPORT PAGE */
.sport-hero{
position:relative;isolation:isolate;overflow:hidden;
min-height:clamp(220px,32vw,340px);
display:flex;align-items:flex-end;
color:#fff;
border-bottom:1px solid var(--border);
}
.sport-hero-bg{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center 30%;
z-index:0;
transform:scale(1.04);
filter:saturate(1.05) contrast(1.06);
}
.sport-hero-shade{
position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(90deg,rgba(11,11,12,.88) 0%,rgba(11,11,12,.62) 42%,rgba(11,11,12,.28) 70%,rgba(11,11,12,.18) 100%),
linear-gradient(0deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.2) 45%,rgba(11,11,12,.35) 100%);
}
/*
Hero míč: plná opacity, bez soft masky — ať se neblendí do fotky.
Stín oddělí míč od pozadí; WebGL alpha drží tvar.
*/
/* Míč leží NAD tmavým překryvem fotky (.sport-hero-shade, z-index 2), ale
pod textem (.sport-hero-content, z-index 3, v DOM později). Pod překryvem
ho gradient ztmavoval o 18–72 %, zatímco letící míč v přechodu je nad vším
— při dosednutí se tak míč ztmavil a nesedělo odstín. */
.sport-hero-ball{
position:absolute;z-index:3;pointer-events:none;
top:auto;
right:max(12px, var(--page-pad));
bottom:clamp(12px, 4vw, 28px);
width:var(--ms-ball-size);
height:var(--ms-ball-size);
opacity:1;
}
/* Stín v hero naběhne až s dosednutím míče (is-vt-landing / is-vt-settled). */
.sport-hero-ball::after{opacity:0}
.sport-hero-ball.is-vt-landing::after,
.sport-hero-ball.is-vt-settled::after{opacity:1}
.sport-hero-ball .sport-ball-vt{
z-index:1;
opacity:1;
}
.sport-hero-ball canvas{
display:block;width:100%!important;height:100%!important;
}
/* Zastupce 3D modelu — viditelny jen ve fazi `is-vt-pending`, tedy nez je
zivy canvas pripraveny. Jakmile model dojede, JS sundá is-vt-pending a
poster se odfejduje. U vestavenych modelu probehne tak rychle, ze ho
prakticky neuvidis; smysl ma u velkych modelu nahranych z adminu. */
.sport-ball-poster{
position:absolute; z-index:0;
inset:0; margin:auto;
max-width:52%; max-height:52%;
width:auto; height:auto;
object-fit:contain; opacity:0;
transition:opacity .3s ease;
pointer-events:none;
}
/* Jen když na model opravdu čekáme: do chvíle odhalení (data-ms-ball-reveal,
~78 % přechodu) je zástupný symbol skrytý, jinak by za letícím míčem
probleskla ikona sportu. U hotového modelu se pending ruší ve stejné chvíli
jako odhalení, takže ikona nikdy neuvidíš. */
html[data-ms-ball-reveal="1"] .sport-hero-ball.is-vt-pending .sport-ball-poster{ opacity:.26; }
/* Pending: canvas nevidět, box `.sport-ball-vt` drží cílovou geometrii VT */
.sport-hero-ball.is-vt-pending .sport-ball-vt{
opacity:0 !important;
}
/* Landing: čistý canvas 1:1 s VT */
.sport-hero-ball.is-vt-landing{
opacity:1 !important;
}
.sport-hero-ball.is-vt-landing .sport-ball-vt{
opacity:1;
animation:none;
}
/* Settle: plný míč, žádný fade do fotky */
.sport-hero-ball.is-vt-settled{
opacity:1;
}
.sport-hero-ball.is-vt-settled .sport-ball-vt{
opacity:1;
animation:none;
}
.sport-hero-content{
position:relative;z-index:3;
width:100%;
padding:36px var(--page-pad) 34px;
}
.sport-hero h1{
display:flex;align-items:center;gap:14px;
font-size:clamp(1.7rem,3.5vw,2.6rem);letter-spacing:-.5px;
text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.sport-hero-logo{
width:56px;height:56px;flex:none;object-fit:contain;
border-radius:var(--radius-squircle);corner-shape:squircle;
box-shadow:0 6px 22px rgba(0,0,0,.35);
background:rgba(14,14,15,.35);
}
.sport-hero p{
opacity:.92;max-width:48ch;margin-top:10px;color:rgba(228,228,231,.88);
text-shadow:0 1px 10px rgba(0,0,0,.4);
}
@media(max-width:640px){
.sport-hero{min-height:220px}
.sport-hero-logo{width:44px;height:44px;border-radius:var(--radius-squircle);corner-shape:squircle}
.sport-hero-content{padding:28px var(--page-pad) 26px}
.sport-hero-bg{object-position:center 25%}
.sport-hero-ball{
width:var(--ms-ball-size);
height:var(--ms-ball-size);
bottom:10px;
right:max(10px, var(--page-pad));
}
}
.sport-page{padding-bottom:56px}
.sport-section{padding:40px 0 8px;border-top:1px solid var(--border)}
.sport-section:first-child{border-top:0;padding-top:28px}
.sport-section .sec-head{margin-bottom:18px}
.sport-split-main .live-stack{gap:0;height:100%}
.sport-live-play{
position:relative;
display:block;width:100%;padding:0;border:0;background:transparent;cursor:pointer;
text-align:left;font:inherit;color:inherit;border-radius:var(--radius);
overflow:visible;
}
.sport-live-thumb{
position:relative;display:block;aspect-ratio:16/9;width:100%;
border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
background:#141415;
}
.sport-live-thumb-img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.sport-live-thumb::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(11,11,12,.08) 40%,rgba(11,11,12,.45));
transition:opacity .25s;pointer-events:none;
}
.sport-live-play:hover .sport-live-thumb::after{opacity:.85}
.sport-live-badge{
position:absolute;top:14px;left:14px;z-index:2;
display:inline-flex;align-items:center;
background:var(--accent-fill);color:#fff;font-size:.72rem;font-weight:800;
letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:var(--radius-chip);corner-shape:squircle;
}
.sport-live-play-btn{
position:absolute;top:50%;left:50%;z-index:3;
width:72px;height:72px;font-size:1.45rem;
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
.sport-live-play:hover .sport-live-play-btn::after{background:#fff}
@media(hover:hover) and (pointer:fine){
.sport-live-play-btn{transform:translate(-50%,-50%) scale(.94);opacity:1}
.sport-live-play:hover .sport-live-play-btn{transform:translate(-50%,-50%) scale(1);opacity:1}
}
/* Side stack height = main 16:9: main≈2/3 of (cqw − gap), so H = that × 9/16. */
.sport-rec-list{
display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:var(--split-gap,14px);
width:100%;
height:calc((2 * (100cqw - var(--split-gap))) / 3 * 9 / 16);
max-height:none;overflow:hidden;padding:0;
}
.sport-rec-list .sport-rec-card{
position:relative;width:100%;min-height:0;height:100%;
display:flex;flex-direction:column;
}
.sport-rec-list .rec-thumb-wrap{
position:relative;flex:1;min-height:0;width:100%;aspect-ratio:auto;
}
.sport-rec-list .rec-thumb{
position:absolute;inset:0;border-radius:var(--radius);
}
.sport-rec-list .rec-info{
position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:28px 12px 10px;margin:0;
background:linear-gradient(180deg,transparent,rgba(11,11,12,.88));
pointer-events:none;
}
.sport-rec-list .rec-tag{color:rgba(228,228,231,.7);font-size:.72rem}
.sport-rec-list .rec-title{
font-size:.88rem;color:#fff;-webkit-line-clamp:2;
text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.sport-rec-list .rec-play{width:44px;height:44px;font-size:1rem}
.sport-schedule{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sport-schedule-item{
display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:center;
padding:14px 0;border-bottom:1px solid var(--border);
}
.sport-schedule-item:last-child{border-bottom:0}
.sport-schedule-swatch{
width:10px;height:10px;flex:none;
}
.sport-schedule-when{
display:flex;align-items:baseline;gap:8px;min-width:0;
}
.sport-schedule-day{
font-size:1.85rem;font-weight:800;letter-spacing:-1px;line-height:1;color:var(--ink);
}
.sport-schedule-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.sport-schedule-mon{
font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:lowercase;color:var(--muted);line-height:1;
}
.sport-schedule-time{font-size:.88rem;font-weight:700;color:var(--accent-bright);line-height:1}
.sport-schedule-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.sport-schedule-live{
display:inline-flex;align-self:flex-start;
font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:#fff;background:var(--accent-fill);padding:3px 8px;border-radius:var(--radius-chip);corner-shape:squircle;margin-bottom:2px;
}
.sport-schedule-teams{
font-size:1.02rem;font-weight:700;letter-spacing:-.2px;line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sport-schedule-comp{font-size:.82rem;font-weight:600;color:var(--muted)}
.sport-schedule-item.is-live .sport-schedule-time{color:var(--accent-bright)}
.sport-upcoming-empty{color:var(--muted);font-weight:600;margin:0}
@media(max-width:900px){
.sport-section--split{
width:auto;max-width:none;margin-left:0;margin-right:0;
padding-left:0;padding-right:0;
}
.sport-split{
grid-template-columns:1fr;
grid-template-areas:
"titleLive"
"main"
"titleRec"
"side";
row-gap:14px;
}
.sport-rec-list{
display:flex;flex-direction:column;height:auto;overflow:visible;
}
.sport-rec-list .sport-rec-card{height:auto}
.sport-rec-list .rec-thumb-wrap{aspect-ratio:16/9;flex:none}
.sport-rec-list .rec-thumb{position:absolute}
}
.subtabs{display:flex;gap:4px;margin:26px 0 6px;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px;background:var(--bg-soft);border-radius:999px;position:relative;width:fit-content;max-width:100%}
.subtabs::-webkit-scrollbar{display:none}
.subtab{padding:9px 18px;border-radius:999px;font-weight:700;font-size:.9rem;background:transparent!important;transition:color .22s;flex:none;scroll-snap-align:start;position:relative;z-index:1}
.subtab:hover{color:var(--accent-bright)}
.subtab.active{color:var(--ink)}
.subtab.is-lit{color:#fff}
.subpanel{padding-top:22px}
.rules{max-width:75ch}
.rules h2,.rules h3{margin:18px 0 6px}
.rules p{color:var(--muted);margin-bottom:8px}
.rules-back{margin:0 0 18px;font-weight:600}
.ms-rules-empty{margin:14px 0;color:var(--muted)}
/* SPORT GALLERY */
.ms-gallery{margin:0 calc(var(--page-pad) * -1)}
.ms-gallery-head{
padding-left:var(--page-pad);padding-right:var(--page-pad);
display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.ms-gallery-head h2{margin:0}
.ms-gallery-nav{display:flex;gap:8px;flex:none}
.ms-gallery-nav[hidden]{display:none}
.ms-gallery-arrow{
width:44px;height:44px;border:1px solid rgba(255,255,255,.14);
border-radius:var(--radius-squircle);corner-shape:squircle;
background:rgba(28,28,30,.75);color:var(--ink);font-size:1.45rem;line-height:1;
cursor:pointer;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
transition:background-color .2s,border-color .2s,color .2s,transform .18s,opacity .18s;
}
.ms-gallery-arrow:hover:not(:disabled){
background:var(--surface-raised);border-color:rgba(255,70,84,.45);color:#fff;
transform:translateY(-1px);
}
.ms-gallery-arrow:disabled{
opacity:.35;cursor:default;transform:none;
}
.ms-gallery-viewport{
position:relative;
mask-image:linear-gradient(90deg,transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
-webkit-mask-image:linear-gradient(90deg,transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.ms-gallery-track{
display:flex;gap:18px;
overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
padding:8px var(--page-pad) 18px;
overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
}
.ms-gallery-track::-webkit-scrollbar{height:8px}
.ms-gallery-track::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:4px}
.ms-gallery-item{
position:relative;flex:0 0 clamp(280px,48vw,640px);
height:clamp(180px,32vw,400px);padding:0;border:0;cursor:pointer;
border-radius:var(--radius);overflow:hidden;scroll-snap-align:start;
background:var(--bg-soft);color:inherit;font:inherit;text-align:left;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 10px 28px rgba(0,0,0,.35);
transition:transform .28s cubic-bezier(.25,.1,.25,1),box-shadow .28s;
}
.ms-gallery-item:hover,
.ms-gallery-item:focus-visible{
transform:translateY(-3px) scale(1.02);
box-shadow:inset 0 0 0 1px rgba(255,70,84,.35),0 16px 36px rgba(0,0,0,.45);
z-index:1;
}
.ms-gallery-img{
width:100%;height:100%;object-fit:cover;object-position:center;
display:block;pointer-events:none;
transition:transform .4s cubic-bezier(.25,.1,.25,1);
}
.ms-gallery-item:hover .ms-gallery-img,
.ms-gallery-item:focus-visible .ms-gallery-img{transform:scale(1.04)}
.ms-gallery-empty{margin:0;padding:8px var(--page-pad);color:var(--muted)}
@media (prefers-reduced-motion:reduce){
.ms-gallery-item,.ms-gallery-img,.ms-gallery-arrow{transition:none!important}
.ms-gallery-item:hover,.ms-gallery-item:focus-visible{transform:none}
.ms-gallery-item:hover .ms-gallery-img,.ms-gallery-item:focus-visible .ms-gallery-img{transform:none}
.ms-gallery-track{scroll-behavior:auto}
}
/* LIGHTBOX */
.ms-lightbox{
position:fixed;inset:0;z-index:90;display:grid;place-items:center;
padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
.ms-lightbox[hidden]{display:none}
.ms-lightbox-backdrop{
position:absolute;inset:0;border:0;padding:0;margin:0;cursor:pointer;
background:rgba(7,7,8,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.ms-lightbox-dialog{
position:relative;z-index:1;display:grid;place-items:center;
width:min(92vw,1280px);max-height:88vh;
}
.ms-lightbox-img{
max-width:92vw;max-height:88vh;width:auto;height:auto;
object-fit:contain;border-radius:12px;
box-shadow:0 24px 60px rgba(0,0,0,.55);
background:var(--bg-soft);
}
.ms-lightbox-close{
position:absolute;top:-8px;right:-8px;z-index:2;
width:44px;height:44px;border:1px solid rgba(255,255,255,.18);
border-radius:var(--radius-squircle);corner-shape:squircle;
background:rgba(28,28,30,.92);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;
box-shadow:0 8px 22px rgba(0,0,0,.4);
transition:background-color .2s,border-color .2s,transform .18s;
}
.ms-lightbox-close:hover{
background:var(--surface-raised);border-color:rgba(255,70,84,.45);transform:translateY(-1px);
}
.ms-lightbox-arrow{
position:absolute;top:50%;transform:translateY(-50%);
width:48px;height:48px;border:1px solid rgba(255,255,255,.18);
border-radius:var(--radius-squircle);corner-shape:squircle;
background:rgba(28,28,30,.88);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;
box-shadow:0 8px 22px rgba(0,0,0,.35);
transition:background-color .2s,border-color .2s,transform .18s;
}
.ms-lightbox-arrow:hover{
background:var(--surface-raised);border-color:rgba(255,70,84,.45);
}
.ms-lightbox-prev{left:clamp(-8px,calc(-4vw),-20px)}
.ms-lightbox-next{right:clamp(-8px,calc(-4vw),-20px)}
@media (max-width:720px){
.ms-lightbox-prev{left:4px}
.ms-lightbox-next{right:4px}
.ms-lightbox-close{top:0;right:0}
.ms-gallery-item{flex-basis:clamp(240px,78vw,420px);height:clamp(160px,48vw,280px)}
}
@media (prefers-reduced-motion:reduce){
.ms-lightbox-close,.ms-lightbox-arrow{transition:none!important}
.ms-lightbox-close:hover{transform:none}
}
/* O NÁS / KONTAKT */
.prose{max-width:75ch}
.prose h2{margin:26px 0 10px}
.prose p{color:var(--muted);margin-bottom:12px}
.prose strong{color:var(--ink)}
.contact-card{background:var(--bg-soft);border-radius:var(--radius);padding:26px;margin-top:18px}
.contact-card p{margin-bottom:6px}
/* REZERVACE — formulář */
.res-form{margin-top:22px;max-width:680px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-bottom:22px}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field.span-2{grid-column:1/-1}
.form-field label{font-weight:700;font-size:.88rem}
.form-field input,.form-field select,.form-field textarea{font:inherit;padding:10px 14px;border:2px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);transition:border-color .2s}
.form-field input:focus-visible,.form-field select:focus-visible,.form-field textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-color:var(--accent-bright)}
.link-accent{color:var(--accent-bright);font-weight:700}
.legal-note{font-size:.88rem;margin-top:18px;color:var(--muted)}
.legal-date{font-size:.85rem;color:var(--muted)}
.sport-detail-spacer{height:48px}
.field-error{color:#c0362c;font-size:.8rem;font-weight:600}
.form-errors{background:#fdecea;color:#c0362c;border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:.9rem}
.form-success{background:var(--surface-raised);color:var(--ink);border:1px solid var(--border);border-radius:10px;padding:14px 18px;margin:14px 0 6px;font-weight:700}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
/* CONSENT / GDPR */
.consent-overlay{position:fixed;inset:0;z-index:200;background:rgba(11,11,12,.6);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;padding:max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-left));overscroll-behavior:contain}
.consent-overlay[hidden]{display:none}
.consent-box{background:var(--surface);border-radius:18px;max-width:480px;width:100%;padding:30px 28px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.consent-box h2{font-size:1.25rem;margin-bottom:10px}
.consent-box p{color:var(--muted);font-size:.93rem;margin-bottom:18px}
.consent-box a{color:var(--accent-bright);font-weight:700}
.consent-actions{display:flex;gap:12px;flex-wrap:wrap}
.consent-actions .btn{padding:10px 20px;font-size:.9rem}
.consent-actions .btn-ghost{border-color:var(--muted);color:var(--muted)}
.consent-actions .btn-ghost:hover{background:var(--bg-soft);color:var(--ink)}
/* —— Engage: klub + podpora —— */
/* .ms-engage — viz „Objevuj + Natočíme“ na konci souboru */
/* —— Partner editorial rail —— */
.sponsor-strip{
position:relative;
padding:clamp(28px, 4.5vw, 44px) var(--page-pad);
background:transparent;
border-top:1px solid rgba(228,228,231,.08);
border-bottom:1px solid rgba(228,228,231,.08);
}
.sponsor-strip--home{
padding:clamp(32px, 5vw, 52px) var(--page-pad);
}
.sponsor-strip--footer{
border-bottom:none;
padding:clamp(24px, 4vw, 36px) var(--page-pad) clamp(20px, 3vw, 28px);
}
.sponsor-strip-kicker{
margin:0 auto 18px;
max-width:1100px;
font-size:.68rem;
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
color:rgba(229,32,45,.85);
opacity:.9;
}
.sponsor-strip-list{
list-style:none;
margin:0 auto;
padding:0;
box-sizing:border-box;
width:100%;
max-width:1100px;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:clamp(20px, 4vw, 48px) clamp(28px, 5vw, 56px);
}
.sponsor-strip-item{flex:0 0 auto}
.sponsor-strip-link{
display:flex;
align-items:center;
justify-content:center;
height:48px;
padding:0;
opacity:.68;
transition:opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.sponsor-strip-link:hover,
.sponsor-strip-link:focus-visible{
opacity:1;
transform:translateY(-1px);
}
.sponsor-strip-link--static{cursor:default}
.sponsor-strip-link--static:hover{
transform:none;
opacity:.68;
}
.sponsor-strip-link img{
display:block;
max-height:40px;
max-width:160px;
width:auto;
height:auto;
object-fit:contain;
}
@media(max-width:520px){
.sponsor-strip{padding:24px var(--page-pad)}
.sponsor-strip--home{padding:28px var(--page-pad)}
.sponsor-strip-kicker{margin-bottom:14px}
.sponsor-strip-list{gap:16px 24px}
.sponsor-strip-link{height:40px}
.sponsor-strip-link img{max-height:34px;max-width:130px}
}
.site-footer{
margin-top:56px;
background:#070708;
border-top:1px solid rgba(255,255,255,.08);
color:rgba(228,228,231,.78);
font-size:.92rem;
}
.site-footer-inner{
width:100%;
max-width:1180px;
margin:0 auto;
padding:42px var(--page-pad) max(28px,env(safe-area-inset-bottom));
}
.site-footer-top{
display:flex;align-items:center;justify-content:space-between;gap:20px 28px;
flex-wrap:wrap;padding-bottom:28px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.site-footer-brand{
font-weight:800;font-size:1.35rem;letter-spacing:-.4px;color:#fff;line-height:1;
}
.site-footer-brand span{color:var(--accent-bright)}
.site-footer-social{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.site-footer-social-label{color:var(--muted);font-size:.88rem}
.site-footer-social-list{display:flex;align-items:center;gap:8px}
.site-footer-social-link{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;border-radius:var(--radius-squircle);corner-shape:squircle;
border:1px solid rgba(255,255,255,.28);color:#fff;
transition:background-color .2s,border-color .2s,color .2s;
}
.site-footer-social-link:hover{
background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);color:#fff;
}
.site-footer-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:36px 48px;
padding:36px 0 40px;
}
.site-footer-heading{
font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);margin:0 0 14px;
}
.site-footer-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.site-footer-links a{color:rgba(228,228,231,.88);font-weight:500;transition:color .2s}
.site-footer-links a:hover{color:#fff}
.site-footer-note{color:var(--muted);font-size:.88rem;margin:0 0 14px}
.site-footer-contact{list-style:none;display:flex;flex-direction:column;gap:12px}
.site-footer-contact li{display:flex;align-items:center;gap:10px}
.site-footer-contact a{color:#fff;font-weight:600;transition:color .2s}
.site-footer-contact a:hover{color:var(--accent-bright)}
.site-footer-ico{
display:inline-flex;align-items:center;justify-content:center;
width:28px;height:28px;flex:none;color:rgba(228,228,231,.7);
}
.site-footer-bottom{
display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;
padding-top:18px;border-top:1px solid rgba(255,255,255,.08);
font-size:.8rem;color:var(--muted);
}
.site-footer-bottom a{color:var(--muted);transition:color .2s}
.site-footer-bottom a:hover{color:#fff}
.site-footer-tagline{margin:0}
@media(max-width:860px){
.hero-grid,.grid-3,.grid-2{grid-template-columns:1fr}
.site-footer-inner{padding-top:32px}
.site-footer-top{align-items:flex-start;padding-bottom:22px}
.site-footer-social{width:100%}
.site-footer-grid{grid-template-columns:1fr 1fr;gap:28px 24px;padding:28px 0 32px}
.site-footer-col--contact{grid-column:1/-1}
.site-footer-bottom{align-items:flex-start;flex-direction:column}
}
@media(max-width:520px){
.site-footer-grid{grid-template-columns:1fr}
.site-footer-col--contact{grid-column:auto}
}
/* ── Číslice ─────────────────────────────────────────────────────────────
Časy, data a počty dostávají tabulkové číslice (tnum) ve stejném písmu
jako text. V proporcionálních číslicích má "1" jinou šířku než "8", takže
se čas pod sebou v seznamu rozjíždí a při odpočtu poskakuje. */
.ms-upcoming-clock,
.sport-schedule-day,
.sport-schedule-mon,
.ms-cal-legend-count,
.ms-cal-grid,
.ms-cal-dows,
time,
.ms-num{
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1;
}
/* ── Popisky sekcí ───────────────────────────────────────────────────────
Verzálky s prostrkáním, jak je má návrh. Drží se tlumené barvy, aby
nekonkurovaly nadpisu, ale strukturu stránky čtou jasně. */
.sec-head > .sec-hint,
.ms-cal-legend-hint,
.sport-calendar-lead{
text-transform:uppercase;
letter-spacing:.18em;
font-weight:800;
font-size:.78em;
color:var(--muted);
}
/* ── Vzhled podle predlohy numa.uprock.pro ───────────────────────────────────
Prevzaty tri veci, ktere ji delaji tim, cim je: velka zaobleni se vsazenymi
panely, prusvitne plochy misto plnych barev a velke nadpisy s tesnym
prostrkanim. Zadne animace — ty si predloha nese taky, ale nechceme je.
Barvy zustavaji zdejsi cernocervene; prusvitnost je obracena (svetla vrstva
na tmavem podkladu misto tmave na svetlem). */
/* Panely vsazene od kraje — u predlohy 15 px pri sirce 1440. */
.sport-hero,
.hero-tv{
margin-inline:clamp(10px,1.1vw,16px);
margin-top:10px;
border-radius:var(--radius-panel);
overflow:hidden;
}
/* Nadpisy: vetsi, tezsi, tesneji.
POZOR na radkovani — predloha jede 0.90, ale ta ma anglicky text. Cestina ma
nad verzalkami hacky a carky (Ž, Í, Ř), ktere by se pri 0.90 orezavaly o
predchozi radek, takze drzime 0.95. */
h1,h2{
letter-spacing:-.04em;
line-height:.95;
font-weight:700;
}
h1{font-size:clamp(2.2rem,5.2vw,4.4rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.6rem)}
/* Hero nadpisy maji vlastni pravidla s vyssi specificitou nez obecne h1,h2
vyse, takze je prebijime stejnymi selektory — ne !important. */
.hero-tv h1,
.sport-hero h1{
font-size:clamp(2.6rem,6.2vw,5.4rem);
line-height:.95;
letter-spacing:-.04em;
max-width:18ch;
}
.sec-head h2,
.sports-band--peek .sec-head h2{
font-size:clamp(1.7rem,3.4vw,2.8rem);
line-height:.98;
letter-spacing:-.03em;
}
/* Plochy: tenka svetla vrstva misto plne barvy, aby pod nimi bylo videt
pozadi — proto tez jemnejsi okraj nez dosud. */
.channel-thumb,
.rec-thumb,
.live-card,
.ms-upcoming-card,
.mimg{
border-radius:var(--radius);
}
/* Pilulky i tam, kde dosud nebyly. */
.pill,
.rec-tag,
.ms-upcoming-live,
.live-card-badge,
.sport-live-badge{
border-radius:999px;
}
/* ── Prestavba na plovouci panely ────────────────────────────────────────────
Tohle uz neni o barvach, ale o silluete stranky. Dosud to byl sled
celoplosnych pasu nalepenych na sebe; predloha ma misto toho samostatne
vsazene panely plovouci na podkladu s velkym vzduchem mezi nimi.
Overflow zamerne NEnastavujeme plosne — .sports-band--peek a listy se
sipkami pretekaji umyslne a schovani by je rozbilo. */
.hero-tv,
.sports-band,
.live-band,
.ms-upcoming,
.ms-discover,
section#zaznamy, /* jen sekce na homepage — na detailu sportu nese id=zaznamy postranni panel */
.ms-engage{
margin-inline:clamp(10px,1.1vw,16px);
margin-block:clamp(10px,1.2vw,18px);
border-radius:var(--radius-panel);
background:rgba(255,255,255,.035);
padding-block:clamp(44px,6vw,104px);
}
/* Hero si vzduch resi sam pres --hero-fold, nepretezovat. */
.hero-tv{padding-block:0;background:none}
/* Vic dechu uvnitr panelu — predloha ma na 1440 px zhruba 1130 px na sekci. */
.sec-head,
.sec-head-inset{
padding-inline:clamp(20px,3vw,56px);
margin-bottom:clamp(20px,2.6vw,44px);
}
/* Obsah panelu nesmi lepit na jeho okraj. */
.channel-rail,
.ms-upcoming-rail,
.live-band-grid{
padding-inline:clamp(20px,3vw,56px);
}
/* Patu nechavame bez panelu, aby stranka nekoncila plovoucim blokem. */
footer{margin-top:clamp(20px,2.6vw,44px)}
/* Sport bez vlastní hero fotky (nově přidané sporty): ztmavovací vrstva by
nad prázdnem jen zakalila panel, tak ji schováme. */
.sport-hero:not(:has(.sport-hero-bg)) .sport-hero-shade{display:none}
/* ── TV vzhled, stavěný pro web ──────────────────────────────────────────────
Jak se chovají TV aplikace: obsah ve vodorovných řadách karet od kraje ke
kraji, poslední karta přetéká přes okraj (je vidět, že je tam víc), vybraná
karta vyroste a dostane obrys. Ovládání šipkami je v tv-nav.js.
Hero zůstává jako jediný velký panel — ten kus z předlohy Numa zůstává. */
/* Řady bez plovoucích panelů — TV obsah teče od kraje ke kraji. */
.sports-band,
.live-band,
.ms-upcoming,
section#zaznamy{
margin-inline:0;
border-radius:0;
background:none;
padding-block:clamp(16px,2.2vw,34px);
}
/* Nadpisy řad v TV velikosti: obří display nadpisy k řadám nesedí, řada
má být hlavní, nadpis jen popisek nad ní. */
.sec-head h2,
.sports-band--peek .sec-head h2{
font-size:clamp(1.2rem,1.55vw,1.6rem);
line-height:1.1;
letter-spacing:-.02em;
}
/* Záznamy: z mřížky na řadu 16:9 karet. */
section#zaznamy .rec-grid{
display:flex;
gap:clamp(12px,1.2vw,20px);
overflow-x:auto;
overscroll-behavior-x:contain;
scroll-snap-type:x proximity;
scroll-padding-inline:var(--page-pad);
padding:12px var(--page-pad) 24px;
scrollbar-width:none;
}
section#zaznamy .rec-grid::-webkit-scrollbar{display:none}
section#zaznamy .rec-card{
flex:0 0 clamp(230px,24vw,360px);
width:auto;
scroll-snap-align:start;
}
/* Výběr karty: vyroste, obrys + záře. Stejně pro myš i klávesnici, protože
na TV je „najetí" a „focus" totéž. Obrys sedí na náhledu, ne na celém
tlačítku, aby nekreslil i kolem popisku. */
.rec-card,
.ms-upcoming-card{
transition:transform .45s var(--ms-spring);
}
.rec-card:hover,
.rec-card:focus-visible,
.ms-upcoming-card:hover,
.ms-upcoming-card:focus-visible{
transform:scale(1.045);
z-index:2;
}
.rec-card:focus-visible,
.ms-upcoming-card:focus-visible{
outline:none;
box-shadow:none;
}
.rec-card:hover .rec-thumb,
.rec-card:focus-visible .rec-thumb{
box-shadow:0 0 0 3px var(--accent),0 0 0 9px rgba(229,32,45,.22),0 18px 40px rgba(0,0,0,.5);
}
.ms-upcoming-card:hover,
.ms-upcoming-card:focus-visible{
box-shadow:0 0 0 3px var(--accent),0 0 0 9px rgba(229,32,45,.22),0 18px 40px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion:reduce){
.rec-card,.ms-upcoming-card{transition:none}
.rec-card:hover,.rec-card:focus-visible,
.ms-upcoming-card:hover,.ms-upcoming-card:focus-visible{transform:none}
}
/* ── Přístupnost: nálezy z axe-core (engine Accessibility Insights) ───────── */
/* Logo v aktivním stavu: „sporty" v #ff4654 na červeném podkladu mělo 1,84:1. */
.navlink--logo.is-lit span{color:#fff}
/* Popisek pruhu sponzorů: #b1313b na podkladu mělo 3,14:1. */
.sponsor-strip-kicker{color:var(--accent-bright)}
/* Odkazy uvnitř textu se nesmí lišit jen barvou (WCAG 1.4.1). */
p a:not(.btn):not(.navlink),
li a:not(.btn):not(.navlink):not(.channel):not(.ms-chip),
.consent-box a,
.leaflet-container .leaflet-control-attribution a{
text-decoration:underline;
text-underline-offset:.18em;
text-decoration-thickness:1px;
}
/* Tečky karuselu: 10 px s mezerou 12 px nesplňovaly minimální cíl 24 px
(WCAG 2.5.8). Mezera 16 px dává středům 26 px od sebe → výjimka splněna. */
.hero-dots-list{gap:16px}
/* Text jen pro čtečky obrazovky. */
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* ── Objevuj + Natočíme ──────────────────────────────────────────────────────
Objevuj: velký nápis a pod ním tři dlaždice s živými čísly. Dřív to byly
tři nepoklikatelné řádky textu — teď každá někam vede a chová se jako
karta v TV řadě (šipky, zvětšení, obrys).
Natočíme: hlavní výzva pro kluby je samostatný plný červený panel, podpora
vedle něj tichý. Dvě stejně křiklavá tlačítka přes celou šíři sloupce
nedávala najevo, co je hlavní akce. */
.ms-discover{
position:relative;
padding-inline:clamp(20px,3vw,56px);
}
.ms-discover-inner{
max-width:1240px;
margin:0 auto;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:clamp(20px,2.4vw,32px);
opacity:0;
transform:translateY(22px);
transition:opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.ms-discover.is-in .ms-discover-inner{opacity:1;transform:none}
.ms-discover-title{
margin:0;
font-size:clamp(3.2rem,8.6vw,7.4rem);
font-weight:800;
letter-spacing:-.05em;
/* Pod .95 se háčky (č, é) lepí na řádek nad sebou. */
line-height:.95;
color:#fff;
}
.ms-discover-title-line{display:block}
.ms-discover-title-line--accent{color:var(--accent-bright)}
.ms-discover-lead{
margin:0;
max-width:30ch;
font-size:clamp(1.08rem,1.6vw,1.3rem);
line-height:1.45;
color:var(--muted);
}
.ms-discover-btn{
display:inline-flex;
align-items:center;
gap:12px;
min-height:56px;
padding:0 28px 0 32px;
margin-top:clamp(8px,1.4vw,16px);
border-radius:999px;
background:var(--accent-fill);
color:#fff;
font-size:1.05rem;
font-weight:700;
transition:transform .45s var(--ms-spring), background-color .18s ease;
}
.ms-discover-btn span{transition:transform .45s var(--ms-spring)}
.ms-discover-btn:hover,
.ms-discover-btn:focus-visible{
transform:scale(1.04);
background:#b81a25;
}
.ms-discover-btn:hover span,
.ms-discover-btn:focus-visible span{transform:translateX(4px)}
@media(max-width:640px){
.ms-discover-title{font-size:clamp(2.8rem,14vw,3.8rem)}
}
/* Natočíme — panel sekce sám zmizí, panely nesou až bloky. */
.ms-engage{
background:none;
padding:0;
}
.ms-engage-inner{
display:grid;
grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
gap:clamp(10px,1.2vw,18px);
align-items:stretch;
}
.ms-engage-block{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:14px;
margin:0;
padding:clamp(32px,4.4vw,72px) clamp(24px,4vw,64px);
border-radius:var(--radius-panel);
background:rgba(255,255,255,.035);
opacity:0;
transform:translateY(20px);
transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.ms-engage.is-in .ms-engage-block{opacity:1;transform:none}
.ms-engage.is-in .ms-engage-block--support{transition-delay:.1s}
/* Bílá na --accent-fill = 4,82:1, proto v červeném panelu všechen text
čistě bílý — žádné průhledné „tlumené“ odstíny. */
.ms-engage-block--club{
background:var(--accent-fill);
color:#fff;
}
.ms-engage-kicker{
margin:0;
font-size:.78rem;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--accent-bright);
}
.ms-engage-block--club .ms-engage-kicker{color:#fff}
.ms-engage-block--support .ms-engage-kicker{color:var(--muted)}
.ms-engage-title{
margin:0;
font-size:clamp(1.8rem,3vw,2.6rem);
font-weight:800;
letter-spacing:-.04em;
line-height:1.02;
color:#fff;
}
.ms-engage-block--club .ms-engage-title{
font-size:clamp(2.6rem,5.6vw,5rem);
line-height:.95;
letter-spacing:-.05em;
}
.ms-engage-text{
margin:0;
max-width:42ch;
font-size:clamp(1.02rem,1.45vw,1.2rem);
line-height:1.5;
color:var(--muted);
}
.ms-engage-block--club .ms-engage-text{color:#fff}
.ms-engage-perks{
list-style:none;
margin:4px 0 0;
padding:0;
display:flex;
flex-wrap:wrap;
gap:8px;
}
.ms-engage-perks li{
padding:7px 14px;
border-radius:999px;
border:1.5px solid rgba(255,255,255,.6);
font-size:.9rem;
font-weight:600;
color:#fff;
}
.ms-engage-actions{
margin-top:auto;
padding-top:clamp(14px,2vw,26px);
display:flex;
flex-wrap:wrap;
align-items:center;
gap:12px 24px;
}
.ms-engage-btn{
display:inline-flex;
align-items:center;
gap:12px;
min-height:56px;
padding:0 26px 0 30px;
border-radius:999px;
font-size:1.05rem;
font-weight:700;
background:#fff;
color:#0b0b0c;
transition:transform .45s var(--ms-spring), background-color .18s ease, box-shadow .18s ease;
}
.ms-engage-btn-arrow{transition:transform .45s var(--ms-spring)}
.ms-engage-btn:hover,
.ms-engage-btn:focus-visible{transform:scale(1.04)}
.ms-engage-btn:hover .ms-engage-btn-arrow,
.ms-engage-btn:focus-visible .ms-engage-btn-arrow{transform:translateX(4px)}
/* Na červeném panelu by červený obrys zmizel — bílý s tmavou mezerou. */
.ms-engage-block--club .ms-engage-btn:focus-visible{
outline:3px solid #fff;
outline-offset:4px;
box-shadow:0 0 0 4px #0b0b0c;
border-radius:999px;
}
.ms-engage-btn--ghost{
background:transparent;
color:var(--ink);
box-shadow:inset 0 0 0 2px rgba(255,255,255,.28);
}
.ms-engage-btn--ghost:hover,
.ms-engage-btn--ghost:focus-visible{
background:rgba(255,255,255,.08);
box-shadow:inset 0 0 0 2px var(--accent-bright);
}
.ms-engage-btn--ghost:focus-visible{
outline:3px solid var(--accent);
outline-offset:4px;
border-radius:999px;
}
.ms-engage-link{
font-weight:700;
color:#fff;
text-decoration:underline;
text-underline-offset:4px;
text-decoration-thickness:2px;
}
.ms-engage-link:hover{text-decoration-thickness:3px}
.ms-engage-block--club .ms-engage-link:focus-visible{
outline:3px solid #fff;
outline-offset:4px;
box-shadow:0 0 0 4px #0b0b0c;
border-radius:6px;
}
@media(max-width:860px){
.ms-engage-inner{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
.ms-discover-inner,.ms-engage-block{opacity:1;transform:none;transition:none}
.ms-discover-btn,.ms-discover-btn span,.ms-engage-btn,.ms-engage-btn-arrow{transition:none}
.ms-discover-btn:hover,.ms-discover-btn:focus-visible,
.ms-engage-btn:hover,.ms-engage-btn:focus-visible{transform:none}
}
/* ── Lišta sportů na stránce sportu ──────────────────────────────────────────
Stejný jazyk jako horní lišta: jedna skleněná kapsle, uvnitř kapslové
záložky, vybraná je plná červená. Dřív to byly vysoké dlaždice s velkou
ikonou nad názvem, které vypadaly jako ikony aplikací a ne jako zbytek webu. */
.sport-channels{
margin:10px var(--page-pad) 0;
}
.sport-channels-rail{
display:flex;
align-items:center;
gap:4px;
overflow-x:auto;
scrollbar-width:none;
scroll-snap-type:x proximity;
padding:6px;
background:rgba(228,228,231,.12);
backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
border:1px solid rgba(255,255,255,.28);
border-radius:999px;
box-shadow:0 8px 28px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18);
}
.sport-channels-rail::-webkit-scrollbar{display:none}
/* Na široké obrazovce na střed, na úzké od kraje a scroll. justify-content:
center by při přetečení uřízl první položku nedosažitelně vlevo. */
.sport-channel:first-child{margin-left:auto}
.sport-channel:last-child{margin-right:auto}
.sport-channel{
position:relative;
flex:none;
display:flex;
align-items:center;
gap:10px;
min-height:48px;
padding:8px 20px 8px 10px;
border-radius:999px;
font-size:.95rem;
font-weight:700;
line-height:1;
white-space:nowrap;
color:var(--muted);
scroll-snap-align:center;
transition:color .18s ease, background-color .18s ease, transform .45s var(--ms-spring);
}
.sport-channel-icon-wrap{position:relative;display:block;flex:none}
.sport-channel-icon{
display:block;
width:32px;
height:auto;
border-radius:10px;
opacity:.7;
transition:opacity .18s ease;
}
.sport-channel-live{
position:absolute;
top:-2px;right:-2px;
width:10px;height:10px;
border-radius:50%;
background:var(--accent-bright);
box-shadow:0 0 0 2px #2a2a2c;
}
/* Jedna soustava tlačítek: vybraný = plná červená, ostatní tiché, najetí
i klávesnice = mírné zvětšení, stejně jako u karet. */
.sport-channel:hover,
.sport-channel:focus-visible{
color:#fff;
background:rgba(255,255,255,.1);
transform:scale(1.04);
z-index:2;
}
.sport-channel:hover .sport-channel-icon,
.sport-channel:focus-visible .sport-channel-icon{opacity:1}
.sport-channel:focus-visible{
/* Bílý obrys: červený by na červené aktivní kapsli zmizel. */
outline:3px solid #fff;
outline-offset:2px;
box-shadow:none;
}
.sport-channel.is-active,
.sport-channel.is-active:hover,
.sport-channel.is-active:focus-visible{
color:#fff;
background:var(--accent-fill);
}
.sport-channel.is-active .sport-channel-icon{opacity:1}
@media(max-width:640px){
.sport-channels{margin:8px 12px 0}
}
@media (prefers-reduced-motion:reduce){
.sport-channel,.sport-channel-icon{transition:none}
.sport-channel:hover,.sport-channel:focus-visible{transform:none}
}
/* ── Přechod: „Dynamic Island“ mezi lištou sportů a pilulkou loga ───────────
Jeden sdílený prvek nav-island: na stránce sportu je to lišta sportů, na
všech ostatních stránkách levá pilulka s logem. Prohlížeč mezi nimi
tweenuje polohu a velikost, my k tomu:
- obsah starého tvaru rychle zmizí, uprostřed letí jen prázdná skleněná
kapsle (pozadí na image-pair), nový obsah naskočí až na konci —
přesně jako ostrůvek na iPhonu, žádný natažený screenshot;
- pružinová křivka s lehkým přestřelem;
- snímky se nenatahují (object-fit:none), skupina je ořízne do kapsle.
Horní lišta stojí bez animace; starý snímek lišty je skrytý, aby
pilulka loga nebyla dvakrát (jednou v liště, jednou jako ostrůvek).
Sport → sport: ostrůvek stojí, obsah se přeblikne na nový výběr.
Jména jen během přechodu (.vt-chrome, skript v base.html). */
.vt-chrome header{view-transition-name:site-header;transition:none!important}
.vt-chrome .sport-channels-rail{view-transition-name:nav-island}
.vt-chrome:not(:has(.sport-channels)) .nav-pill--start{view-transition-name:nav-island}
:root{--ms-island-dur:.42s}
@media (prefers-reduced-motion:no-preference){
::view-transition-group(site-header),
::view-transition-old(site-header),
::view-transition-new(site-header){animation:none!important}
::view-transition-group(site-header){z-index:100}
::view-transition-old(site-header){opacity:0}
::view-transition-group(nav-island){
z-index:110;
overflow:clip;
border-radius:999px;
animation-duration:var(--ms-island-dur);
animation-timing-function:var(--ms-spring-soft);
}
::view-transition-image-pair(nav-island){
border-radius:999px;
animation:ms-island-shell var(--ms-island-dur) linear both;
}
::view-transition-old(nav-island),
::view-transition-new(nav-island){
width:100%;
height:100%;
object-fit:none;
object-position:50% 50%;
mix-blend-mode:normal;
}
::view-transition-old(nav-island){
animation:ms-island-content-out var(--ms-island-dur) linear both;
}
::view-transition-new(nav-island){
animation:ms-island-content-in var(--ms-island-dur) linear both;
}
}
/* Sport → sport: lišta má na obou stránkách stejný tvar, takže se nemá co
„přelévat“. Morf by obsah uprostřed skryl a zase ukázal (záblesk) — tady
se nový stav prostě ukáže hned, bez animace. */
@media (prefers-reduced-motion:no-preference){
.vt-same-strip::view-transition-group(nav-island),
.vt-same-strip::view-transition-image-pair(nav-island),
.vt-same-strip::view-transition-new(nav-island){animation:none!important}
.vt-same-strip::view-transition-new(nav-island){opacity:1}
.vt-same-strip::view-transition-old(nav-island){display:none}
}
/* Skleněná kapsle mezi tvary — stejné barvy jako .nav-pill. Na začátku
a na konci průhledná, protože tam pozadí nese samotný snímek pilulky. */
@keyframes ms-island-shell{
0%,100%{background-color:transparent}
16%,74%{background-color:rgba(48,48,51,.92)}
}
@keyframes ms-island-content-out{
0%{opacity:1}
22%,100%{opacity:0}
}
@keyframes ms-island-content-in{
0%,55%{opacity:0}
100%{opacity:1}
}
/* ── Homepage: hero od kraje ke kraji pod průhlednou lištou ───────────────────
Podle redbull.tv: lišta je fixní a průhledná nad hero, hero začíná úplně
nahoře a odjíždí se stránkou 1:1 (žádný parallax). Jen na homepage —
ostatní stránky mají obsah hned pod lištou, tam by fixní lišta překrývala
začátek obsahu. */
body.is-home header,
body.is-about header{
position:fixed;
top:0;left:0;right:0;
transition:transform .35s ease, background .3s ease;
}
body.is-home.is-past-hero header{
background:linear-gradient(180deg,rgba(11,11,12,.94) 0%,rgba(11,11,12,.66) 70%,transparent 100%);
}
.hero-tv{
margin:0;
border-radius:0;
}
/* Obsah hero nesmí zajet pod lištu: nahoře rezerva na její výšku. */
.hero-tv-content{padding-top:clamp(96px,9vw,120px)}
@media(max-width:640px){
.hero-tv-content{padding-top:84px}
}
/* ── Vstupní animace stránky sportu ──────────────────────────────────────────
Hero: ikona „vyskočí“, nadpis a popis vyjedou po sobě, fotka se z mírného
přiblížení usadí. Sekce níž: každá vyjede nahoru, až se objeví na obrazovce.
Zpoždění jsou pevná (.1–.3 s): při příchodu přes přechod mezi stránkami
nová stránka naplno naběhne až kolem .13–.36 s, takže se animace
odehraje na viditelné stránce a ne pod prolínáním.
Skrytý výchozí stav sekcí jen při zapnutém JS (scripting:enabled) a bez
„omezit pohyb“ — jinak je vše hned vidět. */
@keyframes ms-rise{
from{opacity:0;transform:translateY(22px)}
to{opacity:1;transform:none}
}
@keyframes ms-pop{
from{opacity:0;transform:scale(.55)}
to{opacity:1;transform:none}
}
@keyframes ms-hero-settle{
from{transform:scale(1.13)}
to{transform:scale(1.04)}
}
@media (prefers-reduced-motion:no-preference){
.sport-hero-bg{animation:ms-hero-settle 1.6s cubic-bezier(.22,1,.36,1) both}
.sport-hero-content h1{animation:ms-rise .9s var(--ms-spring) .12s both}
.sport-hero-content h1 .sport-hero-logo{animation:ms-pop .95s var(--ms-spring) .06s both}
.sport-hero-content p{animation:ms-rise .9s var(--ms-spring) .24s both}
}
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
.sport-section{
opacity:0;
transform:translateY(28px);
transition:opacity .5s ease-out var(--rv-delay,0s), transform .95s var(--ms-spring) var(--rv-delay,0s);
}
.sport-section.is-shown{opacity:1;transform:none}
/* První sekce hned pod hero naskočí až po nadpisu. */
.sport-section--split{--rv-delay:.3s}
}
/* ── Pružina ─────────────────────────────────────────────────────────────────
Jedna sdílená křivka pro celý pohyb, jako u Apple rozhraní: místo
pevného „ease“ tlumená pružina, která mírně přestřelí cíl a usadí se
(--ms-spring: přestřel ~8 %, pro prvky rozhraní; --ms-spring-soft: ~1,5 %,
pro míč a „ostrůvek“, kde by velký přestřel působil neklidně).
Křivky jsou spočítané tlumené kmity (ζ .62 / .8) zapsané přes linear().
Starší prohlížeče dostanou obyčejnou cubic-bezier, která pružinu připomíná. */
:root{
--ms-spring:cubic-bezier(.34,1.3,.64,1);
--ms-spring-soft:cubic-bezier(.32,1.12,.5,1);
}
@supports (animation-timing-function:linear(0,1)){
:root{
--ms-spring:linear(0, 0.036, 0.128, 0.252, 0.391, 0.53, 0.659, 0.774, 0.869, 0.945, 1.002, 1.042, 1.067, 1.08, 1.084, 1.08, 1.072, 1.062, 1.05, 1.039, 1.028, 1.019, 1.011, 1.004, 1, 0.996, 0.994, 0.993, 0.993, 0.993, 0.994, 0.995, 0.996, 0.997, 0.998, 0.998, 1);
--ms-spring-soft:linear(0, 0.035, 0.12, 0.231, 0.351, 0.47, 0.579, 0.676, 0.758, 0.826, 0.88, 0.922, 0.954, 0.977, 0.993, 1.004, 1.01, 1.014, 1.015, 1.015, 1.014, 1.012, 1.01, 1.009, 1.007, 1.005, 1.004, 1.003, 1);
}
}
/* ── Pravidla jako karty ─────────────────────────────────────────────────────
Texty pravidel jsou krátké (65–300 znaků), takže je nemá smysl schovávat za
rozklikávací harmoniku — všechno je vidět hned. Karta s fotkou má číslo jako
skleněnou kapsli v rohu snímku, karta bez fotky velké číslo nahoře.
Karty nejsou odkazy, proto nereagují zvětšením (to by slibovalo klik) —
jen pomalé přiblížení fotky. Starý styl .ms-rules* zůstává pro samostatnou
stránku „Celá pravidla“. */
.ms-rulecards{
list-style:none;margin:0 0 26px;padding:0;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
gap:clamp(12px,1.4vw,20px);
max-width:1100px;
}
.ms-rulecard{
display:flex;flex-direction:column;
margin:0;overflow:hidden;
background:var(--surface);
border-radius:var(--radius);
}
.ms-rulecard-media{
position:relative;
aspect-ratio:16/10;
overflow:hidden;
background:var(--bg);
}
.ms-rulecard-img{
display:block;width:100%;height:100%;object-fit:cover;
transition:transform 1.4s var(--ms-spring-soft);
}
.ms-rulecard:hover .ms-rulecard-img{transform:scale(1.05)}
.ms-rulecard-num{
position:absolute;top:12px;left:12px;
display:grid;place-items:center;
min-width:40px;height:40px;padding:0 12px;
border-radius:999px;
background:rgba(11,11,12,.55);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.24);
font-size:1rem;font-weight:800;color:#fff;
font-variant-numeric:tabular-nums;
}
.ms-rulecard-body{
display:flex;flex-direction:column;gap:8px;
padding:18px 20px 22px;
}
.ms-rulecard--plain .ms-rulecard-body{padding-top:22px}
.ms-rulecard-big{
font-size:3.2rem;font-weight:800;line-height:1;letter-spacing:-.05em;
color:var(--accent-bright);font-variant-numeric:tabular-nums;
}
.ms-rulecard-title{
margin:0;
font-size:1.2rem;font-weight:800;letter-spacing:-.03em;line-height:1.15;
}
.ms-rulecard-text{
margin:0;color:var(--muted);font-size:1rem;line-height:1.55;
}
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
.ms-rulecard{
transition:opacity .5s ease-out calc(var(--i,0) * 90ms + .12s), transform 1s var(--ms-spring) calc(var(--i,0) * 90ms + .12s);
}
.sport-section:not(.is-shown) .ms-rulecard{opacity:0;transform:translateY(26px) scale(.97)}
}
@media (prefers-reduced-motion:reduce){
.ms-rulecard-img{transition:none}
}
/* Na stránce sportu leží nadpisy sekcí nad obsahem, ne nad řadou přes celou
šířku — odsazení z TV rozvržení (.sec-head) tu posouvalo nadpis vedle karet. */
.sport-page .sec-head,
.sport-page .sec-head-inset{padding-inline:0}
/* ── Stránka Pravidla: řádky + lepicí panel ───────────────────────────────────
Vlevo pravidla jako velké řádky (foto vedle textu), vpravo panel s oficiálním
zněním, který zůstává na očích při scrollu. Na mobilu je panel nahoře.
Sport bez našeho shrnutí (hokej, badminton) = panel je hlavní obsah. */
.rules-page{padding-block:clamp(18px,2.6vw,36px) clamp(40px,6vw,80px)}
.rules-backlink{
display:inline-flex;align-items:center;gap:8px;
min-height:44px;padding:0 18px;
border-radius:999px;background:var(--surface);
font-weight:700;color:var(--ink);
transition:transform .45s var(--ms-spring), background-color .18s ease;
}
.rules-backlink:hover,.rules-backlink:focus-visible{background:var(--surface-raised);transform:scale(1.04)}
.rules-page-head{margin:clamp(18px,2.4vw,30px) 0 clamp(22px,3vw,40px)}
.rules-page-head h1{margin:0}
.rules-page .rules-page-lead{margin:12px 0 0;color:var(--muted);font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:46ch}
.rules-layout{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,360px);
gap:clamp(20px,2.6vw,40px);
align-items:start;
max-width:1200px;
}
.rules-layout--solo{grid-template-columns:minmax(0,960px)}
.rules-layout--solo .rule-source--sticky{position:static}
.rules-main{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,24px);min-width:0}
.rule-rows{
list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:clamp(12px,1.4vw,20px);
}
.rule-row{
display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);
background:var(--surface);border-radius:var(--radius);overflow:hidden;
}
.rule-row--plain{grid-template-columns:minmax(0,1fr)}
.rule-row-media{position:relative;min-height:230px;background:var(--bg);overflow:hidden}
.rule-row-media img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transition:transform 1.4s var(--ms-spring-soft);
}
.rule-row:hover .rule-row-media img{transform:scale(1.05)}
.rule-row-body{
display:flex;flex-direction:column;justify-content:center;gap:8px;
padding:clamp(20px,2.6vw,34px);
}
.rule-row-num{
font-size:clamp(2.6rem,4vw,3.6rem);font-weight:800;line-height:1;letter-spacing:-.05em;
color:var(--accent-bright);font-variant-numeric:tabular-nums;
}
.rule-row-title{margin:0;font-size:clamp(1.3rem,2vw,1.7rem);font-weight:800;letter-spacing:-.035em;line-height:1.1}
.rules-page .rule-row-text{margin:0;color:var(--muted);font-size:1.05rem;line-height:1.6;max-width:52ch}
.rules-empty{margin:0 0 6px;font-size:1.05rem}
/* Panel „Oficiální znění“ — sdílený (stránka Pravidla i stránka sportu). */
.rule-source{
padding:clamp(22px,2.6vw,30px);
border-radius:var(--radius);
background:var(--surface);
}
.rule-source--sticky{position:sticky;top:104px}
.rule-source .rule-source-kicker{
margin:0 0 8px;
font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--accent-bright);
}
.rule-source-title{margin:0;font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:800;letter-spacing:-.04em;line-height:1.08}
.rule-source .rule-source-meta{margin:8px 0 0;color:var(--muted);font-size:1rem;line-height:1.45}
.rule-source-actions{margin-top:20px}
.rule-source-btn{
display:inline-flex;align-items:center;gap:10px;
min-height:52px;padding:0 24px 0 26px;
border-radius:999px;background:#fff;color:#0b0b0c;
font-weight:700;font-size:1.02rem;
transition:transform .45s var(--ms-spring), background-color .18s ease;
}
.rule-source-btn:hover,.rule-source-btn:focus-visible{background:#e4e4e7;transform:scale(1.04)}
.rule-source-links{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.rule-source-links a{
font-weight:600;color:var(--ink);
text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;
}
.rule-source-links a:hover{color:var(--accent-bright)}
/* Kompaktní varianta pod kartami na stránce sportu: text vlevo, tlačítko vpravo. */
.rule-source--compact{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:18px 32px;margin-top:clamp(16px,2vw,24px);max-width:1100px;
}
.rule-source--compact .rule-source-actions{margin-top:0}
.rule-source--compact .rule-source-links{flex-direction:row;flex-wrap:wrap;gap:6px 18px}
.rule-source--compact .rule-source-title{font-size:clamp(1.2rem,1.8vw,1.5rem)}
@media (max-width:900px){
.rules-layout{grid-template-columns:minmax(0,1fr)}
.rule-source--sticky{position:static;order:-1}
.rule-row{grid-template-columns:minmax(0,1fr)}
.rule-row-media{min-height:0;aspect-ratio:16/10}
}
@media (prefers-reduced-motion:no-preference){
.rule-row{animation:ms-rise .9s var(--ms-spring) calc(var(--i,0) * 90ms + .1s) both}
.rule-source--sticky{animation:ms-rise .9s var(--ms-spring) .2s both}
}
@media (prefers-reduced-motion:reduce){
.rule-source-btn,.rules-backlink,.rule-row-media img{transition:none}
.rule-source-btn:hover,.rule-source-btn:focus-visible,
.rules-backlink:hover,.rules-backlink:focus-visible{transform:none}
}
/* ── Schéma hřiště ───────────────────────────────────────────────────────────
Kreslí se jako SVG (web/data/court_diagrams.py). Čáry jsou bílé na tmlavé
ploše, zvýrazněná část hřiště je červená — stejně jako vybraný stupeň
žebříčku a vybraný sport v liště. */
.court-viz{
padding:clamp(20px,2.6vw,32px);
border-radius:var(--radius);
background:var(--surface);
}
.court-viz-kicker{
margin:0 0 8px;
font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--accent-bright);
}
.court-viz .court-viz-title{margin:0;font-size:clamp(1.4rem,2.4vw,2rem);font-weight:800;letter-spacing:-.04em;line-height:1.08}
.court-viz-meta{
list-style:none;margin:18px 0 8px;padding:0;
display:flex;flex-wrap:wrap;gap:10px 28px;
}
.court-viz-meta li{display:flex;flex-direction:column;gap:2px;min-width:0}
.court-viz-meta strong{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums}
.court-viz-meta span{font-size:.82rem;font-weight:600;color:var(--muted);line-height:1.3}
.court-svg{display:block;width:100%;height:auto;margin:10px 0 4px;overflow:visible}
.cv-court{fill:rgba(255,255,255,.05)}
.cv-freezone{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.5;stroke-dasharray:5 7}
.cv-servezone{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.26);stroke-width:1.5;stroke-dasharray:4 6}
.cv-line{fill:none;stroke:rgba(255,255,255,.85);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.cv-line.cv-thin{stroke-width:2.4}
.cv-line.cv-dash{stroke-dasharray:10 9}
.cv-line.cv-red{stroke:#ff4654}
.cv-line.cv-blue{stroke:#6ea8ff;stroke-width:4.4}
.cv-line.cv-area{fill:rgba(255,255,255,.05)}
.cv-line.cv-crease{fill:rgba(110,168,255,.3);stroke:#6ea8ff}
.cv-board{fill:none;stroke:rgba(255,255,255,.92);stroke-width:5}
.cv-goal{fill:rgba(255,255,255,.18);stroke:#fff;stroke-width:3.6}
.cv-net{stroke:#fff;stroke-width:5;stroke-linecap:round}
.cv-dot{fill:#fff}
.cv-dot--red{fill:#ff4654}
.cv-player--a{fill:var(--accent-fill)}
.cv-player--b{fill:rgba(255,255,255,.92)}
.cv-route{stroke:rgba(255,255,255,.5)}
.cv-gate{stroke:#ff4654;stroke-width:6}
.cv-jump{stroke:#fff;stroke-width:7;stroke-linecap:round}
.cv-label{fill:var(--muted);font-size:21px;font-weight:600;letter-spacing:.02em}
.cv-label--big{fill:rgba(255,255,255,.62);font-size:21px;text-transform:uppercase;letter-spacing:.12em}
.cv-label--num{fill:#fff;font-size:26px;font-weight:800}
.cv-dim{stroke:rgba(255,255,255,.45);stroke-width:2.2}
.cv-dimtext{fill:rgba(255,255,255,.78);font-size:22px;font-weight:700}
/* Klikací plochy: téměř průhledné, ale zachytávají ukazatel. */
.cv-hit{
fill:rgba(255,255,255,.001);stroke:none;
pointer-events:all;cursor:pointer;
transition:fill .3s ease, stroke .3s ease;
}
.cv-hit--line{fill:none;stroke:rgba(255,255,255,.001);stroke-width:18;stroke-linecap:round}
.cv-zone:not(.is-on) .cv-hit:hover{fill:rgba(255,255,255,.1)}
.cv-zone:not(.is-on) .cv-hit--line:hover{fill:none;stroke:rgba(255,255,255,.32)}
.cv-zone.is-on .cv-hit{fill:rgba(229,32,45,.38);stroke:var(--accent-bright);stroke-width:3.5}
.cv-zone.is-on .cv-hit--line{fill:none;stroke:var(--accent-bright);stroke-width:8;stroke-opacity:.95}
.court-viz-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.cv-chip{
min-height:44px;padding:0 18px;
border:0;border-radius:999px;
background:rgba(255,255,255,.08);color:var(--ink);
font:inherit;font-size:.95rem;font-weight:700;cursor:pointer;
transition:background-color .18s ease, transform .45s var(--ms-spring);
}
.cv-chip:hover,.cv-chip:focus-visible{background:rgba(255,255,255,.14);transform:scale(1.04)}
.cv-chip.is-on,.cv-chip.is-on:hover{background:var(--accent-fill);color:#fff}
.court-viz-captions{margin-top:14px}
.cv-caption{margin:0}
.cv-caption + .cv-caption{margin-top:14px}
.cv-caption-title{margin:0 0 4px;font-size:1.15rem;font-weight:800;letter-spacing:-.03em}
.court-viz .cv-caption-text{margin:0;color:var(--muted);font-size:1.02rem;line-height:1.55;max-width:62ch}
/* S JS se ukazuje jen vybraný popis; ostatní zůstávají pod ním ve stejné buňce,
takže se výška nemění při přepínání. */
.cv-js .court-viz-captions{display:grid}
.cv-js .cv-caption{
grid-area:1/1;margin:0;
opacity:0;visibility:hidden;transform:translateY(6px);
transition:opacity .25s ease, transform .45s var(--ms-spring), visibility 0s linear .25s;
}
.cv-js .cv-caption.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media (prefers-reduced-motion:no-preference){
.court-viz .cv-line,.court-viz .cv-board,.court-viz .cv-goal,.court-viz .cv-net{
stroke-dasharray:1;stroke-dashoffset:1;
animation:cv-draw 1.5s var(--ms-spring-soft) .15s forwards;
}
.court-viz .cv-line.cv-dash{stroke-dasharray:10 9;stroke-dashoffset:0;animation:cv-fade .9s ease .7s both}
.court-viz .cv-player,.court-viz .cv-label,.court-viz .cv-dimtext{animation:cv-fade .8s ease .9s both}
}
@keyframes cv-draw{to{stroke-dashoffset:0}}
@keyframes cv-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
.cv-chip,.cv-hit,.cv-js .cv-caption{transition:none}
.cv-chip:hover,.cv-chip:focus-visible{transform:none}
}
/* ── O nás: „kino“ ──────────────────────────────────────────────────────────
Každý blok je scéna přes celou obrazovku. Scény jsou „přilepené“ (sticky),
takže další vždy přejede přes předchozí — jako na produktových stránkách
Applu. Pod průhlednou lištou, stejně jako úvodní strana (body.is-about). */
.about-scenes{position:relative}
.about-scene{
position:relative;
display:flex;align-items:flex-end;
min-height:100svh;
overflow:hidden;
isolation:isolate;
background:var(--bg);
}
.about-scene-bg{
position:absolute;inset:0;z-index:-2;
background-size:cover;background-position:center;
background-color:#161617;
transform:scale(1.04);
}
.about-scene-shade{
position:absolute;inset:0;z-index:-1;
background:
linear-gradient(0deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.62) 42%,rgba(11,11,12,.34) 100%),
linear-gradient(90deg,rgba(11,11,12,.55),transparent 70%);
}
.about-scene-inner{
width:100%;
padding-block:clamp(96px,14vh,140px) clamp(56px,10vh,110px);
}
.about-kicker{
margin:0 0 clamp(14px,2vh,24px);
font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--accent-bright);
}
.about-kicker--white{color:#fff}
.about-headline{
margin:0;
font-size:clamp(3rem,10.4vw,9.4rem);
font-weight:800;letter-spacing:-.055em;
/* Pod .95 se háčky (á, é) lepí na řádek nad sebou. */
line-height:.95;
max-width:13ch;color:#fff;
}
.about-word{display:inline-block}
.about-accent{color:var(--accent-bright)}
.about-scene .about-lead{
margin:clamp(18px,3vh,34px) 0 0;
max-width:46ch;
font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.5;color:rgba(255,255,255,.82);
}
.about-scroll{
position:absolute;left:50%;bottom:clamp(16px,3vh,30px);
transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;gap:4px;
font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.75);
}
.about-scroll i{font-style:normal;font-size:1.3rem;line-height:1}
.about-scroll:hover,.about-scroll:focus-visible{color:#fff}
/* 3D míč vedle nadpisu — využívá stavy .sport-hero-ball (stín, usazení). */
.about-hero-ball{
right:max(12px,4vw);
top:auto;
bottom:clamp(70px,16vh,170px);
width:min(44vw,430px);
height:min(44vw,430px);
z-index:2;
}
/* Scény s textem */
.about-scene-num{
display:block;
font-size:clamp(6rem,24vw,17rem);font-weight:800;line-height:.8;letter-spacing:-.07em;
color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.6);
font-variant-numeric:tabular-nums;
margin-bottom:clamp(10px,2vh,24px);
}
.about-scene-title{
margin:0;max-width:14ch;
font-size:clamp(2.2rem,6.6vw,5.4rem);font-weight:800;letter-spacing:-.05em;line-height:.97;color:#fff;
}
.about-scene .about-scene-text{
margin:clamp(14px,2.4vh,26px) 0 0;max-width:46ch;
font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.5;color:rgba(255,255,255,.88);
}
/* Poslední scéna */
.about-scene--cta{background:var(--accent-fill);align-items:center}
.about-scene--cta .about-scene-inner{padding-block:clamp(90px,14vh,140px)}
.about-cta-title{
margin:0;
font-size:clamp(3rem,11vw,9.6rem);font-weight:800;letter-spacing:-.06em;line-height:.93;color:#fff;max-width:12ch;
}
.about-scene .about-cta-text{
margin:clamp(18px,3vh,32px) 0 0;max-width:44ch;
font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.5;color:#fff;
}
.about-cta-btn{
display:inline-flex;align-items:center;gap:12px;
min-height:60px;padding:0 30px 0 34px;margin-top:clamp(22px,4vh,40px);
border-radius:999px;background:#fff;color:#0b0b0c;
font-weight:700;font-size:1.1rem;
transition:transform .45s var(--ms-spring), background-color .18s ease;
}
.about-cta-btn span{transition:transform .45s var(--ms-spring)}
.about-cta-btn:hover,.about-cta-btn:focus-visible{background:#f0f0f1;transform:scale(1.05)}
.about-cta-btn:hover span,.about-cta-btn:focus-visible span{transform:translateX(5px)}
.about-cta-btn:focus-visible{outline:3px solid #fff;outline-offset:4px;box-shadow:0 0 0 4px #0b0b0c;border-radius:999px}
@media (prefers-reduced-motion:no-preference){
/* Scény na sebe nalézají: další přejede přes předchozí. Poslední (červená)
zůstává v toku, ať stránka normálně skončí. */
.about-scene--hero,.about-scene--step{position:sticky;top:0;height:100svh;min-height:0}
.about-scene--step{box-shadow:0 -30px 60px rgba(0,0,0,.55)}
/* Nadpis po slovech. */
.about-kicker{animation:ms-rise .9s var(--ms-spring) .05s both}
.about-word{animation:ms-rise 1s var(--ms-spring) calc(.18s + var(--w) * 85ms) both}
.about-scene .about-lead{animation:ms-rise .9s var(--ms-spring) 1s both}
.about-scroll{animation:ms-rise .9s var(--ms-spring) 1.3s both}
.about-scroll i{animation:about-bob 1.8s ease-in-out infinite 2.2s}
.about-scene--hero .about-scene-bg{animation:about-kenburns 14s ease-out forwards}
}
@keyframes about-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes about-kenburns{from{transform:scale(1.16)}to{transform:scale(1.04)}}
/* Text ostatních scén vyjede, až je scéna vidět (jen s JS a pohybem). */
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
.about-scene--step:not(.is-in) .about-scene-num,
.about-scene--step:not(.is-in) .about-scene-title,
.about-scene--step:not(.is-in) .about-scene-text,
.about-scene--cta:not(.is-in) .about-scene-inner > *{opacity:0;transform:translateY(34px)}
.about-scene--step .about-scene-num,
.about-scene--step .about-scene-title,
.about-scene--step .about-scene-text,
.about-scene--cta .about-scene-inner > *{
transition:opacity .5s ease-out, transform 1s var(--ms-spring);
}
.about-scene--step .about-scene-title,.about-scene--cta .about-cta-title{transition-delay:.1s}
.about-scene--step .about-scene-text,.about-scene--cta .about-cta-text{transition-delay:.2s}
.about-scene--cta .about-cta-btn{transition-delay:.3s}
}
/* Fotka scény se při příjezdu zvolna usadí (tam, kde to prohlížeč umí). */
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.about-scene--step .about-scene-bg{
animation:about-bg-settle linear both;
animation-timeline:view();
animation-range:entry 0% cover 55%;
}
}
}
@keyframes about-bg-settle{from{transform:scale(1.22)}to{transform:scale(1.04)}}
body.over-red .navlink--logo span{color:#fff!important}
@media (max-width:760px){
.about-hero-ball{width:min(52vw,230px);height:min(52vw,230px);top:clamp(84px,12vh,120px);bottom:auto}
.about-headline{max-width:none}
}
@media (prefers-reduced-motion:reduce){
.about-cta-btn,.about-cta-btn span{transition:none}
.about-cta-btn:hover,.about-cta-btn:focus-visible{transform:none}
}
/* ── Kontakt ─────────────────────────────────────────────────────────────────
Úvod přes celou obrazovku: e-mail jako obří nápis, který se při najetí
zbarví do červena, velký obrysový „@“ v pozadí a 3D míč. */
.contact-hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate;background:var(--bg)}
.contact-at{
position:absolute;right:-4vw;top:50%;transform:translateY(-52%);z-index:-1;
font-size:clamp(22rem,62vw,58rem);font-weight:800;line-height:.7;letter-spacing:-.05em;
color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.13);pointer-events:none;
}
.contact-hero-inner{padding-block:clamp(110px,16vh,150px) clamp(60px,10vh,100px)}
.contact-live{display:inline-block;width:10px;height:10px;margin-right:10px;border-radius:50%;background:var(--accent-bright);box-shadow:0 0 0 0 rgba(255,70,84,.6)}
.contact-title{margin:0;font-size:clamp(3rem,11vw,9rem);font-weight:800;letter-spacing:-.055em;line-height:.95;color:#fff}
.contact-mail{
display:inline-block;margin-top:clamp(18px,3vh,36px);
font-size:clamp(1.55rem,8.6vw,7.6rem);font-weight:800;letter-spacing:-.05em;line-height:1;white-space:nowrap;
color:#fff;border-bottom:.07em solid var(--accent-bright);padding-bottom:.06em;
transition:color .25s ease,transform .45s var(--ms-spring);
}
.contact-mail:hover,.contact-mail:focus-visible{color:var(--accent-bright);transform:translateX(8px)}
.contact-actions{display:flex;align-items:center;gap:16px;margin-top:clamp(18px,3vh,30px);flex-wrap:wrap}
.contact-copy{
min-height:52px;padding:0 26px;border:0;border-radius:999px;background:#fff;color:#0b0b0c;
font:inherit;font-weight:700;font-size:1.02rem;cursor:pointer;
transition:transform .45s var(--ms-spring),background-color .18s ease;
}
.contact-copy:hover,.contact-copy:focus-visible{background:#e4e4e7;transform:scale(1.05)}
.contact-copied{font-weight:700;color:var(--accent-bright)}
.contact-ball{top:clamp(90px,14vh,140px);bottom:auto;right:max(12px,5vw)}
.contact-bottom{padding-block:clamp(40px,6vw,80px) clamp(50px,7vw,100px);max-width:1100px}
.contact-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(12px,1.4vw,20px)}
.contact-tile{
position:relative;display:flex;flex-direction:column;gap:10px;min-height:220px;
padding:clamp(22px,2.6vw,32px);padding-right:70px;
border-radius:var(--radius-panel);background:var(--surface);color:#fff;
transition:transform .45s var(--ms-spring),background-color .18s ease;
}
.contact-tile:hover,.contact-tile:focus-visible{background:var(--surface-raised);transform:scale(1.03)}
.contact-tile--hot,.contact-tile--hot:hover,.contact-tile--hot:focus-visible{background:var(--accent-fill)}
.contact-tile-label{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-bright)}
.contact-tile--hot .contact-tile-label{color:#fff}
.contact-tile-value{margin-top:auto;font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:800;letter-spacing:-.04em;line-height:1.08}
.contact-tile-go{position:absolute;right:20px;top:20px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);font-size:1.15rem;transition:transform .45s var(--ms-spring)}
.contact-tile:hover .contact-tile-go,.contact-tile:focus-visible .contact-tile-go{transform:translateX(4px)}
.contact-tile--hot .contact-tile-go{background:rgba(255,255,255,.22)}
.contact-info{margin-top:clamp(28px,4vw,48px);color:var(--muted);font-size:.95rem;line-height:1.6}
.contact-info p{margin:0 0 4px;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
.contact-live{animation:contact-pulse 1.8s ease-out infinite}
.contact-title .about-word{animation:ms-rise 1s var(--ms-spring) calc(.12s + var(--w) * 90ms) both}
.contact-mail{animation:ms-rise 1.1s var(--ms-spring) .55s both}
.contact-actions{animation:ms-rise .9s var(--ms-spring) .8s both}
.contact-at{animation:ms-rise 1.4s var(--ms-spring) .1s both}
}
@keyframes contact-pulse{0%{box-shadow:0 0 0 0 rgba(255,70,84,.6)}100%{box-shadow:0 0 0 14px rgba(255,70,84,0)}}
@media (max-width:760px){.contact-ball{width:min(46vw,200px);height:min(46vw,200px)}}
@media (prefers-reduced-motion:reduce){.contact-tile,.contact-tile-go,.contact-mail,.contact-copy{transition:none}.contact-tile:hover,.contact-mail:hover,.contact-copy:hover{transform:none}}
/* Míč nesmí překrývat text: nahoře vpravo, menší, a text se mu vyhýbá. */
.contact-ball{top:clamp(80px,11vh,120px);right:max(12px,3vw);width:min(26vw,260px);height:min(26vw,260px);z-index:0;opacity:.95}
.contact-hero-inner{position:relative;z-index:1}
@media (max-width:760px){.contact-ball{width:min(34vw,150px);height:min(34vw,150px);top:84px}}
/* Objevuj: míč vpravo přes polovinu panelu + řada sportů jako odkazy. */
.ms-discover{position:relative}
.ms-discover-chips{list-style:none;margin:clamp(6px,1vw,12px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:min(100%,640px)}
.ms-discover-chips a{
display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;
background:rgba(255,255,255,.08);color:var(--ink);font-weight:700;
transition:background-color .18s ease,transform .45s var(--ms-spring);
}
.ms-discover-chips a:hover,.ms-discover-chips a:focus-visible{background:var(--accent-fill);color:#fff;transform:scale(1.06)}
.ms-discover-ball{
right:clamp(10px,6vw,110px);top:50%;bottom:auto;transform:translateY(-50%);
width:min(36vw,460px);height:min(36vw,460px);z-index:1;
}
@media (max-width:860px){
.ms-discover-ball{position:relative;right:auto;top:auto;transform:none;margin:8px auto 0;width:min(70vw,300px);height:min(70vw,300px)}
}
/* Objevuj — kompaktnější: dřív zabíral skoro celou obrazovku. Menší nadpis,
menší vzduch, míč vpravo na výšku textu; tlačítko „Vyber sport“ odpadlo,
protože sporty se vybírají rovnou kapslemi. */
.ms-discover{padding-block:clamp(26px,3.2vw,52px)}
.ms-discover-inner{gap:clamp(12px,1.6vw,20px);max-width:1240px;padding-right:min(30vw,340px)}
.ms-discover-title{font-size:clamp(2.3rem,5vw,4.2rem)}
.ms-discover-lead{font-size:clamp(1rem,1.3vw,1.15rem)}
.ms-discover-ball{width:min(24vw,280px);height:min(24vw,280px);right:clamp(16px,5vw,90px)}
@media (max-width:860px){
.ms-discover-inner{padding-right:0}
.ms-discover-ball{position:absolute;top:clamp(18px,4vw,30px);right:12px;transform:none;margin:0;width:min(30vw,130px);height:min(30vw,130px)}
.ms-discover-title{font-size:clamp(2.1rem,10vw,2.9rem);max-width:7ch}
}
/* ── Mobil: dotykové cíle a nejmenší písmo ───────────────────────────────────
Z auditu na šířce 375 px (nic nepřetékalo, ale tohle se špatně trefovalo
prstem nebo četlo). Doporučené minimum pro dotyk je ~44 px. */
@media (pointer:coarse), (max-width:760px){
/* Tečky karuselu: viditelná tečka zůstává malá, plocha pro prst je 44 px. */
.hero-dot{position:relative}
.hero-dot::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.hero-dots-list{gap:20px}
/* Patička: odkazy pod sebou s výškou na prst. */
.site-footer-links{gap:0}
.site-footer-links a,.site-footer-contact a{display:inline-flex;align-items:center;min-height:44px}
.site-footer-social-link{width:44px;height:44px}
/* Odkazy pod panelem oficiálních pravidel a „Jak to probíhá“. */
.rule-source-links a,.ms-engage-link{display:inline-flex;align-items:center;min-height:44px}
.rule-source-links{gap:0}
}
/* Nic menšího než 12 px. */
.sponsor-strip-kicker,.liga-ladder-count-label{font-size:.75rem}
.rec-tag,.sport-live-badge,.ms-cal-legend-count,.sport-schedule-mon{font-size:max(.72rem,12px)}
/* Mobil: úvod a patička. */
@media (max-width:760px){
/* Šipky ležely přes text; přepíná se přejetím prstem a tečkami. */
.hero-arrow{display:none}
/* Popis v úvodu max. 3 řádky, ať se tlačítko vejde na první obrazovku. */
.hero-tv p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Odkazy v patičce ve dvou sloupcích — s výškou 44 px by byl seznam dlouhý. */
.site-footer-links{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
}
/* Podklad mapy (OpenStreetMap) převedený do tmavé: invertovat a vrátit
odstíny, aby voda zůstala modravá a ne oranžová. */
.map-tiles-dark{filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.9) saturate(.6)}
/* Vlastní náhled (web/thumbnails.py): tlačítko přehrávání sedí na kruhu
s ikonou sportu vpravo, ne uprostřed přes titulek. Střed kruhu je na
1090/1280 × 360/720 náhledu. */
.rec-thumb-wrap--own .rec-play{left:85.2%;top:50%}
/* Objevuj na mobilu: nadpis na dva řádky, větší míč, sporty v jedné řadě
posouvané prstem (tři řádky kapslí zabíraly půlku panelu). */
@media (max-width:860px){
.ms-discover{padding-block:14px 16px;overflow-x:clip}
.ms-discover .ms-discover-chips{display:none}
.ms-discover-inner{min-width:0;width:100%;gap:8px}
.ms-discover-inner > .ms-discover-lead{margin-top:0}
.ms-discover-inner{padding-right:0;gap:12px}
.ms-discover-title{font-size:clamp(2.1rem,9.6vw,2.9rem);max-width:none;line-height:.95}
.ms-discover-lead{max-width:calc(100% - 128px);font-size:.95rem;line-height:1.45}
.ms-discover-ball{
top:6px;right:-4px;width:min(34vw,150px);height:min(34vw,150px);
}
.ms-discover-chips{
flex-wrap:nowrap;overflow-x:auto;gap:8px;max-width:none;
align-self:stretch;min-width:0;
margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px;
scroll-snap-type:x proximity;scrollbar-width:none;
}
.ms-discover-chips::-webkit-scrollbar{display:none}
.ms-discover-chips li{flex:none;scroll-snap-align:start}
}
/* Objevuj — ještě těsnější na všech šířkách (kapsle sportů odpadly). */
.ms-discover{padding-block:clamp(16px,2vw,28px)}
.ms-discover-inner{gap:8px;padding-right:min(24vw,260px)}
.ms-discover-title{font-size:clamp(2rem,3.8vw,3.2rem);line-height:.98}
.ms-discover-ball{width:min(16vw,170px);height:min(16vw,170px)}
@media (max-width:860px){
.ms-discover-inner{padding-right:0}
.ms-discover-ball{width:min(34vw,130px);height:min(34vw,130px)}
}
/* Autor hero fotky (licence CC BY-SA) — drobně vpravo nahoře, nekoliduje s míčem. */
.sport-hero-credit{
position:absolute;top:10px;right:14px;z-index:3;
font-size:.7rem;line-height:1.2;color:rgba(255,255,255,.86);
padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.55);
text-decoration:none;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sport-hero-credit:hover,.sport-hero-credit:focus-visible{color:#fff;background:rgba(0,0,0,.6)}
/* ── 404 „Míč je v autu“ ────────────────────────────────────────────────── */
.nf{min-height:calc(100svh - 120px);display:flex;align-items:center;padding-block:clamp(72px,12vh,120px) clamp(32px,6vh,72px);overflow:hidden}
.nf-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(10px,1.6vw,18px);width:100%}
.nf-code{display:flex;align-items:center;justify-content:center;gap:clamp(4px,1vw,14px);margin:0;
font-weight:900;font-size:clamp(7rem,24vw,17rem);line-height:.82;letter-spacing:-.06em;color:var(--ink)}
.nf-digit{display:block}
.nf-digit--accent{color:var(--accent-bright)}
.nf-zero{position:relative;display:block;width:.78em;height:.78em;flex:none}
.sport-hero-ball.nf-ball{position:absolute;top:-8%;right:-8%;bottom:-8%;left:-8%;width:auto;height:auto;z-index:1}
.nf-kicker{margin:clamp(6px,1vw,14px) 0 0}
.nf-title{margin:0;font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:.98;letter-spacing:-.03em}
.nf-lead{margin:0;max-width:36ch;color:var(--muted);font-size:clamp(1rem,1.3vw,1.15rem)}
.nf-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
.nf-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;
font-weight:800;text-decoration:none;color:var(--ink);background:rgba(255,255,255,.08);
transition:background-color .18s ease,transform .45s var(--ms-spring)}
.nf-btn--primary{background:var(--accent-fill);color:#fff}
.nf-btn:hover,.nf-btn:focus-visible{transform:scale(1.05)}
.nf-btn--primary:hover,.nf-btn--primary:focus-visible{background:var(--accent-bright)}
.nf-btn span{transition:transform .45s var(--ms-spring)}
.nf-btn:hover span,.nf-btn:focus-visible span{transform:translateX(4px)}
.nf-sports{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(10px,2vw,22px);max-width:720px}
.nf-sport{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;
border:1px solid rgba(255,255,255,.12);color:var(--muted);font-weight:700;text-decoration:none;
transition:color .18s ease,border-color .18s ease}
.nf-sport img{width:20px;height:20px;opacity:.8}
.nf-sport:hover,.nf-sport:focus-visible{color:var(--ink);border-color:var(--accent-bright)}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
.nf-digit{animation:nf-drop .9s var(--ms-spring) both}
.nf-digit:last-child{animation-delay:.12s}
.nf-kicker,.nf-title,.nf-lead,.nf-actions,.nf-sports{animation:ms-rise .9s var(--ms-spring) both}
.nf-title{animation-delay:.08s}.nf-lead{animation-delay:.16s}.nf-actions{animation-delay:.24s}.nf-sports{animation-delay:.32s}
}
@keyframes nf-drop{from{opacity:0;transform:translateY(-40%) scale(.9)}to{opacity:1;transform:none}}
@media (max-width:760px){.nf-sports{display:none}}
/* ── Karty pravidel bez fotky: obří obrysová číslice, akcent, přehled trestů ── */
.ms-rulecard--plain{position:relative;isolation:isolate;
background:radial-gradient(120% 80% at 100% 0%,rgba(225,29,46,.16),transparent 60%),var(--surface);
border:1px solid rgba(255,255,255,.06)}
.ms-rulecard--plain::before{content:"";position:absolute;inset:0 0 auto;height:3px;
background:linear-gradient(90deg,var(--accent-fill),transparent 80%)}
.ms-rulecard--plain .ms-rulecard-big{
position:absolute;top:-.12em;right:.06em;z-index:-1;
font-size:clamp(8rem,11vw,11rem);font-weight:900;line-height:1;letter-spacing:-.06em;
color:transparent;-webkit-text-stroke:2px rgba(255,70,84,.38);
}
.ms-rulecard--plain .ms-rulecard-body{padding:clamp(26px,2.6vw,36px) clamp(20px,2vw,28px) clamp(22px,2.2vw,30px);gap:12px}
.ms-rulecard--plain .ms-rulecard-title{font-size:clamp(1.3rem,1.7vw,1.6rem);max-width:15ch;margin-bottom:4px}
.ms-rulefact{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}
.ms-rulefact:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.ms-rulefact + .ms-rulefact{border-top-color:rgba(255,255,255,.06)}
.ms-rulefact-label{color:var(--ink);font-weight:600;line-height:1.3}
.ms-rulefact-value{flex:none;max-width:52%;text-align:center;padding:5px 11px;border-radius:999px;
font-size:.86rem;font-weight:800;line-height:1.25;
color:var(--accent-bright);background:rgba(225,29,46,.13);border:1px solid rgba(255,70,84,.3)}
.ms-rulefact.is-severe .ms-rulefact-value{color:#fff;background:var(--accent-fill);border-color:transparent}
@media (prefers-reduced-motion:no-preference){
.ms-rulecard--plain{transition:transform .6s var(--ms-spring),border-color .3s ease}
.ms-rulecard--plain:hover{transform:translateY(-4px);border-color:rgba(255,70,84,.35)}
.ms-rulecard--plain .ms-rulecard-big{transition:-webkit-text-stroke-color .3s ease,transform .8s var(--ms-spring)}
.ms-rulecard--plain:hover .ms-rulecard-big{-webkit-text-stroke-color:rgba(255,70,84,.75);transform:translateY(4px) rotate(-4deg)}
}
@media (max-width:520px){.ms-rulefact{flex-direction:column;align-items:flex-start;gap:6px}.ms-rulefact-value{max-width:none}}
/* ── Mapa bez bodů: místo holé věty karta s výzvou ─────────────────────── */
.map-empty{position:relative;overflow:hidden;display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);
padding:clamp(22px,3vw,36px);border-radius:var(--radius);border:1px solid rgba(255,255,255,.07);
background:
radial-gradient(60% 120% at 0% 50%,rgba(225,29,46,.18),transparent 70%),
linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/34px 34px,
linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/34px 34px,
var(--surface)}
.map-empty-pin{position:relative;flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
color:#fff;background:var(--accent-fill);box-shadow:0 10px 30px rgba(225,29,46,.35)}
.map-empty-pin::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent-bright);opacity:0}
.map-empty-copy{flex:1;min-width:0}
.map-empty-title{margin:0 0 4px;font-size:clamp(1.25rem,2vw,1.6rem);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.map-empty-text{margin:0;color:var(--muted);max-width:52ch}
.map-empty-btn{flex:none}
@media (prefers-reduced-motion:no-preference){
.map-empty-pin{animation:map-pin-bob 2.4s var(--ms-spring-soft) infinite}
.map-empty-pin::after{animation:map-pin-ping 2.4s ease-out infinite}
}
@keyframes map-pin-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes map-pin-ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(1.9);opacity:0}}
@media (max-width:700px){.map-empty{flex-direction:column;align-items:flex-start}}
.ms-rulefact.is-long{flex-direction:column;align-items:flex-start;gap:6px}
.ms-rulefact.is-long .ms-rulefact-value{max-width:none;padding:0;border:0;background:none;border-radius:0;
text-align:left;font-size:.95rem;font-weight:700}
/* Obrys ČR na mapě sportu — jemná záře kolem červené linky. */
.cz-glow{filter:blur(3px)}
.cz-outline{filter:drop-shadow(0 0 3px rgba(255,70,84,.7))}
/* Klíčová čísla pravidla: první velké, další jako štítky. */
.ms-rulestats{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 10px;margin:2px 0 4px}
.ms-rulestat{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;
font-weight:800;font-size:.92rem;color:var(--ink);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
font-variant-numeric:tabular-nums}
.ms-rulestat--hero{min-height:0;padding:0;border:0;background:none;border-radius:0;margin-right:4px;
font-size:clamp(2.6rem,4.2vw,3.6rem);font-weight:900;line-height:.9;letter-spacing:-.04em;color:var(--accent-bright)}
.ms-rulecard-text strong{color:var(--ink);font-weight:800}
/* Postupné tresty — stupňovací řada */
.ms-rulesteps{display:flex;flex-direction:column;gap:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.ms-rulesteps-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ms-rulestep{display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;font-size:.86rem;font-weight:800;
color:var(--accent-bright);background:rgba(225,29,46,.13);border:1px solid rgba(255,70,84,.3)}
.ms-rulestep{position:relative}
.ms-rulestep + .ms-rulestep{margin-left:20px}
.ms-rulestep + .ms-rulestep::before{content:"→";position:absolute;left:-19px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700}
.ms-rulestep.is-severe{color:#fff;background:var(--accent-fill);border-color:transparent}
.ms-rulestat--hero.is-long{font-size:clamp(1.8rem,2.6vw,2.3rem);white-space:nowrap}
/* ── Žebříček soutěží jako pyramida ─────────────────────────────────────────
Stupně se směrem dolů rozšiřují (víc týmů = širší základna), vrchol svítí
červeně, uvnitř stupně pruh s podílem klubů a mezi stupni šipky ↑↓. */
.liga-ladder-pyramid{align-items:center;max-width:1040px;margin-inline:auto;gap:18px}
.liga-ladder-tier{width:calc(54% + (var(--tier) - 1) / max(var(--tiers) - 1, 1) * 46%)}
.liga-ladder-tier--join::before{display:none}
.liga-ladder-tier--join::after{
content:"↑ ↓";position:absolute;left:50%;top:100%;transform:translate(-50%,-50%) translateY(9px);z-index:2;
padding:1px 9px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.1em;line-height:1.5;
color:var(--muted);background:var(--bg);border:1px solid rgba(255,255,255,.12)}
.liga-ladder-btn{position:relative;isolation:isolate;overflow:hidden;
border:1px solid rgba(255,255,255,.07);padding-block:18px}
.liga-ladder-btn::before{content:"";position:absolute;inset:0 auto 0 0;z-index:-1;width:var(--share,0%);
background:linear-gradient(90deg,rgba(225,29,46,.05),rgba(225,29,46,.22));
border-right:2px solid rgba(255,70,84,.55);transition:width 1.4s var(--ms-spring-soft)}
.liga-ladder-rank{font-weight:900}
.liga-ladder-count{font-variant-numeric:tabular-nums}
/* Vrchol pyramidy */
.liga-ladder-tier:first-child .liga-ladder-btn{
background:radial-gradient(120% 140% at 50% 0%,rgba(255,70,84,.32),transparent 70%),var(--surface-raised);
border-color:rgba(255,70,84,.55);box-shadow:0 0 0 1px rgba(255,70,84,.15),0 14px 40px rgba(225,29,46,.25)}
.liga-ladder-tier:first-child .liga-ladder-name{font-size:1.25em}
.liga-ladder-tier:first-child .liga-ladder-btn::after{content:"TOP";position:absolute;top:10px;right:14px;
font-size:.62rem;font-weight:900;letter-spacing:.16em;color:var(--accent-bright);opacity:.9}
.liga-ladder-tier:first-child .liga-ladder-meta{margin-top:10px}
.liga-ladder-btn.is-on::before{background:rgba(255,255,255,.18);border-right-color:#fff}
.liga-ladder-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:18px}
.liga-ladder-legend b{color:var(--accent-bright)}
.liga-ladder-legend-bar{display:inline-block;width:22px;height:10px;margin-right:6px;vertical-align:middle;border-radius:3px;
background:linear-gradient(90deg,rgba(225,29,46,.05),rgba(225,29,46,.35));border-right:2px solid rgba(255,70,84,.7)}
.liga-ladder-hint{text-align:center}
@media (max-width:760px){
.liga-ladder-tier{width:calc(82% + (var(--tier) - 1) / max(var(--tiers) - 1, 1) * 18%)}
.liga-ladder-tier:first-child .liga-ladder-btn::after{display:none}
}
@media (prefers-reduced-motion:reduce){.liga-ladder-btn::before{transition:none}}
/* Oddálená mapa — menší tečky (zásah do hit-area zůstává 24 px). */
.map-far .map-pin-dot{width:10px;height:10px;margin:7px;border-width:1.5px;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.map-far .map-pin.is-tier-on .map-pin-dot{width:12px;height:12px;margin:6px}
/* ── Fotky: mozaika s hlavní fotkou + filtr + lightbox s popiskem ────────── */
.ms-gallery{margin-inline:0}
.ms-gallery-filter{display:flex;flex-wrap:wrap;gap:8px}
.ms-gallery-chip{min-height:40px;padding:0 16px;border-radius:999px;font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;
color:var(--muted);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
transition:color .18s ease,background-color .18s ease,transform .45s var(--ms-spring)}
.ms-gallery-chip span{margin-left:6px;opacity:.7;font-variant-numeric:tabular-nums}
.ms-gallery-chip:hover,.ms-gallery-chip:focus-visible{color:var(--ink);transform:scale(1.05)}
.ms-gallery-chip.is-on{color:#fff;background:var(--accent-fill);border-color:transparent}
.ms-mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(130px,15vw,210px);
grid-auto-flow:dense;gap:clamp(8px,1vw,14px);max-width:1180px}
.ms-mosaic-item{position:relative;display:block;padding:0;border:0;overflow:hidden;cursor:pointer;
border-radius:clamp(14px,1.6vw,22px);background:var(--surface);isolation:isolate}
.ms-mosaic-item[hidden]{display:none}
.ms-mosaic-item:first-child{grid-column:span 2;grid-row:span 2}
.ms-mosaic--n4 .ms-mosaic-item:nth-child(4),.ms-mosaic--n8 .ms-mosaic-item:nth-child(6){grid-column:span 2}
.ms-mosaic--n6 .ms-mosaic-item:last-child{grid-column:span 4}
.ms-mosaic--n7 .ms-mosaic-item:nth-child(n+6){grid-column:span 2}
.ms-mosaic .ms-gallery-img{display:block;width:100%;height:100%;object-fit:cover;
transition:transform 1.2s var(--ms-spring-soft),filter .4s ease}
.ms-mosaic-item::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(to top,rgba(0,0,0,.62),transparent 48%);opacity:0;transition:opacity .35s ease}
.ms-mosaic-item:first-child::after{opacity:.75}
.ms-mosaic-cap{position:absolute;left:14px;bottom:12px;z-index:2;font-size:.78rem;font-weight:800;letter-spacing:.04em;
color:#fff;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .45s var(--ms-spring)}
.ms-mosaic-item:first-child .ms-mosaic-cap{opacity:1;transform:none}
.ms-mosaic-item:hover .ms-gallery-img,.ms-mosaic-item:focus-visible .ms-gallery-img{transform:scale(1.07)}
.ms-mosaic-item:hover::after,.ms-mosaic-item:focus-visible::after{opacity:1}
.ms-mosaic-item:hover .ms-mosaic-cap,.ms-mosaic-item:focus-visible .ms-mosaic-cap{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
.ms-mosaic-item{transition:opacity .5s ease-out calc(var(--i,0) * 70ms + .1s),transform .9s var(--ms-spring) calc(var(--i,0) * 70ms + .1s)}
.sport-section:not(.is-shown) .ms-mosaic-item{opacity:0;transform:translateY(24px) scale(.96)}
}
@media (max-width:760px){
.ms-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(110px,30vw,170px)}
.ms-mosaic-item:first-child{grid-column:span 2;grid-row:span 2}
.ms-mosaic .ms-mosaic-item{grid-column:auto;grid-row:auto}
.ms-mosaic .ms-mosaic-item:first-child{grid-column:span 2;grid-row:span 2}
.ms-mosaic .ms-mosaic-item:last-child:nth-child(even){grid-column:span 2}
.ms-mosaic-cap{opacity:1;transform:none;font-size:.7rem}
.ms-mosaic-item::after{opacity:.5}
}
.ms-lightbox-cap{position:absolute;left:0;right:0;bottom:-44px;margin:0;display:flex;justify-content:space-between;gap:16px;
font-size:.9rem;color:rgba(255,255,255,.82)}
.ms-lightbox-cap #ms-lightbox-count{font-weight:800;font-variant-numeric:tabular-nums}
.ms-lightbox-cap #ms-lightbox-credit{text-align:right;color:rgba(255,255,255,.65)}