/* Componenti di Material 3 Expressive per l'app. Si usano solo i token di token.css.
   Ordine: base, icone, stati, pulsanti, barre, schede, numeri, elenchi, sezioni. */

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* "hidden" vince sempre sul display dei componenti */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-medium);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }

.app { max-width: 600px; margin: 0 auto; min-height: 100dvh; }
.contenuto { padding: 8px 16px calc(96px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }   /* la colonna non si allarga mai oltre lo schermo */
.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- icone: Material Symbols Rounded ---- */
.icona {
  font-family: "Material Symbols Rounded";
  font-weight: normal; font-style: normal; font-size: 24px; line-height: 1;
  display: inline-block; width: 1em; height: 1em; overflow: hidden;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  user-select: none; flex: none;
}
.icona--piena { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

/* ---- livello di stato: hover, focus, pressione (M3) ---- */
.stato { position: relative; isolation: isolate; cursor: pointer; }
.stato::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: currentColor; opacity: 0; pointer-events: none;
  transition: opacity var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects);
}
@media (hover: hover) { .stato:hover::before { opacity: var(--md-sys-state-hover-opacity); } }
.stato:focus-visible::before { opacity: var(--md-sys-state-focus-opacity); }
.stato:active::before { opacity: var(--md-sys-state-pressed-opacity); }

/* ---- pulsanti Expressive: tondi, alla pressione l'angolo si stringe ---- */
.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border: 0; border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-large); white-space: nowrap;
  transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
}
.pulsante:active { border-radius: var(--md-sys-shape-corner-small); }
.pulsante .icona { font-size: 20px; }
.pulsante--medio { height: 56px; padding: 0 24px; font: var(--md-sys-typescale-title-medium); }
.pulsante--medio:active { border-radius: var(--md-sys-shape-corner-medium); }
.pulsante--medio .icona { font-size: 24px; }
.pulsante--pieno { background: var(--ls-pieno); color: var(--ls-on-pieno); }   /* in chiaro arancio del logo, non il marrone del primary (Thomas 27/10/2026) */
.pulsante--tonale { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.pulsante--testo { background: none; color: var(--md-sys-color-primary); padding: 0 12px; }
.pulsante--largo { width: 100%; }

.pulsante-icona {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border: 0; padding: 0;
  background: none; color: var(--md-sys-color-on-surface-variant); border-radius: var(--md-sys-shape-corner-full);
}
.pulsante-icona::before { inset: 4px; }
.distintivo {
  position: absolute; top: 12px; right: 12px; width: 6px; height: 6px;
  border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-error);
}

/* ---- barra in alto (small top app bar) ---- */
.barra-alta {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 4px 0 16px; padding-top: env(safe-area-inset-top);
  box-sizing: content-box;
  background: var(--md-sys-color-surface);
  transition: background-color var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects);
}
.barra-alta.scorre { background: var(--md-sys-color-surface-container); }
.marchio img { height: 32px; width: auto; }
.marchio .logo-scuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .marchio .logo-chiaro { display: none; }
  :root:not([data-tema="chiaro"]) .marchio .logo-scuro { display: block; }
}
:root[data-tema="scuro"] .marchio .logo-chiaro { display: none; }
:root[data-tema="scuro"] .marchio .logo-scuro { display: block; }

