/* Basic styles & Global Layout */
body {
    font-family: sans-serif;
    background-color: #e8e4d8;
    margin: 0; /* Reset default margin */
}

#game-board {
    display: flex;
    flex-direction: column; 
    align-items: stretch; /* Stretch children to full width */
    gap: 15px; 
    max-width: 1300px;
    margin: 15px auto;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    min-height: 95vh; 
}

h2, h3, h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
}

/* --- Status Message (Top) --- */
#status-message {
    width: 100%; /* Full width within board padding */
    text-align: center; 
    padding: 10px; 
    box-sizing: border-box;
    /* Appearance styles in components.css */
}

/* --- Main Content Row --- */
#main-content-row {
    display: flex;
    flex-direction: row; /* Left column | Right column */
    gap: 20px;
    width: 100%;
    flex: 1; /* Allow this row to grow vertically */
    min-height: 0; /* Prevent overflow */
}

/* --- Left Column (Nobles + Cards) --- */
#left-column {
    flex-grow: 1; /* Take available horizontal space */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between nobles and cards */
    min-width: 0; /* Prevent overflow */
    /* Add some right margin to push right column over slightly? */
    /* margin-right: 10px; */ 
}

#nobles-area {
    /* Keep centering styles for nobles-container */
    display: flex;
    justify-content: center; 
    padding: 10px 0; /* Vertical padding */
}

#cards-area {
    flex-grow: 1; /* Allow cards area to fill vertical space in column */
    /* Keep existing internal styles */
}

.card-row { 
    /* Center deck+cards within the row */
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    align-items: center; 
    width: 100%; 
    box-sizing: border-box; 
    justify-content: center; 
}
.card-row:last-child { margin-bottom: 0; }

/* --- Right Column (Bank + Players Side-by-Side) --- */
#right-column {
    width: 500px; /* Wider column needed for side-by-side players */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between bank and players area */
}

#bank {
    /* Center the grid within the wider column? */
    /* margin: 0 auto; */ /* Optional */
    /* Keep existing internal styles */
}

#players-area {
    display: flex;
    flex-direction: row; /* Players side-by-side */
    justify-content: space-between; /* Space them out */
    gap: 10px;
    width: 100%; /* Span width of right-column */
    /* Remove padding, margin-top, border-top from previous */
}

.player-info {
    flex-basis: 48%; /* Each player takes slightly less than half of right-column */
    max-width: 48%;
    width: auto; 
    box-sizing: border-box;
    /* Appearance styles */
    border: 1px solid #ccc; /* Re-add border for visual separation */
    padding: 10px;
    border-radius: 5px;
}

/* --- Remove Old/Unused Layout Styles --- */
/* #center-row { ... } */
/* #cards-nobles-area { ... } */