/* ═══════════════════════════════════════════
   FANTATENNIS — Design System
   ═══════════════════════════════════════════ */

/* Font bandiere: Windows non rende le emoji-bandiera, questo le mostra ovunque.
   unicode-range limitato ai soli codepoint delle bandiere → non tocca il resto. */
@font-face {
  font-family: 'Twemoji Country Flags';
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url('https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* ── Tennis palette ── */
  --ball:        #DCF63B;   /* giallo pallina */
  --ball-bright: #ECFF5C;
  --ball-deep:   #C2DE1F;
  --court:       #2F8F6B;   /* verde campo */
  --court-light: #43B98C;
  --court-deep:  #123A2A;
  --clay:        #E07A4F;   /* terra rossa */
  --clay-deep:   #C75B39;
  --line:        #F4F8EE;   /* bianco linee */

  /* ── Surface (bright / light, Dunkest-style) ── */
  --bg:          #EFF3E8;
  --bg-2:        #FFFFFF;
  --bg-card:     #FFFFFF;
  --bg-card-2:   #FBFDF7;
  --bg-hover:    #F1F5EA;
  --bg-input:    #FFFFFF;
  --border:      #E2E8D6;
  --border-light:#CFDABF;

  /* ── Semantic ── */
  --accent:      #11985C;            /* verde leggibile su chiaro */
  --accent-2:    #0C7A48;
  --accent-dim:  rgba(17,152,92,.10);
  --gold:        #E0A100;
  --gold-dim:    rgba(224,161,0,.14);
  --blue:        #2C7BD6;
  --purple:      #7C5CE6;
  --danger:      #E0483B;
  --danger-dim:  rgba(224,72,59,.12);
  --text:        #15271C;
  --muted:       #5C6E60;
  --dim:         #9AA897;
  --sidebar-w:   234px;
  --radius:      16px;
  --radius-sm:   10px;
  --shadow:      0 10px 30px rgba(20,45,30,.10);
  --glow:        0 0 0 1px rgba(17,152,92,.25), 0 8px 24px rgba(17,152,92,.12);
}

/* ── TEMA SCURO ── */
html.dark {
  --bg:          #0C1A14;
  --bg-2:        #0E1F17;
  --bg-card:     #12271D;
  --bg-card-2:   #163020;
  --bg-hover:    #1A3826;
  --bg-input:    #0E2218;
  --border:      #224535;
  --border-light:#2E5A44;
  --accent:      #2FD58F;
  --accent-2:    #1FA770;
  --accent-dim:  rgba(47,213,143,.14);
  --gold:        #FFC24B;
  --gold-dim:    rgba(255,194,75,.14);
  --blue:        #5B9DF9;
  --danger:      #FF7A6B;
  --danger-dim:  rgba(255,122,107,.14);
  --text:        #F0F6EC;
  --muted:       #9DB4A6;
  --dim:         #5E7468;
  --shadow:      0 10px 30px rgba(0,0,0,.42);
  --glow:        0 0 0 1px rgba(47,213,143,.3), 0 8px 24px rgba(47,213,143,.12);
}
/* Superfici hardcoded che vanno scurite */
html.dark .appbar { background: rgba(14,31,23,.86); }
html.dark .dropdown { background: var(--bg-card); }
html.dark select option { background: #12271D; color: #F0F6EC; }
html.dark .toast { background: rgba(18,39,29,.95); color: var(--text); }
html.dark .landing-body, html.dark .hub-body, html.dark .ob-body {
  background: linear-gradient(180deg, #0C1A14 0%, #0A1711 100%); }
html.dark .legal-body { background: linear-gradient(180deg, #0E1F17, #0A1711); }
html.dark .legal-wrap p, html.dark .legal-wrap li { color: #CFE0D4; }
html.dark .mascot-chip { background: #12271D; }
html.dark .news-card, html.dark .btn-google { background: var(--bg-card); }
html.dark .btn-google { color: var(--text); }
html.dark .appbar-word, html.dark .lp-logo-text, html.dark .page-title { color: var(--text); }
html.dark .hl-yellow { color: #15271C; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background:
    radial-gradient(1100px 600px at 84% -10%, rgba(220,246,59,.26), transparent 58%),
    radial-gradient(940px 520px at -8% 108%, rgba(47,143,107,.15), transparent 55%),
    radial-gradient(760px 520px at 50% 130%, rgba(220,246,59,.10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Twemoji Country Flags', 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* Niente scroll/swipe orizzontale di pagina: se un elemento sfora viene
     clippato, non trascina tutto lo schermo a destra/sinistra su mobile.
     'clip' (non 'hidden') così non rompe position:sticky di appbar/nav. */
  overflow-x: clip;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════
   LAYOUT — top bar (v1.0.7)
   ═══════════════════════════════════════════ */

.app { min-height: 100vh; }

.appbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.appbar-row {
  display: flex; align-items: center; gap: 1.2rem;
  max-width: 1200px; margin: 0 auto; padding: .8rem 1.6rem;
}

/* Logo */
.appbar-logo { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }
.appbar-logo:hover { text-decoration: none; }
.appbar-mark { height: 34px; width: 34px; transition: transform .25s; }
.appbar-logo:hover .appbar-mark { transform: rotate(-12deg) scale(1.06); }
.appbar-mascot { height: 46px; width: auto; display: block;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.3)); transition: transform .25s; }
.appbar-logo:hover .appbar-mascot { transform: scale(1.08) rotate(-4deg); }
.appbar-word {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.25rem;
  letter-spacing: -.5px; color: var(--text);
}

/* League switcher */
.appbar-league { position: relative; }
.league-switch {
  display: flex; align-items: center; gap: .5rem;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text); padding: .5rem .9rem; border-radius: 30px;
  cursor: pointer; font-size: .88rem; font-family: inherit; transition: all .15s;
}
.league-switch:hover { border-color: var(--border-light); }
.ls-emoji { font-size: .95rem; }
.ls-name  { font-weight: 700; }
.ls-team  { color: var(--muted); font-weight: 400; }
.ls-chev  { color: var(--muted); font-size: .7rem; }

.appbar-right { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.budget-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--accent-dim); color: var(--accent);
  border: 1px solid rgba(220,246,59,.3); border-radius: 30px;
  padding: .42rem .85rem; font-weight: 800; font-size: .9rem;
}
.bc-coin { font-size: .8rem; }
.bc-unit { font-weight: 500; font-size: .78rem; opacity: .8; }

/* User menu */
.user-menu { position: relative; }
.user-btn {
  display: flex; align-items: center; gap: .5rem;
  background: none; border: none; color: var(--text);
  cursor: pointer; font-family: inherit; font-size: .88rem; padding: .3rem;
}
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--court-light), var(--court-deep));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem; color: #fff;
}
.user-name { font-weight: 600; }

/* Dropdowns */
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px;
  background: #FFFFFF; border: 1px solid var(--border-light);
  border-radius: 14px; padding: .5rem; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all .16s; z-index: 200;
}
.dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-right { left: auto; right: 0; }
.dropdown-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--dim); padding: .4rem .7rem .3rem;
}
.dropdown-item {
  display: block; width: 100%; text-align: left;
  padding: .55rem .7rem; border-radius: 9px; color: var(--text);
  font-size: .86rem; background: none; border: none; cursor: pointer;
  font-family: inherit; transition: background .14s;
}
.dropdown-item:hover { background: var(--bg-hover); text-decoration: none; }
.dropdown-item.is-current { color: var(--accent); font-weight: 700; }
.dot-now { color: var(--accent); font-size: .6rem; vertical-align: middle; }
.dropdown-add { color: var(--accent); font-weight: 600; }
.dropdown-danger { color: var(--danger); }
.dropdown-code { font-size: .72rem; color: var(--muted); padding: .3rem .7rem .5rem; }
.dropdown-code strong { color: var(--accent); }
.dropdown-sep { height: 1px; background: var(--border); margin: .4rem .3rem; }

/* Tabs */
.appbar-tabs {
  display: flex; gap: .15rem; max-width: 1200px; margin: 0 auto;
  padding: 0 1.2rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 22px), transparent 100%);
}
.appbar-tabs::-webkit-scrollbar { display: none; }
.app-tab {
  display: flex; align-items: center; gap: .4rem; flex-shrink: 0;
  padding: .8rem .7rem; color: var(--muted); font-size: .84rem; font-weight: 600;
  border-bottom: 2.5px solid transparent; white-space: nowrap; transition: color .15s, border-color .15s;
}
.app-tab svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.app-tab:hover { color: var(--text); text-decoration: none; }
.app-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* MAIN */
.app-main {
  max-width: 1200px; margin: 0 auto; padding: 2rem 1.6rem 4rem; width: 100%;
}

@media (max-width: 700px) {
  .appbar-row { flex-wrap: wrap; gap: .7rem; padding: .7rem 1rem; }
  .ls-team { display: none; }
  .user-name { display: none; }
  .app-main { padding: 1.4rem 1rem 3rem; }
}

/* ═══════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════ */

.page-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; margin-bottom: 1.8rem;
}
.page-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.4px; }
.page-sub   { color: var(--muted); font-size: .85rem; margin-top: .2rem; }
.back-link  { color: var(--muted); font-size: .85rem; }
.back-link:hover { color: var(--text); }

/* ═══════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════ */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--border);
}
.card-title { font-weight: 600; font-size: .9rem; }
.card-link  { font-size: .8rem; color: var(--muted); }
.card-link:hover { color: var(--accent); }
.card-body  { padding: 1rem 1.2rem; }

/* ═══════════════════════════════════════════
   KPI ROW
   ═══════════════════════════════════════════ */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.kpi-card {
  background: linear-gradient(160deg, var(--bg-card-2), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: transform .18s, border-color .18s;
}
.kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  opacity: .6;
}
.kpi-card:hover { transform: translateY(-2px); border-color: var(--border-light); }
.kpi-label { font-size: .72rem; color: var(--muted); text-transform: uppercase;
             letter-spacing: .08em; margin-bottom: .45rem; font-weight: 500; }
.kpi-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -.6px; }
.kpi-unit  { font-size: .9rem; font-weight: 400; color: var(--muted); }

/* ═══════════════════════════════════════════
   GRID
   ═══════════════════════════════════════════ */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */

