/* ========================================
   MODAL STYLES - CRYSTAL CASCADE
   ========================================
   
   All modal/popup panels:
   - Stash (Gem inventory)
   - Collection (Specimen collection)
   - Location Selector (Travel)
   - Controls (Settings)
   - Achievements
   - Tutorial
   
   Uses CSS variables from base.css (overridden by responsive.css)
   
   NOTE: Media queries are in responsive.css, not here!
   
   ======================================== */


/* ============================================================
   MODAL OVERLAY (Backdrop)
   ============================================================ */

.modal-overlay {
    /* Hidden by default */
    display: none;
    
    /* Cover entire VIEWPORT - use fixed to ignore body padding on notched devices */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Dark semi-transparent backdrop */
    background: rgba(0, 0, 0, 0.88);
    
    /* Enable clicks (modals are interactive) */
    pointer-events: auto;
    
    /* Center the modal panel */
    justify-content: center;
    align-items: center;
    
    /* Above game AND footer - critical for small screens where close button needs to be accessible */
    z-index: 6000;
    
    /* Fade in animation */
    opacity: 0;
    transition: opacity 0.3s ease;
    
    /* NOTE: Padding is set by UNIFIED MODAL POSITIONING rules below
       using --modal-top-offset and --modal-bottom-offset */
    padding: 12px;
    box-sizing: border-box;
}

.modal-overlay.visible {
    display: flex;
    opacity: 1;
}

/* Interactive modals above victory screen */
#stash-modal.visible,
#collection-modal.visible,
#location-modal.visible,
#controls-modal.visible,
#achievements-modal.visible,
#geode-modal.visible,
#discovery-modal.visible {
    z-index: 7000;
}

/* ============================================================
   UNIFIED MODAL POSITIONING - ALL POP-UPS
   ============================================================
   ALL modals (Stash, Gold, Travel, Controls, Achievements) use
   the SAME positioning based on the game's header and footer
   graphics. This ensures consistent appearance across all screens.
   
   CSS variables are set by JavaScript based on actual graphic sizes:
   - --modal-top-offset: header height + buffer
   - --modal-bottom-offset: footer height + buffer  
   - --modal-available-height: exact space between header/footer
   ============================================================ */

/* ALL modal overlays - unified positioning */
#collection-modal.visible,
#location-modal.visible,
#achievements-modal.visible {
    /* Align to top so panels start below header */
    align-items: flex-start !important;
    /* Top: GUARANTEED 80px minimum + any safe area (notch/status bar) */
    padding-top: calc(80px + env(safe-area-inset-top, 0px)) !important;
    /* Bottom: stay above footer graphic */
    padding-bottom: var(--modal-bottom-offset, clamp(40px, 8vh, 100px)) !important;
}

/* STASH MODAL & CONTROLS - sizes to content, bottom aligned with other modals */
#stash-modal.visible,
#controls-modal.visible {
    /* Align to BOTTOM - panel bottom matches other modals */
    align-items: flex-end !important;
    /* Same padding as other modals - GUARANTEED 80px minimum + safe area */
    padding-top: calc(80px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: var(--modal-bottom-offset, clamp(40px, 8vh, 100px)) !important;
}

/* MOST modal panels - unified sizing and layout (fixed height) */
/* Gold, Travel, and Achievements modals - account for top/bottom padding + safe area */
#collection-modal .stash-panel,
#location-modal .stash-panel,
#achievements-modal .stash-panel {
    /* FORCE modals to EXACTLY the same height - fills space between header/footer */
    /* 80px top padding + 100px bottom padding + safe areas = total reduction */
    height: calc(100vh - 180px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100vh - 180px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    
    /* Reasonable minimum so modals don't collapse on tiny screens */
    min-height: 200px;
    
    /* Flex layout for proper content organization */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Content flows from top */
    
    /* Let child elements handle their own overflow/scrolling */
    overflow: hidden;
}

/* STASH MODAL & CONTROLS MODAL panels - size to content */
#stash-modal .stash-panel,
#controls-modal .stash-panel {
    /* Size to content - no forced height */
    height: auto !important;
    /* But don't exceed available space */
    max-height: var(--modal-available-height, calc(100vh - 15vh)) !important;
    
    /* Flex layout */
    display: flex;
    flex-direction: column;
    
    /* Let child elements handle overflow */
    overflow: hidden;
}

/* Ensure footer is always at the bottom - grid container takes remaining space */
#stash-modal .stash-grid-container,
#collection-modal .stash-grid-container,
#location-modal .stash-grid-container,
#controls-modal .stash-grid-container,
#achievements-modal .stash-grid-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

#stash-modal .stash-footer,
#collection-modal .stash-footer,
#location-modal .stash-footer,
#controls-modal .stash-footer,
#achievements-modal .stash-footer {
    margin-top: auto;
    flex-shrink: 0;
    overflow: visible; /* Allow blocked message to show */
}

/* Not Enough Gold modal - above location modal */
#not-enough-gold-modal.visible {
    z-index: 7500;
}


/* ============================================================
   STASH PANEL (Main Modal Container)
   ============================================================ */

.stash-panel {
    /* Size from CSS variables - scales with --ui-scale */
    width: calc(100% - 24px);
    max-width: calc(var(--base-modal-width) * var(--ui-scale));
    /* NOTE: max-height is set by the UNIFIED MODAL POSITIONING rules above
       using --modal-available-height for consistent positioning across all modals */
    
    /* Ensure modal doesn't touch edges */
    margin: 10px;
    
    /* Dark purple theme */
    background: linear-gradient(
        180deg,
        rgba(50, 30, 70, 0.98) 0%,
        rgba(35, 20, 50, 0.98) 100%
    );
    border: 4px solid #7d5a8f;
    border-radius: var(--radius-lg);
    
    /* Flex layout for header/content/footer - CRITICAL */
    display: flex;
    flex-direction: column;
    
    /* Prevent children from overflowing visually */
    overflow: hidden;
    
    /* For absolute positioned elements */
    position: relative;
    
    /* Depth */
    box-shadow: 
        0 0 40px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(125, 90, 143, 0.3);
}


/* ============================================================
   STASH HEADER
   ============================================================ */

.stash-header {
    padding: var(--modal-padding);
    padding-bottom: var(--spacing-md);
    text-align: center;
    
    /* Darker background */
    background: rgba(0, 0, 0, 0.25);
    
    /* Stack elements */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    
    /* Border at bottom */
    border-bottom: 2px solid #7d5a8f;
    
    /* Don't shrink when content overflows */
    flex-shrink: 0;
}

