/* --- BASE & CONTEXTE --- */
body {
    margin: 0;
    overflow: hidden; /* Empêche le défilement */
    font-family: 'MedievalSharp', cursive;
    color: #f0e6d2; /* Couleur claire pour tout texte futur */
}

.game-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

/* --- FOND (IMAGE ou VIDÉO) --- */

.background-video {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1; 
    
    object-fit: cover;
    
    /* Filtre pour assombrir et faire ressortir l'interface */
    filter: brightness(0.7) contrast(1.1); 
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/fond2.jpg'); /* Votre fond d'écran */
    background-size: cover;
    background-position: center;
    z-index: 1; /* S'assure que le fond est derrière le reste */
    /* Applique le filtre si vous n'utilisez pas de vidéo */
    filter: brightness(0.7) contrast(1.1);
}

/* --- LOGO --- */
.logo-container {
    position: absolute;
    top: 1%; 
    right: 5%; 
    z-index: 10;
}

.game-logo {
    width: 350px; 
    height: auto;
    /* Optionnel : ombre portée pour un effet de profondeur */
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
}

/* --- AJOUTS POUR GÉRER L'ÉTAT DE L'UTILISATEUR --- */

.user-status-container {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 10;
    text-align: left;
}

.welcome-message {
    color: #e8c052; /* Couleur dorée/claire */
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.5em;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    padding: 10px 15px;
    border: 1px solid rgba(232, 192, 82, 0.5);
    border-radius: 5px;
    background: rgba(30, 20, 10, 0.7); /* Petit fond pour lisibilité */
}

/* Vous devrez peut-être ajuster le positionnement du logo 
   si le message de bienvenue entre en conflit avec lui. */
/*
.logo-container {
     right: 5%; 
     top: 1%;
}
*/

/* --- BOUTONS : POSITIONNEMENT --- */
.main-menu-buttons {
    position: absolute;
    right: 10%; 
    top: 65%; /* Changé à 50% pour un meilleur centrage vertical général */
    transform: translateY(-50%); /* Ajustement précis */
    display: flex;
    flex-direction: column; 
    gap: 7px; 
    z-index: 10;
}

.auth-buttons {
    position: absolute;
    bottom: 5%; 
    left: 3%; 
    display: flex;
    flex-direction: column; 
    gap: 10px; 
    z-index: 10;
}

/* --- BOUTONS : STYLE ET EFFETS (AMÉLIORÉ) --- */

/* Applique à tous les liens <a> utilisés comme boutons */
.menu-button {
    background: none; 
    border: none; 
    padding: 0;
    cursor: pointer;
    display: block; /* Important pour que la transition s'applique correctement */
    /* Activation de la transition pour l'effet de zoom */
    transition: transform 0.2s ease-out; 
    /* Optionnel : petite ombre pour les faire ressortir */
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.6)); 
}

.menu-button img {
    display: block; 
    width: 200px; 
    height: auto;
}

/* 🖱️ Effet de zoom au survol (hover) */
.menu-button:hover {
    transform: scale(1.08); /* Légèrement plus grand que 1.05 pour un meilleur impact */
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4)); /* Ajoute un halo lumineux */
}

/* Le reste du sélecteur original n'est plus nécessaire si on utilise .menu-button */
/*
.menu-button-link {
     text-decoration: none; 
}

*/