/* Aspetto da tavola di disegno: fondo carta per l'involucro dell'applicazione,
   bianco per l'area di disegno e per le barre dei selettori. Un colore per
   ciascuna sezione e uno per ciascun metodo di rappresentazione.
   Comandi grandi, leggibili anche proiettati alla LIM. */

:root {
  --carta: #FAF6EE;
  --carta-chiara: #ffffff;
  --inchiostro: #2A2A28;
  --inchiostro-tenue: #6b6b66;
  --bordo: #e4ddcd;
  --accento: #8C5A63;
  --leggibilita: #4A5C86;   /* blu indaco del pulsante degli aiuti alla lettura */
  --matita: #7a746a;

  /* le sezioni dell'applicazione */
  --sez-esploratore: #3E6068;
  --sez-palestra: #A24E36;

  /* i quattro metodi di rappresentazione */
  --met-ortogonali: #5C7A8A;
  --met-assonometria: #7C8B6E;
  --met-prospettiva: #A98A3E;
  --met-sezioni: #B8794F;

  /* i tre piani del marchio */
  --bianco-piano: #FCFAF5;
  --grigio-piano: #B9B3A6;
  --nero-piano: #2E2C28;

  /* colori del disegno tecnico: restano quelli della tavola */
  --blu: #14457c;
  --blu-chiaro: #dbe6f2;
  --richiamo: #8a9bb0;
  --evidenza: #b4451f;
  --griglia: #e6e2d8;

  --raggio: 9px;
  --spessore-grosso: 2px;
  --spessore-fine: 1px;
  /* i comandi devono lasciare il più possibile al disegno */
  --altezza-comando: 40px;
  --testo-comando: 0.92rem;

  /* carattere: solo bastoni, nessuna serif in nessun punto dell'interfaccia */
  --bastoni: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* alta leggibilità: valori comandati dal pannello, uguali per tutto il sito */
  --testo-base: 15px;
  --interlinea: 1.4;
  --spaziatura: 0px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* deposito dei disegni riusati: non occupa spazio nella pagina */
.deposito-disegni { position: absolute; width: 0; height: 0; overflow: hidden; }

html { font-size: var(--testo-base); }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--carta);
  color: var(--inchiostro);
  /* solo caratteri a bastoni già presenti sul computer: il sito non chiede
     nulla all'esterno e funziona anche senza collegamento */
  font-family: var(--bastoni);
  line-height: var(--interlinea);
  letter-spacing: var(--spaziatura);
  overscroll-behavior: none;
}

/* dentro il disegno la spaziatura resta quella normale: le etichette dei
   vertici sono sigle brevi e collocate al millimetro */
svg text { letter-spacing: normal; }

body { display: flex; flex-direction: column; font-size: 1rem; }

/* --- Barra superiore --- */

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 16px;
  background: var(--carta-chiara);
  border-bottom: 1px solid var(--bordo);
  flex-wrap: nowrap;
}

