/* --- Style de Loftsvið, inspiré par Via Ultima --- */

:root {
    --nox-bg: #090a0f;
    --nox-primary: #a8b3c3;
    --nox-glow: #d4e1f7;
    --dies-primary: #b48d4b;
    --dies-glow: #ffe8a9;
    --danger: #b33a3a;
    --font-title: 'Cinzel', serif;
    --font-body: 'Lora', serif;
}

/* --- Base --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

body {
    background: radial-gradient(ellipse at center, #1b2735 0%, #090a0f 100%);
    color: var(--nox-primary);
    font-family: var(--font-body);
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

/* --- Cadre du Jeu --- */
#game-container {
    width: 100vw;
    height: 100vh;
    background-image: url('https://www.diesnox.fr/loftsvid/assets/background_naastica.png');
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(180, 141, 75, 0.3);
    box-shadow: inset 0 0 25px rgba(0,0,0,0.7), 0 0 40px rgba(0,0,0,0.5);
}

/* --- Éléments du Jeu --- */
#mio {
    width: 90px; height: 70px; position: absolute; left: 100px; top: 250px;
    background-image: url('https://www.diesnox.fr/loftsvid/assets/mio_sprite.png');
    background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 5;
}
.obstacle { position: absolute; width: 90px; background-size: 100% 100%; background-repeat: no-repeat; z-index: 4; }
.obstacle-top { top: 0; background-position-y: bottom; }
.obstacle-bottom { bottom: 0; background-position-y: top; }
.obstacle-type-1 { background-image: url('https://www.diesnox.fr/loftsvid/assets/obstacle_ruine1.png'); }
.obstacle-type-2 { background-image: url('https://www.diesnox.fr/loftsvid/assets/obstacle_ruine2.png'); }

#game-hud {
    /* On fixe le HUD par rapport à la fenêtre du navigateur, pas au jeu */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999; /* Z-index très élevé pour qu'il soit au-dessus de tout (sauf les modales) */

    /* Style pour une lisibilité maximale */
    background: linear-gradient(to bottom, rgba(9, 10, 15, 0.8) 0%, transparent 100%);
    padding: 15px;
    /* Ajout de compatibilité pour les encoches (notch) des iPhones */
    padding-top: calc(15px + env(safe-area-inset-top)); 
    text-align: center;
    pointer-events: none;
}

#score {
    font-family: var(--font-title);
    font-size: clamp(1.8em, 7vw, 2.5em); /* Taille légèrement réduite pour les mobiles */
    color: var(--dies-glow);
    text-shadow: 0 0 10px var(--dies-glow), 0 0 5px rgba(0,0,0,0.7);
}

#countdown {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-family: var(--font-title); font-size: 8em; color: white;
    text-shadow: 0 0 15px black; z-index: 20;
}

/* --- Système de Modales --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(3, 4, 7, 0.7); backdrop-filter: blur(8px);
    display: flex; justify-content: center; align-items: center;
    z-index: 1000; animation: fadeIn 0.3s;
}
.modal-content {
    background: radial-gradient(ellipse at center, rgba(27, 39, 53, 0.8) 0%, rgba(9, 10, 15, 0.95) 100%);
    border: 1px solid var(--dies-primary);
    box-shadow: 0 0 30px rgba(0,0,0,0.5); border-radius: 8px;
    padding: 30px 40px; max-width: 500px; width: 90%;
    text-align: center; color: var(--nox-primary); position: relative;
}
.modal-content h2 {
    font-family: var(--font-title); font-size: 2.2em; color: var(--dies-glow);
    margin: 0; text-shadow: 0 0 8px var(--dies-glow);
}
.modal-content .divider {
    margin: 20px 0; height: 1px; width: 100%;
    background: linear-gradient(to right, transparent, var(--dies-primary), transparent);
}
.modal-actions {
    display: flex; flex-direction: column; gap: 15px; margin-top: 25px;
}

/* --- Boutons Élégants --- */
.btn {
    display: block; width: 100%; text-align: center; text-decoration: none;
    background: transparent; border: 1px solid var(--dies-primary);
    color: var(--dies-primary); font-family: var(--font-title);
    padding: 12px; font-size: 1.1em; letter-spacing: 1px;
    cursor: pointer; transition: all 0.2s ease-out; border-radius: 4px;
}
.btn:hover {
    background-color: rgba(180, 141, 75, 0.1);
    color: var(--dies-glow); text-shadow: 0 0 8px var(--dies-glow);
}
.btn.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn.btn-danger:hover { background-color: rgba(179, 58, 58, 0.1); color: #f5caca; text-shadow: 0 0 8px var(--danger); }
.close-modal-btn {
    position: absolute; top: 10px; right: 15px; background: none; border: none;
    font-size: 2em; color: var(--nox-primary); cursor: pointer; transition: all 0.3s ease;
}
.close-modal-btn:hover { color: var(--dies-glow); transform: scale(1.1); }

/* --- Éléments spécifiques des modales --- */
#high-score-display { font-size: 1.1em; opacity: 0.8; margin-bottom: 20px; }
.final-score-text { font-size: 1.5em; margin: 20px 0; }
.final-score-text span { font-family: var(--font-title); color: var(--dies-glow); font-size: 1.5em; }
.text-danger { color: #f5caca; text-shadow: 0 0 8px var(--danger); }
#player-name-input {
    width: 100%; padding: 10px; font-size: 1em; text-align: center;
    background: var(--nox-bg); color: var(--nox-glow); border-radius: 4px;
    border: 1px solid var(--dies-primary); margin: 10px 0;
}
#leaderboard-list { text-align: left; padding-left: 0; list-style: none; max-height: 50vh; overflow-y: auto; }
#leaderboard-list li { padding: 8px 0; border-bottom: 1px solid rgba(180, 141, 75, 0.2); display: flex; justify-content: space-between; font-size: 1.1em; }
#leaderboard-list li:first-child { color: var(--dies-glow); }
#rules-content {
    max-height: 60vh; /* Hauteur maximale avant que le scroll n'apparaisse */
    overflow-y: auto; /* Affiche la barre de scroll vertical si nécessaire */
    padding-right: 15px; /* Ajoute un petit espace à droite du texte pour la barre de scroll */
    text-align: left;
    line-height: 1.7;
}

#rules-content ul {
    padding-left: 20px;
}

/* --- Style personnalisé de la barre de scroll (pour le thème) --- */
#rules-content::-webkit-scrollbar {
    width: 8px;
}

#rules-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

#rules-content::-webkit-scrollbar-thumb {
    background-color: var(--dies-primary);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

#rules-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--dies-glow);
}

.rules-conclusion {
    font-style: italic;
    font-size: 1.1em;
    color: var(--dies-primary);
    opacity: 0.9;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(180, 141, 75, 0.2);
}

.bonbon {
    position: absolute;
    width: 35px;
    height: 35px;
    z-index: 4;
    background-image: url('../assets/bonbon1.svg'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.bonbon-dore {
    /* Chemin corrigé également ici */
    background-image: url('../assets/bonbon3.svg');
    transform: scale(1.O);
}

/* --- Utilitaires --- */
#fullscreen-btn {
    position: fixed; bottom: 15px; right: 15px; background-color: rgba(0,0,0,0.5);
    color: var(--nox-primary); border: 1px solid var(--nox-primary); border-radius: 4px;
    padding: 8px 12px; cursor: pointer; z-index: 50;
}
.hidden { display: none !important; }