/* ==========================================================================
   Bee.p, gioco della fiera: interfaccia "Tavola tecnica"
   Tre inchiostri + bianco. Niente grigi, sfumature, ombre morbide, raggi.
   Contratto: docs/superpowers/specs/contratto-direzione.md
   ========================================================================== */

@font-face {
  font-family: "Rajdhani";
  src: url("../fonts/rajdhani-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rajdhani";
  src: url("../fonts/rajdhani-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rajdhani";
  src: url("../fonts/rajdhani-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Colori: valori della spec, DA ALLINEARE AL LOGO Bee.p quando il file è disponibile
     (aggiornare anche il meta theme-color in index.html). */
  --giallo: #FCC515;
  --nero: #111111;
  --arancio: #F0870A;
  --bianco: #FFFFFF;

  --tratto: 2.5px;       /* squadratura, divisioni principali, bordi dei campi */
  --tratto-fine: 1.5px;  /* divisioni secondarie */
  --margine: 12px;       /* distanza della squadratura dal bordo */
  --colonna: 480px;      /* larghezza massima su schermo largo */
  --spazio: 16px;

  /* Carta e inchiostro della schermata di partita: cambiano col foglio (CONFIG.fogli, via hud.js). */
  --carta: var(--giallo);
  --inchiostro: var(--nero);

  --carattere: "Rajdhani", "Bahnschrift", "DIN Alternate", "Segoe UI", system-ui, sans-serif;
  color-scheme: only light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  background: var(--giallo);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--giallo);
  color: var(--nero);
  font: 600 18px/1.3 var(--carattere);
  accent-color: var(--nero);
  caret-color: var(--nero);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--nero); color: var(--giallo); }

[hidden] { display: none !important; }

h1, h2, p { margin: 0; }

a {
  color: var(--nero);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:active { background: var(--nero); color: var(--giallo); }

:focus-visible {
  outline: 3px solid var(--nero);
  outline-offset: 3px;
}

.simboli { position: absolute; }

/* ---------- Scena e foglio ---------- */

#scena {
  position: fixed;
  inset: 0;
  margin: 0 auto;
  width: 100%;
  max-width: var(--colonna);
  height: 100%;
  display: block;
  background: var(--giallo);
}

.tavola {
  position: fixed;
  inset: 0;
  margin: 0 auto;
  max-width: var(--colonna);
  padding:
    calc(var(--margine) + env(safe-area-inset-top, 0px))
    calc(var(--margine) + env(safe-area-inset-right, 0px))
    calc(var(--margine) + env(safe-area-inset-bottom, 0px))
    calc(var(--margine) + env(safe-area-inset-left, 0px));
}

.foglio {
  position: relative;
  height: 100%;
  border: var(--tratto) solid var(--nero);  /* squadratura */
  overflow: hidden;
}

.schermata {
  display: none;
  position: absolute;
  inset: 0;
}

body[data-schermata="inizio"] #inizio { display: flex; }
body[data-schermata="partita"] #partita { display: flex; }
body[data-schermata="fine"] #fine { display: flex; flex-direction: column; }
#fine > * { flex: none; }

/* Inizio e fine coprono la scena; la partita la lascia vedere. */
#inizio, #fine {
  background: var(--giallo);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Durante la partita: niente scorrimento, zoom, selezione; i tocchi passano alla scena. */
body[data-schermata="partita"] {
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html:has(body[data-schermata="partita"]) { overscroll-behavior: none; }
body[data-schermata="partita"] .tavola { pointer-events: none; }
body[data-schermata="partita"] #scena { touch-action: none; }

/* ---------- Fogli della partita: uno ogni due livelli, nell'ordine di CONFIG.fogli ----------
   hud.js scrive sul body i colori del foglio (--carta-foglio, --tratto-foglio) e il suo tono
   (data-tono chiaro o scuro). Valgono in partita, nel game over e sul verbale (blocco "Fine partita sul foglio raggiunto"); l'ingresso resta giallo.
   Cambiano insieme scena, squadratura, cartiglio, tasto pausa e segni; documenti e rogne mai. */
body[data-schermata="partita"] { --carta: var(--carta-foglio, var(--giallo)); --inchiostro: var(--tratto-foglio, var(--nero)); }
body[data-schermata="partita"] { background: var(--carta); color: var(--inchiostro); }
body[data-schermata="partita"] #scena { background: var(--carta); }
body[data-schermata="partita"] .foglio { border-color: var(--inchiostro); }
/* Allarme: ultima vita → squadratura arancio fissa; rogna presa → un lampo arancio a spessore
   doppio (il contorno esterno non sposta nulla). È un cambio di colore: vale anche con
   "riduci movimento". */
body[data-schermata="partita"][data-ultima] .foglio { border-color: var(--arancio); }
body.lampo[data-schermata="partita"] .foglio { animation: lampo-squadratura .14s steps(1, end); }
@keyframes lampo-squadratura {
  from, to { border-color: var(--arancio); outline: var(--tratto) solid var(--arancio); }
}
/* il punto del marchio è bianco: sui fogli chiari diversi dal giallo prende l'arancio per restare visibile */
body[data-schermata="partita"][data-tono="chiaro"]:not([data-foglio="giallo"]) #partita .logo-beep .punto,
body[data-schermata="fine"][data-tono="chiaro"]:not([data-foglio="giallo"]) #fine .logo-beep .punto { color: var(--arancio); }

/* ---------- Fine partita sul foglio raggiunto ----------
   Il verbale resta sul foglio dove la partita si è chiusa (stessi colori di hud.js). Dentro #fine
   "nero" e "giallo" diventano inchiostro e carta del foglio: tasti, bordi, etichette, messaggi e
   classifica seguono il foglio senza regole doppie. I fogli bianchi (campi, tasto Invia, casella
   di spunta) restano neri su bianco su ogni foglio; ciò che di loro sta sulla carta (contorno di
   fuoco, casella spuntata, stato disattivato) prende l'inchiostro. */
body[data-schermata="fine"] { --carta: var(--carta-foglio, var(--giallo)); --inchiostro: var(--tratto-foglio, var(--nero)); }
body[data-schermata="fine"] { background: var(--carta); color: var(--inchiostro); }
body[data-schermata="fine"] .foglio { border-color: var(--inchiostro); }
body[data-schermata="fine"] #fine { --nero: var(--inchiostro); --giallo: var(--carta); }
body[data-schermata="fine"] #fine :is(.campo input, .secondario, .spunta input) { --nero: #111111; --giallo: #FCC515; }
body[data-schermata="fine"] #fine :is(.campo input, .secondario, .spunta input):focus-visible { outline-color: var(--inchiostro); }
body[data-schermata="fine"] #fine .spunta input { border-color: var(--inchiostro); }
body[data-schermata="fine"] #fine :is(.campo input, .secondario):disabled {
  border-color: var(--inchiostro);
  color: var(--inchiostro);
  -webkit-text-fill-color: var(--inchiostro);
}

/* ---------- Scritte di tavola ---------- */

.sigla,
.etichetta,
.figura text {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}

.sigla {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.logo-beep {
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}
.logo-beep .punto { color: var(--bianco); }  /* parte del marchio, non testo da leggere */
.logo-beep img { display: block; height: 36px; width: auto; }

/* ---------- Pulsanti ---------- */

button {
  font: inherit;
  color: inherit;
  border-radius: 0;
  margin: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.ordine {
  display: block;
  width: 100%;
  min-height: 62px;
  padding: 6px 16px;
  border: var(--tratto) solid var(--nero);
  background: var(--nero);
  color: var(--giallo);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ordine:active:not(:disabled) {
  background: var(--arancio);
  color: var(--nero);
  transform: translateY(2px);
}

.secondario {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 6px 16px;
  border: var(--tratto) solid var(--nero);
  background: var(--bianco);
  color: var(--nero);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.secondario:active:not(:disabled) {
  background: var(--nero);
  color: var(--giallo);
  transform: translateY(2px);
}

.ordine:disabled,
.secondario:disabled {
  background: transparent;
  color: var(--nero);
  border-style: dashed;
  cursor: default;
}

/* Azione a contorno (Richiedi demo, Fine partita): stesso peso del secondario, senza fondo.
   Vale per <a> e <button>. La riga piccola dentro (small) dice cosa succede. */
.contorno {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-height: 54px;
  padding: 6px 16px;
  border: var(--tratto) solid var(--nero);
  background: transparent;
  color: var(--nero);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}
.contorno small {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
}
.contorno:active { background: var(--nero); color: var(--giallo); transform: translateY(2px); }

/* ---------- Campi ---------- */

.campo { display: block; }

.campo label {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}
.facoltativo { font-weight: 500; }

.campo input {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 4px 14px;
  border: var(--tratto) solid var(--nero);
  border-radius: 0;
  background: var(--bianco);
  color: var(--nero);
  font: 600 20px/1.2 var(--carattere);  /* mai sotto 16px: niente zoom su iOS */
  -webkit-appearance: none;
  appearance: none;
}
.campo input:focus-visible {
  outline: 3px solid var(--nero);
  outline-offset: 3px;
}
/* Errore: fascia arancio spessa dentro una cornice nera */
.campo input[aria-invalid="true"] {
  border: 5px solid var(--arancio);
  padding: 2px 12px;
  box-shadow: 0 0 0 var(--tratto) var(--nero);  /* tratto pieno, non ombra */
}
/* Disattivato: tratteggio, non grigio */
.campo input:disabled {
  border-style: dashed;
  background: transparent;
  color: var(--nero);
  -webkit-text-fill-color: var(--nero);
  opacity: 1;
}
/* compilazione automatica: resta foglio bianco con testo nero */
.campo input:-webkit-autofill {
  -webkit-text-fill-color: var(--nero);
  box-shadow: 0 0 0 100px var(--bianco) inset;
}
.campo input[aria-invalid="true"]:-webkit-autofill {
  box-shadow: 0 0 0 100px var(--bianco) inset, 0 0 0 var(--tratto) var(--nero);
}

/* Messaggi: targhetta nera. Vuota non occupa spazio ma resta nel documento (role="alert"). */
.errore {
  padding: 8px 12px;
  background: var(--nero);
  color: var(--giallo);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}
.errore:empty { padding: 0; }

/* Casella di spunta disegnata */
.spunta { position: relative; }
.spunta label {
  display: block;
  min-height: 48px;
  padding: 12px 0 12px 42px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  cursor: pointer;
}
.spunta label a { padding: 10px 0; }  /* allarga il bersaglio senza spostare il testo */
.spunta input {
  position: absolute;
  left: 0;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0;
  border: var(--tratto) solid var(--nero);
  border-radius: 0;
  background: var(--bianco);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.spunta input:checked {
  /* segno giallo su nero: stessi valori di --giallo e --nero */
  background: var(--nero) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5' fill='none' stroke='%23FCC515' stroke-width='3.5'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.spunta input[aria-invalid="true"] {
  border: 5px solid var(--arancio);
  box-shadow: 0 0 0 var(--tratto) var(--nero);
}
.spunta input:disabled { border-style: dashed; background-color: transparent; }

/* ==========================================================================
   INIZIO
   ========================================================================== */

#inizio { flex-direction: column; }

.inizio-corpo {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding: 14px var(--spazio) var(--spazio);
}

#titolo {
  margin-top: 14px;
  font-size: clamp(54px, 17vw, 76px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.spiega span { display: block; }
.spiega {
  margin-top: 10px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
}

.figura {
  flex: 1 1 130px;
  min-height: 130px;
  height: 130px;
  width: 100%;
  margin: 10px 0 12px;
}
.k { stroke: var(--nero); stroke-linejoin: round; stroke-linecap: round; }
.figura text { fill: var(--nero); font-family: var(--carattere); font-size: 16px; }
.figura .rogna { fill: var(--arancio); }
.figura .corpo { fill: var(--nero); }
.figura .fascia { stroke: var(--giallo); stroke-linejoin: round; stroke-linecap: round; }

.azioni-inizio {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.azioni-inizio .errore:empty { margin-top: -10px; }

/* Piede dell'ingresso: nota privacy, poi la firma Bee.p / M2 (la stessa del verbale) */
.piede {
  flex: none;
  border-top: var(--tratto) solid var(--nero);
}
#nota-privacy {
  padding: 8px var(--spazio) 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
#nota-privacy a {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  margin-top: -6px;
}

/* ==========================================================================
   PARTITA
   ========================================================================== */

#partita {
  flex-direction: column;
  justify-content: space-between;
}
#partita > .sigla {
  justify-content: flex-end;
  gap: 0;
  padding: 14px var(--spazio) 0;
}
#partita > .sigla span + span::before { content: "\00a0·\00a0"; }
/* Serie attiva: targhetta di tavola sotto la sigla, a destra, lontana dal pollice e dalla pausa */
#serie {
  position: absolute;
  top: 38px;
  right: var(--spazio);
  padding: 5px 8px 4px;
  border: 2px solid var(--nero);
  background: var(--nero);
  color: var(--giallo);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}
#serie[hidden] { display: none; }
body[data-schermata="partita"][data-tono="scuro"] #serie { border-color: var(--inchiostro); }
#serie.scatto { animation: colpo-colore .14s steps(1, end); }

#cartiglio {
  display: grid;
  grid-template-columns: minmax(0, 200fr) minmax(0, 166fr);
  grid-template-rows: 42px 60px 60px;
  grid-template-areas:
    "moduli moduli"
    "punti  vite"
    "punti  logo";
  border-top: var(--tratto) solid var(--inchiostro);
  background: var(--carta);
}

/* Caselle modulo */
.moduli {
  grid-area: moduli;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: var(--tratto) solid var(--inchiostro);
}
.modulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 0 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.modulo + .modulo { border-left: var(--tratto) solid var(--inchiostro); }
/* Simbolo del documento che la casella aspetta: solo tratto, nel colore del testo (currentColor).
   Casella vuota: contorno spezzato; casella piena: tratto continuo su fondo pieno. */
.spia {
  flex: none;
  width: 20px;
  height: 20px;
  overflow: visible;
  color: var(--inchiostro);
  --spia-tratteggio: 3 2.2;
}
.modulo.acceso { background: var(--inchiostro); color: var(--carta); }
.modulo.acceso + .modulo { border-left-color: var(--inchiostro); }
.modulo.acceso + .modulo.acceso { border-left-color: var(--carta); }
.modulo.acceso .spia { color: var(--carta); --spia-tratteggio: none; }

/* Colpo: scatto netto a ogni presa. Il JS aggiunge "colpo" e la toglie su animationend
   (per ripeterlo: togliere la classe, forzare il ricalcolo, rimetterla). */
.modulo.colpo { animation: colpo-colore .14s steps(1, end); }
@keyframes colpo-colore {
  from { background: var(--bianco); color: var(--nero); }
  to   { background: var(--bianco); color: var(--nero); }
}
.modulo.colpo .spia { animation: colpo-spia .14s steps(1, end); }
@keyframes colpo-spia {
  from { color: var(--nero); }
  to   { color: var(--nero); }
}

.riquadro { position: relative; min-width: 0; }
.riquadro .etichetta {
  position: absolute;
  top: 9px;
  left: 10px;
}

.riquadro-punti {
  grid-area: punti;
  display: flex;
  flex-direction: column;
  border-right: var(--tratto) solid var(--inchiostro);
}
.riquadro-punti::before {  /* riga sotto l'etichetta, come nello schizzo */
  content: "";
  flex: none;
  height: 30px;
  border-bottom: var(--tratto) solid var(--inchiostro);
}
#cifre {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}
.cifra {
  flex: 1 0 0;
  min-width: min-content;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 3px 0;
  font-size: clamp(54px, 16.5vw, 66px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cifra + .cifra { border-left: var(--tratto-fine) solid var(--inchiostro); }
/* Scatto di una cifra che cambia (facoltativo per il JS, stessa meccanica di "colpo") */
.cifra.scatto { animation: colpo-colore .12s steps(1, end); }

.riquadro-vite {
  grid-area: vite;
  border-bottom: var(--tratto) solid var(--inchiostro);
}
#vite {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  height: 100%;
  padding: 0 10px 0 50px;
}
.vita { display: block; flex: none; width: clamp(25px, 7.2vw, 30px); aspect-ratio: 30 / 34; }
.vita svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--inchiostro);
  stroke: var(--inchiostro);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.vita.persa svg { fill: none; }

.riquadro-logo {
  grid-area: logo;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

/* Cicli chiusi, accanto al marchio */
.riquadro-logo { justify-content: space-between; gap: 6px; }
.cicli { display: flex; flex-direction: column; gap: 3px; }
.riquadro .cicli .etichetta { position: static; }
#cicli {
  font-size: 30px;
  font-weight: 700;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.riquadro-logo .logo-beep { font-size: 30px; }

/* Ciclo chiuso: un colpo unico e netto su tutta la striscia (cambio di colore, vale anche con "riduci movimento") */
.moduli.chiuso { animation: ciclo-chiuso .32s steps(1, end); }
@keyframes ciclo-chiuso {
  from { background: var(--arancio); }
  to   { background: var(--arancio); }
}
#sigla-tavola.scatto { animation: colpo-colore .14s steps(1, end); }

@media (prefers-reduced-motion: no-preference) {
  /* Finché il ciclo è aperto le caselle vuote chiamano: il simbolo alterna inchiostro e arancio
     a scatti. Con "riduci movimento" resta la differenza tra tratto spezzato e pieno. */
  .modulo:not(.acceso) .spia { animation: attesa 1s infinite; }
  @keyframes attesa {
    0%   { color: var(--inchiostro); animation-timing-function: steps(1, end); }
    50%  { color: var(--arancio); animation-timing-function: steps(1, end); }
    100% { color: var(--arancio); }
  }
  .modulo.colpo > * { animation: colpo-salto .14s steps(1, end); }
  .modulo.colpo .spia { animation: colpo-spia .14s steps(1, end), colpo-salto .14s steps(1, end); }
  .cifra.scatto { animation: colpo-colore .12s steps(1, end), colpo-salto .12s steps(1, end); }
  @keyframes colpo-salto {
    from { transform: translateY(-3px); }
    to   { transform: translateY(-3px); }
  }
}

/* ==========================================================================
   FINE
   ========================================================================== */

.esito {
  display: flex;
  flex-direction: column;
  padding: 14px var(--spazio) var(--spazio);
}

#fine-titolo {
  margin-top: 12px;
  padding-bottom: 7px;
  border-bottom: var(--tratto) solid var(--nero);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}

/* Qualifica: il ruolo guadagnato. Il timbro sporge dall'angolo come quello di livello in partita:
   riquadro storto, bordo arancio, scritta d'inchiostro. */
.qualifica {
  position: relative;
  margin-top: 20px;
  padding: 10px 12px 12px;
  border: var(--tratto) solid var(--nero);
}
#fine-qualifica {
  margin-top: 6px;
  font-size: 34px;
  font-weight: 700;
  line-height: .95;
  overflow-wrap: anywhere;
}
.timbro-verbale {
  position: absolute;
  top: -15px;
  right: -6px;
  transform: rotate(-8deg);
  padding: 5px 10px 3px;
  border: 3px solid var(--arancio);
  background: var(--giallo);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}

/* Tabella del verbale, come un cartiglio: le linee interne sono lo spazio tra le caselle. */
.verbale {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tratto-fine);
  margin: 10px 0 0;
  border: var(--tratto) solid var(--nero);
  background: var(--nero);
}
.verbale > div {
  min-width: 0;
  padding: 7px 10px 8px;
  background: var(--giallo);
}
.verbale > .lungo { grid-column: 1 / -1; }
.verbale dt {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}
.verbale dd {
  margin: 4px 0 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.verbale dd small {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
}
#fine-dettaglio::before { content: "· "; }
#fine-record.nuovo {
  display: inline-block;
  padding: 2px 6px 1px;
  background: var(--nero);
  color: var(--giallo);
}

/* Riga traguardo: una riga sola, altezza fissa, sulla targhetta tratteggiata della prossima
   qualifica. Vuota resta al suo posto (visibility), così i tasti non si spostano. */
#fine-traguardo {
  align-self: flex-start;
  max-width: 100%;
  min-height: calc(1em + 10px);
  margin-top: 12px;
  padding: 5px 8px 4px;
  border: var(--tratto-fine) dashed var(--nero);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#fine-traguardo.vuota { visibility: hidden; }

/* L'ordine del verbale è la demo (un collegamento con l'aspetto del tasto pieno); Rigioca a contorno. */
a.ordine {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  text-decoration: none;
}
.ordine small {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: none;
}
#demo-fine { margin-top: 14px; min-height: 72px; }
#rigioca { margin-top: 24px; }  /* staccato dalla demo: il pollice che cerca Rigioca non apre il sito */

@media (prefers-reduced-motion: no-preference) {
  /* Il timbro batte quando il verbale si apre: compare grande e scatta giù */
  body[data-schermata="fine"] .timbro-verbale { animation: timbro-verbale .9s steps(1, end) both; }
  @keyframes timbro-verbale {
    0%       { visibility: hidden; }
    45%      { visibility: visible; transform: rotate(-8deg) scale(1.3); }
    58%, to  { visibility: visible; transform: rotate(-8deg) scale(1); }
  }
}

/* Classifica del giorno */
#fine-classifica { margin-top: 18px; }
#fine-classifica .etichetta { display: block; padding-bottom: 7px; border-bottom: var(--tratto) solid var(--nero); }
#classifica-righe { margin: 0; padding: 0; list-style: none; }
#classifica-righe li {
  display: grid;
  grid-template-columns: 3.2ch minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  padding: 6px 6px 5px;
  border-bottom: var(--tratto-fine) solid var(--nero);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
#classifica-righe .punti { font-weight: 700; text-align: right; }
#classifica-righe li.tu { background: var(--nero); color: var(--giallo); border-bottom-color: var(--nero); font-weight: 700; }
#classifica-righe li.salto { display: block; padding: 0 6px; border-bottom: 0; font-size: 18px; line-height: 1; text-align: center; letter-spacing: .3em; }

#form-contatto {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px var(--spazio) 22px;
  border-top: var(--tratto) solid var(--nero);
}
#form-contatto h2 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}
#form-contatto .invito {
  margin-top: -6px;
  font-size: 19px;
  line-height: 1.2;
}
#form-contatto .errore:empty { margin-top: -14px; }

