body {
    font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    background-color: #f4f6f8; /* Lighter, cleaner background */
    color: #333;
    line-height: 1.6;
}

.main-header {
    width: 100%;
    background-color: #34495e; /* Dark blue-gray header */
    color: white;
    padding: 15px 0;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.main-header h1 {
    margin: 0;
    font-size: 2em;
}

.app-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px; /* Max width for the app content */
    padding: 0 20px;
    box-sizing: border-box;
}

.controls {
    width: 100%;
    max-width: 700px; /* Controls width aligned with potential grid */
    margin-bottom: 25px;
    padding: 20px;
    background-color: #ffffff; /* White background for controls */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    text-align: center;
}

.controls h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.4em;
    color: #2c3e50;
}

.palette {
    display: flex;
    flex-wrap: wrap; /* Allow palette items to wrap */
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

.block-type {
    width: 28px; /* Slightly smaller palette items */
    height: 28px;
    border: 1px solid #bdc3c7; /* Softer border */
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 5px; /* Rounded corners */
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.block-type:hover {
    transform: scale(1.15);
    box-shadow: 0 0 8px rgba(0,0,0,0.15);
}

.block-type.selected {
    border: 2px solid #3498db; /* Blue for selected */
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
    transform: scale(1.1);
}

.block-type.eraser {
    background-color: #ecf0f1 !important; /* Light gray for eraser */
    color: #7f8c8d;
    font-size: 1em;
    border: 1px dashed #95a5a6;
}
.block-type.eraser.selected {
    border: 2px solid #e74c3c; /* Red border for selected eraser */
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}


#grid-container {
    display: grid;
    border: 1px solid #d1d5db; /* Lighter grid border */
    background-color: #e9ecef; /* Grid background for contrast with empty cells */
    width: max-content; /* Adjust width to content */
    margin: 0 auto; /* Center the grid */
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.grid-cell {
    /* Adjusted for smaller pixel size */
    width: 20px;
    height: 20px;
    background-color: transparent; /* Make empty cells transparent */
    box-sizing: border-box;
    border: 1px solid #dde1e5; /* Very subtle border for empty cells */
}

/* --- Pixel/Block Styles (Simplified for smaller size) --- */
/* Common base style for all colored pixels for the 3D effect */
.grid-cell.pixel-block {
    border-width: 1px; /* Thinner border for smaller pixels */
    border-style: solid;
    /* Subtle 3D effect for smaller pixels */
    box-shadow: inset 0.5px 0.5px 1px rgba(255,255,255,0.3),
                inset -0.5px -0.5px 1px rgba(0,0,0,0.15);
}

/* Specific block colors - these will also need the pixel-block class in JS */
.grid-cell.grass    { background-color: #2ECC71; border-color: #27AE60 #27AE60 #16A085 #16A085; }
.grid-cell.leaf     { background-color: #27AE60; border-color: #1E8449 #1E8449 #196F3D #196F3D; }
.grid-cell.dirt     { background-color: #795548; border-color: #6D4C41 #6D4C41 #5D4037 #5D4037; }
.grid-cell.wood     { background-color: #A0522D; border-color: #8B4513 #8B4513 #7A3D10 #7A3D10; }
.grid-cell.stone    { background-color: #95A5A6; border-color: #7F8C8D #7F8C8D #707B7C #707B7C; }
.grid-cell.water    { background-color: #3498DB; border-color: #2980B9; opacity: 0.85; }
.grid-cell.sand     { background-color: #F1C40F; border-color: #F39C12 #F39C12 #E67E22 #E67E22; }
.grid-cell.pink     { background-color: #FFC0CB; border-color: #FFB6C1 #FFB6C1 #DB7093 #DB7093; }
.grid-cell.purple   { background-color: #8E44AD; border-color: #80399c #80399c #702F8A #702F8A; }
.grid-cell.red      { background-color: #E74C3C; border-color: #c0392b #c0392b #a93226 #a93226; }
.grid-cell.orange   { background-color: #E67E22; border-color: #d35400 #d35400 #b94a00 #b94a00; }
.grid-cell.light_gray { background-color: #BDC3C7; border-color: #AAB0B4 #AAB0B4 #979FA3 #979FA3; }
.grid-cell.dark_gray{ background-color: #7F8C8D; border-color: #707B7C #707B7C #616A6B #616A6B; }
.grid-cell.black    { background-color: #2C3E50; border-color: #212F3C #212F3C #1C2833 #1C2833; }
.grid-cell.white    { background-color: #FFFFFF; border-color: #F0F0F0 #F0F0F0 #E0E0E0 #E0E0E0; }


/* Buttons */
.button-danger {
    padding: 10px 20px;
    background-color: #e74c3c; /* Red */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1em;
    transition: background-color 0.2s ease;
    display: block; /* Make it block to center with margin auto or use text-align on parent */
    margin: 0 auto; /* Center button */
}

.button-danger:hover {
    background-color: #c0392b; /* Darker Red */
}

.grid-size-info {
    margin-top: 15px;
    font-size: 0.9em;
    color: #555;
}