@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');  

body {
  background-color : #080e14;
  color : white;
  font-family: 'Montserrat', sans-serif;
  font-size : 11px;
  margin-bottom : 0px;
  margin-left : 0px;
  margin-right : 0px;
  margin-top : 0px;
  text-align : center;
  min-width: 300px;
}

/* HEADER (ex menu_logo) */
#header_page {
  background: #080e14;
  width: 100%;
  min-width: 300px;
  max-width: 749px;   
  padding: 0 10px;
  height: 45px;
  margin: 0 auto;
  position: static;
  z-index: 500;
  box-sizing: border-box;
}
#header_page .rightside img {
  margin-left: 8px;
}
#header_page ul {
  list-style: none;
  margin: 0;
  padding: 10px 0 0 0;  /* come nell’originale mobile */
}
#header_page li {
  float: left;
  margin-left: 10px;
  list-style: none;
  background: #080e14;
}
#header_page li.menu {
  float: left;
  margin-right: 50px;
  text-align: left;
}
#header_page li.rightside {
  float: right;
  margin-right: 10px;
  text-align: right;
}
#header_page li.rightsidemenu {
  float: right;
  margin-right: 0;
  margin-left: 40px;
  text-align: right;
}

/* MAIN SHORTCUTS (duplica header_page) */
#main_shortcuts {
  background: #080e14;
  width: 100%;
  min-width: 300px;
  max-width: 749px;   
  padding: 0 10px;
  height: 40px;
  margin: 0 auto;
  position: static;
  z-index: 500;
  box-sizing: border-box;
}
#main_shortcuts ul {
  list-style: none;
  margin: 0;
  padding: 10px 0 0 0;
}
#main_shortcuts li {
  float: left;
  margin-left: 10px;
  list-style: none;
  background: #080e14;
}
#main_shortcuts li.menu {
  float: left;
  margin-right: 50px;
  text-align: left;
}
#main_shortcuts li.rightside {
  float: right;
  margin-right: 10px;
  text-align: right;
}
#main_shortcuts li.rightsidemenu {
  float: right;
  margin-right: 0;
  margin-left: 40px;
  text-align: right;
}

/* MENU USER (ex menu_login) */
#menu_user {
  background: #080e14;
  width: 100%;
  min-width: 300px;
  max-width: 749px;   
  padding: 0 10px;
  height: 30px;
  margin: 0 auto;
  position: static;
  z-index: 500;
  box-sizing: border-box;
}
#menu_user ul {
  list-style: none;
  margin: 0;
  padding: 3px 0 0 0;
}
#menu_user li {
  float: left;
  list-style: none;
  background: #080e14;
}
#menu_user li.menu {
  float: left;
  margin-right: 50px;
  text-align: left;
}
#menu_user li.rightside {
  float: right;
  margin-right: 10px;
  text-align: right;
}
#menu_user li.leftside {
  float: left;
  margin-left: 0;
  text-align: left;
}
#menu_user li.rightsidemenu {
  float: right;
  margin-right: 0;
  margin-left: 40px;
  text-align: right;
}
/* =========================
   MENU USER/LANGUAGE – mobile first
   ========================= */

/* Contenitore */
#menu_user_language{
  background-color:#080e14;
  margin:0 auto;
  padding:8px 10px;
  min-width:300px;
  max-width:749px;
  width:100%;
  box-sizing:border-box;

  /* FIX layering sopra a menu_sfondo (z-index:500) */
  position:relative;     /* era static → lo z-index non aveva effetto */
  z-index:1000;          /* > 500, regola se necessario */

  /* evita che la dropdown venga “tagliata” */
  overflow:visible;
}

/* Lista principale */
#menu_user_language ul{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  list-style:none;
  margin:0;
  padding:0;
}

/* Spazio elastico al centro */
#menu_user_language li.spacer{ flex:1; }

/* Lati */
#menu_user_language li.rightside{ margin-left:10px; margin-right:0; }
#menu_user_language li.leftsideside{ margin-right:20px; }

/* Testi base */
#menu_user_language .text_12_b{
  font-size:12px;
  font-weight:bold;
  margin:0;
}

/* Trigger link: supporta white_11_b e 11_b */
#menu_user_language .white_11_b,
#menu_user_language .\31 1_b{
  color:#fff;
  text-decoration:none;
  display:inline-block;
  cursor:pointer;
  padding:4px 8px;
  white-space:nowrap;
}

/* Dropdown anchor */
#menu_user_language li.dropdown{ position:relative; }

/* Caret */
#menu_user_language li.dropdown .caret{
  font-size:.7em;
  margin-left:4px;
  color:#fff;
  transition:transform .2s ease;
}
#menu_user_language li.dropdown.open .caret{ transform:rotate(180deg); }

/* Menu a tendina */
#menu_user_language li.dropdown .dropdown_menu{
  display:none;
  position:absolute;
  top:calc(100% + 4px);   /* piccolo distacco dal trigger */
  right:0;                /* ancorato al bordo destro del <li> */
  list-style:none;
  margin-right: 8px;
  padding:4px 0;

  background:#0D1B27;
  border-radius: 0 0 8px 8px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  width: auto;
  z-index:2000;           /* sopra icone/elementi vicini */
}

/* Apertura */
#menu_user_language li.dropdown.open > .dropdown_menu{ display:block; }

/* Voci del menu */
#menu_user_language li.dropdown .dropdown_menu li{ padding:0; }
#menu_user_language li.dropdown .dropdown_menu li a{
  display:block;
  padding:8px 12px;
  color:#fff;
  font-size:.95em;
  text-decoration:none;
  white-space:nowrap;
}
#menu_user_language li.dropdown .dropdown_menu li a:hover{
  background:rgba(255,255,255,.06);
}


/* SEPARATORE (menu_linea) */
#header_linea {
  background: #393e43;
  width: 100%;
  min-width: 300px;
  max-width: 749px;   
  padding: 0 10px;
  height: 1.5px;
  margin: 0 auto;
  position: static;
  z-index: 500;
  box-sizing: border-box;
}

/* FOOTER */
#footer_page {
  justify-content: center;
  background: #080e14;
  min-width: 300px;
  max-width: 749px;   
  padding: 0 10px;
  height: 70px;
  margin: 0 auto;
  position: static;
  text-align: center;
  z-index: 500;
  box-sizing: border-box;
}

#footer_page img.social {
  margin: 1px 12px 1px 12px;
}

#footer_page p.testo_11_y {
  font-size: 11px;
  font-weight: bold;
  color: #ffc932;
}

#footer_page a.giallo_11_y:link,
#footer_page a.giallo_11_y:visited {
  font-family: 'Montserrat', sans-serif;
  color: #ffc932;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
}

#footer_page a.giallo_11_y:hover {
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
}

#footer_page a.giallo_11_y:active {
  font-family: 'Montserrat', sans-serif;
  color: #ffc932;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
}
/*ELEMENTI CONTAINER*/
 
  
  #menu_sfondo {
    background: transparent;
    margin: 0 auto;
    position:static;
    background-image: url('../img/imgMobile/bg-image4.png');
    width: 350px; 
    border-radius: 16px; 
    background-repeat: no-repeat;
    z-index: 500;
}   
  #box_iubenda {
    background: #080e14;
    color: #ffc932;
    font-size : 12px;            
    position: static; 
    width: 100%;
      min-width: 300px;
      max-width: 749px;               
    display: inline-block;            
    vertical-align: top;                            
    margin: 0 0; /* y x */
    text-align: center;
    z-index: 500;  
  } 

  
  table.generica_black {
    font-family: 'Montserrat', sans-serif;
    font-size : 11px;
    color: #ffc932; /* giallo di default*/
    padding: 0px 0px 0px 0px;
    border: 0;
    background: #101820; /* grigio medio */
  }
  table.generica_black td.vuota1 {
    margin: 0 0 0 0;
    padding: 0 0 0 0;        
    background-color: transparent;
    height: 1px;        
}  
table.generica_black td.vuota5 {
  margin: 0 0 0 0;
  padding: 0 0 0 0;        
  background-color: transparent;
  height: 5px;        
}  
table.generica_black td.vuota10 {
  margin: 0 0 0 0;
  padding: 0 0 0 0;        
  background-color: transparent;
  height: 10px;        
}  
  table.generica_black td.text_white {
    background-color: #101820;/* sfondo pagina scuro */    
    color: white;
    font-size : 12px;
    font-weight: bold;
    height: 30px;   
}    
  table.generica_black td.riga_grigia {
    background-color: #40464d;
    height: 1px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
  }
  table.generica_black td.riga_intestazione {
    background-color: #1a2836;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    height: 30px;
  }
  table.generica_black td.riga_intestazione_y {
    background-color: #1a2836;
    color: #ffc932;
    font-size: 11px;
    font-weight: bold;
    height: 30px;
  }
  table.generica_black td.intestazione_y {
    background-color: #ffc932;
    color: #101820;
    font-size: 11px;
    font-weight: bold;
    height: 30px;
  }
  table.generica_black td.intestazione_r {
    background-color: #ff2e26;
    color: #101820;
    font-size: 11px;
    font-weight: bold;
    height: 30px;
  }
  table.generica_black td.intestazione_c {
    background-color: #1a2836;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: bold;
    height: 30px;
  }
 table.generica_black td.riga_player {
    background-color: #101820;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    max-height: 35px;
    
  }
  /* ====== BASE COMUNE: SCURA ====== */
table.generica_black td.riga_scura,
table.generica_black td.riga_scura_border,
table.generica_black td.riga_scura_border_y,
table.generica_black td.riga_scura_border_left,
table.generica_black td.riga_scura_border_right,
table.generica_black td.riga_scura_border_left_y,
table.generica_black td.riga_scura_border_right_y{
  background-color:#101820;
  font-size:11px;
  font-weight:bold;
  height:35px;
  width:auto;
  max-width:100%;
  box-sizing:border-box;
  padding:4px;
  vertical-align:middle;
}

/* Colore testo SCURA (normale) */
table.generica_black td.riga_scura,
table.generica_black td.riga_scura_border,
table.generica_black td.riga_scura_border_left,
table.generica_black td.riga_scura_border_right{
  color:#fff;
}

/* Colore testo SCURA (giallo _y) */
table.generica_black td.riga_scura_border_y,
table.generica_black td.riga_scura_border_left_y,
table.generica_black td.riga_scura_border_right_y{
  color:#ffc932;
}

/* Raggi SCURA */
table.generica_black td.riga_scura_border{ border-radius:6px !important; }
table.generica_black td.riga_scura_border_y{ border-radius:6px !important; }
table.generica_black td.riga_scura_border_left{  border-radius:6px 0 0 6px !important; }
table.generica_black td.riga_scura_border_right{ border-radius:0 6px 6px 0 !important; }
table.generica_black td.riga_scura_border_left_y{  border-radius:6px 0 0 6px !important; }
table.generica_black td.riga_scura_border_right_y{ border-radius:0 6px 6px 0 !important; }


/* ====== BASE COMUNE: CHIARA ====== */
table.generica_black td.riga_chiara,
table.generica_black td.riga_chiara_border,
table.generica_black td.riga_chiara_border_y,
table.generica_black td.riga_chiara_border_left,
table.generica_black td.riga_chiara_border_right,
table.generica_black td.riga_chiara_border_left_y,
table.generica_black td.riga_chiara_border_right_y{
  background-color:#1a2836;
  font-size:11px;
  font-weight:bold;
  height:35px;
  width:auto;
  min-width:60px;
  max-width:100%;
  box-sizing:border-box;
  padding:4px;
  vertical-align:middle;
}

/* Colore testo CHIARA (normale) */
table.generica_black td.riga_chiara,
table.generica_black td.riga_chiara_border,
table.generica_black td.riga_chiara_border_left,
table.generica_black td.riga_chiara_border_right{
  color:#fff;
}

/* Colore testo CHIARA (giallo _y) */
table.generica_black td.riga_chiara_border_y,
table.generica_black td.riga_chiara_border_left_y,
table.generica_black td.riga_chiara_border_right_y{
  color:#ffc932;
}

/* Raggi CHIARA */
table.generica_black td.riga_chiara_border{ border-radius:6px !important; }
table.generica_black td.riga_chiara_border_y{ border-radius:6px !important; }
table.generica_black td.riga_chiara_border_left{  border-radius:6px 0 0 6px !important; }
table.generica_black td.riga_chiara_border_right{ border-radius:0 6px 6px 0 !important; }
table.generica_black td.riga_chiara_border_left_y{  border-radius:6px 0 0 6px !important; }
table.generica_black td.riga_chiara_border_right_y{ border-radius:0 6px 6px 0 !important; }


/* ====== Allineamenti via data-attribute ====== */
table.generica_black td[data-align="left"]   { text-align:left   !important; }
table.generica_black td[data-align="center"] { text-align:center !important; }
table.generica_black td[data-align="right"]  { text-align:right  !important; }


  table.generica_black td.por_low {
    background-color: #101820; /* grigio medio */
    color: #d54051;
    font-size: 11px;
    font-weight: bold;
    height: 20px;
}

table.generica_black td.dif_low {
    background-color: #101820; /* grigio medio */
    color: #fcd67c;
    font-size: 11px;
    font-weight: bold;
    height: 20px;
}

table.generica_black td.med_low {
    background-color: #101820; /* grigio medio */
    color: #8bfa8b;
    font-size: 11px;
    font-weight: bold;
    height: 20px;
}

table.generica_black td.cen_low {
    background-color: #101820; /* grigio medio */
    color: #12af6c;
    font-size: 11px;
    font-weight: bold;
    height: 20px;
}

table.generica_black td.tre_low {
    background-color: #101820; /* grigio medio */
    color: #7be0ff;
    font-size: 11px;
    font-weight: bold;
    height: 20px;
}

table.generica_black td.att_low {
    background-color: #101820; /* grigio medio */
    color: #9481ff;
    font-size: 11px;
    font-weight: bold;
    height: 20px;
}
table.formazioni-precedenti {
  table-layout: auto;
  width: 100%;
}
table.formazioni-precedenti td.riga_intestazione_y {
  background-color: #1a2836;
  color: #ffc932;
  font-size: 11px;
  font-weight: bold;
  height: 30px;
  width:100%;
}
table.formazioni-precedenti > tbody > tr > td.black * {
  font-size: 10px !important;
}

.solo_mobile,
.solo_desktop {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 200px; /* anche qui */
}
table.formazioni-precedenti td.riga_scura {
  font-size: 10px;
  text-align: center;
  padding: 1px;
  white-space: nowrap; /* CONSENTE il wrap */
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 15px;
  max-width: 80px;
  box-sizing: border-box;
  word-break: break-word; /* spezza parole lunghe */
}
/* celle chiare che NON devono andare a capo */
table.formazioni-precedenti td.riga_chiara {
  background-color: #1a2836;
  color: #fff;
  font-size: 10px;
  text-align: center;
  padding: 1px;
  white-space: nowrap; /* vieta il wrap */
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 15px;
  max-width: 80px;
  box-sizing: border-box;
}
  #box_spacer_10 {
    background: transparent;
    margin: 0 auto;        
    position:static;
    min-width: 300px;
    max-width: 749px;   
  padding: 0 10px;    
    height:10px;        
}
  #box_spacer_20 {
    background: transparent;
    margin: 0 auto;        
    position:static;
    min-width: 300px;
    max-width: 749px;   
  padding: 0 10px;   
    height:20px;        
}
  #box_spacer_30 {
    background: transparent;
    margin: 0 auto;        
    position:static;
    min-width: 300px;
    max-width: 749px;   
  padding: 0 10px;    
    height:30px;        
}

.solo_mobile {
  display: inline;
}
.solo_tablet {
  display: none;
}
.solo_desktop {
  display: none;
}

/* Mobile/Desktop visibility per bottoni */
.mobile {
  display: block;
}
.desktop {
  display: none;
}

@media (min-width: 700px) {
  .mobile {
    display: none;
  }
  .desktop {
    display: block;
  }
}

/*STILI ELEMENTI E TESTI*/
.hidden {
  display: none;
}
/* Disegna solo il perimetro esterno della riga evidenziata */
/* Bordo esterno unico */
.highlight td {
  /* azzera eventuali bordi laterali interni messi altrove */
  border-left: 0 !important;
  border-right: 0 !important;

  /* bordo alto/basso su TUTTE le celle */
  border-top: 2px solid #fcd67c;
  border-bottom: 2px solid #fcd67c;

  /* glow continuo anche sulle celle centrali */
  
  transition: filter .3s ease;
}

/* bordo sinistro solo alla prima cella */
.highlight td:first-child {
  border-left: 1px solid #fcd67c !important;
}

/* bordo destro solo all’ultima cella */
.highlight td:last-child {
  border-right: 1px solid #fcd67c !important;
}

/* dismesso: definizione spostata nella NEW SKIN */

/* Variabili per ritocchi rapidi */
:root{
  --btn-bg-1: #ffd866;   /* luce */
  --btn-bg-2: #f6a21f;   /* ombra */
  --btn-border: #7a4a00; /* bordo scuro */
  --btn-text: #1a1a1a;
  --btn-shadow: rgba(0,0,0,.25);
}

/* Bottone */
.btn-custom{
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--btn-border);
  background: linear-gradient(to bottom, var(--btn-bg-1) 0%, var(--btn-bg-2) 100%);
  color: var(--btn-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 6px 8px;          /* desktop default */
  border-radius: 24px;       /* pill */
  box-shadow:
    0 2px 0 var(--btn-border),           /* bordo “3D” */
    0 6px 12px var(--btn-shadow),        /* ombra esterna */
    inset 0 2px 0 rgba(255,255,255,.35); /* riflesso interno */
  cursor: pointer;
  outline: none;
  transition: transform .06s ease, box-shadow .12s ease, filter .12s ease;
  font-size: 11px;
}

/* Hover / focus */
.btn-custom:hover,
.btn-custom:focus-visible{
  filter: brightness(1.02);
  transform: translateY(-1px);
  box-shadow:
    0 3px 0 var(--btn-border),
    0 10px 16px var(--btn-shadow),
    inset 0 2px 0 rgba(255,255,255,.4);
}

/* Active (pressione) */
.btn-custom:active{
  transform: translateY(0);
  box-shadow:
    0 1px 0 var(--btn-border),
    0 4px 8px var(--btn-shadow),
    inset 0 2px 0 rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* Accessibilità focus tastiera */
.btn-custom:focus-visible{
  box-shadow:
    0 0 0 3px rgba(0,0,0,.5),
    0 0 0 6px rgba(255,210,80,.55),
    inset 0 2px 0 rgba(255,255,255,.4);
}



/* Righe che contengono il pulsante “Show more” */
.show-more-row {
  background-color: transparent;
}

/* Cella che contiene il pulsante “Show more” */
.show-more-cell {
  text-align: center;
  padding: 8px 0;  /* spazio verticale */
}

/* Stile per il pulsante “Show more” */
.show-more-button {
  background-color: #ffc932;  /* giallo */
  color: #101820;             /* testo scuro */
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 11px;            /* 11px su mobile */
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.show-more-button:hover {
  background-color: #e6b828;  /* leggermente più scuro al passaggio */
}


img.m {
  display: inline;
}
img.d {
  display: none;
} 

input.m { display: inline; }
input.d { display: none; }
img.fadeout {
  opacity:0;  
  animation: fadeOut ease 8s;
  -webkit-animation: fadeOut ease 8s;
  -moz-animation: fadeOut ease 8s;
  -o-animation: fadeOut ease 8s;
  -ms-animation: fadeOut ease 8s;
}
@keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}
@-moz-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}
@-o-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}
@-ms-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}
input.black_low { /* <input> */
  background-color: #1a2836;
  opacity:1.0;
  border: 0;
  font-size: 11px;
  height: 30px;
  color: white;
}        

input.black { /* <input> */
  background-color: #1a2836;
  opacity:1.0;
  border: 0;
  height: 30px;
  color: white;
  width: 200px;
}    

input.black_mini { /* <input> */
  background-color: #1a2836;
  opacity:1.0;
  border: 0;
  height: 30px;
  color: white;
  width: 80px;
}        



input.black_v_h { /* <input> */
  background-color: #1a2836;
  opacity:1.0;
  border: 0;
  height: 35px;
  font-size : 13px;        
  color: white;
  padding: 0px 2px 0px 3px;
}            

.centered-checkbox {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px; /* opzionale: spazio tra testo e checkbox */
}

