:root, body.home {
  /* Palette "Direzione B" (07/10/2026) — tema unico, solo chiaro, scelto da
   * Dario. I NOMI delle variabili restano quelli storici (--navy, --gold,
   * --brick, --sage, --paper...) per non toccare ogni template: cambia solo
   * il valore a cui puntano. --gold e' ora il teal d'accento. */
  --paper: #eef2f6; --paper-raised: #ffffff; --plaque: #f4f7fa;
  --ink: #0f1b2d; --ink-soft: #4b5b70; --ivory-dim: #5d6b7e;
  --navy: #0a6a74; --gold: #0a6a74; --brick: #a4281e; --sage: #1b6b3a;
  --rule: #d9e1ea; --rule-strong: #c3cfdb; --link: #0a6a74;
  --accent: #0a6a74; --accent-soft: #e3f1f2; --amber: #b45309; --deep: #0b3c49;
  --ember: #0a6a74; --ember2: #0a6a74; --ember-deep: #0b3c49;
  --fire: #a4281e; --fire2: #c0392b; --fire-deep: #7a1a12;
  --card-paper: #ffffff; --card-ink: #0f1b2d; --card-soft: #4b5b70;
  --card-rule: #d9e1ea; --card-accent: #0a6a74; --card-sage: #1b6b3a;
  --h-violet: #0b3c49; --h-purple: #0a6a74; --h-pink: #1d5fa8;
  --h-orange: #b45309; --h-gold: #b45309; --h-blue: #3b5bdb;
  --h-grad-hero: #ffffff;
  --h-grad-primary: linear-gradient(100deg,#0a6a74,#0e7f8c);
  --h-grad-card: #ffffff;
  --h-grad-orb-a: linear-gradient(145deg,#0f1b2d,#0b3c49);
  --h-grad-orb-b: linear-gradient(145deg,#0a6a74,#0e8a96);
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); margin: 0; line-height: 1.55; }
a { color: var(--link); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--link) 40%, transparent); }
a:hover { border-bottom-color: var(--link); }
::selection { background: var(--ember-deep); color: var(--ink); }

.site-header { border-bottom: 1px solid var(--rule-strong); background: var(--paper-raised); }
.site-header-inner { max-width: 1040px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif);
  font-weight: 700; font-size: 22px; color: var(--ink); border-bottom: none; }
.wordmark .marchio { display: block; flex-shrink: 0; }
.wordmark-testo { line-height: 1; }
@media (max-width: 460px) { .wordmark { gap: 8px; font-size: 20px; } .wordmark .marchio { height: 28px; } }
.wordmark .dot { color: var(--gold); }
.site-nav { display: flex; flex-wrap: wrap; gap: 10px 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin-left: auto; }
@media (max-width: 780px) { .site-nav { margin-left: 0; width: 100%; } }
.site-nav a { color: var(--ink-soft); border-bottom: none; }
.crumb { max-width: 1040px; margin: 0 auto; padding: 14px 20px 0; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.layout { max-width: 1040px; margin: 0 auto; padding: 18px 20px 60px; display: grid; grid-template-columns: 1fr 300px; gap: 36px; align-items: start; }
@media (max-width: 780px) { .layout { grid-template-columns: 1fr; } }
.layout > main, .layout > aside { min-width: 0; }

h1.page-title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 5vw, 40px); margin: 4px 0 4px; }

/* FAQ: <details>/<summary> nativi, niente JavaScript necessario per aprirli
   — funzionano e sono indicizzabili anche senza. */
details { background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: 8px; margin: 0 0 8px; overflow: hidden; }
details summary { padding: 13px 40px 13px 16px; cursor: pointer; font-weight: 700; font-size: 14.5px; color: var(--ink); list-style: none; position: relative; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--gold); font-family: var(--mono); font-size: 18px; font-weight: 400; }
details[open] summary::after { content: "−"; }
details[open] summary { border-bottom: 1px solid var(--rule-strong); }
details p { margin: 0; padding: 13px 16px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
.page-sub { color: var(--ink-soft); font-size: 14px; margin: 0 0 22px; }
.lede { font-size: 16px; max-width: 62ch; margin-bottom: 28px; color: var(--ink-soft); }
section { margin-bottom: 34px; }
h2.section-title { font-family: var(--serif); font-weight: 400; font-size: 21px; border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 10px; margin: 0 0 18px; display: flex; align-items: baseline; gap: 8px; text-align: center; justify-content: center; }
.section-num { font-family: var(--mono); color: var(--gold); font-weight: 700; font-size: .7em; text-transform: uppercase; letter-spacing: .14em; }

/* Etichetta a timbro */
.stamp-tag { display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--brick); border: 1.5px solid var(--brick); padding: 4px 11px; border-radius: 4px; }
.stamp-tag.sage { color: var(--sage); border-color: var(--sage); }
.stamp-tag.gold { color: var(--gold); border-color: var(--gold); }
.stamp-tag.navy { color: var(--navy); border-color: var(--navy); }
.stato-riga { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.stato-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; vertical-align: middle; }
.stato-dot.sage { background: var(--sage); box-shadow: none; }
.stato-dot.gold { background: var(--gold); box-shadow: none; }
.stato-dot.brick { background: var(--brick); box-shadow: none; }

/* Verdetto/timbro grande (usato anche in cima alla scheda metodo) */
.stamp { font-family: var(--mono); font-weight: 800; font-size: 13px; color: var(--brick); border: 2px solid var(--brick); border-radius: 6px;
  padding: 6px 10px; flex-shrink: 0; text-align: center; line-height: 1.3; }
.stamp.big { font-size: 20px; padding: 10px 16px; }
.stamp.sage { color: var(--sage); border-color: var(--sage); }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.data th { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); background: var(--paper-raised); }
table.data td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.data td.hi { color: var(--ember2); font-weight: 700; text-shadow: none; }
table.data tr.riga-aggregata { background: var(--paper-raised); font-weight: 700; }
table.data tr.riga-aggregata td { border-bottom: 2px solid var(--rule-strong); }
table.data tbody tr:nth-child(even) { background: color-mix(in srgb, var(--plaque) 70%, transparent); }
table.data th.pos, table.data td.pos { text-align: center; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.data td.pos:not(:last-child), table.data th.pos:not(:last-child) { border-right: 1px dotted var(--rule); }
table.data th.ruota-head { border-left: 1px solid var(--rule-strong); text-transform: none; font-size: 10.5px; }
table.data th.pos.sub { font-size: 9px; color: var(--ink-soft); font-weight: 400; }
table.data.larga td, table.data.larga th { text-align: center; }
table.data.larga td:first-child, table.data.larga th[rowspan] { font-family: var(--sans); text-align: left; }
table.data.larga td:nth-child(5n+2) { border-left: 1px solid var(--rule); }
table.data.colonne-separate th:not(:last-child),
table.data.colonne-separate td:not(:last-child) { border-right: 1px solid var(--rule-strong); }
/* Nella tabella larga (ultime estrazioni) i numeri diventano piccoli
   anelli dorati invece di semplice testo — stesso materiale del
   tabellone, applicato via CSS: la tabella sotto resta la stessa,
   generata server-side con vere colonne per posizione (nessun cambio
   nel modo in cui viene costruita, solo nell'aspetto). Anello sottile
   invece di sfera piena, mockup di Dario (23/08/2026). */
table.data td.pos a { display: inline-flex; width: 25px; height: 25px; border-radius: 50%;
  align-items: center; justify-content: center; background: transparent; border: 1.5px solid var(--gold);
  color: var(--gold); font-family: var(--mono); font-weight: 800; font-size: 11.5px; }
table.data td.pos a:hover { background: var(--gold); color: var(--paper); }
/* Tabella larga (ultime estrazioni/archivio per anno): i numeri qui sono
   testo semplice, non link — scelta deliberata (troppi link inutili su
   una pagina con 200 date). Il trattamento resta sul <td> stesso (niente
   display:flex, che romperebbe il layout della tabella): un "gettone"
   con bordo arrotondato invece di un vero cerchio, per sicurezza
   cross-browser. */
table.data.larga td.pos { background: transparent; border: 1.5px solid var(--gold);
  color: var(--gold); font-family: var(--mono); font-weight: 800; font-size: 11px; border-radius: 8px; }

.avviso-gioco { max-width: 1040px; margin: 0 auto; padding: 14px 20px 22px; font-size: 12px; line-height: 1.55;
  color: var(--ink-soft); border-top: 1px solid var(--rule); }
.avviso-gioco strong { color: var(--brick); }
.condividi-riga { display: flex; flex-wrap: wrap; gap: 8px; }
.cond { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 13.5px;
  padding: 8px 14px; border: 1px solid var(--rule-strong); border-radius: 6px;
  background: var(--paper-raised); color: var(--ink); cursor: pointer; line-height: 1; }
.cond:hover { border-color: var(--ink-soft); }
.cond svg { flex-shrink: 0; }
.cond-nativo { background: var(--navy); border-color: var(--navy); color: var(--paper); font-weight: 600; }
.cond-wa { color: #1b7f4a; } .cond-tg { color: #1d6fa5; }
.cond-fb { color: #2f5fa8; } .cond-x { color: var(--ink); }
.condividi-nota { font-size: 12.5px; color: var(--ink-soft); margin: 12px 0 0; max-width: 60ch; }
.ritratto { font-size: 15px; line-height: 1.65; color: var(--ink); background: var(--paper-raised); border-left: 3px solid var(--gold); padding: 12px 16px; margin: 0 0 26px; max-width: 64ch; }
.modulo-contatti { display: flex; flex-direction: column; gap: 6px; max-width: 460px; }
.modulo-contatti[hidden], [hidden] { display: none !important; }
.modulo-contatti label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-top: 12px; }
.modulo-contatti input, .modulo-contatti textarea { font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: 6px; padding: 10px 12px; width: 100%; min-width: 0; }
.modulo-contatti textarea { resize: vertical; }
.modulo-contatti button { margin-top: 16px; font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  cursor: pointer; background: var(--navy); color: #ffffff; border: none; border-radius: 999px; padding: 12px 22px; }
.modulo-contatti button:hover { background: var(--gold); }
.modulo-contatti button[disabled] { opacity: .6; cursor: default; }
.modulo-contatti .bottone-secondario { margin-top: 8px; background: none; color: var(--ink-soft); border: 1px solid var(--rule-strong); border-radius: 999px; }
.campo-nota { font-size: 12.5px; color: var(--ink-soft); margin: 2px 0 0; }
.avviso-modulo { font-size: 13.5px; color: var(--brick); background: color-mix(in srgb, var(--brick) 10%, var(--paper-raised)); border: 1px solid var(--brick); padding: 8px 12px; margin: 14px 0 0; }
.esito-invio { background: var(--paper-raised); border: 1px solid var(--rule-strong); padding: 18px 20px; }
.table-wrap { overflow-x: auto; }
.chart-wrap { max-width: 760px; margin: 0 0 24px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.num-chip { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: 999px; padding: 5px 14px; color: var(--ink); }
.curiosita { border-left: 3px solid var(--gold); padding: 4px 0 4px 16px; font-family: var(--serif); font-size: 16px; color: var(--gold); font-style: italic; }
aside.infobox { background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: 10px; overflow: hidden; }
.infobox-head { background: var(--plaque); color: var(--gold); font-family: var(--serif); font-size: 20px; font-weight: 700; text-align: center; padding: 14px; border-bottom: 1px solid var(--rule-strong); }
.infobox-head .fig { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); display: block; margin-top: 2px; letter-spacing: .06em; }
.infobox .row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.infobox .row:last-child { border-bottom: none; }
.infobox .row dt { color: var(--ink-soft); margin: 0; }
.infobox .row dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.infobox .row dd.hi { color: var(--ember2); font-weight: 700; }
/* Riga con testo lungo (es. "L'ultima volta che è uscito, insieme a...") —
 * lo schema dt/dd affiancati con text-align:right va bene per coppie
 * etichetta/numero brevi, ma con frasi lunghe le due colonne si accavallano
 * a fasce strette. Qui etichetta sopra, testo sotto, allineato a sinistra
 * (richiesta di Dario 29/08/2026). */
.infobox .row.row-block { display: block; }
.infobox .row.row-block dt { display: block; margin-bottom: 6px; }
.infobox .row.row-block dd { text-align: left; font-family: var(--sans); font-variant-numeric: normal; line-height: 1.5; }
.see-also h3 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 0 0 8px; }
.see-also ul { list-style: none; padding: 0 14px 14px; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
footer.site-footer { border-top: 1px solid var(--rule-strong); margin-top: 40px; }
.site-footer-inner { max-width: 1040px; margin: 0 auto; padding: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); }
.site-footer-inner a { color: var(--ink-soft); }

/* ===================== IL TABELLONE — componenti nuovi ===================== */
/* Pallina: token circolare unico, con modificatori di dimensione — usato
   per numero (xl), ambo/terno (lg), gruppi (md), estrazioni/tabelle (sm).
   Il colore "caldo" (ember) e' riservato ai numeri vicini al record; gli
   altri restano nel tono avorio spento. */

.ball-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ball-pair, .ball-trio { position: relative; flex-shrink: 0; }
.ball-pair { width: 150px; height: 130px; }
.ball-pair .ball.a { position: absolute; left: 0; top: 24px; }
.ball-pair .ball.b { position: absolute; left: 60px; top: 0; }
.ball-trio { width: 170px; height: 150px; }
.ball-trio .t1 { position: absolute; left: 41px; top: 0; width: 88px; height: 88px; font-size: 26px; }
.ball-trio .t2 { position: absolute; left: 0; top: 58px; width: 88px; height: 88px; font-size: 26px; }
.ball-trio .t3 { position: absolute; left: 82px; top: 58px; width: 88px; height: 88px; font-size: 26px; }
.ball-trio .ball { position: static; }

.hero-ball-wrap { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.hero-ball-wrap .testo h1 { margin: 0 0 10px; }
.hero-ball-wrap .testo p { color: var(--ink-soft); font-size: 14.5px; max-width: 52ch; margin: 0; }
.hero-ball-wrap .testo .grande { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--ember2); }

/* Il tabellone: la griglia dei 90 numeri, generata server-side (90 <a
   href> reali) — il colore/classe e' calcolato in Python dal ritardo
   vero, mai da JavaScript. */
.board-wrap { max-width: 960px; margin: 0 auto; padding: 20px; background: var(--paper-raised);
  border: 1px solid var(--rule-strong); border-radius: 10px; box-shadow: none; }
.board { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
@media (max-width: 720px) { .board { grid-template-columns: repeat(6, 1fr); } }
.tile .rit { font-size: 9.5px; font-weight: 700; opacity: .92; text-align: center; line-height: 1; letter-spacing: .02em; white-space: nowrap; }
.tile .rit b { font-size: 11px; font-weight: 800; margin-left: 3px; }
@media (max-width: 720px) { .tile { font-size: 17px; } .tile .rit { font-size: 11px; } .tile .rit b { font-size: 12.5px; } }
/* Bagliore arancio "normale": usato dalla pallina delle schede
   numero/ambo/terno (.ball-glow) — resta com'era, il rosso fuoco è solo
   per il tabellone (richiesta di Dario 22/08/2026). */
.board-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 4px 2px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-soft); }
.board-foot .k { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }
.board-foot .sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* Mini-tabellone: 90 puntini, usato nell'indice delle ruote */
.mini-board { display: grid; grid-template-columns: repeat(30, 1fr); gap: 1.5px; width: 210px; }

/* Striscia di palline (gruppi: decina/cadenza/figura/cifra) */
.ball-strip { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Il libro dei conti (metodi alla prova): applicato come classe
   aggiuntiva sul contenitore della tabella esistente, non sostituisce
   table.data. */
.ledger { background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: 10px; overflow: hidden; position: relative; }
.ledger-head { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 20px; border-bottom: 1px solid var(--rule-strong); }
.ledger-head strong { font-family: var(--serif); font-size: 15px; color: var(--gold); }
.ledger-head span { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }

/* Ricerca / hero search: pillola invece di rettangolo pieno */
.hero-search, .search-pill { display: flex; max-width: 460px; margin: 0 auto; border: 1px solid var(--rule-strong); border-radius: 999px; overflow: hidden; background: var(--paper-raised); }
.hero-search input, .search-pill input { flex: 1; min-width: 0; background: transparent; border: none; padding: 13px 18px; font-family: var(--sans); font-size: 14.5px; color: var(--ink); }
.hero-search button, .search-pill button { background: var(--navy); color: #ffffff; border: none; padding: 13px 22px; font-family: var(--mono); font-size: 12.5px; font-weight: 800; letter-spacing: .03em; cursor: pointer; }
.hero-search button:hover, .search-pill button:hover { background: var(--gold); }

/* Homepage */
.hp { max-width: 1120px; margin: 0 auto; padding: 0 20px 40px; }
.hero { padding: 44px 0 8px; margin-bottom: 20px; text-align: center; }
.hero-title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 5vw, 48px); line-height: 1.16; margin: 0 0 14px; text-wrap: balance; }
.hero-sub { font-size: 15.5px; color: var(--ink-soft); max-width: 56ch; margin: 0 auto 30px; }

.hp-section { margin-bottom: 46px; }
.hp-section-final { text-align: center; border-top: 1px solid var(--rule); padding-top: 24px; }
.hp-title { font-family: var(--serif); font-weight: 400; font-size: 21px; margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1px solid var(--rule-strong); text-align: center; }
.hp-sub { color: var(--ink-soft); font-size: 13.5px; margin: 10px 0 22px; text-align: center; max-width: 64ch; margin-left: auto; margin-right: auto; }
.hp-subtitle { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin: 0 0 8px; }
.hp-caveat { font-size: 13px; color: var(--ink-soft); background: var(--paper-raised); border-left: 3px solid var(--gold); padding: 8px 14px; margin: 0 0 18px; max-width: 68ch; }
.hp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 620px) { .hp-cols { grid-template-columns: 1fr; } }
.hp-link { display: inline-block; margin-top: 12px; font-size: 14.5px; font-weight: 700; color: var(--gold); }
.hp-countdown { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); margin-top: 14px; text-align: center; }
.hp-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 780px) { .hp-grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .hp-grid4 { grid-template-columns: 1fr; } }
.hp-card { display: flex; flex-direction: column; gap: 4px; background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: 10px;
  padding: 16px 18px; text-decoration: none; }
