/*
 * Officina 2.0 — foglio di stile comune alle tre superfici.
 *
 * Lo stile e' quello del sito dell'associazione (apsofficina.it), rilevato
 * dal sito stesso il 30/08/2026: fondo crema #FFFBF5 con la trama in
 * filigrana, Nunito, titoli in arancio bruciato #B35F00, accenti #F39200,
 * testo quasi nero #17140F. Il font e' servito in locale (OFL): la serata
 * non deve dipendere dalla connessione del locale.
 *
 * Tre temi, un solo insieme di variabili:
 *
 *  - **chiaro** (predefinito): la pagina del sito Officina. Crema, trama
 *    leggera, titoli arancio bruciato. Regia e telefoni vivono qui.
 *  - **proiettore** (`data-tema="officina"`): arancio pieno di fondo, come
 *    dice la specifica §10 — su un proiettore mediocre l'arancio pieno tiene
 *    meglio del chiaro, che in sala buia acceca.
 *  - **scuro** (`data-scuro="1"`, solo telefoni): sala buia, telefono a due
 *    palmi dalla faccia.
 *
 * Regola che non cambia col tema: le opzioni si distinguono per LETTERA
 * (A–E in medaglia), non per colore.
 */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/assets/font/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/assets/font/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* La tavolozza del sito Officina. */
  --arancio: #F39200;          /* l'arancio del marchio */
  --arancio-pieno: #F2681F;    /* l'arancio del proiettore (specifica §10) */
  --arancio-bruciato: #B35F00; /* i titoli del sito */
  --arancio-cupo: #D4550F;
  --nero: #17140F;
  --nero-morbido: #2A2320;
  --crema: #FFFBF5;            /* il fondo del sito */
  --crema-scura: #FFF1DC;

  /* I ruoli, che cambiano col tema. Predefinito: lo stile del sito. */
  --fondo: var(--crema);
  --inchiostro: var(--nero);
  --titolo: var(--arancio-bruciato);
  --riquadro: #FFFFFF;
  --riquadro-testo: var(--nero);
  --bordo: #EBDCC3;
  --accento: var(--arancio);
  --su-accento: var(--nero);   /* il testo sui pulsanti pieni: sull'arancio si legge il nero */

  /* La trama in filigrana, come sul sito. */
  --trama: url('/assets/trama-officina.png');
  --trama-forza: .10;

  --raggio: 14px;
  --carattere: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Il tema del proiettore in sala: arancio pieno (specifica §10). */
:root[data-tema="officina"] {
  --trama-forza: .16;
  --fondo: var(--arancio-pieno);
  --inchiostro: var(--nero);
  --titolo: var(--nero);
  --riquadro: var(--nero);
  --riquadro-testo: var(--crema);
  --bordo: var(--nero);
  --accento: var(--nero);
  --su-accento: var(--crema);
}

/* Modalita' scura, solo per i telefoni. */
:root[data-scuro="1"] {
  --trama-forza: 0;
  --fondo: var(--nero);
  --inchiostro: var(--crema);
  --titolo: var(--arancio);
  --riquadro: var(--nero-morbido);
  --riquadro-testo: var(--crema);
  --bordo: #4A403A;
  --accento: var(--arancio);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/*
 * `hidden` nasconde SEMPRE. Il foglio del browser lo implementa con un
 * `display: none` debolissimo, che qualsiasi `display` d'autore scavalca: e'
 * successo tre volte (le opzioni sotto le schermate, l'anteprima vuota
 * dell'editor, i due moduli del telefono insieme). Una regola sola, qui, e la
 * trappola e' chiusa per tutte le pagine — anche per gli SVG.
 */
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--fondo);
  color: var(--inchiostro);
  font: 16px/1.45 var(--carattere);
  padding: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  overflow-wrap: break-word;
}

/*
 * La trama sta su uno strato suo, dietro al contenuto.
 *
 * Non e' un `background-image` del body perche' li' non si puo' smorzare:
 * l'opacita' del fondo si porterebbe dietro anche il testo. Con `multiply` i
 * segni diventano arancio scuro sull'arancio invece di schiarirlo, che e' come
 * lo vuole la specifica §10.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--trama);
  background-size: var(--trama-scala, 288px) var(--trama-scala, 288px);
  opacity: var(--trama-forza);
  mix-blend-mode: var(--trama-fusione, multiply);
  filter: var(--trama-filtro, none);
}

h1 {
  font-size: 20px; margin: 0 0 10px; letter-spacing: .01em;
  font-weight: 800; color: var(--titolo);
}
h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  margin: 0 0 6px; font-weight: 800; color: var(--titolo);
}
.riquadro h2 { color: inherit; opacity: .7; }

/* ------------------------------------------------------------------ blocchi */

.riquadro {
  background: var(--riquadro);
  color: var(--riquadro-testo);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(23, 20, 15, .05);
}

