* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
* { box-sizing: border-box; margin: 0; padding: 0; }

body, html {
    width: 100%;
    height: 100%;
    background-color: #000; /* Bande nere se lo schermo non è 16:9 */
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}

/* Questo contenitore non viene MAI tagliato */
#app-viewport {
    position: relative;
    width: 100vw;
    height: 56.25vw; /* Rapporto 16:9 */
    max-width: 177.78vh; /* Forza il limite verticale */
    max-height: 100vh;
    background-color: #fff;
}

#slide-container, .slide {
    width: 100%; height: 100%; position: relative;
}
#slide-container {
    width: 100%; height: 100%;
    position: relative;
    overflow: hidden;
}


/*.bg-layer {
    width: 100%; height: 100%; object-fit: cover;
}*/

.bg-layer {
    width: 100%; height: 100%;
    object-fit: contain;
}

/* Layer con i testi evidenziati: sfuma sopra la versione "piatta" */
.bg-layer.highlight-layer {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-out;
    pointer-events: none;
    z-index: 5;
}

.bg-layer.highlight-layer.visible { opacity: 1; }

/* Lampo di colore sotto alla fascia che sta per evidenziarsi */
.highlight-flash {
    position: absolute;
    opacity: 0;
    background: rgba(190, 15, 15, 0.14);
    border-radius: 0.8vw;
    pointer-events: none;
    z-index: 4;
}

.highlight-flash.visible {
    animation: bandFlash 1.1s ease-out both;
}

@keyframes bandFlash {
    0%   { opacity: 0; transform: scale(0.96); }
    30%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.02); }
}


.hitbox {
    position: absolute;
    cursor: pointer;
    z-index: 10;
   /* background: rgba(0,0,0,0.3);*/
}

/* Next disabilitato (slide con requireCorrectTag) */
.hitbox.toolbar-click.disabled {
    cursor: not-allowed !important;
    opacity: 0.4;
}











/* Utility per nascondere la toolbar mantenendo il claim centrato */
.v-hidden {
    visibility: hidden !important;
    pointer-events: none;
}

/* --- UTILITY --- */

/*.v-hidden { visibility: hidden; }*/
.hidden { display: none !important; }



/* Modals */
#modal-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 100;
    display: flex; justify-content: center; align-items: center;
}
#modal-content { position: relative; width: 80%; max-height: 80%; }
#modal-img { width: 100%; border-radius: 20px; }

.close-btn {
    position: absolute; top: 10px; right: 20px; font-size: 3rem;
    color: white; cursor: pointer;
}

/* Container della lente */
.lens-container {
    position: absolute;
    z-index: 15;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Animazione pulsante non frenetica: 3 secondi per ciclo */
   /* animation: gentlePulse 3s infinite ease-in-out;*/
    animation: gentlePulse 4s infinite ease-in-out;
}

/* Immagine base della lente */
.lens-img {
    width: 100%;
    height: auto;
    content: url('../assets/lens_off.png');
   /* transition: all 0.3s ease;*/
}

/* Hover: cambiamo l'immagine e aggiungiamo un leggero bagliore */
.lens-container:hover .lens-img {
    content: url('../assets/lens_on.png');
    filter: drop-shadow(0 0 8px rgba(216, 30, 5, 0.5));
    transform: scale(1.05);
    animation-play-state: paused;
}

.lens-container:active {
    transform: scale(0.95);
    animation: none;
}

.close-btn-container {
    position: absolute;
    z-index: 30;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.close-btn-img {
    width: 100%;
    height: auto;
    content: url('../assets/close_off.png');
}

.close-btn-container:hover .close-btn-img {
    content: url('../assets/close_on.png');
    filter: drop-shadow(0 0 8px rgba(216, 30, 5, 0.5));
}

.close-btn-container:hover {
    transform: scale(1.1);
}

.close-btn-container:active {
    transform: scale(0.9);
}

.nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    min-width: 60px;
    transition: opacity 0.2s ease;
}

/* Effetto rollover sui tasti della toolbar */
.nav-btn:hover {
    opacity: 0.7;
}

.nav-btn:active {
    transform: scale(0.95);
}


.lens-container {
    position: absolute;
    z-index: 15;
    cursor: pointer;
    animation: gentlePulse 2.5s infinite ease-in-out;
}

/*  Feedback */
#feedback-container {
    position: absolute;
    bottom: 17%;
    left: 62%;
    transform: translateX(-50%);
    width: 60%;
    z-index: 20;
    pointer-events: none;

    animation: slideUpFade 0.4s ease-out;
}

#feedback-container img { width: 100%; }


.diagnosis-tag {
    position: absolute;
    cursor: pointer;

    font-weight: 600;
    color: #002231;
    font-size: 1.7vw;
    transition: font-size 0.3s ease, color 0.3s ease, opacity 0.3s ease;
    white-space: nowrap;
    z-index: 10;
    animation: gentlePulseWord 4s infinite ease-in-out;
    transform-origin: center;
    -webkit-font-smoothing: antialiased;

    letter-spacing: -0.04em;
    font-stretch: 95%;
}

.diagnosis-tag:hover {
    font-size: 2.1vw;
    color: #000;
    z-index: 50;
    animation-play-state: paused;
}


/* Stato SELEZIONATO (al clic) - Diventa ROSSO di base (per le sbagliate) */
.diagnosis-tag.selected {
    font-size: 2.1vw !important;
    color: #be0f0f !important; /* Rosso */
    animation: none !important;
    z-index: 100;
}

/* Nuova regola: se è selezionata ED è la risposta corretta, diventa BLU */
.diagnosis-tag.selected.is-correct {
    color: #002231 !important;
}


.diagnosis-tag.unselected {
    color: #bdc3c7 !important;
    animation: none !important;
    opacity: 0.5;
}

.diagnosis-tag.unselected:hover {
    color: #7f8c8d !important;
    opacity: 1;
    font-size: 2.1vw;
}






@keyframes gentlePulse {
    0% { transform: scale(1); }
    10% { transform: scale(1.1); }
    20% { transform: scale(1); }
}

@keyframes gentlePulseWord {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes slideUpFade {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}