/* FESTIVAL JAK APLIKACJA (8.10.2026 podgląd właściciela, od 9.10.2026 dla wszystkich). Serwer dokleja ten arkusz
   stronom Festivalu według przełącznika config.FESTIVAL_APLIKACJA_DLA (każdemu albo tylko właścicielowi), razem
   z festival-aplikacja.js, który ustawia klasę fa-on na <html>. Każda reguła ma
   przedrostek html.fa-on albo identyfikator #fa-..., żeby nie przejęła elementu o tej samej nazwie gdzie indziej.
   --fa-dol to wysokość dolnego paska (na komputerze: pływającego doku) razem z marginesem. */
html.fa-on{--fa-zielony:#4e9a06;--fa-zielony2:#7cb518;--fa-tusz:#0f172a;--fa-szary:#64748b;--fa-linia:#e6eaf0;
  --fa-dol:calc(64px + env(safe-area-inset-bottom,0px))}
@media(min-width:821px){html.fa-on{--fa-dol:92px}}
html.fa-on body{padding-bottom:calc(var(--fa-dol) + 34px)}   /* +24 px: okrągłe logo w środku paska wystaje nad pasek */
/* IPHONE: serwer dopisuje viewport-fit=cover na stronach z paskiem (festival_aplikacja.viewport_cover), więc
   env(safe-area-inset-*) ma prawdziwe wartości: pasek odsuwa ikony od kreski „home”, a w poziomie treść strony od
   wycięcia aparatu (w pionie te boczne wcięcia są zerowe, czyli nic się nie zmienia). Strony nie mają własnego
   poziomego paddingu na body, więc ta reguła niczego im nie nadpisuje. */
html.fa-on body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
/* PASEK POD OKNAMI STRONY (pilne zgłoszenie właściciela 9.10.2026, iPhone: pasek leżał na arkuszu „Do zatwierdzenia”
   i ucinał przyciski ostatniej pozycji). Z-index 1150: nad treścią i mapami (Leaflet do 1000), pod oknami (zgody 1200,
   dymki 1350, „dopełnij” 1360, pasek grupy 1400 i wyżej). Okna z niższym z-indeksem (kolejka 240, zgody 260) i każde
   okno sięgające dołu ekranu chowają pasek klasą fa-okno (festival-aplikacja.js, jestOkno). Gdy otwarty jest NASZ ekran
   (fa-blokada), pasek idzie nad jego przyciemnienie, bo jego zakładki przełączają ekrany. */
html.fa-on.fa-okno:not(.fa-blokada) #fa-pasek{display:none}
html.fa-on.fa-blokada,html.fa-on.fa-blokada body{overflow:hidden}

/* ── DOLNY PASEK ─────────────────────────────────────────────────────────────────────────────────────── */
#fa-pasek{position:fixed;left:0;right:0;bottom:0;z-index:1150;display:flex;align-items:stretch;
  justify-content:space-between;height:calc(62px + env(safe-area-inset-bottom,0px));
  padding:0 4px env(safe-area-inset-bottom,0px);background:rgba(255,255,255,.97);border-top:1px solid var(--fa-linia);
  box-shadow:0 -6px 22px rgba(15,23,42,.07);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  font:700 11px/1.1 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--fa-szary);
  -webkit-tap-highlight-color:transparent;box-sizing:border-box}
#fa-pasek *{box-sizing:border-box}
#fa-pasek .fa-zak{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;
  height:62px;padding:0;border:0;background:none;color:#475569;font:inherit;text-decoration:none;cursor:pointer;position:relative}
#fa-pasek .fa-zak svg{width:27px;height:27px;flex:0 0 auto}
#fa-pasek .fa-zak.fa-tu{color:var(--fa-tusz)}
#fa-pasek .fa-zak.fa-tu svg{stroke-width:2.6}
#fa-pasek .fa-zak.fa-tu::after{content:"";position:absolute;bottom:7px;left:50%;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:var(--fa-zielony)}
#fa-pasek .fa-zak:focus-visible,#fa-pasek .fa-srodek:focus-visible{outline:2px solid var(--fa-zielony2);outline-offset:-4px;border-radius:12px}
#fa-pasek .fa-srodek{flex:0 0 78px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;
  text-decoration:none;position:relative}
#fa-pasek .fa-kolo{width:62px;height:62px;border-radius:50%;background:#fff;margin-top:-26px;display:flex;align-items:center;
  justify-content:center;box-shadow:0 0 0 4px #fff;border:2.5px solid var(--fa-zielony2);overflow:hidden}
#fa-pasek .fa-srodek.fa-tu .fa-kolo{border-color:var(--fa-zielony)}
/* CIEŃ I POŚWIATA KOŁA NA OSOBNYCH WARSTWACH (11.10.2026, szybkość na telefonie). Dawniej koło miało cały cień w jednym
   box-shadow, a co 9 s animowało ten box-shadow (fa-kolo-swiatlo niżej). Animacji cienia przeglądarka nie odda kompozytorowi:
   na każdej stronie Festivalu, u każdego, wątek główny liczył styl i malował koło w każdej klatce, bez końca (w Chrome
   z procesorem 4 razy wolniejszym ok. 300 do 1700 ms pracy na każde 4 s spoczynku). Teraz te same cienie w tej samej
   kolejności: biała obwódka 4 px na samym kole, zielony cień pod spodem na ::before (to samo pudełko 62 px), a zielona
   obwódka i poświata na ::after większym o 4 px z każdej strony (obwódka od 4 do 9 px, jak dawne 9 px spod białej 4 px).
   Poświata gaśnie i zapala się samą przezroczystością, którą przesuwa kompozytor. Stan spoczynku i szczyt błysku
   wyglądają jak dawniej; przejście (ok. 1,3 s co 9 s) jest przenikaniem zamiast przeliczania cienia. */
#fa-pasek .fa-srodek::before,#fa-pasek .fa-srodek::after{content:"";position:absolute;left:50%;border-radius:50%;pointer-events:none}
#fa-pasek .fa-srodek::before{bottom:10px;width:62px;height:62px;margin-left:-31px;box-shadow:0 8px 22px rgba(78,154,6,.38)}
#fa-pasek .fa-srodek::after{bottom:6px;width:70px;height:70px;margin-left:-35px;opacity:0;
  box-shadow:0 0 0 5px rgba(124,181,24,.45),0 0 26px 2px rgba(124,181,24,.55)}
#fa-pasek .fa-srodek.fa-tu::after{opacity:1;box-shadow:0 0 0 3px rgba(124,181,24,.35)}
#fa-pasek .fa-srodek:active::before,#fa-pasek .fa-srodek:active::after{transform:scale(.96)}
#fa-pasek .fa-kolo img{width:50px;height:50px;object-fit:contain;display:block}
#fa-pasek .fa-srodek:active .fa-kolo{transform:scale(.96)}
/* OKRĄGŁE LOGO ŻYJE (9.10.2026, właściciel: „żeby kręciło się co jakiś czas i błyskało przejście takie świetlne”).
   Co 9 s: logo obraca się raz jak moneta, przez koło przechodzi pas światła, a obwódka na chwilę świeci. Reszta czasu
   spokój, żeby nie męczyło. Kto ma w telefonie „ogranicz ruch”, nie dostaje animacji. */
