/* =========================================================================
   Arias Poker Lucca: design system
   Palette presa dal brand reale (loghi ufficiali + sala: pareti blu, panni
   neri, sedie dealer rosse): blu Arias come colore dominante, nero come
   base, rosso come accento puntuale (mai come colore primario). Nessun
   font esterno: stack di sistema per zero richieste di rete.
   ========================================================================= */

:root {
  /* colori */
  --ink-950: #050c14;
  --ink-900: #0a1b2c;
  --blue-900: #0e2c48;
  --blue-800: #123a5e;
  --blue-700: #1b4c78;
  --blue-600: #24608f;
  --blue-500: #2f78ac;
  --blue-400: #5599c9;
  --blue-300: #9dc4e3;
  --red-700: #7c1c2c;
  --red-500: #b8213a;
  --red-400: #d4384f;
  --amber-500: #d99a3d;
  --amber-300: #f0c98a;
  --cream-100: #f4f7fb;
  --cream-200: #dce6f0;
  --live-red: #ff4d5e;
  --medal-gold: #e6c15a;
  --medal-gold-soft: #fbe9b8;
  --medal-silver: #d7d7de;
  --medal-silver-soft: #f4f6f8;
  --medal-bronze: #cd8a53;
  --medal-bronze-soft: #f0c496;
  --line: rgba(244, 247, 251, 0.14);
  --line-strong: rgba(244, 247, 251, 0.28);

  /* superfici */
  --bg: var(--ink-950);
  --surface: var(--ink-900);
  --surface-raised: var(--blue-800);
  --text: var(--cream-100);
  --text-muted: rgba(244, 247, 251, 0.7);
  --text-faint: rgba(244, 247, 251, 0.48);

  /* tipografia */
  --font-display: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Consolas", "SFMono-Regular", Menlo, monospace;

  /* spaziature */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 0 0 1px rgba(157, 196, 227, 0.35), 0 8px 24px rgba(85, 153, 201, 0.2);
  --shadow-brand: 0 0 0 1px rgba(47, 120, 172, 0.4), 0 10px 28px rgba(47, 120, 172, 0.35);

  --container: 1180px;
  --transition: 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* Il fondo del sito non e' piu' nero liscio: sotto c'e' un tassello
     ricavato dalla sala, sfocato fino a diventare trama e ripetuto.
     Il velo sopra lo tiene a un sussurro: si sente l'ambiente, non si
     vedono le persone. Il tassello e' specchiato, quindi si ripete
     senza cuciture, e pesa 3 KB. */
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(5,12,20,0.72), rgba(5,12,20,0.72)),
    url("../img/sala-trama.jpg");
  background-repeat: no-repeat, repeat;
  background-size: auto, 300px 300px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure { margin: 0; }
table { border-collapse: collapse; width: 100%; }
input, textarea, select { font: inherit; color: inherit; }

/* overflow orizzontale: mai */
html, body { max-width: 100%; overflow-x: hidden; }

/* focus visibile ovunque */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--blue-300);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -60px;
  background: var(--blue-400); color: var(--ink-950);
  padding: 0.6rem 1rem; border-radius: var(--radius-sm);
  font-weight: 700; z-index: 200; transition: top var(--transition);
}
.skip-link:focus { top: 1rem; }

/* ---------- striscia Arias (le strisce del logo, usate come firma grafica) ---------- */
.stripe-bar {
  height: 5px;
  background: linear-gradient(90deg,
    var(--cream-100) 0%, var(--cream-100) 22%,
    var(--blue-400) 22%, var(--blue-400) 48%,
    var(--blue-900) 48%, var(--blue-900) 76%,
    var(--red-500) 76%, var(--red-500) 100%);
}

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-6); }
@media (max-width: 640px) {
  .section { padding-block: var(--space-7); }
  .container { padding-inline: var(--space-4); }
}

.section-head { max-width: 640px; margin-bottom: var(--space-6); }
.section-head--center { max-width: 640px; margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-300);
  margin-bottom: var(--space-3);
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--blue-400); display: inline-block;
}

h1, .h1 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 1.05; font-size: clamp(2.4rem, 5.5vw, 4.2rem);
}
h2, .h2 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 1.1; font-size: clamp(1.8rem, 3.6vw, 2.6rem);
}
h3, .h3 {
  font-family: var(--font-display); font-weight: 700; line-height: 1.25; font-size: clamp(1.2rem, 2vw, 1.5rem);
}
.lede { font-size: 1.15rem; color: var(--text-muted); max-width: 60ch; }
p.body { color: var(--text-muted); max-width: 65ch; }

.text-gold, .text-accent { color: var(--blue-300); }
.text-muted { color: var(--text-muted); }

/* ---------- bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.9em 1.6em; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  min-height: 44px; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
  border: 1px solid transparent; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
  color: var(--cream-100); box-shadow: var(--shadow-brand);
}
.btn-primary:hover { box-shadow: 0 14px 30px rgba(47, 120, 172, 0.45); }
.btn-outline { border-color: var(--line-strong); color: var(--text); }
.btn-outline:hover { border-color: var(--blue-400); color: var(--blue-300); }
.btn-whatsapp { background: #1f7a52; color: #fff; }
.btn-whatsapp:hover { background: #22885b; }
.btn-sm { padding: 0.6em 1.1em; font-size: 0.8rem; min-height: 38px; }
.btn-block { width: 100%; }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(5, 12, 20, 0.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__bar { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-3); gap: var(--space-4); }
.brand { display: flex; align-items: center; gap: 0.7rem; min-height: 44px; }
.brand__mark { width: 42px; height: 42px; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; text-align: center; }
.brand__name {
  font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: 0.1em;
  font-size: 1.15rem; text-transform: uppercase; color: var(--cream-100);
  text-shadow: 0 0 6px rgba(85, 153, 201, 0.55);
}
.brand__sub { font-size: 0.6rem; letter-spacing: 0.24em; color: var(--text-muted); text-transform: uppercase; margin-top: 0.15rem; }

.nav-toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  width: 22px; height: 2px; background: var(--cream-100); display: block; position: relative; transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

.main-nav__list { display: flex; align-items: center; gap: var(--space-6); }
.main-nav__list a {
  font-family: var(--font-display); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 0.5rem 0; position: relative; color: var(--text-muted);
  transition: color var(--transition);
}
.main-nav__list a:hover, .main-nav__list a[aria-current="page"] { color: var(--cream-100); }
.main-nav__list a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--blue-400);
}
.header-cta { display: flex; align-items: center; gap: var(--space-3); }

/* Il menu diventa a tendina gia' sotto i 1140 pixel: con la voce Main
   Event in piu' le sette voci e i bottoni non ci stavano piu' in riga, e la
   finestra non lo mostrava (il bottone WhatsApp finiva fuori schermo). */
@media (max-width: 1140px) {
  .nav-toggle { display: inline-flex; }
  /* Pannello agganciato sotto la header. Deliberatamente `absolute` e non `fixed`:
     la header ha `backdrop-filter`, e un elemento con quella proprieta' diventa il
     riferimento dei figli `fixed`: un `inset: 65px 0 0 0` finiva percio' calcolato
     dentro la header alta 68px invece che sullo schermo, riducendo il menu a una
     striscia in cui si vedeva solo la prima voce. Con `absolute` + `top: 100%` il
     riferimento e' la header per costruzione, quindi il pannello parte sempre dal suo
     bordo inferiore, con o senza sfocatura. */
  .main-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--ink-950);
    padding: var(--space-6) var(--space-5); border-bottom: 1px solid var(--line);
    /* il pannello parte sotto la header (~73px): lasciandone fuori 5rem non sfora mai
       il bordo basso, nemmeno su un telefono in orizzontale. La prima riga serve ai
       browser che non conoscono dvh, la seconda la sostituisce dove esiste. */
    max-height: calc(100vh - 5rem); max-height: calc(100dvh - 5rem);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--transition), transform var(--transition); }
  .main-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .main-nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .main-nav__list a { font-size: 1.3rem; }
  .header-cta .btn-outline { display: none; }
}

/* ---------- hero ---------- */
/* La trama col monogramma Arias sta sopra la sfumatura (primo strato),
   il testo sta comunque sopra entrambi: niente z-index da governare.
   Sotto a tutto, la foto della sala piena: si intravede e basta,
   perche' sopra passa un velo scuro che tiene il testo leggibile. */
.hero {
  position: relative; overflow: hidden;
  background:
    url("../img/trama-arias.png") repeat,
    linear-gradient(104deg, rgba(5,12,20,0.96) 0%, rgba(5,12,20,0.88) 40%, rgba(5,12,20,0.64) 100%),
    url("../img/sala-hero.jpg") no-repeat center,
    radial-gradient(120% 140% at 80% -10%, var(--blue-800) 0%, var(--ink-950) 58%);
  background-size: 140px 140px, auto, cover, auto;
  padding-block: var(--space-9) var(--space-8);
  border-bottom: 1px solid var(--line);
}
/* sul telefono il testo ci sta sopra per tutta la larghezza: il velo
   va dall'alto in basso, non piu' da sinistra a destra */
@media (max-width: 980px) {
  .hero {
    background-image:
      url("../img/trama-arias.png"),
      linear-gradient(180deg, rgba(5,12,20,0.86) 0%, rgba(5,12,20,0.82) 55%, rgba(5,12,20,0.95) 100%),
      url("../img/sala-hero.jpg"),
      radial-gradient(120% 140% at 80% -10%, var(--blue-800) 0%, var(--ink-950) 58%);
  }
}
/* la seconda foto, per le pagine che aprono con il pubblico */
.hero--pubblico { background-image:
    url("../img/trama-arias.png"),
    linear-gradient(104deg, rgba(5,12,20,0.96) 0%, rgba(5,12,20,0.88) 40%, rgba(5,12,20,0.66) 100%),
    url("../img/sala-pubblico.jpg"),
    radial-gradient(120% 140% at 80% -10%, var(--blue-800) 0%, var(--ink-950) 58%); }
