/* Stile base per tutta la pagina */
    body {
        margin: 0;                /* togli margini di default */
        height: 100vh;            /* altezza = 100% della finestra */
        height: 100dvh;           /* altezza dinamica per mobile */
        background-color: #000; /* sfondo nero */
        color: #0aff0a;         /* colore testo: verde tipo terminale */
        font-size: 16px;
        font-family: monospace;   /* font stile terminale a larghezza fissa */
        overflow: hidden;
    }

    /* Contenitore del terminale. Colonna: output sopra, input sotto */
    #terminal {
        display: none;          /* NASCOSTO all'inizio, si vede solo dopo login */
        flex-direction: column; /* disposizione verticale: sopra screen, sotto input */
        height: 100vh;          /* occupa tutta l'altezza della finestra */
        height: 100dvh;         /* Si adatta se sparisce la barra degli indirizzi */
        padding: 16px;          /* un pò di spazio interno */
        box-sizing: border-box; /* padding incluso nel calcolo dell'altezza */
    }

    /* Area di output che cresce e può scrollare */
    #screen {
        flex: 1;                /* prende tutto lo spazio disponibile */
        overflow-y: auto;       /* se ci sono tante righe, appare lo scroll verticale */
        white-space: pre-wrap;  /* preserva a capo e spazi, ma può andare a capo automaticamente */
    }

    #terminal #screen a {
        color: #3dcdd5;
        text-decoration: none;
        font-weight: 600;
    }

    #terminal #screen a:hover {
        text-decoration: underline;
    }

    #terminal #screen a:visited {
        color: #925bff;
    }

    /* Ogni riga di testo (output) nel terminale */
    .line {
        margin: 4px 0; /* 4px sopra e sotto, 0px destra e sinistra */
        white-space: pre-wrap;
        padding-left: 1.5em;
        position: relative;
    }

    .line.payload-text {
        color: #ffffff;      /* bianco */
    }

    .line.payload-text strong {
        color: #ffffff;      /* anche il grassetto resta bianco */
    }

    .line.error-text {
        color: #ff5555;
    }

    .line::before {
        content: ">";
        position: absolute;
        left: 0;
    }

    .line.no-prompt::before {
        content: "";
    }

    .line strong {
        font-weight: 700;
    }


    /* Barra in basso di input */
    #inputbar {
        display: flex;                  /* simbolo e input sulla stessa riga */
        align-items: center;            /* verticalmente centrati */
        border-top: 1px solid #0a3;   /* linea sopra la barra, per separare */
        padding-top: 8px;               /* spazio di 8px tra il bordo superiore e il contenuto interno */
        margin-top: 8px;                /* spazio di 8px tra la parte superiore della barra e ciò che c'è sopra */
    }

    /* Simbolo del prompt (/) */
    .prompt-symbol {
        margin-right: 8px;
        color: #0a8;        /* verde un pò diverso per differenziare */
    }

    /* Campo di input del comando */
    #prompt {
        flex: 1;                    /* occupa tutto lo spazio restante nella barra */
        background: transparent;    /* nessuno sfondo, usa il nero del body */
        border: none;               /* niente bordo del browser */
        color: #0aff0a;           /* testo verde */
        font: inherit;
        outline: none;              /* nessun contorno blu quando è attivo */
        -webkit-appearance: none;
        border-radius: 0;
    }

    /* Stile per il tasto di invio */
    #prompt-send-btn {
        background: transparent;
        border: none;
        color: #0a3;
        font-size: 20px;
        cursor: pointer;
        padding: 0 8px 0 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s ease;
    }

    #prompt-send-btn:hover,
    #prompt-send-btn:active {
        color: #0eff0e;
    }

    /* Recupero pwd */
    .forgot-password-link {
        color: #0aff0a;
        font-size: 0.75em;
        text-decoration: none;
        opacity: 0.7;
        transition: opacity 0.2s;
    }

    .forgot-password-link:hover {
        opacity: 1;
        text-decoration: underline;
    }

    /* Schermata inserimento codice */
    #code-screen {
        display: none;
    }

    /* Schermata che copre tutta la finestra (login e codice) */
    .full-screen {
        position: fixed;            /* si sovrappone a tutta la finestra */
        inset: 0;                   /* top, right, bottom, left: 0 */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #000;
        gap: 8px;
        height: 100dvh;
    }

    /* Box centrale, riutilizzato da login e codice */
    .box {
        border: 1px solid #0a3;
        padding: 16px 20px;
        max-width: 320px;
        width: 100%;
        box-sizing: border-box;
        background-color: #020202;
    }

    .box h1 {
        margin-top: 0;
        margin-bottom: 12px;
        font-size: 18px;
    }

    .box label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
    }

    .box input {
        width: 100%;
        background: #000;
        border: 1px solid #0a3;
        color: #0aff0a;
        padding: 10px;              /* Un po' più comodo da cliccare col dito */
        font-family: monospace;
        font-size: 16px !important; /* FORZA 16px per evitare zoom su iOS */
        outline: none;
        box-sizing: border-box;
        margin-top: 4px;
        border-radius: 0;           /* Niente angoli tondi su mobile */
        -webkit-appearance: none;   /* Rimuove stile nativo iOS */
    }

    /* Correzione specifica per le checkbox nel modulo registrazione */
    .checkbox-group input[type="checkbox"] {
        width: auto !important;      /* Rimuove il 100% di larghezza */
        height: auto !important;     /* Mantiene le proporzioni quadrate */
        margin-top: 0;               /* Allinea meglio al testo */
        cursor: pointer;
        -webkit-appearance: checkbox; /* Forza l'aspetto standard della spunta su iOS/Mac */
        appearance: checkbox;
    }

    /* Opzionale: rende l'intera riga della privacy più facile da cliccare */
    .checkbox-group label {
        display: flex !important;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        width: fit-content; /* Impedisce al label di coprire zone vuote */
    }

    /* Fix per allineamento Checkbox e Testo */
    .checkbox-group label {
        display: flex !important;      /* Allinea checkbox e testo sulla stessa riga */
        align-items: flex-start;       /* Allinea la spunta in alto rispetto al testo */
        gap: 10px;                     /* Spazio tra quadratino e testo */
        margin-bottom: 12px;           /* Distanza tra le due righe di consenso */
        cursor: pointer;
        width: 100%;
    }

    .checkbox-group input[type="checkbox"] {
        width: 18px !important;        /* Dimensione fissa per il quadratino */
        height: 18px !important;
        flex-shrink: 0;                /* Impedisce alla checkbox di schiacciarsi */
        margin-top: 2px;               /* Centratura ottica con la prima riga di testo */
    }

    .checkbox-group span {
        font-size: 13px;               /* Testo leggermente più piccolo per stare nel box */
        line-height: 1.4;              /* Migliora la leggibilità se il testo va a capo */
        white-space: normal;           /* Permette al testo di andare a capo correttamente */
    }

    /* Stile specifico per l'inserimento della Parola d'Ordine */
    #registration-code {
        text-transform: uppercase; /* Tutto maiuscolo */
        letter-spacing: 3px;       /* Lettere più larghe per enfasi */
        font-weight: bold;
        text-align: center;        /* Testo al centro (molto scenico) */
    }

    .box button {
    margin-top: 12px;
    width: 100%;
    padding: 8px 10px;
    background-color: #0a3;
    border: none;
    color: #0eff0e;
    font: inherit;
    cursor: pointer;
    }

    .box button:hover {
        background-color: #0c5;
    }

    .error {
        margin-top: 8px;
        color: #ff5555;   /* rosso per errore */
        font-size: 13px;
        min-height: 16px;   /* spazio riservato anche quando vuoto */
    }

    .secret-text {
        color: #ffea00;
    }

    /* effetto blink */
    @keyframes blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }

    /* Riga dedicata alla visualizzazione del timer */
    .timer-line {
        color: #0aff0a;
        font-weight: bold;
    }

    /* Inline per output multimediali */
    .terminal-media {
        max-width: 100%;
        border-radius: 10px;
        margin-top: 8px;
    }

    .terminal-audio,
    .terminal-video {
        width: 100%;
    }

    /* Contenitore principale a tutto schermo */
    #map-interface-container {
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 100vh;      /* forza l'altezza al 100% dello schermo */
        height: 100dvh;     /* altezza dinamica per mobile */
        box-sizing: border-box;
        padding: 16px;
        background-color: #000;
        color: #fff;
        overflow-y: auto;
    }

    /* Area dedicata all'immagine della mappa */
    .map-visual {
        flex: 1;                     /* prendi tutto lo spazio sopra i controlli */
        min-height: 0;               /* fondamentale per impedire che scavalchi i margini se l'immagine è gigante */
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        margin-bottom: 20px;
    }

    /* Regole per l'immagine vera e propria */
    .map-visual img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: left top; /* Fondamentale: impedisce all'immagine di fluttuare al centro del suo spazio */
    }

    /* Area dei controlli in basso */
    .map-console {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Allinea l'intero blocco a sinistra */
        justify-content: flex-start;
        width: 100%;
    }

    /* --- AREA MESSAGGI MAPPA --- */
    .map-message {
        font-family: monospace;
        font-size: 16px;
        color: #0aff0a;
        margin-bottom: 20px;
        text-align: left; /* Testo a sinistra */
        min-height: 2.5em;
    }

    /* --- FORM MAPPA --- */
    .map-input-row {
        display: flex;
        flex-direction: row;
        gap: 15px; /* Spazio tra la barra piccola e quella grande */
        width: 100%;
    }

    /* --- CAMPI DI INPUT MAPPA (Stile Generale) --- */
    .map-form input[type="text"] {
        background: #000;
        border: 1px solid #0a3;
        color: #0aff0a;
        font-family: monospace;
        font-size: 16px !important;
        padding: 10px;
        outline: none;
        box-sizing: border-box;
        border-radius: 0;
        -webkit-appearance: none;
        transition: border-color 0.2s;
    }

    .map-form input[type="text"]:focus {
        border-color: #0aff0a;
    }

    .map-form input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 30px black inset !important;
        -webkit-text-fill-color: #0aff0a !important;
    }

    /* --- SPECIFICHE PER LE DUE BARRE --- */
    .map-form .input-coord {
        width: 60px; /* Larghezza fissa e piccola */
        flex-shrink: 0; /* Evita che si schiacci ulteriormente su schermi piccoli */
        text-align: center; /* Centra esteticamente il valore (es. "B2") */
        text-transform: uppercase; /* Forza visivamente il maiuscolo mentre si digita */
    }

    .map-form .input-text {
        flex-grow: 1; /* La barra di testo occupa tutto lo spazio orizzontale rimanente */
        width: 100%;
    }

    /* --- BOTTONI MAPPA --- */
    .map-actions {
        display: flex;
        gap: 20px;
        margin-top: 10px;
        width: 100%;
        justify-content: flex-start; /* Sposta i bottoni a sinistra */
    }

    .map-actions button {
        font-family: monospace;
        font-size: 16px;
        padding: 8px 24px;
        cursor: pointer;
        text-transform: uppercase;
        border-radius: 0;
        transition: all 0.2s ease;
    }

    /* Bottone Conferma: richiama lo stile di .box button */
    .map-actions button.btn-confirm {
        background-color: #0a3;
        border: 1px solid #0a3;
        color: #0eff0e;
    }

    .map-actions button.btn-confirm:hover {
        background-color: #0c5;
    }

    /* Bottone Esci: richiama lo stile di .error */
    .map-actions button.btn-exit {
        background-color: transparent;
        border: 1px solid #ff5555;
        color: #ff5555;
    }

    .map-actions button.btn-exit:hover {
        background-color: #ff5555;
        color: #000;
    }