/* ---- barra in basso (navigation bar Expressive, corta) ---- */
.barra-basso {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--md-sys-color-surface-container);
}
.barra-basso__voci { display: flex; width: 100%; max-width: 600px; height: 64px; }
.voce-nav {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 0; border: 0; background: none; padding: 6px 0 0;
  color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-medium);
}
.voce-nav__indicatore {
  display: grid; place-items: center; width: 56px; height: 32px; border-radius: var(--md-sys-shape-corner-full);
}
.voce-nav.stato::before { display: none; }
.voce-nav:focus-visible { outline: none; }
.voce-nav:focus-visible .voce-nav__indicatore { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.voce-nav__indicatore { position: relative; isolation: isolate; }
.voce-nav__indicatore::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--md-sys-color-on-surface); opacity: 0;
  transition: opacity var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects);
}
@media (hover: hover) { .voce-nav:hover .voce-nav__indicatore::before { opacity: var(--md-sys-state-hover-opacity); } }
.voce-nav:active .voce-nav__indicatore::before { opacity: var(--md-sys-state-pressed-opacity); }
.voce-nav[aria-current="page"] { color: var(--md-sys-color-secondary); font-weight: var(--md-sys-typescale-emphasized-weight); }
.voce-nav[aria-current="page"] .voce-nav__indicatore {
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
  animation: indicatore var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial) both;
}
.voce-nav[aria-current="page"] .icona { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
@keyframes indicatore { from { width: 32px; } }

/* ---- intestazione della schermata ---- */
.intestazione { padding: 8px 0 4px; }
.occhiello { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
.occhiello::first-letter { text-transform: uppercase; }
.titolo-schermata {
  font: var(--md-sys-typescale-headline-medium);
  font-weight: var(--md-sys-typescale-emphasized-weight);
  font-variation-settings: "wdth" 82;
  margin-top: 2px;
}

/* ---- schede ---- */
.scheda {
  display: grid; gap: 16px; padding: 20px;
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--ls-superficie-scheda);
  --sfondo-campo: var(--ls-superficie-scheda);   /* l'etichetta dei campi dentro una scheda prende il colore della scheda */
}
.scheda__testa { display: grid; gap: 2px; }
.scheda__titolo { font: var(--md-sys-typescale-title-large); font-weight: var(--md-sys-typescale-emphasized-weight); }
.scheda__dettaglio { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.scheda__azioni { display: flex; justify-content: flex-end; margin: -4px -8px -8px 0; }
.scheda__corpo { display: grid; gap: 16px; min-height: 48px; }
.scheda__dettaglio:empty { min-height: 20px; }

/* ---- numeri: la firma dell'app. Sestina nel bollino smerlato del logo, Jolly nel sole, SuperStar nella stella ---- */
.sestina { display: flex; justify-content: space-between; gap: 6px; }
.pallina {
  --forma: url("../img/forme/cookie12.svg");
  display: grid; place-items: center; flex: none; width: 48px; height: 48px;
  -webkit-mask: var(--forma) center / contain no-repeat; mask: var(--forma) center / contain no-repeat;
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
  font: var(--md-sys-typescale-title-large); font-weight: var(--md-sys-typescale-emphasized-weight);
  font-variant-numeric: tabular-nums;
  animation: compari var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.pallina--jolly { --forma: url("../img/forme/sunny.svg"); background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.pallina--superstar { --forma: url("../img/forme/soft-burst.svg"); background: var(--ls-color-rosso); color: var(--ls-color-on-rosso); }
.pallina--piccola { width: 40px; height: 40px; font: var(--md-sys-typescale-title-medium); font-weight: var(--md-sys-typescale-emphasized-weight); }
@keyframes compari { from { transform: scale(.5) rotate(-40deg); } }

.speciali { display: flex; gap: 24px; }
.speciale { display: flex; align-items: center; gap: 10px; }
.speciale__nome { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }

/* ---- scheda del sorteggio: veste della stagione (Natale = rosso del logo) ---- */
.scheda--stagione {
  position: relative; overflow: hidden;
  background: var(--ls-color-rosso-container); color: var(--ls-color-on-rosso-container);
}
.scheda--stagione .scheda__dettaglio { color: inherit; opacity: .8; }
.scheda__decoro { position: absolute; top: 12px; right: 12px; width: 72px; height: 72px; pointer-events: none; }
.etichetta {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--md-sys-shape-corner-full); font: var(--md-sys-typescale-label-medium);
  background: var(--ls-color-rosso); color: var(--ls-color-on-rosso);
}
.scheda--stagione .scheda__testa { padding-right: 76px; }
.scheda--stagione .pulsante--pieno { background: var(--ls-color-rosso); color: var(--ls-color-on-rosso); }

/* ---- tessere ---- */
.tessere { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tessera {
  display: grid; gap: 12px; align-content: start; padding: 16px;
  border-radius: var(--md-sys-shape-corner-large-increased);
  background: var(--ls-superficie-scheda);
}
.tessera__icona {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
.tessera__titolo { font: var(--md-sys-typescale-title-medium); display: flex; align-items: center; gap: 8px; }
.tessera__dettaglio { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.punto-aperto { width: 8px; height: 8px; border-radius: var(--md-sys-shape-corner-full); background: var(--ls-color-aperto); }

/* ---- sezione con titolo ---- */
.sezione { display: grid; gap: 8px; margin-top: 8px; }
.sezione__testa { display: flex; align-items: center; justify-content: space-between; padding-left: 4px; min-height: 40px; }
.sezione__titolo { font: var(--md-sys-typescale-title-medium); font-weight: var(--md-sys-typescale-emphasized-weight); }

/* ---- elenco Expressive: voci staccate di 2px, angoli grandi solo ai capi ---- */
.elenco { display: grid; gap: 2px; }
.elenco__voce {
  display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 12px 16px;
  background: var(--ls-superficie-scheda); border-radius: var(--md-sys-shape-corner-extra-small);
}
.elenco > li:first-child .elenco__voce { border-top-left-radius: var(--md-sys-shape-corner-large-increased); border-top-right-radius: var(--md-sys-shape-corner-large-increased); }
.elenco > li:last-child .elenco__voce,
.elenco > li:has(+ li[hidden]:last-child) .elenco__voce { border-bottom-left-radius: var(--md-sys-shape-corner-large-increased); border-bottom-right-radius: var(--md-sys-shape-corner-large-increased); }
/* una voce che è un pulsante (Installa l'app) si vede come le altre, senza lo stile di base del browser */
button.elenco__voce { width: 100%; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.elenco__icona {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
}
.elenco__testo { display: grid; gap: 2px; flex: 1; min-width: 0; }
.elenco__sopra { font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-on-surface-variant); }
.elenco__titolo { font: var(--md-sys-typescale-body-large); }
.elenco__fine { color: var(--md-sys-color-on-surface-variant); }

.firma { text-align: center; font: var(--md-sys-typescale-label-small); color: var(--md-sys-color-on-surface-variant); margin-top: 16px; }

/* ---- numeri piccoli (10eLotto, ruote, extra): cerchi neutri; Oro e Doppio Oro nel sole, oro chiaro e oro scuro ---- */
.numero {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-label-large); font-variant-numeric: tabular-nums;
}
.numero--oro, .numero--doppio { -webkit-mask: url("../img/forme/sunny.svg") center / contain no-repeat; mask: url("../img/forme/sunny.svg") center / contain no-repeat; border-radius: 0; }
.numero--oro { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.numero--doppio { background: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary); }
.numero--extra { background: none; box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); }
.numero--legenda { width: 20px; height: 20px; font-size: 0; }
.griglia-numeri { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px 2px; justify-items: center; }
.riga-numeri { display: flex; flex-wrap: wrap; gap: 6px; }
.riga-numeri--extra { gap: 6px 4px; }
.riga-etichetta { display: grid; gap: 8px; }
.riga-etichetta__nome, .legenda { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
.legenda { display: flex; align-items: center; gap: 8px; margin-top: -4px; }
.legenda span + .numero { margin-left: 12px; }
.sestina--cinque { justify-content: flex-start; gap: 10px; }
.sestina--piccola { justify-content: flex-start; gap: 6px; }
.pallina--mini { width: 36px; height: 36px; font: var(--md-sys-typescale-title-medium); font-weight: var(--md-sys-typescale-emphasized-weight); }
.pallina--piccola.pallina--mini { width: 32px; height: 32px; font: var(--md-sys-typescale-label-large); font-weight: var(--md-sys-typescale-emphasized-weight); }
.avviso { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.avviso a { color: var(--md-sys-color-primary); text-decoration: underline; }
/* estrazione nuova arrivata mentre la pagina è aperta: le palline si girano una dopo l'altra */
[data-corpo].nuova .pallina, [data-corpo].nuova .numero { animation: gira var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes gira { from { transform: rotateY(90deg); } }

/* Lotto: la ruota scelta in cima, le altre a scomparsa */
.ruota-cima { display: grid; gap: 10px; }
.ruota-cima__nome { font: var(--md-sys-typescale-title-medium); color: var(--md-sys-color-on-surface-variant); }
.ruote > summary { list-style: none; justify-self: start; margin-left: -12px; }
.ruote > summary::-webkit-details-marker { display: none; }
.ruote__freccia { transition: transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial); }
.ruote[open] .ruote__freccia { transform: rotate(180deg); }
.ruote__elenco { display: grid; gap: 2px; margin-top: 8px; }
.ruota { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 48px; }
.ruota__nome { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
.ruota .riga-numeri { gap: 4px; flex-wrap: nowrap; min-width: 0; }
/* a 360 px la riga non ci sta per 18 px: i cerchi si stringono un poco invece di sbordare */
.ruota .numero { flex: 0 1 30px; width: auto; height: auto; aspect-ratio: 1; min-width: 0; }
.ruota--scelta .ruota__nome { color: var(--md-sys-color-primary); }
.pulsante-icona--piccolo { width: 40px; height: 40px; }
.pulsante-icona--piccolo .icona { font-size: 20px; }
.pulsante-icona[aria-pressed="true"] { color: var(--md-sys-color-primary); }

/* 10eLotto: scelta tra 5 minuti e serale, conto alla rovescia con l'indicatore a onda di M3 Expressive */
.conto { display: grid; gap: 8px; }
.conto__testo { display: flex; justify-content: space-between; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
.conto__tempo { font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface); }
.onda { display: block; width: 100%; height: 12px; overflow: visible; }
.onda path { fill: none; stroke-width: 4; stroke-linecap: round; }
.onda__valore { stroke: var(--md-sys-color-primary); animation: scorre-onda 1.2s linear infinite; }
.onda__traccia { stroke: var(--ls-traccia); }
@keyframes scorre-onda { to { transform: translateX(40px); } }

/* barra in alto: nelle sezioni il titolo compare solo quando quello grande è uscito dallo schermo */
.barra-alta__inizio { display: flex; align-items: center; gap: 4px; min-width: 0; }
.barra-alta__titolo { font: var(--md-sys-typescale-title-large); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-alta--sezione .barra-alta__titolo { opacity: 0; transition: opacity var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects); }
.barra-alta--sezione.con-titolo .barra-alta__titolo { opacity: 1; }
.barra-alta--sotto { padding-left: 4px; }

.estrazione { display: grid; gap: 10px; min-height: 0; padding: 14px 16px; }

/* ---- veste della stagione: la decide il tema del concorso (natale, pasqua, neutro) ---- */
.scheda--stagione[data-tema="pasqua"] { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.scheda--stagione[data-tema="pasqua"] .etichetta,
.scheda--stagione[data-tema="pasqua"] .pulsante--pieno { background: var(--md-sys-color-on-tertiary-container); color: var(--md-sys-color-tertiary-container); }   /* vedi .scheda--gioco */
/* neutro = arancio del logo, uguale nei due temi (il secondary container in scuro è marrone) */
.scheda--stagione[data-tema="neutro"] { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.scheda--stagione[data-tema="neutro"] .etichetta,
.scheda--stagione[data-tema="neutro"] .pulsante--pieno { background: var(--md-sys-color-on-primary-container); color: var(--md-sys-color-primary-container); }
.scheda--stagione { --sfondo-campo: var(--ls-color-rosso-container); --stagione-testo: var(--ls-color-on-rosso-container); }
.scheda--stagione[data-tema="pasqua"] { --sfondo-campo: var(--md-sys-color-tertiary-container); --stagione-testo: var(--md-sys-color-on-tertiary-container); }
.scheda--stagione[data-tema="neutro"] { --sfondo-campo: var(--md-sys-color-primary-container); --stagione-testo: var(--md-sys-color-on-primary-container); }
/* il campo del codice sulla scheda colorata: etichetta, aiuto e bordo nel colore del testo della scheda (il grigio e il
   rosso d'errore sul rosso non si leggevano, Thomas 24/10/2026); l'errore è un riquadro coi colori della scheda invertiti */
.scheda--stagione .campo__input { border-color: var(--stagione-testo); }
.scheda--stagione .campo__input:focus { border-color: var(--stagione-testo); }
.scheda--stagione .campo__etichetta, .scheda--stagione .campo__input:focus + .campo__etichetta, .scheda--stagione .campo__aiuto { color: var(--stagione-testo); }
.scheda--stagione .campo--errore .campo__input { border: 2px solid var(--stagione-testo); padding: 0 14px; }
.scheda--stagione .campo--errore .campo__etichetta { color: var(--stagione-testo); }
.scheda--stagione .campo--errore .campo__aiuto {
  margin-top: 4px; padding: 10px 12px; border-radius: var(--md-sys-shape-corner-small);
  background: var(--stagione-testo); color: var(--sfondo-campo); font: var(--md-sys-typescale-body-medium);
}

/* ---- campo di testo (outlined text field M3): l'etichetta sale quando scrivi ---- */
.campo { position: relative; display: grid; gap: 4px; }
.campo__input {
  width: 100%; height: 56px; padding: 0 15px; border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small); background: transparent; color: inherit;
  font: var(--md-sys-typescale-body-large); outline: none;
}
.campo__input:hover { border-color: currentColor; }
.campo__input:focus { border: 2px solid var(--md-sys-color-primary); padding: 0 14px; }
.campo__etichetta {
  position: absolute; left: 12px; top: 16px; padding: 0 4px; pointer-events: none;
  background: var(--sfondo-campo, var(--md-sys-color-surface)); color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-large); transform-origin: left center;
  transition: transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial), color var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects);
}
.campo__input:focus + .campo__etichetta, .campo__input:not(:placeholder-shown) + .campo__etichetta { transform: translateY(-24px) scale(.75); }
.campo__input:focus + .campo__etichetta { color: var(--md-sys-color-primary); }
.campo__aiuto { padding: 0 16px; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
.campo--errore .campo__input { border-color: var(--md-sys-color-error); }
.campo--errore .campo__etichetta, .campo--errore .campo__aiuto { color: var(--md-sys-color-error); }
.campo__input--codice { font: var(--md-sys-typescale-title-large); letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.campo__input--codice::placeholder { color: transparent; }
.modulo { display: grid; gap: 12px; }

/* ---- sorteggio ---- */
/* la foto dei premi dopo il primo, in fondo alla riga (il primo ha la sua scheda grande) */
.premio-mini { flex: none; width: 56px; height: 56px; margin-left: auto; border-radius: var(--md-sys-shape-corner-medium); object-fit: cover; background: var(--md-sys-color-surface-container-highest); }
.scheda--vuota { justify-items: center; text-align: center; padding: 32px 24px; }
.icona-grande {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
.icona-grande .icona { font-size: 36px; }
.conto-giorni { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.conto-giorni__cella {
  display: grid; justify-items: center; gap: 2px; padding: 12px 0;
  border-radius: var(--md-sys-shape-corner-large); background: color-mix(in srgb, currentColor 8%, transparent);
}
.conto-giorni__numero { font: var(--md-sys-typescale-headline-medium); font-weight: var(--md-sys-typescale-emphasized-weight); font-variant-numeric: tabular-nums; }
.conto-giorni__nome { font: var(--md-sys-typescale-label-medium); opacity: .8; }

.premio-primo { padding: 0; overflow: hidden; gap: 0; }
.premio-primo__foto {
  display: grid; place-items: center; aspect-ratio: 16 / 9; width: 100%; object-fit: cover;
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant);
}
.premio-primo__foto .icona { font-size: 48px; }
.premio-primo__testo { display: grid; gap: 4px; padding: 16px 20px 20px; }
.premio-primo__titolo { font: var(--md-sys-typescale-headline-small); font-weight: var(--md-sys-typescale-emphasized-weight); }
/* senza foto niente riquadro vuoto: l'icona sta accanto al nome */
.premio-primo--senza-foto { grid-template-columns: auto 1fr; align-items: center; padding: 16px 20px; gap: 16px; }
.premio-primo--senza-foto .premio-primo__foto { aspect-ratio: auto; width: 56px; height: 56px; border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.premio-primo--senza-foto .premio-primo__foto .icona { font-size: 28px; }
.premio-primo--senza-foto .premio-primo__testo { padding: 0; }
.posizione {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
  font: var(--md-sys-typescale-title-medium); font-weight: var(--md-sys-typescale-emphasized-weight);
}
.elenco__voce--fatta .elenco__titolo { color: var(--md-sys-color-on-surface-variant); }
.elenco__voce--prossima { box-shadow: inset 0 0 0 2px var(--md-sys-color-primary); }

/* domande frequenti: voci dell'elenco che si aprono */
.domanda > summary { list-style: none; cursor: pointer; }
.domanda > summary::-webkit-details-marker { display: none; }
.domanda[open] .ruote__freccia { transform: rotate(180deg); }
.domanda.in-chiusura .ruote__freccia, .ruote.in-chiusura .ruote__freccia { transform: none; }   /* la freccia torna giù appena si chiude */
.domanda__risposta { padding: 0 16px 16px 16px; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); background: var(--ls-superficie-scheda); }
.elenco > li:last-child .domanda[open] > summary { border-bottom-left-radius: var(--md-sys-shape-corner-extra-small); border-bottom-right-radius: var(--md-sys-shape-corner-extra-small); }
.elenco > li:last-child .domanda[open] .domanda__risposta { border-bottom-left-radius: var(--md-sys-shape-corner-large-increased); border-bottom-right-radius: var(--md-sys-shape-corner-large-increased); }

/* ---- registrazione: passi, caselle di consenso, riepilogo, ricevuta ---- */
.passi { display: grid; gap: 8px; }
.passi__barra { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.passi__barra span { height: 4px; border-radius: var(--md-sys-shape-corner-full); background: var(--ls-traccia); transition: background-color var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects); }
.passi__barra span.fatto { background: var(--md-sys-color-primary); }
.passi__testo { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
.passo { display: grid; gap: 16px; }
.passo[data-entra] { animation: entra-da-destra var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial) both; }
.passo[data-entra="indietro"] { animation-name: entra-da-sinistra; }
.passo__titolo { font: var(--md-sys-typescale-headline-small); font-weight: var(--md-sys-typescale-emphasized-weight); }
.contesto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.azioni { display: grid; gap: 8px; margin-top: 8px; }

/* casella (checkbox M3): tutta la riga si tocca */
.consenso { display: flex; gap: 16px; align-items: flex-start; padding: 14px 16px; background: var(--ls-superficie-scheda); border-radius: var(--md-sys-shape-corner-extra-small); cursor: pointer; }
.elenco > .consenso:first-child { border-top-left-radius: var(--md-sys-shape-corner-large-increased); border-top-right-radius: var(--md-sys-shape-corner-large-increased); }
.elenco > .consenso:last-child { border-bottom-left-radius: var(--md-sys-shape-corner-large-increased); border-bottom-right-radius: var(--md-sys-shape-corner-large-increased); }
.casella {
  appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 3px 0 0;
  border: 2px solid var(--md-sys-color-on-surface-variant); border-radius: 2px; background: transparent; cursor: pointer;
  transition: background-color var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects);
}
.casella:checked { border-color: var(--md-sys-color-primary); background: var(--md-sys-color-primary); }
.casella:checked::after {
  content: ""; width: 10px; height: 5px; margin-top: -2px; border: solid var(--md-sys-color-on-primary); border-width: 0 0 2px 2px; transform: rotate(-45deg);
  animation: compari var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
}
.consenso__testo { display: grid; gap: 2px; font: var(--md-sys-typescale-body-large); }
.consenso__testo small { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.consenso--errore .casella { border-color: var(--md-sys-color-error); }
.consenso--errore .consenso__testo small { color: var(--md-sys-color-error); }
.consenso a { color: var(--md-sys-color-primary); text-decoration: underline; }
.facoltativo { color: var(--md-sys-color-on-surface-variant); }

.riepilogo { display: grid; gap: 2px; }
.riepilogo div { display: grid; gap: 2px; padding: 12px 16px; background: var(--ls-superficie-scheda); border-radius: var(--md-sys-shape-corner-extra-small); }
.riepilogo div:first-child { border-top-left-radius: var(--md-sys-shape-corner-large-increased); border-top-right-radius: var(--md-sys-shape-corner-large-increased); }
.riepilogo div:last-child { border-bottom-left-radius: var(--md-sys-shape-corner-large-increased); border-bottom-right-radius: var(--md-sys-shape-corner-large-increased); }
.riepilogo dt { font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-on-surface-variant); }
.riepilogo dd { margin: 0; font: var(--md-sys-typescale-body-large); overflow-wrap: anywhere; }

.ricevuta { justify-items: center; text-align: center; padding: 28px 20px; }
.ricevuta .icona-grande { background: var(--ls-color-aperto-container); color: var(--ls-color-on-aperto-container); animation: compari var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial); }
.riferimento { font: var(--md-sys-typescale-headline-small); font-weight: var(--md-sys-typescale-emphasized-weight); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.scheda--gioco { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.scheda--gioco .scheda__dettaglio { color: inherit; opacity: .85; }
/* Nella palette Vibrant 2025 il contenitore giallo resta chiaro anche nel tema scuro: tertiary su tertiary-container
   non si distinguerebbe. Il pulsante usa la coppia inversa (on-tertiary-container), leggibile nei due temi. */
.scheda--gioco .pulsante--pieno { background: var(--md-sys-color-on-tertiary-container); color: var(--md-sys-color-tertiary-container); }

/* ---- pulsante grande (Expressive L, 96 px): solo per l'unica azione di una schermata, come "Ferma" ---- */
.pulsante--grande { height: 96px; padding: 0 48px; font: var(--md-sys-typescale-headline-small); font-weight: var(--md-sys-typescale-emphasized-weight); }
.pulsante--grande:active { border-radius: var(--md-sys-shape-corner-extra-large); }
/* Disattivato come da specifica M3: contenitore on-surface al 12%, testo e icona on-surface al 38% (27/10/2026).
   Prima era tutto il pulsante al 38%: il pieno marrone diventava beige e sembrava un colore in più. */
.pulsante:disabled {
  cursor: default;
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
.pulsante--testo:disabled { background: none; }
.pulsante:disabled::before { display: none; }

/* ---- la trottola: il bollino del negozio che gira sulla sua pista ---- */
.gioco { display: grid; gap: 16px; justify-items: center; text-align: center; }
.pista {
  position: relative; display: grid; place-items: center; width: min(280px, 72vw); aspect-ratio: 1;
  border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container-high);
  box-shadow: inset 0 0 0 8px var(--md-sys-color-surface-container-highest);
  transition: background-color var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects);
}
.pista__oscilla { width: 68%; }
.pista.gira .pista__oscilla { animation: oscilla 1.1s ease-in-out infinite alternate; }
.trottola { width: 100%; height: auto; }
.pista.gira .trottola { animation: gira-trottola .55s linear infinite; }
@keyframes gira-trottola { to { transform: rotate(360deg); } }
@keyframes oscilla { from { transform: translate(-4px, 2px) rotate(-3deg); } to { transform: translate(4px, -2px) rotate(3deg); } }
/* vinto: la pista diventa il sole di Material e rimbalza; perso: la trottola si corica */
.pista.vinta { background: var(--md-sys-color-tertiary-container); box-shadow: none; border-radius: 0;
  -webkit-mask: url("../img/forme/sunny.svg") center / contain no-repeat; mask: url("../img/forme/sunny.svg") center / contain no-repeat;
  animation: compari var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial); }
/* perso: la trottola resta dritta e al centro, solo un po' più piccola (Thomas, 24/10/2026: inclinata sembrava storta) */
.pista.persa .pista__oscilla { transform: scale(.9); transition: transform var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial); }
.gioco__stato { font: var(--md-sys-typescale-body-large); color: var(--md-sys-color-on-surface-variant); min-height: 24px; }
.interruttore { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-large); }
.interruttore[aria-pressed="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.interruttore .icona { font-size: 20px; }
.esito { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 24px 20px; }
.esito__premio { font: var(--md-sys-typescale-headline-medium); font-weight: var(--md-sys-typescale-emphasized-weight); }
.esito .riepilogo { width: 100%; text-align: left; }

/* ---- ricevuta del premio: il QR sempre su bianco, il più grande possibile ---- */
.qr { display: grid; gap: 12px; justify-items: center; padding: 20px; text-align: center; }
.qr__codice { width: min(260px, 70vw); aspect-ratio: 1; padding: 12px; border-radius: var(--md-sys-shape-corner-large); background: #ffffff; }   /* bianco fisso: lo scanner legge nero su bianco anche in tema scuro */
.qr__codice svg { display: block; width: 100%; height: 100%; }
.etichetta--aperto { background: var(--ls-color-aperto-container); color: var(--ls-color-on-aperto-container); }
.icona-grande--aperto { background: var(--ls-color-aperto-container); color: var(--ls-color-on-aperto-container); }
.icona-grande--errore { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.etichetta--neutra { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }
.etichetta--errore { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }

/* ---- estrazione in diretta ---- */
.in-diretta::before {   /* il pallino che pulsa vicino a "In diretta" */
  content: ""; width: 8px; height: 8px; border-radius: var(--md-sys-shape-corner-full); background: currentColor;
  animation: pulsa 1.4s ease-in-out infinite;
}
@keyframes pulsa { 50% { opacity: .25; } }
.ultimo { display: grid; gap: 4px; justify-items: start; }
.ultimo__nome { font: var(--md-sys-typescale-display-small); font-weight: var(--md-sys-typescale-emphasized-weight); font-variation-settings: "wdth" 82; }
.ultimo.entra .ultimo__nome { animation: compari var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial); }
.attesa-prossimo { display: flex; align-items: center; gap: 12px; font: var(--md-sys-typescale-body-large); }
.scheda--stagione .indicatore { color: inherit; }
.scaletta .elenco__voce { transition: background-color var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects); }
.scaletta .da-estrarre { color: var(--md-sys-color-on-surface-variant); }
.scaletta .da-estrarre .posizione { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }
.scaletta .estratta.entra { animation: entra-da-destra var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial); }
.scaletta .indicatore { width: 40px; height: 40px; flex: none; }
.scaletta .finale .posizione { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }

/* ---- modalità TV (estrazione.html?tv=1): schermo intero del negozio, niente barre, caratteri grandi ---- */
.tv .barra-alta, .tv .barra-basso, .tv [data-solo-telefono] { display: none !important; }
.tv .app { max-width: none; }
.tv .contenuto { min-height: 100dvh; padding: 48px 56px; gap: 32px; grid-template-columns: 1.15fr 1fr; align-content: start; }
.tv .contenuto > * { grid-column: 1; }
.tv .contenuto > .scaletta-blocco { grid-column: 2; grid-row: 1 / span 6; }
.tv .tv__marchio { display: block !important; height: 64px; width: auto; justify-self: start; }   /* in griglia si allargherebbe e si schiaccerebbe */
.tv .scheda__titolo { font: var(--md-sys-typescale-display-small); font-weight: var(--md-sys-typescale-emphasized-weight); }
.tv .scheda__dettaglio, .tv .attesa-prossimo { font: var(--md-sys-typescale-title-large); }
.tv .ultimo__nome { font-size: 96px; line-height: 1; }
.tv .conto-giorni__numero { font-size: 72px; line-height: 1.1; }
.tv .scaletta .elenco__voce { min-height: 96px; }
.tv .scaletta .elenco__titolo { font: var(--md-sys-typescale-headline-small); }
.tv .scaletta .elenco__sopra { font: var(--md-sys-typescale-title-medium); }
.tv .sezione__titolo { font: var(--md-sys-typescale-headline-medium); font-weight: var(--md-sys-typescale-emphasized-weight); }
.tv .indicatore { width: 64px; height: 64px; }
.tv__marchio { display: none; }
.tv-pieno { position: fixed; top: 16px; right: 16px; z-index: 5; display: none; }
.tv .tv-pieno { display: inline-grid; }
/* notizie che scorrono durante l'attesa */
.promo { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; padding: 16px; }
.promo--senza-foto { grid-template-columns: 1fr; }
.promo__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--md-sys-shape-corner-large); }
.promo__titolo { font: var(--md-sys-typescale-headline-small); font-weight: var(--md-sys-typescale-emphasized-weight); }
.promo__testo { font: var(--md-sys-typescale-title-medium); color: var(--md-sys-color-on-surface-variant); }
.promo.entra { animation: entra-da-destra var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial); }
@media (max-width: 900px) { .tv .contenuto { grid-template-columns: 1fr; padding: 24px; } .tv .contenuto > .scaletta-blocco { grid-column: 1; grid-row: auto; } }

/* ---- barra di ricerca (search bar M3): capsula alta 56 px ---- */
.ricerca { position: sticky; top: calc(64px + env(safe-area-inset-top)); z-index: 5; display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 4px 0 16px;
  border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); }
