/* ============================================================
   38·0 NAPOLI · DESIGN SYSTEM 
   Identità Azzurra, profondità da videogioco sportivo.
   ============================================================ */

:root {
  /* ---------- BRAND CORE (Azzurro Napoli) ---------- */
  --azzurro:           #003c82;
  --azzurro-scuro:     #002147;
  --azzurro-vivo:      #005bbb;
  --blu-notte:    #00112b;
  --celeste:          #00a1ff;
  --celeste-chiaro:   #66c6ff;
  --oro-foil:        #b3e0ff;
  --oro-luce:        #e6f5ff;

  /* ---------- FONDALI A STRATI (broadcast deep) ---------- */
  --bg-0:            #050508;
  --bg-1:            #000b1a;
  --bg-2:            #00112b;
  --bg-stage:        radial-gradient(120% 80% at 50% -10%, #00183b 0%, #000b1a 45%, #050508 100%);
  --card:            #001533;
  --card-2:          #001f4d;
  --card-3:          #002a66;
  --vetro-hud:       rgba(0, 11, 26, 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À ---------- */
  --doom:            #d44;
  --rogue:           #2fd6c3;
  --rogue-luce:      #5ff0e0;
  --serieb:          #7a5cff;
  --serieb-luce:     #b3a0ff;
  --sesto:           #d98a3d;
  --sesto-luce:      #f0a85a;

  /* ---------- RARITÀ TCG ---------- */
  --rar-elite:       #ffd24a;
  --rar-elite-2:     #ff9e2c;
  --rar-top:         #00a1ff;
  --rar-mid:         #cdd6df;
  --rar-low:         #8c7a6e;
  --rar-comune:      #9fb0c0;
  --rar-noncomune:   #5fd06a;
  --rar-raro:        #4aa3ff;
  --rar-epico:       #c77dff;
  --rar-leggendario: #00a1ff;

  /* ---------- GLOW ---------- */
  --glow-celeste:     rgba(0, 161, 255, 0.55);
  --glow-azzurro:      rgba(0, 60, 130, 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 E SPAZI (Invariati) ---------- */
  --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;

  --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;

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

  --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);

  --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);

  --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; }
/* Forza la scomparsa degli elementi nascosti */
[hidden] { display: none !important; }
*, *::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;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
}

/* ============================================================
   SCOREBUG
   ============================================================ */
.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); -webkit-backdrop-filter: blur(4px) saturate(1.2);
  backdrop-filter: blur(4px) saturate(1.2); border-bottom: 2px solid var(--azzurro-vivo);
  box-shadow: 0 1px 0 0 var(--celeste), var(--shadow-bug); border-radius: 0;
}
.topbar.is-sticky { position: sticky; top: 0; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--celeste); opacity: 0.55; }
.scorebug__brand { display: flex; flex-direction: column; gap: 2px; }
.scorebug__meta { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.scorebug__row2 { display: contents; }
.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(--celeste); text-shadow: 0 0 12px var(--glow-celeste); }
.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); }
.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(--azzurro-vivo); text-transform: uppercase; }
body[data-live="on"] .scorebug__live { display: inline-flex; }
.scorebug__live-dot { width: 8px; height: 8px; border-radius: 50%; background: #005bbb; box-shadow: 0 0 10px #005bbb; 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(--celeste-chiaro); background: rgba(0,0,0,0.3); border: 1px solid rgba(0,161,255,0.4); border-radius: var(--radius-bug); padding: 3px 10px; text-transform: uppercase; }
@keyframes liveBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
#hud { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.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(0,33,71,0.9), rgba(0,11,26,0.9)); border: 1px solid var(--linea-osso);
  border-left: 3px solid var(--azzurro-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(--celeste); font-size: 1.05em; letter-spacing: 0.5px; font-variant-numeric: tabular-nums; }
.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(0,161,255,0.4); border-left-color: var(--celeste); color: var(--celeste-chiaro); }
.hud-pill.diff-dreamteam { 
  border-color: rgba(255,210,74,0.4); 
  border-left-color: #ffd24a; 
  color: #ffd24a; 
  background: linear-gradient(180deg, rgba(60,40,10,0.9), rgba(0,11,26,0.9));
}
.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(--celeste); color: var(--celeste-chiaro); }
.btn-home {
  flex-shrink: 0; min-height: 36px; display: inline-flex; align-items: center; background: transparent; border: 1.5px solid var(--celeste);
  color: var(--celeste); 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(0,161,255,0.2); border-color: var(--celeste-chiaro); }
.btn-home:active { transform: translateY(1px); }
.btn-home[hidden] { display: none; }

/* ============================================================
   SCREENS
   ============================================================ */
.screen { display: none; }
.screen.active { display: block; 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); } }

.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(--azzurro-vivo), var(--celeste)); 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); } }
@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(--azzurro-vivo), var(--celeste)); } }

/* ============================================================
   START MENU
   ============================================================ */
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; }

#screen-modulo,
#screen-bonus,
#screen-custom,
#screen-draft,
#screen-break,
#screen-replay,
#screen-result,
#screen-career-swap,
#screen-career-final {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

#screen-modulo .lower-third,
#screen-bonus .lower-third,
#screen-custom .lower-third,
#screen-draft .lower-third,
#screen-break .lower-third,
#screen-replay .lower-third,
#screen-result .lower-third,
#screen-career-swap .lower-third,
#screen-career-final .lower-third {
  margin-bottom: 20px;
}

#formation-cards,
#bonus-cards,
.formation-grid,
.bonus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  align-items: stretch;
  width: 100%;
}

.formation-card,
.bonus-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-width: 0;
  min-height: 220px;
}

.formation-card .mini-pitch {
  flex: 1;
  min-height: 180px;
}

.bonus-card {
  position: relative;
  text-align: left;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(0, 161, 255, 0.28);
  background: linear-gradient(160deg, rgba(0, 17, 43, 0.92), rgba(0, 11, 26, 0.82));
  box-shadow: var(--shadow-card), var(--bevel-top);
  cursor: pointer;
  transition: transform var(--dur-1) ease, border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}

.bonus-card:hover,
.bonus-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--celeste);
  box-shadow: var(--shadow-lift), 0 0 24px -6px var(--glow-celeste);
  outline: none;
}

.bonus-rar,
.bonus-name,
.bonus-desc {
  display: block;
}

.bonus-rar {
  font-family: var(--font-cond);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--celeste-chiaro);
}

.bonus-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: var(--testo);
  line-height: 1.05;
}

.bonus-desc {
  color: var(--testo-dim);
  font-size: 0.89rem;
  line-height: 1.55;
}

.custom-form {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0, 17, 43, 0.92), rgba(0, 11, 26, 0.82));
  border: 1px solid rgba(0, 161, 255, 0.24);
  box-shadow: var(--shadow-card), var(--bevel-top);
}

.cfg-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 14px;
}

.cfg-label {
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--celeste-chiaro);
  font-size: 0.78rem;
}

.cfg-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.cfg-control input[type="range"] {
  width: 100%;
  accent-color: var(--celeste);
}

.cfg-control output,
.cfg-warning {
  color: var(--testo);
  font-family: var(--font-cond);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}

.cfg-warning {
  min-height: 1.2em;
  color: #ffd6a9;
}

#btn-custom-go {
  width: 100%;
}

#screen-modulo .section-sub,
#screen-bonus .section-sub,
#screen-custom .section-sub {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

#screen-modulo .formation-grid,
#screen-bonus .bonus-grid {
  margin-top: 4px;
}

#screen-coach,
#screen-draft,
#screen-break,
#screen-replay,
#screen-result,
#screen-career-swap,
#screen-career-final {
  position: relative;
}

#coach-body {
  max-width: 760px;
  margin: 0 auto;
}

#screen-coach #coach-body,
#screen-draft .draft-layout,
#screen-break #break-body,
#screen-result .result-actions,
#screen-career-swap #career-swap-area,
#screen-career-final #career-final-body {
  display: grid !important;
}

#screen-draft .draft-layout {
  display: grid !important;
  grid-template-columns: 320px minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

#screen-draft .draft-sidebar {
  display: grid !important;
}

#screen-draft .options-panel {
  display: grid !important;
}

.team-info-panel {
  display: grid;
  gap: 12px;
}

.team-info-panel .ti-head,
.team-info-panel .ti-grid,
.team-info-panel .ti-banda {
  display: grid;
  gap: 10px;
}

.ti-head {
  padding: 4px 0 8px;
  border-bottom: 1px solid rgba(0, 161, 255, 0.18);
}

.ti-mode,
.ti-goal,
.ti-label,
.ti-banda-count,
.ti-banda-max,
.ti-badge,
.scoreboard .sb-label,
.recap-toggle summary,
.lr-role,
.award-label {
  font-family: var(--font-cond);
  letter-spacing: var(--tracking-cond);
  text-transform: uppercase;
}

.ti-mode {
  color: var(--celeste-chiaro);
  font-size: 0.78rem;
  font-weight: 800;
}

.ti-goal {
  color: var(--testo-dim);
  font-size: 0.82rem;
}

.ti-row {
  display: grid;
  grid-template-columns: minmax(82px, 110px) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ti-row:last-child {
  border-bottom: none;
}

.ti-label {
  color: var(--testo-mute);
  font-size: 0.72rem;
}

.ti-value,
.ti-sb-desc,
.ti-banda-names,
.lr-player,
.award-name,
.award-detail,
.sb-record,
.scoreboard .sb-pos,
.scoreboard .sb-big {
  color: var(--testo);
}

.ti-value,
.ti-sb-desc,
.ti-banda-names,
.lr-player,
.award-name,
.award-detail,
.sb-record {
  line-height: 1.45;
}

.ti-value.mono,
.lr-eff,
.sb-big,
.sb-pos {
  font-variant-numeric: tabular-nums;
}

.ti-value {
  font-weight: 700;
}

.ti-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  color: var(--celeste-chiaro);
  background: rgba(0, 161, 255, 0.12);
}

.ti-banda {
  padding: 12px;
  border-radius: 12px;
  background: rgba(0, 161, 255, 0.07);
  border: 1px solid rgba(0, 161, 255, 0.2);
}

.ti-banda-count {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--celeste);
}

.ti-banda-max {
  font-size: 0.72rem;
  color: var(--testo-mute);
}

.ti-banda-names {
  font-size: 0.8rem;
  color: var(--testo-dim);
}

#screen-rogue-summary .result-actions,
#screen-result .result-actions,
#screen-career-final .result-actions {
  display: flex !important;
}

#result-body {
  display: grid;
  gap: 16px;
}

.quadrant {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
}

.quadrant.show {
  opacity: 1;
  transform: none;
}

.verdict {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(0, 17, 43, 0.92), rgba(0, 11, 26, 0.82));
  border: 1px solid rgba(0, 161, 255, 0.24);
  border-radius: 18px;
  box-shadow: var(--shadow-card), var(--bevel-top);
}

.verdict h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--testo);
}

.verdict p {
  margin: 0;
  color: var(--testo-dim);
  font-size: 0.94rem;
  line-height: 1.6;
}

.awards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.award-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.award-label {
  color: var(--celeste-chiaro);
  font-size: 0.68rem;
  font-weight: 800;
}

.award-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.1;
}

.award-detail {
  color: var(--testo-dim);
  font-size: 0.82rem;
}

