/* ===== POV.CSS — Effets visuels vue à la première personne ===== */

/* Fond dégradé derrière le canvas WebGL transparent */
/* Simule un ciel : sombre en haut, légèrement plus chaud en bas */
#pov-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1; /* Derrière le canvas */
    background: linear-gradient(
        to bottom,
        #04060f 0%,     /* presque noir en haut */
        #282f3e 60%,    /* bleu nuit */
        #2f3748 100%    /* bleu-gris sombre en bas */
    );
    pointer-events: none;
}

/* Vignette : assombrissement des bords de l'écran */
/* Donne un effet cinématique et focalise le regard au centre */
#pov-vignette {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 999; /* Au-dessus du canvas, sous les UI */
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        transparent 30%,        /* centre totalement transparent */
        rgba(0, 0, 0, 0.30) 70%,  /* assombrissement progressif */
        rgba(0, 0, 0, 0.65) 100%  /* bords bien sombres */
    );
}

/* Canvas WebGL doit être transparent en POV */
body.pov-active canvas {
    background: transparent !important;
}

/* Éléments UI au premier plan, au-dessus de la vignette */
body.pov-active #quest-counter,
body.pov-active #gauge-container,
body.pov-active #level,
body.pov-active #fullscreen-enter-btn,
body.pov-active #fullscreen-exit-btn,
body.pov-active #menu-container,
body.pov-active #digball-timer,
body.pov-active #iceball-timer,
body.pov-active #bravo-overlay {
    z-index: 1100 !important;
}