.riga {
  display: flex; justify-content: space-between; gap: 12px;
  font-variant-numeric: tabular-nums;
}
.riga + .riga { margin-top: 3px; }
.riga > :last-child { font-weight: 700; }
.fioco { opacity: .65; font-weight: 400 !important; }

.barra { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }

/* ------------------------------------------------------------------ comandi */

/*
 * `color: inherit` non e' un dettaglio: senza, il pulsante prende il proprio
 * colore predefinito e dentro un riquadro scuro diventa nero su nero, cioe'
 * invisibile. E' successo, e non si vedeva mezza regia.
 *
 * Il bordo e' `currentColor` smorzato, non pieno: cosi' resta visibile su
 * qualsiasi fondo (chiaro, arancio, scuro) ma non riempie la pagina di nero —
 * lo stile e' quello leggero dell'editor, che e' quello scelto da Crescenzo.
 */
button, .bottone {
  font: inherit; font-weight: 800;
  color: inherit;
  border: 1.5px solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 4%, transparent);
  padding: 8px 14px; cursor: pointer; text-decoration: none;
  transition: transform .08s ease, background .12s ease;
}
button:hover, .bottone:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
button:active, .bottone:active {
  background: color-mix(in srgb, currentColor 18%, transparent);
  transform: scale(.96);
}
button[disabled] { opacity: .4; cursor: default; }

/*
 * Il pulsante principale della pagina: pieno d'arancio come «Salva»
 * nell'editor. Nel tema del proiettore l'accento e' il nero, e va bene cosi'.
 */
.primario, button.primario {
  background: var(--accento); border-color: var(--accento); color: var(--su-accento, var(--nero));
}
/* Hover e pressione con un alone, non scurendo: sull'arancio il testo e' nero,
   e l'arancio scurito lo rendeva illeggibile (sul telefono l'hover resta
   attaccato dopo il tocco). L'alone lascia il contrasto com'e' in ogni tema. */
@media (hover: hover) {
  .primario:hover, button.primario:hover {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accento) 30%, transparent);
  }
}
.primario:active, button.primario:active {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accento) 40%, transparent);
  transform: translateY(1px);
}
/* Un interruttore acceso e' arancio, mai nero: richiesta di Crescenzo (31/08). */
button[aria-pressed="true"],
.riquadro button[aria-pressed="true"] {
  background: var(--arancio);
  color: var(--nero);
  border-color: var(--nero);
}

button:focus-visible, .bottone:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--accento);
  outline-offset: 2px;
}

/* I campi restano sempre chiari: si scrive dentro, e si deve vedere. */
input, select {
  font: inherit; padding: 8px 10px; border-radius: 8px; min-width: 0;
  border: 2px solid var(--bordo);
  background: #FFFFFF;
  color: var(--nero);
}
input[type="checkbox"] { width: auto; accent-color: var(--arancio-cupo); }

/* --------------------------------------------------------------- le opzioni */

.opzioni { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/*
 * Le carte delle risposte sono CHIARE in tutti i temi — mai nere (richiesta
 * di Crescenzo, 31/08). I colori arrivano dal tema della partita (--carta,
 * --giusta, --medaglia: vedi public/lib/temi.js); senza tema, quelli di
 * Officina. La lettera in medaglia e' l'identita' dell'opzione.
 */
.opzione {
  display: flex; align-items: center; gap: 12px;
  background: var(--carta, var(--crema)); color: var(--carta-testo, var(--nero));
  border: 2px solid color-mix(in srgb, var(--carta-testo, var(--nero)) 50%, transparent);
  border-radius: 14px;
  padding: 18px 14px; text-align: left; min-height: 68px;
  transition: background .12s, color .12s;
  box-shadow: 0 2px 8px rgba(23, 20, 15, .08);
}
.opzione:hover { background: var(--carta, var(--crema)); }
.opzione:disabled { opacity: 1; }          /* chiuse, non spente */
.opzione[aria-pressed="true"] {
  background: var(--giusta, var(--arancio)); color: var(--nero); border-color: var(--nero);
  outline: 3px solid var(--nero); outline-offset: -7px;
}

/* Alla rivelazione la corretta si accende d'arancio. */
.opzione.giusta { background: var(--giusta, var(--arancio)); color: var(--nero); border-color: var(--nero); }
.opzione.sbagliata { opacity: .35; }

.etichetta { flex: 1; }
.conteggio { font-variant-numeric: tabular-nums; opacity: .75; font-size: 14px; }

/* ---------------------------------------------------------------- classifica */

.classifica { list-style: none; margin: 0; padding: 0; font-variant-numeric: tabular-nums; }
.classifica li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 6px 0; border-top: 1px solid currentColor;
}
.classifica li:first-child { border-top: none; }
.classifica .posto { opacity: .55; min-width: 1.6em; }
.classifica .nome { flex: 1; font-weight: 700; }

