/* ══════════════════════════════════════════════════════════════════
   VESEMEN · IL TELEFONO
   Tutto quello che c'e' qui dentro sta dentro UNA SOLA media query. Non e'
   pigrizia di organizzazione, e' una garanzia: il desktop e' gia' approvato e
   non si deve muovere di un pixel, e l'unico modo per esserne certi e' che
   nessuna regola di questo file possa uscire dai 759 px. Se aggiungi qualcosa,
   aggiungilo DENTRO il blocco.

   Questo foglio si carica per ultimo in tutte e due le pagine, per cui a
   parita' di specificita' vince lui. Sul portale (mint.html) vince anche sulle
   regole scritte dentro il suo <style>, perche' arriva dopo.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 759px){

/* ── I TASTI ──────────────────────────────────────────────────────
 * La forma, la spia e la freccia adesso stanno in about.css e valgono
 * ovunque: erano nate qui, ma un tasto brutto resta brutto anche su uno
 * schermo grande. Qui resta solo quello che e' davvero questione di
 * larghezza: si dividono la riga a meta' e il testo si stringe un filo per
 * starci dentro su 375 px. */
.acts{gap:10px}
.acts .run,
.acts .btn2{flex:1 1 0;min-width:0;height:54px;padding:0 14px;
  gap:8px;font-size:13.5px}
.arw{width:14px;height:14px;flex:0 0 14px}

/* ── ARIA DI TROPPO ───────────────────────────────────────────────
 * I paragrafi si portano dietro il margine di default del browser, che dentro
 * una griglia si somma al `gap` e raddoppia lo spazio. Sul desktop quei vuoti
 * ci stanno e la pagina e' gia' approvata; su uno schermo da 812 px sono due
 * scrollate buttate. */
.say p{margin:0}
.hero{padding-top:22px;padding-bottom:44px}
.lab{gap:16px}

/* ── QUELLO CHE HAI MINTATO ───────────────────────────────────────
 * Sul telefono la scheda e' SOLO il ritratto, il numero e, se e' uscito
 * qualcosa di buono, la fascetta della rarita'. La tabella dei tratti sotto
 * ogni scheda faceva due cose sbagliate insieme: allungava la griglia fino a
 * renderla illeggibile e tagliava a meta' i nomi ("Gold Wire ...", "Visor
 * Shad..."), che e' peggio che non scriverli. Se uno vuole vederli, tocca la
 * scheda e si aprono per intero. */
/* due colonne: dieci si divide per due, cinque righe piene */
.grid{grid-template-columns:repeat(2,1fr)!important;gap:9px}
/* SOTTO L'ULTIMO PEZZO CI VUOLE ARIA: la barra in fondo e' fissa e galleggia
   sopra la pagina, quindi senza spazio l'ultima scheda le finisce sotto e sembra
   tagliata. Sessanta pixel sono l'altezza della barra piu' il suo stacco. */
main.wrap,#pagina{padding-bottom:calc(78px + env(safe-area-inset-bottom))!important}
.piece{border-radius:16px}
.piece .rows{display:none}
.piece.aperta .rows{display:block}
/* il piede della scheda su due colonne strette: tutto un filo piu' piccolo,
 * cosi' numero, grado e occhio ci stanno senza spingersi */
.pfoot{padding:9px 10px;gap:6px}
.pfoot .tok{font-size:11px}
/* appena piu' piccoli sul telefono, dove la scheda e' meta' */
.shot .tok{top:6px;left:6px;right:auto;padding:2px 6px;font-size:8.5px}
.shot .pts{right:6px;top:6px;bottom:auto;padding:2px 7px 2px 5px;font-size:9px;gap:4px}
.shot .pts svg{width:10px;height:10px}
.pfoot .rk{height:20px;padding:0 7px;font-size:7.5px;letter-spacing:.08em}
.eye{width:26px;height:26px;border-radius:8px}
.eye svg{width:13px;height:13px}
/* niente sollevamento al tocco: sul telefono il :hover resta appiccicato dopo
 * il tap e la scheda ci rimane su, storta, finche' non tocchi altrove */
.piece:hover{transform:none;box-shadow:none;border-color:var(--line)}
.piece .rows .r{padding:9px 12px}
.piece .rows .r b{font-size:12.5px}

/* la fila sotto: piu' grande del dito, non piu' piccola */
.more .btn2,.pg{min-height:46px}

