/* Audio Match Center · stile della prova (tema scuro) */
:root {
  --fondo: #0B0D10;
  --superficie: #15181D;
  --superficie-alta: #1E2229;
  --bordo: #2C313A;
  --bordo-forte: #3A404B;
  --bordo-controllo: #646C7A;
  --testo: #F2F4F7;
  --testo-2: #A6ADB9;
  --testo-3: #8A919E;
  --voce: #C8FF3E;
  --voce-tenue: #24301A;
  --diretta: #FF4D5E;
  --blu: #5AB8FF;
  --giallo: #FFD23F;
  --titoli: 'Outfit', system-ui, sans-serif;
  --corpo: 'Figtree', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--testo); font-family: var(--corpo); font-size: 15px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
body { min-height: 100dvh; }
a { color: var(--blu); }
a:hover { color: #8FD0FF; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; }
:focus-visible { outline: 2px solid var(--voce); outline-offset: 2px; border-radius: 6px; }
.nascosto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pagina { max-width: 520px; margin: 0 auto; padding: 0 16px 32px; }

/* barra in alto */
.barra { position: sticky; top: 0; z-index: 5; background: rgba(11,13,16,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bordo); }
.barra-in { max-width: 520px; margin: 0 auto; height: 56px; padding: 0 16px; display: flex; align-items: center; gap: 12px; }
.marchio { font-family: var(--titoli); font-weight: 700; font-size: 17px; letter-spacing: -.01em; text-decoration: none; color: var(--testo); display: flex; align-items: center; gap: 8px; }
.marchio .punto { width: 10px; height: 10px; border-radius: 5px; background: var(--voce); }
.barra .spazio { flex-grow: 1; }
.icona-btn { width: 40px; height: 40px; border-radius: 20px; border: 1px solid var(--bordo-forte); background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--testo); text-decoration: none; }
.icona-btn:hover { background: var(--superficie); color: var(--testo); }

h1 { font-family: var(--titoli); font-weight: 700; font-size: 26px; line-height: 30px; margin: 20px 0 4px; letter-spacing: -.01em; }
h2 { font-family: var(--titoli); font-weight: 600; font-size: 18px; line-height: 24px; margin: 0; }
.sotto { color: var(--testo-2); font-size: 14px; margin: 0 0 16px; }
.sez { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--testo-3); margin: 22px 0 10px; text-transform: uppercase; }
.num { font-family: var(--titoli); font-weight: 700; font-variant-numeric: tabular-nums; }
.piccolo { font-size: 12px; color: var(--testo-2); }