#fa-pasek .fa-kolo{position:relative}
#fa-pasek .fa-kolo img{animation:fa-kolo-obrot 9s ease-in-out 3s infinite;backface-visibility:visible}
#fa-pasek .fa-kolo::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.95) 50%,transparent 100%);transform:translateX(-80%) skewX(-18deg);
  animation:fa-kolo-blysk 9s ease-in-out 3s infinite}
#fa-pasek .fa-srodek:not(.fa-tu)::after{animation:fa-kolo-swiatlo 9s ease-in-out 3s infinite}
@keyframes fa-kolo-obrot{0%{transform:perspective(200px) rotateY(0)}9%{transform:perspective(200px) rotateY(360deg)}100%{transform:perspective(200px) rotateY(360deg)}}
@keyframes fa-kolo-blysk{0%,9%{transform:translateX(-80%) skewX(-18deg)}17%{transform:translateX(420%) skewX(-18deg)}100%{transform:translateX(420%) skewX(-18deg)}}
@keyframes fa-kolo-swiatlo{0%,8%,22%,100%{opacity:0}14%{opacity:1}}
@media(prefers-reduced-motion:reduce){#fa-pasek .fa-kolo img,#fa-pasek .fa-kolo::after,#fa-pasek .fa-srodek::after{animation:none !important}}
#fa-pasek .fa-licz-pasek{position:absolute;top:9px;left:calc(50% + 4px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:#dc2626;color:#fff;font:900 10.5px/18px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;text-align:center;
  font-style:normal;display:none;box-shadow:0 0 0 2px #fff}
#fa-pasek .fa-licz-pasek.fa-jest{display:block}
#fa-pasek .fa-krop{position:absolute;top:13px;left:calc(50% + 8px);width:10px;height:10px;border-radius:50%;background:#dc2626;
  box-shadow:0 0 0 2px #fff;display:none}
#fa-pasek .fa-krop.fa-jest{display:block}
#fa-pasek .fa-av{width:29px;height:29px;border-radius:50%;background:var(--fa-zielony) center/cover;color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:900;flex:0 0 auto}
#fa-pasek .fa-zak.fa-tu .fa-av{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fa-tusz)}
/* KOMPUTER: ten sam pasek jako pływający dok na dole, wyśrodkowany. Górny pasek zostaje bez zmian. */
@media(min-width:821px){
  #fa-pasek{left:50%;right:auto;bottom:16px;width:520px;max-width:calc(100vw - 32px);height:66px;padding:0 10px;
    transform:translateX(-50%);border:1px solid var(--fa-linia);border-radius:22px;box-shadow:0 14px 40px rgba(15,23,42,.16)}
  #fa-pasek .fa-zak{height:64px}
}

/* ── GÓRNY PASEK NA TELEFONIE (9.10.2026): logo, a po prawej same ikony: Zainstaluj (tylko bez aplikacji), Gala,
   Ranking i ☰. Awatara już tu nie ma (Profil jest w prawym dolnym rogu). Nic nie znika: dzwonek i lupa są w dolnym
   pasku, a menu konta, język, druga marka, koperta wiadomości, skrót kolejki właściciela i cała biała belka menu
   w menu ☰. ── */
@media(max-width:820px){
  html.fa-on #mp-bar{display:none!important}
  html.fa-on #unibar .ub-lang-box,html.fa-on #unibar .ub-marki,html.fa-on #unibar #ubFind,html.fa-on #unibar .ub-chip,
  html.fa-on #unibar .ub-menubox,html.fa-on #unibar #koperta-btn,html.fa-on #kolejka-btn,
  html.fa-on #unibar #dzwonek-box,html.fa-on #unibar #ubAcct{display:none!important}
}
#fa-gora{display:inline-flex;align-items:center;gap:4px;margin-left:6px;flex:0 0 auto}
#fa-gora .fa-g{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  margin:0;padding:0;border:0;border-radius:12px;background:none;color:var(--fa-tusz);cursor:pointer;text-decoration:none;
  -webkit-tap-highlight-color:transparent;flex:0 0 auto;box-sizing:border-box}
#fa-gora .fa-g:hover{background:#f4f6fa}
#fa-gora .fa-g:focus-visible{outline:2px solid var(--fa-zielony2);outline-offset:1px}
#fa-gora .fa-g svg{width:29px;height:29px;display:block}
#fa-gora .fa-g-menu svg{width:27px;height:27px}
#fa-gora .fa-g-inst{border:1.5px solid var(--fa-zielony2);background:#f3faeb;color:#3f7a12}
#fa-gora .fa-g-inst:hover{background:#e7f5d6}
#fa-gora .fa-g-inst svg{width:24px;height:24px}
#fa-gora .fa-g[hidden],#fa-gora .fa-g.fa-ciasno{display:none}
#fa-gora .fa-krop{position:absolute;top:6px;right:5px;width:10px;height:10px;border-radius:50%;background:#dc2626;
  box-shadow:0 0 0 2px #fff;display:none}
#fa-gora .fa-krop.fa-jest{display:block}
/* bez paska grupy: ikony same w prawym górnym rogu */
#fa-gora.fa-gora-sam{position:fixed;top:6px;right:8px;z-index:2147482800;padding:2px;border-radius:14px;background:rgba(255,255,255,.96);
  box-shadow:0 4px 16px rgba(15,23,42,.12)}