/* Stash Title */
.stash-title {
    font-size: var(--font-xl);
    font-weight: bold;
    color: #ffdd00;
    text-shadow: 2px 2px 4px #000;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Details Container (Description area) */
.stash-details-container {
    background: rgba(0, 0, 0, 0.35);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    width: 100%;
    
    /* Vertical center the content */
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    /* Height constraints - responsive, prevents overflow */
    min-height: 50px;
    max-height: clamp(55px, 15vh, 100px);
    
    /* Hidden overflow with ellipsis for text */
    overflow: hidden;
    
    /* Center content */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Description Text - larger for mobile readability */
.stash-desc {
    font-size: clamp(16px, 4.5vw, 19px);
    color: #e0e0e0;
    line-height: 1.4;
}

/* Gem Name (when selected) */
.stash-gem-name {
    font-size: var(--font-lg);
    font-weight: bold;
    color: #ffdd00;
    margin-bottom: var(--spacing-xs);
}


/* ============================================================
   STASH GRID (Scrollable Content)
   ============================================================ */

.stash-grid-container {
    /* Fill remaining space */
    flex: 1;
    
    /* Scrollable */
    overflow-y: auto;
    overflow-x: hidden;
    
    /* Padding with extra bottom for smooth scrolling */
    padding: var(--modal-padding);
    padding-bottom: calc(var(--modal-padding) + 10px);
    
    /* Subtle background */
    background: rgba(0, 0, 0, 0.1);
    
    /* Important for flex overflow to work */
    min-height: 0;
}

/* Item Grid - Responsive */
.stash-grid {
    display: grid;
    /* Fixed 5-column grid */
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(4px, 1.5vw, 12px);
}

/* Individual Item */
.stash-item {
    /* Square aspect ratio */
    aspect-ratio: 1;
    
    /* Styling */
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid #5a3d6b;
    border-radius: var(--radius-sm);
    
    /* Center gem image */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* For count badge */
    position: relative;
    
    /* Interactive */
    cursor: pointer;
    transition: transform 0.1s, background 0.1s, border-color 0.1s;
}

.stash-item:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.15);
    border-color: #a78bfa;
}

.stash-item.selected {
    border-color: #ffdd00;
    background: rgba(255, 221, 0, 0.15);
    box-shadow: 0 0 12px rgba(255, 221, 0, 0.4);
}

/* Empty inventory slot */
.stash-item.stash-item-empty {
    background: rgba(0, 0, 0, 0.2);
    border: 2px dashed rgba(90, 61, 107, 0.6);
    cursor: default;
    opacity: 0.5;
}

.stash-item.stash-item-empty:hover {
    transform: none;
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(90, 61, 107, 0.6);
}

/* Gem Image */
.stash-item img {
    width: 85%;
    height: 85%;
    object-fit: contain;
}

/* Count Badge - supports double digits */
.stash-count {
    position: absolute;
    bottom: -6px;
    right: -6px;
    
    background: linear-gradient(135deg, #e53935, #b71c1c);
    color: white;
    border-radius: 12px; /* Pill shape for double digits */
    
    /* Use min-width + padding for flexible sizing */
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    font-size: var(--font-sm);
    
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    white-space: nowrap; /* Prevent text wrapping */
    
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
    border: 2px solid #fff;
}


/* ============================================================
   STASH FOOTER
   ============================================================ */

.stash-footer {
    padding: var(--modal-padding);
    padding-top: var(--spacing-md);
    
    /* Center buttons */
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    
    /* Border at top */
    border-top: 2px solid #7d5a8f;
    background: rgba(0, 0, 0, 0.25);
    
    /* Don't shrink */
    flex-shrink: 0;
}


/* ============================================================
   TAB NAVIGATION (Stash/Collection tabs, Travel/Exotic tabs)
   ============================================================ */

.modal-tabs {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    justify-content: center;
}

.modal-tab {
    padding: var(--spacing-sm) var(--spacing-lg);
    
    /* Styling */
    background: rgba(45, 27, 61, 0.8);
    border: 2px solid #5a3d6b;
    border-radius: var(--radius-sm);
    
    /* Typography */
    font-size: var(--font-sm);
    font-weight: bold;
    color: #999;
    text-transform: uppercase;
    
    /* Interactive */
    cursor: pointer;
    transition: all 0.2s;
}

.modal-tab:hover {
    background: rgba(60, 40, 80, 0.9);
    border-color: #7d5a8f;
    color: #ccc;
}

.modal-tab.active {
    background: rgba(80, 50, 100, 0.95);
    border-color: #ffdd00;
    color: #ffdd00;
}


/* ============================================================
   LOCATION SELECTOR
   ============================================================ */

/* Target both class AND ID since HTML uses id="location-list" */
.location-list,
#location-list,
#location-list-exotic {
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 0.8vw, 4px);
}

.location-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #5a3d6b;
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    
    /* Margin fallback for browsers that don't support flex gap */
    margin-bottom: 4px;
    
    /* Two-column layout: info on left, badge on right */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    
    /* Interactive */
    cursor: pointer;
    transition: all 0.2s;
}

/* Remove margin from last item to prevent extra space */
.location-item:last-child {
    margin-bottom: 0;
}

.location-item:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #ffdd00;
}

.location-item.current {
    border-color: #44ff88;
    background: rgba(68, 255, 136, 0.1);
}

.location-item.locked {
    opacity: 0.85;
    cursor: pointer;
}

/* Keep location name visible even when locked */
.location-item.locked .location-name {
    color: #fff !important;
    opacity: 1;
}

/* Left side - location info */
.location-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

.location-name { 
    font-weight: bold; 
    color: #fff; 
    font-size: clamp(16px, 4.5vw, 20px);
}

.location-gem {
    font-size: clamp(15px, 4vw, 18px);
    color: #a090b8;
}

/* Right side - status/level badge */
.location-status { 
    font-size: clamp(15px, 4vw, 17px); 
    color: #aaa;
    flex-shrink: 0;
}

.location-status.unlocked {
    color: #44ff88;
}

.location-status.locked {
    color: #ff6666;
}

/* Level Badge */
.location-level {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: var(--font-sm);
    font-weight: bold;
    flex-shrink: 0;
}

/* Ticket Price Row (for locked locations) */
.location-ticket {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.location-ticket img {
    width: 16px;
    height: 16px;
}

.location-ticket-price {
    font-size: var(--font-sm);
    font-weight: bold;
    color: #ffcc00;
}

.location-ticket-gold {
    width: 18px;
    height: 18px;
}


/* ============================================================
   WORLD MAP
   ============================================================ */

.world-map-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto var(--spacing-sm);
    
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 3px solid #7d5a8f;
    
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    
    /* CRITICAL: Prevent map from being cropped in flex containers */
    flex-shrink: 0;
}

.world-map-container img {
    width: 100%;
    height: auto;
    display: block;
}


/* ============================================================
   LOCATION MODAL SPECIFIC OVERRIDES
   ============================================================
   The location modal uses stash-details-container for the map
   preview, but that container has height limits. Override here.
   ============================================================ */

/* Location modal: Height handled by full-height modal rules above */
/* #location-modal .stash-panel max-height is set in the FULL-HEIGHT MODALS section */

/* Location modal: Expand the details container to fit the map */
#location-modal .stash-details-container {
    min-height: auto;
    max-height: none;
    padding: var(--spacing-md);
}

/* Location modal: Ensure preview fits properly */
#location-modal #location-preview {
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 3px solid #7d5a8f;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* Location modal: Scrollable list container */
#location-modal .stash-grid-container {
    display: flex;
    flex-direction: column;
    padding: var(--modal-padding);
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* Critical for flex overflow to work */
}

/* Location items styling (in location modal context) */
#location-modal .location-item {
    background: rgba(125, 90, 143, 0.2);
    border: 2px solid #7d5a8f;
}

#location-modal .location-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #a78bfa;
}


/* ============================================================
   TUTORIAL OVERLAY
   ============================================================ */

.tutorial-container {
    /* Hidden by default */
    display: none;
    
    /* Floating above game */
    position: absolute;
    top: 140px;
    left: 0;
    right: 0;
    
    /* Non-blocking */
    pointer-events: none;
    z-index: 500;
    
    text-align: center;
    padding: 0 var(--spacing-lg);
}

.tutorial-container.visible {
    display: block;
}

