/* ============================================================
   38·0 ROMA · DESIGN SYSTEM "BROADCAST + TCG"
   Identità giallorossa, profondità da videogioco sportivo.
   Riscrittura completa: la pelle cambia, le classi emesse dal JS
   restano i selettori-aggancio. game.js NON va toccato.
   ============================================================ */

:root {
  /* ---------- BRAND CORE (giallorosso, non snaturato) ---------- */
  --rosso:           #8e1f2f;
  --rosso-scuro:     #5c0e1c;
  --rosso-vivo:      #b22f42;
  --rosso-sangue:    #420811;
  --giallo:          #f2b705;
  --giallo-chiaro:   #f7c948;
  --oro-foil:        #ffe08a;
  --oro-luce:        #fff4cf;

  /* ---------- FONDALI A STRATI (broadcast deep) ---------- */
  --bg-0:            #0a0307;
  --bg-1:            #14060b;
  --bg-2:            #220a12;
  --bg-stage:        radial-gradient(120% 80% at 50% -10%, #2a0d16 0%, #14060b 45%, #0a0307 100%);
  --card:            #2b0f19;
  --card-2:          #38141f;
  --card-3:          #441824;
  --vetro-hud:       rgba(20, 6, 11, 0.82);
  --linea-osso:      rgba(245, 233, 220, 0.12);

  /* ---------- TESTO ---------- */
  --testo:           #f5e9dc;
  --testo-dim:       #c9a9a0;
  --testo-mute:      #8f7670;

  /* ---------- CAMPO / TACTICS BOARD ---------- */
  --campo:           #1c3a2a;
  --campo-scuro:     #102418;
  --campo-chiaro:    #244a34;
  --campo-linee:     rgba(255, 255, 255, 0.20);
  --campo-riflesso:  rgba(180, 255, 210, 0.07);

  /* ---------- ACCENTI MODALITÀ (mappati sul JS esistente) ---------- */
  --doom:            #d44;
  --rogue:           #2fd6c3;
  --rogue-luce:      #5ff0e0;
  --serieb:          #7a5cff;
  --serieb-luce:     #b3a0ff;
  --sesto:           #d98a3d;
  --sesto-luce:      #f0a85a;

  /* ---------- RARITÀ TCG (tier 90/82/75/low + bonus) ---------- */
  --rar-elite:       #ffd24a;
  --rar-elite-2:     #ff9e2c;
  --rar-top:         #f2b705;
  --rar-mid:         #cdd6df;
  --rar-low:         #8c7a6e;
  --rar-comune:      #9fb0c0;
  --rar-noncomune:   #5fd06a;
  --rar-raro:        #4aa3ff;
  --rar-epico:       #c77dff;

  /* ---------- GLOW ---------- */
  --glow-giallo:     rgba(242, 183, 5, 0.55);
  --glow-rosso:      rgba(142, 31, 47, 0.6);
  --glow-doom:       rgba(212, 68, 68, 0.55);
  --glow-elite:      rgba(255, 210, 74, 0.85);
  --glow-rogue:      rgba(47, 214, 195, 0.55);

  /* ---------- TIPOGRAFIA (scala modulare clamp ~1.25) ---------- */
  --font-display:    "Anton", Impact, sans-serif;
  --font-cond:       "Saira Condensed", "Anton", sans-serif;
  --font-body:       "Saira", system-ui, sans-serif;
  --fs-300:          clamp(0.72rem, 0.69rem + 0.15vw, 0.80rem);
  --fs-400:          clamp(0.86rem, 0.83rem + 0.18vw, 0.95rem);
  --fs-500:          clamp(1.0rem, 0.95rem + 0.3vw, 1.15rem);
  --fs-600:          clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-700:          clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
  --fs-800:          clamp(2.4rem, 1.9rem + 2.6vw, 3.8rem);
  --fs-num-xl:       clamp(2.6rem, 2.0rem + 3vw, 4.2rem);
  --tracking-cond:   0.04em;
  --tracking-wide:   0.16em;

  /* ---------- SPAZI (base 4px) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 56px; --sp-10: 72px;

  /* ---------- RAGGI ---------- */
  --radius:        14px;
  --radius-card:   16px;
  --radius-token:  11px;
  --radius-bug:    6px;
  --radius-pill:   999px;

  /* ---------- OMBRE MATERICHE (multi-layer, direzionali) ---------- */
  --shadow-card:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 2px 4px rgba(0,0,0,0.5),
    0 10px 24px -6px rgba(0,0,0,0.6);
  --shadow-lift:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 4px 8px rgba(0,0,0,0.45),
    0 22px 48px -10px rgba(0,0,0,0.7);
  --shadow-bug:
    0 2px 0 rgba(0,0,0,0.6),
    0 12px 30px -8px rgba(0,0,0,0.7);
  --shadow-token:
    0 2px 3px rgba(0,0,0,0.55),
    0 8px 16px -4px rgba(0,0,0,0.6);
  --shadow-foil-elite:
    0 0 0 1px var(--oro-foil),
    0 0 22px -2px var(--glow-elite),
    0 14px 30px -8px rgba(0,0,0,0.7);
  --bevel-top:    inset 0 1px 0 rgba(255,255,255,0.08);
  --bevel-bottom: inset 0 -2px 6px rgba(0,0,0,0.45);

  /* ---------- MOTION ---------- */
  --dur-1:  120ms;
  --dur-2:  200ms;
  --dur-3:  360ms;
  --dur-4:  520ms;
  --dur-5:  900ms;
  --ease-out:    cubic-bezier(0.22, 0.9, 0.3, 1);
  --ease-pop:    cubic-bezier(0.2, 1.35, 0.4, 1);
  --ease-wipe:   cubic-bezier(0.85, 0, 0.15, 1);
  --ease-cut:    cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- LAYOUT ---------- */
  --maxw:        1600px;
  --bug-h:       56px;
  --tap-min:     44px;
  --safe-t:      env(safe-area-inset-top, 0px);
  --safe-b:      env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
*, *::before, *::after { min-width: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--testo);
  background: var(--bg-0);
  background-image: var(--bg-stage);
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  line-height: 1.5;
}

main {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--sp-5) calc(var(--sp-8) + var(--safe-b));
}

img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ============================================================
   SCOREBUG (topbar) · lower-third da diretta TV
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--bug-h);
  padding: calc(var(--sp-3) + var(--safe-t)) var(--sp-5) var(--sp-3);
  background: var(--vetro-hud);
  /* blur ridotto a 4px + fondo più opaco (0.82): meno repaint dello sticky
     a ogni scroll, evitando il doppio backdrop-filter pesante topbar+slot */
  -webkit-backdrop-filter: blur(4px) saturate(1.2);
  backdrop-filter: blur(4px) saturate(1.2);
  border-bottom: 2px solid var(--rosso-vivo);
  box-shadow:
    0 1px 0 0 var(--giallo),
    var(--shadow-bug);
  border-radius: 0;
}
/* .is-sticky è ridondante (lo sticky è già su .topbar): la teniamo come
   no-op documentato per marcare lo stato dell'header senza effetti collaterali. */
.topbar.is-sticky { position: sticky; top: 0; }
/* doppio filo: il ribbon rosso (border-bottom) + filo oro 1px sotto */
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--giallo);
  opacity: 0.55;
}

/* wrapper-colonna del brand (logo emittente + tagline impilati) */
.scorebug__brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* wrapper-colonna meta a destra (LIVE + giornata); spinge l'#hud a fondo riga */
.scorebug__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
}
/* su desktop il wrapper è trasparente al layout (meta e #hud restano figli diretti del topbar) */
.scorebug__row2 { display: contents; }

/* blocco brand = "logo emittente", asimmetrico a sinistra */
.brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: var(--testo);
  line-height: 1;
  white-space: nowrap;
}
.brand-num {
  color: var(--giallo);
  text-shadow: 0 0 12px var(--glow-giallo);
}
/* tagline broadcast condensed */
.brand-sub {
  font-family: var(--font-cond);
  font-weight: 600;
  color: var(--testo-mute);
  font-size: var(--fs-300);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--linea-osso);
}

/* indicatore LIVE: si accende SOLO quando la partita è in corso.
   Il body riceve data-live="on" da showScreen() (draft/sosta/verdetto);
   nei menu resta nascosto, così il dot non pulsa a vuoto. */
.scorebug__live {
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--font-cond);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-300);
  color: var(--rosso-vivo);
  text-transform: uppercase;
}
body[data-live="on"] .scorebug__live { display: inline-flex; }
/* dot LIVE: stile sull'elemento esplicito del markup (coerenza markup/CSS) */
.scorebug__live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff3b4e;
  box-shadow: 0 0 10px #ff3b4e;
  animation: liveBlink 1.2s ease-in-out infinite;
}
.scorebug__matchday {
  font-family: var(--font-cond);
  font-weight: 700;
  letter-spacing: var(--tracking-cond);
  font-size: var(--fs-300);
  color: var(--giallo-chiaro);
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(242,183,5,0.4);
  border-radius: var(--radius-bug);
  padding: 3px 10px;
  text-transform: uppercase;
}
@keyframes liveBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* fascia statistica HUD a destra (sbilanciata) */
#hud {
  margin-left: auto;
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ---------- HUD pill = OVERLAY STATISTICO tessera ---------- */
.hud-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-cond);
  font-weight: 600;
  letter-spacing: var(--tracking-cond);
  font-size: var(--fs-300);
  text-transform: uppercase;
  color: var(--testo-dim);
  background: linear-gradient(180deg, rgba(56,20,31,0.9), rgba(20,6,11,0.9));
  border: 1px solid var(--linea-osso);
  border-left: 3px solid var(--rosso-vivo);
  border-radius: var(--radius-bug);
  padding: 5px 12px 5px 11px;
  box-shadow: var(--bevel-top), 0 2px 6px rgba(0,0,0,0.45);
  white-space: nowrap;
}
.hud-pill strong {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--giallo);
  font-size: 1.05em;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}
/* varianti modalità: barra-colore a sinistra + bordo coerente */
.hud-pill.diff-impossibile { border-color: rgba(212,68,68,0.4); border-left-color: var(--doom); color: #f3a3a3; }
.hud-pill.diff-serieb      { border-color: rgba(122,92,255,0.4); border-left-color: var(--serieb); color: var(--serieb-luce); }
.hud-pill.diff-custom      { border-color: rgba(242,183,5,0.4); border-left-color: var(--giallo); color: var(--giallo-chiaro); }
.hud-pill.diff-rogue       { border-color: rgba(47,214,195,0.4); border-left-color: var(--rogue); color: var(--rogue-luce); }
.hud-pill.diff-sesto       { border-color: rgba(217,138,61,0.4); border-left-color: var(--sesto); color: var(--sesto-luce); }
.hud-pill.hidden-pill      { border-left-color: var(--giallo); color: var(--giallo-chiaro); }
.hud-pill.hud-coach        { border-left-color: var(--rogue); color: var(--rogue-luce); }
.hud-pill.hud-hab          { border-left-color: var(--sesto); color: var(--sesto-luce); }
.hud-pill.hud-hab.hab-full {
  background: linear-gradient(180deg, rgba(217,138,61,0.3), rgba(20,6,11,0.9));
  border-left-color: var(--sesto-luce);
  color: #ffe0b2;
  font-weight: 800;
  animation: habPulse 1.4s ease-in-out infinite;
}
@keyframes habPulse {
  0%,100% { box-shadow: var(--bevel-top), 0 0 0 0 rgba(240,168,90,0.5); }
  50%     { box-shadow: var(--bevel-top), 0 0 0 4px rgba(240,168,90,0); }
}

/* tasto MENU nello scorebug = chip oro */
.btn-home {
  flex-shrink: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1.5px solid var(--giallo);
  color: var(--giallo);
  border-radius: var(--radius-bug);
  padding: 6px 14px;
  font-family: var(--font-cond);
  font-weight: 700;
  letter-spacing: var(--tracking-cond);
  text-transform: uppercase;
  font-size: var(--fs-300);
  cursor: pointer;
  transition: background var(--dur-1) ease, box-shadow var(--dur-2) ease;
}
.btn-home:hover { background: rgba(242, 183, 5, 0.2); border-color: var(--giallo-chiaro); }
.btn-home:active { transform: translateY(1px); }
.btn-home[hidden] { display: none; }

/* ============================================================
   SCREENS · stacco di regia cinetico (no fade generico)
   ============================================================ */
.screen { display: none; }
.screen.active {
  display: block;
  /* fill "backwards" (non "both"): l'entrata è identica, ma a fine animazione il
     transform NON resta attivo -> niente containing block che intrappola i
     position:fixed interni (es. il modal carte del draft su mobile). */
  animation: regiaWipe var(--dur-4) var(--ease-wipe) backwards;
}
@keyframes regiaWipe {
  0% {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transform: translateX(-2%);
  }
  60% { opacity: 1; }
  100% {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translateX(0);
  }
}

/* ---------- Section title: lower-third che entra da sinistra ---------- */
/* .lower-third = wrapper-contenitore del titolo. Il trattamento lower-third
   (barra verticale rosso->oro + slide-in) è applicato direttamente su
   .section-title e .section-title::before, quindi questo è un blocco di
   passaggio: lo dichiariamo esplicitamente per coerenza markup/CSS. */
.lower-third { display: block; }
.section-title {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: var(--sp-7) 0 var(--sp-1);
  color: var(--testo);
  text-wrap: balance;
  padding-left: var(--sp-4);
  animation: lowerThird var(--dur-4) var(--ease-cut) both;
}
.section-title::before {
  content: "";
  position: absolute;
  left: 0; top: 0.12em; bottom: 0.12em;
  width: 5px;
  background: linear-gradient(180deg, var(--rosso-vivo), var(--giallo));
  border-radius: 2px;
}
.section-sub {
  color: var(--testo-dim);
  margin-bottom: var(--sp-6);
  padding-left: var(--sp-4);
  font-size: var(--fs-400);
}
@keyframes lowerThird {
  0%   { opacity: 0; transform: translateX(-26px); }
  70%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}
/* Desktop: contenuto centrato e armonioso (niente più colonna ancorata a sinistra).
   Il titolo si centra e la barra laterale diventa un accento orizzontale sopra. */
@media (min-width: 861px) {
  .section-title, .section-sub {
    text-align: center; padding-left: 0; max-width: 820px; margin-inline: auto;
  }
  .section-title { padding-top: 14px; }
  .section-title::before {
    left: 50%; right: auto; top: 0; bottom: auto;
    transform: translateX(-50%);
    width: 54px; height: 4px; border-radius: 2px;
    background: linear-gradient(90deg, var(--rosso-vivo), var(--giallo));
  }
}

/* ============================================================
   HERO / HOME · hub pre-partita a bandiera (asimmetrico)
   ============================================================ */
.hero { padding: var(--sp-9) 0 var(--sp-7); max-width: 640px; }
.hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-800);
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero h1::after {
  content: "";
  display: block;
  width: 96px;
  height: 6px;
  margin-top: var(--sp-4);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rosso-vivo), var(--giallo));
  box-shadow: 0 0 18px -2px var(--glow-giallo);
}
.hero-sub { margin-top: var(--sp-5); color: var(--testo-dim); line-height: 1.6; font-size: var(--fs-500); }

