/* Minileague Squad Check

   The main stylesheet. Palette tokens, chrome (bar, navigation), panels,
   tables and every section. The responsive rules are not here — they live
   in narrow/small/mobile so the view switch can move them.
   ============================================================ */

:root{
  /* ---------------------------------------------------------------
     The Premier League palette. Aubergine #37003C and mint #00FF87 are the
     colours of the competition this app is about — and almost nobody else
     uses them, because they are so specific. The previous #2b7fff was a
     system blue that also clashed with the difficulty scale.
     --------------------------------------------------------------- */
  --aubergine:#37003C;      /* bar and navigation — chrome only, not canvas */
  --aubergine-lift:#4B0F52;

  /* The canvas is light. Aubergine looked good in the mockup, but as a
     page background it turned the app into a dark website with white
     windows — the exact opposite of the airy feel the rest of the design
     rests on. The shade is taken from paper, a tone darker so cards can be
  --sky:#E7E0EA;
  --sky-deep:#2B0030;       /* the pitch — darkness works there, kits stand out */

  --blue:#0086A8;           /* interactive elements; outside the difficulty scale */
  --ink:#1F0A24;
  --charcoal:#1F0A24;
  --white:#ffffff;
  --haze:#F4F1F5;           /* paper with a hint of aubergine */
  --line:rgba(55,0,60,.12);
  --line-soft:rgba(55,0,60,.06);
  --mute:#6B3D74;

  --mint-fill:#00FF87;      /* fills only, never text — it fails on white */

  /* Gold and midnight blue. They carry the entry screen and the trophy
     mark, so both hold the same shade rather than one each. */
  --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;           /* captain flop — outside the difficulty scale */

  /* ---------------------------------------------------------------
     The fixture difficulty scale — ONE definition for the whole app.
     There used to be three copies (.ticker, .tick3, .fdrleg) and every
     colour was written three times. Changing a shade meant hunting in three
     places; now it is rewritten here.
     --------------------------------------------------------------- */
  --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 and friends have display:flex, which overrides the default
   u atributu [hidden]. Legenda kolejnice se proto zobrazovala i tehdy,
   with nothing to show. A classic trap — solved once for all of them. */
[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;
}

/* ---------- the trophy watermark ----------

   The content is centred at 1180 px, so on a wide monitor two empty strips
   are left at the sides. The trophy fills them without becoming content:
   `position:fixed` means it does not move while scrolling, so the eye stops
   registering it after a moment — which is exactly what a watermark should
   do.

   It is deliberately cut off by the edge of the screen. A whole trophy in
   the middle of the strip would look like a picture somebody put there; cropped
   it reads as backing. For the same reason there is only one, not two
   mirrored — symmetry would draw attention.

   pointer-events:none is a necessity, not a detail: without it an invisible
   layer across half the screen would swallow clicks. */
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;
}

/* On a dark canvas gold darkens along with the background and disappears
   entirely. Higher opacity compensates; `screen` then keeps gold gold rather
   than letting the backing drag it towards brown. */
:root[data-theme="dark"] body::before{
  opacity:.12;
  mix-blend-mode:screen;
}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}

/* ---------- top bar ---------- */
/* A dark bar gives the app a spine: the white cards then read as paper on a
   desk. The header used to be a white card on a blue background and blended in. */
.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}
/* The full logo has text above and below the trophy; at 30 px that became an
   illegible smudge. So the header carries the trophy alone (assets/mark.webp),
   cropped from the same original. */
.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}
/* The plain .who is used by the ownership table and other lists. When I
   narrowed the rule to .bar .who, the rest stayed inline and the club badge
   overlapped the first letter of the name. */
.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}
/* The team name is clipped, the initials never — in a narrow header it
   matters more whose team it is than reading its name to the end. */
.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)}