.tutorial-message-box {
    display: inline-block;
    
    /* Styling */
    background: linear-gradient(
        180deg, 
        rgba(60, 40, 80, 0.98) 0%, 
        rgba(40, 25, 55, 0.98) 100%
    );
    border: 3px solid #7d5a8f;
    border-radius: var(--radius-lg);
    padding: var(--modal-padding) calc(var(--modal-padding) + 10px);
    max-width: 420px;
    
    /* Effects */
    box-shadow: 
        0 0 25px rgba(125, 90, 143, 0.5),
        0 6px 20px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    
    /* Interactive */
    pointer-events: auto;
    
    /* Animation */
    animation: tutorialSlideIn 0.4s ease-out;
    text-align: center;
}

@keyframes tutorialSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tutorial-text {
    font-size: var(--font-md);
    font-weight: bold;
    color: #f4e4bc;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    line-height: 1.4;
    margin-bottom: var(--spacing-md);
}

.tutorial-skip-btn {
    background: linear-gradient(180deg, #4a3a5a, #2a1a3a);
    border: 2px solid #5a4a6a;
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-xl);
    
    font-size: var(--font-sm);
    font-weight: bold;
    color: #999;
    
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tutorial-skip-btn:hover {
    background: linear-gradient(180deg, #5a4a6a, #3a2a4a);
    color: #fff;
    border-color: #7a6a8a;
}


/* ============================================================
   MILESTONE CELEBRATION
   ============================================================ */

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Power blocked message (shown when trying to use power while another is active) */
.power-blocked-msg {
    /* Fixed position at bottom-center of screen */
    position: fixed !important;
    left: 50% !important;
    bottom: 12% !important;
    transform: translateX(-50%) !important;
    
    /* Sizing and appearance */
    width: auto !important;
    max-width: 90vw;
    padding: 12px 24px !important;
    
    /* Text styling */
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-align: center !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    
    /* Background - prominent red */
    background: rgba(180, 40, 40, 0.95) !important;
    border-radius: 8px;
    border: 2px solid #ff6666;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    
    /* Ensure visibility above EVERYTHING */
    z-index: 999999 !important;
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
    
    /* Animation */
    animation: blockedMsgPop 2.5s ease-out forwards;
}

@keyframes blockedMsgPop {
    0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
    15% { opacity: 1; transform: translateX(-50%) translateY(0); }
    85% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#milestone-modal .stash-panel {
    animation: bounceIn 0.5s ease;
}

#milestone-modal #milestone-emoji {
    animation: pulse 1s infinite;
}


/* ============================================================
   GOLD DISPLAY IN MODALS
   ============================================================ */

.modal-gold-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    
    background: rgba(0, 0, 0, 0.3);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 2px solid rgba(255, 215, 0, 0.5);
}

.modal-gold-icon {
    width: 24px;
    height: 24px;
}

.modal-gold-amount {
    font-size: var(--font-lg);
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}


/* ============================================================
   COLLECTION MODAL SPECIFIC
   ============================================================ */

/* ============================================================
   STASH MODAL SPECIFIC
   ============================================================ */

#stash-modal .stash-header {
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
    /* Ensure header stays above grid */
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

#stash-modal .stash-details-container {
    /* Fixed height so grid doesn't jump when description changes */
    flex-shrink: 0;
    overflow: hidden; /* NO scroll here - only gems grid scrolls */
    height: clamp(85px, 15vh, 110px);
    
    /* Center content vertically for consistent appearance */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md); /* More top/bottom padding */
    
    /* Border state for gem selection */
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}

#stash-modal .stash-details-container.gem-selected {
    border-color: #ffd700;
}

/* ===== STASH TABS - Traditional Tab Style ===== */
#stash-modal .stash-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 8px 0;
    background: transparent;
    border-bottom: 2px solid #6a5580;
    margin: 0;
    position: relative;
    z-index: 5;
    flex-shrink: 0;
}

#stash-modal .stash-tabs .tab {
    flex: 1;
    min-width: 0;
    padding: clamp(8px, 2vw, 12px) clamp(8px, 2vw, 16px);
    font-size: clamp(12px, 3.5vw, 16px);
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border: 2px solid #6a5580;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: #5a4570;
    color: #aaa;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#stash-modal .stash-tabs .tab:hover:not(.stash-tab-active) {
    background: #6a5580;
    color: #ccc;
}

/* Active Gem Stash tab - Teal/Cyan theme */
#stash-modal .stash-tabs .tab:first-child.stash-tab-active {
    background: linear-gradient(180deg, #3d9999 0%, #2a7070 100%);
    border-color: #5fd9d9;
    border-bottom-color: transparent;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

/* Active Discoveries tab - Purple theme */
#stash-modal .stash-tabs .tab:last-child.stash-tab-active {
    background: linear-gradient(180deg, #8855bb 0%, #6644aa 100%);
    border-color: #bb88ee;
    border-bottom-color: transparent;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

#stash-modal .stash-grid-container {
    /* Size to content, scroll if too many gems */
    flex: 0 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 1;
    min-height: 0;
    padding: var(--spacing-sm);
    /* Extra bottom padding so gem count badges don't overflow */
    padding-bottom: var(--spacing-md);
}

#stash-modal .stash-grid {
    min-height: auto;
}

/* Discoveries tab - must scroll within container, not push modal taller */
#stash-modal #stash-discoveries {
    /* Fill available space but don't exceed it */
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    
    /* Prevent content from pushing modal taller */
    max-height: 100%;
    
    /* Padding for content */
    padding: var(--spacing-md);
}

/* When discoveries tab is active, ensure proper scrolling */
#stash-modal #stash-discoveries.active {
    display: flex;
    flex-direction: column;
}

/* Scrollable container for discoveries content */
.discoveries-scroll-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: var(--spacing-xs); /* Space for scrollbar */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(150, 100, 200, 0.5) transparent;
}

.discoveries-scroll-container::-webkit-scrollbar {
    width: 6px;
}

.discoveries-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

.discoveries-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(150, 100, 200, 0.5);
    border-radius: 3px;
}

.discoveries-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(150, 100, 200, 0.7);
}


/* ============================================================
   LOCATION MODAL SPECIFIC
   ============================================================ */



/* ============================================================
   LOCATION MODAL - Accordion Style
   ============================================================ */

/* Location tabs container at top */
/* ===== LOCATION TABS - Traditional Tab Style ===== */
#location-modal .location-tabs-container {
    display: flex;
    gap: 4px;
    padding: 6px 8px 0;
    background: transparent;
    border-bottom: 2px solid #6a5580;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    overflow: visible;
    flex-shrink: 0;
}

#location-modal .location-tab {
    flex: 1;
    min-width: 0;
    padding: clamp(8px, 2vw, 12px) clamp(8px, 2vw, 16px);
    font-size: clamp(12px, 3.5vw, 16px);
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border: 2px solid #6a5580;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: #5a4570;
    color: #aaa;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

#location-modal .location-tab:hover:not(.active) {
    background: #6a5580;
    color: #ccc;
}

/* Active Travel tab - Green theme */
#location-modal .location-tab.active {
    background: linear-gradient(180deg, #3d9970 0%, #2a6b4f 100%);
    border-color: #5fd99f;
    border-bottom-color: transparent;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

/* Active Exotic tab - Gold theme */
#location-modal .location-tab:last-child.active {
    background: linear-gradient(180deg, #dda522 0%, #bb8811 100%);
    border-color: #ffcc44;
    border-bottom-color: transparent;
    color: #442200;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
}

/* Accordion container */
#location-modal .location-accordion-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-sm);
    min-height: 0;
    position: relative; /* For scroll indicator positioning */
}