@media (max-width: 980px) {
  .hero--pubblico { background-image:
      url("../img/trama-arias.png"),
      linear-gradient(180deg, rgba(5,12,20,0.92) 0%, rgba(5,12,20,0.86) 55%, rgba(5,12,20,0.96) 100%),
      url("../img/sala-pubblico.jpg"),
      radial-gradient(120% 140% at 80% -10%, var(--blue-800) 0%, var(--ink-950) 58%); }
}

/* ---------- fasce con la sala dietro ---------- */
/* Sezione qualsiasi con la sala di sfondo: si mette dove la pagina
   cambia argomento, per spezzare il nero. Il velo e' piu' fitto che
   nell'apertura perche' qui sopra ci va testo corrente, non titoli. */
.section--sala, .section--pubblico {
  position: relative;
  background-repeat: no-repeat;
  background-size: auto, cover;
  background-position: center;
  border-block: 1px solid var(--line);
}
.section--sala {
  background-image:
    linear-gradient(rgba(5,12,20,0.74), rgba(5,12,20,0.88)),
    url("../img/sala-banda.jpg");
}
.section--pubblico {
  background-image:
    linear-gradient(rgba(5,12,20,0.74), rgba(5,12,20,0.88)),
    url("../img/sala-pubblico.jpg");
}
.hero__ring {
  position: absolute; right: -18%; top: -25%; width: 900px; height: 900px; max-width: none;
  border: 1px solid rgba(157, 196, 227, 0.16); border-radius: 50%; pointer-events: none;
}
.hero__ring--inner { right: -8%; top: -10%; width: 620px; height: 620px; border-color: rgba(184, 33, 58, 0.12); }
.hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); align-items: center; position: relative; }
.hero__title { margin-bottom: var(--space-4); }
.hero__title .accent { color: var(--red-400); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__ring, .hero__ring--inner { opacity: 0.5; }
}

/* ---------- live badge / board ---------- */
.live-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255, 77, 94, 0.14); border: 1px solid rgba(255, 77, 94, 0.4);
  color: #ff9aa4; padding: 0.4rem 0.85rem; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live-red); animation: pulse 1.8s infinite; flex-shrink: 0; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,77,94,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(255,77,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,77,94,0); }
}
.live-pill--idle { background: rgba(157,196,227,0.14); border-color: rgba(157,196,227,0.35); color: var(--blue-300); }
.live-dot--idle { background: var(--blue-300); animation: none; }

.live-board {
  background: linear-gradient(160deg, var(--blue-700), var(--ink-900));
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-md);
}
.live-board__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); gap: var(--space-3); flex-wrap: wrap; }
.live-board__updated { font-size: 0.75rem; color: var(--text-faint); font-family: var(--font-mono); }
/* minmax(0, 1fr) e non 1fr: una colonna "1fr" non scende mai sotto la
   larghezza minima del suo contenuto, e un valore lungo nel riquadro (il
   12/09 "da confermare", in monospazio a 1,7rem) allargava la colonna a 401px
   su un telefono da 375, tagliando il titolo della home. Con minmax(0, 1fr)
   la colonna si stringe e il valore va a capo. */
.live-board__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.stat-tile { background: rgba(5,12,20,0.45); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); min-width: 0; }
.stat-tile__label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.4rem; }
.stat-tile__value { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 700; color: var(--cream-100); line-height: 1.1; overflow-wrap: anywhere; }
.stat-tile__value small { font-family: var(--font-body); font-size: 0.85rem; color: var(--text-muted); font-weight: 400; }

/* ---------- card ---------- */
.card {
  background: var(--surface-raised); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }

/* Scheda cliccabile per intero. Prima rispondeva solo il titolo: 62 pixel
   su 452, e nemmeno sottolineato, quindi sembrava che non funzionasse
   niente. Il link resta uno solo (quello del titolo) e il suo ::after si
   stende su tutta la scheda: nessun link doppio, e il titolo non si sposta. */
.card--apri { position: relative; cursor: pointer; }
.card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card--apri:hover .card__link { color: var(--medal-gold); }
.card__link:focus-visible { outline: 2px solid var(--medal-gold); outline-offset: 3px; }
.card__body { padding: var(--space-5); }
.card__media {
  aspect-ratio: 16/10; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(157,196,227,0.2), transparent 60%),
    linear-gradient(135deg, var(--blue-600), var(--ink-900));
  display: flex; align-items: center; justify-content: center;
}
.card__media--league::before {
  content: "";
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--medal-gold-soft), var(--medal-gold) 60%, #b8933c 100%);
  box-shadow: 0 0 0 1px rgba(230,193,90,0.35), 0 10px 28px rgba(230,193,90,0.35);
}
.card__media--guide::before {
  content: "♠";
  font-family: var(--font-display); font-size: 4rem; line-height: 1;
  color: var(--blue-300); text-shadow: 0 0 24px rgba(85,153,201,0.55);
}
.card__media--strategy .stack-bars { display: flex; align-items: flex-end; gap: 0.5rem; }
.card__media--strategy .stack-bars span {
  width: 14px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--blue-300), var(--blue-500));
  box-shadow: 0 4px 14px rgba(47,120,172,0.35);
}
.card__media--strategy .stack-bars span:nth-child(1) { height: 22px; }
.card__media--strategy .stack-bars span:nth-child(2) { height: 36px; }
.card__media--strategy .stack-bars span:nth-child(3) { height: 50px; }
.card__media--strategy .stack-bars span:nth-child(4) { height: 66px; }
.card__tag {
  position: absolute; top: var(--space-3); left: var(--space-3);
  background: rgba(5,12,20,0.8); border: 1px solid var(--line-strong); color: var(--blue-300);
  font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
}

