#world-layout {
    display: flex; /* Keep layout */
    flex-direction: column; /* Keep layout */
    height: calc(100vh - 5rem); /* Keep height */
    padding: 1.5rem; /* Keep padding */
    background-color: var(--clay-darkest); /* Use theme variable */
    color: var(--clay-text-primary); /* Use theme variable */
}

#world-header {
    display: flex; /* Keep layout */
    align-items: center; /* Keep layout */
    margin-bottom: 1.5rem; /* Keep spacing */
    padding-bottom: 1rem; /* Keep padding */
    border-bottom: 1px solid var(--clay-border); /* Use theme variable */
    flex-shrink: 0; /* Keep layout */
}

#world-back-button {
    /* Styles handled by theme */
    margin-right: 1.5rem; /* Keep spacing */
}

#world-view-title {
    font-size: 1.5rem; /* Adjusted size */
    font-weight: 600; /* Adjusted weight */
    color: var(--clay-text-primary); /* Ensure color */
    margin: 0;
}

#world-view-content {
    flex-grow: 1; /* Keep layout */
    overflow-y: auto; /* Keep layout */
    padding-right: 0.5rem; /* Keep padding */
}

.world-grid-container {
    display: grid; /* Keep layout */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Adjusted min size */
    gap: 1.5rem; /* Keep spacing */
}

.world-card {
    background: var(--gradient-surface); /* Use theme variable */
    border: 1px solid var(--clay-border); /* Use theme variable */
    border-radius: 0.75rem; /* Keep rounding */
    overflow: hidden; /* Keep layout */
    cursor: pointer; /* Keep interaction */
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s, opacity 0.2s; /* Added filter/opacity transition */
    box-shadow: var(--clay-shadow); /* Use theme variable */
    position: relative; /* Keep layout - Needed for lock icon positioning */
}

/* REMOVED HOVER EFFECT FOR WORLD CARD
.world-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--clay-shadow-heavy);
    border-color: var(--clay-border-light);
} */

.nest-card {
    border-color: var(--clay-info); /* Use info blue for nests */
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.4); /* Blue glow */
}

/* REMOVED HOVER EFFECT FOR NEST CARD
.nest-card:hover {
    border-color: #64B5F6;
    box-shadow: 0 0 25px rgba(33, 150, 243, 0.6);
} */


.world-card img {
    width: 100%; /* Keep layout */
    height: 150px; /* Adjusted height */
    object-fit: cover; /* Keep layout */
    display: block; /* Remove extra space below image */
}

.world-card .card-name {
    position: absolute; /* Keep layout */
    bottom: 0; /* Keep layout */
    left: 0; /* Keep layout */
    right: 0; /* Keep layout */
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); /* Darker gradient */
    padding: 1rem 1rem 0.75rem 1rem; /* Adjusted padding */
    font-weight: 600; /* Adjusted weight */
    font-size: 1rem; /* Adjusted size */
    color: var(--clay-text-primary); /* Use theme variable */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8); /* Stronger shadow */
}

/* --- Locked world card styles --- */
.world-card.locked {
    filter: grayscale(80%); /* Added grayscale */
    opacity: 0.6; /* Keep opacity */
    cursor: not-allowed; /* Keep cursor */
}

/* REMOVED HOVER EFFECT FOR LOCKED WORLD CARD */

.world-card.locked::after {
    content: '🔒'; /* Lock emoji */
    position: absolute; /* Position relative to the card */
    top: 8px; /* Adjust position from top */
    right: 8px; /* Adjust position from right */
    font-size: 1.5rem; /* Adjust size */
    padding: 2px 4px; /* Add slight padding */
    line-height: 1; /* Adjust line height for better centering */
    color: var(--clay-text-primary); /* Ensure visibility */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Add shadow for contrast */
}


#location-detail-container {
    display: flex; /* Keep layout */
    flex-direction: column; /* Keep layout */
    gap: 1.5rem; /* Keep spacing */
}

.area-container {
    background: var(--gradient-surface); /* Use theme variable */
    border: 1px solid var(--clay-border); /* Use theme variable */
    border-radius: 0.75rem; /* Keep rounding */
    padding: 1.5rem; /* Keep padding */
    box-shadow: var(--clay-shadow); /* Use theme variable */
    transition: opacity 0.3s; /* Keep transition */
}
.nest-detail-container { /* Specific style for nest details */
    border-color: var(--clay-info); /* Blue border for nest */
}

