/* =================================================================
   STYLES POUR TOUTES LES CARTES D'INFORMATION
   Ce fichier contient les styles pour :
   - La fiche d'information des planètes (#planet-info-container)
   - La carte de bienvenue (#earth-welcome-card)
   - La carte de victoire (#victory-card)
================================================================== */

/* --- 1. SUPERPOSITION POUR LA FICHE D'INFO DES PLANÈTES --- */
/* Style de base pour TOUS les conteneurs de cartes (planètes, bienvenue, victoire) */
#planet-info-container, .info-card-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%; 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 200;
    pointer-events: none; /* Le conteneur lui-même n'est pas cliquable */
}
/* Classe pour rendre n'importe quel conteneur de carte visible */
#planet-info-container.visible, .info-card-container.visible {
    opacity: 1;
    visibility: visible;
}

/* Conteneur interne qui gère le fond flou et le centrage */
.info-card-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px 0; /* Espace en haut et en bas */
    overflow-y: auto; /* Permet de scroller si la carte est plus haute que l'écran */
    box-sizing: border-box;
    background-color: rgba(11, 12, 16, 0.5);
    backdrop-filter: blur(8px);
}

/* --- 2. STYLE DE BASE COMMUN À TOUTES LES CARTES --- */
.info-card-content {
    /* Effet de halo interne avec un dégradé radial */
    background-image: radial-gradient(circle at 50% 0%, rgba(var(--card-color-rgb, 31, 40, 51), 0.3) 0%, rgba(11, 12, 16, 0.9) 85%);
    border: 1px solid var(--card-color, #66FCF1); /* Utilise la couleur de la planète */
    border-radius: 8px;
    padding: 20px 25px;
    width: 90%;
    max-width: 400px;
    text-align: left;
    font-family: 'Sora', sans-serif;
    color: rgba(var(--card-color-rgb, 197, 198, 199), 0.8); /* Texte basé sur la couleur */
    flex-shrink: 0; /* Empêche la carte de rétrécir dans un conteneur flex */
    pointer-events: auto; /* Permet les interactions à l'intérieur de la carte */
    align-self: center; /* Centre la carte verticalement dans son conteneur */
    position: relative; /* Contexte de positionnement pour les enfants absolus */
}

/* Style pour le texte à l'intérieur des cartes, pour un look "ordinateur de bord" */
.info-card-content div {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap; /* Permet au texte d'aller à la ligne si besoin */
}
.decode-text {
    min-height: 1.2em; /* Empêche la carte de "sauter" pendant le décodage */
}

/* Style pour le bouton sur la carte de victoire */
.victory-button {
    position: absolute; /* Positionnement absolu par rapport à la carte */
    bottom: 35px; /* Positionné sous la barre de chrono */
    left: 50%; /* Centré horizontalement */
    transform: translateX(-50%); /* Ajustement pour un centrage parfait */
    padding: 10px 20px;
    background-color: #FFD700; /* Couleur Or */
    color: #0B0C10; /* Texte noir */
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    white-space: nowrap; /* Empêche le texte du bouton d'aller à la ligne */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.victory-button:hover {
    transform: translateX(-50%) scale(1.05); /* Combine les deux transformations pour un centrage stable */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

/* --- 3. VARIABLES DE COULEUR SPÉCIFIQUES À CHAQUE PLANÈTE --- */
.info-card-kepler-186f { --card-color: #c1440e; --card-color-rgb: 193, 68, 14; }
.info-card-trappist-1e { --card-color: #a6d5e3; --card-color-rgb: 166, 213, 227; }
.info-card-proxima-centauri-b { --card-color: #E06C75; --card-color-rgb: 224, 108, 117; }
.info-card-kepler-452b { --card-color: #45a29e; --card-color-rgb: 69, 162, 158; }
.info-card-gliese-581g { --card-color: #d8caaf; --card-color-rgb: 216, 202, 175; }
.info-card-kepler-22b { --card-color: #3e54e8; --card-color-rgb: 62, 84, 232; }
.info-card-lhs-1140-b { --card-color: #c3b59b; --card-color-rgb: 195, 181, 155; }
.info-card-kepler-1649c { --card-color: #e6e6e6; --card-color-rgb: 230, 230, 230; }
.info-card-toi-700-d { --card-color: #d2691e; --card-color-rgb: 210, 105, 30; }
.info-card-wolf-1061c { --card-color: #ffdead; --card-color-rgb: 255, 222, 173; }

/* --- Styles spécifiques à chaque carte modale --- */

/* Carte de bienvenue */
#earth-welcome-card .info-card-content {
    border-color: var(--accent-color); /* Bordure avec la couleur d'accentuation globale */
}

/* Carte de victoire */
#victory-card.info-card-container {
    z-index: 3001; /* z-index encore plus élevé pour passer au-dessus de tout, même la carte de bienvenue */
}
#victory-card .info-card-content {
    border-color: #FFD700; /* Couleur Or */
}
#victory-card .countdown-bar {
    background-color: #FFD700;
}

/* --- 5. STYLE DU COMPTE À REBOURS (utilisé dans les cartes modales) --- */
.countdown-timer {
    position: absolute; /* Fixe la barre par rapport à la carte */
    bottom: 100px; /* Remonté pour laisser la place au bouton */
    left: 25px; /* Aligné avec le padding gauche du texte */
    right: 25px; /* Aligné avec le padding droit du texte */
    height: 4px;
    background-color: rgba(102, 252, 241, 0.2);
    border-radius: 2px;
    opacity: 0; /* Masqué par défaut */
    transition: opacity 0.3s ease; /* Animation d'apparition */
}
.countdown-timer.visible {
    opacity: 1; /* Rendu visible par JS */
}
/* La barre qui se réduit avec le temps */
.countdown-bar {
    width: 100%;
    height: 100%;
    background-color: var(--card-color, var(--accent-color)); /* Utilise la couleur de la carte, ou la couleur d'accent par défaut */
    border-radius: 2px;
    transition: width 1s linear; /* Transition fluide pour la barre */
}