/* CLM Scores – Frontend Custom (clm-scores.it)
   Caricato DOPO assets/css/frontend.css */

/* =====================================================
   Hotfix (mobile) – Match Details / Statistiche layout
   - Mantiene le 2 card (home/away)
   - Allinea icona / valore / sigla su colonne fisse
   - Aggiunge un po' di respiro sotto (evita troncature)
   ===================================================== */
@media (max-width: 560px){
  /* più distanza tra le due card (home/away) */
  .clms-md-stats-grid2{ gap: 16px !important; }

  /* layout interno: 4 righe ben allineate */
  .clms-md-stats-grid{ display:flex !important; flex-direction:column !important; gap: 14px !important; }
  .clms-md-stat{ display:flex !important; align-items:center !important; gap: 10px !important; }

  .clms-md-stat-icon{ flex: 0 0 28px !important; width: 28px !important; justify-content:center !important; }
  .clms-md-stat-val{ flex: 0 0 78px !important; width: 78px !important; text-align:right !important; }
  .clms-md-stat-lbl{ flex: 1 1 auto !important; text-align:left !important; white-space:nowrap !important; }

  /* evita che l'ultima card "Prossimo turno" venga coperta dalla bottom bar */
  #clms-match-details.clms-md{ padding-bottom: 130px !important; }
}

/* Background fullscreen */
body.clms-scores-fullscreen{
  margin:0 !important;
  padding:0 !important;
  background:#020824 !important;
}

/* =========================
   BARRA DATE (Risultati)
   =========================
   - Desktop: 5 badge (oggi al centro)
   - Mobile: 3 badge (nascondiamo 1° e 5°)
*/
@media (max-width: 767px){
  #clm-scores-app .clms-matchday-nav .clms-badge:first-child,
  #clm-scores-app .clms-matchday-nav .clms-badge:last-child{
    display:none !important;
  }
}

/* =========================
   CHAMP PAGE (Classifica/Partite/Stagioni) - badges affiancati
   ========================= */

#clm-scores-app .clms-champ-tabs{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  justify-content:space-between;
}
#clm-scores-app .clms-champ-tabs .clms-badge{
  flex:1 1 0;
  min-width:0;
  text-align:center;
}

#clm-scores-app .clms-champ-tabs .clms-badge{overflow:hidden;}
#clm-scores-app .clms-champ-tabs .clms-badge a,
#clm-scores-app .clms-champ-tabs .clms-badge .clms-badge-current{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  box-sizing:border-box;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#clm-scores-app .clms-champ-tabs .clms-tab-ico{display:inline-flex; width:20px; height:20px;}
#clm-scores-app .clms-champ-tabs .clms-tab-ico svg{width:20px;height:20px;}
#clm-scores-app .clms-champ-tabs .clms-tab-txt{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Attivo su giallo: icona scura */
#clm-scores-app .clms-champ-tabs .clms-badge .clms-badge-current{color:#000;}

@media (max-width: 520px){
  #clm-scores-app .clms-champ-tabs{gap:8px;}
  #clm-scores-app .clms-champ-tabs .clms-badge{flex:1 1 0;}
}

/* Campionato: niente sottolineatura e allineamento a sinistra su mobile */
#clm-scores-app a.clms-champ-title-link,
#clm-scores-app a.clms-champ-title-link:visited,
#clm-scores-app a.clms-champ-title-link:hover{
  text-decoration:none;
}

@media (max-width: 767px){
  #clm-scores-app .clms-champ-heading--with-cal{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  #clm-scores-app .clms-champ-heading--with-cal .clms-champ-title{
    text-align:left;
  }
}

/* Badge/icone click */
#clm-scores-app .clms-trophy{
  flex-shrink:0;
  cursor:pointer;
}

/* Header: titolo centrato, CLM a sinistra, PRO a destra */
#clm-scores-app .clms-header{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width:100%;
  box-sizing:border-box;
  /* spazio di sicurezza per i due badge laterali (CLM / PRO) */
  padding-left:72px;
  padding-right:72px;
  overflow:visible;
}
#clm-scores-app .clms-header .clms-logo{
  position:absolute;
  left:12px;
  left:calc(env(safe-area-inset-left) + 12px);
}
#clm-scores-app .clms-profile-btn{
  position:absolute;
  top:50%;
  right:12px;
  right:calc(env(safe-area-inset-right) + 12px);
  transform:translateY(-50%) !important;
  /* come badge CLM, ma giallo con testo blu */
  width:32px;
  height:32px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,0.35);
  /* stesso giallo delle pillole attive (navbar / date) */
  background:#ffc529;
  color:#0a2b5c;
  font-weight:900;
  font-size:12px;
  letter-spacing:.5px;
  padding:0;
  min-width:0;
  line-height:1;
}

/* LIVE indicator in header (solo pallino) */
#clm-scores-app .clms-header-right{
  display:flex;
  align-items:center;
}
#clm-scores-app .clms-live-dot-only{
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0; /* viene mostrato dopo il posizionamento JS per evitare flash */
  margin-left:0;
  margin-right:4px; /* più vicino al pill PRO (centrato tra logo e pill) */
  text-decoration:none;
}
#clm-scores-app .clms-live-dot-only .clms-live-dot {
  width: 14px;
  height: 14px;
  aspect-ratio: 1 / 1;
  background: #ff2d2d;
  border-radius: 50%;
  box-shadow: none;
  border: none;
  display: inline-block;
  animation: clmsLivePulseSoft 2.3s ease-in-out infinite;
}

