/* ==========================================================================
   SZYBKI START / BAZA GIER — okno wyboru gier (quickstart.js; od 16.10.2026, mockupy/mockup-baza-gier.html
   wariant A — decyzja Matta). Male okno rodziny dlg- (dialog.css) jak Biblioteka Steam: zakladki slb-tabs
   (styles.css), szukajka dlg-search. Klasy bz-*. Dawne style .qs-* (okno z panelami przy kazdej grze) usuniete
   ze styles.css razem ze starym oknem.
   Zaznaczenie = --accent (to, co gracz wybiera), stan gier z biblioteki przygaszony.
   ========================================================================== */
#qs-overlay .dlg-modal.bz-modal { max-width: 760px; display: flex; flex-direction: column; }
#qs-overlay .dlg-hd h2 i { color: var(--accent); }
.bz-lead { margin: 0 0 12px; font-size: var(--fs-small); color: var(--txt-dim); line-height: 1.5; }
.slb-tabs.bz-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bz-tabs button.on { color: #fff; background: #12161a; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.bz-srch { margin-top: 10px; }

.bz-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 12px; }
.bz-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.bz-info { grid-column: 1 / -1; padding: 40px 0; text-align: center; font-size: var(--fs-small); color: var(--txt-dim); letter-spacing: 1px; }

.bz-t {
  display: block; width: 100%; min-width: 0; position: relative; cursor: pointer; border: 0; padding: 0;
  background: none; text-align: left; font-family: inherit; color: inherit;
}
.bz-cv {
  display: block; position: relative; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden;
  border: 1px solid #1d232a; background: linear-gradient(160deg, #1f2b38, #0b1016);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.bz-cv img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.bz-cv .ini { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; font-weight: 800; color: rgba(255, 255, 255, 0.18); }
.bz-t b { display: block; margin-top: 7px; font-size: var(--fs-tag); color: #e6e9ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.3px; }
.bz-t em { display: block; font-style: normal; font-size: 10.5px; color: var(--txt-dim); }
.bz-ck {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(5, 6, 7, 0.55); color: transparent; transition: 0.15s;
}
.bz-t:hover .bz-cv, .bz-t:focus-visible .bz-cv { border-color: #3a444d; }
.bz-t:focus-visible { outline: none; }
.bz-t:focus-visible .bz-cv { box-shadow: 0 0 0 2px #fff; }
.bz-t.sel .bz-cv { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 10px 26px -10px color-mix(in srgb, var(--accent) 70%, transparent); transform: translateY(-2px); }
.bz-t.sel .bz-ck { background: var(--accent); border-color: var(--accent); color: #000; }
.bz-t.pop .bz-cv { animation: bzPop 0.28s ease-out; }
@keyframes bzPop { 40% { transform: translateY(-2px) scale(1.05); } }
/* gra juz w bibliotece (wyszukiwanie ja pokazuje): przygaszona, nie do zaznaczenia */
.bz-t.have { cursor: default; }
.bz-t.have .bz-cv { opacity: 0.45; filter: grayscale(0.6); }
.bz-t.have .bz-ck { display: none; }
.bz-hv {
  position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 2; padding: 4px 5px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.8); color: #c9d1d8; font-size: 9px; letter-spacing: 0.8px; text-align: center; font-weight: 700;
}

.bz-more {
  display: block; width: 100%; margin: 14px 0 4px; height: 42px; border-radius: 10px; cursor: pointer;
  border: 1px dashed #2a3138; background: none; color: var(--txt-dim); font-family: inherit; font-size: var(--fs-tag); font-weight: 700; letter-spacing: 1.5px;
}
.bz-more:hover, .bz-more:focus-visible { color: #fff; border-color: #3a444d; outline: none; }

.dlg-ft.bz-ft { align-items: center; border-top: 1px solid #14171b; padding-top: 12px; }
.bz-ftx { flex: 1 1 auto; min-width: 0; font-size: var(--fs-tag); color: var(--txt-dim); line-height: 1.5; }
.bz-ftx b { color: #fff; font-size: var(--fs-small); letter-spacing: 1px; }
.bz-lnk { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.bz-lnk:hover, .bz-lnk:focus-visible { text-decoration: underline; outline: none; }
.dlg-ft.bz-ft .dlg-btn.pri { flex: 0 0 auto; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; }
.dlg-ft.bz-ft .dlg-btn.pri:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 768px) {
  .bz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .bz-tabs button { font-size: 10px; letter-spacing: 0.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .bz-t.pop .bz-cv { animation: none; }
}