.ricerca__campo { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-large); outline: none; }
.ricerca__campo::placeholder { color: var(--md-sys-color-on-surface-variant); }
.ricerca:focus-within { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.ricerca__campo::-webkit-search-cancel-button { display: none; }

/* ---- Smorfia: tessere a due colonne, il numero grande ---- */
.smorfia { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.smorfia__voce { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--md-sys-shape-corner-medium); background: var(--ls-superficie-scheda); }
.smorfia__numero { font: var(--md-sys-typescale-title-large); font-weight: var(--md-sys-typescale-emphasized-weight); color: var(--md-sys-color-primary); font-variant-numeric: tabular-nums; }
.smorfia__parola { font: var(--md-sys-typescale-body-large); }
.smorfia__voce--trovata { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

/* ---- chip di scelta (filter chip M3 a scelta singola) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px; border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small); background: none; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-large);
}
.chip[aria-checked="true"] { padding-left: 8px; border-color: transparent; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.chip[aria-checked="true"]::before { content: "check"; font-family: "Material Symbols Rounded"; font-size: 18px; line-height: 1; }

/* ---- quantità: meno / numero / più ---- */
.quantita { display: inline-flex; align-items: center; gap: 4px; }
.quantita__valore { min-width: 48px; text-align: center; font: var(--md-sys-typescale-headline-small); font-weight: var(--md-sys-typescale-emphasized-weight); font-variant-numeric: tabular-nums; }
.quantita .pulsante-icona { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.quantita .pulsante-icona:disabled { opacity: .38; }
.riga-scelta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.riga-scelta__testo { display: grid; gap: 2px; }

/* numeri generati: cerchi pieni ma senza le forme, che restano delle estrazioni vere */
.generati { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 52px; }
.generato { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
  font: var(--md-sys-typescale-title-large); font-weight: var(--md-sys-typescale-emphasized-weight); font-variant-numeric: tabular-nums;
  animation: compari var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial) both; animation-delay: calc(var(--i, 0) * 45ms); }

/* ---- interruttore (switch M3): binario 52×32, pomello che cresce e mostra la spunta ---- */
.switch-riga { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 12px 16px; background: var(--ls-superficie-scheda); border-radius: var(--md-sys-shape-corner-extra-small); cursor: pointer; }
.elenco > .switch-riga:first-child { border-top-left-radius: var(--md-sys-shape-corner-large-increased); border-top-right-radius: var(--md-sys-shape-corner-large-increased); }
.elenco > .switch-riga:last-child { border-bottom-left-radius: var(--md-sys-shape-corner-large-increased); border-bottom-right-radius: var(--md-sys-shape-corner-large-increased); }
.switch-riga .elenco__testo { flex: 1; }
.switch {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 52px; height: 32px; margin: 0; cursor: pointer;
  border: 2px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container-highest);
  transition: background-color var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects), border-color var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects);
}
.switch::after {
  content: ""; position: absolute; top: 50%; left: 6px; width: 16px; height: 16px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-outline);
  transform: translateY(-50%);
  transition: left var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial), width var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial), height var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
}
.switch:checked { border-color: var(--md-sys-color-primary); background: var(--md-sys-color-primary); }
.switch:checked::after { left: 22px; width: 24px; height: 24px; background: var(--md-sys-color-on-primary); }
.switch:active::after { width: 28px; height: 28px; }
.switch:disabled { opacity: .38; cursor: default; }

