/* ============================================================
   ZERITHAL — PALETTE "CALORE SU METALLO"
   Fonte unica di verità per i colori del re-theme.
   Usare SOLO queste variabili nei componenti; non hardcodare altri colori.
   Il JS usa i valori equivalenti in ZRT.THEME (Constants.js).
   ============================================================ */
:root {
  /* Strutture e sfondi — metallo scuro in tre livelli di profondità */
  --metal-900:      #0a0c10;   /* sfondo più profondo: schermo di boot, cielo */
  --metal-800:      #14181f;   /* sfondo UI e schermate overlay */
  --metal-700:      #2a2f38;   /* superfici secondarie: card, bordi, pareti */

  /* Accento calore primario — HUD, player, highlight, azioni positive
     ("metallo rovente" che pulsa sotto sforzo) */
  --heat-primary:   #ff6a1a;   /* rosso-arancio: colore firma di ZERITHAL */
  --heat-secondary: #ff8c22;   /* arancio più caldo: variante glow/hover */

  /* Allarme / critico — vita bassa, proiettili boss, danno letale */
  --alarm:          #ff2a2a;

  /* Contrasto freddo (parsimonia) — XP, UI neutri, indicatori informativi
     Usare con parsimonia: rompe il monocromatismo caldo solo dove serve leggibilità */
  --cold:           #22d3ee;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0c10;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #111111;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ============================================================
   CANVAS
   Il canvas si adatta alla finestra intera
   ============================================================ */
#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}

/* ============================================================
   OVERLAY UI
   ============================================================ */
#ui {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Lascia passare gli eventi al canvas di default */
  z-index: 10;
}

/* Tutte le schermate overlay condividono questa base */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}

.hidden {
  display: none !important;
}

/* ============================================================
   MENU INIZIALE
   ============================================================ */
#menu-screen {
  /* Semi-trasparente: il fondale dungeon disegnato sul canvas filtra attraverso */
  background:
    radial-gradient(ellipse at 50% 110%, rgba(255, 106, 26, 0.05) 0%, transparent 55%),
    rgba(6, 8, 12, 0.30);
  animation: fadeIn 0.6s ease;
}

/* Scanline leggere — effetto schermo industriale */
#menu-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255, 255, 255, 0.012) 3px,
    rgba(255, 255, 255, 0.012) 4px
  );
  pointer-events: none;
  z-index: 1;
}

.menu-content {
  /* Desktop: griglia a tre colonne bilanciate (classifica | centro | potenziamenti) */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "rank center right";
  column-gap: clamp(0.8rem, 2vw, 1.8rem);
  padding: clamp(0.8rem, 2vh, 1.5rem) clamp(0.8rem, 2vw, 1.8rem);
  width: min(99%, 1150px);
  height: 100vh;
  height: 100svh;
  position: relative;
  z-index: 2;
}

/* ── COLONNA SINISTRA: placeholder classifica ──────────────────────────────── */
.menu-rank {
  grid-area: rank;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.rank-panel {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 0.7rem 0.75rem 0.6rem;
  overflow: hidden;
}

.rank-label {
  flex-shrink: 0;
  margin-bottom: 0.5rem;
}

.rank-rows {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  overflow: hidden;
}

/* Ogni riga è "censurata": filter blur e bassa opacità */
.rank-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  filter: blur(3px);
  opacity: 0.45;
  user-select: none;
  pointer-events: none;
}

.rank-pos {
  font-size: 0.62rem;
  font-family: 'Courier New', monospace;
  color: rgba(255, 106, 26, 0.6);
  font-weight: 700;
  min-width: 1.5rem;
  flex-shrink: 0;
}

.rank-name {
  flex: 1;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Courier New', monospace;
  letter-spacing: 0.04em;
}

.rank-score {
  font-size: 0.68rem;
  color: rgba(255, 200, 100, 0.6);
  font-family: 'Courier New', monospace;
  font-weight: 700;
  flex-shrink: 0;
}

/* Messaggio di blocco — in basso, centrato */
.rank-footer {
  margin-top: 0.7rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}

/* Un solo messaggio, uguale su tutti gli schermi [2026-09-30f]. Prima erano tre
   pezzi su desktop (🔒, "Accedi per vedere…", "// presto disponibile") e un
   messaggio diverso su mobile: il login non esisterà mai, quindi via tutti. */
.rank-msg {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.55;
  font-family: 'Courier New', 'Lucida Console', monospace;
  letter-spacing: 0.03em;
}

/* ── COLONNA CENTRALE: titolo + personaggi + azioni ─────────────────────────── */
.menu-center {
  grid-area: center;
  display: flex;
  flex-direction: column;
  gap: clamp(0.3rem, 0.9vh, 0.6rem);
  text-align: center;
  min-height: 0;
}

/* ── COLONNA DESTRA ───────────────────────────────────────────────────────── */
.menu-right {
  grid-area: right;
  display: flex;
  flex-direction: column;
  gap: clamp(0.2rem, 0.6vh, 0.4rem);
  text-align: left;
  min-height: 0;
  overflow: hidden;  /* necessario per flex: 1 1 0 dei figli */
}

/* Banda riservata alla riga in alto a destra (⚙, ℹ, bandiera).
   .menu-login-area è position:absolute e ancorata al bordo DELLA FINESTRA,
   mentre .menu-content è larga al massimo 1150px e centrata: sotto i ~1600px
   di finestra la riga finisce sopra questa colonna. Misurato: a 1440, 1280,
   1024 e 900 px copriva #char-mechanic-panel — il pannello "Capacità speciale".
   Non era un problema nato con ⚙ e ℹ: da 1280 in giù lo copriva già la riga
   di allora. Orizzontalmente la riga non ha dove spostarsi, quindi l'unico
   rimedio è lasciarle una banda in alto. (Misura presa quando nella riga c'era
   anche "Accedi", tolto il 2026-09-30: la riga è più corta, la banda resta.)
   Solo nel layout a tre colonne: sotto i 720px la griglia impila le sezioni e
   la colonna scende sotto la riga da sola. */
@media (min-width: 721px) {
  .menu-right { padding-top: 2.6rem; }
}

/* Upgrade panel nella colonna destra: cresce a riempire lo spazio residuo */
.menu-right #char-upgrade-panel {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Wrapper con gradient-fade in basso: segnala contenuto scrollabile */
.upgrade-scroll-wrap {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.upgrade-scroll-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(10, 12, 16, 0.97));
  pointer-events: none;
  z-index: 1;
  border-radius: 0 0 6px 6px;
  /* Visibile solo quando c'è overflow da segnalare.
     JS potrebbe nasconderlo quando scrollTop è a fondo — lasciamo statico,
     è un'indicazione visiva leggera, non un'interfaccia critica. */
}

.game-title {
  font-size: clamp(1.8rem, 13vw, 2.9rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--heat-primary);
  text-shadow:
    0 0 20px rgba(255, 106, 26, 0.9),
    0 0 50px rgba(255, 106, 26, 0.5),
    0 0 90px rgba(255, 140, 34, 0.2);
  animation: heatPulse 2.8s ease-in-out infinite;
  font-family: 'Courier New', 'Lucida Console', monospace;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.game-title span {
  display: block;
  color: var(--heat-secondary);
}

.game-subtitle {
  margin: 0.2rem 0 0;   /* gap del padre gestisce lo spazio sotto */
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: 'Courier New', 'Lucida Console', monospace;
  border-top: 1px solid rgba(255, 106, 26, 0.2);
  border-bottom: 1px solid rgba(255, 106, 26, 0.2);
  padding: 0.4rem 0;
}

/* ── CONTATORE CRISTALLI (menu principale) ───────────────────────────────── */
.shards-display {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 106, 26, 0.07);
  border: 1px solid rgba(255, 106, 26, 0.22);
  border-radius: 20px;
  padding: 0.28rem 1rem;
  margin-bottom: 0;   /* gap del padre gestisce lo spazio */
  font-family: 'Courier New', 'Lucida Console', monospace;
}

.shards-gem {
  font-size: 1rem;
  line-height: 1;
}

#shards-count {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--heat-secondary);
  letter-spacing: 0.04em;
  min-width: 2ch;
  text-align: right;
}

.shards-label {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.controls-info {
  margin-top: 1.2rem;
  padding: 0.9rem 1.2rem;
  background: rgba(10, 12, 16, 0.6);
  border: 1px solid rgba(255, 106, 26, 0.15);
  border-left: 3px solid var(--heat-primary);
  border-radius: 6px;
  text-align: left;
  font-size: 0.76rem;
  font-family: 'Courier New', 'Lucida Console', monospace;
  color: rgba(255, 255, 255, 0.38);
  line-height: 1.9;
}

.controls-info strong {
  color: var(--heat-secondary);
}

/* ============================================================
   BESTIARIO (legenda nemici nel menu iniziale)
   ============================================================ */
.enemy-legend {
  margin-top: 1rem;
  text-align: left;
  background: rgba(10, 12, 16, 0.45);
  border: 1px solid rgba(255, 106, 26, 0.12);
  border-radius: 8px;
  padding: 0.7rem 1rem 0.4rem;
}

.enemy-legend h3 {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--heat-primary);
  font-family: 'Courier New', 'Lucida Console', monospace;
  margin-bottom: 0.5rem;
}

#enemy-legend-list {
  max-height: 200px;
  overflow-y: auto;
  touch-action: pan-y;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.74rem;
}

.legend-row:last-child {
  border-bottom: none;
}

.legend-rank {
  flex: 0 0 1.1rem;
  color: var(--heat-primary);
  font-weight: 700;
}

.legend-swatch {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid;
  flex-shrink: 0;
}

.legend-name {
  flex: 0 0 108px;
  color: #e8ddd5;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legend-stats {
  flex: 0 0 92px;
  color: #9999bb;
  white-space: nowrap;
}

.legend-desc {
  flex: 1;
  color: rgba(255, 255, 255, 0.32);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   PULSANTI
   ============================================================ */
.btn-primary {
  display: inline-block;
  padding: 0.9rem 3rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #fff;
  background: linear-gradient(135deg, var(--heat-primary), var(--heat-secondary));
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 20px rgba(255, 106, 26, 0.45);
  pointer-events: all;
  font-family: inherit;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255, 106, 26, 0.65);
}

.btn-primary:active {
  transform: translateY(0);
}

/* GIOCA — azione principale, molto più grande degli altri btn-primary */
#btn-start {
  padding: 1.15rem 3.8rem;
  font-size: 1.65rem;
  letter-spacing: 0.22em;
  box-shadow:
    0 6px 28px rgba(255, 106, 26, 0.55),
    0 0 0 1px rgba(255, 106, 26, 0.22);
}

#btn-start:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 12px 40px rgba(255, 106, 26, 0.75),
    0 0 0 1px rgba(255, 106, 26, 0.40);
}

