/* Classifica pubblica da smartphone (DESIGN/classifica2.jpg) — pagina separata
   dalla classifica per TV a bordo ring (classifica.html/css/js), che resta
   intatta: qui niente rotazione/auto-scala, solo un layout a tab pensato per
   uno schermo verticale in mano. Riusa .pagina-header/.pagina-nota/
   .home-eyebrow-riga di home.css, qui solo i componenti nuovi di questa vista. */

.classifica-avviso {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--raggio-pillola);
  background: rgba(89, 145, 250, 0.12);
  color: var(--fg);
  font-size: 0.82rem;
  font-weight: 600;
}

.classifica-avviso-pallino {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accento-vivo);
}

/* Stesso identico linguaggio dei filtri del catalogo (.catalogo-filtri/
   .catalogo-filtro in home.css, richiesto da Mirco 2026-08-28 per coerenza
   con lo stile dell'app): pillole singole con bordo proprio, dimensionate al
   contenuto, non un contenitore unico "a interruttore" a larghezza piena. */
.classifica-tab-gruppo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.classifica-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: var(--raggio-pillola);
  border: 1px solid var(--bordo-marcato);
  background: var(--superficie);
  color: var(--fg);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

/* Stessa capsula colorata di .simbolo-sesso sulla classifica TV (classifica.css,
   duplicata qui per lo stesso motivo delle altre — vedi nota in cima al file):
   colore fisso per sesso, indipendente dallo stato attivo/inattivo del tab. */
.classifica-tab-simbolo {
  display: inline-block;
  flex-shrink: 0;
  width: 0.4rem;
  height: 0.95rem;
  margin-right: 0.4rem;
  border-radius: 999px;
}

.classifica-tab-simbolo--m {
  background: rgb(170, 216, 230);
}

.classifica-tab-simbolo--f {
  background: rgb(255, 164, 184);
}

.classifica-tab.attivo {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

.classifica-tab:focus-visible {
  outline: 2px solid var(--accento-vivo);
  outline-offset: 2px;
}

/* ========================================================================
   "Ora in ring": stessa mesh hero della classifica TV (classifica.css
   .classifica-in-ring, stessi colori/angolo REALI del mockup DESIGN/handoff)
   — duplicata invece che condivisa: questa pagina resta volutamente
   indipendente dalla classifica TV (vedi nota in cima al file). Card unica,
   sempre in cima, NON divisa per sesso (a differenza di Giudicati/Da
   giudicare sotto, filtrati dal tab). Allineamento grafico alla classifica
   pubblica richiesto da Mirco 2026-08-29.
   ======================================================================== */
.classifica-in-ring {
  position: relative;
  overflow: hidden;
  /* clip-path oltre a overflow:hidden — bug noto di Safari/WebKit mobile:
     overflow:hidden + border-radius non ritaglia sempre i figli con
     filter:blur() (__glow-a/__glow-b sotto), che sfuggono agli angoli
     arrotondati (segnalato da Mirco 2026-08-29, stessa correzione di
     home.css .home-hero-mesh — stesso identico componente duplicato). */
  clip-path: inset(0 round 28px);
  isolation: isolate; /* richiesto da mix-blend-mode sulla grana sotto */
  margin-top: 1.1rem;
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(144, 46, 91, 0.18);
}

.classifica-in-ring__base,
.classifica-in-ring__noise {
  position: absolute;
  inset: 0;
}

.classifica-in-ring__base {
  background: linear-gradient(158deg, rgb(255, 144, 160) 0%, rgb(255, 164, 184) 38%, rgb(200, 185, 210) 72%, rgb(145, 205, 222) 100%);
}

.classifica-in-ring__glow-a {
  position: absolute;
  right: -70px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  opacity: 0.5;
  filter: blur(10px);
  background: radial-gradient(circle at 38% 32%, rgb(255, 50, 201) 0%, rgb(190, 100, 220) 52%, rgba(39, 138, 255, 0) 100%);
}

.classifica-in-ring__glow-b {
  position: absolute;
  left: -60px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  opacity: 0.45;
  filter: blur(12px);
  background: linear-gradient(161deg, rgb(252, 162, 132) 10%, rgb(39, 138, 255) 92%);
}

.classifica-in-ring__noise {
  background: url("/assets/hero-grana.png") top left / 40px 56px repeat;
  mix-blend-mode: overlay;
  opacity: 0.6;
  pointer-events: none;
}

.classifica-in-ring__content {
  position: relative;
  padding: 1.1rem 1.3rem 1.3rem;
  color: #ffffff;
  text-align: left;
}

.classifica-in-ring__riga-alta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.classifica-in-ring__badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.classifica-in-ring__cat {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.classifica-in-ring__nome {
  margin: 0.7rem 0 0;
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.08;
}

.classifica-in-ring__sottotitolo {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

/* Puntino "diretta" — stesso pattern di classifica.css .pallino-live (qui
   duplicato invece che condiviso: questa pagina resta volutamente
   indipendente dalla classifica TV, vedi nota in cima al file).
   currentColor eredita il bianco del testo del badge. */
.classifica-in-giudizio-live {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: currentColor;
  animation: classifica-in-giudizio-pulsazione 1.6s ease-in-out infinite;
}

@keyframes classifica-in-giudizio-pulsazione {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .classifica-in-giudizio-live {
    animation: none;
  }
}

/* Genealogia della card "in ring": blocco a parte sotto la mesh hero (che non
   ha spazio per contenerla, esattamente come sulla TV) — voci a capo libero
   invece di una frase con "·" incollato, etichetta in grassetto invece che
   tutta maiuscola/spaziata (qui c'è meno spazio che su uno schermo TV,
   l'OVERHEAD del brand sarebbe illeggibile a questa dimensione). */
.classifica-in-giudizio-genealogia {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.3rem;
  column-gap: 1rem;
  margin-top: 0.6rem;
  padding: 0.85rem 1.05rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--superficie);
  font-size: 0.82rem;
  color: var(--fg-attenuato);
}

.classifica-in-giudizio-genealogia strong {
  font-weight: 700;
  color: var(--fg);
}

.classifica-classe-blocco {
  margin-bottom: 1.3rem;
}

.classifica-classe-blocco:last-child {
  margin-bottom: 0;
}

.classifica-classe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.classifica-classe-nome {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--fg);
}

.classifica-classe-pallino {
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}

.classifica-classe-conteggio {
  font-size: 0.78rem;
  color: var(--fg-attenuato);
}

.classifica-righe {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.classifica-riga {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--raggio);
  border: 1.5px solid var(--bordo);
  background: var(--superficie);
}

/* Riga del 1° di classe: sfondo e bordo dorati per distinguerla a colpo
   d'occhio, non solo il badge — stessi valori esatti di classifica.css
   .riga-classifica--oro sulla TV (duplicati qui, vedi nota in cima al file). */
.classifica-riga--oro {
  background: rgb(255, 250, 238);
  border-color: rgb(255, 215, 140);
}

.classifica-riga--oro .classifica-punteggio {
  color: rgb(150, 104, 18);
}

/* Badge quadrato con angoli arrotondati (non più un cerchio) e colori
   oro/argento/bronzo per il podio DI CLASSE (1°/2°/3°, mai un confronto tra
   classi diverse, CLAUDE.md §4b) — stessi valori esatti campionati per la
   classifica TV (classifica.css), duplicati qui. Dal 4° posto in poi resta
   neutro invece del corallo pieno di prima (che non distingueva i primi tre). */
.classifica-piazzamento {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--fg-attenuato);
  background: rgb(245, 245, 243);
}

