/* =========================================================================
   ABC.PIZZA — stile condiviso
   Token dal Design System ABC.PIZZA (versione 3, tema "carta").
   Mobile first: le regole di base sono per lo smartphone, le media query
   allargano per tablet e desktop.
   ========================================================================= */

@font-face {
  font-family: "Ultra";
  src: url("../fonts/ultra-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* Colore */
  --carta: #F8F3E8;
  --ceramica: #FFFDF8;
  --carta-scura: #EFE6D5;
  --giallo: #FFC820;
  --giallo-scuro: #D9A400;
  --nero: #121212;
  --nero-rialzato: #1E1E1E;
  --linea: #E2D8C6;
  --testo: #F4F1E8;
  --testo-muto: #6B665C;
  --inchiostro: var(--nero);

  /* Tipografia */
  --font-display: Ultra, Georgia, serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spazi */
  --spazio-1: 4px;
  --spazio-2: 8px;
  --spazio-3: 16px;
  --spazio-4: 24px;
  --spazio-5: 40px;
  --spazio-6: 64px;

  /* Raggi e tratti */
  --raggio-s: 6px;
  --raggio-m: 16px;
  --raggio-tondo: 999px;
  --tratto-sito: 3px;

  /* Layout */
  --gutter: var(--spazio-3);
  --max: 1120px;
  --nav-h: 68px;
}

@media (min-width: 640px) { :root { --gutter: var(--spazio-4); } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--spazio-4); scroll-padding-bottom: calc(var(--nav-h) + var(--spazio-3)); }
@media (min-width: 860px) { html { scroll-padding-bottom: 0; } }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  /* spazio per la barra di navigazione in basso su telefono */
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 3px; border-radius: 4px; }
.blocco-nero :focus-visible { outline-color: var(--giallo); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salta {
  position: absolute; left: var(--spazio-3); top: -100px; z-index: 100;
  background: var(--giallo); color: var(--inchiostro); padding: 12px 16px;
  border-radius: var(--raggio-tondo); font-weight: 600; text-decoration: none;
}
.salta:focus { top: var(--spazio-3); }

.contenitore { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Tipografia ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; text-wrap: balance; }
.display-xl { font-size: clamp(46px, 12.5vw, 88px); line-height: .95; letter-spacing: -1px; }
.display-l  { font-size: clamp(36px, 9vw, 56px); line-height: 1; }
.titolo     { font-size: clamp(24px, 6vw, 28px); line-height: 1.1; }
.corpo-l    { font-size: 19px; line-height: 29px; }
@media (min-width: 640px) { .corpo-l { font-size: 20px; line-height: 30px; } }
.etichetta  {
  font-family: var(--font-body); font-weight: 600; font-size: 13px; line-height: 16px;
  letter-spacing: .08em; text-transform: uppercase;
}
.muto { color: var(--testo-muto); }
p { margin: 0; }
.prosa > * + * { margin-top: var(--spazio-3); }
.prosa { max-width: 62ch; }

/* ---------- Pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spazio-2);
  min-height: 48px; padding: 12px var(--spazio-4);
  font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 20px;
  border-radius: var(--raggio-tondo); border: var(--tratto-sito) solid var(--inchiostro);
  color: var(--inchiostro); background: transparent; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--giallo); }
.btn-primario:hover, .btn-primario:active { background: var(--giallo-scuro); }
.btn-secondario:hover, .btn-secondario:active { background: var(--carta-scura); }
.blocco-nero .btn-primario { border-color: var(--giallo); }
.blocco-nero .btn-secondario { color: var(--testo); border-color: var(--testo); }
.blocco-nero .btn-secondario:hover { background: var(--nero-rialzato); }
.btn svg { width: 20px; height: 20px; flex: none; }

/* ---------- Testata ---------- */
.testata { padding-block: var(--spazio-3); }
.testata .contenitore { display: flex; align-items: center; justify-content: space-between; gap: var(--spazio-3); }
.marchio { display: inline-block; line-height: 0; border-radius: var(--raggio-s); }
.marchio img { width: 76px; height: auto; }

/* ---------- Navigazione ----------
   Telefono: barra fissa in basso, a portata di pollice.
   Da 860px: nella testata, in alto a destra. */
.nav {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  background: var(--ceramica);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav ul {
  list-style: none; margin: 0 auto; padding: 0 var(--spazio-2);
  display: grid; grid-template-columns: repeat(4, 1fr); max-width: 520px;
}
.nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--nav-h); text-decoration: none; color: var(--testo-muto);
  font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .02em;
  border-radius: var(--raggio-m);
}
.nav a svg { width: 26px; height: 26px; }
.nav a .icona-fondo { fill: transparent; transition: fill .15s ease; }
.nav a[aria-current="page"] { color: var(--inchiostro); }
.nav a[aria-current="page"] .icona-fondo { fill: var(--giallo); }
.nav a:focus-visible { outline-offset: -3px; }

@media (min-width: 860px) {
  body { padding-bottom: 0; }
  .testata { padding-block: var(--spazio-4); }
  .marchio img { width: 92px; }
  .nav { position: static; background: none; border: 0; padding: 0; }
  .nav ul { display: flex; gap: var(--spazio-2); padding: 0; max-width: none; }
  .nav a {
    flex-direction: row; height: 48px; padding: 0 var(--spazio-3); gap: var(--spazio-2);
    font-size: 16px; color: var(--inchiostro); border-radius: var(--raggio-tondo);
    border: var(--tratto-sito) solid transparent;
  }
  .nav a svg { width: 22px; height: 22px; }
  .nav a:hover { background: var(--carta-scura); }
  .nav a[aria-current="page"] { border-color: var(--inchiostro); }
  .nav a[aria-current="page"] .icona-fondo { fill: var(--giallo); }
}