/* ============================================================
   SCHERMATA UPGRADE
   ============================================================ */
#upgrade-screen {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.3s ease;
}

.upgrade-content {
  text-align: center;
  padding: max(1.5rem, env(safe-area-inset-top, 0px)) 1.5rem 1.5rem;
  width: 100%;
  max-width: 700px;
  /* Previene il taglio del titolo: limita l'altezza al viewport e permette scroll */
  max-height: 100vh;   /* fallback universale */
  max-height: 100svh;  /* svh = viewport piccolo (esclude la toolbar mobile) — override se supportato */
  overflow-y: auto;
  touch-action: pan-y;
}

.upgrade-title {
  font-size: clamp(1.8rem, 6vw, 3rem);
  font-weight: 900;
  color: #ffd700;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  animation: levelUpPulse 0.5s ease;
}

.upgrade-subtitle {
  color: #aaa;
  margin: 0.4rem 0 1.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.upgrade-cards {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Singola card upgrade */
.upgrade-card {
  background: linear-gradient(160deg, var(--metal-800), var(--metal-900));
  border: 2px solid rgba(255, 106, 26, 0.2);
  border-radius: 16px;
  padding: 1.5rem 1.2rem;
  width: 190px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  pointer-events: all;
  text-align: center;
}

.upgrade-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--heat-primary);
  box-shadow: 0 12px 30px rgba(255, 106, 26, 0.35);
}

.upgrade-card:active {
  transform: translateY(-2px) scale(1.01);
}

.upgrade-card .card-icon {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 0.6rem;
}

.upgrade-card .card-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #e8ddd5;
  margin-bottom: 0.4rem;
}

.upgrade-card .card-value {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--heat-primary);
  margin-bottom: 0.5rem;
}

.upgrade-card .card-desc {
  font-size: 0.75rem;
  color: #7777aa;
  line-height: 1.4;
}

/* ============================================================
   AZIONI LEVEL-UP: barra cristalli + reroll + lock/banish
   ============================================================ */

/* Barra in cima al menu (contatore cristalli + pulsante reroll) */
.upgrade-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 1rem;
  gap: 0.75rem;
}

.crystal-counter {
  font-size: 0.9rem;
  color: #aaa;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.crystal-counter .crystal-count {
  color: #ffd700;
  font-weight: 900;
}

.btn-reroll {
  background: linear-gradient(135deg, var(--heat-primary), var(--heat-secondary));
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: opacity 0.2s ease, transform 0.1s ease;
  white-space: nowrap;
}

.btn-reroll:hover:not(:disabled) {
  opacity: 0.82;
  transform: translateY(-1px);
}

.btn-reroll:disabled,
.btn-reroll.disabled {
  opacity: 0.32;
  cursor: not-allowed;
  transform: none;
}

/* Controlli d'angolo sulle card (🔒 lock + 🚫 banish) */
.card-controls {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.btn-lock,
.btn-banish {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 7px;
  color: #888;
  font-size: 0.68rem;
  padding: 0.18rem 0.42rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1.3;
  pointer-events: all;
}

/* [2026-10-02] Il 🚫 spento ha la classe .disabled e non l'attributo disabled
   (vedi UpgradeMenu._createCard): senza :not(.disabled) si illuminava al passaggio. */
.btn-lock:hover,
.btn-banish:hover:not(:disabled):not(.disabled) {
  background: rgba(255, 255, 255, 0.13);
  color: #ddd;
}

/* Lock attivo: bordo dorato */
.btn-lock.active {
  background: rgba(255, 215, 0, 0.16);
  border-color: rgba(255, 215, 0, 0.6);
  color: #ffd700;
}

.btn-banish:disabled,
.btn-banish.disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

/* Card con upgrade bloccato: bordo dorato evidenziato */
.upgrade-card.card-locked {
  border-color: #ffd700 !important;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.28);
}

@media (max-width: 500px) {
  .upgrade-actions-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .btn-reroll { width: 100%; }
}

/* ============================================================
   TOOLTIP TUTORIAL / FTUE
   ============================================================ */
/* Centrato con left/right a 0 e margin-inline:auto, non con left:50% +
   translateX(-50%): così la larghezza "a misura di contenuto" era limitata alla
   metà destra dello schermo, e su iPhone 14 il riquadro restava largo ~165 px
   invece di ~350, con il testo a capo ogni due parole [2026-09-30e].
   --tip-min-bottom lo scrive Tutorial.js per tenerlo sopra le barre dei boss. */
.tutorial-tip {
  position: fixed;
  bottom: max(clamp(3.5rem, 8vh, 6rem), var(--tip-min-bottom, 0px));
  left: 0;
  right: 0;
  margin-inline: auto;
  width: fit-content;
  max-width: min(90vw, 520px);
  padding: 0.65rem 1.1rem;
  background: rgba(18, 22, 28, 0.92);
  border: 1px solid rgba(255, 106, 26, 0.55);
  border-radius: 8px;
  color: #d8d8d8;
  font-size: clamp(0.82rem, 2vw, 0.95rem);
  text-align: left;
  line-height: 1.45;
  pointer-events: none;
  z-index: 9000;
  opacity: 0;
  transition: opacity 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.tutorial-tip.hidden  { display: none; }
.tutorial-tip.visible { opacity: 1; display: flex; }
.tutorial-tip-icon      { flex: 0 0 auto; display: none; border-radius: 6px; }
.tutorial-tip-icon.show { display: block; }
.tutorial-tip-text      { display: inline-block; }

/* ============================================================
   MENU MINIMALE FTUE (primo avvio)
   ============================================================ */
#menu-screen.ftue-minimal .menu-content {
  grid-template-columns: 1fr;
  grid-template-areas: "center";
  max-width: 480px;
  margin: 0 auto;
}
#menu-screen.ftue-minimal .menu-center {
  justify-content: center;  /* centra verticalmente titolo + sottotitolo + azioni */
}
#menu-screen.ftue-minimal .menu-actions {
  margin-top: 0;  /* rimuove il push-to-bottom "margin-top:auto" */
}
#menu-screen.ftue-minimal .menu-rank,
#menu-screen.ftue-minimal .menu-right,
#menu-screen.ftue-minimal .shards-display,
#menu-screen.ftue-minimal .char-select-section,
#menu-screen.ftue-minimal #char-mechanic-panel,
#menu-screen.ftue-minimal #architect-module-panel,
#menu-screen.ftue-minimal #char-upgrade-panel,
#menu-screen.ftue-minimal #btn-info {
  display: none !important;
}

/* ============================================================
   PULSANTE PAUSA
   ============================================================ */
.pause-btn {
  position: fixed;
  top: max(60px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  width: 48px;
  height: 48px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
  z-index: 15;
  transition: transform 0.15s ease, background 0.15s ease;
}

.pause-btn:hover {
  background: rgba(20, 20, 30, 0.5);
}

.pause-btn:active {
  transform: scale(0.92);
}

/* ============================================================
   SCHERMATA PAUSA
   ============================================================ */
#pause-screen {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.25s ease;
}

/* Pausa e fine partita: colonna centrata larga al massimo 860px (92vw sotto) —
   ← tara qui. Prima la larghezza la dava il contenuto, e la build finiva in una
   colonna stretta dove andava a capo ogni due voci [2026-10-01]. */
.pause-content,
.gameover-content {
  width: min(860px, 92vw);
}

.pause-content {
  text-align: center;
  padding: 2rem;
  box-sizing: border-box;
}

.pause-title {
  font-size: clamp(2rem, 7vw, 3.5rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--heat-primary);
  text-shadow: 0 0 20px rgba(255, 106, 26, 0.55);
  margin-bottom: 2rem;
  flex: none;
}

/* Schermo basso (orizzontale): il titolo enorme lasciava poco spazio ai tre
   pulsanti, che devono restare sempre interi a schermo. */
@media (max-height: 500px) {
  .pause-title {
    font-size: clamp(1.3rem, 6vw, 2rem);
    margin-bottom: 0.5rem;
  }
}

/* La parte che può crescere (stato + build) scorre qui dentro; i tre pulsanti
   sono FUORI — vedi .pause-actions — e restano sempre interi a schermo. Stesso
   principio di .settings-scroll / .gameover-scroll. */
.pause-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  touch-action: pan-y;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 106, 26, 0.3) transparent;
}

.pause-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;   /* stesso comportamento di prima: pulsanti a larghezza propria, centrati */
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   DIALOG CONFERMA ABBANDONA RUN
   ============================================================ */
#confirm-menu-dialog,
#confirm-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: all;
  animation: fadeIn 0.15s ease;
}

.confirm-box {
  background: var(--metal-800);
  border: 1px solid rgba(255, 106, 26, 0.4);
  border-radius: 12px;
  padding: 2rem;
  max-width: 300px;
  width: 88%;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 106, 26, 0.12);
}

.confirm-title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--heat-primary);
  margin: 0 0 0.7rem;
}

.confirm-body {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.55;
  margin: 0 0 1.5rem;
}

.confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Pulsante azione distruttiva — rosso smorzato, meno invitante del btn-primary */
.btn-abandon {
  background: rgba(255, 42, 42, 0.10);
  color: var(--alarm);
  border: 1px solid rgba(255, 42, 42, 0.32);
  border-radius: 10px;
  padding: 0.65rem 1.2rem;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  pointer-events: all;
}

.btn-abandon:hover,
.btn-abandon:active {
  background: rgba(255, 42, 42, 0.22);
  border-color: rgba(255, 42, 42, 0.55);
}

/* ============================================================
   SCHERMATA GAME OVER
   ============================================================ */
#gameover-screen {
  background: rgba(0, 0, 0, 0.9);
  animation: fadeIn 0.5s ease;
}

.gameover-content {
  text-align: center;
  padding: 2rem;
  /* Colonna con una parte scorrevole in mezzo e le azioni fisse in fondo — stesso
     principio di .settings-content: senza, su schermo basso (orizzontale) o con
     la build piena, RIPROVA e "Torna al menu" finivano sotto il bordo visibile
     e si raggiungevano solo scorrendo tutto il pannello. */
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  max-height: 100svh;
  min-height: 0;
  box-sizing: border-box;
}

.gameover-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  flex: none;   /* fuori dalla parte scorrevole: mai schiacciato, mai tagliato */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.gameover-actions .btn-primary,
.gameover-actions .btn-secondary {
  flex: 1;
  min-width: 130px;
  max-width: 200px;
}

.gameover-title {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 900;
  color: #ff4444;
  text-shadow: 0 0 30px rgba(255, 60, 60, 0.7);
  margin-bottom: 2rem;
}

/* Schermo basso (soprattutto orizzontale): il titolo enorme da solo occupava
   metà dell'altezza disponibile. Sotto i 700px di altezza si riduce e si
   avvicina alle statistiche. */