.grid { display: grid; gap: var(--space-5); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

/* ---------- badge dati d'esempio (colore di avviso neutro, non un colore del brand) ---------- */
.example-banner {
  display: flex; align-items: flex-start; gap: 0.7rem;
  background: rgba(217, 154, 61, 0.1); border: 1px dashed var(--amber-500);
  color: var(--amber-300); padding: var(--space-4); border-radius: var(--radius-md);
  font-size: 0.9rem; margin-bottom: var(--space-6);
}
.example-banner strong { color: var(--amber-300); }
.example-banner[hidden] { display: none; }

.placeholder-field {
  border-bottom: 1px dashed var(--text-faint); color: var(--text-faint); font-style: italic;
}

/* ---------- tabella classifica ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.table-wrap--scroll { max-height: 520px; overflow-y: auto; }
.rank-table { min-width: 640px; }
.rank-table th, .rank-table td { padding: 0.9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); }
.rank-table th {
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); background: rgba(5,12,20,0.6); position: sticky; top: 0;
}
.rank-table tbody tr:hover { background: rgba(47,120,172,0.08); }
.rank-table td:first-child, .rank-table th:first-child { text-align: center; width: 3.2rem; }
.rank-table--top tbody tr:nth-child(1) td:first-child { color: var(--medal-gold); font-weight: 800; }
.rank-table--top tbody tr:nth-child(2) td:first-child { color: var(--medal-silver); font-weight: 800; }
.rank-table--top tbody tr:nth-child(3) td:first-child { color: var(--medal-bronze); font-weight: 800; }
.rank-table .pts { font-family: var(--font-mono); font-weight: 700; color: var(--blue-300); }
.sort-btn { display: inline-flex; align-items: center; gap: 0.3rem; }
.sort-btn::after { content: "↕"; opacity: 0.6; font-size: 0.8em; }

.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: end; margin-bottom: var(--space-7); }
.podium__place { position: relative; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4); text-align: center; }
.podium__place--1 { border-color: var(--medal-gold); box-shadow: 0 0 0 1px rgba(230,193,90,0.35), 0 14px 34px rgba(230,193,90,0.2); order: 2; padding-block: var(--space-7) var(--space-6); z-index: 1; }
.podium__place--2 { border-color: rgba(215,215,222,0.5); order: 1; }
.podium__place--3 { border-color: rgba(205,138,83,0.5); order: 3; }

.podium__medal {
  width: 3.2rem; height: 3.2rem; margin: 0 auto 0.6rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-family: var(--font-display); font-weight: 800;
  font-size: 1.15rem; color: var(--ink-950);
}
.podium__place--1 .podium__medal { width: 4.1rem; height: 4.1rem; font-size: 1.5rem; background: radial-gradient(circle at 35% 30%, var(--medal-gold-soft), var(--medal-gold) 60%, #b8933c 100%); box-shadow: 0 6px 18px rgba(230,193,90,0.45); }
.podium__place--2 .podium__medal { background: radial-gradient(circle at 35% 30%, var(--medal-silver-soft), var(--medal-silver) 60%, #9aa3ac 100%); box-shadow: 0 6px 16px rgba(215,215,222,0.3); }
.podium__place--3 .podium__medal { background: radial-gradient(circle at 35% 30%, var(--medal-bronze-soft), var(--medal-bronze) 60%, #9c6337 100%); box-shadow: 0 6px 16px rgba(205,138,83,0.3); }

.podium__place--1 .h3 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
.podium__place--2 .h3, .podium__place--3 .h3 { font-size: clamp(1.02rem, 1.8vw, 1.2rem); }

.podium__pts { font-family: var(--font-mono); font-weight: 800; font-size: 1.2rem; margin-top: 0.4rem; }
.podium__place--1 .podium__pts { font-size: 1.5rem; color: var(--medal-gold); }
.podium__place--2 .podium__pts { color: var(--medal-silver); }
.podium__place--3 .podium__pts { color: var(--medal-bronze); }

@media (max-width: 640px) { .podium { grid-template-columns: 1fr; } .podium__place--1, .podium__place--2, .podium__place--3 { order: 0; } }

/* ---------- regolamento & premi (classifiche.html) ---------- */
.prize-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
@media (max-width: 768px) { .prize-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .prize-row { grid-template-columns: repeat(2, 1fr); } }

.prize-tile { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-3); text-align: center; }
.prize-tile__badge {
  width: 2.6rem; height: 2.6rem; margin: 0 auto 0.5rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-family: var(--font-display); font-weight: 800;
  font-size: 0.95rem; color: var(--ink-950);
}
.prize-tile--gold .prize-tile__badge { background: radial-gradient(circle at 35% 30%, var(--medal-gold-soft), var(--medal-gold) 60%, #b8933c 100%); box-shadow: 0 6px 16px rgba(230,193,90,0.4); }
.prize-tile--silver .prize-tile__badge { background: radial-gradient(circle at 35% 30%, var(--medal-silver-soft), var(--medal-silver) 60%, #9aa3ac 100%); box-shadow: 0 6px 14px rgba(215,215,222,0.28); }
.prize-tile--bronze .prize-tile__badge { background: radial-gradient(circle at 35% 30%, var(--medal-bronze-soft), var(--medal-bronze) 60%, #9c6337 100%); box-shadow: 0 6px 14px rgba(205,138,83,0.28); }
.prize-tile--blue .prize-tile__badge { background: radial-gradient(circle at 35% 30%, var(--blue-300), var(--blue-500) 60%, var(--blue-700) 100%); box-shadow: 0 6px 14px rgba(47,120,172,0.3); }
.prize-tile__amount { font-family: var(--font-mono); font-weight: 800; font-size: 1.3rem; color: var(--text); line-height: 1; }
.prize-tile__label { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-top: 0.4rem; }

.prize-ladder { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.prize-ladder__row { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1.2rem; border-bottom: 1px solid var(--line); }
.prize-ladder__row:last-child { border-bottom: 0; }
.prize-ladder__row:nth-child(odd) { background: rgba(244,247,251,0.02); }
.prize-ladder__pos { font-family: var(--font-display); font-weight: 800; color: var(--text-muted); }
.prize-ladder__row--gold .prize-ladder__pos { color: var(--medal-gold); }
.prize-ladder__row--silver .prize-ladder__pos { color: var(--medal-silver); }
.prize-ladder__row--bronze .prize-ladder__pos { color: var(--medal-bronze); }
.prize-ladder__amount { font-family: var(--font-mono); font-weight: 700; color: var(--blue-300); }

.points-ladder { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.points-ladder__item {
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 0.5rem 1rem; font-size: 0.85rem; color: var(--text-muted);
  display: inline-flex; gap: 0.4rem; align-items: baseline;
}
.points-ladder__item strong { font-family: var(--font-mono); color: var(--blue-300); }

/* ---------- form ---------- */
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--text); }
.field input, .field textarea, .field select {
  width: 100%; background: var(--ink-900); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem; color: var(--text); min-height: 44px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field-hint { font-size: 0.78rem; color: var(--text-faint); margin-top: 0.3rem; }
.field-error { font-size: 0.82rem; color: #ff8a80; margin-top: 0.3rem; display: none; }
.field.has-error input, .field.has-error textarea { border-color: #ff8a80; }
.field.has-error .field-error { display: block; }

/* ---------- footer ---------- */
/* In chiusura il fondo e' quasi nero e la trama "canterebbe" troppo:
   il velo sopra la riporta allo stesso sussurro che ha nell'apertura. */
.site-footer {
  background:
    linear-gradient(rgba(5,12,20,0.82), rgba(5,12,20,0.94)),
    url("../img/trama-arias.png") repeat,
    url("../img/sala-pubblico.jpg") no-repeat center,
    var(--ink-950);
  background-size: auto, 140px 140px, cover, auto;
  border-top: 1px solid var(--line); padding-block: var(--space-7) var(--space-6);
}
/* In chiusura di pagina il marchio per esteso, quello di Empa, al posto
   del monogramma piu' la scritta: in alto resta la versione compatta. */
.footer-lockup { display: block; width: 168px; max-width: 70%; height: auto; margin-bottom: var(--space-4); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-6); }
.footer-col h4 { font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-300); margin-bottom: var(--space-3); }
.footer-col a, .footer-col p { color: var(--text-muted); font-size: 0.92rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a:hover { color: var(--blue-300); }
.social-row { display: flex; gap: 0.6rem; margin-top: var(--space-3); }
.social-icon {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center; transition: border-color var(--transition), color var(--transition);
  color: var(--text-muted); flex-shrink: 0;
}
.social-icon:hover { border-color: var(--blue-400); color: var(--blue-300); }
.footer-bottom { border-top: 1px solid var(--line); padding-top: var(--space-5); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); font-size: 0.8rem; color: var(--text-faint); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- sticky mobile CTA ---------- */
.mobile-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  background: rgba(5, 12, 20, 0.94); backdrop-filter: blur(8px); border-top: 1px solid var(--line);
}
@media (max-width: 640px) { .mobile-cta-bar { display: flex; } body { padding-bottom: 76px; } }

/* ---------- breadcrumb ---------- */
.breadcrumb { font-size: 0.82rem; color: var(--text-faint); margin-bottom: var(--space-5); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--blue-300); }

/* ---------- utilità ---------- */
.divider { height: 1px; background: var(--line); border: 0; margin-block: var(--space-7); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.pretty-list li { position: relative; padding-left: 1.6rem; color: var(--text-muted); margin-bottom: 0.7rem; }
.pretty-list li::before { content: "♠"; position: absolute; left: 0; color: var(--blue-400); }

.chip-value { font-family: var(--font-mono); }

.countdown { display: flex; gap: var(--space-3); }
.countdown__unit { text-align: center; min-width: 3.4rem; }
.countdown__num { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 700; color: var(--blue-300); }
.countdown__label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }

/* ---------- tabellone torneo (replica il Viewer di kHold'em) ---------- */
.tabellone {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-md);
  background: var(--blue-900);
  background-image:
    repeating-linear-gradient(115deg, rgba(184,33,58,0.14) 0 40px, transparent 40px 120px),
    repeating-linear-gradient(65deg, rgba(27,76,120,0.9) 0 60px, rgba(5,12,20,0.9) 60px 150px);
  padding: var(--space-5);
  color: #f4f7fb;
}
.tabellone__brand { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.tabellone__brand img { width: 52px; height: 52px; flex-shrink: 0; }
.tabellone__title {
  font-family: Georgia, "Times New Roman", serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.6rem, 4vw, 2.6rem); color: var(--cream-100); text-align: center;
  text-shadow: 0 0 14px rgba(85, 153, 201, 0.65), 2px 2px 0 rgba(0,0,0,0.4); flex: 1;
}
.tabellone__row { display: grid; gap: 1px; background: rgba(255,255,255,0.12); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1px; }
.tabellone__row--top { grid-template-columns: repeat(5, 1fr); }
.tabellone__row--bottom { grid-template-columns: repeat(3, 1fr); }
.tabellone__cell { background: rgba(5,12,20,0.55); padding: 0.7rem 0.6rem; text-align: center; }
.tabellone__cell-label { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: #a9c2db; margin-bottom: 0.3rem; }
.tabellone__cell-value { font-family: var(--font-mono); font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.5rem); color: #f4f7fb; }
.tabellone__main { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: var(--space-3); margin-block: var(--space-3); align-items: stretch; }
.tabellone__clock {
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: rgba(5,12,20,0.55); border-radius: var(--radius-md); padding: var(--space-4);
}
.tabellone__clock-value { font-family: var(--font-mono); font-weight: 800; font-size: clamp(2.6rem, 9vw, 5rem); line-height: 1; color: #fff; }
.tabellone__side { display: flex; flex-direction: column; gap: 1px; background: rgba(255,255,255,0.12); border-radius: var(--radius-md); overflow: hidden; }
.tabellone__side .tabellone__cell { text-align: left; }
.tabellone__table { width: 100%; font-family: var(--font-mono); font-size: 0.82rem; }
.tabellone__table th { text-align: left; font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.08em; color: #a9c2db; font-weight: 600; padding-bottom: 0.2rem; }
.tabellone__table td { padding: 0.1rem 0; color: #f4f7fb; }
.tabellone__empty { color: #7e94ac; font-style: italic; font-size: 0.85rem; }

/* ---------- tavolo cash aperto adesso ----------
   Sta nel linguaggio del resto del sito: fondo scuro, accento oro come i
   premi e le medaglie, tipografia display. Il verde puro stonava con la
   palette blu/rosso/oro del brand.
   Il pezzo che racconta di piu' sono i posti disegnati come sedie del tavolo:
   piene quelle occupate, vuote quelle libere. Si capisce in un colpo d'occhio
   quanto e' pieno, senza leggere un numero. */

.tavolo-strip {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0.65rem var(--space-5);
  background:
    linear-gradient(90deg, rgba(230,193,90,0.16), rgba(230,193,90,0.04) 55%, transparent),
    var(--ink-900);
  border-bottom: 1px solid rgba(230,193,90,0.32);
  font-size: 0.92rem;
}
.tavolo-strip__dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--medal-gold);
  box-shadow: 0 0 0 4px rgba(230,193,90,0.16); flex-shrink: 0;
  animation: pulse 1.8s infinite;
}
.tavolo-strip__testo { flex: 1; min-width: 0; }
.tavolo-strip__testo strong {
  font-family: var(--font-display); letter-spacing: 0.01em; color: var(--medal-gold);
}
.tavolo-strip__blinds,
.tavolo-strip__posti { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-muted); }
.tavolo-strip__posti strong { color: var(--cream-100); font-family: var(--font-mono); }
.tavolo-strip__cta { flex: none; }
/* la striscia e' un link: si comporta come tale, ma senza sottolineature */
a.tavolo-strip { text-decoration: none; color: inherit; transition: background var(--transition); }
a.tavolo-strip:hover { background: linear-gradient(90deg, rgba(230,193,90,0.24), rgba(230,193,90,0.06) 55%, transparent), var(--ink-900); }

/* come funziona il tavolo: sotto il tabellone, solo l'essenziale */
.tavolo-info {
  margin-top: var(--space-5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.tavolo-info__titolo {
  font-family: var(--font-display); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--medal-gold);
  margin-bottom: var(--space-4);
}
.tavolo-info__lista {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4); margin: 0;
}
.tavolo-info__voce dt {
  font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.2rem;
}
.tavolo-info__voce dd {
  margin: 0; font-family: var(--font-mono); font-weight: 700;
  color: var(--cream-100); font-size: 1.05rem; line-height: 1.3;
}
.tavolo-info__mappa {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--line); width: 100%;
  color: var(--blue-300); font-size: 0.92rem;
}
.tavolo-info__mappa svg { width: 18px; height: 18px; flex: none; }
.tavolo-info__mappa:hover { color: var(--cream-100); }

@media (max-width: 700px) {
  .tavolo-strip { flex-wrap: wrap; gap: var(--space-2); padding-inline: var(--space-4); }
  .tavolo-strip__testo { flex-basis: 100%; }
  .tavolo-strip__cta { width: 100%; }
}

/* l'intestazione e' fissa in alto: senza questo, arrivando da #tavolo il
   riquadro finirebbe mezzo nascosto sotto il menu */
#tavolo { scroll-margin-top: 90px; }

/* I tavoli aperti. Al telefono uno sotto l'altro: le dieci sedie hanno
   bisogno di tutta la larghezza per restare leggibili. Da schermo largo si
   affiancano, se no due riquadri da mille pixel farebbero una colonna vuota
   lunga il doppio del necessario. Con un tavolo solo, auto-fit lo lascia
   pieno: la pagina resta identica a com'e' adesso. */
.tavoli-lista { display: grid; gap: var(--space-4); }
@media (min-width: 860px) {
  .tavoli-lista { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
}

.tavolo-card {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(230,193,90,0.16), transparent 55%),
    var(--surface);
  border: 1px solid rgba(230,193,90,0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 0 0 1px rgba(230,193,90,0.08), 0 16px 40px rgba(0,0,0,0.45);
}
/* In home la scheda del tavolo e' tutta cliccabile e porta in Sala & Tornei.
   Il link e' steso sopra la scheda; i pulsanti WhatsApp e Chiama vengono
   alzati sopra di lui, se no li coprirebbe e non si potrebbe piu' scrivere
   alla sala. */
.tavolo-card--vai { cursor: pointer; transition: border-color .18s ease, transform .18s ease; }
.tavolo-card__vai { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.tavolo-card--vai .tavolo-card__cta { position: relative; z-index: 1; }
.tavolo-card--vai:hover { border-color: rgba(230,193,90,0.6); }
.tavolo-card__vai:focus-visible {
  outline: 2px solid var(--medal-gold); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) { .tavolo-card--vai { transition: none; } }

.tavolo-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4);
}
.tavolo-card__pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--medal-gold);
  background: rgba(230,193,90,0.12); border: 1px solid rgba(230,193,90,0.35);
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
}
.tavolo-card__pill .live-dot { background: var(--medal-gold); }
.tavolo-card__meta { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
.tavolo-card__blinds {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted);
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0.2rem 0.6rem;
}
.tavolo-card__nome {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.1;
  margin-bottom: var(--space-2);
}

/* i posti del tavolo: omino dove c'e' qualcuno, sedia vuota dove c'e' spazio */
/* Il tavolo disegnato (solo in Sala & Tornei). E' un SVG con viewBox, quindi
   si adatta da solo alla larghezza: niente misure fisse da rincorrere. Il
   limite serve sugli schermi larghi, se no un tavolo da mille pixel sembra
   un poster. */
.tavolo-disegno {
  display: block; width: 100%; max-width: 460px; height: auto;
  margin: var(--space-3) auto var(--space-4);
}

/* Sul telefono il disegno esce dai margini della scheda e arriva ai bordi:
   sono 48px in piu' di larghezza, e a quella misura contano tutti. Il testo
   sul panno cresce da 15 a 17 unita', se no a 320px verrebbe alto 10 pixel
   e sarebbe li' senza potersi leggere. */
@media (max-width: 560px) {
  .tavolo-disegno {
    width: calc(100% + var(--space-5) * 2);
    margin-inline: calc(var(--space-5) * -1);
  }
  .tavolo-disegno text { font-size: 17px; }
}

.tavolo-sedie { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-block: var(--space-4) var(--space-3); }
.tavolo-posto {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
}
.tavolo-posto svg { width: 24px; height: 24px; display: block; }
.tavolo-posto--occupato {
  background: rgba(230,193,90,0.14);
  border: 1px solid rgba(230,193,90,0.4);
  color: var(--medal-gold);
}
.tavolo-posto--occupato svg { fill: currentColor; }
.tavolo-posto--libero {
  background: rgba(5,12,20,0.5);
  border: 1px dashed rgba(244,247,251,0.22);
  color: var(--text-faint);
}

/* su schermo stretto i dieci posti devono restare su UNA riga: sette piu' tre
   non si legge come un tavolo, dieci in fila si'. */
@media (max-width: 480px) {
  .tavolo-sedie { gap: 2px; }
  .tavolo-posto { width: 25px; height: 25px; border-radius: 4px; }
  .tavolo-posto svg { width: 17px; height: 17px; }
}

.tavolo-card__riga {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem var(--space-4);
  font-size: 0.95rem; color: var(--text-muted);
}
.tavolo-card__riga strong { color: var(--cream-100); font-family: var(--font-mono); font-weight: 700; }
.tavolo-card__liberi strong { color: var(--medal-gold); font-size: 1.15rem; }
.tavolo-card__nota { color: var(--text-faint); font-size: 0.88rem; margin-top: var(--space-2); }
.tavolo-card__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
.tavolo-card__cta .btn { flex: 1 1 auto; }

/* ---------- chi sale e chi scende in classifica ----------
   Solo posizioni, mai cifre: vale la stessa regola del resto del sito. */
.movimenti { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) { .movimenti { grid-template-columns: 1fr; } }
.movimenti__col {
  background: rgba(5,12,20,0.45); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
}
.movimenti__title {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-3);
}
.movimenti__col--su .movimenti__title { color: var(--medal-gold); }
.movimenti__col--giu .movimenti__title { color: var(--text-faint); }
.movimenti__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); padding: 0.3rem 0; font-size: 0.88rem;
}
.movimenti__row + .movimenti__row { border-top: 1px solid var(--line); }
.movimenti__nome { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.movimenti__pos { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); white-space: nowrap; }
.movimenti__delta { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
.movimenti__col--su .movimenti__delta { color: var(--medal-gold); }
.movimenti__col--giu .movimenti__delta { color: var(--red-400); }

/* ---------- cerca il tuo nome in classifica ----------
   Con centoquaranta giocatori, trovarsi voleva dire scorrere due tabelle.
   La ricerca filtra le righe gia' presenti in pagina: funziona anche se il
   JavaScript che scarica i dati non parte, perche' le prime trenta righe
   sono scritte nell'HTML. */
.rank-search { max-width: 420px; margin: 0 0 var(--space-5); }
.rank-search label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--text); }
.rank-search input {
  width: 100%; background: var(--ink-900); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; color: var(--text); min-height: 44px;
}
.rank-search input:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; }
.rank-search__esito { margin-top: 0.6rem; font-size: 0.92rem; color: var(--text-muted); }
.rank-search__esito strong { color: var(--medal-gold); font-family: var(--font-mono); }
.rank-search__esito[hidden] { display: none; }
.rank-table tr[data-fuori] { display: none; }
.rank-table tr[data-trovato] td { background: rgba(230,193,90,0.10); }
.rank-table tr[data-trovato] td:first-child { box-shadow: inset 3px 0 0 var(--medal-gold); }