.coach-card,
.team-info-panel,
.event-log-panel,
.options-panel,
#break-body,
#career-swap-area,
#career-final-body,
#result-body,
.result-savebar,
.career-savebar {
  background: linear-gradient(180deg, rgba(0, 17, 43, 0.92), rgba(0, 11, 26, 0.82));
  border: 1px solid rgba(0, 161, 255, 0.24);
  border-radius: 18px;
  box-shadow: var(--shadow-card), var(--bevel-top);
}

.coach-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(0, 17, 43, 0.95), rgba(0, 11, 26, 0.88));
  border: 1px solid rgba(0, 161, 255, 0.3);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

.coach-tag,
.coach-modulo,
.coach-bonus,
.coach-special-label,
.coach-special-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.coach-tag {
  justify-self: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 161, 255, 0.12);
  color: var(--celeste-chiaro);
  font-family: var(--font-cond);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.coach-name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.8vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
}

.coach-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 4px;
}

.coach-modulo,
.coach-bonus,
.coach-special-label,
.coach-special-name {
  position: static !important; /* Impedisce posizionamenti assoluti anomali */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 161, 255, 0.12);
  border: 1px solid rgba(0, 161, 255, 0.3);
  color: var(--celeste-chiaro);
  font-family: var(--font-cond);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.coach-nota,
.coach-special-desc {
  color: var(--testo-dim);
  line-height: 1.6;
}

.coach-special {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(0, 161, 255, 0.2);
  background: rgba(0, 161, 255, 0.07);
}

.draft-layout {
  display: grid !important;
  grid-template-columns: 320px minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.draft-sidebar {
  display: grid !important;
  gap: 16px;
  position: sticky;
  top: 78px;
}

.team-info-panel,
.event-log-panel,
.options-panel {
  padding: 16px;
}

.team-info-panel,
.options-panel {
  overflow: hidden;
}

.event-log-panel {
  max-height: 420px;
  overflow: auto;
}

.options-panel {
  display: grid;
  gap: 12px;
}

.options-hint {
  font-family: var(--font-cond);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--celeste-chiaro);
}

.options-cards {
  display: grid;
  gap: 12px;
}

.draft-actions,
.result-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
}

.draft-actions > .btn,
.result-actions > .btn {
  flex: 1 1 180px;
}

#break-body,
#career-swap-area,
#career-final-body,
#result-body,
.result-savebar,
.career-savebar {
  padding: 18px;
}

#break-body {
  display: grid;
  gap: 16px;
}

.break-standings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.bs-item {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.bs-label,
.bs-sub {
  font-family: var(--font-cond);
  text-transform: uppercase;
  letter-spacing: var(--tracking-cond);
}

.bs-label {
  color: var(--celeste-chiaro);
  font-size: 0.72rem;
}

.bs-big {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 0.95;
  color: var(--testo);
}

.bs-sub {
  color: var(--testo-dim);
  font-size: 0.78rem;
}

.break-intro {
  margin: 0;
  color: var(--testo-dim);
  line-height: 1.6;
}

.break-actions,
#market-area {
  display: grid;
  gap: 12px;
}

.replay-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.replay-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.replay-control {
  display: grid;
  gap: 4px;
  min-width: 140px;
}

.replay-control span {
  color: var(--testo-dim);
  font-size: 0.73rem;
  font-family: var(--font-cond);
  letter-spacing: var(--tracking-cond);
  text-transform: uppercase;
}

.replay-control select {
  appearance: none;
  border-radius: 10px;
  border: 1px solid rgba(0, 161, 255, 0.28);
  background: rgba(0, 17, 43, 0.88);
  color: var(--testo);
  padding: 10px 12px;
}

.replay-list {
  display: grid;
  gap: 8px;
  max-height: 62dvh;
  overflow: auto;
}

.replay-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 70px 46px 84px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0, 17, 43, 0.88), rgba(0, 11, 26, 0.72));
  border: 1px solid rgba(0, 161, 255, 0.24);
  color: var(--testo);
  transform: translateY(8px);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}

.replay-row.in {
  opacity: 1;
  transform: translateY(0);
}

.replay-row.rr-w { border-left: 3px solid var(--rar-noncomune); }
.replay-row.rr-d { border-left: 3px solid var(--celeste); }
.replay-row.rr-l { border-left: 3px solid var(--azzurro-vivo); }

.rr-md,
.rr-res,
.rr-tally {
  font-family: var(--font-cond);
  font-weight: 700;
  letter-spacing: var(--tracking-cond);
  text-transform: uppercase;
}

.rr-md,
.rr-res {
  color: var(--celeste-chiaro);
}

.rr-score {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

.rr-opp {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rr-tally {
  justify-self: end;
  color: var(--testo-dim);
  font-size: 0.74rem;
}

.market-pick-area {
  display: grid;
  gap: 12px;
}

.market-hint {
  margin: 0;
  color: var(--testo-dim);
  font-size: 0.86rem;
  line-height: 1.5;
}

#cl-stage {
  display: grid;
}

.cl-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0, 17, 43, 0.92), rgba(0, 11, 26, 0.82));
  border: 1px solid rgba(0, 161, 255, 0.24);
  box-shadow: var(--shadow-card), var(--bevel-top);
}

.cl-tag {
  justify-self: start;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 161, 255, 0.12);
  color: var(--celeste-chiaro);
  font-family: var(--font-cond);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cl-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.02;
}

.cl-card p {
  margin: 0;
  color: var(--testo-dim);
  line-height: 1.6;
}

.cl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.cl-block {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.cl-label {
  font-family: var(--font-cond);
  text-transform: uppercase;
  letter-spacing: var(--tracking-cond);
  font-size: 0.72rem;
  color: var(--celeste-chiaro);
}

.cl-block strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
}

/* ===== Tabellone Champions League ===== */
.cl-bracket {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0, 17, 43, 0.92), rgba(0, 11, 26, 0.82));
  border: 1px solid rgba(0, 161, 255, 0.24);
  box-shadow: var(--shadow-card), var(--bevel-top);
  margin-top: 14px;
}

.cl-bracket-title {
  font-family: var(--font-cond);
  text-transform: uppercase;
  letter-spacing: var(--tracking-cond);
  font-size: 0.78rem;
  color: var(--celeste-chiaro);
  margin-bottom: 4px;
}

.cl-bracket-row {
  display: grid;
  grid-template-columns: 110px 1fr 28px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid rgba(255, 255, 255, 0.15);
}

.cl-bracket-round {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
}

.cl-bracket-detail {
  color: var(--testo-dim);
  font-size: 0.88rem;
}

.cl-bracket-icon {
  text-align: right;
  font-size: 1rem;
}

.cl-bracket-win {
  border-left-color: #00ff88;
  background: rgba(0, 255, 136, 0.08);
}
.cl-bracket-win .cl-bracket-detail { color: #d9ffee; }

.cl-bracket-lose {
  border-left-color: #ff5c5c;
  background: rgba(255, 92, 92, 0.08);
}
.cl-bracket-lose .cl-bracket-detail { color: #ffdede; }

.cl-bracket-bye {
  border-left-color: rgba(255, 255, 255, 0.25);
  opacity: 0.75;
  font-style: italic;
}

.cl-bracket-not-reached {
  opacity: 0.35;
}

/* ===== Tabellone completo Champions (tutte le squadre, tutti i turni) ===== */
.cl-full-bracket {
  display: grid;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0, 17, 43, 0.92), rgba(0, 11, 26, 0.82));
  border: 1px solid rgba(0, 161, 255, 0.24);
  box-shadow: var(--shadow-card), var(--bevel-top);
  margin-top: 14px;
}

.cl-round-section { display: grid; gap: 6px; }

.cl-round-title {
  font-family: var(--font-cond);
  text-transform: uppercase;
  letter-spacing: var(--tracking-cond);
  font-size: 0.78rem;
  color: var(--celeste-chiaro);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 4px;
  margin-bottom: 2px;
}

.cl-round-ties { display: grid; gap: 6px; }

.cl-tie-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr 22px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid transparent;
  font-size: 0.86rem;
}