/* === RUOLI COLORATI in modalità responsive === */
label.dif_low    { color: #fcd67c; }
label.med_low    { color: #8bfa8b; }
label.cen_low    { color: #12af6c; }
label.tre_low    { color: #7be0ff; }
label.att_low    { color: #9481ff; }
label.por_low    { color: #d54051; }

td.por {
  color: #d54051;
}
td.dif {
  color: #fcd67c;
}
td.med {
  color: #8bfa8b;
}
td.cen {
  color: #12af6c;
}
td.tre {
  color: #7be0ff;
}
td.att {
  color: #9481ff;
}
p.text_16_b {
  font-size : 16px;
  font-weight: bold;  
}
p.text_12_b {
  font-size : 12px;
  font-weight: bold;
}   
p.text_12_y {
  font-size : 12px;
  font-weight: bold;
  color: #ffc932; 
}  
p.text_22_y {
  font-size : 22px;
  font-weight: bold; 
  color: #ffc932;  
}
p.text_22_b {
  font-size : 22px;
  font-weight: bold;  
}
p.text_normal {
  font-size : 12px;
  font-weight: bold;
  color : white;  
}    
p.text_red {
  font-size : 11px;
  font-weight: bold;      
  color: #ff2e26; /*rosso */
}       
/* Bianco */

/* Bianco */
a.white_12_b:link,
a.white_12_b:visited,
a.white_12_b:hover ,
a.white_12_b:active {
    font-family: 'Montserrat', sans-serif;
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
} 
  a.white_12_b:hover {
    color: #ffc932;
}
  a.nero_13_b:link,
a.nero_13_b:visited,
a.nero_13_b:hover,
a.nero_13_b:active {
    font-family: 'Montserrat', sans-serif;
    color: #101820;
    font-size: 11px; /* base */
    font-weight: bold;
    text-decoration: none;
}
    .intestazione_y a,
.intestazione_y a:visited,
.intestazione_y a:hover,
.intestazione_y a:active {
    color: inherit;         /* usa il colore del td */
    text-decoration: none;  /* rimuove la sottolineatura */
} 
  p.yellow_11 {
    font-size : 11px;
    font-weight: bold;      
    color: #ffc932; /* giallo sito  */
}
a.yellow_11_b {
  font-size : 11px;
  font-weight: bold;      
  color: #ffc932; /* giallo sito  */
}
a.yellow_11_b:link,
a.yellow_11_b:visited,
a.yellow_11_b:hover,
a.yellow_11_b:active {
    font-family: 'Montserrat', sans-serif;
    color: #ffc932;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
}
a.yellow_11_b:hover {
  color: white;
}
a.por_13_b:link {
  font-family: 'Montserrat', sans-serif;
  color : #d54051;    
  font-size : 11px;
  font-weight: bold;    
  text-decoration : none;
}
  a.por_13_b:visited {
    font-family: 'Montserrat', sans-serif;
    color : #d54051;    
    font-size : 11px;
    font-weight: bold;          
    text-decoration : none;
  }
  a.por_13_b:hover {
    font-family: 'Montserrat', sans-serif;
    color : white;    
    font-size : 11px;
    font-weight: bold;                
    text-decoration : none;
  }
  a.por_13_b:active {
    font-family: 'Montserrat', sans-serif;
    color : #d54051;    
    font-size : 11px;
    font-weight: bold;                
    text-decoration : none;
  }        
a.dif_13_b:link {
  font-family: 'Montserrat', sans-serif;
  color : #fcd67c;    
  font-size : 11px;
  font-weight: bold;    
  text-decoration : none;
}
  a.dif_13_b:visited {
    font-family: 'Montserrat', sans-serif;
    color : #fcd67c;    
    font-size : 11px;
    font-weight: bold;          
    text-decoration : none;
  }
  a.dif_13_b:hover {
    font-family: 'Montserrat', sans-serif;
    color : white;    
    font-size : 11px;
    font-weight: bold;                
    text-decoration : none;
  }
  a.dif_13_b:active {
    font-family: 'Montserrat', sans-serif;
    color : #fcd67c;    
    font-size : 11px;
    font-weight: bold;                
    text-decoration : none;
  }            
a.med_13_b:link {
  font-family: 'Montserrat', sans-serif;
  color : #8bfa8b;    
  font-size : 11px;
  font-weight: bold;    
  text-decoration : none;
}
  a.med_13_b:visited {
    font-family: 'Montserrat', sans-serif;
    color : #8bfa8b;    
    font-size : 11px;
    font-weight: bold;          
    text-decoration : none;
  }
  a.med_13_b:hover {
    font-family: 'Montserrat', sans-serif;
    color : white;    
    font-size : 11px;
    font-weight: bold;                
    text-decoration : none;
  }
  a.med_13_b:active {
    font-family: 'Montserrat', sans-serif;
    color : #8bfa8b;    
    font-size : 11px;
    font-weight: bold;                
    text-decoration : none;
  }                
a.cen_13_b:link {
  font-family: 'Montserrat', sans-serif;
  color : #12af6c;    
  font-size : 11px;
  font-weight: bold;    
  text-decoration : none;
}
  a.cen_13_b:visited {
    font-family: 'Montserrat', sans-serif;
    color : #12af6c;    
    font-size : 11px;
    font-weight: bold;          
    text-decoration : none;
  }
  a.cen_13_b:hover {
    font-family: 'Montserrat', sans-serif;
    color : white;    
    font-size : 11px;
    font-weight: bold;                
    text-decoration : none;
  }
  a.cen_13_b:active {
    font-family: 'Montserrat', sans-serif;
    color : #12af6c;    
    font-size : 11px;
    font-weight: bold;                
    text-decoration : none;
  }                    
a.tre_13_b:link {
  font-family: 'Montserrat', sans-serif;
  color : #7be0ff;    
  font-size : 11px;
  font-weight: bold;    
  text-decoration : none;
}
  a.tre_13_b:visited {
    font-family: 'Montserrat', sans-serif;
    color : #7be0ff;    
    font-size : 11px;
    font-weight: bold;          
    text-decoration : none;
  }
  a.tre_13_b:hover {
    font-family: 'Montserrat', sans-serif;
    color : white;    
    font-size : 11px;
    font-weight: bold;                
    text-decoration : none;
  }
  a.tre_13_b:active {
    font-family: 'Montserrat', sans-serif;
    color : #7be0ff;    
    font-size : 11px;
    font-weight: bold;                
    text-decoration : none;
  }                        
a.att_13_b:link {
  font-family: 'Montserrat', sans-serif;
  color : #9481ff;    
  font-size : 11px;
  font-weight: bold;    
  text-decoration : none;
}
  a.att_13_b:visited {
    font-family: 'Montserrat', sans-serif;
    color : #9481ff;    
    font-size : 11px;
    font-weight: bold;          
    text-decoration : none;
  }
  a.att_13_b:hover {
    font-family: 'Montserrat', sans-serif;
    color : white;    
    font-size : 11px;
    font-weight: bold;                
    text-decoration : none;
  }
  a.att_13_b:active {
    font-family: 'Montserrat', sans-serif;
    color : #9481ff;    
    font-size : 11px;
    font-weight: bold;                
    text-decoration : none;
  }    
  a.bianco_13_b:link {
    font-family: 'Montserrat', sans-serif;
    color : white;    
    font-size : 11px;
    font-weight: bold;    
    text-decoration : none;
  }
    a.bianco_13_b:visited {
      font-family: 'Montserrat', sans-serif;
      color : white;    
      font-size : 11px;
      font-weight: bold;          
      text-decoration : none;
    }
    a.bianco_13_b:hover {
      font-family: 'Montserrat', sans-serif;
      color : #ffc932;    
      font-size : 11px;
      font-weight: bold;                
      text-decoration : none;
    }
    a.bianco_13_b:active {
      font-family: 'Montserrat', sans-serif;
      color : white;    
      font-size : 11px;
      font-weight: bold;                
      text-decoration : none;
    }
.j_rigori_selez {
  background-color: #101820; /* grigio medio */
  color: white;
  font-size : 11px;
  font-weight: bold;                        
  max-height: 30px;        
  cursor: pointer;                
}   
.btn-move {
  background: transparent;
  border: none;
  padding: 2px;
  margin: 0 2px;
  cursor: pointer;
}

/* PERSONALIZZAZIONE PAGINE*/

 
.tattica-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.tattica-col {
  flex: 1 1 48%;
  min-width: 130px;
  background: #101820;
  border-radius: 6px;
  padding: 6px;
  box-sizing: border-box;
}

.tattica-col:nth-child(3n) {
  flex: 1 1 100%;
}

.tattica-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.tattica-entry label {
  flex: 1;
  font-weight: bold;
  font-size: 11px;
  color: #fff;
  text-align: left;
  padding-right: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* VALORE SPAN / SELECT STILIZZATI */
.tattica-entry span,
.tattica-entry select {
  line-height: 30px !important;
  flex: 1 !important;
  text-align: center !important;
  color: #ffc932 !important;
  font-size: 11px;
  font-weight: bold !important;
  padding: 6px 10px !important;
  background-color: #1a2836 !important;
  border-radius: 4px !important;
  height: 30px !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* SELECT specifico */
.tattica-entry select {
  appearance: none !important;
  border: 1px solid #1a2836 !important;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23ffc932' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 2px center !important;
  background-size: 16px !important;
}

/* Illuminazione al focus */
.tattica-entry select:focus {
  border-color: #ffc932;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075),
              0 0 8px rgba(255, 201, 50, 0.6);
}
/* Compatibilità con browser Microsoft */
.tattica-entry select::-ms-expand {
  display: none;
  background-color: transparent;
  border: 0;
}

/* Placeholder (non usato ma incluso per sicurezza compatibilità) */
.tattica-entry select::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.tattica-entry select:-ms-input-placeholder {
  color: #999;
}
.tattica-entry select::-webkit-input-placeholder {
  color: #999;
}
span.tattica-valore {
  font-size: 11px;
}
select.tattica-valore{
  font-size: 11px;
}
/* Stile per il filtro competizione */
/* Container per label + select “Competition” */
.filter-competition-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Styling specifico per la select “Competition” */
select.filter-competition-select {
  appearance: none;
  border: 1px solid #1a2836;
  background-color: #1a2836;
  color: #ffc932;
  font-size: 12px;
  font-weight: bold;
  line-height: 30px;
  padding: 0px 36px 2px 10px;           /* padding-top/right/bottom/left */
  background-position: right 12px center;
  border-radius: 4px;
  height: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23ffc932' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  
  background-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

select.filter-competition-select:focus {
  outline: none;
  border-color: #ffc932;
  box-shadow:
    inset 0 1px 1px rgba(0,0,0,0.075),
    0 0 8px rgba(255,201,50,0.6);
}

select.filter-competition-select::-ms-expand {
  display: none;
}

/* === Select generica riutilizzabile === */
.select_rounded {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  display: inline-block;
  width: auto;           /* prende tutta la larghezza del contenitore */
  min-width: 120px;            /* evita che diventi troppo stretta */
  max-width: 100%;             /* non esce dal parent */

  border: 1px solid #1a2836;
  background-color: #1a2836;
  color: #ffc932;

  font-size: 11px;
  font-weight: bold;
  line-height: 1.3;
  height: 32px;

  padding: 0 32px 0 10px;      /* spazio per l’icona a destra */
  border-radius: 6px;
  box-sizing: border-box;
  cursor: pointer;

  background-image: url("data:image/svg+xml;utf8,<svg fill='%23ffc932' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  text-align-last: center;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.select_rounded option {
  text-align: center;
}

/* Focus */
.select_rounded:focus {
  outline: none;
  border-color: #ffc932;
  box-shadow:
    inset 0 1px 1px rgba(0,0,0,0.075),
    0 0 6px rgba(255,201,50,0.6);
}

/* Compatibilità MS */
.select_rounded::-ms-expand {
  display: none;
}

/* Testo lungo: ellissi */
.select_rounded option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ======== Premium: header rigori =================================== */
#headerContainer         {display:flex;gap:8px;flex-direction:column;align-items: center; justify-content:center;text-align: center;
  width:100%;max-width:1240px; margin: 0 auto; }
/* Responsive: spostato in tablet.main.css (≥1110px) */

  #box_rigoristi {
    width: 100%;
    min-width: 300px;
    max-width: 749px;   
  
    margin: 0 auto;
    text-align: center;
    display: flex;
  flex-direction: column;
  align-items: center;
    box-sizing: border-box;
  }
  #box_rigoristi > form {
    width: 100%;          /* occuperà il 100 % di #box_rigoristi           */
    max-width: 100%;      /* evita che il form si restringa                 */
    align-self: stretch;  /* in caso di altri item flex, si estende davvero */
  }

#topRow                  {display:flex;justify-content:center;gap:8px;margin-bottom:8px}
#guidaBlock              {display:flex;flex-direction:column;align-items:center;min-width: 200px;max-width:250px;position: relative;flex: 0 0 300px;}
#guidaBtn                {font-size:12px;background:#ffc932;border:none;padding:6px 10px;white-space:nowrap; 
  border-radius:6px;font-weight:bold;cursor:pointer}
#guidaBox                {display:none;background:#ffe98c;padding:6px 8px;font-size:11px;
                          border-radius:6px;margin-top:6px;color:#000;text-align:left;width: 100%; max-width: 100%;box-sizing: border-box; }
                          #guidaBox > div {
                            display: flex !important;      /* confermiamo il flex */
                            flex-wrap: wrap !important;    /* permettiamo ai figli di andare a capo */
                            gap: 16px !important;          /* spazio tra le due colonne */
                          }
#ordinaRow               {display:flex;justify-content:center;align-items:center;gap:6px;margin-bottom:8px;min-width: 295px;max-width:350px;
  width:100%}
#ordinaBtn               {background:#ffc932;color:#000;padding:6px 10px;border-radius:6px;
  border:none;font-weight:bold;cursor:pointer}
#ordinaControls          {display:flex;flex-wrap:wrap;gap:6px;align-items:center}

.skill-toggle            {padding:6px 10px;font-size:12px;border-radius:6px;border:none;
  font-weight:bold;background:#eee;cursor:pointer}
.skill-toggle.active     {background:#ffc932;color:#000}

#simRow                  {display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;min-width: 295px;max-width:335px;}
#simControls             {display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%;margin-bottom:8px}
#startModeBtn            {background:#9E9E9E;color:#fff;padding:6px 12px;border-radius:6px;
  border:none;font-weight:bold;cursor:pointer}
#btnAvvia,#btnReset      {background:#9E9E9E;color:#fff;padding:6px 10px;border-radius:6px;
  border:none;font-weight:bold;cursor:pointer}

#locationButtons         {display:none;flex-wrap:wrap;gap:10px;justify-content:center;width:100%}
.loc-btn                 {color:#fff;border:none;padding:6px 10px;border-radius:6px;
  font-weight:bold;background:#9E9E9E;cursor:pointer}
/* attiva con JS → .selected */
.loc-btn.selected[data-mode="home"]    {background:#4CAF50}
.loc-btn.selected[data-mode="neutral"] {background:#607D8B}
.loc-btn.selected[data-mode="away"]    {background:#D32F2F}

/* riepilogo */
#boxRiepilogoRigori      {background:#1a2836;color:#fff;font-size:11px;line-height:1.2;
  margin:10px auto;padding:10px;border-radius:6px;width:330px;display:none}

/* badge nomi selezionati (erano inline) */
.rigorista-nome-selezionato  {background:#2196F3!important;color:#fff!important;border-radius:4px;padding:2px 4px}
.portiere-nome-selezionato   {background:#FF9800!important;color:#fff!important;border-radius:4px;padding:2px 4px}

/* piccola animazione già nel JS */
/* dismesso: keyframes consolidati più sotto nel blocco NEW SKIN */
@keyframes float {from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(2px)}}
.fadeIn{animation:fadeIn .5s ease-out}
 /* Intro gialla “speaker” */
 .intro-text{
  font: 14px/1.3 'Bebas Neue',sans-serif;
  color:#ffc932;
  text-align:center;
  margin:4px 0 2px;
}

/* Esito grande, con animazione punch */
.esito-text{
  font-family:'Bebas Neue',sans-serif;
  font-size:26px;
  letter-spacing:1px;
  text-align:center;
  margin-bottom:4px;
  text-shadow:0 0 6px rgba(0,0,0,.25);
  animation:punch .5s ease-out;
}
.esito-text.goal   { color:#4caf50; }
.esito-text.parata { color:#d32f2f; }
.esito-text.palo   { color:#ffa000; }

@keyframes punch{
  0%  {transform:scale(.8) rotate(-2deg);opacity:0}
  60% {transform:scale(1.15) rotate(3deg)}
  100%{transform:scale(1) rotate(0);opacity:1}
}

/* Commento telecronaca corsivo/grigio */
.comment-text{
  font: italic 15px/1.4 'Bebas Neue',sans-serif;
  color:#c7c7c7;
  text-align:center;
  margin-bottom:10px;
}

/* FadeIn leggermente più marcato — spostato sotto NEW SKIN */

/* ═══════════════════════════════════════════════════════════════════
   NEW SKIN - DESIGN SYSTEM MODERNO
   ═══════════════════════════════════════════════════════════════════
   
   STRUTTURA:
   1. FONDAMENTI (keyframes, variables, reset, utilities)
   2. LAYOUT & CONTAINERS (#main_box, masonry, reveal)
   3. TIPOGRAFIA & LINKS (links, role colors)
   4. FORM & INPUT (input, select, states)
   5. COMPONENTI BASE (buttons, cards, pills, chips)
   6. TABELLE (cw-table, roster, lineup)
   7. DASHBOARD & BOARDS (fm-board, hero, tiles, tutor)
   8. FEATURES SPECIFICHE (search, auction, tournament, observer)
   9. RESPONSIVE (tutte le media queries consolidate)
   
   ═══════════════════════════════════════════════════════════════════ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. FONDAMENTI
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─────────── 1.1 KEYFRAMES ─────────── */

@keyframes fadeIn{
  from{opacity:0;transform:translateY(-6px)}
  to  {opacity:1;transform:translateY(0)}
}

@keyframes mePulse{ 
  0%,100%{ transform:scale(1); opacity:.95; } 
  50%{ transform:scale(1.15); opacity:1; } 
}

/* ─────────── 1.2 CSS VARIABLES (Tokens) ─────────── */

:root{
  /* spacing & radius */
  --gap:18px;
  --radius:16px;

  /* palette base */
  --c-bg:#101820;
  --c-surface:rgba(255,255,255,0.03);
  --c-surface-strong:rgba(255,255,255,0.06);
  --c-border:rgba(255,255,255,0.18);
  --c-border-soft:rgba(255,255,255,0.10);
  --c-text:#eaeaea;
  --c-accent:#FFC932;

  --shadow-soft:0 2px 10px rgba(0,0,0,0.10);
  --shadow-hover:0 6px 16px rgba(0,0,0,0.16);

  /* alias "fm-board" (compat con vecchi token) */
  --bg:#101820; --panel:#1a2836; --panel-2:#101820;
  --text:#e8edf5; --muted:#9aa6bb; --line:rgba(255,255,255,.08);
  --ring:rgba(255,201,50,.30); --accent:#FFC932;
  --ok:#2ecc71; --warn:#f5a524; --idle:#8892a6; --radius-fm:14px;

  --c-text-2: var(--text);
  --c-accent-2: var(--accent);
  --c-border-2: rgba(255,255,255,.18);
  --c-border-soft-2: rgba(255,255,255,.10);
  --c-surface-strong-2: rgba(255,255,255,.06);

  /* cw-table spacing (di default, il roster lo riduce sopra) */
  --cw-pad-y:2px;
  --cw-pad-x:2px;

  /* rail formazione */
  --rail-w:4px;
  --rail-radius:3px;

  /* form skin */
  --form-h:34px;              /* altezza campi */
  --form-br:8px;              /* raggio bordo  */

  /* role colors */
  --role-por:#d54051;
  --role-dif:#fcd67c;
  --role-med:#8bfa8b;
  --role-cen:#12af6c;
  --role-tre:#7be0ff;
  --role-att:#9481ff;
}

/* ─────────── 1.3 RESET & UTILITIES ─────────── */

*{ box-sizing:border-box; }
dl,dt,dd{ margin:0; }
.hidden{ display:none; }
.btn-wrap{ text-align:center; margin-top:auto; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. LAYOUT & CONTAINERS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─────────── 2.1 MAIN BOX (Container Principale) ─────────── */

#main_box{
  width:100%;
  min-width:300px;
  max-width:749px;
  padding:0 10px;
  margin:0 auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  box-sizing:border-box;
}

/* ─────────── 2.2 MASONRY LAYOUT ─────────── */

/* 1 colonna su mobile */
#layout_blocks{ column-count:1; }

/* "Card"/blocchi dentro alle colonne */
.block_box{
  break-inside:avoid;          /* evita spezzamenti tra colonne */
  margin:0 0 10px;             /* spazio verticale tra card */
  width:auto;
  max-width:none;
  display:block;               /* evita layout strani se avevi flex */
  box-sizing:border-box;
  text-align:center;           /* riprende il tuo text-align */
}

/* ─────────── 2.3 REVEAL EFFECTS (Animazioni) ─────────── */

.reveal{
  opacity:0;
  transform:translateY(24px) scale(0.98);
  width:100%;
  max-width:749px;             /* spostato qui */
  margin-inline:auto;          /* centra il blocco */
  box-sizing:border-box;       /* robustezza padding/border */
}
.reveal.in-view{ opacity:1; transform:translateY(0) scale(1); }
.reveal-child{
  opacity:0; transform:translateY(24px) scale(.98);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
  will-change:transform, opacity;
}
.reveal-child.in-view{ opacity:1; transform:translateY(0) scale(1); }
@media (prefers-reduced-motion:reduce){
  .card, .reveal, .reveal.in-view,
  .reveal-child, .reveal-child.in-view{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}
/* stato "no reveal" */
.no-reveal .reveal,
.no-reveal .reveal-child{
  opacity:1 !important;
  transform:none !important;
}

/* ─────────── 2.4 MASONRY FIX ─────────── */

#layout_blocks{ column-gap:var(--gap); }
.block_box{ break-inside:avoid; margin-bottom:var(--gap); }
/* azzera margine top delle schede nel masonry per evitare slittamenti */
#layout_blocks .fm-board{ margin:0 0 var(--gap); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. TIPOGRAFIA & LINKS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─────────── 3.1 ROLE COLORS (Testo) ─────────── */

/* Ruolo colorato (testo) */
.rp-role{ font-weight:700; }
.rp-role.rp--dif{ color:#fcd67c; } /* D */
.rp-role.rp--med{ color:#8bfa8b; } /* M */
.rp-role.rp--cen{ color:#12af6c; } /* C */
.rp-role.rp--tre{ color:#7be0ff; } /* T */
.rp-role.rp--att{ color:#9481ff; } /* A */
.rp-role.rp--por{ color:#d54051; } /* P */

/* ─────────── 3.2 LINKS ─────────── */

/* Base = MOBILE */
/* Forza nascondimento elementi con attributo hidden */
[hidden]{ display:none !important; }

.search-overlay[hidden]{ display:none !important; }
.search-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(1px);
  display:flex; align-items:flex-start; justify-content:center; padding:6vh 12px; z-index:9999;
}
.search-panel{
  width:min(860px,100%); background:#101820; border:1px solid #2a2a2a; border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.6); overflow:hidden; color:#eaeaea;
}

/* Head: mobile = elementi a colonna */
.search-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:14px 16px;
  border-bottom:1px solid #FFC932;
}
.search-input{
  order:2;
  flex:1 1 100%;
  min-width:0;                 /* lascia prendere tutta la riga su mobile */
  height:44px; background:#1a2836; border:1px solid #FFC932; border-radius:10px; color:#FFC932;
  padding:0 12px; font-size:16px; outline:none; transition:border .15s ease, box-shadow .15s ease;
}
.search-input:focus{ border-color:#FFC932; box-shadow:0 0 0 3px rgba(255,201,50,.35); }

.chips{
  order:3;
  width:100%;
  margin-top:8px;
  display:flex; gap:8px; flex-wrap:wrap;
  justify-content:flex-end;    /* chips allineate a destra su mobile */
}
.chip{
  height:30px; padding:0 10px; border-radius:9999px; flex:0 0 auto;
  border:1px solid #2a2a2a; background:#101820; color:#FFF;
  display:inline-flex; align-items:center; cursor:pointer; font-weight:600; font-size:13px;
}
.chip[data-active="true"]{ background:#1a2836; border-color:#FFC932; color:#FFC932; }

.closebtn{
  order:1;
  margin-left:auto;            /* pulsante chiudi allineato a destra in alto */
  background:transparent; border:0; color:#FFC932; cursor:pointer; padding:4px 10px;
}

.search-body{ max-height:50vh; overflow:auto; }
.search-footer{
  display:flex; align-items:center; justify-content:space-between; padding:10px 16px;
  border-top:1px solid #242424; color:#FFC932; font-size:12px;
}

/* Responsive: Search Panel (≥601px) */
@media (min-width:601px){
  .search-input{
    order:1;
    flex:1 1 240px;
    min-width:240px;
  }
  .chips{
    order:2;
    width:auto;
    margin-top:0;
    justify-content:flex-start;
  }
  .closebtn{
    order:3;
    margin-left:0;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5.5 PREVIEW BADGE (Badge Anteprima)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Badge "Anteprima" riutilizzabile - posizionato in alto a destra della pagina */
.preview-badge {
  position: fixed;
  top: 60px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-accent, #FFC932);
  background: rgba(255, 201, 50, 0.1);
  border: 1px solid var(--c-accent, #FFC932);
  border-radius: 12px;
  z-index: 800;
  white-space: nowrap;
  pointer-events: none;
}

@media (min-width: 600px) {
  .preview-badge {
    top: 80px;
    right: 16px;
    padding: 5px 12px;
    font-size: 11px;
  }
}
@media (min-width: 800px) {
  .preview-badge {
    top: 110px;
    right: 16px;
    padding: 5px 12px;
    font-size: 11px;
  }
}
@media (min-width: 1280px) {
  .preview-badge {
    top: 115px;
    right: 20px;
    padding: 6px 14px;
    font-size: 12px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. TABELLE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─────────── 6.1 CW-ROSTER (Tabelle Giocatori) ─────────── */

/* Regole base cw-table (necessarie per tabelle fuori o dentro fm-board) */
.cw-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  font-size:10px;
  color:var(--c-text-2);
}
.cw-table thead td{
  background:transparent;
  color:var(--c-text-2);
  font-weight:800;
  font-size:10px;
  letter-spacing:.2px;
  height:38px;
  padding:var(--cw-pad-y,6px) var(--cw-pad-x,6px);
  border-bottom:1px solid var(--c-border-2);
  white-space:nowrap;
  text-align:center;
  vertical-align:middle;
}
.cw-table tbody td{
  background:transparent;
  color:var(--c-text-2);
  height:40px;
  padding:var(--cw-pad-y,6px) var(--cw-pad-x,6px);
  border-bottom:1px solid var(--c-border-soft-2);
  vertical-align:middle;
}
/* Nascondi righe separatrici nella classifica espandibile - PRIMA di altre regole */
.cw-table tbody tr.cw-sep,
.cw-table tbody tr.cw-sep.core,
.cw-table tbody tr.cw-sep.extra{
  display:none !important;
  height:0 !important;
  line-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  visibility:hidden !important;
  overflow:hidden !important;
}
.cw-table tbody tr.cw-sep td,
.cw-table tbody tr.cw-sep.core td,
.cw-table tbody tr.cw-sep.extra td,
.cw-table tbody tr.cw-sep td.riga_grigia{
  display:none !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  visibility:hidden !important;
  overflow:hidden !important;
  line-height:0 !important;
}
/* Supporto classi legacy dentro cw-table - solo per tbody */
.cw-table tbody td.riga_scura{
  background-color:#101820;
  color:#fff;
  font-size:11px;
  font-weight:bold;
  height:35px;
  padding:4px;
  vertical-align:middle;
}
/* Thead con riga_scura: mantiene stili thead - background ereditato dal thead base */
.cw-table thead td.riga_scura,
.fm-board .cw-table.cw-roster thead td.riga_scura{
  color:#fff !important;
  height:38px !important;
  padding:var(--cw-pad-y,2px) var(--cw-pad-x,2px) !important;
  border-bottom:1px solid var(--c-border-2) !important;
  font-weight:800 !important;
  font-size:10px !important;
  letter-spacing:.2px !important;
  white-space:nowrap !important;
  text-align:center !important;
  vertical-align:middle !important;
}
.cw-table .col-role{ width:84px; text-align:center; }
.cw-table .col-name{ min-width:0; text-align:left; }
.cw-table .col-age{ width:30px; text-align:center; font-variant-numeric:tabular-nums; }
.cw-table .col-val{ width:76px; text-align:right; font-variant-numeric:tabular-nums; }

/* ROSTER (scoped) — compatto + mobile-friendly */
.fm-board .cw-table.cw-roster{
  --cw-pad-y:2px;
  --cw-pad-x:2px;

  /* Regola qui le 3 colonne “rigide” */
  --roster-role-w:84px;  /* Ruolo(Pos.) */
  --roster-age-w: 30px;  /* Età         */
  --roster-val-w: 76px;  /* Valore      */
}

/* Intestazioni: centrate (tranne nome) */
.fm-board .cw-table.cw-roster thead td{ 
  background:transparent;
  color:var(--c-text-2);
  font-weight:800;
  font-size:10px;
  letter-spacing:.2px;
  height:38px;
  padding:var(--cw-pad-y,2px) var(--cw-pad-x,2px);
  border-bottom:1px solid var(--c-border-2);
  white-space:nowrap;
  text-align:center;
  vertical-align:middle;
}
.fm-board .cw-table.cw-roster thead .col-name{ text-align:left; }

/* Nome: ellissi coerente, si espande sullo spazio residuo */
.fm-board .cw-table.cw-roster .col-name{ min-width:0; overflow:hidden; }

.fm-board .cw-table.cw-roster .ml-name{
  display:flex; align-items:center; gap:6px; width:100%; min-width:0; overflow:hidden;
}
.fm-board .cw-table.cw-roster .ml-name a{
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;               /* numero di righe visibili */
  -webkit-box-orient:vertical;
  overflow:hidden;
  white-space:normal;         /* consente il wrap */
  word-break:break-word;      /* spezza parole troppo lunghe */
}
.fm-board .cw-table.cw-roster .ml-name .flag{
  width:18px; height:12px; flex:0 0 auto;
}

/* Colonne compatte */
.fm-board .cw-table.cw-roster .col-role{
  width:var(--roster-role-w); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fm-board .cw-table.cw-roster .col-age{
  width:var(--roster-age-w); text-align:center; font-variant-numeric:tabular-nums;
}
.fm-board .cw-table.cw-roster .col-val{
  width:var(--roster-val-w);
  text-align:right;
  font-variant-numeric:tabular-nums;
  display:table-cell !important;
}

/* Roster: micro-fix colonna Azione */
.fm-board .cw-table.cw-roster thead td.col-action,
.fm-board .cw-table.cw-roster tbody td.col-action{
  --cw-pad-x:8px;             /* forza il padding orizzontale solo qui */
  width:92px;                 /* tua larghezza fissa */
  white-space:nowrap;         /* evita wrap del bottone */
  text-align:center;          /* coeso con .cell-end che giustifica a destra */
}

/* utility coerente con la skin */
.cell-mid{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}

/* niente rail per l'ultima colonna nel roster */
.fm-board .cw-table.cw-roster .cw-row td.col-action::after{ display:none; }

/* Rail sinistro per evidenziare giovani appena scoperti */
.fm-board .cw-table.cw-roster .cw-row.rail-left td:first-child{
  position:relative;
}
.fm-board .cw-table.cw-roster .cw-row.rail-left td:first-child::before{
  content:"";
  position:absolute;
  left:0;
  top:var(--cw-pad-y,2px);
  bottom:var(--cw-pad-y,2px);
  width:var(--rail-w,4px);
  border-radius:0 var(--rail-radius,3px) var(--rail-radius,3px) 0;
  background:var(--ok,#FFC932);
  box-shadow:0 0 0 1px rgba(255,201,50,.25), 0 0 10px rgba(255,201,50,.25);
  opacity:.95;
  pointer-events:none;
  z-index:1;
}

/* Intestazioni: niente nowrap, solo word wrap a spazi */
.fm-board .cw-table.cw-roster thead td{
  white-space:normal;         /* consente il ritorno a capo */
  word-break:normal;          /* NON spezzare nel mezzo delle parole */
  overflow-wrap:normal;       /* NON forzare spezzature arbitrarie */
  hyphens:none;
}

/* Testo del nome: rimuovi clamp/ellipsis e attiva il wrap per parola */
.fm-board .cw-table.cw-roster .ml-name{ min-width:0; }
.fm-board .cw-table.cw-roster .ml-name a,
.fm-board .cw-table.cw-roster .ml-name .white_11_b{
  display:block;
  max-width:100%;
  white-space:normal !important;   /* override di eventuali nowrap */
  word-break:normal;               /* NON spezzare le parole */
  overflow-wrap:normal;            /* vai a capo solo sugli spazi */
  text-overflow:clip;
  -webkit-line-clamp:unset;
  line-clamp:unset;
  -webkit-box-orient:initial;
  hyphens:none;
}

/* Se altrove c’era .col-name a { white-space:nowrap } lo annulliamo qui */
.fm-board .cw-table.cw-roster .col-name a{ white-space:normal !important; text-align:left; }

.fm-board .cw-table .col-name a.yellow_11_b{ color:#ffc932; }
.fm-board .cw-table .cw-row.is-me .col-name a{ color:#ffc932; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. FORM & INPUT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─────────── 4.1 INPUT & SELECT BASE ─────────── */

/* Base comune a input.black_h e select.whis_select_mini */
input.black_h,
select.whis_select_mini{
  box-sizing:border-box !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;

  display:block !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  height:var(--form-h) !important;
  padding:0 10px !important;

  font:inherit !important;
  font-size:12px !important;
  line-height:1.42857143 !important;
  color:var(--text) !important;

  border:1px solid var(--line) !important;
  border-radius:var(--form-br) !important;

  background:var(--panel) !important;
  background-image:none !important;   /* la select lo ri-aggiunge sotto */
  box-shadow:none !important;
  outline:0 !important;
}

/* Forza width 100% anche con selettori più specifici */
.au-board .au-form .field select.whis_select_mini,
.au-board .au-form .field input.black_h,
.match-two-cols .field select.whis_select_mini,
.match-two-cols .field input.black_h,
.au-form .field select.whis_select_mini,
.au-form .field input.black_h,
.au-board select.whis_select_mini,
.au-board input.black_h,
form.au-board select.whis_select_mini,
form.au-board input.black_h,
form .field select.whis_select_mini,
form .field input.black_h{
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  display:block !important;
  box-sizing:border-box !important;
}

/* Override regole generic select in main.css che impongono width fissi */
select.whis_select_mini{
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  display:block !important;
}

/* Override totale per select generiche che potrebbero interferire */
.au-board select,
.au-board select.whis_select_mini,
form.au-board select,
form.au-board select.whis_select_mini{
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
}

/* Select: caret PNG + leggero gradient, con padding a destra */
select.whis_select_mini{
  background-image:
    url("../img/br_down.png"),
    linear-gradient(180deg, var(--panel) 50%, var(--panel-2) 150%) !important;
  background-repeat:no-repeat, no-repeat !important;
  background-position:calc(100% - 10px) 50%, 0 0 !important;
  background-size:12px 12px, 100% 100% !important;
  background-clip:padding-box, border-box !important;
  padding-right:28px !important;
}

/* Edge/IE legacy caret */
select.whis_select_mini::-ms-expand{ display:none !important; }

/* Focus coerente con la skin */
input.black_h:focus,
select.whis_select_mini:focus{
  border-color:#ffc932 !important;
  box-shadow:0 0 0 3px var(--ring) !important;
}

/* Disabled */
input.black_h:disabled,
select.whis_select_mini:disabled{
  opacity:.55 !important;
  cursor:not-allowed !important;
}

/* ⚠️ DEPRECATO: gener_black è in dismissione - TODO: migrare a NEW SKIN (fm-board, au-form, ecc.)
   Fix temporaneo per input e select dentro tabelle legacy gener_black - assicura larghezza leggibile */
table.gener_black input.black_h,
table.gener_black select.whis_select_mini{
  width:100% !important;
  min-width:100px !important;
  max-width:none !important;
  padding:8px 12px !important;
  font-size:12px !important;
}

/* Fix specifico per celle riga_min che contengono input/select */
table.gener_black td.riga_min input.black_h,
table.gener_black td.riga_min select.whis_select_mini{
  width:100% !important;
  min-width:120px !important;
  padding:8px 12px !important;
  font-size:12px !important;
  display:block !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. COMPONENTI BASE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─────────── 5.1 BUTTONS ─────────── */

.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  background:linear-gradient(180deg,#FFD76A,#FFB100);
  color:#1a1a1a;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(255,177,0,0.35);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(255,177,0,0.45); }
}

/* ─────────── 5.2 CARDS ─────────── */

/* Link bianchi */
a.white_11_b,
a.white_11_b:link,
a.white_11_b:visited,
a.white_11_b:active{
  font-family:'Montserrat',sans-serif;
  color:#fff;
  font-size:11px;
  font-weight:bold;
  text-decoration:none;
}
a.white_11_b:hover{ color:#ffc932; }

/* Link gialli */
a.yellow_11_b,
a.yellow_11_b:link,
a.yellow_11_b:visited,
a.yellow_11_b:active{
  font-family:'Montserrat',sans-serif;
  color:#ffc932;
  font-size:11px;
  font-weight:bold;
  text-decoration:none;
}
a.yellow_11_b:hover{ color:#fff; }

/* ─────────── 3.3 ROLE COLORS ADDITIVE (Variabili) ─────────── */

/* testo ruolo (report/roster) */
.rp-role.rp--dif{ color:var(--role-dif); }
.rp-role.rp--med{ color:var(--role-med); }
.rp-role.rp--cen{ color:var(--role-cen); }
.rp-role.rp--tre{ color:var(--role-tre); }
.rp-role.rp--att{ color:var(--role-att); }
.rp-role.rp--por{ color:var(--role-por); }

/* label filtri/ruoli */
label.dif_low{ color:var(--role-dif); }
label.med_low{ color:var(--role-med); }
label.cen_low{ color:var(--role-cen); }
label.tre_low{ color:var(--role-tre); }
label.att_low{ color:var(--role-att); }
label.por_low{ color:var(--role-por); }

/* celle ruolo nelle tabelle */
td.dif{ color:var(--role-dif); }
td.med{ color:var(--role-med); }
td.cen{ color:var(--role-cen); }
td.tre{ color:var(--role-tre); }
td.att{ color:var(--role-att); }
td.por{ color:var(--role-por); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8.10 CALENDARIO STAGIONE - TIMELINE ACCORDION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── Progress Bar Stagionale ─── */
.season-progress{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    background:var(--c-surface-strong);
    border:1px solid var(--c-border);
    border-radius:12px;
    margin-bottom:16px;
}
.season-label{
    font-weight:800;
    font-size:13px;
    color:var(--c-accent);
    white-space:nowrap;
}
.progress-bar{
    height:10px;
    background:rgba(255,255,255,.08);
    border-radius:999px;
    overflow:hidden;
}
.progress-fill{
    height:100%;
    background:linear-gradient(90deg,var(--accent),#ffd563);
    border-radius:999px;
    transition:width .6s ease;
    box-shadow:0 0 8px rgba(255,201,50,.4);
}

/* ─── Timeline Container ─── */
.timeline{
    position:relative;
    padding-left:20px;
}
.timeline::before{
    content:"";
    position:absolute;
    left:6px;
    top:0;
    bottom:0;
    width:2px;
    background:var(--c-border);
    z-index:0;
}

/* ─── Phase Accordion ─── */
.phase-accordion{
    position:relative;
    margin-bottom:16px;
}
.phase-accordion::before{
    content:"";
    position:absolute;
    left:-14px;
    top:20px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--c-accent);
    border:3px solid var(--c-bg);
    box-shadow:0 0 0 2px var(--c-border);
    z-index:2;
}
.phase-accordion.phase--preseason::before{
    background:#ffa500;
}
.phase-accordion.phase--season::before{
    background:var(--ok);
}

.phase-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    background:var(--c-surface-strong);
    border:1px solid var(--c-border);
    border-radius:10px;
    cursor:pointer;
    transition:all .2s ease;
}
.phase-header:hover{
    background:rgba(255,255,255,.08);
}
.phase-accordion.is-expanded .phase-header{
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}
.phase-accordion.phase--season .phase-header{
    background:rgba(46,204,113,.08);
    border-color:rgba(46,204,113,.25);
}

.phase-header__left{
    display:flex;
    align-items:center;
    gap:10px;
}
.phase-header__right{
    display:flex;
    align-items:center;
}
.phase-icon{
    font-size:18px;
}
.phase-title{
    font-size:13px;
    font-weight:800;
    color:var(--c-text);
}
.phase-subtitle{
    font-size:10px;
    color:var(--muted);
    margin-top:2px;
}
.phase-count{
    display:inline-flex;
    padding:4px 10px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--c-border);
    border-radius:999px;
    font-size:10px;
    font-weight:800;
    color:var(--c-accent);
    margin-right:8px;
}
.phase-arrow{
    font-size:12px;
    color:var(--muted);
    transition:transform .2s ease;
}
.phase-accordion.is-expanded .phase-arrow{
    transform:rotate(180deg);
}

.phase-body{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
    border:1px solid var(--c-border);
    border-top:none;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}
.phase-accordion.is-expanded .phase-body{
    max-height:10000px;
}
.phase-content{
    padding:12px;
    background:var(--c-bg);
}

/* ─── Event Day Compact ─── */
.event-day-compact{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 10px;
    background:var(--c-surface);
    border:1px solid var(--c-border-soft);
    border-radius:8px;
    margin-bottom:8px;
    transition:all .2s ease;
}
.event-day-compact:hover{
    background:var(--c-surface-strong);
    border-color:var(--c-border);
}
.event-date-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:6px 10px;
    background:rgba(255,255,255,.04);
    border-radius:6px;
    min-width:40px;
    flex-shrink:0;
}
.event-date-box__day{
    font-size:9px;
    font-weight:700;
    color:var(--muted);
    text-transform:uppercase;
}
.event-date-box__num{
    font-size:16px;
    font-weight:800;
    color:var(--c-text);
}
.event-date-box__time{
    font-size:9px;
    font-weight:700;
    color:var(--c-accent);
    margin-top:2px;
}
.event-date-box.is-today{
    background:var(--ok);
}
.event-date-box.is-today .event-date-box__day,
.event-date-box.is-today .event-date-box__num{
    color:#fff;
}

.event-list{
    flex:1;
    min-width:0;
}
.event-item-compact{
    display:flex;
    align-items:center;
    gap:0px;
    padding:6px 4px;
    background:rgba(255,255,255,.02);
    border:1px solid var(--c-border-soft);
    border-radius:6px;
}
.event-item-compact + .event-item-compact{
    margin-top:8px;
}
.event-icon-small{
    font-size:16px;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    margin-right:8px;
}
.event-venue-result{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    flex-shrink:0;
    margin-left:auto;
    min-width:40px;
}
.venue-icon{
    font-size:12px;
}
.event-text{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
    text-align:center;
}
.event-comp-label{
    font-size:10px;
    font-weight:800;
    text-align:center;
}
.event-comp-label--league{ color:#d54051; }
.event-comp-label--super{ color:#12af6c; }
.event-comp-label--uffa{ color:#fcd67c; }
.event-comp-label--world{ color:#7be0ff; }

.event-matchup{
    font-size:11px;
    color:var(--c-text);
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:6px;
    line-height:1.3;
}
.event-matchup.vertical{
    flex-direction:column;
    gap:0;
}
.event-matchup__home,
.event-matchup__away{
    font-weight:700;
    color:var(--c-text);
    text-decoration:none;
}
.event-matchup__home:hover,
.event-matchup__away:hover{
    color:var(--c-accent);
    text-decoration:underline;
}
.event-matchup__vs{
    font-size:9px;
    color:var(--muted);
    align-self:center;
    margin:2px 0;
}
.event-matchup .you{
    color:var(--c-accent);
    font-weight:800;
}

/* Mobile: verticale */
@media (max-width:699px){
    .event-matchup.vertical{
        flex-direction:column !important;
        gap:0 !important;
    }
    .event-matchup.vertical .event-matchup__vs{
        align-self:center;
        margin:2px 0;
    }
}

/* Desktop: inline → spostato in tablet.main.css */

.result-inline{
    padding:3px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}
.result-inline--win{
    background:rgba(46,204,113,.15);
    color:#2ecc71;
}
.result-inline--draw{
    background:rgba(255,165,0,.15);
    color:#ffa500;
}
.result-inline--lose{
    background:rgba(235,80,80,.15);
    color:#eb5050;
}

/* ─── Month Divider ─── */
.month-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:20px 0 12px;
}
.month-divider::before,
.month-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--c-border), transparent);
}
.month-divider__text{
    font-size:11px;
    font-weight:800;
    color:var(--c-accent);
    text-transform:uppercase;
    letter-spacing:.5px;
}

/* ─── Training & Change Items ─── */
.training-item-compact{
    padding:8px 10px;
    background:rgba(255,165,0,.08);
    border:1px solid rgba(255,165,0,.25);
    border-radius:6px;
    margin-bottom:6px;
}
.training-item-compact.day-one{
    opacity:1 !important;
}
.training-label-compact{
    font-size:11px;
    font-weight:800;
    color:#ffa500;
    margin-bottom:2px;
}
.training-detail-compact{
    font-size:10px;
    color:var(--muted);
}

/* ─── Season Change ─── */
.change-item{
    padding:14px;
    background:linear-gradient(135deg, rgba(255,201,50,.15) 0%, rgba(255,201,50,.05) 100%);
    border:2px solid rgba(255,201,50,.45);
    border-radius:10px;
    text-align:center;
}
.change-icon{
    font-size:32px;
    margin-bottom:8px;
    animation:rotate-slow 3s linear infinite;
}
@keyframes rotate-slow{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}
.change-title{
    font-size:14px;
    font-weight:800;
    color:var(--c-accent);
    margin-bottom:4px;
}
.change-subtitle{
    font-size:11px;
    color:var(--muted);
}
.event-date-box--rest{
    background:rgba(255,255,255,.02);
}
.event-date-box--preseason{
    background:rgba(255,165,0,.10);
}
.event-date-box--change{
    background:var(--c-accent);
}
.event-item-compact--rest{
    background:transparent;
    border-style:dashed;
}
.event-item-compact--rest.with-opacity{
    opacity:.7;
}
.event-item-compact--preseason{
    background:rgba(255,165,0,.08);
    border-color:rgba(255,165,0,.25);
}

/* ─── Utility: Text Compact ─── */
.t-compact{
    font-size:10px;
    line-height:1.15;
}

/* ─── Event Day States ─── */
.event-day-compact.is-today{
    border:2px solid var(--ok);
    box-shadow:0 0 0 2px rgba(46,204,113,.2);
    background:rgba(46,204,113,.04);
}
.event-day-compact--change{
    border:2px solid rgba(255,201,50,.45);
    box-shadow:0 0 0 2px rgba(255,201,50,.2);
}

/* ─── Event Date Box Colors ─── */
.event-date-box__day--dark,
.event-date-box__num--dark{
    color:#1a1a1a;
}
.event-date-box__day--preseason,
.event-date-box__num--preseason{
    color:#ffa500;
}

/* ─── Event Labels & Text Colors ─── */
.event-comp-label--preseason{
    color:#ffa500;
}
.event-comp-label--muted{
    color:var(--muted);
}
.event-matchup--muted{
    color:var(--muted);
}
.event-icon-small--large{
    font-size:20px;
}
.event-spacer{
    min-width:40px;
    flex-shrink:0;
}
.event-time-small{
    font-size:10px;
    font-weight:700;
    color:var(--muted);
    white-space:nowrap;
}

/* ─── Season Start Box ─── */
.season-start-box{
    margin-top:16px;
    padding:12px;
    background:rgba(46,204,113,.08);
    border:1px solid rgba(46,204,113,.25);
    border-radius:8px;
    text-align:center;
}
.season-start-box__icon{
    font-size:16px;
    margin-bottom:6px;
}
.season-start-box__title{
    font-size:12px;
    font-weight:800;
    color:var(--ok);
    margin-bottom:4px;
}
.season-start-box__date{
    font-size:11px;
    color:var(--muted);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. COMPONENTI BASE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─────────── 5.1 BUTTONS ─────────── */

.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  background:linear-gradient(180deg,#FFD76A,#FFB100);
  color:#1a1a1a;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(255,177,0,0.35);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(255,177,0,0.45); }
}

/* ─────────── 5.2 CARDS ─────────── */

.card{
  background:var(--c-surface);
  border:1px solid var(--c-border-soft);
  border-radius:var(--radius);
  padding:10px;
  box-shadow:var(--shadow-soft);
  transition:transform .3s ease, box-shadow .16s ease, border-color .16s ease, opacity .7s ease;
  will-change:transform;
  overflow:hidden;
}
.card.center{ text-align:center; }
.card img{ max-width:100%; height:auto; }
@media (hover:hover) and (pointer:fine){
  .card:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-hover);
    border-color:rgba(255,255,255,0.16);
  }
}

/* righe compatte opzionali */
.card tr.row-compact td{
  background:transparent !important;
  border:0 !important;
  padding:4px 0;
}
.card tr.row-compact + tr.row-compact td{
  border-top:1px solid rgba(255,255,255,.06) !important;
}

/* ─────────── 5.3 CARDS GRID ─────────── */

.cards-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  align-content:start;
  align-items:stretch;
  padding:2px;
  margin-top:2px;
  height:auto !important;
  width:100% !important;
  min-width:100% !important;
}
.cards-grid > .card{ display:block; min-width:0; }
.cards-grid .card{ padding:8px; height:auto !important; }

.cards-grid.cards-grid--single{
  grid-template-columns:minmax(260px, 420px);
  justify-content:center;
  width:100%;
}
/* Per diretta/match/classifiche: usa larghezza piena */
.fm-board .cards-grid[data-grid="spy"].cards-grid--single{
  grid-template-columns:1fr;
  width:100%;
}

/* se la grid è dentro una tabella, assicura larghezza piena */
table.generica_black:has(.cards-grid){
  width:100%;
  border-radius:var(--radius);
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
}
/* arrotonda gli angoli esterni della tabella wrapper */
table.generica_black:has(.cards-grid) > tbody > tr:first-child > td:first-child{  border-top-left-radius:var(--radius); }
table.generica_black:has(.cards-grid) > tbody > tr:first-child > td:last-child{   border-top-right-radius:var(--radius); }
table.generica_black:has(.cards-grid) > tbody > tr:last-child  > td:first-child{  border-bottom-left-radius:var(--radius); }
table.generica_black:has(.cards-grid) > tbody > tr:last-child  > td:last-child{   border-bottom-right-radius:var(--radius); }

/* ====== Firefox “spazi fantasma” sotto pill/descrizione ====== */
/* Quando la table-header-pill è figlia diretta della grid, evita che il suo margin si sommi al gap */
.cards-grid > .table-header-pill{ margin-bottom:0 !important; }

/* Normalizza gli spazi delle card in grid */
.cards-grid > *{ margin:0 !important; }

/* Descrizione card: niente padding/margine extra che su Firefox si somma al gap */
.card .card-desc{
  margin:8px 2px 0 !important;
  padding:0 !important;
  line-height:1.35;
}

/* ===== Mercato fra club — grid responsiva (1 col) ===== */
.cards-grid[data-grid="market"]{ grid-template-columns:1fr; } /* 1 card per riga su mobile */

/* intestazione data centrata */
.market-date{
  text-align:center;
  font-weight:800;
  color:var(--c-accent-2);
  height:38px;
  padding:6px 4px;
}

/* cella tabella che contiene la griglia (niente padding extra) */
.market-gridcell{ padding:0; }

/* ===== Tile mercato: 2 righe con gap verticale ===== */
.cards-grid > .card.market-tile{
  display:grid;               /* override del display:block globale */
  grid-template-rows:auto auto;
  row-gap:10px;               /* spazio tra riga 1 e riga 2 */
}

/* Ogni riga ha 3 colonne: sinistra | centro (rigida per icona) | destra */
.market-row{
  --market-icon-w:36px;       /* larghezza fissa colonna centrale */
  display:grid;
  grid-template-columns:1fr var(--market-icon-w) 1fr;
  align-items:center;
  column-gap:10px;
}

/* allineamenti e wrapping */
.market-row .col-left,
.market-club-left{ min-width:0; text-align:left; }
.market-row .col-right,
.market-club-right{ min-width:0; text-align:right; }
.market-row .col-mid{ display:flex; align-items:center; justify-content:center; }

.market-player{
  display:block;
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
}

/* prezzo allineato a destra nella riga 1 */
.market-price{ justify-self:end; }

/* ===== Club spiati — layout moderno ===== */
.cards-grid[data-grid="spy"]{ grid-template-columns:1fr; } /* 1 col su mobile */

/* ─────────── 5.4 PILLS ─────────── */

.pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:25px; height:18px; padding:0 2px;
  border-radius:10px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; text-align:center;
}
.pill.plus{  background:rgba(35,195,120,.12); border:1px solid rgba(35,195,120,.35); }
.pill.minus{ background:rgba(235,80,80,.12);  border:1px solid rgba(235,80,80,.35); }
.card .pill.plus{  background:#1e8f4d; color:#fff; }
.card .pill.minus{ background:#b04141; color:#fff; }
.cell-end{ display:flex; justify-content:flex-end; align-items:center; width:100%; }

/* ─────────── 5.5 TABLE-HEADER-PILL ─────────── */

.table-header-pill{
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:8px; height:55px; padding:8px 10px; margin-bottom:12px;
  color:var(--c-accent); background:var(--c-surface-strong);
  border:1px solid var(--c-border); border-radius:12px; overflow:hidden;
}
.table-header-pill .title{
  min-width:0; overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:3; -webkit-box-orient:vertical; line-clamp:3;
  white-space:normal; line-height:1.1; font-weight:700; letter-spacing:.2px;
}
.table-header-pill .classradio{
  align-self:center; justify-self:end; display:grid; place-items:center;
  width:22px; height:22px; position:relative; margin:0;
}
.table-header-pill .classradio input{
  position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;
}
.table-header-pill .classradio .checkmark{
  position:absolute; inset:0; width:100%; height:100%; border-radius:50%; border:1px solid var(--c-border);
}
.table-header-pill .classradio .checkmark::after{
  content:""; position:absolute; top:50%; left:50%;
  transform:translate(-40%,-56%) rotate(45deg); transform-origin:center;
}

/* ─────────── 5.6 FM-CHIP (Chips & Filters) ─────────── */

.fm-board .fm-chip{
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 8px;
  border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.2px;
  border:1px solid var(--line); background:rgba(255,255,255,.04); text-decoration:none;
  color:var(--c-text-2);
}
.fm-board .fm-chip--info{ color:var(--text); }
.fm-board .fm-chip.is-disabled{ opacity:.45; pointer-events:none; }
.fm-board .fm-chip.is-on{ box-shadow:0 0 0 2px var(--ring) inset; }

.fm-board .fm-chip.role--por{ color:#d54051; }
.fm-board .fm-chip.role--dif{ color:#fcd67c; }
.fm-board .fm-chip.role--med{ color:#8bfa8b; }
.fm-board .fm-chip.role--cen{ color:#12af6c; }
.fm-board .fm-chip.role--tre{ color:#7be0ff; }
.fm-board .fm-chip.role--att{ color:#9481ff; }

.fm-board .fm-chip--idle{
  display:inline-flex; align-items:center; gap:6px; padding:2px 10px;
  border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.2px;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--idle);
}

/* Ignora eventuali regole globali su [data-active] */
.fm-board .fm-chip[data-active="true"]{
  background:inherit; border-color:var(--line); color:inherit;
  box-shadow:none;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. DASHBOARD & BOARDS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─────────── 7.1 FM-BOARD (Wrapper Principale) ─────────── */

.fm-board{
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:var(--radius-fm);
  padding:10px 6px 6px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  width:100%; max-width:749px; min-width:0;
  margin:10px auto;            /* NB: nel masonry viene overrideato sopra */
}

/* Header (con titolo ancorato a sinistra anche su wrap) */
.fm-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:8px; text-align:left;
}
.fm-head h2{
  font-size:14px; font-weight:800; letter-spacing:.2px; margin:0; line-height:1.2;
  border-left:6px solid var(--accent); padding-left:10px;
  text-align:left !important; flex:1 1 auto; min-width:0; overflow-wrap:anywhere;
}
.fm-head__chips{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fm-head__actions{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }

/* chip/badge — proprietà comuni accorpate */
.chip,
.chip-static{
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px;
  border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.2px;
  border:1px solid var(--line); background:rgba(255,255,255,.04); text-decoration:none;
}
.chip-static{ color:var(--text); }
.chip--mode{ color:#101820; background:linear-gradient(90deg,var(--accent),#ffd563); border-color:transparent; }
.chip--info{ color:var(--text); }
.chip--ok{ color:#0b3; background:rgba(46,204,113,.15); border-color:rgba(46,204,113,.35); }
.chip--warn{ color:#c87400; background:rgba(245,165,36,.16); border-color:rgba(245,165,36,.35); }
.chip--idle{ color:var(--idle); }

/* bottoni icona */
.btn-icon{
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.04);
  text-decoration:none; transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .05s ease;
  color:var(--c-accent);
}
.btn-icon .i, .btn-icon svg{
  width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2;
}
.btn-icon:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); box-shadow:0 0 0 3px var(--ring); }
.btn-icon:active{ transform:translateY(1px); }

/* ─────────── 6.2 CW-TABLE (Classifiche & Mercato) ─────────── */

.fm-board .cw-root{ background:transparent; border:0; }

.fm-board .cw-table .col-form{ display:none; }

/* Centra i nomi nelle classifiche */
.fm-board .cw-table.cw-skin--me-dot td.col-name{
  text-align:center;
}

/* duplicate removed: consolidated above */
.fm-board .cw-table.cw-skin--me-dot .cw-row.is-me td.col-name{
  display:flex; align-items:center; justify-content:center; gap:8px; padding-left:0;
}
/* duplicate removed: consolidated above */
.fm-board .cw-table.cw-skin--me-dot .cw-row.is-me td.col-name::before{
  content:""; flex:0 0 10px; width:10px; height:10px; border-radius:50%;
  background:var(--c-accent-2);
  box-shadow:0 0 0 1px rgba(255,201,50,.25), 0 0 10px rgba(255,201,50,.22);
  animation:mePulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  /* duplicate removed */
  .fm-board .cw-table.cw-skin--me-dot .cw-row.is-me td.col-name::before{ animation:none; }
}

/* Variante centrata: mantiene il DOT di is-me ma centra DOT + nome */
.fm-board .cw-table.cw-skin--me-dot .cw-row.is-me.is-me--center td.col-name{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding-left:0;
  text-align:center;
}
/* Also supports layout without legacy wrapper */
.fm-board .cw-table.cw-skin--me-dot .cw-row.is-me.is-me--center td.col-name{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding-left:0;
  text-align:center;
}


@keyframes mePulse{ 0%,100%{ transform:scale(1); opacity:.95; } 50%{ transform:scale(1.15); opacity:1; } }

/* mercato utility */

/* Icone inline */
.ml-ico-wrap{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; }
.ml-ico{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; color:var(--c-accent-2); opacity:.95; }

/* ─────────── 6.3 SHOW MORE / EXPAND ─────────── */

.cw-showmore-row td{ padding:6px 0; line-height:1; border:0; }
.cw-showmore-cell{ background:transparent; border-top:1px solid var(--c-border-soft-2); }

.btn-expand.icon-only{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px; border:0; border-radius:999px;
  background:transparent; cursor:pointer;
}
.btn-expand.icon-only svg{
  width:18px; height:18px; color:#fff; fill:currentColor;
  transition:transform .25s ease; pointer-events:none;
}
.btn-expand[aria-expanded="true"] svg{ transform:rotate(180deg); }
.btn-expand.icon-only:hover{ background:rgba(255,255,255,.06); }

/* label “visually hidden” per accessibilità */
.btn-expand .label{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =========================
   WRAP ESPANDIBILE
   ========================= */
.cw-wrap{ position:relative; width:100%; overflow:hidden; overflow-anchor:none; }
.cw-wrap, .cw-wrap.anim{ transition:none; }
.cw-wrap .extra{ display:none; }
.cw-wrap.is-expanded .extra{ display:table-row; }

.cw-spacer{ height:0; pointer-events:none; }
body.no-anchor{ overflow-anchor:none; }

/* ─────────── 6.4 CLASSIFICA COLONNE ─────────── */
@media (max-width:420px){
  .fm-board .cw-table .col-pos{ width:48px; }
  .fm-board .cw-table .col-pts{ width:64px; }
  .fm-board .cw-table .col-age{ width:35px; }
}

/* ===== Colonne fluide ===== */
.fm-board .cw-table.cw--fluid{ table-layout:auto; } /* lascia calcolo naturale */

.fm-board .cw-table.cw--fluid .col-pos{
  width:5%; white-space:nowrap;               /* stretta, no a capo */
}
.fm-board .cw-table.cw--fluid .col-pts{
  width:5%; white-space:nowrap;               /* numeri compatti */
}
.fm-board .cw-table.cw--fluid .col-name{
  width:auto; min-width:0;                    /* assorbe spazio residuo */
}
/* ellissi/2 righe coerente col resto */
.fm-board .cw-table.cw--fluid .ml-name a{
  display:-webkit-box;
  -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden; white-space:normal;
  word-break:break-word; text-overflow:ellipsis;
}

/* Classi per colorazione posizioni nelle classifiche */
.col-pos.pos--y {
    color: #ffc932 !important; /* Giallo per prime posizioni */
}

.col-pos.pos--r {
    color: #d54051 !important; /* Rosso per ultime posizioni */
}

.col-pos.pos--n {
    color: inherit; /* Colore neutro (default) */
}

/* ─────────── 8.2 TOURNAMENT - KO PHASE ─────────── */

.cw-phase-title{
  padding:8px 6px 12px;
  font-size: 12px;
  text-align:center; text-transform:uppercase;
  font-weight:800; letter-spacing:.3px;
  color:var(--c-accent-2);
  border-bottom:1px solid var(--c-accent-2);
}
.cw-matches{ padding:6px 2px 2px; }

/* Riga partita: home | score | away */
.cw-match{
  position:relative;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:4px;
  padding:12px 4px;
}
.cw-match + .cw-match{ border-top:1px solid var(--c-border-soft-2); }

/* Rail laterali (coerenti con classifica) */
.cw-match.has-home::before,
.cw-match.has-away::after{
  content:""; position:absolute; top:var(--cw-pad-y,6px); bottom:var(--cw-pad-y,6px);
  width:var(--rail-w,4px); border-radius:var(--rail-radius,3px);
  background:var(--ok,#2ecc71);
  box-shadow:0 0 0 1px rgba(46,204,113,.25), 0 0 10px rgba(46,204,113,.25);
  opacity:.95; pointer-events:none;
}
.cw-match.has-home::before{ left:0; }
.cw-match.has-away::after{  right:0; }

/* Celle squadra */
.team-cell{
  position:relative; display:flex; align-items:center; gap:8px; min-width:0;
  color:var(--c-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.team--home{ justify-content:flex-start; padding-left:6px; }
.team--away{ justify-content:flex-end;   padding-right:6px; }
.team-cell a{ color:inherit; text-decoration:none; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.team-cell a:hover{ color:#fff; }

/* =========================
   PILL PUNTEGGIO
   ========================= */
:root{ --score-min:64px; --score-pad:22px; } /* min-larghezza + padding per “R” */
.score-cell{ display:flex; align-items:center; justify-content:center; }

.pill--score{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--score-min); padding:2px var(--score-pad);
  border:1px solid var(--c-border-2); border-radius:999px;
  background:rgba(255,255,255,.08); color:var(--c-text-2);
  font-weight:800; font-size:11px; line-height:1;
}
.pill--score .s{
  display:inline-block;
  min-width:calc(var(--score-min) - var(--score-pad)*2); /* centro stabile */
  text-align:center; font-variant-numeric:tabular-nums;
}
.pill--score .r{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:11px; font-weight:800; line-height:1; opacity:.95;
}
.pill--score.score--rig-left  .r{ left:8px; }
.pill--score.score--rig-right .r{ right:8px; }

/* Responsive: Mobile Fine-tuning */
@media (max-width:420px){
  :root{ --score-min:58px; --score-pad:20px; }
  .cw-match{ gap:4px; }
}

/* ─────────── 7.2 FM-TILES ─────────── */

.fm-tiles{
  display:grid; grid-template-columns:1fr; gap:8px 14px; /* mobile: 1 colonna */
}

/* reset dei definition list dentro le tile */
.fm-tiles dl, .fm-tiles dt, .fm-tiles dd,
.fm-tile dt, .fm-tile dd{ margin:0; padding:0; }

.fm-tiles > .fm-tile,
.fm-tiles > a.fm-tile{
  display:grid; grid-template-columns:28px 1fr; gap:8px; align-items:center;
  min-width:0; padding:10px 12px;
  border:1px solid var(--line);
  border-radius:calc(var(--radius) - 4px);
  background:rgba(255,255,255,.018);
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .05s ease;
}
.fm-tiles > .fm-tile.single,
.fm-tiles > a.fm-tile.single{ grid-template-columns:1fr !important; } /* override griglia icona */

.fm-tile:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 0 0 3px var(--ring);
}
.fm-tile:active{ transform:translateY(1px); }

.fm-tile--link{ text-decoration:none; color:inherit; cursor:pointer; }
a.fm-tile--link:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--ring);
  border-radius:calc(var(--radius) - 4px);
}

.fm-tile__key{
  width:28px; display:flex; align-self:center; align-items:center; justify-content:center; color:var(--muted);
}
.fm-tile__key .i{
  display:block; width:24px; height:24px; opacity:.95;
  stroke:currentColor; fill:none; stroke-width:2; color:var(--accent);
}
.fm-tile__val{
  display:flex; align-items:center; justify-content:flex-start; gap:8px; flex-wrap:wrap;
  min-width:0; font-variant-numeric:tabular-nums slashed-zero;
}

/* stretched link: tutta la tile cliccabile senza interferire coi contenuti */
.fm-tile{ position:relative; }
.fm-tile .stretched-link{ position:absolute; inset:0; z-index:1; }
.fm-tile__key, .fm-tile__val{ position:relative; z-index:2; pointer-events:none; }
/* ma i link interni restano cliccabili */
.fm-tile__val a, .fm-tile__key a{ pointer-events:auto; position:relative; z-index:3; }

.fm-v-main{
  display:inline-flex; gap:8px; flex-wrap:wrap; align-items:baseline;
  font-size:13px; font-weight:800;
}
.fm-v-sub{ font-size:12px; color:var(--muted); }

.fm-tile--full{ grid-template-columns:1fr; } /* tile senza colonna icona */
.u-center{ justify-self:center; text-align:center; } /* centratura orizzontale */

/* ─────────── Effetto VIP Point aggiunto ─────────── */
.fm-tile.vip-point-added{
  position:relative;
  overflow:visible;
  animation:vip-glow-pulse 5s ease-in-out forwards;
}

/* Effetto di pulsazione per 3 secondi, poi scompare */
@keyframes vip-glow-pulse{
  0%{
    box-shadow:0 0 8px rgba(255, 201, 50, 0.6),
               0 0 15px rgba(255, 201, 50, 0.4),
               0 0 20px rgba(255, 201, 50, 0.3);
  }
  25%{
    box-shadow:0 0 20px rgba(255, 201, 50, 0.9),
               0 0 30px rgba(255, 201, 50, 0.6),
               0 0 40px rgba(255, 201, 50, 0.4);
  }
  50%{
    box-shadow:0 0 8px rgba(255, 201, 50, 0.6),
               0 0 15px rgba(255, 201, 50, 0.4),
               0 0 20px rgba(255, 201, 50, 0.3);
  }
  75%{
    box-shadow:0 0 20px rgba(255, 201, 50, 0.9),
               0 0 30px rgba(255, 201, 50, 0.6),
               0 0 40px rgba(255, 201, 50, 0.4);
  }
  100%{
    box-shadow:0 0 0 rgba(255, 201, 50, 0);
  }
}

/* Assicura che il contenuto sia sopra il bordo animato */
.fm-tile.vip-point-added .fm-tile__key,
.fm-tile.vip-point-added .fm-tile__val{
  position:relative;
  z-index:1;
}

/* ─────────── 7.3 FM-HERO (Hero Club) ─────────── */

.fm-hero .fm-id{ margin-left:6px; font-size:12px; font-weight:600; color:var(--muted); }

/* header icone/chip */
.fm-head__chips .btn-icon{ color:var(--c-accent); }

/* layout: una sola colonna (no side) - Layout ora gestito dalle regole sotto */
.fm-hero__side{ display:none !important; }

/* media: due card affiancate, centrate - Layout ora gestito dalle regole sotto */

/* media card */
.media-card{
  display:grid; grid-template-rows:auto 1fr;
  border:1px solid var(--line);
  border-radius:calc(var(--radius) - 4px);
  background:rgba(255,255,255,.018);
  overflow:hidden;
  transition:box-shadow .2s ease, transform .05s ease, border-color .2s ease, background .2s ease;
  width:auto; max-width:200px;
}
.media-card:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 0 0 3px var(--ring);
}
.media-card:active{ transform:translateY(1px); }

.media-card__label{
  font-size:11px; letter-spacing:.2px; font-weight:800;
  color:var(--c-accent);
  background:var(--c-surface-strong);
  border-bottom:1px solid var(--c-border);
  padding:6px 10px;
  text-transform:uppercase;
}
.media-card__body{
  padding:2px;
  display:flex; align-items:center; justify-content:center;
}

/* immagini */
.img-fluid{
  display:block; width:auto; max-width:100%; height:auto; margin:0 auto;
}
/* valgono come prima */
.logo-frame{ width:calc(70% * var(--frame-scale,1)); max-width:200px; aspect-ratio:1/1; object-fit:contain; }
.kit-frame { width:calc(70% * var(--frame-scale,1)); max-width:100px; max-height:90%; aspect-ratio:3/4; object-fit:contain; }

/* badge vip compatto */
.fm-badge-vip{ height:22px; padding:0 8px; font-size:11px; display:inline-flex; align-items:center; }

/* ─────────── 7.3.1 FM-HERO (Layout 2 colonne: logo+kit, tile) ─────────── */
/* Layout con 2 colonne: logo+kit insieme, tile */
.fm-hero__grid{
  display:grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 12px;
  align-items: center;
}

/* Media: logo e kit in colonna verticale */
.fm-hero__media{
  display:flex !important;
  flex-direction:column !important;
  gap:14px;
  align-items:center;
  justify-content:flex-start;
}

/* Tile: colonna verticale centrata */
.fm-hero__tiles{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  min-width:0;
  min-height:100%;
}

/* Wrapper per le tile: centra verticalmente */
.fm-hero__tiles-wrapper{
  display:flex;
  flex-direction:column;
  gap:8px;
  justify-content:center;
  align-self:center;
  width:100%;
}

/* Riga per Young Point e VIP Point */
.fm-hero__tiles-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
}

/* Tile: dimensioni compatte */
.fm-hero__tiles .fm-tile{
  min-width:0;
  width:100%;
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 8px;
  border:1px solid var(--line);
  border-radius:calc(var(--radius) - 4px);
  background:rgba(255,255,255,.018);
  transition:background .2s ease, border-color .2s ease;
}

.fm-hero__tiles .fm-tile:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.12);
}

.fm-hero__tiles .fm-tile__val{
  flex-wrap:nowrap;
  gap:6px;
  min-width:0;
  overflow:hidden;
  text-align:left;
  justify-content:flex-start;
}

/* Assicura allineamento a sinistra anche quando il testo va a capo */
.fm-hero__tiles .fm-tile__val,
.fm-hero__tiles .fm-v-main,
.fm-hero__tiles .fm-v-sub{
  text-align:left;
  text-align-last:left;
}

.fm-hero__tiles .fm-v-main{
  font-size:11px;
  font-weight:700;
}

.fm-hero__tiles .fm-v-sub{
  font-size:11px;
}

/* Chip formazione: stile compatto */
.fm-hero__tiles .chip-static.chip--ok,
.fm-hero__tiles .chip-static.chip--warn{
  padding:0 6px;
  font-size:9px;
}

/* Icone SVG più piccole nelle tile */
.fm-hero__tiles .fm-tile__key{
  flex-shrink:0;
  width:20px;
}

.fm-hero__tiles .fm-tile__key .i{
  width:18px;
  height:18px;
}

/* Media card: dimensioni uniformi e proporzionate */
.fm-hero__media .media-card{
  width:auto;
  max-width:110px;
  margin:0 auto;
}

/* Logo e Kit dimensioni proporzionate */
.fm-hero__media .logo-frame{
  width:calc(55% * var(--frame-scale,1)) !important;
  max-width:70px !important;
}

.fm-hero__media .kit-frame{
  
  max-width:70px !important;
  max-height:none !important;
}

/* Label più piccole */
.fm-hero__media .media-card__label{
  padding:3px 6px;
  min-width: 110px;
}

/* Body della card più compatto */
.fm-hero__media .media-card__body{
  padding:4px;
  min-height:60px;
}

/* Allineamento verticale delle colonne */
.fm-hero__grid > .fm-hero__media{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.fm-hero__grid > .fm-hero__tiles{
  display:flex;
  flex-direction:column;
}

/* Riga Young/VIP: tile più compatte */
.fm-hero__tiles-row .fm-tile{
  padding:5px 8px;
  gap:5px;
}

.fm-hero__tiles-row .fm-tile__key{
  width:18px;
}

.fm-hero__tiles-row .fm-tile__key .i{
  width:16px;
  height:16px;
}

.fm-hero__tiles-row .fm-tile__val{
  font-size:12px;
}

.fm-hero__tiles-row .fm-v-main{
  font-size:12px;
  font-weight:700;
}

/* ─────────── Responsive: ingrandimento proporzionale ─────────── */
/* Tablet (≥600px) */
@media (min-width:600px){
  .fm-hero__media .logo-frame{
    width:calc(80% * var(--frame-scale,1)) !important;
    max-width:90px !important;
  }
  .fm-hero__media .kit-frame{
    width:calc(65% * var(--frame-scale,1)) !important;
    max-width:90px !important;
  }
  .fm-hero__media .media-card__body{
    min-height:90px;
  }
  .fm-hero__tiles-wrapper{
    gap:14px;
  }
  .fm-hero__tiles .fm-tile{
    padding:10px 12px;
    min-height:50px;
  }
  .fm-hero__tiles .chip-static.chip--ok,
  .fm-hero__tiles .chip-static.chip--warn{
    font-size:11px;
  }
  .fm-hero__tiles .fm-tile__key{
    width:24px;
  }
  .fm-hero__tiles .fm-tile__key .i{
    width:22px;
    height:22px;
  }
  .fm-hero__tiles .fm-v-main{
    font-size:13px;
  }
  .fm-hero__tiles .fm-v-sub{
    font-size:12px;
  }
}

/* Desktop (≥1024px) → spostato in tablet.main.css */

/* Desktop Large (≥1280px) → spostato in desktop.main.css */

/* ─────────── 7.4 FM-TUTOR (Tutorial) ─────────── */

.fm-tutor .fm-head{ margin-bottom:10px; }

.fm-tutor__body{
  min-width:0;
  display:grid;
  gap:12px;
  grid-template-columns:100px 1fr;           /* mobile: stack */
  align-items:center;
}

/* immagine tutorial coerente con il tema */
.fm-tutor__media{
  display:flex; align-items:center; justify-content:center;
  padding:6px;
  border:1px solid var(--c-border-soft);
  border-radius:calc(var(--radius) - 6px);
  background:rgba(255,255,255,.02);
}
.fm-tutor__media .img-fluid{ display:block; width:auto; max-width:100%; height:auto; }

/* testo */
.fm-tutor__text{
  font-size:14px;
  line-height:1.45;
  color:var(--c-text);
}

/* link dentro al testo tutorial (sostituisce “verde_tutorial”) */
.fm-tutor__text a{
  color:var(--c-accent);
  font-weight:800;
  text-decoration:none;
  border-bottom:1px dashed rgba(255,201,50,.35);
}
.fm-tutor__text a:hover{
  border-bottom-style:solid;
  box-shadow:0 2px 0 0 rgba(255,201,50,.15);
}

/* reveal-child animabile come il resto */
.fm-tutor .reveal-child{ opacity:0; transform:translateY(12px) scale(.99); transition:opacity .4s, transform .4s; }
.fm-tutor .reveal-child.in-view{ opacity:1; transform:none; }

/* ─────────── 8.3 AUCTION (Aste Player) ─────────── */

.au-board .au-list{ display:flex; flex-direction:column; gap:10px; margin:2px; }
.au-board .au-item{
  border:1px solid var(--c-border-2);
  background:var(--c-surface-strong-2);
  border-radius:12px;
  padding:12px 12px 10px;
  transition:box-shadow .2s ease, border-color .2s ease;
  cursor:pointer;
}
.au-board .au-item:hover{ border-color:rgba(255,255,255,.16); box-shadow:0 0 0 3px var(--ring); }
.au-board .au-item.is-open{ box-shadow:0 0 0 3px var(--ring); }

.au-board .au-head{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px; margin-bottom:6px; }
.au-board .au-role-top{ font-weight:800; text-align:left; }
.au-board .au-role-top .rp-role{ font-weight:800; }
.au-board .au-badge{
  display:inline-flex; align-items:center; height:20px; padding:0 8px;
  border-radius:999px; font-size:11px; font-weight:800;
  border:1px solid var(--c-border-2); white-space:nowrap;
}
.au-board .au-badge.live{ color:#0b3; background:rgba(46,204,113,.15); border-color:rgba(46,204,113,.35); }
.au-board .au-badge.end { color:#9aa6bb; background:rgba(136,146,166,.12); border-color:rgba(136,146,166,.30); }

.au-board .au-top{ display:grid; grid-template-columns:1fr 1fr; align-items:center; column-gap:2px; row-gap:4px; padding:2px 0; }
.au-board .au-name{ min-width:0; text-align:left; }
.au-board .au-name a{ display:inline; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.au-board .au-price{ justify-self:end; font-weight:800; white-space:nowrap; }

.au-board .au-bottom{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px; margin-top:8px; }
.au-board .au-club{ min-width:0; text-align:left; }
.au-board .au-club a{ display:inline; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.au-board .au-right{ display:flex; justify-content:flex-end; align-items:center; gap:6px; white-space:nowrap; }
.au-board .au-time{ opacity:.95; font-weight:700; }

.au-board .au-expand-wrap{ overflow:hidden; max-height:0; transition:max-height .35s ease; }
.au-board .au-item.is-open .au-expand-wrap{ max-height:640px; }
.au-board .au-expand{ padding-top:10px; border-top:1px solid var(--c-border-soft-2); margin-top:10px; }

.au-board .au-form{ display:grid; gap:12px; }

.au-board .au-countrow{
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  padding:6px 0; font-weight:800;
}
.au-board .au-countrow .label{ justify-self:start; text-align:left; opacity:.9; }
.au-board .au-countrow .au-count{
  justify-self:end; padding:4px 10px; border:1px solid var(--c-border-2); border-radius:8px; background:rgba(255,255,255,.04);
}

.au-board .au-form .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end; }
.au-board .au-form .field{ display:grid; gap:6px; }
.au-board .au-form .field select.whis_select_mini,
.au-board .au-form .field input.black_h{ 
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  display:block !important;
  box-sizing:border-box !important;
}
.au-board .au-form label{ font-size:11px; font-weight:800; color:var(--c-text-2); opacity:.9; }

/* Checkbox custom */
.au-board .au-check{
  display:inline-flex; align-items:center; gap:10px;
  height:30px; padding:0 10px; border:1px dashed var(--c-border-soft-2);
  border-radius:8px; background:rgba(255,255,255,.02);
  width:100%;
}
.au-board .au-check input{ position:absolute; opacity:0; width:0; height:0; }
.au-board .au-check__box{
  width:18px; height:18px; border-radius:4px; border:1px solid var(--c-border-2); background:#0f1720;
  display:inline-block; position:relative; flex:0 0 auto;
}
.au-board .au-check input:checked + .au-check__box::after{
  content:""; position:absolute; left:5px; top:1px; width:6px; height:10px;
  border:2px solid #FFC932; border-top:none; border-left:none; transform:rotate(45deg);
}
.au-board .au-check__label{ font-size:12px; font-weight:800; opacity:.95; }

.au-board .au-actions{ display:flex; justify-content:center; }
.au-board .au-actions .btn{
  display:inline-block; padding:9px 14px; border-radius:10px; font-weight:800;
  background:linear-gradient(180deg,#FFD76A,#FFB100); color:#1a1a1a; border:0; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
@media (hover:hover) and (pointer:fine){
  .au-board .au-actions .btn:hover{ transform:translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,.28); }
}

.au-board .au-ended-msg,
.au-ended-msg{ text-align:center; opacity:.85; padding:8px 2px; }

@media (max-width:343px){
  .au-board .au-form .row-2{ grid-template-columns:1fr; }
  .match-two-cols{ grid-template-columns:1fr; }
}

.au-alert{
  margin-top:8px; padding:8px 10px; border-radius:8px; font-size:12px; font-weight:700;
}
.au-alert--error{
  background:rgba(235,80,80,.12);
  border:1px solid rgba(235,80,80,.45);
  color:#ff9b9b;
}

.au-pager{
  display:flex; justify-content:center; align-items:center; gap:6px; margin-top:10px;
}
.au-chip{
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px;
  border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.2px;
  border:1px solid var(--c-border-2); background:rgba(255,255,255,.04); text-decoration:none; color:var(--c-text-2);
}
.au-chip.is-disabled{ opacity:.45; pointer-events:none; }
.au-page-label{ color:var(--c-accent); border-color:var(--c-border-2); }

/* ─────────── 8.4 MATCH PAGE & SPIED CLUBS ─────────── */

/* Board & Header */
.fm-board.fm-wide{ max-width:1279px; margin:0 auto; }
.fm-head h2{ margin:0; }

/* Layout base (1 col) */
.match-layout{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
  align-items:start;
}

/* Riga tri-colonna unificata (sx / centro / dx) */
:root{ --tri-mid-w:70px; } /* larghezza colonna centrale fissa */
.tri-row{
  display:grid;
  align-items:center;
  grid-template-columns:1fr var(--tri-mid-w) 1fr;
  text-align:center;
  font-weight:800;
}
.tri-left, .tri-mid, .tri-right{ min-width:0; }
.tri-left, .tri-right{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Nomi squadra • Score • Nomi squadra */
.match-teamsbar{ margin:8px 0 6px; font-size:12px; }
.match-scorebar{ display:flex; justify-content:center; align-items:center; flex-direction:column; gap:2px; }
.pill--score{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:64px; padding:2px 16px; border-radius:999px; font-weight:800;
  background:rgba(255,255,255,.08); color:var(--c-text-2);
  border:1px solid var(--c-border-2);
}
.pill--score .s{ font-variant-numeric:tabular-nums; }

/* Halftime score sotto il risultato finale */
.match-scorebar__ht{
  font-size:11px; font-weight:600; color:var(--c-text-3); opacity:.75;
}

/* Manager (modulo) */
.manager-bar{ margin:4px 0 10px; font-weight:700; font-size:12px; }

/* Loghi / Kit per lato */
.match-two-cols{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
.match-two-cols .field select.whis_select_mini,
.match-two-cols .field input.black_h{ 
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  display:block !important;
  box-sizing:border-box !important;
}
.team-panel{ border:1px solid var(--c-border); border-radius:12px; padding:4px; }
.team-logos{
  display:grid; grid-template-columns:repeat(2, auto); gap:8px;
  align-items:center; justify-content:center;
}
.logo-frame{ width:60px; aspect-ratio:1/1; object-fit:contain; }
.kit-frame { width:50px; aspect-ratio:3/4; object-fit:contain; }

/* Tattiche (tri-row per riga) */
.tactics-block{ display:grid; gap:0; font-size:12px; margin:8px 0 8px; }
.tactics-row{ border-bottom:1px solid var(--c-border-soft); }
.tactics-row .tri-left,
.tactics-row .tri-right{ font-weight:800; font-variant-numeric:tabular-nums; }
.tactics-row .tri-mid{ font-weight:800; color:var(--c-accent); opacity:.95; padding:4px; }
.tactics-row .tri-left, .tactics-row .tri-right{ padding:4px; }

/* ─────────── 6.5 LINEUPS (Formazioni Match) ─────────── */

/* Lineups: griglia + card leggere */
.lineups-grid{ display:grid; gap:6px; grid-template-columns:1fr 1fr; }
.lineup-card{
  border:1px solid var(--c-border); border-radius:12px; padding:4px 2px;
  background:var(--c-surface-strong);
}

/* Tabelle lineup (classi dedicate) */
.cw-table.cw-lineup{
  width:100%; table-layout:fixed; border-collapse:collapse; font-size:10px;
}
.cw-table.cw-lineup thead td{
  color:var(--c-accent-2); font-weight:800;
  height:34px; padding:1px; border-bottom:1px solid var(--c-border-2);
}
.cw-table.cw-lineup tbody td{
  padding:2px 1px; border-bottom:1px solid var(--c-border-soft-2);
  background:transparent; vertical-align:middle;
}
/* Altezza fissa riga lineup */
.cw-table.cw-lineup tbody tr.lu-row td{ height:30px; }
/* Rail sinistro colore ruolo */
.cw-table.cw-lineup .lu-name{ min-width:0 !important; position:relative; padding-left:6px; }
.cw-table.cw-lineup .lu-rail{
  position:absolute; left:0; top:2px; bottom:2px; width:2px;
  border-radius:3px; opacity:.95;
}
.cw-table.cw-lineup .lu-name a{
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; white-space:normal; text-overflow:ellipsis;
  color:var(--c-text-2); text-decoration:none;
}
/* Nomi giocatori senza link (diretta match) */
.cw-table.cw-lineup .lu-player-name{
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; white-space:normal; text-overflow:ellipsis;
  color:var(--c-text-2);
}
.cw-table.cw-lineup .lu-vt{ width:26px !important; min-width:26px !important; text-align:center !important; }
.cw-table.cw-lineup .lu-gl{ width:26px !important; min-width:26px !important; text-align:center !important; }
.cw-table.cw-lineup .lu-ds{ width:22px !important; min-width:22px !important; text-align:center !important; }
.cw-table.cw-lineup .lu-st{ width:22px !important; min-width:22px !important; text-align:center !important; }
/* Grafico + infobar */
.chart-card{
  border:1px solid var(--c-border); border-radius:12px; padding:10px;
  background:var(--c-surface-strong); text-align:center;
}
.chart-card img{ max-width:100%; height:auto; display:block; margin:4px auto 0; }
.match-infobar{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:8px; gap:10px;
}
.inf-left, .inf-right, .inf-block{ display:inline-flex; align-items:center; gap:8px; font-weight:800; }
.inf-ico{ width:18px; height:18px; display:inline-block; }
.wx-ico { width:18px; height:18px; display:inline-block; object-fit:contain; }


.mt-gap{ margin-top:10px; }

/* ─────────── 8.8 TIMELINE (Cronaca Partita) ─────────── */

/* Timeline (cronaca) */
.tl-table{ width:100%; table-layout:fixed; border-collapse:collapse; font-size:12px; }
.tl-row td{ vertical-align:top; border-bottom:1px solid var(--c-border-soft-2); }
.tl-min { width:40px; text-align:center; font-weight:800; padding:6px 4px; }
.tl-min b.yellow,
.tl-min .yellow{ color:var(--c-accent); }
.tl-text{ text-align:left; padding:6px 6px; }
.tl-line{ display:flex; gap:8px; align-items:flex-start; justify-content:flex-start; }
.tl-ico { width:20px; height:20px; object-fit:contain; }
.tl-main{ display:block; white-space:normal; overflow-wrap:anywhere; }

/* Chip Switcher (observed clubs) */
.chips-switch{
  display:flex; justify-content:center; align-items:center;
  gap:6px; flex-wrap:wrap; margin:8px 0;
}
.chips-switch .fm-chip{
  max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Tile osservatori (chip centrate) */
.fm-tiles > .fm-tile.obs-tile{
  grid-template-columns:1fr !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  background:var(--c-surface-strong);
}
.obs-tile .chips-switch{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:6px; width:100%; margin:2px 0 2px;
}
.obs-tile .fm-chip{
  height:24px; padding:0 10px; border-radius:999px;
  font-size:11px; font-weight:800;
}

/* Responsive: Mobile Small */
@media (max-width:400px){
  .cw-table.cw-lineup{ font-size:9px; }
  .cw-table.cw-lineup .lu-vt{ width:22px !important; }
  .cw-table.cw-lineup .lu-gl{ width:18px !important; }
  .cw-table.cw-lineup .lu-ds{ width:18px !important; }
  .cw-table.cw-lineup .lu-st{ width:18px !important; }
  .tactics-block{ font-size:10px; }
  .manager-bar{ font-size:10px; }
  .match-teamsbar{ font-size:10px; }
  .lineups-grid{ gap:2px; }
  .tl-table{ font-size:11px; }
}
@media (max-width:420px){
  .obs-tile .chips-switch{ gap:8px; }
}

/* roster: fix duplicati rimosso, già coperto dal blocco principale NEW SKIN */

/* puntino rosso per chip pending */
.chip-dot.chip-dot--pending{
  display:inline-block;
  width:6px; height:6px;
  border-radius:999px;
  background:#f44336;   /* rosso */
  margin-left:6px;
  vertical-align:middle;
}



/* ─────────── 8.5 OBSERVER REPORT ─────────── */

/* Opinione osservatore */
.obs-opinion{
  display:grid;
  gap:8px;
  border:1px solid var(--c-border-2);
  background:var(--c-surface-strong-2);
  border-radius:12px;
  padding:10px;
  margin-bottom:10px;
}
.obs-opinion__who{
  font-weight:800;
  color:var(--c-accent);
  letter-spacing:.2px;
  font-size:11px;
}
.obs-opinion__text{
  color:var(--c-text-2);
  line-height:1.35;
  font-size:13px;
}

/* Griglia dati (2 → 4 colonne) */
.obs-grid{
  display:grid;
  gap:8px;
  grid-template-columns:repeat(2, minmax(0,1fr));
  margin-bottom:12px;
}
.obs-grid-2{
  display:grid;
  gap:8px;
  grid-template-columns:repeat(2, minmax(0,1fr));
  margin-bottom:12px;
}
.obs-cell{
  border:1px solid var(--c-border-2);
  background:rgba(255,255,255,.03);
  border-radius:12px;
  padding:10px;
  min-width:0;
}
.obs-cell.obs-span-2{ grid-column:span 2; }
.obs-label{
  font-size:10px; /* label 10px */
  font-weight:800;
  letter-spacing:.2px;
  color:var(--c-text-2);
  opacity:.9;
  margin-bottom:4px;
}
.obs-value{
  font-size:14px;
  font-weight:800;
  color:var(--c-text-2);
  word-break:break-word;
}
.obs-value .fm-chip--idle{
  color:var(--idle);
  border:1px solid var(--c-border-2);
  background:rgba(255,255,255,.04);
  padding:2px 8px;
  border-radius:999px;
}
.obs-grid .flag{
  width:18px; height:12px; object-fit:cover; border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.35);
}

/* ─────────── 8.6 SKILLS MATRIX ─────────── */

.fm-board .skills-matrix{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:6px;
  align-items:start;
  margin:6px 0 6px;
}

/* Average skill (righe sopra/sotto) */
.fm-board .skills-avg{
  grid-column:1 / -1;
  display:flex; justify-content:center; align-items:center; gap:6px;
  padding:6px;
  border:1px solid var(--c-border);
  border-radius:12px;
  background:var(--c-surface-strong);
}
.fm-board .skills-avg .avg-label{
  font-weight:800; font-size:11px; color:var(--c-accent); letter-spacing:.2px;
}
.fm-board .skills-avg .avg-value{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:20px; padding:2px 8px;
  border:1px solid var(--c-border); border-radius:999px;
  background:rgba(255,255,255,.05);
  font-weight:800; font-size:11px; font-variant-numeric:tabular-nums;
}

/* Intestazioni colonne */
.fm-board .skills-matrix .skills-colhead{
  text-align:center; font-weight:800; font-size:10px;
  color:var(--c-accent); background:var(--c-surface-strong);
  border:1px solid var(--c-border); border-radius:10px; padding:6px; letter-spacing:.2px;
}
/* Tile skill (SOLO dentro la matrice) */
.fm-board .skills-matrix .skill-tile{
  display:flex; align-items:center; justify-content:space-between;
  gap:2px; min-height:30px; padding:4px;
  border:1px solid var(--c-border); border-radius:10px;
  background:rgba(255,255,255,.02);
  transition:border-color .12s ease, box-shadow .12s ease, transform .04s ease;
}
.fm-board .skills-matrix .skill-tile:hover{
  border-color:rgba(255,255,255,.20); box-shadow:0 0 0 2px var(--ring); transform:translateY(-1px);
}
.fm-board .skills-matrix .skill-empty{ min-height:0; padding:0; border:0; background:transparent; }

.fm-board .skills-matrix .st-label{
  font-size:10px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fm-board .skills-matrix .st-value{
  font-size:11px; font-weight:800; font-variant-numeric:tabular-nums;
}

/* Evidenziazione "key" (solo matrice) */
.fm-board .skills-matrix .skill-tile.is-key .st-label{ color:#ffd24d; }

/* Header sezione (riusa .table-header-pill) */
.table-header-pill .title{ font-weight:800; }

/* utilità extra */
.fm-chip--idle{
  display:inline-flex;
  align-items:center;
  height:20px;
  padding:0 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  border:1px solid var(--c-border);
  color:#8892a6;
  background:rgba(255,255,255,.04);
}

/* Responsive: Mobile XSmall */
@media (max-width:380px){
  .st-label{ font-size:9.5px; }
  .st-value{ font-size:10.5px; }
}

/* ─────────── 8.7 COMPETIZIONI ROOT ─────────── */

/* Griglia 1 → 2 → 3 colonne; su tablet Divisioni prende tutta la riga */
#competizioni-root .steps-grid{
  display:grid;
  gap:0 12px;
  grid-template-columns:1fr;
  min-width:324px;              /* mobile */
}

/* Tile riepilogo: allineamento testo + bottone perfetto */
#competizioni-root .sum-tiles{ display:block; }
#competizioni-root .sum-tile{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; gap:10px;
}
#competizioni-root .sum-tile .fm-tile__val{ display:flex; align-items:center; }
#competizioni-root .sum-tile .btn-icon{ align-self:center; }

/* Mano su tutte le tile cliccabili + summary */
#competizioni-root .js-world,
#competizioni-root .js-torneo,
#competizioni-root .js-divisione,
#competizioni-root .js-change,
#competizioni-root .sum-tile{ cursor:pointer; }

/* Allinea la fm-chip a destra dentro le tile degli step */
#step-mondi .fm-tile__val,
#step-tornei .fm-tile__val,
#step-divisioni .fm-tile__val{
  display:flex; align-items:center; gap:8px;
  justify-content:space-between;
}
#step-mondi .fm-v-main,
#step-tornei .fm-v-main,
#step-divisioni .fm-v-main{
  flex:1 1 auto; min-width:0;
}
#step-mondi .fm-v-sub,
#step-tornei .fm-v-sub,
#step-divisioni .fm-v-sub{
  margin-left:auto;            /* chip a destra */
}

/* Tornei (contenuto iniettato in #wrap-tornei): chip a destra */
#competizioni-root #wrap-tornei .fm-tile__val{
  display:flex; align-items:center; gap:8px;
  justify-content:space-between;  /* spazia titolo vs chip */
  width:100%;
}
#competizioni-root #wrap-tornei .fm-v-main{ flex:1 1 auto; min-width:0; }
#competizioni-root #wrap-tornei .fm-v-sub{ margin-left:auto; white-space:nowrap; }

/* ─────────── 8.9 AMICHEVOLI (Input Date) ─────────── */

/* Input date nelle tiles amichevoli */
.fm-tiles [data-amichevole-date]{ width:112px !important; }
.fm-tiles [data-amichevole-date]::-webkit-calendar-picker-indicator{ display:none; }
.tile-row3{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; }
#form-amichevole input[type="date"]::-webkit-calendar-picker-indicator{ display:none; }
#form-amichevole input[type="date"]::-webkit-inner-spin-button{ display:none; }

/* Chrome mobile: evita il collasso del date vuoto e nascondi l'icona nativa */
@media (hover:none) and (pointer:coarse){
  #form-amichevole .black_h[type="date"]{
    width:14ch !important;       /* ~ "gg/mm/aaaa" + margine */
    min-width:14ch !important;
    box-sizing:border-box !important;
    text-align:center;           /* opzionale: centra i segmenti */
  }
  #form-amichevole .black_h[type="date"]::-webkit-calendar-picker-indicator{
    opacity:0 !important;
    display:none !important;
  }
  /* piccolo padding interno ai segmenti (Chrome mobile) */
  #form-amichevole .black_h[type="date"]::-webkit-datetime-edit-fields-wrapper{ padding:0 2px; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABELLE (continuazione) + MINI LIVE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 8.20 Mini Live (squadra) */
.live-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#ff3b30;margin-right:8px;animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
[data-mini-live] .match-scorebar{display:flex;align-items:center;justify-content:center;gap:6px}
[data-mini-live] .pill--score{min-height:28px;display:inline-flex;align-items:center;justify-content:center}
[data-mini-live] .pill--score .s{line-height:1}

/* =============================
   Diretta: Preparazione
   Riutilizza chart-card + fm-head
   ============================= */
   .prep-card{ display:flex; align-items:center; justify-content:space-between; }
   .prep-text{ line-height:1.3; opacity:.95; font-size:14px; }
  /* Spinner con sfumatura continua (anello con conic-gradient) */
  .prep-spinner{
    width:28px; height:28px; border-radius:50%;
    /* sfumatura morbida tra i 3 colori (trasparente -> #667eea -> #764ba2 -> trasparente) */
    background: conic-gradient(
      from 0turn,
      rgba(102,126,234,.12) 0deg,
      #667eea 110deg,
      #764ba2 230deg,
      rgba(102,126,234,.12) 360deg
    );
    /* maschera per creare l'anello (spessore ~3px) */
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
            mask: radial-gradient(circle, transparent 50%, #000 55%);
    animation: fmspin 0.9s linear infinite;
    will-change: transform;
  }
   @keyframes fmspin { to { transform: rotate(360deg); } }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LOGIN FORM - Design System Moderno
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─────────── Accessibility Utilities ─────────── */

/* Screen Reader Only - nasconde visivamente ma accessibile */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Skip Link - visibile solo su focus (accessibilità WCAG) */
.skip-link{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%) translateY(-100%);
  z-index:9999;
  padding:12px 24px;
  background:var(--c-accent, #FFC932);
  color:#101820;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  border-radius:0 0 10px 10px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  opacity:0;
  pointer-events:none;
  transition:transform .2s ease, opacity .2s ease;
}
.skip-link:focus{
  transform:translateX(-50%) translateY(0);
  opacity:1;
  pointer-events:auto;
  outline:3px solid #fff;
  outline-offset:2px;
}

/* ─────────── Container Login ─────────── */
.login-card{
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius-fm);
  padding:24px 20px;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
  width:100%;
  max-width:400px;
  margin:20px auto;
}

.login-card__header{
  text-align:center;
  margin-bottom:24px;
}
.login-card__logo{
  width:90px;   /* Mobile: metà della dimensione originale */
  height:auto;
  margin-bottom:12px;
}
.login-card__title{
  font-size:18px;
  font-weight:800;
  color:var(--accent);
  margin:0 0 4px;
  letter-spacing:.3px;
}
.login-card__subtitle{
  font-size:13px;
  color:#b8c4d4;  /* Miglior contrasto: 7.2:1 su #101820 (WCAG AAA) */
  margin:0;
  font-weight:500;
}

/* ─────────── Form Groups ─────────── */
.login-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.form-label{
  font-size:12px;
  font-weight:700;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:6px;
}
.form-label__icon{
  font-size:14px;
  opacity:.7;
}

/* ─────────── Input Fields ─────────── */
.form-input{
  box-sizing:border-box;
  width:100%;
  height:48px;
  padding:0 16px;
  font-size:14px;
  font-weight:500;
  color:var(--text);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:10px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-input::placeholder{
  color:var(--muted);
  opacity:.6;
}
.form-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--ring);
  background:rgba(26,40,54,.8);
  outline:none;  /* Rimuove outline browser, usiamo box-shadow */
}
.form-input:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* select.auth-form-input: Stili spostati in css/auth.css */

/* Stato errore - placeholder, il messaggio sopra è sufficiente */

/* ─────────── Password Wrapper ─────────── */
.password-wrapper{
  position:relative;
}
.password-wrapper .form-input{
  padding-right:48px;
}
.password-toggle{
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  color:var(--muted);
  cursor:pointer;
  border-radius:8px;
  transition:color .2s ease, background .2s ease;
  font-size:18px;
}
.password-toggle:hover{
  color:var(--accent);
  background:rgba(255,201,50,.1);
}
.password-toggle:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:8px;
}
.password-toggle[data-visible="true"]{
  color:var(--accent);
}

/* ─────────── Submit Button ─────────── */
.btn-login{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:52px;
  padding:0 24px;
  margin-top:8px;
  font-size:15px;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#1a1a1a;
  background:linear-gradient(180deg,#FFD76A 0%,#FFB100 100%);
  border:none;
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(255,177,0,0.35);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-login:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(255,177,0,0.5);
}
.btn-login:active:not(:disabled){
  transform:translateY(0);
}
.btn-login:disabled{
  opacity:.7;
  cursor:not-allowed;
  transform:none;
}
/* Focus visibile per tastiera (WCAG 2.4.7) */
.btn-login:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}

/* ─────────── Loading Spinner ─────────── */
.btn-login__text{
  transition:opacity .2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.btn-login__text img{
  height:24px;
  width:auto;
  vertical-align:middle;
  display:block;
}
.btn-login__spinner{
  display:none;
  width:20px;
  height:20px;
  border:3px solid rgba(26,26,26,.2);
  border-top-color:#1a1a1a;
  border-radius:50%;
  animation:login-spin .8s linear infinite;
}
.btn-login.is-loading .btn-login__text{
  opacity:0;
  position:absolute;
}
.btn-login.is-loading .btn-login__spinner{
  display:block;
}
@keyframes login-spin{
  to{ transform:rotate(360deg); }
}

/* ─────────── Error Message ─────────── */
.login-error{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  margin-bottom:8px;
  background:rgba(220,53,69,.15);
  border:1px solid rgba(255,107,122,.4);
  border-radius:10px;
  color:#ffa0aa;  /* Contrasto 6.5:1 su sfondo scuro (WCAG AA) */
  font-size:13px;
  font-weight:600;
  line-height:1.5;
}
.login-error__icon{
  font-size:16px;
  flex-shrink:0;
  margin-top:2px;
}

/* ─────────── Divider ─────────── */
.login-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0;
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.login-divider::before,
.login-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}

/* ─────────── Footer Links ─────────── */
.login-footer{
  text-align:center;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.login-footer__text{
  font-size:13px;
  color:#b8c4d4;  /* Contrasto 7.2:1 (WCAG AAA) */
  margin:0;
}
.login-footer__link{
  color:var(--accent);
  font-weight:700;
  text-decoration:underline;  /* Underline sempre per accessibilità link */
  text-underline-offset:3px;
  transition:color .2s ease;
}
.login-footer__link:hover,
.login-footer__link:focus{
  color:#fff;
}
.login-footer__link:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}

/* ─────────── reCAPTCHA Wrapper ─────────── */
.recaptcha-wrapper{
  display:flex;
  justify-content:center;
  margin:8px 0;
  transform:scale(.92);
  transform-origin:center;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LOGIN FORM - REGISTRATION SPECIFIC
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.register-card{ max-width:440px; }

/* ─────────── Form Hint ─────────── */
.form-hint{
  display:block;
  margin-top:6px;
  font-size:11px;
  color:#9aa6bb;
  line-height:1.4;
}
.form-hint--error{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:8px;
  padding:8px 12px;
  background:rgba(255,107,107,.1);
  border:1px solid rgba(255,107,107,.25);
  border-radius:8px;
  color:#ff6b6b;
  font-size:12px;
  font-weight:500;
  text-align:center;
  animation:shake .4s ease-out;
}
.form-hint--error::before{
  content:"⚠";
  font-size:14px;
  flex-shrink:0;
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-4px)}
  40%,80%{transform:translateX(4px)}
}

/* ─────────── Password Strength Indicator ─────────── */
.password-strength{
  display:block;
  margin-top:4px;
  font-size:11px;
  font-weight:600;
  min-height:14px;
}

/* ─────────── Quiz Fieldset ─────────── */
.quiz-fieldset{
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
  margin:16px 0;
  background:rgba(255,255,255,.02);
}
.quiz-legend{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:700;
  color:var(--accent);
  padding:0 8px;
}
.quiz-question{
  font-size:13px;
  color:#eaeaea;
  margin:0 0 12px 0;
  line-height:1.5;
}
.quiz-options{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.quiz-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:8px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.quiz-option:hover{
  background:rgba(255,255,255,.06);
  border-color:var(--accent);
}
.quiz-option input[type="radio"]{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  min-width:18px;
  margin-top:2px;
  border:2px solid var(--line);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  position:relative;
  flex-shrink:0;
}
.quiz-option input[type="radio"]:checked{
  border-color:var(--accent);
  background:var(--accent);
}
.quiz-option input[type="radio"]:checked::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:6px;
  height:6px;
  background:#101820;
  border-radius:50%;
}
.quiz-option input[type="radio"]:focus-visible{
  box-shadow:0 0 0 3px var(--ring);
}
.quiz-option__label{
  font-size:13px;
  color:#eaeaea;
  text-align:left;
  line-height:1.4;
}

/* ─────────── Register Button (reuses login button) ─────────── */
.btn-register{
  margin-top:8px;
}
.btn-register__text{
  transition:opacity .2s ease;
}
.btn-register__spinner{
  display:none;
  width:20px;
  height:20px;
  border:2px solid rgba(16,24,32,.2);
  border-top-color:#101820;
  border-radius:50%;
  animation:spin .8s linear infinite;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-10px;
  margin-top:-10px;
}

/* ─────────── Field Errors (Client-side) ─────────── */
.field-error{
  display:block;
  margin-top:6px;
  font-size:11px;
  color:#ff6b6b;
  font-weight:500;
}

/* ─────────── Responsive Login/Register (≥600px) ─────────── */
@media (min-width:600px){
  .login-card{ padding:32px 28px; max-width:420px; }
  .login-card__logo{ width:120px; }
  .login-card__subtitle{ font-size:14px; }
  .form-input{ height:52px; font-size:15px; }
  .btn-login{ height:56px; font-size:16px; }
  .recaptcha-wrapper{ transform:scale(1); }
  .register-card{ max-width:480px; }
  .quiz-options{ flex-direction:row; flex-wrap:wrap; }
  .quiz-option{ flex:1 1 calc(50% - 4px); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   GAME PAGE LAYOUT - Layout unificato per tutte le pagine
   Breakpoints: XS (≤344px) | Mobile (345-699px) | Tablet (700-1279px) | Desktop (≥1280px)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────── Game Page Container ─────────── */
.game-page{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--c-bg);
  position:relative;
  overflow-x:hidden;
}

/* Sfondo decorativo con orb sfumati (fallback se JS disabilitato) */
.game-page::before{
  content:'';
  position:fixed;
  top:-100px;
  left:15%;
  width:280px;
  height:280px;
  background:rgba(255,201,50,.12);
  border-radius:50%;
  filter:blur(80px);
  pointer-events:none;
  z-index:0;
}

.game-page::after{
  content:'';
  position:fixed;
  bottom:-80px;
  right:10%;
  width:220px;
  height:220px;
  background:rgba(255,180,80,.10);
  border-radius:50%;
  filter:blur(80px);
  pointer-events:none;
  z-index:0;
}

/* Nascondi orb statici se JS attivo (per orb animati) */
.game-page.js-active::before,
.game-page.js-active::after{
  display:none;
}

/* Container per orb animati (creato da JS) */
.game-bg-container{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

/* ─────────── Game Main Content ─────────── */
.game-main{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:12px 10px;
  position:relative;
  z-index:1;
  width:100%;
  max-width:699px;
  margin:0 auto;
  overflow-x: hidden;
  box-sizing:border-box;
}

/* Modificatore: centra verticalmente (per card login/register) */
.game-main--center{
  justify-content:center;
}

/* Modificatore: allinea in alto (per homepage) */
.game-main--top{
  justify-content:flex-start;
  padding-top:16px;
}

/* ─────────── Auth Header ─────────── */
/* Base: Mobile (345-699px) - misure compatte */
.auth-header{
  position:relative;
  z-index:10;
  padding:10px 12px;
  background:rgba(16,24,32,.6);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.auth-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1200px;
  margin:0 auto;
}

.auth-header__logo{
  display:flex;
  align-items:center;
  text-decoration:none;
  transition:opacity .2s ease;
}

.auth-header__logo:hover{
  opacity:.85;
}

.auth-header__logo-img{
  height:22px;
  width:auto;
  max-width:100%;
  object-fit:contain;
}

/* Logo gif diretta - leggermente più grande */
.auth-header__logo-img--live{
  height:32px;
}

/* Actions (dropdowns container) */
.auth-header__actions{
  display:flex;
  align-items:center;
  gap:8px;
}

/* ─────────── Dropdown Component ─────────── */
.auth-dropdown{
  position:relative;
}

.auth-dropdown__trigger{
  display:flex;
  align-items:center;
  gap:4px;
  padding:5px 8px;
  font-size:11px;
  font-weight:500;
  color:var(--c-text);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  cursor:pointer;
  transition:all .2s ease;
  max-width:200px;
}

.auth-dropdown__trigger:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.15);
}

.auth-dropdown__trigger:focus-visible{
  outline:2px solid var(--c-accent);
  outline-offset:2px;
}

.auth-dropdown__icon,
.auth-dropdown__flag{
  font-size:16px;
}

.auth-dropdown__label{
  white-space:nowrap;
}

.auth-dropdown__arrow{
  font-size:7px;
  color:var(--muted);
  transition:transform .2s ease;
}

.auth-dropdown.is-open .auth-dropdown__arrow{
  transform:rotate(180deg);
}

/* Dropdown Menu */
.auth-dropdown__menu{
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  min-width:100px;
  padding:4px;
  background:var(--panel);
  border:1px solid var(--c-border);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:all .2s ease;
  z-index:100;
}

.auth-dropdown.is-open .auth-dropdown__menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.auth-dropdown__item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 8px;
  margin-bottom:3px;
  font-size:11px;
  font-weight:500;
  color:var(--c-text);
  text-decoration:none;
  border-radius:5px;
  transition:background .15s ease;
}

.auth-dropdown__item:last-child{
  margin-bottom:0;
}

/* Dropdown lingua guest: allineamento centrato con flag a sinistra */
.auth-dropdown[data-dropdown="lang"] .auth-dropdown__item{
  position:relative;
  padding-left:32px;
  justify-content:center;
}

.auth-dropdown[data-dropdown="lang"] .auth-dropdown__item > span{
  position:absolute;
  left:10px;
  font-size:16px;
}

.auth-dropdown__item:hover{
  background:rgba(255,255,255,.08);
}

.auth-dropdown__item span{
  font-size:12px;
}

/* Item con submenu (layout: arrow - label - icon) */
.auth-dropdown__item--submenu{
  position:relative;
  display:flex;
  align-items:center;
  cursor:pointer;
}

.auth-dropdown__item-arrow{
  font-size:12px;
  color:var(--muted);
  margin-right:6px;
  transition:transform .2s ease;
}

.auth-dropdown__item-label{
  flex:1;
}

.auth-dropdown__item-icon{
  font-size:14px;
  margin-left:8px;
}

/* Submenu (estensione a SINISTRA) */
.auth-dropdown__submenu{
  position:absolute;
  right:calc(100% + 6px);
  left:auto;
  top:-4px;
  min-width:110px;
  padding:4px;
  background:var(--panel);
  border:1px solid var(--c-border);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0;
  visibility:hidden;
  transform:translateX(8px);
  transition:all .2s ease;
}

.auth-dropdown__item--submenu.is-submenu-open .auth-dropdown__submenu,
.auth-dropdown__item--submenu:hover .auth-dropdown__submenu{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}

.auth-dropdown__subitem{
  position:relative;
  display:block;
  padding:8px 10px 8px 28px;
  margin-bottom:3px;
  font-size:11px;
  font-weight:500;
  color:var(--c-text);
  text-decoration:none;
  text-align:center;
  border-radius:5px;
  transition:background .15s ease;
}

.auth-dropdown__subitem:last-child{
  margin-bottom:0;
}

.auth-dropdown__subitem span{
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
}

.auth-dropdown__subitem:hover{
  background:rgba(255,255,255,.08);
}

.auth-dropdown__subitem.is-active{
  color:var(--c-accent);
  background:rgba(255,201,50,.1);
}

/* ─────────── GAME ICON BADGE (notifiche/messaggi) ─────────── */
.game-icon-badge[data-count]::after{
  content:attr(data-count);
  position:absolute;
  top:-6px;
  right:-10px;
  min-width:16px;
  height:16px;
  background:var(--c-accent);
  color:#000;
  font-size:10px;
  font-weight:700;
  line-height:16px;
  text-align:center;
  border-radius:10px;
  padding:0 4px;
}

/* XS: Risoluzioni molto basse (≤344px) */
@media (max-width:344px){
  .auth-header{
    padding:6px 10px;
  }
  
  .auth-header__logo-img{
    height:18px;
  }
  .auth-header__logo-img--live{
    height:28px;
  }
  
  .auth-dropdown__trigger{
    padding:4px 6px;
    font-size:10px;
    gap:3px;
    max-width:160px;
  }
  
  .auth-dropdown__arrow{
    font-size:6px;
  }
  
  .auth-dropdown__menu{
    min-width:90px;
    padding:3px;
  }
  
  .auth-dropdown__item{
    padding:5px 6px;
    font-size:10px;
    gap:4px;
  }
  
  .auth-dropdown__submenu{
    min-width:100px;
    padding:3px;
  }
  
  .auth-dropdown__subitem{
    padding:6px 8px 6px 24px;
    font-size:10px;
  }
  
  .auth-dropdown__subitem span{
    font-size:12px;
    left:6px;
  }
  
  /* Hero tiles: font più piccolo per evitare wrap */
  .fm-hero__tiles .fm-v-main,
  .fm-hero__tiles .fm-v-sub{
    font-size:10px;
  }
  .fm-hero__tiles-row .fm-v-main,
  .fm-hero__tiles-row .fm-tile__val{
    font-size:11px;
  }
  
  .game-main{
    max-width:344px;
  }
}

/* reCAPTCHA badge - assicura che sia cliccabile sopra lo sfondo */

/* ECONOMIA: Stili spostati in css/economia.css */
.grecaptcha-badge{
  z-index:100 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   AUTH: Stili spostati in css/auth.css
   Include: auth-card, auth-form, auth-alert, auth-checkbox,
   auth-password, auth-quiz, auth-footer, info-display
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   ONBOARDING - Creazione Club
   ═══════════════════════════════════════════════════════════════════ */

/* Welcome Banner */
.onboard-welcome{
  text-align:center;
  margin-bottom:32px;
  padding:24px 20px;
}

.onboard-welcome__icon{
  font-size:48px;
  margin-bottom:12px;
  animation:bounce 2s ease infinite;
}

@keyframes bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

.onboard-welcome__title{
  font-size:24px;
  font-weight:700;
  color:var(--c-text);
  margin:0 0 8px;
}

.onboard-welcome__text{
  font-size:14px;
  color:var(--muted);
  margin:0;
  max-width:400px;
  margin:0 auto;
  line-height:1.5;
}

/* Success Banner (club creato) */
.onboard-success{
  text-align:center;
  padding:40px 24px;
  max-width:500px;
  margin:0 auto;
}

.onboard-success__icon{
  font-size:64px;
  margin-bottom:16px;
  animation:bounce 2s ease infinite;
}

.onboard-success__title{
  font-size:28px;
  font-weight:700;
  color:var(--c-accent);
  margin:0 0 12px;
}

.onboard-success__text{
  font-size:16px;
  color:var(--c-text);
  margin:0 0 8px;
}

.onboard-success__club{
  font-size:18px;
  font-weight:700;
  color:var(--c-text);
  margin:0 0 32px;
  padding:12px 20px;
  background:rgba(255,201,50,.1);
  border:1px solid rgba(255,201,50,.3);
  border-radius:12px;
  display:inline-block;
}

.onboard-success__tips{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:32px;
}

.onboard-success__tip{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  text-align:left;
}

.onboard-success__tip-icon{
  font-size:20px;
  flex-shrink:0;
}

.onboard-success__tip-text{
  font-size:13px;
  color:var(--muted);
  line-height:1.4;
}

.onboard-success__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 28px;
  background:linear-gradient(135deg, var(--c-accent) 0%, #e5a800 100%);
  color:#000;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  border-radius:12px;
  transition:transform .2s ease, box-shadow .2s ease;
}

.onboard-success__btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(255,201,50,.3);
}

.onboard-success__btn-icon{
  font-size:18px;
}

/* Error Banner */
.onboard-error{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 20px;
  background:rgba(229,57,53,.1);
  border:1px solid rgba(229,57,53,.3);
  border-radius:12px;
  color:#ff6b6b;
  font-size:14px;
  margin-bottom:24px;
  max-width:500px;
  margin-left:auto;
  margin-right:auto;
}

/* Container layout */
.onboard-container{
  display:flex;
  flex-direction:column;
  gap:20px;
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:0;
}

/* Panel (card) */
.onboard-panel{
  background:linear-gradient(145deg, var(--panel), var(--panel-2));
  border:1px solid var(--c-border);
  border-radius:var(--radius-fm);
  overflow:hidden;
}

.onboard-panel__header{
  padding:16px 20px;
  background:rgba(255,255,255,.02);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.onboard-panel__title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:600;
  color:var(--c-text);
  margin:0;
}

.onboard-panel__title span{
  font-size:18px;
}

.onboard-panel__body{
  padding:20px;
}

.onboard-panel__note{
  margin:12px 0 0;
  font-size:12px;
  color:var(--muted);
  text-align:center;
}

/* Worlds list */
.onboard-worlds{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:280px;
  overflow-y:auto;
}

.onboard-world{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  cursor:pointer;
  transition:all .2s ease;
}

.onboard-world:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
}

.onboard-world.is-selected{
  background:rgba(255,201,50,.08);
  border-color:var(--c-accent);
}

.onboard-world__info{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.onboard-world__name{
  font-size:14px;
  font-weight:600;
  color:var(--c-text);
}

.onboard-world__spots{
  font-size:12px;
  color:var(--muted);
}

.onboard-world__spots--low{
  color:#e67e22;
}

.onboard-world__status{
  flex-shrink:0;
  opacity:.8;
  transition:opacity .2s ease, transform .2s ease;
}

.onboard-world:hover .onboard-world__status,
.onboard-world.is-selected .onboard-world__status{
  opacity:1;
  transform:scale(1.1);
}

.onboard-worlds__empty{
  padding:40px 20px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}

.onboard-worlds__empty span{
  display:block;
  font-size:32px;
  margin-bottom:12px;
}

/* Form */
.onboard-form{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.onboard-form-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.onboard-form-label{
  font-size:13px;
  font-weight:500;
  color:var(--c-text);
}

.onboard-form-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
}

.onboard-form-input{
  flex:1;
  padding:14px 40px 14px 16px;
  font-size:14px;
  color:var(--c-text);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  transition:all .2s ease;
}

.onboard-form-input:focus{
  outline:none;
  border-color:var(--c-accent);
  box-shadow:0 0 0 3px var(--ring);
}

.onboard-form-input::placeholder{
  color:var(--muted);
  opacity:0.7;
}

.onboard-form-input[readonly]{
  background:rgba(255,255,255,.01);
  cursor:default;
}

.onboard-form-input.is-valid{
  border-color:#27ae60;
}

.onboard-form-input.is-invalid{
  border-color:#e74c3c;
}

.onboard-form-status{
  position:absolute;
  right:14px;
  display:flex;
  align-items:center;
}

.onboard-form-help{
  font-size:11px;
  color:var(--muted);
}

/* Submit button */
.onboard-submit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:16px 24px;
  font-size:15px;
  font-weight:600;
  color:var(--c-bg);
  background:linear-gradient(135deg, #ccc, #999);
  border:none;
  border-radius:12px;
  cursor:not-allowed;
  transition:all .3s ease;
  margin-top:8px;
}

.onboard-submit:disabled{
  opacity:0.6;
}

.onboard-submit.is-ready{
  background:linear-gradient(135deg, var(--c-accent), #e6b800);
  cursor:pointer;
  box-shadow:0 4px 16px rgba(255,201,50,.25);
}

.onboard-submit.is-ready:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(255,201,50,.35);
}

.onboard-submit.is-submitting{
  background:linear-gradient(135deg, #666, #444);
  cursor:wait;
}

.onboard-submit__icon{
  font-size:18px;
}

/* Details panel */
.onboard-details__empty{
  padding:40px 20px;
  text-align:center;
  color:var(--muted);
}

.onboard-details__empty span{
  display:block;
  font-size:28px;
  margin-bottom:12px;
}

.onboard-details__empty p{
  margin:0;
  font-size:13px;
  line-height:1.5;
}

.onboard-details__loading{
  padding:40px 20px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

/* Stili per contenuto AJAX (tabelle legacy) */
.onboard-details .gener_black{
  width:100%;
  border-collapse:collapse;
}

.onboard-details .testata{
  padding:12px;
  background:rgba(255,255,255,.03);
  color:var(--c-accent);
  font-weight:600;
  font-size:14px;
}

.onboard-details .riga_min,
.onboard-details .riga_rev_min,
.onboard-details .riga_min_hi,
.onboard-details .riga_rev_min_hi{
  padding:10px 12px;
  font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.onboard-details .riga_min,
.onboard-details .riga_min_hi{
  color:var(--muted);
}

.onboard-details .riga_rev_min,
.onboard-details .riga_rev_min_hi{
  color:var(--c-text);
  text-align:right;
}

.onboard-error{
  padding:20px;
  text-align:center;
  color:#e74c3c;
}

/* Details grid (AJAX loaded) */
.onboard-details__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.onboard-stat{
  display:grid;
  grid-template-columns:24px 1fr;
  grid-template-rows:auto auto;
  gap:4px 10px;
  padding:12px 14px;
  background:rgba(255,255,255,.02);
  border-radius:8px;
  border:1px solid rgba(255,255,255,.05);
}

.onboard-stat__icon{
  font-size:16px;
  text-align:center;
  grid-row:1;
  grid-column:1;
  align-self:center;
}

.onboard-stat__label{
  font-size:12px;
  color:var(--muted);
  grid-row:1;
  grid-column:2;
  text-align:left;
}

.onboard-stat__value{
  font-size:12px;
  font-weight:600;
  color:var(--c-text);
  grid-row:2;
  grid-column:2;
  text-align:left;
  word-break:break-word;
}

.onboard-stat__value small{
  display:block;
  font-size:11px;
  font-weight:400;
  color:var(--muted);
  margin-top:2px;
}

.onboard-stat__value--warning{ color:#e67e22; }
.onboard-stat--highlight{ background:rgba(255,201,50,.05); border-color:rgba(255,201,50,.15); }
.onboard-stat--highlight .onboard-stat__icon{ font-size:18px; }

/* Tablet onboarding (≥480px) */
@media (min-width:480px){
  .onboard-stat{ grid-template-columns:24px 1fr auto; grid-template-rows:auto; gap:10px; align-items:center; }
  .onboard-stat__icon{ grid-row:1; grid-column:1; }
  .onboard-stat__label{ grid-row:1; grid-column:2; }
  .onboard-stat__value{ font-size:13px; grid-row:1; grid-column:3; text-align:right; word-break:normal; }
  .onboard-stat__value small{ display:block; margin-top:2px; }
  .onboard-details__grid{ grid-template-columns:repeat(2, 1fr); }
  .onboard-stat--highlight{ grid-column:span 2; }
}


/* ═══════════════════════════════════════════════════════════════════
   LANDING FALLBACK - Include per pagine senza accesso
   ═══════════════════════════════════════════════════════════════════ */

.landing-fallback{
  max-width:400px;
  margin:40px auto;
  padding:40px 24px;
  text-align:center;
  background:linear-gradient(145deg, var(--panel), var(--panel-2));
  border:1px solid var(--c-border);
  border-radius:var(--radius-fm);
}

.landing-fallback__icon{
  font-size:48px;
  margin-bottom:16px;
}

.landing-fallback__title{
  font-size:20px;
  font-weight:700;
  color:var(--c-text);
  margin:0 0 12px;
}

.landing-fallback__text{
  font-size:14px;
  color:var(--muted);
  margin:0 0 24px;
  line-height:1.5;
}

.landing-fallback__actions{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.landing-fallback__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 20px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  border-radius:10px;
  transition:all .2s ease;
}

.landing-fallback__btn--primary{
  color:var(--c-bg);
  background:linear-gradient(135deg, var(--c-accent), #e6b800);
  box-shadow:0 4px 12px rgba(255,201,50,.2);
}

.landing-fallback__btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(255,201,50,.3);
}

.landing-fallback__btn--secondary{
  color:var(--c-text);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
}

.landing-fallback__btn--secondary:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.15);
}

/* Tablet landing-fallback (≥480px) */
@media (min-width:480px){
  .landing-fallback__actions{ flex-direction:row; justify-content:center; }
  .landing-fallback__btn{ flex:0 1 auto; min-width:140px; }
}

/* ─────────── Responsive ─────────── */
/* ≥768px e ≥1024px → spostato in tablet.main.css */

/* ═══════════════════════════════════════════════════════════════════════════
   FM-STICKY-TABLE - Tabella con colonne sticky (COMPONENTE GENERICO)
   Riutilizzabile per: rosa nazionale, rosa club, mercato, ecc.
   ═══════════════════════════════════════════════════════════════════════════ */

.fm-sticky-board {
  width: 100%;
  max-width: 100%;
  min-width: 280px;
  background: var(--panel-2);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.fm-sticky-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Assicura che il footer sia sempre sotto la tabella */
.fm-sticky-board {
  display: flex;
  flex-direction: column;
}

.fm-sticky-board .fm-sticky-wrap {
  flex: 1;
  min-height: 0;
}

.fm-sticky-board .fm-sticky-footer {
  flex-shrink: 0;
  order: 2;
}

/* Statistiche rosa (non scrolla) */
.fm-sticky-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 24px;
  padding: 12px 16px;
  font-size: 12px;
  color: var(--muted);
  background: var(--panel-2);
  border-top: 1px solid var(--c-border);
  text-align: center;
}

.fm-sticky-stats strong {
  color: var(--c-accent);
  font-weight: 700;
}

/* Footer fisso sotto la tabella (non scrolla) */
.fm-sticky-footer {
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  background: var(--panel-2);
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--c-border);
  text-align: center;
  margin-top: 0;
  flex-shrink: 0;
}

.fm-sticky-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  white-space: nowrap;
}

.fm-sticky-table td {
  height: 38px;
  padding: 0 6px;
  vertical-align: middle;
  background: transparent;
  color: #f0f4fa;
  border-bottom: 1px solid rgba(0,0,0,0.25);
}

/* Position relative solo per celle NON sticky (per ::before/::after) */
.fm-sticky-table td:not(.col-sticky) {
  position: relative;
}

/* economia-contratti-table: Stili spostati in css/economia.css */

.fm-sticky-table thead td,
.fm-sticky-table thead th {
  height: 36px;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  background: var(--panel-2);
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.fm-sticky-table tfoot td {
  height: 40px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text);
  background: var(--panel-2);
  border-top: 1px solid var(--c-border);
  text-align: center;
}

/* Sticky columns */
.fm-sticky-table .col-sticky {
  position: sticky;
  z-index: 15;
  border-bottom: none;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.25);
}

.fm-sticky-table thead .col-sticky {
  z-index: 25;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1);
}

/* Colonna media sticky - SPOSTATO in player.css per fm-abilita-table */
/* .fm-sticky-table .col-sticky.col-media {
  position: sticky !important;
  background: var(--panel);
  z-index: 16;
} */

/* .fm-sticky-table thead .col-sticky.col-media {
  background: var(--panel-2);
  z-index: 26;
} */

.fm-sticky-table .col-num {
  display: none; /* Nascosto di default su mobile, visibile da tablet in tablet.main.css */
  left: 0;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  text-align: center;
  padding: 0 4px;
  font-weight: 700;
  background: var(--panel);
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
}

.fm-sticky-table thead .col-num { background: var(--panel-2); }

.fm-sticky-table .col-name {
  left: 28px;
  width: 130px;
  min-width: 130px;
  max-width: 130px;
  text-align: left;
  padding: 0 6px;
  background: var(--panel);
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.25), inset 0 -1px 0 rgba(0,0,0,0.25);
}

.fm-sticky-table thead .col-name { background: var(--panel-2); }

.fm-sticky-table .col-name::after {
  content: '';
  position: absolute;
  top: 0; right: -12px; bottom: 0; width: 12px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,0.35), transparent);
}

.fm-sticky-table .col-name a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.fm-sticky-table .col-name a:hover { color: var(--c-accent); }

/* Colonna ruolo - stili base (NON sticky di default) */
.fm-sticky-table .col-role {
  width: 70px;
  min-width: 70px;
  max-width: 70px;
  text-align: center;
  padding: 0 4px;
  font-size: 10px;
}

/* Colonna ruolo sticky - SOLO se ha classe col-sticky */
.fm-sticky-table .col-sticky.col-role {
  left: 130px; /* Dopo col-name */
  background: var(--panel);
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.25), inset 0 -1px 0 rgba(0,0,0,0.25);
}

.fm-sticky-table thead .col-sticky.col-role {
  background: var(--panel-2);
}

/* Header columns (thead) */
.fm-sticky-table .col-head { 
  text-align: center;
  /* background definibile separatamente per thead */
  font-size: 10px;
}

/* Assicura che le colonne non sticky siano sotto quelle sticky */
.fm-sticky-table thead .col-head {
  z-index: 5 !important; /* Sotto le colonne sticky (z-index: 25) */
}

/* Data columns (tbody) */
.fm-sticky-table .col-data { 
  text-align: center;
  color: #f0f4fa;
  background: rgba(255,255,255,0.04);
  font-size: 10px;
}

.fm-sticky-table tbody .col-data {
  z-index: 1 !important; /* Sotto le colonne sticky (z-index: 15) */
}

.fm-sticky-table .col-data a {
  color: #f0f4fa;
  text-decoration: none;
}

.fm-sticky-table .col-data a:hover {
  color: var(--c-accent);
}

/* ═══ Role colors - Unificate (bg-* e col-role.*) ═══ */
.fm-sticky-table .bg-por,
.fm-sticky-table .col-role.por { background: var(--role-por) !important; color: #000 !important; font-weight: 700; }
.fm-sticky-table .bg-dif,
.fm-sticky-table .col-role.dif { background: var(--role-dif) !important; color: #000 !important; font-weight: 700; }
.fm-sticky-table .bg-med,
.fm-sticky-table .col-role.med { background: var(--role-med) !important; color: #000 !important; font-weight: 700; }
.fm-sticky-table .bg-cen,
.fm-sticky-table .col-role.cen { background: var(--role-cen) !important; color: #000 !important; font-weight: 700; }
.fm-sticky-table .bg-tre,
.fm-sticky-table .col-role.tre { background: var(--role-tre) !important; color: #000 !important; font-weight: 700; }
.fm-sticky-table .bg-att,
.fm-sticky-table .col-role.att { background: var(--role-att) !important; color: #000 !important; font-weight: 700; }

/* Box-shadow per celle colorate */
.fm-sticky-table .bg-por, .fm-sticky-table .bg-dif, .fm-sticky-table .bg-med,
.fm-sticky-table .bg-cen, .fm-sticky-table .bg-tre, .fm-sticky-table .bg-att {
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.4), inset 0 -1px 0 rgba(0,0,0,0.4) !important;
}

.fm-sticky-table .col-status img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/* ═══ Rail colors - Una sola definizione (usa :has per rilevare ruolo) ═══ */
.fm-sticky-table tr:has(.bg-por) .col-name,
.fm-sticky-table tr:has(.por) .col-name { --rail-color: var(--role-por); }
.fm-sticky-table tr:has(.bg-dif) .col-name,
.fm-sticky-table tr:has(.dif) .col-name { --rail-color: var(--role-dif); }
.fm-sticky-table tr:has(.bg-med) .col-name,
.fm-sticky-table tr:has(.med) .col-name { --rail-color: var(--role-med); }
.fm-sticky-table tr:has(.bg-cen) .col-name,
.fm-sticky-table tr:has(.cen) .col-name { --rail-color: var(--role-cen); }
.fm-sticky-table tr:has(.bg-tre) .col-name,
.fm-sticky-table tr:has(.tre) .col-name { --rail-color: var(--role-tre); }
.fm-sticky-table tr:has(.bg-att) .col-name,
.fm-sticky-table tr:has(.att) .col-name { --rail-color: var(--role-att); }

/* ─────────────────────────────────────────
   RAIL MODE (<700px) - Struttura unificata
   ───────────────────────────────────────── */
@media (max-width: 699px) {
  .fm-sticky-table .col-num { display: none !important; }
  
  .fm-sticky-table:not(.schedina-table):not(.economia-contratti-table) .col-name {
    left: 0 !important;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    padding-left: 14px !important;
  }
  
  /* economia/schedina: Stili spostati in css/economia.css */
  
  /* Rail colorato */
  .fm-sticky-table tbody .col-name::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: var(--rail-color, var(--panel));
  }
  
  .fm-sticky-table .col-name a {
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
  }
  
  /* Ombreggiatura sticky attiva anche su mobile */
  .fm-sticky-table .col-name::after {
    content: '';
    position: absolute;
    top: 0; right: -10px; bottom: 0; width: 10px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(0,0,0,0.3), transparent);
  }
  
  /* Colonna ruolo su mobile - dimensioni */
  .fm-sticky-table:not(.economia-contratti-table):not(.fm-abilita-table) .col-role {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    font-size: 10px !important;
  }
  
  /* Colonna ruolo sticky su mobile - posizione (SOLO se sticky) */
  .fm-sticky-table:not(.economia-contratti-table):not(.fm-abilita-table) .col-sticky.col-role {
    left: 140px !important; /* Dopo col-name (140px) */
  }
  
}

/* XS override (≤450px) */
@media (max-width: 450px) {
  .fm-sticky-table:not(.economia-contratti-table):not(.schedina-table):not(.schedina-table--betting):not(.fm-abilita-table) .col-name {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
  }
  .fm-sticky-table:not(.economia-contratti-table):not(.schedina-table):not(.schedina-table--betting):not(.fm-abilita-table) .col-name a { font-size: 9px; }
}

/* XS (≤344px) */
@media (max-width: 344px) {
  .fm-sticky-table { font-size: 10px; }
  .fm-sticky-table td { height: 34px; padding: 0 4px; }
  .fm-sticky-table:not(.economia-contratti-table):not(.schedina-table):not(.schedina-table--betting):not(.fm-abilita-table) .col-name { width: 110px !important; min-width: 110px !important; max-width: 110px !important; }
  
  /* Colonna ruolo ridotta su risoluzioni ultra basse */
  .fm-sticky-table:not(.economia-contratti-table):not(.fm-abilita-table) .col-role {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    font-size: 9px !important;
  }
  
  /* Posizione sticky SOLO se ha col-sticky */
  .fm-sticky-table:not(.economia-contratti-table):not(.fm-abilita-table) .col-sticky.col-role {
    left: 110px !important; /* Dopo col-name (110px) */
  }
  
  /* Assicura che le colonne non sticky (Età, Scadenza, Stip) abbiano width minima */
  .fm-sticky-table .col-head,
  .fm-sticky-table .col-data {
    min-width: 50px !important;
    width: auto;
  }
  
}

/* Tablet (≥700px) → spostato in tablet.main.css */
/* Desktop (≥1280px) → spostato in desktop.main.css */


/* ═══════════════════════════════════════════════════════════════════════════
   FM-CARD-GRID - Griglia di card responsive (COMPONENTE GENERICO)
   ═══════════════════════════════════════════════════════════════════════════ */

.fm-card-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  max-width: 600px;
  margin: 0 auto;
  padding: 0 12px;
}

.fm-card-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.fm-card-grid__item:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--c-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.fm-card-grid__img {
  width: 48px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.fm-card-grid__label {
  font-size: 9px;
  font-weight: 600;
  color: var(--c-text);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* XS (≤344px) */
@media (max-width: 344px) {
  .fm-card-grid { 
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); 
    gap: 8px; 
  }
  .fm-card-grid__item { padding: 8px 4px; }
  .fm-card-grid__img { width: 40px; height: 28px; }
  .fm-card-grid__label { font-size: 8px; }
}

/* S (345-360px) */
@media (min-width: 345px) and (max-width: 360px) {
  .fm-card-grid { grid-template-columns: repeat(auto-fill, minmax(65px, 1fr)); }
}

/* Tablet (≥700px) → spostato in tablet.main.css */
/* Desktop (≥1280px) → spostato in desktop.main.css */


/* ═══════════════════════════════════════════════════════════════════════════
   FM-SECTION - Sezioni e titoli pagina (COMPONENTE GENERICO)
   ═══════════════════════════════════════════════════════════════════════════ */

.fm-section {
  padding: 12px 0;
  margin-bottom: 16px;
  max-width: 100%;
  overflow: hidden;
}

.fm-section__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

/* Container azioni header (icone navigazione) */
.fm-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fm-header-actions__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--c-border);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.fm-header-actions__icon:hover {
  box-shadow: 0 4px 16px rgba(255,201,50,0.25);
  border-color: var(--c-accent);
}

.fm-header-actions__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Badge formazione con dot */
.fm-formaz-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--c-border);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  will-change: box-shadow;
}

.fm-formaz-badge:hover {
  box-shadow: 0 4px 16px rgba(255,201,50,0.25);
  border-color: var(--c-accent);
}

.fm-formaz-badge img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

.fm-formaz-badge__dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--c-bg);
  animation: pulse-badge 2s infinite;
}

.fm-formaz-badge__dot--ok {
  background: #2ecc71;
  animation: none;
}

.fm-formaz-badge__dot--warning {
  background: #e74c3c;
}

@keyframes pulse-badge {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

.fm-section__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 16px 0;
  text-align: center;
}

.fm-section__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 10px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  transition: all 0.2s;
  align-self: flex-start;
}

.fm-section__back:hover {
  color: var(--c-accent);
  background: rgba(255,255,255,0.1);
}

.fm-section__team {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fm-section__team-flag {
  width: 48px;
  height: 32px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.fm-section__team-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--c-text);
  margin: 0;
}

.fm-page-title {
  text-align: center;
  padding: 8px 12px 8px; /* ✅ padding-top = padding-bottom */
}

.fm-page-title h1 {
  font-size: 13px; /* ✅ Partenza da 13px su mobile */
  font-weight: 800;
  color: var(--c-accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
}

/* ─────────── FM Status Message ─────────── */
.fm-status-message {
  text-align: center;
  font-size: 13px;
  padding: 8px 12px;
  margin: 0 0 16px;
}

.fm-status--ok {
  color: #4CAF50;
}

.fm-status--warning {
  color: var(--c-accent);
  text-decoration: underline;
}

.fm-status--warning:hover {
  color: #fff;
}

/* ─────────── FM Skill Navigation Bar ─────────── */
.fm-skill-nav {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.fm-skill-nav::-webkit-scrollbar {
  display: none;
}

.fm-skill-nav__btn {
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.fm-skill-nav__btn:hover {
  color: var(--c-text);
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}

.fm-skill-nav__btn--active {
  color: var(--c-bg);
  background: var(--c-accent);
  border-color: var(--c-accent);
}

.fm-skill-nav__btn--active:hover {
  color: var(--c-bg);
  background: var(--c-accent);
}

/* ─────────── FM Abilita Table Specifics ─────────── */
/* SPOSTATO IN css/player.css */

/* Sort links */
.fm-sort-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.fm-sort-link:hover {
  color: var(--c-accent);
  text-decoration: none;
}

.fm-sort-link--active {
  color: var(--c-accent);
}

/* Section count badge */
.fm-section__count {
  font-size: 11px;
  color: var(--muted);
  background: rgba(255,255,255,0.05);
  padding: 4px 10px;
  border-radius: 12px;
}

/* Game-page wrapper per pagine legacy che usano componenti moderni */
.game-page-wrapper {
  background: var(--c-bg);
  min-height: 50vh;
  padding-bottom: 24px;
}

.game-page-wrapper .game-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
}

/* Tablet (≥700px) → spostato in tablet.main.css */
/* Desktop (≥1280px) → spostato in desktop.main.css */


/* ═══════════════════════════════════════════════════════════════════════════
   POPUP CLOUD - Messaggi/Notifiche (Stile Minimal Glass)
   
   Mobile first (<700px): popup SOTTO l'icona
   Position: absolute per seguire l'icona quando si scrolla
   
   Override tablet (≥700px) → tablet.main.css
   Override desktop (≥1280px) → desktop.main.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container popup */
.popup-cloud {
  position: absolute;
  z-index: 10000;
  background: rgba(26, 40, 54, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--c-text);
  border: 2px solid var(--c-accent);
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  box-sizing: border-box;
  min-width: 280px;
  max-width: 320px;
  overflow: visible;
}

/* Freccia SOTTO (punta in alto) - mobile <700px */
.popup-cloud--bottom::before {
  content: "";
  position: absolute;
  top: -10px;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top: 0;
  border-bottom-color: var(--c-accent);
}

/* Freccia DESTRA (punta a sinistra) - tablet/desktop >=700px */
.popup-cloud--right::before {
  content: "";
  position: absolute;
  left: -10px;
  top: var(--arrow-top, 20px);
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-left: 0;
  border-right-color: var(--c-accent);
}

/* ─────────────────────────────────────────
   Popup Card (contenuto interno)
   ───────────────────────────────────────── */
.popup-card {
  padding: 14px 16px;
  text-align: left;
}

.popup-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.popup-card__title {
  margin: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Pallino animato "live" */
.popup-card__title::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--c-accent);
  border-radius: 50%;
  animation: popup-pulse 2s infinite;
}

@keyframes popup-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.popup-card__date {
  color: var(--muted);
  font-size: 11px;
}

.popup-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-accent) rgba(0,0,0,0.2);
}

.popup-card__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.8);
}

.popup-card__item:last-child {
  border-bottom: none;
}

.popup-card__icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
}

.popup-card__text {
  flex: 1;
  text-align: left;
}

/* Categorie icone messaggi */
.item-icon--injury { background: rgba(231, 76, 60, 0.2); }
.item-icon--card { background: rgba(241, 196, 15, 0.2); }
.item-icon--promo { background: rgba(39, 174, 96, 0.2); }
.item-icon--leave { background: rgba(155, 89, 182, 0.2); }
.item-icon--staff { background: rgba(52, 73, 94, 0.2); }
.item-icon--money { background: rgba(46, 204, 113, 0.2); }
.item-icon--national { background: rgba(52, 152, 219, 0.2); }
.item-icon--trophy { background: rgba(255, 201, 50, 0.25); }
.item-icon--info { background: rgba(52, 152, 219, 0.2); }

.popup-card__empty {
  text-align: center;
  color: var(--muted);
  padding: 24px 16px;
  font-size: 13px;
}

.popup-card__footer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}

.popup-card__link {
  display: inline-block;
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--c-accent) 0%, #d4a017 100%);
  color: var(--c-bg);
  text-decoration: none;
  font-weight: 700;
  font-size: 11px;
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.popup-card__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255,201,50,0.3);
}

/* Session expired */
.session-expired {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  text-align: center;
}

.session-expired__icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.9;
}

.session-expired__text {
  margin: 0 0 16px 0;
  color: var(--muted);
  font-size: 14px;
}

.session-expired__link {
  display: inline-block;
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--c-accent) 0%, #e6b52d 100%);
  color: var(--c-bg);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  border-radius: 8px;
  transition: transform 0.15s, box-shadow 0.15s;
}

.session-expired__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,201,50,0.3);
}

/* Scrollbar popup (Webkit) */
.popup-card__list::-webkit-scrollbar {
  width: 6px;
}

.popup-card__list::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}

.popup-card__list::-webkit-scrollbar-thumb {
  background-color: var(--c-accent);
  border-radius: 3px;
}

.popup-card__list::-webkit-scrollbar-thumb:hover {
  background-color: #ffda5a;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MESSAGGI PAGE - Design System
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tabs per utenti Premium */
.fm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px 0;
}

.fm-tabs--centered {
  justify-content: center;
}

/* Header stacked (titolo + sottotitolo in colonna) */
.fm-section__header--stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.fm-tabs__btn {
  padding: 8px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fm-tabs__btn:hover {
  background: rgba(255,201,50,0.1);
  border-color: rgba(255,201,50,0.3);
  color: var(--c-text);
}

.fm-tabs__btn.is-active {
  background: rgba(255,201,50,0.15);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.fm-tabs__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  background: var(--c-accent);
  color: #000;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}

/* XS: Tabs più compatti su schermi molto piccoli */
@media (max-width: 360px) {
  .fm-tabs__btn {
    padding: 6px 8px;
    font-size: 11px;
  }
  .fm-tabs__badge {
    margin-left: 4px;
    padding: 1px 4px;
    font-size: 9px;
  }
}

/* Gruppi messaggi (Premium tabs) */
.fm-messages-group {
  display: block;
}

.fm-messages-group.is-hidden {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MESSAGGI - Lista raggruppata per data
   ═══════════════════════════════════════════════════════════════════════════ */
.fm-messages-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
}

/* Empty state (tab senza messaggi) */
.fm-messages-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 26px 14px;
  text-align: center;
  color: var(--muted);
}

.fm-messages-empty__icon {
  font-size: 22px;
  line-height: 1;
  opacity: 0.9;
}

.fm-messages-empty__text {
  font-size: 13px;
  line-height: 1.4;
}

.fm-messages-date-group.is-hidden {
  display: none;
}

.fm-messages-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-border);
}

/* Data odierna - linea gialla */
.fm-messages-date--today {
  border-bottom-color: var(--c-accent);
  border-bottom-width: 2px;
}

.fm-messages-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fm-message-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  margin: 0 -8px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-text);
  transition: background 0.15s ease;
}

.fm-message-item:hover {
  background: rgba(255,255,255,0.03);
}

.fm-message-item.is-hidden {
  display: none;
}

.fm-message-text {
  flex: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Icone messaggi */
.msg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 0;
  font-size: 13px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Colori icone per categoria */
.msg-icon.item-icon--injury { background: rgba(231, 76, 60, 0.2); }      /* Rosso - Infortunio */
.msg-icon.item-icon--card { background: rgba(231, 76, 60, 0.25); }       /* Rosso scuro - Cartellino */
.msg-icon.item-icon--promo { background: rgba(255, 201, 50, 0.2); }      /* Oro - Promozione */
.msg-icon.item-icon--new { background: rgba(255, 215, 0, 0.25); }        /* Oro brillante - Nuovo */
.msg-icon.item-icon--scout { background: rgba(52, 152, 219, 0.2); }      /* Blu - Scoperta */
.msg-icon.item-icon--leave { background: rgba(155, 89, 182, 0.2); }      /* Viola - Partenza */
.msg-icon.item-icon--buy { background: rgba(39, 174, 96, 0.2); }         /* Verde - Acquisto */
.msg-icon.item-icon--staff { background: rgba(52, 73, 94, 0.3); }        /* Grigio blu - Staff */
.msg-icon.item-icon--money { background: rgba(46, 204, 113, 0.2); }      /* Verde - Finanza */
.msg-icon.item-icon--national { background: rgba(26, 188, 156, 0.2); }   /* Turchese - Nazionale */
.msg-icon.item-icon--trophy { background: rgba(255, 201, 50, 0.25); }    /* Oro - Trofeo */
.msg-icon.item-icon--contract { background: rgba(149, 165, 166, 0.2); }  /* Grigio - Contratti */
.msg-icon.item-icon--info { background: rgba(255, 255, 255, 0.1); }      /* Bianco - Info */


/* Bottone Mostra altri */
.fm-show-more {
  width: 100%;
  padding: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  color: var(--c-accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none; /* Rimuove effetto luce arancione di .btn */
}

.fm-show-more:hover {
  background: rgba(255,201,50,0.1);
  border-color: var(--c-accent);
  box-shadow: none;
}

/* Sottotitolo info messaggi */
.fm-section__subtitle {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════
   GAME MENU - Header, Dock, Tabs, Pannelli
   ═══════════════════════════════════════════════════════════════════ */

/* === GAME HEADER === */
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--c-border);
  position: relative;
  z-index: 1000; /* Sempre sopra backdrop e sidebar */
}

.game-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* Container per elementi a destra (dropdown + menu) */
.game-header__right {
  display: flex;
  align-items: center;
  gap: 6px; /* Gap piccolo tra dropdown e menu */
}

.game-header__logo {
  display: flex;
  align-items: center;
}

.game-header__logo-img {
  height: 22px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}

.game-header__logo-img--live {
  height: 28px;
}

@media (max-width: 344px) {
  .game-header__logo-img { height: 18px; }
  .game-header__logo-img--live { height: 24px; }
}

/* === BOTTONE MENU MOBILE (≤699px) === */
.game-menu-toggle {
  display: flex; /* Visibile su mobile */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--c-text);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  /* margin-left rimosso - ora gestito dal gap del container */
}

.game-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--c-accent);
}

.game-menu-toggle.is-active {
  background: var(--c-accent-dim);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.game-menu-toggle__icon {
  font-size: 18px;
  line-height: 1;
}

/* Nascondi su desktop (≥800px) - quando appare dock desktop */
@media (min-width: 800px) {
  .game-menu-toggle {
    display: none;
  }
}

/* === HEADER ACTIONS (Desktop Only) === */
.game-header__actions {
  display: none; /* Hidden on mobile - dock handles this */
}

@media (min-width: 800px) {
  .game-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
  }
  
  .game-header__action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--c-text);
    font-size: 13px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    text-decoration: none;
  }
  
  .game-header__action:hover {
    background: var(--c-surface);
    border-color: var(--c-border);
  }
  
  .game-header__action-icon {
    font-size: 20px;
  }
  
  
  .game-header__action-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #e74c3c;
    border-radius: 9px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
  }
  
  /* Action Dropdown Container */
  .game-header__action-dropdown {
    position: relative;
  }
  
}

