/* LISTA ZYCZEN — okno w rodzinie duzych okien (12.10.2026; wishlist.js, mockup A Matta).
   Zaslona i ksztalt z .sx-ovl / .sx-modal / .sx-hd / .sx-tb (styles.css, jak statystyki
   i kalendarz). Dawny „LEWITUJACY HUD” (ramka w akcencie, srebrny naglowek, wyskok z odbiciem,
   bez zaslony) usuniety ze styles.css. Srebro --zyczenia zostaje na kartach (dana), nie w ramce.
   Widocznosc = klasa .open na #wishlist-drawer (toggleWishlist i stare miejsca zamykania);
   zaslona (tu) i blokada przewijania strony (styles.css) ida za nia przez :has — dawniej GRAJ i scalanie
   zdejmowaly .open bez przywrocenia przewijania (przewijanie zostawalo zablokowane). */

/* pod oknem gry (3000), ktore lista otwiera; nad paskiem (2000), panelem znajomych (2100)
   i przyciskiem znajomych (2200) — jak dawny panel (2250) */
.sx-ovl.wl-ovl { display: none; z-index: 2250; }
.sx-ovl.wl-ovl:has(#wishlist-drawer.open) { display: flex; }
/* blokada przewijania tla: wspolna regula wszystkich okien w styles.css („BLOKADA TLA POD OKNAMI”) */
/* plywajace przyciski (dodaj gre, menu, na gore) nie wisza nad oknem — jak przy panelu znajomych */
body:has(#wishlist-drawer.open) #drw-fab-wrap,
body:has(#wishlist-drawer.open) #ag-fab-wrap,
body:has(#wishlist-drawer.open) #back-to-top { opacity: 0 !important; pointer-events: none !important; }
#wishlist-drawer.wl-modal { animation: wlIn .32s cubic-bezier(.22, 1, .36, 1); }
@keyframes wlIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.wl-hd h2 { display: flex; align-items: center; }
.wl-hd h2 i { color: var(--accent); }
.wl-hd .sx-tabs[hidden] { display: none; }
.wl-hd .sx-tb em { font-style: normal; margin-left: 6px; font-size: .62rem; color: var(--txt-dim); }
.wl-hd .sx-tb.on em { color: var(--accent); }

/* 16 px z bokow: 4 kolumny kart (4 x 215 + 3 x 25 = 935 px) mieszcza sie w oknie 980 px razem
   z suwakiem; siatka wysrodkowana, gdy okno wezsze */
.wl-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 22px;
  scrollbar-width: thin; scrollbar-color: #2e2c38 transparent; }
.wl-body::-webkit-scrollbar { width: 5px; }
.wl-body::-webkit-scrollbar-track { background: transparent; }
.wl-body::-webkit-scrollbar-thumb { background: #2e2c38; border-radius: 3px; border: none; }
.wl-body::-webkit-scrollbar-thumb:hover { background: var(--accent); }
#wishlist-drawer #wishlist-grid { padding-bottom: 0; justify-content: center; }

/* linijka o linkach partnerskich (UK) — tylko gdy jest choc jedna cena; atrybut hidden dziala */
#wishlist-drawer .wl-aff { display: flex; gap: 8px; align-items: baseline; padding: 12px 2px 0; font-size: var(--fs-tag); line-height: 1.5; color: var(--txt-dim); }
#wishlist-drawer .wl-aff[hidden] { display: none; }
#wishlist-drawer .wl-aff i { color: var(--oferta); }

/* naglowki osi czasu — w kolorach licznika premiery (dane gry, nie motyw) */
.wl-grp { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 18px 0 -6px;
  font-size: .7rem; letter-spacing: 2.5px; font-weight: 700; color: var(--gc); }
.wl-grp i { width: 16px; text-align: center; }
.wl-grp small { font-size: .62rem; letter-spacing: .5px; font-weight: 600; color: var(--txt-dim); }
.wl-grp .ln { flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--gc) 40%, transparent), transparent); }
.wl-grp .n { font-size: .62rem; letter-spacing: 0; padding: 1px 8px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--gc) 40%, transparent); }

/* pusty stan (cala lista i zakladka W PROMOCJI) */
.wl-empty { grid-column: 1 / -1; text-align: center; padding: 50px 20px 40px; color: var(--txt-dim); }
.wl-empty > i { display: block; font-size: 2.2rem; color: var(--zyczenia); opacity: .6; margin-bottom: 14px; }
.wl-empty b { display: block; color: #fff; font-size: .95rem; letter-spacing: 1px; margin-bottom: 8px; }
.wl-empty p { margin: 0 auto 18px; max-width: 380px; font-size: .8rem; line-height: 1.5; }
.wl-empty-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.wl-empty-row button { height: 42px; padding: 0 16px; border-radius: 10px; border: 1px solid #232a31; background: #0e1115; color: #c9d1d8;
  font: inherit; font-size: var(--fs-small); font-weight: 700; display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.wl-empty-row button i { color: var(--accent); }

@media (max-width: 768px) {
  /* okno na wysokosc ekranu (decyzja Matta 8.10: lista zyczen duza jak statystyki i kalendarz) */
  #wishlist-drawer.wl-modal { height: calc(100vh - 20px); height: calc(100dvh - 20px); }
  .wl-body { padding: 4px 10px 16px; }
  .wl-grp { margin: 14px 0 0; }
  .wl-hd .sx-tb { padding: 12px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { #wishlist-drawer.wl-modal { animation: none; } }