/* ==========================================
   1. POLICES ET RÉINITIALISATION GLOBALE
   ========================================== */
/* Importation d'une police "Gaming" depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Réinitialisation de base pour tout centrer et utiliser toute la page */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-radius;
    font-family: 'Press Start 2P', monospace; /* Police gaming */
}

body {
    background: radial-gradient(circle, #1a1a2e 0%, #16213e 100%); /* Fond dégradé circulaire pour la profondeur */
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden; /* Empêche les barres de défilement */
}

/* ==========================================
   2. LE CONTENEUR PRINCIPAL DU JEU
   ========================================== */
.game-container {
    text-align: center;
    background: #0f3460;
    padding: 30px;
    border-radius: 20px;
    border: 3px solid #e94560; /* Bordure néon rouge */
    box-shadow: 0 0 25px rgba(233, 69, 96, 0.4); /* Effet néon global */
    width: 90%;
    max-width: 480px; /* Taille maximale pour rester élégant */
}

/* ==========================================
   3. L'ENTÊTE (TITRE ET SCORES)
   ========================================== */
header h1 {
    font-size: 1.5rem;
    color: #00ffcc; /* Vert cyan néon */
    text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc; /* Double glow */
    margin-bottom: 20px;
    text-transform: uppercase;
}

.scores {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 0.8rem;
}

.scores p {
    color: #fff;
}

/* Couleurs différentes pour distinguer les scores */
#current-score {
    color: #00d2ff; /* Bleu néon */
    text-shadow: 0 0 8px #00d2ff;
}

#high-score {
    color: #ffde00; /* Jaune néon */
    text-shadow: 0 0 8px #ffde00;
}

/* ==========================================
   4. LE CANVAS DU JEU
   ========================================== */
canvas {
    background-color: #1a1a2e; /* Fond sombre pour le contraste */
    border-radius: 10px;
    box-shadow: 
        inset 0 0 20px rgba(0, 0, 0, 0.8), /* Ombre interne pour la profondeur */
        0 0 20px #e94560; /* Effet de glow externe rouge néon */
    margin: 20px 0;
    display: block; /* Élimine l'espace blanc sous le canvas */
}

/* ==========================================
   6. LES CONTRÔLES MATÉRIELS (BOUTON & STATUT)
   ========================================== */
.hardware-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

button {
    background-color: #00d2ff;
    color: #1a1a2e;
    border: none;
    padding: 12px 24px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 4px #00a8cc; /* Ombre 3D */
    transition: transform 0.1s, box-shadow 0.1s; /* Transition pour le clic */
    outline: none; /* Retire la bordure par défaut */
}

button:hover {
    background-color: #00e6ff;
    box-shadow: 0 4px #00ccff;
}

button:active {
    transform: translateY(3px); /* Effet d'enfoncement */
    box-shadow: 0 1px #00a8cc;
}

#status {
    margin-top: 15px;
    font-size: 0.7rem;
    color: #aaa;
    font-style: italic;
}

/* ==========================================
   7. GAME OVER OVERLAY
   ========================================== */
/* Style pour un fondu Game Over */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Ce style n'est appliqué qu'en cas de Game Over par le JS */
#gameCanvas.game-over {
    animation: fadeIn 0.5s ease;
}