/* --- STYLES INHERITED FROM STYLE.CSS --- */
/* - @import url('...Press+Start+2P...') */
/* - html, body */
/* - img */
/* - h1, h2 */
/* - button, .nav-button */
/* - #coin-display */
/* - .hidden */
/* - #cookie-consent-banner */
/* --------------------------------------- */

body {
    font-family: 'Press Start 2P', cursive;
    color: #FFF;
    background-image: url('images/pondbackground.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

/* MODIFIED: Changed align-items to flex-start */
.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Aligns top of title with top of buttons */
    padding: 20px;
    padding-bottom: 30px; /* Added padding to push pond down */
}

/* NEW: Style for the left-side wrapper */
.nav-left-cluster {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px; /* Space between title and sort */
}

.nav-links {
    display: flex;
    gap: 15px;
}

/* --- NEW: STYLES FOR POND TABS --- */
.pond-tabs {
    display: flex;
    gap: 10px;
}

/* Inactive tabs: Lighter (#555) and popped out */
.tab-button {
    background-color: #555; 
    border-style: outset;
    border-color: #888 #333 #333 #888;
    position: relative; /* For the notification icon */
}

/* Active tab: Darker (#333) and pressed in */
.tab-button.active {
    background-color: #333; 
    border-style: inset;
    border-color: #333 #888 #888 #333;
}

/* Re-using the notification style from style.css */
/* This is for the "!" on the "Head Duck" tab */
#head-duck-notify-icon {
    position: absolute;
    top: -5px;
    right: -5px;
    color: #FF3333; /* Bright RED */
    text-shadow: 2px 2px #000;
    font-weight: bold;
    font-size: 20px;
    display: inline-block;
    animation: pulse-red 1.2s infinite;
    pointer-events: none; /* So it doesn't block clicks */
}

/* Keyframes for pulsing (copied from gallery.css) */
@keyframes pulse-red {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* --- END TAB STYLES --- */


/* MODIFIED: Sort controls are now inside the main container */
#pond-controls {
    width: 100%; /* Take full width */
    text-align: center; /* Center the content */
    padding: 0 0 30px 0; /* Space it out from the grid */
    font-size: 14px;
    text-shadow: 2px 2px #000;
    box-sizing: border-box; /* Include padding in width */
}

    #pond-controls label {
        margin-right: 5px;
    }

    /* FIX: Improved Select Styling */
    #pond-controls select {
        font-family: 'Press Start 2P', cursive;
        background-color: #555;
        color: #FFF;
        border-style: outset;
        border-width: 4px;
        border-color: #888 #333 #333 #888;
        padding: 5px;
        /* margin-right: 20px; (REMOVED) */
        cursor: pointer;
        -webkit-appearance: none; /* Remove default browser styling */
        -moz-appearance: none;
        appearance: none;
        padding-right: 25px; /* Ensure space for custom arrow if needed, but the core style is the border */
    }

/* This is the main container for the sort bar AND the grid */
#pond-container {
    display: flex;
    flex-wrap: wrap; /* Changed from flex to block */
    justify-content: center;
    padding: 20px;
}

/* This is the new grid that *just* holds the ducks */
#pond-duck-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* <-- THIS IS THE FIX */
    gap: 30px 40px;
    width: 100%;
}


.pond-duck-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
}

.duck-name-tag {
    /* Remove fixed height so it can grow */
    height: auto;
    min-height: 20px;
    
    /* Ensure text wraps instead of cutting off */
    white-space: normal;
    word-wrap: break-word;
    width: 100%;
    text-align: center;
    line-height: 1.2; /* Tighter line height for multi-line names */

    /* Positioning (Keeps it over the duck's feet) */
    margin-bottom: 0;
    margin-top: -40px; /* Pulls it up over the image */
    order: 2;
    position: relative;
    z-index: 10; /* Ensures it sits ON TOP of the duck image */
    
    /* Visuals */
    text-shadow: 2px 2px #000;
    pointer-events: none; /* Allows clicking the duck "through" the text */
}

