body {
    background-color: #f8f9fa;
    min-height: 100vh;
    /* FIX: Ensure no unexpected horizontal scroll from containers */
    overflow-x: hidden; 
}

/* --- LOGO STYLE --- */
.navbar-brand img {
    height: 30px; /* Adjust height as needed */
    margin-right: 8px;
}

/* --- GRID STYLES (Fixed 1000px width on ALL devices) --- */
.grid-container-wrapper {
    /* Set max-width to slightly more than 1000px for padding on desktop */
    max-width: 1100px;
    /* Use margin auto for horizontal centering */
    margin-left: auto;
    margin-right: auto;
    padding: 10px; 
    
    /* FIX: Remove mobile scroll styles */
    max-width: 100%;
    overflow-x: hidden; 
}

#pixel-grid {
    position: relative;
    display: block; 
    
    /* Fixed size ensures 1:1 coordinates */
    width: 1000px; 
    height: 1000px;
    
    /* ESSENTIAL VISIBILITY STYLES */
    border: 1px solid #000;
    background-color: #fff;
    /* Grid lines visible on unpurchased areas */
    background-image: linear-gradient(to right, #eee 1px, transparent 1px),
                      linear-gradient(to bottom, #eee 1px, transparent 1px);
    background-size: 10px 10px; /* This is the 10x10 "cube" */
    
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    
    /* FIX: Remove transform styles */
    transition: none; 
    transform-origin: top left;
}

/* --- FIX FOR MODAL VISIBILITY ON ZOOMED PAGE (CRITICAL) --- */
/* Ensure the modal is layered above the zoomed content */
.modal-backdrop {
    z-index: 1050; 
}
.modal {
    z-index: 1060;
    /* This z-index is CRITICAL for ensuring the modal layers above the zoomed body. */
}

/* --- MOBILE FIX: SCALING (Handled by JS body zoom) --- */
@media (max-width: 1050px) {
    .grid-container-wrapper {
        width: 1000px; /* Set fixed width so zoom knows what to scale */
        padding: 5px; 
    }
}

/* Styles for existing pixel blocks (the <a> elements) */
#pixel-grid a {
    display: block;
    position: absolute; 
    overflow: hidden;
    line-height: 0;
}

#pixel-grid img {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- SELECTION BOX STYLES --- */
#selection-box {
    position: absolute;
    border: 1px dashed #007bff;
    background-color: rgba(0, 123, 255, 0.2);
    display: none;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 10;
}

#selection-box.invalid {
    border: 1px dashed #dc3545;
    background-color: rgba(220, 53, 69, 0.2);
}

/* --- FOOTER STYLES --- */
footer {
    border-top: 1px solid #e9ecef;
    margin-top: 50px;
}