body {
    font-family: sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align top */
    min-height: 100vh;
     color: #333;
}

#app-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Explicitly set auto margins for horizontal centering */
    margin: 20px auto; /* 20px top/bottom, auto left/right */
    width: 90%; /* Responsive width */
    max-width: 500px; /* Max width for larger screens */
    text-align: center; /* Center inline content/text */
    box-sizing: border-box; /* Consistent box model */
}

/* Stili specifici per la pagina organizzatori */
.organizer-page #app-container {
    max-width: 1000px; /* O la larghezza che preferisci, es: 1200px, 90% */
    /* Puoi aggiungere altri override qui se necessario */
}

/* Stili per rendere la tabella scorrevole su mobile nella pagina organizzatori */
.organizer-page .table-wrapper {
    width: 100%; /* Occupa tutta la larghezza disponibile */
    overflow-x: auto; /* Aggiunge la barra di scorrimento ORIZZONTALE se necessario */
    -webkit-overflow-scrolling: touch; /* Migliora lo scrolling su iOS */
    margin-bottom: 1em; /* Aggiunge un po' di spazio sotto */
}

/* Opzionale: Assicura che la tabella non collassi */
.organizer-page .table-wrapper table {
    min-width: 600px; /* Imposta una larghezza minima per la tabella,
                       così da forzare lo scroll su schermi più piccoli.
                       Aggiusta questo valore in base al contenuto! */
    width: 100%; /* Fa sì che la tabella provi comunque ad occupare lo spazio */
}

/* Puoi anche usare una media query se vuoi applicare lo scroll
   solo sotto una certa larghezza di schermo */
/* @media (max-width: 760px) {
    .organizer-page .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .organizer-page .table-wrapper table {
        min-width: 600px; // O la larghezza minima necessaria
    }
} */

/* Gestione Visibilità Viste */
.view {
    display: none; /* Nascondi tutte le viste per default */
    width: 100%;
    animation: fadeIn 0.5s; /* Semplice animazione */
}
.view.active {
    display: block; /* Mostra solo la vista attiva */
}

/* --- NUOVE REGOLE PER STAGED UI in #welcome-view --- */
#initial-setup {
    display: block; /* Visibile di default */
    /* Aggiungi margini se necessario per spaziatura */
    margin-bottom: 20px;
    padding-bottom: 10px; /* Spazio prima eventuale separatore */
}

#main-actions {
    display: none;  /* Nascosto di default */
    /* Aggiungi margini/padding se necessario */
     margin-top: 20px;
     padding-top: 20px;
     border-top: 1px solid #eee; /* Separatore opzionale */
}

/* Quando l'app è "avviata" (classe aggiunta a #app-container) */
#app-container.app-started #initial-setup {
    display: none; /* Nasconde setup */
}

#app-container.app-started #main-actions {
    display: block; /* Mostra azioni principali */
}
/* --- FINE NUOVE REGOLE --- */


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

/* Stili Generali Elementi */
h1, h2 {
    color: #4a148c; /* Viola scuro stile magico */
}

/* Riduci la dimensione del titolo nella vista iniziale */
#welcome-view h1 {
    font-size: 1.6em; /* Prova questo valore, puoi aggiustarlo */
    /* ... altri commenti font-size ... */
}

/* Stili Welcome View per input nome */
#welcome-view #initial-setup label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}
#welcome-view #initial-setup input[type="text"] {
     /* Stili già presenti per input si applicano, ma puoi specificare qui */
     margin-bottom: 15px !important; /* Forza un po' di spazio sotto */
     width: 80%; /* Adatta larghezza */
     max-width: 300px;
}


button {
    background-color: #7b1fa2; /* Viola */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    margin: 5px;
    transition: background-color 0.3s ease;
    /* --- NUOVE REGOLE PER UNIFORMARE --- */
    min-width: 140px;  /* Larghezza minima per tutti (aggiusta il valore se necessario) */
    text-align: center; /* Assicura che il testo sia centrato */
    display: inline-block; /* Necessario per min-width e allineamento */
    box-sizing: border-box; /* Include padding/border nella larghezza totale */
    vertical-align: middle; /* Allinea meglio se ci sono icone/testo */
}