/* pulsanti */
.btn { height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--bordo-controllo); background: transparent; color: var(--testo); font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--superficie); color: var(--testo); }
.btn-pr { background: var(--voce); border-color: var(--voce); color: #0B0D10; }
.btn-pr:hover { background: #D7FF6E; color: #0B0D10; }
.btn-picc { height: 34px; padding: 0 14px; font-size: 13px; border-radius: 17px; }
.btn[disabled] { opacity: .45; cursor: default; }
.btn-larg { width: 100%; }

/* campi */
.campo { width: 100%; height: 46px; border-radius: 12px; border: 1px solid var(--bordo-controllo); background: var(--superficie); padding: 0 14px; color: var(--testo); }
.campo::placeholder { color: var(--testo-3); }
textarea.campo { height: 90px; padding: 12px 14px; resize: vertical; }
label.etichetta { display: block; font-size: 13px; color: var(--testo-2); margin: 12px 0 6px; }
.msg { font-size: 13px; color: var(--testo-2); margin: 10px 0; }
.msg.err { color: #FF8A95; }
.msg.ok { color: var(--voce); }

/* chip di stato */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--superficie-alta); color: var(--testo-2); border: 1px solid var(--bordo); white-space: nowrap; }
.chip.live { background: rgba(255,77,94,.14); border-color: rgba(255,77,94,.4); color: var(--diretta); }
.chip.live::before { content: ''; width: 6px; height: 6px; border-radius: 3px; background: var(--diretta); animation: pulsa 1.6s ease-in-out infinite; }
.chip.voce { background: var(--voce-tenue); border-color: rgba(200,255,62,.35); color: var(--voce); }
.chip.replay { background: rgba(90,184,255,.12); border-color: rgba(90,184,255,.4); color: var(--blu); }
@keyframes pulsa { 50% { opacity: .35; } }

/* stemmi */
.stemma { width: 28px; height: 28px; border-radius: 14px; background: var(--superficie-alta); border: 1px solid var(--bordo); flex-shrink: 0; object-fit: contain; display: inline-flex; align-items: center; justify-content: center; font-family: var(--titoli); font-weight: 700; font-size: 12px; color: var(--testo-2); overflow: hidden; }
.stemma img { width: 100%; height: 100%; object-fit: contain; }
.stemma.grande { width: 52px; height: 52px; border-radius: 26px; font-size: 18px; }

/* righe partita (match center) */
.lista { display: flex; flex-direction: column; gap: 8px; }
.riga-partita { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--bordo); text-decoration: none; color: var(--testo); }
.riga-partita:hover { border-color: var(--bordo-forte); color: var(--testo); }
.riga-partita .ora { font-family: var(--titoli); font-weight: 600; font-size: 14px; color: var(--testo-2); text-align: center; }
.riga-partita .ora.min { color: var(--voce); }
.riga-partita .sq { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.riga-partita .sq > div { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.riga-partita .sq .nome-sq { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1; }
.riga-partita .gol { font-family: var(--titoli); font-weight: 700; font-size: 15px; width: 18px; text-align: right; }
.riga-partita .stanze { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.riga-partita .sq .stemma { width: 22px; height: 22px; font-size: 10px; }

.vuoto { padding: 24px 16px; border-radius: 16px; border: 1px dashed var(--bordo-forte); color: var(--testo-2); text-align: center; font-size: 14px; }

/* testata partita */
.testata { padding: 18px 0 8px; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 12px; }
.testata .lato { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-weight: 600; font-size: 14px; min-width: 0; }
.testata .ris { font-family: var(--titoli); font-weight: 700; font-size: 34px; line-height: 38px; font-variant-numeric: tabular-nums; text-align: center; }
.testata .stato { text-align: center; font-family: var(--titoli); font-weight: 600; font-size: 14px; color: var(--voce); margin-top: 2px; }
.testata .stato.fermo { color: var(--testo-2); }

/* card delle stanze (match room) */
.stanza-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--bordo); text-decoration: none; color: var(--testo); }
.stanza-card:hover { border-color: var(--bordo-forte); color: var(--testo); }
.stanza-card.libera { border-style: dashed; color: var(--testo-3); }
.avatar { width: 44px; height: 44px; border-radius: 22px; background: var(--superficie-alta); border: 2px solid var(--bordo-forte); display: inline-flex; align-items: center; justify-content: center; font-family: var(--titoli); font-weight: 700; font-size: 16px; flex-shrink: 0; color: var(--testo); }
.avatar.in-onda { border-color: var(--voce); box-shadow: 0 0 0 4px rgba(200,255,62,.12); }
.stanza-card .testi { flex-grow: 1; min-width: 0; }
.stanza-card .t1 { font-weight: 600; font-size: 15px; }
.stanza-card .t2 { font-size: 13px; color: var(--testo-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- podcast room ---------------- */
.stanza-pagina { display: flex; flex-direction: column; height: 100dvh; }
.striscia { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; min-width: 0; }
.striscia .ris { font-family: var(--titoli); font-weight: 700; font-variant-numeric: tabular-nums; }
.striscia .min { font-family: var(--titoli); font-weight: 600; color: var(--voce); font-size: 13px; }
.striscia .nomi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conduzione { max-width: 520px; width: 100%; margin: 0 auto; padding: 14px 16px 10px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--bordo); }
.conduzione .testi { flex-grow: 1; min-width: 0; }
.conduzione .nome { font-family: var(--titoli); font-weight: 700; font-size: 17px; }
.conduzione .titolo { font-size: 13px; color: var(--testo-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avviso { max-width: 520px; width: calc(100% - 32px); margin: 10px auto 0; padding: 8px 12px; border-radius: 10px; background: var(--superficie); border: 1px solid var(--bordo); font-size: 12px; color: var(--testo-2); display: flex; align-items: center; gap: 8px; }
.comandi { max-width: 520px; width: 100%; margin: 0 auto; padding: 10px 16px 0; display: flex; gap: 8px; flex-wrap: wrap; }

.flusso { flex-grow: 1; overflow-y: auto; }
.flusso-in { max-width: 520px; margin: 0 auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 8px; }

.chat { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 20px; padding: 2px 0; overflow-wrap: anywhere; }
.chat .chi { font-size: 12px; font-weight: 600; color: var(--testo-2); display: flex; align-items: center; gap: 6px; }
.chat .chi .badge { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--voce); }
.chat.mia .chi { color: var(--testo); }

.scrivi { border-top: 1px solid var(--bordo); background: var(--fondo); }
.scrivi-in { max-width: 520px; margin: 0 auto; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: center; }
.scrivi .campo { height: 44px; border-radius: 22px; }
.invia { width: 44px; height: 44px; border-radius: 22px; border: 0; background: var(--voce); color: #0B0D10; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.invia[disabled] { opacity: .45; }
.btn-card { height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--voce); background: var(--voce-tenue); color: var(--voce); font-weight: 700; font-size: 13px; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; flex-shrink: 0; }

/* card automatiche */
.ev { min-height: 36px; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--bordo); font-size: 13px; }
.ev .min { width: 30px; flex-shrink: 0; font-family: var(--titoli); font-weight: 500; color: var(--testo-3); }
.ev .tipo { font-weight: 600; flex-shrink: 0; }
.ev .tipo.gol { font-weight: 700; color: var(--voce); letter-spacing: .04em; }
.ev .chi { flex-grow: 1; color: var(--testo-2); min-width: 0; }
.ev .chi.forte { color: var(--testo); }
.ev .ris { font-family: var(--titoli); font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.cartellino { width: 11px; height: 15px; border-radius: 2px; display: block; margin: 0 2px; flex-shrink: 0; }
.cartellino.g { background: var(--giallo); }
.cartellino.r { background: var(--diretta); }
.cartellino.gr { background: linear-gradient(135deg, var(--giallo) 50%, var(--diretta) 50%); }

.sys { border-radius: 14px; background: var(--superficie); border: 1px solid var(--bordo); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.sys .lab { color: var(--testo-2); }
.lab { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--voce); }

/* card del podcaster */
.card { border-radius: 14px; background: var(--superficie-alta); border: 1px solid var(--bordo-forte); padding: 8px 10px; display: flex; flex-direction: column; gap: 7px; }
.card .nome { font-family: var(--titoli); font-weight: 700; font-size: 14px; line-height: 18px; }
.card .sub, .sys .sub { font-size: 11px; color: var(--testo-2); }
.box { border-radius: 8px; background: var(--superficie); border: 1px solid var(--bordo); padding: 5px 8px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.box .k { font-size: 10px; color: var(--testo-3); }
.box .v { font-family: var(--titoli); font-weight: 700; font-size: 16px; line-height: 20px; font-variant-numeric: tabular-nums; }
.box .d { font-size: 10px; color: var(--testo-2); }
.griglia { display: grid; gap: 8px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.barretta { height: 6px; border-radius: 3px; background: var(--bordo); overflow: hidden; display: block; }
.barretta > span { display: block; height: 6px; border-radius: 3px; }
.riga-cl { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 2px 0; color: var(--testo-2); }
.riga-cl .pos { width: 18px; color: var(--testo-3); font-family: var(--titoli); font-weight: 700; }
.riga-cl .n { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riga-cl .p { color: var(--testo); font-family: var(--titoli); font-weight: 700; }
.riga-cl.evid { background: var(--superficie-alta); margin: 0 -8px; padding: 2px 8px; border-radius: 8px; color: var(--testo); font-weight: 600; }
.card .riga-cl.evid { background: var(--superficie); }
.stat-righe { display: grid; grid-template-columns: 40px minmax(0,1fr) 40px; align-items: center; gap: 2px 10px; font-size: 11px; }
.stat-righe .c { text-align: center; color: var(--testo-2); }
.stat-righe .num { font-size: 13px; }
.stat-righe .dx { text-align: right; }
.pill { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: var(--superficie); border: 1px solid var(--bordo); color: var(--testo-2); }
.testo-card { font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------------- foglio dal basso (pannello e formazioni) ---------------- */
.velo { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.foglio { width: 100%; max-width: 520px; max-height: 88dvh; background: var(--fondo); border: 1px solid var(--bordo-forte); border-bottom: 0; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; }
.foglio-testa { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.foglio-testa h2 { flex-grow: 1; }
.foglio-corpo { overflow-y: auto; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.foglio-corpo > * { flex-shrink: 0; }
.foglio-piede { border-top: 1px solid var(--bordo); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; }
.foglio-piede .cosa { flex-grow: 1; font-size: 13px; color: var(--testo-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foglio-piede .cosa strong { color: var(--testo); }

.schede { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.schede::-webkit-scrollbar { display: none; }
.scheda { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--bordo-forte); background: transparent; font-size: 13px; font-weight: 600; color: var(--testo-2); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.scheda[aria-pressed="true"] { background: var(--testo); border-color: var(--testo); color: #0B0D10; }
.segmento { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--bordo); }
.segmento button { height: 36px; border-radius: 10px; border: 0; background: transparent; font-weight: 600; font-size: 13px; color: var(--testo-2); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.segmento button[aria-pressed="true"] { background: var(--superficie-alta); color: var(--testo); }
.giocatori { display: flex; flex-direction: column; gap: 4px; }
.gioc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; background: transparent; text-align: left; cursor: pointer; font-size: 14px; color: var(--testo); width: 100%; }
.gioc:hover { background: var(--superficie); }
.gioc[aria-pressed="true"] { background: var(--superficie); border-color: var(--voce); }
.gioc .n { width: 24px; font-family: var(--titoli); font-weight: 600; color: var(--testo-3); text-align: right; }
.gioc .nm { flex-grow: 1; min-width: 0; }
.gioc .v { font-family: var(--titoli); font-weight: 700; font-size: 13px; color: var(--testo-2); }
.tessere { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.tessera { padding: 12px; border-radius: 14px; border: 1px solid var(--bordo-forte); background: var(--superficie); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: 72px; color: var(--testo); }
.tessera:hover { border-color: var(--bordo-controllo); }
.tessera .t1 { font-weight: 600; font-size: 14px; }
.tessera .t2 { font-size: 12px; color: var(--testo-2); }
.tessera[disabled] { opacity: .45; cursor: default; }
.suggerite { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.suggerite::-webkit-scrollbar { display: none; }
.sugg { height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid rgba(200,255,62,.35); background: var(--voce-tenue); color: var(--voce); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.anteprima-tit { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--testo-3); text-transform: uppercase; margin-top: 6px; }
.caricamento { padding: 20px; text-align: center; color: var(--testo-2); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* formazioni schierate */
.campo-testa { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 600; }
.campo-testa .num { font-size: 13px; color: var(--testo-2); }
.campo-calcio { position: relative; width: 100%; aspect-ratio: 68 / 100; border-radius: 10px; overflow: hidden; background: #12161B; border: 1px solid var(--bordo); }
.campo-calcio .linee { position: absolute; inset: 0; width: 100%; height: 100%; }
.gioc-campo { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; width: 64px; }
.gioc-campo .pal { width: 22px; height: 22px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-family: var(--titoli); font-weight: 700; font-size: 10px; color: var(--fondo); }
.gioc-campo.casa .pal { background: var(--testo); }
.gioc-campo.ospiti .pal { background: var(--voce); }
.gioc-campo .cn { font-size: 10px; line-height: 12px; color: var(--testo); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.card .campo-calcio { max-width: 340px; align-self: center; }
.campo-mini { position: relative; width: 100%; aspect-ratio: 100 / 62; border-radius: 10px; overflow: hidden; background: #12161B; border: 1px solid var(--bordo); }
.campo-mini .linee { position: absolute; inset: 0; width: 100%; height: 100%; }
.pal-mini { position: absolute; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--titoli); font-weight: 700; font-size: 10px; color: var(--fondo); }
.pal-mini.casa { background: var(--testo); }
.pal-mini.ospiti { background: var(--voce); }