/*
 * SetteGames — POP RIOT / PLAY DIFFERENT.
 * I token vengono da docs/brand/settegames-pop-riot/design-tokens.json:
 * qui sono l'unica copia usata dal sito. Il lime non va mai come testo
 * piccolo su bianco (contrasto 1.1:1): su chiaro si usa l'antracite.
 */
@font-face {
  font-family: "Sora";
  src: url("font/sora.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
/* L'ExtraBold dei titoli è una copia di Sora 800 con la Y ridisegnata: in
   quella originale i bracci sporgono dall'asta e l'incavo ha uno scalino.
   Sorgente e script in docs/brand/settegames-pop-riot/logo/. */
@font-face {
  font-family: "Sora";
  src: url("font/sora-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

:root {
  --lime: #ebff55;
  --magenta: #f53eb5;
  --antracite: #131313;
  --rialzo: #202020;
  --bianco: #ffffff;
  --carta: #f5f5f2;
  --filo-scuro: #454545;
  --filo-chiaro: #e6e6e6;
  --grigio-su-scuro: #b8b8b2;
  --grigio-su-chiaro: #55554f;

  --font: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-card: 16px;
  --r-pannello: 20px;
  --max: 1280px;
  --gutter: clamp(16px, 3vw, 32px);
  --veloce: 150ms;
  --normale: 220ms;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--antracite);
  color: var(--bianco);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 6px; }

.dentro { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.visivo-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Bozza ---------- */
.bozza { background: var(--magenta); color: var(--antracite); font-size: 0.875rem; font-weight: 600; text-align: center; padding: 8px 16px; }
.bozza a { font-weight: 800; }

/* ---------- Pulsanti ---------- */
.tasto {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font: 700 1rem/1 var(--font); text-decoration: none; white-space: nowrap;
  border: 2px solid transparent; cursor: pointer;
  transition: transform var(--veloce) var(--curva), background-color var(--veloce) var(--curva), border-color var(--veloce) var(--curva);
}
.tasto:hover { transform: translateY(-2px); }
.tasto:active { transform: translateY(0); }
.tasto svg { width: 18px; height: 18px; flex: none; }
.tasto.primario { background: var(--lime); color: var(--antracite); }
.tasto.primario:hover { background: #f3ff8f; }
.tasto.fantasma { border-color: var(--filo-scuro); color: var(--bianco); }
.tasto.fantasma:hover { border-color: var(--bianco); }
.tasto.scuro { background: var(--antracite); color: var(--bianco); }
.tasto.scuro:hover { background: #2b2b2b; }
.tasto.contorno-scuro { border-color: var(--antracite); color: var(--antracite); }
.tasto.piccolo { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }

/* ---------- Marchio ---------- */
.marchio { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marchio svg { width: 40px; height: 40px; flex: none; }
.marchio .parola { font-weight: 800; font-size: 1.375rem; letter-spacing: -0.03em; color: var(--bianco); }
.marchio .parola b { color: var(--lime); font-weight: 800; }

/* ---------- Testata ---------- */
.testata { position: sticky; top: 0; z-index: 20; background: rgba(19, 19, 19, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid #262626; }
.testata .dentro { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.menu { display: flex; align-items: center; gap: 4px; }
.menu a:not(.tasto) { padding: 10px 14px; border-radius: 999px; font-weight: 600; font-size: 0.9375rem; text-decoration: none; color: #e9e9e4; transition: background-color var(--veloce) var(--curva); }
.menu a:not(.tasto):hover { background: var(--rialzo); color: var(--bianco); }
.menu .tasto { margin-left: 12px; }
.apri-menu { display: none; }


/* ---------- Sottomenu dei giochi ---------- */
.voce-giochi { position: relative; }
.apri-giochi { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0; border-radius: 999px; background: none; color: #e9e9e4; font: 600 0.9375rem/1 var(--font); cursor: pointer; transition: background-color var(--veloce) var(--curva); }
.apri-giochi:hover, .apri-giochi[aria-expanded="true"] { background: var(--rialzo); color: var(--bianco); }
.apri-giochi svg { width: 16px; height: 16px; transition: transform var(--veloce) var(--curva); }
.apri-giochi[aria-expanded="true"] svg { transform: rotate(180deg); }
.sottomenu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; min-width: 300px; margin: 0; padding: 8px; list-style: none; background: var(--rialzo); border: 1px solid #2f2f2f; border-radius: var(--r-card); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.sottomenu[hidden] { display: none; }
.sottomenu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--bianco); }
.sottomenu a:hover { background: #2b2b2b; }
.sottomenu img, .sottomenu .icona-mini { width: 40px; height: 40px; flex: none; border-radius: 10px; }
.sottomenu .icona-mini { display: inline-flex; align-items: center; justify-content: center; background: var(--lime); color: var(--antracite); }
.sottomenu .icona-mini svg { width: 18px; height: 18px; }
.sottomenu b { display: block; font-weight: 700; font-size: 0.9375rem; }
.sottomenu small { display: block; font-size: 0.8125rem; color: var(--grigio-su-scuro); }
.sottomenu .gruppo { padding: 12px 12px 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grigio-su-scuro); }
.sottomenu .gruppo:first-child { padding-top: 6px; }
.sottomenu .tutti { border-top: 1px solid #2f2f2f; margin-top: 6px; padding-top: 6px; }
.sottomenu .tutti a { justify-content: space-between; font-weight: 700; font-size: 0.9375rem; color: var(--lime); }
.sottomenu .tutti svg { width: 18px; height: 18px; }

/* ---------- Lingua ---------- */
.lingua { display: inline-flex; margin-left: 8px; padding: 3px; border: 1px solid var(--filo-scuro); border-radius: 999px; }
.lingua a { min-width: 40px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px !important; border-radius: 999px; font-size: 0.8125rem !important; font-weight: 700 !important; letter-spacing: 0.06em; text-decoration: none; color: var(--grigio-su-scuro) !important; }
.lingua a[aria-current] { background: var(--bianco); color: var(--antracite) !important; }
.lingua a:not([aria-current]):hover { color: var(--bianco) !important; background: none !important; }

/* ---------- Dove trovarci ---------- */
.trovaci { border-top: 1px solid #222; border-bottom: 1px solid #222; padding: 28px 0; }
.trovaci .dentro { display: flex; align-items: center; gap: 20px 40px; flex-wrap: wrap; }
.trovaci h2 { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #8d8d87; white-space: nowrap; }
.loghi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; margin: 0; padding: 0; list-style: none; flex: 1; }
.loghi a, .loghi .presto { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; text-decoration: none; color: #8d8d87; transition: color var(--veloce) var(--curva); }
.loghi a:hover { color: var(--bianco); }
.loghi svg { width: 24px; height: 24px; flex: none; }
.loghi small { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid #3a3a3a; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 104px); }
.hero .dentro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.occhiello { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grigio-su-scuro); }
.occhiello::before { content: ""; width: 10px; height: 10px; background: var(--magenta); }
.hero h1 { margin: 0; font-weight: 800; font-size: clamp(3.5rem, 7vw, 7.2rem); line-height: 0.92; letter-spacing: -0.012em; font-kerning: none; }
.hero h1 > span { display: block; }
.hero h1 .lime { color: var(--lime); }
.punto { color: var(--magenta); }
.hero .lead { margin: 28px 0 0; font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.hero .supporto { margin: 12px 0 0; max-width: 34em; font-size: 1.0625rem; color: var(--grigio-su-scuro); }
.hero .tasti { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.scena { position: relative; display: flex; align-items: center; justify-content: center; }
.sette-grande { width: min(100%, 520px); height: auto; aspect-ratio: 1; overflow: visible; }
.sette-grande .quadrato { fill: var(--magenta); }

/* ---------- Titoli di sezione ---------- */
.sezione { padding: clamp(64px, 8vw, 112px) 0; }
.testa-sezione { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 44px); }
.testa-sezione h2, .sezione h2 { margin: 0; font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.02; letter-spacing: -0.04em; }
.testa-sezione p { margin: 10px 0 0; max-width: 36em; color: var(--grigio-su-scuro); font-size: 1.0625rem; }

/* ---------- Giochi in primo piano ---------- */
.coppia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.gioco {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--rialzo); color: var(--bianco); border: 1px solid #2c2c2c; border-radius: var(--r-pannello);
  transition: transform var(--normale) var(--curva), border-color var(--normale) var(--curva), box-shadow var(--normale) var(--curva);
}
.gioco:hover { transform: translateY(-4px); border-color: var(--filo-scuro); }
.gioco .copertina { aspect-ratio: 1024 / 500; width: 100%; object-fit: cover; }
.gioco .corpo { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px 28px; flex-grow: 1; }
.etichette { display: flex; flex-wrap: wrap; gap: 8px; }
.etichetta { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--filo-scuro); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #dcdcd6; }
.gioco h3 { margin: 4px 0 0; font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; }
.gioco h3 small { display: block; margin-top: 6px; font-size: 0.95rem; font-weight: 600; letter-spacing: 0; color: var(--lime); }
.gioco p { margin: 0; color: var(--grigio-su-scuro); }
.gioco .tasti { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 10px; }
/* Un gioco che non è ancora sullo store: niente tasto (non porta da nessuna parte), solo il cartello. */
.gioco .arriva { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 52px; margin-top: auto; padding: 0 22px; border: 2px dashed var(--lime); border-radius: 999px; font-weight: 700; color: var(--lime); }
.gioco .arriva svg { width: 18px; height: 18px; flex: none; }

/* ---------- Badge ufficiali degli store (27 ott 2026) ----------
   Mai modificati: i file sono quelli di Google e di Apple. Il PNG di Google ha il
   margine dentro il file (canvas alto 250, badge visibile 190 in italiano e 168 in
   inglese); l'SVG di Apple no. Il badge Apple prende quindi l'altezza visibile di
   quello di Google: i due sembrano alti uguali, e lo spazio fra loro (16 px) supera
   il quarto dell'altezza che Apple chiede come margine. Sul telefono --badge scende
   a 56 px (60 in inglese, così il badge Apple resta sopra i 40 px minimi). */
.negozi { --badge: 72px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.badge-store { display: inline-block; flex-shrink: 0; line-height: 0; }
.badge-store img { display: block; width: auto; height: var(--badge); }
.badge-store img[src$="app-store-it.svg"] { height: calc(var(--badge) * 190 / 250); }
.badge-store img[src$="app-store-en.svg"] { height: calc(var(--badge) * 168 / 250); }
.negozi[hidden], .badge-store[hidden], [data-ios][hidden], [data-ios-presto][hidden] { display: none !important; }
.gioco .negozi { flex-basis: 100%; margin: 0; }
@media (max-width: 480px) {
  .negozi { --badge: 56px; gap: 8px 12px; }
  .negozi:has(img[src$="-en.png"]) { --badge: 60px; }
}

/* ---------- Novità (27 ott 2026) ----------
   Una fascia corta fra «Ci trovi su» e le collezioni: una novità grande (lime) e tre
   righe. Ogni voce è un link al gioco; si aggiorna a mano a ogni uscita, max 4 voci. */
.novita { padding: clamp(48px, 6vw, 80px) 0 0; }
.novita-testa { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: clamp(20px, 3vw, 32px); }
.novita-testa h2 { margin: 0; font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.02; letter-spacing: -0.04em; }
.novita-testa p { margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--magenta); color: var(--antracite); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; }
.novita-corpo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
.novita-gioco { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.novita-freccia { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; transition: transform var(--veloce) var(--curva); }
.novita-freccia svg { width: 18px; height: 18px; }
.novita a:hover .novita-freccia { transform: translateX(3px); }

.novita-grande { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; background: var(--lime); color: var(--antracite); border-radius: var(--r-pannello); position: relative; transition: transform var(--normale) var(--curva), box-shadow var(--normale) var(--curva); }
.novita-grande:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35); }
.novita-grande img { width: 100%; aspect-ratio: 1310 / 300; object-fit: cover; }
.novita-grande .novita-testo { display: block; padding: 22px 84px 26px 26px; }
.novita-grande .novita-gioco { color: #3d4300; }
.novita-grande b { display: block; margin-top: 6px; font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.novita-riga { display: block; margin-top: 8px; font-size: 1rem; font-weight: 600; text-wrap: pretty; }
.novita-grande .novita-freccia { position: absolute; right: 22px; bottom: 26px; background: var(--antracite); color: var(--lime); }

.novita-lista { display: grid; grid-auto-rows: 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
.novita-lista a { display: flex; align-items: center; gap: 16px; height: 100%; padding: 16px 16px 16px 18px; text-decoration: none; color: var(--bianco); background: var(--rialzo); border: 1px solid #2c2c2c; border-radius: var(--r-card); transition: transform var(--normale) var(--curva), border-color var(--normale) var(--curva); }
.novita-lista a:hover { transform: translateY(-3px); border-color: var(--filo-scuro); }
.novita-lista img, .novita-ios { width: 56px; height: 56px; flex: none; border-radius: 14px; }
.novita-ios { display: inline-flex; align-items: center; justify-content: center; background: var(--bianco); color: var(--antracite); }
.novita-ios svg { width: 28px; height: 28px; }
.novita-lista a > span:not([class]) { flex: 1; min-width: 0; }
.novita-lista .novita-gioco { color: var(--grigio-su-scuro); }
.novita-lista b { display: block; margin-top: 3px; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em; text-wrap: pretty; }
.novita-lista .novita-freccia { background: #2b2b2b; color: var(--lime); }

@media (max-width: 860px) {
  .novita-corpo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .novita-grande .novita-testo { padding: 18px 70px 22px 20px; }
  .novita-grande .novita-freccia { right: 16px; bottom: 22px; }
  .novita-lista a { gap: 12px; padding: 14px; }
  .novita-lista img, .novita-ios { width: 48px; height: 48px; border-radius: 12px; }
  .novita-lista b { font-size: 1rem; }
  .novita-lista .novita-freccia { display: none; }
}

/* ---------- Collezioni ---------- */
/* Battle Royale: le schede in fila, copertina a sinistra (un impianto diverso dalla coppia di Settebello). */
.file { display: grid; gap: 24px; }
.gioco.largo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.gioco.largo .copertina { height: 100%; }
.gioco.largo .corpo { justify-content: center; padding: 30px 32px; }
.gioco.largo .tasti, .gioco.largo .arriva { margin-top: 8px; }
.chiara .gioco:hover { border-color: var(--antracite); box-shadow: 0 18px 36px rgba(19, 19, 19, 0.18); }

/* ---------- Minigiochi (fascia lime) ---------- */
.fascia-lime { background: var(--lime); color: var(--antracite); }
.fascia-lime .mini-testa { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.fascia-lime .griglia { margin-top: clamp(48px, 6vw, 80px); }
.fascia-lime .tessera a { border-color: rgba(19, 19, 19, 0.14); }
.fascia-lime .tessera a:hover { box-shadow: 0 14px 30px rgba(19, 19, 19, 0.18); }
.fascia-lime h2 { font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 0.95; }
.fascia-lime p { margin: 20px 0 0; max-width: 30em; font-size: 1.125rem; font-weight: 500; }
.fascia-lime .fatti { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.fascia-lime .fatti li { padding: 6px 14px; border-radius: 999px; background: var(--antracite); color: var(--lime); font-size: 0.875rem; font-weight: 700; }
.fascia-lime .tasti { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.telefono { position: relative; justify-self: center; width: min(300px, 78%); aspect-ratio: 390 / 844; padding: 10px; border-radius: 44px; background: var(--antracite); box-shadow: 14px 14px 0 var(--magenta); transform: rotate(3deg); }
.telefono img { width: 100%; height: 100%; object-fit: cover; border-radius: 34px; }

/* ---------- Tutti i giochi (chiara) ---------- */
.chiara { background: var(--carta); color: var(--antracite); }
.chiara .testa-sezione p { color: var(--grigio-su-chiaro); }
.griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.tessera a { display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none; background: var(--bianco); border: 1px solid var(--filo-chiaro); border-radius: var(--r-card); transition: transform var(--normale) var(--curva), box-shadow var(--normale) var(--curva); }
.tessera a:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(19, 19, 19, 0.12); }
.tessera .figura { aspect-ratio: 4 / 3; overflow: hidden; background: var(--antracite); }
.tessera .figura img { width: 100%; height: 100%; object-fit: cover; }
.tessera .figura.verticale img { object-position: 50% 0%; }
.tessera .testo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 18px; }
.tessera .nome { display: block; font-weight: 800; font-size: 1.1875rem; letter-spacing: -0.02em; }
.tessera .dove { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--grigio-su-chiaro); }
.tessera .freccia { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--antracite); color: var(--lime); transition: transform var(--veloce) var(--curva); }
.tessera a:hover .freccia { transform: translateX(3px); }
.tessera .freccia svg { width: 18px; height: 18px; }

/* 9 minigiochi: file da 3, poi 2, poi 1 (Giorgio, 22/10/2026) */
@media (max-width: 860px) { .griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .griglia { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Chi siamo ---------- */
.chi .dentro { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.chi .intro { margin: 18px 0 0; font-size: 1.125rem; color: var(--grigio-su-scuro); max-width: 30em; }
.patti { display: grid; gap: 14px; margin: 0; }
.patti div { padding: 22px 24px; border-radius: var(--r-card); background: var(--rialzo); border: 1px solid #2c2c2c; }
.patti dt { font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; }
.patti dt::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--magenta); vertical-align: 2px; }
.patti dd { margin: 6px 0 0; color: var(--grigio-su-scuro); }
.contatti { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.contatti p { margin: 0; max-width: 32em; color: var(--grigio-su-scuro); }
.contatti a:not(.tasto) { color: var(--lime); font-weight: 600; }

/* ---------- Piede ---------- */
.piede { border-top: 1px solid #262626; padding: 48px 0 calc(40px + env(safe-area-inset-bottom)); font-size: 0.875rem; color: var(--grigio-su-scuro); }
.piede .dentro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; }
.piede .firma { margin: 14px 0 18px; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; color: var(--bianco); }
.piede .firma span { color: var(--magenta); }
.piede p { margin: 2px 0; }
.piede nav { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.piede nav a { padding: 6px 0; text-decoration: none; color: #e9e9e4; font-weight: 600; }
.piede nav a:hover { color: var(--lime); }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .hero .dentro { grid-template-columns: minmax(0, 1fr); }
  .scena { display: none; }
  .chi .dentro { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Telefono ---------- */
@media (max-width: 860px) {
  .apri-menu {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--filo-scuro);
    background: none; color: var(--bianco); font: 700 0.9375rem/1 var(--font); cursor: pointer;
  }
  .apri-menu svg { width: 18px; height: 18px; }
  .menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px var(--gutter) 20px; background: var(--antracite); border-bottom: 1px solid #262626;
  }
  .menu[hidden] { display: none; }
  .menu a:not(.tasto) { padding: 14px 12px; font-size: 1.0625rem; }
  .menu .tasto { margin: 10px 0 0; }
  .voce-giochi { display: flex; flex-direction: column; }
  .apri-giochi { justify-content: space-between; padding: 14px 12px; font-size: 1.0625rem; border-radius: 12px; }
  .sottomenu { position: static; min-width: 0; margin: 2px 0 6px; box-shadow: none; }
  .lingua { margin: 10px 0 0; align-self: flex-start; }
  .trovaci .dentro { flex-direction: column; align-items: flex-start; }
  .loghi { gap: 4px 24px; }
  .coppia { grid-template-columns: minmax(0, 1fr); }
  .fascia-lime .mini-testa { grid-template-columns: minmax(0, 1fr); }
  .gioco.largo { grid-template-columns: minmax(0, 1fr); }
  .gioco.largo .copertina { height: auto; }
  .gioco.largo .corpo { padding: 26px 28px 28px; }
  .telefono { width: min(240px, 66%); margin-top: 8px; }
  .testa-sezione { flex-direction: column; align-items: flex-start; }
  .piede .dentro { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 861px) { .menu[hidden] { display: flex; } }

@media (max-width: 480px) {
  .hero h1 { font-size: clamp(2.9rem, 15vw, 4.4rem); }
  .hero .tasti .tasto { flex: 1 1 100%; }
  .gioco .corpo { padding: 22px 20px 22px; }
  .gioco .tasti .tasto { flex: 1 1 100%; }
  .gioco .arriva { align-self: stretch; justify-content: center; }
  .gioco.largo .corpo { padding: 22px 20px 22px; }
  .fascia-lime .tasti .tasto { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}