/* ==========================================================================
   Il telefono e' un gioco a parte.

   Su schermo largo l'equipaggiamento e' fatto di tre colonne affiancate. Sotto
   i 780 px quelle colonne si impilavano: 1827 px di contenuto dentro a una
   finestra da 812, cioe' due schermate e mezzo di scorrimento per arrivare al
   tasto che fa cominciare il piano. Ogni piano.

   Qui si cambia impianto, non pelle: colori, cornici e caratteri restano quelli
   del gioco. Cambia come le cose stanno in piedi - una finestra sola, un
   pannello per volta, una barra fissa in fondo, e il dettaglio dell'oggetto che
   sale dal basso invece di accodarsi.

   Tutto quello che sta qui dentro vale solo sotto i 780 px: sopra, questo file
   non esiste.
   ========================================================================== */

/* I pezzi del telefono restano nel documento anche sullo schermo grande: la
   barra viene costruita una volta sola, e la maniglia del foglio sta dentro al
   dettaglio dell'oggetto. Fuori dal telefono non devono esistere - senza questo
   sul desktop spuntava un trattino accanto al nome dell'oggetto. */
.mob-barra, .mob-velo, .mob-maniglia { display: none; }

@media (max-width: 780px) {

  /* ---- Schermo intero: non qui -------------------------------------------
     Su iPhone quel tasto non fa niente. Safari sul telefono concede lo schermo
     intero solo ai video, non a un elemento qualunque: il gioco chiede, il
     browser non risponde, e il codice cade nella funzione vuota di ripiego.
     Su Android funziona, ma un tasto che su meta' dei telefoni e' morto e' un
     tasto da togliere - tanto piu' che li' l'angolo serve ad altro. */
  #btn-full { display: none !important; }

  /* ---- La barra ---------------------------------------------------------
     Sta incollata in fondo, sopra la tacca del telefono. Quattro voci: due
     cambiano pannello, una e' l'azione, una torna all'accampamento. */

  .mob-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
    display: grid; grid-template-columns: 1fr 1fr 1.25fr 1fr;
    align-items: end; gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(rgba(12, 10, 18, .82), rgba(8, 7, 12, .97));
    border-top: 1px solid rgba(255, 255, 255, .09);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .mob-barra.via { display: none; }

  .mob-voce {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-width: 0; overflow: hidden;
    padding: 7px 2px 5px; min-height: 54px;
    border: 0; border-radius: 12px;
    background: none; color: var(--dim, #9a94a8);
    font-family: inherit; font-size: 10px; letter-spacing: .3px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: color .15s ease, background .15s ease;
  }
  .mob-voce:disabled { opacity: .35; }
  .mob-voce.on { color: var(--gold, #ffd83d); background: rgba(255, 216, 61, .1); }
  .mob-ico { display: block; width: 22px; height: 22px; }
  .mob-ico svg { width: 100%; height: 100%; display: block; }
  .mob-lab {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-transform: uppercase;
  }

  /* Il tasto di mezzo e' l'azione: si vede che e' un'altra cosa. */
  .mob-voce.grande {
    margin-top: -16px; padding: 10px 4px 6px;
    color: #10240f;
    background: linear-gradient(#7ee06a, #4fb43c);
    box-shadow: 0 -2px 0 rgba(255, 255, 255, .28) inset, 0 6px 16px rgba(0, 0, 0, .5);
    font-weight: 700;
  }
  .mob-voce.grande .mob-ico { width: 26px; height: 26px; }
  .mob-voce.grande:disabled { background: linear-gradient(#5c5c63, #45454b); color: #23232a; }

  /* ---- Il guscio dell'equipaggiamento -----------------------------------
     Una finestra sola: niente scorre tranne il pannello che si sta guardando,
     e solo se il suo contenuto lo richiede davvero. */

  body.con-barra .prep-screen .prep-wrap {
    height: 100%; display: flex; flex-direction: column;
    overflow: hidden;
    padding: 0 0 calc(70px + env(safe-area-inset-bottom, 0px));
    gap: 0;
  }

  /* I due tasti in cima adesso vivono nella barra. */
  body.con-barra .prep-screen .prep-top { display: none; }

  body.con-barra .prep-screen .prep-counts {
    flex: none; justify-content: center; gap: 14px;
    padding: 8px 12px 6px; margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }

  body.con-barra .prep-screen .prep-cols {
    display: block; flex: 1 1 auto; min-height: 0;
    padding: 0; gap: 0;
  }

  /* Un pannello per volta. */
  body.con-barra #screen-prep .prep-hero,
  body.con-barra #screen-prep .prep-bag {
    height: 100%; margin: 0; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  body.con-barra #screen-prep[data-mob="eroe"] .prep-bag { display: none; }
  body.con-barra #screen-prep[data-mob="zaino"] .prep-hero { display: none; }

  /* ---- Pannello Eroe ----------------------------------------------------
     Il ritratto era la meta' della schermata. Qui si stringe per lasciare
     spazio ai numeri, che sono il motivo per cui si apre questa pagina. */

  body.con-barra .prep-hero .ph-stage { min-height: 0; }
  body.con-barra .prep-hero .ph-figure { max-height: 30vh; width: auto; }
  body.con-barra .prep-hero .ph-blocco { gap: 10px; }

  /* Le pillole delle statistiche si tagliavano a meta': "140 d…", "9 iniziat…".
     Due per riga, larghe, senza troncature. */
  body.con-barra #prep-stats.pstat-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
  }
  body.con-barra #prep-stats .pstat {
    width: auto; min-width: 0; justify-content: flex-start;
  }
  body.con-barra #prep-stats .pstat span,
  body.con-barra #prep-stats .pstat i {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ---- Pannello Zaino ---------------------------------------------------
     Le linguette restano in cima mentre la griglia scorre sotto. */

  body.con-barra .prep-bag { display: flex; flex-direction: column; }
  body.con-barra .prep-bag .sec { flex: none; margin: 10px 12px 6px; }
  body.con-barra .prep-bag #bp-tabs {
    flex: none; position: sticky; top: 0; z-index: 2;
    padding: 6px 12px; margin: 0;
    background: linear-gradient(rgba(10, 9, 14, .96), rgba(10, 9, 14, .82));
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  body.con-barra .prep-bag #bp-tabs::-webkit-scrollbar { display: none; }
  body.con-barra .prep-bag #bp-list { padding: 10px 12px 16px; }

  /* ---- Il foglio del dettaglio ------------------------------------------
     Non e' piu' la terza colonna in coda a tutto: sale dal basso, copre meta'
     schermo, e si chiude senza perdere il posto nello zaino. */

  body.con-barra #prep-detail {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    max-height: 74vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    margin: 0; padding: 0 14px calc(80px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    border: 1px solid rgba(255, 255, 255, .12); border-bottom: 0;
    background: var(--carta, #16141d);
    box-shadow: 0 -14px 40px rgba(0, 0, 0, .6);
    transform: translateY(101%);
    transition: transform .26s cubic-bezier(.2, .9, .3, 1);
  }
  body.con-barra #prep-detail.con-oggetto { transform: translateY(0); }
  /* Senza oggetto scelto il pannello diceva "tocca un oggetto": sul telefono
     sarebbe un foglio vuoto che copre lo zaino. */
  body.con-barra #prep-detail .pd-empty { display: none; }

  /* La striscia in cima al foglio. Prima era una lineetta grigia e una
     crocetta spenta: nessuno capiva che si chiudesse. Adesso e' alta abbastanza
     da prenderla col pollice, la presa e' larga e chiara, e accanto c'e'
     scritto cosa succede. */
  .mob-maniglia {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    padding: 12px 0 10px; margin: 0 -14px 4px;
    background: var(--carta, #16141d);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    touch-action: none; cursor: grab;
  }
  .mob-maniglia:active { cursor: grabbing; }
  .mob-presa {
    width: 56px; height: 5px; border-radius: 3px;
    background: rgba(255, 255, 255, .5);
  }
  .mob-chiudi {
    position: absolute; right: 12px; top: 8px;
    height: 32px; padding: 0 11px 0 9px;
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px;
    background: rgba(255, 255, 255, .07); color: #efeaf6;
    font-family: inherit; font-size: 11px; letter-spacing: .5px;
    text-transform: uppercase; cursor: pointer;
  }
  .mob-chiudi svg { width: 14px; height: 14px; }
  .mob-chiudi:active { background: rgba(255, 255, 255, .16); }

  .mob-velo {
    display: block;
    position: fixed; inset: 0; z-index: 65;
    background: rgba(4, 3, 8, .68);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .mob-velo.on { opacity: 1; pointer-events: auto; }

  @media (prefers-reduced-motion: reduce) {
    body.con-barra #prep-detail { transition: none; }
    .mob-velo { transition: none; }
  }
}

/* ==========================================================================
   Il movimento.

   La disposizione era giusta ma sembrava morta: si toccava una voce e la
   schermata cambiava di colpo, senza che niente dicesse da dove si veniva.
   Qui non ci sono effetti per far scena - c'e' il minimo che serve a capire
   dove si e' andati: una scivolata nella direzione del movimento, una salita
   breve quando entra una schermata, e la barra che risponde al dito.
   ========================================================================== */

@media (max-width: 780px) {

  /* Il pannello arriva dalla parte da cui l'hai chiamato. */
  .mob-da-destra { animation: mobDaDestra .26s cubic-bezier(.22, .9, .3, 1) both; }
  .mob-da-sinistra { animation: mobDaSinistra .26s cubic-bezier(.22, .9, .3, 1) both; }
  @keyframes mobDaDestra {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes mobDaSinistra {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: none; }
  }

  /* Una schermata nuova sale di un dito e si schiarisce. */
  .mob-entra { animation: mobEntra .3s cubic-bezier(.22, .9, .3, 1) both; }
  @keyframes mobEntra {
    from { opacity: 0; transform: translateY(14px) scale(.99); }
    to { opacity: 1; transform: none; }
  }

  /* La barra sale quando compare, invece di apparire e basta. */
  .mob-barra:not(.via) { animation: mobBarra .32s cubic-bezier(.22, .9, .3, 1) both; }
  @keyframes mobBarra {
    from { transform: translateY(100%); }
    to { transform: none; }
  }

  /* Il dito preme, l'icona risponde. */
  .mob-ico { transition: transform .16s cubic-bezier(.3, 1.4, .5, 1); }
  .mob-voce:active .mob-ico { transform: scale(.86); }
  .mob-voce.on .mob-ico { animation: mobPop .3s cubic-bezier(.3, 1.5, .5, 1); }
  @keyframes mobPop {
    0% { transform: scale(.8); }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); }
  }

  /* Le caselle dello zaino si accendono una dopo l'altra invece di comparire
     tutte insieme come un muro. */
  body.con-barra #bp-list .bslot { animation: mobCasella .26s ease both; }
  body.con-barra #bp-list .bslot:nth-child(1) { animation-delay: .00s; }
  body.con-barra #bp-list .bslot:nth-child(2) { animation-delay: .02s; }
  body.con-barra #bp-list .bslot:nth-child(3) { animation-delay: .04s; }
  body.con-barra #bp-list .bslot:nth-child(4) { animation-delay: .06s; }
  body.con-barra #bp-list .bslot:nth-child(5) { animation-delay: .08s; }
  body.con-barra #bp-list .bslot:nth-child(6) { animation-delay: .10s; }
  body.con-barra #bp-list .bslot:nth-child(n+7) { animation-delay: .12s; }
  @keyframes mobCasella {
    from { opacity: 0; transform: translateY(8px) scale(.96); }
    to { opacity: 1; transform: none; }
  }

  /* Chi ha chiesto meno movimento non lo riceve. */
  @media (prefers-reduced-motion: reduce) {
    .mob-da-destra, .mob-da-sinistra, .mob-entra,
    .mob-barra:not(.via), .mob-voce.on .mob-ico,
    body.con-barra #bp-list .bslot { animation: none; }
    .mob-ico { transition: none; }
  }
}

/* ==========================================================================
   Scelta dell'eroe: un carosello.

   Erano 1628 px in una finestra da 812, e i due terzi se li mangiavano le
   cinque carte impilate una sull'altra. Adesso sono un binario orizzontale:
   una carta grande al centro, la successiva che spunta sul bordo destro - e'
   quel pezzo di carta che dice che ce n'e' un'altra - e il tasto per entrare
   ancorato in fondo, che non si sposta mai.
   ========================================================================== */

@media (max-width: 780px) {

  #screen-hero .hero-wrap {
    height: 100%; max-height: none;
    display: flex; flex-direction: column;
    padding: 0 0 calc(8px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }
  /* Il logo lo hai gia' visto nel menu un secondo fa. */
  #screen-hero .hero-wrap .screen-logo { display: none; }

  /* ---- Il binario ------------------------------------------------------- */
  #screen-hero .hero-row {
    order: -1; flex: none;
    display: flex; flex-wrap: nowrap; justify-content: flex-start;
    gap: 12px; margin: 0;
    /* Il margine laterale e' quello che tiene la carta al centro: la prima e
       l'ultima devono potersi fermare in mezzo come tutte le altre. */
    padding: 12px 13% 10px 13%;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  #screen-hero .hero-row::-webkit-scrollbar { display: none; }

  #screen-hero .hero-card {
    flex: 0 0 74%; scroll-snap-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 16px 12px 18px;
    transition: transform .22s ease, opacity .22s ease, box-shadow .22s ease;
    transform: scale(.9); opacity: .5;
  }
  /* Quella scelta e' la piu' grande e l'unica a piena luce: le altre restano
     indietro come suggerimento. */
  #screen-hero .hero-card.on,
  #screen-hero .hero-card.peek {
    transform: scale(1); opacity: 1;
    box-shadow: 0 0 0 2px var(--gold, #ffd83d) inset, 0 10px 26px rgba(0, 0, 0, .5);
  }
  /* Il ritratto si adatta all'altezza dello schermo invece di avere una
     misura fissa: e' lui a doversi stringere sui telefoni corti, non le
     statistiche a finire fuori. */
  #screen-hero .hero-card .hero-portrait {
    height: 25vh; max-height: 220px; min-height: 110px;
  }
  #screen-hero .hero-card .hero-portrait img { max-height: 100%; width: auto; }
  #screen-hero .hero-card .hero-name { font-size: 17px; letter-spacing: 1px; }
  #screen-hero .hero-card .hero-tagline { font-size: 12.5px; line-height: 1.4; }

  /* I puntini: a che punto della fila sei. */
  /* Stanno subito sotto al binario, non in fondo alla colonna: senza l'ordine
     finivano dopo le statistiche, lontani da quello che raccontano. */
  .mob-pallini {
    order: -1; flex: none;
    display: flex; justify-content: center; gap: 7px;
    padding: 2px 0 10px;
  }
  .mob-pallino {
    width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .22); cursor: pointer;
    transition: background .18s ease, transform .18s ease;
  }
  .mob-pallino.on { background: var(--gold, #ffd83d); transform: scale(1.35); }

  /* ---- Sotto al binario: i numeri di quello scelto ---------------------- */
  /* Il ritratto grande non serve piu': e' gia' nella carta. Restano le cose
     che nella carta non ci sono - statistiche, arma iniziale, passiva. */
  #screen-hero .hero-stage {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; gap: 8px;
    margin: 0; padding: 0 14px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #screen-hero .hero-stage::-webkit-scrollbar { display: none; }
  #screen-hero .hs-art { display: none; }
  #screen-hero .hs-kicker,
  #screen-hero .hs-name,
  #screen-hero .hs-lore { display: none; }
  #screen-hero .hs-info { width: 100%; text-align: center; }
  /* Due per riga, strette. Con tre non ci stavano e la terza colonna finiva
     oltre il bordo destro. */
  #screen-hero .hs-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    justify-content: stretch; width: 100%;
  }
  #screen-hero .hs-stat {
    min-width: 0; padding: 6px 8px;
    display: flex; align-items: center; gap: 6px;
  }
  #screen-hero .hs-stat > * { min-width: 0; }
  #screen-hero .hs-stat .hs-lab2 { font-size: 10px; }
  #screen-hero .hs-piu { font-size: 10px; }
  /* La riga verde che spiega i potenziamenti qui non ci sta, e non serve: il
     "+144" verde accanto al numero lo dice gia'. */
  #screen-hero .hs-nota { display: none; }
  #screen-hero .hs-boxes { text-align: left; gap: 6px; }
  #screen-hero .hs-start, #screen-hero .hs-pass { padding: 7px 10px; font-size: 12px; }

  /* ---- Il fondo, che non si muove mai ----------------------------------- */
  #screen-hero .hero-bottom { flex: none; margin: 0; padding: 8px 14px 0; }
  #screen-hero .hero-bottom .hs-namebox { width: 100%; }
  #screen-hero .hero-foot {
    flex: none; display: grid; grid-template-columns: auto 1fr; gap: 10px;
    padding: 10px 14px calc(6px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(transparent, rgba(8, 7, 12, .92) 40%);
  }
  #screen-hero .hero-foot .btn { margin: 0; }
}

/* ==========================================================================
   La bottega.

   Il ritratto del mercante col suo discorso si prendeva 214 px prima ancora di
   far vedere una merce. Qui diventa una riga: faccia piccola, nome, una frase,
   e il tasto per tornare indietro dove uno lo cerca - in alto a sinistra.
   Sotto, il banco e la scheda di quello che hai scelto.
   ========================================================================== */

@media (max-width: 780px) {

  #screen-shop .bottega {
    height: 100%; display: flex; flex-direction: column;
    padding: 0; gap: 0; overflow: hidden;
  }

  /* Gli smeraldi stavano sopra a tutto in alto a sinistra, e finivano scritti
     sul nome del mercante. Qui entrano in fila come gli altri. */
  #screen-shop .bt-borsa {
    position: static; order: -2; flex: none;
    align-self: flex-start; margin: 0; padding: 10px 12px 0;
  }

  /* Il mercante diventa una riga: faccia, nome, una frase. Il tasto per
     tornare indietro sta sotto, largo, e non litiga col tasto dello schermo
     intero che vive nell'angolo in alto a destra. */
  #screen-shop .bt-chi {
    order: -1; flex: none;
    display: grid; grid-template-columns: 56px 1fr;
    align-items: center; gap: 4px 10px;
    margin: 0; padding: 6px 12px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  #screen-shop .bt-scena { grid-row: 1 / span 2; height: 56px; margin: 0; }
  #screen-shop .bt-ritratto { max-height: 56px; width: auto; }
  #screen-shop .bt-nome-chi { font-size: 14px; margin: 0; line-height: 1.15; }
  #screen-shop .bt-detto {
    grid-column: 2; font-size: 12px; line-height: 1.35; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #screen-shop .bt-chiudi {
    grid-column: 1 / -1; width: 100%;
    margin: 6px 0 0; padding: 9px 12px; font-size: 12px;
  }

  /* Il banco e la scheda scorrono insieme: e' un catalogo, scorrerlo e' giusto. */
  #screen-shop .bt-banco,
  #screen-shop .bt-dettaglio {
    margin: 0; padding: 10px 12px;
  }
  #screen-shop .bt-banco { flex: 1 1 auto; min-height: 0; overflow: visible; }
  #screen-shop .bottega > .bt-banco,
  #screen-shop .bottega > .bt-dettaglio { flex: none; }
  #screen-shop .bottega::after { content: none; }

  /* Un solo contenitore che scorre, invece di tre che si accodano. */
  #screen-shop .bottega {
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  #screen-shop .bottega::-webkit-scrollbar { display: none; }
  #screen-shop .bt-griglia { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* ==========================================================================
   Il menu.

   Era la prima cosa che si vedeva ed era la peggiore: il titolo enorme, la
   frase di presentazione su tre righe, e la pagina che scorreva di sessanta
   pixel per non mostrare niente in fondo. In piu' il tasto dell'account
   finiva sopra ai link legali.

   Qui entra tutto in una finestra, con l'ordine di importanza: cosa si gioca
   sopra, il resto sotto, e i link legali che non litigano con nessuno.
   ========================================================================== */

