/* 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: #fff; border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 6px 22px rgba(16, 25, 34, .05);
}
.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: #fff; 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: #fff;
    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) 7%, #fff);
}
.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: #fff; 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: #fff; 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: #eceff3; color: #3d4a5c; }
.st-fascia.sopra { background: #fbe1dd; color: #9e2a24; }
.st-fascia.sotto { background: #dce9fb; color: #184f95; }
.st-guasto { padding: 10px 14px; border-radius: 10px; background: #fdecea; color: #9e2a24; 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: #fff; 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: #101922; background: #f0efec; 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: #1c5cab; color: #fff; }
.st-cella.c-2, .st-legenda .c-2 { background: #3987e5; color: #fff; }
.st-cella.c-1, .st-legenda .c-1 { background: #b7d3f6; }
.st-cella.c0, .st-legenda .c0 { background: #f0efec; }
.st-cella.c1, .st-legenda .c1 { background: #f6c1b8; }
.st-cella.c2, .st-legenda .c2 { background: #e3655c; color: #fff; }
.st-cella.c3, .st-legenda .c3 { background: #b02f2c; color: #fff; }
.st-cella.st-fuori { box-shadow: inset 0 0 0 3px #101922; }
.st-cella.r0, .st-legenda .r0 { background: #f2f6fb; }
.st-cella.r1, .st-legenda .r1 { background: #cde2fb; }
.st-cella.r2, .st-legenda .r2 { background: #9ec5f4; }
.st-cella.r3, .st-legenda .r3 { background: #6da7ec; }
.st-cella.r4, .st-legenda .r4 { background: #3987e5; color: #fff; }
.st-cella.r5, .st-legenda .r5 { background: #256abf; color: #fff; }
.st-cella.r6, .st-legenda .r6 { background: #104281; color: #fff; }
.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: #f0efec; }
.st-cella-mini.st-fuori { box-shadow: inset 0 0 0 2.5px #101922; }

/* ── 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: #fff; }
.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: #fff; 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: #fff; 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: #fff; }
.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: #86b6ef; }
.st-g-ora { fill: #1c5cab; }
.st-g-media { stroke: #5d6b7c; stroke-width: 1.5; stroke-dasharray: 5 4; }
.st-g-txt { font-size: 12px; fill: #4d5b6b; font-family: inherit; paint-order: stroke; stroke: #fff; 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: #fff; 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: #fff; box-shadow: 0 6px 22px rgba(16, 25, 34, .05); }
.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: #fff; 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: #fff; }
.st-chk input:checked + span { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.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: #fff; 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) 12%, #fff); 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) 14%, #fff); 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; }
}