.cl-tie-team {
  color: var(--testo-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-tie-team:last-of-type { text-align: right; }

.cl-tie-winner { color: var(--testo); font-weight: 700; }

.cl-tie-score {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--celeste);
  white-space: nowrap;
  text-align: center;
}

/* Riga del Napoli: sempre riconoscibile, indipendentemente dall'esito */
.cl-tie-us { color: var(--celeste-chiaro) !important; }
.cl-tie-napoli {
  border-left-color: var(--celeste);
  background: rgba(0, 161, 255, 0.07);
}
.cl-tie-napoli.cl-tie-win {
  border-left-color: #00ff88;
  background: rgba(0, 255, 136, 0.08);
}
.cl-tie-napoli.cl-tie-lose {
  border-left-color: #ff5c5c;
  background: rgba(255, 92, 92, 0.09);
}

.cl-tie-mark-slot { text-align: right; }
.cl-tie-mark { font-weight: 900; font-size: 1rem; }
.cl-tie-mark-win { color: #00ff88; }
.cl-tie-mark-lose { color: #ff5c5c; text-shadow: 0 0 10px rgba(255, 92, 92, 0.6); }

@media (max-width: 640px) {
  .cl-tie-row { grid-template-columns: 1fr auto 1fr 18px; font-size: 0.78rem; }
}

@media (max-width: 1100px) {
  .draft-layout {
    grid-template-columns: 1fr;
  }

  .draft-sidebar {
    position: static;
  }
}

@media (max-width: 700px) {
  .cfg-row {
    grid-template-columns: 1fr;
  }

  .cfg-control {
    grid-template-columns: 1fr;
  }
}

.sm-sky { position: absolute; inset: 0; z-index: -6; background: radial-gradient(120% 90% at 38% 122%, rgba(0,161,255,.18), transparent 46%), radial-gradient(95% 75% at 40% 124%, rgba(0,60,130,.42), transparent 55%), linear-gradient(180deg, #050508, #000b1a 42%, #00112b 80%, #001f4d); }
.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(179,230,255,.10) 20deg 26deg, transparent 28deg 360deg), conic-gradient(from 150deg at 62% -10%, transparent 0 17deg, rgba(179,230,255,.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(179,230,255,.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%); }

.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 { pointer-events: none; }
.sm-top * { pointer-events: auto; }
.sm-top strong { color: var(--celeste); }
.sm-top__ver { color: var(--testo-dim); }

.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(--celeste); 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-napoli { 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(--celeste); transform: translateY(-.04em); text-shadow: 0 0 10px rgba(0,161,255,.22); }
.sm-num b { color: var(--azzurro-vivo); -webkit-text-stroke: 1px var(--celeste); 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-dm { margin-top:12px; font-size:0.95rem; color: var(--testo-dim); font-family: var(--font-body); opacity:0.95; max-width:40ch; line-height:1.5; }

.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(--azzurro), var(--celeste), 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; }
.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(--celeste); opacity:0; transform: translateX(-8px); transition:.2s; font-size:1.3rem; }
.srow:hover, .srow:focus-visible { background: linear-gradient(90deg, rgba(0,161,255,.12), transparent); border-left-color: var(--celeste); transform: translateX(4px); outline:none; }
.srow:hover .srow__lab, .srow:focus-visible .srow__lab { color: var(--celeste-chiaro); text-shadow: 0 0 22px rgba(0,161,255,.35); }
.srow:hover .srow__arr, .srow:focus-visible .srow__arr { opacity:1; transform:none; }
.srow--play .srow__lab { color: var(--celeste-chiaro); }
.sm-enter { margin-left:auto; font-family: var(--font-cond); letter-spacing:.18em; text-transform:uppercase; font-size:.62rem; color: var(--celeste); animation: smBeat 1.7s ease-in-out infinite; }
@keyframes smBeat { 0%,100%{opacity:.45} 50%{opacity:1} }

.subpanel { animation: smFade .3s ease; }
.subpanel__title { font-family: var(--font-cond); font-weight:700; text-transform:uppercase; letter-spacing:.16em; color: var(--celeste-chiaro); font-size:1rem; margin:14px 0 14px; }
.sm-back { display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid rgba(0,161,255,.4); color: var(--celeste); 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(0,161,255,.14); }
.sm-modes { display:flex; flex-direction:column; gap:12px; }

/* ---------- CLASSIFICA GLOBALE ---------- */
.lb-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.lb-tab {
  font-family: var(--font-cond); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-size:.78rem; color: var(--testo-dim); background: rgba(255,255,255,0.04);
  border:1px solid rgba(0,161,255,.25); border-radius:999px; padding:7px 14px; cursor:pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.lb-tab:hover { color: var(--celeste-chiaro); border-color: rgba(0,161,255,.5); }
.lb-tab.is-active { background: var(--celeste); border-color: var(--celeste); color: var(--blu-notte); }
.lb-list { display:flex; flex-direction:column; gap:8px; }
.lb-row {
  display:grid; grid-template-columns: 32px minmax(0,1fr) auto auto auto; align-items:center; gap:12px;
  padding:10px 14px; border-radius:12px; background: var(--card); border:1px solid rgba(0,161,255,.12);
}
.lb-row--me { border-color: var(--rar-elite); background: rgba(255,210,74,0.08); }
.lb-pos { font-family: var(--font-display); font-size:1rem; color: var(--celeste-chiaro); text-align:center; }
.lb-name { font-family: var(--font-body); font-weight:600; color: var(--testo); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-row--me .lb-name::after { content:" (tu)"; color: var(--rar-elite); font-weight:400; font-size:.8em; }
.lb-stat { display:flex; flex-direction:column; align-items:center; min-width:64px; }
.lb-stat strong { font-family: var(--font-display); font-size:1rem; color: var(--celeste-chiaro); line-height:1; }
.lb-stat small { font-family: var(--font-cond); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color: var(--testo-mute); }
.lb-stat--total strong { color: var(--rar-elite); }
.lb-empty { text-align:center; color: var(--testo-dim); font-family: var(--font-body); padding: 20px 10px; }

/* ---------- BONUS GIORNALIERO: barra streak ---------- */
.daily-streak-track { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; }
.daily-streak-dot {
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-cond); font-weight:700; font-size:.72rem; color: var(--testo-mute);
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,210,74,.25);
}
.daily-streak-dot.is-done { background: rgba(255,210,74,.25); border-color:#ffd24a; color:#ffd24a; }
.daily-streak-dot.is-today {
  background: linear-gradient(135deg, #ffd24a, #ff9e2c); border-color:#ffd24a; color:#1a1200;
  box-shadow: 0 0 14px rgba(255,210,74,.6); transform: scale(1.15);
}
@media (max-width: 520px) {
  .lb-row { display:flex; flex-wrap:wrap; align-items:center; row-gap:8px; }
  .lb-pos { width:24px; }
  .lb-name { flex: 1 1 100%; order:1; }
  .lb-pos { order:0; }
  .lb-stat { flex-direction:row; gap:4px; min-width:auto; order:2; }
  .lb-stat small { font-size:.55rem; }
}
.mode-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  cursor: pointer;
  color: var(--testo);
  background: linear-gradient(90deg, rgba(1, 18, 38, 0.88), rgba(0, 14, 31, 0.68));
  border-left: 3px solid transparent;
  border-radius: 12px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.mode-row:hover,
.mode-row:focus-visible {
  background: linear-gradient(90deg, rgba(0,161,255,.16), rgba(0, 14, 31, 0.75));
  border-left-color: var(--celeste);
  transform: translateX(4px);
  outline: none;
}
.mode-row__idx {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .82rem;
  color: var(--testo-mute);
  min-width: 24px;
  padding-top: 2px;
}
.mode-row__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mode-row__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 161, 255, 0.12);
  font-family: var(--font-cond);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--celeste-chiaro);
}
.mode-row__lab {
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  line-height: 1.05;
}
.mode-row__desc {
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--testo-mute);
  line-height: 1.45;
}
.mode-row__desc strong {
  color: var(--testo);
}
.mode-row__arr {
  margin-left: auto;
  align-self: center;
  color: var(--celeste);
  opacity: .7;
  transform: translateX(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
.mode-row:hover .mode-row__arr,
.mode-row:focus-visible .mode-row__arr {
  opacity: 1;
  transform: none;
}
.mode-row.is-featured {
  box-shadow: inset 0 0 0 1px rgba(0,161,255,.26), 0 0 18px -8px rgba(0,161,255,.4);
}
.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(--celeste); }
.sm-hidden { margin-top: 12px; }

@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; } }

@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-napoli { 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-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(--azzurro), var(--celeste), transparent); }
  .srow { padding:13px 14px; }
  .srow__lab { font-size:1.5rem; }
  .sm-enter { display:none; }
}

/* ============================================================
   BOTTONI, CARDS, DRAFT E RESTO
   (Stili generici riadattati ai colori azzurri)
   ============================================================ */
   .btn { 
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  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.primary { background: linear-gradient(180deg, var(--azzurro-vivo), var(--azzurro) 55%, var(--azzurro-scuro)); color: var(--testo); flex: 1; box-shadow: var(--bevel-top), var(--shadow-card); }
.btn.primary:not(:disabled):hover { box-shadow: var(--bevel-top), var(--shadow-lift), 0 0 26px -4px var(--glow-azzurro); }
.btn.ghost { background: transparent; border: 1.5px solid var(--celeste); color: var(--celeste); box-shadow: var(--bevel-top); }
.btn.ghost:hover { background: rgba(0,161,255,0.2); border-color: var(--celeste-chiaro); }

.formation-card {
  position: relative; isolation: isolate;
  background: radial-gradient(120% 130% at 50% 0%, rgba(0,161,255,0.05), transparent 60%), linear-gradient(160deg, var(--card-3), var(--card) 74%);
  border: 1px solid rgba(0, 60, 130, 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);
}
.formation-card:hover { border-color: var(--celeste); box-shadow: var(--shadow-lift), 0 0 24px -6px var(--glow-celeste); transform: translateY(-5px) scale(1.02); }
.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(--celeste) 70%); border: 2px solid var(--azzurro-scuro); transform: translate(-50%, -50%); }
.formation-name { font-family: var(--font-display); font-size: var(--fs-600); letter-spacing: 0.06em; text-align: center; }

/* ============================================================
   FIX DEFINITIVO CARTE GIOCATORE (TCG) - Griglia Adattiva
   ============================================================ */
.player-card.tcg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto; /* Colonna sinistra elastica, colonna destra stretta */
  grid-template-rows: auto auto auto;
  gap: 4px 16px;
  align-items: center;
  padding: 16px 20px;
  min-height: 120px;
  height: auto; /* Permette alla carta di allungarsi per accogliere i nomi lunghi */
  width: 100%;
  background: linear-gradient(135deg, rgba(0, 33, 71, 0.96), rgba(0, 11, 26, 0.99));
  border: 2px solid rgba(0, 161, 255, 0.45);
  border-radius: 16px;
  box-shadow: var(--shadow-card), 0 0 20px rgba(0, 161, 255, 0.15);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}

.player-card.tcg:hover {
  transform: translateY(-3px);
  border-color: var(--celeste);
  box-shadow: var(--shadow-lift), 0 0 25px rgba(0, 161, 255, 0.35);
}

/* Pulizia script grafici */
.player-card.tcg .tc-left-gold,
.player-card.tcg .tc-left-panel,
.player-card.tcg .tc-name-gold,
.player-card.tcg .tc-name-panel,
.player-card.tcg .tc-middle-bar,
.player-card.tcg .tc-lower-gold,
.player-card.tcg .tc-lower-panel,
.player-card.tcg .tc-season-gold,
.player-card.tcg .tc-shine,
.player-card.tcg .tc-glass,
.player-card.tcg .tc-tab,
.player-card.tcg .tc-age {
  display: none !important; /* Rimuove tutti i fronzoli e l'età */
}

/* --- COLONNA SINISTRA: NOME E COGNOME --- */
.player-card.tcg .tc-player {
  grid-column: 1;
  grid-row: 1 / 4; /* Prende tutta l'altezza a sinistra */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.player-card.tcg .tc-fn {
  font-family: var(--font-cond);
  font-size: 0.95rem;
  color: var(--testo-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.1;
}

.player-card.tcg .tc-ln {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--testo);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.1;
  white-space: normal; /* Ora il testo è libero di andare a capo */
  word-break: break-word; /* Nessuna sbavatura fuori dai bordi */
}

/* --- COLONNA DESTRA: STATISTICHE --- */
.player-card.tcg .tc-positions {
  position: static; /* Rimuoviamo gli absolute che causavano i bug */
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  font-family: var(--font-cond);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--testo-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}

.player-card.tcg .tc-overall {
  position: static;
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  margin: 0;
}

.player-card.tcg .tc-overall span {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--celeste);
  background: rgba(0, 161, 255, 0.18);
  padding: 4px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 161, 255, 0.4);
  text-shadow: 0 0 12px rgba(0, 161, 255, 0.4);
}

