/* ==========================================================================
   PASEK PC — KARTA (od 12.10.2026; navcard.js; decyzje Matta: notatki/pasek.md
   „PASEK PC — KARTA”, mockup uklad 1, odmiana A2 — skasowany po akceptacji)
   ==========================================================================
   OSTATNI arkusz w <head>: nadpisuje reguly paska ze styles.css, galaxy.css,
   calendar.css, filters.css. Wszystko poza dwiema regulami nizej — TYLKO PC.

   Jezyk paska telefonu: karta odklejona od krawedzi (promien 18, ramka
   i poswiata w akcencie, gradient motywu), mgla w kolorze tla nad i obok.
   UKLAD (bez przenoszenia przyciskow w znaczniku — telefon uzywa tych samych):
     gora:  [awatar + nick]          [ZNAJOMI, dzwonek | flagi, motyw, ustawienia, wyloguj]
     ----------------------------------------------------------------------------------
     dol:   [wyszukiwarka FILTRY gestosc]        [GALAKTYKA] [LISTA ZYCZEN] [PREMIERY]
   .nav-actions ma display: contents, wiec jego przyciski sa elementami karty
   (flex z zawijaniem) i order rozklada je na dwa rzedy; ::before karty = kreska
   i przelamanie rzedu, ::after = rozpychacz biblioteki do prawej.
   ZWINIETY (> 220 px przewiniecia): jeden rzad —
     [awatar] | [wyszukiwarka...] FILTRY gestosc [biblioteka bez podpisow] | ZNAJOMI dzwonek
   (u znajomego: strzalka powrotu, awatar, nick). Grupa aplikacji znika (decyzja 3.10).
   Wersja apki: przy logo GL w lewej kolumnie (.mk-ver), z paska znika.
   ========================================================================== */

/* telefon: obudowa nie istnieje dla ukladu (pasek zostaje dzieckiem #main jak dotad) */
#nav-slot { display: contents; }
#navbar .nav-lab { display: none !important; }