/* ---------- classifica finale: vincitori e finalisti ----------
   A stagione chiusa la pagina apre con un riquadro dorato che contiene il
   podio, la data del Torneo Finale e i trenta qualificati. Solo nomi e
   posizioni, come nel resto del sito: niente cifre per giocatore. */
.finale {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(230,193,90,0.16), transparent 55%),
    var(--surface-raised);
  border: 1px solid rgba(230,193,90,0.45);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  margin-bottom: var(--space-7);
  box-shadow: 0 0 0 1px rgba(230,193,90,0.15), 0 18px 44px rgba(0,0,0,0.35);
}
.finale__head { max-width: 640px; margin-bottom: var(--space-6); }
.finale__title { font-family: var(--font-display); font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; font-size: clamp(1.55rem, 3.6vw, 2.4rem); margin-bottom: var(--space-3); }
.finale__data {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem;
  margin-top: var(--space-4); padding: 0.5rem 0.95rem;
  background: rgba(230,193,90,0.12); border: 1px solid rgba(230,193,90,0.45); border-radius: 999px;
  font-family: var(--font-mono); font-weight: 800; color: var(--medal-gold); white-space: normal;
}
.finale__data span { white-space: nowrap; }
.finale__data small { font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.finale .podium { margin-bottom: var(--space-4); }
.finale__nota { color: var(--text-muted); margin-bottom: var(--space-6); }
.finale__nota strong { color: var(--text); }
.finale__sub { margin-bottom: var(--space-2); }

/* I 30 in tre colonne da dieci, su telefono una colonna sola. */
.finalisti {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(10, auto);
  column-gap: var(--space-5);
}
.finalisti__row { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; padding: 0.45rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.finalisti__pos { flex: none; width: 2rem; text-align: right; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-faint); }
.finalisti__row--premiato .finalisti__pos { color: var(--medal-gold); font-weight: 800; }
.finalisti__row--premiato .finalisti__nome { color: var(--text); font-weight: 700; }
.finalisti__nome { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 820px) { .finalisti { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(15, auto); } }
@media (max-width: 520px) {
  .finale { padding: var(--space-5) var(--space-4); }
  .finalisti { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(30, auto); }
}

/* ---------- archivio risultati: due colonne affiancate ----------
   Una tabella a cinque colonne, a meta' larghezza, diventa illeggibile: ogni
   evento e' quindi una riga con il nome in evidenza e i numeri sotto. Le due
   liste stanno una accanto all'altra su schermo largo, una sopra l'altra sul
   telefono. */
.archivio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 900px) { .archivio-grid { grid-template-columns: 1fr; } }