/* -------------------------------------------------------------------- avvisi */

/* Bordo pieno: il tratteggio e' solo per «aggiungi» (vedi .pericolo). */
.avviso {
  border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent);
  border-left: 5px solid var(--arancio-cupo); border-radius: var(--raggio);
  padding: 12px; margin-bottom: 10px; font-size: 14px;
}

/*
 * Gli errori in arancio bruciato, non nell'arancio del marchio: #F39200 su
 * bianco sta a 2:1 di contrasto e un errore che non si legge e' peggio di
 * nessun errore. Sul tema del proiettore e nello scuro il titolo e' gia' il
 * colore giusto per quel fondo.
 */
.errore { color: var(--titolo); font-weight: 800; }

/* L'esito dell'ultimo comando: una riga sola, sempre in vista, che dice se il
   pulsante appena premuto ha fatto qualcosa (o perche' no). */
.esito { font-size: 13px; min-height: 1.3em; transition: opacity .3s; }
.esito.errore::before { content: '⚠ '; }
.esito.ok { color: inherit; opacity: .75; font-weight: 700; }

/* Un campo con la sua etichetta VISIBILE sopra: un numero senza nome («3»)
   non dice a nessuno cosa sta chiedendo. */
.campo-etichettato {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; font-weight: 800; opacity: .9;
}
.campo-etichettato input, .campo-etichettato select { font-weight: 400; font-size: 16px; }
.modulo { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.modulo .campo-etichettato input { width: 100%; }
.riga-modulo { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.riga-modulo button { flex: 1; min-width: 8em; }

/* Due o tre scelte che si escludono: un blocco solo, non pulsanti sparsi. */
.segmenti {
  display: flex; padding: 3px; gap: 3px; margin-bottom: 12px;
  border-radius: 999px; background: color-mix(in srgb, currentColor 8%, transparent);
}
.segmenti button { flex: 1; border-color: transparent; background: transparent; padding: 7px 10px; }
.segmenti button[aria-pressed="true"] { border-color: var(--nero); }

/* Pulsante con sola icona: tondo, icona disegnata in currentColor. */
button.icona { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
button.icona svg { width: 18px; height: 18px; fill: currentColor; }

/* Il logo di Officina ha la lampadina arancione: su un fondo arancione
   sparirebbe e resterebbe solo la scritta. Dove il fondo e' caldo, sta su una
   targhetta crema. */
img.targhetta {
  background: var(--crema); padding: .5em 1em; border-radius: 12px;
  box-sizing: content-box; box-shadow: 0 2px 10px rgba(23, 20, 15, .08);
}

/* Le caselle con la loro etichetta: si toccano sull'etichetta intera. */
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 28px; display: inline-flex; align-items: center; gap: 6px; }

/* I link nel testo: dello stesso colore del testo, sottolineati d'arancio. */
a:not(.bottone) { color: inherit; font-weight: 700; text-decoration-color: var(--arancio); text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* Presente per chi usa un lettore di schermo, invisibile per chi guarda. */
.solo-lettori {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px;
}

/* Lo stato vuoto: quando non c'e' ancora niente da mostrare, lo si dice. */
.vuoto { opacity: .6; font-style: normal; font-weight: 600; padding: 6px 0; }

/* ------------------------------------------------- superfici di lavoro */

/*
 * La barra in alto di regia ed editor: la stessa nelle due pagine, cosi'
 * passare dall'una all'altra non spaesa. Logo, dove sei, azioni, chiave.
 */
.barra-app {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; min-height: 54px;
  background: var(--riquadro); color: var(--riquadro-testo);
  border-bottom: 3px solid var(--arancio);
  box-shadow: 0 2px 12px rgba(23, 20, 15, .07);
  position: relative; z-index: 20;
}
.barra-app h1 { margin: 0; font-size: 17px; }
.barra-app input, .barra-app button, .barra-app .bottone { font-size: 13px; }
.barra-app .spazio { flex: 1; }
.logo-app { display: inline-flex; align-items: center; }
.logo-app img { height: 30px; display: block; }
.chiave-app { display: inline-flex; align-items: center; gap: 4px; }
.chiave-app[hidden] { display: none; }
.chiave-app input { width: 7.5em; padding: 5px 9px; }
.chiave-app #stato-chiave { font-weight: 800; min-width: 1em; }

/*
 * La fila «Regia · Partite · Banca domande» (la monta menu.js): le tre
 * pagine sempre nello stesso ordine e nello stesso punto. Linguette a raggio
 * piccolo e non pillole, perche' le pillole sono i pulsanti d'azione; la
 * pagina corrente e' piena d'arancio e non e' un link.
 */
.nav-app {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 10px; background: var(--crema-scura);
}
.nav-app a, .nav-app [aria-current] {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 7px; white-space: nowrap;
  font-size: 14px; font-weight: 800; line-height: 1.3;
  color: var(--nero); text-decoration: none;
}
.nav-app a:hover { background: color-mix(in srgb, var(--arancio) 22%, transparent); }
.nav-app a:focus-visible { outline: 3px solid var(--arancio-cupo); outline-offset: 1px; }
.nav-app [aria-current="page"] { background: var(--arancio); }
.nav-app .freccia { font-size: 11px; opacity: .7; }

/*
 * Il tipo di una slide, uguale in editor e regia. Testo sempre leggibile:
 * nero sui chiari e sugli aranci, crema solo sui fondi scuri.
 */
.tipo {
  display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: .05em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px; margin-right: 6px;
  white-space: nowrap; vertical-align: 1px;
}
.tipo.domanda   { background: var(--arancio); color: var(--nero); }
.tipo.ordine    { background: #F9B995; color: var(--nero); }
.tipo.banca     { background: var(--arancio-bruciato); color: #FFFFFF; }
.tipo.casuale   { background: var(--crema-scura); color: var(--nero); box-shadow: inset 0 0 0 1.5px var(--arancio-bruciato); }
.tipo.schermata { background: var(--nero-morbido); color: var(--crema); }

/*
 * Le azioni che distruggono (Elimina): bordo pieno arancio cupo, testo nero,
 * il cestino davanti. Niente tratteggio: il tratteggio e' solo per
 * «aggiungi» (la scheda «Nuova partita», le zone dove si lascia un file), e
 * un Elimina tratteggiato si leggeva come la stessa famiglia di «Nuova».
 * Un'azione pericolosa che non butta via niente (Chiudi serata) toglie il
 * cestino con `--icona-pericolo: none`.
 */
button.pericolo, .bottone.pericolo {
  border-style: solid; border-color: var(--arancio-cupo); color: var(--nero);
}
button.pericolo::before, .bottone.pericolo::before {
  content: var(--icona-pericolo, '🗑'); margin-right: .35em; font-weight: 400; line-height: 1;
}
button.pericolo:hover, .bottone.pericolo:hover { background: color-mix(in srgb, var(--arancio-cupo) 12%, transparent); }

/*
 * Uno stato, non un comando: testo con la sua icona, angoli appena smussati,
 * niente bordo a pillola. Le pillole sono i pulsanti: uno stato con la loro
 * faccia lo si tocca per vedere cosa fa (e' successo con «Accesso regia»).
 */
.etichetta-stato {
  display: inline-flex; align-items: center; gap: .4em;
  padding: 3px 8px; border: 0; border-radius: 6px;
  background: color-mix(in srgb, var(--arancio) 12%, transparent);
  font-size: 13px; font-weight: 800; line-height: 1.3; cursor: default;
}

/*
 * Le spie: fatto o non ancora si legge dalla FORMA, non solo dal colore (la
 * sala e' buia e i colori di Officina sono tutti caldi). Fatto: tondo pieno
 * arancio col ✓. Non ancora: tondo vuoto. L'icona la mette il foglio: nel
 * testo niente ✓ o ●.
 */
.spia-ok, .spia-no { display: inline-flex; align-items: center; gap: .4em; }
.spia-ok::before, .spia-no::before {
  content: ''; flex: none; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4em; height: 1.4em; border-radius: 50%;
  font-size: .85em; font-weight: 900; line-height: 1;
}
.spia-ok::before { content: '✓'; background: var(--arancio); color: var(--nero); }
.spia-no::before { border: 2px solid var(--arancio-cupo); background: transparent; }

/* L'avviso con «Annulla»: compare in basso dopo un'azione, per qualche secondo. */
.avviso-annulla {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 80;
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  background: var(--nero-morbido); color: var(--crema); border-radius: 999px;
  padding: 10px 12px 10px 20px; font-weight: 700; box-shadow: 0 10px 30px rgba(23, 20, 15, .3);
}
.avviso-annulla button { color: var(--nero); background: var(--arancio); border-color: var(--arancio); padding: 6px 14px; }

/* La chiave di regia, una volta riconosciuta, si riduce a un'etichetta di
   stato (si cambia dal menù ☰). */
.chiave-app .accesso-ok { white-space: nowrap; }

/* Una finestra sopra la pagina (le guide): chiara, col bordo del marchio. */
.finestra {
  position: fixed; z-index: 50; top: 70px; right: 16px; width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 90px); overflow-y: auto;
  background: var(--riquadro); color: var(--riquadro-testo);
  border: 1px solid var(--bordo); border-top: 4px solid var(--arancio);
  border-radius: var(--raggio); padding: 16px 18px;
  box-shadow: 0 18px 50px rgba(23, 20, 15, .28);
}