/* ---------- Griglia modalità ---------- */
.diff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.diff-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* tessere-menù broadcast con cifra fantasma negli angoli */
.diff-grid { counter-reset: diffidx; }
.diff-card {
  position: relative;
  isolation: isolate;
  counter-increment: diffidx;
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(242,183,5,0.07), transparent 55%),
    linear-gradient(160deg, var(--card-3), var(--card) 72%);
  border: 1px solid rgba(142, 31, 47, 0.85);
  border-left: 4px solid var(--rosso-vivo);
  border-radius: var(--radius-card);
  color: var(--testo);
  padding: var(--sp-6) var(--sp-5);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  min-height: var(--tap-min);
  font-family: var(--font-body);
  box-shadow: var(--shadow-card), var(--bevel-top);
  transition:
    transform var(--dur-2) var(--ease-pop),
    border-color var(--dur-2) ease,
    box-shadow var(--dur-2) ease;
  animation: tileRise var(--dur-4) var(--ease-out) both;
}
.diff-card:nth-child(1) { animation-delay: 0.04s; }
.diff-card:nth-child(2) { animation-delay: 0.10s; }
.diff-card:nth-child(3) { animation-delay: 0.16s; }
.diff-card:nth-child(4) { animation-delay: 0.22s; }
.diff-card:nth-child(5) { animation-delay: 0.28s; }
@keyframes tileRise {
  0%   { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* cifra-indice fantasma (grafica TV), zero JS, via CSS counter.
   Lo span .diff-card__index nel markup mostra il numero della tessera. */
.diff-card__index {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-4);
  z-index: 0;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--linea-osso);            /* "osso" tenue ~6% */
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  transition: color var(--dur-2) ease;
}
.diff-card__index::before { content: counter(diffidx); }
.diff-card:hover .diff-card__index,
.diff-card:focus-visible .diff-card__index { color: rgba(242, 183, 5, 0.22); }
.diff-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: radial-gradient(90px circle at var(--mx, 50%) var(--my, 50%), var(--glow-giallo), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-2) ease;
}
.diff-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--giallo-chiaro), transparent);
  transform: scaleX(0);
  transition: transform var(--dur-3) ease;
}
.diff-card:hover, .diff-card:focus-visible {
  transform: translateY(-5px) rotate(-0.4deg);
  border-color: var(--giallo);
  outline: none;
  box-shadow: 0 0 0 1px rgba(242,183,5,0.35), var(--shadow-lift), 0 0 28px -6px var(--glow-giallo);
}
/* niente glow-blob che segue il cursore: su hover si illuminano solo i bordi
   (border-color + filo superiore ::after + anello box-shadow), non un alone pieno */
.diff-card:hover::after, .diff-card:focus-visible::after { transform: scaleX(1); }
.diff-card:active { transform: translateY(-2px) scale(0.99); }
.diff-card:focus-visible { box-shadow: 0 0 0 3px rgba(242, 183, 5, 0.45), var(--shadow-lift); }
.diff-name {
  position: relative;            /* sopra la cifra fantasma (.diff-card__index) */
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--fs-600);
  letter-spacing: 0.03em;
  color: var(--giallo-chiaro);
  display: block;
  margin-bottom: var(--sp-2);
  transition: text-shadow var(--dur-2) ease;
}
.diff-card:hover .diff-name { text-shadow: 0 0 18px var(--glow-giallo); }
.diff-desc { position: relative; z-index: 1; color: var(--testo-dim); font-size: var(--fs-400); line-height: 1.5; }

/* accenti modalità: barra laterale + glow coerente */
.diff-card.doom { border-left-color: var(--doom); border-color: rgba(212,68,68,0.6); }
.diff-card.doom::before { background: radial-gradient(90px circle at var(--mx, 50%) var(--my, 50%), var(--glow-doom), transparent 60%); }
.diff-card.doom::after  { background: linear-gradient(90deg, transparent, var(--doom), transparent); }
.diff-card.doom .diff-name { color: var(--doom); }
.diff-card.doom:hover {
  border-color: var(--doom);
  box-shadow: 0 0 0 1px rgba(212,68,68,0.4), var(--shadow-lift), 0 0 28px -6px var(--glow-doom);
}
.diff-card.doom:hover .diff-name { text-shadow: 0 0 18px var(--glow-doom); }

.diff-card.serieb { border-left-color: var(--serieb); border-color: rgba(122,92,255,0.6); }
.diff-card.serieb .diff-name { color: var(--serieb-luce); }
.diff-card.serieb::before { background: radial-gradient(90px circle at var(--mx,50%) var(--my,50%), rgba(122,92,255,0.5), transparent 60%); }
.diff-card.serieb::after  { background: linear-gradient(90deg, transparent, var(--serieb-luce), transparent); }
.diff-card.serieb:hover { border-color: var(--serieb-luce); box-shadow: 0 0 0 1px rgba(122,92,255,0.4), var(--shadow-lift), 0 0 28px -6px rgba(122,92,255,0.5); }
.diff-card.serieb .diff-desc strong { color: #d8ccff; }

.diff-card.sesto { border-left-color: var(--sesto); border-color: rgba(217,138,61,0.6); }
.diff-card.sesto .diff-name { color: var(--sesto-luce); }
.diff-card.sesto::before { background: radial-gradient(90px circle at var(--mx,50%) var(--my,50%), rgba(217,138,61,0.5), transparent 60%); }
.diff-card.sesto::after  { background: linear-gradient(90deg, transparent, var(--sesto-luce), transparent); }
.diff-card.sesto:hover { border-color: var(--sesto-luce); box-shadow: 0 0 0 1px rgba(217,138,61,0.4), var(--shadow-lift), 0 0 28px -6px rgba(217,138,61,0.5); }
.diff-card.sesto .diff-desc strong { color: var(--sesto-luce); }

.diff-card.rogue { border-left-color: var(--rogue); border-color: rgba(47,214,195,0.6); }
.diff-card.rogue .diff-name { color: var(--rogue-luce); }
.diff-card.rogue::before { background: radial-gradient(90px circle at var(--mx,50%) var(--my,50%), var(--glow-rogue), transparent 60%); }
.diff-card.rogue::after  { background: linear-gradient(90deg, transparent, var(--rogue-luce), transparent); }
.diff-card.rogue:hover { border-color: var(--rogue-luce); box-shadow: 0 0 0 1px rgba(47,214,195,0.4), var(--shadow-lift), 0 0 28px -6px var(--glow-rogue); }

.diff-card.custom:not(.diff-custom-row) { border-left-color: var(--giallo); border-color: rgba(242,183,5,0.6); }
.diff-card.custom:not(.diff-custom-row) .diff-name { color: var(--giallo); }

/* riga Personalizza full-width grigia (contrappunto cromatico intenzionale) */
.diff-custom-row {
  display: flex; align-items: center; gap: var(--sp-4);
  width: 100%; margin-top: var(--sp-4);
  background: linear-gradient(160deg, #2a2a2e, #1d1d20 75%) !important;
  border: 1px solid rgba(160,160,170,0.4) !important;
  border-left: 4px solid #8d8d97 !important;
}
.diff-custom-row::before { background: radial-gradient(90px circle at var(--mx,50%) var(--my,50%), rgba(180,180,190,0.5), transparent 60%) !important; }
.diff-custom-row::after { background: linear-gradient(90deg, transparent, #b8b8c0, transparent) !important; }
.diff-custom-row:hover, .diff-custom-row:focus-visible {
  border-color: #c8c8d0 !important;
  box-shadow: 0 0 0 1px rgba(200,200,210,0.35), var(--shadow-lift), 0 0 24px -6px rgba(180,180,190,0.5) !important;
}
.diff-custom-icon { font-size: 1.8rem; line-height: 1; flex-shrink: 0; filter: grayscale(0.2); }
.diff-custom-text { display: flex; flex-direction: column; gap: var(--sp-1); text-align: left; }
.diff-custom-row .diff-name { color: #d6d6dc; margin-bottom: 2px; }
.diff-custom-row:hover .diff-name { text-shadow: 0 0 14px rgba(200,200,210,0.5); }
@media (max-width: 720px) { .diff-grid-3 { grid-template-columns: 1fr; } }

/* ---------- Toggle rating nascosto (opzione regia) ---------- */
.hidden-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(160deg, var(--card-2), var(--card) 75%);
  border: 1px solid var(--linea-osso);
  border-left: 3px solid var(--giallo);
  border-radius: var(--radius);
  cursor: pointer;
  max-width: 720px;
  min-height: var(--tap-min);
  box-shadow: var(--shadow-card);
}
.hidden-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ht-box {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border: 2px solid var(--giallo);
  border-radius: var(--radius-bug);
  margin-top: 1px;
  position: relative;
  transition: background var(--dur-1) ease;
}
.hidden-toggle input:checked + .ht-box { background: var(--giallo); }
.hidden-toggle input:checked + .ht-box::after {
  content: "✓";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #2a1206; font-weight: 900; font-size: 0.95rem;
}
.hidden-toggle input:focus-visible + .ht-box { box-shadow: 0 0 0 3px rgba(242, 183, 5, 0.4); }
.ht-text { color: var(--testo-dim); font-size: var(--fs-400); line-height: 1.5; }
.ht-text strong { color: var(--giallo-chiaro); }

/* ---------- Badge Joyarchia (bug sponsor) ---------- */
.joya-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-8) auto var(--sp-2);
  max-width: 420px;
  padding: var(--sp-3) var(--sp-6) var(--sp-3) var(--sp-3);
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--testo-dim);
  background: linear-gradient(160deg, var(--card-2), var(--card) 75%);
  border: 1px solid rgba(142, 31, 47, 0.7);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-2) var(--ease-pop), border-color var(--dur-2) ease, box-shadow var(--dur-2) ease, color var(--dur-2) ease;
}
.joya-badge::before {
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  background: radial-gradient(90px circle at var(--mx, 50%) var(--my, 50%), var(--glow-giallo), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-2) ease;
}
.joya-badge:hover, .joya-badge:focus-visible {
  transform: translateY(-3px);
  border-color: var(--giallo);
  color: var(--testo);
  outline: none;
  box-shadow: var(--shadow-lift), 0 0 26px -6px var(--glow-giallo);
}
.joya-badge:hover::before, .joya-badge:focus-visible::before { opacity: 1; }
.joya-logo {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(242,183,5,0.25), 0 0 18px -2px var(--glow-rosso);
  transition: box-shadow var(--dur-2) ease, transform var(--dur-2) ease;
}
.joya-badge:hover .joya-logo {
  box-shadow: 0 0 0 2px var(--giallo), 0 0 22px -2px var(--glow-giallo);
  transform: rotate(-4deg) scale(1.05);
}
.joya-text { font-size: var(--fs-400); line-height: 1.4; }
.joya-text strong { color: var(--giallo-chiaro); letter-spacing: 0.5px; }
.joya-top { margin: 0 auto var(--sp-6); }

/* hint di glow on-hover riutilizzabile (la luce che segue il cursore è già
   gestita da JS via --mx/--my; qui aggiungiamo l'alone oro extra al passaggio) */
.glow-hover { transition: box-shadow var(--dur-2) ease, transform var(--dur-2) ease; }
.glow-hover:hover,
.glow-hover:focus-visible { box-shadow: var(--shadow-lift); }

/* ============================================================
   MODULI · lavagna tattica
   ============================================================ */