.archivio {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column; max-height: 720px;
}
.archivio__head {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
}
.archivio__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 1rem; margin: 0;
}
.archivio__count { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-faint); white-space: nowrap; }
.archivio__hint { padding: 0 var(--space-5) var(--space-3); color: var(--text-faint); font-size: 0.8rem; }
.archivio__body { overflow-y: auto; padding: var(--space-2) var(--space-3) var(--space-4); }

/* la striscia colorata in cima distingue le due liste a colpo d'occhio */
.archivio--main { border-top: 3px solid var(--medal-gold); }
.archivio--main .archivio__title { color: var(--medal-gold); }
.archivio--week { border-top: 3px solid var(--blue-400); }
.archivio--week .archivio__title { color: var(--blue-300); }

.evento {
  padding: var(--space-3); border-radius: var(--radius-md);
  border: 1px solid transparent; transition: background var(--transition), border-color var(--transition);
}
.evento + .evento { border-top: 1px solid var(--line); border-radius: 0; }
.evento:hover { background: rgba(157,196,227,0.06); border-color: var(--line); border-radius: var(--radius-md); }
.evento__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: 0.2rem; }
.evento__data { font-family: var(--font-mono); font-size: 0.78rem; color: var(--blue-300); white-space: nowrap; }
.evento__ed { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); white-space: nowrap; }
.evento__nome { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; line-height: 1.25; margin-bottom: 0.35rem; }
.evento__dati { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.82rem; color: var(--text-muted); }
.evento__dato strong { color: var(--text); font-family: var(--font-mono); font-weight: 700; }
.archivio--main .evento__dato--premi strong { color: var(--medal-gold); }

/* il piu' grosso della lista, messo in evidenza */
.evento--top { background: linear-gradient(135deg, rgba(212,168,83,0.12), transparent 70%); border-color: rgba(212,168,83,0.3); border-radius: var(--radius-md); }
.evento--top .evento__nome { color: var(--medal-gold); }
.evento__badge {
  display: inline-block; font-family: var(--font-display); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-950);
  background: var(--medal-gold); padding: 0.1rem 0.45rem; border-radius: var(--radius-pill);
  margin-left: 0.4rem; vertical-align: middle;
}

/* Pausa: il tabellone di sala scrive "Break" al posto del prossimo livello.
   Invece di lasciare una casella spenta, la trasformiamo nel momento più
   invitante della serata: è quando in sala si sta al bancone a commentare. */
.tabellone__cell--break .tabellone__cell-value {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  color: var(--medal-gold);
}
.tabellone__cell--break .icon-coffee { flex: none; }
.live-pill--break {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(212,168,83,0.16); border-color: rgba(212,168,83,0.4);
  color: var(--medal-gold);
}
.live-pill--break .icon-coffee { width: 1rem; height: 1rem; }
.icon-coffee { width: 1.15em; height: 1.15em; }
.icon-coffee .steam { opacity: 0.85; animation: coffee-steam 2.6s ease-in-out infinite; }
.icon-coffee .steam:nth-of-type(2) { animation-delay: 0.5s; }
.icon-coffee .steam:nth-of-type(3) { animation-delay: 1s; }
@keyframes coffee-steam {
  0%, 100% { opacity: 0.15; transform: translateY(1px); }
  50%      { opacity: 0.9;  transform: translateY(-1.5px); }
}
.tabellone__break {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-3); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(212,168,83,0.16), rgba(5,12,20,0.55));
  border: 1px solid rgba(212,168,83,0.35);
}
.tabellone__break .icon-coffee { width: 2.1rem; height: 2.1rem; color: var(--medal-gold); }
.tabellone__break-title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em;
  color: var(--medal-gold); margin-bottom: 0.15rem;
}
.tabellone__break-text { color: #d7e3ef; font-size: 0.92rem; line-height: 1.45; }
/* Ultima ora per iscriversi: stesso riquadro, tono piu' acceso. E' il
   momento in cui chi guarda da casa decide se muoversi. */
.tabellone__break--urgente {
  background: linear-gradient(135deg, rgba(212,168,83,0.30), rgba(5,12,20,0.65));
  border-color: rgba(212,168,83,0.65);
}
.tabellone__break--urgente .tabellone__break-title { font-size: 1.08rem; }
/* Riga "ancora X per iscriversi" nel pannello compatto in cima alla pagina */
.live-board__lastcall {
  margin-top: 0.85rem; padding: 0.55rem 0.8rem;
  border-radius: var(--radius-md);
  background: rgba(212,168,83,0.12);
  border: 1px solid rgba(212,168,83,0.35);
  color: #e6eef7; font-size: 0.92rem; line-height: 1.4;
}
.live-board__lastcall strong { color: var(--medal-gold); }
@media (prefers-reduced-motion: reduce) {
  .icon-coffee .steam { animation: none; opacity: 0.7; }
}
@media (max-width: 560px) {
  .tabellone__break { flex-direction: column; text-align: center; gap: var(--space-2); }
}
@media (max-width: 760px) {
  .tabellone__row--top { grid-template-columns: repeat(2, 1fr); }
  .tabellone__main { grid-template-columns: 1fr; }
  .tabellone__row--bottom { grid-template-columns: 1fr; }
  .tabellone__brand img { width: 38px; height: 38px; }

  /* Solo da telefono: l'orologio è la cosa che si guarda di più durante la
     serata, quindi va in cima, grande. Il resto segue sotto. Il desktop non
     entra mai in questo blocco, resta l'impaginazione originale a 3 colonne.

     Deliberatamente SENZA display:contents: ha bug noti su Safari iOS con
     contenuto che si aggiorna di continuo (esattamente il caso del
     tabellone, riscritto ogni pochi secondi): a volte il browser non
     ridisegna i "figli sfuggiti" finché qualcos'altro non forza un repaint,
     lasciando celle vuote a intermittenza. Qui invece .tabellone__main resta
     un vero contenitore flex proprio, con l'orologio riordinato SOLO al suo
     interno: nessun figlio scappa dal proprio genitore DOM. */
  .tabellone { display: flex; flex-direction: column; }
  .tabellone__brand { order: 0; }
  .tabellone__main {
    order: 1; display: flex; flex-direction: column;
    grid-template-columns: none; /* sovrascrive la regola grid di sopra */
  }
  .tabellone__clock {
    order: 0; width: 100%; margin-bottom: var(--space-3);
    padding: var(--space-4) var(--space-3);
  }
  .tabellone__clock-value { font-size: clamp(4rem, 24vw, 6.5rem); }
  .tabellone__side--left { order: 1; margin-bottom: 1px; }
  .tabellone__side--right { order: 2; margin-bottom: 1px; }
  .tabellone__row--top { order: 2; margin-bottom: 1px; }
  .tabellone__row--bottom { order: 3; }
  .tabellone__break { order: 4; }

  /* Il riquadro "Ingressi" non serve da telefono: troppo spazio per un dato
     che chi guarda dal vivo in sala non consulta da lì. Resta su desktop. */
  .tabellone__cell--entries { display: none; }
}

/* ---------- glow neon (richiama l'insegna reale in sala) ---------- */
.neon-glow {
  color: var(--cream-100);
  text-shadow: 0 0 6px rgba(85, 153, 201, 0.6), 0 0 22px rgba(85, 153, 201, 0.4);
}


/* ============================================================
   ARIAS MYSTERY BOUNTY: la pagina del main event
   Grafiche di Empa (sfondo e lockup del titolo) sopra la stessa
   impalcatura del resto del sito: stessi riquadri, stessi bottoni,
   stessi spazi. Cambia la pelle, non la struttura.
   ============================================================ */
/* Tutta la pagina sta dentro la grafica: lo sfondo e' un velo fisso dietro a
   tutto, non un'immagine della sola testata. Si usa uno strato in position
   fixed invece di background-attachment: fixed, che su iPhone scatta. */
.tema-mb { background: #060d18; }
.tema-mb::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background: #0a1526 url("../img/mb-sfondo.jpg") center / cover no-repeat;
}
.tema-mb::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,13,24,0.72) 0%, rgba(6,13,24,0.88) 45%, rgba(6,13,24,0.94) 100%);
}
/* le sezioni diventano trasparenti: sotto si vede la citta' nella nebbia */
.tema-mb .section { background: transparent; }
.tema-mb .section--velo { background: rgba(6,13,24,0.55); border-block: 1px solid rgba(230,193,90,0.22); }
/* riquadri e tabelle un po' traslucidi, cosi' il fondo respira */
.tema-mb .stat-tile, .tema-mb .mb-prezzo, .tema-mb .busta,
.tema-mb .mb-prenota, .tema-mb .mb-struttura > summary { background: rgba(10,22,38,0.78); }
.tema-mb .prize-ladder__row { background: rgba(10,22,38,0.6); }
.tema-mb .eyebrow::before { background: var(--medal-gold); }
.tema-mb .eyebrow { color: var(--medal-gold); }
.tema-mb .h2 { text-shadow: 0 2px 18px rgba(0,0,0,0.5); }
.tema-mb .site-footer { background: rgba(6,13,24,0.92); }

/* il sigillo dietro alle buste */
.mb-sigillo {
  display: block; width: 110px; height: auto; margin: 0 auto var(--space-4);
  border-radius: 50%; opacity: 0.9;
  box-shadow: 0 0 0 1px rgba(230,193,90,0.35), 0 14px 34px rgba(0,0,0,0.45);
}