/* Icone più grandi su schermi ampi */
@media (min-width: 1100px) {
  .game-header__action-icon {
    font-size: 22px;
  }
  
  .game-header__action {
    padding: 5px 12px;
  }
}

/* === HEADER DROPDOWN (Search, Notif, Forum) === */
@media (min-width: 800px) {
  .header-dropdown {
    position: relative;
  }

  .game-header__panel-trigger[data-chat-panel-trigger="chat"] {
    display: none;
  }
  
  .game-header__panel-trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--c-text);
    cursor: pointer;
    transition: background 0.15s;
  }

  .game-header__panel-trigger:hover,
  .game-header__panel-trigger.is-active {
    background: rgba(255,255,255,0.08);
  }

  .game-header__panel-icon {
    font-size: 20px;
  }

  .game-header__panel-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #e53935;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-dropdown__trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--c-text);
    cursor: pointer;
    transition: background 0.15s;
  }
  
  .header-dropdown__trigger:hover {
    background: rgba(255,255,255,0.08);
  }
  
  .header-dropdown__icon {
    font-size: 20px;
  }
  
  .header-dropdown__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #e53935;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Menu dropdown - centrato orizzontalmente */
  .header-dropdown__menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 280px;
    background: var(--panel);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    z-index: 9100;
    overflow: hidden;
  }
  
  .header-dropdown.is-open .header-dropdown__menu {
    display: block;
  }
  
  /* --- Search Dropdown --- */
  .header-dropdown__menu--search {
    min-width: 360px;
    padding: 16px;
  }
  
  .header-dropdown__search-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
  }
  
  .header-dropdown__tab {
    flex: 1;
    padding: 8px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    color: var(--c-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
  }
  
  .header-dropdown__tab:hover {
    background: rgba(255,255,255,0.1);
  }
  
  .header-dropdown__tab.is-active {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #101820;
  }
  
  .header-dropdown__input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    color: var(--c-text);
    font-size: 14px;
    outline: none;
    transition: border 0.15s, box-shadow 0.15s;
  }
  
  .header-dropdown__input:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(255,201,50,0.2);
  }
  
  .header-dropdown__submit {
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    background: linear-gradient(135deg, var(--c-accent), #ffd563);
    border: none;
    border-radius: 8px;
    color: #101820;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s;
  }
  
  .header-dropdown__submit:hover {
    transform: scale(1.02);
  }
  
  /* --- Notif Dropdown --- */
  .header-dropdown__menu--notif {
    min-width: 320px;
    max-width: 380px;
  }
  
  .header-dropdown__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-border);
    font-size: 13px;
    font-weight: 600;
  }
  
  .header-dropdown__header a {
    color: var(--c-accent);
    text-decoration: none;
    font-size: 12px;
  }
  
  .header-dropdown__body {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
  }
  
  .header-dropdown__empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
  }
  
  .header-dropdown__notif {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: var(--c-bg);
    border-radius: 8px;
    border-left: 3px solid var(--c-accent);
  }
  
  .header-dropdown__notif:hover {
    background: rgba(255,255,255,0.05);
  }
  
  .header-dropdown__notif.is-today {
    background: rgba(255,201,50,0.08);
  }
  
  .header-dropdown__notif-icon {
    font-size: 16px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
  }
  
  .header-dropdown__notif-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  
  .header-dropdown__notif-text {
    font-size: 12px;
    line-height: 1.3;
    color: var(--c-text);
    text-align: left;
    word-wrap: break-word;
  }
  
  .header-dropdown__notif-time {
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  /* --- Forum Dropdown --- */
  .header-dropdown__menu--forum {
    min-width: 200px;
    padding: 8px 0;
  }
  
  .header-dropdown__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--c-text);
    text-decoration: none;
    transition: background 0.15s;
  }
  
  .header-dropdown__link:hover {
    background: rgba(255,201,50,0.1);
  }
  
  .header-dropdown__link-icon {
    font-size: 16px;
  }
  
  .header-dropdown__link-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #e53935;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}