button:hover {
    background-color: #4a148c; /* Viola più scuro */
}

button.back-button {
     /* background-color: #aaa; */ /* grigio */
     background-color: transparent;  /* Sfondo trasparente */
     border: 1px solid #7b1fa2;     /* Bordo viola (spessore 1px, puoi usare 2px se preferisci più marcato) */
     color: #7b1fa2;                /* Testo viola */
     /* Applica min-width generale o uno specifico se vuoi */
     /* min-width: 140px; */
     /* Oppure rendilo più piccolo */
     min-width: 100px;
     width: auto;
     max-width: none;
     display: inline-block;
}
button.back-button:hover,
button.back-button:focus {
     /* background-color: #888; */ /* grigio */
     background-color: #7b1fa2;  /* Riempimento viola al passaggio del mouse/focus */
     color: white;               /* Testo diventa bianco */
     border-color: #7b1fa2;      /* Opzionale: assicura che il bordo sia dello stesso colore */
}

/* Pulsanti piccoli come i toggle layer o opzioni indovinello mappa */
.layer-toggle-button,
.layer-riddle-option,
#text-fallback-controls button {
    min-width: 80px; /* Larghezza minima più piccola per questi */
    width: auto; /* Lascia che la larghezza si adatti al contenuto + padding */
    max-width: none;
    padding: 6px 10px; /* Padding leggermente ridotto */
    font-size: 0.9em; /* Font leggermente più piccolo */
    display: inline-block; /* Manteniamo inline-block */
}

/* Media query per smartphone (se i pulsanti a % diventano troppo larghi) */
@media (max-width: 400px) {
    #result-view button,
    #collection-view button#goto-scan-button,
    #welcome-view #main-actions button {
        width: 90%; /* Occupa più spazio su schermi molto piccoli */
    }
}

input[type="number"],
input[type="text"] {
    padding: 8px;
    margin: 10px auto; /* Centra se display block */
    display: block; /* Assicura sia blocco per centrare con margine */
    border: 1px solid #ccc;
    border-radius: 4px;
    width: calc(100% - 20px); /* Considera padding */
    max-width: 200px;
    box-sizing: border-box; /* Include padding/border nella larghezza */
}

hr {
    border: 0;
    height: 1px;
    background-color: #eee;
    margin: 20px 0;
}

/* Stili Specifici Viste */
#riddle-options button {
    display: block;
    width: 80%;
    margin: 10px auto; /* Centra i pulsanti */
    background-color: #9c27b0; /* Altro viola */
}
#riddle-options button:hover {
     background-color: #7b1fa2;
}

.error-message {
    color: #d32f2f; /* Rosso per errori */
    font-weight: bold;
    margin-top: 10px;
}

#result-image-area img { /* Stile immagine premio */
    max-width:80%;
    height:auto;
    margin-top:10px;
    border: 1px solid #ccc;
    display: block; /* Necessario per centrare con margin auto */
    margin-left: auto;
    margin-right: auto;
}

#collection-list {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

#collection-list li {
    background-color: #e1bee7; /* Viola chiaro */
    padding: 8px;
    margin-bottom: 5px;
    border-radius: 4px;
    color: #4a148c;
     cursor: pointer; /* Già presente per modal */
     transition: background-color 0.2s ease; /* Già presente */
}
#collection-list li:hover {
     background-color: #d1c4e9; /* Già presente */
}

#event-logo {
    max-width: 80%;
    width: 160px; /* Manteniamo larghezza fissa? */
    height: auto;
    margin-bottom: 5px;
    margin-top: 5px;
}


/* Stili per il Modal (popup immagine) */
/* ... (Stili Modal come prima, invariati) ... */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); padding-top: 60px; box-sizing: border-box; }
.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 85%; max-width: 400px; text-align: center; position: relative; border-radius: 8px; }
#modal-image { max-width: 100%; height: auto; max-height: 70vh; display: block; margin: 0 auto 10px auto; }
#modal-caption { font-weight: bold; color: #333; }
.modal-close { color: #aaa; position: absolute; top: 10px; right: 15px; font-size: 28px; font-weight: bold; line-height: 1; }
.modal-close:hover, .modal-close:focus { color: black; text-decoration: none; cursor: pointer; }


/* Stili Scanner QR */
#qr-reader-placeholder {
    width: 90%;
    max-width: 400px;
    height: 300px;
    border: 1px solid grey;
    margin: 15px auto;
    background-color: #eee;
    overflow: hidden;
    position: relative;
}
#qr-reader-loading { padding-top: 50px; text-align: center; color: #666; }


