/* Runtime Terror Game Specific Styles */

/* Removed game-specific :root variables. Using theme variables directly. */

/* Apply styles only when the game page body class is present */
/* Apply styles only when the game page body class is present */
body.runtime-terror-page {
    background-color: var(--brand-background); /* Use theme background */
    color: var(--text-primary);
    font-family: 'Inter', sans-serif; /* Use main site font for consistency, maybe override later? */
    font-size: 18px; /* Slightly larger base font */
    line-height: 1.6;
    display: flex; /* Use flexbox for centering */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px; /* Add some padding around the container */
    box-sizing: border-box;
}

body.runtime-terror-page::before {
    background-image: none !important;
  }

/* Hide standard header and footer on the game page */
body.runtime-terror-page header,
body.runtime-terror-page footer {
    display: none;
}

/* Ensure the main container doesn't interfere */
body.runtime-terror-page .container {
    max-width: none; /* Allow game container to potentially take more width */
    padding: 0; /* Remove default container padding */
}

/* Style the specific game container */
/* Style the specific game container */
#game-container {
    max-width: 800px; /* Slightly wider */
    width: 100%;
    height: 90vh; /* Take up most of the viewport height */
    max-height: 700px; /* But don't get excessively tall */
    margin: auto; /* Center vertically and horizontally */
    border: none;
    padding: 20px; /* Add some internal padding */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Push input to the bottom */
    background-color: transparent;
    color: var(--text-primary);
    font-family: inherit;
    text-align: center;
    position: relative; /* Needed for absolute positioning of input? Maybe not. */
    /* Fade out effect at the top */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%);
}

#output-area {
    flex-grow: 0.1; /* Allow output to take available space */
    overflow-y: auto; /* Make output area scrollable */
    margin-bottom: 20px; /* Space between output and input */
    padding-right: 10px; /* Space for scrollbar */
    white-space: normal;
    color: var(--text-primary);
    /* Scrollbar styling moved here */
}

#output-area::-webkit-scrollbar {
    width: 8px;
}

#output-area::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2); /* Subtle track */
}

#output-area::-webkit-scrollbar-thumb {
    background-color: var(--team1-primary); /* Use accent color */
    border-radius: 4px;
}

#output-area p {
    margin: 0 0 1em 0; /* Space between paragraphs */
    color: inherit;
    font-family: inherit;
    /* Text is centered by #game-container */
}

#input-area {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding-top: 0;
    color: var(--team1-primary);
    min-height: 2em;
    flex-shrink: 0; /* Prevent input area from shrinking */
    opacity: 1; /* Default visible */
    transition: opacity 0.3s ease-in-out; /* Smooth fade */
}

#input-area.hidden {
    opacity: 0;
    pointer-events: none; /* Prevent interaction when hidden */
}

#prompt {
    margin-right: 8px;
    font-size: 1.2em; /* Make prompt slightly larger */
}

#command-input {
    flex-grow: 1;
    background-color: transparent;
    border: none;
    color: var(--team1-primary); /* Match prompt color */
    font-family: inherit;
    font-size: inherit;
    outline: none;
    padding: 0;
    width: 50%; /* Adjust width as needed */
    border-bottom: 1px solid var(--team1-primary); /* Underline style */
    text-align: center; /* Center input text */
}

/* Style for player input shown in output */
/* Style for player input shown in output */
.player-input {
    color: var(--team1-primary); /* Match input color */
    /* Maybe add italics? */
    /* font-style: italic; */
}

/* Style for standard game messages */
/* Style for standard game messages */
.game-message {
     color: var(--text-primary); /* Use theme text color */
}

/* Style for internal monologue/thoughts */
/* Style for internal monologue/thoughts */
.internal-monologue {
    color: var(--text-secondary); /* Use theme secondary text */
    font-style: italic;
    font-weight: bold; /* Add bold */
    /* Add quotes using pseudo-elements */
}
.internal-monologue::before {
    content: '"';
    margin-right: 0.2em;
}
.internal-monologue::after {
    content: '"';
    margin-left: 0.2em;
}

/* Style for narration blocks */
/* Style for narration blocks (if needed, maybe same as game-message?) */
.narration {
    color: var(--text-secondary); /* Use secondary text for narration? */
}

/* Style for dialogue */
/* Style for dialogue (if distinct from narration/monologue) */
.dialogue {
    color: var(--text-primary); /* Use primary text */
    /* Maybe add quotes via JS/Renderer if needed */
}


/* Style for error messages */
/* Style for error messages */
.error-message {
    color: var(--accent-danger); /* Use theme danger color */
}

/* Style for game over message */
/* Style for game over message */
.game-over {
    color: var(--accent-danger); /* Use theme danger color */
    font-weight: bold;
}


/* Style for glitched text (can be expanded later) */
.glitch {
    display: inline-block;
    /* Add more complex glitch styles here later using animations, transforms etc. */
    /* Example: text-shadow: 0 0 5px var(--text-primary); */ /* Use theme text color */
    /* Keep flicker or change later */
    animation: text-flicker-runtime 0.1s infinite alternate;
}

@keyframes text-flicker-runtime {
    from { opacity: 1; }
    to { opacity: 0.8; }
}

/* Style for Synopsis Placeholder Box */
.synopsis-box {
    border: 1px solid var(--text-secondary); /* Use secondary text color for border */
    padding: 0.5em 1em; /* Add some padding */
    margin-bottom: 1em; /* Space below */
    display: inline-block; /* Allow centering */
    color: var(--text-secondary); /* Match border color */
    font-style: italic;
}

/* Scrollbar styling */
#output-area::-webkit-scrollbar {
    width: 8px;
}

/* Scrollbar styling moved to #output-area */

/* Back to Home Link */
#back-to-home-link {
    position: fixed; /* Position relative to viewport */
    top: 20px;
    right: 20px;
    font-size: 2em; /* Make arrow larger */
    color: var(--text-secondary); /* Use secondary text color */
    text-decoration: none;
    z-index: 100; /* Ensure it's above game content */
    transition: color 0.2s ease;
}

#back-to-home-link:hover {
    color: var(--team1-primary); /* Highlight on hover */
}