@media (min-width: 769px) {
  /* --- MIEJSCE PASKA: stala wysokosc rozwinietej karty (navcard.js), przyklejone do gory.
     Zwijanie zmienia tylko karte — biblioteka pod spodem stoi --- */
  #nav-slot {
    display: block;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    max-width: 1240px;
    height: var(--nav-slot, 150px);
    margin-bottom: 18px;
    flex-shrink: 0;
    pointer-events: none;
  }
  /* MGLA nad i obok karty: TO SAMO tlo co strona (gradient body: 100vw x 100vh od lewego gornego rogu
     ekranu; miejsce jest zawsze na gorze ekranu, wiec wystarczy przesuniecie w poziomie).
     Bez background-attachment: fixed — to przemalowywaloby mgle przy kazdej klatce przewijania.
     Szerokosc = caly #main (navcard.js mierzy --mist-l / --mist-r / --main-x): siatka kafelkow jest
     szersza niz pasek (1240 px) — mgla szerokosci paska chowala kafelki przy bokach do polowy
     („kanty”, Matt 12.10). Dokladnie do krawedzi #main, nie dalej: wieksza mgla robila z #main
     strone szersza od ekranu (przewijanie do elementu mogloby ja przesunac w bok).
     Wygaszenie pod karta maska; wysokosc idzie za karta (--card-h). */
  #nav-slot::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(-1 * var(--mist-l, 40px));
    right: calc(-1 * var(--mist-r, 40px));
    z-index: -1;
    pointer-events: none;
    height: calc(var(--card-h, 130px) + 36px);
    background: var(--bg) radial-gradient(circle at 50% -20%, #1a1a1a 0%, #030303 100%) no-repeat;
    background-size: 100vw 100vh;
    background-position: calc(-1 * var(--main-x, 380px)) 0;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent 100%);
    transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* --- KARTA --- */
  html #nav-slot > #navbar {
    pointer-events: auto;
    position: relative !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 10px 10px 0 !important;
    border-radius: 18px !important;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 11%, #08090c), #08090c 72%) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 12px 18px !important;
    view-transition-name: navcard;
  }
  html #nav-slot #navbar .nav-actions { display: contents !important; }
  /* przyciski sie nie kurcza — miejsca ustepuje wyszukiwarka (zmierzone: przy 1100 px dzwonek
     i kartka kalendarza sciskaly sie do 31-34 px) */
  html #nav-slot #navbar .nav-btn,
  html #nav-slot #navbar .nav-sep,
  html #nav-slot #navbar .nav-lang-pill,
  html #nav-slot #navbar #nav-filters-btn { flex-shrink: 0 !important; }
  /* kreska miedzy rzedami = przelamanie rzedu */
  html #nav-slot > #navbar::before {
    content: "";
    order: 10;
    flex: 0 0 100%;
    height: 1px;
    margin-top: 6px;
    background: color-mix(in srgb, var(--accent) 14%, #191c21);
  }
  /* rozpychacz: biblioteka do prawej krawedzi (pod przyciskami konta) */
  html #nav-slot > #navbar::after {
    content: "";
    order: 12;
    flex: 1 1 0;
    height: 0;
  }

  /* gorny rzad */
  html #nav-slot #navbar .nav-context { order: 1; flex: 0 1 auto; min-width: 0; }
  html #nav-slot #navbar #nav-friends-btn { order: 2; margin-left: auto !important; }
  html #nav-slot #navbar #nav-bell-btn { order: 3; }
  html #nav-slot #navbar .nav-sep-app { order: 4; }
  html #nav-slot #navbar .nav-lang-pill { order: 5; }
  html #nav-slot #navbar #nav-palette-btn { order: 6; }
  html #nav-slot #navbar #nav-settings-btn { order: 7; }
  html #nav-slot #navbar .nav-actions > button[onclick*="logout"] { order: 8; }
  html #nav-slot #navbar .nav-sep-lib { display: none !important; }
  /* dolny rzad: wyszukiwarka, FILTRY, gestosc */
  html #nav-slot #navbar > .navbar-row-2 {
    order: 11;
    /* rosnie do 640 px (wyszukiwarka 460 + FILTRY + gestosc); samo auto dawalo szerokosc
       najwezszej tresci — wyszukiwarka miala 190 px */
    flex: 1000 1 auto !important;
    flex-basis: auto !important;
    width: auto !important;
    max-width: 640px;
    min-width: 0;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  html #nav-slot #navbar .navbar-row-2::before { display: none !important; }
  html #nav-slot #navbar .navbar-search-container { flex: 1 1 auto !important; width: auto !important; max-width: 460px !important; min-width: 160px; }
  /* biblioteka */
  html #nav-slot #navbar #nav-galaxy-btn { order: 13; }
  html #nav-slot #navbar #nav-wishlist-btn { order: 14; margin-left: -6px; }
  html #nav-slot #navbar #nav-calendar-btn { order: 15; margin-left: -6px; }

  /* --- wyglad jak na telefonie --- */
  /* ikony plaskie (bez pudelek); kartka kalendarza zostaje kartka (niesie date); kolory ikon
     bez zmian (znajomi pomarancz, wyloguj czerwien) */
  html #nav-slot #navbar .nav-btn:not(#nav-calendar-btn) { background: none !important; border-color: transparent !important; box-shadow: none !important; }
  html #nav-slot #navbar .nav-btn:not(#nav-calendar-btn):hover { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
  /* flagi bez pigulki */
  html #nav-slot #navbar .nav-lang-pill { background: none !important; border-color: transparent !important; box-shadow: none !important; }
  html #nav-slot #navbar .nav-lang-pill .lang-flag.active { background: none !important; }
  html #nav-slot #navbar .nav-lang-pill .lang-flag:not(.active) { opacity: 0.4; filter: grayscale(0.5); }
  /* awatar: ramka + poswiata */
  html #nav-slot #navbar .nav-avatar { box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent) !important; }
  /* Galaktyka: ikona pod katem jest splaszczona — 24 px, zeby nie wygladala na mniejsza od sasiadow */
  html #nav-slot #navbar #nav-galaxy-btn svg { width: 24px; height: 24px; flex: 0 0 auto; }
  html #nav-slot #navbar #nav-galaxy-btn:hover { color: var(--trofeum) !important; }
}