/* ---------- Sezioni ---------- */
main { display: block; }
.sezione { padding-block: var(--spazio-5); }
@media (min-width: 860px) { .sezione { padding-block: var(--spazio-6); } }
.sezione-alt { background: var(--carta-scura); }
.intestazione-sezione { display: flex; flex-direction: column; gap: var(--spazio-2); margin-bottom: var(--spazio-4); }
.intestazione-sezione .prosa { margin-top: var(--spazio-2); }

.blocco-nero { background: var(--nero); color: var(--testo); }
.blocco-nero h2, .blocco-nero h3 { color: var(--testo); }
.blocco-nero .muto { color: #B9B4A8; }

/* Apertura delle pagine interne */
.apertura { padding-block: var(--spazio-4) var(--spazio-5); }
.apertura h1 { margin-top: var(--spazio-2); }
.apertura .prosa { margin-top: var(--spazio-3); }

/* ---------- Home: hero ---------- */
.hero { padding-block: var(--spazio-3) var(--spazio-5); overflow: hidden; }
.hero .contenitore { display: grid; gap: var(--spazio-5); align-items: center; }
.hero-testo { display: flex; flex-direction: column; gap: var(--spazio-3); }
.hero-testo .azioni { display: flex; flex-wrap: wrap; gap: var(--spazio-3); margin-top: var(--spazio-2); }
.hero-figura { position: relative; justify-self: center; width: min(88vw, 440px); }
.hero-figura img { width: 100%; height: auto; }
@media (min-width: 860px) {
  .hero { padding-block: var(--spazio-5) var(--spazio-6); }
  .hero .contenitore { grid-template-columns: 1.35fr 1fr; }
  .hero-figura { width: 100%; max-width: 480px; justify-self: end; }
}

/* Porte d'ingresso alle sezioni */
.porte { display: grid; gap: var(--spazio-4); }
@media (min-width: 760px) { .porte { grid-template-columns: 1fr 1fr; } }
.porta {
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--spazio-3);
  background: var(--ceramica); border: 1px solid var(--linea); border-radius: var(--raggio-m);
  padding: var(--spazio-4);
}
.porta-figura {
  background: var(--carta-scura); border-radius: var(--raggio-m); aspect-ratio: 16 / 9;
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
}
.porta-figura svg { width: 100%; height: 100%; }
.porta .prosa { display: grid; gap: var(--spazio-2); }
.porta .btn { justify-self: start; }

.richiamo-pizzas { display: grid; gap: var(--spazio-5); align-items: center; }
@media (min-width: 860px) { .richiamo-pizzas { grid-template-columns: 1fr 1fr; } }
.richiamo-pizzas .figure-pizzas { background: var(--carta-scura); border-radius: var(--raggio-m); overflow: hidden; }
.richiamo-pizzas .figure-pizzas svg { width: 100%; height: auto; }
.doppio-ruolo { list-style: none; padding: 0; margin: var(--spazio-4) 0; display: grid; gap: var(--spazio-3); }
.doppio-ruolo li { display: grid; grid-template-columns: 40px 1fr; gap: var(--spazio-3); align-items: start; }
.doppio-ruolo .bollino {
  width: 40px; height: 40px; border-radius: var(--raggio-tondo); display: grid; place-items: center;
  border: 2px solid var(--inchiostro); background: var(--ceramica);
}
.doppio-ruolo .bollino svg { width: 22px; height: 22px; }
.doppio-ruolo strong { display: block; font-weight: 600; }

.contatto { text-align: left; }
.contatto .contenitore { display: grid; gap: var(--spazio-4); }
@media (min-width: 860px) {
  .contatto .contenitore { grid-template-columns: 1.4fr 1fr; align-items: end; }
}
.contatto .azioni { display: flex; flex-wrap: wrap; gap: var(--spazio-3); }

/* ---------- Filtri (chip) ---------- */
.filtri { display: flex; flex-wrap: wrap; gap: var(--spazio-2); margin-bottom: var(--spazio-4); padding: 0; list-style: none; }
.chip {
  min-height: 44px; padding: 10px 18px; border-radius: var(--raggio-tondo);
  border: 2px solid var(--inchiostro); background: var(--ceramica); cursor: pointer;
  font-weight: 600; font-size: 15px; line-height: 20px;
}
.chip:hover { background: var(--carta-scura); }
.chip[aria-pressed="true"] { background: var(--giallo); }
.chip .conta { font-weight: 400; color: var(--testo-muto); margin-left: 4px; }
.chip[aria-pressed="true"] .conta { color: var(--inchiostro); }

