/* --- Variables de couleur ColorQuest.io --- */
:root {
    --primary-color: #3498db; /* Bleu principal, comme le bouton "Dotrescitee" */
    --secondary-color: #2ecc71; /* Vert secondaire, comme le contour du bouton "Hots occies" */
    --accent-color-1: #f39c12; /* Jaune/Orange accent 1, comme les boutons du bas */
    --accent-color-2: #e74c3c; /* Rouge accent 2, comme le bouton "Lod" */
    --text-color-dark: #333;
    --text-color-light: #fff;
    --background-color: #f0f0f0; /* Fond de page clair, rappelant le mur clair du jeu */
    --container-bg: #fff; /* Fond des conteneurs, pur et lumineux */
    --border-radius: 8px; /* Rayon des bordures pour un look doux */
    --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre subtile */
}

/* --- Styles du BODY (fusionnés avec Unity) --- */
body {
    padding: 0; /* Unity default */
    margin: 0; /* Unity default */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Police moderne et lisible */
    background-color: var(--background-color); /* Couleur de fond personnalisée */
    color: var(--text-color-dark); /* Couleur de texte par défaut */
    display: flex; /* Pour organiser l'ensemble de la page en colonne */
    flex-direction: column; /* Pour organiser l'ensemble de la page en colonne */
    min-height: 100vh; /* S'assure que la page occupe au moins toute la hauteur de la fenêtre */
    line-height: 1.6; /* Améliore la lisibilité du texte */
}

/* --- Styles de l'en-tête ColorQuest.io --- */
header {
    background-color: var(--primary-color); /* Utilise la couleur bleue principale */
    color: var(--text-color-light); /* Texte blanc pour le contraste */
    padding: 1.5em 20px;
    text-align: center;
    box-shadow: var(--box-shadow); /* Ombre pour donner de la profondeur */
    position: relative; /* Pour le positionnement en couches si nécessaire */
    z-index: 10; /* S'assure qu'il est au-dessus des autres éléments */
}

header h1 {
    margin: 0;
    font-size: 2.5em; /* Grande taille de titre */
}

header p {
    font-size: 1.1em;
    opacity: 0.8; /* Légèrement transparent pour un effet doux */
}

/* --- Styles du MAIN (contenu principal ColorQuest.io) --- */
main {
    flex: 1; /* Permet au main de prendre l'espace disponible */
    padding: 20px;
    max-width: 960px; /* Largeur maximale pour le contenu */
    margin: 20px auto; /* Centre le main horizontalement */
    display: flex;
    flex-direction: column;
    gap: 30px; /* Espace entre les sections */
    position: relative;
    z-index: 5; /* Positionnement en couches */
}

main section {
    background-color: var(--container-bg); /* Fond blanc pour les sections de contenu */
    padding: 25px;
    border-radius: var(--border-radius); /* Bords arrondis */
    box-shadow: var(--box-shadow); /* Ombre légère */
    text-align: center;
}

main h2 {
    color: var(--accent-color-1); /* Couleur d'accentuation jaune/orange pour les titres */
    font-size: 2em;
    margin-bottom: 15px;
}

main p {
    margin-bottom: 15px;
}

/* --- Styles des boutons de magasin --- */
.store {
    display: flex;
    justify-content: center; /* Centre les boutons horizontalement */
    gap: 20px; /* Espace entre les boutons */
    margin-top: 20px;
}

/*.store a {
    display: inline-block;
    background-color: var(--secondary-color); /* Utilise le vert secondaire pour les boutons */
    color: var(--text-color-light); /* Texte blanc */
    padding: 12px 25px;
    border-radius: var(--border-radius);
    text-decoration: none; /* Supprime le soulignement */
    font-weight: bold;
    transition: background-color 0.3s ease; /* Transition douce au survol */
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15); /* Ombre plus prononcée pour les boutons */
}

.store a:hover {
    background-color: #27ae60; /* Vert plus foncé au survol */
}*/

/* --- Styles Unity (fusionnés/adaptés) --- */
#unity-container {
    /* Unity's original positioning has been removed for integration into normal flow */
    /* It will now behave like a regular block element within the <section> */
    /* Adjustments for normal flow */
    margin: 0 auto; /* Centrer le conteneur Unity dans sa section */
    max-width: fit-content; /* Permettre au conteneur de s'ajuster au contenu Unity */

    /* Custom styles for visual integration */
    background-color: #e0f7fa; /* Fond très clair, rappelant les tons pastel du jeu */
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden; /* Pour que les bords arrondis fonctionnent */
    padding: 10px; /* Rembourrage autour du canvas Unity */
    display: flex; /* Utilise flexbox pour centrer le contenu à l'intérieur */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Specific desktop style (Unity original: left: 50%; top: 50%; transform: translate(-50%, -50%)) */
/* This will now be handled by margin: auto; max-width; on #unity-container */
#unity-container.unity-desktop {
    /* No specific absolute positioning needed here anymore for desktop */
    /* It will follow the flow set by #unity-container */
}


#unity-container.unity-mobile {
    /* Unity default positioning for mobile - DO NOT CHANGE */
    /* This rule will still ensure full screen on mobile as per Unity's design */
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: none; /* Réinitialise le transform pour le mode plein écran mobile */
    border-radius: 0; /* Pas de bordures arrondies en plein écran mobile */
    padding: 0;
}

