@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
  --analytics-accent: #D42B2B; /* default, sovrascritto da JS */
  --fs-card-scale: 1.3; /* 1.0 = dimensioni originali, 1.3 = +30% */
}

*{box-sizing:border-box;margin:0;padding:0;}
:root{
  /* Palette hip-hop zine */
  --bg:#F0EDE8;--bg2:#E8E4DE;--bg3:#DDD9D3;--bg4:#CEC9C2;
  --border:#CEC9C2;--border2:#BFBAB4;
  --text:#111010;--text2:#555250;--text3:#999490;
  --accent:#D42B2B;--accent-bg:rgba(212,43,43,.08);
  --winner-green:#1A7A52;
  --font:'Inter',system-ui,sans-serif;--mono:'IBM Plex Mono','Courier New',monospace;
  --display:'Bebas Neue','Arial Black',Impact,sans-serif;
  --radius:0px;
  color-scheme:light;
}
html,body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;font-size:14px;-webkit-font-smoothing:antialiased;}
::selection{background:var(--accent);color:#FAFAF8;}
a{color:inherit;}

/* ── NAV ── */
#nav{position:sticky;top:0;z-index:100;background:#111010;border-bottom:none;display:flex;align-items:center;padding:0 1.5rem;height:54px;}
.nav-logo{font-family:var(--display);font-size:28px;letter-spacing:.08em;line-height:1;color:#FAFAF8;margin-right:2rem;white-space:nowrap;display:flex;align-items:center;gap:0;}
.nav-logo .logo-accent{color:var(--accent);}
.nav-links{display:flex;align-items:center;height:100%;}
.nav-btn{background:none;border:none;color:#888;font-family:var(--font);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:0 .85rem;height:100%;cursor:pointer;border-bottom:3px solid transparent;transition:color .12s,border-color .12s;display:flex;align-items:center;}
.nav-btn:hover{color:#FAFAF8;}
.nav-btn.active{color:#FAFAF8;border-bottom-color:var(--accent);}
.nav-right{margin-left:auto;display:flex;gap:8px;align-items:center;}
.btn{background:none;border:1px solid var(--border2);color:var(--text2);font-family:var(--font);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;cursor:pointer;transition:all .15s;border-radius:var(--radius);white-space:nowrap;}
.btn:hover{border-color:var(--text3);color:var(--text);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#FAFAF8;}
.btn.primary:hover{opacity:.88;}
.btn.danger:hover{border-color:#c0392b;color:#c0392b;}
.btn.small{padding:4px 10px;font-size:10px;}
.btn:disabled{opacity:.35;cursor:default;pointer-events:none;}
.hamburger{display:none;background:none;border:1px solid #444;color:#888;width:36px;height:36px;cursor:pointer;border-radius:var(--radius);font-size:16px;align-items:center;justify-content:center;}

/* ── VIEWS ── */
.view{display:none;padding:1.5rem;animation:fadein .25s ease;}
.view.active{display:block;}
.view:not(.active){display:none !important;}
@keyframes fadein{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

/* ── ARCHIVE ── */
#v-archive{max-width:1700px;margin:0 auto;}
.archive-top{display:flex;align-items:flex-end;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;}
.archive-top-left{display:flex;flex-direction:column;gap:0;}
.archive-top h1{font-size:46px;letter-spacing:.15em;text-transform:uppercase;color:#000000;font-weight:500;}
.count-badge{font-size:11px;background:var(--bg3);color:var(--text);padding:3px 10px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.5rem;}

/* ── PAGE TITLES (Bebas Neue display style) ── */
.page-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--text3);margin-bottom:.2rem;}
.page-title{font-family:var(--display);font-size:52px;line-height:.95;letter-spacing:.02em;text-transform:uppercase;color:var(--text);margin-bottom:.15em;}
.page-title .title-accent{color:var(--accent);}
.section-rule{width:100%;height:2px;background:var(--text);margin:1rem 0 1.25rem;}

.filters{background:var(--bg2);border:1px solid var(--border);padding:1rem 1.25rem;margin-bottom:1.5rem;border-radius:var(--radius);position:sticky;top:56px;z-index:10;}
.filters-row{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:.75rem;align-items:end;margin-bottom:.75rem;}
.filters-row-2{display:grid;grid-template-columns:repeat(4,1fr) 1.2fr;gap:.75rem;align-items:end;}
.filters-row-3{display:flex;gap:1rem;align-items:flex-end;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border);flex-wrap:wrap;}
.filter-group{display:flex;flex-direction:column;gap:4px;}
/* Searchable combobox */
.sc-wrap{position:relative;width:100%;}
.sc-input{padding-right:24px !important;}
.sc-input.active-filter{border-color:var(--accent);background:var(--accent-bg);}
.sc-dropdown{display:none;position:absolute;top:calc(100% + 2px);left:0;right:0;background:var(--bg3);border:1px solid var(--accent);border-radius:var(--radius);z-index:999;max-height:220px;overflow-y:auto;box-shadow:0 4px 16px rgba(0,0,0,.4);}
.sc-dropdown.open{display:block;}
.sc-option{padding:7px 10px;font-size:12px;color:var(--text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sc-option:hover,.sc-option.sc-active{background:var(--accent-bg);color:var(--accent);}
.sc-option.sc-tutti{color:var(--text3);font-style:italic;}
.filter-lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);}
.filter-input{background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--font);font-size:12px;padding:7px 9px;outline:none;width:100%;border-radius:var(--radius);transition:border-color .15s;}
.filter-input:focus{border-color:var(--accent);}
.filter-input option{background:var(--bg3);}
.filter-input.active-filter{border-color:var(--accent);background:var(--accent-bg);}
.filter-actions{display:flex;gap:8px;margin-top:.75rem;flex-wrap:wrap;}

/* ── FREESTYLER FILTERS ROW ── */
.fs-filters-row{display:grid;grid-template-columns:1.4fr 1fr 0.7fr 1fr 0.9fr 0.7fr 1fr auto auto auto;gap:.6rem;align-items:end;}
@media(max-width:1100px){.fs-filters-row{grid-template-columns:repeat(5,1fr);}}
@media(max-width:700px){.fs-filters-row{grid-template-columns:repeat(2,1fr);}}

/* ── TOGGLE FILTRI ── */
.toggle-filters-btn{margin-left:auto;font-size:10px;letter-spacing:.1em;padding:5px 12px;border-color:var(--border2);color:var(--text3);transition:all .15s;}
.toggle-filters-btn:hover{border-color:var(--text3);color:var(--text);}
.toggle-filters-btn.on{border-color:var(--accent);color:var(--accent);}

.filters-collapsible{overflow:hidden;transition:max-height .3s ease, opacity .3s ease;max-height:600px;opacity:1;}
.filters-collapsible.filters-collapsed{max-height:0;opacity:0;pointer-events:none;}

/* Su mobile il bottone sta inline nell'archive-top */
@media (max-width:640px){
  .toggle-filters-btn{margin-left:auto;}
}

/* ── MOBILE: LISTA FREESTYLER — UX (solo ≤640px, non tocca le card) ── */
@media (max-width:640px){
  /* Filtri collassati: lascia visibile solo la ricerca per nome,
     invece di nascondere tutta la barra filtri */
  #fs-filters-collapsible.filters-collapsed{
    max-height:90px;
    opacity:1;
    pointer-events:auto;
  }
  #fs-filters-collapsible.filters-collapsed .fs-filters-row{
    grid-template-columns:1fr;
  }
  #fs-filters-collapsible.filters-collapsed .fs-filters-row > .filter-group:not(:first-child){
    display:none;
  }

  /* Input/select più leggibili e facili da toccare (16px evita anche
     lo zoom automatico di iOS Safari sui campi di input) */
  #v-freestylers-list .filter-input{
    font-size:16px;
    padding:9px 10px;
  }

  /* Pulsante "Filtri" a tutta larghezza: più facile da toccare col pollice */
  #v-freestylers-list #fs-toggle-filters-btn{
    width:100%;
    margin-left:0;
    text-align:center;
    padding:10px 14px;
  }

  /* Freccette ordinamento: target di tocco più ampi */
  #v-freestylers-list #fs-sort-asc-btn,
  #v-freestylers-list #fs-sort-desc-btn{
    flex:1;
    padding:9px 14px;
    font-size:12px;
  }

  /* Switcher "vista utente": più comodo da toccare su mobile
     (copre sia i vecchi pulsanti-tab che l'eventuale dropdown) */
  #fs-user-switcher .fifa-user-tab{
    padding:8px 12px;
    font-size:11px;
  }
  #fs-user-switcher-select{
    flex:1 1 100% !important;
    width:auto !important;
    min-width:0 !important;
    font-size:16px;
    min-height:40px;
  }

  /* Paginazione: pulsanti più grandi e comodi da toccare */
  #freestylers-pagination .btn{
    padding:9px 14px;
    font-size:12px;
    min-width:40px;
  }
}

.search-results{margin-bottom:1.5rem;}
.sr-header{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:.75rem;}
.sr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.search-result-item{background:var(--bg2);border:1px solid var(--border);padding:.875rem 1rem;cursor:pointer;transition:border-color .15s;border-radius:var(--radius);display:flex;flex-direction:column;gap:6px;}
.search-result-item:hover{border-color:var(--border2);}
.sr-meta{display:flex;flex-direction:column;gap:2px;}
.sr-rapper{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;}
.sr-battle{font-size:10px;letter-spacing:.06em;color:var(--text3);}
.sr-tags{display:flex;gap:4px;flex-wrap:wrap;}
.sr-tag{font-size:9px;text-transform:uppercase;letter-spacing:.06em;padding:1px 6px;background:var(--bg4);color:var(--text3);border-radius:2px;}
.sr-quartina{font-family:var(--mono);font-size:12px;line-height:1.75;color:var(--text2);background:var(--bg3);padding:.6rem .875rem;border-left:2px solid;border-radius:0 var(--radius) var(--radius) 0;}
.sr-line{white-space:pre-wrap;}
.sr-quartina mark{background:var(--accent-bg);color:var(--accent);padding:0 2px;border-radius:2px;}
@media(max-width:700px){.sr-grid{grid-template-columns:1fr;}}

.battles-grid{display:flex;flex-direction:column;gap:8px;}
.battle-card{background:var(--bg2);border:1px solid var(--border);padding:1rem 1.25rem;cursor:pointer;transition:border-color .15s,transform .15s;display:flex;align-items:center;gap:1rem;border-radius:var(--radius);}
.battle-card:hover{border-color:var(--border2);transform:translateX(2px);}
.bc-year{font-size:11px;min-width:40px;font-weight:700;flex-shrink:0;letter-spacing:.04em;}
.bc-edition{font-size:9px;font-weight:600;letter-spacing:.1em;color:var(--text3);background:var(--bg3);border:1px solid var(--border2);border-radius:2px;padding:1px 5px;margin-left:7px;vertical-align:middle;position:relative;top:-1px;text-transform:uppercase;}
.bc-views{font-size:10px;color:var(--text3);display:inline-flex;align-items:center;gap:3px;margin-left:8px;vertical-align:middle;}
.bc-main{flex:1;min-width:0;}
.bc-title{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bc-meta{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bc-meta .bc-location{color:#ff7f11;}
.bc-meta .bc-judges-label{color:#A78BFA;}
.bc-meta .bc-judges-names{color:var(--text2);}
.bc-meta .bc-stat{color:var(--text2);}
.bc-vs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex-shrink:0;}
.bc-rapper{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.bc-sep{font-size:10px;color:var(--text3);}
.bc-winner{font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;color:#ffffff!important;font-weight:700;border-radius:var(--radius);flex-shrink:0;background:var(--winner-green);}
.bc-winners{display:flex;gap:4px;flex-wrap:wrap;flex-shrink:0;}
.winners-check-wrap{display:flex;flex-direction:column;gap:6px;padding:6px 0;}
.winner-check-item{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:600;}
.winner-check-item input[type=checkbox]{accent-color:var(--winner-green);width:15px;height:15px;cursor:pointer;}
.winner-check-none{font-size:12px;color:var(--text3);font-style:italic;margin-top:2px;}
.bc-video-icon{color:var(--text3);font-size:14px;flex-shrink:0;}
.empty-state{text-align:center;padding:3rem;color:var(--text3);font-size:12px;letter-spacing:.1em;text-transform:uppercase;}

/* ── BATTLE VIEW ── */
#v-battle{max-width:1300px;margin:0 auto;}
.bv-layout{display:grid;grid-template-columns:260px minmax(0,740px) 260px;gap:0;align-items:start;justify-content:center;}
.bv-center{min-width:0;}
.bv-sidebar{position:relative;padding-top:0;}
.bv-sidebar-left{padding-right:1rem;}
.bv-sidebar-right{padding-left:1rem;}
@media(max-width:1100px){.bv-layout{grid-template-columns:1fr;}.bv-sidebar{display:none;}}

/* ── NEW BATTLE VIEW HEADER ── */
.bv-hdr{margin-bottom:1.5rem;border-radius:var(--radius);overflow:hidden;}

/* Dark top stripe: context label + big title */
.bv-hdr-stripe{
  background:var(--text);color:#FAFAF8;
  padding:1.25rem 1.5rem 1rem;
  border-bottom:4px solid var(--accent);
}
.bv-archive-label{
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:#666;margin-bottom:.65rem;
  cursor:pointer;background:none;border:none;color:#888;
  display:inline-flex;align-items:center;gap:5px;
  transition:color .12s;
}
.bv-archive-label:hover{color:var(--accent);}
.bv-title{
  font-family:var(--display);font-size:42px;line-height:.95;
  letter-spacing:.02em;text-transform:uppercase;
  color:var(--bg);margin-bottom:0;word-break:break-word;
  cursor:pointer;transition:opacity .15s;
}
.bv-title:hover{opacity:.75;}

/* Red VS strip */
.bv-vs-strip{
  background:var(--accent);padding:.65rem 1.5rem;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.rapper-name-big{
  font-family:var(--display);font-size:26px;letter-spacing:.04em;
  text-transform:uppercase;color:#FAFAF8;line-height:1;
}
.vs-sep{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.45);font-weight:600;}
.vs-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.vs-team-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.bv-winner-badge{
  font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  background:#FAFAF8;color:var(--accent);
  padding:3px 9px;margin-left:6px;
}

/* Meta strip below VS bar */
.bv-meta-panel{
  background:var(--bg2);border:1px solid var(--border);
  border-top:none;padding:1rem 1.5rem;
}
.meta-row{display:flex;flex-wrap:wrap;gap:1.25rem;margin-bottom:.75rem;}
.meta-item{display:flex;flex-direction:column;gap:2px;}
.meta-lbl{font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--text3);}
.meta-val{font-size:12px;font-weight:600;color:var(--text);}

/* Winner section inside meta panel */
.bv-winner-section{
  display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0;
}
.bv-winner-label-sm{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);font-weight:600;}
.bc-winner{font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;color:#06281C;font-weight:700;border-radius:var(--radius);flex-shrink:0;background:var(--winner-green);}
.bc-winners{display:flex;gap:4px;flex-wrap:wrap;}

.ann-card{position:absolute;width:240px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);padding:.7rem .85rem;font-size:12px;line-height:1.6;color:var(--text2);transition:border-color .15s,box-shadow .15s,opacity .15s;cursor:default;display:none;}
.ann-card.active{display:block;}
.ann-card:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.ann-card-connector{position:absolute;top:50%;width:100%;height:1px;background:var(--border2);pointer-events:none;}
.ann-card-quote{font-family:var(--mono);font-size:10px;color:var(--accent);background:var(--accent-bg);padding:3px 6px;border-left:2px solid var(--accent);margin-bottom:.45rem;white-space:pre-wrap;word-break:break-word;border-radius:0 2px 2px 0;line-height:1.5;}
.ann-card-text{margin-bottom:.35rem;}
.ann-card-link{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:var(--accent);text-decoration:none;word-break:break-all;}
.ann-card-link:hover{text-decoration:underline;}
.ann-card-img{width:100%;border-radius:2px;margin-top:.35rem;display:block;}
.ann-card-actions{display:flex;gap:5px;margin-top:.5rem;border-top:1px solid var(--border);padding-top:.5rem;}
.ann-card-actions button{background:none;border:none;font-family:var(--font);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);cursor:pointer;padding:0;}
.ann-card-actions button:hover{color:var(--text);}
.ann-card-actions button.danger:hover{color:#FF6B6B;}
.yt-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-decoration:none;}
.yt-fallback img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55);}
.yt-fallback-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text);text-align:center;padding:1rem;}
.yt-fallback-play{width:64px;height:64px;border-radius:50%;background:rgba(245,196,0,.92);display:flex;align-items:center;justify-content:center;color:var(--bg);font-size:24px;transition:transform .15s,background .15s;}
.yt-fallback:hover .yt-fallback-play{transform:scale(1.08);background:var(--accent);}
.yt-fallback-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;}
.yt-fallback-sub{font-size:11px;color:var(--text2);}
.yt-embed-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.yt-embed-fallback img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55);}
.yt-embed-fallback .yt-fallback-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text);text-align:center;padding:1rem;pointer-events:none;}
.yt-embed-fallback .yt-fallback-play{width:64px;height:64px;border-radius:50%;background:rgba(245,196,0,.92);display:flex;align-items:center;justify-content:center;color:var(--bg);font-size:24px;transition:transform .15s,background .15s;}
.yt-embed-fallback:hover .yt-fallback-play{transform:scale(1.08);background:var(--accent);}
.yt-fallback-link{position:absolute;inset:0;z-index:2;}
.video-toggle-row{display:flex;align-items:center;gap:8px;margin-bottom:1rem;}

