/* ══════════════════════════════════════════════════════════════════
   VESEMEN · IL PORTFOLIO
   Pagina sua, non piu' un pezzo appeso sotto il portale. Sotto il portale
   resta la vetrina di quello che hai appena mintato, che e' un'altra cosa e
   dura dieci secondi; qui c'e' tutto quello che possiedi e ci si torna.

   Scritta prima per il telefono, come about.css: le regole qui sotto sono
   quelle dello schermo stretto, il desktop arriva dopo nei @media (min-width).
   ══════════════════════════════════════════════════════════════════ */

body{padding-top:var(--bar)}
#pagina{padding-bottom:70px}

/* ── LA TESTATA ───────────────────────────────────────────────── */
/* la testata sta su una riga sola: il titolo a sinistra, l'indirizzo a destra.
 * Erano incolonnati e da soli occupavano una schermata di telefono. */
/* ── LA BARRA CHE SCORRE ──────────────────────────────────────────
   Mentre si legge la catena non si sa ancora se hai trecento NFT o nessuno, e
   la pagina non deve scommettere. Una riga alta due pixel, larga quanto la
   pagina, con dentro una luce che va e viene: dice «sto guardando» e non
   promette un risultato.

   Alta due pixel per un motivo pratico: quando sparisce non muove niente di
   quello che arriva dopo. */
.leggo{height:2px;border-radius:99px;background:rgba(243,241,236,.06);
  overflow:hidden;margin:22px 0 0}
.leggo[hidden]{display:none}
.leggo i{display:block;height:100%;width:38%;border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--lime),transparent);
  animation:scorre 1.15s ease-in-out infinite}
@keyframes scorre{
  0%  {transform:translateX(-100%)}
  100%{transform:translateX(360%)}
}
@media (prefers-reduced-motion:reduce){
  /* Ferma, ma non invisibile: resta un segno che qualcosa sta succedendo. */
  .leggo i{animation:none;width:100%;opacity:.35;background:var(--lime)}
}

.phead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding:8px 0 0}
.phead .lbl{flex:1 0 100%}
.phead h1{font-size:clamp(28px,7.4vw,42px);line-height:1;margin-top:7px}

/* ── QUANDO NON C'E' NIENTE ───────────────────────────────────── */
.vuoto{padding:20px 0 60px;max-width:52ch}
.vuoto p{margin:0 0 26px;color:var(--dim);font-size:16.5px;line-height:1.68}

/* ── LA TESTATA DELLA COLLEZIONE ──────────────────────────────────
 * La ciambella col totale e, accanto, i filtri che sono anche la
 * scomposizione. Niente riquadro intorno: una scatola con un bordo aggiunge
 * peso e qui non separa niente da niente, la pagina sotto e' gia' vuota. */
/* Sul telefono in colonna: la ciambella col totale su una riga, i filtri sulla
 * loro. Provando a starci tutti in una riga i filtri finivano mezzi fuori
 * schermo, e il primo che non vedevi era proprio quello che ti interessava. */
#testa{display:grid;gap:16px;margin:4px 0 20px}

/* il numero nel buco a 64 px non ci sta: sta fuori, grande, e dentro non c'e'
 * niente. Il cerchio fa la forma, il numero fa il numero. */
/* ── I FILTRI, CHE SONO ANCHE LA SCOMPOSIZIONE ────────────────────
 * Colore del grado, nome, conteggio. Scorrono di lato sul telefono. */
/* ── LA FASCIA ────────────────────────────────────────────────────
   Una riga sottile, divisori appena accennati. C'era una ciambella coi gradi a
   fette: bella, ma diceva una cosa sola - la proporzione - e occupava lo spazio
   di sei numeri. I numeri sono sei, e la proporzione si vede confrontandoli. */
.fascia{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;padding:12px 0 14px;border-bottom:1px solid var(--line);margin-bottom:14px}

.chi{display:flex;align-items:center;gap:11px;min-width:0}
.faccia{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:0 0 34px;
  border:1px solid var(--line2)}