#unity-canvas {
    /* Unity default background - can be overridden by #231F20 */
    background: #231F20; /* Laisser Unity gérer cela ou définir une couleur par défaut */
    /* Custom styles */
    border-radius: var(--border-radius); /* Appliquer les bords arrondis personnalisés */
    /* No 'position: absolute' here as per request */
}

.unity-mobile #unity-canvas {
    /* Unity default for mobile */
    width: 100%;
    height: 100%;
    border-radius: 0; /* Pas de bordures arrondies en plein écran mobile */
}

#unity-loading-bar {
    /* Unity default positioning - DO NOT CHANGE */
    position: absolute; /* Keep absolute position for loading bar relative to its container */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Géré par Unity JS */
    /* Custom styles for visual integration */
    background-color: rgba(0, 0, 0, 0.1); /* Fond transparent pour la barre de chargement */
    border-radius: 5px;
    height: 20px;
    width: 141px; /* Conserver la largeur par défaut de Unity pour les images */
    margin-top: 10px;
    margin-left: 6.5px;
    overflow: hidden;
}

#unity-logo {
    /* Unity default - DO NOT CHANGE */
    width: 154px;
    height: 130px;
    background: url('unity-logo-dark.png') no-repeat center;
}

#unity-progress-bar-empty {
    /* Unity default - DO NOT CHANGE */
    width: 141px;
    height: 18px;
    margin-top: 10px;
    margin-left: 6.5px;
    background: url('progress-bar-empty-dark.png') no-repeat center;
}

#unity-progress-bar-full {
    /* Unity default - DO NOT CHANGE width is set by JS */
    height: 18px;
    margin-top: 10px;
    background: url('progress-bar-full-dark.png') no-repeat center;
    /* Custom style: override background image with solid color for progress */
    background-color: var(--accent-color-1); /* Utilise la couleur d'accentuation jaune/orange */
    background-image: none; /* Supprime l'image par défaut de Unity */
    border-radius: 5px; /* S'harmonise avec le conteneur de la barre de chargement */
}

#unity-footer {
    /* Unity default positioning - DO NOT CHANGE */
    position: relative; /* Keep relative position for elements inside Unity container */
    /* Custom styles for visual integration */
    background-color: rgba(0, 0, 0, 0.6); /* Fond sombre semi-transparent */
    color: var(--text-color-light); /* Texte blanc */
    padding: 10px;
    width: 100%; /* Prend toute la largeur de son parent */
    box-sizing: border-box; /* Inclut le padding dans la largeur */
    display: flex;
    justify-content: space-between; /* Espace les éléments */
    align-items: center;
    font-size: 0.9em;
    border-bottom-left-radius: var(--border-radius); /* Bords arrondis pour correspondre au conteneur */
    border-bottom-right-radius: var(--border-radius); /* Bords arrondis pour correspondre au conteneur */
}

.unity-mobile #unity-footer {
    /* Unity default - DO NOT CHANGE */
    display: none;
}

#unity-logo-title-footer {
    /* Unity default - DO NOT CHANGE */
    float:left;
    width: 102px;
    height: 38px;
    background: url('unity-logo-title-footer.png') no-repeat center;
}

#unity-build-title {
    /* Unity default - DO NOT CHANGE */
    float: right;
    margin-right: 10px;
    line-height: 38px;
    font-family: arial;
    font-size: 18px;
    color: var(--text-color-light); /* Assure la visibilité du texte */
}

#unity-fullscreen-button {
    /* Unity default - DO NOT CHANGE */
    cursor:pointer;
    float: right;
    width: 38px;
    height: 38px;
    background: url('fullscreen-button.png') no-repeat center;
    /* Custom style: make it more visually appealing */
    background-color: rgba(255, 255, 255, 0.2); /* Fond semi-transparent */
    border-radius: 50%; /* Bouton rond */
    transition: background-color 0.2s; /* Effet de survol */
}
#unity-fullscreen-button:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

#unity-warning {
    /* Unity default positioning - DO NOT CHANGE */
    position: absolute; /* Keep absolute position for warning banner */
    left: 50%;
    top: 5%;
    transform: translate(-50%);
    background: white; /* Unity default */
    padding: 10px;
    display: none; /* Unity default */
    /* Custom style: blend with theme */
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    color: var(--text-color-dark);
}

/* --- Google AdSense --- */
.adsbygoogle {
    margin-top: 30px;
    margin-bottom: 20px;
    border-radius: var(--border-radius);
    overflow: hidden;
}

/* --- Footer ColorQuest.io --- */
footer {
    background-color: #444; /* Gris foncé */
    color: var(--text-color-light); /* Texte blanc */
    text-align: center;
    padding: 1em 0;
    margin-top: 30px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;
}

/* --- Réactivité pour les petits écrans --- */
@media (max-width: 768px) {
    header h1 {
        font-size: 2em;
    }
    .store {
        flex-direction: column; /* Les boutons des magasins s'empilent */
        align-items: center;
        gap: 10px;
    }
    .store a {
        width: 80%; /* Les boutons prennent une plus grande largeur */
        text-align: center;
    }
    main {
        padding: 15px;
        gap: 20px;
    }
    main section {
        padding: 20px;
    }
    main h2 {
        font-size: 1.8em;
    }
    /* Lorsque Unity est en mode mobile plein écran, masquer le reste du contenu du main */
    body.unity-mobile main {
        display: none;
    }
}