/* ── LA BARRA IN BASSO ────────────────────────────────────────────
 * Il vetro senza sfocatura. `backdrop-filter` sarebbe la strada facile e qui
 * e' proprio quella sbagliata: sotto la barra, sul portale, si muove il fumo,
 * e sfocare qualcosa che si muove costa una composizione a ogni fotogramma.
 * L'effetto lo fanno tre cose ferme che costano zero: una sfumatura chiara in
 * cima che imita il taglio della luce sul bordo, un'ombra profonda che la
 * stacca dal fondo, e uno strato di fondo PIENO. Con l'alpha a .97 il testo
 * della pagina si leggeva ancora attraverso: senza sfocatura dietro, tre punti
 * di trasparenza non fanno vetro, fanno sporco.
 *
 * LE VOCI STANNO IN ORIZZONTALE, icona e parola sulla stessa riga. Impilate
 * erano alte il doppio e la barra diventava un muro; cosi' la barra e' una
 * striscia e le parole hanno lo spazio per respirare.
 *
 * IL LIME E' LA PAGINA IN CUI SEI, non il tasto del mint. Prima Mint era
 * sempre acceso e sembrava che fosse quello selezionato anche quando eri
 * altrove: una barra di navigazione ha un solo compito, dirti dove ti trovi.
 *
 * Sta staccata dai bordi, non incollata al fondo: sotto ci passa la barretta
 * di casa dell'iPhone, e `env(safe-area-inset-bottom)` la tiene sopra. */
.dock{position:fixed;z-index:20;
  left:14px;right:14px;bottom:calc(9px + env(safe-area-inset-bottom));
  /* QUANTE SONO LE VOCI LO DICE IL NUMERO DI VOCI. Erano tre colonne scritte a
     mano: aggiungendo Leaderboard la quarta e' andata a capo e la barra e'
     diventata alta il doppio. `auto-fit` le conta da solo, quindi la prossima
     voce non rompe niente. */
  /* QUATTRO CELLE IDENTICHE.
     Ci ho provato con le celle larghe quanto la loro parola: gli stacchi fra le
     parole venivano pari, ma la pastiglia accesa cambiava misura da una voce
     all'altra - stretta su PORTAL, larga su LEADERBOARD - e quella si vede piu'
     del ritmo delle parole, perche' e' l'unica cosa colorata della barra.
     Non si possono avere tutte e due le cose con quattro parole di lunghezza
     diversa, e fra le due vince il selettore: stessa cella, stessa pastiglia,
     stesso passo. La parola dentro sta al centro della sua. */
  display:flex;align-items:stretch;
  gap:2px;padding:4px;border-radius:17px;
  /* VETRO, non un pannello pieno: sotto si continua a vedere la pagina, e la
     barra smette di sembrare un blocco appoggiato sopra. */
  background:
    linear-gradient(180deg, rgba(243,241,236,.06), rgba(243,241,236,0) 42%),
    linear-gradient(180deg, rgba(27,31,41,.78), rgba(10,12,17,.86));
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  border:1px solid rgba(243,241,236,.12);
  box-shadow:inset 0 1px 0 rgba(243,241,236,.16),
             inset 0 -1px 0 rgba(0,0,0,.6),
             0 18px 40px -16px #000,
             0 0 0 1px rgba(0,0,0,.55)}
.dk{min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;
  /* COMPATTA: l'icona sopra e la parola sotto stanno in meno larghezza di
     quanto ne serva affiancate, e con quattro voci la larghezza e' l'unica cosa
     che scarseggia. */
  flex-direction:column;gap:3px;
  /* LARGA QUANTO LA SUA PAROLA, piu' la stessa imbottitura per tutte. E' il
     punto di tutta la faccenda: con quattro celle IDENTICHE e quattro parole di
     lunghezza diversa, ogni parola sta al centro della sua cella e fra una e
     l'altra restavano 60, 43 e 35 pixel. Le celle erano pari, il ritmo no, ed e'
     il ritmo quello che si guarda. Cosi' invece gli stacchi fra le parole sono
     tutti uguali, che e' quello che si voleva. */
  flex:1 1 0;height:46px;padding:0 4px;border-radius:13px;text-decoration:none;color:var(--faint);
  font-family:'JetBrains Mono',monospace;font-size:7.5px;letter-spacing:.06em;
  text-transform:uppercase;transition:color .15s,background .15s}