@media (max-width: 780px) {

  #screen-menu { padding: 0; align-items: stretch; }
  /* L'alone dietro al menu sborda sopra e sotto di un 8%: col dito non si
     scorre - c'e' overflow nascosto - ma quello sbordo faceva risultare la
     colonna piu' alta della finestra a ogni misura. Qui sborda solo di lato. */
  #screen-menu .menu-inner::before { inset: 0 -12%; }
  #screen-menu .menu-inner {
    width: 100%; max-width: none; max-height: 100%;
    display: flex; flex-direction: column;
    justify-content: center; gap: 10px;
    /* Lo spazio in fondo e' quello dei link legali, che stanno ancorati li'
       sotto: senza, il tasto dell'account ci finiva sopra. */
    padding: 46px 14px calc(46px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }

  /* Il logo occupava un quinto di schermo per dire una cosa che si sa gia'. */
  #screen-menu #menu-logo { width: min(196px, 54%); margin: 0 auto; }
  /* La frase di presentazione e' bella ma non serve a giocare: piccola, e su
     una riga sola dove ci sta. */
  #screen-menu .tagline {
    font-size: 11px; line-height: 1.3; margin: 0;
    max-width: 34ch; margin-inline: auto;
  }

  #screen-menu .menu-actions { gap: 7px; }
  #screen-menu .menu-shops { gap: 7px; }
  /* I tre mercanti sono ritratti: sul telefono bastano piu' bassi. */
  #screen-menu .menu-shops .btn { padding: 5px; }
  #screen-menu .menu-shops .btn img,
  #screen-menu .menu-shops .btn .pixel { max-height: 50px; }
  /* Il riquadro "riprendi" e le due carte sotto: piu' compatti. */
  #screen-menu .btn.hero { padding: 9px 12px; }
  #screen-menu .menu-pair .btn.hero { min-height: 0; }

  /* La riga dell'account e quella dei link legali stavano una sopra all'altra:
     la seconda e' ancorata in fondo alla schermata, la prima scorreva dentro
     al contenuto. Qui vivono nello stesso fondo, una sotto l'altra. */
  #screen-menu .cloud-bar {
    flex-wrap: wrap; justify-content: center; gap: 6px;
    margin: 2px 0 0;
  }
  #screen-menu .cloud-bar .btn { padding: 6px 10px; font-size: 12px; }
  #screen-menu .cloud-status { flex: 1 0 100%; text-align: center; font-size: 11px; }

  /* I link legali restano ancorati in fondo com'erano - toccarli spezzava la
     colonna del menu. L'accavallamento col tasto dell'account si risolve
     dall'altra parte: il contenuto tiene lo spazio libero sotto di se'. */
  #screen-menu .legal { padding: 6px 12px 10px; }
  #screen-menu .legal-link { font-size: 11px; padding: 4px 8px; }
}

