/* ============================================================
   I RAGAZZUOLI DEL PASCOLO — Ricreazione Infinita
   UI stylesheet. Palette: prato caldo + notte fredda + oro merenda.
   Nessun font esterno: stack di sistema, tutto offline-friendly.
   ============================================================ */

:root{
  --bg:        #0a1018;
  --bg2:       #0e1622;
  --panel:     rgba(16, 24, 38, .92);
  --panel2:    rgba(24, 34, 54, .94);
  --line:      #2c3f63;
  --line2:     #3d5a8c;
  --ink:       #e8f0ff;
  --ink-dim:   #9fb0d0;
  --ink-faint: #6b7c9c;
  --gold:      #ffcf5a;
  --gold-hi:   #ffe9a8;
  --gold-dk:   #a06a12;
  --grass:     #6bbf59;
  --grass-dk:  #2f7a3c;
  --sky:       #7fc4e8;
  --danger:    #ff4d5a;
  --violet:    #9b7bff;
  --r:         14px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
/* Le emoji hanno bisogno del proprio font, altrimenti su Windows escono
   come glifi monocromatici a contorno: 🏆 diventa un trofeo vuoto e 🍪 un
   cerchio. Vanno IN CODA allo stack, così il testo normale resta nel font
   di sistema e solo i caratteri emoji ricadono qui. */
html,body{width:100%;height:100%;background:var(--bg);overflow:hidden;
  font-family:'Segoe UI',system-ui,-apple-system,'Trebuchet MS',Roboto,sans-serif,
    'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji','Segoe UI Symbol';
  font-variant-numeric:tabular-nums;}
#wrap{position:fixed;inset:0;background:var(--bg);}
#game{display:block;width:100%;height:100%;background:#0a1018;touch-action:none;image-rendering:auto;}

.hidden{display:none!important;}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;text-align:center;color:var(--ink);gap:0;
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:max(18px,env(safe-area-inset-top)) 14px max(22px,env(safe-area-inset-bottom));}
.screen::before{content:'';margin-top:auto;flex:0 0 0;}
.screen::after{content:'';margin-bottom:auto;flex:0 0 0;}
.screen.dim{background:radial-gradient(ellipse 90% 80% at 50% 45%, rgba(6,10,20,.90), rgba(4,7,14,.96));backdrop-filter:blur(3px);}
/* lo spazio in basso lascia respirare i ragazzuoli che pascolano sul fondo */
#menuScreen{background:radial-gradient(ellipse 78% 62% at 50% 40%, rgba(6,11,22,.52), rgba(6,11,22,.24) 56%, rgba(6,11,22,0) 82%);
  padding-bottom:min(19vh,160px);}
/* ⚠ CHI AGGIUNGE UNA SCHERMATA LA AGGIUNGA QUI. È il velo scuro che stacca
   ogni pannello dal prato: senza, la schermata resta sospesa sul cielo, il
   testo chiaro non ha contro cosa stagliarsi e si vede subito che quella
   schermata è stata fatta dopo e da un'altra parte. Successo con
   `#streamScreen`, che era l'unica fuori dall'elenco. */
#charScreen,#shopScreen,#optScreen,#codexScreen,#boardScreen,#streamScreen{
  background:radial-gradient(ellipse 88% 80% at 50% 44%, rgba(6,11,22,.80), rgba(6,11,22,.58) 58%, rgba(6,11,22,.30) 88%);}

/* ---------- boot ---------- */
.boot{background:var(--bg);gap:18px;}
.bootLogo{font-size:64px;animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-10px) rotate(4deg);}}
.bootBar{width:min(320px,70vw);height:8px;border-radius:6px;background:rgba(255,255,255,.10);overflow:hidden;}
.bootBar i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--gold-hi),var(--gold));transition:width .18s ease-out;}
.bootTxt{font-size:13px;letter-spacing:2px;color:var(--ink-faint);text-transform:uppercase;}

/* ---------- logo ---------- */
.logo{line-height:.94;filter:drop-shadow(0 5px 0 rgba(48,26,10,.55)) drop-shadow(0 10px 22px rgba(0,0,0,.6));
  animation:logoGlow 4.2s ease-in-out infinite;}
@keyframes logoGlow{
  0%,100%{filter:drop-shadow(0 5px 0 rgba(48,26,10,.55)) drop-shadow(0 10px 22px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(255,200,90,.18));}
  50%    {filter:drop-shadow(0 5px 0 rgba(48,26,10,.55)) drop-shadow(0 10px 22px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(255,214,120,.42));}}
/* nota: la shorthand `background` azzera background-clip, quindi le
   proprietà di clip vanno dichiarate DOPO, non prima */
