/* Blind Wine Quiz — foglio di stile unico, mobile first, tema chiaro/scuro automatico.
   Elemento distintivo: i "bicchieri" numerati del quiz, che si riempiono di vino
   quando la risposta è salvata. Tutto il resto resta sobrio. */

:root {
  --carta: #f3f2f0;
  --superficie: #ffffff;
  --inchiostro: #251a20;
  --inchiostro-tenue: #5d5257;
  --vino: #7b1e3b;
  --vino-scuro: #5a1029;
  --vino-velo: #f3e6eb;
  --foglia: #3f6a45;
  --foglia-velo: #e5efe4;
  --ambra: #8a5a0c;
  --ambra-velo: #f8eedb;
  --rosso: #a1262b;
  --rosso-velo: #f9e5e4;
  --linea: #ddd7d9;
  --ombra: 0 1px 2px rgb(37 26 32 / 0.06);
  --raggio: 10px;
  --raggio-piccolo: 6px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --carta: #1a1417;
    --superficie: #241c20;
    --inchiostro: #f1eaed;
    --inchiostro-tenue: #b9adb3;
    --vino: #d2627f;
    --vino-scuro: #e9879f;
    --vino-velo: #3a2129;
    --foglia: #8cc296;
    --foglia-velo: #1f3123;
    --ambra: #e2b25e;
    --ambra-velo: #3a2d16;
    --rosso: #f08a86;
    --rosso-velo: #3d1d1e;
    --linea: #3d3236;
    --ombra: none;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: 1rem/1.55 var(--sans);
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); letter-spacing: -0.01em; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 0.75em; }
a { color: var(--vino); text-underline-offset: 0.15em; }
a:hover { color: var(--vino-scuro); }
code { font-size: 0.9em; word-break: break-all; }
:focus-visible { outline: 3px solid var(--vino); outline-offset: 2px; border-radius: 4px; }

.salta { position: absolute; left: -999px; top: 0; background: var(--superficie); padding: 0.5rem 1rem; z-index: 10; }
.salta:focus { left: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pagina { max-width: 46rem; margin: 0 auto; padding: 0 1rem 4rem; }
.pagina-admin { max-width: 64rem; }
main:focus { outline: none; }

/* Testata */
.testata { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--linea); margin-bottom: 1.75rem; flex-wrap: wrap; }
.marchio { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--inchiostro); text-decoration: none; }
.marchio-segno { width: 0.9rem; height: 1.15rem; border-radius: 0 0 0.45rem 0.45rem; background: var(--vino); box-shadow: inset 0 0.35rem 0 var(--superficie); border: 2px solid var(--vino); }
.marchio-area { font-family: var(--sans); font-size: 0.8rem; font-weight: 500; color: var(--inchiostro-tenue); border-left: 1px solid var(--linea); padding-left: 0.55rem; }
.utente { display: flex; align-items: center; gap: 0.75rem; color: var(--inchiostro-tenue); font-size: 0.9rem; }

.intro { margin-bottom: 2rem; }
.intro-compatta { margin-bottom: 1.25rem; }
.intro-compatta h1 { font-size: 1.6rem; }
.sottotitolo { color: var(--inchiostro-tenue); font-size: 1.05rem; max-width: 38rem; }
.briciole { margin-bottom: 0.25rem; font-size: 0.9rem; }
.titolo-evento { display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }

/* Riquadri */
.riquadro { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 1.25rem; margin: 0 0 1.25rem; box-shadow: var(--ombra); }
.riquadro.stretto { max-width: 26rem; margin-inline: auto; }
.riquadro > :last-child { margin-bottom: 0; }
details.riquadro > summary { cursor: pointer; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; list-style-position: outside; }
details.riquadro[open] > summary { margin-bottom: 0.9rem; }

/* Pulsanti */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.55rem 1.1rem; border-radius: var(--raggio-piccolo);
  border: 1px solid var(--linea); background: var(--superficie); color: var(--inchiostro); font: 600 0.95rem/1.2 var(--sans); text-decoration: none; cursor: pointer; }