/* marchio: il triedro affiancato al nome in stampatello */
.marchio { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo svg { width: 38px; height: 38px; display: block; }
.barra h1 {
  font-size: 1.35rem; margin: 0; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--inchiostro);
}
.sottotitolo {
  margin: 0; font-size: 0.76rem; color: var(--inchiostro-tenue);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.menu-principale { display: flex; gap: 8px; flex: none; align-items: center; }
.menu-principale button {
  font: inherit;
  font-size: var(--testo-comando);
  font-weight: 700;
  padding: 6px 16px;
  border: 1.5px solid var(--bordo);
  background: var(--carta-chiara);
  color: var(--inchiostro-tenue);
  border-radius: var(--raggio);
  cursor: pointer;
  min-height: var(--altezza-comando);
}
/* ogni sezione ha il suo colore: scolorito da spenta, pieno da accesa */
.menu-principale button[data-sezione="esploratore"] { color: var(--sez-esploratore); border-color: var(--sez-esploratore); }
.menu-principale button[data-sezione="palestra"] { color: var(--sez-palestra); border-color: var(--sez-palestra); }
.menu-principale button[data-sezione="esploratore"].attivo { background: var(--sez-esploratore); color: #fff; }
.menu-principale button[data-sezione="palestra"].attivo { background: var(--sez-palestra); color: #fff; }

.pulsante-leggibilita {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--leggibilita) !important; border-color: var(--leggibilita) !important;
}
.pulsante-leggibilita[aria-expanded="true"] { background: var(--leggibilita); color: #fff !important; }
.segno-leggibilita { font-weight: 700; font-size: 1.05rem; line-height: 1; }

/* --- Comandi principali --- */

main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
section { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 8px 16px 12px; gap: 8px; }

.riga-comandi { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.campo { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--testo-comando); }
.campo select {
  font: inherit;
  font-size: var(--testo-comando);
  padding: 6px 10px;
  min-height: var(--altezza-comando);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta-chiara);
  min-width: 240px;
}

.interruttore { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 4px 0; }
.interruttore input { width: 19px; height: 19px; accent-color: var(--accento); }

/* barra dei selettori: resta bianca, come l'area di disegno */
.schede {
  display: flex; gap: 8px; flex-wrap: wrap;
  background: var(--carta-chiara);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 8px 10px;
}
.schede button {
  font: inherit;
  font-size: var(--testo-comando);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px;
  min-height: var(--altezza-comando);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  opacity: 0.58;
  transition: opacity 0.15s ease;
}
.schede button:hover:not([disabled]) { opacity: 0.85; }
/* la scheda accesa è a pieno colore, in grassetto e leggermente sollevata */
.schede button.attivo {
  opacity: 1; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.schede button[disabled] { opacity: 0.28; cursor: not-allowed; }

/* i quattro metodi, ciascuno col suo colore: le schede dell'Esploratore e i
   pulsanti dell'argomento nella Palestra */
.schede button[data-scheda="ortogonali"],
.gruppo-scelte button[data-argomento="ortogonali"] { background: var(--met-ortogonali); }
.schede button[data-scheda="assonometria"],
.gruppo-scelte button[data-argomento="assonometria"] { background: var(--met-assonometria); }
.schede button[data-scheda="prospettiva"],
.gruppo-scelte button[data-argomento="prospettiva"] { background: var(--met-prospettiva); }
.schede button[data-scheda="sezioni"],
.gruppo-scelte button[data-argomento="sezioni"] { background: var(--met-sezioni); }
.gruppo-scelte button[data-argomento="misto"] { background: var(--accento); }

/* icone dei metodi: lo stesso cubo, disegnato secondo ciascun metodo */
.icona-metodo { width: 24px; height: 24px; flex: none; color: #fff; }

/* --- Selettore della vista singola (schermi stretti) --- */

.selettore-vista { display: flex; align-items: center; gap: 10px; }
.scelta-viste { display: flex; gap: 5px; flex: 1; }
.scelta-viste button {
  font: inherit; font-size: 0.86rem; flex: 1;
  padding: 6px 4px; min-height: var(--altezza-comando);
  border: 1px solid var(--bordo); background: var(--carta);
  border-radius: var(--raggio); cursor: pointer;
}
.scelta-viste button.attivo { background: var(--accento); color: #fff; border-color: var(--accento); }

.schema-disposizione { width: 52px; height: 38px; flex: none; }
.schema-disposizione rect { fill: none; stroke: var(--inchiostro-tenue); stroke-width: 2; }
.schema-disposizione rect.attiva { fill: #efe3e5; stroke: var(--accento); }
.schema-disposizione line.schema-richiamo { stroke: var(--richiamo); stroke-width: 1.5; stroke-dasharray: 3 3; }
.schema-disposizione text { font-size: 17px; fill: var(--inchiostro-tenue); }

/* --- Area di disegno --- */

.area-lavoro { flex: 1; display: flex; gap: 16px; min-height: 0; }

.tele { flex: 1; display: flex; gap: 14px; min-width: 0; }

.tela {
  flex: 1;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--carta-chiara);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
}
.tela.nascosta { display: none; }
.tela figcaption {
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--inchiostro-tenue);
  border-bottom: 1px solid var(--bordo);
  background: var(--carta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tela svg { flex: 1; width: 100%; min-height: 0; touch-action: none; display: block; }
.tela.trascinabile svg { cursor: grab; }
.tela.in-trascinamento svg { cursor: grabbing; }

/* --- Convenzioni grafiche del disegno --- */

.spigolo-visibile {
  stroke: var(--inchiostro);
  stroke-width: var(--spessore-grosso);
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  fill: none;
}
.spigolo-nascosto {
  stroke: var(--inchiostro);
  stroke-width: var(--spessore-fine);
  stroke-dasharray: 7 4;
  vector-effect: non-scaling-stroke;
  fill: none;
}
/* linee di richiamo: sottili e continue, come vuole la convenzione */
.richiamo {
  stroke: var(--richiamo);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}
.ribaltamento {
  stroke: var(--evidenza);
  stroke-width: 1.2;
  stroke-dasharray: 9 3 2 3;
  vector-effect: non-scaling-stroke;
}
.arco-ribaltamento {
  fill: none;
  stroke: var(--evidenza);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}
.linea-terra {
  stroke: var(--inchiostro);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
.etichetta-lt { fill: var(--inchiostro); font-weight: 700; }
.asse-riferimento {
  stroke: var(--blu);
  stroke-width: 1.2;
  stroke-dasharray: 10 3 2 3;
  vector-effect: non-scaling-stroke;
}
.asse-errato {
  stroke: var(--evidenza);
  stroke-width: 1.8;
  stroke-dasharray: 10 3 2 3;
  vector-effect: non-scaling-stroke;
}
.etichetta-asse-errato { fill: var(--evidenza); font-weight: 700; font-style: italic; }
.griglia { stroke: var(--griglia); stroke-width: 1; vector-effect: non-scaling-stroke; }

.linea-orizzonte {
  stroke: var(--blu);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.linea-fuga {
  stroke: var(--evidenza);
  stroke-width: 1;
  stroke-dasharray: 5 4;
  stroke-opacity: 0.75;
  vector-effect: non-scaling-stroke;
}
.punto-vista { fill: var(--blu); stroke: none; }
.punto-fuga { fill: var(--evidenza); stroke: none; }
.area-presa { fill: transparent; }
.area-presa-orizzonte { stroke: transparent; cursor: ns-resize; }
.trascinabile-punto { cursor: ew-resize; }
.etichetta-punto { fill: var(--inchiostro); font-weight: 700; }
.etichetta-orizzonte { fill: var(--blu); }
.piano-sezione {
  fill: var(--evidenza);
  fill-opacity: 0.12;
  stroke: var(--evidenza);
  stroke-width: 1.2;
  stroke-dasharray: 10 3 2 3;
  vector-effect: non-scaling-stroke;
}
.traccia-piano {
  stroke: var(--evidenza);
  stroke-width: 1.6;
  stroke-dasharray: 12 3 2 3;
  vector-effect: non-scaling-stroke;
}
.etichetta-traccia { fill: var(--evidenza); font-weight: 700; font-style: italic; }
/* la traccia ribaltata si traccia fine, come tutti gli elementi ribaltati */
.traccia-ribaltata {
  stroke: var(--evidenza);
  stroke-width: 1;
  stroke-dasharray: 9 3 2 3;
  vector-effect: non-scaling-stroke;
}
.tratteggio-sezione {
  stroke: var(--inchiostro);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}
.contorno-sezione {
  fill: none;
  stroke: var(--inchiostro);
  stroke-width: 2.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* la sezione ribaltata si traccia con linea continua fine */
.contorno-ribaltato {
  fill: none;
  stroke: var(--inchiostro);
  stroke-width: 1.1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ribaltamento-sezione .tratteggio-sezione { stroke: var(--inchiostro-tenue); stroke-width: 0.6; }
.piano-proiezione { fill: var(--blu-chiaro); fill-opacity: 0.35; stroke: var(--blu); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.faccia { stroke: none; }

text { font-family: var(--bastoni); }
.titolo-vista { fill: var(--inchiostro-tenue); font-weight: 700; }
.etichetta-vertice { fill: var(--blu); font-weight: 700; }
.etichetta-asse { fill: var(--blu); font-style: italic; }
.etichetta-piano { fill: var(--blu); }
.nota-disegno { fill: var(--evidenza); }

/* --- Pannello dei comandi --- */

.pannello {
  width: 310px;
  flex: none;
  overflow-y: auto;
  background: var(--carta-chiara);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 4px 16px 16px;
}
.pannello-testata { display: flex; align-items: center; justify-content: space-between; }
.pannello h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--inchiostro-tenue); }
.pannello fieldset {
  border: none;
  border-top: 1px solid var(--bordo);
  padding: 10px 0 4px;
  margin: 6px 0 0;
}
.pannello legend { font-weight: 700; font-size: 0.9rem; padding: 0 6px 0 0; }
.pannello fieldset[hidden] { display: none; }

.cursore { margin: 10px 0 6px; }
.cursore label { display: flex; justify-content: space-between; font-size: 0.88rem; gap: 8px; }
.cursore output { font-family: "Consolas", monospace; color: var(--accento); font-weight: 700; }
.cursore input[type="range"] { width: 100%; accent-color: var(--accento); height: 28px; }

.pulsanti-tipo { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.pulsanti-tipo button {
  font: inherit;
  font-size: 0.92rem;
  padding: 9px 12px;
  min-height: 44px;
  border: 1px solid var(--bordo);
  background: var(--carta);
  border-radius: var(--raggio);
  cursor: pointer;
  flex: 1 1 44%;
}
.pulsanti-tipo button.attivo { background: var(--accento); color: #fff; border-color: var(--accento); }

.lettura {
  font-family: "Consolas", "SF Mono", monospace;
  font-size: 0.88rem;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 10px 12px;
}
.lettura div { display: flex; justify-content: space-between; gap: 10px; }
.nota { font-size: 0.84rem; color: var(--inchiostro-tenue); margin: 8px 0 4px; }

.alternanza { display: flex; gap: 6px; margin-top: 8px; }
.alternanza button {
  font: inherit; flex: 1; padding: 10px; min-height: 44px;
  border: 1px solid var(--bordo); background: var(--carta);
  border-radius: var(--raggio); cursor: pointer;
}
.alternanza button.attivo { background: var(--accento); color: #fff; border-color: var(--accento); }

#apri-pannello, #chiudi-pannello {
  font: inherit; font-size: var(--testo-comando);
  padding: 6px 14px; min-height: var(--altezza-comando);
  border: 1px solid var(--bordo); background: var(--carta);
  border-radius: var(--raggio); cursor: pointer;
}
#chiudi-pannello { font-size: 1.4rem; line-height: 1; padding: 4px 12px; min-height: 40px; }
.solo-stretto { display: none; }

.in-arrivo { margin: auto; text-align: center; color: var(--inchiostro-tenue); }
.solo-largo { display: inline; }

/* --- Palestra --- */

.gruppo-scelte {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--carta-chiara);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 8px 12px;
}
.etichetta-gruppo { font-weight: 700; font-size: 0.9rem; margin-right: 4px; }
.gruppo-scelte button {
  font: inherit; font-size: 0.95rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; min-height: 46px;
  border: 1.5px solid var(--bordo); background: var(--carta-chiara);
  color: var(--inchiostro-tenue);
  border-radius: 8px; cursor: pointer;
}
/* i pulsanti dell'argomento portano il colore del proprio metodo */
.gruppo-scelte button[data-argomento] { border: none; color: #fff; opacity: 0.58; }
.gruppo-scelte button[data-argomento]:hover:not([disabled]) { opacity: 0.85; }
.gruppo-scelte button[data-argomento].attivo {
  opacity: 1; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.gruppo-scelte button[data-livello].attivo { background: var(--accento); color: #fff; border-color: var(--accento); }
.gruppo-scelte button[disabled] { opacity: 0.3; cursor: not-allowed; }

.tabellone {
  display: flex; gap: 22px; flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--carta-chiara);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  font-size: 0.95rem;
}
.tabellone b { font-size: 1.25rem; color: var(--accento); margin-left: 6px; }

.esercizio {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.domanda { font-size: 1.1rem; font-weight: 600; margin: 4px 0; }

.riquadro-domanda {
  background: var(--carta-chiara);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 8px;
  height: min(30vh, 250px);
  display: flex;
}
.riquadro-domanda { gap: 10px; }
.riquadro-domanda.alto { height: min(46vh, 400px); }
.disegno-domanda { flex: 1; width: 100%; height: 100%; min-height: 0; }
.pannello-domanda {
  flex: 1; margin: 0; min-width: 0;
  display: flex; flex-direction: column;
}
.pannello-domanda + .pannello-domanda { border-left: 1px solid var(--bordo); padding-left: 10px; }
.pannello-domanda figcaption {
  font-size: 0.82rem; color: var(--inchiostro-tenue);
  text-align: center; padding-top: 4px;
}

.opzioni { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.opzioni-3 { grid-template-columns: repeat(3, 1fr); }
.opzioni-2 { grid-template-columns: repeat(2, 1fr); }
.carta-opzione {
  position: relative;
  background: var(--carta-chiara);
  border: 2px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 8px;
  cursor: pointer;
  height: min(26vh, 210px);
  display: flex;
}
.carta-opzione:hover:not([disabled]) { border-color: var(--accento); }
.carta-opzione[disabled] { cursor: default; }
.carta-opzione.giusta { border-color: #1e7a41; background: #f0f8f2; }
.carta-opzione.sbagliata { border-color: var(--evidenza); background: #fdf1ec; }
.quadro {
  stroke: var(--inchiostro);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.pianta-oggetto {
  fill: var(--blu-chiaro);
  fill-opacity: 0.5;
  stroke: var(--inchiostro);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.etichetta-schema { fill: var(--inchiostro-tenue); }
.pianta-scena-solido {
  stroke: var(--inchiostro);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
/* collega il punto trovato sul quadro con il punto di fuga dell'immagine */
.allineamento-fuga {
  stroke: var(--evidenza);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  stroke-opacity: 0.7;
  vector-effect: non-scaling-stroke;
}
/* serve solo a fissare l'inquadratura, non deve vedersi */
.cornice-invisibile { stroke: none; }

.retta-di-fuga { stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.retta-di-fuga.retta-1 { stroke: var(--evidenza); }
.retta-di-fuga.retta-2 { stroke: #1e7a41; }
.maniglia-1 { fill: var(--evidenza); }
.maniglia-2 { fill: #1e7a41; }
.etichetta-retta { font-weight: 700; font-style: italic; }
.etichetta-retta.retta-1 { fill: var(--evidenza); stroke: none; }
.etichetta-retta.retta-2 { fill: #1e7a41; stroke: none; }
.spigolo-bersaglio { stroke-width: 5; stroke-opacity: 0.35; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spigolo-bersaglio.retta-1 { stroke: var(--evidenza); }
.spigolo-bersaglio.retta-2 { stroke: #1e7a41; }
.retta-giusta { stroke: #1e7a41; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.retta-tentativo { stroke: var(--inchiostro-tenue); stroke-width: 1.6; stroke-dasharray: 7 4; vector-effect: non-scaling-stroke; }
.punto-incrocio { fill: none; stroke: var(--blu); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rette-di-fuga .area-presa { cursor: grab; }
.scelte-lettura { grid-column: 1 / -1; display: flex; gap: 12px; }
.scelte-lettura .carta-opzione { flex: 1; }

.opzione-testo { align-items: center; justify-content: center; height: auto; min-height: 96px; padding: 18px 12px; }
.testo-opzione { font-size: 1rem; text-align: center; line-height: 1.35; }

.lettera-opzione {
  position: absolute; top: 6px; left: 10px;
  font-weight: 700; color: var(--inchiostro-tenue);
}
.disegno-opzione { flex: 1; width: 100%; height: 100%; }

.opzioni.abbinamento { grid-template-columns: repeat(3, 1fr); }
/* alternative larghe e basse (linee d'orizzonte): una per riga */
.opzioni.in-colonna { grid-template-columns: 1fr; gap: 8px; }
.opzioni.in-colonna .carta-opzione { height: min(11vh, 92px); padding: 6px 8px 6px 28px; }
.carta-abbinamento {
  position: relative;
  background: var(--carta-chiara);
  border: 2px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.carta-abbinamento.giusta { border-color: #1e7a41; background: #f0f8f2; }
.carta-abbinamento.sbagliata { border-color: var(--evidenza); background: #fdf1ec; }
.carta-abbinamento .disegno-opzione { height: min(22vh, 180px); }
.scelte-abbinamento { display: flex; gap: 4px; flex-wrap: wrap; }
.scelte-abbinamento button {
  font: inherit; font-size: 0.85rem; flex: 1;
  padding: 8px 4px; min-height: 42px;
  border: 1px solid var(--bordo); background: var(--carta);
  border-radius: var(--raggio); cursor: pointer;
}
.scelte-abbinamento button.attivo { background: var(--accento); color: #fff; border-color: var(--accento); }
.scelte-abbinamento button.valore-giusto { border-color: #1e7a41; border-width: 2px; font-weight: 700; }

.riscontro { min-height: 2.6em; font-size: 1rem; padding: 4px 2px; }
.riscontro.esito-giusto { color: #1e7a41; font-weight: 600; }
.riscontro.esito-sbagliato { color: var(--evidenza); font-weight: 600; }

.pulsante-principale {
  font: inherit; align-self: flex-start;
  padding: 12px 24px; min-height: 48px;
  background: var(--accento); color: #fff;
  border: none; border-radius: var(--raggio); cursor: pointer;
}

.statistiche { font-size: 0.95rem; max-width: 420px; }
.statistiche h3 { font-size: 0.95rem; margin: 10px 0 6px; color: var(--inchiostro-tenue); }
.statistiche div { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid var(--bordo); }

/* --- Bordo a tratto di matita ---
   Il contorno è disegnato da un elemento sovrapposto e poi increspato dal
   filtro: così il bordo resta irregolare a qualunque dimensione della card.
   Serve un po' di spazio attorno, perché il tratto sborda. */

.carta-opzione, .carta-abbinamento, .tabellone, .riquadro-domanda {
  position: relative;
  border-color: transparent;
}
.carta-opzione::before, .carta-abbinamento::before,
.tabellone::before, .riquadro-domanda::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1.3px solid var(--matita);
  border-radius: 5px;
  opacity: 0.65;
  filter: url(#tratto-a-matita);
  pointer-events: none;
}
/* quando la card dice se la risposta è giusta o sbagliata, il colore del
   bordo deve leggersi senza interferenze */
.carta-opzione.giusta::before, .carta-opzione.sbagliata::before,
.carta-abbinamento.giusta::before, .carta-abbinamento.sbagliata::before { display: none; }

/* i pannelli scorrono al loro interno, quindi il tratto irregolare verrebbe
   tagliato: qui il bordo resta una linea sottile, dello stesso colore */
.pannello, .pannello-leggibilita { border-color: var(--matita); }

/* margine di sicurezza: il tratto irregolare non deve toccare nulla */
.opzioni { gap: 18px; }
.opzioni.in-colonna { gap: 14px; }
.esercizio { gap: 16px; padding: 10px; }
.area-lavoro { gap: 18px; }

/* --- Pannello di alta leggibilità --- */

.pannello-leggibilita {
  position: fixed;
  top: 64px; right: 16px;
  z-index: 40;
  width: min(92vw, 340px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--carta-chiara);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 8px 18px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.pannello-leggibilita h2 {
  font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--inchiostro-tenue);
}
.pannello-leggibilita .interruttore { margin: 6px 0; }
.pannello-leggibilita .pannello-testata button {
  font: inherit; font-size: 1.4rem; line-height: 1;
  padding: 4px 12px; min-height: 40px;
  border: 1px solid var(--bordo); background: var(--carta);
  border-radius: var(--raggio); cursor: pointer;
}
.pulsante-secondario {
  font: inherit; font-size: var(--testo-comando);
  padding: 9px 16px; min-height: var(--altezza-comando);
  margin-top: 8px;
  border: 1.5px solid var(--accento); background: var(--carta-chiara);
  color: var(--accento); border-radius: var(--raggio); cursor: pointer;
}

@media (max-width: 860px) {
  .opzioni { grid-template-columns: repeat(2, 1fr); }
  .carta-opzione { height: 30vh; }
  .riquadro-domanda { height: 34vh; }

  /* anche in Palestra i comandi devono lasciare spazio alle figure */
  .gruppo-scelte { gap: 4px; }
  .gruppo-scelte button { font-size: 0.8rem; padding: 5px 8px; min-height: 34px; }
  .etichetta-gruppo { font-size: 0.8rem; margin-right: 0; }
  .tabellone { padding: 5px 10px; gap: 14px; font-size: 0.82rem; }
  .tabellone b { font-size: 1rem; margin-left: 4px; }
  /* la serie migliore resta leggibile nelle statistiche in fondo */
  .tabellone span:nth-child(3) { display: none; }
  .domanda { font-size: 0.95rem; margin: 2px 0; }
  .esercizio { gap: 8px; }
}

/* --- Schermi stretti: l'impianto si riorganizza --- */

@media (max-width: 860px) {
  /* la dimensione del testo non si tocca: la decide il pannello di lettura */
  :root { --altezza-comando: 38px; --testo-comando: 0.88rem; }
  section { padding: 6px 10px 10px; gap: 6px; }

  /* l'intestazione si riduce a una riga sola: il sottotitolo qui non serve */
  .barra { padding: 5px 10px; gap: 8px; }
  .logo svg { width: 22px; height: 22px; }
  .barra h1 { font-size: 1rem; }
  .sottotitolo { display: none; }
  .menu-principale button { padding: 5px 10px; }

  .riga-comandi { gap: 8px; flex-wrap: nowrap; }
  .schede button { padding: 6px 10px; }
  .selettore-vista { gap: 8px; }

  .solo-stretto { display: block; }
  .solo-largo { display: none; }
  .pannello-leggibilita { top: 56px; right: 8px; }
  /* le icone dei metodi restano, il testo delle schede si accorcia da solo */
  .icona-metodo { width: 20px; height: 20px; }
  .tele { flex-direction: column; }
  .pannello {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 340px);
    z-index: 20;
    border-radius: 0;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform 0.2s ease;
  }
  .pannello.aperto { transform: none; }
  /* il menu a tendina e il pulsante dei comandi stanno sulla stessa riga */
  .campo { flex: 1; min-width: 0; }
  .campo select { min-width: 0; flex: 1; }
  .campo > span { display: none; }
  #apri-pannello { flex: none; padding: 6px 12px; }
  .schede { overflow-x: auto; flex-wrap: nowrap; }
  .schede button { white-space: nowrap; }
}