/* ==========================================================================
   MALE OKIENKA — wspolny wyglad (od 11.10.2026, notatki/okienka.md, wariant 1)
   Wzor: okno TWOJ AWATAR (avatar.css). Ramka i tlo w --sys, ikona tytulu
   i przycisk glowny w --accent, tytul bialy; okno groźne (.danger): ikona,
   poswiata naglowka i przycisk w --danger. Stopka: ANULUJ z lewej, dzialanie
   z prawej, rowne. Telefon: plywajaca karta od dolu. Zaslona BEZ backdrop-filter
   (rozmycie klatkowalo na slabszej grafice — notatki/plynnosc.md).
   Okno = <div id="..." class="dlg-ovl" data-close="funkcjaZamykania">;
   pokazuje je JS przez style.display = "flex" (jak dawne okna), Esc i klik
   obok zamyka dialog.js. Klasy z przedrostkiem „dlg-”.
   ========================================================================== */

.dlg-ovl {
  position: fixed; inset: 0; z-index: 5000;
  background: rgba(2, 3, 4, 0.85);
  display: none; align-items: center; justify-content: center;
  padding: 18px;
}
.dlg-modal {
  width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto;
  display: flex; flex-direction: column;
  background: #08090c;
  border: 1px solid color-mix(in srgb, var(--sys) 22%, transparent);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75);
  text-align: left;
}