.player-card.tcg .tc-season {
  position: static !important;
  grid-column: 2 !important;
  grid-row: 3 !important;
  justify-self: center !important;
  font-family: var(--font-cond) !important;
  font-size: 0.75rem !important; /* Dimensione fissa di sicurezza, niente esplosioni */
  font-weight: 700 !important;
  color: var(--celeste-chiaro) !important;
  letter-spacing: 0.08em !important;
  background: rgba(0, 0, 0, 0.5) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(0, 161, 255, 0.2) !important;
  margin-top: 4px !important;
  white-space: nowrap !important;
}
/* Nelle cards standard e nel campo usiamo i nuovi colori */
.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%); }
.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 {
  position: absolute; transform: translate(-50%, -50%); transform-origin: center center; width: 70px; min-height: 52px;
  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.63rem; padding: 4px 3px; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.slot.empty { border: 2px dashed rgba(0, 161, 255, 0.7); background: rgba(0, 0, 0, 0.55); color: var(--celeste-chiaro); }
.slot.empty:hover { background: rgba(0, 161, 255, 0.16); box-shadow: 0 0 16px -2px var(--glow-celeste); }
.slot.active { border: 2px solid var(--celeste); background: rgba(0, 161, 255, 0.2); }
.slot.filled {
  border: 1.4px solid transparent;
  background:
    linear-gradient(160deg, var(--card-3), var(--blu-notte)) padding-box,
    linear-gradient(145deg, var(--celeste-chiaro), var(--celeste) 45%, var(--azzurro-vivo) 75%, var(--celeste-chiaro)) border-box;
}

/* Modale imprevisto */
.pm-card {
  background: linear-gradient(160deg, var(--card-3) 0%, var(--card) 60%, rgba(5,2,4,0.9) 100%);
  border: 2px solid var(--azzurro); border-radius: 22px; padding: var(--sp-7) var(--sp-7);
}
.pm-card.pm-pos { border-color: var(--rar-noncomune); background: linear-gradient(160deg, rgba(30,70,35,0.6) 0%, var(--card) 55%); }
.pm-card.pm-neg { border-color: #ff5c5c; background: linear-gradient(160deg, rgba(70,18,18,0.6) 0%, var(--card) 55%); }

/* Tabellone Finale */
.scoreboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  background: linear-gradient(180deg, var(--blu-notte), var(--bg-0));
  border: 2px solid var(--azzurro-vivo); border-radius: var(--radius); padding: var(--sp-6) var(--sp-5);
}
.scoreboard > div {
  display: grid;
  gap: 6px;
}
.scoreboard .sb-label {
  color: var(--testo-mute);
  font-size: 0.72rem;
  font-weight: 700;
}
.scoreboard .sb-big {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  line-height: 0.95;
  color: var(--testo);
}
.scoreboard .sb-record {
  color: var(--testo-dim);
  font-size: 0.8rem;
}
.scoreboard .sb-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 72px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-display);
  font-size: 1.3rem;
}
.scoreboard.gold { border-color: var(--celeste); box-shadow: var(--shadow-bug), 0 0 26px rgba(0, 161, 255, 0.35), inset 0 0 30px rgba(0,0,0,0.5); }
.mission-banner.ok { background: linear-gradient(90deg, #002147, #003c82); color: #b3e0ff; border: 2px solid var(--serieb); }
.mission-banner.fail { background: var(--card); color: var(--testo-dim); border: 2px solid var(--azzurro); }
.mission-banner.epicfail { background: linear-gradient(90deg, var(--azzurro-scuro), var(--azzurro)); color: var(--oro-luce); border: 2px solid var(--celeste); }
.mission-banner.perfect { background: linear-gradient(90deg, var(--azzurro), var(--celeste)); color: #fff; border: 2px solid #fff; box-shadow: 0 0 26px rgba(0, 161, 255, 0.6); }

.lineup-recap {
  display: grid;
  gap: 12px;
}

.lineup-recap summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--celeste-chiaro);
  list-style: none;
}

.lineup-recap summary::-webkit-details-marker { display: none; }

.lineup-recap ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.lineup-recap li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.lr-role {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(0, 161, 255, 0.14);
  color: var(--celeste-chiaro);
  font-size: 0.66rem;
  font-weight: 800;
}

.lr-player {
  min-width: 0;
  font-size: 0.88rem;
}

.lr-eff {
  color: var(--celeste);
  font-size: 0.9rem;
}

/* Toggle rating nascosto */
.hidden-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0, 161, 255, 0.26);
  background: linear-gradient(180deg, rgba(0, 14, 31, 0.82), rgba(0, 7, 16, 0.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 24px -12px rgba(0,0,0,0.8);
  color: var(--testo-dim);
}
.hidden-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ht-box {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(0, 161, 255, 0.5);
  background: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  transition: background var(--dur-2) ease, border-color var(--dur-2) ease;
}
.ht-box::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f7fbff, #cfe8ff);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: transform var(--dur-2) ease;
}
.hidden-toggle input:checked + .ht-box {
  background: linear-gradient(180deg, rgba(0,161,255,0.5), rgba(0,161,255,0.22));
  border-color: rgba(102,198,255,0.95);
}
.hidden-toggle input:checked + .ht-box::after {
  transform: translateX(18px);
}
.hidden-toggle input:focus-visible + .ht-box {
  box-shadow: 0 0 0 3px rgba(0, 161, 255, 0.4);
}
.ht-text { font-size: 0.84rem; line-height: 1.4; }
.ht-text strong { color: var(--testo); }

/* Responsive utility */
@media (max-width: 860px) {
  .draft-layout { grid-template-columns: 1fr; }
  .draft-layout .options-panel { grid-column: 1 / -1; position: static; }
  .draft-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .scoreboard { grid-template-columns: 1fr; }
  .replay-row { grid-template-columns: 48px minmax(0, 1fr) 62px 38px 72px; }
}
@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; justify-content: center; }
  .scorebug__row2 { overflow-x: auto; }
}

/* ============================================================
   MODAL ISTRUZIONI, PATCH NOTES E IMPREVISTI (Fix click)
   ============================================================ */
.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(0, 11, 26, 0.85); -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(0,161,255,0.4); border-radius: 16px; padding: 30px 26px 24px;
  box-shadow: 0 30px 70px -20px #000, 0 0 44px -10px var(--glow-celeste);
  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(--celeste); 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; }

.patch-list { margin: 0; padding-left: 1.15em; list-style: disc; }
.patch-list li { margin-bottom: 9px; }
.patch-list li:last-child { margin-bottom: 0; }
.patch-list li::marker { color: var(--celeste); }

.pick-modal {
  position: fixed; inset: 0; background: rgba(0, 11, 26, 0.9);
  -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; }
.pm-card {
  background: linear-gradient(160deg, var(--card-3) 0%, var(--card) 60%, rgba(0,11,26,0.9) 100%);
  border: 2px solid var(--azzurro); 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(--celeste); 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(0,161,255,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-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(--celeste); }
.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-ok { width: 100%; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; }
@keyframes fadeSoft { from { opacity: 0; } to { opacity: 1; } }

.toast {
  position: fixed; left: 50%; bottom: calc(28px + var(--safe-b));
  transform: translate(-50%, 20px); background: var(--celeste); color: #00112b;
  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.show { opacity: 1; transform: translate(-50%, 0); }
/* --- FIX TESTI CAMBI ROSA ED EVENTI --- */
.career-growth-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 24px;
}
.career-growth-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(0, 161, 255, 0.15);
  border-radius: 12px;
}
.career-growth-list .cgr-role {
  font-family: var(--font-cond);
  font-weight: 800;
  color: var(--celeste-chiaro);
  background: rgba(0, 161, 255, 0.15);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
}
.career-growth-list .cgr-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--testo);
}
.career-growth-list .cgr-age {
  color: var(--testo-dim);
  font-size: 0.9rem;
  flex: 1; /* Spinge il delta tutto a destra */
}
.career-growth-list .cgr-delta {
  font-family: var(--font-display);
  font-size: 1.4rem;
}
.cgr-up .cgr-delta { color: var(--rar-noncomune); } /* Verde per i bonus */
.cgr-down .cgr-delta { color: #ff5c5c; } /* Rosso per i malus/cambi */
/* --- FIX CAMPO E CARTE MERCATO/SOSTA --- */
.market-pitch {
  max-width: 360px; /* Impedisce al campo di allungarsi all'infinito */
  margin: 0 auto 24px auto; /* Lo centra e dà spazio sotto */
}

/* Griglia per le carte scartate/pescate nel mercato */
.market-options {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 480px; /* Stessa larghezza comoda delle carte draft */
  margin: 0 auto;
}

/* Bottone annulla sotto le carte */
.market-cancel-btn {
  margin-top: 16px;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  display: block;
}
/* --- FIX BARRA SCORRIMENTO INVISIBILE --- */
.replay-list {
  -ms-overflow-style: none;  /* Nasconde su Internet Explorer e Edge */
  scrollbar-width: none;  /* Nasconde su Firefox */
}
.replay-list::-webkit-scrollbar {
  display: none; /* Nasconde su Chrome, Safari e Opera */
}

/* --- FIX CAMPO MERCATO CHE NON APPARE --- */
.market-pitch {
  width: 100%; /* <-- Questa riga risolve il problema del campo invisibile */
  max-width: 360px; 
  margin: 0 auto 24px auto; 
}
/* --- NASCONDE I CONTENITORI VUOTI (Fix "pulsante fantasma" a fine stagione) --- */
.result-savebar:empty,
.career-savebar:empty {
  display: none !important;
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
}
/* ============================================================
   OTTIMIZZAZIONE MASSIMA PER SMARTPHONE E SCHERMI PICCOLI
   ============================================================ */

@media (max-width: 860px) {
  /* Rompe la griglia orizzontale: il campo va sopra, carte e menu sotto */
  #screen-draft .draft-layout {
    display: flex !important;
    flex-direction: column;
    gap: 20px;
  }
  
  /* Sidebar che su desktop era a sinistra, ora si adatta */
  #screen-draft .draft-sidebar {
    display: flex !important;
    flex-direction: column;
    position: static;
  }

  /* Riduciamo l'altezza del campo verde per non occupare tutto lo schermo */
  /* Riduciamo e forziamo le dimensioni del campo per non farlo sparire */
  .pitch {
    width: 100% !important;        /* Forza il campo ad aprirsi */
    max-width: 380px;              /* Evita che diventi troppo largo */
    min-height: 450px;             /* Altezza di sicurezza anti-collasso */
    aspect-ratio: 4 / 5;           /* Mantiene le giuste proporzioni */
    margin: 0 auto 20px auto;      /* Lo centra perfettamente */
    position: relative;
    display: block;
  }
  #screen-draft .draft-layout {
    display: flex !important;
    flex-direction: column;
    gap: 20px;
  }
  
  /* Ordine visivo su mobile: 1. Campo, 2. Opzioni, 3. Sidebar */
  #pitch { order: 1; }
  .options-panel { order: 2; }
  .draft-sidebar { order: 3; }
  /* Rimpiccioliamo le magliette/slot in campo */
  .slot {
    width: 60px;
    min-height: 44px;
    font-size: 0.58rem;
    padding: 3px 2px;
  }
  .slot .slot-rating { font-size: 0.85rem; }
  .slot .slot-name { font-size: 0.65rem; }
}

@media (max-width: 600px) {
  /* Compressione delle carte giocatore per non sbordare ai lati dello smartphone */
  .player-card.tcg {
    padding: 12px 14px; /* Rimuove lo spazio in eccesso */
    gap: 8px;
    min-height: 95px;
    grid-template-columns: 1fr auto;
  }

  /* Riduciamo la grandezza del cognome */
  .player-card.tcg .tc-ln {
    font-size: 1.15rem;
  }
  
  /* Riduciamo l'Overall Azzurro */
  .player-card.tcg .tc-overall span {
    font-size: 1.8rem;
    padding: 3px 12px;
  }
  
  /* Spostiamo le scritte a destra in posizioni più vicine ai bordi */
  .player-card.tcg .tc-overall {
    margin-right: 70px;
  }
  .player-card.tcg .tc-positions {
    font-size: 0.65rem;
    right: 12px;
    top: 10px;
  }
  .player-card.tcg .tc-season {
    font-size: 0.72rem;
    right: 12px;
    bottom: 10px;
    padding: 2px 6px;
  }
  
  /* Scoreboard di fine partita riadattata */
  .scoreboard {
    padding: var(--sp-4) var(--sp-3);
  }
  .scoreboard .sb-big {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }
}
/* ============================================================
   CENTRATURA MENU E CRONACA SU TELEFONO
   ============================================================ */