.formation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); max-width: 920px; margin-inline: auto; }
.formation-card {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(242,183,5,0.05), transparent 60%),
    linear-gradient(160deg, var(--card-3), var(--card) 74%);
  border: 1px solid rgba(142, 31, 47, 0.85);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
  cursor: pointer;
  color: var(--testo);
  overflow: hidden;
  min-height: var(--tap-min);
  box-shadow: var(--shadow-card), var(--bevel-top);
  transition: transform var(--dur-2) var(--ease-pop), border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.formation-card::before {
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  background: radial-gradient(90px circle at var(--mx, 50%) var(--my, 50%), var(--glow-giallo), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-2) ease;
}
.formation-card:hover, .formation-card:focus-visible {
  transform: translateY(-5px) scale(1.02);
  border-color: var(--giallo);
  outline: none;
  box-shadow: var(--shadow-lift), 0 0 24px -6px var(--glow-giallo);
}
.formation-card:hover::before, .formation-card:focus-visible::before { opacity: 1; }
.formation-card:active { transform: translateY(-2px) scale(0.99); }

/* mini tactics-board: erba a bande di taglio + riflettore soft */
.mini-pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background:
    radial-gradient(60% 40% at 50% -5%, var(--campo-riflesso), transparent 70%),
    repeating-linear-gradient(0deg,
      var(--campo-chiaro) 0 12.5%,
      var(--campo-scuro) 12.5% 25%);
  border: 1px solid var(--campo-linee);
  border-radius: 8px;
  margin-bottom: var(--sp-3);
  overflow: hidden;
  box-shadow: inset 0 0 24px rgba(0,0,0,0.4);
}
.mini-pitch::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%; height: 1.5px;
  background: var(--campo-linee);
}
.mini-pitch::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 26%; aspect-ratio: 1; border: 1.5px solid var(--campo-linee);
  border-radius: 50%; transform: translate(-50%, -50%);
}
.mini-dot {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--oro-luce), var(--giallo) 70%);
  border: 2px solid var(--rosso-scuro);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 var(--glow-giallo);
  transition: box-shadow var(--dur-3) ease;
}
.formation-card:hover .mini-dot {
  box-shadow: 0 0 10px 1px var(--glow-giallo);
  animation: dotBob 1.4s ease-in-out infinite;
}
.formation-card:hover .mini-dot:nth-child(odd) { animation-delay: 0.2s; }
.formation-card:hover .mini-dot:nth-child(3n)  { animation-delay: 0.4s; }
.formation-name {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  letter-spacing: 0.06em;
  text-align: center;
  transition: color var(--dur-2) ease, text-shadow var(--dur-2) ease;
}
.formation-card:hover .formation-name { color: var(--giallo-chiaro); text-shadow: 0 0 14px var(--glow-giallo); }
/* token centrato: translate ripetuta in OGNI keyframe */
@keyframes dotBob {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, -62%); }
}

/* ============================================================
   DRAFT · layout regia live
   ============================================================ */
/* draft = dashboard da regia, a tutta larghezza */
body[data-screen="screen-draft"] main { max-width: none; padding-inline: var(--sp-6); }
.draft-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(320px, 480px) minmax(320px, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-6);
  margin-inline: auto;
  max-width: 1900px;
  align-items: start;
}

/* ---------- Sidebar sinistra = scorebug verticale + ticker ---------- */
.draft-sidebar { display: flex; flex-direction: column; gap: var(--sp-4); position: sticky; top: calc(var(--bug-h) + var(--sp-3)); }

.team-info-panel {
  background: linear-gradient(165deg, var(--card-2), var(--rosso-sangue) 90%);
  border: 1px solid rgba(242,183,5,0.3);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card), var(--bevel-top);
}
.ti-head { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--linea-osso); }
.ti-mode {
  align-self: flex-start;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  padding: 4px 12px;
  border-radius: var(--radius-bug);
  border: 1px solid var(--rosso-vivo);
  border-left-width: 3px;
  color: var(--giallo-chiaro);
  background: rgba(0,0,0,0.3);
}
.ti-goal { font-size: var(--fs-300); color: var(--testo-dim); line-height: 1.4; }
.ti-grid { display: flex; flex-direction: column; gap: var(--sp-2); }
.ti-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ti-label {
  font-family: var(--font-cond);
  font-size: var(--fs-300);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--testo-mute);
  min-width: 74px;
  font-weight: 700;
}
.ti-value { font-weight: 800; color: var(--testo); }
.ti-value.mono { font-family: var(--font-display); letter-spacing: 2px; color: var(--giallo-chiaro); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.ti-coach { flex-direction: column; align-items: flex-start; gap: var(--sp-1); padding: var(--sp-3); background: rgba(47,214,195,0.08); border: 1px solid rgba(47,214,195,0.3); border-left: 3px solid var(--rogue); border-radius: 10px; }
.ti-coach .ti-value { color: var(--rogue-luce); font-size: 1.05rem; }
.ti-badge { font-family: var(--font-cond); font-size: var(--fs-300); letter-spacing: var(--tracking-cond); font-weight: 800; color: #2a1206; background: var(--giallo); padding: 2px 9px; border-radius: var(--radius-pill); text-transform: uppercase; }

.event-log-panel {
  background: linear-gradient(165deg, var(--card-2), var(--card) 85%);
  border: 1px solid var(--rosso);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card), var(--bevel-top);
}
.elp-title { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.04em; color: var(--giallo-chiaro); margin-bottom: var(--sp-3); text-transform: uppercase; }
.event-log { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 420px; overflow-y: auto; }
.el-empty { color: var(--testo-dim); font-size: var(--fs-300); line-height: 1.5; font-style: italic; }
.el-item {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 9px 10px;
  border-radius: 9px;
  background: rgba(0,0,0,0.25);
  border-left: 3px solid var(--testo-mute);
  animation: logIn var(--dur-3) var(--ease-pop) backwards;
}
.el-item.el-pos { border-left-color: var(--rar-noncomune); }
.el-item.el-neg { border-left-color: #ff5c5c; }
.el-item.el-neu { border-left-color: var(--giallo); }
.el-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: currentColor; }
.el-item.el-pos .el-dot { color: var(--rar-noncomune); box-shadow: 0 0 8px var(--rar-noncomune); }
.el-item.el-neg .el-dot { color: #ff5c5c; box-shadow: 0 0 8px #ff5c5c; }
.el-item.el-neu .el-dot { color: var(--giallo); box-shadow: 0 0 8px var(--giallo); }
.el-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.el-name { font-weight: 800; font-size: var(--fs-300); color: var(--testo); line-height: 1.2; }
.el-text { font-size: 0.75rem; color: var(--testo-dim); line-height: 1.4; }
/* ticker laterale: ingresso da sinistra voluto (elemento non centrato) */
@keyframes logIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }

/* ---------- Tactics board (pitch) ---------- */
.pitch {
  position: relative;
  aspect-ratio: 3 / 4;
  background:
    radial-gradient(50% 35% at 18% 4%, var(--campo-riflesso), transparent 70%),
    radial-gradient(50% 35% at 82% 4%, var(--campo-riflesso), transparent 70%),
    repeating-linear-gradient(0deg,
      var(--campo-chiaro) 0 8.33%,
      var(--campo-scuro) 8.33% 16.66%),
    linear-gradient(165deg, #1f4030, #142c20 70%, #0d2016);
  border: 2px solid var(--campo-linee);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    inset 0 0 70px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.05),
    var(--shadow-lift);
}
.pitch-lines { position: absolute; inset: 0; pointer-events: none; }
.pitch-lines::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 2px solid var(--campo-linee);
}
.pitch-lines::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 22%; aspect-ratio: 1;
  border: 2px solid var(--campo-linee);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
/* aree di rigore */
.pitch::before, .pitch::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 42%; height: 13%;
  border: 2px solid var(--campo-linee);
  pointer-events: none;
}
.pitch::before { top: -2px; border-top: none; border-radius: 0 0 8px 8px; }
.pitch::after  { bottom: -2px; border-bottom: none; border-radius: 8px 8px 0 0; }

/* ---------- Slot = token-carta sul campo ---------- */
.slot {
  position: absolute;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  width: 80px;
  min-height: 60px;
  border-radius: var(--radius-token);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  text-align: center;
  font-size: 0.72rem;
  padding: 5px 3px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: box-shadow var(--dur-2) ease, background var(--dur-2) ease, border-color var(--dur-2) ease;
}
.slot.empty {
  border: 2px dashed rgba(242, 183, 5, 0.5);
  background: rgba(0, 0, 0, 0.34);
  color: var(--giallo-chiaro);
}
.slot.empty:hover {
  background: rgba(242, 183, 5, 0.16);
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 16px -2px var(--glow-giallo);
}
.slot.active {
  border: 2px solid var(--giallo);
  background: rgba(242, 183, 5, 0.2);
  animation: pulse 1.1s ease infinite;
}
/* alone pulsante: lo slot resta centrato, box-shadow non muove il box */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 183, 5, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(242, 183, 5, 0); }
}
.slot.locked-out { opacity: 0.4; cursor: not-allowed; }
.slot.filled {
  border: 1px solid rgba(242,183,5,0.4);
  background: linear-gradient(160deg, var(--card-3), var(--rosso-sangue));
  cursor: default;
  box-shadow: var(--shadow-token), var(--bevel-top);
}
.slot-role { font-family: var(--font-display); letter-spacing: 0.04em; font-size: 0.85rem; }
/* mini-gemma: chip compatto con bevel e bordo oro, coerente con .pc-rating */
.slot-rating {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--giallo);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  padding: 1px 7px;
  border-radius: 7px;
  border: 1px solid rgba(242, 183, 5, 0.5);
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(0,0,0,0.35));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -2px 4px rgba(0,0,0,0.4);
}
.slot-rating.elite {
  color: var(--oro-luce);
  border-color: var(--oro-foil);
  text-shadow: 0 0 10px var(--glow-elite);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 10px -2px var(--glow-elite), 0 0 0 1px var(--oro-foil);
}
.slot-rating.hidden-q { padding: 1px 9px; }
.slot-rating.hidden-q { color: var(--giallo); font-family: var(--font-display); }
.slot-name { font-weight: 800; font-size: 0.7rem; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-season {
  margin-top: 2px;
  padding: 1px 6px;
  background: rgba(242, 183, 5, 0.18);
  border-radius: var(--radius-pill);
  color: var(--giallo-chiaro);
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: var(--tracking-cond);
}

/* reveal del pick: cresce dal centro, translate ripetuta in ogni keyframe */
.slot.revealing { animation: slotPop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); z-index: 5; }
@keyframes slotPop {
  0%   { transform: translate(-50%, -50%) scale(0.6); }
  55%  { transform: translate(-50%, -50%) scale(1.22); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
/* cornice rarità sul token schierato (stessi tier delle player-card) */
.slot.reveal-elite { box-shadow: var(--shadow-token), 0 0 0 2px var(--oro-foil), 0 0 28px 4px var(--glow-elite); }
.slot.reveal-top   { box-shadow: var(--shadow-token), 0 0 0 2px var(--rar-top), 0 0 16px 2px rgba(242,183,5,0.5); }
.slot.reveal-mid   { box-shadow: var(--shadow-token), 0 0 0 2px var(--rar-mid); }
.slot.reveal-low   { box-shadow: var(--shadow-token), 0 0 0 2px var(--rar-low); }

/* spark sui top: centrato, translate base in ogni keyframe */
.spark {
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--giallo);
  pointer-events: none;
  animation: sparkFly 0.7s ease-out forwards;
}
@keyframes sparkFly {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); opacity: 0; }
}

/* ============================================================
   OPTIONS PANEL · "mazzo" di carte TCG
   ============================================================ */
.options-panel {
  background: linear-gradient(165deg, var(--card-2), var(--card) 85%);
  border: 1px solid var(--rosso);
  border-radius: var(--radius);
  padding: var(--sp-6);
  position: sticky;
  top: calc(var(--bug-h) + var(--sp-3));
  box-shadow: var(--shadow-card), var(--bevel-top);
}
.options-hint { color: var(--testo-dim); font-size: var(--fs-400); min-height: 2.6em; margin-bottom: var(--sp-4); line-height: 1.5; }
.options-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-4); min-height: 130px; }

.draft-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }

/* ============================================================
   CARTA TCG · player-card (cuore del sistema, cornice per rarità)
   ============================================================ */