#grazie {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px var(--spazio);
  border-top: var(--tratto) solid var(--nero);
}
.grazie-testo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
}
/* l'esagono del ringraziamento (solo l'icona: il timbro dei segni in partita ha le sue misure) */
svg.timbro {
  flex: none;
  width: 30px;
  height: 34px;
  fill: var(--nero);
  stroke: var(--nero);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.firma {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  margin-top: auto;
  padding: 8px var(--spazio);
  border-top: var(--tratto) solid var(--nero);
}
.firma-m2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  text-align: right;
}
/* Logo M2: il PNG nero (img/logo-m2.png, ritagliato, 382×240) fa da maschera e prende
   l'inchiostro del foglio, come il resto della firma: nero sul giallo, chiaro sui fogli scuri.
   Sempre piccolo, come firma. */
.logo-m2 {
  flex: none;
  display: block;
  height: 36px;
  aspect-ratio: 382 / 240;
  background-color: var(--nero);
  -webkit-mask: url("../img/logo-m2.png") center / contain no-repeat;
  mask: url("../img/logo-m2.png") center / contain no-repeat;
}
@media (forced-colors: active) {
  .logo-m2 { forced-color-adjust: none; background-color: CanvasText; }
}
/* I loghi della firma sono collegamenti ai siti: niente sottolineatura, bersaglio da 44 px,
   e al tocco si capovolgono come gli altri collegamenti (fondo inchiostro, marchio carta). */