@keyframes clmsLivePulseSoft {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(0.55); opacity: 0.35; }
  100% { transform: scale(1);   opacity: 1; }
}

@keyframes clmsLiveBlink{
  0%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(0.75); opacity:0.25; }
  100%{ transform:scale(1); opacity:1; }
}

/* Desktop: evita blocchi di scroll intermittenti */
@media (min-width: 900px){
  html, body.clms-scores-fullscreen{ overflow-y:auto !important; }
}


#clm-scores-app .clms-header .clms-title{
  margin:0 auto;
  text-align:center;
  display:block;
  /* il logo deve essere cliccabile in tutte le viste */
  pointer-events:auto;
}

/* Limita la dimensione del logo header (fix banner gigante su desktop) */
#clm-scores-app .clms-header img,
#clm-scores-app header img,
#clm-scores-app .clms-topbar img{
  max-height:60px;
  width:auto;
  max-width:92vw;
  display:block;
}
@media (max-width:767px){
  #clm-scores-app .clms-header img,
  #clm-scores-app header img,
  #clm-scores-app .clms-topbar img{max-height:50px;}
}

/* Rimuove lo stile "pill" precedente del PRO */
.clms-profile-btn{ box-shadow:0 8px 18px rgba(0,0,0,.25); }

/* Trofeo barra bianca risultati: più a sinistra, quasi in angolo */
#clm-scores-app .clms-champ-heading--with-cal{ padding-left:44px !important; }
#clm-scores-app .clms-trophy-link{
  position:absolute;
  left:12px;
  left:calc(env(safe-area-inset-left) + 12px);
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:10px;
}
#clm-scores-app .clms-champ-title-wrap{
  position:static;
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  padding-left:12px; /* trofeo più vicino al bordo */
}
#clm-scores-app .clms-champ-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Navbar: icona + testo centrati (icone SVG senza sfondi) */
#clm-scores-app .clms-navbar .clms-nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}
#clm-scores-app .clms-navbar .clms-nav-icon{
  display:flex;
  align-items:center;
  justify-content:center;
}
#clm-scores-app .clms-navbar .clms-nav-icon .clms-ico{
  width:26px;
  height:26px;
  display:block;
}
#clm-scores-app .clms-navbar .clms-nav-icon .clms-nav-img{
  width:28px;
  height:28px;
  display:block;
  object-fit:contain;
  /* di base: icona chiara su sfondo scuro */
  filter: brightness(0) invert(1);
  opacity:.9;
}
#clm-scores-app .clms-nav-item.is-active .clms-nav-icon .clms-nav-img{
  /* attiva: nera su badge giallo */
  filter: brightness(0) saturate(100%);
  opacity:1;
}
#clm-scores-app .clms-navbar .clms-nav-label{
  font-size:9px;
  line-height:1;
  white-space:nowrap;
}

/* NAVBAR (bottom) - allineamento definitivo: nessun elemento deve uscire fuori dalla barra */
#clm-scores-app .clms-navbar{
  box-sizing:border-box;
  height:60px;
  padding:8px 10px 10px;
  align-items:center;
}

/* =========================
   Campionato: navbar interna sopra la classifica (stessa altezza della navbar inferiore)
   ========================= */
#clm-scores-app .clms-card-subnav{
  padding:10px;
}
#clm-scores-app .clms-subnav{
  height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:rgba(0,0,0,.18);
  border-radius:22px;
  padding:8px;
}
#clm-scores-app .clms-subnav-item{
  flex:1;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-radius:16px;
  text-decoration:none;
  color:rgba(255,255,255,.88);
  font-weight:700;
  overflow:hidden;
}
#clm-scores-app .clms-subnav-item.is-active{
  background:var(--clm-yellow, #D6D14A);
  color:#06112a;
}
#clm-scores-app .clms-subnav-icon .clms-ico{
  width:22px;
  height:22px;
}
#clm-scores-app .clms-subnav-label{
  font-size:10px;
  line-height:1;
  white-space:nowrap;
}

/* Play-Off/Out: stesso stile delle altre icone (colore = currentColor) + frecce un po' più grandi */
#clm-scores-app .clms-ico-playoff{width:24px;height:24px;}

/* Campionato: riduci leggermente header bianco e typo per coerenza */
#clm-scores-app .clms-standings-card .clms-champ-heading{
  font-size:16px;
  padding:12px 14px;
}
#clm-scores-app .clms-navbar .clms-nav-item{
  box-sizing:border-box;
  height:100%;
  padding:0 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  overflow:hidden;
}
#clm-scores-app .clms-navbar .clms-nav-icon{
  line-height:0;
}

/* Tabs campionato: icona a sinistra del testo (SVG)
   IMPORTANTISSIMO: NON applicare questo stile ai badge della barra date (Risultati). */
#clm-scores-app .clms-champ-tabs .clms-badge a,
#clm-scores-app .clms-champ-tabs .clms-badge-current{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:100%;
  justify-content:center;
}
#clm-scores-app .clms-tab-ico .clms-ico{
  width:18px;
  height:18px;
  display:block;
}

