/* 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;
    background-color: transparent !important;
}

/* 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: 1.35rem;
    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 */
}

@media (min-width: 769px) {
    .overlay-game-title {
        font-size: 2rem;
    }
}

/* 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 vers la transparence totale (Cubic Easing Scrim) */
@media (max-width: 768px), body.is-mobile {
    .overlay-background-image {
        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 45%,
            rgba(0, 0, 0, 0.88) 60%,
            rgba(0, 0, 0, 0.58) 75%,
            rgba(0, 0, 0, 0.22) 88%,
            rgba(0, 0, 0, 0.05) 96%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 45%,
            rgba(0, 0, 0, 0.88) 60%,
            rgba(0, 0, 0, 0.58) 75%,
            rgba(0, 0, 0, 0.22) 88%,
            rgba(0, 0, 0, 0.05) 96%,
            transparent 100%
        );
    }
    .game-iframe-overlay::before {
        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 45%,
            rgba(0, 0, 0, 0.88) 60%,
            rgba(0, 0, 0, 0.58) 75%,
            rgba(0, 0, 0, 0.22) 88%,
            rgba(0, 0, 0, 0.05) 96%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 45%,
            rgba(0, 0, 0, 0.88) 60%,
            rgba(0, 0, 0, 0.58) 75%,
            rgba(0, 0, 0, 0.22) 88%,
            rgba(0, 0, 0, 0.05) 96%,
            transparent 100%
        );
    }
}

body.is-mobile .game-iframe-overlay::after,
@media (max-width: 768px) {
    .game-iframe-overlay::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 160px;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(24, 24, 40, 0.15) 35%,
            rgba(24, 24, 40, 0.45) 60%,
            rgba(24, 24, 40, 0.80) 80%,
            var(--bg-color-dark, #181828) 100%
        );
        pointer-events: none;
        z-index: 3;
    }
}

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

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

/* =================================================================== */
/* LOADER DE CHARGEMENT DU JEU (DESKTOP HYBRIDE & MOBILE)             */
/* =================================================================== */

.overlay-desktop-loader {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 15px;
    z-index: 10;
}

/* Sur desktop (non-mobile et > 768px) : cacher le bouton Play et afficher le loader */
@media (min-width: 769px) {
    body:not(.is-mobile) #play-immersive-button {
        display: none !important;
    }
    body:not(.is-mobile) .overlay-desktop-loader {
        display: flex !important;
    }
}

/* Sur mobile (ou <= 768px) : cacher STRICTEMENT le loader et afficher le bouton Play */
@media (max-width: 768px) {
    .overlay-desktop-loader,
    body.is-mobile .overlay-desktop-loader {
        display: none !important;
    }
    #play-immersive-button {
        display: inline-flex !important;
    }
}

body.is-mobile .overlay-desktop-loader {
    display: none !important;
}

body.is-mobile #play-immersive-button {
    display: inline-flex !important;
}

.desktop-loader-bar {
    width: 240px;
    max-width: 80vw;
    height: 7px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 0, 0, 0.2);
}