.player-card {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(165deg, var(--card-3), var(--rosso-sangue) 95%);
  border: 2px solid var(--rar-low);
  border-radius: var(--radius-card);
  padding: var(--sp-3) 10px 10px;
  cursor: grab;
  user-select: none;
  overflow: hidden;
  box-shadow: var(--shadow-card), var(--bevel-top), var(--bevel-bottom);
  transition: transform var(--dur-2) var(--ease-pop), border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
/* cornice gradiente (default = bronzo/argento neutro <82) */
.player-card::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, rgba(205,214,223,0.18), transparent 45%, rgba(140,122,110,0.18));
  pointer-events: none;
}
/* sheen/foil diagonale */
.player-card::after {
  content: "";
  position: absolute; top: 0; left: -130%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.player-card:hover { transform: translateY(-4px) scale(1.02); border-color: var(--rar-mid); box-shadow: var(--shadow-lift), var(--bevel-top); }
.player-card:hover::after { left: 130%; }
.player-card:active { cursor: grabbing; }
.player-card.dragging { opacity: 0.45; }

/* tier ≥82 = oro pieno */
.player-card.top {
  border-color: var(--rar-top);
}
.player-card.top::before {
  background: linear-gradient(160deg, rgba(242,183,5,0.28), transparent 50%, rgba(242,183,5,0.18));
}
.player-card.top:hover { box-shadow: var(--shadow-lift), 0 0 18px -4px var(--glow-giallo); }

/* tier ≥90 = elite foil oro caldo */
.player-card.elite {
  border-color: var(--oro-foil);
  box-shadow: var(--shadow-foil-elite);
  background:
    linear-gradient(165deg, #4a2410, #3a1410 60%, var(--rosso-sangue));
}
.player-card.elite::before {
  background: linear-gradient(135deg,
    rgba(255,224,138,0.45),
    rgba(255,158,44,0.15) 35%,
    rgba(255,224,138,0.35) 65%,
    rgba(255,158,44,0.2));
  background-size: 200% 200%;
  animation: foilShift 4s ease-in-out infinite;
}
.player-card.elite:hover { box-shadow: var(--shadow-foil-elite), 0 0 30px -4px var(--glow-elite); }
@keyframes foilShift {
  0%,100% { background-position: 0% 0%; }
  50%     { background-position: 100% 100%; }
}

/* gemma rating in alto a destra: riquadro con bevel e bordo oro (overlay TCG) */
.pc-rating {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 2;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--giallo);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  border-radius: 12px;
  border: 1.5px solid rgba(242, 183, 5, 0.55);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(242,183,5,0.22), transparent 60%),
    linear-gradient(160deg, var(--card-3), var(--rosso-sangue));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -3px 6px rgba(0,0,0,0.45),
    0 2px 6px rgba(0,0,0,0.5);
}
.player-card.top .pc-rating {
  color: var(--giallo-chiaro);
  border-color: var(--rar-top);
  text-shadow: 0 0 10px rgba(242,183,5,0.4);
}
.player-card.elite .pc-rating {
  color: var(--oro-luce);
  border-color: var(--oro-foil);
  text-shadow: 0 0 14px var(--glow-elite);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -3px 6px rgba(0,0,0,0.4),
    0 0 14px -2px var(--glow-elite),
    0 0 0 1px var(--oro-foil);
}
/* mystery: niente riquadro pieno, solo il "?" centrato come prima */
.player-card.mystery .pc-rating {
  background: none;
  border-color: rgba(242, 183, 5, 0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.pc-name { font-weight: 800; margin-top: var(--sp-2); font-size: 0.92rem; line-height: 1.15; padding-right: 52px; }
.pc-season {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 2px 8px;
  background: rgba(242, 183, 5, 0.16);
  border: 1px solid rgba(242, 183, 5, 0.5);
  border-radius: var(--radius-pill);
  color: var(--giallo-chiaro);
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: var(--tracking-cond);
}
.pc-roles {
  color: var(--giallo-chiaro);
  font-family: var(--font-cond);
  font-size: var(--fs-300);
  letter-spacing: var(--tracking-cond);
  margin-top: var(--sp-2);
  opacity: 0.85;
  text-transform: uppercase;
}

/* retro-carta mystery */
.player-card.mystery {
  background: repeating-linear-gradient(45deg, #1a0810 0 10px, #240b14 10px 20px);
  border-color: var(--giallo);
  text-align: center;
}
.player-card.mystery::before { background: none; }
.player-card.mystery .pc-name { color: var(--giallo-chiaro); }
.player-card.mystery .pc-season { background: none; border: none; color: var(--testo-dim); font-weight: 400; }
.mystery-mark {
  font-size: 2.4rem !important;
  color: var(--giallo) !important;
  text-shadow: 0 0 12px var(--glow-giallo);
}

/* reveal centrato: fade + scale dal centro, niente slide laterale */
.card-reveal {
  opacity: 0;
  transform-origin: center center;
  transform: scale(0.85);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 1.3, 0.4, 1), box-shadow 0.4s ease;
}
.card-reveal.revealed {
  opacity: 1;
  transform: scale(1);
}
/* luce d'enfasi per tier al reveal */
.card-reveal.glow-elite.revealed { box-shadow: var(--shadow-foil-elite), 0 0 24px 4px var(--glow-elite); animation: eliteFlash 0.6s ease 0.05s; }
.card-reveal.glow-top.revealed   { box-shadow: var(--shadow-card), 0 0 16px 2px rgba(242, 183, 5, 0.45); }
.card-reveal.glow-mid.revealed   { box-shadow: var(--shadow-card), 0 0 10px 1px rgba(245, 233, 220, 0.3); }
.card-reveal.glow-low.revealed   { box-shadow: var(--shadow-card), 0 0 6px rgba(120, 120, 120, 0.3); }
@keyframes eliteFlash {
  0%   { box-shadow: 0 0 0 0 rgba(242, 183, 5, 0); }
  40%  { box-shadow: 0 0 34px 8px var(--glow-elite), 0 0 0 2px var(--oro-foil); }
  100% { box-shadow: 0 0 24px 4px rgba(242, 183, 5, 0.7), 0 0 0 2px var(--oro-foil); }
}

/* ============================================================
   BOTTONI · HUD di gioco
   ============================================================ */
.btn {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  border-radius: var(--radius);
  padding: 13px 24px;
  min-height: var(--tap-min);
  cursor: pointer;
  border: none;
  text-transform: uppercase;
  transition: transform var(--dur-1) ease, box-shadow var(--dur-2) ease, opacity var(--dur-1) ease;
}
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn:not(:disabled):hover { transform: translateY(-2px); }
.btn:not(:disabled):active { transform: translateY(1px) scale(0.98); }
.btn.primary {
  background: linear-gradient(180deg, var(--rosso-vivo), var(--rosso) 55%, var(--rosso-scuro));
  color: var(--testo);
  flex: 1;
  box-shadow: var(--bevel-top), var(--shadow-card);
}
.btn.primary:not(:disabled) { box-shadow: var(--bevel-top), var(--shadow-card), 0 0 22px -6px var(--glow-rosso); }
.btn.primary:not(:disabled):hover { box-shadow: var(--bevel-top), var(--shadow-lift), 0 0 26px -4px var(--glow-rosso); }
.btn.ghost {
  background: transparent;
  border: 1.5px solid var(--giallo);
  color: var(--giallo);
  box-shadow: var(--bevel-top);
}
.btn.ghost:hover { background: rgba(242,183,5,0.2); border-color: var(--giallo-chiaro); }

/* ============================================================
   PERSONALIZZATA · console tecnica con display LED
   ============================================================ */
.custom-form {
  max-width: 640px;
  margin-inline: auto;
  background: linear-gradient(165deg, var(--card-2), var(--card) 85%);
  border: 1px solid var(--rosso);
  border-radius: var(--radius);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card), var(--bevel-top);
}
.cfg-row { margin-bottom: var(--sp-6); }
.cfg-label {
  display: block;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  color: var(--giallo-chiaro);
  margin-bottom: var(--sp-3);
  font-size: 1.05rem;
  text-transform: uppercase;
}
.cfg-control { display: flex; align-items: center; gap: var(--sp-4); }
.cfg-control input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--rosso), var(--giallo));
  outline: none;
}
.cfg-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--oro-luce), var(--giallo) 70%);
  border: 2px solid var(--rosso-scuro);
  cursor: pointer;
  box-shadow: var(--shadow-token);
}
.cfg-control input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--oro-luce), var(--giallo) 70%);
  border: 2px solid var(--rosso-scuro);
  cursor: pointer;
  box-shadow: var(--shadow-token);
}
.cfg-control input[type="range"]:focus-visible { box-shadow: 0 0 0 3px rgba(242, 183, 5, 0.4); }
.cfg-control output {
  flex: 0 0 auto;
  min-width: 50px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--giallo);
  background: var(--bg-0);
  border: 1px solid rgba(242,183,5,0.25);
  border-radius: var(--radius-bug);
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 12px rgba(242,183,5,0.12);
}
.cfg-warning { min-height: 1.2em; font-size: var(--fs-400); color: transparent; margin-bottom: var(--sp-4); }
.cfg-warning.soft { color: var(--giallo-chiaro); }
.custom-form .btn { width: 100%; }

/* ============================================================
   ALLENATORE · reveal scenografico (carta evento leggendaria)
   ============================================================ */