/* Accordion list */
.location-accordion {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 3vw, 18px);
}

/* ============================================================
   ACCORDION LOCATION ITEMS
   ============================================================ */

/* Base location item (collapsed state) */
.location-accordion-item {
    background: rgba(60, 40, 80, 0.5);
    border: 2px solid #5a3d6b;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.25s ease;
}

.location-accordion-item:hover {
    border-color: #7d5a8f;
    background: rgba(80, 50, 100, 0.6);
}

.location-accordion-item.current {
    border-color: #44ff88;
    background: rgba(68, 255, 136, 0.12);
}

.location-accordion-item.expanded {
    border-color: #a78bfa;
    background: rgba(80, 50, 120, 0.7);
}

/* Header row (always visible, clickable) */
.location-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: clamp(10px, 2.5vw, 14px) clamp(12px, 3vw, 16px);
    cursor: pointer;
    transition: background 0.2s ease;
}

.location-accordion-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Location info in header */
.location-accordion-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.location-accordion-name {
    font-size: clamp(16px, 4.5vw, 20px);
    font-weight: bold;
    color: #fff;
}

.location-accordion-item.locked .location-accordion-name {
    color: #bbb;
}

.location-accordion-gem {
    font-size: clamp(13px, 3.5vw, 16px);
    color: #a090b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.location-gem-icon {
    width: clamp(18px, 5vw, 24px);
    height: clamp(18px, 5vw, 24px);
    object-fit: contain;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
}

/* Badge on the right */
.location-accordion-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: clamp(11px, 2.8vw, 14px);
    font-weight: bold;
    flex-shrink: 0;
}

.location-accordion-badge.badge-level {
    background: linear-gradient(135deg, #5544aa 0%, #332266 100%);
    border: 1px solid #7766bb;
    color: #fff;
}

.location-accordion-badge.badge-current {
    background: linear-gradient(135deg, #44aa44 0%, #226622 100%);
    border: 1px solid #66cc66;
    color: #fff;
}

.location-accordion-badge.badge-locked {
    background: rgba(100, 70, 130, 0.5);
    border: 1px solid #6a4a8a;
    color: #ccc;
}

/* Expand arrow */
.location-accordion-arrow {
    font-size: clamp(14px, 3.5vw, 18px);
    color: #a090b8;
    transition: transform 0.25s ease;
    margin-left: var(--spacing-sm);
}

.location-accordion-item.expanded .location-accordion-arrow {
    transform: rotate(180deg);
}

/* Expanded content (hidden by default) */
.location-accordion-content {
    display: none;
    padding: 0 clamp(12px, 3vw, 16px) clamp(12px, 3vw, 16px);
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(150, 120, 180, 0.3);
    max-height: none; /* Never constrain height */
}

.location-accordion-item.expanded .location-accordion-content {
    display: block;
    max-height: none !important;
    animation: accordionFadeIn 0.2s ease;
}

@keyframes accordionFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Preview image in expanded content */
.location-accordion-preview {
    width: 100%;
    margin: var(--spacing-md) 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid #7d5a8f;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    position: relative;
}

/* Image sets the container size */
.location-accordion-preview img {
    width: 100%;
    height: auto;
    display: block;
}

/* Video overlays exactly on top of image - slightly oversized to prevent gaps */
.location-accordion-preview video {
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    object-fit: cover;
    object-position: center;
    opacity: 0;
    pointer-events: none;
}

/* Ticket price display */
.location-accordion-ticket {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-md);
    font-size: clamp(14px, 3.8vw, 18px);
    font-weight: bold;
}

.location-accordion-ticket.can-afford {
    color: #44ff44;
    border: 1px solid rgba(68, 255, 68, 0.3);
}

.location-accordion-ticket.cannot-afford {
    color: #ffaa00;
    border: 1px solid rgba(255, 170, 0, 0.3);
}

.location-accordion-ticket img {
    width: 24px;
    height: 24px;
}

/* Travel button in expanded content */
.location-accordion-travel-btn {
    width: 100%;
    padding: clamp(14px, 3.5vw, 18px);
    font-size: clamp(16px, 4.5vw, 20px);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.location-accordion-travel-btn.btn-travel {
    background: linear-gradient(135deg, #44aa44 0%, #228822 100%);
    border: 2px solid #66cc66;
    color: #fff;
    box-shadow: 0 4px 0 #115511;
}

.location-accordion-travel-btn.btn-travel:hover {
    background: linear-gradient(135deg, #55bb55 0%, #339933 100%);
}

.location-accordion-travel-btn.btn-travel:active {
    box-shadow: 0 2px 0 #115511;
    transform: translateY(2px);
}

.location-accordion-travel-btn.btn-buy {
    background: linear-gradient(135deg, #cc9922 0%, #aa7711 100%);
    border: 2px solid #ddaa33;
    color: #fff;
    box-shadow: 0 4px 0 #775500;
}

.location-accordion-travel-btn.btn-buy:hover {
    background: linear-gradient(135deg, #ddaa33 0%, #bb8822 100%);
}

.location-accordion-travel-btn.btn-here {
    background: rgba(80, 80, 80, 0.5);
    border: 2px solid #666;
    color: #aaa;
    cursor: not-allowed;
    box-shadow: none;
}

.location-accordion-travel-btn.btn-locked {
    background: rgba(60, 60, 60, 0.5);
    border: 2px solid #555;
    color: #888;
    cursor: not-allowed;
    box-shadow: none;
    font-size: clamp(12px, 3.2vw, 15px);
    padding: clamp(10px, 2.5vw, 14px);
}

/* Not enough gold message in accordion */
.location-accordion-error {
    background: linear-gradient(135deg, rgba(180, 60, 60, 0.3) 0%, rgba(120, 30, 30, 0.3) 100%);
    border: 1px solid rgba(255, 100, 100, 0.4);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
    text-align: center;
}

.location-accordion-error-title {
    color: #ff6666;
    font-weight: bold;
    font-size: clamp(14px, 3.5vw, 16px);
    margin-bottom: var(--spacing-xs);
}

.location-accordion-error-text {
    color: #ddd;
    font-size: clamp(12px, 3vw, 14px);
    margin-bottom: var(--spacing-sm);
}

.location-accordion-error .btn {
    font-size: clamp(12px, 3vw, 14px);
}

/* Exotic location progress in accordion */
.location-accordion-progress {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(150, 120, 180, 0.2);
}

.location-accordion-progress-text {
    font-size: clamp(12px, 3vw, 14px);
    color: #aa88cc;
    margin-bottom: var(--spacing-sm);
}

.location-accordion-gem-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--spacing-md);
}

/* Gem progress fill effect */
.gem-progress-wrapper {
    position: relative;
    width: clamp(24px, 6vw, 32px);
    height: clamp(24px, 6vw, 32px);
}

.gem-progress-bg {
    width: 100%;
    height: 100%;
    opacity: 0.3;
}

.gem-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(calc(100% - var(--fill-percent)) 0 0 0);
}

/* Legacy classes for backward compatibility */
.location-accordion-gem-icon {
    width: clamp(24px, 6vw, 32px);
    height: clamp(24px, 6vw, 32px);
}

.location-accordion-gem-icon.gem-complete {
    opacity: 1;
    filter: drop-shadow(0 0 4px #ffd700);
}

.location-accordion-gem-icon.gem-incomplete {
    opacity: 0.3;
    filter: grayscale(100%);
}

.location-item .location-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.location-item .location-name {
    font-size: clamp(16px, 4.5vw, 20px);
    font-weight: bold;
    color: #fff;
}

.location-item .location-cost {
    font-size: clamp(15px, 4vw, 18px);
    color: var(--color-gold);
}

.location-item .location-status {
    font-size: clamp(14px, 3.8vw, 17px);
    font-weight: bold;
    padding: 4px 8px;
    border-radius: var(--radius-xs);
}

/* Location Item Header */
.location-item .location-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.location-item .location-name {
    font-size: clamp(16px, 4.5vw, 20px);
    font-weight: bold;
    color: #fff;
}

.location-item .location-name.text-muted {
    color: #aaa;
}

.location-item .location-gem {
    font-size: clamp(15px, 4vw, 18px);
    color: #bbb;
}

.location-item .location-gem.text-muted {
    color: #777;
}

/* Location Badges */
.location-item .location-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid;
}

.location-item .location-badge.badge-level {
    background: linear-gradient(135deg, #5544aa 0%, #332266 100%);
    border-color: #7766bb;
}

.location-item .location-badge.badge-current {
    background: linear-gradient(135deg, #44aa44 0%, #226622 100%);
    border-color: #66cc66;
}

.location-item .location-badge .badge-icon {
    font-size: var(--font-xs);
}

.location-item .location-badge .badge-text {
    color: #fff;
    font-size: var(--font-xs);
    font-weight: bold;
}

/* Location Ticket (locked state) */
.location-item .location-ticket {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    font-size: var(--font-md);
}

.location-item .location-ticket.can-afford {
    color: #44ff44;
}

.location-item .location-ticket.cannot-afford {
    color: #ffaa00;
}

.location-item .location-ticket .ticket-icon {
    font-size: var(--font-lg);
}

.location-item .location-ticket .ticket-gold-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 0 3px #FFD700);
}

/* Location Item States */
.location-item.locked {
    opacity: 0.85;
    cursor: pointer;
}

/* Keep location name bright even when locked */
.location-item.locked .location-name {
    color: #fff !important;
}

.location-item.current {
    border-color: #44ff88;
    background: rgba(68, 255, 136, 0.08);
}

.location-item.unlocked {
    border-color: #88ff88;
}

.location-item .unlocked-label {
    color: #88ff88;
    font-size: var(--font-sm);
}

/* Exotic Location Progress */
.location-item .exotic-progress {
    margin-top: 12px;
}

.location-item .exotic-progress-text {
    font-size: var(--font-md);
    color: #aa88cc;
    margin-bottom: 8px;
}

.location-item .exotic-gem-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.location-item .exotic-gem-progress {
    width: 28px;
    height: 28px;
}

.location-item .exotic-gem-progress.gem-complete {
    opacity: 1;
    filter: drop-shadow(0 0 4px #ffd700);
}

.location-item .exotic-gem-progress.gem-incomplete {
    opacity: 0.3;
    filter: grayscale(100%);
}

.location-item .exotic-unlocked-badge {
    margin-top: 10px;
    color: #44ff44;
    font-size: var(--font-lg);
    font-weight: bold;
}

/* Coming Soon Message */
.coming-soon-message {
    text-align: center;
    padding: var(--spacing-xl);
    color: #8866aa;
    font-style: italic;
    font-size: var(--font-sm);
}


/* ============================================================
   GEODE MODAL SPECIFIC
   ============================================================ */

#geode-modal .geode-panel {
    max-width: 420px;
}

/* Override the stash-details-container height limit for geode modal */
#geode-modal .stash-details-container {
    height: auto !important;
    max-height: none !important;
    min-height: auto;
    overflow: visible;
}

#geode-modal .geode-preview {
    width: 100%;
    background: #1a1a1a;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    border: 3px solid #a855f7;
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.4);
}

#geode-modal .geode-preview-img {
    width: 100%;
    height: auto;
    display: block;
}