.firma a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
.firma a:active { background: var(--nero); color: var(--giallo); }
.firma a:active .logo-m2 { background-color: var(--giallo); }

/* ==========================================================================
   PAUSA e ROTAZIONE
   ========================================================================== */

#pausa {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: var(--colonna);
  height: 100%;
  margin: 0 auto;
  padding: 24px;
}
#pausa::before {  /* retino a tratto pieno dentro la squadratura (linee nette, nessuna sfumatura) */
  content: "";
  position: absolute;
  top: calc(var(--margine) + env(safe-area-inset-top, 0px));
  right: calc(var(--margine) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--margine) + env(safe-area-inset-bottom, 0px));
  left: calc(var(--margine) + env(safe-area-inset-left, 0px));
  background: repeating-linear-gradient(135deg, var(--inchiostro) 0 1.5px, transparent 1.5px 14px);
}
.cartello {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(300px, 100%);
  padding: 16px;
  border: var(--tratto) solid var(--nero);
  background: var(--giallo);
  color: var(--nero);
  box-shadow: 0 0 0 6px var(--giallo), 0 0 0 calc(6px + var(--tratto)) var(--nero);  /* doppia cornice a tratto pieno */
}
.cartello h2 {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}
#pausa-voci { display: flex; flex-direction: column; gap: 10px; }
/* Preavviso di ripresa: via retino e cartello, resta una targhetta in alto. Si rivede la scena. */
#pausa[data-fase="preavviso"] {
  place-items: start center;
  padding-top: calc(var(--margine) + 62px);
  pointer-events: none;
}
#pausa[data-fase="preavviso"]::before { display: none; }
#pausa[data-fase="preavviso"] .cartello {
  width: auto;
  padding: 8px 16px 7px;
  border-color: var(--nero);
  background: var(--nero);
  color: var(--giallo);
  box-shadow: 0 0 0 3px var(--giallo);
}
#pausa[data-fase="preavviso"] #pausa-titolo { display: none; }
#pausa[data-fase="preavviso"] #pausa-pronti { padding: 0; font-size: 24px; }
#pausa-pronti {
  padding: 14px 0 10px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}