#coach-body { max-width: 720px; margin-inline: auto; }
.coach-card {
  position: relative;
  isolation: isolate;
  transform-origin: center center;
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(242,183,5,0.14), transparent 60%),
    linear-gradient(165deg, var(--card-3), var(--rosso-sangue));
  border: 2px solid var(--giallo);
  border-radius: 18px;
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(242, 183, 5, 0.25), var(--shadow-lift);
  animation: coachReveal 0.7s cubic-bezier(0.2, 1.2, 0.3, 1) backwards;
  margin-bottom: var(--sp-4);
}
.coach-card::before {
  content: "";
  position: absolute; inset: -40%;
  z-index: -1;
  background: radial-gradient(circle at 50% 30%, var(--glow-giallo), transparent 55%);
  opacity: 0.35;
  animation: coachAura 3.5s ease-in-out infinite;
}
.coach-card::after {
  content: "";
  position: absolute; inset: -60%;
  z-index: -2;
  background: repeating-conic-gradient(from 0deg, rgba(242,183,5,0.06) 0deg 8deg, transparent 8deg 24deg);
  animation: coachRays 24s linear infinite;
}
.coach-tag { display: block; font-family: var(--font-cond); font-size: var(--fs-300); letter-spacing: var(--tracking-wide); font-weight: 800; text-transform: uppercase; color: var(--testo-mute); margin-bottom: var(--sp-3); animation: fadeSoft 0.6s 0.2s ease backwards; }
.coach-name {
  font-family: var(--font-display); font-size: 2.1rem; letter-spacing: 0.02em;
  color: var(--giallo-chiaro); margin-bottom: var(--sp-3);
  text-shadow: 0 0 22px var(--glow-giallo);
  animation: coachName 0.7s 0.25s cubic-bezier(0.2,1.3,0.4,1) backwards;
}
.coach-meta { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.coach-modulo, .coach-bonus {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  transform-origin: center center;
  animation: badgePop 0.5s 0.45s cubic-bezier(0.2,1.4,0.4,1) backwards;
}
.coach-modulo { background: rgba(245, 233, 220, 0.12); color: var(--testo); border: 1px solid rgba(245,233,220,0.3); }
.coach-bonus { background: var(--giallo); color: #2a1206; box-shadow: 0 0 16px -2px var(--glow-giallo); animation-delay: 0.58s; }
.coach-nota { color: var(--testo-dim); line-height: 1.5; font-style: italic; animation: fadeSoft 0.6s 0.6s ease backwards; }
.coach-hint { color: var(--testo-dim); line-height: 1.5; margin-bottom: var(--sp-4); }
#screen-coach .btn { min-width: 240px; }
@keyframes coachReveal {
  from { opacity: 0; transform: translateY(30px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes coachName {
  from { opacity: 0; letter-spacing: 0.3em; filter: blur(4px); }
  to   { opacity: 1; letter-spacing: 0.02em; filter: blur(0); }
}
@keyframes badgePop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes coachAura {
  0%, 100% { opacity: 0.28; transform: scale(1); }
  50%      { opacity: 0.5;  transform: scale(1.08); }
}
@keyframes coachRays { to { transform: rotate(360deg); } }
@keyframes fadeSoft { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   BONUS · pack-opening TCG (4 rarità)
   ============================================================ */
.r-comune    { --rar: var(--rar-comune); }
.r-noncomune { --rar: var(--rar-noncomune); }
.r-raro      { --rar: var(--rar-raro); }
.r-epico     { --rar: var(--rar-epico); }

.bonus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); max-width: 920px; margin-inline: auto; }
.bonus-card {
  text-align: left;
  background:
    radial-gradient(140% 130% at 0% 0%, color-mix(in srgb, var(--rar) 16%, transparent), transparent 55%),
    linear-gradient(160deg, var(--card-3), var(--card) 78%);
  border: 2px solid var(--rar, var(--rosso));
  border-radius: var(--radius-card);
  padding: var(--sp-5);
  cursor: pointer;
  color: var(--testo);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: var(--tap-min);
  box-shadow: var(--shadow-card), var(--bevel-top), var(--bevel-bottom);
  transition: transform var(--dur-2) var(--ease-pop), box-shadow var(--dur-2) ease, border-color var(--dur-2) ease;
  animation: bonusIn 0.5s var(--ease-pop) backwards;
}
.bonus-card:nth-child(1) { animation-delay: 0.05s; }
.bonus-card:nth-child(2) { animation-delay: 0.16s; }
.bonus-card:nth-child(3) { animation-delay: 0.27s; }
.bonus-card::before {
  content: "";
  position: absolute; inset: -2px; z-index: -1;
  background: radial-gradient(100px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--rar) 70%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-2) ease;
}
.bonus-card::after {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.bonus-card:hover, .bonus-card:focus-visible {
  transform: translateY(-6px) scale(1.015);
  border-color: var(--rar, var(--giallo));
  box-shadow: var(--shadow-lift), 0 0 26px -2px color-mix(in srgb, var(--rar) 55%, transparent);
  outline: none;
}
.bonus-card:hover::before, .bonus-card:focus-visible::before { opacity: 1; }
.bonus-card:hover::after, .bonus-card:focus-visible::after { left: 130%; }
.bonus-card:active { transform: translateY(-2px) scale(0.99); }
/* foil rinforzato su raro/epico per gerarchia */
.bonus-card.r-raro  { box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--rar-raro) 50%, transparent), var(--bevel-top); }
.bonus-card.r-epico {
  box-shadow: var(--shadow-card), 0 0 0 1px var(--rar-epico), 0 0 22px -4px var(--rar-epico), var(--bevel-top);
}
.bonus-card.r-epico::before { background: radial-gradient(120px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--rar-epico) 80%, transparent), transparent 62%); }
.bonus-rar {
  align-self: flex-start;
  font-family: var(--font-cond);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 800;
  color: #14060b;
  background: var(--rar, #999);
  padding: 3px 11px;
  border-radius: var(--radius-bug);
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--rar) 80%, transparent);
}
.bonus-name {
  font-family: var(--font-display); font-size: var(--fs-600); letter-spacing: 0.02em;
  color: var(--rar, var(--giallo-chiaro)); line-height: 1.1;
  transition: text-shadow var(--dur-2) ease;
}
.bonus-card:hover .bonus-name { text-shadow: 0 0 16px color-mix(in srgb, var(--rar) 70%, transparent); }
.bonus-desc { color: var(--testo-dim); font-size: var(--fs-400); line-height: 1.5; }
@keyframes bonusIn {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   RIEPILOGO ROGUE (la stagione prende forma)
   ============================================================ */
#rogue-summary-body { max-width: 760px; margin-inline: auto; }
.rs-section { margin-bottom: var(--sp-6); }
.rs-section h4 { font-family: var(--font-display); letter-spacing: 0.04em; color: var(--giallo-chiaro); margin-bottom: var(--sp-3); font-size: var(--fs-600); text-transform: uppercase; }
.rs-card {
  background: linear-gradient(160deg, var(--card-3), var(--card) 78%);
  border: 2px solid var(--rar, var(--rosso));
  border-radius: var(--radius-card);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  box-shadow: var(--shadow-card), var(--bevel-top);
}
.rs-events { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.rs-events li {
  background: rgba(0,0,0,0.22);
  border-left: 4px solid var(--testo-mute);
  border-radius: 0 10px 10px 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-400);
  line-height: 1.5;
  color: var(--testo-dim);
}
.rs-events li strong { color: var(--testo); }
.rs-events li.ev-pos { border-left-color: var(--rar-noncomune); }
.rs-events li.ev-neg, .rs-events li.ev-ripick { border-left-color: #ff5c5c; }
.rs-events li.ev-mystery { border-left-color: var(--giallo); }
.rs-events li.ev-pts { border-left-color: var(--rar-raro); }
.rs-events li.ev-spread { border-left-color: var(--rar-epico); }
.rs-events li.ev-nulla { border-left-color: #6b6b6b; opacity: 0.8; }
.rs-events li.ev-immune { border-left-color: var(--rogue); }
.rs-hint { color: var(--testo-dim); font-style: italic; margin-top: var(--sp-2); }
.lr-delta { font-weight: 800; font-size: var(--fs-300); margin-left: 4px; }
.lr-delta.up { color: var(--rar-noncomune); }
.lr-delta.down { color: #ff5c5c; }

/* ============================================================
   MODALE IMPREVISTO · carta evento a tutto schermo
   ============================================================ */
.pick-modal {
  position: fixed; inset: 0;
  background: rgba(5, 2, 4, 0.86);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--sp-5);
  cursor: pointer;
}
.pick-modal.show { display: flex; animation: fadeSoft 0.2s ease; }
/* FIX: keyframe dedicato SENZA translate (la card è già centrata dal flex) */
.pm-card {
  background: linear-gradient(160deg, var(--card-3) 0%, var(--card) 60%, rgba(5,2,4,0.9) 100%);
  border: 2px solid var(--rosso);
  border-radius: 22px;
  padding: var(--sp-7) var(--sp-7);
  max-width: 480px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  text-align: center;
  cursor: default;
  transform-origin: center center;
  box-shadow: var(--shadow-lift), 0 24px 60px rgba(0,0,0,0.55);
  animation: pmPop 0.45s cubic-bezier(0.2, 1.3, 0.4, 1);
  position: relative;
}
@keyframes pmPop {
  0%   { transform: scale(0.55) translateY(12px); opacity: 0; }
  60%  { transform: scale(1.03) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.pm-card.pm-pos {
  border-color: var(--rar-noncomune);
  background: linear-gradient(160deg, rgba(30,70,35,0.6) 0%, var(--card) 55%);
  box-shadow: var(--shadow-lift), 0 24px 60px rgba(0,0,0,0.55), 0 0 40px rgba(95,208,106,0.2);
}
.pm-card.pm-neg {
  border-color: #ff5c5c;
  background: linear-gradient(160deg, rgba(70,18,18,0.6) 0%, var(--card) 55%);
  box-shadow: var(--shadow-lift), 0 24px 60px rgba(0,0,0,0.55), 0 0 40px rgba(255,92,92,0.2);
}
.pm-card.pm-mystery {
  border-color: var(--giallo);
  background: linear-gradient(160deg, rgba(60,48,5,0.6) 0%, var(--card) 55%);
  box-shadow: var(--shadow-lift), 0 24px 60px rgba(0,0,0,0.55), 0 0 40px rgba(242,183,5,0.2);
}
.pm-card.pm-repick {
  border-color: #ff8a3d;
  background: linear-gradient(160deg, rgba(65,30,5,0.65) 0%, var(--card) 55%);
  box-shadow: var(--shadow-lift), 0 24px 60px rgba(0,0,0,0.55), 0 0 40px rgba(255,138,61,0.2);
}
.pm-header { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.pm-tag {
  display: inline-block;
  font-family: var(--font-cond);
  font-size: 0.68rem;
  letter-spacing: var(--tracking-wide);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--testo-mute);
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 3px 8px;
}
.pm-card.pm-pos .pm-tag { color: var(--rar-noncomune); background: rgba(95,208,106,0.12); }
.pm-card.pm-neg .pm-tag { color: #ff5c5c; background: rgba(255,92,92,0.12); }
.pm-card.pm-mystery .pm-tag { color: var(--giallo); background: rgba(242,183,5,0.12); }
.pm-card.pm-repick .pm-tag { color: #ff8a3d; background: rgba(255,138,61,0.12); }
.pm-icon { font-size: 1.4rem; line-height: 1; }
.pm-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-4);
  line-height: 1.05;
}
.pm-delta {
  display: inline-block;
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-4);
  padding: 4px 18px;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
}
.pm-delta.up { color: var(--rar-noncomune); }
.pm-delta.down { color: #ff5c5c; }
.pm-delta.neutral { color: var(--giallo); }
.pm-card p {
  color: var(--testo-dim);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: var(--sp-6);
  max-width: 38ch;
  margin-left: auto;
  margin-right: auto;
}
.pm-card p strong { color: var(--testo); font-weight: 700; }
.pm-ok { width: 100%; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; }
.pm-hint { display: block; margin-top: var(--sp-3); font-size: 0.72rem; color: var(--testo-dim); opacity: 0.5; }

/* sfondi custom evento, intatti (gag volute) */
.pm-card.pm-ev-santon {
  border-color: #1ec8b0;
  background:
    radial-gradient(120% 100% at 50% 120%, rgba(30,200,176,0.28), transparent 60%),
    linear-gradient(165deg, #06242a, #041a1f 70%);
  box-shadow: var(--shadow-lift), 0 0 36px rgba(30,200,176,0.4);
  overflow: hidden;
  position: relative;
}
.pm-card.pm-ev-santon::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(40% 50% at 20% 0%, rgba(255,0,170,0.25), transparent 70%),
    radial-gradient(40% 50% at 80% 0%, rgba(0,200,255,0.25), transparent 70%);
  animation: raveLights 0.8s steps(2) infinite;
  pointer-events: none;
}
.pm-card.pm-ev-santon > * { position: relative; z-index: 2; }
.pm-card.pm-ev-santon h3 { color: var(--rogue-luce); text-shadow: 0 0 16px rgba(30,200,176,0.7); }
.pm-card.pm-ev-santon .crab-rave {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 2rem;
  margin: 4px 0 var(--sp-3);
  line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}
.pm-card.pm-ev-santon .crab-rave span { display: inline-block; animation: crabDance 0.5s ease-in-out infinite; }
.pm-card.pm-ev-santon .crab-rave span:nth-child(2) { animation-delay: 0.1s; }
.pm-card.pm-ev-santon .crab-rave span:nth-child(3) { animation-delay: 0.2s; }
.pm-card.pm-ev-santon .crab-rave span:nth-child(4) { animation-delay: 0.3s; }
.pm-card.pm-ev-santon .crab-rave span:nth-child(5) { animation-delay: 0.4s; }
.pm-card.pm-ev-santon .crab-rave::before,
.pm-card.pm-ev-santon .crab-rave::after {
  content: "🎉";
  position: absolute;
  bottom: -4px;
  font-size: 1.1rem;
  animation: confettiFloat 1.6s ease-in infinite;
  opacity: 0.8;
}
.pm-card.pm-ev-santon .crab-rave::before { left: 12%; }
.pm-card.pm-ev-santon .crab-rave::after  { right: 12%; animation-delay: 0.8s; }
@keyframes crabDance {
  0%, 100% { transform: translateY(0) rotate(-12deg) scaleX(1); }
  25%      { transform: translateY(-10px) rotate(0deg) scaleX(1.1); }
  50%      { transform: translateY(0) rotate(12deg) scaleX(1); }
  75%      { transform: translateY(-6px) rotate(0deg) scaleX(0.95); }
}
@keyframes raveLights { 0% { opacity: 0.5; } 100% { opacity: 1; } }
@keyframes confettiFloat {
  0%   { transform: translateY(0) rotate(0); opacity: 0; }
  20%  { opacity: 0.9; }
  100% { transform: translateY(-70px) rotate(160deg); opacity: 0; }
}

/* ============================================================
   SOSTA DI METÀ STAGIONE · studio dell'intervallo
   ============================================================ */
#break-body { max-width: 760px; margin-inline: auto; }
.break-standings { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.bs-item {
  background: linear-gradient(165deg, var(--rosso-sangue), var(--bg-0));
  border: 2px solid var(--rosso);
  border-radius: var(--radius);
  padding: var(--sp-5);
  text-align: center;
  box-shadow: var(--shadow-bug), inset 0 0 20px rgba(0,0,0,0.4);
}
.bs-label { display: block; font-family: var(--font-cond); color: var(--testo-mute); font-size: var(--fs-300); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--sp-2); }
.bs-big { font-family: var(--font-display); font-size: 2.6rem; color: var(--giallo); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(242,183,5,0.3); }
.bs-sub { display: block; color: var(--testo-dim); margin-top: var(--sp-2); font-size: var(--fs-400); }
.break-intro { color: var(--testo-dim); line-height: 1.55; margin-bottom: var(--sp-4); }
.break-intro strong { color: var(--testo); }
.break-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.break-actions .btn { flex: 1; min-width: 200px; }

.market-hint { color: var(--giallo-chiaro); font-weight: 700; margin: var(--sp-4) 0 var(--sp-3); }
.market-lineup { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.market-player {
  background: linear-gradient(160deg, var(--card-2), var(--card) 85%);
  border: 1px solid var(--rosso);
  border-left: 3px solid var(--rosso-vivo);
  border-radius: 10px;
  padding: 10px;
  min-height: var(--tap-min);
  cursor: pointer;
  color: var(--testo);
  text-align: left;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 6px;
  transition: border-color var(--dur-1) ease, transform var(--dur-1) ease, box-shadow var(--dur-2) ease;
}
.market-player:hover { border-color: var(--giallo); transform: translateY(-2px); box-shadow: 0 0 16px -6px var(--glow-giallo); }
.mp-role { font-family: var(--font-display); color: var(--giallo-chiaro); font-size: 0.8rem; }
.mp-name { font-weight: 700; font-size: var(--fs-300); }
.mp-season { display: none; }
.mp-rating { font-family: var(--font-display); color: var(--giallo); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.market-options { margin: var(--sp-3) 0; }

/* ============================================================
   RISULTATO · telecronaca post-partita
   ============================================================ */
/* scoreboard = tabellone che si accende */
.scoreboard {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: var(--sp-3);
  background: linear-gradient(180deg, var(--rosso-sangue), var(--bg-0));
  border: 2px solid var(--rosso-vivo);
  border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-bug), inset 0 0 30px rgba(0,0,0,0.5);
  position: relative;
}
.scoreboard::before {
  content: "";
  position: absolute; left: var(--sp-4); right: var(--sp-4); top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--giallo), transparent);
}
.scoreboard.gold { border-color: var(--giallo); box-shadow: var(--shadow-bug), 0 0 26px rgba(242, 183, 5, 0.35), inset 0 0 30px rgba(0,0,0,0.5); }
.scoreboard.doom { border-color: var(--doom); box-shadow: var(--shadow-bug), 0 0 22px rgba(212,68,68,0.3), inset 0 0 30px rgba(0,0,0,0.5); }
.sb-label { display: block; font-family: var(--font-cond); color: var(--testo-mute); font-size: var(--fs-300); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--sp-2); }
.sb-big, .sb-pos {
  display: inline-block;
  transform-origin: center center;
  animation: sbIgnite 0.6s var(--ease-pop) 0.1s backwards;
}
.sb-big { font-family: var(--font-display); font-size: var(--fs-num-xl); color: var(--giallo); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(242,183,5,0.4); }
.sb-pos { font-family: var(--font-display); font-size: var(--fs-700); line-height: 1.1; }
.sb-record { display: block; color: var(--testo-dim); margin-top: var(--sp-2); font-size: var(--fs-400); }
/* numeri crescono dal centro */
@keyframes sbIgnite {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* verdict = lower-third che scorre da sinistra */
.verdict {
  border-left: 5px solid var(--giallo);
  background: linear-gradient(160deg, var(--card-2), var(--card) 85%);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-card);
  animation: lowerThird var(--dur-4) var(--ease-cut) both;
}
.verdict.gold { border-color: var(--giallo); }
.verdict.silver { border-color: var(--rar-mid); }
.verdict.bronze { border-color: #c08a4d; }
.verdict.doom { border-color: var(--doom); }
.verdict h3 { font-family: var(--font-display); letter-spacing: 0.03em; font-size: var(--fs-600); margin-bottom: var(--sp-2); text-transform: uppercase; }
.verdict p { color: var(--testo-dim); line-height: 1.55; }

.quotes { background: linear-gradient(160deg, var(--card-2), var(--card) 85%); border: 1px solid var(--rosso); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); box-shadow: var(--shadow-card); }
.quotes h4, .lineup-recap h4 { font-family: var(--font-display); letter-spacing: 0.03em; color: var(--giallo-chiaro); margin-bottom: var(--sp-2); text-transform: uppercase; }
.quotes p { color: var(--testo-dim); line-height: 1.55; font-size: var(--fs-400); }
.quotes strong { color: var(--testo); }

.awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.award-card { background: linear-gradient(165deg, var(--card-3), var(--rosso-sangue)); border: 1px solid var(--giallo); border-radius: var(--radius-card); padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-card), var(--bevel-top); }
.award-label { display: block; font-family: var(--font-cond); color: var(--giallo-chiaro); font-size: var(--fs-300); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--sp-2); }
.award-name { font-family: var(--font-display); font-size: var(--fs-600); letter-spacing: 0.02em; display: block; }
.award-name em { font-family: var(--font-body); font-style: normal; color: var(--testo-dim); font-size: var(--fs-400); }
.award-detail { color: var(--testo-dim); font-size: var(--fs-400); display: block; margin-top: var(--sp-2); }

.engine { background: var(--card); border: 1px dashed var(--rosso); border-radius: var(--radius); padding: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-5); }
.engine summary { cursor: pointer; font-weight: 800; color: var(--giallo-chiaro); }
.engine p { color: var(--testo-dim); line-height: 1.6; margin-top: var(--sp-3); font-size: var(--fs-400); }
.engine strong { color: var(--testo); }