/* komputer: górny pasek ma swój „Ranking i paszport”, więc drugiego pucharu nie dokładamy */
@media(min-width:821px){#fa-gora .fa-g-rank{display:none}}
/* bardzo wąski telefon: logo paska grupy ustępuje ikonom (nazwa marki obok logo i tak jest schowana) */
@media(max-width:360px){html.fa-on #unibar .ub-nm1{display:none!important}#fa-gora{gap:2px;margin-left:2px}#fa-gora .fa-g{width:40px;height:40px}}

/* wyszukiwarka paska grupy otwarta z ekranu Odkrywaj stoi na samej górze, nad nim */
html.fa-on.fa-blokada #ub-find-panel{top:0!important}

/* ── ELEMENTY PRZYKLEJONE DO DOŁU STRONY idą nad pasek (pasek wyżej z-indeksem zasłoniłby przyciski) ── */
html.fa-on .wp-dolny,html.fa-on .wk-dolny,html.fa-on .pz-pasek,html.fa-on #filtersWrap{bottom:var(--fa-dol)!important}
html.fa-on #fltFab{bottom:calc(var(--fa-dol) + 14px)!important}

/* ── BANER CIASTECZEK NA TELEFONIE: pasek nad dolnym paskiem zamiast pół ekranu. Treść i oba przyciski bez
   zmian, przyciski tej samej wielkości obok siebie (oba wybory równie dostępne). ── */
@media(max-width:820px){
  html.fa-on #rodo{left:8px;right:8px;bottom:calc(var(--fa-dol) + 30px);flex-direction:column;flex-wrap:nowrap;align-items:stretch;
    gap:8px;padding:10px 12px;border:1px solid #243154;border-radius:14px;font-size:11.5px;line-height:1.35;
    box-shadow:0 10px 30px rgba(2,6,23,.35);z-index:2147482950}
  html.fa-on #rodo>span:first-child svg,html.fa-on #rodo>span:first-child i{display:none}
  html.fa-on #rodo .rodo-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  html.fa-on #rodo button{flex:1 1 0;min-width:0;padding:8px 6px;font-size:12.5px;line-height:1.2;box-sizing:border-box}
}
/* komputer: baner zostaje szerokim paskiem, tylko nad dokiem (inaczej dok zasłaniał środek treści zgody) */
@media(min-width:821px){html.fa-on #rodo{bottom:calc(var(--fa-dol) + 22px)}}

/* ── EKRAN (Kalendarz, Mapa, Konto): na telefonie cały ekran, na komputerze panel z prawej ─────────────── */
#fa-ekran{position:fixed;inset:0;z-index:2147483100;display:none;flex-direction:column;background:#f5f7fa;color:var(--fa-tusz);
  font:400 15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
#fa-ekran *{box-sizing:border-box}
#fa-ekran.fa-otwarty{display:flex}
#fa-tlo{position:fixed;inset:0;z-index:2147483090;background:rgba(15,23,42,.42);display:none}
#fa-tlo.fa-otwarty{display:block}
/* TELEFON: ekran kończy się nad dolnym paskiem, więc pasek zostaje widoczny i działa jak w aplikacji
   (druga zakładka przełącza ekran, ta sama go zamyka). Tło przyciemnienia jest tylko na komputerze. */
@media(max-width:820px){
  #fa-ekran{bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  #fa-tlo.fa-otwarty{display:none}
}
/* KOMPUTER: panel z prawej kończy się nad dokiem, a dok idzie nad przyciemnienie, więc zakładki działają także przy
   otwartym panelu (jak na telefonie). */
/* 16.10.2026 (właściciel: „jak wejdę w grupy … ucina to kółeczko”): pasek NAD ekranem (#fa-ekran 2147483100), bo kółko
   z logo wystaje 26 px ponad pasek i ekran kończący się równo nad paskiem przykrywał jego górę. Treść ekranu ma
   na telefonie 40 px zapasu na dole, więc kółko niczego nie zasłania. */
html.fa-on.fa-blokada #fa-pasek{z-index:2147483105}
@media(min-width:821px){
  #fa-ekran{inset:16px 16px calc(var(--fa-dol) + 8px) auto;width:460px;border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(2,6,23,.35)}
  #fa-ekran.fa-szeroki{width:min(1000px,calc(100vw - 32px))}
}
#fa-ekran .fa-glowa{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px 16px;
  background:#fff;border-bottom:1px solid var(--fa-linia)}
#fa-ekran .fa-glowa h2{flex:1 1 auto;margin:0;font-size:19px;font-weight:900;letter-spacing:-.01em;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
#fa-ekran .fa-x{flex:0 0 auto;width:44px;height:44px;border-radius:12px;border:1px solid var(--fa-linia);background:#f4f6fa;
  color:var(--fa-tusz);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
#fa-ekran .fa-tresc{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* MENU ☰ I EKRANY NA TELEFONIE (9.10.2026, zrzut właściciela): ostatnia pozycja chowała się pod okrągłym logo, które wystaje
   26 px nad dolny pasek. Odstęp na dole treści pozwala ją przewinąć nad logo. */
@media(max-width:820px){#fa-ekran .fa-tresc{padding-bottom:40px}}
#fa-gora .fa-g-kop svg{width:27px;height:27px}
#fa-gora .fa-licz-kop{position:absolute;top:3px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#dc2626;color:#fff;font:800 10px/17px system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;text-align:center;display:none}
#fa-gora .fa-licz-kop.fa-jest{display:block}
/* komputer: koperta jest już w pasku grupy, druga byłaby dublem */
@media(min-width:821px){#fa-gora .fa-g-kop{display:none !important}}
#fa-ekran .fa-przel{display:flex;gap:4px;padding:4px;margin:12px 16px 0;background:#e9eef4;border-radius:12px}
#fa-ekran .fa-przel button{flex:1 1 0;min-height:44px;border:0;background:none;padding:9px 6px;border-radius:9px;font:inherit;font-size:14px;
  font-weight:800;color:var(--fa-szary);cursor:pointer}
#fa-ekran .fa-przel button.fa-wyb{background:#fff;color:var(--fa-tusz);box-shadow:0 1px 4px rgba(15,23,42,.12)}

/* dni */
#fa-ekran .fa-dni{display:flex;gap:8px;overflow-x:auto;padding:12px 16px 10px;scrollbar-width:none}
#fa-ekran .fa-dni::-webkit-scrollbar{display:none}
#fa-ekran .fa-dzien{flex:0 0 auto;min-width:64px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 10px 7px;
  border-radius:14px;border:1px solid var(--fa-linia);background:#fff;color:var(--fa-tusz);font:inherit;cursor:pointer;position:relative}
#fa-ekran .fa-dzien .fa-dz-n{font-size:12.5px;font-weight:800;color:var(--fa-szary);white-space:nowrap}
#fa-ekran .fa-dzien .fa-dz-d{font-size:15px;font-weight:900}
#fa-ekran .fa-dzien .fa-dz-i{min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:#eaf7d9;color:#3f7a12;
  font-size:11.5px;font-weight:900;line-height:20px;text-align:center}
#fa-ekran .fa-dzien .fa-dz-i.fa-zero{background:#f1f5f9;color:#94a3b8}
#fa-ekran .fa-dzien.fa-wyb{background:var(--fa-zielony);border-color:var(--fa-zielony);color:#fff}
#fa-ekran .fa-dzien.fa-wyb .fa-dz-n{color:#e8f5d6}
#fa-ekran .fa-dzien.fa-wyb .fa-dz-i{background:#fff;color:var(--fa-zielony)}
#fa-ekran .fa-naglowek-dnia{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:4px 16px 6px}
#fa-ekran .fa-naglowek-dnia b{font-size:16px;font-weight:900}
#fa-ekran .fa-naglowek-dnia span{font-size:13px;color:var(--fa-szary);white-space:nowrap}
#fa-ekran .fa-lista{display:flex;flex-direction:column;gap:8px;padding:0 12px 24px}
#fa-ekran .fa-wyd{display:flex;gap:12px;align-items:center;padding:10px;border-radius:16px;background:#fff;border:1px solid var(--fa-linia);
  text-decoration:none;color:var(--fa-tusz);min-width:0}
#fa-ekran .fa-wyd:active{background:#f4f8ee}
#fa-ekran .fa-wyd img{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:0 0 auto;background:#e7edf6}
#fa-ekran .fa-wyd .fa-wt{flex:1 1 auto;min-width:0}
#fa-ekran .fa-wyd b{display:block;font-size:15px;font-weight:800;line-height:1.25;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#fa-ekran .fa-wyd .fa-gdzie{display:block;font-size:13px;color:var(--fa-szary);margin-top:2px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
#fa-ekran .fa-znaczki{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
#fa-ekran .fa-zn{font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;background:#f1f5f9;color:#475569;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
#fa-ekran .fa-zn.fa-fest{background:#eaf7d9;color:#3f7a12}
#fa-ekran .fa-zn.fa-trwa{background:#fff7e6;color:#a15c00}
#fa-ekran .fa-pusto{margin:18px 16px;padding:22px 16px;text-align:center;border-radius:16px;background:#fff;border:1px dashed #cbd5e1;
  color:var(--fa-szary);font-size:14px}
#fa-ekran .fa-pusto a,#fa-ekran .fa-ponow{display:inline-block;margin-top:10px;color:var(--fa-zielony);font-weight:800;
  text-decoration:none;border:0;background:none;font:inherit;font-size:14px;cursor:pointer}