/* ==========================================================================
   Tutto in mezzo.

   Sul telefono i riquadri sono grandi e il contenuto ci ballava dentro:
   "Nuova scalata" stava appoggiata in fondo al suo quadrato verde, e le due
   targhette dell'Apocalisse erano schiacciate a sinistra. Su uno schermo
   stretto, dove ogni riquadro e' un bersaglio per il pollice, il contenuto
   deve stare al centro del suo bersaglio.
   ========================================================================== */

@media (max-width: 780px) {

  /* Le due carte affiancate: icona sopra, scritta sotto, tutto in mezzo.
     La classe e' 'gbtn', non 'btn hero' - quella nel documento la sostituisce
     il gioco quando disegna il menu. */
  #screen-menu .menu-pair .gbtn {
    justify-content: center; align-items: center;
    text-align: center;
  }
  #screen-menu .menu-pair .gbtn-ico { margin: 0; flex: none; }
  #screen-menu .menu-pair .gbtn-txt {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 100%; text-align: center;
  }
  /* "Fino a III" e "Migliore III" servono a chi guarda lo schermo grande e ha
     spazio per i dettagli. Qui sono due righe in piu' su un tasto che deve
     dire una cosa sola: si va all'Apocalisse. Il livello lo si sceglie nella
     schermata dopo, che esiste apposta.
     Cosi' le due carte diventano gemelle - logo sopra, nome sotto - e stanno
     affiancate senza rubare altezza. */
  #screen-menu .menu-pair .gbtn-chips { display: none; }

  /* Il riquadro "riprendi" resta a riga - la faccia dell'eroe a sinistra ha
     senso - ma il testo si allinea in mezzo alla sua altezza. */
  #screen-menu #btn-continue { align-items: center; }
  #screen-menu #btn-continue .gbtn-txt { justify-content: center; }

  /* Tutti gli altri tasti del menu: scritta in mezzo. */
  #screen-menu .btn {
    display: inline-flex; align-items: center; justify-content: center;
    text-align: center;
  }
}

