@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: -15px;

    }

    #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: 220px !important;    /* Bigger */

        height: 220px !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 - COMPACT MODE */

    #duck-popup-menu {

        padding: 10px;

    }

   

    /* Shrink the name input */

    #duck-name-input {

        width: 90%;

        font-size: 12px;

        padding: 6px;

        margin-bottom: 5px;

    }



    #popup-content-wrapper {

        flex-direction: column;

        align-items: center;

        gap: 5px;

    }

   

    #enlarged-duck-area { width: 100%; }

   

    /* Reduce Duck Image Size (Was 180px) */

    #enlarged-duck-display {

        width: 130px;

        height: 130px;

        margin: 0 auto;

    }

   

    #popup-info-area { width: 100%; padding: 0; }

   

    /* Reduce Stats Box Height (Was 250px) */

    #popup-stats-view,

    #popup-fashion-view {

        height: 120px !important; /* Force shorter height */

        padding: 8px !important;

    }

   

    /* Reorganize Buttons into a Grid */

    .popup-actions {

        display: grid;

        grid-template-columns: 1fr 1fr; /* 2 columns */

        gap: 8px;

        width: 100%;

        margin-top: 10px;

    }

   

    /* Standard Buttons (Load, Appoint, Share, Delete) */

    .popup-actions > button {

        width: 100%;

        padding: 10px 2px;

        font-size: 10px;

        height: auto;

    }



    /* --- SPECIFIC BUTTON ORDERING --- */

    /* Row 1 */

    #load-duck-btn { order: 1; }

    #appoint-duck-btn { order: 2; }



    /* Row 2: Share and Delete side-by-side */

    #share-duck-btn { order: 3; }

    #delete-duck-btn { order: 4; }



    /* Row 3: Sell Section - Span full width at bottom */

    .sell-control-popup {

        order: 5; /* Force to bottom */

        grid-column: 1 / -1; /* Span across both columns */

        display: flex;

        flex-direction: row; /* Button left, Text right */

        align-items: center;

        justify-content: center;

        gap: 15px;

        background-color: rgba(0,0,0,0.2); /* Slight background to separate */

        padding: 5px;

        border-radius: 4px;

        margin-top: 5px;

    }

   

    #sell-duck-btn-popup {

        width: auto;

        min-width: 100px;

        font-size: 12px; /* Keep sell button readable */

        padding: 8px 15px;

    }

   

    #sell-charge-display-popup {

        margin-top: 0 !important; /* Remove vertical spacing */

        font-size: 10px;

    }



  /* 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; }

}





/* --- HEAD DUCK TUTORIAL POPUP COMPACT MODE --- */

    #head-duck-welcome-menu {

        padding: 10px !important; /* Reduce outer padding */

    }



    /* Shrink the inner container */

    #head-duck-welcome-menu .how-to-example {

        padding: 6px !important;

        margin: 5px 0 !important;

        gap: 8px !important;

        border-width: 2px !important;

    }



    /* Shrink the Tutorial Duck Image (Was 200px!) */

    #head-duck-welcome-menu .how-to-duck-display {

        width: 80px !important;

        height: 80px !important;

        border-width: 2px !important;

        margin-bottom: 0 !important;

    }



    /* Adjust the text column */

    #head-duck-welcome-menu .how-to-example-right h3 {

        font-size: 10px !important;

        margin-top: 0 !important;

        margin-bottom: 2px !important;

        padding-bottom: 2px !important;

        border-bottom-width: 1px !important;

    }



    #head-duck-welcome-menu .how-to-example-right p {

        font-size: 8px !important;

        line-height: 1.3 !important;

        margin-bottom: 0 !important;

    }



    /* Reduce vertical spacing for the buttons */

    #head-duck-welcome-menu .popup-nav-buttons {

        margin-top: 5px !important;

        padding-top: 5px !important;

        border-top-width: 1px !important;

    }

   

    #head-duck-welcome-menu .popup-nav-buttons button {

        font-size: 9px !important;

        padding: 6px 12px !important;

    }