#fa-ekran .fa-uwaga{margin:0 16px 14px;font-size:12px;color:#94a3b8}

/* mapa */
#fa-ekran .fa-mapa-box{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#fa-ekran #fa-mapa{flex:1 1 auto;min-height:260px;background:#e9eef4}
#fa-ekran .fa-filtry{position:absolute;top:10px;left:10px;right:10px;z-index:500;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
#fa-ekran .fa-filtry::-webkit-scrollbar{display:none}
#fa-ekran .fa-filtry button{flex:0 0 auto;border:1px solid var(--fa-linia);background:#fff;color:var(--fa-tusz);font:inherit;font-size:13px;
  font-weight:800;padding:8px 14px;min-height:44px;border-radius:999px;box-shadow:0 2px 8px rgba(15,23,42,.12);cursor:pointer;white-space:nowrap}
#fa-ekran .fa-filtry button.fa-wyb{background:var(--fa-zielony);border-color:var(--fa-zielony);color:#fff}
#fa-ekran .fa-grupa{display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(78,154,6,.92);color:#fff;
  font:900 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;box-shadow:0 0 0 5px rgba(124,181,24,.35),0 4px 10px rgba(15,23,42,.25)}
#fa-ekran .fa-pin{width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--fa-zielony);
  border:3px solid #fff;box-shadow:0 3px 8px rgba(15,23,42,.35)}
#fa-ekran .fa-pin.fa-przybl{border-radius:50%;transform:none;background:rgba(245,158,11,.35);border:2px dashed #b45309;box-shadow:none}
#fa-ekran .fa-pin.fa-akt{background:#dc2626}
#fa-ekran .fa-karta{position:absolute;left:10px;right:10px;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:600;
  background:#fff;border-radius:18px;box-shadow:0 14px 40px rgba(2,6,23,.28);padding:12px;display:none}
#fa-ekran .fa-karta.fa-otwarty{display:block}
#fa-ekran .fa-karta .fa-uchwyt{width:40px;height:4px;border-radius:4px;background:#cbd5e1;margin:-2px auto 10px}
#fa-ekran .fa-karta .fa-wyd{border:0;padding:0}
#fa-ekran .fa-karta .fa-przybl-t{font-size:12px;color:#b45309;font-weight:700;margin:8px 0 0}
#fa-ekran .fa-karta .fa-przybl-t::first-letter{text-transform:uppercase}
#fa-ekran .fa-karta .fa-akcje{display:flex;gap:8px;margin-top:12px}
#fa-ekran .fa-akcje a{flex:1 1 0;text-align:center;padding:11px 8px;border-radius:12px;font-weight:900;font-size:14px;text-decoration:none}
#fa-ekran .fa-akcje .fa-szcz{background:var(--fa-zielony);color:#fff}
#fa-ekran .fa-akcje .fa-trasa{background:#f4f6fa;color:var(--fa-tusz);border:1px solid var(--fa-linia)}
#fa-ekran .fa-karta .fa-zamknij-karte{position:absolute;top:6px;right:6px;width:44px;height:44px;border-radius:12px;border:0;
  background:#f4f6fa;font-size:16px;cursor:pointer;color:var(--fa-tusz)}
#fa-ekran .leaflet-control-attribution{font-size:10px}

/* menu „Więcej” (lista jak „Menu” na Facebooku) */
#fa-ekran .fa-grupa-t{margin:16px 20px 6px;font-size:12px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#94a3b8}
#fa-ekran .fa-menu{margin:0 12px;border-radius:16px;background:#fff;border:1px solid var(--fa-linia);overflow:hidden}
#fa-ekran .fa-poz{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 14px;border:0;border-bottom:1px solid #eef2f7;
  background:none;color:var(--fa-tusz);font:inherit;font-size:15px;font-weight:650;text-align:left;text-decoration:none;cursor:pointer}
#fa-ekran .fa-poz:last-child{border-bottom:0}
#fa-ekran .fa-poz:active{background:#f4f8ee}
#fa-ekran .fa-poz .fa-ik{width:22px;height:22px;flex:0 0 auto;color:var(--fa-zielony)}
#fa-ekran .fa-poz .fa-pt{flex:1 1 auto;min-width:0}
#fa-ekran .fa-poz .fa-pw{font-size:13px;color:var(--fa-szary);font-weight:600}
#fa-ekran .fa-poz .fa-licz{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#dc2626;color:#fff;font-size:11px;
  font-weight:900;line-height:20px;text-align:center}
#fa-ekran .fa-poz .fa-strz{color:#cbd5e1;font-size:18px;line-height:1}
#fa-ekran .fa-poz.fa-czerw{color:#b91c1c}
#fa-ekran .fa-jezyki{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 12px}
#fa-ekran .fa-jezyki button{min-height:44px;border:1px solid var(--fa-linia);background:#fff;border-radius:12px;padding:8px 8px;font:inherit;font-size:13.5px;
  font-weight:700;text-align:left;cursor:pointer;color:var(--fa-tusz)}
#fa-ekran .fa-jezyki button.fa-wyb{border-color:var(--fa-zielony);background:#f3faeb}
#fa-ekran .fa-stopka{margin:18px 16px 28px;font-size:12px;color:#94a3b8;text-align:center}

/* ── ARKUSZ OD DOŁU (instalacja, komunikaty) ─────────────────────────────────────────────────────────── */
#fa-arkusz-tlo{position:fixed;inset:0;z-index:2147483140;background:rgba(15,23,42,.5);display:none}
#fa-arkusz-tlo.fa-otwarty{display:block}
#fa-arkusz{position:fixed;left:0;right:0;bottom:0;z-index:2147483150;display:none;max-height:92dvh;overflow-y:auto;background:#fff;
  color:var(--fa-tusz);border-radius:24px 24px 0 0;padding:10px 20px calc(18px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -20px 60px rgba(2,6,23,.3);font:400 15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;box-sizing:border-box}
#fa-arkusz *{box-sizing:border-box}
#fa-arkusz.fa-otwarty{display:block}
@media(min-width:821px){#fa-arkusz{left:50%;right:auto;width:460px;transform:translateX(-50%);bottom:24px;border-radius:24px}}
#fa-arkusz .fa-uchwyt{width:44px;height:5px;border-radius:5px;background:#d5dce5;margin:0 auto 14px}
#fa-arkusz .fa-ark-glowa{display:block}
#fa-arkusz .fa-ark-ikona{display:block;width:56px;height:56px;border-radius:15px;margin:0 0 12px;box-shadow:0 4px 14px rgba(15,23,42,.14);
  border:1px solid var(--fa-linia);background:#fff;object-fit:contain}
#fa-arkusz h3{margin:0;font-size:20px;line-height:1.25;font-weight:900;letter-spacing:-.01em}
#fa-arkusz .fa-ark-wyd{color:var(--fa-zielony)}
#fa-arkusz .fa-ark-pod{margin:6px 0 0;font-size:14px;color:var(--fa-szary);font-weight:600}
#fa-arkusz .fa-ark-kroki{margin:14px 0 0;font-size:13.5px;color:var(--fa-szary)}
#fa-arkusz .fa-korzysci{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
#fa-arkusz .fa-korzysci li{display:flex;gap:10px;font-size:15px;line-height:1.35}
#fa-arkusz .fa-korzysci li::before{content:"✓";flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:#eaf7d9;color:#3f7a12;
  font-size:12px;font-weight:900;line-height:20px;text-align:center;margin-top:1px}