/* --- BIBLIOTEKA Z PODPISAMI (rozwiniety pasek): pigulki jak przycisk FILTRY. Od 1200 px —
   wezej (laptop 1366 z powiekszeniem 125% = ok. 1100 px) podpisy lamaly pasek na 4 rzedy,
   wiec biblioteka zostaje samymi ikonami jak w zwinietym pasku --- */
@media (min-width: 1200px) {
  html #nav-slot #navbar:not(.nav-compact) .nav-lab {
    display: inline !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    text-transform: uppercase;
    white-space: nowrap;
    color: #c9d1d8;
    transition: color 0.18s;
  }
  html #nav-slot #navbar:not(.nav-compact) #nav-galaxy-btn.gx-on,
  html #nav-slot #navbar:not(.nav-compact) #nav-wishlist-btn,
  html #nav-slot #navbar:not(.nav-compact) #nav-calendar-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 9px !important;
    border-color: transparent !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: none !important;
    overflow: visible;
  }
  html #nav-slot #navbar:not(.nav-compact) #nav-calendar-btn { padding-left: 3px !important; }
  /* kartka kalendarza w pigulce: mala kartka z ramka zamiast calego przycisku */
  html #nav-slot #navbar:not(.nav-compact) #nav-calendar-btn .cal-today-ic {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid #2c2a33;
    border-radius: 7px;
    overflow: hidden;
    transition: border-color 0.18s;
  }
  html #nav-slot #navbar:not(.nav-compact) #nav-calendar-btn .cal-today-ic > b { height: 10px; }
  html #nav-slot #navbar:not(.nav-compact) #nav-calendar-btn .cal-today-ic > b > i { font-size: 6.5px; }
  html #nav-slot #navbar:not(.nav-compact) #nav-calendar-btn .cal-today-ic > span { font-size: 13px; }
  /* LISTA ZYCZEN: liczba ZAWSZE w gwiazdce (Matt 12.10). Liczba srodkuje sie na gwiazdce, nie na
     pigulce: ramka 1 + wciecie 12 + pol gwiazdki (1.5rem fa-star = 27 px) = 26.5 px */
  html #nav-slot #navbar:not(.nav-compact) #nav-wishlist-btn .wish-count { left: 26.5px !important; }
  /* NAJECHANIE: cala pigulka (takze napis) zapala ikone na zloto — jedna grupa biblioteki = jeden
     hover (decyzja Matta 3.10; Galaktyka dolaczyla do grupy). Gwiazdka i kartka: reguly styles.css */
  html #nav-slot #navbar:not(.nav-compact) #nav-galaxy-btn.gx-on:hover,
  html #nav-slot #navbar:not(.nav-compact) #nav-wishlist-btn:hover,
  html #nav-slot #navbar:not(.nav-compact) #nav-calendar-btn:hover { background: rgba(255, 255, 255, 0.09) !important; }
  html #nav-slot #navbar:not(.nav-compact) .nav-btn:hover .nav-lab { color: #fff; }
  html #nav-slot #navbar:not(.nav-compact) #nav-calendar-btn:hover .cal-today-ic { border-color: currentColor; }
}