/* Game over: finestra arcade sopra la tavola ferma, con il retino e la doppia cornice della pausa
   ma nei colori del foglio (siamo ancora in partita: --carta e --inchiostro sono quelli del foglio).
   Le tre tacche si svuotano una per volta nella durata di CONFIG.gameOver (--durata-game-over la
   scrive js/screens.js); "▶ Risultato" lampeggia a scatti, tranne con "riduci movimento". */
#game-over {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: var(--colonna);
  height: 100%;
  margin: 0 auto;
  padding: 24px;
  cursor: pointer;
}
#game-over::before {
  content: "";
  position: absolute;
  top: calc(var(--margine) + env(safe-area-inset-top, 0px));
  right: calc(var(--margine) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--margine) + env(safe-area-inset-bottom, 0px));
  left: calc(var(--margine) + env(safe-area-inset-left, 0px));
  background: repeating-linear-gradient(135deg, var(--inchiostro) 0 1.5px, transparent 1.5px 14px);
}
.cartello-fine {
  position: relative;
  width: min(310px, 100%);
  border: var(--tratto) solid var(--inchiostro);
  background: var(--carta);
  color: var(--inchiostro);
  box-shadow: 0 0 0 6px var(--carta), 0 0 0 calc(6px + var(--tratto)) var(--inchiostro);  /* doppia cornice */
  text-align: center;
}
.cartello-fine .barra {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px 5px;
  background: var(--inchiostro);
  color: var(--carta);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}
