/* I pezzi comuni dei cinque mix della pagina delle statistiche (29/10/2026, Antonio: "secondo e terzo mi piacciono
   davvero molto ma manca l'elemento sciarpa che prenderei dal primo! prova a creare un mix dei 3"): le palette del
   tabellone, le figurine con la fascia a maglia, il cartellino giallo, la striscia che scorre. Ogni mix ha poi il suo
   impaginato, che su PC deve riempire tutto lo schermo ("riempi tutti gli spazi non solo il centro"). */
@font-face { font-family: "Archivo"; src: url("archivo.woff") format("woff"); font-weight: 100 900; font-stretch: 62% 125%; }
@font-face { font-family: "Pixel"; src: url("pixel.woff") format("woff"); }
* { box-sizing: border-box; }
body { margin: 0; font: 500 16px/1.4 "Archivo", system-ui, sans-serif; font-stretch: 88%; font-variant-numeric: tabular-nums; }
canvas { display: block; }
a { color: inherit; }

/* la palette del tabellone: due metà, la riga in mezzo, la lettera grande e stretta */
.p { display: inline-block; position: relative; width: var(--l, 19px); height: calc(var(--l, 19px) * 1.42); margin-right: 2px; border-radius: 3px; vertical-align: middle;
  background: linear-gradient(#2a2a30 0 49%, #0b0b0d 49% 51%, #232328 51% 100%); color: var(--c, #f2f1ec); text-align: center;
  font-weight: 800; font-stretch: 70%; font-size: calc(var(--l, 19px) * 1.05); line-height: calc(var(--l, 19px) * 1.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 3px rgba(0,0,0,0.6); text-transform: uppercase; overflow: hidden; }
.p::after { content: ""; position: absolute; left: 0; right: 0; top: 49%; height: 2%; background: rgba(0,0,0,0.7); }
.p.vuota { background: linear-gradient(#1c1c20 0 49%, #0b0b0d 49% 51%, #18181b 51% 100%); }
.riga-p { white-space: nowrap; }

/* la striscia gialla che scorre */
.nastro { overflow: hidden; background: #ffd21f; color: #141414; border-top: 2px solid #000; border-bottom: 2px solid #000; }
.nastro > div { display: inline-flex; gap: 44px; white-space: nowrap; padding: 9px 0; font-weight: 800; font-stretch: 75%; font-size: 17px; text-transform: uppercase; animation: scorre 110s linear infinite; }
.nastro b { font-weight: 900; }
@keyframes scorre { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* la figurina: la fascia a maglia col nome, il numero, la rarità, la frase */
.figurina { position: relative; display: flex; flex-direction: column; border-radius: 7px; background: #fbf8ef; color: #1c1b18; overflow: hidden; text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.25), 0 6px 14px rgba(0,0,0,0.35); border: 3px solid #fff; min-height: 232px; }
.figurina .fascia { position: relative; height: 62px; overflow: hidden; background: #222; }
.figurina .fascia canvas { position: absolute; left: -8px; top: -4px; }
.figurina .fascia span { position: absolute; left: 8px; bottom: 6px; background: #fff; color: #1c1b18; font-weight: 900; font-stretch: 70%; font-size: 15px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.45); }
.figurina .num { position: absolute; top: 6px; right: 7px; font: 400 9px/1 "Pixel", monospace; background: rgba(0,0,0,0.6); color: #fff; padding: 4px 5px; border-radius: 2px; z-index: 1; }
.figurina .rara { padding: 8px 9px 0; display: flex; align-items: baseline; gap: 5px; }
.figurina .rara small { font-weight: 800; font-size: 13px; } .figurina .rara b { font-size: 34px; line-height: 0.9; font-weight: 900; font-stretch: 62%; }
.figurina p { margin: 6px 9px 0; font-size: 14px; line-height: 1.25; font-weight: 700; font-stretch: 82%; }
.figurina .piede { margin: auto 9px 8px; padding-top: 6px; font-size: 11.5px; color: #6d6858; font-weight: 600; }
.figurina .tipo { display: inline-block; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 5px; border-radius: 2px; margin-right: 4px; background: #e5e0d0; color: #6d6858; }
.figurina.oro { border-color: #d4a72c; box-shadow: 0 0 0 1px #9c7614, 0 6px 14px rgba(0,0,0,0.35); }
.figurina.oro .tipo { background: #d4a72c; color: #fff; }
.figurina.olo { border-image: linear-gradient(135deg, #ff7ad9, #ffe96b, #73ffd8, #7aa2ff) 1; border-radius: 0; }
.figurina.olo .fascia::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0.55;
  background: linear-gradient(115deg, transparent 15%, #ff7ad9 28%, #ffe96b 36%, #73ffd8 44%, #7aa2ff 52%, transparent 65%); background-size: 260% 100%; animation: luccica 4s linear infinite; }
.figurina.olo .tipo { background: linear-gradient(90deg, #ff7ad9, #ffe96b, #73ffd8, #7aa2ff); color: #1c1b18; }
@keyframes luccica { from { background-position: 130% 0; } to { background-position: -130% 0; } }

/* il cartellino giallo piccolo */
.mini { flex: none; width: 46px; height: 62px; padding: 5px 6px; margin-top: 2px; border-radius: 4px; transform: rotate(-5deg); display: flex; flex-direction: column; justify-content: flex-end;
  color: #161616; background: linear-gradient(160deg, #ffe066, #ffd21f 45%, #f2c200); box-shadow: 1px 1px 0 #c99c00, 3px 5px 8px rgba(0,0,0,0.5); }
.mini small { font-size: 9px; font-weight: 800; line-height: 1; } .mini b { font-size: 21px; line-height: 0.95; font-weight: 900; font-stretch: 62%; } .mini b.lungo { font-size: 15px; }

@media (prefers-reduced-motion: reduce) { .nastro > div, .figurina.olo .fascia::after { animation: none; } }

/* il pannello del tabellone di un campionato: righe che si aprono */
.pannello { padding: 12px 10px 8px; background: #151518; border-radius: 8px; border: 1px solid #222228; color: #f2f1ec;
  box-shadow: inset 0 0 0 4px #0f0f12, 0 10px 24px rgba(0,0,0,0.5); position: relative; min-width: 0; }
.pannello > .lega { margin: -4px -4px 10px; }
.pannello > .lega canvas { margin: 0 auto; }
.intesta { display: flex; justify-content: space-between; padding: 0 4px 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #9b9a94; }
.intesta > span:last-child { width: 98px; display: flex; gap: 4px; } .intesta > span:last-child span { width: 30px; text-align: center; font-size: 9px; }
.pannello details { border-top: 1px solid rgba(255,255,255,0.1); }
.pannello summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 2px; }
.pannello summary::-webkit-details-marker { display: none; }
.pannello summary:hover .p { filter: brightness(1.25); }
.chi { display: flex; align-items: center; gap: 5px; position: relative; padding-right: 8px; min-width: 0; }
.ora { --l: 11px; } .ora .p:nth-child(3) { margin-right: 5px; }
.sq { --l: 15px; position: relative; }
.sq::after { content: ""; position: absolute; left: 0; right: 2px; bottom: -4px; height: 3px; border-radius: 1px; background: var(--k); }
.nomi-lunghi { display: none; font-weight: 800; font-stretch: 72%; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 6px; }
.pct { --l: 15px; display: flex; gap: 4px; flex: none; } .pct .p { width: 30px; }
.rare { position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; border-radius: 50%; font-size: 10px; line-height: 15px; text-align: center;
  font-weight: 900; color: #141414; background: #ffd21f; box-shadow: 0 0 0 2px #151518; }
.scheda { padding: 4px 4px 14px; }
.scheda .titolo { font-size: 22px; font-weight: 800; font-stretch: 70%; line-height: 1.1; }
.scheda .quando { font-size: 13px; color: #9b9a94; margin-top: 2px; }
.scheda .sciarpa-viva { margin: 12px -6px 0; }
.scheda .sciarpa-viva canvas { margin: 0 auto; filter: drop-shadow(5px 10px 8px rgba(0,0,0,0.55)); }
.scheda .numeri { margin: 10px 0 0; font-size: 14px; color: #9b9a94; } .scheda .numeri b { color: #f2f1ec; }
.figurine { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; margin-top: 12px; }
.scheda .precedenti { margin: 12px 0 0; font-size: 13px; color: #9b9a94; }
.vuota { margin-top: 12px; padding: 12px; border: 2px dashed rgba(255,255,255,0.14); border-radius: 7px; text-align: center; color: #9b9a94; font-size: 14px; }

/* sul telefono le figurine più rare in cima sono 6, non 12: se no prima delle partite si scorre troppo */
@media (max-width: 640px) { .rarissime > :nth-child(n+7) { display: none; } }