#fa-arkusz details{margin:12px 0 0;border-top:1px solid #eef2f7;padding-top:10px}
#fa-arkusz summary{cursor:pointer;font-weight:800;color:var(--fa-zielony);font-size:14.5px;list-style:none}
#fa-arkusz summary::-webkit-details-marker{display:none}
#fa-arkusz summary::before{content:"▾ ";font-size:12px}
#fa-arkusz details[open] summary::before{content:"▴ "}
#fa-arkusz details .fa-korzysci{margin-top:10px}
#fa-arkusz .fa-przyciski{display:flex;gap:10px;margin-top:18px}
#fa-arkusz .fa-przyciski button,#fa-arkusz .fa-przyciski a{border:0;border-radius:14px;font:inherit;font-weight:900;cursor:pointer;
  text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center}
#fa-arkusz .fa-nie{flex:0 0 auto;padding:14px 16px;background:#f1f5f9;color:#334155;font-size:15px}
#fa-arkusz .fa-nie.fa-szer{flex:1 1 auto;font-size:16px}
#fa-arkusz .fa-tak{flex:1 1 auto;padding:15px 16px;background:linear-gradient(180deg,var(--fa-zielony2),var(--fa-zielony));color:#fff;
  font-size:17px;box-shadow:0 6px 18px rgba(78,154,6,.35)}
#fa-arkusz .fa-kroki{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column}
#fa-arkusz .fa-kroki li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #eef2f7;font-size:15px}
#fa-arkusz .fa-kroki li:last-child{border-bottom:0}
#fa-arkusz .fa-nr{width:28px;height:28px;border-radius:50%;background:var(--fa-zielony);color:#fff;font-weight:900;font-size:14px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
#fa-arkusz .fa-udost{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1.5px solid #2563eb;
  border-radius:6px;color:#2563eb;vertical-align:middle;margin:0 2px}
#fa-arkusz .fa-link{margin-top:12px;padding:10px 12px;border-radius:12px;background:#f4f6fa;border:1px solid var(--fa-linia);
  font-size:13px;color:#334155;word-break:break-all}
#fa-arkusz .fa-dopisek{margin:14px 0 0;font-size:12px;color:#94a3b8}

/* komunikat (po połączeniu konta, po instalacji) */
#fa-komunikat{position:fixed;left:50%;bottom:calc(var(--fa-dol) + 14px);z-index:2147483160;transform:translateX(-50%);
  max-width:min(460px,calc(100vw - 24px));padding:12px 16px;border-radius:14px;background:#0f172a;color:#fff;
  font:700 14px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;box-shadow:0 12px 30px rgba(2,6,23,.35);display:none}
#fa-komunikat.fa-otwarty{display:block}

/* POWIADOMIENIA PUSH (9.10.2026): treść zgody nad przyciskiem w arkuszu i pasek po otwarciu z powiadomienia */
#fa-arkusz .fa-pw-zgoda{margin:14px 0 0;padding:10px 12px;border-radius:12px;background:#f4f6fa;border:1px solid var(--fa-linia);
  font-size:13px;line-height:1.45;color:#334155}
#fa-arkusz .fa-pw-info{margin:14px 0 0;font-size:15px;line-height:1.45;color:#334155}
#fa-pw-pasek{position:fixed;left:50%;bottom:calc(var(--fa-dol) + 14px);z-index:2147483155;transform:translateX(-50%);
  width:min(460px,calc(100vw - 24px));padding:10px 10px 10px 14px;border-radius:14px;background:#0f172a;color:#fff;
  font:600 13.5px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;box-shadow:0 12px 30px rgba(2,6,23,.35);
  display:none;align-items:center;gap:10px}
#fa-pw-pasek.fa-otwarty{display:flex}
#fa-pw-pasek span{flex:1 1 auto}
#fa-pw-pasek button{flex:0 0 auto;border:0;border-radius:10px;padding:9px 12px;font:inherit;font-weight:800;cursor:pointer;
  background:#fff;color:#0f172a}
#fa-pw-pasek .fa-pw-x{background:transparent;color:#cbd5e1;padding:9px 8px}
@media(prefers-reduced-motion:no-preference){
  #fa-ekran.fa-otwarty{animation:faWjazd .18s ease-out}
  #fa-arkusz.fa-otwarty{animation:faArkusz .22s ease-out}
}
@keyframes faWjazd{from{opacity:.4;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes faArkusz{from{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}
@media(min-width:821px) and (prefers-reduced-motion:no-preference){
  #fa-arkusz.fa-otwarty{animation:faArkuszK .22s ease-out}
}
@keyframes faArkuszK{from{transform:translate(-50%,40px);opacity:.5}to{transform:translateX(-50%);opacity:1}}

/* ── ODKRYWAJ: wyszukiwarka, karty jak w feedzie, serduszko „Będę” ────────────────────────────────────── */
#fa-ekran .fa-pole-szukaj{display:flex;align-items:center;gap:10px;margin:12px 16px 0;min-height:48px;padding:0 16px;border:0;
  border-radius:14px;background:#e9eef4;color:var(--fa-szary);font:inherit;font-size:15px;text-align:left;cursor:pointer}
#fa-ekran .fa-pole-szukaj svg{width:20px;height:20px;flex:0 0 auto}
#fa-ekran .fa-pole-szukaj span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fa-ekran .fa-mapa-box{margin-top:12px}
#fa-ekran .fa-feed{display:flex;flex-direction:column;gap:14px;padding:12px 12px 28px}
#fa-ekran .fa-kw{position:relative;border-radius:18px;background:#fff;border:1px solid var(--fa-linia);overflow:hidden;
  box-shadow:0 2px 10px rgba(15,23,42,.05)}
#fa-ekran .fa-kw-link{display:block;text-decoration:none;color:var(--fa-tusz)}
#fa-ekran .fa-kw-foto{position:relative;display:block;aspect-ratio:16/9;background:#e7edf6}
#fa-ekran .fa-kw-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#fa-ekran .fa-kw-data{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;align-items:center;min-width:46px;
  padding:5px 8px;border-radius:12px;background:rgba(255,255,255,.95);color:var(--fa-tusz);font-size:11px;font-weight:800;
  text-transform:uppercase;line-height:1.1;box-shadow:0 2px 8px rgba(15,23,42,.18)}
#fa-ekran .fa-kw-data b{font-size:18px;font-weight:900}
#fa-ekran .fa-kw-tekst{display:block;padding:11px 64px 13px 14px}
#fa-ekran .fa-kw-tekst b{display:block;font-size:16px;font-weight:900;line-height:1.25}
#fa-ekran .fa-serce{position:absolute;right:8px;bottom:8px;width:48px;min-height:48px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;border:0;border-radius:14px;background:none;color:var(--fa-tusz);cursor:pointer;font:inherit}
#fa-ekran .fa-serce svg{width:27px;height:27px}
#fa-ekran .fa-serce.fa-on{color:#e11d48}
#fa-ekran .fa-serce.fa-on svg{fill:#e11d48}
#fa-ekran .fa-serce-n{font-size:11.5px;font-weight:800;color:var(--fa-szary);min-height:12px}
@media(prefers-reduced-motion:no-preference){#fa-ekran .fa-serce.fa-on svg{animation:faSerce .25s ease-out}}
@keyframes faSerce{from{transform:scale(.7)}60%{transform:scale(1.18)}to{transform:none}}

/* „pociągnij, żeby odświeżyć” */
#fa-ekran .fa-ptr{height:0;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;color:var(--fa-zielony);
  transition:height .15s ease}
#fa-ekran .fa-ptr svg{width:24px;height:24px;margin-bottom:8px;transition:transform .2s ease}
#fa-ekran .fa-ptr.fa-gotowe svg{transform:rotate(180deg)}

/* ── POWIADOMIENIA ────────────────────────────────────────────────────────────────────────────────── */
#fa-ekran .fa-przel-pow{margin:12px 12px 10px}
#fa-ekran .fa-pow-lista .fa-poz{align-items:flex-start;font-size:14.5px;font-weight:600;line-height:1.4}
#fa-ekran .fa-pow-lista .fa-poz.fa-nowe{background:#f3faeb}
#fa-ekran .fa-ik-img{width:24px;height:24px;border-radius:6px;object-fit:cover;display:block}
#fa-ekran .fa-pw-maly{display:block;font-size:12px;font-weight:800;color:var(--fa-szary);margin-top:2px}
#fa-ekran .fa-tekst-przycisk{display:block;margin:12px auto 24px;min-height:44px;padding:0 16px;border:0;background:none;
  color:var(--fa-szary);font:inherit;font-size:14px;font-weight:800;text-decoration:none;cursor:pointer;text-align:center}