/* --- naglowek --- */
.dlg-hd {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid #191c21;
  background: radial-gradient(120% 200% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%);
}
.dlg-hd h2 { flex: 1; margin: 0; font-size: 0.85rem; letter-spacing: 2.5px; font-weight: 700; color: #fff; }
.dlg-hd h2 i { color: var(--accent); margin-right: 8px; }
.dlg-modal.danger .dlg-hd {
  background: radial-gradient(120% 200% at 0% 0%, color-mix(in srgb, var(--danger) 12%, transparent), transparent 62%);
}
.dlg-modal.danger .dlg-hd h2 i { color: var(--danger); }
.dlg-x {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid #191c21; color: #7b848c;
}
.dlg-x:hover, .dlg-x:focus-visible { color: #fff; border-color: #2a3138; outline: none; }

/* --- tresc i stopka --- */
.dlg-bd { padding: 18px 16px; }
.dlg-ft { display: flex; gap: 10px; padding: 0 16px 16px; }
.dlg-ft .dlg-btn { flex: 1; }
.dlg-txt { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: #fff; font-weight: 600; word-break: break-word; }
.dlg-txt b { color: #fff; font-weight: 700; }
.dlg-sub { margin: 6px 0 0; font-size: var(--fs-small); color: var(--txt-dim); line-height: 1.5; }

/* pytanie z obrazkiem obok (okladka gry, awatar osoby, ikona) */
.dlg-ask { display: flex; gap: 14px; align-items: center; }
/* tekst zawsze OSTATNI w wierszu; obrazek, ikona i litera maja stala szerokosc 44 px
   (dawniej „> div” lapalo tez kafelek ikony i litery — rozciagal sie na pol okna) */
.dlg-ask > :last-child { flex: 1; min-width: 0; }
.dlg-cover {
  width: 44px; height: 58px; flex: 0 0 auto; border-radius: 6px; object-fit: cover;
  border: 1px solid #232a31; background: #12161b;
}
.dlg-face {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 22%; object-fit: cover;
  border: 1px solid #232a31; background: #1a1a1a;
}
.dlg-face.dlg-letter { display: grid; place-items: center; color: var(--accent); font-weight: 700; font-size: 20px; }
.dlg-ic {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center;
  font-size: 18px; background: #12161b; border: 1px solid #1d232a; color: var(--accent);
}

/* --- pole tekstowe, podpowiedz, blad (od A2: nick) --- */
.dlg-fld { margin-top: 14px; }
.dlg-fld input {
  width: 100%; height: 46px; padding: 0 14px; margin: 0; border-radius: 10px;
  background: #050608; border: 1px solid #232a31; color: #fff;
  /* 16 px: mniej i iPhone powieksza strone przy wpisywaniu */
  font-size: var(--fs-lead); font-weight: 600; letter-spacing: 0.5px; text-align: left;
  outline: none; box-shadow: none; transition: border-color 0.15s, box-shadow 0.15s;
}
/* fokus: kreska od srodka pod polem — motion.css E3 (animacje etap 2, 18.10.2026; dawna ramka zdjeta) */
.dlg-fld input.bad { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 15%, transparent); }
.dlg-fld input[type="date"] { color-scheme: dark; }
/* ciemny schemat daje juz BIALA ikonke kalendarza — stara regula styles.css (invert(1)
   dla wszystkich pol daty) robila z niej czarna na czarnym (zgloszenie Matta 11.10) */
.dlg-fld input[type="date"]::-webkit-calendar-picker-indicator { filter: none; opacity: 0.75; cursor: pointer; }
.dlg-fld input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* etykieta pola (od A3: zakoncz gre) */
.dlg-lbl { display: block; margin: 0 0 6px; font-size: var(--fs-tag); font-weight: 700; letter-spacing: 1.5px; color: var(--txt-dim); }
/* dwa pola obok siebie (czas i data) */
.dlg-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
/* pole z jednostka na koncu („h”) */
.dlg-unit { position: relative; }
.dlg-unit input { padding-right: 34px; }
.dlg-unit span {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--txt-dim); font-weight: 700; pointer-events: none;
  text-transform: none; /* telefon: regula etykiet w styles.css robila „H” */
}
.dlg-hint { margin-top: 6px; font-size: var(--fs-tag); color: var(--txt-dim); letter-spacing: 0.5px; }
.dlg-err { margin-top: 6px; font-size: var(--fs-small); color: var(--danger); font-weight: 600; line-height: 1.4; }
.dlg-err:empty { display: none; }
/* powitanie nad opisem (nick nowego gracza); gdy schowane, opis bez odstepu u gory */
.dlg-bd > [hidden] + .dlg-sub { margin-top: 0; }
/* atrybut hidden wygrywa z display przyciskow (X i ANULUJ chowane przy nowym graczu) */
.dlg-ovl [hidden] { display: none !important; }

/* --- kilka wyborow jeden pod drugim, ramka z informacja, lista (od B1) --- */
.dlg-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.dlg-acts .dlg-btn { width: 100%; }
.dlg-box {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: #0a0c10; border: 1px solid #1a1f25;
  font-size: var(--fs-small); line-height: 1.5; color: #aab3bc;
}
.dlg-box.center { text-align: center; }
.dlg-list { margin: 8px 0 0; padding-left: 20px; font-size: var(--fs-small); line-height: 1.7; color: #aab3bc; }
.dlg-mail { display: inline-block; margin-top: 4px; color: var(--accent); font-size: var(--fs-lead); font-weight: 700; letter-spacing: 0.5px; text-decoration: none; }
.dlg-mail:hover, .dlg-mail:focus-visible { text-decoration: underline; outline: none; }

/* --- gotowe wartosci (czas: 10/25/50/100 h), pole wyboru, plakietka (od B2) --- */
.dlg-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.dlg-chips button {
  height: 34px; padding: 0; margin: 0; border-radius: 8px; cursor: pointer;
  border: 1px solid #232a31; background: #0e1115; color: #c9d1d8;
  font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.5px; transition: 0.15s;
}
.dlg-chips button:hover, .dlg-chips button:focus-visible {
  border-color: var(--accent); color: var(--accent); outline: none;
  background: color-mix(in srgb, var(--accent) 8%, #0e1115);
}
.dlg-check {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid #1a1f25; background: #0a0c10; cursor: pointer;
  font-size: var(--fs-small); color: #c9d1d8;
}
.dlg-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.dlg-badge {
  display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 6px;
  font-size: var(--fs-tag); font-weight: 700; letter-spacing: 1.5px; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.dlg-val { display: block; margin-top: 2px; font-size: var(--fs-lead); font-weight: 700; color: var(--accent-social); }

/* --- okna Steama (od C1): stan niemozliwy w CZAS ZE STEAM = zolty jak dawniej (.stt-box.warn) --- */
#steam-time-modal .dlg-modal.warn { border-color: rgba(241, 196, 15, 0.45); }
#steam-time-modal .dlg-modal.warn .dlg-hd h2 i { color: #f1c40f !important; }
#steam-time-modal .dlg-modal.warn .stt-r.res { background: rgba(241, 196, 15, 0.08); }
#steam-time-modal .dlg-modal.warn .stt-r.res b { color: #f1c40f; }
#steam-time-modal .dlg-modal.warn .dlg-btn.pri { background: #f1c40f; border-color: #f1c40f; }
#steam-unlink-modal .sunl-opt:first-of-type { margin-top: 14px; }
/* polec znajomemu: gra w ramce jak .dlg-box, lista bez wlasnego odstepu z boku */
#recommendPicker .rec-picker-game { padding: 10px 12px; border-radius: 12px; border: 1px solid #1a1f25; background: #0a0c10; }
#recommendPicker .rec-picker-list { padding: 0; }

/* --- okna z lista (od C2): naglowek i szukanie stoja, przewija sie tylko lista --- */
.dlg-modal.dlg-tall { overflow: hidden; max-height: 85vh; }
.dlg-modal.dlg-tall.wide { max-width: 560px; }
.dlg-bd.dlg-bd-top { flex: 0 0 auto; padding-bottom: 12px; }
.dlg-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 16px 8px; scrollbar-width: thin; scrollbar-color: #2a3138 transparent; }
.dlg-search { position: relative; margin-top: 12px; }
.dlg-search > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--txt-dim); font-size: 13px; pointer-events: none; }
.dlg-search input { padding-left: 38px; }
.dlg-btn:disabled { opacity: 0.4; cursor: default; filter: none; }
/* listy Steama w oknach rodziny: dawne 7-9 px -> skala czcionek (minimum 11 px, notatki/czcionki.md) */
.dlg-ovl .spick-list, .dlg-ovl .swz-body { padding: 0 16px 8px; }
.dlg-ovl .spick-col b, .dlg-ovl .swz-col b { font-size: var(--fs-small); }
.dlg-ovl .spick-col em, .dlg-ovl .swz-col em { font-size: var(--fs-tag); line-height: 1.5; }
.dlg-ovl .swz-h { font-size: var(--fs-small); }
.dlg-ovl .swz-grp { font-size: var(--fs-tag); padding: 12px 0 6px; }
.dlg-ovl .swz-row { padding: 10px 0; }
.dlg-ovl .swz-lead { font-size: var(--fs-small); line-height: 1.6; padding: 0; border: 0; }
/* dodawanie gry w oknie BIBLIOTEKA STEAM (.sadd-*, od 15.10.2026 w rodzinie): skala czcionek, minimum 11 px */
.dlg-ovl .sadd-load, .dlg-ovl .sadd-n, .dlg-ovl .sadd-f input, .dlg-ovl .sadd-save, .dlg-ovl .sadd-cancel,
.dlg-ovl .sadd-auto-r b, .dlg-ovl .sadd-down span { font-size: var(--fs-small); }
.dlg-ovl .sadd-step, .dlg-ovl .sadd-m, .dlg-ovl .sadd-b, .dlg-ovl .sadd-f label, .dlg-ovl .sadd-src,
.dlg-ovl .sadd-auto-r { font-size: var(--fs-tag); }
.dlg-ovl .sadd-down b { font-size: var(--fs-body); }

/* --- przyciski: glowny --accent, zwykly obrys, niebezpieczny --danger --- */
.dlg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 16px; margin: 0; border-radius: 10px;
  font-size: var(--fs-small); font-weight: 700; letter-spacing: 1.5px;
  cursor: pointer; border: 1px solid #232a31; background: #0e1115; color: #c9d1d8;
  transition: 0.15s;
}
.dlg-btn:hover, .dlg-btn:focus-visible { border-color: #33404a; color: #fff; outline: none; }
.dlg-btn.pri { background: var(--accent); border-color: var(--accent); color: #000; }
.dlg-btn.pri:hover, .dlg-btn.pri:focus-visible { filter: brightness(1.1); color: #000; }
.dlg-btn.dng { background: var(--danger); border-color: var(--danger); color: #000; }
.dlg-btn.dng:hover, .dlg-btn.dng:focus-visible { filter: brightness(1.1); color: #000; }

/* --- telefon: plywajaca karta od dolu --- */
@media (max-width: 768px) {
  .dlg-ovl { padding: 10px 8px; align-items: flex-end; }
  .dlg-modal { max-height: calc(100dvh - 20px); border-radius: 16px; }
  /* pisanie w polu: okno do gory — na iPhonie klawiatura zaslania to, co przyklejone
     do dolu (dawne okno czasu bylo z tego powodu u gory, 11.10.2026). Data otwiera
     kalendarz, nie klawiature — zostaje na dole */
  /* klase .dlg-typing nadaje dialog.js (focusin/focusout) — dziala tez bez :has */
  .dlg-ovl.dlg-typing { align-items: flex-start; padding-top: 16px; }
}

/* ===== GRY BEZ KONCA (13.10.2026, notatki/gry-bez-konca.md) =====
   Okno POWROT DO GRY: dwie duze opcje (wariant 1 z mockupu) + pole „Gra bez konca” z opisem
   i podpowiedzia z IGDB (MMO / SYMULATOR). Okno ZAKONCZ GRE w trybie ODLOZ: jedno pole czasu. */
.dlg-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.dlg-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px;
  border-radius: 12px; border: 1px solid #1a1f25; background: #0a0c10;
  color: #fff; font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dlg-opt[hidden] { display: none; }
.dlg-opt:hover, .dlg-opt:focus-visible {
  outline: none; border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.dlg-opt.pri {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, #0a0c10);
}
.dlg-opt-ic {
  flex: 0 0 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: 15px;
}
.dlg-opt-tx { flex: 1; min-width: 0; }
.dlg-opt-tx b { display: block; font-size: var(--fs-small); letter-spacing: 1.5px; }
.dlg-opt-tx span { display: block; margin-top: 3px; font-size: var(--fs-small); color: var(--txt-dim); line-height: 1.4; }
.dlg-chk-tx { flex: 1; min-width: 0; line-height: 1.4; text-transform: none; letter-spacing: 0; }
.dlg-chk-tx > i { color: var(--sys); margin-right: 6px; }
.dlg-chk-tx small { display: block; margin-top: 2px; font-size: 11px; color: var(--txt-dim); }
.dlg-hint {
  display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 5px; vertical-align: 1px;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--sys);
  border: 1px solid color-mix(in srgb, var(--sys) 40%, transparent);
}
.dlg-hint[hidden] { display: none; }
.dlg-row2.jeden { grid-template-columns: minmax(0, 1fr); }