.btn-primary, .btn-accent, .btn-danger {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .62rem 1.25rem; border-radius: var(--radius-sm);
  font-size: .85rem; font-weight: 700; cursor: pointer;
  border: none; transition: all .16s; line-height: 1;
}
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(52,232,158,.22); }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-accent  { background: var(--gold); color: #000; }
.btn-accent:hover  { background: #d48c10; }
.btn-danger  { background: var(--danger); color: #fff; }
.btn-danger:hover  { background: #dc2626; }

.btn-full { width: 100%; justify-content: center; }
.btn-lg   { padding: .75rem 1.6rem; font-size: .95rem; }
.btn-sm   { padding: .4rem .8rem; font-size: .78rem; }
.btn-xs   { padding: .28rem .6rem; font-size: .72rem; }

/* ═══════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════ */

.form-group { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.form-group label { font-size: .78rem; color: var(--muted); font-weight: 500; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

input[type=text], input[type=password], input[type=number],
input[type=email], select, textarea {
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text); padding: .6rem .85rem;
  border-radius: var(--radius-sm); font-size: .875rem;
  font-family: inherit; width: 100%; outline: none;
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
}
input::placeholder { color: var(--dim); }
select option { background: #FFFFFF; color: #15271C; }

.search-input {
  background: var(--bg-input); border: 1px solid var(--border);
  padding: .55rem 1rem; border-radius: 20px; font-size: .85rem;
  color: var(--text); outline: none; min-width: 240px;
}
.search-input:focus { border-color: var(--accent); }

.search-row { margin-bottom: 1rem; }

/* ═══════════════════════════════════════════
   AUTH PAGES
   ═══════════════════════════════════════════ */

.auth-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.auth-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2.5rem 2rem;
  width: 100%; max-width: 380px; box-shadow: var(--shadow);
}
.auth-logo {
  font-size: 1.4rem; font-weight: 800; text-align: center;
  margin-bottom: 1.5rem; letter-spacing: -.4px;
}
.auth-logo span { color: var(--text); }
.auth-title {
  font-size: 1.45rem; font-weight: 800; margin-bottom: .2rem; text-align: center;
  font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -.4px;
}
.auth-sub { text-align: center; color: var(--muted); font-size: .9rem; margin-bottom: 1.5rem; }

.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: .75rem; border-radius: var(--radius-sm);
  background: #fff; border: 1px solid var(--border-light); color: #1F2937;
  font-weight: 600; font-size: .9rem; transition: all .15s;
}
.btn-google:hover { background: #F7F9F3; border-color: var(--dim); text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.08); }

.auth-divider {
  display: flex; align-items: center; gap: .8rem; margin: 1.3rem 0;
  color: var(--dim); font-size: .78rem;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.captcha-row { display: flex; align-items: center; gap: .8rem; }
.captcha-q {
  font-weight: 800; font-size: 1.05rem; background: var(--accent-dim);
  color: var(--accent); padding: .55rem .9rem; border-radius: var(--radius-sm);
  white-space: nowrap; font-family: 'Bricolage Grotesque', sans-serif;
}
.captcha-input { flex: 1; }
.auth-link {
  text-align: center; font-size: .82rem; color: var(--muted); margin-top: 1.2rem;
}

/* SETUP PAGE */
.setup-wrap {
  max-width: 760px; margin: 0 auto; padding: 2rem;
  min-height: 100vh; display: flex; flex-direction: column;
  justify-content: center;
}
.setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1.5rem; margin-top: 1.5rem;
}
.setup-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.8rem 1.5rem;
}
.setup-icon { font-size: 2rem; margin-bottom: .8rem; }
.setup-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }
.setup-card p  { color: var(--muted); font-size: .84rem; margin-bottom: 1.2rem; }

/* ═══════════════════════════════════════════
   PLAYER ROWS & CARDS
   ═══════════════════════════════════════════ */

.player-row {
  display: flex; align-items: center; gap: .8rem;
  padding: .55rem 0; border-bottom: 1px solid var(--border);
  color: var(--text); text-decoration: none;
}
.player-row:last-child { border-bottom: none; }
.player-row:hover { color: var(--accent); text-decoration: none; }
.player-flag { font-size: 1.1rem; }
.player-name { flex: 1; font-weight: 500; }
.player-pts  { font-weight: 700; color: var(--accent); }

/* PLAYERS GRID (rosa) */
.players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.player-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem;
  cursor: pointer; transition: all .2s; user-select: none;
  opacity: .55;
}
.player-card.playing {
  border-color: var(--accent); opacity: 1;
  background: linear-gradient(135deg, #0F1219 0%, rgba(74,222,128,.05) 100%);
}
.player-card:hover { border-color: var(--border-light); opacity: 1; }

.pc-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.pc-flag   { font-size: 1.2rem; }
.pc-status-dot {
  width: 7px; height: 7px; border-radius: 50%; margin-left: auto;
  background: var(--dim);
}
.player-card.playing .pc-status-dot { background: var(--accent); }

.pc-name    { font-weight: 700; font-size: .95rem; margin-bottom: .2rem; }
.pc-country { font-size: .75rem; color: var(--muted); margin-bottom: .8rem; }

.pc-stats { display: flex; gap: 1rem; margin-bottom: .8rem; }
.pc-stat-val { font-size: 1.1rem; font-weight: 700; }
.pc-stat-lbl { font-size: .68rem; color: var(--dim); text-transform: uppercase; }

.pc-specialist { margin-bottom: .6rem; }
.specialist-select {
  font-size: .73rem; padding: .3rem .5rem;
  background: var(--bg-input); border: 1px solid var(--border-light);
  color: var(--muted); border-radius: var(--radius-sm); width: 100%;
}
.pc-detail { font-size: .75rem; color: var(--muted); }

/* TIER CHIPS */
.tier-chip {
  font-size: .68rem; font-weight: 600; padding: .2rem .55rem;
  border-radius: 20px; text-transform: uppercase; letter-spacing: .04em;
}
.tier-chip.top10    { background: rgba(245,166,35,.15); color: var(--gold); }
.tier-chip.top50    { background: var(--accent-dim); color: var(--accent); }
.tier-chip.top100   { background: rgba(96,165,250,.12); color: var(--blue); }
.tier-chip.top250   { background: rgba(167,139,250,.13); color: #a78bfa; }
.tier-chip.top500   { background: rgba(255,255,255,.07); color: var(--muted); }
.tier-chip.fuoritop500 { background: rgba(255,255,255,.05); color: var(--muted); }
.tier-chip.challenger { background: rgba(255,255,255,.06); color: var(--muted); }

/* ═══════════════════════════════════════════
   STANDINGS
   ═══════════════════════════════════════════ */

.standing-row {
  display: flex; align-items: center; gap: .8rem;
  padding: .5rem 0; border-bottom: 1px solid var(--border);
}
.standing-row:last-child { border-bottom: none; }
.standing-row.is-me { background: var(--accent-dim);
  margin: 0 -1.2rem; padding-left: 1.2rem; padding-right: 1.2rem; }
.standing-rank { font-size: .75rem; color: var(--dim); width: 18px; }
.standing-team { flex: 1; font-weight: 500; }
.standing-pts  { font-weight: 700; }

.standings-table .row-me td { background: var(--accent-dim); }
.pts-cell  { font-weight: 700; font-size: 1rem; }
.team-cell { font-weight: 600; }
.team-name-lg { margin-right: .5rem; }
.you-badge {
  font-size: .65rem; background: var(--accent); color: #000;
  padding: .1rem .4rem; border-radius: 20px; font-weight: 700;
  vertical-align: middle;
}
.medal { font-size: 1.1rem; }
.rank-num { color: var(--muted); font-size: .85rem; }

/* ═══════════════════════════════════════════
   ASTA PAGE
   ═══════════════════════════════════════════ */

.asta-layout { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; }
.asta-main   {}
.asta-side   { display: flex; flex-direction: column; gap: 1rem; }

.auction-card { padding: 1.5rem; position: relative; }
.auction-live-badge {
  display: inline-block; background: rgba(248,113,113,.15); color: var(--danger);
  font-size: .7rem; font-weight: 700; padding: .2rem .6rem;
  border-radius: 20px; margin-bottom: 1rem; letter-spacing: .04em;
}
.auction-player { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.auction-flag   { font-size: 2.5rem; }
.auction-name   { font-size: 1.3rem; font-weight: 800; }
.auction-meta   { color: var(--muted); font-size: .82rem; margin-top: .2rem; }
.auction-base   { font-size: .75rem; color: var(--dim); margin-top: .3rem; }

.auction-status {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1rem 1.2rem; margin-bottom: 1.2rem;
}
.bid-label  { font-size: .72rem; color: var(--muted); text-transform: uppercase; margin-bottom: .3rem; }
.bid-amount { font-size: 2rem; font-weight: 800; color: var(--accent); }
.bid-by     { font-size: .78rem; color: var(--muted); }
.bid-timer  { font-size: .8rem; color: var(--gold); text-align: right; }

.bid-form { display: flex; gap: .75rem; }
.bid-input { max-width: 130px; font-size: 1rem; font-weight: 700; }

.auction-waiting {
  padding: 3rem; text-align: center;
}
.waiting-icon { font-size: 3rem; margin-bottom: 1rem; }
.waiting-text { font-size: 1.2rem; font-weight: 700; margin-bottom: .5rem; }
.waiting-sub  { color: var(--muted); }

.queue-list { max-height: 350px; overflow-y: auto; }
.queue-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 0; border-bottom: 1px solid var(--border);
}
.queue-item:last-child { border-bottom: none; }
.queue-flag { font-size: 1rem; }
.queue-name { flex: 1; font-size: .85rem; font-weight: 500; }
.queue-rank { font-size: .75rem; color: var(--muted); }

.completed-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem 0; border-bottom: 1px solid var(--border);
  font-size: .82rem;
}
.completed-item:last-child { border-bottom: none; }
.completed-flag { font-size: .9rem; }
.completed-name { flex: 1; }
.completed-winner { color: var(--muted); }
.completed-bid  { font-weight: 700; }

.bid-item {
  display: flex; gap: .6rem; padding: .4rem 0;
  border-bottom: 1px solid var(--border); font-size: .82rem;
}
.bid-item:last-child { border-bottom: none; }
.bid-item.my-bid { color: var(--accent); }
.bid-user       { flex: 1; font-weight: 500; }
.bid-amount-sm  { font-weight: 700; }
.bid-time       { color: var(--dim); }

/* ═══════════════════════════════════════════
   MERCATO
   ═══════════════════════════════════════════ */

.tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  background: none; border: none; color: var(--muted); font-size: .875rem;
  font-weight: 500; padding: .6rem 1rem .8rem; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: inherit; transition: all .15s; position: relative;
  white-space: nowrap; flex: 0 0 auto;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--danger); color: #fff; font-size: .62rem;
  width: 16px; height: 16px; border-radius: 50%; margin-left: .35rem;
  font-weight: 700; vertical-align: middle;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

.offer-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1rem 1.2rem;
  margin-bottom: .75rem; display: flex;
  align-items: center; gap: 1rem; flex-wrap: wrap;
}
.offer-card.outgoing { border-color: var(--border-light); opacity: .8; }
.offer-from   { font-size: .78rem; color: var(--muted); min-width: 120px; }
.offer-detail { flex: 1; font-size: .88rem; }
.offer-actions { display: flex; gap: .5rem; }
.offer-status { font-size: .75rem; color: var(--dim); }

.trade-form .card-body { display: flex; flex-direction: column; gap: 1rem; }

/* ═══════════════════════════════════════════
   CLASSIFICA
   ═══════════════════════════════════════════ */

.league-code-box {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .5rem 1rem;
  font-size: .82rem; color: var(--muted);
}
.info-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem;
}
.info-item { }
.info-label { font-size: .72rem; color: var(--muted); text-transform: uppercase;
              letter-spacing: .06em; margin-bottom: .3rem; }
.info-val   { font-weight: 600; }
.status-chip {
  font-size: .72rem; padding: .2rem .55rem; border-radius: 20px; font-weight: 600;
}
.status-setup  { background: var(--gold-dim); color: var(--gold); }
.status-auction{ background: var(--danger-dim); color: var(--danger); }
.status-active { background: var(--accent-dim); color: var(--accent); }
.status-ended  { background: rgba(255,255,255,.06); color: var(--muted); }

/* ═══════════════════════════════════════════
   PROFILO GIOCATORE
   ═══════════════════════════════════════════ */

.player-hero {
  display: flex; align-items: flex-start; gap: 1.5rem;
  padding: 1.5rem; margin-bottom: 1.5rem;
}
.hero-flag   { font-size: 4rem; line-height: 1; flex-shrink: 0; }
.hero-avatar-wrap { position: relative; flex-shrink: 0; }
.hero-avatar-flag { position: absolute; bottom: 2px; right: -2px; font-size: 1.6rem;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.hero-info   { flex: 1; }
.hero-name   { font-size: 1.6rem; font-weight: 800; margin-bottom: .4rem; }
.hero-meta   { display: flex; align-items: center; gap: .6rem;
               color: var(--muted); font-size: .85rem; flex-wrap: wrap; }
.hero-sep    { color: var(--dim); }
.hero-stats  { display: flex; gap: 2rem; margin-top: 1rem; }
.hs-val { font-size: 1.4rem; font-weight: 800; }
.hs-lbl { font-size: .7rem; color: var(--muted); text-transform: uppercase; }
.hero-owner  { text-align: right; flex-shrink: 0; }
.owner-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; margin-bottom: .3rem; }
.owner-name  { font-weight: 700; }
.owner-jolly { font-size: .78rem; color: var(--gold); margin-top: .3rem; }

.result-win  { color: var(--accent); font-weight: 600; }
.result-loss { color: var(--danger); }
.tournament-name { font-weight: 500; }

.upcoming-row {
  padding: .7rem 0; border-bottom: 1px solid var(--border);
}
.upcoming-row:last-child { border-bottom: none; }
.upcoming-tourn { font-weight: 600; font-size: .88rem; }
.upcoming-vs    { font-size: .82rem; color: var(--muted); margin-top: .2rem; }

/* ═══════════════════════════════════════════
   STATISTICHE
   ═══════════════════════════════════════════ */

.tier-stat-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .5rem 0; border-bottom: 1px solid var(--border);
}
.tier-stat-row:last-child { border-bottom: none; }

/* Trofei */
.trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; }
.trophy { display: flex; gap: .8rem; align-items: center; padding: .8rem .9rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card-2); opacity: .55; filter: grayscale(.7); transition: all .2s; }
.trophy.earned { opacity: 1; filter: none; border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(17,152,92,.12); }
.trophy.earned:hover { transform: translateY(-3px); }
.trophy-icon { font-size: 1.9rem; flex-shrink: 0; }
.trophy.earned .trophy-icon { animation: pop-in .5s; }
.trophy-title { font-weight: 700; font-size: .9rem; }
.trophy-check { color: var(--accent); }
.trophy-desc { font-size: .76rem; color: var(--muted); line-height: 1.3; }
.trophy-bar { height: 5px; background: var(--border); border-radius: 3px; margin-top: .4rem; overflow: hidden; }
.trophy-bar span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

/* Impostazioni */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.3rem; align-items: start; }
.form-divider { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--dim); margin: .4rem 0 .8rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.settings-stat { display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 0; border-bottom: 1px solid var(--border); font-size: .88rem; color: var(--muted); }
.settings-stat:last-of-type { margin-bottom: 1rem; }
.commish-tag { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(124,92,230,.14); color: var(--purple); padding: .15rem .5rem; border-radius: 20px; vertical-align: middle; }
.version-tag { text-align: center; color: var(--dim); font-size: .78rem; margin-top: 1.5rem; }

/* Toggle tema */
.theme-row { display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: .9rem; }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; cursor: pointer; background: var(--border-light);
  border-radius: 26px; transition: .2s; }
.slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* Albo titoli */
.title-row { display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 0; border-bottom: 1px solid var(--border); }
.title-row:last-child { border-bottom: none; }
.title-team { font-weight: 700; font-size: .92rem; }
.title-count { font-size: .9rem; color: var(--muted); }
.danger-zone { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px dashed var(--danger); }
.danger-title { font-weight: 700; color: var(--danger); font-size: .85rem; margin-bottom: .3rem; }
.danger-zone p { margin-bottom: .8rem; }

/* Notizie */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.news-card { display: block; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: transform .18s, border-color .18s, box-shadow .18s;
  color: var(--text); }