/* ── PROFIL jak na Instagramie ─────────────────────────────────────────────────────────────────────── */
#fa-ekran .fa-prof{padding:16px 16px 12px;background:#fff;border-bottom:1px solid var(--fa-linia)}
#fa-ekran .fa-prof-gora{display:flex;align-items:center;gap:18px}
#fa-ekran .fa-prof-av-link{flex:0 0 auto;text-decoration:none;border-radius:50%;padding:3px;
  background:linear-gradient(135deg,var(--fa-zielony2),var(--fa-zielony))}
#fa-ekran .fa-prof-av{width:82px;height:82px;border-radius:50%;background:var(--fa-zielony) center/cover;color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:30px;font-weight:900;border:3px solid #fff}
#fa-ekran .fa-staty{flex:1 1 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
#fa-ekran .fa-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;border-radius:12px;
  text-decoration:none;color:var(--fa-tusz)}
#fa-ekran .fa-stat:active{background:#f4f8ee}
#fa-ekran .fa-stat b{font-size:19px;font-weight:900;line-height:1.2}
#fa-ekran .fa-stat span{font-size:12.5px;color:var(--fa-szary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#fa-ekran .fa-prof-nick{margin-top:12px;font-size:16px;font-weight:900}
#fa-ekran .fa-prof-imie{font-size:14px;color:var(--fa-szary)}
#fa-ekran .fa-glowny{display:flex;align-items:center;justify-content:center;margin-top:12px;min-height:44px;border-radius:12px;
  background:#eef2f6;color:var(--fa-tusz);font-weight:800;font-size:14.5px;text-decoration:none}
#fa-ekran .fa-siatka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:#fff}
#fa-ekran .fa-kafel{position:relative;display:block;aspect-ratio:1/1;background:#e7edf6;overflow:hidden;text-decoration:none}
#fa-ekran .fa-kafel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#fa-ekran .fa-kafel span{position:absolute;left:0;right:0;bottom:0;padding:16px 6px 5px;color:#fff;font-size:11.5px;font-weight:800;
  line-height:1.2;background:linear-gradient(transparent,rgba(0,0,0,.65));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fa-ekran .fa-pusto-maly{margin:12px 16px;padding:16px;font-size:13.5px}
#fa-ekran .fa-wiecej-t{margin:22px 20px 0;font-size:20px;font-weight:900}

/* ── GOŚĆ (9.10.2026): ikona osoby w pasku, „Zaloguj się” i „Załóż konto” w Profilu i w Powiadomieniach ───── */
#fa-pasek .fa-av.fa-av-gosc{background:#eef2f6;color:#475569;box-shadow:inset 0 0 0 1.5px #cbd5e1}
#fa-pasek .fa-av.fa-av-gosc svg{width:19px;height:19px}
#fa-ekran .fa-gosc-przyciski{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
#fa-ekran .fa-gosc-przyciski a{display:flex;align-items:center;justify-content:center;min-height:48px;margin:0;padding:8px 10px;
  border-radius:12px;font-weight:900;font-size:15px;line-height:1.2;text-decoration:none;text-align:center}
#fa-ekran .fa-gosc-przyciski .fa-glowny{background:linear-gradient(180deg,var(--fa-zielony2),var(--fa-zielony));color:#fff;border:0}
#fa-ekran .fa-gosc-przyciski .fa-drugi{background:#fff;color:var(--fa-tusz);border:1.5px solid var(--fa-zielony)}
#fa-ekran .fa-pow-gosc p{margin:8px 0 16px;color:var(--fa-tusz);font-weight:700;font-size:15px}
#fa-ekran .fa-pow-ik{display:inline-flex;width:44px;height:44px;color:var(--fa-zielony)}
#fa-ekran .fa-pow-ik svg{width:44px;height:44px}
#fa-ekran .fa-prof-gosc .fa-kp-rzad{margin-top:12px}

/* ── PROFIL: karty Gala i Ranking pod liczbami, znak gali przy ksywce, odnośnik „Menu” (9.10.2026) ─────────── */
#fa-ekran .fa-kp-rzad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:12px}
#fa-ekran .fa-kp{display:flex;align-items:center;gap:10px;min-height:66px;padding:10px 12px;border-radius:16px;border:1.5px solid;
  text-decoration:none;color:var(--fa-tusz);box-sizing:border-box;min-width:0}
#fa-ekran .fa-kp:active{transform:scale(.98)}
#fa-ekran .fa-kp>svg{width:36px;height:36px;flex:0 0 auto}
#fa-ekran .fa-kp-t{min-width:0}
#fa-ekran .fa-kp-t b{display:block;font-size:15px;font-weight:900;line-height:1.2}
#fa-ekran .fa-kp-s{display:block;font-size:12.5px;font-weight:800;color:#475569;margin-top:2px;line-height:1.25}
#fa-ekran .fa-kp-gala{background:#fbf6e6;border-color:#e8cf7e}
#fa-ekran .fa-kp-gala .fa-kp-s{color:#7a5b00}
#fa-ekran .fa-kp-rank{background:#fff8e1;border-color:#f5c542}
#fa-ekran .fa-kp-rank .fa-kp-s{color:#92400e}
#fa-ekran .fa-gala-znak{display:inline-flex;vertical-align:-6px;margin-left:4px}
#fa-ekran .fa-gala-znak svg{width:26px;height:26px}
#fa-ekran .fa-menu-link{margin:16px 12px 24px}
#fa-ekran .fa-menu-gosc{margin:12px 12px 0}

/* ── MENU ☰: wysuwa się z prawej; na górze kafelki Gala, Ranking i Zainstaluj ─────────────────────────────── */
#fa-ekran .fa-kafle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 12px 4px}
#fa-ekran .fa-kafle.fa-dwa{grid-template-columns:repeat(2,minmax(0,1fr))}
#fa-ekran .fa-kafel-m{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:88px;
  padding:10px 6px;border-radius:16px;border:1.5px solid;font:inherit;font-size:13.5px;font-weight:900;line-height:1.2;
  color:var(--fa-tusz);text-decoration:none;text-align:center;cursor:pointer;box-sizing:border-box;min-width:0}
