/* --- RESET E BASE --- */
body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden; font-family: sans-serif; background-color: #000;
}

.main-container { position: relative; width: 100%; height: 100%; }
.hidden { display: none !important; }

/* --- OVERLAY UI GENERICA --- */
.ui-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    z-index: 100; text-align: center; color: white;
}

#ui-start { background: linear-gradient(135deg, #1a1a1a 0%, #000 100%); }
#ui-loading { background-color: rgba(0,0,0,0.85); z-index: 110; }
#ui-scanner { flex-direction: column; background-color: #000; z-index: 105; }

/* --- SCANNER QR --- */
#reader {
    width: 80%; max-width: 400px; 
    border-radius: 15px; overflow: hidden; border: 2px solid #fff;
    background-color: #111;
}

#reader video {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    z-index: 1 !important;
}

/* --- VIDEO CAMERA BACKGROUND (MindAR) --- */
body > video {
    z-index: 40 !important;
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover !important;
}

/* --- CANVAS A-FRAME --- */
canvas.a-canvas {
    z-index: 60 !important;
    position: absolute !important;
    background-color: transparent !important;
}

.scanner-instructions { margin-top: 20px; font-weight: bold; }

/* --- BOTTONI COORDINATI (Stile Principale) --- */
.btn-main {
    margin-top: 25px; padding: 15px 40px;
    background-color: #ff4081; /* Rosa Acceso */
    color: white; border: none;
    border-radius: 30px; font-size: 1.2em; font-weight: bold;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(255,64,129,0.4); /* Ombra Rosa */
    transition: transform 0.1s, background-color 0.1s;
}

.btn-main:active { transform: scale(0.95); background-color: #e91e63; /* Rosa più scuro al tocco */ }

.btn-secondary {
    font-size: 10px !important; /* Font più piccolo per il secondo bottone */
    margin-top: 25px; padding: 15px 40px;
    background-color: #333; /* Grigio Scuro */
    color: white; border: none;
    border-radius: 30px; font-size: 1.2em; font-weight: bold;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(140, 140, 140, 0.4); /* Ombra Rosa */
    transition: transform 0.1s, background-color 0.1s;
}

.ui-instructions {
   background-color: black !important;
}

/* --- NUOVO: TASTO RELOAD COORDINATO --- */
#btn-reload {
    position: fixed;
    top: 20px; /* Posizione in alto */
    right: 20px;
    z-index: 300; /* Sopra la scena AR */
    
    /* Copiamo lo stile .btn-main, adattando dimensioni e font */
    padding: 10px 20px; /* Più piccolo rispetto a INIZIA */
    background-color: #ff4081; /* Stesso Rosa */
    color: white; border: none;
    border-radius: 50px; /* Completamente arrotondato */
    font-size: 14px; /* Font più piccolo per l'angolo */
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255,64,129,0.3); /* Ombra simile ma più leggera */
    transition: transform 0.1s, background-color 0.1s;
}

#btn-reload:active {
    transform: scale(0.95); /* Stessa animazione di INIZIA */
    background-color: #e91e63; /* Stesso rosa scuro al tocco */
}

/* --- AR SCENE CONTAINER --- */
#ar-scene-container, a-scene {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 50; background: none !important;
    background-color: transparent !important;
}

/* --- DEBUG LOG (Ora Invisibile) --- */
#debug-log {
    /* Manteniamo le proprietà per non rompere il posizionamento, ma lo nascondiamo */
    display: none !important; /* Rende il log invisibile e rimuove l'ingombro */
}

/* --- SLIDERS (Ancora utilizzabili via JS se necessario) --- */
#ui-debug-sliders {
    position: fixed; bottom: 90px; left: 10px; right: 10px;
    background: rgba(0,0,0,0.8); color: white; padding: 10px;
    border-radius: 10px; z-index: 150; font-size: 11px;
}
.slider-group { display: flex; justify-content: space-between; margin-bottom: 5px; }
.btn-copy { width: 100%; margin-top: 5px; padding: 5px; cursor: pointer; }
.border-top { border-top: 1px solid #555; padding-top: 5px; margin-top: 5px; }