.mb-hero {
  position: relative;
  padding-block: var(--space-7) var(--space-7);
  border-bottom: 1px solid rgba(230,193,90,0.25);
}
/* il velo scuro: senza, il testo bianco sulla nebbia chiara non si legge */
.mb-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(47,120,172,0.22), transparent 60%);
}
.mb-hero > .container { position: relative; }
.mb-hero__titolo { display: block; width: 100%; max-width: 520px; height: auto; margin: var(--space-4) 0 var(--space-2); }
.mb-hero__quando {
  display: inline-flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; align-items: baseline;
  padding: 0.5rem 1rem; border-radius: 999px;
  background: rgba(230,193,90,0.12); border: 1px solid rgba(230,193,90,0.5);
  font-family: var(--font-mono); font-weight: 800; color: var(--medal-gold);
}
.mb-hero__quando small { font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.mb-hero .lede { color: #e8eef6; }

/* i tre prezzi: quello buono si vede da lontano */
.mb-prezzi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); }
.mb-prezzo {
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4); text-align: center;
}
.mb-prezzo--top { border-color: rgba(230,193,90,0.55); box-shadow: 0 0 0 1px rgba(230,193,90,0.2), 0 12px 30px rgba(0,0,0,0.3); }
.mb-prezzo__quando { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); min-height: 2.4em; }
.mb-prezzo__cifra { font-family: var(--font-mono); font-weight: 800; font-size: 2.6rem; line-height: 1.1; color: var(--text); margin: 0.3rem 0 0.2rem; }
.mb-prezzo--top .mb-prezzo__cifra { color: var(--medal-gold); }
.mb-prezzo__nota { font-size: 0.85rem; color: var(--text-muted); }

/* le venti buste */
.buste-griglia { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--space-3); }
.busta {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  background: rgba(5,12,20,0.5); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 0.7rem 0.4rem;
}
.busta__icona { width: 28px; height: auto; fill: none; stroke: currentColor; stroke-width: 1.4; color: var(--text-faint); }
.busta__valore { font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; color: var(--text-muted); }
.busta--oro { border-color: var(--medal-gold); background: rgba(230,193,90,0.12); box-shadow: 0 0 0 1px rgba(230,193,90,0.3), 0 10px 26px rgba(230,193,90,0.16); }
.busta--oro .busta__icona, .busta--oro .busta__valore { color: var(--medal-gold); }
.busta--oro .busta__valore { font-size: 1.15rem; }
.busta--argento { border-color: rgba(215,215,222,0.55); }
.busta--argento .busta__icona, .busta--argento .busta__valore { color: var(--medal-silver); }
.busta--alta .busta__valore { color: var(--blue-300); }

/* struttura, dentro una fisarmonica: e' lunga e non serve a tutti */
.mb-struttura > summary {
  cursor: pointer; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface-raised); font-weight: 600; color: var(--text);
}
.mb-struttura > summary:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; }
.mb-struttura tr.liv-stacco td { color: var(--text-faint); font-style: italic; background: rgba(5,12,20,0.4); }

/* prenotazione: tre scelte e un bottone che si riempie da solo */
.mb-prenota { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); }
.mb-prenota__righe { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.mb-prenota label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--text); }
.mb-prenota input, .mb-prenota select {
  width: 100%; background: var(--ink-900); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem; color: var(--text); min-height: 44px;
}
.mb-prenota input:focus-visible, .mb-prenota select:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; }
.mb-prenota__cena { display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--space-4); color: var(--text-muted); }
.mb-prenota__cena input { width: auto; min-height: 0; }

/* la striscia che porta qui dalle altre pagine */
.mb-striscia {
  position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(230,193,90,0.4); background: #0a1526; text-decoration: none;
}
.mb-striscia img { display: block; width: 100%; height: auto; }
.mb-striscia__testo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); background: rgba(5,12,22,0.75);
}
.mb-striscia__quando { font-family: var(--font-mono); font-weight: 800; color: var(--medal-gold); }
.mb-striscia__vai { color: var(--text); font-weight: 600; }
.mb-striscia:hover .mb-striscia__vai { color: var(--medal-gold); }

@media (max-width: 560px) {
  .mb-hero { padding-block: var(--space-6); }
  .mb-prenota { padding: var(--space-4); }
  .buste-griglia { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--space-2); }
}


/* ============================================================
   SCHEDE TORNEO CON IL LORO MARCHIO
   Un torneo che ha una sua identita' grafica (il MercoleDeep, per
   primo) porta il logo al posto del nome scritto e si veste di
   conseguenza. Il resto della scheda non cambia: stessi dati,
   stesse righe, stessa posizione, cosi' il calendario resta
   leggibile a colpo d'occhio anche con dentro marchi diversi.
   ============================================================ */
/* Il marchio e' limitato in altezza, non in larghezza: i lockup di Empa
   hanno proporzioni diverse (ARIAS Battle sta su due righe, il MercoleDeep
   su una lunga) e senza questo vincolo le schede verrebbero alte diverse. */
.card__marchio { margin: 0 0 .5rem; line-height: 0; }
.card__marchio img {
  display: block; width: auto; height: auto;
  max-width: 210px; max-height: 96px;
}
/* Ogni evento porta il suo colore in --ev. Chi non lo dichiara resta oro,
   il colore di casa: cosi' un torneo nuovo funziona anche senza tema. */
.card--ev {
  --ev: var(--medal-gold);
  --ev-velo: rgba(230,193,90,0.12);
  --ev-bordo: rgba(230,193,90,0.45);
  --ev-tag: rgba(230,193,90,0.40);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--ev-velo), transparent 60%),
    linear-gradient(180deg, #11131a 0%, #080a0f 100%);
  border-color: var(--ev-bordo);
}
.card--ev .chip-value { color: var(--ev); }
.card--ev .eyebrow { color: var(--ev); }
.card--ev .eyebrow::before { background: var(--ev); }
.card--ev .card__tag { border-color: var(--ev-tag); color: var(--ev); }
/* nella scheda grande il marchio puo' respirare di piu' */
.card--ev .cluster .card__marchio img { max-width: 240px; max-height: 108px; }

/* I colori vengono dai marchi di Empa, schiariti quel tanto che basta
   per restare leggibili sul fondo scuro delle schede. */
.card--ev-classic    { --ev:#35C06A; --ev-velo:rgba(53,192,106,0.14);  --ev-bordo:rgba(53,192,106,0.42);  --ev-tag:rgba(53,192,106,0.38); }
.card--ev-battle     { --ev:#8390FF; --ev-velo:rgba(131,144,255,0.16); --ev-bordo:rgba(131,144,255,0.45); --ev-tag:rgba(131,144,255,0.40); }
.card--ev-libero     { --ev:#F2955E; --ev-velo:rgba(242,149,94,0.13);  --ev-bordo:rgba(242,149,94,0.40);  --ev-tag:rgba(242,149,94,0.36); }
.card--ev-omaha      { --ev:#6FD8D0; --ev-velo:rgba(111,216,208,0.13); --ev-bordo:rgba(111,216,208,0.40); --ev-tag:rgba(111,216,208,0.36); }
.card--ev-turbo      { --ev:#E2574C; --ev-velo:rgba(226,87,76,0.14);   --ev-bordo:rgba(226,87,76,0.42);   --ev-tag:rgba(226,87,76,0.38); }

@media (max-width: 560px) {
  .card__marchio img { max-width: 170px; max-height: 80px; }
  .card--ev .cluster .card__marchio img { max-width: 190px; max-height: 88px; }
}


/* ============================================================
   IL MAIN EVENT IN CIMA ALLA HOME
   La stessa pelle della pagina del main event, ma schiacciata:
   due colonne, lockup piu' piccolo, conto alla rovescia di fianco.
   Sotto deve restare subito visibile il resto del club.
   ============================================================ */
.mb-top {
  position: relative;
  padding-block: var(--space-6);
  background: #0a1526 url("../img/mb-sfondo.jpg") center / cover no-repeat;
  border-bottom: 1px solid rgba(230,193,90,0.35);
}
.mb-top::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,12,22,0.60) 0%, rgba(5,12,22,0.84) 100%);
}
.mb-top > .container { position: relative; }
.mb-top__grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-5) var(--space-6); align-items: center;
}
.mb-top__titolo { display: block; width: 100%; max-width: 420px; height: auto; margin: var(--space-3) 0 var(--space-4); }
.mb-top__testo { color: #dbe5f0; margin: var(--space-3) 0 0; }
.mb-top__azioni { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.mb-top .countdown { justify-content: flex-start; }
@media (max-width: 860px) {
  .mb-top__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .mb-top__azioni { margin-top: var(--space-4); }
}
@media (max-width: 560px) {
  .mb-top { padding-block: var(--space-5); }
  .mb-top__titolo { max-width: 290px; }
  .mb-top__azioni .btn { flex: 1 1 100%; }
}

/* ============================================================
   LA NOTTE DELL'ARIAS, main da 100.000 garantiti del 4-13 dicembre.
   Oro come l'Harley Quinn (e' il colore dei main di casa) ma su base
   blu Arias, con la trama del monogramma dietro all'intestazione.
   Niente immagini pesanti: il titolo e' tipografico, cosi' la pagina
   apre subito anche sulla rete della sala.
   ============================================================ */
.nda-hero {
  position: relative; overflow: hidden;
  padding-block: var(--space-7) var(--space-7);
  border-bottom: 1px solid rgba(230,193,90,0.25);
  background:
    url("../img/trama-arias.png") repeat,
    linear-gradient(180deg, rgba(5,12,20,0.88) 0%, rgba(5,12,20,0.82) 45%, rgba(5,12,20,0.96) 100%),
    url("../img/sala-banda.jpg") no-repeat center,
    radial-gradient(130% 120% at 50% -10%, var(--blue-800) 0%, var(--ink-950) 62%);
  background-size: 140px 140px, auto, cover, auto;
}
.nda-hero > .container { position: relative; }
.nda-hero__nome {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.55rem, 6vw, 2.9rem); line-height: 1.05;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text); margin: var(--space-3) 0 0;
}
.nda-hero__nome b { font-weight: 800; color: var(--medal-gold); display: block; }
/* la cifra e' il motivo per cui uno si ferma a leggere: piu' grande di tutto */
.nda-gtd {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem;
  margin: var(--space-4) 0 var(--space-2);
}
.nda-gtd__cifra {
  font-family: var(--font-mono); font-weight: 800;
  font-size: clamp(3rem, 15vw, 6.5rem); line-height: 0.92;
  color: var(--medal-gold); letter-spacing: -0.02em;
  text-shadow: 0 10px 40px rgba(230,193,90,0.22);
}
.nda-gtd__gtd {
  font-family: var(--font-mono); font-weight: 800;
  font-size: clamp(1rem, 3.4vw, 1.5rem); letter-spacing: 0.14em;
  color: var(--text-muted);
}
.nda-quando {
  display: inline-flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; align-items: baseline;
  padding: 0.5rem 1rem; border-radius: var(--radius-pill);
  background: rgba(230,193,90,0.12); border: 1px solid rgba(230,193,90,0.5);
  font-family: var(--font-mono); font-weight: 800; color: var(--medal-gold);
}
.nda-quando small {
  font-family: var(--font-body); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}