/* Stili MAPPA */
#leaflet-map-container {
    border: 1px solid #ccc;
    margin: 15px auto; /* Centra contenitore mappa se ha larghezza < 100% */
    border-radius: 4px;
    width: 100%; /* Occupa tutta larghezza container */
    box-sizing: border-box;
}

/* Filtro CSS per l'effetto seppia/pergamena sul layer delle mappe */
.leaflet-tile-pane {
    /* Valore attuale scelto dall'utente */
    filter: sepia(25%) brightness(100%) contrast(100%) saturate(80%);
}

#map-view { padding: 10px 0; }
#map-view h2 { text-align: center; }
#map-view hr { border: 0; height: 1px; background-color: #eee; margin: 20px 10%; }
#map-view .back-button { display: block; margin: 10px auto 0 auto; }

/* Stili Controlli Vocali/Testo */
#voice-controls, #text-fallback-controls {
    padding: 10px;
    margin-top: 10px;
}
#text-fallback-controls label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9em;
    color: #333;
}
#text-fallback-controls input[type="text"]{
    margin-bottom: 10px; /* Spazio prima del bottone */
}
#text-fallback-controls button {
    /* Usa stile bottone standard */
}
#text-fallback-status { /* Messaggio errore fallback */
    min-height: 1.2em;
    font-style: italic;
    color: #d32f2f;
    margin-top: 5px;
    font-size: 0.9em;
}


/* Stili per le icone marker DivIcon */
.map-marker-icon-only {
    background: none; border: none; text-align: center; line-height: 20px; /* Esempio */
}