.titolo-fine {
  padding: 24px 8px 8px;
  font-size: 50px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: .9;
  text-transform: uppercase;
}
#game-over-riga,
.cartello-fine .vai {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.1;
  text-transform: uppercase;
}
.cartello-fine .vai {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 12px;
}
.cartello-fine .vai svg { width: 13px; height: 15px; fill: currentColor; }
.tacche {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 14px 0 18px;
}
.tacche i {
  width: 30px;
  height: 11px;
  border: var(--tratto) solid currentColor;
  background: currentColor;
}
#game-over.corre .tacche i { animation: tacca-1 var(--durata-game-over, 3s) steps(1, end) both; }
#game-over.corre .tacche i:nth-child(2) { animation-name: tacca-2; }
#game-over.corre .tacche i:nth-child(3) { animation-name: tacca-3; }
@keyframes tacca-1 { 0% { background: currentColor; } 33.333%, to { background: transparent; } }
@keyframes tacca-2 { 0% { background: currentColor; } 66.667%, to { background: transparent; } }
@keyframes tacca-3 { 0% { background: currentColor; } 99.9%, to { background: transparent; } }
@media (prefers-reduced-motion: no-preference) {
  #game-over.corre .vai { animation: lampeggia 1s steps(1, end) infinite; }
  @keyframes lampeggia { 50% { visibility: hidden; } }
}