.faccia svg{width:100%;height:100%;display:block}
.nome{display:flex;align-items:center;gap:7px;min-width:0}
.nome b{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:400;
  color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── IL TASTO CHE COPIA ───────────────────────────────────────────
   I due segni stanno impilati nella stessa casella della griglia: cambia solo
   quale dei due si vede, quindi il tasto non cambia misura e non muove niente
   attorno. Un cambio di colore da solo non bastava - chi ha appena premuto sta
   guardando il testo, non il tasto - quindi compare anche la parola, che si
   vede con la coda dell'occhio. */
.copia{position:relative;width:26px;height:26px;flex:0 0 26px;padding:0;
  border-radius:8px;cursor:pointer;border:1px solid var(--line);
  background:transparent;color:var(--faint);display:grid;place-items:center;
  transition:color .14s,border-color .14s,background .14s}
.copia svg{grid-area:1/1;width:14px;height:14px;transition:opacity .12s,transform .12s}
.copia .segno-fatto{opacity:0;transform:scale(.6)}
.copia:hover{color:var(--ink);border-color:var(--line2)}

.copia.fatto{color:#07080B;background:var(--lime);border-color:var(--lime)}
.copia.fatto .segno-copia{opacity:0;transform:scale(.6)}
.copia.fatto .segno-fatto{opacity:1;transform:scale(1)}

/* La parola compare accanto al tasto e non lo allarga: sta fuori dal flusso. */
.detto-copia{position:absolute;left:calc(100% + 7px);top:50%;
  transform:translateY(-50%) translateX(-4px);
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--lime);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .14s,transform .14s}
.copia.fatto .detto-copia{opacity:1;transform:translateY(-50%) translateX(0)}

/* ETICHETTA SOPRA, NUMERO SOTTO: prima sai cosa stai guardando, poi quanto vale.
   TUTTE E CINQUE LE VOCI UGUALI: stessa larghezza minima, stessa misura del
   numero, stesso spazio ai lati. Una fascia in cui una voce e' piu' grande delle
   altre suggerisce che conti di piu', e qui non e' vero: sono cinque fatti sullo
   stesso piano. I divisori sono una linea sottile fra una voce e l'altra, non
   una griglia. */
.conti{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;order:2}
/* CENTRATO NELLA SUA CELLA. Allineati a destra, con celle tutte larghe uguali,
   i numeri corti finivano tutti addossati al divisore di destra e quelli lunghi
   riempivano: sembravano incolonnati male anche essendo perfettamente
   allineati. Al centro ognuno sta nel mezzo del suo spazio, e le cinque voci si
   leggono come cinque cose distinte. */
.conti .c,.posto{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:0 16px;border-left:1px solid var(--line);min-width:100px}
.conti .c span,.posto span{font-family:'JetBrains Mono',monospace;font-size:8.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.conti .c b,.posto b{font-family:'Archivo Black',sans-serif;font-size:22px;
  letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
/* La (i) accanto a «rank»: si preme e compare una riga sotto, come ovunque nel
   sito. Non un suggerimento al passaggio del mouse, che su un telefono non
   esiste. */
.posto .ics,.conti .c .ics{width:13px;height:13px;padding:0;margin-left:5px;border-radius:50%;
  cursor:pointer;border:1px solid var(--line2);background:transparent;
  color:var(--faint);font-family:'JetBrains Mono',monospace;font-size:8px;
  font-weight:700;line-height:1;vertical-align:middle;transition:.14s}
.posto .ics:hover,.posto .ics.on,
.conti .c .ics:hover,.conti .c .ics.on{border-color:var(--lime);color:var(--lime)}
.conti .c b.p{color:var(--l4)}
.notarank{margin:-4px 0 14px;padding:10px 13px;border-radius:11px;
  background:rgba(180,240,74,.045);border:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;line-height:1.6;
  color:var(--faint)}
.notarank[hidden]{display:none}
.notarank b{color:var(--ink);font-weight:400}
.notarank i{font-style:normal;color:var(--dim)}

/* ── I NUMERI STANNO INSIEME ──────────────────────────────────────
   Su schermo largo `space-between` spargeva i tre gruppi lungo mille pixel:
   il nome a sinistra, i due conti in mezzo al niente e il posto all'altro
   capo, come tre isole che non si parlano. Sono la stessa cosa - come stai
   messo - quindi vanno in blocco, e il vuoto sta tutto fra il nome e loro.

   L'ordine e' lo stesso del telefono: posto, punti, posseduti. */
.posto{order:2;margin-left:auto}
.conti{order:3}
/* la coppa del podio prende il posto del numero: primo, secondo, terzo */
.posto b.oro{color:#FFC24A;text-shadow:0 0 14px rgba(255,194,74,.5)}
.posto b.argento{color:#C9CEDA}
.posto b.bronzo{color:#C08457}
.chi{order:1}

/* ── CERCARE E ORDINARE ───────────────────────────────────────── */
#strumenti{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:16px}
.cerca{display:flex;align-items:center;gap:9px;flex:1 1 220px;min-width:0;
  padding:0 12px;height:40px;border-radius:11px;
  border:1px solid var(--line);background:rgba(243,241,236,.02)}
.cerca:focus-within{border-color:var(--line2)}
.cerca svg{width:15px;height:15px;flex:0 0 15px;color:var(--faint)}
.cerca input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--ink);
  font-family:'JetBrains Mono',monospace;font-size:12.5px}
.cerca input::placeholder{color:var(--faint)}
.cerca input::-webkit-search-cancel-button{display:none}
.pulisci{border:0;background:none;color:var(--faint);font-size:19px;line-height:1;
  cursor:pointer;padding:0 2px}
.pulisci:hover{color:var(--ink)}
.pulisci[hidden]{display:none}

.ordina{display:flex;gap:4px}
.od{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;height:40px;padding:0 14px;border-radius:11px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--faint);transition:.14s}
.od:hover{color:var(--dim);border-color:var(--line2)}
.od.on{background:rgba(180,240,74,.12);border-color:rgba(180,240,74,.38);color:var(--lime)}

@media (max-width:600px){
  .fascia{gap:10px;padding:10px 0 12px}

  /* IL NOME PRENDE LA RIGA SUA, i cinque conti quella sotto. Il rank resta in
     linea con gli altri: metterlo accanto al nome lo faceva sembrare un'altra
     cosa, e non lo e' - e' il quinto di cinque fatti. */
  /* IL NOME PRENDE LA RIGA SUA, e sotto respira: senza stacco le cinque voci
     sembravano appese all'indirizzo invece di essere una fila per conto loro. */
  .chi{order:1;width:100%;margin-bottom:9px}
  /* CINQUE FRATELLI, NON QUATTRO PIU' UNO.
     Il rank sta in un contenitore suo e i quattro conti in un altro: due
     scatole affiancate non si dividono la riga in cinque parti uguali, perche'
     quella coi quattro dentro deve pagare quattro imbottiture e l'altra una.
     Si vedeva: 73 pixel contro 61. Con `display:contents` la scatola di mezzo
     sparisce e i suoi figli diventano fratelli degli altri: cinque celle sulla
     stessa riga, `flex:1` ciascuna, larghe uguali per costruzione. */
  .conti{display:contents}
  .posto{margin-left:0}
  /* Su telefono i numeri che contano sono tre: posto, punti, posseduti. Il
     quarto li stringerebbe tutti per dire una cosa che sta gia' nelle stats. */
  /* `.conti .c` vale due classi, `.solo-largo` una: senza nominarle tutte e due
     la regola di base rimetteva la cella al suo posto. */
  .conti .c.solo-largo{display:none}
  .conti .c,.posto{order:2;flex:1;min-width:0;padding:0 0 0 10px;
    border-left:1px solid var(--line);justify-content:center}
  /* NIENTE A CAPO DENTRO LA CELLA. A 58 px "1 283" e le etichette piu' lunghe
     si spezzavano su due righe, e le celle venivano alte diverse: cinque numeri
     sulla stessa riga ma a quote diverse si leggono male. Meglio un numero un
     filo piu' stretto che una riga che salta. */
  .conti .c b,.posto b,.conti .c span,.posto span{white-space:nowrap}
  .conti .c b,.posto b{font-size:16px;letter-spacing:-.04em}
  /* IL DIVISORE LO PERDE CHI STA DAVVERO PER PRIMO, e sul telefono e' il RANK,
     non "minted": l'ordine qui e' rank, minted, owned, rare, legendary, quindi
     togliere il bordo a `.c:first-child` cancellava proprio la linea FRA rank e
     minted e lasciava le altre. Il bordo resta trasparente invece che assente,
     cosi' la cella non si stringe di dieci pixel rispetto alle altre. */
  .conti .c:first-child{border-left-color:var(--line)}
  .posto{border-left-color:transparent}
  .conti .c b,.posto b{font-size:17px}
  .posto b svg{width:19px;height:19px}
  .conti .c span,.posto span{font-size:7.5px;letter-spacing:.06em}

  /* ── LA RIGA DEGLI STRUMENTI, TUTTA SU UNA RIGA ──────────────────
     Andava a capo e i tre ordini si prendevano una riga intera per conto loro.
     Lo spazio c'e': la ricerca si stringe quanto serve e i tre stanno accanto,
     senza etichette lunghe. */
  #strumenti{flex-wrap:nowrap;gap:7px}
  .cerca{flex:1 1 auto;min-width:0;padding:0 10px;gap:7px;height:38px}
  .cerca input{font-size:12px}
  .ordina{flex:0 0 auto;gap:3px}
  /* QUATTRO ORDINI, NON PIU' TRE. Ogni pixel tolto qui e' un pixel che torna
     alla ricerca, che a 375 px si era ridotta a 53 e mostrava mezzo testo. */
  .od{height:38px;padding:0 7px;font-size:9px;letter-spacing:.03em}
}


/* ── LA GRIGLIA ─────────────────────────────────────────────────
   LA REGOLA DELLE RIGHE PIENE: quante se ne mostrano dev'essere divisibile per
   quante colonne ci sono, o l'ultima riga resta mezza vuota e sembra roba che
   non ha caricato. Qui il passo e' venti, e 2, 4 e 5 lo dividono tutti: due
   colonne fanno dieci righe, quattro ne fanno cinque, cinque ne fanno quattro.
   Nessuna larghezza lascia un buco. */
/* CINQUE PER RIGA, e la regola delle righe piene: si mostrano DIECI pezzi per
   pagina, e dieci si divide per cinque e per due. Non per quattro, che era il
   passaggio intermedio di prima: dieci su quattro colonne fa due righe e mezza,
   cioe' due buchi in fondo che sembrano roba non caricata.
   Sotto i 560 px cinque colonne farebbero riquadri da sessanta pixel: li' si
   passa a due, che divide dieci lo stesso. */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
@media (min-width:560px){ .grid{grid-template-columns:repeat(5,1fr);gap:12px} }
.piece{background:linear-gradient(180deg,var(--panel),#0D1017);border:1px solid var(--line);
  border-radius:16px;overflow:hidden}
.piece .shot{position:relative;aspect-ratio:1;
  background:radial-gradient(circle at 50% 40%,#161B24,#0A0C11)}
.piece .shot img{width:100%;height:100%;object-fit:contain;display:block}
.piece .id{position:absolute;top:9px;left:9px;padding:5px 9px;border-radius:999px;
  background:rgba(7,8,11,.72);border:1px solid var(--line2);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--dim)}
.piece .flag{position:absolute;top:9px;right:9px;padding:4px 9px;border-radius:999px;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700}
.piece .rows{border-top:1px solid var(--line)}
.piece .r{display:flex;align-items:baseline;gap:9px;padding:9px 12px;
  border-bottom:1px solid rgba(243,241,236,.04);font-size:12.5px}
.piece .r:last-child{border-bottom:0}
.piece .r .k{flex:0 0 3.6em;font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.piece .r b{flex:1;font-weight:400;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.piece .r b.none{color:var(--faint);font-style:italic}
.piece .r .l{font-family:'JetBrains Mono',monospace;font-size:10px}

/* ── LE PAGINE ────────────────────────────────────────────────── */
.pages{display:flex;gap:6px;justify-content:center;align-items:center;
  margin-top:28px;flex-wrap:wrap}
.pg{cursor:pointer;min-width:40px;height:40px;padding:0 12px;border-radius:12px;
  border:1px solid var(--line2);background:transparent;color:var(--dim);
  font-family:'JetBrains Mono',monospace;font-size:12px;transition:.15s}
.pg.on{background:var(--ink);border-color:var(--ink);color:var(--void)}
.pg:disabled{opacity:.3;cursor:not-allowed}
.pgdots{color:var(--faint);padding:0 2px}

/* ══ DA QUI IN SU E' IL DESKTOP ═══════════════════════════════════ */
@media (min-width:760px){
  .phead{padding:18px 0 0}
  /* sul desktop c'e' spazio: ciambella, totale e filtri sulla stessa riga */
  /* Da qui in su c'e' spazio, e la fascia sta su una riga sola. Il cruscotto
     pero' e' un blocco che va sotto, non una terza colonna: senza `wrap` gli
     restava un ritaglio di duecento pixel e le carte ci si schiacciavano
     dentro una sull'altra. */
  #testa{display:flex;align-items:center;flex-wrap:wrap;gap:26px;margin:8px 0 26px}
  .fascia{flex:1 1 auto}
  .cruscotto{flex:0 0 100%;margin-top:-8px}
  .filters{flex:1;overflow:visible;flex-wrap:wrap;margin:0;padding:0}
  #pagina{padding-bottom:90px}
}
@media (min-width:1040px){
}

/* Quando la ricerca non trova niente. Non un vuoto: una frase che dice cosa e'
   successo, se no sembra che la pagina si sia rotta. */
.niente{grid-column:1/-1;padding:44px 20px;text-align:center;color:var(--dim);
  font-size:13px;line-height:1.6}

/* ── IL TASTO STATS ───────────────────────────────────────────────
   Sta accanto a quello che copia perche' sono le due cose che si fanno col
   proprio indirizzo: portarselo via, o guardarci dentro. Tre barrette e la
   parola: l'icona da sola sarebbe un indovinello, la parola da sola sarebbe
   un link. Quando e' aperto si accende e la freccia gira, che e' l'unico modo
   di sapere che sotto c'e' altro senza doverci provare. */
.stats{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  height:28px;padding:0 10px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:rgba(243,241,236,.02);color:var(--faint);
  transition:border-color .15s,color .15s,background .15s}
.stats svg{width:13px;height:13px;display:block}
.stats em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase}
.stats:hover{border-color:var(--line2);color:var(--dim)}
/* Acceso vuol dire «stai guardando questa vista», non «c'e' un pannello
   aperto»: quindi si riempie, come una tab scelta. */
.stats.on{border-color:transparent;color:#0A1004;background:var(--lime);
  box-shadow:0 0 18px rgba(180,240,74,.28)}

/* ── IL CRUSCOTTO ─────────────────────────────────────────────────
   Carte piccole in griglia. Piccole apposta: un cruscotto che riempie lo
   schermo costringe a scorrere per confrontare due numeri agli estremi, e
   confrontare e' l'unica cosa che ci si fa. Su schermo largo stanno in due
   colonne e quelle «larghe» ne prendono due; su telefono una sola, in fila. */
.cruscotto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin:0 0 16px}
.cruscotto[hidden]{display:none}
/* L'intestazione della vista, con la via d'uscita a destra. Si entra premendo
   «stats» e si usciva ripremendolo: funziona, ma bisogna sapere che quel tasto
   e' rimasto acceso e che serve a due cose. */
.ctesta{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:-2px}
.ctesta span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)}
.chiudi{width:28px;height:28px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--faint);
  transition:border-color .15s,color .15s}
.chiudi svg{width:13px;height:13px;display:block}
.chiudi:hover{border-color:var(--lime);color:var(--lime)}

.carta{padding:13px 15px 15px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(243,241,236,.04),rgba(243,241,236,.012))}
.carta.larga{grid-column:1/-1}
.ct{display:flex;align-items:center;gap:7px;margin-bottom:12px;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.carta .rpunto{width:6px;height:6px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 8px rgba(180,240,74,.7);animation:pulsa 2s ease-in-out infinite}
@keyframes pulsa{50%{opacity:.32;transform:scale(.82)}}
@media (prefers-reduced-motion:reduce){.carta .rpunto{animation:none}}

.cbody{display:flex;align-items:center;gap:16px;min-width:0}

/* La ciambella, col numero che conta nel buco. Il buco non e' spazio sprecato:
   e' il posto giusto per il totale di quello che l'anello divide. */
.cia{position:relative;width:88px;height:88px;flex:0 0 88px}
.cia svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}
.ciat{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;pointer-events:none}
.ciat b{font-family:'Archivo Black',sans-serif;font-size:19px;letter-spacing:-.03em;
  line-height:1;color:var(--ink)}
.ciat.lungo b{font-size:14px;letter-spacing:-.04em}
.ciat em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:8px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}