/* ==========================================================================
   La stanza dell'Apocalisse.

   Ci stava per una trentina di pixel nell'emulatore, e quindi non ci stava
   affatto sul telefono vero: con le barre del browser il tasto "Scegli l'eroe"
   finiva sotto il bordo. I cinque riquadri degli effetti si prendevano 273 px
   da soli. Qui si stringe tutto quello che si puo' stringere senza togliere
   informazione: il tasto per andare avanti deve vedersi sempre.
   ========================================================================== */

@media (max-width: 780px) {

  #screen-apoc .apoc-wrap {
    height: 100%; display: flex; flex-direction: column;
    justify-content: center; gap: 8px;
    padding: 14px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }

  #screen-apoc .apoc-teschio { width: 40px; height: auto; margin: 0 auto; }
  #screen-apoc .apoc-kicker { font-size: 9px; }
  #screen-apoc .apoc-titolo { font-size: 26px; margin: 0; }
  #screen-apoc .apoc-sotto {
    font-size: 12px; line-height: 1.35; margin: 0;
    max-width: 38ch; margin-inline: auto;
  }

  #screen-apoc .apoc-quadrante { margin: 2px 0; }
  #screen-apoc .ab-step.grande { width: 44px; height: 40px; }
  #screen-apoc .apoc-tetto { font-size: 11px; margin: 0; }

  /* I cinque riquadri: piu' bassi, e la coppia numero+etichetta su una riga
     sola invece che in colonna. */
  #screen-apoc .apoc-effetti { gap: 7px; }
  #screen-apoc .apoc-effetti > * { padding: 8px 8px; }
  #screen-apoc .apoc-effetti img,
  #screen-apoc .apoc-effetti svg,
  #screen-apoc .apoc-effetti .ico { width: 16px; height: 16px; }
  #screen-apoc .apoc-effetti b { font-size: 15px; }
  #screen-apoc .apoc-effetti i,
  #screen-apoc .apoc-effetti span { font-size: 10.5px; line-height: 1.25; }

  #screen-apoc .apoc-premio { font-size: 11.5px; line-height: 1.3; margin: 0; }

  /* Il fondo non si muove: e' il tasto che fa andare avanti. */
  #screen-apoc .hero-foot {
    flex: none; display: grid; grid-template-columns: auto 1fr; gap: 10px;
    margin: 2px 0 0;
  }
}