/* ---------- entry screen ----------

   Two things were reworked: a white heading stood on a light canvas and was
   practically invisible, and the form was up to 250 px below the fold, so on
   opening it there was no sign of what to actually do.

   The fix: the entry screen is aubergine. It is the "door" — the app lights
   up behind it. White text then makes sense and the form sits beside the
   heading rather than under it. */
/* The entry screen holds the brand colours: midnight blue, gold, light from
   above. The card is dark with a gold edge, not white — a white rectangle
   next to the artwork looked like a foreign element stuck on top. */
#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)}

/* An expanded <select> menu is drawn by the operating system, not by our CSS
   — and it draws it on white. The white text colour from .gate select is
   inherited by <option>, so the items were white on white and the list
   looked empty. The colours are therefore set on <option> separately. */
.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}

/* The gold button — the only solid gold element on the page, so it is clear
   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 ---------- */
/* Underlined tabs instead of six bubbles: on mobile they used to wrap onto
   two lines and take the whole screen. */
.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}

/* The link to the official FPL. It sits in the bar to the right of the tabs
   but deliberately does not look like them — it is the one place in the app
   that sends you away, and that should be visible before it is clicked. */
.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 ----------
   Underlined tabs instead of a row of pills. Pills looked like buttons
   ("what happens if I click?"), took two rows once there were six of them,
   and competed for attention with the bottom navigation, which looks the
   same. A tab with a line is flat, fits on one row and reads as what it is:
   a switch between views of the same data.

   The line under the whole strip keeps the tabs anchored even when some of
   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}

/* ---------- the pitch ----------
   Turf instead of a dark surface. The mown stripes and lines are not
   decoration: they give the lineup scale, so the shape (3-4-3 vs 4-4-2) is
   recognised before anyone starts counting cards. The lines are one SVG in
   the background — no extra elements, nothing that can be clicked.

   A white card on green has more contrast than on aubergine, so the kits
   could shrink and the numbers grow. */
.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}

/* ---------- player card ----------
   A grid with fixed rows, not free inline elements. Before this every card
   wrapped its content differently depending on name length: the points
   ended up beside the name on one and under it on another, and the club

     dres    44px
     name    17px   — its own full-width row, clipped with ellipsis
     club    13px   — under the name, not after it
     points  30px   — always in the same position
     minuty  13px

   Thanks to the fixed heights every card in a row is equally tall even when
   one of them reports that the match has not been played yet. */
.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}
/* Letter-spaced mono, so the abbreviation reads as a label rather than a
   continuation of the name. text-indent compensates for the spacing after the last letter. */
.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}


/* ---------- player detail ---------- */
.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}

/* ---------- gameweek awards ----------
   Four awards as rows under each other, not columns side by side. Columns
   looked more trophy-like, but for an award shared by several people the
   names wrapped into a narrow ribbon and the card grew to twice the height.
   In a row there is space for names and the numbers line up, so they can be
   compared by reading down.


   The colour comes from --accent, set by each award's own class; the rest of
   the rules are the same for all of them, so a new award is added with one
   line. */
.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}

/* One frame around all the awards, with a hairline between rows inside — a
   set of trophies, not four unrelated cards. */
.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}
/* A colour strip on the edge of the row. Carried by ::before so it takes no
   space in the flex layout and does not shift the text. */
.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)}
/* An award that was not given must not look like a win — only the icon and
   the explanation stay, the colour and the big number go grey. */
.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}

/* ---------- hall of fame ---------- */
.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}

.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}

.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}



/* ---------- deadline countdown ---------- */
/* The countdown used to be 11.5 px monospace on purple — illegible at
   exactly the moment it matters most. Now it is a two-line label: a small
   caption on top, a big number below, and a gold edge to set it apart from the navigation. */
.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)}

/* ---------- captain recommendations ---------- */
.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)}

/* ---------- suggested XI swap ---------- */
.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)}

/* ---------- chips ---------- */
.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)}

/* ---------- player comparison ---------- */
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}






