@media (max-width: 600px) {

    /* --- GLOBAL MOBILE FIX --- */
    body {
        overflow-x: hidden !important; /* Prevents horizontal scroll/zoom from marching ducks */
        width: 100%;
        box-sizing: border-box;
    }

    /* =========================================
       INDEX (MAIN GAME) TOP NAV
       ========================================= */
    .top-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 10px 5px 0 5px; /* Tighter padding */
    }

    /* Index Title */
    .top-nav h1 {
        order: 2;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        font-size: 16px; /* Smaller title */
        margin: 0 2px;
        white-space: nowrap;
    }

    /* Index Coins (Left) */
    .top-nav .nav-links-left {
        display: flex !important;
        order: 1;
        padding: 0;
        border: none;
        background: none;
    }
    .top-nav .nav-links-left #show-shop-btn {
        display: none !important; /* Hide desktop shop btn */
    }
    .top-nav .nav-links-left #coin-display {
        padding: 5px 4px;
        gap: 2px;
        font-size: 9px;
    }
    .top-nav .nav-links-left #coin-display img {
        width: 12px;
        height: 12px;
    }

    /* Index Settings (Right) */
    .top-nav .nav-links {
        display: flex !important;
        order: 3;
        gap: 5px;
    }
    .top-nav .nav-links a {
        display: none !important; /* Hide desktop nav links */
    }
    .top-nav .nav-links #settings-btn {
        display: block !important;
        width: 28px;
        height: 28px;
        padding: 0;
    }
    /* Index Row 2: Main Buttons */
    .mobile-nav-centered {
        display: flex !important;
        order: 4;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        justify-content: center;
        gap: 5px;
        margin-top: 5px;
        padding-bottom: 5px;
        flex-basis: 100%; /* Force it to take a full new line */
    }
    .mobile-nav-centered #coin-display {
        display: none !important;
    }
    .mobile-nav-centered .nav-button {
        font-size: 9px;
        padding: 8px 6px;
        flex: 1; /* Even width buttons */
        text-align: center;
    }
    /* Shop Button Fix */
    .mobile-nav-centered #show-shop-btn-mobile {
        background-color: #004070;
        color: #FFF;
        border-color: #87CEFA #104E8B #104E8B #87CEFA;
        font-size: 9px;
        padding: 8px 6px;
        flex: 1;
    }
    .mobile-nav-centered #show-shop-btn-mobile:active {
        border-color: #104E8B #87CEFA #87CEFA #104E8B;
    }

    /* =========================================
       MAIN GAMEPLAY AREA
       ========================================= */
    #my-duck-area {
        margin-top: 0;
        position: absolute;
        bottom: 35px; /* Above footer */
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        z-index: 500;
    }

    #my-duck-display {
        width: 240px;
        height: 240px;
    }
    #my-duck-display h2 {
        font-size: 14px;
        text-align: center;
        z-index: 1;
    }
    #duck-name-input-main {
        font-size: 14px;
        width: 90%;
        top: 10px;
    }

    #duck-controls {
        bottom: 0;
        gap: 8px;
        z-index: 900;
    }
    #duck-controls button {
        font-size: 9px;
        padding: 6px 8px;
    }
    #sell-charge-display {
        font-size: 8px;
        margin-top: -10px;
    }
    #save-to-pond-btn {
        font-size: 9px;
        padding: 6px 8px;
        bottom: auto;
        z-index: auto;
    }

    .base-duck-image, .accessory-image {
        width: 240px;
        left: 0;
        top: 0;
    }
    
    /* MOVED MARCHING DUCK/GAME AREA UP HERE TO KEEP STRUCTURE CLEAN */
    #game-area {
        top: 62vh !important;       /* Moved Lower */
        height: 250px !important;   /* Taller container */
    }
    .marching-duck {
        width: 250px !important;    /* Bigger */
        height: 250px !important;
    }

    /* =========================================
       GALLERY & POND COMMON STYLES
       ========================================= */
    
    /* Hide content description on mobile */
    #content-description { display: none; }

    /* Bottom Nav Bar - Unified & Fixed */
    .bottom-nav-mobile {
        display: flex !important; /* Force flex */
        justify-content: space-between; /* Push buttons to edges */
        align-items: center;
        gap: 5px; /* Small gap between buttons */
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 5px; /* Minimal padding */
        box-sizing: border-box;
        background-color: rgba(34, 34, 34, 0.95); /* Dark background */
        z-index: 2000;
        border-top: 2px solid #FFF;
    }

    /* Force links to look like buttons even if class is missing */
    .bottom-nav-mobile a, 
    .bottom-nav-mobile .nav-button {
        flex: 1; /* Grow to fill space */
        font-family: 'Press Start 2P', cursive;
        font-size: 9px;
        padding: 10px 5px;
        text-align: center;
        white-space: nowrap;
        background-color: #555;
        color: #FFF;
        border: 3px outset #888;
        text-decoration: none;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px; /* Fixed height */
    }
    
    .bottom-nav-mobile a:active,
    .bottom-nav-mobile .nav-button:active {
        border-style: inset;
        border-color: #333 #888 #888 #333;
    }

    /* HIDE DUPLICATE COINS IN BOTTOM NAV */
    .bottom-nav-mobile #coin-display {
        display: none !important;
    }

    /* =========================================
       GALLERY OVERHAUL
       ========================================= */
    
    /* Target the top-nav ONLY when it contains gallery tabs */
    .gallery-tabs {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
        order: 2; /* Place after coins */
        flex: 1; /* Take up remaining space */
    }

    /* Gallery Top Nav Container layout */
    body .top-nav:has(.gallery-tabs) { 
        padding: 5px;
        background-color: #111;
        gap: 5px;
        flex-wrap: nowrap; /* Force single line */
    }

    /* Coins in Gallery Top Nav */
    body .top-nav:has(.gallery-tabs) .nav-links {
        display: flex !important;
        order: 1; /* First */
        padding: 0;
        margin: 0;
        flex: 0 0 auto; /* Don't grow */
    }
    
    /* Hide the "Back" and "Pond" links in TOP nav (moved to bottom) */
    body .top-nav:has(.gallery-tabs) .nav-links a {
        display: none !important;
    }

    /* Style the coin display in Top Nav */
    body .top-nav:has(.gallery-tabs) #coin-display {
        padding: 5px;
        font-size: 8px;
        border-width: 2px;
    }
    body .top-nav:has(.gallery-tabs) #coin-display img {
        width: 12px;
        height: 12px;
    }

    /* Gallery Tabs Buttons */
    .gallery-tabs .tab-button {
        font-size: 8px; /* Small font */
        padding: 6px 4px; /* Tight padding */
        margin: 0 2px;
        border-width: 2px;
        flex: 1; /* Distribute evenly */
        text-align: center;
    }

    /* Gallery Content Scaling */
    #gallery-container, #sets-container, #achievements-gallery-container {
        padding: 10px;
        padding-bottom: 60px; /* Space for bottom nav */
    }
    
    #gallery-container h1, #sets-container h1, #achievements-gallery-container h1 {
        font-size: 16px;
        margin-top: 5px;
    }

    /* Shrink Items */
    .accessory-grid {
        gap: 5px;
    }
    .accessory-item {
        width: 80px; /* Half size */
    }
    .accessory-image-wrapper {
        width: 80px;
        height: 80px;
        border-width: 2px;
    }
    .accessory-name {
        font-size: 8px;
        height: auto;
        margin-top: 2px;
    }

    /* Shrink Sets */
    .set-card {
        width: 95%;
        padding: 10px;
        border-width: 2px;
    }
    .set-card h3 { font-size: 12px; }
    .set-card ul { font-size: 10px; }

    /* Shrink Achievements */
    .ach-gallery-card {
        width: 46%; /* 2 per row */
        height: auto;
        min-height: 150px;
        padding: 5px;
    }
    .ach-gallery-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
        line-height: 30px;
    }
    .ach-gallery-card h5 { font-size: 10px; height: auto; }
    .ach-gallery-card p { font-size: 8px; display: none; }
    .ach-gallery-progress { font-size: 9px; height: auto; min-height: 20px; }

