/* ═══════════════════════════════════════════
   RESULTS.CSS
   Ecrã de resultados (#screen-results):
   cabeçalho e grelha de cartões de estatísticas.
   Os cartões (.sbox) são usados também no dashboard.
═══════════════════════════════════════════ */

#screen-results {
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 30px;
}

/* Cabeçalho "Fim!" */
.res-head    { text-align: center; }
.res-head h2 { font-size: clamp(3rem, 10vw, 6rem); color: var(--accent); }
.res-head p  { font-size: 13px; letter-spacing: 1px; color: var(--muted); margin-top: 6px; }

/* ── Grelha de cartões de estatísticas ──────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  width: 100%; max-width: 640px;
}

/* Cartão individual */
.sbox      { border: 1px solid var(--border); padding: 18px 14px; border-radius: var(--radius);
             display: flex; flex-direction: column; gap: 3px; background: var(--panel); position: relative; overflow: hidden; }
.sbox::before { content: ''; position: absolute; top:0; left:0; right:0; height: 3px; background: var(--border); }

.sbox .sl  { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.sbox .sv  { font-size: 2rem; font-weight: 600; line-height: 1; letter-spacing: 0; color: var(--text); }
.sbox .ss  { font-size: 10px; color: var(--muted); margin-top: 4px; }

/* Variantes de cor por tipo de métrica */
.sbox.h::before  { background: var(--human); }
.sbox.a::before  { background: var(--ai); }
.sbox.w::before  { background: var(--warning); }
.sbox.ac::before { background: var(--accent); }