.mostri { --m-navy: var(--scuro, #0F1B3D); --m-navy2: #172A5C; --m-giallo: #FFD21F; --m-chiaro: #8DB0FF; padding-bottom: 32px; }
.mostri-testa { font-size: 1.0625rem; margin: 20px 0 20px; }
.mostri-testa b { font-family: var(--titoli); font-weight: 800; }
.mostri-data { margin-top: 28px; }
.mostri-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 8px 0 20px; }
.mostri-nav { margin: 24px 0 0; }
.vuoto-mostri { color: var(--secondario); }

.mostro { background: var(--fondo); border: 1px solid var(--bordo-schede); border-radius: 16px; padding: 22px 22px 20px; box-shadow: var(--ombra); display: flex; flex-direction: column; min-width: 0; }
.mostro-premio { display: inline-block; align-self: flex-start; margin: 0 0 14px; padding: 3px 10px; border-radius: 6px; background: var(--m-giallo); color: var(--m-navy);
  font: 800 .8125rem var(--titoli); text-transform: uppercase; letter-spacing: .06em; }
.mostro-cifra { margin: 0; color: var(--m-navy); line-height: 1.05; }
.mostro-cifra b { font: 800 3.25rem var(--titoli); letter-spacing: -.02em; }
.mostro-cifra span { font: 600 1.0625rem var(--titoli); color: var(--secondario); }
.mostro-sotto { margin: 6px 0 0; font-size: .9375rem; color: var(--secondario); }
.mostro-volte { margin: 6px 0 14px; font: 700 .9375rem var(--titoli); color: var(--primario); }
.mostro-oggetto { font-size: 1rem; font-weight: 600; line-height: 1.4; margin: 0 0 6px; }
.mostro-oggetto a { color: var(--testo); text-decoration-color: var(--bordo-controlli); text-underline-offset: 3px; }
.mostro-oggetto a:hover { color: var(--primario); }
.mostro-ente { margin: 0 0 14px; font-size: .875rem; color: var(--secondario); text-transform: none; }
.mostro-dati { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 4px 20px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--bordo-schede); }
.mostro-dati div { min-width: 0; }
.mostro-dati dt { font-size: .75rem; color: var(--secondario); text-transform: uppercase; letter-spacing: .05em; }
.mostro-dati dd { margin: 0; font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.mostro-vuoto { background: var(--superficie); box-shadow: none; }

.mostro-pila { display: flex; flex-wrap: wrap; gap: 3px; margin: 16px 0 0; }
.mostro-pila .blocco { display: block; width: 11px; height: 26px; border-radius: 3px; background: var(--primario); font-style: normal; }
.mostro-pila .blocco.q1 { width: 3px; } .mostro-pila .blocco.q2 { width: 6px; } .mostro-pila .blocco.q3 { width: 9px; }
.mostro-pila .blocco.piu { width: auto; padding: 0 5px; background: var(--m-giallo); color: var(--m-navy); font: 800 .8125rem/26px var(--titoli); }

.mostri .mostri-fascia { background: var(--m-navy); color: #fff; border-radius: 20px; padding: 22px 28px 28px; margin-top: 8px; }
.mostri .mostri-fascia h1 { color: #fff; }
.mostri .mostri-fascia .sottotitolo { color: #C3CFEE; margin-bottom: 0; }
.mostri .mostri-fascia .briciole, .mostri .mostri-fascia .briciole a, .mostri .mostri-fascia .briciole li { color: #C3CFEE; }
.mostri .mostri-fascia .mostri-data { color: var(--m-giallo); margin: 18px 0 0; font-size: 1.125rem; }
.mostri .mostri-testa { background: var(--blu-chiaro); border-radius: 12px; padding: 14px 18px; margin: 20px 0 22px; }
.mostri .mostro { border-top: 6px solid var(--m-navy); }
.mostri .mostro-pila { padding: 12px 12px; background: var(--superficie); border-radius: 10px; margin-top: 18px; }

.mostri .classifica { background: var(--m-navy); color: #fff; border-radius: 16px; padding: 20px 24px 14px; margin: 0 0 24px; }
.mostri .classifica h2 { color: var(--m-giallo); margin: 0 0 10px; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .06em; }
.mostri .classifica ol { list-style: none; margin: 0; padding: 0; }
.mostri .cl-riga { display: grid; grid-template-columns: 170px minmax(0, 1fr) 110px; gap: 14px; align-items: center; padding: 6px 0; }
.mostri .cl-nome { font: 600 .9375rem var(--titoli); }
.mostri .cl-val { font: 700 .9375rem var(--titoli); text-align: right; }
.mostri .cl-barra { width: 100%; height: 24px; display: block; }
.mostri .cl-pieno { fill: var(--m-chiaro); }
.mostri .cl-med { fill: var(--m-giallo); }
.mostri .classifica .nota { color: #C3CFEE; margin: 6px 0 0; }

@media (max-width: 860px) {
  .mostri-griglia { grid-template-columns: minmax(0, 1fr); }
  .mostri .cl-riga { grid-template-columns: minmax(0, 1fr) 96px; }
  .mostri .cl-nome { grid-column: 1 / 3; }
}
@media (max-width: 560px) {
  .mostro { padding: 18px 16px 16px; }
  .mostro-cifra b { font-size: 2.5rem; }
  .mostro-dati { grid-template-columns: minmax(0, 1fr); }
  .mostri .mostri-fascia { padding: 16px 18px 22px; border-radius: 16px; }
  .mostri .classifica { padding: 16px 16px 10px; }
}
@media print { .mostro { box-shadow: none; break-inside: avoid; } .mostri .classifica { background: none; color: #000; } }