.news-card:hover { transform: translateY(-3px); border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(20,45,30,.12); text-decoration: none; }
.news-body { padding: 1.1rem 1.2rem; }
.news-title { font-weight: 700; font-size: 1rem; line-height: 1.35; margin-bottom: .5rem; }
.news-desc { color: var(--muted); font-size: .85rem; line-height: 1.5; margin-bottom: .9rem; }
.news-meta { display: flex; align-items: center; justify-content: space-between;
  font-size: .76rem; color: var(--dim); }
.news-go { color: var(--accent); font-weight: 700; }
.news-source { text-align: center; color: var(--dim); font-size: .78rem; margin-top: 1.4rem; }

/* ── Legale ── */
.legal-body { background: linear-gradient(180deg, #F4F8EF, #EAF1E0); min-height: 100vh; }
.legal-nav { display: flex; align-items: center; justify-content: space-between;
  max-width: 800px; margin: 0 auto; padding: 1.2rem 1.5rem; }
.legal-logo { display: flex; align-items: center; gap: .5rem; }
.legal-logo:hover { text-decoration: none; }
.legal-links { display: flex; gap: 1rem; font-size: .9rem; font-weight: 600; }
.legal-links a.active { color: var(--accent); }
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 1rem 1.5rem 4rem; }
.legal-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 2rem; font-weight: 800;
  letter-spacing: -.6px; margin-bottom: .3rem; }
.legal-updated { color: var(--muted); font-size: .85rem; margin-bottom: 2rem; }
.legal-wrap h2 { font-size: 1.15rem; font-weight: 700; margin: 1.8rem 0 .6rem; color: var(--text); }
.legal-wrap p, .legal-wrap li { color: #2C3A30; font-size: .95rem; line-height: 1.7; }
.legal-wrap ul { padding-left: 1.3rem; margin: .5rem 0; }
.legal-wrap li { margin-bottom: .4rem; }
.legal-back { margin-top: 2.5rem; }
.legal-back a { font-weight: 600; }

.lp-footer-legal { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.lp-footer-legal a { color: var(--muted); font-weight: 600; font-size: .85rem; }
.lp-footer-legal a:hover { color: var(--ball); }

/* ── Cookie banner ── */
.cookie-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 500;
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: #12271D; color: #EAF0EC; border: 1px solid var(--court);
  border-radius: 14px; padding: .9rem 1.2rem; box-shadow: 0 12px 30px rgba(0,0,0,.3);
  font-size: .85rem;
}
.cookie-banner a { color: var(--ball); font-weight: 600; }
.cookie-banner button {
  margin-left: auto; background: var(--ball); color: #12271D; border: none;
  font-weight: 700; padding: .5rem 1.1rem; border-radius: 30px; cursor: pointer; font-family: inherit;
}
.cookie-banner button:hover { filter: brightness(1.05); }

/* ── Tour badge (ATP/WTA) ── */
.tour-badge { display: inline-block; font-size: .65rem; font-weight: 800; letter-spacing: .04em;
  padding: .12rem .45rem; border-radius: 5px; vertical-align: middle; }
.tour-atp { background: rgba(91,157,249,.16); color: var(--blue); }
.tour-wta { background: rgba(214,90,168,.16); color: #c44d96; }

/* Filtro ATP/WTA */
.tour-filter { display: flex; gap: .4rem; margin-bottom: .7rem; }
.tf-btn { flex: 1; padding: .5rem; border-radius: 30px; border: 1px solid var(--border-light);
  background: var(--bg-card); color: var(--muted); font-weight: 700; font-size: .82rem;
  cursor: pointer; font-family: inherit; transition: all .15s; }
.tf-btn:hover { border-color: var(--accent); }
.tf-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Prossimi match (dashboard) */
.up-row { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: .8rem;
  padding: .65rem 1.1rem; border-bottom: 1px solid var(--border); font-size: .86rem; }
.up-row:last-child { border-bottom: none; }
.up-when { font-weight: 700; color: var(--muted); font-size: .8rem; }
.up-players { font-weight: 600; }
.up-tourn { text-align: right; }
@media (max-width: 600px) { .up-row { grid-template-columns: 70px 1fr; } .up-tourn { display: none; } }

/* ── Match reali (scheda giocatore) ── */
.real-match { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .6rem 0; border-bottom: 1px solid var(--border); }
.real-match:last-child { border-bottom: none; }
.rm-tourn { font-weight: 600; font-size: .88rem; }
.rm-opp { font-size: .82rem; color: var(--muted); margin-top: .15rem; }
.rm-date { font-size: .78rem; color: var(--muted); text-align: right; white-space: nowrap; }
.result-win { color: var(--accent); font-weight: 700; font-size: .82rem; }
.result-loss { color: var(--danger); font-weight: 700; font-size: .82rem; }

/* ── Calendario ── */
.cal-day { margin-bottom: 1.4rem; }
.cal-date { font-weight: 800; font-size: 1rem; text-transform: capitalize; margin-bottom: .6rem;
  color: var(--accent); }
.cal-matches { display: flex; flex-direction: column; gap: .4rem; }
.cal-match { display: grid; grid-template-columns: 52px 1fr auto auto; align-items: center; gap: .8rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .55rem .8rem; font-size: .86rem; }
.cal-mine { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(17,152,92,.18); background: var(--accent-dim); }
.cal-time { font-weight: 700; color: var(--muted); font-size: .82rem; }
.cal-players { font-weight: 600; }
.cal-vs { color: var(--dim); font-weight: 400; margin: 0 .3rem; }
.cal-hl { color: var(--accent); font-weight: 800; }
.cal-tourn { color: var(--muted); font-size: .78rem; text-align: right; }
.cal-round { color: var(--dim); }
@media (max-width: 640px) {
  .cal-match { grid-template-columns: 44px 1fr; }
  .cal-tourn, .cal-match .tour-badge { display: none; }
}

/* ── Partecipanti / ruoli ── */
.settings-wide { grid-column: 1 / -1; }
.role-badge { font-size: .68rem; font-weight: 700; padding: .15rem .5rem; border-radius: 20px; }
.role-commish { background: rgba(124,92,230,.16); color: var(--purple); }
.role-admin { background: var(--accent-dim); color: var(--accent); }
.budget-edit { padding: .3rem .4rem; font-size: .82rem; }
.row-actions { display: flex; gap: .4rem; }

/* ── Feed "come hai fatto punti" ── */
.points-feed { display: flex; flex-direction: column; }
.pf-row { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--border); }
.pf-row:last-child { border-bottom: none; }
.pf-main { flex: 1; min-width: 0; }
.pf-top { display: flex; align-items: center; gap: .6rem; }
.pf-name { font-weight: 700; font-size: .9rem; }
.pf-result { font-size: .76rem; font-weight: 700; }
.pf-tourn { font-size: .76rem; color: var(--muted); margin: .1rem 0 .35rem; }
.pf-parts { display: flex; flex-wrap: wrap; gap: .3rem; }
.pf-chip { font-size: .68rem; background: var(--bg-hover); color: var(--muted);
  padding: .12rem .5rem; border-radius: 20px; white-space: nowrap; }
.pf-pts { font-size: 1.3rem; font-weight: 800; font-family: 'Bricolage Grotesque', sans-serif;
  min-width: 48px; text-align: right; }

/* ── Blocco/scadenza formazione ── */
.lineup-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.week-select { width: auto; padding: .5rem .8rem; font-weight: 600; font-size: .85rem;
  background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 30px; }
.deadline-banner { border-left: 3px solid var(--gold); }
body.lineup-locked .fc-player { cursor: default; }
body.lineup-locked .fc-player:hover { transform: none; box-shadow: 0 4px 12px rgba(20,45,30,.12); border-color: var(--border-light); }
body.lineup-locked .fc-specialist { pointer-events: auto; }
.tier-stat-row .tier-chip { flex: 1; }
.jolly-badge { color: var(--gold); font-size: .8rem; }

/* ═══════════════════════════════════════════
   DATA TABLE
   ═══════════════════════════════════════════ */

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.data-table th {
  text-align: left; padding: .7rem 1rem;
  font-size: .72rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--border); background: rgba(255,255,255,.02);
}
.data-table td {
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--border);
}
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody tr:last-child td { border-bottom: none; }
.player-link { color: var(--text); font-weight: 500; }
.player-link:hover { color: var(--accent); text-decoration: none; }
.player-cell { display: inline-flex; align-items: center; gap: .6rem; }

/* ═══════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════ */

.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
  z-index: 200; display: flex; align-items: center; justify-content: center;
}
.modal-box {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); width: 100%; max-width: 480px;
  max-height: 80vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow); padding: 1.2rem;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; margin-bottom: .8rem;
}
.modal-head button {
  background: none; border: none; color: var(--muted);
  font-size: 1.1rem; cursor: pointer;
}
.modal-list { overflow-y: auto; flex: 1; margin-top: .6rem; }
.modal-player {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .85rem;
}
.modal-player:last-child { border-bottom: none; }
.modal-player span:first-child { flex: 1; }
.modal-rank { color: var(--muted); font-size: .78rem; }

/* ═══════════════════════════════════════════
   MISC
   ═══════════════════════════════════════════ */

.accent  { color: var(--accent); }
.gold    { color: var(--gold); }
.danger  { color: var(--danger); }
.fw-600  { font-weight: 600; }
.muted-sm{ color: var(--muted); font-size: .8rem; }

.empty-state {
  color: var(--muted); font-size: .85rem; text-align: center;
  padding: .5rem 0;
}
.empty-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 3rem; text-align: center;
  color: var(--muted);
}
.empty-card p { margin-bottom: 1rem; }

.alert {
  padding: .75rem 1rem; border-radius: var(--radius-sm);
  margin-bottom: 1rem; font-size: .85rem;
}
.alert-danger  { background: var(--danger-dim); color: var(--danger); border: 1px solid var(--danger); }
.alert-success { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent); }
.alert-info    { background: rgba(96,165,250,.12); color: var(--blue); border: 1px solid var(--blue); }

.info-banner {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .7rem 1rem;
  font-size: .84rem; color: var(--muted); margin-bottom: 1rem;
}
.playing-count { font-weight: 700; color: var(--text); font-size: .9rem; }

.badge-live {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--danger-dim); color: var(--danger);
  border: 1px solid var(--danger); border-radius: 20px;
  padding: .35rem .85rem; font-size: .78rem; font-weight: 700;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .6; }
}

.chart-wrap { position: relative; width: 100%; height: 220px; }

.section-title {
  font-size: .8rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: .75rem;
}

.league-code-box { font-size: .82rem; }

/* Toast */
#toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  display: flex; flex-direction: column; gap: .5rem; z-index: 999;
}
.toast {
  background: #1a1d27; border: 1px solid var(--border);
  color: var(--text); padding: .7rem 1.1rem; border-radius: var(--radius-sm);
  font-size: .84rem; box-shadow: var(--shadow);
  animation: slideIn .2s ease;
  max-width: 300px;
}
.toast-error  { border-color: var(--danger); color: var(--danger); }
.toast-success{ border-color: var(--accent); }
@keyframes slideIn {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }

/* ═══════════════════════════════════════════
   v1.0.2 — FORMAZIONE (drag & drop)
   ═══════════════════════════════════════════ */

.court-head-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .7rem;
}
.fh-title { font-weight: 800; font-size: 1rem; }
.fh-count { font-size: .8rem; font-weight: 700; color: var(--muted); }

/* ── CAMPO DA TENNIS ── */
.court-section { margin-bottom: 1.6rem; }
.tennis-court {
  position: relative;
  background: linear-gradient(160deg, #2FA06E, #277E58);
  border: 4px solid #fff;
  border-radius: 18px;
  padding: 1.4rem;
  box-shadow: 0 12px 34px rgba(20,45,30,.25), inset 0 0 0 2px rgba(255,255,255,.15);
  overflow: hidden;
}
.court-line { position: absolute; left: 6%; right: 6%; height: 2px; background: rgba(255,255,255,.55); }
.court-baseline-top { top: 14%; }
.court-baseline-bot { bottom: 14%; }
.court-net-line { position: absolute; left: 0; right: 0; top: 50%; height: 3px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 10px, rgba(255,255,255,.25) 10px 20px); }
.court-center { position: absolute; top: 14%; bottom: 14%; left: 50%; width: 2px;
  background: rgba(255,255,255,.4); }

.court-zone {
  position: relative; z-index: 2; min-height: 240px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem 1rem; align-content: center; justify-items: center;
  max-width: 460px; margin: 0 auto;
  transition: background .15s; border-radius: 12px;
}
.court-zone.drag-over { background: rgba(255,255,255,.12); }
.court-hint { grid-column: 1 / -1; color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.55); }
@media (max-width: 560px) { .court-zone { grid-template-columns: repeat(2, 1fr); max-width: 320px; } }

/* ── PANCHINA ── */
.bench-section { }
.bench-row {
  display: flex; flex-wrap: nowrap; gap: .7rem; overflow-x: auto;
  padding: .9rem; background: var(--bg-card-2); border: 1px solid var(--border);
  border-radius: var(--radius); min-height: 130px; align-items: center;
  transition: background .15s;
}
.bench-row.drag-over { background: var(--gold-dim); }

.dropzone-hint {
  text-align: center; color: var(--dim); font-size: .82rem;
  padding: .9rem; border: 1.5px dashed var(--border-light);
  border-radius: var(--radius-sm); align-self: center; width: 100%;
}
.dropzone .fc-player ~ .dropzone-hint,
.dropzone .bench-order-wrap ~ .dropzone-hint { display: none; }