.saved-duck-wrapper {
    width: 200px;
    height: 200px;
    position: relative;
    cursor: pointer;
    order: 1; /* Ensure duck image is above the name */
}

    .saved-duck-wrapper.is-flipped {
        transform: scaleX(-1);
    }

    .saved-duck-wrapper img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

/* --- POPUP STYLES --- */
#duck-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#duck-popup-menu {
    background-color: #444;
    padding: 20px;
    border: 4px double #FFF;
    position: relative;
    text-align: center;
    width: 700px;
    max-width: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Side-by-Side Wrapper */
#popup-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    margin-bottom: 20px;
}

/* === THIS BLOCK IS THE FIX === */
/* Duck Image Area */
#enlarged-duck-area {
    width: 250px; /* MODIFIED: Was 50% */
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0; /* NEW: Prevent it from shrinking */
}
/* === END FIX === */

#enlarged-duck-display {
    width: 370px;
    height: 370px;
    position: relative;
}

    #enlarged-duck-display.is-flipped {
        transform: scaleX(-1);
    }

    #enlarged-duck-display img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

/* === THIS BLOCK IS THE FIX === */
/* === MODIFIED: Renamed from #popup-stats-area === */
#popup-info-area {
    width: auto; /* MODIFIED: Was 50% */
    flex-grow: 1; /* NEW: Allow it to fill remaining space */
    text-align: left;
    padding-top: 10px;
    min-width: 250px; /* NEW: Ensure it doesn't get too squished */
}
/* === END FIX === */

#close-popup-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 0 8px;
    font-size: 20px;
}

#duck-name-input {
    font-family: 'Press Start 2P', cursive;
    background-color: #222;
    color: #FFF;
    border-style: inset;
    border-width: 4px;
    border-color: #333 #888 #888 #333;
    padding: 8px;
    width: 80%;
    text-align: center;
    margin-bottom: 15px;
}

/* === NEW: POPUP TAB STYLES === */
.popup-tab-buttons {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}

.popup-tab-btn {
    font-family: 'Press Start 2P', cursive;
    background-color: #333; /* Inactive color */
    color: #FFF;
    border-style: outset;
    border-width: 4px;
    border-color: #555 #222 #222 #555;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    flex-grow: 1; /* Make tabs fill the space */
}

    .popup-tab-btn.active {
        background-color: #555; /* Active color */
        border-color: #888 #333 #333 #888;
    }

/* New Tab Content View Styles */
#popup-stats-view,
#popup-fashion-view {
    /* Re-using styles from head-duck-stats-wrapper */
    background-color: rgba(0,0,0,0.3);
    border: 4px inset #333;
    padding: 15px;
    /* Adjusted height to fit tabs */
    height: 250px;
    overflow-y: auto;
}
/* === END NEW TAB STYLES === */


/* Style for the rating text */
#fashion-rating-text {
    height: 20px;
    margin-bottom: 15px;
    font-size: 16px;
    text-shadow: 2px 2px #000;
}

/* Detailed Stats Styling */
#detailed-stats-container {
    text-align: left;
    width: 100%;
    /* max-height is now controlled by parent */
    overflow-y: auto;
    padding: 5px 0;
    margin-bottom: 15px;
    border-top: 1px dashed #777;
    border-bottom: 1px dashed #777;
}

    #detailed-stats-container div {
        font-size: 12px;
        line-height: 1.5;
        white-space: nowrap;
    }


/* --- MODIFIED: Adjusted for 4 buttons --- */
.popup-actions {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping */
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
    width: 90%;
}

/* --- NEW: Style for Share Button --- */
#share-duck-btn {
    background-color: #1E90FF; /* Blue */
    border-color: #87CEFA #104E8B #104E8B #87CEFA;
}

    #share-duck-btn:active {
        border-color: #104E8B #87CEFA #87CEFA #104E8B;
    }