@media (max-height: 700px) {
  .gameover-title {
    font-size: clamp(1.5rem, 6vw, 2.6rem);
    margin-bottom: 0.8rem;
  }
}

.stats-grid {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.stat-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.2rem 1.8rem;
  min-width: 130px;
}

/* Sotto il numero, non sopra [2026-10-01]: si legge prima il valore. */
.stat-label {
  display: block;
  font-size: 0.75rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.3rem;
}

/* Le tre statistiche della pausa: stessa grafica di quelle di fine partita, più
   vicine alla build che segue. Sempre tre in fila, anche dove le quattro di fine
   partita diventano una griglia 2×2 (vedi i blocchi @media). */
.stats-grid.stats-tre {
  margin-bottom: 1.2rem;
  grid-template-columns: repeat(3, 1fr);
}

.stat-value {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
}

/* ============================================================
   LA BUILD — schede armi + quadratini potenziamenti, pausa e fine partita
   ============================================================ */
/* Una regola sola per le due schermate: due copie divergerebbero alla prima
   modifica, e la build deve avere lo stesso aspetto in pausa e a fine run.
   [2026-10-01] Prima era una fila di pillole uguali, armi e carte mescolate:
   con 12-15 voci un muro dove non si capiva cosa contasse di più. */
.build-section {
  margin: 0 0 1.2rem;
  text-align: center;
}

.build-title {
  display: block;
  font-size: 0.75rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.build-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  text-align: left;
}

/* Titolino di sezione: ARMI / POTENZIAMENTI */
.build-sottotitolo {
  font-size: 0.68rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 0.35rem;
}

/* ── ARMI: una scheda per arma ── */
.build-armi {
  display: grid;
  /* ← tara qui: larghezza minima di una scheda arma (200px). min() perché in una
     colonna più stretta di 200px la scheda non sfori. */
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 0.5rem;
}

.build-arma {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem;
  background: rgba(255, 106, 26, 0.08);         /* --heat-primary tenue */
  border: 1px solid rgba(255, 106, 26, 0.38);
  border-radius: 10px;
  min-width: 0;
}

.build-arma-icona {
  font-size: 1.9rem;
  line-height: 1;
  flex: none;
}

.build-arma-testo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  flex: 1;
}

.build-arma-nome {
  font-size: 0.88rem;
  font-weight: 700;
  color: #f0f1f4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Una tacca per livello massimo, piene quelle raggiunte. */
.build-tacche {
  display: flex;
  gap: 3px;
}

.build-tacca {
  flex: 1;
  max-width: 18px;
  height: 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
}

.build-tacca.piena {
  background: var(--heat-primary);              /* ← tara qui: colore delle tacche */
  box-shadow: 0 0 4px rgba(255, 106, 26, 0.55);
}

/* ── POTENZIAMENTI: un quadratino per carta ── */
.build-carte {
  display: grid;
  /* ← tara qui: larghezza minima di un quadratino (88px). auto-fill, non
     auto-fit: con poche carte restano quadratini, non si allargano a riga intera. */
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0.45rem;
}

.build-carta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.3rem 0.45rem;
  background: var(--metal-700);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  text-align: center;
  min-width: 0;
}

.build-carta-icona {
  font-size: 1.6rem;
  line-height: 1;
}

/* Al massimo due righe: oltre si taglia invece di allungare la riga intera.
   [2026-10-02] Mai a capo dentro una parola: con overflow-wrap:anywhere
   "Rigenerazione" diventava "Rigenerazio/ne". Una parola che non entra fa
   rimpicciolire il carattere (UpgradeMenu, _adattaNomiBuild), non si spezza. */
.build-carta-nome {
  font-size: 0.66rem;
  line-height: 1.25;
  color: #cfd3da;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  max-width: 100%;
}

/* ×N in alto a destra */
.build-bollino {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 1.1rem;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--heat-primary);              /* ← tara qui: colore del bollino */
  color: #14181f;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.build-empty {
  align-self: center;
  font-size: 0.8rem;
  color: #888;
}

/* Il primato del tempo, sotto al valore nella sua casella */
.stat-record-new {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--heat-secondary);
  text-shadow: 0 0 10px rgba(255, 140, 34, 0.55);
  animation: levelUpPulse 0.5s ease;
}

.stat-record {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: #888;
}

/* ============================================================
   JOYSTICK TOUCH VIRTUALE
   ============================================================ */
/* [2026-09-25] Era un riquadro 50%×60% in basso a sinistra con pointer-events:all,
   posato SOPRA tutte le schermate. Misurato su 390×844: il tocco al centro di
   RIPROVA finiva qui, metà di GIOCA era coperta, e trascinare il dito proprio sul
   joystick disegnato non muoveva il personaggio (i tocchi non arrivavano al canvas,
   che è dove InputSystem li ascolta).
   Ora è solo grafica: copre tutto lo schermo così le coordinate che InputSystem
   scrive in left/top sono quelle della finestra, e lascia passare ogni tocco. */
#joystick-zone {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#joystick-base {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Posizione di default — verrà aggiornata da InputSystem.js al primo touch */
  bottom: 60px;
  left: 50px;
  pointer-events: none;
}

/* Con i boss, se le loro barre cadono sulla base a riposo (telefono in verticale):
   si vedono le barre, il joystick resta intuibile. Classe scritta da HUD.js. */
#joystick-base.dietro-ai-boss {
  opacity: 0.35;
}

#joystick-knob {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 106, 26, 0.7);
  border: 2px solid rgba(255, 140, 34, 0.8);
  box-shadow: 0 0 15px rgba(255, 106, 26, 0.5);
  transition: transform 0.05s linear;
  pointer-events: none;
}

/* ============================================================
   ANIMAZIONI
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* Glow pulsante sul titolo ZERITHAL — simula surriscaldamento */
@keyframes heatPulse {
  0%, 100% {
    text-shadow:
      0 0 20px rgba(255, 106, 26, 0.85),
      0 0 45px rgba(255, 106, 26, 0.45),
      0 0 80px rgba(255, 140, 34, 0.18);
  }
  50% {
    text-shadow:
      0 0 28px rgba(255, 106, 26, 1.0),
      0 0 65px rgba(255, 106, 26, 0.65),
      0 0 110px rgba(255, 140, 34, 0.32),
      0 0 160px rgba(255, 106, 26, 0.10);
  }
}

@keyframes levelUpPulse {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1);   opacity: 1; }
}

/* Flash giallo che copre lo schermo al level-up (aggiunto via JS) */
.levelup-flash {
  position: fixed;
  inset: 0;
  background: rgba(255, 215, 0, 0.15);
  pointer-events: none;
  animation: flashFade 0.4s ease forwards;
  z-index: 20;
}

@keyframes flashFade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */
@media (max-width: 480px) {
  .upgrade-card {
    width: 150px;
    padding: 1.1rem 0.8rem;
  }

  .upgrade-card .card-icon {
    font-size: 1.8rem;
  }

  .legend-name {
    flex: 0 0 78px;
  }

  .legend-stats {
    flex: 0 0 74px;
    font-size: 0.68rem;
  }

  .legend-desc {
    display: none;
  }

  #enemy-legend-list {
    max-height: 160px;
  }
}

/* ============================================================
   TRANSIZIONI SCHERMATE — fade in morbido
   ============================================================ */
.screen:not(.hidden) {
  animation: fadeIn 0.3s ease;
}

/* ============================================================
   MENU — pulsante impostazioni e selezione personaggio
   ============================================================ */
.menu-actions {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;   /* spinge i pulsanti in fondo alla colonna centrale */
  flex-shrink: 0;
  padding-top: clamp(0.3rem, 0.8vh, 0.6rem);
  /* [era clamp(0.3rem, 1vh, 0.6rem), cioè al massimo ~10px] Con quel valore
     "Impostazioni" e "Info" finivano appiccicati al bordo inferiore della finestra
     e risultavano tagliati. Ora restano staccati da terra su qualunque altezza. */
  padding-bottom: clamp(0.9rem, 2.2vh, 1.6rem);
}

/* [era background rgba(255,255,255,0.08), colore #ccc, bordo bianco al 18%]
   Su fondo scuro quei tre grigi si confondevano con lo sfondo: "Impostazioni" e
   "Info" risultavano quasi invisibili. Ora il fondo è metallo pieno e il bordo
   prende il calore della palette, così i pulsanti si staccano restando
   chiaramente secondari rispetto al GIOCA arancione pieno. */
.btn-secondary {
  background: var(--metal-700);
  color: #e6e8ec;
  border: 1px solid rgba(255, 106, 26, 0.45);   /* --heat-primary attenuato */
  border-radius: 10px;
  padding: 0.7rem 1.4rem;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  pointer-events: all;
}

.btn-secondary:hover,
.btn-secondary:active {
  background: #39404c;
  color: #fff;
  border-color: var(--heat-primary);
  box-shadow: 0 0 14px rgba(255, 106, 26, 0.35);
}

.char-select-section {
  margin: 0;
  flex-shrink: 0;
}

.section-label {
  color: rgba(255,255,255,0.55);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
}

.char-grid {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

.char-card {
  background: rgba(255,255,255,0.07);
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  min-width: 110px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.char-card:hover:not(.char-locked) {
  background: rgba(255, 106, 26, 0.08);
  border-color: rgba(255, 106, 26, 0.45);
  transform: translateY(-2px);
}

.char-card.char-selected {
  background: rgba(255, 106, 26, 0.12);
  border-color: var(--heat-primary);
  box-shadow: 0 0 12px rgba(255, 106, 26, 0.35);
}

.char-card.char-locked {
  opacity: 0.45;
  cursor: default;
}

/* ── PANNELLO MODULI ARCHITETTO ───────────────────────────────────────────── */
#architect-module-panel {
  margin-top: 0;
  flex-shrink: 0;
  animation: fadeIn 0.2s ease;
}

.module-label {
  font-size: 0.72rem;
  color: var(--heat-secondary);
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
}

/* ── PANNELLO MECCANICA PERSONAGGIO ──────────────────────────────────────── */
#char-mechanic-panel {
  margin-top: 0;
  flex-shrink: 0;
  animation: fadeIn 0.2s ease;
}

.mechanic-label {
  font-size: 0.72rem;
  color: rgba(180, 210, 235, 0.65);
  letter-spacing: 0.12em;
  margin-bottom: 0.45rem;
}

.mechanic-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0.8rem;
  background: rgba(180, 210, 235, 0.05);
  border: 1px solid rgba(180, 210, 235, 0.14);
  border-radius: 8px;
}

.mechanic-icon {
  font-size: 1.25rem;
  line-height: 1.2;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.mechanic-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mechanic-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(200, 225, 245, 0.88);
  letter-spacing: 0.02em;
}

