body { /* General body styles */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f4f6f8; /* Lighter page background */
    padding: 20px;
    line-height: 1.6; /* Improved readability */
}

h1 {
    color: #333;
    text-align: center; /* Center heading */
    margin-bottom: 25px; /* More space below heading */
}

#status-message {
    padding: 12px 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    min-height: 1.5em;
    text-align: center;
    font-weight: 500; /* Medium weight */
    border: 1px solid transparent; /* Base border */
}
#status-message.error {
    background-color: #ffebee; /* Material Design Light Red */
    color: #d32f2f;      /* Material Design Red */
    border-color: #ef9a9a; /* Lighter red border */
}
#status-message.success {
    background-color: #e8f5e9; /* Material Design Light Green */
    color: #388e3c;      /* Material Design Green */
    border-color: #a5d6a7; /* Lighter green border */
}

#controls, #preset-locations {
    margin-top: 20px; /* Increased top margin */
    margin-bottom: 20px;
    padding: 20px; /* Increased padding */
    background-color: #ffffff; /* Changed to white */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08); /* Slightly enhanced shadow */
    border: 1px solid #e0e0e0; /* Light border */
}
#controls label, #preset-locations strong {
    margin-right: 8px; /* Consistent margin */
    display: inline-block;
    margin-bottom: 8px; /* Spacing for items that might wrap */
    font-weight: 500; /* Medium weight for labels */
}
#controls input[type="number"], #controls select {
    margin-right: 12px; /* Increased margin */
    padding: 8px 10px; /* Increased padding */
    border: 1px solid #bdbdbd; /* Slightly darker border */
    border-radius: 4px;
    box-sizing: border-box; /* Ensure padding doesn't expand element size */
}
#controls button, .preset-btn { /* Common styling for all buttons */
    padding: 8px 15px; /* Increased padding */
    border: none; /* Removed border for a flatter look */
    border-radius: 4px;
    background-color: #007bff; /* Primary blue */
    color: white;
    cursor: pointer;
    margin-right: 8px;
    margin-bottom: 8px;
    transition: background-color 0.2s ease; /* Smooth transition */
}
#controls button:hover, .preset-btn:hover {
    background-color: #0056b3; /* Darker blue on hover */
}
#controls button#use-location { /* Specific style for "Use My Location" */
    background-color: #28a745; /* Green */
}
#controls button#use-location:hover {
    background-color: #1e7e34; /* Darker green */
}
#map-toggle {
    vertical-align: middle;
    margin-left: 5px; /* Keep margin from label */
}

#grid-container {
    display: grid;
    grid-template-columns: repeat(100, 8px);
    grid-template-rows: repeat(100, 8px);
    gap: 1px;
    margin: 20px 0;
    overflow: auto;
    max-height: 820px;
    border: 1px solid #aaa;
}

.cell {
    width: 8px;
    height: 8px;
    background: #dcdcdc;
    box-sizing: border-box; /* Added */
    position: relative; /* Added for lobby ID overlay positioning */
}

/* Lobby ID Overlay */
.lobby-id-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 7px; /* Adjusted for better fit */
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 1px;
    z-index: 5; /* Above cell background, below tooltips */
    pointer-events: none; /* Allow clicks to pass through */
    line-height: 1; /* Ensure text fits well */
}

/* New style for surrounding lobby cells */
.cell.surrounding-lobby-cell {
    background-color: rgba(255, 255, 0, 0.3); /* Light yellow tint */
}

/* Surrounding cells (direct neighbors of the target cell) */
.cell.surrounding {
    background-color: #1e90ff; /* DodgerBlue - a brighter blue */
    border: 1px solid #104e8b; /* Darker blue border */
}

/* Center cell (target cell) */
.cell.center {
    background-color: #ff4500; /* OrangeRed - for more vibrancy */
    border: 1px solid #cc3700; /* Darker border */
    transform: scale(1.1); /* Slightly larger */
    z-index: 10; /* Ensure it's above others if overlapping slightly due to scale */
    box-shadow: 0 0 5px rgba(0,0,0,0.5); /* Add a subtle shadow */
}

/* Old .cell.lobby class, can be removed if no longer used, or kept if it serves another purpose.
   For now, it's just an outline and doesn't conflict with background. */
.cell.lobby {
    outline: 2px solid red;
}