/* ---- orari e contatti ---- */
.azioni-contatto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.azione-contatto { display: grid; justify-items: center; gap: 4px; padding: 16px 8px; text-align: center; border-radius: var(--md-sys-shape-corner-large-increased); background: var(--ls-superficie-scheda); }
.azione-contatto__icona { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 4px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.azione-contatto__nome { font: var(--md-sys-typescale-title-medium); }
.azione-contatto__dettaglio { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
.settimana div { grid-template-columns: 1fr auto; align-items: center; }
.settimana dd { text-align: right; font-variant-numeric: tabular-nums; }
.settimana .oggi { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.settimana .oggi dt { color: inherit; font-weight: var(--md-sys-typescale-emphasized-weight); }

/* ---- notizie: carosello in Home (carousel M3 "multi-browse"), schede con foto o a colori ---- */
.carosello { display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.carosello::-webkit-scrollbar { display: none; }
.carosello > li { flex: none; scroll-snap-align: start; }
.notizia-card {
  position: relative; isolation: isolate; display: grid; align-content: end; gap: 6px; overflow: hidden;
  width: 248px; height: 232px; padding: 18px; border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
}
.carosello > li:first-child .notizia-card { width: min(320px, calc(100vw - 88px)); }   /* la più recente più grande */
.notizia-card__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial); }
@media (hover: hover) { .notizia-card:hover .notizia-card__foto { transform: scale(1.04); } }
.notizia-card--foto { color: var(--ls-color-su-foto); }
.notizia-card--foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--md-sys-color-scrim) 72%, transparent), transparent 62%); }
.notizia-card__titolo { font: var(--md-sys-typescale-title-large); font-weight: var(--md-sys-typescale-emphasized-weight); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.notizia-card__quando { justify-self: start; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-medium); background: color-mix(in srgb, currentColor 16%, transparent); }
/* senza foto: la scheda prende un colore della palette e la forma del bollino come decoro */
/* i tre colori del logo (arancio, giallo, rosso), uguali in chiaro e in scuro: niente marrone */
.notizia-card--tono-1 { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.notizia-card--tono-2 { background: var(--ls-color-rosso-container); color: var(--ls-color-on-rosso-container); }
.notizia-card__forma { position: absolute; top: -28px; right: -28px; z-index: -1; width: 150px; height: 150px; display: grid; place-items: center; padding: 34px 34px 0 0;
  -webkit-mask: url("../img/forme/cookie12.svg") center / contain no-repeat; mask: url("../img/forme/cookie12.svg") center / contain no-repeat;
  background: color-mix(in srgb, currentColor 12%, transparent); }
.notizia-card__forma .icona { font-size: 40px; }

/* ---- notifiche: pannello dalla campanella ---- */
.foglio__testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; }
.foglio__testa h2 { font: var(--md-sys-typescale-title-large); font-weight: var(--md-sys-typescale-emphasized-weight); }
.etichetta--nuove { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
.elenco__voce--nuova { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.elenco__voce--nuova .miniatura-forma--icona { background: var(--ls-superficie-scheda); color: var(--md-sys-color-on-surface); }
.elenco__voce--nuova .elenco__titolo { font-weight: var(--md-sys-typescale-emphasized-weight); }
.elenco__voce--nuova .elenco__sopra { color: inherit; opacity: .8; }
.non-letta { width: 10px; height: 10px; flex: none; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-error); }
/* miniature nella forma del bollino: le foto prendono la forma Expressive, le notizie senza foto un sole colorato */
.miniatura-forma { width: 56px; height: 56px; flex: none; object-fit: cover;
  -webkit-mask: url("../img/forme/cookie12.svg") center / contain no-repeat; mask: url("../img/forme/cookie12.svg") center / contain no-repeat; }
.miniatura-forma--icona { display: grid; place-items: center; background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);
  -webkit-mask-image: url("../img/forme/sunny.svg"); mask-image: url("../img/forme/sunny.svg"); }
.elenco__sommario { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.elenco__voce--nuova .elenco__sommario { color: inherit; opacity: .85; }

/* ---- articolo ---- */
.articolo { display: grid; gap: 16px; min-width: 0; overflow-wrap: anywhere; }   /* una parola lunghissima va a capo, non allarga la pagina */
/* testata: foto con il velo, o colore del logo con il bollino; la data sta sopra, in basso a sinistra */
.articolo__testata {
  position: relative; isolation: isolate; display: grid; align-items: end; justify-items: start; overflow: hidden;
  aspect-ratio: 16 / 10; padding: 16px; border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
}
.articolo__testata--foto { color: var(--ls-color-su-foto); }
.articolo__testata--foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--md-sys-color-scrim) 55%, transparent), transparent 45%); }
.articolo__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* con la foto la testata prende le proporzioni della foto (niente tagli con le immagini fuori misura, Thomas
   24/10/2026); una foto molto alta si ferma all'80% dello schermo e si vede intera */
.articolo__testata--foto { aspect-ratio: auto; padding: 0; }
.articolo__testata--foto > * { grid-area: 1 / 1; }
.articolo__testata--foto .articolo__foto { position: relative; inset: auto; height: auto; max-height: 80vh; object-fit: contain; background: var(--md-sys-color-surface-container-high); }
.articolo__testata--foto .notizia-card__quando { margin: 16px; z-index: 1; }
.articolo__testata .notizia-card__forma { top: -14%; right: -10%; width: 62%; height: auto; aspect-ratio: 1; padding: 0 12% 0 0; }
.articolo__testata .notizia-card__forma .icona { font-size: 64px; }
.articolo__testata { animation: compari var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial) both; }
.articolo__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
.chip-firma { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 4px; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-high); font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
.chip-firma img { width: 28px; height: 28px; border-radius: var(--md-sys-shape-corner-full); object-fit: cover; }
.articolo__azioni { display: flex; flex-wrap: wrap; gap: 8px; }
.articolo__titolo { font: var(--md-sys-typescale-headline-medium); font-weight: var(--md-sys-typescale-emphasized-weight); font-variation-settings: "wdth" 82; }
.articolo__testo { display: grid; gap: 12px; font: var(--md-sys-typescale-body-large); }
/* il sommario come citazione: riquadro giallo del logo con le virgolette */
.articolo__attacco { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 16px 20px 16px 16px;
  border-radius: var(--md-sys-shape-corner-large-increased); background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);
  font: var(--md-sys-typescale-title-medium); }
.articolo__attacco .icona { font-size: 28px; }.firma-autore { display: flex; align-items: center; gap: 10px; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
.firma-autore img { width: 32px; height: 32px; border-radius: var(--md-sys-shape-corner-full); }

/* ---- riquadro d'esito: il server ha detto no, o la risposta non è arrivata (registrazione del biglietto) ---- */
.riquadro-esito {
  display: grid; gap: 8px; justify-items: start; padding: 16px; border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container);
  font: var(--md-sys-typescale-body-medium);
}
.riquadro-esito[hidden] { display: none; }
.riquadro-esito__titolo { font: var(--md-sys-typescale-title-small); }
.riquadro-esito:focus-visible { outline: 2px solid var(--md-sys-color-secondary); outline-offset: 2px; }