.mechanic-desc {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.44);
  line-height: 1.45;
}

/* ── PANNELLO POTENZIAMENTI PERSONAGGIO (menu principale) ─────────────────── */
#char-upgrade-panel {
  margin-top: 0;
  /* Prende tutto lo spazio verticale rimanente — l'unica sezione che cresce */
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fadeIn 0.2s ease;
}

.upgrade-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.12em;
  margin-bottom: 0.4rem;
  flex-shrink: 0;
}

/* La griglia meta scorre internamente — scrollbar visibile segnala che c'è altro */
#upgrade-grid {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  touch-action: pan-y;
  padding-bottom: 36px;   /* respira sopra il gradient-fade del wrapper */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 106, 26, 0.45) rgba(255, 255, 255, 0.05);
}

#upgrade-grid::-webkit-scrollbar        { width: 4px; }
#upgrade-grid::-webkit-scrollbar-track  { background: rgba(255,255,255,0.04); border-radius: 2px; }
#upgrade-grid::-webkit-scrollbar-thumb  { background: rgba(255,106,26,0.45);  border-radius: 2px; }

.module-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.module-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.8rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
}

.module-card:hover {
  background: rgba(255, 106, 26, 0.1);
  border-color: rgba(255, 106, 26, 0.3);
}

.module-card.module-selected {
  background: rgba(255, 106, 26, 0.15);
  border-color: rgba(255, 106, 26, 0.6);
  cursor: pointer;
}

.module-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
}

.module-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.module-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #eee;
  letter-spacing: 0.02em;
}

.module-desc {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.48);
}

.char-icon {
  font-size: 2rem;
  line-height: 1;
}

.char-icon-mech {
  width: 64px;
  height: 64px;
  display: block;
  margin: 0 auto;
}

.char-icon-wrap {
  position: relative;
  display: block;
  width: 64px;
  margin: 0 auto;
}

.char-icon-mech--locked {
  filter: brightness(0.15) saturate(0);
}

.char-lock-badge {
  position: absolute;
  bottom: 2px;
  right: 0px;
  font-size: 0.7rem;
  line-height: 1;
  pointer-events: none;
}

.char-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #eee;
  letter-spacing: 0.03em;
}

.char-stats {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.3;
}

.char-upgrades {
  font-size: 0.65rem;
  color: var(--heat-secondary);
  border-top: 1px solid rgba(255, 106, 26, 0.22);
  padding-top: 0.25rem;
  margin-top: 0.05rem;
  width: 100%;
  text-align: center;
  letter-spacing: 0.04em;
}

/* ============================================================
   GAME OVER — shard e meta-upgrade
   ============================================================ */
/* La parte che scorre: titolo, statistiche, build, shard. Le azioni (RIPROVA /
   Torna al menu) sono FUORI da questo contenitore — vedi .gameover-actions — e
   restano sempre intere a schermo. */
.gameover-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 106, 26, 0.3) transparent;
}

.shards-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.8rem;
  background: rgba(255, 106, 26, 0.08);
  border-radius: 8px;
  margin: 0.6rem 0;
  gap: 0.5rem;
}

.shards-earned {
  font-size: 0.82rem;
  color: #ffdd88;
}

.shards-total {
  font-size: 0.88rem;
  color: #ddd;
}

.shards-total strong {
  color: #ffdd55;
}

.meta-section {
  margin: 0.8rem 0 0.4rem;
  text-align: left;
}

.meta-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.meta-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  transition: background 0.2s;
}

.meta-card:hover {
  background: rgba(255,255,255,0.10);
}

.meta-card.meta-maxed {
  opacity: 0.55;
}

.meta-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.meta-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.meta-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #eee;
}

.meta-desc {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.45);
}

.meta-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.meta-level {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.5);
}

.meta-buy {
  background: linear-gradient(135deg, var(--heat-primary), var(--heat-secondary));
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.28rem 0.55rem;
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.1s;
}

.meta-buy:hover:not(.meta-disabled) {
  opacity: 0.88;
  transform: scale(1.04);
}

.meta-buy.meta-disabled {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.35);
  cursor: default;
}

.meta-badge-max {
  font-size: 0.62rem;
  background: rgba(255,200,0,0.18);
  color: #ffdd44;
  border: 1px solid rgba(255,200,0,0.3);
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
  letter-spacing: 0.06em;
}

/* ============================================================
   SCHERMATA IMPOSTAZIONI
   ============================================================ */
#settings-screen {
  background: rgba(0, 0, 0, 0.88);  /* sfondo opaco istantaneo — copre menu e scanlines */
  backdrop-filter: blur(6px);        /* coerente con pause-screen e upgrade-screen */
  animation: none;                   /* l'animazione sta sul contenuto, non sull'overlay */
  z-index: 2;                        /* sopra #menu-screen::after (z-index:1) che altrimenti filtra */
}

.settings-content {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 1.6rem 1.8rem;
  /* [era 420px] Troppo stretto per le righe che deve contenere: i tre pulsanti
     Qualità e le griglie dev andavano a capo dove capitava. */
  max-width: 520px;
  width: min(92%, 520px);
  text-align: center;
  animation: fadeIn 0.25s ease;      /* fade solo sul box contenuto, lo sfondo è già opaco */
  /* Colonna con una parte scorrevole in mezzo: titolo e Indietro restano fermi,
     il contenuto scorre. Senza max-height il pannello crescerebbe oltre la
     finestra e finirebbe tagliato — lo stesso errore che ha tenuto nascosti per
     giorni i pulsanti del menu. */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
  max-height: calc(100svh - 2rem);
  min-height: 0;
}

.settings-scroll {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.3rem;   /* stacca il contenuto dalla barra di scorrimento */
}

.settings-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.05em;
  margin-bottom: 1.1rem;
  flex: none;
}

/* ── SEZIONI ────────────────────────────────────────────────────────────────
   Volumi e Qualità erano quattro righe affiancate senza titoli: sembravano
   quattro impostazioni dello stesso tipo, e non lo sono. */
.settings-group {
  text-align: left;
  margin-bottom: 1.2rem;
}

.settings-group + .settings-group {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1rem;
}

/* Stessa forma di .dev-title ma senza il colore da sviluppatore. */
.settings-group-title {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin: 0 0 0.7rem;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  margin-bottom: 0.85rem;
}

/* ── LETTURA DEL VALORE ─────────────────────────────────────────────────────
   Senza numero né traccia colorata il livello si poteva solo indovinare dalla
   posizione della pallina: col Volume Generale a zero il gioco era muto e non
   c'era modo di accorgersene. */
.settings-readout {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.4rem;
  flex: none;
}

.settings-value {
  /* Larghezza fissa: passando da 5% a 100% la riga non deve ballare. */
  min-width: 2.9rem;
  text-align: right;
  font-family: 'Courier New', 'Lucida Console', monospace;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.82);
  font-variant-numeric: tabular-nums;
}

/* Avviso di volume azzerato: acceso da JS con .is-muted sulla riga. */
.settings-mute {
  display: none;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--alarm);
}

.settings-row.is-muted .settings-mute { display: inline; }
.settings-row.is-muted .settings-value { color: var(--alarm); }

/* Qualità: tre scelte mutuamente esclusive, quella attiva in arancio */
.quality-buttons {
  display: flex;
  gap: 0.4rem;
  flex: none;
}

.btn-quality {
  padding: 0.4rem 0.7rem;
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: #9aa3b0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--metal-700);
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.btn-quality:hover {
  color: #d5dae2;
  border-color: #3d434e;
}

.btn-quality-on {
  color: var(--heat-primary);
  border-color: var(--heat-primary);
  background: rgba(255, 106, 26, 0.10);
}

/* Schermo a densità 1: le tre modalità danno la stessa risoluzione — vedi
   SettingsScreen._aggiornaQualita(). I pulsanti restano visibili ma inerti,
   invece di fingere una scelta che non ha alcun effetto. */
.btn-quality-na {
  opacity: 0.45;
  cursor: default;
}

.btn-quality-na:hover {
  color: #9aa3b0;
  border-color: var(--metal-700);
}

/* Sta sotto i pulsanti Qualità e allineato a loro, dentro la sezione Grafica:
   prima galleggiava a metà schermata, staccato dalla riga a cui si riferisce. */
.settings-hint {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #7c8595;
  text-align: right;
}

.settings-label {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  text-align: left;
  min-width: 130px;
  flex: none;
}

/* ── CURSORI ────────────────────────────────────────────────────────────────
   La traccia è riempita fino alla pallina con l'accento caldo e grigia dopo,
   così il livello si legge a colpo d'occhio senza leggere il numero.
   La percentuale arriva da JS nella variabile --riempimento: le pseudo-classi
   di traccia ereditano le proprietà personalizzate dall'input.
   Due implementazioni perché i due motori non condividono niente qui: WebKit
   colora la traccia con un gradiente, Firefox ha ::-moz-range-progress nativo. */
.settings-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 18px;          /* spazio per la pallina: la traccia è alta 6px */
  background: transparent;
  outline: none;
  cursor: pointer;
}

.settings-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    var(--heat-primary) 0%,
    var(--heat-primary) var(--riempimento, 0%),
    rgba(255,255,255,0.15) var(--riempimento, 0%),
    rgba(255,255,255,0.15) 100%
  );
}

.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--heat-primary);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(255, 106, 26, 0.6);
  margin-top: -6px;      /* centra la pallina sulla traccia di 6px */
}

.settings-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.15);
}

.settings-slider::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--heat-primary);
}

.settings-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--heat-primary);
  cursor: pointer;
  border: none;
}

/* A zero la traccia resta tutta grigia: l'unico segnale è l'avviso "muto". */
.settings-row.is-muted .settings-slider::-moz-range-progress { background: transparent; }

/* Fuori dalla parte scorrevole: resta in fondo e sempre raggiungibile, anche
   quando il contenuto sopra è più alto della finestra. */
#btn-settings-back {
  flex: none;
  margin-top: 1.1rem;
  align-self: center;
}

/* ── RIGA ⚙ ℹ BANDIERA — top-right di #menu-screen ─────────────────────── */
/* Il nome .menu-login-area è storico: c'era anche il pulsante "Accedi", tolto
   il 2026-09-30. Non rinominato: toccherebbe troppe regole per nessun beneficio. */