/* --- NEW: Style for Popup Sell Button --- */
#sell-duck-btn-popup {
    background-color: #008000; /* Green */
    border-color: #00CC00 #004D00 #004D00 #00CC00;
}

    #sell-duck-btn-popup:active {
        border-color: #004D00 #00CC00 #CC0000 #004D00;
    }
/* --- END: Popup Button Styles --- */

/* === NEW: Wrapper for Sell Button + Value === */
.sell-control-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#sell-charge-display-popup {
    font-size: 12px;
    color: #FFF; /* MODIFIED: Was grey */
    text-shadow: 2px 2px #000;
    margin-top: 5px; /* Space from button */
    height: 12px;
}


/* NEW: Mobile Bottom Nav Styling */
.bottom-nav-mobile {
    display: none; /* Hide by default on desktop */
}

/* --- MOBILE STYLES (Pond) --- */
/* --- @media (max-width: 600px), body.mobile-view block removed --- */
/* --- END MOBILE STYLES --- */


/* --- NEW: STYLES FOR POND WELCOME POPUP --- */
#pond-welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Ensure popups are highest */
}

#pond-welcome-menu {
    background-color: #444;
    padding: 30px;
    border: 4px double #FFF;
    width: 90%;
    max-width: 600px;
    text-align: center;
}

    #pond-welcome-menu h3 {
        text-shadow: 3px 3px #000;
        margin-top: 0;
    }

    #pond-welcome-menu p {
        font-size: 14px;
        line-height: 1.6;
        margin: 15px 0;
    }

#close-pond-welcome-btn {
    margin-top: 20px;
}
/* --- END: STYLES FOR POND WELCOME POPUP --- */

/* --- NEW: Styles for Set Bonus in Pond Popup --- */
.set-bonus-header {
    font-size: 10px;
    color: #FFF; /* MODIFIED: Was grey */
    text-align: center;
    margin-top: 10px;
    border-top: 1px dashed #777;
    padding-top: 10px;
}

.set-bonus-line {
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    color: #ffd700; /* Gold */
}

/* Make the coin icon smaller to fit */
.set-bonus-coin-pond {
    width: 12px;
    height: 12px;
    vertical-align: middle;
    margin-left: 2px;
    margin-bottom: 2px;
}

/* --- NEW: STICKY FOOTER FIX --- */

/* * This makes the body fill the whole screen 
 * and arrange content in a top-to-bottom column.
 * (min-height and box-sizing are inherited from style.css)
*/
body {
    display: flex;
    flex-direction: column;
}

/* * This makes the main pond container 
 * grow to fill all available empty space,
 * pushing the footer down.
*/
#pond-container, #head-duck-container {
    flex-grow: 1;
}

/* * This adds the same sticky footer fix for
 * mobile view, as it uses a separate body class.
*/
@media (max-width: 600px), body.mobile-view {
    body {
        min-height: 100vh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }
}

/* --- NEW: SHARE IMAGE POPUP STYLES --- */
#share-image-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2500; /* Higher than other popups */
}

#share-image-menu {
    background-color: #444;
    padding: 30px;
    border: 4px double #FFF;
    width: 90%;
    max-width: 400px; /* Sized for the image */
    text-align: center;
    position: relative;
}

    #share-image-menu h3 {
        text-shadow: 3px 3px #000;
        margin-top: 0;
    }

    #share-image-menu p {
        font-size: 12px;
        line-height: 1.6;
        margin: 15px 0 20px 0;
        color: #FFF; /* MODIFIED: Was grey */
    }

#close-share-image-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 0 8px;
    font-size: 20px;
}

#share-image-preview-wrapper {
    width: 300px;
    height: 300px;
    margin: 0 auto 20px;
    background-color: #222;
    border: 4px inset #333;
}

#share-image-preview {
    width: 100%;
    height: 100%;
}