/* Desktop/Tablet: navbar – label centrata VERTICALMENTE nei bottoni */
@media (min-width:768px){
  #clm-scores-app .clms-navbar .clms-nav-item{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:52px;
  }
  #clm-scores-app .clms-navbar .clms-nav-label{
    display:inline-flex;
    align-items:center;
    line-height:1 !important;
  }
}

/* Desktop: evita il ritorno di "box" arrotondati/blu dietro l'app */
@media (min-width:768px){
  body{ background:#0F407E !important; }
  #clm-scores-app{
    background:transparent !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
}

/* Classifiche: griglia stabile su desktop */
@media (min-width:768px){
  .clms-table-standings{width:100%;table-layout:fixed;}
  .clms-table-standings th:nth-child(1),.clms-table-standings td:nth-child(1){width:5%;text-align:center;}
  .clms-table-standings th:nth-child(2),.clms-table-standings td:nth-child(2){width:30%;text-align:left;padding-left:6px;}
  .clms-table-standings th:nth-child(n+3),.clms-table-standings td:nth-child(n+3){width:7%;text-align:center;}
}

/* Loghi in classifica */
#clm-scores-app .clms-table-standings img.clms-team-logo{
  width:22px !important;
  height:25px !important;
  margin-right:4px;
}

/* Meta gara centrata sotto punteggio */
#clm-scores-app .clms-match-meta{
  text-align:center !important;
  display:block;
  width:100%;
}
#clm-scores-app .clms-live-row{display:block !important;}

/* Pallino LIVE in navbar */
#clm-scores-app .clms-live-dot-nav{width:8px;height:8px;margin-right:6px;}

/* Navbar mobile: pillole centrali, testo no-wrap */
@media (max-width:767px){
  #clm-scores-app .clms-nav-item{
    flex:1 1 0 !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    height:46px !important;
    border-radius:18px !important;
    padding:4px 6px !important;
  }
  #clm-scores-app .clms-nav-label{line-height:1 !important;display:inline-block;white-space:nowrap;font-size:10px !important;}
  #clm-scores-app .clms-navbar .clms-nav-icon .clms-ico{width:26px !important;height:26px !important;}
}

/* Mobile: allineamento colonne risultati (nome+logo | score | logo+nome) */
@media (max-width:767px){
  #clm-scores-app .clms-match-teams{
    display:grid !important;
    grid-template-columns:minmax(0,1.45fr) auto minmax(0,1.45fr);
    align-items:center;
    column-gap:2px;
  }
  #clm-scores-app .clms-match-teams .clms-team-name{
    display:grid !important;
    grid-auto-flow:column;
    align-items:center;
    column-gap:2px;
    font-size:12px;
    font-weight:500;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #clm-scores-app .clms-match-teams .clms-team-home{
    grid-column:1;
    grid-template-columns:1fr auto;
    text-align:right;
    justify-content:flex-end;
  }
  #clm-scores-app .clms-match-teams .clms-team-away{
    grid-column:3;
    grid-template-columns:auto 1fr;
    text-align:left;
    justify-content:flex-start;
  }
  #clm-scores-app .clms-match-teams .clms-score{
    grid-column:2;
    justify-self:center;
    min-width:58px;
    text-align:center;
    font-size:14.5px;
    font-weight:600;
    color:#FFC529;
    white-space:nowrap;
    letter-spacing:.04em;
  }
  #clm-scores-app .clms-match-teams img.clms-team-logo{
    width:22px;
    height:22px;
    object-fit:contain;
  }
  #clm-scores-app .clms-match-row{padding:6px 0;}
  #clm-scores-app .clms-match-list .clms-champ-heading{
    margin-top:12px;
    margin-bottom:3px;
    padding-top:4px;
    border-top:1px solid rgba(255,255,255,.18);
    font-size:12px;
  }
  #clm-scores-app .clms-match-list .clms-champ-heading:first-of-type{
    margin-top:0;
    border-top:none;
    padding-top:0;
  }
}

/* =========================
   CHAMP PAGE (Classifica/Partite/Stagioni) - badges affiancati
   ========================= */
#clm-scores-app .clms-champ-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:space-between;
}
#clm-scores-app .clms-champ-tabs .clms-badge{
  flex:1 1 calc(33.333% - 10px);
  text-align:center;
}

@media (max-width: 767px){
  #clm-scores-app .clms-champ-tabs{
    gap:8px;
  }
  #clm-scores-app .clms-champ-tabs .clms-badge{
    flex:1 1 calc(33.333% - 8px);
  }
}

/* Titolo campionato: no underline + allineamento a sinistra su mobile */
#clm-scores-app a.clms-champ-title-link,
#clm-scores-app a.clms-champ-title-link:visited,
#clm-scores-app a.clms-champ-title-link:hover{
  text-decoration:none;
}

#clm-scores-app .clms-champ-heading--with-cal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#clm-scores-app .clms-champ-title{
  display:flex;
  align-items:center;
  gap:6px;
}

@media (max-width: 767px){
  #clm-scores-app .clms-champ-heading--with-cal{
    justify-content:space-between;
  }
  #clm-scores-app .clms-champ-title{
    justify-content:flex-start;
    text-align:left;
  }
}

/* =========================
   CHAMP VIEW UI
   ========================= */

/* Badges affiancati (Classifica / Partite / Stagioni) */
#clm-scores-app .clms-champ-tabs{
  display:flex;
  gap:10px;
  justify-content:space-between;
}
#clm-scores-app .clms-champ-tabs .clms-badge{
  flex:1 1 0;
  min-width:0;
  text-align:center;
}

