/* ============================================================
   MeBoard
   La fustella: cartone punzonato, tre inchiostri da stampa,
   angoli tagliati a 45 gradi e ombre piene senza sfocatura.
   ============================================================ */

/* I font stanno nel repo, non su Google: il sito deve funzionare anche
   senza rete. Servono anche a js/art.js, che scrive i titoli delle
   scatole su canvas. Sottoinsieme latino, licenza SIL OFL. */

/* DUE FAMIGLIE, E FANNO DUE MESTIERI DIVERSI.

   Prima ce n'era UNA -- Poppins -- e la regola era che la gerarchia la
   facesse il peso. Era giusta per un sito di superfici morbide; qui no.
   La fustella e' una plancia stampata, e su una plancia le PAROLE e i
   NUMERI non sono scritti dalla stessa mano: il titolo e' punzonato
   grande e strettissimo, la cifra e la sigla sono battute a macchina.

     Archivo         tutto il testo, e a 900 anche i titoli
     IBM Plex Mono   cifre, sigle, etichette -- quello che si conta

   Archivo e' un file solo, VARIABILE sull'asse del peso: 34 KB per
   tutti e sei i pesi che prima erano cinque file. Il `font-weight` va
   dichiarato come intervallo `100 900`, se no il browser sintetizza il
   grassetto invece di chiedere l'asse -- e un grassetto sintetico a 900
   e' una macchia. */
@font-face{font-family:'Archivo'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../fonts/archivo-var.woff2) format('woff2')}
@font-face{font-family:'Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/plexmono-400.woff2) format('woff2')}
@font-face{font-family:'Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url(../fonts/plexmono-500.woff2) format('woff2')}
@font-face{font-family:'Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url(../fonts/plexmono-600.woff2) format('woff2')}

:root{
  /* LA TAVOLOZZA, otto tinte e basta. Qui c'e' il CARTONE, che e' il
     materiale di partenza; la carta e gli inchiostri adattati li
     riscrive `js/tema.js` a ogni cambio. Questi valori sono la riserva:
     senza JS il sito resta la fustella invece di perdere fili, ombre e
     velo della testata.

     `--bg` deve restare uguale allo sfondo della scena 3D (SFONDO in
     js/app.js, che lo chiede a TEMA): e' la stessa tinta a tenere
     insieme il caricamento, il cancello e il mondo dietro. */
  --bg:#000000;          /* il fondo: nero pieno */
  --card:#141210;        /* cartone tagliato: i pannelli */
  --ink:#efe3cd;         /* carta cruda: il testo, e il blocco pieno */
  --ink-soft:#a2937c;    /* carta in ombra: il testo secondario */
  --sage:#6d6252;        /* superfici quiete */
  --sand:#b8a184;        /* sabbia */
  --wood:#b0824c;        /* il legno dello scaffale */
  --accent:#f0b429;      /* ocra: tutto quello che si tocca */

  /* I TRIPLI. Mezzo foglio scrive l'inchiostro e la carta a decine di
     opacita' diverse -- fili, fondi appena accennati, testo secondario
     -- e scritti a mano quei numeri non seguirebbero nessuna tavolozza:
     si vedrebbe un filo verde oliva su un fondo lilla. Cosi' invece
     basta `rgba(var(--ink-rgb), .06)`. */
  --ink-rgb:239,227,205;
  --card-rgb:20,18,16;
  --bg-rgb:0,0,0;
  --accent-rgb:240,180,41;
  --ombra-rgb:0,0,0;

  /* Il fondo delle quattro schermate piatte: sta fra la carta e la
     stanza, che e' il colore di una pagina che si legge. */
  --fondo:#0d0c0b;
  --accent-su:#f2bd43;   /* l'accento premuto */
  /* QUELLO CHE SI SCRIVE SOPRA UN INCHIOSTRO. Sopra l'ocra ci va il
     cartone, sopra il rosso ci va la carta: non e' una scelta, e' un
     conto, e sta in `sopra()` dentro js/tema.js. */
  --su-accent:#141210;

  /* I TRE INCHIOSTRI DA STAMPA. Non sono la tavolozza: sono i colori
     con cui la plancia e' stampata, e li adatta al materiale
     `stampa()`. Il rosso resta il segnale di quello che distrugge e il
     filetto delle barre -- non diventa mai l'accento. */
  --rosso:#e9634f;       --su-rosso:#141210;   --rosso-rgb:233,99,79;
  --ocra:#f0b429;        --su-ocra:#141210;
  --verde:#2f9e6b;       --su-verde:#141210;

  /* ORO, ARGENTO, BRONZO. Sono le uniche tinte del sito che non vengono
     dalla tavolozza ne' cambiano col materiale, ed e' voluto: una
     medaglia non e' una scelta estetica, e' un oggetto che ha il suo
     colore -- come le temperature dei faretti, che per lo stesso
     motivo non seguono le tavolozze.

     Stanno qui e non due volte piu' sotto perche' le usano DUE posti
     che devono dire la stessa cosa: la corona accanto al nome e il
     gradino del podio. Scritte a mano in tutti e due, prima o poi una
     delle due cambia da sola. */
  --oro:#c8971f;
  --argento:#8d949c;
  --bronzo:#a2683c;

  --velo:rgba(16,14,12,.92);        /* la testata: cartone velato */
  --velo-lieve:rgba(16,14,12,.55);  /* sulla scena, dove non scorre niente */
  --velo-pieno:rgba(16,14,12,.94);  /* con la stanza in penombra */
  /* Il filo e' TRATTEGGIATO come le fustelle di una plancia, e un
     tratteggio tenue non si vede: sono buchi in un segno gia' debole.
     Sta a .26 e non a .14, che era il valore di un filo pieno. */
  --line:rgba(239,227,205,.26);

  /* LE OMBRE SONO PIENE E SENZA SFOCATURA. Un pezzo di cartone
     appoggiato fa un'ombra con un bordo; una sfocatura fa un pannello
     che galleggia, che e' l'opposto di quello che deve sembrare.
     Stessa cosa a due altezze: 3 px un pezzo appoggiato, 6 px un
     pannello che sta sopra a tutto. */
  --shadow:6px 6px 0 rgba(0,0,0,.78);
  --ombra-lieve:3px 3px 0 rgba(0,0,0,.64);
  /* La stessa ombra per chi ha il taglio: `clip-path` ritaglia la
     `box-shadow`, `drop-shadow` no -- segue la sagoma ritagliata.
     `--posa-giu` e' quella del pezzo premuto, che si e' quasi posato. */
  --posa:drop-shadow(3px 3px 0 rgba(var(--ombra-rgb),.64));
  --posa-giu:drop-shadow(1px 1px 0 rgba(var(--ombra-rgb),.64));

  /* NIENTE RAGGI. I tre nomi restano perche' novantasei regole li
     chiamano, e cambiare il valore in un posto solo e' esattamente il
     motivo per cui erano variabili: una plancia di cartone non ha
     angoli tondi, ha angoli TAGLIATI, e il taglio si fa con
     `--fustella` qui sotto perche' un raggio non sa farlo. */
  --r-s:0; --r-m:0; --r-l:0;

  /* L'ANGOLO TAGLIATO A 45 GRADI, che e' la firma della fustella: due
     angoli opposti, in alto a sinistra e in basso a destra, come il
     pezzo staccato da una plancia.

     Attenzione: `clip-path` ritaglia anche l'ombra dell'elemento. Chi
     porta il taglio prende l'ombra da `filter:drop-shadow()`, che segue
     la sagoma ritagliata; i pannelli grandi non hanno il taglio e
     tengono la loro `box-shadow`. */
  --taglio:6px;
  --fustella:polygon(0 var(--taglio), var(--taglio) 0, 100% 0,
    100% calc(100% - var(--taglio)), calc(100% - var(--taglio)) 100%, 0 100%);

  /* Una curva sola per tutto il sito -- ma piu' corta e piu' secca di
     prima. Un pezzo di cartone non si posa piano: si posa. */
  --ease:cubic-bezier(.2,.8,.3,1);
  --ff:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-display:var(--ff);
  --ff-text:var(--ff);
  --ff-mono:'Plex Mono',ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box}

/* Il lampo azzurro sul tocco. Su un telefono, toccando la scena -- che
   e' un elemento fisso grande quanto lo schermo -- il browser ci
   dipingeva sopra la sua evidenziazione: tutto lo schermo diventava
   azzurro per un istante, come se avesse selezionato un pannello che
   copre tutto. Qui non si tocca per selezionare, si tocca per fare. */
html{-webkit-tap-highlight-color:transparent}
button, summary, .viste, #rail, #scene, #tabbar, .pastiglie, .riga-menu{
  -webkit-user-select:none; user-select:none;
}

html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ff-text); font-size:16px; line-height:1.6;
  overflow:hidden; overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
canvas{display:block}

/* --- scena --------------------------------------------------- */
/* touch-action:none, altrimenti il browser legge il trascinamento
   come scroll e annulla i pointer event a meta' gesto */
#scene{position:fixed; inset:0; z-index:0; touch-action:none}
#scene canvas{width:100%; height:100%}

/* Vignettatura: chiude gli angoli e basta. Le due velature chiare in
   alto e in basso sono state tolte -- servivano a staccare testata e
   suggerimenti dal fondo, ma tagliavano la stanza in orizzontale e si
   vedevano come due bande slavate. */
/* LA VIGNETTATURA E' IL BUIO, NON L'INCHIOSTRO -- ed e' esattamente la
   lezione gia' scritta per le ombre, ripresentata dove nessuno l'aveva
   cercata.

   Chiude gli angoli della stanza, cioe' li SCURISCE. Finche' il fondo
   e' stato chiaro l'inchiostro era scuro e le due cose coincidevano;
   sul cartone l'inchiostro e' la carta, e questa riga dipingeva
   `rgba(239,227,205,.26)` tutto attorno allo schermo -- un alone chiaro
   sui quattro bordi, come una luce che entra da fuori. Si vedeva su
   ogni schermata, perche' `#vig` sta fisso sopra la scena.

   `--ombra-rgb` e' il conto gia' fatto: e' l'inchiostro finche' il
   fondo e' chiaro ed e' il nero quando e' scuro. */
#vig{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 88% 80% at 50% 46%, transparent 46%, rgba(var(--ombra-rgb),.26) 100%)}

/* --- interfaccia --------------------------------------------- */
/* z-index 4 e non 3: l'elenco della collezione e' salito a 3 per
   coprire catalogo, partite e profilo, e a parita' di livello vince chi
   viene dopo nel markup -- cioe' l'elenco si disegnava sopra la
   TESTATA. Sparivano il marchio, le sezioni e soprattutto il contatore,
   che e' l'unico modo di richiudere l'elenco: ci si restava dentro.
   La testata galleggia su tutto quello che copre la pagina, e questo e'
   il numero che lo dice. */
header{
  position:fixed; z-index:4; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px clamp(16px,4vw,40px);
  opacity:0; transform:translateY(-10px);
  transition:opacity .9s ease .2s, transform .9s ease .2s;
  pointer-events:none;
}
/* Niente velo dietro la testata: in alto c'e' la parete chiara della
   stanza, il testo scuro ci si legge sopra da solo, e la sfumatura si
   notava piu' del problema che risolveva. */
body.ready header{opacity:1; transform:none}
/* E' UN PULSANTE, quindi va spogliato di quello che il browser mette
   addosso ai pulsanti: fondo, bordo, imbottitura e testo centrato. Di
   suo resta solo il dito del cursore, che e' l'unica cosa che vogliamo
   in piu' rispetto a prima. */
.brand{
  display:flex; align-items:baseline; gap:12px; pointer-events:auto;
  background:none; border:0; padding:0; margin:0; text-align:left;
  font:inherit; color:inherit; cursor:pointer;
}
.brand:active{transform:translate(1px,1px)}
.brand b{
  font-family:var(--ff); font-weight:600;
  font-size:clamp(17px,2.1vw,21px); letter-spacing:-.015em; line-height:1.15;
}
.brand b i{color:var(--accent); font-style:normal}
.brand span{
  font-size:11px; letter-spacing:.02em; text-transform:none;
  color:var(--ink-soft); display:none; font-weight:400;
}
@media (min-width:760px){ .brand span{display:inline} }

/* --- barra degli strumenti in alto a destra -------------------- */
.tools{display:flex; align-items:center; gap:8px; pointer-events:auto}
.tool{
  font-family:var(--ff-text); font-size:13px; font-weight:500;
  letter-spacing:0; text-transform:none;
  /* Al 96% invece che all'88% con la sfocatura: questi stanno sopra la
     scena, e li' ogni `backdrop-filter` e' una sfocatura rifatta a ogni
     fotogramma. Il quattro per cento che passa fa lo stesso mestiere
     del dodici sfocato. */
  color:var(--ink-soft); background:rgba(var(--card-rgb),.96); cursor:pointer;
  border:0; padding:8px 11px; border-radius:var(--r-s);
}
.tool:hover{color:var(--ink); border-color:var(--accent)}
.tool b{color:var(--accent); font-weight:500}

/* --- ricerca e contatore ---------------------------------------
   Su schermo largo il campo sta sempre in vista; sotto gli 880 px
   diventa una lente, e aprendolo si prende la riga della testata
   nascondendo marchio e strumenti -- in quello spazio non ci stanno
   tutti e due, e mentre si cerca serve il campo, non il resto. */
.cercawrap{position:relative; display:flex; align-items:center; margin:14px 0 0}
#cerca, #mia-q, #par-q{
  width:100%; text-transform:none; letter-spacing:.04em; font-family:var(--ff-text);
  font-size:13px; color:var(--ink); padding:9px 26px 9px 10px;
  background:none; border:1px dashed var(--line);
}
#cerca:focus, #mia-q:focus, #par-q:focus{outline:none; border-color:var(--accent)}
#cerca::placeholder, #mia-q::placeholder, #par-q::placeholder{
  color:var(--ink-soft); text-transform:uppercase; letter-spacing:.07em; font-size:11px;
}
#cerca-x, #mia-q-x, #par-q-x{
  position:absolute; right:5px; display:none; border:0; background:rgba(var(--ink-rgb),.06); cursor:pointer;
  color:var(--ink-soft); font-size:16px; line-height:1; padding:1px 4px; border-radius:var(--r-s);
}
body.cerca #cerca-x, body.cerca #mia-q-x{display:block}
/* Le partite hanno una ricerca loro: filtra le partite, non i giochi,
   quindi ha uno stato suo e una sua classe sul body. */
body.cerca-par #par-q-x{display:block}
#cerca-x:hover, #mia-q-x:hover, #par-q-x:hover{color:var(--wood)}
/* Il contatore e' la porta dell'elenco, e adesso lo dice: "la mia
   collezione: 10". Un numero da solo non si capiva che fosse un
   pulsante, e nemmeno di cosa fosse il numero. */
#conta{cursor:pointer; color:var(--ink); border-radius:var(--r-s);
}
#conta:hover{color:var(--accent); border-color:var(--accent)}
#conta b{font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:10.8px; letter-spacing:.02em; color:var(--ink)}
#conta:hover b{color:var(--accent)}
#conta span{color:var(--ink-soft)}

/* --- i gruppi -----------------------------------------------------
   Etichette. Nella scheda si accendono e si spengono col dito; in cima
   all'elenco filtrano. Stessa forma nei due posti perche' sono la
   stessa cosa, e chi l'ha capita una volta l'ha capita. */
.gruppi{display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 0}
.gruppi:empty{display:none}
.gruppi button{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; color:var(--ink-soft);
  background:rgba(var(--ink-rgb),.06); border:0; padding:6px 9px; border-radius:var(--r-s);
}
.gruppi button:hover{color:var(--ink); border-color:var(--accent)}
.gruppi button.on{color:var(--card); background:var(--wood); border-color:var(--wood)}
.gruppi button.nuovo{color:var(--accent); border-style:dashed}
.gruppi.filtro{margin:14px 0 0}
.gruppi.filtro button.on{background:var(--accent); border-color:var(--accent)}
#p-gruppi{padding-top:4px}

/* --- preferiti ---------------------------------------------------- */
#p-pref{
  font-family:var(--ff-text); font-size:15px; line-height:1; cursor:pointer;
  color:var(--ink-soft); background:rgba(var(--ink-rgb),.06); border:0; padding:6px 9px; border-radius:var(--r-s);
}
#p-pref:hover{color:var(--accent); border-color:var(--accent)}
#p-pref[aria-pressed="true"]{color:var(--card); background:var(--accent); border-color:var(--accent)}
body.visita #p-pref{display:none !important}

/* IN CASA DI UN AMICO IL SITO E' UNA LIBRERIA E BASTA.

   Il catalogo e il profilo sono tuoi e continuerebbero a esserlo anche
   di la': portarcisi dentro dalla sua libreria vuol dire uscire da casa
   sua senza accorgersene, e poi non capire piu' di chi sia la
   collezione che si sta guardando. Si esce da un posto solo, il cartello
   che dice di chi e' la libreria. */
body.visita #sezioni [data-sez="catalogo"],
body.visita #sezioni [data-sez="partite"],
body.visita #sezioni [data-elenco],
body.visita #tabbar  [data-sez="catalogo"],
body.visita #tabbar  [data-sez="partite"],
body.visita #tabbar  [data-elenco],
body.visita #pro-apri{display:none !important}

/* il cuore: c'e' solo in visita, ed e' l'unica cosa che si tocca */
.visita-only{display:none !important}
body.visita .visita-only{display:inline-flex !important}
/* IL CUORE. Le tre righe che c'erano qui puntavano a uno
   `<span class="cuore">` con dentro il glifo Unicode 2665: markup che
   non esiste piu' da quando le icone sono un corredo SVG, cioe' codice
   morto che sembrava vivo.

   Acceso non cambia solo colore -- si RIEMPIE (la regola sul `path` sta
   piu' sotto) e da' un colpetto, che e' quello che ci si aspetta oggi
   toccando un cuore. Il numero e' a cifre tabulari: passando da 9 a 10
   non deve muoversi il cuore accanto. */
#p-cuore{align-items:center; gap:7px}
#p-cuore-n{
  font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:10.1px; letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}

/* IL FILTRO DEI PREFERITI e' la stessa stella che si tocca sulle righe,
   con accanto quanti sono. Acceso si riempie, come ogni altra icona a
   due stati del sito. */
.filtro-pref{display:inline-flex; align-items:center; gap:5px}
.filtro-pref .ico{width:16px; height:16px}
.filtro-pref span{font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:10.6px; letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
.filtro-pref.on{color:var(--accent); border-color:var(--accent)}
.filtro-pref.on .ico path{fill:currentColor}
.cat-azioni .pref{font-size:14px; line-height:1; padding:6px 9px}
.cat-azioni .pref.on{color:var(--card); background:var(--accent); border-color:var(--accent)}

/* dove sta un gioco, e come si sceglie dove metterlo */
.cat-dove{
  margin:7px 0 0; font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  color:rgba(var(--ink-rgb),.45);
}
.cat-dove b{color:var(--accent); font-weight:500}
.cat-dati h3 .stella{color:var(--accent); font-style:normal; font-size:15px; vertical-align:2px}
.cat-azioni .dentro{color:var(--accent); border-color:rgba(var(--accent-rgb),.45)}
.cat-azioni .fuori:hover{color:var(--wood); border-color:var(--wood)}
.scegli-lib{display:flex; flex-wrap:wrap; gap:5px; max-width:190px}
.scegli-lib button{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; color:var(--card);
  background:var(--accent); border:0; padding:6px 8px; border-radius:var(--r-s);
}
.scegli-lib button:hover{background:var(--ink); border-color:var(--ink)}
.scegli-lib button:disabled{opacity:.4; cursor:default}
/* L'unico pulsante di questa fila che CREA qualcosa: gli altri
   scelgono fra mobili che esistono gia'. */
.scegli-lib button.nuova{
  color:var(--accent); background:rgba(var(--accent-rgb),.12); border-color:transparent;
}
.scegli-lib button.nuova:hover{color:var(--card); background:var(--accent)}
.scegli-lib button.lascia{
  color:var(--ink-soft); background:none; border-color:var(--line);
}
.scegli-lib button.lascia:hover{color:var(--ink); background:none; border-color:var(--accent)}

/* --- le due viste dell'elenco ------------------------------------
   L'indicatore segue il dito mentre si scorre invece di saltare alla
   fine: e' quello che dice che le due viste sono una accanto all'altra
   e non due schermate diverse. */
.viste{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  margin:14px 0 0; border-bottom:1px dashed var(--line);
}
.viste button{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; color:var(--ink-soft);
  background:rgba(var(--ink-rgb),.06); border:0; padding:11px 6px 12px; border-radius:var(--r-s);
}
.viste button:hover{color:var(--ink)}
.viste button.on{color:var(--ink)}
.viste .ind{
  position:absolute; left:0; bottom:-1px; width:50%; height:2px;
  background:var(--accent); transform:translateX(0);
  transition:transform .3s cubic-bezier(.22,.9,.26,1);
}
.viste.trascina .ind{transition:none}

/* --- la riga delle viste, con l'interruttore dei preferiti in fondo --
   Il filo tratteggiato passa sotto a TUTTA la riga e non solo sotto
   alle due viste: e' quello che dice che la stella sta con loro e non
   accanto per caso. L'indicatore resta figlio di `.viste`, quindi il
   suo 50% e' ancora mezza vista e non mezzo schermo. */
.viste-riga{display:flex; align-items:stretch; gap:6px; margin:14px 0 0; border-bottom:1px dashed var(--line)}
.viste-riga .viste{flex:1; min-width:0; margin:0; border-bottom:0}
/* LA RIGA DOVE: il segno dello scaffale e, accanto, il nome del
   mobile. L'icona sta sulla linea di base del testo, se no la seconda
   riga di ogni gioco sembra due cose impilate invece di una. */
.riga-dove .ico{width:13px; height:13px; vertical-align:-2px; margin-right:5px}
.riga-dove i{font-style:normal}

/* NELLA WISHLIST NON SI SFOGLIA IL CATALOGO.

   La ricerca interroga BGG e "altri giochi" chiede la pagina dopo: sopra
   una lista di venti righe che stanno gia' tutte in memoria non vogliono
   dire niente, e un comando che non fa niente e' peggio di un comando
   che manca. Si nasconde con `display:none` e non con l'opacita': vedi
   la nota sul binario -- nascondere non e' disattivare. */
body.vcat-wish #catalogo .cat-cerca,
body.vcat-wish #catalogo .cat-fondo{display:none}
/* Senza account non c'e' nessuna wishlist: la scelta non si pone. */
body:not(.dentro) #cat-viste{display:none}

/* L'ARREDO DI UNA CELLA.

   Cinque icone e basta, ancorate al cubo che si e' tenuto premuto.
   Nessuna parola: cinque etichette in fila sopra una scena 3D sono una
   didascalia che copre il mobile, e quello che fanno sta nel `title`.

   E' una SUPERFICIE, non una tinta: carta piena con la sfocatura
   dietro e un'ombra, come l'imbuto e il binario. Un fondo tinto al
   dieci per cento funziona dentro una scheda chiara; sopra la stanza,
   che e' gia' color crema e che si puo' spegnere fino al buio,
   sparisce. */
#cella{
  position:fixed; z-index:5; display:none;
  gap:2px; padding:5px;
  background:var(--card); border-radius:0; box-shadow:var(--shadow);
  animation:apreMenu .16s ease-out both;
}
body.cella-su #cella{display:flex}
#cella button{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; cursor:pointer; line-height:0;
  color:var(--ink-soft); background:none; border:0; border-radius:0;
}
#cella button:hover{color:var(--ink); background:rgba(var(--ink-rgb),.07)}
/* La scelta e' PIENA e non un contorno acceso: fra cinque icone dello
   stesso tratto, un contorno di un altro colore si legge come "questa
   e' diversa", non come "questa e' quella". */
#cella button[aria-pressed="true"]{color:var(--card); background:var(--accent)}
/* Il dito vuole quarantaquattro pixel, come ovunque nel sito. */
@media (pointer:coarse){
  #cella button{width:44px; height:44px}
}
/* Toccando di nuovo quello gia' scelto, l'arredo cambia variante:
   l'icona fa mezzo giro. Non e' decorazione -- fra due varianti dello
   stesso arredo la differenza dentro al cubo puo' essere piccola, e
   senza una risposta al gesto sembrerebbe che il tocco sia andato
   perso. */
#cella button.gira .ico{animation:cellaGira .34s var(--ease) both}
@keyframes cellaGira{
  from{transform:rotate(-180deg) scale(.82)}
  to{transform:none}
}

/* la barra sopra l'elenco: filtri a sinistra, gestione a destra */
.mia-barra{display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin:14px 0 0}
/* Nell'imbuto la casella e' l'ultima cosa del pannello; qui invece ha
   una barra sotto, e senza respiro le due si leggono come una riga
   sola. */
/* PIU' SNELLA. Sopra un elenco la ricerca e' un campo di servizio, non
   il contenuto: alta come prima rubava una riga di giochi a ogni
   schermata. Scende di quattro pixel in altezza e si stacca meno da
   quello che ha sopra. */
#mia .cercawrap, #partite .cercawrap{margin:10px 0 2px}
#mia .cercawrap input, #partite .cercawrap input{padding:6px 24px 6px 9px; font-size:12.5px}
#mia .cercawrap input::placeholder, #partite .cercawrap input::placeholder{font-size:10.4px}
.mia-barra .gruppi{margin:0; flex:1; min-width:0}
#mia-gestisci, #gru-apri{
  flex:none; font-family:var(--ff-text); font-size:13px; font-weight:700;
  letter-spacing:0; text-transform:none; cursor:pointer;
  color:var(--ink-soft); background:var(--card); border:0; padding:6px 10px; border-radius:var(--r-s);
}
#mia-gestisci:hover, #gru-apri:hover{color:var(--accent); border-color:var(--accent)}

#gruppilayer{
  position:fixed; inset:0; z-index:9; display:flex; align-items:center;
  justify-content:center; padding:20px; background:rgba(90,74,50,.42);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s .3s;
}
#gruppilayer.on{opacity:1; visibility:visible; transition:opacity .3s ease, visibility 0s}
#gru-giochi{margin:18px 0 0; padding-top:14px; border-top:1px dashed var(--line)}
#gru-giochi .eyebrow{margin:0 0 10px}
.gru-elenco{list-style:none; margin:0; padding:0; max-height:38vh; overflow:auto}
.gru-elenco li{
  display:flex; align-items:center; gap:10px; padding:7px 0;
  border-bottom:1px dashed var(--line);
}
.gru-elenco .nome{flex:1; min-width:0; font-size:13.5px; color:var(--ink); overflow-wrap:anywhere}
.gru-elenco button{
  flex:none; font-family:var(--ff-text); font-size:13px; font-weight:700;
  letter-spacing:0; text-transform:none; cursor:pointer;
  color:var(--ink-soft); background:rgba(var(--ink-rgb),.06); border:0; padding:6px 9px; border-radius:var(--r-s);
}
.gru-elenco button:hover{color:var(--ink); border-color:var(--accent)}
.gru-elenco button.on{color:var(--card); background:var(--wood); border-color:var(--wood)}
.pro-gente button.quali{color:var(--accent); border-color:rgba(var(--accent-rgb),.45)}

/* --- righe compatte -----------------------------------------------
   Nome e copertina, e basta. Una riga che mostra gia' tutto obbliga a
   scorrere per contare i propri giochi; qui si legge l'elenco a colpo
   d'occhio e si apre solo quello che interessa.

   Due aperture distinte, e non un solo blocco che le contiene tutte e
   due: la riga apre le INFORMAZIONI, il tasto a tre righe apre le
   AZIONI. Sono due domande diverse -- "che gioco e'" e "cosa ci
   faccio" -- e mescolarle voleva dire che per leggere due righe di
   recensione ti trovavi davanti quattro pulsanti. */
.righe.compatta > li{
  grid-template-columns:52px 1fr auto; align-items:center; gap:14px; padding:11px 0;
}
/* SULLO SCAFFALE, O SOLO IN COLLEZIONE.

   `libreria` nulla vuol dire "ce l'ho ma non e' in mostra": una
   distinzione che il sito fa da sempre e che nell'elenco non si vedeva
   -- per sapere dove stesse un gioco bisognava aprire il menu della sua
   riga, una per una.

   ERA UNA COLONNA CON UN'ICONA, e la nota diceva: non un segno accanto
   al titolo, perche' scorrendo va trovato sempre nello stesso punto.
   Giusto -- e il prezzo era che quell'icona diceva solo *se* un gioco e'
   in vetrina, mentre DOVE stava nel `title`, cioe' andava cercato
   fermandosi sopra ogni riga.

   Adesso e' la SECONDA RIGA di ogni riga: dice tutte e due le cose, e
   il posto fisso ce l'ha ancora -- e' sempre sotto al titolo. Battuta a
   macchina, come tutto quello che e' un dato, e in ocra quando il gioco
   e' in mostra.

   Resta un SEGNO e non un comando: mettere e togliere si fa dal menu,
   che e' anche l'unico posto in cui si sceglie IN QUALE mobile quando
   ce n'e' piu' di uno. */
.riga-dove{
  display:block; margin-top:3px;
  font-family:var(--ff-mono); font-weight:600; font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(var(--ink-rgb),.42);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.riga-dove.su{color:var(--accent)}
/* Il titolo, la sua riga di sotto e la stella in una cella sola: la
   stella e' di quel gioco, e in una colonna sua si leggeva come un
   comando in fila col menu. `min-width:0` perche' un titolo lungo deve
   stringere, non spingere fuori la stella. */
.riga-tit{display:flex; align-items:center; gap:6px; min-width:0}
.riga-testo{display:block; min-width:0; flex:1 1 auto}
.righe.compatta > li:hover .riga-nome{color:var(--accent)}
.righe.compatta .cat-cop{width:52px; cursor:pointer}
.riga-nome{
  margin:0; cursor:pointer; font-family:var(--ff-display); font-weight:900; text-transform:uppercase;
  font-size:15.1px; letter-spacing:.02em; line-height:1.15; color:var(--ink);
}
/* La stellina del preferito e' un interruttore sulla riga, non una voce
   di menu: si accende con un tocco e si legge scorrendo. Spenta e'
   tenue -- se no trenta stelle accese sarebbero un elenco di stelle con
   dei giochi in mezzo -- e accesa e' piena, del colore di quello che si
   tocca. Il vuoto tiene la colonna in casa di un amico. */
.riga-stella{
  flex:none; cursor:pointer; padding:7px; line-height:0;
  color:rgba(var(--ink-rgb),.28); background:none; border:0; border-radius:var(--r-s);
}
.riga-stella:hover{color:var(--accent); background:rgba(var(--accent-rgb),.10)}
.riga-stella[aria-pressed="true"]{color:var(--accent)}
.riga-stella-vuota{display:block; width:0}
.riga-menu{
  flex:none; cursor:pointer; font-size:15px; line-height:1; padding:7px 10px;
  color:var(--ink-soft); background:rgba(var(--ink-rgb),.06); border:0; border-radius:var(--r-s);
}
.riga-menu:hover{color:var(--ink); border-color:var(--accent)}
.riga-menu[aria-expanded="true"]{color:var(--card); background:var(--ink); border-color:var(--ink)}

.riga-info{grid-column:1 / -1}
.riga-info[hidden], .riga-azioni[hidden]{display:none}

/* Le azioni non sono piu' una fascia sotto la riga: sono una finestrella
   ancorata al tasto che le apre. Sotto la riga scivolavano via dal punto
   in cui si era premuto -- tanto piu' con le informazioni aperte -- e
   allargavano l'elenco a ogni tocco, che e' il modo migliore di perdere
   il segno mentre si scorre. */
.riga-menuwrap{position:relative; flex:none}
.riga-azioni{
  position:absolute; z-index:6; top:calc(100% + 7px); right:0;
  display:flex; flex-direction:column; align-items:stretch; gap:2px;
  min-width:196px; padding:6px;
  background:var(--card); border:1px dashed var(--line); box-shadow:var(--shadow);
  animation:apreMenu .16s ease-out both;
}
@keyframes apreMenu{
  from{opacity:0; transform:translateY(-6px)}
  to{opacity:1; transform:none}
}
.riga-azioni button{
  width:100%; text-align:left; border-color:transparent;
  display:flex; align-items:center; gap:9px;
}
.riga-azioni button:hover{border-color:var(--line)}
/* sulle ultime righe la finestrella uscirebbe dal fondo: sale */
.righe.compatta > li:nth-last-child(-n+2) .riga-azioni{top:auto; bottom:calc(100% + 7px)}
.riga-info{margin:2px 0 6px; padding:12px 0 2px; border-top:1px dashed var(--line)}
.riga-info .cat-chi{margin:0}
.riga-info .cat-spec{margin:8px 0 0}
.riga-info .cat-dove{margin:8px 0 0}
.riga-info .voto{
  font-family:var(--ff-display); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; font-size:24.5px; line-height:.9; color:var(--ink); margin:12px 0 8px;
}
.riga-info .voto i{font-style:normal; font-size:14px; color:var(--ink-soft)}
.riga-info p{font-size:14px; color:rgba(var(--ink-rgb),.88); margin:0 0 10px; max-width:62ch}
.riga-info .vuoto{color:var(--ink-soft); font-size:13px}

/* --- cartelle nell'elenco: ogni gruppo e' una tendina -------------- */
.cartella{margin:18px 0 0}
.cartella:first-child{margin-top:10px}
/* LA RIGA DELLA CARTELLA: il titolo si allarga, i comandi stanno in
   fondo. Sono segni e non parole -- tre parole accanto a un nome di
   gruppo sarebbero piu' lunghe del gruppo. */
.cartella-riga{display:flex; align-items:stretch; gap:4px}
.cartella-riga .cartella-tit{flex:1; min-width:0}
.cartella-fa{display:flex; align-items:stretch; gap:2px; flex:none}
.cartella-fa .c-fa{
  width:34px; padding:0; border:0; border-radius:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; color:var(--ink-soft); line-height:0;
  transition:color .18s var(--ease), background-color .18s var(--ease);
}
.cartella-fa .c-fa .ico{width:16px; height:16px}
.cartella-fa .c-fa:hover{color:var(--ink); background:rgba(var(--ink-rgb),.08)}
.cartella-fa .c-fa:active{transform:translate(1px,1px)}
.cartella-fa .c-via:hover{color:var(--rosso); background:rgba(var(--rosso-rgb),.12)}
.cartella-fa .c-via.armed{background:var(--rosso); color:var(--su-rosso)}

/* Il campo che prende il posto del titolo mentre si rinomina. */
.cartella-nome{
  flex:1; min-width:0; font-family:var(--ff); font-weight:900; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); background:rgba(var(--ink-rgb),.08);
  border:0; border-radius:0; padding:0 10px;
}
.cartella-nome:focus{outline:none; box-shadow:inset 0 0 0 2px var(--accent)}

/* Un gruppo vuoto lo dice, invece di essere una tendina che si apre sul
   niente. */
.cartella-vuota{
  padding:12px 4px; font-family:var(--ff-text); font-size:12.5px;
  color:var(--ink-soft); grid-template-columns:none !important; display:block !important;
}

/* IL PIU' DEI GRUPPI: un segno quadrato come gli altri comandi
   dell'elenco, non una pastiglia con una frase dentro. */
/* Scritto anche con l'ID: `#gru-apri` compare in cinque regole di
   questo foglio che lo vestono da pastiglia, e un id batte una classe
   comunque la si scriva. */
#gru-apri.gru-piu, .gru-piu{
  width:38px; height:38px; padding:0; border-radius:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px dashed var(--line); color:var(--ink);
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
#gru-apri.gru-piu .ico, .gru-piu .ico{width:18px; height:18px}
#gru-apri.gru-piu:hover, .gru-piu:hover{border-color:var(--accent); color:var(--accent); background:none}
.gru-piu:active{transform:translate(2px,2px)}

/* La scatola dei gruppi dentro il menu di una riga: etichette, e
   quelle in cui il gioco gia' sta sono accese e spente al tocco. */
.riga-gruppi{display:flex; flex-wrap:wrap; gap:5px; padding:3px}
.riga-gruppi button{
  padding:7px 10px; border:1px dashed var(--line); border-radius:0; cursor:pointer;
  font-family:var(--ff); font-weight:900; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; background:none; color:var(--ink);
}
.riga-gruppi button:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
.riga-gruppi button.on{
  background:var(--accent); color:var(--su-accent); border-color:transparent; cursor:default;
}

/* I gruppi del gioco nella riga aperta: scritte, non comandi. Tratteggio
   e inchiostro smorzato per dire "questo e' un dato", non "premimi". */
.riga-gruppi.sue{gap:6px}
.riga-gruppi.sue span{
  padding:5px 9px; border:1px dashed var(--line); color:var(--ink-soft);
  font-family:var(--ff); font-weight:900; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase;
}

.cartella-tit{
  width:100%; display:flex; align-items:baseline; gap:10px; cursor:pointer;
  font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:15.8px; letter-spacing:.02em;
  color:var(--ink); text-align:left; background:rgba(var(--ink-rgb),.06); border:0;
  padding:8px 0; border-bottom:2px solid var(--accent); border-radius:var(--r-s);
}
.cartella-tit:hover{color:var(--accent)}
.cartella-tit span{
  font-family:var(--ff-text); font-size:10px; font-weight:500; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-soft);
}
.cartella-tit::after{
  content:'+'; margin-left:auto; font-family:var(--ff-text); font-size:17px;
  line-height:1; color:var(--ink-soft);
}
.cartella-tit[aria-expanded="true"]::after{content:'\2013'}
.cartella .righe{margin:0}
.cartella .righe[hidden]{display:none}

/* --- di che mobile stiamo parlando -------------------------------- */
.st-quale{
  margin:2px 0 12px; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(var(--ink-rgb),.45);
}
.st-quale b{color:var(--accent); font-weight:500}
.st-quale.sotto{margin:-2px 0 10px}
/* la pastiglia "+ gruppo" diventa un campo sul posto: mandare l'utente
   in un'altra sezione per scrivere una parola e poi farlo tornare qui
   e' un giro che non serve a niente */
.gruppo-nuovo{
  font-family:var(--ff-text); font-size:11px; letter-spacing:.06em; color:var(--ink);
  background:var(--bg); border:1px solid var(--accent); padding:5px 8px; width:150px;
}
.gruppo-nuovo:focus{outline:none}

/* Pubblicare nel catalogo e' una cosa da admin: la recensione diventa
   quella del sito, e il catalogo e' uno solo. Sulla propria collezione
   comanda chiunque sia entrato, qui no. */
#m-pub-riga{display:none !important}
body.admin #m-pub-riga{display:flex !important; align-items:flex-start; gap:10px;
  font-size:12.5px; line-height:1.5; color:var(--ink-soft)}
#m-pub-riga input{width:16px; height:16px; margin-top:2px; accent-color:var(--accent); flex:none}
#m-pub-riga b{color:var(--ink); font-weight:500}
#m-pub-riga small{display:block; margin-top:2px; font-size:11px; color:rgba(var(--ink-rgb),.5)}
/* mentre si tiene in mano una scatola non si va da nessuna parte:
   il suggerimento a fondo pagina parla di un gesto che non e' quello */
/* il chip dice chi sei e basta: entrati non e' piu' un pulsante */
#mode.chip{color:var(--ink)}
#mode.chip:disabled{cursor:default; opacity:1}
#mode.chip:disabled:hover{color:var(--ink); border-color:var(--line)}
body.admin #mode.chip{background:var(--wood); color:var(--card); border-color:var(--wood)}
body.admin #mode.chip:disabled:hover{color:var(--card); border-color:var(--wood)}
#esci{color:var(--ink-soft)}
#esci:hover{color:var(--wood); border-color:var(--wood)}

/* L'ordinamento non e' piu' una tendina in testata: e' una lista dentro
   al pannello della vista, sempre aperta -- li' dentro non deve
   contendersi lo spazio con nient'altro. */
#sortmenu{display:flex; flex-direction:column; border:1px dashed var(--line); margin:8px 0 0}
#sortmenu button{
  font-family:var(--ff-text); font-size:12px; text-align:left; cursor:pointer;
  background:rgba(var(--ink-rgb),.06); border:0; border-bottom:1px solid rgba(var(--ink-rgb),.10);
  color:var(--ink-soft); padding:11px 14px; border-radius:var(--r-s);
}
#sortmenu button:last-child{border-bottom:0}
#sortmenu button:hover{background:rgba(var(--accent-rgb),.10); color:var(--ink)}
#sortmenu button.on{color:var(--accent)}
#sortmenu button.on::after{content:' \2022'}

/* Gli strumenti di modifica valgono per chiunque sia entrato: la
   collezione e' sua. `admin` non da' piu' poteri in piu', resta solo
   per vedere come si comporta l'accesso -- e si legge nel chip. */
.dentro-only{display:none !important}
body.dentro .dentro-only{display:inline-flex !important}

/* --- le due sezioni --------------------------------------------
   Sono due modi diversi di guardare la stessa cosa, non due pagine:
   il segnalino sotto la voce attiva dice dove si e' senza aggiungere
   un altro riquadro alla testata, che e' gia' piena. */
#sezioni{display:flex; gap:4px; pointer-events:auto}
#sezioni button{
  font-family:var(--ff-text); font-size:13px; font-weight:500;
  letter-spacing:0; text-transform:none; cursor:pointer;
  color:var(--ink-soft); background:rgba(var(--ink-rgb),.06); border:0; padding:9px 10px 7px;
  border-bottom:2px solid transparent; border-radius:var(--r-s);
}
#sezioni button:hover{color:var(--ink)}
#sezioni button.on{color:var(--ink); border-bottom-color:var(--accent)}
/* IL FILO FRA LE TUE COSE E IL MONDO DI FUORI.

   Non e' un ornamento: e' la riga che dice dove finisce la tua roba
   -- libreria, collezione, partite -- e dove comincia il catalogo, da
   cui si pesca e basta. Senza, "collezione" e "catalogo" erano due
   voci di pari peso che cominciano con le stesse tre lettere. */
#sezioni button.fuori{margin-left:10px; padding-left:14px; border-left:1px dashed var(--line)}
#tabbar button.fuori{border-left:1px dashed var(--line)}
/* Un ospite non ha nessuna libreria: la voce che porta a una libreria
   vuota sarebbe una promessa che il sito non puo' mantenere.

   E le navigazioni sono DUE. Nominata solo quella della testata, sotto
   gli 880 px la voce restava -- cioe' proprio dove la barra in basso e'
   l'unica che c'e', e nell'app sempre: si toccava «libreria» e si
   finiva su una scena che per l'ospite non viene nemmeno costruita. */
body.ospite #sezioni [data-sez="collezione"],
body.ospite #tabbar  [data-sez="collezione"]{display:none !important}

/* IL PROFILO IN TESTATA. Solo l'icona, tonda come la casa del ritorno:
   accanto a un marchio e a quattro voci di navigazione una parola in
   piu' e' la sesta cosa da leggere in una riga che fra gli 881 e i 1150
   ne ha gia' una di troppo (vedi "La fascia del tablet"). Neutro e non
   terracotta: la terracotta qui e' l'uscita da casa di un altro, e due
   pastiglie piene nello stesso angolo non si distinguono piu'. */
#pro-apri{flex:none; padding:8px; line-height:0; border-radius:0}
#pro-apri .ico{width:17px; height:17px; flex:none}
body.dentro #pro-apri{display:inline-flex; align-items:center}
body.sez-profilo #pro-apri{
  background:var(--accent); color:var(--card); border-color:var(--accent);
}

/* La testata e' la stessa in tutte le schermate, contatore compreso:
   "la mia collezione: N" e' vero anche mentre guardi il catalogo, ed e'
   da li' che ci si torna. Sparisce solo cio' che parla dello scaffale:
   l'imbuto e il binario delle librerie. */
body.sez-catalogo #rail,       body.sez-profilo #rail,
body.sez-partite #rail, body.sez-partite #vista-apri,
body.sez-catalogo #vista-apri, body.sez-profilo #vista-apri{opacity:0 !important; pointer-events:none}

/* --- il catalogo ------------------------------------------------
   Sta sopra la scena (z2) ma sotto la testata (z3): la barra in alto
   resta la stessa, si cambia solo cosa c'e' sotto. */
/* z-index 3 e non 2: catalogo, partite e profilo stanno tutti a 2 e
   vengono DOPO nel markup, quindi a parita' di livello vincevano loro.
   Il contatore in testata c'e' in tutte le sezioni, ma premendolo
   l'elenco si apriva sotto la pagina che si stava guardando -- cioe'
   non si apriva. E' un modo di guardare la propria collezione, e la
   propria collezione la si guarda da dovunque si sia. */
#mia{
  position:fixed; inset:0; z-index:3; display:none;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  background:rgba(var(--bg-rgb),.975);
}
body.elenco #mia{display:block}
#mia-msg{margin:12px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-soft)}
/* Senza ricerca e senza filtro non c'e' nessun perche' da dire, e la
   riga e' vuota il piu' del tempo: un paragrafo vuoto non si vede ma il
   suo margine si'. */
#mia-msg:empty{display:none}
#mia-msg b{color:var(--ink); font-weight:500}
/* il contatore e' un pulsante: mentre l'elenco e' aperto, e' acceso */
body.elenco #conta{background:var(--accent); color:var(--card); border-color:var(--accent)}
body.elenco #conta b, body.elenco #conta span{color:var(--card)}
#conta{cursor:pointer; border-radius:var(--r-s);
}
/* con l'elenco davanti, scaffale e imbuto non servono */
body.elenco #rail{opacity:0 !important}
/* Sull'elenco l'imbuto RESTA: cercare e ordinare valgono li' come sugli
   scaffali, ed e' lo stesso pannello -- stessa ricerca, stesso ordine,
   stesso posto. Quello che sparisce e' la sola riga che parla del
   mobile in tre dimensioni, che sopra un elenco non vuol dire niente. */
/* `!important` perche' la riga che spegne l'imbuto nel catalogo e nel
   profilo ce l'ha: sopra l'elenco l'imbuto serve -- cercare e ordinare
   valgono li' come sugli scaffali -- e senza pareggiare il peso restava
   invisibile proprio nelle sezioni da cui adesso l'elenco si apre. */
body.elenco #vista-apri{opacity:1 !important; pointer-events:auto !important; z-index:7}
body.elenco #vista{z-index:7}
body.elenco #vista .dentro-only{display:none !important}

#catalogo{
  position:fixed; inset:0; z-index:2; display:none;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  background:rgba(var(--bg-rgb),.975);
}
body.sez-catalogo #catalogo{display:block}
.cat-in{max-width:900px; margin:0 auto; padding:96px clamp(16px,4vw,40px) 80px}
.cat-testa .eyebrow{margin:0 0 10px}
.cat-cerca{display:flex; gap:8px}
#cat-q{
  flex:1; min-width:0; font-family:var(--ff-text); font-size:14px; color:var(--ink);
  background:var(--card); border:1px dashed var(--line); padding:11px 13px;
}
#cat-q:focus{outline:none; border-color:var(--accent)}
.cat-cerca button{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; color:var(--card); background:var(--accent);
  border:0; padding:0 16px; border-radius:var(--r-s);
}
.cat-cerca button:hover{background:var(--ink); border-color:var(--ink)}
.cat-cerca button.chiaro{
  color:var(--ink-soft); background:var(--card); border-color:var(--line);
}
.cat-cerca button.chiaro:hover{color:var(--ink); background:var(--card); border-color:var(--accent)}
/* LA X DEL CATALOGO sta dentro il campo, come le altre due ricerche
   del sito, e ha preso il posto del tasto "tutti": erano due comandi
   per un gesto solo. Si mostra da sola quando c'e' qualcosa da
   cancellare -- `:placeholder-shown` invece di una classe sul body,
   perche' qui non c'e' nessuno stato da tenere in pari.

   Le misure sono scritte con l'id: `.cat-cerca button` da' fondo
   terracotta e imbottitura a QUALUNQUE bottone li' dentro, e questo e'
   un segno dentro un campo, non un comando accanto. */
.cat-cerca .cercawrap{flex:1; min-width:0; margin:0}
#cat-q{width:100%; padding-right:34px}
#cat-q-x{
  position:absolute; right:6px; display:none; cursor:pointer;
  color:var(--ink-soft); background:rgba(var(--ink-rgb),.06);
  border:0; padding:2px 6px; border-radius:var(--r-s);
  font-size:16px; line-height:1; font-weight:400;
}
#cat-q:not(:placeholder-shown) + #cat-q-x{display:block}
#cat-q-x:hover{color:var(--wood); background:rgba(var(--ink-rgb),.10)}

#cat-msg{margin:12px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-soft)}
#cat-msg.warn{color:var(--wood)}
#cat-msg b{color:var(--ink); font-weight:500}

/* Una riga per gioco: copertina a sinistra, scheda a destra. */
.righe{list-style:none; margin:22px 0 0; padding:0}
.righe > li{
  display:grid; grid-template-columns:88px 1fr auto; gap:18px; align-items:start;
  padding:18px 0; border-top:1px dashed var(--line);
}
.righe > li:last-child{border-bottom:1px dashed var(--line)}
/* Tolto il pulsante "scheda", ad aprire e' la riga: e allora la riga
   deve dire che si clicca. */
#cat-list > li{cursor:pointer}
#cat-list > li:hover .cat-dati h3{color:var(--accent)}
#cat-list > li .cat-azioni{cursor:default}
/* Il riquadro senza copertina e' una carta color sabbia, non un buco
   grigio: nel catalogo ce ne sono a centinaia di fila, e un grigio
   neutro ripetuto cento volte legge come un elenco rotto. La sabbia
   e' gia' nella tavolozza, e l'iniziale sopra le da' un contenuto. */
.cat-cop{
  width:88px; aspect-ratio:1/1; overflow:hidden;
  background:rgba(199,175,152,.30);
  display:flex; align-items:center; justify-content:center;
}
.cat-cop img{width:100%; height:100%; object-fit:cover; display:block}
.cat-cop .senza{
  font-family:var(--ff-display); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; font-size:30px; line-height:1;
  color:rgba(142,106,75,.60);
}
.cat-dati h3{
  margin:0; font-family:var(--ff-display); font-weight:900; text-transform:uppercase;
  font-size:17.3px; letter-spacing:.02em; line-height:1.1; color:var(--ink);
}
.cat-dati h3 .bollo{
  display:inline-block; margin-left:9px; vertical-align:3px;
  font-family:var(--ff-text); font-style:normal; font-size:9px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--card); background:var(--wood); padding:3px 6px;
}
.cat-chi{margin:6px 0 0; font-size:13px; color:var(--ink-soft)}
.cat-chi b{color:var(--ink); font-weight:500}
.cat-spec{list-style:none; display:flex; flex-wrap:wrap; gap:14px; margin:9px 0 0; padding:0}
.cat-spec li{font-size:11.5px; letter-spacing:.03em; text-transform:none; color:rgba(var(--ink-rgb),.74)}
.cat-spec b{
  font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:10.8px; letter-spacing:.02em;
  color:var(--ink); margin-right:5px;
}
/* IL CUORE DEL CATALOGO.

   Il "+" dice "ce l'ho", il cuore dice "lo vorrei": sono due gesti
   diversi e stanno vicini apposta, in ordine di impegno. Spento e'
   tenue -- se no venti cuori accesi sarebbero un elenco di cuori con
   dei giochi in mezzo -- e acceso e' PIENO, del colore di quello che si
   tocca. E' la stessa forma della stellina del preferito, che e'
   l'altro interruttore da un tocco su una riga che si scorre. */
.cat-azioni{display:flex; flex-direction:column; gap:7px; align-items:stretch}
.cat-azioni .desidero{color:rgba(var(--ink-rgb),.30); background:none}
.cat-azioni .desidero:hover{color:var(--accent); background:rgba(var(--accent-rgb),.10)}
.cat-azioni .desidero[aria-pressed="true"]{color:var(--accent)}
.cat-azioni button{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; white-space:nowrap;
  color:var(--ink-soft); background:var(--card); border:0; padding:8px 11px; border-radius:var(--r-s);
}
.cat-azioni button:hover{color:var(--ink); border-color:var(--accent)}
.cat-azioni .apri{color:var(--accent); border-color:rgba(var(--accent-rgb),.45)}
/* Il "+" e' un quadratino: e' un gesto solo, e su una riga che si scorre
   un pulsante di testo ruba larghezza al titolo. */
.cat-azioni .metti{
  align-self:flex-end; padding:8px; line-height:0;
  color:var(--accent); background:rgba(var(--accent-rgb),.10);
}
.cat-azioni .metti:hover{background:var(--accent); color:var(--su-accent)}
/* La spunta non e' un pulsante spento: e' la risposta a "ce l'ho gia'?".
   In grigio tenue non si leggeva, e scorrendo il catalogo era proprio
   l'unica cosa che si stava cercando di vedere. */
.cat-azioni .metti:disabled{
  background:rgba(var(--accent-rgb),.12); color:var(--accent); cursor:default; opacity:1;
}
.cat-azioni .metti:disabled:hover{background:rgba(var(--accent-rgb),.12); color:var(--accent)}
.cat-azioni button:disabled{cursor:default; opacity:.55}
.cat-azioni button:disabled:hover{color:var(--ink-soft); border-color:var(--line)}

/* La recensione si apre nella riga stessa: aprire una finestra sopra
   un elenco vuol dire perdere il posto in cui si era. */
.cat-rec{grid-column:1 / -1; margin:4px 0 0; padding:16px 0 2px;
  border-top:1px dashed var(--line); display:none}
.righe > li.aperta .cat-rec{display:block}
.cat-rec p{margin:0 0 12px; font-size:15px; color:rgba(var(--ink-rgb),.88); max-width:64ch}
.cat-rec .voto{
  font-family:var(--ff-display); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; font-size:28.8px; line-height:.9; color:var(--ink);
  margin:0 0 10px;
}
.cat-rec .voto i{font-style:normal; font-size:15px; color:var(--ink-soft)}
.cat-rec .vuoto{color:var(--ink-soft); font-size:13.5px}

.cat-fondo{margin:26px 0 0; text-align:center}
#cat-piu{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; color:var(--ink-soft);
  background:var(--card); border:0; padding:12px 26px; border-radius:var(--r-s);
}
#cat-piu:hover{color:var(--ink); border-color:var(--accent)}
#cat-piu:disabled{cursor:default; opacity:.5}
.cat-fondo.finito #cat-piu{display:none}

/* Il credito a BGG. Piena opacita' e misura leggibile: un'attribuzione
   sbiadita e' peggio di nessuna attribuzione, ed e' la stessa lezione
   delle etichette dei riquadri -- una cosa piccola non puo' anche
   essere tenue. Il riquadro attorno al link e' solo bersaglio per il
   dito: il logo ha gia' i suoi colori e non vuole nient'altro sotto. */
.bgg-credito{margin:36px 0 0; text-align:center}
.bgg-credito a{display:inline-block; padding:10px 14px; border-radius:var(--r-s)}
.bgg-credito img{display:block; width:132px; height:auto}
@media (pointer:coarse){ .bgg-credito a{padding:13px 16px} }

/* --- le sezioni in basso, su schermo stretto --------------------
   Dove arriva il pollice, e non in una testata gia' piena di
   strumenti. Niente icone inventate: il sito non ha un linguaggio di
   icone e aggiungerlo qui stonerebbe. L'unica figura e' la faccia del
   profilo, che e' gia' la figura di quella persona. */
#tabbar{
  display:none; position:fixed; z-index:6; left:0; right:0; bottom:0;
  background:var(--card); border-top:1px dashed var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
/* Ogni voce aveva il suo fondo grigio con gli angoli tondi: quattro
   pastiglie in fila, con gli spigoli della barra che spuntavano fra
   l'una e l'altra. La pastiglia deve dire QUAL E' quella scelta, quindi
   ce l'ha solo lei; le altre sono testo su carta, e basta. */
#tabbar button{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-family:var(--ff-text); font-size:13px; font-weight:700;
  letter-spacing:0; text-transform:none; cursor:pointer;
  color:var(--ink-soft); background:none; border:0;
  padding:9px 4px 10px; margin:4px 3px; border-radius:var(--r-s);
  transition:background-color .22s var(--ease), color .22s var(--ease);
}
#tabbar button b{font-size:15px; line-height:1; font-weight:400}
#tabbar button canvas{width:15px; height:15px; display:block}
#tabbar button.on{
  color:var(--accent); background:rgba(var(--accent-rgb),.12);
}

/* --- il profilo -------------------------------------------------- */
#profilo{
  position:fixed; inset:0; z-index:2; display:none;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  background:rgba(var(--bg-rgb),.975);
}
body.sez-profilo #profilo{display:block}
/* Stessa cassa delle altre due sezioni: da bordo a bordo, sopra la
   scena e sotto la testata. Partendo da `--y-alto` restava una striscia
   di stanza scoperta in cima, e il mobile si vedeva spuntare da sotto
   il titolo. Il respiro in alto lo mette `.cat-in`, come per il
   catalogo e il profilo. */
/* Il fondo lo prende dalla regola che vale per tutte e quattro le
   schermate, piu' sotto. Qui ne aveva uno suo, e per giunta a 0.975 di
   opacita': la libreria si vedeva in trasparenza dietro le partite --
   scatole e ripiani sotto il testo -- e la tinta era pure un'altra da
   quella delle sezioni vicine. Una schermata che copre la scena la
   copre e basta. */
#partite{
  position:fixed; inset:0; z-index:2; display:none;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
}
body.sez-partite #partite{display:block}
.pro-in{max-width:760px; margin:0 auto; padding:96px clamp(16px,4vw,40px) 80px}

.pro-testa{display:flex; gap:26px; align-items:flex-start}
.pro-faccia{flex:none; display:flex; flex-direction:column; align-items:center; gap:8px}
#pro-avatar{
  width:120px; height:120px; display:block;
  border:1px dashed var(--line); box-shadow:var(--shadow);
}
#pro-cambia, .pro-lin{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; color:var(--ink-soft);
  background:rgba(var(--ink-rgb),.06); border:0; border-bottom:1px dashed var(--line); padding:3px 0; border-radius:var(--r-s);
}
#pro-cambia:hover, .pro-lin:hover{color:var(--accent); border-color:var(--accent)}
.pro-fondo{display:flex; flex-wrap:wrap; gap:18px; margin:0}
.pro-lin.esci:hover{color:var(--wood); border-color:var(--wood)}
.pro-chi{min-width:0}
#pro-nick{
  margin:0; font-family:var(--ff-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(21.6px,3.6vw,31.7px); letter-spacing:-.03em; line-height:1; color:var(--ink);
}
.pro-mail{margin:6px 0 0; font-size:13px; color:var(--ink-soft); overflow-wrap:anywhere}
.pro-cod{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:16px 0 0}
.pro-cod span{font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft)}
.pro-cod b{
  font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:17.3px; letter-spacing:.02em; color:var(--ink);
  background:var(--card); border:1px dashed var(--line); padding:4px 12px 2px;
}
#pro-copia{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; color:var(--ink-soft);
  background:var(--card); border:0; padding:7px 11px; border-radius:var(--r-s);
}
#pro-copia:hover{color:var(--ink); border-color:var(--accent)}
.pro-nota{margin:9px 0 14px; font-size:11.5px; line-height:1.6; color:rgba(var(--ink-rgb),.5); max-width:44ch}

/* il laboratorio della faccia */
#pro-faccia-lab{
  margin:26px 0 0; padding:20px clamp(14px,2.4vw,22px);
  background:var(--card); border:1px dashed var(--line);
}
#pro-faccia-lab h3{margin:0 0 4px}
.pro-lab-nota{margin:0 0 16px; font-size:12.5px; color:var(--ink-soft)}
.pro-lab-riga{display:flex; align-items:center; gap:14px; margin:0 0 12px}
.pro-lab-riga>span:first-child{
  flex:none; width:56px; font-size:10px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-soft);
}
.pastiglie{display:flex; flex-wrap:wrap; gap:7px}
.pastiglie button{
  width:28px; height:28px; cursor:pointer; border:0; padding:0;
  font-family:var(--ff-display); font-weight:900; text-transform:uppercase; letter-spacing:.02em; font-size:10.8px; line-height:26px; color:var(--ink);
  background:var(--card); border-radius:var(--r-s);
}
.pastiglie button.on{outline:2px solid var(--accent); outline-offset:1px}
/* I DUE SEGNI DEL LABORATORIO: una spunta e una croce, non due frasi.
   Quadrati e della stessa misura, perche' sono due gesti pari e
   opposti; la croce e' rossa e armata mostra il pieno, come ogni altra
   cosa che butta via qualcosa qui dentro. */
.pro-lab-fondo .segno{
  width:42px; height:42px; padding:0; border-radius:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px dashed var(--line); color:var(--ink);
  transition:background-color .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), transform .1s var(--ease);
}
.pro-lab-fondo .segno .ico{width:20px; height:20px}
.pro-lab-fondo .segno:active{transform:translate(2px,2px)}
.pro-lab-fondo #lab-salva:hover{border-color:var(--accent); color:var(--accent)}
.pro-lab-fondo #lab-annulla{color:var(--rosso); border-color:rgba(var(--rosso-rgb),.7)}
.pro-lab-fondo #lab-annulla:hover{background:rgba(var(--rosso-rgb),.14)}
.pro-lab-fondo #lab-annulla.armed{
  background:var(--rosso); color:var(--su-rosso); border-color:transparent;
}

.pro-lab-fondo{display:flex; gap:10px; margin:18px 0 0}
#lab-salva, #ami-go, #nick-ok{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; color:var(--card);
  background:var(--accent); border:0; padding:11px 18px; border-radius:var(--r-s);
}
#lab-salva:hover, #ami-go:hover, #nick-ok:hover{background:var(--ink); border-color:var(--ink)}
#lab-annulla{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; color:var(--ink-soft);
  background:var(--card); border:0; padding:11px 18px; border-radius:var(--r-s);
}
#lab-annulla:hover{color:var(--ink); border-color:var(--accent)}

/* OGNI BLOCCO HA IL SUO FILO SOPRA, giocatori compresi: senza, quella
   sezione si attaccava a quella del suono e si leggeva come se ne
   facesse parte. */
.pro-blocco{margin:0; border-top:1px dashed var(--line)}
.pro-volume{padding-top:16px; border-top:1px dashed var(--line)}
/* Il wrap nel profilo: una riga sua, col filo sopra come gli altri
   blocchi, perche' non appartiene a nessuno di quelli attorno. */
/* IL WRAP SI DEVE VEDERE.

   Era una riga di testo in un pulsante come tutti gli altri: nel profilo
   `#profilo button:not(...)` -- che pesa (1,4,1) e nessun `.par-wrap` da
   solo batte -- gli toglieva il verde e gli metteva addosso il tratteggio
   dei comandi minori. Cosi' il riassunto di un anno di partite stava fra
   il volume e la lingua, con lo stesso peso di un interruttore.

   Le righe oblique sono lo scotch da cantiere: dicono "qui c'e' qualcosa"
   senza aggiungere una parola, e sono bande piene a stacco netto, non una
   sfumatura -- il fondo e' sempre lo stesso verde, scurito a fasce.
   Restano leggibili sotto la scritta proprio perche' lo stacco fra le due
   bande e' piccolo: e' tessitura, non chiaroscuro. */
.pro-wrap-riga{margin:0; padding:16px 0 0; border-top:1px dashed var(--line)}
/* DUE ID. `#profilo button` e' (1,0,1) e si prende carattere, peso,
   spaziatura e maiuscole di ogni pulsante del profilo: due classi non
   la battono, e il banner usciva in tondo minuscolo da 500. */
#profilo #par-wrap{
  width:100%; display:flex; align-items:center; justify-content:center;
  padding:26px 18px; border:0;
  font-family:var(--ff); font-weight:900; font-size:14px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--su-verde);
  background-color:var(--verde);
  background-image:repeating-linear-gradient(-45deg,
    rgba(0,0,0,0) 0 13px, rgba(0,0,0,.11) 13px 26px);
}
#profilo #par-wrap:hover{
  background-color:var(--verde);
  background-image:repeating-linear-gradient(-45deg,
    rgba(0,0,0,0) 0 13px, rgba(0,0,0,.18) 13px 26px);
}
.pro-blocco:first-of-type{margin-top:34px}
.pro-blocco h3{margin:0}
/* Il titolo E' il pulsante: tutta la riga si preme, non una freccetta
   di dodici pixel. */
.pro-tit{
  width:100%; display:flex; align-items:center; gap:12px; cursor:pointer;
  font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:18.7px;
  letter-spacing:-.03em; color:var(--ink); text-align:left;
  background:rgba(var(--ink-rgb),.06); border:0; padding:20px 0; border-radius:var(--r-s);
}
.pro-tit:hover{color:var(--accent)}
.pro-tit .quanti{
  font-family:var(--ff-text); font-size:11px; font-weight:500; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-soft);
}
.pro-tit::after{
  content:'+'; margin-left:auto; font-size:24px; line-height:1; color:var(--ink-soft);
}
.pro-tit[aria-expanded="true"]::after{content:'\2013'}
.pro-dentro{padding:0 0 24px}
.pro-dentro[hidden]{display:none}
.pro-msg{margin:0 0 14px; font-size:12.5px; line-height:1.6; color:var(--ink-soft)}
/* Vuoto vuol dire che non c'era niente da dire: senza questo resterebbe
   comunque il suo margine, cioe' un buco in mezzo a quello che separa. */
.pro-msg:empty{display:none}
#pro-tema-ora:empty{display:none}
.pro-msg.warn{color:var(--wood)}
.pro-msg b{color:var(--ink); font-weight:500}

.pro-gente{list-style:none; margin:0; padding:0}
.pro-gente:empty{display:none}
.pro-gente li{
  display:flex; align-items:center; gap:14px;
  padding:12px 0; border-bottom:1px dashed var(--line);
}
.pro-gente canvas{width:40px; height:40px; flex:none; border:1px dashed var(--line)}
.pro-gente .chi{flex:1; min-width:0}
.pro-gente .chi b{display:block; font-size:14px; font-weight:500; color:var(--ink)}
.pro-gente .chi span{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
.pro-gente .fa{display:flex; gap:7px; flex:none}
.pro-gente button{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; white-space:nowrap;
  color:var(--ink-soft); background:var(--card); border:0; padding:7px 10px; border-radius:var(--r-s);
}
.pro-gente button:hover{color:var(--ink); border-color:var(--accent)}
.pro-gente button.si{color:var(--accent); border-color:rgba(var(--accent-rgb),.5)}
.pro-gente button.no:hover{color:var(--wood); border-color:var(--wood)}

/* --- le partite --------------------------------------------------
   La stessa forma nel profilo e nel pannello della recensione: una
   riga per partita, il gioco e la data a sinistra, chi c'era sotto.
   Il vincitore in ocra, che nel resto del sito e' gia' il colore di
   cio' che conta. */
.giocate{list-style:none; margin:0; padding:0}
.giocate:empty{display:none}
.giocate li{
  padding:12px 0; border-bottom:1px dashed var(--line); cursor:pointer;
}
.giocate li:hover .gio-testa b{color:var(--accent)}
.gio-testa{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.gio-testa b{font-size:14px; font-weight:500; color:var(--ink)}
.gio-testa span{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
/* I DUE SEGNI DI UNA PARTITA, in fondo alla riga: tenui finche' non li
   cerchi, e il cestino armato si riempie di rosso come ogni altra cosa
   che butta via qualcosa. */
.gio-fa{
  position:absolute; right:8px; top:8px;
  display:flex; gap:2px;
}
.gio-fa .g-fa{
  width:30px; height:30px; padding:0; border:0; border-radius:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; color:var(--ink-soft); line-height:0;
  transition:color .18s var(--ease), background-color .18s var(--ease);
}
.gio-fa .g-fa .ico{width:15px; height:15px}
.gio-fa .g-fa:hover{color:var(--ink); background:rgba(var(--ink-rgb),.1)}
.gio-fa .g-via:hover{color:var(--rosso); background:rgba(var(--rosso-rgb),.12)}
.gio-fa .g-via.armed{background:var(--rosso); color:var(--su-rosso)}
.giocate > li{position:relative; padding-right:70px}

/* Il piu' sotto le partite di un giorno del calendario. */
/* Un giorno libero e' un pulsante ma non lo grida: resta tenue come
   prima, e si accende solo quando ci passi sopra. */
.cal-g.libero{background:none; border:0; cursor:pointer; font:inherit; color:inherit}
.cal-g.libero:hover{background:rgba(var(--ink-rgb),.08); color:var(--accent)}

/* Un piu' e basta: la frase la diceva gia' il pulsante sopra il
   calendario. Stessa misura del piu' dei gruppi -- un segno solo, in
   tutto il sito, per "aggiungine uno qui". */
.cal-quel-piu{margin:10px 0 0}
.cal-quel-piu button{
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  width:38px; height:38px; padding:0; border:1px dashed var(--line); border-radius:0;
  background:none; color:var(--ink);
}
.cal-quel-piu button:hover{border-color:var(--accent); color:var(--accent)}
.cal-quel-piu .ico{width:17px; height:17px}

/* Chi ha vinto e quanti erano, su una riga sola: non e' piu' un elenco
   di nomi che va a capo, quindi non serve il respiro fra le righe. */
.gio-chi{
  margin:5px 0 0; font-size:13px; color:var(--ink-soft); line-height:1.4;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.gio-chi i{font-style:normal}
/* L'omino col numero: il conto dei presenti. Sta accanto al vincitore
   ma non compete con lui -- inchiostro smorzato e icona piccola. */
.gio-quanti{display:inline-flex; align-items:center; gap:4px; color:var(--ink-soft)}
.gio-quanti .ico{width:14px; height:14px}
.gio-quanti b{font-weight:600}
.gio-chi .vince{
  color:var(--ink); font-weight:500;
  border-bottom:2px solid var(--accent); padding-bottom:1px;
}
/* Un gruppo per gioco: "a Root abbiamo giocato tre volte e vince
   sempre Giulia" dice quello che uno vuole sapere; un elenco di partite
   in ordine di data non dice niente. */
.gio-gruppo{margin:0 0 22px}
.gio-gruppo:last-child{margin-bottom:0}
/* Il titolo del gioco e' una tendina: chiusa dice quante partite e chi
   vince, che e' gia' la risposta alla domanda per cui uno apre questa
   sezione. Aperta ci sono le partite una per una. */
.gio-gioco{
  width:100%; display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px;
  margin:0; padding:10px 0; cursor:pointer; text-align:left;
  background:rgba(var(--ink-rgb),.06); border:0; border-bottom:1px dashed var(--line); border-radius:var(--r-s);
}
.gio-gioco:hover b{color:var(--accent)}
.gio-gioco::after{
  content:'+'; margin-left:auto; font-family:var(--ff-text); font-size:17px;
  line-height:1; color:var(--ink-soft);
}
.gio-gioco[aria-expanded="true"]::after{content:'\2013'}
.gio-gruppo .giocate[hidden]{display:none}
.gio-gruppo .giocate{padding-left:2px}
.gio-gioco b{
  font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:15.1px;
  letter-spacing:.02em; color:var(--ink);
}
.gio-gioco span{
  font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-soft);
}
.gio-gioco .vinto{color:var(--accent)}

/* nel pannello della recensione lo spazio e' meno e il fondo e' chiaro */
/* Qui dentro adesso c'e' solo il winrate, non piu' l'elenco delle
   ultime partite: un filo di separazione sopra una pastiglia che ha
   gia' il suo fondo tinto era una cornice attorno a una cornice. */
#p-giocate{margin:18px 0 0}
#p-giocate:empty{display:none}

/* --- l'editor della partita --------------------------------------- */
#mialayer{
  position:fixed; inset:0; z-index:9; display:flex; align-items:center;
  justify-content:center; padding:20px; background:rgba(90,74,50,.42);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s .3s;
}
#mialayer.on{opacity:1; visibility:visible; transition:opacity .3s ease, visibility 0s}
.mia-nota{margin:0 0 16px; font-size:12.5px; line-height:1.6; color:var(--ink-soft)}
.mia-nota b{color:var(--ink); font-weight:500}
#mia-salva{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; color:var(--card);
  background:var(--accent); border:0; padding:11px 18px; border-radius:var(--r-s);
}
#mia-salva:hover{background:var(--ink); border-color:var(--ink)}

#partitalayer{
  position:fixed; inset:0; z-index:9; display:flex; align-items:center;
  justify-content:center; padding:20px; background:rgba(90,74,50,.42);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s .3s;
}
#partitalayer.on{opacity:1; visibility:visible; transition:opacity .3s ease, visibility 0s}
.pa-form{margin-top:4px}
/* "GIOCATORI" NON E' UN'ETICHETTA DI CAMPO.

   Era un occhiello come gli altri -- dieci pixel, maiuscoletto, stessa
   taglia di "gioco", "data" e "durata" -- e quindi si leggeva come la
   quarta casella del modulo, non come il capo della parte di sotto. E
   stava anche attaccato al riquadro della data, che fa da bordo e da
   fine: due cose che si toccano si leggono come una.

   Qui diventa un capo di sezione: la mano dei titoli, la riga tratteggiata
   che attraversa -- lo stesso segno con cui finiscono i pannelli -- e
   l'aria sopra che dice che qui comincia un'altra cosa. */
p.pa-eye{
  margin:30px 0 10px; display:flex; align-items:center; gap:12px;
  font-family:var(--ff-display); font-weight:900; font-size:15px;
  letter-spacing:.02em; text-transform:uppercase; color:var(--ink);
}
p.pa-eye::after{
  content:''; flex:1; height:0; border-top:1px dashed var(--line);
}
.pa-chi{list-style:none; margin:0; padding:0}
.pa-chi:empty{display:none}
.pa-chi li{
  display:flex; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px dashed var(--line);
}
.pa-chi .nome{flex:1; min-width:0; font-size:14px; color:var(--ink); overflow-wrap:anywhere}
.pa-chi .pos{
  width:46px; flex:none; font-family:var(--ff-text); font-size:13px; text-align:center;
  color:var(--ink); background:var(--card); border:1px dashed var(--line); padding:6px 4px;
}
.pa-chi .pos:focus{outline:none; border-color:var(--accent)}
.pa-chi button{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; white-space:nowrap;
  color:var(--ink-soft); background:var(--card); border:0; padding:7px 9px; border-radius:var(--r-s);
}
.pa-chi button:hover{color:var(--ink); border-color:var(--accent)}
.pa-chi button.vince.on{background:var(--accent); color:var(--card); border-color:var(--accent)}
.pa-chi button.via:hover{color:var(--wood); border-color:var(--wood)}
.pa-foot #pa-salva{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; color:var(--card);
  background:var(--accent); border:0; padding:11px 18px; border-radius:var(--r-s);
}
.pa-foot #pa-salva:hover{background:var(--ink); border-color:var(--ink)}
.pa-foot #pa-togli{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; color:var(--wood);
  background:none; border:1px solid rgba(var(--accent-rgb),.5); padding:10px 14px; border-radius:var(--r-s);
}
.pa-foot #pa-togli:hover{background:var(--wood); color:var(--card); border-color:var(--wood)}
.pa-foot #pa-togli[hidden]{display:none}
/* I DUE TASTI DEVONO ESSERE ALTI UGUALE.

   Erano sfalsati, e non per l'allineamento: "salva" ha 11px di imbottitura
   sopra e sotto e "elimina" 10, piu' un bordo da 1px che conta come
   altezza solo su uno dei due. Tre pixel di differenza su due pulsanti
   affiancati si vedono tutti. Le imbottiture le decido qui una volta per
   entrambi, e `stretch` li tira alla stessa altezza comunque. */
.pa-foot #pa-salva, .pa-foot #pa-togli{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; line-height:1.2;
}

#p-segna{
  font-family:var(--ff-text); font-size:13px; font-weight:700;
  letter-spacing:0; text-transform:none; cursor:pointer;
  color:var(--ink-soft); background:rgba(var(--ink-rgb),.06); border:0; padding:9px 12px; border-radius:var(--r-s);
}
#p-segna:hover{color:var(--accent); border-color:var(--accent)}

.pro-aggiungi{display:flex; gap:8px; margin:18px 0 0}
#ami-q{
  flex:1; min-width:0; font-family:var(--ff-text); font-size:14px; color:var(--ink);
  background:var(--card); border:1px dashed var(--line); padding:11px 13px;
}
#ami-q:focus{outline:none; border-color:var(--accent)}

/* --- scelta del nick -------------------------------------------- */
#nick{
  position:fixed; inset:0; z-index:11; display:none; background:var(--bg);
  align-items:center; justify-content:center; padding:24px;
}
#nick.on{display:flex}
.nick-in{max-width:460px; width:100%; text-align:center}
.nick-in h2{
  margin:6px 0 10px; font-family:var(--ff-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(21.6px,4.32vw,31.7px); letter-spacing:-.03em; color:var(--ink);
}
.nick-nota{margin:0 0 22px; font-size:13px; line-height:1.6; color:var(--ink-soft)}
.nick-riga{display:flex; gap:8px}
#nick-q{
  flex:1; min-width:0; font-family:var(--ff-text); font-size:16px; color:var(--ink);
  background:var(--card); border:1px dashed var(--line); padding:13px 14px; text-align:center;
}
#nick-q:focus{outline:none; border-color:var(--accent)}
#nick-msg{margin:14px 0 0; min-height:18px; font-size:12.5px; color:var(--wood)}
#nick-msg.ok{color:var(--ink-soft)}

/* --- in casa di un amico ---------------------------------------- */

/* in casa d'altri si guarda e basta: via tutto quello che modifica */
body.visita #add,
body.visita #edit,
body.visita #del,
body.visita #p-segna{display:none !important}

/* L'elenco regge tre colonne fin quasi a 600 px: mandare i pulsanti a
   capo prima raddoppia l'altezza di ogni riga per niente. */
@media (max-width:600px){
  .righe > li{grid-template-columns:56px 1fr; gap:12px; padding:14px 0}
  .cat-cop{width:56px}
  .cat-dati h3{font-size:19px}
  .cat-azioni{grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; margin-top:2px}
  .cat-azioni button{padding:7px 9px}
}

/* --- arredare la stanza -----------------------------------------
   Il pannello sta in un angolo e non copre la scena: scegliere un
   colore guardando un'anteprima grande come un francobollo non e'
   scegliere, e' indovinare. */
/* --- L'IMBUTO E LA VISTA ------------------------------------------
   Sta in alto a sinistra sulla SCENA e non in testata: cercare e
   ordinare riguardano lo scaffale che si ha davanti, e una testata che
   vale per tutto il sito non e' il posto di un comando che vale per una
   schermata sola. In basso a sinistra c'e' gia' la stanza: due comandi
   nello stesso angolo si contenderebbero lo spazio. */
#vista-apri{
  position:fixed; z-index:5; left:clamp(12px,2.4vw,28px);
  top:calc(18px + clamp(52px,7vw,66px));
  line-height:0; cursor:pointer; color:var(--ink-soft);
  background:var(--card); border:1px dashed var(--line); padding:9px;
  opacity:0; transition:opacity .5s ease, color .2s ease, border-color .2s ease;
}
#vista-apri svg{width:18px; height:18px; display:block}
body.browse #vista-apri{opacity:1}
#vista-apri:hover{color:var(--accent); border-color:var(--accent)}
body.vista #vista-apri{color:var(--accent); border-color:var(--accent)}
/* Idem per l'imbuto: con un pannello alla volta (`chiudiPannelli`) non
   c'e' bisogno di nascondere l'altro pulsante, e nasconderlo faceva
   ballare la riga in alto ogni volta che si apriva qualcosa. */
body.review #vista-apri, body.mobili #vista-apri{display:none}

#vista{
  position:fixed; z-index:5; left:clamp(12px,2.4vw,28px);
  top:calc(18px + clamp(52px,7vw,66px));
  width:min(300px,88vw); padding:18px 18px 16px;
  background:var(--card); border:1px dashed var(--line); box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .28s ease, transform .28s ease, visibility 0s .28s;
}
body.vista #vista{opacity:1; visibility:visible; transform:none; transition-delay:0s}
#vista .eyebrow{margin:0 0 4px}
#vista-x{
  position:absolute; top:6px; right:8px; cursor:pointer; font-size:17px; line-height:1;
  color:var(--ink-soft); background:rgba(var(--ink-rgb),.06); border:0; padding:4px 6px; border-radius:var(--r-s);
}
#vista-x:hover{color:var(--wood)}
.vista-tit{
  margin:16px 0 0; font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-soft);
}
.vista-riga{
  display:block; width:100%; text-align:left; cursor:pointer; margin:8px 0 0;
  font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:11.5px; letter-spacing:.02em; color:var(--ink);
  background:rgba(var(--ink-rgb),.06); border:0; padding:9px 11px; border-radius:var(--r-s);
}
.vista-riga:hover{color:var(--accent); border-color:var(--accent)}

/* il "+" e' sceso qui dalla testata: si aggiunge un gioco da dove si
   guarda la collezione, che e' anche da dove ci si accorge che manca */
.aggiungi{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; color:var(--accent);
  background:none; border:1px dashed var(--accent); padding:6px 10px; border-radius:var(--r-s);
}
.aggiungi:hover{background:var(--accent); color:var(--card); border-style:solid}

/* IL PIU' DEL MOBILE DI SCORTA. Sta al centro, sopra alla scena, dove
   sta il mobile che si guarda: e' l'unico comando del sito che punta a
   una cosa DENTRO la scena invece che a un pannello, e in un angolo si
   scollegherebbe da quello a cui si riferisce.

   Non c'e' finche' non si e' davvero sul mobile vuoto. */
#lib-piu{
  position:fixed; z-index:4; left:50%; top:52%; transform:translate(-50%,-50%);
  width:56px; height:56px; padding:0; border-radius:0; cursor:pointer;
  display:none; align-items:center; justify-content:center;
  color:var(--ink); background:rgba(var(--card-rgb),.86);
  border:2px dashed var(--line);
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
#lib-piu .ico{width:26px; height:26px}
body.dentro.su-scorta #lib-piu{display:inline-flex}
body.review #lib-piu, body.elenco #lib-piu, body.arreda #lib-piu,
body.vista #lib-piu, body.visita #lib-piu{display:none !important}
#lib-piu:hover{border-color:var(--accent); color:var(--accent)}

/* La tendina dell'ordine: chiusa dice gia' quale ordine e' in uso, che
   e' l'unica cosa che serve sapere senza aprirla. */
.vista-ordine{margin:14px 0 0}
.vista-ordine > summary{
  display:flex; align-items:baseline; gap:8px; cursor:pointer; list-style:none;
  padding:9px 10px; border-radius:var(--r-s);
  font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-soft); background:rgba(var(--ink-rgb),.06);
}
.vista-ordine > summary::-webkit-details-marker{display:none}
.vista-ordine > summary b{
  margin-left:auto; font-family:var(--ff-text); font-weight:500;
  letter-spacing:.04em; text-transform:none; color:var(--ink);
}
.vista-ordine > summary:hover{color:var(--ink)}
.vista-ordine .vista-scelte{padding-top:6px}

#stanza-apri{
  position:fixed; z-index:5; left:clamp(12px,2.4vw,28px); bottom:24px;
  font-size:17px; line-height:1; cursor:pointer; color:var(--ink-soft);
  background:var(--card); border:0; padding:8px 11px 10px;
  opacity:0; transition:opacity .5s ease; border-radius:var(--r-s);
}
body.browse #stanza-apri{opacity:1}
#stanza-apri:hover{color:var(--accent); border-color:var(--accent)}
/* Solo nella libreria, e non in casa d'altri.

   `!important` non e' decorativo: `#stanza-apri` porta `dentro-only`, e
   quella regola e' gia' `display:inline-flex !important` -- senza, il
   pulsante dell'arredo restava acceso sopra l'elenco e sopra il
   catalogo, dove non arreda niente. */
/* `body.arreda` NON e' in questo elenco, ed e' il punto: il pulsante
   che apre un pannello resta dov'e' e si accende (riga piu' sotto,
   `body.arreda #stanza-apri`), come fa gia' l'imbuto. Sparendo lasciava
   un buco nell'angolo e non si capiva piu' cosa avesse aperto quel
   pannello -- ed era anche l'unico modo di richiuderlo con lo stesso
   gesto con cui lo si era aperto. */
body.sez-catalogo #stanza-apri, body.sez-profilo #stanza-apri,
body.sez-partite #stanza-apri,
body.visita #stanza-apri, body.elenco #stanza-apri,
body.review #stanza-apri{display:none !important}

#stanza{
  position:fixed; z-index:5; left:clamp(12px,2.4vw,28px); bottom:24px;
  width:min(310px,88vw); padding:18px 18px 14px;
  background:var(--card); border:1px dashed var(--line); box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .28s ease, transform .28s ease, visibility 0s .28s;
}
body.arreda #stanza{opacity:1; visibility:visible; transform:none; transition-delay:0s}
#stanza .eyebrow{margin:0 0 14px}
/* LA FRECCIA STA A SINISTRA, perche' una freccia che punta a sinistra
   messa a destra non si legge come "indietro": si legge come un errore.
   E l'occhiello si sposta per farle posto, invece di passarci sotto. */
#stanza-x{
  position:absolute; top:6px; left:8px; cursor:pointer; line-height:0;
  color:var(--ink-soft); background:rgba(var(--ink-rgb),.06); border:0;
  padding:5px 6px; border-radius:var(--r-s);
  transition:color .18s var(--ease), background-color .18s var(--ease);
}
#stanza-x .ico{width:17px; height:17px}
#stanza-x:hover{color:var(--ink); background:rgba(var(--ink-rgb),.12)}
#stanza-x:active{transform:translate(2px,2px)}
#stanza .eyebrow{padding-left:34px}
.st-riga{display:flex; align-items:center; gap:12px; margin:0 0 11px}
.st-riga.alto{align-items:flex-start}
.st-riga>span:first-child{
  flex:none; width:66px; font-size:10px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-soft);
}
.st-riga.luce b{
  flex:none; width:38px; text-align:right; font-family:var(--ff-display); font-weight:900; text-transform:uppercase; letter-spacing:.02em;
  font-size:10.1px; color:var(--ink);
}
#st-luce{flex:1; min-width:0; accent-color:var(--accent)}
.pastiglie.testo button{
  width:auto; height:auto; padding:5px 8px; font-family:var(--ff-text);
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); line-height:1.2;
}
.pastiglie.testo button.on{color:var(--ink)}
/* LA SPUNTA DEL PANNELLO LIBRERIA. Quieta finche' non c'e' niente da
   tenere, accesa quando c'e': e' l'unica cosa che dice "hai cambiato
   qualcosa e non l'hai ancora scritto". */
#st-salva{
  width:38px; height:38px; padding:0; border-radius:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px dashed var(--line); color:var(--ink-soft);
  transition:background-color .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), transform .1s var(--ease);
}
#st-salva .ico{width:18px; height:18px}
#st-salva:active{transform:translate(2px,2px)}
#st-salva.vivo{
  background:var(--accent); color:var(--su-accent); border-color:transparent;
}

.st-fondo{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:16px 0 0; padding-top:12px; border-top:1px dashed var(--line);
}
#st-msg{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(var(--ink-rgb),.45)}
#st-reset{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; color:var(--ink-soft);
  background:rgba(var(--ink-rgb),.06); border:0; padding:7px 10px; border-radius:var(--r-s);
}
#st-reset:hover{color:var(--wood); border-color:var(--wood)}

/* --- a che libreria siamo --------------------------------------
   Il binario e' orizzontale e sta in basso perche' orizzontale e' il
   movimento: le librerie sono in fila lungo la parete, non impilate. */
#rail{
  position:fixed; z-index:3; left:50%; bottom:24px;
  transform:translateX(-50%); display:flex; align-items:center; gap:12px;
  opacity:0; transition:opacity .5s ease; pointer-events:none;
}
body.browse #rail{opacity:1}
/* Con una libreria sola non c'e' niente da scorrere e il binario sparisce
   tutto: il nome del mobile e la porta per crearne un altro sono passati
   nell'imbuto, quindi qui non resta niente da tenere in piedi. */
body.ferma #rail{opacity:0 !important; pointer-events:none}
body.sez-catalogo #rail, body.sez-profilo #rail{opacity:0 !important}
#rail-txt{
  flex:none; font-family:var(--ff); font-weight:600; font-size:13px;
  letter-spacing:0; color:var(--ink-soft); font-variant-numeric:tabular-nums;
}

#mobili{
  position:fixed; z-index:5; left:50%; bottom:64px; transform:translate(-50%,10px);
  width:min(360px,92vw); padding:18px 18px 14px;
  background:var(--card); border:1px dashed var(--line); box-shadow:var(--shadow);
  opacity:0; visibility:hidden;
  transition:opacity .28s ease, transform .28s ease, visibility 0s .28s;
}
body.mobili #mobili{opacity:1; visibility:visible; transform:translate(-50%,0); transition-delay:0s}
#mobili .eyebrow{margin:0 0 12px}
#mobili-x{
  position:absolute; top:6px; right:8px; cursor:pointer; font-size:17px; line-height:1;
  color:var(--ink-soft); background:rgba(var(--ink-rgb),.06); border:0; padding:4px 6px; border-radius:var(--r-s);
}
#mobili-x:hover{color:var(--wood)}
#mobili-lista{list-style:none; margin:0; padding:0}
#mobili-lista li{display:flex; align-items:center; gap:8px; margin:0 0 8px}
#mobili-lista input{
  flex:1; min-width:0; font-family:var(--ff-text); font-size:13px; color:var(--ink);
  background:rgba(var(--ink-rgb),.05); border:0; padding:8px 10px; border-radius:var(--r-s);
}
#mobili-lista input:focus{outline:none; border-color:var(--accent)}
#mobili-lista .quanti{
  flex:none; width:26px; text-align:center; font-family:var(--ff-display); font-weight:900; text-transform:uppercase; letter-spacing:.02em;
  font-size:10.1px; color:var(--ink-soft);
}
#mobili-lista button{
  flex:none; cursor:pointer; font-size:15px; line-height:1; padding:5px 8px;
  color:var(--ink-soft); background:rgba(var(--ink-rgb),.06); border:0; border-radius:var(--r-s);
}
#mobili-lista button:hover{color:var(--wood); border-color:var(--wood)}
#mobili-lista button.ok{color:var(--accent); border-color:rgba(var(--accent-rgb),.45); font-size:13px}
#mobili-lista button.ok:hover{color:var(--card); background:var(--accent); border-color:var(--accent)}
#mobili-lista button.ok:disabled{opacity:.3; cursor:default}
#mobili-lista button.ok:disabled:hover{color:var(--ink-soft); background:none; border-color:var(--line)}
#mobili-msg{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(var(--ink-rgb),.45)}
#mobili-piu{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; color:var(--card);
  background:var(--accent); border:0; padding:8px 12px; border-radius:var(--r-s);
}
#mobili-piu:hover{background:var(--ink); border-color:var(--ink)}
/* La barra e' un comando, quindi va presa: due pixel di altezza non si
   centrano col dito, e l'area cliccabile viene da un padding con lo
   sfondo trasparente -- la riga sottile resta quella. */
.rail-bar{
  flex:1 1 auto; min-width:88px; max-width:min(260px,42vw);
  height:4px; border-radius:0; background:rgba(var(--ink-rgb),.14); position:relative;
  pointer-events:auto; cursor:pointer; touch-action:none;
  border-top:12px solid transparent; border-bottom:12px solid transparent;
  background-clip:padding-box;
}
.rail-bar:hover i, .rail-bar.presa i{background:var(--wood)}
.rail-bar:focus-visible{outline:1px solid var(--accent); outline-offset:6px}
.rail-bar i{position:absolute; top:0; height:4px; border-radius:0; background:var(--accent);
  transition:transform .25s ease, width .25s ease}


/* --- pannello della recensione -------------------------------- */
/* incernierato a sinistra: si apre come l'anta di un armadio */
/* La scheda ESCE DALLA SCATOLA.

   Prima si apriva come un'anta incernierata sul bordo dello schermo:
   un bel gesto, ma partiva da un punto che con il gioco non c'entrava
   niente -- si apriva una scatola a sinistra e la scheda spuntava da
   destra. Adesso parte piccola dal punto in cui la scatola sta davvero
   sullo schermo e cresce fino al suo posto: `--da-x` e `--da-y` sono lo
   scarto fra il centro del pannello e la scatola, e li scrive
   `ancoraPannello()` proiettando la posizione 3D con la camera.

   A zero valgono zero, quindi senza JS -- o senza WebGL -- la scheda
   fa comunque una comparsa sensata dal proprio centro. */
#panel{
  --da-x:0px; --da-y:0px;
  position:fixed; z-index:4; top:50%; right:clamp(16px,3vw,48px);
  width:min(430px,40vw); max-height:76vh; margin-top:-30vh;
  transform-origin:center center;
  transform:perspective(1400px) translate(var(--da-x), var(--da-y)) scale(.26) rotateY(-34deg);
  opacity:0; visibility:hidden;
  /* `var(--card)` e' OPACO: dietro non passa niente, e la sfocatura che
     stava qui era il compositore che sfocava una cosa che nessuno
     avrebbe mai visto. Stessa storia in `#cella`. */
  background:var(--card); border:1px dashed var(--line);
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  transition:transform .58s cubic-bezier(.22,.9,.26,1), opacity .26s ease, visibility 0s .58s;
}
body.review #panel{
  transform:perspective(1400px) translate(0px,0px) scale(1) rotateY(0deg);
  opacity:1; visibility:visible;
  transition:transform .58s cubic-bezier(.22,.9,.26,1), opacity .22s ease, visibility 0s;
}
#panel::before{ /* il filo d'ottone lungo la cerniera */
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); opacity:.85;
}
.pan-scroll{overflow:auto; padding:28px clamp(20px,2.4vw,30px); -webkit-overflow-scrolling:touch}

/* SU DESKTOP LA SCHEDA ERA UN FRANCOBOLLO ANCHE LEI.

   Era `min(430px, 40vw)`, e su qualunque monitor sopra i 1075 px il
   tetto scattava sempre: la scheda restava larga 430 px con dietro
   millequattrocento pixel di finestra -- meno di un terzo dello
   schermo, la recensione a quaranta caratteri per riga, e mezza stanza
   vuota accanto. Il tetto sale a 600; sotto, comanda ancora il 40%
   della finestra, che e' la misura che tiene separati la scatola
   aperta (che `focusPose` mette a sinistra) e il pannello.

   E VERTICALMENTE SI CENTRA NELLA FASCIA LIBERA. Prima il bordo di
   sopra era inchiodato a `top:50%` meno trenta unita' di altezza,
   cioe' al 20% dello schermo qualunque cosa ci fosse dentro: una
   recensione di due righe lasciava trecento pixel di vuoto sotto e
   niente sopra. Con `top` e `bottom` messi tutti e due,
   `height:max-content` e i margini automatici, la scheda resta alta
   quanto il suo contenuto e sta in mezzo fra la testata e il fondo --
   corta o lunga che sia.

   `max-content` e non `auto`: con top e bottom fissati, un'altezza
   automatica viene STIRATA per riempire la fascia, e anche una scheda
   di tre righe diventerebbe alta quanto lo schermo. */
@media (min-width:881px){
  #panel{
    width:min(600px,40vw);
    /* 104 e non 96: la testata non e' alta uguale dappertutto -- il
       marchio va a capo sugli schermi stretti e passa da 56 a 74 px --
       e appena sopra il salto a 880 la scheda le finiva a ventidue
       pixel. */
    top:104px; bottom:26px; margin-top:0;
    height:max-content; max-height:calc(100vh - 130px);
    margin-block:auto;
  }
  /* Piu' larga la scheda, piu' aria attorno al testo: se no le righe
     arrivano da un bordo all'altro con il margine di un telefono. */
  .pan-scroll{padding:32px clamp(24px,2.6vw,38px)}
}
.pan-scroll>*{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease}
body.review .pan-scroll>*{opacity:1; transform:none}
body.review .pan-scroll>*:nth-child(1){transition-delay:.30s}
body.review .pan-scroll>*:nth-child(2){transition-delay:.36s}
body.review .pan-scroll>*:nth-child(3){transition-delay:.42s}
body.review .pan-scroll>*:nth-child(4){transition-delay:.48s}
body.review .pan-scroll>*:nth-child(5){transition-delay:.54s}
body.review .pan-scroll>*:nth-child(6){transition-delay:.60s}
body.review .pan-scroll>*:nth-child(7){transition-delay:.66s}

.eyebrow{margin:0 0 6px; font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--wood); font-weight:700}
#p-title{margin:0; font-family:var(--ff-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(28.8px,3.31vw,40.3px); line-height:.9; letter-spacing:-.03em}
.byline{margin:10px 0 20px; font-size:13px; color:var(--ink-soft)}
.byline b{color:var(--ink); font-weight:500}
.credit{display:inline-block; margin-top:4px; font-size:11px;
  letter-spacing:.04em; color:rgba(var(--ink-rgb),.48)}

.specs{list-style:none; margin:0 0 20px; padding:0; gap:1px;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--line); border:1px dashed var(--line)}
/* Le etichette erano a NOVE pixel, maiuscole e spaziate, nell'oliva
   tenue: sul grigio del riquadro fanno poco piu' di tre a uno, cioe'
   sotto la soglia per un testo cosi' piccolo -- e infatti "giocatori" e
   "minuti" non si leggevano. Adesso sono piu' grandi, piu' scure e meno
   spaziate: restano etichette, ma si leggono. */
.specs li{background:rgba(var(--ink-rgb),.05); padding:10px 6px; text-align:center}
.specs b{display:block; font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:15.1px; letter-spacing:.02em;
  color:var(--accent); line-height:1.2}
.specs span{
  display:block; margin-top:2px; font-size:10.5px; letter-spacing:.03em;
  text-transform:none; color:rgba(var(--ink-rgb),.74);
}

.score{display:flex; align-items:baseline; gap:10px; margin:0 0 20px; padding-bottom:20px;
  border-bottom:1px dashed var(--line)}
/* `hidden` DEVE VINCERE SU `display:flex`.

   Il voto proprio nasce `hidden` e si accende solo se c'e' -- un
   trattino accanto a un numero vero si legge come un guasto -- ma
   `[hidden]{display:none}` e' una regola del BROWSER, senza classi, e
   `.score{display:flex}` la batte: il blocco restava li' con la cifra
   vuota e la sua etichetta. Su una colonna era una riga storta; da
   quando i due voti stanno affiancati e' anche un filo tratteggiato
   che non separa niente. */
.score[hidden]{display:none}
.score b{font-family:var(--ff-display); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; font-size:40.3px; line-height:.8; color:var(--ink)}
.score i{font-style:normal; font-size:19px; color:var(--ink-soft)}
.score small{margin-left:auto; text-align:right; line-height:1.5;
  font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft)}

/* Niente capolettera. Era un `::first-letter` in float, alto trentaquattro
   pixel: prendeva l'inizio della recensione -- cioe' il punto in cui si
   comincia a leggere -- e lo spezzava in due, con le prime righe che
   giravano attorno a una lettera grande di un altro colore. Su un testo
   di poche righe si mangiava mezzo capoverso. Una recensione e' un testo
   da leggere, non un frontespizio. */
.body p{margin:0 0 14px; font-size:15px; color:rgba(var(--ink-rgb),.88)}
.body p:first-child{margin-top:2px}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0}
.tags span{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
  border:1px dashed var(--line); padding:5px 9px}
.bgg{display:inline-block; margin-top:20px; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); text-decoration:none;
  border-bottom:1px dashed var(--line); padding-bottom:3px}
.bgg:hover{border-color:var(--accent)}

#close{
  position:absolute; z-index:2; top:-1px; right:-1px;
  background:var(--accent); color:var(--card); border:0; cursor:pointer;
  font-family:var(--ff-text); font-weight:700; font-size:13px;
  letter-spacing:0; text-transform:none; padding:9px 13px; border-radius:var(--r-s);
}
#close:hover{background:var(--ink)}

@media (max-width:880px){
  /* Su schermo stretto il pannello e' un cassetto che sale dal basso, e
     deve fermarsi SOPRA la barra delle sezioni: a filo del fondo, i
     suoi ultimi cinquanta pixel -- cioe' tutti i pulsanti -- finivano
     sotto la barra, che sta piu' in alto nello z. E' questo il vero
     motivo per cui i tasti in fondo non si vedevano. */
  #panel{
    top:auto; bottom:calc(50px + env(safe-area-inset-bottom));
    right:0; left:0; width:auto; margin:0; max-height:60vh;
    transform-origin:bottom center;
    transform:translate(var(--da-x), var(--da-y)) scale(.3);
    border-left:0; border-right:0; border-bottom:0;
  }
  body.review #panel{transform:translate(0px,0px) scale(1)}
  #panel::before{left:0; right:0; bottom:auto; width:auto; height:2px}
  .pan-scroll{padding-top:36px}
  #close{top:0; right:0}
  .specs{grid-template-columns:repeat(2,1fr)}
  /* il suggerimento su una riga sola: a capo tre volte era illeggibile,
     e su schermo stretto il testo lungo non ci sta comunque */
  .tool{padding:7px 9px; letter-spacing:.08em}
  /* la testata stretta non deve piu' ospitare la ricerca: sta
     nell'imbuto, e il contatore puo' restare per esteso */
  #conta span{font-size:10px}
  /* le sezioni passano dalla testata alla barra in basso */
  #sezioni{display:none}
  #tabbar{display:flex}

  /* Chi sei e come si esce se ne vanno dalla testata: adesso hanno una
     sezione loro, e a 390 px il marchio andava a capo su quattro righe
     per fare posto a due etichette. */
  #mode, #esci{display:none !important}
  .brand b{white-space:nowrap}
  /* il contenuto non deve finire sotto la barra */
  .cat-in, .pro-in{padding-bottom:104px}
  #rail{bottom:calc(58px + env(safe-area-inset-bottom))}

  #stanza-apri{bottom:calc(66px + env(safe-area-inset-bottom))}
  #stanza{
    left:0; right:0; bottom:calc(50px + env(safe-area-inset-bottom));
    width:auto; border-left:0; border-right:0; border-bottom:0;
  }

  .pro-testa{gap:18px}
  #pro-avatar{width:92px; height:92px}
  .pro-cod b{font-size:20px; letter-spacing:.16em}

  .cat-in{padding-top:88px}
  .cat-rec p{font-size:14px}
  #rail{gap:5px}
  .rail-bar{width:min(140px,42vw)}
  #rail-txt{font-size:11px}
  .add-form{grid-template-columns:1fr}
}

/* Il piede non scorre col testo: sta appiccicato in fondo al pannello.
   Con una recensione lunga finiva sotto il bordo e i pulsanti non si
   vedevano affatto -- e non c'era niente che dicesse di scorrere. */
.pan-foot{
  flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0; padding:12px clamp(20px,2.4vw,30px);
  border-top:1px dashed var(--line); background:rgba(var(--card-rgb),.7);
  opacity:0; transition:opacity .4s ease .5s;
}
body.review .pan-foot{opacity:1}
.pan-link{margin:20px 0 0}
/* con quattro pulsanti in fila le etichette lunghe non ci stanno */
.pan-foot button{font-size:10px; letter-spacing:.1em; padding:9px 10px}
/* Il ritorno a capo del piede: largo quanto la riga, alto zero. */
.pan-acapo{flex-basis:100%; height:0; margin:0}
/* Quello che butta via qualcosa sta in fondo a destra, come in ogni
   altro piede di pannello del sito. */
#del{margin-left:auto}
#p-mia{
  font-family:var(--ff-text); font-weight:700; text-transform:none;
  cursor:pointer; color:var(--card); background:var(--accent); border:0; border-radius:var(--r-s);
}
#p-mia:hover{background:var(--ink); border-color:var(--ink)}
body.visita #p-mia{display:none !important}
/* togliere dallo scaffale e' reversibile e non chiede conferma:
   eliminare no, e infatti resta rosso e in due tempi */
#p-fuori{
  font-family:var(--ff-text); font-size:13px; font-weight:700;
  letter-spacing:0; text-transform:none; cursor:pointer;
  color:var(--ink-soft); background:rgba(var(--ink-rgb),.06); border:0; padding:9px 10px; border-radius:var(--r-s);
}
#p-fuori:hover{color:var(--ink); border-color:var(--accent)}
body.visita #p-fuori{display:none !important}
#del{
  font-family:var(--ff-text); font-size:13px; font-weight:700;
  letter-spacing:0; text-transform:none; cursor:pointer;
  color:var(--wood); background:none; border:1px solid rgba(var(--accent-rgb),.5);
  padding:7px 11px; align-items:center; gap:6px; border-radius:var(--r-s);
}
#del:hover{background:var(--wood); color:var(--card); border-color:var(--wood)}
#edit{
  font-family:var(--ff-text); font-size:13px; font-weight:700;
  letter-spacing:0; text-transform:none; cursor:pointer;
  color:var(--accent); background:rgba(var(--ink-rgb),.06); border:0;
  padding:7px 11px; align-items:center; gap:6px; border-radius:var(--r-s);
}
#edit:hover{background:var(--accent); color:var(--card); border-color:var(--accent)}
/* armato: il secondo clic esegue davvero */
#del.armed, .add-foot button.armed{background:var(--wood); color:var(--card); border-color:var(--wood)}
#del.armed{animation:pulse 1s steps(2) infinite}
@keyframes pulse{0%{opacity:1}50%{opacity:.62}100%{opacity:1}}

/* --- schermata iniziale: chi sei ------------------------------- */
#gate{
  position:fixed; inset:0; z-index:11; background:var(--bg);
  display:flex; align-items:center; justify-content:center; padding:24px;
  transition:opacity .5s ease, visibility 0s .5s;
}
#gate.gone{opacity:0; visibility:hidden; pointer-events:none}
.gate-in{max-width:560px; text-align:center}
.gate-logo{
  display:block; font-family:var(--ff-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(24.5px,4.32vw,37.4px); letter-spacing:-.03em; line-height:1;
}
.gate-logo i{color:var(--accent); font-style:normal}
.gate-q{margin:14px 0 30px; font-size:12px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-soft)}
.gate-pick{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.gate-pick.uno{grid-template-columns:1fr; max-width:420px; margin:0 auto}
@media (max-width:560px){ .gate-pick{grid-template-columns:1fr} }
.gate-pick button{
  font-family:var(--ff-text); text-align:left; cursor:pointer;
  background:rgba(var(--card-rgb),.6); border:0;
  padding:20px 18px; color:var(--ink-soft);
  transition:border-color .2s ease, background .2s ease, transform .2s ease; border-radius:var(--r-s);
}
.gate-pick button:hover{border-color:var(--accent); background:rgba(var(--accent-rgb),.08); transform:translateY(-2px)}
.gate-pick button b{
  display:block; font-family:var(--ff-display); font-weight:900; text-transform:uppercase;
  font-size:21.6px; letter-spacing:-.03em; color:var(--ink); margin-bottom:6px;
}
/* La pastiglia sta SOPRA il titolo, su una riga sua. Dentro al titolo
   il `float` la faceva scendere in mezzo alla descrizione; accanto al
   titolo gli rubava la larghezza e "Sign in with Google" andava a capo.
   Sopra non toglie spazio a niente ed e' la prima cosa che si legge,
   che e' esattamente il suo mestiere. */
.gate-pick button{display:flex; flex-direction:column; align-items:flex-start}
.ultima{
  display:none; order:-1; margin-bottom:5px;
  font-family:var(--ff-text); font-size:9px; font-style:normal;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
}
.gate-pick button.last .ultima{display:block}
.gate-pick button span{font-size:13px; line-height:1.5}
.gate-note{margin:28px 0 0; font-size:11px; line-height:1.7;
  color:rgba(var(--ink-rgb),.44)}

/* --- admin: cerca e aggiungi ----------------------------------- */
#addlayer{
  position:fixed; inset:0; z-index:8; background:rgba(90,74,50,.42);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s .3s;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
#addlayer.on{opacity:1; visibility:visible; transition:opacity .3s ease, visibility 0s}
.add-card{
  position:relative; width:min(560px,100%); max-height:86vh;
  overflow-y:auto; overflow-x:hidden;   /* niente barra orizzontale */
  background:var(--card); border:1px dashed var(--line); box-shadow:var(--shadow);
  padding:28px clamp(20px,3vw,32px) 24px;
}
/* un titolo lungo senza spazi non deve allargare la scheda */
.add-card, .add-msg, #add-res button{overflow-wrap:anywhere}
#add-x, #pa-chiudi{
  position:absolute; top:-1px; right:-1px; background:var(--accent); color:var(--card);
  border:0; cursor:pointer; font-family:var(--ff-text); font-weight:700;
  font-size:13px; letter-spacing:0; text-transform:none; padding:9px 13px; border-radius:var(--r-s);
}
#add-x:hover, #pa-chiudi:hover{background:var(--ink)}
.add-card h2{margin:0 0 18px; font-family:var(--ff-display); font-weight:900; text-transform:uppercase;
  font-size:28.8px; line-height:.95; letter-spacing:-.03em}
.add-search{display:flex; gap:8px}
.add-search input{
  flex:1; min-width:0; font-family:var(--ff-text); font-size:15px; color:var(--ink);
  background:rgba(var(--ink-rgb),.04); border:0; padding:11px 13px; border-radius:var(--r-s);
}
.add-search input:focus{outline:none; border-color:var(--accent)}
.add-search button, .add-form button{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; background:var(--accent); color:var(--card);
  border:0; padding:11px 16px; border-radius:var(--r-s);
}
.add-search button:hover, .add-form button:hover{background:var(--ink)}
.add-msg{margin:12px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-soft)}
.add-msg:empty{margin:0}
.add-msg.warn{color:var(--wood)}
.add-msg code{font-family:var(--ff-mono); font-size:12px;
  background:rgba(var(--ink-rgb),.07); padding:2px 5px; color:var(--ink)}

#add-res{list-style:none; margin:14px 0 0; padding:0; max-height:38vh; overflow:auto}
#add-res li{border-bottom:1px solid rgba(var(--ink-rgb),.12)}
#add-res button{
  width:100%; display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-family:var(--ff-text); text-align:left; cursor:pointer;
  background:rgba(var(--ink-rgb),.06); border:0; color:var(--ink-soft); padding:11px 4px; border-radius:var(--r-s);
}
#add-res button:hover{background:rgba(var(--accent-rgb),.08); color:var(--ink)}
#add-res button b{font-weight:500; font-size:15px; color:var(--ink)}
#add-res button span{font-size:12px; flex:none}
#add-res button:disabled{opacity:.6; cursor:default}

/* in correzione non si cerca niente: si sistema quello che si ha gia' */
#addlayer.correzione .add-search,
#addlayer.correzione #add-res,
#addlayer.correzione #add-man summary{display:none}
#addlayer.correzione #add-man{border-top:0; padding-top:0}

#add-man{margin:18px 0 0; border-top:1px dashed var(--line); padding-top:14px}
#add-man summary{cursor:pointer; font-size:13px; letter-spacing:0;
  text-transform:none; color:var(--ink-soft)}
#add-man summary:hover{color:var(--accent)}
.add-form{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px}
/* min-width:0, se no le celle della griglia prendono la larghezza
   naturale dell'input e la scheda esce di lato */
.add-form label{display:flex; flex-direction:column; gap:5px; min-width:0; font-size:10px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft)}
.add-form input{
  min-width:0; width:100%;
  font-family:var(--ff-text); font-size:14px; color:var(--ink);
  background:rgba(var(--ink-rgb),.04); border:0; padding:8px 10px; border-radius:var(--r-s);
}
.add-form input:focus{outline:none; border-color:var(--accent)}
/* IL FIGLIO DIRETTO, non un pulsante qualunque.

   Questa regola veste il tasto che chiude il modulo -- "salva", in
   fondo, largo quanto la griglia -- e lo prendeva per tipo invece che
   per posto. Da quando il campo della data e' un `<button>` dentro la
   sua etichetta, prendeva anche lui: `grid-column` li' non vuol dire
   niente, ma quei sei pixel di margine sopra lo spingevano giu' e la
   casella della data si leggeva sei pixel piu' bassa di quella accanto.

   Il `>` dice quello che la regola ha sempre inteso: il pulsante della
   griglia, non ogni pulsante che ci finisce dentro. */
.add-form > button{grid-column:1/-1; margin-top:6px}
.add-form label.wide{grid-column:1/-1}
.add-form textarea{
  min-width:0; width:100%; resize:vertical; min-height:120px;
  font-family:var(--ff-text); font-size:14px; line-height:1.6; color:var(--ink);
  background:rgba(var(--ink-rgb),.04); border:0; padding:10px; border-radius:var(--r-s);
}
.add-form textarea:focus{outline:none; border-color:var(--accent)}
.add-form textarea::placeholder{color:rgba(var(--ink-rgb),.34)}
.add-form input[type=file]{
  padding:7px 9px; font-size:12px; cursor:pointer; color:var(--ink-soft); border-radius:var(--r-s);
}
.add-form input[type=file]::file-selector-button{
  font-family:var(--ff); font-size:11.5px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; margin-right:10px;
  background:rgba(var(--accent-rgb),.12); color:var(--accent);
  border:0; padding:6px 10px; border-radius:var(--r-s);
}
.add-form input[type=file]::file-selector-button:hover{background:var(--accent); color:var(--card)}
#m-file-nota{font-size:10px; letter-spacing:0; text-transform:none; line-height:1.5;
  color:rgba(var(--ink-rgb),.46)}
.add-foot{margin:18px 0 0; padding-top:14px; border-top:1px dashed var(--line);
  font-size:11px; color:rgba(var(--ink-rgb),.5); display:flex; flex-wrap:wrap;
  align-items:center; gap:10px}
.add-foot button{
  font-family:var(--ff-text); font-size:11px; letter-spacing:.1em; cursor:pointer;
  background:rgba(var(--ink-rgb),.06); border:0; color:var(--ink-soft); padding:6px 10px; border-radius:var(--r-s);
}
.add-foot button:hover{border-color:var(--accent); color:var(--accent)}

/* --- messaggino di conferma ------------------------------------ */
#flash{
  position:fixed; z-index:10; left:50%; bottom:26px; transform:translate(-50%,14px);
  background:var(--card); border:1px dashed var(--line); border-left:2px solid var(--accent);
  padding:11px 16px; font-size:13px; color:var(--ink);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, visibility 0s .3s;
}
#flash.on{opacity:1; visibility:visible; transform:translate(-50%,0); transition:opacity .3s ease, transform .3s ease, visibility 0s}

/* --- caricamento: il dado che gira ---------------------------- */
/* La prima schermata che si vede. Era un fondo piatto con un dado in
   mezzo; adesso la luce viene da sopra come nella stanza che si sta per
   aprire, cosi' il caricamento e' gia' il sito e non una sala d'attesa. */
/* IL DADO CRESCE CON LO SCHERMO.

   Il dado e' costruito in pixel fissi -- 88 di lato, gli spigoli a
   55.86 dal centro, gli angoli a 65.82 -- e quei numeri non si toccano:
   sono figli l'uno dell'altro e rifarli vorrebbe dire rifare il conto.
   Quello che si puo' fare e' guardarlo da piu' vicino, ed e' `--dk`,
   che scala l'intera scenetta, ombra compresa.

   Serve davvero: su un monitor da 1440 il dado era un francobollo in
   mezzo a mezzo metro di sfondo, e la prima schermata del sito si
   leggeva come una pagina che non ha finito di caricare invece che
   come l'ingresso di una stanza. Su un telefono resta com'era, che li'
   di spazio non ce n'e' da regalare.

   Il margine compensa: `transform` scala quello che si vede ma non
   l'ingombro nel flusso, quindi senza, il dado ingrandito finirebbe
   addosso al titolo. Meta' di 130 per quanto e' cresciuto. */
#load{
  --dk:1;
  position:fixed; inset:0; z-index:9;
  background:
    radial-gradient(120% 78% at 50% 8%, rgba(var(--ink-rgb),.10) 0%, rgba(var(--ink-rgb),0) 62%),
    repeating-linear-gradient(135deg, rgba(var(--ink-rgb),.035) 0 12px, rgba(var(--ink-rgb),0) 12px 24px),
    var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
  transition:opacity .7s ease, transform .7s var(--ease), visibility 0s .7s;
}
@media (min-width:880px){ #load{--dk:1.3; gap:38px} }
@media (min-width:1400px){ #load{--dk:1.55; gap:44px} }

/* Il marchio di BGG sotto la barra. Cresce con `--dk` come tutto il
   resto della schermata, ma resta piu' STRETTO della barra: e' un
   credito, non il terzo protagonista dopo il dado e il nome del sito.
   Piena opacita' lo stesso -- un'attribuzione sbiadita e' peggio di
   nessuna attribuzione. */
.load-bgg{
  display:block; width:calc(104px * var(--dk,1)); height:auto;
  margin-top:calc(-8px * var(--dk,1));
}

/* USCENDO, NON SPARISCE: SI FA DA PARTE.

   Era una dissolvenza e basta, e una dissolvenza secca su tutto lo
   schermo si legge come uno stacco. Con un filo di ingrandimento la
   schermata si allontana e lascia vedere la stanza che c'e' dietro --
   che e' esattamente quello che sta succedendo. */
body.ready #load{
  opacity:0; visibility:hidden; pointer-events:none;
  transform:scale(1.06);
}
/* IL PALCO NON E' PIU' UNO SPAZIO 3D.

   Qui c'era un dado costruito in CSS: una prospettiva, ventisei pezzi
   -- sei facce, dodici spigoli, otto angoli -- un rotolamento a
   rimbalzi e un'ombra a terra sincronizzata sulla botta.
   Quattrocentocinquanta righe di foglio che non pesavano niente da
   scaricare. Adesso il palco tiene un'immagine, e di tutto quello non
   serve piu' niente: la resa 3D porta dentro la sua luce e la sua
   ombra gia' fatte.

   IL PALCO STA DENTRO AL NATIVO, adesso. Con l'animazione a 402x379
   non ci stava: i 320 di base diventano 496 sul salto piu' largo, e
   quello che conta non sono i pixel CSS ma quelli FISICI -- su un
   telefono a densita' 3 sono 960, su un desktop a densita' 2 sono 992.
   Cioe' la sorgente veniva ingrandita due volte e mezzo, e la
   morbidezza che se ne vedeva era vera.

   Con la sorgente a 800x760 lo stesso palco chiede un ingrandimento
   fra 1,0 e 1,2: praticamente nativo ovunque. La misura non e'
   cambiata, e' cambiato quanto regge.

   Dentro il telaio il meeple occupa il 55% in larghezza, e quel vuoto
   attorno non e' spreco: nei fotogrammi in cui salta ci va a stare, e
   ritagliarlo gli taglierebbe la testa a meta' volo. Col palco a 320 il
   soggetto legge a centosettantasei pixel, dove il vecchio dado ne
   faceva centodieci. */
.stage{
  width:320px; height:304px; position:relative;    /* il rapporto del file: 800x760 */
  transform:scale(var(--dk,1));
  /* quello che il `transform` non prende in carico: l'ingombro */
  margin:calc((var(--dk,1) - 1) * 152px) 0;
}
/* RIEMPIE IL PALCO SENZA DEFORMARSI. L'animazione e' 402x379 -- quasi
   quadrata ma non quadrata -- e tirata a forza in un quadrato il
   meeple si schiaccerebbe. `contain` la fa entrare intera e lascia il
   resto trasparente, che e' quello che l'immagine e' gia'.

   `image-rendering:auto` detto esplicitamente perche' il resto del
   sito e' pixel art e in giro per il foglio ci sono regole che tengono
   i bordi netti: questa e' una resa 3D, e netta diventa scalettata. */
.load-anim{
  display:block; width:100%; height:100%; object-fit:contain;
  image-rendering:auto;
}
.load-txt{text-align:center}
/* Il marchio cresce con lo schermo come il dado: e' la prima cosa che
   si legge del sito, e a ventuno pixel su un monitor largo sembrava una
   didascalia. */
.load-txt b{display:block; font-family:var(--ff-display); font-weight:900; text-transform:uppercase;
  font-size:calc(21.6px * var(--dk,1)); letter-spacing:-.03em; line-height:1}
.load-txt b i{color:var(--accent); font-style:normal}
/* Un testo piccolo non puo' essere ANCHE tenue: e' la stessa lezione
   delle etichette dei riquadri. A undici pixel nell'oliva chiaro, su
   uno sfondo chiaro, questa riga faceva meno di tre a uno -- ed e'
   l'unica cosa della schermata che dica a che punto e' il caricamento.
   Cresce con lo schermo come tutto il resto, ed e' piu' scura. */
.load-txt span{display:block; margin-top:10px; letter-spacing:.07em;
  font-size:calc(11px * var(--dk,1)); text-transform:uppercase;
  color:rgba(var(--ink-rgb),.72);
  /* La frase cambia a ogni passo, e senza dissolvenza i passi si
     sostituiscono di scatto: si legge come uno sfarfallio. Riscrivere
     il testo NON fa ripartire un'animazione CSS da solo -- la fa
     ripartire `setProg`, che la spegne e la riaccende. */
  animation:passoCarica .45s var(--ease) both}
/* La barra e' un blocco di tinta piatta, non un filo che sfuma. Era
   alta quattro pixel con un raggio, una sfumatura e un alone attorno:
   tre cose che su una plancia stampata non esistono. Adesso e' alta
   otto -- la misura dei segmenti del binario -- ed e' un colore solo. */
.bar{
  position:relative; width:calc(190px * var(--dk,1)); height:8px;
  background:rgba(var(--ink-rgb),.20); overflow:hidden;
}
.bar i{
  display:block; height:100%; width:0;
  background:var(--accent);
  transition:width .35s var(--ease);
}
/* UN LUSTRO CHE PASSA, E NON E' DECORAZIONE.

   La barra avanza a scatti, e fra un passo e l'altro puo' restare
   ferma per secondi interi -- le misure delle scatole e le copertine
   sono giri di rete veri. Una barra ferma e' indistinguibile da una
   barra bloccata, ed e' l'unica cosa in quella schermata che possa dire
   "ci sono ancora". Sparisce da sola quando il caricamento e' finito,
   perche' li' non ha piu' niente da dire. */
.bar::after{
  content:''; position:absolute; inset:0; border-radius:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform:translateX(-100%);
  animation:barLustro 1.9s ease-in-out infinite;
}
body.ready .bar::after{animation:none; opacity:0}
@keyframes barLustro{
  0%{transform:translateX(-100%)}
  60%,100%{transform:translateX(100%)}
}
@keyframes passoCarica{
  from{opacity:0; transform:translateY(4px)}
  to{opacity:1; transform:none}
}

/* L'INGRESSO, A SCAGLIONI.

   Le cose entrano dal basso una dopo l'altra, come in tutto il resto
   del sito. Molto corto pero': questa e' la primissima schermata, e un
   ingresso che si fa aspettare e' tempo tolto al caricamento vero --
   quello che deve sembrare gia' cominciato.

   Il dado NON entra dal basso: entra solo in dissolvenza, perche' il
   suo `transform` e' gia' preso dalla scala e da un'animazione che
   ne aggiungesse un'altra uscirebbe una scala sbagliata. */
.stage{animation:entraDado .5s ease both}
.load-txt{animation:entraSu .5s var(--ease) .06s both}
.bar{animation:entraSu .5s var(--ease) .14s both}
.load-bgg{animation:entraSu .5s var(--ease) .22s both}
@keyframes entraDado{ from{opacity:0} to{opacity:1} }
@keyframes entraSu{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:none}
}
/* Chi ha chiesto meno movimento tiene il dado che rotola -- e' l'attesa,
   e ferma non direbbe piu' niente -- ma non si prende addosso anche
   l'ingresso, il lustro e il cambio di passo, che sono cortesie. */
@media (prefers-reduced-motion:reduce){
  .stage, .load-txt, .bar, .load-txt span{animation:none}
  .bar::after{animation:none; opacity:0}
  #load{transition:opacity .7s ease, visibility 0s .7s}
  body.ready #load{transform:none}
}
.load-txt span{min-height:14px}

/* --- fallback senza WebGL ------------------------------------- */
#flat{display:none; position:fixed; inset:0; z-index:6; overflow:auto;
  padding:92px clamp(18px,5vw,56px) 60px}
body.no3d{overflow:auto}
body.no3d #flat{display:block}
body.no3d #scene,body.no3d #vig,body.no3d #panel{display:none}
#flat h1{font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:clamp(24.5px,5.04vw,46.1px);
  letter-spacing:-.03em; margin:0 0 6px}
#flat .lead{color:var(--ink-soft); margin:0 0 44px; max-width:52ch}
#flat article{border-top:1px dashed var(--line); padding:28px 0; max-width:70ch}
#flat h2{font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:25.9px;
  letter-spacing:-.03em; margin:0 0 4px}
#flat .byline{margin:0 0 14px}
#flat img{display:block; width:100%; max-width:420px; height:auto;
  margin:0 0 18px; border:1px dashed var(--line)}


/* ===================================================================
   MOVIMENTO

   Una riga sola di intenzione: le cose entrano dal basso, piano, e a
   scaglioni. Niente rimbalzi e niente rotazioni -- questo e' un sito
   che parla di mobili e di carta, e il movimento deve leggersi come
   una pagina che si volta, non come un'interfaccia che si esibisce.

   Le sezioni si accendono con `display`, quindi vogliono una
   `animation` e non una `transition`: una transizione su un elemento
   che passa da `none` a `block` non parte proprio.
   =================================================================== */

@keyframes entraSezione{
  from{opacity:0; transform:translateY(14px)}
  to{opacity:1; transform:none}
}
@keyframes entraRiga{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:none}
}
@keyframes entraSu{
  from{opacity:0; transform:translateY(-8px)}
  to{opacity:1; transform:none}
}

/* --- le tendine si aprono ------------------------------------------
   Tutto quello che si apre sotto qualcos'altro -- le informazioni di un
   gioco nell'elenco, la recensione dentro la riga del catalogo, le
   partite di un gioco, i cassetti del profilo, le due tendine del
   pannello della libreria -- compariva di colpo. Adesso scende.

   Serve una `animation` e non una `transition`: questi blocchi passano
   da `display:none` a visibile, e una transizione su quel salto non
   parte proprio. E' la stessa ragione delle sezioni. */
@keyframes apreSotto{
  from{opacity:0; transform:translateY(-9px)}
  to{opacity:1; transform:none}
}
.riga-info:not([hidden]),
.righe > li.aperta .cat-rec,
.gio-gruppo .giocate:not([hidden]),
.pro-dentro:not([hidden]),
.cartella > ol:not([hidden]),
#stanza details[open] .st-dentro{
  animation:apreSotto .26s var(--ease) both;
}

body.elenco    #mia,
body.sez-catalogo #catalogo,
body.sez-profilo  #profilo{animation:entraSezione .46s var(--ease) both}
body.sez-partite  #partite{animation:entraSezione .46s var(--ease) both}

/* La testata di una sezione entra prima del suo contenuto: si legge
   dove si e' arrivati, e solo dopo cosa c'e' dentro. */
.cat-testa{animation:entraSu .5s var(--ease) both}
.cat-in > .righe, #mia-list, #cat-list{animation:entraSezione .5s var(--ease) .08s both}

/* Le righe a scaglioni, ma solo le prime dodici: sono quelle che si
   vedono senza scorrere, e ritardare la duecentesima vorrebbe dire
   farla comparire tre secondi dopo che ci sei arrivato sopra. */
.righe > li{animation:entraRiga .42s var(--ease) both}
.righe > li:nth-child(1){animation-delay:.02s}
.righe > li:nth-child(2){animation-delay:.05s}
.righe > li:nth-child(3){animation-delay:.08s}
.righe > li:nth-child(4){animation-delay:.11s}
.righe > li:nth-child(5){animation-delay:.14s}
.righe > li:nth-child(6){animation-delay:.17s}
.righe > li:nth-child(7){animation-delay:.20s}
.righe > li:nth-child(8){animation-delay:.23s}
.righe > li:nth-child(9){animation-delay:.26s}
.righe > li:nth-child(10){animation-delay:.29s}
.righe > li:nth-child(11){animation-delay:.32s}
.righe > li:nth-child(n+12){animation-delay:.35s}

/* Le cartelle dei gruppi entrano come le righe, una dopo l'altra */
.cartella{animation:entraRiga .42s var(--ease) both}
.cartella:nth-child(2){animation-delay:.06s}
.cartella:nth-child(3){animation-delay:.12s}
.cartella:nth-child(n+4){animation-delay:.18s}

/* I comandi rispondono piu' piano di prima: un cambio di colore
   istantaneo su un sito di carta e legno stona, ed e' la differenza
   fra un pulsante e un interruttore. */
.tool, .riga-menu, .gruppi button, .cartella-tit, .vista-riga,
#sortmenu button, .aggiungi, #stanza-apri, #vista-apri, #conta{
  transition:color .24s var(--ease), background-color .24s var(--ease),
             border-color .24s var(--ease), opacity .24s var(--ease);
}
.riga-nome{transition:color .24s var(--ease)}
.cat-cop img{transition:transform .5s var(--ease)}
.righe.compatta > li:hover .cat-cop img{transform:scale(1.06)}

/* Il marchio arriva per ultimo, quando il resto e' gia' fermo. */
body.ready .brand b{animation:entraSu .7s var(--ease) .1s both}
body.ready .brand span{animation:entraSu .7s var(--ease) .22s both}

/* CHI HA CHIESTO DI NON VEDERE ANIMAZIONI NON NE VEDE. Non e' una
   cortesia: per qualcuno il movimento sullo schermo e' nausea vera, e
   il sistema operativo lo sa gia'. Restano le opacita', se no le
   sezioni che entrano con `both` resterebbero invisibili. */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ===================================================================
   I COMANDI

   Un posto solo che decide com'e' fatto un pulsante in tutto il sito.

   Restano TRE LIVELLI, e sono gli stessi di prima -- quello che cambia
   e' di che cosa sono fatti:

     pieno         un blocco di CARTA staccato dalla plancia
     tratteggiato  il filo della fustella, il pezzo non ancora staccato
     nudo          solo la parola

   IL MAIUSCOLO TORNA, ED E' UN DIETROFRONT DICHIARATO. La regola di
   prima diceva "niente maiuscolo forzato: un pulsante si legge come una
   frase", ed era giusta per un sito di superfici morbide dove la
   gerarchia la faceva il peso. Qui la gerarchia la fa la STAMPA: su una
   plancia di cartone le scritte sono punzonate, e una minuscola in
   mezzo a dei blocchi punzonati sembra una didascalia. Il maiuscolo
   tracciato non e' piu' l'unico segno che distingue le etichette dai
   comandi -- a distinguerli adesso c'e' il materiale.

   Quello che NON e' cambiato, ed e' la meta' che vale:

   - Il PESO fa la gerarchia, non il bordo. Il filo tratteggiato e' un
     livello dichiarato, non una cornice attorno a ogni cosa.
   - Bersagli da 44 px sul tocco, che e' la misura di un dito.
   - La pressione si vede. Prima era `scale(.96)`; adesso il pezzo SI
     POSA -- scende di due pixel in basso a destra e la sua ombra si
     consuma sotto di lui. E' lo stesso gesto, detto nella lingua di un
     oggetto di cartone invece che di una superficie di vetro.

   L'ACCENTO NON E' PIU' "TUTTO QUELLO CHE SI TOCCA", E' "QUELLO CHE E'
   SCELTO ADESSO". Il pieno di un comando e' la carta; l'ocra dice qual
   e' la voce dove sei, il filtro acceso, il pannello aperto. Sono due
   domande diverse e prima avevano lo stesso colore.
   =================================================================== */

.tool, #conta, .riga-menu, .gruppi button, #sortmenu button, .vista-riga,
.aggiungi, #stanza-apri, #vista-apri, .riga-azioni button, #mobili-lista button,
.pan-azioni button, .cartella-tit, #mia-gestisci, #gru-apri, #vis-torna{
  font-family:var(--ff); font-weight:900; letter-spacing:.08em;
  text-transform:uppercase; border-radius:0;
  border:0; cursor:pointer;
  transition:background-color .18s var(--ease), color .18s var(--ease),
             transform .1s var(--ease), filter .1s var(--ease), opacity .18s var(--ease);
}
/* IL PEZZO SI POSA. Due pixel in basso a destra, che e' esattamente lo
   scarto dell'ombra: sotto il dito il blocco arriva sul piano. Chi ha
   l'ombra piena se la consuma insieme (la regola del livello pieno);
   chi non ce l'ha si sposta e basta, ed e' giusto -- un pezzo che non
   sporgeva non ha niente da posare. */
.tool:active, #conta:active, .riga-menu:active, .gruppi button:active,
#sortmenu button:active, .vista-riga:active, .aggiungi:active,
#stanza-apri:active, #vista-apri:active, .riga-azioni button:active,
.pan-azioni button:active, #close:active, #vis-torna:active{
  transform:translate(2px,2px);
}

/* --- livello 1: pieno --------------------------------------------- */
/* IL BLOCCO DI CARTA. Non e' una tinta: e' il materiale rovesciato --
   `--ink` fa da fondo e `--card` da scritta -- ed e' per questo che si
   gira da solo quando si passa dal cartone alla carta, senza una riga
   in piu'. L'angolo tagliato e l'ombra piena sono la firma della
   fustella e vanno insieme: il taglio da solo e' un rettangolo
   smussato, l'ombra da sola e' un rettangolo con l'ombra. */
.aggiungi, #p-mia, #vis-torna{
  background:var(--ink); color:var(--card); font-weight:900;
  padding:12px 18px; font-size:13px; border:0;
  clip-path:var(--fustella); filter:var(--posa);
}
.aggiungi:hover, #p-mia:hover, #vis-torna:hover{background:var(--accent); color:var(--su-accent)}
.aggiungi:active, #p-mia:active, #vis-torna:active{filter:var(--posa-giu)}

/* --- livello 2: tratteggiato --------------------------------------- */
/* IL FILO DELLA FUSTELLA. Era "terracotta al 12%": un fondo tinto al
   dieci per cento, che e' la cosa che su una plancia stampata non
   esiste -- o l'inchiostro c'e', o non c'e'. Il tratteggio dice la
   stessa cosa e la dice meglio: questo pezzo e' segnato ma non ancora
   staccato. */
.tool, #conta, .riga-menu, .gruppi button, .vista-riga, #stanza-apri,
#vista-apri, .pan-azioni button, #mia-gestisci, #gru-apri{
  background:none; color:var(--ink);
  border:1px dashed var(--line);
  padding:10px 14px; font-size:12px;
}
.tool:hover, #conta:hover, .riga-menu:hover, .gruppi button:hover,
.vista-riga:hover, #stanza-apri:hover, #vista-apri:hover,
.pan-azioni button:hover, #mia-gestisci:hover, #gru-apri:hover{
  background:rgba(var(--ink-rgb),.07); border-color:var(--accent); color:var(--accent);
}

/* IL CHIUDI E' PIENO E ROSSO, e la sua regola NON sta qui: sta in fondo
   al foglio insieme a quelle di `#add-x` e `#mia-x`, che sono lo stesso
   comando in altri due posti. Scriverlo anche qui vorrebbe dire due
   posti da tenere allineati per un pulsante solo -- ed e' successo:
   questa copia diceva rosso, quella diceva accento, e a vincere era
   quella in fondo. */

/* QUELLO CHE E' SCELTO ADESSO PORTA L'OCRA, e porta il taglio: sono i
   due segni con cui la fustella dice "questo pezzo e' staccato". */
.gruppi button.on, .gruppi.filtro button.on,
.riga-menu[aria-expanded="true"]{
  background:var(--accent); color:var(--su-accent); border-color:transparent;
  clip-path:var(--fustella);
}

/* --- livello 3: nudo ---------------------------------------------- */
#sortmenu button, .riga-azioni button{
  background:none; color:var(--ink); text-align:left;
  padding:11px 13px; font-size:12px; border-radius:0; border:0;
}
#sortmenu button:hover, .riga-azioni button:hover{background:rgba(var(--ink-rgb),.09)}
#sortmenu button.on{color:var(--accent)}
#sortmenu button.on::after{content:''}

/* --- quello che distrugge resta rosso, e resta in due tempi -------- */
/* Il primo tempo e' un filo rosso tratteggiato -- il taglio segnato,
   non ancora fatto -- e il secondo e' il blocco pieno. */
#del, .pan-azioni #del{
  background:none; color:var(--rosso); border:1px dashed rgba(var(--rosso-rgb),.7);
}
#del:hover{background:rgba(var(--rosso-rgb),.12); color:var(--rosso)}
#del.armed{background:var(--rosso); color:var(--su-rosso); border-color:transparent}

/* --- il contatore e' il titolo della schermata, non un pulsantino -- */
#conta{gap:8px}
#conta b{font-weight:900; font-size:15px; letter-spacing:.02em; color:inherit}
#conta span{color:inherit; opacity:.75; font-size:11px; font-family:var(--ff-mono);
  font-weight:600; letter-spacing:.1em}
body.elenco #conta{background:var(--accent); color:var(--su-accent); border-color:transparent}

/* --- la navigazione ------------------------------------------------ */
/* LA PASTIGLIA DICE QUAL E' QUELLA SCELTA. La voce dove sei e' un
   pezzo staccato: ocra, angolo tagliato. Le altre sono parole. */
#sezioni button, #tabbar button{
  font-family:var(--ff); font-weight:900; letter-spacing:.06em;
  text-transform:uppercase; font-size:11px; border:0; background:none;
  color:var(--ink-soft); cursor:pointer; border-radius:0;
  padding:9px 12px; transition:color .18s var(--ease), background-color .18s var(--ease);
}
#sezioni button:hover, #tabbar button:hover{color:var(--ink); background:rgba(var(--ink-rgb),.08)}
#sezioni button.on, #tabbar button.on{color:var(--accent)}
#tabbar button.on{
  background:var(--accent); color:var(--su-accent); clip-path:var(--fustella);
}
/* In testata il segno e' la riga sotto la voce, apposta per non
   aggiungere un riquadro a una barra che e' gia' piena. Trasparente su
   tutte, se no la voce scelta salta di due pixel. */
#sezioni button{border-bottom:2px solid transparent}
#sezioni button.on{border-bottom-color:var(--accent)}
#sezioni button.on::after{display:none}

/* --- superfici: spigoli vivi, ombre piene, nessun filo sfumato ----- */
/* I PANNELLI NON PORTANO IL TAGLIO. Il taglio e' la firma di un PEZZO
   -- un comando, una pastiglia, un riquadro di numeri -- e un foglio
   grande con gli angoli smussati sembra un adesivo. E c'e' anche una
   ragione tecnica: `clip-path` su un pannello ritaglierebbe le tendine
   e i menu che ne escono. */
#panel, #vista, #stanza, #mobili, .riga-azioni, .add-card, #mia, #catalogo{
  border-radius:0; border:0; box-shadow:var(--shadow);
}
#mia, #catalogo{box-shadow:none}
.riga-azioni{padding:6px; border:1px solid rgba(var(--ink-rgb),.10)}
#panel::before{display:none}          /* il filo d'ottone era un bordo di troppo */

/* --- i campi di testo ---------------------------------------------- */
/* Un campo e' un rettangolo tratteggiato in cui si SCRIVE, e quello che
   ci si scrive dentro e' battuto a macchina: mono, spaziato, e il
   segnaposto in maiuscolo come le diciture stampate su una plancia. */
#cerca, #cat-q, #add-q, .add-card input, .add-card textarea, #mobili-lista input,
#nick-in, #pa-note{
  font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.04em; color:var(--ink);
  background:rgba(var(--ink-rgb),.07); border:1px dashed var(--line); border-radius:0;
  padding:12px 14px; transition:background-color .18s var(--ease), border-color .18s var(--ease);
}
#cerca:focus, #cat-q:focus, #add-q:focus, .add-card input:focus,
.add-card textarea:focus, #mobili-lista input:focus, #nick-in:focus, #pa-note:focus{
  outline:none; background:rgba(var(--ink-rgb),.04);
  border:1px solid var(--accent); box-shadow:none;
}
#cerca::placeholder, #cat-q::placeholder, #add-q::placeholder,
.add-card input::placeholder, #nick-in::placeholder, #pa-note::placeholder{
  color:var(--ink-soft); text-transform:uppercase; letter-spacing:.1em; font-size:11px;
}

/* --- le etichettine di sezione: battute a macchina ----------------- */
/* Qui il maiuscolo tracciato c'era gia' ed era giusto: e' un'etichetta,
   non un comando. Cambia la mano -- il mono -- che e' quella con cui
   sulla plancia sono scritte le diciture e le cifre. */
.eyebrow, .vista-tit{
  font-family:var(--ff-mono);
  font-weight:600; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
}

/* --- sul tocco i bersagli crescono: quarantaquattro pixel ---------- */
@media (pointer:coarse){
  .tool, #conta, .riga-menu, .riga-stella, .gruppi button, #sortmenu button, .vista-riga,
  .aggiungi, #stanza-apri, #vista-apri, .riga-azioni button,
  .pan-azioni button, #close, #sezioni button, #tabbar button{
    min-height:44px;
  }
}

/* --- LE ICONE ------------------------------------------------------
   Un corredo solo: tratto 1.6, estremi tondi, riquadro 24. Prendono il
   colore del testo, quindi seguono da sole lo stato del comando che le
   contiene -- non c'e' una regola di colore per ognuna. */
.ico{
  width:18px; height:18px; flex:none; display:block;
  vertical-align:-3px;
}
button .ico + *{margin-left:2px}
.pan-azioni button, #p-mia, #p-segna, #p-cuore, .riga-menu, #stanza-apri, #vista-apri{
  display:inline-flex; align-items:center; gap:7px;
}
.riga-menu, #stanza-apri, #vista-apri, #close, #p-pref{padding:10px}
#vista-apri svg{width:18px; height:18px}
/* Acceso, il disegno si riempie. La regola deve mirare al PATH e non
   all'<svg>: ogni icona del corredo porta `fill="none"` scritto addosso
   come attributo di presentazione, e un attributo sul figlio vince su
   una proprieta' ereditata dal padre -- mentre una regola CSS, anche
   debole, batte l'attributo. Scritta sull'<svg> non ha mai riempito
   niente: il cuore e la stella del pannello cambiavano solo il colore
   del contorno, che a occhio sembra "acceso" e infatti non se n'era
   accorto nessuno. */
#p-cuore[aria-pressed="true"] .ico path,
#p-pref[aria-pressed="true"] .ico path,
.riga-stella[aria-pressed="true"] .ico path,
.cat-azioni .desidero[aria-pressed="true"] .ico path{fill:currentColor}

/* --- QUELLO CHE GALLEGGIA SULLA SCENA ------------------------------
   Un filo tratteggiato dentro un pannello si legge benissimo; sopra la
   stanza no: dietro c'e' il legno, il pavimento e la luce che cambia, e
   un tratteggio ci si perde dentro. Quello che sta sulla scena e' un
   PEZZO STACCATO -- blocco pieno, angolo tagliato, ombra piena -- e non
   un filo. E' anche il modo in cui si distingue da quelli che stanno
   dentro a un pannello.

   Niente sfocatura dietro: la sfocatura era il modo di stare sopra una
   stanza chiara restando leggeri. Un pezzo di cartone non e' leggero e
   non deve sembrarlo -- copre. */
#stanza-apri, #vista-apri, #conta{
  background:var(--ink); color:var(--card); border:0;
  clip-path:var(--fustella); filter:var(--posa); box-shadow:none;
}
#stanza-apri:hover, #vista-apri:hover{background:var(--accent); color:var(--su-accent)}
#stanza-apri:active, #vista-apri:active, #conta:active{filter:var(--posa-giu)}
/* Aperto, il pannello che questo comando comanda e' "quello scelto
   adesso": ocra, come la voce di navigazione dove sei. */
body.vista #vista-apri, body.arreda #stanza-apri{background:var(--accent); color:var(--su-accent)}
#conta{
  color:var(--card); background:var(--ink);
}
#conta b{color:inherit}
#conta:hover{background:var(--accent); color:var(--su-accent)}
body.elenco #conta{background:var(--accent); color:var(--su-accent)}
body.elenco #conta b{color:var(--su-accent)}

/* Il binario sta sul pavimento della stanza, non su una scheda: deve
   staccarsi da solo. */
/* Sopra la stanza -- che con la luce bassa diventa quasi nera -- una
   carta al 90% non basta piu': va opaca, con la sfocatura dietro come
   tutto quello che galleggia. Stessa ragione del contatore in testata:
   il fondo dietro cambia con la luce, il testo no. */
/* La stessa pastiglia della targa del mobile: carta chiara, angoli
   tondi, la sua ombra. Era un rettangolo a spigoli vivi appiccicato
   alla barra, che sulla stanza si leggeva come una toppa. */
/* La stessa mano della targa del mobile e delle schede del sito:
   `--r-m`, carta chiara, un filo di bordo, ombra leggera. La pastiglia
   a 999px era la forma delle pastigliette -- i gruppi, i nomi al tavolo
   -- e questa non e' una pastiglietta, e' una superficie. */
/* Sfocare il quattro per cento che passa da un fondo al 96% e' lavoro
   che non arriva agli occhi, e qui arrivava per giunta sopra la scena
   viva -- vedi la testata. */
#rail{
  background:rgba(var(--card-rgb),.96);
  box-shadow:var(--ombra-lieve), inset 0 0 0 1px rgba(var(--ink-rgb),.07);
  border-radius:var(--r-m);
}

/* Le frecce: livello "nudo" del corredo comandi -- solo il segno --
   che si accende sotto il dito e risponde alla pressione come tutto il
   resto del sito. */
.rail-passo{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; padding:0; cursor:pointer;
  color:var(--ink-soft); background:none; border:0; border-radius:var(--r-s);
  pointer-events:auto;
  transition:background-color .2s var(--ease), color .2s var(--ease),
             transform .12s var(--ease), opacity .2s var(--ease);
}
.rail-passo .ico{width:13px; height:13px}
.rail-passo:hover{background:rgba(var(--accent-rgb),.12); color:var(--accent)}
.rail-passo:active{transform:scale(.92)}
.rail-passo:disabled{opacity:.26; cursor:default; pointer-events:none}
@media (pointer:coarse){ .rail-passo{width:26px; height:26px} }
#rail-txt{color:var(--ink); opacity:.85}
.rail-bar{background:rgba(var(--ink-rgb),.22)}

/* Il binario si stringe sul suo contenuto: con la barra a `flex:1` la
   pastiglia si allargava fino ai bordi dello schermo e sembrava una
   fascia, non un comando. */
.rail-bar{flex:0 0 auto; width:min(200px,40vw); max-width:none}
#rail{max-width:none; width:auto}
#rail-txt{opacity:.85; font-size:12.5px}

/* Le due viste dell'elenco parlano la stessa lingua dei comandi: niente
   maiuscolo tracciato, il peso a fare la differenza. */
.viste button{
  font-family:var(--ff); font-weight:500; font-size:14px;
  letter-spacing:0; text-transform:none; color:var(--ink-soft);
  background:none; border:0; cursor:pointer; padding:11px 4px;
  transition:color .2s var(--ease);
}
.viste button.on{color:var(--accent); font-weight:600}
.viste .ind{background:var(--accent); height:2px; border-radius:0}

/* Anche i titoli delle cartelle: erano righe di capitali con un filo
   sotto, cioe' l'estetica di un foglio di calcolo. */
.cartella-tit{
  font-family:var(--ff); font-weight:600; font-size:17px; letter-spacing:-.01em;
  border-bottom:1px dashed var(--line); border-radius:0; background:none;
  padding:12px 2px; color:var(--ink);
}
.cartella-tit:hover{color:var(--accent); background:none}
.cartella-tit span{
  font-family:var(--ff); font-weight:500; font-size:12px;
  letter-spacing:0; text-transform:none; color:var(--ink-soft);
}

/* La barra delle azioni e' cresciuta: con i bersagli da 44 px le voci
   vanno su tre righe, e su un pannello alto il 60% dello schermo si
   mangiava meta' della recensione -- il voto finiva tagliato. Il
   pannello sale, la barra si stringe, e le due cose insieme rimettono
   il testo dove si legge. */
@media (max-width:879px){
  #panel{max-height:82vh}
  .pan-foot{padding:12px clamp(14px,3vw,20px) 14px; gap:8px}
  .pan-scroll{padding:22px clamp(16px,3vw,22px) 8px}
}
.pan-foot{display:flex; flex-wrap:wrap; gap:9px; margin:0;
  border-top:1px dashed var(--line); background:var(--card)}

/* ===================================================================
   CORREZIONI DOPO LA PROVA A SCHERMO
   Tutto quello che era rimasto indietro, in un posto solo.
   =================================================================== */

/* --- libreria ------------------------------------------------------ */

/* Il contatore e l'imbuto galleggiano sulla scena: devono farsi notare
   quel tanto che basta, non prendersi l'angolo. */
#conta{padding:8px 13px; font-size:13px}
#conta b{font-size:14px}
#vista-apri{padding:8px}
#vista-apri .ico, #vista-apri svg{width:17px; height:17px}
#stanza-apri{padding:8px}
#stanza-apri .ico{width:17px; height:17px}

/* QUI C'ERA IL CONTRARIO, e vale la pena dire perche' e' cambiato.

   La pastiglia era stata tolta: "sul pavimento chiaro sembrava una
   macchia, bastano il contrasto del testo e la barra". Era vero
   FINCHE' il pavimento era chiaro. Da quando la luce si abbassa fino a
   spegnere quasi la stanza, quel fondo puo' essere nero, e il numero
   grigio al 55% su nero non si legge -- ed e' arrivato come
   segnalazione. Una superficie che c'e' solo quando il fondo la
   perdona non e' una superficie: e' una scommessa sul colore di
   dietro. Adesso la pastiglia c'e' sempre, come la targa del mobile e
   come tutto quello che galleggia sulla scena. */
#rail-txt{color:var(--ink); opacity:.72; font-size:11.5px}
.rail-bar{background:rgba(var(--ink-rgb),.20)}

/* L'anello arancione era il fuoco del campo di ricerca, che il pannello
   prendeva DA SOLO all'apertura: un contorno acceso senza che nessuno
   avesse toccato niente. Il fuoco si vede solo a chi naviga da tastiera
   (`:focus-visible`), che e' l'unico a cui serve. */
#cerca:focus, #cat-q:focus, #add-q:focus, .add-card input:focus,
.add-card textarea:focus, #mobili-lista input:focus, #nick-in:focus, #pa-note:focus{
  box-shadow:none;
}
#cerca:focus-visible, #cat-q:focus-visible, #add-q:focus-visible,
.add-card input:focus-visible, .add-card textarea:focus-visible,
#mobili-lista input:focus-visible, #nick-in:focus-visible, #pa-note:focus-visible{
  box-shadow:0 0 0 2px var(--accent);
}

/* La lista degli ordinamenti era un riquadro squadrato dentro un
   pannello stondato. */
#sortmenu{border:0; border-radius:var(--r-m); overflow:hidden; background:rgba(var(--ink-rgb),.04)}
#sortmenu button{border-radius:0; border-bottom:1px solid rgba(var(--ink-rgb),.07)}
#sortmenu button:last-child{border-bottom:0}

/* --- i pannelli: arredi, mobili, gruppi, partita ------------------- */
#stanza button, #mobili button, #gruppilayer button, #partitalayer button,
#addlayer button, #profilo button, #catalogo button, #mia button{
  border-radius:var(--r-s);
}
#mobili-lista input, #stanza input[type=text]{border-radius:var(--r-s)}

/* --- collezione ---------------------------------------------------- */

/* Il fondo dell'elenco era la stanza a piena tinta: sotto al testo
   diventava una lastra grigia. Va verso la carta, che e' il colore di
   una pagina che si legge. */
#mia, #catalogo, #profilo, #partite{background:var(--fondo)}

/* La finestrella delle azioni era trasparente: si leggeva attraverso e
   non si capiva dove finisse, e prendere una voce era un tiro a segno. */
.riga-azioni{
  /* L'ombra e' quella del sito: piena e presa dal buio. Scritta a mano
     con l'inchiostro e una sfocatura da trentaquattro pixel faceva due
     cose sbagliate insieme -- un alone chiaro sul cartone, e una
     sfumatura su una plancia che non ne ha. */
  background:var(--card); box-shadow:var(--shadow);
  border:0; border-radius:var(--r-m);
}

/* Le pastiglie dei gruppi e i comandi dell'elenco stavano nello stesso
   contenitore senza saper convivere: con un gruppo in piu' finivano
   uno sopra l'altro. Adesso sono due righe, e i filtri stanno per conto
   loro sopra ai comandi. */
.mia-barra{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:14px 0 0;
}
#mia-gruppi.gruppi.filtro{
  flex:1 1 100%; margin:0 0 4px; gap:8px;
}
#mia-gestisci, #gru-apri, .aggiungi{flex:0 0 auto; margin:0}

/* IL SEPARATORE ALFABETICO. Un'etichetta, non una riga: sta a filo a
   sinistra come i titoli delle cartelle, e non ha il fondo delle righe
   -- se avesse la stessa carta sotto si conterebbe come un gioco. La
   lettera e' piccola e in maiuscoletto spaziato, che e' come il sito
   scrive gia' le etichette di sezione. */
#mia-list .mia-lettera{
  list-style:none; padding:14px 0 4px; background:none; border:0;
  display:flex; align-items:center; gap:9px;
}
#mia-list .mia-lettera span{
  font-family:var(--ff-display); font-size:12px; font-weight:900; text-transform:uppercase;
  letter-spacing:.02em; color:var(--ink-soft); line-height:1;
}
/* Il filo tira la lettera fino al bordo: senza, in mezzo a righe tutte
   larghe uguali una lettera sola galleggia. */
#mia-list .mia-lettera::after{
  content:""; flex:1; height:1px; background:var(--line);
}
#mia-list .mia-lettera:first-child{padding-top:2px}

/* --- i tre livelli, con un nome ------------------------------------
   Finora la gerarchia dei comandi era implicita nel selettore. Adesso
   ha tre classi, e chi aggiunge un pulsante sceglie che cos'e' invece
   di copiare lo stile del vicino. */
.primario, .secondario, .distruttivo{
  font-family:var(--ff); font-weight:900; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; border-radius:0;
  transition:background-color .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), transform .1s var(--ease),
             filter .1s var(--ease);
}
.primario:active, .secondario:active, .distruttivo:active{transform:translate(2px,2px)}
/* Il pieno e' il blocco di carta, non una tinta: e' `--ink` su `--card`
   rovesciati, quindi si gira da solo passando dal cartone alla carta. */
.primario{
  background:var(--ink); color:var(--card);
  padding:13px 20px; border:0;
  clip-path:var(--fustella); filter:var(--posa);
}
.primario:hover{background:var(--accent); color:var(--su-accent)}
.primario:active{filter:var(--posa-giu)}
.secondario{
  background:none; color:var(--ink);
  padding:12px 20px; border:1px dashed var(--line);
}
.secondario:hover{background:rgba(var(--ink-rgb),.08); border-color:var(--ink); color:var(--ink)}
.distruttivo{
  background:none; color:var(--rosso);
  padding:12px 18px; border:1px dashed rgba(var(--rosso-rgb),.7);
}
.distruttivo:hover{background:rgba(var(--rosso-rgb),.14); color:var(--rosso)}
.distruttivo.armed{background:var(--rosso); color:var(--su-rosso); border-color:transparent}


/* Il piede di un pannello: annulla a sinistra, l'azione a destra, e la
   riga sta in fondo -- non una croce in un angolo. */
.add-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:22px 0 0; padding:16px 0 0; border-top:1px dashed var(--line);
}
.add-foot .primario{margin-left:auto}
.pa-foot .distruttivo{flex:0 0 auto}

/* --- catalogo ------------------------------------------------------
   I due comandi stavano a destra su schermo largo e finivano SOTTO su
   telefono, dove la griglia si riduceva a due colonne. La colonna dei
   comandi resta anche li': si stringe, non se ne va. */
@media (max-width:879px){
  .righe > li{grid-template-columns:56px 1fr auto; gap:12px}
  /* La copertina segue la colonna. Restava a 88 px mentre la colonna
     scendeva a 56 -- la misura piccola era scritta solo nella fascia
     sotto i 600 -- e in mezzo, fra i 601 e gli 879, usciva dalla sua
     casella e finiva sopra il titolo. */
  .cat-cop{width:56px}
  .cat-azioni{align-items:flex-end}
  .cat-azioni button{font-size:12px; padding:8px 10px}
}
.cat-azioni button{
  font-weight:500; background:rgba(var(--ink-rgb),.06); color:var(--ink); border:0;
  border-radius:var(--r-s);
}
.cat-azioni button:hover{background:rgba(var(--ink-rgb),.11)}
.cat-azioni .apri{background:rgba(var(--accent-rgb),.12); color:var(--accent)}
.cat-azioni .apri:hover{background:rgba(var(--accent-rgb),.20)}
.cat-azioni .pref.on{background:var(--accent); color:var(--su-accent)}
.cat-azioni .dentro{background:rgba(var(--accent-rgb),.12); color:var(--accent)}

/* --- profilo --------------------------------------------------------
   Era la schermata rimasta piu' indietro: tutti i campi e i comandi
   avevano ancora il filo da un pixel e lo sfondo trasparente. */
#profilo input[type=text], #profilo input:not([type=range]), #profilo textarea,
#partitalayer input:not([type=range]), #partitalayer textarea,
#gruppilayer input, #recelayer input, #recelayer textarea{
  font-family:var(--ff); font-size:14px; color:var(--ink);
  background:rgba(var(--ink-rgb),.05); border:0; border-radius:var(--r-s);
  padding:12px 14px;
}
#profilo button, #partitalayer button, #gruppilayer button, #recelayer button{
  font-family:var(--ff); font-weight:500; letter-spacing:0; text-transform:none;
  border:0; border-radius:var(--r-s); cursor:pointer;
}
#profilo button:not(.primario):not(.secondario):not(.distruttivo):not(.ruota):not(#par-wrap),
#partitalayer button:not(.primario):not(.secondario):not(.distruttivo):not(.ruota):not(#pa-chiudi),
#gruppilayer button:not(.primario):not(.secondario):not(.distruttivo):not(.ruota),
#recelayer button:not(.primario):not(.secondario):not(.distruttivo):not(.ruota){
  background:rgba(var(--ink-rgb),.06); color:var(--ink); padding:10px 14px; font-size:14px;
}
#profilo button:not(.primario):not(.ruota):not(#par-wrap):hover, #partitalayer button:not(.primario):not(.ruota):not(#pa-chiudi):hover,
#gruppilayer button:not(.primario):not(.ruota):hover, #recelayer button:not(.primario):not(.ruota):hover{
  background:rgba(var(--ink-rgb),.11);
}
/* il codice amico e' un dato da copiare, non un comando */
.pro-cod b, #pro-codice{
  background:rgba(var(--ink-rgb),.06); border:0; border-radius:var(--r-s);
  padding:12px 16px; letter-spacing:.14em; font-weight:600;
}

/* --- gli spazi della pagina account ------------------------------- */
.pro-blocco, .pro-sezione{margin:26px 0 0}
.pro-testa{display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap}
.pro-aggiungi{display:flex; gap:10px; align-items:center; margin:14px 0 0}
.pro-aggiungi input{flex:1 1 auto; min-width:0}
.pro-msg{margin:10px 0 0; font-size:13px; color:var(--ink-soft)}

/* I tre livelli devono battere le regole di contorno (`.add-foot button`
   e simili) che hanno una classe piu' un elemento. `button.primario` fa
   lo stesso peso e arriva dopo, quindi vince -- senza `!important`, che
   qui vorrebbe dire rinunciare a poter fare eccezioni piu' avanti. */
button.primario{background:var(--ink); color:var(--card); font-weight:900; padding:13px 20px;
  border:0; clip-path:var(--fustella); filter:var(--posa)}
button.primario:hover{background:var(--accent); color:var(--su-accent)}
button.primario:active{filter:var(--posa-giu)}
button.secondario{background:none; color:var(--ink); padding:12px 20px;
  border:1px dashed var(--line)}
button.secondario:hover{background:rgba(var(--ink-rgb),.08); border-color:var(--ink); color:var(--ink)}
button.distruttivo{background:none; color:var(--rosso); padding:12px 18px;
  border:1px dashed rgba(var(--rosso-rgb),.7)}
button.distruttivo:hover{background:rgba(var(--rosso-rgb),.14); color:var(--rosso)}
button.distruttivo.armed{background:var(--rosso); color:var(--su-rosso); border-color:transparent}

/* Nel piede, l'azione sta a destra e quello che annulla a sinistra:
   e' l'ordine che si legge su qualunque finestra di sistema. */
.add-foot button.primario{margin-left:auto}
.add-foot button.distruttivo{margin-left:0; order:-1}
/* Due tasti, una riga: andavano a capo quando erano in tre -- con
   "annulla" in mezzo -- e adesso ci stanno sempre. `stretch` perche'
   l'altezza la decide il piu' alto dei due, non l'imbottitura di
   ciascuno. */
.pa-foot{flex-wrap:nowrap; align-items:stretch}

/* Su schermo stretto i due comandi finivano SOTTO al titolo, perche'
   una regola li faceva spanciare su tutta la riga (`grid-column:1/-1`).
   Restano nella loro colonna: si stringono, non se ne vanno. E' la
   stessa cosa che fa una riga di impostazioni su un telefono -- il
   comando sta a destra del suo nome, sempre. */
@media (max-width:879px){
  .righe > li{grid-template-columns:56px minmax(0,1fr) auto}
  /* Le colonne vanno dette per nome: con `grid-row:1` e la colonna in
     automatico, il primo posto libero era il PRIMO -- i comandi
     finivano a sinistra e il titolo spinto a destra. */
  .righe > li .cat-cop{grid-column:1; grid-row:1}
  .righe > li .cat-dati{grid-column:2; grid-row:1}
  .righe > li .cat-azioni{
    grid-column:3; grid-row:1; align-self:center;
    flex-direction:column; align-items:stretch; gap:6px;
  }
  .cat-azioni button{font-size:12px; padding:8px 10px; white-space:nowrap}
  .righe > li .cat-rec{grid-column:1 / -1}
}

/* ===================================================================
   SECONDO GIRO DI CORREZIONI
   =================================================================== */

/* --- la testata era trasparente ------------------------------------
   Scorrendo una sezione il testo della pagina le passava sotto e i due
   si compenetravano. Non serve una barra piena: serve una SUPERFICIE --
   carta velata con la sfocatura dietro, come qualunque testata che
   resta ferma mentre il contenuto scorre. */
/* NIENTE `backdrop-filter` SOPRA LA SCENA.

   La testata sta ferma sopra un canvas che si ridisegna, e un
   `backdrop-filter` costringe il compositore a rifare una sfocatura a
   schermo pieno A OGNI FOTOGRAMMA di quello che ci passa sotto: e' il
   conto piu' salato che una riga di CSS possa fare su un telefono.

   E qui non comprava niente. Il velo sta gia' all'82% -- della scena ne
   passa il diciotto -- e sfocare il diciotto per cento di qualcosa non
   si vede. Salito al 92% non si vede nemmeno la differenza col velo di
   prima, e la sfocatura se ne va del tutto.

   E' anche la scelta giusta per come e' fatto questo sito: le ombre
   sono piene e senza sfocatura per un motivo dichiarato -- una
   sfocatura fa galleggiare -- e una testata sfocata era l'unica cosa
   che diceva il contrario. */
header{
  background:var(--velo);
  border-bottom:1px solid rgba(var(--ink-rgb),.08);
  padding-top:12px; padding-bottom:12px;
}
/* sulla scena la testata puo' restare piu' leggera: li' dietro non
   scorre niente, e coprire la stanza sarebbe un peccato */
body.sez-collezione:not(.elenco) header{
  background:var(--velo-lieve); border-bottom-color:transparent;
}

/* ====================================================================
   LA TENDINA DELLE TAVOLOZZE

   Sta nel profilo, sopra la lingua, e ha la stessa forma delle righe
   che le stanno accanto -- etichetta a sinistra, comando a destra --
   perche' e' la stessa cosa: una preferenza che vale per tutto il sito.

   Quello che si sceglie sono COLORI, quindi ogni voce li porta addosso:
   otto quadretti in fila, che e' la tavolozza intera. Il nome serve a
   nominarla dopo, non a sceglierla.
   ==================================================================== */
.tavolozze{margin:14px 0 0}
.tavolozze > summary{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  list-style:none; padding:8px 12px; border-radius:var(--r-s);
  background:rgba(var(--ink-rgb),.05);
}
.tavolozze > summary::-webkit-details-marker{display:none}
.tavolozze > summary:hover{background:rgba(var(--ink-rgb),.09)}
.tavolozze > summary b{
  font-family:var(--ff-text); font-size:13px; font-weight:600; color:var(--ink);
}
/* Il chevron: gira aprendo, come le altre tendine del sito. */
.tavolozze > summary::after{
  content:''; margin-left:auto; width:8px; height:8px; flex:none;
  border-right:1.6px solid var(--ink-soft); border-bottom:1.6px solid var(--ink-soft);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s var(--ease);
}
.tavolozze[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}

/* Nel riassunto della tendina basta il colore scelto: la domanda a cui
   quella riga risponde e' "di che colore e' adesso". */
.tav-mostra{display:flex; gap:2px; flex:none}
.tav-mostra i{width:16px; height:16px; border-radius:0; display:block}

#pro-tema-lista{
  display:flex; flex-direction:column; gap:12px; margin:8px 0 0; padding:0 2px;
  animation:apreSotto .22s var(--ease) both;
}

/* LE DUE BASI, affiancate. Ognuna porta un "Aa" sul proprio fondo e con
   il proprio inchiostro: e' l'unica anteprima che serve, perche' e'
   esattamente la cosa che la base decide -- se il testo si legge. */
.tav-basi{display:flex; gap:8px}

/* PESANO DUE ID, e non e' un vezzo: dentro il profilo c'e' gia'
   `#profilo button:not(.primario):not(.secondario):not(.distruttivo)`,
   che vale un id, TRE classi e un elemento -- ogni `:not()` conta come
   la cosa che contiene. Con un id solo la voce scelta restava col
   fondo grigio del profilo invece del pieno. E' la lezione della
   pastiglia della lingua, pagata due volte. */
#profilo #pro-tema-lista .tav-base{
  flex:1; display:flex; align-items:center; gap:9px; text-align:left;
  font-family:var(--ff-text); font-size:13px; font-weight:500; color:var(--ink-soft);
  padding:8px 12px; border-radius:var(--r-s); cursor:pointer;
  background:rgba(var(--ink-rgb),.05); border:1px solid transparent;
}
#profilo #pro-tema-lista .tav-base:hover{color:var(--ink); background:rgba(var(--ink-rgb),.10)}
#profilo #pro-tema-lista .tav-base.on{
  color:var(--card); background:var(--accent); border-color:var(--accent);
}
.tav-prova{
  flex:none; width:30px; height:30px; border-radius:var(--r-s);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-display); font-weight:900; text-transform:uppercase; letter-spacing:.02em; font-size:13px; line-height:1;
  box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.14);
}
#pro-tema-lista .tav-nome{flex:1; min-width:0}

/* L'ACCENTO: otto predefiniti e la ruota in fondo, la stessa forma del
   pannello della libreria. */
/* DUE FILE, una per colore: l'etichetta a sinistra e i colori a
   destra, come ogni altra riga di scelta del profilo. */
.tav-fila{display:flex; align-items:center; gap:10px; margin:0 0 10px}
.tav-fila:last-child{margin-bottom:0}
.tav-fila-tit{
  flex:none; min-width:74px;
  font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-soft);
}
.tav-accenti{display:flex; flex-wrap:wrap; gap:9px; align-items:center}
#profilo #pro-tema-lista .tav-acc{
  width:30px; height:30px; padding:0; border-radius:0; border:0; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.14);
}
#profilo #pro-tema-lista .tav-acc.on{
  box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--accent);
}
/* Anche qui la ruota porta l'arcobaleno e non un colore: stessa misura
   delle pastiglie accanto, nessun bordo da spiegare. */
#pro-tema-lista .ruota{
  width:30px; height:30px; padding:0; border-radius:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0;
  -webkit-appearance:none; appearance:none;
}
#pro-tema-lista .ruota .ico{width:20px; height:20px}

@media (pointer:coarse){
  .tavolozze > summary{padding:11px 12px}
  #profilo #pro-tema-lista .tav-base{padding:11px 12px}
  #profilo #pro-tema-lista .tav-acc, #pro-tema-lista .ruota{width:34px; height:34px}
}

/* --- il marchio, piu' grande --------------------------------------- */
.brand b{font-size:clamp(21px,2.8vw,27px); font-weight:600; letter-spacing:-.02em}

/* ====================================================================
   LA FASCIA DEL TABLET

   Sopra gli 880 la testata riprende le sezioni, chi sei e l'uscita.
   Ma fra 881 e 1150 in quella riga ci sono SEI cose -- marchio, frase,
   quattro sezioni, contatore, nome, esci -- e non ci stanno: andavano
   a capo il marchio ("il dado e' / trap") e il contatore ("la mia /
   collezione: 14"), e la testata passava da 62 pixel a 87, a 900px
   perfino a 102.

   Quei quaranta pixel non li perde la testata: li perde la FASCIA
   LIBERA sopra il mobile, che e' quella che tiene il nome della
   libreria e i due comandi che galleggiano. Misurata: 91 px a 1440,
   73 a 1280, 47 a 1024 e VENTI a 900x700 -- dove il nome finiva
   addosso alla testata e l'imbuto cadeva sopra il nome del mobile
   accanto.

   Quello che se ne va e' la frase sotto il marchio: e' l'unica cosa
   della riga che non porta da nessuna parte, e restituisce tutto lo
   spazio che serve. Torna sopra i 1150, dove ci sta.
   ==================================================================== */

/* Il marchio non va a capo MAI. Sono tre parole e un nome: spezzarle
   non le fa stare meglio da nessuna parte, e sotto gli 880 questa
   regola c'era gia'. */
.brand b{white-space:nowrap}

@media (min-width:881px) and (max-width:1150px){
  .brand span{display:none}
  /* Il contatore e' una frase sola e va letta su una riga: a capo
     diventa due righe di testo piccolo dentro una pastiglia, cioe' la
     cosa piu' alta della testata. */
  #conta{white-space:nowrap}
  /* E tutto il resto si stringe di un filo, invece che stringersi da
     solo andando a capo. */
  header{gap:10px; padding-left:20px; padding-right:20px}
  .brand b{font-size:21px}
  #sezioni{gap:4px}
  #sezioni button{padding:8px 11px; font-size:12.5px}
  .tool{font-size:12px; padding:8px 11px}
  .tools{gap:6px}
}

/* --- imbuto e stanza: quadrati davvero -----------------------------
   Avevano un'imbottitura uguale sui quattro lati, che pero' con
   un'icona non quadrata dentro non basta a fare un quadrato. */
#vista-apri, #stanza-apri{
  width:40px; height:40px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
}
#vista-apri .ico, #vista-apri svg, #stanza-apri .ico, #stanza-apri svg{
  width:19px; height:19px;
}
@media (pointer:coarse){
  #vista-apri, #stanza-apri{width:44px; height:44px; min-height:0}
}

/* --- il binario: piu' su e piu' leggibile -------------------------- */
#rail{bottom:38px}
#rail-txt{color:var(--ink); opacity:1; font-weight:600; font-size:11px}
.rail-bar{background:rgba(var(--ink-rgb),.28)}
.rail-bar i{background:var(--accent)}
@media (max-width:879px){
  #rail{bottom:calc(74px + env(safe-area-inset-bottom))}
}

/* --- in "tutti i giochi" i gruppi non c'entrano --------------------
   I filtri per gruppo appartengono alla vista a cartelle. Nell'elenco
   intero restavano accesi e filtravano una lista che non li mostra:
   due comandi che dicono cose diverse sulla stessa schermata. */
/* I DUE TASTI DEI GRUPPI stanno nella vista dei gruppi: la' si decide
   cosa sta con cosa. In "tutti i giochi" non c'entrano niente.

   `#mia-gruppi` invece NON si nasconde piu', ed era un errore che
   stava li' da quando le pastiglie di filtro per gruppo sono state
   tolte: adesso quel contenitore tiene solo il filtro dei preferiti,
   che `disegnaGruppiFiltro` disegna **soltanto** in "tutti i giochi".
   La regola nascondeva quindi l'unica cosa che ci finisce dentro, e il
   filtro non si e' mai visto -- codice vivo dietro una regola morta. */
/* I due tasti dei gruppi appartengono alla vista a gruppi: si fanno
   vedere SOLO li', invece di nascondersi da una vista sola -- che con
   tre viste vuol dire comparire nelle altre due. */
body:not(.vista-gruppi) #mia-gestisci,
body:not(.vista-gruppi) #gru-apri{display:none !important}
/* ...e allora la barra non ha piu' niente dentro: i due tasti dei
   gruppi sono nascosti e la stella e' salita con le viste. Un
   contenitore vuoto non si vede ma il suo margine si', e qui erano
   quattordici pixel di niente fra la ricerca e il primo gioco. */
body:not(.vista-gruppi) #mia .mia-barra{display:none}

/* --- la finestrella delle azioni non deve finire sotto le righe -----
   Non era trasparente: era COPERTA. Ogni riga ha il suo involucro
   posizionato, e le righe che vengono dopo si disegnano sopra a quelle
   di prima -- quindi i pulsanti delle righe sotto passavano davanti al
   menu aperto. La riga aperta sale sopra tutte. */
.righe.compatta > li.menu-su{position:relative; z-index:30}
.riga-azioni{z-index:31}

/* --- il profilo ----------------------------------------------------- */
.pro-occhiello{margin:0 0 14px}
.pro-testa{
  display:flex; align-items:center; gap:18px; flex-wrap:nowrap; margin:0;
}
.pro-faccia{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:10px}
#pro-avatar{
  width:104px; height:104px; border-radius:0; overflow:hidden;
  display:block; background:rgba(var(--ink-rgb),.06);
}
#pro-cambia{font-size:12px; padding:8px 12px}
.pro-chi{flex:1 1 auto; min-width:0}
#pro-nick{margin:0; font-size:clamp(24px,5vw,32px); font-weight:600; letter-spacing:-.02em; line-height:1.1}
.pro-mail{margin:4px 0 0; font-size:13px; color:var(--ink-soft); overflow-wrap:anywhere}
.pro-dati{margin:26px 0 0}
.pro-cod{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0}
.pro-nota{margin:12px 0 0; font-size:13px; color:var(--ink-soft); line-height:1.6}
.pro-fondo{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 0}
@media (max-width:420px){
  #pro-avatar{width:84px; height:84px}
  .pro-testa{gap:14px}
}

/* --- I COMANDI ALLINEATI AL MOBILE ---------------------------------
   Le due quote le calcola `allineaComandi()` in js/app.js proiettando
   la cima e il piede della libreria: qui si usano e basta. I valori di
   scorta servono al primo fotogramma e a chi non ha WebGL. */
:root{--y-alto:96px; --y-basso:640px}

/* I DUE COMANDI STANNO IN ALTO, UNO PER LATO.

   La lampada ha preso il posto dell'imbuto a sinistra e l'imbuto e'
   passato a destra, alla stessa quota: il nome della libreria sta in
   mezzo fra i due, e la riga in alto si legge come una riga sola --
   arreda, nome, filtra.

   In basso resta il solo binario, che cosi' non ha piu' niente accanto
   con cui contendersi l'angolo. */
#vista-apri{
  left:auto; right:clamp(12px,2.4vw,28px);
  top:var(--y-alto); bottom:auto;
  transform:translateY(-50%);
}
/* i pannelli si aprono SOTTO al loro pulsante, allineati al suo lato */
#vista{
  left:auto; right:clamp(12px,2.4vw,28px);
  top:calc(var(--y-alto) + 30px); bottom:auto; transform:none;
}
body.vista #vista{transform:none}

#stanza-apri{
  left:clamp(12px,2.4vw,28px); right:auto;
  top:var(--y-alto); bottom:auto;
  transform:translateY(-50%);
}
/* La larghezza va ridetta: su schermo stretto una media query lo faceva
   a tutta pagina, perche' li' saliva dal basso come un cassetto. Adesso
   e' una finestrella ancorata a un pulsante in alto, e un cassetto a
   tutta larghezza appeso in alto a sinistra non e' ne' l'uno ne'
   l'altro. */
#stanza{
  left:clamp(12px,2.4vw,28px); right:auto;
  top:calc(var(--y-alto) + 30px); bottom:auto; transform:none;
  width:min(320px, calc(100vw - 24px));
}
body.arreda #stanza{transform:none}

#rail{
  top:var(--y-basso); bottom:auto;
  transform:translate(-50%,-50%);
}
@media (max-width:879px){
  #rail{top:var(--y-basso); bottom:auto}
}
#mobili{bottom:calc(100% - var(--y-basso) + 30px)}

/* Nome e mail piu' staccati dalla faccia: appiccicati sembravano la
   didascalia dell'immagine invece di chi sei. */
.pro-testa{gap:26px}
@media (max-width:420px){ .pro-testa{gap:20px} }

/* --- LE PASTIGLIE: TINTE E VOCI SONO DUE COSE DIVERSE ---------------

   Una regola sola le aveva rese tutte tonde, e su un pulsante di testo
   un raggio del 50% da' un'ELLISSE -- quella era la "selezione a
   cerchio" attorno a CORNICI. Una tinta e' un bollino, e un bollino e'
   tondo; una voce e' una parola, e una parola sta in una pastiglia.

   La selezione non e' un contorno che gira attorno alla forma: sulle
   tinte e' un anello staccato -- serve lo stacco, se no su un colore
   chiaro l'anello ci si confonde -- e sulle voci e' il pieno. */
/* Tutte le file di tinte del pannello sono BOLLINI tondi. `#st-nome-tinta`
   era rimasto quadrato e `#st-fari-tinta` sarebbe nato tale: quattro file
   di colori nello stesso pannello, due tonde e due squadrate, si leggono
   come due cose diverse che non lo sono. */
.pastiglie.tinte button, #st-scaffali button, #st-muro button,
#st-pavimento button, #st-nome-tinta button, #st-fari-tinta button{
  width:30px; height:30px; border-radius:0; padding:0; border:0;
  box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.14);
}
.pastiglie.tinte button.on, #st-scaffali button.on,
#st-muro button.on, #st-pavimento button.on{
  outline:none;
  box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--accent);
}

/* LA RUOTA. Stessa forma e stessa misura dei bollini -- e' una scelta
   nella stessa fila, e due forme diverse si leggerebbero come due cose
   diverse -- ma con il bordo tratteggiato, che dice "qui il colore lo
   metti tu" invece di mostrarne uno gia' scelto.

   IL CAMPO NON SI VEDE PIU'. Era un `input[type=color]`, che disegnava
   un proprio riquadro dentro di se' e per allinearlo servivano i due
   `::-webkit-color-swatch`; adesso il campo e' `hidden` -- tiene il
   valore e basta -- e quello che si vede e' un pulsante, che apre la
   carta dei colori disegnata da js/scegli.js.

   Il colore sta RIENTRATO come prima, e adesso lo fa un'imbottitura
   piu' `background-clip:content-box` invece di uno pseudo-elemento del
   browser. Il rientro non e' un vezzo: senza, il colore riempie il
   bollino e la ruota si legge come un settimo predefinito -- l'anello
   tratteggiato attorno e' tutta la differenza fra "questo colore" e
   "scegli un colore".

   E il colore si scrive su `background-color` e non su `background`:
   lo shorthand riazzera `background-clip`, cioe' cancellerebbe il
   rientro dal lato del markup senza che si veda perche'. */
input.ruota{display:none}
/* L'ARCOBALENO NON HA PIU' BISOGNO DI SPIEGARSI. Il bordo tratteggiato
   e il rientro servivano a dire "questo non e' un colore scelto, e'
   dove li scegli": col colore addosso la ruota era indistinguibile da
   una pastiglia, e il tratteggio era la toppa. Adesso porta sei strisce
   e lo dice da se', quindi il fondo e il bordo se ne vanno e resta il
   segno, grande quanto le pastiglie accanto. */
.pastiglie.tinte .ruota, #stanza .pastiglie .ruota{
  width:34px; height:34px; padding:0; border-radius:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0;
  -webkit-appearance:none; appearance:none;
}
.ruota.arcobaleno .ico{width:22px; height:22px}
.ruota.arcobaleno{
  box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.14);
  transition:transform .12s var(--ease);
}
.ruota.arcobaleno:hover{transform:scale(1.06)}
.ruota.arcobaleno:active{transform:scale(.94)}
/* Non c'e' piu' nessuno stato "scelto" sulla ruota: non e' una scelta,
   e' una porta. Quello che hai scelto si vede acceso fra le pastiglie,
   o -- se non e' fra le tre -- sulla cosa stessa che stai colorando. */

.pastiglie.testo button{
  width:auto; height:auto; border-radius:0; padding:8px 14px;
  font-family:var(--ff); font-size:13px; font-weight:500;
  letter-spacing:0; text-transform:none; line-height:1.2;
  color:var(--ink-soft); background:rgba(var(--ink-rgb),.06);
}
.pastiglie.testo button:hover{background:rgba(var(--ink-rgb),.11); color:var(--ink)}
.pastiglie.testo button.on{
  outline:none; background:var(--accent); color:var(--su-accent); font-weight:600;
}

/* nel laboratorio le tinte sono tante: vanno a capo con ordine */
.pro-lab-riga{display:flex; align-items:flex-start; gap:14px; margin:0 0 14px}
.pro-lab-riga>span:first-child{
  flex:0 0 62px; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-soft); padding-top:6px;
}
.pro-lab-riga .pastiglie{gap:9px}

/* Sei tinte per riga, non cinque piu' una. L'etichetta si stringe e i
   bollini pure quel tanto che basta: una riga spezzata in 5+1 fa
   sembrare l'ultima tinta un ripensamento invece di una scelta come le
   altre. */
/* L'etichetta va SOPRA i bollini, non a fianco. Di fianco si mangiava
   settanta pixel su duecentottanta e le sei tinte finivano 5+1 -- con
   l'ultima che sembra un ripensamento invece di una scelta come le
   altre. Sopra, la riga e' tutta loro: ci stanno in sei e possono
   anche essere piu' grandi, che sul tocco non guasta.

   Vale per le tre righe di colore: quella della luce ha un cursore e
   quella degli arredi ha delle parole, e tutte e due stanno meglio in
   linea. */
#stanza .st-riga:not(.luce):not(.alto){
  display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  margin:0 0 16px;
}
#stanza .st-riga:not(.luce):not(.alto)>span:first-child{
  flex:none; font-size:11px; letter-spacing:.05em;
}
#stanza .pastiglie{gap:9px}
#st-scaffali button, #st-muro button, #st-pavimento button,
#st-nome-tinta button, #st-fari-tinta button{width:34px; height:34px}

/* Anche gli arredi con l'etichetta sopra: con le tre righe di colore
   incolonnate cosi', l'unica rimasta a fianco sembrava un errore. */
#stanza .st-riga.alto{
  display:flex; flex-direction:column; align-items:flex-start; gap:9px; margin:0 0 16px;
}
#stanza .st-riga.alto>span:first-child{flex:none; font-size:11px; letter-spacing:.05em; padding:0}

/* --- IL BINARIO: LA BARRA AL CENTRO, NON IL GRUPPO ------------------
   `#rail` era centrato per intero, testo compreso: siccome il "1 / 3"
   sta a sinistra, la BARRA finiva spostata a destra di mezza scritta.
   Adesso il numero e' sfilato dal flusso e appeso a sinistra, cosi'
   l'unica cosa in fila e' la barra -- ed e' lei a stare in mezzo, che
   e' quello che l'occhio misura.

   La traccia e' anche un po' piu' larga: con il margine ai capi il
   cursore ha meno corsa, e a duecento pixel i passi diventavano corti. */
/* Il numero torna DENTRO la pastiglia. Stava fuori, appeso a sinistra,
   perche' senza un fondo visibile centrare il gruppo faceva sembrare la
   barra spostata a destra di mezza scritta. Con una pastiglia vera
   attorno a tutti e due, quello che l'occhio centra e' la pastiglia --
   e il numero fuori dal fondo chiaro tornava illeggibile sulla stanza,
   che era il punto di partenza. */
#rail{position:fixed; padding:3px 6px; gap:4px}
#rail-txt{position:static; transform:none; margin:0 1px}
.rail-bar{width:min(260px,58vw); max-width:none; flex:0 0 auto}
#rail-thumb{transition:left .18s var(--ease), width .18s var(--ease)}
.rail-bar.presa #rail-thumb{transition:none}

/* `background:` e' una SCORCIATOIA, e come tutte le scorciatoie
   riazzera quello che non nomina -- compreso `background-clip`. E' lui
   a tenere sottile la traccia: la riga e' alta quattro pixel e l'area
   da prendere col dito viene da due bordi trasparenti da dodici. Con la
   scorciatoia usata piu' sotto il clip tornava a `border-box` e il
   grigio riempiva anche i bordi: una traccia alta ventotto pixel.
   Qui si usa `background-color`, che non tocca il resto. */
.rail-bar{background:none; background-color:rgba(var(--ink-rgb),.28); background-clip:padding-box}
.rail-bar:hover{background-color:rgba(var(--ink-rgb),.34)}

/* il numero non va a capo: appeso fuori dal flusso, la larghezza
   disponibile e' quella che e' e "1 / 3" si spezzava in tre righe */
#rail-txt{white-space:nowrap}

/* --- LA TRACCIA NON SI FA CON I BORDI ------------------------------

   L'area da prendere col dito veniva da due bordi trasparenti da dodici
   pixel attorno a una riga alta quattro. Con `box-sizing:border-box`
   -- che qui vale per tutto -- quei ventiquattro pixel di bordo si
   mangiano l'altezza dichiarata: la scatola di riempimento resta alta
   ZERO, e con `background-clip:padding-box` la traccia semplicemente
   non c'e'. Si vedeva solo finche' una scorciatoia `background:`
   rimetteva il clip a `border-box` e il grigio riempiva i bordi: una
   traccia alta ventotto pixel, per sbaglio.

   Adesso l'elemento E' l'area da prendere -- alto ventotto, senza bordi
   -- e la riga sottile e' un `::before` in mezzo. Due mestieri, due
   cose. */
.rail-bar{
  position:relative; width:min(150px,36vw); max-width:none; flex:0 0 auto;
  height:20px; border:0; padding:0; border-radius:0;
  background:none; background-color:transparent;
  cursor:pointer; touch-action:none; pointer-events:auto;
}
.rail-bar::before{
  content:''; position:absolute; left:0; right:0; top:50%; height:3px;
  margin-top:-1.5px; border-radius:0; background:rgba(var(--ink-rgb),.26);
}
.rail-bar:hover::before{background:rgba(var(--ink-rgb),.34)}
#rail-thumb{
  position:absolute; top:50%; margin-top:-1.5px; height:3px;
  border-radius:0; background:var(--accent);
}
.rail-bar:hover #rail-thumb, .rail-bar.presa #rail-thumb{background:var(--accent-su)}

/* ===================================================================
   IL PANNELLO DELLA LIBRERIA
   Luce, nome, aspetto, ordine, e i due gesti che cambiano quanti sono.
   Va dal generale al particolare, e le due parti lunghe stanno in
   `<details>` perche' non si guardano insieme.
   =================================================================== */

/* Il pannello e' una colonna: in mezzo scorre, in fondo no. I due
   gesti che cambiano quanti sono i mobili devono restare sotto gli
   occhi anche con tutte le tendine aperte. */
#stanza{
  max-height:calc(100vh - var(--y-alto) - 90px);
  display:flex; flex-direction:column; overflow:hidden;
}
.st-scorre{
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  min-height:0; margin:0 -4px; padding:0 4px;
}
#stanza .st-gesti{flex:none; margin-top:14px; padding-top:12px; border-top:1px dashed var(--line)}

/* il nome della libreria che stai guardando, in chiaro */
.st-nome{display:flex; gap:9px; align-items:center; margin:18px 0 0}
#st-rinomina{
  flex:1 1 auto; min-width:0; font-family:var(--ff); font-size:15px; font-weight:600;
  color:var(--ink); background:rgba(var(--ink-rgb),.05); border:0; border-radius:var(--r-s);
  padding:11px 13px;
}
#st-rinomina:focus-visible{outline:none; box-shadow:0 0 0 2px var(--accent)}
/* spento sul mobile di scorta: il segnaposto dice perche' */
#st-rinomina:disabled{opacity:.55; cursor:default}
#st-rinomina-ok{flex:0 0 auto; padding:11px 15px; font-size:13px}
#st-rinomina-ok:disabled{opacity:.4; cursor:default; background:rgba(var(--ink-rgb),.07); color:var(--ink-soft)}

/* --- le tendine ---------------------------------------------------- */
.st-tendina{margin:14px 0 0; border-top:1px dashed var(--line)}
.st-tendina summary{
  list-style:none; cursor:pointer; display:flex; align-items:center;
  font-family:var(--ff); font-size:14px; font-weight:500; color:var(--ink);
  padding:13px 2px; user-select:none;
}
.st-tendina summary::-webkit-details-marker{display:none}
.st-tendina summary::after{
  content:''; margin-left:auto; width:8px; height:8px;
  border-right:1.6px solid var(--ink-soft); border-bottom:1.6px solid var(--ink-soft);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s var(--ease);
}
.st-tendina[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.st-tendina summary:hover{color:var(--accent)}
.st-dentro{padding:2px 0 14px}

/* --- l'elenco delle librerie --------------------------------------- */
#st-lista{list-style:none; margin:10px 0 0; padding:0}
#st-lista li{
  display:flex; align-items:center; gap:10px; padding:9px 10px; margin:0 0 6px;
  background:rgba(var(--ink-rgb),.05); border-radius:var(--r-s);
  touch-action:none;
}
#st-lista li.qui{background:rgba(var(--accent-rgb),.12)}
#st-lista li.in-mano{
  background:var(--card); box-shadow:var(--shadow);
  position:relative; z-index:2;
}
#st-lista .nome{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--ff); font-size:14px; font-weight:500; color:var(--ink);
}
#st-lista li.qui .nome{color:var(--accent); font-weight:600}
#st-lista .quanti{
  flex:0 0 auto; font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums;
}
#st-lista button{
  flex:0 0 auto; width:32px; height:32px; padding:0; border:0; border-radius:var(--r-s);
  background:none; color:var(--ink-soft); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
#st-lista button:hover{background:rgba(var(--ink-rgb),.09); color:var(--ink)}
#st-lista button[data-fa="via"]:hover{background:rgba(var(--rosso-rgb),.14); color:var(--rosso)}
/* la maniglia si tiene premuta: il cursore lo dice */
#st-lista .presa{cursor:grab}
#st-lista li.in-mano .presa{cursor:grabbing}

/* --- i due gesti in fondo ------------------------------------------ */
.st-gesti{
  display:flex; flex-wrap:wrap; gap:9px; margin:16px 0 0;
  padding-top:14px; border-top:1px dashed var(--line);
}
.st-gesti button{flex:1 1 auto; padding:11px 14px; font-size:13px}
/* un comando che non si puo' usare si spegne e spiega perche' nel
   `title`, invece di fallire dopo il clic */
.st-gesti button:disabled{opacity:.4; cursor:default}
.st-gesti button:disabled:hover{background:rgba(197,74,58,.10); color:#a8412f}

/* dentro la tendina dell'aspetto il piede non ha piu' bisogno di un
   filo sopra: ce l'ha gia' la tendina */
.st-dentro .st-fondo{border-top:0; margin-top:10px; padding-top:0}

/* --- il profilo: i due comandi di identita' stanno insieme --------- */
.pro-io{display:flex; flex-wrap:wrap; gap:9px; margin:12px 0 0}
.pro-io button{padding:9px 14px; font-size:13px}
/* il codice e il suo copia sulla stessa riga, il pulsante in fondo */
.pro-cod{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.pro-cod>span:first-child{flex:0 0 auto}
.pro-cod b, #pro-codice{flex:0 1 auto}
#pro-copia{margin-left:auto; padding:11px 18px; font-size:13px}

/* --- il profilo, seconda passata ------------------------------------

   `#pro-copia` aveva una regola con un id, che batte qualunque classe:
   il `.primario` non arrivava mai. Le tre classi di livello valgono
   anche contro un id se glielo si dice, e qui glielo si dice una volta
   sola invece di rincorrere ogni pulsante. */
#profilo button.primario, #profilo button.secondario, #profilo button.distruttivo,
#stanza button.primario, #stanza button.secondario, #stanza button.distruttivo{
  border:0; border-radius:var(--r-s);
}
#profilo button.primario, #stanza button.primario{
  background:var(--accent); color:var(--su-accent); font-weight:600;
}
#profilo button.primario:hover, #stanza button.primario:hover{background:var(--accent-su); color:var(--su-accent)}
#profilo button.distruttivo, #stanza button.distruttivo{background:rgba(var(--rosso-rgb),.10); color:var(--rosso)}
#profilo button.secondario, #stanza button.secondario{background:rgba(var(--ink-rgb),.07); color:var(--ink)}

/* Il codice e il suo copia su una riga sola: sommati stavano 352 px in
   una riga da 343 e il pulsante andava a capo. L'etichetta si stringe e
   il codice pure quel tanto che basta. */
.pro-cod{flex-wrap:nowrap; gap:10px}
.pro-cod>span:first-child{font-size:10px; letter-spacing:.06em; line-height:1.2; max-width:64px}
.pro-cod b, #pro-codice{
  flex:1 1 auto; min-width:0; text-align:center; padding:11px 10px;
  letter-spacing:.10em; font-size:15px; overflow:hidden; text-overflow:ellipsis;
}
/* Solo icona: la parola "copia" si mangiava lo spazio del codice, che
   e' quello che si legge e si detta. Cosa fa lo dice il `title`. */
#pro-copia{flex:0 0 auto; margin-left:0; padding:11px; font-size:13px; line-height:0}

/* I due comandi di identita' stanno affiancati anche nella colonna
   stretta accanto alla faccia: si stringono, non si impilano. */
.pro-io{flex-wrap:nowrap}
.pro-io button{
  flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:9px 11px; font-size:12.5px;
}
@media (max-width:360px){ .pro-io{flex-wrap:wrap} }

.pro-io button{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 13px; font-size:13px; overflow:visible; text-overflow:clip;
}
.pro-io .ico{width:15px; height:15px}

/* --- IL BINARIO SI TOCCA SOLO DOVE SERVE ---------------------------

   Era invisibile fuori dalla libreria ma **restava cliccabile**:
   `opacity:0` nasconde, non disattiva. Nel catalogo, nel profilo e
   sopra l'elenco c'era una striscia larga mezzo schermo che, presa,
   faceva scorrere una scena che nessuno stava guardando -- e siccome
   non si vedeva, sembrava che il sito reagisse da solo.

   La regola giusta e' al contrario: NIENTE tocca il binario, e i
   puntatori si riaccendono solo dove il binario si vede davvero.
   Cosi' una schermata nuova non se lo porta dietro per dimenticanza. */
#rail, .rail-bar{pointer-events:none}
body.browse:not(.elenco):not(.ferma):not(.sez-catalogo):not(.sez-profilo) .rail-bar{
  pointer-events:auto;
}

/* --- LE PARTITE HANNO TRE LIVELLI, E SI DEVONO VEDERE ---------------

   Sezione > gioco > partita. Prima erano tutti e tre riquadri tinti
   della stessa misura, uno dentro l'altro: aperta la sezione non si
   capiva se «Root» fosse un fratello di «Partite» o un suo figlio.

   Si scende di livello in tre modi insieme, perche' uno solo non
   basta a farlo leggere: un RIENTRO, un filo verticale che dice a chi
   appartiene quel rientro, e un peso di testo minore. Il fondo tinto
   resta solo al livello di mezzo -- il gioco -- che e' quello che si
   apre e si chiude. */
#pro-partite{margin:12px 0 0}

/* livello 2: il gioco */
.gio-gruppo{
  margin:0 0 8px; padding-left:14px;
  border-left:2px solid rgba(var(--ink-rgb),.12);
}
.gio-gruppo:last-child{margin-bottom:0}
.gio-gioco{
  border-bottom:0; border-radius:var(--r-s);
  padding:11px 13px; gap:4px 10px;
  background:rgba(var(--ink-rgb),.055);
}
.gio-gioco b{
  font-family:var(--ff); font-weight:600; font-size:14px; letter-spacing:0;
}
.gio-gioco span{
  font-size:12px; letter-spacing:0; text-transform:none; color:var(--ink-soft);
}
.gio-gioco::after{
  content:''; margin-left:auto; width:7px; height:7px; flex:none;
  border-right:1.6px solid var(--ink-soft); border-bottom:1.6px solid var(--ink-soft);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s var(--ease);
}
.gio-gioco[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px)}

/* livello 3: la singola partita */
.gio-gruppo .giocate{
  margin:6px 0 0 10px; padding-left:14px;
  border-left:2px solid rgba(var(--ink-rgb),.08);
}
.gio-gruppo .giocate li{
  padding:9px 0; border-bottom:1px solid rgba(var(--ink-rgb),.07);
}
.gio-gruppo .giocate li:last-child{border-bottom:0}
.gio-gruppo .gio-testa b{font-size:13px; font-weight:500}
.gio-gruppo .gio-testa span{font-size:11px; letter-spacing:.04em; text-transform:none}
.gio-gruppo .gio-chi{font-size:12.5px; margin-top:3px}

/* ===================================================================
   IL MODULO DELLA PARTITA
   =================================================================== */

/* --- i suggerimenti del gioco --------------------------------------
   Prima la collezione, poi il catalogo: si gioca ai giochi che si hanno,
   e la riga sotto dice da dove viene ognuno. */
.pa-sugg{
  list-style:none; margin:-4px 0 0; padding:6px; position:relative; z-index:3;
  background:var(--card); border-radius:var(--r-m); box-shadow:var(--shadow);
  max-height:220px; overflow:auto;
}
.pa-sugg[hidden]{display:none}
.pa-sugg button{
  width:100%; display:flex; align-items:baseline; gap:10px; text-align:left;
  background:none; border:0; border-radius:0; cursor:pointer; padding:10px 12px;
  font-family:var(--ff);
}
.pa-sugg button:hover{background:rgba(var(--ink-rgb),.07)}
.pa-sugg b{font-size:14px; font-weight:500; color:var(--ink)}
.pa-sugg span{margin-left:auto; font-size:11px; color:var(--ink-soft); flex:none}

/* --- chi mettere al tavolo ------------------------------------------
   Un campo, e i nomi che appaiono scrivendo. Ha la faccia degli altri
   campi del modulo e non quella di una barra di ricerca: quello che si
   scrive qui e' un nome, e se non risulta a nessuno vale lo stesso. */
#pa-chi-q{
  width:100%; font-family:var(--ff); font-size:14px; color:var(--ink);
  background:rgba(var(--ink-rgb),.05); border:0; border-radius:var(--r-s);
  padding:11px 12px; margin:0 0 4px;
}
#pa-chi-q:focus-visible{outline:none; box-shadow:0 0 0 2px var(--accent)}
/* Tu sei sempre il primo nome, e si vede: l'accento dice "questo sei tu"
   senza doverlo scrivere. */
.pa-sugg span.tu{color:var(--accent); font-weight:600}

/* --- il tavolo ------------------------------------------------------
   Una riga per persona: corona, nome, posizione calcolata, punti.
   La posizione non si scrive: la fa il sito dai punti. */
.pa-chi{list-style:none; margin:14px 0 0; padding:0}
.pa-chi li{
  display:flex; align-items:center; gap:10px; padding:9px 11px; margin:0 0 7px;
  background:rgba(var(--ink-rgb),.05); border-radius:var(--r-s);
}
.pa-chi li.vince{background:rgba(var(--accent-rgb),.12)}
/* Il nome e la sua corona stanno insieme: la corona e' di quel nome,
   non una colonna di comandi in testa alla riga. */
.pa-chi .chi-nome{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:4px;
}
.pa-chi .nome{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--ff); font-size:14px; font-weight:500; color:var(--ink);
}
.pa-chi li.vince .nome{color:var(--accent); font-weight:600}
.pa-chi .posto{
  flex:0 0 auto; font-size:12px; font-weight:600; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.pa-chi .punti{
  flex:0 0 66px; width:66px; text-align:center; font-family:var(--ff); font-size:13px;
  background:var(--card); border:0; border-radius:var(--r-s); padding:9px 8px; color:var(--ink);
}
.pa-chi .punti:focus-visible{outline:none; box-shadow:0 0 0 2px var(--accent)}
/* Appena accennata dove non ha vinto nessuno -- il tavolo si legge, e
   una fila di corone spente direbbe "qui si preme" a ogni riga -- e
   piena su chi ha vinto. Resta comunque un pulsante vero, e sotto il
   dito si accende: senza, chi non segna i punti di tutti non avrebbe
   piu' modo di dire chi ha vinto. */
.pa-chi .corona{opacity:.18}
.pa-chi .corona:hover, .pa-chi .corona:focus-visible{opacity:1}
.pa-chi li.vince .corona{opacity:1}
.pa-chi .corona, .pa-chi .via{
  flex:0 0 auto; width:32px; height:32px; padding:0; border:0; border-radius:var(--r-s);
  background:none; color:var(--ink-soft); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.pa-chi .corona:hover{background:rgba(var(--accent-rgb),.14); color:var(--accent)}
.pa-chi .corona.on{color:var(--accent)}
/* La corona si RIEMPIE da accesa, e per riempirla si mira al `path`:
   l'icona porta `fill="none"` addosso come attributo, e un attributo
   sul figlio vince su una proprieta' ereditata dal padre. La regola sul
   solo `<svg>` cambiava il contorno e basta -- e' la trappola gia'
   scritta per il cuore e la stella del pannello. */
.pa-chi .corona.on .ico, .pa-chi .corona.on .ico path{fill:currentColor}

/* ORO, ARGENTO, BRONZO. Sono le uniche tinte del sito che non vengono
   dalla tavolozza, ed e' voluto: una medaglia non e' una scelta
   estetica, e' un oggetto che ha il suo colore -- come le temperature
   dei faretti, che per lo stesso motivo non seguono le tavolozze. Dal
   quarto in poi non c'e' medaglia, che e' come funziona un podio. */

/* LA FACCIA DI CHI E' AL TAVOLO. Il meeple di chi ha un profilo, una
   sagoma neutra per gli altri: al tavolo c'e' quasi sempre qualcuno
   che sul sito non c'e', e disegnargli una faccia finta direbbe una
   cosa che non e' vera. */
.pa-chi .chi-faccia{
  width:34px; height:34px; flex:none; border-radius:0;
  display:inline-flex; align-items:center; justify-content:center;
}
.pa-chi .chi-faccia.vuota{
  color:var(--ink-soft); background:rgba(var(--ink-rgb),.06);
}
.pa-chi .chi-faccia.vuota .ico{width:19px; height:19px}

/* IL PODIO. Tre gradini piu' una pedana: il primo in mezzo e piu' alto,
   il secondo a sinistra, il terzo a destra, il quarto fuori dal podio
   perche' un podio ha tre posti. Le altezze sono quelle e non una
   proporzione dei punti: un podio dice l'ORDINE, non la distanza. */
.pa-podio{
  display:flex; align-items:flex-end; justify-content:center; gap:6px;
  margin:14px 0 4px; padding:0 2px;
  /* Il piano su cui i gradini poggiano. Senza, quattro rettangoli di
     altezza diversa allineati in basso si leggono come le barre di un
     grafico -- e un grafico direbbe la DISTANZA fra i punteggi, che
     non e' quello che un podio racconta. */
  border-bottom:2px solid rgba(var(--ink-rgb),.18);
}
.pod-posto{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column;
  align-items:center; gap:2px; text-align:center;
}
.pod-nome{
  font-size:12px; font-weight:600; color:var(--ink);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pod-punti{font-size:11px; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.pod-base{
  width:100%; border-radius:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-display); font-weight:900; text-transform:uppercase; letter-spacing:.02em; font-size:15px; color:var(--card);
}
.pod-posto.oro     .pod-base{height:56px; background:var(--oro)}
.pod-posto.argento .pod-base{height:42px; background:var(--argento)}
.pod-posto.bronzo  .pod-base{height:32px; background:var(--bronzo)}
/* Il quarto non ha medaglia e non ha gradino: una pedana bassa, del
   grigio della stanza, che dice "sei arrivato quarto" senza fingere. */
.pod-posto.quarto  .pod-base{
  height:18px; background:rgba(var(--ink-rgb),.14); color:var(--ink-soft);
  font-size:12px;
}
.pa-chi .via:hover{background:rgba(var(--rosso-rgb),.14); color:var(--rosso)}

/* Il modulo della partita su schermo stretto: la riga del tavolo ha
   quattro cose e va stretta, e le due porte per aggiungere qualcuno
   stanno su righe diverse perche' fanno cose diverse. */
@media (max-width:520px){
  .pa-chi li{gap:7px; padding:8px 9px}
  .pa-chi .punti{flex:0 0 58px; width:58px; padding:8px 6px}
  .pa-chi .corona, .pa-chi .via{width:30px; height:30px}
}

/* SOTTO I 430 PX IL NOME PRENDE UNA RIGA SUA.

   La riga del tavolo tiene sei cose -- faccia, nome, corona, posizione,
   punti, calcolatrice, togli -- e cinque hanno una larghezza fissa: a
   375 px ne restavano una trentina per il nome, cioe' "A...", "B...".
   Un tavolo in cui non si leggono i nomi non e' un tavolo.

   Le cose fisse sono fisse per un motivo (un campo di punti stretto non
   si centra col pollice, una corona piccola non si tocca), quindi a
   cedere e' la DISPOSIZIONE: il nome sale in cima con `order:-1` e una
   base del 100%, e tutto il resto scende sotto, dove ci sta comodo --
   34+20+58+30+30 piu' i vuoti fanno circa 200 px su 343 disponibili.

   E' lo stesso ragionamento della riga dei due voti nella scheda: si
   decide CHI cede per primo, invece di lasciar cedere quello che non
   deve. */
@media (max-width:430px){
  .pa-chi li{flex-wrap:wrap; row-gap:7px}
  .pa-chi .chi-nome{flex:1 1 100%; order:-1}
  .pa-chi .nome{white-space:normal}     /* una riga tutta sua: puo' andare a capo */
  /* IL CAMPO DEI PUNTI NON CRESCE.

     Era `flex:1 1 auto`, cioe' si prendeva tutto lo spazio avanzato:
     duecento pixel di casella per quattro cifre, e la calcolatrice e la
     croce spinte su una TERZA riga. Cosi' ogni persona al tavolo era alta
     centoquaranta pixel, e una partita in quattro non ci stava a schermo.

     Il conto, su 375: 34 di faccia + 14 di posto + 72 di punti + 32 di
     calcolatrice + 30 di croce, piu' quattro vuoti da 7, fanno 210 su 317
     disponibili. Due righe per persona, e la calcolatrice torna attaccata
     al campo che riempie -- che e' il motivo per cui sta li'. */
  .pa-chi .punti{flex:0 0 72px; width:72px; min-width:0}
  .pa-chi button.conta{width:30px; height:30px}
}

/* ===================================================================
   LA REGOLA DELLE TENDINE VALE OVUNQUE

   Ogni volta che una tendina sta dentro un elenco, si scende di livello
   negli stessi tre modi: RIENTRO, filo verticale che dice a chi
   appartiene quel rientro, e peso di testo minore. Vale per le partite,
   per le cartelle dei gruppi, e per qualunque tendina che verra' dopo.
   =================================================================== */

.cartella{
  margin:0 0 8px; padding-left:14px;
  border-left:2px solid rgba(var(--ink-rgb),.12);
}
.cartella:first-child{margin-top:12px}
.cartella-tit{
  border-bottom:0; border-radius:var(--r-s);
  background:rgba(var(--ink-rgb),.055); padding:11px 13px;
  font-size:14px; font-weight:600;
}
.cartella-tit:hover{background:rgba(var(--ink-rgb),.10); color:var(--accent)}
.cartella-tit span{font-size:12px}
/* LA FRECCIA: IL VERSO DELLO SPOSTAMENTO VIENE PRIMA DELLA ROTAZIONE.

   Era `rotate(45deg) translate(-2px,-2px)`: scritto cosi' lo
   spostamento avviene nel sistema GIA' RUOTATO, quindi chiusa andava
   in su a sinistra e aperta -- ruotata di centottanta gradi rispetto a
   prima -- andava dalla parte opposta. La freccia cadeva fuori asse
   proprio aprendo la tendina, che e' quando la si guarda.

   Con il `translate` davanti lo spostamento e' nel sistema di partenza
   e vuol dire sempre la stessa cosa: due pixel in su quando punta in
   giu', due in giu' quando punta in su -- cioe' il centro ottico, che
   per un segno a V non e' il centro geometrico. */
.cartella-tit::after{
  content:''; margin-left:auto; width:7px; height:7px; flex:none;
  border-right:1.6px solid var(--ink-soft); border-bottom:1.6px solid var(--ink-soft);
  transform:translateY(-2px) rotate(45deg);
  transition:transform .2s var(--ease);
}
.cartella-tit[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.cartella .righe{
  margin:6px 0 0 10px; padding-left:14px;
  border-left:2px solid rgba(var(--ink-rgb),.08);
}
.cartella .righe > li{border-top:0; border-bottom:1px solid rgba(var(--ink-rgb),.07)}
.cartella .righe > li:last-child{border-bottom:0}
.cartella .riga-nome{font-size:15px}

/* --- e vale anche per Amici e Giocatori ----------------------------

   Erano gli unici due cassetti del profilo in cui il contenuto partiva
   a filo del titolo: aperto "Amici", le facce cominciavano esattamente
   dove comincia la parola Amici, e niente diceva che stessero dentro.
   Sotto "Partite" invece il rientro e il filo ci sono da sempre, perche'
   li porta `.gio-gruppo`.

   Il rientro si mette QUI e non su `.pro-dentro`, che vale per tutti e
   tre: sotto Partite aggiungerebbe un livello a roba che i suoi livelli
   ce li ha gia' dentro, e la partita finirebbe rientrata quattro volte. */
#blocco-amici, #blocco-giocatori{
  padding:0 0 24px 14px;
  border-left:2px solid rgba(var(--ink-rgb),.12);
}
/* I tre elenchi degli amici -- chi ti ha chiesto, chi lo e', chi non ha
   ancora risposto -- sono tre gruppi con tre etichette diverse, e uno
   attaccato all'altro si leggevano come un elenco solo. Quelli vuoti
   non ci sono proprio (`.pro-gente:empty`), quindi lo stacco non lascia
   mai un buco. */
#blocco-amici .pro-gente + .pro-gente{margin-top:12px}
/* Un livello sotto il titolo il testo pesa meno, come nelle partite. */
#blocco-amici .chi b, #blocco-giocatori .chi b{font-weight:500}


/* --- eliminare un gioco: rosso, e in due tempi ---------------------- */
.riga-azioni .elimina{color:var(--rosso)}
.riga-azioni .elimina:hover{background:rgba(var(--rosso-rgb),.12)}
.riga-azioni .elimina.armed{background:var(--rosso); color:var(--su-rosso); font-weight:600}

/* la finestrella con una voce in piu' vuole un filo di respiro */
.riga-azioni{min-width:210px}

/* il cestino armato lo dice: rosso pieno, e si disarma da solo */
#st-lista button[data-fa="via"].armed{background:var(--rosso); color:var(--su-rosso)}
#st-lista button[data-fa="via"].armed .ico{stroke-width:2}

/* ===================================================================
   LA LINGUA: DUE POSTI, LO STESSO COMANDO

   Sta nel cancello e in fondo al profilo, e sono i due momenti in cui
   uno si guarda intorno invece di guardare i giochi: prima di entrare,
   e quando mette in ordine chi e'. Nel cancello e' anche l'unico posto
   dove serve davvero -- chi non legge l'italiano deve poterla cambiare
   senza aver capito niente di quello che c'e' scritto sopra.

   I nomi delle lingue NON si traducono: "Italiano" e "English" restano
   scritti nella propria lingua, se no chi cerca la sua non la trova.
   =================================================================== */
.lingua{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:26px 0 0;
}
.lingua-tit{
  font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-soft); margin-right:2px;
}
.lingua button{
  font-family:var(--ff); font-size:13px; font-weight:500; cursor:pointer;
  color:var(--ink-soft); background:rgba(var(--ink-rgb),.06); border:0;
  border-radius:var(--r-s); padding:9px 14px;
}
.lingua button:hover{color:var(--ink); background:rgba(var(--ink-rgb),.11)}
/* scelta: il pieno, come le voci degli arredi -- non un anello, che qui
   girerebbe attorno a una pastiglia di testo e leggerebbe come un'ellisse */
/* La selezione va scritta con lo STESSO peso della regola che deve
   battere, catena di `:not()` compresa. Dentro il profilo il fondo dei
   pulsanti lo decide
   `#profilo button:not(.primario):not(.secondario):not(.distruttivo)`,
   che pesa un id, TRE classi e un elemento: `.lingua button.on` non ci
   arriva nemmeno vicino, e `#profilo .lingua button.on' si ferma a due
   classi. E la stessa lezione di `.primario`, un piano piu' su: un id
   batte una classe, e qui il `:not()` conta come tre. */
.lingua button.on,
#profilo .lingua button.on:not(.primario):not(.secondario):not(.distruttivo),
#gate .lingua button.on:not(.primario):not(.secondario):not(.distruttivo){
  color:var(--su-accent); background:var(--accent); font-weight:600;
}
.lingua button.on:hover,
#profilo .lingua button.on:not(.primario):hover,
#gate .lingua button.on:not(.primario):hover{
  background:var(--accent-su); color:var(--su-accent);
}

/* Nel cancello sta sotto la nota, staccata da un filo: e' un comando,
   e tutto quello che c'e' sopra non lo e'. */
#gate-lingua{
  justify-content:center; margin-top:22px; padding-top:20px;
  border-top:1px solid rgba(var(--ink-rgb),.14);
}

/* In fondo al profilo, e sotto di lei l'uscita: ultima cosa della
   pagina. Il filo sopra la stacca dall'ultimo cassetto. */
#pro-lingua{
  margin-top:26px; padding-top:22px;
  border-top:1px dashed var(--line);
}
/* USCIRE E' UN'AZIONE IMPORTANTE, E SI VEDE.

   Era un pulsante nudo come "cambia nick", in fondo a sinistra: la
   stessa faccia di un comando qualunque per il gesto che chiude la
   sessione. Adesso e' rosso come tutto quello che ha conseguenze, e sta
   in fondo a DESTRA -- dove finisce l'occhio quando ha smesso di
   leggere, e dove il sito mette gia' l'azione di ogni piede di
   pannello. Resta in due tempi, come ogni cosa che si puo' rimpiangere. */
.pro-uscita{margin:22px 0 0; display:flex; justify-content:flex-end}
/* Il rosso NON si scrive qui: il pulsante porta la classe
   `distruttivo`, e il colore glielo da' la sezione I COMANDI come a
   ogni altro comando che ha conseguenze. Scriverlo a mano voleva dire
   perdere contro
   `#profilo button:not(.primario):not(.secondario):not(.distruttivo)`,
   che pesa un id e TRE classi -- la stessa trappola del selettore della
   lingua. Con la classe giusta quella regola si esclude da sola. */
#profilo .pro-uscita .esci{font-weight:600; padding:12px 20px}
#profilo .pro-uscita .esci:hover{background:var(--rosso); color:var(--su-rosso)}
#profilo .pro-uscita .esci.armed{background:var(--rosso); color:var(--su-rosso); font-weight:700}

@media (pointer:coarse){
  .lingua button{min-height:44px}
}


/* ===================================================================
   LE PARTITE: UNA SCHERMATA LORO

   Stavano in un cassetto in fondo al profilo, sotto amici e giocatori.
   Ma il profilo risponde a "chi sono" e le partite a "cosa abbiamo
   giocato" -- che di una collezione di giochi da tavolo e' la meta' piu'
   interessante, e da dentro un cassetto non si vedeva mai.

   La composizione e' quella dell'elenco della collezione: occhiello, due
   viste, un "+". Non per pigrizia: e' la stessa cosa, un elenco che si
   scorre, e chi ha imparato quello sa gia' usare questo.
   =================================================================== */

/* Tre numeri in cima. Rispondono in un colpo d'occhio alle domande per
   cui uno apre questa schermata -- quante partite, su quanti giochi, chi
   vince -- che dall'elenco si ricavano solo contando le righe. */
.par-somma{
  display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0;
}
/* Le basi del flex fanno il lavoro senza media query: su schermo largo
   i tre riquadri stanno in fila (120+120+240 ci stanno), su un telefono
   il terzo non ci sta e va a capo da solo, prendendosi tutta la riga.
   Che e' esattamente come li si vuole nei due casi. */
.par-dato{
  flex:1 1 120px;
  background:var(--card); border-radius:var(--r-m); padding:12px 14px;
}
.par-dato.largo{flex:2 1 240px}
.par-dato b{
  display:block; font-family:var(--ff-display); font-weight:900; text-transform:uppercase;
  font-size:23px; line-height:1.05; letter-spacing:-.03em; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.par-dato span{
  display:block; margin-top:3px;
  font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft);
}
/* Chi e' in testa e' la riga che si legge, non un numero: prende il
   colore di tutto quello che conta. */
.par-dato.largo b{font-size:17px; color:var(--accent)}

/* L'elenco per gioco riusa le tendine delle partite, che erano gia'
   scritte per il profilo: rientro, filo verticale, peso minore. */
#partite #pro-partite{margin:16px 0 0}

/* Nella vista "le ultime" le partite sono una fila sola, in ordine di
   tempo: non c'e' un livello di mezzo, quindi non c'e' nemmeno il filo
   -- un rientro che non appartiene a niente e' solo un rientro. */
.par-tutte{
  list-style:none; margin:0; padding:0;
  background:var(--card); border-radius:var(--r-m);
  padding:2px 14px;
}
.par-tutte > li{padding:12px 0; border-bottom:1px solid rgba(var(--ink-rgb),.07); cursor:pointer}
.par-tutte > li:last-child{border-bottom:0}
.par-tutte > li:hover .gio-testa b{color:var(--accent)}
/* IL TITOLO E' LA COSA PIU' IMPORTANTE DELLA RIGA, e pesava come la
   data che gli sta accanto: due scritte dello stesso peso non dicono
   quale si legge prima, e in un elenco di partite si cerca il gioco. */
.par-tutte .gio-testa b{font-size:15px; font-weight:900; letter-spacing:.01em}
.par-tutte .gio-testa span{font-size:11px; letter-spacing:.04em; text-transform:none}
.par-tutte .gio-chi{font-size:12.5px; margin-top:3px}

/* Il "+" sta dove sta quello della collezione, e ha la stessa faccia. */
#partite .mia-barra{margin:14px 0 0}
#partite #par-msg{margin:12px 0 0}


/* ===================================================================
   IL WINRATE

   "Chi vince di piu'" e' una classifica fra chi c'era; il winrate parla
   di UNA persona sola, e quella persona e' chi sta guardando. Sono due
   domande diverse, e quella che una schermata intitolata "le tue
   partite" deve fare per prima e' la seconda.

   L'ANELLO. Un numero si legge, ma non si CONFRONTA scorrendo un
   elenco: la carica di un anello si', ed e' la prima cosa che l'occhio
   prende scendendo lungo una colonna. Il numero resta accanto, perche'
   un anello dice "circa due terzi" e non "67%".
   =================================================================== */

.wr-anello{
  width:22px; height:22px; flex:none;
  /* Si parte da mezzogiorno e si gira in senso orario, come si legge un
     quadrante. La rotazione sta qui e non nei numeri dell'SVG: cosi'
     l'SVG resta due cerchi concentrici e basta. */
  transform:rotate(-90deg);
}
.wr-anello circle{fill:none; stroke-width:2.6}
.wr-vuoto{stroke:rgba(var(--ink-rgb),.13)}
/* Capo PIATTO e non tondo: a zero per cento un capo tondo disegna
   comunque un puntino, e un puntino si legge come "un pochino" -- che
   e' esattamente la cosa che non e' vera. */
.wr-carica{
  stroke:var(--accent); stroke-linecap:butt;
  transition:stroke-dashoffset .5s var(--ease);
}

/* --- sulla riga del gioco ------------------------------------------
   Sta a destra, incolonnata con quelle delle righe sopra e sotto: e'
   li' che gli anelli si confrontano fra loro. Dove non ho mai giocato
   resta uno <span> vuoto invece di sparire -- se no il chevron
   scivolerebbe addosso al testo e la colonna si sfalserebbe. E' la
   stessa ragione per cui la stellina lascia il posto occupato in casa
   di un amico. */
/* Il titolo e la didascalia si avvolgono FRA LORO; la riga no.

   Con `flex-wrap:wrap` sulla riga un titolo lungo non fa stringere
   l'involucro: lo manda a capo, e con lui tutto quello che segue --
   cosi' la pastiglia del winrate finiva sotto e gli anelli si
   sfilavano dalla colonna in cui si confrontano. Togliendo il wrap
   l'involucro si stringe (ha `min-width:0`) e il testo va a capo
   dentro di se', che e' dove deve andare. */
.gio-gioco{flex-wrap:nowrap; align-items:center}
.gio-gioco .gio-t{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px;
}
.gio-gioco .wr{
  margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:6px;
}
.gio-gioco .wr b{
  font-family:var(--ff); font-weight:600; font-size:12.5px;
  letter-spacing:0; color:var(--accent);
}
.gio-gioco::after{margin-left:12px}

/* --- la pastiglia in cima, che e' anche la porta del dettaglio ------
   Resta dov'e' e si accende quando e' aperta, come l'imbuto e la
   libreria: sparire lascerebbe un buco e toglierebbe il modo piu'
   naturale di richiuderla, cioe' lo stesso gesto con cui si e' aperta. */
#par-somma .par-wr{
  display:grid; grid-template-columns:auto 1fr;
  align-items:center; column-gap:12px;
  font:inherit; text-align:left; border:0; cursor:pointer;
  transition:background-color .2s var(--ease), transform .12s var(--ease);
}
#par-somma .par-wr:hover{background:rgba(var(--accent-rgb),.10)}
#par-somma .par-wr:active{transform:scale(.98)}
#par-somma .par-wr[aria-expanded="true"]{background:rgba(var(--accent-rgb),.14)}
/* Spenta quando non c'e' niente da mostrare: il perche' sta nel title,
   che e' anche come si rimedia. */
#par-somma .par-wr:disabled{cursor:default}
#par-somma .par-wr:disabled:hover{background:var(--card)}
#par-somma .par-wr:disabled b{color:var(--ink-soft)}
#par-somma .par-wr .wr-anello{grid-row:1 / span 2; width:34px; height:34px}
#par-somma .par-wr b{grid-column:2; font-size:23px; color:var(--accent)}
#par-somma .par-wr span{grid-column:2}

/* --- il winrate gioco per gioco ------------------------------------
   Si apre SOTTO la pastiglia e non in una finestra sopra: e' il
   dettaglio di un numero che si sta gia' guardando, e sotto c'e'
   ancora l'elenco da cui quel numero viene. */
.par-wr-lista{
  margin:10px 0 0; padding:2px 14px 6px;
  background:var(--card); border-radius:var(--r-m);
  animation:entraRiga .32s var(--ease) both;
}
.par-wr-lista[hidden]{display:none}
.par-wr-lista .eyebrow{margin:12px 0 2px}
.wr-lista{list-style:none; margin:0; padding:0}
.wr-lista li{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; column-gap:12px;
  padding:9px 0; border-bottom:1px solid rgba(var(--ink-rgb),.07);
}
.wr-lista li:last-child{border-bottom:0}
.wr-lista .wr-anello{grid-row:1 / span 2; width:26px; height:26px}
.wr-lista b{
  grid-column:2; font-size:13.5px; font-weight:500; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wr-lista span{
  grid-column:2; font-size:11px; letter-spacing:.04em; color:var(--ink-soft);
}
.wr-lista i{
  grid-row:1 / span 2; grid-column:3; font-style:normal;
  font-family:var(--ff-display); font-weight:900; text-transform:uppercase; letter-spacing:.02em; font-size:17px; color:var(--accent);
}

/* ====================================================================
   LA VIA DI CASA, in casa di un altro

   Era un cartello che scendeva sotto la testata, centrato -- cioe'
   esattamente nella fascia dove vive il NOME DELLA LIBRERIA, che
   copriva. Due cose nello stesso posto, e a vincere era quella che non
   dice dove sei.

   Adesso e' un pulsante nella testata, dove il sito mette da sempre
   quello che porta via da una schermata, e non copre piu' niente. Solo
   l'icona: una casa non ha bisogno di essere spiegata, e chi sia il
   padrone di casa lo dice gia' il contatore accanto, che in visita
   porta il suo nome.

   Le misure stanno QUI e non piu' su: il livello "pieno" della sezione
   I COMANDI arriva dopo, e gli riscriverebbe imbottitura e colore. */
#vis-torna{display:none; flex:none; padding:8px; line-height:0; border-radius:0}
body.visita #vis-torna{display:inline-flex; align-items:center}
/* Terracotta e pieno, come tutto quello che si tocca: e' l'uscita da
   una schermata in cui si e' entrati apposta. */
#vis-torna{background:var(--accent); color:var(--card); border:0}
#vis-torna:hover{background:var(--accent-su); color:var(--card)}
#vis-torna .ico{width:17px; height:17px; flex:none}
@media (pointer:coarse){ #vis-torna{padding:11px} }

/* --- il tuo winrate su un gioco solo -------------------------------
   Nel pannello della recensione e dentro la riga aperta del catalogo:
   e' la stessa domanda del riquadro in cima alle partite, ristretta a
   un titolo, e fatta mentre si ha quel titolo davanti. */
.gioco-wr{
  display:flex; align-items:center; gap:10px; margin:0 0 12px;
  padding:9px 12px; background:rgba(var(--accent-rgb),.09); border-radius:var(--r-s);
}
.gioco-wr .wr-anello{width:26px; height:26px}
.gioco-wr b{
  font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:19px;
  letter-spacing:-.03em; color:var(--accent); line-height:1;
}
.gioco-wr span{font-size:11.5px; color:var(--ink-soft); letter-spacing:.03em}

/* Il campo del nome di una libreria quando quel nome e' gia' di un
   altro mobile: il rosso lo dice prima del clic, la spunta e' gia'
   spenta e il perche' sta nel title. */
#st-rinomina[aria-invalid="true"]{
  background:rgba(var(--rosso-rgb),.09); color:var(--rosso);
  box-shadow:0 0 0 2px rgba(var(--rosso-rgb),.35);
}

/* ===================================================================
   IL CHIUDI E' UN SEGNO TONDO, NON UN CARTELLINO

   Erano tre pulsanti squadrati incollati all'angolo con dentro la
   parola "chiudi" e una x: il cartellino di dieci anni fa, e ognuno
   con le sue misure -- quello della scheda del gioco era gia' stato
   ritoccato, quelli dei due moduli erano rimasti indietro. Chiudere e'
   un gesto solo, quindi e' un segno solo: un cerchio pieno con la x
   dentro, staccato dall'angolo, uguale in tutti e tre i posti.

   Resta PIENO -- vedi la nota "il chiudi e' pieno, non tratteggiato"
   piu' su: un filo tratteggiato nell'angolo di un pannello non e' una
   porta, e chiudere e' la prima cosa che si cerca per uscire.

   E ADESSO E' ROSSO, non piu' dell'accento. E' l'unico posto del sito
   in cui il rosso non distrugge niente, e non e' un'eccezione: sulla
   plancia il segno di chiusura sta li'. L'accento intanto ha cambiato
   mestiere -- dice "questo e' scelto adesso" -- e un chiudi non e' mai
   scelto, e' solo l'uscita. */
#close, #add-x, #mia-x{
  position:absolute; z-index:4; top:12px; right:12px;
  width:34px; height:34px; min-height:0; padding:0; margin:0;
  display:inline-flex; align-items:center; justify-content:center; gap:0;
  border:0; border-radius:0; cursor:pointer;
  /* Chiudere non distrugge niente: la croce e' decorazione forte, non
     un allarme. */
  background:var(--secondo); color:var(--su-secondo);
  box-shadow:var(--ombra-lieve);
  font-size:0; letter-spacing:0;
  transition:background-color .2s var(--ease), color .2s var(--ease),
             transform .12s var(--ease);
}
#close .ico, #add-x .ico, #mia-x .ico{width:16px; height:16px; stroke-width:2}
#close:hover, #add-x:hover, #mia-x:hover{background:var(--ink); color:var(--card)}
#close:active, #add-x:active, #mia-x:active{transform:translate(2px,2px); box-shadow:none}
@media (pointer:coarse){
  #close, #add-x, #mia-x{width:40px; height:40px}
}
/* Il testo che scorre deve passargli SOTTO, non addosso: il cerchio
   sta nell'angolo in alto a destra e li' il titolo ci arriva. */
.pan-scroll, .add-card{padding-top:30px}
@media (max-width:880px){ #close{top:10px; right:10px} }

/* --- LA ROTELLA: UN'ATTESA CHE SI VEDE -----------------------------

   Nel catalogo "aggiungi" fa due giri di rete -- la scheda e poi la
   copertina -- e nel frattempo il pulsante restava un "+" spento: chi
   premeva non sapeva se avesse premuto davvero. Adesso diventa una
   rotella che gira, e finita l'attesa e' la spunta di sempre.

   Con `prefers-reduced-motion` non si spegne: e' un'attesa, non una
   decorazione, e ferma non direbbe piu' niente. Gira solo piu' piano. */
@keyframes ruota{ to{ transform:rotate(360deg) } }
.ico.gira{ animation:ruota .85s linear infinite; transform-origin:50% 50% }
@media (prefers-reduced-motion:reduce){ .ico.gira{ animation-duration:2.2s } }

/* --- LA VOCE "PROFILO" IN BASSO E' UN'ICONA COME LE ALTRE ----------

   Era la faccia del profilo disegnata su canvas: un'immagine con i
   suoi colori dentro, quindi l'unica delle quattro voci che non
   poteva accendersi di terracotta quando la scegli. Adesso e' una
   sagoma neutra come le altre tre, e prende `currentColor`. */

/* ===================================================================
   LA CALCOLATRICE DEL TAVOLO

   Sta DENTRO il modulo della partita, sotto l'elenco di chi c'era, e
   si apre dal campo dei punti di una persona: il totale finisce li',
   che e' l'unica ragione per cui una calcolatrice ha senso su un sito
   di giochi da tavolo invece di essere un aggeggio qualunque.

   Niente tasto "uguale": il totale sta sempre in vista mentre si
   digita, e l'unico gesto che chiude il conto e' quello che lo porta
   nel campo. Un "uguale" in mezzo sarebbe un passo che non decide
   niente.
   =================================================================== */
.calc{
  margin:12px 0 0; padding:12px;
  background:rgba(var(--ink-rgb),.05); border-radius:var(--r-m);
}
.calc-testa{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 0 9px; font-size:11px; letter-spacing:.05em; color:var(--ink-soft);
}
.calc-testa b{
  font-weight:600; color:var(--ink); letter-spacing:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Il display: a sinistra il conto che si sta scrivendo, a destra il
   totale grande. Il conto puo' diventare lungo, quindi scorre da solo
   e resta agganciato alla fine -- e' l'ultimo pezzo quello che si sta
   guardando. */
.calc-schermo{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:0 0 10px; padding:9px 12px;
  background:var(--card); border-radius:var(--r-s);
}
/* Niente `direction:rtl` per tenere visibile la coda: su una riga fatta
   di numeri e segni non sposta la vista, RIBALTA l'ordine dei pezzi --
   "7 + 12 + 4" si leggeva "4 + 12 + 7", cioe' un conto diverso da
   quello che si stava scrivendo. La coda la tiene in vista `scrollLeft`
   dopo ogni tasto, che sposta la vista e basta. */
.calc-schermo span{
  flex:1; min-width:0; overflow-x:auto; white-space:nowrap;
  font-size:13px; color:var(--ink-soft); text-align:left;
}
.calc-schermo b{
  flex:none; font-family:var(--ff-display); font-weight:900; text-transform:uppercase;
  font-size:25.9px; line-height:1; letter-spacing:-.03em; color:var(--ink);
}
.calc-tasti{display:grid; grid-template-columns:repeat(4,1fr); gap:7px}

/* Due id perche' dentro `#partitalayer` c'e' gia' una regola con tre
   `:not()` che decide il fondo di ogni pulsante, e ogni `:not()` pesa
   quanto quello che contiene: una sola classe non ci arriva. E' la
   lezione della pastiglia della lingua, un piano piu' su. */
#partitalayer #calc .calc-tasti button{
  display:flex; align-items:center; justify-content:center;
  min-height:44px; padding:0; border:0; cursor:pointer;
  font-family:var(--ff-text); font-size:17px; font-weight:500; letter-spacing:0;
  color:var(--ink); background:var(--card); border-radius:var(--r-s);
  transition:background-color .18s var(--ease), color .18s var(--ease),
             transform .12s var(--ease);
}
#partitalayer #calc .calc-tasti button:hover{background:var(--ink); color:var(--card)}
#partitalayer #calc .calc-tasti button:active{transform:scale(.94)}
#partitalayer #calc .calc-tasti button.fun{
  background:rgba(var(--ink-rgb),.09); color:var(--ink-soft); font-size:16px;
}
#partitalayer #calc .calc-tasti button.fun:hover{color:var(--accent)}
#partitalayer #calc .calc-tasti button.ok{background:var(--accent); color:var(--card)}
#partitalayer #calc .calc-tasti button.ok:hover{background:var(--ink); color:var(--card)}
#partitalayer #calc .calc-tasti .ico{width:18px; height:18px}
#partitalayer #calc .calc-testa button{
  flex:none; width:28px; height:28px; min-height:0; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:0; cursor:pointer;
  background:none; color:var(--ink-soft);
}
#partitalayer #calc .calc-testa button:hover{background:rgba(var(--ink-rgb),.08); color:var(--ink)}
#partitalayer #calc .calc-testa .ico{width:14px; height:14px}

/* Il pulsante sulla riga: sta accanto al campo dei punti, non in mezzo
   ai comandi. Resta appena accennato come la corona spenta -- si accende
   sotto il dito -- perche' una fila di calcolatrici accese sopra un
   tavolo direbbe "qui si preme" a ogni riga. */
.pa-chi button.conta{
  flex:none; color:var(--ink-soft); background:none; border:0;
  opacity:.5; transition:opacity .18s var(--ease), color .18s var(--ease);
  /* La misura va detta: senza, prende l'imbottitura dei pulsanti del
     pannello (10/14) e viene quarantotto, cioe' mezzo pulsante piu'
     larga della corona e della croce che le stanno in fila. */
  width:32px; height:32px; padding:0; border-radius:var(--r-s);
  display:inline-flex; align-items:center; justify-content:center;
}
.pa-chi button.conta:hover, .pa-chi button.conta:focus-visible{opacity:1; color:var(--accent)}

/* --- LA TESTATA SU UNA STANZA SPENTA -------------------------------

   Sulla libreria la testata e' un velo leggero: li' dietro non scorre
   niente e coprire la stanza sarebbe un peccato. Ma la stanza si puo'
   spegnere -- e con la luce bassa, o il muro scuro, dietro la carta
   c'e' il buio e il testo scuro non si legge piu'.

   `muro-scuro` la mette `applicaLuce()` misurando quanto e' buio
   davvero dietro la testata. Sotto la soglia la testata torna una
   superficie piena, che e' come si comporta gia' in tutte le altre
   sezioni: e' l'eccezione della libreria a essere ammorbidita, non la
   regola. */
body.muro-scuro.sez-collezione:not(.elenco) header{
  background:var(--velo-pieno);
  border-bottom-color:rgba(var(--ink-rgb),.08);
}

/* ===================================================================
   IL CALENDARIO DELLE PARTITE

   Le altre due viste rispondono a "a cosa" e "quando per ultimo".
   Questa risponde a QUANDO, ed e' l'unica domanda a cui un elenco non
   sa rispondere bene: una griglia di giorni si legge tutta insieme, e
   da li' si vede il ritmo -- i mesi pieni, le settimane vuote, le sere
   in cui si e' giocato piu' di una partita.

   Non c'e' un linguaggio nuovo da imparare: il fondo tinto vuol dire
   "qui e' successo qualcosa", la terracotta vuol dire "hai vinto tu",
   e la corona e' la stessa che si tocca al tavolo.
   =================================================================== */

/* Tre linguette invece di due. La larghezza dell'indicatore sta qui e
   non nel JS: e' una misura di layout, e il JS deve solo dire di
   quanti posti spostarsi. */
.viste.tre{grid-template-columns:repeat(3,1fr)}
.viste.tre .ind{width:33.3333%}

/* Il calendario ha una misura sua e non si allarga con la pagina: a
   tutta larghezza le celle diventano quadrati da centoventi pixel, e un
   mese fatto di quadroni si legge vuoto invece che pieno. E' un oggetto
   chiuso, come un foglietto appeso: sta al centro della colonna. */
.cal{max-width:min(100%, 428px); margin:18px auto 0}
.cal-testa{
  display:flex; align-items:center; gap:6px;
  margin:0 0 12px;
}
.cal-testa b{
  font-family:var(--ff-display); font-weight:900; font-size:19px;
  letter-spacing:-.03em; color:var(--ink); text-transform:capitalize;
  margin:0 4px;
}
/* Le due frecce sono quelle del binario: stesso gesto, stesso livello
   "nudo" del corredo comandi -- solo il segno, che si accende sotto il
   dito. */
#partite .cal-passo{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; min-height:0; padding:0; cursor:pointer;
  color:var(--ink-soft); background:none; border:0; border-radius:var(--r-s);
  transition:background-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease);
}
#partite .cal-passo:hover{background:rgba(var(--accent-rgb),.12); color:var(--accent)}
#partite .cal-passo:active{transform:scale(.92)}
#partite .cal-passo .ico{width:16px; height:16px}
/* "oggi" e' l'unica scritta della testata, e sta in fondo: e' una via
   di ritorno, non un comando che si usa sempre. */
#partite .cal-oggi{
  margin-left:auto; padding:6px 11px; min-height:0; cursor:pointer;
  font-family:var(--ff-text); font-size:12px; font-weight:500; letter-spacing:0;
  color:var(--accent); background:rgba(var(--accent-rgb),.10); border:0; border-radius:0;
}
#partite .cal-oggi:hover{background:rgba(var(--accent-rgb),.18)}

.cal-gg{
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px;
  margin:0 0 5px;
}
.cal-gg span{
  text-align:center; font-size:10.5px; letter-spacing:.05em;
  color:var(--ink-soft);
}
.cal-griglia{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}

/* Una cella e' quadrata: una griglia di rettangoli non si legge come
   un mese. `aspect-ratio` la tiene tale a qualunque larghezza. */
.cal-g{
  position:relative; aspect-ratio:1; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:0; border-radius:var(--r-s); background:none; padding:0;
  font-family:var(--ff-text); color:var(--ink-soft);
}
.cal-g b{font-size:12.5px; font-weight:500; line-height:1}
.cal-g.vuoto{visibility:hidden}

/* Il giorno in cui si e' giocato: fondo tinto e numero pieno. E' lo
   stesso segno della riga di una partita nel modulo del tavolo. */
#partite button.cal-g{cursor:pointer}
#partite button.cal-g.pieno{background:rgba(var(--ink-rgb),.07); color:var(--ink)}
#partite button.cal-g.pieno b{font-weight:600}
#partite button.cal-g.pieno:hover{background:rgba(var(--ink-rgb),.13)}
/* Vinta: terracotta, come tutto quello che nel sito dice "sei tu". */
#partite button.cal-g.vinta{background:rgba(var(--accent-rgb),.14); color:var(--accent)}
#partite button.cal-g.vinta:hover{background:rgba(var(--accent-rgb),.22)}
#partite button.cal-g.scelto{box-shadow:inset 0 0 0 2px var(--accent)}
#partite button.cal-g:active{transform:scale(.94)}

/* Oggi si segna con un anello sottile, non con un fondo: il fondo dice
   gia' un'altra cosa -- che li' si e' giocato -- e due significati sullo
   stesso segno non si distinguono piu'. Era un trattino sotto il numero,
   e a questa misura si leggeva come un carattere perso li' in mezzo. */
.cal-g.oggi{box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.22)}

/* La corona e' PIENA, non di contorno. A tredici pixel un tratto da
   1,6 su un fondo gia' terracotta si perde: e' lo stesso motivo per cui
   la corona del tavolo si riempie quando e' accesa. */
.cal-seg{display:flex; align-items:center; justify-content:center; gap:2px; height:13px}
.cal-seg .ico{width:13px; height:13px}
.cal-seg .ico path{fill:currentColor; stroke-width:1.2}
/* Un punto per partita, fino a tre: oltre non si contano piu' a colpo
   d'occhio, e il numero esatto sta nel `title` e nel giorno aperto. */
/* COLORATI, non dell'inchiostro del numero.

   Erano `currentColor`: su un giorno giocato il colore e' quello del
   numero, quindi i segni venivano della stessa crema della cifra sopra
   e si leggevano come un refuso tipografico invece che come "qui si e'
   giocato". Il giorno vinto aveva gia' la corona nel colore: questi
   sono la stessa informazione senza la vittoria, e vogliono lo stesso
   trattamento. */
.cal-punto{
  width:4px; height:4px; border-radius:0;
  background:var(--accent); opacity:1;
}

.cal-vuoto{
  margin:14px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-soft);
}
/* Il giorno scelto si apre SOTTO la griglia, non in una finestra: e' il
   dettaglio di una cosa che si sta gia' guardando, ed e' lo stesso
   gesto del winrate in cima. */
.cal-quel-giorno{margin:14px 0 0; border-top:1px dashed var(--line); padding-top:4px}

@media (max-width:420px){
  .cal-g b{font-size:11.5px}
  .cal-seg{height:11px}
  .cal-seg .ico{width:11px; height:11px}
  .cal-testa b{font-size:17px}
}


/* ============================================================
   LE MEDAGLIE DEL TAVOLO -- e adesso vincono per PESO, non per posto.

   Dentro `#partitalayer` c'e' una regola che decide il colore di
   QUALUNQUE pulsante:

     #partitalayer button:not(.primario):not(.secondario):not(.distruttivo)

   che pesa un id, tre classi e un elemento -- ogni `:not()` conta come
   la cosa che contiene. `.pa-chi .corona.oro` sono tre classi e perde,
   e perdeva anche `.pa-chi .corona.on`: la corona accesa non e' MAI
   stata terracotta, era inchiostro come tutti gli altri pulsanti del
   modulo.

   La cura di allora era «stare in fondo al foglio», e ha retto finche'
   il foglio non e' cresciuto: la fustella quella regola l'ha RISCRITTA
   piu' sotto -- il tratteggio maiuscolo dei comandi dei pannelli -- e
   la copia nuova, a parita' di peso, sta dopo le medaglie. Da li' in
   poi le quattro corone erano di nuovo tutte dello stesso colore, e il
   podio qui sotto le smentiva riga per riga.

   **Stare in fondo non e' un peso: e' una scommessa su chi scrive
   dopo.** Qui invece si vince e basta -- `#pa-chi` E' un id, l'elenco
   lo porta gia' addosso, e due id battono un id piu' tre `:not()` in
   qualunque ordine, per sempre. E' la stessa uscita della calcolatrice,
   che dalla stessa regola si salva senza doverla nominare.
   ============================================================ */
#partitalayer #pa-chi li .corona.on{color:var(--accent)}
#partitalayer #pa-chi li .corona.oro{color:var(--oro); opacity:1}
#partitalayer #pa-chi li .corona.argento{color:var(--argento); opacity:1}
#partitalayer #pa-chi li .corona.bronzo{color:var(--bronzo); opacity:1}
#partitalayer #pa-chi li .corona.on .ico path,
#partitalayer #pa-chi li .corona.oro .ico path,
#partitalayer #pa-chi li .corona.argento .ico path,
#partitalayer #pa-chi li .corona.bronzo .ico path{fill:currentColor}

/* DAL QUARTO IN POI NIENTE CORONA.

   Un podio ha tre posti, e la quarta corona -- disegnata al 18% come
   tutte quelle spente -- accanto a tre medaglie non si leggeva come
   «nessuna medaglia»: si leggeva come una medaglia sbiadita, cioe' un
   quarto metallo che non esiste.

   Sparisce solo QUANDO CE NE SONO, e la classe la mette
   `segnaMedaglie`. Sempre invisibile non si puo': la corona e' anche
   l'interruttore che dice chi ha vinto, e senza punti a schermo -- il
   caso normale, uno si ricorda il punteggio di due su quattro -- e'
   l'unico modo di dirlo. Con le medaglie in campo quel modo non serve
   piu': le posizioni ci sono gia'.

   Resta comunque un pulsante vero e sotto il dito torna: chi vuole
   scavalcare la classifica puo' ancora farlo. */
#partitalayer #pa-chi.medaglie li .corona:not(.oro):not(.argento):not(.bronzo){
  opacity:0;
}
#partitalayer #pa-chi.medaglie li .corona:not(.oro):not(.argento):not(.bronzo):hover,
#partitalayer #pa-chi.medaglie li .corona:not(.oro):not(.argento):not(.bronzo):focus-visible{
  opacity:1;
}


/* ============================================================
   CHE COSA STAI COLORANDO

   Qui c'erano cinque tendine dentro una tendina, e la ragione era
   buona: aperte insieme erano nove righe di bollini una sotto l'altra
   in cui non si capiva quale appartenesse a cosa. La cura era pero'
   piu' pesante del male -- cinque tocchi per vedere cinque tavolozze,
   e un rientro con un filo verticale a spiegare un annidamento che nei
   fatti non esiste: faretti, scaffali, muro, pavimento e nome non
   stanno uno dentro l'altro.

   Sono cinque risposte alla STESSA domanda, e una domanda sola vuole
   una tavolozza sola: si sceglie il bersaglio in una riga, e sotto c'e'
   sempre e solo la sua fila di colori. Il problema delle nove righe
   sparisce da se', perche' di righe ce n'e' una.
   ============================================================ */
.st-superfici{padding:2px 0 0}
.st-quali{display:flex; flex-wrap:wrap; gap:4px; margin:0 0 12px}
.st-quali button{
  padding:7px 10px; border:0; border-radius:var(--r-s); cursor:pointer;
  font-family:var(--ff); font-size:10px; font-weight:900;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-soft); background:rgba(var(--ink-rgb),.06);
  transition:color .18s var(--ease), background-color .18s var(--ease);
}
.st-quali button:hover{color:var(--ink)}
/* Quello scelto e' PIENO, non contornato: e' l'unico modo che regge
   accanto a quattro fratelli della stessa forma. */
.st-quali button.on{color:var(--su-accent); background:var(--accent)}

/* UNA FILA CHE CHIUDE. Sette pezzi -- sei tinte e la ruota -- in flex
   con il loro spazio sforavano di otto pixel, e la ruota finiva da
   sola su una riga sua: la stessa fila smangiata appena tolta dalla
   carta dei colori, qui per otto pixel. In griglia le colonne si
   dividono quello che c'e', quindi la fila chiude sempre, e i faretti
   -- che di tinte ne hanno dodici -- fanno due righe pari invece di
   tre scaglionate. */
#stanza .pastiglie{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; justify-items:center;
}

.st-tav{animation:apreSotto .18s var(--ease) both}
.st-tav[hidden]{display:none}
.st-tav .st-riga{margin:0 0 10px}
.st-tav .st-riga.luce{display:flex; align-items:center; gap:10px}
.st-tav .st-riga.luce input[type=range]{flex:1; min-width:0}

/* IL VOLUME NEL PROFILO, accanto al suo interruttore: e' la stessa
   scelta, e stavano in due schermate diverse. */
.pro-volume{
  display:flex; align-items:center; gap:10px; margin:14px 0 0;
}
.pro-volume > span{
  flex:none; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-soft);
}
.pro-volume input[type=range]{flex:1; min-width:0}
/* L'altoparlante chiude la riga: stessa altezza del cursore, nessun
   riquadro -- e' un segno, non un pulsante da leggere. Muto diventa
   tenue, perche' spento deve SEMBRARE spento. */
.pro-volume .altoparlante{
  flex:none; padding:4px; border:0; background:none; cursor:pointer;
  color:var(--ink); line-height:0; border-radius:var(--r-s);
  transition:color .18s var(--ease), background-color .18s var(--ease);
}
.pro-volume .altoparlante .ico{width:19px; height:19px}
.pro-volume .altoparlante:hover{background:rgba(var(--ink-rgb),.1)}
.pro-volume .altoparlante.muto{color:var(--ink-soft)}
.pro-volume .altoparlante:active{transform:translate(1px,1px)}

/* IL CONTATORE DEL NICK. Tenue finche' c'e' spazio, acceso quando non
   ce n'e' piu': e' li' per spiegare perche' la tastiera ha smesso. */
#nick-conta{
  flex:none; font-family:var(--ff-mono); font-size:11px;
  color:var(--ink-soft); font-variant-numeric:tabular-nums;
}
#nick-conta.pieno{color:var(--accent)}

/* I DUE SEGNI SU UNA RIGA DI AMICO: quadrati e pari, come la spunta e
   la croce del laboratorio. La croce armata si riempie di rosso. */
#pro-amici .segno, #pro-richieste .segno, #pro-attesa .segno{
  width:34px; height:34px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:0;
}
#pro-amici .segno .ico, #pro-richieste .segno .ico, #pro-attesa .segno .ico{
  width:17px; height:17px;
}
#pro-amici .no.armed, #pro-richieste .no.armed, #pro-attesa .no.armed{
  background:var(--rosso); color:var(--su-rosso); border-color:transparent;
}
.pro-volume b{
  flex:none; font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:12px; letter-spacing:.02em;
  color:var(--ink-soft); font-variant-numeric:tabular-nums;
}


/* I DUE VOTI, affiancati. Quello di BGG e' un fatto sul gioco, il tuo
   e' un'opinione: stavano nella stessa colonna e il secondo cancellava
   il primo. Il tuo si distingue per l'accento -- e' l'unico dei due che
   hai scritto tu -- e compare solo se c'e'. */
.voti{display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap}
.voti .score{margin:0}
.voti .score.mio b{color:var(--accent)}

/* Nella riga aperta dell'elenco i due stanno in fila con l'etichetta
   sotto: due numeri accanto, senza, non dicono chi sia chi. */
.riga-info .voto{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap}
.riga-info .voto > span{display:flex; align-items:baseline; gap:1px; position:relative}
.riga-info .voto em{
  font-style:normal; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); margin-left:5px; align-self:center;
}
.riga-info .voto > span.mio{color:var(--accent)}
.riga-info .voto > span.mio em{color:var(--accent)}


/* ============================================================
   LA RIFINITURA CHIESTA IN BLOCCO
   ============================================================ */

/* "La tua recensione" sta sotto la recensione, non nel piede: e' l'unico
   comando della scheda che parla del testo qui sopra. */
.pan-scrivi{margin:14px 0 0}

/* LA BARRA DI RICERCA DELLA COLLEZIONE, come quella del catalogo: una
   superficie con il suo fondo invece di un campo trasparente con un filo
   attorno, e il segnaposto in tondo invece che in maiuscoletto spaziato.
   Erano due ricerche con due facce diverse nello stesso sito. */
#cerca, #mia-q{
  font-family:var(--ff-text); font-size:14px; letter-spacing:0;
  color:var(--ink); background:var(--card);
  border:1px dashed var(--line); border-radius:var(--r-s);
  padding:11px 34px 11px 13px;
}
#cerca::placeholder, #mia-q::placeholder{
  color:var(--ink-soft); text-transform:none; letter-spacing:0; font-size:13px;
}
#cerca:focus, #mia-q:focus{border-color:var(--accent)}
#cerca-x, #mia-q-x{right:8px}

/* IL CUORE E' UN PEZZO FUSTELLATO, e acceso RESTA PREMUTO DENTRO.

   Era una pastiglia che cambiava colore: corretta, e fuori dalla lingua
   che parla tutto il resto del sito. Qui i pezzi sono tagliati a
   fustella, posano sulla plancia con un'ombra piena e sfalsata, e
   premendoli si spostano di due pixel mentre l'ombra si accorcia --
   cioe' si leggono come oggetti, non come rettangoli colorati.

   La parte che vale: acceso NON torna su. Resta spostato di due pixel
   con l'ombra corta, cioe' **premuto dentro la plancia**, come un
   bottone che e' scattato e ci e' rimasto. Una recensione che ti e'
   piaciuta non e' un tasto di un altro colore: e' un tasto che hai
   schiacciato, e si vede dalla forma prima che dal colore -- che e'
   anche l'unica cosa che funziona per chi i colori non li distingue.

   E' l'unico gesto che si puo' fare in casa di un altro, quindi vale
   che si veda. */
#p-cuore{
  /* Il carattere da piede della scheda lo dava la regola con i tre id,
     da cui adesso si e' chiamato fuori: se lo scrive da se'. */
  font-family:var(--ff); font-weight:900; text-transform:uppercase;
  background:none; color:var(--ink);
  border:1px dashed var(--line); border-radius:0;
  clip-path:var(--fustella); filter:var(--posa);
  transition:background-color .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), transform .12s var(--ease),
             filter .12s var(--ease);
}
#p-cuore:hover{border-color:var(--ink); color:var(--ink)}
#p-cuore:active{transform:translate(2px,2px); filter:var(--posa-giu)}
/* DUE ID, e non e' vezzo: con uno solo il fondo e il bordo di questa
   regola venivano scavalcati -- `transform` e `filter` della STESSA
   regola passavano, quelle due no -- ed e' la terza volta che questo
   foglio fa lo scherzo. Vedi la nota sulla corona delle partite. */
#panel #p-cuore[aria-pressed="true"]{
  background:var(--accent); color:var(--su-accent); border-color:transparent;
  transform:translate(2px,2px); filter:var(--posa-giu);
}
#panel #p-cuore[aria-pressed="true"] #p-cuore-n{color:var(--su-accent)}

/* IL COLPO DI TIMBRO. Un rimbalzo morbido qui stonava: in questo sito
   le cose non rimbalzano, scattano -- le transizioni sono a `steps()` e
   i bordi sono vivi. Tre scatti e il cuore e' stampato. */
#p-cuore[aria-pressed="true"] .ico{animation:cuore-timbro .2s steps(3, end)}
@keyframes cuore-timbro{
  from{transform:scale(1.5)} to{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  #p-cuore[aria-pressed="true"] .ico{animation:none}
}

/* IL TASTO DEL PROFILO: un cerchio pieno, non un riquadro con gli
   angoli molto tondi. Con il bordo e l'imbottitura di `.tool` restava
   un rettangolo arrotondato, e accanto al marchio si leggeva come una
   pastiglia invece che come una faccia. */
#pro-apri{
  width:34px; height:34px; padding:0; flex:none; border:0; cursor:pointer;
  display:none; align-items:center; justify-content:center; border-radius:0;
  background:rgba(var(--ink-rgb),.07); color:var(--ink-soft);
}
body.dentro #pro-apri{display:inline-flex}
#pro-apri:hover{background:rgba(var(--ink-rgb),.12); color:var(--ink)}
#pro-apri .ico{width:18px; height:18px}
body.sez-profilo #pro-apri{background:var(--accent); color:var(--card)}
@media (pointer:coarse){ #pro-apri{width:40px; height:40px} }

/* LA FACCIA DENTRO AL TASTO. Riempie tutto il quadrato: l'avatar ha il
   suo fondo, quindi un'imbottitura attorno lascerebbe due colori di
   fondo concentrici invece di una faccia.

   Si scambiano, non si sovrappongono: finche' il profilo non e'
   arrivato -- ed e' un giro di rete -- resta la sagoma, che e' meglio
   di un tasto vuoto per mezzo secondo. */
#pro-faccia{display:none; width:100%; height:100%; object-fit:cover}
#pro-apri.con-faccia #pro-faccia{display:block}
#pro-apri.con-faccia .ico{display:none}
/* NIENTE COLORE DIETRO LA FACCIA. Il tasto aveva un fondo, e nel
   profilo si accendeva dell'accento con un anello attorno: su un meeple
   che ha gia' il suo fondo erano due fondi concentrici, e l'anello
   faceva da terzo. La faccia e' gia' il tasto -- si riconosce perche'
   e' la tua -- e "sei nel profilo" lo dice la navigazione, che e' il
   posto dove si guarda per saperlo. */
#pro-apri.con-faccia,
body.sez-profilo #pro-apri.con-faccia{background:none; box-shadow:none}


/* ============================================================
   IL WRAP

   Sei slide che si guardano una alla volta e si salvano come immagine.
   La schermata sta sopra tutto quello che copre la pagina (`z-index:3`
   come l'elenco della collezione, sotto la testata che sta a 4) e ha un
   fondo suo: una slide deve reggere da sola, perche' e' fatta per
   uscire dal sito.
   ============================================================ */
/* SOPRA TUTTO, testata e barra comprese. Non e' una schermata come le
   altre: e' un mazzo di slide che si guarda a schermo pieno e da cui si
   esce dalla sua croce, come da una storia. Lasciata a `z-index:3`
   finiva sotto la barra in basso, e con lei il piede con le frecce e il
   salva -- cioe' tutto quello che serve a usarla. */
#wrap{
  position:fixed; inset:0; z-index:6; display:none;
  flex-direction:column; background:var(--fondo);
}
body.wrap-su #wrap{display:flex}
/* La croce e' di CARTA e non dell'accento: sta su una slide, che ha un
   fondo suo di tre colori diversi, e l'ocra su una slide ocra non si
   vede. La carta si vede su tutti e tre. */
#wrap-x{
  position:absolute; top:20px; right:20px; z-index:2;
  width:32px; height:32px; border:0; border-radius:0; cursor:pointer;
  background:#efe3cd; color:#000000; font-size:18px; line-height:1;
  box-shadow:3px 3px 0 rgba(0,0,0,.28);
}
#wrap-x:active{transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,.28)}
@media (pointer:coarse){ #wrap-x{width:40px; height:40px} }

/* Il mazzo scorre in orizzontale e si aggancia: una slide per schermata,
   perche' mezza slide accanto direbbe "qui si scorre" e basta. */
.wrap-deck{
  flex:1; min-height:0; display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.wrap-deck::-webkit-scrollbar{display:none}
/* LE TINTE DI UNA SLIDE SONO QUELLE DELLA STAMPA, e non quelle del
   tema. Una slide esce dal sito -- si salva come immagine e si manda a
   qualcuno -- quindi non puo' dipendere da che materiale ha scelto chi
   l'ha fatta: deve leggersi uguale per tutti. Sono i valori crudi della
   fustella, non passati da `stampa()`.

   Per ogni tono si dichiarano tre cose e basta:

     --sl-bg      l'inchiostro su cui e' stampata
     --sl-forte   quello che si legge grande: il numero, i valori
     --sl-tenue   quello che gli sta accanto: didascalia, firma

   E quali siano NON e' una scelta libera: su un inchiostro scuro si
   stampa chiaro, su uno chiaro si stampa scuro. Il rosso e' scuro
   (carta sopra), l'ocra e il verde sono chiari (cartone sopra). Provato
   a numeri: carta su ocra fa 1,5 a 1, cioe' un numero da centoventi
   pixel che non si vede. */
.wrap-slide{
  --sl-carta:#efe3cd; --sl-cartone:#000000;
  --sl-rosso:#e23d28; --sl-ocra:#f0b429; --sl-verde:#2f9e6b;
  flex:0 0 100%; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:stretch;
  gap:0; padding:28px 20px 0; text-align:left;
  position:relative; overflow:hidden;
  background:var(--sl-bg); color:var(--sl-forte);
}
/* TRE INCHIOSTRI CHE GIRANO, e non otto sfumature. Erano otto gradienti
   diagonali fra due tinte del tema: belli, e fuori posto -- su una
   plancia stampata una sfumatura non esiste, e otto varianti di niente
   sono meno riconoscibili di tre colori che tornano.

   Nessuna slide sta accanto a una del suo stesso colore: l'ordine dei
   toni in `slideWrap()` e' 0,1,2,3,4,6,5,7, che con questi tre da'
   rosso, ocra, verde, rosso, ocra, rosso, verde, ocra. */
.wrap-slide.tono0, .wrap-slide.tono3, .wrap-slide.tono6{
  --sl-bg:var(--sl-rosso); --sl-forte:var(--sl-carta); --sl-tenue:var(--sl-cartone);
}
.wrap-slide.tono1, .wrap-slide.tono4, .wrap-slide.tono7{
  --sl-bg:var(--sl-ocra); --sl-forte:var(--sl-cartone); --sl-tenue:var(--sl-cartone);
}
.wrap-slide.tono2, .wrap-slide.tono5{
  --sl-bg:var(--sl-verde); --sl-forte:var(--sl-cartone); --sl-tenue:var(--sl-cartone);
}
/* La trama del cartone anche qui, e piu' marcata che nel sito: una
   slide e' tutta fondo, e su quattordici pixel di passo si legge come
   una superficie stampata invece che come un rettangolo di colore. */
.wrap-slide::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(135deg,
    rgba(0,0,0,.10) 0 14px, transparent 14px 28px);
}
.wrap-slide > *{position:relative}

/* LA TESTATA DELLA SLIDE: che cos'e' a sinistra, quando a destra.
   L'anno e' un BOLLINO e non una scritta colorata: su tre inchiostri
   diversi un colore d'accento che si legga su tutti non esiste, e un
   blocco del proprio `forte` con il fondo scritto sopra si legge
   sempre. E' anche la forma giusta -- una data timbrata. */
.wrap-testa{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:0;
}
.wrap-t{
  margin:0; font-family:var(--ff); font-weight:900; font-size:10px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--sl-forte);
  opacity:.8;
}
.wrap-anno{
  flex:none; font-family:var(--ff); font-weight:900; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--sl-bg); background:var(--sl-forte); padding:4px 7px;
  font-variant-numeric:tabular-nums;
}

/* IL NUMERO, che e' il motivo per cui esiste una slide. A sinistra e
   grande quanto la larghezza consente: centrato in mezzo alla slide
   sembrava una citazione, appoggiato a sinistra sembra stampato. */
/* LA COPERTINA DENTRO UNA SLIDE. Riquadro fisso e `contain`: le
   scatole non hanno tutte lo stesso rapporto, e stirarle sarebbe
   peggio che non metterle. Ombra piena come ogni pezzo posato. */
.wrap-cop{
  display:block; width:132px; height:132px; object-fit:contain;
  object-position:left center; margin:0 0 14px;
  /* La slide e' una colonna che stira i figli: senza questo il
     riquadro si allargava a tutta la slide. L'immagine dentro restava
     giusta -- `contain` non la deforma -- ma un elemento largo cinque
     volte il suo contenuto e' una trappola per la prossima regola che
     qualcuno ci scrivera' sopra. */
  /* `width` da sola non basta: la slide e' un contenitore flex e la
     crescita la scavalca. `max-width` no -- e' il tetto, e nessun
     `flex-grow` ci passa sopra. */
  align-self:flex-start; flex:none; max-width:132px;
  filter:drop-shadow(3px 3px 0 rgba(0,0,0,.42));
}

.wrap-n{
  margin:14px 0 0; font-family:var(--ff-display); font-weight:900;
  text-transform:uppercase;
  font-size:clamp(72px, 30vw, 132px); line-height:.78; letter-spacing:-.06em;
  color:var(--sl-forte); font-variant-numeric:tabular-nums;
}
/* Un titolo non e' un numero: sta piu' piccolo e va a capo, se no
   "Deep Regrets: Lamentable Tentacles" non ci sta in nessuna
   larghezza. */
.wrap-n.testo{
  font-size:clamp(34px, 11vw, 60px); line-height:.92; letter-spacing:-.03em;
  max-width:18ch;
}
/* LA DIDASCALIA E' IN SCURO, e non e' il numero in piccolo: e' la
   parola che dice di cosa sono quei numeri, e sull'inchiostro si stampa
   con l'altro colore. Era quindici pixel al 88% di opacita', cioe' una
   nota a pie' di numero. */
.wrap-s{
  margin:8px 0 0; font-family:var(--ff-display); font-weight:900;
  font-size:clamp(17px,5.4vw,24px); line-height:.98; letter-spacing:-.02em;
  text-transform:uppercase; color:var(--sl-tenue); max-width:22ch;
}

/* IL DETTAGLIO: due o tre righe di contorno sotto il numero grande. Un
   numero solo su un fondo colorato e' un manifesto, non un wrap --
   quello che si guarda davvero e' cosa c'e' intorno a quel numero.

   Le righe sono blocchi di ombra sull'inchiostro -- il nero al venti per
   cento -- non pastiglie chiare con gli angoli tondi: quelle
   galleggiavano sopra la slide invece di starci dentro. */
.wrap-righe{
  list-style:none; margin:20px 0 0; padding:0;
  width:100%; display:flex; flex-direction:column; gap:5px;
}
.wrap-righe li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 12px; border-radius:0;
  background:rgba(0,0,0,.20); text-align:left;
}
.wrap-righe li span{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--ff); font-weight:900; font-size:13px;
  letter-spacing:.02em; text-transform:uppercase; color:var(--sl-forte);
}
/* Il titoletto di un gruppo di righe: senza fondo e piu' piccolo, cosi'
   si vede che non e' un dato ma il nome di quelli che vengono sotto. */
.wrap-righe li.capo{
  background:none; padding:10px 0 2px;
}
.wrap-righe li.capo span{
  font-size:11px; letter-spacing:.14em; color:var(--sl-tenue); opacity:.78;
}
.wrap-righe li.capo + li{margin-top:0}

/* IL PODIO: il primo in mezzo e piu' alto, come un podio vero. In
   classifica restano primo, secondo, terzo -- si leggono cosi' a voce
   e cosi' arrivano a chi usa uno screen reader -- e a spostarli e'
   l'ordine del flex, che non tocca il documento. */
.wrap-podio{
  list-style:none; margin:18px 0 0; padding:0;
  width:100%; display:flex; align-items:flex-end; justify-content:center; gap:10px;
}
.wrap-podio li{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px;
}
.wrap-podio li.p1{order:2; flex-grow:1.35}
.wrap-podio li.p2{order:1}
.wrap-podio li.p3{order:3}
.wrap-podio.uno li.p1{flex-grow:1; max-width:62%}
.wrap-podio img{
  width:100%; height:auto; display:block;
  border:2px solid var(--sl-forte);
}
.wrap-podio li.p1 img{border-width:3px}
/* Senza copertina resta il titolo in un riquadro della stessa misura:
   un buco in mezzo a due scatole si legge come un errore. */
.wrap-podio .senza{
  width:100%; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  padding:8px; text-align:center;
  background:rgba(0,0,0,.20); border:2px solid var(--sl-forte);
  font-family:var(--ff); font-weight:900; font-size:11px;
  letter-spacing:.02em; text-transform:uppercase; color:var(--sl-forte);
}
.wrap-podio b{
  font-family:var(--ff); font-weight:900; font-size:24px; line-height:1;
  color:var(--sl-forte);
}
.wrap-podio li.p1 b{font-size:34px}
.wrap-podio .pod-tit{
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--ff); font-weight:900; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--sl-tenue); opacity:.8;
}
.wrap-righe li b{
  flex:none; font-family:var(--ff-mono); font-weight:600; font-size:12px;
  letter-spacing:.02em; text-transform:none; color:var(--sl-forte);
  font-variant-numeric:tabular-nums;
}

/* LE BARRE, un mese per barra. Sono in proporzione al mese piu' pieno e
   non hanno una scala: quello che si legge e' la FORMA -- quando si e'
   giocato tanto e quando niente -- e una scala numerata direbbe una
   precisione che qui non serve a nessuno.

   Il mese piu' pieno si stampa PIENO e gli altri in trasparenza: e' il
   dato che si cercava guardando questo grafico, e nel disegno e' l'unica
   barra di un altro colore. Qui e' la stessa cosa detta con l'opacita',
   che funziona su tutti e tre gli inchiostri -- un colore d'accento che
   si veda su rosso, ocra e verde non esiste. */
.wrap-barre{
  list-style:none; margin:20px 0 0; padding:0;
  width:100%; height:96px;
  display:flex; align-items:flex-end; gap:4px;
}
.wrap-barre li{
  flex:1; min-width:0; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; height:100%; gap:5px;
}
.wrap-barre i{
  width:100%; border-radius:0; display:block;
  background:var(--sl-forte); opacity:.42;
}
.wrap-barre li.top i{opacity:1}
.wrap-barre span{
  font-family:var(--ff-mono); font-weight:600; font-size:8.5px;
  letter-spacing:.02em; white-space:nowrap; color:var(--sl-tenue); opacity:.62;
}
.wrap-barre li.top span{opacity:1}

/* LA FIRMA sta in fondo e spinge in su tutto il resto (`margin:auto 0 0`):
   e' quello che tiene il contenuto attaccato alla testata invece di
   centrarlo, ed e' il contrario di come stava prima -- fuori dal flusso,
   con il contenuto in mezzo alla slide.

   Il marchio si stampa con i due colori come in testata: `Me` nel
   tenue, `Board` nel forte. */
/* IL MARCHIO SI LEGGE UGUALE SU OGNI SLIDE.

   Era `Me` nel tenue e `Board` nel forte: sulle rosse il forte e' la
   carta e il tenue l'inchiostro, quindi due colori; su ocra e verde
   sono tutti e due neri -- e devono esserlo, carta su ocra fa 1,5 a 1
   -- quindi uno solo. Risultato: il marchio era bicolore su un terzo
   delle slide e piatto sulle altre due terzi.

   Adesso la differenza e' la FORZA, che si puo' fare con qualunque
   inchiostro: stessa tinta per tutti e due, "Me" al mezzo. Il nick
   resta nel tenue, perche' non e' il marchio. */
.wrap-firma{
  margin:auto 0 0; padding:14px 0 0;
  display:flex; align-items:baseline; gap:9px;
  font-family:var(--ff); font-weight:900; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sl-forte);
}
.wrap-firma b{font-weight:900}
.wrap-firma b span{opacity:.5}
.wrap-firma i{font-style:normal; opacity:1}
.wrap-firma em{font-style:normal; color:var(--sl-tenue); opacity:.72}

.wrap-piede{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top:1px dashed var(--line); background:var(--card);
}
.wrap-frec{
  width:34px; height:34px; flex:none; border:0; border-radius:0; cursor:pointer;
  background:rgba(var(--ink-rgb),.07); color:var(--ink); font-size:19px; line-height:1;
}
.wrap-frec:hover{background:rgba(var(--ink-rgb),.13)}
.wrap-punti{display:flex; gap:6px; flex:1; justify-content:center}
.wrap-punti i{
  width:7px; height:7px; border-radius:0; background:rgba(var(--ink-rgb),.20);
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.wrap-punti i.on{background:var(--accent); transform:scale(1.25)}

/* Il pulsante che porta al wrap sta attaccato ai tre numeri di cui e'
   il seguito, non in una navigazione. */
.par-wrap{
  display:block; width:100%; margin:10px 0 0; padding:12px 16px;
  border:0; border-radius:var(--r-s); cursor:pointer;
  font-family:var(--ff-text); font-size:13.5px; font-weight:600; letter-spacing:0;
  color:var(--card); background:var(--accent);
}
.par-wrap:hover{background:var(--accent-su)}

/* ===================================================================
   LA FUSTELLA

   Quello che i colori e i comandi da soli non sanno dire: il MATERIALE.
   Il sito e' una plancia di cartone prima che tu ne stacchi i pezzi --
   il tratteggio della punzonatura, la carta cruda dei blocchi, i tre
   inchiostri stampati sopra.

   Sta in fondo al foglio apposta, come le altre passate di correzione:
   e' l'ultima cosa che si applica, e le regole qui dentro devono poter
   coprire quelle che una schermata si era scritta per conto suo.
   =================================================================== */

/* --- il cartone punzonato ------------------------------------------
   La trama a 45 gradi e' il cartone visto da vicino, e sta solo dove
   non ci scorre niente sopra: il cancello e il caricamento. Sotto un
   elenco lungo -- provato -- non e' piu' una texture, e' rumore dietro
   al testo: ogni riga si legge attraverso delle righe diagonali.

   E' anche il posto giusto per un'altra ragione: quelle due schermate
   sono le uniche in cui la plancia si vede INTERA, prima che qualcuno
   ne stacchi qualcosa. */
#gate, #load{
  background-image:repeating-linear-gradient(135deg,
    rgba(var(--ink-rgb),.045) 0 12px, rgba(var(--ink-rgb),0) 12px 24px);
}

/* --- il marchio -----------------------------------------------------
   Due tinte, e la seconda e' il ROSSO e non l'accento. L'accento vuol
   dire "questo si tocca / questo e' scelto adesso", e un marchio non e'
   ne' l'una ne' l'altra cosa: e' stampato, e basta. */
.brand b, .gate-logo{
  font-family:var(--ff-display); font-weight:900;
  text-transform:uppercase; letter-spacing:-.04em; line-height:.9;
}
.brand b{font-size:clamp(19px,2.4vw,24px)}
/* Il marchio e' decorazione, non allarme: prende il secondo colore. */
.brand b i, .gate-logo i{color:var(--secondo); font-style:normal}
.brand span{
  font-family:var(--ff-mono); font-size:9.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
}

/* --- il cancello ----------------------------------------------------
   Le due porte non sono uguali e non devono sembrarlo: quella che porta
   dentro e' un PEZZO STACCATO -- carta, angolo tagliato, ombra piena --
   e l'altra e' il pezzo ancora attaccato alla plancia, segnato dal
   tratteggio. Prima erano due riquadri identici, e a distinguerli
   c'era solo il testo. */
.gate-logo{font-size:clamp(34px,8vw,58px)}
.gate-q{font-family:var(--ff-mono); font-weight:600; font-size:10px; letter-spacing:.2em}
.gate-pick button{
  border-radius:0; background:none; border:1px dashed var(--line);
  transition:background-color .18s var(--ease), border-color .18s var(--ease),
             color .18s var(--ease), transform .1s var(--ease), filter .1s var(--ease);
}
.gate-pick button:hover{transform:none; background:rgba(var(--ink-rgb),.06); border-color:var(--accent)}
.gate-pick button[data-gate="entra"]{
  background:var(--ink); color:rgba(var(--card-rgb),.72); border:0;
  clip-path:var(--fustella); filter:var(--posa);
}
.gate-pick button[data-gate="entra"]:hover{background:var(--ink); filter:var(--posa)}
.gate-pick button[data-gate="entra"] b{color:var(--card)}
.gate-pick button[data-gate="entra"]:active{transform:translate(2px,2px); filter:var(--posa-giu)}
.gate-pick button b{font-size:23px; letter-spacing:-.03em; line-height:.92}
/* La pastiglia "ultima volta" e' un bollo stampato, non una scritta */
.ultima{
  font-family:var(--ff); font-weight:900; font-size:9px; letter-spacing:.18em;
  background:var(--accent); color:var(--su-accent); padding:4px 6px;
}
.gate-pick button[data-gate="entra"] .ultima{color:var(--su-accent)}
.gate-note{font-family:var(--ff); font-size:11px}

/* --- la barra in basso ---------------------------------------------
   Il filetto rosso e' il taglio della plancia: dice dove finisce il
   foglio. La barra e' il cartone nudo -- piu' scura delle schermate,
   che stanno un gradino sopra -- e non una superficie velata. */
#tabbar{
  background:var(--bg); border-top:2px solid var(--secondo);
  box-shadow:none;
}
#tabbar button{
  font-family:var(--ff); font-weight:900; font-size:10px;
  letter-spacing:.06em; text-transform:uppercase;
  margin:4px 2px; padding:10px 4px 9px;
}
#tabbar button b{font-weight:900; font-size:13px; letter-spacing:.02em}

/* --- LE CIFRE SI BATTONO A MACCHINA --------------------------------
   Su una plancia i numeri non sono scritti dalla stessa mano dei
   titoli: sono stampigliati. Tutto quello che si CONTA -- il voto, le
   misure, le durate, i conteggi -- passa al mono, con le cifre a
   larghezza fissa perche' una colonna di numeri stia in colonna. */
.specs b, .cat-spec, .score span, .gio-testa span, .eyebrow, .vista-tit,
.par-num b, .pa-punti input, #conta span{
  font-family:var(--ff-mono); font-variant-numeric:tabular-nums;
}
/* Il voto e' l'eccezione, ed e' voluta: e' grande quanto un titolo e
   in mezzo a una scheda di titoli, quindi e' un titolo. */
.score b{font-variant-numeric:tabular-nums; letter-spacing:-.05em}

/* --- LE COPERTINE SONO PEZZI APPOGGIATI ----------------------------
   Spigoli vivi e ombra piena: una copertina e' un cartoncino sul
   tavolo. Niente angoli tondi, che le facevano sembrare figurine. */
.riga-cop, .cat-cop, .mia-cop, #p-cover, .add-cop{
  border-radius:0; box-shadow:var(--ombra-lieve);
}

/* --- IL FOGLIO DI CARTA SUL CARTONE --------------------------------
   La recensione e' l'unica cosa del sito stampata sull'ALTRO
   materiale, ed e' il colpo d'occhio della fustella: un foglio chiaro
   appoggiato sul cartone, con il filetto rosso in cima.

   Non si fa rovesciando `--ink` e `--card` a mano. Sarebbe giusto per
   il testo e sbagliato per tutto il resto -- i fili, i veli, e
   soprattutto l'ocra, che sul cartone brilla e sulla carta fa 1,4 a 1.
   Qui si passa in blocco all'altro materiale, che `js/tema.js` ha gia'
   scritto tutto intero con il prefisso `--r-`: e' l'altra base, con lo
   stesso accento adattato alla carta.

   L'OMBRA DEL FOGLIO RESTA QUELLA DEL CARTONE, ed e' l'unica variabile
   che NON si rovescia: quel foglio la sua ombra la fa sul cartone, non
   su se stesso. Quelle dei pezzi che stanno DENTRO al foglio invece
   sono della carta, perche' e' li' che cadono. */
#panel, .rovescio{
  --bg:var(--r-bg); --card:var(--r-card); --ink:var(--r-ink);
  --ink-soft:var(--r-ink-soft); --sage:var(--r-sage); --sand:var(--r-sand);
  --wood:var(--r-wood);
  --ink-rgb:var(--r-ink-rgb); --card-rgb:var(--r-card-rgb); --bg-rgb:var(--r-bg-rgb);
  --accent:var(--r-accent); --accent-su:var(--r-accent-su);
  --accent-rgb:var(--r-accent-rgb); --su-accent:var(--r-su-accent);
  --rosso:var(--r-rosso); --rosso-rgb:var(--r-rosso-rgb); --su-rosso:var(--r-su-rosso);
  --verde:var(--r-verde); --su-verde:var(--r-su-verde);
  --ocra:var(--r-ocra); --su-ocra:var(--r-su-ocra);
  --fondo:var(--r-fondo); --line:var(--r-line);
  --velo:var(--r-velo); --velo-lieve:var(--r-velo-lieve); --velo-pieno:var(--r-velo-pieno);
  --ombra-lieve:var(--r-ombra-lieve); --posa:var(--r-posa); --posa-giu:var(--r-posa-giu);
  background:var(--card); color:var(--ink);
}
/* Il filetto in cima al foglio: e' il taglio, come sulla barra in
   basso, e dice che il foglio finisce li'. */
#panel{border-top:6px solid var(--secondo)}
#p-title{font-size:clamp(30px,7vw,46px); line-height:.86; letter-spacing:-.04em}

/* --- L'OCCHIELLO DI OGNI SCHERMATA ---------------------------------
   Una riga sola in mono, e sotto il numero grande. E' la forma con cui
   la plancia intitola le sue sezioni, ed e' la stessa in tutte e
   quattro: chi ne ha letta una le sa leggere tutte. */
.cat-testa .eyebrow, .mia-testa .eyebrow, .par-testa .eyebrow, .pro-testa .eyebrow{
  margin-bottom:8px;
}

/* --- IL BINARIO DELLE LIBRERIE -------------------------------------
   Segmenti pieni, non una barra che scorre: sono i pezzi di una
   plancia messi in fila, e quello dove sei e' stampato. */
.rail-bar, #rail-thumb{border-radius:0}

/* --- quello che si e' scelto porta sempre l'ocra -------------------- */
.viste .ind{background:var(--accent); height:3px; border-radius:0}
.viste button.on{color:var(--accent)}

/* --- il fuoco della tastiera ---------------------------------------
   Un filo pieno di due pixel, non un alone: si vede sul cartone e sulla
   carta, e non sfuma. */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* --- le pastiglie della lingua -------------------------------------
   Due pezzi della stessa plancia: quello scelto e' staccato -- ocra,
   angolo tagliato -- e l'altro e' ancora segnato dal tratteggio. Era
   un fondo grigio contro un fondo ocra, cioe' due pieni: la differenza
   si vedeva nel colore e non nella FORMA, ed e' la forma che dice se
   una cosa e' gia' successa. */
.lingua button{
  font-family:var(--ff); font-weight:900; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  background:none; border:1px dashed var(--line); color:var(--ink-soft);
  padding:9px 13px;
}
.lingua button:hover{background:rgba(var(--ink-rgb),.08); border-color:var(--ink); color:var(--ink)}
.lingua button.on,
#profilo .lingua button.on:not(.primario):not(.secondario):not(.distruttivo),
#gate .lingua button.on:not(.primario):not(.secondario):not(.distruttivo){
  border-color:transparent; clip-path:var(--fustella);
}
.lingua-tit{font-family:var(--ff-mono); font-weight:600; font-size:9.5px; letter-spacing:.16em}

/* --- i cursori -----------------------------------------------------
   `accent-color` non era mai stato scritto, quindi il volume del sito
   usciva col BLU-VIOLA di serie del browser: l'unico colore della
   pagina che non veniva da nessuna parte. Sta sul rosso perche' e' il
   colore stampato dei comandi fisici della plancia, e perche' l'ocra
   sul binario del cursore -- che e' chiaro -- non si vedrebbe. */
input[type="range"]{accent-color:var(--secondo)}
input[type="color"]{border:0; padding:0; background:none; cursor:pointer}

/* --- le due (o tre) viste ------------------------------------------
   Sono etichette di una sezione, non frasi: maiuscolo e peso pieno,
   come tutte le diciture della plancia. L'indicatore resta -- e' il
   gesto con cui il sito dice dove sei -- ma pieno e spesso. */
.viste button{
  font-family:var(--ff); font-weight:900; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
}
.viste .ind{height:3px; border-radius:0}

/* --- i riquadri dei conti ------------------------------------------
   Sono PEZZI, non riquadri: carta staccata dalla plancia, angolo
   tagliato e ombra piena. Sono anche l'unica cosa nella schermata delle
   partite che si legge da lontano, e un fondo un gradino piu' chiaro
   del fondo non basta a farlo. */
.par-dato{
  background:var(--ink); color:var(--card);
  clip-path:var(--fustella); filter:var(--posa);
  border-radius:0;
}
.par-dato b{color:var(--card)}
.par-dato span{
  font-family:var(--ff-mono); font-weight:600; font-size:9px;
  letter-spacing:.14em; color:rgba(var(--card-rgb),.68);
}

/* --- il wrap e' l'anno che hai giocato -----------------------------
   Il verde e' il terzo inchiostro, quello di cio' che e' GIA' FATTO: il
   wrap e' il riassunto di un anno di partite, cioe' esattamente questo.
   Non e' l'accento, perche' non e' una cosa scelta adesso. */
.par-wrap{
  background:var(--verde); color:var(--su-verde);
  font-family:var(--ff); font-weight:900; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
  border-radius:0; clip-path:var(--fustella); filter:var(--posa);
}
.par-wrap:hover{background:var(--verde); filter:var(--posa-giu)}
.par-wrap:active{transform:translate(2px,2px); filter:var(--posa-giu)}

/* --- i segnaposto sono diciture stampate ---------------------------
   Erano in maiuscolo solo nelle due ricerche che avevano una regola
   scritta apposta; le altre tre restavano minuscole. Un segnaposto e'
   la dicitura di un campo su una plancia, e sono tutti uguali. */
input::placeholder, textarea::placeholder{
  font-family:var(--ff-mono);
  text-transform:uppercase; letter-spacing:.1em; font-size:11px;
  color:var(--ink-soft); opacity:1;
}

/* --- il binario delle librerie -------------------------------------
   Un blocco pieno alto otto, come la barra del caricamento: e' la
   stessa misura, ed e' quella di un segmento stampato. Il filo da
   quattro pixel con la manopola tonda era un cursore di sistema. */
.rail-bar{height:8px}
.rail-bar i{height:8px}
#rail-thumb{border-radius:0}
#rail b, #rail .rail-n{font-variant-numeric:tabular-nums}

/* --- IL LIVELLO TRATTEGGIATO CHE ERA RIMASTO FUORI -----------------
   Il fondo tinto al sei per cento era scritto in un'altra decina di
   posti che le liste della sezione «I COMANDI» non nominano: due
   pulsanti del piede della recensione con il loro id, e le quattro
   famiglie di pannelli che si erano scritte la regola in casa.

   Vanno riscritti CON LO STESSO PESO delle regole che devono battere,
   catena di `:not()` compresa -- e' la stessa lezione gia' scritta per
   `.primario` e per le pastiglie della lingua: un id batte una classe,
   e qui ogni `:not()` conta come una classe. Stesso peso e piu' in
   basso nel foglio: vince questa.

   La calcolatrice resta fuori da sola, e senza doverla nominare:
   `#partitalayer #calc .calc-tasti button` porta due id, e due id
   battono un id piu' tre `:not()`. Un tastierino di cifre e' l'unico
   posto del sito dove un pulsante non e' una parola. */
/* `:not(.ruota)` come `:not(#close)` due righe sotto: la RUOTA non e'
   un comando, e' un campione di colore. Da quando e' un `<button>` --
   prima era un `input[type=color]`, e per questo la catena non la
   toccava -- questa regola le metteva addosso il tratteggio maiuscolo
   dei comandi e le cancellava il colore con `background:none`. */
#p-segna, #p-pref,
#profilo button:not(.primario):not(.secondario):not(.distruttivo):not(.ruota):not(#par-wrap),
#partitalayer button:not(.primario):not(.secondario):not(.distruttivo):not(.ruota):not(#pa-chiudi),
#gruppilayer button:not(.primario):not(.secondario):not(.distruttivo):not(.ruota),
#recelayer button:not(.primario):not(.secondario):not(.distruttivo):not(.ruota){
  background:none; color:var(--ink);
  border:1px dashed var(--line); border-radius:0;
  font-family:var(--ff); font-weight:900; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
}
#p-segna:hover, #p-pref:hover,
#profilo button:not(.primario):not(.ruota):not(#par-wrap):hover, #partitalayer button:not(.primario):not(.ruota):not(#pa-chiudi):hover,
#gruppilayer button:not(.primario):not(.ruota):hover, #recelayer button:not(.primario):not(.ruota):hover{
  background:rgba(var(--ink-rgb),.08); border-color:var(--accent); color:var(--accent);
}
/* Acceso: pezzo staccato, come ovunque nel sito */
#p-pref[aria-pressed="true"]{
  background:var(--accent); color:var(--su-accent);
  border-color:transparent; clip-path:var(--fustella);
}

/* --- I TRE LIVELLI DENTRO I PANNELLI CON UN ID --------------------
   «annulla» era una parola grigia in minuscolo accanto a un blocco
   pieno, e non e' un caso isolato: dentro `#profilo`, `#partitalayer`,
   `#gruppilayer` e `#recelayer` c'e' una regola di contorno

     #profilo button, #partitalayer button, ... { font-weight:500;
       letter-spacing:0; text-transform:none; border:0 }

   che pesa un id piu' un elemento -- **piu' di `button.secondario`**, che
   di id non ne ha. Risultato: dentro quei quattro pannelli i tre livelli
   perdevano la voce e il bordo, e restavano il fondo e l'imbottitura.
   `.primario` se la cavava perche' qualcuno gli aveva riscritto una
   regola con l'id; gli altri due no.

   La cura e' quella gia' scritta due volte in questo foglio: **si
   ripete la catena con lo stesso peso**. Un id piu' una classe batte un
   id piu' un elemento. */
#profilo .primario, #partitalayer .primario, #gruppilayer .primario, #recelayer .primario{
  font-family:var(--ff); font-weight:900; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink); color:var(--card);
  border:0; border-radius:0; padding:13px 20px;
  clip-path:var(--fustella); filter:var(--posa);
}
#profilo .primario:hover, #partitalayer .primario:hover,
#gruppilayer .primario:hover, #recelayer .primario:hover{
  background:var(--accent); color:var(--su-accent);
}
#profilo .secondario, #partitalayer .secondario, #gruppilayer .secondario, #recelayer .secondario{
  font-family:var(--ff); font-weight:900; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  background:none; color:var(--ink);
  border:1px dashed var(--line); border-radius:0; padding:12px 20px;
}
#profilo .secondario:hover, #partitalayer .secondario:hover,
#gruppilayer .secondario:hover, #recelayer .secondario:hover{
  background:rgba(var(--ink-rgb),.08); border-color:var(--ink); color:var(--ink);
}
#profilo .distruttivo, #partitalayer .distruttivo, #gruppilayer .distruttivo, #recelayer .distruttivo{
  font-family:var(--ff); font-weight:900; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  background:none; color:var(--rosso);
  border:1px dashed rgba(var(--rosso-rgb),.7); border-radius:0; padding:12px 18px;
}
#profilo .distruttivo.armed, #partitalayer .distruttivo.armed,
#gruppilayer .distruttivo.armed, #recelayer .distruttivo.armed{
  background:var(--rosso); color:var(--su-rosso); border-color:transparent;
}

/* --- il piede della recensione -------------------------------------
   Sta su carta, quindi il tratteggio ci si vede benissimo: qui i
   comandi sono fili, e il solo pieno e' il chiudi in alto a destra. */
/* `#del` resta fuori: e' rosso, e la sua regola pesa un id solo -- meno
   di questa, che di classi ne porta due. Senza escluderlo, "rimuovi"
   nel piede della recensione diventava un filo come gli altri e
   perdeva l'unica cosa che lo distingue. */
/* QUESTA RIGA PESA TRE ID, e li porta dentro i `:not()`.

   Ogni `:not()` vale quello che contiene, quindi questo selettore sta a
   (3,3,1) e batte qualunque cosa si scriva altrove con uno o due id: e'
   la trappola gia' segnalata due volte nelle note, ed e' tornata una
   terza. Il cuore ci e' caduto dentro per intero -- `transform` e
   `filter` della sua regola passavano, `background`, `color` e
   `border-color` no, perche' li li riscriveva questa. Due dichiarazioni
   su cinque dalla stessa regola: il tipo di difetto che si guarda per
   un'ora prima di sospettare la specificita'.

   Chi ha una faccia sua si chiama fuori QUI, dove la regola e' scritta,
   invece di rincorrerla con un id in piu' da un'altra parte -- che e'
   gia' quello che si era fatto per `#p-segna`. Un elenco di eccezioni
   in un posto solo si legge; una gara di specificita' sparsa per il
   foglio no. */
.pan-foot button:not(.primario):not(.distruttivo):not(#close):not(#del):not(#p-segna):not(#p-cuore){
  background:none; color:var(--ink);
  border:1px dashed var(--line); border-radius:0;
  font-family:var(--ff); font-weight:900; text-transform:uppercase;
}
.pan-foot button:not(.primario):not(.distruttivo):not(#close):not(#del):not(#p-segna):not(#p-cuore):hover{
  background:rgba(var(--ink-rgb),.08); border-color:var(--accent); color:var(--accent);
}

/* ===================================================================
   PIU' VICINI AL DISEGNO

   Quello che le sette schermate del pacchetto dicono e che una passata
   di sola tavolozza non aveva portato: il contatore grande in testa, il
   binario a segmenti, le viste come blocchi, la scheda del gioco.
   =================================================================== */

/* --- IL CONTATORE E' IL TITOLO DELLA SCHERMATA ---------------------
   Su ogni schermata piatta l'occhiello dice CHE COSA e', e subito sotto
   un numero grande dice QUANTO e' grande. Era una riga di testo tenue
   sotto ai comandi -- la quarta cosa che si leggeva -- ed e' invece la
   risposta alla domanda per cui uno apre quella schermata.

   La seconda riga (`<i>`) e' una parte della prima, non un secondo
   numero: stessa misura, colore tenue. */
.testa-n{
  margin:0 0 4px;
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(34px,11vw,46px); line-height:.86;
  letter-spacing:-.035em; text-transform:uppercase; color:var(--ink);
}
.testa-n:empty{display:none}
/* LA SECONDA RIGA E' PIU' PICCOLA. Erano due righe della stessa
   misura, e si leggevano come due titoli pari: ma "14 giochi" e' la
   risposta, e "11 esposti" e' una nota a margine di quella risposta --
   quanti di quei quattordici si vedono sullo scaffale. Stessa gerarchia
   che hanno gia' i colori: il grigio dice che e' il secondo. */
.testa-n i{
  font-style:normal; color:rgba(var(--ink-rgb),.42);
  font-size:.62em; letter-spacing:-.02em;
}
/* Il riepilogo sotto e' passato a didascalia: dice PERCHE' sono quelli
   -- quale ricerca, quale filtro -- e il quanto lo dice il numero. */
#mia-msg, #cat-msg{font-size:12px; color:var(--ink-soft)}

/* --- LE VISTE SONO DUE PEZZI, NON DUE PAROLE SOTTOLINEATE ----------
   Il binario che scorreva sotto la voce scelta era il modo giusto di
   dirlo su superfici morbide. Qui la stessa cosa si dice con la forma:
   quella scelta e' un pezzo STACCATO -- carta, angolo tagliato -- e le
   altre sono ancora attaccate alla plancia.

   L'indicatore se ne va: due segni per la stessa cosa sono uno di
   troppo, e sarebbe rimasto un filo che scorre sotto un blocco pieno. */
.viste{
  display:flex; gap:2px; border-bottom:0; margin:16px 0 0;
}
.viste button{
  flex:1; padding:12px 6px;
  background:rgba(var(--ink-rgb),.08); color:var(--ink-soft);
  border-radius:0; transition:background-color .18s var(--ease), color .18s var(--ease);
}
.viste button:hover{background:rgba(var(--ink-rgb),.14); color:var(--ink)}
.viste button.on{
  background:var(--ink); color:var(--card);
  clip-path:var(--fustella);
}
.viste .ind{display:none}

/* --- LA RICERCA: il campo e il suo comando -------------------------
   Il tasto e' ROSSO. Non e' l'accento -- non e' una cosa scelta, e' il
   comando stampato accanto al campo, come su una plancia il tasto sta
   accanto alla sua casella. */
.cat-cerca{gap:8px; margin-top:14px}
.cat-cerca button{
  font-family:var(--ff); font-weight:900; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--su-secondo); background:var(--secondo);
  border:0; border-radius:0; padding:0 16px;
  box-shadow:var(--ombra-lieve);
}
.cat-cerca button:hover{background:var(--ink); color:var(--card)}
.cat-cerca button:active{transform:translate(2px,2px); box-shadow:none}
#cat-q, #mia-q, #par-q{background:rgba(var(--ink-rgb),.07)}

/* --- IL BINARIO E' UNA FILA DI PEZZI -------------------------------
   Una barra che scorre dice "sei a un terzo"; una fila di segmenti dice
   "sei nel primo di tre", che e' la domanda vera -- le librerie si
   contano, non si misurano.

   I segmenti li disegna un gradiente ripetuto: il numero glielo dice
   `updateRail()` con `--n`, e il vuoto fra l'uno e l'altro e'
   `--rail-gap`. Il segmento dove sei e' `#rail-thumb`, in ROSSO: e' il
   pezzo staccato, e l'ocra qui direbbe "scelto" a tutti e tre.

   Niente pastiglia sotto: il binario sta sulla scena come tutto il
   resto che galleggia, e una carta chiara dietro tre blocchi pieni e'
   una superficie di troppo. */
#rail{
  background:none; box-shadow:none; border:0; padding:0; gap:10px;
}
#rail-txt{
  font-family:var(--ff); font-weight:900; font-size:15px;
  letter-spacing:.02em; text-transform:uppercase; color:var(--ink);
  opacity:1; font-variant-numeric:tabular-nums;
}
#rail-txt i{font-style:normal; color:rgba(var(--ink-rgb),.42)}
.rail-bar{
  --rail-gap:4px;
  height:8px; background:transparent;
  background-image:repeating-linear-gradient(90deg,
    rgba(var(--ink-rgb),.20) 0 calc(100% / var(--n,1) - var(--rail-gap)),
    transparent calc(100% / var(--n,1) - var(--rail-gap)) calc(100% / var(--n,1)));
  background-clip:padding-box;
}
.rail-bar i{height:8px; background:var(--secondo); transition:left .25s var(--ease), width .25s var(--ease)}
.rail-bar:hover i, .rail-bar.presa i{background:var(--accent)}

/* --- LA SCHEDA DEL GIOCO -------------------------------------------
   E' il foglio di carta sul cartone, ed e' la schermata su cui il
   disegno e' piu' preciso. */

/* L'occhiello e' VERDE e non ocra: il verde e' l'inchiostro di quello
   che e' gia' fatto, e una recensione o e' scritta o non c'e'. E' anche
   l'unico occhiello del sito che non e' ocra, ed e' voluto -- gli altri
   quattro intitolano una schermata, questo dice che cos'e' il foglio
   che hai in mano. */
#panel .eyebrow{color:var(--verde)}

#p-title{
  font-size:clamp(30px,8.2vw,46px); line-height:.84; letter-spacing:-.04em;
  margin:8px 0 0;
}
.byline{margin:10px 0 0; font-size:12.5px; line-height:1.5}

/* IL VOTO E LE MISURE, UNA RIGA SOLA. Il voto e' la cifra grande a
   sinistra, le misure sono la didascalia a destra, e sotto un filo
   PIENO da due pixel -- l'unico del sito che non e' tratteggiato,
   perche' non divide due pezzi: chiude un blocco. */
.pan-riga{
  display:flex; align-items:flex-end; gap:14px;
  margin:18px 0 0; padding:0 0 14px;
  border-bottom:2px solid var(--ink);
  /* SU SCHERMO STRETTO SCENDONO LE MISURE, NON I VOTI.

     La riga tiene due cose: i voti a sinistra e le misure a destra. Su
     un telefono non ci stanno insieme, e senza dire chi cede per primo
     cedeva la coppia dei voti -- che e' l'unica cosa qui dentro che
     deve restare affiancata. Le misure invece sono una didascalia:
     vanno a capo e restano allineate a destra, e non si nota. */
  flex-wrap:wrap;
}
.pan-riga .voti{gap:14px; align-items:flex-end; flex:0 1 auto}
.pan-riga .score{
  margin:0; padding:0; border:0; align-items:flex-end; gap:6px;
}
.pan-riga .score b{font-size:clamp(46px,15vw,64px); line-height:.78; letter-spacing:-.05em}
.pan-riga .score i{font-size:16px; padding-bottom:8px}
.pan-riga .score small{
  margin:0; padding-bottom:8px; text-align:left;
  font-family:var(--ff); font-weight:900; font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(var(--ink-rgb),.55);
}
/* IL MIO VOTO E' OCRA, NON ROSSO. Nel disegno «7.0 tuo» sta in rosso, e
   li' funziona perche' quella plancia il rosso lo usa come tinta e
   basta. Qui no: **il rosso e' il segnale di quello che distrugge**, e
   in tutto il sito non vuol dire altro. Un voto stampato in rosso sotto
   a quello di BGG si legge come un avviso.

   L'ocra e' la tinta di quello che e' TUO e di quello che conta, ed e'
   gia' quella che usa la stessa coppia di voti nella riga aperta
   dell'elenco (`.riga-info .voto > span.mio`). Due posti, una regola. */
.pan-riga .score.mio b{font-size:clamp(24px,7vw,30px); color:var(--accent)}
.pan-riga .score.mio small{color:var(--accent); opacity:.85}
.pan-riga .score.mio i{font-size:13px; padding-bottom:4px}

/* LE MISURE NON SONO TRE RIQUADRI. Erano tre caselle grigie in fila --
   una fascia di fondi tinti in mezzo a un foglio -- e sono invece una
   didascalia: mono, allineata a destra, sulla riga del voto. */
.pan-riga .specs{
  margin:0 0 0 auto; padding:0 0 6px; display:block; text-align:right;
  font-family:var(--ff-mono); font-weight:600; font-size:10.5px;
  line-height:1.5; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.pan-riga .specs li{background:none; padding:0; text-align:right; display:block}
.pan-riga .specs b{
  display:inline; font-family:inherit; font-weight:600; font-size:inherit;
  letter-spacing:inherit; text-transform:none; color:inherit; margin-right:4px;
}
.pan-riga .specs span{
  display:inline; font-family:inherit; font-size:inherit; letter-spacing:inherit;
  color:rgba(var(--ink-rgb),.6); text-transform:uppercase;
}

.body{margin-top:16px; font-size:14.5px; line-height:1.6}

/* Le etichette sono pezzi non ancora staccati: filo tratteggiato. */
.tags span{
  font-family:var(--ff); font-weight:900; font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:none;
  border:1px dashed rgba(var(--ink-rgb),.45); border-radius:0; padding:6px 8px;
}

/* «Segna partita» e' l'azione del piede, quindi e' un blocco pieno.
   `#p-mia` («la tua recensione») lo era gia': sono i due comandi che
   AGGIUNGONO qualcosa, e si somigliano apposta. */
.pan-foot #p-segna{
  background:var(--ink); color:var(--card); border:0;
  clip-path:var(--fustella); filter:var(--posa);
}
.pan-foot #p-segna:hover{background:var(--accent); color:var(--su-accent)}
.pan-foot #p-segna:active{filter:var(--posa-giu)}

/* IL CHIUDI TORNA ALL'ANGOLO, ed e' un dietrofront dichiarato. La nota
   di prima diceva «staccato dall'angolo», e su una superficie morbida
   era giusto: un pulsante che tocca due bordi sembra incastrato.

   Su una plancia no. La linguetta con cui si stacca un pezzo sta
   proprio sul bordo -- e' li' che si preme -- e staccata di dodici
   pixel dall'angolo galleggiava sopra un foglio invece di far parte
   del suo taglio. Adesso sta a filo, sopra il filetto rosso in cima al
   foglio, ed e' larga come una linguetta e non come un bollino. */
#close, #add-x, #mia-x{
  top:0; right:0; width:auto; height:auto;
  min-width:44px; padding:11px 14px;
  box-shadow:none;
}
@media (pointer:coarse){ #close, #add-x, #mia-x{width:auto; height:auto} }
#close .ico, #add-x .ico, #mia-x .ico{width:15px; height:15px}
/* Il pannello della recensione ha il filetto rosso in cima: la
   linguetta ci si appoggia sopra, come su una plancia vera. */
#panel #close{top:-6px}

/* --- IL CATALOGO, riga per riga ------------------------------------ */
/* «recensito» e' VERDE: e' quello che e' gia' fatto, ed e' l'unica cosa
   che quella pastiglia dice. Era color legno, che non vuol dire niente. */
.cat-dati h3 .bollo{
  font-family:var(--ff); font-weight:900; font-size:9px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--su-verde); background:var(--verde); padding:4px 6px;
}
/* Autore, editore, classifica e media: sono dati, quindi mono. */
.cat-chi{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.02em;
  color:rgba(var(--ink-rgb),.62); font-variant-numeric:tabular-nums;
}
.cat-chi b{color:var(--ink); font-weight:600}
.cat-spec li{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.04em;
  text-transform:uppercase; color:rgba(var(--ink-rgb),.62); font-variant-numeric:tabular-nums}
.cat-spec b{font-family:inherit; font-weight:600; font-size:inherit;
  letter-spacing:inherit; text-transform:none; color:var(--ink)}

/* --- IL CANCELLO: il marchio piu' grande --------------------------- */
/* Nel disegno il marchio riempie la larghezza del telefono: e' la prima
   cosa che si vede e ha tutto lo schermo per farsi vedere. */
.gate-logo{font-size:clamp(38px,12.5vw,64px); line-height:.84}
.gate-q{margin:14px 0 26px}
.gate-pick{gap:14px}
.gate-pick button{padding:18px 16px}
.gate-pick button span{font-size:12.5px; line-height:1.5}

/* Il binario, per davvero: la traccia e il cursore erano scritti con un
   id e uno pseudo-elemento trecento righe piu' giu' di dove sembrava.
   Il filo da tre pixel al centro non serve piu' -- la traccia adesso e'
   il gradiente dei segmenti -- e il cursore riempie il suo segmento. */
.rail-bar::before{display:none}
/* Il cursore del binario dice DOVE SEI fra le librerie: e' un segno
   di posizione, non di pericolo. */
#rail-thumb{
  top:0; margin-top:0; height:8px;
  background:var(--secondo);
}
.rail-bar:hover #rail-thumb, .rail-bar.presa #rail-thumb{background:var(--accent)}
/* Nel disegno il binario attraversa lo schermo: sono i pezzi di una
   plancia messi in fila, e una fila corta al centro sembrava un
   cursore. Resta centrato e con un tetto, se no su desktop diventa una
   fascia lunga un metro. */
#rail{width:min(520px, calc(100vw - 32px)); max-width:none}
.rail-bar{flex:1 1 auto; width:auto; min-width:0; max-width:none}

/* --- i segnaposto, per davvero -------------------------------------
   La regola generale `input::placeholder` non basta: tre campi hanno
   la loro, scritta con l'id, e restavano minuscoli mentre gli altri
   erano diciture stampate. Stesso peso, e piu' in basso. */
#cerca::placeholder, #mia-q::placeholder, #par-q::placeholder,
#cat-q::placeholder, #add-q::placeholder, #ami-q::placeholder{
  font-family:var(--ff-mono); text-transform:uppercase;
  letter-spacing:.1em; font-size:11px; color:var(--ink-soft); opacity:1;
}

/* --- il contatore non passa sotto all'imbuto -----------------------
   Sull'elenco della collezione l'imbuto resta appeso in alto a destra
   -- cercare e ordinare valgono anche li' -- e il numero grande ci
   andava a finire sotto. Gli si lascia la sua colonna. */
#mia .testa-n, #mia .cat-testa .eyebrow{padding-right:56px}

/* --- la riga del voto, rifinita ------------------------------------
   Tre cose viste a schermo:

   1. Il fondo grigio dietro le misure non era dei riquadri, era del
      CONTENITORE: `.specs` ha un fondo e `gap:1px`, ed e' cosi' che si
      disegnavano i fili fra una casella e l'altra. Tolti i riquadri
      restava il fondo, cioe' una toppa grigia in mezzo al foglio.
   2. Le misure si spezzavano a meta' ("2- / 4 giocatori"): schiacciate
      in settantatre pixel dai due voti, che si prendevano tutta la
      riga. Adesso non vanno a capo e si tengono la loro larghezza.
   3. I due voti stanno in colonna. Affiancati sono troppo larghi per
      un telefono, e uno dei due andava a capo da solo: meglio deciderlo
      qui che lasciarlo al caso della larghezza. */
.pan-riga .specs{
  background:none; flex:none; white-space:nowrap; align-self:flex-end;
  /* Anche il filo se ne va, per la stessa ragione del fondo: la
     griglia di `.specs` e' fatta di fondo, `gap:1px` e cornice, ed e'
     tutto un pezzo solo. Restava il rettangolo tratteggiato attorno a
     due righe di didascalia, che nel disegno non c'e' -- li' le misure
     sono testo allineato a destra e basta. */
  border:0; display:block; grid-template-columns:none; gap:0;
}
.pan-riga .specs li{white-space:nowrap}
/* I DUE VOTI STANNO AFFIANCATI, non uno sotto l'altro.

   In colonna il proprio voto finiva sotto a quello di BGG e a meta'
   della sua misura, e da li' si leggeva come una postilla del numero
   grande -- una specie di sottotitolo di BoardGameGeek. Ma non e' una
   postilla: e' l'unico dei due che riguardi chi sta guardando, ed e' il
   motivo per cui questo sito esiste.

   Affiancati, e della STESSA misura, dicono la cosa giusta: due
   opinioni sullo stesso gioco, il mondo e tu. A distinguerli bastano
   l'ocra e la fustella in mezzo -- che e' esattamente la forma che la
   riga aperta dell'elenco usa gia' per la stessa coppia.

   La misura scende da 64 a 50: due numeri grandi sulla stessa riga, e
   sotto a un certo schermo vanno a capo lo stesso -- `flex-wrap` li
   lascia fare, che e' meglio di due cifre schiacciate. */
.pan-riga .voti{
  flex-direction:row; align-items:flex-end; flex-wrap:wrap; gap:0 14px;
  flex:1 1 auto; min-width:0;
}
.pan-riga .score b{font-size:clamp(34px,11vw,50px)}
/* Il filo fra i due e' TRATTEGGIATO, come ogni cosa che in questo sito
   separa due pezzi della stessa plancia. */
.pan-riga .score.mio{
  border-left:1px dashed var(--line); padding-left:14px;
}
/* Stessa misura di quello di BGG: la differenza la fa il colore, non
   la statura. */
.pan-riga .score.mio b{font-size:clamp(34px,11vw,50px)}
.pan-riga .score.mio i{font-size:16px; padding-bottom:8px}

/* --- «segna partita» e' un blocco pieno ----------------------------
   La regola tratteggiata del piede porta `:not(#close)` e `:not(#del)`,
   e ogni `:not()` con un id dentro PESA un id: fanno due id, cioe' piu'
   di `.pan-foot #p-segna`. Il fondo restava tratteggiato mentre l'ombra
   piena -- che quella regola non nomina, e la cascata va per proprieta'
   -- passava lo stesso: un filo con l'ombra di un blocco.

   Si esclude anche lui, come gli altri due, e la regola del blocco
   torna a essere l'unica che parla di questo pulsante. */
.pan-foot #p-segna{
  background:var(--ink); color:var(--card); border:0;
  clip-path:var(--fustella); filter:var(--posa);
}

/* --- QUELLO CHE AGGIUNGE UNA RIGA E' UN TAGLIO SEGNATO -------------
   Nel disegno «+ segna una partita» e «lo voglio» hanno la stessa
   faccia, ed e' una faccia che nel sito non c'era: filo ROSSO
   tratteggiato. Non e' il rosso di quello che distrugge e non lo
   contraddice -- e' lo stesso segno con il verso opposto. Su una
   plancia il tratteggio e' il taglio *segnato e non ancora fatto*, e
   queste due cose sono esattamente questo: una riga che potrebbe
   esserci e non c'e' ancora.

   Il pieno resta a quello che CONFERMA -- entra, salva, scrivi la tua
   recensione -- e il rosso pieno a quello che, premuto la seconda
   volta, butta via. */
/* AGGIUNGERE E DESIDERARE non distruggono niente -- sono il contrario
   -- quindi niente rosso: prendono il secondo colore come il resto
   della decorazione. Erano rossi perche' il rosso era l'unico colore
   forte che il sito avesse oltre all'accento. */
.aggiungi, .cat-azioni .desidero{
  background:none; color:var(--secondo);
  border:1px dashed rgba(var(--secondo-rgb),.7); border-radius:0;
  clip-path:none; filter:none;
}
.aggiungi:hover, .cat-azioni .desidero:hover{
  background:rgba(var(--secondo-rgb),.12); color:var(--secondo);
  border-color:var(--secondo);
}
.aggiungi:active{transform:translate(2px,2px); filter:none}
/* Preso: il taglio e' fatto, e il pezzo si stacca. */
.cat-azioni .desidero[aria-pressed="true"]{
  background:var(--secondo); color:var(--su-secondo); border-color:transparent;
  clip-path:var(--fustella);
}

/* Il wrap e' un pezzo, non una fascia. Largo quanto tutta la colonna
   sembrava un'intestazione verde sopra alla schermata; nel disegno e'
   un blocco della misura della sua parola, in fila con gli altri. */
.par-wrap{display:inline-block; width:auto; padding:11px 14px}

/* --- LA RIGA DEL CATALOGO, come nel disegno ------------------------
   Due etichette sulla riga di sopra -- il posto in classifica e il
   bollo di chi e' stato recensito -- poi il titolo grande, poi chi
   l'ha fatto, poi le misure battute a macchina. In quest'ordine perche'
   e' l'ordine in cui si guarda una riga di un elenco ordinato: prima
   *perche'* sta li', poi *cos'e'*. */
.cat-alto{display:flex; align-items:baseline; gap:8px; margin:0 0 5px}
.cat-rank{
  font-family:var(--ff); font-weight:900; font-size:11px;
  letter-spacing:.04em; color:var(--accent); font-variant-numeric:tabular-nums;
}
/* Il bollo non sta piu' dentro al titolo: era una pastiglia in mezzo a
   una riga di testo, e con un titolo lungo finiva a capo da sola. */
.cat-alto .bollo{
  font-family:var(--ff); font-style:normal; font-weight:900; font-size:9px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--su-verde); background:var(--verde); padding:4px 6px;
}
.cat-dati h3{font-size:clamp(19px,5.6vw,24px); line-height:.92; letter-spacing:-.03em}
.cat-chi{margin:6px 0 0}
.cat-spec{margin:9px 0 0}

/* --- IL WINRATE E' UN RIQUADRO COME GLI ALTRI DUE ------------------
   Tre pezzi della stessa misura in fila, e quello che si tocca si
   distingue per il colore -- ocra, come tutto quello che si sceglie --
   non per la larghezza. Era largo il doppio, e sotto ai due riquadri
   di carta sembrava una fascia. */
#par-somma .par-wr{
  flex:1 1 120px;
  background:var(--accent); color:var(--su-accent);
}
#par-somma .par-wr b{color:var(--su-accent)}
#par-somma .par-wr span{color:var(--su-accent); opacity:.72}
#par-somma .par-wr:hover{background:var(--accent-su)}
#par-somma .par-wr[aria-expanded="true"]{background:var(--accent-su)}
#par-somma .par-wr:disabled{background:var(--ink); color:var(--card)}
#par-somma .par-wr:disabled b, #par-somma .par-wr:disabled span{color:var(--card)}
#par-somma .par-wr .wr-anello{width:30px; height:30px}
/* L'ANELLO SPARIVA DENTRO IL SUO RIQUADRO. `.wr-carica` e' scritto
   `stroke:var(--accent)` -- giusto ovunque, perche' il winrate e' un
   dato che conta -- ma questo riquadro l'accento ce l'ha come FONDO: era
   ocra su ocra. Restava visibile solo il filo vuoto, carta al 13% su
   ocra, cioe' l'arco spezzato che si vedeva.

   Qui l'anello prende il colore del testo del riquadro, qualunque sia:
   `currentColor` fa da solo la cosa giusta anche il giorno in cui
   quel riquadro cambiera' tinta. */
#par-somma .par-wr .wr-carica{stroke:currentColor}
#par-somma .par-wr .wr-vuoto{stroke:currentColor; opacity:.24}

/* --- IL PROFILO, i dettagli del disegno ---------------------------- */
/* Il codice amico e' una cosa da leggere ad alta voce a qualcuno:
   grande, spaziato e centrato, come un codice stampato su un biglietto. */
.pro-cod b, #pro-codice{
  font-family:var(--ff); font-weight:900; font-size:clamp(20px,6vw,26px);
  letter-spacing:.14em; text-align:center; padding:10px 12px;
  color:var(--ink); background:rgba(var(--ink-rgb),.08); border-radius:0;
  font-variant-numeric:tabular-nums;
}
/* I titoli delle due sezioni sono nomi, e il conto accanto e' una cifra:
   due mani diverse sulla stessa riga, come su una plancia. E sono NOMI,
   non comandi: il fondo tinto se ne va e resta un filo tratteggiato
   sopra, che e' il modo in cui la plancia divide due blocchi.

   Il peso va scritto per intero. `#profilo button:not(.primario)
   :not(.secondario):not(.distruttivo)` pesa un id e tre classi e li
   aveva portati a undici pixel come tutti gli altri pulsanti della
   schermata: `.pro-tit` da sola non ci arriva nemmeno vicino. Stessa
   catena, piu' la classe -- e' la lezione gia' scritta per le pastiglie
   della lingua e per il piede della recensione. */
#profilo button.pro-tit:not(.primario):not(.secondario):not(.distruttivo){
  font-family:var(--ff); font-weight:900; font-size:20px;
  letter-spacing:-.02em; text-transform:uppercase; color:var(--ink);
  background:none; border:0; border-top:1px dashed var(--line);
  padding:18px 0; border-radius:0;
}
#profilo button.pro-tit:not(.primario):hover{
  background:none; color:var(--accent); border-top-color:var(--line);
}
.pro-tit .quanti{
  font-family:var(--ff-mono); font-weight:600; font-size:9.5px;
  letter-spacing:.14em; color:var(--accent); text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
/* Il segno che apre resta il `+` in fondo a destra, e cresce con il
   titolo: a ventiquattro pixel accanto a una parola da venti era il
   pezzo piu' grande della riga. */
.pro-tit::after{font-family:var(--ff); font-weight:900; font-size:18px; color:var(--ink-soft)}

/* --- IL PIEDE DEL MAZZO -------------------------------------------
   Nel disegno il piede sta DENTRO la slide, sul suo rosso. Qui e' una
   barra sola per otto slide, quindi sta fuori dal mazzo: le si da' il
   cartone nudo, che e' il bordo della plancia -- una carta chiara sotto
   otto slide di tre colori diversi sarebbe una fascia che non appartiene
   a nessuna di loro.

   Le frecce e i punti restano quello che sono nel disegno: blocchi di
   carta e quadratini, non pastiglie. */
.wrap-piede{
  background:var(--bg); border-top:1px dashed var(--line);
  padding:14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
}
.wrap-frec{
  width:auto; height:auto; padding:10px 12px; border-radius:0;
  background:rgba(var(--ink-rgb),.10); color:var(--ink);
  font-family:var(--ff); font-weight:900; font-size:16px; line-height:1;
}
.wrap-frec:hover{background:var(--ink); color:var(--card)}
.wrap-frec:active{transform:translate(2px,2px)}
.wrap-frec:disabled{opacity:.3; pointer-events:none}
.wrap-punti{gap:5px; flex:0 1 auto; margin:0 4px}
.wrap-punti i{
  width:9px; height:9px; border-radius:0;
  background:rgba(var(--ink-rgb),.26); transition:background .18s var(--ease);
}
/* Il punto acceso non cresce: su una plancia un pezzo non si gonfia,
   cambia inchiostro. Lo `scale(1.25)` su un quadrato da nove pixel
   lasciava anche un bordo sfocato. */
.wrap-punti i.on{background:var(--ink); transform:none}
/* Salvare e' l'azione di questa schermata: blocco pieno, angolo
   tagliato, e sta in fondo a destra come ogni azione di ogni piede. */
#wrap-salva{
  margin-left:auto;
  font-family:var(--ff); font-weight:900; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--card); background:var(--ink); border:0; border-radius:0;
  padding:11px 13px; cursor:pointer;
  clip-path:var(--fustella); filter:var(--posa);
}
#wrap-salva:hover{background:var(--accent); color:var(--su-accent)}
#wrap-salva:active{transform:translate(2px,2px); filter:var(--posa-giu)}

/* La testata della slide lascia il posto alla croce, che sta sopra di
   lei in assoluto: senza, il bollino dell'anno finiva sotto e si
   leggeva "2" invece di "2026". */
.wrap-testa{padding-right:44px}

/* IL CONTENUTO STA IN MEZZO, LA FIRMA IN FONDO. Con un `auto` solo --
   quello della firma -- tutto il resto si accatastava in cima e su uno
   schermo alto restava mezza slide di rosso vuoto. Con due, lo spazio
   libero si divide sopra e sotto al contenuto: la testata resta in
   cima, la firma in fondo, e i numeri stanno dove li si guarda.

   E la colonna ha un tetto: una slide e' fatta per uscire dal sito in
   formato ritratto, e un numero tirato su duemila pixel di larghezza
   non e' piu' una slide, e' un'insegna. */
/* DUE `auto` E NON TRE. Uno sopra al numero e uno sopra alla firma
   dividono lo spazio libero in due e lasciano il contenuto in mezzo;
   aggiungendone uno anche sotto al dettaglio, il blocco finiva a un
   terzo dell'altezza. `:first-of-type` prende il caso della slide senza
   numero, dove la didascalia e' la prima cosa dopo la testata. */
.wrap-n, .wrap-s:first-of-type{margin-top:auto}
.wrap-slide > *{width:100%; max-width:520px; margin-left:auto; margin-right:auto}

/* ===================================================================
   LE ULTIME VOCI

   Quello che parlava ancora la lingua di prima. Venti comandi sono
   stati riscritti alla fonte -- erano `--ff-text` a peso 700, senza
   spaziatura e senza maiuscolo, cioe' la voce giusta per un sito dove
   la gerarchia la faceva il peso. Qui restano i pezzi che quella
   riscrittura non poteva raggiungere: i pannelli con il loro id, e
   tutto quello che e' un NUMERO e stava scritto come una parola.
   =================================================================== */

/* --- i due pannelli che si erano scritti la regola in casa ---------
   `#stanza` e `#mobili` non erano nelle liste della sezione «I
   COMANDI», e i loro pulsanti sono rimasti indietro. Qui si cambia solo
   la VOCE -- famiglia, peso, spaziatura, maiuscolo -- e non il colore:
   dentro c'e' chi ha un fondo suo per un motivo (le tinte, i faretti),
   e uniformare anche quello vorrebbe dire cancellare la differenza fra
   un comando e un campione di colore. */
#stanza button, #mobili button, #wrap button, #gruppilayer summary, #stanza summary{
  font-family:var(--ff); font-weight:900; letter-spacing:.09em;
  text-transform:uppercase;
}
/* La ruota e i bollini delle tinte non hanno testo: la spaziatura su un
   quadrato di colore non fa niente, ma il maiuscolo su un `title` si'. */
#stanza .pastiglie button, #profilo .tav-acc{letter-spacing:0}

/* --- il piede del pannello di amministrazione ---------------------- */
.add-foot button{font-weight:900; text-transform:uppercase; font-size:10.5px}

/* --- TUTTO QUELLO CHE SI CONTA VA IN MONO -------------------------
   La regola e' gia' scritta in fondo alla sezione dei comandi -- «le
   cifre si battono a macchina» -- e questi erano rimasti fuori dalla
   lista: i giorni del calendario, i punti del podio, le percentuali del
   winrate, i punteggi di una partita. Sono numeri che si INCOLONNANO,
   quindi vogliono anche le cifre a larghezza fissa. */
.cal-g b, .pod-punti, .wr-lista b, .gio-chi, .pa-punti input, .cal-oggi{
  font-family:var(--ff-mono); font-variant-numeric:tabular-nums;
}
.cal-g b{font-weight:600; letter-spacing:.02em}
.gio-chi{font-size:12px; letter-spacing:.02em}
/* Il nome di chi ha vinto resta una PAROLA, e sulla plancia le parole
   sono punzonate: il mono qui direbbe che anche lui e' un dato. */
.gio-chi .vince, .gio-chi i{
  font-family:var(--ff); font-weight:900; letter-spacing:.04em; text-transform:uppercase;
}
.pod-nome, .wr-lista span{
  font-family:var(--ff); font-weight:900; letter-spacing:.02em; text-transform:uppercase;
}


/* ============================================================
   LE DUE FINESTRELLE CHE IL SITO SI DISEGNA DA SE'

   `<input type="color">` e `<input type="date">` erano gli ultimi due
   pezzi di interfaccia disegnati da qualcun altro: aprivano il
   selettore del sistema e il calendario di Chrome, con il loro
   carattere, le loro ombre sfumate e il loro azzurro. Su una plancia
   punzonata sono la finestra di un altro programma.

   Adesso il campo resta -- nascosto, a tenere il valore -- e quello che
   si vede e' un pulsante che apre questa finestrella. Il markup lo
   scrive js/scegli.js.

   E' un PANNELLO ANCORATO come l'imbuto e la libreria: fondo di
   cartone tagliato, angolo fustellato, ombra piena, e si chiude
   guardando altrove. Non e' una schermata e non oscura niente.
   ============================================================ */
.scegli{
  position:fixed; z-index:40; left:0; top:0;
  width:262px; max-width:calc(100vw - 16px);
  background:var(--card); color:var(--ink);
  padding:12px;
  display:flex; flex-direction:column; gap:10px;
  clip-path:var(--fustella);
  filter:var(--posa);
}
/* IL BORDO NON PUO' ESSERE UN BORDO: `clip-path` taglia anche quello, e
   l'angolo fustellato resterebbe con due monconi di filo. Un'ombra
   interna invece sta dentro al taglio e lo segue. Serve perche' su
   fondo scuro il cartone della finestrella e la pagina sono due neri
   vicini, e senza un filo la finestrella non ha un confine. */
.scegli{box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.16)}
/* Il colore ha bisogno di piu' larghezza del calendario: tredici tinte
   in fila su 262 px sono pezzi da centrare col dito. */
.scegli.scegli-colore{width:304px}
.scegli[hidden]{display:none}

/* --- la carta dei colori ------------------------------------------ */

/* LE TINTE SONO UN NASTRO, non tredici bottoni.

   Andavano a capo, e il guaio non era che fossero due righe: era che la
   seconda ne aveva sei e la prima sette, cioe' una fila smangiata in
   mezzo a un pannello fatto di rettangoli pieni. Tredici strisce
   attaccate su una riga sola sono invece una cosa che esiste davvero --
   la striscia di colori stampata in fondo a una scatola -- e si legge
   come un oggetto unico invece che come tredici pezzi sparsi.

   Attaccate davvero, senza spazi: lo spazio fra due campioni di colore
   e' il modo piu' rapido di far sembrare un bottone quello che e' un
   colore. */
.sc-tinte{display:flex; align-items:stretch; gap:0; height:30px}
.sc-tinta{
  flex:1 1 0; min-width:0; margin-top:6px;
  padding:0; border:0; border-radius:0; cursor:pointer;
  transition:margin-top .14s steps(2, end);
}
/* QUELLA SCELTA SPORGE. Un anello attorno a una striscia da ventuno
   pixel la chiuderebbe fino a farla sparire; alzarla di sei invece la
   fa sporgere come una linguetta, che e' esattamente quello che fa una
   linguetta su una scatola. Nessun contorno, nessun colore in piu':
   si vede dalla forma. */
.sc-tinta.on{margin-top:0}
.sc-tinta:hover{margin-top:2px}

/* LA GRIGLIA E' UNA CARTA DI CAMPIONI, quindi e' UNA carta: trenta
   quadrati staccati di tre pixel sono trenta bottoni, trenta quadrati
   attaccati sono un cartoncino stampato. Il filo tutt'intorno e' lo
   stesso della finestrella, cosi' il blocco ha un bordo invece di
   sfrangiarsi sul fondo. */
.sc-griglia{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:0;
  box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.16);
}
.sc-cella{
  aspect-ratio:1; padding:0; border:0; border-radius:0; cursor:pointer;
  position:relative;
}
/* Il segno di quello scelto sta DENTRO la cella, se no spingerebbe via
   le vicine o finirebbe sotto di loro: due fili concentrici, chiaro e
   scuro, cosi' si vede sia su un campione pallido sia su uno carico. */
.sc-cella.on{
  z-index:1;
  box-shadow:inset 0 0 0 2px var(--card), inset 0 0 0 4px var(--ink);
}
.sc-cella:hover{z-index:1; box-shadow:inset 0 0 0 2px rgba(var(--ink-rgb),.5)}

/* --- il piede: la prova e l'esadecimale --------------------------- */
/* La prova non e' un quadratino accanto a un campo: e' il COLORE
   SCELTO, cioe' la risposta alla domanda per cui la finestrella e'
   aperta. Prende tutta l'altezza del piede e il campo le sta accanto
   come un'etichetta. */
.sc-piede{display:flex; align-items:stretch; gap:0; height:38px}
.sc-prova{
  flex:none; width:52px;
  box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.16);
}
/* L'esadecimale e' un CODICE, quindi mono e a cifre di larghezza
   fissa, come ogni altra cosa che si conta in questo sito. */
.scegli .sc-esa{
  flex:1 1 auto; min-width:0;
  font-family:var(--ff-mono); font-size:13px; letter-spacing:.06em;
  text-align:center; text-transform:lowercase;
  color:var(--ink); background:rgba(var(--ink-rgb),.06);
  border:0; border-radius:0; padding:0 10px;
}
.scegli .sc-esa:focus{outline:none; box-shadow:inset 0 0 0 2px var(--accent)}

/* --- il calendario ------------------------------------------------ */
.scegli.scegli-data{width:250px}
.sc-testa{display:flex; align-items:center; gap:6px}
.sc-testa b{
  flex:1; text-align:center;
  font-family:var(--ff); font-weight:900; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
}
.scegli .sc-mese{
  flex:none; width:28px; height:28px; padding:0; cursor:pointer;
  background:none; color:var(--ink); border:1px dashed var(--line); border-radius:0;
  font-size:15px; line-height:1;
}
.scegli .sc-mese:hover{border-color:var(--accent); color:var(--accent)}

/* Le iniziali dei sette giorni. Mono, come i numeri sotto: e' una
   didascalia di una griglia di cifre, non una parola. */
.sc-sett{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:2px;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.08em;
  color:var(--ink-soft); text-align:center;
  border-bottom:1px dashed var(--line); padding-bottom:5px;
}
.sc-giorni{display:grid; grid-template-columns:repeat(7, 1fr); gap:2px}
.sc-g{
  aspect-ratio:1; padding:0; border:0; border-radius:0; cursor:pointer;
  background:rgba(var(--ink-rgb),.05); color:var(--ink);
  font-family:var(--ff-mono); font-size:12px; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:center;
}
.sc-g.vuoto{background:none; cursor:default}
.scegli .sc-g:hover{background:rgba(var(--accent-rgb),.18); color:var(--accent)}
/* Oggi si segna con un ANELLO e non con un fondo: il fondo lo usa gia'
   il giorno scelto, e due significati sullo stesso segno non si
   distinguono piu'. E' la stessa regola del calendario delle partite. */
.sc-g.oggi{box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.34)}
.scegli .sc-g.scelto{
  background:var(--accent); color:var(--su-accent);
  clip-path:var(--fustella);
}
/* I due comandi del piede stanno in fila e non vanno a capo: una
   finestrella da 250 px lascia poco piu' di cento a testa, e "senza
   data" a corpo pieno ci si spezza in due righe -- due pulsanti alti
   diversi nella stessa riga. */
.scegli.scegli-data .sc-piede{gap:8px}
.scegli.scegli-data .sc-piede button{
  flex:1 1 0; min-width:0; white-space:nowrap;
  font-size:10px; letter-spacing:.06em; padding:10px 6px;
}

/* --- il pulsante del giorno --------------------------------------- */

/* Sta nella riga dei campi del modulo e deve leggersi come un campo,
   non come un comando: stesso fondo, stessa imbottitura, stesso
   carattere dei due che gli stanno accanto. L'unica differenza e'
   l'icona a destra, che dice che si apre qualcosa.

   Vince sulla regola dei comandi dei pannelli per PESO e non per
   posizione: `#partitalayer #pa-quando` sono due id, e due id battono
   un id piu' tre `:not()` in qualunque ordine. */
.campo-quando{display:flex; flex-direction:column}
/* IL CAMPO NASCOSTO NON DEVE CONTARE COME FIGLIO.

   Dentro l'etichetta ci sono tre cose -- la scritta, il campo che tiene
   la data in ISO, e il pulsante -- e l'etichetta e' una colonna flex
   con il suo spazio fra una e l'altra. Un figlio che non si vede ma
   c'e' fa pagare quello spazio DUE volte, e il pulsante scende. Detto
   qui perche' il browser lo nasconde gia' da se', ma questo foglio ha
   gia' avuto regole che hanno rimesso in piedi cose che il browser
   nascondeva. */
.campo-quando input[type="hidden"]{display:none}
#partitalayer #pa-quando{
  display:flex; align-items:center; gap:8px; width:100%;
  font-family:var(--ff); font-size:14px; font-weight:500;
  letter-spacing:0; text-transform:none;
  color:var(--ink); background:rgba(var(--ink-rgb),.05);
  /* L'IMBOTTITURA E' QUELLA DEL CAMPO ACCANTO, misurata e non dedotta:
     `.add-form input` dice 8px, ma dentro `#partitalayer` quel valore
     e' scavalcato e i campi veri ne hanno 12. Prendere il numero dalla
     regola generica invece che dal vicino lasciava la casella della
     data sei pixel piu' bassa dell'altra. */
  border:0; border-radius:var(--r-s); padding:12px 14px;
  cursor:pointer; text-align:left;
}
#partitalayer #pa-quando:hover{background:rgba(var(--ink-rgb),.09)}
#partitalayer #pa-quando[aria-expanded="true"]{box-shadow:inset 0 0 0 2px var(--accent)}
#partitalayer #pa-quando .sc-quando{
  flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Senza data la scritta e' un invito, non un valore: va tenue come un
   segnaposto, che e' quello che e'. */
#partitalayer #pa-quando.vuota .sc-quando{color:var(--ink-soft)}
#partitalayer #pa-quando .ico{flex:none; width:17px; height:17px; color:var(--ink-soft)}

/* ============================================================
   LE ESPANSIONI NELLA SCHEDA

   Quasi niente, ed e' il punto: la tendina e' una `.cartella` come
   quelle dei gruppi, e ogni espansione e' una `.riga` con il suo menu a
   tre punti, identica a quelle dell'elenco della collezione. Un elenco
   di titoli con un comando a testa nel sito c'era gia'; rifarne uno con
   un vocabolario suo vorrebbe dire due modi di fare la stessa cosa.

   Qui restano solo le tre differenze vere.
   ============================================================ */
.espansioni{margin:18px 0 0}
.espansioni[hidden]{display:none}

/* 1. La tendina delle espansioni non ha il margine largo delle cartelle
      dei gruppi: li' separa blocchi di elenco, qui sta in fondo a una
      scheda che e' gia' finita. */
.espansioni .cartella{margin:0}

/* 2. La riga del gioco base non e' una tendina: e' una riga sola, e
      sopra ci va un filo per staccarla da quello che viene prima. */
.espansioni .esp-base{
  margin:0 0 12px; padding-top:10px; border-top:1px dashed var(--line);
}

/* 3. Quello che NON hai resta tenue: la differenza fra le due e'
      l'informazione, e va vista senza leggere. Le righe che hai usano
      gia' il pieno dell'elenco. */
.espansioni li:not(.ce-l-hai) .riga-nome{color:var(--ink-soft)}

/* 4. LA RIGA QUI HA DUE CELLE, NON TRE, e questo era il guaio vero su
      schermo stretto. `.righe.compatta > li` e' una griglia
      `52px 1fr auto`, e quei 52 px sono la COLONNA DELLA COPERTINA: in
      un elenco di espansioni la copertina non c'e' -- di quelle che non
      possiedi non esiste proprio -- quindi il titolo finiva dentro la
      colonna della copertina e il menu si prendeva l'`1fr`. Cinquantadue
      pixel per un titolo vuol dire "ARCS: / HALLS / OF / POWER /
      EXPANSION", una parola per riga.

      Due celle: il titolo prende quello che c'e', il menu quello che
      gli serve. */
.espansioni .righe.compatta > li{grid-template-columns:1fr auto; gap:10px}

/* 5. E la VOCE non e' quella dell'elenco. Li' `.riga-nome` e' il
      carattere da titoli, 15 px, maiuscolo e tracciato: giusto per una
      riga che e' l'unica cosa sulla sua, sbagliato per un elenco dentro
      una scheda gia' piena. Il maiuscolo poi allarga di suo, ed e'
      meta' della ragione per cui i titoli lunghi si spezzavano.

      Qui i nomi sono lunghi per costruzione -- "Arcs: Lost Vaults &
      Fated Leaders Expansion" -- e vanno LETTI, non gridati: stessa
      voce del resto del testo della scheda, e vanno a capo come una
      frase. */
.espansioni .riga-nome{
  font-family:var(--ff); font-weight:600; font-size:13px;
  letter-spacing:0; text-transform:none; line-height:1.35;
}
.espansioni .riga-dove{white-space:normal; overflow:visible; margin-top:4px}

/* 6. NEL MENU C'E' UN COLLEGAMENTO, e un collegamento non e' un
      pulsante. La scheda su BoardGameGeek resta un `<a>` perche' sia
      apribile in una scheda nuova, si possa copiare l'indirizzo e si
      comporti come si aspetta chi ci clicca col tasto centrale -- cose
      che un pulsante con `window.open` dentro non sa fare.

      Ma le voci di quel menu sono tutte `button` in cinque regole
      sparse per il foglio, e un `<a>` non ne eredita nessuna: usciva
      sottolineato, di un altro colore e a capo in mezzo alla frase.
      Qui gli si da' la stessa faccia, una volta sola e in un posto
      solo. */
.espansioni .riga-azioni a{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:11px 13px; font-size:12px; text-align:left; text-decoration:none;
  font-family:var(--ff); font-weight:900; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); border:0; border-radius:0;
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
.espansioni .riga-azioni a:hover{background:rgba(var(--ink-rgb),.09); color:var(--accent)}
.espansioni .riga-azioni a .ico{flex:none}
.espansioni .riga-azioni a span{min-width:0}

/* 7. IL MENU SI APRE SEMPRE VERSO IL BASSO. Nell'elenco della
      collezione le ultime due righe lo aprono verso l'alto, se no
      uscirebbe dal fondo della pagina; ma qui le righe sono poche -- due
      su una scheda come Deep Regrets -- e "le ultime due" sono quasi
      tutte, cosi' il menu della PRIMA saliva a coprire la recensione.
      Dentro una scheda che scorre, sotto ci si arriva sempre. */
.espansioni .righe.compatta > li .riga-azioni{top:calc(100% + 7px); bottom:auto}