/* Icone più grandi su schermi ampi */
@media (min-width: 1100px) {
  .header-dropdown__icon {
    font-size: 22px;
  }
}

/* === GAME DROPDOWN (Utente) === */
.game-dropdown {
  position: relative;
}

.game-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  color: var(--c-text);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}

.game-dropdown__trigger:hover {
  background: var(--c-accent-dim);
  border-color: var(--c-accent);
}

.game-dropdown__icon {
  height: 14px;
  width: auto;
}

.game-dropdown__label {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-dropdown__arrow {
  font-size: 8px;
  color: var(--muted);
  transition: transform 0.2s;
}

.game-dropdown.is-open .game-dropdown__arrow {
  transform: rotate(180deg);
}

.game-dropdown__menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  width: max-content;
  min-width: 172px;
  max-width: min(280px, calc(100vw - 20px));
  background: var(--panel);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s;
  z-index: 100;
}

.game-dropdown.is-open .game-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.game-dropdown__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  color: var(--c-text);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
  white-space: normal;
  text-align: center;
}

.game-dropdown__item:hover {
  background: var(--c-accent-dim);
}

.game-dropdown__item--submenu {
  position: relative;
}

.game-dropdown__item-arrow {
  font-size: 10px;
  color: var(--muted);
}

.game-dropdown__item-label {
  /* flex: 1; rimosso per centratura */
}