#share-image-download-btn {
    background-color: #008000; /* Green */
    border-color: #00CC00 #004D00 #004D00 #00CC00;
    width: 80%;
    box-sizing: border-box; /* Ensure padding doesn't break width */
}
/* --- END: SHARE IMAGE POPUP STYLES --- */

/* --- NEW: HEAD DUCK CONTAINER STYLES --- */
#head-duck-container {
    padding: 20px;
    text-align: center;
}

    #head-duck-container h2 {
        text-align: center;
        border-bottom: 2px solid #FFF;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

#head-duck-none {
    font-size: 14px;
    color: #FFF; /* MODIFIED: Was grey */
    line-height: 1.6;
}

#head-duck-display {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on mobile */
    justify-content: center;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

#head-duck-left {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* For the input overlay */
}

    #head-duck-left h3 {
        text-shadow: 2px 2px #000;
        height: 2.5em; /* Reserve space for name */
        margin-bottom: 10px;
        font-size: 1.5em; /* Match main page H2 */
        cursor: pointer;
        user-select: none;
    }

/* NEW: Style for the head duck rename input */
#head-duck-name-input {
    /* Copy styles from h3 */
    font-family: 'Press Start 2P', cursive;
    text-shadow: 2px 2px #000;
    letter-spacing: 2px;
    font-size: 1.5em;
    height: 2.5em;
    margin-bottom: 10px;
    /* Input-specific styles */
    background-color: transparent;
    border: none;
    outline: none;
    color: #FFF;
    text-align: center;
    /* Positioning */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box; /* Include padding/border in width */
}


#head-duck-image-wrapper {
    width: 300px;
    height: 300px;
    position: relative;
    background-color: rgba(0,0,0,0.3);
    border: 4px inset #333;
}

    #head-duck-image-wrapper.is-flipped {
        transform: scaleX(-1);
    }

    #head-duck-image-wrapper img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

#remove-head-duck-btn {
    margin-top: 20px;
    background-color: #990000;
    border-color: #CC0000 #660000 #660000 #CC0000;
}

    #remove-head-duck-btn:active {
        border-color: #660000 #CC0000 #CC0000 #660000;
    }


#head-duck-right {
    flex-grow: 1;
    min-width: 300px;
    max-width: 450px;
    text-align: left;
}

    #head-duck-right h3 {
        text-shadow: 2px 2px #000;
        text-align: center;
        border-bottom: 1px dashed #888;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

#head-duck-stats-wrapper {
    background-color: rgba(0,0,0,0.3);
    border: 4px inset #333;
    padding: 15px;
    height: 340px; /* Match height of duck + name */
    overflow-y: auto;
}

/* NEW: Styles for detailed item boost cards */
.head-duck-item-card {
    background-color: #333;
    border: 2px solid #555;
    padding: 10px;
    margin-bottom: 10px;
}

.item-card-header {
    font-size: 14px;
    font-weight: bold;
    color: #FFF; /* MODIFIED: Was grey */
    text-shadow: 2px 2px #000;
    border-bottom: 1px dashed #777;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

    .item-card-header.is-set {
        color: #ffd700; /* Gold for set bonuses */
    }

.item-card-stats {
    font-size: 12px;
    line-height: 1.8;
}

/* END: Detailed item boost cards */


.head-duck-stat-item {
    display: flex;
    justify-content: space-between;
}

    .head-duck-stat-item .stat-label {
        color: #FFF; /* MODIFIED: Was grey */
    }

    .head-duck-stat-item .stat-value {
        font-weight: bold;
        white-space: nowrap;
    }

        /* Green for positive stats */
        .head-duck-stat-item .stat-value.is-positive {
            color: #33CC33; /* Bright Green */
            text-shadow: 1px 1px #000;
        }

        /* Red for negative stats */
        .head-duck-stat-item .stat-value.is-negative {
            color: #FF3333; /* Bright Red */
            text-shadow: 1px 1px #000;
        }
/* --- END: HEAD DUCK CONTAINER STYLES --- */

/* --- NEW: HEAD DUCK "HOW-TO" POPUP STYLES --- */
#head-duck-welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

#head-duck-welcome-menu {
    background-color: #444;
    padding: 30px;
    border: 4px double #FFF;
    width: 90%;
    max-width: 700px; /* Wider for the example */
    text-align: center;
}

    #head-duck-welcome-menu h2 {
        text-shadow: 3px 3px #000;
        margin-top: 0;
        color: #ffd700; /* Gold */
    }

    #head-duck-welcome-menu p {
        font-size: 14px;
        line-height: 1.6;
        margin: 15px 0;
        text-align: left;
    }

