/* --- 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 {
    height: 20px;
    margin-bottom: 0;
    margin-top: -40px;
    order: 2;
    text-shadow: 2px 2px #000;
}

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