/* ---------------------------------- */
/* STYLES GÉNÉRAUX */
/* ---------------------------------- */
body {
    font-family: 'Arial Rounded MT Bold', sans-serif;
    background: linear-gradient(45deg, #f8e8a6, #f0d47a); /* Jaune pastel */
    margin: 0;
    padding: 20px;
    color: #5e4329; /* Brun foncé */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrer horizontalement */
}

/* ---------------------------------- */
/* TIMER D'ÉVÉNEMENT */
/* ---------------------------------- */
.event-timer-container {
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 10px;
    font-size: 1em;
    color: #7a5230;
    text-align: center;
}

#event-timer {
    font-weight: bold;
}

/* ---------------------------------- */
/* MESSAGES D'ÉVÉNEMENT */
/* ---------------------------------- */
#event-message-container {
    background: rgba(255, 235, 205, 0.9); /* Couleur pêche claire */
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.1em;
    color: #5e4329;
    display: none; /* Caché par défaut */
}

#event-message-container p {
    margin-top: 0;
    margin-bottom: 10px;
}

.event-choices button {
    background: #ff7043; /* Orange vif */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.3s;
    margin: 5px;
}

.event-choices button:hover { background: #f4511e; }
.event-choices button:focus { outline: none; }

/* ---------------------------------- */
/* COMPTEURS */
/* ---------------------------------- */
.counters {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    gap: 20px;
}

.counter {
    background: rgba(255, 255, 255, 0.9); /* Blanc légèrement transparent */
    padding: 15px 30px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* Ombre légère */
    flex: 1;
    text-align: center;
    font-size: 1.2em;
}

/* ---------------------------------- */
/* BRIOCHE - Élément principal */
/* ---------------------------------- */
.brioche {
    width: 250px;
    height: 250px;
    margin: 20px auto;
    cursor: pointer;
    transition: transform 0.1s;
    border: 15px solid #d4ac0d; /* Bordure dorée */
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25); /* Ombre plus douce */
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    background-image: url('brioche.png'); /* Image brioche.png en background */
    background-size: contain; /* Pour que l'image s'adapte au cercle */
    background-repeat: no-repeat; /* Pas de répétition */
    background-position: center; /* Centrer l'image */
    border-radius: 50%; /* Garder le border-radius pour la forme circulaire */
    background-color: transparent; /* Rendre le background color transparent */
}

.brioche:active {
    transform: scale(0.95);
}

.brioche:focus {
    outline: none;
}

/* Lignes de la brioche (remplace les pépites) - CACHÉES */
.brioche-line {
    display: none; /* CACHÉ : Les lignes ne sont plus nécessaires avec l'image */
}

/* CACHÉ : Le compteur de production dans la brioche */
.production-counter {
    display: none; /* CACHÉ : Ne plus afficher le compteur dans la brioche */
}

/* ---------------------------------- */
/* BOUTONS ET INTERACTIONS */
/* ---------------------------------- */
.sell-button {
    background: #ff7043; /* Orange vif */
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 25px;
    font-size: 1.2em;
    cursor: pointer;
    transition: background 0.3s;
    margin: 20px auto;
    display: block;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.sell-button:hover { background: #f4511e; } /* Orange plus foncé au hover */
.sell-button:active { transform: scale(0.95); }
.sell-button:focus {
    outline: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.sell-button.disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none !important;
}

/* Ajout pour enlever le carré vert */
.sell-button:focus {
    outline: none;
}

/* ---------------------------------- */
/* AMÉLIORATIONS */
/* ---------------------------------- */
.upgrades {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 40px;
    padding: 20px;
}

.upgrade {
    background: white;
    padding: 20px;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.upgrade.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f0f0f0;
    transform: none !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
}

.upgrade h3 {
    color: #d4ac0d; /* Doré pour les titres d'amélioration */
    margin: 0 0 10px 0;
}

.upgrade p {
    margin: 5px 0;
    color: #777; /* Gris un peu plus clair */
}

/* ---------------------------------- */
/* EFFETS VISUELS */
/* ---------------------------------- */
.emoji-effect { /* STYLE POUR L'EMOJI (MODIFIÉ - plus de rond blanc) */
    position: absolute;
    font-size: 1.5em; /* Ajustez la taille de l'emoji */
    pointer-events: none;
    animation: float 1s ease-out; /* Réutilise l'animation de flottement */
    color: white; /* Couleur de l'emoji, peut être changé */
    text-shadow: 0 0 5px rgba(0,0,0,0.5); /* Ombre légère pour l'emoji */
}

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

/* ---------------------------------- */
/* RESPONSIVE - Adaptations mobile */
/* ---------------------------------- */
@media (max-width: 600px) {
    .counters { flex-direction: column; }
    .brioche { width: 200px; height: 200px; }
    body { touch-action: manipulation; }
}

/* ---------------------------------- */
/* NOUVEAUX STYLES POUR LES AMÉLIORATIONS CACHÉES */
/* ---------------------------------- */
.upgrade.hidden {
    display: none;
}