.map-marker-icon-only i.fa-solid { color: black; font-size: 18px; }
.map-marker-icon-only.secret-icon i.fa-solid { /* ... */ }
.map-marker-icon-only.start-icon i.fa-solid { color: #f4d4a8; }
.map-marker-icon-only.clue-icon i.fa-solid { /* color: #8B4513; */ }
.map-marker-icon-only.qr-icon i.fa-solid { /* color: #7b1fa2; */ } 
.map-marker-icon-only.base-icon i.fa-solid { color: #f4d4a8; }

/* Contenitore principale generato da L.DivIcon per icona+label */
.map-marker-with-label {
    background: none; /* Rimuove sfondi/bordi di default di DivIcon */
    border: none;
    /* La dimensione è controllata da iconSize in JS, deve essere abbastanza grande
       per contenere icona + etichetta. Qui definiamo solo lo stile interno. */
    text-align: center; /* Aiuta a centrare, ma il flex/absolute sotto è più preciso */
}

/* Wrapper interno per controllare meglio il layout di icona e label */
.marker-icon-wrapper {
   position: relative; /* Necessario per posizionare la label in modo assoluto rispetto ad esso */
   width: 100%; /* Occupa la larghezza definita da iconSize[0] */
   height: 100%; /* Occupa l'altezza definita da iconSize[1] */
   display: flex;
   flex-direction: column; /* Mette icona sopra e (potenzialmente) label sotto nel flusso normale */
   align-items: center; /* Centra l'icona orizzontalmente */
   /* justify-content: flex-start; */ /* Allinea l'icona in alto */
}

/* Stile dell'icona (es. <i> o <svg>) dentro al wrapper */
.map-marker-with-label .marker-icon-wrapper > i.fa,
.map-marker-with-label .marker-icon-wrapper > svg,
.map-marker-with-label .marker-icon-wrapper > img {
    /* position: absolute; */
    /* bottom: 0; */ /* Allinea l'icona al fondo del wrapper */
    left: 50%;
    transform: translateX(-50%); /* Centra orizzontalmente */
    /* Lascia che l'icona prenda la sua dimensione o impostala qui se necessario */
    /* Esempio: font-size: 20px; line-height: 20px; */
    margin-bottom: 1px; /* Piccolo spazio tra icona e inizio etichetta (se non usi position:absolute) */
}

/* Stile e posizionamento dell'etichetta */
.map-label {
    position: absolute; /* Posizionamento relativo a .marker-icon-wrapper */
    /* top: 0; */ /* Allinea l'etichetta all'inizio del wrapper */
    bottom: 3px; /* Posizionala in basso nel contenitore. Aggiusta questo valore se necessario */
    left: 50%; /* Centra orizzontalmente */
    transform: translateX(-50%); /* Rifinisce la centratura orizzontale */
    
    /* --- NUOVE REGOLE PER SFONDO --- */
    background-image: url('images/ribbon_hp_1.png'); /* Adatta il percorso! */
    background-size: contain; /* 'contain' o '100% 100%' o 'cover' - prova quale funziona meglio */
    background-repeat: no-repeat;
    background-position: center bottom; /* Posiziona lo sfondo */
    padding: 2px 8px 4px 8px; /* ESEMPIO: Spazio interno (sopra, dx, sotto, sx) - aggiusta! */
    min-height: 16px; /* ESEMPIO: Altezza minima per far vedere lo sfondo */
    width: auto; /* Lascia che la larghezza si adatti al testo + padding */
    min-width: 50px; /* ESEMPIO: Larghezza minima */
    /* --- FINE NUOVE REGOLE --- */
    
    width: 60px; /* Larghezza dell'etichetta (uguale a iconSize[0] dell'esempio JS) */
    font-size: 9px; /* Dimensione testo piccola */
    font-weight: bold;
    color: #333; /* Colore testo scuro */
    /* Ombra per migliore leggibilità sulla mappa */
    text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF;
    white-space: nowrap; /* Evita che il testo vada a capo */
    overflow: hidden; /* Nasconde il testo che esce dalla larghezza */
    text-overflow: ellipsis; /* Mostra ... se il testo è troppo lungo */
    text-align: center;
    line-height: 1.1; /* Interlinea */
    /* Impedisce all'etichetta di intercettare click/eventi del mouse destinati alla mappa/marker */
    pointer-events: none;
    box-sizing: border-box;
    /* padding: 0 2px; */ /* Padding orizzontale se necessario */
}

/* Seleziona e ruota specificamente l'icona dei passi
   (SOSTITUISCI 'fa-footsteps' con la classe CSS corretta della tua icona!)
   SOLO quando è dentro un marker con etichetta (.map-marker-with-label) */
.map-marker-with-label .marker-icon-wrapper > i.footsteps-nord { /* <-- CAMBIA fa-footsteps! */
    display: inline-block; /* Spesso necessario per applicare 'transform' a elementi inline come <i> */
    transform: rotate(-90deg); /* Ruota di -90 gradi (senso antiorario). Usa 90deg per senso orario o altri valori. */

    /* AGGIUSTAMENTI OPZIONALI:
       A volte, dopo la rotazione, potresti dover aggiustare leggermente
       la posizione verticale o orizzontale per un allineamento perfetto.
       Prova a decommentare e modificare questi se necessario: */
    /* position: relative; */
    /* top: 1px; */
    /* left: -1px; */
}

.map-marker-with-label .marker-icon-wrapper > i.footsteps-sud {
    display: inline-block;
    transform: rotate(90deg);
}

.map-marker-with-label .marker-icon-wrapper > i.footsteps-ovest {
    display: inline-block;
    transform: rotate(-180deg);
}

.map-marker-with-label .marker-icon-wrapper > i.footsteps-est {
    display: inline-block;
     transform: rotate(0deg);
}

.map-marker-with-label .marker-icon-wrapper > i.footsteps-nord-ovest {
    display: inline-block;
    transform: rotate(-135deg);
}

.map-marker-with-label .marker-icon-wrapper > i.footsteps-nord-est {
    display: inline-block;
    transform: rotate(-45deg);
}

.map-marker-with-label .marker-icon-wrapper > i.footsteps-sud-ovest {
    display: inline-block;
    transform: rotate(135deg);
}

.map-marker-with-label .marker-icon-wrapper > i.footsteps-sud-est {
    display: inline-block;
    transform: rotate(45deg);
}

/* --- End Styles for Markers with Labels --- */

/* Stile per il contenitore dei pulsanti toggle */
#map-layer-toggles {
    display: flex; /* Opzionale: per mettere i pulsanti in linea */
    flex-wrap: wrap; /* Opzionale: manda a capo se non ci stanno */
    align-items: center;
    justify-content: center; /* Opzionale: centra i pulsanti */
    gap: 5px; /* Opzionale: spazio tra i pulsanti */
    padding: 10px 5px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-top: 10px;
}

/* Stile base per i pulsanti toggle dei layer */
.layer-toggle-button {
    font-size: 0.8em; /* Più piccoli dei pulsanti principali */
    padding: 4px 8px;
    margin: 2px;
    border: 1px solid #ccc;
    background-color: #f0f0f0; /* Sfondo neutro */
    color: #555;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s, border-color 0.2s;
}

.layer-toggle-button:hover {
    background-color: #e0e0e0;
    border-color: #bbb;
}

/* Stile per il pulsante quando il layer associato è ATTIVO/VISIBILE */
.layer-toggle-button.active-layer {
    background-color: #e1bee7; /* Viola chiaro (o un colore che preferisci) */
    border-color: #ba68c8;
    color: #4a148c; /* Viola scuro */
    font-weight: bold;
}

/* Stili opzionali per la sezione Parole d'Ordine nella Collezione */
#keywords-section {
    margin-top: 20px;
}