.game-dropdown__item-flag {
  font-size: 16px;
}

.game-dropdown__submenu {
  position: absolute;
  right: 100%;
  top: 0;
  margin-right: 4px;
  width: max-content;
  background: var(--panel);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: all 0.2s;
}

.game-dropdown__item--submenu.is-open .game-dropdown__submenu,
.game-dropdown__item--submenu:hover .game-dropdown__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.game-dropdown__subitem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  color: var(--c-text);
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s;
  white-space: normal;
  text-align: center;
}

.game-dropdown__subitem:hover {
  background: var(--c-accent-dim);
}

.game-dropdown__subitem.is-active {
  color: var(--c-accent);
}

/* === GAME TABS (Desktop ≥700px) === */
.game-tabs {
  display: none;
  background: var(--panel);
  border-bottom: 1px solid var(--c-border);
}

@media (min-width: 800px) {
  .game-tabs {
    display: block;
  }
}

.game-tabs__bar {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.game-tabs__bar::-webkit-scrollbar {
  display: none;
}

.game-tabs__btn {
  flex-shrink: 0;
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  text-transform: uppercase;
}

.game-tabs__btn:hover {
  color: var(--c-text);
}

.game-tabs__btn.is-active {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

.game-tabs__submenu {
  max-height: 0;
  overflow: hidden;
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  transition: max-height 0.3s ease-out;
}

.game-tabs__submenu.is-open {
  max-height: 200px;
  overflow-x: auto;
}

.game-tabs__submenu-inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
}

.game-tabs__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--panel);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  color: var(--c-text);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
  text-transform: uppercase;
}

