/* Version 6.0: Added styles for the Black Lodge duality feature. */

/* --- General Setup --- */
:root {
    --main-bg: #2d2424;
    --text-color: #e0e0e0;
    --primary-border: #6b4f4f;
    --accent-red: #9d1c1c;
    --accent-green: #3a5f4f;
    --wood-panel: #3a2e2e;
}

body {
    background-color: var(--main-bg);
    color: var(--text-color);
    font-family: 'Special Elite', monospace;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('images/wood_texture.png');
}


/* --- Main Layout --- */
#game-container {
    width: 95vw;
    max-width: 700px;
    height: 90vh;
    border: 2px solid var(--primary-border);
    background-color: rgba(45, 36, 36, 0.8);
    padding: 20px;
    box-shadow: 0 0 25px rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.5s, border-color 0.5s, filter 1s;
}

/* ... existing styles for header, main-content, ui-container, etc. ... */
header h1 { text-align: center; margin: 0 0 15px 0; text-transform: uppercase; letter-spacing: 3px; color: var(--text-color); }
#main-content { display: flex; flex-grow: 1; gap: 20px; height: calc(100% - 50px); min-height: 0; }
#ui-container { flex: 1; border: 1px solid var(--primary-border); padding: 15px; display: flex; flex-direction: column; gap: 15px; min-height: 0; }
#agent-display { border: 1px solid var(--primary-border); height: 250px; display: flex; justify-content: center; align-items: center; position: relative; background: repeating-linear-gradient(135deg, var(--wood-panel), var(--wood-panel) 15px, #4a3e3e 15px, #4a3e3e 30px); overflow: hidden; transition: height 0.3s; }
#screen-flicker-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; animation: screen-flicker 25s infinite; opacity: 0.1; }
@keyframes screen-flicker { 0%, 100% { background: rgba(255, 255, 220, 0.03); } 50% { background: transparent; } }
#agent-image { width: 100px; height: 100px; background-repeat: no-repeat; background-size: contain; background-position: center; border: 2px dashed var(--primary-border); padding: 5px; }
#dialogue-box { border: 1px dashed var(--primary-border); padding: 10px; flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
.user-message { color: #a0a0a0; margin: 0; padding-left: 5px; font-style: italic; }
.max-message { position: relative; }
.max-message p { margin: 0; white-space: pre-wrap; word-wrap: break-word; }
.copy-btn { position: absolute; top: -5px; right: 0; background-color: var(--primary-border); color: var(--text-color); border: 1px solid var(--text-color); font-family: 'Special Elite', monospace; font-size: 14px; padding: 2px 8px; cursor: pointer; display: none; opacity: 0; transition: opacity 0.3s; }
.max-message:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background-color: var(--text-color); color: var(--main-bg); }
.copy-btn.copied { background-color: #fff; color: #000; }
#dialogue-box::-webkit-scrollbar { width: 12px; }
#dialogue-box::-webkit-scrollbar-track { background: var(--main-bg); border-left: 1px solid var(--primary-border); }
#dialogue-box::-webkit-scrollbar-thumb { background-color: var(--primary-border); }
#dialogue-box::-webkit-scrollbar-thumb:hover { background-color: var(--accent-red); }
.cursor { animation: blink 1s step-end infinite; }
#controls { border: 1px dashed var(--primary-border); padding: 10px; }
#talk-btn { width: 100%; padding: 15px; background-color: var(--accent-red); border: 2px solid var(--primary-border); color: var(--text-color); font-family: 'Special Elite', monospace; font-size: 18px; cursor: pointer; text-transform: uppercase; transition: background-color 0.2s; margin-bottom: 10px; letter-spacing: 2px; }
#talk-btn:hover { background-color: #c22e2e; }
#text-input-container { display: flex; gap: 10px; width: 100%; }
#memo-input { flex-grow: 1; background-color: transparent; border: 1px solid var(--primary-border); color: var(--text-color); font-family: 'Special Elite', monospace; font-size: 16px; padding: 5px 10px; }
#memo-input:focus { outline: none; border-color: var(--accent-red); box-shadow: 0 0 5px var(--accent-red); }
#send-text-btn { padding: 5px 15px; background-color: transparent; border: 2px solid var(--primary-border); color: var(--text-color); font-family: 'Special Elite', monospace; font-size: 16px; cursor: pointer; text-transform: uppercase; transition: background-color 0.2s, color 0.2s; }
#send-text-btn:hover { background-color: var(--primary-border); }
.controls-info { font-size: 14px; text-align: center; margin-top: 10px; color: #a0a0a0; }
#ui-container.dormant-mode #dialogue-box { flex-grow: 0.1; }
.glitch { position: relative; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; overflow: hidden; }
.glitch::before { text-shadow: -1px 0px var(--accent-red); animation: flicker-effect 3s linear infinite alternate; }
.glitch::after { text-shadow: 1px 0px var(--accent-green); animation: flicker-effect 2.5s linear infinite alternate-reverse; }
@keyframes flicker-effect { 0%, 15%, 45%, 100% { opacity: 1; } 16%, 44% { opacity: 0.5; } }
@keyframes blink { 50% { opacity: 0; } }
.red-room-effect { box-shadow: 0 0 35px var(--accent-red), inset 0 0 35px var(--accent-red); border-color: var(--accent-red); }
.owl-cave-effect { box-shadow: 0 0 35px var(--accent-green), inset 0 0 35px var(--accent-green); border-color: var(--accent-green); }


/* ANNOTATION: Version 6.0 - New styles for when the Black Lodge is active. */
#game-container.black-lodge-active {
    --main-bg: #000000;
    --text-color: #ffffff;
    --primary-border: #9d1c1c;
    --accent-red: #ff0000;
    --wood-panel: #1a0000;
    box-shadow: 0 0 45px var(--accent-red), inset 0 0 45px var(--accent-red);
    border-color: var(--accent-red);
    filter: saturate(1.5);
}

#game-container.black-lodge-active #talk-btn {
    background-color: #000;
    color: #ff0000;
    border-color: #ff0000;
}
#game-container.black-lodge-active #talk-btn:hover {
    background-color: #ff0000;
    color: #000;
}
#game-container.black-lodge-active .user-message {
    color: #cccccc;
    font-style: normal;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    body { font-size: 16px; overflow: auto; height: auto; padding: 10px 0; }
    #game-container { height: auto; width: 95vw; padding: 10px; }
    #main-content { flex-direction: column; }
    #agent-display { height: 150px; }
    #dialogue-box { min-height: 200px; max-height: 40vh; }
}