/* Rapper names inside the red VS strip — always white */
.bv-back{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);cursor:pointer;margin-bottom:.75rem;display:inline-flex;align-items:center;gap:6px;background:none;border:none;font-family:var(--font);transition:color .15s;}
.bv-back:hover{color:var(--accent);}
.bv-vs-strip .rapper-name-big{color:#FAFAF8 !important;}
.bv-vs-strip .vs-sep{color:rgba(255,255,255,.45);}

/* ── ROUND HEADER - use display font for round number ── */
.round-num{font-family:var(--display);font-size:18px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;}
.highlights-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1.5rem;overflow:hidden;}
.highlights-hdr{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;border-bottom:1px solid var(--border);cursor:pointer;user-select:none;}
.highlights-hdr:hover{background:var(--bg3);}
.highlights-title{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);font-weight:600;}
.highlights-toggle-arrow{font-size:12px;color:var(--text3);transition:transform .15s;}
.highlights-body{overflow:hidden;transition:max-height .25s ease,opacity .25s ease;}
.highlights-body.hl-body-collapsed{max-height:0!important;opacity:0;pointer-events:none;}
.highlights-empty{padding:.75rem 1rem;font-size:12px;color:var(--text3);font-style:italic;}
.highlights-list{display:grid;grid-template-columns:repeat(3,1fr);padding:.5rem;}
.highlight-item-wrap{display:flex;flex-direction:column;}
.highlight-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;border-radius:var(--radius);cursor:pointer;transition:background .15s;}
.highlight-item:hover{background:var(--bg3);}
.hl-ts{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:700;min-width:38px;flex-shrink:0;}
.hl-desc{font-size:12px;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hl-actions{display:flex;gap:4px;flex-shrink:0;opacity:0;transition:opacity .15s;}
.highlight-item:hover .hl-actions{opacity:1;}
.hl-btn{background:none;border:1px solid var(--border);border-radius:3px;color:var(--text3);font-size:11px;cursor:pointer;padding:2px 6px;transition:color .15s,border-color .15s;}
.hl-btn:hover{color:var(--text);border-color:var(--text3);}
.hl-btn.danger:hover{color:#FF6B6B;border-color:#FF6B6B;}
.hl-edit-row,.hl-add-row{display:flex;align-items:center;gap:6px;padding:.5rem .75rem;border-top:1px solid var(--border);background:var(--bg3);}
.hl-add-row{border-top:1px solid var(--border);}
.hl-ts-inp{width:72px!important;font-family:var(--mono)!important;}
.hl-desc-inp{flex:1;}
@media(max-width:700px){.highlights-list{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.highlights-list{grid-template-columns:1fr;}}
.bv-rating-panel{margin-bottom:1.5rem;}
.bv-rating-panel-inner{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;max-width:560px;margin-top:.5rem;}
.round-wrap{margin-bottom:1.75rem;}
.round-hdr{display:flex;align-items:baseline;gap:12px;border-top:1px solid var(--border);padding-top:1rem;margin-bottom:1.25rem;flex-wrap:wrap;}
.round-num{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;}
.round-info{font-size:12px;color:var(--text3);}
.round-winner-badge{margin-left:auto;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;font-weight:700;color:var(--bg);border-radius:var(--radius);}
.performer{margin-bottom:1.25rem;}
.performer-lbl{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;margin-bottom:8px;}
.quartina{font-family:var(--mono);font-size:13px;line-height:1.8;color:var(--text2);background:var(--bg2);padding:.75rem 2.5rem .75rem 1rem;border-left:2px solid;margin-bottom:2px;cursor:pointer;transition:background .15s;white-space:pre-wrap;border-radius:0 var(--radius) var(--radius) 0;user-select:text;-webkit-user-select:text;}
.quartina:hover{background:var(--bg3);}
.quartina.highlight{animation:flashHL 1.6s ease;}
@keyframes flashHL{0%,100%{background:var(--bg2);}30%{background:var(--accent-bg);}}

.quartina-wrap{position:relative;}
.quartina-btns{position:absolute;top:6px;right:8px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;opacity:0;transition:opacity .15s;}
.quartina-wrap:hover .quartina-btns{opacity:1;}
.quartina-edit-btn{font-size:11px;line-height:1;color:var(--text3);background:var(--bg3);border:1px solid var(--border);padding:3px 6px;cursor:pointer;border-radius:var(--radius);transition:color .15s,border-color .15s;}
.quartina-wrap:hover .quartina-edit-btn{color:var(--text);border-color:var(--border2);}
.quartina-ts-btn{font-size:10px;line-height:1;color:var(--accent);background:var(--accent-bg);border:1px solid var(--accent)44;padding:3px 6px;cursor:pointer;border-radius:var(--radius);white-space:nowrap;font-family:var(--mono);transition:background .15s,border-color .15s;}
.quartina-ts-btn:hover{background:var(--accent);color:var(--bg);border-color:var(--accent);}

.quartina-edit-area{font-family:var(--mono);font-size:13px;line-height:1.8;color:var(--text);background:var(--bg3);border:1px solid var(--accent);padding:.75rem 1rem;border-left:2px solid var(--accent);margin-bottom:2px;width:100%;resize:vertical;min-height:80px;outline:none;border-radius:0 var(--radius) var(--radius) 0;}
.quartina-edit-btns{display:flex;flex-direction:column;gap:6px;padding:4px 0 6px;margin-bottom:2px;}
.qe-ts-row{display:flex;align-items:center;gap:6px;}

.ann-mark{background:rgba(245,196,0,.18);border-bottom:2px solid var(--accent);cursor:pointer;border-radius:1px;transition:background .15s;}
.ann-mark:hover,.ann-mark.active{background:rgba(245,196,0,.38);}
.ann-popup{position:fixed;z-index:500;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);padding:.85rem 1rem;width:300px;max-width:calc(100vw - 2rem);box-shadow:0 12px 32px rgba(0,0,0,.6);font-size:12px;line-height:1.65;color:var(--text2);}
.ann-popup-title{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem;font-weight:700;display:flex;justify-content:space-between;align-items:center;}
.ann-popup-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;padding:0;line-height:1;}
.ann-popup-close:hover{color:var(--text);}
.ann-popup-link{display:inline-flex;align-items:center;gap:4px;margin-top:.5rem;font-size:11px;color:var(--accent);text-decoration:none;}
.ann-popup-link:hover{text-decoration:underline;}
.ann-popup-actions{display:flex;gap:6px;margin-top:.6rem;border-top:1px solid var(--border);padding-top:.6rem;}
.ann-sel-tooltip{position:fixed;z-index:400;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);padding:3px 8px;display:flex;align-items:center;gap:4px;box-shadow:0 4px 20px rgba(0,0,0,.6);}
.ann-sel-btn{background:none;border:none;color:var(--accent);font-family:var(--font);font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:2px 4px;font-weight:700;}
.ann-sel-btn:hover{color:var(--text);}
.ann-modal{width:480px;max-width:100%;}
.ann-modal textarea{background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--font);font-size:13px;padding:8px 10px;outline:none;resize:vertical;width:100%;min-height:80px;border-radius:var(--radius);transition:border-color .15s;margin-bottom:.6rem;}
.ann-modal textarea:focus{border-color:var(--accent);}
.ann-modal input[type=text]{background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--font);font-size:13px;padding:8px 10px;outline:none;width:100%;border-radius:var(--radius);transition:border-color .15s;margin-bottom:.75rem;}
.ann-modal input[type=text]:focus{border-color:var(--accent);}
.ann-img-preview{width:100%;max-height:160px;object-fit:cover;border-radius:var(--radius);margin-bottom:.6rem;display:none;}
.ann-img-preview.visible{display:block;}
.ann-img-drop{border:1px dashed var(--border2);border-radius:var(--radius);padding:.6rem 1rem;font-size:11px;color:var(--text3);text-align:center;cursor:pointer;margin-bottom:.75rem;transition:border-color .15s;}
.ann-img-drop:hover{border-color:var(--accent);color:var(--text2);}
.ann-img-size-warn{font-size:10px;color:#FF6B6B;margin-top:-0.5rem;margin-bottom:.5rem;display:none;}
.ann-selected-text{font-family:var(--mono);font-size:11px;color:var(--accent);background:var(--accent-bg);padding:5px 8px;border-radius:2px;margin-bottom:.75rem;white-space:pre-wrap;word-break:break-word;border-left:2px solid var(--accent);}
.tag-row{display:none;padding:6px 1rem 8px;background:var(--bg3);border-left:2px solid;margin-bottom:2px;align-items:center;gap:6px;flex-wrap:wrap;}
.tag-row.visible{display:flex;}
.tag-pill{font-size:10px;letter-spacing:.07em;text-transform:uppercase;padding:2px 8px;font-weight:600;cursor:pointer;border-radius:2px;}
.tag-pill-rm{cursor:pointer;margin-left:2px;opacity:.5;}
.tag-pill-rm:hover{opacity:1;}
.tag-add-btn{font-size:10px;color:var(--text3);background:none;border:1px dashed var(--border);padding:2px 8px;cursor:pointer;font-family:var(--font);letter-spacing:.05em;border-radius:2px;}
.tag-add-btn:hover{border-color:var(--text3);color:var(--text2);}
.bv-footer{border-top:1px solid var(--border);padding-top:1.25rem;margin-top:.5rem;display:flex;gap:2rem;flex-wrap:wrap;}
.toggle-tags-btn{font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:none;border:1px solid var(--border);color:var(--text3);padding:6px 14px;cursor:pointer;font-family:var(--font);border-radius:var(--radius);transition:all .15s;}
.toggle-tags-btn:hover{border-color:var(--border2);color:var(--text2);}
.toggle-tags-btn.on{border-color:var(--accent);color:var(--accent);}

.video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: var(--bg2);
    border: 1px solid var(--border);
    margin-bottom: 1.5rem;
    border-radius: var(--radius);
    overflow: hidden;
}

.video-wrap iframe, .video-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── MINI PLAYER ── */
.video-wrap--mini{
  position:fixed!important;
  bottom:1.5rem;
  right:1rem;
  z-index:150;
  width:320px;
  padding-bottom:0!important;
  height:180px;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.7);
  border:1px solid var(--border2);
  opacity:1;
  pointer-events:auto;
}
.video-wrap--mini iframe{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}
#mini-player-close-btn{
  position:fixed;
  bottom:calc(1.5rem + 180px - 20px);
  right:1rem;
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);
  border:none;border-radius:50%;
  color:var(--text2);font-size:13px;cursor:pointer;
  line-height:1;z-index:151;
  transition:background .15s,color .15s;
}
#mini-player-close-btn:hover{background:rgba(0,0,0,.85);color:#fff;}
#mini-player-placeholder{
  width:100%;
  padding-bottom:56.25%;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:1.5rem;
}
@media(min-width:1300px){
  .video-wrap--mini{right:calc((90vw - 1300px) / 2);}
  #mini-player-close-btn{right:1rem;}
}
@media(max-width:1100px){
  .video-wrap--mini{
    width:170px;
    height:96px;
    bottom:.85rem;
    right:.85rem;
  }
  #mini-player-close-btn{
    bottom:calc(.85rem + 76px); /* bottom + height(96) - closeBtn(20) */
    right:.85rem;
  }
}
@media(max-width:380px){
  .video-wrap--mini{width:138px;height:78px;}
  #mini-player-close-btn{bottom:calc(.85rem + 58px);}
}

#v-editor{max-width:860px;margin:0 auto;}
.editor-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:.75rem;}
.editor-hdr h2{font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:var(--text3);font-weight:500;}
.section{background:var(--bg2);border:1px solid var(--border);padding:1.25rem;margin-bottom:1rem;border-radius:var(--radius);}
.section-title{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;font-weight:600;display:flex;align-items:center;justify-content:space-between;}
.field-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:.75rem;}
.field{display:flex;flex-direction:column;gap:4px;flex:1;min-width:140px;position:relative;}
.field.full{flex:0 0 100%;min-width:100%;}
.field label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);}
.field input,.field select,.field textarea{background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--font);font-size:13px;padding:8px 10px;outline:none;resize:vertical;width:100%;border-radius:var(--radius);transition:border-color .15s;}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);}
.field select option{background:var(--bg3);}
.field textarea{font-family:var(--mono);font-size:12px;line-height:1.7;min-height:80px;}
.field-hint{font-size:10px;color:var(--text3);margin-top:2px;}

.video-input-row{display:flex;gap:.5rem;align-items:flex-end;flex-wrap:wrap;}
.video-type-toggle{display:flex;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.video-type-btn{background:var(--bg3);border:none;color:var(--text3);font-family:var(--font);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;cursor:pointer;transition:all .15s;}
.video-type-btn.active{background:var(--accent);color:var(--bg);}
.video-preview{margin-top:.75rem;}

/* Dropdown suggerimenti */
.autocomplete-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:250 !important;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);max-height:240px;overflow-y:auto;box-shadow:0 12px 32px rgba(0,0,0,0.6);display:none;padding:4px 0;}
.autocomplete-item{width:100%;display:block;background:none;border:none;border-bottom:1px solid var(--border);color:var(--text2);font-family:var(--font);font-size:12px;text-align:left;padding:8px 12px;cursor:pointer;transition:all .12s;}
.autocomplete-item:hover{background:var(--accent-bg);color:var(--accent);}
.autocomplete-item:last-child{border-bottom:none;}
.autocomplete-menu::-webkit-scrollbar{width:4px;}
.autocomplete-menu::-webkit-scrollbar-track{background:var(--bg);}
.autocomplete-menu::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
.autocomplete-menu::-webkit-scrollbar-thumb:hover{background:var(--accent);}