/* ---------- Griglia video (VideoCard) ---------- */
.griglia-video {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--spazio-4) var(--spazio-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .griglia-video { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spazio-4); } }
@media (min-width: 1024px) { .griglia-video { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card-video {
  display: flex; flex-direction: column; gap: var(--spazio-2); width: 100%; height: 100%;
  padding: 0; border: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--raggio-m);
}
.card-video .frame {
  position: relative; aspect-ratio: 9 / 16; width: 100%;
  background: var(--carta-scura); border-radius: var(--raggio-m); overflow: hidden;
  border: var(--tratto-sito) solid transparent; transition: border-color .15s ease;
}
.card-video .frame img, .card-video .frame svg { width: 100%; height: 100%; object-fit: cover; }
.card-video:hover .frame, .card-video:focus-visible .frame { border-color: var(--inchiostro); }
.card-video:focus-visible { outline: none; }
.card-video .play {
  position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; border-radius: var(--raggio-tondo);
  background: var(--giallo); border: 2px solid var(--inchiostro); display: grid; place-items: center;
}
.card-video .play svg { width: 18px; height: 18px; }
.card-video .stato {
  position: absolute; left: 10px; top: 10px; padding: 4px 8px; border-radius: var(--raggio-s);
  background: var(--ceramica); border: 1px solid var(--linea);
}
.card-video h3 { font-size: clamp(19px, 4.8vw, 24px); line-height: 1.1; margin-top: var(--spazio-1); }
.card-video .meta { color: var(--testo-muto); }

/* ---------- Stato vuoto ---------- */
.vuoto {
  display: grid; gap: var(--spazio-4); justify-items: center; text-align: center;
  background: var(--ceramica); border: 1px solid var(--linea); border-radius: var(--raggio-m);
  padding: var(--spazio-5) var(--spazio-4);
}
.vuoto svg { width: min(260px, 70%); height: auto; }
.vuoto .prosa { display: grid; gap: var(--spazio-2); max-width: 46ch; }

/* ---------- Tool ---------- */
.griglia-tool { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spazio-3); }
@media (min-width: 640px) { .griglia-tool { grid-template-columns: repeat(2, 1fr); gap: var(--spazio-4); } }
@media (min-width: 1024px) { .griglia-tool { grid-template-columns: repeat(3, 1fr); } }
.card-tool {
  display: grid; gap: var(--spazio-2); width: 100%; height: 100%; text-align: left; cursor: pointer;
  background: var(--ceramica); border: var(--tratto-sito) solid var(--linea); border-radius: var(--raggio-m);
  padding: var(--spazio-4);
}
.card-tool:hover, .card-tool:focus-visible { border-color: var(--inchiostro); }
.card-tool:focus-visible { outline: none; }
.card-tool .piattaforma { color: var(--testo-muto); }

/* ---------- Finestra modale (dialog) ---------- */
.modale {
  width: min(100% - 2 * var(--spazio-3), 560px);
  max-height: calc(100dvh - 2 * var(--spazio-3));
  padding: 0; border: 0; border-radius: var(--raggio-m);
  background: var(--ceramica); color: var(--inchiostro);
  box-shadow: 0 24px 60px rgba(18, 18, 18, .25);
  overflow: auto; overscroll-behavior: contain;
}
.modale::backdrop { background: rgba(18, 18, 18, .55); }
.modale-corpo { display: grid; gap: var(--spazio-3); padding: var(--spazio-4); padding-top: var(--spazio-3); }
.modale-barra {
  position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end;
  padding: var(--spazio-2) var(--spazio-2) 0; background: var(--ceramica);
}
.chiudi {
  width: 48px; height: 48px; border-radius: var(--raggio-tondo); border: 2px solid var(--inchiostro);
  background: var(--ceramica); display: grid; place-items: center; cursor: pointer;
}
.chiudi:hover { background: var(--carta-scura); }
.chiudi svg { width: 20px; height: 20px; }
.modale-video {
  justify-self: center; background: var(--nero); border-radius: var(--raggio-m); overflow: hidden;
  aspect-ratio: 9 / 16; height: min(62dvh, 640px); max-width: 100%;
}
.modale-video video { width: 100%; height: 100%; object-fit: contain; background: var(--nero); }
.modale-video.segnaposto {
  background: var(--carta-scura); display: grid; place-items: center; text-align: center; padding: var(--spazio-4);
  height: auto; aspect-ratio: auto; width: 100%; gap: var(--spazio-3);
}
.modale-video.segnaposto svg { width: 140px; height: auto; }
.modale h2 { font-size: clamp(30px, 8vw, 44px); line-height: 1; }
.dettagli { margin: 0; display: grid; gap: var(--spazio-3); }
.dettagli dt { margin-bottom: 2px; color: var(--testo-muto); }
.dettagli dd { margin: 0; }
.modale .azioni { display: flex; flex-wrap: wrap; gap: var(--spazio-3); }
@media (min-width: 860px) {
  .modale.modale-larga { width: min(100% - 2 * var(--spazio-5), 920px); }
  .modale-larga .modale-corpo { grid-template-columns: auto 1fr; align-items: start; column-gap: var(--spazio-5); }
  .modale-larga .modale-video { grid-row: span 4; height: min(76dvh, 680px); }
  .modale-larga .modale-video.segnaposto { width: 300px; }
}

/* ---------- Pizzas: scena ---------- */
.palco-wrap { display: grid; gap: var(--spazio-3); }
.palco {
  position: relative; width: 100%; height: clamp(380px, 64vh, 580px);
  background: var(--ceramica); border: 1px solid var(--linea); border-radius: var(--raggio-m);
  overflow: hidden; touch-action: pan-y; cursor: crosshair;
}
.palco svg { width: 100%; height: 100%; }
.palco svg * { pointer-events: none; }
.palco:focus-visible { outline-offset: 4px; }
.palco-comandi { display: flex; flex-wrap: wrap; gap: var(--spazio-3); align-items: center; }
.palco-nota { color: var(--testo-muto); }
@media (min-width: 860px) {
  .palco-wrap { grid-template-columns: 1fr; }
}

/* Profili */
.griglia-profili { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spazio-4); }
@media (min-width: 760px) { .griglia-profili { grid-template-columns: repeat(3, 1fr); } }
.profilo {
  display: grid; grid-template-rows: auto auto 1fr; gap: var(--spazio-3);
  background: var(--ceramica); border: 1px solid var(--linea); border-radius: var(--raggio-m); padding: var(--spazio-4);
  height: 100%;
}
.profilo-figura {
  background: var(--carta-scura); border-radius: var(--raggio-m); height: 220px;
  display: flex; align-items: flex-end; justify-content: center;
}
.profilo-figura svg { height: 100%; width: auto; }
.profilo .campi { display: grid; gap: var(--spazio-3); margin: 0; }
.profilo .campi dt { color: var(--testo-muto); margin-bottom: 2px; }
.profilo .campi dd { margin: 0; }
.profilo ul { margin: 0; padding-left: 1.1em; }
.in-definizione {
  display: inline-block; padding: 4px 10px; border-radius: var(--raggio-s);
  border: 1px dashed var(--testo-muto); color: var(--testo-muto); font-size: 14px; line-height: 20px;
}