/* --- GALLERY SHRINK FIX --- */
    
    .category-title {
        font-size: 12px;
        padding: 5px;
        margin-bottom: 10px;
    }

    .accessory-grid {
        gap: 5px;
    }

    .accessory-item {
        width: 80px;
    }

    .accessory-image-wrapper {
        width: 80px;
        height: 80px;
        border-width: 2px;
    }

    .accessory-name {
        font-size: 8px;
        height: 16px;
        overflow: hidden;
        margin-top: 2px;
    }


   /* =========================================
       POND OVERHAUL (MATCHING GALLERY STYLE)
       ========================================= */

    /* 1. The Container (Pond Context) */
    body .top-nav:has(.nav-left-cluster) {
        display: flex;
        flex-wrap: nowrap; /* CRITICAL: Force single line */
        padding: 5px;
        gap: 5px;
        background-color: #111;
        align-items: center;
    }

    /* 2. The Coin Group (Nav Links) - LEFT */
    body .top-nav:has(.nav-left-cluster) .nav-links {
        order: 1;          /* Force to Left */
        flex: 0 0 auto;    /* Don't grow */
        display: flex !important;
        margin: 0;
        padding: 0;
    }

    /* Hide extra links (Back/Gallery) in the top bar */
    body .top-nav:has(.nav-left-cluster) .nav-links a {
        display: none !important;
    }

    /* Style the Coin Display to match Gallery */
    body .top-nav:has(.nav-left-cluster) #coin-display {
        padding: 5px;
        font-size: 8px;
        border-width: 2px;
    }
    body .top-nav:has(.nav-left-cluster) #coin-display img {
        width: 12px;
        height: 12px;
    }

    /* 3. The Tabs Group (.nav-left-cluster) - RIGHT */
    .nav-left-cluster {
        order: 2;          /* Force to Right */
        flex: 1;           /* Grow to fill space */
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    /* Hide the big Title */
    #pond-main-title {
        display: none !important;
    }

    /* Tabs Wrapper */
    .pond-tabs {
        display: flex;
        width: 100%;
        justify-content: center;
        gap: 0;
    }

    /* Tab Buttons (Exact Match to Gallery) */
    .pond-tabs .tab-button {
        flex: 1;
        font-size: 8px;
        padding: 6px 4px;
        margin: 0 2px;
        border-width: 2px;
        text-align: center;
    }

    /* 4. Pond Content Scaling */
    #pond-container {
        padding: 5px;
        padding-bottom: 60px;
    }

    #pond-controls {
        display: none;
    }

    #pond-duck-grid {
        gap: 10px;
    }

    .pond-duck-container {
        width: 100px;
    }

    .saved-duck-wrapper {
        width: 100px;
        height: 100px;
    }

    .duck-name-tag {
        font-size: 8px;
        margin-top: -20px;
    }

    /* Head Duck Tab Scaling */
    #head-duck-container {
        padding: 10px;
        padding-bottom: 60px;
    }
    #head-duck-display {
        gap: 15px;
    }
    #head-duck-image-wrapper {
        width: 150px;
        height: 150px;
        margin: 0 auto;
    }
    #head-duck-left, #head-duck-right {
        width: 100%;
        min-width: 0;
    }
    #head-duck-stats-wrapper {
        height: auto;
        max-height: 200px;
    }

    /* =========================================
       POPUPS & MENUS (UNIVERSAL FIX)
       ========================================= */
    
    /* Cookie Banner Fix */
    #cookie-consent-banner {
        width: 95%;
        left: 2.5%;
        bottom: 10px;
        max-width: none;
        border: 4px double #FFF;
        border-radius: 0;
        flex-direction: column;
        padding: 15px;
    }
    #cookie-consent-banner p { margin: 0 0 10px 0; }


    /* --- UNIVERSAL POPUP FIX (Mobile Only) --- */
    #settings-menu,
    #shop-menu,
    #pack-result-menu,
    #welcome-menu,
    #pond-welcome-menu,
    #gallery-welcome-menu,
    #notice-menu,
    #achievements-menu,
    #import-menu,
    #duck-popup-menu,
    #share-image-menu,
    #head-duck-welcome-menu,
    .bounty-board-wrapper {  /* <--- ADDED BOUNTY BOARD WRAPPER HERE */
        position: fixed !important;
        
        /* 1. Pin to Top-Left of the physical screen */
        top: 10px !important;
        left: 10px !important;
        
        /* 2. Use exact JS calculated width (Screen width - 20px margin) */
        width: calc(var(--mobile-vw, 100vw) - 20px) !important;
        
        /* 3. Use exact JS calculated height for safety */
        max-height: calc(var(--mobile-vh, 100vh) - 20px) !important;
        
        /* 4. Reset other positioning */
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        max-width: none !important;
        margin: 0 !important;
        
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    /* Adjust inner content of popups for small screens */
    #result-image-wrapper { width: 150px; height: 150px; }
    .shop-card { width: 100%; }
    .shop-tabs { grid-template-columns: 1fr 1fr 1fr; }
    
    /* Duck Popup (Pond) Specifics */
    #duck-popup-menu { padding: 10px; }
    #popup-content-wrapper { flex-direction: column; align-items: center; }
    #enlarged-duck-area { width: 100%; }
    #enlarged-duck-display { width: 180px; height: 180px; margin: 0 auto; }
    #popup-info-area { width: 100%; padding: 0; }
    .popup-actions { gap: 5px; }
    .popup-actions button { flex: 1; padding: 8px 4px; font-size: 8px; }

  /* Share Popup */
    #share-image-preview-wrapper { width: 200px; height: 200px; }
    
/* --- TOASTS & NOTIFICATIONS (Mobile Fix) --- */
    
    /* 1. Define Mobile Animation (Slide in from Left) */
    @keyframes mobile-toast-slide {
        0% {
            transform: translateX(-120%); /* Start off-screen left */
            opacity: 0;
        }
        100% {
            transform: translateX(0); /* Land in place */
            opacity: 1;
        }
    }

    /* 2. Apply Position, Sizing & Animation */
    #achievement-toast, 
    #set-complete-toast,
    #share-toast,
    .toast { 
        /* Positioning */
        top: 55px !important; 
        left: 10px !important;
        bottom: auto !important;
        right: auto !important;
        
        /* Sizing */
        width: auto !important;
        max-width: 70% !important;
        padding: 8px 10px !important; 
        border-width: 2px !important; 
        border-radius: 0 !important;

        /* Animation */
        animation: mobile-toast-slide 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
        
        z-index: 3000 !important;
    }

    /* 3. CRITICAL FIX: Force hide when class is 'hidden' */
    #achievement-toast.hidden, 
    #set-complete-toast.hidden, 
    #share-toast.hidden,
    .toast.hidden {
        display: none !important;
        opacity: 0 !important;
        animation: none !important;
        pointer-events: none !important;
    }

    /* 4. Shrink Text Inside Toasts */
    #achievement-toast h3, 
    #set-complete-toast h3, 
    .toast h3 {
        font-size: 10px !important;
        margin: 0 0 4px 0 !important;
    }

    #achievement-toast p, 
    #set-complete-toast p, 
    .toast p {
        font-size: 8px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    /* 5. Shrink Icons Inside Toasts */
    #achievement-toast img, 
    .toast img,
    #set-complete-toast img {
        width: 20px !important;
        height: 20px !important;
        margin-right: 5px !important;
    }

/* --- FONT SIZE FIXES --- */
    
    /* 1. Welcome Popup Text */
    #welcome-menu h2, 
    #gallery-welcome-menu h2, 
    #pond-welcome-menu h2,
    #head-duck-welcome-menu h2 {
        font-size: 14px;
        margin-bottom: 10px;
    }

    #welcome-menu p, 
    #gallery-welcome-menu p, 
    #pond-welcome-menu p,
    #head-duck-welcome-menu p {
        font-size: 10px;
        line-height: 1.5;
    }

    /* 2. "No Head Duck" Message */
    #head-duck-none {
        font-size: 10px;
        padding: 10px;
        max-width: 90%;
    }

    /* --- SHOP MENU FIXES (INSIDE MEDIA QUERY) --- */
    #shop-menu {
        width: 95%;
        height: 80vh;
        padding: 15px;
        display: flex;
        flex-direction: column;
    }

    .shop-tabs {
        flex-shrink: 0;
        gap: 5px;
    }

    .shop-tab-button {
        font-size: 8px;
        padding: 6px 2px;
        white-space: nowrap;
        flex: 1;
        text-align: center;
    }

    #shop-menu.packs-tab-active {
        height: 80vh;
        max-height: 85vh;
    }

    #how-to-play-section, #about-section, #credits-section, #contact-section, #reset-section, #privacy-terms-section {
        font-size: 10px;
        line-height: 1.5;
    }