.hp-card:hover { border-color: var(--navy); }
.hp-card strong { font-family: var(--serif); font-size: 15px; color: var(--ink); border-bottom: none; }
.hp-card span { font-size: 12.5px; color: var(--ink-soft); }
.hp-card-icon { display: flex; width: 30px; height: 30px; border-radius: 50%; background: var(--plaque); border: 1px solid var(--rule-strong); align-items: center; justify-content: center; margin-bottom: 10px; }
.hp-card-icon svg { width: 16px; height: 16px; stroke: var(--gold); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Pagina /lotto: sezioni in cornice dorata, un'icona nell'intestazione
 * invece che su ogni singola scheda. Modificatore locale (.hp-box), non
 * tocca .hp-section/.hp-title/.hp-card usati altrove (home page,
 * /lotto/statistiche) — solo quando annidato dentro .hp-box il
 * comportamento cambia. Mockup di Dario, 23/08/2026. */
.hp-box { border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--rule-strong)); border-radius: 20px; padding: 26px 28px 30px; }
.hp-box .hp-title { display: flex; align-items: center; gap: 12px; text-align: left; border-bottom: none; padding-bottom: 0; margin: 0 0 10px; font-size: 22px; }
.hp-box .hp-sub { text-align: left; margin: 0 0 20px; }
.hp-box-icon { display: flex; width: 36px; height: 36px; border-radius: 50%; background: var(--gold);
  align-items: center; justify-content: center; flex-shrink: 0; }
.hp-box-icon svg { width: 19px; height: 19px; stroke: var(--paper); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hp-box-icon-testo { font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--paper); }
.hp-box .hp-grid4 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .hp-box .hp-grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .hp-box .hp-grid4 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .hp-box { padding: 20px 18px 24px; border-radius: 16px; } }

/* "Statistiche in pillole": schede di carta chiara sul tabellone scuro —
 * l'unica eccezione deliberata al tema sempre-scuro, come dei foglietti
 * appuntati sopra il tabellone fisico. Token dedicati (--card-*) per non
 * toccare il resto della palette. Riprodotto da un mockup di Dario
 * (23/08/2026). */
.hp-pillole { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.hp-pillola { background: var(--card-paper); color: var(--card-ink); border-radius: 22px; padding: 26px 28px 22px;
  display: flex; flex-direction: column; gap: 14px; box-shadow: none; }
.hp-pillola-head { display: flex; flex-direction: column; gap: 4px; }
.hp-pillola-head strong { font-family: var(--serif); font-weight: 700; font-size: 26px; color: var(--card-ink); }
.hp-pillola-head .chip-sub { font-family: var(--mono); font-size: 13px; color: var(--card-soft); }
.hp-pillola-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.hp-pillola-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 13px 0; border-bottom: 1px dashed var(--card-rule); }
.hp-pillola-list li:last-child { border-bottom: none; padding-bottom: 4px; }
.hp-pillola-voce { font-family: var(--sans); font-weight: 700; font-size: 17px; color: var(--card-ink); }
.hp-pillola-dati { font-family: var(--mono); font-size: 15px; color: var(--card-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-pillola-dati:has(.hp-pillola-record) { color: var(--card-accent); font-weight: 700; }
.hp-pillola-record { font-weight: 700; text-transform: lowercase; }
.hp-pillola-tutti { font-family: var(--mono); font-size: 13px; margin-top: 2px; color: var(--card-accent); font-weight: 700; }

/* .carta: come .hp-pillola ma per un blocco di pagina intero (oggi solo
 * /metodi/in-gioco) — un unico grande foglio chiaro invece di tante
 * schede piccole. Ridefinisce i token di colore usati da tutto cio' che
 * sta dentro (testo, link, timeline .mp-*): il resto del sito continua a
 * leggere --brick/--sage/--ivory-dim con i valori scuri normali, solo
 * dentro .carta puntano alle versioni scure-su-chiaro. Mockup di Dario,
 * 23/08/2026 — stessa idea delle "statistiche in pillole", applicata a
 * un intero blocco invece che a schede singole. */
.carta { background: var(--card-paper); color: var(--card-ink); border-radius: 28px;
  padding: 38px 36px 44px; box-shadow: none;
  --ink: var(--card-ink); --ink-soft: var(--card-soft); --ivory-dim: var(--card-soft);
  --paper-raised: var(--card-paper); --rule: var(--card-rule); --rule-strong: var(--card-rule);
  --link: var(--card-accent); --brick: var(--card-accent); --sage: var(--card-sage); }
.carta a { border-bottom-color: color-mix(in srgb, var(--card-accent) 45%, transparent); }
@media (max-width: 560px) { .carta { padding: 28px 20px 34px; border-radius: 20px; } }

/* .mp-timeline.a-schede: stessa idea di .carta ma un foglietto per
 * scheda invece di un unico foglio (home page, richiesta di Dario
 * 23/08/2026 — "come le statistiche in pillole"). La riga verticale
 * ha senso solo dentro una timeline continua: qui si nasconde. */
.mp-timeline.a-schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.mp-timeline.a-schede .mp-voce { background: var(--card-paper); color: var(--card-ink); border-radius: 20px;
  padding: 22px 24px; box-shadow: none;
  --ink: var(--card-ink); --ink-soft: var(--card-soft); --ivory-dim: var(--card-soft);
  --paper-raised: var(--card-paper); --rule: var(--card-rule); --rule-strong: var(--card-rule);
  --link: var(--card-accent); --brick: var(--card-accent); --sage: var(--card-sage); }
.mp-timeline.a-schede .mp-voce a { border-bottom-color: color-mix(in srgb, var(--card-accent) 45%, transparent); }
.mp-timeline.a-schede .mp-linea { display: none; }
.mp-timeline.a-schede .mp-corpo { padding-bottom: 0; }

/* Legenda degli stati di verifica del glossario: da riga unica a lista
 * con box, pallino + titolo + descrizione, righe tratteggiate — mockup
 * di Dario, 23/08/2026. Usata solo dalla pagina indice del glossario
 * (glossario_hub.html); la pagina di ogni singolo termine usa
 * .stato-definizione, non toccata. */
.legenda-stato { border: 1px solid var(--rule-strong); border-radius: 18px; padding: 22px 26px 6px; margin: 0 0 28px; }
.legenda-voce { display: flex; align-items: flex-start; gap: 11px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed var(--rule-strong); }
.legenda-voce:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 16px; }
.legenda-voce .stato-dot { margin-top: 6px; }
.legenda-voce-testo strong { display: block; font-size: 15px; color: var(--ink); }
.legenda-voce-testo span { font-size: 13px; color: var(--ink-soft); }
.legenda-nota { font-style: italic; font-size: 12.5px; color: var(--ink-soft); padding-top: 16px; border-top: 1px dotted var(--rule-strong); }
.stato-definizione { font-size: 13px; color: var(--ink-soft); background: var(--paper-raised); border-left: 3px solid var(--rule-strong); padding: 8px 14px; margin: 0 0 20px; max-width: 62ch; }
.stato-badge { font-weight: 700; color: var(--ink); }

.hp-context { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 10px; max-width: 42ch; }
.hp-record { display: flex; align-items: center; gap: 14px; background: var(--paper-raised); border: 1px solid var(--rule-strong); border-left: 4px solid var(--ember); border-radius: 8px; padding: 12px 16px; margin: 0 0 20px; font-size: 14px; color: var(--ink); }
.hp-record-badge { flex-shrink: 0; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ember2); border: 1.5px solid var(--ember); border-radius: 999px; padding: 3px 9px; }
.num-chip-record { border-color: var(--ember); color: var(--ember2); }
.chip-sub { color: var(--ink-soft); font-weight: 400; }

/* Metodi alla prova */
.verdetto { border: 1px solid var(--sage); border-left: 4px solid var(--sage); background: var(--paper-raised); border-radius: 10px;
  padding: 16px 20px; margin: 18px 0 26px; display: flex; align-items: center; gap: 18px; }
.verdetto.ko { border-color: var(--brick); border-left-color: var(--brick); }
.verdetto strong { font-size: 18px; font-family: var(--serif); color: var(--sage); }
.verdetto.ko strong { color: var(--brick); }
.verdetto p { font-size: 14px; color: var(--ink-soft); margin: 6px 0 0; }
.avviso-forte { border: 1px solid var(--rule); border-left: 4px solid var(--gold); border-radius: 8px;
  padding: 14px 16px; margin: 18px 0 26px; font-size: 14.5px; }
td.in-perdita { color: var(--brick); }
td.in-utile { color: var(--sage); }
tr.saldo td { border-top: 2px solid var(--rule-strong); font-size: 16px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule-strong);
  border: 1px solid var(--rule-strong); border-radius: 8px; overflow: hidden; margin: 0 0 8px; }
.stat-cell { background: var(--paper-raised); padding: 14px 16px; }
.stat-cell .num { display: block; font-family: var(--mono); font-weight: 800; font-size: 22px; color: var(--ember2); font-variant-numeric: tabular-nums; }
.stat-cell .num.pos { color: var(--sage); }
.stat-cell .num.neg { color: var(--brick); }
.stat-cell .lbl { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 3px; }

.nota-cella { display: block; white-space: normal; margin-top: 3px;
  font-size: 12px; line-height: 1.4; color: var(--ink-soft); }

/* Elenco "metodi alla prova" (hub /metodi): timeline con anello dorato
 * invece della tabella, mockup di Dario 23/08/2026 — un anello per
 * metodo, non uno stato (a differenza di .mp-badge in
 * _metodi_timeline.html, che invece codifica in corso/vinto/perso). */
.metodi-timeline { display: flex; flex-direction: column; gap: 14px; }
.metodi-voce { display: flex; gap: 14px; }
.metodi-voce:last-child .metodi-linea { display: none; }
.metodi-badge-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.metodi-badge { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gold);
  background: var(--paper); flex-shrink: 0; margin-top: 18px; }