.participants-list{display:flex;flex-direction:column;gap:6px;margin-bottom:.75rem;}
.participant-row{display:flex;align-items:center;gap:8px;position:relative;}
.participant-color{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
.participant-input{flex:1;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--font);font-size:13px;padding:6px 9px;outline:none;border-radius:var(--radius);transition:border-color .15s;}
.participant-input:focus{border-color:var(--accent);}
.rm-btn{background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;padding:2px 6px;line-height:1;font-family:var(--font);border-radius:var(--radius);transition:color .15s;}
.rm-btn:hover{color:#FF6B6B;}

.round-editor{background:var(--bg3);border:1px solid var(--border);padding:1rem;margin-bottom:.75rem;border-radius:var(--radius);}
.round-editor-hdr{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;flex-wrap:wrap;}
.round-editor-num{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;}
.round-editor-actions{margin-left:auto;display:flex;gap:6px;}
.entrate-list{display:flex;flex-direction:column;gap:6px;margin-bottom:.75rem;}
.entrata-row{display:flex;gap:8px;align-items:flex-start;}
.entrata-rapper-btn{flex-shrink:0;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:8px 12px;border:2px solid;background:transparent;cursor:pointer;font-family:var(--font);transition:all .15s;white-space:nowrap;min-width:110px;text-align:center;border-radius:var(--radius);}
.entrata-rapper-btn:hover{opacity:.8;}
.entrata-textarea{flex:1;background:var(--bg2);border:1px solid var(--border);color:var(--text);font-family:var(--mono);font-size:12px;line-height:1.7;padding:8px 10px;outline:none;resize:vertical;min-height:140px;border-radius:var(--radius);transition:border-color .15s;}
.entrata-textarea:focus{border-color:var(--accent);}
.entrata-rm{background:none;border:none;color:var(--text3);cursor:pointer;font-size:18px;padding:6px;line-height:1;align-self:flex-start;border-radius:var(--radius);transition:color .15s;}
.entrata-rm:hover{color:#FF6B6B;}
.rapper-picker{display:flex;flex-wrap:wrap;gap:6px;padding:.75rem;background:var(--bg2);border:1px solid var(--border);margin-bottom:.75rem;border-radius:var(--radius);}
.raw-text-panel{background:var(--bg3);border:1px solid var(--accent);border-radius:var(--radius);padding:.875rem 1rem;margin-bottom:.75rem;}.raw-text-panel .entrata-textarea{width:100%;box-sizing:border-box;}
.rapper-pick-btn{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:6px 14px;border:2px solid;background:transparent;cursor:pointer;font-family:var(--font);transition:opacity .15s;border-radius:var(--radius);}
.rapper-pick-btn:hover{opacity:.7;}
.rapper-picker-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);width:100%;margin-bottom:4px;}

/* ── MODAL ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;align-items:center;justify-content:center;padding:1rem;}
.modal-overlay.open{display:flex;}
.modal{background:var(--bg2);border:1px solid var(--border2);padding:1.5rem;width:340px;max-width:100%;border-radius:var(--radius);}
.modal h3{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;}
.modal input{background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--font);font-size:13px;padding:8px 10px;width:100%;outline:none;margin-bottom:.75rem;border-radius:var(--radius);}
.modal input:focus{border-color:var(--accent);}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;}
.tag-suggestions{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:.75rem;}
.tag-sug-pill{font-size:10px;letter-spacing:.07em;text-transform:uppercase;padding:3px 9px;background:var(--bg3);border:1px solid var(--border);color:var(--text3);cursor:pointer;border-radius:2px;transition:all .15s;}
.tag-sug-pill:hover{border-color:var(--accent);color:var(--accent);}
#confirm-modal{z-index:99999 !important;}

/* ── TOAST ── */
#toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--bg3);border:1px solid var(--border2);color:var(--text);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:10px 16px;z-index:300;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none;border-radius:var(--radius);}
#toast.show{opacity:1;transform:translateY(0);}
#update-banner{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(12px);background:var(--accent);color:#0A0A0A;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:10px 20px;z-index:400;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;border-radius:var(--radius);display:flex;align-items:center;gap:12px;white-space:nowrap;}
#update-banner.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
#update-banner button{background:#0A0A0A;color:var(--accent);border:none;font-family:var(--font);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:4px 12px;cursor:pointer;border-radius:2px;}
#update-banner button:hover{background:#1a1a1a;}
#version-banner{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(12px);background:#0E7490;color:#E8E8E0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:10px 20px;z-index:401;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;border-radius:var(--radius);display:flex;align-items:center;gap:12px;white-space:nowrap;}
#version-banner.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
#version-banner button{background:rgba(255,255,255,.15);color:#E8E8E0;border:none;font-family:var(--font);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:4px 12px;cursor:pointer;border-radius:2px;}
#version-banner button:hover{background:rgba(255,255,255,.25);}

/* ── RESPONSIVE ── */
@media (max-width:860px){
  .filters-row{grid-template-columns:repeat(2,1fr);}
  .filter-group.wide{grid-column:span 2;}
  .filters-row-2{grid-template-columns:1fr 1fr;gap:10px;}
  .stats-body{grid-template-columns:1fr;}
  .stats-sidebar{display:none;}
  .stats-panel-row{grid-template-columns:1fr;}
}
@media (max-width:640px){
  /* Safety net: nessun elemento può più "sforare" e creare scroll orizzontale della pagina */
  html,body{overflow-x:hidden;max-width:100vw;}
  body{font-size:13px;}
  #nav{padding:0 .65rem;overflow:hidden;}
  .nav-logo{margin-right:.5rem;font-size:21px;}
  .hamburger{display:flex;flex-shrink:0;}
  .nav-links{position:fixed;top:54px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--border);flex-direction:column;align-items:stretch;height:auto;max-height:calc(100vh - 54px);overflow-y:auto;display:none;z-index:99;}
  .nav-links.open{display:flex;}
  .nav-btn{height:auto;padding:.9rem 1.25rem;border-bottom:1px solid var(--border);border-left:2px solid transparent;justify-content:flex-start;}
  .nav-btn.active{border-left-color:var(--accent);border-bottom-color:var(--border);}
  /* La barra azioni a destra non deve mai spingere la pagina fuori schermo:
     se non ci sta tutta, scorre orizzontalmente al suo interno invece di deformare il layout */
  .nav-right{gap:4px;min-width:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
  .nav-right::-webkit-scrollbar{display:none;}
  .nav-right .btn{flex-shrink:0;}
  .nav-right .btn span.lbl{display:none;}
  .nav-right .btn{padding:6px 9px;}
  /* "Esporta JSON" → solo icona su mobile (il testo "JSON" non era dentro lo span.lbl
     e restava sempre visibile, allargando la barra) */
  #export-json-btn{font-size:0;padding:6px 10px;}
  #export-json-btn::before{content:"⬇";font-size:14px;font-family:var(--font);}
  .view{padding:1rem;}
  .filters-row{grid-template-columns:1fr;}
  .filter-group.wide{grid-column:span 1;}
  .filter-actions{flex-direction:column;}
  .filter-actions .btn{width:100%;text-align:center;}
  .filters-row-3{flex-direction:column;align-items:stretch;}
  .filters-row-3 .filter-group{width:100%;}
  /* Il pannello filtri non resta più "incollato" in alto durante lo scroll:
     su schermi piccoli occupava in modo permanente troppo spazio verticale */
  #archive-filters-panel{position:static;top:auto;}
  /* Input a 16px: evita lo zoom automatico di iOS Safari quando si tocca un campo */
  #archive-filters-panel .filter-input{font-size:16px;padding:9px 10px;}
  /* Filtri collassati → resta visibile solo la "Ricerca testo", come già accade
     per la riga aggiuntiva (rapper, tag, voto minimo, ordinamento…) */
  #archive-filters-panel.panel-collapsed .filters-row > .filter-group:not(:first-child){
    display:none;
  }
  #archive-toggle-filters-btn{width:100%;margin-left:0;text-align:center;padding:10px 14px;}
  .battle-card{flex-wrap:wrap;align-items:flex-start;row-gap:6px;}
  .bc-year{order:1;flex-shrink:0;}
  .bc-video-icon{order:1;}
  .bc-main{order:2;flex:1 1 100%;min-width:0;}
  /* Niente più ellipsis: su mobile c'è spazio in verticale, meglio andare a capo
     che perdere informazioni (luogo, round, fase, giudici, views...) */
  .bc-title{white-space:normal;overflow:visible;text-overflow:initial;line-height:1.4;}
  .bc-meta{white-space:normal;overflow:visible;text-overflow:initial;line-height:1.7;margin-top:2px;}
  .bc-vs{order:3;flex:0 0 100%;margin-top:6px;}
  .bc-winners{order:4;flex:0 0 100%;margin-top:4px;}
  .bv-title{font-size:28px;}
  .vs-row{gap:8px;}
  .rapper-name-big{font-size:15px;}
  .bv-actions .btn span.lbl{display:none;}
  .field-row{flex-direction:column;}
  .field{min-width:100%;}
  .entrata-row{flex-direction:column;}
  .entrata-rapper-btn{min-width:auto;align-self:flex-start;}
  .entrata-rm{align-self:flex-end;margin-top:-40px;}
  .round-editor-hdr{flex-direction:column;align-items:flex-start;}
  .round-editor-actions{margin-left:0;}
  .editor-hdr{flex-direction:column;align-items:stretch;}
  .editor-hdr > div{display:flex;gap:8px;}
  .editor-hdr .btn{flex:1;}
  .stats-kpi-strip{grid-template-columns:1fr 1fr;}
  .stats-table th,.stats-table td{font-size:10px;padding:4px 6px;}
  .stats-table .name-cell{max-width:120px;}
  .stats-panel-body-inner{overflow-x:auto;}
  .stats-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .stats-table-scroll::after{content:'↝ scorri →';display:block;font-size:9px;color:var(--text3);text-align:right;margin-top:4px;}
  .fp-card-inner{flex-direction:column;min-height:unset;}
  .fp-left{order:1;width:100%;flex-direction:column;align-items:center;padding:20px 16px 14px;gap:0;position:relative;}
  .fp-ovr{position:absolute;top:14px;left:14px;font-size:40px;line-height:1;}
  .fp-pos{position:absolute;top:58px;left:18px;font-size:10px;}
  .fp-player-frame{width:130px;height:155px;margin-top:0;flex-shrink:0;}
  .fp-name{font-size:15px;margin-top:8px;letter-spacing:.12em;}
  .fp-meta{font-size:11px;margin-top:4px;justify-content:center;}
  .fp-mini-grid{width:100%;margin-top:10px;border-top:1px solid #1e1e2e;grid-template-columns:repeat(2,1fr) !important;gap:6px;}
  .fp-mini-cell{padding:8px 4px;border:1px solid #1e1e2e;border-radius:4px;background:#0d0d1a;}
  .fp-mini-key{font-size:10px;letter-spacing:.12em;}
  .fp-mini-val{font-size:18px;font-weight:800;}
  .fp-center{order:3;display:flex;flex-direction:column;align-items:center;padding:14px 16px 8px;gap:12px;border-top:1px solid #1e1e2e;}
  .fp-center svg:first-child{width:min(240px,75vw) !important;height:min(240px,75vw) !important;margin:8px auto;}
  .fp-center > div{width:100%;}
  .fp-stat-cols{gap:0;}
  .fp-stat-row{padding:5px 0;}
  .fp-stat-n{min-width:80px;font-size:10px;}
  .fp-stat-v{font-size:14px;}
  .fp-right{order:2;width:100%;padding:14px 16px;align-items:flex-start;text-align:left;border-top:1px solid #1e1e2e;gap:12px;}
  .fp-right > div:first-child{width:100%;}
  .fp-right-name{font-size:17px;text-align:left;word-break:break-word;}
  .fp-right-sub{text-align:left;flex-direction:row;flex-wrap:wrap;gap:6px;margin-top:4px;}
  .fp-right-sub > div{display:flex;align-items:center;gap:4px;}
  .fp-badges{justify-content:flex-start !important;}
  .fp-years{font-size:12px;color:var(--accent);background:var(--accent-bg);display:inline-block;padding:3px 10px;border-radius:var(--radius);margin-top:6px;letter-spacing:.05em;}
  .fp-record-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px;margin-top:10px !important;}
  .fp-rec-box{padding:10px 6px;}
  .fp-rec-num{font-size:20px;}
  .fp-rec-lbl{font-size:9px;letter-spacing:.12em;}
  .fp-special-cards-row{flex-direction:column;gap:12px;}
  .fp-special-card{width:100%;max-width:100%;flex-direction:row;justify-content:flex-start;gap:12px;padding:12px 16px;align-items:center;background:#0a0a12;border:1px solid #2a2a3a;overflow:hidden;}
  .fp-special-card .fp-sc-bg-deco{display:block !important;position:absolute;inset:0;z-index:0;pointer-events:none;}
  .fp-sc-emoji{font-size:24px;margin-bottom:0;position:relative;z-index:2;}
  .fp-sc-label{font-size:10px;margin-bottom:0;width:70px;position:relative;z-index:2;}
  .fp-sc-img-wrap{width:56px;height:64px;position:relative;z-index:2;}
  .fp-sc-name{font-size:14px;text-align:left;flex:1;position:relative;z-index:2;}
  .fp-sc-sub{font-size:10px;text-align:right;position:relative;z-index:2;}
  .profile-section-title{font-size:11px;}
  .profile-section .battle-link-list{grid-template-columns:1fr;}
  .battle-link-item{padding:12px;}
  .bli-name{font-size:14px;white-space:normal;}
  .bli-sub{font-size:11px;}
  .entity-card.fifa-card{padding:.75rem;min-height:70px;}
  .fifa-tier-badge{width:40px;height:40px;}
  .fifa-tier-badge .tier-letter{font-size:18px;}
  .fifa-tier-badge .tier-overall{font-size:8px;}
}
@media (min-width:641px){.nav-links{display:flex !important;}}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:var(--border2);}

/* ── STATS PAGE ── */
#v-stats{max-width:100%;margin:0;padding:0;}
.stats-dashboard{display:flex;flex-direction:column;height:calc(100vh - var(--nav-h,56px) - 1px);overflow:hidden;}
.stats-topbar{display:flex;align-items:center;gap:0;padding:0 12px;border-bottom:1px solid var(--border);background:var(--bg);flex-shrink:0;height:42px;}
.stats-topbar-label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--text3);font-weight:600;margin-right:16px;white-space:nowrap;}
.stats-cat-tabs{display:flex;gap:0;margin:0;border-right:1px solid var(--border);padding-right:12px;margin-right:12px;}
.stats-cat-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--text3);font-family:var(--font);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:0 14px;height:42px;cursor:pointer;transition:all .15s;font-weight:600;}
.stats-cat-tab:hover{color:var(--text);}
.stats-cat-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.stats-subtabs{display:flex;gap:0;border:none;border-radius:0;margin:0;padding:0;border-right:1px solid var(--border);padding-right:12px;margin-right:12px;}
.stats-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--text3);font-family:var(--font);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:0 12px;height:42px;cursor:pointer;transition:all .15s;}
.stats-tab:hover{color:var(--text);}
.stats-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.stats-period{display:flex;gap:4px;align-items:center;margin:0;padding:0;}
.period-btn{background:none;border:1px solid transparent;color:var(--text3);font-family:var(--font);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;cursor:pointer;border-radius:var(--radius);transition:all .12s;}
.period-btn:hover{border-color:var(--border2);color:var(--text);}
.period-btn.active{border-color:var(--accent);color:var(--accent);}
.stats-custom-range{display:none;gap:8px;align-items:center;flex-wrap:wrap;padding:.4rem .9rem;border-top:1px solid var(--border);background:var(--bg2);}
.stats-custom-range.active{display:flex;}
.stats-custom-range label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);}
.stats-custom-range input[type="date"]{background:var(--bg3);border:1px solid var(--border2);color:var(--text);font-family:var(--font);font-size:11px;padding:4px 7px;border-radius:var(--radius);outline:none;color-scheme:dark;}
.stats-custom-range input[type="date"]:focus{border-color:var(--accent);}
.stats-custom-range .stats-custom-hint{font-size:10px;color:var(--text3);}
.stats-body{display:grid;grid-template-columns:220px 1fr;flex:1;min-height:0;overflow:hidden;}
.stats-sidebar{border-right:1px solid var(--border);overflow-y:auto;background:var(--bg);padding:8px 0;flex-shrink:0;}
.stats-sidebar-section{padding:0 0 8px 0;margin-bottom:4px;border-bottom:1px solid var(--border);}
.stats-sidebar-section:last-child{border-bottom:none;}
.stats-sidebar-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);font-weight:700;padding:6px 14px 4px;}
.stats-sidebar-item{display:flex;align-items:center;gap:8px;padding:5px 14px;cursor:pointer;font-size:12px;color:var(--text2);transition:all .12s;border-left:2px solid transparent;}
.stats-sidebar-item:hover{background:var(--bg3);color:var(--text);}
.stats-sidebar-item.active{background:var(--bg2);color:var(--accent);border-left-color:var(--accent);font-weight:600;}
.stats-sidebar-item .ssi-val{margin-left:auto;font-size:10px;color:var(--text3);font-family:var(--mono);}
.stats-sidebar-item.active .ssi-val{color:var(--accent);}
.stats-main{overflow-y:auto;padding:0;background:var(--bg);}
.stats-main-inner{padding:10px 14px;display:flex;flex-direction:column;gap:8px;}
.stats-kpi-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;}
.stat-kpi{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem 1rem;}
.stat-kpi-label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:.3rem;}
.stat-kpi-value{font-size:22px;font-weight:700;color:var(--text);line-height:1.1;}
.stat-kpi-sub{font-size:10px;color:var(--text3);margin-top:.25rem;}
.stat-kpi-up{color:#34D399;}
.stat-kpi-down{color:#FF6B6B;}

.stats-panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.stats-panel-header{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;user-select:none;border-bottom:1px solid var(--border);}
.stats-panel-header:hover{background:var(--bg3);}
.stats-panel-title{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);font-weight:700;flex:1;}
.stats-panel-meta{font-size:10px;color:var(--text3);font-family:var(--mono);}
.stats-panel-toggle{font-size:10px;color:var(--text3);margin-left:4px;transition:transform .2s;display:inline-block;}
.stats-panel.collapsed .stats-panel-toggle{transform:rotate(-90deg);}
.stats-panel-body{overflow:hidden;transition:max-height .25s ease;}
.stats-panel.collapsed .stats-panel-body{max-height:0 !important;}
.stats-panel-body-inner{padding:10px 12px;}
.stats-panel-body.preview-mode{max-height:var(--preview-h,200px);overflow:hidden;position:relative;}
.stats-panel-body.preview-mode::after{content:'';position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(transparent,var(--bg2));pointer-events:none;}
.stats-panel-expand{display:block;width:100%;background:none;border:none;border-top:1px solid var(--border);color:var(--text3);font-family:var(--font);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:6px;cursor:pointer;text-align:center;transition:all .15s;}
.stats-panel-expand:hover{background:var(--bg3);color:var(--text);}
.stats-panel-row{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start;}
.stats-panel-row.stats-table-row{grid-template-columns:1fr 1fr;}
@media(max-width:900px){.stats-panel-row.stats-table-row{grid-template-columns:1fr;}}
.stats-panel-row.thirds{grid-template-columns:1fr 1fr 1fr;}
.fifa-radar-svg{width:100% !important;height:auto !important;max-width:260px !important;display:block;margin:0 auto;}
.stats-panel .multi-line-svg{width:100% !important;height:auto !important;max-width:100% !important;display:block;margin:0 auto;}
.stats-table svg{width:70px !important;height:20px !important;max-width:70px !important;display:block;margin:0 auto;}
.stats-table{width:100%;table-layout:auto;}
.stats-table th{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);text-align:left;padding:4px 8px 6px;font-weight:600;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg2);z-index:1;}
.stats-table td{font-size:12px;color:var(--text2);padding:6px 8px;border-bottom:1px solid var(--border);vertical-align:middle;}
.stats-table tr:last-child td{border-bottom:none;}
.stats-table tr:hover td{background:var(--bg3);}
.stats-table .rank{color:var(--text3);font-size:10px;min-width:18px;text-align:center;}
.stats-table .name-cell{color:var(--text);font-weight:600;cursor:default;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-word;}
.stats-table .views-bar-wrap{display:flex;align-items:center;gap:8px;}
.stats-bar{height:4px;border-radius:2px;background:var(--accent);flex-shrink:0;min-width:2px;}
.stats-table .num{color:var(--text);font-weight:600;text-align:right;}
.stats-table .delta{font-size:10px;text-align:right;}
.stats-table .ctr{text-align:center;}
.stats-table th.num,.stats-table th.delta{text-align:right;}
.stats-table th.ctr,.stats-table th.rank{text-align:center;}
.stats-table th[title]{cursor:help;border-bottom:1px dotted var(--border2);}
.stats-table td.pct-cell .views-bar-wrap{justify-content:center;}
.stats-table th, .stats-table td{white-space:nowrap;}
.stats-table th.name-cell, .stats-table td.name-cell{white-space:normal;}
.stats-table-scroll{overflow-x:hidden;overflow-y:visible;max-height:none;width:100%;}
.stats-empty{color:var(--text3);font-size:12px;padding:2rem;text-align:center;letter-spacing:.08em;}
.stats-select{background:var(--bg3);border:1px solid var(--border2);color:var(--text);font-family:var(--font);font-size:11px;padding:4px 9px;border-radius:var(--radius);cursor:pointer;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:1.5rem;}
@media(max-width:700px){.stats-kpi-strip{grid-template-columns:1fr 1fr;}}
@media(max-width:860px){.stats-topbar{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;gap:0;padding:0 12px;scrollbar-width:thin;}
.stats-topbar::-webkit-scrollbar{height:4px;}
.stats-topbar::-webkit-scrollbar-track{background:var(--bg2);}
.stats-topbar::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px;}
.stats-topbar > *{display:inline-flex;vertical-align:middle;white-space:nowrap;flex-shrink:0;}
.stats-cat-tabs,.stats-subtabs,.stats-period{display:inline-flex;flex-wrap:nowrap;gap:0;}
.stats-cat-tab,.stats-tab,.period-btn{padding:0 10px;font-size:10px;white-space:nowrap;}}