/* ---------- replacement search diagnostics ---------- */
.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}

/* ---------- expandable transfer cards ---------- */
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}

/* ---------- stats grid by position ---------- */
.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}

/* the FPL projection in player detail */
.kpis.eprow .v.big{font-size:26px;color:var(--blue)}

/* ---------- live points during a gameweek ---------- */
/* The gameweek summary sits inside the pitch, not above it — it is its

   The pitch is dark, so a white card would be a foreign rectangle on it.
   Instead it is translucent with a mint edge: the numbers keep their
   contrast, but the backing still shows through. Below it a divider and
   some padding, so the big number does not collide with the first row of kits. */
.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}
/* The minutes are a separate row under the points — not a <small> inside the
   number, or the content would set the height and the rows would drift. */
.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)}



/* ---------- replacements table ---------- */
.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}



/* ---------- squad by position ---------- */
.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}

/* ============================================================
   Responsiveness and preferences — one block per condition.
   There used to be four separate max-width:640px blocks and two
   prefers-reduced-motion ones (one with a space in the condition, one without).
   ============================================================ */

/* The responsive blocks live in their own <style media> tags after this one
   — that is what lets the view switch force them on or off without
   duplicating a single rule. */




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

/* ============================================================
   SIGNATURE: the season rail
   38 ticks, one per gameweek. Played ones solid, the current one mint and
   filling up to the deadline, future ones hairlines. A blank for your squad
   gets a red dot, a double a mint one. The one place where the whole season
   is visible at once — blanks used to be hidden in Fixtures.
   ============================================================ */
.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%))}
/* The label for the current gameweek sits above its tick — hence the top
   padding on .wrap. Without nowrap and without room, "GW2" was cut by the 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}

/* ---------- club badges ---------- */
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 ---------- */
/* A note about where the data comes from. Set apart with a strip, not a
   background colour — it is information, not a warning, and should not
.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}

/* The loading spin. It stops on its own, because finally removes the class. */
@keyframes spin{to{transform:rotate(360deg)}}
button.small.icon.spin{animation:spin 900ms linear infinite}
button.small.icon:disabled{opacity:.5;cursor:default}

/* ---------- gameweek switcher for the stories ---------- */
.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)}
/* A dot on a gameweek that is not finished yet. The colour carries meaning,
   the shape does not — so the button also has a title, to avoid relying on colour alone. */
.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}

/* ---------- session state ---------- */
.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}

/* ---------- home ----------
   The panel header (a "Home" heading + the deadline) is gone: the section is
   named by the navigation and the deadline sits in the bar above the
   content. So the card with the numbers starts right at the top. */

.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(--aubergine)}
.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}

/* A home row: club abbreviation, name, description, optionally a number on
   the right. The name grows and the description is clipped — not the other
   way round, because without the name the row says nothing. */
.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)}

/* ---------- loading skeleton ----------
   Loading a league takes seconds and until now nothing happened meanwhile. */
.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}}

/* ---------- monthly and snapshot layout ---------- */
/* Sections stacked, not four columns side by side. In four narrow boxes not
   even a player's name could be read and every form was expanded at once —
   it felt cramped and gave no sign of what the app wanted from you. */
.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(--aubergine);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)}

/* ---------- snapshots and monthly tables ---------- */
.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}


/* ---------- dark mode ----------
   Deliberately NOT on prefers-color-scheme. The app is designed light — the
   difficulty colour scale and the club badges read better on paper than on
   black. So dark is a switch, not automatic; the choice is remembered in
   localStorage under the key 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;
  }
}
: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%}

/* ---------- top player leaderboards ---------- */
/* Four boxes side by side. Eight categories then wrap onto exactly two rows
   and the whole tab fits on one screen. To fit a name with a badge and a
   number into a quarter of the width, the line height, the type size and the
   badge all had to come down — the content stayed, it just got denser. */
