/* ========== STYLE GENERAL ========== */
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #161616;
}

body {
    font-family: 'Roboto', 'Montserrat', Arial, sans-serif;
    color: #fff;
    background: #161616;
}

/* ========== CANVAS CENTRAL ========== */
#gameCanvas {
    display: block;
    margin: auto;
    width: 96vw;
    height: 94vh;
    background: transparent;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 0 32px 2px #111a;
    border-radius: 18px;
    border: 2px solid #444;
    caret-color: transparent !important;
    -webkit-touch-callout: none;
    position: relative;
    /* ✅ S'assurer que le canvas n'interfère jamais avec la pause */
    z-index: 1;
}

/* ========== OVERLAY & UI ========== */
#startButton, #scoreDisplay, #recordDisplay, #startScreen {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
}

#startButton {
    background: #222;
    color: #FFD700;
    border-radius: 12px;
    border: 2px solid #FFD700;
    padding: 18px 38px;
    font-size: 2em;
    margin: 35px auto 10px auto;
    display: block;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
#startButton:hover {
    background: #FFD700;
    color: #222;
}

#scoreDisplay, #recordDisplay {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 6px;
    font-size: 1.4em;
    color: #FFD700;
    text-shadow: 1px 1px 4px #0009;
    z-index: 10;
}

#scoreDisplay {
    top: 6px;
}
#recordDisplay {
    top: 38px;
}

#startScreen {
    background: rgba(22, 22, 22, 0.98);
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar {
    width: 0 !important;
    background: transparent !important;
}

/* ========== 🛠️ SYSTÈME DE PAUSE ULTRA-PRIORITAIRE ========== */

/* Image de pause - PRIORITÉ ABSOLUE au-dessus de TOUT */
#pauseImage {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    /* ✅ Z-INDEX MAXIMUM pour être AU-DESSUS DE TOUT */
    z-index: 999999 !important;
    object-fit: cover !important;
    /* ✅ OPACITÉ FORCÉE À 100% */
    opacity: 1 !important;
    display: none; /* Masqué par défaut */
    transition: none !important;
    /* ✅ Empêcher toute interaction quand masqué */
    pointer-events: none;
    /* ✅ S'assurer qu'aucun élément ne peut passer devant */
    isolation: isolate;
}

/* ✅ Quand l'image de pause est visible, permettre les interactions */
#pauseImage[style*="display: block"], 
#pauseImage[style*="display:block"] {
    pointer-events: auto !important;
}

/* Overlay pour les boutons - JUSTE EN-DESSOUS de l'image */
#pauseOverlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    /* ✅ Z-INDEX TRÈS ÉLEVÉ mais en-dessous de l'image */
    z-index: 999998 !important;
    /* ✅ ARRIÈRE-PLAN TOTALEMENT TRANSPARENT */
    background: transparent !important;
    backdrop-filter: none !important;
    display: none;
    justify-content: center;
    align-items: center;
    /* ✅ Empêcher les clics quand masqué */
    pointer-events: none;
}

/* ✅ Quand l'overlay est visible, permettre les interactions */
#pauseOverlay[style*="display: flex"], 
#pauseOverlay[style*="display:flex"] {
    pointer-events: auto !important;
}

/* ✅ BOUTONS DE PAUSE - Visibilité garantie */
#pauseOverlay .button,
#pauseResumeBtn,
#pauseRestartBtn {
    /* ✅ S'assurer que les boutons sont visibles */
    opacity: 1 !important;
    z-index: 999999 !important;
    position: relative;
    /* ✅ Couleurs contrastées pour visibilité */
    background: rgba(44, 44, 44, 0.95) !important;
    color: #ffd700 !important;
    border: 2px solid #ffd700 !important;
    border-radius: 8px;
    padding: 15px 30px;
    margin: 10px;
    font-size: 1.3em;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    transition: all 0.2s ease;
}

#pauseOverlay .button:hover,
#pauseResumeBtn:hover,
#pauseRestartBtn:hover {
    background: rgba(255, 215, 0, 0.95) !important;
    color: #2c2c2c !important;
    transform: scale(1.05);
}

/* ✅ SLIDER DE VOLUME - Visibilité garantie */
#pauseVolume {
    opacity: 1 !important;
    z-index: 999999 !important;
    /* ✅ Style personnalisé pour visibilité */
    -webkit-appearance: none;
    appearance: none;
    width: 200px;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.3);
    outline: none;
    margin: 20px;
}

#pauseVolume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffd700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#pauseVolume::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffd700;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ========== ✅ PROTECTION ANTI-Z-INDEX POUR ÉLÉMENTS DU JEU ========== */

/* ✅ S'assurer qu'aucun élément du jeu ne peut dépasser la pause */
.game-element,
#gameCanvas,
#scoreDisplay,
#recordDisplay,
.powerup,
.pacman,
.particle,
.effect {
    /* ✅ Z-INDEX LIMITÉ pour les éléments du jeu */
    z-index: 100 !important;
    /* ✅ Ne jamais dépasser ce niveau */
    max-z-index: 1000;
}

/* ========== BOUTONS, OVERLAYS, ETC. ========== */
.button {
    background: #2c2c2c;
    color: #ffd700;
    border: none;
    border-radius: 7px;
    padding: 10px 30px;
    margin: 10px;
    font-size: 1.3em;
    cursor: pointer;
    box-shadow: 0 2px 8px #0006;
    transition: background 0.2s, color 0.2s;
}
.button:hover {
    background: #ffd700;
    color: #2c2c2c;
}

.overlay {
    position: fixed;
    top:0; left:0; right:0; bottom:0;
    z-index: 100;
    background: rgba(30,30,30,0.90);
    display: flex;
    align-items: center;
    justify-content: center;
}

.invisible {
    display: none !important;
}

.visible {
    display: block !important;
}

/* ========== ✅ CLASSE POUR FORCER L'OPACITÉ MAXIMUM ========== */
.max-opacity {
    opacity: 1 !important;
}

/* ✅ Protection contre les modifications d'opacité accidentelles */
.pacman-element,
.pacman-body,
.game-character {
    opacity: 1 !important;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 600px) {
    #startScreen h1 {
        font-size: 2.5em;
    }
    #startScreen .subtitle {
        font-size: 1.8em;
    }
    #startScreen p {
        font-size: 1.2em;
    }
    #startButton {
        padding: 12px 24px;
        font-size: 16px;
    }
    
    /* ✅ Boutons de pause responsive */
    #pauseOverlay .button,
    #pauseResumeBtn,
    #pauseRestartBtn {
        padding: 12px 20px;
        font-size: 1.1em;
        margin: 8px;
    }
    
    #pauseVolume {
        width: 150px;
        margin: 15px;
    }
}