:root {
    --green: #00ff41;
    --dark-green: #003b11;
    --bg: #050505;
}

body {
    background: var(--bg);
    color: var(--green);
    font-family: 'Courier New', monospace;
    margin: 0; height: 100vh;
    display: flex; justify-content: center; align-items: center;
    text-shadow: 0 0 5px var(--green);
}

/* Effet CRT */
.scanline {
    width: 100%; height: 2px; z-index: 10;
    background: rgba(0, 255, 65, 0.1);
    position: absolute; top: 0;
    animation: scan 4s linear infinite;
}

@keyframes scan { from { top: 0; } to { top: 100%; } }

.terminal {
    width: 100%; max-width: 500px; height: 100vh;
    padding: 20px; box-sizing: border-box;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, rgba(0,20,0,1) 0%, rgba(5,5,5,1) 100%);
}

#output { overflow-y: auto; flex-grow: 1; margin-bottom: 10px; scroll-behavior: smooth; }
#output p { margin: 4px 0; line-height: 1.2; word-break: break-word; }

.input-area { display: flex; align-items: center; border-top: 1px solid var(--dark-green); padding-top: 10px; }
input {
    background: transparent; border: none; color: var(--green);
    font-family: inherit; font-size: 1rem; flex: 1;
    outline: none; caret-color: var(--green);
}

.hidden { display: none !important; }
.blink { animation: blink 1s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

#hamza-album { width: 180px; height: 180px; filter: blur(20px); border: 1px solid var(--green); margin: 10px auto; display: block; }

/* Modal & Button */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-content { border: 1px solid var(--green); padding: 30px; text-align: center; max-width: 80%; background: #000; }
.final-card { width: 100%; max-width: 300px; filter: drop-shadow(0 0 10px var(--green)); }
#cta-btn { background: var(--green); color: #000; border: none; padding: 15px 30px; font-weight: bold; cursor: pointer; width: 100%; margin-top: 20px; }

/* Style du bouton Indice */
#hint-btn {
    background: transparent;
    color: var(--green);
    border: 1px solid var(--green);
    padding: 8px 15px;
    margin-top: 15px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    align-self: flex-start; /* Aligné à gauche dans le terminal */
    box-shadow: 0 0 5px var(--dark-green);
    animation: pulse-border 2s infinite;
}

#hint-btn:hover {
    background: var(--green);
    color: #000;
    box-shadow: 0 0 15px var(--green);
}

/* Animation discrète pour attirer l'attention sans être lourd */
@keyframes pulse-border {
    0% { border-color: var(--dark-green); }
    50% { border-color: var(--green); }
    100% { border-color: var(--dark-green); }
}

/* Ajustement pour le container d'image Hamza pour que tout soit propre */
#image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 15px 0;
}

.success {
    color: #00d9ff; /* Bleu cyan pour les infos d'indice, ça change du vert */
    font-style: italic;
}


/* Animation de tremblement de l'écran */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    50% { transform: translate(-1px, 2px) rotate(1deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    100% { transform: translate(1px, -2px) rotate(-0deg); }
}

.overload {
    animation: shake 0.2s infinite;
    background: var(--green) !important;
    color: black !important;
    transition: all 0.1s;
}

/* Flash de lumière blanche pour la transition */
.flash-white {
    position: fixed;
    inset: 0;
    background: white;
    opacity: 0;
    z-index: 200;
    pointer-events: none;
}

@keyframes flash-anim {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.run-flash { animation: flash-anim 0.8s ease-out; }

/* Entrée de la carte avec effet de glitch */
.final-card {
    width: 100%;
    max-width: 350px;
    filter: drop-shadow(0 0 20px var(--green));
    transform: scale(0);
    animation: pop-in 0.5s cubic-bezier(0.17, 0.89, 0.32, 1.49) forwards 0.8s;
}

#final-text {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 20px;
    white-space: pre-line; /* TRÈS IMPORTANT : cela force le respect des sauts de ligne et des espaces */
    text-align: center;
    color: var(--green);
}

@keyframes pop-in {
    to { transform: scale(1); }
}