/* ===================================================================
   golden-calcio820 — 38-0 Serie A  ·  stylesheet completo (v2)
   Tutto scoping sotto #calcio820-root. Dark default + light theme.
   =================================================================== */

#calcio820-root {
  /* palette dark */
  --c820-bg:        #090e18;
  --c820-surface:   rgba(19, 28, 48, 0.75);
  --c820-surface-2: rgba(27, 39, 64, 0.9);
  --c820-border:    rgba(56, 189, 248, 0.15);
  --c820-text:      #f8fafc;
  --c820-muted:     #94a3b8;
  --c820-accent:    #059669;   /* verde campo */
  --c820-accent-2:  #10b981;
  --c820-accent-glow: rgba(16, 185, 129, 0.25);
  --c820-gold:      #fbbf24;
  --c820-radius:    14px;
  --c820-radius-lg: 20px;
  --c820-shadow:    0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --c820-shadow-lg: 0 16px 48px 0 rgba(0, 0, 0, 0.55);

  /* badge overall (fasce) */
  --ov-elite: linear-gradient(135deg,#fbbf24,#d97706);
  --ov-great: linear-gradient(135deg,#10b981,#047857);
  --ov-good:  linear-gradient(135deg,#3b82f6,#1d4ed8);
  --ov-avg:   linear-gradient(135deg,#64748b,#475569);

  box-sizing: border-box;
  max-width: 640px;
  display: block;
  margin: 0 auto !important;
  float: none !important;
  padding: 24px;
  background: radial-gradient(130% 130% at 50% 0%, #152544 0%, #0d1628 50%, var(--c820-bg) 100%);
  color: var(--c820-text);
  font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  border-radius: var(--c820-radius-lg);
  min-height: 600px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: var(--c820-shadow-lg);
}

#calcio820-root[data-theme="light"] {
  --c820-bg:        #f1f5f9;
  --c820-surface:   rgba(255, 255, 255, 0.85);
  --c820-surface-2: rgba(241, 245, 249, 0.9);
  --c820-border:    rgba(148, 163, 184, 0.2);
  --c820-text:      #0f172a;
  --c820-muted:     #64748b;
  --c820-shadow:    0 8px 32px 0 rgba(15, 23, 42, 0.06);
  --c820-shadow-lg: 0 16px 48px 0 rgba(15, 23, 42, 0.12);
  background: radial-gradient(130% 130% at 50% 0%, #ffffff 0%, #f8fafc 50%, var(--c820-bg) 100%);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

#calcio820-root * { box-sizing: border-box; }
#calcio820-root a { color: var(--c820-accent-2); text-decoration: none; transition: color 0.2s; }
#calcio820-root a:hover { color: var(--c820-gold); }
#calcio820-root button { font-family: inherit; }

/* ---------- loading / error ---------- */
.c820-loading, .c820-error {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 380px; gap: 18px; color: var(--c820-muted);
}
.c820-loading::before {
  content: ''; width: 48px; height: 48px; border-radius: 50%;
  border: 4px solid var(--c820-surface-2); border-top-color: var(--c820-accent-2);
  box-shadow: 0 0 12px var(--c820-accent-glow);
  animation: c820-spin 0.9s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}
@keyframes c820-spin { to { transform: rotate(360deg); } }
#c820-retry {
  background: linear-gradient(135deg, var(--c820-accent), var(--c820-accent-2)); color:#fff; border:none; border-radius: var(--c820-radius);
  padding: 12px 24px; font-weight:700; cursor:pointer; box-shadow: 0 4px 12px var(--c820-accent-glow);
  transition: transform 0.2s, filter 0.2s;
}
#c820-retry:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* ---------- header / titolo ---------- */
.c820-setup-header, .c820-draft-header {
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px;
}
.c820-title {
  margin:0; font-size:2.2rem; font-weight:900; letter-spacing:-.03em;
  background: linear-gradient(135deg, var(--c820-accent-2) 0%, var(--c820-gold) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}
.c820-title-sub { font-size:1.1rem; color: var(--c820-muted); -webkit-text-fill-color: var(--c820-muted); font-weight:700; margin-left: 4px; }
.c820-subtitle { color: var(--c820-muted); text-align:center; margin: 0 0 24px; font-size:1rem; line-height: 1.5; }
.c820-theme-toggle {
  background: var(--c820-surface-2); border:1px solid var(--c820-border); color:var(--c820-text);
  width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:1.2rem; flex:0 0 auto;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.c820-theme-toggle:hover { border-color: var(--c820-accent-2); transform: scale(1.08) rotate(15deg); background: var(--c820-surface); }

/* ===================================================================
   SCHERMATA SETUP
   =================================================================== */
.c820-setup-screen { display:flex; flex-direction:column; }
.c820-setup-block { margin-bottom: 24px; }
.c820-setup-label {
  font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color: var(--c820-muted); margin-bottom: 12px;
}
.c820-option-grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap:12px;
}
.c820-option-row {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap:12px;
}
.c820-opt-btn {
  display:flex; flex-direction:column; gap:6px; text-align:left;
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: var(--c820-radius); padding: 14px 16px; cursor:pointer;
  color: var(--c820-text); transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s, box-shadow .2s, background 0.2s;
}
.c820-opt-btn:hover { transform: translateY(-3px); border-color: var(--c820-accent-2); box-shadow: 0 4px 16px rgba(0,0,0,0.15); background: var(--c820-surface-2); }
.c820-opt-btn.selected {
  border-color: var(--c820-accent-2);
  box-shadow: 0 0 0 3px var(--c820-accent-glow), var(--c820-shadow);
  background: linear-gradient(180deg, var(--c820-surface-2), var(--c820-surface));
}
.c820-opt-key { font-weight:800; font-size:1.05rem; }
.c820-opt-desc { font-size:.8rem; color: var(--c820-muted); line-height:1.4; }

.c820-start-btn {
  margin-top: 12px; background: linear-gradient(135deg, var(--c820-accent), var(--c820-accent-2));
  color:#fff; border:none; border-radius: var(--c820-radius); padding: 18px;
  font-size:1.15rem; font-weight:800; cursor:pointer; box-shadow: 0 6px 20px var(--c820-accent-glow);
  transition: filter .2s, transform .2s, box-shadow 0.2s;
}
.c820-start-btn:hover { filter:brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 24px var(--c820-accent-glow); }
.c820-start-btn:active { transform: translateY(0); }
/* CTA principale in cima: larga e ben staccata dai bottoni secondari sotto. */
.c820-start-top { display:block; width:100%; margin: 4px 0 14px; }

/* ===================================================================
   SCHERMATA DRAFT
   =================================================================== */
.c820-draft-progress { font-size:1.5rem; font-weight:900; }
.c820-prog-filled { color: var(--c820-accent-2); }
.c820-prog-sep, .c820-prog-total { color: var(--c820-muted); }
.c820-rerolls-left, .c820-rerolls-badge {
  font-size:.82rem; font-weight:700; color: var(--c820-gold);
  background: var(--c820-surface-2); border:1px solid var(--c820-border);
  padding:5px 12px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ---------- CAMPO DA GIOCO ---------- */
.c820-field { width:100%; margin: 4px 0 16px; display:flex; justify-content:center; }
.c820-field-inner {
  position: relative;
  width:100%;
  aspect-ratio: 5 / 5.2;        /* più basso: meno spazio vuoto sopra/sotto */
  max-height: 52vh;             /* non diventa enorme su desktop */
  max-width: 480px;
  margin: 0 auto;
  border-radius: var(--c820-radius-lg);
  background: 
    radial-gradient(circle at 50% 50%, rgba(22, 163, 74, 0.4) 0%, rgba(21, 128, 61, 0.7) 65%, rgba(20, 83, 45, 0.95) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 30px, transparent 30px, transparent 60px),
    #15803d;
  border: 3px solid #14532d;
  box-shadow: inset 0 0 100px rgba(0,0,0,0.65), var(--c820-shadow-lg);
  overflow: hidden;
}
/* linee campo */
.c820-field-inner::before {
  content:''; position:absolute; inset:6%;
  border:1.5px solid rgba(255,255,255,0.35); border-radius:12px;
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.05);
}
.c820-field-inner::after {
  content:''; position:absolute; left:6%; right:6%; top:50%;
  height:0; border-top:1.5px solid rgba(255,255,255,0.28);
}
.c820-field-chip {
  position:absolute; transform: translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%; cursor:default;
  font-size:.65rem; text-align:center; line-height:1.1;
  border:2.5px solid rgba(255,255,255,.6);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s, border-color 0.2s;
}
.c820-field-chip.empty {
  background: rgba(9, 15, 28, 0.55); color: rgba(248, 250, 252, 0.7);
  border: 2px dashed rgba(255,255,255,.3); font-weight:700;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.c820-field-chip.empty:hover {
  transform: translate(-50%,-50%) scale(1.06);
  border-color: var(--c820-accent-2);
  background: rgba(9, 15, 28, 0.75);
}
.c820-field-chip.filled {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color:#fff; cursor:pointer; border-color: var(--c820-gold);
  box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 10px rgba(251, 191, 36, 0.3);
}
.c820-field-chip.filled:hover { 
  transform: translate(-50%,-50%) scale(1.12); 
  border-color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6), 0 0 15px var(--c820-accent-glow);
}
.c820-chip-name { font-weight:800; font-size:.62rem; max-width:58px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top: 2px; }
.c820-chip-ov  { font-weight:900; color: var(--c820-gold); font-size:.82rem; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.c820-chip-role { font-weight:800; font-size:.74rem; letter-spacing:.04em; color: var(--c820-muted); text-transform: uppercase; }

/* ---------- slot machine ---------- */
.c820-spin-zone, .c820-pos-first-zone { margin-bottom: 16px; }
.c820-slot-machine {
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: var(--c820-radius-lg); padding: 18px; box-shadow: var(--c820-shadow);
}
.c820-slot-reels { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:16px; }
.c820-spin-row { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:16px; }
.c820-slot-reel {
  flex:1; background: rgba(15, 23, 42, 0.45); border:1px solid var(--c820-border);
  border-radius: var(--c820-radius); padding:16px 10px; text-align:center; min-width:0;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.c820-slot-reel.spinning {
  border-color: var(--c820-accent-2);
  box-shadow: 0 0 10px var(--c820-accent-glow);
}
.c820-slot-label { display:block; font-size:.7rem; color:var(--c820-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; font-weight: 700; }
.c820-slot-value { display:block; font-size:1.25rem; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: var(--c820-text); }
.c820-slot-divider { font-size:1.5rem; color: var(--c820-border); font-weight:300; }
.c820-spin-btn, .c820-respin-btn {
  width:100%; background: linear-gradient(135deg, var(--c820-accent), var(--c820-accent-2));
  color:#fff; border:none; border-radius: var(--c820-radius); padding:16px;
  font-size:1.1rem; font-weight:800; cursor:pointer; transition: transform 0.2s, filter 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 12px var(--c820-accent-glow);
}
.c820-spin-btn:hover, .c820-respin-btn:hover { filter:brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 16px var(--c820-accent-glow); }
.c820-spin-btn.spinning { opacity:.7; cursor:default; transform: none; box-shadow: none; }
.c820-spin-btn.c820-spin-done {
  background: var(--c820-surface-2); color: var(--c820-muted);
  border:1.5px solid var(--c820-border); cursor:default; opacity:1;
  font-weight:700; transform: none; box-shadow: none;
}
.c820-spin-btn.c820-spin-done:hover { filter:none; transform:none; }
.c820-spin-hint, .c820-pos-hint { text-align:center; font-size:.8rem; color:var(--c820-muted); margin-top:10px; }

/* ---------- slot AdSense piccolo (350x100) sopra il campo ---------- */
.c820-ad-wrap {
  display:flex; justify-content:center; align-items:center;
  width:100%; margin:0 0 12px; overflow:hidden; min-height:100px;
}
.c820-ad-ins { max-width:100%; }
/* Su viewport stretti il banner 350px non deve sforare il contenitore */
@media (max-width:380px) {
  .c820-ad-wrap { min-height:90px; }
}

/* ---------- position-first: scelta slot ---------- */
.c820-pos-zone, .c820-pos-btns { display:grid; grid-template-columns: repeat(auto-fit, minmax(86px,1fr)); gap:10px; margin-bottom:16px; }
.c820-pos-pick-btn {
  display:flex; flex-direction:column; gap:4px; align-items:center;
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius); padding:12px 8px; cursor:pointer; color:var(--c820-text);
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.c820-pos-pick-btn:hover { border-color: var(--c820-accent-2); transform: translateY(-3px); background: var(--c820-surface-2); }
.c820-pos-pick-role { font-weight:900; font-size: 1rem; color: var(--c820-gold); }
.c820-pos-pick-label { font-size:.72rem; color: var(--c820-muted); font-weight: 600; }

/* ---------- lista giocatori ---------- */
.c820-list-zone { margin-top: 12px; }
.c820-list-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.c820-spin-label, .c820-spin-club-season { font-weight:900; font-size:1.15rem; color: var(--c820-text); }
.c820-reroll-btn {
  background: var(--c820-surface-2); border:1.5px solid var(--c820-border); color: var(--c820-gold);
  border-radius:999px; padding:8px 18px; font-weight:700; cursor:pointer; font-size:.85rem;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.c820-reroll-btn:hover { border-color: var(--c820-gold); background: var(--c820-surface); }
.c820-player-list { display:flex; flex-direction:column; gap:10px; max-height: 420px; overflow-y:auto; padding-right:4px; }

.c820-player-card {
  display:flex; align-items:center; gap:14px;
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: var(--c820-radius); padding:12px 14px; cursor:pointer;
  transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s, box-shadow .2s;
}
.c820-player-card:hover { transform: translateX(4px); border-color: var(--c820-accent-2); box-shadow: 0 4px 16px var(--c820-accent-glow); }
.c820-card-incompatible { opacity:.35; cursor:not-allowed; }
.c820-card-incompatible:hover { transform:none; border-color: var(--c820-border); box-shadow:none; }
.c820-card-overall {
  flex:0 0 48px; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:1.2rem; color:#0b1220;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.c820-card-overall.ov-elite { background: var(--ov-elite); }
.c820-card-overall.ov-great { background: var(--ov-great); color:#fff; }
.c820-card-overall.ov-good  { background: var(--ov-good); color:#fff; }
.c820-card-overall.ov-avg   { background: var(--ov-avg); color:#fff; }
.c820-card-overall.ov-hidden { background: var(--c820-surface-2); color: var(--c820-muted); border:1.5px solid var(--c820-border); }
.c820-card-info { min-width:0; flex:1; }
.c820-card-name { font-weight:800; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: var(--c820-text); }
.c820-card-meta { font-size:.8rem; color: var(--c820-muted); }
.c820-card-club { font-size:.78rem; color: var(--c820-accent-2); font-weight:700; margin-top: 1px; }
.c820-empty-list, .c820-no-compat { text-align:center; color: var(--c820-muted); padding:28px; }
.c820-list-foot { margin-top:10px; }
.c820-respin-soft {
  background: var(--c820-surface-2); border:1px solid var(--c820-border); color: var(--c820-text);
  font-size:.9rem; padding:12px;
}
.c820-respin-soft:hover { border-color: var(--c820-accent-2); filter:none; transform:none; box-shadow:none; }

/* ---------- modale scelta slot ---------- */
.c820-modal {
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background: rgba(4,8,16,.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding:16px;
}
.c820-modal-inner {
  background: var(--c820-surface-2); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius-lg); padding:24px; max-width:420px; width:100%;
  box-shadow: var(--c820-shadow-lg);
}
.c820-modal-title { margin:0 0 18px; font-size:1.15rem; font-weight: 800; color: var(--c820-text); }
.c820-slot-options { display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap:10px; margin-bottom:18px; }
.c820-slot-opt-btn {
  display:flex; flex-direction:column; gap:4px; align-items:center;
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius); padding:12px; cursor:pointer; color: var(--c820-text);
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.c820-slot-opt-btn:hover { border-color: var(--c820-accent-2); transform: translateY(-2px); background: var(--c820-surface-2); }
.c820-opt-role { font-weight:900; font-size: 1rem; color: var(--c820-gold); }
.c820-opt-label { font-size:.74rem; color: var(--c820-muted); font-weight: 600; }
.c820-modal-close {
  width:100%; background:transparent; border:1.5px solid var(--c820-border); color:var(--c820-muted);
  border-radius: var(--c820-radius); padding:12px; cursor:pointer; font-weight: 700;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.c820-modal-close:hover { border-color: #ef4444; color: #f87171; background: rgba(220,38,38,0.05); }

/* ===================================================================
   SCHERMATA REVIEW
   =================================================================== */
.c820-review-screen { display:flex; flex-direction:column; gap:18px; }

.c820-review-header { display:flex; flex-direction:column; gap:8px; }
.c820-review-title-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.c820-review-title {
  margin:0; font-size:1.6rem; font-weight:900; letter-spacing:-.02em;
  background: linear-gradient(135deg, var(--c820-accent-2), var(--c820-gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.c820-review-meta-row {
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.c820-review-exppos {
  font-size:.95rem; color: var(--c820-muted); font-weight:600;
}
.c820-review-exppos strong { color: var(--c820-accent-2); font-size:1.1rem; }
.c820-review-changes-badge {
  font-size:.82rem; font-weight:700; color: var(--c820-gold);
  background: var(--c820-surface-2); border:1px solid var(--c820-border);
  padding:5px 14px; border-radius:999px;
}
.c820-review-changes-badge strong { font-size:1rem; }

/* Zona sostituzione inline */
.c820-review-sub-zone {
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius-lg); padding:16px; box-shadow: var(--c820-shadow);
}
.c820-review-sub-inner { display:flex; flex-direction:column; gap:12px; }
.c820-review-sub-header {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.c820-review-sub-title { font-weight:800; font-size:1rem; color: var(--c820-text); }
.c820-review-sub-cancel {
  background: var(--c820-surface-2); border:1px solid var(--c820-border);
  color: var(--c820-muted); width:32px; height:32px; border-radius:50%;
  cursor:pointer; font-size:.95rem; display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; transition: border-color 0.2s, color 0.2s;
}
.c820-review-sub-cancel:hover { border-color: #ef4444; color: #f87171; }
.c820-review-sub-list .c820-player-list { max-height:260px; overflow-y:auto; }

/* CTA simula */
.c820-review-actions { margin-top:6px; }
.c820-simulate-btn {
  width:100%; background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  color:#fff; border:none; border-radius: var(--c820-radius); padding:18px;
  font-size:1.15rem; font-weight:800; cursor:pointer; box-shadow: 0 6px 20px rgba(139, 92, 246, 0.35);
  transition: transform .2s, filter .2s, box-shadow .2s;
}
.c820-simulate-btn:hover { filter:brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(139, 92, 246, 0.5); }

/* ===================================================================
   SCHERMATA SEASON
   =================================================================== */
.c820-season-screen { display:flex; flex-direction:column; gap:16px; }

.c820-season-header {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.c820-season-brand {
  font-size:.85rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  color: var(--c820-muted);
}

/* Barra progresso giornata */
.c820-season-progress { display:flex; flex-direction:column; gap:8px; }
.c820-season-day-label {
  font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color: var(--c820-muted);
}
.c820-season-day-label strong { color: var(--c820-text); }
.c820-season-day-bar-wrap {
  height:10px; background: var(--c820-surface-2); border-radius:999px; overflow:hidden;
  border: 1px solid var(--c820-border);
}
.c820-season-day-bar {
  height:100%; background: linear-gradient(90deg, var(--c820-accent) 0%, var(--c820-accent-2) 100%);
  border-radius:999px; transition: width .4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Statistiche V/N/P/Punti */
.c820-season-stats {
  display:grid; grid-template-columns: repeat(4,1fr); gap:10px;
}
.c820-ss-block {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius); padding:12px 8px;
  transition: background .2s, border-color .2s;
}
.c820-ss-block:hover { border-color: var(--c820-accent-2); background: var(--c820-surface-2); }
.c820-ss-num {
  font-size:1.75rem; font-weight:900; line-height:1;
}
.c820-ss-lbl {
  font-size:.7rem; font-weight:700; color: var(--c820-muted); margin-top:4px;
  text-transform:uppercase; letter-spacing:.06em;
}
.c820-ss-w .c820-ss-num  { color: var(--c820-accent-2); text-shadow: 0 0 10px rgba(16,185,129,0.25); }
.c820-ss-d .c820-ss-num  { color: var(--c820-gold); text-shadow: 0 0 10px rgba(251,191,36,0.25); }
.c820-ss-l .c820-ss-num  { color: #f87171; text-shadow: 0 0 10px rgba(248,113,113,0.25); }
.c820-ss-pts .c820-ss-num { color: var(--c820-text); }

/* Fixtures */
.c820-season-fixtures { display:flex; flex-direction:column; gap:8px; }
.c820-fixture {
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius); padding:10px 12px;
  display:flex; flex-direction:column; gap:6px;
  transition: border-color 0.2s, background 0.2s;
}
.c820-fixture:hover { border-color: var(--c820-accent-2); background: var(--c820-surface-2); }
.c820-fixture-mine {
  border-color: var(--c820-accent-2);
  background: linear-gradient(180deg, var(--c820-surface-2), var(--c820-surface));
  box-shadow: inset 0 0 12px var(--c820-accent-glow);
}
.c820-fix-badge {
  display:inline-block; width:26px; height:26px; line-height:26px; text-align:center;
  border-radius:8px; font-weight:900; font-size:.85rem; flex:0 0 auto;
  margin-right:8px; box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.c820-badge-v { background:#059669; color:#fff; }
.c820-badge-n { background:#d97706; color:#fff; }
.c820-badge-l { background:#dc2626; color:#fff; }
.c820-fix-teams { font-weight:700; font-size:.95rem; }
.c820-fix-other { color: var(--c820-muted); font-size:.82rem; }
.c820-fix-teams strong { color: var(--c820-text); }
.c820-fix-scorers { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:4px; padding-top: 4px; border-top: 1px dashed var(--c820-border); }
.c820-scorer { font-size:.76rem; color: var(--c820-muted); }

/* Controlli */
.c820-season-controls { display:flex; gap:10px; }
/* Controlli in cima: sticky e sempre visibili durante la simulazione */
.c820-season-controls-top {
  position: sticky; top: 8px; z-index: 20;
  margin: 0 0 14px;
  padding: 8px;
  background: rgba(10,18,16,.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--c820-border); border-radius: var(--c820-radius-lg);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.c820-season-btn {
  flex:1; border:none; border-radius: var(--c820-radius); padding:14px 12px;
  font-size:.95rem; font-weight:800; cursor:pointer; transition: transform 0.2s, filter 0.2s, border-color 0.2s, background 0.2s;
}
.c820-season-btn-skip {
  background: var(--c820-surface-2); border:1.5px solid var(--c820-border); color: var(--c820-text);
}
.c820-season-btn-skip:hover { border-color: var(--c820-accent-2); background: var(--c820-surface); transform: translateY(-1px); }
.c820-season-btn-playpause {
  background: linear-gradient(135deg, var(--c820-accent), var(--c820-accent-2)); color:#fff;
  box-shadow: 0 4px 12px var(--c820-accent-glow);
}
.c820-season-btn-playpause:hover { filter:brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 16px var(--c820-accent-glow); }
.c820-season-btn-speed {
  flex:0 0 auto; min-width:54px;
  background: var(--c820-surface-2); border:1.5px solid var(--c820-border); color: var(--c820-gold);
  font-weight:800;
}
.c820-season-btn-speed:hover { border-color: var(--c820-gold); transform: translateY(-1px); }

/* ===== Cronometro live della mia partita ===== */
.c820-fixture-live { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.c820-live-clock {
  flex:0 0 auto; min-width:46px; text-align:center;
  font-weight:900; font-size:.85rem; color:#fff;
  background:#090d16; border:1.5px solid var(--c820-accent-2); border-radius:8px;
  padding:4px 8px; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 8px var(--c820-accent-glow);
}
#c820-live-score { transition: transform .12s; display:inline-block; }
.c820-score-flash { animation: c820-score-pop .5s ease-out; }
@keyframes c820-score-pop {
  0%   { transform: scale(1);   color: var(--c820-gold); }
  35%  { transform: scale(1.45); color: var(--c820-gold); }
  100% { transform: scale(1);   }
}
.c820-scorer-pop { animation: c820-scorer-in .4s ease-out; }
@keyframes c820-scorer-in {
  0%   { opacity:0; transform: translateY(4px); }
  100% { opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .c820-score-flash, .c820-scorer-pop { animation: none; }
}

/* ===================================================================
   SCHERMATA RISULTATO
   =================================================================== */
.c820-result-screen { display:flex; flex-direction:column; gap:20px; }
.c820-result-top { text-align:center; }
.c820-wins-num, .c820-result-wins { font-size:3.8rem; font-weight:900; line-height:1; color: var(--c820-accent-2); text-shadow: 0 4px 16px var(--c820-accent-glow); }
.c820-wins-label { font-size:1.1rem; color: var(--c820-muted); font-weight:700; margin-top: 4px; display: inline-block; }
.c820-result-verdict { font-size:1.2rem; font-weight:800; margin:8px 0; text-align:center; color: var(--c820-text); }
.c820-perfect-badge {
  display:inline-block; background: var(--ov-elite); color:#0b1220;
  font-weight:900; padding:10px 22px; border-radius:999px; font-size:1.05rem;
  box-shadow: 0 0 24px rgba(251,191,36,.45);
  letter-spacing: .02em;
}
.c820-result-pts { color: var(--c820-muted); font-size:.95rem; text-align: center; }

/* reparti */
.c820-result-depts { display:flex; flex-direction:column; gap:12px; }
.c820-dept-block { display:grid; grid-template-columns: 100px 1fr 40px; align-items:center; gap:12px; }
.c820-dept-label { font-size:.85rem; font-weight:800; color: var(--c820-muted); text-transform: uppercase; letter-spacing: .04em; }
.c820-dept-bar { height:12px; background: var(--c820-surface-2); border-radius:999px; overflow:hidden; border: 1px solid var(--c820-border); }
.c820-dept-fill { height:100%; border-radius:999px; transition: width .8s cubic-bezier(0.4, 0, 0.2, 1); }
.c820-dept-val { font-weight:900; text-align:right; font-size: 1.05rem; }

/* probabilità */
.c820-result-probs { display:flex; gap:12px; justify-content:space-around; flex-wrap:wrap; background: var(--c820-surface-2); border-radius: var(--c820-radius); padding: 14px; border: 1px solid var(--c820-border); }
.c820-prob { text-align:center; font-size:.85rem; color: var(--c820-muted); }
.c820-prob strong { display:block; font-size:1.35rem; color: var(--c820-text); margin-top: 2px; }

/* lineup riepilogo */
.c820-result-lineup { display:flex; flex-direction:column; gap:8px; }
.c820-result-row { display:grid; grid-template-columns: 48px 1fr auto auto; gap:12px; align-items:center;
  background: var(--c820-surface); border:1.5px solid var(--c820-border); border-radius:var(--c820-radius); padding:10px 14px;
  transition: border-color 0.2s, transform 0.2s; }
.c820-result-row:hover { border-color: var(--c820-accent-2); transform: translateY(-1px); }
.c820-result-role { font-weight:900; font-size:.82rem; color: var(--c820-muted); }
.c820-result-name { font-weight:800; font-size: 1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: var(--c820-text); }
.c820-result-club { font-size:.8rem; color: var(--c820-accent-2); font-weight: 600; }
.c820-result-ov { font-weight:900; color: var(--c820-gold); font-size: 1.05rem; }

/* azioni + share */
.c820-result-actions { display:flex; gap:12px; flex-wrap:wrap; }
.c820-restart-btn {
  flex:1; background: linear-gradient(135deg, var(--c820-accent), var(--c820-accent-2)); color:#fff;
  border:none; border-radius: var(--c820-radius); padding:16px; font-weight:800; cursor:pointer;
  font-size: 1.1rem; box-shadow: 0 4px 14px var(--c820-accent-glow);
  transition: transform 0.2s, filter 0.2s, box-shadow 0.2s;
}
.c820-restart-btn:hover { filter:brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 16px var(--c820-accent-glow); }
.c820-result-share, .c820-share, .c820-share-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
#calcio820-root a.c820-share-btn,
#calcio820-root .c820-share-btn {
  border:none; border-radius:12px; padding:12px 18px; font-weight:800; font-size:.92rem;
  cursor:pointer; color:#fff !important; letter-spacing:.01em; text-decoration:none;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: filter .2s, transform .2s, box-shadow .2s;
}
#calcio820-root .c820-share-btn:hover { filter:brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
#calcio820-root .c820-share-wa { background:#1ebe5d; }
#calcio820-root .c820-share-tg { background:#1c93cc; }
#calcio820-root .c820-share-x  { background:#000; }
#calcio820-root .c820-share-fb { background:#1877f2; }
#calcio820-root .c820-share-copy {
  background: var(--c820-surface-2); color: var(--c820-text) !important;
  border:1.5px solid var(--c820-border); text-shadow:none; box-shadow: none;
}
#calcio820-root .c820-share-copy:hover { border-color: var(--c820-accent-2); background: var(--c820-surface); }

/* ---------- toast ---------- */
.c820-toast {
  position:fixed; left:50%; bottom:32px; transform:translateX(-50%);
  background: rgba(9, 15, 28, 0.9); color:#fff; border:1.5px solid var(--c820-border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding:12px 24px; border-radius:999px; box-shadow: var(--c820-shadow-lg);
  z-index:10000; font-size:.9rem; max-width:90%; font-weight: 600;
  animation: c820-toast-in .25s ease-out;
}
@keyframes c820-toast-in { from { opacity:0; transform:translate(-50%,12px);} to {opacity:1;} }

.c820-hidden { display:none !important; }

/* ---------- responsive ---------- */
@media (max-width: 560px) {
  #calcio820-root { padding:16px; }
  .c820-title { font-size:1.8rem; }
  .c820-field-chip { width:54px; height:54px; }
  .c820-option-grid, .c820-option-row { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #calcio820-root *, #calcio820-root *::before, #calcio820-root *::after {
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
}

#calcio820-root :focus-visible { outline:3px solid var(--c820-accent-2); outline-offset:2px; }

/* ===================================================================
   SCHERMATA REVIEW
   =================================================================== */
.c820-review-screen { display:flex; flex-direction:column; gap:18px; }

.c820-review-header {
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px;
}

/* posizione attesa */
.c820-expected-pos {
  display:flex; align-items:center; gap:14px;
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius); padding:16px 18px;
}
.c820-expected-pos-label { font-size:.8rem; font-weight:800; color:var(--c820-muted); text-transform:uppercase; letter-spacing:.08em; }
.c820-expected-pos-val {
  font-size:2.4rem; font-weight:900; line-height:1;
  background: linear-gradient(135deg, var(--c820-accent-2), var(--c820-gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.c820-expected-pos-desc { font-size:.85rem; color:var(--c820-muted); margin-top:2px; }

/* reparti in review */
.c820-review-depts {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.c820-review-dept {
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius); padding:14px 16px; display:flex; flex-direction:column; gap:6px;
}
.c820-review-dept-label { font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--c820-muted); }
.c820-review-dept-val { font-size:1.75rem; font-weight:900; color:var(--c820-text); }
.c820-review-dept-bar { height:8px; background: var(--c820-surface-2); border-radius:999px; overflow:hidden; margin-top:4px; border: 1px solid var(--c820-border); }
.c820-review-dept-fill { height:100%; border-radius:999px; background: linear-gradient(90deg, var(--c820-accent), var(--c820-accent-2)); transition:width .5s ease; }

/* contatore cambi */
.c820-changes-badge {
  display:inline-flex; align-items:center; gap:8px;
  background: var(--c820-surface-2); border:1.5px solid var(--c820-border);
  border-radius:999px; padding:6px 16px; font-size:.88rem; font-weight:700;
}
.c820-changes-count { color: var(--c820-gold); font-size:1.1rem; font-weight:900; }
.c820-changes-zero { color: var(--c820-muted); }

/* campo readonly in review — chip sostituibile */
.c820-field-chip.replaceable {
  border-color: var(--c820-accent-2);
  box-shadow: 0 0 0 2px var(--c820-accent-glow);
  cursor:pointer;
}
.c820-field-chip.replaceable:hover { transform: translate(-50%,-50%) scale(1.1); }
.c820-field-chip.no-change { cursor:default; opacity:.85; }

/* bottone simula */
.c820-simulate-btn {
  background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  color:#fff; border:none; border-radius: var(--c820-radius); padding:18px;
  font-size:1.15rem; font-weight:800; cursor:pointer; box-shadow: 0 6px 20px rgba(139, 92, 246, 0.35);
  transition: transform 0.2s, filter 0.2s, box-shadow 0.2s; width:100%; margin-top:6px;
}
.c820-simulate-btn:hover { filter:brightness(1.1); transform:translateY(-2px); box-shadow: 0 8px 24px rgba(139, 92, 246, 0.5); }

/* modale cambio giocatore in review */
.c820-change-modal { /* riusa .c820-modal */ }

/* ===================================================================
   SCHERMATA SEASON (auto-play)
   =================================================================== */
.c820-season-screen { display:flex; flex-direction:column; gap:16px; }

.c820-season-header {
  text-align:center; padding:10px 0 6px;
}
.c820-season-title {
  font-size:1.05rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  color: var(--c820-muted);
}
.c820-season-subtitle {
  font-size:1.6rem; font-weight:900; margin-top:4px;
  background: linear-gradient(135deg, var(--c820-accent-2), var(--c820-gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* barra giornata */
.c820-matchday-bar {
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius); padding:14px 18px;
}
.c820-matchday-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;
}
.c820-matchday-label { font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--c820-muted); }
.c820-matchday-num { font-size:1.4rem; font-weight:900; }
.c820-matchday-of { color:var(--c820-muted); font-size:.9rem; }
.c820-matchday-progress {
  height:10px; background: var(--c820-surface-2); border-radius:999px; overflow:hidden; border: 1px solid var(--c820-border);
}
.c820-matchday-fill {
  height:100%; border-radius:999px;
  background: linear-gradient(90deg, var(--c820-accent), var(--c820-accent-2));
  transition: width .4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* stat correnti V/N/P/Punti */
.c820-season-stats {
  display:grid; grid-template-columns: repeat(4,1fr); gap:10px;
}
.c820-season-stat {
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius); padding:12px 10px; text-align:center;
  transition: border-color 0.2s, background 0.2s;
}
.c820-season-stat:hover { border-color: var(--c820-accent-2); background: var(--c820-surface-2); }
.c820-season-stat-val { font-size:1.75rem; font-weight:900; line-height:1; }
.c820-season-stat-val.c820-wins-val  { color: var(--c820-accent-2); }
.c820-season-stat-val.c820-draws-val { color: var(--c820-gold); }
.c820-season-stat-val.c820-losses-val{ color: #ef4444; }
.c820-season-stat-val.c820-pts-val   { color: var(--c820-gold); }
.c820-season-stat-lbl { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--c820-muted); margin-top:4px; }

/* lista partite della giornata */
.c820-matchday-fixtures { display:flex; flex-direction:column; gap:8px; }
.c820-fixture {
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius); padding:12px 14px;
}
.c820-fixture-main { display:flex; align-items:center; gap:10px; }
.c820-fixture-badge {
  flex:0 0 32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:900; letter-spacing:.02em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.c820-badge-w { background:#059669; color:#fff; }
.c820-badge-d { background:#d97706; color:#fff; }
.c820-badge-l { background:#dc2626; color:#fff; }
.c820-badge-tbd { background: var(--c820-surface-2); color:var(--c820-muted); border:1.5px solid var(--c820-border); }

.c820-fixture-teams { flex:1; min-width:0; }
.c820-fixture-score { font-size:1.15rem; font-weight:900; white-space:nowrap; color:var(--c820-text); }
.c820-fixture-names { font-size:.82rem; color:var(--c820-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c820-fixture-my { color:var(--c820-accent-2); font-weight:800; }

.c820-fixture-scorers { font-size:.78rem; color:var(--c820-muted); margin-top:6px; padding-top:6px; border-top:1px dashed var(--c820-border); }
.c820-scorer-item { display:inline-block; margin-right:10px; }
.c820-scorer-name { color:var(--c820-text); font-weight:700; }
.c820-scorer-min  { color:var(--c820-gold); font-weight: 600; }

/* controlli season */
.c820-season-controls { display:flex; gap:10px; }
.c820-skip-btn {
  flex:1; background: var(--c820-surface-2); border:1.5px solid var(--c820-border); color:var(--c820-text);
  border-radius: var(--c820-radius); padding:14px; font-weight:800; cursor:pointer;
  transition: border-color .2s, background .2s, transform 0.2s;
}
.c820-skip-btn:hover { border-color: var(--c820-accent-2); background: var(--c820-surface); transform: translateY(-1px); }
.c820-pause-btn {
  flex:1; background: linear-gradient(135deg, var(--c820-accent), var(--c820-accent-2));
  color:#fff; border:none; border-radius: var(--c820-radius); padding:14px;
  font-weight:800; cursor:pointer; transition: transform .2s, filter .2s, box-shadow .2s;
  box-shadow: 0 4px 12px var(--c820-accent-glow);
}
.c820-pause-btn:hover { filter:brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 16px var(--c820-accent-glow); }
.c820-pause-btn.paused {
  background: linear-gradient(135deg,#7c3aed,#a855f7);
}

/* ===================================================================
   SCHERMATA RESULT FINALE (estensione del result esistente)
   =================================================================== */

/* stella + verdetto grande */
.c820-final-star {
  font-size:3.5rem; text-align:center; display:block; line-height:1; margin-bottom:6px;
  animation: c820-star-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes c820-star-pop { from{transform:scale(0) rotate(-20deg);opacity:0;} to{transform:scale(1) rotate(0);opacity:1;} }

.c820-final-verdict {
  text-align:center; font-size:1.65rem; font-weight:900; line-height:1.2; margin:0 0 16px;
  background: linear-gradient(135deg, var(--c820-accent-2), var(--c820-gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* blocchi V/N/P/PUNTI */
.c820-result-stat-grid {
  display:grid; grid-template-columns: repeat(4,1fr); gap:10px; margin-bottom:8px;
}
.c820-result-stat-block {
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius); padding:14px 8px; text-align:center;
  transition: transform 0.2s, background 0.2s;
}
.c820-result-stat-block:hover { transform: translateY(-2px); background: var(--c820-surface-2); }
.c820-result-stat-num { font-size:2.2rem; font-weight:900; line-height:1; }
.c820-result-stat-num.rs-w { color: var(--c820-accent-2); }
.c820-result-stat-num.rs-d { color: var(--c820-gold); }
.c820-result-stat-num.rs-l { color: #ef4444; }
.c820-result-stat-num.rs-p { color: var(--c820-gold); font-size:2.4rem; }
.c820-result-stat-lbl { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--c820-muted); margin-top:4px; }

/* riga GF/GS/DR + statistiche squadra */
.c820-result-extra {
  display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:center;
  font-size:.85rem; color:var(--c820-muted);
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius); padding:12px 16px;
}
.c820-result-extra strong { color:var(--c820-text); font-weight:800; }
.c820-result-extra .c820-dr-pos { color: var(--c820-accent-2); }
.c820-result-extra .c820-dr-neg { color: #ef4444; }

/* posizione attesa vs reale */
.c820-pos-compare {
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius); padding:16px 18px;
  display:flex; align-items:center; gap:20px;
}
.c820-pos-col { text-align:center; flex:1; }
.c820-pos-col-label { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--c820-muted); margin-bottom:6px; }
.c820-pos-col-val { font-size:2.6rem; font-weight:900; line-height:1; }
.c820-pos-expected-val { color:var(--c820-muted); }
.c820-pos-real-val { color:var(--c820-accent-2); }
.c820-pos-arrow { font-size:1.8rem; color:var(--c820-muted); flex:0 0 auto; }
.c820-pos-arrow.arrow-up   { color: var(--c820-accent-2); }
.c820-pos-arrow.arrow-down { color: #ef4444; }
.c820-pos-arrow.arrow-same { color: var(--c820-gold); }
.c820-pos-comment { text-align:center; font-size:.9rem; color:var(--c820-muted); margin-top:4px; }

/* Chimica positiva/negativa nel risultato */
.c820-chem-positive { color: var(--c820-accent-2); font-weight:900; }
.c820-chem-negative { color: #ef4444; font-weight:900; }

/* Result con stagione simulata */
.c820-result-season .c820-pos-compare {
  flex-wrap: wrap;
}
.c820-result-season .c820-pos-compare .c820-pos-comment {
  width: 100%; text-align:center; margin-top:8px;
}

/* Review: zona sostituzione inline */
.c820-review-sub-zone {
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius-lg); padding:16px;
}
.c820-review-sub-inner { display:flex; flex-direction:column; gap:12px; }
.c820-review-sub-header {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:.95rem; font-weight:800; color: var(--c820-text);
}
.c820-review-sub-cancel {
  background: var(--c820-surface-2); border:1.5px solid var(--c820-border);
  color:var(--c820-muted); width:32px; height:32px; border-radius:50%;
  cursor:pointer; font-size:.9rem; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.c820-review-sub-cancel:hover { border-color:#ef4444; color:#ef4444; }

/* Review: header con metadati */
.c820-review-header { display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.c820-review-title-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.c820-review-title { margin:0; font-size:1.5rem; font-weight:900; color: var(--c820-text); }
.c820-review-meta-row {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:.9rem;
}
.c820-review-exppos { color: var(--c820-muted); }
.c820-review-exppos strong { color: var(--c820-accent-2); }
.c820-review-changes-badge {
  background: var(--c820-surface-2); border:1px solid var(--c820-border);
  border-radius:999px; padding:6px 14px; font-size:.85rem; font-weight:700;
}
.c820-review-changes-badge strong { color: var(--c820-gold); }

/* ===================================================================
   RESPONSIVE aggiuntivo
   =================================================================== */
@media (max-width: 560px) {
  .c820-review-depts { grid-template-columns:1fr 1fr; }
  .c820-season-stats { grid-template-columns:repeat(4,1fr); gap:6px; }
  .c820-season-stat-val { font-size:1.4rem; }
  .c820-result-stat-grid { grid-template-columns:repeat(4,1fr); gap:6px; }
  .c820-result-stat-num { font-size:1.65rem; }
  .c820-result-stat-num.rs-p { font-size:1.8rem; }
  .c820-pos-col-val { font-size:2rem; }
  .c820-final-verdict { font-size:1.35rem; }
}

/* ===== Classifica in diretta (schermata season) ===== */
.c820-standings {
  margin-top: 18px;
  background: var(--c820-surface);
  border: 1.5px solid var(--c820-border);
  border-radius: var(--c820-radius);
  overflow: hidden;
  box-shadow: var(--c820-shadow);
}
.c820-standings-title {
  font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c820-muted); padding: 12px 14px 8px;
  border-bottom: 1px solid var(--c820-border);
}
.c820-standings-body { display: flex; flex-direction: column; }
.c820-st-row {
  display: grid;
  grid-template-columns: 28px 1fr 28px 40px 36px;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: .85rem;
  border-top: 1px solid rgba(255,255,255,.04);
  will-change: transform;
  transition: background 0.15s;
}
.c820-st-row:hover { background: var(--c820-surface-2); }
.c820-st-pos { color: var(--c820-muted); font-weight: 700; text-align: center; }
.c820-st-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; color: var(--c820-text); }
.c820-st-pld { color: var(--c820-muted); text-align: center; font-size: .8rem; }
.c820-st-dr  { color: var(--c820-muted); text-align: right; font-size: .8rem; }
.c820-st-pts { font-weight: 900; text-align: right; color: var(--c820-gold); font-size: .95rem; }
/* zone */
.c820-st-cl  { box-shadow: inset 3.5px 0 0 var(--c820-accent-2); }
.c820-st-eu  { box-shadow: inset 3.5px 0 0 #3b82f6; }
.c820-st-rel { box-shadow: inset 3.5px 0 0 #ef4444; }
/* la tua squadra evidenziata */
.c820-st-mine {
  background: linear-gradient(90deg, var(--c820-accent-glow), transparent);
  font-weight: 800;
}
.c820-st-mine .c820-st-name { color: var(--c820-accent-2); }

/* ===================================================================
   CLASSIFICA GLOBALE (schermata leaderboard)
   =================================================================== */
.c820-lb-screen { display:flex; flex-direction:column; gap:16px; }

/* header leaderboard */
.c820-lb-header {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.c820-lb-title {
  margin:0; font-size:1.6rem; font-weight:900; letter-spacing:-.02em;
  background: linear-gradient(135deg, var(--c820-accent-2), var(--c820-gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.c820-lb-back-btn {
  background: var(--c820-surface-2); border:1.5px solid var(--c820-border); color:var(--c820-text);
  border-radius: var(--c820-radius); padding:10px 16px; font-size:.88rem; font-weight:800; cursor:pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.c820-lb-back-btn:hover { border-color: var(--c820-accent-2); background: var(--c820-surface); transform: translateY(-1px); }

/* tab periodo */
.c820-lb-tabs {
  display:flex; gap:6px; background: var(--c820-surface-2);
  border:1.5px solid var(--c820-border); border-radius: var(--c820-radius); padding:6px;
}
.c820-lb-tab {
  flex:1; background:transparent; border:none; color:var(--c820-muted);
  border-radius:8px; padding:10px 8px; font-size:.85rem; font-weight:800; cursor:pointer;
  transition: background .2s, color .2s, box-shadow 0.2s;
}
.c820-lb-tab:hover { color: var(--c820-text); }
.c820-lb-tab.c820-lb-tab-active {
  background: var(--c820-surface); color: var(--c820-accent-2);
  box-shadow: var(--c820-shadow);
}

/* filtri opzionali */
.c820-lb-filters {
  display:flex; gap:10px; flex-wrap:wrap;
}
.c820-lb-filter-select {
  flex:1; min-width:120px; background: var(--c820-surface); border:1.5px solid var(--c820-border);
  color:var(--c820-text); border-radius: var(--c820-radius); padding:10px 12px;
  font-size:.85rem; font-family:inherit; cursor:pointer; font-weight: 600;
  transition: border-color 0.2s;
}
.c820-lb-filter-select:focus { outline:none; border-color: var(--c820-accent-2); }

/* loading classifica */
.c820-lb-loading {
  text-align:center; color:var(--c820-muted); padding:36px 0; font-size:.92rem;
}
.c820-lb-loading::before {
  content:''; display:block; width:36px; height:36px; border-radius:50%; margin:0 auto 14px;
  border:3.5px solid var(--c820-surface-2); border-top-color: var(--c820-accent-2);
  animation: c820-spin .8s linear infinite;
}
.c820-lb-empty { text-align:center; color:var(--c820-muted); padding:36px 0; font-size:.92rem; }

/* tabella classifica */
.c820-lb-table { display:flex; flex-direction:column; gap:0; }
.c820-lb-table-head {
  display:grid;
  grid-template-columns: 32px 1fr 64px 40px 80px;
  gap:8px; padding:8px 14px;
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--c820-muted); border-bottom:1.5px solid var(--c820-border);
}
.c820-lb-table-head > span { white-space:nowrap; overflow:hidden; }
.c820-lb-row {
  display:grid;
  grid-template-columns: 32px 1fr 64px 40px 80px;
  align-items:center; gap:8px; padding:12px 14px;
  font-size:.9rem;
  border-bottom:1px solid rgba(255,255,255,.04);
  transition: background .15s;
}
.c820-lb-row:hover { background: var(--c820-surface-2); }
.c820-lb-row:last-child { border-bottom:none; }

/* riga propria evidenziata */
.c820-lb-row-mine {
  background: linear-gradient(90deg, var(--c820-accent-glow), transparent);
  border-left: 4px solid var(--c820-accent-2);
  font-weight:800;
}
.c820-lb-row-mine .c820-lb-nick { color: var(--c820-accent-2); }

/* celle */
.c820-lb-rank { color:var(--c820-muted); font-weight:900; text-align:center; }
.c820-lb-rank-1 { color: var(--c820-gold); text-shadow: 0 0 8px rgba(251,191,36,0.3); }
.c820-lb-rank-2 { color: #d4d4d4; }
.c820-lb-rank-3 { color: #c87533; }
.c820-lb-nick { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: var(--c820-text); }
.c820-lb-form { font-size:.8rem; color:var(--c820-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c820-lb-wins { text-align:center; font-weight:700; color: var(--c820-accent-2); }
.c820-lb-pts  { text-align:right; font-weight:900; color: var(--c820-gold); font-size:1.05rem; }
.c820-lb-pts-label { font-size:.7rem; color:var(--c820-muted); font-weight:600; }

/* ===================================================================
   BOTTONI EXTRA SETUP (Classifica / Sfida del giorno)
   =================================================================== */
.c820-setup-extra-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

/* Bottone di base del menu */
.c820-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--c820-surface);
  border: 1.5px solid var(--c820-border);
  color: var(--c820-text);
  border-radius: var(--c820-radius);
  padding: 14px 16px;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c820-btn:hover {
  transform: translateY(-2px);
  background: var(--c820-surface-2);
}

/* Colori e accenti specifici per ciascuna modalità */
.c820-btn-challenge {
  border-color: var(--c820-accent-2) !important;
  color: var(--c820-accent-2) !important;
  background: var(--c820-surface) !important;
}
.c820-btn-challenge:hover {
  background: var(--c820-accent-glow) !important;
  box-shadow: 0 4px 12px var(--c820-accent-glow);
}

.c820-btn-daily {
  background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}
.c820-btn-daily:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
}

.c820-btn-lb {
  border-color: var(--c820-border) !important;
  color: var(--c820-text) !important;
  background: var(--c820-surface) !important;
}
.c820-btn-lb:hover {
  border-color: var(--c820-accent-2) !important;
}

.c820-btn-mychallenges {
  border-color: var(--c820-gold) !important;
  color: var(--c820-gold) !important;
  background: var(--c820-surface) !important;
}
.c820-btn-mychallenges:hover {
  background: rgba(251, 191, 36, 0.1) !important;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.15);
}

/* banner sfida attiva (sopra setup) */
.c820-challenge-banner {
  background: linear-gradient(135deg, #102a21, #0c1c14);
  border:1.5px solid var(--c820-accent-2); border-radius: var(--c820-radius-lg);
  padding:16px 18px; margin-bottom:18px;
  display:flex; align-items:center; gap:14px;
  box-shadow: 0 4px 16px var(--c820-accent-glow);
}
.c820-challenge-banner-icon { font-size:1.75rem; flex:0 0 auto; }
.c820-challenge-banner-text { min-width:0; }
.c820-challenge-banner-label {
  font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color: var(--c820-accent-2); margin-bottom:4px;
}
.c820-challenge-banner-nick { font-weight:900; font-size:1.15rem; color: var(--c820-text); }
.c820-challenge-banner-info { font-size:.82rem; color:var(--c820-muted); margin-top:2px; }
.c820-challenge-banner-dismiss {
  background:transparent; border:none; color:var(--c820-muted); cursor:pointer;
  font-size:1.2rem; margin-left:auto; flex:0 0 auto; padding:6px;
  transition: color 0.2s, transform 0.2s;
}
.c820-challenge-banner-dismiss:hover { color: #f87171; transform: scale(1.1); }

/* ===================================================================
   MINI-PROMPT NICKNAME (overlay)
   =================================================================== */
.c820-nick-overlay {
  position:fixed; inset:0; z-index:10001;
  display:flex; align-items:center; justify-content:center;
  background: rgba(4,8,16,.8); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:16px;
}
.c820-nick-modal {
  background: var(--c820-surface-2); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius-lg); padding:28px 24px; width:100%; max-width:380px;
  box-shadow: var(--c820-shadow-lg); display:flex; flex-direction:column; gap:16px;
}
.c820-nick-title {
  margin:0; font-size:1.2rem; font-weight:900;
  background: linear-gradient(135deg, var(--c820-accent-2), var(--c820-gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.c820-nick-desc { font-size:.9rem; color:var(--c820-muted); margin:0; line-height: 1.5; }
.c820-nick-input {
  width:100%; background: rgba(15, 23, 42, 0.45); border:2px solid var(--c820-border);
  color:var(--c820-text); border-radius: var(--c820-radius); padding:14px;
  font-size:1.05rem; font-family:inherit; font-weight:700;
  transition: border-color .2s;
}
.c820-nick-input:focus { outline:none; border-color: var(--c820-accent-2); }
.c820-nick-input::placeholder { color:var(--c820-muted); font-weight:400; }
.c820-nick-actions { display:flex; gap:12px; }
.c820-nick-confirm {
  flex:2; background: linear-gradient(135deg, var(--c820-accent), var(--c820-accent-2));
  color:#fff; border:none; border-radius: var(--c820-radius); padding:14px;
  font-size:1.05rem; font-weight:800; cursor:pointer; transition:filter .2s, transform 0.2s;
  box-shadow: 0 4px 12px var(--c820-accent-glow);
}
.c820-nick-confirm:hover { filter:brightness(1.1); transform: translateY(-1px); }
.c820-nick-skip {
  flex:1; background: var(--c820-surface); border:1.5px solid var(--c820-border);
  color:var(--c820-muted); border-radius: var(--c820-radius); padding:14px;
  font-size:.95rem; font-weight:700; cursor:pointer; transition:border-color .2s, color .2s;
}
.c820-nick-skip:hover { border-color: var(--c820-accent-2); color:var(--c820-text); }

/* ===================================================================
   RESULT: blocco "Salva in classifica" + "Sfida un amico"
   =================================================================== */
.c820-result-social {
  display:flex; flex-direction:column; gap:12px;
}
.c820-save-score-btn {
  width:100%; background: linear-gradient(135deg, var(--c820-accent), var(--c820-accent-2));
  color:#fff; border:none; border-radius: var(--c820-radius); padding:16px;
  font-size:1.05rem; font-weight:800; cursor:pointer; box-shadow: 0 4px 14px var(--c820-accent-glow);
  transition: transform .2s, filter .2s, box-shadow .2s;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.c820-save-score-btn:hover { filter:brightness(1.1); transform:translateY(-2px); box-shadow: 0 6px 16px var(--c820-accent-glow); }
.c820-save-score-btn:disabled { opacity:.55; cursor:default; transform:none; box-shadow: none; }
.c820-save-score-done {
  width:100%; background: var(--c820-surface-2); border:1.5px solid var(--c820-accent-2);
  color:var(--c820-accent-2); border-radius: var(--c820-radius); padding:16px;
  font-size:1.05rem; font-weight:800; text-align:center;
  box-shadow: inset 0 0 10px var(--c820-accent-glow);
}

.c820-create-challenge-btn {
  width:100%; background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  color:#fff; border:none; border-radius: var(--c820-radius); padding:16px;
  font-size:1.05rem; font-weight:800; cursor:pointer;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
  transition: transform .2s, filter .2s, box-shadow .2s;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.c820-create-challenge-btn:hover { filter:brightness(1.1); transform:translateY(-2px); box-shadow: 0 6px 16px rgba(139, 92, 246, 0.5); }
.c820-create-challenge-btn:disabled { opacity:.55; cursor:default; transform:none; box-shadow: none; }

/* box link sfida copiabile */
.c820-challenge-link-box {
  background: var(--c820-surface); border:1.5px solid var(--c820-accent-2);
  border-radius: var(--c820-radius-lg); padding:16px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow: var(--c820-shadow);
}
.c820-challenge-link-label {
  font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:var(--c820-accent-2);
}
.c820-challenge-link-row {
  display:flex; gap:10px; align-items:stretch;
}
.c820-challenge-link-url {
  flex:1; background: rgba(15, 23, 42, 0.45); border:1.5px solid var(--c820-border);
  color:var(--c820-muted); border-radius: var(--c820-radius); padding:10px 12px;
  font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family: 'Courier New', monospace; user-select:all;
}
.c820-challenge-link-copy {
  background: var(--c820-accent-2); color:#fff; border:none; border-radius: var(--c820-radius);
  padding:10px 16px; font-weight:800; font-size:.9rem; cursor:pointer; white-space:nowrap;
  box-shadow: 0 4px 12px var(--c820-accent-glow);
  transition: transform 0.2s, filter 0.2s, box-shadow 0.2s;
}
.c820-challenge-link-copy:hover { filter:brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 16px var(--c820-accent-glow); }
.c820-challenge-share-row { display:flex; gap:10px; flex-wrap:wrap; }

/* ===================================================================
   RESULT: confronto sfida testa a testa
   =================================================================== */
.c820-challenge-result {
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius-lg); padding:18px;
  display:flex; flex-direction:column; gap:16px;
  box-shadow: var(--c820-shadow);
}
.c820-challenge-result-title {
  text-align:center; font-size:.8rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:var(--c820-muted); margin:0;
}
.c820-challenge-vs {
  display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:start;
}
.c820-challenge-col {
  background: var(--c820-surface-2); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius); padding:14px 12px;
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.c820-challenge-col-mine { border-color: var(--c820-accent-2); }
.c820-challenge-col-theirs { border-color: var(--c820-border); }
.c820-challenge-col-role {
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--c820-muted);
}
.c820-challenge-col-nick {
  font-size:.95rem; font-weight:900; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color: var(--c820-text);
}
.c820-challenge-col-pts {
  font-size:2.2rem; font-weight:900; color:var(--c820-gold); line-height:1;
}
.c820-challenge-col-wins {
  font-size:.85rem; color:var(--c820-accent-2); font-weight:800;
}
.c820-challenge-col-extra { font-size:.78rem; color:var(--c820-muted); }
.c820-challenge-vs-sep {
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:900; color:var(--c820-muted); padding-top:36px;
}

/* badge vincitore */
.c820-challenge-winner-badge {
  text-align:center; padding:12px 16px;
  border-radius: var(--c820-radius); font-size:1.05rem; font-weight:900;
  box-shadow: var(--c820-shadow);
}
.c820-winner-me    { background: linear-gradient(135deg,#102a21,#0c1c14); color: var(--c820-accent-2); border:1.5px solid var(--c820-accent-2); }
.c820-winner-them  { background: linear-gradient(135deg,#2a1818,#1c0d0d); color:#f87171; border:1.5px solid #dc2626; }
.c820-winner-pari  { background: linear-gradient(135deg,#2a2210,#1c1507); color: var(--c820-gold); border:1.5px solid var(--c820-gold); }

/* colonna vincitrice evidenziata */
.c820-challenge-col.c820-col-winner {
  border-width:2px;
  box-shadow: 0 0 0 3px var(--c820-accent-glow);
}
.c820-challenge-col.c820-col-winner.c820-challenge-col-mine {
  border-color: var(--c820-accent-2);
  box-shadow: 0 0 0 3px var(--c820-accent-glow);
}
.c820-challenge-col.c820-col-winner.c820-challenge-col-theirs {
  border-color:#ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.25);
}

/* ===================================================================
   RESPONSIVE leaderboard + sfida
   =================================================================== */
@media (max-width: 560px) {
  .c820-lb-table-head,
  .c820-lb-row {
    grid-template-columns: 26px 1fr 56px 32px 56px;
    gap:6px; padding:8px; font-size:.8rem;
  }
  .c820-lb-table-head { letter-spacing:.02em; font-size:.66rem; }
  .c820-lb-pts { font-size:.9rem; }
  .c820-setup-extra-btns { flex-direction:column; }
  .c820-challenge-vs { grid-template-columns:1fr auto 1fr; gap:6px; }
  .c820-challenge-col-pts { font-size:1.75rem; }
  .c820-challenge-col { padding:10px 8px; }
  .c820-nick-modal { padding:24px 20px; }
  .c820-challenge-link-row { flex-direction:column; }
  .c820-challenge-link-copy { width:100%; }
}

/* ===== Invito amici (sfida): link + social + email ===== */
.c820-invite { margin-top: 16px; background: var(--c820-surface); border:1.5px solid var(--c820-border); border-radius: var(--c820-radius-lg); padding: 16px; box-shadow: var(--c820-shadow); }
.c820-invite-title { font-weight: 800; font-size: 1rem; margin-bottom: 12px; color: var(--c820-text); }
.c820-invite-link { display:flex; gap:10px; margin-bottom:12px; }
.c820-invite-link input {
  flex:1; min-width:0; background: rgba(15, 23, 42, 0.45); border:1.5px solid var(--c820-border);
  color: var(--c820-text); border-radius: var(--c820-radius); padding: 10px 12px; font-size:.85rem;
  font-family: 'Courier New', monospace;
}
.c820-inv-copy {
  background: var(--c820-surface-2); border:1.5px solid var(--c820-border); color: var(--c820-text);
  border-radius: var(--c820-radius); padding:10px 16px; font-weight:800; cursor:pointer; white-space:nowrap;
  transition: border-color 0.2s, background 0.2s;
}
.c820-inv-copy:hover { border-color: var(--c820-accent-2); background: var(--c820-surface); }
.c820-invite-social { margin-bottom: 12px; }
.c820-invite-email { display:flex; gap:10px; }
.c820-invite-email input {
  flex:1; min-width:0; background: rgba(15, 23, 42, 0.45); border:1.5px solid var(--c820-border);
  color: var(--c820-text); border-radius: var(--c820-radius); padding:12px; font-size:.95rem;
}
.c820-invite-email input:focus { outline:none; border-color: var(--c820-accent-2); }
.c820-inv-send {
  background: linear-gradient(135deg, var(--c820-accent), var(--c820-accent-2)); color:#fff;
  border:none; border-radius: var(--c820-radius); padding:12px 18px; font-weight:800; cursor:pointer; white-space:nowrap;
  box-shadow: 0 4px 12px var(--c820-accent-glow);
  transition: transform 0.2s, filter 0.2s, box-shadow 0.2s;
}
.c820-inv-send:hover { filter:brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 16px var(--c820-accent-glow); }
.c820-inv-send:disabled { opacity:.6; cursor:default; transform: none; box-shadow: none; }
.c820-invite-msg { margin-top:10px; font-size:.88rem; min-height:1.2em; }
.c820-inv-ok  { color: var(--c820-accent-2); font-weight:800; }
.c820-inv-err { color:#ef4444; font-weight:800; }

/* ===== Sfida creata dal setup / risultato creatore ===== */
.c820-btn-challenge { background: var(--c820-surface-2); border:1.5px solid var(--c820-accent-2); color: var(--c820-accent-2); }
.c820-btn-challenge:hover { background: var(--c820-accent-2); color:#fff; box-shadow: 0 4px 12px var(--c820-accent-glow); }
#c820-setup-sfida-link:not(:empty) { margin-top: 16px; }
.c820-sfida-creating, .c820-sfida-err { text-align:center; color: var(--c820-muted); padding:12px; font-weight: 600; }
.c820-sfida-err { color:#ef4444; }
.c820-sfida-hint { font-size:.85rem; color: var(--c820-muted); margin-top:12px; text-align:center; line-height:1.5; }
.c820-challenge-saved { text-align:center; margin-bottom:12px; }
.c820-cs-title { font-weight:800; color: var(--c820-accent-2); font-size:1.1rem; }
.c820-cs-sub { font-size:.88rem; color: var(--c820-muted); line-height:1.5; }

/* ===================================================================
   BOTTONI "LE MIE SFIDE" (setup)
   =================================================================== */
.c820-btn-mychallenges {
  background: var(--c820-surface-2);
  border: 1.5px solid var(--c820-gold);
  color: var(--c820-gold);
}
.c820-btn-mychallenges:hover {
  background: rgba(251,191,36,.12);
  border-color: var(--c820-gold);
  box-shadow: 0 4px 12px rgba(251,191,36,0.15);
}

/* ===================================================================
   SCHERMATA "LE MIE SFIDE" (.c820-mc-*)
   =================================================================== */
.c820-mc-screen { display:flex; flex-direction:column; gap:16px; }

.c820-mc-header {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.c820-mc-title {
  margin:0; font-size:1.5rem; font-weight:900; letter-spacing:-.02em;
  background: linear-gradient(135deg, var(--c820-gold), var(--c820-accent-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

.c820-mc-empty, .c820-mc-noemail {
  text-align:center; color:var(--c820-muted); padding:36px 20px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.c820-mc-hint { font-size:.85rem; color:var(--c820-muted); line-height:1.5; margin:0; }
.c820-mc-noemail p { margin:0; }

/* lista sfide */
.c820-mc-list { display:flex; flex-direction:column; gap:12px; }

/* card singola sfida */
.c820-sfida-card {
  background: var(--c820-surface);
  border: 1.5px solid var(--c820-border);
  border-radius: var(--c820-radius-lg);
  padding: 16px 18px;
  display:flex; flex-direction:column; gap:12px;
  transition: border-color .2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: var(--c820-shadow);
}
.c820-sfida-card:hover { border-color: var(--c820-accent-2); transform: translateY(-2px); box-shadow: 0 4px 16px var(--c820-accent-glow); }

/* header card */
.c820-sfida-card-header {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.c820-sfida-code { font-size:.92rem; color:var(--c820-muted); }
.c820-sfida-code strong { color:var(--c820-text); font-family:'Courier New',monospace; font-size: 1rem; }

/* badge stato */
.c820-badge {
  display:inline-block; border-radius:999px; padding:4px 12px;
  font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  white-space:nowrap; flex:0 0 auto;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.c820-badge-attesa {
  background: var(--c820-surface-2);
  border: 1px solid var(--c820-border);
  color: var(--c820-muted);
}
.c820-badge-completata {
  background: rgba(16,185,129,.15);
  border: 1px solid var(--c820-accent-2);
  color: var(--c820-accent-2);
}

/* riga esito */
.c820-mc-esito {
  display:flex; flex-direction:column; gap:6px;
  background: rgba(15, 23, 42, 0.45); border-radius: var(--c820-radius);
  padding:12px 14px; border: 1px solid var(--c820-border);
}
.c820-mc-esito-attesa { color:var(--c820-muted); font-size:.9rem; text-align:center; }
.c820-mc-score { font-size:.85rem; color:var(--c820-muted); }
.c820-mc-score strong { color:var(--c820-text); font-weight: 700; }
.c820-mc-winner { font-size:.95rem; font-weight:800; color: var(--c820-gold); }

/* azioni card */
.c820-sfida-card-actions {
  display:flex; gap:10px; flex-wrap:wrap;
}
.c820-btn-sm {
  padding:9px 16px; font-size:.85rem; font-weight:700;
  border-radius: var(--c820-radius); cursor:pointer;
  border: 1.5px solid var(--c820-border); background: var(--c820-surface-2);
  color: var(--c820-text); transition: border-color .15s, background .15s, color 0.15s, transform 0.15s;
}
.c820-btn-sm:hover { border-color: var(--c820-accent-2); transform: translateY(-1px); }
.c820-btn-copy { color: var(--c820-muted); }
.c820-btn-copy:hover { color: var(--c820-text); }
.c820-btn-rivedi {
  background: rgba(16,185,129,.1); border-color: var(--c820-accent-2);
  color: var(--c820-accent-2);
}
.c820-btn-rivedi:hover { background: rgba(16,185,129,.2); }
.c820-btn-annulla { color: var(--c820-muted); }
.c820-btn-annulla:hover { border-color:#dc2626; color:#f87171; background: rgba(220,38,38,0.05); }
.c820-btn-danger {
  background: rgba(220,38,38,.15) !important; border-color:#dc2626 !important;
  color:#f87171 !important;
}

/* ===================================================================
   SCHERMATA "CONFRONTO A POSTERIORI" (.c820-cv-*)
   =================================================================== */
.c820-cv-screen { display:flex; flex-direction:column; gap:16px; }
.c820-cv-header {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.c820-cv-title {
  margin:0; font-size:1.5rem; font-weight:900; letter-spacing:-.02em;
  background: linear-gradient(135deg, var(--c820-accent-2), var(--c820-gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.c820-cv-body { display:flex; flex-direction:column; gap:16px; }
.c820-cv-err { color:#ef4444; text-align:center; padding:28px 0; font-weight: 700; }
.c820-cv-noplay { text-align:center; color:var(--c820-muted); padding:28px 0; }

/* ruolo creatore nel confronto */
.c820-cmp-role { font-size:.7rem; color:var(--c820-muted); font-weight:600; text-transform: uppercase; letter-spacing: 0.04em; }

/* lista tentativi */
.c820-cv-plays {
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius-lg); overflow:hidden;
  box-shadow: var(--c820-shadow);
}
.c820-cv-plays-title {
  font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c820-muted); padding:12px 16px 8px; margin:0;
  border-bottom: 1px solid var(--c820-border);
}
.c820-cv-plays-list { display:flex; flex-direction:column; }
.c820-cv-play-row {
  display:grid; grid-template-columns:30px 1fr 70px 50px;
  align-items:center; gap:10px; padding:10px 16px;
  font-size:.9rem; border-top:1px solid rgba(255,255,255,.04);
  transition: background 0.15s;
}
.c820-cv-play-row:hover { background: var(--c820-surface-2); }
.c820-cv-play-rank { color:var(--c820-muted); font-weight:900; text-align:center; }
.c820-cv-play-nick { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: var(--c820-text); }
.c820-cv-play-pts { text-align:right; font-weight:900; color:var(--c820-gold); }
.c820-cv-play-wins { text-align:right; color:var(--c820-accent-2); font-weight:700; }

/* pulsante condividi nella schermata cv */
.c820-cv-share { margin-top:6px; }

/* ===================================================================
   EMAIL MODAL (hint testo aggiuntivo)
   =================================================================== */
.c820-email-hint {
  font-size:.88rem; color:var(--c820-muted); margin:0; line-height:1.5;
}

/* ===================================================================
   RESPONSIVE mie sfide + confronto
   =================================================================== */
@media (max-width: 560px) {
  .c820-mc-header,
  .c820-cv-header { flex-wrap:wrap; gap: 8px; }
  .c820-sfida-card-actions { flex-direction:column; gap: 8px; }
  .c820-btn-sm { width:100%; text-align:center; }
  .c820-cv-play-row {
    grid-template-columns: 26px 1fr 60px 44px;
    font-size:.82rem; padding:8px 12px;
  }
}

/* ===== Confronto sfida su UNA riga (due colonne affiancate) ===== */
.c820-challenge-compare { margin: 16px 0; }
.c820-cmp-title { text-align:center; font-size:1.05rem; font-weight: 800; margin:0 0 16px; color: var(--c820-text); }
.c820-cmp-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.c820-cmp-col {
  background: var(--c820-surface); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius); padding: 16px 12px; text-align:center;
  transition: border-color 0.25s, transform 0.25s;
}
.c820-cmp-col.c820-cmp-winner {
  border-color: var(--c820-gold);
  box-shadow: 0 0 14px rgba(245,197,24,.22);
  background: linear-gradient(180deg, rgba(245,197,24,.06), var(--c820-surface));
}
.c820-cmp-label { font-weight:800; font-size:1rem; margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: var(--c820-text); }
.c820-cmp-role { font-weight:700; font-size:.75rem; color: var(--c820-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.c820-cmp-pts { font-size:2rem; font-weight:900; color: var(--c820-gold); line-height:1; }
.c820-cmp-pts-lbl { font-size:.85rem; font-weight:700; color: var(--c820-muted); }
.c820-cmp-wins { font-size:.95rem; color: var(--c820-text); margin-top:4px; font-weight: 700; }
.c820-cmp-wins-lbl { font-size:.76rem; color: var(--c820-muted); }
.c820-cmp-badge {
  margin-top:10px; display:inline-block; background: var(--ov-elite); color:#0b1220;
  font-weight:900; font-size:.8rem; padding:4px 12px; border-radius:999px;
  box-shadow: 0 2px 6px rgba(245,197,24,0.3);
}
.c820-cmp-vs { font-weight:900; color: var(--c820-muted); font-size:1.15rem; text-align:center; }
.c820-cmp-pari { text-align:center; font-weight:800; margin-top:12px; color: var(--c820-accent-2); font-size: 1rem; }

@media (max-width: 420px) {
  .c820-cmp-pts { font-size:1.6rem; }
  .c820-cmp-grid { gap:8px; }
}

/* ===================================================================
   Barra identità (setup screen) — mostra email/nick corrente
   =================================================================== */

.c820-identity-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c820-surface-2);
  border: 1.5px solid var(--c820-border);
  border-radius: var(--c820-radius);
  padding: 8px 14px;
  margin-bottom: 12px;
  font-size: .88rem;
  box-shadow: var(--c820-shadow);
}

.c820-identity-label {
  flex: 1;
  color: var(--c820-text);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c820-identity-change {
  flex-shrink: 0;
  background: var(--c820-surface);
  border: 1.5px solid var(--c820-border);
  border-radius: 8px;
  color: var(--c820-muted);
  font-size: .8rem;
  padding: 4px 10px;
  cursor: pointer;
  font-weight: 700;
  transition: border-color .15s, color .15s, background .15s;
}

.c820-identity-change:hover {
  border-color: var(--c820-accent-2);
  color: var(--c820-text);
  background: var(--c820-surface-2);
}

/* Variante ORO: "Cambia nome" evidenziato così è subito chiaro che si può
   personalizzare il nome squadra. */
.c820-identity-change-gold {
  color: #1a1400;
  background: linear-gradient(135deg, #f5c518, #ffd84a);
  border-color: #f5c518;
  font-weight: 800;
}
.c820-identity-change-gold:hover {
  color: #1a1400;
  background: linear-gradient(135deg, #ffd84a, #ffe27a);
  border-color: #ffd84a;
}

/* Errore validazione input email obbligatoria */
.c820-nick-input.c820-input-error {
  border-color: #ef4444;
  outline: 2px solid rgba(239,68,68,.35);
}

/* ===== Flash sul chip appena riempito (feedback focus draft) ===== */
@keyframes c820-chip-pulse {
  0%   { transform: translate(-50%,-50%) scale(1);   box-shadow: 0 0 0 0 var(--c820-gold); }
  40%  { transform: translate(-50%,-50%) scale(1.18); box-shadow: 0 0 0 8px rgba(245,197,24,.6); }
  100% { transform: translate(-50%,-50%) scale(1);   box-shadow: 0 0 0 0 rgba(245,197,24,0); }
}
.c820-field-chip.c820-chip-flash { animation: c820-chip-pulse .9s ease-out; z-index: 5; }
@media (prefers-reduced-motion: reduce) {
  .c820-field-chip.c820-chip-flash { animation: none; }
}

/* ===================================================================
   HERO RISULTATO — grafica "card" (record + stat + campo + premi)
   =================================================================== */
.c820-hero {
  background: #0b111e; border:1.5px solid var(--c820-border); border-radius:22px;
  padding:24px 16px 18px; margin:0 auto 20px !important; text-align:center;
  box-shadow: var(--c820-shadow-lg);
  max-width: 480px;
}
.c820-hero-title { color: var(--c820-gold); font-weight:900; font-size:1rem; letter-spacing:.06em; }
.c820-hero-record {
  color: var(--c820-gold); font-weight:950; line-height:1.15;
  font-size: clamp(3.2rem, 15vw, 4.8rem); margin:8px 0; letter-spacing:-0.01em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.c820-hero-record-lbl { color: var(--c820-muted); font-size:.74rem; letter-spacing:.1em; font-weight: 700; }
.c820-hero-verdict { color:#fff; font-weight:900; font-size: clamp(1.4rem, 6vw, 2.2rem); margin:8px 0 16px; text-transform: uppercase;
  background: linear-gradient(135deg, #fff 40%, var(--c820-muted) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.c820-hero-stats { display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; margin-bottom:16px; }
.c820-hero-stat {
  background: rgba(15, 23, 42, 0.45); border: 1.5px solid var(--c820-border); border-radius:12px; padding:10px 4px 11px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:4px;
}
.c820-hero-stat::before { content:''; position:absolute; top:0; left:0; right:0; height:3.5px; }
.c820-hero-stat.hs-pos::before { background: var(--c820-gold); }
.c820-hero-stat.hs-pts::before { background:#3b82f6; }
.c820-hero-stat.hs-gd::before  { background: var(--c820-accent-2); }
.c820-hero-stat.hs-ovr::before { background:#ef4444; }
.c820-hero-stat-lbl { font-size:.62rem; letter-spacing:.08em; font-weight:800; text-transform: uppercase; }
.c820-hero-stat.hs-pos .c820-hero-stat-lbl { color: var(--c820-gold); }
.c820-hero-stat.hs-pts .c820-hero-stat-lbl { color:#60a5fa; }
.c820-hero-stat.hs-gd  .c820-hero-stat-lbl { color: var(--c820-accent-2); }
.c820-hero-stat.hs-ovr .c820-hero-stat-lbl { color:#f87171; }
.c820-hero-stat-val { color:#fff; font-weight:900; font-size:1.25rem; }

/* Campo con disegno (strisce + linee, aree, cerchio, porte) */
.c820-hero-field {
  position:relative; width:100%; aspect-ratio: 68 / 100; margin:0 auto 16px; max-width:100%;
  border-radius:16px; overflow:hidden;
  border: 2px solid #14532d;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.5);
  background:
    /* linee del campo (SVG vettoriale, bianco semitrasparente) */
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 680 1000' preserveAspectRatio='none'>\
<g fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='3'>\
<rect x='6' y='6' width='668' height='988' rx='6'/>\
<line x1='6' y1='500' x2='674' y2='500'/>\
<circle cx='340' cy='500' r='92'/>\
<circle cx='340' cy='500' r='4' fill='rgba(255,255,255,0.45)'/>\
<rect x='178' y='6' width='324' height='150'/>\
<rect x='258' y='6' width='164' height='62'/>\
<rect x='178' y='844' width='324' height='150'/>\
<rect x='258' y='932' width='164' height='62'/>\
<path d='M 258 156 A 92 92 0 0 0 422 156'/>\
<path d='M 258 844 A 92 92 0 0 1 422 844'/>\
<rect x='292' y='0' width='96' height='6'/>\
<rect x='292' y='994' width='96' height='6'/>\
</g></svg>"),
    /* strisce campo */
    repeating-linear-gradient(0deg, #144e2e 0, #144e2e 10%, #114227 10%, #114227 20%);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}
.c820-hero-pin {
  position:absolute; transform:translate(-50%,-50%); text-align:center;
  width:80px; display:flex; flex-direction:column; align-items:center;
}
.c820-hero-ovr {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; margin:0 auto;
  color:#fff; font-weight:900; font-size:.9rem; border:2.5px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.c820-ovr-a { background: var(--ov-elite); color: #0b1220 !important; border-color: var(--c820-gold) !important; }
.c820-ovr-b { background: var(--ov-great); }
.c820-ovr-c { background: var(--ov-good); }
.c820-ovr-d { background: var(--ov-avg); }
.c820-ovr-e { background: #b03a2e; }
.c820-hero-pname {
  display:block; color:#fff; font-weight:800; font-size:.72rem; margin-top:4px;
  white-space:nowrap; text-shadow:0 1.5px 3px rgba(0,0,0,0.9);
  width:100%; text-align:center;
}

/* Premi */
.c820-hero-awards { display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; }
.c820-hero-aw {
  background: rgba(15, 23, 42, 0.45); border: 1.5px solid var(--c820-border); border-radius:12px; padding:10px 4px 11px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:3px; align-items:center;
}
.c820-hero-aw::before { content:''; position:absolute; top:0; left:0; right:0; height:3.5px; }
.c820-hero-aw.aw-gold::before  { background: var(--c820-gold); }
.c820-hero-aw.aw-blue::before  { background:#60a5fa; }
.c820-hero-aw.aw-green::before { background: var(--c820-accent-2); }
.c820-hero-aw.aw-red::before   { background:#f87171; }
.c820-hero-aw-lbl { font-size:.58rem; letter-spacing:.04em; font-weight:800; line-height:1.1; text-transform: uppercase; }
.c820-hero-aw.aw-gold  .c820-hero-aw-lbl { color: var(--c820-gold); }
.c820-hero-aw.aw-blue  .c820-hero-aw-lbl { color:#60a5fa; }
.c820-hero-aw.aw-green .c820-hero-aw-lbl { color: var(--c820-accent-2); }
.c820-hero-aw.aw-red   .c820-hero-aw-lbl { color:#f87171; }
.c820-hero-aw-big { color:#fff; font-weight:900; font-size:1.05rem; margin-top: 2px; }
.c820-hero-aw-sub { color: var(--c820-muted); font-size:.65rem; font-weight: 600; margin-top: 1px; }

@media (max-width:380px) {
  .c820-hero-ovr { width:36px; height:36px; font-size:.78rem; }
  .c820-hero-pname { font-size:.64rem; }
  .c820-hero-aw-big { font-size:.9rem; }
}

/* ===== Bottoni Copia/Scarica immagine ===== */
.c820-img-actions { display:flex; gap:12px; margin:0 0 16px; }
.c820-btn-imgcopy, .c820-btn-imgdl {
  flex:1; padding:14px; font-weight:800; border-radius: var(--c820-radius); cursor:pointer;
  border:none; font-size: .95rem;
  transition: transform 0.2s, filter 0.2s, box-shadow 0.2s;
}
.c820-btn-imgcopy { background: linear-gradient(135deg, var(--c820-accent), var(--c820-accent-2)); color:#fff; box-shadow: 0 4px 12px var(--c820-accent-glow); }
.c820-btn-imgcopy:hover { filter:brightness(1.1); transform: translateY(-1px); }
.c820-btn-imgdl { background: var(--c820-surface-2); border:1.5px solid var(--c820-border); color: var(--c820-text); }
.c820-btn-imgdl:hover { border-color: var(--c820-accent-2); background: var(--c820-surface); transform: translateY(-1px); }
.c820-btn-imgcopy:disabled, .c820-btn-imgdl:disabled { opacity:.5; cursor:default; transform: none; box-shadow: none; }

/* ===== Tabs risultato ===== */
.c820-tabs { display:flex; gap:8px; margin:0 0 16px; border-bottom:1.5px solid var(--c820-border); }
.c820-tab {
  flex:1; background:none; border:none; cursor:pointer;
  padding:12px 6px; font-weight:800; font-size:.9rem; color: var(--c820-muted);
  border-bottom:3px solid transparent; transition: color .2s, border-bottom-color .2s;
}
.c820-tab:hover { color: var(--c820-text); }
.c820-tab.is-active { color: var(--c820-accent-2); border-bottom-color: var(--c820-accent-2); }
.c820-tabpane { display:none; }
.c820-tabpane.is-active { display:block; animation: c820-fadein .25s ease-out; }
@keyframes c820-fadein { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .c820-tabpane.is-active { animation:none; } }

/* ===== Analisi stagione ===== */
.c820-analysis {
  background: var(--c820-surface-2); border:1.5px solid var(--c820-border);
  border-radius: var(--c820-radius); padding:16px 18px; margin:16px 0;
  box-shadow: var(--c820-shadow);
}
.c820-analysis-title { font-weight:900; color: var(--c820-gold); margin-bottom:10px; font-size:1.05rem; }
.c820-analysis-line { margin:8px 0; font-size:.95rem; line-height:1.5; color: var(--c820-text); }
.c820-analysis-line strong { color: var(--c820-accent-2); }

/* ===== Classifica finale (tab) ===== */
.c820-fstand { display:flex; flex-direction:column; gap:4px; }
.c820-fstand-head, .c820-fstand-row {
  display:grid; grid-template-columns: 28px 1fr 34px 44px 34px; gap:8px; align-items:center;
  padding:8px 10px; font-size:.9rem;
}
.c820-fstand-head { color: var(--c820-muted); font-weight:800; font-size:.74rem; text-transform:uppercase; letter-spacing: 0.04em; }
.c820-fstand-row { background: var(--c820-surface); border: 1.5px solid var(--c820-border); border-radius:var(--c820-radius); transition: background 0.15s; }
.c820-fstand-row:hover { background: var(--c820-surface-2); }
.c820-fstand-row:nth-child(even) { background: var(--c820-surface-2); }
.c820-fstand-row:nth-child(even):hover { background: var(--c820-surface); }
.c820-fstand-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight: 700; color: var(--c820-text); }
.c820-fstand-pts { font-weight:900; color: var(--c820-gold); text-align:right; font-size: 1.05rem; }
.c820-fstand-row.is-mine { border-color: var(--c820-accent-2); font-weight:800; background: linear-gradient(90deg, var(--c820-accent-glow), transparent); }
.c820-fstand-row.z-cl  { box-shadow: inset 3.5px 0 0 var(--c820-accent-2); }
.c820-fstand-row.z-eu  { box-shadow: inset 3.5px 0 0 #3b82f6; }
.c820-fstand-row.z-rel { box-shadow: inset 3.5px 0 0 #ef4444; }

/* ===== Mercato di gennaio ===== */
.c820-market-overlay { align-items:flex-start; }
.c820-market-modal {
  background: var(--c820-surface); border:1px solid var(--c820-border);
  border-radius: var(--c820-radius-lg); padding:20px 18px; width:100%; max-width:460px;
  margin:24px auto; max-height:88vh; overflow-y:auto; box-shadow: var(--c820-shadow-lg);
}
.c820-market-title { font-size:1.25rem; font-weight:900; color: var(--c820-gold); margin:0 0 6px; }
.c820-market-sub { font-size:.9rem; color: var(--c820-muted); margin:0 0 14px; line-height:1.4; }
.c820-market-list { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.c820-market-pick {
  display:flex; align-items:center; gap:10px; text-align:left;
  background: var(--c820-surface-2); border:1px solid var(--c820-border);
  border-radius: var(--c820-radius); padding:9px 12px; cursor:pointer; color: var(--c820-text);
  transition: border-color .12s, background .12s;
}
.c820-market-pick:hover { border-color: var(--c820-accent-2); }
.c820-market-pick.is-sel { border-color: var(--c820-gold); background: rgba(245,197,24,.1); }
.c820-market-role {
  flex:0 0 auto; min-width:42px; text-align:center; font-weight:800; font-size:.72rem;
  color:#fff; background: var(--c820-accent); border-radius:6px; padding:3px 4px;
}
.c820-market-name { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c820-market-spin:not(:empty) { margin-bottom:12px; }
.c820-market-result { max-height:300px; overflow-y:auto; margin-top:10px; }

/* ===================================================================
   SFIDA: reveal animato + report ricco + mini-lega
   =================================================================== */
.c820-challenge-banner-sub { display:block; font-weight:400; font-size:.82rem; color:var(--c820-muted); margin-top:4px; }

/* --- Reveal --- */
.c820-reveal { text-align:center; padding:14px 8px 6px; }
.c820-reveal-lbl { color:var(--c820-muted); font-size:.85rem; }
.c820-reveal-score { font-size:1.6rem; font-weight:900; color:var(--c820-text); margin-top:2px; }
.c820-reveal-score span { font-size:.9rem; color:var(--c820-muted); font-weight:700; }
.c820-reveal-suspense { margin:18px 0; color:var(--c820-muted); }
.c820-reveal-suspense p { margin-top:10px; font-size:.95rem; }
.c820-reveal-spinner {
  width:38px; height:38px; margin:0 auto; border-radius:50%;
  border:3px solid var(--c820-border); border-top-color:var(--c820-gold);
  animation: c820-spin .8s linear infinite;
}
@keyframes c820-spin { to { transform: rotate(360deg); } }
.c820-reveal-verdict {
  font-size:2rem; font-weight:900; margin:14px 0; transition: opacity .4s;
  animation: c820-verdict-pop .5s ease-out;
}
@keyframes c820-verdict-pop { 0%{transform:scale(.6)} 60%{transform:scale(1.15)} 100%{transform:scale(1)} }
.c820-reveal-verdict.v-win  { color:#22c55e; }
.c820-reveal-verdict.v-lose { color:#ef4444; }
.c820-reveal-verdict.v-draw { color:var(--c820-gold); }
@media (prefers-reduced-motion: reduce) {
  .c820-reveal-spinner, .c820-reveal-verdict { animation:none; }
}

/* --- Report testa-a-testa --- */
.c820-cmp-head { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin-bottom:12px; }
.c820-cmp-hname { font-weight:800; font-size:1rem; text-align:center; color:var(--c820-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c820-cmp-hname.c820-cmp-winner { color:var(--c820-gold); }
.c820-cmp-hvs { color:var(--c820-muted); font-weight:700; font-size:.85rem; }
.c820-cmp-table { display:flex; flex-direction:column; gap:2px; }
.c820-cmp-trow { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding:8px 10px; background:var(--c820-surface); border-radius:7px; }
.c820-cmp-trow:nth-child(even) { background:var(--c820-surface-2); }
.c820-cmp-ta, .c820-cmp-tb { font-weight:800; font-size:1.05rem; color:var(--c820-text); }
.c820-cmp-ta { text-align:right; }
.c820-cmp-tb { text-align:left; }
.c820-cmp-tl { font-size:.72rem; color:var(--c820-muted); text-transform:uppercase; letter-spacing:.04em; text-align:center; min-width:88px; }
.c820-cmp-better { color:#22c55e !important; }
.c820-cmp-sep { text-align:center; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--c820-gold); padding:10px 0 4px; }

/* --- Mini-lega sfida --- */
.c820-cmp-league { margin-top:16px; }
.c820-cl-title { font-weight:800; color:var(--c820-gold); margin-bottom:8px; font-size:.95rem; }
.c820-cl-list { display:flex; flex-direction:column; gap:3px; }
.c820-cl-row { display:grid; grid-template-columns:32px 1fr auto auto; align-items:center; gap:8px; padding:8px 10px; background:var(--c820-surface); border-radius:7px; font-size:.9rem; }
.c820-cl-row:nth-child(even) { background:var(--c820-surface-2); }
.c820-cl-row.c820-cl-mine { outline:2px solid var(--c820-accent-2); font-weight:800; }
.c820-cl-rank { text-align:center; font-weight:800; }
.c820-cl-nick { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--c820-text); }
.c820-cl-tag { font-size:.65rem; color:var(--c820-muted); background:var(--c820-surface-2); padding:1px 6px; border-radius:6px; font-weight:600; }
.c820-cl-pts { font-weight:800; color:var(--c820-gold); }
.c820-cl-wins { color:var(--c820-muted); font-size:.82rem; }

/* --- Coriandoli vittoria --- */
.c820-confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:50; }
.c820-confetti i {
  position:absolute; top:-12px; width:9px; height:14px; border-radius:2px;
  animation: c820-fall 3s linear forwards;
}
@keyframes c820-fall {
  to { transform: translateY(120vh) rotate(540deg); opacity:.2; }
}