#clm-scores-app .clms-champ-tabs .clms-badge{overflow:hidden;}
#clm-scores-app .clms-champ-tabs .clms-badge a,
#clm-scores-app .clms-champ-tabs .clms-badge .clms-badge-current{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  box-sizing:border-box;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#clm-scores-app .clms-champ-tabs .clms-tab-ico{display:inline-flex; width:20px; height:20px;}
#clm-scores-app .clms-champ-tabs .clms-tab-ico svg{width:20px;height:20px;}
#clm-scores-app .clms-champ-tabs .clms-tab-txt{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Attivo su giallo: icona scura */
#clm-scores-app .clms-champ-tabs .clms-badge .clms-badge-current{color:#000;}

/* Titolo campionato: niente sottolineatura, allineamento corretto */
#clm-scores-app .clms-champ-title-link{
  text-decoration:none !important;
}
#clm-scores-app .clms-champ-heading--with-cal{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
#clm-scores-app .clms-champ-title{
  display:flex;
  align-items:center;
  gap:8px;
}
#clm-scores-app .clms-champ-title-text{
  display:inline-block;
}
#clm-scores-app .clms-champ-title .clms-trophy{
  display:inline-flex;
  align-items:center;
}

@media (max-width: 767px){
  /* in mobile il nome campionato deve stare a sinistra */
  #clm-scores-app .clms-champ-heading--with-cal{
    justify-content:space-between;
  }
  #clm-scores-app .clms-champ-title{
    justify-content:flex-start;
  }
}

/* Rinvio partita: desktop "RINV." / mobile "rinv." */
#clm-scores-app .clms-postponed-mobile{display:none;}
#clm-scores-app .clms-postponed-desktop{display:inline;}
@media (max-width: 767px){
  #clm-scores-app .clms-postponed-mobile{display:inline;}
  #clm-scores-app .clms-postponed-desktop{display:none;}
}

/* CLM anti-bounce iOS: lo scroll è interno all'app */
#clm-scores-app,
#clm-scores-app * {
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
}

/* Se la lista scorre dentro .clms-content/.clms-page, spegni momentum iOS */
#clm-scores-app .clms-content,
#clm-scores-app .clms-page,
#clm-scores-app .clms-main {
  -webkit-overflow-scrolling: auto !important;
}



/* --- UI Fix: header più compatta (come vecchio server) --- */
.clms-header{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  min-height: 64px;
}
.clms-header .clms-logo-wrap img{
  max-height: 44px;
}

/* --- UI Fix: titolo campionato in card (sposta testo a destra, no overlap col trofeo) --- */
.clms-champ-title{
  padding-left: 8px;
}
.clms-champ-header{
  justify-content: flex-start;
  gap: 10px;
}
.clms-champ-header .clms-trophy{
  flex: 0 0 auto;
  margin-left: 6px;
}
.clms-champ-header .clms-champ-name{
  margin-left: 6px;
}

/* --- UI Fix: tabs Campionati (icone sopra testo, badge senza sovrapposizioni) --- */
.clms-champ-tabs{
  display: flex;
  gap: 14px;
}
.clms-champ-tabs .clms-badge{
  flex: 1 1 0;
  min-width: 0;
}
.clms-tab-stack{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
}
.clms-tab-ico .clms-ico{
  width: 22px;
  height: 22px;
  display: block;
}
.clms-tab-txt{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* su mobile stringiamo un pelo */
@media (max-width: 480px){
  .clms-champ-tabs{ gap: 10px; }
  .clms-tab-ico .clms-ico{ width: 20px; height: 20px; }
  .clms-tab-txt{ font-size: 11px; }
}

/* --- Badge selezionati: icone nere su giallo --- */
.clms-badge-current .clms-ico,
.clms-nav-active .clms-ico{
  color: #000 !important;
}

/* =========================
   CAMPIONATI - Cards (SENIOR / MASCHILI / FEMMINILI)
   Modifica grafica ONLY (non altera logiche)
   ========================= */
#clm-scores-app .clms-champs-page{
  width: 100%;
  padding: 16px 14px 34px;
  box-sizing: border-box;
}
#clm-scores-app .clms-champs-card{
  background: rgba(0,0,0,0.16);
  border-radius: 28px;
  box-shadow: 0 14px 38px rgba(0,0,0,0.25);
  overflow: hidden;
  margin: 0 0 16px 0;
}
#clm-scores-app .clms-champs-card-head{
  background: #ffffff;
  /* Blu navy come le altre intestazioni (es. card Risultati/Classifiche) */
  color: #061534;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
}
#clm-scores-app .clms-champs-sil{
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  opacity: 1;
  /* supporta sia <img> che <svg> */
  object-fit: contain;
}
#clm-scores-app .clms-champs-card-body{
  /* un po' più scuro per staccare la card dai background e far risaltare i badge */
  padding: 16px 14px 18px;
  background: rgba(0,0,0,0.52);
}
#clm-scores-app a.clms-champs-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 24px;
  text-decoration: none;
  color: #fff;
  /* Riempimento identico ai badge/card Risultati (blu navy) */
  background: #061534;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  margin: 0 0 8px 0; /* gap ridotto */
}
#clm-scores-app a.clms-champs-item:last-child{
  margin-bottom: 0;
}
#clm-scores-app .clms-champs-trophy{
  font-size: 18px;
  width: 26px;
  text-align: center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