/* ── TESSERA GIOCATORE (verticale, da campo) ── */
.fc-player {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  width: 118px; background: #fff; border: 1px solid var(--border-light);
  border-radius: 14px; padding: .7rem .5rem .5rem; text-align: center;
  cursor: grab; transition: transform .15s, box-shadow .15s, border-color .15s;
  box-shadow: 0 4px 12px rgba(20,45,30,.12);
}
.fc-player:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--glow); }
.fc-player.dragging { opacity: .4; cursor: grabbing; }
.fc-drag-handle { display: none; }
.fc-avatar-wrap { position: relative; }
.fc-avatar-flag { position: absolute; bottom: -2px; right: -4px; font-size: .9rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.fc-body { width: 100%; }
.fc-name { font-weight: 700; font-size: .82rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.fc-meta { font-size: .7rem; color: var(--muted); display: flex;
  align-items: center; justify-content: center; gap: .3rem; margin-top: .1rem; }
.fc-jolly { font-size: .72rem; }
.fc-specialist {
  font-size: .68rem; padding: .2rem .3rem; width: 100%; margin-top: .15rem;
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--muted); border-radius: 6px;
}
.tier-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.tier-dot.top10 { background: var(--gold); }
.tier-dot.top50 { background: var(--accent); }
.tier-dot.top100 { background: var(--blue); }
.tier-dot.challenger { background: var(--dim); }

.bench-order-wrap { position: relative; flex-shrink: 0; }
.bench-num {
  position: absolute; top: -6px; left: -6px; z-index: 3;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold); color: #2A2300;
  border-radius: 50%; font-size: .72rem; font-weight: 800;
  box-shadow: 0 2px 5px rgba(0,0,0,.25);
}

/* ═══════════════════════════════════════════
   v1.0.2 — MERCATO status & commissioner bar
   ═══════════════════════════════════════════ */

.market-status {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border-radius: 30px;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
.market-status .ms-dot { width: 8px; height: 8px; border-radius: 50%; }
.market-status.open { background: var(--accent-dim); color: var(--accent);
  border: 1px solid rgba(52,232,158,.35); }
.market-status.open .ms-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pulse 2s infinite; }
.market-status.closed { background: rgba(255,255,255,.04); color: var(--muted);
  border: 1px solid var(--border); }
.market-status.closed .ms-dot { background: var(--dim); }

.commish-bar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(167,139,250,.08), transparent);
  border: 1px solid var(--border); border-left: 3px solid var(--purple);
  border-radius: var(--radius-sm); padding: .8rem 1.1rem; margin-bottom: 1rem;
}
.commish-label { font-weight: 700; font-size: .82rem; color: var(--purple); }
.commish-select {
  width: auto; padding: .4rem .7rem; font-size: .8rem;
  background: var(--bg-input); border: 1px solid var(--border-light);
  color: var(--text); border-radius: 6px;
}
.commish-hint { font-size: .75rem; color: var(--muted); margin-left: auto; }

/* ═══════════════════════════════════════════
   v1.0.2 — refinements
   ═══════════════════════════════════════════ */

.card {
  background: linear-gradient(165deg, var(--bg-card-2), var(--bg-card));
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.page-title { color: var(--text); }
.nav-item.active {
  background: linear-gradient(90deg, var(--accent-dim), transparent);
}
.auth-card, .setup-card {
  background: linear-gradient(165deg, var(--bg-card-2), var(--bg-card));
}
.auth-logo span {
  background: linear-gradient(90deg, #fff, var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.setup-card { transition: transform .18s, border-color .18s; }
.setup-card:hover { transform: translateY(-3px); border-color: var(--border-light); }
.tier-chip.atp500 { background: rgba(67,185,140,.16); color: var(--court-light); }
.tier-chip.atp250 { background: rgba(255,255,255,.06); color: var(--muted); }

/* ═══════════════════════════════════════════════════════════
   v1.0.3 — PLAYER AVATARS (caricature)
   ═══════════════════════════════════════════════════════════ */

.avatar {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--court-light), var(--court-deep));
  border: 2px solid var(--border-light);
  object-fit: cover; flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.avatar-sm { width: 34px; height: 34px; }
.avatar-md { width: 46px; height: 46px; }
.avatar-lg { width: 88px; height: 88px; border-width: 3px; }
.avatar-ring {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(220,246,59,.18), 0 3px 10px rgba(0,0,0,.3);
}

/* ═══════════════════════════════════════════════════════════
   v1.0.3 — LANDING PAGE
   ═══════════════════════════════════════════════════════════ */

.landing-body {
  background:
    radial-gradient(1100px 700px at 85% -5%, rgba(220,246,59,.16), transparent 55%),
    radial-gradient(900px 600px at 0% 100%, rgba(47,143,107,.22), transparent 55%),
    linear-gradient(180deg, #F3F7EC 0%, #EAF1E0 100%);
  overflow-x: hidden;
}

/* NAV */
.lp-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem 3rem; position: relative; z-index: 10;
  max-width: 1240px; margin: 0 auto;
}
.lp-logo { display: flex; align-items: center; gap: .6rem; }
.lp-ball { font-size: 1.7rem; animation: spin-ball 8s linear infinite; display: inline-block; }
.lp-logo-text {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 1.4rem; letter-spacing: -.5px; color: var(--text);
}
.lp-mascot { height: 48px; width: auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
.lp-nav-actions { display: flex; align-items: center; gap: .8rem; }
.lp-btn-ghost {
  color: var(--text); font-weight: 600; font-size: .9rem;
  padding: .6rem 1.1rem; border-radius: 30px; transition: all .18s;
  white-space: nowrap;
}
.lp-btn-ghost:hover { background: rgba(20,45,30,.06); text-decoration: none; }
.lp-btn-fill {
  background: var(--ball); color: #12271D; font-weight: 700; font-size: .9rem;
  padding: .65rem 1.35rem; border-radius: 30px; transition: all .18s;
  box-shadow: 0 4px 16px rgba(220,246,59,.3);
}
.lp-btn-fill:hover { transform: translateY(-2px); filter: brightness(1.06); text-decoration: none;
  box-shadow: 0 8px 22px rgba(220,246,59,.4); }

/* COURT DECOR */
.court-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; opacity: .5; }
.court-line { position: absolute; background: rgba(244,248,238,.07); }
.cl-1 { top: 0; bottom: 0; left: 28%; width: 2px; transform: skewX(-18deg); }
.cl-2 { top: 0; bottom: 0; right: 28%; width: 2px; transform: skewX(18deg); }
.court-net { position: absolute; top: 64%; left: 0; right: 0; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(244,248,238,.12) 0 8px, transparent 8px 16px); }

/* FLOATING BALLS */
.floating-balls { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.fb { position: absolute; font-size: 2rem; opacity: .25; filter: blur(.3px); }
.fb-1 { top: 22%; left: 8%;  animation: float-y 7s ease-in-out infinite; }
.fb-2 { top: 58%; right: 12%; font-size: 2.6rem; animation: float-y 9s ease-in-out infinite 1s; }
.fb-3 { top: 78%; left: 18%; font-size: 1.5rem; animation: float-y 6s ease-in-out infinite .5s; }

/* HERO */
.lp-hero { position: relative; z-index: 5; padding: 3rem 2rem 5rem; }
.lp-hero-inner { max-width: 880px; margin: 0 auto; text-align: center; }
.lp-hero-grid {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center;
}
.lp-hero-text { text-align: left; }

/* Payoff */
.lp-payoff {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem); font-weight: 800;
  letter-spacing: .5px; margin: .2rem 0 1.2rem;
  background: linear-gradient(90deg, var(--ball), var(--court-light));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: fade-up .7s ease .15s both;
}

/* Mascot hero */
.lp-hero-mascot { position: relative; display: flex; align-items: center; justify-content: center;
  animation: fade-up .8s ease .25s both; }
.mascot-glow {
  position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(220,246,59,.4), transparent 65%);
  filter: blur(30px); animation: pulse 3s ease-in-out infinite;
}
.mascot-img {
  position: relative; width: 100%; max-width: 380px;
  filter: drop-shadow(0 24px 30px rgba(20,45,30,.28));
  animation: float-y 5s ease-in-out infinite;
}
.mascot-chip {
  position: absolute; background: #FFFFFF; border: 1px solid var(--border-light);
  color: var(--text); font-weight: 700; font-size: .82rem;
  padding: .5rem .85rem; border-radius: 30px; box-shadow: var(--shadow);
  white-space: nowrap;
}
.chip-1 { top: 8%; right: -6%; color: var(--gold); animation: float-y 4s ease-in-out infinite .2s; }
.chip-2 { top: 44%; left: -10%; color: var(--court); animation: float-y 5s ease-in-out infinite .8s; }
.chip-3 { bottom: 10%; right: -4%; animation: float-y 4.5s ease-in-out infinite 1.2s; }

/* Brand manifesto */
.lp-brand { max-width: 820px; margin: 0 auto; padding: 4rem 2rem; text-align: center; position: relative; z-index: 5; }
.lp-brand-inner {
  background: linear-gradient(160deg, rgba(47,143,107,.16), rgba(220,246,59,.05));
  border: 1px solid var(--border-light); border-radius: 28px; padding: 3rem 2rem;
}
.logo-badge-xl { width: 96px; height: 96px; border-radius: 24px; margin-bottom: 1.2rem; }
.lp-brand-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.8px; margin-bottom: 1rem;
}
.lp-brand-text { color: var(--muted); font-size: 1.05rem; line-height: 1.8; max-width: 620px; margin: 0 auto 1.5rem; }
.lp-brand-text strong { color: var(--text); }
.lp-brand-payoff {
  display: inline-block; font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 1.2rem; letter-spacing: .5px;
  color: #12271D; background: var(--ball); padding: .5rem 1.4rem; border-radius: 30px;
  box-shadow: 0 6px 20px rgba(220,246,59,.3);
}

/* Footer brand */
.lp-footer-brand { display: flex; align-items: center; gap: .8rem; }
.lp-footer-name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.05rem; }

@media (max-width: 820px) {
  .lp-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .lp-hero-text { text-align: center; }
  .lp-hero-mascot { order: -1; max-width: 300px; margin: 0 auto; }
  .lp-stats { justify-content: center; }
  .mascot-chip { font-size: .74rem; }
}
.lp-badge {
  display: inline-block; background: rgba(220,246,59,.12);
  color: var(--accent); border: 1px solid rgba(220,246,59,.3);
  font-size: .8rem; font-weight: 600; padding: .45rem 1rem;
  border-radius: 30px; margin-bottom: 1.8rem;
  animation: fade-up .7s ease both;
}
.lp-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 800;
  line-height: 1.04; letter-spacing: -1.5px; margin-bottom: 1.4rem;
  animation: fade-up .7s ease .1s both;
}
.hl-yellow { background: var(--ball); color: #15271C; padding: 0 .18em; border-radius: 8px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hl-green  { color: var(--court); }
.bounce-ball { display: inline-block; animation: bounce 1.6s ease-in-out infinite; }
.lp-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem); color: var(--muted);
  max-width: 640px; margin: 0 auto 2.4rem; line-height: 1.7;
  animation: fade-up .7s ease .2s both;
}
.lp-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  animation: fade-up .7s ease .3s both; }
.lp-btn-hero {
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, var(--ball-bright), var(--ball-deep));
  color: #12271D; font-weight: 800; font-size: 1.05rem;
  padding: .95rem 2rem; border-radius: 40px; transition: all .2s;
  box-shadow: 0 8px 26px rgba(220,246,59,.35);
}
.lp-btn-hero:hover { transform: translateY(-3px) scale(1.02); text-decoration: none;
  box-shadow: 0 14px 36px rgba(220,246,59,.5); }
.lp-btn-hero .arrow { transition: transform .2s; }
.lp-btn-hero:hover .arrow { transform: translateX(4px); }
.lp-btn-hero.big { font-size: 1.2rem; padding: 1.1rem 2.6rem; }
.lp-btn-hero-ghost {
  display: inline-flex; align-items: center;
  color: var(--text); font-weight: 600; font-size: 1.05rem;
  padding: .95rem 1.6rem; border-radius: 40px;
  border: 1px solid var(--border-light); transition: all .2s;
}
.lp-btn-hero-ghost:hover { background: rgba(255,255,255,.05); text-decoration: none; border-color: var(--accent); }

.lp-stats {
  display: flex; align-items: center; justify-content: center; gap: 2rem;
  margin-top: 3.5rem; animation: fade-up .7s ease .4s both;
}
.lp-stat-num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 2.2rem; font-weight: 800; color: var(--accent);
}
.lp-stat-lbl { font-size: .8rem; color: var(--muted); }
.lp-stat-divider { width: 1px; height: 38px; background: var(--border-light); }

/* SECTION TITLES */
.lp-section-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800;
  text-align: center; letter-spacing: -.8px; margin-bottom: 3rem;
}