#geode-modal .geode-preview-video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s;
    object-fit: cover;
}


/* ============================================================
   MILESTONE MODAL SPECIFIC
   ============================================================ */

#milestone-modal.milestone-overlay {
    z-index: 100000;
    background: rgba(0, 0, 0, 0.9);
}

#milestone-modal .confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

#milestone-modal .milestone-panel {
    max-width: 400px;
    animation: bounceIn 0.5s ease;
    background: linear-gradient(180deg, #2d1f4e 0%, #1a1030 100%);
}

#milestone-modal .milestone-content {
    text-align: center;
    padding: 25px 20px;
}

#milestone-modal .milestone-emoji {
    font-size: 70px;
    margin-bottom: 15px;
    animation: pulse 1s infinite;
}

#milestone-modal .milestone-title {
    font-size: var(--font-xxl);
    color: var(--color-gold);
    font-weight: bold;
    margin-bottom: 12px;
}

#milestone-modal .milestone-amount {
    font-size: calc(var(--font-xxl) * 1.2);
    color: #fff;
    font-weight: bold;
    margin-bottom: 15px;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}

#milestone-modal .milestone-unlocked {
    font-size: var(--font-lg);
    margin-bottom: 10px;
}

#milestone-modal .milestone-location {
    font-size: var(--font-xl);
    color: #ff88ff;
    font-weight: bold;
    margin-bottom: 25px;
    text-shadow: 0 0 15px #ff88ff;
}

#milestone-modal .milestone-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

#milestone-modal .milestone-buttons .btn {
    font-size: clamp(16px, 4.5vw, 20px);
    padding: clamp(14px, 3.5vw, 18px) clamp(24px, 6vw, 36px);
    min-width: 140px;
}


/* ============================================================
   CONTROLS/SETTINGS MODAL SPECIFIC
   ============================================================ */

#controls-modal .settings-content {
    padding: var(--spacing-xl);
    /* Size to content, don't stretch */
    flex: 0 0 auto;
}

#controls-modal .settings-row {
    margin-bottom: var(--spacing-xl);
}

#controls-modal .settings-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

#controls-modal .settings-label {
    color: var(--color-gold);
    font-weight: bold;
    font-size: var(--font-md);
}

#controls-modal .settings-slider-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

#controls-modal .settings-slider {
    flex: 1;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(100, 70, 140, 0.4);
    border-radius: 4px;
    outline: none;
}

#controls-modal .volume-percent {
    min-width: 50px;
    text-align: right;
    font-size: var(--font-md);
    font-weight: bold;
    color: var(--color-gold);
}

#controls-modal .settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--color-gold);
    border-radius: 50%;
    cursor: pointer;
}

#controls-modal .settings-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--color-gold);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

#controls-modal .settings-actions {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 2px solid #5a3d6b;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}


/* ============================================================
   ACHIEVEMENTS MODAL SPECIFIC
   ============================================================ */

#achievements-modal .achievements-content {
    /* Fill available space - this is the scrollable area */
    flex: 1 1 auto;
    min-height: 0; /* Critical for flex overflow */
    overflow-y: auto;
}

#achievements-modal .achievements-rank-box {
    background: linear-gradient(135deg, rgba(80, 50, 120, 0.5) 0%, rgba(60, 30, 90, 0.5) 100%);
    border: 2px solid rgba(150, 100, 200, 0.5);
    border-radius: 12px;
    padding: 15px;
    margin: clamp(8px, 3vw, 15px);
    margin-bottom: 0;
    text-align: center;
}

#achievements-modal .achievements-section {
    padding: clamp(8px, 3vw, 20px);
}

#achievements-modal .achievements-grid {
    display: grid;
    /* Fixed 3 column grid */
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

/* Collector Rank - Responsive */
.collector-rank-container {
    text-align: center;
}