.lineup-recap { background: linear-gradient(160deg, var(--card-2), var(--card) 85%); border: 1px solid var(--rosso); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); box-shadow: var(--shadow-card); }
.lineup-recap ul { list-style: none; columns: 2; gap: var(--sp-6); }
.lineup-recap li { padding: 5px 0; font-size: var(--fs-400); break-inside: avoid; }
.lr-role { display: inline-block; width: 42px; font-family: var(--font-display); color: var(--giallo-chiaro); letter-spacing: 0.04em; font-size: 0.8rem; }
.lineup-recap em { color: var(--testo-dim); font-style: normal; font-size: 0.82rem; }
.lineup-recap strong { color: var(--giallo); }
.rec-coach {
  color: var(--giallo-chiaro);
  font-size: var(--fs-400);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--linea-osso);
}
.rec-coach strong { color: var(--testo); }

.result-actions { display: flex; justify-content: center; margin-top: var(--sp-2); }
.result-actions .btn { flex: 0 0 auto; min-width: 220px; }

/* quadranti animati (ingresso scaglionato) */
.quadrant {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.quadrant.show { opacity: 1; transform: translateY(0); }

/* ---------- Riepilogo finale Rogue ---------- */
.rogue-recap .rc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: 4px; }
.rc-col { background: rgba(0,0,0,0.22); border-radius: 10px; padding: var(--sp-3); }
.rc-head {
  display: block; font-family: var(--font-display); letter-spacing: 0.04em;
  font-size: 0.95rem; margin-bottom: var(--sp-3); padding-bottom: 6px;
  border-bottom: 1px solid var(--linea-osso);
  text-transform: uppercase;
}
.rc-head-pos { color: #6fe07a; }
.rc-head-neg { color: #ff7a7a; }
.rc-head-neu { color: var(--giallo-chiaro); }
.rc-col.rc-pos { border-left: 3px solid var(--rar-noncomune); }
.rc-col.rc-neg { border-left: 3px solid #ff5c5c; }
.rc-neu-wrap { margin-top: var(--sp-3); background: rgba(0,0,0,0.22); border-radius: 10px; padding: var(--sp-3); border-left: 3px solid var(--giallo); }
.rogue-recap .rs-events li { display: block; margin-bottom: var(--sp-2); line-height: 1.4; font-size: 0.85rem; }
.rogue-recap .rs-events li:last-child { margin-bottom: 0; }
.rc-when {
  display: inline-block; font-family: var(--font-cond); font-size: 0.62rem; letter-spacing: var(--tracking-cond); text-transform: uppercase;
  font-weight: 800; color: var(--testo-mute);
  background: rgba(245,233,220,0.1); border-radius: var(--radius-pill);
  padding: 1px 8px; margin-right: 6px; vertical-align: middle;
}
.rc-none { color: var(--testo-dim); font-style: italic; font-size: 0.82rem; }
.pick-events-recap { margin-top: var(--sp-2); }

/* ============================================================
   MISSION BANNER · breaking news / caption TV
   ============================================================ */
.mission-banner {
  position: relative;
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  text-align: center;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-500);
  line-height: 1.3;
  text-transform: uppercase;
  overflow: hidden;
  animation: bannerDrop var(--dur-4) var(--ease-cut) both;
}
/* filo luminoso superiore */
.mission-banner::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
}
.mission-banner.ok { background: linear-gradient(90deg, #2a1a4d, #4a2f8a); color: #d8ccff; border: 2px solid var(--serieb); }
.mission-banner.fail { background: var(--card); color: var(--testo-dim); border: 2px solid var(--rosso); }
.mission-banner.epicfail { background: linear-gradient(90deg, var(--rosso-scuro), var(--rosso)); color: var(--oro-luce); border: 2px solid var(--giallo); }
.mission-banner.perfect {
  background: linear-gradient(90deg, var(--rosso), var(--giallo));
  color: #2a1206;
  border: 2px solid #fff;
  box-shadow: 0 0 26px rgba(242, 183, 5, 0.6);
}
.mission-banner.rogue { background: linear-gradient(90deg, #0d3b36, #1a6b60); color: var(--rogue-luce); border: 2px solid var(--rogue); }
@keyframes bannerDrop {
  0%   { opacity: 0; transform: translateY(-16px); }
  70%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   TOAST + FOOTER
   ============================================================ */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + var(--safe-b));
  transform: translate(-50%, 20px);
  background: var(--giallo);
  color: #2a1206;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: var(--radius-bug);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) ease, transform var(--dur-2) ease;
  max-width: 90vw;
  text-align: center;
  z-index: 110;
  box-shadow: var(--shadow-bug);
}
/* toast centrato: translate base ripetuta nello stato finale */
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.footer {
  text-align: center;
  color: var(--testo-dim);
  font-size: 0.75rem;
  padding: var(--sp-4);
  padding-bottom: calc(var(--sp-4) + var(--safe-b));
  border-top: 1px solid var(--card-2);
}

/* ============================================================
   RESPONSIVE · mobile-first prioritario
   ============================================================ */

/* tablet largo */
@media (max-width: 1100px) and (min-width: 861px) {
  .draft-layout { grid-template-columns: minmax(200px, 250px) 1fr; }
  .draft-layout .options-panel { grid-column: 1 / -1; }
}

/* draft a colonna singola: ordine campo → carte → sidebar */
@media (max-width: 860px) {
  .draft-layout { grid-template-columns: 1fr; }
  #pitch { order: 1; scroll-margin-top: 104px; }
  .options-panel { order: 2; position: static; }
  .draft-sidebar { order: 3; position: static; flex-direction: row; flex-wrap: wrap; }
  .team-info-panel, .event-log-panel { flex: 1 1 240px; }
  .event-log { max-height: 200px; }
  .lineup-recap ul { columns: 1; }
  .scoreboard { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* telefono */
@media (max-width: 600px) {
  /* scorebug mobile: DUE righe, riga 1 brand centrato, riga 2 meta+pills (scroll orizz.) */
  .topbar {
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--sp-3);
    row-gap: 6px;
    padding: calc(var(--sp-2) + var(--safe-t)) var(--sp-3) var(--sp-2);
    min-height: 0;
  }
  .scorebug__brand { flex: 1 1 100%; align-items: center; text-align: center; }
  .brand { font-size: 1.4rem; }
  .brand-sub { display: none; }
  /* ← Menu pinnato a sinistra: non sposta il brand centrato */
  .btn-home:not([hidden]) {
    position: absolute; left: var(--sp-3); top: calc(var(--sp-2) + var(--safe-t)); z-index: 3;
    padding: 5px 10px; font-size: 0.78rem;
  }
  /* riga 2 */
  .scorebug__row2 {
    display: flex; flex: 1 1 100%; justify-content: center; align-items: center;
    gap: var(--sp-2); margin: 0;
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .scorebug__row2::-webkit-scrollbar { display: none; }
  .scorebug__meta { margin-left: 0; gap: var(--sp-2); flex-shrink: 0; }
  #hud { margin-left: 0; flex-wrap: nowrap; flex-shrink: 0; }
  .hud-pill { flex-shrink: 0; }

  /* carte a griglia fluida 2 colonne */
  .options-cards { grid-template-columns: repeat(auto-fit, minmax(46%, 1fr)); }
  .bonus-grid { grid-template-columns: 1fr; }
  .awards { grid-template-columns: 1fr; }
  .break-standings { grid-template-columns: 1fr; }
  .rogue-recap .rc-cols { grid-template-columns: 1fr; }

  /* gemma rating leggibile */
  .pc-rating { font-size: 1.6rem; }

  /* campo: slot tap-friendly (44px effettivi) */
  .slot { width: 72px; min-height: 46px; }
  .slot-name { max-width: 66px; }

  .draft-actions .btn, .break-actions .btn { min-width: 100%; }
  .result-actions .btn { width: 100%; }
  .hero { padding: var(--sp-7) 0 var(--sp-5); }
}

/* effetti hover → tap su touch (progressivi, mai bloccanti) */
@media (hover: none) {
  .diff-card:active::before,
  .formation-card:active::before,
  .bonus-card:active::before,
  .joya-badge:active::before { opacity: 1; }
  .bonus-card:active::after { left: 130%; }
  .player-card:active::after { left: 130%; }
}

@media (max-width: 480px) {
  .joya-badge { flex-direction: row; padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3); gap: var(--sp-3); }
  .joya-logo { width: 46px; height: 46px; }
  .joya-text { font-size: 0.82rem; }
}

/* pitch stretti (~286px su mobile): token più piccoli per non tagliare
   cornice/pill, glow ridotto sul reveal-elite per evitare overflow. */
@media (max-width: 520px) {
  .slot {
    width: 60px;
    min-height: 44px;
    padding: 4px 2px;
    font-size: 0.66rem;
  }
  .slot-name { max-width: 56px; font-size: 0.62rem; }
  .slot-rating { font-size: 0.92rem; padding: 1px 5px; }
  .slot-season { font-size: 0.55rem; padding: 1px 5px; }
  /* glow di reveal contenuto, così la cornice non sbava oltre il campo */
  .slot.reveal-elite { box-shadow: var(--shadow-token), 0 0 0 2px var(--oro-foil), 0 0 14px 2px var(--glow-elite); }
  .slot.reveal-top   { box-shadow: var(--shadow-token), 0 0 0 2px var(--rar-top), 0 0 10px 1px rgba(242,183,5,0.5); }
}

/* ============================================================
   REDUCED MOTION · azzera reveal/stacchi, lascia opacità/none
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .screen.active,
  .section-title,
  .verdict,
  .mission-banner,
  .diff-card,
  .bonus-card,
  .coach-card,
  .sb-big, .sb-pos { animation: none !important; }
  .card-reveal { transition: none; opacity: 1; transform: none; }
  .card-reveal.revealed { opacity: 1; transform: none; }
  .quadrant { transition: none; opacity: 1; transform: none; }
  .slot.active { animation: none !important; }
  .coach-card::before, .coach-card::after,
  .pm-card.pm-ev-santon::before,
  .pm-card.pm-ev-santon .crab-rave span { animation: none !important; }
  /* mantieni la translate base degli elementi centrati anche senza animazione */
  .slot { transform: translate(-50%, -50%); }
  .toast.show { transform: translate(-50%, 0); }
  .sb-big, .sb-pos { opacity: 1; transform: none; }
}

/* ============================================================
   START MENU · home cinematica full-screen (Concept A+B)
   ============================================================ */
body[data-screen="screen-home"] .topbar { display: none; }
body[data-screen="screen-home"] .footer { display: none; }
body[data-screen="screen-home"] main { max-width: none; padding: 0; margin: 0; }

#screen-home.startmenu { position: relative; overflow: hidden; isolation: isolate; }
#screen-home.startmenu.active {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  align-items: stretch;
  min-height: 100dvh;
  animation: none;
}

/* --- atmosfera --- */
.sm-sky { position: absolute; inset: 0; z-index: -6; background:
  radial-gradient(120% 90% at 38% 122%, rgba(242,183,5,.18), transparent 46%),
  radial-gradient(95% 75% at 40% 124%, rgba(178,47,66,.42), transparent 55%),
  linear-gradient(180deg, #05020a, #0c0410 42%, #1a0810 80%, #280c13); }
.sm-beams { position: absolute; inset: -20% -20% 0 -20%; z-index: -5; pointer-events: none; mix-blend-mode: screen; filter: blur(2px);
  background:
    conic-gradient(from 202deg at 10% -8%, transparent 0 18deg, rgba(255,228,150,.10) 20deg 26deg, transparent 28deg 360deg),
    conic-gradient(from 150deg at 62% -10%, transparent 0 17deg, rgba(255,228,150,.08) 19deg 24deg, transparent 26deg 360deg);
  animation: smBeam 7s ease-in-out infinite; }
@keyframes smBeam { 0%,100%{opacity:.55} 50%{opacity:1} }
.sm-tiers { position: absolute; left: 40%; bottom: 28%; width: 150%; height: 46%; transform: translateX(-50%); z-index: -4; opacity: .42;
  background: radial-gradient(circle at center, rgba(245,233,220,.5) 0 1px, transparent 1.6px) 0 0/15px 15px;
  -webkit-mask: radial-gradient(120% 130% at 40% 130%, #000 36%, transparent 62%);
          mask: radial-gradient(120% 130% at 40% 130%, #000 36%, transparent 62%); filter: blur(.4px); }
.sm-pitch { position: absolute; left: 42%; bottom: -7%; width: 150%; height: 44%; transform: translateX(-50%) perspective(560px) rotateX(60deg); transform-origin: bottom; z-index: -3;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 7%, transparent 7% 14%),
    radial-gradient(60% 80% at 50% 0%, rgba(255,235,170,.20), transparent 70%),
    linear-gradient(180deg, #1f5236, #103021 70%, #0a1f16);
  box-shadow: inset 0 40px 80px rgba(0,0,0,.6); }
.sm-pitch::before { content:""; position:absolute; left:50%; top:5%; width:30%; aspect-ratio:1; transform:translateX(-50%); border:2px solid rgba(255,255,255,.15); border-radius:50%; }
.sm-grain { position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: smGrain 1.2s steps(3) infinite; }
@keyframes smGrain { 0%{transform:translate(0,0)} 33%{transform:translate(-4%,2%)} 66%{transform:translate(3%,-3%)} 100%{transform:translate(0,0)} }
.sm-vignette { position:absolute; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(120% 100% at 42% 44%, transparent 50%, rgba(0,0,0,.74) 100%); }

/* --- topbar del menu --- */
.sm-top { position:absolute; top:0; left:0; right:0; z-index:3; display:flex; justify-content:space-between; align-items:center;
  padding: max(18px, env(safe-area-inset-top)) clamp(22px,3vw,46px) 0;
  font-family: var(--font-cond); letter-spacing:.3em; text-transform:uppercase; font-size:.7rem; color: var(--testo-mute); }
.sm-top strong { color: var(--giallo); }
.sm-top__ver { color: var(--testo-dim); }

/* --- sinistra: titolo monumentale --- */
.startmenu__left { position:relative; display:flex; flex-direction:column; justify-content:center; padding: clamp(28px,5vw,72px); }
.sm-kicker { font-family: var(--font-cond); font-weight:700; letter-spacing:.42em; text-transform:uppercase; font-size: clamp(.62rem,1.5vw,.84rem); color: var(--giallo); margin-bottom:10px; opacity:0; animation: smFade .8s .2s forwards; }
.sm-lock { line-height:.8; opacity:0; animation: smRise 1s .05s cubic-bezier(.2,.8,.2,1) forwards; }
.sm-roma { display:block; font-family: var(--font-display); font-weight:400; font-size: clamp(4rem,11.5vw,9.6rem); letter-spacing:.01em; color: var(--testo); text-shadow: 0 0 44px rgba(0,0,0,.55); }
.sm-num { display:inline-block; font-family: var(--font-display); font-size: clamp(2.8rem,8vw,6.6rem); color: var(--giallo); transform: translateY(-.04em); text-shadow: 0 0 10px rgba(242,183,5,.22); }
.sm-num b { color: var(--rosso-vivo); -webkit-text-stroke: 1px var(--giallo); font-weight:400; }
.sm-tag { margin-top:20px; font-family: var(--font-body); font-weight:400; font-size: clamp(.95rem,2.2vw,1.2rem); color: var(--testo-dim); max-width:30ch; line-height:1.5; opacity:0; animation: smFade .8s .45s forwards; }
.sm-tag strong { color: var(--testo); font-weight:800; }
.sm-credit-wrap { margin-top:26px; opacity:0; animation: smFade .8s .6s forwards; overflow: visible; }
.sm-credit { display:inline-flex; align-items:center; gap:14px; text-decoration:none; color: var(--testo-mute); font-family: var(--font-cond); letter-spacing:.04em; font-size:1.05rem; transition: color .2s; padding-right: 8px; }
.sm-credit strong { color: var(--giallo-chiaro); }
.sm-credit__logo { transition: transform .2s ease; }
.sm-credit:hover { color: var(--testo); }
.sm-credit:hover .sm-credit__logo { transform: scale(1.06); }
.sm-credit:hover strong { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--giallo); }
.sm-credit__logo { width:52px; height:52px; border-radius:50%; object-fit:cover; box-shadow: 0 0 0 2px rgba(242,183,5,.4), 0 0 20px -2px var(--glow-rosso); flex-shrink: 0; }
.sm-credit-dm { margin-top:10px; font-size:0.8rem; color: var(--testo-dim); font-family: var(--font-body); opacity:0.65; max-width:36ch; line-height:1.45; }

/* --- destra: menu manager + pannelli --- */
.startmenu__right { position:relative; display:flex; flex-direction:column; justify-content:safe center; overflow-y:auto; gap:18px;
  padding: clamp(20px,4vw,60px) clamp(24px,4vw,56px) clamp(20px,4vw,60px) clamp(14px,2.5vw,34px);
  background: linear-gradient(90deg, transparent, rgba(5,2,7,.4) 30%, rgba(5,2,7,.66)); }
.startmenu__right::before { content:""; position:absolute; left:0; top:12%; bottom:12%; width:2px; background: linear-gradient(180deg, transparent, var(--rosso), var(--giallo), transparent); }

#screen-home [hidden] { display: none !important; }
.smenu { display:flex; flex-direction:column; gap:4px; }
.srow { position:relative; display:flex; align-items:center; gap:16px; width:100%; text-align:left; padding:15px 18px; cursor:pointer;
  background: transparent; border:none; border-left:3px solid transparent; color: var(--testo);
  transition: background .2s, border-color .2s, transform .2s; animation: smSlide .55s cubic-bezier(.2,.8,.2,1) backwards; }
.smenu .srow:nth-child(1){animation-delay:.30s}.smenu .srow:nth-child(2){animation-delay:.37s}.smenu .srow:nth-child(3){animation-delay:.44s}.smenu .srow:nth-child(4){animation-delay:.51s}.smenu .srow:nth-child(5){animation-delay:.58s}
.srow__idx { font-family: var(--font-cond); font-weight:600; font-size:.8rem; color: var(--testo-mute); width:24px; }
.srow__body { display:flex; flex-direction:column; gap:3px; }
.srow__lab { font-family: var(--font-cond); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size: clamp(1.5rem,3vw,2.15rem); line-height:1; }
.srow__desc { font-family: var(--font-body); font-weight:400; font-size:.82rem; color: var(--testo-mute); }
.srow__arr { margin-left:auto; color: var(--giallo); opacity:0; transform: translateX(-8px); transition:.2s; font-size:1.3rem; }
.srow:hover, .srow:focus-visible { background: linear-gradient(90deg, rgba(242,183,5,.12), transparent); border-left-color: var(--giallo); transform: translateX(4px); outline:none; }
.srow:hover .srow__lab, .srow:focus-visible .srow__lab { color: var(--giallo-chiaro); text-shadow: 0 0 22px rgba(242,183,5,.35); }
.srow:hover .srow__arr, .srow:focus-visible .srow__arr { opacity:1; transform:none; }
.srow--play .srow__lab { color: var(--giallo-chiaro); }
.sm-enter { margin-left:auto; font-family: var(--font-cond); letter-spacing:.18em; text-transform:uppercase; font-size:.62rem; color: var(--giallo); animation: smBeat 1.7s ease-in-out infinite; }
@keyframes smBeat { 0%,100%{opacity:.45} 50%{opacity:1} }

/* pannelli secondari (GIOCA / SFIDE / COME SI GIOCA) */
.subpanel { animation: smFade .3s ease; }
.subpanel__title { font-family: var(--font-cond); font-weight:700; text-transform:uppercase; letter-spacing:.16em; color: var(--giallo-chiaro); font-size:1rem; margin:14px 0 14px; }
.sm-back { display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid rgba(242,183,5,.4); color: var(--giallo); font-family: var(--font-cond); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; border-radius:8px; padding:7px 14px; cursor:pointer; transition: background .15s; }
.sm-back:hover { background: rgba(242,183,5,.14); }
.sm-modes { display:flex; flex-direction:column; gap:12px; }
.sm-rules { font-family: var(--font-body); color: var(--testo-dim); line-height:1.55; font-size:.92rem; max-height:48dvh; overflow:auto; }
.sm-rules strong { color: var(--testo); }
.sm-rules ul { list-style:none; margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.sm-rules li { padding-left:16px; position:relative; }
.sm-rules li::before { content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background: var(--giallo); }

.sm-hidden { margin-top: 12px; }

/* Impostazioni contestuali nella start-menu:
   - Audio: solo nella home principale (sparisce quando apri un sottopannello)
   - Rating nascosto: solo nella scelta della modalità (pannello "play") */
#screen-home:not([data-panel="root"]) .hidden-toggle:has(#flag-mute) { display: none; }
.hidden-toggle:has(#flag-hidden) { display: none; }
#screen-home[data-panel="play"] .hidden-toggle:has(#flag-hidden) { display: flex; }

@keyframes smFade { to { opacity:1; } }
@keyframes smRise { from { opacity:0; transform: translateY(22px); } to { opacity:1; transform:none; } }
@keyframes smSlide { from { opacity:0; transform: translateX(26px); } to { opacity:1; transform:none; } }

/* mobile: stack, niente "premi invio" */
@media (max-width: 880px) {
  #screen-home.startmenu.active { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; }
  .startmenu__left { padding: clamp(58px,14vh,100px) 24px 8px; justify-content: flex-end; }
  .sm-roma { font-size: clamp(3.4rem,19vw,5.6rem); }
  .sm-num { font-size: clamp(2.4rem,14vw,4.2rem); }
  .sm-tag { display:none; }
  .sm-credit-wrap { margin-top:16px; }
  .sm-credit { font-size:.9rem; }
  .sm-credit__logo { width:40px; height:40px; }
  .sm-credit-dm { display:none; }
  .startmenu__right { justify-content:flex-start; gap:14px; background: linear-gradient(180deg, transparent, rgba(5,2,7,.6)); padding: 8px 22px calc(22px + env(safe-area-inset-bottom)); }
  .startmenu__right::before { left:22px; right:22px; top:0; bottom:auto; width:auto; height:2px; background: linear-gradient(90deg, transparent, var(--rosso), var(--giallo), transparent); }
  .srow { padding:13px 14px; }
  .srow__lab { font-size:1.5rem; }
  .sm-enter { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-beams, .sm-grain { animation: none; }
  .sm-lock, .sm-kicker, .sm-tag, .sm-credit-wrap, .sm-credit, .srow { animation: none; opacity:1; transform:none; }
}

/* ============================================================
   TUNING FULL-WIDTH schermate di gioco
   ============================================================ */
/* la schermata risultato resta leggibile (card da post-partita, non a tutta pagina) */
#result-body { max-width: 1180px; margin-inline: auto; }
/* il riepilogo finale e la sosta possono respirare un po' di più */
#rogue-summary-body { max-width: 980px; }
#break-body { max-width: 1000px; }

/* azioni risultato: 3 bottoni (salva immagine / copia testo / rigioca) */
.result-actions { flex-wrap: wrap; gap: 12px; }
.result-actions .btn { min-width: 200px; }
@media (max-width: 560px) { .result-actions .btn { flex: 1 1 100%; min-width: 0; } }

/* ============================================================
   CLASSIFICA FINALE + PARTITE CHIAVE (campionato simulato)
   ============================================================ */
.standings { background: var(--card); border: 1px solid var(--rosso); border-radius: var(--radius); padding: 16px 18px; margin-bottom: var(--sp-5); }
.standings h4 { font-family: var(--font-display); letter-spacing: 1px; color: var(--giallo-chiaro); margin-bottom: 12px; }
.lg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lg-table { width: 100%; border-collapse: collapse; font-family: var(--font-cond); font-size: 0.92rem; }
.lg-table th { text-align: right; color: var(--testo-mute); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.66rem; padding: 4px 8px; border-bottom: 1px solid var(--linea-osso); }
.lg-table th:nth-child(2) { text-align: left; }
.lg-table td { padding: 6px 8px; text-align: right; color: var(--testo-dim); border-bottom: 1px solid rgba(245,233,220,0.05); white-space: nowrap; }
.lg-table .lg-pos { color: var(--testo-mute); width: 30px; }
.lg-table .lg-name { text-align: left; color: var(--testo); font-weight: 600; }
.lg-table .lg-pts { color: var(--testo); font-weight: 800; }
.lg-table tr.is-roma td { background: rgba(242,183,5,0.14); color: var(--testo); }
.lg-table tr.is-roma .lg-name { color: var(--giallo-chiaro); font-weight: 800; }
.lg-table tr.r-scud td:first-child { box-shadow: inset 3px 0 0 var(--giallo); }
.lg-table tr.r-cl   td:first-child { box-shadow: inset 3px 0 0 #4aa3ff; }
.lg-table tr.r-eu   td:first-child { box-shadow: inset 3px 0 0 var(--sesto); }
.lg-table tr.r-down td:first-child { box-shadow: inset 3px 0 0 var(--doom); }

.key-matches { background: var(--card); border: 1px solid var(--rosso); border-radius: var(--radius); padding: 16px 18px; margin-bottom: var(--sp-5); display: flex; flex-direction: column; gap: 10px; }
.key-matches h4 { font-family: var(--font-display); letter-spacing: 1px; color: var(--giallo-chiaro); }
.km { background: rgba(0,0,0,0.22); border-radius: 10px; padding: 10px 12px; border-left: 3px solid var(--testo-mute); }
.km-w { border-left-color: #5fd06a; }
.km-d { border-left-color: var(--giallo); }
.km-l { border-left-color: #ff5c5c; }
.km-head { display: flex; align-items: center; gap: 10px; }
.km-md { font-family: var(--font-cond); font-weight: 800; font-size: 0.7rem; color: #1a0d05; background: var(--giallo); border-radius: 999px; padding: 1px 8px; }
.km-opp { font-weight: 700; color: var(--testo); flex: 1; min-width: 0; }
.km-score { font-family: var(--font-display); color: var(--giallo-chiaro); font-size: 1.15rem; letter-spacing: 1px; }
.km-note { color: var(--testo-dim); font-size: 0.88rem; margin-top: 4px; line-height: 1.4; }
.km-scorers { color: var(--giallo-chiaro); font-family: var(--font-cond); font-size: 0.8rem; margin-top: 4px; }

/* ---- pulsante audio flottante (mute/unmute) ---- */
.audio-toggle {
  position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(242,183,5,0.55); background: rgba(10,4,8,0.82);
  color: var(--giallo); font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45); transition: transform 0.12s ease, background 0.15s ease;
}
.audio-toggle:hover { background: rgba(242,183,5,0.18); }
.audio-toggle:active { transform: scale(0.92); }
/* mobile: in alto a destra, sempre visibile (fuori dalla barra del browser);
   z-index 90 < modali (150/200), così durante un modal resta coperto. */
@media (max-width: 860px) {
  .audio-toggle { left: auto; bottom: auto; right: 12px; top: calc(10px + env(safe-area-inset-top)); }
  .sm-top__ver { display: none; }
}

/* ============================================================
   PUNTEGGIO FINALE + CLASSIFICA GLOBALE
   ============================================================ */
.score-box {
  background: linear-gradient(160deg, var(--card-2), var(--rosso-sangue) 95%);
  border: 2px solid var(--giallo); border-radius: var(--radius);
  padding: 20px 18px; margin-bottom: var(--sp-5); text-align: center;
  box-shadow: 0 0 26px -6px var(--glow-giallo);
}
.score-box.gold { box-shadow: 0 0 32px -4px var(--glow-elite); }
.score-box.doom { border-color: var(--doom); }
.score-value {
  display: block; font-family: var(--font-display);
  font-size: clamp(3rem, 11vw, 5rem); line-height: 1; color: var(--giallo);
  text-shadow: 0 0 22px var(--glow-giallo); margin-top: 4px;
}
.lb-save { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.lb-save #lb-name {
  flex: 1 1 220px; max-width: 320px; font-family: var(--font-body); font-size: 1rem;
  padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--rosso);
  background: #0d0509; color: var(--testo);
}
.lb-save #lb-name:focus { outline: none; border-color: var(--giallo); box-shadow: 0 0 0 2px rgba(242,183,5,0.3); }
.lb-save .btn { flex: 0 0 auto; }
.lb-done { color: var(--giallo-chiaro); font-weight: 700; margin-top: 14px; }
.lb-done strong { color: var(--giallo); }
.lb-empty { color: var(--testo-dim); font-style: italic; padding: 10px 0; }
.lb-list { margin-top: 14px; text-align: left; }
.lb-ol { list-style: none; display: flex; flex-direction: column; gap: 4px; max-height: 380px; overflow-y: auto; }
.lb-ol li {
  display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px; background: rgba(0,0,0,0.22); font-family: var(--font-cond);
}
.lb-ol .lb-rank { color: var(--testo-mute); font-weight: 700; text-align: center; }
.lb-ol li:nth-child(1) .lb-rank { color: var(--giallo); }
.lb-ol li:nth-child(2) .lb-rank, .lb-ol li:nth-child(3) .lb-rank { color: var(--giallo-chiaro); }
.lb-ol .lb-nm { color: var(--testo); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-ol .lb-md { color: var(--testo-mute); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.lb-ol .lb-sc { color: var(--giallo); font-weight: 800; font-family: var(--font-display); letter-spacing: 1px; }
.lb-ol li.lb-me { background: rgba(242,183,5,0.16); box-shadow: inset 3px 0 0 var(--giallo); }
.lb-ol li.lb-me .lb-nm { color: var(--giallo-chiaro); }
@media (max-width: 560px) { .lb-ol .lb-md { display: none; } .lb-ol li { grid-template-columns: 30px 1fr auto; } }

/* attivatore audio: il tasto pulsa finché non avvii l'audio */
.audio-toggle.aud-idle { animation: audPulse 1.5s ease-in-out infinite; }
@keyframes audPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242,183,5,0.55), 0 4px 14px rgba(0,0,0,0.45); }
  50%      { box-shadow: 0 0 0 9px rgba(242,183,5,0), 0 4px 14px rgba(0,0,0,0.45); }
}
@media (prefers-reduced-motion: reduce) { .audio-toggle.aud-idle { animation: none; } }

/* dettaglio del calcolo del punteggio (trasparenza) */
.score-breakdown { display: flex; flex-direction: column; gap: 2px; max-width: 380px; margin: 14px auto 0; }
.sbd-row { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-cond); font-size: 0.9rem; color: var(--testo-dim); padding: 4px 2px; border-bottom: 1px dashed rgba(245,233,220,0.08); }
.sbd-row:last-child { border-bottom: none; }
.sbd-lab { text-align: left; }
.sbd-val { color: var(--giallo-chiaro); font-weight: 700; white-space: nowrap; }

/* blocco PUNTEGGIO di stagione (subito dopo il tabellone) */
.score-hero {
  background: linear-gradient(160deg, var(--card-2), var(--rosso-sangue) 95%);
  border: 2px solid var(--giallo); border-radius: var(--radius);
  padding: 20px 18px; margin-bottom: var(--sp-5); text-align: center;
  box-shadow: 0 0 26px -6px var(--glow-giallo);
}
.score-hero.gold { box-shadow: 0 0 32px -4px var(--glow-elite); }
.score-hero.doom { border-color: var(--doom); }

/* barra sticky "salva col tuo nome" (solo nel risultato) con sfumata sul contenuto */
.result-savebar { display: none; }
body[data-screen="screen-result"] .result-savebar {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: 30px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg-1) 50%, rgba(20,6,11,0.82) 78%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  pointer-events: none; /* la parte sfumata non blocca lo scroll del contenuto sotto */
}
body[data-screen="screen-result"] .result-savebar > * { pointer-events: auto; }
.result-savebar .rsb-label { font-family: var(--font-cond); font-weight: 700; letter-spacing: 0.04em; color: var(--giallo-chiaro); text-transform: uppercase; font-size: 0.85rem; }
.result-savebar .rsb-row { display: flex; gap: 10px; width: 100%; max-width: 520px; justify-content: center; }
.result-savebar #lb-name { flex: 1 1 auto; max-width: 320px; font-family: var(--font-body); font-size: 1rem; padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--rosso); background: #0d0509; color: var(--testo); }
.result-savebar #lb-name:focus { outline: none; border-color: var(--giallo); box-shadow: 0 0 0 2px rgba(242,183,5,0.3); }
.result-savebar .btn { flex: 0 0 auto; }
.result-savebar .rsb-done { font-family: var(--font-cond); font-weight: 700; font-size: 1.05rem; color: var(--giallo-chiaro); }
.result-savebar .rsb-done strong { color: var(--giallo); }
/* spazio in fondo così l'ultimo contenuto non resta sotto la barra */
body[data-screen="screen-result"] main { padding-bottom: 160px; }

/* ============================================================
   PANNELLO MODALITÀ (Rogue evidenziato) + MODAL ISTRUZIONI
   ============================================================ */
.sm-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.sm-modes .diff-card { width: 100%; cursor: pointer; }
.diff-card.is-featured {
  grid-column: 1 / -1;
  border-color: var(--rogue);
  box-shadow: 0 0 0 1px var(--rogue), 0 0 32px -6px var(--glow-rogue), var(--shadow-card);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(47,214,195,0.16), transparent 55%),
    linear-gradient(160deg, var(--card-2), var(--card) 72%);
}
.diff-card.is-featured .diff-name { color: var(--rogue-luce); }
.diff-card.is-featured:hover {
  border-color: var(--rogue-luce);
  box-shadow: 0 0 0 1px var(--rogue-luce), 0 0 40px -4px var(--glow-rogue), var(--shadow-lift);
}
.diff-badge {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-cond); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 0.62rem; color: #06231f; background: var(--rogue-luce);
  padding: 3px 10px; border-radius: 999px; margin-bottom: 8px;
  box-shadow: 0 0 14px -2px var(--glow-rogue);
}

.info-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.info-modal[hidden] { display: none; }
.info-modal__backdrop { position: absolute; inset: 0; background: rgba(5,2,6,0.78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.info-modal__card {
  position: relative; z-index: 1; width: min(560px, 100%); max-height: 90dvh; overflow-y: auto;
  background: linear-gradient(165deg, var(--card-2), var(--card));
  border: 2px solid rgba(242,183,5,0.4); border-radius: 16px; padding: 30px 26px 24px;
  box-shadow: 0 30px 70px -20px #000, 0 0 44px -10px var(--glow-giallo);
  animation: pmPop 0.4s cubic-bezier(0.2,1.3,0.4,1); transform-origin: center;
}
.info-modal__x { position: absolute; top: 12px; right: 14px; background: transparent; border: none; color: var(--testo-dim); font-size: 1.1rem; cursor: pointer; line-height: 1; }
.info-modal__x:hover { color: var(--testo); }
.info-modal__tag { display: inline-block; font-family: var(--font-cond); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.66rem; color: var(--giallo); margin-bottom: 8px; }
.info-modal__title { font-family: var(--font-display); font-size: var(--fs-700); letter-spacing: 0.03em; text-transform: uppercase; color: var(--testo); margin-bottom: 14px; line-height: 1; }
.info-modal__body { color: var(--testo-dim); line-height: 1.55; font-size: 0.95rem; }
.info-modal__body p { margin-bottom: 10px; }
.info-modal__body p:last-child { margin-bottom: 0; }
.info-modal__body strong { color: var(--testo); }
.info-modal__play { width: 100%; margin-top: 22px; }

/* ============================================================
   MOBILE · carte del draft in un modal a schermo (niente scroll sotto)
   ============================================================ */
.pick-close { display: none; }
@media (max-width: 860px) {
  /* Le carte appaiono NEL pannello SOTTO al campo, in flusso normale.
     Niente più modal a tutto schermo: il fixed-overlay causava il bug di
     selezione su touch (e i reroll gratis chiudendo il modal). Ora si pesca
     in pagina e due script di auto-scroll portano l'utente alle carte / al campo. */
  .options-panel:has(.options-cards .player-card) {
    scroll-margin-top: 104px; /* lascia spazio sotto la topbar sticky quando ci scrolliamo sopra */
  }
  /* niente pulsante di chiusura: non è un modal */
  .pick-close { display: none !important; }
  /* titolo = solo il ruolo, pulito (niente frase lunga) */
  .options-panel:has(.player-card) .options-hint {
    font-size: 0; min-height: 0; margin: var(--sp-2) auto var(--sp-6); text-align: center;
  }
  .options-panel:has(.player-card) .options-hint::before {
    content: attr(data-role);
    display: block;
    font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--giallo-chiaro); line-height: 1;
  }
  /* carte verticali, formato figurina */
  .options-panel:has(.player-card) .options-cards {
    grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); gap: 14px;
    max-width: 520px; width: 100%; margin: 0 auto; min-height: 0; align-items: stretch;
  }
  .options-panel:has(.player-card) .player-card {
    aspect-ratio: 7 / 10;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 8px; padding: 22px 8px 16px; text-align: center;
  }
  .options-panel:has(.player-card) .pc-rating {
    position: static; width: 58px; height: 58px; font-size: 2.3rem;
    border-radius: 13px; margin: 2px 0 4px;
  }
  .options-panel:has(.player-card) .pc-name {
    padding-right: 0; margin-top: 0; font-size: 1rem; line-height: 1.12;
  }
  .options-panel:has(.player-card) .pc-season { margin-top: 2px; }
  .options-panel:has(.player-card) .pc-roles { margin-top: auto; padding-top: 6px; }
  .options-panel:has(.player-card) .draft-actions {
    justify-content: center; max-width: 520px; width: 100%; margin: var(--sp-7) auto 0;
  }
  .options-panel:has(.player-card) #btn-start { display: none; } /* DAJE non serve mentre peschi */
  .options-panel:has(.player-card) #btn-reroll { flex: 0 1 260px; }
  /* anti-bug tap: su mobile le carte hanno area cliccabile PIENA dal primo frame
     (niente scale che rimpicciolisce/sposta il bersaglio durante il reveal) */
  .options-panel:has(.player-card) .card-reveal { transform: none !important; transition: opacity 0.28s ease !important; }
  .options-panel:has(.player-card) .card-reveal:not(.revealed) { opacity: 0.001; }
  .options-panel:has(.player-card) .card-reveal.revealed { opacity: 1; }
}