/* =========================================
   POLICE DU JEU
========================================= */
@font-face {
    font-family: 'GameFont';
    src: url('font.ttf') format('truetype');
    font-display: swap; /* Améliore le chargement */
}

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

/* =========================================
   ARRIÈRE-PLAN (LA SALLE D'ARCADE)
========================================= */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    background-color: var(--bg-deep);
    
    /* Effet d'éclairage ambiant Néon */
    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 {
    display: block;
    height: 90vh;
    width: auto;
    max-width: 95vw;
    max-height: 95vh;
    
    /* Maintien strict du rendu Pixel Art pour tous les navigateurs */
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    
    /* Esthétique de l'écran (Verre et Néon) */
    background-color: #000; /* Fond noir derrière le jeu au cas où il y ait de la transparence */
    border: 2px solid var(--border-color);
    border-radius: 12px; /* Coins légèrement arrondis comme un vrai écran */
    
    /* Animation de pulsation lumineuse */
    animation: screenGlow 4s infinite alternate ease-in-out;
}

/* =========================================
   ANIMATION DU NÉON
========================================= */
@keyframes screenGlow {
    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);
    }
}