.game-tabs__link:hover {
  background: var(--c-accent-dim);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.game-tabs__link-icon {
  font-size: 14px;
}

/* Tablet 800-1023px: menu più compatto */
@media (min-width: 800px) and (max-width: 1023px) {
  .game-tabs__btn {
    padding: 6px 6px;
    font-size: 10px;
  }
  .game-tabs__submenu-inner {
    gap: 4px;
    padding: 8px 10px;
  }
  .game-tabs__link {
    padding: 5px 8px;
    font-size: 10px;
    gap: 3px;
  }
  .game-tabs__link-icon {
    font-size: 11px;
  }
}

/* Blocca scroll pagina quando pannello dock è aperto */
body.dock-panel-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Blocca scroll pagina quando sidebar è aperta */
body.sidebar-open {
  overflow: hidden;
}

/* === GAME SIDEBAR MENU (Mobile ≤699px) === */
/* Backdrop per chiudere sidebar - NON copre l'header */
.game-sidebar-backdrop {
  display: none;
  position: fixed;
  top: 56px; /* Inizia sotto l'header */
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.game-sidebar-backdrop.is-open {
  display: block;
  opacity: 1;
  pointer-events: all;
}

/* Aggiusta backdrop su schermi piccoli */
@media (max-width: 344px) {
  .game-sidebar-backdrop {
    top: 52px;
  }
}

/* Sidebar menu laterale - Si apre SOTTO l'header e termina SOPRA la dock */
.game-sidebar {
  position: fixed;
  top: 56px; /* Inizia sotto l'header (game-header: padding 10px top + 10px bottom + contenuto ~36px = ~56px) */
  bottom: 62px; /* Termina sopra la dock mobile (altezza dock: 62px) */
  right: -100%;
  width: 280px; /* Ridotto da 320px per occupare meno spazio */
  max-width: 75vw; /* Ridotto da 85vw */
  /* Non usare height: si adatta automaticamente tra top e bottom */
  background: var(--panel);
  border-left: 1px solid var(--c-border);
  z-index: 999;
  overflow-y: auto;
  transition: right 0.3s ease;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

/* Aggiusta top se header ha altezza diversa su schermi piccoli */
@media (max-width: 344px) {
  .game-sidebar {
    top: 52px; /* Header più compatto su schermi XS */
    /* bottom rimane 62px - si adatta automaticamente */
  }
}

.game-sidebar[aria-hidden="false"] {
  right: 0;
}

.game-sidebar__body {
  padding: 16px 0; /* Ridotto da 20px */
}

.game-sidebar__section {
  margin-bottom: 20px; /* Ridotto da 24px */
}

.game-sidebar__section:last-child {
  margin-bottom: 0;
}

.game-sidebar__section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px 0; /* Ridotto da 12px */
  padding: 0 16px; /* Ridotto da 20px */
  font-size: 11px; /* Ridotto a 11px */
  font-weight: 600;
  color: var(--c-accent);
  text-transform: uppercase; /* Già in maiuscolo */
  letter-spacing: 0.5px;
  text-align: left; /* Allineamento a sinistra */
}

.game-sidebar__section-icon {
  font-size: 13px; /* Ridotto da 14px */
}

.game-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Link indentati a destra per sembrare gruppo della categoria */
.game-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px; /* Ridotto da 12px */
  padding: 8px 16px 8px 48px; /* Ridotto padding: 8px invece di 10px, 16px/48px invece di 20px/52px */
  color: var(--c-text);
  text-decoration: none;
  transition: all 0.2s;
  border-left: 3px solid transparent;
  margin-left: 10px; /* Ridotto da 12px */
  text-align: left; /* Allineamento a sinistra */
}

.game-sidebar__link:hover {
  background: var(--c-accent-dim);
  border-left-color: var(--c-accent);
  color: var(--c-accent);
}

.game-sidebar__link-icon {
  font-size: 15px; /* Ridotto da 16px */
  width: 20px; /* Ridotto da 22px */
  text-align: center;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.game-sidebar__link-label {
  font-size: 11px; /* Ridotto a 11px */
  font-weight: 400;
  text-align: left; /* Allineamento a sinistra */
  text-transform: uppercase; /* Tutto in maiuscolo */
}

/* Nascondi sidebar su desktop (≥800px) - quando appare dock desktop */
@media (min-width: 800px) {
  .game-sidebar,
  .game-sidebar-backdrop {
    display: none !important;
  }
}

/* === GAME DOCK (Mobile ≤799px) === */
.game-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--panel);
  border-top: 1px solid var(--c-border);
  z-index: 1000; /* Stesso z-index dell'header per essere sempre visibile sopra sidebar e backdrop */
}

