/* --- Styles de base et thème --- */
:root {
    --main-color: #FFFFFF; /* Couleur principale dynamique */
    --background-color: #050505;
    --scanline-color: rgba(0, 0, 0, 0.3);
    --glow-color: rgba(255, 255, 255, 0.3); /* Lueur dynamique */
    --suggestion-bg: rgba(255, 255, 255, 0.1);
    --suggestion-hover-bg: rgba(255, 255, 255, 0.3);
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    background-color: var(--background-color);
    color: var(--main-color);
    font-family: 'VT323', monospace;
    font-size: 20px;
    text-shadow: 0 0 5px var(--glow-color), 0 0 7px var(--glow-color);
    background-image: url('/assets/background_uac.png');
    background-size: cover;
    background-position: center;
    transition: color 0.5s;
}

/* --- Effet CRT (moniteur cathodique) --- */
.crt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

.crt-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 1px,
        var(--scanline-color) 2px,
        var(--scanline-color) 3px
    );
    opacity: 0.7;
}

/* --- Effet Rainbow --- */
@keyframes rainbow-text-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.rainbow-text {
    display: inline-block;
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: rainbow-text-animation 5s ease infinite;
    text-shadow: none !important;
}

.terminal-rainbow-mode .output-line,
.terminal-rainbow-mode .prompt-text,
.terminal-rainbow-mode #command-input {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: rainbow-text-animation 5s ease infinite;
    text-shadow: none !important;
}

.terminal-rainbow-mode #command-input { caret-color: white; }

/* --- Classes de couleurs pour le texte --- */
.text-critical { color: #FF4136; text-shadow: 0 0 7px #FF4136; }
.text-warning { color: #FFDC00; text-shadow: 0 0 7px #FFDC00; }
.text-ok { color: #2ECC40; text-shadow: 0 0 7px #2ECC40; }
.text-info { color: #7FDBFF; text-shadow: 0 0 7px #7FDBFF; }

/* --- Couleurs pour la commande Credits --- */
.text-credit-creator { color: #FF4136; text-shadow: 0 0 8px #FF4136; }
.text-credit-tier3 { color: #FFD700; text-shadow: 0 0 10px #FFD700, 0 0 4px #FFFFFF; }
.text-credit-tier2 { color: #C0C0C0; text-shadow: 0 0 8px #FFFFFF; }
.text-credit-tier1 { color: #CD7F32; text-shadow: 0 0 6px #D2691E; }
.text-credit-artist { color: #9370DB; text-shadow: 0 0 8px #9370DB; }
.text-credit-beta { color: #5837D0; text-shadow: 0 0 8px #5837D0; }


/* --- Hacking Minigame Styles --- */
#hack-screen { font-size: 16px; white-space: pre; column-count: 2; column-gap: 20px; } /* Espacement réduit */
.hack-word, .hack-special { cursor: pointer; }
.hack-word { text-decoration: underline; }
.hack-word:not(.dud):hover, .hack-special:not([data-used="true"]):hover { background-color: var(--main-color); color: var(--background-color); text-shadow: none; }
.dud { text-decoration: none; cursor: default; opacity: 0.5; }

/* Barre de progression */
.progress-bar-container { display: flex; align-items: center; }
.progress-bar { border: 1px solid var(--main-color); width: 200px; height: 20px; padding: 2px; margin-right: 10px; }
.progress-bar-inner { background-color: var(--main-color); height: 100%; width: 0%; transition: width 0.1s linear; }

/* --- Structure du Terminal --- */
#terminal { position: relative; box-sizing: border-box; padding: 20px; height: 100%; width: 100%; overflow-y: auto; word-wrap: break-word; }
#terminal::-webkit-scrollbar { width: 8px; }
#terminal::-webkit-scrollbar-track { background: transparent; }
#terminal::-webkit-scrollbar-thumb { background-color: var(--main-color); border-radius: 4px; border: 2px solid var(--background-color); }
.output-line { white-space: pre-wrap; margin: 0; line-height: 1.2; }
.output-line.command-line { display: flex; }

.prompt-text {
    margin-right: 8px;
    color: #CCCCCC; /* Gris clair pour différencier du texte de la commande */
    text-shadow: 0 0 5px rgba(204, 204, 204, 0.3);
}

#command-input { background: transparent; border: none; color: var(--main-color); font-family: 'VT323', monospace; font-size: 20px; text-shadow: 0 0 5px var(--glow-color); flex-grow: 1; padding: 0; transition: color 0.5s; caret-color: var(--main-color); }
#command-input:focus { outline: none; box-shadow: 0 0 8px var(--glow-color); }
a { color: var(--main-color); text-decoration: underline; }

#output pre {
    font-family: inherit;
    font-size: inherit;
    margin: 0;
}

/* --- Styles du Tchat --- */
.hidden { display: none !important; }

#chat-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 300;
}

#chat-window {
    width: 90%;
    max-width: 600px;
    height: 70%;
    max-height: 500px;
    background-color: #0A0A0A;
    border: 2px solid var(--main-color);
    box-shadow: 0 0 15px var(--glow-color);
    display: flex;
    flex-direction: column;
}

#chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid var(--main-color);
}

#chat-close-btn {
    background: none;
    border: 1px solid var(--main-color);
    color: var(--main-color);
    cursor: pointer;
    padding: 2px 8px;
}
#chat-close-btn:hover {
    background: var(--main-color);
    color: var(--background-color);
}

#chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
}

.chat-message {
    margin-bottom: 8px;
}
.chat-message .username {
    color: #7FDBFF; /* Couleur "info" pour les noms d'utilisateur */
}
.chat-message .timestamp {
    color: #AAAAAA;
    margin-right: 8px;
}
.chat-message .delete-btn {
    background: none;
    border: none;
    color: #FF4136;
    cursor: pointer;
    margin-left: 10px;
    opacity: 0.5;
}
.chat-message .delete-btn:hover {
    opacity: 1;
}
.system-message {
    color: #FFDC00;
    font-style: italic;
}


#chat-input-area {
    display: flex;
    border-top: 1px solid var(--main-color);
}

#chat-message-input {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: var(--main-color);
    padding: 10px;
    font-family: 'VT323', monospace;
    font-size: 18px;
}
#chat-message-input:focus {
    outline: none;
}