.popup-nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    border-top: 1px dashed #777;
    padding-top: 20px;
}

.popup-back-btn {
    background-color: #333;
    border-color: #555 #222 #222 #555;
}

#close-pond-welcome-btn {
    margin-top: 20px;
}

.how-to-example {
    display: flex;
    flex-wrap: wrap; /* Allow stacking on mobile */
    gap: 20px;
    background-color: #222;
    border: 4px inset #333;
    padding: 20px;
    margin: 20px 0;
}

.how-to-example-left {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* This is the new wrapper for the tutorial ducks */
.how-to-duck-display {
    width: 200px;
    height: 200px;
    position: relative;
    background-color: #111;
    border: 2px dashed #555;
}

    .how-to-duck-display img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

.how-to-example-left span {
    font-size: 11px;
    color: #FFF; /* MODIFIED: Was grey */
    margin-top: 10px;
}

.how-to-example-right {
    flex: 2;
    min-width: 250px;
    text-align: left;
}

    .how-to-example-right h3 {
        text-shadow: 2px 2px #000;
        margin-top: 0;
        border-bottom: 1px dashed #888;
        padding-bottom: 5px;
    }

    .how-to-example-right p {
        font-size: 12px;
        line-height: 1.7;
    }

/* --- NEW: Accent color span --- */
.text-accent {
    color: #ffd700; /* Gold */
    font-weight: bold;
}
/* --- END: HEAD DUCK "HOW-TO" POPUP STYLES --- */

/* --- NEW: STAT BREAKDOWN SEPARATOR --- */
.stat-breakdown-separator {
    font-size: 10px;
    color: #AAA;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 15px 0 10px 0;
    border-bottom: 1px dashed #555;
    padding-bottom: 5px;
    /* --- NEW: Pulldown styles --- */
    cursor: pointer;
    user-select: none;
}

    .stat-breakdown-separator::after {
        content: ' ▼';
        display: inline-block;
        transition: transform 0.2s;
    }

    .stat-breakdown-separator.is-collapsed::after {
        transform: rotate(-90deg);
    }

.stat-breakdown-content.is-collapsed {
    display: none;
}
/* --- END NEW STYLE --- */
/* --- NEW: Fix for Head Duck container spacing --- */
#head-duck-container {
    padding-top: 0;
}

/* For the grid items */
.saved-duck-wrapper.is-flipped-vertical {
    transform: scaleY(-1);
}

/* For the popup display */
#enlarged-duck-display.is-flipped-vertical {
    transform: scaleY(-1);
}

/* For the Head Duck display */
#head-duck-image-wrapper.is-flipped-vertical {
    transform: scaleY(-1);
}

#head-duck-none {
    font-size: 20px;
    color: #FFF;
    line-height: 1.6;
    background-color: #333; /* Dark background */
    border: 4px double #FFF; /* Double border to match theme */
    padding: 20px;
    margin: 20px auto; /* Center horizontally */
    max-width: 650px; /* Restrict width */
    text-align: center;
}

/* --- PERFORMANCE OPTIMIZATION --- */
.pond-duck-container {
    /* extensive performance boost: tells browser to skip rendering off-screen ducks */
    content-visibility: auto; 
    contain-intrinsic-size: 100px 100px; /* approximates the size of a duck card */
}

/* Stabilize the grid container to prevent CLS */
#pond-duck-grid {
    min-height: 50vh; /* Prevents footer from jumping up while ducks load */
}

