:root {
    --color-0: #ffadad; --color-1: #ffd6a5; --color-2: #fdffb6;
    --color-3: #caffbf; --color-4: #9bf6ff; --color-5: #a0c4ff;
    --color-6: #bdb2ff; --color-7: #ffc6ff;
    --bg: #ffffff; --border: #1a1a1b;
    --error: #ff4d4d;
}

.controls { margin-bottom: 20px; background: var(--surface-color, #161B22); padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
/* input[type="date"] { padding: 8px; border-radius: 4px; border: 1px solid #ccc; font-size: 16px; } */

#grid { 
    display: grid; 
    grid-template-columns: repeat(8, 50px); 
    grid-template-rows: repeat(8, 50px); 
    border: 3px solid var(--border); 
    background: var(--border); /* This acts as the inner grid lines */
    gap: 1px; /* Creates clean lines between cells */
    width: fit-content;
    margin: 0 auto;
    box-sizing: border-box;
}

.cell {
    width: 50px; 
    height: 50px; 
    /* Remove individual cell borders as 'gap' handles it now */
    border: none; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}

/* Conflict Styles */
.conflict { border: 2px solid var(--error) !important; animation: shake 0.2s; background-blend-mode: multiply; }

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

/* Area Colors */
.area-0 { background-color: #e41a1c; } /* Red */
.area-1 { background-color: #377eb8; } /* Blue */
.area-2 { background-color: #4daf4a; } /* Green */
.area-3 { background-color: #984ea3; } /* Purple */
.area-4 { background-color: #ff7f00; } /* Orange */
.area-5 { background-color: #ffff33; } /* Yellow */
.area-6 { background-color: #a65628; } /* Brown */
.area-7 { background-color: #f781bf; } /* Pink */

.star::after { 
    content: "⚑"; /* Unicode Black Flag */
    color: #1a1a1b; /* Solid black/dark grey */
    font-size: 24px;
    /* font-weight: bold; */
    display: block;
}
.mark::after { content: "•"; color: rgba(0,0,0,0.4); font-weight: bold; }

.message { margin-top: 20px; font-weight: bold; font-size: 1.2rem; color: var(--accent, #2e7d32); height: 30px; }

.timer-container {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    font-family: 'Courier New', Courier, monospace; /* Monospace keeps numbers from jumping */
    color: var(--text-primary, #F8FAFC);
    /* display: flex; */
    align-items: center;
    gap: 8px;
}
/* Update your style.css for the Conflict Zone theme */
.conflict {
    box-shadow: inset 0 0 0 4px #ff4d4d !important;
    animation: pulse-red 1.5s infinite, shake 0.2s;
    background-color: #ffe6e6 !important; /* Light red tint */
}

@keyframes pulse-red {
    0% { box-shadow: inset 0 0 0 4px #ff4d4d; }
    50% { box-shadow: inset 0 0 0 8px #b31000; }
    100% { box-shadow: inset 0 0 0 4px #ff4d4d; }
}


@media (max-width: 480px) {
    #grid {
        grid-template-columns: repeat(8, 40px);
        grid-template-rows: repeat(8, 40px);
    }
    .cell {
        width: 40px;
        height: 40px;
    }
    .timer-container {
        font-size: 1.2rem;
    }
}