.dk svg{width:17px;height:17px;flex:0 0 17px}
.dk span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk:active{background:rgba(243,241,236,.05)}
/* la voce accesa e' quella dove sei */
.dk.qui{background:var(--lime);color:#0A1004;font-weight:700;
  box-shadow:0 0 20px -8px rgba(180,240,74,.85), inset 0 1px 0 rgba(255,255,255,.3)}


/* e sotto le pagine ci si fa spazio, se no la barra copre l'ultima riga */
body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}

/* ── LA SCHERMATA STA FERMA FINCHE' NON C'E' NIENTE SOTTO ─────────
 * Il portale e' fatto per stare in una schermata sola. Finche' non hai
 * mintato, sotto non c'e' niente, e poter scorrere in un vuoto fa sembrare la
 * pagina rotta: si scopre un fondo nero e non si capisce se manca qualcosa.
 * Appena compaiono gli NFT la pagina torna libera. */
html.fermo,body.fermo{overflow:hidden;height:100svh}

/* la finestra di stato sul telefono: piu' larga e con i tasti impilati, che
 * due tasti affiancati su uno schermo stretto diventano due bersagli sottili */
.mdl{padding:16px;align-items:end}
.mbox{width:100%;padding:26px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius:22px}
.mtit{font-size:18px}
.mazi{flex-direction:column-reverse;gap:8px}
.mbtn{height:50px}

/* LA NAVIGAZIONE IN CIMA SPARISCE: e' scesa in basso. Tenere due MINT sullo
 * stesso schermo, uno in alto e uno al centro della barra, e' solo un modo per
 * far chiedere all'utente se fanno cose diverse. E la barra in cima cosi'
 * resta solo per i numeri, che e' l'unica cosa per cui serve. */
/* spariscono i LINK della barra in cima (Portal e Portfolio sono scesi in
 * basso), ma NON il posto del log-in, che sta dentro lo stesso <nav>. E il
 * MARCHIO resta: adesso e' l'unico modo per tornare a casa, visto che Home
 * non e' piu' una voce da nessuna parte. */
/* la specificita' deve battere la regola `html.collegato ...` di base.css, se
 * no da collegato i link ricompaiono sul telefono e si accavallano alla
 * pillola dell'indirizzo. Quaggiu' la navigazione sta tutta nella barra in
 * basso, che ha sempre tutte e tre le voci. */
/* La specificita' deve PAREGGIARE quella di base.css, che per PORTFOLIO usa un
 * selettore con l'attributo (`.navlink[href="/portfolio"]`) e quindi pesa di
 * piu' di un semplice `.navlink`. Pareggiando, vince questo foglio perche'
 * arriva dopo. Quaggiu' la navigazione sta tutta nella barra in basso. */
.tb-nav .navlink,.tb-left .navlink,
html.collegato .tb-nav .navlink[href]{display:none}
.tb-nav{gap:0}
/* IL MARCHIO ALLA MISURA DELLA PILLOLA. A diciannove pixel, alto venti, stava
   nove pixel piu' su del centro della pillola dell'indirizzo, che e' alta
   trentotto: due cose in cima alla barra che non si guardavano negli occhi.
   Adesso occupa la stessa altezza e ci si centra dentro, e cresce a ventiquattro
   perche' accanto a una pillola di trentotto un marchio di diciannove sembra una
   didascalia. */
.tb-brand{display:flex;align-items:center;min-height:38px;
  font-size:24px;letter-spacing:-.03em;text-decoration:none}
.topbar{padding:10px 14px}

/* ── IL PORTALE ───────────────────────────────────────────────────
 * Lo strumento al centro, la consolle sopra la barra, e il portafoglio in cima
 * a destra. Il difetto da cui parte tutto: la pillola dell'indirizzo era fissa
 * in alto a destra e i numeri erano centrati, per cui a schermo stretto si
 * accavallavano e si leggeva "BURNED 1 8..." sotto un indirizzo. Adesso i
 * numeri stanno a sinistra e la pillola a destra: due posti, due cose. */
/* marchio e numeri a sinistra, e a destra si tiene libero il posto per il
 * log-in: e' un ingombro fisso, quindi glielo si riserva con l'imbottitura
 * invece di sperare che le due cose non si tocchino */
.topbar{grid-template-columns:auto 1fr;justify-items:start;align-items:center;
  gap:12px;padding:11px 132px 11px 14px}
/* la barra in cima e' a una colonna sola sul telefono, per cui il log-in si
 * sgancia e va nell'angolo suo */
.wslot{position:fixed;top:11px;right:12px;z-index:9}
.wpin{padding:8px 12px;font-size:10px;letter-spacing:.04em}
.wmsg{display:none}
.wmenu{min-width:168px}