@media (min-width: 800px) {
  .game-dock {
    display: none;
  }
}

.game-dock__bar {
  display: flex;
  justify-content: space-around;
  padding: 6px 4px 10px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

.game-dock__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  min-width: 0;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 10px;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
  position: relative;
  transition: all 0.2s;
}

.game-dock__item:hover,
.game-dock__item.is-active {
  color: var(--c-accent);
  background: var(--c-accent-dim);
}

.game-dock__icon {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.game-dock__label {
  font-weight: 500;
}

.game-dock__badge {
  position: absolute;
  top: 3px;
  right: 5px;
  min-width: 14px;
  padding: 1px 4px;
  background: #ef4444;
  color: white;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  border-radius: 999px;
}

/* Coming Soon item nel dock */
.game-dock__item--coming-soon {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.game-dock__item--coming-soon:hover {
  background: none;
  color: var(--muted);
}

/* === DOCK PANELS === */
.game-dock-panel {
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  max-height: 0;
  background: var(--panel);
  border-top: 2px solid transparent;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, border-top-color 0.2s ease-out;
  z-index: 85;
}

.game-dock-panel.is-open {
  max-height: 50vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top-color: var(--c-accent);
}

.game-dock-panel--menu.is-open {
  max-height: 60vh;
}

@media (min-width: 800px) {
  /* Su desktop, i pannelli diventano overlay flottanti */
  .game-dock-panel {
    display: none;
    position: fixed;
    bottom: auto;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 480px;
    max-height: 70vh;
    border-radius: 16px;
    border: 1px solid var(--c-border);
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
    z-index: 9000;
  }
  
  .game-dock-panel.is-open {
    display: flex;
  }

}

.game-dock-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--c-border);
  background: var(--panel);
  flex-shrink: 0;
}

