/* assets/css/pages/game.css */

/* =================================================================== */
/* OVERLAY POUR LE BOUTON "JOUER" EN MODE IMMERSIF                   */
/* =================================================================== */

/* Le conteneur de l'iframe doit être positionné pour contenir l'overlay. */
.game-embed-container {
    position: relative;
}

/* NOUVEAU : Agrandir le conteneur sur mobile pour que l'overlay ne soit pas coupé. */
body.is-mobile .game-embed-container {
    /* On retire le ratio 16/9 pour que le conteneur puisse être plus haut que large. */
    aspect-ratio: unset;
    /* On lui donne une hauteur qui remplit une bonne partie de l'écran. */
    /*height: calc(100vh - var(--header-height) - 80px);*/
    min-height: 528px; /* Hauteur minimale pour les petits écrans */
    border-radius: 2px 0;
}

@media (max-width: 768px) {
    .game-embed-container {
        min-height: 528px; /* Hauteur minimale pour les petits écrans */
    }
}


.game-iframe-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow: hidden;
}

.game-iframe-overlay::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Voile sombre pour la lisibilité */
    z-index: 2;
}

.overlay-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(8px) brightness(0.7);
    transform: scale(1.1);
    z-index: 1;
}

.overlay-content {
    position: relative;
    z-index: 4; /* Au-dessus du dégradé et du voile */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    padding-top: 30px;
    max-width: 100%;
}

.overlay-game-image {
    /* CORRECTION : On donne une largeur fixe à l'image pour stabiliser le layout. */
    /* La largeur 100% la rendait dépendante de la largeur de son conteneur, qui était variable. */
    width: 250px;
    max-width: 90%; /* Garde une marge sur les très petits écrans */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
}

.overlay-game-title {
    font-family: var(--font-title);
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 20px 0;
    padding: 0 20px;
    /* NOUVEAU : Empêcher le titre de passer sur deux lignes et ajouter "..." */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* CORRECTION : Permet au titre de rétrécir et d'appliquer l'ellipsis dans un conteneur flex. */
    max-width: 100%; /* S'assurer que le titre ne dépasse pas la largeur du contenu de l'overlay */
}

/* On cache l'overlay une fois que le jeu est actif.
   En mode non mobile, ceci est géré par une classe CSS.
   En mode mobile, on utilise plutôt des conditions JS (voir étape 4). */
body.game-active:not(.is-mobile) .game-iframe-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
body.game-active.is-mobile .game-iframe-overlay {
    opacity: 0; visibility: hidden; /* Cache l'overlay en mode immersif mobile */
}

/* NOUVEAU : Sur mobile, l'overlay se fond avec le bas de la page */
body.is-mobile .game-iframe-overlay {
    /* Un masque est utilisé pour rendre le bas de l'overlay transparent,
       créant un effet de dégradé vers le fond de la page. */
    mask-image: linear-gradient(to bottom, black 91%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 91%, transparent 100%);
}

.play-button-overlay {
    padding: 15px 30px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 99px; /* Forme de pilule */
    border-width: 2px;
    gap: 12px;
    background-color: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.play-button-overlay:hover {
    background-color: var(--accent-color-hover);
    border-color: var(--accent-color-hover);
    transform: scale(1.05);
}

/* NOUVEAU : Conteneur pour les boutons de téléchargement dans l'overlay */
.overlay-download-actions {
    margin-top: 25px;
    display: flex;
    justify-content: center;
}

/* NOUVEAU : Style pour les badges de store dans l'overlay */
.overlay-store-badge img {
    height: 50px; /* Taille adaptée pour l'overlay */
    width: auto;
    transition: transform 0.2s ease;
}
.overlay-store-badge:hover {
    transform: scale(1.05);
}

/* NOUVEAU : Conteneur pour les boutons d'action secondaires */
.overlay-actions {
    display: flex;
    gap: 15px;
    margin-top: 8px;
}

/* NOUVEAU : Cacher les actions de l'overlay sur les écrans larges (>768px)
   car les mêmes actions sont déjà présentes dans la barre d'actions sous le jeu.
   Cela évite d'afficher deux jeux de boutons identiques. */
@media (min-width: 769px) {
    .overlay-actions {
        display: none;
    }
}

/* NOUVEAU : Ajustements pour la vue paysage sur les "petits" mobiles.
   On ajoute une condition de hauteur maximale pour ne pas appliquer ces styles
   sur les tablettes ou les ordinateurs de bureau tactiles en mode paysage. */
@media (orientation: landscape) and (max-height: 500px) {
    body.is-mobile .game-embed-container {
        min-height: 272px;
    }

    body.is-mobile .overlay-game-image {
        display: none; /* On cache l'image pour laisser plus de place au titre et aux boutons */
    }
}

/* NOUVEAU : Style pour les boutons d'action secondaires (Favori, Plein écran, etc.) */
.overlay-action-button {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 50%;
}

.overlay-action-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: #fff;
}

