/* =====================================================================
   /PRONOSTICI, «IL TABELLONE» (05/11/2026, app/vetrina.php, assets/js/vetrina.js)
   La pagina e' il tabellone partenze di una grande stazione. Tre oggetti del
   sito (unica.css): la tessera a palette, il display a puntini, il cartello
   blu. Due nuovi: la linea gialla, che e' sempre la cosa TUA, e il biglietto.

   Il patto dei colori:
   - giallo: cio' che e' tuo e il gesto che lo conferma. Solo linea, cursore,
     valore, «il tuo», saldo, tasto del giorno, Convalida, prossimo;
   - verde, ambra, arancio e rosso: solo ritardo (ritardo_fascia);
   - blu: cartelli e avanzamento.

   I fogli del sito arrivano dal sito. Nessuna immagine, nessuna libreria.
   Solo transform e opacity si animano, salvo l'apertura della riga: il tracciato
   della curva non si ridisegna mai durante il trascinamento.
   ===================================================================== */

html body main > .tb { margin: -8px 0 0; }

.tb {
  --tb-giallo: #FFD23F;
  --tb-su-giallo: #071B33;
  --tb-giallo-ombra: #B8941F;
  --tb-mio: #FFD23F;
  --tb-bianco: #F4F3EE;
  --tb-carta: #F7F5F0;
  --tb-inchiostro: #071B33;
  --tb-grigio: #475569;
  --tb-timbro: #1D4497;
  --tb-rfi: var(--rfi-blu, #1D4497);
  --tb-cassa: var(--solari, #0D1015);
  --tb-cassa-alta: var(--solari-alto, #05070A);
  --tb-giunto: #05070A;
  --tb-tessera-a: #2A313C;
  --tb-tessera-b: #20262F;
  --tb-vetro: var(--led-fondo, #06080B);
  --tb-riga: #0D1015;
  --tb-riga-su: #141922;
  --tb-riga-aperta: #11161E;
  --tb-filetto: #000;
  --tb-filetto-luce: rgba(255, 255, 255, .035);
  --tb-cella: rgba(255, 255, 255, .055);
  --tb-pron-filetto: rgba(255, 255, 255, .55);
  --tb-pron-testo: var(--rm-ink);
  --tb-foglio: #0F1520;
  --tb-ease: var(--ease-out, cubic-bezier(.23, 1, .32, 1));
  --tb-mono: "JetBrains Mono", ui-monospace, monospace;
  --tb-titolo: "Bricolage Grotesque", Inter, sans-serif;
  --tb-corpo: Inter, system-ui, sans-serif;
  color: var(--rm-ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  font-family: var(--tb-corpo);
  -webkit-tap-highlight-color: transparent;
}
/* La regola del sito «h1..h5, strong, b { color: --rm-ink }» batte ogni pieno:
   dentro il tabellone un grassetto eredita, e ricolora solo chi lo dichiara. */
:where(.tb) b, :where(.tb) strong { color: inherit; }
.tb button, .tb a { touch-action: manipulation; }

html[data-tema="chiaro"] .tb {
  --tb-mio: #071B33;
  --tb-giunto: #03101F;
  --tb-tessera-a: #16293F;
  --tb-tessera-b: #102235;
  --tb-riga: var(--rm-surface);
  --tb-riga-su: #F7F9FB;
  --tb-riga-aperta: #F7F9FB;
  --tb-filetto: var(--rm-line);
  --tb-filetto-luce: transparent;
  --tb-cella: var(--rm-surface2);
  --tb-pron-filetto: #1D4497;
  --tb-pron-testo: #1D4497;
  --tb-foglio: var(--rm-surface);
}

/* Le isole: restano scure anche nel tema chiaro, sul blu notte del marchio.
   Gettoni ridichiarati dentro (tema-chiaro.css:146), alias compresi. */
html[data-tema="chiaro"] .tb-isola {
  color-scheme: dark;
  --tb-mio: #FFD23F;
  --tb-cassa: #071B33;
  --tb-cassa-alta: #051529;
  --tb-giunto: #03101F;
  --tb-tessera-a: #16293F;
  --tb-tessera-b: #102235;
  --tb-riga: #071B33;
  --tb-riga-su: #0B2341;
  --tb-riga-aperta: #0B2341;
  --tb-filetto: #03101F;
  --tb-filetto-luce: rgba(255, 255, 255, .05);
  --tb-cella: rgba(255, 255, 255, .07);
  --tb-pron-filetto: rgba(255, 255, 255, .55);
  --tb-pron-testo: #E8EDF4;
  --rm-bg: #0B2341;
  --rm-surface: #0F2A4D;
  --rm-surface2: #0C2546;
  --rm-soft: #15335B;
  --rm-line: #213F68;
  --rm-ink: #E8EDF4;
  --rm-muted: #9FB0C6;
  --rm-rail: #7FB2E5;
  --rm-accent: #22C55E;
  --rm-amber: #F5B72E;
  --rm-orange: #FB923C;
  --rm-red: #F0554D;
  --rm-on-accent: #04140A;
  --rm-on-amber: #1A1204;
  --rm-on-red: #1A0604;
  --rm-on-orange: #1A0A02;
  --luce-ok: #22C55E;
  --luce-w1: #F5B72E;
  --luce-w2: #FB923C;
  --luce-ko: #F0554D;
}

.tb .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tb-defs { position: absolute; }
.tb-mono { font-family: var(--tb-mono); font-variant-numeric: tabular-nums; }

/* I toni: la scala del sito, una riga per fascia. Mai pieni: la fascia scelta
   resta del suo colore, col bordo di chi l'ha scelta. */
.t-ok    { --t-luce: var(--luce-ok, var(--rm-accent)); --t-led: #5BE37D; }
.t-poco  { --t-luce: var(--luce-w1, var(--rm-amber));  --t-led: #FFB020; }
.t-medio { --t-luce: var(--luce-w2, var(--rm-orange)); --t-led: #FF8A3D; }
.t-tanto { --t-luce: var(--luce-ko, var(--rm-red));    --t-led: #FF5B4A; }
.t-grave { --t-luce: #B91C1C; --t-led: #D9362B; }
.t-sopp  { --t-luce: var(--rm-muted); --t-led: #93A0B4; }

.tb-r-ok { color: var(--rm-accent); }
.tb-r-w1 { color: var(--rm-amber); }
.tb-r-w2 { color: var(--rm-orange); }
.tb-r-ko { color: var(--rm-red); }
/* Sulla tessera, che e' scura in entrambi i temi, le luci del display. */
.tb-fl.tb-r-ok { color: #5BE37D; }
.tb-fl.tb-r-w1 { color: #FFB020; }
.tb-fl.tb-r-w2 { color: #FF8A3D; }
.tb-fl.tb-r-ko { color: #FF7A6B; }

/* ---------- La tessera: UNA striscia per ogni parola, non un elemento per
   lettera. Il disegno delle tessere e' il fondo, il testo monospaziato cade
   giusto. Venti righe costano venti elementi, non quattrocento.
   La giuntura fra due tasselli si vede solo 3 px in cima e in fondo, mai sulle
   lettere; il taglio orizzontale sta sotto il testo. Solo le cifre grandi lo
   portano addosso. ---------- */
.tb-fl {
  --t: 13px;
  --fs: calc(var(--t) * 1.36);
  --al: calc(var(--t) * 1.86);
  --giuntura: repeating-linear-gradient(90deg, transparent 0 calc(var(--t) - 1px), var(--tb-giunto) calc(var(--t) - 1px) var(--t));
  position: relative;
  display: inline-block;
  vertical-align: top;
  flex: none;
  width: calc(var(--n, 1) * var(--t));
  max-width: 100%;
  height: var(--al);
  overflow: hidden;
  contain: layout paint;
  white-space: pre;
  font: 700 var(--fs)/var(--al) var(--tb-mono);
  font-variant-ligatures: none;
  text-rendering: geometricPrecision; /* il passo delle lettere e' un calcolo: niente arrotondamenti */
  letter-spacing: calc(var(--t) - .6em);
  text-indent: calc((var(--t) - .6em) / 2);
  text-decoration: none;
  color: var(--tb-bianco);
  background:
    linear-gradient(transparent calc(50% - .5px), rgba(0, 0, 0, .6) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    var(--giuntura) 0 0 / 100% 3px no-repeat,
    var(--giuntura) 0 100% / 100% 3px no-repeat,
    linear-gradient(var(--tb-tessera-a) 0 50%, var(--tb-tessera-b) 50% 100%);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 0 rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .35);
}
.tb-fl--ora-g::after, .tb-fl--cod-g::after, .tb-fl--gigante::after, .tb-fl--valore::after, .tb-fl--biglietto::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: calc(50% - .5px);
  height: 1px;
  background: rgba(0, 0, 0, .72);
  pointer-events: none;
}

.tb-fl--ora { --t: 20px; --al: 36px; }
.tb-targa-d { container-type: inline-size; flex: 1 1 0; min-width: 0; display: grid; gap: 3px; justify-items: start; }
.tb-fl--dest { --t: 18px; }
@supports (width: 1cqi) { .tb-fl--dest { --t: min(18px, calc(100cqi / var(--n, 1))); } }
.tb-fl--ades { --t: 17px; --al: 32px; }
.tb-fl--conta { --t: 15px; --al: 30px; }
.tb-fl--sopp { color: #93A0B4; }
.tb-fl--conto { --t: 13px; --al: 25px; }
.tb-fl--valore { --t: 26px; --al: 48px; color: var(--tb-giallo); }
.tb-fl--biglietto { --t: 22px; --al: 40px; color: var(--tb-giallo); }
.tb-fl--arrivo { --t: 11px; --al: 22px; }
.tb-an-dest-t { container-type: inline-size; display: grid; gap: 4px; justify-items: start; }
.tb-fl--gigante { --t: 22px; --fs: calc(var(--t) * 1.28); --al: calc(var(--t) * 1.62); }
@supports (width: 1cqi) { .tb-fl--gigante { --t: min(38px, calc(100cqi / var(--n, 1))); } }
.tb-fl--ora-g { --t: 28px; --al: 46px; }
.tb-fl--cod-g { --t: 28px; --al: 46px; }
.tb-fl--ora-s { --t: 14px; --al: 26px; }
.tb-fl--cod { --t: 12px; --al: 26px; }

/* ---------- La palette che cade: solo orologio e conto alla rovescia.
   Tre strati creati dal JS durante la caduta e poi tolti. ---------- */
.pal {
  --pw: 22px; --ph: 32px; --pf: 20px;
  position: relative;
  display: inline-block;
  flex: none;
  contain: strict;
  width: var(--pw);
  height: var(--ph);
  font: 700 var(--pf)/var(--ph) var(--tb-mono);
  text-align: center;
  color: var(--tb-bianco);
  background: linear-gradient(var(--tb-tessera-a) 0 50%, var(--tb-tessera-b) 50% 100%);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 0 #000;
}
.pal::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: calc(50% - .5px);
  height: 1px;
  background: rgba(0, 0, 0, .72);
  z-index: 3;
}
.pal > i { position: absolute; inset: 0; font-style: normal; }
/* Fatti alla prima caduta e lasciati li': a riposo coincidono con la cifra. Vedi palSet(). */
.pal-fermo { z-index: 1; clip-path: inset(50% 0 0 0); background: inherit; border-radius: inherit; }
.pal-carta { z-index: 2; transform-style: preserve-3d; transform-origin: 50% 50%; will-change: transform; }
.pal-su, .pal-giu { position: absolute; inset: 0; font-style: normal; background: var(--tb-tessera-a); border-radius: 3px; backface-visibility: hidden; }
.pal-su { clip-path: inset(0 0 50% 0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.pal-giu { clip-path: inset(50% 0 0 0); background: var(--tb-tessera-b); transform: rotateX(180deg); }
.tb-due { flex: none; width: 8px; height: 16px; background: radial-gradient(circle at 50% 25%, rgba(255, 255, 255, .65) 0 1.8px, transparent 2.1px), radial-gradient(circle at 50% 75%, rgba(255, 255, 255, .65) 0 1.8px, transparent 2.1px); }

/* ---------- La cassa: testata, annuncio, nastro ---------- */
.tb-cassa {
  min-width: 0;
  background: var(--tb-cassa);
  color: var(--rm-ink);
  border: 1px solid #000;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 44px rgba(0, 0, 0, .35);
  overflow: hidden;
}
html[data-tema="chiaro"] .tb-cassa { border-color: #03101F; box-shadow: 0 14px 34px rgba(7, 27, 51, .22); }

.tb-cima {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--tb-cassa-alta);
  border-bottom: 2px solid #000;
}
html[data-tema="chiaro"] .tb-cima { border-bottom-color: #03101F; }
html body .tb .tb-cima .rm-eyebrow { margin: 0; }
.tb-cima-t { min-width: 0; font: 600 .78rem/1.2 var(--tb-corpo); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.tb-orologio { display: flex; flex: none; align-items: center; gap: 2px; margin-left: auto; }
/* L'involucro aria-hidden delle cifre: nella griglia non deve contare. */
.tb-pal-cifre { display: contents; }

.tb-testa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 20px 20px 22px;
}
html body .tb h1.tb-h1 {
  margin: 0;
  font-family: var(--tb-titolo);
  font-weight: 800;
  font-size: clamp(2.05rem, 1.1rem + 2.6vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -.012em;
  color: #fff;
}
.tb-h1 span { display: block; }
html body .tb .tb-h1 .tb-h1-2 { color: var(--tb-giallo); }
html body .tb .tb-sotto { margin: 10px 0 0; max-width: 46ch; color: rgba(255, 255, 255, .72); font-size: 1rem; line-height: 1.45; }

/* Il display a puntini della testata: prima il numero, poi la didascalia. */
.tb-led {
  display: grid;
  grid-template-columns: repeat(4, auto);
  margin: 0;
  padding: 14px 4px 12px;
  background-color: var(--tb-vetro);
  background-image: radial-gradient(circle, rgba(255, 255, 255, .045) 0 .9px, transparent 1.1px);
  background-size: 3px 3px;
  border: 1px solid #000;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 14px 32px rgba(0, 0, 0, .55);
}
.tb-led > div { display: flex; flex-direction: column; gap: 7px; padding: 0 14px; min-width: 92px; border-left: 1px solid rgba(255, 255, 255, .08); }
.tb-led > div:first-child { border-left: 0; }
.tb-led dd {
  --led-c: 255, 176, 32;
  order: -1;
  margin: 0;
  font: 800 2.15rem/1 var(--tb-mono);
  letter-spacing: .01em;
  white-space: nowrap;
  color: transparent;
  background-image: radial-gradient(circle at 50% 50%, rgb(var(--led-c)) 0 1.05px, rgba(var(--led-c), .24) 1.25px);
  background-size: 3px 3px;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(var(--led-c), .34));
}
/* Il saldo e' tuo: a puntini gialli, non ambra. */
.tb-led-saldo dd { --led-c: 255, 210, 63; }
.tb-led dt { font: 500 .78rem/1.25 var(--tb-corpo); color: rgba(255, 255, 255, .74); white-space: nowrap; }

/* La linea gialla: la fascia tattile del marciapiede, coi suoi rilievi. */
.tb-linea {
  height: 10px;
  background: radial-gradient(circle at 50% 50%, rgba(7, 27, 51, .28) 0 1.5px, transparent 1.9px) 0 0 / 10px 10px, var(--tb-giallo);
}

/* L'annuncio */
.tb-annuncio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 432px;
  gap: 16px 30px;
  padding: 18px 20px 14px;
  align-items: start;
}
.tb-an-sx { min-width: 0; display: flex; flex-direction: column; align-self: stretch; }
html body .tb .tb-an-tag { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.tb-an-t { font: 700 .82rem/1 var(--tb-corpo); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
/* Il sigillo: tondo, blu di stazione, anello bianco. Solo qui. */
.tb-sigillo {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tb-rfi);
  color: #fff;
  font: 800 .98rem/1 var(--tb-mono);
  box-shadow: inset 0 0 0 2px var(--tb-rfi), inset 0 0 0 3.5px #fff, 0 2px 6px rgba(0, 0, 0, .45);
}
.tb-an-id { display: flex; gap: 8px; }
html body .tb h2.tb-an-dest { margin: 8px 0 0; font-size: inherit; line-height: 0; }
html body .tb .tb-an-voce { margin: 12px 0 0; max-width: 58ch; font-size: 1rem; line-height: 1.45; color: rgba(255, 255, 255, .8); }
.tb-an-voce b { color: #fff; font-weight: 600; }
.tb-an-conta { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px; margin-top: auto; padding-top: 14px; }
.tb-an-parte small { display: block; margin-bottom: 6px; font: 600 .6875rem/1 var(--tb-corpo); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, .7); }
.tb-an-parte .tb-fl--ades, .tb-an-parte .tb-fl--conta { --t: 28px; --al: 46px; }
.tb-an-parte .tb-binario { margin-top: 8px; }
.tb-conta-g { display: flex; align-items: center; gap: 2px; }
.tb-conta-g .pal { --pw: 30px; --ph: 44px; --pf: 28px; }
.tb-conta-g.senza-sec .tb-sec { display: none; }

.tb-an-dx { display: grid; gap: 0; align-content: start; min-width: 0; }
.tb-annuncio .tb-schermo-mini { height: 150px; }
.tb-annuncio .tb-fasce { margin-top: 4px; }
.tb-annuncio .tb-f { min-height: 50px; }
html body .tb .tb-annuncio .tb-meta { grid-area: auto; margin-top: 10px; color: rgba(255, 255, 255, .72); }

/* La striscia delle ultime corse: colonne di puntini con la scala del sito. */
.tb-striscia { margin: 8px 0 0; padding: 7px 0 5px; background: var(--tb-vetro); border: 1px solid #000; border-radius: 6px; }
html[data-tema="chiaro"] .tb-striscia { border-color: #03101F; }
.tb-striscia svg { display: block; width: 100%; height: 44px; }
.tb-striscia figcaption { margin: 5px 8px 0; font: 500 .6875rem/1.2 var(--tb-mono); color: rgba(255, 255, 255, .62); }

/* Il nastro: display a puntini in fondo alla cassa. */
.tb-nastro {
  display: flex;
  align-items: stretch;
  height: 38px;
  background-color: var(--tb-vetro);
  background-image: radial-gradient(circle, rgba(255, 255, 255, .05) 0 .9px, transparent 1.1px);
  background-size: 3px 3px;
  border-top: 2px solid #000;
  font: 500 .86rem/36px var(--tb-mono);
  color: #FFB020;
}
html[data-tema="chiaro"] .tb-nastro { border-top-color: #03101F; }
.tb-nastro-e { flex: none; padding: 0 12px 0 20px; font: 600 .6875rem/36px var(--tb-corpo); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); border-right: 1px solid rgba(255, 255, 255, .1); }
.tb-nastro-f { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.tb-nastro-in { display: flex; width: max-content; height: 100%; will-change: transform; animation: tb-nastro 60s linear infinite; }
.tb-nastro-c { display: flex; }
.tb-nv { flex: none; padding: 0 18px; white-space: nowrap; }
.tb-nv b { font-weight: 700; color: #FFD9A0; }
.tb-nv em { font-style: normal; font-weight: 700; color: #FFD9A0; }
@keyframes tb-nastro { to { transform: translate3d(-50%, 0, 0); } }
@media (hover: hover) { .tb-nastro:hover .tb-nastro-in { animation-play-state: paused; } }

/* ---------- I filtri ---------- */
.tb-filtri {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  grid-template-areas: "cerca regione" "cat cat";
  gap: 8px 12px;
  padding: 16px 0 14px;
  align-items: center;
}
.tb-cerca {
  grid-area: cerca;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 12px;
  margin: 0;
  background: var(--rm-surface);
  border: 1px solid var(--rm-line);
  border-radius: 6px;
  color: var(--rm-muted);
}
.tb-cerca input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent;
  font: 400 1rem/1 var(--tb-corpo);
  color: var(--rm-ink);
}
.tb-cerca:focus-within { border-color: var(--rm-brand); box-shadow: 0 0 0 3px rgba(21, 123, 255, .28); }
.tb-cerca input::placeholder { color: var(--rm-muted); opacity: 1; }
.tb-cerca input::-webkit-search-cancel-button { filter: grayscale(1); }
.tb-regione { grid-area: regione; margin: 0; display: block; min-width: 0; }
.tb-regione select, select.tb-ordine {
  width: 100%;
  height: 46px;
  padding: 0 30px 0 12px;
  appearance: none;
  background: var(--rm-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2393A0B4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center / 12px 8px;
  border: 1px solid var(--rm-line);
  border-radius: 6px;
  font: 500 1rem/1 var(--tb-corpo);
  color: var(--rm-ink);
  text-overflow: ellipsis;
  cursor: pointer;
}
.tb-regione select option, select.tb-ordine option { color: #071B33; background: #fff; }
.tb-cat { grid-area: cat; display: flex; gap: 6px; min-width: 0; }
.tb-filtra { grid-column: 2; grid-row: 2; justify-self: end; }
.tb.js .tb-filtra { display: none; }
.tb-s {
  --rm-rail: var(--rm-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--rm-line);
  border-radius: 6px;
  font: 600 .92rem/1 var(--tb-corpo);
  color: var(--rm-ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast, 120ms) ease-out, background-color var(--t-fast, 120ms) ease;
}
html body .tb a.tb-s:hover, html body .tb a.tb-gioca:hover, html body .tb a.tb-btn:hover, html body .tb a.tb-altri:hover { text-decoration: none; }
/* Il cartello blu di stazione, col filetto bianco: l'unico stato attivo dei filtri. */
.tb-s.on {
  --rm-rail: #fff;
  color: #fff;
  background: var(--tb-rfi);
  border-color: var(--tb-rfi);
  box-shadow: inset 0 0 0 2px var(--tb-rfi), inset 0 0 0 3px rgba(255, 255, 255, .92);
}
.tb-s:active { transform: scale(.97); }

/* ---------- Il tabellone ---------- */
.tb-tabellone {
  min-width: 0;
  background: var(--tb-riga);
  border: 1px solid var(--tb-filetto);
  border-radius: 8px;
  overflow: hidden;
  overflow: clip; /* clip e non hidden: le schede devono poter restare attaccate sotto la barra */
  box-shadow: inset 0 1px 0 var(--tb-filetto-luce), 0 18px 44px rgba(0, 0, 0, .28);
}
html[data-tema="chiaro"] .tb-tabellone { box-shadow: 0 8px 26px rgba(7, 27, 51, .08); }
/* Durante un cambio di filtro: la lista resta, un po' spenta, finche' arrivano le righe. */
.tb-tabellone.cambia .tb-righe { opacity: .55; transition: opacity 120ms linear; }
/* Le schede: i tre gruppi, col conteggio, sempre a portata mentre si scorre. */
.tb-schede {
  position: sticky;
  top: 106px;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  background: var(--tb-cassa-alta);
  border-bottom: 1px solid var(--tb-filetto);
}
html[data-tema="chiaro"] .tb-schede { background: var(--rm-surface2); }
/* Barra del sito e schede sono due strati appiccicati: per il browser un elemento
   sotto di loro e' gia' in vista, e il fuoco da tastiera all'indietro ci finisce sotto. */
html:has(.tb-schede) { scroll-padding-top: 186px; }
.tb-sk { justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 14px; }
.tb-sk-t { min-width: 0; white-space: nowrap; }
.tb-sk-n { font: 700 1.1rem/1 var(--tb-mono); font-variant-numeric: tabular-nums; }
.tb-s.tb-sk.vuota:not(.on) { color: var(--rm-muted); --rm-rail: var(--rm-muted); }
@media (hover: hover) { .tb-sk:not(.on):hover { background: var(--tb-cella); } }
.tb-colonne, .tb-riga-in { grid-template-columns: minmax(0, 1fr) 336px 124px; column-gap: 18px; }
.tb-colonne {
  display: grid;
  align-items: center;
  min-height: 44px;
  padding: 6px 16px;
  font: 600 .6875rem/1.2 var(--tb-corpo);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rm-muted);
  background: var(--tb-riga);
}
html body .tb .tb-conto {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-height: 25px;
  font: 500 .92rem/1.2 var(--tb-corpo);
  letter-spacing: 0;
  text-transform: none;
  color: var(--rm-muted);
}
.tb-ordine-l { justify-self: end; margin: 0; width: max-content; }
select.tb-ordine { height: 44px; width: auto; padding: 0 26px 0 10px; font-size: .86rem; letter-spacing: 0; text-transform: none; background-position: right 9px center; background-size: 10px 7px; }

/* Il titolo della scheda accesa e' la scheda stessa: resta per chi legge con un
   lettore di schermo. Si vede solo «Nessun dato», che una scheda sua non ce l'ha. */
html body .tb .tb-gruppo:not([data-g-box="muti"]) h2.tb-g-t { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
html body .tb h2.tb-g-t {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 16px;
  font-size: .86rem;
  line-height: 1.2;
  background: var(--tb-cassa-alta);
  border-top: 1px solid var(--tb-filetto);
}
html[data-tema="chiaro"] body .tb h2.tb-g-t { background: var(--rm-surface2); }
html body .tb h2.tb-g-t .rm-eyebrow { flex: none; margin: 0; white-space: nowrap; }
.tb-g-t small { font: 400 .84rem/1.2 var(--tb-corpo); color: var(--rm-muted); }

.tb-riga {
  position: relative;
  background: var(--tb-riga);
  border-top: 1px solid var(--tb-filetto);
  box-shadow: inset 0 1px 0 var(--tb-filetto-luce);
  cursor: pointer;
  content-visibility: auto;
  contain-intrinsic-block-size: auto 160px;
}
.tb-annuncio { content-visibility: visible; background: transparent; border-top: 0; box-shadow: none; cursor: default; }
.tb-riga[hidden] { display: none; }
.tb-riga.spenta { cursor: default; }
@media (hover: hover) {
  .tb-righe .tb-riga:not(.spenta):hover { background: var(--tb-riga-su); }
}
.tb-riga-in {
  display: grid;
  grid-template-areas: "targa storia stato" "da storia azione" "meta storia azione";
  grid-template-rows: auto auto 1fr;
  row-gap: 4px;
  padding: 12px 16px;
}
.tb-riga.fatta { box-shadow: inset 4px 0 0 var(--tb-giallo); }
.tb-riga.aperta { background: var(--tb-riga-aperta); content-visibility: visible; cursor: default; }
.tb-entra { animation: tb-entra 280ms var(--tb-ease) both; }
@keyframes tb-entra { from { opacity: .5; transform: translate3d(0, 8px, 0); } }

.tb-targa { grid-area: targa; display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
html body .tb .tb-da { grid-area: da; margin: 2px 0 0; font-size: .88rem; line-height: 1.35; color: var(--rm-muted); }
.tb-da b { font-family: var(--tb-mono); font-weight: 500; color: var(--rm-ink); }
.tb-piu1 { margin-left: 2px; font: 600 .6875rem/1 var(--tb-mono); color: var(--rm-muted); }
/* Il codice e' un link alla scheda: il testo e' piccolo, il bersaglio no. */
.tb-cod { --rm-rail: var(--rm-ink); position: relative; font: 700 .88rem/1.35 var(--tb-mono); text-decoration: none; }
.tb-cod::after { content: ""; position: absolute; inset: -13px -6px; }
html body .tb a.tb-cod:hover { text-decoration: underline; }
.tb-x2 { display: inline-block; margin-left: 4px; padding: 3px 6px 2px; border-radius: 3px; background: var(--tb-rfi); color: #fff; font: 700 .72rem/1 var(--tb-mono); white-space: nowrap; }
html body .tb .tb-meta {
  grid-area: meta;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 0;
  font-size: .84rem;
  line-height: 1.3;
  color: var(--rm-muted);
}
.tb-solito b, .tb-m-n { font-family: var(--tb-mono); font-weight: 700; }
.tb-m-n { color: var(--rm-ink); }
.tb-m-pron { display: inline-flex; align-items: center; gap: 6px; }
.tb-gente { display: inline-flex; gap: 2px; }
.tb-gente i { width: 7px; height: 7px; border-radius: 50%; background: var(--rm-ink); }
.tb-gente i.tuo { background: var(--tb-giallo); box-shadow: 0 0 0 1px rgba(7, 27, 51, .6); }

.tb-r-storia { grid-area: storia; min-width: 0; }
.tb-stato { grid-area: stato; display: grid; justify-items: end; align-content: start; gap: 4px; text-align: right; }
.tb-stato small { font: 600 .6875rem/1.1 var(--tb-corpo); letter-spacing: .12em; text-transform: uppercase; color: var(--rm-muted); }
.tb-stato.urgente small { color: var(--rm-ink); }
/* Sotto i dieci minuti, il pallino: e' un'allerta, non una cosa tua. */
.tb-stato.urgente small::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--rm-ink); animation: tb-lampo 1.2s steps(2, jump-none) infinite; }
@keyframes tb-lampo { from { opacity: 1; } to { opacity: .25; } }
/* L'avanzamento: blu rotaia, non e' un ritardo. Senza pomello. */
.tb-binario { position: relative; width: 100%; height: 3px; margin-top: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--rm-rail) calc(var(--p, 0) * 1%), var(--rm-line) 0); }

.tb-azione { grid-area: azione; align-self: end; min-width: 0; }
/* Pronostica: un filetto, finche' non lo si tocca. Il pieno e' del gesto. */
.tb-gioca {
  --rm-rail: var(--tb-pron-testo);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 10px;
  background: transparent;
  color: var(--tb-pron-testo);
  border: 1.5px solid var(--tb-pron-filetto);
  border-radius: 6px;
  font: 600 .94rem/1 var(--tb-corpo);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast, 120ms) ease-out, background-color var(--t-fast, 120ms) ease, border-color var(--t-fast, 120ms) ease;
}
.tb-gioca:focus-visible { --rm-rail: #fff; background: var(--tb-rfi); border-color: var(--tb-rfi); color: #fff; }
@media (hover: hover) { .tb-gioca:hover { --rm-rail: #fff; background: var(--tb-rfi); border-color: var(--tb-rfi); color: #fff; } }
.tb-gioca:active { transform: scale(.97); }
.tb-gioca--giallo, .tb-gioca--giallo:focus-visible {
  --rm-rail: var(--tb-su-giallo);
  min-height: 52px;
  padding: 0 22px;
  background: var(--tb-giallo);
  border-color: var(--tb-giallo);
  color: var(--tb-su-giallo);
  font: 800 1.08rem/1 var(--tb-titolo);
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--tb-giallo-ombra);
}
@media (hover: hover) { .tb-gioca--giallo:hover { --rm-rail: var(--tb-su-giallo); background: #FFDB66; border-color: #FFDB66; color: var(--tb-su-giallo); } }
/* Il tasto del giorno si fa notare: un lampo che passa sotto la scritta, cinque volte e poi basta. */
.tb-gioca--giallo { position: relative; overflow: hidden; isolation: isolate; }
.tb-gioca--giallo::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -64px;
  width: 56px;
  background: linear-gradient(105deg, transparent 15%, rgba(255, 255, 255, .7) 50%, transparent 85%);
  pointer-events: none;
  animation: tb-lampo 6s ease-in-out 1.6s 5;
}
@keyframes tb-lampo { from { transform: none; } 22%, to { transform: translate3d(480px, 0, 0); } }
.tb-tuo {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: var(--tb-giallo);
  color: var(--tb-su-giallo);
  cursor: pointer;
}
.tb-tuo small { font: 600 .8rem/1 var(--tb-corpo); }
.tb-tuo b { font: 700 1.16rem/1 var(--tb-mono); }
.tb-tuo:active { transform: scale(.97); }
.tb-chiusa { display: flex; align-items: center; justify-content: center; min-height: 44px; font: 500 .84rem/1.2 var(--tb-corpo); color: var(--rm-muted); text-align: center; }

/* Il vetro col display: scuro in entrambi i temi, e' un oggetto. */
.tb-vetro {
  background: var(--tb-vetro);
  border: 1px solid #000;
  border-radius: 6px;
  overflow: hidden;
  color-scheme: dark;
}
html[data-tema="chiaro"] .tb-vetro { border-color: #03101F; }
.tb-schermo-mini { position: relative; height: 56px; contain: layout paint; }
.tb-schermo-mini svg, .tb-schermo svg { display: block; width: 100%; height: 100%; }
.tb-zona { fill: var(--t-led, #93A0B4); opacity: .07; }
.tb-cresta { fill: none; stroke: rgba(255, 255, 255, .86); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.tb-asse { position: relative; height: 16px; font: 500 11px/16px var(--tb-mono); color: rgba(255, 255, 255, .66); border-top: 1px solid rgba(255, 255, 255, .07); }
.tb-tacca { position: absolute; top: 0; transform: translateX(-50%); }
.tb-tacca--a { transform: translateX(4px); }
.tb-tacca--z { transform: translateX(calc(-100% - 4px)); }
/* I pallini: al centro della fascia, seduti sulla cresta. Dove, mai chi. */
.tb-pallini { position: absolute; inset: 0; pointer-events: none; }
.tb-pallini i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #06080B; transform: translate(calc(-50% + var(--n, 0) * 8px - 8px), -100%); }
.tb-pallini--g i { width: 9px; height: 9px; transform: translate(calc(-50% + var(--n, 0) * 11px - 11px), -100%); }
.tb-riga-tuo { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--tb-giallo); box-shadow: 0 0 0 1px rgba(6, 8, 11, .55); }
.tb-riga-adesso { position: absolute; top: 0; bottom: 0; margin-left: -1px; border-left: 2px dashed #fff; }
/* Poche corse: griglia spenta, un puntino acceso per ogni corsa che c'e'. */
.tb-picchetto { position: absolute; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #FFB020; box-shadow: 0 0 5px rgba(255, 176, 32, .6); transform: translateY(calc(var(--n, 0) * -6px)); }
html body .tb .tb-vuoto-t { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 8px; margin: 0; padding: 0 10px; text-align: center; font: 500 .75rem/1.25 var(--tb-mono); color: #FFB020; }
html body .tb .tb-vuoto-t[hidden] { display: none; }
.tb-schermo .tb-vuoto-t { pointer-events: none; }
.tb-picchetti { position: absolute; inset: 0; pointer-events: none; }
.tb-vuoto-t b { font-weight: 700; }
.tb-vuoto-t span { color: rgba(255, 255, 255, .72); }

/* Le fasce sulla riga: cinque tasti uguali. Il fondo sale con la percentuale:
   la forma del treno si legge anche senza leggere i numeri. */
.tb-fasce { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin-top: 3px; }
.tb-f {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 2px 1px;
  overflow: hidden;
  border: 0;
  border-top: 3px solid var(--t-luce);
  border-radius: 0 0 4px 4px;
  background: var(--tb-cella);
  color: var(--rm-ink);
  cursor: pointer;
  transition: transform var(--t-fast, 120ms) ease-out;
}
.tb-f::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--p, 0) * 1%);
  background: var(--t-luce);
  opacity: .2;
}
.tb-f b { position: relative; font: 700 .96rem/1 var(--tb-mono); }
/* Non --rm-muted: il riempimento della fascia piu' probabile sale fin dietro la scritta. */
.tb-f small { position: relative; font: 500 .6875rem/1.1 var(--tb-corpo); color: var(--rm-ink); opacity: .82; white-space: nowrap; }
.tb-f.vuota small { color: var(--rm-muted); opacity: 1; }
.tb-f.vuota b { font-weight: 500; color: var(--rm-muted); }
.tb-f:active { transform: scale(.97); }
@media (hover: hover) { .tb-f:not(:disabled):hover { background: rgba(127, 127, 127, .18); } }
/* La fascia scelta: resta del suo colore, col bordo di chi l'ha scelta e il pallino giallo. Mai piena. */
.tb-f.on, .tb-pf.on { box-shadow: inset 0 0 0 2px var(--tb-mio); }
.tb-f.on::after, .tb-pf.on::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tb-giallo);
  box-shadow: 0 0 0 1px rgba(7, 27, 51, .7);
}
.tb-fasce.spente .tb-f { cursor: default; }
.tb-fasce.spente .tb-f:not(.on) { opacity: .45; }
.tb-f:disabled { color: var(--rm-ink); }

/* ---------- La riga che si apre (da 1100 px) ---------- */
.tb-slot { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--tb-ease); }
.tb-annuncio > .tb-slot { grid-column: 1 / -1; }
.tb-riga.aperta > .tb-slot { grid-template-rows: 1fr; }
.tb-slot > .tb-p { min-height: 0; overflow: hidden; }
.tb-riga.pronta > .tb-slot > .tb-p { overflow: visible; }
.tb-riga.pronta > .tb-slot > .tb-p.feritoia { overflow: hidden; }

/* ---------- Il pronostico sul posto ---------- */
.tb-p { color: var(--rm-ink); cursor: default; }
.tb-slot .tb-p { position: relative; }
.tb-slot .tb-p::before {
  content: "";
  display: block;
  height: 6px;
  background: radial-gradient(circle at 50% 50%, rgba(7, 27, 51, .28) 0 1.2px, transparent 1.5px) 0 0 / 6px 6px, var(--tb-giallo);
}
.tb-slot .tb-p-testa { position: absolute; right: 12px; top: 16px; z-index: 4; }
.tb-slot .tb-p-treno, .tb-slot .tb-p-stato { display: none; }
.tb-slot .tb-p-dom { padding: 16px 64px 0 16px; }
html body .tb .tb-slot .tb-p-nota { margin: 6px 64px 0 16px; }
.tb-slot .tb-p-gioco { padding: 12px 16px 18px; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
.tb-slot .tb-fatto { padding: 16px 16px 18px; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 24px; align-items: center; }
.tb-annuncio .tb-slot .tb-p { margin: 4px -20px -14px; background: var(--tb-riga-aperta); }

.tb-p-testa { display: flex; align-items: center; gap: 10px; }
.tb-p-treno { display: flex; gap: 6px; align-items: center; }
html body .tb .tb-p-stato { margin: 0; min-width: 0; font: 500 .84rem/1.2 var(--tb-corpo); color: var(--rm-muted); }
.tb-chiudi {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 0;
  border-radius: 6px;
  background: var(--tb-cella);
  color: var(--rm-ink);
  cursor: pointer;
}
html body .tb h2.tb-p-dom {
  margin: 0;
  font-family: var(--tb-titolo);
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--rm-ink);
  outline: 0;
}
html body .tb .tb-p-nota { margin: 6px 0 0; font-size: .88rem; line-height: 1.35; color: var(--rm-muted); }
.tb-p-nota[hidden] { display: none; }
.tb-p-nota b { color: var(--rm-ink); font-weight: 600; }
.tb-p-gioco { display: grid; gap: 12px; will-change: auto; }
.tb-p-gioco[hidden] { display: none; }
.tb-p-sx { min-width: 0; display: grid; gap: 10px; align-content: start; contain: layout style; }
/* La colonna della posta: Convalida in fondo, all'altezza della fine delle fasce. */
.tb-p-dx { min-width: 0; display: flex; flex-direction: column; gap: 10px; contain: layout style; }

.tb-p-lettura { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.tb-p-let-t { min-width: 0; display: grid; gap: 2px; }
.tb-p-let-t b { font: 700 1.1rem/1.15 var(--tb-titolo); color: var(--rm-ink); }
.tb-p-let-t small { font: 400 .84rem/1.25 var(--tb-corpo); color: var(--rm-muted); }
.tb-p-lettura.clack .tb-fl--valore { animation: tb-clack 160ms var(--tb-ease); }
@keyframes tb-clack { from { transform: scaleY(.9); } to { transform: none; } }

.tb-schermo {
  position: relative;
  height: 136px;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  contain: layout paint;
}
.tb-foglio .tb-schermo { touch-action: none; }
.tb-slot .tb-schermo { height: 176px; }
.tb-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.tb-vetro--p:has(.tb-range:focus-visible) { outline: 3px solid var(--rm-brand); outline-offset: 2px; }
.tb-vetro--p { overflow: hidden; }
.tb-tipica { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-left: 1px dashed rgba(255, 255, 255, .45); pointer-events: none; }
.tb-tipica[hidden] { display: none; }
.tb-tipica b { position: absolute; top: 28px; left: 4px; padding: 1px 3px; border-radius: 2px; background: rgba(6, 8, 11, .8); font: 500 11px/1.1 var(--tb-mono); color: rgba(255, 255, 255, .78); white-space: nowrap; }
.tb-tipica.a-sinistra b { left: auto; right: 4px; }
.tb-tipica.vicina b { opacity: 0; }
.tb-adesso { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-left: 2px dashed #fff; pointer-events: none; }
.tb-adesso[hidden] { display: none; }
.tb-adesso b { position: absolute; top: 46px; left: 4px; padding: 2px 4px; background: #fff; color: #06080B; border-radius: 2px; font: 700 11px/1 var(--tb-mono); white-space: nowrap; }
.tb-adesso.a-sinistra b { left: auto; right: 5px; }

/* La linea gialla che si trascina. La maniglia si ferma a 11 px dai bordi, la linea no. */
.tb-cursore { position: absolute; top: 0; bottom: 0; left: 0; width: 0; pointer-events: none; transform: translate3d(var(--x, 0px), 0, 0); }
.tb-cursore::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--tb-giallo); box-shadow: 0 0 0 1px rgba(6, 8, 11, .75); }
.tb-cursore::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -11px;
  width: 22px;
  height: 38px;
  margin-top: -19px;
  border-radius: 5px;
  background:
    linear-gradient(90deg, transparent 6px, var(--tb-su-giallo) 6px 8px, transparent 8px 10px, var(--tb-su-giallo) 10px 12px, transparent 12px 14px, var(--tb-su-giallo) 14px 16px, transparent 16px) 0 50% / 100% 14px no-repeat,
    var(--tb-giallo);
  box-shadow: 0 0 0 1px rgba(6, 8, 11, .75), 0 3px 8px rgba(0, 0, 0, .5);
  transform: translateX(var(--mx, 0px));
}
.tb-cursore b {
  position: absolute;
  top: 4px;
  left: 0;
  transform: translateX(calc(-50% + var(--dx, 0px)));
  padding: 3px 6px 2px;
  border-radius: 3px;
  background: var(--tb-giallo);
  color: var(--tb-su-giallo);
  font: 700 .82rem/1 var(--tb-mono);
  white-space: nowrap;
}
.tb-cursore[hidden] { display: none; }
.tb-schermo.trascina .tb-cursore { will-change: transform; }
.tb-schermo.trascina .tb-cursore::after { transform: translateX(var(--mx, 0px)) scale(1.06); }
/* Appena il pannello si apre la maniglia fa cenno, una volta sola: si trascina. */
.tb-schermo.cenno:not(.trascina) .tb-cursore::after { animation: tb-cenno 720ms ease-in-out 450ms 1; }
@keyframes tb-cenno {
  0%, 100% { transform: translateX(var(--mx, 0px)); }
  30% { transform: translateX(calc(var(--mx, 0px) + 7px)); }
  65% { transform: translateX(calc(var(--mx, 0px) - 4px)); }
}
html body .tb .tb-p-aiuto { margin: 0; font-size: .82rem; color: var(--rm-muted); }

.tb-p-fasce { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.tb-pf {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1px 4px;
  align-items: baseline;
  min-height: 56px;
  padding: 6px 7px 5px;
  overflow: hidden;
  border: 0;
  border-top: 3px solid var(--t-luce);
  border-radius: 0 0 4px 4px;
  background: var(--tb-cella);
  color: var(--rm-ink);
  text-align: left;
  cursor: pointer;
  transition: transform var(--t-fast, 120ms) ease-out;
}
.tb-pf:active { transform: scale(.97); }
@media (hover: hover) { .tb-pf:not(:disabled):hover { background: rgba(127, 127, 127, .18); } }
.tb-pf .n { font: 600 .82rem/1.15 var(--tb-corpo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-pf .v { font: 700 .95rem/1.1 var(--tb-mono); }
.tb-pf .s { grid-column: 1 / -1; font: 400 .72rem/1.15 var(--tb-corpo); color: var(--rm-muted); white-space: nowrap; }
.tb-pf .g { position: absolute; right: 7px; bottom: 7px; display: inline-flex; gap: 2px; }
.tb-pf .g i { width: 6px; height: 6px; border-radius: 50%; background: var(--rm-ink); }
/* Scelta: il pallino giallo in basso, a fianco di quelli degli altri, mai sopra il nome. */
.tb-pf.on::after { top: auto; bottom: 6px; }
.tb-pf.on .g { right: 19px; }
/* «punti in gioco ×5» arriva fino al bordo: il pallino scende nell'angolo. */
.tb-pf.t-sopp.on::after { right: 3px; bottom: 3px; }
.tb-pf.t-sopp { background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(127, 127, 127, .12) 5px 10px); }

.tb-posta-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; font: 600 .86rem/1.2 var(--tb-corpo); }
.tb-posta-t .tb-mono { font-weight: 500; font-size: .8rem; color: var(--rm-muted); }
.tb-posta-t .tb-mono b { color: var(--tb-mio); font-weight: 700; }
.tb-posta-c { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.25fr); gap: 4px; }
.tb-chip {
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--rm-line);
  border-radius: 6px;
  background: transparent;
  color: var(--rm-ink);
  font: 700 .95rem/1 var(--tb-mono);
  cursor: pointer;
  transition: transform var(--t-fast, 120ms) ease-out;
}
.tb-chip:active { transform: scale(.97); }
.tb-chip.on { background: var(--rm-ink); border-color: var(--rm-ink); color: var(--rm-bg); }
.tb-chip:disabled { opacity: .35; cursor: not-allowed; }
.tb-chip--tutto { font-family: var(--tb-corpo); font-weight: 600; font-size: .86rem; }
.tb-chip--tutto.on { background: var(--rm-red); border-color: var(--rm-red); color: var(--rm-on-red); }
html body .tb .tb-posta-av { margin: 6px 0 0; font-size: .82rem; color: var(--rm-red); }
.tb-posta-av[hidden] { display: none; }

.tb-conti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; }
.tb-conti > div { padding: 7px 8px 6px; background: var(--tb-cella); border-radius: 4px; }
.tb-conti dt { font: 500 .72rem/1.15 var(--tb-corpo); color: var(--rm-muted); }
.tb-conti dd { margin: 3px 0 0; font: 700 1.08rem/1.1 var(--tb-mono); color: var(--rm-ink); transform-origin: 0 50%; }
html body .tb .tb-esito { margin: 0; min-height: 2.5em; font-size: .86rem; line-height: 1.25; color: var(--rm-muted); }
.tb-esito b { color: var(--rm-ink); font-weight: 600; }
.tb-slot .tb-p-convalida { margin-top: auto; }
html body .tb .tb-p-errore { margin: 0 0 8px; padding: 8px 10px; border-radius: 4px; background: var(--tb-cella); box-shadow: inset 3px 0 0 var(--rm-red); font-size: .88rem; line-height: 1.3; color: var(--rm-ink); }
.tb .tb-p-errore:empty { display: none; }
.tb-p-errore a { --rm-rail: var(--rm-ink); display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; font-weight: 600; text-decoration: underline; }

.tb-conferma {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 6px;
  background: var(--tb-giallo);
  color: var(--tb-su-giallo);
  font: 800 1.14rem/1 var(--tb-titolo);
  box-shadow: 0 3px 0 var(--tb-giallo-ombra);
  cursor: pointer;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
.tb-conferma b { font: 700 1.12rem/1 var(--tb-mono); }
.tb-conferma:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tb-giallo-ombra); }
.tb-conferma[aria-busy="true"] { opacity: .7; }
.tb-conferma:disabled { opacity: .45; cursor: not-allowed; }

/* La versione senza account: niente punti in gioco e niente conferma, il tocco basta. */
.tb-p[data-modo="anon"] .tb-posta,
.tb-p[data-modo="anon"] .tb-conti,
.tb-p[data-modo="anon"] .tb-esito,
.tb-p[data-modo="anon"] .tb-conferma,
.tb-p[data-modo="anon"] .tb-cursore,
.tb-p[data-modo="anon"] .tb-range,
.tb-p[data-modo="anon"] .tb-p-lettura,
.tb-p[data-modo="anon"] .tb-p-aiuto { display: none; }
.tb-p[data-modo="anon"] .tb-schermo { cursor: default; height: 104px; }
.tb-slot .tb-p[data-modo="anon"] .tb-p-gioco { grid-template-columns: minmax(0, 1fr); }
.tb-p[data-modo="anon"] .tb-pf { min-height: 62px; }

/* A pronostico fatto la domanda ha gia' risposta: resta il biglietto. */
.tb-p[data-fase="fatto"] .tb-p-dom { display: none; }

/* ---------- La feritoia: il foglio scende, il server risponde, torna il biglietto. ---------- */
.tb-p.feritoia { position: relative; overflow: hidden; }
.tb-p.feritoia::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 12px;
  z-index: 3;
  background: radial-gradient(circle at 50% 50%, var(--tb-giallo) 0 2.5px, transparent 3px) 50% 50% / 100% 100% no-repeat, #020A14;
  box-shadow: 0 -2px 0 #000, 0 -8px 14px rgba(2, 10, 20, .4);
  pointer-events: none;
}

/* ---------- Il biglietto convalidato: la piccola soddisfazione.
   Sale dalla feritoia, l'obliteratrice lo timbra, lui trema una volta. ---------- */
.tb-fatto { display: grid; gap: 12px; justify-items: stretch; }
.tb-fatto[hidden] { display: none; }
.tb-bigl-box { min-width: 0; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .42)); }
html[data-tema="chiaro"] .tb-bigl-box { filter: drop-shadow(0 0 1px rgba(7, 27, 51, .55)) drop-shadow(0 8px 14px rgba(7, 27, 51, .18)); }
.tb-bigl {
  --trama: none;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  padding: 14px 18px 14px 30px;
  color: var(--tb-inchiostro);
  background: var(--tb-carta) var(--trama);
  border-radius: 8px;
  -webkit-mask-image: radial-gradient(circle 8px at 0 50%, transparent 97%, #000 100%), radial-gradient(circle 8px at 100% 50%, transparent 97%, #000 100%);
  mask-image: radial-gradient(circle 8px at 0 50%, transparent 97%, #000 100%), radial-gradient(circle 8px at 100% 50%, transparent 97%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* La trama di sicurezza cambia con la categoria, la carta no. */
.tb-bigl[data-fam="frecce"] { --trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='11'%3E%3Cpath d='M0 11 11 0l11 11' fill='none' stroke='%23071B33' stroke-opacity='.06'/%3E%3C/svg%3E"); }
.tb-bigl[data-fam="ic"] { --trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='10'%3E%3Cpath d='M0 5c5-5 11-5 16 0s11 5 16 0' fill='none' stroke='%23071B33' stroke-opacity='.07'/%3E%3C/svg%3E"); }
.tb-bigl[data-fam="reg"] { --trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Ccircle cx='4.5' cy='4.5' r='.8' fill='%23071B33' fill-opacity='.09'/%3E%3C/svg%3E"); }
.tb-bigl[data-fam="estero"] { --trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 0l12 12M12 0 0 12' fill='none' stroke='%23071B33' stroke-opacity='.055'/%3E%3C/svg%3E"); }
.tb-bigl::before {
  content: "";
  position: absolute;
  left: 17px; top: 10px; bottom: 10px;
  border-left: 2px dotted rgba(7, 27, 51, .28);
}
.tb-bigl.convalida { animation: tb-scossa 240ms 430ms ease-out; }
@keyframes tb-scossa { 30% { transform: translateY(3px) rotate(-.5deg); } 65% { transform: translateY(-1px) rotate(.25deg); } 100% { transform: none; } }
.tb-bigl-m { display: grid; gap: 3px; align-content: start; min-width: 0; }
.tb-bigl-e { font: 700 .6875rem/1 var(--tb-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tb-grigio); }
.tb-bigl-c { font: 700 1.3rem/1.05 var(--tb-mono); }
.tb-bigl-p { font: 700 1rem/1.15 var(--tb-titolo); }
.tb-bigl-v { display: grid; gap: 3px; justify-items: end; }
.tb-bigl-v small { font: 600 .72rem/1 var(--tb-corpo); color: var(--tb-grigio); }
/* La curva stampata: colori pieni di carta, e la bandierina del tuo valore. */
.tb-bigl-curva { grid-column: 1 / -1; position: relative; height: 62px; margin-top: 14px; border-bottom: 1.5px solid var(--tb-inchiostro); }
.tb-bigl-curva:empty { display: none; }
.tb-bigl-curva svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tb-bigl-curva path { vector-effect: non-scaling-stroke; }
.tb-band { position: absolute; top: -16px; bottom: 0; width: 0; border-left: 1.5px solid var(--tb-inchiostro); }
.tb-band b { position: absolute; top: 0; left: -1.5px; padding: 2px 5px 1px; background: var(--tb-giallo); color: var(--tb-su-giallo); border-radius: 2px; font: 700 .6875rem/1.1 var(--tb-mono); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--tb-inchiostro); }
.tb-band.dx b { left: auto; right: 0; }
.tb-bigl-d { grid-column: 1 / -1; display: grid; gap: 3px; margin: 0; padding: 10px 142px 0 0; border-top: 1px dashed rgba(7, 27, 51, .3); }
.tb-bigl-d > div { display: flex; justify-content: space-between; gap: 8px; font-size: .84rem; line-height: 1.3; }
.tb-bigl-d dt { font-weight: 500; color: var(--tb-grigio); white-space: nowrap; }
.tb-bigl-d dd { margin: 0; font: 700 .86rem/1.3 var(--tb-mono); white-space: nowrap; }
.tb-timbro {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  gap: 3px;
  justify-items: center;
  min-width: 130px;
  padding: 7px 8px 6px;
  border: 2.5px solid var(--tb-timbro);
  border-radius: 4px;
  color: var(--tb-timbro);
  transform: rotate(-7deg);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.tb-timbro b { font: 800 .84rem/1 var(--tb-mono); letter-spacing: .02em; text-transform: uppercase; }
.tb-timbro span { font: 700 .74rem/1 var(--tb-mono); white-space: nowrap; }
.tb-bigl.senza-timbro .tb-timbro { opacity: 0; }
.tb-bigl.convalida .tb-timbro { animation: tb-timbra 190ms 280ms cubic-bezier(.5, 0, .9, .4) both; }
@keyframes tb-timbra {
  from { opacity: 0; transform: rotate(-7deg) scale(2); }
  to { opacity: 1; transform: rotate(-7deg) scale(1); }
}
.tb-fatto-t-box { display: grid; gap: 8px; min-width: 0; }
html body .tb .tb-fatto-t { margin: 0; font: 800 1.42rem/1.12 var(--tb-titolo); letter-spacing: -.01em; color: var(--rm-ink); outline: 0; }
.tb-slot .tb-fatto-t { padding-right: 52px; }
html body .tb .tb-fatto-s { margin: 0; font-size: .94rem; line-height: 1.4; color: var(--rm-muted); }
.tb-fatto-s b { color: var(--rm-ink); font-weight: 600; font-family: var(--tb-mono); }
/* Il saldo che gira a palette. */
.tb-saldo-pal { display: flex; align-items: center; gap: 2px; }
.tb-saldo-pal[hidden] { display: none; }
.tb-saldo-pal small { margin-right: 8px; font: 500 .84rem/1 var(--tb-corpo); color: var(--rm-muted); }
.tb-saldo-pal .pal { --pw: 19px; --ph: 28px; --pf: 17px; color: var(--tb-giallo); }
/* I tuoi biglietti di oggi. */
.tb-mazzo { position: relative; display: flex; gap: 6px; margin-bottom: -8px; padding: 20px 0 10px 1px; overflow: auto hidden; scrollbar-width: none; }
.tb-mazzo[hidden] { display: none; }
.tb-mazzo::-webkit-scrollbar { display: none; }
.tb-mazzo::before { content: "I tuoi biglietti di oggi"; position: absolute; left: 0; top: 0; font: 500 .72rem/1.2 var(--tb-corpo); color: var(--rm-muted); white-space: nowrap; }
.tb-mini { flex: none; display: inline-flex; flex-direction: column; gap: 1px; padding: 5px 9px 5px 8px; background: var(--tb-carta); color: var(--tb-inchiostro); border-radius: 3px; font: 500 .72rem/1.25 var(--tb-mono); white-space: nowrap; }
.tb-mini b { font-weight: 700; }
.tb-mini i { font-style: normal; font-weight: 700; color: var(--tb-timbro); }
html[data-tema="chiaro"] .tb-mini { box-shadow: 0 0 0 1px rgba(7, 27, 51, .16); }
.tb-mini.nuovo { background: var(--tb-giallo); color: var(--tb-su-giallo); animation: tb-mini 420ms var(--tb-ease) 500ms both; }
.tb-mini.nuovo i { color: var(--tb-su-giallo); }
@keyframes tb-mini { from { transform: translate3d(0, 10px, 0) rotate(-5deg); opacity: .4; } to { transform: none; opacity: 1; } }
/* Annulla: quattro secondi, una barra che si consuma. */
.tb-annulla {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  overflow: hidden;
  border: 1px solid var(--rm-line);
  border-radius: 6px;
  background: transparent;
  color: var(--rm-ink);
  font: 600 .92rem/1 var(--tb-corpo);
  cursor: pointer;
}
.tb-annulla[hidden] { display: none; }
.tb-annulla i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rm-ink); transform-origin: 0 50%; animation: tb-annulla 4s linear both; }
@keyframes tb-annulla { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.tb-fatto-a { display: grid; gap: 8px; margin-top: 2px; }
/* Il prossimo treno: il tasto giallo a due righe. */
.tb-prossimo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 7px 14px;
  border: 0;
  border-radius: 6px;
  background: var(--tb-giallo);
  color: var(--tb-su-giallo);
  text-align: left;
  box-shadow: 0 3px 0 var(--tb-giallo-ombra);
  cursor: pointer;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
.tb-prossimo[hidden] { display: none; }
.tb-prossimo small { display: block; font: 500 .8rem/1.2 var(--tb-corpo); }
.tb-prossimo b { display: block; font: 800 1.08rem/1.15 var(--tb-titolo); }
.tb-prossimo svg { flex: none; transition: transform 160ms var(--tb-ease); }
.tb-prossimo:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tb-giallo-ombra); }
@media (hover: hover) {
  .tb-prossimo:hover { background: #FFDB66; }
  .tb-prossimo:hover svg { transform: translate3d(4px, 0, 0); }
}
.tb-btn {
  --rm-rail: var(--rm-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--rm-line);
  border-radius: 6px;
  background: transparent;
  color: var(--rm-ink);
  font: 600 .95rem/1 var(--tb-corpo);
  text-decoration: none;
  cursor: pointer;
}
.tb-btn--primo { --rm-rail: #fff; background: var(--rm-brand-solid, #0B63D6); border-color: var(--rm-brand-solid, #0B63D6); color: #fff; }
.tb-btn[hidden] { display: none; }

/* Sotto le fasce: se arrivasse cosi', e il tocco senza account. */
html body .tb .tb-se { margin: 6px 0 0; font-size: .86rem; line-height: 1.3; color: var(--rm-muted); }
.tb-se b { color: var(--rm-ink); font-family: var(--tb-mono); font-weight: 700; }
html body .tb .tb-segnato { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 6px 0 0; padding: 0 10px; border-radius: 4px; background: var(--tb-cella); font-size: .86rem; line-height: 1.3; color: var(--rm-ink); box-shadow: inset 3px 0 0 var(--tb-giallo); }
html body .tb .tb-segnato.errore { box-shadow: inset 3px 0 0 var(--rm-red); }
.tb-segnato span { padding: 8px 0; }
.tb-segnato span:has(+ a) { padding-bottom: 0; }
.tb-segnato a { --rm-rail: var(--rm-ink); display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; }
.tb-segnato .tb-annulla { margin-left: auto; min-height: 44px; }

/* Come si fanno i punti */
.tb-regole { margin: 0 0 12px; background: var(--tb-riga); border: 1px solid var(--tb-filetto); border-radius: 6px; }
.tb-regole summary { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 5px; font: 600 .95rem/1.2 var(--tb-corpo); cursor: pointer; }
/* display: flex toglie il marcatore: senza la freccetta non si capisce che si apre. */
.tb-regole summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -4px 2px 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 160ms var(--tb-ease); }
.tb-regole[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.tb-regole table { width: min(calc(100% - 32px), 420px); margin: 0 16px 10px; border-collapse: collapse; font-size: .9rem; }
.tb-regole th { padding: 5px 0; font-weight: 500; text-align: left; color: var(--rm-muted); border-top: 1px solid var(--rm-line); }
.tb-regole td { padding: 5px 0; font: 700 .92rem/1.3 var(--tb-mono); text-align: right; border-top: 1px solid var(--rm-line); }
html body .tb .tb-regole p { margin: 0 16px 14px; max-width: 62ch; font-size: .9rem; line-height: 1.45; color: var(--rm-muted); }

/* ---------- Il foglio che sale, sotto i 1100 px ---------- */
.tb-foglio {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 640px;
  max-height: 94vh;
  max-height: 94dvh;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--rm-ink);
}
.tb-foglio::backdrop { background: rgba(3, 7, 14, .62); animation: tb-velo 220ms ease-out both; }
.tb-foglio.chiude::backdrop { opacity: 0; transition: opacity 180ms ease-out; }
@keyframes tb-velo { from { opacity: 0; } }
.tb-foglio-in {
  position: relative;
  max-height: 94vh;
  max-height: 94dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--tb-foglio);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .4);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translate3d(0, var(--y, 0px), 0);
}
.tb-foglio-in::before {
  content: "";
  display: block;
  height: 8px;
  background: radial-gradient(circle at 50% 50%, rgba(7, 27, 51, .28) 0 1.3px, transparent 1.7px) 0 0 / 8px 8px, var(--tb-giallo);
}
.tb-foglio[open] .tb-foglio-in { animation: tb-sale 300ms var(--tb-ease); }
.tb-foglio.chiude .tb-foglio-in { transform: translate3d(0, 100%, 0); transition: transform 200ms ease-in; }
.tb-foglio.tira .tb-foglio-in { transition: none; animation: none; }
@keyframes tb-sale { from { transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } }
/* La maniglia: si vede una lineetta, si prende una fascia alta 44 px. */
.tb-maniglia { position: absolute; top: 8px; left: 0; right: 0; height: 44px; display: flex; justify-content: center; padding-top: 7px; touch-action: none; cursor: grab; }
.tb-maniglia i { width: 42px; height: 5px; border-radius: 3px; background: var(--rm-line); }
.tb-foglio .tb-p { display: grid; align-content: start; gap: 8px; padding: 22px 14px 16px; }
/* Convalida resta in vista anche su uno schermo basso: sticky dentro tutto il
   gioco, non dentro la sua colonna, con 14 px di sfumatura sopra. */
.tb-foglio .tb-p-dx { display: contents; }
.tb-foglio .tb-p-convalida { position: sticky; bottom: 0; z-index: 2; margin-top: -8px; padding: 14px 0 6px; background: linear-gradient(transparent, var(--tb-foglio) 14px); }
.tb-foglio .tb-p[data-modo="anon"] .tb-p-convalida { position: static; margin: 0; padding: 0; background: none; }
html:has(.tb-foglio[open]) { overflow: hidden; }

/* ---------- Il caricamento mentre si scorre ---------- */
.tb-arrivo { display: grid; gap: 10px; padding: 16px; border-top: 1px solid var(--tb-filetto); justify-items: start; }
.tb-arrivo[hidden] { display: none; }
.tb-arrivo-r { display: grid; gap: 6px; width: 100%; }
.tb-arrivo-r i { display: block; height: 30px; border-radius: 3px; background: linear-gradient(#222831 0 50%, #1B2028 50% 100%); opacity: .55; }
html[data-tema="chiaro"] .tb-arrivo-r i { background: var(--rm-surface2); opacity: 1; }
.tb-arrivo-r i:nth-child(2) { width: 82%; }
.tb-arrivo-r i:nth-child(3) { width: 64%; }
.tb-altri { --rm-rail: var(--rm-ink); display: flex; align-items: center; justify-content: center; min-height: 48px; font-weight: 600; text-decoration: none; border-top: 1px solid var(--tb-filetto); }
.tb-altri--prima { border-top: 0; border-bottom: 1px solid var(--tb-filetto); }
.tb-altri.js { min-height: 1px; height: 1px; overflow: hidden; opacity: 0; border: 0; }
.tb-altri[hidden] { display: none; }
html body .tb .tb-fine { display: grid; gap: 8px; justify-items: center; margin: 0; padding: 22px 16px 24px; text-align: center; border-top: 1px solid var(--tb-filetto); color: var(--rm-muted); font-size: .86rem; }
.tb-fine[hidden] { display: none; }
.tb-niente { display: grid; gap: 6px; justify-items: center; padding: 34px 16px; text-align: center; border-top: 1px solid var(--tb-filetto); }
.tb-niente[hidden] { display: none; }
html body .tb .tb-niente-t { margin: 0; font: 800 1.3rem/1.2 var(--tb-titolo); color: var(--rm-ink); }
html body .tb .tb-niente-s { margin: 0 0 8px; color: var(--rm-muted); }

.tb-prova { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--rm-line); border-radius: 6px; font-size: .84rem; color: var(--rm-muted); }

/* ---------- Telefono e tavoletta ---------- */
@media (max-width: 1099.98px) {
  html body main > .tb { margin-top: -12px; }
  html body main > link:first-child + .tb { margin-top: -24px; }
  .tb-cassa, .tb-tabellone { margin-inline: calc(var(--gutter, 12px) * -1); border-radius: 0; border-inline: 0; }
  .tb-cima { padding: 8px 14px; gap: 8px; }
  .tb-cima-t { font-size: .6875rem; letter-spacing: .1em; }
  .tb-cima-d { display: none; }
  /* L'orologio perde i secondi: sono rumore, e su uno schermo stretto spazio. */
  .tb-orologio .tb-sec { display: none; }
  .tb-orologio .pal { --pw: 15px; --ph: 23px; --pf: 14px; }
  .tb-due { width: 5px; height: 12px; background: radial-gradient(circle at 50% 25%, rgba(255, 255, 255, .65) 0 1.3px, transparent 1.6px), radial-gradient(circle at 50% 75%, rgba(255, 255, 255, .65) 0 1.3px, transparent 1.6px); }
  .tb-testa { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 14px; }
  html body .tb h1.tb-h1 { font-size: clamp(1.8rem, 1.2rem + 3vw, 2.6rem); }
  html body .tb .tb-sotto { margin-top: 5px; font-size: .9rem; line-height: 1.32; }
  /* Il testo a puntini e' ritagliato sul riquadro: cio' che esce sparisce senza segno.
     Quindi il saldo si prende la sua misura, e sono gli altri tre a dividersi il resto. */
  .tb-led { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; padding: 8px 0 7px; }
  .tb-led > div { min-width: 0; padding: 0 8px; gap: 4px; }
  .tb-led dd { font-size: 1.32rem; }
  .tb-led dt { font-size: .6875rem; }

  .tb-annuncio { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 14px 14px; }
  .tb-an-sx { display: contents; }
  html body .tb .tb-an-tag { order: 1; margin: 0; justify-content: space-between; }
  .tb-sigillo { width: 34px; height: 34px; font-size: .86rem; }
  .tb-an-id { order: 2; }
  .tb-fl--ora-g, .tb-fl--cod-g { --t: 22px; --al: 38px; }
  html body .tb h2.tb-an-dest { order: 3; margin: 0; }
  html body .tb .tb-an-voce { order: 4; margin: 0; font-size: .9rem; line-height: 1.32; }
  .tb-an-conta { order: 5; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; padding: 0; }
  .tb-an-dx { order: 6; }
  .tb-an-parte { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .tb-an-parte .tb-fl--ades, .tb-an-parte .tb-fl--conta { --t: 22px; --al: 38px; }
  .tb-an-parte .tb-binario { flex: 1 1 0; min-width: 40px; width: auto; margin: 0; }
  .tb-an-parte small { margin: 0; }
  .tb-conta-g .pal { --pw: 24px; --ph: 34px; --pf: 22px; }
  .tb-annuncio .tb-schermo-mini { height: 126px; }
  .tb-annuncio .tb-fasce { display: none; }
  .tb-gioca--giallo, .tb-gioca--giallo:focus-visible { min-height: 54px; }

  .tb-nastro-e { padding: 0 10px 0 14px; }

  .tb-filtri { grid-template-columns: minmax(0, 1fr) 150px; padding: 12px 0; gap: 8px; }
  .tb-cerca { padding: 0 10px; gap: 8px; }
  .tb-cat { margin: -5px calc(var(--gutter, 12px) * -1); padding: 5px var(--gutter, 12px); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: 4px; }
  .tb-cat::-webkit-scrollbar { display: none; }
  .tb-cat .tb-s { flex: 1 0 auto; padding: 0 10px; font-size: .875rem; }
  .tb-filtra { grid-column: 1 / -1; grid-row: 3; justify-self: stretch; }

  .tb-schede { top: 68px; gap: 4px; padding: 6px var(--gutter, 12px); }
  html:has(.tb-schede) { scroll-padding-top: 148px; }
  .tb-sk { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-height: 52px; padding: 5px 9px; }
  .tb-sk-t { font-size: .78rem; }
  @media (max-width: 419px) { .tb-schede { grid-template-columns: 1.32fr 1fr 1fr; } }
  .tb-sk-n { font-size: 1.02rem; }
  .tb-colonne { grid-template-columns: minmax(0, 1fr) auto; padding: 6px 14px; }
  .tb-col { display: none; }
  select.tb-ordine { font-size: 1rem; }
  html body .tb h2.tb-g-t { padding: 8px 14px; }
  .tb-riga-in {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "targa targa" "da stato" "storia storia" "meta azione";
    grid-template-rows: none;
    column-gap: 10px;
    row-gap: 7px;
    padding: 10px 14px 12px;
  }
  .tb-fl--ora { --t: 17px; --al: 31px; }
  .tb-fl--dest { --t: 16px; }
  @supports (width: 1cqi) { .tb-fl--dest { --t: min(16px, calc(100cqi / var(--n, 1))); } }
  html body .tb .tb-da { align-self: center; margin: 0; }
  /* «arriva» a capo con il suo separatore tolto: niente puntino appeso a fine riga. */
  .tb-da-arr { display: block; }
  .tb-da-sep { display: none; }
  /* «primo dato in arrivo» su due righe: largo com'era schiacciava l'origine su tre. */
  .tb-stato small { max-width: 14ch; }
  .tb-stato { align-self: center; gap: 3px; }
  .tb-fl--conta { --t: 13px; --al: 26px; }
  .tb-fl--ades { --t: 15px; --al: 28px; }
  .tb-stato[data-stato="viaggio"], .tb-stato[data-stato="ieri"] { min-width: 96px; }
  .tb-azione { min-width: 122px; }
  html body .tb .tb-meta { align-self: center; gap: 2px 12px; }
  .tb-slot { display: none; }
  .tb-p-gioco { gap: 10px; }
  .tb-fl--valore { --t: 24px; --al: 44px; }
  .tb-p-lettura { min-height: 44px; }
  .tb-schermo { height: 118px; }
  .tb-p-sx { gap: 8px; }
  .tb-p-aiuto { display: none; }
  html body .tb .tb-p-aiuto { display: none; }
  html body .tb .tb-esito { min-height: 2.4em; }
  html body .tb h2.tb-p-dom { font-size: 1.16rem; padding-right: 0; }
  .tb-fatto-t-box { gap: 8px; }
}

/* Tavoletta: storia a destra, della sua misura, e i puntini restano tondi. */
@media (min-width: 720px) and (max-width: 1099.98px) {
  .tb-annuncio { grid-template-columns: minmax(0, 1fr) 360px; gap: 12px 24px; }
  .tb-an-sx { display: flex; gap: 10px; min-width: 0; }
  .tb-an-dx { order: 0; grid-column: 2; grid-row: 1; }
  .tb-annuncio .tb-fasce { display: grid; }
  .tb-an-conta { order: 5; }
  .tb-riga-in {
    grid-template-columns: minmax(0, 1fr) auto 336px;
    grid-template-areas: "targa targa storia" "da stato storia" "meta azione storia";
    column-gap: 14px;
  }
}

/* Telefono in orizzontale e zoom forte: due strati appiccicati si mangerebbero un terzo della lista. */
@media (max-height: 520px) {
  .tb-schede { position: static; }
  html:has(.tb-schede) { scroll-padding-top: 84px; }
}
@media (max-height: 520px) and (min-width: 1100px) {
  html:has(.tb-schede) { scroll-padding-top: 122px; }
}

/* Saldo da 6 caratteri in su: stessa altezza di riga, cifre piu' strette. */
@media (max-width: 479.98px) {
  .tb-led dd.lungo { font-size: 1.05rem; line-height: 1.32rem; }
}

/* Schermi bassi: si toglie il testo dell'esito, non Convalida. */
@media (max-height: 699.98px) and (max-width: 1099.98px) {
  .tb-schermo { height: 92px; }
  .tb-pf { min-height: 50px; padding-block: 4px; }
  html body .tb h2.tb-p-dom { font-size: 1.05rem; }
  .tb-foglio .tb-p { gap: 6px; padding-top: 18px; }
  html body .tb .tb-esito { display: none; }
}

@media (max-width: 379px) {
  .tb-cerca { padding: 0 8px; gap: 6px; }
  .tb-pf { padding-inline: 6px; }
  .tb-pf .n { font-size: .78rem; }
  .tb-pf .v { font-size: .88rem; }
  .tb-led > div { padding: 0 6px; }
  .tb-f b { font-size: .9rem; }
}

@media (max-width: 359px) {
  /* 320 px: le fasce del pannello a due colonne, i tre valori stretti. */
  .tb-p-fasce { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-led dd { font-size: 1.1rem; }
  .tb-led dd.lungo { line-height: 1.1rem; }
  .tb-filtri { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cerca" "regione" "cat"; }
  .tb-azione { min-width: 108px; }
  .tb-conti dd { font-size: .98rem; }
  .tb-bigl { padding: 12px 14px 12px 26px; }
  .tb-bigl-d { padding-right: 0; padding-bottom: 58px; }
}

/* Da 1100 px: il pronostico si apre dentro la riga, e la riga si fa da parte.
   Niente due curve e due file di fasce una sopra l'altra. */
@media (min-width: 1100px) {
  .tb-slot .tb-p-fasce { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tb-foglio { display: none; }
  .tb-foglio[open] { display: block; }

  .tb-righe .tb-riga.aperta .tb-riga-in {
    grid-template-columns: minmax(0, 1fr) 124px;
    grid-template-areas: "targa stato" "da stato";
    grid-template-rows: auto auto;
  }
  .tb-riga.aperta .tb-r-storia, .tb-riga.aperta .tb-riga-in > .tb-meta, .tb-riga.aperta .tb-azione { display: none; }
  html body .tb .tb-riga.aperta .tb-riga-in > .tb-meta { display: none; }

  .tb-annuncio.aperta { grid-template-columns: minmax(0, 1fr); padding-bottom: 14px; }
  .tb-annuncio.aperta .tb-an-dx, .tb-annuncio.aperta .tb-an-voce, .tb-annuncio.aperta .tb-an-conta { display: none; }
  html body .tb .tb-annuncio.aperta .tb-an-voce { display: none; }
  .tb-annuncio.aperta .tb-an-sx { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 8px; align-items: start; }
  html body .tb .tb-annuncio.aperta .tb-an-tag { grid-column: 1 / -1; margin: 0; }
  html body .tb .tb-annuncio.aperta h2.tb-an-dest { margin: 0; }
}

/* ---------- Il mouse ----------
   Il tasto piu' importante non puo' sembrare spento proprio dove l'invito conta. */
@media (hover: hover) {
  .tb-conferma:not(:disabled):not([aria-busy="true"]):hover, .tb-tuo:hover { background: #FFDB66; }
  .tb-conferma:not(:disabled):not([aria-busy="true"]):not(:active):hover, .tb-prossimo:not(:active):hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--tb-giallo-ombra); }
  /* Il mouse sulla riga chiama gia' il suo tasto. */
  .tb-righe .tb-riga:not(.spenta):hover .tb-gioca:not(:hover) { box-shadow: inset 0 0 0 1px currentColor; }
  .tb-regole summary:hover { background: var(--tb-cella); }
  .tb-chip:not(.on):not(:disabled):hover,
  .tb-cat .tb-s:not(.on):hover,
  .tb-btn:not(.tb-btn--primo):hover,
  .tb-annulla:hover { background: var(--tb-cella); }
  .tb-chiudi:hover { background: rgba(127, 127, 127, .22); }
}

/* ---------- Contrasto elevato ----------
   I fondi spariscono: la linea e la maniglia tengono il giallo, i tasti pieni
   prendono un bordo, e cio' che hai scelto si riconosce dal contorno. */
@media (forced-colors: active) {
  .tb-cursore::before, .tb-cursore::after, .tb-f.on::after, .tb-pf.on::after { forced-color-adjust: none; }
  .tb-conferma, .tb-prossimo, .tb-tuo { border: 2px solid ButtonText; }
  .tb-f.on, .tb-pf.on, .tb-s.on { outline: 3px solid Highlight; outline-offset: -3px; }
  .tb-chip.on { border: 3px solid Highlight; }
}

/* ---------- Movimento ridotto ----------
   Il blocco globale del sito (style.css:7515) porta tutto a .01ms; qui solo
   cio' che resterebbe infinito o non avrebbe senso: il nastro si legge a mano. */
@media (prefers-reduced-motion: reduce) {
  .tb-nastro-in { animation: none; }
  /* Si scorre con una barra vera: sottile, scura, e sotto i nomi, non sopra. */
  .tb-nastro { height: auto; }
  .tb-nastro-f { overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .4) transparent; }
  .tb-nastro-c { display: none; }
  .tb-gioca--giallo::after { animation: none; }
  .tb-schermo.cenno:not(.trascina) .tb-cursore::after { animation: none; }
  .tb-stato.urgente small::before { animation: none; }
  .tb-slot { transition: none; }
  .tb-entra { animation: none; }
  .tb-bigl.convalida, .tb-bigl.convalida .tb-timbro { animation: none; }
  .tb-mini.nuovo { animation: none; }
  .tb-annulla i { animation: none; }
  .tb-foglio[open] .tb-foglio-in { animation: none; }
  .tb-foglio.chiude .tb-foglio-in { transition: none; }
  .tb-p-lettura.clack .tb-fl--valore { animation: none; }
}