@media (min-width: 769px) {
  /* --- ZWINIETY: jeden rzad --- */
  html #nav-slot > #navbar.nav-compact { flex-wrap: nowrap !important; padding: 8px 14px !important; margin: 10px 10px 0 !important; }
  html #nav-slot > #navbar.nav-compact::before,
  html #nav-slot > #navbar.nav-compact::after { display: none; }
  html #nav-slot #navbar.nav-compact .nav-sep-lib { order: 2; display: block !important; }
  html #nav-slot #navbar.nav-compact > .navbar-row-2 { order: 3; flex: 1 1 auto !important; max-width: none; }
  html #nav-slot #navbar.nav-compact .navbar-search-container { flex: 1 1 auto !important; max-width: none !important; }
  html #nav-slot #navbar.nav-compact #nav-galaxy-btn { order: 4; }
  html #nav-slot #navbar.nav-compact #nav-wishlist-btn { order: 5; }
  html #nav-slot #navbar.nav-compact #nav-calendar-btn { order: 6; }
  html #nav-slot #navbar.nav-compact .nav-sep-app { order: 7; display: block !important; }
  html #nav-slot #navbar.nav-compact #nav-friends-btn { order: 8; margin-left: 0 !important; }
  html #nav-slot #navbar.nav-compact #nav-bell-btn { order: 9; }
  /* z lewej zostaje awatar wlasciciela biblioteki (Matt 12.10); u znajomego najpierw strzalka
     powrotu, potem awatar i nick (styles.css chowal kontekst u siebie — tu wraca) */
  html #nav-slot #navbar.nav-compact > .nav-context { display: flex !important; flex: 0 0 auto; gap: 8px; }
  html #nav-slot #navbar.nav-compact .nav-avatar { width: 32px !important; height: 32px !important; min-width: 32px !important; }
  html #nav-slot #navbar.nav-compact:not(.obcy) .nav-who { display: none !important; }
  html #nav-slot #navbar.nav-compact.obcy .nav-back { order: -1; margin: 0 2px 0 0 !important; }
  html #nav-slot #navbar.nav-compact.obcy .nav-nick { max-width: 140px; }

  /* --- ANIMACJA ZWIJANIA (View Transitions): nazwy dla elementow, ktore zmieniaja miejsce;
     reszta (flagi, motyw...) przenika sie w zrzucie karty --- */
  html #nav-slot #navbar .nav-context { view-transition-name: navctx; }
  html #nav-slot #navbar > .navbar-row-2 { view-transition-name: navrow2; }
  html #nav-slot #navbar #nav-galaxy-btn { view-transition-name: navgal; }
  html #nav-slot #navbar #nav-wishlist-btn { view-transition-name: navwish; }
  html #nav-slot #navbar #nav-calendar-btn { view-transition-name: navcal; }
  html #nav-slot #navbar #nav-friends-btn { view-transition-name: navfr; }
  html #nav-slot #navbar #nav-bell-btn { view-transition-name: navbell; }
  html #nav-slot #navbar .nav-sep-lib { view-transition-name: navsep1; }
  html #nav-slot #navbar .nav-sep-app { view-transition-name: navsep2; }
  /* MIGANIE (Matt 12.10 noc, zbadane 13.10 klatka po klatce w Chromium): pigulki biblioteki
     jako JEDYNE zmieniaja ksztalt (pigulka z podpisem <-> kwadratowa ikona), a .nav-btn ma
     „transition: 0.2s” na WSZYSTKO — przycisk sam animowal wysokosc, wciecia, zaokraglenia,
     min-width i nawet kolejnosc (order) w tej samej chwili, co przejscie karty. Zywy obraz
     nowego stanu skakal, przyciski zamienialy sie miejscami (PREMIERY przed LISTA ZYCZEN).
     Animujemy tylko kolory (najechanie); zmiane ksztaltu robi samo przejscie. */
  html #nav-slot #navbar #nav-galaxy-btn,
  html #nav-slot #navbar #nav-wishlist-btn,
  html #nav-slot #navbar #nav-calendar-btn {
    transition: background-color 0.18s, color 0.18s, border-color 0.18s !important;
  }
  /* Awatar mial „transition: width, height 0.15s” (styles.css .nav-avatar) — przy zwijaniu sam sie
     kurczyl 38 -> 32 px w trakcie przejscia; zostaje tylko powiekszenie przy najechaniu */
  html #nav-slot #navbar .nav-avatar { transition: transform 0.2s !important; }

  /* --- WERSJA przy logo GL w lewej kolumnie: jak znaczek TM za PRO (decyzja Matta 12.10).
     Wyglad z .nav-ver (styles.css); kropka nowosci za tekstem, nie przed (tu tekst zaczyna
     sie zaraz za PRO). Napis konczy sie przy wewnetrznej krawedzi kolumny — przy dluzszym
     numerze odstep liter maleje, zamiast wychodzic poza kolumne */
  .mk-nz .mk-ver {
    position: relative;
    left: auto;
    bottom: auto;
    top: -1px;
    vertical-align: top;
    margin-left: 5px;
    letter-spacing: 0.5px;
    font-family: "Segoe UI", system-ui, sans-serif;
  }
  .mk-nz .mk-ver::before { display: none; }
  .mk-nz .mk-ver.nowa { text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); }
  .mk-nz .mk-ver.nowa::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
  }
}

