/* stile.css — la pelle del menu da tavolo: «Bocca del forno», scelta da Dario il 24/10/2026 tra due
   atmosfere (l'altra, «Bottega» chiara, è stata tolta). Una regola sola: la pizza è l'unica cosa
   fotografica, tutto il resto è buio, brace, oro e tipografia. Tre caratteri in font/, tutti OFL:
   Alfa Slab One (l'insegna e i prezzi), Fraunces (solo i corsivi), Hanken Grotesk (il testo).
   La grana è un tile PNG di rumore in pelle/, mai un filtro a runtime. Prima il telefono (390 px);
   a 820 e 1180 due colonne. Le regole del fuoco, del volo e dei pezzi NON sono pelle: stanno in
   fondo, uguali al 24/10. */

@font-face {
  font-family: "Fraunces";
  src: url("font/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("font/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("font/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alfa Slab One";
  src: url("font/alfa-slab-one.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- i token ---------- */
:root {
  --fondo: #141210;                              /* nero fumo */
  --fondo-2: #211D19;                            /* una superficie: tessere, targa, tasti */
  --fondo-3: #2A241F;                            /* una superficie in rilievo */
  --testo: #F3E9D8;                              /* crema: 15,5:1 sul fondo */
  --testo-2: #B9AB97;                            /* secondario: 8,3:1 */
  --linea: rgba(243, 233, 216, 0.14);
  --linea-forte: rgba(243, 233, 216, 0.3);
  --oro: #D4A95A;                                /* oro brunito: 8,6:1 sul fondo, i prezzi */
  --prezzo: var(--oro);
  --accento: #C8502B;                            /* rosso pomodoro, lo cambia dati.js */
  --accento-scuro: #A63F20;
  --accento-tenue: rgba(200, 80, 43, 0.16);
  --accento-testo: #F0956E;                      /* l'accento quando è testo sul fondo scuro */
  --su-accento: #fff;
  --pillola: 999px;
  --raggio: 14px;
  --ombra: 0 16px 34px -14px rgba(0, 0, 0, 0.75);
  --ombra-tasto: 0 10px 26px -10px rgba(200, 80, 43, 0.7);
  --barra-fondo: rgba(33, 29, 25, 0.94);          /* la targa del prezzo */
  --avviso-fondo: #2A241F;
  --avviso-testo: #F3E9D8;
  --brace: rgba(255, 122, 30, 0.30);             /* il bagliore della brace, lo stesso in ogni scena */
  --display: "Alfa Slab One", "Fraunces", Georgia, serif;   /* un peso solo, 400 */
  --font: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --corsivo: "Fraunces", Georgia, serif;
  --barra: 78px;             /* altezza della barra fissa in basso nel Componi */
  --alto: 56px;              /* spazio occupato in alto dai due tasti tondi (suono, carrellino) */
  --facile: cubic-bezier(.22, .8, .3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fondo); }
body {
  margin: 0;
  background: transparent;
  color: var(--testo);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  overflow-x: hidden;
}
/* L'atmosfera, fissa dietro a tutto: la grana (un PNG ripetuto, rasterizzato una volta), il bagliore
   della brace che sale dal basso, la vignetta ai bordi. Niente filtri, niente sfocature. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("pelle/grana.png") repeat 0 0 / 192px 192px,
    radial-gradient(130% 55% at 50% 108%, var(--brace), rgba(255, 90, 20, 0.10) 38%, transparent 68%),
    radial-gradient(150% 110% at 50% 38%, transparent 56%, rgba(0, 0, 0, 0.62) 100%);
}
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.1; }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 8vw, 44px); letter-spacing: 0.005em; }
h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { -webkit-tap-highlight-color: transparent; }

/* ---------- la pizza ---------- */
.pizza { display: block; width: 100%; height: auto; transition: filter 0.9s ease; }
/* «cuoce»: il clone che prende fuoco. Dal 24/10 sera la cottura la fanno le FOTO (gli sprite -cotta
   si dissolvono sopra quelli crudi, vedi app.js): qui resta solo un filo di contrasto, il seppia di prima
   sporcava i colori veri. «cotta» (catalogo.html) non ha più bisogno di filtro: sono le foto cotte. */
.pizza.cuoce { filter: saturate(1.04) contrast(1.04); }
.pizza .foto-cotta { opacity: 0; }   /* la gemella cotta di ogni foto, accesa da app.js durante il fuoco */
.anima, .base, .ombra { transform-box: fill-box; transform-origin: center; }
.pezzo.nascosto { display: none; }               /* i pezzi in più delle taglie piccole */
.mini-pizza .ombra-piatto { display: none; }     /* le miniature in lista stanno senza ombra del piatto */
.icona { display: block; width: 100%; height: 100%; object-fit: contain; }
.pizza-box { margin: 0 auto; }
.pizza-box .pizza { transform: scale(var(--scala, 1)); transition: transform 0.45s var(--facile), filter 0.9s ease; }

/* ---------- il panino (dal 24/10 sera, panino.js; i gesti dal 25/10, gesti-panino.js) ---------- */
/* Una pila di foto viste di lato, sempre chiusa. La quota di ogni strato sta nello stile del suo <g> (translateY):
   durante un gesto la anima gesti-panino.js e a fine gesto la scrive lì senza transizione. La transizione serve
   fuori dai gesti («meno movimento», annulla di «Svuota»): il blocco sopra va alla quota nuova da solo. La pila
   intera si rimpicciolisce (scale, origine in basso al centro) se è più alta dello spazio. Le salse: la colata si
   allunga verso il basso dalla quota (fill-box: l'origine, scritta da panino.js, è in % della scatola della foto). */
.panino { display: block; width: 100%; height: auto; overflow: visible; }
.panino.cuoce { filter: saturate(1.08) contrast(1.06) brightness(0.98); }   /* sulla piastra si abbrustolisce appena */
.panino .strato-panino { transition: transform 0.26s var(--facile); }
.panino .anima { transform-origin: 50% 100%; }
.panino .pila { transform-box: view-box; transform-origin: 500px 820px; transition: transform 0.3s var(--facile); }
.panino .salsa .colata { transform-box: fill-box; }
.mini-panino { transform: translateY(-4%) scale(1.12); }   /* nel disco del menu e del carrellino sta più al centro */
/* il Componi è uno per categoria (data-cat lo scrive instrada): la pizza ha taglie, basi, il suo box e la
   sua griglia; il panino i pani, il suo box e la sua griglia. Si vede solo quello della categoria aperta. */
.componi[data-cat="panini"] #taglie, .componi[data-cat="panini"] #basi,
.componi[data-cat="panini"] #pizza-componi, .componi[data-cat="panini"] #griglia { display: none; }
.componi:not([data-cat="panini"]) #pani, .componi:not([data-cat="panini"]) #panino-componi,
.componi:not([data-cat="panini"]) #griglia-panini { display: none; }
/* «Componi il tuo panino» è una lettera più lungo di «Componi la tua pizza»: a 390 px andava a capo (211 px
   di testo in 208 disponibili, misurati il 24/10): solo qui il titolo scende a 17 px e non va a capo */
.componi[data-cat="panini"] .testa h2 { font-size: 17px; letter-spacing: 0; white-space: nowrap; }

/* ---------- pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: var(--pillola);
  border: 1.5px solid var(--linea-forte); background: transparent;
  font-size: 17px; font-weight: 600; text-decoration: none; color: var(--testo);
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.btn:active { transform: scale(0.97); background: var(--fondo-2); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-accento { background: var(--accento); border-color: var(--accento); color: var(--su-accento); box-shadow: var(--ombra-tasto); }
.btn-accento:active:not(:disabled) { background: var(--accento-scuro); }
.btn-piccolo { min-height: 38px; padding: 0 14px; font-size: 15px; font-weight: 500; border-color: var(--linea); }
.btn-piccolo[aria-pressed="true"] { background: var(--testo); border-color: var(--testo); color: var(--fondo); }
.btn-testo { border-color: transparent; color: var(--testo-2); font-weight: 500; }
.btn-icona { width: 20px; height: 20px; }

/* ---------- la barra in alto: altoparlante e carrellino, su ogni schermata ---------- */
.barra-alto {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); right: 12px; z-index: 40;
  display: flex; gap: 6px;
}
.tondo {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--linea);
  background: var(--fondo-2); color: var(--testo); text-decoration: none;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease, background 0.15s ease;
}
.tondo:active { transform: scale(0.94); background: var(--fondo-3); }
.tondo svg { width: 22px; height: 22px; }
#suono .on { display: none; }
#suono .off { display: block; opacity: 0.55; }
.suono-acceso #suono .on { display: block; }
.suono-acceso #suono .off { display: none; }
.suono-acceso #suono { color: var(--accento-testo); border-color: var(--accento); }
.carrello-icona { transform-origin: center; }
.badge {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--accento); color: var(--su-accento);
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}

/* ---------- l'avviso dopo «Aggiungi all'ordine» ---------- */
.avviso {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 45;
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  padding: 12px 16px 12px 18px; border-radius: var(--pillola); background: var(--avviso-fondo); color: var(--avviso-testo);
  border: 1px solid var(--linea-forte);
  font-size: 15px; box-shadow: var(--ombra); white-space: nowrap;
}
.avviso a { color: var(--oro); font-weight: 700; text-decoration: none; padding: 6px 12px; border-radius: var(--pillola); background: rgba(255, 255, 255, 0.08); }
.componi .avviso, [data-schermata="componi"] .avviso { bottom: calc(var(--barra) + 10px + env(safe-area-inset-bottom)); }

/* ---------- schermate (una sola pagina, si mostra quella dell'hash) ---------- */
/* entrano solo con l'opacità: un transform romperebbe la barra fissa e la scena sticky del Componi */
.schermata { animation: entra 0.22s ease-out; }
@keyframes entra { from { opacity: 0; } }
.contenuto { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.testa { display: flex; align-items: center; gap: 6px; min-height: 56px; padding-top: env(safe-area-inset-top); padding-right: 110px; }
.testa h2 { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: 0.01em; }   /* 18: «Componi la tua pizza» sta su una riga a 390 px accanto ai due tasti tondi */
.indietro {
  display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; flex: none;
  border-radius: 999px; color: inherit; margin-left: -10px;
}
.indietro:active { background: var(--fondo-2); }
.indietro svg { width: 24px; height: 24px; }
/* l'ingresso di una categoria non ha la testa: il suo Indietro è un tondo fisso in alto a sinistra,
   gemello dei due tondi a destra (44 px, stessa superficie) */
.indietro-fisso { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 12px; z-index: 40; margin: 0; }
.aiuto { color: var(--testo-2); font-size: 15px; }
.azioni { display: flex; flex-direction: column; gap: 10px; max-width: 360px; margin: 0 auto 32px; }
.azioni .btn { min-height: 54px; }

/* ---------- ingresso: l'insegna si accende, la pizza esce dal buio, poi le due scelte ---------- */
.ingresso {
  min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: calc(var(--alto) + 12px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
}
.ingresso h1 {
  font-size: clamp(38px, 10.5vw, 62px); color: var(--testo); line-height: 1.02;
  text-shadow: 0 0 24px rgba(255, 140, 50, 0.38), 0 2px 0 rgba(0, 0, 0, 0.5);
  animation: insegna 1.2s ease-out both;
}
/* l'insegna al neon: due sfarfallii e poi resta accesa */
@keyframes insegna {
  0% { opacity: 0; text-shadow: none; }
  8% { opacity: 1; }
  14% { opacity: 0.3; text-shadow: none; }
  22% { opacity: 1; }
  30% { opacity: 0.55; text-shadow: none; }
  40%, 100% { opacity: 1; text-shadow: 0 0 24px rgba(255, 140, 50, 0.38), 0 2px 0 rgba(0, 0, 0, 0.5); }
}
/* sul telefono il filetto sta sopra il sottotitolo (ai lati non c'è spazio: «· Marsala» andava a capo);
   da 820 px i due filetti tornano ai lati. text-wrap: balance per i nomi lunghi di altre pizzerie */
.ingresso .sotto {
  display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro);
  text-wrap: balance; animation: entra 0.6s ease-out 0.5s both;
}
.ingresso .sotto::before, .ingresso .sotto::after { content: ""; width: 36px; height: 1px; background: currentColor; opacity: 0.7; flex: none; }
.ingresso .sotto::after { display: none; }
/* la scena: la pizza sopra il suo piatto di luce (lo stesso alone torna nel Componi e nel dettaglio) */
.scena-ingresso { position: relative; z-index: 0; width: min(74vw, 320px); margin: 22px 0 16px; }
.scena-ingresso::before, .piatto-luce::before {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; inset: -14% -8% -32% -8%;
  background: radial-gradient(68% 50% at 50% 62%, rgba(255, 135, 40, 0.55), rgba(255, 105, 30, 0.2) 42%, transparent 70%);
  pointer-events: none;   /* ai lati sborda poco (8 %): di più allargava la pagina oltre i 390 px e Safari la ingrandiva */
}
.scena-ingresso::before { opacity: 0; }
.ingresso.acceso .scena-ingresso::before { animation: luce 1.1s ease-out 0.1s both; }
@keyframes luce { to { opacity: 1; } }
.ingresso .benvenuto {
  font-family: var(--corsivo); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: 20px; color: var(--testo-2); margin-bottom: 20px; opacity: 0;
}
.scelte { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 360px; opacity: 0; }
.scelte .btn { min-height: 58px; font-size: 19px; }
.ingresso.acceso .benvenuto { animation: salgono 0.6s var(--facile) 0.9s both; }
.ingresso.acceso .scelte { animation: salgono 0.6s var(--facile) 1.15s both; }
@keyframes salgono { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- #/ : l'insegna e le categorie (dal 24/10 sera) ---------- */
/* Stessa insegna al neon dell'ingresso, poi una tessera per categoria: la foto vera a tutta larghezza
   (900×400, in foto/categoria-<id>.webp), un velo scuro dal basso perché il nome si legga sempre, il
   nome in Alfa Slab One con il filetto d'oro sopra. Le categorie «in arrivo» hanno un velo più fitto
   (un overlay, nessun filtro) e la targhetta in oro: non sono link, app.js le scrive come <div>. */
.categorie {
  min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: calc(var(--alto) + 12px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
}
.categorie h1 {
  font-size: clamp(38px, 10.5vw, 62px); color: var(--testo); line-height: 1.02;
  text-shadow: 0 0 24px rgba(255, 140, 50, 0.38), 0 2px 0 rgba(0, 0, 0, 0.5);
  animation: insegna 1.2s ease-out both;
}
.categorie .sotto {
  display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro);
  text-wrap: balance; animation: entra 0.6s ease-out 0.5s both;
}
.categorie .sotto::before { content: ""; width: 36px; height: 1px; background: currentColor; opacity: 0.7; flex: none; }
.categorie .benvenuto {
  font-family: var(--corsivo); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: 20px; color: var(--testo-2); margin-top: 18px; animation: entra 0.6s ease-out 0.7s both;
}
.lista-categorie { display: grid; grid-template-columns: 1fr; gap: 14px; width: 100%; max-width: 560px; margin-top: 22px; }
.cat {
  position: relative; display: block; aspect-ratio: 9 / 4; min-height: 120px; border-radius: var(--raggio); overflow: hidden;
  text-decoration: none; color: var(--testo); text-align: left; border: 1px solid var(--linea); background: var(--fondo-2);
  box-shadow: var(--ombra); opacity: 0;
  transition: transform 0.15s ease, border-color 0.2s ease;
}
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cat::after {   /* il velo: dal basso, così il nome ha sempre il buio dietro, qualunque sia la foto */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12, 10, 8, 0.9) 0%, rgba(12, 10, 8, 0.45) 48%, rgba(12, 10, 8, 0.1) 100%);
}
a.cat:active { transform: scale(0.98); border-color: var(--oro); }
.cat-nome {
  position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 1;
  font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: 0.01em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 18px rgba(0, 0, 0, 0.6);
}
.cat-nome::before { content: ""; display: block; width: 36px; height: 2px; background: var(--oro); margin-bottom: 10px; }
.cat-chiusa::after { background: linear-gradient(to top, rgba(12, 10, 8, 0.92), rgba(12, 10, 8, 0.72)); }
.cat-chiusa .cat-nome::before { background: var(--linea-forte); }
.cat-arrivo {
  position: absolute; top: 12px; right: 12px; z-index: 1; padding: 5px 11px; border-radius: var(--pillola);
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oro);
  border: 1px solid rgba(212, 169, 90, 0.6); background: rgba(20, 18, 16, 0.78);
}
/* le tessere salgono una dopo l'altra quando si entra (app.js rimette «acceso» a ogni ritorno) */
.categorie.acceso .cat { animation: salgono 0.55s var(--facile) both; }
.categorie.acceso .cat:nth-child(1) { animation-delay: 0.35s; }
.categorie.acceso .cat:nth-child(2) { animation-delay: 0.43s; }
.categorie.acceso .cat:nth-child(3) { animation-delay: 0.51s; }
.categorie.acceso .cat:nth-child(4) { animation-delay: 0.59s; }
.categorie.acceso .cat:nth-child(5) { animation-delay: 0.67s; }
.categorie.acceso .cat:nth-child(n+6) { animation-delay: 0.75s; }

