/* Reset et styles généraux */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Variables CSS pour les thèmes */
:root {
    /* Thème clair (défaut) */
    --bg-color: #f0f5ff;
    --card-bg-color: #ffffff;
    --container-bg-color: #ffffff;
    --text-color: #333333;
    --heading-color: #ff5a5f;
    --stat-bg-color: #f8f9fa;
    --card-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    --secondary-text-color: #777777;
    --button-bg-color: #f5f5f5;
    --button-text-color: #666666;
    --meter-bg-color: #e0e0e0;
    --border-color: #eeeeee;
    --modal-bg-color: rgba(0, 0, 0, 0.7);
    --active-tab-bg: #ff5a5f;
    --active-tab-color: white;
    --sub-tab-active-bg: #666;
    --sub-tab-active-color: white;
    --header-text-color: white;
}

/* Thème sombre */
.dark-theme {
    --bg-color: #121220;
    --card-bg-color: #2a2a3e;
    --container-bg-color: #16213e;
    --text-color: #ffffff;
    --heading-color: #ff8f8f;
    --stat-bg-color: #2d2d45;
    --card-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    --secondary-text-color: #d0d0d0;
    --button-bg-color: #2a2a3e;
    --button-text-color: #e0e0e0;
    --meter-bg-color: #444460;
    --border-color: #333355;
    --modal-bg-color: rgba(0, 0, 0, 0.8);
    --active-tab-bg: #ff6b6b;
    --active-tab-color: white;
    --sub-tab-active-bg: #4a4a65;
    --sub-tab-active-color: white;
    --card-text-color: #e6e6f0;
    --hover-bg-color: #3a3a60;
    --odd-card-bg: #242440;
    --even-card-bg: #2a2a45;
    --header-text-color: white;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

button {
    cursor: pointer;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    font-weight: 600;
    transition: all 0.2s;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

button:active {
    transform: translateY(0);
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

h1, h2, h3, h4 {
    color: var(--heading-color);
    margin-bottom: 15px;
}

/* Header */
header {
    background-color: #ff5a5f;
    color: white;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.header-container h1 {
    color: var(--header-text-color);
    font-size: 2.2rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.header-container h1:hover {
    transform: scale(1.03);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Dark theme specific adjustments for header */
.dark-theme header {
    background-color: #ff6b6b;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.settings-button {
    background-color: white;
    color: #ff5a5f;
    border-radius: 20px;
    padding: 8px 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-button:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
}

/* Main Container */
main {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}

.game-container {
    background-color: var(--container-bg-color);
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    padding: 20px;
    overflow: hidden;
}

.game-description {
    background-color: var(--stat-bg-color);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
    font-style: italic;
    font-weight: 500;
    color: #555;
}

/* Navigation Tabs */
.navigation-tabs, .sub-navigation-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.tab-button, .sub-tab-button {
    background-color: #f5f5f5;
    color: #666;
    border-radius: 20px;
    padding: 8px 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.tab-button.active, .sub-tab-button.active {
    background-color: #ff5a5f;
    color: white;
}

.tab-button:hover, .sub-tab-button:hover {
    background-color: #e8e8e8;
    transform: translateY(-2px);
}

/* Style distinctif pour distinguer les deux groupes d'onglets */
.sub-navigation-tabs {
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 5px;
}

.sub-tab-button i {
    margin-right: 6px;
}

/* Tab Content */
.tab-content {
    display: none;
    padding: 20px 0;
}

.tab-content.active {
    display: block;
}

/* Samuel Container */
.samuel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    gap: 20px;
    position: relative;
    overflow: visible;
}

.samuel-avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #ffdf7e;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.5s ease;
    position: relative;
    /* Centre le contenu même en cas de grossissement */
    transform-origin: center center;
    /* Éviter que le grossissement n'affecte la disposition */
    margin: 10px auto;
    z-index: 1;
    /* Pour éviter que l'image ne dépasse son conteneur */
    max-width: 100%;
    box-sizing: border-box;
}

.samuel-avatar:active {
    transform: scale(0.95) !important;
}

.samuel-avatar img {
    width: 90%;
    height: 90%;
    object-fit: cover;
    border-radius: 50%;
    transition: all 0.3s ease;
    /* S'assurer que l'image ne dépasse jamais */
    max-width: 100%;
    max-height: 100%;
}

/* Style pour contrôler la taille maximale sur différents appareils */
@media (max-width: 768px) {
    .samuel-avatar {
        width: 160px;
        height: 160px;
    }
    
    .samuel-container {
        overflow: hidden;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .samuel-avatar {
        width: 140px;
        height: 140px;
    }
}

.feed-button {
    background-color: #4cd964;
    color: white;
    font-size: 1.2rem;
    padding: 10px 30px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feed-button:hover {
    background-color: #3cc553;
}

/* Stats Display */
.stats-display {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 15px;
    margin: 20px 0;
}

.stat-box {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.stat-info {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 5px 0;
    font-weight: bold;
    font-size: 1.2rem;
}

.stat-description {
    font-size: 0.8rem;
    color: #777;
}

.stat-box i {
    font-size: 1.5rem;
    color: #ff5a5f;
    margin-bottom: 5px;
}

/* Samuel Story */
.samuel-story {
    margin: 30px 0;
    padding: 20px;
    background-color: #fff8f8;
    border-radius: 10px;
    border-left: 5px solid #ff5a5f;
}

.samuel-story ul {
    margin-left: 20px;
    margin-top: 10px;
}

.samuel-story li {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.samuel-story i {
    color: #ff5a5f;
}

/* Améliorations */
.ameliorations-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.amelioration-card {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.amelioration-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Structure d'en-tête de la carte amélioration */
.amelioration-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.amelioration-icon {
    width: 50px;
    height: 50px;
    background-color: #ff5a5f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.amelioration-title {
    flex: 1;
}

.amelioration-name {
    font-weight: bold;
    color: #ff5a5f;
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.amelioration-level {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

/* Contenu de la carte amélioration */
.amelioration-content {
    padding: 5px 0;
}

.amelioration-description {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 8px;
}

.amelioration-quote {
    font-style: italic;
    font-size: 0.8rem;
    color: #777;
}

/* Style pour les améliorations verrouillées */
.amelioration-card.locked {
    opacity: 0.7;
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
    position: relative;
    cursor: default;
}

.amelioration-card.locked::before {
    content: "🔒";
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 18px;
}

/* Style pour les boutons d'achat d'améliorations */
.amelioration-button-container {
    margin-top: 5px;
    text-align: center;
    width: 100%;
}

.amelioration-buy-button {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    transition: all 0.2s;
}

.amelioration-buy-button.affordable {
    background-color: #4cd964;
    color: white;
}

.amelioration-buy-button.expensive {
    background-color: #ff9500;
    color: white;
}

.amelioration-buy-button.locked {
    background-color: #999;
    color: white;
    opacity: 0.8;
    cursor: not-allowed;
}

.amelioration-buy-button:hover:not(.locked) {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

/* Style pour le mode sombre */
.dark-theme .amelioration-card.locked {
    background-color: #252535;
    border: 1px dashed #444455;
    opacity: 0.7;
}

.dark-theme .amelioration-buy-button.locked {
    background-color: #555566;
    color: #dddddd;
}

/* Bâtiments */
.batiments-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.batiment-card {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.batiment-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Structure d'en-tête de la carte bâtiment */
.batiment-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.batiment-icon {
    width: 50px;
    height: 50px;
    background-color: #ff5a5f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.batiment-title {
    flex: 1;
}

.batiment-name {
    font-weight: bold;
    color: #ff5a5f;
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.batiment-level {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

/* Contenu de la carte bâtiment */
.batiment-content {
    padding: 5px 0;
}

.batiment-description {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 8px;
}

.batiment-production {
    font-style: italic;
    font-size: 0.8rem;
    color: #777;
}

/* Style pour les bâtiments verrouillés */
.batiment-card.locked {
    opacity: 0.7;
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
    position: relative;
    cursor: default;
}

.batiment-card.locked::before {
    content: "🔒";
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 18px;
}

/* Style pour les boutons d'achat de bâtiments */
.batiment-button-container {
    margin-top: 5px;
    text-align: center;
    width: 100%;
}

.batiment-buy-button {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    transition: all 0.2s;
}

.batiment-buy-button.affordable {
    background-color: #4cd964;
    color: white;
}

.batiment-buy-button.expensive {
    background-color: #ff9500;
    color: white;
}

.batiment-buy-button.locked {
    background-color: #999;
    color: white;
    opacity: 0.8;
    cursor: not-allowed;
}

.batiment-buy-button:hover:not(.locked) {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

/* Style pour le mode sombre */
.dark-theme .batiment-card.locked {
    background-color: #252535;
    border: 1px dashed #444455;
    opacity: 0.7;
}

.dark-theme .batiment-buy-button.locked {
    background-color: #555566;
    color: #dddddd;
}

/* Enfants */
.enfants-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.enfant-card {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.enfant-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Structure d'en-tête de la carte enfant */
.enfant-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.enfant-icon {
    width: 50px;
    height: 50px;
    background-color: #ff5a5f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.enfant-title {
    flex: 1;
}

.enfant-name {
    font-weight: bold;
    color: #ff5a5f;
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.enfant-count {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

/* Contenu de la carte enfant */
.enfant-content {
    padding: 5px 0;
}

.enfant-description {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 8px;
}

.enfant-quote {
    font-style: italic;
    font-size: 0.8rem;
    color: #777;
}

/* Style pour les enfants verrouillés */
.enfant-card.locked {
    opacity: 0.7;
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
    position: relative;
    cursor: default;
}

.enfant-card.locked::before {
    content: "🔒";
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 18px;
}

/* Style pour les boutons d'achat d'enfants */
.enfant-button-container {
    margin-top: 5px;
    text-align: center;
    width: 100%;
}

.enfant-buy-button {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    transition: all 0.2s;
}

.enfant-buy-button.affordable {
    background-color: #4cd964;
    color: white;
}

.enfant-buy-button.expensive {
    background-color: #ff9500;
    color: white;
}

.enfant-buy-button.locked {
    background-color: #999;
    color: white;
    opacity: 0.8;
    cursor: not-allowed;
}

.enfant-buy-button:hover:not(.locked) {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

/* Style pour le mode sombre */
.dark-theme .enfant-card.locked {
    background-color: #252535;
    border: 1px dashed #444455;
    opacity: 0.7;
}

.dark-theme .enfant-buy-button.locked {
    background-color: #555566;
    color: #dddddd;
}

/* Style pour le mode sombre */
.dark-theme .enfant-card:hover {
    background-color: var(--hover-bg-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    border-color: #4a4a70;
}

/* Améliorer le contraste du contenu des cartes */
.dark-theme .enfant-name,
.dark-theme .batiment-name {
    color: #ff8f8f !important;
    font-weight: 600 !important;
}

.dark-theme .stat-name {
    color: #ffb0b0;
    font-weight: 600;
}

/* S'assurer que toutes les cartes ont le bon fond, même celles générées dynamiquement */
.dark-theme .enfant-card,
.dark-theme .batiment-card {
    background-color: var(--card-bg-color) !important;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
}

/* Améliorer l'alternance des couleurs pour les listes de cartes */
.dark-theme .enfant-card:nth-child(odd),
.dark-theme .batiment-card:nth-child(odd) {
    background-color: var(--odd-card-bg);
}

.dark-theme .enfant-card:nth-child(even),
.dark-theme .batiment-card:nth-child(even) {
    background-color: var(--even-card-bg);
}

/* Améliorer l'effet de survol des cartes */
.dark-theme .enfant-card:hover,
.dark-theme .batiment-card:hover {
    background-color: var(--hover-bg-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    border-color: #4a4a70;
}

/* Améliorer la visibilité des coûts */
.dark-theme .enfant-cost,
.dark-theme .batiment-cost {
    background-color: #3a3a60;
    color: white;
    border: 1px solid #4a4a75;
    font-weight: 600;
}

/* Améliorer la visibilité des textes dans l'histoire de Samuel */
.dark-theme .samuel-story p,
.dark-theme .samuel-story li {
    color: var(--text-color);
}

/* Textes dans les onglets */
.dark-theme .tab-button,
.dark-theme .sub-tab-button {
    color: #ccccdd !important;
}

.dark-theme .tab-button.active {
    color: white !important;
}

/* Textes dans le tableau de classement */
.dark-theme .leaderboard-header,
.dark-theme .leaderboard-list {
    color: #e0e0e0 !important;
}

/* Texte dans les notifications */
.dark-theme .prestige-message-content p,
.dark-theme .transcend-message-content p,
.dark-theme .challenge-notification-content p,
.dark-theme .achievement-notification-content p {
    color: var(--text-color) !important;
}

/* Correction du contraste pour les textes dans des zones spécifiques */
.dark-theme .enfant-level {
    color: #a0e0ff !important;
    font-weight: 600 !important;
}

/* Amélioration des boutons et contrôles */
.dark-theme button {
    background-color: #3a3a60;
    color: #e0e0f0;
    border: 1px solid #4a4a75 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.dark-theme button:hover {
    background-color: #4a4a75;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.dark-theme button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-theme button:disabled {
    background-color: #2a2a3a;
    color: #8a8a9a;
    border-color: #3a3a4a !important;
    box-shadow: none;
    cursor: not-allowed;
}

/* Styles spécifiques pour différents types de boutons */
.dark-theme .tab-button {
    background-color: #2a2a45;
    color: #b0b0d0;
    border: 1px solid #3a3a55 !important;
}

.dark-theme .tab-button:hover {
    background-color: #3a3a60;
    color: #e0e0f0;
}

.dark-theme .tab-button.active {
    background-color: #ff6b6b;
    color: #ffffff;
    border-color: #ff5252 !important;
    box-shadow: 0 0 8px rgba(255, 107, 107, 0.3);
}

.dark-theme .sub-tab-button {
    background-color: #252540;
    color: #a0a0c0;
    border: 1px solid #333350 !important;
}

.dark-theme .sub-tab-button:hover {
    background-color: #333355;
    color: #d0d0f0;
}

.dark-theme .sub-tab-button.active {
    background-color: #4a4a65;
    color: #ffffff;
    border-color: #5a5a75 !important;
}

/* Bouton de nourriture principal */
.dark-theme .feed-button {
    background-color: #38b000;
    color: white;
    border-color: #42c900 !important;
    box-shadow: 0 0 10px rgba(56, 176, 0, 0.3);
}

.dark-theme .feed-button:hover {
    background-color: #42c900;
    box-shadow: 0 0 15px rgba(56, 176, 0, 0.5);
}

.dark-theme .feed-button:active {
    background-color: #33a000;
}

/* Boutons de réinitialisation */
.dark-theme .reinitialize-button {
    background-color: #e67700;
    color: white;
    border-color: #ff8800 !important;
}

.dark-theme .transcend-button {
    background-color: #8e44ad;
    color: white;
    border-color: #9b59b6 !important;
}

/* Boutons de paramètres */
.dark-theme .theme-button {
    background-color: #5a55c0;
    color: white;
    border-color: #6a65d0 !important;
}

.dark-theme .theme-button:hover {
    background-color: #6a65d0;
}

.dark-theme .reset-button {
    background-color: #d32f2f;
    color: white;
    border-color: #e33e3e !important;
}

.dark-theme .reset-button:hover {
    background-color: #e33e3e;
}

.dark-theme .login-button {
    background-color: #0288d1;
    color: white;
    border-color: #039be5 !important;
}

.dark-theme .login-button:hover {
    background-color: #039be5;
}

/* Boutons spécifiques pour le chat */
.dark-theme .chat-input-container button {
    background-color: #ff6b6b;
    border-color: #ff8585 !important;
}

.dark-theme .chat-input-container button:hover {
    background-color: #ff8585;
}

/* Boutons de classement */
.dark-theme .leaderboard-tab {
    background-color: #2f2f4a;
    color: #b8b8d8;
    border-color: #3f3f5a !important;
}

/* Améliorer les styles du mode sombre */
.dark-theme .stat-card {
    background-color: #2a2a42;
    border: 1px solid #3a3a55;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.dark-theme .stat-card h4 {
    color: #e0e0f0;
}

.dark-theme .stat-value {
    color: #b0e0ff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark-theme .stat-card i {
    color: #ff8f8f;
}

.dark-theme .stat-meter {
    background-color: #1a1a30;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark-theme .meter-fill {
    background: linear-gradient(to right, #ff6b6b, #ff8e8b);
    box-shadow: 0 0 5px rgba(255, 107, 107, 0.5);
}

.dark-theme .chat-container,
.dark-theme .leaderboard-container,
.dark-theme .stats-section,
.dark-theme .defis-section,
.dark-theme .achievements-section,
.dark-theme .reinitialization-section,
.dark-theme .infinite-mode-section {
    background-color: #262639;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.dark-theme .chat-messages,
.dark-theme .leaderboard-content {
    background-color: #1d1d30;
    border: 1px solid #3a3a55;
}

.dark-theme .system-message,
.dark-theme .leaderboard-placeholder,
.dark-theme .login-prompt {
    color: #b0b0c0;
}

.dark-theme .leaderboard-header {
    background-color: #2a2a46;
    color: #e0e0e0;
    border-bottom: 1px solid #3a3a55;
}

.dark-theme .leaderboard-tab {
    background-color: #3a3a60;
    color: #c0c0d5;
}

.dark-theme .leaderboard-tab:hover {
    background-color: #4a4a75;
    color: #e0e0f0;
}

.dark-theme .leaderboard-tab.active {
    background-color: var(--active-tab-bg);
    color: var(--active-tab-color);
}

.dark-theme .chat-input-container input {
    background-color: #1f1f35;
    border: 1px solid #3a3a55;
    color: #e0e0f0;
}

.dark-theme .chat-input-container button {
    background-color: #ff6b6b;
}

.dark-theme .chat-input-container button:hover {
    background-color: #ff5252;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.dark-theme .reinitialize-button {
    background-color: #e67700;
    border: 1px solid #ff8800;
}

.dark-theme .reinitialize-button:hover {
    background-color: #cc6600;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.dark-theme .transcend-button {
    background-color: #8e44ad;
    border: 1px solid #9b59b6;
}

.dark-theme .transcend-button:hover {
    background-color: #7d3c98;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.dark-theme .warning {
    color: #ff6b6b;
}

.dark-theme .infinite-stats div {
    color: #e0e0ff;
}

.dark-theme .infinite-stats i {
    color: #be90d4;
}

/* Améliorer les couleurs du mode sombre pour les cartes de défis et statistiques */
.dark-theme .challenge-card,
.dark-theme .achievement-card,
.dark-theme .stat-card {
    background-color: #2a2a42 !important;
    color: #e0e0f0 !important;
    border: 1px solid #3a3a55 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Amélioration de l'alternance des couleurs pour les listes de défis et statistiques */
.dark-theme .challenge-card:nth-child(odd),
.dark-theme .achievement-card:nth-child(odd),
.dark-theme .stat-card:nth-child(odd) {
    background-color: #242440 !important;
}

.dark-theme .challenge-card:nth-child(even),
.dark-theme .achievement-card:nth-child(even),
.dark-theme .stat-card:nth-child(even) {
    background-color: #2a2a46 !important;
}

/* Amélioration de l'effet de survol des cartes de défis et statistiques */
.dark-theme .challenge-card:hover,
.dark-theme .achievement-card:hover,
.dark-theme .stat-card:hover {
    background-color: #3a3a60 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
    border-color: #4a4a75 !important;
}

/* Amélioration des couleurs de texte pour défis et statistiques */
.dark-theme .challenge-name,
.dark-theme .achievement-name,
.dark-theme .stat-card h4 {
    color: #ff8f8f !important;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark-theme .challenge-description,
.dark-theme .achievement-description {
    color: #d0d0e0 !important;
}

.dark-theme .challenge-reward {
    color: #a5d6a7 !important;
}

.dark-theme .stat-value {
    color: #b0e0ff !important;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Couleurs pour les cartes de défis complétés/réalisations débloquées */
.dark-theme .challenge-card.completed,
.dark-theme .achievement-card.unlocked {
    background-color: #234237 !important;
    border-left: 5px solid #43a047 !important;
}

/* Amélioration des sections défis, réalisations et statistiques */
.dark-theme .defis-section,
.dark-theme .achievements-section,
.dark-theme .stats-section {
    background-color: #222235 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}

.dark-theme .defis-section h3,
.dark-theme .achievements-section h3,
.dark-theme .stats-section h3 {
    color: #ff8f8f !important;
    border-bottom: 1px solid #3a3a55 !important;
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
    font-size: 1.2rem !important;
}

/* Correction des textes dans les barres de statistiques */
.dark-theme .infinite-stats div {
    color: #e0e0ff !important;
}

/* Améliorations des listes */
.dark-theme ul li {
    color: #e0e0f0 !important;
}

.dark-theme ul li i {
    color: #ff8f8f !important;
}

/* Amélioration des interfaces d'entrée */
.dark-theme input, .dark-theme textarea, .dark-theme select {
    background-color: #1f1f35 !important;
    color: #ffffff !important;
    border: 1px solid #3f3f5f !important;
}

.dark-theme input::placeholder, .dark-theme textarea::placeholder {
    color: #7f7f9f !important;
}

/* Style pour la description du jeu */
.dark-theme .game-description {
    background-color: #2a2a3e !important;
    color: #ffffff !important;
}

/* Augmentation du contraste pour certains textes difficiles à lire */
.dark-theme .section-description {
    color: #d0d0ff !important;
    margin-bottom: 15px !important;
    font-weight: 500 !important;
}

/* Bordure pour le bas de page avec couleur de texte améliorée */
.dark-theme footer {
    color: #a0a0b5 !important;
    border-top: 1px solid #333355 !important;
    padding-top: 20px !important;
}

/* Style pour les messages de confirmation et fenêtres modales */
.dark-theme .prestige-message-content,
.dark-theme .transcend-message-content,
.dark-theme .challenge-notification-content,
.dark-theme .achievement-notification-content,
.dark-theme .settings-content {
    background-color: #1d1d30 !important;
    border: 1px solid #3a3a55 !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5) !important;
}

.dark-theme .prestige-message-content h3,
.dark-theme .transcend-message-content h3,
.dark-theme .challenge-notification-content h3,
.dark-theme .achievement-notification-content h3,
.dark-theme .settings-content h3 {
    color: #ff8f8f !important;
    font-size: 1.3rem !important;
}

/* Amélioration générale des cartes en mode sombre */
.dark-theme .amelioration-card,
.dark-theme .batiment-card,
.dark-theme .enfant-card {
    background-color: #2a2a42 !important;
    color: #e0e0f0 !important;
    border: 1px solid #3a3a55 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Amélioration de l'alternance des couleurs pour les listes de cartes */
.dark-theme .amelioration-card:nth-child(odd),
.dark-theme .batiment-card:nth-child(odd),
.dark-theme .enfant-card:nth-child(odd) {
    background-color: #242440 !important;
}

.dark-theme .amelioration-card:nth-child(even),
.dark-theme .batiment-card:nth-child(even),
.dark-theme .enfant-card:nth-child(even) {
    background-color: #2a2a46 !important;
}

/* Amélioration de l'effet de survol des cartes */
.dark-theme .amelioration-card:hover,
.dark-theme .batiment-card:hover,
.dark-theme .enfant-card:hover {
    background-color: #3a3a60 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
    border-color: #4a4a75 !important;
}

/* Amélioration des couleurs de texte pour meilleure lisibilité */
.dark-theme .amelioration-name,
.dark-theme .batiment-name,
.dark-theme .enfant-name {
    color: #ff8f8f !important;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark-theme .amelioration-description,
.dark-theme .batiment-description,
.dark-theme .enfant-description {
    color: #d0d0e0 !important;
}

.dark-theme .amelioration-quote,
.dark-theme .batiment-production,
.dark-theme .enfant-quote {
    color: #b0b0c5 !important;
}

.dark-theme .amelioration-level,
.dark-theme .batiment-level,
.dark-theme .enfant-count {
    color: #9fa8da !important;
}

/* Dark theme buttons */
.dark-theme .amelioration-buy-button.affordable,
.dark-theme .batiment-buy-button.affordable,
.dark-theme .enfant-buy-button.affordable {
    background-color: #38b000;
    box-shadow: 0 0 8px rgba(56, 176, 0, 0.3);
}

.dark-theme .amelioration-buy-button.expensive,
.dark-theme .batiment-buy-button.expensive,
.dark-theme .enfant-buy-button.expensive {
    background-color: #cc3333;
    box-shadow: 0 0 8px rgba(204, 51, 51, 0.3);
}

.dark-theme .amelioration-buy-button:hover:not(.locked),
.dark-theme .batiment-buy-button:hover:not(.locked),
.dark-theme .enfant-buy-button:hover:not(.locked) {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.dark-theme .amelioration-buy-button.locked,
.dark-theme .batiment-buy-button.locked,
.dark-theme .enfant-buy-button.locked {
    background-color: #444455;
    color: #aaaaaa;
    border: 1px dashed #555566;
}

/* Assurer la visibilité des liens */
.dark-theme a {
    color: #6495ed !important;
    text-decoration: none !important;
}

.dark-theme a:hover {
    color: #92c8ff !important;
    text-decoration: underline !important;
}

/* Style pour les tableaux */
.dark-theme table {
    border-collapse: collapse !important;
    background-color: #242440 !important;
    color: #e0e0e0 !important;
}

.dark-theme th {
    background-color: #2a2a46 !important;
    color: #e0e0e0 !important;
    border: 1px solid #3a3a55 !important;
    padding: 8px !important;
}

.dark-theme td {
    border: 1px solid #3a3a55 !important;
    padding: 8px !important;
}

/* Statistiques section */
.stats-section {
    background-color: #f8f9fa;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stats-section:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.stats-section h3 {
    color: #ff5a5f;
    font-size: 1.3rem;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #ff5a5f;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stats-section h3 i {
    font-size: 1.4rem;
    background-color: #ff5a5f;
    color: white;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.stat-card {
    background-color: white;
    border-radius: 12px;
    padding: 20px 15px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #f0f0f0;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    border-color: #ddeeff;
}

.stat-card i {
    font-size: 2.2rem;
    color: #ff5a5f;
    margin-bottom: 15px;
    background-color: #fff8f8;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(255, 90, 95, 0.1);
}

.stat-card h4 {
    margin-bottom: 12px;
    color: #444;
    font-size: 1.1rem;
    font-weight: 600;
}

.stat-value {
    font-weight: bold;
    font-size: 1.5rem;
    color: #333;
    margin-top: 5px;
}

/* Chat section */
#chat-content h2 {
    margin-bottom: 20px;
    color: #ff5a5f;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.6rem;
}

#chat-content h2 i {
    background-color: #ff5a5f;
    color: white;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2rem;
}

.chat-container {
    background-color: #f8f9fa;
    border-radius: 15px;
    padding: 20px;
    height: 500px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    border: 1px solid #eaeaea;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    background-color: white;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid #eee;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.03);
}

.system-message {
    color: #666;
    font-style: italic;
    background-color: #f9f9f9;
    padding: 10px 15px;
    border-radius: 8px;
    margin: 8px 0;
    border-left: 3px solid #ccc;
}

.chat-input-container {
    display: flex;
    gap: 12px;
}

.chat-input-container input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 0.95rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: all 0.2s;
}

.chat-input-container input:focus {
    border-color: #ff5a5f;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.1);
}

.chat-input-container button {
    background-color: #ff5a5f;
    color: white;
    padding: 10px 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.chat-input-container button:hover {
    background-color: #ff4146;
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(255, 65, 70, 0.2);
}

.login-prompt {
    text-align: center;
    color: #666;
    font-size: 0.95rem;
    margin-top: 15px;
    padding: 10px;
    background-color: #f0f4f8;
    border-radius: 8px;
    border: 1px dashed #ccc;
}

/* Classement section */
#classement-content h2 {
    margin-bottom: 20px;
    color: #ff5a5f;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.6rem;
}

#classement-content h2 i {
    background-color: #ff5a5f;
    color: white;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2rem;
}

.leaderboard-container {
    background-color: var(--card-bg-color);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
    padding: 20px;
    margin-top: 20px;
}

.leaderboard-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    overflow-x: auto;
}

.leaderboard-tab {
    background-color: var(--button-bg-color);
    color: var(--text-color);
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    flex-shrink: 0;
}

.leaderboard-tab:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px);
}

.leaderboard-tab.active {
    background-color: var(--heading-color);
    color: white;
}

.dark-theme .leaderboard-tab {
    background-color: #252540;
    color: #b0b0d0;
}

.dark-theme .leaderboard-tab:hover {
    background-color: #333355;
}

.dark-theme .leaderboard-tab.active {
    background-color: var(--heading-color);
    color: white;
}

.leaderboard-content {
    display: none;
}

.leaderboard-content.active {
    display: block;
}

.leaderboard-header {
    display: flex;
    padding: 10px;
    border-bottom: 2px solid var(--border-color);
    font-weight: bold;
    background-color: var(--stat-bg-color);
    border-radius: 5px 5px 0 0;
}

.leaderboard-player {
    display: flex;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.leaderboard-player:last-child {
    border-bottom: none;
}

.leaderboard-player:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.dark-theme .leaderboard-player:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.rank-column {
    width: 50px;
    text-align: center;
    font-weight: bold;
}

.player-column {
    flex: 1;
    padding: 0 10px;
}

.score-column {
    width: 150px;
    text-align: right;
    font-weight: 600;
}

.leaderboard-placeholder, .leaderboard-loading {
    padding: 20px;
    text-align: center;
    color: var(--secondary-text-color);
}

.leaderboard-loading {
    font-style: italic;
}

.rainbow-text {
    background: linear-gradient(to right, #ff5a5f, #ffbd4a, #66cc99, #4a90e2, #c389fa);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: rainbow-animation 3s linear infinite;
}

@keyframes rainbow-animation {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Dark theme improvements for Stats, Chat, and Leaderboard */
.dark-theme .stats-section {
    background-color: #222235;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.dark-theme .stats-section h3 {
    color: #ff8f8f;
    border-bottom-color: #ff8f8f;
}

.dark-theme .stats-section h3 i {
    background-color: #ff8f8f;
}

.dark-theme .chat-container,
.dark-theme .leaderboard-container {
    background-color: #222235;
    border-color: #333355;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.dark-theme #chat-content h2,
.dark-theme #classement-content h2 {
    color: #ff8f8f;
}

.dark-theme #chat-content h2 i,
.dark-theme #classement-content h2 i {
    background-color: #ff8f8f;
}

.dark-theme .chat-messages,
.dark-theme .leaderboard-content {
    background-color: #1d1d30;
    border-color: #333355;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}

.dark-theme .system-message {
    background-color: #262639;
    border-left-color: #444460;
    color: #b0b0c0;
}

.dark-theme .login-prompt {
    background-color: #262639;
    border-color: #444460;
    color: #b0b0c0;
}

.dark-theme .leaderboard-tab {
    background-color: #2a2a45;
    color: #b8b8d8;
}

.dark-theme .leaderboard-tab:hover {
    background-color: #3a3a60;
    color: #d0d0f0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.dark-theme .leaderboard-tab.active {
    background-color: #ff6b6b;
    color: white;
    box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);
}

.dark-theme .leaderboard-header {
    background-color: #2a2a46;
    color: #e0e0e0;
    border-bottom-color: #333355;
}

.dark-theme .score-column {
    color: #ff8f8f;
}

.dark-theme .leaderboard-player {
    border-bottom-color: #333355;
}

.dark-theme .leaderboard-player:hover {
    background-color: #2a2a46;
}

.dark-theme .leaderboard-player.current-player {
    background-color: #33273a;
    box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.3);
}

.dark-theme .leaderboard-placeholder,
.dark-theme .leaderboard-loading {
    background-color: #1d1d30;
    color: #a0a0b5;
}

.dark-theme .stat-card {
    background-color: #2a2a42;
    border-color: #3a3a55;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.dark-theme .stat-card:hover {
    border-color: #444470;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.dark-theme .stat-card i {
    background-color: #331f24;
    color: #ff8f8f;
    box-shadow: 0 4px 8px rgba(255, 143, 143, 0.15);
}

.dark-theme .stat-card h4 {
    color: #e0e0f0;
}

.dark-theme .stat-value {
    color: #b0e0ff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Amélioration des sous-onglets */
.sub-navigation-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 8px 5px;
    border-bottom: 2px solid #f0f0f0;
}

.sub-tab-button {
    background-color: #f0f0f0;
    color: #555;
    border-radius: 20px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sub-tab-button i {
    font-size: 1.1rem;
    color: #777;
    transition: color 0.2s ease;
}

.sub-tab-button:hover {
    background-color: #e5e5e5;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.sub-tab-button:hover i {
    color: #ff5a5f;
}

.sub-tab-button.active {
    background-color: #666;
    color: white;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.sub-tab-button.active i {
    color: white;
}

/* Dark mode pour les sous-onglets */
.dark-theme .sub-navigation-tabs {
    border-bottom-color: #333355;
}

.dark-theme .sub-tab-button {
    background-color: #252540;
    color: #b0b0d0;
    border: 1px solid #333350;
}

.dark-theme .sub-tab-button i {
    color: #8f8fa5;
}

.dark-theme .sub-tab-button:hover {
    background-color: #303050;
    color: #d0d0f0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.dark-theme .sub-tab-button:hover i {
    color: #ff8f8f;
}

.dark-theme .sub-tab-button.active {
    background-color: #4a4a65;
    color: #ffffff;
    border-color: #5a5a75;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Notification d'indication interactive */
.interactive-hint {
    position: relative;
    overflow: hidden;
}

.interactive-hint::after {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background-color: #ff5a5f;
    transform: rotate(45deg);
}

.dark-theme .interactive-hint::after {
    background-color: #ff8f8f;
}

/* Modal des paramètres */
.settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(3px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1001;
    transition: all 0.3s ease;
    opacity: 0;
}

.settings-modal.active {
    display: flex;
    opacity: 1;
    animation: modalFadeIn 0.3s ease forwards;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.settings-content {
    background-color: white;
    border-radius: 18px;
    padding: 30px;
    width: 90%;
    max-width: 550px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transform: translateY(-20px);
    transition: all 0.3s ease;
    animation: modalContentSlideIn 0.4s ease forwards;
    border: 1px solid #eaeaea;
}

@keyframes modalContentSlideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

.settings-header h2 {
    margin: 0;
    color: #ff5a5f;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-header h2 i {
    background-color: #ff5a5f;
    color: white;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.1rem;
}

.settings-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: #777;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.settings-close:hover {
    color: #ff5a5f;
    background-color: #fff0f0;
    transform: none;
}

.settings-options {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.settings-option {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #eee;
}

.settings-option:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.settings-option h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #444;
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-option h3::before {
    content: "";
    display: block;
    width: 6px;
    height: 20px;
    background-color: #ff5a5f;
    border-radius: 3px;
}

.settings-option p {
    margin: 0;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

.settings-button-group {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.theme-button {
    background-color: #6a5acd;
    color: white;
    border-radius: 10px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    transition: all 0.2s;
    font-weight: 600;
    border: none;
    box-shadow: 0 3px 8px rgba(106, 90, 205, 0.2);
}

.theme-button:hover {
    background-color: #574ab9;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(106, 90, 205, 0.3);
}

.theme-button i {
    font-size: 1.1rem;
}

.reset-button {
    background-color: #ff3b30;
    color: white;
    border-radius: 10px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
    font-weight: 600;
    border: none;
    box-shadow: 0 3px 8px rgba(255, 59, 48, 0.2);
}

.reset-button:hover {
    background-color: #e02e24;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(255, 59, 48, 0.3);
}

.login-button {
    background-color: #007aff;
    color: white;
    border-radius: 10px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
    font-weight: 600;
    border: none;
    box-shadow: 0 3px 8px rgba(0, 122, 255, 0.2);
}

.login-button:hover {
    background-color: #0062cc;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 122, 255, 0.3);
}

/* Animation des icônes du mode sombre */
.dark-theme .theme-button i.fa-moon {
    display: none;
}

.dark-theme .theme-button i.fa-sun {
    display: inline-block;
    animation: rotate-sun 1s ease;
}

.theme-button i.fa-sun {
    display: none;
}

.theme-button i.fa-moon {
    display: inline-block;
}

@keyframes rotate-sun {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Dark theme for Settings */
.dark-theme .settings-content {
    background-color: #1d1d30;
    border-color: #333355;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.dark-theme .settings-header {
    border-bottom-color: #333355;
}

.dark-theme .settings-header h2 {
    color: #ff8f8f;
}

.dark-theme .settings-header h2 i {
    background-color: #ff8f8f;
}

.dark-theme .settings-close {
    color: #b0b0c0;
}

.dark-theme .settings-close:hover {
    color: #ff8f8f;
    background-color: #332222;
}

.dark-theme .settings-option {
    background-color: #262639;
    border-color: #333355;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.dark-theme .settings-option:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}

.dark-theme .settings-option h3 {
    color: #e0e0f0;
}

.dark-theme .settings-option h3::before {
    background-color: #ff8f8f;
}

.dark-theme .settings-option p {
    color: #b0b0c0;
}

.dark-theme .theme-button {
    background-color: #5a55c0;
    box-shadow: 0 3px 8px rgba(90, 85, 192, 0.3);
}

.dark-theme .theme-button:hover {
    background-color: #4a45b0;
    box-shadow: 0 5px 12px rgba(90, 85, 192, 0.4);
}

.dark-theme .reset-button {
    background-color: #d32f2f;
    box-shadow: 0 3px 8px rgba(211, 47, 47, 0.3);
}

.dark-theme .reset-button:hover {
    background-color: #c12525;
    box-shadow: 0 5px 12px rgba(211, 47, 47, 0.4);
}

.dark-theme .login-button {
    background-color: #0288d1;
    box-shadow: 0 3px 8px rgba(2, 136, 209, 0.3);
}

.dark-theme .login-button:hover {
    background-color: #0277bd;
    box-shadow: 0 5px 12px rgba(2, 136, 209, 0.4);
}

/* Indicateur de statut de synchronisation */
.user-profile {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sync-status {
    display: flex;
    align-items: center;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    transition: all 0.3s ease;
}

.status-indicator i {
    font-size: 1rem;
}

.status-indicator.offline {
    background-color: rgba(255, 90, 95, 0.3);
}

.status-indicator.online {
    background-color: rgba(76, 217, 100, 0.3);
}

.status-indicator.syncing {
    background-color: rgba(255, 149, 0, 0.3);
}

.status-indicator.error {
    background-color: rgba(255, 59, 48, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}

/* Media queries pour appareils mobiles */
@media (max-width: 768px) {
    .status-text {
        display: none;
    }
    
    .status-indicator {
        padding: 6px;
    }
}

.dark-theme .samuel-story {
    background-color: #2a2a3e !important;
    border-left: 5px solid #ff6b6b;
    color: #ffffff !important;
}

.dark-theme .samuel-story p,
.dark-theme .samuel-story li {
    color: #ffffff !important;
}

.dark-theme .stat-box {
    background-color: #2d2d45 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.dark-theme .stat-box .stat-info {
    color: #ffffff !important;
}

.dark-theme .stat-box .stat-description {
    color: #d0d0d0 !important;
}

.dark-theme .stat-box i {
    color: #ff8f8f !important;
}

/* Styles pour la boutique cosmétique */
.boutique-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.boutique-section {
    background-color: var(--card-bg-color);
    border-radius: 10px;
    padding: 15px;
    box-shadow: var(--card-shadow);
}

.boutique-section h3 {
    color: var(--heading-color);
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.cosmetics-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.cosmetic-card {
    background-color: var(--container-bg-color);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cosmetic-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.cosmetic-card.unlocked {
    border: 2px solid #4cd964;
}

.cosmetic-card.active {
    border: 2px solid gold;
    background-color: var(--hover-bg-color);
}

.cosmetic-card.locked {
    opacity: 0.7;
}

.cosmetic-name {
    font-weight: bold;
    margin-bottom: 5px;
}

.cosmetic-cost {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    color: var(--secondary-text-color);
}

.cosmetic-cost i {
    margin-right: 5px;
    color: gold;
}

.cosmetic-preview {
    height: 30px;
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cosmetic-preview.color-preview {
    width: 30px;
    border-radius: 50%;
}

.cosmetic-preview.rainbow {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

.cosmetic-preview.prefix-preview {
    font-weight: bold;
}

.cosmetic-status {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 0.8rem;
}

.cosmetic-status i {
    color: #4cd964;
}

.preview-section {
    background-color: var(--card-bg-color);
    border-radius: 10px;
    padding: 15px;
    box-shadow: var(--card-shadow);
    margin-top: 20px;
}

.preview-section h3 {
    color: var(--heading-color);
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.name-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.preview-label {
    font-weight: bold;
    color: var(--secondary-text-color);
}

.name-preview-box {
    background-color: var(--container-bg-color);
    padding: 10px 20px;
    border-radius: 5px;
    display: inline-block;
    font-size: 1.2rem;
    min-width: 200px;
    text-align: center;
}

/* Style pour l'effet arc-en-ciel */
.rainbow-text {
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    -webkit-background-clip: text;
    color: transparent;
    animation: rainbow-animation 5s linear infinite;
    background-size: 200% 100%;
}

@keyframes rainbow-animation {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Adaptation mobile pour la boutique */
@media (max-width: 768px) {
    .boutique-grid {
        grid-template-columns: 1fr;
    }
}

@keyframes rainbow-animation {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Style pour le footer et le coeur */
footer {
    margin-top: 30px;
    text-align: center;
    padding: 15px 0;
    color: var(--secondary-text-color);
}

footer a {
    color: var(--heading-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #ff8f8f;
    text-decoration: underline;
}

.heart {
    display: inline-block;
    animation: heartbeat 1.5s ease infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Adaptation mobile pour la boutique */
@media (max-width: 768px) {
    .boutique-grid {
        grid-template-columns: 1fr;
    }
}

/* Styles du mode sombre pour les onglets */
.dark-theme .navigation-tabs, .dark-theme .sub-navigation-tabs {
    border-color: #333355;
}

.dark-theme .tab-button, .dark-theme .sub-tab-button {
    background-color: #252540;
    color: #b0b0d0;
    border: 1px solid #333350;
}

.dark-theme .tab-button:hover, .dark-theme .sub-tab-button:hover {
    background-color: #303050;
    color: #d0d0f0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.dark-theme .tab-button.active, .dark-theme .sub-tab-button.active {
    background-color: #ff6b6b;
    color: #ffffff;
    border-color: #ff8f8f;
    box-shadow: 0 3px 8px rgba(255, 107, 107, 0.3);
}

.dark-theme .sub-navigation-tabs {
    border-top: 1px solid #333355;
}

/* Styles pour les cosmétiques premium */
.aura-preview, .background-preview {
    height: 80px !important; /* Augmenté de 60px à 80px */
    width: 80px !important; /* Augmenté de 60px à 80px */
    margin: 10px auto;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    background-position: center;
    background-size: cover;
    position: relative;
    border: 2px solid #ddd; /* Ajout d'une bordure */
    overflow: hidden; /* Pour que les images ne débordent pas */
}

/* Styles pour les auras */
.aura-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1.05); /* Légère augmentation de la taille */
    transition: transform 0.3s ease;
}

.aura-preview:hover {
    transform: scale(1.15);
}

.aura-preview::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.7);
}

/* Améliorations pour les arrière-plans */
.background-preview {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    position: relative;
}

.background-preview:hover {
    transform: scale(1.15);
}

/* Ajout d'un effet d'overlay pour mieux voir les images */
.background-preview::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.background-preview:hover::after {
    background: rgba(0, 0, 0, 0.1);
}

/* Arrière-plans avec preload pour éviter les problèmes de chargement */
.beach-bg {
    background-image: url('../img/backgrounds/beach.jpg');
    background-size: cover;
}

.space-bg {
    background-image: url('../img/backgrounds/space.jpg');
    background-size: cover;
}

.castle-bg {
    background-image: url('../img/backgrounds/castle.jpg');
    background-size: cover;
}

.hell-bg {
    background-image: url('../img/backgrounds/hell.jpg');
    background-size: cover;
}

.heaven-bg {
    background-image: url('../img/backgrounds/heaven.jpg');
    background-size: cover;
}

.matrix-bg {
    background-image: url('../img/backgrounds/matrix.jpg');
    background-size: cover;
}

.cosmos-bg {
    background-image: url('../img/backgrounds/cosmos.jpg');
    background-size: cover;
}

/* Animations pour les auras */
.flame-aura {
    background: linear-gradient(to bottom, #ff8a00, #e52e71);
    animation: flame-pulse 2s infinite alternate;
}

.ice-aura {
    background: linear-gradient(to bottom, #a1c4fd, #c2e9fb);
    animation: ice-shimmer 3s infinite linear;
}

.storm-aura {
    background: linear-gradient(to bottom, #4c75b7, #9fa3e6);
    animation: storm-flash 4s infinite;
}

.divine-aura {
    background: linear-gradient(to bottom, #f5f7fa, #c3cfe2);
    animation: divine-glow 3s infinite;
}

.cosmic-aura {
    background: linear-gradient(to bottom, #2c0845, #7303c0, #03001e);
    animation: cosmic-swirl 5s infinite linear;
}

.void-aura {
    background: linear-gradient(to bottom, #0a0a0a, #292929);
    animation: void-pulse 4s infinite;
}

.infinity-aura {
    background: linear-gradient(45deg, #00c3ff, #ffff1c, #ff0000, #00ff00, #0000ff);
    background-size: 1000% 1000%;
    animation: infinity-flow 10s infinite linear;
}

/* Animations pour les auras */
@keyframes flame-pulse {
    0% { box-shadow: 0 0 10px 3px rgba(255, 138, 0, 0.7); }
    100% { box-shadow: 0 0 20px 8px rgba(229, 46, 113, 0.9); }
}

@keyframes ice-shimmer {
    0% { box-shadow: 0 0 10px 3px rgba(161, 196, 253, 0.7); }
    50% { box-shadow: 0 0 15px 5px rgba(194, 233, 251, 0.8); }
    100% { box-shadow: 0 0 10px 3px rgba(161, 196, 253, 0.7); }
}

@keyframes storm-flash {
    0% { box-shadow: 0 0 8px 2px rgba(76, 117, 183, 0.6); }
    5% { box-shadow: 0 0 20px 10px rgba(159, 163, 230, 0.9); }
    15% { box-shadow: 0 0 8px 2px rgba(76, 117, 183, 0.6); }
    20% { box-shadow: 0 0 15px 7px rgba(159, 163, 230, 0.8); }
    100% { box-shadow: 0 0 8px 2px rgba(76, 117, 183, 0.6); }
}

@keyframes divine-glow {
    0% { box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.8); }
    50% { box-shadow: 0 0 25px 12px rgba(255, 255, 255, 0.9); }
    100% { box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.8); }
}

@keyframes cosmic-swirl {
    0% { transform: rotate(0deg); box-shadow: 0 0 15px 5px rgba(115, 3, 192, 0.7); }
    100% { transform: rotate(360deg); box-shadow: 0 0 15px 5px rgba(115, 3, 192, 0.7); }
}

@keyframes void-pulse {
    0% { box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.7); }
    50% { box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.9); }
    100% { box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.7); }
}

@keyframes infinity-flow {
    0% { background-position: 0% 50%; box-shadow: 0 0 15px 5px rgba(255, 0, 255, 0.7); }
    50% { background-position: 100% 50%; box-shadow: 0 0 20px 10px rgba(0, 255, 255, 0.8); }
    100% { background-position: 0% 50%; box-shadow: 0 0 15px 5px rgba(255, 0, 255, 0.7); }
}

/* Style pour les items de luxe */
.boutique-section h3 .fas.fa-gem,
.boutique-section h3 .fas.fa-magic,
.boutique-section h3 .fas.fa-image {
    color: #ffd700;
}

/* Style indiquant le prix très élevé */
.cosmetic-card .cosmetic-cost {
    position: relative;
}

.cosmetic-card.locked .cosmetic-cost {
    font-weight: bold;
}

/* Styles pour les items de luxe avec des prix très élevés */
.cosmetic-card.locked[data-cost="1000000"] .cosmetic-cost,
.cosmetic-card.locked[data-cost="5000000"] .cosmetic-cost,
.cosmetic-card.locked[data-cost="10000000"] .cosmetic-cost {
    color: #ffa600;
}

.cosmetic-card.locked[data-cost="50000000"] .cosmetic-cost,
.cosmetic-card.locked[data-cost="100000000"] .cosmetic-cost {
    color: #ff5600;
}

.cosmetic-card.locked[data-cost="500000000"] .cosmetic-cost,
.cosmetic-card.locked[data-cost="1000000000"] .cosmetic-cost {
    color: #ff0000;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
    animation: price-pulse 2s infinite alternate;
}

@keyframes price-pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

.cosmetic-bonus {
    font-size: 0.8em;
    color: #0066cc;
    margin: 5px;
    padding: 5px;
    background-color: rgba(230, 245, 255, 0.5);
    border-radius: 4px;
    text-align: center;
}

.dark-theme .cosmetic-bonus {
    color: #77ccff;
    background-color: rgba(0, 30, 60, 0.5);
}

/* Styles pour les arrière-plans du corps de la page */
.bg-beach {
    background: url('../img/backgrounds/beach.jpg') no-repeat center center fixed;
    background-size: cover;
}

.bg-space {
    background: url('../img/backgrounds/space.jpg') no-repeat center center fixed;
    background-size: cover;
}

.bg-castle {
    background: url('../img/backgrounds/castle.jpg') no-repeat center center fixed;
    background-size: cover;
}

.bg-hell {
    background: url('../img/backgrounds/hell.jpg') no-repeat center center fixed;
    background-size: cover;
}

.bg-heaven {
    background: url('../img/backgrounds/heaven.jpg') no-repeat center center fixed;
    background-size: cover;
}

.bg-matrix {
    background: url('../img/backgrounds/matrix.jpg') no-repeat center center fixed;
    background-size: cover;
}

.bg-cosmos {
    background: url('../img/backgrounds/cosmos.jpg') no-repeat center center fixed;
    background-size: cover;
}

/* Ajustement de l'opacité du conteneur de jeu quand un arrière-plan est actif */
.bg-beach .game-container,
.bg-space .game-container,
.bg-castle .game-container,
.bg-hell .game-container,
.bg-heaven .game-container,
.bg-matrix .game-container,
.bg-cosmos .game-container {
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Ajustements pour le thème sombre */
.dark-theme.bg-beach .game-container,
.dark-theme.bg-space .game-container,
.dark-theme.bg-castle .game-container,
.dark-theme.bg-hell .game-container,
.dark-theme.bg-heaven .game-container,
.dark-theme.bg-matrix .game-container,
.dark-theme.bg-cosmos .game-container {
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.cosmetic-tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    z-index: 1000;
    max-width: 250px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
}

.cosmetic-tooltip.visible {
    opacity: 1;
    visibility: visible;
}

.cosmetic-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
}

.tooltip-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
    color: #ff5a5f;
}

.tooltip-description {
    font-size: 13px;
    margin-bottom: 8px;
}

.tooltip-bonus {
    font-size: 14px;
    color: #00cc99;
    margin-bottom: 8px;
}

.tooltip-price {
    font-size: 12px;
    color: #ffcc00;
    font-weight: bold;
}

/* Style pour le thème sombre */
.dark-theme .cosmetic-tooltip {
    background-color: rgba(40, 40, 60, 0.95);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.dark-theme .cosmetic-tooltip::after {
    border-color: rgba(40, 40, 60, 0.95) transparent transparent transparent;
}

.dark-theme .tooltip-title {
    color: #ff8f8f;
}

.dark-theme .tooltip-bonus {
    color: #00ffaa;
}

.dark-theme .tooltip-price {
    color: #ffdd44;
}