/* ── FREESTYLER / EVENT PAGES ── */
#v-event,#v-events-list{max-width:1700px;margin:0 auto}
#v-freestyler,#v-event,#v-freestylers-list,#v-events-list{max-width:1700px;margin:0 auto;}
.profile-hdr{display:flex;align-items:flex-start;gap:1.5rem;margin-bottom:1.75rem;flex-wrap:wrap;}
.profile-avatar-wrap{position:relative;flex-shrink:0;}
.profile-avatar{width:96px;height:96px;border-radius:var(--radius);object-fit:cover;border:2px solid var(--border2);background:var(--bg3);display:block;}
.profile-avatar-placeholder{width:96px;height:96px;border-radius:var(--radius);border:2px dashed var(--border2);background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--text3);}
.avatar-edit-btn{position:absolute;bottom:4px;right:4px;background:var(--bg);border:1px solid var(--border2);color:var(--text3);font-size:10px;cursor:pointer;padding:2px 6px;border-radius:2px;font-family:var(--font);transition:all .15s;}
.avatar-edit-btn:hover{border-color:var(--accent);color:var(--accent);}
.profile-info{flex:1;min-width:0;}
.profile-name{font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem;word-break:break-word;}
.profile-meta{font-size:11px;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.75rem;display:flex;flex-wrap:wrap;gap:.75rem;}
.profile-meta span{display:flex;align-items:center;gap:4px;}
.profile-bio{font-size:13px;color:var(--text2);line-height:1.7;margin-bottom:.75rem;}
.profile-bio-edit{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--font);font-size:13px;padding:8px 10px;outline:none;resize:vertical;border-radius:var(--radius);min-height:60px;transition:border-color .15s;}
.profile-bio-edit:focus{border-color:var(--accent);}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:1.75rem;}
.stat-box{background:var(--bg2);border:1px solid var(--border);padding:.75rem 1rem;border-radius:var(--radius);text-align:center;}
.stat-num{font-size:22px;font-weight:700;color:var(--accent);font-family:var(--mono);}
.stat-lbl{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--text3);margin-top:2px;}

.winrate-row{display:flex;align-items:center;gap:10px;margin-bottom:1.75rem;}
.winrate-bar-wrap{flex:1;height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;}
.winrate-bar{height:100%;background:var(--winner-green);border-radius:3px;transition:width .4s;}
.winrate-lbl{font-size:11px;color:var(--text2);white-space:nowrap;}

.profile-section{margin-bottom:1.75rem;}
.profile-section-title{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:.75rem;display:flex;align-items:center;justify-content:space-between;}

.battle-link-list{display:flex;flex-direction:column;gap:6px;}
.battle-link-item{background:var(--bg2);border:1px solid var(--border);padding:.75rem 1rem;border-radius:var(--radius);cursor:pointer;display:flex;align-items:center;gap:.75rem;transition:border-color .15s,transform .15s;}
.battle-link-item:hover{border-color:var(--border2);transform:translateX(2px);}
.bli-year{font-size:11px;color:var(--text3);min-width:36px;flex-shrink:0;font-family:var(--mono);}
.bli-main{flex:1;min-width:0;}
.bli-name{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bli-sub{font-size:11px;color:var(--text3);margin-top:2px;}
.bli-badge{font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;font-weight:700;border-radius:var(--radius);flex-shrink:0;}
.bli-badge.win{background:var(--winner-green);color:#ffffff;}
.bli-badge.loss{background:d42b2b;color:white;}
.bli-badge.draw{background:var(--bg3);color:var(--text3);border:1px solid var(--border2);}
.bli-rating{font-size:10px;color:var(--accent);font-family:var(--mono);margin-top:4px;letter-spacing:.5px;}

.entities-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
.entity-card{background:var(--bg2);border:1px solid var(--border);padding:1rem;border-radius:var(--radius);cursor:pointer;display:flex;align-items:center;gap:.75rem;transition:border-color .15s,transform .15s;}
.entity-card:hover{border-color:var(--border2);transform:translateY(-1px);}
.entity-card-avatar{width:44px;height:44px;border-radius:var(--radius);object-fit:cover;border:1px solid var(--border2);background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text3);flex-shrink:0;}
.entity-card-avatar img{width:44px;height:44px;border-radius:var(--radius);object-fit:cover;}
.entity-card-info{flex:1;min-width:0;}
.entity-card-name{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.entity-card-sub{font-size:10px;color:var(--text3);margin-top:2px;}
.entity-card-extra{font-size:10px;color:var(--text3);margin-top:4px;display:flex;flex-wrap:wrap;gap:4px 8px;}
.entity-card-extra .location-indicator{color:var(--winner-green);}

/* ── FIFA-STYLE CARDS ── */
.entity-card.fifa-card{position:relative;background:linear-gradient(145deg,#0f0f1a 0%,#1a1a2e 100%);border:2px solid #2a2a3a;border-radius:12px;padding:1rem;overflow:hidden;transition:all .25s ease;min-height:90px;display:flex;align-items:center;gap:.75rem;}
.entity-card.fifa-card:hover{transform:translateY(-3px) scale(1.01);border-color:var(--accent);box-shadow:0 8px 30px rgba(0,0,0,.5);}
.entity-card.fifa-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.03) 0%,transparent 70%);pointer-events:none;}
.fifa-tier-container{margin-left:auto;flex-shrink:0;}
.fifa-tier-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;font-family:var(--font);font-weight:700;text-align:center;line-height:1;transition:all .2s;}
.fifa-tier-badge .tier-letter{font-size:22px;letter-spacing:.04em;text-shadow:0 0 10px currentColor;}
.fifa-tier-badge .tier-overall{font-size:10px;font-weight:600;opacity:.8;margin-top:1px;}
.entity-card:hover .fifa-tier-badge{transform:scale(1.05);}