.metodi-linea { flex: 1; width: 1px; background: var(--rule-strong); margin: 6px 0; min-height: 10px; }
.metodi-card { flex: 1; min-width: 0; background: var(--paper-raised); border: 1px solid var(--rule-strong);
  border-radius: 14px; padding: 16px 20px; }
.metodi-card:hover { border-color: var(--gold); }
.metodi-riga1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.metodi-riga1 a { font-family: var(--serif); font-weight: 700; font-size: 16.5px; color: var(--gold); }
.metodi-perc { font-family: var(--mono); font-weight: 700; font-size: 14px; white-space: nowrap; }
.metodi-perc.pos { color: var(--sage); }
.metodi-perc.neg { color: var(--brick); }
.metodi-desc { font-size: 13px; color: var(--ink-soft); margin: 5px 0 10px; }
.metodi-stats { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); }
.metodi-stats strong { color: var(--ink); font-weight: 700; }

.hp-sessioni { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hp-sessione { border: 1px solid var(--rule-strong); border-left: 3px solid var(--rule-strong); border-radius: 8px;
  padding: 11px 13px; background: var(--paper-raised); }
.hp-sessione.aperta { border-left-color: var(--gold); }
.hp-sessione.vinta { border-left-color: var(--sage); background: color-mix(in srgb, var(--sage) 10%, var(--paper-raised)); }
.hp-sessione.persa { border-left-color: var(--brick); background: color-mix(in srgb, var(--brick) 8%, var(--paper-raised)); }
.hp-sessione a { font-weight: 700; font-size: 14px; color: var(--ink); }
.hp-sessione-stato { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.hp-sessione-conto { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px;
  padding-top: 6px; border-top: 1px dotted var(--rule); }

.hp-sessione-giocata { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }
.hp-sessione-giocata strong { color: var(--ink); font-weight: 700; }
.hp-sessione-giocata a { font-weight: 700; }
.hp-sessione-giocata .chip-sub { display: inline-block; margin: 3px 8px 0 0;
  font-variant-numeric: tabular-nums; }

.hp-sessione-vincita { font-size: 13px; font-weight: 700; color: var(--sage);
  background: color-mix(in srgb, var(--sage) 18%, transparent); border-radius: 999px;
  padding: 3px 10px; margin-top: 6px; display: inline-block; }

.esiti-blocco { border: 1px solid var(--rule); border-left: 3px solid var(--rule); border-radius: 8px;
  padding: 10px 14px; margin: 0 0 12px; background: var(--paper-raised); }
.esiti-blocco.vinti { border-left-color: var(--sage); background: color-mix(in srgb, var(--sage) 12%, var(--paper-raised)); }
.esiti-blocco.chiusi { border-left-color: var(--brick); }
.esiti-blocco.nuovi { border-left-color: var(--gold); }
.esiti-titolo { font-family: var(--mono); font-size: 12px; margin: 0 0 7px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-soft); }
.esiti-blocco.vinti .esiti-titolo { color: var(--sage); font-weight: 700; }
.esiti-lista { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }
.esiti-lista li { font-size: 14px; line-height: 1.45; }
.esiti-blocco.vinti .esiti-lista a { color: var(--sage); }
.esiti-dett { color: var(--ink-soft); font-size: 12.5px; }
.esiti-lista li::before { content: none; }

.tag-nuovo { font-size: 10px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 1px 8px; vertical-align: 2px; }
.hp-sessione.nuovo { border-left-color: var(--gold); }

.esiti-titolo.vinta { color: var(--sage); font-weight: 700; }
.esiti-titolo.nuovo { color: var(--gold); }
.esiti-titolo.persa { color: var(--brick); }
.esiti-titolo.aperta { color: var(--ink-soft); }

.hp-sessione-sotto { font-size: 12px; color: var(--ink-soft); margin-top: 2px; font-style: italic; }

/* Timeline "metodi in gioco" — badge di stato + linea verticale che
 * collega le schede in ordine cronologico. Tre stati (in corso / chiuso
 * vincente / chiuso perdente) con lo stesso schema di colore ovunque nel
 * sito: brick, sage, e un terzo tono smorzato (--ivory-dim) per il
 * "perdente" cosi' da non confonderlo col brick dell'"in corso".
 * Riprodotto da un mockup di Dario (22/08/2026), armonizzato coi token
 * de Il Tabellone invece delle sue tinte chiare originali. */
.mp-sub { font-family: var(--serif); font-style: italic; color: var(--brick); font-size: 17px; margin: -2px 0 18px; }
.mp-legenda { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 26px;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); }
.mp-legenda span { display: inline-flex; align-items: center; gap: 7px; }

.mp-timeline { display: flex; flex-direction: column; }
.mp-voce { display: flex; gap: 16px; }
.mp-voce:last-child .mp-linea { display: none; }
.mp-badge-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.mp-badge { width: 40px; height: 40px; border-radius: 50%; background: var(--paper-raised);
  border: 2px solid var(--rule-strong); color: var(--ink); font-family: var(--mono); font-weight: 700;
  font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mp-badge.brick { border-color: var(--brick); color: var(--brick); }
.mp-badge.sage { border-color: var(--sage); color: var(--sage); }
.mp-badge.muto { border-color: var(--ivory-dim); color: var(--ivory-dim); }
.mp-linea { flex: 1; width: 2px; min-height: 24px; background: var(--rule-strong); margin: 4px 0; }
.mp-corpo { flex: 1; min-width: 0; padding-bottom: 30px; }
.mp-meta { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); margin: 2px 0 8px; }
.mp-pill { display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .06em; padding: 5px 12px; border-radius: 999px; margin-bottom: 10px; }
.mp-pill.brick { color: var(--brick); background: color-mix(in srgb, var(--brick) 16%, var(--paper-raised)); }
.mp-pill.sage { color: var(--sage); background: color-mix(in srgb, var(--sage) 16%, var(--paper-raised)); }
.mp-pill.muto { color: var(--ivory-dim); background: color-mix(in srgb, var(--ivory-dim) 16%, var(--paper-raised)); }
.mp-titolo { font-family: var(--serif); font-weight: 700; font-size: 18px; margin: 0 0 8px; line-height: 1.3; }
.mp-titolo a { color: var(--ink); border-bottom-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.mp-giocata { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 12px; }
.mp-giocata strong { color: var(--ink); }
.mp-esito { font-size: 13px; font-weight: 700; color: var(--sage); margin: 0 0 12px; }
.mp-esito.muto { color: var(--ivory-dim); font-weight: 400; }
.mp-progresso { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; }
.mp-dots { display: inline-flex; align-items: center; gap: 5px; }
.mp-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent;
  border: 1.5px solid var(--rule-strong); display: inline-block; }
.mp-dot.pieno { border-color: transparent; }
.mp-dots.brick .mp-dot.pieno { background: var(--brick); }
.mp-dots.sage .mp-dot.pieno { background: var(--sage); }
.mp-dots.muto .mp-dot.pieno { background: var(--ivory-dim); }
.mp-colpo-label { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.mp-saldo { font-size: 17px; font-weight: 700; }
.mp-saldo.neg { color: var(--brick); }
.mp-saldo.pos { color: var(--sage); }
.mp-saldo .chip-sub { font-size: 13px; font-weight: 400; margin-left: 8px; }
@media (max-width: 480px) {
  .mp-badge { width: 34px; height: 34px; font-size: 12.5px; }
  .mp-voce { gap: 12px; }
  .mp-titolo { font-size: 16.5px; }
}

.esiti-ricerca { list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-direction: column; gap: 2px; }
.esiti-ricerca li { display: flex; align-items: baseline; gap: 10px;
  padding: 9px 2px; border-bottom: 1px solid var(--rule); }
.esiti-ricerca li::before { content: none; }
.esiti-ricerca a { font-size: 15px; font-weight: 700; }
.esito-tipo { margin-left: auto; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft); white-space: nowrap; }
.conta-ricerca { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 10px; }
.vuoto-ricerca { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6;
  background: var(--paper-raised); border: 1px dashed var(--rule-strong); border-radius: 8px;
  padding: 14px 16px; }


/* ===================== HOME — "Versione C" (27/08/2026) ===================== */
/* Applica il mockup HTML/CSS/logo forniti da Dario (zip "Home Versione C
 * completa"). Stessa regola delle versioni precedenti: TUTTO il blocco
 * ha "body.home" davanti — attivo solo quando canonical_path == '/'
 * (vedi base.html) — e ridefinisce prima i token di colore esistenti
 * cosi' header, footer e i componenti condivisi (._condividi, .mp-*,
 * .stato-dot...) si ricolorano da soli. Le altre 16.000 pagine non
 * vedono nessuna di queste regole. */
body.home { font-family: var(--sans); }
body.home a { border-bottom: none; }
body.home .draw-next { margin: 16px 6px 0; padding-top: 14px; border-top: 1px solid var(--rule);
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
body.home .draw-next strong { color: var(--ink); font-weight: 800; }
body.home button, body.home input { font: inherit; }
body.home table { width: 100%; border-collapse: collapse; }

/* Testata condivisa: stessa struttura HTML di tutte le pagine, solo
 * ricolorata + resa sticky/sfumata quando si e' sulla home. */
body.home .site-header { position: sticky; top: 0; z-index: 30;
  background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
body.home .wordmark img.logo-svg { display: block; height: 34px; width: auto; }
@media (max-width: 460px) { body.home .wordmark img.logo-svg { height: 26px; } }
body.home .site-nav a { font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; padding: 10px 8px; border-radius: 8px; }
body.home .site-nav a:hover { background: var(--accent-soft); color: var(--h-orange); }

body.home .hero2 { margin-top: 26px; min-height: 390px; border: 1px solid var(--rule); border-radius: 22px;
  display: grid; grid-template-columns: 1.08fr .92fr; overflow: hidden; background: var(--h-grad-hero);
  box-shadow: none; }
body.home .hero2-copy { padding: 52px 50px; }
body.home .hero2-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: .13em; color: var(--link); font-weight: 900; }
body.home .hero2 h1 { font-size: clamp(36px,5.2vw,60px); letter-spacing: -.04em; line-height: .98; margin: 18px 0; color: var(--ink); }
body.home .hero2 .accent { color: var(--accent); }
body.home .hero2-copy p { color: var(--ink-soft); line-height: 1.65; max-width: 520px; font-size: 15px; margin: 0; }
body.home .hero2-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
body.home .hbtn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px;
  padding: 13px 18px; font-size: 12px; font-weight: 900; color: #fff; background: var(--accent);
  text-transform: uppercase; letter-spacing: .02em; }