.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(--aubergine)}
.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)}
/* The medal replaces the number, it is not an addition — otherwise the first
   three would read "1 🥇" and the row would grow another fifteen pixels. */
.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}

/* Intermediate steps: four columns at 1200px are already illegible, two are
   still better than one long column. */
@media (max-width:1180px){
  .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- picking two players to compare ---------- */
.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}

/* ---------- free transfer correction ---------- */
.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}

/* ---------- differentials ---------- */
.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}

/* ---------- panel header with a button on the right ---------- */
.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}

/* ---------- easiest fixtures ---------- */
.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)}

/* ---------- three most expensive ---------- */
.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}

/* ---------- mobile shell: default state ----------
   The bottom bar and the "More" sheet are always in the DOM, but only the
   #mqM block switches them on. On desktop they exist neither visually nor
   for a screen reader — and the view switch turns them off the same way as
   the rest of the mobile rules, without a second set of exceptions. */
#mnav,#msheet{display:none}

/* The table wrapper. On desktop just insurance against overflow; on mobile
   #mqM turns it into a horizontal scroller. Inserted by JS so it does not
   have to be written into every template. */
.tscroll{max-width:100%}

/* ---------- gameweek awards on Home ----------
   The same cards as in the hub, just without the subtitle and in a narrower
   grid: on Home they are a summary, not the main content of the panel. The
   "live" tag sits above the grid so it does not break the card alignment. */
.hgrid.one{grid-template-columns:1fr}
/* .livetag was only styled inside .secline in the hub. There is no .secline
   on Home, so it would have become ordinary text. */
.hbox.hawards .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}
.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}

/* ---------- squad: by position / whole squad ----------
   In the whole-squad view the group headers disappear and the column headers
   become buttons. The arrow has its own space even when inactive, so the
   header does not jump sideways a few pixels while sorting. */
.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}

/* The switch sits right above the table, not 20 px away like a normal subnav. */
.subnav:has(+ .squadlist){margin-bottom:8px}

/* ---------- H2H ----------
   A fixture card is a symmetrical grid: home on the left, the score in the
   middle, the opponent on the right, right-aligned. The symmetry is
   functional, not decorative — the eye compares two numbers side by side,

   The colour frames the result from the left only. A whole green card would
   look like a traffic light with five fixtures stacked. */
.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)}

/* Choosing the starting gameweek. It looks like a sentence, not a form — it
   is one setting, not a section. */
.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 ----------
   The whole card is a link, not a headline with a link: the click target is
   then as big as the card, which on touch is the difference between hitting

   The source colour is a strip on the left, not a tint across the whole card.
   Ten tinted cards stacked look like a traffic light and the headlines get
   lost in it. */
.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)}

/* The Home box: three headlines, no excerpts — it is a signpost. */
.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)}

/* ---------- comparison diagnostics ----------
   Four boxes side by side, each with the metrics of a position against the
   league average. The colour is on the value, not on the whole box — a
   tinted box invites reading "the defence is green", but green is only one
   of its three metrics. */
.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(--aubergine)}
.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)}

/* A tip: two players against each other with the same metrics in rows
   underneath. A row is coloured by who is better in it — a value without a
   comparison makes people work out the difference in their heads. */
.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)}

/* ---------- injuries ----------
   Only three things are its own: a wide search field, clickable headers and
   a small label with the return date under the name. The rest is an ordinary
   table. */
.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)}

/* ---------- players worth a thought ----------
   The card is deliberately flat: a name, a category and a sentence saying
   why. Replacements are not searched for here. */
.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 ----------
   A word instead of dots. The background saturation grows with confidence,
   so the table can be read without reading — but the word is there so it can
   properly. */
/* The labels have a fixed width and centred text. Words of different lengths
   ("certain" vs "near certain") otherwise stretched every row differently
   and the column looked scattered. */
.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}}

/* ---------- watchlist suggestions ---------- */
.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)}