/* ── SPECIAL FIFA CARDS (Amicone / Nemesi / Vittima / Bullo / Preda) ── */
.fp-special-cards-row{display:flex;gap:12px;margin-bottom:1.25rem;flex-wrap:wrap;}
.fp-special-card{position:relative;width:160px;min-width:140px;flex:1;max-width:200px;border-radius:var(--radius);border:1px solid #2a2a3a;overflow:hidden;cursor:pointer;transition:transform .15s,border-color .15s;display:flex;flex-direction:column;align-items:center;padding:10px 8px 12px;gap:4px;background:#0a0a12;}
.fp-special-card:hover{transform:translateY(-3px);border-color:var(--sc-accent,#FF6B6B);}
.fp-sc-bg-deco{position:absolute;inset:0;pointer-events:none;z-index:0;}
.fp-sc-bg-deco svg{display:block;width:100%;height:100%;}
.fp-sc-emoji{position:relative;z-index:2;font-size:14px;line-height:1;margin-bottom:2px;}
.fp-sc-label{position:relative;z-index:2;font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--sc-accent,#FF6B6B);font-weight:700;margin-bottom:4px;}
.fp-sc-img-wrap{position:relative;z-index:2;width:90px;height:100px;flex-shrink:0;}
.fp-sc-img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:drop-shadow(0 6px 20px var(--sc-accent,#FF6B6B));display:block;}
.fp-sc-img-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:42px;}
.fp-sc-name{position:relative;z-index:2;font-size:12px;font-weight:700;color:#fff;letter-spacing:.08em;text-transform:uppercase;text-align:center;line-height:1.2;}
.fp-sc-sub{position:relative;z-index:2;font-size:9px;color:var(--sc-accent,#FF6B6B);letter-spacing:.06em;text-align:center;opacity:.85;}

/* ── EVENTS LIST CARDS ── */
#v-events-list{max-width:1200px;margin:0 auto;}
.events-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
.ev-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:border-color .15s,transform .15s;overflow:hidden;display:flex;flex-direction:column;}
.ev-card:hover{border-color:var(--border2);transform:translateY(-2px);}
.ev-card-hdr{display:flex;align-items:center;gap:.85rem;padding:1rem 1rem .75rem;}
.ev-card-avatar{width:52px;height:52px;border-radius:var(--radius);border:1px solid var(--border2);background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--text3);flex-shrink:0;overflow:hidden;}
.ev-card-avatar img{width:52px;height:52px;object-fit:cover;}
.ev-card-title{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;margin-bottom:3px;word-break:break-word;}
.ev-card-years{font-size:11px;color:var(--accent);font-weight:600;letter-spacing:.06em;}
.ev-card-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.ev-card-stat{padding:.55rem .5rem;text-align:center;border-right:1px solid var(--border);}
.ev-card-stat:last-child{border-right:none;}
.ev-card-stat-val{font-size:16px;font-weight:700;color:var(--text);font-family:var(--mono);}
.ev-card-stat-lbl{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);margin-top:1px;}
.ev-card-editions{padding:.5rem 1rem .75rem;display:flex;flex-direction:column;gap:4px;}
.ev-card-ed-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text3);padding:3px 0;border-bottom:1px solid var(--border);}
.ev-card-ed-row:last-child{border-bottom:none;}
.ev-card-ed-label{color:var(--text2);font-weight:600;}
.ev-card-views{font-size:10px;color:var(--text3);font-family:var(--mono);}

.opponents-table{width:100%;border-collapse:collapse;}
.opponents-table th{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);font-weight:600;padding:4px 8px;border-bottom:1px solid var(--border);text-align:left;}
.opponents-table td{font-size:12px;padding:7px 8px;border-bottom:1px solid var(--border);color:var(--text2);}
.opponents-table tr:last-child td{border-bottom:none;}
.opponents-table tbody tr{cursor:pointer;transition:background .12s;}
.opponents-table tbody tr:hover{background:var(--bg3);}
.opponents-table .td-name{color:var(--text);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}

.event-participants-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;}
.event-participant-card{background:var(--bg2);border:1px solid var(--border);padding:.7rem 1rem;border-radius:var(--radius);cursor:pointer;display:flex;align-items:center;gap:.7rem;transition:border-color .15s;min-height:80px;}
.event-participant-card:hover{border-color:var(--border2);}
/* Vincitore del contest: bordo verde. TDS: bordo rosso.
   Se è entrambi: bordo verde esterno + anello rosso interno (doppio bordo). */
.event-participant-card.epc-winner{border-color:#34D399;border-width:2px;}
.event-participant-card.epc-tds{border-color:#FF6B6B;border-width:2px;}
.event-participant-card.epc-winner.epc-tds{border-color:#34D399;box-shadow:inset 0 0 0 2px #FF6B6B;}
.epc-avatar{width:42px;height:42px;border-radius:var(--radius);background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;overflow:hidden;}
.epc-avatar img{width:42px;height:42px;object-fit:cover;border-radius:var(--radius);}
.epc-name{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.epc-wins{font-size:10px;color:var(--winner-green);}

.avatar-file-input{display:none;}

/* ── FIFA STATS CARD ── */
.fifa-section{margin-bottom:1.75rem;}
.fifa-card-wrap{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:flex-start;}
.fifa-radar-wrap{flex:0 0 260px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;display:flex;flex-direction:column;align-items:center;gap:.75rem;}
.fifa-ovr{font-size:42px;font-weight:700;color:var(--accent);font-family:var(--mono);line-height:1;}
.fifa-ovr-lbl{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--text3);}
.fifa-radar-svg{width:200px;height:200px;}
.fifa-bars-wrap{flex:1;min-width:220px;display:flex;flex-direction:column;gap:0;}
.fifa-stat-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);}
.fifa-stat-row:last-child{border-bottom:none;}
.fifa-stat-val{font-size:16px;font-weight:700;font-family:var(--mono);min-width:28px;text-align:right;flex-shrink:0;}
.fifa-stat-name{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);min-width:90px;flex-shrink:0;}
.fifa-stat-bar-wrap{flex:1;height:5px;background:var(--bg4);border-radius:3px;overflow:hidden;}
.fifa-stat-bar{height:100%;border-radius:3px;transition:width .5s cubic-bezier(.4,0,.2,1);}
.fifa-stat-actions{display:flex;gap:8px;margin-top:.75rem;flex-wrap:wrap;}
.fifa-tier-low{color:#FF6B6B;}
.fifa-tier-mid{color:#F5C400;}
.fifa-tier-high{color:#34D399;}
.fifa-bar-low{background:#FF6B6B;}
.fifa-bar-mid{background:#F5C400;}
.fifa-bar-high{background:#34D399;}
.fifa-empty{background:var(--bg2);border:1px dashed var(--border2);border-radius:var(--radius);padding:2rem;text-align:center;color:var(--text3);font-size:12px;letter-spacing:.1em;text-transform:uppercase;}
.fifa-empty span{color:var(--accent);cursor:pointer;}


/* ── LIST CARDS (stile schede speciali) ── */
.fp-list-card {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid #2a2a3a;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 12px 14px;
  gap: 2px;
  background: #0a0a12;
  min-height: 200px;
  text-align: center;
}

.fp-list-card:hover {
  transform: translateY(-4px);
  border-color: var(--sc-accent, var(--accent));
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), var(--sc-accent, transparent) 0 0 20px;
}

/* Sfondo decorativo (ereditato) */
.fp-list-card .fp-sc-bg-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

.fp-list-card .fp-sc-bg-deco svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Emoji / icona */
.fp-list-card .fp-sc-emoji {
  position: relative;
  z-index: 1;
  font-size: 18px;
  line-height: 1;
  margin-bottom: 0;
}

/* Label (tier letter) */
.fp-list-card .fp-sc-label {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sc-accent, var(--text3));
  margin-bottom: 4px;
}

/* ── AVATAR CON TRASPARENZA ── */
.fp-list-card .fp-sc-img-wrap {
  position: relative;
  z-index: 1;
  width: 90px;          /* più grande per dare spazio alla trasparenza */
  height: 100px;
  flex-shrink: 0;
  /* 🔑 SENZA overflow: hidden – la trasparenza non deve essere tagliata */
  border-radius: 4px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important; /* nessuno sfondo */
}

.fp-list-card .fp-sc-img {
  width: 100%;
  height: 100%;
  object-fit: contain;  /* 🔑 mantiene la trasparenza e non ritaglia */
  display: block;
  filter: drop-shadow(0 6px 20px var(--sc-accent, #2a2a3a));
}

.fp-list-card .fp-sc-img-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  background: transparent;
}

/* Nome */
.fp-list-card .fp-sc-name {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-top: 2px;
}

/* Sottotitolo (stats) */
.fp-list-card .fp-sc-sub {
  position: relative;
  z-index: 1;
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 0.04em;
  opacity: 0.85;
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badge overall (in basso a destra) */
.fp-list-ovr {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 2px solid;
  background: rgba(0, 0, 0, 0.6);
  font-family: var(--font);
  line-height: 1;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 15px currentColor33;
}

.fp-list-ovr-letter {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: inherit;
}

.fp-list-ovr-num {
  font-size: 8px;
  font-weight: 600;
  opacity: 0.8;
  margin-top: 1px;
  color: inherit;
}

/* Responsive */
@media (max-width: 640px) {
  .fp-list-card {
    padding: 12px 8px 10px;
    min-height: 160px;
  }
  .fp-list-card .fp-sc-img-wrap {
    width: 56px;
    height: 64px;
  }
  .fp-list-card .fp-sc-name {
    font-size: 11px;
  }
  .fp-list-card .fp-sc-sub {
    font-size: 9px;
  }
  .fp-list-card .fp-sc-emoji {
    font-size: 14px;
  }
  .fp-list-card .fp-sc-label {
    font-size: 9px;
  }
  .fp-list-ovr {
    width: 30px;
    height: 30px;
    bottom: 6px;
    right: 6px;
  }
  .fp-list-ovr-letter {
    font-size: 11px;
  }
  .fp-list-ovr-num {
    font-size: 7px;
  }
}

/* ── PROFILO FREESTYLER FIFA CARD ── */
.fp-card-wrap{background:#0a0a12;border-radius:var(--radius);overflow:hidden;border:1px solid #2a2a3a;position:relative;margin-bottom:1.75rem;}
.fp-card-inner{display:flex;min-height:340px;position:relative;z-index:2;}
.fp-bg-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.fp-left{width:220px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding:18px 14px 14px;position:relative;z-index:2;}
.fp-ovr{position:absolute;top:12px;left:12px;font-size:38px;font-weight:700;color:#F5C400;font-family:var(--mono);line-height:1;text-shadow:0 0 18px rgba(245,196,0,.35);}
.fp-pos{position:absolute;top:54px;left:16px;font-size:11px;font-weight:700;color:#F5C400;letter-spacing:.12em;}
.fp-player-frame{width:170px;height:190px;margin-top:6px;position:relative;flex-shrink:0;}
.fp-player-img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;object-fit:cover;object-position:center center;filter:drop-shadow(0 6px 20px rgba(0,0,0,.7));z-index:2;}
.fp-player-emoji{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;font-size:72px;line-height:1;filter:drop-shadow(0 6px 20px rgba(0,0,0,.7));z-index:2;}
.fp-name{font-size:13px;font-weight:700;color:#fff;letter-spacing:.1em;text-transform:uppercase;margin-top:4px;text-align:center;}
.fp-meta{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:11px;color:#aaa;}
.fp-radar-big{display:none;}
.fp-center{flex:0 0 240px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:12px 8px 12px 0;z-index:2;position:relative;gap:8px;}
.fp-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border-top:1px solid #1e1e2e;margin-top:8px;width:100%;}
.fp-mini-cell{text-align:center;padding:5px 3px;border-right:1px solid #1e1e2e;}
.fp-mini-cell:nth-child(3n){border-right:none;}
.fp-mini-key{font-size:8px;letter-spacing:.1em;color:#999;text-transform:uppercase;}
.fp-mini-val{font-size:13px;font-weight:700;color:#F5C400;font-family:var(--mono);}
.fp-right{flex:1;padding:12px 14px 12px 8px;z-index:2;position:relative;display:flex;flex-direction:column;gap:10px;align-items:flex-end;text-align:right;}
.fp-right-name{font-size:20px;font-weight:700;color:#fff;letter-spacing:.04em;text-transform:uppercase;line-height:1.1;text-align:right;}
.fp-right-sub{font-size:9px;color:#aaa;letter-spacing:.14em;text-transform:uppercase;text-align:right;display:flex;flex-direction:column;gap:2px;}
.fp-badges{display:flex;gap:5px;flex-wrap:wrap;}
.fp-badge{font-size:8px;letter-spacing:.07em;text-transform:uppercase;padding:2px 7px;border-radius:2px;}
.fp-badge-purple{background:#1a1a2e;border:1px solid rgba(123,47,255,.3);color:#b89fff;}
.fp-badge-green{background:#0d1a10;border:1px solid rgba(52,211,153,.3);color:#34D399;}
.fp-badge-yellow{background:#1a1500;border:1px solid rgba(245,196,0,.3);color:#F5C400;}
.fp-custom-badges{display:flex;gap:5px;flex-wrap:wrap;}
.fp-custom-badge{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:2px;border:1px solid;cursor:default;}
.fp-custom-badge-edit{cursor:pointer;font-size:8px;opacity:.5;margin-left:2px;transition:opacity .15s;}
.fp-custom-badge-edit:hover{opacity:1;}
.fp-add-badge-btn{background:none;border:1px dashed #333;color:#555;font-family:var(--font);font-size:8px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:2px;cursor:pointer;transition:all .15s;}
.fp-add-badge-btn:hover{border-color:#F5C400;color:#F5C400;}
.fp-section-lbl{font-size:8px;letter-spacing:.18em;color:#aaa;text-transform:uppercase;border-left:2px solid #F5C400;padding-left:5px;}
.fp-stat-cols{display:flex;flex-direction:column;width:100%;}
.fp-stat-row{display:flex;align-items:center;gap:7px;padding:4px 0;border-bottom:1px solid #111120;}
.fp-stat-row:last-child{border-bottom:none;}
.fp-stat-v{font-size:13px;font-weight:700;font-family:var(--mono);min-width:24px;text-align:right;flex-shrink:0;}
.fp-stat-n{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#bbb;min-width:72px;flex-shrink:0;}
.fp-stat-bg{flex:1;height:3px;background:#1a1a2e;border-radius:2px;overflow:hidden;}
.fp-stat-fill{height:100%;border-radius:2px;}
.fp-record-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
.fp-rec-box{background:#0d0d1a;border:1px solid #1e1e30;border-radius:3px;padding:6px 8px;text-align:center;}
.fp-rec-num{font-size:17px;font-weight:700;font-family:var(--mono);}
.fp-rec-lbl{font-size:8px;letter-spacing:.1em;color:#aaa;text-transform:uppercase;margin-top:1px;}
.fp-actions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1rem;}
.fp-years{font-size:11px;color:var(--accent);background:var(--accent-bg);display:inline-block;padding:2px 8px;border-radius:var(--radius);margin-top:4px;letter-spacing:.05em;}

/* ── FIFA MODAL ── */
.fifa-modal{width:520px;max-width:100%;}
.fifa-modal-stats-list{display:flex;flex-direction:column;gap:6px;margin-bottom:.75rem;max-height:340px;overflow-y:auto;padding-right:4px;}
.fifa-stat-edit-row{display:grid;grid-template-columns:1fr 72px 28px;align-items:center;gap:8px;}
.fifa-stat-edit-name{background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--font);font-size:12px;padding:6px 8px;outline:none;border-radius:var(--radius);transition:border-color .15s;width:100%;min-width:0;}
.fifa-stat-edit-name:focus{border-color:var(--accent);}
.fifa-stat-edit-val{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--accent);font-family:var(--mono);font-size:14px;font-weight:700;padding:6px 4px;outline:none;border-radius:var(--radius);text-align:center;transition:border-color .15s;}
.fifa-stat-edit-val:focus{border-color:var(--accent);}
.fifa-stat-edit-val::-webkit-outer-spin-button,.fifa-stat-edit-val::-webkit-inner-spin-button{-webkit-appearance:none;}
.fifa-modal-hint{font-size:10px;color:var(--text3);margin-bottom:.75rem;line-height:1.5;}

/* ── LOGIN ── */
.login-screen{position:fixed;inset:0;background:var(--text);display:none;align-items:center;justify-content:center;z-index:1000;overflow:hidden;}
.login-screen.active{display:flex;}
.login-screen::before{content:'BRA';position:absolute;font-family:var(--display);font-size:clamp(160px,30vw,280px);color:rgba(255,255,255,.03);line-height:1;pointer-events:none;user-select:none;letter-spacing:-.02em;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;}
.login-box{position:relative;z-index:1;background:var(--bg);border-top:4px solid var(--accent);border-radius:0;padding:2.5rem 2rem;width:100%;max-width:340px;display:flex;flex-direction:column;gap:.9rem;}
.login-logo{font-family:var(--display);font-size:64px;line-height:1;letter-spacing:.04em;color:var(--text);margin-bottom:-.2em;}
.login-logo .logo-accent{color:var(--accent);}
.login-box h1{font-size:1.3rem;margin:0;}
.login-sub{color:var(--text3);font-size:.85rem;margin:0 0 .4rem;}
.login-box input{background:var(--bg2);border:1.5px solid var(--bg3);border-bottom-color:var(--text3);border-radius:var(--radius);padding:.7rem .9rem;color:var(--text);font-family:var(--font);font-size:.95rem;}
.login-box input:focus{outline:none;border-color:var(--text);border-bottom-color:var(--accent);}
.login-error{color:#FF6B6B;font-size:.82rem;min-height:1.1em;}
#app-root{display:none;}

/* ── STATS GRAFICI ── */
.stats-panel svg text,.stats-panel .multi-line-svg text,#p-battle-trend svg text,.fifa-radar-svg text{font-size:11px !important;fill:#AAAAAA !important;font-weight:500;}
.stats-panel svg .tick text,.stats-panel svg .x-axis text{font-size:9px !important;transform:rotate(-15deg) translateX(-5px) translateY(5px);}
.donut-svg,svg[viewBox*="120"][viewBox*="120"]{max-width:100px !important;height:auto;}
.stats-panel .multi-line-svg text{font-size:10px !important;font-family:'Space Grotesk',monospace;fill:#cccccc !important;}

.battle-rating-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 7px;border-radius:var(--radius);margin-left:6px;vertical-align:middle;font-family:var(--mono);}
.bc-team-badge{display:inline-flex;align-items:center;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;background:var(--bg4);border:1px solid var(--border2);color:var(--text2);border-radius:var(--radius);margin-left:6px;vertical-align:middle;}
.star-rating{color:#F5C400;font-size:13px;letter-spacing:1px;}
.star-rating .star-val{font-size:10px;color:var(--text2);margin-left:4px;font-family:var(--mono);}
.fp-record-grid-8{grid-template-columns:repeat(4,1fr);}

/* ── COLLAPSIBLE SECTIONS ── */
.coll-section{margin-bottom:.6rem;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg2);}
.coll-header{display:flex;align-items:center;gap:8px;padding:.5rem .9rem;cursor:pointer;user-select:none;transition:background .12s;}
.coll-header:hover{background:var(--bg3);}
.coll-title{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600;flex:1;}
.coll-count{font-size:9px;font-family:var(--mono);color:var(--text3);background:var(--bg3);border:1px solid var(--border);border-radius:2px;padding:1px 6px;}
.coll-arrow{font-size:11px;color:var(--text3);transition:transform .2s;transform:rotate(-90deg);flex-shrink:0;}
.coll-section.open .coll-arrow{transform:rotate(0deg);}
.coll-body{max-height:0;overflow:hidden;transition:max-height .28s ease;}
.coll-section.open .coll-body{max-height:3000px;}
.coll-body-inner{padding:.65rem .9rem;}
.coll-body-inner .battle-link-list{padding:0;}

.opp-compact-table{width:100%;border-collapse:collapse;}
.opp-compact-table th{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);font-weight:600;padding:4px 6px;border-bottom:1px solid var(--border);text-align:left;}
.opp-compact-table td{font-size:11px;padding:5px 6px;border-bottom:1px solid var(--border);color:var(--text2);}
.opp-compact-table tr:last-child td{border-bottom:none;}
.opp-compact-table tbody tr{cursor:pointer;transition:background .12s;}
.opp-compact-table tbody tr:hover{background:var(--bg3);}
.opp-compact-table .td-name{color:var(--text);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}

.profile-section .battle-link-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media(max-width:640px){.profile-section .battle-link-list{grid-template-columns:1fr;}}

/* ── MOBILE ENHANCEMENTS ── */
@media(max-width:640px){.btn,.nav-btn,.tag-pill,.tag-add-btn,.bc-rapper,.bc-winner,.entity-card,.ev-card,.battle-card{cursor:pointer;touch-action:manipulation;}
.btn{padding:8px 16px;font-size:12px;}
.btn.small{padding:6px 12px;font-size:11px;}
.tag-pill{padding:5px 10px;font-size:11px;}
.tag-add-btn{padding:5px 12px;font-size:11px;}
.bc-rapper,.bc-winner{font-size:12px;}
.bv-actions .btn{padding:6px 12px;}}
@media(max-width:860px){.filters{overflow-x:hidden;}
.filters-row,.filters-row-2{grid-template-columns:1fr 1fr;gap:10px;}
.filter-group{min-width:0;width:100%;}
.filter-input{width:100% !important;min-width:0;box-sizing:border-box;}
.filter-actions{flex-wrap:wrap;gap:6px;}
.filters label{white-space:normal;}}
@media(max-width:1100px){.bv-layout{grid-template-columns:1fr;}
.bv-sidebar{display:none;}
.quartina-annotations-inline{margin-top:8px;margin-bottom:12px;padding-left:8px;border-left:2px solid var(--border2);}
.inline-ann-card{background:var(--bg3);border-radius:var(--radius);padding:8px 10px;margin-bottom:8px;font-size:12px;color:var(--text2);border-left:3px solid;}
.inline-ann-card .ann-card-quote{font-family:var(--mono);font-size:11px;background:var(--accent-bg);padding:3px 6px;margin-bottom:6px;border-left:2px solid var(--accent);}
.inline-ann-card .ann-card-text{margin-bottom:4px;}
.inline-ann-card .ann-card-link{font-size:10px;color:var(--accent);word-break:break-all;}
.inline-ann-card .ann-card-img{max-width:100%;margin-top:6px;border-radius:2px;}
.inline-ann-actions{margin-top:6px;display:flex;gap:8px;border-top:1px solid var(--border);padding-top:6px;}
.inline-ann-actions button{background:none;border:none;font-size:10px;color:var(--text3);cursor:pointer;}}

.scroll-top-btn{position:fixed;bottom:20px;left:20px;background:var(--bg3);border:1px solid var(--border2);color:var(--text2);width:44px;height:44px;border-radius:50%;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:150;font-size:20px;opacity:.7;transition:opacity .2s;}
.scroll-top-btn:hover{opacity:1;}
@media(max-width:860px){.scroll-top-btn{display:flex;}}

/* ── ANALYTICS ── */
.analytics-container{max-width:1400px;margin:0 auto;padding:0 1rem;}
.analytics-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:1.5rem;flex-wrap:wrap;}
.analytics-tab{background:none;border:none;color:var(--text3);font-family:var(--font);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:.75rem 1.25rem;cursor:pointer;transition:all .2s;position:relative;}
.analytics-tab:hover{color:var(--text);}
.analytics-tab.active{color:var(--neon-cyan,#00FFFF);}
.analytics-tab.active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--neon-cyan,#00FFFF);box-shadow:0 0 5px var(--neon-cyan,#00FFFF);}
.analytics-filters{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem 1rem;margin-bottom:1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;}
.filter-preset{display:flex;gap:4px;}
.filter-preset-btn{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);font-size:10px;padding:4px 10px;border-radius:var(--radius);cursor:pointer;transition:all .15s;}
.filter-preset-btn.active{background:var(--neon-cyan,#00FFFF);color:var(--bg);border-color:var(--neon-cyan,#00FFFF);box-shadow:0 0 5px var(--neon-cyan,#00FFFF);}
.filter-custom{display:flex;gap:8px;align-items:center;}
.filter-custom input{background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:4px 8px;font-size:11px;border-radius:var(--radius);}
.analytics-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:1.5rem;}
.kpi-card{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);padding:1rem;backdrop-filter:blur(4px);transition:all .2s;}
.kpi-card:hover{border-color:var(--neon-cyan,#00FFFF);box-shadow:0 0 8px rgba(0,255,255,.3);}
.kpi-label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin-bottom:.5rem;}
.kpi-value{font-size:24px;font-weight:700;color:var(--neon-cyan,#00FFFF);font-family:var(--mono);line-height:1;}
.kpi-delta{font-size:10px;margin-top:.25rem;color:var(--text);}
.kpi-delta.positive{color:var(--analytics-accent);}
.kpi-delta.negative{color:var(--neon-red,#FF3366);}
.analytics-main{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem;}
.analytics-chart{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;}
.analytics-tables{display:flex;flex-direction:column;gap:1.5rem;}
.table-container{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.table-header{padding:.75rem 1rem;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--neon-cyan,#00FFFF);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.table-scroll{overflow-x:auto;}
.analytics-table{width:100%;border-collapse:collapse;font-size:11px;}
.analytics-table th{text-align:left;padding:.5rem .75rem;color:var(--text);font-weight:500;border-bottom:1px solid var(--border);}
.analytics-table td{padding:.5rem .75rem;border-bottom:1px solid var(--border);color:var(--text);}
.analytics-table tr:hover td{background:rgba(0,255,255,.05);}
.show-all-btn{background:none;border:none;color:var(--neon-cyan,#00FFFF);font-size:10px;cursor:pointer;padding:4px 8px;}
.show-all-btn:hover{text-shadow:0 0 4px var(--neon-cyan,#00FFFF);}
.analytics-grid-2x2{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1.5rem;width:100%;min-height:500px;align-items:stretch;}
.grid-item{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;}
.grid-item.chart{padding:1rem;min-height:280px;}
.grid-item.table{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;min-height:280px;}
.grid-item.table .table-container{border:none;border-radius:0;background:transparent;height:100%;display:flex;flex-direction:column;}
.grid-item.table .table-container .table-header{background:var(--bg3);flex-shrink:0;}
.grid-item.table .table-container .table-scroll{flex:1;overflow-y:auto;}
@media(max-width:860px){.analytics-main{grid-template-columns:1fr;}
.analytics-grid-2x2{grid-template-columns:1fr;grid-template-rows:auto;gap:1rem;}}

/* ── TOOLTIP ── */
#info-tooltip{display:none;position:fixed;background:#0A0A0A;border:1px solid #00FFFF;border-radius:4px;padding:10px 14px;color:#E8E8E0;font-size:11px;pointer-events:none;z-index:1000;box-shadow:0 0 15px rgba(0,255,255,.3);max-width:340px;width:auto;min-width:180px;line-height:1.6;word-wrap:break-word;overflow-wrap:break-word;max-height:none !important;overflow:visible !important;white-space:normal;}

/* ── LEAFLET ── */
.neon-popup .leaflet-popup-content-wrapper{background:#0A0A0A;border:1px solid #00FFFF;border-radius:4px;box-shadow:0 0 20px rgba(0,255,255,.3);color:#E8E8E0;}
.neon-popup .leaflet-popup-tip{background:#0A0A0A;border:1px solid #00FFFF;}
.neon-popup .leaflet-popup-close-button{color:#00FFFF;}
.custom-marker{background:transparent !important;border:none !important;}

/* ── BUTTON STYLES ── */
.btn-edit-edition{font-size:9px;padding:2px 8px;margin-left:8px;color:var(--accent);border-color:var(--accent);background:transparent;}
.btn-edit-edition:hover{background:var(--accent);color:var(--bg);}

/* ── BRACKET ── */
.bracket-container{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;overflow-x:auto;}
.bracket-container svg{display:block;width:100%;height:auto;min-width:700px;}
.bracket-container svg rect{transition:all .15s ease;}
.bracket-container svg g:hover rect{filter:brightness(1.3) !important;}
.bracket-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem;}
.bracket-title{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);}
.bracket-sub{font-size:10px;color:var(--text3);}
.bracket-grid{display:grid;gap:1.5rem;min-width:600px;}
.bracket-round{display:flex;flex-direction:column;gap:.75rem;}
.bracket-round-label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);text-align:center;font-weight:600;padding-bottom:.5rem;border-bottom:1px solid var(--border);}
.bracket-node{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);padding:.6rem .75rem;cursor:pointer;transition:all .15s;min-height:60px;display:flex;flex-direction:column;gap:2px;}
.bracket-node:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.3);}
.bracket-node.empty{opacity:.3;cursor:default;min-height:40px;justify-content:center;align-items:center;}
.bracket-node.empty:hover{transform:none;box-shadow:none;border-color:var(--border2);}
.bracket-player{font-size:11px;font-weight:400;padding:2px 6px;border-radius:2px;display:flex;align-items:center;gap:4px;}
.bracket-player.team{font-size:10px;color:var(--text2);}
.bracket-winner{font-size:9px;font-weight:700;color:var(--winner-green);border-top:1px solid var(--border);padding-top:4px;margin-top:2px;letter-spacing:.05em;}
@media(max-width:860px){.bracket-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;}}

/* ── MOBILE BRACKET ── */
.bracket-mobile{display:flex;flex-direction:row;align-items:flex-start;gap:0;overflow-x:auto;padding:.75rem .5rem;-webkit-overflow-scrolling:touch;width:100%;}
.bm-phase{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;}
.bm-phase-label{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);font-weight:600;text-align:center;padding:0 4px;white-space:nowrap;}
.bm-phase-label.bm-phase-final{color:#F5C400;font-weight:700;}
.bm-nodes{display:flex;flex-direction:column;gap:6px;align-items:stretch;}
.bm-node{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);padding:6px 8px;cursor:pointer;min-width:100px;max-width:130px;display:flex;flex-direction:column;gap:3px;transition:border-color .15s;}
.bm-node:hover{border-color:var(--accent);}
.bm-player{font-size:10px;font-weight:400;padding:2px 3px;border-radius:2px;color:var(--text2);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bm-win{color:#34D399;font-weight:600;background:rgba(52,211,153,.12);}
.bm-champ{color:#F5C400;font-weight:700;background:rgba(245,196,0,.15);}
.bm-tbd{color:var(--text3);font-style:italic;}
.bm-arrow{display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text3);padding:0 4px;align-self:center;flex-shrink:0;line-height:1;margin-top:14px;}



/* ── GRIGLIA 2 COLONNE ── */
#v-freestylers-list {
  max-width: 1920px !important;
  margin: 0 auto;
  
}

/*
  La card è composta da: avatar(96px) + info(flex, min ~150px) + stats(96px) + tier(32px)
  + bordi/padding interni = minimo ~380px per essere leggibile senza sforzare niente.
  Con auto-fill + minmax il browser aggiunge una colonna ogni volta che c'è spazio
  sufficiente, senza bisogno di media query manuali.
*/
#v-freestylers-list .entities-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(calc(380px * var(--fs-card-scale)), 1fr)) !important;
  gap: calc(16px * var(--fs-card-scale)) !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Card all'interno della griglia */
#v-freestylers-list .entities-grid .fs-list-card,
#v-freestylers-list .entities-grid .fp-special-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#v-freestylers-list .fs-list-card {
  width: 100%;
  box-sizing: border-box;
}

/* Mobile: sotto 420px una sola colonna, gap ridotto */
@media (max-width: 420px) {
  #v-freestylers-list .entities-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── CARD STILE SCHEDE SPECIALI ── */
.fs-list-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-radius: var(--radius);
  border: 1px solid #2a2a3a;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #0a0a12;
  height: calc(96px * var(--fs-card-scale));
  min-height: calc(96px * var(--fs-card-scale));
  max-height: calc(96px * var(--fs-card-scale));
  width: 100%;
  --fs-square-size: calc(96px * var(--fs-card-scale));
}

/* Sfondo decorativo (SVG con bagliore) */
.fs-list-card .fp-sc-bg-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.fs-list-card .fp-sc-bg-deco svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Hover */
.fs-list-card:hover {
  transform: translateY(-2px);
  border-color: var(--sc-accent, var(--accent));
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), var(--sc-accent, transparent) 0 0 20px;
}

/* ── BLOCCO 1: AVATAR ── */
.fs-block-avatar {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  align-self: center;
  width: var(--fs-square-size);
  height: var(--fs-square-size);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  --fs-avatar-zoom: 1;
}

.fs-block-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(var(--fs-avatar-zoom));
}

.fs-block-avatar-fallback {
  font-size: calc(32px * var(--fs-card-scale));
  color: var(--text3);
}

/* ── BLOCCO 2: INFO ── */
.fs-block-info {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(4px * var(--fs-card-scale));
  padding: calc(10px * var(--fs-card-scale)) calc(14px * var(--fs-card-scale));
}

.fs-info-name {
  font-size: calc(14px * var(--fs-card-scale));
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fs-info-row {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--fs-card-scale));
  flex-wrap: wrap;
  font-size: calc(11px * var(--fs-card-scale));
  color: var(--text3);
  line-height: 1.3;
  min-width: 0;
}

.fs-info-ovr {
  font-size: calc(10px * var(--fs-card-scale));
  font-weight: 700;
  padding: calc(1px * var(--fs-card-scale)) calc(7px * var(--fs-card-scale));
  border-radius: 3px;
  border: 1px solid;
  background: rgba(0, 0, 0, 0.3);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.fs-info-city {
  display: inline-flex;
  align-items: center;
  gap: calc(4px * var(--fs-card-scale));
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fs-info-crew {
  display: inline-flex;
  align-items: center;
  gap: calc(4px * var(--fs-card-scale));
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fs-geo-dot {
  font-size: calc(9px * var(--fs-card-scale));
  font-weight: 700;
  flex-shrink: 0;
}

.fs-geo-ok { color: #34D399; }
.fs-geo-missing { color: #FF6B6B; }

.fs-info-row-stats {
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── BLOCCO 3: STATS ── */
.fs-block-stats {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  align-self: center;
  width: var(--fs-square-size);
  height: var(--fs-square-size);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.fs-stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(1px * var(--fs-card-scale));
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.fs-stat-val {
  font-size: calc(15px * var(--fs-card-scale));
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}

.fs-stat-lbl {
  font-size: calc(7px * var(--fs-card-scale));
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text3);
  text-transform: uppercase;
  line-height: 1;
}

.fs-stat-empty .fs-stat-val { color: #444; }

/* ── BLOCCO 4: TIER RIBBON ── */
.fs-block-tier {
  position: relative;
  z-index: 1;
  flex: 0 0 calc(32px * var(--fs-card-scale));
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(12px * var(--fs-card-scale));
  clip-path: polygon(0 0, 100% 0, 100% 76%, 50% 100%, 0 76%);
}

.fs-tier-letter {
  font-size: calc(16px * var(--fs-card-scale));
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}



/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .fs-list-card {
    min-height: 80px;
  }
  .fs-block-avatar-fallback {
    font-size: 24px;
  }
  .fs-block-info {
    padding: 8px 10px;
    gap: 3px;
  }
  .fs-info-name {
    font-size: 12px;
  }
  .fs-info-row {
    font-size: 9.5px;
    gap: 6px;
  }
  .fs-info-ovr {
    font-size: 9px;
    padding: 1px 5px;
  }
  .fs-stat-val {
    font-size: 12px;
  }
  .fs-stat-lbl {
    font-size: 6px;
  }
  .fs-block-tier {
    flex-basis: 24px;
    padding-top: 8px;
  }
  .fs-tier-letter {
    font-size: 12px;
  }
}



/* --- ANALYTICS: TABELLE COMPATTE --- */
.analytics-grid-2x2 {
  align-items: start !important; /* le celle non si allungano */
  grid-template-rows: auto auto !important; /* altezza in base al contenuto */
}

/* La mappa/chart occupa tutta la colonna di sinistra */
.grid-item.chart {
  grid-row: 1 / 3 !important; /* span su entrambe le righe */
  align-self: stretch !important;
  min-height: 500px;
}

/* Le tabelle NON si allungano – restano compatte */
.grid-item.table {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Lo scroll interno della tabella ha altezza limitata a 5 voci */
.grid-item.table .table-scroll {
  max-height: 280px !important; /* ≈ 5 righe + header */
  overflow-y: auto !important;
}

/* La tabella dentro lo scroll è compatta */
.grid-item.table .table-scroll table {
  width: 100%;
}

/* Il container della tabella non ha padding extra che allunga */
.grid-item.table .table-container {
  height: auto !important;
  min-height: 0 !important;
}


/* --- ANALYTICS: CAMBIO COLORE UI (DA AZZURRO A VIOLA #792CA2) --- */

/* TABS */
.analytics-tab.active {
  color: #792CA2 !important;
}
.analytics-tab.active::after {
  background: #792CA2 !important;
  box-shadow: 0 0 8px #792CA2 !important;
}

/* FILTRI (preset attivi) */
.filter-preset-btn.active {
  background: #792CA2 !important;
  border-color: #792CA2 !important;
  box-shadow: 0 0 8px #792CA255 !important;
  color: #fff !important;
}

/* KPI */
.kpi-card:hover {
  border-color: #792CA2 !important;
  box-shadow: 0 0 12px #792CA255 !important;
}
.kpi-value {
  color: #792CA2 !important;
}

/* TABELLE */
.table-header {
  color: #792CA2 !important;
}
.show-all-btn {
  color: #792CA2 !important;
}
.show-all-btn:hover {
  text-shadow: 0 0 6px #792CA255 !important;
}

/* TOOLTIP INFO */
#info-tooltip {
  border-color: #792CA2 !important;
  box-shadow: 0 0 20px #792CA255 !important;
}
#info-tooltip strong {
  color: #792CA2 !important;
}

/* LEGENDA MAPPA (solo UI, non i colori delle heatmap) */
#map-legend {
  border-color: #792CA2 !important;
}

/* DROPDOWN MAPPA */
#map-controls select {
  border-color: #792CA2 !important;
}
#map-controls select:focus {
  border-color: #792CA2 !important;
  box-shadow: 0 0 8px #792CA255 !important;
}


/* TABS */
.analytics-tab.active {
  color: var(--analytics-accent) !important;
}
.analytics-tab.active::after {
  background: var(--analytics-accent) !important;
  box-shadow: 0 0 8px var(--analytics-accent) !important;
}

/* FILTRI */
.filter-preset-btn.active {
  background: var(--analytics-accent) !important;
  border-color: var(--analytics-accent) !important;
  box-shadow: 0 0 8px var(--analytics-accent)55 !important;
  color: #fff !important;
}

/* KPI */
.kpi-card:hover {
  border-color: var(--analytics-accent) !important;
  box-shadow: 0 0 12px var(--analytics-accent)55 !important;
}
.kpi-value {
  color: var(--analytics-accent) !important;
}

/* TABELLE */
.table-header {
  color: var(--analytics-accent) !important;
}
.show-all-btn {
  color: var(--analytics-accent) !important;
}
.show-all-btn:hover {
  text-shadow: 0 0 6px var(--analytics-accent)55 !important;
}

/* TOOLTIP */
#info-tooltip {
  border-color: var(--analytics-accent) !important;
  box-shadow: 0 0 20px var(--analytics-accent)55 !important;
}
#info-tooltip strong {
  color: var(--analytics-accent) !important;
}

/* LEGENDA MAPPA */
#map-legend {
  border-color: var(--analytics-accent) !important;
}

/* DROPDOWN MAPPA */
#map-controls select:focus {
  border-color: var(--analytics-accent) !important;
  box-shadow: 0 0 8px var(--analytics-accent)55 !important;
}

/* PULSANTI TOGGLE (opzionale) */
.btn.primary.analytics-toggle {
  background: var(--analytics-accent) !important;
  border-color: var(--analytics-accent) !important;
  color: #fff !important;
}

/* --- LAYOUT FREESTYLER (card fisse 96px, paginazione in basso) --- */
#v-freestylers-list {
  display: flex;
  flex-direction: column;
  min-height: 80vh; /* spazio minimo per la pagina */
}

#freestylers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex: 1; /* LA GRIGLIA SI ESPANDE per occupare lo spazio */
  align-items: start; /* allinea le card in alto, non le allunga */
  width: 100%;
}



/* La paginazione viene spinta in basso perché la griglia occupa tutto lo spazio */
#freestylers-pagination {
  margin-top: auto; /* spinge in basso se c'è spazio */
  flex-shrink: 0;
  padding: 0.75rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ELO Battle Cards */
.elo-battle-card {
  transition: all 0.15s ease;
}
.elo-battle-card:hover {
  border-color: var(--accent);
  transform: translateX(4px);
}
.elo-opponent-item {
  transition: background 0.1s ease;
}
.elo-opponent-item:hover {
  background: var(--bg3);
}
.elo-opponent-item img {
  flex-shrink: 0;
}
.elo-opponent-item div[style*="display:none"] {
  flex-shrink: 0;
}


/* Centra il tabellone all'interno del bracket-container */
.bracket-container {
  display: flex;
  justify-content: center;  /* centra orizzontalmente il figlio */
  align-items: flex-start;  /* allinea in alto (evita stiramenti) */
  padding: 0.5rem 1rem;    /* margine interno laterale */
  overflow-x: auto;        /* scroll se il tabellone è più largo */
  width: 100%;
  box-sizing: border-box;
}

.bracket-container > div {
  display: block;
  margin: 0 auto;          /* fallback per browser non flex */
  width: fit-content;      /* il div si adatta al contenuto (il SVG) */
  max-width: 100%;         /* non supera la larghezza del container */
  flex-shrink: 0;          /* evita che il div si restringa */
}



/* ══════════════════════════════════════════════════════════════════════════════
   PERMESSI — stili aggiuntivi da appendere a style.css
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Vista container ──────────────────────────────────────────────────────── */
#v-permissions {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

/* ── Header ─────────────────────────────────────────────────────────────────*/
.perm-header {
  margin-bottom: 1.5rem;
}
.perm-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 1rem;
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.perm-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.perm-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px 10px;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.perm-tab:hover { color: var(--text); }
.perm-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Hint / info ─────────────────────────────────────────────────────────── */
.perm-hint {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text2);
  font-size: 12px;
  line-height: 1.6;
  margin: 1rem 0;
  padding: 10px 14px;
}

/* ── Role selector ───────────────────────────────────────────────────────── */
.perm-role-select-wrap {
  align-items: center;
  display: flex;
  gap: 10px;
  margin: 1rem 0 0.5rem;
}
.perm-role-label {
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.perm-matrix {
  margin-top: 0.5rem;
}
.perm-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
.perm-table th {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  color: var(--text3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  padding: 8px 12px;
  text-align: left;
  text-transform: uppercase;
}
.perm-table td {
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  vertical-align: middle;
}
.perm-table tr:last-child td { border-bottom: none; }
.perm-table tbody tr:hover { background: var(--bg2); }

.perm-col-section { width: 45%; }
.perm-col-toggle  { width: 27.5%; }

.perm-section-name {
  color: var(--text);
  font-weight: 500;
}

.perm-row-dirty { background: rgba(var(--accent-rgb, 255, 87, 34), 0.05); }
.perm-dirty-dot {
  color: var(--accent);
  font-size: 10px;
  margin-left: 6px;
}

/* ── Toggle switch ───────────────────────────────────────────────────────── */
.perm-toggle {
  cursor: pointer;
  display: inline-block;
  height: 20px;
  position: relative;
  width: 38px;
}
.perm-toggle input { height: 0; opacity: 0; width: 0; }
.perm-toggle-slider {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  bottom: 0; left: 0; right: 0; top: 0;
  position: absolute;
  transition: .2s;
}
.perm-toggle-slider::before {
  background: var(--text3);
  border-radius: 50%;
  bottom: 2px;
  content: '';
  height: 14px;
  left: 2px;
  position: absolute;
  transition: .2s;
  width: 14px;
}
.perm-toggle input:checked + .perm-toggle-slider { background: var(--accent); border-color: var(--accent); }
.perm-toggle input:checked + .perm-toggle-slider::before {
  background: var(--bg);
  transform: translateX(18px);
}
.perm-toggle-disabled { opacity: .4; pointer-events: none; }

/* ── Actions ─────────────────────────────────────────────────────────────── */
.perm-actions {
  display: flex;
  gap: 8px;
  margin-top: 1.25rem;
}
.perm-actions .btn { min-width: 140px; }

/* ── Section block (form areas) ──────────────────────────────────────────── */
.perm-section-block {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 1.25rem 0;
  padding: 1.25rem;
}
.perm-section-title {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

/* ── Form layout ─────────────────────────────────────────────────────────── */
.perm-form {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0.5rem;
}
.perm-field-label {
  color: var(--text3);
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

/* ── Users table ─────────────────────────────────────────────────────────── */
.perm-users-table td { vertical-align: middle; }
.perm-role-inline { font-size: 12px !important; padding: 3px 8px !important; }

/* ── Danger button ───────────────────────────────────────────────────────── */
.btn.danger {
  background: transparent;
  border: 1px solid #e53935;
  color: #e53935;
}
.btn.danger:hover { background: #e5393522; }
.btn.small { font-size: 11px; padding: 4px 10px; }

/* ── Loading / empty ─────────────────────────────────────────────────────── */
.perm-loading,
.perm-empty {
  color: var(--text3);
  font-size: 13px;
  padding: 2rem;
  text-align: center;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .perm-tabs { gap: 0; }
  .perm-tab  { font-size: 12px; padding: 8px 10px; }
  .perm-form { flex-direction: column; }
  .perm-actions { flex-direction: column; }
  .perm-table th, .perm-table td { padding: 6px 8px; }
  .perm-col-section { width: auto; }
}


/* ── CHANGELOG ────────────────────────────────────────────────────────────── */

#v-changelog {
  max-width: 780px;
  margin: 0 auto;
}

.changelog-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.changelog-header h1 {
  font-size: 13px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text3);
  font-weight: 500;
}

/* Contenuto renderizzato da marked.js */
#changelog-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Ogni blocco ## diventa una "card" release */
#changelog-content h2 {
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: .08em;
  color: var(--accent);
  text-transform: uppercase;
  padding: 1.5rem 0 .75rem;
  border-top: 1px solid var(--border);
  margin-top: 1.5rem;
}

#changelog-content h2:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* ### Sottotitoli (Novità, Fix, ecc.) */
#changelog-content h3 {
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 1rem 0 .4rem;
}

/* Liste voci */
#changelog-content ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: .5rem;
}

#changelog-content li {
  font-size: 13px;
  color: var(--text);
  padding: 5px 10px;
  border-left: 2px solid var(--border2);
  line-height: 1.5;
}

/* Separatore --- */
#changelog-content hr {
  display: none;
}

/* GIF e immagini */
#changelog-content img {
  display: block;
  max-width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin: 1rem 0;
}

/* Link */
#changelog-content a {
  color: var(--accent);
  text-decoration: none;
}
#changelog-content a:hover {
  text-decoration: underline;
}

/* Codice inline */
#changelog-content code {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 1px 5px;
  color: var(--text);
}

/* Paragrafi liberi */
#changelog-content p {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.6;
  margin: .5rem 0;
}

/* Loading / errore */
.cl-loading, .cl-error {
  color: var(--text3);
  font-size: 12px;
  padding: 2rem;
  text-align: center;
}
.cl-error { color: #FF6B6B; }

/* ── FREESTYLER DARK THEME ─────────────────────────────────────────────────
   Applica sfondo #0A0A0A alla lista freestyler e al dettaglio freestyler.
   I colori dei testi vengono sovrascritti solo dove necessario per la leggibilità,
   usando variabili locali che non impattano il resto dell'app.
──────────────────────────────────────────────────────────────────────────── */

#v-freestylers-list,
#v-freestyler {
  background: #0A0A0A;
  min-height: calc(100vh - 56px);
}

/* Testi generici chiari */
#v-freestylers-list,
#v-freestyler {
  color: #E8E8E0;
}

/* Titoli di pagina */
#v-freestylers-list .page-title,
#v-freestyler .page-title,
#v-freestylers-list .archive-top h1,
#v-freestyler .archive-top h1 {
  color: #E8E8E0;
}

/* Filtri: sfondo adattato al dark */
#v-freestylers-list .filters {
  background: #111111;
  border-color: #222222;
}

#v-freestylers-list .filter-input,
#v-freestylers-list .sc-input {
  background: #1A1A1A;
  border-color: #2A2A2A;
  color: #E8E8E0;
}

#v-freestylers-list .filter-input option {
  background: #1A1A1A;
}

#v-freestylers-list .sc-dropdown {
  background: #1A1A1A;
  border-color: var(--accent);
}

#v-freestylers-list .sc-option {
  color: #E8E8E0;
}

/* Paginazione e bottoni nella lista */
#v-freestylers-list .btn {
  border-color: #333;
  color: #999;
}

#v-freestylers-list .btn:hover {
  border-color: #666;
  color: #E8E8E0;
}

#v-freestylers-list .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Count badge */
#v-freestylers-list .count-badge {
  background: #1A1A1A;
  border-color: #2A2A2A;
  color: #888;
}

/* Sezione regole / divisori */
#v-freestylers-list .section-rule,
#v-freestyler .section-rule {
  background: #2A2A2A;
}

/* ── DETTAGLIO FREESTYLER ── */

/* Header profilo (vecchio stile chiaro che emerge sul dark) */
#v-freestyler .profile-hdr {
  background: transparent;
}

#v-freestyler .profile-name {
  color: #E8E8E0;
}

#v-freestyler .profile-meta {
  color: #888;
}

