/* PIĘCIOBÓJ — BOLD ARCADE: jasny KREM / ciemny GRAFIT NEON */

/* ===== CZCIONKA MARKI =====
   Nunito, osadzona lokalnie (licencja SIL OFL). Trzymamy pliki u siebie,
   a nie z serwerów Google, z dwóch powodów: gra działa offline, a ładowanie
   z CDN przekazywałoby adresy IP graczy stronie trzeciej.
   Zestaw zawężony do znaków, których używamy — 3 wagi w 25 KB łącznie. */
@font-face{font-family:'Nunito';src:url('fonty/nunito-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito';src:url('fonty/nunito-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito';src:url('fonty/nunito-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

:root{
  --font:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;
  --bg1:#fdf3d7;--bg2:#f9e9bd;
  --ink:#3d372a;--accent:#f77f00;--accsh:#c96400;--acctxt:#fff;
  --ok:#23a559;--okbg:#e9f6ec;
  --card:#ffffff;--cardsh:#e6ddc4;
  --line:#e6ddc4;--soft:#f6efd9;--soft2:#f3ecd6;--dash:#d8cda6;
  --logosh:#e8d69e;--shadow:rgba(64,58,40,.10)}
[data-theme="dark"]{
  --bg1:#23252e;--bg2:#17181f;
  --ink:#f0f0f4;--accent:#ff9f1c;--accsh:#c97a00;--acctxt:#1f2027;
  --ok:#57d98a;--okbg:#1e3328;
  --card:#2c2e3a;--cardsh:#181a22;
  --line:#3a3d4c;--soft:#262833;--soft2:#33364a;--dash:#4a4e63;
  --logosh:#000;--shadow:rgba(0,0,0,.45)}
*{box-sizing:border-box;margin:0;padding:0;font-family:var(--font);-webkit-tap-highlight-color:transparent}
/* iOS nadaje przyciskom bez jawnego koloru systemowy błękit — stąd niebieskie
   cyfry w CYFERKACH na iPhonie przy czarnych na komputerze. Ustawiamy raz dla
   wszystkich pól formularza; klasy z własnym kolorem (.btn.primary) i tak wygrywają. */
button,input,select,textarea{color:var(--ink)}
/* Przyciski bez własnego tła dostawały od przeglądarki jasne tło systemowe.
   W ciemnym motywie dawało to jasny znak na jasnym tle — ikony znikały. */
/* margin-left:auto, a nie samo space-between na .topbar — w aplikacji link
   „‹ piecioboj.pl" jest ukryty, więc ikony zostawały jedynym dzieckiem paska
   i space-between wypychało je na LEWĄ krawędź. Automatyczny margines trzyma
   je przy prawej niezależnie od tego, co stoi obok. */
.icons{display:flex;gap:6px;align-items:center;margin-left:auto}
.icons button{background:transparent;border:none;padding:6px;border-radius:10px;cursor:pointer;color:var(--ink);opacity:.75;line-height:0;transition:.12s}
.icons button:hover{opacity:1;background:var(--soft2)}
.icons button:active{transform:scale(.92)}
body{background:linear-gradient(165deg,var(--bg1),var(--bg2)) fixed;color:var(--ink);min-height:100vh;display:flex;justify-content:center;padding:14px 10px;touch-action:manipulation}
.app{width:100%;max-width:440px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.topbar h1{font-size:1.25rem;letter-spacing:3px;font-weight:800;text-shadow:0 2px 0 var(--logosh)}
/* Powrót do menu. Wcześniej była to szara strzałka z tekstem na 60%
   krycia — wyglądała jak podpis, nie jak przycisk, i gracze jej nie
   widzieli. Teraz to pełnoprawny kafelek w języku reszty gry: logo,
   nazwa i strzałka, na białym tle z dolną krawędzią jak w kartach. */
.topbar .back{display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;color:var(--ink);font-weight:800;font-size:.76rem;
  letter-spacing:.3px;background:var(--card);
  border-bottom:3px solid var(--cardsh);border-radius:99px;
  padding:5px 12px 5px 9px;transition:transform .1s;flex:none}
.topbar .back:active{transform:translateY(2px)}
.topbar .back img{width:19px;height:19px;flex:none;display:block}
.topbar .back svg{width:13px;height:13px;flex:none;opacity:.55}
.date{font-size:.7rem;opacity:.5;margin:6px 0 10px;letter-spacing:1px;text-transform:uppercase}
.prompt{background:var(--card);color:var(--ink);border-radius:14px;border-bottom:4px solid var(--cardsh);border-left:6px solid var(--accent);padding:11px 14px;margin-bottom:12px;animation:pop .3s ease}
.prompt b{display:block;font-size:.95rem;margin-bottom:2px}
.prompt span{font-size:.75rem;opacity:.7}
.meta{display:flex;justify-content:space-between;align-items:center;margin:10px 0;font-size:.85rem;opacity:.85}
.meta i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ink);margin:0 2px}
.btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
/* Nagłówek stanu rundy + kropki postępu — używane w pięciu grach rundowych
   (Błysk, Intruz, Mapa, Oko, Szlak). Wcześniej każda miała własną, osobno
   wpisaną kopię tych reguł; jedna (Mapa) była nieznacznie inna
   (.9rem/800 zamiast .85rem/700), więc jej nagłówek wyglądał ciut grubiej
   niż w resztę gier bez żadnego uzasadnienia. Jedna definicja = gwarancja,
   że nowa gra rundowa dziedziczy to samo bez kopiowania. */
.stage{text-align:center;font-size:.85rem;font-weight:700;margin-bottom:10px;min-height:1.4em}
.stage small{display:block;font-size:.7rem;opacity:.55;font-weight:600}
.progress{display:flex;gap:6px;justify-content:center;margin-bottom:10px}
.pdot{width:12px;height:12px;border-radius:50%;background:var(--line)}
.pdot.done{background:var(--ok)}
.pdot.now{background:var(--accent)}
.btn{border:none;background:var(--card);border-bottom:4px solid var(--cardsh);border-radius:16px;padding:11px 20px;min-height:44px;font-size:.88rem;font-weight:800;cursor:pointer;color:var(--ink);transition:transform .08s;box-shadow:0 2px 8px var(--shadow)}
.btn.primary{background:var(--accent);color:var(--acctxt);border-bottom-color:var(--accsh)}
.btn:active{transform:translateY(3px);border-bottom-width:1px}
.btn:disabled{opacity:.35;cursor:default}
/* ===== SIATKA AKCJI PO ZAKOŃCZENIU GRY =====
   Akcja główna („Następna gra" albo „Zobacz wynik dnia") zajmuje cały
   rząd, trzy pomocnicze stoją pod nią w równych kafelkach.

   Wcześniej wszystkie cztery były jednakowe w układzie 2×2 i zabierały
   około jednej trzeciej karty, konkurując z samym wynikiem. Kafelków nie
   zamieniamy jednak na linki tekstowe: na telefonie liczy się rozmiar
   celu dotyku, a 64 px to minimum, poniżej którego trafia się w sąsiada.
   Wypełnia je P5.bindNastepna(). */
.btn-siatka{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
            grid-auto-rows:1fr;margin-top:12px}
.btn-siatka .btn{width:100%;margin:0;padding:12px 8px;min-height:64px;
                 display:flex;flex-direction:column;align-items:center;
                 justify-content:center;gap:5px;font-size:.78rem;
                 line-height:1.25;text-align:center;text-decoration:none}
/* akcja główna przez całą szerokość, ikona obok tekstu zamiast nad nim */
.btn-siatka .btn.primary{grid-column:1/-1;flex-direction:row;min-height:52px;
                         gap:8px;font-size:.9rem}
/* ikona nie może się kurczyć ani ciągnąć — jest osobnym wierszem kafelka */
.btn-siatka .btn svg{flex:none;vertical-align:0}

/* ===== EKRAN WYNIKU (wspólny dla wszystkich gier) =====
   Buduje go P5.koniecGry(). Kolor bierze z gry przez zmienną --gk,
   ustawianą na karcie w JS — dzięki temu jeden arkusz obsługuje
   dziesięć gier i oba motywy. */
.wyn-gra{font-size:.7rem;letter-spacing:3px;font-weight:800;opacity:.6;
         text-transform:uppercase}
.wyn-ring{display:block;margin:2px auto 0;width:132px;height:132px}
.wyn-ring .tor{stroke:var(--soft2)}
.wyn-ring .luk{stroke:var(--gk);transition:stroke-dashoffset .9s ease}
.wyn-ring .lb{fill:var(--ink);font-weight:800}
.wyn-ring .ls{fill:var(--ink);opacity:.5;font-weight:700}
/* Kary jako żetony zamiast jednego sklejonego wzoru. Zero się nie
   pokazuje — „− 0 (podpowiedź)" to był czysty szum w najgęstszej
   linijce karty. Filtruje je P5.koniecGry(). */
.wyn-zetony{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;
            margin:8px 0 2px}
.wyn-zeton{background:var(--soft);border-radius:20px;padding:3px 10px;
           font-size:.72rem;font-weight:700;opacity:.85}
.wyn-staty{display:grid;grid-template-columns:repeat(3,1fr);
           border-top:1px solid var(--line);border-bottom:1px solid var(--line);
           margin:10px 0 0;padding:9px 0}
.wyn-staty>div+div{border-left:1px solid var(--line)}
.wyn-staty b{display:block;font-size:1.02rem;font-weight:800}
.wyn-staty span{font-size:.66rem;opacity:.55;font-weight:700}
.wyn-staty .traf{color:var(--ok)}
.wyn-pct{font-size:.84rem;font-weight:800;margin:9px 0 0;color:var(--gk)}
.wyn-pochwala{font-size:.74rem;font-weight:700;color:var(--ink);opacity:.55;
              margin-top:2px}
.toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg1);padding:9px 18px;border-radius:10px;font-size:.85rem;opacity:0;pointer-events:none;transition:.25s;z-index:90}
.toast.show{opacity:1}
.modal{position:fixed;inset:0;background:rgba(40,35,20,.5);display:none;align-items:flex-start;justify-content:center;padding:20px;z-index:70;overflow-y:auto}
[data-theme="dark"] .modal{background:rgba(0,0,0,.65)}
.modal.show{display:flex}
.card{background:var(--card);color:var(--ink);border-radius:18px;border-bottom:5px solid var(--cardsh);padding:24px 20px;max-width:370px;width:100%;text-align:center;animation:pop .3s ease;margin:auto 0;box-shadow:0 14px 44px var(--shadow)}
.card h2{margin-bottom:4px;font-weight:800;letter-spacing:1px}
.score-big{font-size:2.3rem;font-weight:800;color:var(--accent);margin:6px 0}
.score-detail{font-size:.78rem;opacity:.7;margin-bottom:8px}
.card p{font-size:.85rem;opacity:.75;margin-bottom:4px}
.card .btn{margin:8px 3px 0}
/* ===== SIATKA PRÓB (buduje ją P5.siatkaKolek) =====
   Kółka zamiast emoji-kwadracików: te ostatnie rysował system, więc na
   każdym telefonie wyglądały inaczej i odstawały od reszty interfejsu.
   Biała obwódka jak przy kropkach pasa dnia — bez niej ciemne kółka
   zlewają się z tłem karty w motywie nocnym. */
.proby{display:flex;flex-direction:column;gap:5px;align-items:center;margin:10px 0}
.proba{display:flex;align-items:center;gap:8px}
.proba b{font-size:.7rem;font-weight:800;opacity:.45;min-width:14px;text-align:right}
.proba span{display:flex;gap:5px}
.proba i{width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 1.5px var(--card)}
footer{text-align:center;font-size:.66rem;opacity:.45;margin-top:14px;line-height:1.5}
@keyframes pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.shake{animation:shake .35s ease}