/* --- 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 {
    /*
     *
     * --- THIS IS THE FIX ---
     *
     * We are overriding the 'background-image' from style.css.
     * This new rule applies a 90% opaque black layer
     * on top of the street background, dimming it.
     */
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('images/background.png');
    /* This sets the fallback color *behind* the image */
    background-color: #222;
    /* --- NEW: STICKY FOOTER FIX --- */
    display: flex;
    flex-direction: column;
    /* min-height & box-sizing are inherited from style.css */
}

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #111;
    border-bottom: 4px double #FFF;
}

/* === MODIFIED: Reverted to original (no box) === */
.nav-links {
    display: flex;
    gap: 15px;
}
/* === END MODIFICATION === */

/* --- NEW: STYLES FOR TABS --- */
.gallery-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;
}

/* Active tab: Darker (#333) and pressed in */
.tab-button.active {
    background-color: #333; 
    border-style: inset;
    border-color: #333 #888 #888 #333;
}
/* --- MODIFIED: Container titles --- */
#gallery-container, #sets-container, #achievements-gallery-container {
    padding: 20px;
    /* --- NEW: STICKY FOOTER FIX --- */
    flex-grow: 1;
}

    #gallery-container h1, #sets-container h1, #achievements-gallery-container h1 {
        text-align: left;
        border-bottom: 2px solid #FFF;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
/* --- END NEW --- */


.category-section {
    margin-bottom: 20px;
}

.category-title {
    text-align: left;
    margin-bottom: 20px;
    border-bottom: 2px solid #FFF;
    padding-bottom: 10px;
    cursor: pointer;
    user-select: none;
}

    .category-title::after {
        content: ' ▼';
        display: inline-block;
        transition: transform 0.2s;
    }

    .category-title.is-collapsed::after {
        transform: rotate(-90deg);
    }

.accessory-grid.is-collapsed {
    display: none;
}

.accessory-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.accessory-item {
    width: 200px;
    text-align: center;
}

.accessory-image-wrapper {
    width: 200px;
    height: 200px;
    background-color: #111;
    border: 4px solid #555;
    margin-bottom: 10px;
    position: relative;
    overflow: visible;
}

    .accessory-image-wrapper.rarity-common {
        border-color: #00A3FF;
    }

    .accessory-image-wrapper.rarity-uncommon {
        border-color: #33CC33;
    }

    .accessory-image-wrapper.rarity-rare {
        border-color: #FF3333;
    }

    .accessory-image-wrapper.rarity-very-rare {
        border-color: #B233FF;
    }

    .accessory-image-wrapper.rarity-legendary {
        border-color: #FF9900;
    }

    .accessory-image-wrapper.rarity-mythical {
        border-width: 4px;
        border-style: solid;
        border-image: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000) 1;
        animation: rainbow-border 2s linear infinite;
    }

@keyframes rainbow-border {
    to {
        border-image: linear-gradient(-45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000) 1;
    }
}

.accessory-image-wrapper .accessory-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    max-width: 135%;
    max-height: 135%;
}

.accessory-image.is-flipped-gallery {
    transform: translate(-50%, -45%) scaleX(-1);
}

.accessory-image.undiscovered {
    filter: brightness(0) contrast(0%);
}

.accessory-name {
    height: 20px;
}

/* --- RESTORED: Styles for the rarity tooltip --- */
.rarity-tooltip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    padding: 8px 12px;
    border: 2px solid #FFF;
    text-shadow: 2px 2px #000;
    z-index: 10;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.accessory-image-wrapper:hover .rarity-tooltip {
    opacity: 1;
    visibility: visible;
}
/* --- End of restored styles --- */


/* --- STYLES FOR SETS CONTAINER --- */
#sets-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* justify-content: center; <-- REMOVED to align left */
}

.set-card {
    background-color: #111;
    border: 4px solid #555;
    width: 300px;
    padding: 15px;
    text-align: left;
    position: relative; /* NEW: So the "!" can be positioned on top */
}

    .set-card.rarity-common {
        border-color: #00A3FF;
    }

    .set-card.rarity-uncommon {
        border-color: #33CC33;
    }

    .set-card.rarity-rare {
        border-color: #FF3333;
    }

    .set-card.rarity-very-rare {
        border-color: #B233FF;
    }

    .set-card.rarity-legendary {
        border-color: #FF9900;
    }

    .set-card.rarity-mythical {
        border-width: 4px;
        border-style: solid;
        border-image: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000) 1;
        animation: rainbow-border 2s linear infinite;
    }


    .set-card h3 {
        text-shadow: 2px 2px #000;
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 16px;
        cursor: pointer; /* NEW: Make title clickable */
        user-select: none; /* NEW: Prevent text selection */
    }

        /* MODIFIED: Style for the "new item" indicator */
        .set-card h3 .new-set-indicator {
            position: absolute;
            top: 16px; /* MOVED UP */
            right: -5px; /* MOVED RIGHT (closer to corner) */
            z-index: 10;
            color: #FF0000; /* Pure Red */
            text-shadow: 4px 4px #000;
            font-weight: bold;
            font-size: 46px; /* SMALLER (from 90px) */
            display: inline-block;
            animation: pulse-red 1.2s infinite;
        }

/* NEW: Style for the "new item" indicator on the TAB */
.tab-new-indicator {
    color: #FF3333; /* Bright RED */
    text-shadow: 2px 2px #000;
    font-weight: bold;
    font-size: 20px; /* Big, but not AS big as the one on the card */
    display: inline-block;
    animation: pulse-red 1.2s infinite;
    margin-left: 5px; /* A little space */
    vertical-align: middle;
}