.overlay-action-button svg {
    width: 22px;
    height: 22px;
}

/* =================================================================== */
/* STYLES POUR LES TAGS SOUS LE TITRE DU JEU                         */
/* =================================================================== */

/* On ajuste le conteneur principal du header de jeu pour que les éléments s'empilent */
.game-intro-header {
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
    row-gap: 20px;   /* Espace entre la ligne du titre et la ligne des tags */
}

/* Conteneur pour les tags */
.game-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%; /* Prend toute la largeur pour s'afficher sur une nouvelle ligne */
}

/* =================================================================== */
/* STYLES POUR LES JEUX SIMILAIRES (Copied from more-games.css)         */
/* =================================================================== */

#related-games-sidebar .sidebar-games-grid {
    display: grid;
    gap: 12px;
    width: 100%;
    padding: 0;
    /* Comportement par défaut (mobile) : 2 colonnes qui s'adaptent à la largeur. */
    grid-template-columns: repeat(2, 1fr);
    padding: 0 8px;
}

/* NOUVEAU : Styles for limited height and "Show More" button */
.game-layout-wrapper #related-games-sidebar {
    margin-bottom: 20px; /* Add some spacing below the section */
}

/* Tablettes et petits écrans */
@media (min-width: 540px) {
    #related-games-sidebar .sidebar-games-grid {
        grid-template-columns: repeat(3, 1fr);
        padding: 0 8px;
    }
}

/* Écrans de bureau */
@media (min-width: 820px) {
    #related-games-sidebar .sidebar-games-grid {
        grid-template-columns: repeat(4, 1fr);
        padding: 0 8px;
    }
}

@media (min-width: 1280px) {
    #related-games-sidebar .sidebar-games-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0;
    }
}

.show-more-related {
    display: block;
    width: 200px;
    margin: 16px auto 0; /* Center the button */
    padding: 10px 20px;
    text-align: center;
    background-color: var(--accent-color);
    color: #fff;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    align-items: center;
    border: 1px solid transparent;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

#related-games-sidebar .sidebar-games-grid .game-card {
    width: 100%; /* La carte prend 100% de la colonne de la grille */
    max-width: none; /* On annule toute largeur maximale (ex: max-width: 233px) qui pourrait être héritée des styles de carrousel. */
}

/* Make related game cards have landscape thumbnails */
#related-games-sidebar .sidebar-games-grid .game-card .thumbnail {
    aspect-ratio: 16 / 9;
}

#related-games-sidebar .sidebar-games-grid .game-card .thumbnail.portrait {
    aspect-ratio: 16 / 9;
}

/* Conteneur pour les tags */
.game-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%; /* Prend toute la largeur pour s'afficher sur une nouvelle ligne */
}

/* =================================================================== */
/* AJUSTEMENT DE LA TAILLE DU BLOC JEU POUR VISIBILITÉ DES ÉLÉMENTS (DESKTOP) */
/* =================================================================== */

/* Sur les grands écrans, la zone de jeu peut devenir trop haute et pousser
   la barre d'actions et la bannière publicitaire hors de l'écran.
   La solution est de contraindre la hauteur du conteneur global du jeu (`.game-player-wrapper`). */
