/* Oroscopo del padel - STILE: scheda con i dodici segni nel Profilo (il pulsante della Home usa .hbtn di style.css) */
.sgico{fill:none;stroke:var(--ac);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.segni{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px auto;max-width:480px}
.sg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:80px;padding:0 4px;border:1px solid var(--bd);border-radius:12px;background:var(--card);color:var(--tx);font:inherit;cursor:pointer}
.sg .sgico{width:34px;height:34px}
.sg{position:relative}
.sg .sgel{position:absolute;top:5px;right:5px;width:14px;height:14px;fill:none;stroke:var(--mut);color:var(--mut);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}   /* elemento del segno: scudo, lampadina, spade, volpe */
.sg[aria-expanded="true"] .sgel{stroke:var(--ac);color:var(--ac)}
.sg .sgn{display:block;font-size:12px;font-weight:600}
.sg .sgn,.sg .sge{line-height:1.15}
.sg .sge{display:block;font-size:11px;color:var(--mut);white-space:nowrap}
.sg .sgico{margin-bottom:3px}
.sg{justify-content:flex-start;gap:0;padding-top:10px}   /* nome e categoria sono sempre visibili dentro ogni box */
.sg.mio{border-color:color-mix(in srgb,var(--ac) 45%,transparent);background:var(--ac-soft)}   /* il proprio segno: bordo di un verde piu' tenue */
.sg[aria-expanded="true"]{border-color:var(--ac);box-shadow:0 0 0 2px var(--ac)}   /* segno selezionato: evidenziato col contorno */
.oroscopo h3.stog{margin:10px 0 6px}
.oroscopo .sbody p{margin:4px 0}
@media(min-width:1040px){   /* schermi larghi: i dodici segni su una sola riga (sotto, la griglia a 4 colonne: con la traduzione sotto il nome servono box piu' larghi) */
  .segni{grid-template-columns:repeat(12,1fr);gap:6px;max-width:none}
  .sg{height:72px;padding:0 2px}
  .sg{padding-top:8px}
  .sg .sgico{width:30px;height:30px}
  .sg .sgel{top:4px;right:4px;width:14px;height:14px}
  .sg .sgn{font-size:11px}
  .sg .sge{font-size:10px}
}
/* novità dell'oroscopo del giorno: stella nel pulsante della Home (sull'angolo) e nel titolo della sottosezione del Profilo */
.orinuovo{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:8px;vertical-align:middle;border-radius:50%;background:var(--ac);color:var(--on-ac,#fff)}
.orinuovo svg{width:12px;height:12px;fill:currentColor;stroke:none}
#orbtn{position:relative}
#orbtn .orinuovo{position:absolute;top:-7px;right:-7px;margin:0;width:20px;height:20px}
#orbtn .orinuovo svg{width:13px;height:13px;fill:currentColor;stroke:none}
/* bioritmi: grafico dei 31 giorni (15 prima e 15 dopo oggi) con le tre curve e legenda con le percentuali di oggi */
:root{--bio-f:#d93636;--bio-e:#2563eb;--bio-i:#16a34a}
:root[data-theme="dark"]{--bio-f:#ff6b6b;--bio-e:#6ea8fe;--bio-i:#4ade80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bio-f:#ff6b6b;--bio-e:#6ea8fe;--bio-i:#4ade80}}
.oroscopo .bio{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin:6px 0 0;padding-left:44px;font-weight:600}      /* 44px = margine sinistro dell'area del grafico (asse dei valori): la legenda parte dove inizia il grafico */
.oroscopo .bio span{display:inline-flex;align-items:center;gap:6px}
.bioico{width:22px;height:22px;flex:none;fill:none;stroke:var(--ac);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bioico.bio-f{stroke:var(--bio-f)}.bioico.bio-e{stroke:var(--bio-e)}.bioico.bio-i{stroke:var(--bio-i)}
.biolinea{display:inline-block;width:18px;height:3px;border-radius:2px}
.biolinea.bio-f{background:var(--bio-f)}.biolinea.bio-e{background:var(--bio-e)}.biolinea.bio-i{background:var(--bio-i)}
.biografico{width:100%;touch-action:pan-y;cursor:grab;user-select:none}
.biografico svg{display:block;width:100%;height:auto}
.biobarra{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}
.biobarra .biocentro{flex:1;display:flex;justify-content:center}
.biobarra button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;line-height:18px}      /* stessa altezza (30 px) per «Oggi» e per le frecce: la riga di testo non e' piu' alta dell'icona */
.biobarra button[hidden]{display:none}
.biobarra svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.biografico .bio-gr{stroke:var(--bd);stroke-width:1}
.biografico .bio-gr.zero{stroke:var(--mut);stroke-width:1;opacity:.6}
.biografico .bio-et{fill:var(--mut);font-size:12px}
.biografico .bio-tacca{stroke:var(--mut);stroke-width:1;opacity:.7}
.biografico .bio-mese{stroke:var(--mut);stroke-width:1.5;stroke-linecap:round}
.biografico .bio-mese.dx{stroke:var(--ac)}
.biografico .bio-et.dx{fill:var(--ac)}
.biografico .bio-et.oggi{fill:var(--tx);font-weight:700}
.biografico .bio-torneo{stroke:var(--ac);stroke-width:1.4;stroke-dasharray:4 4;opacity:.6}
.biografico .bio-oggi{stroke:var(--tx);stroke-width:1.2;stroke-dasharray:4 4}
.biografico .bio-cv{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.biografico .bio-cv.bio-f{stroke:var(--bio-f)}.biografico .bio-pt.bio-f{fill:var(--bio-f)}
.biografico .bio-cv.bio-e{stroke:var(--bio-e)}.biografico .bio-pt.bio-e{fill:var(--bio-e)}
.biografico .bio-cv.bio-i{stroke:var(--bio-i)}.biografico .bio-pt.bio-i{fill:var(--bio-i)}
.biografico .bio-pt{stroke-width:2;stroke:var(--card)}
/* testo di «Oroscopadel del giorno» (lo compone il server) sopra le percentuali dei bioritmi */
.oroscopo .sbody p.ortesto{margin:0 0 16px;line-height:1.5}      /* spazio tra il testo e la riga dei pulsanti del grafico (specificita' sopra .sbody p) */
/* entrando dal pulsante della Home il box si porta in vista sotto l'intestazione fissa */
.card.oroscopo{scroll-margin-top:110px}
@media(max-width:480px){      /* smartphone: legenda piu' compatta, per restare su una riga dopo il rientro */
  .oroscopo .bio{gap:6px 12px}
  .oroscopo .bio span{gap:4px}
  .biolinea{width:12px}
}

/* pagina Partite (desktop): icone dei segni dei due giocatori a destra di ogni coppia */
.cpsg{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.cpi{display:inline-flex;align-items:flex-end;gap:1px;flex:none}      /* i quattro segni vicini e allineati al bordo inferiore */
.sgm{display:inline-flex;align-items:flex-end}
.sgm .sgico{display:block}
.sgm .sgico{width:16px;height:16px}
.sgm.asc .sgico{width:13px;height:13px;stroke:var(--mut)}      /* ascendente: grigio neutro e un po' piu' piccolo del segno */
.orcalc{font-weight:400;font-size:.85em;opacity:.75;white-space:nowrap}