/* ===== Król Mundialu 2026 — styl inspirowany energią World Cup 26 ===== */
/* Odważne bloki kolorów, grube kapsuły, mocna typografia uppercase.    */
:root {
  --red:    #e8112d;
  --blue:   #1b35f3;
  --blue-d: #0e1f9c;
  --teal:   #12dcc0;
  --green:  #00b14f;
  --cream:  #f3e8d4;
  --yellow: #ffc20e;
  --ink:    #0a0f2e;        /* granat kart */
  --ink-2:  #121a48;
  --line:   rgba(255,255,255,.14);
  --text:   #ffffff;
  --muted:  #b9c1ec;
  --danger: #ff2e55;
  --grad: linear-gradient(100deg, #ff1f6b, #b026ff 32%, #2d6bff 60%, #00d4e0 82%, #25e07a);
  --grad-h: linear-gradient(90deg, #ff1f6b, #b026ff 30%, #2d6bff 58%, #00d4e0 80%, #25e07a);
  --sidebar-w: 256px;
  --r: 22px;          /* duże zaokrąglenie kart */
  --r-pill: 999px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Arial Black", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  background: var(--blue);
}
/* kolorowe bloki jak na plakacie, ale przygaszone i z rozmytymi krawędziami */
body::before {
  content: ""; position: fixed; inset: -6%; z-index: -2;
  background:
    linear-gradient(135deg, var(--red) 0 26%, transparent 42%),
    linear-gradient(315deg, var(--teal) 0 24%, transparent 40%),
    linear-gradient(205deg, var(--green) 0 12%, transparent 26%),
    var(--blue);
  filter: blur(9px) saturate(.92);
}
body::after {                 /* delikatne przyciemnienie całości */
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: rgba(8, 11, 30, .37);
}

a { color: #fff; text-decoration: none; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* ===== szkielet ===== */
.app { display: flex; min-height: 100vh; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wrap { width: 100%; max-width: 960px; margin: 0 auto; padding: 30px 26px; }
.foot { color: rgba(255,255,255,.7); font-size: .78rem; text-align: center; padding-top: 10px; text-shadow: 0 1px 4px rgba(0,0,0,.35); }

/* ===== sidebar (desktop): solidny granatowy słup ===== */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--ink);
  border-right: 4px solid rgba(255,255,255,.06);
  padding: 24px 16px; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
}
.sidebar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--grad); }
.sidebar .brand { display: flex; align-items: center; gap: 12px; color: #fff; margin: 8px 4px 28px; }
.brand-txt { font-size: 1.1rem; line-height: 1.02; text-transform: uppercase; letter-spacing: .02em; }
.brand-txt b { font-size: 1.35rem; }
.logo-slot { width: 40px; height: 40px; display: grid; place-items: center; }
.side-nav { display: flex; flex-direction: column; gap: 8px; }
.nav-link {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: var(--r-pill);
  color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .85rem;
  transition: .14s; background: var(--ink-2);
}
.nav-link .ic { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ico { display: inline-block; vertical-align: middle; width: 22px; height: 22px; }
.nav-link .ic .ico { width: 21px; height: 21px; }
.nav-link:hover { color: #fff; transform: translateX(2px); }
.nav-link.active { background: var(--grad-h); color: #fff; box-shadow: 0 10px 26px rgba(43,89,255,.5); background-origin: border-box; background-clip: border-box; }
.nav-link.logout { margin-top: 10px; background: transparent; }
.side-foot { margin-top: auto; color: var(--muted); font-size: .82rem; padding: 14px 8px 0; text-transform: uppercase; letter-spacing: .04em; }

.topbar { display: none; }
.bottomnav { display: none; }
.brand-m { display: flex; align-items: center; gap: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: #fff; }

/* ===== nagłówki: wielkie, uppercase, z cieniem (czytelne na kolorze) ===== */
h1 { font-size: 2.3rem; margin: 0 0 .5em; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: .98;
  text-shadow: 0 3px 0 rgba(0,0,0,.18), 0 8px 26px rgba(0,0,0,.25); }
h2 { font-size: 1.5rem; margin: 1.4em 0 .55em; font-weight: 900; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
h3 { font-size: 1.05rem; margin: 1.3em 0 .6em; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: #fff; }
.empty { color: #fff; background: var(--ink); padding: 24px; border-radius: var(--r); }

.flash { background: var(--green); color: #042; padding: 13px 17px; border-radius: var(--r-pill); margin-bottom: 18px; font-weight: 800; }
.flash.err { background: var(--danger); color: #fff; }
.flash.warn { background: var(--yellow); color: #3a2a00; }

/* ===== podium: solidne kolorowe bloki ===== */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; margin: 4px 0 22px; }
.pod { border-radius: var(--r) var(--r) 0 0; padding: 16px 10px 0; text-align: center; color: #0a0f2e; }
.pod-medal { font-size: 1.9rem; }
.pod-name { font-weight: 900; text-transform: uppercase; margin: 4px 0; font-size: .95rem; }
.pod-pts { font-size: 1.5rem; font-weight: 900; }
.pod-pts span { font-size: .7rem; font-weight: 800; margin-left: 3px; opacity: .7; }
.pod-bar { margin-top: 12px; border-radius: 8px 8px 0 0; }
.pod.gold   { background: var(--yellow); transform: translateY(-16px); }
.pod.gold .pod-bar { height: 70px; background: #d99e00; }
.pod.silver { background: #d7dbe8; }
.pod.silver .pod-bar { height: 46px; background: #9aa3bd; }
.pod.bronze { background: #e8a15c; }
.pod.bronze .pod-bar { height: 32px; background: #b9711f; }

/* ===== RANKING: grube kapsuły (jak wiersze karty grupowej) ===== */
.lb { display: flex; flex-direction: column; gap: 12px; }
.lb-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 20px 14px 14px;
  background: var(--ink); border-radius: var(--r-pill); color: #fff;
  border: 3px solid transparent; transition: .14s;
}
.lb-row:hover { transform: translateX(4px); border-color: var(--teal); }
.lb-rank { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  font-weight: 900; font-size: 1.1rem; background: var(--blue); color: #fff; }
.lb-name { flex: 1; min-width: 0; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; font-size: 1.15rem; }
.lb-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.lb-ptsrow { display: flex; align-items: center; gap: 8px; }
.lb-prize { font-size: .78rem; font-weight: 800; color: var(--muted); text-align: right; line-height: 1.1; }
/* na jasnych wierszach podium nagroda na czarno (widoczna) */
.lb-row.gold .lb-prize, .lb-row.silver .lb-prize, .lb-row.bronze .lb-prize { color: rgba(0,0,0,.72); }
.lb-pts { font-weight: 900; font-size: 1.4rem; }
.lb-pts small { font-size: .62rem; opacity: .65; margin-left: 3px; font-weight: 800; }
.lb-row.gold   { background: var(--yellow); color: #2a1d00; }
.lb-row.gold   .lb-rank { background: #2a1d00; color: var(--yellow); }
.lb-row.silver { background: #d7dbe8; color: #1a1f33; }
.lb-row.silver .lb-rank { background: #1a1f33; }
.lb-row.bronze { background: #e8a15c; color: #2e1700; }
.lb-row.bronze .lb-rank { background: #2e1700; }
.lb-ts { background: rgba(0,0,0,.18); padding: 4px 10px; border-radius: var(--r-pill); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.note { color: rgba(255,255,255,.85); margin-top: 14px; text-shadow: 0 1px 6px rgba(0,0,0,.3); }

/* ===== dashboard powitalny ===== */
.hero { background: var(--ink); border-radius: var(--r); padding: 22px 24px; margin-bottom: 22px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -30px; top: -30px; width: 160px; height: 160px; background: var(--grad); filter: blur(8px); opacity: .35; border-radius: 50%; }
.hero-label { text-transform: uppercase; letter-spacing: .08em; font-size: .76rem; color: var(--teal); font-weight: 900; }
.hero-day { font-size: 1.8rem; font-weight: 900; text-transform: uppercase; line-height: 1.05; margin: 4px 0 6px; }
.hero-sub { color: var(--muted); font-weight: 700; }

.today-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.today-match { background: var(--ink); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; border-left: 8px solid; border-image: var(--grad) 1; }
.tm-teams { font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
.tm-teams em { color: var(--muted); font-style: normal; font-size: .78rem; margin: 0 4px; }
.tm-meta { color: var(--muted); font-weight: 700; font-size: .9rem; }
.tm-skrot { align-self: flex-start; margin-top: 2px; }
.tm-live-link { align-self: flex-start; margin-top: 2px; color: #ff6b6b; border-color: rgba(255,107,107,.5); }
.tm-live-link:hover { border-color: #ff6b6b; }
/* belka statusu meczu (na całą szerokość karty) */
.tm-status { text-align: center; border-radius: var(--r-pill); padding: 4px 10px;
  font-size: .64rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.tm-done .tm-status { background: var(--green); color: #042; }
.tm-live .tm-status { background: var(--yellow); color: #3a2a00; animation: tmpulse 1.4s ease-in-out infinite; }
.tm-soon .tm-status { background: #2d6bff; color: #fff; }
/* lewa krawędź karty wg statusu (zamiast gradientu) */
.tm-done { border-image: none; border-left-color: var(--green); }
.tm-live { border-image: none; border-left-color: var(--yellow); }
.tm-soon { border-image: none; border-left-color: #2d6bff; }
/* wynik po meczu — wyróżniony, zielony, większy (nie wygląda jak godzina) */
.tm-score { display: inline-block; background: var(--green); color: #042; font-weight: 900;
  font-size: 1.1rem; padding: 1px 12px; border-radius: var(--r-pill); }
@keyframes tmpulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .tm-live .tm-status { animation: none; } }
.next-match .tm-teams { font-size: 1.2rem; margin: 6px 0; }

/* zakładki Dziś / Jutro (czysty CSS, bez JS) */
.home-tabs { margin: 22px 0 8px; }
/* ukryte radio sterujące zakładkami — 1px, by nie dziedziczyło input{width:100%} i nie rozpychało strony */
.home-tabs > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.tab-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tab-btn { display: inline-block; margin: 0; padding: 9px 22px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--muted); border: 2px solid var(--line);
  font-size: .9rem; font-weight: 900; text-transform: uppercase; letter-spacing: .03em;
  cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.tab-btn:hover { color: #fff; }
#tab-wczoraj:checked ~ .tab-bar label[for=tab-wczoraj],
#tab-dzis:checked ~ .tab-bar label[for=tab-dzis],
#tab-jutro:checked ~ .tab-bar label[for=tab-jutro] {
  color: #fff; border-color: transparent;
  /* gradientowa obwódka respektująca border-radius (padding-box + border-box) */
  background: linear-gradient(var(--ink-2), var(--ink-2)) padding-box,
              var(--grad-h) border-box; }
.next-day { margin-left: auto; color: var(--muted); font-weight: 800; font-size: .86rem;
  white-space: nowrap; }
.next-day strong { color: var(--teal); }
.tab-panel { display: none; }
#tab-wczoraj:checked ~ .panel-wczoraj,
#tab-dzis:checked ~ .panel-dzis,
#tab-jutro:checked ~ .panel-jutro { display: block; }
.day-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  font-weight: 800; margin: 18px 0 10px; }
.tab-panel .day-h:first-child { margin-top: 0; }
.day-empty { color: var(--muted); font-weight: 700; background: var(--ink);
  border: 2px dashed var(--line); border-radius: var(--r); padding: 20px 22px; margin: 0; }

/* macierz typów na dziś */
.predmatrix th, .predmatrix td { padding: 9px 8px; }
.uni-star { font-size: .78em; white-space: nowrap; }
.uni-phase { margin-top: 12px; }
.uni-phase h4 { margin: 0 0 4px; font-size: .95rem; }
.uni-phase ul { margin: 0; padding-left: 18px; }
.uni-phase li { margin: 2px 0; }
/* pierwsza kolumna (gracz) przyklejona — przy przewijaniu nazwy zostają */
.predmatrix th:first-child, .predmatrix td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--ink); text-align: left; }
.predmatrix thead th:first-child { background: var(--ink-2); }
.predmatrix th.mh { text-align: center; }
.predmatrix th.mh span { display: block; line-height: 1.15; text-transform: uppercase; }
/* w nagłówku jest pełna nazwa + kod kraju; domyślnie (desktop / ≤4 mecze) widać pełną nazwę */
.predmatrix th.mh .mh-full, .predmatrix th.mh .mh-code { display: inline; }
.predmatrix th.mh .mh-code { display: none; }
.predmatrix th.mh .vs { color: var(--muted); font-size: .62rem; }
.predmatrix th.mh .mh-time { color: var(--teal); font-weight: 900; margin-top: 3px; }
.predmatrix td { text-align: center; font-weight: 800; vertical-align: top; }
.predmatrix td.name { vertical-align: middle; }   /* nazwa gracza na środku wysokości wiersza */
.scroll-hint { color: var(--muted); font-size: .72rem; text-align: center; margin: 7px 0 0; }
/* nazwiska graczy klikalne → profil (wyglądają jak tekst, podświetlają się) */
.plink { color: inherit; text-decoration: none; }
.plink:hover { color: var(--teal); text-decoration: underline; }
/* macierz „punkty mecz po meczu" */
.grid-table { table-layout: fixed; width: auto; }
.grid-table th, .grid-table td { padding: 7px 4px; text-align: center; white-space: nowrap;
  font-weight: 800; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }   /* liczby DUŻE */
.grid-table th:not(.name), .grid-table td:not(.name) { width: 64px; }   /* równe, wyśrodkowane kolumny graczy */
.grid-table td.name, .grid-table th.name { text-align: left; width: 100px; }   /* kolumna „Mecz" — kody (MEX 2:0 RSA) */
/* nagłówki/stopki: nazwiska małe (by się zmieściły) + wyśrodkowane (bije bazowe .board th: left) */
.grid-table thead th, .grid-table tfoot th { text-align: center; font-size: .72rem; }
.grid-table thead th.name, .grid-table tfoot th.name { text-align: left; }
.grid-table td.name { font-weight: 700; font-size: .82rem; }
.grid-table th:first-child, .grid-table td:first-child {   /* kolumna „Mecz" przyklejona w poziomie */
  position: sticky; left: 0; z-index: 2; background: var(--ink); }
.grid-table thead th:first-child, .grid-table tfoot th:first-child { background: var(--ink-2); }
.grid-table .gt-sum-row th { background: var(--ink-2); color: var(--teal); font-size: 1.05rem; }
.grid-table thead .gt-sum-row th, .grid-table tfoot .gt-sum-row th { z-index: 3; }
.grid-table td.muted { color: var(--muted); font-weight: 600; }
/* kolor punktów wg wartości: 0 ledwo widoczny, 1 biały, 2 ciemnozielony, 3 jasnozielony, 4+ złoty */
.grid-table td.v0 { color: rgba(255, 255, 255, .3); font-weight: 700; }
.grid-table td.v1 { color: #ffffff; }
.grid-table td.v2 { color: #16a34a; }
.grid-table td.v3 { color: #86efac; }
.grid-table td.v4 { color: var(--yellow); }
.two-col { margin-top: 26px; }   /* odstęp przed kolejnymi statystykami */
/* tryb pożegnalny (po finale) */
.end-card { text-align: center; padding: 30px 22px; border: 2px solid var(--yellow); }
.end-card .end-emoji { font-size: 2.4rem; margin-bottom: 6px; }
.end-card h2 { margin: 4px 0 12px; }
.end-card p { max-width: 560px; margin: 8px auto; line-height: 1.5; }
/* live król strzelców: drugi wynik w tabeli („z królem: X") */
.lb-live { display: block; text-align: right; font-size: .74rem; color: var(--muted);
  margin-top: 2px; white-space: nowrap; }
.lb-live b { color: var(--yellow); }
/* podium ma jasne tła (złoto/srebro/brąz) — tam tekst live musi być ciemny */
.lb-row.gold .lb-live, .lb-row.silver .lb-live, .lb-row.bronze .lb-live {
  color: rgba(0, 0, 0, .55); }
.lb-row.gold .lb-live b, .lb-row.bronze .lb-live b { color: #2a1d00; }
.lb-row.silver .lb-live b { color: #1a1f33; }
/* rozpiska obstawianych wyników per gracz — siatka tabelek */
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px; margin-top: 6px; }
.fav-card h4 { margin: 0 0 6px; font-size: 1rem; text-transform: uppercase;
  letter-spacing: .03em; }
/* rozkład obstawianych wyników */
.sl-table .sl-label { font-weight: 800; white-space: nowrap; }
.sl-table .sl-barcell { width: 100%; }
.sl-bar { display: block; height: 13px; border-radius: var(--r-pill); background: var(--grad-h); min-width: 4px; }
/* >4 meczów: ściśnięta macierz TYLKO na wąskich ekranach (desktop ma miejsca pod dostatkiem) */
@media (max-width: 700px) {
  /* na telefonie tylko mniejsze fonty/kółka — układ pionowy jest już w bazowych regułach */
  .predmatrix td { font-size: .9rem; }
  .predmatrix .cs { font-size: .9rem; }
  .predmatrix .cm { font-size: .82rem; }
  .predmatrix .pre-pick .pp-marks { font-size: .82rem; line-height: 1; }
  .predmatrix .pbadge { min-width: 0; height: 18px; padding: 0 6px; font-size: .72rem; }
  /* >4 meczów: dodatkowo kody krajów zamiast nazw + węższe paddingi (kolumny się mieszczą) */
  .predmatrix.compact th, .predmatrix.compact td { padding: 6px 3px; }
  .predmatrix.compact th.mh .mh-full { display: none; }
  .predmatrix.compact th.mh .mh-code { display: inline; }
  .predmatrix.compact th.mh .mh-team { font-size: .82rem; letter-spacing: 0; font-weight: 900; }
  .predmatrix.compact th.mh .vs { font-size: .54rem; margin: 1px 0; }
  .predmatrix.compact th.mh .mh-time { font-size: .62rem; margin-top: 2px; }
  .predmatrix.compact td { font-size: .82rem; }
  .predmatrix.compact th:first-child, .predmatrix.compact td:first-child { font-size: .74rem; }
}
/* komórka PIONOWO na każdej szerokości: wynik na górze, kółko/znaczniki/awans pod spodem */
.predmatrix .cell-main { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.predmatrix .cs { text-align: center; white-space: nowrap; line-height: 1.05; }
.predmatrix .pre-pick { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.predmatrix .pre-pick .pp-marks { margin-left: 0; }
.predmatrix .pre-pick .pp-marks:empty { display: none; }
/* znaczniki w matrycy (⭐🃏🔄): rozmiar jak komórka, bez rozjeżdżających marginesów */
.predmatrix .cm .sym, .predmatrix .pp-marks .sym,
.predmatrix .cm .uni-star, .predmatrix .pp-marks .uni-star { font-size: inherit; margin: 0; vertical-align: baseline; }
.predmatrix .cb { display: inline-flex; justify-content: center; }
.predmatrix .cm { text-align: center; white-space: nowrap; font-size: .9rem; line-height: 1; }
.predmatrix td.name { text-align: left; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
/* rozstrzygnięcie remisu w pucharze (kto awansuje wg typu) — pod wynikiem, 2 linijki, mały font */
.predmatrix .adv { display: block; margin-top: 1px; font-size: .62rem; color: var(--muted);
  white-space: nowrap; line-height: 1.05; }
.predmatrix .adv .adv-t { display: block; font-weight: 800; }   /* kod kraju (np. POR) */
.predmatrix .adv .adv-m { display: block; font-weight: 600; }   /* sposób (po kar./po dogr.) */
.predmatrix.compact .adv { font-size: .56rem; }
/* 🔄 joker zmiany: dymek na klik/tap (działa też na mobile, gdzie title nie wyskakuje) */
.jk-tip { cursor: pointer; }
/* w matrycy klikalna jest cała komórka — delikatny feedback po tapnięciu */
.predmatrix td.jk-tip:active { background: rgba(255, 255, 255, .07); }
/* ikonka 🔄 w tekście (mecz/profil): powiększony, palcoodporny obszar dotyku bez psucia linii */
.sym.jk-tip { display: inline-block; padding: 7px 9px; margin: -7px -5px; border-radius: 9px; }
.sym.jk-tip:active { background: rgba(255, 255, 255, .1); }
.jk-bubble { position: fixed; z-index: 200; max-width: 240px; background: var(--ink-2);
  color: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px;
  font-size: .8rem; font-weight: 700; line-height: 1.3; box-shadow: 0 10px 28px rgba(0,0,0,.55);
  pointer-events: none; }
/* ekran potwierdzenia Jokera zmiany (zabezpieczenie przed przypadkowym użyciem) */
.jc-card { border: 2px solid var(--danger); }
.jc-big { font-size: 1.05rem; font-weight: 800; margin: 0 0 6px; }
.jc-match { font-size: 1.3rem; font-weight: 900; margin: 4px 0 14px; }
.jc-match em { color: var(--muted); font-style: normal; font-weight: 700; }
.jc-list { margin: 0 0 12px; padding-left: 20px; }
.jc-list li { margin: 5px 0; line-height: 1.4; }
.jc-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
/* mecz pucharu bez znanych drużyn (TBD) — wygaszony, nie do typowania jeszcze */
.ballot-card.tbd { opacity: .72; border: 1px dashed var(--line); }
/* wynik wstępny (remis 90' bez znanego awansu) — plakietka przy wyniku na karcie meczu */
.tm-pending { display: block; margin-top: 3px; font-size: .72rem; font-weight: 700;
  color: var(--yellow); }
/* notka o zamknięciu typowania (godzina przed pierwszym meczem) — wyróżniona */
.note.deadline-note { background: rgba(245, 197, 24, .12); border: 1px solid var(--yellow);
  border-radius: 10px; padding: 9px 12px; color: #fff; }

/* ===== karty / tabele ===== */
.card { background: var(--ink); border-radius: var(--r); padding: 20px; margin-bottom: 18px; }
.card.inline, form.inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); }
table.board { width: 100%; border-collapse: collapse; background: var(--ink); border-radius: var(--r); overflow: hidden; }
.board th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 13px; background: var(--ink-2); white-space: nowrap; }
.board td { padding: 13px; border-top: 1px solid var(--line); }
.board tr:hover td { background: rgba(255,255,255,.04); }
.board .rank { font-weight: 900; white-space: nowrap; }
.board .name { font-weight: 800; }
.board .pts { font-weight: 900; text-align: right; }
.board th.num, .board td.num { text-align: right; }
.board td.num { font-weight: 800; }
.ts { color: var(--yellow); font-size: .8rem; font-weight: 900; }
.stats-table td, .stats-table th { white-space: nowrap; }
.stats-table td.ctr, .stats-table th { text-align: center; }
.stats-table td.name, .stats-table th:nth-child(2) { text-align: left; }
.stats-table .ctr .pbadge { margin: 0 auto; }

/* ===== ciekawostki: kolorowe kafle ===== */
.facts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 6px 0 10px; }
.fact { display: flex; gap: 13px; background: var(--ink); border-radius: var(--r); padding: 16px; border-left: 8px solid transparent; border-image: var(--grad) 1; }
.fact-ic { font-size: 1.9rem; }
.fact-title { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 800; }
.fact-value { font-weight: 900; font-size: 1.1rem; text-transform: uppercase; }

/* ===== karty meczów: chunky kapsuły ===== */
.match-list { display: grid; gap: 12px; }
.match-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; background: var(--ink); border-radius: var(--r); padding: 16px 20px; color: #fff; border: 3px solid transparent; transition: .14s; }
.match-card:hover { border-color: var(--teal); transform: translateY(-2px); }
/* kafelek fazy w „Typuj" — ujednolicony układ: nazwa po lewej, status+licznik po prawej */
.phase-card { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ink); border-radius: var(--r); padding: 16px 20px; color: #fff;
  border: 3px solid transparent; transition: .14s; margin-bottom: 12px; }
.phase-card:hover { border-color: var(--teal); transform: translateY(-2px); }
.pc-label { font-weight: 900; text-transform: uppercase; letter-spacing: .02em; min-width: 0; }
.pc-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; text-align: right; }
.pc-count { color: var(--muted); font-size: .8rem; font-weight: 800; white-space: nowrap; }
.match-card .teams { font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
.match-card .teams em { color: var(--muted); font-style: normal; font-size: .8rem; margin: 0 4px; }
.match-card .go { color: var(--muted); font-weight: 900; font-size: 1.1rem; margin-left: 2px; }
.match-card:hover .go { color: var(--teal); }
.match-card .score { text-align: right; }
.match-card .muted { grid-column: 2 / 4; }
.mc-item { display: flex; flex-direction: column; gap: 8px; }
.mc-skrot { align-self: flex-start; }
.stage { font-size: .66rem; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pill); font-weight: 900; letter-spacing: .04em; }
.stage.group { background: var(--teal); color: #043; }
.stage.knockout { background: var(--yellow); color: #3a2a00; }
.pending { color: var(--muted); }
.bigscore { font-size: 1.3rem; font-weight: 900; }

/* odznaki punktowe — kółka */
.pbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: var(--r-pill); font-weight: 900; font-size: .82rem; color: #fff; line-height: 1; box-sizing: border-box; }
.pbadge.p3 { background: var(--green); }
.pbadge.p2 { background: #0a8f5e; }
.pbadge.p1 { background: var(--blue); }
.pbadge.p0 { background: var(--danger); }
.pbadge.p4, .pbadge.p5, .pbadge.p6, .pbadge.p7, .pbadge.p8, .pbadge.p9 { background: var(--yellow); color: #3a2a00; }

/* ===== formularze ===== */
label { display: block; margin-bottom: 13px; font-size: .82rem; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
input, select { width: 100%; padding: 12px 14px; background: var(--ink-2); border: 2px solid var(--line); border-radius: 14px; color: #fff; font-size: 1rem; margin-top: 5px; font-weight: 700; }
input:focus, select:focus { outline: none; border-color: var(--teal); }
form.inline input, form.inline select { width: auto; margin-top: 0; }
button, .btn {
  background: var(--grad); color: #fff; border: 0; padding: 14px 26px; border-radius: var(--r-pill);
  font-weight: 900; cursor: pointer; font-size: .82rem; text-transform: uppercase; letter-spacing: .07em;
  transition: transform .12s, filter .12s, box-shadow .12s; box-shadow: 0 10px 26px rgba(176,38,255,.34);
  font-family: inherit; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn .ico { width: 16px; height: 16px; flex: none; }
.btn.small .ico { width: 14px; height: 14px; }
button:hover, .btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
a.btn { display: inline-flex; text-decoration: none; }
button.ghost, .btn.ghost { background: var(--ink-2); color: #fff; border: 2px solid var(--line); box-shadow: none; }
button.ghost:hover, .btn.ghost:hover { border-color: var(--teal); }
button.danger { background: var(--danger); box-shadow: none; }
button.small, .btn.small { padding: 8px 16px; font-size: .7rem; }

.admin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.card.link { color: #fff; display: block; transition: .14s; }
.card.link:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.3); }

.score-input { display: flex; align-items: center; gap: 9px; font-size: 1.3rem; font-weight: 900; }
.score-input input { width: 66px; text-align: center; padding: 10px 4px; font-weight: 900; }
.score-input.small input { width: 54px; font-size: 1.1rem; padding: 9px 2px; }
/* ukryj strzałki number-spinnera (ściskały cyfrę do niewidoczności) */
.score-input input::-webkit-outer-spin-button,
.score-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.score-input input { -moz-appearance: textfield; appearance: textfield; }
.predtable td { padding: 9px 10px; }
.predtable .name { font-weight: 800; }
.predtable select { width: auto; min-width: 86px; }
code.link { word-break: break-all; font-size: .82rem; color: var(--teal); }

/* ===== ankieta gracza ===== */
.ballot-list { display: grid; gap: 14px; margin-bottom: 18px; }
.ballot-card { background: var(--ink); border-radius: var(--r); padding: 16px 18px; border: 3px solid transparent; }
.ballot-card:focus-within { border-color: var(--teal); }
.ballot-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ballot-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.ballot-match > * { min-width: 0; }   /* pozwala kolumnom się zwężać (brak poziomego overflow) */
.ballot-match .bt { font-weight: 900; text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.ballot-match .bt.right { text-align: right; }
.ko-block { margin-top: 13px; padding-top: 13px; border-top: 2px dashed var(--line); transition: opacity .15s; }
.ko-block.ko-dim { opacity: .4; }
.ko-row { display: flex; gap: 9px; margin-top: 7px; }
.ko-row select { width: 100%; }
.ko-row select:disabled { cursor: not-allowed; }
.ballot-submit { position: sticky; bottom: 0; padding: 12px 0;
  background: linear-gradient(0deg, rgba(5,6,15,.97) 62%, transparent); }
.ballot-submit button { width: 100%; padding: 17px; font-size: 1rem; }
.ballot-card.locked { opacity: .85; }
.your-pick { margin-top: 8px; font-size: .95rem; }
.phase { margin-bottom: 8px; }
.phase-pill { font-size: .62rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  background: var(--ink-2); color: var(--muted); padding: 4px 10px; border-radius: var(--r-pill); vertical-align: middle; }
.joker-panel { border: 2px solid var(--yellow); }
.joker-panel h3 { color: var(--yellow); }
.me-chip { background: var(--ink-2); border-radius: var(--r-pill); padding: 8px 14px; font-weight: 800;
  font-size: .82rem; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.me-chip a { color: var(--teal); }
.hosts { opacity: .9; text-align: center; }
.hosts-flags { font-size: 1.8rem; line-height: 1; letter-spacing: .06em; }
.rules-list { margin: 8px 0 0; padding-left: 22px; }
.rules-list li { margin: 7px 0; line-height: 1.55; }
.rules-list ul { margin: 5px 0 5px; }
.me-actions { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
/* symbole: 🃏 joker, ⭐ unikat, 🔄 joker zmiany — duże i czytelne */
.sym { font-size: 1.2rem; vertical-align: middle; margin-left: 3px; line-height: 1; white-space: nowrap; }
.lb-name .sym { font-size: 1.35rem; }
/* w tabelach typów: zwarte i nieprzełamywane (gwiazdka trzyma się typu) */
.board td .sym { font-size: 1.02rem; margin-left: 2px; }
/* tabele „fit": zawsze mieszczą się w szerokości — zero przewijania w bok.
   Agresywne zawijanie TYLKO w kolumnie z nazwą meczu; pozostałe kolumny
   (typ z gwiazdką, wynik, pkt) zostają w jednej linii. */
.board.fit td:first-child, .board.fit th:first-child { overflow-wrap: anywhere; width: 99%; }
.board.fit td:not(:first-child), .board.fit th:not(:first-child) { white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 4px; color: var(--muted);
  font-size: .85rem; font-weight: 600; }
.legend .sym { font-size: 1.15rem; margin-right: 4px; }

/* wykres punktów w czasie */
.chart-wrap { background: var(--ink); border-radius: var(--r); padding: 14px 12px; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: rgba(255,255,255,.10); stroke-width: 1; }
.chart .yl { fill: var(--muted); font-size: 11px; text-anchor: end; }
.chart .xl { fill: var(--muted); font-size: 11px; }
.chart .pl.off, .chart .pdot.off { display: none; }
/* wykres słupkowy (średnia goli): jedna seria = jeden kolor akcentowy */
.chart .gbar { fill: var(--teal); }
.chart .bl { fill: #fff; font-size: 13px; font-weight: 800; text-anchor: middle; }
.chart .xlc { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.chart-ctl { display: flex; gap: 8px; margin: 10px 0 6px; flex-wrap: wrap; }
.legend2 { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.leg { background: var(--ink); border: 2px solid var(--line); border-radius: var(--r-pill);
  padding: 6px 12px; color: #fff; font-weight: 800; font-size: .8rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; text-transform: uppercase; }
.leg .sw { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.leg b { color: var(--muted); }
.leg.off { opacity: .4; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chip { padding: 7px 13px; border-radius: var(--r-pill); background: var(--ink-2); color: #fff;
  font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .02em; border: 2px solid transparent; }
.chip:hover { border-color: var(--teal); }
.ptabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.ptab { padding: 8px 14px; border-radius: var(--r-pill); background: var(--ink); color: var(--muted);
  font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; border: 2px solid transparent; }
.ptab:hover { color: #fff; border-color: var(--line); }
.ptab.active { background: var(--grad-h); color: #fff; border-color: transparent; background-origin: border-box; background-clip: border-box; }
table.board.mini { margin-top: 8px; }
.board.mini td { padding: 7px 10px; }
.board.mini td.name { font-weight: 800; text-transform: uppercase; width: 40%; }
.empty-table { text-align: center; padding: 30px 20px; }
.empty-table .et-emoji { font-size: 2.6rem; margin-bottom: 6px; }
.empty-table p { margin: 4px 0; }

/* ============================================================= */
/* ===== MOBILE < 900px: dolna nawigacja ===== */
@media (max-width: 900px) {
  .sidebar { display: none; }
  .topbar { display: flex; align-items: center; justify-content: center; height: 58px;
    position: sticky; top: 0; z-index: 20; background: var(--ink); }
  .topbar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--grad); }
  .wrap { padding: 18px 16px calc(94px + env(safe-area-inset-bottom)); }
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.25rem; }

  .bottomnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
    background: var(--ink); border-top: 4px solid rgba(255,255,255,.06);
    padding: 9px 6px calc(9px + env(safe-area-inset-bottom)); }
  .bottomnav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad); }
  .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: .66rem; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; padding: 5px 0; }
  .tab .ic { font-size: 1.35rem; display: inline-flex; align-items: center; justify-content: center; }
  .tab .ic .ico { width: 23px; height: 23px; }
  .tab.active { color: var(--teal); }
  .tab.active .ic { transform: scale(1.12); }

  .admin-grid, .two-col { grid-template-columns: 1fr; }
  .match-card { grid-template-columns: auto 1fr; }
  .match-card .score { grid-column: 1 / 3; text-align: left; }
  .facts-grid { grid-template-columns: 1fr; }
  .lb-name { font-size: 1rem; }
  .lb-pts { font-size: 1.2rem; }
  .hide-m { display: none !important; }
  /* przycisk zapisu przyklejony NAD dolną nawigacją (mobile) */
  .ballot-submit { bottom: calc(72px + env(safe-area-inset-bottom)); }
}
/* wąskie telefony: więcej miejsca na nazwy drużyn w typowaniu */
@media (max-width: 480px) {
  .ballot-match { gap: 6px; }
  .ballot-match .bt { font-size: .92rem; }
  .score-input.small input { width: 44px; font-size: 1rem; padding: 9px 1px; }
  h1 { font-size: 1.55rem; }
  /* ciaśniejsze tabele typów na wąskich ekranach (mniej rozpychania w bok) */
  .board td, .board th { padding: 9px 6px; }
  /* przyciski w tabeli (Edytuj / Zmień joker) bardziej zwarte */
  .board .btn.small { padding: 7px 10px; font-size: .66rem; }
}
@media (max-width: 380px) {
  .tab .lbl { display: none; } .tab .ic { font-size: 1.6rem; }
  .tab .ic .ico { width: 26px; height: 26px; }
  .ballot-match .bt { font-size: .85rem; }
  .score-input.small input { width: 40px; }
}

/* Tylko jako zainstalowana apka (PWA) na iOS: odsuń górny pasek spod zegarka/Dynamic Island.
   W zwykłej przeglądarce ta reguła się nie aktywuje, więc nie ma nadmiaru miejsca u góry. */
@media (display-mode: standalone) {
  .topbar { padding-top: env(safe-area-inset-top); height: calc(58px + env(safe-area-inset-top)); }
}

/* ===== Tabele grup (podgląd na żywo na stronie Typuj) ===== */
.gt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 8px; }
.gt-card { background: var(--ink); border-radius: 16px; padding: 12px 14px; }
.gt-h { font-weight: 900; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; color: var(--teal); }
/* table-layout: fixed -> kolumny liczbowe mają tę samą szerokość w każdej grupie */
.gt-tbl { width: 100%; border-collapse: collapse; font-size: .92rem; table-layout: fixed; }
.gt-tbl th { font-size: .66rem; text-transform: uppercase; color: var(--muted); padding: 2px 4px; font-weight: 800; text-align: right; }
.gt-tbl td { padding: 6px 4px; border-top: 1px solid rgba(255,255,255,.08); }
/* szerokości kolumn: poz | drużyna(elastyczna) | M | +/- | Pkt */
.gt-tbl th:nth-child(1), .gt-tbl td:nth-child(1) { width: 22px; text-align: center; }
.gt-tbl th:nth-child(2), .gt-tbl td:nth-child(2) { text-align: left; }
.gt-tbl th:nth-child(3), .gt-tbl td:nth-child(3) { width: 30px; }
.gt-tbl th:nth-child(4), .gt-tbl td:nth-child(4) { width: 42px; }
.gt-tbl th:nth-child(5), .gt-tbl td:nth-child(5) { width: 38px; }
.gt-pos { color: var(--muted); }
.gt-team { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-n { text-align: right; font-variant-numeric: tabular-nums; }
.gt-pts { font-weight: 900; }