/* MODIFIED: Keyframes for pulsing */
@keyframes pulse-red {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4); /* Pulse even BIGGER */
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* NEW: Style for the collapsible arrow */
.set-card h3::after {
    content: ' ▼';
    display: inline-block;
    transition: transform 0.2s;
    font-size: 14px;
}

.set-card h3.is-collapsed::after {
    transform: rotate(-90deg);
}
/* END NEW */


.set-card h3 span {
    font-size: 14px;
    color: #FFD700; /* Gold color for bonus */
}

.set-card ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    font-size: 12px;
}

    /* NEW: Style for collapsed list */
    .set-card ul.is-collapsed {
        display: none;
    }
/* END NEW */

.set-card li {
    margin-bottom: 5px;
    color: #AAA; /* Default undiscovered color */
}

    .set-card li.discovered {
        color: #FFF; /* Discovered color */
    }
/* --- END SET STYLES --- */


/* --- NEW: STYLES FOR ACHIEVEMENTS GALLERY --- */
#achievements-gallery-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center; /* Center the cards */
}

.ach-gallery-card {
    width: 250px;
    height: 300px; /* Fixed height */
    background-color: #111;
    border: 4px solid #555; /* Locked border */
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Space between elements */
}

    .ach-gallery-card.is-unlocked {
        border-color: #ffd700; /* Gold border */
    }

    .ach-gallery-card.is-hidden {
        background-color: #111; /* Keep dark background */
        border-color: #00A3FF; /* NEW: Blue border */
    }

.ach-gallery-icon {
    width: 120px;
    height: 120px;
    flex-shrink: 0; /* Don't shrink icon */
    background-color: #333;
    border: 4px solid #555;
    color: #777;
    font-size: 48px;
    line-height: 72px;
    text-shadow: 2px 2px #000;
    margin-bottom: 10px;
    user-select: none;
    padding: 4px; /* <-- ADD THIS */
    box-sizing: border-box; /* <-- ADD THIS */
}

    .ach-gallery-icon img {
        width: 100%;
        height: 100%;
    }

.ach-gallery-card.is-unlocked .ach-gallery-icon {
    background-color: #ffd700;
    border-color: #ffec8b;
    /* Placeholder for your custom icon */
    /* background-image: url('images/ach/custom-icon.png'); */
    /* background-size: cover; */
    /* color: transparent; */
}

.ach-gallery-card.is-hidden .ach-gallery-icon {
    background-color: #222;
    border-color: #00A3FF; /* NEW: Blue border */
    color: #87CEFA; /* NEW: Light blue '?' */
}

.ach-gallery-card h5 {
    font-size: 14px;
    margin: 0;
    color: #AAA;
    text-shadow: 2px 2px #000;
    height: 28px; /* Reserve 2 lines for title */
}

.ach-gallery-card.is-unlocked h5 {
    color: #ffd700; /* Gold */
}

.ach-gallery-card.is-hidden h5 {
    color: #87CEFA; /* NEW: Light blue title */
}

.ach-gallery-card p {
    font-size: 11px;
    color: #888;
    line-height: 1.5;
    margin: 0;
    flex-grow: 1; /* Make description fill available space */
}

.ach-gallery-card.is-unlocked p {
    color: #AAA;
}

.ach-gallery-card.is-hidden p {
    color: #555;
}

.ach-gallery-progress {
    font-size: 12px;
    color: #FFF;
    font-weight: bold;
    flex-shrink: 0; /* Don't shrink progress */
    height: 44px; /* Fixed height for button */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Re-using claim button styles from style.css */
.ach-gallery-claim-btn {
    font-family: 'Press Start 2P', cursive;
    background-color: #008000; /* Green */
    color: #FFF;
    border-style: outset;
    border-width: 4px;
    border-color: #00CC00 #004D00 #004D00 #00CC00;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
}

    .ach-gallery-claim-btn:active {
        border-style: inset;
        border-color: #004D00 #00CC00 #CC0000 #004D00;
    }

    .ach-gallery-claim-btn img {
        width: 12px;
        height: 12px;
        vertical-align: middle;
        margin-left: 5px;
        margin-bottom: 2px;
    }

.ach-gallery-claimed-text {
    font-size: 12px;
    color: #00CC00; /* Green */
    text-shadow: 2px 2px #000;
}
/* --- END ACHIEVEMENT GALLERY STYLES --- */


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

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


/* --- STYLES FOR GALLERY WELCOME POPUP --- */
#gallery-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 */
}

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

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

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

#close-gallery-welcome-btn {
    margin-top: 20px;
}
/* --- END: STYLES FOR GALLERY WELCOME POPUP --- */
/* --- NEW: Style for coin icon in set bonus --- */
/* --- NEW: Style for coin icon in set bonus --- */
.set-bonus-coin {
    width: 16px;
    height: 16px;
    vertical-align: middle; /* Aligns the icon with the text */
    margin-left: 2px; /* Puts it right after the number */
    margin-bottom: 4px; /* Adjusts vertical alignment */
}

/* --- NEW: Style for the set bonus <li> --- */
.set-bonus-item {
    color: #ffd700 !important; /* Gold, !important overrides the default grey/white */
    font-size: 14px;
    margin-top: 10px;
    border-top: 1px dashed #555;
    padding-top: 8px;
}

.accessory-image.is-flipped-vertical-gallery {
    transform: translate(-50%, -45%) scaleY(-1);
}