/* ==========================================================================
   La porta del piano.

   E' il momento in cui si decide di entrare: deve stare in una finestra e il
   tasto per tornare indietro deve stare dove si cerca, cioe' in fondo. Il
   cartellino dell'Apocalisse stava in fila accanto al nome dell'area e la
   riga si spezzava male: qui va a capo per conto suo, in mezzo.
   ========================================================================== */

@media (max-width: 780px) {

  #gate { padding: 0; align-items: stretch; }
  #gate .gate-box {
    height: 100%; max-width: none;
    justify-content: center; gap: 10px;
    padding: 20px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }

  #gate .gate-logo { width: min(190px, 52%); }
  #gate .phud-num { font-size: 56px; }
  #gate .prep-area { font-size: 14px; }

  /* Area, "piano del boss" e Apocalisse: una sotto l'altra, tutte in mezzo. */
  #gate .phud-meta {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 100%;
  }
  #gate .apoc-badge, #gate .boss-badge { margin: 0; }

  #gate .prep-art { max-height: 26vh; overflow: hidden; }
  #gate .prep-art img { max-height: 26vh; width: auto; }

  #gate .phud-go { width: 100%; margin: 4px 0 0; }

  /* Il rimando all'equipaggiamento si stacca dal resto e si appoggia in
     fondo: prima galleggiava sotto al tasto grande, in mezzo al nulla. */
  #gate .gate-back {
    margin-top: auto; padding: 12px 10px 2px;
    font-size: 12px;
  }
}

