/* ============================================================================
   IL RIFACIMENTO DELLE TRE SCHERMATE (2026-08-23).

   PERCHE' ESISTE, E PERCHE' NON E' IN shell.css. Julian ha guardato la
   classifica e ha detto «orrenda, schiacciata, monocromatica e confusionaria»,
   e della scheda pre-gioco «lo sfondo dietro ai bottoni e' scollegato e crea una
   brutta staccatura». Il CTO ha consegnato la specifica come FILE - un mock HTML
   con dentro tutti i valori - invece che a parole, perche' la volta prima una
   schermata descritta a parole era uscita «slop AI senza design».
   Questo foglio e' il vestito di quelle tre schermate e nient'altro. Sta a parte
   perche' shell.css e' di un altro fronte e questo e' un rifacimento, non una
   sostituzione meccanica: e' lo stesso motivo per cui esiste famiglia.css, e
   come quello si assorbira' in shell.css quando la polvere si posa.

   COSA NON C'E' QUI DENTRO, di proposito:
   · NESSUN COLORE CRUDO. Ogni tinta e' un token gia' misurato. Il mock portava
     una tavolozza sua (--ink, --ink-mid, --ink-dim, --cog, --men): l'ho
     ricondotta ai token che il progetto ha gia', e dove il mock chiedeva un
     terzo livello d'inchiostro l'ho misurato - #7d7294 da' 4,15:1 sul fondo
     scuro, cioe' SOTTO il pavimento di 4,50 del testo. Non l'ho aggiunto: quel
     livello e' diventato --tk-ink-secondary, che e' misurato 6,17:1. Il mock
     proponeva un colore che non regge, e il pavimento non si abbassa per far
     entrare un disegno.
   · NESSUNA DICHIARAZIONE DI MONDO. La riga che rende scura una schermata
     (`background:var(--tk-surface-frame)`) vive in shell.css e in nessun altro
     posto, perche' li' la guarda world.test.js: metterla qui avrebbe fatto
     dilagare il mondo scuro sotto il naso del controllo che esiste per
     impedirlo, e il controllo sarebbe rimasto verde.

   LA REGOLA DELLE DUE TINTE, che qui si vede: azzurro = cognitivo, oro =
   mentale. Sotto daltonismo rosso-verde le due si avvicinano a 1,02:1 di
   luminanza (misurato, vedi tokens.css §12), quindi il colore NON basta mai da
   solo: la barra a due segmenti ha un ORDINE FISSO - cognitivo a sinistra,
   mentale a destra - dichiarato dalla legenda in cima alla schermata, e ogni
   barra porta un aria-label che dice i due numeri a parole.
   ============================================================================ */

/* ── il carattere stretto delle intestazioni. E' l'unica aggiunta tipografica
      del rifacimento: il mock costruisce la sua gerarchia su un condensato
      maiuscolo, e Barlow normale a peso 800 non fa la stessa cosa. Arriva dallo
      stesso host dei due caratteri che il progetto gia' carica (cloud-source
      pretende che gli unici riferimenti fuori origine siano quelli, e questo lo
      e'). Se non arriva, si ripiega su Barlow: la schermata resta leggibile,
      perde solo la stretta. ─────────────────────────────────────────────── */
.lb-nuova,.br-nuova,.me-nuova{--tk-cond:"Barlow Condensed", Barlow, system-ui, sans-serif}

/* ══ 01 · CLASSIFICA GLOBALE ════════════════════════════════════════════════ */

/* L'INCHIOSTRO SI DICHIARA, NON SI EREDITA. Trovato guardando lo scatto e non
   il codice: il titolo e i nomi dei giocatori erano GRIGIO SCURO SU NERO, cioe'
   invisibili, perche' la shell nasce nel mondo chiaro e i suoi inchiostri sono
   tarati per quello. Una schermata che cambia mondo e non ridichiara l'inchiostro
   eredita quello del mondo che ha lasciato. La porta d'ingresso aveva gia' avuto
   lo stesso problema e la stessa cura (shell.css, [data-porta="ingresso"]). */
.lb-nuova{display:flex;flex-direction:column;flex:1;min-height:0;
  color:var(--tk-ink-primary)}
.lb-nuova .lb-eyebrow{font-family:var(--tk-font-mono);font-size:var(--tk-text-micro);
  font-weight:var(--tk-weight-medium);letter-spacing:.26em;text-transform:uppercase;
  color:var(--tk-ink-secondary);margin:0 0 var(--tk-space-2)}
.lb-nuova .lb-titolo{font-family:var(--tk-cond);font-weight:800;font-size:36px;
  line-height:.94;letter-spacing:-.01em;text-transform:uppercase;margin:0}
.lb-nuova .lb-sub{color:var(--tk-ink-secondary);font-size:12.5px;margin:8px 0 0}

/* la legenda: qui il colore diventa leggibile PERCHE' porta la parola accanto,
   ed e' anche la dichiarazione dell'ordine dei segmenti (sinistra/destra) */