/* ---------- componi ---------- */
.componi { padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom) + 20px); }
/* la scena sticky è la bocca del forno: il buio, la brace che sale da sotto la pizza, la pizza sul suo
   piatto di luce (.piatto-luce, lo stesso alone dell'ingresso). Copre la griglia che scorre sotto. */
.scena {
  position: sticky; top: 0; z-index: 3; padding: 0 16px 8px;
  background:
    url("pelle/grana.png") repeat 0 0 / 192px 192px,
    radial-gradient(62% 48% at 50% 82%, rgba(255, 122, 30, 0.16), transparent 70%), var(--fondo);
}
.scena::after {   /* la griglia che scorre sotto sfuma invece di tagliarsi di netto */
  content: ""; position: absolute; left: 0; right: 0; bottom: -18px; height: 18px;
  background: linear-gradient(var(--fondo), transparent); pointer-events: none;
}
.piatto-luce { position: relative; z-index: 0; }
/* flex-wrap: se i nomi delle taglie non ci stanno su una riga (iPad, o una pizzeria con nomi lunghi)
   il gruppo delle basi va a capo invece di sbordare sopra la griglia */
.comandi-pizza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 8px; margin: 0 0 6px; }
.segmenti { display: inline-flex; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--linea); border-radius: var(--pillola); padding: 3px; }
.segmenti button {
  min-height: 44px; min-width: 44px; padding: 0 12px; border: 0; background: transparent; border-radius: var(--pillola);
  font-size: 15px; font-weight: 500; color: var(--testo-2); display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}
