@import url('../../assets/css/fonts.css');

/* =========================================
   VARIABLES CYBERPUNK NÉON
========================================= */
:root {
    --font-main: 'Exo 2', sans-serif;
    
    --bg-deep: #030307;
    --border-color: rgba(0, 240, 255, 0.5);
    
    --bg-gradient-1: rgba(112, 0, 255, 0.15); /* Violet Néon */
    --bg-gradient-2: rgba(0, 240, 255, 0.15); /* Cyan Néon */
}

/* =========================================
   ARRIÈRE-PLAN (LA SALLE D'ARCADE)
========================================= */
body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-deep);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    font-family: var(--font-main);
    
    /* Éclairage ambiant immersif (lumière diffuse dans les coins) */
    background-image: radial-gradient(circle at top left, var(--bg-gradient-1), transparent 45%),
                      radial-gradient(circle at bottom right, var(--bg-gradient-2), transparent 45%);
}

/* =========================================
   L'ÉCRAN DU JEU (CANVAS)
========================================= */
canvas {
    /* Le curseur est géré par le jeu maintenant */
    cursor: none; 
    
    /* Esthétique de l'écran de la borne d'arcade */
    background-color: #000; /* Fond noir derrière le jeu pour le contraste */
    border: 2px solid var(--border-color);
    border-radius: 12px; /* Donne un effet d'écran physique arrondi */
    
    /* Animation de respiration lumineuse */
    animation: arcadeGlow 4s infinite alternate ease-in-out;
}

/* =========================================
   ANIMATION DU NÉON
========================================= */
@keyframes arcadeGlow {
    0% {
        box-shadow: 0 0 20px rgba(0, 240, 255, 0.2), 
                    0 0 40px rgba(112, 0, 255, 0.1),
                    inset 0 0 10px rgba(0, 240, 255, 0.1);
        border-color: rgba(0, 240, 255, 0.3);
    }
    100% {
        box-shadow: 0 0 35px rgba(0, 240, 255, 0.4), 
                    0 0 70px rgba(112, 0, 255, 0.25),
                    inset 0 0 20px rgba(0, 240, 255, 0.2);
        border-color: rgba(0, 240, 255, 0.7);
    }
}