/* --- BOUNTY BOARD MOBILE FIXES --- */
/* Note: Most critical fix is handled by universal popup selector above (.bounty-board-wrapper) */
#bounty-overlay .bounty-board-wrapper {
    /* Styles here might be overridden by !important universal fix, which is intended */
    width: 95%; 
    max-height: 85vh; 
    overflow-y: auto; 
    padding: 10px;
}

/* Make posters sit in a grid instead of a messy pile */
#bounty-items-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px !important;
}

.bounty-poster {
    width: 130px !important; /* Small enough to fit 2 per row */
    padding: 8px;
    transform: none !important; /* CRITICAL: Remove rotation */
    margin: 5px !important;
}

/* Remove hover scale effect on mobile to prevent glitches */
.bounty-poster:hover {
    transform: none !important;
    z-index: 1;
}

/* Shrink the poster content to fit the smaller card */
.poster-header {
    font-size: 10px;
    margin-bottom: 5px;
    border-bottom-width: 2px;
}

.poster-image-wrapper {
    width: 80px;
    height: 80px;
    margin-bottom: 5px;
    border-width: 2px;
}

.poster-info div:first-child {
    font-size: 9px !important;
}

.poster-reward {
    font-size: 10px;
    padding: 2px;
}

/* Fix Timer and Subtitle size */
.bounty-subtitle, #bounty-timer {
    font-size: 10px;
    margin: 5px 0 15px 0;
}

/* --- NAV CLUTTER CONTROL --- */
.mobile-nav-centered {
    gap: 5px;
    width: 100%;
    justify-content: space-around;
}

.mobile-nav-centered .nav-button, 
.mobile-nav-centered #coin-display {
    font-size: 9px;
    padding: 8px 6px;
    flex: 1 1 auto;
    min-width: auto;
}

/* 1. HIDE the Desktop Bounty Button on Mobile */
#show-bounty-btn {
    display: none !important;
}

/* 2. SHOW the Mobile Bounty Button */
    #show-bounty-btn-mobile {
        display: inline-block !important;
        background-color: #555; /* Standard Gray */
        color: #FFF;
        border-color: #888 #333 #333 #888; /* Standard 3D Border */
    }
    
    #show-bounty-btn-mobile:active {
        border-style: inset;
        border-color: #333 #888 #888 #333;
    }
    
} /* <--- THIS CLOSING BRACE ENDS THE MOBILE QUERY */

/* Footer Text Size Override for Mobile */
@media (max-width: 600px) {
    .site-footer { display: none !important; }
}