/* Situazioni (personas negli scenari) */
.griglia-situazioni { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spazio-3); }
@media (min-width: 640px) { .griglia-situazioni { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .griglia-situazioni { grid-template-columns: repeat(3, 1fr); } }
.situazione {
  display: grid; gap: var(--spazio-2); align-content: start; height: 100%;
  background: var(--ceramica); border: 1px solid var(--linea); border-radius: var(--raggio-m); padding: var(--spazio-4);
}
.situazione .numero {
  width: 36px; height: 36px; border-radius: var(--raggio-tondo); background: var(--giallo);
  border: 2px solid var(--inchiostro); display: grid; place-items: center; font-weight: 600;
}
.situazione a { font-weight: 600; }

.principi { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--spazio-3); }
@media (min-width: 760px) { .principi { grid-template-columns: repeat(3, 1fr); gap: var(--spazio-4); } }
.principi li { border-top: 3px solid var(--inchiostro); padding-top: var(--spazio-3); }

/* ---------- Piè di pagina ---------- */
.piede { border-top: 1px solid var(--linea); padding-block: var(--spazio-5); }
.piede .contenitore { display: grid; gap: var(--spazio-3); }
.piede .marchio img { width: 64px; }
.piede nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--spazio-4); }
.piede nav a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; text-decoration: none; }
.piede nav a:hover { text-decoration: underline; }
.piede nav li:has(> a[hidden]) { display: none; }
@media (min-width: 860px) {
  .piede .contenitore { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--spazio-5); }
}

/* Talloncini "Seguici su": cartellini gialli con il foro, uno per profilo */
.seguici { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-2); margin: 0; }
.seguici:not(:has(.talloncino:not([hidden]))) { display: none; }
.seguici-etichetta { font-weight: 600; margin-right: var(--spazio-1); }
.talloncino {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 18px 0 14px;
  background: var(--giallo); color: var(--inchiostro);
  border: 2.5px solid var(--inchiostro); border-radius: var(--raggio-tondo);
  font-weight: 600; font-size: 15px; line-height: 20px; text-decoration: none;
  transform-origin: 20px 50%;
  transition: background-color .15s ease, transform .15s ease;
}
.talloncino::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--carta); border: 2.5px solid var(--inchiostro);
}
.talloncino:hover { background: var(--giallo-scuro); transform: rotate(-3deg); }
.talloncino:active { transform: translateY(1px); }

/* Ultima riga: diritti e crediti, a sinistra per non finire sopra l'accento giallo */
.piede .piede-fondo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 0 var(--spazio-4);
  margin-top: var(--spazio-3); font-size: 14px; line-height: 20px;
}
.piede-fondo p { margin: 0; }
.crediti a { font-weight: 600; color: var(--inchiostro); display: inline-flex; min-height: 44px; align-items: center; }

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}
[hidden] { display: none !important; }

/* =========================================================================
   Accenti della locandina dei video
   Archi, pallini e quarti di cerchio della copertina, portati sul sito.
   ========================================================================= */
.decorata { position: relative; overflow: hidden; }
.decorata > .contenitore { position: relative; z-index: 1; }
.accento { position: absolute; pointer-events: none; color: var(--inchiostro); z-index: 0; }
.accento-arco { top: 0; right: 0; width: clamp(84px, 15vw, 180px); height: auto; }
.accento-quarto { right: 0; bottom: 0; width: clamp(96px, 17vw, 230px); height: auto; }
.blocco-nero .accento { color: var(--testo); }
.piede { position: relative; overflow: hidden; }
.piede > .contenitore { position: relative; z-index: 1; }
.piede .accento-quarto { width: clamp(80px, 12vw, 160px); }

/* Pallino giallo prima delle etichette, come "• UX LAW" in copertina */
.punto {
  display: inline-block; width: 12px; height: 12px; margin-right: 9px; vertical-align: -1px;
  border-radius: 50%; background: var(--giallo); border: 2.5px solid var(--inchiostro);
}