/* il prepagato: la cosa nuova della pagina, deve staccare da tutto il resto */
.nda-prepaga {
  background: linear-gradient(180deg, rgba(230,193,90,0.10), rgba(5,12,20,0.5));
  border: 1px solid rgba(230,193,90,0.45); border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.nda-prezzo-coppia {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-4);
}
.nda-prezzo { display: flex; flex-direction: column; gap: 0.15rem; }
.nda-prezzo__eti { font-size: 0.74rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); }
.nda-prezzo__cifra { font-family: var(--font-mono); font-weight: 800; font-size: 2.1rem; line-height: 1; color: var(--text-muted); }
.nda-prezzo--vinci .nda-prezzo__cifra { font-size: 3.2rem; color: var(--medal-gold); }
.nda-prezzo--vecchio .nda-prezzo__cifra { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--text-faint); }
.nda-prezzo__nota { font-size: 0.82rem; color: var(--text-muted); }

/* i tre passi, numerati a mano perche' l'ordine conta */
.nda-passi { list-style: none; margin: 0 0 var(--space-5); padding: 0; counter-reset: p; }
.nda-passi li {
  counter-increment: p; position: relative; padding-left: 2.6rem;
  margin-bottom: var(--space-4); color: var(--text-muted);
}
.nda-passi li::before {
  content: counter(p); position: absolute; left: 0; top: -0.1rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(230,193,90,0.16); border: 1px solid rgba(230,193,90,0.5);
  color: var(--medal-gold); font-family: var(--font-mono); font-weight: 800; font-size: 0.9rem;
}
.nda-passi strong { color: var(--text); }

/* i dati del bonifico: in monospazio, cosi' si leggono carattere per carattere */
.nda-bonifico {
  background: var(--ink-950); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  padding: var(--space-4); margin-bottom: var(--space-4);
}
.nda-bonifico dl { margin: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-3); }
.nda-bonifico dt { font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.2rem; }
.nda-bonifico dd {
  margin: 0; font-family: var(--font-mono); font-weight: 700; color: var(--text);
  font-size: 1rem; word-break: break-word;
}
.nda-bonifico dd.nda-causale { color: var(--medal-gold); }
@media (min-width: 620px) { .nda-bonifico dl { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* le etichette del tipo di Day 1 dentro la tabella del calendario */
.nda-tag {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); color: var(--text-faint);
}
.nda-tag--turbo { border-color: rgba(226,87,76,0.5); color: #f0907f; }
.nda-tag--hyper { border-color: rgba(230,193,90,0.6); color: var(--medal-gold); }
.nda-tag--online { border-color: rgba(85,153,201,0.6); color: var(--blue-300); }
.nda-cal td:first-child, .nda-cal th:first-child { width: 4.2rem; font-family: var(--font-mono); font-weight: 700; }
.nda-cal .n { text-align: right; font-family: var(--font-mono); }
.nda-cal tr.nda-cal--apertura td { background: rgba(230,193,90,0.09); }
.nda-cal tfoot td { font-weight: 700; color: var(--text); border-top: 2px solid var(--line-strong); }

@media (max-width: 560px) {
  .nda-hero { padding-block: var(--space-6); }
  .nda-prepaga { padding: var(--space-4); }
  .nda-prezzo--vinci .nda-prezzo__cifra { font-size: 2.6rem; }
}

/* ---- La cornice da locandina attorno all'intestazione ----
   Un filo d'oro con gli angoli marcati: e' il segno che si usa sulle
   stampe, e costa zero in peso perche' e' tutto disegnato dal CSS. */
.nda-cornice {
  position: relative;
  border: 1px solid rgba(230,193,90,0.28);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: rgba(5,12,20,0.28);
}
.nda-cornice::before, .nda-cornice::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  border: 2px solid var(--medal-gold); opacity: 0.8;
}
.nda-cornice::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--radius-lg); }
.nda-cornice::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--radius-lg); }
.nda-presenta {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 var(--space-3);
}
.nda-filo {
  height: 1px; border: 0; margin: var(--space-5) 0;
  background: linear-gradient(90deg, rgba(230,193,90,0.6), rgba(230,193,90,0.05));
}

/* ---- Il calendario su telefono ----
   Sotto i 720px la tabella diventa una pila di schede: il prezzo deve
   leggersi senza trascinare la tabella di lato, perche' e' la cosa che
   la gente cerca per prima. L'etichetta di ogni riga esce da data-eti. */
@media (max-width: 720px) {
  .nda-cal-wrap { border: 0; border-radius: 0; overflow: visible; }
  .nda-cal { min-width: 0; width: 100%; }
  .nda-cal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .nda-cal tbody, .nda-cal tfoot { display: block; width: auto; }
  /* la riga diventa una scheda su due colonne: cosi' quindici Day 1 non
     fanno una pagina lunga il doppio del necessario */
  .nda-cal tr { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
  .nda-cal tr {
    border: 1px solid var(--line); border-radius: var(--radius-md);
    margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4);
    background: rgba(5,12,20,0.45);
  }
  .nda-cal tbody tr:hover { background: rgba(5,12,20,0.45); }
  .nda-cal td {
    border: 0; padding: 0; min-width: 0; flex: 1 1 38%;
    display: flex; flex-direction: column; gap: 0.1rem;
    align-items: flex-start; text-align: left;
  }
  .nda-cal td:last-child { flex: 1 1 100%; }
  .nda-cal td::before {
    content: attr(data-eti); text-align: left; flex: 0 0 auto;
    font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--text-faint); font-weight: 600;
  }
  /* la sigla del Day 1 fa da titolo della scheda */
  /* la sigla del Day 1 fa da intestazione della scheda: riga intera,
     etichetta a sinistra e lettera a destra, con il filo che arriva in fondo */
  .nda-cal td:first-child, .nda-cal th:first-child {
    flex: 1 1 100%; width: auto;
    flex-direction: row; justify-content: space-between; align-items: baseline;
    font-size: 1.3rem; color: var(--medal-gold); text-align: left;
    padding-bottom: var(--space-3); border-bottom: 1px solid var(--line);
  }
  .nda-cal tr.nda-cal--apertura { border-color: rgba(230,193,90,0.5); background: rgba(230,193,90,0.07); }
  .nda-cal tr.nda-cal--apertura td { background: none; }
  .nda-cal tfoot tr { background: none; border-style: dashed; text-align: center; }
  .nda-cal tfoot td { display: block; text-align: center; }
  .nda-cal tfoot td::before { content: none; }
}

/* ---- L'intestazione con la locandina di Empa ----
   Il manifesto porta gia' il nome, il garantito e le date: la colonna di
   testo accanto dice solo quello che sulla carta non c'e' (il conto alla
   rovescia, come si entra, il posto prepagato). */
.nda-banner { display: block; margin: var(--space-5) 0 var(--space-6); }
.nda-banner img { display: block; width: 100%; height: auto; }
/* sul computer lo striscione va da bordo a bordo: e' una foto notturna di
   Lucca, tagliarla dentro una colonna le toglierebbe il respiro */
@media (min-width: 760px) {
  .nda-banner img { border-block: 1px solid rgba(230,193,90,0.3); }
}
/* sul telefono arriva la locandina quadrata, incorniciata come una stampa */
@media (max-width: 759px) {
  .nda-banner { padding-inline: var(--space-4); }
  .nda-banner img {
    max-width: 420px; margin-inline: auto;
    border-radius: var(--radius-md);
    border: 1px solid rgba(230,193,90,0.45);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 22px 60px rgba(0,0,0,0.6);
  }
}

/* ---- Il programma, una immagine sola da salvare ---- */
.nda-programma { margin: 0; text-align: center; }
.nda-programma img {
  display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto var(--space-3);
  border-radius: var(--radius-md); border: 1px solid var(--line-strong);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.nda-programma figcaption { text-align: center; }

/* Su telefono la locandina sta sopra e dice gia' "100.000 GARANTITO":
   ripeterlo subito sotto in grande e' rumore. Il titolo per i motori di
   ricerca resta nell'h1 nascosto, quindi non si perde niente. */
@media (max-width: 899px) {
  .nda-hero__testo .nda-gtd { display: none; }
  .nda-presenta { text-align: center; }
}

/* L'occhiello e la pillola dell'orario sono tutti e due in linea e finivano
   appaiati: la pillola va a capo, altrimenti la riga sembra una sola cosa. */
.nda-hero__testo .nda-quando { display: flex; width: fit-content; margin-top: var(--space-4); }

/* I campi del modulo del prepagato: stesso aspetto di quelli della scheda
   prenotazione, ma dentro il riquadro dorato della Notte dell'Arias. */
.nda-prepaga label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--text); }
.nda-prepaga input, .nda-prepaga select {
  width: 100%; background: var(--ink-900); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; color: var(--text); min-height: 44px;
}
.nda-prepaga input:focus-visible, .nda-prepaga select:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; }

