/* ============================================================================
   JoeQUIZ · token e componenti condivisi.

   I valori vengono da docs/20-design/DESIGN-NOTES.md, che descrive il prototipo
   COSTRUITO (non il prompt che lo ha generato: dove i due divergono vince quello).
   Il prototipo Lovable resta riferimento visivo: qui non c'e' una riga importata,
   ci sono i token riscritti in CSS puro, senza Tailwind e senza build (D79).

   L'ELEMENTO FIRMA e' la barra: solida, spigoli vivi, mai un anello circolare, mai
   una linea sottile. Fa quattro mestieri — countdown, miccia, punteggio, banca di
   tempo del finale — ed e' la cosa per cui il gioco va ricordato. Sotto il 25%
   vira a fiamma e pulsa.
   ============================================================================ */

:root {
  --ink:        oklch(0.245 0.055 295);   /* fondo di tutto */
  --ink-soft:   oklch(0.315 0.052 297);   /* superficie sollevata */
  --paper:      oklch(0.955 0.028 84);    /* l'unica superficie chiara: classifiche */
  --flame:      oklch(0.688 0.176 38);    /* urgenza */
  --azzurro:    oklch(0.665 0.145 250);   /* conferma, "tu", focus */
  --muted-ink:  oklch(0.702 0.038 290);   /* testo di servizio */

  /* Quattro colori riservati alle risposte e a NIENTE altro.
     Il colore non viaggia mai da solo: lettera + glifo + testo sono sempre
     presenti, cosi' il gioco e' giocabile daltonici e si puo' gridare
     "il quadrato!" ad alta voce. */
  --answer-a:   oklch(0.665 0.145 250);   /* A ▲ azzurro */
  --answer-b:   oklch(0.795 0.135 76);    /* B ● miele  */
  --answer-c:   oklch(0.625 0.152 18);    /* C ■ mattone */
  --answer-d:   oklch(0.615 0.135 305);   /* D ◆ prugna */

  --radius: 1.1rem;

  --font-display: "Bricolage Grotesque", "Archivo Black", system-ui, sans-serif;
  --font-sans:    "Nunito", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}

* { box-sizing: border-box; }

body.jq {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

.jq-display-face { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }

/* OGNI cifra che cambia nel tempo sta qui dentro. Le cifre proporzionali fanno
   ballare un countdown, ed e' il genere di dettaglio che si nota senza saperlo. */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ la barra */

.jq-bar {
  position: relative;
  height: 14px;
  width: 100%;
  background: color-mix(in oklch, var(--ink-soft) 70%, transparent);
  overflow: hidden;                 /* spigoli vivi: nessun border-radius */
}
.jq-bar__fill {
  height: 100%;
  background: var(--azzurro);
  transform-origin: left center;
  transition: transform 220ms linear, background-color 220ms linear;
}
.jq-bar--critico .jq-bar__fill { background: var(--flame); }
.jq-bar--critico { animation: jq-pulse 900ms ease-in-out infinite; }

@keyframes jq-pulse {
  0%, 100% { box-shadow: inset 0 0 0 0 var(--flame); }
  50%      { box-shadow: inset 0 0 0 2px var(--flame); }
}

/* ------------------------------------------------------------- le risposte */

.jq-risposte { display: grid; gap: 12px; }

.jq-risposta {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 76px; padding: 14px 18px;
  border: none; border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 700;
  color: var(--paper); text-align: left; cursor: pointer;
  transition: transform 120ms ease, opacity 160ms ease;
}
.jq-risposta:active { transform: scale(0.985); }

.jq-risposta[data-slot="0"] { background: var(--answer-a); }
.jq-risposta[data-slot="1"] { background: var(--answer-b); color: var(--ink); }
.jq-risposta[data-slot="2"] { background: var(--answer-c); }
.jq-risposta[data-slot="3"] { background: var(--answer-d); }

.jq-risposta__glifo {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.22); border-radius: 10px;
  font-family: var(--font-mono); font-weight: 700;
}

.jq-risposta[aria-pressed="true"] { outline: 4px solid var(--paper); outline-offset: 3px; }
.jq-risposta[disabled] { cursor: default; }
.jq-risposta--spenta { opacity: 0.32; }
.jq-risposta--giusta { outline: 4px solid var(--paper); outline-offset: 3px; }

/* ------------------------------------------------------- sipario di partenza */

/* La partenza sincronizzata: la domanda e' gia' arrivata ma resta COPERTA fino
   all'istante condiviso. Non e' un caricamento — i dati ci sono gia' — quindi non
   si mostra uno spinner: si mostra un conto alla rovescia, che e' la verita'. */
.jq-sipario {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: var(--ink);
}
.jq-sipario__numero { font-family: var(--font-display); font-size: 22vh; line-height: 1; }

/* --------------------------------------------------------------- giocatori */

.jq-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--ink-soft);
}
.jq-chip--io { outline: 2px solid var(--azzurro); }
.jq-chip--assente { opacity: 0.45; }
.jq-chip__iniziali {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--azzurro); color: var(--ink);
  font-family: var(--font-mono); font-weight: 700;
}
.jq-chip__nome { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jq-chip__stato { font-size: 0.8rem; color: var(--muted-ink); }

/* La classifica e' l'unica superficie chiara: e' una pagina stampata. */
.jq-classifica { background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 16px; }
.jq-classifica .jq-chip { background: rgba(0,0,0,0.05); }
.jq-classifica .jq-chip__stato { color: color-mix(in oklch, var(--ink) 60%, transparent); }

/* --------------------------------------------------------------- di servizio */

.jq-etichetta { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.12em;
                text-transform: uppercase; color: var(--muted-ink); }
.jq-codice { font-family: var(--font-mono); font-size: 2.6rem; letter-spacing: 0.22em; }

.jq-bottone {
  display: block; width: 100%; padding: 16px; border: none; border-radius: var(--radius);
  background: var(--azzurro); color: var(--ink);
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 800; cursor: pointer;
}
.jq-bottone--fiamma { background: var(--flame); color: var(--paper); }
.jq-bottone--fantasma { background: transparent; color: var(--paper); outline: 2px solid var(--ink-soft); }
.jq-bottone[disabled] { opacity: 0.4; cursor: default; }

.jq-campo {
  width: 100%; padding: 14px 16px; border: 2px solid var(--ink-soft); border-radius: var(--radius);
  background: var(--ink-soft); color: var(--paper); font-family: var(--font-sans); font-size: 1.05rem;
}
.jq-campo:focus { outline: 3px solid var(--azzurro); outline-offset: 3px; border-color: var(--azzurro); }

/* Gli errori dicono cosa e' successo e cosa fare. Mai scuse, mai frasi generiche. */
.jq-errore { padding: 12px 14px; border-radius: var(--radius);
             background: color-mix(in oklch, var(--flame) 22%, var(--ink));
             outline: 1px solid var(--flame); }

:focus-visible { outline: 3px solid var(--azzurro); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .jq-bar--critico { animation: none; }   /* resta visibile, fissa */
}