.classifica-piazzamento--oro {
  background: rgb(255, 215, 140);
  color: rgb(150, 104, 18);
}

.classifica-piazzamento--argento {
  background: rgb(232, 234, 238);
  color: rgb(52, 58, 68);
}

.classifica-piazzamento--bronzo {
  background: rgb(245, 214, 192);
  color: rgb(112, 64, 36);
}

.classifica-corpo {
  flex: 1;
  min-width: 0;
}

.classifica-nome {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--fg);
  /* Normalizzazione visiva: i nomi arrivano da iscritti.xlsx con maiuscole/minuscole
     incoerenti — uniformati in maiuscolo senza toccare il dato reale, richiesto da
     Mirco 2026-08-27 (stessa regola in classifica.css per la TV). */
  text-transform: uppercase;
}

.classifica-dettagli {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: var(--fg-attenuato);
}

.classifica-punteggio {
  flex-shrink: 0;
  padding: 0.4rem 0.75rem;
  border-radius: var(--raggio-pillola);
  border: 1px solid var(--bordo-marcato);
  background: var(--bg);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--fg);
}

/* Da giudicare: stessa riga, versione smorzata — nessun piazzamento, nessun
   punteggio, solo numero di catalogo. */
.classifica-riga.in-attesa {
  background: var(--bg);
  border-color: transparent;
}

.classifica-numero-attesa {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--fg-attenuato);
  background: var(--bordo);
}

.classifica-riga.in-attesa .classifica-nome {
  color: var(--fg-attenuato);
  font-weight: 600;
}

/* Risultati finali (evento_concluso, richiesto da Mirco 2026-09-04): card
   semplici nello stesso stile delle righe già usate per "Giudicati" sopra —
   niente mesh come sulla TV, scelta esplicita per restare leggeri e coerenti
   col resto delle pagine mobile del sito (sponsor.html, catalogo, ecc.). */
.classifica-risultati-finali {
  margin-top: 0.2rem;
}

.classifica-finale-riga--grande {
  padding: 1rem 1.1rem;
}

.classifica-finale-icona {
  width: 2.5rem;
  height: 2.5rem;
}