#clm-scores-app .clms-champs-name{
  font-weight: 800;
  letter-spacing: .5px;
  font-size: 18px;
  text-transform: uppercase;
}


/* Ensure bottom navbar stays visible on Championships view */
#clm-scores-app[data-current-view="championships"] .clms-navbar{display:flex !important;}
body[data-current-view="championships"] #clm-scores-app .clms-navbar{display:flex !important;}


/* === LIVE header: avoid duplicate pills (show only inside indicator) === */

/* === Desktop/background: remove radial/gradient feel, keep solid blue under cards === */
html, body { background: #0F407E !important; }
#clm-scores-app { background: #0F407E !important; }
/* Live dot precise positioning */
.clms-header{ position: relative; }
.clms-live-dot-only{ position:absolute; z-index: 5; }

.clms-live-dot-only{ border:none !important; box-shadow:none !important; background:transparent !important; }

/* ============================================================
   CLM SCORES – FotMob spacing (logo ↔ score ↔ logo)
   Obiettivo: stesso identico “respiro” tra logo home↔punteggio e punteggio↔logo away,
   come FotMob: score della sola larghezza del testo, loghi “attaccati” al centro,
   e lati elastici senza troncare verso l’esterno.
   ============================================================ */
:root{
  --clms-fotmob-gap: 12px;          /* desktop/tablet */
  --clms-fotmob-gap-compact: 6px;  /* mobile ultra compatto */
}

/* Griglia 3 colonne: (home) (score) (away) */
#clm-scores-app .clms-match-teams{
  display:grid !important;
  grid-template-columns: minmax(0,1fr) max-content minmax(0,1fr) !important;
  align-items:center !important;
  column-gap: 0 !important; /* gap gestito dai margini specchio */
}

/* HOME: contenuto verso il centro (a destra) */
#clm-scores-app .clms-match-teams .clms-team-name.clms-team-home{
  justify-content:flex-end !important;
  text-align:right !important;
  margin-right: var(--clms-fotmob-gap) !important;
  min-width:0 !important;
}

/* AWAY: contenuto verso il centro (a sinistra) */
#clm-scores-app .clms-match-teams .clms-team-name.clms-team-away{
  justify-content:flex-start !important;
  text-align:left !important;
  margin-left: var(--clms-fotmob-gap) !important;
  min-width:0 !important;
}

/* Score/orario/live: SOLO larghezza del testo (FotMob) */
#clm-scores-app .clms-match-teams .clms-score,
#clm-scores-app .clms-match-teams .clms-time,
#clm-scores-app .clms-match-teams .clms-live{
  justify-self:center !important;
  text-align:center !important;
  white-space:nowrap !important;
  min-width: 0 !important;    /* <-- fondamentale: elimina i “buchi” */
  padding: 0 !important;
}

/* Extra: azzera eventuali margini laterali sui loghi, per avvicinarli ancora */
#clm-scores-app .clms-match-teams .clms-team-logo{
  margin: 0 !important;
}

/* Ultra-compact (< ~6") */
@media (max-width:390px){
  #clm-scores-app .clms-match-teams .clms-team-name.clms-team-home{ margin-right: var(--clms-fotmob-gap-compact) !important; }
  #clm-scores-app .clms-match-teams .clms-team-name.clms-team-away{ margin-left: var(--clms-fotmob-gap-compact) !important; }
  #clm-scores-app .clms-match-teams .clms-team-name{ gap: 4px !important; }
}


/* =========================
   CLM SCORES - FP pill (FotMob style)
   ========================= */
.clms-match-row{ position: relative; }
.clms-fp-pill{
  position:absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .3px;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.12);
  z-index: 2;
  pointer-events:none;
}
@media (max-width: 390px){
  .clms-fp-pill{ left: 2px; font-size: 11px; padding: 2px 7px; }
}

/* FP badge must not appear inside Championship → Partite view */
#clm-scores-app[data-current-view="champ"] .clms-fp-pill{
  display:none !important;
}


/* === CLM MOBILE FIX STATS & NEXT TURN (layout only) === */
@media (max-width: 768px) {

  /* Stats: keep two main columns, but stack items vertically inside each card */
  .clms-md-stats-grid2{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }

  .clms-md-stats-grid,
  .clms-md-stats-items{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .clms-md-stat,
  /* Mantieni le sigle (MEDIA PF, MEDIA PS, MAX WIN, MAX KO) allineate a colonna */
  .clms-md-stat-item{
    display:grid !important;
    grid-template-columns: 24px 72px 1fr !important; /* icona | valore | sigla */
    align-items:center !important;
    justify-content:unset !important;
    column-gap:10px !important;
  }

  .clms-md-stat-val{ justify-self:end !important; }
  .clms-md-stat-lbl{ justify-self:start !important; }

  .clms-md-stat .label,
  .clms-md-stat-label{
    font-size:11px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }

  .clms-md-stat .value,
  .clms-md-stat-value{
    font-size:18px !important;
  }

  /* Next turn: single row logo + date + home/away icon */
  .clms-md-next-row,
  .clms-md-next-item,
  .clms-next-row{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
  }

  .clms-md-next-row .date,
  .clms-md-next-date,
  .clms-next-date{
    white-space:nowrap !important;
  }

  .clms-md-next-row img,
  .clms-md-next-logo,
  .clms-next-logo{
    flex:0 0 auto !important;
  }

}


/* Header vertical align fix */
#clm-scores-app header,
#clm-scores-app .clms-header,
#clm-scores-app .clms-topbar{
  display:flex !important;
  align-items:center !important;
}