.collector-rank-title {
    font-size: clamp(14px, 4.5vw, 20px);
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: clamp(1px, 0.8vw, 3px);
    margin-bottom: clamp(6px, 2vw, 12px);
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.collector-rank-badge {
    width: clamp(100px, 40vw, 200px);
    height: clamp(100px, 40vw, 200px);
    object-fit: contain;
}


/* ============================================================
   COLLECTION MODAL SPECIFIC
   ============================================================ */

/* ============================================================
   COLLECTION MODAL - Folder tabs integrated with modal
   ============================================================ */

#collection-modal .stash-panel {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#collection-modal .collection-header {
    padding: 0 !important;
    margin: 0;
    background: transparent;
}

#collection-modal .tabs {
    border-bottom: none;
    margin-bottom: 0;
    gap: 4px;
    padding: 0;
}

#collection-modal .tabs .tab {
    flex: 1;
    padding: clamp(12px, 3vw, 16px) clamp(10px, 2.5vw, 16px);
    /* Font size increased ~30% for better readability */
    font-size: clamp(17px, 4.2vw, 20px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* Folder tab style - fully rounded tops */
    background: linear-gradient(180deg, #3a2850 0%, #2a1c3a 100%);
    color: rgba(255, 255, 255, 0.55);
    border: none;
    border-top: 3px solid #6a4a80;
    border-left: 3px solid #6a4a80;
    border-right: 3px solid #6a4a80;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    margin-right: -3px;
}

#collection-modal .tabs .tab:last-child {
    margin-right: 0;
}

/* First tab extends to left edge */
#collection-modal .tabs .tab:first-child {
    border-top-left-radius: 0;
    border-left: none;
}

/* Last tab extends to right edge */  
#collection-modal .tabs .tab:last-child {
    border-top-right-radius: 0;
    border-right: none;
}

#collection-modal .tabs .tab:hover:not(.tab-gold-active):not(.tab-gems-active):not(.tab-rare-active) {
    background: linear-gradient(180deg, #4a3560 0%, #3a2848 100%);
    color: rgba(255, 255, 255, 0.8);
}

/* ===== INACTIVE TAB COLORS - Lighter/muted versions of active colors ===== */

/* GOLD tab when inactive - lighter gold */
#collection-modal .tabs #gold-info-tab-btn.tab-inactive {
    background: linear-gradient(180deg, #c4922a 0%, #9a7015 100%) !important;
    color: rgba(68, 34, 0, 0.9) !important;
    border-color: #d4a030 !important;
}

/* GEMS tab when inactive - lighter pink */
#collection-modal .tabs #gems-tab-btn.tab-inactive {
    background: linear-gradient(180deg, #e090b8 0%, #c06090 100%) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: #e8a0c0 !important;
}

/* RARE tab when inactive - lighter purple with pulsing halo */
#collection-modal .tabs #collection-tab-btn.tab-inactive {
    background: linear-gradient(180deg, #a888cc 0%, #8866aa 100%) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: #bb99dd !important;
    animation: rareTabPulse 2s ease-in-out infinite;
}

@keyframes rareTabPulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(150, 100, 200, 0.4);
    }
    50% {
        box-shadow: 0 0 15px rgba(180, 130, 255, 0.7), 0 0 25px rgba(150, 100, 200, 0.3);
    }
}

/* Active tab - GOLD (golden/amber style) */
#collection-modal .tabs .tab.tab-gold-active {
    background: linear-gradient(180deg, #dda522, #bb8811) !important;
    color: #442200 !important;
    border-color: #ffcc44 !important;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
    z-index: 2;
}

/* Active tab - GEMS (pink/magenta style) */
#collection-modal .tabs .tab.tab-gems-active {
    background: linear-gradient(180deg, #ff77aa, #dd4488) !important;
    color: white !important;
    border-color: #ff88bb !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    z-index: 2;
}

/* Active tab - RARE (purple/violet style) */
#collection-modal .tabs .tab.tab-rare-active {
    background: linear-gradient(180deg, #9966cc, #7744aa) !important;
    color: white !important;
    border-color: #bb88dd !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    z-index: 2;
    animation: none; /* Stop pulse when active */
}

/* Legacy .active class fallback */
#collection-modal .tabs .tab.active {
    background: linear-gradient(180deg, #4a3060 0%, #3a2550 100%);
    color: #ffffff;
    border-color: #8a6a9a;
    z-index: 2;
}


#collection-modal .collection-content {
    /* Fill available space - this is the scrollable area */
    flex: 1 1 auto;
    min-height: 0; /* Critical for flex overflow */
    overflow-y: auto;
    padding: 0;
    border-top: none;
}

#collection-modal .tab-content {
    padding: var(--spacing-lg);
}

#collection-modal .tab-content.active {
    display: block;
}

/* Travel scroll hint - above close button */
.travel-scroll-hint {
    font-size: clamp(11px, 2.5vw, 14px);
    color: #a080c0;
    text-align: center;
    margin: 0;
    font-style: italic;
    opacity: 0.9;
    width: 100%;
}

/* Location modal footer - stack vertically */
#location-modal .stash-footer {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}


/* ============================================================
   HOW TO PLAY MODAL
   ============================================================ */

#howtoplay-modal.visible {
    align-items: flex-start !important;
    padding-top: var(--modal-top-offset, clamp(30px, 5vh, 80px)) !important;
    padding-bottom: var(--modal-bottom-offset, clamp(40px, 8vh, 100px)) !important;
    z-index: 7000;
}

.howtoplay-panel {
    max-height: var(--modal-available-height, 75vh) !important;
    display: flex;
    flex-direction: column;
}

.howtoplay-content {
    padding: 0 !important;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Layout: nav on left, content on right (or stacked on mobile) */
.htp-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Navigation bar - 2 columns grid */
.htp-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 2px solid rgba(150, 100, 200, 0.3);
    max-height: 130px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
}

.htp-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px;
    background: rgba(60, 40, 80, 0.6);
    border: 2px solid rgba(100, 80, 140, 0.4);
    border-radius: 8px;
    color: #aaa;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.htp-nav-btn:hover {
    background: rgba(80, 60, 100, 0.8);
    border-color: rgba(150, 120, 200, 0.5);
    color: #ddd;
}

.htp-nav-btn.active {
    background: linear-gradient(180deg, #6644aa 0%, #442266 100%);
    border-color: #8866cc;
    color: #fff;
}

.htp-nav-icon {
    font-size: clamp(14px, 3.5vw, 18px);
}

.htp-nav-text {
    font-size: clamp(10px, 2.5vw, 12px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Main content area - MUST be scrollable */
.htp-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: var(--spacing-md);
    /* Ensure it takes remaining space and scrolls */
    max-height: calc(100% - 130px);
}

/* Section styling */
.htp-section {
    padding: var(--spacing-sm);
}

.htp-subsection {
    background: rgba(0, 0, 0, 0.2);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border-left: 3px solid rgba(150, 100, 200, 0.5);
}

/* Lists */
.htp-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.htp-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}

.htp-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ffcc00;
}

.htp-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Highlight box */
.htp-highlight-box {
    background: linear-gradient(135deg, rgba(255, 200, 0, 0.15) 0%, rgba(200, 150, 0, 0.1) 100%);
    border: 2px solid rgba(255, 200, 0, 0.4);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
}

/* Tip box */
.htp-tip-box {
    background: rgba(0, 200, 0, 0.1);
    border: 1px solid rgba(0, 200, 0, 0.3);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
}

