/* =====================================================================
   ZAPISY NA MECZ — wygląd
   Wczytywane przez index.html. Zmiana samego wyglądu = tylko ten plik.
   Kolory siedzą w zmiennych :root u góry — i osobno w bloku
   prefers-color-scheme dla trybu ciemnego. Zmieniając kolor, zmień go
   w obu miejscach, inaczej rozjedzie się na telefonach z ciemnym motywem.
   ===================================================================== */

  :root {
    --ground: #F4F5F2; --surface: #FFFFFF; --surface-2: #EBEEE9; --surface-3: #E1E6DF;
    --ink: #14211B; --ink-soft: #4A5A52; --muted: #77857D; --line: #DBE0DA;
    --accent: #1F6F4A; --accent-soft: #E2EFE7; --accent-ink: #FFFFFF;
    --no: #A8342A; --no-soft: #F6E4E2;
    --warn: #8C6A0B; --warn-soft: #F8EFD6;
    --gk: #7A4E9E; --gk-soft: #EFE6F6; --blue-t: #2C5C99; --red-t: #A8342A;
    --zmiana: #2C5C99; --zmiana-ink: #FFFFFF;
    --shadow: 0 1px 2px rgba(20,33,27,.06), 0 10px 30px -22px rgba(20,33,27,.5);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --ground: #0E1512; --surface: #16201B; --surface-2: #1D2922; --surface-3: #26332C;
      --ink: #E7EDE8; --ink-soft: #A9B8AF; --muted: #7E8F85; --line: #2A382F;
      --accent: #4FBF86; --accent-soft: #172C21; --accent-ink: #08130D;
      --no: #E0776B; --no-soft: #2E1E1C;
      --warn: #D9AE45; --warn-soft: #2B2413;
      --gk: #C09BE0; --gk-soft: #241C2E; --blue-t: #7FAEE8; --red-t: #E0776B;
      --zmiana: #7FAEE8; --zmiana-ink: #08131D;
      --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px -22px rgba(0,0,0,.9);
    }
  }

  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; }
  body {
    background: var(--ground); color: var(--ink);
    font-family: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .telefon { max-width: 460px; margin: 0 auto; padding: 0 16px calc(40px + env(safe-area-inset-bottom)); }

  .mecz {
    background: var(--surface); border: 1px solid var(--line); border-top: 0;
    border-radius: 0 0 18px 18px; padding: 20px 20px 18px; box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px;
  }
  .mecz .kiedy { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
  .mecz .gdzie { font-size: .95rem; color: var(--ink-soft); }
  /* „Witaj, Adam. Mecz zakończył się…” — pod datą i miejscem, nad odliczaniem.
     Ma odpowiadać na pytanie „czyją kartę właściwie wypełniam”. */
  .mecz .powitanie {
    font-size: .95rem; line-height: 1.4; color: var(--ink-soft);
    background: var(--accent-soft); border-radius: 10px; padding: 9px 12px; margin-top: 4px;
  }
  .mecz .powitanie strong { color: var(--accent); font-weight: 700; }
  .odliczanie {
    font-family: "JetBrains Mono", monospace; font-size: .72rem; font-weight: 600;
    letter-spacing: .06em; color: var(--warn); background: var(--warn-soft);
    padding: 6px 11px; border-radius: 999px; align-self: flex-start; margin-top: 6px;
  }
  .odliczanie.pilne { color: var(--no); background: var(--no-soft); }

  .licznik {
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 18px 20px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px;
  }
  .licznik .gora { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .licznik .duza { font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1; }
  .licznik .duza small { font-size: 1.1rem; font-weight: 600; color: var(--muted); }
  .licznik .stan { font-size: .88rem; color: var(--ink-soft); text-align: right; max-width: 56%; line-height: 1.35; }
  .paski { display: grid; gap: 3px; }
  .paski i { height: 8px; border-radius: 2px; background: var(--surface-3); display: block; }
  .paski i.pelny { background: var(--accent); }
  /* Trzy progi: 12 — jest komplet, 14 — gra się wygodnie, 16 — pełna lista. */
  .paski i.prog  { box-shadow: inset 0 0 0 2px var(--warn); }
  .paski i.prog2 { box-shadow: inset 0 0 0 2px var(--zmiana); }
  .paski i.prog3 { box-shadow: inset 0 0 0 2px var(--no); }
  .paski i.prog.pelny, .paski i.prog2.pelny, .paski i.prog3.pelny {
    box-shadow: none;   /* próg osiągnięty — obrys tylko myli */
  }

  .ja {
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 18px 20px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 14px;
  }
  .ja h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
  .ja .pod { font-size: .88rem; color: var(--muted); margin-top: -8px; }

  .wybor-imion { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .imie-btn {
    font-family: inherit; font-size: .92rem; font-weight: 600; color: var(--ink);
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
    padding: 14px 10px; cursor: pointer; text-align: left;
  }
  .imie-btn:active { background: var(--accent-soft); }
  .imie-btn.zajety { opacity: .5; display: flex; flex-direction: column; gap: 2px; }
  .imie-btn.zajety small {
    font-family: "JetBrains Mono", monospace; font-size: .64rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  }

  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .wielki {
    font-family: inherit; font-size: 1.02rem; font-weight: 700;
    border-radius: 12px; padding: 18px 12px; cursor: pointer; border: 2px solid var(--line);
    background: var(--surface-2); color: var(--ink-soft); transition: background .12s, border-color .12s;
  }
  .wielki.tak.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .wielki.nie.on { background: var(--no); border-color: var(--no); color: #fff; }
  .wielki:disabled { opacity: .45; }
  /* zamknięta decyzja: wybrana odpowiedź zostaje czytelna, blednie tylko ta druga */
  .wielki.on:disabled { opacity: 1; }

  /* Jedyny niebieski element na karcie zawodnika — zielony to „Gram”,
     czerwony „Nie gram”, bursztyn to zmiana tożsamości. Niebieski nie
     koliduje z niczym, więc od razu widać, gdzie się odblokowuje decyzję. */
  .chip.zmiana {
    background: var(--zmiana); border-color: var(--zmiana); color: var(--zmiana-ink);
    font-size: .82rem; font-weight: 700; padding: 10px 18px; align-self: flex-start;
    box-shadow: var(--shadow);
  }
  .chip.zmiana:active { filter: brightness(.92); }
  .chip-info.odblokowane .chip.zmiana {
    background: transparent; color: var(--muted); border-color: var(--line);
    font-weight: 600; font-size: .78rem; padding: 7px 12px; box-shadow: none;
  }
  .chip-info.odblokowane {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    color: var(--accent);
  }

  .pozycje { display: flex; flex-direction: column; gap: 8px; }
  .etykieta {
    font-family: "JetBrains Mono", monospace; font-size: .68rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  }
  .chipy { display: flex; gap: 7px; flex-wrap: wrap; }
  .chip {
    font-family: inherit; font-size: .88rem; font-weight: 600; color: var(--ink-soft);
    background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 999px;
    padding: 10px 15px; cursor: pointer;
  }
  .chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
  .chip.gk.on { background: var(--gk-soft); border-color: var(--gk); color: var(--gk); }
  .chip:disabled { opacity: .38; }
  .chip-info { font-size: .82rem; color: var(--muted); line-height: 1.4; }
  .chip-info.zapamietane {
    background: var(--accent-soft); color: var(--accent); border-radius: 10px;
    padding: 9px 12px; margin-top: 2px;
  }
  .chip-info.zapamietane strong { font-weight: 700; }

  .zmien {
    font-family: "JetBrains Mono", monospace; font-size: .72rem; color: var(--muted);
    background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 0; align-self: flex-start;
  }

  /* "to nie ja" i "zapisz kogoś innego" — wielkość chipów pozycji, ale
     bursztynowe, żeby nie myliły się z wyborem miejsca na boisku. */
  .chipy-inne { margin-top: 2px; }
  .chip.inny {
    background: var(--warn-soft); border-color: var(--warn); color: var(--warn);
    font-size: .82rem; padding: 9px 14px;
  }
  .chip.inny:active { filter: brightness(.95); }
  .chip.skasuj {
    background: var(--no-soft); border-color: var(--no); color: var(--no);
    font-size: .82rem; padding: 9px 14px;
  }
  .za-kogos {
    background: var(--warn-soft); border: 1.5px solid var(--warn); color: var(--warn);
    border-radius: 12px; padding: 10px 13px; font-size: .84rem; line-height: 1.4;
  }
  .za-kogos strong { font-weight: 700; }

  .wersje {
    font-family: "JetBrains Mono", monospace; font-size: .66rem; letter-spacing: .06em;
    color: var(--muted); margin: -6px 0 14px;
  }
  .kafel-gosc { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start;
    padding: 11px 0; border-bottom: 1px solid var(--line); }
  .kafel-gosc:last-child { border-bottom: 0; }
  .kafel-gosc .imie { font-weight: 600; }
  .kafel-gosc .meta { font-family: "JetBrains Mono", monospace; font-size: .68rem;
    color: var(--muted); letter-spacing: .04em; margin-top: 3px; }
  .oceny-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
  .oceny-form label { display: flex; flex-direction: column; gap: 4px; }
  .oceny-form span { font-family: "JetBrains Mono", monospace; font-size: .62rem;
    letter-spacing: .1em; color: var(--muted); text-align: center; }
  .oceny-form input {
    font-family: "JetBrains Mono", monospace; font-size: 1rem; text-align: center;
    padding: 9px 0; border: 1.5px solid var(--line); border-radius: 10px;
    background: var(--surface); color: var(--ink); width: 100%;
  }
  .oceny-form input:focus { outline: none; border-color: var(--accent); }
  .pole-imie {
    font-family: inherit; font-size: 1rem; padding: 11px 13px; width: 100%;
    border: 1.5px solid var(--line); border-radius: 12px;
    background: var(--surface); color: var(--ink);
  }
  .pole-imie:focus { outline: none; border-color: var(--accent); }
  .ptaszek { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink-soft); }
  .szukajka { margin-bottom: 12px; }
  .lista.miesiac { border-color: var(--zmiana); }
  .lista.miesiac.gotowa { border-color: var(--accent); }
  .miesiac-rzad { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
  .miesiac-rzad .duza-liczba {
    font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .miesiac-rzad .duzy-przycisk { margin: 0; }
  /* Monit w „Kadrze i gościach” — sam przypomina, właściwa robota jest w Rozliczeniach. */
  .lista.miesiac.monit { padding-top: 14px; padding-bottom: 14px; }
  .monit-rzad { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .monit-rzad strong { font-size: .95rem; }
  .monit-rzad .chip { flex: 0 0 auto; white-space: nowrap; }
  .ptaszek input { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }
  .ptaszek span { line-height: 1.35; }
  .ptaszek small { color: var(--muted); }
  .edytor {
    padding: 4px 0 16px; display: flex; flex-direction: column; gap: 9px;
    border-bottom: 1px solid var(--line); margin-bottom: 4px;
  }
  .edytor .oceny-form { margin: 0; }

  /* Trzy stany zawodnika — jeden do jednego z listą rozwijaną w kolumnie „typ”.
     Radiami, nie ptaszkami, bo stany wykluczają się nawzajem i widać to od razu.
     Kolumna, nie rządek: przy szerokości telefonu trzy podpisy obok siebie
     łamałyby się w środku wyrazu. */
  .typy { display: flex; flex-direction: column; gap: 6px; }
  .typy .typ {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface); font-size: .88rem; color: var(--ink-soft);
  }
  .typy .typ input { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; margin: 0; }
  .typy .typ span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
  .typy .typ strong { font-weight: 600; color: var(--ink); }
  .typy .typ small { color: var(--muted); font-size: .74rem; }
  .typy .typ:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
  .typy .typ.kontuzja input { accent-color: var(--no); }
  .typy .typ.kontuzja:has(input:checked) { border-color: var(--no); background: var(--no-soft); }
  .lista.kontuzje { border-color: var(--no); }

  /* ankieta dla nowego */
  .mecz .koszt { font-size: .92rem; color: var(--ink-soft); margin-top: 6px; }
  .mecz .koszt strong { color: var(--accent); font-weight: 700; }
  .pyt { margin: 16px 0 4px; }
  .pyt .etykieta { display: block; margin-bottom: 9px; }
  .suwak-poziom { display: flex; gap: 6px; }
  .suwak-poziom button {
    flex: 1; font-family: "JetBrains Mono", monospace; font-size: .78rem; font-weight: 600;
    padding: 12px 0; border-radius: 10px; border: 1.5px solid var(--line);
    background: var(--surface-2); color: var(--ink-soft); cursor: pointer;
  }
  .suwak-poziom button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
  .odp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .odp-duo button {
    font-family: inherit; font-size: .9rem; font-weight: 600; padding: 14px 6px;
    border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface-2);
    color: var(--ink-soft); cursor: pointer; line-height: 1.25;
  }
  .odp-duo button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

  /* panel: dodawanie i ankiety */
  .trojka { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
  .trojka .duzy-przycisk { margin: 0; }
  .trojka .szeroko { grid-column: 1 / -1; }
  .link-box {
    display: flex; gap: 8px; align-items: center; background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 10px;
  }
  .link-box code {
    font-family: "JetBrains Mono", monospace; font-size: .72rem; color: var(--ink-soft);
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .lista.ankieta { border-color: var(--zmiana); }
  .lista.czeka { border-color: var(--warn); }
  .metka {
    font-family: "JetBrains Mono", monospace; font-size: .6rem; letter-spacing: .08em;
    padding: 3px 8px; border-radius: 999px; background: var(--zmiana); color: #fff;
    white-space: nowrap;
  }
  .flaga {
    background: var(--warn-soft); color: var(--warn); border-radius: 10px;
    padding: 9px 12px; font-size: .82rem; line-height: 1.4; margin: 4px 0 10px;
  }

  .lista {
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 16px 18px; margin-bottom: 12px;
  }
  .lista h3 {
    margin: 0 0 10px; font-family: "JetBrains Mono", monospace; font-size: .7rem;
    font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  }
  .zasada { font-family: Georgia, "Times New Roman", serif; font-size: .85rem; color: var(--ink-soft); line-height: 1.45; margin: -4px 0 10px; }
  .wiersz {
    /* minmax(0,1fr) na nazwisku: bez tego kolumna z plakietką potrafi
       skurczyć się poniżej własnej treści i napis wychodzi poza pigułkę */
    display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .96rem;
  }
  .wiersz:last-child { border-bottom: 0; }
  .wiersz .nr { font-family: "JetBrains Mono", monospace; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .wiersz .kto { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
  .wiersz.ja-wiersz .kto { color: var(--accent); }
  .wiersz.adm { padding: 7px 0; }
  .akcje-mini { display: flex; gap: 6px; }
  .akcje-mini button {
    font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .04em;
    padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line);
    background: var(--surface-2); color: var(--muted); cursor: pointer;
  }
  .akcje-mini button.ok { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
  .akcje-mini button.ostro { color: var(--no); background: var(--no-soft); border-color: var(--no-soft); }
  .akcje-mini button:disabled { opacity: .45; cursor: default; }
  .znacznik {
    font-family: "JetBrains Mono", monospace; font-size: .64rem; font-weight: 600;
    letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted);
    /* pigułka nigdy nie kurczy się poniżej swojego napisu — bez tego
       przy krótkim nazwisku kolumna zapadała się do kilku pikseli
       i tekst wychodził poza ramkę */
    white-space: nowrap; justify-self: end; min-width: max-content;
  }
  .znacznik.gk { background: var(--gk-soft); color: var(--gk); }
  .znacznik.kontuzja { background: var(--no-soft); color: var(--no); }
  .znacznik.rez { background: var(--warn-soft); color: var(--warn); }
  .znacznik.pierwszy { background: var(--accent-soft); color: var(--accent); }
  .znacznik.zm { background: var(--gk-soft); color: var(--gk); }
  .puste { font-size: .9rem; color: var(--muted); font-family: Georgia, "Times New Roman", serif; }

  .banner {
    border-radius: 14px; padding: 15px 18px; margin-bottom: 14px;
    font-size: .95rem; line-height: 1.45; display: flex; flex-direction: column; gap: 4px;
  }
  .banner strong { font-weight: 700; }
  .banner.pelny { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }
  .banner.zamkniety { background: var(--no-soft); color: var(--no); border: 1px solid var(--no); }
  .banner.info { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); }

  .ladowanie, .blad {
    text-align: center; padding: 60px 20px; color: var(--muted);
    font-family: Georgia, "Times New Roman", serif; font-size: .98rem; line-height: 1.6;
  }
  .blad strong { display: block; font-family: "Bricolage Grotesque", sans-serif; color: var(--ink); font-size: 1.05rem; margin-bottom: 8px; }
  .ponow {
    margin-top: 16px; font-family: inherit; font-size: .9rem; font-weight: 700; color: #fff;
    background: var(--accent); border: 0; border-radius: 10px; padding: 12px 22px; cursor: pointer;
  }

  .stopka { margin-top: 22px; text-align: center; }
  .stopka button {
    font-family: "JetBrains Mono", monospace; font-size: .68rem; color: var(--muted);
    background: none; border: 0; cursor: pointer; letter-spacing: .08em; padding: 8px;
  }


  /* --- boisko i skład --- */
  .sklad-naglowek { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
  .sklad-naglowek .kiedy { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
  .sklad-naglowek .sub { font-size: .88rem; color: var(--muted); font-family: "JetBrains Mono", monospace; }

  .warianty { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
  .warianty .segment { display: flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
  .warianty .segment button {
    font-family: "JetBrains Mono", monospace; font-size: .74rem; font-weight: 600; color: var(--muted);
    background: none; border: 0; border-radius: 7px; padding: 8px 13px; cursor: pointer;
  }
  .warianty .segment button.on { background: var(--surface); color: var(--accent); }

  /* Dokooptowani z rezerwy stoją POZA boiskiem, przy linii środkowej.
     Dlatego boisko dostaje sąsiada, zamiast wpuszczać ich między linie. */
  .boisko-zestaw { display: flex; align-items: stretch; gap: 0; margin-bottom: 12px; }
  .boisko-zestaw .boisko { flex: 1; margin-bottom: 0; }
  .boisko-zestaw:has(.lawka) .boisko { border-radius: 14px 0 0 14px; }
  .lawka {
    width: 44px; flex: 0 0 44px; display: grid; grid-template-rows: 1fr 1fr;
    border-left: 1.5px dashed rgba(255,255,255,.18);
    background: repeating-linear-gradient(180deg, #1B4D33 0 8.33%, #17432C 8.33% 16.66%);
    border-radius: 0 14px 14px 0;
  }
  .lawka-g { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; gap: 6px; padding-bottom: 5px; }
  .lawka-d { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding-top: 5px; }
  .rez-znacznik {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    font-size: .62rem; font-weight: 800; color: #fff; flex: 0 0 auto;
    border: 2px dashed rgba(255,255,255,.7); box-shadow: 0 2px 6px rgba(0,0,0,.35);
  }
  .rez-znacznik.n { background: #2C5C99; }
  .rez-znacznik.c { background: #A8342A; }

  .rezerwa-panel {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; padding: 13px 16px; margin-bottom: 12px;
  }
  .rez-wiersz {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 0; border-top: 1px solid var(--line);
  }
  .rez-wiersz .kto { font-weight: 600; }
  .rez-wiersz button {
    font-family: "JetBrains Mono", monospace; font-size: .68rem; cursor: pointer;
    border-radius: 7px; padding: 6px 10px; white-space: nowrap;
    background: none; border: 1px solid var(--line); color: var(--ink);
  }
  .rez-druzyny { display: flex; gap: 6px; }
  .rez-druzyny .rez-n.on { background: #2C5C99; border-color: #2C5C99; color: #fff; }
  .rez-druzyny .rez-c.on { background: #A8342A; border-color: #A8342A; color: #fff; }
  .rez-podpowiedz { font-size: .74rem; color: var(--warn); padding: 0 0 6px; }

  .boisko {
    position: relative; aspect-ratio: 68 / 105; border-radius: 14px; overflow: hidden; margin-bottom: 12px;
    background: repeating-linear-gradient(180deg, #1B4D33 0 8.33%, #17432C 8.33% 16.66%);
  }
  .linie { position: absolute; inset: 0; }
  .linie div { position: absolute; border: 1.5px solid rgba(255,255,255,.3); }
  .obwod { inset: 3.5%; border-radius: 3px; }
  .srodek-linia { left: 3.5%; right: 3.5%; top: 50%; border-width: 0 0 1.5px 0 !important; }
  .srodek-kolo { left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; }
  .pole-g { left: 26%; right: 26%; top: 3.5%; height: 13%; border-top: 0 !important; }
  .pole-d { left: 26%; right: 26%; bottom: 3.5%; height: 13%; border-bottom: 0 !important; }

  .zawodnik {
    position: absolute; transform: translate(-50%,-50%);
    display: flex; flex-direction: column; align-items: center; gap: 3px; width: 74px;
  }
  .koszulka {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    font-size: .66rem; font-weight: 800; color: #fff;
    border: 2px solid rgba(255,255,255,.55); box-shadow: 0 2px 6px rgba(0,0,0,.35);
  }
  .zawodnik.n .koszulka { background: #2C5C99; }
  .zawodnik.c .koszulka { background: #A8342A; }
  .zawodnik.c { flex-direction: column-reverse; }
  .zawodnik.gk .koszulka { background: #C9A227; color: #2A2005; }
  .zawodnik { cursor: pointer; }
  .zawodnik.wybrany .koszulka {
    outline: 3px solid #F2C744; outline-offset: 2px;
    transform: scale(1.12); transition: transform .12s;
  }
  .zawodnik.mozliwy .koszulka { animation: puls 1.1s ease-in-out infinite; }
  @keyframes puls { 50% { box-shadow: 0 0 0 5px rgba(242,199,68,.35), 0 2px 6px rgba(0,0,0,.35); } }
  @media (prefers-reduced-motion: reduce) { .zawodnik.mozliwy .koszulka { animation: none; outline: 2px dashed rgba(242,199,68,.8); outline-offset: 2px; } }

  .pasek-zamiany {
    background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn);
    border-radius: 12px; padding: 12px 15px; margin-bottom: 12px;
    font-size: .9rem; line-height: 1.4; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  }
  .pasek-zamiany button {
    font-family: "JetBrains Mono", monospace; font-size: .7rem; color: var(--warn);
    background: none; border: 1px solid var(--warn); border-radius: 7px; padding: 6px 10px; cursor: pointer; white-space: nowrap;
  }
  .nazwa { font-size: .6rem; font-weight: 600; color: #fff; text-align: center; line-height: 1.15; text-shadow: 0 1px 3px rgba(0,0,0,.9); }

  .bilans { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px; margin-bottom: 12px; }
  .bilans .w {
    display: grid; grid-template-columns: 1fr 84px 1fr; gap: 8px; align-items: center;
    font-family: "JetBrains Mono", monospace; font-size: .78rem; font-variant-numeric: tabular-nums; padding: 3px 0;
  }
  .bilans .w .e { text-align: center; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .bilans .w .l { text-align: right; color: var(--blue-t); font-weight: 600; }
  .bilans .w .p { text-align: left; color: var(--red-t); font-weight: 600; }
  .bilans .naglowki { border-bottom: 1px solid var(--line); padding-bottom: 7px; margin-bottom: 5px; }
  .bilans .naglowki .l, .bilans .naglowki .p { font-family: inherit; font-size: .86rem; font-weight: 700; }

  .wiad-box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
  .wiad-box pre {
    margin: 0 0 10px; font-family: "JetBrains Mono", monospace; font-size: .73rem; line-height: 1.7;
    white-space: pre-wrap; background: var(--surface-2); border-radius: 9px; padding: 12px 14px; max-height: 240px; overflow-y: auto;
  }
  .duzy-przycisk {
    font-family: inherit; font-size: .93rem; font-weight: 700; color: #fff; background: var(--accent);
    border: 0; border-radius: 11px; padding: 14px; cursor: pointer; width: 100%; margin-bottom: 8px;
  }
  .duzy-przycisk.szary { background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); }
  .duzy-przycisk.ok { background: var(--ink-soft); }


  /* --- ekran pomeczowy --- */
  .po-karta {
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 18px 20px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 13px;
  }
  .po-karta h3 { margin: 0; font-size: 1.02rem; font-weight: 700; }
  .po-karta .pod { font-size: .87rem; color: var(--muted); margin-top: -8px; line-height: 1.4; }

  .gole-rzad { display: flex; align-items: center; gap: 10px; }
  .gole-rzad button {
    font-family: inherit; font-size: 1.5rem; font-weight: 700; color: var(--ink-soft);
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
    width: 54px; height: 54px; cursor: pointer; flex: none;
  }
  .gole-rzad .ile {
    flex: 1; text-align: center; font-family: "Bricolage Grotesque", sans-serif;
    font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums;
  }
  .gole-rzad .ile small { display: block; font-size: .7rem; font-weight: 600; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }

  .sezon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .kafel {
    background: var(--surface-2); border-radius: 11px; padding: 12px 8px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
  }
  .kafel .v {
    font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.55rem;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  }
  .kafel .p { font-size: .72rem; color: var(--muted); }

  .oceniany { border-top: 1px dashed var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 9px; }
  .oceniany:first-of-type { border-top: 0; padding-top: 0; }
  .oceniany .kto2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1rem; }
  /* Karta po wysłaniu — do czytania, nie do klikania. Zielona ramka mówi
     „zrobione” szybciej niż jakiekolwiek zdanie. */
  .po-karta.zamknieta { border-color: var(--accent); background: var(--accent-soft); }
  .po-karta.zamknieta h3 { color: var(--accent); }
  .po-karta.zamknieta .kafel { background: var(--surface); }
  .oceniany.oddana { gap: 5px; }
  .oceniany .noty { display: flex; flex-wrap: wrap; gap: 7px; }
  .oceniany .nota {
    font-family: "JetBrains Mono", monospace; font-size: .68rem; letter-spacing: .04em;
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
    padding: 5px 11px; color: var(--muted);
  }
  .oceniany .nota strong { color: var(--ink); font-size: .82rem; }

  /* Przeliczanie ocen: pięć kolumn — nazwisko i cztery pozycje. */
  .przel-glowka, .przel-wiersz {
    display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 6px; align-items: center;
  }
  .przel-glowka {
    font-family: "JetBrains Mono", monospace; font-size: .62rem; letter-spacing: .08em;
    color: var(--muted); padding: 0 0 6px; text-align: center;
  }
  .przel-wiersz {
    border-top: 1px solid var(--line); padding: 9px 0; font-size: .8rem;
    text-align: center; cursor: pointer;
  }
  .przel-wiersz.wybrany { background: var(--accent-soft); border-radius: 8px; }
  .przel-wiersz .kto {
    text-align: left; font-weight: 600; font-size: .88rem;
    display: flex; align-items: center; gap: 7px;
  }
  .przel-wiersz input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }
  .przel-bez { color: var(--muted); font-variant-numeric: tabular-nums; }
  .przel-zmiana {
    font-family: "JetBrains Mono", monospace; font-size: .68rem;
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .przel-zmiana b { font-size: .8rem; }
  .przel-zmiana.gora { color: var(--accent); }
  .przel-zmiana.dol  { color: var(--no); }

  .suwak-rzad { display: grid; grid-template-columns: 62px 1fr 34px; gap: 10px; align-items: center; }
  .suwak-rzad .et {
    font-family: "JetBrains Mono", monospace; font-size: .66rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted);
  }
  .suwak-rzad .wart {
    font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.05rem;
    text-align: right; font-variant-numeric: tabular-nums;
  }
  input[type=range] { width: 100%; accent-color: var(--accent); height: 26px; }

  .wynik-form { display: grid; grid-template-columns: 1fr 26px 1fr; gap: 10px; align-items: center; }
  .wynik-form input {
    font-family: "Bricolage Grotesque", sans-serif; font-size: 1.8rem; font-weight: 800;
    text-align: center; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px;
    background: var(--surface); color: var(--ink); width: 100%;
  }
  .wynik-form .vs { text-align: center; color: var(--muted); font-family: "JetBrains Mono", monospace; }
  .wynik-form .n { border-color: var(--blue-t); }
  .wynik-form .c { border-color: var(--red-t); }


  /* --- karta zawodnika --- */
  .karta-naglowek { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
  .karta-naglowek h1 { margin: 0; }
  .karta-naglowek .sub { font-size: .88rem; color: var(--muted); font-family: "JetBrains Mono", monospace; }

  .duze-kafle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
  .duzy-kafel {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  }
  .duzy-kafel .v {
    font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 2rem;
    letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1;
  }
  .duzy-kafel .p { font-size: .74rem; color: var(--muted); }
  .duzy-kafel.gole .v { color: var(--accent); }
  .duzy-kafel.asysty .v { color: var(--blue-t); }

  .bilansik {
    display: flex; gap: 7px; margin-bottom: 12px;
    font-family: "JetBrains Mono", monospace; font-size: .72rem;
  }
  .bilansik span {
    flex: 1; text-align: center; padding: 9px 4px; border-radius: 9px;
    background: var(--surface-2); color: var(--muted);
  }
  .bilansik b { display: block; font-size: 1.05rem; font-family: "Bricolage Grotesque", sans-serif; color: var(--ink); }
  .bilansik .w b { color: var(--accent); }
  .bilansik .p b { color: var(--no); }

  .wyciag { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  .wyciag table { border-collapse: collapse; width: 100%; font-size: .88rem; }
  .wyciag th {
    font-family: "JetBrains Mono", monospace; font-size: .62rem; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); background: var(--surface-2);
    padding: 9px 8px; text-align: center;
  }
  .wyciag th:first-child { text-align: left; padding-left: 14px; }
  .wyciag td { padding: 10px 8px; border-top: 1px solid var(--line); text-align: center; font-variant-numeric: tabular-nums; }
  .wyciag td:first-child { text-align: left; padding-left: 14px; font-weight: 600; }
  .wyciag td.pusto { color: var(--muted); }
  .rez {
    display: inline-block; width: 20px; height: 20px; line-height: 20px; border-radius: 6px;
    font-family: "JetBrains Mono", monospace; font-size: .68rem; font-weight: 600;
  }
  .rez.W { background: var(--accent-soft); color: var(--accent); }
  .rez.P { background: var(--no-soft); color: var(--no); }
  .rez.R { background: var(--surface-2); color: var(--muted); }

  /* --- panel admina --- */
  .panel { padding-top: 22px; }
  .panel h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
  .panel .pod { font-size: .92rem; color: var(--ink-soft); margin-bottom: 18px; }
  .pin-form { display: flex; gap: 8px; }
  .pin-form input {
    flex: 1; font-family: "JetBrains Mono", monospace; font-size: 1.3rem; letter-spacing: .3em;
    text-align: center; padding: 14px; border: 1.5px solid var(--line); border-radius: 12px;
    background: var(--surface); color: var(--ink);
  }
  .pin-form button {
    font-family: inherit; font-weight: 700; font-size: .95rem; color: #fff;
    background: var(--accent); border: 0; border-radius: 12px; padding: 0 22px; cursor: pointer;
  }
  .mecz-wiersz {
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    padding: 14px 16px; margin-bottom: 9px; display: flex; flex-direction: column; gap: 8px;
  }
  .mecz-wiersz .gl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .mecz-wiersz .dt { font-weight: 700; font-size: .99rem; }
  .mecz-wiersz .sub { font-size: .85rem; color: var(--muted); font-family: "JetBrains Mono", monospace; }
  .plakietka {
    font-family: "JetBrains Mono", monospace; font-size: .62rem; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  }
  .plakietka.zaplanowany { background: var(--surface-2); color: var(--muted); }
  .plakietka.otwarty { background: var(--accent-soft); color: var(--accent); }
  .plakietka.zamkniety { background: var(--no-soft); color: var(--no); }
  .plakietka.odwolany { background: var(--warn-soft); color: var(--warn); }
  .mecz-wiersz .akcje { display: flex; gap: 7px; flex-wrap: wrap; }
  .mecz-wiersz .akcje button {
    font-family: "JetBrains Mono", monospace; font-size: .72rem; color: var(--ink-soft);
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
    padding: 8px 12px; cursor: pointer;
  }
  .mecz-wiersz .akcje button.ok { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
  .swieto-info { font-size: .84rem; color: var(--warn); font-family: Georgia, "Times New Roman", serif; }

  /* -------------------------------------------------------- zarządzanie
     Ekrany, które przejęły robotę arkusza: ustawienia, terminarz, pary,
     dane zawodnika. Wszystkie mają ten sam kształt — etykieta, pole, opis
     pod spodem — więc wystarczy jeden zestaw reguł. */
  .ust-wiersz { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .ust-wiersz:last-of-type { border-bottom: none; }
  .ust-pole { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
  .ust-pole input, .ust-pole select { flex: 1; min-width: 0; }
  .ust-pole button { flex: 0 0 auto; }
  .ust-opis { font-size: .78rem; line-height: 1.45; color: var(--muted); margin-top: 5px; }

  /* Wiersz pól, który na telefonie zawija się sam zamiast uciekać w bok. */
  .cykl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .cykl input, .cykl select { flex: 1 1 120px; min-width: 0; }

  .ust-wiersz input, .ust-wiersz select, .cykl input, .cykl select {
    padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px;
    font: inherit; font-size: .95rem; background: var(--surface); color: var(--ink);
  }
  .ust-wiersz input:focus, .cykl input:focus,
  .ust-wiersz select:focus, .cykl select:focus {
    outline: 2px solid var(--accent); outline-offset: -1px;
  }

  .przelacznik { display: flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--ink-soft); }
  .przelacznik input { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--accent); }