/* Next turn mobile layout (date + opponent logo + home/away icon) */
.clms-md-next-mobile{display:none;}

@media (max-width: 680px){
  .clms-md-next-desktop{display:none !important;}
  .clms-md-next-mobile{
    display:flex !important;
    flex-direction:column;
    gap:10px;
    padding:14px 14px;
  }
  .clms-md-next-m-date{
    font-weight:900;
    font-size:20px;
    line-height:1.1;
    letter-spacing:0.5px;
    text-align:center;
    white-space:nowrap;
  }
  .clms-md-next-m-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .clms-md-next-m-logo{
    width:56px;
    height:56px;
    object-fit:contain;
    flex:0 0 auto;
  }
  .clms-md-next-m-ico{
    font-size:30px;
    line-height:1;
    flex:0 0 auto;
  }
}

/* =====================================================
   Hotfix (mobile) – Match Details / Statistiche layout
   - Mantiene le 2 card (home/away)
   - Allinea icona / valore / sigla su colonne fisse
   - Aggiunge respiro sotto (evita troncature)
   ===================================================== */
@media (max-width: 560px){
  /* più spazio fra le 2 card */
  .clms-md-stats-grid2{
    gap:16px !important;
  }

  /* allineamento interno righe statistiche */
  .clms-md-stats-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
  }

  .clms-md-stat{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }

  .clms-md-stat-icon{
    width:28px !important;
    flex:0 0 28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .clms-md-stat-val{
    width:78px !important;
    flex:0 0 78px !important;
    text-align:right !important;
  }

  .clms-md-stat-lbl{
    flex:1 1 auto !important;
    text-align:left !important;
    white-space:nowrap !important;
  }

  /* evita che l'ultima card (Prossimo turno) venga tagliata dalla bottom bar */
  #clms-match-details.clms-md{
    padding-bottom:130px !important;
  }
}


/* --- FIX: icon on same line as value (desktop stats cards) --- */
@media (min-width:761px){
  .clms-md-stat{
    display:grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "val icon"
      "lbl lbl";
    align-items:center !important;
    column-gap:10px;
  }
  .clms-md-stat-ico{ grid-area: icon; justify-self:end; margin:0 !important; }
  .clms-md-stat-val{ grid-area: val; justify-self:start; }
  .clms-md-stat-lbl{ grid-area: lbl; justify-self:start; }
}

/* --- FIX: prevent duplicate stats on mobile: show only unified card --- */
@media (max-width:760px){
  .clms-md-stats-grid2--desktop{display:none !important;}
  .clms-md-stats-grid2--mobile{display:grid !important;}
}
@media (min-width:761px){
  .clms-md-stats-grid2--desktop{display:grid !important;}
  .clms-md-stats-grid2--mobile{display:none !important;}
}

/* === FIX header sempre fisso durante lo scroll ===
   Tocca solo la top bar CLM Scores senza alterare il resto.
*/
:root{
  --clms-fixed-header-space: 80px;
}

#clm-scores-app{
  padding-top: var(--clms-fixed-header-space) !important;
  box-sizing: border-box;
  scroll-padding-top: var(--clms-fixed-header-space);
}

#clm-scores-app .clms-header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  margin: 0 !important;
}