/* Testo solo per il lettore di schermo */
.solo-lettore {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Tasto pausa: casella nell'angolo in alto a sinistra della squadratura. Riceve i tocchi
   anche se il resto della tavola, in partita, li lascia passare alla scena. */
#tasto-pausa {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-right: var(--tratto) solid var(--inchiostro);
  border-bottom: var(--tratto) solid var(--inchiostro);
  background: var(--carta);
  pointer-events: auto;
  touch-action: manipulation;
}
#tasto-pausa svg { width: 16px; height: 18px; overflow: visible; stroke: var(--inchiostro); stroke-width: 4.5; }
#tasto-pausa:active { background: var(--inchiostro); }
#tasto-pausa:active svg { stroke: var(--carta); }
#tasto-pausa:focus-visible { outline-offset: -6px; }

#ruota {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  padding:
    calc(var(--margine) + env(safe-area-inset-top, 0px))
    calc(var(--margine) + env(safe-area-inset-right, 0px))
    calc(var(--margine) + env(safe-area-inset-bottom, 0px))
    calc(var(--margine) + env(safe-area-inset-left, 0px));
  background: var(--giallo);
}
.ruota-riquadro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  border: var(--tratto) solid var(--nero);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}
.ruota-riquadro svg { width: 150px; height: 120px; }
.ruota-riquadro .carta { fill: var(--bianco); }

@media (orientation: landscape) and (max-height: 500px) {
  #ruota { display: block; }
}

/* ---------- Schermi stretti ---------- */
@media (max-width: 380px) {
  .modulo { gap: 5px; font-size: 14px; letter-spacing: .02em; }
}

/* ---------- Schermi bassi (360×640 e simili) ---------- */
@media (max-height: 700px) {
  #titolo { margin-top: 10px; font-size: clamp(50px, 15vw, 64px); }
  .spiega { font-size: 19px; margin-top: 8px; }
  .figura { margin: 6px 0 8px; }
  .azioni-inizio { gap: 8px; }
  .azioni-inizio .ordine { min-height: 58px; }
  .azioni-inizio .errore:empty { margin-top: -8px; }
  /* Verbale compatto: qualifica su due righe, tabella, traguardo, RICHIEDI DEMO e Rigioca
     nel primo schermo anche a 360×640 o con le barre del browser aperte. */
  .esito { padding-top: 10px; }
  #fine-titolo { margin-top: 8px; }
  .qualifica { margin-top: 16px; padding: 8px 10px 9px; }
  #fine-qualifica { margin-top: 4px; font-size: 28px; }
  .verbale > div { padding: 5px 9px 6px; }
  .verbale dd { margin-top: 3px; font-size: 22px; }
  .verbale dd small { font-size: 15px; }
  #fine-traguardo { margin-top: 8px; font-size: 16px; }
  #demo-fine { margin-top: 10px; min-height: 62px; }
  #rigioca { margin-top: 20px; min-height: 50px; }
}

/* ---------- Riduci movimento: nessuno spostamento, restano i cambi di colore ---------- */
@media (prefers-reduced-motion: reduce) {
  .ordine:active:not(:disabled),
  .secondario:active:not(:disabled),
  .contorno:active { transform: none; }
  html { scroll-behavior: auto; }
}

/* privacy */
/* ==========================================================================
   INFORMATIVA (privacy.html): pagina che scorre, stessa tavola.
   Tutto sotto body.privacy: nessuna regola del gioco viene toccata.
   ========================================================================== */

html:has(body.privacy) { height: auto; }
body.privacy {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
  overflow-x: hidden;
}

.informativa {
  max-width: var(--colonna);
  margin: 0 auto;
  padding:
    calc(var(--margine) + env(safe-area-inset-top, 0px))
    calc(var(--margine) + env(safe-area-inset-right, 0px))
    calc(var(--margine) + env(safe-area-inset-bottom, 0px))
    calc(var(--margine) + env(safe-area-inset-left, 0px));
}
.informativa-foglio { border: var(--tratto) solid var(--nero); }  /* squadratura */

.informativa-testa { padding: 14px var(--spazio) 18px; }
.informativa h1 {
  margin-top: 14px;
  font-size: clamp(40px, 12.5vw, 56px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.01em;
}
.informativa .sommario {
  margin-top: 10px;
  font-size: 20px;
  line-height: 1.2;
}
.informativa .ritorno {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  font-size: 19px;
}

.informativa section {
  padding: 16px var(--spazio) 18px;
  border-top: var(--tratto) solid var(--nero);
}
.informativa h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
}
.informativa .numero {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
}
.informativa section p,
.informativa section ul,
.informativa section dl { margin: 10px 0 0; }
.informativa section p,
.informativa section li {
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: break-word;
}
.informativa section strong { font-weight: 700; }
.informativa ul {
  padding: 0;
  list-style: none;
}
.informativa li {
  position: relative;
  padding-left: 22px;
}
.informativa li + li { margin-top: 6px; }
.informativa li::before {  /* quadratino pieno, come un segno di quota */
  content: "";
  position: absolute;
  left: 2px;
  top: .5em;
  width: 9px;
  height: 9px;
  background: var(--nero);
}

/* Scheda del titolare: righe di modulo */
.scheda { border: var(--tratto) solid var(--nero); }
.scheda > div { padding: 8px 10px 10px; }
.scheda > div + div { border-top: var(--tratto-fine) solid var(--nero); }
.scheda dt {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.15;
}
.scheda dd {
  margin: 6px 0 0;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: break-word;
}

