/* Version 6.2: Complete visual overhaul to a "Dungeon Master's Robes" theme. Colors: Red, gold, dark gray, black. */

/* --- General Setup --- */
:root {
    /* ANNOTATION: Version 6.2 - New color palette based on Dungeon Master's robes and dungeon walls. */
    --dungeon-bg: #111111; /* Deep black for the background */
    --dark-stone: #2b2b2b; /* Dark gray for UI panels */
    --text-color: #e0e0e0; /* Off-white for readability */
    --primary-border-gold: #c0a062; /* Ancient, slightly desaturated gold */
    --robe-red: #a02c2c; /* Deep, rich red for primary actions */
    --robe-red-hover: #c43838; /* A brighter red for hover effects */
    --accent-gold-glow: #d4af37; /* A brighter gold for glowing effects */
}

body {
    background-color: var(--dungeon-bg);
    color: var(--text-color);
    font-family: 'MedievalSharp', cursive;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    /* ANNOTATION: Version 6.2 - Darkened the background image to enhance the dungeon feel. */
    background-image: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)), url('images/cavern_wall.png');
}

/* --- Main Layout --- */
#game-container {
    width: 95vw;
    max-width: 700px;
    height: 90vh;
    /* ANNOTATION: Version 6.2 - Changed border to gold and background to dark stone. */
    border: 3px solid var(--primary-border-gold);
    border-radius: 5px;
    background-color: var(--dark-stone);
    padding: 20px;
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.2); /* Subtle gold shadow */
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.5s, border-color 0.5s;
}

header h1 {
    text-align: center;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    letter-spacing: 4px;
    /* ANNOTATION: Version 6.2 - Changed text color to gold. */
    color: var(--primary-border-gold);
    font-weight: bold;
}

#main-content {
    display: flex;
    flex-grow: 1;
    gap: 20px;
    height: calc(100% - 50px);
    min-height: 0; 
}

#ui-container {
    flex: 1;
    /* ANNOTATION: Version 6.2 - Changed border to a darker variant and background to the main dungeon black. */
    border: 2px solid #333;
    background-color: var(--dungeon-bg);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 0;
}

/* --- Agent Display (Scrying Orb) --- */
#agent-display {
    border: 2px solid #333;
    height: 250px; 
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: radial-gradient(circle, #333 0%, #000 100%);
    overflow: hidden;
    transition: height 0.3s;
}

#screen-flicker-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: transparent;
    animation: mist-swirl 15s infinite alternate;
    opacity: 0.1;
}
@keyframes mist-swirl {
    from { background-position: 0 0; }
    to { background-position: 100px 50px; }
}

/* ANNOTATION: Version 6.2 - Restyled the orb to pulse with red and gold magic. */
#agent-image {
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(255, 100, 100, 0.4) 0%, rgba(160, 44, 44, 0.8) 100%);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--robe-red), inset 0 0 10px var(--accent-gold-glow);
    animation: orb-pulse 4s infinite ease-in-out;
}
@keyframes orb-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 15px var(--robe-red), inset 0 0 10px var(--accent-gold-glow); }
    50% { transform: scale(1.05); box-shadow: 0 0 25px var(--robe-red), inset 0 0 15px var(--accent-gold-glow); }
}


/* --- Dialogue Box & Log --- */
#dialogue-box {
    border: 1px solid var(--primary-border-gold);
    background-color: rgba(0,0,0,0.3); /* Dark transparent background */
    padding: 10px; flex-grow: 1; overflow-y: auto; display: flex;
    flex-direction: column; gap: 20px;
}

.user-message { color: #888; 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; line-height: 1.5; color: var(--text-color); }
.copy-btn { position: absolute; top: -5px; right: 0; background-color: var(--primary-border-gold); color: var(--dungeon-bg); border: 1px solid var(--accent-gold-glow); font-family: 'MedievalSharp', cursive; 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(--accent-gold-glow); }
.copy-btn.copied { background-color: #fff; color: #000; }
/* ANNOTATION: Version 6.2 - Themed scrollbar to match the new dark UI. */
#dialogue-box::-webkit-scrollbar { width: 12px; }
#dialogue-box::-webkit-scrollbar-track { background: var(--dungeon-bg); border-left: 1px solid var(--primary-border-gold); }
#dialogue-box::-webkit-scrollbar-thumb { background-color: var(--primary-border-gold); }
#dialogue-box::-webkit-scrollbar-thumb:hover { background-color: var(--robe-red); }
.cursor { animation: blink 1s step-end infinite; color: var(--accent-gold-glow); }

/* --- Player HUD & Controls --- */
#controls { border: 1px solid #333; padding: 10px; }
/* ANNOTATION: Version 6.2 - Main button is now the deep red of the DM's robes. */
#talk-btn { width: 100%; padding: 15px; background-color: var(--robe-red); border: 2px solid var(--primary-border-gold); color: var(--text-color); font-family: 'MedievalSharp', cursive; font-size: 18px; cursor: pointer; text-transform: uppercase; transition: background-color 0.2s; margin-bottom: 10px; letter-spacing: 2px; }
#talk-btn:hover { background-color: var(--robe-red-hover); }
#text-input-container { display: flex; gap: 10px; width: 100%; }
#memo-input { flex-grow: 1; background-color: var(--dungeon-bg); border: 1px solid var(--primary-border-gold); color: var(--text-color); font-family: 'MedievalSharp', cursive; font-size: 18px; padding: 5px 10px; }
#memo-input:focus { outline: none; border-color: var(--accent-gold-glow); box-shadow: 0 0 5px var(--accent-gold-glow); }
#send-text-btn { padding: 5px 15px; background-color: transparent; border: 2px solid var(--primary-border-gold); color: var(--primary-border-gold); font-family: 'MedievalSharp', cursive; 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-gold); color: var(--dungeon-bg); }
.controls-info { font-size: 14px; text-align: center; margin-top: 10px; color: #777; }

/* --- Dormant Mode Styles --- */
#ui-container.dormant-mode #dialogue-box { flex-grow: 0.1; }

/* --- Animations & Effects --- */
/* ANNOTATION: Version 6.2 - Changed glow effect to use the new gold palette. */
.glow {
    text-shadow: 0 0 4px #000, 0 0 8px var(--accent-gold-glow), 0 0 12px var(--accent-gold-glow);
    animation: text-flicker 4s linear infinite;
}

@keyframes text-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
      text-shadow: 0 0 4px #000, 0 0 8px var(--accent-gold-glow), 0 0 12px var(--accent-gold-glow);
  }
  20%, 24%, 55% { text-shadow: 0 0 4px #000; }
}

@keyframes blink { 50% { opacity: 0; } }

/* ANNOTATION: Version 6.2 - Updated effect colors to match the new theme. */
.venger-appears-effect {
    box-shadow: 0 0 45px var(--robe-red), inset 0 0 45px var(--robe-red);
    border-color: var(--robe-red);
}

.portal-opens-effect {
    box-shadow: 0 0 45px var(--accent-gold-glow), inset 0 0 45px var(--accent-gold-glow);
    border-color: var(--accent-gold-glow);
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    body { font-size: 18px; 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; }
}