/* Match details editor modal */
.clms-md-center-edit{ cursor:pointer; }
.clms-md-editor-modal[hidden]{ display:none !important; }
.clms-md-editor-modal{ position:fixed; inset:0; z-index:10040; }
.clms-md-editor-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.48); }
.clms-md-editor-card{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92vw,520px); max-height:92vh; overflow:auto; background:#7ec8ff; color:#06224a; border-radius:28px; padding:20px 18px 18px; box-shadow:0 24px 60px rgba(0,0,0,.42); }
.clms-md-editor-close{ position:absolute; right:14px; top:10px; width:34px; height:34px; border:0; border-radius:999px; background:rgba(6,34,74,.10); color:#06224a; font-size:24px; line-height:1; cursor:pointer; }
.clms-md-editor-head{ text-align:center; margin-bottom:14px; }
.clms-md-editor-champ{ font-size:18px; font-weight:800; text-transform:uppercase; }
.clms-md-editor-date{ font-size:13px; color:rgba(6,34,74,.82); margin-top:4px; }
.clms-md-editor-grid{ display:grid; grid-template-columns:1fr 30px 1fr; gap:10px; align-items:start; }
.clms-md-editor-team{ text-align:center; }
.clms-md-editor-logo{ width:74px; height:74px; object-fit:contain; margin:0 auto 10px; display:block; }
.clms-md-editor-team-name{ font-size:18px; font-weight:700; margin-bottom:10px; }
.clms-md-editor-counter{ width:118px; margin:0 auto; background:rgba(6,34,74,.10); border-radius:26px; padding:10px 0; display:flex; flex-direction:column; align-items:center; gap:10px; }
.clms-md-editor-step{ border:0; background:transparent; color:#ffc529; font-size:26px; font-weight:800; line-height:1; cursor:pointer; }
.clms-md-editor-step.is-minute{ color:#06224a; font-size:20px; }
.clms-md-editor-value{ font-size:74px; font-weight:800; line-height:1; }
.clms-md-editor-vs{ align-self:center; justify-self:center; font-size:42px; font-weight:700; color:rgba(6,34,74,.82); }
.clms-md-editor-minute-wrap{ margin-top:16px; text-align:center; }
.clms-md-editor-minute-label{ font-size:15px; font-weight:700; margin-bottom:8px; }
.clms-md-editor-minute-box{ width:170px; margin:0 auto; border-radius:999px; background:rgba(6,34,74,.10); padding:10px 14px; display:flex; align-items:center; justify-content:space-between; }
.clms-md-editor-minute-value{ font-size:30px; font-weight:800; min-width:36px; text-align:center; }
.clms-md-editor-quarters{ margin-top:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.clms-md-editor-q{ width:100%; height:56px; border-radius:18px; border:1px solid rgba(6,34,74,.18); background:rgba(255,255,255,.55); color:#06224a; text-align:center; font-size:20px; font-weight:700; }
.clms-md-editor-note{ margin-top:10px; text-align:center; font-size:12px; color:rgba(6,34,74,.72); }
.clms-md-editor-actions{ margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.clms-md-editor-btn{ height:58px; border-radius:18px; border:0; font-size:18px; font-weight:800; cursor:pointer; }
.clms-md-editor-btn.is-live{ background:#0c2a63; color:#fff; }
.clms-md-editor-btn.is-final{ background:#f1f1f1; color:#1680ff; }
.clms-md-editor-btn:disabled{ opacity:.65; cursor:default; }
.clms-md-editor-msg{ min-height:20px; margin-top:12px; text-align:center; font-size:13px; color:rgba(6,34,74,.86); }
@media (max-width: 640px){
  .clms-md-editor-card{ width:min(94vw,520px); padding:18px 14px 16px; border-radius:24px; }
  .clms-md-editor-grid{ grid-template-columns:1fr 18px 1fr; gap:6px; }
  .clms-md-editor-logo{ width:62px; height:62px; }
  .clms-md-editor-team-name{ font-size:16px; }
  .clms-md-editor-counter{ width:96px; }
  .clms-md-editor-value{ font-size:58px; }
  .clms-md-editor-vs{ font-size:34px; }
  .clms-md-editor-quarters{ gap:8px; }
  .clms-md-editor-q{ height:52px; font-size:18px; }
}


/* FIX: editor modal truly centered above whole viewport */
.clms-md-editor-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:16px !important;
}
.clms-md-editor-modal[hidden]{ display:none !important; }
.clms-md-editor-backdrop{
  position:fixed !important;
  inset:0 !important;
}
.clms-md-editor-card{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  width:min(92vw,520px) !important;
  max-height:90vh !important;
  overflow:auto !important;
  margin:0 !important;
}

/* PRO red when logged in */
body.logged-in #clm-scores-app .clms-profile-btn{
  background:#ff2d2d !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.42) !important;
}

.clms-md-editor-input{
  width:86px !important;
  height:86px !important;
  border:0 !important;
  border-radius:22px !important;
  background:rgba(126,200,255,.22) !important;
  color:#06224a !important;
  font-size:68px !important;
  font-weight:800 !important;
  line-height:1 !important;
  text-align:center !important;
  padding:0 !important;
  box-sizing:border-box !important;
  appearance:textfield;
  -moz-appearance:textfield;
}
.clms-md-editor-input::-webkit-outer-spin-button,
.clms-md-editor-input::-webkit-inner-spin-button,
.clms-md-editor-minute-input::-webkit-outer-spin-button,
.clms-md-editor-minute-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.clms-md-editor-minute-input{
  width:84px !important;
  height:48px !important;
  border:0 !important;
  border-radius:14px !important;
  background:rgba(126,200,255,.22) !important;
  color:#06224a !important;
  font-size:34px !important;
  font-weight:800 !important;
  text-align:center !important;
  padding:0 !important;
  box-sizing:border-box !important;
}
body.logged-in #clm-scores-app .clms-profile-btn{
  pointer-events:none !important;
  cursor:default !important;
}

/* FINAL tune: quarter inputs slightly wider with right breathing room */
.clms-md-editor-quarters{gap:9px !important; padding-right:4px !important;}
.clms-md-editor-q{
  width:100% !important;
  min-width:0 !important;
  height:56px !important;
  padding:10px 8px !important;
  font-size:18px !important;
  box-sizing:border-box !important;
}

/* PRO logout overlay */
#clm-scores-app .clms-pro-menu-wrap{position:relative; display:inline-block; margin:0; padding:0;}
#clm-scores-app .clms-pro-menu-wrap summary{list-style:none;}
#clm-scores-app .clms-pro-menu-wrap summary::-webkit-details-marker{display:none;}
#clm-scores-app .clms-pro-menu-wrap[open] .clms-pro-menu{display:block;}
#clm-scores-app .clms-pro-menu{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:10060;
  background:#0a1d44;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  padding:8px;
  min-width:132px;
}
#clm-scores-app .clms-pro-menu-item{
  display:block;
  text-decoration:none;
  text-align:center;
  background:#ffc529;
  color:#0a2b5c;
  border-radius:12px;
  padding:12px 14px;
  font-weight:900;
}

/* v6 minor fixes */
.clms-md-editor-quarters{gap:8px !important; padding-right:8px !important;}
.clms-md-editor-q{padding:10px 10px !important; font-size:19px !important;}
#clm-scores-app .clms-pro-menu-wrap{position:absolute; top:50%; right:12px; right:calc(env(safe-area-inset-right) + 12px); transform:translateY(-50%) !important; display:block; z-index:20;}
#clm-scores-app .clms-pro-menu-wrap .clms-profile-btn{position:static !important; transform:none !important; cursor:pointer;}

/* FINAL7 tiny fixes */
#clm-scores-app .clms-pro-menu-wrap{position:absolute; top:50%; right:12px; right:calc(env(safe-area-inset-right) + 12px); transform:translateY(-50%) !important; z-index:10060;}
#clm-scores-app .clms-pro-menu-toggle{position:static !important; transform:none !important; cursor:pointer !important; pointer-events:auto !important;}
#clm-scores-app .clms-pro-menu{display:block; position:absolute; top:calc(100% + 8px); right:0; z-index:10061; background:#0a1d44; border:1px solid rgba(255,255,255,.14); border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.28); padding:8px; min-width:132px;}
#clm-scores-app .clms-pro-menu[hidden]{display:none !important;}

/* logout icon next to red PRO when logged */
body.logged-in #clm-scores-app .clms-header-right{
  position:absolute;
  top:50%;
  right:12px;
  right:calc(env(safe-area-inset-right) + 12px);
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:8px;
}
body.logged-in #clm-scores-app .clms-profile-btn{
  position:static !important;
  transform:none !important;
}
#clm-scores-app .clms-logout-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  color:#ffc529;
  text-decoration:none;
  background:transparent;
  border:0;
  padding:0;
}
#clm-scores-app .clms-logout-icon svg{
  width:28px;
  height:28px;
  display:block;
}