.lb-nuova .lb-legenda{display:flex;gap:var(--tk-space-4);align-items:center;
  margin:var(--tk-space-4) 0 var(--tk-space-5);padding:10px 13px;
  border-radius:var(--tk-radius-md);background:rgba(255,255,255,.055);
  border:1px solid var(--tk-line-border)}
.lb-nuova .lb-legenda span{display:flex;align-items:center;gap:7px;
  font-family:var(--tk-font-mono);font-size:var(--tk-text-micro);letter-spacing:.15em;
  text-transform:uppercase;color:var(--tk-ink-secondary)}
.lb-nuova .pallino{width:8px;height:8px;border-radius:var(--tk-radius-round);flex:0 0 auto}
.lb-nuova .pallino.cognitive{background:var(--tk-domain-cognitive)}
.lb-nuova .pallino.mental{background:var(--tk-domain-mental)}

/* la barra a due segmenti: UNA barra al posto delle tre pastiglie che
   rendevano la riga illeggibile. La larghezza e' la QUOTA fra le due meta',
   non il punteggio: il punteggio e' il numero grande a destra. */
.lb-nuova .quota{display:flex;height:4px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.07);margin-top:9px}
.lb-nuova .quota i{display:block;height:100%}
.lb-nuova .quota .c{background:var(--tk-domain-cognitive)}
.lb-nuova .quota .m{background:var(--tk-domain-mental)}

/* ── il podio: tre gradini di altezza diversa. NESSUN ORO SUL PRIMO: in questa
      casa l'oro significa «mentale», e sul podio direbbe due cose insieme. La
      gerarchia la fanno l'ALTEZZA del gradino e il gradiente del marchio. ── */
.lb-nuova .podio{display:grid;grid-template-columns:1fr 1.26fr 1fr;gap:9px;
  align-items:end;margin-bottom:var(--tk-space-5)}
.lb-nuova .grad{position:relative;border-radius:var(--tk-radius-md);
  padding:13px 9px 12px;text-align:center;background:rgba(255,255,255,.055);
  border:1px solid var(--tk-line-border)}
.lb-nuova .grad .posto{font-family:var(--tk-cond);font-weight:800;line-height:1;
  letter-spacing:-.02em;font-size:29px;color:var(--tk-ink-secondary)}