/* Dato mancante: targhetta arancio con bordo nero, impossibile da non vedere */
.da-completare {
  display: inline-block;
  max-width: 100%;
  margin: 2px 0;
  padding: 4px 8px;
  border: var(--tratto) solid var(--nero);
  background: var(--arancio);
  color: var(--nero);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.informativa-coda {
  padding: 16px var(--spazio) 20px;
  border-top: var(--tratto) solid var(--nero);
}
.informativa .aggiornata {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
}
.informativa .ritorno-grande {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  text-decoration: none;
}

/* ==========================================================================
   Aggiunte del flusso completo (js/hud.js, js/screens.js, js/main.js)
   ========================================================================== */

/* vita persa: la casella delle vite scatta in arancio (cambio di colore, vale anche con "riduci movimento") */
.riquadro-vite.colpo { animation: colpo-vite .14s steps(1, end); }
@keyframes colpo-vite {
  from { background: var(--arancio); }
  to   { background: var(--arancio); }
}

/* suggerimento della prima partita: una quota sopra l'ape, come nella figura dell'inizio */
#trascina {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 352px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
}
#trascina svg { display: block; width: 180px; height: 14px; overflow: visible; }
@media (max-height: 700px) {
  #trascina { bottom: 318px; }
}

#grazie:focus { outline: none; }

/* transizione fine partita */
/* La tavola si ripiega sulla mezzeria e si riapre sul verbale: un gesto solo, 190 + 250 ms
   (gli stessi tempi stanno in js/screens.js). Solo transform, nessun ricalcolo di layout. */
@media (prefers-reduced-motion: no-preference) {
  body.piega-chiude .tavola,
  body.piega-chiude #scena { animation: piega-chiude .19s cubic-bezier(.55, 0, 1, .7) both; }
  body.piega-apre .tavola { animation: piega-apre .25s cubic-bezier(0, .55, .25, 1) both; }
  @keyframes piega-chiude {
    to { transform: scaleY(.012); }
  }
  @keyframes piega-apre {
    from { transform: scaleY(.012); }
  }
}
/* mentre i risultati si aprono la partita ferma non deve spuntare dietro al foglio */
body.piega-apre #scena { visibility: hidden; }
/* Fuori dalla partita la scena non si vede: nel margine attorno alla squadratura resterebbe il fondo
   dell'ultimo foglio (nero o bianco). Ingresso e fine restano gialli. La misura del canvas non cambia. */
body:not([data-schermata="partita"]) #scena { visibility: hidden; }

/* ==========================================================================
   SEGNI NELLA SCENA (js/segni.js): strato HTML sopra il canvas, stesse misure.
   Compaiono e spariscono di colpo; con movimento consentito fanno un solo scatto.
   ========================================================================== */

#segni {
  display: none;
  position: fixed;
  inset: 0;
  margin: 0 auto;
  width: 100%;
  max-width: var(--colonna);
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
body[data-schermata="partita"] #segni { display: block; }