.menu-login-area {
  position: absolute;
  top:   clamp(0.6rem, 2vh,  1.2rem);
  right: clamp(0.7rem, 2vw,  1.4rem);
  z-index: 3;               /* sopra scanlines (z:1) e menu-content (z:2) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  pointer-events: all;
}

/* ── La riga: ⚙, ℹ, selettore lingua ────────────────────────────────────── */
.login-top-row {
  display: flex;
  align-items: center;
  gap: 0.38rem;
}

/* ── SELETTORE LINGUA + PULSANTI SOLA ICONA ────────────────────────────────
   Impostazioni e Info stanno sulla STESSA riga della bandiera.
   Due collocazioni precedenti non funzionavano:
     · in fondo alla colonna centrale, sotto il GIOCA: quella colonna è larga
       ~360px e il solo GIOCA ne occupa ~240, quindi andavano a capo — e siccome
       il menu è alto esattamente 100vh la riga in più finiva TAGLIATA sotto il
       bordo della finestra. Non erano poco leggibili: erano fuori schermo;
     · in una riga propria dentro .menu-login-area, che è position:absolute:
       crescendo in altezza si sovrapponeva al pannello della colonna destra.
   Su una riga sola l'area non cresce in altezza, quindi non può coprire nulla.
   La regola è condivisa apposta: i tre elementi devono leggersi come una
   fila unica, non come stili accostati. */
.lang-selector {
  position: relative;
}

.btn-lang,
.btn-icon-util {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 2rem;      /* stessa impronta anche se il glifo è più stretto */
  height: 1.8rem;       /* altezza FISSA: emoji e glifi di testo hanno metriche
                           diverse, e senza questa i pulsanti risulterebbero di
                           altezze leggermente diverse sulla stessa riga */
  padding: 0.28rem 0.55rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;   /* emoji bandiera leggibile */
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.btn-lang:hover,
.btn-lang:active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Solo icona: l'etichetta sta in title e aria-label, tradotti da I18N. */
.btn-icon-util {
  font-family: inherit;
  pointer-events: all;
}

/* Sono azioni, non stato: al passaggio prendono l'accento caldo del gioco. */
.btn-icon-util:hover,
.btn-icon-util:active {
  background: rgba(255, 106, 26, 0.16);
  border-color: var(--heat-primary);
  color: #fff;
}

/* Dropdown: appare sotto il btn-lang */
.lang-dropdown {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  background: var(--metal-800);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 130px;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  animation: fadeIn 0.15s ease;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.1s, color 0.1s;
  font-family: inherit;
  white-space: nowrap;
}

.lang-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.lang-option.lang-active {
  background: rgba(255, 106, 26, 0.12);
  color: rgba(255, 255, 255, 0.88);
}

/* Mobile stretto (≤400px): nel dropdown della lingua solo le bandiere */
@media (max-width: 400px) {
  .lang-option span { display: none; }       /* solo bandiera nel dropdown */
  .lang-dropdown    { min-width: 56px; }
}

/* Mobile medio (≤720px): pulsante GIOCA ridotto ma ancora prominente */
@media (max-width: 720px) {
  #btn-start {
    padding: 0.95rem 2.6rem;
    font-size: 1.3rem;
  }
}

/* ── PANNELLO INFO (modale) ───────────────────────────────────────────────── */
#info-panel {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: all;
  animation: fadeIn 0.18s ease;
}

.info-box {
  background: var(--metal-800);
  border: 1px solid rgba(255, 106, 26, 0.22);
  border-radius: 14px;
  padding: 1.2rem 1.4rem 1.4rem;
  max-width: 480px;
  width: 92%;
  max-height: 85svh;
  max-height: 85vh;  /* fallback */
  overflow-y: auto;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 106, 26, 0.25) transparent;
  text-align: left;
}

.info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.info-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--heat-primary);
  font-family: 'Courier New', 'Lucida Console', monospace;
}

.btn-info-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.btn-info-close:hover,
.btn-info-close:active {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Nella info-box: controls-info e enemy-legend mantengono i loro stili originali */
.info-box .controls-info {
  margin-top: 0;
}

.info-box .enemy-legend {
  margin-top: 1rem;
}

/* ── FEEDBACK SBLOCCO PERSONAGGIO ────────────────────────────────────────── */
.menu-feedback {
  min-height: 1.5em;
  font-size: 0.72rem;
  font-family: 'Courier New', 'Lucida Console', monospace;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 0.25rem 0.5rem;
  margin-top: 0.4rem;
  border-radius: 6px;
  transition: color 0.2s;
}

.menu-feedback[data-type="error"] {
  color: rgba(255, 100, 100, 0.92);
}

.menu-feedback[data-type="success"] {
  color: rgba(100, 220, 130, 0.92);
}

.menu-feedback[data-type="warn"] {
  color: rgba(255, 200, 80, 0.92);
}

/* Le card bloccate mostrano pointer per segnalare che si può interagire */
.char-card.char-locked {
  cursor: pointer;
}

/* ── PANNELLO DEV TOOLS (visibile solo con ZRT.DEV_MODE) ──────────────────── */
.dev-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 106, 26, 0.25);
  margin: 1rem 0 0.8rem;
}

.dev-title {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: rgba(255, 106, 26, 0.6);
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

/* ── DEV TOOLS: BLOCCHI E GRIGLIE ───────────────────────────────────────────
   Prima era tutto flex-wrap: l'etichetta "Parti dal minuto:" stava sulla stessa
   riga dei pulsanti e ne veniva coperta, il "24" finiva orfano su una riga
   propria e "Build automatico" su una terza. Ora l'etichetta ha una riga sua e
   i pulsanti stanno in griglie a numero fisso di colonne: 6 minuti in 6 colonne
   e 4 azioni in 2×2 non lasciano mai orfani. */
.dev-block {
  margin-top: 0.7rem;
  text-align: left;
}

.dev-row-label {
  display: block;          /* riga propria: non può più essere coperta */
  font-size: 0.72rem;
  opacity: 0.75;
  margin-bottom: 0.35rem;
}

.dev-grid {
  display: grid;
  gap: 0.4rem;
}

.dev-grid-minuti  { grid-template-columns: repeat(6, 1fr); }
.dev-grid-azioni  { grid-template-columns: repeat(2, 1fr); }

/* Reset save è distruttivo: staccato dalle altre azioni e largo tutto,
   così non lo si preme per sbaglio scorrendo la griglia. */
.dev-grid-pericolo {
  grid-template-columns: 1fr;
  margin-top: 0.5rem;
}

.btn-dev {
  padding: 0.35rem 0.5rem;
  font-size: 0.72rem;
  font-family: inherit;
  background: rgba(255, 106, 26, 0.08);
  border: 1px solid rgba(255, 106, 26, 0.30);
  border-radius: 5px;
  color: rgba(255, 200, 150, 0.85);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s, border-color 0.12s;
}

.btn-dev:hover {
  background: rgba(255, 106, 26, 0.18);
  border-color: rgba(255, 106, 26, 0.55);
}

.btn-dev-danger {
  border-color: rgba(255, 60, 60, 0.40);
  color: rgba(255, 150, 150, 0.85);
}

.btn-dev-danger:hover {
  background: rgba(255, 60, 60, 0.15);
  border-color: rgba(255, 60, 60, 0.65);
}

.dev-feedback {
  font-size: 0.7rem;
  color: rgba(100, 210, 255, 0.75);
  min-height: 1em;
  margin-top: 0.6rem;
  text-align: left;
}

/* PAUSA — layout flessibile: titolo e pulsanti fissi, solo .pause-scroll scorre.
   ⚠ PRIMA tutto il pannello scorreva insieme (overflow-y qui sopra): in orizzontale
   basso, con la build piena, i tre pulsanti finivano sotto il bordo e si
   raggiungevano solo scorrendo tutto il pannello fino in fondo. */
.pause-content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
  max-height: 100vh;
  max-height: 100svh;
  min-height: 0;
}

/* ============================================================
   MOBILE — responsive per i nuovi elementi
   ============================================================ */
@media (max-width: 500px) {
  .char-card {
    min-width: 85px;
    padding: 0.5rem 0.6rem;
  }
  .char-icon {
    font-size: 1.6rem;
  }
  .meta-card {
    padding: 0.4rem 0.5rem;
    gap: 0.4rem;
  }
  .settings-content {
    padding: 1.2rem 1rem;
  }
  /* Su schermo stretto l'etichetta prende una riga sua e cursore + percentuale
     restano insieme sotto: separarli renderebbe il numero illeggibile come
     lettura del cursore. */
  .settings-row {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
  }
  .settings-label {
    min-width: unset;
    flex: 1 0 100%;
  }
  .settings-slider {
    flex: 1 1 auto;
  }
  .quality-buttons {
    flex: 1 0 100%;
    justify-content: space-between;
  }
  .btn-quality {
    flex: 1 1 0;
    padding: 0.4rem 0.3rem;
  }
  /* Sei colonne di minuti non ci stanno più: due file da tre. */
  .dev-grid-minuti { grid-template-columns: repeat(3, 1fr); }
  .dev-grid-azioni { grid-template-columns: 1fr; }
}

/* Telefoni stretti (iPhone SE 320, iPhone 14 390): con 5 personaggi le card
   andavano su 3 righe (2+2+1). Icona del mech e padding più compatti perché
   ne stiano 3 per riga — 5 card diventano 3+2, mai più di 2 righe. */
@media (max-width: 420px) {
  .char-grid {
    gap: 0.4rem;
  }
  .char-card {
    min-width: 78px;
    padding: 0.45rem 0.4rem;
    gap: 0.15rem;
  }
  .char-icon-mech,
  .char-icon-wrap {
    width: 44px;
    height: 44px;
  }
  .char-name {
    font-size: 0.68rem;
  }
  .char-stats {
    font-size: 0.58rem;
  }
}

/* ── MOBILE: monocolonna sotto 720px di larghezza ───────────────────────────
   Ordine: centro (titolo + chars + azioni) → potenziamenti → classifica (compatta).
   Il blocco centrale appare per primo, perfettamente centrato. */
