/* --- Dark Mode Theme (Based on User's CSS) --- */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #1f1f1f; /* Dark background for the page */
    color: #e0e0e0; /* Light text color for general text */
}

h1, h3 { /* Apply to both h1 and h3 */
    text-align: center;
    color: #f5f5f5; /* Slightly brighter white for headings */
}

h1 { /* Add some spacing/border below main heading */
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

h3 { /* Add some spacing below subheading */
    margin-bottom: 20px;
}

/* Link styles for dark mode (Add these if you have links) */
a {
    color: #64b5f6; /* A nice blue for links */
    text-decoration: none;
}
a:hover {
    color: #90caf9; /* Lighter blue on hover */
    text-decoration: underline;
}


#map-container {
    /* --- Dimensions --- */
    width: 1000px;
    height: 1000px;
    /* ---------------- */

    background-image: url("./images/s2map.jpg"); /* Keep user's path */
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    border: 1px solid #444; /* Darker border */
    margin: 20px auto;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Optional shadow */
}

.treasure-marker {
    position: absolute;
    width: 24px;
    height: 24px;
    /* background-color is set by JS, default here is less important */
    /* background-color: rgba(255, 215, 0, 0.7); */
    border: 1px solid rgba(255, 255, 255, 0.5); /* Semi-transparent white border */
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    color: black; /* Default text color - recommend changing in JS */
    user-select: none;
    box-sizing: border-box;
    transition: transform 0.1s ease-in-out, border 0.1s ease-in-out; /* Smooth transition */
}

.treasure-marker:hover {
    /* Remove background change, just scale and brighten border */
    /* background-color: rgba(255, 165, 0, 0.9); */
    transform: scale(1.15); /* Slightly larger scale */
    border: 2px solid rgba(255, 255, 255, 0.9); /* Brighter, thicker border */
    z-index: 15; /* Ensure hover marker is above others slightly */
}

/* Popup Styles - Dark Mode */
.popup {
    display: none;
    position: absolute;
    background-color: #333;
    color: #e0e0e0;
    border: 1px solid #555;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    padding: 15px;
    border-radius: 5px;
    z-index: 100;
    min-width: 200px; /* Keep or adjust */
    max-width: 300px; /* *** ADD THIS: Prevents popup getting too wide *** */
    font-size: 0.95em;
    /* Optional: Add overflow if content might still be too tall */
    /* max-height: 80vh; */
    /* overflow-y: auto; */
}

#popup-content {
    margin-bottom: 10px;
    line-height: 1.4; /* Improve readability */
}

/* Close Button Styling - Dark Mode (Add these styles) */
#popup-close {
    display: block;
    width: 100%; /* Make button fill width */
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #555; /* Dark grey button */
    color: #e0e0e0; /* Light text */
    border: 1px solid #777;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease;
    font-size: 0.9em; /* Match button font size roughly */
}

#popup-close:hover {
    background-color: #666; /* Slightly lighter on hover */
}