/* #keywords-section h4 {
    color: #6a1b9a;
    margin-bottom: 10px;
    font-size: 1.1em;
    text-align: center;
} */

#keywords-list li {
    background-color: #f3e5f5; /* Sfondo viola molto chiaro */
    border-left: 3px solid #ab47bc; /* Barra laterale viola */
    padding: 6px 12px;
    margin-bottom: 5px;
    border-radius: 4px;
    font-style: italic;
    color: #311b92; /* Viola scuro per testo */
    word-wrap: break-word; /* Manda a capo parole lunghe se necessario */
}

/* Stili per migliorare lo scrolling della mappa su mobile */
@media (max-width: 600px) { /* Applica solo su schermi fino a 600px di larghezza */

    #app-container {
        max-width: 500px;
    }

    #map-view {
        /* Opzionale: Riduci un po' il padding interno della vista mappa se serve */
        /* padding-left: 5px; */
        /* padding-right: 5px; */
    }

    #map-welcome {
        font-size: 12px;
    }

    #leaflet-map-container {
        /* Riduci leggermente l'altezza della mappa per dare più spazio ai controlli */
        height: 350px; /* Prova questo valore, puoi ridurlo ulteriormente (es. 300px) */
        /* Oppure usa viewport height: */
        /* height: 50vh; */ /* Occupa il 50% dell'altezza dello schermo */
    }

    #map-controls-container {
        max-height: calc(100vh - 400px); /* Altezza massima = altezza schermo meno circa l'altezza della mappa e altri elementi sopra */
        /* Se hai ridotto #leaflet-map-container a 350px, potresti usare: */
        /* max-height: calc(100vh - 400px); */ /* Aggiusta il valore 400px in base all'altezza effettiva della mappa + titoli */
        /* Se usi vh per la mappa (es. 50vh), prova: */
        /* max-height: 45vh; */ /* Lascia un po' di spazio per titoli/padding */

        overflow-y: auto;  /* Aggiunge la barra di scorrimento VERTICALE SOLO se necessario */
        padding: 10px 5px; /* Aggiungi un po' di padding interno a questo contenitore */
        border-top: 1px solid #ddd; /* Opzionale: separatore visivo sopra i controlli */
        margin-top: 10px; /* Spazio tra mappa e controlli */
    }

    /* Assicurati che l'ultimo bottone non sia tagliato dal padding */
    #map-controls-container .back-button {
        margin-bottom: 10px; /* Aggiungi un po' di margine sotto l'ultimo bottone */
    }

    #map-view h2 { margin-top: 0px; margin-bottom: 0px; }
}