/* Basic body styling for context */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Slightly more modern sans-serif */
    margin: 0; /* Remove default margin */
    background-color: #f4f7f6; /* Lighter, slightly desaturated background */
    color: #333; /* Default text color */
    line-height: 1.6;
}

.top-banner {
    background-color: #234F5B; /* Primary Color */
    color: white;
    padding: 15px 20px; /* Increased padding */
    margin-bottom: 25px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align items to the start for icon on far left */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow */
}

.app-icon {
    height: 30px; /* Slightly larger icon */
    width: auto;
    margin-right: 15px; /* Increased margin */
    flex-shrink: 0;
}

#currentDate {
    margin-right: auto; /* Pushes nameInput to the right if space allows */
    font-weight: 500;
}

.top-banner input[type="text"] {
    padding: 8px 12px; /* Increased padding */
    border: 1px solid #B65639; /* Secondary color for border */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px;
    background-color: #fff;
    color: #333;
    margin-left: 15px; /* Space from date or icon if date is not there */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.top-banner input[type="text"]:focus {
    outline: none;
    border-color: #234F5B; /* Primary color on focus */
    box-shadow: 0 0 0 2px rgba(182, 86, 57, 0.3); /* Subtle glow with secondary color */
}

.page-container { /* Wrapper for grid and other content if needed */
    max-width: 900px;
    margin: 0 auto 20px auto; /* Center and add bottom margin */
    padding: 0 20px; /* Padding for smaller screens */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px; /* Slightly increased gap */
    width: 100%;
    max-width: 800px;
    margin: 20px auto; /* Keep centering */
    border: 3px solid #234F5B; /* Primary color for border */
    background-color: #e0e8e7; /* Lighter shade related to primary for gaps */
    padding: 8px; /* Padding inside the border, around cells */
    border-radius: 8px; /* Rounded corners for the grid */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Softer shadow */
}

.grid-cell {
    background-color: #fff;
    border: 1px solid #d1e0dd; /* Softer border, related to primary light */
    /* padding: 15px; */ /* Padding is handled by flex centering and aspect ratio */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    aspect-ratio: 1 / 1;
    font-size: clamp(0.8em, 2.5vw, 1.1em); /* Responsive font size */
    font-weight: bold;
    color: #234F5B; /* Primary color for text */
    overflow: hidden;
    border-radius: 5px; /* Rounded corners for cells */
    cursor: pointer;
    transition: transform 0.2s ease-out, background-color 0.3s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.grid-cell:not(.filled):hover {
    transform: translateY(-3px);
    background-color: #f0f8f7; /* Very light tint of primary on hover */
    box-shadow: 0 3px 6px rgba(35, 79, 91, 0.15); /* Shadow with primary color tint */
}

.grid-cell.filled {
    background-color: #B65639; /* Secondary Color for filled cells */
    color: white; /* White text for contrast */
    font-style: normal; /* Remove italic if not desired, or keep if you like it */
    /* border-color: #a1472c; Darker shade of secondary for border */
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2); /* Inner shadow for depth */
    transform: scale(1.02); /* Slight pop effect */
}

.grid-cell.grid-cell-selecting { /* Style for cell clicked but not confirmed */
    outline: 3px solid #B65639; /* Secondary color outline */
    outline-offset: -3px;
    background-color: #fcecdf; /* Light tint of secondary */
}


/* Modal Styling */
.modal {
    position: fixed;
    z-index: 1000; /* Ensure it's on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(35, 79, 91, 0.6); /* Primary color with opacity for overlay */
    display: flex; /* Use flex to center modal content */
    align-items: center;
    justify-content: center;
    opacity: 0; /* Start hidden for transition */
    visibility: hidden; /* Start hidden for transition */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal:not(.modal-hidden) { /* When modal is shown */
    opacity: 1;
    visibility: visible;
}

.modal-hidden {
    /* display: none; -- Replaced by opacity/visibility for transitions */
}

.modal-content {
    background-color: #fefefe;
    /* margin: 15% auto; -- Replaced by flex centering */
    padding: 25px 30px; /* Increased padding */
    border: 1px solid #ccc;
    width: 90%;
    max-width: 450px; /* Slightly smaller max-width */
    text-align: center;
    font-size: 1.1em; /* Relative font size */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transform: scale(0.95); /* Start slightly smaller for transition */
    transition: transform 0.3s ease;
}

.modal:not(.modal-hidden) .modal-content {
    transform: scale(1); /* Animate to full size */
}

.modal-content h2 {
    margin-top: 0;
    color: #234F5B; /* Primary color for modal title */
}

.modal-buttons {
    margin-top: 25px;
}

.large-button {
    padding: 12px 25px; /* Adjusted padding */
    margin: 0 10px; /* Adjusted margin */
    font-size: 1em; /* Relative font size */
    cursor: pointer;
    border: none;
    border-radius: 5px; /* Rounded corners */
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    min-width: 120px; /* Minimum width for buttons */
}

.large-button:hover {
    transform: translateY(-2px);
}

#modalConfirmButton {
    background-color: #234F5B; /* Primary color */
    color: white;
}
#modalConfirmButton:hover {
    background-color: #1b3c47; /* Darker shade of primary on hover */
}

#modalCancelButton {
    background-color: #B65639; /* Secondary color */
    color: white;
}
#modalCancelButton:hover {
    background-color: #a1472c; /* Darker shade of secondary on hover */
}

/* --- Player List & Chat (Example Styling - Add HTML for these) --- */
#gameInfoPanel {
    max-width: 800px;
    margin: 20px auto;
    padding: 0 10px; /* Consistent with page-container idea */
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

#playersSection, #chatSection {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    flex: 1; /* Allow them to grow */
    min-width: 280px; /* Minimum width before wrapping */
}

#playersSection h3, #chatSection h3 {
    margin-top: 0;
    color: #234F5B; /* Primary color for headings */
    border-bottom: 2px solid #e0e8e7; /* Light separator */
    padding-bottom: 8px;
    margin-bottom: 10px;
}

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

#playerList li {
    padding: 5px 0;
    border-bottom: 1px dashed #eee;
}
#playerList li:last-child {
    border-bottom: none;
}

#chatMessages {
    height: 150px;
    overflow-y: auto;
    border: 1px solid #e0e8e7;
    padding: 8px;
    margin-bottom: 10px;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.chat-message strong {
    color: #B65639; /* Secondary color for sender name */
}

#chatInput {
    width: calc(100% - 85px); /* Adjust based on button width */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 5px;
}

#sendChatButton {
    padding: 8px 15px;
    background-color: #234F5B; /* Primary color */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#sendChatButton:hover {
    background-color: #1b3c47; /* Darker primary */
}