#info-panel {
    position: fixed;
    top: 80px; /* Adjusted to give space from top */
    right: 20px; /* Adjusted for some padding from edge */
    width: 300px; /* Standardized width */
    background: #ffffff;
    padding: 15px 20px; /* Adjusted padding */
    border-radius: 8px; /* Softer edges */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* More pronounced shadow */
    z-index: 1000; /* Ensure it's above other elements like the grid */
    border: 1px solid #ddd; /* Lighter border */
    font-size: 14px; /* Slightly smaller base font for the panel */
}

#info-panel h3 {
    margin-top: 0;
    margin-bottom: 15px; /* More space after title */
    font-size: 1.1em; /* Adjusted title size */
    color: #007bff; /* Consistent with button color */
    border-bottom: 1px solid #eee; /* Separator line */
    padding-bottom: 10px; /* Space for the separator */
}

.info-row {
    display: flex; /* For layout */
    justify-content: space-between; /* Pushes button to the right */
    align-items: center;
    margin-bottom: 10px; /* Spacing between rows */
    padding: 5px 0; /* Padding within row */
}

.info-row span:first-child { /* The label like "Cell ID:" */
    font-weight: 500; /* Medium weight for labels */
    color: #555; /* Dark gray for labels */
    margin-right: 8px;
}

.info-row span:nth-child(2) { /* The value span */
    flex-grow: 1; /* Allows value to take available space */
    text-align: left; /* Align value text to left */
    color: #333; /* Standard text color for values */
    word-break: break-all; /* Break long IDs or paths */
}

.copy-btn {
    padding: 4px 8px; /* Smaller padding */
    font-size: 0.9em; /* Smaller font */
    background-color: #e9ecef; /* Light gray background */
    color: #495057; /* Dark text color */
    border: 1px solid #ced4da; /* Subtle border */
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px; /* Space from the value */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.copy-btn:hover {
    background-color: #d1d9e0; /* Slightly darker on hover */
    border-color: #adb5bd;
}

/* Responsive adjustments for the info panel */
@media (max-width: 768px) { /* Adjust breakpoint as needed */
    #info-panel {
        position: static; /* Becomes part of normal flow */
        width: auto; /* Full width */
        margin-top: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Less pronounced shadow for static */
    }
}

.lobby-border {
    border: 2px solid red;
}

.lobby-0-0 { background-color: rgba(255, 0, 0, 0.1); }   /* top-left */
.lobby-0-1 { background-color: rgba(255, 128, 0, 0.1); } /* top-center */
.lobby-0-2 { background-color: rgba(255, 255, 0, 0.1); } /* top-right */

.lobby-1-0 { background-color: rgba(0, 255, 0, 0.1); }   /* mid-left */
.lobby-1-1 { background-color: rgba(0, 200, 255, 0.1); } /* center lobby */
.lobby-1-2 { background-color: rgba(0, 128, 255, 0.1); } /* mid-right */

.lobby-2-0 { background-color: rgba(128, 0, 255, 0.1); } /* bot-left */
.lobby-2-1 { background-color: rgba(255, 0, 255, 0.1); } /* bot-center */
.lobby-2-2 { background-color: rgba(128, 128, 128, 0.1); } /* bot-right */


#zoomed-lobby {

    display: grid;
    grid-template-columns: repeat(20, 64px);  /* doubled from 32px */
    grid-template-rows: repeat(20, 64px);     /* doubled from 32px */
    gap: 1px;
    margin-top: 16px;
    border: 4px solid #007bff; /* More prominent border, primary blue */
    background-color: #e9ecef; /* Light gray background */
    box-shadow: 0px 2px 5px rgba(0,0,0,0.15); /* Subtle shadow */
}

.zoom-cell {

    width: 64px;
    height: 64px;
    background-color: #f9f9f9;
    font-size: 10px;
    text-align: center;
    line-height: 64px; /* vertically center */
    border: 1px solid #ccc;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.zoom-cell.zoomed-target-cell {
    background-color: #90EE90; /* LightGreen */
    /* Ensure this overrides default .zoom-cell background */
}

.zoom-cell.zoomed-neighbor-cell {
    background-color: #FFDAB9; /* PeachPuff */
    /* Ensure this overrides default .zoom-cell background */
}

.lobby-border-left {
    border-left: 1px solid red;
}
.lobby-border-right {
    border-right: 1px solid red;
}
.lobby-border-top {
    border-top: 1px solid red;
}
.lobby-border-bottom {
    border-bottom: 1px solid red;
}