#fa-ekran .fa-kafel-m svg{width:36px;height:36px;flex:0 0 auto}
#fa-ekran .fa-kafel-m:active{transform:scale(.97)}
#fa-ekran .fa-km-gala{background:#fbf6e6;border-color:#e8cf7e}
#fa-ekran .fa-km-rank{background:#fff8e1;border-color:#f5c542}
#fa-ekran .fa-km-inst{background:#f3faeb;border-color:var(--fa-zielony2);color:#3f7a12}
#fa-ekran .fa-km-inst svg{width:30px;height:30px}
@media(prefers-reduced-motion:no-preference){#fa-ekran.fa-otwarty.fa-z-prawej{animation:faZPrawej .2s ease-out}}
@keyframes faZPrawej{from{opacity:.4;transform:translateX(28px)}to{opacity:1;transform:none}}

/* ── POLECAJ (9.10.2026, zakładka do testów, tylko właściciel: przycisk .fa-g-polecaj i ekran #fa-pol powstają
   wyłącznie przy data-fa-polecaj od serwera, więc u każdego innego te reguły nie mają czego dotknąć). Prezent w górnym
   pasku z kółkiem, które co 2,5 s spokojnie świeci i przygasa; przy „ogranicz ruch” kółko stoi zapalone bez ruchu. ── */
#fa-gora .fa-g-polecaj{isolation:isolate}
#fa-gora .fa-g-polecaj svg{position:relative;z-index:1;width:28px;height:28px}
/* Kółko pulsuje samą transformacją i przezroczystością (11.10.2026, szybkość): dawniej animacja zmieniała też box-shadow,
   a tego przeglądarka nie odda kompozytorowi, więc wątek główny malował kółko w każdej klatce, bez końca (u właściciela na
   /ranking w Chrome z procesorem 4 razy wolniejszym prawie cały czas spoczynku). Te same dwa stany: ::before to tło
   i cienka obwódka spoczynku, ::after to mocniejsza obwódka z żółtą poświatą, która zapala się do szczytu i gaśnie. */
#fa-gora .fa-g-polecaj::before,#fa-gora .fa-g-polecaj::after{content:"";position:absolute;left:50%;top:50%;width:36px;height:36px;
  margin:-18px 0 0 -18px;border-radius:50%;pointer-events:none}
#fa-gora .fa-g-polecaj::before{background:radial-gradient(circle,rgba(251,191,36,.42) 0%,rgba(251,191,36,.16) 58%,rgba(251,191,36,0) 72%);
  box-shadow:0 0 0 1.5px rgba(225,29,72,.45);animation:fa-pol-puls 2.5s ease-in-out infinite}
#fa-gora .fa-g-polecaj::after{box-shadow:0 0 0 2px rgba(225,29,72,.85),0 0 14px 4px rgba(251,191,36,.6);opacity:0;
  animation:fa-pol-puls-blask 2.5s ease-in-out infinite}
@keyframes fa-pol-puls{0%,100%{transform:scale(.88);opacity:.7}50%{transform:scale(1.06);opacity:1}}
@keyframes fa-pol-puls-blask{0%,100%{transform:scale(.88);opacity:0}50%{transform:scale(1.06);opacity:1}}
@media(prefers-reduced-motion:reduce){#fa-gora .fa-g-polecaj::before{animation:none;transform:none;opacity:1;box-shadow:0 0 0 2px rgba(225,29,72,.6)}
  #fa-gora .fa-g-polecaj::after{animation:none;transform:none;opacity:0}}
/* telefon: z prezentem jest o jedną ikonę więcej (Zainstaluj, Gala, Polecaj, Ranking, koperta, ☰), a rząd i tak mieści się
   obok logo przy zwykłych rozmiarach ikon (sprawdza test_polecaj_zakladka.py przy 360, 375 i 390 px), więc rozmiary
   zostają takie same jak u wszystkich */

/* ekran „Polecaj”: link i przyciski na ciemnym polu (jak czarny pasek), statystyki, nagrody i zasady (Gala od 9.10.2026 pod cylindrem) */
#fa-ekran .fa-pol-gora{margin:12px 12px 0;padding:16px;border-radius:18px;background:#0f172a;color:#fff}
#fa-ekran .fa-pol-t{display:block;margin:0 0 8px;font-size:13px;font-weight:800;color:#cbd5e1}
#fa-ekran .fa-pol-link{display:block;width:100%;min-height:46px;margin:0;padding:10px 12px;border:1px solid #334155;border-radius:12px;
  background:#1e293b;color:#fff;font:inherit;font-size:16px;font-weight:700;text-overflow:ellipsis}
#fa-ekran .fa-pol-kop{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;margin-top:10px;padding:8px 12px;
  border:0;border-radius:14px;background:linear-gradient(180deg,var(--fa-zielony2),var(--fa-zielony));color:#fff;font:inherit;
  font-size:17px;font-weight:900;cursor:pointer}
#fa-ekran .fa-pol-kop.fa-ok{background:#166534}
#fa-ekran .fa-pol-kop:focus-visible,#fa-ekran .fa-pol-dziel a:focus-visible,#fa-ekran .fa-pol-dziel button:focus-visible{
  outline:2px solid #fbbf24;outline-offset:2px}
#fa-ekran .fa-pol-dziel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
#fa-ekran .fa-pol-dziel.fa-jeden{grid-template-columns:minmax(0,1fr)}
#fa-ekran .fa-pol-dziel a,#fa-ekran .fa-pol-dziel button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
  margin:0;padding:6px 8px;border:0;border-radius:12px;font:inherit;font-size:14.5px;font-weight:800;color:#fff;text-decoration:none;
  cursor:pointer;box-sizing:border-box;min-width:0}
#fa-ekran .fa-pol-wa{background:#25d366}
#fa-ekran .fa-pol-msg{background:#0084ff}
#fa-ekran .fa-pol-sms{background:#334155}
#fa-ekran .fa-pol-dziel .fa-pol-ud{background:#fff;color:var(--fa-tusz)}
#fa-ekran .fa-pol-gora .fa-pusto{margin:0;background:#1e293b;border-color:#334155;color:#e2e8f0}
#fa-ekran .fa-pol-staty{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 12px}
#fa-ekran .fa-pol-stat{display:flex;flex-direction:column;gap:2px;min-width:0;padding:12px 14px;border-radius:16px;background:#fff;
  border:1px solid var(--fa-linia)}
#fa-ekran .fa-pol-stat b{font-size:24px;font-weight:900;line-height:1.15}
#fa-ekran .fa-pol-stat span{font-size:12.5px;font-weight:800;color:var(--fa-szary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fa-ekran .fa-pol-nag{margin:0 12px;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--fa-linia)}
#fa-ekran .fa-pol-masz{font-size:19px;font-weight:900}
#fa-ekran .fa-pol-nast{margin-top:10px}
#fa-ekran .fa-pol-nast-t,#fa-ekran .fa-pol-odb-t{margin-top:10px;font-size:12px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;
  color:#94a3b8}