.lb-nuova .grad .chi{font-weight:var(--tk-weight-semibold);font-size:12.5px;
  margin:7px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-nuova .grad .tot{font-family:var(--tk-font-mono);font-weight:var(--tk-weight-bold);
  font-variant-numeric:tabular-nums;font-size:19px;letter-spacing:-.02em;
  color:var(--tk-ink-secondary)}
.lb-nuova .grad .su{font-family:var(--tk-font-mono);font-size:9px;
  color:var(--tk-ink-secondary);letter-spacing:.1em}
.lb-nuova .grad.primo{padding:22px 9px 16px;border-color:var(--tk-glass-border-strong);
  background:linear-gradient(168deg,rgba(212,80,198,.24),rgba(208,129,85,.10) 60%,rgba(255,255,255,.055) 100%)}
.lb-nuova .grad.primo .posto{font-size:46px;color:var(--tk-ink-primary)}
.lb-nuova .grad.primo .chi{font-size:14.5px}
.lb-nuova .grad.primo .tot{font-size:27px;color:var(--tk-ink-primary)}
.lb-nuova .corona{position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  font-family:var(--tk-font-mono);font-size:8px;letter-spacing:.2em;color:var(--tk-brand-label);
  background:var(--tk-brand-gradient);padding:3px 9px;
  border-radius:var(--tk-radius-pill)}

/* ── le righe ────────────────────────────────────────────────────────────── */
.lb-nuova .righe{display:flex;flex-direction:column;gap:7px}
.lb-nuova .riga{display:grid;grid-template-columns:32px 1fr auto;gap:11px;
  align-items:center;padding:12px 13px;border-radius:14px;
  background:rgba(255,255,255,.055);border:1px solid transparent}
.lb-nuova .riga .posto{font-family:var(--tk-cond);font-weight:var(--tk-weight-bold);
  font-size:19px;color:var(--tk-ink-secondary);text-align:center;
  font-variant-numeric:tabular-nums}
.lb-nuova .riga .chi{font-weight:var(--tk-weight-semibold);font-size:14.5px;
  margin:0 0 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-nuova .riga .metro{font-family:var(--tk-font-mono);font-size:9.5px;
  color:var(--tk-ink-secondary);letter-spacing:.07em;margin:0}
.lb-nuova .riga .punti{text-align:right;font-family:var(--tk-font-mono);
  font-weight:var(--tk-weight-bold);font-size:18px;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.lb-nuova .riga .punti small{display:block;font-weight:var(--tk-weight-regular);
  font-size:8.5px;color:var(--tk-ink-secondary);letter-spacing:.12em;margin-top:1px}
/* LA TUA RIGA si marca con presenza e inchiostro, non con una tinta di famiglia:
   una riga oro direbbe «mentale» a chi ha appena imparato che l'oro e' quello. */
.lb-nuova .riga.tua{background:linear-gradient(100deg,rgba(180,85,245,.20),rgba(255,255,255,.085) 72%);
  border-color:var(--tk-glass-border-strong)}
.lb-nuova .riga.tua .posto{color:var(--tk-ink-primary)}

.lb-nuova .pie{font-family:var(--tk-font-mono);font-size:9.5px;
  color:var(--tk-ink-secondary);letter-spacing:.1em;text-align:center;
  margin-top:var(--tk-space-4)}

/* ── la riga appiccicata: SFUMA nel fondo invece di poggiare su una striscia
      piena. La striscia piena e' la «brutta staccatura» che Julian ha visto
      sulla scheda pre-gioco, e qui sarebbe la stessa cosa. ───────────────── */
/* APPICCICATA VUOL DIRE STICKY, non «in fondo al contenuto». Visto in uno
   scatto e non nel codice: con `margin-top:auto` dentro un contenitore che
   SCORRE, la riga finisce in coda alla lista e sparisce appena si scorre - cioe'
   fa esattamente il contrario di cio' che le si chiede, che e' non sparire mai.
   `position:sticky; bottom:0` la tiene incollata al bordo basso della vista
   mentre gli altri le scorrono sotto. */
.lb-nuova .sospesa{position:sticky;bottom:0;margin-top:auto;padding-top:26px;
  background:linear-gradient(to top,var(--tk-surface-frame-mid) 78%,rgba(13,8,22,0))}
/* IL FONDO PIENO SOTTO LA RIGA, e serve davvero: la riga ha uno sfondo
   semitrasparente, quindi senza una tinta piena dietro si LEGGE ATTRAVERSO la
   riga che le scorre sotto. Visto in uno scatto - il nome di un altro giocatore
   compariva dentro la riga del giocatore. Il gradiente da solo non bastava
   perche' la parte sfumata cadeva proprio sopra la riga. */
.lb-nuova .sospesa .riga{border-color:var(--tk-glass-border-strong);
  background-color:var(--tk-surface-frame-mid)}

/* ── LA BARRA DI NAVIGAZIONE, VESTITA PER QUESTO MONDO ──────────────────────
   Trovato guardando lo scatto: la schermata era scura e la nav in fondo era
   rimasta CHIARA, una fascia bianca sotto una pagina nera. Non e' un dettaglio
   di gusto - la nav prende i token del mondo vetro (--tk-glass-paint,
   --tk-glass-ink-*), e su un fondo scuro quei valori non sono ne' belli ne'
   misurati. Si veste qui, scoped alla sola schermata, con i token del mondo
   scuro che sono gia' misurati contro --tk-surface-frame-top: inchiostro
   secondario 6,17:1 (pavimento testo 4,50), traccia 3,82:1 (pavimento marca
   3,00). Nessun valore nuovo, nessuna soglia abbassata.
   Non tocco .nav in shell.css: quella e' la nav di TUTTE le schermate e questo
   e' il vestito di UNA. */
.frame[data-screen="leaderboard"] .nav{
  background:var(--tk-surface-frame-top);border-top-color:var(--tk-line-border)}
.frame[data-screen="leaderboard"] .nav .item .mark{border-color:var(--tk-track-dim)}
.frame[data-screen="leaderboard"] .nav .item span{color:var(--tk-ink-secondary)}
.frame[data-screen="leaderboard"] .nav .item.active .mark{
  border-color:var(--tk-ink-primary);background:rgba(255,255,255,.085)}
.frame[data-screen="leaderboard"] .nav .item.active span{color:var(--tk-ink-primary)}

@media (prefers-reduced-motion:no-preference){
  .lb-nuova .riga,.lb-nuova .grad{transition:transform .16s ease}
  .lb-nuova .riga:active{transform:scale(.985)}
}

/* ══ 02 · SCHEDA PRIMA DI UN ESERCIZIO ══════════════════════════════════════
   Julian: «lo sfondo dietro ai bottoni e' scollegato e crea una brutta
   staccatura, e non voglio che debbano scorrere». Le due cose sono legate: la
   striscia piena sotto i comandi esisteva per separarli dal testo che scorreva
   sotto. Tolto lo scorrimento, la striscia non serve piu' e i comandi possono
   SFUMARE nel fondo.
   I DUE NUMERI VENGONO PRIMA delle regole: sono la ragione per cui uno rigioca.
   Vetro, mai pannelli bianchi. */
.br-nuova{display:flex;flex-direction:column;flex:1;min-height:0;
  color:var(--tk-ink-primary)}
.br-nuova .br-fam{font-family:var(--tk-font-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;display:flex;align-items:center;gap:6px;margin:0}
.br-nuova .br-fam.cognitive{color:var(--tk-domain-cognitive)}
.br-nuova .br-fam.mental{color:var(--tk-domain-mental)}
.br-nuova .br-nome{font-family:var(--tk-cond);font-weight:800;font-size:40px;
  line-height:.94;text-transform:uppercase;margin:6px 0 0;letter-spacing:-.01em}
.br-nuova .br-tag{color:var(--tk-ink-secondary);font-size:14px;margin:9px 0 0;max-width:30ch}

/* i due record, in vetro */
.br-nuova .br-record{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0 0}
.br-nuova .rec{padding:15px 14px 14px;border-radius:16px;
  background:rgba(255,255,255,.055);border:1px solid var(--tk-line-border)}
.br-nuova .rec.mondo{background:linear-gradient(160deg,rgba(212,80,198,.18),rgba(255,255,255,.055) 70%);
  border-color:var(--tk-glass-border-strong)}
.br-nuova .rec .lab{font-family:var(--tk-font-mono);font-size:9px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--tk-ink-secondary);margin:0}
.br-nuova .rec .big{font-family:var(--tk-font-mono);font-weight:var(--tk-weight-bold);
  font-size:34px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em;
  margin:9px 0 0}
/* l'assenza non e' un numero e non deve pesare come un numero */
.br-nuova .rec .big.assente{font-size:15px;color:var(--tk-ink-secondary);
  font-weight:var(--tk-weight-regular);letter-spacing:0;margin-top:16px}
.br-nuova .rec .by{font-family:var(--tk-font-mono);font-size:9.5px;
  color:var(--tk-ink-secondary);margin:6px 0 0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}

/* le regole: poche righe numerate, niente muro di prosa */
.br-nuova .regole{list-style:none;padding:0;margin:22px 0 0;display:flex;
  flex-direction:column;gap:13px}
.br-nuova .regole li{display:grid;grid-template-columns:22px 1fr;gap:12px;
  align-items:start;font-size:14px;line-height:1.4;color:var(--tk-ink-primary)}
.br-nuova .regole b{font-family:var(--tk-font-mono);font-weight:var(--tk-weight-medium);
  font-size:11px;color:var(--tk-ink-primary);border:1px solid var(--tk-glass-border-strong);
  border-radius:6px;text-align:center;line-height:20px;height:22px}

/* cio' che il motore misura, in pastiglie invece che in coda a un capoverso */
.br-nuova .misure{margin:20px 0 0}
.br-nuova .misure p{font-family:var(--tk-font-mono);font-size:9px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--tk-ink-secondary);margin:0 0 9px}
.br-nuova .pastiglie{display:flex;gap:7px;flex-wrap:wrap}
.br-nuova .pastiglia{font-family:var(--tk-font-mono);font-size:10.5px;padding:6px 11px;
  border-radius:var(--tk-radius-pill);background:rgba(255,255,255,.055);
  border:1px solid var(--tk-line-border);color:var(--tk-ink-secondary)}

/* I COMANDI SFUMANO NEL FONDO. Niente striscia piena: era quella la
   «staccatura». Restano fuori dallo scorrimento come prima. */
.frame[data-screen="briefing"] .cta.brief-cta{
  background:linear-gradient(to top,var(--tk-surface-frame-mid) 46%,rgba(13,8,22,0));
  border-top:0}
/* I DUE BOTTONI, VESTITI PER QUESTO MONDO. Nello scatto erano rimasti quelli del
   mondo chiaro: un viola acceso e - peggio - un rettangolo GRIGIO CHIARO pieno
   in fondo a una pagina scura, che e' esattamente la «staccatura» di cui si
   lamentava Julian, solo spostata dal fondo al bottone.
   Il principale prende la firma del brand, che e' gia' un token misurato
   (--tk-brand-gradient) con il suo inchiostro gia' deciso da una misura:
   --tk-brand-label da' 5,45:1 sul viola e 6,58:1 sul corallo, mentre il bianco
   che il riferimento del brand ci metteva stava a 3,64 lungo TUTTO il gradiente,
   cioe' sotto il pavimento ovunque. Non rifaccio quella misura: la riuso.
   Il secondario diventa un fantasma - trasparente col suo bordo - perche' su
   questa schermata «torna indietro» non deve pesare quanto «comincia». */
.frame[data-screen="briefing"] .btn.primary{
  background:var(--tk-brand-gradient);color:var(--tk-brand-label);border:0}
.frame[data-screen="briefing"] .btn.secondary{
  background:transparent;border:1px solid var(--tk-glass-border-strong);
  color:var(--tk-ink-secondary)}
.frame[data-screen="briefing"] .nav{
  background:var(--tk-surface-frame-top);border-top-color:var(--tk-line-border)}
.frame[data-screen="briefing"] .nav .item .mark{border-color:var(--tk-track-dim)}
.frame[data-screen="briefing"] .nav .item span{color:var(--tk-ink-secondary)}
.frame[data-screen="briefing"] .nav .item.active .mark{
  border-color:var(--tk-ink-primary);background:rgba(255,255,255,.085)}
.frame[data-screen="briefing"] .nav .item.active span{color:var(--tk-ink-primary)}

/* ══ 03 · SCHEDA PERSONAGGIO (ME) ═══════════════════════════════════════════
   L'ARCHETIPO DIVENTA LA COSA PIU' GRANDE della schermata, letto come la classe
   di un personaggio invece che come una didascalia. Prima era una riga di 13px
   sopra il nome del giocatore.
   Il nome prende la firma del brand come RIEMPIMENTO DEL TESTO, ed e' il solo
   posto del rifacimento dove un gradiente fa da inchiostro. Il caso peggiore e'
   l'estremo piu' SCURO della firma contro il punto piu' CHIARO della scheda,
   e misurandolo il disegno del mock non passava: col viola al 26% che il mock
   propone il fondo diventa #47214b e la firma da' 3,63:1, sotto il pavimento
   del testo di 4,50. Il pavimento non si abbassa - il vetro si scurisce: al 10%
   il fondo e' #291731 e la firma da' 4,57:1 all'estremo freddo e 5,51 al caldo.
   La scheda perde un po' di viola e il NOME resta esattamente quello disegnato,
   che e' il verso giusto del compromesso: l'eroe di questa schermata e' il nome.
   Cercato per campionamento da 0,26 a 0,02; 0,10 e' il primo che regge. */
.me-nuova{color:var(--tk-ink-primary);
  /* L'ISOLA DICHIARA IL SUO INCHIOSTRO anche per l'SVG (stessa forma della
     porta d'ingresso, c0f09e2): me-view.js scrive i colori del radar e delle
     lancette come var(--tk-glass-ink-*) inline, cioe' l'inchiostro del mondo
     CHIARO - su questa pagina diventata scura usciva il «grigino sul viola»
     che Julian non riusciva a leggere. Qui i tre token si rimappano sui loro
     equivalenti del mondo scuro, e me-view.js resta intatto: e' la stessa
     parola, detta nel colore del mondo in cui ci si trova.
     Dentro .me-nuova non esiste nessuna sotto-superficie chiara (verificato:
     tutte le carte sono vetro scuro), quindi la rimappa non puo' colpire un
     testo che stava giusto. */
  --tk-glass-ink-primary:var(--tk-ink-primary);
  --tk-glass-ink-secondary:var(--tk-ink-secondary);
  --tk-glass-ink-faint:rgba(255,255,255,.28)}

/* LE OTTO ETICHETTE DEL RADAR: BIANCHE E OMBREGGIATE (Julian, 2026-08-23:
   «le scritte in quel grigino sul viola non si vedono bene, meglio bianco
   ombreggiato»). Micro-testo sopra un poligono colorato: il passo secondario
   non basta, prendono l'inchiostro pieno, e l'ombra le stacca dal poligono
   quando il vertice ci passa sotto. La rimappa e' sul contenitore del radar
   e vince sull'inline perche' e' il VALORE della variabile a cambiare, non
   la regola. */
.me-nuova .radar-wrap{--tk-glass-ink-secondary:var(--tk-ink-primary)}
.me-nuova .radar-wrap svg text{filter:drop-shadow(0 1px 2px rgba(0,0,0,.75))}
/* e la griglia della ragnatela sale un passo: sotto i .28 di prima i cerchi
   sparivano dietro il poligono e la ragnatela non si leggeva come ragnatela */
.me-nuova .radar-wrap{--tk-glass-ink-faint:rgba(255,255,255,.34)}
/* i pixel di questa scheda sono CONTATI: il bordo alto del radar deve restare
   entro y=470, che e' la banda su cui e' tarato il modello di contrasto
   (d055-outcome lo misura). Alla prima scrittura il radar finiva a 483 e il
   banco l'ha fermato: la scheda dell'archetipo costa altezza, e la si paga
   qui invece che spostando il limite. */
.me-nuova .eroe{position:relative;border-radius:20px;padding:18px 18px 16px;
  overflow:hidden;border:1px solid var(--tk-glass-border-strong);
  background:linear-gradient(150deg,rgba(212,80,198,.10),rgba(180,85,245,.06) 55%,rgba(255,255,255,.055) 100%)}
.me-nuova .eroe .kick{font-family:var(--tk-font-mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tk-ink-secondary);margin:0}
.me-nuova .eroe .nome{font-family:var(--tk-cond);font-weight:800;font-size:44px;
  line-height:.94;text-transform:uppercase;letter-spacing:-.01em;margin:7px 0 0;
  background:var(--tk-brand-gradient);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.me-nuova .eroe .asse{font-family:var(--tk-font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tk-ink-secondary);margin:8px 0 0}

/* i due numeri, con la loro barra */
.me-nuova .coppia{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.me-nuova .misura{padding:15px 14px;border-radius:16px;background:rgba(255,255,255,.055);
  border:1px solid var(--tk-line-border)}
.me-nuova .misura .lab{font-family:var(--tk-font-mono);font-size:9px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--tk-ink-secondary);margin:0;display:flex;
  align-items:center;gap:6px}
.me-nuova .misura .val{font-family:var(--tk-font-mono);font-weight:var(--tk-weight-bold);
  font-size:36px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em;
  margin:9px 0 0}
.me-nuova .misura.c .val{color:var(--tk-domain-cognitive)}
.me-nuova .misura.m .val{color:var(--tk-domain-mental)}
/* l'assenza non e' un numero: non prende il corpo di un numero ne' la sua tinta */
.me-nuova .misura .val.assente{color:var(--tk-ink-secondary)}
.me-nuova .traccia{height:4px;border-radius:2px;background:rgba(255,255,255,.07);
  margin-top:11px;overflow:hidden}
.me-nuova .traccia i{display:block;height:100%}
.me-nuova .misura.c .traccia i{background:var(--tk-domain-cognitive)}
.me-nuova .misura.m .traccia i{background:var(--tk-domain-mental)}

.me-nuova .carta-radar{margin-top:10px;padding:12px 14px 10px;border-radius:18px;
  background:rgba(255,255,255,.055);border:1px solid var(--tk-line-border)}
.me-nuova .carta-radar > p{font-family:var(--tk-font-mono);font-size:9px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--tk-ink-secondary);margin:0 0 4px}
.me-nuova .carta-radar svg{display:block;width:100%;height:auto}

.me-nuova .sezione{font-family:var(--tk-font-mono);font-size:9px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--tk-ink-secondary);margin:14px 0 8px}
.me-nuova .parole{font-size:14px;line-height:1.5;color:var(--tk-ink-primary);margin:0}

/* L'ELENCO DEI GIOCHI. Veste il markup che me-view GIA' produce (.me-games .row)
   invece di chiederne uno nuovo: quella funzione la usano anche altri controlli,
   e cambiarne la forma per una questione di vestito sarebbe stato muovere il
   soggetto per comodita' del sarto. Il filetto tinto a sinistra che la riga
   aveva nel mondo chiaro qui diventa il PALLINO della famiglia, che e' la stessa
   marca usata dalla legenda della classifica e dalla riga della scheda
   pre-gioco: una marca sola in tutta l'app. */
.me-nuova .me-games{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.me-nuova .me-games .row{display:grid;grid-template-columns:1fr auto;gap:11px;
  align-items:center;padding:12px 13px 12px 26px;border-radius:13px;position:relative;
  background:rgba(255,255,255,.055);border:1px solid var(--tk-line-border);border-left-width:1px}
.me-nuova .me-games .row::before{content:"";position:absolute;left:11px;top:50%;
  width:8px;height:8px;margin-top:-4px;border-radius:var(--tk-radius-round);
  background:var(--tk-ink-secondary)}
.me-nuova .me-games.fam-cognitive .row::before{background:var(--tk-domain-cognitive)}
.me-nuova .me-games.fam-mental .row::before{background:var(--tk-domain-mental)}
/* il colore si DICHIARA anche qui: senza, il nome del gioco eredita
   l'inchiostro del mondo chiaro e resta scuro su scuro. E' la terza volta che
   questo rifacimento incontra la stessa specie, e le prime due le ha trovate
   uno scatto, non il codice. */
.me-nuova .me-games .row .n{font-weight:var(--tk-weight-semibold);font-size:14px;
  display:block;color:var(--tk-ink-primary)}
.me-nuova .me-games .row .t{font-family:var(--tk-font-mono);font-size:9.5px;
  color:var(--tk-ink-secondary);letter-spacing:.06em;display:block;margin-top:1px}
.me-nuova .me-games .row .v{font-family:var(--tk-font-mono);font-weight:var(--tk-weight-bold);
  font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-align:right;
  color:var(--tk-ink-primary)}
.me-nuova .me-games .row .v.na{color:var(--tk-ink-secondary);font-weight:var(--tk-weight-regular)}

/* IL MARCHIO, che su questo fondo era diventato invisibile. Misurato:
   --tk-logo-ink da' 1,31:1 sul mondo scuro - non «poco leggibile», proprio non
   c'e'. Il token giusto esisteva gia' (--tk-logo-ink-dark, 16,53:1) ed era
   dichiarato MORTO da world.test.js «col mondo scuro che non c'e' piu'». Il
   mondo scuro e' tornato, in cinque sedi, quindi quel divieto vietava
   esattamente la cura. Adesso quel banco lo AMMETTE sulle sedi scure nominate e
   lo vieta ovunque altro: il segno prende l'inchiostro del mondo in cui sta, che
   e' la regola che quel file custodisce da sempre. */
.frame[data-screen="me"] .logo{color:var(--tk-logo-ink-dark)}
.frame[data-screen="me"] .nav{
  background:var(--tk-surface-frame-top);border-top-color:var(--tk-line-border)}
.frame[data-screen="me"] .nav .item .mark{border-color:var(--tk-track-dim)}
.frame[data-screen="me"] .nav .item span{color:var(--tk-ink-secondary)}
.frame[data-screen="me"] .nav .item.active .mark{
  border-color:var(--tk-ink-primary);background:rgba(255,255,255,.085)}
.frame[data-screen="me"] .nav .item.active span{color:var(--tk-ink-primary)}

/* ── I PANNELLI PER GIOCO ────────────────────────────────────────────────────
   IL BUCO CHE IL MOCK NON COPRIVA (2026-08-23, CTO). Il mock consegnato a VETRO
   conteneva la classifica GENERALE e basta, quindi i pannelli per gioco sono
   rimasti nel vestito vecchio. Julian, che ha la generale ancora vuota, vedeva
   SOLO quelli: «la classifica non c'entra niente con il mockup, ha preso solo
   qualche colore e ha lasciato tutto com'era prima». Aveva ragione su cio' che
   vedeva, e la causa era la specifica incompleta, non il lavoro.
   Stessa lingua della generale: vetro, il nome del gioco in condensato, il
   punteggio in monospaziato a destra, e la famiglia come pallino PIU' parola. */
.lb-nuova .pannelli{display:flex;flex-direction:column;gap:var(--tk-space-3);
  margin-top:var(--tk-space-5)}
.lb-nuova .pannello{padding:15px 14px 13px;border-radius:var(--tk-radius-md);
  background:rgba(255,255,255,.055);border:1px solid var(--tk-line-border)}

.lb-nuova .p-testa{margin-bottom:var(--tk-space-3)}
.lb-nuova .p-nome{font-family:var(--tk-cond);font-weight:800;font-size:23px;
  line-height:1;letter-spacing:-.01em;text-transform:uppercase;
  color:var(--tk-ink-primary);margin:0}
.lb-nuova .p-fam{display:flex;align-items:center;gap:7px;margin-top:6px}
.lb-nuova .p-fam-parola{font-family:var(--tk-font-mono);font-size:var(--tk-text-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--tk-ink-secondary)}

.lb-nuova .p-righe{display:flex;flex-direction:column}
.lb-nuova .p-riga{display:grid;grid-template-columns:22px 1fr auto;gap:11px;
  align-items:center;padding:9px 0;border-top:1px solid var(--tk-line-border)}
.lb-nuova .p-riga:first-child{border-top:0}
.lb-nuova .p-posto{font-family:var(--tk-cond);font-weight:var(--tk-weight-bold);
  font-size:16px;color:var(--tk-ink-secondary);text-align:center;
  font-variant-numeric:tabular-nums}
.lb-nuova .p-chi{font-weight:var(--tk-weight-semibold);font-size:14px;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-nuova .p-liv{font-family:var(--tk-font-mono);font-size:9.5px;
  color:var(--tk-ink-secondary);letter-spacing:.07em;margin:1px 0 0}
.lb-nuova .p-punti{font-family:var(--tk-font-mono);font-weight:var(--tk-weight-bold);
  font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  text-align:right}

/* la TUA riga dentro un pannello: stessa marca della generale - presenza e
   inchiostro, mai una tinta di famiglia, che direbbe un'altra cosa */
.lb-nuova .p-riga.tua{background:linear-gradient(100deg,rgba(180,85,245,.20),rgba(255,255,255,.085) 72%);
  border-top-color:transparent;border-radius:10px;padding-left:6px;padding-right:8px;
  margin:2px 0}
.lb-nuova .p-riga.tua .p-posto{color:var(--tk-ink-primary)}

.lb-nuova .p-vuoto{color:var(--tk-ink-secondary);font-size:13px;margin:0}

/* ── IL LIVELLO SULLA SCHEDA (2026-08-23) ────────────────────────────────────
   Il selettore viveva nella pagina del motore che autostart ha saltato; torna
   qui in UNA riga, perche' l'ordine e' che questa schermata non scorra.
   La pastiglia scelta porta il gradiente del marchio con l'inchiostro scuro
   (misura del login: bianco sul gradiente 3,64 nel punto migliore, scuro 5,45
   nel peggiore); le altre sono vetro. aria-pressed e' la verita' dello stato,
   il vestito la segue. */
.br-nuova .br-livelli{display:flex;align-items:center;justify-content:space-between;
  gap:var(--tk-space-3);margin-top:var(--tk-space-3)}
.br-nuova .br-livelli .lab{font-family:var(--tk-font-mono);font-size:9px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--tk-ink-secondary);margin:0}
.br-nuova .lv-pillole{display:flex;gap:8px}
.br-nuova .lv-pillola{width:var(--tk-target-min);height:var(--tk-target-min);border-radius:var(--tk-radius-round);
  font-family:var(--tk-font-mono);font-weight:var(--tk-weight-bold);font-size:15px;
  color:var(--tk-ink-secondary);background:rgba(255,255,255,.055);
  border:1px solid var(--tk-line-border);cursor:pointer;padding:0}
.br-nuova .lv-pillola[aria-pressed="true"]{background:var(--tk-brand-gradient);
  color:var(--tk-brand-label);border-color:transparent}
.br-nuova .lv-pillola:focus-visible{outline:var(--tk-btn-focus-ring-w) solid var(--tk-btn-focus-ring);
  outline-offset:2px}

/* ── IL TELEFONO CORTO: SI COMPRIME, NON SI SCORRE ───────────────────────────
   Misurato con la sonda dei livelli: a 390x844 la scheda sta in pagina con
   margine, a 375x667 scorreva di 118px. L'ordine e' «una pagina sola», quindi
   sotto i 750 di altezza il RITMO scende - spazi e corpi, mai i bersagli (le
   pastiglie restano al pavimento dei 44) e mai le parole. */
@media (max-height:750px){
  .br-nuova .pastiglia{padding:4px 9px}
  .br-nuova .rec .big{font-size:24px;margin-top:4px}
  .br-nuova .rec{padding:8px 12px 8px}
  .br-nuova .br-nome{font-size:29px}
  .br-nuova .regole{margin-top:10px;gap:6px}
  .br-nuova .br-record{margin-top:9px}
  .br-nuova .br-livelli{margin-top:8px}
  .br-nuova .misure{margin-top:6px}
  .br-nuova .misure p{margin-bottom:4px}
  .br-nuova .regole li{gap:9px;font-size:13.5px}
  .br-nuova .rec .by{margin-top:3px}
}

/* ── LA RIGA DELLA PRIVACY sulla porta d'ingresso (2026-08-23) ─────────────
   Piccola, centrata, inchiostro secondario; il LINK e' inchiostro pieno e
   sottolineato, perche' un link che non si distingue dal testo e' un link che
   nessuno tocca. Il pavimento del testo regge: ink-secondary e' misurato
   6,17:1 sul fondo scuro. */
.frame[data-porta="ingresso"] .porta-privacy{font-size:11.5px;line-height:1.5;
  color:var(--tk-ink-secondary);text-align:center;margin:10px 0 0;max-width:34ch;
  margin-left:auto;margin-right:auto}
.frame[data-porta="ingresso"] .porta-privacy a{color:var(--tk-ink-primary);
  text-decoration:underline;text-underline-offset:2px;
  /* il pavimento dei 44 vale anche per un link di una riga: l'area di tocco
     si gonfia col padding e il margine negativo la ricompensa, cosi' il testo
     non si muove di un pixel ma il dito ha i suoi 44 */
  display:inline-block;padding:14px 6px;margin:-14px -6px}
.frame[data-porta="ingresso"] .porta-privacy a:focus-visible{
  outline:var(--tk-btn-focus-ring-w) solid var(--tk-btn-focus-ring);outline-offset:2px}

/* ── IL COMMUTATORE DELLA CLASSIFICA (2026-08-24) ────────────────────────────
   Due segmenti in una pillola di vetro: GLOBALE (default) e il NOME del gioco
   da cui sei entrato. Il segmento scelto porta il vetro alto e l'inchiostro
   pieno; l'altro resta tenue. Alti 44: sono bersagli, e il pavimento vale
   anche qui. aria-pressed e' lo stato, il vestito lo segue. */
.lb-nuova .lb-commuta{display:grid;grid-template-columns:1fr 1fr;gap:4px;
  margin:var(--tk-space-3) 0 0;padding:4px;border-radius:var(--tk-radius-pill);
  background:rgba(255,255,255,.055);border:1px solid var(--tk-line-border)}
.lb-nuova .lb-commuta .seg{height:44px;border:0;border-radius:var(--tk-radius-pill);
  font-family:var(--tk-cond);font-weight:var(--tk-weight-bold);font-size:15px;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
  background:transparent;color:var(--tk-ink-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px}
.lb-nuova .lb-commuta .seg[aria-pressed="true"]{background:rgba(255,255,255,.10);
  color:var(--tk-ink-primary)}
.lb-nuova .lb-commuta .seg:focus-visible{outline:var(--tk-btn-focus-ring-w) solid var(--tk-btn-focus-ring);outline-offset:2px}

/* la vista del gioco riusa l'anatomia delle righe della generale; qui solo
   il respiro sopra la famiglia */
.lb-nuova .lb-gioco{margin-top:var(--tk-space-4)}
.lb-nuova .lb-gioco .br-fam{display:flex;align-items:center;gap:7px;
  font-family:var(--tk-font-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 var(--tk-space-3)}
.lb-nuova .lb-gioco .br-fam.cognitive{color:var(--tk-domain-cognitive)}
.lb-nuova .lb-gioco .br-fam.mental{color:var(--tk-domain-mental)}