/* Mag8 — sistema grafico.
   Copia di tokens.json e components/bundle.css dell'artifact "Mag8" (Design System),
   https://claude.ai/artifact/95qifWfuFLM5mXVzGvJYx5 — se cambi qui, cambia anche là.
   Solo variabili e classi m8-: nessuna regola su elementi, così sito e pannello la usano senza conflitti. */

:root {
  /* colore */
  --giallo: #F9D949;
  --ink: #1C1B19;
  --carta: #DBDAD4;
  --carta-chiara: #F4F2EA;
  --bianco: #FFFFFF;
  --rosso: #E0503A;
  --rosso-scuro: #9E2A18;
  --lilla: #C9B8F0;
  --lilla-scuro: #5B4A8A;
  --verde: #8FC79A;
  --foto-vuota: #C4C2B9;
  --ink-attenuato: #4A4843;

  /* caratteri */
  --font-display: Anton, Impact, "Arial Narrow", sans-serif;
  --font-corpo: Archivo, system-ui, sans-serif;
  --font-mano: Caveat, "Segoe Print", cursive;
  --font-dati: "Space Mono", ui-monospace, monospace;

  /* spazi */
  --spazio-1: 8px;
  --spazio-2: 16px;
  --spazio-3: 24px;
  --spazio-4: 32px;
  --spazio-5: 44px;
  --spazio-6: 64px;
  --spazio-7: 88px;

  /* forme */
  --raggio-zero: 0;
  --raggio-tondo: 999px;
  --bordo-2: 2px;
  --bordo-3: 3px;
  --bordo-4: 4px;
  --bordo-6: 6px;
  --ombra-timbro: 6px 6px 0 #1C1B19;
  --ombra-timbro-piccola: 4px 4px 0 #1C1B19;
  --incl-scritta: -2deg;
  --incl-cartellino: 6deg;
  --incl-nessuna: 0deg;
}

/* Mag8 — componenti */
.m8, .m8 * { box-sizing: border-box; }
.m8-maiuscolo { text-transform: uppercase; }

/* Bottone */
.m8-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spazio-1); min-height: 48px; padding: 0 18px; font: 900 16px/1 var(--font-corpo); text-transform: uppercase; text-decoration: none; cursor: pointer; border: var(--bordo-3) solid var(--ink); border-radius: var(--raggio-zero); background: var(--ink); color: var(--giallo); }
.m8-btn:hover { background: var(--carta-chiara); color: var(--ink); }
.m8-btn:focus-visible { outline: 3px solid var(--rosso-scuro); outline-offset: 3px; }
.m8-btn--contorno { background: transparent; color: var(--ink); }
.m8-btn--contorno:hover { background: var(--ink); color: var(--giallo); }
.m8-btn--giallo { background: var(--giallo); color: var(--ink); }
.m8-btn--rosso { background: var(--rosso); color: var(--ink); font-size: 19px; }
.m8-btn--rosso:hover { background: var(--ink); color: var(--rosso); }
.m8-btn--timbro { box-shadow: var(--ombra-timbro); }

/* Cartellino prezzo */
.m8-cartellino { display: inline-block; background: var(--giallo); color: var(--ink); border: var(--bordo-3) solid var(--ink); padding: 8px 16px 8px 24px; font: 400 26px/1 var(--font-display); transform: rotate(var(--incl-cartellino)); }
.m8-cartellino--meno { transform: rotate(-5deg); }

/* Stella NUOVO */
.m8-stella { position: relative; width: 180px; height: 180px; display: inline-flex; align-items: center; justify-content: center; }
.m8-stella svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m8-stella svg polygon { fill: var(--rosso); stroke: var(--ink); stroke-width: 2; }
.m8-stella span { position: relative; font: 400 32px/.95 var(--font-display); text-transform: uppercase; text-align: center; color: var(--ink); transform: rotate(10deg); }

