/* Lotto Lite · sezione Statistiche (generata da sito_strumenti\genera_statistiche_lite.py: NON modificare a mano).
   Tema scuro/blu notte di Lotto Lite. Pezzi: base + marchio + menu/piè di pagina, regole «articolo» del sito
   principale (styles.css), e statistiche.css del sito principale scurito. */
:root{
  --bg-dark:#0a0e14; --bg-card:#161b22; --bg-surface:#1c2128; --bg-hover:#232831;
  --border:#30363d; --border-light:#3a4150;
  --text:#f0f6fc; --text-2:#b1bac4; --text-3:#8b949e; --text-mute:#6e7681;
  --cyan:#00d9ff; --blue:#0396c0; --green:#3ddc84; --red:#ff3366; --gold:#ffb800; --purple:#a371f7;
  --shadow-md:0 4px 24px rgba(0,0,0,.4); --shadow-lg:0 12px 48px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;color-scheme:dark}
body{background:var(--bg-dark);color:var(--text);font-family:'Inter',system-ui,sans-serif;line-height:1.6;overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
::selection{background:var(--cyan);color:#06222b}

/* marchio */
.logo{display:inline-flex;align-items:center;gap:10px;line-height:1;text-decoration:none;color:var(--text)}
.logo .bolt{width:23px;height:27px;flex:none;filter:drop-shadow(0 0 7px rgba(0,217,255,.5))}
.wm{display:inline-flex;align-items:baseline;gap:.34em;font-size:18px;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.wm b{font-weight:800;color:var(--text)}
.wm i{font-style:normal;font-weight:500;color:var(--cyan)}

/* menu */
.ln{position:sticky;top:0;z-index:20;background:rgba(10,14,20,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.ln-in{max-width:1280px;margin:0 auto;padding:0 32px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.ln-voci{display:flex;gap:26px;list-style:none;font-size:14.5px;font-weight:600;color:var(--text-2);align-items:center}
.ln-voci a{text-decoration:none}
.ln-voci a:hover{color:var(--cyan)}
.ln-voci a.attivo{color:var(--text);font-weight:800}
.ln-voci a.pro-tab{color:var(--cyan);font-weight:800;padding:7px 14px;border:1px solid rgba(0,217,255,.45);border-radius:999px;background:rgba(0,217,255,.1)}
.ln-voci a.pro-tab:hover{background:rgba(0,217,255,.2)}
@media(max-width:640px){
  .ln-in{padding:0 16px;height:58px}
  .wm{font-size:15px}
  .ln-voci{gap:12px;font-size:13px}
  .ln-voci a.pro-tab{padding:6px 10px}
}
@media(max-width:400px){ .ln-voci li:first-child{display:none} .ln-voci{gap:10px} .wm{letter-spacing:.1em} }

/* piè di pagina */
.lf{border-top:1px solid var(--border);margin-top:56px;padding:38px 0 46px;background:#10151f;font-size:13.5px;color:var(--text-3)}
.lf-in{max-width:1280px;margin:0 auto;padding:0 32px;display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between}
.lf-in>div:first-child{max-width:620px}
.lf .logo{margin-bottom:12px}
.lf p{line-height:1.55;margin-bottom:6px}
.lf a:hover{color:var(--cyan)}
@media(max-width:640px){.lf-in{padding:0 20px}}

/* testata: solo blu (il sito principale ha anche un viola) */
.art-testa{background:radial-gradient(900px 320px at 12% 0%,rgba(0,217,255,.14),transparent 62%),radial-gradient(760px 320px at 92% 30%,rgba(3,150,192,.16),transparent 62%),var(--bg-card)!important}

/* ═══ regole «articolo» del sito principale ═══ */
.articolo { max-width: 760px;
    margin: 0 auto;
    padding: 8px 32px 100px; }
.articolo-testa { text-align: center; margin-bottom: 40px; }
.articolo-meta { font-size: 13px;
    font-weight: 700;
    color: var(--text-3);
    margin-bottom: 14px; }
.articolo-meta span + span::before { content: '·'; margin: 0 8px; }
.articolo h1 { font-size: clamp(28px, 4.5vw, 40px);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 14px; }
.articolo-lead { font-size: 17px;
    color: var(--text-2);
    line-height: 1.6; }
.articolo-corpo { font-size: 16px; line-height: 1.75; color: var(--text-2); }
.articolo-corpo h2 { font-size: 24px;
    font-weight: 800;
    color: var(--text);
    margin: 40px 0 16px; }
.articolo-corpo h3 { font-size: 19px;
    font-weight: 800;
    color: var(--text);
    margin: 28px 0 12px; }
.articolo-corpo p { margin-bottom: 18px; }
.articolo-corpo ul, .articolo-corpo ol { margin: 0 0 18px 22px; }
.articolo-corpo li { margin-bottom: 8px; }
.articolo-corpo strong { color: var(--text); }
.articolo-corpo a { color: var(--cyan); }
.articolo-tabella { overflow-x: auto; margin: 6px 0 14px; border: 1px solid var(--border); border-radius: 12px; -webkit-overflow-scrolling: touch; }
.articolo-tabella table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.4; }
.articolo-tabella th, .articolo-tabella td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.articolo-tabella th { background: var(--bg-surface); color: var(--text); font-size: 12.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.articolo-tabella tbody tr:last-child td { border-bottom: 0; }
.articolo-tabella tbody tr:nth-child(even) td { background: var(--bg-surface); }
.articolo-tabella .num { text-align: right; font-variant-numeric: tabular-nums; }
.articolo-tabella td strong { color: var(--text); }
.articolo-fonte { font-size: 13px; color: var(--text-3); margin: -4px 0 18px; }
.articolo-corpo blockquote { margin: 24px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--cyan);
    color: var(--text);
    font-style: italic; }
.articolo-riquadro { margin: 28px 0;
    padding: 22px 24px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px; }
.articolo-riquadro h3 { margin-top: 0; }
.articolo-cta { margin-top: 44px;
    padding: 30px;
    text-align: center;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-surface) 100%);
    border: 1px solid var(--border);
    border-radius: 18px; }
.articolo-cta p { color: var(--text-2); margin-bottom: 16px; }
.articolo-cta a { display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cyan);
    color: var(--bg-dark);
    padding: 12px 26px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800; }
.articolo-disclaimer { margin-top: 30px;
    padding: 16px 20px;
    border-left: 3px solid var(--border-light);
    font-size: 13px;
    color: var(--text-3);
    line-height: 1.6; }
.articolo-correlati { margin-top: 50px;
    padding-top: 34px;
    border-top: 1px solid var(--border); }
.articolo-correlati h3 { font-size: 15px; color: var(--text-3); margin-bottom: 16px; }
.articolo-correlati ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.articolo-correlati a { color: var(--text); font-weight: 700; text-decoration: none; }
.articolo-correlati a:hover { color: var(--cyan); }
@media (max-width: 700px) {
  .articolo { padding-left: 20px; padding-right: 20px; }
}
.art-testa { padding: 52px 32px 46px;
    margin-bottom: 44px;
    background:
        radial-gradient(900px 320px at 12% 0%, rgba(0, 217, 255, .13), transparent 62%),
        radial-gradient(760px 320px at 92% 30%, rgba(163, 113, 247, .11), transparent 62%),
        var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border); }
.art-testa-in { max-width: 1216px; margin: 0 auto; }
.art-testa-in.art-testa-indice { max-width: 1116px; }
.art-briciole { font-size: 13px; font-weight: 700; color: var(--text-3); margin-bottom: 18px; }
.art-briciole a { color: inherit; text-decoration: none; }
.art-briciole a:hover { color: var(--cyan); }
.art-briciole span { margin: 0 6px; }
.art-tipo { display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--cyan);
    background: color-mix(in srgb, var(--cyan) 12%, transparent);
    margin-bottom: 16px; }
.art-tipo.dati { color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.art-tipo.dati::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.art-testa h1 { font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.6px;
    max-width: 920px;
    margin-bottom: 18px; }
.art-testa .articolo-lead { max-width: 820px; font-size: 18.5px; line-height: 1.6; }
.art-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.art-meta span { padding: 6px 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-2);
    background: var(--bg-dark); }
.art-numeri { display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 32px;
    max-width: 980px; }
.art-numero { padding: 20px 22px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 16px; }
.art-numero b { display: block;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 900;
    line-height: 1.05;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px; }
.art-numero:first-child b { color: var(--cyan); }
.art-numero span { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.art-griglia { max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px 100px;
    display: grid;
    grid-template-columns: 210px minmax(0, 720px) 260px;
    justify-content: center;
    align-items: start;
    gap: 52px; }
.art-griglia .articolo { max-width: none; margin: 0; padding: 0; min-width: 0; }
.art-indice { position: sticky; top: 28px; font-size: 14px; }
.art-indice h4, .art-indice-breve summary { font-size: 12px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 12px; }
.art-indice ol, .art-indice-breve ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
.art-indice a, .art-indice-breve a { display: block;
    margin-left: -2px;
    padding: 7px 0 7px 14px;
    border-left: 2px solid transparent;
    color: var(--text-2);
    text-decoration: none;
    line-height: 1.35; }
.art-indice a:hover, .art-indice-breve a:hover { color: var(--cyan); border-left-color: var(--cyan); }
.art-indice-breve { display: none; }
.art-lato { position: sticky; top: 28px; }
.art-scheda { padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(16, 25, 34, .07); }
.art-scheda-marchio { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 900; margin-bottom: 12px; color: var(--text); }
.art-scheda p { font-size: 14px; line-height: 1.55; color: var(--text-2); margin-bottom: 14px; }
.art-scheda ul { list-style: none; margin: 0 0 20px; padding: 0; font-size: 13.5px; color: var(--text-2); }
.art-scheda li { position: relative; padding: 5px 0 5px 24px; }
.art-scheda li::before { content: '✓'; position: absolute; left: 0; font-weight: 900; color: var(--green); }
.art-scheda-bottone { display: block;
    text-align: center;
    padding: 12px;
    border-radius: 11px;
    background: var(--cyan);
    color: var(--bg-dark);
    font-weight: 800;
    text-decoration: none; }
.art-scheda-bottone:hover { filter: brightness(1.08); }
.art-griglia .articolo-corpo section { scroll-margin-top: 24px; }
.art-griglia .articolo-corpo > section:first-child > h2:first-child, .art-griglia .articolo-corpo > h2:first-child { margin-top: 0; }
.art-griglia .articolo-corpo h2 { position: relative; padding-left: 16px; font-size: 25px; letter-spacing: -.2px; }
.art-griglia .articolo-corpo h2::before { content: '';
    position: absolute;
    left: 0; top: .22em; bottom: .22em;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(var(--cyan), var(--purple)); }
.art-avviso { margin: 36px 0;
    padding: 4px 26px 8px;
    border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--gold) 7%, var(--bg-card)); }