.logo .ln1,.logo .sub{display:block;font-weight:900;paint-order:stroke fill;}
.logo .ln1{font-size:clamp(34px,7.4vw,84px);letter-spacing:1px;
  background:linear-gradient(180deg,#fff6dc 0%,#ffc94e 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;-webkit-text-stroke:3px #46280e;}
.logo .sub{font-size:clamp(20px,3.9vw,48px);letter-spacing:5px;margin-top:2px;
  background:linear-gradient(180deg,#eaf6ff 0%,#6fc9ff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;-webkit-text-stroke:2.4px #1e3a7a;}
.logo .ver{display:block;margin-top:9px;font-size:clamp(9px,1.35vw,13px);letter-spacing:6px;
  color:#9fd6ff;opacity:.82;font-weight:700;-webkit-text-fill-color:#9fd6ff;text-shadow:0 2px 8px rgba(0,0,0,.8);}

.tagline{color:#cddcf6;font-size:clamp(12px,1.55vw,15.5px);margin-top:20px;max-width:610px;line-height:1.62;
  padding:0 16px;text-shadow:0 2px 8px rgba(0,0,0,.9);}
.tagline em{color:var(--gold-hi);font-style:normal;font-weight:700;}

/* ---------- buttons ---------- */
.btn{padding:13px 38px;font-size:clamp(14px,1.9vw,19px);font-weight:900;letter-spacing:1.4px;font-family:inherit;
  color:#1a1206;background:linear-gradient(180deg,#ffe089,#ffb63f);border:none;border-radius:40px;cursor:pointer;
  box-shadow:0 6px 0 #9a5a10, 0 8px 22px rgba(0,0,0,.45);transition:transform .07s,box-shadow .07s,filter .12s;
  text-transform:uppercase;white-space:nowrap;}
.btn:hover{filter:brightness(1.07);}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #9a5a10,0 4px 12px rgba(0,0,0,.45);}
.btn.sm{padding:10px 22px;font-size:clamp(12px,1.5vw,15px);box-shadow:0 5px 0 #9a5a10,0 6px 16px rgba(0,0,0,.4);}
.btn.sec{background:linear-gradient(180deg,#8fb6ff,#4a72dc);color:#fff;box-shadow:0 5px 0 #27408c,0 6px 16px rgba(0,0,0,.4);}
.btn.sec:active{box-shadow:0 2px 0 #27408c;}
.btn.gh{background:linear-gradient(180deg,rgba(44,58,92,.95),rgba(26,36,60,.95));color:#cfe0ff;
  box-shadow:0 5px 0 #16203a,0 6px 16px rgba(0,0,0,.4);border:1px solid #3b5183;}
.btn.gh:active{box-shadow:0 2px 0 #16203a;}
.btn:disabled{filter:grayscale(.8) brightness(.7);cursor:default;}
/* GIOCA CON TWITCH — il viola di Twitch, riconoscibile a colpo d'occhio senza
   bisogno di leggere. Sta appena sotto il pulsante principale: è la seconda
   cosa che vedi, non una voce di configurazione. La riga piccola sotto serve
   perché il nome della modalità da solo non dice cosa succede. */
/* ---------- gerarchia del menu: azione · modalità · servizi ---------- */
/* Le tre misure NON sono decorative: sono la gerarchia. Il pulsante grande
   (`.btn`, ~300px) è l'azione che il giocatore cerca; `.md` sono le modalità,
   tutte identiche fra loro perché sono scelte alla pari; `.xs` sono le
   schermate da leggere, e devono pesare meno di una partita da giocare.
   Twitch è viola ma della misura delle altre modalità: il colore lo rende
   speciale senza rubare la scena all'azione principale. */
/* ⚠ LE MISURE VENGONO DAL TESTO PIU' LUNGO, non da un numero scelto a occhio.
   Prima riga a 430px: «CO-OP LOCALE» usciva **tagliato** (il `.btn` ha
   `white-space:nowrap`, quindi non va a capo: sparisce e basta) e la riga dei
   servizi mandava «OPZIONI» da sola sotto. Le etichette piu' lunghe sono
   «SFIDA DEL GIORNO» e «LA DISPENSA»: la riga deve contenere quelle, in
   italiano e in inglese, o il difetto torna appena si cambia lingua.
   `padding` orizzontale piccolo e `letter-spacing` ridotto servono a questo,
   non all'estetica. */
/* ⚠ IL MINIMO DEL `clamp` E' LA MISURA MOBILE, non un ripiego. Su uno schermo
   da 375px `1vw` vale 3,75px, quindi il termine centrale perde sempre e resta
   **solo il minimo**: scritto 9,5px, sul telefono si legge 9,5px e basta —
   sotto la soglia in cui una parola si riconosce a colpo d'occhio. Su desktop
   quel numero non si vede mai, e per questo l'errore passa inosservato a chi
   prova solo lì. I minimi qui sotto sono scelti per il telefono; il massimo
   per il monitor. */
.btn.md{padding:11px 10px;font-size:clamp(12.5px,1.35vw,13.5px);letter-spacing:.4px;
  flex:1 1 0;min-width:0;
  box-shadow:0 5px 0 #9a5a10,0 6px 16px rgba(0,0,0,.4);}
.btn.md.sec{box-shadow:0 5px 0 #27408c,0 6px 16px rgba(0,0,0,.4);}
.btn.xs{padding:7px 11px;font-size:clamp(11px,1.05vw,11.5px);letter-spacing:.3px;
  box-shadow:0 3px 0 #16203a,0 4px 10px rgba(0,0,0,.35);}
.btn.xs:active{box-shadow:0 1px 0 #16203a;}
.modeRow{display:flex;gap:8px;justify-content:center;align-items:stretch;
  width:min(540px,94vw);margin:3px auto 0;}
.svcRow{display:flex;gap:6px;justify-content:center;flex-wrap:nowrap;
  width:min(540px,94vw);margin:4px auto 0;opacity:.92;}
#btnPlay{min-width:min(300px,86vw);}
/* Sotto i 430px di larghezza reale il testo non ci sta comunque: li' le
   modalita' passano a due righe invece di troncarsi. */
@media (max-width:460px){
  .modeRow{flex-wrap:wrap;}
  .btn.md{flex:1 1 45%;}
  .svcRow{flex-wrap:wrap;}
}

.btn.tw{background:linear-gradient(180deg,#a970ff,#7433cc);color:#fff;
  box-shadow:0 5px 0 #4b1f8a,0 6px 16px rgba(0,0,0,.4);}
.btn.tw:active{box-shadow:0 2px 0 #4b1f8a;}
.btnRow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;}
.menucol{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:22px;}
.ghostBtn{background:rgba(10,16,28,.6);border:1px solid #3b5183;color:#cfe0ff;border-radius:10px;
  padding:9px 16px;font-size:13px;font-weight:800;letter-spacing:1px;cursor:pointer;font-family:inherit;}
.ghostBtn:hover{background:rgba(20,30,52,.8);}
.intro{background:none;pointer-events:none;justify-content:flex-end;}
.intro .skip{pointer-events:auto;position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));}

.hint{margin-top:16px;color:#b9c8e6;font-size:12.5px;letter-spacing:.6px;text-shadow:0 2px 6px rgba(0,0,0,.9);opacity:.9;}
.rec{margin-top:18px;color:#dfe9ff;font-size:13px;letter-spacing:.4px;text-shadow:0 2px 6px rgba(0,0,0,.9);}
.rec b{color:var(--gold-hi);}
.rec span{opacity:.5;margin:0 8px;}

/* ---------- titles ---------- */
.lvlTitle{font-weight:900;letter-spacing:1.5px;font-size:clamp(22px,3.6vw,40px);margin-bottom:6px;
  background:linear-gradient(180deg,#fff6dc 0%,#ffc94e 100%);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;-webkit-text-stroke:2.2px #46280e;paint-order:stroke fill;
  filter:drop-shadow(0 3px 0 rgba(48,26,10,.5)) drop-shadow(0 6px 14px rgba(0,0,0,.5));}
/* ⚠ ERA AZZURRO CHIARO (#a9d6ff) SOPRA UN CIELO AZZURRO CHIARO. Funzionava
   nelle schermate che hanno un pannello scuro dietro e spariva in quelle che
   stanno sul prato: sottotitolo praticamente invisibile, con l'ombra sfumata
   che non bastava a staccarlo. Il titolo sopra si legge perche' ha un
   contorno pieno; questo aveva solo un alone.
   Ora: bianco appena caldo (regge sia sul cielo che sui pannelli scuri) e
   un'ombra NETTA sotto — un contorno povero, che e' quello che serve quando
   non si sa che colore ci sara' dietro. La spaziatura scende da 2,4 a 1,6:
   a 12,5px maiuscoli, 2,4 sfilaccia le parole. */
.lvlSub{color:#fff3dc;font-size:12.5px;letter-spacing:1.6px;margin-bottom:20px;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(30,18,6,.9), 0 2px 8px rgba(0,0,0,.85);}
/* La riga d'apertura della schermata Twitch e' una FRASE, non un'etichetta:
   dice al giocatore cosa fa la modalita'. Alle etichette il maiuscolo piccolo
   sta bene, a una frase no — a 12,5px maiuscoli su un cielo chiaro non si
   legge, e nessun colore la salva finche' resta cosi'. Qui: piu' grande,
   minuscola, spaziatura normale, e uno sfondo appena accennato che la stacca
   dal prato senza farne un pannello. */
#streamScreen .lvlSub{font-size:clamp(13px,1.5vw,15px);letter-spacing:.2px;text-transform:none;
  font-weight:600;color:#e9dcff;max-width:620px;margin:0 auto 18px;}

/* ---------- mode row (normale / daily / co-op) ---------- */
.modeRow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:16px;}
.modeChip{padding:8px 16px;border-radius:22px;border:1.5px solid #3b5183;background:rgba(18,26,44,.8);
  color:#b9c8e6;font-weight:800;font-size:12.5px;letter-spacing:.8px;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;gap:7px;transition:.12s;}
.modeChip:hover{border-color:#5a78b8;}
.modeChip.on{background:linear-gradient(180deg,#ffe089,#ffb63f);color:#1a1206;border-color:transparent;
  box-shadow:0 0 18px rgba(255,180,70,.35);}
.modeChip small{opacity:.65;font-weight:700;}

/* ---------- character select ---------- */
.charsel{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:900px;}
.charcard{position:relative;width:132px;background:var(--panel);border:2px solid var(--line);border-radius:16px;
  padding:12px 8px 10px;cursor:pointer;transition:transform .13s,border-color .13s,box-shadow .13s;backdrop-filter:blur(3px);}
.charcard:hover{transform:translateY(-4px);border-color:#54709f;}
.charcard.on{border-color:var(--gold);box-shadow:0 0 26px rgba(255,180,70,.4);transform:translateY(-5px);}
.charcard.locked{opacity:.42;filter:grayscale(.85);}
.charcard canvas{display:block;margin:0 auto 6px;width:100%;max-width:86px;height:auto;}
.charcard .nm{font-weight:900;color:var(--gold-hi);font-size:14px;letter-spacing:.5px;}
.charcard .rl{font-size:9.5px;color:#8fa4cc;letter-spacing:1.4px;text-transform:uppercase;margin-top:2px;}
.charcard .lk{position:absolute;inset:auto 0 8px;font-size:10px;color:#ffa88a;padding:0 6px;line-height:1.25;}
.charcard .newTag{position:absolute;top:-7px;right:-6px;background:var(--danger);color:#fff;font-size:9px;
  font-weight:900;padding:2px 7px;border-radius:9px;letter-spacing:1px;}

.charinfo{margin-top:16px;width:min(620px,95vw);background:linear-gradient(180deg,rgba(20,29,50,.95),rgba(11,17,32,.95));
  border:1px solid #3a4d7e;border-left:4px solid var(--gold);border-radius:16px;padding:15px 19px;color:#cdd9f4;
  box-shadow:0 12px 34px rgba(0,0,0,.5);text-align:left;}
.charinfo .cih{font-weight:900;color:var(--gold-hi);font-size:21px;display:flex;align-items:center;flex-wrap:wrap;gap:9px;
  text-shadow:0 0 16px rgba(255,180,70,.4);}
.charinfo .role{font-size:10px;font-weight:900;letter-spacing:2px;color:#1a1206;
  background:linear-gradient(180deg,#ffe06a,#ffb43d);padding:3px 10px;border-radius:20px;}
.charinfo .quote{font-style:italic;color:#ffdcae;font-size:12.5px;margin:7px 0 2px;opacity:.94;}
.charinfo .pw{font-size:12.8px;color:#c3d0ee;margin-top:8px;line-height:1.5;}
.charinfo .pw b{color:#fff;}
.charinfo .pw .trait{color:#ffd8a0;font-weight:800;}
/* la Merenda Speciale nella scheda personaggio */
.charinfo .ultBox{display:flex;gap:11px;align-items:flex-start;margin-top:11px;padding:9px 12px;
  background:rgba(255,255,255,.05);border:1px solid #3a4d7e;border-left-width:3px;border-radius:11px;}
.charinfo .ultIc{font-size:26px;line-height:1.1;flex:0 0 auto;}
.charinfo .ultBox b{font-size:14px;letter-spacing:.6px;}
.charinfo .ultKey{display:inline-block;margin-left:8px;font-size:9.5px;font-weight:800;letter-spacing:1px;
  color:#cfe0ff;background:rgba(255,255,255,.10);border:1px solid #4a5c88;border-bottom-width:2px;
  border-radius:5px;padding:1px 6px;vertical-align:middle;}
.charinfo .ultD{font-size:12px;color:#b8c6e6;margin-top:4px;line-height:1.42;}

.charinfo .grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;margin-top:13px;}
.charinfo .stat{display:flex;align-items:center;gap:9px;}
.charinfo .stat .sl{flex:0 0 88px;font-size:9.5px;font-weight:900;letter-spacing:1.1px;color:#8fa4cc;text-align:right;text-transform:uppercase;}
.charinfo .stat .track{flex:1;height:8px;border-radius:5px;background:rgba(255,255,255,.09);overflow:hidden;}
.charinfo .stat .fill{height:100%;border-radius:5px;transition:width .35s cubic-bezier(.2,.8,.2,1);}
.charinfo .diff{display:inline-flex;gap:2px;align-items:center;font-size:11px;color:#ffb0a0;margin-left:auto;}

/* ---------- level-up cards ---------- */
.levelup{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  background:radial-gradient(ellipse 90% 80% at 50% 45%, rgba(6,10,22,.86), rgba(3,6,14,.93));backdrop-filter:blur(3px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;padding:max(16px,env(safe-area-inset-top)) 10px max(18px,env(safe-area-inset-bottom));}
.levelup::before{content:'';margin-top:auto;flex:0 0 0;}
.levelup::after{content:'';margin-bottom:auto;flex:0 0 0;}
.cards{display:flex;flex-direction:column;gap:10px;width:min(580px,95vw);}
.ucard{display:flex;align-items:center;gap:13px;width:100%;text-align:left;font-family:inherit;
  background:linear-gradient(180deg,rgba(28,38,66,.97),rgba(15,21,40,.97));border:2px solid #3a4d80;border-radius:15px;
  padding:13px 15px;cursor:pointer;transition:transform .1s,border-color .1s,box-shadow .1s;color:var(--ink);
  animation:cardIn .26s cubic-bezier(.2,.9,.3,1.3) backwards;}
.ucard:nth-child(1){animation-delay:.00s}.ucard:nth-child(2){animation-delay:.05s}
.ucard:nth-child(3){animation-delay:.10s}.ucard:nth-child(4){animation-delay:.15s}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:none;}}
.ucard:hover{transform:translateY(-3px);border-color:#5f7cbb;box-shadow:0 10px 26px rgba(0,0,0,.55);}
.ucard:active{transform:scale(.985);}
.ucard .ic{font-size:29px;width:52px;height:52px;line-height:52px;text-align:center;flex:0 0 52px;
  background:rgba(255,255,255,.07);border-radius:13px;}
.ucard .utx{flex:1;min-width:0;}
.ucard .ti{font-weight:900;font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.22;}
.ucard .lv{font-size:11px;font-weight:800;letter-spacing:.6px;color:#9bd0ff;background:rgba(120,190,255,.13);
  padding:2px 7px;border-radius:8px;}
.ucard .de{font-size:12.6px;color:#aebbe0;margin-top:5px;line-height:1.4;}
.ucard .de b{color:#ffe08a;}
.ucard.evo{border-color:#ffae3d;box-shadow:0 0 26px rgba(255,160,50,.35);
  background:linear-gradient(180deg,rgba(64,44,16,.96),rgba(32,22,10,.96));}
.ucard.newW{border-color:#5ad08a;}
.ucard.rare{border-color:#8f7bff;}
.ucard.epic{border-color:#ff7ad0;}
.ucard.banished{opacity:.42;filter:grayscale(.6);}
/* carta evidenziata dal cursore (tastiera / gamepad) */
.ucard.sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,207,90,.35),0 10px 26px rgba(0,0,0,.55);
  transform:translateY(-3px);}
.ucard.sel::before{content:'▸';position:absolute;left:-18px;color:var(--gold);font-size:20px;font-weight:900;}
.ucard{position:relative;}
.badge{display:inline-block;font-size:9.5px;font-weight:900;letter-spacing:1.1px;padding:2px 8px;border-radius:9px;}
.luActions{display:flex;gap:9px;justify-content:center;margin-top:15px;flex-wrap:wrap;}
.lubtn{background:rgba(20,28,52,.9);border:1.5px solid #3a4a74;color:#cfe0ff;border-radius:10px;padding:9px 15px;
  font-size:13px;font-weight:800;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:6px;}
.lubtn:hover{border-color:#5f7cbb;}
.lubtn.rr{border-color:#5aa0ff;color:#9fc8ff;}
.lubtn.bn{border-color:#ff6a7a;color:#ffaab2;}
.lubtn.bn.on{background:#ff6a7a;color:#190a0e;}
.lubtn.sk{border-color:#8a96b8;color:#b8c2dc;}
.lubtn.off{opacity:.3;cursor:default;}
.luWho{font-size:12px;letter-spacing:2px;color:#ffd86b;font-weight:900;margin-bottom:8px;text-transform:uppercase;}

/* ---------- stats block ---------- */
.stats{display:flex;gap:24px;margin:16px 0 6px;flex-wrap:wrap;justify-content:center;}
.stat .v{font-size:29px;font-weight:900;color:var(--gold);line-height:1.05;}
.stat .l{font-size:10px;letter-spacing:1.3px;color:#8fa4cc;text-transform:uppercase;margin-top:2px;}

/* ---------- build box (pause / end) ---------- */
.buildBox{width:min(620px,95vw);background:rgba(14,21,38,.85);border:1px solid #2e416b;border-radius:14px;
  padding:12px 14px;margin:10px 0;display:flex;flex-direction:column;gap:9px;}
.buildRow{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;align-items:center;}
.buildRow .lbl{font-size:10px;letter-spacing:1.4px;color:#8fa4cc;text-transform:uppercase;flex:0 0 100%;margin-bottom:1px;}
.chipItem{display:flex;align-items:center;gap:5px;background:rgba(34,46,76,.9);border:1px solid #3d5488;
  border-radius:10px;padding:4px 9px 4px 6px;font-size:12px;color:#dbe6ff;}
.chipItem .ci{font-size:16px;}
.chipItem .cl{font-size:10px;font-weight:900;color:#9bd0ff;}
.chipItem.evo{border-color:#ffae3d;background:rgba(70,48,16,.9);}
.chipItem.relic{border-color:#ffd86b;}

/* ---------- shop ---------- */
#shopList{display:flex;flex-direction:column;align-items:center;gap:9px;width:min(600px,95vw);}
.shoprow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:linear-gradient(180deg,rgba(24,32,58,.95),rgba(13,18,36,.95));border:1px solid #3a4d7e;
  border-left:4px solid var(--gold);border-radius:12px;padding:11px 14px;box-shadow:0 6px 18px rgba(0,0,0,.4);}
.shoprow .si{text-align:left;flex:1;min-width:0;}
.shoprow .sn{font-weight:900;color:var(--ink);font-size:14px;display:flex;align-items:center;gap:7px;}
.shoprow .sd{font-size:11.5px;color:#a2b2d6;margin-top:3px;line-height:1.35;}
.shoprow .pips{display:flex;gap:3px;margin-top:5px;}
.shoprow .pip{width:16px;height:5px;border-radius:3px;background:rgba(255,255,255,.14);}
.shoprow .pip.on{background:linear-gradient(90deg,var(--gold-hi),var(--gold));box-shadow:0 0 6px rgba(255,190,80,.6);}
.shoprow .sb{padding:9px 15px;border-radius:20px;border:none;font-weight:900;cursor:pointer;font-family:inherit;
  background:linear-gradient(180deg,#ffe089,#ffb63f);color:#1a1206;font-size:12.5px;white-space:nowrap;}
.shoprow .sb:disabled{background:#242e4c;color:#5a688a;cursor:default;}
.shoprow.curse{border-left-color:var(--danger);}
/* ---------- Dispensa: le informazioni che mancavano ----------
   Nessun numero del gioco cambia qui: cambia solo cosa se ne vede. */
/* Il portafoglio: era una riga di sottotitolo come le altre, e le merendine
   disponibili sono la cosa che si guarda per prima quando si entra a
   comprare. Ora è una riga sua, con il numero in evidenza. */
.shopWallet{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;max-width:560px;margin:0 auto 10px;padding:8px 16px;
  background:rgba(10,16,30,.55);border-radius:22px;
  font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:#a2b2d6;}
.shopWallet b{font-size:17px;letter-spacing:0;}
/* «3 / 8» accanto al nome: i pallini da soli si contano male oltre i quattro,
   e a colpo d'occhio non dicono quanti ne mancano. */
.shoprow .sLv{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.5px;
  color:#8fa3cc;background:rgba(255,255,255,.07);border-radius:10px;padding:2px 8px;}
/* «ora +15% → +20%»: il salto che stai comprando, che è la domanda vera
   davanti a un pulsante con un prezzo sopra. */
.shoprow .sStep{display:inline-block;margin-top:6px;font-size:11.5px;color:#93a5cc;}
.shoprow .sStep b{color:#cfe0ff;font-weight:800;}
.shoprow .sStep b.next{color:#ffd86b;}
/* MAX e «non te lo puoi permettere» erano lo stesso grigio spento: due
   messaggi opposti — uno è un traguardo, l'altro un ostacolo temporaneo. */
.shoprow .sb.isMax{background:linear-gradient(180deg,#6ee8a0,#2f9c62);color:#04240f;opacity:.95;}
.shoprow .sb.isMax:disabled{background:linear-gradient(180deg,#6ee8a0,#2f9c62);color:#04240f;}
.shoprow.maxed{border-left-color:#3fbf7a;}
.shoprow .sb.poor:disabled{background:#2a2036;color:#8d7aa6;}
.shoprow .pip{width:18px;height:6px;}
@media (max-width:560px){
  .shoprow .sLv{margin-left:8px;}
  .shopWallet{font-size:11px;padding:7px 12px;}
}
.gold{color:var(--gold);font-weight:900;}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:7px;margin-bottom:16px;flex-wrap:wrap;justify-content:center;}
.tab{padding:8px 18px;border-radius:20px;border:1.5px solid #3b5183;background:rgba(18,26,44,.8);color:#b9c8e6;
  font-weight:800;font-size:12.5px;letter-spacing:.9px;cursor:pointer;font-family:inherit;}
.tab.on{background:linear-gradient(180deg,#ffe089,#ffb63f);color:#1a1206;border-color:transparent;}

/* ---------- codex ---------- */
.codexBody{width:min(860px,96vw);margin-bottom:18px;}
.achprog{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:16px;}
.achprogbar{width:100%;height:12px;background:rgba(10,14,30,.7);border-radius:8px;overflow:hidden;border:1px solid rgba(255,216,107,.32);}
.achprogfill{height:100%;background:linear-gradient(90deg,var(--gold-hi),var(--gold));box-shadow:0 0 12px rgba(255,180,70,.6);width:0;transition:width .7s cubic-bezier(.2,.8,.2,1);}
.achprogtxt{font-weight:900;color:var(--gold-hi);letter-spacing:1px;font-size:13.5px;}
.achgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;}
.achcard{position:relative;background:rgba(18,26,46,.85);border:2px solid var(--line);border-radius:14px;
  padding:13px 10px 11px;text-align:center;overflow:hidden;}
.achcard .aic{font-size:28px;line-height:1;margin-bottom:7px;filter:grayscale(1) brightness(.5);}
.achcard .anm{font-weight:900;color:#c6d3f2;font-size:12.5px;margin-bottom:4px;}
.achcard .ads{font-size:10.5px;color:#8090b8;line-height:1.35;}
.achcard.got{border-color:var(--gold);background:linear-gradient(180deg,rgba(62,46,18,.92),rgba(30,24,48,.92));
  box-shadow:0 0 20px rgba(255,180,70,.24);}
.achcard.got .aic{filter:none;}
.achcard.got .anm{color:var(--gold-hi);}
.achcard.got .ads{color:#dcc9a2;}
.achcard.got::after{content:'✓';position:absolute;top:6px;right:8px;color:#1a1206;
  background:linear-gradient(180deg,#ffe06a,#ffb43d);width:19px;height:19px;border-radius:50%;font-size:12px;
  font-weight:900;line-height:19px;}
.dexgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;text-align:left;}
.dexcard{background:rgba(18,26,46,.85);border:1px solid var(--line);border-left:3px solid #4a6ba8;border-radius:12px;padding:11px 12px;}
.dexcard .dh{display:flex;align-items:center;gap:8px;font-weight:900;font-size:13.5px;color:#dbe6ff;}
.dexcard .dh canvas{width:44px;height:44px;image-rendering:auto;flex:0 0 44px;margin:-4px 0;}
.dexcard .dd{font-size:11.5px;color:#9fb0d4;margin-top:6px;line-height:1.4;}
.dexcard .dk{font-size:10px;color:#7b8cb2;margin-top:5px;letter-spacing:.7px;}
.dexcard.boss{border-left-color:var(--danger);}
.howto{text-align:left;background:rgba(16,24,42,.85);border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  font-size:13.4px;line-height:1.7;color:#c6d3f2;}
.howto h3{color:var(--gold-hi);font-size:15px;margin:14px 0 6px;letter-spacing:.6px;}
.howto h3:first-child{margin-top:0;}
.howto b{color:#fff;}
.howto kbd{background:rgba(255,255,255,.10);border:1px solid #4a5c88;border-bottom-width:2px;border-radius:5px;
  padding:1px 6px;font-size:12px;font-family:inherit;font-weight:800;color:#e8f0ff;}
.howto ul{margin:4px 0 0 18px;}
.howto li{margin:3px 0;}

/* ---------- leaderboard ---------- */
.boardBody{width:min(700px,96vw);margin-bottom:18px;}
.bTable{display:flex;flex-direction:column;gap:5px;}
.bRow{display:grid;grid-template-columns:44px 1fr auto auto;gap:10px;align-items:center;
  background:rgba(18,26,46,.82);border:1px solid var(--line);border-radius:11px;padding:9px 13px;text-align:left;}
.bRow.head{background:none;border:none;padding:2px 13px;font-size:10px;letter-spacing:1.4px;color:#7b8cb2;text-transform:uppercase;}
.bRow .rk{font-weight:900;font-size:16px;color:#8fa4cc;text-align:center;}
.bRow .nm{font-weight:900;font-size:14.5px;color:#e8f0ff;letter-spacing:1.6px;display:flex;align-items:center;gap:8px;overflow:hidden;}
.bRow .nm .hero{font-size:10px;letter-spacing:1px;color:#8fa4cc;font-weight:700;white-space:nowrap;}
.bRow .sc{font-weight:900;color:var(--gold);font-size:15px;}
.bRow .tm{font-size:11.5px;color:#9fb0d4;min-width:52px;text-align:right;}
.bRow.mine{border-color:var(--gold);background:linear-gradient(90deg,rgba(70,52,18,.9),rgba(20,28,48,.86));}
.bRow.r1 .rk{color:#ffd24a;}.bRow.r2 .rk{color:#dfe6f2;}.bRow.r3 .rk{color:#e0a165;}
.bEmpty{text-align:center;color:#7b8cb2;font-size:13px;padding:26px 10px;line-height:1.7;}
.bStatus{font-size:11px;color:#7b8cb2;letter-spacing:1px;margin-bottom:10px;text-transform:uppercase;}
.bStatus.ok{color:#6ecb8a;}
.bStatus.off{color:#c8925a;}

/* ---------- arcade name entry ---------- */
.nameEntry{width:min(520px,95vw);background:linear-gradient(180deg,rgba(30,22,8,.95),rgba(16,14,26,.95));
  border:2px solid var(--gold);border-radius:16px;padding:16px 18px;margin:14px 0;
  box-shadow:0 0 40px rgba(255,180,70,.28);}
.neTitle{font-weight:900;letter-spacing:3px;color:var(--gold-hi);font-size:14px;margin-bottom:12px;}
.neRow{display:flex;gap:7px;justify-content:center;margin-bottom:10px;}
.neCell{width:44px;height:58px;border-radius:10px;background:rgba(0,0,0,.42);border:2px solid #4c3d1c;
  display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;color:#ffe9a8;
  font-family:'Courier New',monospace;}
.neCell.on{border-color:var(--gold);box-shadow:0 0 18px rgba(255,190,70,.55);animation:neBlink 1s steps(2) infinite;}
@keyframes neBlink{0%,100%{background:rgba(0,0,0,.42);}50%{background:rgba(255,190,70,.18);}}
.neHint{font-size:11px;color:#c2ab7c;letter-spacing:.6px;margin-bottom:10px;}

/* ---------- options ---------- */
.optlist{display:flex;flex-direction:column;gap:9px;width:min(560px,95vw);margin-bottom:20px;}
.optSect{font-size:10.5px;letter-spacing:2.2px;color:#8fa4cc;text-transform:uppercase;text-align:left;
  margin:12px 0 2px;padding-left:4px;}
.optSect:first-child{margin-top:0;}
.optrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(180deg,rgba(24,32,58,.94),rgba(13,18,36,.94));border:1px solid #3a4d7e;
  border-left:4px solid #6f8fd8;border-radius:12px;padding:11px 15px;box-shadow:0 5px 15px rgba(0,0,0,.35);}
.optrow .oi{text-align:left;flex:1;min-width:0;}
.optrow .ol{font-weight:800;color:var(--ink);font-size:14px;}
.optrow .od{font-size:11px;color:#93a5cc;margin-top:2px;line-height:1.35;}
.opttog{display:flex;gap:6px;flex-shrink:0;}
.opttog button{padding:7px 13px;border-radius:16px;border:1px solid #3b5183;background:rgba(38,50,84,.7);
  color:#b9c8e6;font-weight:800;cursor:pointer;font-size:12px;font-family:inherit;white-space:nowrap;}
.opttog button.on{background:linear-gradient(180deg,#ffe089,#ffb63f);color:#1a1206;border-color:transparent;}
.optsld{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.optsld input[type=range]{accent-color:#ffb43d;width:120px;height:22px;cursor:pointer;}
.sldpct{font-size:12px;color:#9fb0d4;min-width:40px;text-align:right;font-weight:800;}
.optrow .obtn{padding:8px 16px;border-radius:18px;border:none;background:linear-gradient(180deg,#ff8a8a,#d84a4a);
  color:#fff;font-weight:800;cursor:pointer;font-size:12.5px;font-family:inherit;white-space:nowrap;}
.comfortPresets{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-bottom:4px;}
.cpBtn{padding:9px 15px;border-radius:12px;border:1.5px solid #3b5183;background:rgba(18,26,44,.85);color:#b9c8e6;
  font-weight:800;font-size:12px;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:2px;align-items:center;}
.cpBtn small{font-size:9.5px;opacity:.7;font-weight:600;letter-spacing:.4px;}
.cpBtn.on{background:linear-gradient(180deg,#8fb6ff,#4a72dc);color:#fff;border-color:transparent;}

/* ---------- in-game buttons ---------- */
#pauseBtn,#fsBtn{position:absolute;z-index:30;background:rgba(10,16,30,.55);border:1px solid #3b5183;color:#bcd;
  border-radius:9px;padding:8px 13px;font-size:14px;cursor:pointer;font-family:inherit;backdrop-filter:blur(4px);}
#pauseBtn{top:max(10px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));}
#fsBtn{top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));}

/* ---------- montaggio clip ---------- */
#clipOverlay{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 80% 70% at 50% 50%, rgba(6,10,22,.92), rgba(3,6,14,.97));}
#clipOverlay .clipBox{width:min(420px,86vw);text-align:center;color:var(--ink);}
#clipOverlay .clipTitle{font-weight:900;font-size:19px;color:var(--gold-hi);margin-bottom:14px;letter-spacing:.5px;}
#clipOverlay .clipBar{height:10px;border-radius:6px;background:rgba(255,255,255,.10);overflow:hidden;}
#clipOverlay .clipBar i{display:block;height:100%;width:0;border-radius:6px;
  background:linear-gradient(90deg,var(--gold-hi),var(--gold));transition:width .12s linear;}
#clipOverlay .clipHint{margin-top:12px;font-size:12.5px;color:var(--ink-dim);line-height:1.5;}

/* ---------- toasts ---------- */
#toastHost{position:absolute;z-index:40;left:50%;transform:translateX(-50%);
  top:max(58px,calc(env(safe-area-inset-top) + 58px));display:flex;flex-direction:column;gap:6px;align-items:center;
  pointer-events:none;width:100%;padding:0 12px;}
.toast{background:linear-gradient(180deg,rgba(34,44,74,.96),rgba(18,24,44,.96));border:1.5px solid var(--gold);
  border-radius:12px;padding:8px 16px;font-weight:800;font-size:13px;color:var(--gold-hi);letter-spacing:.6px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);animation:toastIn .3s cubic-bezier(.2,.9,.3,1.3);max-width:min(420px,92vw);}
.toast.info{border-color:#6f8fd8;color:#cfe0ff;}
.toast.bad{border-color:var(--danger);color:#ffb4ba;}
.toast.out{animation:toastOut .3s forwards;}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px) scale(.9);}to{opacity:1;transform:none;}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px) scale(.94);}}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .charsel{gap:8px;}
  .charcard{width:29%;min-width:92px;max-width:126px;padding:9px 6px 8px;border-radius:13px;}
  .charcard .nm{font-size:12.5px;}
  .cards{gap:8px;}
  .ucard{padding:11px 12px;gap:10px;}
  .ucard .ic{font-size:26px;width:44px;height:44px;line-height:44px;flex:0 0 44px;}
  .ucard .ti{font-size:14.5px;}
  .ucard .de{font-size:11.8px;}
  .stats{gap:16px;}
  .stat .v{font-size:24px;}
  .bRow{grid-template-columns:34px 1fr auto auto;gap:7px;padding:8px 10px;}
  .neCell{width:36px;height:48px;font-size:24px;}
}
@media (max-width:480px){
  .charcard{width:44%;max-width:none;}
  .charinfo .grid2{grid-template-columns:1fr;}
  .charinfo .cih{font-size:18px;}
  .optrow{flex-direction:column;align-items:stretch;gap:9px;}
  .optsld,.opttog{justify-content:flex-end;}
}
@media (max-height:540px){
  .tagline{display:none;}
  .hint{margin-top:8px;}
  .menucol{margin-top:12px;gap:8px;}
}

/* ---------- comandi su schermo tattile ----------
   Misurati a 375×812: quasi tutti i comandi stavano fra i 22 e i 38 px di
   altezza, sotto i 44 px che servono a un dito per non sbagliare bersaglio.
   Si usa pointer:coarse e non una larghezza: un tablet in orizzontale è
   largo ma si tocca lo stesso, e col mouse i bersagli piccoli vanno bene. */
@media (pointer:coarse){
  .btn,.btn.sm,.tab,.modeChip,.ghostBtn,.lubtn,.cpBtn,
  .shoprow .sb,.optrow .obtn,.opttog button{min-height:44px;}
  .opttog button{padding-left:16px;padding-right:16px;}
  .tab,.modeChip,.ghostBtn,.lubtn,.cpBtn{padding-top:10px;padding-bottom:10px;}
  .shoprow .sb,.optrow .obtn{padding-left:18px;padding-right:18px;}
  /* il cursore ha una presa piccolissima: si allarga l'area, non il disegno */
  .optsld input[type=range]{height:44px;}
  .neCell{min-width:44px;min-height:52px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* "Perché sono morto": la riga che decide se uno riprova o chiude.
   Sta sopra il riepilogo della build perché è la domanda che uno si fa
   nell'istante in cui compare la schermata. */
.endDiag{
  margin: 0 auto 12px; max-width: 520px; padding: 10px 14px;
  background: rgba(255,106,122,.10); border: 1px solid rgba(255,106,122,.35);
  border-radius: 10px; text-align: center;
}
.endDiag .dCome{ color:#ffb4bd; font-weight:800; font-size:14px; }
.endDiag .dCons{ color:#cfe0ff; font-size:12.5px; margin-top:5px; line-height:1.45; }

/* Suggerimento al primo giorno: una riga sotto le carte, non un cartello
   che copre la scelta. Compare una volta sola e non torna. */
.luTip{
  margin: 10px auto 0; max-width: 560px; padding: 8px 14px;
  background: rgba(200,162,255,.12); border: 1px solid rgba(200,162,255,.4);
  border-radius: 10px; color:#e8f0ff; font-size: 12.5px; line-height:1.45;
  text-align: center;
}

/* ---------- selezione personaggi: griglia su monitor, carosello su telefono ----------
   Misurato su 375×812 PRIMA di questa regola: la schermata era alta 1124px e
   il pulsante «AL PASCOLO» cadeva a y=1057, cioè fuori dallo schermo. Sei
   ritratti in griglia stanno bene sul monitor e non ci stanno sul telefono:
   là si mostra un ragazzuolo alla volta e il pulsante resta sotto gli occhi.
   Le frecce esistono sempre nel DOM: qui si decide se mostrarle, perché la
   larghezza la sa il foglio di stile e non il codice. */
.charNav{display:none;}
@media (max-width:560px){
  .charsel{position:relative;justify-content:center;align-items:center;gap:0;min-height:180px;}
  /* si vede solo il ragazzuolo scelto; gli altri restano nel DOM (lo stato e
     i ritratti già disegnati non si buttano) ma non occupano spazio */
  .charsel .charcard{display:none;}
  .charsel .charcard.on{display:block;width:min(210px,58vw);margin:0 auto;}
  .charNav{display:flex;align-items:center;justify-content:center;
    position:absolute;top:50%;transform:translateY(-50%);
    width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
    font-size:26px;font-weight:900;line-height:1;font-family:inherit;
    background:linear-gradient(180deg,#8fb6ff,#4a72dc);color:#fff;
    box-shadow:0 4px 0 #27408c,0 5px 14px rgba(0,0,0,.4);}
  .charNav:active{transform:translateY(-50%) translateY(3px);box-shadow:0 1px 0 #27408c;}
  .charNav.prev{left:2px;}
  .charNav.next{right:2px;}
  /* la scheda si accorcia: su un telefono il testo lungo spinge il pulsante
     fuori schermo, ed è esattamente il difetto che stiamo togliendo */
  .charinfo{font-size:12px;}
}

/* ---------- il cartello della modalità, sul telefono ----------
   Misurato a 375×812: la schermata di scelta è alta 812 esatti in partita
   normale (perfetta), ma in Sfida diventa 939 e in Co-op 891, perché lì si
   aggiunge il cartello — 158px e 110px — e il pulsante «AL PASCOLO» finisce
   fuori vista. È lo stesso difetto già corretto per la partita normale, che
   ricompare dove c'è un elemento in più: **una cura misurata su una schermata
   non vale per le altre finché non le misuri**.
   Qui il cartello non si taglia (dice cose che servono: chi giocherai, quali
   regole, quali tasti) — si comprime. */
@media (max-width:560px){
  .modeRow{gap:5px;}
  .modeRow .modeChip{padding:5px 11px;font-size:11px;}
  .modeRow .lvlSub{font-size:10.5px;line-height:1.32;letter-spacing:.2px;
    margin:5px 0 0;padding:0 4px;}
  .modeRow .lvlSub b{font-size:11px;}
  /* la scheda del personaggio è il pezzo più grosso (445px): sul telefono
     stringe gli spazi interni, non il testo */
  .charinfo{padding:10px 12px;line-height:1.36;}
}

/* ---------- e la scheda si scorre da sola ----------
   Comprimere font e spazi aveva recuperato 42px sui 127 che servivano: si può
   continuare a limare, ma è una rincorsa — basta un testo più lungo, una
   lingua più prolissa o uno schermo più corto e il pulsante torna fuori.
   Meglio togliere la causa: sul telefono la SCHEDA (il pezzo più grosso, 445px)
   prende l'altezza che avanza e si scorre al suo interno. Il pulsante «AL
   PASCOLO» sta sempre sotto e sempre in vista, qualunque cosa ci sia scritto
   sopra — che è la garanzia che serve, non un numero che torna oggi. */
/* ⚠ PRIMA AVEVO MESSO UNO SCROLL DENTRO LA SCHEDA, e non andava bene: uno
   scroll annidato dentro una pagina che già scorre è scomodo col dito (non sai
   quale dei due stai muovendo) e la sfumatura in fondo, invece di dire «c'è
   dell'altro», sembra un difetto di disegno.
   La pagina torna a scorrere in modo normale, e il pulsante d'azione si stacca
   dal flusso: resta INCOLLATO in basso, sempre raggiungibile. Così la scheda
   si legge tutta scorrendo, come ci si aspetta, e «AL PASCOLO» non scappa mai
   — che era l'unica cosa che dovevo garantire. */
@media (max-width:560px){
  #charScreen .btnRow{
    position:sticky;bottom:0;z-index:3;
    width:100%;padding:10px 0 max(6px,env(safe-area-inset-bottom));margin-top:4px;
    /* la sfumatura sotto i pulsanti li stacca dal testo che ci passa dietro */
    background:linear-gradient(180deg,rgba(8,13,24,0),rgba(8,13,24,.86) 38%,rgba(8,13,24,.96));
  }
}

/* ---------- inserimento del nome: otto celle in 375px ----------
   Misurato: 8 celle × 44 px + 7 spazi da 7 = 401 px, in 357 disponibili.
   Traboccavano di 44 — la prima usciva a sinistra (x −13) e l'ultima a destra
   (388 su 375). Il difetto nasceva da due regole che si contraddicono: una
   porta le celle a 36 px sugli schermi piccoli, l'altra impone `min-width:44px`
   ai bersagli di tocco. Vince la seconda, e le celle tornano larghe.
   Il `min-width` NON era sbagliato — le celle si toccano davvero — ma otto
   bersagli da 44 px affiancati non entrano in un telefono: qui il vincolo di
   accessibilità e quello di spazio si escludono, e va scelto.
   Scelta: si stringe la LARGHEZZA e si tiene l'ALTEZZA. Il bersaglio resta
   38×52 px, ben dentro il comodo, e il nome resta su una riga sola — perché
   spezzato in due righe non si legge più come una parola.
   ⚠ La regola sta in fondo al foglio, DOPO quella dei bersagli di tocco: a
   parità di specificità vince l'ultima, ed è l'unico modo di scavalcarla senza
   toccare una regola che serve a tutto il resto. */
@media (max-width:430px){
  .neRow{gap:4px;}
  .neCell{width:38px;min-width:38px;height:52px;min-height:52px;font-size:22px;}
}