.btn:hover:not(:disabled) { border-color: var(--inchiostro-tenue); color: var(--inchiostro); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primario { background: var(--vino); border-color: var(--vino); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--vino-scuro); border-color: var(--vino-scuro); color: #fff; }
@media (prefers-color-scheme: dark) { .btn-primario, .btn-primario:hover:not(:disabled) { color: #1a1417; } }
.btn-pericolo { color: var(--rosso); border-color: color-mix(in srgb, var(--rosso) 45%, var(--linea)); }
.btn-pericolo:hover:not(:disabled) { background: var(--rosso-velo); color: var(--rosso); border-color: var(--rosso); }
.btn-piccolo { min-height: 2.25rem; padding: 0.35rem 0.75rem; font-size: 0.85rem; }
.link { background: none; border: 0; padding: 0.5rem 0; color: var(--vino); font: inherit; text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.azioni { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1rem; }
.riquadro .azioni:first-child { margin-top: 0; }

/* Campi */
.campo { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; min-width: 0; }
.campo label { font-weight: 600; display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.obbl { font-weight: 400; color: var(--inchiostro-tenue); font-size: 0.85rem; margin-right: auto; }
.aiuto { color: var(--inchiostro-tenue); font-size: 0.875rem; margin: 0; }
input, select, textarea { width: 100%; min-height: 2.9rem; padding: 0.6rem 0.75rem; border: 1px solid var(--linea); border-radius: var(--raggio-piccolo);
  background: var(--superficie); color: var(--inchiostro); font: 1rem/1.3 var(--sans); }
input[type="file"] { padding: 0.5rem; }
textarea { min-height: 4rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--vino); outline: 2px solid color-mix(in srgb, var(--vino) 35%, transparent); outline-offset: 0; }
input:disabled, select:disabled { background: var(--carta); color: var(--inchiostro-tenue); opacity: 1; }
.riga-campi { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
.griglia-campi { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
.griglia-soglie { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .riga-campi { grid-template-columns: 2fr 1fr; }
  .griglia-campi { grid-template-columns: 1fr 1fr; }
  .griglia-soglie { grid-template-columns: repeat(2, 1fr); }
}

/* Avvisi */
.avviso { border-radius: var(--raggio-piccolo); padding: 0.8rem 1rem; margin: 0 0 1rem; border-left: 4px solid; }
.avviso p:last-child, .avviso ul:last-child { margin-bottom: 0; }
.avviso ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.avviso-errore { background: var(--rosso-velo); border-color: var(--rosso); }
.avviso-info { background: var(--ambra-velo); border-color: var(--ambra); }
.avviso-ok { background: var(--foglia-velo); border-color: var(--foglia); }
.vuoto { color: var(--inchiostro-tenue); padding: 1.5rem 0; }
.nota { color: var(--inchiostro-tenue); font-size: 0.875rem; margin-top: 1.25rem; }
.caricamento { display: flex; align-items: center; gap: 0.6rem; color: var(--inchiostro-tenue); padding: 2rem 0; }
.spinner { width: 1.1rem; height: 1.1rem; border: 2px solid var(--linea); border-top-color: var(--vino); border-radius: 50%; animation: gira 0.8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* Stati */
.pill { display: inline-block; font-size: 0.8rem; font-weight: 600; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--carta); border: 1px solid var(--linea); color: var(--inchiostro-tenue); white-space: nowrap; }
.pill-aperto { background: var(--foglia-velo); border-color: transparent; color: var(--foglia); }
.pill-concluso { background: var(--vino-velo); border-color: transparent; color: var(--vino); }
.pill-corretta { background: var(--ambra-velo); border-color: transparent; color: var(--ambra); }

/* Elenco eventi */
.lista-eventi { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 0.6rem; }
.evento-voce { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; align-items: center; padding: 1rem 1.1rem; background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--raggio); text-decoration: none; color: inherit; }
.evento-voce:hover { border-color: var(--vino); color: inherit; }
.evento-nome { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.evento-meta { grid-column: 1; color: var(--inchiostro-tenue); font-size: 0.9rem; }
.evento-voce .pill { grid-column: 2; grid-row: 1 / span 2; }

/* Bicchieri del quiz */
.bicchieri { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 0.5rem; }
.bicchiere { position: relative; width: 2.9rem; height: 3.3rem; border: 2px solid var(--vino); border-radius: 0.3rem 0.3rem 1.45rem 1.45rem;
  background: var(--superficie); color: var(--vino); font: 700 1rem var(--serif); cursor: pointer; overflow: hidden; padding: 0; z-index: 0; }
.bicchiere::before { content: ""; position: absolute; inset: auto 0 0; height: 0; background: var(--vino); z-index: -1; transition: height 0.35s ease; }
.bicchiere-salvato { color: #fff; }
.bicchiere-salvato::before { height: 62%; }
.bicchiere-bozza::before { height: 30%; background: var(--ambra); opacity: 0.55; }
.bicchiere.attivo { outline: 3px solid var(--inchiostro); outline-offset: 3px; }
@media (prefers-color-scheme: dark) { .bicchiere-salvato { color: #1a1417; } }
@media (prefers-reduced-motion: reduce) { .bicchiere::before { transition: none; } .spinner { animation-duration: 2s; } }
.progresso { color: var(--inchiostro-tenue); font-size: 0.9rem; margin-bottom: 1.25rem; }

.scheda { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 1.25rem; box-shadow: var(--ombra); margin-bottom: 1.25rem; }
.scheda-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.scheda-testa h2 { font-size: 1.6rem; }
.azioni-quiz { justify-content: space-between; }
@media (max-width: 30rem) { .azioni-quiz { flex-direction: column-reverse; align-items: stretch; } .azioni-quiz .btn { width: 100%; } }
.punti { font-size: 0.8rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.punti.giusto { background: var(--foglia-velo); color: var(--foglia); }
.punti.sbagliato { background: var(--carta); color: var(--inchiostro-tenue); }
.punti-totali { font-weight: 700; color: var(--vino); white-space: nowrap; }

.codice { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.12em; }
.codice-grande { font-size: 2.2rem; color: var(--vino); margin: 0.25rem 0 1rem; }
.benvenuto { text-align: center; }
.benvenuto .btn { margin-top: 0.5rem; }

/* Soluzioni e dati */
.dati { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0.5rem 0 0; }
.dati dt { color: var(--inchiostro-tenue); font-size: 0.9rem; }
.dati dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.varianti, .originale { color: var(--inchiostro-tenue); font-size: 0.88rem; }
.originale { font-style: italic; }
.etichetta-vino { font-family: var(--serif); font-size: 1.1rem; }
.soluzione { border-color: var(--vino); }
.griglia-soluzioni { display: grid; gap: 1rem; }
.numero-vino { margin-bottom: 0.4rem; }
@media (min-width: 46rem) { .griglia-soluzioni { grid-template-columns: 1fr 1fr; } }

/* Tabelle: scorrono dentro il proprio contenitore, mai la pagina */
.tabella-contenitore { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--superficie); margin-bottom: 1rem; }
.tabella { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabella th, .tabella td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabella th { font-weight: 600; color: var(--inchiostro-tenue); background: var(--carta); white-space: nowrap; }
.tabella tbody tr:nth-child(even) { background: color-mix(in srgb, var(--carta) 45%, transparent); }
.tabella .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabella .pos { font-family: var(--serif); font-weight: 700; color: var(--vino); width: 2.5rem; }
.tabella .su { color: var(--inchiostro-tenue); font-size: 0.85em; }
.tabella tr.evidenziata td { background: var(--vino-velo); }
.classifica .solo-largo { display: none; }
@media (min-width: 40rem) { .classifica .solo-largo { display: table-cell; } }
.riga-errore td { background: var(--rosso-velo); }
.riga-errore-dettaglio td { background: var(--rosso-velo); padding-top: 0; color: var(--rosso); }
.riga-errore-dettaglio ul { margin: 0; padding-left: 1.1rem; }

/* Area amministrativa */
.schede { display: flex; gap: 0.25rem; overflow-x: auto; border-bottom: 1px solid var(--linea); margin: 1rem 0 1.5rem; scrollbar-width: thin; }
.schede a { padding: 0.65rem 0.85rem; text-decoration: none; color: var(--inchiostro-tenue); font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.schede a.attiva { color: var(--vino); border-bottom-color: var(--vino); }
.cifre { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; }
@media (min-width: 40rem) { .cifre { grid-template-columns: repeat(4, 1fr); } }
.cifre div { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 0.8rem 1rem; display: flex; flex-direction: column; }
.cifre strong { font-family: var(--serif); font-size: 1.6rem; }
.cifre span { color: var(--inchiostro-tenue); font-size: 0.85rem; }
.link-condivisione { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

.lista-vini { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.75rem; }
.vino { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 1rem 1.1rem; }
.vino-testa { display: flex; gap: 0.8rem; align-items: flex-start; }
.vino-testa h3 { margin-bottom: 0.15rem; }
.numero { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--vino-velo); color: var(--vino); font: 700 1rem var(--serif); }
.meta { color: var(--inchiostro-tenue); font-size: 0.88rem; margin: 0; }
.vino .dati { margin-top: 0.75rem; }

.partecipante > summary { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.partecipante .meta { font-family: var(--sans); font-weight: 400; font-size: 0.9rem; }
.risposte { list-style: none; padding: 0; margin: 0; }
.risposta { border-top: 1px solid var(--linea); padding: 1rem 0; }
.risposta-testa { display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
.risposta-testa h4 { margin: 0; }
.correzione { background: var(--carta); border-radius: var(--raggio-piccolo); padding: 1rem; margin-top: 0.75rem; }
.fasce-anteprima { padding-left: 1.4rem; }
.anteprima { margin-top: 1rem; }
.note { color: var(--inchiostro-tenue); font-size: 0.9rem; }
.storico { list-style: none; padding: 0; }
.storico .riquadro p { margin-bottom: 0.3rem; }

/* Notifiche e dialoghi */
.toast { position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 150%); max-width: calc(100% - 2rem);
  background: var(--inchiostro); color: var(--carta); padding: 0.75rem 1.1rem; border-radius: var(--raggio-piccolo); font-weight: 600; z-index: 50;
  transition: transform 0.25s ease; pointer-events: none; }
.toast.visibile { transform: translate(-50%, 0); }
.toast-errore { background: var(--rosso); color: #fff; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
.dialogo { border: 1px solid var(--linea); border-radius: var(--raggio); padding: 0; max-width: min(30rem, calc(100% - 2rem)); background: var(--superficie); color: var(--inchiostro); }
.dialogo::backdrop { background: rgb(20 12 16 / 0.55); }
.dialogo-corpo { padding: 1.25rem; }
.dialogo-corpo .azioni { justify-content: flex-end; }