.segmenti button b { font-weight: 700; }
.segmenti button[aria-pressed="true"] { background: var(--testo); color: var(--fondo); }
.segmenti-centro { margin: 0 auto 14px; display: flex; justify-content: center; width: fit-content; }
/* sul telefono il nome della taglia e della base si legge solo su quella scelta: le altre restano una lettera o un punto */
@media (max-width: 819px) {
  .segmenti button { padding: 0 11px; }
  .segmenti button:not([aria-pressed="true"]) span:not(.punto) { display: none; }
  .segmenti button:not([aria-pressed="true"]) { min-width: 44px; justify-content: center; }
}
.segmenti .punto { width: 10px; height: 10px; border-radius: 50%; background: #C8321E; flex: none; }
.segmenti [data-base="bianca"] .punto { background: #F2DFB8; border: 1px solid #D9C39A; }
.segmenti button[aria-pressed="true"] .punto { outline: 2px solid rgba(255, 255, 255, 0.6); }
.componi .pizza-box { width: min(64vw, 260px); }
/* il panino più grande della pizza, come nel reel di Mazzuchelli (lì il panino è ~60 % della larghezza dello schermo,
   misurato a occhio sui fotogrammi; a 260 px era il 46 %): a 390 px il pane è largo 230 px. Costa ~60 px di scena
   sticky in più, quindi un po' meno tessere visibili sotto. Solo sul telefono: in due colonne vale la regola dei 820 px. */
@media (max-width: 819px) { .componi[data-cat="panini"] #panino-componi { width: min(82vw, 330px); } }

.griglia { padding: 14px 16px 0; }
.categoria + .categoria { margin-top: 18px; }
.categoria h3 {
  font-size: 15px; font-weight: 500; font-family: var(--corsivo); font-style: italic; color: var(--testo-2);
  margin-bottom: 8px; display: flex; align-items: center; gap: 10px;
}
.categoria h3::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.tessere { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tessera { position: relative; }
/* le tessere: legno scuro in leggero rilievo, l'ingrediente posato sopra con la sua pozza d'ombra;
   scelta = bordo oro e un velo caldo (la spunta resta rossa: è il gesto, non la pelle) */
.tessera-btn {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 4px 9px; border: 1px solid var(--linea); border-radius: var(--raggio);
  background: linear-gradient(var(--fondo-3), var(--fondo-2));
  box-shadow: 0 10px 18px -12px rgba(0, 0, 0, 0.85);
  transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.tessera-btn:active { transform: scale(0.95); }
.tessera.scelta .tessera-btn {
  border-color: var(--oro);
  background: linear-gradient(rgba(212, 169, 90, 0.2), rgba(212, 169, 90, 0.05)), var(--fondo-2);
  box-shadow: 0 0 0 1px rgba(212, 169, 90, 0.35), 0 10px 18px -12px rgba(0, 0, 0, 0.85);
}
.icona-box { position: relative; width: 56px; height: 56px; }
.icona-box::before {   /* la pozza d'ombra sotto l'ingrediente: una sfumatura, nessun filtro */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -3px; height: 12px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.6), transparent 72%);
}
.icona-box .icona { position: relative; }
.spunta {
  position: absolute; left: -7px; top: -7px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accento); color: var(--su-accento); display: flex; align-items: center; justify-content: center;
  transform: scale(0); transition: transform 0.22s cubic-bezier(.3, 1.4, .5, 1);
}
.spunta svg { width: 12px; height: 12px; }
.tessera.scelta .spunta { transform: scale(1); }
.tessera-btn b { font-weight: 600; font-size: 13px; line-height: 1.15; min-height: 2.3em; display: flex; align-items: center; }
.tessera-btn small { font-size: 12px; color: var(--oro); }
.meno {
  position: absolute; right: -5px; top: -5px; width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: var(--testo); color: var(--fondo); display: flex; align-items: center; justify-content: center;
  transform: scale(0); transition: transform 0.22s cubic-bezier(.3, 1.4, .5, 1);
}
.meno::before { content: ""; position: absolute; inset: -8px; }   /* area di tocco di 46 px */
.meno svg { width: 14px; height: 14px; }
.tessera.scelta .meno { transform: scale(1); }
/* la porzione doppia: un bollino d'oro «×2» in basso a destra dell'ingrediente, solo sulle tessere che
   la ammettono (componi-pizza.js lo scrive solo se `doppio`) e visibile solo quando la tessera è doppia */
.tessera .x2 {
  position: absolute; right: -9px; bottom: -4px; min-width: 26px; height: 22px; padding: 0 6px; border-radius: var(--pillola);
  background: var(--oro); color: var(--fondo); font-size: 12px; font-weight: 800; line-height: 22px; text-align: center;
  box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.8);
  transform: scale(0); transition: transform 0.22s cubic-bezier(.3, 1.4, .5, 1);
}
.tessera.doppia .x2 { transform: scale(1); }
.tessera.doppia .tessera-btn { border-color: var(--oro); box-shadow: 0 0 0 1.5px var(--oro), 0 10px 18px -12px rgba(0, 0, 0, 0.85); }
/* l'icona delle creme e salse è la spirale stessa, piccola: un filo nel suo colore, niente foto */
.icona-spirale { padding: 3px; }

/* la barra del prezzo è una targa: superficie scura, filetto d'oro sopra, prezzo in oro, tasto rosso
   con un alone caldo fisso. Era pulsante: con la CPU rallentata 4x faceva scattare il fuoco (traccia
   del 24/10: 4-5 fotogrammi sopra i 34 ms contro 1), perché il box-shadow che cambia sta dentro la
   barra col backdrop-filter e la costringe a ridisegnarsi a ogni fotogramma. */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
  background: var(--barra-fondo); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(212, 169, 90, 0.6); box-shadow: 0 -12px 30px -14px rgba(0, 0, 0, 0.8);
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
}
.barra-dentro { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 4px; }
.prezzo-box { position: relative; flex: 1; min-width: 0; }
.prezzo-box small { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--testo-2); white-space: nowrap; }
#prezzo { display: inline-block; font-size: 24px; line-height: 1.05; white-space: nowrap; color: var(--prezzo); font-family: var(--display); font-weight: 400; transform-origin: left center; }
.salta { position: absolute; left: 2px; top: -2px; font-size: 17px; font-weight: 700; color: var(--accento-testo); pointer-events: none; white-space: nowrap; }
.salta.negativo { color: var(--testo-2); }
.azione {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 46px; min-height: 50px; border: 0; background: transparent; border-radius: 12px;
  font-size: 11px; color: var(--testo-2);
}
.azione svg { width: 22px; height: 22px; }
.azione:disabled { opacity: 0.35; cursor: default; }
.azione:active:not(:disabled) { background: var(--fondo-2); }
.btn-aggiungi { min-height: 50px; padding: 0 14px; margin-left: 2px; font-size: 16px; white-space: nowrap; flex: none; }
.btn-aggiungi:not(:disabled) { box-shadow: var(--ombra-tasto), 0 0 22px 1px rgba(255, 120, 50, 0.32); }
/* sotto i 420 px (iPhone) il prezzo cede spazio al tasto: resta su una riga anche con «Aggiorna nell'ordine» */
@media (max-width: 419px) { #prezzo { font-size: 22px; } .azione { min-width: 44px; font-size: 10px; } .btn-aggiungi { font-size: 15px; padding: 0 12px; } }

/* ---------- menu ---------- */
/* la lavagna: niente card, righe separate da un filetto; nome da insegna, puntini fino al prezzo in oro,
   la miniatura in un disco scuro che prende la luce della brace. La riga è una griglia a tre colonne e
   quattro file: due vuote (1fr) ai lati che centrano il testo sul disco, il nome e il prezzo sulla
   seconda, gli ingredienti sulla terza (.riga-testo sparisce con display: contents, b e small
   diventano celle). Con due sole file auto il disco, che le attraversa, le allargava. */
.lista { display: flex; flex-direction: column; gap: 0; padding-bottom: 32px; }
.riga {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto 1fr;
  align-items: center; column-gap: 14px; row-gap: 2px; padding: 12px 6px;
  border-bottom: 1px solid var(--linea); text-decoration: none; color: inherit; transition: background 0.15s ease;
}
.riga:first-child { border-top: 1px solid var(--linea); }
.riga:active { background: var(--fondo-2); }
.riga .mini {
  grid-row: 1 / 5; width: 84px; padding: 6px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #2E2621, #171412 72%);
  box-shadow: inset 0 0 0 1px var(--linea), 0 0 26px -6px rgba(255, 130, 40, 0.5);
}
.riga .riga-testo { display: contents; }
.riga .riga-testo b {
  grid-column: 2; grid-row: 2; display: flex; align-items: baseline; gap: 8px; min-width: 0;
  font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.2; letter-spacing: 0.01em;
}
.riga .riga-testo b::after { content: ""; flex: 1; min-width: 14px; border-bottom: 2px dotted var(--linea-forte); transform: translateY(-5px); }
.riga .riga-testo small { grid-column: 2 / 4; grid-row: 3; }
.riga .riga-prezzo { grid-column: 3; grid-row: 2; align-self: baseline; font-size: 19px; }
.riga-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.riga-testo b { font-size: 20px; font-weight: 600; }
.riga-testo small { font-size: 14px; color: var(--testo-2); }
.riga-prezzo { font-size: 18px; white-space: nowrap; color: var(--prezzo); font-family: var(--display); font-weight: 400; }

/* ---------- dettaglio della pizza: la pizza grande sul piatto di luce, il nome come insegna ---------- */
.dettaglio .pizza-box { width: min(80vw, 380px); margin: 4px auto 12px; }
.dettaglio h1 { text-align: center; text-shadow: 0 0 22px rgba(255, 140, 50, 0.3), 0 2px 0 rgba(0, 0, 0, 0.5); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0 16px; }
.chip { padding: 6px 12px; border-radius: var(--pillola); background: var(--fondo-2); border: 1px solid var(--linea); font-size: 14px; }
.chip-base { background: var(--accento-tenue); border-color: transparent; color: var(--accento-testo); }
/* le taglie: più grandi che nel Componi e col nome sempre leggibile (sono tre, c'è spazio) */
.dettaglio .segmenti button { min-height: 48px; font-size: 16px; }
.dettaglio .segmenti button:not([aria-pressed="true"]) span:not(.punto) { display: inline; }
.prezzo-grande { text-align: center; font-size: 34px; margin-bottom: 18px; color: var(--prezzo); font-family: var(--display); font-weight: 400; }

/* ---------- il carrellino: una comanda ---------- */
/* Un foglio più chiaro del fondo con il bordo superiore a dentelli: la striscia ::before (alta 10 px)
   ha una maschera di cerchi trasparenti ripetuti, e il foglio sotto parte trasparente per quei 10 px.
   Statico, niente elementi nuovi. Le righe sono numerate con un contatore CSS. */
.carrello-vuoto { text-align: center; color: var(--testo-2); font-family: var(--corsivo); font-style: italic; padding: 40px 12px 24px; font-size: 18px; }
.lista-carrello {
  display: flex; flex-direction: column; gap: 2px; padding: 0 8px 6px; counter-reset: comanda;
  background: linear-gradient(transparent 10px, var(--fondo-2) 10px); border-radius: 0 0 10px 10px;
  box-shadow: var(--ombra);
}
.lista-carrello:empty { display: none; }
.lista-carrello::before {
  content: ""; display: block; height: 10px; margin: 0 -8px 4px; background: var(--fondo-2);
  -webkit-mask: radial-gradient(circle at 8px 0, transparent 5px, #000 5.5px) 0 0 / 16px 100% repeat-x;
  mask: radial-gradient(circle at 8px 0, transparent 5px, #000 5.5px) 0 0 / 16px 100% repeat-x;
}
.riga-carrello { position: relative; overflow: hidden; border-radius: 8px; }
.riga-carrello + .riga-carrello { border-top: 1px solid var(--linea); border-radius: 0 0 8px 8px; }
.togli {
  position: absolute; top: 0; right: 0; bottom: 0; width: 96px; border: 0; border-radius: 0 var(--raggio) var(--raggio) 0;
  background: var(--accento); color: var(--su-accento); font-size: 14px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  visibility: hidden;   /* si scopre solo scorrendo: da fermo i suoi angoli spunterebbero dietro la riga */
}
.riga-carrello.scorre .togli, .riga-carrello.aperta .togli { visibility: visible; }
.togli svg { width: 22px; height: 22px; }
.riga-corpo {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 2px;
  background: var(--fondo-2); border-radius: 8px; touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform 0.25s var(--facile), background 0.15s ease;
}
.riga-corpo:active { background: var(--fondo-3); }
.riga-corpo::before { counter-increment: comanda; content: counter(comanda) "."; min-width: 1.5em; text-align: right; font-family: var(--display); color: var(--oro); font-size: 16px; }
.riga-corpo .mini { width: 64px; flex: none; padding: 4px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #332A24, #1C1816 72%); box-shadow: inset 0 0 0 1px var(--linea); }
.riga-corpo .riga-testo b { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: 0.01em; }
.riga-corpo .riga-prezzo { color: var(--oro); }
/* col mouse non si scorre: «Togli» resta sempre scoperto a destra */
@media (hover: hover) and (pointer: fine) {
  .riga-corpo { width: calc(100% - 100px); }
  .togli { visibility: visible; }
}
.totale { margin: 16px 0 18px; padding-top: 12px; border-top: 4px double rgba(212, 169, 90, 0.7); }
.totale-riga { display: flex; justify-content: space-between; align-items: baseline; font-size: 20px; }
.totale-riga b { font-size: 28px; color: var(--prezzo); font-family: var(--display); font-weight: 400; }
.totale .aiuto { margin-top: 6px; font-family: var(--corsivo); font-style: italic; }
.azioni-carrello { margin-top: 4px; }
.conferma { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; color: var(--testo-2); }

/* ---------- ordina: il numero del tavolo ---------- */
.aiuto-ordina { text-align: center; margin: 2px 0 10px; }
/* il numero del tavolo, enorme e in oro, su una targa; il tastierino è un oggetto: tasti in rilievo
   (gradiente caldo, filetto chiaro in alto, ombra sotto) che affondano quando si premono */
.tavolo-numero {
  display: flex; align-items: center; justify-content: center; max-width: 320px; margin: 0 auto 14px;
  font-size: 96px; line-height: 1; min-height: 1.3em; color: var(--oro);
  font-family: var(--display); font-weight: 400; letter-spacing: 0.04em;
  background: var(--fondo-2); border: 1px solid var(--linea); border-top-color: rgba(212, 169, 90, 0.6); border-radius: 12px;
  text-shadow: 0 0 24px rgba(255, 140, 50, 0.3);
}
.tavolo-numero .vuoto { font-size: 24px; font-weight: 400; font-family: var(--corsivo); font-style: italic; color: var(--testo-2); letter-spacing: 0; text-shadow: none; }
.tastierino { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 320px; margin: 0 auto 14px; }
.tasto {
  min-height: 72px; border-radius: var(--raggio); border: 1px solid var(--linea);
  background: linear-gradient(var(--fondo-3), var(--fondo-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 14px -8px rgba(0, 0, 0, 0.9);
  font-family: var(--display); font-size: 30px; font-weight: 400; color: var(--testo);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.tasto:active { transform: translateY(2px); background: var(--fondo-2); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6); }
.tasto-canc { border-color: transparent; background: transparent; box-shadow: none; color: var(--testo-2); }
.tasto-canc:active { background: var(--fondo-2); box-shadow: none; }
.tasto-canc svg { width: 28px; height: 28px; }
.errore { text-align: center; color: var(--accento-testo); margin: 0 auto 12px; max-width: 360px; }

/* ---------- inviato: il titolo è un timbro sulla comanda ---------- */
.inviato .testa { justify-content: center; padding: calc(var(--alto) + 10px + env(safe-area-inset-top)) 0 6px; min-height: 0; }
.inviato .testa h2 {
  display: inline-block; max-width: 360px; padding: 10px 18px; text-align: center;
  font-size: clamp(20px, 5.6vw, 26px); line-height: 1.15; text-transform: uppercase; letter-spacing: 0.06em; color: var(--oro);
  border: 4px double var(--oro); border-radius: 8px; transform: rotate(-4deg);
  animation: timbrata 0.3s cubic-bezier(.3, 1.4, .5, 1) both;
}
@keyframes timbrata { from { opacity: 0; transform: rotate(-4deg) scale(1.25); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
.inviato .aiuto { text-align: center; margin-top: 10px; }
.riepilogo {
  list-style: none; padding: 0 8px 6px; margin: 20px 0 8px; display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(transparent 10px, var(--fondo-2) 10px); border-radius: 0 0 10px 10px; box-shadow: var(--ombra);
}
.riepilogo::before {
  content: ""; display: block; height: 10px; margin: 0 -8px 4px; background: var(--fondo-2);
  -webkit-mask: radial-gradient(circle at 8px 0, transparent 5px, #000 5.5px) 0 0 / 16px 100% repeat-x;
  mask: radial-gradient(circle at 8px 0, transparent 5px, #000 5.5px) 0 0 / 16px 100% repeat-x;
}
.riepilogo li { display: flex; align-items: center; gap: 12px; padding: 10px 6px; }
.riepilogo li + li { border-top: 1px solid var(--linea); }
.riepilogo .n { color: var(--oro); font-family: var(--display); min-width: 1.4em; text-align: right; }
.riepilogo .riga-testo b { font-family: var(--display); font-weight: 400; font-size: 18px; }
.inviato .totale-riga { margin: 8px 0 24px; padding-top: 12px; border-top: 4px double rgba(212, 169, 90, 0.7); }

/* ---------- iPad (820) e computer (1180): due colonne ---------- */
@media (min-width: 820px) {
  .testa h2 { font-size: 24px; }
  .scelte { flex-direction: row; max-width: 600px; }
  .scelte .btn { flex: 1; }
  .ingresso .sotto { flex-direction: row; gap: 14px; }
  .ingresso .sotto::after { display: block; }
  .scena-ingresso { width: min(46vw, 380px); }
  .lista-categorie { grid-template-columns: 1fr 1fr; max-width: 900px; gap: 18px; }
  .cat-nome { font-size: 34px; }
  .corpo-componi { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 0 32px; max-width: 1100px; margin: 0 auto; align-items: start; }
  .scena { padding-top: 6px; background: transparent; }   /* in due colonne niente scorre sotto: si vede il fondo */
  .scena::after { display: none; }
  .componi .testa { padding-right: 0; }   /* i tasti tondi stanno sopra la griglia, non sopra il titolo */
  /* qui i nomi si leggono tutti: taglie su una riga, basi sulla riga sotto, allineati a sinistra */
  .comandi-pizza { justify-content: flex-start; gap: 8px 10px; }
  .componi .pizza-box { width: min(100%, 420px); margin-top: 10px; }
  .griglia { padding-top: 66px; }
  .tessere { gap: 10px; }
  .tessera-btn b { font-size: 14px; }
  .btn-aggiungi { padding: 0 24px; font-size: 17px; }
  .lista { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; align-content: start; }
  .riga .mini { width: 108px; }
  .dettaglio .corpo-dettaglio { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; padding-bottom: 32px; }
  .dettaglio .pizza-box { width: min(44vw, 440px); }
  .carrello .contenuto { max-width: 720px; }
  .ordina .contenuto, .inviato .contenuto { max-width: 560px; }
}
@media (min-width: 1180px) {
  .tessere { grid-template-columns: repeat(5, 1fr); }
}

/* ====================================================================================
   DA QUI IN GIÙ NON È PELLE: il fuoco, il volo, «meno movimento». Uguale al 24/10/2026, più gli attrezzi del panino (25/10).
   ==================================================================================== */

/* ---------- il livello del volo: la pizza che prende fuoco e che viaggia ---------- */
.volo { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.volo-pizza { position: absolute; will-change: transform; transform-origin: center; }
/* l'attrezzo che porta l'ingrediente del panino (gesti-panino.js): un riquadro grande quanto la foto dello strato nel
   punto d'arrivo, mosso dalla tessera con translate+scale dall'angolo in alto a sinistra; dentro, l'ingrediente e
   l'utensile: la spatola sotto (lama sotto la carne, manico che sporge a destra), il guanto sopra (misure in px
   scritte dal gesto). La bottiglia è un <div> 0×0 appeso per la punta: translate, rotate e scale girano lì. */
.attrezzo { position: absolute; pointer-events: none; will-change: transform; transform-origin: 0 0; }
.attrezzo .dentro { position: absolute; inset: 0; transform-origin: 50% 60%; }
.attrezzo img { position: absolute; display: block; }
.attrezzo .ingrediente { left: 0; top: 0; width: 100%; height: 100%; }
.attrezzo-spatola .utensile { left: -10%; top: 52%; width: 170%; height: auto; transform-origin: 20% 50%; }   /* la paletta (55 % a sinistra dello sprite) sotto la carne, larga quasi quanto lei; il manico corto sporge a destra e resta nello schermo a 390 px */
.attrezzo-bottiglia { left: 0; top: 0; width: 0; height: 0; }
.volo-flip { transform-origin: 0 0; }
.volo-pizza .pizza { width: 100%; height: auto; transform: none; overflow: visible; }
.volo-pizza .panino { transform: none; }   /* la miniatura del panino perde il suo scarto quando vola */
/* le parti del fuoco: nessun filtro, solo sfumature e trasformazioni (vedi svgFuoco in disegno.js) */
/* le macchie restano fuori: hanno un rotate(a x y) con il centro scritto dentro, e fill-box lo sposterebbe */
.fumo, .bolla, .fiamme, .bagliore { transform-box: fill-box; transform-origin: center; }
.fiamma { transform-box: fill-box; transform-origin: 50% 100%; animation: fiamma 0.8s ease-in-out infinite alternate; }
.f2 { animation-duration: 0.65s; animation-delay: -0.3s; }
.f3 { animation-duration: 1s; animation-delay: -0.5s; }
.f4 { animation-duration: 0.5s; animation-delay: -0.2s; }
@keyframes fiamma { from { transform: scaleY(0.84) skewX(-5deg); } to { transform: scaleY(1.12) skewX(5deg); } }

/* ---------- meno movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .fiamma { animation: none !important; }
  .fiamme, .fumi, .bagliore { display: none; }
  /* l'ingresso non aspetta la pizza: benvenuto, scelte, piatto di luce e tessere delle categorie sono già lì */
  .ingresso .benvenuto, .ingresso .scelte, .scena-ingresso::before, .inviato .testa h2, .categorie .cat { opacity: 1 !important; }
}