/* ═══════════════════════════════════════════════════════════════════
   STATYSTYKI LEKCJI — okno „Kto dziś gra?” i notka „Prywatność”
   (lekcja-4-5-integracja/statystyki.js). Wygląd tablicy: ciemne tło
   ekranu startowego, przyciski .bd-btn z arkusza tablicy.
   ═══════════════════════════════════════════════════════════════════ */
.st-ekran{
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center;
  padding:16px; overflow-y:auto;
  background:rgba(8,14,11,.86); backdrop-filter:blur(4px);
  font-family:'Satoshi', system-ui, sans-serif; color:#f4f1e8;
}
.st-okno{
  width:min(100%, 560px); max-height:calc(100dvh - 32px); overflow-y:auto;
  padding:clamp(20px, 4vw, 34px);
  background:#0d1512; border:1px solid rgba(182,213,170,.28); border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  text-align:center;
}
.st-tytul{ font-family:'Cabinet Grotesk', system-ui, sans-serif; font-weight:800;
  font-size:clamp(24px, 4vw, 34px); line-height:1.1; margin:0 0 10px; }
.st-wstep{ margin:0 auto 22px; max-width:42ch; font-size:16px; line-height:1.55; opacity:.88; }

.st-odpowiedzi{ display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.st-odpowiedzi .bd-btn{ min-height:52px; font-size:16px; }
.st-odpowiedzi--klasa{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); }

.st-pomin{
  margin-top:14px; min-height:44px; padding:8px 18px;
  font:inherit; font-size:15px; color:#f4f1e8; opacity:.8;
  background:none; border:0; text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.st-pomin:hover{ opacity:1; }
.st-pomin:focus-visible, .st-opcja:focus-visible, .st-pole:focus-visible{ outline:3px solid #7db8ff; outline-offset:2px; }

.st-pola{ display:grid; gap:6px; text-align:left; margin-bottom:12px; }
.st-etykieta{ font-weight:700; font-size:14px; margin-top:8px; }
.st-pole{
  width:100%; min-height:48px; padding:10px 14px;
  font:inherit; font-size:16px; color:#1a1f1a;
  background:#fdfdfb; border:2px solid rgba(182,213,170,.5); border-radius:12px;
}
.st-pole:disabled{ background:#d9ddd6; color:#5d665c; }
.st-szukaj{ position:relative; }
.st-lista{ display:grid; gap:4px; margin-top:6px; }
.st-lista:empty{ display:none; }
.st-opcja{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 12px;
  min-height:44px; padding:8px 12px; text-align:left;
  font:inherit; color:#f4f1e8; background:rgba(253,253,251,.08);
  border:1px solid rgba(182,213,170,.3); border-radius:10px; cursor:pointer;
}
.st-opcja:hover{ background:rgba(253,253,251,.16); }
.st-opcja span{ font-size:13px; opacity:.75; }
.st-brak{ margin:6px 0 0; font-size:14px; opacity:.8; }
.st-wybrana{ min-height:1.5em; margin:4px 0 14px; font-size:15px; color:#b6e3a4; text-align:left; }

/* notka na ekranie startowym */
.st-prywatnosc{ margin:18px auto 0; max-width:60ch; font-size:13.5px; line-height:1.55; text-align:center; }
.st-prywatnosc summary{ display:inline-flex; align-items:center; min-height:44px; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; opacity:.85; }
.st-prywatnosc summary:hover{ opacity:1; }
.st-prywatnosc summary:focus-visible{ outline:3px solid #7db8ff; outline-offset:2px; }
.st-prywatnosc p{ margin:6px 0 0; padding:12px 14px; text-align:left; background:rgba(8,14,11,.72); border-radius:12px; opacity:.92; }

@media (prefers-reduced-motion: reduce){ .st-ekran{ backdrop-filter:none; } }