.segno {
  position: absolute;
  width: max-content;  /* a metà schermo la larghezza disponibile non deve stringere la scritta */
  color: var(--inchiostro);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Riga piccola dei segni: la casella del documento preso, "Ciclo chiuso · +30" */
.segno small {
  display: block;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.segno small[hidden] { display: none; }

/* +10: quota di disegno sopra il punto di presa, con sotto la casella in cui va il documento */
.segno.quota {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -100%);
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.segno.quota small { order: 1; margin-top: 2px; }
.segno.quota::after { order: 2; align-self: stretch; }
.segno.quota::after {
  content: "";
  display: block;
  height: 7px;
  margin-top: 3px;
  border: solid var(--inchiostro);
  border-width: 0 2px 2px;
}

/* −5: targhetta a terra dove il documento è caduto */
.segno.terra { transform: translate(-50%, -100%); }
.segno.terra span {
  display: block;
  padding: 3px 7px 2px;
  border: 2px solid var(--nero);
  background: var(--arancio);
  color: var(--nero);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

/* PRENDI / SCHIVA: targhetta al fianco dei primi oggetti, che cade con loro.
   Ancorata per il bordo vicino all'oggetto: a destra di norma, a sinistra con .sinistra. */
.segno.cartellino { transform: translate(0, -50%); }
.segno.cartellino.sinistra { transform: translate(-100%, -50%); }
.segno.cartellino span {
  display: block;
  padding: 4px 6px 3px;
  border: 2px solid var(--nero);
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.segno.cartellino.prendi span { background: var(--nero); color: var(--giallo); }
.segno.cartellino.schiva span { background: var(--arancio); color: var(--nero); }
/* sui fogli scuri la targhetta nera si stacca dal fondo con il bordo del colore del tratto */
body[data-schermata="partita"][data-tono="scuro"] .segno.cartellino.prendi span { border-color: var(--inchiostro); }

/* +30 · Sbloccato: modulo. In alto nella scena, lontano dal pollice. */
.segno.banner {
  left: 50%;
  top: calc(var(--margine) + 62px);
  transform: translateX(-50%);
  max-width: calc(100% - 2 * var(--margine) - 20px);
  padding: 8px 14px 7px;
  border: var(--tratto) solid var(--nero);
  background: var(--nero);
  color: var(--giallo);
  font-size: clamp(19px, 5.6vw, 24px);
  letter-spacing: .02em;
  text-align: center;
  box-shadow: 0 0 0 3px var(--arancio);  /* cornice a tratto pieno */
}
.segno.banner small { margin-bottom: 5px; font-size: 14px; letter-spacing: .1em; }

/* Timbro (livello nello stesso foglio, nome dell'ondata, BEE.P): per meno di un secondo, non ferma
   il gioco e sta sopra l'ape. Dritto, cornice arancio e scritta centrata dentro; senza fondo, come un
   timbro vero: gli oggetti in caduta (e il gettone che annuncia) restano visibili sotto.
   La spaziatura delle lettere aggiunge aria dopo l'ultima: il margine destro la compensa. */
.segno.timbro {
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%);
  padding: 9px calc(18px - .08em) 7px 18px;
  border: 4px solid var(--arancio);
  background: transparent;
  color: var(--inchiostro);
  font-size: 42px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
  .segno.quota.vivo { animation: quota-sale .6s steps(1, end) forwards; }
  @keyframes quota-sale {
    0%   { transform: translate(-50%, -100%); }
    20%  { transform: translate(-50%, calc(-100% - 10px)); }
    100% { transform: translate(-50%, calc(-100% - 10px)); }
  }
  .segno.banner.vivo { animation: banner-entra .24s steps(1, end); }
  @keyframes banner-entra {
    0%   { transform: translate(-50%, -8px); }
    100% { transform: translate(-50%, 0); }
  }
  .segno.timbro.vivo { animation: timbro-batte .8s steps(1, end); }
  @keyframes timbro-batte {
    0%   { transform: translate(-50%, -50%) scale(1.18); }
    12%  { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(1); }
  }
}

/* ==========================================================================
   TITOLO E SLOGAN (inizio): il punto di Bee.pop è bianco come quello del marchio;
   lo slogan comincia con la stessa targhetta nera della legenda.
   ========================================================================== */

#titolo .punto { color: var(--bianco); }  /* parte del marchio, come .logo-beep .punto */

/* Targhetta: la scritta nera con lettere gialle dei cartellini PRENDI in partita.
   Variante arancio (.rogna) come SCHIVA. */
.targhetta {
  display: inline-block;
  padding: 4px 6px 3px;
  border: 2px solid var(--nero);
  background: var(--nero);
  color: var(--giallo);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.targhetta.rogna { background: var(--arancio); color: var(--nero); }

.slogan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}
.slogan .targhetta { padding: 5px 7px 4px; font-size: 18px; }
.inizio-corpo .spiega { margin-top: 8px; font-size: 19px; }

/* ==========================================================================
   ISTRUZIONI: la legenda della tavola. Solo alla prima partita, tra GIOCA e la partita.
   Le voci si allungano sugli schermi alti; le figure sono i modelli 3D veri resi in PNG
   alla stessa scala (144 px per unità di scena, mostrati a circa 1/4.2).
   ========================================================================== */

body[data-schermata="istruzioni"] #istruzioni { display: flex; }

#istruzioni {
  flex-direction: column;
  background: var(--giallo);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.istruzioni-testa {
  flex: none;
  padding: 14px var(--spazio) 16px;
}
#istruzioni-titolo {
  margin-top: 14px;
  font-size: clamp(44px, 13.5vw, 58px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.01em;
}
#istruzioni-titolo:focus { outline: none; }  /* riceve il fuoco solo per farsi leggere per primo */
.istruzioni-testa .spiega { margin-top: 8px; }

/* Tabella a tutta larghezza come il cartiglio: divisione principale sopra e sotto,
   secondarie fra le voci e fra figura e testo. */
.legenda {
  flex: 1 0 auto;
  display: grid;
  grid-auto-rows: minmax(108px, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--tratto) solid var(--nero);
  border-bottom: var(--tratto) solid var(--nero);
}
.voce {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
}
.voce + .voce { border-top: var(--tratto-fine) solid var(--nero); }

.voce-figura {
  display: grid;
  place-items: center;
  border-right: var(--tratto-fine) solid var(--nero);
}
/* tre oggetti in piramide: uno sopra, due davanti, come appena caduti sul tavolo */
.pila {
  position: relative;
  width: 120px;
  height: 96px;
}
.pila img { position: absolute; display: block; height: auto; }
.pila img:nth-child(1) { left: 31px; top: 0; }
.pila img:nth-child(2) { left: 0; top: 42px; }
.pila img:nth-child(3) { left: 62px; top: 40px; }
.f-fattura  { width: 56px; }
.f-ordine   { width: 54px; }
.f-ddt      { width: 56px; }
.f-scarto   { width: 57px; }
.f-volante  { width: 58px; }
.f-doppione { width: 61px; }
.f-beep     { display: block; width: 84px; height: auto; }

.voce-testo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 12px 12px 12px 14px;
}
.voce h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.05;
}
.voce p {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
/* le tre vite, gli stessi esagoni del cartiglio */
.vite-in-riga {
  display: inline-flex;
  gap: 3px;
  margin-left: 4px;
  vertical-align: -2px;
}
.vite-in-riga svg {
  width: 13px;
  height: 15px;
  fill: var(--nero);
  stroke: var(--nero);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.istruzioni-azione {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--spazio);
}
.istruzioni-azione .errore:empty { margin-top: -10px; }

/* schermi alti: le voci si allungano, le figure crescono con loro */
@media (min-height: 760px) and (min-width: 381px) {
  .voce { grid-template-columns: 148px minmax(0, 1fr); }
  .pila { transform: scale(1.18); }
  .f-beep { width: 98px; }
}
/* schermi stretti */
@media (max-width: 380px) {
  .voce { grid-template-columns: 118px minmax(0, 1fr); }
  .pila { transform: scale(.92); }
  .voce h2 { font-size: 21px; }
}
/* schermi bassi (360×640 e simili) */
@media (max-height: 700px) {
  .slogan { margin-top: 10px; font-size: 22px; }
  .slogan .targhetta { font-size: 17px; }
  .inizio-corpo .spiega { font-size: 18px; margin-top: 6px; }
  .istruzioni-testa { padding-bottom: 12px; }
  #istruzioni-titolo { margin-top: 10px; font-size: clamp(40px, 12.5vw, 52px); }
  .legenda { grid-auto-rows: minmax(104px, 1fr); }
  .voce p { font-size: 16px; }
  .istruzioni-azione { padding: 12px var(--spazio) 14px; }
  .istruzioni-azione .errore:empty { margin-top: -10px; }
}