/* Linea nera che si disegna sotto la parola chiave del titolo */
.segno { position: relative; white-space: nowrap; }
.segno::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.06em; height: max(5px, .07em);
  background: var(--inchiostro); border-radius: 99px;
  transform-origin: left center; animation: disegna-linea .9s cubic-bezier(.65, 0, .35, 1) .35s both;
}
@keyframes disegna-linea { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Hero: il piatto della copertina, con anello tratteggiato e accenti in orbita */
.hero-figura svg { width: 100%; height: auto; overflow: visible; }
.piatto-copertina .orbita {
  transform-box: view-box; transform-origin: 700px 540px;
  animation: orbita 48s linear infinite;
}
.piatto-copertina .spicchio-marchio { animation: servito .6s cubic-bezier(.34, 1.56, .64, 1) .15s both; }
@keyframes orbita { to { transform: rotate(360deg); } }
@keyframes servito { from { opacity: 0; } to { opacity: 1; } }

/* Due colonne semplici */
.due-colonne { display: grid; gap: var(--spazio-4); }
@media (min-width: 860px) { .due-colonne { grid-template-columns: 1fr 1.2fr; gap: var(--spazio-6); align-items: start; } }

/* =========================================================================
   Pagina Pizzas
   ========================================================================= */
.apertura-pizzas { padding-bottom: var(--spazio-6); }
.apertura-pizzas h1 { max-width: 12ch; }
.comandi-pizzas { display: flex; flex-wrap: wrap; gap: var(--spazio-3); margin-top: var(--spazio-4); }
.palco-nota { color: var(--testo-muto); margin-top: var(--spazio-3); max-width: 52ch; }

/* Profili: Giallo, Bianco, Nero */
.griglia-profili .profilo { grid-template-rows: auto auto auto 1fr; }
.profilo-figura { position: relative; overflow: hidden; height: 240px; }
.profilo-figura .anello {
  position: absolute; left: 50%; top: 50%; width: 210px; height: 210px; margin: -118px 0 0 -105px;
  border-radius: 50%; border: 2.5px dashed var(--inchiostro); opacity: .5;
}
.profilo-figura svg { position: relative; }
.profilo h3 { font-size: clamp(30px, 7vw, 40px); line-height: 1; }
.profilo .soprannome { color: var(--testo-muto); }
.curiosita {
  background: var(--giallo); border: 2px solid var(--inchiostro); border-radius: var(--raggio-m);
  padding: var(--spazio-3); display: grid; gap: var(--spazio-1); align-self: start;
}

@media (prefers-reduced-motion: reduce) {
  .piatto-copertina .orbita { animation: none; }
  .segno::after { animation: none; }
}

/* =========================================================================
   Revisione 2 ottobre
   ========================================================================= */

/* Footer in fondo quando il contenuto è corto; con contenuto lungo segue la pagina */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.testata, .piede { flex: none; }

/* Più aria sotto i titoli con la sottolineatura: la linea non tocca il testo */
h1:has(.segno), h2:has(.segno) { padding-bottom: .2em; }
.segno::after { bottom: -.1em; }
.hero-testo { gap: var(--spazio-4); }
.hero-testo .etichetta { margin-bottom: calc(-1 * var(--spazio-2)); }
.apertura h1:has(.segno) + .prosa { margin-top: var(--spazio-4); }

.btn-piccolo { min-height: 44px; padding: 8px 18px; font-size: 15px; border-width: 2px; }

/* ---------- Tips: anteprima al passaggio del puntatore ---------- */
.card-video .frame video.anteprima {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.card-video .frame video.anteprima.visibile { opacity: 1; }
.card-video .frame .play { z-index: 1; }

/* ---------- Tips: lo spettatore nella scheda del video ----------
   Una striscia in fondo alla finestra: il Pizza entra e si siede a destra.
   È una riga a sé, quindi non copre mai il video né i suoi controlli. */
.modale-platea {
  position: sticky; bottom: 0; z-index: 2; height: 92px; overflow: hidden;
  background: var(--ceramica); border-top: 2px solid var(--inchiostro);
  border-radius: 0 0 var(--raggio-m) var(--raggio-m);
}
.spettatore { position: absolute; right: 12px; bottom: 0; width: 130px; height: 92px; }
.spettatore svg { position: absolute; right: 0; bottom: 0; width: 130px; height: 92px; overflow: visible; }
.spettatore .seduto { opacity: 0; }
.spettatore.entra .in-piedi { animation: spettatore-passi .75s linear both; }
.spettatore.a-posto .in-piedi { opacity: 0; }
.spettatore.a-posto .seduto { opacity: 1; animation: spettatore-siedi .45s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes spettatore-passi {
  0% { transform: translate(150px, 0); } 20% { transform: translate(115px, -7px); } 40% { transform: translate(80px, 0); }
  60% { transform: translate(45px, -7px); } 80% { transform: translate(15px, 0); } 100% { transform: translate(0, 0); }
}
@keyframes spettatore-siedi { from { transform: translateY(-12px); } to { transform: translateY(0); } }
/* schermi molto bassi (telefono in orizzontale): la striscia sta in fondo al contenuto */
@media (max-height: 520px) { .modale-platea { position: static; } }

/* ---------- Pizzas: il gioco ---------- */
#folla { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 40; overflow: hidden; }
#folla > svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; max-width: none; }
.pagina-pizzas { position: relative; }

.pizza-libero {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: grab;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; will-change: transform; border-radius: 12px;
}
.pizza-libero.in-mano { cursor: grabbing; z-index: 2; }
.pizza-libero.intoccabile { pointer-events: none; }
.pizza-libero svg { position: absolute; overflow: visible; pointer-events: none; max-width: none; }
.pizza-libero:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 2px; }
html.pizza-in-mano, html.pizza-in-mano * { cursor: grabbing !important; }

/* Il portale: l'unica uscita per un Pizza afferrato. Sta fermo sullo schermo, sotto i Pizzas
   e sopra la pagina; su telefono si ferma al bordo della barra di navigazione. */
.portale-strato { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 39; pointer-events: none; overflow: hidden; }
.portale-strato svg { display: block; max-width: none; overflow: hidden; }

/* La pizza da proteggere: si trascina con mouse o dito, si sposta con le frecce */
.disco-pizza {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: auto; cursor: grab;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; border-radius: 50%; will-change: transform;
}
.disco-pizza svg {
  display: block; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 5px 0 rgba(18, 18, 18, .16));
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease;
  animation: disco-invito 5.5s ease-in-out 2.5s infinite;
}
.disco-pizza.in-mano { cursor: grabbing; }
.disco-pizza.in-mano svg { transform: scale(1.12); animation: none; }
.disco-pizza.immune svg { opacity: .5; animation: none; }      /* subito dopo un morso non si può mordere di nuovo */
.disco-pizza:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 4px; }
#folla.trasparente .disco-pizza { pointer-events: none; }
/* ogni tanto si muove appena: è l'invito a prenderla */
@keyframes disco-invito {
  0%, 86%, 100% { transform: none; }
  89% { transform: rotate(-9deg) scale(1.05); }
  93% { transform: rotate(8deg) scale(1.05); }
  97% { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) { .disco-pizza svg { animation: none; transition: none; } }

/* Parole che un Pizza può scambiare per qualche secondo */
.scambio { position: relative; display: inline-block; white-space: nowrap; }
.scambio .nuova {
  display: none; position: absolute; left: 50%; top: 0; transform-origin: center;
  background: var(--giallo); color: var(--inchiostro); border-radius: 6px; padding: 0 4px;
}
.scambio.scambiata .orig { color: transparent; }
.scambio.scambiata .nuova { display: block; animation: parola-pop .35s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes parola-pop { from { opacity: 0; margin-top: -10px; } to { opacity: 1; margin-top: 0; } }

/* Finestra del punteggio */
.modale.modale-punteggio { width: min(100% - 2 * var(--spazio-3), 460px); text-align: center; }
.modale-punteggio .modale-corpo { justify-items: center; gap: var(--spazio-3); padding-bottom: var(--spazio-5); }
.punteggio-figura { width: 150px; height: 130px; }
.punteggio-figura svg { width: 100%; height: 100%; overflow: visible; }
.modale-punteggio h2 { font-size: clamp(23px, 6.4vw, 38px); line-height: 1.05; white-space: nowrap; }
.modale-punteggio h2 .voce { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .spettatore.entra .in-piedi, .spettatore.a-posto .seduto, .scambio.scambiata .nuova { animation: none; }
}
.card-tool .autore { font-size: 15px; }
.card-tool .autore { font-size: 15px; }

#folla.trasparente .pizza-libero { pointer-events: none; }
/* le parole scambiabili non prendono il margine dei blocchi di .prosa */
.prosa > .scambio { margin-top: 0; }

/* =========================================================================
   Pizzas: segnapunti, parole lanciate e finali della partita
   ========================================================================= */

/* parola presa dal testo e lanciata: per un attimo nel testo resta il vuoto */
.pt { transition: color .25s ease; }
.pt.presa { color: transparent; transition: none; }

/* Il punteggio resta in un fumetto, in basso a sinistra */
.segnapunti {
  position: fixed; left: 8px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); z-index: 61;
  display: flex; align-items: flex-end; gap: 2px; pointer-events: none;
  animation: segnapunti-entra .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
@media (min-width: 860px) { .segnapunti { left: 16px; bottom: 0; } }
.segnapunti[hidden] { display: none; }
.segnapunti-pizza { width: 62px; height: 66px; flex: none; max-width: none; }
.segnapunti-fumetto {
  position: relative; margin: 0 0 30px; padding: 8px 14px 9px;
  background: var(--ceramica); color: var(--inchiostro); border: 2.5px solid var(--inchiostro); border-radius: 16px;
  font-family: var(--font-display); font-size: 17px; line-height: 1.1; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(18, 18, 18, .16);
}
.segnapunti-fumetto::before, .segnapunti-fumetto::after {
  content: ""; position: absolute; left: -11px; bottom: 9px; border-style: solid;
  border-width: 7px 12px 7px 0; border-color: transparent var(--inchiostro) transparent transparent;
}
.segnapunti-fumetto::after { left: -7px; border-right-color: var(--ceramica); }
.segnapunti .lato { display: inline-block; border-radius: 6px; padding: 0 3px; }
.segnapunti .lato.segna { animation: segna .7s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes segna { 0% { transform: scale(1); background: var(--giallo); } 35% { transform: scale(1.28); background: var(--giallo); } 100% { transform: scale(1); background: transparent; } }
@keyframes segnapunti-entra { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Finali ---------- */
html.finale-attivo, html.finale-attivo body { overflow: hidden; }
.finale { position: fixed; inset: 0; z-index: 60; outline: none; overflow: hidden; }
.finale svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* vincono i Pizzas: festa */
.finale-festa { background: var(--nero); color: var(--testo); animation: finale-buio .8s ease both; }
@keyframes finale-buio { from { opacity: 0; } to { opacity: 1; } }
.finale-musica { position: absolute; top: 16px; right: 16px; z-index: 2; color: var(--testo); border-color: var(--testo); }
.finale-musica:hover { background: var(--nero-rialzato); }
.finale-festa :focus-visible { outline-color: var(--giallo); }

/* vince chi gioca: la pagina si cancella */
.finale-tuo { background: #FFFFFF; color: var(--inchiostro); }
.finale-cancella { animation: finale-cancella .9s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes finale-cancella { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(150% at 50% 50%); } }
.finale-testo {
  position: absolute; inset: 0; margin: 0; padding: var(--spazio-4); display: grid; place-items: center; text-align: center;
  font-family: var(--font-display); font-size: clamp(32px, 7vw, 84px); line-height: 1.02; text-wrap: balance;
  pointer-events: none; transition: opacity .5s ease;
}
.finale-disegnato .finale-testo { opacity: .16; }
.finale-tela { position: absolute; inset: 0; display: block; max-width: none; touch-action: none; cursor: crosshair; }
.finale-penna {
  position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; pointer-events: none;
  background: var(--giallo); border: 2.5px solid var(--inchiostro);
}
.finale-penna.alzata { background: transparent; }

/* "Per tornare alla normalità aggiorna la pagina" */
.avviso-finale {
  position: absolute; right: 16px; bottom: 16px; z-index: 3; width: min(280px, calc(100% - 32px));
  display: grid; gap: 12px; justify-items: start; padding: 16px;
  background: var(--ceramica); color: var(--inchiostro); border: 2.5px solid var(--inchiostro); border-radius: var(--raggio-m);
  box-shadow: 0 14px 34px rgba(18, 18, 18, .28); font-weight: 600;
  animation: avviso-su .5s cubic-bezier(.22, 1, .36, 1) both;
}
.avviso-finale p { margin: 0; }
@keyframes avviso-su { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .segnapunti, .segnapunti .lato.segna, .finale-festa, .finale-cancella, .avviso-finale { animation: none; }
}

/* =========================================================================
   Home: titolo, accenti circolari e Pizzas decorativi
   ========================================================================= */

/* Titolo della hero: "Hard things," e "in easy" restano ognuno su una riga, "slices." va sulla terza.
   Il carattere si misura sulla colonna del testo (unità cqi), così la riga più
   lunga ci sta sempre: il titolo va a capo solo tra i gruppi, a ogni larghezza. */
.hero-testo { container-type: inline-size; min-width: 0; }
.hero-figura { container-type: inline-size; }
@supports (font-size: 1cqi) {
  .hero h1 { font-size: clamp(30px, 12.5cqi, 88px); }
  .hero h1 .insieme { white-space: nowrap; }
}

/* Disco della hero: intero, in basso a destra, con margine dai bordi */
/* A cavallo tra la hero e "Start here", centrato sul bordo destro: se ne vede metà.
   La sezione taglia solo in orizzontale (overflow-x: clip), così la metà alta resta visibile sopra la hero. */
.sezione-aereo { position: relative; overflow-x: clip; }
.accento-disco {
  top: 0; right: 0; width: clamp(170px, 24vw, 340px); height: auto; overflow: visible;
  transform: translate(50%, -50%); z-index: 1;
}
/* l'anello tratteggiato gira e porta con sé l'aeroplanino, che ondeggia e ha l'elica che frulla */
.accento-disco .orbita-aereo { transform-box: view-box; transform-origin: 100px 100px; animation: orbita 12s linear infinite; }
.accento-disco .aereo-volo { animation: aereo-ondeggia 1.6s ease-in-out infinite alternate; }
.accento-disco .elica { transform-box: fill-box; transform-origin: center; animation: elica .14s linear infinite alternate; }
@keyframes aereo-ondeggia { from { transform: translateY(-2.5px) rotate(-4deg); } to { transform: translateY(2.5px) rotate(4deg); } }
@keyframes elica { from { transform: scaleY(1); } to { transform: scaleY(.3); } }
@media (prefers-reduced-motion: reduce) {
  .accento-disco .orbita-aereo, .accento-disco .aereo-volo, .accento-disco .elica { animation: none; }
}

/* Anello tra "Da dove cominciare" e "I Pizzas": sta a cavallo del confine.
   La sezione non ha overflow nascosto, così nulla lo ritaglia. */
.sezione-confine { position: relative; --anello: 56px; }
.sezione-confine > .contenitore { position: relative; z-index: 1; }
.accento-anello {
  top: 0; margin-top: calc(var(--anello) / -2);
  right: calc(max(var(--gutter), (100vw - var(--max)) / 2 + var(--gutter)) + clamp(8px, 3vw, 48px));
  width: var(--anello); height: var(--anello);
  animation: orbita 60s linear infinite;
}
@media (min-width: 860px) { .sezione-confine { --anello: 96px; } }

/* Pizzas decorativi della Home (js/pizzas-decor.js).
   Il "posto" è un punto: lì poggiano i piedi. --h è l'altezza del Pizza. */
.pizza-posto {
  position: relative; display: inline-block; width: 0; height: 0; vertical-align: baseline;
  pointer-events: none; --h: 1.5em;
}
.pizza-posto svg {
  position: absolute; max-width: none; overflow: visible;
  width: calc(var(--h) * 1.1905); height: calc(var(--h) * 1.127);
  left: calc(var(--h) * -0.5952); bottom: calc(var(--h) * -0.0556);
  opacity: 0; transition: opacity .5s ease;
}
.pizza-posto.pronto svg { opacity: 1; }
/* nero: in piedi sopra le ultime lettere di "cominciare" (altezza delle minuscole: .56em) */
.pizza-posto-sopra { left: -1.02em; bottom: .56em; }
/* bianco: subito dopo "I Pizzas", sulla linea di base */
.pizza-posto-accanto { left: .36em; }
/* giallo: nell'angolo in basso a sinistra del piatto, fuori dall'anello tratteggiato */
.pizza-posto-piatto { position: absolute; left: 2.5%; bottom: 0; --h: 84px; }
@supports (width: 1cqi) { .pizza-posto-piatto { --h: 23cqi; } }
@media (prefers-reduced-motion: reduce) {
  .accento-anello { animation: none; }
  .pizza-posto svg { transition: none; }
}

/* =========================================================================
   Cookie: riquadro del consenso, link nel piè di pagina, pagina Privacy
   ========================================================================= */
.cookie {
  position: fixed; z-index: 55;
  left: var(--spazio-2); right: var(--spazio-2);
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + var(--spazio-2));
  display: grid; gap: var(--spazio-2);
  padding: var(--spazio-3);
  background: var(--ceramica); color: var(--inchiostro);
  border: 2.5px solid var(--inchiostro); border-radius: var(--raggio-m);
  box-shadow: 0 6px 0 rgba(18, 18, 18, .12);
  font-size: 15px; line-height: 22px;
}
.cookie-titolo { font-size: 17px; line-height: 1.15; text-wrap: wrap; }
@media (min-width: 860px) { .cookie-titolo { font-size: 20px; } }
.cookie a { font-weight: 600; white-space: nowrap; }
/* i due pulsanti hanno lo stesso peso: rifiutare è facile quanto accettare */
.cookie-azioni { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spazio-2); margin-top: var(--spazio-1); }
.cookie .btn { background: var(--ceramica); }
.cookie .btn:hover { background: var(--carta-scura); }
@media (min-width: 860px) {
  .cookie { left: auto; right: var(--spazio-4); bottom: var(--spazio-4); width: 380px; }
}

.legali { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--spazio-3); }
.legali a, .link-bottone { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--inchiostro); }
.link-bottone {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px;
}

.legale .prosa > h2 { margin-top: var(--spazio-5); }
.legale .prosa > h2:first-child { margin-top: 0; }
.tabella-scorri { overflow-x: auto; }
.tabella { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.tabella th, .tabella td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--linea); }
.tabella thead th { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--testo-muto); border-bottom: 2px solid var(--inchiostro); }
.tabella tbody th { font-weight: 600; white-space: nowrap; }
.tabella code { font-size: 14px; }