@media (max-width: 720px) {
  /* ⚠ GRID ABBANDONATA APPOSTA, MISURATO. Con "grid-template-rows: auto 1fr
     auto" e l'altezza del contenitore forzata a 100vh (serve per il layout
     desktop), la riga centrale ('right', il pannello moduli/potenziamenti)
     collassava a ALTEZZA ZERO invece di occupare lo spazio residuo: i suoi
     figli restavano nel DOM ma, dentro un antenato overflow:hidden alto 0px,
     non venivano MAI dipinti — cliccarci sopra colpiva invece GIOCA (la barra
     sticky), che essendo l'ultimo elemento dipinto in quel punto vinceva al
     test elementFromPoint. Con un contenitore che scorre invece di uno che
     forza tutto in una schermata, il trucco "1fr riempie lo spazio avanzato"
     non serve più: basta impilare in ordine e lasciare che l'altezza sia
     quella del contenuto vero. */
  .menu-content {
    display: flex;
    flex-direction: column;
    width: min(100%, 520px);
    gap: clamp(0.2rem, 0.7vh, 0.45rem);
    padding: clamp(0.5rem, 1.5vh, 1rem) clamp(0.8rem, 3vw, 1.2rem);
    /* [2026-09-27] MISURATO ancora una volta con env(safe-area-inset-bottom):
       su un telefono col cursore home (iPhone) la barra dei gesti occupa quella
       fascia, e senza aggiungerla l'ultimo contenuto vero rischiava comunque
       di finire sotto — sommata perché la barra di GIOCA resta il vincolo
       principale (85-90px). */
    padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
    /* [2026-09-27] La banda ⚙/ℹ/🇮🇹 (.menu-login-area) ora ha uno sfondo
       opaco a tutta larghezza (vedi sotto) e scorre CON il contenuto, non ci
       sta più sopra: qui basta un margine iniziale perché il titolo non parta
       già coperto. Misurato: la riga è alta 40px col mouse, 55px col dito
       (pointer:coarse) — vedi il blocco @media(pointer:coarse) più sotto per
       il caso touch. */
    padding-top: 3.2rem;
    box-sizing: border-box;
    /* ⚠ MISURATO: con l'altezza forzata a 100vh/100svh (regola di base, per il
       layout desktop) e cinque personaggi + pannello potenziamenti, il
       contenuto era più alto della finestra su iPhone SE/14: quello che restava
       sotto il bordo — GIOCA compreso — non era solo poco leggibile, era
       IRRAGGIUNGIBILE (html/body hanno overflow:hidden). Ora il contenitore
       scorre col dito, e GIOCA resta comunque visibile senza scorrere (vedi
       .menu-actions qui sotto). */
    overflow-y: auto;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 106, 26, 0.3) transparent;
  }

  /* Ordine visivo: centro (titolo+chars+GIOCA) → potenziamenti → classifica.
     Il DOM li elenca come rank, center, right (per il desktop, dove la griglia
     li affianca senza bisogno di riordinarli); qui è un flusso verticale
     unico e serve dirlo esplicitamente. */
  .menu-center { order: 1; }
  .menu-right  { order: 2; }
  .menu-rank   { order: 3; }

  /* Ripristina font titolo a tutto schermo su mobile */
  .game-title {
    font-size: clamp(1.8rem, 13vw, 4.5rem);
  }

  .menu-center {
    flex: none;   /* altezza naturale: niente più "riempi lo spazio avanzato" */
  }

  .menu-right {
    text-align: center;
    flex: none;       /* stesso motivo: altezza naturale, non più una riga 1fr */
    overflow: visible; /* la regola desktop lo azzera per il proprio scroll interno */
  }

  .menu-rank { flex: none; }

  /* Il pannello potenziamenti aveva il suo scroll interno perché doveva stare
     in una porzione di riga fissa (desktop). In colonna singola scorre tutta
     la pagina: un secondo scroll annidato dentro il primo è la stessa
     fragilità del "riempi lo spazio avanzato" — meglio un'unica lista in
     altezza naturale, con l'intera pagina che scorre per raggiungerla. */
  .menu-right #char-upgrade-panel {
    flex: none;
    overflow: visible;
  }
  /* ⚠ MISURATO: dimenticare questo era bastato a rompere tutto. .upgrade-scroll-wrap
     è un wrapper INTERMEDIO fra #char-upgrade-panel e #upgrade-grid, con lo stesso
     flex:1 1 0 + min-height:0 pensato per il desktop: in un antenato ad altezza
     naturale (flex:none) senza spazio extra da distribuire, un flex-basis:0 collassa
     a un'altezza quasi nulla — mentre il suo contenuto (i 5 potenziamenti) continuava
     a renderizzarsi alla sua altezza vera, TRABOCCANDO fuori dal wrapper collassato.
     Il genitore misurava quindi un'altezza sbagliata (19px invece di ~300), e
     .menu-rank (il fratello successivo) partiva da lì — finendo scritto SOPRA
     l'ultima parte dei potenziamenti invece che sotto. */
  .upgrade-scroll-wrap {
    flex: none;
  }
  #upgrade-grid {
    flex: none;
    max-height: none;
    overflow-y: visible;
    padding-bottom: 0;
  }
  .upgrade-scroll-wrap::after {
    display: none;   /* segnalava lo scroll INTERNO che qui non c'è più */
  }

  /* Classifica: su mobile nasconde le righe blurrate, mostra solo il footer.
     ⚠ MISURATO [2026-09-27]: .rank-panel aveva ancora flex:1 1 0 (pensato per
     riempire l'altezza della colonna nella griglia desktop). Dentro .menu-rank,
     che qui è flex:none (altezza naturale), un flex-basis:0 senza spazio da
     distribuire collassa — misurato 15px di altezza contro i 31 del suo stesso
     figlio .rank-footer, che quindi TRABOCCAVA fuori, tagliato dall'overflow:
     hidden del pannello. Il messaggio c'era, se ne vedeva un filo: sembrava un
     riquadro vuoto. Stesso difetto già trovato e risolto per
     .upgrade-scroll-wrap nella sessione precedente — la cura è la stessa. */
  .rank-panel {
    flex: none;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.05);
    padding: 0.4rem 0.5rem;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }
  .rank-rows      { display: none; }
  .rank-label     { margin-bottom: 0; }
  .rank-footer    { margin-top: 0; align-items: flex-start; }

  /* GIOCA sempre visibile SENZA scorrere: fissato in fondo alla FINESTRA.
     ⚠ QUI SERVIVA position:fixed, non sticky — MISURATO. .menu-actions è
     annidato due livelli dentro .menu-content (che scorre): .menu-content →
     .menu-center → .menu-actions. Su schermi molto bassi in larghezza intera
     (es. 390×340) lo sticky, nidificato così dentro un flex-column il cui
     contenitore non ha un'altezza definita, si "incollava" a metà schermo
     invece che in fondo — sovrapponendosi alle card dei personaggi invece di
     restare sotto di loro. Riprodotto identico su due larghezze diverse (750 e
     390) con la stessa altezza (340): il fattore comune era l'altezza bassa,
     non la larghezza. position:fixed è ancorato alla FINESTRA, non al flusso
     annidato, e non soffre di questo problema per costruzione. */
  .menu-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: linear-gradient(to top, var(--metal-900) 60%, transparent);
    margin-top: 0;
    padding-top: 1rem;
  }

  /* [2026-09-27] SEGNALATO IN PARTITA: la barra ⚙/ℹ/🇮🇹 resta fissa (è
     position:absolute rispetto a #menu-screen, che non scorre — solo
     .menu-content, un suo fratello, lo fa) mentre il contenuto le scorre
     SOTTO, e non aveva sfondo: su iPhone SE una carta modulo ci finiva
     proprio dietro, illeggibile e — coi pulsanti della barra sopra — anche
     non toccabile. Preferita la soluzione "scorre col contenuto", ma
     .menu-login-area è un fratello di .menu-content nel DOM, non un suo
     figlio: spostarlo dentro avrebbe richiesto che l'assoluto per desktop
     puntasse a un contenitore più stretto di 1150px, spostando la riga
     rispetto a com'è oggi. Si resta quindi sul ripiego indicato: una fascia
     opaca a tutta larghezza (così il contenuto sparisce dietro invece di
     leggersi in trasparenza) più il padding-top su .menu-content qui sopra
     (così in cima non parte già coperto). */
  .menu-login-area {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    align-items: flex-end;   /* invariato: icone a destra, ora dentro una fascia intera */
    background: var(--metal-800);
    padding: max(0.6rem, env(safe-area-inset-top, 0px)) clamp(0.7rem, 3vw, 1.2rem) 0.4rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  }

  /* Il gradient-fade è più importante su mobile (scroll è l'unica opzione) */
  .upgrade-scroll-wrap::after {
    height: 48px;
    background: linear-gradient(to bottom, transparent, rgba(10, 12, 16, 0.97));
  }
}

/* Schermi bassi con tre colonne (landscape tablet/laptop basso):
   compatta il titolo e le card per far stare tutto senza scroll di pagina. */
@media (max-height: 620px) and (min-width: 721px) {
  .menu-content {
    padding: 0.5rem clamp(0.6rem, 1.5vw, 1.2rem);
    column-gap: 0.8rem;
  }
  .menu-center {
    gap: 0.2rem;
  }
  .menu-right {
    gap: 0.15rem;
  }
  .game-title {
    font-size: clamp(1.3rem, 3.5vw, 2.1rem);
  }
  .game-subtitle {
    font-size: 0.55rem;
    padding: 0.18rem 0;
  }
}

/* Schermi bassi monocolonna (landscape mobile piccolo):
   riduce le card per garantire che tutto entri senza scroll di pagina. */
@media (max-height: 620px) and (max-width: 720px) {
  .game-title {
    font-size: clamp(1.4rem, 8vw, 2.6rem);
  }
  .game-subtitle {
    font-size: 0.6rem;
    padding: 0.25rem 0;
  }
  .char-card {
    min-width: 80px;
    padding: 0.4rem 0.5rem;
  }
  .char-icon-mech {
    width: 48px;
    height: 48px;
  }
  .char-icon-wrap {
    width: 48px;
  }
  .char-name {
    font-size: 0.68rem;
  }
  .char-stats {
    font-size: 0.58rem;
  }
  .meta-card {
    padding: 0.35rem 0.5rem;
    gap: 0.35rem;
  }
  .meta-icon {
    font-size: 1.1rem;
  }
  .meta-name {
    font-size: 0.74rem;
  }
  .meta-desc {
    font-size: 0.62rem;
  }
  .btn-primary {
    padding: 0.65rem 2rem;
    font-size: 0.95rem;
  }
  .btn-secondary {
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
  }
  .mechanic-row {
    padding: 0.4rem 0.65rem;
  }
  .mechanic-desc {
    font-size: 0.6rem;
  }
}

/* ── SCHERMI BASSI (≤500px di altezza), QUALUNQUE LARGHEZZA ─────────────────
   Un telefono in orizzontale (es. 750×340) è più largo di 720px, quindi cade
   nel bucket "tablet" qui sopra (tre colonne, solo font più piccoli) — ma tre
   colonne affiancate in 340px di altezza non ci stanno. Sotto i 500px di
   altezza si usa SEMPRE lo schema a colonna singola scorrevole del mobile
   verticale, indipendentemente dalla larghezza: stessa regola, non una copia,
   applicata qui perché la condizione di innesco è diversa (altezza, non
   larghezza) — vedi @media (max-width: 720px) per i commenti sul perché serve
   lo scroll e lo sticky. */