/* ---- Il modulo del posto prepagato ---- */
.nda-modulo { margin-top: var(--space-5); }
.nda-facoltativo { margin-bottom: var(--space-4); }
.nda-facoltativo label span { font-weight: 400; color: var(--text-faint); font-size: 0.78rem; }
/* la trappola anti robot: fuori dallo schermo, mai vista da una persona */
.nda-trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nda-errore {
  margin: 0 0 var(--space-4); padding: 0.7rem 1rem;
  background: rgba(184,33,58,0.14); border: 1px solid rgba(212,56,79,0.5);
  border-radius: var(--radius-sm); color: #f3c6ce; font-size: 0.92rem;
}
.nda-esito { margin-top: var(--space-5); }
.nda-esito__titolo { font-size: 1.15rem; margin: 0 0 var(--space-3); color: var(--text); }
.nda-esito__titolo strong { font-family: var(--font-mono); color: var(--medal-gold); letter-spacing: 0.04em; }
.nda-prepaga button[disabled] { opacity: 0.6; cursor: progress; }

@media (max-width: 720px) {
  /* "Livelli" prende la riga intera cosi' Special e Buy-in finiscono
     affiancati: il confronto fra i due prezzi e' il motivo per cui uno
     guarda il calendario. */
  .nda-cal td:nth-child(4) { flex: 1 1 100%; }
}

/* ---- Il contatore dei posti ----
   Una riga e una barra. Resta nascosto finche' il server non dice un
   numero vero: meglio niente che un numero inventato. */
.nda-posti { margin-bottom: var(--space-5); }
.nda-posti__riga {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); color: var(--text-muted);
}
.nda-posti__riga strong { font-family: var(--font-mono); font-size: 1.5rem; color: var(--medal-gold); }
.nda-posti__su { font-size: 0.85rem; color: var(--text-faint); }
.nda-posti__barra {
  height: 8px; border-radius: var(--radius-pill); overflow: hidden;
  background: rgba(5,12,20,0.7); border: 1px solid var(--line);
}
.nda-posti__barra span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--medal-gold), var(--amber-500));
  transition: width .5s ease;
}
/* quando ne restano pochi il colore cambia da solo */
.nda-posti--pochi .nda-posti__riga strong { color: var(--red-400); }
.nda-posti--pochi .nda-posti__barra span { background: linear-gradient(90deg, var(--red-500), var(--red-400)); }

/* ---- Il biglietto del Day 1 A ----
   E' quello che il giocatore compra, disegnato come un ticket vero: cosi'
   si vede subito che si sta comprando il Day 1 A e non "un posto". E'
   tutto CSS, quindi resta nitido su ogni schermo e un numero si corregge
   qui senza rifare una grafica. La linea tratteggiata e' la perforazione:
   i due semicerchi sono del colore del fondo pagina, e se un giorno
   questa sezione prende uno sfondo suo vanno rifatti. */
.nda-ticket {
  display: flex; align-items: stretch; margin-bottom: var(--space-6);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(230,193,90,0.15), transparent 55%),
    linear-gradient(135deg, var(--blue-900), var(--ink-950) 72%);
  border: 1px solid rgba(230,193,90,0.5);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}
.nda-ticket__corpo { flex: 1 1 auto; min-width: 0; padding: var(--space-5); }
.nda-ticket__evento {
  margin: 0; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--medal-gold);
}
.nda-ticket__evento span { color: var(--text-faint); letter-spacing: 0.1em; }
.nda-ticket__sigla {
  margin: 0.3rem 0 0; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-weight: 800; line-height: 1; color: var(--text);
}
.nda-ticket__sigla span { font-size: clamp(1.25rem, 4vw, 1.85rem); letter-spacing: 0.04em; }
.nda-ticket__sigla strong {
  font-size: clamp(2.6rem, 9vw, 4rem); color: var(--medal-gold);
  text-shadow: 0 10px 34px rgba(230,193,90,0.3);
}
.nda-ticket__quando {
  margin: var(--space-3) 0 0; font-family: var(--font-mono); font-weight: 700; color: var(--text);
}
.nda-ticket__dove { margin: 0.2rem 0 0; font-size: 0.86rem; color: var(--text-muted); }
.nda-ticket__dati {
  margin: var(--space-4) 0 0; padding-top: var(--space-4);
  display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  border-top: 1px solid rgba(230,193,90,0.25);
}
.nda-ticket__dati dt {
  font-size: 0.67rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint);
}
.nda-ticket__dati dd {
  margin: 0.15rem 0 0; font-family: var(--font-mono); font-weight: 700;
  color: var(--text); font-size: 0.95rem;
}

/* la perforazione fra biglietto e matrice */
.nda-ticket__strappo {
  position: relative; flex: 0 0 0; border-left: 2px dashed rgba(230,193,90,0.45);
}
.nda-ticket__strappo::before, .nda-ticket__strappo::after {
  content: ""; position: absolute; left: -10px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--bg);
}
.nda-ticket__strappo::before { top: -12px; }
.nda-ticket__strappo::after { bottom: -12px; }

.nda-ticket__matrice {
  flex: 0 0 212px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 0.2rem;
  padding: var(--space-5) var(--space-4);
  background: linear-gradient(180deg, rgba(230,193,90,0.13), rgba(230,193,90,0.03));
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.nda-ticket__sigillo {
  width: 76px; height: 76px; border-radius: 50%; margin-bottom: 0.5rem;
  border: 1px solid rgba(230,193,90,0.55); box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.nda-ticket__eti {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.nda-ticket__cifra {
  font-family: var(--font-mono); font-weight: 800; font-size: 3.4rem; line-height: 0.95;
  color: var(--medal-gold); text-shadow: 0 10px 30px rgba(230,193,90,0.28);
}
.nda-ticket__nota { font-size: 0.73rem; color: var(--text-faint); line-height: 1.35; }
.nda-ticket__bollo {
  margin-top: 0.55rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-950); background: var(--medal-gold);
  border-radius: var(--radius-pill); padding: 0.28rem 0.75rem;
}
/* appare solo dopo la prenotazione: il biglietto si timbra col codice */
.nda-ticket__codice {
  margin-top: 0.5rem; font-family: var(--font-mono); font-weight: 800; font-size: 1rem;
  color: var(--medal-gold); letter-spacing: 0.06em;
}
.nda-ticket__codice::before {
  content: "Codice "; font-family: var(--font-body); font-weight: 600; font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
}
.nda-ticket__codice[hidden] { display: none; }

@media (max-width: 680px) {
  /* sul telefono il biglietto si piega: sopra il tagliando, sotto la
     matrice col prezzo, e la perforazione diventa orizzontale */
  .nda-ticket { flex-direction: column; }
  .nda-ticket__corpo { padding: var(--space-4); }
  .nda-ticket__strappo { flex: 0 0 auto; border-left: 0; border-top: 2px dashed rgba(230,193,90,0.45); }
  .nda-ticket__strappo::before, .nda-ticket__strappo::after { top: -11px; bottom: auto; }
  .nda-ticket__strappo::before { left: -11px; }
  .nda-ticket__strappo::after { left: auto; right: -11px; }
  .nda-ticket__matrice {
    flex: 0 0 auto; padding: var(--space-4);
    display: grid; grid-template-columns: auto 1fr; align-items: center;
    justify-items: start; text-align: left; column-gap: var(--space-4); row-gap: 0.1rem;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
  .nda-ticket__sigillo { grid-row: 1 / span 3; width: 66px; height: 66px; margin: 0; }
  .nda-ticket__cifra { font-size: 3rem; }
  .nda-ticket__bollo { grid-column: 1 / -1; justify-self: center; margin-top: 0.7rem; }
  .nda-ticket__codice { grid-column: 1 / -1; justify-self: center; }
}

/* ---- L'avviso in fondo alle regole ----
   Due righe che contano piu' delle altre: quando si gioca la finale e
   quando esce il programma completo. */
.nda-avviso {
  margin-top: var(--space-6);
  background: linear-gradient(180deg, rgba(230,193,90,0.10), rgba(5,12,20,0.4));
  border: 1px solid rgba(230,193,90,0.4); border-left-width: 4px;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.nda-avviso p { margin: 0; color: var(--text-muted); }
.nda-avviso p + p { margin-top: 0.6rem; }
.nda-avviso strong { color: var(--text); }

/* ---- L'esempio dell'email, prima del modulo ----
   Bordo tratteggiato perche' si capisca che e' un facsimile e non i dati
   di una prenotazione vera. */
.nda-esempio {
  margin-top: var(--space-5);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-md);
  padding: var(--space-4);
}
.nda-esempio__eti {
  margin: 0 0 var(--space-3); font-size: 0.72rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-faint);
}
.nda-esempio .nda-bonifico { margin-bottom: var(--space-3); }
.nda-esempio .field-hint { margin: 0; }

/* ---- La voce Main Event nel menu ----
   L'unica dorata: fino al 13 dicembre e' quella che conta. */
.main-nav__list .main-nav__evento { color: var(--medal-gold); }
.main-nav__list .main-nav__evento:hover,
.main-nav__list .main-nav__evento[aria-current="page"] { color: var(--medal-gold-soft); }
.main-nav__list .main-nav__evento[aria-current="page"]::after { background: var(--medal-gold); }

/* I bottoni "Blocca il posto" portano al modulo, non al biglietto: senza
   questo margine la prima riga finirebbe sotto la testata, che resta
   attaccata in alto. */
#modulo { scroll-margin-top: 90px; }