/* Desktop: larger nav buttons */
@media (min-width: 768px) {
    .htp-nav {
        max-height: 160px;
    }
    
    .htp-nav-btn {
        padding: 10px 8px;
    }
    
    .htp-nav-text {
        font-size: 12px;
    }
    
    .htp-main {
        max-height: calc(100% - 160px);
    }
}

/* Large screens: side-by-side layout */
@media (min-width: 1024px) {
    .htp-layout {
        flex-direction: row;
    }
    
    .htp-nav {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        max-height: none;
        width: 200px;
        flex-shrink: 0;
        border-bottom: none;
        border-right: 2px solid rgba(150, 100, 200, 0.3);
        overflow-y: auto;
    }
    
    .htp-nav-btn {
        width: 100%;
        justify-content: flex-start;
    }
    
    .htp-main {
        flex: 1;
        max-height: 100%;
    }
}


/* ============================================================
   DISCOVERY MODAL - Promotional Gift Discoveries
   ============================================================ */

#discovery-modal {
    z-index: 4000; /* Above other modals */
}

.discovery-panel {
    background: linear-gradient(145deg, 
        rgba(60, 30, 70, 0.98) 0%, 
        rgba(40, 20, 50, 0.98) 50%,
        rgba(30, 15, 40, 0.98) 100%);
    border: 3px solid #c084fc;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    width: min(90vw, 380px);
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 
        0 0 40px rgba(192, 132, 252, 0.4),
        0 0 80px rgba(192, 132, 252, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

@keyframes discoveryPopIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.discovery-header {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.discovery-title {
    font-size: clamp(24px, 6vw, 32px);
    font-weight: bold;
    color: #ffd700;
    text-shadow: 
        0 0 10px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.4),
        2px 2px 4px rgba(0, 0, 0, 0.8);
    animation: discoveryGlow 1.5s ease-in-out infinite;
}

/* Discovery header section - title and subtitle above image */
.discovery-header-section {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.discovery-name-large {
    font-size: clamp(20px, 5vw, 26px);
    font-weight: bold;
    color: #ffd700;
    text-shadow: 
        0 0 10px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.4),
        2px 2px 4px rgba(0, 0, 0, 0.8);
    margin-bottom: var(--spacing-xs);
    animation: discoveryGlow 1.5s ease-in-out infinite;
}

.discovery-subtitle {
    font-size: clamp(13px, 3.2vw, 15px);
    color: #e0b0ff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    margin-bottom: var(--spacing-md);
}

/* Better vertical spacing in discovery modal */
.discovery-header-section {
    margin-bottom: var(--spacing-md);
}

.discovery-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.discovery-image-full {
    margin-bottom: var(--spacing-sm);
}

.discovery-reminder {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

@keyframes discoveryGlow {
    0%, 100% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.4), 2px 2px 4px rgba(0, 0, 0, 0.8); }
    50% { text-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 40px rgba(255, 215, 0, 0.6), 2px 2px 4px rgba(0, 0, 0, 0.8); }
}

.discovery-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.discovery-image-container {
    width: 160px;
    height: 160px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 3px solid #c084fc;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(192, 132, 252, 0.3);
    background: rgba(30, 15, 40, 0.6);
}

.discovery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.discovery-name {
    font-size: clamp(16px, 4vw, 20px);
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.discovery-description {
    font-size: clamp(14px, 3.5vw, 16px);
    color: #e0b0ff;
    text-align: center;
    line-height: 1.4;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.discovery-reminder {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(80, 40, 100, 0.5);
    border: 1px solid rgba(192, 132, 252, 0.4);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-sm);
}

.discovery-stash-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(192, 132, 252, 0.5));
}

.discovery-reminder span {
    font-size: clamp(11px, 2.8vw, 13px);
    color: #d4b0ff;
    line-height: 1.4;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.discovery-reminder strong {
    color: #ffd700;
}

.discovery-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    margin-bottom: 0;
    padding-bottom: 0;
    width: 100%;
    position: relative;
    z-index: 10; /* Ensure buttons are clickable */
}

.discovery-footer button {
    cursor: pointer;
    pointer-events: auto;
}

/* Full-width image for discovery modal */
.discovery-image-full {
    width: 100%;
    max-width: 280px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 3px solid #ffd700;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(255, 215, 0, 0.3);
    background: rgba(30, 15, 40, 0.6);
}

.discovery-image-full img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Full-width claim gift button */
.discovery-claim-btn-full {
    width: 100%;
    max-width: 280px;
    font-size: clamp(18px, 4.5vw, 22px);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    border: 3px solid #34d399;
    border-radius: var(--radius-lg);
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: 
        0 4px 0 #047857,
        0 6px 20px rgba(16, 185, 129, 0.4);
    transition: transform 0.1s, box-shadow 0.1s;
    animation: claimPulse 2s ease-in-out infinite;
}

.discovery-claim-btn-full:hover {
    background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 6px 0 #047857,
        0 8px 25px rgba(16, 185, 129, 0.6);
}

.discovery-claim-btn-full:active {
    transform: translateY(3px) scale(0.98);
    box-shadow: 
        0 1px 0 #047857,
        0 2px 10px rgba(16, 185, 129, 0.2);
    background: linear-gradient(180deg, #059669 0%, #047857 100%);
}

/* Maybe Later button - larger for easy tapping */
.discovery-later-btn {
    font-size: clamp(16px, 4vw, 18px);
    padding: var(--spacing-md) var(--spacing-xl);
    background: rgba(80, 60, 100, 0.6);
    border: 2px solid rgba(180, 150, 200, 0.5);
    border-radius: var(--radius-lg);
    color: #ccbbdd;
    font-weight: 500;
    text-transform: none;
    min-width: 160px;
    min-height: 48px; /* Easy touch target */
    cursor: pointer;
    transition: all 0.2s;
}

.discovery-later-btn:hover {
    background: rgba(100, 80, 120, 0.7);
    border-color: rgba(200, 180, 220, 0.7);
    color: #ffffff;
}

.discovery-later-btn:active {
    transform: scale(0.95);
    background: rgba(60, 40, 80, 0.8);
    border-color: rgba(150, 130, 170, 0.8);
}

.discovery-claim-btn {
    font-size: clamp(16px, 4vw, 18px);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    border: 2px solid #34d399;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: claimPulse 2s ease-in-out infinite;
}

@keyframes claimPulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 4px 25px rgba(16, 185, 129, 0.8), 0 0 40px rgba(16, 185, 129, 0.4); }
}

.discovery-claim-btn:hover {
    background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
    transform: scale(1.02);
}

.discovery-claim-btn:active {
    transform: scale(0.98);
}

/* ============================================================
   DISCOVERIES TAB - Gift Discovery Rows
   ============================================================ */