@media (max-height: 500px) {
  /* Stessa scelta e stesso motivo del bucket per larghezza: niente griglia con
     riga 1fr, che a contenitore scrollabile collassava a zero — vedi il
     commento lungo su @media (max-width: 720px) .menu-content. */
  .menu-content {
    display: flex;
    flex-direction: column;
    width: min(100%, 520px);
    gap: clamp(0.15rem, 1vh, 0.3rem);
    padding: 0.4rem clamp(0.8rem, 3vw, 1.2rem);
    /* Stesso motivo del bucket per larghezza qui sotto: la barra sticky di
       GIOCA resta incollata al bordo, quindi l'ultimo contenuto vero deve poter
       scorrere oltre la sua altezza (~85px misurati), più il margine del
       cursore home su iPhone. */
    padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
    /* Stessa banda di sicurezza del bucket per larghezza (vedi lì): ⚙/ℹ/🇮🇹
       ora scorre col contenuto invece di stargli fisso sopra. */
    padding-top: 2.8rem;
    box-sizing: border-box;
    overflow-y: auto;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 106, 26, 0.3) transparent;
  }
  .menu-center { order: 1; flex: none; }
  .menu-right {
    order: 2;
    flex: none;
    overflow: visible;
    padding-top: 0;   /* qui in cima ci sta .menu-center, non .menu-right */
    text-align: center;
  }
  .menu-rank { order: 3; flex: none; }
  .menu-right #char-upgrade-panel { flex: none; overflow: visible; }
  /* Vedi il commento lungo sull'altro bucket (max-width: 720px): senza questo,
     il wrapper intermedio collassava e .menu-rank partiva sopra la coda dei
     potenziamenti invece che sotto. */
  .upgrade-scroll-wrap { flex: none; }
  #upgrade-grid { flex: none; max-height: none; overflow-y: visible; padding-bottom: 0; }
  .upgrade-scroll-wrap::after { display: none; }
  /* position:fixed, non sticky — stesso motivo documentato nel bucket per
     larghezza qui sopra (misurato: lo sticky nidificato si sovrapponeva alle
     card su schermi bassi, indipendentemente dalla larghezza). */
  .menu-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: linear-gradient(to top, var(--metal-900) 60%, transparent);
    margin-top: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  /* Stesso ripiego del bucket per larghezza: fascia opaca a tutta larghezza,
     invece di sticky/fixed nel flusso — vedi il commento lungo lì. */
  .menu-login-area {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    align-items: flex-end;
    background: var(--metal-800);
    padding: max(0.5rem, env(safe-area-inset-top, 0px)) clamp(0.7rem, 3vw, 1.2rem) 0.3rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  }
  .rank-rows      { display: none; }
  .rank-panel     { flex: none; }

  /* Livello-su in orizzontale: le tre carte devono stare intere in poca
     altezza. Titolo/sottotitolo/azioni compatti, descrizione al massimo 3
     righe — oltre si taglia invece di spingere la card oltre lo schermo. */
  .upgrade-content {
    padding: 0.5rem 0.75rem;
  }
  .upgrade-title {
    font-size: clamp(1.1rem, 5vh, 1.6rem);
    margin-bottom: 0.1rem;
  }
  .upgrade-subtitle {
    margin: 0 0 0.4rem;
    font-size: 0.7rem;
  }
  .upgrade-actions-bar {
    margin: 0 0 0.5rem;
  }
  .upgrade-cards {
    flex-wrap: nowrap;
    gap: 0.4rem;
    align-items: stretch;
  }
  .upgrade-card {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 0.5rem 0.5rem;
  }
  .upgrade-card .card-icon {
    font-size: 1.3rem;
    margin-bottom: 0.15rem;
  }
  .upgrade-card .card-name {
    font-size: 0.68rem;
    margin-bottom: 0.15rem;
  }
  .upgrade-card .card-value {
    font-size: 0.72rem;
    margin-bottom: 0.15rem;
  }
  .upgrade-card .card-desc {
    font-size: 0.58rem;
    line-height: 1.25;
    /* Oltre 3 righe si taglia con "…": la card resta intera a schermo, il
       testo in eccesso no. Proprietà WebKit ma degrada bene: senza supporto
       il browser mostra semplicemente la descrizione intera (overflow:hidden
       la taglia comunque in verticale se la card è vincolata in altezza). */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Stessa griglia 2×2 del bucket per larghezza: qui serve perché un telefono
     in orizzontale (es. 750×340) è più largo di 520px ma altrettanto stretto
     di spazio VERTICALE — il titolo grande e quattro statistiche in fila
     lasciavano poco margine, e su una riga sola a volte la quarta andava a capo
     da sola. */
  .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
  }
  .stat-item {
    min-width: 0;
    padding: 0.5rem 0.5rem;
  }
  .stat-value {
    font-size: 1.3rem;
  }

  /* [2026-10-01] Qui c'era un tetto d'altezza sulla build (20vh in pausa, 14vh
     a fine partita) con una sua barra di scorrimento. Con le schede nuove, più
     alte delle pillole, quella finestra ne mostrava a malapena una, dentro un
     pannello che scorre già: due scorrimenti annidati. Ora scorre solo
     .pause-scroll / .gameover-scroll, che tengono i pulsanti sempre fuori. */
  .pause-title { margin-bottom: 0.3rem; }

  /* ⚠ MISURATO: a 340px di altezza, tre pulsanti a piena misura (≈150px in
     tutto) lasciavano a .pause-scroll solo 42px — abbastanza per l'etichetta
     "La tua build" ma NON per una sola pillola: la build spariva del tutto
     invece di limitarsi a scorrere. Pulsanti più compatti qui recuperano lo
     spazio per mostrarne almeno una riga senza toccare la loro dimensione
     nelle altre schermate. */
  .pause-actions {
    gap: 0.4rem;
  }
  .pause-actions .btn-primary,
  .pause-actions .btn-secondary {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
}

/* ============================================================
   SCHERMATA UPGRADE — mobile adattivo
   Prevale sulle regole @media (max-width: 480px) precedenti
   grazie all'ordine di cascata (stessa specificità, ultima vince).
   ============================================================ */
@media (max-width: 520px) {
  /* Quattro statistiche in fila (flex-wrap) andavano su tre righe scomode
     (2+1+1): una griglia 2×2 esplicita è prevedibile a qualunque larghezza. */
  .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
  }
  .stat-item {
    min-width: 0;   /* la cella la dà la griglia, non più min-width sul contenuto */
    padding: 0.7rem 0.5rem;
  }
  .stat-value {
    font-size: 1.4rem;
  }

  /* [2026-10-01] Telefono verticale: armi una per riga, potenziamenti 4 per riga.
     Tolto il tetto d'altezza (30vh / 16vh) che la build aveva qui con un suo
     scorrimento: era nato prima di .pause-scroll / .gameover-scroll (26/09), che
     ora tengono i pulsanti sempre interi a schermo da soli — e con le schede
     nuove, più alte delle pillole, quella finestra ne mostrava poche dentro un
     pannello che scorre già. Ora scorre il pannello e basta. */
  .build-armi  { grid-template-columns: 1fr; }
  .build-carte { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; }
  .build-carta-icona { font-size: 1.35rem; }
  .build-carta-nome  { font-size: 0.6rem; }
  /* Quadratino largo ~66px a 390: il bollino copriva metà icona. L'icona scende
     sotto il bollino invece di rimpicciolire ancora. */
  /* [2026-10-02c] Margine laterale quasi a zero prima di tagliare il testo: a
     320×568 "Rigenerazione" perdeva l'ultima lettera anche al carattere minimo. */
  .build-carta       { padding: 1.1rem 0.1rem 0.45rem; }

  /* Su 390px, 2rem di padding per lato toglievano 64px a una colonna già stretta. */
  .pause-content,
  .gameover-content {
    padding: 1.2rem 0.75rem;
  }

  .pause-title { margin-bottom: 1rem; }

  /* Padding ridotto con rispetto del notch/Dynamic Island */
  .upgrade-content {
    padding: max(0.75rem, env(safe-area-inset-top, 0.75rem)) 0.75rem 0.75rem;
  }

  .upgrade-title {
    font-size: clamp(1.3rem, 7vw, 2rem);
    margin-bottom: 0.1rem;
  }

  .upgrade-subtitle {
    margin: 0.2rem 0 0.55rem;
    font-size: 0.78rem;
  }

  /* Le 3 card non si wrappano: restano in fila e si dividono lo spazio */
  .upgrade-cards {
    flex-wrap: nowrap;
    gap: 0.4rem;
    align-items: stretch;
  }

  /* Ogni card occupa 1/3 dello spazio disponibile, si restringe se necessario */
  .upgrade-card {
    flex: 1 1 0;
    width: auto;
    min-width: 0;           /* permette shrink sotto il contenuto */
    padding: 0.65rem 0.4rem;
    border-radius: 10px;
  }

  /* Icona più compatta ma sempre visibile */
  .upgrade-card .card-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.25rem;
    line-height: 1.1;
  }

  .upgrade-card .card-name {
    font-size: 0.72rem;
    margin-bottom: 0.18rem;
    line-height: 1.2;
  }

  .upgrade-card .card-value {
    font-size: 0.78rem;
    margin-bottom: 0.18rem;
  }

  .upgrade-card .card-desc {
    font-size: 0.6rem;
    line-height: 1.3;
  }
}

/* ============================================================
   BERSAGLI TATTILI — solo dispositivi a puntamento impreciso
   ============================================================ */
/* [2026-09-26] Misurato: .btn-icon-util/.btn-lang ~33×29px,
   .btn-lock 29×22, .btn-banish 45×22, .meta-buy 52×23 — tutti sotto i 44px
   raccomandati per un dito. Gated su (pointer: coarse) apposta: un mouse punta
   con precisione, e ingrandire questi pulsanti anche su desktop avrebbe violato
   "nessun cambiamento visivo sul layout desktop". Un iPad, anche largo quanto
   un laptop, ha pointer:coarse — quindi ne beneficia comunque. */
