/* NAWIGACJA PUNK KOLAŻ (referencja CEO 5.10.2026: „JebTo.ai Punk Collage Navigation Sheet”).
   Etykiety z papieru (tekstura /img/papier.webp) z poszarpaną krawędzią na warstwie ::before, więc różowy pasek aktywnej
   zakładki i taśma pod wyszukiwarką mogą wystawać poza wycinek. Hover: lekki przechył, powiększenie i różowy marker. */
.top{background:rgba(11,11,11,.5);backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.top-in{padding:14px 18px 6px;gap:14px;align-items:center}
.nv-deko{position:absolute;pointer-events:none;user-select:none}
.nv-korona{left:4px;top:4px;width:46px;rotate:-14deg;opacity:.9}
.nv-usta{left:-14px;bottom:-26px;width:118px;rotate:8deg}
.nv-wybuch{left:150px;bottom:2px;width:44px;rotate:20deg}
.nv-scrawl{right:22px;bottom:4px;font:30px/.85 var(--f-hand);color:#e9e3d6;rotate:-9deg;text-align:center;opacity:.9}
.nv-korona-roz{position:relative;flex:none;width:42px;rotate:-10deg;margin-right:-6px}

/* wspólny wycinek papieru */
.nav a.nv,.chips .chip,.top .srch,.top .btn-dump{position:relative;isolation:isolate;background:none;border:0;border-radius:0;box-shadow:none}
.nav a.nv::before,.chips .chip::before,.top .srch::before,.top .btn-dump::before{content:'';position:absolute;inset:0;z-index:-1;background:#e9e3d6 url(/img/papier.webp);
  clip-path:polygon(0 6%,7% 0,38% 4%,69% 0,100% 6%,98% 48%,100% 95%,63% 100%,31% 96%,3% 100%,0 58%)}
.nav{gap:9px;align-items:center}
.nav a.nv{display:flex;flex-direction:column;gap:3px;color:#111;padding:8px 13px 7px;transform:rotate(var(--r,0deg));transition:transform .15s ease}
.nav a.nv b{font:400 23px/1 var(--f-head);letter-spacing:.03em;display:flex;align-items:center;gap:7px}
.nav a.nv small{font:10px/1.1 var(--f-type);letter-spacing:.09em;opacity:.72;white-space:nowrap}
/* czerwona kropka nagrywania przy transmisji - sygnal "to leci teraz", nie ozdoba */
.nv-rec{width:9px;height:9px;border-radius:50%;background:#e11d2e;box-shadow:0 0 0 2px rgba(225,29,46,.3);flex:0 0 auto;animation:nvRec 1.6s ease-in-out infinite}
@keyframes nvRec{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.nv-rec{animation:none}}
.nav a.nv:nth-child(3n){--r:-1.5deg} .nav a.nv:nth-child(3n+1){--r:1deg} .nav a.nv:nth-child(3n+2){--r:-.4deg}
.nav a.nv:hover{transform:rotate(-2.5deg) scale(1.08);color:#000}
.nav a.nv:hover::after,.nav a.nv.on::after{content:'';position:absolute;left:4%;right:2%;bottom:-6px;height:6px;background:var(--pink);transform:skewX(-14deg) rotate(-1deg);display:block}
.nav a.nv.on{color:#000}
.nav a.nv.on::before{background:#ffd400}
.nav a.nv-live{color:var(--alert);font-size:19px}
.nav a.nv-live::before{display:none}
.nav a.nv-live:hover::after{display:none}

/* wyszukiwarka na papierze z taśmą ostrzegawczą */
.top .srch{color:#111;padding:6px 14px;min-height:46px;transform:rotate(-.6deg)}
.top .srch input{color:#111;font:500 15px var(--f-body)}
.top .srch input::placeholder{color:#3a3a3a}
.top .srch span{color:#111}
.nv-tasma{position:absolute;left:-14px;bottom:-14px;width:84px;rotate:-6deg;z-index:2;pointer-events:none}

/* przyciski akcji */
.top .chaos-b{width:46px;height:46px;background:#000;border:2px solid #e9e3d6;color:#e9e3d6;border-radius:0;transform:rotate(1.5deg)}
.top .btn-dump{color:#000;font:22px var(--f-head);letter-spacing:.03em;padding:10px 18px;transform:rotate(-1deg)}
.top .btn-dump::before{background:var(--pink);clip-path:polygon(0 4%,10% 0,52% 5%,90% 0,100% 8%,98% 55%,100% 100%,55% 96%,8% 100%,1% 60%)}
.top .btn-dump:hover{transform:rotate(1deg) scale(1.05)}
.top .btn-login{background:#000;color:#fff;font:21px var(--f-head);letter-spacing:.04em;border:3px double #fff;border-radius:0;padding:8px 18px;transform:rotate(.8deg)}

/* kategorie: te same wycinki */
.chips{gap:10px;padding:6px 18px 14px}
.chips .chip{font:400 16px/1 var(--f-head);letter-spacing:.03em;color:#111;padding:9px 12px 8px;transform:rotate(var(--r,0deg))}
.chips .chip:nth-child(2n){--r:-1deg} .chips .chip:nth-child(3n){--r:1.2deg}
.chips .chip:hover{transform:rotate(-2deg) scale(1.06)}
.chips .chip.on::before{background:#ffd400}
.chips .chip.on::after,.chips .chip:hover::after{content:'';position:absolute;left:4%;right:2%;bottom:-6px;height:6px;background:var(--pink);transform:skewX(-14deg)}
.chips .chip-cursed{color:#fff} .chips .chip-cursed::before{background:#7a2bd6}
.chips .chip-18{color:#fff} .chips .chip-18::before{background:#000;outline:3px solid var(--alert);outline-offset:-5px}

/* dolna strefa: różowy ticker (hasła + zdarzenia LIVE), pod nim żółta taśma (referencje FAKE NEWS / nawigacja) */
.livebar{background:var(--pink);color:#000;border-top:3px solid #000;border-bottom:0;box-shadow:none;bottom:28px;transform:rotate(-.35deg)}
.livebar .lb-tag{background:#000;color:#fff}
.lb-haslo{font:16px var(--f-head);letter-spacing:.04em;color:#000;padding:0 4px}
.lb-tk em{color:#000}
.dol-tasma{position:fixed;left:-12px;right:-12px;bottom:0;z-index:53;overflow:hidden;background:repeating-linear-gradient(-45deg,#111 0 14px,var(--acid) 14px 28px);transform:rotate(.3deg);padding:2px 0}
.dol-tasma .pt-in{display:flex;width:max-content;animation:tick 110s linear infinite reverse;background:var(--acid);font:14px/1 var(--f-head);letter-spacing:.16em;color:#000;padding:6px 0;will-change:transform}
.dol-tasma .pt-in span{padding:0 22px} .dol-tasma .pt-in b{color:var(--alert);font-weight:400}

@media (max-width:1180px){.nv-scrawl,.nv-wybuch{display:none} .nav a.nv{font-size:15px;padding:8px 8px 7px}}
@media (max-width:760px){
  .nv-deko{display:none}
  .nav a.nv,.chips .chip{font-size:16px}
  .livebar{bottom:calc(60px + 26px + env(safe-area-inset-bottom))}
  .dol-tasma{bottom:calc(60px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.dol-tasma .pt-in{animation:none}}
/* CEO 6.10.2026: logotyp i usta maja stac na stale w tym samym miejscu, a nie pojawiac sie tylko przy rzedzie
   kategorii - przeskakujaca dekoracja sprawiala, ze gora strony "oddychala" przy kazdej zmianie widoku.
   SLOP FOREVER i wybuch zostaja warunkowe, bo te faktycznie nachodzily na logo i przycisk logowania. */
.nv-usta{display:block}
.nv-scrawl,.nv-wybuch{display:none}
.top:has(#chips:not([hidden])) .nv-scrawl,.top:has(#chips:not([hidden])) .nv-wybuch{display:block}
.top-in{padding-left:58px}
@media (max-width:760px){.top-in{padding-left:12px}}
/* Cztery zakladki zamiast jedenastu, wiec font jest staly i duzy - plynne skalowanie od szerokosci okna
   bylo potrzebne tylko po to, zeby upchnac jedenascie pozycji w jednym rzedzie. */
.nav{gap:6px}
.nav a.nv b{font-size:clamp(17px,1.5vw,25px)}
.nav a.nv-live{font-size:clamp(14px,.85vw,19px)}
@media (max-width:2100px){.nv-korona-roz{display:none}}
/* telefon: zakładki w drugim rzędzie z przewijaniem w poziomie (wcześniej uciekały za prawą krawędź) */
@media (max-width:760px){
  .top-in{flex-wrap:wrap;row-gap:4px}
  .top .nav{order:10;flex:1 0 100%;display:flex!important;overflow-x:auto;scrollbar-width:none;padding:2px 0 8px;margin:0;gap:6px}
  .top .nav::-webkit-scrollbar{display:none}
  .top .nav a.nv{flex:none;font-size:14px}
}
/* logo GIF z wycinków: większe i czytelne (CEO 5.10.2026) */
.top .logo{display:inline-flex;flex-direction:column;align-items:flex-start;flex:none}
.logo-gif{display:block;line-height:0} .logo-gif img{display:block;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.6))}
.top .home-slop{margin-top:-6px;margin-left:16px}
@media (max-width:760px){.top .logo-gif img{height:42px!important}}