/* Until ten prices have moved, the season movement tables are padded with
   empty rows — so the height does not jump with every price change. */
tr.empty td{color:var(--line);text-align:center;font-family:var(--f-mono)}

/* ============================================================
   THE SQUAD MODAL (#sqmodal)

   A clickable manager name anywhere in the app opens their squad. On desktop
   it is a modal in the middle, on mobile a bottom sheet — the rules in
   mobile.css switch that, the markup is one and the same.
   ============================================================ */
.sqbtn{border:0;background:none;padding:0;font:inherit;color:inherit;
  cursor:pointer;text-align:inherit;
  /* An underline instead of colour: in a table or on a card the name still
     reads as a name, it just signals that it can be clicked. */
  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)}
/* A player yet to start is not a zero — it is an unfinished row. */
.sqp.idle b,.sqp.idle .pts{opacity:.5}
.sqp.bench{opacity:.72}

/* The arrow next to a name in the squad modal: who came on as an autosub and
   who went off. Without it a substituted player would sit on a zero and the
   points would appear next to somebody "on the bench" — with no way to see why. */
.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}

/* ============================================================
   TOP BAR — five sections, a menu, search

   Nine tabs in their own strip were not navigation, they were a list. The
   segment holds the five sections opened daily, the rest lives under "More"
   right behind them.

   The layout rule: ONE ROW THAT NEVER WRAPS. The mark is clipped, the search
   shrinks to an icon, the team name disappears — but the segment and the
   status chip stay at full width, because they are what people look at.

   ============================================================ */
.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}

/* The mark has to be able to narrow, or it slides under the segment. The
   subtitle and the name are clipped; the trophy on the left still identifies the app. */
.bar .brand{flex:0 1 auto;min-width:0;overflow:hidden;text-decoration:none}
.bar .brand img{width:30px;height:30px}
/* The league name instead of the tool's name. Two lines are deliberate: a
   long league name on one line would either push the segment away or be
   clipped in the middle of a word. Wrapped, it fits the same height as the
   trophy beside it. */
.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}

/* The gameweek state under the name replaces the status bar and applies on
   phones only (switched on by css/mobile.css). On desktop the bar sits under
   the header and a second copy would only duplicate it. */
.bar .brandsub{display:none}

/* The old tab strip stays in the DOM as the source of truth about the open
   section — it is just not visible. */
.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}

/* Search: an ordinary button, not a field. The text and the shortcut
   disappear before anything could wrap. */
.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}

/* The status chip. Live points during a gameweek — the deadline has its own
   place in the bar below, where it fits with the gameweek number. */
.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}

/* On the right only ⟳ and the initials. The switches and sign-out live in the
   "More" menu and in the mobile sheet; here they stay hidden by style,
   because both menus click them and read their state. */
#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}
/* The circle holds initials only. A team name does not fit here and is right
   below the bar on Home; here it would be a smudge across three letters. */
.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}

/* The season rail is gone. At hairline height it was illegible and the
   gameweek label crept into the bar; the gameweek number and the progress
   through the season are stated in full by the status bar. */
.rail,.railkey{display:none}

/* ---------- pruh se stavem dat ----------
   The deadline moved here: in the bar it covered the status chip, here it has
   its own place and fits with the gameweek number. */
.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)}

/* ---------- search palette ---------- */
#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}

/* A narrowed window: first the search label goes, then the brand subtitle,
   then the app name. The segment is never touched. */
@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}
}

/* A flash after numbers are quietly rewritten. */
@keyframes flashbg{from{background:rgba(204,156,72,.28)}to{background:transparent}}
.flash{animation:flashbg 1.2s ease-out}

/* An error with the option to try again. */
.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}

/* ---- form and gameweek progress ---- */
.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)}

/* ---- the squad modal: differences and comparison ---- */
.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}

/* The deadline in the status bar: it has its own place on the right, just
   before the age of the data. The gold frame is the same language as the countdown. */
.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}