body {
    font-family: 'Source Sans Pro', sans-serif; /* Placeholder font, imagine a Roblox-like font */
    background-color: #3b4252;
    color: #eceff4;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

.container {
    background-color: #4c566a;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 30px;
    width: 90%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

h1 {
    color: #88c0d0;
    text-align: center;
    margin-bottom: 25px;
    font-size: 2.5em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

h2 {
    color: #8fbcbb;
    margin-bottom: 15px;
    border-bottom: 2px solid #8fbcbb;
    padding-bottom: 5px;
}

.music-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #434c5e;
    border-radius: 8px;
    padding: 10px 20px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
}

.music-controls label {
    font-weight: bold;
    color: #d8dee9;
}

#musicSelect {
    padding: 8px 12px;
    border: 2px solid #5e6a81;
    border-radius: 5px;
    background-color: #2e3440;
    color: #eceff4;
    font-size: 0.9em;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

#musicSelect:focus {
    border-color: #88c0d0;
}

.game-area {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto 1fr; /* Adjust grid rows */
    gap: 20px;
}

.character-list {
    background-color: #434c5e;
    border-radius: 8px;
    padding: 20px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

#characterList {
    list-style: none;
    padding: 0;
    max-height: 400px;
    overflow-y: auto;
}

#characterList li {
    background-color: #5e6a81;
    margin-bottom: 8px;
    padding: 10px 15px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    color: #d8dee9;
    font-size: 0.95em;
}

#characterList li .nickname {
    font-weight: normal;
    font-size: 0.8em;
    color: #b48ead;
    margin-left: 5px;
}