.art-avviso h2 { padding-left: 0 !important; }
.art-avviso h2::before { display: none; }
.art-avviso h2::after { content: ' ⚠'; color: var(--gold); }
.art-barra { display: inline-block;
    width: 84px;
    height: 8px;
    margin-right: 12px;
    vertical-align: middle;
    border-radius: 4px;
    background: var(--bg-hover);
    overflow: hidden; }
.art-barra i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--cyan), var(--purple)); }
.art-griglia .articolo-tabella { box-shadow: 0 6px 22px rgba(16, 25, 34, .05); background: var(--bg-card); }
.art-griglia .articolo-correlati ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.art-griglia .articolo-correlati a { display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-card);
    line-height: 1.35;
    transition: border-color .2s, transform .2s; }
.art-griglia .articolo-correlati a:hover { border-color: var(--cyan); transform: translateY(-2px); }
.art-griglia .articolo-correlati a span { font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-3); }
.blog-card .art-tipo { align-self: flex-start; margin-bottom: 2px; }
@media (max-width: 1180px) {
  .art-griglia { grid-template-columns: minmax(0, 720px) 250px; gap: 40px; }
  .art-indice { display: none; }
  .art-indice-breve { display: block;
        margin-bottom: 30px;
        padding: 14px 18px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--bg-card); }
  .art-indice-breve summary { margin: 0; cursor: pointer; }
  .art-indice-breve[open] summary { margin-bottom: 10px; }
}
@media (max-width: 900px) {
  .art-griglia { grid-template-columns: minmax(0, 1fr); padding: 0 20px 70px; }
  .art-lato { display: none; }
  .art-testa { padding: 36px 20px 32px; margin-bottom: 30px; }
  .art-numeri { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .art-numero { display: flex; align-items: baseline; gap: 14px; padding: 14px 16px; }
  .art-numero b { flex: none; min-width: 92px; }
  .art-numero span { margin-top: 0; }
  .art-griglia .articolo-correlati ul { grid-template-columns: minmax(0, 1fr); }
  .art-avviso { padding: 2px 18px 6px; }
  .art-testa .articolo-lead { font-size: 17px; }
}

/* Lotto Analysis Pro · sezione Statistiche (2026-10-02)
   Stesso linguaggio del blog (classi .art-* in styles.css); qui solo i pezzi nuovi.
   Colori della mappa: divergente blu ↔ rosso con il grigio neutro al centro
   (blu = meno uscite del previsto, rosso = più), sequenziale blu per i ritardi. */

.st-articolo .articolo-corpo > section { margin-bottom: 8px; }
.st-sez h3 { font-size: 17px; margin: 22px 0 10px; }
.st-dida { font-size: 14px; color: var(--text-2); margin: 0 0 10px; line-height: 1.5; }
.st-dida2 { font-size: 14px; color: var(--text-2); margin: 0 0 12px; line-height: 1.55; }
.st-dida b, .st-dida2 b { color: var(--text); }

/* ── la barra dei comandi ─────────────────────────────────────── */
.st-barra {
    display: flex; flex-direction: column; align-items: stretch; gap: 14px;
    padding: 16px 18px; margin: 0 0 18px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
}
.st-giochi { display: inline-flex; align-self: flex-start; max-width: 100%; padding: 4px; gap: 4px; border-radius: 12px; background: var(--bg-surface); border: 1px solid var(--border); flex-wrap: wrap; }
.st-giochi a { padding: 7px 13px; border-radius: 9px; font-size: 14px; font-weight: 800; color: var(--text-2); text-decoration: none; }
.st-giochi a:hover { color: var(--cyan); }
.st-giochi a.attivo { background: var(--bg-hover); color: var(--text); box-shadow: 0 1px 4px rgba(16, 25, 34, .12); }
.st-campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 16px; }
.st-campi:empty { display: none; }
.st-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 140px; }
.st-campo > span { font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-3); }
.st-campo select, .st-campo input, .st-numero-scegli input {
    font: inherit; font-size: 15px; font-weight: 600; color: var(--text);
    padding: 9px 12px; border: 1px solid var(--border-light); border-radius: 10px; background: var(--bg-dark);
    width: 100%; min-width: 0;
}
.st-campo select:focus, .st-campo input:focus, .st-numero-scegli input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.st-campo-largo { flex-basis: 100%; }