/* Le voci: etichetta sopra, numero sotto, come nel resto del sito. */
/* I NUMERI IN GRIGLIA, NON IN FILA. In fila con `wrap` l'ultima riga resta
   mezza vuota e il buco si vede; in griglia le colonne sono fisse e le voci ci
   cadono dentro senza lasciare spazi. */
.dd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 16px;
  min-width:0;flex:1 1 0}
.d{display:flex;flex-direction:column;gap:3px;min-width:0}
.d span{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.d b{font-family:'Archivo Black',sans-serif;font-size:15px;letter-spacing:-.02em;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;white-space:nowrap}
.d b.p{color:var(--l4)}
.d b.lime{color:var(--lime)}
.d b.oro{color:#FFC24A;text-shadow:0 0 12px rgba(255,194,74,.45)}
.d b.argento{color:#C9CEDA}
.d b.bronzo{color:#C08457}

/* La legenda della rarita' sta sotto e in riga: sopra ruberebbe la larghezza
   ai numeri, che e' quello che si legge davvero. */
.leg{display:flex;flex-wrap:wrap;gap:6px 16px;min-width:0;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--line)}
.lg{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:.02em;color:var(--faint);white-space:nowrap}
.lg i{width:7px;height:7px;border-radius:2px;flex:0 0 auto}
/* Il fondo che paga non e' un grado come gli altri: e' l'unico che vale soldi,
   quindi si accende invece di stare in fila con loro. */
.lg.forte{color:var(--lime)}
.lg.forte i{border-radius:50%;box-shadow:0 0 8px rgba(180,240,74,.6)}
.lg.forte b{color:var(--lime)}
.lg b{padding-left:2px;color:var(--ink);font-weight:400;
  font-variant-numeric:tabular-nums}

.cvuoto{grid-column:1/-1;margin:0;padding:26px 18px;text-align:center;
  color:var(--faint);font-size:12.5px}

/* ── DA SCHERMO LARGO ─────────────────────────────────────────────
   Le stesse due carte, ma su mille pixel una ciambella da ottantotto e dei
   numeri da quindici galleggiavano in mezzo al vuoto: era una schermata da
   telefono stirata, non una schermata da desktop.

   Qui lo spazio c'e', quindi si usa per la GERARCHIA e non per l'aria: la
   ciambella diventa il pezzo grosso che e', i numeri diventano leggibili da
   lontano, e le carte si riempiono di quello che gia' contengono invece che
   di margini. */
@media (min-width:900px){
  .cruscotto{gap:14px}
  .carta{padding:20px 24px 22px;border-radius:18px}
  .ct{margin-bottom:18px;font-size:9px}
  .cbody{gap:28px}
  .cia{width:132px;height:132px;flex:0 0 132px}
  .ciat b{font-size:30px}
  .ciat.lungo b{font-size:22px}
  .ciat em{font-size:9px}
  .dd{gap:18px 26px}
  .d span{font-size:8.5px}
  .d b{font-size:23px}
  .leg{margin-top:20px;padding-top:16px;gap:8px 24px}
  .lg{font-size:11px}
}

@media (max-width:640px){
  .cruscotto{grid-template-columns:minmax(0,1fr);gap:9px}
  .carta.larga{grid-column:auto}
  /* La ciambella si stringe ma non sparisce: e' il pezzo che si guarda. */
  .cia{width:76px;height:76px;flex:0 0 76px}
  .ciat b{font-size:17px}
  .ciat.lungo b{font-size:13px}
  .cbody{gap:14px}
  .dd{gap:10px 16px}
}

/* PORTFOLIO: il conto dei tratti che stanno arrivando, sotto la griglia gia'
   aperta. La barra sottile sparisce appena si sanno i numeri; questa riga
   dice quanto manca e poi se ne va. */
.leggendo{margin:0 0 12px;font:400 10px/1 'JetBrains Mono',monospace;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}