/* ---- caricamento: scheletro delle palline (pulsa piano, fermo con il movimento ridotto) ---- */
.scheletro { display: flex; flex-wrap: wrap; gap: 8px; }
.scheletro span { width: 44px; height: 44px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container-highest);
  animation: pulsa-scheletro 1.1s ease-in-out infinite alternate; }
.scheletro span:nth-child(2n) { animation-delay: .15s; }
@keyframes pulsa-scheletro { to { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .scheletro span { animation: none; } }
.senza-effetti .scheletro span { animation: none; }
.visivamente-nascosto { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- avviso breve in basso (snackbar M3) ---- */
.avviso-breve {
  position: fixed; left: 16px; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 20;
  max-width: 568px; margin: 0 auto; padding: 14px 16px; border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface);
  font: var(--md-sys-typescale-body-medium); box-shadow: var(--md-sys-elevation-level2);
  animation: sali-poco var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial);
}
@keyframes sali-poco { from { transform: translateY(24px); } }

/* solo nel prototipo: scegliere quale fase mostrare. Non fa parte del design. */
.solo-prototipo { margin-top: 24px; padding: 12px; border: 1px dashed var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-large); display: grid; gap: 8px; }
.solo-prototipo .gruppo-scelta { flex-wrap: wrap; }
.solo-prototipo .gruppo-scelta__voce { flex: 1 1 30%; height: 40px; border-radius: var(--md-sys-shape-corner-full); }

/* ---- pannello dal basso (modal bottom sheet): sale con la molla spaziale, scende con quella degli effetti ---- */
.foglio {
  width: 100%; max-width: 600px; max-height: calc(100dvh - 56px); margin: auto auto 0; padding: 0;
  border: 0; border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
  background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface);
  overflow: auto; overscroll-behavior: contain;
}
.foglio::backdrop { background: rgb(0 0 0 / 0.32); }
.foglio[open] { animation: sali var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial); }
.foglio[open]::backdrop { animation: appari var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects); }
.foglio.chiude { animation: scendi var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects) forwards; }
.foglio.chiude::backdrop { animation: appari var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects) reverse forwards; }
@keyframes sali { from { transform: translateY(100%); } }
@keyframes scendi { to { transform: translateY(100%); } }
@keyframes appari { from { opacity: 0; } }
.foglio__maniglia { display: block; width: 32px; height: 4px; margin: 16px auto 8px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-on-surface-variant); opacity: .4; }
.foglio__corpo { display: grid; gap: 16px; padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); }
.foglio__titolo { font: var(--md-sys-typescale-title-small); color: var(--md-sys-color-on-surface-variant); padding-left: 4px; }
.elenco__voce--compatta { min-height: 56px; }
.elenco__icona--neutra { background: none; color: var(--md-sys-color-on-surface-variant); }

/* ---- gruppo di pulsanti collegati (connected button group): la scelta attiva diventa tonda ---- */
.gruppo-scelta { display: flex; gap: 2px; }
.gruppo-scelta__voce {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 48px; padding: 0 12px;
  border: 0; border-radius: var(--md-sys-shape-corner-small);
  background: var(--ls-superficie-scheda); color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-label-large);
  transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial),
              background-color var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects);
}
.gruppo-scelta__voce:first-child { border-top-left-radius: var(--md-sys-shape-corner-full); border-bottom-left-radius: var(--md-sys-shape-corner-full); }
.gruppo-scelta__voce:last-child { border-top-right-radius: var(--md-sys-shape-corner-full); border-bottom-right-radius: var(--md-sys-shape-corner-full); }
.gruppo-scelta__voce[aria-checked="true"] {
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
.gruppo-scelta__voce .icona { font-size: 20px; }

/* ---- passaggio tra le pagine (View Transitions tra documenti) ----
   Tra le sezioni della barra in basso: "fade through" di M3. Verso una sottopagina e ritorno: "shared axis X".
   Le barre restano ferme. Il verso lo sceglie js/app.js (pagereveal). */
@view-transition { navigation: auto; }
.barra-basso { view-transition-name: barra-basso; }
.barra-alta { view-transition-name: barra-alta; }
::view-transition-old(root) { animation: 90ms var(--md-sys-motion-spring-default-effects) both esce-sfumando; }
::view-transition-new(root) { animation: 210ms var(--md-sys-motion-spring-default-effects) 90ms both entra-sfumando; }
@keyframes esce-sfumando { to { opacity: 0; } }
@keyframes entra-sfumando { from { opacity: 0; transform: scale(.92); } }
html:active-view-transition-type(avanti)::view-transition-old(root) { animation: var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial) both esce-a-sinistra; }
html:active-view-transition-type(avanti)::view-transition-new(root) { animation: var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial) both entra-da-destra; }
html:active-view-transition-type(indietro)::view-transition-old(root) { animation: var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial) both esce-a-destra; }
html:active-view-transition-type(indietro)::view-transition-new(root) { animation: var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial) both entra-da-sinistra; }
@keyframes esce-a-sinistra { to { opacity: 0; transform: translateX(-30px); } }
@keyframes entra-da-destra { from { opacity: 0; transform: translateX(30px); } }
@keyframes esce-a-destra { to { opacity: 0; transform: translateX(30px); } }
@keyframes entra-da-sinistra { from { opacity: 0; transform: translateX(-30px); } }

/* Movimento ridotto dal telefono, oppure animazioni spente dall'admin (html.senza-effetti): tutto fermo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.senza-effetti *, .senza-effetti *::before, .senza-effetti *::after { animation: none !important; transition: none !important; }
.senza-effetti::view-transition-group(*), .senza-effetti::view-transition-old(*), .senza-effetti::view-transition-new(*) { animation: none !important; }
.foglio__gruppi { display: grid; gap: 8px; }
.foglio__gruppi .elenco + .foglio__titolo { margin-top: 8px; }
.elenco__voce--nuova .non-letta { background: currentColor; }   /* sul arancio il pallino rosso non si vedrebbe */

/* ---- dialogo di conferma (basic dialog M3) ---- */
.dialogo {
  width: min(360px, calc(100vw - 48px)); padding: 24px; border: 0; border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface);
}
.dialogo::backdrop { background: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent); }
.dialogo[open] { display: grid; gap: 16px; justify-items: center; text-align: center; animation: compari var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial); }
.dialogo__icona { color: var(--md-sys-color-secondary); }
.dialogo__titolo { font: var(--md-sys-typescale-headline-small); }
.dialogo__testo { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); text-align: left; }
.dialogo__azioni { justify-self: end; display: flex; gap: 8px; margin-right: -12px; }
.pulsante--pericolo { color: var(--md-sys-color-error); }

/* ---- blocchi dell'articolo (formato semplice delle notizie) ---- */
.articolo__h2 { font: var(--md-sys-typescale-title-large); font-weight: var(--md-sys-typescale-emphasized-weight); margin-top: 8px; }
.articolo__h3 { font: var(--md-sys-typescale-title-medium); font-weight: var(--md-sys-typescale-emphasized-weight); margin-top: 4px; }
.articolo__testo strong { font-weight: var(--md-sys-typescale-emphasized-weight); }
.articolo__elenco { display: grid; gap: 10px; padding: 0; list-style: none; counter-reset: voce; }
.articolo__elenco li { position: relative; padding-left: 28px; }
.articolo__elenco li::before { content: ""; position: absolute; left: 6px; top: .55em; width: 10px; height: 10px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-primary-container); }
.articolo__elenco--numerato li { padding-left: 44px; min-height: 32px; counter-increment: voce; }
.articolo__elenco--numerato li::before { content: counter(voce); top: -2px; left: 0; width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font: var(--md-sys-typescale-label-large); font-weight: var(--md-sys-typescale-emphasized-weight); }
.articolo__citazione { margin: 8px 0; padding: 20px; border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-surface-container-high); display: grid; gap: 8px; }
.articolo__citazione .icona { font-size: 36px; color: var(--md-sys-color-primary); }
.articolo__citazione p { font: var(--md-sys-typescale-headline-small); font-variation-settings: "wdth" 88; }
.articolo__citazione cite { font: var(--md-sys-typescale-label-large); font-style: normal; color: var(--md-sys-color-on-surface-variant); }
.articolo__citazione cite::before { content: "— "; }
.articolo__nota { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--md-sys-shape-corner-large);
  background: var(--ls-color-rosso-container); color: var(--ls-color-on-rosso-container); font: var(--md-sys-typescale-body-medium); }
.articolo__separatore { width: 100%; height: 1px; border: 0; background: var(--md-sys-color-outline-variant); margin: 8px 0; }
.articolo__figura { display: grid; gap: 8px; margin: 0; }
/* foto dentro l'articolo e nello slider: si vedono intere (anche gli screenshot lunghi), toccandole si aprono grandi */
.articolo__figura img, .galleria__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-surface-container-high); cursor: zoom-in; }
.foto-grande { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--md-sys-color-scrim, #000); }
.foto-grande::backdrop { background: var(--md-sys-color-scrim, #000); }
.foto-grande[open] { display: grid; place-items: center; animation: foto-entra var(--md-sys-motion-spring-default-effects-duration, 200ms) ease-out; }
.foto-grande.chiude { animation: foto-esce var(--md-sys-motion-spring-default-effects-duration, 200ms) ease-in forwards; }
/* la foto, insieme alla dissolvenza, cresce un poco entrando e rimpicciolisce uscendo */
.foto-grande[open] img { animation: foto-cresce var(--md-sys-motion-spring-default-effects-duration, 200ms) ease-out; }
.foto-grande.chiude img { animation: foto-rimpicciolisce var(--md-sys-motion-spring-default-effects-duration, 200ms) ease-in forwards; }
@keyframes foto-entra { from { opacity: 0; } }
@keyframes foto-esce { to { opacity: 0; } }
@keyframes foto-cresce { from { transform: scale(.92); } }
@keyframes foto-rimpicciolisce { to { transform: scale(.92); } }
@media (prefers-reduced-motion: reduce) { .foto-grande[open], .foto-grande.chiude, .foto-grande[open] img, .foto-grande.chiude img { animation: none; } }
.foto-grande img { max-width: 100%; max-height: 100dvh; object-fit: contain; }
.foto-grande__chiudi { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 12px; }
.articolo figcaption { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); padding: 0 8px; }
.articolo__tabella { overflow-x: auto; border-radius: var(--md-sys-shape-corner-large); background: var(--ls-superficie-scheda); }
.articolo__tabella table { width: 100%; border-collapse: collapse; font: var(--md-sys-typescale-body-medium); }
.articolo__tabella th { text-align: left; padding: 12px 16px; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); background: var(--md-sys-color-surface-container-high); }
.articolo__tabella td { padding: 12px 16px; border-top: 1px solid var(--md-sys-color-outline-variant); }

/* galleria a scorrimento (carousel M3 a foto intere) con frecce e pallini */
.galleria { display: grid; gap: 8px; }
.galleria__pista { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; scroll-padding: 0 16px; }
.galleria__pista::-webkit-scrollbar { display: none; }
.galleria__pista > li { flex: 0 0 88%; scroll-snap-align: start; }
.galleria__foto { display: grid; gap: 8px; margin: 0; }
.galleria__comandi { display: flex; align-items: center; justify-content: space-between; }
.galleria__punti { display: flex; gap: 6px; }
.galleria__punti span { width: 8px; height: 8px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-outline-variant);
  transition: width var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial), background-color var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects); }