.st-nota {
    margin: 0 0 8px; padding: 14px 18px; font-size: 14.5px; line-height: 1.6; color: var(--text-2);
    border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border)); border-radius: 14px;
    background: color-mix(in srgb, var(--gold) 9%, var(--bg-card));
}
.st-nota b { color: var(--text); }

/* ── palline ──────────────────────────────────────────────────── */
.st-palla {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--bg-surface); border: 1.5px solid var(--border-light); color: var(--text);
    font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
}
.st-palla.presa { background: #ffcf3f; border-color: #c99400; color: #1d1400; }
.st-palla.oro { background: #ffb800; border-color: #b77f00; color: #1d1400; }
.st-palla.doppio { background: #ffe9a8; border-color: #d8a92c; color: #1d1400; }
.st-palla.jolly { background: #6b3fc4; border-color: #6b3fc4; color: #fff; }
.st-palla.jolly.presa { box-shadow: 0 0 0 3px #ffcf3f; }
.st-palla.star { background: #0284a8; border-color: #0284a8; color: #fff; }
.st-palle, .st-palle-riga { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.st-palle-riga { flex-wrap: nowrap; gap: 4px; }
.st-palle { margin: 4px 0 12px; }
.st-tab-ruote td small { font-size: 12.5px; font-weight: 800; color: var(--text-2); margin: 0 10px 0 4px; font-variant-numeric: tabular-nums; }
.st-tab-ruote td .st-palla { vertical-align: middle; }
.st-tab-ruote td a { color: var(--text); font-weight: 800; text-decoration: none; }
.st-tab-ruote td a:hover { color: var(--cyan); }
.st-ultima-se { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 6px 0 12px; }
.st-ultima-se .st-palle { margin: 0; }
.st-extra { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--text-3); text-transform: uppercase; letter-spacing: .4px; }

/* ── tabelle: più strette sul telefono ─────────────────────────── */
.st-tab { margin-bottom: 10px; }
.st-tab th, .st-tab td { padding: 8px 12px; vertical-align: middle; }
.st-tab td.num b { color: var(--text); }
.st-tab th.st-n, .st-tab td.st-n { text-align: center; width: 1%; }
.st-corto, .st-solo-tel { display: none; }
.st-tab .art-barra { width: 54px; margin-right: 8px; }
.st-su { color: var(--red); }
html.st-js .st-w:not(.st-aperto) .st-oltre { display: none; }
.st-tutti {
    display: none; margin: 2px 0 6px; padding: 9px 16px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--border-light); background: var(--bg-surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 700;
}
html.st-js .st-tutti { display: inline-block; }
.st-tutti:hover { border-color: var(--cyan); color: var(--cyan); }
.st-fascia { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.st-fascia.norma { background: rgba(139,148,158,.18); color: #c3cbd4; }
.st-fascia.sopra { background: rgba(255,51,102,.16); color: #ff8aa5; }
.st-fascia.sotto { background: rgba(3,150,192,.22); color: #6fd3f2; }
.st-guasto { padding: 10px 14px; border-radius: 10px; background: rgba(255,51,102,.14); color: #ff8aa5; font-size: 14px; font-weight: 700; }

/* ── la mappa dei 90 ──────────────────────────────────────────── */
.st-modi { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 12px; border-radius: 12px; background: var(--bg-surface); border: 1px solid var(--border); }
.st-modi button { font: inherit; font-size: 13.5px; font-weight: 800; padding: 6px 12px; border: 0; border-radius: 9px; background: none; color: var(--text-2); cursor: pointer; }
.st-modi button[aria-pressed="true"] { background: var(--bg-hover); color: var(--text); box-shadow: 0 1px 4px rgba(16, 25, 34, .12); }
.st-mappa { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin-bottom: 12px; }
.st-cella {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    aspect-ratio: 1 / .92; min-width: 0; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
    font: inherit; color: var(--text-2); background: #262d38; transition: transform .12s;
}
.st-cella:hover { transform: scale(1.06); position: relative; z-index: 1; }
.st-cella:focus-visible { outline: 3px solid var(--cyan); outline-offset: 1px; }
.st-cella b { font-size: 16px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.st-cella span { font-size: 11px; font-weight: 700; opacity: .85; font-variant-numeric: tabular-nums; line-height: 1.1; }
.st-cella.c-3, .st-legenda .c-3 { background: #4aa3ff; color: #00162b; }
.st-cella.c-2, .st-legenda .c-2 { background: #2a70c0; color: #fff; }
.st-cella.c-1, .st-legenda .c-1 { background: #1f3b5c; color: #cfe3fa; }
.st-cella.c0, .st-legenda .c0 { background: #262d38; color: #b1bac4; }
.st-cella.c1, .st-legenda .c1 { background: #5c2a2e; color: #ffd5d0; }
.st-cella.c2, .st-legenda .c2 { background: #b8443e; color: #fff; }
.st-cella.c3, .st-legenda .c3 { background: #ff5a4f; color: #2a0000; }
.st-cella.st-fuori { box-shadow: inset 0 0 0 3px #f0f6fc; }
.st-cella.r0, .st-legenda .r0 { background: #1a212b; color: #b1bac4; }
.st-cella.r1, .st-legenda .r1 { background: #1d3550; color: #d4e6fa; }
.st-cella.r2, .st-legenda .r2 { background: #1f4b78; color: #e3f0ff; }
.st-cella.r3, .st-legenda .r3 { background: #2262a3; color: #fff; }
.st-cella.r4, .st-legenda .r4 { background: #3a8fe0; color: #fff; }
.st-cella.r5, .st-legenda .r5 { background: #6fb2f5; color: #04152a; }
.st-cella.r6, .st-legenda .r6 { background: #b4d9ff; color: #04152a; }
.st-legenda { display: grid; gap: 6px; font-size: 12.5px; color: var(--text-2); margin-bottom: 8px; max-width: 460px; }
.st-leg-tit { font-weight: 800; color: var(--text); }
.st-leg-scala { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.st-leg-scala i { height: 14px; border-radius: 3px; }
.st-leg-rit i { height: auto; padding: 3px 0; text-align: center; font-style: normal; }
.st-leg-rit em { font-style: normal; font-size: 11px; font-weight: 700; }
.st-leg-voci { display: flex; justify-content: space-between; font-weight: 700; }
.st-leg-fuori { display: flex; align-items: center; gap: 8px; }
.st-cella-mini { display: inline-block; width: 18px; height: 16px; border-radius: 4px; background: #262d38; }
.st-cella-mini.st-fuori { box-shadow: inset 0 0 0 2.5px #f0f6fc; }

/* ── ambi, ciclo, numero ──────────────────────────────────────── */
.st-due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.st-due h3 { margin-top: 6px; }
.st-due .st-palla { margin-right: 4px; }
.st-ciclo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 12px; }
.st-ciclo-num { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-card); }
.st-ciclo-num b { display: block; font-size: 30px; font-weight: 900; color: var(--text); line-height: 1.05; font-variant-numeric: tabular-nums; }
.st-ciclo-num span { display: block; font-size: 13.5px; line-height: 1.4; color: var(--text-2); }
.st-numero-scegli { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.st-numero-scegli label { font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-3); margin-right: 4px; }
.st-numero-scegli input { width: 86px; text-align: center; font-size: 18px; font-weight: 900; }
.st-passo { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-light); background: var(--bg-surface); font-size: 20px; font-weight: 800; color: var(--text); cursor: pointer; }
.st-passo:hover { border-color: var(--cyan); color: var(--cyan); }
.st-chip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.st-chip span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-surface); font-size: 13.5px; color: var(--text-2); }
.st-chip b { color: var(--text); }
.st-grafico { margin: 0 0 8px; padding: 12px 12px 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); }
.st-grafico svg { display: block; width: 100%; height: auto; }
.st-grafico figcaption { font-size: 12.5px; color: var(--text-3); margin-top: 6px; line-height: 1.45; }
.st-g { fill: #2a6fb5; }
.st-g-ora { fill: #00d9ff; }
.st-g-media { stroke: #8b949e; stroke-width: 1.5; stroke-dasharray: 5 4; }
.st-g-txt { font-size: 12px; fill: #b1bac4; font-family: inherit; paint-order: stroke; stroke: #161b22; stroke-width: 4px; stroke-linejoin: round; }

/* ── ruote e strumenti ────────────────────────────────────────── */
.st-ruote { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.st-ruota, .st-carta {
    display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; border-radius: 14px;
    border: 1px solid var(--border); background: var(--bg-card); text-decoration: none; color: var(--text);
    transition: border-color .2s, transform .2s;
}
.st-ruota:hover, .st-carta:hover { border-color: var(--cyan); transform: translateY(-2px); }
.st-ruota b, .st-carta b { font-size: 15.5px; font-weight: 800; }
.st-ruota span, .st-carta span { font-size: 13px; color: var(--text-3); line-height: 1.45; }
.st-carte { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.articolo-corpo .st-ruota, .articolo-corpo .st-carta { color: var(--text); }

/* ── i controlli delle giocate ────────────────────────────────── */
.st-form { padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); box-shadow: 0 6px 22px rgba(0, 0, 0, .35); }
.st-riga { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin-bottom: 14px; }
.st-ruote-scelta { border: 0; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.st-ruote-scelta legend { font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.st-ruote-scelta legend button, .st-rapidi button {
    font: inherit; font-size: 12.5px; font-weight: 700; text-transform: none; letter-spacing: 0;
    margin-left: 8px; padding: 3px 9px; border-radius: 8px; border: 1px solid var(--border-light); background: var(--bg-surface); color: var(--text-2); cursor: pointer;
}
.st-rapidi { display: flex; flex-wrap: wrap; gap: 6px; }
.st-rapidi button { margin: 0; padding: 8px 11px; }
.st-ruote-scelta legend button:hover, .st-rapidi button:hover { border-color: var(--cyan); color: var(--cyan); }
.st-chk { position: relative; }
.st-chk input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.st-chk span { display: inline-block; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border-light); font-size: 14px; font-weight: 700; color: var(--text-2); background: var(--bg-surface); }
.st-chk input:checked + span { background: var(--cyan); border-color: var(--cyan); color: #06222b; }
.st-chk input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.st-vai { font: inherit; font-size: 16px; font-weight: 800; padding: 12px 28px; border: 0; border-radius: 12px; background: var(--cyan); color: #06222b; cursor: pointer; }
.st-vai:hover { filter: brightness(1.08); }
.st-errore { color: var(--red); font-weight: 700; font-size: 14px; }
.st-esito:empty { display: none; }
.st-esito { border-top: 1px solid var(--border); padding-top: 16px; }
.st-riepilogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 0 0 14px; }
.st-rie { padding: 11px 13px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-surface); }
.st-rie b { display: block; font-size: 24px; font-weight: 900; color: var(--text-3); line-height: 1.1; font-variant-numeric: tabular-nums; }
.st-rie span { display: block; font-size: 13px; font-weight: 800; color: var(--text-2); }
.st-rie small { display: block; font-size: 12px; color: var(--text-3); }
.st-rie.si { background: color-mix(in srgb, var(--gold) 14%, var(--bg-card)); border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.st-rie.si b { color: var(--text); }
.st-filtro { max-width: 260px; margin-bottom: 10px; }
.st-verdetto { margin: 0 0 14px; padding: 13px 16px; border-radius: 12px; font-size: 15.5px; line-height: 1.5; color: var(--text-2); background: var(--bg-surface); border: 1px solid var(--border); }
.st-verdetto b { color: var(--text); font-size: 17px; }
.st-verdetto.si { background: color-mix(in srgb, var(--gold) 16%, var(--bg-card)); border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); }

/* il piè di pagina ha 3 colonne (come nella vetrina) */
@media (min-width: 1025px) { .st-pagina .footer-content { grid-template-columns: 2fr 1fr 1fr; } }

@media (max-width: 560px) {
    .st-lungo, .st-no-tel { display: none; }
    .st-corto { display: inline; }
    .st-solo-tel { display: block; font-size: 12px; font-weight: 700; color: var(--text-3); }
    .st-tab-esito td { white-space: normal; }
    .st-tab-esito .st-palle-riga { flex-wrap: wrap; }
    .st-g-txt { font-size: 23px; stroke-width: 6px; }
}
@media (max-width: 640px) {
    .st-due { grid-template-columns: minmax(0, 1fr); }
    .st-barra { padding: 14px; }
    .st-form { padding: 14px; }
    .st-tab th, .st-tab td { padding: 7px 8px; font-size: 13.5px; }
    .st-tab .art-barra { display: none; }
    .st-ciclo-num b { font-size: 24px; }
}
@media (max-width: 420px) {
    .st-mappa { gap: 3px; }
    .st-cella { border-radius: 6px; }
    .st-cella b { font-size: 13px; }
    .st-cella span { font-size: 9px; }
    .st-palla { width: 27px; height: 27px; font-size: 12.5px; }
    .st-tab th, .st-tab td { padding: 6px 6px; font-size: 13px; }
    .st-tab th { font-size: 11px; letter-spacing: 0; }
    .st-giochi a { padding: 6px 9px; font-size: 13px; }
}

/* ═══ ritocchi Lite ═══ */
.st-pagina .art-scheda-marchio .bolt{width:20px;height:24px;flex:none}
.st-pagina .art-scheda-marchio .wm{font-size:16px}
.st-pagina .art-scheda-marchio{gap:9px}
.st-pagina .art-scheda-bottone{text-decoration:none}