body.home .hbtn.primary { background: var(--h-grad-primary); }
body.home .hero2-search { margin-top: 22px; max-width: 460px; }
body.home .hero2-search button { background: var(--h-grad-primary); color: #fff; }
body.home .hero2-search button:hover { opacity: .9; background: var(--h-grad-primary); }
body.home .hero2-art { position: relative; min-height: 390px; overflow: hidden;
  background: radial-gradient(circle at 70% 30%, rgba(15,27,45,.06), transparent 35%); }
body.home .horb { position: absolute; display: grid; place-items: center; border-radius: 50%; font-weight: 950; color: #fff;
  box-shadow: none; }
body.home .horb.a { width: 128px; height: 128px; background: var(--h-grad-orb-a); top: 75px; left: 145px; font-size: 38px; z-index: 2; }
body.home .horb.b { width: 168px; height: 168px; background: var(--h-grad-orb-b); right: 55px; bottom: 55px; font-size: 44px; }
@media (max-width: 920px) { body.home .hero2 { grid-template-columns: 1fr; } body.home .hero2-art { display: none; } }
@media (max-width: 620px) { body.home .hero2 { margin-top: 12px; border-radius: 16px; } body.home .hero2-copy { padding: 32px 22px; } body.home .hero2 h1 { font-size: 34px; } }

body.home .kpi2 { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin: 20px 0; }
@media (max-width: 780px) { body.home .kpi2 { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 460px) { body.home .kpi2 { grid-template-columns: repeat(2,1fr); } }
body.home .kpi2-card { border: 1px solid var(--rule); background: var(--h-grad-card); border-radius: 15px;
  padding: 18px; box-shadow: none; }
body.home .kpi2-card small { font-size: 9px; color: var(--ink-soft); text-transform: uppercase; font-weight: 850; letter-spacing: .03em; }
body.home .kpi2-card strong { display: block; font-size: 27px; margin: 7px 0; color: var(--ink); }
body.home .kpi2-card span { font-size: 10px; color: var(--ink-soft); }

body.home .h2-section-title { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 13px; flex-wrap: wrap; }
body.home .h2-section-title h2 { font-size: 21px; margin: 0; color: var(--ink); }
body.home .h2-section-title p { font-size: 12px; color: var(--ink-soft); margin: 5px 0 0; }
body.home .h2-link { font-size: 10px; color: var(--link); font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
body.home .h2-panel { border: 1px solid var(--rule); background: var(--h-grad-card); border-radius: 15px;
  padding: 18px; box-shadow: none; }

body.home .latest-grid2 { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(260px,.55fr); gap: 14px; }
@media (max-width: 920px) { body.home .latest-grid2 { grid-template-columns: 1fr; } }
body.home .draw-head2, body.home .draw-row2 { display: grid; grid-template-columns: 110px repeat(5, 1fr); align-items: center; gap: 10px; }
body.home .draw-head2 { font-size: 10px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; padding: 0 6px 10px; }
body.home .draw-head2 span:not(:first-child) { text-align: center; }
body.home .draw-row2 { padding: 10px 6px; border-top: 1px solid var(--rule); }
body.home .draw-wheel { font-weight: 800; font-size: 13px; }
body.home .draw-wheel a { color: inherit; }
body.home .draw-balls { display: contents; }
body.home .draw-ball { display: grid; place-items: center; justify-self: center; width: 44px; height: 44px; border-radius: 50%;
  background: #0f1b2d; font-size: 14px; font-weight: 900; color: #fff;
  box-shadow: none; }
body.home .draw-row2:nth-child(odd) .draw-ball { background: #0b3c49; }
@media (max-width: 780px) {
  body.home .draw-head2, body.home .draw-row2 { grid-template-columns: 70px repeat(5, 1fr); gap: 6px; }
  body.home .draw-ball { width: 34px; height: 34px; font-size: 11px; }
}
@media (max-width: 460px) {
  body.home .draw-head2, body.home .draw-row2 { grid-template-columns: 54px repeat(5, 1fr); gap: 4px; }
  body.home .draw-ball { width: 27px; height: 27px; font-size: 9px; }
}

body.home .h2-highlights { display: grid; gap: 11px; }
body.home .h2-spot { padding: 17px; border-radius: 14px; background: var(--paper-raised); border: 1px solid var(--rule); }
body.home .h2-spot small { color: var(--ink-soft); font-size: 9px; text-transform: uppercase; }
body.home .h2-spot strong { display: block; font-size: 32px; color: var(--accent); margin: 5px 0; }
body.home .h2-spot span { font-size: 11px; color: var(--ink-soft); }
body.home .h2-spot a { color: inherit; }
body.home .h2-spot-nota { font-size: 10.5px; color: var(--ink-soft); line-height: 1.5; margin: 12px 0 0; }
body.home .h2-spot-nota strong { color: var(--ink); }
body.home .h2-spot a.h2-spot-link { display: inline-block; margin-top: 10px; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em; color: var(--h-orange); }
body.home .h2-share-label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--rule); }
body.home .h2-share { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
body.home .h2-share a { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%;
  background: var(--accent); font-size: 10px; color: #fff; font-weight: 700; }
body.home .h2-share a:hover { background: var(--h-pink); }
body.home .h2-share a svg { display: block; }

body.home .analytics2 { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(270px,.65fr); gap: 14px; }
@media (max-width: 920px) { body.home .analytics2 { grid-template-columns: 1fr; } }
body.home .h2-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 9px; color: var(--ink-soft); margin: 8px 0 13px; }
body.home .h2-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; }
body.home .heatmap2 { display: grid; grid-template-columns: repeat(10,1fr); gap: 6px; }
@media (max-width: 620px) { body.home .heatmap2 { gap: 4px; } }
body.home .heat2 { aspect-ratio: .92; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; border-radius: 5px; color: var(--ink); text-decoration: none; padding: 2px; }
body.home .heat2-n { font-size: 17px; font-weight: 800; line-height: 1; }
body.home .heat2-sub { font-size: 9.5px; font-weight: 700; line-height: 1; opacity: .9; letter-spacing: .01em; white-space: nowrap; }
@media (max-width: 620px) { body.home .heat2-n { font-size: 13px; } body.home .heat2-sub { font-size: 7.5px; } body.home .heat2 { gap: 2px; } }
body.home .heat2.record { box-shadow: none; }
body.home .ranking2 th { font-size: 10px; color: var(--ink-soft); text-transform: uppercase; text-align: left; padding: 12px 10px; }
body.home .ranking2 td { padding: 13px 10px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-soft); }
body.home .ranking2 td:first-child { color: var(--h-gold); font-weight: 900; font-size: 16px; }
body.home .ranking2 td:first-child a { color: inherit; }

body.home .h2-features { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; }
@media (max-width: 920px) { body.home .h2-features { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 620px) { body.home .h2-features { grid-template-columns: repeat(2,1fr); } }
body.home .h2-card { border: 1px solid var(--rule); background: var(--h-grad-card); border-radius: 15px; padding: 17px; min-height: 118px; }
body.home .h2-card-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px;
  background: linear-gradient(145deg, var(--h-pink), var(--h-purple)); font-weight: 900; color: #fff; }
body.home .h2-card h3 { font-size: 14px; margin: 12px 0 6px; color: var(--ink); }
body.home .h2-card p { font-size: 10px; line-height: 1.5; color: var(--ink-soft); margin: 0; }

body.home .method-strip2 { display: grid; grid-template-columns: repeat(6,1fr); gap: 9px; }
@media (max-width: 920px) { body.home .method-strip2 { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 620px) { body.home .method-strip2 { grid-template-columns: repeat(2,1fr); } }
body.home .method2 { background: #fff; color: var(--ink); border-radius: 12px; padding: 13px; min-height: 140px; }
body.home .method2 h3 { font-size: 11px; margin: 0 0 8px; }
body.home .method2 h3 a { color: inherit; }
body.home .method2 p { font-size: 9px; line-height: 1.4; color: var(--ink-soft); margin: 0 0 8px; }
body.home .method2-status { font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
body.home .method2-status.negativo { color: var(--brick); }
body.home .method2-status.positivo { color: var(--sage); }
body.home .method2-status.neutro { color: var(--amber); }
body.home .method2-saldo { display: block; font-size: 14px; margin-top: 8px; font-weight: 950; }
body.home .method2-saldo.negativo { color: var(--brick); }
body.home .method2-saldo.positivo { color: var(--sage); }
body.home .method2-saldo.neutro { color: var(--amber); }

body.home .h2-tags { display: flex; flex-wrap: wrap; gap: 8px; }
body.home .h2-tag { border: 1px solid var(--rule-strong); border-radius: 99px; padding: 8px 12px; font-size: 10px; color: #e9dfff; background: var(--accent-soft); }

body.home .glossary2 { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
@media (max-width: 920px) { body.home .glossary2 { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 620px) { body.home .glossary2 { grid-template-columns: 1fr 1fr; } }
body.home .glossary2 .h2-card { background: #fff; color: var(--ink); }
body.home .glossary2 .h2-card p { color: var(--ink-soft); }

body.home .h2-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 780px) { body.home .h2-lower { grid-template-columns: 1fr; } }
body.home .h2-list { list-style: none; margin: 0; padding: 0; }
body.home .h2-list li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0;
  border-top: 1px solid var(--rule); font-size: 11px; color: var(--ink-soft); }
body.home .h2-list li a { color: inherit; }
body.home .h2-list time { color: var(--ink-soft); font-size: 9px; white-space: nowrap; }
body.home .h2-trust { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 20px 0; }
@media (max-width: 620px) { body.home .h2-trust { grid-template-columns: 1fr 1fr; } }
body.home .h2-trust div { padding: 13px; text-align: center; border-radius: 99px; background: var(--plaque);
  border: 1px solid var(--rule); font-size: 10px; color: var(--ink-soft); }

body.home .h2-footer { margin-top: 32px; border-top: 1px solid var(--rule); padding-top: 35px; }
body.home .h2-foot { display: grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 28px; }
@media (max-width: 780px) { body.home .h2-foot { grid-template-columns: 1fr 1fr; } }
body.home .h2-foot img { width: 170px; }
body.home .h2-foot p, body.home .h2-foot a { font-size: 10px; color: var(--ink-soft); line-height: 1.7; }
body.home .h2-foot a { display: block; }
body.home .h2-foot a:hover { color: var(--h-pink); }
body.home .h2-foot h4 { font-size: 11px; margin: 0 0 10px; color: var(--ink); }

/* "Metodi alla prova in gioco" — mockup di Dario, 28/08/2026: due colonne
 * (vittoriosi / in corso-perdenti), card con numero, meta a 3 colonne e
 * riquadro saldo. I dati (giocata aperta + resa storica) sono un incrocio
 * di due liste gia' calcolate — vedi genera_pagine.py, non nuove query. */
body.home .mig-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
body.home .mig-head-title { display: flex; gap: 14px; align-items: flex-start; max-width: 640px; }
body.home .mig-head-icon { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px;
  background: linear-gradient(145deg, var(--h-pink), var(--h-purple)); font-size: 20px; }
body.home .mig-head-title h2 { font-size: 22px; margin: 0 0 4px; color: var(--ink); }
body.home .mig-head-title p { font-size: 12.5px; color: var(--ink-soft); margin: 0; line-height: 1.5; }
body.home .mig-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
body.home .mig-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 10px;
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
body.home .mig-btn.primary { background: linear-gradient(100deg, var(--h-purple), var(--h-pink)); color: #fff; }
body.home .mig-btn.ghost { border: 1.5px solid var(--rule-strong); color: var(--ink); }

body.home .mig-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 920px) { body.home .mig-cols { grid-template-columns: 1fr; } }
body.home .mig-col { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--rule); border-radius: 16px; padding: 16px; }
body.home .mig-col-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
body.home .mig-col-title.good { color: var(--sage); }
body.home .mig-col-title.live { color: var(--h-orange); }
body.home .mig-col-title.bad { color: var(--brick); }
body.home .mig-col-title span { font-weight: 600; text-transform: none; color: var(--ink-soft); letter-spacing: 0; font-size: 12px; }
body.home .mig-col-title-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }

body.home .mig-card { display: flex; gap: 12px; align-items: stretch; border: 1px solid var(--rule); border-left: 3px solid var(--rule);
  border-radius: 14px; padding: 14px; background: var(--h-grad-card); }
body.home .mig-card.good { border-left-color: var(--sage); }
body.home .mig-card.bad { border-left-color: var(--brick); }
body.home .mig-card.live { border-left-color: var(--h-gold); }
body.home .mig-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 900; color: #fff; margin-top: 2px; }
body.home .mig-num.good { background: var(--sage); }
body.home .mig-num.bad { background: var(--brick); }
body.home .mig-num.live { background: var(--h-gold); color: #ffffff; }
body.home .mig-stato { font-size: 8.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em;
  border-radius: 999px; padding: 2px 8px; }
body.home .mig-stato.good { color: var(--sage); background: rgba(72,210,139,.14); }
body.home .mig-stato.bad { color: var(--brick); background: rgba(255,100,125,.14); }
body.home .mig-stato.live { color: var(--h-gold); background: rgba(255,177,38,.14); }
body.home .mig-esito-testo { font-size: 11.5px; color: var(--ink-soft); margin: 4px 0 10px; line-height: 1.4; }
body.home .mig-body { flex: 1; min-width: 0; }
body.home .mig-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.home .mig-title-row h3 { font-size: 14.5px; margin: 0; }
body.home .mig-title-row h3 a { color: var(--ink); }
body.home .mig-badge { font-size: 8.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em;
  color: var(--h-purple); border: 1px solid var(--h-purple); border-radius: 999px; padding: 2px 7px; }
body.home .mig-desc { font-size: 11.5px; color: var(--ink-soft); margin: 4px 0 10px; line-height: 1.4; }
body.home .mig-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 10px; }
body.home .mig-meta span { display: block; font-size: 8.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); margin-bottom: 3px; }
body.home .mig-meta strong { display: block; font-size: 11.5px; color: var(--ink); font-weight: 700; }
body.home .mig-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 10px; color: var(--ink-soft); padding-top: 8px; border-top: 1px dashed var(--rule); }

body.home .mig-saldo-box { flex: none; width: 108px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; border-radius: 12px; padding: 10px 8px; text-align: center; }
body.home .mig-saldo-box.good { background: rgba(72,210,139,.12); border: 1px solid rgba(72,210,139,.35); }
body.home .mig-saldo-box.bad { background: rgba(255,100,125,.12); border: 1px solid rgba(255,100,125,.35); }
body.home .mig-saldo-box.neu { background: rgba(255,177,38,.12); border: 1px solid rgba(255,177,38,.35); }
body.home .mig-saldo-label { font-size: 8.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
body.home .mig-saldo-val { font-size: 19px; font-weight: 900; }
body.home .mig-saldo-box.good .mig-saldo-val { color: var(--sage); }
body.home .mig-saldo-box.bad .mig-saldo-val { color: var(--brick); }
body.home .mig-saldo-box.neu .mig-saldo-val { color: var(--h-gold); }
body.home .mig-saldo-tag { font-size: 8.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
body.home .mig-saldo-box.good .mig-saldo-tag { color: var(--sage); }
body.home .mig-saldo-box.bad .mig-saldo-tag { color: var(--brick); }
body.home .mig-saldo-box.neu .mig-saldo-tag { color: var(--h-gold); }
@media (max-width: 560px) { body.home .mig-card { flex-direction: column; } body.home .mig-saldo-box { width: 100%; flex-direction: row; justify-content: space-between; padding: 8px 14px; } }

body.home .mig-vuoto { font-size: 12.5px; color: var(--ink-soft); font-style: italic; padding: 8px 4px; }

body.home .mig-legend { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 18px;
  border-top: 1px solid var(--rule); padding-top: 18px; }
@media (max-width: 920px) { body.home .mig-legend { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { body.home .mig-legend { grid-template-columns: 1fr; } }
body.home .mig-legend > div { display: flex; gap: 10px; align-items: flex-start; }
body.home .mig-legend-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 900; color: #fff; }
body.home .mig-legend-dot.good { background: var(--sage); }
body.home .mig-legend-dot.bad { background: var(--brick); }
body.home .mig-legend-dot.neu, body.home .mig-legend-dot.live { background: var(--h-gold); color: #ffffff; }
body.home .mig-legend-dot.info { background: var(--h-purple); }
body.home .mig-legend strong { display: block; font-size: 11.5px; color: var(--ink); margin-bottom: 2px; }
body.home .mig-legend span { font-size: 11px; color: var(--ink-soft); line-height: 1.4; }

/* "Glossario del Lotto" — mockup di Dario, 28/08/2026 ("Versione 2").
 * I conteggi per categoria e il totale sono quelli veri del glossario
 * (gruppi_glossario, stesso dato che genera /glossario), non i numeri
 * del mockup che erano solo segnaposto grafici. */
body.home .gloss3-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
body.home .gloss3-head-icon { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--h-purple); color: var(--h-purple); box-shadow: none; }
body.home .gloss3-head-icon svg { width: 26px; height: 26px; }
body.home .gloss3-head-text { flex: 1; min-width: 200px; }
body.home .gloss3-head-text h2 { font-size: 26px; margin: 4px 0 4px; color: var(--ink); }
body.home .gloss3-head-text h2 .accent { background: var(--h-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.home .gloss3-head-text p { font-size: 13px; color: var(--ink-soft); margin: 0; }
body.home .gloss3-head-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
body.home .gloss3-head-note { font-size: 11px; color: var(--ink-soft); }

body.home .gloss3-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 1000px) { body.home .gloss3-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { body.home .gloss3-grid { grid-template-columns: repeat(2, 1fr); } }
body.home .gloss3-card { display: flex; flex-direction: column; align-items: center; text-align: center;
  border: 1px solid var(--rule); border-radius: 16px; padding: 22px 16px; background: var(--h-grad-card); }
body.home .gloss3-card-icon { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; }
body.home .gloss3-card-icon svg { width: 26px; height: 26px; }
body.home .gloss3-card h3 { font-size: 15px; margin: 0 0 6px; color: var(--ink); }
body.home .gloss3-card p { flex: 1 0 auto; font-size: 11.5px; color: var(--ink-soft); line-height: 1.45; margin: 0 0 12px; }
body.home .gloss3-count { border-top: 1px solid var(--rule); padding-top: 12px; margin-bottom: 14px; width: 100%; }
body.home .gloss3-count strong { display: block; font-size: 26px; font-weight: 900; }
body.home .gloss3-count span { font-size: 10.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
body.home .gloss3-esplora { font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em;
  padding: 8px 16px; border-radius: 8px; border: 1.5px solid; }
body.home .gloss3-card.viola .gloss3-card-icon { background: var(--h-purple); }
body.home .gloss3-card.viola .gloss3-count strong, body.home .gloss3-esplora.viola { color: var(--h-purple); border-color: var(--h-purple); }
body.home .gloss3-card.magenta .gloss3-card-icon { background: var(--h-pink); }
body.home .gloss3-card.magenta .gloss3-count strong, body.home .gloss3-esplora.magenta { color: var(--h-pink); border-color: var(--h-pink); }
body.home .gloss3-card.arancio .gloss3-card-icon { background: var(--h-orange); }
body.home .gloss3-card.arancio .gloss3-count strong, body.home .gloss3-esplora.arancio { color: var(--h-orange); border-color: var(--h-orange); }
body.home .gloss3-card.oro .gloss3-card-icon { background: var(--h-gold); }
body.home .gloss3-card.oro .gloss3-count strong, body.home .gloss3-esplora.oro { color: var(--h-gold); border-color: var(--h-gold); }
body.home .gloss3-card.blu .gloss3-card-icon { background: var(--h-blue); }
body.home .gloss3-card.blu .gloss3-count strong, body.home .gloss3-esplora.blu { color: var(--h-blue); border-color: var(--h-blue); }

body.home .gloss3-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; border: 1px solid var(--rule);
  border-radius: 18px; padding: 24px 26px; }
@media (max-width: 920px) { body.home .gloss3-trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { body.home .gloss3-trust { grid-template-columns: 1fr; } }
body.home .gloss3-trust > div { display: flex; align-items: center; gap: 14px; }
body.home .gloss3-trust-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-size: 19px; background: rgba(161,56,235,.22); box-shadow: none; }
body.home .gloss3-trust-ico.good { background: rgba(72,210,139,.2); box-shadow: none; }
body.home .gloss3-trust-ico.blu { background: rgba(85,120,246,.22); box-shadow: none; }
body.home .gloss3-trust-ico.magenta { background: rgba(238,59,148,.22); box-shadow: none; }
body.home .gloss3-trust strong { display: block; font-size: 14px; color: var(--ink); margin-bottom: 2px; }
body.home .gloss3-trust span { font-size: 11.5px; color: var(--ink-soft); line-height: 1.4; }

/* Sezione "Estrazioni" di /lotto — mockup di Dario, 28/08/2026. La ruota
 * mostrata e' scelta a caso a ogni rigenerazione (vedi genera_pagine.py,
 * random.choice su ultima_estrazione["ruote"]) — un sito statico non puo'
 * cambiarla a ogni visita, solo a ogni notte. */
body.home .lh-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
body.home .lh-head-icon { flex: none; width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(145deg, var(--h-orange), var(--h-pink)); display: grid; place-items: center;
  box-shadow: none; }
body.home .lh-head-icon svg { width: 26px; height: 26px; }
body.home .lh-head-text { flex: 1; min-width: 200px; }
body.home .lh-head-text h2 { font-size: 24px; margin: 2px 0 4px; color: var(--ink); }
body.home .lh-head-text p { font-size: 13px; color: var(--ink-soft); margin: 0; }

body.home .lh-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 920px) { body.home .lh-grid { grid-template-columns: 1fr; } }
body.home .lh-panel-main { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; border: 1px solid var(--rule);
  border-radius: 16px; padding: 22px; background: var(--h-grad-card); }
@media (max-width: 620px) { body.home .lh-panel-main { grid-template-columns: 1fr; } }
body.home .lh-draw-info h3 { font-size: 17px; margin: 0 0 4px; color: var(--ink); }
body.home .lh-data { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 14px; }
body.home .lh-balls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
body.home .lh-meta-row { display: flex; gap: 26px; padding-top: 14px; border-top: 1px dashed var(--rule); margin-bottom: 14px; }
body.home .lh-meta-row span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); margin-bottom: 3px; }
body.home .lh-meta-row strong { font-size: 14px; color: var(--ink); }
body.home .lh-draw-stats { display: flex; flex-direction: column; gap: 16px; padding-left: 24px; border-left: 1px dashed var(--rule); }
@media (max-width: 620px) { body.home .lh-draw-stats { padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px dashed var(--rule); } }
body.home .lh-stat { display: flex; gap: 10px; align-items: flex-start; }
body.home .lh-stat-ico { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  font-size: 14px; background: rgba(161,56,235,.2); }
body.home .lh-stat-ico.good { background: rgba(72,210,139,.2); }
body.home .lh-stat-ico.gold { background: rgba(255,177,38,.2); }
body.home .lh-stat small { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
body.home .lh-stat strong { display: block; font-size: 19px; color: var(--h-orange); margin: 2px 0; }
body.home .lh-stat span { font-size: 10.5px; color: var(--ink-soft); }

body.home .lh-side-cards { display: flex; flex-direction: column; gap: 16px; }
body.home .lh-card { display: block; flex: 1; border: 1px solid var(--rule); border-radius: 16px; padding: 18px;
  background: var(--h-grad-card); }
body.home .lh-card h4 { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; margin: 0 0 8px; color: var(--ink); }
body.home .lh-card h4 svg { width: 20px; height: 20px; flex: none; }
body.home .lh-card p { font-size: 11.5px; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.4; }
body.home .lh-card-btn { display: block; text-align: center; font-size: 10.5px; font-weight: 900; text-transform: uppercase;
  letter-spacing: .03em; padding: 10px; border-radius: 8px; border: 1.5px solid; }
body.home .lh-card.viola h4 { color: var(--h-purple); } body.home .lh-card-btn.viola { color: var(--h-purple); border-color: var(--h-purple); }
body.home .lh-card.arancio h4 { color: var(--h-orange); } body.home .lh-card-btn.arancio { color: var(--h-orange); border-color: var(--h-orange); }

body.home .lh-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 14px;
  border: 1px solid var(--rule); border-radius: 12px; padding: 14px 18px; font-size: 11px; color: var(--ink-soft); }
body.home .lh-foot strong { color: var(--h-orange); }

/* Sezione "Statistiche" di /lotto — mockup di Dario, 28/08/2026. Riusa
 * .gloss3-head/.gloss3-grid/.gloss3-card/.gloss3-esplora del glossario
 * (stessa struttura), solo il contenuto interno della card cambia: una
 * lista classificata invece del semplice conteggio. */
body.home .stat4-list { width: 100%; list-style: none; margin: 0 0 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
body.home .stat4-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); display: block; margin-bottom: 8px; }
body.home .stat4-list li:not(.stat4-label) { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
body.home .stat4-rank { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 900; color: #fff; }
body.home .stat4-rank.magenta { background: var(--h-pink); }
body.home .stat4-rank.viola { background: var(--h-purple); }
body.home .stat4-list strong { font-size: 15px; color: var(--ink); }
body.home .stat4-meta { margin-left: auto; font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
body.home .stat4-big { width: 100%; text-align: center; padding-top: 12px; border-top: 1px solid var(--rule); margin-bottom: 14px; }
body.home .stat4-big strong { display: block; font-size: 40px; font-weight: 900; color: var(--h-orange); margin: 4px 0; }
body.home .stat4-icon-num { font-size: 22px; font-weight: 900; color: var(--ink); }
body.home .gloss3-grid.stat4-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { body.home .gloss3-grid.stat4-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { body.home .gloss3-grid.stat4-grid { grid-template-columns: 1fr; } }

/* Sezione "Quando" di /lotto — mockup di Dario, 28/08/2026: 2 card
 * orizzontali invece della griglia a 4 colonne generica, dentro un unico
 * riquadro con illustrazione decorativa (calendario+orologio, solo
 * grafica, nessun dato — replica il mockup a richiesta di Dario). */
body.home .quando-box { position: relative; overflow: hidden; border: 1px solid var(--rule); border-radius: 20px;
  padding: 26px; background: var(--paper-raised); }
body.home .quando-head-icon { flex: none; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--h-pink), var(--h-purple)); box-shadow: none; }
body.home .quando-head-icon svg { width: 26px; height: 26px; }
body.home .quando-deco { position: absolute; top: 10px; right: 24px; width: 220px; height: 170px; opacity: .9; pointer-events: none; z-index: 0; }
@media (max-width: 1100px) { body.home .quando-deco { display: none; } }
body.home .quando-box .gloss3-head { position: relative; z-index: 1; }
body.home .quando-box .gloss3-head-text { max-width: 56%; }
@media (max-width: 1100px) { body.home .quando-box .gloss3-head-text { max-width: none; } }
body.home .quando-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule); }
@media (max-width: 700px) { body.home .quando-grid { grid-template-columns: 1fr; } }
body.home .quando-card { display: flex; align-items: center; gap: 18px; border: 1.5px solid var(--rule);
  border-radius: 16px; padding: 20px; background: var(--h-grad-card); }
body.home .quando-card.viola { border-color: rgba(161,56,235,.55);
  background: radial-gradient(120% 140% at 0% 0%, rgba(161,56,235,.16), transparent 60%), var(--h-grad-card); }
body.home .quando-card.arancio { border-color: rgba(255,129,33,.55);
  background: radial-gradient(120% 140% at 0% 0%, rgba(255,129,33,.16), transparent 60%), var(--h-grad-card); }
body.home .quando-icon { flex: none; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; }
body.home .quando-icon svg { width: 26px; height: 26px; }
body.home .quando-icon.viola { background: linear-gradient(145deg, var(--h-purple), var(--h-pink)); box-shadow: none; }
body.home .quando-icon.arancio { background: linear-gradient(145deg, var(--h-orange), #d97706); box-shadow: none; }
body.home .quando-body { flex: 1; min-width: 0; }
body.home .quando-body h3 { font-size: 16px; margin: 0 0 4px; color: var(--ink); }
body.home .quando-body p { font-size: 12px; color: var(--ink-soft); margin: 0; line-height: 1.4; }
body.home .quando-arrow { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: 18px; font-weight: 900; }
body.home .quando-arrow.viola { color: var(--h-purple); background: rgba(161,56,235,.14); }
body.home .quando-arrow.arancio { color: var(--h-orange); background: rgba(255,129,33,.14); }

/* Sezione "Combinazioni" di /lotto — mockup di Dario, 28/08/2026. Stesso
 * riquadro con bordo sfumato di "Quando" (.quando-box), card con icona
 * circolare, sottolineatura colorata e un pattern di puntini decorativo
 * (solo grafica, nessun dato) in alto a destra della testata e di ogni
 * card. */
body.home .combo-dots { position: absolute; top: 18px; right: 18px; width: 64px; height: 50px;
  background-image: radial-gradient(circle, rgba(15,27,45,.09) 1.4px, transparent 1.4px);
  background-size: 11px 11px; opacity: .5; pointer-events: none; }
body.home .combo-dots-head { top: 20px; right: 24px; width: 90px; height: 64px; z-index: 0; }
@media (max-width: 1100px) { body.home .combo-dots-head { display: none; } }
body.home .combo-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule); }
@media (max-width: 920px) { body.home .combo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { body.home .combo-grid { grid-template-columns: 1fr; } }
body.home .combo-card { position: relative; overflow: hidden; display: flex; flex-direction: column;
  border: 1.5px solid var(--rule); border-radius: 16px; padding: 20px; background: var(--h-grad-card); }
body.home .combo-card.magenta { border-color: rgba(238,59,148,.4); }
body.home .combo-card.arancio { border-color: rgba(255,129,33,.4); }
body.home .combo-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
body.home .combo-icon { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; }
body.home .combo-icon svg { width: 24px; height: 24px; }
body.home .combo-icon.magenta { background: linear-gradient(145deg, var(--h-pink), var(--h-purple)); box-shadow: none; }
body.home .combo-icon.arancio { background: linear-gradient(145deg, var(--h-orange), #d97706); box-shadow: none; }
body.home .combo-card h3 { font-size: 17px; margin: 0 0 8px; color: var(--ink); }
body.home .combo-underline { display: block; width: 34px; height: 3px; border-radius: 3px; margin-bottom: 14px; }
body.home .combo-underline.magenta { background: linear-gradient(90deg, var(--h-pink), var(--h-purple)); }
body.home .combo-underline.arancio { background: linear-gradient(90deg, var(--h-orange), #d97706); }
body.home .combo-underline.viola { background: linear-gradient(90deg, var(--h-purple), var(--h-pink)); }
body.home .gloss3-head-text .combo-underline { margin: 8px 0 4px; }

/* Sezione "Glossario e metodologia" di /lotto — mockup di Dario,
 * 29/08/2026: 2 card larghe con icona, sottolineatura, link+freccia
 * tonda e una grande illustrazione decorativa (libro/calcolatrice, solo
 * grafica) sul lato destro di ciascuna. */
body.home .gm-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule); }
@media (max-width: 780px) { body.home .gm-grid { grid-template-columns: 1fr; } }
body.home .gm-card { position: relative; overflow: hidden; border: 1.5px solid var(--rule); border-radius: 16px;
  padding: 24px; background: var(--h-grad-card); min-height: 210px; }
body.home .gm-card.viola { border-color: rgba(161,56,235,.45); }
body.home .gm-card.arancio { border-color: rgba(255,129,33,.45); }
body.home .gm-icon { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 10px; }
body.home .gm-icon svg { width: 26px; height: 26px; }
body.home .gm-icon.viola { background: linear-gradient(145deg, var(--h-purple), var(--h-pink)); box-shadow: none; }
body.home .gm-icon.arancio { background: linear-gradient(145deg, var(--h-orange), #d97706); box-shadow: none; }
body.home .gm-card h3 { position: relative; z-index: 1; font-size: 19px; margin: 0 0 4px; color: var(--ink); }
body.home .gm-card p { position: relative; z-index: 1; max-width: 70%; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 0; }
body.home .gm-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); max-width: 70%; }
body.home .gm-link { font-size: 13.5px; font-weight: 800; }
body.home .gm-link.viola { color: var(--h-purple); }
body.home .gm-link.arancio { color: var(--h-orange); }
body.home .gm-arrow { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 900; }
body.home .gm-arrow.viola { background: linear-gradient(145deg, var(--h-purple), var(--h-pink)); }
body.home .gm-arrow.arancio { background: linear-gradient(145deg, var(--h-orange), #d97706); }
body.home .gm-deco { position: absolute; right: -6px; bottom: -6px; width: 130px; height: 116px; opacity: .8; pointer-events: none; }
@media (max-width: 480px) { body.home .gm-deco { display: none; } body.home .gm-card p, body.home .gm-foot { max-width: none; } }

/* Sezione "Raggruppamenti oggettivi" di /lotto — mockup di Dario,
 * 29/08/2026: 6 card compatte con icona, testo e conteggio reale delle
 * sotto-pagine (9 decine, 10 cadenze, 9 figure, 9 cifre — invarianti
 * fatte rispettare dai guard del generatore, §8 HANDOFF). */
body.home .rago-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 22px; }
@media (max-width: 1100px) { body.home .rago-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { body.home .rago-grid { grid-template-columns: repeat(2, 1fr); } }
body.home .rago-card { display: flex; flex-direction: column; border: 1.5px solid var(--rule); border-radius: 14px;
  padding: 18px; background: var(--h-grad-card); }
body.home .rago-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  margin-bottom: 12px; font-size: 16px; font-weight: 900; color: #fff; }
body.home .rago-icon svg { width: 20px; height: 20px; }
body.home .rago-icon.viola { background: linear-gradient(145deg, var(--h-purple), #0e7f8c); }
body.home .rago-icon.magenta { background: linear-gradient(145deg, var(--h-pink), #3b82c4); }
body.home .rago-icon.arancio { background: linear-gradient(145deg, var(--h-orange), #d97706); }
body.home .rago-icon.blu { background: linear-gradient(145deg, var(--h-blue), #5470e0); }
body.home .rago-icon.verde { background: linear-gradient(145deg, var(--sage), #2a8a52); }
body.home .rago-card h3 { font-size: 15px; margin: 0 0 6px; color: var(--ink); }
body.home .rago-card p { flex: 1 0 auto; font-size: 11.5px; color: var(--ink-soft); line-height: 1.4; margin: 0 0 14px; }
body.home .rago-link { display: block; font-size: 11px; font-weight: 800; white-space: nowrap; }
body.home .rago-link.viola { color: var(--h-purple); }
body.home .rago-link.magenta { color: var(--h-pink); }
body.home .rago-link.arancio { color: var(--h-orange); }
body.home .rago-link.blu { color: var(--h-blue); }
body.home .rago-link.verde { color: var(--sage); }

/* Pagina /numero — mockup di Dario, 29/08/2026. Hero riusa hero2/horb
 * (stesse palline dinamiche di home e /lotto). Qui sotto solo lo stile
 * delle due tabelle (medaglie per le prime 3 righe, pallina per il
 * numero). */

body.home .num-panel { padding: 22px; }
body.home .num-table td, body.home .num-table th { white-space: nowrap; }
body.home .num-pos { text-align: center; font-family: var(--mono); color: var(--ink-soft); font-size: 13px; }
body.home .num-pill { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: linear-gradient(145deg, var(--h-pink), var(--h-purple)); color: #fff;
  font-weight: 800; font-size: 12.5px; }

/* Riquadro "dati aggiornati" — riusato da /ambo e /terno (mockup di
 * Dario, 29/08/2026), stesso template classifica.html condiviso con
 * /ambo/tabella-completa, /terno/tabella-completa ecc.: tutto guardato
 * da "stile_ricco", chi non lo passa vede la pagina identica a prima. */
body.home .num-hero-box { align-self: center; display: flex; gap: 14px; align-items: flex-start;
  background: var(--paper-raised); border: 1px solid var(--rule);
  border-radius: 16px; padding: 20px; box-shadow: none; }
body.home .num-hero-box-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(15,27,45,.06); font-size: 17px; }
body.home .num-hero-box small { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); opacity: .8; margin-bottom: 4px; }
body.home .num-hero-box strong { display: block; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
body.home .num-hero-box span { font-size: 11.5px; color: var(--ink-soft); opacity: .85; line-height: 1.5; }
@media (max-width: 920px) { body.home .num-hero-box { margin-top: 18px; } }
/* Verdetto in attivo/perdita (pagina /metodi/<slug>) — stessa card, solo
 * tinta di verde o rosso a seconda dell'esito reale. */
body.home .num-hero-box.verdetto-ok { border-color: rgba(72,210,139,.5); background: #e8f4ec; }
body.home .num-hero-box.verdetto-ok small { color: var(--sage, #48d28b); opacity: 1; font-weight: 800; }
body.home .num-hero-box.verdetto-no { border-color: rgba(255,107,129,.5); background: #fbeceb; }
body.home .num-hero-box.verdetto-no small { color: var(--brick); opacity: 1; font-weight: 800; }

/* Palline dinamiche "ambo/terno piu' ritardatario ora" in hero di /ambo e
 * /terno (29/08/2026, richiesta di Dario) — dato vero (max ritardo_attuale
 * su tutti gli ambi/terni con pagina), non un mockup statico. */
body.home .num-hero-delay { display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; padding: 10px 18px 10px 10px;
  text-decoration: none; background: rgba(15,27,45,.035); border: 1px solid var(--rule); border-radius: 40px; }
body.home .num-hero-delay:hover { background: rgba(15,27,45,.06); }
body.home .hd-balls { display: flex; }
body.home .hd-ball { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--sans); font-weight: 900; font-size: 13.5px; color: #fff; border: 2px solid #fff;
  background: var(--h-grad-orb-a); box-shadow: none; }
body.home .hd-ball:nth-child(2) { background: var(--h-grad-orb-b); margin-left: -12px; }
body.home .hd-ball:nth-child(3) { background: var(--h-grad-primary); margin-left: -12px; }
body.home .num-hero-delay small { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); opacity: .8; margin-bottom: 2px; }
body.home .num-hero-delay strong { display: block; font-size: 13px; color: var(--ink); }

/* Sezione "Formazioni e categorie speciali" di /lotto — mockup di Dario,
 * 29/08/2026: 20 card compatte (le vere 20 "categorie oggettive" del
 * glossario, stesso elenco di sempre) con icona, titolo, descrizione
 * breve (parafrasi della definizione reale) e freccia. */
body.home .fcs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 22px; }
@media (max-width: 1200px) { body.home .fcs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) { body.home .fcs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { body.home .fcs-grid { grid-template-columns: 1fr; } }
body.home .fcs-card { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--rule);
  border-radius: 12px; padding: 12px; background: var(--h-grad-card); }
body.home .fcs-card.magenta { border-color: rgba(238,59,148,.35); }
body.home .fcs-card.viola { border-color: rgba(161,56,235,.35); }
body.home .fcs-card.arancio { border-color: rgba(255,129,33,.35); }
body.home .fcs-card.blu { border-color: rgba(85,120,246,.35); }
body.home .fcs-card.verde { border-color: rgba(72,210,139,.35); }
body.home .fcs-icon { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
body.home .fcs-icon svg { width: 18px; height: 18px; }
body.home .fcs-icon.magenta { background: linear-gradient(145deg, var(--h-pink), #3b82c4); }
body.home .fcs-icon.viola { background: linear-gradient(145deg, var(--h-purple), #0e7f8c); }
body.home .fcs-icon.arancio { background: linear-gradient(145deg, var(--h-orange), #d97706); }
body.home .fcs-icon.blu { background: linear-gradient(145deg, var(--h-blue), #5470e0); }
body.home .fcs-icon.verde { background: linear-gradient(145deg, var(--sage), #2a8a52); }
body.home .fcs-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
body.home .fcs-text strong { font-size: 12.5px; color: var(--ink); font-weight: 700; }
body.home .fcs-text span { font-size: 10px; color: var(--ink-soft); }
body.home .fcs-arrow { flex: none; font-size: 15px; font-weight: 900; }
body.home .fcs-arrow.magenta { color: var(--h-pink); }
body.home .fcs-arrow.viola { color: var(--h-purple); }
body.home .fcs-arrow.arancio { color: var(--h-orange); }
body.home .fcs-arrow.blu { color: var(--h-blue); }
body.home .fcs-arrow.verde { color: var(--sage); }
body.home .combo-card p { flex: 1 0 auto; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 16px; }

/* Pagina /ruota — mockup di Dario, 29/08/2026: tabella comparativa con
 * icona+colore per ruota (decorazione, richiami reali alle citta': il
 * giglio di Firenze, l'ancora di Genova porto storico, il Vesuvio di
 * Napoli, la stella per la ruota Nazionale, la Mole di Torino...), legenda
 * delle colonne, 3 card di rimando ad altre pagine reali e banner finale. */
body.home .h2-badge-info { flex: none; font-size: 10.5px; font-weight: 700; color: var(--ink-soft);
  background: rgba(15,27,45,.035); border: 1px solid var(--rule); border-radius: 99px; padding: 7px 14px; }
body.home .ruota-name { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; color: var(--ink); }
body.home .ruota-ico { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; }
body.home .cn-freq a, body.home .cn-freq { color: var(--h-gold); font-weight: 700; }
body.home .cn-rit a, body.home .cn-rit { color: var(--ink); font-weight: 700; }
body.home .ca-freq a, body.home .ca-freq { color: var(--h-purple); font-weight: 700; }
body.home .ca-rit a, body.home .ca-rit { color: var(--h-orange); font-weight: 700; }

body.home .h2-legend { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
body.home .h2-legend-text { flex: 1 1 260px; min-width: 220px; }
body.home .h2-legend-text h3 { margin: 0 0 6px; font-size: 15px; color: var(--ink); }
body.home .h2-legend-text p { margin: 0; font-size: 12px; color: var(--ink-soft); line-height: 1.6; }
body.home .h2-legend-items { flex: 2 1 420px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
body.home .h2-legend-items div { display: flex; flex-direction: column; gap: 4px; }
body.home .h2-legend-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: none; }
body.home .h2-legend-items strong { font-size: 11.5px; color: var(--ink); }
body.home .h2-legend-items small { font-size: 10px; color: var(--ink-soft); }
@media (max-width: 780px) { body.home .h2-legend-items { grid-template-columns: 1fr 1fr; } }

body.home .h2-cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { body.home .h2-cards-3 { grid-template-columns: 1fr; } }
body.home .h2-card-lite { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--rule);
  background: var(--h-grad-card); border-radius: 15px; box-shadow: none; }
body.home .h2cl-ico { font-size: 22px; }
body.home .h2-card-lite strong { font-size: 15px; color: var(--ink); }
body.home .h2-card-lite > span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; flex: 1; }
body.home .h2cl-link { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; color: var(--link); }
body.home .h2cl-link.h2cl-link-primary { display: inline-block; padding: 10px 16px; border-radius: 10px;
  background: var(--h-grad-primary); color: #fff; text-align: center; }

body.home .h2-cta-banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 26px 30px; border-radius: 18px; background: var(--h-grad-primary); }
body.home .h2-cta-banner strong { display: block; font-size: 17px; color: #fff; margin-bottom: 4px; }
body.home .h2-cta-banner span { font-size: 12.5px; color: rgba(255,255,255,.9); }
body.home .h2-cta-banner .hbtn.primary { background: rgba(10,5,32,.32); border: 1px solid rgba(255,255,255,.4); flex: none; }

/* Pagine /ruota/<citta'> — mockup di Dario, 29/08/2026: hero senza mappa
 * (troppo lavoro per un elemento puramente decorativo, vedi anche /ruota),
 * layout a due colonne (contenuto principale + barra laterale con il
 * riepilogo e le due mini-classifiche), tabella dei 90 numeri divisa in
 * due blocchi da 45 per stare in meno altezza. */
body.home .ruota-hero-top { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
body.home .ruota-hero-badge { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-size: 21px; box-shadow: none; }
body.home .ruota-hero-top h1 { margin: 0; }
body.home .ruota-hero .hero2-eyebrow { display: block; margin: 4px 0 14px; }
body.home .ruota-hero-links { display: flex; align-items: center; justify-content: center; padding: 30px; }
body.home .rhl-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); font-weight: 800; margin-bottom: 14px; text-align: center; }
body.home .rhl-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
body.home .rhl-grid a { font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 99px;
  background: rgba(15,27,45,.06); border: 1px solid var(--rule); color: var(--ink); }
body.home .rhl-grid a:hover { background: rgba(15,27,45,.09); }

body.home .hp-grid-side { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 20px; align-items: start; }
@media (max-width: 920px) { body.home .hp-grid-side { grid-template-columns: 1fr; } }
body.home .hp-main-col { min-width: 0; display: flex; flex-direction: column; gap: 46px; }
body.home .hp-side-col { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 84px; }
@media (max-width: 920px) { body.home .hp-side-col { position: static; } }

body.home .numeri-doppia { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { body.home .numeri-doppia { grid-template-columns: 1fr; } }
/* Le 5 colonne non ci stavano in meta' larghezza con le etichette intere
 * e lo scroll orizzontale di riserva era brutto (barra grigia pesante) —
 * segnalato da Dario 29/08/2026: tabella piu' compatta, cosi' di solito
 * non serve nemmeno scorrere. */
body.home .numeri-doppia table.data th, body.home .numeri-doppia table.data td { padding: 4px 6px; font-size: 11px; }
body.home .table-wrap { scrollbar-width: thin; scrollbar-color: rgba(15,27,45,.28) transparent; }
body.home .table-wrap::-webkit-scrollbar { height: 6px; }
body.home .table-wrap::-webkit-scrollbar-track { background: transparent; }
body.home .table-wrap::-webkit-scrollbar-thumb { background: rgba(15,27,45,.09); border-radius: 99px; }

body.home .rs-panel h3 { margin: 0 0 12px; font-size: 14px; color: var(--ink); }
body.home .rs-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--rule); font-size: 12px; }
body.home .rs-row:first-of-type { border-top: none; }
body.home .rs-row > span { color: var(--ink-soft); }
body.home .rs-row strong { font-weight: 800; color: var(--ink); }
body.home .rs-table { font-size: 11.5px; }
body.home .rs-table th, body.home .rs-table td { padding: 6px 5px; }
body.home .rs-panel .h2cl-link { display: inline-block; margin-top: 10px; }
body.home .rs-links { display: flex; flex-wrap: wrap; gap: 8px; }
body.home .rs-links a, body.home .rs-links span.rs-chip { font-size: 11px; padding: 6px 10px; border-radius: 99px;
  background: rgba(15,27,45,.035); border: 1px solid var(--rule); color: var(--ink-soft); }
body.home .rs-links span.rs-chip a { color: var(--link); border: none; padding: 0; background: none; border-radius: 0; }

body.home .h2-callout { display: flex; gap: 16px; align-items: flex-start; }
body.home .h2-callout-ico { flex: none; font-size: 22px; }
body.home .h2-callout h3 { margin: 0 0 6px; font-size: 14px; color: var(--ink); }
body.home .h2-callout p { margin: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }
body.home .h2-callout strong { color: var(--ink); }

/* Pagina /metodi — mockup di Dario, 29/08/2026: stessi dati gia'
 * pubblicati (righe_hub/sessioni), solo impaginati a lista invece che a
 * schede, con filtri client-side (nessun dato nuovo, nessuna chiamata di
 * rete: e' solo show/hide di righe gia' presenti nell'HTML). */
body.home .mh-legend { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; }
body.home .mh-legend div { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ink-soft); }
body.home .mh-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
body.home .mh-dot.pos { background: var(--sage, #48d28b); }
body.home .mh-dot.neg { background: #ff6b81; }
body.home .mh-dot.gioco { background: var(--h-orange); }
body.home .mh-legend-note { font-size: 11px; color: var(--ink-soft); line-height: 1.6; margin: 0; }
body.home .mh-avviso p { margin: 0; font-size: 12.5px; }

body.home .mh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { body.home .mh-stats { grid-template-columns: 1fr; } }
body.home .mh-stat { display: flex; align-items: center; gap: 14px; }
body.home .mh-stat-ico { flex: none; font-size: 22px; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(15,27,45,.035); display: grid; place-items: center; }
body.home .mh-stat strong { display: block; font-size: 15px; color: var(--ink); }
body.home .mh-stat span { font-size: 11.5px; color: var(--ink-soft); }

body.home .mh-filtri { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
body.home .mh-filtro { font: inherit; font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .02em; color: var(--ink-soft); background: rgba(15,27,45,.035); border: 1px solid var(--rule);
  border-radius: 99px; padding: 8px 16px; cursor: pointer; }
body.home .mh-filtro.attivo { background: var(--h-grad-primary); color: #fff; border-color: transparent; }

body.home .mh-lista { display: flex; flex-direction: column; gap: 8px; }
body.home .mh-riga { display: grid; grid-template-columns: 32px minmax(0,1.6fr) repeat(3, minmax(0,.7fr)) auto auto;
  align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(15,27,45,.035);
  border: 1px solid var(--rule); text-decoration: none; }
body.home .mh-riga:hover { background: rgba(15,27,45,.035); }
@media (max-width: 860px) { body.home .mh-riga { grid-template-columns: 28px 1fr auto; grid-template-areas: "rank testo perc" "rank stats stats"; row-gap: 8px; }
  body.home .mh-riga .mh-riga-stat { grid-area: stats; }
  body.home .mh-riga-arrow { display: none; } }
body.home .mh-rank { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 12.5px; color: var(--ink-soft); background: rgba(15,27,45,.035); }
body.home .mh-rank.top1 { background: linear-gradient(145deg,#ffd75e,#ff9b25); color: #3a1300; }
body.home .mh-rank.top2 { background: linear-gradient(145deg,#e4e4f0,#a8a8c0); color: #241a3d; }
body.home .mh-rank.top3 { background: linear-gradient(145deg,#e0a45f,#a8672f); color: #2a1400; }
body.home .mh-riga-testo { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.home .mh-riga-titolo { font-size: 13.5px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.home .mh-riga-sub { font-size: 11.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.home .mh-badge { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em;
  padding: 3px 8px; border-radius: 99px; }
body.home .mh-badge.aperta { background: rgba(255,129,33,.18); color: var(--h-orange); }
body.home .mh-badge.vinta { background: rgba(72,210,139,.18); color: var(--sage, #48d28b); }
body.home .mh-badge.persa { background: rgba(15,27,45,.035); color: var(--ink-soft); }
body.home .mh-riga-stat { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; font-weight: 700;
  color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
body.home .mh-riga-stat small { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ivory-dim); }
body.home .mh-riga-perc { flex: none; font-size: 13px; font-weight: 800; padding: 7px 12px; border-radius: 10px;
  font-variant-numeric: tabular-nums; }
body.home .mh-riga-perc.pos { background: rgba(72,210,139,.15); color: var(--sage, #48d28b); }
body.home .mh-riga-perc.neg { background: rgba(255,107,129,.15); color: var(--brick); }
body.home .mh-riga-arrow { flex: none; color: var(--ivory-dim); font-weight: 700; }
body.home .mh-nota { font-size: 12px; color: var(--ink-soft); line-height: 1.6; margin: 18px 0 0; }

body.home .mh-cta-ingioco { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
body.home .mh-cta-ingioco span { flex: 1 1 380px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }
body.home .mh-h2 { font-size: 18px; color: var(--ink); margin: 0 0 12px; }
body.home .mh-ul { font-size: 13px; line-height: 1.7; color: var(--ink-soft); padding-left: 20px; margin: 0 0 14px; }
body.home .mh-ul li::marker { color: var(--ivory-dim); }

/* Pagina /metodi/in-gioco — stesso design di /metodi (29/08/2026): le
 * schede della timeline (in corso/vinta/persa) diventano card violette,
 * stessi identici campi gia' passati da genera_pagine.py alle vecchie
 * macro di _metodi_timeline.html (qui non riusata: quella resta in uso
 * dalla home page, che non e' stata toccata da questa richiesta). */
body.home .mh-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
body.home .mh-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 13px;
  background: rgba(15,27,45,.035); border: 1px solid var(--rule); border-left: 3px solid transparent; }
body.home .mh-card.aperta { border-left-color: var(--h-orange); }
body.home .mh-card.vinta { border-left-color: var(--sage, #48d28b); }
body.home .mh-card.persa { border-left-color: #8f84ab; }
body.home .mh-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
body.home .mh-card-meta { font-size: 10px; color: var(--ivory-dim); text-transform: uppercase; letter-spacing: .02em; }
body.home .mh-card-titolo { margin: 0; font-size: 14.5px; }
body.home .mh-card-titolo a { color: var(--ink); font-weight: 700; }
body.home .mh-card-sub, body.home .mh-card-gioco { font-size: 11.5px; color: var(--ink-soft); margin: 0; line-height: 1.5; }
body.home .mh-card-gioco strong { color: var(--ink-soft); font-weight: 700; }
body.home .mh-card-gioco a { color: var(--link); }
body.home .mh-card-esito { font-size: 12px; font-weight: 700; margin: 0; }
body.home .mh-card-esito.pos { color: var(--sage, #48d28b); }
body.home .mh-card-esito.muto { color: var(--ivory-dim); font-weight: 600; }
body.home .mh-progresso { display: flex; flex-direction: column; gap: 5px; }
body.home .mh-dots { display: flex; flex-wrap: wrap; gap: 3px; }
body.home .mh-progdot { width: 7px; height: 7px; border-radius: 50%; background: rgba(15,27,45,.06); }
body.home .mh-dots.aperta .mh-progdot.pieno { background: var(--h-orange); }
body.home .mh-dots.vinta .mh-progdot.pieno { background: var(--sage, #48d28b); }
body.home .mh-dots.persa .mh-progdot.pieno { background: #8f84ab; }
body.home .mh-colpo-label { font-size: 10px; color: var(--ivory-dim); }
body.home .mh-card-saldo { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rule);
  font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
body.home .mh-card-saldo.pos { color: var(--sage, #48d28b); }
body.home .mh-card-saldo.neg { color: var(--brick); }
body.home .mh-card-saldo-sub { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; color: var(--ivory-dim); }

/* Rifinitura visiva di /metodi/in-gioco (29/08/2026, secondo giro sul
 * mockup di Dario): icona per ogni titolo di pannello, box legenda in
 * hero come card a se' stante invece che sciolta sul gradiente. */
body.home .h2-title-row { display: flex; align-items: flex-start; gap: 14px; }
body.home .h2-panel-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid;
  place-items: center; font-size: 19px; background: rgba(15,27,45,.035); }
body.home .mh-h2-icon { display: flex; align-items: center; gap: 12px; }
body.home .mh-h2-icon .h2-panel-ico { width: 36px; height: 36px; font-size: 16px; }
body.home .rhl-card { background: rgba(15,27,45,.035); border: 1px solid var(--rule);
  border-radius: 16px; padding: 22px; width: 100%; }

/* Pagina /numero/<n> — mockup di Dario, 29/08/2026: stessa struttura gia'
 * usata per /ruota/<citta'> (hero + due colonne, pannello riepilogo +
 * mini-classifiche in barra laterale) applicata ai 90 numeri, con TUTTI
 * i dati gia' pubblicati (nessuna sezione nuova, nessun dato inventato). */
body.home .numero-hero { display: flex; align-items: center; gap: 30px; padding: 40px 44px; }
body.home .numero-hero-ball { flex: none; width: 130px; height: 130px; border-radius: 50%; display: grid;
  place-items: center; font-family: var(--sans); font-weight: 900; font-size: 52px; color: #fff;
  background: var(--h-grad-orb-a); box-shadow: none; }
body.home .numero-hero .hero2-copy { padding: 0; flex: 1 1 auto; }
body.home .numero-hero-stat { flex: 0 0 300px; min-height: 0; background: none; display: flex; flex-direction: column; gap: 14px; }
body.home .numero-hero-stat .num-hero-box { width: 100%; align-self: auto; }
@media (max-width: 620px) { body.home .numero-hero { flex-direction: column; text-align: center; padding: 30px 24px; }
  body.home .numero-hero-ball { width: 96px; height: 96px; font-size: 38px; } }

body.home .numero-smorfia-sig { font-family: var(--serif, Georgia, serif); font-size: 20px; font-style: italic;
  color: var(--h-gold); border-left: 3px solid var(--h-gold); padding: 4px 0 4px 16px; margin: 4px 0 12px; }

body.home .mh-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { body.home .mh-info-grid { grid-template-columns: 1fr; } }
body.home .mh-info-grid .h2-callout { align-items: center; }
body.home .mh-info-grid .h2-callout p { font-size: 12px; }

/* Pagina /metodologia — mockup di Dario, 29/08/2026: stesso "flusso passo
 * per passo" e "approfondimenti" gia' pubblicati (6 sotto-pagine reali,
 * elenco invariato), solo restilizzati come timeline numerata + griglia
 * di card con icona. */
body.home .mh-flow { display: flex; flex-direction: column; }
body.home .mh-flow-riga { display: flex; align-items: center; gap: 18px; padding: 14px 0; position: relative; }
body.home .mh-flow-riga:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 50px;
  bottom: -14px; width: 2px; background: rgba(15,27,45,.06); }
body.home .mh-flow-num { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 900; font-size: 16px; color: #fff; z-index: 1; }
body.home .mh-flow-num.viola { background: var(--h-grad-orb-a); }
body.home .mh-flow-num.arancio { background: linear-gradient(145deg, var(--h-orange), #d97706); }
body.home .mh-flow-testo { flex: 1; font-size: 13.5px; color: var(--ink); background: rgba(15,27,45,.035);
  border: 1px solid var(--rule); border-radius: 12px; padding: 14px 18px; }
body.home .mh-flow-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--rule); font-size: 16px; }

body.home .mh-approf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 780px) { body.home .mh-approf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { body.home .mh-approf-grid { grid-template-columns: 1fr; } }
body.home .mh-approf-card { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 12px;
  background: rgba(15,27,45,.035); border: 1px solid var(--rule); color: var(--ink); font-size: 13px; font-weight: 700; }
body.home .mh-approf-card:hover { background: rgba(15,27,45,.035); }
body.home .mh-approf-ico { flex: none; font-size: 18px; }

/* Pagina /glossario — mockup di Dario, 29/08/2026: stesse 5 categorie e
 * stessi termini gia' pubblicati (nav_termini/gruppi_hub, invariati),
 * solo restilizzati. I pallini di stato (verificato/documentato/
 * discordante) restano quelli VERI di ciascun termine — non colorati per
 * categoria come nel mockup, che li rendeva tutti uguali all'interno di
 * una sezione: avrebbe nascosto la differenza reale fra "verificato" e
 * "documentato" che il glossario esiste apposta per dichiarare. */
body.home .gloss-cat { display: flex; gap: 18px; align-items: flex-start; }
@media (max-width: 780px) { body.home .gloss-cat { flex-wrap: wrap; } body.home .gloss-cat > .h2-panel { flex-basis: 100% !important; } }
body.home .gloss-cat-ico { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid;
  place-items: center; font-size: 20px; color: #fff; font-weight: 700; box-shadow: none; }
body.home .gloss-cat-body { flex: 1; min-width: 0; }
body.home .gloss-cat-body h2 { margin: 0 0 6px; font-size: 18px; color: var(--ink); }
body.home .gloss-cat-body > p { margin: 0 0 16px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; max-width: 70ch; }
body.home .gloss-cat-body .rs-links a { display: inline-flex; align-items: center; gap: 7px; }

/* Pagine dei singoli termini /glossario/<slug> — mockup di Dario,
 * 29/08/2026, stessa struttura hero/due-colonne delle altre pagine
 * gia' rifatte. Il "corpo" resta l'HTML reale gia' scritto per ciascun
 * termine (con le sue eventuali tabelle dati calcolate) — qui solo il
 * contenitore cambia veste; il testo non e' toccato. */
body.home .gloss-t-h1 { margin: 6px 0 0; font-size: clamp(30px,4.2vw,46px); color: var(--ink); }
body.home .h2-callout h3 { margin: 0 0 6px; font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
body.home .gloss-t-corpo { padding: 26px 28px; }
body.home .gloss-t-corpo > p:first-child { margin-top: 0; }
body.home .rs-panel h3 small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 10.5px; margin-top: 3px; }
body.home .gloss-t-link { display: block; font-size: 12.5px; color: var(--ink-soft); padding: 6px 0; }
body.home .gloss-t-link:hover { color: var(--link); }
body.home .combo-link { font-size: 12.5px; font-weight: 800; }
body.home .combo-link.magenta { color: var(--h-pink); }
body.home .combo-link.arancio { color: var(--h-orange); }

/* Sezione "Metodi alla prova in gioco" di /lotto — mockup di Dario,
 * 28/08/2026: riga unica di card compatte invece delle 2 colonne della
 * home, stessi identici dati (metodi_home_vittoriosi/altri). */
body.home .mig2-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
body.home .mig2-head-cta { display: flex; gap: 10px; flex-wrap: wrap; }
body.home .mig2-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
@media (max-width: 1300px) { body.home .mig2-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 780px) { body.home .mig2-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { body.home .mig2-row { grid-template-columns: 1fr; } }
body.home .mig2-card { display: flex; flex-direction: column; border: 1.5px solid var(--rule); border-radius: 14px;
  padding: 16px; background: var(--h-grad-card); transition: transform .15s ease, border-color .15s ease; }
body.home .mig2-card:hover { transform: translateY(-3px); }
body.home .mig2-card.good { border-color: rgba(72,210,139,.45);
  background: radial-gradient(130% 90% at 0% 0%, rgba(72,210,139,.12), transparent 60%), var(--h-grad-card); }
body.home .mig2-card.bad { border-color: rgba(255,100,125,.45);
  background: radial-gradient(130% 90% at 0% 0%, rgba(255,100,125,.12), transparent 60%), var(--h-grad-card); }
body.home .mig2-card.live { border-color: rgba(255,177,38,.45);
  background: radial-gradient(130% 90% at 0% 0%, rgba(255,177,38,.12), transparent 60%), var(--h-grad-card); }
body.home .mig2-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
body.home .mig2-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 900; color: #fff; }
body.home .mig2-num.good { background: var(--sage); box-shadow: none; }
body.home .mig2-num.bad { background: var(--brick); box-shadow: none; }
body.home .mig2-num.live { background: var(--h-gold); color: #ffffff; box-shadow: none; }
body.home .mig2-badge { font-size: 7.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em;
  color: var(--h-purple); border: 1px solid var(--h-purple); border-radius: 999px; padding: 2px 7px; }
body.home .mig2-body { flex: 1 0 auto; display: flex; flex-direction: column; gap: 5px; }
body.home .mig2-card h4 { font-size: 13.5px; margin: 0 0 2px; color: var(--ink); line-height: 1.3; }
body.home .mig2-meta { font-size: 10.5px; color: var(--ink-soft); line-height: 1.4; }
body.home .mig2-saldo { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rule); }
body.home .mig2-saldo-label { display: block; font-size: 8.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); margin-bottom: 3px; }
body.home .mig2-saldo strong { font-size: 17px; font-weight: 900; }
body.home .mig2-saldo strong.good { color: var(--sage); }
body.home .mig2-saldo strong.bad { color: var(--brick); }
body.home .mig2-saldo strong.neu { color: var(--h-gold); }

/* ===== Direzione B "Dashboard" — tema unico chiaro (ottobre 2026) ===== */
body, body.home { background: var(--paper); color: var(--ink); }
::selection { background: var(--accent-soft); color: var(--ink); }

/* Header bianco, sticky su tutte le pagine; navigazione a pillole */
.site-header, body.home .site-header { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--rule); }
.wordmark img.logo-svg, body.home .wordmark img.logo-svg { display: block; height: 40px; width: auto; }
@media (max-width: 460px) { .wordmark img.logo-svg, body.home .wordmark img.logo-svg { height: 26px; } }
.site-nav, body.home .site-nav { font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; gap: 4px; }
.site-nav a, body.home .site-nav a { font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-soft); padding: 8px 12px; border-radius: 999px; }
.site-nav a:hover, body.home .site-nav a:hover { background: var(--accent-soft); color: var(--accent); }
.crumb { font-family: var(--sans); font-size: 12.5px; }

/* Footer scuro, sobrio */
footer.site-footer { background: #0f1b2d; border-top: 0; margin-top: 48px; color: #c7d2e0; }
.site-footer-inner { color: #c7d2e0; }
.site-footer-inner a, footer.site-footer a { color: #e6edf6; border-bottom-color: rgba(230,237,246,.35); }
footer.site-footer .avviso-gioco, footer.site-footer .avviso-gioco * { color: #c7d2e0; }

/* Palline */
.ball { position: relative; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 800; background: #0f1b2d; color: #fff; border: 0; }
.ball.hot, .ball.xl, .ball.lg { background: var(--accent); color: #fff; }
.ball.xl { width: 150px; height: 150px; font-size: 52px; }
.ball.lg { width: 100px; height: 100px; font-size: 30px; }
.ball.md { width: 44px; height: 44px; font-size: 15px; }
.ball.sm { width: 25px; height: 25px; font-size: 10.5px; }
.ball.md.hot { background: var(--accent); color: #fff; }
.ball-glow { display: none; }
.ball-pair .ball, .ball-trio .ball { border: 3px solid var(--paper); }

/* Tabellone ruota */
.board-wrap { background: #fff; border: 1px solid var(--rule); border-radius: 14px; }
.tile { position: relative; aspect-ratio: 1; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 3px 0; font-family: var(--sans); font-size: 19px; font-weight: 800; color: var(--ink);
  background: #eaf4f5; border: 1px solid #d3e5e8; text-decoration: none; }
.tile:hover { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 2; border-bottom-color: #d3e5e8; }
.tile.h1 { background: #bfe0e3; border-color: #a9d2d6; }
.tile.h2 { background: #7fc0c7; border-color: #6bb2ba; }
.tile.h3 { background: #267983; border-color: #1d6670; color: #fff; }
.tile.h4 { background: #0b3c49; border-color: #0b3c49; color: #fff; }
.board-foot .sw.h0 { background: #eaf4f5; border: 1px solid #d3e5e8; }
.board-foot .sw.h1 { background: #bfe0e3; } .board-foot .sw.h2 { background: #7fc0c7; }
.board-foot .sw.h3 { background: #267983; } .board-foot .sw.h4 { background: #0b3c49; }

/* Mini-tabellone nell'indice ruote */
.mdot { aspect-ratio: 1; border-radius: 2px; background: #dcebed; opacity: 1; box-shadow: none; }
.mdot.h1 { background: #a9d2d6; } .mdot.h2 { background: #6bb2ba; }
.mdot.h3 { background: #267983; } .mdot.h4 { background: #0b3c49; }

/* Tabellone della homepage */
body.home .heat2 { background: #eaf4f5; border: 1px solid #d3e5e8; border-radius: 8px; color: var(--ink); }
body.home .heat2.h1 { background: #bfe0e3; border-color: #a9d2d6; }
body.home .heat2.h2 { background: #7fc0c7; border-color: #6bb2ba; }
body.home .heat2.h3 { background: #267983; border-color: #1d6670; color: #fff; }
body.home .heat2.h4 { background: #0b3c49; border-color: #0b3c49; color: #fff; }
body.home .heat2:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
body.home .h2-legend i { border-radius: 3px; width: 10px; height: 10px; border: 1px solid rgba(15,27,45,.15); }
body.home .h2-legend i.h0 { background: #eaf4f5; } body.home .h2-legend i.h1 { background: #bfe0e3; }
body.home .h2-legend i.h2 { background: #7fc0c7; } body.home .h2-legend i.h3 { background: #267983; }
body.home .h2-legend i.h4 { background: #0b3c49; }

/* Pulsanti */
body.home .hbtn { text-transform: none; font-size: 14px; font-weight: 700; letter-spacing: 0; border-radius: 10px; }
body.home .hbtn.primary { background: var(--accent); color: #fff; }
body.home .hbtn:not(.primary) { background: #fff; color: var(--ink); border: 1px solid var(--rule-strong); }
body.home .hero2-search button { background: var(--accent); }
body.home .hero2-art { background: none; }
body.home .hero2-eyebrow { color: var(--accent); }

/* Card bianche con bordo sottile */
body.home .h2-panel, .h2-panel { background: #fff; border: 1px solid var(--rule); border-radius: 14px; box-shadow: none; }

/* Correzioni dopo la prima anteprima */
:root, body.home { --h-grad-brand: linear-gradient(135deg, #0a6a74, #0e7f8c); }
body.home .h2-tag { color: var(--accent); font-weight: 600; font-size: 12px; background: var(--accent-soft); border-color: #c5e1e4; }
body.home .mh-dot.neg { background: var(--brick); }
footer.site-footer, .site-footer-inner { font-family: var(--sans); }
body.home .gloss3-card-icon svg text { fill: #fff; stroke: none; }

/* Mobile: i figli di griglia/flex non si restringevano (home e glossario sforavano) */
@media (max-width: 920px) { body.home .analytics2 { grid-template-columns: minmax(0,1fr); } }
body.home .analytics2 > *, body.home .mh-stats > *, body.home .mh-stat > div { min-width: 0; }
@media (max-width: 620px) { body.home .mh-stats { grid-template-columns: minmax(0,1fr); } }
body.home .heatmap2 { grid-template-columns: repeat(10, minmax(0,1fr)); }
body.home .heat2 { min-width: 0; overflow: hidden; }
@media (max-width: 440px) { body.home .heat2-sub { display: none; } body.home .heat2 { aspect-ratio: 1; } body.home .h2-panel { padding: 16px; } }
@media (max-width: 720px) { body.home .mh-stats { grid-template-columns: minmax(0,1fr) !important; } }

/* Titoli in sans anche sulle pagine non "home" (ambo, terno, estrazione...) */
:root, body.home { --serif: var(--sans); }
h1, h2, h3 { letter-spacing: -.02em; }
h1 { font-weight: 800; }
h2 { font-weight: 700; }
/* Terno: le tre palline erano impilate sopra il testo (position:static sovrascriveva l'absolute) */
.ball-trio .ball.t1, .ball-trio .ball.t2, .ball-trio .ball.t3 { position: absolute; width: 88px; height: 88px; font-size: 26px; }
.ball-trio .ball.t1 { left: 41px; top: 0; } .ball-trio .ball.t2 { left: 0; top: 58px; } .ball-trio .ball.t3 { left: 82px; top: 58px; }
h1.page-title { font-weight: 800; }
h2.section-title { font-weight: 700; }
@media (max-width: 920px) { body.home .hero2 { grid-template-columns: minmax(0,1fr); } }
body.home .hero2 > *, body.home .hero2-copy > * { min-width: 0; }
body.home .hero2-copy p { max-width: 100%; }
body.home .hero2-search { max-width: 100%; }
body.home .hero2-search input { min-width: 0; }
@media (max-width: 620px) {
  .site-nav, body.home .site-nav { gap: 0; }
  .site-nav a, body.home .site-nav a { padding: 6px 9px; font-size: 13px; }
  body.home .hero2-copy { padding: 28px 18px; }
}

/* Estrazione precedente / successiva, subito sotto i numeri */
.estr-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 14px 0 30px; }
.estr-nav a { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 600; background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: 6px; padding: 9px 16px; color: var(--ink); text-decoration: none; }
.estr-nav a span { font-family: var(--mono); font-size: 12.5px; font-weight: 400; color: var(--ink-soft); }
.estr-nav a:hover { border-color: var(--ink); }
.estr-nav-succ { text-align: right; margin-left: auto; }

/* Banner di rimando a colpaccio.it (altro progetto, non gioco) */
.promo-colpaccio { max-width: 1120px; margin: 28px auto 0; padding: 0 16px; }
.promo-colpaccio .pc-etichetta { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; }
.promo-colpaccio a.pc-box { display: flex; align-items: center; gap: 18px; padding: 12px 18px; background: #fff; border: 1px solid var(--rule); border-radius: 12px; text-decoration: none; color: var(--ink); min-width: 0; }
.promo-colpaccio a.pc-box:hover { border-color: #f5a300; box-shadow: 0 2px 10px rgba(15,27,45,.08); }
.promo-colpaccio img { width: 112px; height: auto; flex: none; border-radius: 6px; display: block; }
.promo-colpaccio .pc-testo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.promo-colpaccio .pc-titolo { font-weight: 700; font-size: 15px; line-height: 1.3; }
.promo-colpaccio .pc-sotto { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.promo-colpaccio .pc-cta { flex: none; background: #0f1b2d; color: #fff; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 999px; white-space: nowrap; }
.promo-colpaccio.pc-inline { margin: 26px 0; padding: 0; }
.promo-colpaccio.pc-inline a.pc-box { background: #fff8ec; border-color: #f5c26b; }
.promo-colpaccio.pc-inline .pc-cta { background: #f08a00; color: #fff; }
@media (max-width: 620px) {
  .promo-colpaccio a.pc-box { flex-wrap: wrap; gap: 12px; padding: 14px; }
  .promo-colpaccio img { width: 96px; }
  .promo-colpaccio .pc-testo { flex: 1 1 calc(100% - 120px); }
  .promo-colpaccio .pc-cta { flex: 1 1 100%; text-align: center; }
}

.nota-fonte { font-size: 14px; line-height: 1.55; color: var(--ink); background: var(--accent-soft); border: 1px solid var(--rule-strong); border-left: 4px solid var(--amber); border-radius: 8px; padding: 10px 14px; margin: 12px 0 18px; }