@media (max-width: 860px) {
  
  /* --- 1. Menu Principale e Scelte Modalità --- */
  .srow {
    flex-direction: column;
    text-align: center;
    justify-content: center;
    padding: 20px 14px;
    gap: 10px;
  }
  
  .srow__body {
    align-items: center;
  }
  
  .srow__arr {
    margin: 5px auto 0 auto;
    transform: rotate(90deg) !important; /* Gira la freccia verso il basso */
  }
  
  .mode-row {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  
  .mode-row__body {
    align-items: center;
  }
  
  .mode-row__arr {
    display: none !important; /* Nasconde la freccia laterale per una simmetria perfetta */
  }
  
  .mode-row__badge {
    margin-bottom: 6px;
  }

  /* --- 2. Info Squadra e Cronaca della run --- */
  .draft-sidebar {
    text-align: center;
  }
  
  .team-info-panel .ti-row {
    grid-template-columns: 1fr; /* Incolonna l'etichetta e il valore */
    justify-items: center;
    gap: 6px;
    padding: 12px 0;
  }
  
  .team-info-panel .ti-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  .elp-title {
    text-align: center;
    margin-bottom: 12px;
  }
  
  .el-item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 8px;
  }
  
  .el-dot {
    display: none !important; /* Nasconde il pallino laterale */
  }
  
  .el-body {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
/* ============================================================
   CENTRATURA FORZATA PANNELLI INFO E CRONACA SU MOBILE
   ============================================================ */
@media (max-width: 860px) {
  /* Forza il testo al centro in tutto il blocco info e cronaca */
  .team-info-panel, 
  .team-info-panel *, 
  .event-log-panel, 
  .event-log-panel * {
    text-align: center !important;
  }

  /* Incolonna e centra gli elementi delle righe info */
  .team-info-panel .ti-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 4px;
  }

  /* Centra l'intestazione della squadra */
  .team-info-panel .ti-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Centra eventuali badge o descrizioni speciali */
  .team-info-panel .ti-badge,
  .team-info-panel .ti-sb-desc {
    margin: 2px auto 0 auto;
  }
}
/* ============================================================
   CENTRATURA TOTALE CARTE GIOCATORE E TESTI SU TELEFONO
   ============================================================ */
@media (max-width: 860px) {
  
  /* Centra la scritta in alto "TREQUARTISTA - TOCCA PER SCHIERARE" */
  .options-hint {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  /* Trasforma le carte orizzontali in carte verticali centrate */
  .player-card.tcg {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px 10px !important;
    gap: 12px !important;
    min-height: auto !important;
  }

  /* Forza il Nome e Cognome a stare al centro */
  .player-card.tcg .tc-player {
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Rimuove i margini che spingevano il Rating verso destra */
  .player-card.tcg .tc-overall {
    margin: 0 !important;
  }

  /* Tira fuori Ruolo e Stagione dagli angoli e li mette al centro in basso */
  .player-card.tcg .tc-positions,
  .player-card.tcg .tc-season {
    position: relative !important; /* Toglie il posizionamento fisso agli angoli */
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    margin: 0 !important;
    display: inline-block;
  }
}
/* ============================================================
   CENTRATURA CONTENITORI, PULSANTI E PANNELLI SOTTO IL CAMPO
   ============================================================ */
@media (max-width: 860px) {
  
  /* 1. Centra l'intero blocco sotto il campo (carte + bottoni) */
  .options-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Forza i figli al centro orizzontale */
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* 2. Centra il blocco che contiene i bottoni "REROLL" e "VIA ALLA STAGIONE" */
  .draft-actions {
    display: flex !important;
    justify-content: center !important; /* Centra i bottoni */
    align-items: center !important;
    width: 100% !important;
    gap: 12px !important;
    margin: 20px auto !important;
  }

  /* 3. Assicura che le carte non siano spostate a sinistra */
  .options-cards {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 400px !important; /* Limita la larghezza massima */
    margin: 0 auto !important;
  }

  /* 4. Centra anche i blocchi della Carriera e della Cronaca */
  .draft-sidebar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* 5. Applica dimensioni uniformi e le centra */
  .team-info-panel, 
  .event-log-panel {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto 16px auto !important;
  }
}
/* ============================================================
   BADGE MVP E GOLEADOR (Schermata Riepilogo)
   ============================================================ */
.player-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 3px 6px;
  border-radius: 6px;
  font-family: var(--font-cond);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
}

.player-badge.mvp {
  background: linear-gradient(135deg, rgba(255, 210, 74, 0.15), rgba(255, 158, 44, 0.15));
  border: 1px solid rgba(255, 210, 74, 0.5);
  color: #ffd24a;
}

.player-badge.top-scorer {
  background: linear-gradient(135deg, rgba(0, 161, 255, 0.15), rgba(0, 91, 187, 0.15));
  border: 1px solid rgba(0, 161, 255, 0.5);
  color: var(--celeste-chiaro);
}
/* ============================================================
   BADGE INTESE STORICHE (CHEMISTRY)
   ============================================================ */
.synergy-badge {
  background: linear-gradient(135deg, rgba(255, 100, 100, 0.2), rgba(255, 50, 50, 0.2));
  border: 1px solid rgba(255, 100, 100, 0.6);
  color: #ffcccc;
  padding: 6px 10px;
  border-radius: 8px;
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  display: inline-block;
  box-shadow: 0 0 10px rgba(255, 50, 50, 0.3);
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0% { box-shadow: 0 0 5px rgba(255, 50, 50, 0.2); }
  50% { box-shadow: 0 0 15px rgba(255, 50, 50, 0.6); }
  100% { box-shadow: 0 0 5px rgba(255, 50, 50, 0.2); }
}
/* ============================================================
   PARTITE BOSS & BACHECA TROFEI
   ============================================================ */

/* Animazione e Stile Partite Boss nel Replay */
.replay-row.rr-boss {
  border: 1px solid var(--doom);
  background: linear-gradient(180deg, rgba(212, 68, 68, 0.2), rgba(0, 11, 26, 0.9));
  box-shadow: 0 0 15px rgba(212, 68, 68, 0.4);
  animation: bossPulse 2s infinite alternate;
}
.rr-boss .rr-opp {
  color: #ff5c5c;
  font-weight: 800;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(212, 68, 68, 0.6);
}
@keyframes bossPulse {
  0% { box-shadow: 0 0 5px rgba(212, 68, 68, 0.3); }
  100% { box-shadow: 0 0 20px rgba(212, 68, 68, 0.7); border-color: #ff7777; }
}

/* Stili Bacheca Trofei */
.ach-locked {
  opacity: 0.5;
  filter: grayscale(100%);
  background: rgba(0,0,0,0.4);
}
.ach-unlocked {
  background: linear-gradient(90deg, rgba(255,210,74,0.1), rgba(0, 14, 31, 0.75));
  border-left: 3px solid var(--celeste);
  box-shadow: 0 0 20px rgba(255,210,74,0.15);
}
@keyframes pulseUlt {
  0% { box-shadow: 0 0 5px rgba(255, 138, 0, 0.4); transform: scale(1); }
  50% { box-shadow: 0 0 20px rgba(229, 46, 113, 0.9); transform: scale(1.02); }
  100% { box-shadow: 0 0 5px rgba(255, 138, 0, 0.4); transform: scale(1); }
}
.player-cost {
  display: inline-block;
  margin-top: 4px;
  background: rgba(0, 20, 10, 0.9);
  border: 1px solid #00ff88;
  color: #00ff88;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: 0.75rem;
  width: fit-content;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
/* ============================================================
   EFFETTI SPECIALI: BOSS MATCH E CRONACA GOL
   ============================================================ */
.rr-boss {
  border: 2px solid #ff5c5c !important;
  box-shadow: 0 0 15px rgba(255, 92, 92, 0.4);
  background: linear-gradient(180deg, rgba(70, 18, 18, 0.88), rgba(20, 5, 5, 0.72)) !important;
  animation: bossPulse 1.5s infinite;
}

@keyframes bossPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 92, 92, 0.3); }
  50% { box-shadow: 0 0 25px rgba(255, 92, 92, 0.8); }
}

.rr-scorers {
  grid-column: 1 / -1; /* Occupa tutta la larghezza della riga */
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--testo-dim);
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  line-height: 1.4;
}
/* ============================================================
   STILE CRONACA DELLA RUN (EVENT LOG)
   ============================================================ */
.event-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.el-item {
  background: linear-gradient(135deg, rgba(0, 17, 43, 0.6), rgba(0, 11, 26, 0.8));
  border: 1px solid rgba(0, 161, 255, 0.2);
  border-left: 3px solid var(--celeste);
  border-radius: 8px;
  padding: 12px 14px;
  text-align: left !important; /* Forza l'allineamento a sinistra per leggibilità */
}

.el-body {
  display: flex;
  flex-direction: column;
  gap: 5px; /* Spazio netto tra il Titolo e la Descrizione */
}

.el-name {
  font-family: var(--font-cond);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--celeste-chiaro);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.el-text {
  font-size: 0.88rem;
  color: var(--testo);
  line-height: 1.45;
}
/* Stile Bottoni Porta da Rigore */
/* ============================================================
   STILE E ANIMAZIONI RIGORI INTERATTIVI
   ============================================================ */
.pen-dir {
  background: rgba(255, 255, 255, 0.1);
  border: 2px dashed rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
  font-weight: 900;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.9rem;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(2px);
  cursor: crosshair; /* Il mouse diventa un mirino! */
}

.pen-dir:hover {
  background: rgba(0, 161, 255, 0.3);
  border: 2px solid var(--celeste);
  color: white;
  transform: scale(1.08);
  box-shadow: 0 0 15px rgba(0, 161, 255, 0.6);
}

/* Stato disabilitato (quando hai già tirato) */
.pen-dir.disabled {
  opacity: 0.2;
  pointer-events: none;
  filter: grayscale(100%);
}

/* Animazione GOL (Esplosione verde + pulsazione continua) */
@keyframes penaltyGolBurst {
  0% { transform: scale(1); background: rgba(0,255,136,0.5); box-shadow: 0 0 0 rgba(0,255,136,0); }
  35% { transform: scale(1.3) rotate(-2deg); background: rgba(0,255,136,0.95); box-shadow: 0 0 40px rgba(0,255,136,1); }
  60% { transform: scale(1.05) rotate(1deg); }
  100% { transform: scale(1.12); background: rgba(0,255,136,0.85); box-shadow: 0 0 22px rgba(0,255,136,0.8); }
}
@keyframes penaltyGolPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(0,255,136,0.55); transform: scale(1.1); }
  50% { box-shadow: 0 0 34px rgba(0,255,136,0.95); transform: scale(1.16); }
}

/* Animazione PARATA/ERRORE (Vibrazione rossa + pulsazione continua) */
@keyframes penaltyParataShake {
  0% { transform: translateX(0) scale(1); background: rgba(255,92,92,0.5); }
  15% { transform: translateX(-16px) rotate(-4deg) scale(1.08); background: rgba(255,92,92,0.95); }
  32% { transform: translateX(14px) rotate(4deg); }
  50% { transform: translateX(-10px) rotate(-2deg); }
  68% { transform: translateX(6px) rotate(1deg); }
  85% { transform: translateX(-3px) rotate(-1deg); }
  100% { transform: translateX(0) rotate(0deg); background: rgba(255,92,92,0.85); }
}
@keyframes penaltyParataPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(255,92,92,0.5); }
  50% { box-shadow: 0 0 28px rgba(255,92,92,0.9); }
}

.pen-gol {
  animation: penaltyGolBurst 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             penaltyGolPulse 1.1s ease-in-out 0.9s infinite !important;
  color: white !important;
  border: 2px solid #00ff88 !important;
  z-index: 10;
}

.pen-parata {
  animation: penaltyParataShake 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards,
             penaltyParataPulse 1.1s ease-in-out 0.9s infinite !important;
  color: white !important;
  border: 2px solid #ff5c5c !important;
  z-index: 10;
}