.desktop-loader-progress {
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color, #7057e0), #00e676);
    border-radius: 999px;
    box-shadow: 0 0 10px var(--accent-color, #7057e0);
    animation: desktopLoaderSweep 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes desktopLoaderSweep {
    0% {
        left: -50%;
        width: 30%;
    }
    50% {
        width: 60%;
    }
    100% {
        left: 100%;
        width: 30%;
    }
}

.desktop-loader-label {
    font-size: 13px;
    font-weight: 700;
    color: #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    animation: desktopLoaderPulse 1.8s ease-in-out infinite alternate;
}

@keyframes desktopLoaderPulse {
    from {
        opacity: 0.7;
    }
    to {
        opacity: 1;
    }
}

/* 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;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: nowrap;
}

/* 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, Partage, Plein écran) */
.overlay-action-button {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

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

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

/* Boutons de vote en Pilule / Capsule compacte (YouTube/Steam style) */
.overlay-action-button.overlay-vote-button {
    width: auto !important;
    min-width: 56px;
    height: 46px;
    border-radius: 23px;
    padding: 0 11px !important;
    gap: 3px !important; /* Rapprochement direct du pouce et de la valeur */
}

.overlay-vote-button .vote-icon {
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.overlay-vote-button .vote-count {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.2px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
}

.overlay-vote-button .vote-count .spinner {
    width: 11px;
    height: 11px;
    border-width: 2px;
    display: inline-block;
    vertical-align: middle;
}

/* =================================================================== */
/* 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: 8px;
    width: 100%;
    padding: 0;
    /* Comportement par défaut (mobile) : 3 colonnes squircle 1:1 Poki style identique à la Home */
    grid-template-columns: repeat(3, 1fr);
}

/* 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) and (max-width: 819px) {
    #related-games-sidebar .sidebar-games-grid {
        grid-template-columns: repeat(3, 1fr);
        padding: 0;
        gap: 8px;
    }
}

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

@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: #140e2d !important;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    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 */
}

/* Mobile (par défaut) : vignettes carrées 1:1 squircle Poki style identique à la Home */
#related-games-sidebar .sidebar-games-grid .game-card .thumbnail {
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
}

#related-games-sidebar .sidebar-games-grid .game-card .thumbnail img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

/* Écrans de bureau (> 768px) : conservation des vignettes paysage pour la sidebar */
@media (min-width: 769px) {
    #related-games-sidebar .sidebar-games-grid .game-card .thumbnail {
        aspect-ratio: 16 / 9;
        border-radius: var(--border-radius);
    }
    #related-games-sidebar .sidebar-games-grid .game-card .thumbnail.portrait {
        aspect-ratio: 16 / 9;
    }
    #related-games-sidebar .sidebar-games-grid .game-card .thumbnail img {
        aspect-ratio: 16 / 9;
        border-radius: var(--border-radius);
    }
}

/* Suppression des artefacts de skeleton et de fond sous-pixel une fois l'image chargée */
.thumbnail:has(img.is-loaded)::after {
    display: none !important;
}

.thumbnail:has(img.is-loaded) {
    background-color: transparent !important;
}