/* =========================================================================
   Pagina Pizzas — il modello ABC, le card con la scena e la scheda (9 ottobre)
   ========================================================================= */
/* Il modello ABC: una scheda con il bordo e la linguetta gialla, sotto le card.
   Dentro: la pizza in tre spicchi, le tre voci e il testo con le fonti */
.sezione-abc { padding-top: var(--spazio-4); }
.abc-pannello {
  position: relative; background: var(--ceramica);
  border: var(--tratto-sito) solid var(--inchiostro); border-radius: var(--raggio-m);
  padding: var(--spazio-5) var(--spazio-3) var(--spazio-4);
}
.abc-linguetta {
  position: absolute; top: 0; left: var(--spazio-3); transform: translateY(-50%); margin: 0;
  background: var(--giallo); border: var(--tratto-sito) solid var(--inchiostro); border-radius: var(--raggio-tondo);
  padding: 6px 16px;
}
.abc { display: grid; gap: var(--spazio-4); align-items: start; }
.abc-figura { max-width: 240px; margin-inline: auto; width: 100%; }
.abc-pizza { width: 100%; height: auto; overflow: visible; }
.abc-pizza text { font-family: var(--font-display); }
.abc-testo { display: grid; gap: var(--spazio-4); }
.abc-testo .prosa { max-width: 70ch; }
.abc-voci { margin: 0; display: grid; gap: var(--spazio-3); }
.abc-voci > div {
  display: grid; gap: var(--spazio-2); align-content: start;
  border: 2px solid var(--inchiostro); border-radius: var(--raggio-m); padding: var(--spazio-3);
}
.abc-voci dt { display: flex; align-items: center; gap: var(--spazio-3); font-weight: 600; font-size: 19px; }
.abc-voci dd { margin: 0; }
.abc-lettera {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 24px; line-height: 1;
  border: 2.5px solid var(--inchiostro); border-radius: 50%;
}
.abc-a { background: var(--giallo); }
.abc-b { background: var(--nero); color: var(--ceramica); }
.abc-c { background: var(--ceramica); }
.abc-fonti { font-size: 14px; line-height: 21px; }
.abc-fonti cite { font-style: italic; }
@media (min-width: 640px) {
  .abc-pannello { padding: var(--spazio-5) var(--spazio-4) var(--spazio-4); }
  .abc-linguetta { left: var(--spazio-4); }
  .abc-voci { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 860px) {
  .abc-pannello { padding: var(--spazio-5) var(--spazio-6); }
  .abc-linguetta { left: var(--spazio-5); }
  .abc { grid-template-columns: 220px 1fr; gap: var(--spazio-5); }
  .abc-figura { max-width: none; }
}

/* Le card: la scena al posto della figura, e il pulsante in fondo */
.griglia-profili .profilo { grid-template-rows: auto auto 1fr auto; }
.profilo-figura.profilo-scena { height: auto; aspect-ratio: 3 / 2; background: var(--carta); border: 1px solid var(--linea); }
.profilo-scena img { width: 100%; height: 100%; object-fit: cover; }
.profilo-azione { align-self: end; }

/* La scheda: fototessera e nome, carta d'identità, persona, mossa speciale */
.modale.modale-pizza { width: min(100% - 2 * var(--spazio-3), 640px); }
.modale-pizza .modale-corpo { gap: var(--spazio-4); padding-bottom: var(--spazio-5); }
.pizza-testa { display: grid; grid-template-columns: minmax(96px, 140px) 1fr; gap: var(--spazio-4); align-items: center; }
.pizza-testa > div { display: grid; gap: var(--spazio-2); }
.pizza-tessera { width: 100%; height: auto; }
.pizza-blocco { display: grid; gap: var(--spazio-2); }
.pizza-blocco h3 { font-size: clamp(24px, 6vw, 30px); line-height: 1.05; }
.pizza-id, .pizza-segni { margin: 0; display: grid; border-top: 2px solid var(--inchiostro); }
.pizza-id > div, .pizza-segni > div {
  display: grid; grid-template-columns: 9.5em 1fr; gap: var(--spazio-3); align-items: baseline;
  padding-block: 12px; border-bottom: 2px solid var(--inchiostro);
}
.pizza-id dt, .pizza-segni dt { color: var(--testo-muto); }
.pizza-id dd, .pizza-segni dd { margin: 0; font-weight: 600; font-size: 18px; }
.pizza-fonti { font-size: 14px; line-height: 21px; }
.pizza-mossa-corpo { display: grid; gap: var(--spazio-3); margin-top: var(--spazio-2); }
.pizza-mossa-corpo > div { display: grid; gap: var(--spazio-3); align-content: start; }
.pizza-mossa img { width: 100%; max-width: 320px; height: auto; border-radius: var(--raggio-m); border: 1px solid var(--linea); }
@media (min-width: 560px) { .pizza-mossa-corpo { grid-template-columns: minmax(0, 250px) 1fr; gap: var(--spazio-4); align-items: start; } }
@media (max-width: 479px) {
  .pizza-id > div, .pizza-segni > div { grid-template-columns: 7.5em 1fr; }
  .pizza-testa { grid-template-columns: 96px 1fr; gap: var(--spazio-3); }
  .pizza-testa .corpo-l { font-size: 17px; line-height: 25px; }
}