/* Sezioni collassabili */
#v-freestyler .coll-section {
  background: #111111;
  border-color: #222222;
}

#v-freestyler .coll-header:hover {
  background: #1A1A1A;
}

#v-freestyler .coll-body-inner {
  background: #111111;
}

/* Battle link list */
#v-freestyler .battle-link-item {
  background: #111111;
  border-color: #222222;
}

#v-freestyler .battle-link-item:hover {
  border-color: #444;
}

#v-freestyler .bli-name {
  color: #E8E8E0;
}

#v-freestyler .bli-sub {
  color: #888;
}

/* Tabella avversari */
#v-freestyler .opponents-table th,
#v-freestyler .opp-compact-table th {
  color: #888;
  border-bottom-color: #222;
}

#v-freestyler .opponents-table td,
#v-freestyler .opp-compact-table td {
  color: #bbb;
  border-bottom-color: #1A1A1A;
}

#v-freestyler .opponents-table tbody tr:hover,
#v-freestyler .opp-compact-table tbody tr:hover {
  background: #1A1A1A;
}

#v-freestyler .opponents-table .td-name,
#v-freestyler .opp-compact-table .td-name {
  color: #E8E8E0;
}

/* FIFA stats card */
#v-freestyler .fifa-radar-wrap {
  background: #111111;
  border-color: #222222;
}