/* LO SPAZIO DELL'APERTURA. La consolle e' ancorata al fondo dello schermo,
 * appena sopra la barra di navigazione. Il cerchio invece si centra in quello
 * che resta, e per spostarlo in su basta imbottire in basso il riquadro che lo
 * contiene: l'imbottitura muove il centro ma NON muove il riferimento di
 * `bottom`, che si misura sul bordo esterno dell'imbottitura. Cosi' le due cose
 * si sistemano da sole senza inseguirsi. */
/* ── LO SCHERMA DEL PORTALE, IN COLONNA ───────────────────────────
 * Basta con le imbottiture indovinate. Sul telefono l'intestazione diventa una
 * colonna: in cima lo spazio della barra dei numeri, in fondo quello della
 * barra di navigazione, e in mezzo due cose nel flusso, il cerchio e la
 * consolle. Il cerchio prende `margin:auto` e si centra da solo in quello che
 * avanza, qualunque sia l'altezza della consolle.
 *
 * Cosi' non c'e' nessun numero da tenere aggiornato: se la consolle cresce, il
 * cerchio si stringe e resta centrato. Prima era tutto posizionato in assoluto
 * dentro un riquadro che si restringeva al contenuto, e il risultato era un
 * cerchio incollato a sinistra e scentrato in verticale.
 *
 * IL CERCHIO SI MISURA CONTANDO LE TACCHE: la ghiera sporge di 30 px per lato
 * (`.ticks{inset:-30px}`), e senza tenerne conto le tacche finivano tagliate
 * dai bordi dello schermo. */
:root{ --sotto:calc(59px + env(safe-area-inset-bottom)); --tacche:72px }

/* `header.portale` e NON `header`: anche il portfolio ha un <header>, la sua
 * testata, e queste regole gli imponevano un'altezza di uno schermo intero
 * mandando la pagina a pezzi. Le regole di una schermata si scrivono per
 * QUELLA schermata. */
header.portale{display:flex;flex-direction:column;height:100svh;
  padding:var(--bar) 0 var(--sotto)}
/* cerchio e consolle sono un blocco solo, centrato: cosi' aprendo il portale
 * la scena si assesta invece di saltare */
header.portale > .wrap{flex:1;min-height:0;width:100%;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}

/* LA MISURA DEL CERCHIO LA FA IL JAVASCRIPT, e non e' una resa: quanto spazio
 * resta dipende dall'altezza della consolle, che dipende dal suo contenuto, e
 * il CSS quel numero non ce l'ha. Una funzione che gira al caricamento, al
 * ridimensionamento e quando il portale si apre costa nulla ed e' esatta.
 * Qui resta solo il limite di larghezza, che invece il CSS conosce. */
.rig{flex:0 0 auto;margin:0;max-width:calc(100vw - var(--tacche))}

/* ── LA CONSOLLE GALLEGGIA, NON SPINGE ───────────────────────────
   Stava nel flusso sotto il cerchio, e i due si dividevano l'altezza: crescendo
   lei, il portale diventava un cerchietto. Non sono due cose in competizione -
   il portale e' la scena e la consolle e' il comando - quindi la consolle si
   stacca dal flusso e si appoggia in basso, davanti al cerchio. Il portale si
   prende tutta l'altezza che c'e' e non si accorge di lei. */
.console{position:fixed;left:0;right:0;bottom:calc(var(--sotto) + 16px);z-index:6;
  align-items:stretch;width:100%;margin:0;padding:0 14px;pointer-events:none}
.console > *{pointer-events:auto}
.fine{position:fixed;left:0;right:0;bottom:calc(var(--sotto) + 16px);z-index:6;
  width:100%;margin:0;padding:0 16px;text-align:center}

/* IL TASTO DENTRO IL PORTALE E' UNA FRAZIONE DEL PORTALE, non dello schermo:
   cosi' il rapporto fra i due resta lo stesso a qualunque misura, e non capita
   piu' un tasto enorme dentro un anello piccolo. `--lato` lo scrive la funzione
   che misura il cerchio. */
.run.big.inside{padding:calc(var(--lato,320px) * .052) calc(var(--lato,320px) * .13);
  font-size:calc(var(--lato,320px) * .062);letter-spacing:.04em}