/* ==========================================================================
   Correzioni: la porta e la bottega.
   ========================================================================== */

@media (max-width: 780px) {

  /* Il tasto "varca la porta" ha 'flex: 1 1 46%' addosso: in una colonna alta
     quanto lo schermo si mangiava tutto lo spazio libero e diventava un
     rettangolo verde da cinquecento pixel. Qui vale quanto il suo contenuto. */
  #gate .phud-go { flex: 0 0 auto; }

  /* ---- Bottega -----------------------------------------------------------
     Tre difetti: il tasto per uscire stava in cima insieme al mercante, la
     merce era allineata a sinistra con un vuoto a destra, e la scheda
     dell'oggetto si accodava in fondo al listino invece di aprirsi. */

  /* La merce riempie la riga, in mezzo. */
  #screen-shop .bt-griglia {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center; justify-items: stretch;
    gap: 8px;
  }
  /* Il serraglio: titolo, bestiole, e la nota sotto a tutta larghezza. Senza
     dirlo la nota finiva dentro a una colonna della griglia e si leggeva una
     parola per riga. */
  #screen-shop .bt-serraglio { display: flex; flex-direction: column; gap: 8px; }
  #screen-shop .bt-serr-lista {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-items: center; gap: 8px; width: 100%;
  }
  #screen-shop .bt-serr-nota { width: 100%; margin: 0; font-size: 12px; line-height: 1.4; }

  /* Per uscire da una schermata la crocetta basta e avanza: una fascia larga
     con scritto "TORNA AL MENU" mangia una riga intera e grida piu' del
     dovuto. L'angolo in alto a destra e' libero da quando lo schermo intero
     non c'e' piu' sui telefoni. La scritta resta nel documento per chi usa un
     lettore di schermo: e' solo nascosta alla vista. */
  #screen-shop .bt-chiudi {
    position: fixed; top: 10px; right: 10px; left: auto; bottom: auto; z-index: 62;
    width: 40px; height: 40px; min-width: 0; padding: 0; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(14, 12, 20, .82);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    font-size: 0; text-decoration: none; color: #efeaf6;
  }
  #screen-shop .bt-chiudi::before {
    content: '✕'; font-size: 17px; line-height: 1; font-family: system-ui, sans-serif;
  }
  #screen-shop .bt-chiudi:active { background: rgba(255, 255, 255, .16); }
  /* La testata lascia libero l'angolo della crocetta. */
  #screen-shop .bt-borsa { padding-right: 58px; }
  #screen-shop .bottega { padding-bottom: 16px; }

  /* La scheda dell'oggetto sale dal basso, come nello zaino. Chiusa di suo:
     la bottega sceglie da sola il primo oggetto del banco, e un foglio aperto
     d'ufficio coprirebbe la merce prima ancora di averla guardata. */
  #screen-shop #shop-scheda {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    margin: 0; padding: 0 14px calc(24px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    border: 1px solid rgba(255, 255, 255, .12); border-bottom: 0;
    background: var(--carta, #16141d);
    box-shadow: 0 -14px 40px rgba(0, 0, 0, .6);
    transform: translateY(101%);
    transition: transform .26s cubic-bezier(.2, .9, .3, 1);
  }
  #screen-shop #shop-scheda.con-oggetto { transform: translateY(0); }

  @media (prefers-reduced-motion: reduce) {
    #screen-shop #shop-scheda { transition: none; }
  }
}

/* ==========================================================================
   La scheda dell'oggetto.

   Tre difetti, uno dentro l'altro:

   1. Si spostava a destra e sinistra col dito. Colpa dell'alone dietro
      all'illustrazione: e' largo 221 px dentro a un riquadro da 116, sborda di
      proposito per fare luce, e nessuno lo tagliava. Risultato: la scheda era
      larga 412 px in una finestra da 373 e il dito la trascinava.
   2. Il tasto chiudi sembrava fluttuare sopra al contenuto invece di essere
      parte della scheda.
   3. Bisognava scorrerla.

   Qui l'alone viene tagliato, la scheda si stringe fin dove serve, e la riga
   in cima e' una testata vera - fondo pieno, riga di separazione - non una
   cosa appoggiata sopra.
   ========================================================================== */