/* === 2026-04-10 surgical stability fix: header/logo/navbar/card-swipe === */
#clm-scores-app .clms-header{
  position:fixed !important;
  top:0 !important; left:0 !important; right:0 !important;
  height:80px !important; min-height:80px !important;
  padding:0 12px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}
#clm-scores-app .clms-logo-link{
  position:absolute !important;
  left:12px !important; top:50% !important;
  transform:translateY(-50%) !important;
  width:38px !important; height:38px !important;
  min-width:38px !important; min-height:38px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  line-height:1 !important;
  z-index:2 !important;
}
#clm-scores-app .clms-header-right{
  position:absolute !important;
  right:12px !important; top:50% !important;
  transform:translateY(-50%) !important;
  width:auto !important; min-width:38px !important; height:38px !important;
  display:flex !important; align-items:center !important; justify-content:flex-end !important;
  gap:6px !important;
  z-index:2 !important;
}
#clm-scores-app .clms-profile-btn{
  position:relative !important;
  top:auto !important; right:auto !important; left:auto !important;
  transform:none !important;
  width:38px !important; height:38px !important;
  min-width:38px !important; min-height:38px !important;
  flex:0 0 38px !important;
}
#clm-scores-app .clms-title.clms-title-logo{
  position:absolute !important;
  left:50% !important; top:50% !important;
  transform:translate(-50%, -50%) !important;
  width:auto !important;
  max-width:calc(100% - 116px) !important;
  min-width:0 !important;
  margin:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  text-align:center !important;
  z-index:1 !important;
}
#clm-scores-app .clms-header-logo-link{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:auto !important; height:36px !important;
  min-height:36px !important; line-height:0 !important;
  padding:0 !important; margin:0 !important;
  transform:none !important;
}
#clm-scores-app .clms-header-logo{
  display:block !important;
  width:auto !important; height:36px !important;
  min-height:36px !important; max-height:36px !important;
  max-width:min(54vw,420px) !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
  transform:none !important;
}
@media (max-width:767px){
  #clm-scores-app .clms-header{height:74px !important; min-height:74px !important;}
  #clm-scores-app .clms-header-logo-link{height:34px !important; min-height:34px !important;}
  #clm-scores-app .clms-header-logo{height:34px !important; min-height:34px !important; max-height:34px !important; max-width:54vw !important;}
  #clm-scores-app .clms-title.clms-title-logo{max-width:calc(100% - 108px) !important;}
}
#clm-scores-app .clms-navbar{
  position:fixed !important;
  left:10px !important; right:10px !important; top:auto !important;
  bottom:max(8px, env(safe-area-inset-bottom)) !important;
  min-height:60px !important;
  transform:none !important; translate:none !important;
  margin:0 !important;
}
html.clms-nav-leave #clm-scores-app .clms-navbar,
html.clms-nav-enter #clm-scores-app .clms-navbar{
  bottom:max(8px, env(safe-area-inset-bottom)) !important;
  transform:none !important;
}


/* === 2026-04-11 results swipe repaint fix === */
#clm-scores-app .clms-results-host{
  contain:none !important;
  content-visibility:visible !important;
  overflow-anchor:none !important;
}
#clm-scores-app .clms-results-pane{
  contain:none !important;
  content-visibility:visible !important;
}
#clm-scores-app .clms-results-host .clms-card,
#clm-scores-app .clms-results-host .clms-result,
#clm-scores-app .clms-results-host .clms-match-row{
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
@media (min-width: 768px){
  #clm-scores-app .clms-navbar .clms-nav-pill{
    top:0 !important;
    bottom:0 !important;
    margin-top:auto !important;
    margin-bottom:auto !important;
  }
}