.chat-log {
    grid-column: 2; /* chat log takes second column */
    grid-row: 1 / span 2; /* chat log spans first two rows */
    background-color: #434c5e;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

#chatLog {
    flex-grow: 1;
    background-color: #2e3440;
    border-radius: 5px;
    padding: 15px;
    overflow-y: auto;
    max-height: 450px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.action-log { /* New style for Action Log */
    grid-column: 1; /* Action log takes first column */
    grid-row: 2; /* Action log takes second row */
    background-color: #434c5e;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

#actionLog { /* New style for Action Log content */
    flex-grow: 1;
    background-color: #2e3440;
    border-radius: 5px;
    padding: 15px;
    overflow-y: auto;
    max-height: 200px; /* Smaller height for action log */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.action-message { /* Style for individual action messages */
    background-color: #5e6a81;
    padding: 5px 10px;
    border-radius: 5px;
    color: #d8dee9;
    font-size: 0.85em;
    word-wrap: break-word;
}

.chat-message {
    background-color: #3b4252;
    padding: 8px 12px;
    border-radius: 7px;
    color: #d8dee9;
    font-size: 0.9em;
    word-wrap: break-word;
}

.chat-message.system {
    background-color: #b48ead;
    color: #2e3440;
    font-weight: bold;
    text-align: center;
}

.chat-message .username {
    font-weight: bold;
    color: #a3be8c;
}

.chat-message .username .nickname {
    font-weight: normal;
    font-size: 0.9em;
    color: #b48ead;
    margin-left: 5px;
}

.chat-message.troll {
    background-color: #bf616a;
    color: #eceff4;
}

.chat-message.temprist {
    background-color: #ebcb8b; /* Yellowish background */
    color: #2e3440; /* Dark text for contrast */
}

.chat-message.temprist .username {
    color: #b48ead; /* Distinct username color */
}

.chat-message.loveyouroni {
    background-color: #a3be8c; /* Greenish background, as a contrast to other NPCs */
    color: #2e3440; /* Dark text for contrast */
}

.chat-message.loveyouroni .username {
    color: #ebcb8b; /* Yellowish username for LoveYourOni */
}

.chat-message.jake {
    background-color: #d8dee9; /* Light background for Jake, indicating neutral/unresponsive */
    color: #4c566a; /* Darker text for contrast */
    font-style: italic; /* A subtle hint of his unique nature */
}

.chat-message.jake .username {
    color: #5e6a81; /* A muted username color */
}

.chat-message.exploiter {
    background-color: #bf616a; /* Red for exploiter */
    color: #eceff4;
    font-weight: bold;
}

.chat-message.exploiter .username {
    color: #ebcb8b; /* Yellowish for exploiter username */
}

.chat-message.su_tart {
    background-color: #81a1c1; /* Light blue */
    color: #2e3440;
    font-weight: bold;
}

.chat-message.su_tart .username {
    color: #d8dee9;
}

.chat-message.jensenakles {
    background-color: #b48ead; /* Muted purple */
    color: #2e3440;
}

.chat-message.jensenakles .username {
    color: #ebcb8b;
}

.chat-message.earthworm_sally {
    background-color: #a3be8c; /* Green like an earthworm */
    color: #2e3440;
    font-style: italic;
}

.chat-message.earthworm_sally .username {
    color: #ebcb8b;
}

.chat-message.greenscreen_man {
    background-color: #8fbcbb; /* Teal/cyan for green screen */
    color: #2e3440;
    font-weight: bold;
}

.chat-message.greenscreen_man .username {
    color: #d8dee9;
}

.chat-message.red { background-color: #bf616a; color: white; }
.chat-message.blue { background-color: #81a1c1; color: white; }
.chat-message.green { background-color: #a3be8c; color: #2e3440; }
.chat-message.yellow { background-color: #ebcb8b; color: #2e3440; }
.chat-message.purple { background-color: #b48ead; color: white; }
.chat-message.pink { background-color: #d08770; color: white; }
.chat-message.orange { background-color: #d8964e; color: #2e3440; }
.chat-message.black { background-color: #2e3440; color: white; }
.chat-message.white { background-color: #eceff4; color: #2e3440; }
.chat-message.rainbow { 
    background: linear-gradient(90deg, #bf616a, #d08770, #ebcb8b, #a3be8c, #81a1c1, #b48ead);
    color: #2e3440; 
    font-weight: bold;
}

.admin-controls {
    grid-column: 1 / span 2;
    background-color: #434c5e;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

button {
    background-color: #88c0d0;
    color: #2e3440;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

button:hover {
    background-color: #81a1c1;
    transform: translateY(-2px);
}

button:active {
    background-color: #5e81ac;
    transform: translateY(0);
}

.flamingo-commentary, .temprist-commentary, .loveyouroni-commentary {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    background-color: #434c5e;
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    border: 2px solid #88c0d0; /* Highlight flamingo section */
}

.temprist-commentary {
    border: 2px solid #ebcb8b; /* Temprist's border color */
}

.loveyouroni-commentary {
    border: 2px solid #a3be8c; /* LoveYourOni's border color */
}

#flamingoImage, #tempristImage, #loveyouroniImage {
    width: 80px; /* Adjust size as needed */
    height: 80px;
    border-radius: 50%; /* Make it circular */
    border: 3px solid #88c0d0; /* Border around the image */
    object-fit: cover; /* Ensure image covers the area */
    flex-shrink: 0; /* Prevent shrinking */
}

#tempristImage {
    border: 3px solid #ebcb8b; /* Temprist's image border color */
}

#loveyouroniImage {
    border: 3px solid #a3be8c; /* LoveYourOni's image border color */
}

#flamingoQuote, #tempristQuote, #loveyouroniQuote {
    font-style: italic;
    color: #e5e9f0;
    font-size: 1.1em;
    flex-grow: 1; /* Allow text to take available space */
}

.hidden {
    display: none;
}

.command-bar {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    background-color: #434c5e;
    border-radius: 8px;
    padding: 15px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

#commandInput {
    flex-grow: 1;
    padding: 10px 15px;
    border: 2px solid #5e6a81;
    border-radius: 5px;
    background-color: #2e3440;
    color: #eceff4;
    font-size: 1em;
    outline: none;
    transition: border-color 0.2s ease;
}

#commandInput::placeholder {
    color: #d8dee9;
    opacity: 0.7;
}

#commandInput:focus {
    border-color: #88c0d0;
}

@media (max-width: 768px) {
    .game-area {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto 1fr; /* Adjust for stacked layout */
    }

    .chat-log {
        grid-column: 1;
        grid-row: 3; /* Move chat log below character list and action log */
    }

    .action-log {
        grid-column: 1;
        grid-row: 2; /* Keep action log below character list */
    }

    .character-list {
        grid-column: 1;
        grid-row: 1;
    }

    .flamingo-commentary, .temprist-commentary, .loveyouroni-commentary {
        flex-direction: column;
        text-align: center;
    }

    .command-bar {
        flex-direction: column;
    }

    .command-bar button {
        width: 100%;
    }
}