@media (max-width: 780px) {

  /* Niente scorrimento laterale, mai. */
  body.con-barra #prep-detail,
  #screen-shop #shop-scheda { overflow-x: hidden; }

  /* L'alone resta dentro al suo riquadro. */
  body.con-barra #prep-detail .mo-art,
  #screen-shop #shop-scheda .mo-art { overflow: hidden; }
  body.con-barra #prep-detail .mo-glow,
  #screen-shop #shop-scheda .mo-glow { max-width: 100%; max-height: 100%; }

  /* La scheda si stringe: illustrazione piu' piccola, testi piu' fitti, e
     tutto quello che si puo' togliere senza togliere informazione. */
  body.con-barra #prep-detail .mo,
  #screen-shop #shop-scheda .mo { width: 100%; max-width: 100%; }

  body.con-barra #prep-detail .mo-top,
  #screen-shop #shop-scheda .mo-top { gap: 10px; align-items: flex-start; }

  body.con-barra #prep-detail .mo-art,
  #screen-shop #shop-scheda .mo-art { width: 92px; height: 92px; flex: 0 0 92px; }
  body.con-barra #prep-detail .mo-img,
  #screen-shop #shop-scheda .mo-img { max-width: 88px; max-height: 88px; }

  body.con-barra #prep-detail .mo-info,
  #screen-shop #shop-scheda .mo-info { min-width: 0; }
  body.con-barra #prep-detail .mo-name,
  #screen-shop #shop-scheda .mo-name { font-size: 17px; line-height: 1.15; }
  body.con-barra #prep-detail .mo-about,
  #screen-shop #shop-scheda .mo-about { font-size: 12px; line-height: 1.35; }
  body.con-barra #prep-detail .mo-block,
  #screen-shop #shop-scheda .mo-block { gap: 5px; }
  body.con-barra #prep-detail .mo-rule,
  #screen-shop #shop-scheda .mo-rule { margin: 6px 0; }

  /* Sotto alla barra ci va lo spazio giusto: ottanta pixel erano un vuoto. */
  body.con-barra #prep-detail {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  /* La testata: fondo pieno e una riga sotto, cosi' e' il bordo della scheda e
     non un tasto che galleggia. */
  .mob-maniglia {
    background: var(--carta, #16141d);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .07);
  }
}

/* La crocetta non sta piu' su una riga sua: si appoggia all'angolo della
   scheda, alla stessa altezza del nome dell'oggetto. La banda vuota che
   occupava prima la faceva sembrare appesa sopra al contenuto invece che
   parte di esso. Resta la presa in cima, sottile, per il trascinamento. */
@media (max-width: 780px) {

  .mob-maniglia {
    padding: 8px 0 4px; margin: 0 -14px 2px;
    border-bottom: 0; box-shadow: none;
    position: static;
  }
  .mob-presa { width: 46px; height: 4px; }

  body.con-barra #prep-detail .mob-chiudi,
  #screen-shop #shop-scheda .mob-chiudi {
    position: absolute; top: 12px; right: 12px;
  }
  /* Il nome dell'oggetto si ferma prima della crocetta. */
  body.con-barra #prep-detail .mo-name,
  #screen-shop #shop-scheda .mo-name { padding-right: 84px; }
}

/* ==========================================================================
   LA BATTAGLIA SUL TELEFONO

   Su schermo largo il campo e' un duello di profilo: l'eroe a sinistra, i
   mostri a destra, e in mezzo tutto lo spazio che serve. In verticale quella
   stessa scena diventa un eroe alto duecento pixel dentro a trecentosettanta
   di larghezza, con i mostri schiacciati in un angolo, la barra in cima che
   deborda e il cuore della vita sopra alla linguetta del registro.

   Qui si gira di novanta gradi il modo di guardare: i mostri stanno in alto,
   per tutta la larghezza, l'eroe sotto al centro, e le due fasce non si
   toccano. In cima una riga sola di comandi con l'ordine di turno sotto; in
   fondo una barra vera con la vita e le scorte, e sotto ancora la linguetta
   del registro. Il menu del bersaglio non insegue piu' il mostro: sale dal
   basso come tutti gli altri pannelli, largo quanto lo schermo.
   ========================================================================== */

/* La crocetta del menu di attacco esiste solo sul telefono: su desktop il
   menu si chiude uscendoci col puntatore, e sarebbe un tasto in piu' che non
   serve a nessuno. Sta qui sopra alla media query, se no la vincerebbe lei. */
.ua-chiudi { display: none; }