.galleria__punti span.attivo { width: 24px; background: var(--md-sys-color-primary); }
.pulsante-icona--tonale { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.pulsante-icona:disabled { opacity: .38; cursor: default; }
.chip-firma--neutra { padding-left: 12px; }
.chip-firma .icona { font-size: 18px; }

/* sestina su schermi stretti (360 px): le palline si stringono, al massimo 48 px */
.sestina:not(.sestina--cinque):not(.sestina--piccola) .pallina { flex: 1 1 0; width: auto; max-width: 48px; height: auto; aspect-ratio: 1; }

/* ---- il sistema del negozio ---- */
.sistema { display: grid; gap: 12px; }
.scheda--vinto { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.scheda--vinto .scheda__dettaglio { color: inherit; opacity: .85; }
.articolo__tabella tr.vincente td { font-weight: var(--md-sys-typescale-emphasized-weight); color: var(--md-sys-color-primary); }
.ricerca--bassa { position: static; height: 48px; }
.schedine { display: grid; gap: 2px; }
.schedina { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; background: var(--ls-superficie-scheda); border-radius: var(--md-sys-shape-corner-extra-small); }
.schedine > .schedina:first-child { border-top-left-radius: var(--md-sys-shape-corner-large-increased); border-top-right-radius: var(--md-sys-shape-corner-large-increased); }
.schedine > .schedina:last-child { border-bottom-left-radius: var(--md-sys-shape-corner-large-increased); border-bottom-right-radius: var(--md-sys-shape-corner-large-increased); }
.schedina__numero { font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-on-surface-variant); font-variant-numeric: tabular-nums; }
.schedina .riga-numeri { gap: 4px; }
.schedina .numero { width: 28px; height: 28px; font: var(--md-sys-typescale-label-medium); }
.schedina .numero--extra { width: auto; padding: 0 8px; border-radius: var(--md-sys-shape-corner-full); }
.schedina__punti { font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.schedina--vincente { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.schedina--vincente .schedina__punti, .schedina--vincente .schedina__numero { color: inherit; font-weight: var(--md-sys-typescale-emphasized-weight); }
.numero--preso { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font-weight: var(--md-sys-typescale-emphasized-weight); box-shadow: none; }
.numero--cercato { box-shadow: inset 0 0 0 2px var(--md-sys-color-primary); }
/* sezione numerata (regolamenti): il numero nel cerchio tonale accanto al titolo */
.articolo__sezione { display: grid; gap: 6px; padding: 16px; border-radius: var(--md-sys-shape-corner-large); background: var(--ls-superficie-scheda); }
.articolo__sezione .articolo__h3 { display: flex; align-items: center; gap: 12px; margin: 0; }
.articolo__sezione .posizione { width: 32px; height: 32px; font: var(--md-sys-typescale-label-large); font-weight: var(--md-sys-typescale-emphasized-weight); }
.articolo__sezione p { padding-left: 44px; font: var(--md-sys-typescale-body-medium); }
/* ---- previsioni: il cielo (25/10/2026) ----
   La scheda in alto è il cielo di adesso: colori di scena da token.css, sole, luna, stelle, nuvole, pioggia, neve,
   lampi e nebbia fatti di forme semplici (cerchi e sfumature, nessuna illustrazione). È l'unico posto dell'app con
   movimenti in loop, lenti e leggeri (eccezione voluta da Thomas): si fermano con "riduci movimento", con l'admin
   (html.senza-effetti), sui telefoni poco potenti o col risparmio dati (.cielo--fermo) e fuori vista (.cielo--fuori).
   L'entrata usa le proprietà translate/scale, i loop transform: così si sommano invece di sostituirsi. */
.cielo {
  --alto: var(--ls-cielo-sereno-alto); --basso: var(--ls-cielo-sereno-basso); --testo: var(--ls-cielo-sereno-testo); --nuvola: var(--ls-cielo-nuvola); --velo: var(--ls-cielo-nuvola-velo);
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: start; gap: 4px;
  min-height: 288px; padding: 20px 24px 24px; border-radius: var(--md-sys-shape-corner-extra-large-increased);
  background: linear-gradient(180deg, var(--alto), var(--basso)); color: var(--testo);
}
.cielo--notte { --alto: var(--ls-cielo-notte-alto); --basso: var(--ls-cielo-notte-basso); --testo: var(--ls-cielo-notte-testo); --nuvola: var(--ls-cielo-nuvola-scura); --velo: var(--ls-cielo-nuvola-scura-velo); }
.cielo--nuvoloso { --alto: var(--ls-cielo-nuvoloso-alto); --basso: var(--ls-cielo-nuvoloso-basso); --testo: var(--ls-cielo-nuvoloso-testo); }
.cielo--pioggia { --alto: var(--ls-cielo-pioggia-alto); --basso: var(--ls-cielo-pioggia-basso); --testo: var(--ls-cielo-pioggia-testo); --nuvola: var(--ls-cielo-nuvola-scura); --velo: var(--ls-cielo-nuvola-scura-velo); }
.cielo--temporale { --alto: var(--ls-cielo-temporale-alto); --basso: var(--ls-cielo-temporale-basso); --testo: var(--ls-cielo-temporale-testo); --nuvola: var(--ls-cielo-nuvola-scura); --velo: var(--ls-cielo-nuvola-scura-velo); }
.cielo--nebbia { --alto: var(--ls-cielo-nebbia-alto); --basso: var(--ls-cielo-nebbia-basso); --testo: var(--ls-cielo-nebbia-testo); }
.cielo--attesa { --alto: var(--md-sys-color-surface-container-high); --basso: var(--md-sys-color-surface-container); --testo: var(--md-sys-color-on-surface-variant); }

.cielo__scena { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cielo__scena > * { position: absolute; display: none; }
.cielo__testo { display: grid; gap: 2px; justify-items: start; }
.cielo__luogo { display: inline-flex; align-items: center; gap: 4px; font: var(--md-sys-typescale-label-large); }
.cielo__luogo .icona { font-size: 18px; }
.cielo__gradi {
  margin-top: 8px; font: var(--md-sys-typescale-display-large); font-size: calc(var(--md-sys-shape-corner-extra-extra-large) * 2);
  line-height: 1; letter-spacing: -0.02em; font-variation-settings: "wdth" 82; font-weight: var(--md-sys-typescale-emphasized-weight); font-variant-numeric: tabular-nums;
}
.cielo__stato { font: var(--md-sys-typescale-title-large); font-weight: var(--md-sys-typescale-emphasized-weight); margin-top: 4px; }
.cielo__estremi { font: var(--md-sys-typescale-body-large); }
.cielo__dettagli { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cielo__dettagli li {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-large); background: color-mix(in srgb, var(--testo) 12%, transparent);
}
.cielo__dettagli .icona { font-size: 18px; }

/* sole e luna */
.cielo[data-astro] .cielo__astro { display: block; top: 28px; right: 28px; width: 96px; height: 96px; border-radius: var(--md-sys-shape-corner-full); }
.cielo[data-astro="sole"] .cielo__astro { background: var(--ls-cielo-sole); }
.cielo[data-astro="sole"] .cielo__astro::before {
  content: ""; position: absolute; inset: -48px; border-radius: var(--md-sys-shape-corner-full);
  background: radial-gradient(closest-side, var(--ls-cielo-alone), transparent);
}
.cielo[data-astro="luna"] .cielo__astro { top: 36px; right: 40px; width: 72px; height: 72px; box-shadow: inset 20px -8px 0 0 var(--ls-cielo-luna); }
.cielo[data-astro="luna"] .cielo__astro::before {
  content: ""; position: absolute; inset: -32px; border-radius: var(--md-sys-shape-corner-full);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ls-cielo-luna) 18%, transparent), transparent);
}
/* stelle: puntini in due strati che si accendono a turno */
.cielo[data-stelle] .cielo__stelle { display: block; inset: 0 0 35% 30%; }
.cielo__stelle::before, .cielo__stelle::after { content: ""; position: absolute; inset: 0; }
.cielo__stelle::before { background:
  radial-gradient(1.5px 1.5px at 12% 22%, var(--ls-cielo-luna), transparent), radial-gradient(1px 1px at 38% 12%, var(--ls-cielo-luna), transparent),
  radial-gradient(1.5px 1.5px at 62% 48%, var(--ls-cielo-luna), transparent), radial-gradient(1px 1px at 84% 70%, var(--ls-cielo-luna), transparent),
  radial-gradient(1px 1px at 24% 64%, var(--ls-cielo-luna), transparent); }
.cielo__stelle::after { background:
  radial-gradient(1px 1px at 30% 40%, var(--ls-cielo-luna), transparent), radial-gradient(1.5px 1.5px at 52% 26%, var(--ls-cielo-luna), transparent),
  radial-gradient(1px 1px at 72% 8%, var(--ls-cielo-luna), transparent), radial-gradient(1.5px 1.5px at 8% 82%, var(--ls-cielo-luna), transparent),
  radial-gradient(1px 1px at 46% 80%, var(--ls-cielo-luna), transparent); }
/* nuvole: una pillola con due cerchi sopra */
.cielo__nuvola { width: 150px; height: 44px; border-radius: var(--md-sys-shape-corner-full); background: var(--nuvola); opacity: var(--velo); }
.cielo__nuvola::before, .cielo__nuvola::after { content: ""; position: absolute; border-radius: var(--md-sys-shape-corner-full); background: inherit; }
.cielo__nuvola::before { width: 64px; height: 64px; left: 24px; bottom: 16px; }
.cielo__nuvola::after { width: 84px; height: 84px; left: 60px; bottom: 8px; }
.cielo__nuvola--1 { top: 104px; right: -24px; }
.cielo__nuvola--2 { top: 56px; right: 108px; scale: .62; --i: 1; }
.cielo__nuvola--3 { top: 188px; right: -56px; scale: .7; --i: 2; }
.cielo[data-nuvole="1"] .cielo__nuvola--1, .cielo[data-nuvole="2"] .cielo__nuvola--1, .cielo[data-nuvole="2"] .cielo__nuvola--2,
.cielo[data-nuvole="3"] .cielo__nuvola { display: block; }
/* pioggia e neve: trattini (o puntini) dentro una maschera a colonne, in due strati */
.cielo[data-precipita] .cielo__cade { display: block; inset: -48px -24px 0; rotate: 10deg;
  -webkit-mask: linear-gradient(90deg, transparent 15%, #000 65%); mask: linear-gradient(90deg, transparent 15%, #000 65%); }   /* sfuma dove sta il testo */
.cielo__cade::before, .cielo__cade::after { content: ""; position: absolute; inset: 0; }
.cielo[data-precipita="pioggia"] .cielo__cade::before {
  background: repeating-linear-gradient(180deg, var(--ls-cielo-goccia) 0 14px, transparent 14px 48px);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 1.5px, transparent 1.5px 23px); mask: repeating-linear-gradient(90deg, #000 0 1.5px, transparent 1.5px 23px);
}
.cielo[data-precipita="pioggia"][data-intensita="forte"] .cielo__cade::after {
  background: repeating-linear-gradient(180deg, transparent 0 20px, var(--ls-cielo-goccia) 20px 30px, transparent 30px 48px);
  -webkit-mask: repeating-linear-gradient(90deg, transparent 0 11px, #000 11px 12.5px, transparent 12.5px 23px); mask: repeating-linear-gradient(90deg, transparent 0 11px, #000 11px 12.5px, transparent 12.5px 23px);
}
.cielo[data-precipita="pioggia"][data-intensita="debole"] .cielo__cade { opacity: .6; }
.cielo[data-precipita="neve"] .cielo__cade::before { background: radial-gradient(circle at 50% 50%, var(--ls-cielo-luna) 0 2px, transparent 2.5px) 0 0 / 28px 48px; }
.cielo[data-precipita="neve"] .cielo__cade::after { background: radial-gradient(circle at 50% 50%, var(--ls-cielo-luna) 0 1.5px, transparent 2px) 14px 24px / 28px 48px; opacity: .7; }
/* lampo: un velo che si accende due volte ogni tanto */
.cielo[data-lampi] .cielo__lampo { display: block; inset: 0; background: var(--ls-cielo-lampo); opacity: 0; }
/* nebbia: banchi larghi e morbidi (ellissi sfumate) in due strati che scorrono piano in versi opposti, sopra una
   foschia che sale dal basso; niente strisce (Thomas, 25/10/2026) */
.cielo[data-nebbia] .cielo__foschia { display: block; inset: 0 -40%;
  background: linear-gradient(0deg, color-mix(in srgb, var(--nuvola) calc(var(--velo) * 80%), transparent), transparent 70%); }
.cielo[data-nebbia] .cielo__foschia::before, .cielo[data-nebbia] .cielo__foschia::after { content: ""; position: absolute; inset: 0; opacity: var(--velo); }
.cielo[data-nebbia] .cielo__foschia::before { background:
  radial-gradient(38% 22% at 22% 58%, var(--nuvola), transparent), radial-gradient(34% 18% at 60% 40%, var(--nuvola), transparent),
  radial-gradient(42% 24% at 88% 70%, var(--nuvola), transparent); }
.cielo[data-nebbia] .cielo__foschia::after { opacity: calc(var(--velo) * .8); background:
  radial-gradient(40% 20% at 40% 82%, var(--nuvola), transparent), radial-gradient(30% 16% at 12% 30%, var(--nuvola), transparent),
  radial-gradient(36% 20% at 74% 22%, var(--nuvola), transparent); }

/* entrata (una volta sola): il sole sale, le nuvole arrivano di lato, i gradi si posano */
@keyframes cielo-sorge { from { translate: 0 40px; scale: .7; } }
@keyframes cielo-arriva { from { translate: 56px 0; } }
@keyframes cielo-posa { from { translate: 0 12px; scale: .94; } }
.cielo.entra .cielo__astro { animation: cielo-sorge var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial) both; }
.cielo.entra .cielo__gradi { animation: cielo-posa var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial) both; }
/* nuvole: entrata (translate) e deriva lenta (transform) insieme; senza loop resta solo l'entrata */
.cielo .cielo__nuvola { --entrata: none; --deriva: none; animation: var(--entrata), var(--deriva); }
.cielo.entra .cielo__nuvola { --entrata: cielo-arriva var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial) calc(var(--i, 0) * 45ms) both; }
.cielo:not(.cielo--fermo) .cielo__nuvola { --deriva: cielo-deriva var(--ls-moto-cielo-nuvole) ease-in-out calc(var(--i, 0) * var(--ls-moto-cielo-nuvole) / -3) infinite alternate; }
/* gli altri loop, solo se il telefono ce la fa */
.cielo:not(.cielo--fermo)[data-astro="sole"] .cielo__astro::before { animation: cielo-respira var(--ls-moto-cielo-respiro) ease-in-out infinite alternate; }
.cielo:not(.cielo--fermo) .cielo__stelle::before { animation: cielo-brilla var(--ls-moto-cielo-stelle) ease-in-out infinite alternate; }
.cielo:not(.cielo--fermo) .cielo__stelle::after { animation: cielo-brilla var(--ls-moto-cielo-stelle) ease-in-out infinite alternate-reverse; }
.cielo:not(.cielo--fermo)[data-precipita="pioggia"] .cielo__cade::before, .cielo:not(.cielo--fermo)[data-precipita="pioggia"] .cielo__cade::after { animation: cielo-piove var(--ls-moto-cielo-pioggia) linear infinite; }
.cielo:not(.cielo--fermo)[data-intensita="forte"] .cielo__cade::before, .cielo:not(.cielo--fermo)[data-intensita="forte"] .cielo__cade::after { animation-duration: var(--ls-moto-cielo-pioggia-forte); }
.cielo:not(.cielo--fermo)[data-precipita="neve"] .cielo__cade::before, .cielo:not(.cielo--fermo)[data-precipita="neve"] .cielo__cade::after { animation: cielo-piove var(--ls-moto-cielo-neve) linear infinite; }
.cielo:not(.cielo--fermo) .cielo__lampo { animation: cielo-lampo var(--ls-moto-cielo-lampo) linear infinite; }
.cielo:not(.cielo--fermo) .cielo__foschia::before { animation: cielo-banchi var(--ls-moto-cielo-nebbia) ease-in-out infinite alternate; }
.cielo:not(.cielo--fermo) .cielo__foschia::after { animation: cielo-banchi var(--ls-moto-cielo-nebbia) ease-in-out infinite alternate-reverse; }
@keyframes cielo-banchi { from { transform: translateX(-10%); } to { transform: translateX(10%); } }
.cielo--fuori .cielo__scena *, .cielo--fuori .cielo__scena *::before, .cielo--fuori .cielo__scena *::after { animation-play-state: paused !important; }
@keyframes cielo-respira { from { transform: scale(.92); opacity: .75; } to { transform: scale(1.08); opacity: 1; } }
@keyframes cielo-brilla { from { opacity: .35; } to { opacity: 1; } }
@keyframes cielo-deriva { from { transform: translateX(0); } to { transform: translateX(-48px); } }
@keyframes cielo-piove { from { transform: translateY(0); } to { transform: translateY(48px); } }
@keyframes cielo-lampo { 0%, 90%, 92.5%, 95%, 100% { opacity: 0; } 91% { opacity: 1; } 94% { opacity: .6; } }

/* prossime ore: striscia che scorre di lato */
.ore { display: flex; gap: 6px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.ore::-webkit-scrollbar { display: none; }
.ora {
  flex: none; display: grid; justify-items: center; gap: 6px; width: 60px; padding: 14px 0; scroll-snap-align: start; background: var(--ls-superficie-scheda);
  border-radius: var(--md-sys-shape-corner-full); font-variant-numeric: tabular-nums;
}
.ora--adesso { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.ora__quando { font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-on-surface-variant); }
.ora--adesso .ora__quando { color: inherit; font-weight: var(--md-sys-typescale-emphasized-weight); }
.ora .icona { font-size: 28px; }
.ora__gradi { font: var(--md-sys-typescale-title-medium); font-weight: var(--md-sys-typescale-emphasized-weight); }
.ora__pioggia { font: var(--md-sys-typescale-label-small); color: var(--md-sys-color-on-surface-variant); min-height: 16px; }
.ora--adesso .ora__pioggia { color: inherit; }
.icona--sole { color: var(--md-sys-color-primary); }
.ora--adesso .icona--sole { color: inherit; }
.ore.entra .ora { animation: ora-arriva var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial) both; animation-delay: calc(min(var(--i, 0), 8) * 30ms); }
@keyframes ora-arriva { from { translate: 24px 0; } }

/* prossimi giorni: riga con minima, barra dell'escursione sulla settimana e massima */
.giorni { display: grid; gap: 2px; }
.giorno {
  display: grid; grid-template-columns: minmax(0, 1fr) 28px 32px minmax(64px, 1.1fr) 32px; align-items: center; gap: 10px;
  min-height: 56px; padding: 8px 16px; background: var(--ls-superficie-scheda); border-radius: var(--md-sys-shape-corner-extra-small);
  font-variant-numeric: tabular-nums;
}
.giorni > .giorno:first-child { border-top-left-radius: var(--md-sys-shape-corner-large-increased); border-top-right-radius: var(--md-sys-shape-corner-large-increased); }
.giorni > .giorno:last-child { border-bottom-left-radius: var(--md-sys-shape-corner-large-increased); border-bottom-right-radius: var(--md-sys-shape-corner-large-increased); }
.giorno__nome { display: grid; font: var(--md-sys-typescale-title-medium); min-width: 0; }
.giorno__nome > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.giorno__pioggia { display: inline-flex; align-items: center; gap: 2px; font: var(--md-sys-typescale-label-small); color: var(--md-sys-color-on-surface-variant); }
.giorno__pioggia .icona { font-size: 14px; }
.giorno .icona--giorno { font-size: 26px; }
.giorno__min { font: var(--md-sys-typescale-body-large); color: var(--md-sys-color-on-surface-variant); text-align: right; }
.giorno__max { font: var(--md-sys-typescale-body-large); font-weight: var(--md-sys-typescale-emphasized-weight); }
.giorno__barra { position: relative; height: 6px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container-highest); }
.giorno__escursione {
  position: absolute; top: 0; bottom: 0; left: var(--da, 0%); width: var(--ampiezza, 100%); border-radius: inherit;
  background: linear-gradient(90deg, var(--ls-cielo-freddo), var(--md-sys-color-primary-container)) var(--posizione, 0%) 0 / var(--misura, 100%) 100% no-repeat;
}
.giorno__adesso { position: absolute; top: 50%; left: var(--qui); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-on-surface); box-shadow: 0 0 0 2px var(--ls-superficie-scheda); }
.giorni.entra .giorno__escursione { animation: barra-cresce var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes barra-cresce { from { scale: .2 1; } }   /* non da zero: se l animazione non parte la barra si vede lo stesso */
.meteo-fonte { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); padding: 0 4px; }
.meteo-fonte a { color: inherit; text-decoration: underline; }
/* attesa: lo scheletro al posto dei gradi */
.cielo__scheletro { display: grid; gap: 12px; margin-top: 16px; }
.cielo__scheletro span { display: block; height: 20px; width: 60%; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container-highest); animation: pulsa-scheletro 1.1s ease-in-out infinite alternate; }
.cielo__scheletro span:first-child { height: 72px; width: 40%; border-radius: var(--md-sys-shape-corner-extra-large); }
.senza-effetti .cielo__scheletro span { animation: none; }