/* ============================================================
   RESTYLE ESTETICO · MICRO-INTERAZIONI (versione leggera)
   Rimosso il fondale animato con blur (era il principale
   responsabile del rallentamento). Le rifiniture rimaste usano
   solo transform/opacity, che il browser anima via GPU senza
   dover ricalcolare il layout o il blur ad ogni frame.
   ============================================================ */

/* --- Scrollbar su misura (costo nullo, non è un'animazione) --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--azzurro-vivo), var(--azzurro)); border-radius: var(--radius-pill); border: 2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover { background: var(--celeste); }
* { scrollbar-color: var(--azzurro-vivo) var(--bg-1); scrollbar-width: thin; }

/* --- Focus da tastiera, per accessibilità ed eleganza --- */
:focus-visible {
  outline: 2px solid var(--celeste);
  outline-offset: 2px;
  border-radius: var(--radius-bug);
}

/* --- Bottoni: pressione tattile + shine in scorrimento (solo transform, niente "left" animato) --- */
.btn { position: relative; overflow: hidden; }
.btn:not(:disabled):active { transform: scale(0.96); }
.btn.primary::before {
  content: ""; position: absolute; top: 0; left: -10%; width: 30%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.32), transparent);
  transform: skewX(-20deg) translateX(-150%); pointer-events: none;
}
.btn.primary:not(:disabled):hover::before {
  animation: btnShine 0.7s ease;
}
@keyframes btnShine {
  from { transform: skewX(-20deg) translateX(-150%); }
  to   { transform: skewX(-20deg) translateX(480%); }
}

/* --- Carte (draft/rosa): riflesso diagonale al passaggio del mouse (solo transform) --- */
.player-card.tcg, .formation-card { position: relative; }
.player-card.tcg::after, .formation-card::after {
  content: ""; position: absolute; top: 0; left: -20%; width: 24%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.14), transparent);
  transform: skewX(-20deg) translateX(-150%); pointer-events: none; opacity: 0;
}
.player-card.tcg:hover::after, .formation-card:hover::after {
  opacity: 1; animation: cardShine 0.8s ease;
}
@keyframes cardShine {
  from { transform: skewX(-20deg) translateX(-150%); }
  to   { transform: skewX(-20deg) translateX(600%); }
}

/* --- Toast con più carattere: pop elastico invece di semplice fade (solo transform/opacity) --- */
.toast {
  transition: opacity var(--dur-2) ease, transform var(--dur-3) var(--ease-pop) !important;
}
.toast.show { animation: toastPop var(--dur-3) var(--ease-pop); }
@keyframes toastPop {
  0% { opacity: 0; transform: translate(-50%, 20px) scale(0.9); }
  60% { opacity: 1; transform: translate(-50%, -4px) scale(1.03); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* --- Hud-pill: piccola pulsazione quando il valore cambia (classe aggiunta via JS, opzionale) --- */
.hud-pill.bump { animation: hudBump 0.4s var(--ease-pop); }
@keyframes hudBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .btn.primary::before, .player-card.tcg::after, .formation-card::after { animation: none !important; }
}
/* ============================================================
   NUOVE FUNZIONALITÀ: CAPITANO E CARTE OLOGRAFICHE
   ============================================================ */

/* Badge Capitano sul campo */
.slot-captain {
  position: absolute; top: -6px; right: -6px;
  background: #ffd24a; color: #00112b; font-weight: 900;
  font-size: 0.65rem; padding: 2px 5px; border-radius: 50%;
  border: 2px solid #00112b; box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  z-index: 5;
}

/* Effetto Olografico per i Campioni (OVR >= 90)
   Nota performance: animiamo transform (compositor-only) invece di
   background-position, che forzava un repaint ad ogni frame per
   ogni carta legend visibile (collezione, spacchettamento, campo). */
.tcg-legend {
  overflow: hidden;
}
.tcg-legend::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -50%;
  width: 200%;
  background: linear-gradient(125deg, transparent 20%, rgba(255, 210, 74, 0.4) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 210, 74, 0.4) 60%, transparent 80%);
  mix-blend-mode: color-dodge;
  pointer-events: none;
  will-change: transform;
  animation: holoShine 3s infinite linear;
  z-index: 10;
}
@keyframes holoShine {
  0% { transform: translateX(-25%); }
  100% { transform: translateX(25%); }
}
/* ============================================================
   CARTE ICON (HALL OF FAME) - STILE BIANCO/ORO
   ============================================================ */
/* Carta grande nel Draft */
.player-card.tcg.tcg-icon {
  background: linear-gradient(135deg, #ffffff, #f0f0f0);
  border-color: #d4af37;
  box-shadow: var(--shadow-card), 0 0 25px rgba(212, 175, 55, 0.4);
}

/* Colori dei testi all'interno della carta Icon */
.player-card.tcg.tcg-icon .tc-ln {
  color: #1a1a1a;
  text-shadow: none;
}
.player-card.tcg.tcg-icon .tc-fn {
  color: #555555;
}
.player-card.tcg.tcg-icon .tc-overall span {
  color: #d4af37;
  background: rgba(212, 175, 55, 0.15);
  border-color: #d4af37;
  text-shadow: none;
}
.player-card.tcg.tcg-icon .tc-positions {
  color: #666666;
}
.player-card.tcg.tcg-icon .tc-season {
  color: #1a1a1a;
  background: rgba(212, 175, 55, 0.2);
  border-color: #d4af37;
}

/* Pedina sul campo (maglietta) */
.slot.filled.slot-icon {
  background:
    linear-gradient(160deg, #ffffff, #e0e0e0) padding-box,
    linear-gradient(145deg, #f3e5ab, #d4af37 45%, #b5952f 75%, #f3e5ab) border-box;
  color: #1a1a1a;
}
.slot.filled.slot-icon .slot-rating {
  color: #d4af37;
  font-weight: 900;
  text-shadow: none;
}
.slot.filled.slot-icon .slot-name,
.slot.filled.slot-icon .slot-season,
.slot.filled.slot-icon .slot-age {
  color: #1a1a1a;
}
.slot.filled.slot-icon .slot-captain {
  background: #1a1a1a;
  color: #d4af37;
  border-color: #d4af37;
}
/* Badge per lo sviluppo/crescita dei giocatori (+1, -1) */
.slot-growth {
  position: absolute; top: -6px; left: -6px;
  font-size: 0.65rem; font-weight: 900;
  padding: 2px 5px; border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  z-index: 5;
}
.slot-growth.up { background: #00ff88; color: #00112b; border: 1px solid #00112b; }
.slot-growth.down { background: #ff5c5c; color: #ffffff; border: 1px solid #00112b; }
/* ============================================================
   BAGLIORE PER GIOCATORI LEGGENDARI (OVR >= 90) IN CAMPO
   ============================================================ */
.slot.filled.slot-legend {
  background:
    linear-gradient(160deg, var(--card-3), var(--blu-notte)) padding-box,
    linear-gradient(145deg, #ffd24a, #ff9e2c 45%, #ffd24a 75%, #ff9e2c) border-box;
  box-shadow: 0 0 18px rgba(255, 210, 74, 0.5), var(--shadow-token);
}
.slot.filled.slot-legend .slot-rating {
  color: #ffd24a;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(255, 210, 74, 0.7);
}
/* ============================================================
   ECONOMIA E NEGOZIO
   ============================================================ */
.wallet-display {
  background: linear-gradient(135deg, rgba(0, 161, 255, 0.15), rgba(0, 11, 26, 0.8));
  border: 1px solid var(--celeste);
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: #fff;
  box-shadow: 0 0 12px rgba(0, 161, 255, 0.3);
}

.wallet-display span {
  color: var(--celeste-chiaro);
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14px 0 22px 0;
}

.shop-collection-btn {
  width: 100%;
  margin-top: 22px;
}

.shop-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.pack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  border: 2px solid var(--rar-comune);
  background: linear-gradient(160deg, rgba(0,17,43,0.95), rgba(159,176,192,0.12));
  border-radius: 18px;
  padding: 26px 16px 20px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.25s ease, border-color 0.25s ease;
  min-height: 240px;
}

/* Barra accento superiore per rarità */
.pack-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--rar-comune);
  opacity: 0.8;
}

/* Sweep di luce al passaggio del mouse (transform-only, leggero) */
.pack-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.10) 48%, transparent 66%);
  transform: translateX(-120%);
  pointer-events: none;
}
.pack-card:hover::after { transform: translateX(120%); transition: transform 0.7s ease; }

.pack-card:hover {
  transform: translateY(-6px) scale(1.02);
}
.pack-card:active { transform: translateY(-2px) scale(0.99); }

.pack-card__icon {
  font-size: 1.9rem;
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}