/* --- PRISMATIC TEXT EFFECT --- */
.text-prismatic {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8f00ff);
    background-size: 200% auto;
    color: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: prismatic-shine 3s linear infinite;
    font-weight: bold;
    display: inline-block;
    text-shadow: none !important; /* Removes shadow so gradient is visible */
    filter: drop-shadow(2px 2px 0px rgba(0,0,0,1)); /* Adds shadow back to the shape */
}

@keyframes prismatic-shine {
    to {
        background-position: 200% center;
    }
}

/* --- SWAP STATION STYLES (INDUSTRIAL UPGRADE) --- */
#swap-station-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 99100;
    display: flex;
    justify-content: center;
    align-items: center;
}

#swap-station-menu {
    /* Industrial Machine Look */
    background-color: #2a2a2a;
    border: 6px outset #555; /* 3D Raised look */
    padding: 25px;
    width: 90%;
    max-width: 850px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8), inset 0 0 100px rgba(0,0,0,0.5);
    position: relative;
}

/* Decorative "Bolts" in corners using pseudo-elements */
#swap-station-menu::after {
    content: "";
    position: absolute;
    top: 10px; right: 10px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #111;
    box-shadow: 0 0 2px #555;
}
#swap-station-menu::before {
    content: "";
    position: absolute;
    top: 10px; left: 10px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #111;
    box-shadow: 0 0 2px #555;
}

.swap-header {
    display: flex;
    justify-content: center; /* Center the title */
    align-items: center;
    border-bottom: 2px solid #111;
    padding-bottom: 15px;
    margin-bottom: 10px;
    position: relative;
    background: repeating-linear-gradient(
        45deg,
        #2a2a2a,
        #2a2a2a 10px,
        #222 10px,
        #222 20px
    );
}

.swap-header h3 { 
    margin: 0; 
    color: #ffd700; 
    text-shadow: 2px 2px 0 #000;
    font-size: 24px;
    letter-spacing: 2px;
    background-color: #2a2a2a; /* Cover stripe background behind text */
    padding: 5px 15px;
    border: 2px solid #555;
}

#close-swap-btn {
    position: absolute;
    right: 0;
    background: #990000;
    border: 2px outset #ff0000;
    color: #FFF; 
    font-size: 20px; 
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#close-swap-btn:active { border-style: inset; }

.swap-stage {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 10px;
    background-color: #222; /* Darker inner stage */
    border: 2px inset #111;
    border-radius: 4px;
}

/* --- THE CHAMBERS (Slots) --- */
.swap-slot-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.swap-slot {
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1/1; /* Perfect Square */
    background-color: #111;
    /* Deep Inset Look */
    border: 6px inset #444; 
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 20px #000;
}

.swap-slot.empty span {
    font-size: 12px;
    color: #444;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.swap-slot img {
    position: absolute;
    top: -20%; left: -20%;
    width: 140%; height: 140%; 
    object-fit: contain;
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.5));
}

/* --- THE CONTROL PANEL (Middle) --- */
.swap-middle {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
}

.swap-arrow {
    font-size: 40px;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    line-height: 1;
}

/* Right Arrow (Top) */
.arrow-right { animation: pulse-right 1s ease-in-out infinite; }
/* Left Arrow (Bottom) */
.arrow-left { animation: pulse-left 1s ease-in-out infinite; }

@keyframes pulse-right {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    50% { transform: translateX(10px); opacity: 1; }
}
@keyframes pulse-left {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    50% { transform: translateX(-10px); opacity: 1; }
}