/* FEATURES */
.lp-features { max-width: 1140px; margin: 0 auto; padding: 5rem 2rem; position: relative; z-index: 5; }
.lp-feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 1.4rem;
}
.lp-feature-card {
  background: linear-gradient(165deg, var(--bg-card), var(--bg-card-2));
  border: 1px solid var(--border); border-radius: 20px;
  padding: 2rem 1.8rem; transition: all .25s;
}
.lp-feature-card:hover {
  transform: translateY(-6px); border-color: var(--accent);
  box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(220,246,59,.3);
}
.lpf-icon {
  font-size: 2.4rem; margin-bottom: 1rem; display: inline-block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.lp-feature-card:hover .lpf-icon { animation: wiggle .5s ease; }
.lp-feature-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: .6rem; }
.lp-feature-card p { color: var(--muted); font-size: .92rem; line-height: 1.6; }

/* HOW */
.lp-how { max-width: 1040px; margin: 0 auto; padding: 3rem 2rem 5rem; position: relative; z-index: 5; }
.lp-steps { display: flex; align-items: stretch; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.lp-step {
  flex: 1; min-width: 240px; text-align: center;
  background: linear-gradient(165deg, var(--bg-card), var(--bg-card-2));
  border: 1px solid var(--border); border-radius: 20px; padding: 2rem 1.5rem;
}
.lp-step-num {
  width: 48px; height: 48px; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--ball); color: #12271D;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.4rem;
  border-radius: 50%; box-shadow: 0 6px 18px rgba(220,246,59,.35);
}
.lp-step h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; }
.lp-step p { color: var(--muted); font-size: .88rem; }
.lp-step-arrow { display: flex; align-items: center; color: var(--accent); font-size: 1.6rem; font-weight: 700; }

/* FINAL CTA */
.lp-final-cta { padding: 2rem 2rem 6rem; position: relative; z-index: 5; }
.lp-final-inner {
  max-width: 760px; margin: 0 auto; text-align: center;
  background: linear-gradient(135deg, rgba(47,143,107,.22), rgba(220,246,59,.08));
  border: 1px solid var(--border-light); border-radius: 28px;
  padding: 3.5rem 2rem;
}
.lp-final-inner h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.8px;
  margin-bottom: .8rem;
}
.lp-final-inner p { color: var(--muted); font-size: 1.05rem; margin-bottom: 2rem; }

/* FOOTER */
.lp-footer {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1140px; margin: 0 auto; padding: 2rem; border-top: 1px solid var(--border);
  font-weight: 700; position: relative; z-index: 5;
}
.lp-footer-dim { color: var(--dim); font-weight: 400; font-size: .85rem; }

/* REVEAL */
.reveal { opacity: 0; transform: translateY(28px); transition: all .6s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── KEYFRAMES ── */
@keyframes spin-ball { to { transform: rotate(360deg); } }
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes bounce { 0%,100% { transform: translateY(0); } 25% { transform: translateY(-18px); }
  50% { transform: translateY(0); } 75% { transform: translateY(-8px); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 60% { transform: rotate(10deg); } }

@media (max-width: 640px) {
  .lp-nav { padding: 1rem 1.3rem; }
  .lp-stats { gap: 1.2rem; }
  .lp-step-arrow { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   v1.0.3 — IN-APP ANIMATIONS & POLISH
   ═══════════════════════════════════════════════════════════ */

/* Staggered entrance for main content blocks */
.app-main > * { animation: app-in .5s cubic-bezier(.2,.7,.2,1) both; }
.app-main > *:nth-child(1) { animation-delay: .02s; }
.app-main > *:nth-child(2) { animation-delay: .08s; }
.app-main > *:nth-child(3) { animation-delay: .14s; }
.app-main > *:nth-child(4) { animation-delay: .20s; }
.app-main > *:nth-child(5) { animation-delay: .26s; }
@keyframes app-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* KPI cards: stagger + count emphasis */
.kpi-card { animation: pop-in .45s cubic-bezier(.2,.8,.2,1) both; }
.kpi-row .kpi-card:nth-child(1){ animation-delay:.05s; }
.kpi-row .kpi-card:nth-child(2){ animation-delay:.12s; }
.kpi-row .kpi-card:nth-child(3){ animation-delay:.19s; }
.kpi-row .kpi-card:nth-child(4){ animation-delay:.26s; }
@keyframes pop-in { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* Cards: lighter, glassy, lively hover */
.card {
  background: linear-gradient(165deg, var(--bg-card), var(--bg-card-2));
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.card:hover { border-color: var(--border-light); }
.grid-2 > .card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.3); }

/* Player rows: slide on hover */
.player-row { transition: transform .15s, color .15s; border-radius: 8px; }
.player-row:hover { transform: translateX(4px); }
.player-row .avatar { transition: transform .2s; }
.player-row:hover .avatar { transform: scale(1.1) rotate(-4deg); }

/* Buttons: shine sweep */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transition: left .5s; transform: skewX(-18deg);
}
.btn-primary:hover::after { left: 140%; }

/* Avatar entrance in cards */
.player-card .avatar, .fc-player .avatar { transition: transform .2s; }
.fc-player:hover .avatar { transform: scale(1.08); }

/* Nav items: animated active bar */
.nav-item { position: relative; }
.nav-item.active::after {
  content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--ball);
  box-shadow: 0 0 8px var(--ball); margin-right: 10px;
}

/* Result entry form */
.result-card .result-form { display: flex; flex-direction: column; gap: .2rem; }
.check-row { display: flex; align-items: center; gap: .5rem; font-size: .85rem;
  color: var(--muted); margin: .4rem 0 1rem; cursor: pointer; }
.check-row input { width: auto; }

/* KPI value gets a subtle glow when it's the accent */
.kpi-value.accent { text-shadow: 0 0 18px rgba(220,246,59,.35); }

/* Standings rows lively */
.standings-table tbody tr { transition: background .15s; }
.medal { display: inline-block; }
.standings-table tbody tr:hover .medal { animation: wiggle .5s ease; }

/* Toast refined */
.toast { backdrop-filter: blur(10px); background: rgba(255,255,255,.96); color: var(--text); border-color: var(--border-light); }

/* ═══════════════════════════════════════════════════════════
   v1.1 — ONBOARDING
   ═══════════════════════════════════════════════════════════ */
.ob-body { height: 100vh; overflow: hidden;
  background: linear-gradient(180deg, #F4F8EF 0%, #EAF1E0 100%); }
.ob-shell { height: 100vh; display: flex; flex-direction: column; max-width: 1080px; margin: 0 auto; }

.ob-top { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; }
.ob-logo { height: 40px; width: auto; filter: drop-shadow(0 3px 6px rgba(20,45,30,.2)); }
.ob-progress { flex: 1; display: flex; justify-content: center; gap: .5rem; }
.ob-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-light);
  cursor: pointer; transition: all .25s; }
.ob-dot.active { background: var(--accent); width: 26px; border-radius: 5px; }
.ob-skip { color: var(--muted); font-weight: 600; font-size: .88rem; }
.ob-skip:hover { color: var(--text); text-decoration: none; }

.ob-track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; }
.ob-track::-webkit-scrollbar { display: none; }
.ob-slide { min-width: 100%; scroll-snap-align: start; display: grid;
  grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; padding: 1rem 3rem; }

/* visual side */
.ob-visual { position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 340px; }
.ob-blob { position: absolute; width: 320px; height: 320px; border-radius: 46% 54% 58% 42%;
  background: radial-gradient(circle at 40% 35%, rgba(220,246,59,.55), rgba(220,246,59,.15) 70%);
  filter: blur(6px); animation: blob 9s ease-in-out infinite; }
.blob-green { background: radial-gradient(circle at 40% 35%, rgba(67,185,140,.5), rgba(47,143,107,.12) 70%); }
.blob-clay  { background: radial-gradient(circle at 40% 35%, rgba(224,122,79,.45), rgba(199,91,57,.12) 70%); }
.blob-gold  { background: radial-gradient(circle at 40% 35%, rgba(255,194,75,.55), rgba(255,194,75,.15) 70%); }
@keyframes blob { 0%,100% { border-radius: 46% 54% 58% 42%; transform: rotate(0) scale(1); }
  50% { border-radius: 58% 42% 44% 56%; transform: rotate(8deg) scale(1.05); } }

.ob-mascot { position: relative; width: 260px; height: auto; z-index: 2;
  filter: drop-shadow(0 16px 22px rgba(20,45,30,.25)); }
.ob-wave { animation: float-y 4s ease-in-out infinite; }
.ob-cheer { animation: bounce 1.8s ease-in-out infinite; }
.ob-emoji { position: absolute; font-size: 2rem; z-index: 3; animation: float-y 5s ease-in-out infinite; }
.ob-emoji.e1 { top: 8%; right: 16%; }
.ob-emoji.e2 { bottom: 14%; left: 14%; font-size: 1.6rem; animation-delay: .6s; }
.ob-emoji.e3 { top: 20%; left: 18%; font-size: 1.4rem; animation-delay: 1.1s; }

.ob-roster, .ob-points { position: relative; z-index: 2; display: grid; gap: .7rem; }
.ob-chip-card { background: #fff; border: 1px solid var(--border-light); border-radius: 16px;
  padding: .9rem 1.4rem; font-weight: 700; font-size: 1.05rem; box-shadow: var(--shadow);
  animation: pop-in .5s both; }
.ob-roster .ob-chip-card:nth-child(2){ animation-delay:.12s; margin-left: 2rem; }
.ob-roster .ob-chip-card:nth-child(3){ animation-delay:.24s; }

.ob-auction { position: relative; z-index: 2; display: grid; gap: .8rem; }
.ob-bid { background: #fff; border: 1px solid var(--border-light); border-radius: 14px;
  padding: .8rem 1.2rem; font-weight: 700; display: flex; justify-content: space-between;
  gap: 2rem; box-shadow: var(--shadow); }
.ob-bid span { color: var(--muted); }
.ob-bid.bid-up { border-color: var(--accent); color: var(--accent); transform: scale(1.06);
  animation: pop-in .5s .3s both; }
.ob-bid.bid-up span { color: var(--accent); }
.ob-gavel { position: absolute; right: -10px; bottom: -18px; font-size: 2.4rem;
  animation: bounce 1.6s ease-in-out infinite; }

.ob-pitch { position: relative; z-index: 2; }
.ob-court { background: var(--court); border: 3px solid #fff; border-radius: 16px;
  padding: 1.4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
  box-shadow: var(--shadow); position: relative; }
.ob-court::before { content:''; position:absolute; left:50%; top:8%; bottom:8%; width:2px;
  background: rgba(255,255,255,.5); }
.ob-player { width: 46px; height: 46px; border-radius: 50%; background: var(--ball);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  box-shadow: 0 3px 8px rgba(0,0,0,.2); animation: pop-in .4s both; }
.ob-bench { text-align: center; margin-top: .7rem; font-size: .8rem; color: var(--muted); font-weight: 600; }

.ob-points { grid-template-columns: 1fr 1fr; }
.ob-pt { background: #fff; border: 1px solid var(--border-light); border-radius: 14px;
  padding: .9rem; text-align: center; box-shadow: var(--shadow); animation: pop-in .5s both; }
.ob-pt b { display: block; font-size: 1.5rem; font-family: 'Bricolage Grotesque',sans-serif;
  color: var(--accent); margin: .2rem 0; }
.ob-pt span { font-size: .75rem; color: var(--muted); }

/* text side */
.ob-text { max-width: 460px; }
.ob-step { display: inline-block; background: var(--accent-dim); color: var(--accent);
  font-weight: 700; font-size: .78rem; padding: .3rem .8rem; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1rem; }
.ob-text h1 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -1px; margin-bottom: 1rem; }
.ob-text p { color: var(--muted); font-size: 1.08rem; line-height: 1.7; }
.ob-text strong { color: var(--text); }

.ob-controls { display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem 3rem 1.8rem; }
.ob-prev { background: none; border: none; color: var(--muted); font-weight: 600;
  font-size: .95rem; cursor: pointer; font-family: inherit; }
.ob-prev:hover { color: var(--text); }
.ob-next { font-size: 1rem; padding: .8rem 1.8rem; }

@media (max-width: 760px) {
  .ob-slide { grid-template-columns: 1fr; text-align: center; padding: 1rem 1.5rem; gap: 1rem;
    align-content: center; }
  .ob-visual { min-height: 240px; }
  .ob-mascot { width: 190px; }
  .ob-text { margin: 0 auto; }
  .ob-controls { padding: 1rem 1.5rem 1.5rem; }
}

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

/* ═══════════════════════════════════════════════════════════
   v1.0.5 — HOME HUB (Le mie leghe)
   ═══════════════════════════════════════════════════════════ */

.hub-body {
  background:
    radial-gradient(1100px 700px at 85% -8%, rgba(220,246,59,.13), transparent 55%),
    radial-gradient(900px 600px at 0% 100%, rgba(47,143,107,.20), transparent 55%),
    linear-gradient(180deg, #F3F7EC 0%, #EAF1E0 100%);
  min-height: 100vh;
}
.hub-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem 2.5rem; max-width: 1180px; margin: 0 auto;
}
.hub-user { display: flex; align-items: center; gap: 1rem; }
.hub-username { font-size: .88rem; color: var(--muted); font-weight: 600; }

.hub-wrap { max-width: 1100px; margin: 0 auto; padding: 1rem 2rem 4rem; }
.hub-section { margin-bottom: 3rem; }
.hub-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.8px;
}
.hub-sub { color: var(--muted); margin: .3rem 0 1.8rem; }
.hub-title-sm {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.4rem; font-weight: 700; margin-bottom: 1.3rem;
}