#fa-ekran .fa-pol-nast .fa-pol-nast-t{margin-top:0}
#fa-ekran .fa-pol-nast-n{display:block;margin-top:4px;font-size:15px;font-weight:900}
#fa-ekran .fa-pol-pasek{height:10px;margin-top:8px;border-radius:999px;background:#e8eef5;overflow:hidden}
#fa-ekran .fa-pol-pasek i{display:block;height:100%;background:linear-gradient(90deg,var(--fa-zielony2),var(--fa-zielony))}
#fa-ekran .fa-pol-brak{margin-top:6px;font-size:13.5px;font-weight:800;color:#b45309}
#fa-ekran .fa-pol-odb{display:flex;align-items:center;gap:10px;padding:9px 0 0;margin-top:9px;border-top:1px solid #eef2f7;font-size:14px;
  font-weight:700}
#fa-ekran .fa-pol-odb span{flex:1 1 auto;min-width:0}
#fa-ekran .fa-pol-odb a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:10px;
  background:var(--fa-zielony);color:#fff;font-size:13px;font-weight:900;text-decoration:none}
#fa-ekran .fa-pol-gala{margin:10px 12px 0}
#fa-ekran .fa-pol-zasady{margin:0 12px;padding:12px 14px 12px 32px;border-radius:16px;background:#fff;border:1px solid var(--fa-linia);
  font-size:14px;line-height:1.5}
#fa-ekran .fa-pol-zasady li{margin:4px 0}
#fa-ekran #fa-pol .fa-tekst-przycisk{margin:4px auto 0}
#fa-ekran #fa-pol .fa-tekst-przycisk:last-child{margin-bottom:24px}
/* 9.10.2026: odnośnik „Więcej informacji na ambasador.travel.pl” zaraz pod statystykami (zielony jak marka Ambasador
   Travel); cała część o programie ambasadorskim pod zasadami ma własny arkusz festival-gala.css */
#fa-ekran .fa-pol-amb{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 12px 0;min-height:46px;padding:10px 14px;
  border-radius:14px;background:#ecfdf5;border:1px solid #a7f3d0;color:#047857;font-size:14.5px;font-weight:900;text-decoration:none;
  text-align:center;box-sizing:border-box}
#fa-ekran .fa-pol-amb:focus-visible{outline:2px solid #047857;outline-offset:2px}

/* ── NOWE PASKI (11.10.2026, tylko z data-fa-pasek2 od serwera: klasa fa-pasek2 na <html>, przyciski .fa-g-szuk i .fa-g-dzw
   oraz ekrany .fa-lista-pop i Grupy powstają wyłącznie wtedy). Dół: Start, Grupy, Wyjazdy, Lista, Profil; góra: Lupa i Dzwonek
   obok koperty. Na telefonie od 360 px mieści się do ośmiu ikon (Zainstaluj, Gala, Polecaj, Ranking, Lupa, Dzwonek, Koperta,
   ☰) obok logo, bez przewijania w bok: cele dotyku 36 do 42 px szerokości i 40 do 42 px wysokości (test_pasek_grupy.py). ── */
#fa-gora .fa-g-szuk svg,#fa-gora .fa-g-dzw svg{width:27px;height:27px}
#fa-gora .fa-licz-dzw{position:absolute;top:3px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#dc2626;
  color:#fff;font:800 10px/17px system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-style:normal;text-align:center;display:none;
  box-shadow:0 0 0 2px #fff;box-sizing:border-box}
#fa-gora .fa-licz-dzw.fa-jest{display:block}
html.fa-pasek2 #fa-gora .fa-g-szuk[aria-expanded="true"],html.fa-pasek2 #fa-gora .fa-g-dzw[aria-expanded="true"]{background:#eef2f6}
/* komputer: wyszukiwarka i dzwonek z listą stoją w pasku grupy (jak koperta), druga lupa i drugi dzwonek byłyby dublem;
   kalendarz i mapa wydarzeń są tam w białej belce menu (/wydarzenia, /mapa) */
@media(min-width:821px){#fa-gora .fa-g-szuk,#fa-gora .fa-g-dzw{display:none !important}}
@media(max-width:820px){
  html.fa-pasek2 #unibar .ub-in{padding-left:8px;padding-right:6px}
  html.fa-pasek2 #fa-gora{gap:0;margin-left:2px}
  html.fa-pasek2 #fa-gora .fa-g{width:40px;height:42px}
  html.fa-pasek2 #fa-gora .fa-g svg{width:26px;height:26px}
  html.fa-pasek2 #fa-gora .fa-g-inst svg{width:22px;height:22px}
  html.fa-pasek2 #fa-gora .fa-g-inst{width:36px;height:36px;margin:0 2px}
}
@media(max-width:380px){
  html.fa-pasek2 #unibar .ub-in{padding-left:6px;padding-right:4px}
  html.fa-pasek2 #fa-gora .fa-g{width:36px;height:40px}
  html.fa-pasek2 #fa-gora .fa-g svg{width:24px;height:24px}
  html.fa-pasek2 #fa-gora .fa-g-inst{width:36px;height:36px;margin:0 1px}
  html.fa-pasek2 #fa-gora .fa-g-inst svg{width:21px;height:21px}
  html.fa-pasek2 #fa-gora .fa-licz-kop,html.fa-pasek2 #fa-gora .fa-licz-dzw{right:-1px}
}

/* podmenu „Lista”: małe okienko nad dolnym paskiem, przy prawej krawędzi (nad zakładką Lista); tło obok zamyka */
#fa-ekran.fa-lista-pop{top:auto;left:auto;right:10px;bottom:calc(62px + env(safe-area-inset-bottom,0px) + 34px);width:min(300px,calc(100vw - 20px));
  max-height:calc(100dvh - 170px);border-radius:20px;overflow:hidden;box-shadow:0 18px 50px rgba(2,6,23,.32);border:1px solid var(--fa-linia)}
#fa-ekran.fa-lista-pop .fa-glowa{padding:8px 8px 8px 16px}
#fa-ekran.fa-lista-pop .fa-glowa h2{font-size:16px}
#fa-ekran.fa-lista-pop .fa-x{width:40px;height:40px;font-size:17px}
#fa-ekran.fa-lista-pop .fa-tresc{padding:8px 0 10px}
#fa-ekran .fa-lista-poz{list-style:none;margin:0 8px;padding:0}
#fa-ekran .fa-lista-poz li{display:block;border-bottom:1px solid #eef2f7}
#fa-ekran .fa-lista-poz li:last-child{border-bottom:0}
#fa-ekran .fa-lista-poz .fa-poz{min-height:48px;padding:10px 12px;border-bottom:0}
#fa-ekran .fa-lista-poz .fa-poz[aria-current="page"]{background:#f3faeb}
#fa-ekran .fa-lista-poz .fa-poz:focus-visible{outline:2px solid var(--fa-zielony2);outline-offset:-2px}
@media(max-width:820px){#fa-tlo.fa-otwarty.fa-tlo-pop{display:block;background:rgba(15,23,42,.22)}}
@media(min-width:821px){#fa-ekran.fa-lista-pop{right:auto;left:calc(50% + 20px);bottom:calc(var(--fa-dol) + 24px);width:300px;
  max-height:calc(100vh - var(--fa-dol) - 40px)}}
@media(prefers-reduced-motion:no-preference){#fa-ekran.fa-otwarty.fa-lista-pop{animation:faWjazd .16s ease-out}}