.pack-card__badge {
  position: absolute;
  top: 12px; right: -30px;
  background: var(--celeste);
  color: #00112b;
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  padding: 3px 34px;
  transform: rotate(35deg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.pack-card__badge--elite {
  background: linear-gradient(90deg, #ffd24a, #ff9e2c);
  color: #00112b;
}

.pack-card h3 {
  font-family: var(--font-display); 
  font-size: 1.9rem; 
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pack-card p {
  color: var(--testo-dim); 
  font-size: 0.85rem; 
  margin-bottom: 18px;
  line-height: 1.4;
  font-family: var(--font-body);
  flex: 1;
}

.pack-price {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 1rem;
  border: 1px solid var(--rar-comune);
  color: var(--rar-comune);
}

.pack-card.azzurro-pack {
  border-color: var(--celeste);
  background: linear-gradient(160deg, rgba(0,17,43,0.95), rgba(0,161,255,0.13));
  box-shadow: 0 0 15px rgba(0,161,255,0.15);
}
.pack-card.azzurro-pack::before { background: var(--celeste); }
.pack-card.azzurro-pack:hover { box-shadow: 0 8px 30px rgba(0,161,255,0.35); }
.pack-card.azzurro-pack .pack-price {
  background: linear-gradient(180deg, var(--azzurro-vivo), var(--azzurro) 55%, var(--azzurro-scuro)); 
  color: #fff; border: none;
}

.pack-card.d10s-pack {
  border-color: var(--rar-elite);
  background: linear-gradient(160deg, rgba(0,17,43,0.95), rgba(255,210,74,0.13));
  box-shadow: 0 0 20px rgba(255,210,74,0.2);
}
.pack-card.d10s-pack::before { background: linear-gradient(90deg, #ffd24a, #ff9e2c); }
.pack-card.d10s-pack:hover { box-shadow: 0 8px 35px rgba(255,210,74,0.45); }
.pack-card.d10s-pack .pack-price {
  background: linear-gradient(90deg, #ffd24a, #ff9e2c); 
  color: #00112b; border: none; font-weight: 900;
}

/* ============================================================
   COLLEZIONE
   ============================================================ */
.collection-count-line { text-align: center; margin-bottom: 14px; }

.collection-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}
.coll-chip {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.coll-chip:hover { transform: translateY(-1px); color: var(--testo); }
.coll-chip.is-active {
  background: linear-gradient(90deg, var(--azzurro-vivo), var(--celeste));
  border-color: var(--celeste);
  color: #fff;
  box-shadow: 0 0 12px rgba(0,161,255,0.35);
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.collection-grid > .player-card.tcg {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.collection-grid > .player-card.tcg:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card), 0 12px 24px rgba(0,0,0,0.4);
}
.collection-empty {
  grid-column: 1/-1;
  text-align: center;
  color: var(--testo-dim);
  padding: 50px 20px;
  font-family: var(--font-cond);
}
.collection-empty__icon { font-size: 2.4rem; display: block; margin-bottom: 10px; opacity: 0.6; }


/* ============================================================
   ANIMAZIONI WALKOUT E PACCHETTI (ANTI-LAG & ANTI-BUG)
   ============================================================ */
#pack-cards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: 100%;
  min-height: 350px;
}

.pack-item-container {
  position: relative;
  width: 200px; /* DIMENSIONE FISSA! Risolve il bug delle carte giganti */
  aspect-ratio: 3 / 4.3;
  perspective: 1000px;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.pack-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-style: preserve-3d;
}

.pack-item-container.flipped .pack-card-inner {
  transform: rotateY(180deg);
}

.pack-card-front, .pack-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* Fondamentale per non laggare su iOS */
  border-radius: 16px;
}

.pack-card-front {
  transform: rotateY(180deg);
}

.pack-card-back {
  background: linear-gradient(135deg, var(--azzurro-scuro), var(--azzurro-vivo));
  border: 2px solid var(--celeste);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pack-card-back::after {
  content: '38-0-0';
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: rgba(255,255,255,0.2);
  transform: rotate(-45deg);
}

/* ============================================================
   FIX GLOW WALKOUT (Senza conflitti di transform 3D)
   ============================================================ */
.walkout-glow {
  border-color: #ffd24a !important;
  animation: pulseLight 1.5s infinite alternate;
}

@keyframes pulseLight {
  0% { 
    box-shadow: 0 0 15px rgba(255, 210, 74, 0.4), inset 0 0 10px rgba(255, 210, 74, 0.2); 
    filter: brightness(1);
  }
  100% { 
    box-shadow: 0 0 35px rgba(255, 210, 74, 0.9), inset 0 0 20px rgba(255, 210, 74, 0.5); 
    filter: brightness(1.12);
  }
}

@media (max-width: 760px) {
  #pack-cards {
    flex-wrap: wrap; /* Su mobile va a capo in automatico */
  }
  .pack-item-container {
    width: 115px; /* Su telefono diventano piccole per non uscire fuori schermo */
  }
  .pack-title { font-size: 1.8rem; }
}
/* ============================================================
   FIX LAG CARTE OLOGRAFICHE (Rimozione mix-blend-mode)
   ============================================================ */
.tcg-legend {
  overflow: hidden;
}
.tcg-legend::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -50%;
  width: 200%;
  background: linear-gradient(125deg, transparent 20%, rgba(255, 210, 74, 0.35) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 210, 74, 0.35) 60%, transparent 80%);
  /* mix-blend-mode RIMOSSO per garantire i 60fps su smartphone */
  pointer-events: none;
  will-change: transform;
  animation: holoShine 3s infinite linear;
  z-index: 10;
}




/* ============================================================
   BANNERS CARTE (NUOVO / DOPPIONE) 
   Sostituisce gli stili in linea per non "sbordare" su mobile
   ============================================================ */
.card-banner {
  position: absolute !important;
  top: 0 !important; 
  left: 0 !important; /* Spostato da right a left */
  right: auto !important;
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: 16px 0 12px 0 !important; /* Arrotondamento adattato all'angolo in alto a sinistra */
  z-index: 20;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
  border-bottom: 1px solid rgba(0,0,0,0.3);
  border-right: 1px solid rgba(0,0,0,0.3);
  border-left: none !important;
}
.banner-new { background: #00ff88; color: #00112b; }
.banner-dupe { background: #ff5c5c; color: #ffffff; }
#pack-overlay {
    display: none; /* FONDAMENTALE: lo nasconde quando non serve! */
    position: fixed;
    inset: 0;
    background: rgba(0, 5, 15, 0.95);
    z-index: 999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#pack-overlay.show {
    display: flex; /* Lo fa apparire solo quando apri il pacchetto */
}
/* FORZA IL NOME NELLE CARTE A RESTARE ORIZZONTALE */
.player-card.tcg .tc-ln {
  writing-mode: horizontal-tb !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

.player-card.tcg {
  grid-template-columns: minmax(0, 1fr) auto !important; /* Rimuove forzature rigide che schiacciavano il layout */
}
/* ============================================================
   GRIGLIA DATABASE CARTE (4 per riga, centrata)
   ============================================================ */
.card-db-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 260px));
  justify-content: center;
  gap: 16px;
  width: 100%;
  margin: 0 auto;
}

/* Carta non posseduta: leggermente in trasparenza e in scala di grigi */
.db-card-unowned {
  opacity: 0.45;
  filter: grayscale(85%);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.db-card-unowned:hover {
  opacity: 0.85;
  filter: grayscale(20%);
}

/* Adattamento responsive per schermi più piccoli */
@media (max-width: 1100px) {
  .card-db-grid {
    grid-template-columns: repeat(2, minmax(0, 260px));
  }
}

/* =schermata intera per il Database Carte (hof) */
#screen-home[data-panel="hof"] {
  grid-template-columns: 1fr !important;
}
#screen-home[data-panel="hof"] .startmenu__left {
  display: none !important;
}
#screen-home[data-panel="hof"] .startmenu__right {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 1450px !important;
  margin: 0 auto !important;
  padding: 40px 20px !important;
  background: transparent !important;
}
#screen-home[data-panel="hof"] .startmenu__right::before {
  display: none !important;
}
.player-card.tcg .tc-ln {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem) !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}
/* ============================================================
   OTTIMIZZAZIONE NEGOZIO & PACCHETTI (No Lag)
   ============================================================ */

/* Restyling griglia negozio con effetto profondità */
/* ============================================================
   GRIGLIA NEGOZIO (Fissa a 3 in riga)
   ============================================================ */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* Forza 3 colonne esatte in linea */
  gap: 20px;
  perspective: 1000px;
  width: 100%;
}

/* Adattamento responsive per schermi più piccoli o tablet */
@media (max-width: 900px) {
  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 550px) {
  .shop-grid {
    grid-template-columns: 1fr;
  }
}

/* Schede pacchetti più rifinite e fluide al passaggio del mouse */
.pack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: 30px 20px 22px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(0, 25, 55, 0.9), rgba(0, 11, 26, 0.95));
  border: 2px solid rgba(0, 161, 255, 0.3);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
  cursor: pointer;
  overflow: hidden;
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.pack-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--celeste);
  box-shadow: 0 16px 40px -10px rgba(0, 161, 255, 0.35);
}

.pack-card:active {
  transform: translateY(-2px) scale(0.99);
}

/* Effetto luce radiale di sottofondo per l'overlay di spacchettamento */
#pack-overlay {
  background: radial-gradient(circle at center, rgba(0, 35, 75, 0.85) 0%, rgba(0, 5, 15, 0.98) 80%) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Animazione di comparsa fluida per le carte durante il walkout */
.pack-item-container {
  will-change: transform, opacity;
  transform: translateZ(0); /* Attiva l'accelerazione hardware nativa */
}

/* Restyling contatore crediti (Wallet) nel negozio */
.wallet-display {
  background: linear-gradient(135deg, rgba(0, 161, 255, 0.2), rgba(0, 11, 26, 0.9));
  border: 1px solid var(--celeste);
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: #fff;
  box-shadow: 0 0 20px rgba(0, 161, 255, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* ============================================================
   INGRANDISCI LE CARTE NELL'APERTURA PACCHETTI
   ============================================================ */
#pack-overlay .player-card.tcg {
  width: 270px !important;
  min-width: 270px !important;
  min-height: 150px !important;
  padding: 20px 24px !important;
}

/* Allarga il contenitore dei pacchetti per accogliere le carte più grandi */
#pack-overlay .pack-reveal-container,
#pack-overlay [style*="display: flex"] {
  gap: 24px !important;
  max-width: 100% !important;
}
/* ============================================================
   FIX DEFINITIVO SOVRAPPOSIZIONE CARTE NEI PACCHETTI
   ============================================================ */
#pack-overlay {
  overflow-y: auto !important;
  padding: 20px !important;
}

/* Dimensione ideale per far stare i nomi lunghi su una riga senza sovrapporsi */
#pack-overlay .player-card.tcg {
  width: 240px !important;
  min-width: 230px !important;
  max-width: 250px !important;
  min-height: 145px !important;
  padding: 16px 18px !important;
  flex: 0 0 auto !important;
}

/* Contenitore flessibile con chiusura di sicurezza (wrap) per evitare sovrapposizioni */
#pack-overlay div[style*="display: flex"],
#pack-overlay .pack-reveal-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}
/* ============================================================
   FIX DEFINITIVO: STOP SCHIACCIAMENTO CARTE NEI PACCHETTI
   ============================================================ */

/* 1. Allarghiamo la "gabbia" 3D generata dal JavaScript */
.pack-item-container {
  width: 260px !important;         /* Più spazio per i nomi lunghi */
  min-width: 260px !important;
  height: 155px !important;        /* Altezza rigida calibrata sulla carta orizzontale */
  min-height: 155px !important;
  aspect-ratio: auto !important;   /* SPEGNE la vecchia forzatura verticale 3/4.3 */
  flex: 0 0 auto !important;       /* DIVIETO ASSOLUTO a flexbox di rimpicciolirle */
  margin: 10px !important;
}

/* 2. Assicuriamo che la carta riempia la nuova gabbia alla perfezione */
.pack-item-container .player-card.tcg {
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 16px 20px !important;
  box-sizing: border-box !important;
  position: absolute !important;   /* Necessario per il Flip 3D */
  inset: 0 !important;
}

/* 3. Disattiviamo la vecchia regola che le stritolava a 115px sui telefoni! */
@media (max-width: 760px) {
  #pack-cards {
    flex-direction: column !important; /* Le mette in colonna sui telefoni */
    gap: 15px !important;
  }
  .pack-item-container {
    width: 100% !important;        /* Prendono tutta la larghezza dello schermo */
    max-width: 320px !important;
    height: 140px !important;
    min-height: 140px !important;
  }
}
/* ============================================================
   FORZA GRIGLIA COLLEZIONE A 3 COLONNE (3x3)
   ============================================================ */
#collection-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}

/* Regola per schermi più piccoli e smartphone (mette in colonna singola per non schiacciare) */
@media (max-width: 860px) {
  #collection-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  
  /* I bottoni in mobile si rimpiccioliscono leggermente */
  #collection-pagination {
    flex-wrap: wrap;
  }
}
/* ============================================================
   INGRANDIMENTO MASSIMO CARTE PACCHETTI (PER NOMI LUNGHI)
   ============================================================ */

/* 1. Allarghiamo la gabbia a 300px per accogliere nomi infiniti */
.pack-item-container {
  width: 300px !important;         /* Aumentato da 260px a 300px */
  min-width: 300px !important;
  height: 170px !important;        /* Aumentato in proporzione */
  min-height: 170px !important;
}

/* 2. Ridimensionamento fluido: se il nome è enorme, si stringe un po' da solo */
.pack-item-container .player-card.tcg .tc-ln {
  font-size: clamp(1.05rem, 4.5vw, 1.45rem) !important;
  white-space: nowrap !important;
  letter-spacing: 0.01em !important;
}

/* 3. Su smartphone diamo il massimo dello spazio orizzontale consentito */
@media (max-width: 760px) {
  .pack-item-container {
    width: 100% !important;
    max-width: 350px !important;
    height: 160px !important;
    min-height: 160px !important;
  }
}
/* ============================================================
   WIDGET LOGIN POCO INVADENTE
   ============================================================ */