/* Etichetta e pallino live */
.m8-etichetta { font: 700 14px/1.4 var(--font-dati); letter-spacing: 2px; text-transform: uppercase; color: var(--ink); }
.m8-live { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--giallo); padding: 10px 16px; border-radius: var(--raggio-tondo); font: 400 13px/1 var(--font-dati); }
.m8-live::before { content: ""; width: 10px; height: 10px; border-radius: var(--raggio-tondo); background: var(--rosso); }
.m8-timbro-data { display: inline-block; background: var(--ink); color: var(--giallo); font: 400 13px/1 var(--font-dati); padding: 10px 14px; transform: rotate(3deg); }

/* Foto e segnaposto */
.m8-foto { background: var(--foto-vuota); display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font: 400 13px/1.4 var(--font-dati); color: var(--ink); overflow: hidden; }
.m8-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Card prodotto */
.m8-prodotto { position: relative; background: var(--carta); color: var(--ink); padding: 22px; display: flex; flex-direction: column; }
.m8-prodotto .m8-foto { aspect-ratio: 9 / 8; }
.m8-prodotto h3 { font: 400 40px/1 var(--font-display); text-transform: uppercase; margin: 18px 0 4px; }
.m8-prodotto p { font: 400 17px/1.5 var(--font-corpo); margin: 0; }
.m8-prodotto .m8-cartellino { position: absolute; top: 34px; right: -10px; }

/* Ticker */
.m8-ticker { background: var(--ink); color: var(--giallo); font: 400 14px/1 var(--font-dati); letter-spacing: 2px; padding: 11px 0; white-space: nowrap; overflow: hidden; }
.m8-ticker span { display: inline-block; padding-left: 100%; animation: m8-scorri 38s linear infinite; }
@keyframes m8-scorri { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .m8-ticker span { animation: none; padding-left: 16px; } }

/* Testata giornale */
.m8-testata { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: var(--bordo-6) solid var(--ink); border-bottom: var(--bordo-2) solid var(--ink); padding: 14px 0; }
.m8-testata b { font: 400 64px/1 var(--font-display); text-transform: uppercase; }
.m8-testata span { font: 400 15px/1.4 var(--font-dati); }

/* Censura (spoiler) */
.m8-censura { display: flex; flex-direction: column; gap: 10px; }
.m8-censura .m8-barra { height: 22px; background: var(--ink); }
.m8-censura .m8-blocco { height: 160px; background: var(--ink); color: var(--giallo); display: flex; align-items: center; justify-content: center; font: 400 30px/1 var(--font-display); text-transform: uppercase; transform: rotate(var(--incl-scritta)); }

/* Annuncio (enigma) */
.m8-annuncio { border: var(--bordo-6) double var(--ink); background: var(--carta-chiara); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.m8-annuncio label { font: 700 15px/1.3 var(--font-corpo); }
.m8-annuncio input { font: 400 18px var(--font-corpo); min-height: 48px; padding: 0 14px; border: var(--bordo-3) solid var(--ink); border-radius: var(--raggio-zero); background: var(--bianco); color: var(--ink); }
.m8-annuncio input:focus-visible { outline: 3px solid var(--rosso-scuro); outline-offset: 2px; }
.m8-mano { font: 500 34px/1.15 var(--font-mano); margin: 0; }

/* Data evento */
.m8-data { display: flex; gap: 32px; align-items: center; padding: 36px; background: var(--ink); color: var(--giallo); }
.m8-data .m8-quando { font: 400 96px/.9 var(--font-display); }
.m8-data b { display: block; font: 900 28px/1.1 var(--font-corpo); text-transform: uppercase; }
.m8-data .m8-sub { display: block; font: 400 18px/1.5 var(--font-corpo); margin-top: 8px; color: var(--carta); }
.m8-data--rosso { background: var(--rosso); color: var(--ink); border: var(--bordo-4) solid var(--ink); }
.m8-data--rosso .m8-sub, .m8-data--giallo .m8-sub, .m8-data--lilla .m8-sub { color: var(--ink); }
.m8-data--giallo { background: var(--giallo); color: var(--ink); border: var(--bordo-4) solid var(--ink); }
.m8-data--lilla { background: var(--lilla); color: var(--ink); border: var(--bordo-4) solid var(--ink); }