.map-container{display:flex;justify-content:space-between;height:600px;gap:20px}
#map{flex:1;border:2px solid var(--text-color);border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.2)}
#panel{width:350px;background-color:var(--secondary-bg);padding:15px;border:2px solid var(--border-color);border-radius:8px;overflow-y:auto}
#panel h3{margin-top:0;margin-bottom:10px}
#location-list{list-style:none;padding:0;margin:0}
#location-list li{cursor:pointer;padding:8px 10px;margin-bottom:5px;border-radius:5px;transition:background-color .2s ease,color .2s ease}
#location-list li:hover{background-color:var(--hover-color)}
[data-theme="light"] #location-list li:hover{color:#ffffff}
[data-theme="dark"] #location-list li:hover{color:#000000}

/* MOBILE RESPONSIVENESS (Max-width 768px) - NON-SCROLLABLE LEFT/RIGHT */
@media (max-width: 768px) {
    .map-container {
        width: 100%;
        gap: 2px; /* Minimal gap */
        padding: 0 5px; /* Minimal side padding */
        overflow-x: hidden; /* **CRUCIAL: Hides any potential scrollbar** */
        box-sizing: border-box;
    }
    #map {
        /* flex-grow: 1, flex-shrink: 1 (Allows shrinking), basis: 60% */
        flex: 1 1 60%;
        min-width: 150px; /* Smallest usable width for the map */
    }
    #panel {
        /* flex-grow: 1, flex-shrink: 1 (Allows shrinking), basis: 40% */
        flex: 1 1 40%;
        width: auto;
        min-width: 100px; /* Smallest usable width for the list */
        font-size: 0.8rem; /* **Adjustment: Reduce text size to fit list items** */
        padding: 8px; /* Reduced panel padding */
    }
    #panel h3 {
        font-size: 1rem;
    }
    #location-list li {
        padding: 5px 8px; /* Reduced list item padding */
    }
}
/* * --------------------------------- 
 * Custom Leaflet Tooltip Styles (for Map View)
 * ---------------------------------
 */

/* The main container for the tooltip content. 
   This sets the overall consistent box width. */
.custom-map-tooltip .leaflet-tooltip-content {
    /* Fixed width for the tooltip box content area */
    max-width: 140px !important; 
    width: 140px; 
    
    /* Base Styling */
    text-align: center;
    padding: 10px 10px 8px; /* Total box width will be 140px (content) + 2*10px (padding) = 160px */
    font-size: 0.95rem; 
    line-height: 1.3;
    
    /* Aesthetic Enhancements */
    background-color: #ffffff; 
    color: #333; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); 
    
    /* Word wrapping for long titles */
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal; /* Allow text to wrap */
}

/* Style for the manga title text (must be wrapped in <div class="tooltip-title"> in JS) */
.custom-map-tooltip .leaflet-tooltip-content .tooltip-title {
    display: block; 
    font-weight: 800; 
    color: #2c3e50;
    margin-bottom: 5px; 
}

/* Style for the thumbnail image inside the tooltip */
.custom-map-tooltip .leaflet-tooltip-content img {
    /* Consistency Solution: Force the image to a specific aspect ratio 
       and make it cover the entire area, cropping if necessary. */
    aspect-ratio: 16 / 9; /* EXAMPLE: Use 16:9 for a widescreen look */
    /* aspect-ratio: 1 / 1; */ /* UNCOMMENT THIS LINE AND COMMENT THE ABOVE FOR SQUARE THUMBNAILS */
    
    object-fit: cover; /* This is crucial: it makes the image fill the specified aspect ratio, 
                           cropping parts of it if the original image doesn't match the aspect ratio. */

    /* Size and Layout */
    width: 100%; /* Image now fills the 140px content width */
    height: auto; /* Height will be determined by 'aspect-ratio' and 'width: 100%' */
    display: block;
    margin: 8px auto 0 auto; 
    
    /* Frame and Detail */
    border-radius: 6px; 
    border: 2px solid #eee; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}