/* ---- attesa al primo caricamento (25/10/2026): una scheda grigia che pulsa al posto del contenuto che arriva dalla rete,
   scritta nella pagina (non creata dallo script, che con la rete lenta arriva dopo). Sparisce da sola quando compare il
   contenuto o il messaggio di stato marcato data-attesa-fine; nelle liste la sostituisce lo script. */
.attesa { display: grid; gap: 12px; padding: 20px; border-radius: var(--md-sys-shape-corner-extra-large); background: var(--ls-superficie-scheda); }
.attesa > span { display: block; height: 14px; width: 85%; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container-highest);
  animation: pulsa-scheletro 1.1s ease-in-out infinite alternate; }
.attesa > span:first-child { height: 22px; width: 55%; }
.attesa > span:nth-child(3) { width: 65%; }
.attesa > .attesa__blocco { height: 160px; width: 100%; border-radius: var(--md-sys-shape-corner-large); }
.attesa--riga { padding: 16px; border-radius: var(--md-sys-shape-corner-extra-small); }
.attesa--riga > span:first-child { height: 16px; width: 60%; }
.contenuto:has(> [data-attesa-fine]:not([hidden])) > .attesa { display: none; }
.senza-effetti .attesa > span { animation: none; }
.attesa--sorteggio { min-height: 230px; align-content: start; }   /* alta come la scheda del sorteggio in Home (misurata a 375 px) */
/* mentre c'è lo scheletro dei numeri il corpo è già alto come i numeri veri (misurati a 375 px), così la pagina non salta */
[data-corpo]:has(> .scheletro) { align-content: start; }
[data-gioco="superenalotto"] [data-corpo]:has(> .scheletro) { min-height: 102px; }
[data-gioco="superenalotto"][data-piccola] [data-corpo]:has(> .scheletro) { min-height: 84px; }
[data-gioco="10elotto-5min"] [data-corpo]:has(> .scheletro) { min-height: 98px; }
[data-gioco="lotto"] [data-corpo]:has(> .scheletro) { min-height: 138px; }
[data-gioco="10elotto"] [data-corpo]:has(> .scheletro) { min-height: 208px; }
[data-gioco="millionday"] [data-corpo]:has(> .scheletro) { min-height: 122px; }
[data-piccola] [data-corpo] > .scheletro span { width: 36px; height: 36px; }   /* in Home le 6 palline stanno in una riga, come quelle vere */