.auth-widget {
  margin-bottom: 25px; /* Spazio prima del titolo "Il manageriale azzurro" */
  font-family: var(--font-cond);
  z-index: 10;
}

.auth-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.auth-input {
  background: rgba(0, 11, 26, 0.4);
  border: 1px solid rgba(0, 161, 255, 0.3);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  outline: none;
  width: 140px;
  transition: border-color 0.2s, background 0.2s;
}

.auth-input:focus {
  border-color: var(--celeste);
  background: rgba(0, 11, 26, 0.8);
}

.auth-btn {
  padding: 6px 16px;
  min-height: 0;
  font-size: 0.8rem;
  border-radius: 8px;
}

.auth-greeting {
  color: var(--celeste-chiaro);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}
/* ============================================================
   BLOCCO DEFINITIVO — OTTIMIZZAZIONE MOBILE
   1) Apertura pacchetti leggibile (carte impilate, non schiacciate)
   2) Griglia 3x3 fissa per Database e Collezione anche da mobile,
      con paginazione (bottoni + swipe)
   Questo blocco vince sempre sulle regole precedenti in conflitto
   perché più specifico e posizionato in fondo al foglio di stile.
   ============================================================ */

/* ---------- 1) APERTURA PACCHETTO: layout pulito su mobile ---------- */
#pack-overlay {
  overflow-y: auto !important;
  padding: 24px 16px !important;
}
#pack-cards {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  min-height: 0 !important;
}
.pack-item-container {
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  height: 140px !important;
  min-height: 140px !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
.pack-item-container .player-card.tcg {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  flex-direction: unset !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 14px 16px !important;
  box-sizing: border-box !important;
  position: absolute !important;
  inset: 0 !important;
  text-align: left !important;
  gap: 4px 12px !important;
}
.pack-item-container .player-card.tcg .tc-player {
  align-items: flex-start !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
}
.pack-item-container .player-card.tcg .tc-ln {
  font-size: 1.2rem !important;
  white-space: normal !important;
  word-break: break-word !important;
}
.pack-item-container .player-card.tcg .tc-positions,
.pack-item-container .player-card.tcg .tc-season {
  position: static !important;
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  margin: 0 !important;
  display: inline-block;
}

@media (max-width: 760px) {
  #pack-title { font-size: 1.6rem !important; }
  #pack-hint { margin-bottom: 24px !important; }
  #pack-cards {
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
  }
  .pack-item-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 340px !important;
    height: 120px !important;
    min-height: 120px !important;
  }
  .pack-item-container .player-card.tcg {
    padding: 12px 14px !important;
  }
  .pack-item-container .player-card.tcg .tc-ln {
    font-size: 1.05rem !important;
  }
  .pack-item-container .player-card.tcg .tc-overall span {
    font-size: 1.6rem !important;
    padding: 3px 12px !important;
  }
}

/* ---------- 2) GRIGLIA 3x3 FISSA — DATABASE E COLLEZIONE ---------- */
@media (max-width: 720px) {
  #collection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .card-db-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* Carta compatta pensata per stare in 1/3 di riga su telefono */
  #collection-grid .player-card.tcg,
  .card-db-grid .player-card.tcg {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 8px 4px !important;
    gap: 3px !important;
    min-height: 96px !important;
    border-radius: 10px !important;
  }
  #collection-grid .player-card.tcg .tc-player,
  .card-db-grid .player-card.tcg .tc-player {
    align-items: center !important;
    text-align: center !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  #collection-grid .player-card.tcg .tc-fn,
  .card-db-grid .player-card.tcg .tc-fn {
    font-size: 0.48rem !important;
    letter-spacing: 0.04em !important;
  }
  #collection-grid .player-card.tcg .tc-ln,
  .card-db-grid .player-card.tcg .tc-ln {
    font-size: 0.68rem !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  #collection-grid .player-card.tcg .tc-overall,
  .card-db-grid .player-card.tcg .tc-overall {
    margin: 2px 0 !important;
  }
  #collection-grid .player-card.tcg .tc-overall span,
  .card-db-grid .player-card.tcg .tc-overall span {
    font-size: 0.95rem !important;
    padding: 2px 8px !important;
    border-radius: 8px !important;
  }
  #collection-grid .player-card.tcg .tc-positions,
  .card-db-grid .player-card.tcg .tc-positions,
  #collection-grid .player-card.tcg .tc-season,
  .card-db-grid .player-card.tcg .tc-season {
    position: static !important;
    font-size: 0.5rem !important;
    padding: 1px 5px !important;
    margin: 0 !important;
  }
  #collection-grid .card-banner,
  .card-db-grid .card-banner {
    font-size: 0.45rem !important;
    padding: 2px 6px !important;
  }
  #collection-grid .player-card.tcg .player-cost,
  .card-db-grid .player-card.tcg .player-cost {
    font-size: 0.48rem !important;
  }

  /* Bottoni pagina più compatti su telefono */
  #collection-pagination,
  #hof-content [style*="Precedente"] { flex-wrap: wrap; }
  #collection-pagination span,
  #hof-content span {
    font-size: 0.78rem !important;
  }
}

/* Suggerimento visivo che si può scorrere per cambiare pagina */
.swipe-hint {
  text-align: center;
  color: var(--testo-dim);
  font-family: var(--font-cond);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
  margin: -6px 0 14px 0;
  display: none;
}
@media (max-width: 720px) {
  .swipe-hint { display: block; }
}
/* ============================================================
   CENTRATURA PERFETTA NELL'APERTURA PACCHETTI
   ============================================================ */
#pack-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 35, 75, 0.9) 0%, rgba(0, 5, 15, 0.98) 80%) !important;
  z-index: 999;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  padding: 20px;
}

#pack-overlay.show {
  display: flex !important;
}

#pack-cards {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}
/* ============================================================
   GRIGLIA 3x3 PER COLLEZIONE E DATABASE DA MOBILE
   ============================================================ */
@media (max-width: 720px) {
  #collection-grid,
  .card-db-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Stile comune in 3x3 per le carte di entrambe le sezioni */
  #collection-grid .player-card.tcg,
  .card-db-grid .player-card.tcg {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 4px !important;
    gap: 4px !important;
    min-height: 105px !important;
    border-radius: 10px !important;
  }

  #collection-grid .player-card.tcg .tc-player,
  .card-db-grid .player-card.tcg .tc-player {
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #collection-grid .player-card.tcg .tc-fn,
  .card-db-grid .player-card.tcg .tc-fn {
    font-size: 0.5rem !important;
  }

  #collection-grid .player-card.tcg .tc-ln,
  .card-db-grid .player-card.tcg .tc-ln {
    font-size: 0.72rem !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  #collection-grid .player-card.tcg .tc-overall span,
  .card-db-grid .player-card.tcg .tc-overall span {
    font-size: 1.1rem !important;
    padding: 2px 8px !important;
    border-radius: 8px !important;
  }

  #collection-grid .player-card.tcg .tc-positions,
  .card-db-grid .player-card.tcg .tc-positions,
  #collection-grid .player-card.tcg .tc-season,
  .card-db-grid .player-card.tcg .tc-season {
    position: static !important;
    font-size: 0.52rem !important;
    padding: 1px 4px !important;
    margin: 0 !important;
  }
}
/* ============================================================
   1. CENTRATURA PERFETTA APERTURA PACCHETTI (FIX DEFINITIVO)
   ============================================================ */
#pack-overlay {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  background: radial-gradient(circle at center, rgba(0, 35, 75, 0.95) 0%, rgba(0, 5, 15, 0.99) 85%) !important;
  z-index: 9999 !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  overflow-y: auto !important;
  padding: 20px !important;
  text-align: center !important;
}

#pack-overlay.show {
  display: flex !important;
}

#pack-cards {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* ============================================================
   2. ELEMENTI DISPARI CENTRATI (Pacchetti, Formazioni, ecc.)
   ============================================================ */
.shop-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

/* Fa in modo che l'ultimo pacchetto (se dispari) si sposti al centro della riga sotto */
.shop-grid > .pack-card:last-child:nth-child(odd),
.formation-grid > *:last-child:nth-child(odd) {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  width: 100% !important;
  max-width: 275px !important;
}

/* ============================================================
   LAYOUT 2 E 1 PER APERTURA PACCHETTI (Esattamente come il negozio)
   ============================================================ */
#pack-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 260px)) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 580px !important; /* Forza lo spazio esatto per 2 colonne */
  margin: 0 auto !important;
}

/* La terza carta (essendo un numero dispari) si posiziona al centro della riga sotto */
#pack-cards > .pack-item-container:last-child:nth-child(odd) {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
}

.pack-item-container {
  position: relative !important;
  width: 260px !important;
  min-width: 260px !important;
  height: 150px !important;
  min-height: 150px !important;
  perspective: 1000px !important;
  transition: transform 0.4s ease, opacity 0.4s ease !important;
}

@media (max-width: 760px) {
  #pack-cards {
    grid-template-columns: 1fr !important;
    max-width: 320px !important;
  }
  
  #pack-cards > .pack-item-container:last-child:nth-child(odd) {
    grid-column: auto !important;
    justify-self: stretch !important;
  }

  .pack-item-container {
    width: 100% !important;
    max-width: 320px !important;
    height: 140px !important;
    min-height: 140px !important;
  }
}
/* ============================================================
   FIX DEFINITIVO E PULITO — APERTURA PACCHETTI (2 SOPRA, 1 SOTTO)
   ============================================================ */
#pack-overlay {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  background: radial-gradient(circle at center, rgba(0, 35, 75, 0.96) 0%, rgba(0, 5, 15, 0.99) 85%) !important;
  z-index: 9999 !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  overflow-y: auto !important;
  padding: 24px 16px !important;
  text-align: center !important;
}

#pack-overlay.show {
  display: flex !important;
}

#pack-cards {
  display: grid !important;
  grid-template-columns: repeat(2, 260px) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
}

/* La terza carta (dispari) occupa l'intera riga inferiore e si centra da sola */
#pack-cards > .pack-item-container:last-child:nth-child(odd) {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
}

.pack-item-container {
  position: relative !important;
  width: 260px !important;
  min-width: 260px !important;
  height: 150px !important;
  min-height: 150px !important;
  perspective: 1000px !important;
  margin: 0 !important;
  transition: transform 0.4s ease, opacity 0.4s ease !important;
}

.pack-card-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  transform-style: preserve-3d !important;
}

.pack-item-container.flipped .pack-card-inner {
  transform: rotateY(180deg) !important;
}

.pack-card-front, .pack-card-back {
  position: absolute !important;
  inset: 0 !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  border-radius: 16px !important;
  width: 100% !important;
  height: 100% !important;
}

.pack-card-front {
  transform: rotateY(180deg) !important;
  box-sizing: border-box !important;
}

/* Adattamento pulito per smartphone */
@media (max-width: 600px) {
  #pack-cards {
    grid-template-columns: 240px !important; /* Passa a singola colonna centrata su mobile */
    max-width: 280px !important;
    gap: 14px !important;
  }
  
  #pack-cards > .pack-item-container:last-child:nth-child(odd) {
    grid-column: auto !important;
    justify-self: stretch !important;
  }

  .pack-item-container {
    width: 240px !important;
    min-width: 240px !important;
    height: 135px !important;
    min-height: 135px !important;
  }
}