#chat-send-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-left: 1px solid var(--main-color);
    color: var(--main-color);
    padding: 0 15px;
    cursor: pointer;
}
#chat-send-btn:hover {
    background: var(--main-color);
    color: var(--background-color);
}


/* --- Firewall & Port Knocking Minigames --- */
#firewall-breach-container, #port-knock-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 5, 5, 0.95);
    z-index: 400;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--main-color);
    text-shadow: 0 0 5px var(--glow-color);
}
#firewall-header, #port-knock-header {
    font-size: 2em;
    border: 1px solid var(--main-color);
    padding: 10px 20px;
    margin-bottom: 20px;
}
#firewall-grid {
    display: grid;
    grid-template-columns: repeat(5, 60px);
    grid-template-rows: repeat(5, 60px);
    gap: 10px;
}
.node {
    width: 60px;
    height: 60px;
    border: 1px solid var(--main-color);
    cursor: pointer;
    transition: background-color 0.1s;
}
.node.active {
    background-color: var(--main-color);
    animation: pulse 1s infinite;
}
.node.hacked {
    background-color: #2ECC40;
    border-color: #2ECC40;
}
@keyframes pulse {
    0% { box-shadow: 0 0 5px var(--glow-color); }
    50% { box-shadow: 0 0 20px var(--glow-color); }
    100% { box-shadow: 0 0 5px var(--glow-color); }
}
#firewall-instructions {
    margin-top: 20px;
    font-size: 1.2em;
}
#firewall-progress-bar {
    width: 350px;
    height: 20px;
    border: 1px solid var(--main-color);
    margin-top: 10px;
}
#firewall-progress {
    width: 100%;
    height: 100%;
    background-color: var(--main-color);
    transition: width 0.1s linear;
}

#port-knock-window {
    width: 400px;
    background-color: #0A0A0A;
    border: 2px solid var(--main-color);
    box-shadow: 0 0 20px var(--glow-color);
}
#port-knock-display {
    height: 80px;
    border-bottom: 1px solid var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
#port-knock-sequence {
    font-size: 2em;
    letter-spacing: 10px;
}
#port-knock-input-area {
    padding: 20px;
}
#port-knock-status {
    text-align: center;
    margin-bottom: 20px;
    min-height: 20px;
}
#port-knock-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.port-knock-btn {
    height: 60px;
    background: transparent;
    border: 1px solid var(--main-color);
    color: var(--main-color);
    font-size: 1.5em;
    cursor: pointer;
    transition: all 0.1s;
}
.port-knock-btn:hover {
    background-color: var(--suggestion-hover-bg);
}
.port-knock-btn:active {
    background-color: var(--main-color);
    color: var(--background-color);
    text-shadow: none;
}


/* --- Autocomplétion --- */
#suggestions-box {
    background-color: var(--suggestion-bg);
    border: 1px solid var(--main-color);
    margin-top: 5px;
    padding: 5px;
    display: none; /* Caché par défaut */
}
.suggestion-item {
    padding: 2px 5px;
    cursor: pointer;
}
.suggestion-item.selected {
    background-color: var(--main-color);
    color: var(--background-color);
    text-shadow: none;
}

/* --- UAC Warning Overlay --- */
#uac-warning-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #FF4136;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    padding: 2em;
    box-sizing: border-box;
}
#uac-warning-overlay h1 {
    font-size: 4em;
    text-shadow: 0 0 20px #FF4136, 0 0 10px #000, 0 0 10px #000;
    margin: 0;
}
#uac-warning-overlay p {
    font-size: 1.5em;
    max-width: 800px;
    text-shadow: 0 0 15px #FF4136, 0 0 5px #000, 0 0 5px #000;
    line-height: 1.5;
}