/* ---- stampa foto e documenti (stampa.html, 27/10/2026) ----
   La pagina usa la logica condivisa con il QR del negozio (/display/js/stampa.mjs), che scrive dentro gli id della
   pagina: qui si disegnano anche i pezzi creati da quello script (righe dei file scelti, schede dei file inviati). */

/* titolo di sezione con il numero del passo davanti */
.sezione__testa--passo { justify-content: flex-start; gap: 12px; }
.posizione--piccola { width: 32px; height: 32px; font: var(--md-sys-typescale-label-large); font-weight: var(--md-sys-typescale-emphasized-weight); }

/* riga di stato del servizio (aperto, chiuso, caricamento): finché lo script non scrive, uno scheletro */
.riga-info {
  display: flex; align-items: flex-start; gap: 12px; min-height: 56px; padding: 16px;
  border-radius: var(--md-sys-shape-corner-large-increased); background: var(--ls-superficie-scheda);
  font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface);
}
.riga-info::before { content: "info"; font-family: "Material Symbols Rounded"; font-size: 20px; line-height: 20px; color: var(--md-sys-color-on-surface-variant); }
.riga-info:empty::after {
  content: ""; align-self: center; width: 70%; height: 14px; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest); animation: pulsa-scheletro 1.1s ease-in-out infinite alternate;
}
.senza-effetti .riga-info:empty::after { animation: none; }

/* scelta Foto / Documento: due schede tonali che aprono la scelta dei file del telefono (card M3 con stato) */
.scelte-file { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scelta-file {
  position: relative; display: grid; align-content: start; gap: 4px; min-height: 128px; padding: 16px;
  border-radius: var(--md-sys-shape-corner-large-increased);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
  cursor: pointer; overflow: hidden;
}
.scelta-file__icona { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; border-radius: var(--md-sys-shape-corner-full); background: color-mix(in srgb, currentColor 12%, transparent); }
.scelta-file__icona .icona { font-size: 28px; }
.scelta-file__titolo { font: var(--md-sys-typescale-title-medium); font-weight: var(--md-sys-typescale-emphasized-weight); }
.scelta-file__dettaglio { font: var(--md-sys-typescale-body-medium); opacity: .85; }
.scelta-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.scelta-file:focus-within { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.scelta-file:active { border-radius: var(--md-sys-shape-corner-large); }
.scelta-file { transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial); }

/* file scelti: righe dell'elenco con miniatura (foto) o icona (documento) e "Togli" */
.elenco--file:empty { display: none; }
.elenco--file > li {
  display: flex; align-items: center; gap: 16px; min-width: 0; min-height: 72px; padding: 8px 4px 8px 16px;
  background: var(--ls-superficie-scheda); border-radius: var(--md-sys-shape-corner-extra-small);
}
.elenco--file > li:first-child { border-top-left-radius: var(--md-sys-shape-corner-large-increased); border-top-right-radius: var(--md-sys-shape-corner-large-increased); }
.elenco--file > li:last-child { border-bottom-left-radius: var(--md-sys-shape-corner-large-increased); border-bottom-right-radius: var(--md-sys-shape-corner-large-increased); }
.elenco--file img { flex: none; width: 56px; height: 56px; border-radius: var(--md-sys-shape-corner-medium); object-fit: cover; background: var(--md-sys-color-surface-container-highest); }
.elenco--file > li:not(:has(img))::before {
  content: "description"; flex: none; display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant);
  font-family: "Material Symbols Rounded"; font-size: 28px; line-height: 1;
}
.elenco--file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--md-sys-typescale-body-large); }

/* copie: il valore è un campo numerico (lo legge lo script) disegnato come il valore della quantità */
.riga-copie { cursor: default; }
.quantita__campo { width: 56px; padding: 0; border: 0; background: none; color: inherit; -moz-appearance: textfield; appearance: textfield; }
.quantita__campo::-webkit-inner-spin-button, .quantita__campo::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.quantita__campo:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; border-radius: var(--md-sys-shape-corner-small); }

.avviso--centro { text-align: center; }
.stampa-modulo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.stampa-modulo .sezione, .stampa-ordini { grid-template-columns: minmax(0, 1fr); }   /* un nome di file lungo non allarga la pagina */

/* file inviati: una scheda per file con l'avanzamento lineare M3 e "Annulla" */
.stampa-ordini { display: grid; gap: 8px; }
.stampa-ordini:empty { display: none; }
.stampa-ordini .scheda { gap: 8px; padding: 16px 16px 8px; box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); }
.stampa-ordini .scheda h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--md-sys-typescale-title-medium); font-weight: var(--md-sys-typescale-emphasized-weight); }
.stampa-ordini .scheda p { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.stampa-ordini .scheda .pulsante { justify-self: end; }
.stampa-ordini progress { width: 100%; height: 4px; border: 0; border-radius: var(--md-sys-shape-corner-full); background: var(--ls-traccia); overflow: hidden; -webkit-appearance: none; appearance: none; }
.stampa-ordini progress::-webkit-progress-bar { background: var(--ls-traccia); }
.stampa-ordini progress::-webkit-progress-value { background: var(--md-sys-color-primary); border-radius: var(--md-sys-shape-corner-full); }
.stampa-ordini progress::-moz-progress-bar { background: var(--md-sys-color-primary); border-radius: var(--md-sys-shape-corner-full); }

.domanda__risposta p { margin: 0; }
.domanda__risposta p + p { margin-top: 8px; }

@media (max-width: 359px) { .scelte-file { grid-template-columns: 1fr; } .scelta-file { min-height: 104px; } }

/* Home: riga dei servizi del negozio (Stampa), icona tonale come le tessere sopra */
.elenco--servizi .elenco__icona { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

/* ---- Decorazioni di stagione della Home (js/festa.js, 28/10/2026): neve a Natale, petali a Pasqua ----
   Pochi granelli leggeri e trasparenti sopra la pagina ma sotto le barre dell'app; non prendono i tocchi.
   Le comanda l'admin (Orari e chiusure → Decorazioni di stagione, interruttore effetti dell'app). Niente lucine: in alto
   c'è la barra dell'app. Solo transform e opacity; ferme con movimento ridotto, effetti spenti o risparmio dati. */
.festa-app { position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.festa-app i {
  position: absolute; top: -16px; left: var(--x);
  width: var(--s); height: var(--s); opacity: var(--o);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--ls-festa-neve);
  animation: festa-cade calc(var(--ls-moto-festa-cade) * var(--k)) linear var(--r) infinite;
  will-change: transform;
}
.festa-app--pasqua i {
  height: calc(var(--s) * 1.35); border-radius: 80% 0;
  background: var(--ls-festa-petalo-1);
  animation-name: festa-cade, festa-gira;
  animation-duration: calc(var(--ls-moto-festa-cade) * var(--k)), var(--ls-moto-festa-gira);
  animation-timing-function: linear, ease-in-out;
  animation-delay: var(--r), var(--r);
}
.festa-app--pasqua i:nth-child(3n) { background: var(--ls-festa-petalo-2); }
.festa-app--pasqua i:nth-child(3n + 1) { background: var(--ls-festa-petalo-3); }
@keyframes festa-cade {
  0% { transform: translate3d(0, -4vh, 0); }
  50% { transform: translate3d(var(--dx), 52vh, 0); }
  100% { transform: translate3d(0, 108vh, 0); }
}
@keyframes festa-gira { 0%, 100% { rotate: -25deg; } 50% { rotate: 35deg; } }
.festa-pausa .festa-app i { animation-play-state: paused; }
.senza-effetti .festa-app { display: none; }
@media (prefers-reduced-motion: reduce) { .festa-app { display: none; } }