/* Gift discovery section styling */
.discovery-section-gift {
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
    border-color: rgba(52, 211, 153, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
}

.discovery-section-gift:hover {
    border-color: #34d399;
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.25) 0%, rgba(5, 150, 105, 0.15) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

/* Gift title at top - full width */
.discovery-gift-title {
    font-size: clamp(14px, 3.5vw, 18px);
    font-weight: bold;
    text-align: center;
    margin-bottom: var(--spacing-sm);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* Gift title color */
.text-gift {
    color: #34d399 !important;
}

/* Row with image (50%) and text (50%) */
.discovery-gift-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

/* Image column - 50% width */
.discovery-gift-image-col {
    flex: 0 0 45%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Gift image - large */
.discovery-gift-img {
    width: 100%;
    max-width: 120px;
    height: auto;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    object-fit: cover;
    border: 3px solid rgba(52, 211, 153, 0.6);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

/* Text column - 50% width */
.discovery-gift-text-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-sm);
}

/* Button inside text column for gifts */
.discovery-gift-text-col .discovery-claim-btn-large {
    margin-top: var(--spacing-xs);
}

/* Large claim button */
.discovery-claim-btn-large {
    font-size: clamp(14px, 3.5vw, 18px);
    padding: 12px 40px;
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    border: 3px solid #34d399;
    border-radius: var(--radius-lg);
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    width: 100%;
    max-width: 250px;
}

.discovery-claim-btn-large:hover {
    background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
}

.discovery-claim-btn-large:active {
    transform: scale(0.98);
}

/* ============================================================
   SPECIMEN UNLOCK CELEBRATION (Level 100 Reward)
   ============================================================ */

.specimen-unlock-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.specimen-unlock-overlay.visible {
    opacity: 1;
}

.specimen-unlock-modal {
    position: relative;
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
    border: 3px solid #ffd700;
    border-radius: 20px;
    padding: clamp(20px, 4vw, 40px);
    max-width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    text-align: center;
    box-shadow: 
        0 0 50px rgba(255, 215, 0, 0.5),
        0 0 100px rgba(255, 215, 0, 0.3),
        inset 0 0 30px rgba(255, 215, 0, 0.1);
    animation: specimenModalPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes specimenModalPop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.specimen-unlock-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 50%);
    pointer-events: none;
    animation: specimenGlow 3s ease-in-out infinite;
}

@keyframes specimenGlow {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.specimen-unlock-title {
    font-family: 'MedievalSharp', Georgia, serif;
    font-size: clamp(22px, 5vw, 36px);
    font-weight: bold;
    color: #ffd700;
    text-shadow: 
        0 0 10px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.5),
        2px 2px 4px rgba(0, 0, 0, 0.8);
    margin-bottom: 8px;
    animation: titleShimmer 2s ease-in-out infinite;
}

@keyframes titleShimmer {
    0%, 100% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.5), 2px 2px 4px rgba(0, 0, 0, 0.8); }
    50% { text-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 40px rgba(255, 215, 0, 0.8), 2px 2px 4px rgba(0, 0, 0, 0.8); }
}

.specimen-unlock-subtitle {
    font-size: clamp(14px, 3vw, 18px);
    color: #88c8ff;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.specimen-unlock-image-container {
    position: relative;
    width: clamp(120px, 30vw, 200px);
    height: clamp(120px, 30vw, 200px);
    margin: 0 auto 15px;
    border-radius: 50%;
    border: 4px solid #ffd700;
    overflow: hidden;
    box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.6),
        inset 0 0 20px rgba(255, 215, 0, 0.3);
    animation: specimenImageGlow 2s ease-in-out infinite;
}

@keyframes specimenImageGlow {
    0%, 100% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), inset 0 0 20px rgba(255, 215, 0, 0.3); }
    50% { box-shadow: 0 0 50px rgba(255, 215, 0, 0.9), inset 0 0 30px rgba(255, 215, 0, 0.5); }
}

.specimen-unlock-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.specimen-unlock-name {
    font-family: 'MedievalSharp', Georgia, serif;
    font-size: clamp(24px, 5vw, 32px);
    font-weight: bold;
    color: #fff;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.specimen-unlock-power {
    font-size: clamp(14px, 3vw, 18px);
    color: #7fff7f;
    font-weight: bold;
    margin-bottom: 15px;
    padding: 8px 16px;
    background: rgba(127, 255, 127, 0.15);
    border-radius: 8px;
    display: inline-block;
}

.specimen-unlock-desc {
    font-size: clamp(12px, 2.5vw, 14px);
    color: #aaa;
    line-height: 1.5;
    margin-bottom: 20px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.specimen-unlock-continue-btn {
    background: linear-gradient(180deg, #ffd700 0%, #cc9900 100%);
    color: #000;
    font-family: 'MedievalSharp', Georgia, serif;
    font-size: clamp(16px, 3.5vw, 22px);
    font-weight: bold;
    padding: clamp(12px, 2.5vw, 18px) clamp(30px, 6vw, 60px);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    transition: all 0.2s ease;
}

.specimen-unlock-continue-btn:hover {
    background: linear-gradient(180deg, #ffe44d 0%, #e6b800 100%);
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.6);
}

.specimen-unlock-continue-btn:active {
    transform: scale(0.98);
}

/* Specimen unlock info in collection cards */
.specimen-unlock-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
}

.specimen-region-badge {
    font-size: clamp(10px, 2vw, 12px);
    color: #88c8ff;
    background: rgba(136, 200, 255, 0.15);
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

.specimen-unlock-hint {
    font-size: clamp(9px, 1.8vw, 11px);
    color: #7fff7f;
    font-style: italic;
}

/* Specimen detail view region info */
.specimen-detail-region-info {
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    text-align: center;
}

.specimen-detail-region-badge {
    font-size: clamp(14px, 3vw, 18px);
    color: #88c8ff;
    font-weight: bold;
    margin-bottom: 8px;
}

.specimen-detail-unlock-text {
    font-size: clamp(12px, 2.5vw, 14px);
    color: #7fff7f;
    margin-bottom: 8px;
    line-height: 1.4;
}

.specimen-detail-or-text {
    font-size: clamp(11px, 2vw, 13px);
    color: #666;
    margin-bottom: 6px;
}

.specimen-detail-buy-text {
    font-size: clamp(12px, 2.5vw, 14px);
    color: #fff;
}

/* ============================================================
   ATTENTION EFFECTS (Buy Gold button, Rare tab)
   Particle container styles - particles created via JavaScript
   ============================================================ */

/* Particle container - fixed position overlay */
.particle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* Individual particle */
.attention-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
}

/* ===== BUY GOLD BUTTON - Pulsing halo effect ===== */
#gold-info-buy-gold-btn {
    position: relative;
    animation: buyGoldPulse 2s ease-in-out infinite;
}

@keyframes buyGoldPulse {
    0%, 100% {
        box-shadow: 
            0 4px 15px rgba(0, 0, 0, 0.3),
            0 0 10px rgba(255, 200, 50, 0.4),
            0 0 20px rgba(255, 180, 0, 0.2);
    }
    50% {
        box-shadow: 
            0 4px 15px rgba(0, 0, 0, 0.3),
            0 0 20px rgba(255, 215, 0, 0.7),
            0 0 35px rgba(255, 180, 0, 0.4),
            0 0 50px rgba(255, 150, 0, 0.2);
    }
}

/* Stash Buy Gold button also gets the pulse */
#stash-buy-gold-btn {
    animation: buyGoldPulse 2s ease-in-out infinite;
}

/* ============================================================
   NOTES
   ============================================================
   
   Z-INDEX HIERARCHY:
   - Modal overlay: 2000
   - Active modals: 3000
   - Not Enough Gold: 3500
   - Discovery modal: 4000
   - Footer icons: 5000 (always visible during modals)
   
   FOOTER OVERLAP PREVENTION:
   1. .modal-overlay has padding-bottom: var(--safe-area-bottom)
   2. .stash-panel uses max-height: var(--modal-max-height)
   3. responsive.css overrides these values per breakpoint
   4. Modals expand to fit content up to max-height limit
   
   SCROLL BEHAVIOR:
   - Only .stash-grid-container scrolls
   - Header and footer stay fixed
   - Smooth momentum scrolling on iOS
   
   ============================================================ */

/* Specimen activation flash animation */
@keyframes activationFlash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}