@media (min-width: 720px) {
    /* CORRECTION : Ces règles de contrainte de taille sont UNIQUEMENT pour le desktop.
       On ajoute `body.is-desktop` pour éviter qu'elles ne s'appliquent sur les mobiles
       en mode paysage, qui peuvent avoir une largeur supérieure à 720px.
       On ajoute également `:not(.immersive-mode)` pour désactiver ces règles lorsque le jeu passe en plein écran personnalisé. */
    body.is-desktop:not(.immersive-mode) .game-player-wrapper {
        display: flex;
        flex-direction: column;

        /* 2. On définit la hauteur maximale disponible pour le jeu ET sa barre d'actions.
           Calcul : 100vh - hauteur header - marge bannière - hauteur bannière - marge de sécurité. */
        --max-player-height: calc(100vh - var(--header-height) - 25px - 90px - 20px);
        max-height: var(--max-player-height);

        /* 3. On calcule la largeur maximale correspondante pour conserver le ratio 16/9.
           On soustrait la hauteur de la barre d'action de la hauteur totale pour obtenir la hauteur de l'iframe,
           puis on calcule la largeur à partir de cette hauteur. */
        --action-bar-height: 45px; /* Estimation de la hauteur de la barre d'actions */
        --max-iframe-height: calc(var(--max-player-height) - var(--action-bar-height));
        max-width: calc(var(--max-iframe-height) * 16 / 9);

        /* 4. On centre l'ensemble du bloc de jeu horizontalement. */
        margin-left: auto;
        margin-right: auto;
    }

    body.is-desktop:not(.immersive-mode) .game-embed-container {
        flex-grow: 1; /* L'iframe prend toute la place verticale restante. */
        /* min-height: 0; Correction flexbox pour permettre au conteneur de rétrécir. */
    }

    body.is-desktop:not(.immersive-mode) .game-actions-bar {
        flex-shrink: 0; /* La barre d'actions conserve sa hauteur naturelle. */
    }
}

/* =================================================================== */
/* STYLES POUR LE MODE PLEIN ÉCRAN                                   */
/* =================================================================== */

/* Lorsque le conteneur du jeu passe en plein écran, nous devons nous assurer
   qu'il remplit bien tout l'espace et que seuls les éléments pertinents (l'iframe)
   sont visibles. */

/* MODIFIÉ : On utilise une classe JS (.is-actually-fullscreen) au lieu du pseudo-sélecteur :fullscreen
   pour un contrôle plus fiable du style et pour contourner les bugs de rendu du navigateur
   lors de la sortie du mode plein écran. */
.game-player-wrapper.is-actually-fullscreen {
    /* On annule toutes les contraintes de taille pour qu'il puisse remplir l'écran. */
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #000;
}

/* En plein écran, on ne veut voir que le jeu, pas la barre d'actions. */
.game-player-wrapper.is-actually-fullscreen .game-actions-bar {
    display: none;
}

/* =================================================================== */
/* GESTION DE LA VISIBILITÉ IFRAME VS OVERLAY                        */
/* =================================================================== */

/* Pour éviter que l'iframe (page noire avant chargement) ne s'affiche
   en mode plein écran lorsque l'overlay est actif, nous lions directement
   la visibilité de l'iframe à l'état du jeu. */

/* Par défaut, si le jeu n'est pas actif (overlay visible), on cache l'iframe.
   NOTE : Assurez-vous que votre iframe a bien l'ID "game-iframe". */
body:not(.game-active) #game-iframe {
    display: none;
}

/* Lorsque le jeu devient actif (overlay caché), on affiche l'iframe. */
body.game-active #game-iframe {
    display: block;
}

/* =================================================================== */
/* SPÉCIFICITÉS MOBILES                                              */
/* =================================================================== */
/* Cacher le bouton de plein écran natif sur mobile, car c'est le mode immersif qui gère cette fonctionnalité. */
body.is-mobile .fullscreen-trigger {
    display: none !important;
}