.swap-control-panel {
    background-color: #333;
    padding: 15px;
    border: 2px outset #555;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

.swap-control-panel label {
    display: block;
    font-size: 10px;
    margin-bottom: 8px;
    color: #AAA;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- CUSTOM DROPDOWN STYLE --- */
#swap-item-type {
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    color: #ffd700; /* Digital Gold Text */
    background-color: #000; /* Black Screen Background */
    
    border: 2px inset #444; /* Screen Bezel */
    border-radius: 0;
    
    padding: 12px 10px;
    width: 100%;
    cursor: pointer;
    text-align: center;
    
    /* KILL DEFAULT ARROW */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* CUSTOM ARROW */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffd700%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

#swap-item-type:focus {
    outline: none;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    border-color: #ffd700;
}

.swap-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid #111;
    padding-top: 20px;
    background: rgba(0,0,0,0.2);
    margin: -25px -25px -25px -25px; /* Bleed to edges */
    padding: 20px 25px;
}

#swap-status-text {
    color: #AAA;
    font-size: 12px;
}

/* BIG RED BUTTON STYLE */
#execute-swap-btn {
    background-color: #ffd700;
    color: #000;
    border: 4px outset #ffec8b;
    font-size: 16px;
    padding: 15px 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: transform 0.1s;
}

#execute-swap-btn:active {
    transform: scale(0.95);
    border-style: inset;
}

#execute-swap-btn.is-disabled {
    background-color: #333;
    color: #555;
    border-color: #444;
    cursor: not-allowed;
    transform: none;
}

/* MOBILE ADAPTATION */
@media (max-width: 600px) {
    .swap-stage { 
        flex-direction: column; 
        gap: 15px;
    }
    .swap-arrow { 
        transform: rotate(90deg); 
        animation: pulse-down 1s infinite !important;
    }
    .arrow-left { animation: pulse-up 1s infinite !important; }
    
    .swap-slot { max-width: 120px; }
    .swap-slot-container { width: 100%; }
    
    @keyframes pulse-down {
        0%, 100% { transform: rotate(90deg) translateY(0); opacity: 0.5; }
        50% { transform: rotate(90deg) translateY(5px); opacity: 1; }
    }
    @keyframes pulse-up {
        0%, 100% { transform: rotate(90deg) translateY(0); opacity: 0.5; }
        50% { transform: rotate(90deg) translateY(-5px); opacity: 1; }
    }
}

/* SELECTION MODE STATE */
body.is-selecting-swap .pond-duck-container {
    cursor: crosshair;
}
body.is-selecting-swap .pond-duck-container:hover {
    outline: 4px solid #ffd700;
    transform: scale(1.05);
    transition: transform 0.1s;
}
body.is-selecting-swap .pond-duck-container {
    opacity: 0.5; /* Dim everything */
}
body.is-selecting-swap .pond-duck-container:hover {
    opacity: 1; /* Highlight target */
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .swap-stage { flex-direction: column; }
    .swap-arrow { transform: rotate(90deg); animation: none; }
    .swap-slot { width: 100px; height: 100px; }
    .swap-slot-container { width: 100%; }
}

/* --- SWAP STATION FLIP FIX --- */

/* Horizontal Flip (Mirror) */
.swap-slot.is-flipped {
    transform: scaleX(-1);
}

/* Vertical Flip (Upside Down) */
.swap-slot.is-flipped-vertical {
    transform: scaleY(-1);
}

/* --- REMOVER TOOL STYLES --- */
#remover-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 3000; /* Higher than duck popup (1000) */
    display: flex;
    justify-content: center;
    align-items: center;
}

#remover-menu {
    background-color: #222;
    border: 4px double #FF3333; /* Red border for "Deletion" */
    padding: 20px;
    width: 90%;
    max-width: 400px;
    text-align: center;
}

#remover-menu h3 {
    color: #FF3333;
    text-shadow: 2px 2px 0 #000;
    margin-top: 0;
}

#remover-item-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
    max-height: 300px;
    overflow-y: auto;
}

.remover-item-btn {
    background-color: #444;
    border: 2px solid #666;
    color: #FFF;
    padding: 10px;
    cursor: pointer;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}

.remover-item-btn:hover {
    background-color: #666;
    color: #000;
    border-color: #444;
}

.remover-item-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    background-color: #000;
    border: 1px solid #FFF;
}