.game-dock-panel__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--c-accent);
}

.game-dock-panel__title-wrap,
.game-dock-panel__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.game-dock-panel__actions {
  margin-left: auto;
}

.game-dock-panel__open-link,
.game-dock-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.game-dock-panel__open-link {
  width: 28px;
  height: 28px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  color: var(--c-text);
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s;
}

.game-dock-panel__open-link:hover {
  background: var(--c-accent-dim);
  border-color: var(--c-accent);
}

.game-dock-panel__status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.8);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
  flex: 0 0 auto;
}

.game-dock-panel__status-indicator.is-ready {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

.game-dock-panel__status-indicator.is-loading {
  background: #ffc932;
  box-shadow: 0 0 0 3px rgba(255, 201, 50, 0.12);
}

.game-dock-panel__status-indicator.is-error {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.game-dock-panel__close {
  width: 28px;
  height: 28px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  color: var(--c-text);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.game-dock-panel__close:hover {
  background: var(--c-accent-dim);
  border-color: var(--c-accent);
}

.game-dock-panel__body {
  padding: 8px 16px 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.game-dock-panel__footer {
  padding: 12px 16px;
  border-top: 1px solid var(--c-border);
  text-align: center;
}

.game-dock-panel__footer-link {
  color: var(--c-accent);
  font-size: 13px;
  text-decoration: none;
}

.game-dock-panel__footer-link:hover {
  text-decoration: underline;
}

.game-dock-panel__empty {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

/* Panel Links (Forum) */
.game-dock-panel__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  margin: 0 -12px;
  color: var(--c-text);
  font-size: 12px;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s;
}

.game-dock-panel__link:hover {
  background: var(--c-accent-dim);
}

.game-dock-panel__link-icon {
  font-size: 20px;
}

.game-dock-panel__link-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 2px 6px;
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  border-radius: 10px;
}

/* Panel Notifiche */
.game-dock-panel__notif {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--c-bg);
  border-radius: 8px;
  border-left: 3px solid transparent; /* Bordo trasparente di default */
}

/* Bordo colorato solo per notifiche odierne */
.game-dock-panel__notif.is-today {
  border-left-color: var(--c-accent);
}

.game-dock-panel__notif-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.game-dock-panel__notif-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.game-dock-panel__notif-text {
  font-size: 12px;
  color: var(--c-text);
  line-height: 1.3;
  text-align: left;
  word-wrap: break-word;
}

.game-dock-panel__notif-time {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Panel Search */
.game-dock-search {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.game-dock-search__input {
  width: 100%;
  padding: 12px 14px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  color: var(--c-text);
  font-size: 14px;
  font-family: inherit;
}

.game-dock-search__input:focus {
  outline: none;
  border-color: var(--c-accent);
}

.game-dock-search__input::placeholder {
  color: var(--muted);
}

.game-dock-search__tabs {
  display: flex;
  gap: 8px;
}

.game-dock-search__tab {
  flex: 1;
  padding: 8px 10px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  color: var(--muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}

.game-dock-search__tab:hover,
.game-dock-search__tab.is-active {
  background: rgba(59,130,246,0.15);
  border-color: #3b82f6;
  color: #3b82f6;
}

.game-dock-search__btn {
  width: 100%;
  padding: 12px 16px;
  margin-top: 12px;
  background: linear-gradient(135deg, var(--c-accent) 0%, #e6b800 100%);
  border: none;
  border-radius: 8px;
  color: #1a1a2e;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}

.game-dock-search__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 201, 50, 0.3);
}

.game-dock-search__btn:active {
  transform: translateY(0);
}

.game-dock-search__results {
  min-height: 100px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

/* Panel Premium Message */
.game-dock-panel__premium {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 20px;
  text-align: center;
}

.game-dock-panel__premium-icon {
  font-size: 40px;
}

.game-dock-panel__premium p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

/* Panel Menu Grid */
.game-dock-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* 345-599px: 4 elementi per riga */
@media (min-width: 345px) {
  .game-dock-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 600-799px: responsive con minimo 100px */
@media (min-width: 600px) and (max-width: 799px) {
  .game-dock-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

.game-dock-grid__section {
  grid-column: 1 / -1;
  font-weight: 600;
  font-size: 11px;
  color: var(--c-accent);
  text-transform: uppercase;
  padding: 10px 0 4px;
  letter-spacing: 0.5px;
}

.game-dock-grid__section:first-child {
  padding-top: 0;
}

.game-dock-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  min-height: 60px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  color: var(--c-text);
  font-size: 10px;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s;
  text-transform: uppercase;
}

.game-dock-grid__item:hover {
  background: var(--c-accent-dim);
  border-color: var(--c-accent);
}

.game-dock-grid__icon {
  font-size: 18px;
  margin-bottom: 4px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.game-dock-grid__label {
  line-height: 1.2;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Padding bottom per contenuto con dock fissa */
.game-main--with-dock {
  padding-bottom: 80px;
}