/* ── IL SELETTORE ─────────────────────────────────────────────────
 * Quattro pastiglie sparse in una riga diventano un segmentato solo: un
 * binario, quattro caselle uguali, quella scelta piena di lime. E' il gesto
 * che il pollice conosce gia' da qualunque altra app, e a differenza di prima
 * MAX non e' piu' largo degli altri per via del testo piu' lungo.
 * Sotto: quanto costa a sinistra, il tasto a destra, tutta la larghezza. */
/* VETRO, COME SUL DESKTOP. Era un pannello pieno appoggiato davanti al portale:
   copriva la macchina invece di galleggiarci sopra. Sotto si deve continuare a
   vedere il cerchio, se no non sono due piani, sono due schermate. */
.controls{flex-direction:column;align-items:stretch;gap:0;
  padding:0;border-radius:20px;margin:0;
  background:rgba(12,14,20,.62);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--line2);
  box-shadow:inset 0 1px 0 rgba(243,241,236,.08), 0 20px 40px -22px #000}
.controls .amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;
  width:100%;margin:0;padding:3px;border-radius:16px;
  background:rgba(7,8,11,.55);border:1px solid var(--line)}
.controls .q,.controls .q.max{width:auto;padding:0;height:46px;border:0;
  background:transparent;border-radius:13px;font-size:15px;letter-spacing:.02em;
  color:var(--dim);transition:background .14s,color .14s}
.controls .q.on{background:var(--lime);color:#07080B;font-weight:700;
  box-shadow:0 0 22px -6px rgba(180,240,74,.7)}
.controls .q.max{font-size:12.5px;letter-spacing:.12em}

/* IL NUMERO STA ACCANTO ALLA SUA ETICHETTA, non all'altro capo della riga.
   "TO PAY" a sinistra del tutto e "10" a destra del tutto lasciavano in mezzo un
   palmo di vuoto, e su uno schermo stretto il vuoto e' l'unica cosa che non
   avanza. Adesso stanno insieme, allineati a destra, e si leggono come una cosa
   sola invece che come due estremi da collegare con l'occhio. */
/* IL NUMERO AL CENTRO, LA PAROLA SOTTO. Stava schiacciato contro il bordo
   destro, che in colonna era l'unica cosa fuori asse: sopra la frase centrata,
   sotto il tasto largo quanto lo schermo, e in mezzo un numero a destra.
   Centrare la coppia "TO PAY  120" non bastava: al centro finiva lo spazio fra
   le due, non il numero. Impilati, il numero e' esattamente sull'asse e la
   parola gli fa da didascalia. */
.controls .cost{flex-direction:column;align-items:center;justify-content:center;
  gap:1px;min-width:0;padding:0;margin:0}
.controls .cost .lbl{font-size:8.5px;order:2;letter-spacing:.14em}
.controls .cost .tot{font-size:27px;order:1;line-height:1.05}
.controls #run{width:100%;height:52px;padding:0;font-size:16px;border-radius:999px}

/* PIU' STRETTO IN ALTEZZA. Sul telefono la consolle deve stare sotto il portale
   senza spingerlo fuori: ogni pixel qui e' un pixel di cerchio in meno. */
.controls .porte{padding:0 2px}
.controls .porta{padding:11px 4px;font-size:9.5px}
.controls .riga{gap:11px;padding:11px 12px 12px}
.controls .riga .detto{font-size:12px;line-height:1.45}

/* IL PADDING SCENDE DA `.controls` A `.riga`: fra le linguette e quello che
   sta sotto c'e' gia' una linea, e uno stacco in piu' la faceva sembrare
   staccata dal pannello invece che il suo bordo.
   In colonna anche qui: le tre porte si impilano tutte allo stesso modo, la
   frase sopra, il numero in mezzo, il tasto largo quanto lo schermo. */
/* PIU' PICCOLA. Ogni pixel qui e' un pixel di portale coperto: le linguette
   sottili, il selettore basso, il tasto meno alto. Resta comoda da premere -
   il tasto grande sta sopra i quaranta pixel - ma smette di occupare mezzo
   telefono per offrire quattro numeri e un pulsante. */
.controls .porte{padding:0 2px}
.controls .porta{padding:9px 4px;font-size:9px;letter-spacing:.1em}
/* TUTTE E TRE LE PORTE ALTE UGUALE. La porta standard ha una riga in piu' (il
   selettore delle quantita'), per cui era 147 alta contro i 120 delle due che
   bruciano: cambiando linguetta la consolle faceva un salto di ventisette
   pixel, e sotto il portale un salto si vede. Il minimo e' quello della porta
   piu' alta - sono tutte misure fisse, non cambia con la larghezza - e lo
   spazio che avanza sulle altre due se lo prende la frase, che e' esattamente
   il posto dove serviva. */
