/* ============================================================
   Funkcja 3 — STATYSTYKI jako OSOBNY WIDOK.
   Pełnoekranowa nakładka (#statsView) pokazywana przy #/stats. Leży NAD tablicą
   (tablica pod spodem zostaje nietknięta) i ma własne tło + przewijanie.
   Kafelki wzorowane na scenie „Statystyki okna" z prototypu.
   ============================================================ */

/* wejście: pozycja w menu ⚙ dokładana przez JS — używa istniejącej klasy .controls button,
   więc wygląda jak reszta menu. Tu tylko drobny akcent ikony. */
#btnStats .lbl{white-space:nowrap}

/* nakładka widoku */
#statsView{
  position:fixed;inset:0;z-index:80;display:none;overflow-y:auto;
  background:radial-gradient(120% 80% at 50% -10%, #131a26 0%, var(--bg) 60%), var(--bg);
  color:var(--ink);font-family:"Barlow",system-ui,sans-serif;
  padding:calc(env(safe-area-inset-top,0px) + 1rem) 1.1rem calc(env(safe-area-inset-bottom,0px) + 1.2rem);
  -webkit-font-smoothing:antialiased;
}
#statsView.open{display:block}

.stx-head{display:flex;align-items:center;gap:.6em;margin-bottom:1rem;flex-wrap:wrap}
.stx-head .badge{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1rem;
  letter-spacing:.04em;color:var(--bg);background:var(--amber);padding:.16em .5em;border-radius:3px}
.stx-head h2{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:1.4rem;
  color:var(--ink);line-height:1}
.stx-head .sub{font-family:"JetBrains Mono",monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}

/* przełącznik zakresu + zamknięcie */
.stx-tools{margin-left:auto;display:flex;align-items:center;gap:.5em}
.stx-range{display:inline-flex;border:1px solid var(--line-bright);border-radius:8px;overflow:hidden}
.stx-range button{font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--ink-dim);
  background:var(--bg-panel);border:none;padding:.45em .8em;cursor:pointer;letter-spacing:.04em}
.stx-range button[aria-pressed="true"]{color:var(--bg);background:var(--amber);font-weight:700}
.stx-close{font-family:"JetBrains Mono",monospace;font-size:1.1rem;line-height:1;color:var(--ink-dim);
  background:var(--bg-panel);border:1px solid var(--line-bright);border-radius:8px;
  padding:.3em .5em;cursor:pointer}
.stx-close:hover{color:var(--amber);border-color:var(--amber-dim)}

/* siatka kafelków */
.stx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}
.stat{background:var(--bg-panel);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;
  min-height:0}
.stat .n{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:2rem;color:var(--amber);
  line-height:1}
.stat .n small{font-size:.9rem;color:var(--ink-dim);font-weight:400}
.stat .l{font-family:"Barlow",sans-serif;font-size:.82rem;color:var(--ink-dim);margin-top:.35em}
.stat .sub{font-family:"JetBrains Mono",monospace;font-size:.68rem;color:var(--ink-faint);margin-top:.45em;
  line-height:1.4}
.stat.wide{grid-column:1/-1}

/* histogram godzinowy (24 słupki) */
.spark{display:flex;align-items:flex-end;gap:2px;height:56px;margin-top:.6em}
.spark i{flex:1;background:var(--amber-dim);border-radius:2px 2px 0 0;min-height:2px;opacity:.85;
  position:relative;transition:height .3s}
.spark i.now{background:var(--amber);box-shadow:0 0 8px rgba(255,182,39,.5)}
.spark-axis{display:flex;justify-content:space-between;font-family:"JetBrains Mono",monospace;
  font-size:.56rem;color:var(--ink-faint);margin-top:.3em;letter-spacing:.02em}

/* listy relacji */
.stx-rel{display:flex;flex-direction:column;gap:.4em;margin-top:.5em}
.stx-rel .row{display:flex;align-items:baseline;gap:.5em;font-size:.82rem;color:var(--ink-dim)}
.stx-rel .row b{color:var(--ink);font-weight:600}
.stx-rel .row .c{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:.76rem;color:var(--amber)}
.stx-rel .row .cat{font-family:"JetBrains Mono",monospace;font-size:.66rem;color:var(--ink-faint)}

/* mistrz opóźnień */
.stat.champ .n{color:var(--red)}
.stat.champ .sub b{color:var(--ink)}

/* stan pusty / błąd */
.stx-empty{grid-column:1/-1;text-align:center;padding:2.5rem 1rem;color:var(--ink-dim);
  font-family:"Barlow Condensed",sans-serif;font-size:1.3rem}
.stx-empty .ico{font-size:2.2rem;opacity:.5;display:block;margin-bottom:.4em}

@media(prefers-reduced-motion:reduce){
  .spark i{transition:none}
}