@media (max-width: 780px) {

  /* ---- In cima: comandi su una riga, ordine di turno sulla seconda --------
     Round + tre icone non entrano in 375 px insieme all'ordine di turno: il
     tasto della velocita' finiva tagliato fuori dallo schermo. L'ordine va a
     capo e si prende tutta la larghezza, che e' anche l'unico posto dove i
     ritratti si leggono. */
  .b-top {
    flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 8px 10px 6px;
  }
  /* Round e icone dividono la prima riga, l'ordine di turno prende la
     seconda: senza dirlo l'ordine si infilava in mezzo e le tre icone
     finivano su una terza riga, a galleggiare sopra ai mostri. */
  .bt-left { order: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
  .bt-round, .bt-left .apoc-badge { padding: 6px 11px; }
  .bt-right { order: 2; gap: 5px; padding: 5px 8px; margin-left: auto; }
  .bt-right .icon-btn { width: 34px; height: 32px; }

  .bt-turni { order: 3; flex: 1 0 100%; padding: 4px 8px 5px; align-items: stretch; }
  /* "ORDINE DI TURNO" occupa una riga per dire quello che i ritratti dicono
     da soli: sul telefono quella riga vale un ritratto in piu'. */
  .bt-turni .to-lab { display: none; }
  .turn-order {
    /* Al centro finche' ci stanno; quando sono tanti 'safe' impedisce che il
       primo ritratto finisca tagliato fuori a sinistra, dove non si torna. */
    justify-content: center; justify-content: safe center;
    gap: 5px; min-height: 46px;
    padding: 4px 0 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    /* Serve poterla far scorrere col dito quando i mostri sono tanti. */
    pointer-events: auto;
  }
  .turn-order::-webkit-scrollbar { display: none; }
  .to-chip { width: 40px; height: 40px; }
  .to-chip img { max-width: 32px; max-height: 32px; }

  /* ---- Il campo: mostri sopra, eroe sotto --------------------------------
     Le due fasce sono separate e non si sovrappongono mai, cosi' il dito sa
     sempre cosa sta toccando. I mostri prendono tutta la larghezza: e' quello
     che li fa tornare grandi, perche' la loro misura la decide quanto spazio
     hanno (layoutEnemies li rimpicciolisce solo se non ci stanno). */
  .side-enemies {
    left: 8px; right: 8px; width: auto;
    /* 42% e non meno: la fascia deve essere alta abbastanza da contenere il
       mostro piu' arretrato con la sua targhetta, se no su uno schermo corto
       (640 px) i nomi finivano dietro alla barra dei turni. */
    top: 118px; bottom: 42%; height: auto;
  }
  .side-hero {
    left: 50%; right: auto; width: auto;
    transform: translateX(-50%);
    bottom: calc(126px + var(--safe-b));
    justify-content: center;
  }
  /* Gli alleati si stringono meno: in trecentosettanta pixel due api dietro
     le spalle uscivano dallo schermo. */
  .side-hero .unit:nth-child(2) { margin: 0 0 34px -14px; }
  .side-hero .unit:nth-child(3) { margin: 0 0 56px -40px; }

  /* La scheda "riprendi la scalata" del menu: in 375 px il titolo andava a
     capo finendo sopra alla barra dei piani, le pillole si spezzavano su due
     righe e la freccina restava incollata al bordo. Impilata e centrata sta in
     piedi da sola. */
  #btn-continue {
    flex-direction: column; align-items: center; text-align: center;
    gap: 9px; padding: 14px 14px 16px;
  }
  #btn-continue .gbtn-txt { width: 100%; align-items: center; gap: 8px; }
  #btn-continue .gbtn-title { font-size: 11px; line-height: 1.7; }
  #btn-continue .gbtn-bar { width: 100%; }
  #btn-continue .gbtn-chips { justify-content: center; }
  /* La freccina a destra diceva "si va di la'": impilata finiva da sola sotto
     alle pillole, a indicare il vuoto. Qui la scheda intera e' il tasto. */
  #btn-continue .gbtn-go { display: none; }

  /* Gli stati attivi passano in basso a sinistra, sulla terra vuota accanto
     all'eroe. In alto - dove stanno sullo schermo grande - finivano davanti ai
     mostri e ne coprivano nome e barra della vita, che e' l'unica cosa che
     serve guardare mentre si decide chi colpire. */
  .b-effetti {
    top: auto; bottom: calc(104px + var(--safe-b));
    left: 8px; max-width: 56vw;
  }
  .b-center { display: none; }

  /* ---- In fondo: vita e scorte in una barra, non appoggiate sul niente ---- */
  /* Tre colonne, non tre scatole in fila: il cuore sta al centro dello schermo
     anche quando a destra non c'e' niente da mostrare (senza arco e senza
     mana le due pillole spariscono, e il cuore scivolava di lato). */
  .b-hud {
    left: 0; right: 0; width: auto; transform: none;
    bottom: calc(44px + var(--safe-b));
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 10px;
    padding: 10px 12px 12px;
    background: linear-gradient(transparent, rgba(6, 5, 11, .86) 40%);
    pointer-events: none;
  }
  .b-hud > * { pointer-events: auto; }
  /* Le pillole si mettono in fila invece che in colonna: in orizzontale c'e'
     posto, in verticale no. */
  .hud-side { flex-direction: row; align-items: center; gap: 8px; }
  .hud-side:first-child { justify-content: flex-end; }
  .hud-side:last-child { justify-content: flex-start; }

  /* ---- Il registro: una linguetta larga quanto lo schermo ----------------
     Prima era un riquadro appoggiato in basso a destra, che il cuore della
     vita copriva a meta'. Adesso e' l'ultima riga della schermata, e il
     registro sale da li'. */
  .b-registro {
    /* Sopra alla barra della vita, non sotto: aperto il registro e' l'unica
       cosa che si sta guardando, e vedere il cuore galleggiarci sopra faceva
       sembrare che una delle due si fosse rotta. */
    position: fixed; z-index: 13; left: 0; right: 0; bottom: 0; width: auto;
    border-radius: 14px 14px 0 0; border-width: 1px 0 0;
    background: #0a0812;
    padding-bottom: var(--safe-b);
  }
  .b-registro.chiuso { width: auto; border-radius: 0; }
  .b-reg-tog { padding: 11px 16px; }
  .b-registro .b-log { height: 27vh; }

  /* ---- Il menu del bersaglio: un foglio che sale dal basso ---------------
     Il riquadro con la punta che insegue il mostro e' un attrezzo da mouse:
     col dito copre proprio quello che stai per colpire, e le voci restano
     alte trenta pixel. Qui diventa un foglio a tutta larghezza con la
     crocetta, come il dettaglio dell'oggetto nello zaino. */
  .unit-menu {
    position: fixed; z-index: 80;
    left: 0; right: 0; bottom: 0; top: auto;
    width: auto; min-width: 0; max-width: none;
    padding: 10px 14px calc(16px + var(--safe-b));
    border-width: 1px 0 0; border-radius: 16px 16px 0 0;
    box-shadow: 0 -16px 44px rgba(0, 0, 0, .66);
    animation: uaSu .24s cubic-bezier(.22, .9, .3, 1);
  }
  @keyframes uaSu { from { transform: translateY(101%); } }
  /* Niente punta: non punta piu' a niente. */
  .unit-menu::before, .unit-menu::after { display: none; }

  .ua-head { text-align: left; padding: 4px 92px 10px 2px; font-size: 10px; }
  .ua-scroll { max-height: 46vh; }
  /* Voci da toccare, non da centrare col puntatore. */
  .ua { padding: 13px 12px; margin-bottom: 7px; border-radius: 9px; }
  .ua-ico { font-size: 22px; width: 28px; }

  .ua-chiudi {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 10px; right: 12px;
    width: 40px; height: 34px; padding: 0;
    font-size: 15px; line-height: 1;
    color: rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px;
    cursor: pointer;
  }
}