.controls .riga{flex-direction:column;align-items:stretch;gap:9px;padding:9px 10px 10px;
  min-height:158px}
.controls .riga .detto{flex:1 1 auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:11.5px;text-align:center}
.controls .riga .detto .quali{font-size:10.5px;white-space:normal}
.controls .amounts{padding:2px;border-radius:13px}
.controls .q,.controls .q.max{height:38px;font-size:13.5px;border-radius:11px}
.controls .q.max{font-size:11px}
.controls .cost .tot{font-size:22px}
.controls #run{height:44px;font-size:14.5px}

}

/* ── LA FINESTRA DEI TRATTI, SUL TELEFONO ─────────────────────────
   Prendeva quasi tutto lo schermo: `min(420px, 100%)` su un telefono largo 375
   vuol dire 375, cioe' bordo a bordo, e una finestra che occupa tutto non
   sembra piu' una finestra - sembra un'altra pagina, e non si capisce come si
   torna indietro. Lasciandole dei margini si vede che sotto c'e' ancora il
   portfolio, ed e' quello che dice come uscirne. */
/* ── LA SCHEDA DEI TRATTI, SENZA SCORRIMENTO ──────────────────────
   Immagine quadrata piu' sette righe da quarantatre pixel non ci stanno in uno
   schermo, e si finiva a scorrere DENTRO una finestra: il gesto peggiore che ci
   sia, perche' non si capisce se stai scorrendo la finestra o la pagina sotto.
   Le righe si stringono a trenta, la testata a poco piu', e l'immagine si prende
   quello che resta: tutto dentro, niente da scorrere.

   Conto su uno schermo da 812: 330 di immagine + 42 di testata + sette righe da
   30 = 582, dentro il 78% dello schermo che la finestra si prende. */
/* la finestra puo' permettersi di essere un po' piu' grande: adesso il suo
   contenuto e' basso abbastanza da starci dentro tutto */
.meta{padding:22px 16px}
.meta-box{width:min(350px,100%);max-height:90vh}
/* L'IMMAGINE SI TENEVA LA SUA MISURA VERA. Con `width:100%` e `aspect-ratio:1`
   veniva fuori a 752 pixel dentro una scheda larga 330: sbordava di lato e
   faceva scorrere tutto. Un tetto in altezza e un limite in larghezza la
   riportano dentro, e `object-fit:contain` le lascia le proporzioni. */
/* UN TETTO IN ALTEZZA CI VUOLE. Toglierlo lasciava l'immagine quadrata piena,
   e con la fascia dei punti in mezzo il contenuto arrivava a 729 dentro una
   finestra alta 731: in piedi per due pixel, cioe' un nome di tratto piu' lungo
   del solito e si torna a scorrere. Il tetto toglie una fetta al disegno, non
   gli mette bande ai lati, perche' `cover` continua a riempire il riquadro. */
.meta-img{width:100%;max-width:100%;aspect-ratio:1;max-height:36vh;object-fit:cover}
.meta-head{padding:11px 14px 9px}
.meta-id{font-size:17px}
.meta-tier{padding:4px 9px;font-size:9px}
/* I riquadri stanno stretti anche qui: si accorciano un filo e basta. */
.meta-rows{gap:6px;padding:11px}
.meta-rows .r{padding:7px 9px;border-radius:10px}
.meta-rows .r .k{font-size:8px}
.meta-rows .r b{font-size:12px}
.meta-rows .r .l{font-size:9px}
.meta-x{width:32px;height:32px;top:9px;right:9px}
.meta-x svg{width:14px;height:14px}


/* ── LA STRISCIA DEGLI SCELTI ─────────────────────────────────────
 * Cinque pastiglie piu' la parola SELECTED non ci stanno in 375 px, e lo scorri
 * di lato nessuno lo scopre: l'ultima resta fuori e sembra che manchi. Qui la
 * parola non serve (sotto la barra di ricerca si capisce da solo cosa sono) e le
 * pastiglie si stringono, cosi' i cinque casi normali ci stanno tutti. Se i
 * numeri sono lunghi scorre lo stesso, ma e' l'eccezione. */
.gsel{padding:10px 14px;gap:5px}
.gsel .lab{display:none}
.gsel .chip{gap:5px;padding:4px 7px 4px 8px;font-size:10.5px}
.gsel .chip em{font-size:12px}