/* BASE STYLES */
body { font-family: 'Segoe UI', sans-serif; display: flex; flex-direction: column; align-items: center; background: #f0f2f5; padding: 20px; transition: background 0.3s, color 0.3s; margin: 0; }

.main-layout { display: flex; align-items: flex-start; gap: 30px; max-width: 100%; margin: 0 auto; justify-content: center; }

.info-panel { 
    width: 420px; 
    background: white; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    font-size: 0.9rem;
    line-height: 1.6;
    transition: background 0.3s, color 0.3s;
    white-space: nowrap; 
}

/* Consistent Header Sizing for Titles and Indicators */
/* Keeps your existing headers and indicators exactly as they are */
.info-panel h3, .scoreboard h3, #turn-indicator, .round-header { 
    margin-top: 0; 
    font-size: 1.1rem; 
    border-bottom: 2px solid #ccc; 
    padding-bottom: 5px; 
    margin-bottom: 10px;
}

#turn-indicator { border-bottom: none; margin-bottom: 0; }
.round-header { background: #2d3436; color: white; padding: 5px 15px; border-radius: 20px; display: inline-block; border-bottom: none; }

/* UPDATED SECTION FOR INDENTATION */
/* This removes all default padding from lists in the side panels */
.info-panel ul { 
    padding-left: 0; 
    margin: 0; 
    list-style-type: none; 
}

/* This ensures headers (li) are flush to the left */
.info-panel p, .info-panel li { 
    margin-bottom: 8px; 
    font-weight: bold; 
    list-style-type: none; 
    padding-left: 0; 
    margin-left: 0; 
}

/* This specifically indents the sub-info lines */
.info-panel .indent { 
    padding-left: 20px; 
    font-weight: normal; 
    margin-bottom: 5px; 
    font-size: 0.85rem; 
    display: block; /* Ensures the indent applies correctly as a new line */
}

.game-card { display: flex; gap: 20px; text-align: center; width: 1050px; transition: background 0.3s; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }

.canvas-area { flex: 1.2; }
.scoreboard { flex: 1.5; display: flex; flex-direction: column; border-left: 2px solid #ccc; padding-left: 20px; text-align: left; }
canvas { border: 4px solid #2d3436; background: #fff; cursor: crosshair; display: block; margin: 10px auto; border-radius: 5px; transition: background 0.3s; }

/* NIGHT MODE THEME */
body.night-mode { background: #000000; color: #F5F5F5; } 
body.night-mode .game-card, body.night-mode .info-panel { background: #1a1a1a; color: #F5F5F5; }
body.night-mode canvas { border-color: #F5F5F5; background: #000000; }
body.night-mode .round-block { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
body.night-mode .scoreboard { border-left-color: rgba(255,255,255,0.3); }
/* THIS IS THE NEW LINE */
body.night-mode h2, body.night-mode h3, body.night-mode label, body.night-mode .round-title { 
    color: #F5F5F5; 
}

/* CONTROLS & UI ELEMENTS */
.score-row { display: flex; align-items: center; font-size: 0.82rem; width: 100%; }
.spacer { flex: 1; min-width: 10px; }
.round-block { margin-bottom: 6px; background: rgba(0,0,0,0.03); padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.1); }
.round-title { font-weight: bold; margin-right: 12px; white-space: nowrap; border-right: 2px solid #ddd; padding-right: 8px; }

.settings-container { margin-top: 8px; padding-top: 8px; border-top: 2px solid #ccc; }
.setting-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
select, .name-input { padding: 4px 8px; border-radius: 5px; border: 1px solid #ccc; width: 160px; }

.series-bar { display: flex; gap: 8px; margin: 12px 0; justify-content: center; width: 100%; }
.series-slot { width: 35px; height: 18px; border: 2px solid #dfe6e9; border-radius: 4px; background: #f9f9f9; }

button { padding: 12px 24px; background: #00b894; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; margin: 5px; }
.discard-btn { background: #fab1a0; color: #d63031; }
.reroll-btn { background: #a29bfe; color: white; padding: 4px 8px; font-size: 0.75rem; margin-left: 5px; }

.winner-box { margin-top: 15px; padding: 15px; border-radius: 8px; font-size: 1.2rem; font-weight: bold; text-align: center; display: none; }
.picker-container {
    display: flex !important;
    flex-wrap: nowrap !important; /* This is the specific line you need */
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 10px !important;
}
.hex-picker { width: 48%; border-radius: 5px; padding: 5px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.hex-grid { cursor: pointer; width: 100%; height: auto; display: block; filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.1)); }

.name-container { 
    display: flex !important; 
    justify-content: space-between !important; 
    width: 100% !important; 
    gap: 25px !important; /* This creates the physical space between boxes */
}

.limit-info { 
    font-size: 0.85rem; 
    font-style: italic; 
    margin-top: 8px; 
    text-align: center !important; /* This centers the text */
    width: 100%; /* Ensures the container spans the full width to allow centering */
}