@media (pointer: coarse) {
  .btn-lang,
  .btn-icon-util {
    min-width: 44px;
    min-height: 44px;
  }

  /* Riga ⚙/ℹ/🇮🇹 più alta: il margine sopra il titolo va allargato di
     conseguenza, o "ZERITHAL" finisce parzialmente coperto. Misurato con
     getBoundingClientRect: la riga passa da 40px di altezza totale (bordo
     compreso) col mouse a 55px col dito. [2026-09-27] Spostato da
     .menu-center a .menu-content: da quando la barra ha uno sfondo opaco e
     scorre col contenuto, il margine iniziale serve all'intera colonna, non
     solo al titolo. */
  @media (max-width: 720px) {
    .menu-content { padding-top: 4.2rem; }
  }
  @media (max-height: 500px) {
    .menu-content { padding-top: 3.9rem; }
  }

  /* Lock/Banish sulle card di livello-su: bersagli piccoli e vicini fra loro. */
  .card-controls {
    gap: 0.5rem;
  }
  .btn-lock,
  .btn-banish {
    min-width: 36px;
    min-height: 32px;
    padding: 0.2rem 0.5rem;
  }

  /* Acquisto potenziamento nel menu principale. */
  .meta-buy {
    min-height: 36px;
    padding: 0.3rem 0.6rem;
  }

  /* Ripesca (menu livello-su), pulsanti Qualità (Impostazioni) e chiusura del
     pannello Info: erano più bassi dei 44px raccomandati per un dito. */
  .btn-reroll {
    min-height: 44px;
  }
  .btn-quality {
    min-height: 44px;
  }
  #btn-info-close {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ============================================================
   TELEFONO IN ORIZZONTALE [2026-10-02c]
   ============================================================
   È il modo più probabile di giocare dal telefono (844×390, 667×375, 932×430,
   568×320). Una sola condizione per tutto il blocco: in verticale e su computer
   non cambia nulla. Sta IN FONDO al file apposta: a parità di specificità vince
   sulle regole per schermi bassi (max-height: 500px) e per larghezza. */
@media (orientation: landscape) and (max-height: 500px) {

  /* ── B1. PAUSA E FINE PARTITA: due colonne ──────────────────────────────
     Impilati, titolo + riquadri + tasti lasciavano alla build una striscia di
     ~20 px. Ora a sinistra titolo, numeri e tasti; a destra la build a tutta
     altezza, che scorre da sola. Il contenitore scorrevole di prima diventa
     display:contents: i suoi figli entrano nella griglia senza toccare l'HTML,
     che è lo stesso in verticale e su computer. */
  .pause-content,
  .gameover-content {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 1rem;
    row-gap: 0.5rem;
    align-items: start;
    width: min(900px, 100vw);
    height: 100vh;
    height: 100svh;
    max-height: 100vh;
    max-height: 100svh;
    box-sizing: border-box;
    padding: max(0.5rem, env(safe-area-inset-top, 0px))
             max(0.75rem, env(safe-area-inset-right, 0px))
             max(0.5rem, env(safe-area-inset-bottom, 0px))
             max(0.75rem, env(safe-area-inset-left, 0px));
  }
  .pause-content {
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "titolo build" "numeri build" "tasti build";
  }
  .gameover-content {
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "titolo build" "numeri build" "cristalli build" "tasti build";
  }
  .pause-scroll,
  .gameover-scroll { display: contents; }

  .pause-title    { grid-area: titolo; margin: 0; font-size: clamp(1.2rem, 7vh, 1.8rem); }
  .gameover-title { grid-area: titolo; margin: 0; font-size: clamp(1.2rem, 7vh, 1.8rem); }
  .pause-content .stats-grid,
  .gameover-content .stats-grid { grid-area: numeri; margin: 0; gap: 0.35rem; }
  /* Fine partita: quattro numeri su una riga sola (2×2 rubava una riga intera). */
  .gameover-content .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pause-content .stat-item,
  .gameover-content .stat-item  { padding: 0.35rem 0.3rem; }
  .pause-content .stat-value,
  .gameover-content .stat-value { font-size: 1.1rem; }
  .pause-content .stat-label,
  .gameover-content .stat-label { font-size: 0.56rem; letter-spacing: 0.05em; }
  .gameover-content .shards-row { grid-area: cristalli; margin: 0; padding: 0.35rem 0.6rem; }
  .pause-actions    { grid-area: tasti; align-self: start; }
  .gameover-actions { grid-area: tasti; align-self: start; margin-top: 0; }

  .pause-content .build-section,
  .gameover-content .build-section {
    grid-area: build;
    align-self: stretch;
    min-height: 0;
    margin: 0;
    overflow-y: auto;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 106, 26, 0.3) transparent;
  }
  /* Build più compatta: con 3 armi e 13 potenziamenti, a 844×390 e 667×375
     restano visibili almeno due righe intere di quadratini senza scorrere. */
  .build-title       { margin-bottom: 0.2rem; font-size: 0.66rem; }
  .build-list        { gap: 0.3rem; }
  .build-sottotitolo { margin-top: 0.15rem; font-size: 0.6rem; }
  .build-armi        { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 0.35rem; }
  .build-arma        { padding: 0.35rem 0.55rem; gap: 0.5rem; }
  .build-arma-icona  { font-size: 1.4rem; }
  .build-arma-nome   { font-size: 0.78rem; }
  .build-carte       { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 0.35rem; }
  .build-carta       { padding: 0.95rem 0.15rem 0.35rem; gap: 0.2rem; }
  .build-carta-icona { font-size: 1.25rem; }
  .build-carta-nome  { font-size: 0.6rem; }

  /* ── B2. RIQUADRO SUGGERIMENTI: in alto, sotto il timer ──────────────────
     In basso al centro copriva il campo e la zona del joystick. Ora sta sotto
     il timer (60 px: sotto anche le barre vita/esperienza), più stretto e con
     testo più piccolo. Durante un evento scende sotto il pannello direttiva
     (--tip-min-top, scritto da Tutorial.js), e gli avvisi di EventDirector gli
     passano sotto (lo contano fra gli ostacoli). Largo al massimo 60vw: resta
     lontano dal tasto pausa (sinistra) e dalla minimappa (destra). */
  .tutorial-tip {
    top: max(60px, env(safe-area-inset-top, 0px), var(--tip-min-top, 0px));
    bottom: auto;
    max-width: min(60vw, 420px);
    padding: 0.35rem 0.7rem;
    font-size: 0.72rem;
    line-height: 1.35;
    gap: 0.45rem;
  }
  /* La dimensione la scrive Tutorial.show() in style: per rimpicciolirla serve !important. */
  .tutorial-tip-icon {
    width: 30px !important;
    height: 30px !important;
  }

  /* ── B3. MENU INIZIALE ───────────────────────────────────────────────────
     Titolo e sottotitolo occupavano un terzo dello schermo: ora su una riga.
     .menu-center va a capo per riga: titolo e sottotitolo stanno affiancati,
     ogni altro blocco prende una riga intera. */
  .menu-center {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 0.8rem;
  }
  .menu-center > * { flex: 1 0 100%; }
  .menu-center > .game-title,
  .menu-center > .game-subtitle { flex: 0 1 auto; }
  .game-title    { font-size: clamp(1.2rem, 7vh, 1.7rem); margin: 0; }
  .game-subtitle {
    margin: 0;
    border: none;
    padding: 0;
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-align: left;
    /* Stretto apposta: va a capo su due righe brevi e resta ACCANTO al titolo,
       invece di scendere intero sotto di lui. */
    max-width: 15rem;
  }
  /* Le cinque carte su una riga, più strette. Se non ci stanno, la riga scorre
     in orizzontale e la quinta resta tagliata al bordo: si capisce che continua. */
  .char-grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.35rem;
    overflow-x: auto;
    /* [2026-10-06] pan-x pan-y, non solo pan-x: con pan-x il browser vietava lo
       scorrimento verticale a ogni gestata partita su una carta, e in orizzontale
       la fila delle carte è la parte più grande del menu visibile all'apertura.
       Misurato in Chrome a 844×390: col dito sulla carta il menu restava fermo.
       Con tutti e due il browser sceglie da solo la direzione del dito: in
       orizzontale scorre la fila, in verticale il menu. */
    touch-action: pan-x pan-y;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 0.15rem;
  }
  .char-card {
    flex: 1 0 0;
    min-width: 84px;
    padding: 0.35rem 0.25rem;
    gap: 0.1rem;
    scroll-snap-align: start;
  }
  .char-icon-mech,
  .char-icon-wrap { width: 40px; height: 40px; }
  .char-name  { font-size: 0.64rem; }
  .char-stats { font-size: 0.54rem; }
  .section-label { margin-bottom: 0.3rem; }
  /* In fondo spazio sufficiente perché l'ultima riga (l'ultimo tasto di acquisto)
     si possa portare SOPRA la barra fissa di GIOCA, più il cursore home. */
  .menu-content { padding-bottom: calc(8rem + env(safe-area-inset-bottom, 0px)); }

  /* ── B4. IMPOSTAZIONI ────────────────────────────────────────────────────
     A 390 px di altezza la riga «Qualità» finiva sotto il tasto Indietro. Il
     pannello ora usa tutta l'altezza: titolo compatto, contenuto che scorre e
     occupa tutto lo spazio libero, Indietro fuori dalla parte che scorre. */
  .settings-content {
    width: min(96vw, 640px);
    max-width: 640px;
    max-height: 100vh;
    max-height: 100svh;
    padding: max(0.5rem, env(safe-area-inset-top, 0px)) 1rem max(0.5rem, env(safe-area-inset-bottom, 0px));
    border-radius: 0;
  }
  .settings-title   { font-size: 1.1rem; margin-bottom: 0.35rem; }
  .settings-scroll  { flex: 1 1 auto; padding-bottom: 0.4rem; }
  #btn-settings-back { margin-top: 0.4rem; }
}

/* [2026-10-02c] Orizzontale stretto (667×375, 568×320): a fine partita quattro
   numeri su una riga non ci stavano — "12:41" e "3418" si toccavano. Qui 2×2:
   nella colonna sinistra c'è altezza a sufficienza. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 760px) {
  .gameover-content .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A 568×320 la colonna sinistra non bastava e «Torna al menu» usciva dal fondo:
     tasti affiancati e più bassi, numeri e cristalli più compatti. */
  .gameover-content .stat-item   { padding: 0.25rem 0.3rem; }
  .gameover-content .stat-record,
  .gameover-content .stat-record-new { margin-top: 0.1rem; font-size: 0.6rem; }
  .gameover-content .shards-row  { font-size: 0.72rem; padding: 0.25rem 0.5rem; }
  .gameover-actions { flex-wrap: nowrap; gap: 0.4rem; }
  .gameover-actions .btn-primary,
  .gameover-actions .btn-secondary {
    min-width: 0;
    padding: 0.5rem 0.6rem;
    font-size: 0.8rem;
  }
  /* Colonna destra stretta: armi due per riga e quadratini più piccoli, così
     sta più build nella stessa altezza. */
  .build-armi  { grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); }
  .build-arma  { padding: 0.3rem 0.45rem; gap: 0.4rem; }
  .build-arma-icona { font-size: 1.2rem; }
  .build-arma-nome  { font-size: 0.7rem; }
  .build-carte { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}

/* [2026-10-03] Tempo di fine partita al millesimo: «25:47» e «.318» sulla stessa riga.
   I millesimi sono più piccoli e più tenui: separano i giocatori in classifica, ma
   non devono pesare quanto minuti e secondi. Il riquadro non si allarga (min-width 0,
   overflow nascosto) e non si va a capo; se il tempo non ci sta, GameOverScreen fa
   scendere il carattere finché ci sta (Utils.adattaAllaLarghezza). */
.stat-value.tempo-fine {
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.stat-value.tempo-fine .tempo-millesimi {
  font-size: 0.6em;
  font-weight: 700;
  opacity: 0.75;
}