#v-freestyler .fifa-bars-wrap,
#v-freestyler .fifa-stat-row {
  border-bottom-color: #1A1A1A;
}

#v-freestyler .fifa-stat-name {
  color: #aaa;
}

#v-freestyler .fifa-stat-bar-wrap {
  background: #2A2A2A;
}

/* Bottoni azioni profilo */
#v-freestyler .fp-actions .btn,
#v-freestyler .profile-section .btn {
  border-color: #333;
  color: #999;
}

#v-freestyler .fp-actions .btn:hover,
#v-freestyler .profile-section .btn:hover {
  border-color: #666;
  color: #E8E8E0;
}

/* Titoli di sezione nel profilo */
#v-freestyler .profile-section-title {
  color: #E8E8E0;
}

/* Breadcrumb / eyebrow */
#v-freestyler .page-eyebrow {
  color: #666;
}


/* ── DARK THEME GLOBALE ────────────────────────────────────────────────────
   Attivato da body.dark-theme. Sovrascrive le variabili CSS root.
   Le sezioni freestyler (#v-freestyler, #v-freestylers-list) sono sempre
   scure e NON vengono toccate qui.
──────────────────────────────────────────────────────────────────────────── */

body.dark-theme {
  --bg:    #0F0F0F;
  --bg2:   #161616;
  --bg3:   #1E1E1E;
  --bg4:   #282828;
  --border:  #2A2A2A;
  --border2: #383838;
  --text:  #E8E8E0;
  --text2: #ABABAB;
  --text3: #666660;
  color-scheme: dark;
}