/* 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;
}

/* =================================================================== */
/* STYLES DES SECTIONS DE DÉTAILS DU JEU (Fiche, Features, About, FAQ) */
/* =================================================================== */
.game-details-section {
    margin-bottom: 24px;
    background: var(--bg-color-medium, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.game-details-section h2, 
.game-details-section h3 {
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-color-primary, #ffffff);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Accordéon Poki / CrazyGames pour la description */
.description-container {
    position: relative;
    overflow: hidden;
}

.description.collapsed {
    max-height: 125px;
    overflow: hidden;
}

.description.expanded {
    max-height: none;
}

.description-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--bg-color-medium, #222235));
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.description-container.is-expanded .description-fade {
    opacity: 0;
    pointer-events: none;
}

.btn-toggle-description {
    background: none;
    border: none;
    color: var(--accent-color, #ffb703);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 0;
    transition: filter 0.2s, transform 0.2s;
}

.btn-toggle-description:hover {
    filter: brightness(1.25);
}

.btn-toggle-description .toggle-arrow {
    transition: transform 0.25s ease;
}

.btn-toggle-description.is-expanded .toggle-arrow {
    transform: rotate(180deg);
}

.game-desc-paragraph {
    margin-bottom: 14px;
    line-height: 1.7;
    color: var(--text-color-secondary, rgba(255, 255, 255, 0.85));
    font-size: 0.95rem;
}

.game-desc-paragraph:last-child {
    margin-bottom: 0;
}

.game-desc-subheading {
    margin: 18px 0 8px 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent-color, #ffb703);
    letter-spacing: 0.5px;
}

.game-desc-bullet {
    margin-bottom: 6px;
    padding-left: 8px;
    line-height: 1.6;
    color: var(--text-color-secondary, rgba(255, 255, 255, 0.85));
    font-size: 0.95rem;
}

/* Respiration latérale des jeux similaires sur mobile */
@media (max-width: 768px) {
    #related-games-sidebar,
    .right-sidebar-column #related-games-sidebar {
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
    #related-games-sidebar .sidebar-games-grid {
        padding: 0 !important;
    }
    #related-games-sidebar .section-header {
        margin-top: 24px !important;
        margin-bottom: 8px !important;
        padding: 0 !important;
    }
}

/* =========================================================
           11. HARMONISATION PAGE DE JEU (/game) — THÈME CASUAL ROYAL GLASS
           ========================================================= */
        @media (min-width: 769px) {
            body.game-page-layout .site-main-content {
                padding-top: 72px !important;
                margin-left: 78px !important;
                padding-right: 12px !important;
            }
            body.game-page-layout.drawer-pinned .site-main-content {
                margin-left: 260px !important;
            }
        }
        @media (max-width: 768px) {
            body.game-page-layout:not(.immersive-mode) .site-main-content {
                padding-top: 0 !important;
                margin-top: 0 !important;
            }
            body.game-page-layout:not(.immersive-mode) .game-player-wrapper,
            body.game-page-layout:not(.immersive-mode) .game-embed-container,
            body.game-page-layout:not(.immersive-mode) .game-iframe-overlay {
                border-radius: 0 !important;
                margin-top: 0 !important;
            }
            body.game-page-layout:not(.immersive-mode) .overlay-content {
                padding-top: 56px !important;
            }
        }
        body.immersive-mode .site-header #header-fullscreen-button {
            background: linear-gradient(180deg, #352363 0%, #211540 100%) !important;
            border: 1.5px solid rgba(246, 196, 83, 0.55) !important;
            color: #ffe885 !important;
            box-shadow: 0 3px 0 #130b26, inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
        }
        .game-player-wrapper {
            border-radius: 18px !important;
            border: 1.5px solid rgba(168, 85, 247, 0.28) !important;
            background: #130b24 !important;
            box-shadow: 0 14px 36px rgba(5, 2, 14, 0.65), 0 0 24px rgba(124, 58, 237, 0.12) !important;
            overflow: hidden;
        }
        .game-embed-container {
            border-radius: 17px 17px 0 0 !important;
            background-color: #090514 !important;
        }
        .game-actions-bar {
            background: linear-gradient(180deg, #21153d 0%, #160d2b 100%) !important;
            border-top: 1px solid rgba(168, 85, 247, 0.22) !important;
            border-radius: 0 0 17px 17px !important;
            padding: 10px 16px !important;
        }
        #game-player-badge {
            background: linear-gradient(180deg, #2d1e54 0%, #1b1136 100%) !important;
            border: 1.5px solid rgba(246, 196, 83, 0.55) !important;
            border-radius: 999px !important;
            padding: 4px 12px 4px 5px !important;
            box-shadow: 0 3px 0 #120924, inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
            transition: transform 0.15s ease, border-color 0.15s ease !important;
        }
        #game-player-badge:hover {
            transform: translateY(-1px) !important;
            border-color: #fde047 !important;
        }
        #game-player-badge span {
            color: #ede4ff !important;
        }
        #game-player-badge #game-player-level {
            color: #fde047 !important;
            font-family: 'Rubik', 'Fredoka', sans-serif !important;
            font-weight: 900 !important;
        }
        .game-actions-bar .action-button {
            background: linear-gradient(180deg, #2d1f52 0%, #1e1438 100%) !important;
            border: 1.5px solid rgba(168, 85, 247, 0.32) !important;
            border-radius: 12px !important;
            color: #ede4ff !important;
            font-weight: 700 !important;
            box-shadow: 0 3px 0 #120a24, inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
            transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease !important;
        }
        .game-actions-bar .action-button:hover {
            transform: translateY(-1.5px) !important;
            background: linear-gradient(180deg, #3b286b 0%, #281a4a 100%) !important;
            border-color: rgba(246, 196, 83, 0.7) !important;
            color: #ffffff !important;
        }
        .game-actions-bar .action-button:active {
            transform: translateY(1px) !important;
            box-shadow: 0 1px 0 #120a24 !important;
        }
        .game-actions-bar .action-button.active,
        .game-actions-bar .favorite-toggle-button.is-favorite {
            background: linear-gradient(180deg, #4b2c85 0%, #311b5e 100%) !important;
            border-color: #f6c453 !important;
            color: #fde047 !important;
        }
        .game-actions-bar #fullscreen-button {
            background: linear-gradient(180deg, #ffe885 0%, #f7b733 52%, #df9018 100%) !important;
            border: 1.5px solid #fff3b0 !important;
            color: #261300 !important;
            font-family: 'Rubik', 'Fredoka', inherit !important;
            font-weight: 900 !important;
            box-shadow: 0 3px 0 #8c5308, inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
        }
        .game-actions-bar #fullscreen-button svg {
            fill: #261300 !important;
        }
        @media (max-width: 992px) {
            .game-player-wrapper {
                border: none !important;
                box-shadow: none !important;
                background: transparent !important;
            }
            .game-iframe-overlay::after {
                background: linear-gradient(
                    to bottom,
                    rgba(14, 9, 28, 0) 0%,
                    rgba(14, 9, 28, 0.25) 35%,
                    rgba(14, 9, 28, 0.72) 65%,
                    rgba(14, 9, 28, 0.94) 85%,
                    #0e091c 100%
                ) !important;
            }
        }
        .overlay-foreground-image {
            border-radius: 18px !important;
            border: 2px solid rgba(246, 196, 83, 0.55) !important;
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.65) !important;
        }
        .play-button-overlay,
        #play-immersive-button {
            background: linear-gradient(180deg, #4ade80 0%, #22c55e 48%, #16a34a 100%) !important;
            color: #ffffff !important;
            border: 2px solid #bbf7d0 !important;
            border-radius: 999px !important;
            font-family: 'Rubik', 'Fredoka', sans-serif !important;
            font-weight: 900 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.6px !important;
            text-shadow: 0 2px 0 #14532d !important;
            box-shadow: 0 5px 0 #14532d, 0 10px 24px rgba(34, 197, 94, 0.45), inset 0 1.5px 0 rgba(255, 255, 255, 0.65) !important;
        }
        .play-button-overlay svg {
            fill: #ffffff !important;
            filter: drop-shadow(0 2px 0 #14532d);
        }
        .overlay-action-button {
            background: rgba(34, 21, 66, 0.82) !important;
            border: 1.5px solid rgba(192, 132, 252, 0.4) !important;
            color: #f3e8ff !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important;
        }
        .desktop-loader-bar {
            background: rgba(20, 12, 40, 0.85) !important;
            border: 1px solid rgba(168, 85, 247, 0.35) !important;
        }
        .desktop-loader-progress {
            background: linear-gradient(90deg, #9333ea 0%, #f59e0b 55%, #fde047 100%) !important;
            box-shadow: 0 0 14px rgba(251, 191, 36, 0.6) !important;
        }
        @media (max-width: 1280px) {
            .game-content-columns {
                background: transparent !important;
                padding: 16px 12px 24px 12px !important;
                box-sizing: border-box !important;
                overflow-anchor: none !important;
            }
            #related-games-sidebar,
            #related-games-sidebar .sidebar-games-grid,
            .right-sidebar-column {
                overflow-anchor: none !important;
            }
        }
        @media (max-width: 819px) {
            #related-games-sidebar .sidebar-games-grid #show-more-related-container {
                width: 100% !important;
                min-width: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                align-self: start !important;
            }
            #related-games-sidebar .sidebar-games-grid #show-more-related {
                aspect-ratio: 1 / 1 !important;
                width: 100% !important;
                height: auto !important;
                margin: 0 !important;
                padding: 8px !important;
                border-radius: 16px !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 6px !important;
                box-sizing: border-box !important;
            }
            #related-games-sidebar .sidebar-games-grid #show-more-related .show-more-related-plus {
                width: 34px !important;
                height: 34px !important;
                border-radius: 50% !important;
                background: linear-gradient(180deg, #ffe885 0%, #f59e0b 100%) !important;
                color: #261300 !important;
                font-size: 22px !important;
                font-weight: 900 !important;
                line-height: 1 !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
                flex-shrink: 0 !important;
            }
            #related-games-sidebar .sidebar-games-grid #show-more-related .show-more-related-label {
                font-size: 11px !important;
                line-height: 1.15 !important;
                font-weight: 800 !important;
                color: #fde047 !important;
                text-align: center !important;
                white-space: normal !important;
                word-break: break-word !important;
            }
        }
        @media (min-width: 820px) {
            #related-games-sidebar .sidebar-games-grid #show-more-related-container {
                grid-column: 1 / -1 !important;
                width: 100% !important;
            }
            #related-games-sidebar .sidebar-games-grid #show-more-related .show-more-related-plus {
                display: none !important;
            }
        }
        .game-intro-header {
            border-bottom: 1px solid rgba(168, 85, 247, 0.22) !important;
            padding-bottom: 14px !important;
        }
        .game-title {
            font-family: 'Rubik', 'Fredoka', sans-serif !important;
            font-weight: 800 !important;
            color: #ffffff !important;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
        }
        .breadcrumb li a {
            color: #c4b5fd !important;
        }
        .breadcrumb li a:hover {
            color: #fde047 !important;
        }
        .chip-tag {
            background: linear-gradient(180deg, rgba(45, 31, 84, 0.85) 0%, rgba(28, 19, 54, 0.9) 100%) !important;
            border: 1px solid rgba(168, 85, 247, 0.35) !important;
            color: #e9d5ff !important;
            border-radius: 999px !important;
            font-weight: 700 !important;
            padding: 5px 13px !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
        }
        .chip-tag:hover {
            background: linear-gradient(180deg, #4b2d83 0%, #311b5e 100%) !important;
            border-color: #f6c453 !important;
            color: #fde047 !important;
            transform: translateY(-1px);
        }
        .game-meta-tabs-wrapper {
            background: linear-gradient(180deg, rgba(32, 20, 61, 0.88) 0%, rgba(19, 12, 38, 0.94) 100%) !important;
            border: 1.5px solid rgba(168, 85, 247, 0.28) !important;
            border-radius: 20px !important;
            box-shadow: 0 12px 32px rgba(5, 2, 14, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
        }
        .game-tabs-nav {
            background: rgba(16, 10, 32, 0.9) !important;
            border-bottom: 1.5px solid rgba(168, 85, 247, 0.24) !important;
            padding: 6px 10px 0 !important;
        }
        .game-tab-btn {
            color: #b8abdf !important;
            font-family: 'Rubik', 'Fredoka', sans-serif !important;
            font-weight: 800 !important;
            letter-spacing: 0.3px !important;
        }
        .game-tab-btn:hover {
            color: #ffffff !important;
            background: rgba(168, 85, 247, 0.1) !important;
        }
        .game-tab-btn.active {
            color: #fde047 !important;
            border-bottom-color: #f6c453 !important;
            background: linear-gradient(180deg, transparent 0%, rgba(246, 196, 83, 0.14) 100%) !important;
        }
        .game-tab-badge {
            background: rgba(168, 85, 247, 0.2) !important;
            color: #e9d5ff !important;
            border: 1px solid rgba(168, 85, 247, 0.35) !important;
        }
        .game-tab-btn.active .game-tab-badge {
            background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%) !important;
            color: #261300 !important;
            border-color: #fef08a !important;
        }
        .game-details-section {
            background: linear-gradient(180deg, #241744 0%, #180f30 100%) !important;
            border: 1.5px solid rgba(168, 85, 247, 0.26) !important;
            border-radius: 16px !important;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
        }
        .game-details-section h2,
        .game-details-section h3 {
            font-family: 'Rubik', 'Fredoka', sans-serif !important;
            color: #fde047 !important;
        }
        .description-fade {
            background: linear-gradient(to bottom, rgba(24, 15, 48, 0) 0%, #180f30 95%) !important;
        }
        .read-more-btn {
            background: rgba(168, 85, 247, 0.16) !important;
            border: 1px solid rgba(246, 196, 83, 0.45) !important;
            color: #fde047 !important;
            border-radius: 999px !important;
            padding: 6px 16px !important;
            font-weight: 800 !important;
        }
        .read-more-btn:hover {
            background: rgba(246, 196, 83, 0.2) !important;
            color: #ffffff !important;
        }
        .spec-card,
        .lb-boards-switch,
        .lb-table-wrapper,
        .ach-header-card,
        .achievement-card,
        .download-buttons-container {
            background: linear-gradient(180deg, rgba(38, 25, 72, 0.78) 0%, rgba(22, 14, 44, 0.88) 100%) !important;
            border: 1.5px solid rgba(168, 85, 247, 0.25) !important;
            border-radius: 14px !important;
        }
        .spec-label,
        .lb-table th {
            color: #b4a4e0 !important;
        }
        .lb-scope-pill.active {
            background: linear-gradient(180deg, #ffe885 0%, #f7b733 52%, #df9018 100%) !important;
            color: #261300 !important;
            font-weight: 900 !important;
        }
        @media (min-width: 1281px) {
            .right-sidebar-column {
                top: 78px !important;
            }
        }
        .show-more-related {
            background: linear-gradient(180deg, #352063 0%, #221342 100%) !important;
            border: 1.5px solid #f6c453 !important;
            color: #fde047 !important;
            border-radius: 999px !important;
            font-family: 'Rubik', 'Fredoka', sans-serif !important;
            font-weight: 900 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.4px !important;
            box-shadow: 0 4px 0 #120824, 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
        }
        .show-more-related:hover {
            background: linear-gradient(180deg, #4b2d83 0%, #311b5e 100%) !important;
            color: #ffffff !important;
            transform: translateY(-1.5px) !important;
        }

/* =========================================================
   VERROUILLAGE STRICT DU SCROLL & ADAPTATION HEADER EN MODE IMMERSIF MOBILE
   ========================================================= */
html:has(body.immersive-mode),
html.immersive-lock,
body.immersive-mode {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.immersive-mode {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    touch-action: none !important;
}
body.immersive-mode #game-iframe,
body.immersive-mode .site-header {
    touch-action: auto !important;
}
body.immersive-mode .site-footer,
body.immersive-mode .game-actions-bar,
body.immersive-mode .top-ban-placeholder,
body.immersive-mode .game-content-columns,
body.immersive-mode .right-sidebar-column,
body.immersive-mode .category-drawer,
body.immersive-mode #scroll-to-top-button,
body.immersive-mode .site-header .logo,
body.immersive-mode .site-header .drawer-search-bar-mobile,
body.immersive-mode #open-drawer-button,
body.immersive-mode #user-panel-button,
body.immersive-mode #header-streak-badge,
body.immersive-mode .hud-streak-capsule,
body.immersive-mode #header-xp-boost,
body.immersive-mode #header-challenges-button {
    display: none !important;
}
body.immersive-mode #back-to-home-button,
body.immersive-mode #header-favorite-button {
    display: inline-flex !important;
}
body.immersive-mode .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}
body.immersive-mode .site-main-content,
body.immersive-mode.game-page-layout .site-main-content,
body.immersive-mode:not(.game-page-layout) .site-main-content {
    padding-top: 46px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}
body.immersive-mode .game-layout-wrapper,
body.immersive-mode .main-column {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: block !important;
}
body.immersive-mode .game-player-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100vh - 46px) !important;
    height: calc(100dvh - 46px) !important;
    max-height: calc(100dvh - 46px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
body.immersive-mode .game-embed-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    aspect-ratio: unset !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
body.immersive-mode #game-iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block !important;
}
@media (orientation: landscape) {
    body.immersive-mode .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        transform: none !important;
        width: 45px !important;
        min-width: 45px !important;
        max-width: 45px !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 12px 0 !important;
        border-radius: 0 !important;
        border-top: none !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: 1px solid rgba(246, 196, 83, 0.32) !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    body.immersive-mode .site-header .header-content {
        width: 100% !important;
        height: auto !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    body.immersive-mode .site-header .header-left {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
    }
    body.immersive-mode .site-header #header-fullscreen-button {
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
    body.immersive-mode .site-header .header-right {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 10px !important;
        margin-top: auto !important;
        margin-left: 0 !important;
    }
    body.immersive-mode .site-header #header-user-level {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        justify-content: center !important;
    }
    body.immersive-mode .site-header #header-user-level .hud-progress-block,
    body.immersive-mode .site-header #header-user-level .hud-lvl-prefix,
    body.immersive-mode .site-header #header-user-level #header-quest-gem {
        display: none !important;
    }
    body.immersive-mode .site-header #header-user-level .hud-level-badge {
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center !important;
    }
    body.immersive-mode .site-header #header-user-level #header-user-level-value {
        display: inline !important;
        font-size: 11px !important;
    }
    body.immersive-mode .site-main-content,
    body.immersive-mode.game-page-layout .site-main-content,
    body.immersive-mode:not(.game-page-layout) .site-main-content {
        margin-left: 45px !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        width: calc(100vw - 45px) !important;
        max-width: calc(100vw - 45px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }
    body.immersive-mode .game-player-wrapper {
        width: calc(100vw - 45px) !important;
        max-width: calc(100vw - 45px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}