.league-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.3rem;
}
.league-card {
  display: block; color: var(--text); text-decoration: none;
  background: linear-gradient(160deg, var(--bg-card), var(--bg-card-2));
  border: 1px solid var(--border); border-radius: 18px; padding: 1.4rem;
  transition: transform .22s, border-color .22s, box-shadow .22s; position: relative;
  overflow: hidden;
}
.league-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--ball), transparent 70%);
}
.league-card:hover {
  transform: translateY(-5px); border-color: var(--accent); text-decoration: none;
  box-shadow: 0 18px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(220,246,59,.3);
}
.lc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.lc-emoji { font-size: 1.8rem; }
.lc-badge {
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(201,166,255,.16); color: var(--purple);
  padding: .25rem .6rem; border-radius: 20px;
}
.lc-name { font-size: 1.25rem; font-weight: 800; letter-spacing: -.3px; }
.lc-team { color: var(--muted); font-size: .85rem; margin-bottom: 1.1rem; }
.lc-stats { display: flex; gap: 1.2rem; padding: 1rem 0; border-top: 1px solid var(--border); }
.lc-stat { display: flex; flex-direction: column; }
.lc-stat-num { font-size: 1.3rem; font-weight: 800; color: var(--accent); line-height: 1.1; }
.lc-stat-lbl { font-size: .7rem; color: var(--muted); text-transform: uppercase; }
.lc-enter {
  display: flex; align-items: center; gap: .4rem; justify-content: flex-end;
  color: var(--accent); font-weight: 700; font-size: .9rem; margin-top: .3rem;
}
.lc-enter .arrow { transition: transform .2s; }
.league-card:hover .lc-enter .arrow { transform: translateX(5px); }

.hub-empty {
  text-align: center; padding: 3rem 2rem;
  background: linear-gradient(160deg, #F4F8EF, #FFFFFF);
  border: 1px dashed var(--border-light); border-radius: 18px; color: var(--muted);
}
.hub-empty-icon { font-size: 3rem; margin-bottom: 1rem; animation: bounce 1.8s ease-in-out infinite; }

.sidebar-back {
  display: block; padding: .7rem 1.2rem; font-size: .78rem; color: var(--muted);
  border-bottom: 1px solid var(--border); transition: all .15s;
}
.sidebar-back:hover { color: var(--accent); background: var(--bg-hover); text-decoration: none; }

/* ── Logo Acest ── */
.brand-logo { height: 30px; width: auto; display: block; }
.nav-logo   { height: 38px; width: auto; display: block; }
.auth-logo-img { height: 46px; width: auto; display: block; margin: 0 auto 1.5rem; }

/* Mascotte: badge ritagliato sul personaggio (nasconde wordmark e bordi gialli) */
.logo-badge {
  width: 38px; height: 38px; border-radius: 11px; overflow: hidden;
  display: inline-block; flex-shrink: 0; line-height: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.15) inset;
}
.logo-badge img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.42); transform-origin: 50% 33%;
}
.logo-badge-lg { width: 44px; height: 44px; border-radius: 13px; }

/* Mascotte ritagliata (pagine auth) — sfondo trasparente, niente quadrato */
.auth-mascot {
  width: 124px; height: auto; display: block; margin: 0 auto 1rem;
  filter: drop-shadow(0 8px 14px rgba(20,45,30,.22));
}
.brand-mascot { width: 110px; height: auto; margin: 0 auto 1.2rem; display: block;
  filter: drop-shadow(0 10px 18px rgba(20,45,30,.22)); }
.footer-mascot { width: 46px; height: auto;
  filter: drop-shadow(0 4px 8px rgba(20,45,30,.2)); }

/* ═══════════════════════════════════════════════════════════
   REGOLAMENTO
   ═══════════════════════════════════════════════════════════ */
.rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1.2rem; }
.rule-block { }
.rule-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.rule-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--border); }
.rule-table td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
.rule-pos { color: var(--accent); }
.rule-neg { color: var(--danger); }
.rule-intro { color: var(--muted); max-width: 720px; line-height: 1.7; margin-bottom: 1.5rem; }
.rule-steps { counter-reset: step; display: grid; gap: .8rem; }
.rule-step { display: flex; gap: .9rem; align-items: flex-start; }
.rule-step::before {
  counter-increment: step; content: counter(step);
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ball); color: #12271D; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.rule-step-body h4 { font-size: .95rem; margin-bottom: .2rem; }
.rule-step-body p { color: var(--muted); font-size: .85rem; }
.rule-pill { display: inline-block; background: var(--accent-dim); color: var(--accent);
  padding: .15rem .55rem; border-radius: 20px; font-size: .72rem; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   v1.15 — LANDING "BROADCAST" (awwwards pass)
   ═══════════════════════════════════════════════════════════ */

.lp2 { --mono: 'Twemoji Country Flags', 'JetBrains Mono', ui-monospace, monospace; }
.lp2.landing-body {
  background:
    radial-gradient(1200px 760px at 88% -8%, rgba(220,246,59,.20), transparent 56%),
    radial-gradient(980px 640px at -6% 104%, rgba(47,143,107,.20), transparent 56%),
    linear-gradient(180deg, #F4F8EE 0%, #E7EFDC 100%);
}

/* film grain */
.lp-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}
html.dark .lp-grain { mix-blend-mode: screen; opacity: .35; }
.lp2 .lp-nav, .lp2 .lp-hero, .lp2 section, .lp2 .lp-footer { position: relative; z-index: 2; }

/* LIVE TICKER */
.lp-ticker {
  position: relative; z-index: 3; display: flex; align-items: stretch;
  max-width: 1240px; margin: .2rem auto 0; padding: 0 1.2rem;
  font-family: var(--mono);
}
.lp-ticker-live {
  display: inline-flex; align-items: center; gap: .45rem; flex-shrink: 0;
  background: #12271D; color: var(--ball); font-weight: 800; font-size: .72rem;
  letter-spacing: .04em; padding: .5rem .9rem; border-radius: 12px 0 0 12px;
}
.lt-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5247;
  box-shadow: 0 0 0 0 rgba(255,82,71,.6); animation: lt-pulse 1.6s infinite; }
@keyframes lt-pulse { 0%{box-shadow:0 0 0 0 rgba(255,82,71,.6)} 70%{box-shadow:0 0 0 7px rgba(255,82,71,0)} 100%{box-shadow:0 0 0 0 rgba(255,82,71,0)} }
.lp-ticker-track {
  flex: 1; overflow: hidden; border: 1px solid var(--border);
  border-left: none; border-radius: 0 12px 12px 0;
  background: rgba(255,255,255,.7); backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
}
html.dark .lp-ticker-track { background: rgba(18,39,29,.7); }
.lp-ticker-set {
  display: inline-flex; align-items: center; gap: 1.6rem; padding: .5rem 1rem;
  white-space: nowrap; animation: ticker 38s linear infinite;
}
.lp-ticker-track:hover .lp-ticker-set { animation-play-state: paused; }
.lp-ticker-set::after {
  content: '🎾  Sinner +24  ·  Alcaraz +18  ·  Zverev +11  ·  Djokovic +15  ·  Musetti +9  ·  Cobolli −3  ·  Fritz +7  ·  Shelton +12  ·  de Minaur +6  ·  Rublev −2  ·  Medvedev +5  ·  Ruud +8  ·  Darderi +14  ·  Auger-Aliassime +10';
  padding-left: 1.6rem; color: var(--muted); font-size: .78rem; font-weight: 600;
}
.lt-item { font-size: .78rem; font-weight: 600; color: var(--muted); display: inline-flex; gap: .4rem; }
.lt-item b { color: var(--text); font-weight: 800; }
.lt-item i { font-style: normal; font-weight: 800; }
.lt-item i.up { color: var(--accent); }
.lt-item i.dn { color: var(--danger); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* HERO court backdrop */
.lp2 .lp-hero { padding-top: 2.4rem; overflow: hidden; }
.court-svg {
  position: absolute; left: 50%; bottom: -4%; transform: translateX(-50%);
  width: min(1100px, 116%); height: auto; z-index: 0; pointer-events: none;
  opacity: .9;
}
.court-svg .court-stroke { fill: none; stroke: var(--court); stroke-opacity: .26; stroke-width: 2; }
.court-svg .court-net { stroke: var(--court); stroke-opacity: .4; stroke-width: 2.5;
  stroke-dasharray: 5 5; }
html.dark .court-svg .court-stroke { stroke: var(--court-light); stroke-opacity: .3; }
html.dark .court-svg .court-net { stroke: var(--court-light); stroke-opacity: .45; }
.lp2 .lp-hero-grid { position: relative; z-index: 2; }

/* badge pulse */
.lp2 .lp-badge { display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.7); border-color: var(--border-light);
  backdrop-filter: blur(6px); }
.lb-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(17,152,92,.5); animation: lt-pulse 2s infinite; }

/* refined hero title */
.lp2 .lp-title { letter-spacing: -2px; }
.lp2 .hl-green { position: relative; color: var(--court); }
.lp2 .hl-green::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .04em; height: .12em;
  background: linear-gradient(90deg, var(--court-light), var(--ball));
  border-radius: 4px; transform: scaleX(0); transform-origin: left;
  animation: serve-line .7s cubic-bezier(.2,.8,.2,1) .6s both;
}
@keyframes serve-line { to { transform: scaleX(1); } }

/* magnetic hero button */
.lp2 .lp-btn-hero { transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s, filter .2s; will-change: transform; }

/* hero stats — scoreboard numbers */
.lp2 .lp-stat-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* SCOREBOARD card */
.scoreboard {
  position: absolute; left: -8%; bottom: 6%; width: 250px; z-index: 4;
  background: rgba(255,255,255,.82); backdrop-filter: blur(14px);
  border: 1px solid var(--border-light); border-radius: 18px; padding: .9rem 1rem;
  box-shadow: 0 18px 44px rgba(20,45,30,.18);
  font-family: var(--mono);
  animation: float-y 6s ease-in-out infinite 1.1s;
}
html.dark .scoreboard { background: rgba(18,39,29,.82); }
.sb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.sb-live { display: inline-flex; align-items: center; gap: .35rem; font-size: .62rem; font-weight: 800;
  color: #ff5247; letter-spacing: .06em; }
.sb-tag { font-size: .58rem; font-weight: 700; color: var(--dim); letter-spacing: .04em; }
.sb-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center;
  gap: .5rem; padding: .35rem 0; font-size: .82rem; }
.sb-row + .sb-row { border-top: 1px solid var(--border); }
.sb-flag { font-size: .95rem; }
.sb-name { font-weight: 700; color: var(--text); }
.sb-lead .sb-name { color: var(--accent); }
.sb-sets { font-size: .74rem; letter-spacing: .14em; color: var(--muted); }
.sb-pts { font-weight: 800; color: var(--accent); }
.sb-pts.dn { color: var(--muted); }
.sb-foot { margin-top: .55rem; padding-top: .55rem; border-top: 1px dashed var(--border-light);
  font-size: .68rem; color: var(--muted); font-family: 'Inter', sans-serif; }
.sb-foot b { color: var(--accent); }

/* mascot chips → glassy */
.lp2 .mascot-chip { background: rgba(255,255,255,.85); backdrop-filter: blur(8px); }
html.dark .lp2 .mascot-chip { background: rgba(18,39,29,.85); }

/* eyebrow labels */
.lp-eyebrow {
  text-align: center; font-family: var(--mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
  margin-bottom: .7rem;
}
.lp-eyebrow::before, .lp-eyebrow::after { content: '·'; margin: 0 .6rem; color: var(--dim); }

/* feature cards — tilt base */
.lp2 .lp-feature-card { transition: transform .18s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s;
  transform-style: preserve-3d; will-change: transform; }
.lp2 .lp-feature-card:hover { box-shadow: 0 22px 50px rgba(20,45,30,.16), 0 0 0 1px rgba(17,152,92,.18); }
.lp2 .lpf-icon { filter: drop-shadow(0 6px 14px rgba(20,45,30,.18)); }

/* scroll cue */
.lp-scrollcue { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid var(--border-light); border-radius: 16px; z-index: 3;
  display: flex; justify-content: center; }
.lp-scrollcue span { width: 4px; height: 8px; margin-top: 7px; border-radius: 3px;
  background: var(--accent); animation: scroll-cue 1.6s ease-in-out infinite; }
@keyframes scroll-cue { 0%{opacity:0; transform:translateY(-4px)} 40%{opacity:1} 100%{opacity:0; transform:translateY(12px)} }

@media (max-width: 900px) {
  .scoreboard { left: 2%; bottom: -2%; width: 220px; }
}
@media (max-width: 820px) {
  .lp2 .lp-hero-mascot { order: -1; flex-direction: column; }
  .scoreboard { position: static; width: 100%; max-width: 320px; margin: 1.2rem auto 0; animation: none; }
  .court-svg { opacity: .5; }
  .lp-ticker-live { font-size: .64rem; padding: .5rem .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-ticker-set, .scoreboard, .lp-scrollcue span, .lt-dot, .lb-pulse { animation: none !important; }
  .lp2 .hl-green::after { animation: none; transform: scaleX(1); }
}

/* ═══════════════════════════════════════════════════════════
   v1.16 — IN-APP "BROADCAST" (shell ticker + tabellone KPI)
   ═══════════════════════════════════════════════════════════ */

:root { --mono: 'Twemoji Country Flags', 'JetBrains Mono', ui-monospace, monospace; }

/* SHELL LIVE TICKER */
.app-ticker {
  position: sticky; top: 120px; z-index: 95;   /* resta visibile sotto l'appbar quando si scorre */
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.82); backdrop-filter: blur(12px);
  font-family: var(--mono);
}
html.dark .app-ticker { background: rgba(14,31,23,.82); }
.at-live {
  display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0;
  background: #12271D; color: var(--ball); font-weight: 800; font-size: .66rem;
  letter-spacing: .06em; padding: .4rem .8rem;
}
.at-track {
  flex: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 94%, transparent);
}
.at-set {
  display: inline-flex; align-items: center; gap: 1.5rem;
  padding: .38rem 1rem; white-space: nowrap;
  animation: ticker 42s linear infinite;
}
.at-track:hover .at-set { animation-play-state: paused; }