.area-detail-grid {
    display: grid; /* Keep layout */
    grid-template-columns: 2fr 1fr; /* Keep layout */
    gap: 1.5rem; /* Keep spacing */
    align-items: start; /* Keep layout */
}

.area-image-container {
    border-radius: 0.5rem; /* Keep rounding */
    overflow: hidden; /* Keep layout */
    border: 1px solid var(--clay-border); /* Add border */
}

.area-image {
    width: 100%; /* Keep layout */
    height: auto; /* Keep layout */
    object-fit: cover; /* Keep layout */
    display: block; /* Prevent extra space */
}

.area-title {
    font-size: 1.25rem; /* Adjusted size */
    font-weight: 600; /* Adjusted weight */
    margin-bottom: 1rem; /* Keep spacing */
    color: var(--clay-text-primary); /* Ensure color */
}

.area-info {
    display: flex; /* Keep layout */
    flex-direction: column; /* Keep layout */
    gap: 1rem; /* Adjusted gap */
    margin-top: 1rem; /* Add margin */
}

.icon-grid-container strong,
.drops-list-container strong {
    font-weight: 600; /* Keep weight */
    color: var(--clay-text-tertiary); /* Use theme variable */
    margin-bottom: 0.5rem; /* Adjusted margin */
    display: block; /* Keep layout */
    border-bottom: 1px solid var(--clay-border); /* Use theme variable */
    padding-bottom: 0.3rem; /* Adjusted padding */
    font-size: 0.9rem; /* Adjust size */
}

.icon-grid {
    display: flex; /* Keep layout */
    flex-wrap: wrap; /* Keep layout */
    gap: 0.5rem; /* Adjusted gap */
}

.monster-item {
    width: 40px; /* Adjusted size */
    height: 40px; /* Adjusted size */
    background-color: var(--clay-dark); /* Use theme variable */
    border-radius: 0.375rem; /* Adjusted rounding */
    padding: 0.25rem; /* Keep padding */
    display: flex; /* Keep layout */
    align-items: center; /* Keep layout */
    justify-content: center; /* Keep layout */
    border: 1px solid var(--clay-border); /* Use theme variable */
}

.monster-icon {
    width: 100%; /* Keep layout */
    height: 100%; /* Keep layout */
    object-fit: contain; /* Keep layout */
}

.drops-list {
    list-style-type: none; /* Keep layout */
    padding: 0; /* Keep layout */
    display: flex; /* Keep layout */
    flex-direction: column; /* Keep layout */
    gap: 0.3rem; /* Adjusted gap */
}

.drop-list-item {
    display: flex; /* Keep layout */
    align-items: center; /* Keep layout */
    gap: 0.5rem; /* Adjusted gap */
    background-color: var(--clay-dark); /* Use theme variable */
    padding: 0.4rem 0.6rem; /* Adjusted padding */
    border-radius: 0.375rem; /* Keep rounding */
    border: 1px solid var(--clay-border); /* Use theme variable */
    font-size: 0.8rem; /* Adjust size */
}

.drop-icon {
    width: 18px; /* Adjusted size */
    height: 18px; /* Adjusted size */
    object-fit: contain; /* Keep layout */
}

.explore-btn {
    /* Styles handled by theme (primary button) */
    background-color: var(--clay-success); /* Use green for explore */
    border-color: #388E3C;
    padding: 0.6rem 1.2rem; /* Adjusted padding */
    font-size: 0.9rem; /* Adjusted size */
    margin-bottom: 1rem; /* Adjusted margin */
}
/* REMOVED HOVER EFFECT FOR EXPLORE BUTTON
.explore-btn:hover:not(:disabled) {
    background-color: #388E3C;
} */
.explore-btn:disabled { /* Styles handled by theme */ }

.area-locked {
    opacity: 0.6; /* Keep opacity */
    border-left: 3px solid var(--clay-error); /* Use theme variable */
    padding-left: 1rem; /* Add padding for visual separation */
}

.hidden { display: none !important; } /* Keep utility */