/* --- WASKI PC (769-1199 px): zwiniety pasek bez napisu FILTRY (sama ikona; liczba filtrow
   zostaje) i bez nicku znajomego (strzalka i awatar mowia, czyja to biblioteka); wyszukiwarka
   moze zejsc do 100 px. Zmierzone przy 1100 px u znajomego: miesci sie w jednym rzedzie.
   Rozwiniety pasek przy waskim ekranie moze zajac 3 rzedy — miejsce mierzy navcard.js --- */
@media (min-width: 769px) and (max-width: 1199px) {
  html #nav-slot #navbar.nav-compact #nav-filters-btn > span { display: none; }
  html #nav-slot #navbar.nav-compact .nav-who { display: none !important; }
  html #nav-slot #navbar.nav-compact .navbar-search-container { min-width: 100px; }
}

/* ANIMACJA: tylko pasek. Reszta strony NIE jest zrzutem (root bez nazwy) i warstwa przejscia
   przepuszcza kolko i klikniecia — inaczej przez czas animacji nie dalo sie przewijac
   (Matt 12.10: „scroll zatrzymuje sie zaraz po rozwinieciu i po zwinieciu paska”) */
:root { view-transition-name: none; }
::view-transition { pointer-events: none; }
::view-transition-group(navcard),
::view-transition-group(navctx),
::view-transition-group(navrow2),
::view-transition-group(navgal),
::view-transition-group(navwish),
::view-transition-group(navcal),
::view-transition-group(navfr),
::view-transition-group(navbell),
::view-transition-group(navsep1),
::view-transition-group(navsep2) {
  animation-duration: 0.34s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(navcard),
::view-transition-new(navcard) { height: 100%; }
/* Zrzut przycisku domyslnie ma szerokosc grupy i wysokosc z proporcji: kwadratowa ikona
   rozciagnieta do szerokosci pigulki (ok. 130 px) robila sie 3-4 razy wieksza i wystawala
   pod karte („13” z kalendarza, Galaktyka) — to byl blysk. Obraz miesci sie w grupie. */
::view-transition-old(navgal), ::view-transition-new(navgal),
::view-transition-old(navwish), ::view-transition-new(navwish),
::view-transition-old(navcal), ::view-transition-new(navcal) {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Kontekst (awatar + nick) i dolny rzad (wyszukiwarka, FILTRY): tresc od lewej. Zrzut w naturalnych
   proporcjach przy lewej krawedzi grupy — rozciagniety do szerokosci grupy awatar puchl do ok. 100 px
   i wychodzil poza karte, a nick u znajomego pojawial sie drugi raz, wiekszy (klatki 13.10) */
::view-transition-old(navctx), ::view-transition-new(navctx),
::view-transition-old(navrow2), ::view-transition-new(navrow2) {
  width: auto;
  height: 100%;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation: none !important; }
}

/* ==========================================================================
   MINI-GRY i ZNAJDZ W APCE w gornym rzedzie (13.10.2026, decyzje Matta): dzojstik przy dzwonku
   (grupa spoleczna: znajomi, dzwonek, gry — zostaje tez w zwinietym pasku), celownik obok ustawien
   (grupa apki — w zwinietym pasku znika razem z nia). Tylko PC; telefon: szuflada.
   ========================================================================== */
.nav-joy { width: 1.25em; height: 1.25em; vertical-align: -0.25em; display: inline-block; }
@media (max-width: 768px) {
  #navbar #nav-games-btn,
  #navbar #nav-find-btn { display: none !important; }
}
@media (min-width: 769px) {
  html #nav-slot #navbar #nav-games-btn { order: 3; view-transition-name: navgames; }
  html #nav-slot #navbar #nav-find-btn { order: 7; }
  html #nav-slot #navbar.nav-compact #nav-games-btn { order: 9; }
  html #nav-slot #navbar.nav-compact #nav-find-btn { display: none !important; }
}