/* PAGE HEADER eyebrow */
.page-eyebrow {
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
  margin-bottom: .3rem;
}
.page-title { letter-spacing: -.8px; }

/* KPI cards → tabellone */
.kpi-card {
  background: linear-gradient(160deg, #12271D 0%, #18382A 100%);
  border-color: #1f4533;
}
.kpi-card::before {
  height: 3px; background: linear-gradient(90deg, var(--ball), transparent 65%); opacity: 1;
}
.kpi-card .kpi-label { color: rgba(240,246,236,.62); }
.kpi-card .kpi-value { color: #F4F8EE; font-family: var(--mono);
  font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.kpi-card .kpi-value.accent { color: var(--ball); text-shadow: 0 0 22px rgba(220,246,59,.4); }
.kpi-card .kpi-value.gold   { color: var(--gold); }
.kpi-card .kpi-unit { color: rgba(240,246,236,.55); }
.kpi-card::after {
  content: ''; position: absolute; right: -20px; bottom: -24px;
  width: 90px; height: 90px; border-radius: 50%;
  border: 2px solid rgba(244,248,238,.06);
}
html.dark .kpi-card { background: linear-gradient(160deg, #0c1f17, #12271d); }

/* Card titles → broadcast label */
.card-title {
  font-family: var(--mono); font-weight: 700; font-size: .76rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.card-head { border-bottom-color: var(--border); }

/* Standings + player points → tabular mono */
.standing-rank { font-family: var(--mono); font-weight: 800; }
.standing-pts, .player-pts, .kpi-unit { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.standing-row.is-me { box-shadow: inset 3px 0 0 var(--accent); }

/* Live badge in header */
.badge-live {
  font-family: var(--mono); font-weight: 800; font-size: .72rem; letter-spacing: .04em;
}

@media (max-width: 700px) {
  .at-live { font-size: .58rem; padding: .4rem .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .at-set { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   v1.17 — "BROADCAST" · ROSA + HUB (Le mie leghe)
   ═══════════════════════════════════════════════════════════ */

/* ── HUB (Le mie leghe) ── */
.hub2 { --mono: 'Twemoji Country Flags', 'JetBrains Mono', ui-monospace, monospace; }
.hub-eyebrow {
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
  margin-bottom: .4rem;
}
.hub2 .hub-title { letter-spacing: -1.2px; }

/* League cards as broadcast team panels */
.hub2 .league-card {
  background: linear-gradient(160deg, #12271D 0%, #18382A 100%);
  border-color: #1f4533; color: #F4F8EE;
}
.hub2 .league-card::before {
  height: 4px; background: linear-gradient(90deg, var(--ball), var(--court-light) 60%, transparent);
}
.hub2 .league-card::after {
  content: ''; position: absolute; right: -28px; bottom: -34px;
  width: 130px; height: 130px; border-radius: 50%;
  border: 2px solid rgba(244,248,238,.05); pointer-events: none;
}
.hub2 .league-card:hover {
  border-color: var(--ball);
  box-shadow: 0 22px 48px rgba(20,45,30,.34), 0 0 0 1px rgba(220,246,59,.28);
}
.hub2 .lc-name { color: #F4F8EE; }
.hub2 .lc-team { color: rgba(240,246,236,.6); }
.hub2 .lc-emoji { filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.hub2 .lc-stats { border-top-color: rgba(244,248,238,.12); }
.hub2 .lc-stat-num {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--ball); letter-spacing: -.5px;
}
.hub2 .lc-stat:nth-child(2) .lc-stat-num { color: var(--gold); }
.hub2 .lc-stat-lbl { color: rgba(240,246,236,.5); }
.hub2 .lc-enter { color: var(--ball); }
.hub2 .league-card .lc-badge {
  background: rgba(220,246,59,.16); color: var(--ball);
  font-family: var(--mono); letter-spacing: .03em;
}

/* Add/Join cards keep light, just mono labels */
.hub2 .setup-card h3 { letter-spacing: -.3px; }

/* ── ROSA ── */
.fc-meta { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.fh-title { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -.3px; }
.fh-count {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  background: var(--bg-card); border: 1px solid var(--border);
  padding: .2rem .6rem; border-radius: 20px;
}

/* Roster card → broadcast trading card */
.fc-player {
  border-top: 3px solid var(--border-light);
  background: linear-gradient(180deg, #FFFFFF, #FBFDF7);
}
html.dark .fc-player { background: linear-gradient(180deg, #163020, #12271d); border-color: #2e5a44; }
.fc-player .fc-name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; }
/* tier colour bleeds into the card top edge */
.tennis-court .fc-player { box-shadow: 0 6px 16px rgba(20,45,30,.22); }

/* Court → richer surface with tramlines */
.tennis-court {
  background:
    repeating-linear-gradient(180deg, transparent 0 38px, rgba(255,255,255,.03) 38px 39px),
    linear-gradient(160deg, #2FA06E, #21724F);
}
.tennis-court::before {
  content: ''; position: absolute; left: 12%; top: 0; bottom: 0; width: 2px;
  background: rgba(255,255,255,.28); z-index: 1;
}
.tennis-court::after {
  content: ''; position: absolute; right: 12%; top: 0; bottom: 0; width: 2px;
  background: rgba(255,255,255,.28); z-index: 1;
}

/* Court header as scoreboard strip */
.court-section .court-head-row, .bench-section .court-head-row {
  background: linear-gradient(90deg, #12271D, transparent);
  border-left: 3px solid var(--ball);
  padding: .5rem .8rem; border-radius: 8px; color: #F4F8EE;
}
.court-section .fh-title, .bench-section .fh-title { color: #F4F8EE; }
.court-section .fh-count {
  background: rgba(244,248,238,.1); border-color: transparent; color: var(--ball);
}
html.dark .court-section .court-head-row, html.dark .bench-section .court-head-row { color: #F4F8EE; }

/* bench number → mono */
.bench-num { font-family: var(--mono); }

/* ═══════════════════════════════════════════════════════════
   v1.18 — "BROADCAST" · ASTA, MERCATO, CLASSIFICA, STATS, GIOCATORE
   ═══════════════════════════════════════════════════════════ */

/* ── ASTA (tabellone live) ── */
.auction-card {
  background: linear-gradient(165deg, #12271D 0%, #18382A 100%);
  border: 1px solid #1f4533; color: #F4F8EE;
}
.auction-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--ball), transparent 65%);
}
.auction-live-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,82,71,.16); color: #ff7a6b;
  font-family: var(--mono); font-weight: 800; letter-spacing: .06em;
}
.auction-live-badge::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #ff5247; box-shadow: 0 0 0 0 rgba(255,82,71,.6); animation: lt-pulse 1.6s infinite;
}
.auction-name { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -.5px; color: #F4F8EE; }
.auction-meta { color: rgba(240,246,236,.6); }
.auction-base { color: var(--ball); font-family: var(--mono); }
.auction-status {
  background: rgba(0,0,0,.22); border-color: rgba(244,248,238,.1);
}
.bid-label { color: rgba(240,246,236,.55); }
.bid-amount {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 2.6rem; color: var(--ball); letter-spacing: -1.5px;
  text-shadow: 0 0 26px rgba(220,246,59,.4);
}
.bid-by { color: rgba(240,246,236,.6); }
.bid-timer {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.4rem; color: var(--gold); font-weight: 800;
}
.bid-amount-sm, .completed-bid, .queue-rank, .bid-item .bid-user ~ * {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.auction-card .auction-base, .auction-card .bid-amount { line-height: 1.1; }

/* ── DATA TABLES (mercato + classifica) ── */
.data-table th {
  font-family: var(--mono); letter-spacing: .1em;
}
.data-table td:last-child, .pts-cell, .data-table td:nth-child(3) {
  font-variant-numeric: tabular-nums;
}
.pts-cell {
  font-family: var(--mono); font-size: 1.15rem; color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
.standings-table .row-me td { background: var(--accent-dim); }
.standings-table .row-me td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.team-name-lg { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; letter-spacing: -.2px; }
.rank-num { font-family: var(--mono); font-weight: 800; }
.you-badge {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .04em;
}
.medal { font-size: 1.25rem; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }

/* ── POINTS FEED (come hai fatto punti) ── */
.pf-pts { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pf-result { font-family: var(--mono); font-weight: 700; font-size: .72rem; }
.pf-chip { font-family: var(--mono); }

/* ── INFO LEGA / status ── */
.info-val { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.status-chip { font-family: var(--mono); letter-spacing: .03em; }

/* ── MERCATO tier/tour ── */
.tour-badge { font-family: var(--mono); }
.tier-chip { font-family: var(--mono); letter-spacing: .02em; }

/* ── GIOCATORE hero ── */
.hero-name { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -.6px; }
.player-hero {
  background: linear-gradient(165deg, var(--bg-card-2), var(--bg-card));
  position: relative; overflow: hidden;
}
.player-hero::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--ball), transparent 60%);
}
.hs-val { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.5px; }

/* ── AUCTION queue / waiting polish ── */
.queue-name { font-weight: 600; }
.completed-bid { color: var(--accent); }
.waiting-icon { animation: float-y 4s ease-in-out infinite; }
.auction-card .waiting-text { color: #F4F8EE; }
.auction-card .waiting-sub { color: rgba(240,246,236,.62); }

@media (prefers-reduced-motion: reduce) {
  .auction-live-badge::before, .waiting-icon { animation: none !important; }
}

/* ── Classifica: riga cliccabile → formazione ── */
.team-link { color: var(--text); cursor: pointer; }
.team-link:hover { color: var(--accent); text-decoration: none; }
.team-view-hint { font-size: .8rem; opacity: 0; margin-left: .35rem; transition: opacity .15s; }
.standings-table tbody tr:hover .team-view-hint { opacity: .6; }
.fc-specialist-ro { font-size: .68rem; color: var(--muted); margin-top: .15rem; font-weight: 600; }
/* Selettore lingua */
.lang-switch { display: inline-flex; gap: 2px; background: var(--bg-hover);
  border: 1px solid var(--border); border-radius: 20px; padding: 2px; }
.lang-opt { font-size: .72rem; font-weight: 800; padding: .2rem .5rem; border-radius: 16px;
  color: var(--muted); letter-spacing: .03em; }
.lang-opt:hover { text-decoration: none; color: var(--text); }
.lang-opt.is-on { background: var(--accent); color: #fff; }
.dropdown .lang-switch { margin: .3rem .4rem; }

/* Sfondo animato (palline che fluttuano, molto sottili) */
.app-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* texture a griglia di puntini che sfuma dall'alto (premium, leggera) */
.app-bg::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(47,143,107,.055) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(125% 95% at 50% -8%, #000 38%, transparent 82%);
          mask-image: radial-gradient(125% 95% at 50% -8%, #000 38%, transparent 82%);
}
html.dark .app-bg::before { background-image: radial-gradient(rgba(120,200,160,.05) 1px, transparent 1.6px); }
.app-bg .ab-ball { position: absolute; opacity: .06; filter: blur(1px); will-change: transform; }
.app-bg .ab-1 { top: 14%; left: 5%;  font-size: 7rem;  animation: ab-float 20s ease-in-out infinite; }
.app-bg .ab-2 { bottom: 12%; right: 7%; font-size: 11rem; animation: ab-float 28s ease-in-out infinite -8s; }
.app-bg .ab-3 { top: 55%; left: 60%; font-size: 5rem;  animation: ab-float 24s ease-in-out infinite -14s; }
@keyframes ab-float {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  50%     { transform: translate(30px,-46px) rotate(28deg); }
}
.app { position: relative; z-index: 1; }
html.dark .app-bg .ab-ball { opacity: .04; }
@media (prefers-reduced-motion: reduce) { .app-bg .ab-ball { animation: none !important; } }

/* Scontri diretti H2H */
.h2h-fixture, .h2h-result {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem;
  padding: .6rem 1.2rem; border-bottom: 1px solid var(--border);
}
.h2h-fixture:last-child, .h2h-result:last-child { border-bottom: none; }
.h2h-team { font-weight: 700; }
.h2h-team.right { text-align: right; }
.h2h-team.is-me { color: var(--accent); }
.h2h-team.win { color: var(--accent); }
.h2h-team.lose { color: var(--muted); }
.h2h-vs { font-family: var(--mono); font-size: .72rem; color: var(--dim); font-weight: 800; }
.h2h-score { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 800;
  background: var(--bg-hover); padding: .2rem .6rem; border-radius: 8px; white-space: nowrap; }
.h2h-week { margin-bottom: 1.2rem; }
.h2h-week-head { font-family: var(--mono); font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin: .4rem 0; }

/* Bonus settimanale */
.bonus-banner {
  display: flex; align-items: center; gap: .8rem; margin-bottom: 1.4rem;
  background: linear-gradient(90deg, var(--gold-dim), transparent);
  border: 1px solid var(--border); border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm); padding: .8rem 1.1rem; font-size: .9rem;
}
.bb-icon { font-size: 1.6rem; }
/* Settimana senza bonus speciale: banner attenuato (grigio, non oro) */
.bonus-banner.bonus-normal {
  background: linear-gradient(90deg, rgba(127,140,130,.12), transparent);
  border-left-color: var(--border); opacity: .85;
}

/* Bacheca / chat */
.chat-card { display: flex; flex-direction: column; padding: 0; }
.chat-list { max-height: 56vh; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; }
.chat-msg { display: flex; }
.chat-msg.is-me { justify-content: flex-end; }
.chat-bubble { max-width: 76%; background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: 14px; padding: .5rem .8rem; }
.chat-msg.is-me .chat-bubble { background: var(--accent-dim); border-color: rgba(17,152,92,.3); }
.chat-meta { font-size: .66rem; color: var(--muted); margin-bottom: .15rem; }
.chat-user { font-weight: 800; color: var(--text); }
.chat-text { font-size: .92rem; word-break: break-word; }
.chat-input-row { display: flex; gap: .6rem; padding: .9rem 1.2rem; border-top: 1px solid var(--border); }
.chat-input-row input { flex: 1; }

.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.value-stat { text-align: center; padding: .8rem; background: var(--bg-card-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.vs-num { font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.5px; }
.vs-num.accent { color: var(--accent); } .vs-num.gold { color: var(--gold); } .vs-num.danger { color: var(--danger); }
.vs-lbl { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: .2rem; }
@media (max-width: 560px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
.btn-ghost-sm {
  background: var(--bg-card); border: 1px solid var(--border-light); color: var(--text);
  font-weight: 700; font-size: .82rem; padding: .55rem .9rem; border-radius: 10px;
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.btn-ghost-sm:hover { border-color: var(--accent); color: var(--accent); }
.fc-player { position: relative; }
.fc-captain {
  position: absolute; top: 4px; left: 4px; z-index: 4;
  font-size: .9rem; line-height: 1; cursor: pointer; user-select: none;
  filter: grayscale(1) opacity(.35); transition: transform .15s, filter .15s;
}
.fc-captain:hover { transform: scale(1.2); filter: grayscale(.3) opacity(.7); }
.fc-captain.is-cap { filter: none; transform: scale(1.15);
  text-shadow: 0 0 8px rgba(224,161,0,.7); cursor: pointer; }
.next-match-chip {
  display: inline-block; margin-top: .8rem; font-size: .8rem;
  background: var(--accent-dim); color: var(--accent);
  padding: .35rem .8rem; border-radius: 20px; font-family: var(--mono);
}
.cell-form { font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--gold); font-weight: 700; }
.cell-next { font-size: .68rem; color: var(--muted); font-family: var(--mono); }
.fc-clickable { cursor: pointer; }
.fc-name.fc-clickable:hover, .pf-name.fc-clickable:hover { color: var(--accent); }
.pf-name.fc-clickable { cursor: pointer; }

/* ── CALENDARIO broadcast ── */
.cal-date {
  display: flex; align-items: center; gap: .6rem;
  font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -.3px;
}
.cal-daycount {
  font-family: var(--mono); font-size: .64rem; font-weight: 700;
  color: var(--accent); background: var(--accent-dim);
  padding: .15rem .5rem; border-radius: 20px; letter-spacing: .04em;
}
.cal-match { grid-template-columns: 48px 1fr auto auto auto; }
.cal-time { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cal-surface { font-size: .9rem; }
.mymatch-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .8rem;
  padding: .6rem 1.2rem; border-bottom: 1px solid var(--border);
}
.mymatch-row:last-child { border-bottom: none; }
.mm-when { font-family: var(--mono); font-size: .78rem; color: var(--muted); white-space: nowrap; }
.mm-when b { color: var(--text); }
.mm-players { font-weight: 600; }
.mm-surface { font-size: .95rem; }
.mm-tourn { color: var(--muted); font-size: .78rem; text-align: right; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
@media (max-width: 640px) {
  .cal-match { grid-template-columns: 42px 1fr auto; }
  .cal-match .cal-tourn, .cal-match .tour-badge { display: none; }
  .mm-tourn { display: none; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — mobile/tablet pass
   (placed last so it overrides the base layout rules above)
   ═══════════════════════════════════════════ */
@media (max-width: 860px) {
  /* auction: stop the fixed 340px side column from overflowing */
  .asta-layout { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  body        { overflow-x: hidden; }   /* kill stray sideways drag from decorative bg */
  .kpi-row    { grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-bottom: 1.1rem; }
  .grid-2     { grid-template-columns: 1fr; gap: 1.1rem; }
  .form-row   { grid-template-columns: 1fr; }
  .kpi-card   { padding: 1rem 1.1rem; }
  .kpi-value  { font-size: 1.55rem; }
  .page-header{ margin-bottom: 1.3rem; }
  .page-title { font-size: 1.35rem; }
  .app-main   { padding: 1.2rem .9rem 3rem; }
  .card-body  { padding: .9rem 1rem; }
}
@media (max-width: 390px) {
  .kpi-row    { gap: .55rem; }
  .kpi-card   { padding: .85rem .9rem; }
  .kpi-value  { font-size: 1.4rem; }
  .kpi-label  { font-size: .64rem; }
}
/* cookie banner — let the text wrap instead of pushing the whole page wide
   (flex children need min-width:0 or they refuse to shrink). Shows on every
   page until dismissed, so this fixes overflow site-wide. */
@media (max-width: 680px) {
  .cookie-banner { left: .5rem; right: .5rem; bottom: .5rem; padding: .7rem .9rem;
                   font-size: .78rem; gap: .45rem .7rem; }
  .cookie-banner > * { min-width: 0; }
  .cookie-banner button { margin-left: 0; }
  /* hub (My leagues / Explore) header + wrap padding */
  .hub-wrap { padding: 1rem 1rem 3rem; }
  /* compact data/standings tables so they fit narrow screens */
  .data-table { font-size: .78rem; }
  .data-table th, .data-table td { padding: .5rem .55rem; }
}
@media (max-width: 400px) {
  .hub-username { display: none; }
}
/* small phones: compact landing nav + hub header + cookie banner so headers fit */
@media (max-width: 420px) {
  .lp-nav         { padding: .8rem .9rem; }
  .lp-nav-actions { gap: .4rem; }
  .lp-btn-ghost   { padding: .5rem .6rem; font-size: .82rem; }
  .lp-btn-fill    { padding: .5rem .85rem; font-size: .82rem; }
  .hub-nav        { padding: .8rem .9rem; flex-wrap: wrap; row-gap: .5rem; }
  .hub-wrap       { padding: .9rem .8rem 3rem; }
  .hub-user       { gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
  .cookie-banner  { padding: .6rem .75rem; font-size: .74rem; }
  /* crea/unisciti affiancate ma compatte così non si stringono */
  .setup-grid     { gap: .7rem; }
  .setup-card     { padding: 1rem .8rem; }
  .setup-card h3  { font-size: .92rem; }
  .setup-card p   { font-size: .76rem; margin-bottom: .8rem; }
  .setup-card .form-row { display: block; }
  .setup-icon     { font-size: 1.5rem; margin-bottom: .5rem; }
}

/* ═══════════════════════════════════════════
   MOBILE BOTTOM NAV — native app feel
   ═══════════════════════════════════════════ */
.bottom-nav, .more-sheet, .ms-backdrop { display: none; }
@media (max-width: 760px) {
  .appbar-tabs { display: none !important; }      /* via i tab orizzontali in alto */
  .app-main    { padding-bottom: 94px !important; } /* spazio per la barra in basso */
  .hub-nav .hub-user { display: none; }           /* home: azioni nella bottom nav */
  .hub-body .hub-wrap { padding-bottom: 94px; }   /* spazio per la bottom nav */
  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
    background: rgba(7,28,19,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border); gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .bn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none; color: var(--muted); font-family: inherit;
    font-size: .6rem; font-weight: 600; letter-spacing: .02em; padding: 7px 2px;
    border-radius: 14px; cursor: pointer; text-decoration: none; transition: color .15s, transform .1s;
  }
  .bn-item svg { width: 23px; height: 23px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .bn-item.active { color: var(--accent); }
  .bn-item.active svg { filter: drop-shadow(0 0 7px rgba(52,232,158,.55)); }
  .bn-item:active { transform: scale(.9); }

  .ms-backdrop { display: block; position: fixed; inset: 0; z-index: 410;
    background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .ms-backdrop.show { opacity: 1; pointer-events: auto; }
  .more-sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 420;
    background: var(--bg-card); border: 1px solid var(--border); border-bottom: none;
    border-top-left-radius: 22px; border-top-right-radius: 22px;
    padding: 10px 16px calc(22px + env(safe-area-inset-bottom));
    transform: translateY(112%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 -14px 44px rgba(0,0,0,.45); }
  .more-sheet.open { transform: translateY(0); }
  .ms-handle { width: 42px; height: 5px; border-radius: 3px; background: var(--border-light, #2a3a30);
    margin: 4px auto 14px; }
  .ms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .ms-item { display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 14px 4px; border-radius: 16px; background: var(--bg-card-2);
    color: var(--text); font-size: .64rem; font-weight: 600; text-align: center;
    text-decoration: none; line-height: 1.1; }
  .ms-item svg { width: 24px; height: 24px; fill: none; stroke: var(--accent);
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ms-item.active { border: 1px solid var(--accent); }
}

/* ═══════════════════════════════════════════
   MOBILE FIX — elementi che sforavano su telefono
   ═══════════════════════════════════════════ */
@media (max-width: 760px) {
  /* input che forzavano una larghezza fissa → si adattano */
  .search-input { min-width: 0 !important; width: 100%; box-sizing: border-box; }
  .bid-input    { max-width: 100% !important; width: 100%; box-sizing: border-box; }
  .offer-from, .offer-want { min-width: 0 !important; }
  /* modali sempre dentro lo schermo */
  .modal-box { max-width: calc(100vw - 1.4rem) !important; width: calc(100vw - 1.4rem); }
  /* tabelle: scrollano DENTRO la card, non spingono la pagina */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card-body:has(> .data-table), .card-body:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* griglie statistiche giocatore */
  .hero-stats, .value-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 430px) {
  .form-row    { grid-template-columns: 1fr; }
  .cal-match   { grid-template-columns: 38px 1fr auto; gap: .5rem; }
  .lp-hero-mascot { max-width: 76vw; }
  .ob-mascot   { max-width: 64vw; }
  .ob-emoji    { font-size: 1.6rem; }
  .modal-box   { max-width: calc(100vw - 1rem) !important; width: calc(100vw - 1rem); }
}

/* ═══════════════════════════════════════════
   MOBILE — appbar compatta, ticker fisso, header pulito
   ═══════════════════════════════════════════ */
@media (max-width: 760px) {
  /* appbar su UNA riga (niente più wrap a 2 righe), senza sovrapposizioni */
  .appbar-row     { flex-wrap: nowrap; gap: .5rem; padding: .5rem .8rem; }
  .appbar-league  { min-width: 0; flex: 1 1 auto; }                 /* prende lo spazio libero */
  .league-switch  { display: inline-flex; align-items: center; max-width: 100%;
                    min-width: 0; overflow: hidden; }               /* il bottone non sfora */
  .ls-name        { min-width: 0; flex: 0 1 auto; max-width: none; white-space: nowrap;
                    overflow: hidden; text-overflow: ellipsis; }    /* nome lega in ellissi */
  .appbar-right   { gap: .4rem; flex: 0 0 auto; }                   /* crediti+utente fissi a destra */
  .budget-chip    { padding: .3rem .55rem; font-size: .8rem; }
  /* ticker fisso subito sotto l'appbar compatta */
  .app-ticker     { top: 56px; }
  /* page header: titolo sopra, azioni sotto (niente scritte storte) */
  .page-header    { flex-direction: column; align-items: stretch; gap: .85rem; }
  .lineup-actions { width: 100%; }
  .lineup-actions .week-select { width: 100%; flex: 1 1 100%; }
  .lineup-actions > .btn-primary,
  .lineup-actions > .btn-accent,
  .lineup-actions > #btn-suggest { flex: 1; justify-content: center; }
}

/* ═══════════ PWA INSTALL BANNER ═══════════ */
.pwa-install { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 460;
  display: none; align-items: center; gap: .8rem; max-width: 460px; margin: 0 auto;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  padding: .65rem .75rem; box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.pwa-install.show { display: flex; }
.pwa-icon { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; }
.pwa-text { display: flex; flex-direction: column; line-height: 1.18; flex: 1; min-width: 0; }
.pwa-text b { font-size: .92rem; color: var(--text); }
.pwa-text span { font-size: .76rem; color: var(--muted); }
.pwa-btn { background: var(--accent); color: #fff; border: none; border-radius: 30px;
  padding: .5rem 1.15rem; font-weight: 700; font-size: .85rem; cursor: pointer; flex-shrink: 0; }
.pwa-btn:hover { filter: brightness(1.06); }
.pwa-x { background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer;
  padding: .2rem .35rem; flex-shrink: 0; }
@media (max-width: 760px) { .pwa-install { bottom: calc(80px + env(safe-area-inset-bottom)); } }