/* ─────────────────────────────────────────────────────────────────────────
   Impossible Battle — Lobby su telefono e tablet: quattro pagine orizzontali.

   TUTTO qui dentro vive sotto .fa-mobile, che viene messo su <html> da
   js/lobby_mobile.js solo sui dispositivi a tocco. Su PC la classe non
   compare mai e questo foglio non cambia un pixel: era una richiesta
   esplicita, "sul PC il gioco deve rimanere così".

   L'impaginazione non riscrive il markup della lobby: le pagine sono
   contenitori vuoti dove il JavaScript SPOSTA i pannelli che esistono già.
   Così gli identificativi, gli onclick e tutta la logica restano quelli,
   e una modifica alla lobby non va rifatta due volte.
   ───────────────────────────────────────────────────────────────────────── */

.fa-mobile, .fa-mobile body {
    height: 100%;
    overflow: hidden;              /* a scorrere sono le pagine, non il documento */
}

.fa-mobile body {
    padding: 0 !important;
    margin: 0;
}

/* Il logo in cima alla lobby: via.
   In orizzontale su un telefono l'altezza è la risorsa scarsa, e un
   banner largo quanto lo schermo si mangiava la prima schermata intera
   prima che si vedesse un solo comando. Il logo resta dove serve
   davvero: sulla schermata di consenso, che è a tutto schermo. */
.fa-mobile .game-logo { display: none !important; }

/* ── Impalcatura ───────────────────────────────────────────────────────── */

.fa-mobile .fa-pager {
    position: fixed;
    inset: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;     /* il dito lascia sempre una pagina intera */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;    /* niente "torna indietro" del browser */
    scrollbar-width: none;
    padding-bottom: 46px;              /* spazio per la barra dei segnaposto */
    box-sizing: border-box;
}
.fa-mobile .fa-pager::-webkit-scrollbar { display: none; }

.fa-mobile .fa-page {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;          /* una pagina per gesto, non tre */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px 16px;
    box-sizing: border-box;
}

.fa-mobile .fa-page-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: .74rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #00d4ff;
    text-align: center;
    margin: 2px 0 10px;
    opacity: .75;
}

/* ── Barra dei segnaposto ──────────────────────────────────────────────── */

.fa-mobile .fa-dots {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(to top, rgba(0,6,12,.96), rgba(0,6,12,.72));
    border-top: 1px solid rgba(0,212,255,.18);
    z-index: 50;
    /* Sui telefoni con la tacca o la barra gesti in basso */
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-sizing: content-box;
}

.fa-mobile .fa-dot {
    appearance: none;
    border: 1px solid rgba(0,212,255,.3);
    background: rgba(0,0,0,.4);
    color: #7f93a6;
    font-family: 'Oswald', sans-serif;
    font-size: .62rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 11px;
    border-radius: 20px;
    cursor: pointer;
    transition: color .18s, border-color .18s, background .18s;
    white-space: nowrap;
}
.fa-mobile .fa-dot.attiva {
    color: #001018;
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    border-color: #00d4ff;
    font-weight: 700;
}

/* ── Adattamenti dei pannelli esistenti ────────────────────────────────── */

.fa-mobile .panel {
    padding: 13px 12px;
    border-radius: 11px;
    margin-bottom: 10px;
}

/* I titoli dorati sono tarati a 32px per il desktop: in orizzontale su un
   telefono occupano due righe a testa e spingono i comandi fuori vista. */
.fa-mobile .panel-title,
.fa-mobile .pop-title,
.fa-mobile .weight-title,
.fa-mobile .sec-label,
.fa-mobile .slc-name {
    font-size: 19px !important;
    line-height: 1.15 !important;
}

.fa-mobile .lobby-grid { display: block; }

/* La barra delle schede NAVETTA/LEGIONI/SOLO non serve più: a cambiare
   schermata ora è il dito, e la barra dei segnaposto in basso fa lo stesso
   mestiere meglio. Tenerla sarebbe peggio che inutile — switchTab() toglie
   la classe .active a TUTTI i .tab-panel e la ridà solo a quello scelto:
   toccando "Legioni" la pagina Navetta, che ormai vive fuori dalle schede,
   sarebbe diventata bianca senza alcun modo di riaverla. */
.fa-mobile .tab-bar { display: none !important; }

/* Un pannello scheda finito dentro una pagina è sempre visibile, con o
   senza .active: la pagina stessa decide cosa si vede. */
.fa-mobile .fa-page .tab-panel { display: block !important; }

/* La barra audio e lo stato online stanno in fondo alla pagina Gioca:
   servono di rado, e in cima rubavano la riga più preziosa dello schermo. */
.fa-mobile .audio-quick {
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 0;
    font-size: .8rem;
}

/* ── Quando il telefono è ancora in verticale ──────────────────────────── */
/* Il blocco orientamento non è concesso da tutti i browser (iOS Safari non
   lo espone affatto). Se la rotazione non si può imporre, si chiede. */

.fa-mobile .fa-ruota {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: #02060b;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
    padding: 28px;
    font-family: 'Oswald', sans-serif;
    color: #dfe8f0;
}
.fa-mobile.fa-verticale .fa-ruota { display: flex; }

.fa-mobile .fa-ruota .icona {
    width: 74px; height: 74px;
    color: #00d4ff;
    animation: faRuotaGira 2.2s ease-in-out infinite;
}
@keyframes faRuotaGira {
    0%, 42%   { transform: rotate(0deg); }
    58%, 100% { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) {
    .fa-mobile .fa-ruota .icona { animation: none; transform: rotate(-90deg); }
}
.fa-mobile .fa-ruota .testo {
    font-size: 1.05rem;
    letter-spacing: 1px;
    line-height: 1.5;
    max-width: 320px;
}