/* Based on ui.theme: "retro-dark" from spec.md */
body {
    background-color: #1a1a1a;
    color: #00ff00;
    font-family: 'monospace', 'Courier New', Courier;
    margin: 0;
    padding: 20px;
    font-size: 16px;
}

#game-container {
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid #00ff00;
    padding: 20px;
    box-shadow: 0 0 15px #00ff00;
    transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* === FUTURE COMBAT/STATE GLOWS === */
/* Red glow for combat/damage */
#game-container.glow-attack {
    border-color: #ff0000;
    box-shadow: 0 0 20px #ff0000, 0 0 10px #ff0000 inset;
}
/* Green glow for healing */
#game-container.glow-heal {
    border-color: #00ff00;
    box-shadow: 0 0 20px #00ff00, 0 0 10px #00ff00 inset;
}
/* White glow for death */
#game-container.glow-dead {
    border-color: #ffffff;
    box-shadow: 0 0 20px #ffffff, 0 0 10px #ffffff inset;
}
/* === END FUTURE GLOWS === */


header {
    text-align: center;
    border-bottom: 1px dashed #00ff00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

header h1 {
    margin: 0;
    font-size: 2.5em;
    color: #ff00ff;
    text-shadow: 0 0 5px #ff00ff;
}

header h2 {
    margin: 0;
    font-size: 1.2em;
    color: #00ff00;
}

/* --- HUD --- */
#game-hud {
    justify-content: space-between;
    border-bottom: 1px dashed #00ff00;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 1.1em;
}
#game-hud:not(.hidden) {
    display: flex;
}
.hud-left, .hud-right {
    flex-basis: 48%;
}
.hud-right {
    text-align: right;
}
#game-hud span {
    color: #ffffff;
}


#title-screen p {
    font-size: 1.1em;
    line-height: 1.6;
}

/* --- Narrative Screen --- */
#narrative-screen {
    font-size: 1.1em;
    line-height: 1.6;
    color: #00ffff; /* Use info color for narrative */
}

#narrative-screen p {
    margin: 1.5em 0;
}


#title-screen button,
#narrative-screen button,
.form-button {
    background-color: #00ff00;
    color: #1a1a1a;
    border: none;
    padding: 10px 20px;
    font-family: 'monospace';
    font-size: 1.2em;
    cursor: pointer;
    display: block;
    margin: 20px auto 0;
    box-shadow: 0 0 10px #00ff00;
    width: 100%;
    max-width: 300px;
}

#title-screen button:hover,
#narrative-screen button:hover,
.form-button:hover {
    background-color: #ff00ff;
    color: #ffffff;
    box-shadow: 0 0 10px #ff00ff;
}

/* New Form Styles */
.auth-form {
    border: 1px dashed #00ff00;
    padding: 15px;
    margin-top: 20px;
}

.auth-form h3 {
    text-align: center;
    color: #ff00ff;
    margin-top: 0;
}

.form-field {
    margin-bottom: 15px;
}

.form-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 1.1em;
}

.form-field input {
    width: 100%;
    background-color: #333;
    border: 1px solid #00ff00;
    color: #00ff00;
    font-family: 'monospace';
    font-size: 1.2em;
    padding: 8px;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
}

.form-field input:focus {
    outline: none;
    box-shadow: 0 0 10px #00ff00;
    background-color: #000;
}

#auth-toggle {
    text-align: center;
    margin-top: 15px;
}

#auth-toggle button {
    background: none;
    border: none;
    color: #00ff00;
    text-decoration: underline;
    font-family: 'monospace';
    font-size: 1.0em;
    cursor: pointer;
}

#auth-toggle button:hover {
    color: #ff00ff;
}

/* --- Reset Button --- */
#reset-section {
    text-align: center;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px dashed #777;
}
#reset-btn {
    background: none;
    border: 1px solid #ff0000;
    color: #ff0000;
    font-size: 1.0em;
    box-shadow: none;
    max-width: 300px;
}
#reset-btn:hover {
    background: #ff0000;
    color: #1a1a1a;
    box-shadow: 0 0 10px #ff0000;
}


.form-message {
    text-align: center;
    font-size: 1.1em;
    margin-top: 10px;
    padding: 8px;
    border: 1px dashed;
}

.message-error {
    color: #ff0000;
    border-color: #ff0000;
    background-color: #330000;
}

.message-success {
    color: #00ff00;
    border-color: #00ff00;
    background-color: #003300;
}


#game-input form {
    display: flex;
    margin-top: 20px;
}

#game-input span {
    font-size: 1.2em;
    margin-right: 10px;
}

#game-input input {
    flex-grow: 1;
    background-color: transparent;
    border: none;
    color: #00ff00;
    font-family: 'monospace';
    font-size: 1.2em;
}

#game-input input:focus {
    outline: none;
    box-shadow: none;
}

/* Game Output Message Types */
#game-output {
    height: 400px; /* Give the output a fixed height */
    overflow-y: auto; /* Add a scrollbar */
    border-bottom: 1px dashed #00ff00;
    padding-bottom: 10px;
}

#game-output p {
    margin: 5px 0;
    line-height: 1.4;
}

.msg-command {
    color: #777;
}
.msg-error {
    color: #ff0000;
}
.msg-system {
    color: #ff00ff;
}
.msg-info {
    color: #00ffff;
}
/* .msg-normal is default color */

/* --- NEW DIALOG COLORS --- */
.msg-dream {
    color: #00ffff;
    font-style: italic;
}
.msg-dialog {
    font-style: italic;
}
.speaker-roommate {
    color: #ff80ff; /* Pink-ish */
}
.speaker-defiant-slave {
    color: #00ffff; /* Cyan (matches info) */
}
.speaker-dream-man {
    color: #00ffff; /* Cyan */
}
.speaker-brother-of-the-wind {
    color: #ffd700; /* Gold */
}
.speaker-samual-james {
    color: #add8e6; /* Light Blue */
}
.speaker-namer {
    color: #ff8c00; /* Dark Orange */
}
/* --- END NEW DIALOG --- */


.hidden {
    display: none;
}

/* --- Death Screen --- */
#death-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Fade to black */
    color: #ff0000;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.5em;
    z-index: 100;
    padding: 20px;
    box-sizing: border-box;
}
#death-screen.hidden {
    display: none;
}


/* --- Custom Scrollbar Styles --- */

/* For Firefox */
body, #game-output {
    scrollbar-width: thin;
    scrollbar-color: #00ff00 #1a1a1a; /* thumb-color track-color */
}

/* For Webkit browsers (Chrome, Safari, new Edge) */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a; /* The dark page background */
}

::-webkit-scrollbar-thumb {
    background-color: #00ff00; /* The green text/accent color */
    border-radius: 6px; /* Rounded corners */
    border: 2px solid #1a1a1a; /* Padding to match the dark background */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #00cc00; /* A slightly darker green on hover */
}