/* Nav già scuro di suo: in dark mode diventa ancora più profondo */
body.dark-theme #nav {
  background: #090909;
  border-bottom: 1px solid #1A1A1A;
}

/* Login screen */
body.dark-theme .login-box {
  background: var(--bg2);
  border-top-color: var(--accent);
}
body.dark-theme .login-logo,
body.dark-theme .login-box h1 {
  color: var(--text);
}
body.dark-theme .login-box input {
  background: var(--bg3);
  border-color: var(--border2);
  color: var(--text);
}

/* Filtri */
body.dark-theme .filters {
  background: var(--bg2);
  border-color: var(--border);
}
body.dark-theme .filter-input,
body.dark-theme .sc-input {
  background: var(--bg3);
  border-color: var(--border2);
  color: var(--text);
}
body.dark-theme .filter-input.active-filter,
body.dark-theme .sc-input.active-filter {
  border-color: var(--accent);
  background: var(--accent-bg);
}
body.dark-theme .filter-input option {
  background: var(--bg3);
}
body.dark-theme .sc-dropdown {
  background: var(--bg3);
}
body.dark-theme .sc-option {
  color: var(--text);
}

/* Battle card nell'archivio */
body.dark-theme .battle-card {
  background: var(--bg2);
  border-color: var(--border);
}
body.dark-theme .battle-card:hover {
  border-color: var(--border2);
}
body.dark-theme .bc-title {
  color: var(--text);
}

/* Battle view */
body.dark-theme .bv-meta-panel {
  background: var(--bg2);
  border-color: var(--border);
}
body.dark-theme .meta-val {
  color: var(--text);
}

/* Modal */
body.dark-theme .modal {
  background: var(--bg2);
  border-color: var(--border2);
}
body.dark-theme .modal input,
body.dark-theme .modal select {
  background: var(--bg3);
  border-color: var(--border2);
  color: var(--text);
}

/* Sezioni collassabili */
body.dark-theme .coll-section {
  background: var(--bg2);
  border-color: var(--border);
}
body.dark-theme .coll-header:hover {
  background: var(--bg3);
}

/* Tabelle stats */
body.dark-theme .stats-table th,
body.dark-theme .stats-table td {
  border-color: var(--border);
}
body.dark-theme .stats-table tbody tr:hover {
  background: var(--bg3);
}

/* Bracket */
body.dark-theme .bracket-container {
  background: var(--bg2);
  border-color: var(--border);
}
body.dark-theme .bracket-node {
  background: var(--bg3);
  border-color: var(--border2);
}

/* Search results */
body.dark-theme .search-result-item {
  background: var(--bg2);
  border-color: var(--border);
}
body.dark-theme .sr-quartina {
  background: var(--bg3);
  color: var(--text2);
}

/* Avversari / opponents table */
body.dark-theme .opponents-table td,
body.dark-theme .opp-compact-table td {
  border-color: var(--border);
  color: var(--text2);
}
body.dark-theme .opponents-table tbody tr:hover,
body.dark-theme .opp-compact-table tbody tr:hover {
  background: var(--bg3);
}

/* Events grid */
body.dark-theme .ev-card {
  background: var(--bg2);
  border-color: var(--border);
}
body.dark-theme .ev-card-stats {
  border-color: var(--border);
}
body.dark-theme .ev-card-stat {
  border-right-color: var(--border);
}
body.dark-theme .ev-card-ed-row {
  border-color: var(--border);
}

/* Event participant card */
body.dark-theme .event-participant-card {
  background: var(--bg2);
}
/* Il reset del border-color va escluso per le card con bordo colorato
   (vincitore / TDS): altrimenti, per via della specificità più alta di
   questo selettore (1 elemento + 2 classi) rispetto a .epc-winner/.epc-tds
   (2 classi), il bordo colorato veniva sovrascritto in dark mode su tutte
   le card tranne quelle con la combo a 3 classi .epc-winner.epc-tds. */
body.dark-theme .event-participant-card:not(.epc-winner):not(.epc-tds) {
  border-color: var(--border);
}

/* Stats sidebar */
body.dark-theme .stats-sidebar {
  background: var(--bg);
  border-right-color: var(--border);
}
body.dark-theme .stats-sidebar-item {
  color: var(--text2);
}
body.dark-theme .stats-sidebar-item:hover {
  background: var(--bg3);
}
body.dark-theme .stats-sidebar-item.active {
  background: var(--bg2);
}
body.dark-theme .stats-main {
  background: var(--bg);
}
body.dark-theme .stat-kpi {
  background: var(--bg2);
  border-color: var(--border);
}
body.dark-theme .stats-topbar {
  background: var(--bg);
  border-color: var(--border);
}

/* Analytics */
body.dark-theme #v-analytics {
  background: var(--bg);
}

/* Toast */
body.dark-theme #toast {
  background: var(--bg3);
  border-color: var(--border2);
  color: var(--text);
}

/* Scrollbar */
body.dark-theme ::-webkit-scrollbar-track { background: var(--bg); }
body.dark-theme ::-webkit-scrollbar-thumb { background: var(--bg4); }

/* Titoli pagina */
body.dark-theme .archive-top h1,
body.dark-theme .page-title {
  color: var(--text);
}
body.dark-theme .count-badge {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--text3);
}

/* round editor, participant input, ecc. */
body.dark-theme .round-editor {
  background: var(--bg3);
  border-color: var(--border);
}
body.dark-theme .participant-input,
body.dark-theme .entrata-textarea {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--text);
}
body.dark-theme .fifa-radar-wrap {
  background: var(--bg2);
  border-color: var(--border);
}
body.dark-theme .fifa-stat-row {
  border-color: var(--border);
}
body.dark-theme .fifa-stat-bar-wrap {
  background: var(--bg4);
}

/* ── Toggle switch dark mode ─────────────────────────────────────────────── */
.theme-toggle-switch {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 100%;
}
.tts-track {
  display: flex;
  align-items: center;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #555;
  border: 2px solid #666;
  position: relative;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.tts-thumb {
  position: absolute;
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s cubic-bezier(.4,0,.2,1), background .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.tts-icon {
  font-size: 10px;
  line-height: 1;
  display: block;
}
/* Dark mode attivo */
body.dark-theme .tts-track {
  background: #E8E8E0;
  border-color: #ccc;
}
body.dark-theme .tts-thumb {
  transform: translateX(20px);
  background: #111;
}

/* ── Le view freestyler sono SEMPRE scure indipendentemente dal tema ────── */
/* (già gestito dal blocco precedente che usa selettori diretti senza
    body.dark-theme, quindi non vengono sovrascritte qui) */

/* ── BODY BACKGROUND nelle view freestyler (sempre scuro) ─────────────────
   Evita le bande chiare ai lati quando la view è più stretta del viewport.
──────────────────────────────────────────────────────────────────────────── */
body.fs-view-active {
  background: #0A0A0A !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   NEWS — stili scoped
════════════════════════════════════════════════════════════════════════════ */

/* ── News Grid / List ── */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 1rem;
}

.news-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
}

.news-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

.news-cover {
  width: 100%;
  height: 160px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--border);
}

.news-cover-placeholder {
  width: 100%;
  height: 160px;
  background: radial-gradient(ellipse at center, var(--bg3) 0%, var(--bg4) 70%);
  border-bottom: 1px solid var(--border);
}

.news-card-body {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text3);
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.news-date {
  font-family: var(--mono);
}

.news-category {
  background: var(--accent-bg);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.news-status-draft {
  background: var(--bg3);
  color: var(--text3);
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.news-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
  color: var(--text);
}

.news-excerpt {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
  flex: 1;
  margin-bottom: 8px;
}

.news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.news-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 8px;
  background: var(--bg3);
  color: var(--text3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* ── News Article Detail ── */
.news-article {
  max-width: 860px;
  margin: 0 auto;
}

.news-article-cover {
  width: 100%;
  height: 320px;
  background-size: cover;
  background-position: center;
  margin-bottom: 1.5rem;
  border-radius: var(--radius);
}

.news-article-header {
  margin-bottom: 2rem;
  padding: 0 1rem;
}

.news-article-header .news-category {
  display: inline-block;
  margin-bottom: 1rem;
}

.art-h1 {
  font-family: var(--display);
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 1rem;
}

.art-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--text3);
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.art-author {
  font-weight: 600;
  color: var(--text2);
}

.art-read-time {
  font-family: var(--mono);
}

.art-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.art-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 10px;
  background: var(--bg3);
  color: var(--text2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.news-article-content {
  padding: 0 1rem;
}

.art-body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
}

.art-body p {
  margin-bottom: 1.25rem;
}

.art-body h2 {
  font-family: var(--display);
  font-size: 28px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 2.5rem 0 1rem;
  color: var(--text);
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}

.art-body h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 2rem 0 .75rem;
  color: var(--text);
}

.art-body blockquote {
  border-left: 3px solid var(--accent);
  background: var(--accent-bg);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--text2);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.art-body code {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--bg3);
  padding: 2px 6px;
  border-radius: var(--radius);
}

.art-body pre {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.art-body pre code {
  background: transparent;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
}

.art-body ul, .art-body ol {
  margin: 1rem 0 1rem 1.5rem;
}

.art-body li {
  margin-bottom: .5rem;
}

.art-body img {
  max-width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin: 1.5rem 0;
}

.art-body a {
  color: var(--accent);
  text-decoration: underline;
}

.art-body a:hover {
  color: var(--text);
}

/* Drop cap - disattivato <640px */
.art-body > p:first-of-type.art-drop::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 4.5rem;
  line-height: 0.85;
  font-weight: 400;
  color: var(--accent);
  padding-right: 8px;
  padding-top: 4px;
}

@media (max-width: 640px) {
  .art-body > p:first-of-type.art-drop::first-letter {
    float: none;
    font-size: inherit;
    color: inherit;
    padding: 0;
  }
}

/* Entity references */
.entity-ref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-bg);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--accent);
  transition: all .15s;
  white-space: nowrap;
}

.entity-ref:hover {
  background: var(--accent);
  color: var(--bg);
}

.entity-ref-orphan {
  background: var(--bg3);
  color: var(--text3);
  border-color: var(--border);
  cursor: default;
  opacity: .6;
}

.entity-ref-orphan:hover {
  background: var(--bg3);
  color: var(--text3);
}

/* ── News Editor ── */
.ed-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  height: calc(100vh - 200px);
  min-height: 600px;
}

.ed-pane {
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.ed-toolbar {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
  flex-wrap: wrap;
}

.ed-toolbar-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text2);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .15s;
}

.ed-toolbar-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}

.ed-textarea {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.7;
  padding: 1rem;
  resize: none;
  outline: none;
  min-height: 0;
}

.ed-textarea::placeholder {
  color: var(--text3);
}

.ed-preview-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ed-preview-header {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text3);
}

.ed-preview {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background: var(--bg);
}

.ed-preview .news-article {
  max-width: none;
}

.ed-preview .art-h1 {
  font-size: 32px;
}

.ed-preview .news-article-cover {
  height: 240px;
}

/* Mention popover */
.ed-mention-popover {
  position: fixed;
  background: var(--bg2);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  z-index: 1000;
  min-width: 240px;
  max-width: 320px;
  max-height: 280px;
  overflow-y: auto;
}

.ed-mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background .1s;
}

.ed-mention-item:hover,
.ed-mention-item.active {
  background: var(--accent-bg);
  color: var(--accent);
}

.ed-mention-type {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
  background: var(--accent-bg);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
  min-width: 60px;
  text-align: center;
}

.ed-mention-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Entity picker modal */
.ep-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.ep-modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 64px rgba(0,0,0,.5);
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ep-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0;
}

.ep-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
}

.ep-close {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 24px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.ep-close:hover { color: var(--text); }

.ep-tabs {
  display: flex;
  gap: 4px;
  padding: .75rem 1.25rem 0;
  border-bottom: 1px solid var(--border);
}

.ep-tab {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  font-family: var(--font);
}
.ep-tab:hover { color: var(--text); }
.ep-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.ep-search {
  padding: .75rem 1.25rem;
}

.ep-search input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  padding: 10px 14px;
  outline: none;
  font-family: var(--font);
  transition: border-color .15s;
}
.ep-search input:focus {
  border-color: var(--accent);
}

.ep-results {
  flex: 1;
  overflow-y: auto;
  padding: 0 1.25rem .5rem;
  min-height: 120px;
  max-height: 50vh;
}

.ep-result-item {
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background .1s, border-color .1s;
  margin-bottom: 3px;
}
.ep-result-item:hover,
.ep-result-item.ep-highlighted {
  background: var(--accent-bg);
  border-color: var(--accent);
}

.ep-result-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text);
}
.ep-result-name.ep-name-only {
  padding: 2px 0;
  text-transform: none;
  font-weight: 600;
}

.ep-result-sub {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}

.ep-result-parts {
  font-size: 12px;
  color: var(--text2);
  margin-top: 1px;
}

.ep-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text3);
  font-size: 13px;
  font-style: italic;
}

.ep-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--border);
}

.ep-hint {
  font-size: 11px;
  color: var(--text3);
}

/* Responsive */
@media (max-width: 900px) {
  .ed-split {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .ed-pane {
    min-height: 400px;
  }

  .news-article-cover {
    height: 240px;
  }

  .art-h1 {
    font-size: 32px;
  }
}

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

  .news-article-cover {
    height: 200px;
  }

  .art-h1 {
    font-size: 26px;
  }

  .art-body {
    font-size: 15px;
  }

  .ed-toolbar-btn {
    padding: 6px 8px;
    font-size: 11px;
  }
}