body {
    font-family: sans-serif;
    line-height: 1.6;
    margin: 20px;
    background-color: #f4f4f4;
    color: #333; /* Added default text color for body */
}

/* Styles for the new rules/info section */
#game-rules-and-info {
    background-color: #e9f7fd; /* Light blue background */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #bce8f1; /* Light blue border */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

#game-rules-and-info h2,
#game-rules-and-info h3 {
    color: #31708f; /* Darker blue for headings in this section */
    margin-top: 0; /* Remove default top margin for first heading */
}
#game-rules-and-info h3 {
    margin-top: 1em; /* Add some space above subheadings */
}

#game-rules-and-info ul {
    padding-left: 20px; /* Indent list items */
}
#game-rules-and-info p {
    margin-bottom: 0.8em;
}

#toggle-rules-button {
    background-color: #5bc0de; /* Info blue color */
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 15px; /* Space between button and content */
    font-size: 0.9em;
    display: block; /* Make it a block to control width or center if needed */
}

#toggle-rules-button:hover {
    background-color: #31b0d5;
}

/* Wrapper for content that will be toggled */
#rules-content-wrapper {
    /* Initially visible */
    display: block;
    overflow: hidden; /* For smooth transition if you add one */
    transition: max-height 0.3s ease-out; /* Optional: for smooth collapse/expand */
    max-height: none; /* Large enough to fit content, adjust if necessary. Increased for mobile viewports. */
}

#rules-content-wrapper.collapsed {
    /* display: none; */ /* Replaced for smooth transition */
    /* For smooth transition: */
    max-height: 0;
    /* Optional: transition padding and margin if they contribute to visible height when content is empty */
    /* padding-top: 0; */
    /* padding-bottom: 0; */
    /* margin-top: 0; */
    /* margin-bottom: 0; */
    /* Ensure any borders or other styles that might remain visible are also handled if needed */
}


/* Existing styles below */
#connection-status, #game-info, #game-controls, #game-state, #logs {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

h1, h2, h3 { /* General h1,h2,h3 not inside #game-rules-and-info */
    color: #333;
}

button { /* General button styles */
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 5px 5px 5px 0;
    font-size: 1em;
}

button:hover:not(:disabled) {
    background-color: #0056b3;
}

button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

#react-button {
    background-color: #dc3545; /* Red for emphasis */
    font-weight: bold;
    padding: 15px 25px;
}
#react-button:hover:not(:disabled) {
    background-color: #c82333;
}
#react-button:disabled {
    background-color: #f8d7da;
    color: #721c24;
}


#player-list {
    list-style: none;
    padding-left: 0;
}

#player-list li {
    font-family: monospace;
    font-size: 0.9em;
}

#log-output {
    background-color: #e9ecef;
    padding: 10px;
    border-radius: 4px;
    height: 200px; /* Fixed height */
    overflow-y: auto; /* Scroll if content overflows */
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 0.9em;
}

hr {
    border: 0;
    height: 1px;
    background: #ccc;
    margin: 20px 0;
}

.timer-container {
    background-color: #ffeeba;
    border: 1px solid #ffc107;
    color: #856404;
    padding: 5px 10px;
    border-radius: 5px;
    margin-top: 10px;
    text-align: center;
}

.timer-value {
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
}

/* Utility classes */
.active-state {
    font-weight: bold;
    color: #28a745;
}
.error-state {
    font-weight: bold;
    color: #dc3545;
}