/* Minileague Squad Check

   Hlavní stylopis. Tokeny palety, chrom (lišta, navigace),
   panely, tabulky a všechny sekce. Responzivní pravidla tady nejsou —
   žijí v narrow/small/mobile, aby s nimi mohl hýbat přepínač zobrazení.
   ============================================================ */

:root{
  /* ---------------------------------------------------------------
     Paleta Premier League. Auberginová #37003C a mátová #00FF87 jsou
     barvy té soutěže, o které appka je — a skoro nikdo jiný je nepoužívá,
     protože jsou tak specifické. Předchozí #2b7fff byla systémová modrá,
     která navíc kolidovala s modrozelenou stupnicí obtížnosti.
     --------------------------------------------------------------- */
  --aubergine:#37003C;      /* lišta a navigace — jen chrom, ne plátno */
  --aubergine-lift:#4B0F52;

  /* Auberginová jako barva NADPISU na plátně.

     Oddělená od --aubergine schválně. Ta je chrom: leží pod ní vždycky
     bílý text, takže se v tmavém režimu nemá co překlápět. Jako barva
     textu na pozadí plátna ale potřebuje vlastní hodnotu — a dokud to
     byl týž token, měly nadpisy boxů na Přehledu i v Top hráčích
     v tmavém režimu kontrast 1,13:1, tedy tmavou na tmavé. */
  --head:#37003C;

  /* Plátno je světlé. Auberginová vypadala na maketě dobře, ale jako pozadí
     celé stránky z appky udělala tmavý web s bílými okny — přesný opak
     „Air“ pocitu, na kterém stojí zbytek návrhu. Odstín je vzatý z papíru
     a jen o tón tmavší, aby se karty daly odlišit bez rámečku. */
  --sky:#E7E0EA;
  --sky-deep:#2B0030;       /* hřiště — tam tma sedí, dresy na ní vyniknou */

  --blue:#0086A8;           /* interaktivní prvky; mimo stupnici obtížnosti */
  --ink:#1F0A24;
  --charcoal:#1F0A24;
  --white:#ffffff;
  --haze:#F4F1F5;           /* papír s auberginovým nádechem */
  --line:rgba(55,0,60,.12);
  --line-soft:rgba(55,0,60,.06);
  --mute:#6B3D74;

  --mint-fill:#00FF87;      /* jen výplně, nikdy text — na bílé neprojde */

  /* Zlatá a půlnoční modř z plakátu poháru. Vzorkoval jsem je přímo
     z obrázku, ať vstupní obrazovka a plakát nedrží každý jiný odstín. */
  --night:#0B0B24; --night-2:#161034; --night-3:#241A52;
  --gold:#CC9C48; --gold-lift:#E8C271; --gold-deep:#8A6524;
  --ok:#00874F;    --ok-bg:#E2F7EC;
  --warn:#9A6200;  --warn-bg:#FDF3E0;   --warn-line:#C98400;
  --alert:#C4004A; --alert-bg:#FDEBF1;
  --flop:#7A3E9E;           /* kapitánský propadák — mimo stupnici obtížnosti */

  /* ---------------------------------------------------------------
     Stupnice obtížnosti rozpisu — JEDNA definice pro celou appku.
     Dřív existovala ve třech kopiích (.ticker, .tick3, .fdrleg) a každá
     barva byla napsaná třikrát. Změna odstínu znamenala hledat na třech
     místech; teď stačí přepsat tady.
     --------------------------------------------------------------- */
  --f1:#3FCF7F; --f1i:var(--f1i);
  --f2:#A8E6C4; --f2i:var(--f2i);
  --f3:#E7E3E9; --f3i:var(--f3i);
  --f4:#F5B3AB; --f4i:var(--f4i);
  --f5:#E0574B; --f5i:#FFFFFF;
  --blank:repeating-linear-gradient(45deg,#EDE9EE,#EDE9EE 3px,#DCD5DE 3px,#DCD5DE 6px);
  --blank-i:#5F5F5F;

  --f:'Inter',ui-sans-serif,system-ui,sans-serif;
  --f-disp:'Archivo','Arial Narrow',ui-sans-serif,sans-serif;
  --f-mono:'Space Mono',ui-monospace,monospace;

  --r-card:14px; --r-btn:8px; --r-in:4px; --r-img:11px;
}
*{box-sizing:border-box}

/* .railkey a spol. mají display:flex, což přebíjí výchozí display:none
   u atributu [hidden]. Legenda kolejnice se proto zobrazovala i tehdy,
   když neměla co ukázat. Klasická past — řešíme jednou pro všechny. */
[hidden]{display:none!important}
html,body{margin:0}
body{
  background:var(--sky);
  color:var(--charcoal);
  font-family:var(--f);
  font-size:14px;
  font-weight:500;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- vodoznak poháru ----------

   Obsah je vycentrovaný na 1180 px, takže na širokém monitoru zbydou
   po stranách dva prázdné pruhy. Pohár je zaplní, aniž by se stal
   obsahem: `position:fixed` znamená, že se při scrollování nehýbe,
   takže ho oko po chvíli přestane registrovat — což je přesně to,
   co má vodoznak dělat.

   Je záměrně useknutý okrajem obrazovky. Celý pohár uprostřed pruhu
   by vypadal jako obrázek, který tam někdo dal; ořezaný působí jako
   podklad. Ze stejného důvodu je jen jeden, ne dva zrcadlené —
   symetrie by přitáhla pozornost.

   pointer-events:none je nutnost, ne detail: bez toho by neviditelná
   vrstva přes půl obrazovky polykala kliknutí. */
body::before{
  content:'';
  position:fixed;
  right:-7vw;
  bottom:-6vh;
  width:min(58vh,620px);
  height:min(58vh,620px);
  background:url('/assets/logo-transp.webp') no-repeat center/contain;
  opacity:.055;
  pointer-events:none;
  z-index:-1;
}

/* Na tmavém plátně zlatá ztmavne spolu s pozadím a zmizí úplně.
   Vyšší krytí to vyrovnává; `screen` pak drží zlatou zlatou místo
   toho, aby ji podklad stáhl do hněda. */
:root[data-theme="dark"] body::before{
  opacity:.12;
  mix-blend-mode:screen;
}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}

/* ---------- horní lišta ---------- */
/* Tmavá lišta dává appce páteř: bílé karty pak čtou jako papír na stole.
   Dřív byla hlavička bílá karta na modrém pozadí a splývala s obsahem. */
.bar{position:sticky;top:0;z-index:20;background:var(--aubergine);color:#fff}
.bar .wrap{display:flex;align-items:center;gap:14px;height:58px}
.brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none}
/* Celé logo má nad pohárem i pod ním text; ve 30 px se z toho stala
   nečitelná šmouha. V hlavičce je proto samotný pohár (assets/mark.webp),
   oříznutý z téhož originálu. */
.brand img{width:34px;height:34px;flex:none;object-fit:contain}
.brand .tx{font-family:var(--f-disp);font-weight:800;font-size:15px;
  letter-spacing:-.2px;color:#fff;white-space:nowrap;line-height:1.15}
.brand .tx small{display:block;font-family:var(--f-mono);font-size:8.5px;
  font-weight:700;letter-spacing:3.2px;color:#B98FC2;margin-bottom:-1px}
/* Základní .who používá tabulka vlastnictví i další seznamy. Když jsem
   pravidlo zúžil na .bar .who, zbytek zůstal inline a odznak klubu se
   překrýval s prvním písmenem jména. */
.who{display:inline-flex;align-items:center;gap:7px;min-width:0;vertical-align:middle}
.who b{font-weight:700}
.bar .who{margin-left:auto;display:flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:11.5px;color:#D9C4DE;min-width:0}
.bar .who b{color:#fff;font-weight:700;display:flex;align-items:baseline;gap:5px;
  min-width:0;overflow:hidden}
/* Název týmu se ořízne, iniciály nikdy — v úzké hlavičce je důležitější
   vědět, čí tým to je, než dočíst jeho jméno. */
.bar .who b .tn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--f);font-size:12.5px;max-width:22ch}
.bar .who b .ini{flex:none;font-family:var(--f-mono);font-size:10.5px;
  font-weight:700;letter-spacing:.06em;color:#D9C4DE;
  border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:1px 5px}
.bar .who button{border-color:rgba(255,255,255,.35);color:#fff;background:none}
.bar .who button:hover{background:rgba(255,255,255,.12)}

/* ---------- vstupní obrazovka ----------

   Dvě věci se předělávaly: bílý nadpis stál na světlém plátně a byl
   prakticky neviditelný, a formulář byl až 250 px pod ohybem, takže
   po otevření nebylo vidět, co má člověk vlastně udělat.

   Řešení: vstupní obrazovka je auberginová. Je to „dveře“ — za nimi
   se appka rozsvítí. Bílý text tím dává smysl a formulář sedí vedle
   nadpisu, ne pod ním. */
/* Vstupní obrazovka drží barvy plakátu poháru: půlnoční modř, zlato,
   světlo shora. Karta je tmavá se zlatým lemem, ne bílá — bílý obdélník
   vedle toho plakátu vypadal jako cizí prvek nalepený na plakát. */
#landing{min-height:100vh;display:flex;align-items:center;padding:36px 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(204,156,72,.20), transparent 62%),
    radial-gradient(90% 60% at 50% 105%, rgba(36,26,82,.9), transparent 70%),
    linear-gradient(180deg,var(--night-2),var(--night) 60%)}
#landing .wrap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:52px;align-items:center;width:100%}

.hero{min-width:0;display:flex;justify-content:center}
.hero .poster{width:100%;max-width:392px;height:auto;border-radius:var(--r-card);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(204,156,72,.28)}

.gate{
  background:linear-gradient(180deg,rgba(36,26,82,.92),rgba(11,11,36,.94));
  border:1px solid rgba(204,156,72,.34);
  border-radius:var(--r-card);
  padding:32px;max-width:440px;margin:0;text-align:left;color:#EDE7F5;
  box-shadow:0 26px 64px rgba(0,0,0,.5);
}
.gate .kicker{margin:0 0 6px;font-family:var(--f-mono);font-size:10px;
  font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.gate h2{margin:0 0 6px;color:#fff;font-size:26px;letter-spacing:.2px;
  text-transform:none;line-height:1.15}
.gate .sub{color:#CFC5E4;margin:0 0 22px;font-size:13.5px}
.gate label{color:#fff;font-weight:600}
.gate .help{color:#B3A8CE}
.gate .help code{background:rgba(204,156,72,.16);color:var(--gold-lift)}
.gate .opt{color:#B3A8CE;font-weight:500}
.gate input,.gate select{background:rgba(255,255,255,.06);color:#fff;
  border-color:rgba(204,156,72,.3)}

/* Rozbalenou nabídku <select> kreslí operační systém, ne naše CSS —
   a kreslí ji na bílém. Bílá barva textu ze .gate select se do <option>
   zdědí, takže položky byly bílé na bílém a seznam vypadal prázdný.
   Barvy proto nastavujeme na <option> zvlášť. */
.gate select option{background:#fff;color:#1F0A24}
.gate select option:checked{background:#241A52;color:#fff}
.gate input:focus,.gate select:focus{border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(204,156,72,.22)}
.gate input::placeholder{color:#7E729C}

/* Zlaté tlačítko — jediný zlatý plný prvek na stránce, aby bylo jasné,
   kam kliknout. */
.gate button.wide{background:linear-gradient(180deg,var(--gold-lift),var(--gold));
  border-color:var(--gold-deep);color:#2A1E06;font-weight:700}
.gate button.wide:hover{background:linear-gradient(180deg,#F2D98A,#D9AA55)}
.gate .lnk{color:var(--gold-lift);margin-top:12px;display:inline-block}
.gate h2{font-size:20px;line-height:1.1;font-weight:600;margin:0 0 4px}
.gate p.sub{color:var(--mute);font-size:13px;margin:0 0 24px}
.field{margin-bottom:20px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field .help{font-size:12px;color:var(--mute);margin:6px 0 0;line-height:1.5}
.field .help code{font-family:var(--f-mono);font-size:11px;color:var(--charcoal)}
input,select{
  width:100%;background:var(--haze);border:1px solid var(--line);
  color:var(--charcoal);font-family:var(--f);font-weight:500;font-size:16px;
  padding:10px 12px;border-radius:var(--r-in);
}
input:focus,select:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}
input[type=number]{font-family:var(--f-mono)}

button{
  background:transparent;color:var(--blue);
  border:1px solid var(--blue);border-radius:var(--r-btn);
  font-family:var(--f);font-weight:600;font-size:16px;
  padding:10px 20px;cursor:pointer;
}
button:hover{background:rgba(43,127,255,.07)}
button:disabled{opacity:.45;cursor:wait}
button.wide{width:100%}
button.small{font-size:13px;padding:7px 14px}

/* ---------- navigace v appce ---------- */
/* Podtržené záložky místo šesti bublin: na mobilu se dřív zalamovaly
   do dvou řádků a braly celou obrazovku. */
.navbar{background:var(--aubergine);border-bottom:1px solid rgba(255,255,255,.1)}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav button{background:none;border:0;border-radius:0;color:#C7A8CE;
  font-family:var(--f);font-size:13px;font-weight:600;padding:11px 15px 9px;
  white-space:nowrap;border-bottom:2px solid transparent}
.nav button:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav button[aria-selected="true"]{color:#fff;border-bottom-color:var(--mint-fill)}
.nav button:focus-visible{outline-offset:-3px}

/* Odkaz na oficiální FPL. Sedí v liště napravo od záložek, ale záměrně
   nevypadá jako ony — je to jediné místo v appce, které tě z ní pošle
   pryč, a to má být vidět dřív, než na to člověk klikne. */
.navrow{display:flex;align-items:stretch;gap:10px}
.navrow .nav{flex:1;min-width:0}
.navout{flex:none;display:flex;align-items:center;gap:5px;
  color:#C7A8CE;text-decoration:none;font-size:12px;font-weight:600;
  padding:0 2px 2px;white-space:nowrap;border-bottom:2px solid transparent}
.navout span{font-size:10px;opacity:.8}
.navout:hover{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
.navout:focus-visible{outline-offset:-2px}

.panel{
  background:var(--white);border-radius:var(--r-card);
  padding:28px;margin:14px 0 48px;
}
.panel[hidden]{display:none}
#app[hidden]{display:none}
#landing[hidden]{display:none}

h2{font-family:var(--f-disp);font-size:15px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;line-height:1.2;margin:30px 0 10px}
h2:first-child{margin-top:0}
.hint{color:var(--mute);font-size:13px;margin:0}
.hint code{font-family:var(--f-mono);font-size:12px;color:var(--charcoal)}
.note{color:var(--mute);font-size:13px;margin:8px 0 0;line-height:1.5}
#msg,#lmsg,#trmsg,#hubmsg,#plmsg{margin:16px 0;color:var(--warn);font-size:13px}

/* ---------- podsekce ----------
   Podtržené záložky místo řady pilulek. Pilulky vypadaly jako tlačítka
   („co se stane, když kliknu?“), zabíraly dva řádky, jakmile jich bylo
   šest, a soupeřily o pozornost se spodní navigací, která vypadá stejně.
   Záložka s linkou je plochá, vejde se na jeden řádek a čte se jako to,
   co to je: přepínač pohledu na tatáž data.

   Linka pod celým pruhem drží záložky ukotvené, i když se jich část
   odscrolluje mimo obraz. */
.subnav{display:flex;gap:22px;flex-wrap:nowrap;margin:0 0 18px;
  border-bottom:1px solid var(--line);overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.subnav::-webkit-scrollbar{display:none}
.sub-btn{flex:0 0 auto;background:none;border:0;border-radius:0;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:8px 0 9px;font-family:var(--f);font-size:13px;font-weight:600;
  color:var(--mute);white-space:nowrap;cursor:pointer;
  transition:color .15s,border-color .15s}
.sub-btn:hover{color:var(--charcoal);background:none}
.sub-btn[aria-selected="true"]{background:none;color:var(--charcoal);
  border-bottom-color:var(--gold)}
.sub-btn:focus-visible{outline:2px solid var(--aubergine);outline-offset:3px;
  border-radius:4px}
.sec[hidden]{display:none}

/* ---------- hřiště ----------
   Trávník místo tmavé plochy. Sekané pruhy a čáry nejsou dekorace: dávají
   sestavě měřítko, takže se tvar (3-4-3 vs 4-4-2) pozná dřív, než člověk
   začne počítat karty. Čáry jsou jeden SVG na pozadí — žádné elementy
   navíc, nic, do čeho by se dalo kliknout.

   Bílá karta na zeleni má vyšší kontrast než na auberginové, takže se
   dresy daly zmenšit a čísla naopak zvětšit. */
.pitch{
  --turf-a:#1E7C40; --turf-b:#1A6E39;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 900' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='white' stroke-opacity='.30' stroke-width='2.5'%3E%3Crect x='18' y='18' width='564' height='864'/%3E%3Cline x1='18' y1='450' x2='582' y2='450'/%3E%3Ccircle cx='300' cy='450' r='82'/%3E%3Crect x='110' y='18' width='380' height='176'/%3E%3Crect x='205' y='18' width='190' height='68'/%3E%3Cpath d='M243 194a62 62 0 0 0 114 0'/%3E%3Crect x='110' y='706' width='380' height='176'/%3E%3Crect x='205' y='814' width='190' height='68'/%3E%3Cpath d='M243 706a62 62 0 0 1 114 0'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='.30'%3E%3Ccircle cx='300' cy='450' r='4'/%3E%3Ccircle cx='300' cy='134' r='4'/%3E%3Ccircle cx='300' cy='766' r='4'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/100% 100%,
    repeating-linear-gradient(180deg,var(--turf-a) 0 58px,var(--turf-b) 58px 116px);
  border-radius:var(--r-img);
  padding:20px 18px 24px;margin:16px 0;
  display:flex;flex-direction:column;gap:18px;
  box-shadow:inset 0 0 70px rgba(0,0,0,.30);
}
.row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}

/* ---------- karta hráče ----------
   Mřížka s pevnými řádky, ne volné inline prvky. Předtím si každá karta
   zalomila obsah jinak podle délky jména: body skončily jednou vedle
   jména a jednou pod ním a zkratka klubu se lepila na příjmení.

     dres    44px
     jméno   17px   — vlastní řádek přes celou šířku, ořez ellipsis
     zkratka 13px   — pod jménem, ne za ním
     body    30px   — vždycky stejná pozice
     minuty  13px

   Díky pevným výškám jsou všechny karty v řadě stejně vysoké i tehdy,
   když jedna z nich místo bodů hlásí, že se ještě nehrálo. */
.shirt{
  width:108px;background:var(--white);border-radius:11px;
  border:0;padding:9px 8px 10px;position:relative;
  display:grid;grid-template-rows:44px 17px 13px 30px 13px;
  justify-items:center;align-items:center;
  box-shadow:0 3px 0 rgba(0,0,0,.25);
}
.shirt.d{box-shadow:0 3px 0 var(--warn-line)}
.shirt.i,.shirt.s,.shirt.u{box-shadow:0 3px 0 var(--alert)}
.shirt .kit{width:38px;height:41px;display:block}
.shirt .kit svg{display:block;width:100%;height:auto}
.shirt .nm{font-family:var(--f-disp);font-size:13.5px;font-weight:600;line-height:1;
  width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Proložené mono, aby se zkratka četla jako popisek, ne jako pokračování
   jména. text-indent vyrovná proklad za poslední literou. */
.shirt .tm{font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.16em;
  color:var(--mute);line-height:1;text-indent:.16em}
.shirt .fd{font-family:var(--f-mono);font-size:11px;color:var(--mute);line-height:1}
.shirt .cap{position:absolute;top:7px;right:7px;background:var(--charcoal);color:var(--white);
  font-family:var(--f-mono);font-size:9px;font-weight:700;border-radius:4px;
  padding:2px 4px;line-height:1;margin:0}
.shirt .cap.v{background:var(--haze);color:var(--mute);border:1px solid var(--line)}

/* ---------- karty a tabulky ---------- */
.meta,.kpis{display:flex;gap:24px;flex-wrap:wrap;margin:0 0 8px}
.meta div,.kpis div{min-width:82px}
.meta .k,.kpis .k{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.meta .v,.kpis .v{font-family:var(--f-mono);font-size:18px;font-weight:700;color:var(--charcoal)}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--mute);padding:8px;border-bottom:1px solid var(--line);font-weight:600}
td{padding:9px 8px;border-bottom:1px solid rgba(0,0,0,.05)}
td.n,th.n{text-align:right;font-family:var(--f-mono)}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--haze)}
.ok{color:var(--ok)} .wn{color:var(--warn)} .al{color:var(--alert)}
.st{font-family:var(--f-mono);font-size:11.5px}

.alerts{display:flex;flex-direction:column;gap:8px}
.alert{background:var(--haze);border-radius:12px;padding:12px 16px;border-left:3px solid var(--warn-line)}
.alert.bad{border-left-color:var(--alert)}
.alert .top{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.alert .who{font-weight:600;margin:0;font-family:var(--f);font-size:14px;color:var(--charcoal)}
.alert .tag,.issue .tag{font-family:var(--f-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.06em;background:var(--white);border:1px solid var(--line);
  border-radius:9999px;padding:1px 9px;color:var(--mute)}
.alert .txt{font-size:13px;color:var(--mute);margin-top:4px}

.own{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0}
.chip{background:var(--haze);border:1px solid var(--line);border-radius:9999px;
  padding:5px 12px;font-size:12.5px;display:flex;align-items:center;gap:7px}
.chip .ct{font-family:var(--f-mono);font-size:11px;color:var(--mute)}
.chip.mine{border-color:var(--ok)}
.chip.unique{border-color:var(--warn-line)}
.chip.miss{border-color:var(--alert)}

.bar-w{height:6px;background:var(--haze);border-radius:3px;overflow:hidden;min-width:52px}
.bar-w i{display:block;height:100%;background:var(--blue)}

/* ---------- graf ---------- */
.chart{background:var(--haze);border-radius:12px;padding:16px 12px 8px;margin:12px 0;overflow-x:auto}
.chart svg{display:block;min-width:520px;width:100%;height:auto}
.chart .gl{stroke:rgba(0,0,0,.08);stroke-width:1}
.chart .ax{fill:var(--mute);font-family:var(--f-mono);font-size:10px}
.chart path{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart path.me{stroke-width:3.5}
.legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:12px}
.legend span{display:flex;align-items:center;gap:5px;color:var(--mute)}
.legend i{width:14px;height:3px;border-radius:2px;display:inline-block}
.legend b{color:var(--charcoal);font-weight:600}


/* ---------- detail hráče ---------- */
.detail{background:var(--haze);border-radius:12px;padding:20px 22px;margin:16px 0}
.detail .close{float:right;border:0;background:none;color:var(--mute);font-size:20px;
  padding:0 4px;line-height:1;cursor:pointer}
.detail h3{margin:0 0 2px;font-size:20px;font-weight:600;line-height:1.1}
.detail .who{color:var(--mute);font-family:var(--f-mono);font-size:12px;margin:0}
.pills{display:flex;gap:5px;margin:12px 0 4px;flex-wrap:wrap}
.pill{width:40px;text-align:center;background:var(--white);border-radius:var(--r-in);
  padding:6px 0;font-family:var(--f-mono);font-size:13px;font-weight:700}
.pill small{display:block;font-size:9px;color:var(--mute);font-weight:400}
.p-hi{background:var(--ok-bg);color:var(--ok)}
.p-md{background:var(--warn-bg);color:var(--warn)}
.p-lo{background:var(--alert-bg);color:var(--alert)}

/* ---------- filtry ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.filters input,.filters select{flex:1 1 140px;min-width:0;font-size:14px}
.chk{display:flex;align-items:center;gap:7px;color:var(--mute);font-size:13px;
  white-space:nowrap;cursor:pointer}
.chk input{width:16px;height:16px;flex:none;accent-color:var(--blue)}

/* ---------- transfery ---------- */
.issue{background:var(--haze);border-radius:12px;padding:16px 18px;margin-bottom:12px;
  border-left:3px solid var(--line)}
.issue.p1{border-left-color:var(--alert)}
.issue.p2{border-left-color:var(--warn-line)}
.issue .hdr{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.issue .hdr b{font-size:16px}
.issue .why{color:var(--mute);font-size:13px;margin:8px 0 0;line-height:1.6}
.issue .why b{color:var(--charcoal);font-weight:600}
.budget{font-family:var(--f-mono);font-size:12px;color:var(--mute);
  margin:12px 0 4px;padding-top:11px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.budget label{display:inline-flex;align-items:center;gap:6px}
.budget b{color:var(--charcoal)}
.pin{width:66px;padding:5px 8px;font-family:var(--f-mono);font-size:13px;
  font-weight:700;text-align:right;background:var(--white)}
.edited{color:var(--ok);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}
.est{color:var(--mute);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}
.lnk{border:0;background:none;color:var(--blue);font-size:12px;padding:2px 4px;
  text-decoration:underline;cursor:pointer;font-weight:500}
.cand{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px solid rgba(0,0,0,.06);flex-wrap:wrap}
.cand:last-child{border-bottom:0}
.cand .l b{font-size:14px}
.cand .l span{display:block;margin-top:2px;font-family:var(--f-mono);
  font-size:11.5px;color:var(--mute)}
.cand .r{font-family:var(--f-mono);font-size:11px;text-align:right;
  color:var(--mute);white-space:nowrap}
.cand .r b{font-size:15px;color:var(--blue);display:block}
.ok-box{background:var(--ok-bg);border-radius:12px;padding:16px 18px}

/* ---------- hub ---------- */
.news{background:var(--haze);border-radius:12px;padding:16px 18px;margin-bottom:10px;
  border-left:3px solid var(--line)}
.news.good{border-left-color:var(--ok)}
.news.bad{border-left-color:var(--alert)}
.news.warn{border-left-color:var(--warn-line)}
.news .kicker{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mute);margin-bottom:5px}
.news .head{font-size:17px;font-weight:600;line-height:1.25}
.news .body{font-size:13px;color:var(--mute);margin-top:6px;line-height:1.55}
.news .body b{color:var(--charcoal);font-weight:600}

/* ---------- ceny kola ----------
   Čtyři ceny jako řádky pod sebou, ne sloupce vedle sebe. Sloupce
   vypadaly trofejněji, ale u ceny udělené několika lidem najednou
   („Adam Marko, Artur Šedivý, Tomas Vostrovsky“) se jméno zalomilo do
   úzkého proužku a karta vyrostla do dvojnásobku. V řádku je na jména
   místo a čísla stojí zarovnaná na jedné lince, takže se dají porovnat
   pohledem shora dolů.

   Barvu nese --accent, kterou nastavuje třída konkrétní ceny; zbytek
   pravidel je pro všechny stejný, ať se nový award přidává jedním
   řádkem. */
.secline{display:flex;align-items:center;gap:10px;margin:22px 0 11px}
.secline:first-child{margin-top:0}
.secline h4{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  margin:0;color:var(--mute);white-space:nowrap;font-weight:600}
.secline::after{content:"";flex:1;height:1px;background:var(--line);order:9}
.secline .livetag{font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--warn);background:var(--warn-bg);
  border-radius:20px;padding:2px 9px;white-space:nowrap}

/* Jeden rámeček kolem všech cen, uvnitř vlásková linka mezi řádky —
   sada trofejí, ne čtyři nesouvisející kartičky. */
.awards{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  margin-bottom:4px;background:var(--white)}
.award{position:relative;display:flex;align-items:center;gap:11px;
  padding:11px 13px;border-bottom:1px solid var(--line-soft)}
.award:last-child{border-bottom:0}
/* Barevný pruh na hraně řádku. Nese ho ::before, aby nezabíral místo
   v flexu a nehýbal s odsazením textu. */
.award::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--accent)}
.award .medal{flex:none;width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  background:color-mix(in srgb,var(--accent) 12%,var(--white))}
.award .txt{flex:1;min-width:0}
.award .title{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);font-weight:700}
.award .who{font-size:14px;font-weight:600;line-height:1.25}
.award .val{flex:none;font-family:var(--f-mono);font-size:19px;font-weight:700;
  color:var(--accent);line-height:1.1}
.award .sub{font-size:11.5px;color:var(--mute);line-height:1.4;margin-top:3px}
.award .sub b{color:var(--charcoal);font-weight:600}
.award.a-win{--accent:var(--ok)}
.award.a-bench{--accent:var(--alert)}
.award.a-cap{--accent:var(--gold-deep)}
.award.a-flop{--accent:var(--flop)}
/* Neudělená cena nesmí vypadat jako výhra — zůstane jí jen ikona
   a vysvětlení, barva i velké číslo zšednou. */
.award.bezceny{--accent:var(--mute);background:var(--haze)}
.award.bezceny .medal{filter:grayscale(1);opacity:.5}
.award.bezceny .who{color:var(--mute);font-weight:500}
.award.bezceny .val{font-size:15px;opacity:.6}

/* ---------- síň slávy ---------- */
.hall{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  margin-bottom:8px}
.hall table{border-collapse:collapse;width:100%;font-size:13px}
.hall th,.hall td{padding:9px 10px;text-align:left;
  border-bottom:1px solid var(--line-soft)}
.hall thead th{background:var(--aubergine);color:#fff;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.hall th.c,.hall td.c{text-align:center;width:76px}
.hall th.c span{display:block;font-size:15px;letter-spacing:0;margin-bottom:1px}
.hall tbody tr:last-child td{border-bottom:0}
.hall td.name{font-weight:600}
.hall td.c{font-family:var(--f-mono);font-weight:700;font-size:15px;color:var(--mute)}
.hall td.c.has{color:var(--charcoal)}
.hall td.c.lead{position:relative}
.hall td.c.lead::after{content:"";position:absolute;inset:4px 12px;border-radius:8px;
  background:var(--gold-lift);opacity:.3}
.hall td.c i{position:relative;font-style:normal}
.hallmore{font-size:12px;padding:6px 12px;border-radius:var(--r-btn);
  border:1px solid var(--line);background:var(--white);color:var(--blue);
  cursor:pointer;font-family:var(--f)}
.hallmore[disabled]{opacity:.55;cursor:default}

/* Na Přehledu je box užší než v Hubu — sloupce se stáhnou, ať se
   tabulka vejde bez vodorovného posuvníku. */
.hhall .hall{margin-bottom:6px}
.hhall .hall th.c,.hhall .hall td.c{width:58px}
.hhall .hall th,.hhall .hall td{padding:7px 8px}
.hhall .hall td.c{font-size:14px}
.hhall .note{margin:0}

/* Rozsah, ze kterého se žebříčky sečetly. Bez něj se nedalo poznat,
   jestli „0“ znamená „nikdo nic neudělal“ nebo „nemám data“. */
.boardsnote{margin:0 0 10px;font-size:12px;color:var(--mute)}
.boards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.board{background:var(--haze);border-radius:12px;padding:16px 18px}
.board h4{margin:0 0 3px;font-size:14px;font-weight:600}
.board .cap{font-size:12px;color:var(--mute);margin:0 0 10px}
.board ol{margin:0;padding-left:19px;font-size:13px}
.board li{padding:3px 0}
.board li span{float:right;font-family:var(--f-mono);font-size:12px;color:var(--mute)}
.board li.me{color:var(--blue);font-weight:600}

/* Žolíky: řádek na čip, pod ním jména. Proužek nese poměr, ať se karta
   dá přečíst bez čtení jmen — otázka je „je ten čip ještě ve hře?“. */
.chiprow{display:flex;align-items:center;gap:10px;padding:6px 0;
  border-top:1px solid var(--line-soft)}
.chiprow:first-child{border-top:0;padding-top:0}
.chiprow .nm{font-size:13px;font-weight:600;flex:none}
.chiprow .bar{flex:1;height:6px;min-width:24px;background:var(--white);
  border-radius:9999px;overflow:hidden}
.chiprow .bar i{display:block;height:100%;background:var(--blue);opacity:.55}
.chiprow .ct{font-family:var(--f-mono);font-size:11px;color:var(--mute);flex:none}
.chipwho{font-size:12px;line-height:1.5;margin:2px 0 8px}
.chipwho:last-child{margin-bottom:0}
.chipwho .mute{color:var(--mute)}
.chipwho .me{color:var(--blue);font-weight:600}

.capmap{display:flex;flex-direction:column;gap:8px}
.capmap .row2{display:flex;align-items:center;gap:10px;font-size:13px}
.capmap .nm2{width:96px;font-weight:600;flex:none}
.capmap .bar2{flex:1;height:20px;background:var(--haze);border-radius:var(--r-in);
  overflow:hidden;min-width:40px}
.capmap .bar2 i{display:block;height:100%;background:var(--blue);opacity:.8}
.capmap .ct2{width:74px;text-align:right;font-family:var(--f-mono);
  font-size:11.5px;color:var(--mute);flex:none}



/* ---------- odpočet do deadlinu ---------- */
/* Odpočet byl monospace 11,5 px na fialové — nečitelný přesně ve chvíli,
   kdy na něm nejvíc záleží. Teď je to dvouřádkový štítek: malý popisek
   nahoře, velké číslo dole, a zlatý lem, aby se odlišil od navigace. */
.cd{display:inline-flex;flex-direction:column;justify-content:center;
  padding:4px 14px;border-radius:10px;white-space:nowrap;line-height:1.1;
  background:rgba(255,255,255,.08);border:1px solid rgba(204,156,72,.42);
  color:#fff}
.cd .lbl{font-family:var(--f-mono);font-size:8.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lift)}
.cd .val{font-family:var(--f-disp);font-size:16px;font-weight:800;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cd.soon{background:rgba(232,194,113,.16);border-color:var(--gold-lift)}
.cd.soon .val{color:var(--gold-lift)}
.cd.late{background:var(--alert);border-color:transparent}
.cd.late .lbl{color:rgba(255,255,255,.85)}
.cd.live{background:rgba(0,255,135,.14);border-color:var(--mint-fill)}
.cd.live .lbl{color:var(--mint-fill)}

/* ---------- kapitánská doporučení ---------- */
.capbar{display:grid;gap:8px;margin:12px 0}
.capopt{
  display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:12px;
  padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--white);
}
.capopt.top{border-color:rgba(43,127,255,.45);background:rgba(43,127,255,.05)}
.capopt.now{box-shadow:inset 3px 0 0 var(--ok)}
.capopt .rk{font-family:var(--f-mono);color:var(--mute);font-size:13px}
.capopt .nm{font-weight:700}
.capopt .nm span{display:block;font-weight:500;color:var(--mute);font-size:12px}
.capopt .xp{font-family:var(--f-disp);font-size:20px;font-weight:700;text-align:right}
.capopt .xp span{display:block;font-family:var(--f);font-size:11px;
  font-weight:500;color:var(--mute)}

/* ---------- návrh na prohození jedenáctky ---------- */
.swap{display:grid;gap:6px;margin:12px 0}
.swap>div{padding:9px 13px;border-radius:var(--r-btn);font-size:13px}
.swap .in{background:var(--ok-bg);color:var(--ok)}
.swap .out{background:var(--warn-bg);color:var(--warn)}

/* ---------- ticker rozpisu ---------- */
.ticker{font-size:12px}
.ticker td.tn{font-weight:700;white-space:nowrap}
.ticker td.num{font-family:var(--f-mono);text-align:right;color:var(--mute)}
.ticker td.fx{padding:3px;text-align:center}
.ticker td.fx span{
  display:inline-block;min-width:42px;padding:4px 5px;margin:1px;
  border-radius:var(--r-in);font-family:var(--f-mono);font-size:11px;font-weight:700;
}
.ticker .f1{background:var(--f1);color:var(--f1i)}
.ticker .f2{background:var(--f2);color:var(--f2i)}
.ticker .f3{background:var(--f3);color:var(--f3i)}
.ticker .f4{background:var(--f4);color:var(--f4i)}
.ticker .f5{background:var(--f5);color:var(--f5i)}
.ticker td.blank span{background:var(--blank) 4px,#e4e4e4 4px,#e4e4e4 8px);color:var(--mute)}
.ticker td.dbl{background:rgba(43,127,255,.07)}

/* ---------- blanky a doubly ---------- */
.shape{padding:12px 15px;border:1px solid var(--line);border-radius:var(--r-card);
  margin-bottom:9px;background:var(--white)}
.shape h3{margin:0 0 6px;font-family:var(--f-disp);font-size:16px;text-transform:uppercase}
.shape p{margin:3px 0;font-size:13px}
.shape .bl{color:var(--alert)}
.shape .db{color:var(--ok)}

/* ---------- čipy ---------- */
.tag.bb{background:var(--ok-bg);color:var(--ok)}
.tag.tc{background:rgba(43,127,255,.12);color:var(--blue)}
.tag.fh{background:var(--warn-bg);color:var(--warn)}

/* ---------- ceny ---------- */
td.up{color:var(--ok);font-weight:700}
td.down{color:var(--alert);font-weight:700}
td .sub{display:block;color:var(--mute);font-size:11px;font-weight:500}
tr.me{background:rgba(63,191,127,.09)}

/* ---------- zisk z transferu ---------- */
.cand .gain{min-width:64px}
.cand .gain.yes b{color:var(--ok)}
.cand .gain.maybe b{color:var(--warn)}
.cand .gain.no b{color:var(--alert)}

/* ---------- porovnání hráčů ---------- */
button.cmp{
  border:1px solid var(--line);background:var(--white);color:var(--mute);
  border-radius:var(--r-in);font-size:12px;line-height:1;padding:3px 6px;
  margin-left:5px;cursor:pointer;
}
button.cmp:hover{border-color:var(--blue);color:var(--blue)}
button.cmp.on{background:var(--blue);border-color:var(--blue);color:var(--white)}
.compare .chead{display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:12px;text-align:center;margin-bottom:14px}
.compare .chead b{display:block;font-family:var(--f-disp);font-size:19px;text-transform:uppercase}
.compare .chead span{color:var(--mute);font-size:12px}
.compare .vs{font-family:var(--f-disp);font-size:13px;font-weight:800;
  letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.ctab td{text-align:center;font-family:var(--f-mono);font-size:13px}
.ctab td.lbl{font-family:var(--f);color:var(--mute);font-size:12px;width:40%}
.ctab td.win{font-weight:700;color:var(--ok);background:var(--ok-bg)}

/* ---------- drobnosti ---------- */
.bench td{opacity:1;color:var(--mute)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}






/* ---------- diagnostika hledání náhrad ---------- */
.near{margin:10px 0}
.near>b{display:block;font-size:12px;color:var(--mute);margin-bottom:6px;font-weight:600}
details.why{margin-top:10px;font-size:12px}
details.why summary{cursor:pointer;color:var(--mute);user-select:none}
details.why summary:hover{color:var(--blue)}
table.funnel{margin-top:8px;font-size:12px}
table.funnel td{padding:4px 10px 4px 0;border:0}
table.funnel td.n{font-family:var(--f-mono);text-align:right;width:50px}
table.funnel td.al{color:var(--alert);font-weight:700}

/* ---------- rozbalovací karty transferů ---------- */
details.issue{padding:0}
details.issue>summary{
  list-style:none;cursor:pointer;padding:14px 17px;
  border-radius:var(--r-card);position:relative;
}
details.issue>summary::-webkit-details-marker{display:none}
details.issue>summary:hover{background:rgba(0,0,0,.02)}
details.issue>summary .hdr{margin:0}
details.issue>summary .why{margin:7px 0 0}
details.issue>summary .more{
  display:inline-block;margin-top:9px;font-size:12px;color:var(--blue);font-weight:600;
}
details.issue>summary .more::before{content:'▸ '}
details.issue[open]>summary .more::before{content:'▾ '}
details.issue[open]>summary .more{color:var(--mute)}
details.issue[open]>summary .more::after{content:' — sbalit'}
.issue-body{padding:0 17px 16px;border-top:1px solid var(--line);margin-top:2px}
.issue-body h4{
  font-family:var(--f-disp);font-size:13px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--mute);margin:16px 0 8px;font-weight:700;
}
.tag.ep{background:rgba(43,127,255,.1);color:var(--blue);font-weight:700}

/* ---------- mřížka statistik podle pozice ---------- */
.pstats{
  display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  border:1px solid var(--line);border-radius:var(--r-btn);overflow:hidden;margin:8px 0;
}
.pstats>div{background:var(--white);padding:9px 11px}
.pstats .k{font-size:11px;color:var(--mute);line-height:1.3}
.pstats .v{font-family:var(--f-mono);font-size:15px;font-weight:700;margin-top:2px}
.pstats .nt{font-size:10px;color:var(--mute);margin-top:1px}
.cand .l .pstats{margin-top:8px}

/* projekce FPL v detailu hráče */
.kpis.eprow .v.big{font-size:26px;color:var(--blue)}

/* ---------- živé body v probíhajícím kole ---------- */
/* Souhrn kola sedí uvnitř hřiště, ne nad ním — je to jeho hlavička.

   Hřiště je tmavé, takže bílá karta by na něm byla cizí obdélník. Místo
   toho je průsvitná s mátovým lemem: čísla drží kontrast, ale je za nimi
   pořád vidět podklad. Dole je oddělovací linka a odsazení, aby velké
   číslo nekolidovalo s první řadou dresů. */
.livebar{
  display:flex;flex-wrap:wrap;align-items:center;gap:20px;
  padding:14px 18px 16px;margin:-4px 0 2px;
  background:linear-gradient(135deg,var(--aubergine),var(--aubergine-lift));
  border-radius:12px;border-bottom:3px solid rgba(0,0,0,.25);
  box-shadow:0 6px 16px rgba(0,0,0,.28);
}
.livebar .big{font-family:var(--f-disp);font-size:38px;font-weight:800;line-height:.95;
  color:var(--mint-fill);text-shadow:0 2px 14px rgba(0,0,0,.45)}
.livebar.done .big{color:#fff}
.livebar b{font-family:var(--f-disp);font-size:21px;font-weight:800;color:#fff}
.livebar span{display:block;font-size:10.5px;color:#C7A8CE;font-weight:500;
  margin-top:4px;letter-spacing:.02em}
.livebar .txt{flex:1 1 190px;font-size:11.5px;color:#B291BA;text-align:right;
  line-height:1.45}

.shirt .pts{font-family:var(--f-disp);font-size:28px;font-weight:800;line-height:1;
  color:var(--charcoal)}
.shirt .pts.hi{color:var(--ok)}
.shirt .pts.md{color:var(--charcoal)}
.shirt .pts.lo{color:var(--mute)}
.shirt .pts.wait{color:var(--mute);font-weight:700;font-size:19px}
/* Minuty jsou samostatný řádek pod body — ne <small> uvnitř čísla, jinak
   by si výšku určoval obsah a řádky by se rozjely. */
.shirt .mn{font-family:var(--f-mono);font-size:9.5px;color:var(--mute);line-height:1}
.shirt .mn.wait{color:var(--warn)}
.shirt.wait{background:rgba(255,255,255,.68)}
.shirt.wait .kit{opacity:.5}

td.gwpts b{font-family:var(--f-mono)}
td.gwpts .wait{color:var(--mute)}



/* ---------- tabulka náhrad ---------- */
.candhead,.cand2{
  display:grid;
  grid-template-columns:1.6fr .7fr .7fr .8fr .9fr .7fr 40px;
  align-items:center;gap:8px;padding:8px 4px;
}
.candhead{
  font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--mute);font-weight:600;border-bottom:1px solid var(--line);padding-bottom:6px;
}
.cand2{border-bottom:1px solid var(--line);font-size:13px}
.cand2:last-of-type{border-bottom:0}
.cand2 .n{font-family:var(--f-mono);text-align:right}
.cand2 .n::before{content:''}
.cand2 .tm{color:var(--mute);font-size:12px}
.cand2 .own b{color:var(--blue)}
.cand2.own-row{background:rgba(0,0,0,.02);border-radius:var(--r-in)}
.cand2.own-row .own b{color:var(--charcoal)}

button.info{
  width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line);background:var(--white);color:var(--mute);
  font-family:var(--f-disp);font-size:12px;font-weight:700;line-height:1;
  cursor:pointer;padding:0;
}
button.info:hover{border-color:var(--blue);color:var(--blue)}
button.info.on{background:var(--blue);border-color:var(--blue);color:var(--white)}

.statpop{
  margin:2px 0 10px;padding:11px 13px;
  background:var(--haze);border-radius:var(--r-btn);
}
.statpop h5{
  margin:0 0 8px;font-family:var(--f-disp);font-size:12px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--mute);font-weight:700;
}
.statpop .note{margin-bottom:0}



/* ---------- kádr po pozicích ---------- */
.squadlist{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;margin-top:10px;
}
.phead,.prow{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) 58px 46px 46px 44px 186px 62px;
  gap:8px;align-items:center;padding:9px 14px;
}
.phead.live,.squadlist.live .prow{
  grid-template-columns:minmax(0,1.6fr) 56px 44px 44px 42px 46px 186px 60px;
}
.phead{
  background:var(--haze);font-size:10px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--mute);font-weight:600;
}
.prow{border-top:1px solid var(--line);font-size:13px}
.prow.benched{color:var(--mute);background:rgba(0,0,0,.015)}
.prow.diff{box-shadow:inset 2px 0 0 var(--warn)}
.prow .n{font-family:var(--f-mono);text-align:right}
.prow .n::before{content:''}
.prow .own{color:var(--mute)}

.prow .who{display:flex;align-items:center;gap:6px;min-width:0}
.prow .who b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .who em{font-style:normal;color:var(--mute);font-size:11px;font-family:var(--f-mono)}
.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.dot.ok{background:var(--ok)}
.dot.warn{background:var(--warn-line)}
.dot.bad{background:var(--alert)}
.badge{
  font-size:9px;padding:1px 5px;border-radius:var(--r-in);
  background:var(--haze);color:var(--mute);font-weight:700;white-space:nowrap;
}
.badge.cap{background:var(--charcoal);color:var(--white)}
.badge.dif{background:rgba(43,127,255,.12);color:var(--blue)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
i.mv{font-style:normal;font-size:8px;margin-left:2px}
i.mv.up{color:var(--ok)}
i.mv.down{color:var(--alert)}

.tick3{display:flex;gap:3px}
.tick3>span{
  flex:1;min-width:0;text-align:center;padding:3px 2px;border-radius:var(--r-in);
  font-family:var(--f-mono);font-size:10px;font-weight:700;line-height:1.15;
}
.tick3>span small{display:block;font-size:8px;font-weight:400;opacity:.75}
.tick3 .f1{background:var(--f1);color:var(--f1i)}
.tick3 .f2{background:var(--f2);color:var(--f2i)}
.tick3 .f3{background:var(--f3);color:var(--f3i)}
.tick3 .f4{background:var(--f4);color:var(--f4i)}
.tick3 .f5{background:var(--f5);color:var(--f5i)}
.tick3 .blank{background:var(--blank);color:#5f5f5f}

.pgroup{
  display:flex;align-items:baseline;gap:9px;padding:7px 14px;
  background:rgba(43,127,255,.07);border-top:1px solid var(--line);
  font-family:var(--f-disp);font-size:12px;text-transform:uppercase;
  letter-spacing:.05em;font-weight:700;color:var(--blue);
}
.pgroup span{
  font-family:var(--f);font-size:11px;text-transform:none;
  letter-spacing:0;font-weight:500;color:var(--mute);
}
.pgroup.bench-h{background:var(--haze);color:var(--mute)}

.fdrleg{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-top:9px;font-size:11px;color:var(--mute)}
.fdrleg span{display:flex;align-items:center;gap:4px}
.fdrleg i{width:20px;height:11px;border-radius:3px;display:inline-block}
.fdrleg .f1{background:var(--f1)}.fdrleg .f2{background:var(--f2)}
.fdrleg .f3{background:var(--f3)}.fdrleg .f4{background:var(--f4)}
.fdrleg .f5{background:var(--f5)}
.fdrleg .blank{background:var(--blank)}
.fdrleg .hint{margin-left:auto}

/* ============================================================
   Responzivita a preference — jeden blok na podmínku.
   Dřív byly čtyři samostatné bloky max-width:640px a dva
   prefers-reduced-motion (jeden s mezerou v podmínce, druhý bez).
   ============================================================ */

/* Responzivní bloky žijí ve vlastních <style media> tagech za tímhle
   blokem — díky tomu se dají přepínačem zobrazení vynutit nebo vypnout
   bez duplikace jediného pravidla. */




@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}

/* ============================================================
   PODPIS: kolejnice sezóny
   38 čárek, jedna na kolo. Odehraná plná, aktuální mátová a plní
   se do deadlinu, budoucí vlásek. Prázdné kolo tvého kádru dostane
   červenou tečku, dvojité mátovou. Jediné místo, kde je celá sezóna
   vidět naráz — dřív byly blanky schované v Programu.
   ============================================================ */
.rail{background:var(--aubergine-lift)}
.rail .wrap{display:flex;align-items:flex-end;gap:2px;height:40px;padding-top:19px;
  padding-bottom:7px}
.gw{flex:1;position:relative;height:100%;display:flex;align-items:flex-end;
  min-width:0;border:0;background:none;padding:0;cursor:default}
.gw i{display:block;width:100%;height:4px;border-radius:2px;
  background:rgba(255,255,255,.16)}
.gw.past i{background:rgba(255,255,255,.42)}
.gw.now i{height:11px;background:linear-gradient(90deg,
  var(--mint-fill) var(--fill,0%),rgba(0,255,135,.22) var(--fill,0%))}
/* Popisek aktuálního kola stojí nad čárkou — proto má .wrap horní
   odsazení. Bez nowrap a bez místa se „GW2“ uřízlo o navbar. */
.gw.now::after{content:attr(data-gw);position:absolute;bottom:14px;left:0;
  white-space:nowrap;line-height:1;
  font-family:var(--f-mono);font-size:9.5px;font-weight:700;color:var(--mint-fill)}
.gw b{position:absolute;top:1px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--alert)}
.gw.dbl b{background:var(--mint-fill)}
.railkey{display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  padding:0 0 8px;font-size:10.5px;color:#B98FC2}
.railkey span{display:flex;align-items:center;gap:5px}
.railkey i{width:6px;height:6px;border-radius:50%;display:inline-block}

/* ---------- odznaky klubů ---------- */
button.small.icon{padding:4px 8px;font-size:14px;line-height:1;min-width:30px}

.crest{width:21px;height:21px;flex:0 0 auto;border-radius:5px;
  object-fit:contain;background:var(--haze);margin-right:1px}
.crest.sm{width:17px;height:17px;border-radius:4px}


/* ---------- ukazatel pohybu ceny ---------- */
/* Poznámka o tom, kde data leží. Odlišená proužkem, ne barvou pozadí —
   je to informace, ne varování, a neměla by přebít vlastní obsah. */
.note.store{border-left:2px solid var(--line);padding-left:10px;
  border-radius:0;margin-top:12px}
.note.store.ok{border-left-color:var(--ok)}
.lnkbtn.inline{margin:0;font-size:inherit;vertical-align:baseline}

/* Otáčení při načítání. Zastaví se samo, protože třídu sundá finally. */
@keyframes spin{to{transform:rotate(360deg)}}
button.small.icon.spin{animation:spin 900ms linear infinite}
button.small.icon:disabled{opacity:.5;cursor:default}

/* ---------- přepínač kol u novinek ---------- */
.gwnav{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 12px}
.gwnav button{font-family:var(--f-mono);font-size:11.5px;padding:5px 10px;
  border:1px solid var(--line);background:none;border-radius:var(--r-btn);
  color:var(--mute);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.gwnav button:hover{border-color:var(--line-soft);color:var(--charcoal)}
.gwnav button[aria-selected="true"]{background:var(--aubergine);color:#fff;
  border-color:var(--aubergine)}
/* Tečka u kola, které ještě není hotové. Barva nese význam, tvar ne —
   proto má tlačítko navíc title, aby to nebylo jen barevné rozlišení. */
.gwnav .dot{width:5px;height:5px;border-radius:50%;display:inline-block}
.gwnav .dot.live{background:var(--alert)}
.gwnav .dot.wait{background:var(--warn-line)}
.note.phase{margin:0 0 12px}

/* ---------- přihlášení a sync ---------- */
.sync{font-family:var(--f-mono);font-size:10.5px;color:#B98FC2;white-space:nowrap}
button.small.on{border-color:var(--mint-fill);color:var(--mint-fill);
  max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- úvodní přehled ----------
   Hlavička panelu (nadpis „Přehled“ + deadline) je pryč: sekci pojmenuje
   navigace a deadline stojí v liště nad obsahem. Karta s čísly proto
   začíná rovnou nahoře. */

.hcards{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin:0 0 14px}
.hcard{background:var(--haze);border-radius:var(--r-card);padding:12px 14px}
.hcard .lb{display:block;font-size:11px;color:var(--mute);margin-bottom:3px}
.hcard b{font-family:var(--f-disp);font-size:24px;font-weight:700;line-height:1.1}
.hcard .sb{display:block;font-size:11px;color:var(--mute);margin-top:2px}

.hgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  margin:0 0 12px}
.hbox{border:1px solid var(--line);border-radius:var(--r-card);padding:13px 15px;
  min-width:0}
.hbox h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;
  font-family:var(--f-disp);font-size:13px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--head)}
.hbox .note{margin:0}
.hbox .cnt{margin-left:auto;font-family:var(--f-mono);font-size:11px;
  background:var(--alert-bg);color:var(--alert);border-radius:9px;padding:2px 8px}
.hi{flex:none;width:19px;height:19px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-style:normal;font-size:11px;
  background:var(--haze);color:var(--mute)}
.hi.al{background:var(--alert-bg);color:var(--alert)}
.hi.ok{background:var(--ok-bg);color:var(--ok)}
.lnkbtn{margin-left:auto;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--f);font-size:11.5px;font-weight:600;color:var(--blue);
  text-transform:none;letter-spacing:0}
.lnkbtn:hover{text-decoration:underline}

/* Řádek přehledu: zkratka klubu, jméno, popis, případně číslo vpravo.
   Jméno roste, popis se zkracuje — ne naopak, protože bez jména
   řádek nic neříká. */
.hrow{display:flex;align-items:baseline;gap:8px;padding:5px 0;
  border-top:1px solid var(--line-soft);font-size:13px}
.hrow:first-of-type{border-top:0}
.hrow em{flex:none;width:32px;font-style:normal;font-family:var(--f-mono);
  font-size:10px;color:var(--mute)}
.hrow b{flex:none;font-weight:600;max-width:45%;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hrow span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12px}
.hrow .mute{color:var(--mute)}
.hrow .pc{margin-left:auto;flex:none;font-family:var(--f-mono);font-size:12px;
  font-weight:700}

/* ---------- watchlist ---------- */
.star{background:none;border:0;padding:0 2px;cursor:pointer;line-height:1;
  font-size:15px;color:var(--mute);min-width:0}
.star:hover{color:var(--gold)}
.star.on{color:var(--gold)}
.watchadd{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 16px}
.watchadd label{display:flex;flex-direction:column;gap:6px;min-width:0;
  font-size:11.5px;color:var(--mute)}
.watchadd input,.watchadd select{font-size:13px;padding:7px 9px}

.meter{display:inline-block;width:54px;height:6px;border-radius:3px;
  background:var(--haze);overflow:hidden;vertical-align:middle;margin-right:6px}
.meter i{display:block;height:100%}
.meter.up i{background:var(--ok)}
.meter.down i{background:var(--alert)}

/* ---------- kostra při načítání ----------
   Načtení ligy trvá vteřiny a dřív se do té doby nedělo nic. */
.skel{display:flex;flex-direction:column;gap:9px;margin:14px 0}
.skel i{display:block;height:14px;border-radius:var(--r-in);
  background:linear-gradient(90deg,var(--haze) 25%,#EAE4EC 37%,var(--haze) 63%);
  background-size:400% 100%;animation:shimmer 1.3s ease-in-out infinite}
.skel i:nth-child(2){width:82%} .skel i:nth-child(3){width:64%}
.skel i:nth-child(4){width:74%} .skel i:nth-child(5){width:50%}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---------- plánovač přestupů ---------- */
/* Kola pod sebou, ne čtyři sloupce vedle sebe. Ve čtyřech úzkých boxech
   se nedalo přečíst ani jméno hráče a formuláře byly rozbalené všechny
   najednou — působilo to nahňácaně a nebylo poznat, co po člověku appka chce. */
.plan-rows{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.pgw{border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);
  padding:13px 16px}
.pgw.hit{border-left:3px solid var(--alert)}
.pgw-h{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:9px;margin-bottom:3px;border-bottom:1px solid var(--line-soft)}
.pgw h4{margin:0;font-family:var(--f-disp);font-size:14px;font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;color:var(--head);min-width:52px}
.pgw .ft{font-family:var(--f-mono);font-size:11.5px;color:var(--mute);margin:0}
.pgw .ft b{color:var(--charcoal);font-size:13px}
.pgw .ft.neg b{color:var(--alert)}
.pgw-h button{margin-left:auto}
button.small.ghost{background:none;border-color:var(--line);color:var(--mute)}
button.small.ghost:hover{border-color:var(--blue);color:var(--blue)}
.pmove .cost{font-family:var(--f-mono);font-size:11.5px;color:var(--mute);
  margin-left:8px}
.pempty.err{color:var(--alert)}
.warnbox{background:var(--alert-bg);color:var(--charcoal)}
.pmove{display:flex;align-items:center;gap:7px;padding:6px 0;
  border-top:1px solid var(--line-soft);font-size:12.5px}
.pmove .ar{font-family:var(--f-mono);color:var(--mute);flex:none}
.pmove .rm{margin-left:auto;border:0;background:none;color:var(--mute);
  cursor:pointer;font-size:15px;line-height:1;padding:0 3px}
.pmove .rm:hover{color:var(--alert)}
.pempty{font-size:12px;color:var(--mute);padding:8px 0 2px}
.padd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;
  gap:12px;align-items:end;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line-soft)}
.padd label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;
  color:var(--mute);min-width:0}
.padd select,.padd input{font-size:12.5px;padding:6px 8px;width:100%}
.padd select[size]{padding:2px}
.padd .cnt{font-family:var(--f-mono);font-size:10.5px;color:var(--mute)}
.padd button{font-size:12.5px;padding:7px 14px;white-space:nowrap}
.psum{display:flex;gap:26px;flex-wrap:wrap;padding:15px 18px;margin:0 0 14px;
  background:var(--haze);border-radius:var(--r-card)}
.psum div{min-width:82px}
.psum .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--mute)}
.psum .v{font-family:var(--f-disp);font-size:22px;font-weight:800;line-height:1.1}
.psum .v.neg{color:var(--alert)} .psum .v.pos{color:var(--ok)}

/* ---------- snapshoty a měsíční tabulky ---------- */
.delta{font-family:var(--f-mono);font-size:11px;font-weight:700;margin-left:6px}
.delta.up{color:var(--ok)} .delta.down{color:var(--alert)} .delta.same{color:var(--mute)}
.phasenav{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 14px}


/* ---------- tmavý režim ----------
   Vědomě NENÍ na prefers-color-scheme. Appka je navržená jako světlá —
   barevná stupnice obtížnosti i odznaky klubů čtou na papíře líp než
   na černé. Tma je proto přepínač, ne automatika; volba se pamatuje
   v localStorage pod klíčem fpl_theme. */
:root[data-theme="dark"]{
    --sky:#1A0620; --sky-deep:#120416;
    --white:#241029; --haze:#2E1634; --charcoal:#F2E9F4; --ink:#F2E9F4;
    --mute:#B291BA; --line:rgba(255,255,255,.14); --line-soft:rgba(255,255,255,.07);
    --blue:#4FD1E8;
    --ok:#3FD98C;    --ok-bg:#12321F;
    --warn:#E8B44A;  --warn-bg:#332612;   --warn-line:#E8B44A;
    --alert:#FF6B9D; --alert-bg:#3A1224;
    --flop:#C79BE8;
    --f1:#2E9E62; --f1i:#EAFBF1;
    --f2:#4E7D64; --f2i:#EAFBF1;
    --f3:#3E2C45; --f3i:#D6C9DA;
    --f4:#8C4A44; --f4i:#FDECEA;
    --f5:#C2483C; --f5i:#FFFFFF;
    --blank:repeating-linear-gradient(45deg,#33203A,#33203A 3px,#3E2A45 3px,#3E2A45 6px);
    --blank-i:#B291BA;

    /* Nadpisy na plátně. Světlá auberginová, ne ta z palety chromu —
       ta je na tomhle pozadí neviditelná. 12,4:1 proti --sky. */
    --head:#E4CFEA;
  }
:root[data-theme="dark"] body{background:var(--sky)}
:root[data-theme="dark"] .skel i{
  background:linear-gradient(90deg,var(--haze) 25%,#3A1E42 37%,var(--haze) 63%);
  background-size:400% 100%}

/* ---------- žebříčky Top hráčů ---------- */
/* Čtyři boxy vedle sebe. Osm kategorií se tak zalomí přesně na dva
   řádky a celá záložka se vejde na jednu obrazovku. Aby se do čtvrtiny
   šířky vešlo jméno s odznakem a číslem, musel jít dolů řádkový rozestup,
   velikost písma i odznak — obsah zůstal, jen se zhutnil. */
.tgrid{display:grid;gap:9px;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:10px 0 20px}
.tbox{background:var(--haze);border-radius:var(--r-card);padding:12px 12px 10px;
  min-width:0}
.tbox h4{margin:0 0 1px;font-family:var(--f-disp);font-size:11.5px;font-weight:800;
  letter-spacing:.7px;text-transform:uppercase;color:var(--head)}
.tbox .cap{margin:0 0 7px;font-size:10.5px;color:var(--mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tempty{font-size:11.5px;color:var(--mute);margin:0}

.tlist{list-style:none;margin:0;padding:0;counter-reset:tr}
.tlist li{display:flex;align-items:center;gap:6px;padding:3px 0;
  border-top:1px solid var(--line-soft);counter-increment:tr}
.tlist li:first-child{border-top:0}
.tlist li::before{content:counter(tr);flex:none;width:13px;text-align:right;
  font-family:var(--f-mono);font-size:10px;color:var(--mute)}
/* Medaile je náhrada čísla, ne přídavek — jinak by u prvních tří
   stálo „1 🥇“ a řádek by se rozjel o dalších patnáct pixelů. */
.tlist li:has(.tmdl)::before{display:none}
.tmdl{flex:none;width:13px;font-style:normal;font-size:11px;line-height:1;
  text-align:right}
.tlist li.me{box-shadow:inset 2px 0 0 var(--ok);padding-left:5px;margin-left:-5px}
.tname{flex:1;min-width:0;display:flex;align-items:center;gap:5px;
  background:none;border:0;padding:0;cursor:pointer;text-align:left;
  font-family:var(--f);font-size:12px;color:var(--charcoal)}
.tname .crest{width:15px;height:15px}
.tname b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0}
.tname em{font-style:normal;font-family:var(--f-mono);font-size:9px;
  color:var(--mute);flex:none}
.tname:hover b{color:var(--blue);text-decoration:underline}
.tval{flex:none;font-family:var(--f-mono);font-size:12px;font-weight:700}

/* Mezistupně: čtyři sloupce na 1200px už jsou nečitelné, dva jsou pořád
   lepší než jeden dlouhý sloupec. */
@media (max-width:1180px){
  .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- výběr dvou hráčů k porovnání ---------- */
.cmpbar{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;
  align-items:end;margin:12px 0 18px}
.cmpbar label{display:flex;flex-direction:column;gap:6px;min-width:0;
  font-size:11.5px;color:var(--mute)}
.cmpbar input,.cmpbar select{font-size:13px;padding:7px 9px}
.cmpvs{font-family:var(--f-disp);font-size:12px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  padding-bottom:9px}
.cmpout{background:var(--haze);border-radius:var(--r-card);padding:18px 20px}
.cmpout .note:only-child{margin:0}

/* ---------- oprava počtu volných přestupů ---------- */
.ftbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 16px;margin:0 0 14px;background:var(--haze);
  border-radius:var(--r-card);font-family:var(--f-mono);
  font-size:12px;color:var(--mute)}
.ftbar label{display:inline-flex;align-items:center;gap:8px}
.ftbar .pin{width:56px}
.ftbar .fthint{flex:1 1 240px;font-family:var(--f);font-size:12px}

/* ---------- diferenciály ---------- */
.diffs{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}

/* ---------- historie miniligy ---------- */
table.hist td.empty{color:var(--mute);opacity:.6}
table.hist td.first b{color:var(--ok)}
table.hist td u{display:block;text-decoration:none;font-size:10px;
  color:var(--mute);font-family:var(--f-mono);white-space:nowrap}
.psum .k2{font-size:10px;color:var(--mute);font-family:var(--f-mono);margin-top:2px}
.pmove .cost.gain{color:var(--ok);font-weight:700}

/* ---------- historie a trofeje ---------- */
.trophies{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:6px}
.trophies li{display:flex;align-items:center;gap:12px;padding:8px 14px;
  background:var(--haze);border-radius:var(--r-btn)}
.trophies li.me{box-shadow:inset 3px 0 0 var(--ok)}
.trophies .pos{font-family:var(--f-mono);font-size:11px;color:var(--mute);
  width:14px;flex:none}
.trophies .nm{flex:1;min-width:0}
.trophies .mdl{display:flex;gap:10px;font-size:15px}
.trophies .mdl u{text-decoration:none;font-family:var(--f-mono);font-size:11px;
  font-weight:700;margin-left:2px;color:var(--charcoal)}

table.hist td.n{font-family:var(--f-mono);font-size:13px;white-space:nowrap}
table.hist td.empty{color:var(--mute);opacity:.45}
table.hist td.guest{color:var(--mute)}
table.hist td .m{font-style:normal;margin-right:3px}
table.hist th.n{font-family:var(--f-mono);font-size:11px}

/* ---------- hlavička panelu s tlačítkem vpravo ---------- */
.panelhead{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  margin-bottom:4px}
.panelhead .hint{flex:1 1 260px;margin:0}
.panelhead button{flex:none;margin-top:1px}

/* ---------- nejlehčí los ---------- */
.easygrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin:12px 0 6px}
.easy{border:1px solid var(--line);border-radius:var(--r-card);padding:13px 15px}
.easyhead{display:flex;align-items:center;gap:11px}
.easyhead .rk{font-family:var(--f-mono);font-size:12px;color:var(--mute);flex:none}
.easyhead .fx{flex:1;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fxpair{display:inline-flex;align-items:center;gap:5px;font-size:13px}
.fxpair .vs{color:var(--mute);font-size:11px}
.amp{color:var(--mute);font-size:11px;margin:0 3px}
.fdr{flex:none;font-family:var(--f-mono);font-size:14px;font-weight:700;
  padding:3px 9px;border-radius:var(--r-in);min-width:42px;text-align:center}
.fdr.f1{background:var(--f1);color:var(--f1i)} .fdr.f2{background:var(--f2);color:var(--f2i)}
.fdr.f3{background:var(--f3);color:var(--f3i)} .fdr.f4{background:var(--f4);color:var(--f4i)}
.fdr.f5{background:var(--f5);color:var(--f5i)}
.fdr.blank{background:var(--blank);color:var(--blank-i)}
.easymine{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--line-soft)}
.easymine .pl{display:inline-flex;align-items:baseline;gap:6px;font-size:12.5px;
  background:var(--haze);padding:4px 9px;border-radius:99px}
.easymine .pl em{font-style:normal;font-family:var(--f-mono);font-size:11px;color:var(--mute)}
.easymine .pl u{text-decoration:none;font-size:10px;color:var(--mute)}
.easynone{margin:11px 0 0;padding-top:10px;border-top:1px solid var(--line-soft);
  font-size:12.5px;color:var(--mute)}

/* ---------- tři nejdražší ---------- */
.pricetop{display:flex;flex-direction:column;gap:2px;margin:12px 0 6px}
.ptrow{display:grid;grid-template-columns:minmax(0,1.1fr) 60px minmax(0,1.4fr) auto;
  gap:12px;align-items:center;padding:9px 4px;border-bottom:1px solid var(--line-soft)}
.ptrow:last-child{border-bottom:0}
.ptrow .cost{font-family:var(--f-mono);font-size:13px;text-align:right}
.ptrow .fx{min-width:0;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.blankfx{font-size:12px;color:var(--mute)}

.ok-t{color:var(--ok);font-weight:700}
.warn-t{color:var(--warn);font-weight:700}
.bad-t{color:var(--alert);font-weight:700}

/* ---------- infotooltip ---------- */
.i-tip{width:17px;height:17px;padding:0;flex:none;
  border-radius:50%;border:1px solid var(--line);background:none;
  color:var(--mute);font-family:var(--f-disp);font-size:11px;font-weight:800;
  line-height:1;cursor:pointer;vertical-align:middle;margin-left:7px;
  text-transform:none;letter-spacing:0}
.i-tip:hover{border-color:var(--blue);color:var(--blue)}
.i-tip[aria-expanded="true"]{background:var(--charcoal);border-color:var(--charcoal);
  color:var(--white)}
h2 .i-tip,h3 .i-tip,h4 .i-tip{position:relative;top:-1px}

.tipbox{display:block;margin:8px 0 14px;padding:13px 16px;
  background:var(--haze);border-left:3px solid var(--blue);
  border-radius:0 var(--r-btn) var(--r-btn) 0;
  font-family:var(--f);font-size:12.5px;font-weight:400;line-height:1.55;
  letter-spacing:0;text-transform:none;color:var(--mute);max-width:760px}
.tipbox b{color:var(--charcoal)}
.tipbox code{font-family:var(--f-mono);font-size:11.5px;
  background:rgba(55,0,60,.07);padding:1px 4px;border-radius:3px}

/* ---------- mobilní skořápka: výchozí stav ----------
   Spodní lišta i plachta „Více“ jsou v DOM vždycky, ale zapíná je až
   blok #mqM. Na desktopu tak neexistují ani vizuálně, ani pro čtečku —
   a přepínač zobrazení je vypne stejným způsobem jako zbytek mobilních
   pravidel, bez druhé sady výjimek. */
#mnav,#msheet{display:none}

/* Obal tabulek. Na desktopu jen pojistka proti přetečení, na mobilu
   z něj #mqM udělá vodorovný scroller. Vkládá ho JS, aby se nemusel
   psát do každé šablony zvlášť. */
.tscroll{max-width:100%}

/* Náznak, že tabulka pokračuje do strany.

   Stín je `inset`, takže se maluje k okraji kontejneru a neposouvá se
   s obsahem — na rozdíl od ::after, které by odjelo spolu s tabulkou.
   Třídy přepíná scrollHint() v js/mobile.js podle skutečné pozice, aby
   na konci tabulky nesliboval pokračování, které tam není. */
.tscroll{transition:box-shadow .15s ease}
.tscroll.more-r{box-shadow:inset -16px 0 12px -12px rgba(55,0,60,.32)}
.tscroll.more-l{box-shadow:inset 16px 0 12px -12px rgba(55,0,60,.32)}
.tscroll.more-l.more-r{box-shadow:inset -16px 0 12px -12px rgba(55,0,60,.32),
  inset 16px 0 12px -12px rgba(55,0,60,.32)}
:root[data-theme="dark"] .tscroll.more-r{box-shadow:inset -16px 0 12px -12px rgba(0,0,0,.75)}
:root[data-theme="dark"] .tscroll.more-l{box-shadow:inset 16px 0 12px -12px rgba(0,0,0,.75)}
:root[data-theme="dark"] .tscroll.more-l.more-r{
  box-shadow:inset -16px 0 12px -12px rgba(0,0,0,.75),
             inset 16px 0 12px -12px rgba(0,0,0,.75)}

/* ---------- ceny kola na Přehledu ----------
   Tytéž karty jako v Hubu, jen bez podtitulku a v užší mřížce: na
   Přehledu jsou shrnutím, ne hlavním obsahem panelu. Štítek „živě“
   sedí nad mřížkou, aby nerozbil zarovnání karet. */
.hgrid.one{grid-template-columns:1fr}
/* .livetag měl styl jen uvnitř .secline v Hubu. Na Přehledu žádná
   .secline není, takže by se z něj stal obyčejný text. */
.hbox.hawards .livetag,
.hbox.hgwl .livetag{display:inline-block;margin:0 0 8px;
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--warn);background:var(--warn-bg);
  border-radius:20px;padding:2px 9px;white-space:nowrap}

/* ---------------------------------------------------------------
   Aktuální gameweek v lize

   Souvislý odstavec, ne tabulka: jsou to tři věty, které se čtou
   rychleji než mřížka o třech buňkách, a na telefonu se zalomí samy.
   Štítky pod ním jsou tentýž obsah v přehledné podobě — kdo odstavec
   číst nechce, přejede očima je.
   --------------------------------------------------------------- */
.hbox.hgwl .gwltext{margin:0;font-size:13.5px;line-height:1.6;
  color:var(--charcoal);text-wrap:pretty}
.hbox.hgwl .gwlnote{margin:8px 0 0;font-size:11.5px;color:var(--mute)}
.gwlpills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.gwlpill{font-family:var(--f-mono);font-size:11px;line-height:1;
  padding:5px 9px;border-radius:20px;white-space:nowrap;
  background:var(--haze);color:var(--mute)}
.gwlpill.chip{background:var(--ok-bg);color:var(--ok);font-weight:700}
/* Barvy jsou z tokenů, které se v tmavém režimu překlápějí. Napevno
   zapsaná auberginová by tu byla tmavá na tmavé. */
.gwlpill.cap{background:var(--haze);color:var(--charcoal);font-weight:700;
  box-shadow:inset 0 0 0 1px var(--line)}
.gwlpill.bad{background:var(--alert-bg);color:var(--alert);font-weight:700}
.awards.mini .award{padding:9px 11px}
.awards.mini .medal{width:28px;height:28px;font-size:14px}
.awards.mini .who{font-size:13px}
.awards.mini .val{font-size:17px}

/* ---------- kádr: po pozicích / celkem ----------
   V režimu Celkem zmizí skupinové hlavičky a z hlaviček sloupců se
   stanou tlačítka. Šipka má vlastní místo i když je neaktivní, aby
   hlavička při řazení neposkočila o pár pixelů do strany. */
.squadlist.flat .pgroup{display:none}
.squadlist.flat .prow.benched{background:none}

.phead [data-sort]{user-select:none;
  display:inline-flex;align-items:center;justify-content:flex-end;gap:3px}
.phead [data-sort]{cursor:pointer}
.phead [data-sort]:hover{color:var(--blue)}
.phead [data-sort] .sar{font-style:normal;width:7px;opacity:0;font-size:7px}
.phead [data-sort][aria-sort="ascending"],
.phead [data-sort][aria-sort="descending"]{color:var(--charcoal)}
.phead [data-sort][aria-sort="ascending"] .sar::before{content:"\25B2"}
.phead [data-sort][aria-sort="descending"] .sar::before{content:"\25BC"}
.phead [data-sort]:not([aria-sort="none"]) .sar{opacity:1}

/* Přepínač sedí těsně nad tabulkou, ne 20 px od ní jako běžná subnav. */
.subnav:has(+ .squadlist){margin-bottom:8px}

/* ---------- H2H ----------
   Karta zápasu je symetrická mřížka: domácí vlevo, skóre uprostřed,
   soupeř vpravo zarovnaný doprava. Symetrie je tu funkční, ne
   estetická — oko porovnává dvě čísla vedle sebe, ne dva odstavce.

   Barva rámuje výsledek jen zleva. Celá zelená karta by při pěti
   zápasech pod sebou vypadala jako semafor. */
.h2hm{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;
  align-items:center;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r-card);margin-bottom:8px;background:var(--white)}
.h2hm.big{padding:16px 18px;margin-bottom:14px;background:var(--haze)}
.h2hm.w{box-shadow:inset 3px 0 0 var(--ok)}
.h2hm.l{box-shadow:inset 3px 0 0 var(--alert)}
.h2hm.d{box-shadow:inset 3px 0 0 var(--mute)}
.h2hm .side{min-width:0}
.h2hm .side.r{text-align:right}
.h2hm .side b{display:block;font-weight:700;font-size:13.5px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis}
.h2hm.big .side b{font-size:16px}
.h2hm .side em{display:block;font-style:normal;font-size:11px;color:var(--mute);
  font-family:var(--f-mono);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.h2hm .side .badge{margin-left:5px;vertical-align:middle}
.h2hm .sc{display:flex;align-items:center;gap:6px;flex:none;
  font-family:var(--f-disp);font-weight:800;font-size:20px;
  font-variant-numeric:tabular-nums}
.h2hm.big .sc{font-size:28px}
.h2hm .sc i{font-style:normal;color:var(--mute);font-weight:600}
.h2hm .sc u{text-decoration:none;font-family:var(--f-mono);font-size:12px;
  font-weight:700;color:var(--mute);letter-spacing:.1em}
.h2hm.w .sc span:first-child{color:var(--ok)}
.h2hm.l .sc span:first-child{color:var(--alert)}

.h2hlist{margin-bottom:6px}

table.h2ht td u{display:block;text-decoration:none;font-size:10px;
  color:var(--mute);font-family:var(--f-mono);white-space:nowrap}
table.h2ht td.n,table.h2ht th.n{font-family:var(--f-mono);text-align:right;
  white-space:nowrap}
table.h2ht tr.me{background:var(--ok-bg)}
table.h2ht tr.me td b{color:var(--ok)}

.secline .livetag.ok{color:var(--ok);background:var(--ok-bg)}
.note.wn{color:var(--warn)}

.hrow.h2hrow .pc{font-family:var(--f-mono);font-weight:700}
.hrow.h2hrow.w .pc{color:var(--ok)}
.hrow.h2hrow.l .pc{color:var(--alert)}

/* Volba počátečního kola H2H. Vypadá jako věta, ne jako formulář —
   je to jedno nastavení, ne sekce. */
.h2hstart{margin:0 0 10px;font-size:12px;color:var(--mute)}
.h2hstart b{font-family:var(--f-mono);font-weight:700;color:var(--charcoal)}

/* ---------- FPL Zpravodaj ----------
   Karta je celá odkaz, ne titulek s odkazem: cíl kliknutí je pak velký
   jako karta, což je na dotyku rozdíl mezi trefit a netrefit.

   Barva zdroje je proužek vlevo, ne podbarvení celé karty. Deset
   obarvených karet pod sebou vypadá jako semafor a titulky se v tom
   ztratí. */
.nfilter{margin-bottom:10px;flex-wrap:wrap}
.nfilter button b{margin-left:6px;font-family:var(--f-mono);font-size:10px;
  font-weight:700;opacity:.65}
.nfilter button:disabled{opacity:.45;cursor:not-allowed}
.nfilter button.src-ffs[aria-selected="true"]{background:#0F6E56;border-color:#0F6E56}
.nfilter button.src-247[aria-selected="true"]{background:#854F0B;border-color:#854F0B}

.nlist{display:grid;gap:9px}
.ncard{display:block;text-decoration:none;color:inherit;
  background:var(--white);border:1px solid var(--line);
  border-left:3px solid var(--mute);border-radius:0 var(--r-card) var(--r-card) 0;
  padding:12px 15px;transition:border-color .15s,background .15s}
.ncard:hover{background:var(--haze);border-color:var(--aubergine)}
.ncard.src-ffs{border-left-color:#1D9E75}
.ncard.src-247{border-left-color:#BA7517}

.nmeta{display:flex;align-items:center;gap:9px;margin-bottom:6px;
  font-size:11px;color:var(--mute)}
.nmeta .nsrc{font-family:var(--f-disp);font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;font-size:10px;padding:2px 8px;border-radius:20px}
.ncard.src-ffs .nsrc{background:#E1F5EE;color:#04342C}
.ncard.src-247 .nsrc{background:#FAEEDA;color:#412402}
.nmeta time{font-family:var(--f-mono)}
.nmeta .nout{margin-left:auto;font-style:normal;opacity:.5}
.ncard:hover .nout{opacity:1}

.ncard h4{margin:0 0 5px;font-size:15px;font-weight:700;line-height:1.35;
  color:var(--charcoal)}
.ncard p{margin:0;font-size:12.5px;line-height:1.55;color:var(--mute)}

.nfoot{margin:12px 0 0;font-size:11.5px;color:var(--mute)}

/* Box na Přehledu: tři titulky, bez úryvků — je to rozcestník. */
.nmini{display:grid;gap:9px}
.nmini a{display:block;text-decoration:none;color:inherit;
  border-left:3px solid var(--mute);padding:1px 0 1px 10px;border-radius:0}
.nmini a.src-ffs{border-left-color:#1D9E75}
.nmini a.src-247{border-left-color:#BA7517}
.nmini .nsrc{display:block;font-size:10.5px;color:var(--mute);
  font-family:var(--f-mono);margin-bottom:2px}
.nmini b{font-size:13px;font-weight:600;line-height:1.35;color:var(--charcoal)}
.nmini a:hover b{color:var(--blue)}

/* ---------- Přestupový poradce ----------
   Diagnostika: čtyři boxy vedle sebe, v každém metriky pozice proti
   ligovému průměru. Barva je na hodnotě, ne na celém boxu — obarvený
   box svádí číst „obrana je zelená“, ale zelená je jen jedna metrika
   z jeho tří. */
.advgrid{display:grid;gap:10px;margin-bottom:18px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.advbox{border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px}
.advbox h4{display:flex;align-items:baseline;gap:8px;margin:0 0 9px;
  font-family:var(--f-disp);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--head)}
.advbox h4 span{margin-left:auto;font-family:var(--f-mono);font-size:10px;
  font-weight:400;letter-spacing:0;color:var(--mute);text-transform:none}
.advrow{display:flex;align-items:baseline;gap:8px;padding:4px 0;font-size:12px}
.advrow .k{color:var(--mute);flex:1;min-width:0}
.advrow b{font-family:var(--f-mono);font-size:15px;font-weight:700}
.advrow .v{font-family:var(--f-mono);font-size:10.5px;color:var(--mute);
  white-space:nowrap}
.advrow.ok b{color:var(--ok)}
.advrow.bad b{color:var(--alert)}

/* Tip: dva hráči proti sobě a pod nimi tytéž metriky v řádcích. Řádek
   se barví podle toho, kdo je v něm lepší — hodnota bez porovnání
   nutí člověka počítat rozdíl v hlavě. */
.advtip{border:1px solid var(--line);border-radius:var(--r-card);
  padding:14px 16px;margin-bottom:12px;background:var(--white)}
.advhead{display:flex;align-items:center;gap:9px;margin-bottom:12px;
  font-size:11.5px;color:var(--mute)}
.advswap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:12px;align-items:center;margin-bottom:12px}
.advswap>div{min-width:0}
.advswap .r{text-align:right}
.advswap b{display:block;font-size:15px;font-weight:700;color:var(--charcoal);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.advswap em{display:block;font-style:normal;font-family:var(--f-mono);
  font-size:11px;color:var(--mute)}
.advswap i{font-style:normal;font-size:17px;color:var(--mute)}

table.advcmp{width:100%;table-layout:fixed;border-top:1px solid var(--line)}
table.advcmp td,table.advcmp th{padding:6px 4px;font-size:12.5px;
  font-family:var(--f-mono)}
table.advcmp th{width:46%;text-align:center;font-family:var(--f);
  font-size:11.5px;font-weight:400;color:var(--mute)}
table.advcmp td:first-child{text-align:left}
table.advcmp td:last-child{text-align:right}
table.advcmp tr.in td:last-child{color:var(--ok);font-weight:700}
table.advcmp tr.out td:first-child{color:var(--ok);font-weight:700}

.advwhy{margin:11px 0 0;font-size:12.5px;line-height:1.6;color:var(--mute)}
.advfoot{margin:16px 0 0;font-size:11px;line-height:1.6;color:var(--mute)}

/* ---------- Zranění ----------
   Vlastní má jen tři věci: široké hledací pole, klikatelné hlavičky
   a drobný štítek s datem návratu pod jménem. Zbytek je obyčejná
   tabulka. */
.injq{width:100%;margin:12px 0}
.injback{display:block;font-family:var(--f-mono);font-size:10.5px;
  color:var(--mute);margin-top:2px}
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--ink)}
th[aria-sort="ascending"],th[aria-sort="descending"]{color:var(--ink)}

/* ---------- Poradce: hráči k zamyšlení ----------
   Karta je záměrně plochá: jméno, zařazení a věta proč. Náhrady se
   tu nehledají — od toho jsou tipy nad tím. */
.advthink{border:1px solid var(--line);border-left-width:3px;
  border-radius:var(--r-card);padding:10px 13px;margin:0 0 8px}
.advthink.p1{border-left-color:var(--alert)}
.advthink.p2{border-left-color:var(--warn)}
.advthink .hd{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.advthink .hd b{font-size:14.5px}
.advthink .tag{font-family:var(--f-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--mute)}
.advthink .tag.al{color:var(--alert)}
.advthink p{margin:5px 0 0;font-size:13px;line-height:1.5;color:var(--mute)}

/* ---------- jistota pohybu ceny ----------
   Slovo místo teček. Sytost pozadí roste s jistotou, takže se dá
   tabulka číst i bez čtení — ale slovo tam je, aby se dala číst
   i doopravdy. */
/* Štítky mají pevnou šířku a text na střed. Různě dlouhá slova
   („jisté“ vs „pravděpodobné“) jinak roztahovala každý řádek jinak
   a sloupec vypadal jako rozsypaný čaj. */
.lk{display:inline-flex;align-items:center;justify-content:center;gap:5px;
  width:132px;box-sizing:border-box;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;padding:4px 8px;
  border-radius:999px;border:1px solid transparent}
.lk i{font-style:normal;font-size:9px;line-height:1;opacity:.9}
.lk.none{width:132px;color:var(--mute);background:none;border:0}
.lk.up{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-bg)}
.lk.down{color:var(--alert);background:var(--alert-bg);border-color:var(--alert-bg)}
.lk.l5,.lk.l4{font-weight:700}
.lk.up.l5{background:var(--ok);color:#fff;border-color:var(--ok)}
.lk.down.l5{background:var(--alert);color:#fff;border-color:var(--alert)}
.lk.l1,.lk.l2{opacity:.72}
@media(max-width:760px){.lk,.lk.none{width:auto;min-width:104px}}

/* ---------- našeptávač watchlistu ---------- */
.watchadd label{position:relative}
.wsug{position:absolute;z-index:20;left:0;right:0;top:100%;margin-top:3px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:0 8px 24px rgba(0,0,0,.16);overflow:hidden;max-height:280px;
  overflow-y:auto}
.wsug button{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--line);padding:8px 11px;
  cursor:pointer;font-size:13.5px;color:var(--ink)}
.wsug button:last-child{border-bottom:0}
.wsug button:hover,.wsug button[aria-selected="true"]{background:var(--line)}
.wsug button span{font-family:var(--f-mono);font-size:10.5px;color:var(--mute)}

/* Dokud se nepohnulo deset cen, tabulky sezónních pohybů se dopisují
   prázdnými řádky — ať výška nepodskakuje s každou změnou cen. */
tr.empty td{color:var(--line);text-align:center;font-family:var(--f-mono)}

/* ============================================================
   SESTAVA V OKNĚ (#sqmodal)

   Klikatelné jméno manažera kdekoli v appce otevře jeho sestavu.
   Na desktopu je to okno uprostřed, na mobilu spodní plachta — přepínají
   to pravidla v mobile.css, markup je jeden a týž.
   ============================================================ */
.sqbtn{border:0;background:none;padding:0;font:inherit;color:inherit;
  cursor:pointer;text-align:inherit;
  /* Podtržení místo barvy: v tabulce i na kartě zápasu se jméno pořád
     čte jako jméno, jen dá najevo, že se na něj dá kliknout. */
  text-decoration:underline;text-decoration-color:var(--line);
  text-underline-offset:3px;text-decoration-thickness:1.5px;max-width:100%}
.sqbtn:hover{text-decoration-color:var(--blue);color:var(--blue)}
.sqbtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;
  border-radius:3px}

body.sq-lock{overflow:hidden}

.sqm{position:fixed;inset:0;z-index:90;display:none}
.sqm.on{display:block}
.sqm .scrim{position:absolute;inset:0;background:rgba(15,0,18,.5);
  animation:sqfade .16s ease}
@keyframes sqfade{from{opacity:0}to{opacity:1}}
.sqm .card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(520px,calc(100vw - 32px));max-height:min(80vh,760px);
  overflow-y:auto;background:var(--white);color:var(--charcoal);
  border-radius:var(--r-card,16px);padding:18px 20px 20px;
  box-shadow:0 24px 60px rgba(20,0,24,.34);animation:sqfade .16s ease}
.sqm .grip{display:none}
.sqm .x{position:absolute;right:12px;top:10px;width:30px;height:30px;
  border:1px solid var(--line);background:var(--white);border-radius:50%;
  font-size:18px;line-height:1;color:var(--mute);cursor:pointer}
.sqm .x:hover{border-color:var(--blue);color:var(--blue)}
.sqm h3{font-family:var(--f-disp);font-size:17px;margin:0 34px 12px 0;
  line-height:1.2}
.sqm h3 span{display:block;font-family:var(--f);font-size:11.5px;
  font-weight:500;color:var(--mute);letter-spacing:.02em;margin-top:3px}

.sqsum{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;background:var(--haze);border-radius:12px;padding:10px 14px;
  margin-bottom:12px}
.sqsum .big{font-family:var(--f-disp);font-size:26px;line-height:1}
.sqsum .big span{display:block;font-family:var(--f);font-size:11px;
  font-weight:500;color:var(--mute);margin-top:3px}
.sqsum .meta{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

.sqline{margin-bottom:10px}
.sqline h5{font-family:var(--f-disp);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin:0 0 4px}
.sqp{display:grid;grid-template-columns:34px 1fr auto auto;align-items:center;
  gap:8px;padding:6px 8px;border-radius:9px}
.sqp:nth-child(odd){background:var(--line-soft)}
.sqp .pos{font-family:var(--f-mono);font-size:9.5px;font-style:normal;
  color:var(--mute);letter-spacing:.04em}
.sqp b{font-weight:600;font-size:13px;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sqp em{font-style:normal;font-family:var(--f-mono);font-size:10px;
  color:var(--mute)}
.sqp .pts{font-family:var(--f-mono);font-size:13px;font-weight:700;
  min-width:34px;text-align:right}
.sqp .pts u{text-decoration:none;font-size:9.5px;color:var(--mute);
  margin-left:2px}
.sqp .cap{font-style:normal;display:inline-block;margin-left:5px;
  font-family:var(--f-mono);font-size:9px;font-weight:700;
  background:var(--charcoal);color:var(--white);border-radius:50%;
  width:15px;height:15px;line-height:15px;text-align:center;
  vertical-align:middle}
.sqp .cap.vc{background:var(--mute)}
/* Kdo ještě nenastoupil, není nula — je to nedopsaný řádek. */
.sqp.idle b,.sqp.idle .pts{opacity:.5}
.sqp.bench{opacity:.72}

/* Šipka u jména v okně se sestavou: kdo přišel autosubem a kdo šel ven.
   Bez ní by u vystřídaného hráče seděla nula a body by se objevily
   u někoho, kdo je „na lavičce“ — a nedalo by se poznat proč. */
.sqp .sub{font-style:normal;margin-left:5px;font-size:11px;
  color:var(--ok);font-weight:700}
.sqp .sub.out{color:var(--mute)}
.sqp.bench{opacity:.72}

/* ============================================================
   HORNÍ LIŠTA — pět sekcí, nabídka, hledání

   Jedenáct záložek ve vlastním pruhu nebyla navigace, ale seznam.
   Segment drží pětici denně otevíraných sekcí, zbytek je pod „Víc“
   hned za nimi.

   Pravidlo rozvržení: JEDEN ŘÁDEK, KTERÝ SE NIKDY NEZALOMÍ. Značka se
   ořezává, hledání se scvrkne na ikonu, jméno týmu zmizí — ale segment
   a stavový čip zůstávají v plné šířce, protože kvůli nim se sem
   člověk dívá.
   ============================================================ */
.bar .wrap{display:flex;align-items:center;gap:10px;height:58px;
  flex-wrap:nowrap;min-width:0}
.barspace{flex:1 1 auto;min-width:8px}

/* Značka se musí umět zúžit, jinak podleze segment. Ořízne se podtitul
   i název; pohár vlevo appku pozná i tak. */
.bar .brand{flex:0 1 auto;min-width:0;overflow:hidden;text-decoration:none}
.bar .brand img{width:30px;height:30px}
/* Název ligy místo jména nástroje. Dvě řádky jsou schválně: „O pohár
   Ládi Stropnického“ na jednom řádku je 25 znaků a buď by segment
   odtlačil, nebo by se ořízl v půlce jména. Zalomený se vejde do stejné
   výšky jako pohár vedle. */
.bar .brand .tx{min-width:0;font-family:var(--f-disp);font-weight:600;
  font-size:14px;line-height:1.05;letter-spacing:.02em;color:#fff;
  text-transform:uppercase;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;max-width:190px;white-space:normal}
.bar .brand .tx.long{font-size:11.5px;letter-spacing:.04em;max-width:150px}

/* Stav kola pod názvem je náhrada za stavový pruh a platí jen na telefonu
   (zapíná ho css/mobile.css). Na desktopu je pruh pod lištou a druhý
   opis téhož by jen zdvojoval. */
.bar .brandsub{display:none}

/* Starý pruh se záložkami zůstává v DOM jako zdroj pravdy o otevřené
   sekci — jen ho není vidět. */
.navbar{display:none}

#topnav{flex:none}
.seg{display:flex;align-items:center;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:3px}
.seg button{background:none;border:0;color:#CBAFD2;font-family:var(--f);
  font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:8px;
  cursor:pointer;white-space:nowrap;line-height:1.2}
.seg button:hover:not([aria-selected="true"]){color:#fff;background:rgba(255,255,255,.08)}
.seg button[aria-selected="true"]{background:#fff;color:#2A0030}
.seg button:disabled{opacity:.45;cursor:default}
.seg .div{width:1px;align-self:stretch;margin:4px 3px;background:rgba(255,255,255,.16)}
.seg .more .chev{font-style:normal;font-size:9px;opacity:.75;
  display:inline-block;transition:transform .16s}
.seg .more[aria-expanded="true"] .chev{transform:rotate(180deg)}
.seg .more[aria-expanded="true"]{background:rgba(255,255,255,.14);color:#fff}
.seg .more.active{background:#fff;color:#2A0030}

.morewrap{position:relative}
.morewrap .sheet{position:absolute;left:0;top:calc(100% + 9px);z-index:40;
  background:var(--white);border:1px solid var(--line);border-radius:13px;
  padding:6px;min-width:225px;box-shadow:0 18px 44px rgba(30,0,36,.26)}
.morewrap .sheet .lbl{font-family:var(--f-disp);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  padding:7px 10px 4px}
.morewrap .sheet button{display:flex;width:100%;align-items:center;gap:9px;
  background:none;border:0;border-radius:9px;font-family:var(--f);font-size:13.5px;
  padding:8px 10px;text-align:left;color:var(--charcoal);cursor:pointer}
.morewrap .sheet button:hover:not(:disabled){background:var(--haze)}
.morewrap .sheet button:disabled{opacity:.45;cursor:default}
.morewrap .sheet .badge{margin-left:auto;font-family:var(--f-mono);font-size:10px;
  background:var(--alert);color:#fff;border-radius:20px;padding:1px 7px}
.morewrap .sheet hr{border:0;border-top:1px solid var(--line);margin:5px 4px}

/* Hledání: normální tlačítko, ne pole. Text i klávesová zkratka zmizí
   dřív, než by se cokoli mohlo zalomit. */
.bar .cmd{flex:none;display:inline-flex;align-items:center;gap:7px;height:32px;
  padding:0 12px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;color:#C9AFD1;font-family:var(--f);font-size:12.5px;
  cursor:pointer;white-space:nowrap}
.bar .cmd:hover{border-color:rgba(255,255,255,.34);color:#fff}
.bar .cmd kbd{font-family:var(--f-mono);font-size:9.5px;
  border:1px solid rgba(255,255,255,.22);border-radius:5px;padding:2px 5px;
  color:#D8C4DD}

/* Stavový čip. Během kola průběžné body — deadline má vlastní místo
   v pruhu pod lištou, kde se vejde i s číslem kola. */
.bar .state{display:inline-flex;align-items:center;gap:7px;flex:none;height:32px;
  border-radius:999px;padding:0 13px 0 10px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);color:#F0E4F3;font-family:var(--f);
  font-size:12.5px;white-space:nowrap}
.bar .state .dot{width:7px;height:7px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.5)}
.bar .state.live .dot{background:var(--mint-fill);
  box-shadow:0 0 0 0 rgba(0,255,135,.6);animation:statepulse 2.4s infinite}
@keyframes statepulse{70%{box-shadow:0 0 0 7px rgba(0,255,135,0)}
  100%{box-shadow:0 0 0 0 rgba(0,255,135,0)}}
.bar .state.wait .dot{background:var(--gold-lift)}
.bar .state b{font-family:var(--f-mono);font-weight:700}
.bar .state .sep{opacity:.4}

/* Vpravo jen ⟳ a iniciály. Přepínače, přihlášení a odhlášení jsou
   v nabídce „Víc“ a v mobilní plachtě; tady zůstávají skryté stylem,
   protože obě nabídky na ně klikají a čtou z nich stav. */
#viewmode,#theme,#logout,#gauth{display:none}
.bar .cd{display:none}
.statusbar{display:block}

.bar .who{flex:none;margin-left:0;gap:8px}
.bar .who b{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;background:var(--aubergine-lift);
  border:1px solid rgba(255,255,255,.24);overflow:visible}
/* V kolečku jsou jen iniciály. Název týmu se sem nevejde a je hned pod
   lištou v Přehledu; tady by z něj byla šmouha přes tři písmena. */
.bar .who b .tn{display:none}
.bar .who b .ini{font-family:var(--f-mono);font-size:11px;font-weight:700;
  color:#fff;letter-spacing:.04em;line-height:1}

/* Kolejnice sezóny zmizela. Ve výšce vlásku byla nečitelná a popisek
   kola z ní lezl do lišty; číslo kola i postup sezónou říká pruh se
   stavem dat celou větou. */
.rail,.railkey{display:none}

/* ---------- pruh se stavem dat ----------
   Deadline se přestěhoval sem: v liště překrýval stavový čip, tady má
   vlastní místo a vejde se i s číslem kola. */
.statusbar{border-bottom:1px solid var(--line);background:var(--haze)}
.statusbar .wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 0;font-size:12.5px}
.statusbar .sbnote{color:var(--mute)}
.statusbar .sbspace{flex:1}
.sbtime{font-family:var(--f-mono);font-size:11px;color:var(--mute)}

/* ---------- paleta hledání ---------- */
#palette{position:fixed;inset:0;z-index:95}
#palette .scrim{position:absolute;inset:0;background:rgba(15,0,18,.45)}
#palette .card{position:absolute;left:50%;top:14vh;transform:translateX(-50%);
  width:min(520px,calc(100vw - 28px));background:var(--white);
  border-radius:15px;padding:10px;box-shadow:0 26px 60px rgba(20,0,24,.36)}
#palinput{width:100%;border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font-family:var(--f);font-size:15px;background:var(--haze)}
#palout{margin-top:8px;max-height:46vh;overflow-y:auto}
#palout button{display:flex;width:100%;align-items:baseline;gap:8px;background:none;
  border:0;border-radius:9px;padding:9px 11px;font-family:var(--f);font-size:14px;
  text-align:left;cursor:pointer;color:var(--charcoal)}
#palout button.on,#palout button:hover{background:var(--haze)}
#palout .s{font-size:12px;color:var(--mute)}
#palout .k{margin-left:auto;font-family:var(--f-mono);font-size:10px;color:var(--mute)}
#palout .empty{color:var(--mute);font-size:13px;padding:12px 11px;margin:0}

/* Zúžené okno: napřed popisek hledání, pak podtitul značky, pak název
   appky. Segment se nedotýká nikdy. */
@media(max-width:1200px){
  .bar .cmd kbd,.bar .cmd .txt{display:none}
  .bar .cmd{padding:0 9px}
}
@media(max-width:1080px){
  .bar .brand .tx{max-width:120px;font-size:11px}
  .seg button{padding:7px 10px;font-size:12px}
}
@media(max-width:960px){
  .bar .brand .tx{display:none}
}

/* Záblesk po tichém přepsání čísel. */
@keyframes flashbg{from{background:rgba(204,156,72,.28)}to{background:transparent}}
.flash{animation:flashbg 1.2s ease-out}

/* Chyba s možností zkusit to znovu. */
.errbox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--haze);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;font-size:13px;margin:8px 0}
.errbox span{flex:1;min-width:180px}

/* ---- H2H: forma, průběh kola, vzájemná bilance ---- */
.forma{display:inline-flex;gap:3px}
.forma i{font-style:normal;font-family:var(--f-mono);font-size:9.5px;
  font-weight:700;width:15px;height:15px;line-height:15px;text-align:center;
  border-radius:4px;color:var(--white)}
.forma i.w{background:var(--ok)}
.forma i.l{background:var(--alert)}
.forma i.d{background:var(--mute)}
.forma i.none{background:none;color:var(--mute)}

.h2hm .zbyva{display:block;font-family:var(--f-mono);font-size:10px;
  color:var(--mute);margin-top:3px}
.h2hm.big{position:relative}
.h2hm .bilance{position:absolute;left:50%;transform:translateX(-50%);
  bottom:6px;font-size:10.5px;color:var(--mute);white-space:nowrap}
.h2hm .sc .vysl{font-style:normal;font-size:12px;margin-left:6px;color:var(--mute)}
.h2hm.w .sc .vysl{color:var(--ok)}
.h2hm.l .sc .vysl{color:var(--alert)}

/* ---- okno se sestavou: rozdíly a porovnání ---- */
.sqdiffs{display:flex;flex-wrap:wrap;gap:5px}
.sqdiff{display:inline-flex;align-items:center;gap:4px;font-size:12px;
  border:1px solid var(--line);border-radius:20px;padding:3px 9px}
.sqdiff.plus{border-color:var(--ok)}
.sqdiff.minus{color:var(--mute)}
.sqdiff u{text-decoration:none;font-family:var(--f-mono);font-size:10.5px;
  color:var(--mute)}
.sqcmp{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sqcol .big{font-family:var(--f-disp);font-size:22px;margin-bottom:6px}
.sqcol .big span{font-family:var(--f);font-size:10.5px;color:var(--mute);
  margin-left:4px}
.linklike{border:0;background:none;padding:0;font:inherit;color:var(--blue);
  text-decoration:underline;cursor:pointer}

/* Deadline v pruhu se stavem: má vlastní místo vpravo, hned před časem
   posledních dat. Zlatý rámeček je tentýž jazyk jako u odpočtu dřív. */
.statusbar .sbdl{display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--gold);border-radius:999px;padding:3px 11px;
  background:#FDF6E8;color:#7A5A1E;font-size:12px;white-space:nowrap}
.statusbar .sbdl b{font-family:var(--f-disp);letter-spacing:.05em;color:#5E4416}

/* ============================================================
   KÓD LIGY

   Box se objeví jen tomu, kdo je přihlášený a členství ještě nemá —
   tedy jednou za účet. Proto nemá vlastní záložku ani místo v nabídce:
   sedí nahoře na Přehledu, kde ho člověk potká sám, a jakmile je
   odemčeno, zmizí a už se nevrátí.

   Zlatý rámeček je tentýž jazyk jako u odpočtu a stavu dat: „všimni
   si, ale nic nehoří“. Červený by lhal — bez kódu appka funguje dál,
   jen se archiv nesdílí. */
.ligakod{border-color:var(--gold);background:#FDF9F0}
.ligakod .note{margin:0 0 9px}
.ligakod .note:last-child{margin:9px 0 0;opacity:.75;font-size:12px}
.ligakod .note.bad{color:var(--alert);opacity:1}

.ligarow{display:flex;gap:8px;align-items:center;margin:0;flex-wrap:wrap}
.ligarow input{flex:1 1 190px;min-width:0;padding:8px 11px;
  border:1px solid var(--line);border-radius:var(--r-in);
  background:var(--card);color:var(--ink);
  font-family:var(--f-mono);font-size:14px;letter-spacing:.08em;
  text-transform:uppercase}
.ligarow input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

[data-theme="dark"] .ligakod{background:rgba(212,175,55,.07)}