/* Epic Catalogue Index - VIBRANT & FUN */
@import url("../css/fonts.css");
@import url("../css/auth.css?v=1.4");
@import url("../css/modal.css");
@import url("../css/chests.css");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
}

/* Parallax background effect */
html::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -1;
    will-change: transform;
}

:root {
    color-scheme: dark;
    --bg-secondary: light-dark(#fff, #1a1a1a);
    --bg-item: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.05));
    --bg-item-hover: light-dark(rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.1));
    --text-secondary: light-dark(rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.7));
    --border-color: light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.1));
    --shadow-color: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.5));
    --edges-color: light-dark(rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.3));

    &:has(.light-theme) {
        color-scheme: light;
    }

    &:has(.dark-theme) {
        color-scheme: dark;
    }
}



body {
    background: linear-gradient(#00000033, transparent);
    color: CanvasText;
    font-family: 'Source Sans Pro', sans-serif, Twemoji;
    overflow-x: hidden;
    max-width: 100%;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.light-theme body {
    background: #eaf0f3;
}

/* Progressive Letter Spacing - Larger text = tighter spacing */
h1 {
    letter-spacing: -0.02em;
}

h2 {
    letter-spacing: -0.01em;
}

h3 {
    letter-spacing: 0;
}

h4 {
    letter-spacing: 0.01em;
}

p,
span {
    letter-spacing: 0.02em;
}

small {
    letter-spacing: 0.03em;
}

.bn {
    background: Canvas;
    padding: 10px;
    text-align: center;
    opacity: 1;
    position: fixed;
    z-index: 222;
    width: 100%;
    animation: slideup 0.3s ease 1s forwards;
}

img {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

/* Header */
header {
    z-index: 1;
    text-align: center;
    background: var(--bg-secondary);
    position: relative;
    border-bottom: 2px solid var(--border-color);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 30px;
    box-shadow: 0 4px 20px var(--shadow-color);
    flex-direction: column;
}

header svg * {
    pointer-events: none;
}

header a svg {
    max-width: 300px;
    width: 30%;
    min-width: 210px;
    height: auto;
    overflow: visible;
    transition: transform .25s cubic-bezier(.7, .38, .24, 1.27);
}

header a svg:hover {
    transform: scale(1.1) rotate(2.4deg);
}

svg #cloud {
    transition: all 0.2s ease-in-out;
}

svg #cloud:last-of-type {
    transition: all 0.4s ease-in-out;
}

svg #cloud:first-of-type {
    transition: all 0.6s ease-in-out;
}

svg:hover #cloud {
    opacity: 0;
    transform: scale(.98);
    transform-origin: center;
}

.nav-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.nav-link {
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 10px;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}



.nav-link:not(:first-child, :nth-child(4), :last-child) {
    pointer-events: none;
    opacity: 0.5;
}

.nav-link:hover {
    background: var(--border-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.nav-link.active {
    background: var(--bg-item);
    color: #4a9eff;
    box-shadow: rgb(0 0 0 / 40%) 0px 0px 10px 0px;
}

#user-profile-btn {
    top: 20px;
    right: 20px;
    position: absolute;
}

.btn {

    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 10px var(--shadow-color), inset -2px -2px 4px var(--edges-color);
    backdrop-filter: blur(15px) saturate(150%);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 3px 4px 2px rgb(0 0 0 / 10%), inset -2px -2px 2px var(--shadow-color);
}

.theme-toggle {
    width: 31px;
    height: 30px;
    background: var(--bg-item);
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid var(--border-color);
    opacity: 0.75;
    position: relative;
}

.theme-toggle:hover {
    width: 60px;
    opacity: 1;
}

.theme-toggle::before {
    content: '🌙';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

.light-theme .theme-toggle::before {
    content: '☀️';
}

.light-theme .theme-toggle:hover::before {
    left: 34px
}



.theme-toggle:hover::before {
    left: 5px;
}

.toggles {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

/* Hero Section - MORE VIBRANT */
.hero-section {
    background: Canvas;
    padding: 34px 20px;
    text-align: center;
    position: relative;
    border-bottom: 1px solid var(--border-color);
    inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 150px;
    animation: moveHammers 30s linear infinite;
}


@keyframes moveHammers {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 1000px 1000px;
    }
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-weight: 900;
    margin-bottom: 5px;
    line-height: 1;
    animation: titlePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes titlePop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

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

.hero-epic {
    font-size: 64px;
    -webkit-text-stroke: 2px #000;
    font-family: 'Slapstick';
    background: linear-gradient(360deg, #ffe84a 10%, #24ff5a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    height: 68px;
    display: inline-block;
    animation: colorShift 3s ease-in-out infinite alternate;
}

@keyframes colorShift {
    0% {
        filter: hue-rotate(0deg) brightness(1);
    }

    100% {
        filter: hue-rotate(25deg) brightness(1.1);
    }
}

/* Add to your CSS file */
[popover] {
    touch-action: manipulation;
}

[popover]:popover-open {
    pointer-events: auto;
}

.popover-backdrop {
    pointer-events: auto !important;
    cursor: pointer;
}

/* Ensure content is clickable */
[popover]>*:not(.popover-backdrop) {
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.hero-catalogue {
    font-family: 'Merriweather';
    color: #ffffff;
    margin-bottom: 17px;
    font-weight: 200;
    font-size: 33px;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, -2px 0px 0px #000, 2px 0px 0px #000, 0px -2px 0px #000, 0px 2px 0px #000;
}

.hero-subtitle {
    color: var(--text-secondary);
    margin-bottom: 30px;
}

/* Search - SIMPLER */
.search-container {
    position: relative;
        backdrop-filter: blur(16px);
    max-width: 500px;
    margin: 0 auto 20px;
    z-index: 1;
}

#search-bar {
    font-size: 15px;
    width: 100%;
    padding: 14px 60px 14px 20px;
    border: 2px solid transparent;
    border-radius: 50px;
    background: var(--bg-item);
    box-shadow: 0 0 20px var(--shadow-color), inset 0px 3px 18px #00000033;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

#search-bar:focus {
    outline: none;
    transform: translateY(-3px) scale(1.02);
    background: var(--border-color);
    box-shadow: 0 25px 50px var(--shadow-color), inset 0px 3px 18px #85858536, 0 0 30px rgba(74, 158, 255, 0.3);
    border-color: #4a9eff;
}



#search-bar::placeholder {
    color: #868686a8;
}

.search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #4a9eff, #667eea);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: white;
}

.search-btn:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 20px rgba(74, 158, 255, 0.5);
}

.search-results {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 15px;
    max-height: 400px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 10px 40px var(--shadow-color);
    z-index: 200;
}

.search-result-item {
    padding: 12px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid var(--border-color);
}

.search-result-item:hover {
    background: var(--border-color);
}

/* Quick Stats - COLORFUL CARDS */
.quick-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    max-width: 380px;
    margin: 0 auto 20px;
}

.stat-card {
    backdrop-filter: blur(16px);
    background: var(--bg-item);
    padding: 15px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0px 0px var(--shadow-color), inset -3px -3px 8px 0px rgb(0 0 0 / 13%);
    position: relative;
    overflow: hidden;
    animation: fadeInScale 0.6s ease-out backwards;
}

.stat-card:nth-child(1) {
    animation-delay: 0.2s;
}

.stat-card:nth-child(2) {
    animation-delay: 0.3s;
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

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

.stat-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(74, 158, 255, 0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.stat-card:hover::after {
    left: 100%;
    opacity: 1;
}

.stat-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px var(--shadow-color), inset -3px -3px 12px 0px rgb(0 0 0 / 13%);
}

#installBtn {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    margin-right: 10px;
}

.stat-value {
    font-weight: 1000;
    line-height: 0.9;
    letter-spacing: 1.1px;
    font-family: 'BuilderSans';
    background: linear-gradient(to bottom, #4a9eff, #667eea);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 3px;
}

.stat-card:nth-child(2) .stat-value {
    background: linear-gradient(to bottom, #ff6b6b, #ee0979);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Stats Dashboard Button */
.stats-btn {
    padding: 10px 20px;
    background: linear-gradient(180deg, #66b3ea, #487aa5);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
}

.stats-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0px 15px rgb(102 126 234);
}

.stat-label {
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Category Nav - COMPACT */
.category-nav-container {
    padding: 15px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.category-nav {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.category-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-item);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
}

.category-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.category-btn:hover {
    background: var(--border-color);
    transform: translateY(-2px);
}

.category-btn.active {
    background: linear-gradient(135deg, #4a9eff, #667eea);
    border-color: #4a9eff;
    color: white;
    box-shadow: 0 4px 15px rgba(74, 158, 255, 0.3);
}

/* Main Content */
main {
    padding: 30px 20px;
    max-width: 1400px;
    box-shadow: 0 4px 20px var(--shadow-color);
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-secondary);
    margin: 0 auto;
}

.content-section {
    width: fit-content;
    max-width: -webkit-fill-available;
    overflow-x: visible;
}

.content-section:has(.items-grid:empty) {
    display: none;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    gap: 15px;
    padding: 0 10px;
}

.section-title {
    font-weight: 800;
}

.content-section:nth-of-type(3) .section-header .section-title::before {
    content: '';
    background: url(../imgs/WKeX5AS.png) no-repeat center center;
    width: 32px;
    height: 32px;
    position: relative;
    translate: 0 4px;
    display: inline-block;
    background-size: contain;
}

.content-section:nth-of-type(1) .section-header .section-title::before {
    content: '';
    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20viewBox%3D%220%200%20100%20100%22%20style%3D%22fill%3Awhite%3Bfilter%3A%20drop-shadow(-1px%201px%200.5px%20black)%20drop-shadow(1px%20-1px%200.5px%20black)%20drop-shadow(-1px%20-1px%200.5px%20black)%20drop-shadow(1px%201px%200.5px%20black)%3B%3B%22%3E%3Cpath%20d%3D%22m82.466%2060.066-.032-.015.034-.059-17.31-9.994%2017.39-10.04-.005-.009a2.014%202.014%200%200%200%20.687-2.72c-.012-.021-.029-.038-.042-.059l.011-.006-5.52-9.562-.007.004a2.013%202.013%200%200%200-2.669-.72l-.004-.006-17.421%2010.062V16.793h-.01a2.013%202.013%200%200%200-2.01-1.953c-.025%200-.048.006-.073.007v-.013h-11.04v.007a2.01%202.01%200%200%200-1.957%201.952h-.006v20.115l-17.45-10.075-.006.01a2.01%202.01%200%200%200-2.697.764c-.012.021-.018.044-.03.065l-.01-.006-5.52%209.562.005.003c-.508.94-.196%202.11.712%202.672l-.002.003.035.02.016.011.018.008%2017.411%2010.052-17.028%209.832a2%202%200%200%200-.426.18%202.013%202.013%200%200%200-.743%202.74l-.007.004%205.711%209.892.032-.019a2.014%202.014%200%200%200%202.55.455l.03-.021.032.056%2017.369-10.027v19.593a2%202%200%200%200-.058.461c0%201.108.895%202.005%202%202.014v.007h11.422v-.037a2.01%202.01%200%200%200%201.67-1.98l-.004-.035h.066V63.056l16.967%209.796c.112.105.233.202.371.282a2.016%202.016%200%200%200%202.745-.724l.005.003%205.534-9.587.003-.004.002-.004.173-.299-.03-.018a2.02%202.02%200%200%200-.884-2.435%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
    width: 32px;
    height: 32px;
    position: relative;
    translate: 0 6px;
    display: inline-block;
    background-size: contain;
}

.donators-card .card-title::before {
    content: '';
    background: url('data:image/svg+xml,%3Csvg%20viewBox%3D%221%201%2022%2022%22%20fill%3D%22url(%23hrt)%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22hrt%22%20y2%3D%221%22%20y1%3D%22.2%22%20x2%3D%220%22%3E%3Cstop%20style%3D%22stop-color%3A%23fff%22%2F%3E%3Cstop%20offset%3D%22.8%22%20style%3D%22stop-color%3A%23fc5d61%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M15.546%209.925c.373-.664.685-1.263.878-1.72.933-2.216.01-4.764-2.247-5.804s-4.524.038-5.518%202.12c-1.902-1.305-4.44-1.114-5.84.923-1.398%202.037-.96%204.698.957%206.15.87.659%202.59%201.63%204.21%202.494m8.311-2.338c-.422-2.268-2.352-3.927-4.781-3.476-2.43.451-4.001%202.643-3.673%205.025.264%201.914%201.72%206.404%202.283%208.095.077.23.116.346.192.427a.5.5%200%200%200%20.248.143c.107.025.226%200%20.465-.048%201.745-.358%206.362-1.342%208.152-2.07%202.227-.907%203.376-3.362%202.515-5.693s-3.226-3.171-5.4-2.403%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
    width: 32px;
    height: 32px;
    position: relative;
    translate: 0 6px;
    display: inline-block;
    background-size: contain;
}

.patch-notes-card .card-title::before {
    content: '';
    background: url('data:image/svg+xml,%3Csvg%20viewBox%3D%222%202%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%2F%3E%3Ccircle%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m8.5%2012.5%201.651%202.064a.5.5%200%200%200%20.744.041L15.5%2010%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center center;
    width: 25px;
    filter: drop-shadow(1px 1px 0px black) drop-shadow(1px -1px 0px black) drop-shadow(-1px -1px 0px black) drop-shadow(-1px 1px 0px black);
    height: 25px;
    position: relative;
    translate: -2px 5px;
    display: inline-block;
    background-size: contain;
}

.refresh-card .card-title::before {
    content: '';
    background: url('data:image/svg+xml,%3Csvg%20stroke%3D%22black%22%20stroke-width%3D%2284%22%20%20%20paint-order%3D%22stroke%22%20fill%3D%22white%22%20viewBox%3D%220%200%20512%20512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M465.024%20135.32%20376.68%20465.024%2046.976%20376.68%20135.32%2046.976zM317.08%20316.538c-17.071-4.574-34.618%205.557-39.192%2022.628s5.557%2034.618%2022.627%2039.192%2034.618-5.557%2039.192-22.628-5.556-34.617-22.627-39.192m-52.798-91.448c-17.07-4.574-34.618%205.557-39.192%2022.628s5.557%2034.618%2022.628%2039.192%2034.618-5.557%2039.192-22.628-5.557-34.618-22.628-39.192m-52.797-91.448c-17.071-4.574-34.618%205.557-39.192%2022.628s5.556%2034.617%2022.627%2039.192%2034.618-5.556%2039.192-22.628c4.574-17.07-5.556-34.617-22.627-39.192%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
    width: 25px;
    height: 25px;
    position: relative;
    translate: -2px 5px;
    display: inline-block;
    background-size: contain;
}

.see-all-btn {
    color: #4a9eff;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
    padding: 6px 14px;
    border-radius: 8px;
}

.see-all-btn:hover {
    background: var(--bg-item);
    transform: translateX(3px);
}

.countdown {
    background: var(--bg-item);
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-family: 'BuilderSans', monospace;
    font-weight: bold;
    display: none;
    color: #ffd700;
}

#count-weekly {
    right: 27px;
}

.refresh-btn {
    background: var(--bg-item);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.refresh-btn.active svg {
    animation: refreshSpin 300ms ease-in-out;
}

.refresh-btn:hover {
    background: var(--border-color);
}

.refresh-btn:active {
    transform: scale(0.85);
}

@keyframes refreshSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Items Grid - HORIZONTAL SCROLL! */
.items-grid {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px 10px 20px;
    scroll-snap-type: x proximity;
    justify-content: space-evenly;
}

#weekly-shop-grid,
#weekly-rotation-grid {
    overflow: visible;
}

.items-grid::-webkit-scrollbar {
    height: 8px;
}

.items-grid::-webkit-scrollbar-track {
    background: var(--bg-item);
    border-radius: 10px;
}

.items-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #4a9eff, #255cf1);
    border-radius: 10px;
}

.items-grid::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, rgb(54, 138, 248), #3c22d1);
}

.item {
    background: var(--bg-item);
    padding: 6px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    min-height: 110px;
    min-width: 110px;
    max-height: 110px;
    max-width: 110px;
    box-shadow: 0 0px 0px var(--shadow-color), inset -2px -2px 4px var(--edges-color);
    display: flex;
    border: 1px solid var(--border-color);
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;

    @supports (corner-shape: squircle) {
        corner-shape: squircle;
        border-radius: 26px;
    }
}

.item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: 0;
}

.item:hover::before {
    width: 90px;
    height: 90px;
}

.item:hover {
    transform: translateY(-5px) scale(1.08) rotate(2deg);
    background: var(--border-color);
    box-shadow: 0 12px 30px var(--shadow-color), inset -2px -2px 6px var(--edges-color), 0 0 20px rgba(74, 158, 255, 0.2);
}


.item:active {
    transform: translateY(-2px) scale(1.03);
}

.item#gear {
    background: #5bfe6a;
}

.item#death {
    background: #ff7a5e;
}

.item#effect {
    background: #ffb135;
}

.item#title {
    background: #c960fe;
}

.item#pet {
    background: #377afa;
}

.lists-grid {
    display: flex;
    flex-direction: row;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: space-around;
}

#wishlist-items .item {
    height: 100px;
    width: 100px;
}

.stats-content .item:hover {
    transform: translateY(-2px) scale(1.08) rotate(1deg);
    background: var(--border-color);
    box-shadow: unset;
}

.stats-content .item:hover::before {
    width: 0px;
    height: 0px;
}

.item:active {
    filter: brightness(0.85);
    transform: translateY(0) scale(0.98);
}

#recent-viewed-items .item {
    background: var(--shadow-color);
    width: 90px;
    height: 90px;
    box-shadow: inset 0 0 20px 20px #00000010;
}

#recent-viewed-items .item:hover {
    transform: scale(1.01);
    box-shadow: inset 0 0 20px 25px var(--shadow-color);
}

#recent-viewed-items .item:has(svg) .item-name,
#wishlist-items .item:has(svg) .item-name {
    opacity: 0;
    white-space: nowrap;
}

#recent-viewed-items .item>svg:first-of-type,
#wishlist-items .item>svg:first-of-type {
    overflow: visible;
    width: 90%;
    height: auto;
    pointer-events: none;
}

.item canvas {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
    position: absolute;
    pointer-events: none;
    place-self: anchor-center;
}

.item#title .item-name {
    opacity: 0;
    white-space: nowrap;
}

.item#title>svg:first-of-type {
    overflow: visible;
    width: 90%;
    height: auto;
    pointer-events: none;
}

.item-name {
    text-shadow: -1.3px -1.3px 0 #000, 0 -1.3px 0 #000, 1.3px -1.3px 0 #000, 1.3px 0 0 #000, 1.3px 1.3px 0 #000, 0 1.3px 0 #000, -1.3px 1.3px 0 #000, -1.3px 0 0 #000;
    z-index: 3;
    margin-top: 0px;
    text-align: center;
    word-break: break-word;
    color: white;
}

.item-price {
    z-index: 2;
    outline: 1px solid #00000091;
    border: 0px;
    display: flex;
    border-radius: 50px;
    white-space: nowrap;
    gap: 4px;
    font: 1000 12px 'BuilderSans';
    color: #ffffff;
    background: linear-gradient(to top, #000000, #00000040);
    padding: 3px 7px;
    backdrop-filter: blur(6px);
    transition: filter 0.1s ease-out;
    filter: drop-shadow(0px 0px 0px #00000000);
    align-items: center;
}

.hide-prices .item-price,
.hide-prices .wishlist-total {
    opacity: 0;
    pointer-events: none;
}

.hide-prices .modal-price {
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;

}

.item-price::before {
    content: '';
    background: url('data:image/svg+xml,%3Csvg%20style%3D%22width%3A%2013px%3B%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016.6%2018%22%3E%3Cpath%20d%3D%22M6.251%206.993v3.999h4.025V6.99Zm-.156-4.689c1.917-1.213%202.507-1.154%204.484.034l3.37%202.027c.648.43%201.255.949%201.157%202.077v4.444c.009%201.578-.127%202.032-1.065%202.656l-3.492%202.052c-2.118%201.195-2.219%201.353-4.55.001l-3.28-1.913c-.886-.562-1.373-1.115-1.315-2.45V6.733c-.025-1.63.458-1.874%201.242-2.405Zm.395%201.298c1.287-.804%201.855-1.088%203.612.034l2.777%201.641c.568.423.954.838.96%201.652v3.952c-.007.705-.271%201.405-.9%201.77l-2.813%201.684c-1.786.942-1.799%201.004-3.127.287l-3.22-1.835c-.658-.474-1.038-.651-1.006-2.009V7.131c.005-1.044.193-1.432.991-1.952ZM5.605.944C7.71-.331%208.871-.345%2011.011.985l4.062%202.444c.646.363%201.512%201.515%201.528%202.588v5.847c.003%201.055-.645%202.014-1.424%202.63l-4.178%202.501c-1.843%201.087-3.052%201.56-5.486.002l-3.928-2.348C.71%2014.043-.006%2013.267%200%2011.695V6.272c.033-1.551.668-2.233%201.498-2.899Z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat center center;
    width: 12px;
    height: 13px;
    background-size: contain;
}

.star-price {
    z-index: 2;
    outline: 1px solid #00000091;
    border: 0px;
    display: flex;
    border-radius: 50px;
    white-space: nowrap;
    gap: 2px;
    font: 1000 12px 'BuilderSans';
    color: #ffffff;
    background: linear-gradient(to top, #000000, #00000040);
    padding: 3px 7px;
    backdrop-filter: blur(6px);
    transition: filter 0.1s ease-out;
    filter: drop-shadow(0px 0px 0px #00000000);
}

.star-price::before {
    content: '';
    background: url('../imgs/WKeX5AS.png') no-repeat center center;
    width: 15px;
    height: 15px;
    background-size: contain;
    line-height: 1;
}

.coin-price::before {
    content: '';
    background: url('../imgs/Coin.webp') no-repeat center center;
    width: 15px;
    height: 15px;
    background-size: contain;
    line-height: 1;
}

div#random-items-grid {
    zoom: 1.5;
    margin: auto;
    overflow: inherit;
}


/* Info Cards - SIDE BY SIDE */
.info-cards-row {
    display: flex;
    gap: 25px;
    margin: 50px 0;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
}

.info-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 15px;
    flex: 1 1 322px;
    padding: 25px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.0), inset -2px -2px 6px light-dark(transparent, #00000066);
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), inset -2px -2px 6px light-dark(transparent, #00000066);

}

.refresh-card {
    width: fit-content;
}

.info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #4a9eff, transparent);
    border-radius: 0 0 3px 3px;
}

.card-title {
    font-weight: 800;
    margin-bottom: 18px;
    text-box-trim: trim-start;
}

.donators-list {
    display: flex;
    gap: 12px;
    margin: 18px 0;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row-reverse;
}

.donator-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.donator-avatar {
    width: 55px;
    height: 55px;
    border-radius: 10px;
    border: 3px solid #ffd700;
    box-shadow: 0 0 3px rgba(255, 230, 5, 0.75);
}

.donator-name {
    color: var(--text-secondary);
    font-weight: 600;
}

.donator-amount {
    color: #ffd700;
    font-weight: bold;
    background: #00000096;
    padding: 2px 5px 3px;
    border-radius: 7px;
}


.donator-amount::before {
    content: '';
    background: url(data:image/svg+xml,%3Csvg%20style%3D%22width%3A%2013px%3B%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016.6%2018%22%3E%3Cpath%20d%3D%22M6.251%206.993v3.999h4.025V6.99Zm-.156-4.689c1.917-1.213%202.507-1.154%204.484.034l3.37%202.027c.648.43%201.255.949%201.157%202.077v4.444c.009%201.578-.127%202.032-1.065%202.656l-3.492%202.052c-2.118%201.195-2.219%201.353-4.55.001l-3.28-1.913c-.886-.562-1.373-1.115-1.315-2.45V6.733c-.025-1.63.458-1.874%201.242-2.405Zm.395%201.298c1.287-.804%201.855-1.088%203.612.034l2.777%201.641c.568.423.954.838.96%201.652v3.952c-.007.705-.271%201.405-.9%201.77l-2.813%201.684c-1.786.942-1.799%201.004-3.127.287l-3.22-1.835c-.658-.474-1.038-.651-1.006-2.009V7.131c.005-1.044.193-1.432.991-1.952ZM5.605.944C7.71-.331%208.871-.345%2011.011.985l4.062%202.444c.646.363%201.512%201.515%201.528%202.588v5.847c.003%201.055-.645%202.014-1.424%202.63l-4.178%202.501c-1.843%201.087-3.052%201.56-5.486.002l-3.928-2.348C.71%2014.043-.006%2013.267%200%2011.695V6.272c.033-1.551.668-2.233%201.498-2.899Z%22%20fill%3D%22%23ffd700%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E) no-repeat center center;
    width: 18px;
    height: 14px;
    display: inline-block;
    margin-bottom: -2px;
    background-size: contain;
}

.donate-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(180deg, #ffd700 0%, #ffb900 100%);
    border: 2px solid #ffd700;
    border-radius: 10px;
    color: #000;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.donate-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.donate-btn:hover::before {
    width: 300px;
    height: 300px;
}

.donate-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 35px rgba(255, 215, 0, 0.6);
}

.donate-btn:active {
    transform: translateY(-1px) scale(0.98);
}

.donate-btn svg {
    position: relative;
    z-index: 1;
    animation: heartBeat 1.5s ease-in-out infinite;
}

.donate-btn span {
    position: relative;
    z-index: 1;
}

@keyframes heartBeat {

    0%,
    100% {
        transform: scale(1);
    }

    10%,
    30% {
        transform: scale(1.1);
    }

    20%,
    40% {
        transform: scale(1);
    }
}

.donate-note {
    display: block;
    text-align: center;
    margin-top: 8px;
    background: linear-gradient(90deg, #ffffff28, #ffffff7e, #ffffff28);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradient-animation 9s ease-out infinite alternate;
    font-style: italic;
}


@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.patch-date {
    color: var(--text-secondary);
    font-variant: all-petite-caps;
    font-weight: bolder;
    opacity: 0.5;
}

.patch-list {
    list-style: none;
    margin: 15px 0;
}

.patch-list li {
    padding: 6px 0 4px 20px;
    color: var(--text-secondary);
    position: relative;
    line-height: 1.5;
}

.patch-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--text-secondary);
    line-height: 1;
}

.patch-list li.patch-new,
.patch-list li.patch-new::before {
    color: #0ed13f;
    font-weight: 600;
    content: '!';
}

.patch-link {
    color: #4a9eff;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    margin-top: 8px;
    transition: all 0.2s;
    padding: 6px 12px;
    background: var(--bg-item);
    border-radius: 6px;
}

.patch-link:hover {
    background: var(--shadow-color);
    transform: translateX(3px);
    pointer-events: all;
    cursor: pointer;
}

/* Quick Links */
.quick-links {
    display: flex;
    gap: 18px;
    justify-content: center;
    margin: 50px 0;
    flex-wrap: wrap;
}

.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px;
    background: var(--bg-item);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
    min-width: 110px;
    font-weight: 600;
}

.quick-link img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    transition: transform 0.2s;
}


.quick-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px var(--shadow-color);
    background: var(--border-color);
}

.quick-link:hover img {
    transform: scale(1.1) rotate(5deg);
}

/* Footer */
footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 35px 20px 15px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 35px;
    margin-bottom: 25px;
}

.footer-section h4 {
    margin-bottom: 12px;
    font-weight: 700;
}

.footer-section p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.footer-section a {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 4px 0;
    transition: all 0.2s;
}

.footer-section a:hover {
    color: #4a9eff;
    transform: translateX(3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
}

/* ============================================
           BACK TO TOP BUTTON
============================================ */
.back-to-top {
    position: fixed;
    bottom: 0;
    right: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform-origin: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 6;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    animation: bounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.back-to-top:hover {
    transform: translateY(-5px) scale(1.1);
}

.back-to-top:active {
    transform: translateY(-3px) scale(1.05);
}

.back-to-top img {
    width: 104px;
    height: 104px;
    color: white;
}

@keyframes bounceIn {
    0% {
        transform: scale(0) translateY(100px);
        opacity: 0;
    }

    60% {
        transform: scale(1.1) translateY(0);
        opacity: 1;
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

/* ============================================
           SCROLL ANIMATIONS
============================================ */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger animation delays for child elements */
.content-section:nth-child(1) {
    animation-delay: 0.1s;
}

.content-section:nth-child(2) {
    animation-delay: 0.2s;
}

.content-section:nth-child(3) {
    animation-delay: 0.3s;
}

/* ============================================
           CATALOG GRID
============================================ */
.catalog-container {
    min-height: 24vh;
    padding: 20px;
}

#wishlist-items:empty::after {
    content: "Nothing to see here :3";
    color: var(--text-secondary);
    text-align: center;
    grid-column: 1 / -1;
}

.chest-expand-toggle {
    margin-top: 10px;
    width: -webkit-fill-available;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0% 12px;
    background: var(--bg-item);
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 23px 15px;
    animation: fadeIn 0.5s;
    justify-items: center;
    padding-bottom: 20px;
}

#recent-viewed-items {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px 21px;
    opacity: 0.8;
}

#wishlist-items {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    padding: 12px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideup {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-50%);
        opacity: 0;
    }
}



@keyframes sparkle {
    0% {
        transform: scale(1) rotate(26deg);
    }

    50% {
        transform: scale(1.2) rotate(170deg) translateY(-2px);
    }

    75% {
        transform: scale(1.5) rotate(170deg) translateY(-2px);
    }

    100% {
        transform: scale(1) rotate(170deg);
    }
}



/* ============================================
           LOAD MORE BUTTON
============================================ */
.load-more {
    text-align: center;
    padding: 40px;
}

.load-button {
    padding: 12px 30px;
    background: transparent;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s;
}



.load-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid CanvasText;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Heart Button */
.heart-button,
.wishlist-button {
    display: inline-block;
    width: 28px;
    height: 28px;
    opacity: 0;
    position: absolute;
    fill: white;
    cursor: pointer;
    background-repeat: no-repeat;
    z-index: 4;
    transition: all 0.2s, transform 0.4s cubic-bezier(.47, 1.64, .41, .8);
}

.heart-button {
    top: -14px;
    right: -11px;
}

.wishlist-button {
    top: 14px;
    right: -12px;
}

.heart-button.red {
    transform: scale(1) rotate(26deg);
    opacity: 1;
    fill: url(#favred);
}

.wishlist-button.active {
    transform: scale(1) rotate(26deg);
    opacity: 1;
    fill: url(#wishlistact);
    animation: sparkle 0.5s ease-in-out;
}

.heart-button:hover,
.wishlist-button:hover {
    transform: scale(1.1) rotate(26deg);
}

.heart-button.red:hover,
.wishlist-button.active:hover {
    transform: scale(1.3) rotate(26deg);
}

.heart-button:active,
.wishlist-button:active {
    transform: scale(.75) rotate(26deg);
}

.item:hover .heart-button,
.item:hover .wishlist-button {
    opacity: 1;
}



/* Particle Effect Canvas */
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3000;
}

.remove-wishlist {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 23px;
    background: linear-gradient(180deg, #ff4444, #b70000);
    border: 1px solid darkred;
    color: white;
    border-radius: 50%;
    line-height: 0.2;
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    z-index: 3;
    justify-content: center;
    cursor: pointer;
}

.remove-wishlist:hover {
    background: linear-gradient(180deg, #ff4444, #e72626);
    border: 1px solid rgb(0, 0, 0);
}

.icon {
    min-width: 22px;
    max-width: 22px;
    display: inline-block;
    width: 22px;
    height: 22px;
    mask-repeat: no-repeat;
    margin: 0 1px;
    background: CanvasText;
    background-repeat: no-repeat;
    filter: saturate(1) brightness(1) drop-shadow(0px 0px 0.5px black) drop-shadow(0px 0px 0.5px black) drop-shadow(0px 0px 0.5px black) drop-shadow(0px 0px 0.5px black) drop-shadow(0px 0px 0.5px black);
}

.icon.newest-icon {
    mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2076%2076%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m44.483%2015.815-6.458%2017.179h-.223l-6.125-17.18-9.91%205.764%2011.692%2014.076v.221L16.087%2032.33v11.194L33.57%2040.42l.111.221-11.915%2013.855%209.577%205.652L37.69%2043.08h.223l6.459%2017.068%209.8-5.653-12.027-13.743v-.221l17.926%202.992V32.329l-17.815%203.547v-.222l11.915-14.187z%22%2F%3E%3C%2Fsvg%3E");
    background: linear-gradient(to bottom, #00ff40, #00a2ff);
}

.icon.untradable-icon {
    background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%22-7%20-7%2090%2090%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M14%2022v11h26v4l27-10-27-9v4zm47%2032V43H35v-4L8%2049l27%209v-4z%22%2F%3E%3Cpath%20fill%3D%22red%22%20d%3D%22M37.5%208.5c6.7%200%2012.85%202.25%2017.85%206L13.6%2056.25c-3.75-5-6-11.15-6-17.85C7.6%2021.95%2021%208.55%2037.5%208.5m0%2059.75c-6.7%200-12.85-2.25-17.85-6L61.4%2020.5c3.75%205%206%2011.15%206%2017.85C67.4%2054.8%2054%2068.2%2037.55%2068.2m38.4-29.85c0-21.2-17.2-38.4-38.4-38.4s-38.4%2017.2-38.4%2038.4%2017.2%2038.4%2038.4%2038.4%2038.4-17.2%2038.4-38.4%22%2F%3E%3C%2Fsvg%3E");
}

.icon.retired-icon {
    mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%22-1%20-1%2018%2018%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14%207h-1V4c0-2.206-1.794-4-4-4H7C4.794%200%203%201.794%203%204v3H2c-.55%200-1%20.45-1%201v7c0%20.55.45%201%201%201h12c.55%200%201-.45%201-1V8c0-.55-.45-1-1-1M5%207V4c0-2%202-2%202-2h2c.103%200%202%200%202%202v3zm4.546%204.704q.314.094.614.232.174.085.31.22.086.091.142.205l1.528%202.575H9.67l-1.153-2.167a2.7%202.7%200%200%200-.381-.523.4.4%200%200%200-.294-.133h-.586v2.82l-2.183.003V8h4.385s1.997.036%201.997%201.936c.003%201.077-.832%201.972-1.907%201.746ZM8.598%209.29H7.275v1.225h1.323a.606.606%200%200%200%20.613-.623.57.57%200%200%200-.613-.602%22%2F%3E%3C%2Fsvg%3E");
    background: linear-gradient(to bottom, #d754ff, #4c007e);
}

.icon.favorites-icon {
    mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2034%2029%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M31.272%202C27.936-1.643%2021.067-.087%2017.099%205.555%2012.074-.505%206.071-1.643%202.726%202c-9.312%2010.141%2010.62%2024.717%2014.234%2026.356l.084.048v-.048C20.655%2026.717%2040.584%2012.141%2031.272%202%22%2F%3E%3C%2Fsvg%3E");
    background: linear-gradient(to top, #550606, #ee0979);
}

.icon.code-icon {
    mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M11.126%202.601a.75.75%200%200%200-1.025.273l-5.5%209.5a.75.75%200%200%200%201.298.752l5.5-9.5a.75.75%200%200%200-.273-1.025%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
    background: linear-gradient(to bottom, #ffffff, #7e7e7e);
}

.icon.gamenight-icon {
    mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M9.353%203C5.849%204.408%203%207.463%203%2011.47A9.53%209.53%200%200%200%2012.53%2021c4.007%200%207.062-2.849%208.47-6.353C8.17%2017.065%208.14%208.14%209.353%203%22%2F%3E%3C%2Fsvg%3E");
    background: linear-gradient(to top, #ff6a00, #d9ff00);
}

.icon.premium-icon {
    mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2%200h16c1%200%202%201%202%202v16c0%201-1%202-2%202H9.528v-1.805h8.664V1.862H1.835V20C1%2020%200%2019%200%2018V1.561C-.001.745.738-.005%201.742.012Zm6.158%2019.99V8.179h3.691v3.694H9.553v1.768h4.143V6.358H6.387V20ZM5%2020V5.039h10V15H9.527v1.781h7.256V3.218H3.221V20Z%22%2F%3E%3C%2Fsvg%3E");
}

.icon.unreleased-icon {
    mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%2213%2016%2050%2050%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M54.84%2024.475q.766-.344%201.38-.344.595%200%201.047.276.45.276.749.728l.442%201.019.144%201.12q0%203.51-.405%206.561a43%2043%200%200%201-1.124%205.687%2035%2035%200%200%201-1.697%204.861%2035%2035%200%200%201-2.12%204.097%2029.5%2029.5%200%200%201-2.406%203.407%2031%2031%200%200%201-2.554%202.762q-4.541%204.315-10.3%206.31-5.77-1.995-10.298-6.31-1.934-1.842-3.788-4.374-1.853-2.53-3.299-5.889-1.445-3.357-2.329-7.596t-.884-9.516l.163-1.133.479-.997q.315-.442.785-.709a2.1%202.1%200%200%201%201.065-.267q.595%200%201.27.307%201.554.711%202.858%201.006t2.415.295q1.479%200%202.658-.439a10%2010%200%200%200%202.166-1.11l1.823-1.44%201.62-1.44%201.59-1.113a3.5%203.5%200%200%201%201.707-.442q.921%200%201.728.442l1.593%201.114%201.63%201.439%201.822%201.44a10%2010%200%200%200%202.157%201.11q1.179.44%202.658.44%201.11-.001%202.406-.296%201.296-.294%202.848-1.006%22%2F%3E%3C%2Fsvg%3E");
    background: linear-gradient(to bottom, #14c8ff, #0650d8);
}

.icon.removed-icon {
    mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%22-3%20-2%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D'M6%202V1a1%201%200%200%201%201-1h4a1%201%200%200%201%201%201v1h4a2%202%200%200%201%202%202v1a2%202%200%200%201-2%202h-.133l-.68%2010.2a3%203%200%200%201-2.993%202.8H5.826a3%203%200%200%201-2.993-2.796L2.137%207H2a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h4zm10%202H2v1h14V4zM4.141%207l.687%2010.068a1%201%200%200%200%20.998.932h6.368a1%201%200%200%200%20.998-.934L13.862%207h-9.72zM7%208a1%201%200%200%201%201%201v7a1%201%200%200%201-2%200V9a1%201%200%200%201%201-1zm4%200a1%201%200%200%201%201%201v7a1%201%200%200%201-2%200V9a1%201%200%200%201%201-1z'%2F%3E%3C%2Fsvg%3E");
    background: linear-gradient(to bottom, #ff0000, #7e0000);
}

.icon.weekly-icon {
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-10%20-10%20468%20468%22%3E%3Cg%20style%3D%22font-style%3Anormal%3Bfont-variant%3Anormal%3Bfont-weight%3A700%3Bfont-stretch%3Anormal%3Bfont-size%3A58.14687347px%3Bline-height%3A125%25%3Bfont-family%3A%26quot%3BSegoe%20UI%26quot%3B%3B-inkscape-font-specification%3A%26quot%3BSegoe%20UI%20Bold%26quot%3B%3Bletter-spacing%3A0%3Bword-spacing%3A0%3Bfill-opacity%3A1%3Bstroke%3Anone%3Bstroke-width%3A1px%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-opacity%3A1%22%3E%3Cpath%20style%3D%22font-style%3Anormal%3Bfont-variant%3Anormal%3Bfont-weight%3A700%3Bfont-stretch%3Anormal%3Bfont-size%3A261.66091919px%3Bfont-family%3A%26quot%3BSegoe%20UI%26quot%3B%3B-inkscape-font-specification%3A%26quot%3BSegoe%20UI%20Bold%26quot%3B%22%20d%3D%22M338.214%20193.631v189.277H297.97V239.115q-3.322%202.94-7.922%205.622a91%2091%200%200%201-9.582%204.727%20103%20103%200%200%201-10.604%203.578%2084%2084%200%200%201-10.86%202.044v-33.985q15.715-4.6%2029.64-11.755%2013.928-7.155%2025.17-15.715zM115.016%20374.93v-35.135q18.398%2013.415%2042.93%2013.415%2015.458%200%2024.019-6.644%208.688-6.643%208.688-18.526%200-12.266-10.732-18.909-10.605-6.644-29.258-6.644H133.67v-30.918h15.715q35.774%200%2035.774-23.765%200-22.358-27.47-22.358-18.398%200-35.773%2011.882v-32.963q19.291-9.71%2044.973-9.71%2028.108%200%2043.695%2012.648%2015.715%2012.65%2015.715%2032.836%200%2035.901-36.413%2044.973v.638q19.42%202.428%2030.664%2014.182%2011.243%2011.627%2011.243%2028.62%200%2025.68-18.781%2040.628t-51.873%2014.949q-28.363%200-46.123-9.2m11.35-370.795c-25.15%200-45.397%2021.13-45.397%2047.375V67.3H50.705c-16.766%200-30.264%2014.086-30.264%2031.583v315.829c0%2017.496%2013.498%2031.582%2030.264%2031.582h363.17c16.766%200%2030.264-14.086%2030.264-31.582V98.882c0-17.496-13.498-31.582-30.264-31.582H383.61V51.509c0-26.246-20.247-47.375-45.397-47.375s-45.396%2021.13-45.396%2047.375V67.3H171.762V51.509c0-26.246-20.247-47.375-45.397-47.375m0%2031.583c8.383%200%2015.132%207.043%2015.132%2015.792v47.374c0%208.748-6.75%2015.791-15.133%2015.791s-15.132-7.043-15.132-15.791V51.509c0-8.749%206.75-15.792%2015.132-15.792m211.848%200c8.384%200%2015.132%207.043%2015.132%2015.792v47.374c0%208.748-6.748%2015.791-15.132%2015.791-8.383%200-15.132-7.043-15.132-15.791V51.509c0-8.749%206.75-15.792%2015.132-15.792M50.705%20162.05h363.17v252.663H50.705z%22%20transform%3D%22matrix(1.05736%200%200%201.0132%20-21.613%20-4.189)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background: linear-gradient(to bottom, #c5ffc3, #34ff2d, #009b6c);
}

.icon.star-icon {
    mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D'M22%209.81a1%201%200%200%200-.83-.69l-5.7-.78-2.59-4.81a1%201%200%200%200-1.76%200L8.57%208.34l-5.7.78a1%201%200%200%200-.82.69%201%201%200%200%200%20.28%201l4.09%203.73-1%205.24a1%201%200%200%200%201.46%201.12L12%2018.38l5.12%202.52a1%201%200%200%200%20.44.1%201%201%200%200%200%201-1.18l-1-5.24%204.09-3.73A1%201%200%200%200%2022%209.81'%2F%3E%3C%2Fsvg%3E");
    background: linear-gradient(to bottom, #ffae00, #fffb00, #bd5e05);
}

.icon.coinshop-icon {
    background: url(../imgs/Coin.webp) 0 0 no-repeat;
    background-size: contain;
}


.icon.token-icon {
    background: url(../imgs/Cy9r140.png) 0 0 no-repeat;
    background-size: contain;
}

.icon-down {
    width: 16px;
    z-index: -1;
    height: 16px;
    mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2048%2048%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20transform%3D%22rotate(180)%22%3E%3Cpath%20d%3D%22M0%200h48v48H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M24%2029.172%209.414%2014.586l-2.828%202.828L24%2034.828l17.414-17.414-2.828-2.828z%22%2F%3E%3C%2Fsvg%3E");
    background: CanvasText;
}

.icon-down.flipped {
    mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2048%2048%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%200h48v48H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M24%2029.172%209.414%2014.586l-2.828%202.828L24%2034.828l17.414-17.414-2.828-2.828z%22%2F%3E%3C%2Fsvg%3E");
}

#chest-label {
    max-width: 60px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: clip;
}

/* Badges */
.badge {
    position: absolute;
    width: 20px;
    height: 20px;
    place-self: unset !important;
}

.badge.premium {
    bottom: 10px;
    left: 10px;
    filter: saturate(1) brightness(1) drop-shadow(0px 0px 0.5px black) drop-shadow(0px 0px 0.5px black) drop-shadow(0px 0px 0.5px black) drop-shadow(0px 0px 0.5px black) drop-shadow(0px 0px 0.5px black);

}

.badge.new {
    width: 50%;
    height: auto;
    position: absolute;
    top: 0;
    z-index: 4;
    left: 0;
    pointer-events: none;
}

.badge.retired {
    position: absolute;
    top: 31px;
    left: -1px;
    line-height: 0;
    font-variant: all-petite-caps;
    text-shadow: 0 0 2px black;
    padding: 0px 3px;
    width: 59px;
    height: 0;
    border-top: 6px solid red;
    filter: drop-shadow(0 1px 0px black) drop-shadow(0 -1px 0px rgb(255, 66, 66));
    border-bottom: 7px solid red;
    border-right: 8px solid transparent;
    color: #fff;
}

svg~.badge.retired {
    top: 18px;
}

.hide-prices .badge.retired {
    top: 83px;
}

.badge.untradable {
    right: 8px;
    bottom: 8px;
    filter: drop-shadow(0px 0px 1px black);
}

.badge.staff {
    bottom: 7.5px;
    left: 7px;
}

.badge.removed {
    font-variant: all-petite-caps;
    background: black;
    width: -webkit-fill-available;
    text-align: center;
    bottom: -1px;
    border-top: 1px dashed white;
    font-family: 'Lora';
    font-weight: 600;
    color: #fff;
    letter-spacing: 2px;
    margin: 0px -1px;

    border-radius: 0 0 14px 14px;

    @supports (corner-shape: squircle) {
        corner-shape: squircle;
        border-radius: 26px;
    }
}

/* Category Carousel */
.category-carousel-container {
    position: relative;
    overflow: hidden;
}

.category-carousel {
    display: flex;
    perspective: 7cm;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 155px;
    padding-top: 10px;
    transform-style: preserve-3d;
}

a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
    color: CanvasText;
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: var(--bg-item);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.carousel-nav:hover {
    background: var(--border-color);
    transform: translateY(-50%) scale(1.1);
}

.carousel-nav.prev {
    left: 10%;
}

.carousel-nav.next {
    right: 10%;
}

.carousel-nav::after {
    content: '';
    width: 12px;
    height: 12px;
    border-right: 3px solid CanvasText;
    border-bottom: 3px solid CanvasText;
}

.carousel-nav.prev::after {
    transform: rotate(135deg);
    margin-left: 7px;
}

.carousel-nav.next::after {
    transform: rotate(-45deg);
    margin-right: 4px;
}






/* ============================================
           ENHANCED CAROUSEL ANIMATIONS
============================================ */

/* Floating animation for active item */
@keyframes floatActive {

    0%,
    100% {
        transform: translateX(0) scale(1.2) translateY(0px);
    }

    50% {
        transform: translateX(0) scale(1.2) translateY(-10px);
    }
}



/* Pulse glow for active category */
@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 20px 40px var(--shadow-color);
    }

    50% {
        box-shadow: 0 25px 50px var(--shadow-color),
            0 0 30px rgba(102, 126, 234, 0.3);
    }
}


.category-item {
    position: absolute;
    width: 100px;
    height: 100px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: var(--bg-item);
    backdrop-filter: blur(20px);
    border: 2px solid var(--border-color);
    animation: carouselEntry 1s ease backwards;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        z-index 0.5s step-end;
    will-change: transform, opacity;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}


.category-item img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    transition: filter 0.3s ease, width 0.3s ease, height 0.3s ease;
    filter: brightness(1) grayscale(0.5) opacity(0.7);
    will-change: filter;
}

.category-item small {
    font-variant: all-petite-caps;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}


.category-item[data-pos="0"] img {
    width: 70px;
    height: 70px;
    filter: none;
}

.category-item[data-pos="0"] {
    transform: translate3d(0px, 0px, 17px) rotateY(0deg) scale(1.2);
    opacity: 1;
    z-index: 3;
    background: var(--border-color);
    box-shadow: 0 20px 40px var(--shadow-color);
}

.category-item[data-pos="0"] small {
    font-size: 14px;
    margin-top: -10px;
}

.category-item[data-pos="-2"] {
    transform: translate3d(-229px, 0px, -17px) rotateY(34deg) scale(0.85);
    z-index: 1;
    opacity: 0.6;
}

.category-item[data-pos="-1"] {
    transform: translate3d(-110px, 0px, 0px) rotateY(34deg) scale(0.95);
    z-index: 2;
    opacity: 0.8;
}

.category-item[data-pos="1"] {
    transform: translate3d(110px, 0px, 0px) rotateY(-34deg) scale(0.95);
    z-index: 2;
    opacity: 0.8;
}

.category-item[data-pos="2"] {
    transform: translate3d(229px, 0px, -17px) rotateY(-34deg) scale(0.85);
    z-index: 1;
    opacity: 0.6;
}

/* Hide items beyond visible range */
.category-item[data-pos="-3"],
.category-item[data-pos="3"],
.category-item:not([data-pos="-2"]):not([data-pos="-1"]):not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]) {
    transform: translate3d(0px, 0px, -100px) scale(0.5);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

/* Initial load animation */
@keyframes carouselEntry {
    0% {
        opacity: 0;
        scale: 0.6;
    }

    100% {
        opacity: 1;
        scale: 1;
    }
}

.category-item:nth-child(1) {
    animation-delay: 0.1s;
}

.category-item:nth-child(2) {
    animation-delay: 0.2s;
}

.category-item:nth-child(3) {
    animation-delay: 0.3s;
}

.category-item:nth-child(4) {
    animation-delay: 0.4s;
}

.category-item:nth-child(5) {
    animation-delay: 0.3s;
}

.category-item:nth-child(6) {
    animation-delay: 0.2s;
}

/* Icon animation on hover */
.category-item:hover img {
    animation: squishy .4s ease-in-out alternate;
}

@keyframes squishy {

    from,
    to {
        scale: 1;
    }

    50% {
        scale: 0.9;
    }
}



/* Particle effect on selection */
@keyframes selectPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.category-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 20px;
    border: 2px solid currentColor;
    opacity: 0;
    pointer-events: none;
}

.category-item.selecting::after {
    animation: selectPulse 0.6s ease-out;
}


@keyframes slideDown {
    from {
        opacity: 0;
        transform: translate(-50%, -100%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}


/* Controls Bar */
.controls-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-secondary);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}



.recent-items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    margin-top: 5px;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    width: -webkit-fill-available;
    z-index: 200;
    box-shadow: 0 10px 30px var(--shadow-color);
}

.recent-items.show {
    display: inline-table;
}

.recent-item {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.recent-item:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

.recent-item:hover {
    background: var(--border-color);
}

.recent-item img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    object-fit: contain;
}

/* Sort Dropdown */
.sort-dropdown,
.season-dropdown {
    position: relative;
}

.dropdown-btn {
    font-variant-emoji: text;
    padding: 10px 20px;
    background: var(--bg-item);
    border: 2px solid var(--border-color);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.dropdown-btn:hover {
    background: var(--border-color);
}

.tag-count {
    justify-self: flex-end;
    margin-left: auto;
    color: var(--border-color);
}

.dropdown-item {
    font-variant-emoji: text;
    display: inline-flex;
    width: 183px;
    white-space: nowrap;
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.2s;
    align-items: center;
    gap: 7px;
    border-bottom: 1px solid var(--border-color);
    flex-direction: row;
}

.filter-page>* {
    border-left: 1px solid var(--border-color);
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item.selected {
    background: #2d70c3ba;
}

.dropdown-item.selected:hover {
    background: #1e5faaa8
}

.dropdown-item.disabled {
    opacity: 0.5;
    pointer-events: none;
    background: var(--border-color);
}


.tag-checkbox {
    margin-left: 3px;
    width: 18px;
    min-width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.dropdown-item.selected .tag-checkbox {
    background: #667eea;
    border-color: #667eea;
}



.dropdown-item.selected .tag-checkbox::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.dropdown-item .filter-count {
    right: 10px;
    position: absolute;
    color: var(--border-color);
    font-size: 12px;
}

.filters-dropdown {
    position: relative;
    display: inline-block;
}

.clear-filters-btn {
    padding: 10px 16px;
    cursor: pointer;
    font-weight: 600;
    color: #ff6b6b;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.clear-filters-btn:hover {
    background-color: rgba(255, 107, 107, 0.1);
}

.clear-filters-btn span {
    font-weight: bold;
}

.dropdown-item:hover {
    background: var(--border-color);
}

.dropdown-item.active {
    background: #667eea;
    color: white;
}

.dropdown-item[data-filter="retired"] {
    display: none;
}

.dropdown-item[data-filter="retired"].show-retired {
    display: flex;
}

.dropdown-item[data-filter="weekly"] {
    display: none;
}

.dropdown-item[data-filter="weekly"].show-weekly {
    display: flex;
}

/* Filter grouping styles */
.filter-group-label {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    opacity: 0.7;
    pointer-events: none;
}

.filter-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* Sub-filter indentation */
.dropdown-item.sub-filter {
    padding-left: 24px;
    position: relative;
}

.dropdown-item.sub-filter::before {
    content: '↳';
    position: absolute;
    left: 8px;
    opacity: 0.5;
    font-size: 12px;
}

/* Custom scroll indicators */
.filters-scroll-container {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Hide default scrollbar */
.filters-scroll-container::-webkit-scrollbar {
    width: 0;
    display: none;
}

.filters-scroll-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scroll-indicator {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
    background: linear-gradient(to bottom, rgba(102, 126, 234, 0.1), rgba(102, 126, 234, 0.05));
    border: none;
    transition: all 0.2s ease;
    position: sticky;
    z-index: 10;
}

.scroll-indicator.scroll-top {
    top: 0;
    border-bottom: 1px solid var(--border-color);
}

.scroll-indicator.scroll-bottom {
    bottom: 0;
    border-top: 1px solid var(--border-color);
}

.scroll-indicator.visible {
    display: flex;
}

.scroll-indicator:hover {
    background: linear-gradient(to bottom, rgba(102, 126, 234, 0.2), rgba(102, 126, 234, 0.1));
}

.scroll-indicator svg {
    width: 20px;
    height: 20px;
    fill: #667eea;
    transition: transform 0.2s ease;
}

.scroll-indicator:hover svg {
    transform: scale(1.2);
}

.scroll-indicator.scroll-top:hover svg {
    animation: bounce-up 0.6s ease infinite;
}

.scroll-indicator.scroll-bottom:hover svg {
    animation: bounce-down 0.6s ease infinite;
}

@keyframes bounce-up {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes bounce-down {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }
}

/* Mobile-centered modal and page navigation */
@media (max-width: 768px) {
    .dropdown-content {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 400px;
        max-height: 80vh;
        overflow: hidden;
    }


    /* Remove grid layout on mobile */
    #filters-menu.show {
        grid-template-rows: none !important;
        grid-auto-flow: initial !important;
    }
}

/* Filter page navigation system */
.filter-page {

    grid-template-rows: repeat(9, auto);
    grid-auto-flow: column;
    display: none;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    width: 100%;
    height: 100%;
}

.filter-page.active {
    display: grid;
    opacity: 1;
    transform: translateX(0);
}

.filter-page.sliding-out-left {
    transform: translateX(-100%);
    opacity: 0;
}

.filter-page.sliding-in-right {
    animation: slideInFromRight 0.3s ease forwards;
}

.filter-page.sliding-out-right {
    animation: slideOutToRight 0.3s ease forwards;
}

.filter-page.sliding-in-left {
    animation: slideInFromLeft 0.3s ease forwards;
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutToRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutToLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

/* Page header with back button */
.page-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 2px solid var(--border-color);
    background: linear-gradient(to bottom, rgba(102, 126, 234, 0.1), transparent);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    color: inherit;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.back-btn:hover {
    background: var(--border-color);
    transform: translateX(-2px);
}

.back-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.page-title {
    margin-left: 16px;
    font-size: 18px;
    font-weight: 600;
    color: #667eea;
}

.page-content {
    padding: 8px 0;
}

.filters-dropdown .dropdown-btn .filter-count {
    background: #667eea;
    color: white;
    padding: 2px 6px;
    border-radius: 12px;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}


.filters-dropdown .submenu {
    display: inline-flex;
    width: -webkit-fill-available;
    padding: 10px 15px;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.2s;
    align-items: center;
    gap: 10px;
}

.filters-dropdown .submenu:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

.dropdown-content::-webkit-scrollbar {
    width: 10px;
}

.dropdown-content::-webkit-scrollbar-thumb {
    background: #b3b3b3;
    box-shadow: inset -2px -2px 5px 0 rgb(0 0 0 / 31%);
    border: 2px solid #000000;
    border-radius: 10px;
}

#season-label,
#favs-label {
    text-align: center;
}

.submenu.dropdown-content {
    height: 330px;
    top: 205px;
}

.dropdown-content {
    position: fixed;
    top: calc(200%);
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    z-index: 200;
    box-shadow: 0 10px 30px var(--shadow-color);
    animation: slideDown 0.3s ease;
}

.dropdown-content>* {
    border-right: 1px solid var(--border-color);
}

#loadMore:not([disabled]) {
    color: #fffcee;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s;
}

.dropdown-content.show {
    display: grid;
    grid-template-rows: repeat(8, auto);
    grid-auto-flow: column;
}

#season-menu {
    height: 286px;
    grid-template-rows: repeat(7, auto);
}

#event-menu {
    grid-template-rows: repeat(6, auto);
    height: 245px;
}

/* Smart positioning classes */
.dropdown-content.align-right {
    left: auto;
    right: 0;
}

.dropdown-content.align-left {
    left: 0;
    right: auto;
}

.dropdown-content.flip-up {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 5px;
}


.sort-dropdown,
.season-dropdown,
.filters-dropdown {
    position: relative;
    display: inline-block;
}



#scammer-jumpscare {
    position: fixed;
    top: 0;
    left: 0;
    transform: scale(1);
    width: 100%;
    height: 100vh;
    background: #000;
    z-index: 999999;
    display: flex;
    opacity: 0;
    justify-content: center;
    align-items: center;
    animation: scareFlash 0.1s infinite;
    transition: opacity 0.1s 1.4s ease-in-out;
    pointer-events: none;

    @starting-style {
        opacity: 1;
    }
}


.profile-dropdown-roles {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
    background: var(--bg-secondary);
    color: var(--text-secondary);
}



.role-badge.primary {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px 4px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    @supports (corner-shape: squircle) {
        corner-shape: squircle;
        border-radius: 26px;
    }
}

/* Secondary role icons (minimized) */
.role-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-secondary);
    cursor: help;
    transition: transform 0.2s ease;
}

.role-icon:hover {
    transform: scale(1.15);
}

.role-icon svg {
    fill: currentColor;
    width: 14px;
    height: 14px;
}

.role-badge.admin,
.role-icon.admin {
    background: linear-gradient(135deg, #ff4757, #b91b00);
    color: white;
    font-weight: 1000;
    font-family: BuilderSans;
}

.role-badge.moderator,
.role-icon.moderator {
    background: linear-gradient(135deg, #FF8FF3, #641bb5);
    color: #132559;
    border-radius: 5px;

    @supports (corner-shape: bevel) {
        corner-shape: bevel;
    }
}

.role-badge.vip,
.role-icon.vip {
    background: linear-gradient(135deg, #ffd700, #ffb700);
    color: #a36d18;
    border-radius: 4px;

    @supports (corner-shape: scoop) {
        corner-shape: scoop;
    }
}

.role-badge.donator,
.role-icon.donator {
    background: linear-gradient(135deg, #2ad9cb, #0c4cc3);
    color: #fff;

    @supports (corner-shape: superellipse(0.4)) {
        corner-shape: superellipse(0.4);
        border-radius: 10px;
    }

    filter: drop-shadow(0px 0px 6px black);
}

.role-badge.scammer,
.role-icon.scammer {
    background: linear-gradient(135deg, #2d3436, #636e72);
    color: #ff4757;
    animation: shake 0.5s infinite;

    @supports (corner-shape: squircle) {
        corner-shape: squircle;
        border-radius: 32px;
    }
}

@keyframes shake {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-5deg);
    }

    75% {
        transform: rotate(5deg);
    }
}

/* User (default) styles */
.role-badge:not(.admin):not(.moderator):not(.vip):not(.donator):not(.scammer) {
    background: rgb(from CanvasText r g b / 0.2);
    color: var(--text-secondary);
}

.role-icon:not(.admin):not(.moderator):not(.vip):not(.donator):not(.scammer) {
    background: rgb(from CanvasText r g b / 0.2);
    color: var(--text-secondary);
}





.stats-dashboard {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.25s ease allow-discrete;
    translate: 0 -20px;


}

.image-explosion {
    transform: scale(1) translate(-50%, -50%);
    opacity: 1;
    transition: all 0.24s cubic-bezier(.77, 1.12, .57, 1.25);

    @starting-style {
        opacity: 0;
        transform: scale(0) translate(-50%, -50%);
    }
}

.stats-dashboard.show {
    display: flex;
    translate: 0 0px;
    opacity: 1;

    @starting-style {
        opacity: 0;
        translate: 0 20px;
    }
}

.stats-content {
    background: var(--bg-secondary);
    border-radius: 20px;
    padding: 20px 30px;
    border: 1px solid var(--border-color);
    outline: 5px solid #000000;
    max-width: 700px;
    width: 90%;
    max-height: 80vh;
    overflow-y: hidden;
    overflow-x: hidden;
    position: relative;
}

.stats-content::-webkit-scrollbar {
    width: 10px;
}

.profile-tax-mode,
.profile-dropdown-divider {
    transition: all 0.2s 0.2s, opacity 0.2s 0.3s;
    max-height: 80px;
    overflow: hidden;
    opacity: 1;
}

.hide-prices .profile-tax-mode,
.hide-prices .profile-tax-mode~.profile-dropdown-divider {
    transition: all 0.2s 0.2s, opacity 0.2s;
    max-height: 0px;
    opacity: 0;
}

.hide-prices .profile-tax-mode~.profile-dropdown-divider {
    margin: 0;
}

.stats-content::-webkit-scrollbar-thumb {
    background-image: repeating-linear-gradient(-45deg, #ed2c6d 0 20px, #ffbc00 20px 40px);
    box-shadow: inset 2px 2px 5px 0 rgb(255 255 255 / 50%);
    border-radius: 100px;
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.stats-header h1 {
    letter-spacing: 2px;
    font-family: pacifico;
    margin: 0;
}

.close-stats {
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.14s ease;
    border: 2px solid var(--border-color);
    padding: 3px 12px;
    border-radius: 200px;
}

.close-stats:hover {
    color: CanvasText;
    border-color: var(--bg-item-hover);
    background: var(--bg-item-hover);
}

#wishlist-tab,
#favorites-tab {
    transition: opacity 0.3s ease, letter-spacing 0.37s cubic-bezier(.47, 1.64, .41, .8);
    opacity: 0.5;
}

#wishlist-tab:hover,
#favorites-tab:hover {
    opacity: 1 !important;
}

#wishlist-tab:active,
#favorites-tab:active {
    letter-spacing: -1px;
    transition: opacity 0.3s ease, letter-spacing 0.22s cubic-bezier(.62, -0.01, .37, 1.12);
}

#wishlist-tab.active,
#favorites-tab.active {
    letter-spacing: 2.5px;
    opacity: 1 !important;
}




.wishlist-section {
    border: 3px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 0px 0px;
    max-height: 37vh;
    overflow-y: auto;
}

.wishlist-section::-webkit-scrollbar-track {
    background: linear-gradient(transparent 82%, Canvas 86%, var(--bg-secondary));
}

.wishlist-section::-webkit-scrollbar {
    width: 12px;
}

.wishlist-section::-webkit-scrollbar-thumb {
    background: #8a8a8a65;
    border: 3px solid var(--bg-secondary);
    border-radius: 100px;
}

.view-all-button {
    margin-top: 7px;
    float: inline-end;
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #22779b;
    border: none;
    font-weight: 600;
    font-variant: all-petite-caps;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 7px;
    white-space: break-spaces;
}

.wishlist-section:has(.item:nth-child(10))~.view-all-button {
    display: flex;
}

.view-all-button svg {
    fill: currentColor;
    transition: all 0.3s ease;
}

.view-all-button:hover {
    margin-right: 4px;
    color: #33afe4;
}

.view-all-button:active {
    margin-right: 4px;
}

.light-theme .discord img {
    filter: invert(1);
}


.recent-section {
    margin-top: 25px;
}

.recent-section:has(#recent-viewed-items:empty) {
    display: none;
}

.wishlist-total {
    font-variant: all-petite-caps;
    color: var(--text-secondary);
    background: linear-gradient(transparent, var(--bg-secondary) 16px, Canvas);
    padding: 26px 15px 14px 15px;
    text-align: center;
    position: sticky;
    width: 100%;
    bottom: 0px;
    filter: drop-shadow(0px -2px 4px var(--shadow-color));
    z-index: 3;
    font-weight: 600;
}



#wishlist-value {
    font-variant: traditional;
    font-family: 'BuilderSans';
    color: CanvasText;
}

svg {
    fill: CanvasText;
}

header svg * {
    pointer-events: none;
}


.price-toggle {
    width: 31px;
    height: 30px;
    background: var(--bg-item);
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid var(--border-color);
    opacity: 0.75;
    position: relative;
}

.price-toggle:hover {
    width: 60px;
    opacity: 1;
}

.price-toggle::before {
    content: '$';
    width: 17px;
    font-weight: 600;
    line-height: 0.1;
    position: absolute;
    left: 5px;
    top: 49%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

.hide-prices .price-toggle:hover::before {
    left: 34px;
}

.hide-prices .price-toggle::before {
    color: #ff5353;
}

/* Scammers list */
@keyframes scareFlash {

    0%,
    100% {
        background: #000;
    }

    50% {
        background: #330000;
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0) rotate(0deg);
    }

    25% {
        transform: translateX(-10px) rotate(-2deg);
    }

    75% {
        transform: translateX(10px) rotate(2deg);
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

@keyframes glitchEffect {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-5px, 5px);
    }

    40% {
        transform: translate(-5px, -5px);
    }

    60% {
        transform: translate(5px, 5px);
    }

    80% {
        transform: translate(5px, -5px);
    }

    100% {
        transform: translate(0);
    }
}

@keyframes spin720 {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 720deg;
    }
}

@keyframes floatAnim {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-4px)
    }
}




.profile-dropdown-role.scammer {
    background: linear-gradient(135deg, #ff0000, #8b0000);
    color: white;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
    animation: scammerPulse 2s infinite;
    border: 2px solid #ff0000;
}

@keyframes scammerPulse {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
        transform: scale(1.05);
    }
}

/* Flash border on profile dropdown for scammers */
.profile-dropdown-header:has(+ .profile-dropdown-info .scammer) {
    border: 2px solid red;
    animation: warningBorder 1s infinite;
}

@keyframes warningBorder {

    0%,
    100% {
        border-color: red;
    }

    50% {
        border-color: darkred;
    }
}



#auth-button {
    position: absolute;
    top: 20px;
    right: 10px;
    left: unset;
}

@media screen and (max-width: 768px) {
    #user-profile-btn {
        right: unset;
        top: unset;
        left: unset;
        position: unset;
    }

    #auth-button {
        position: unset;
        top: unset;
        right: unset;
        left: unset;
    }
}

@media (hover: none) {

    .heart-button,
    .wishlist-button {
        pointer-events: none;
    }

    .item:hover {
        transform: translateY(-5px) scale(1.08) rotate(2deg);
        background: var(--bg-item);
        box-shadow: 0 0px 0px var(--shadow-color), inset -2px -2px 4px var(--edges-color);
    }

    .item:hover .wishlist-button {
        opacity: 0;
    }

    .item:hover .wishlist-button.active {
        opacity: 1;
    }

    .item:hover .heart-button {
        opacity: 0;
    }

    .item:hover .heart-button.red {
        opacity: 1;
    }




    button,
    .btn,
    a,
    [onclick] {
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        cursor: pointer;
    }
}

@media screen and (max-width: 1000px) {

    .category-item[data-pos="-2"],
    .category-item[data-pos="2"] {
        display: none;
    }

    .carousel-nav.prev {
        left: 20px;
    }

    .carousel-nav.next {
        right: 20px;
    }

}

/* Responsive */
@media (max-width: 768px) {

    .wishlist-total {
        font-variant: all-petite-caps;
        color: var(--text-secondary);
        background: #6f6f6f70;
        padding: 1px 14px 7px;
        border: 3px solid var(--border-color);
        border-radius: 15px;
        text-align: center;
        backdrop-filter: blur(48px);
        position: sticky;
        box-shadow: inset 0 0 20px 0px #bccbc8bf, 0 0 9px 1px var(--shadow-color);
        width: fit-content;
        bottom: 6px;
        float: right;
        right: 6px;
        z-index: 3;
        font-weight: 600;
    }

    div#random-items-grid {
        transform: scale(1.2);
        transform-origin: top center;
    }

    .chest-expand-toggle {
        display: inline-flex;
    }

    #chest-menu {
        left: -100px;
    }

    #user-profile-btn {
        font-size: 12px;
        top: unset;
        right: unset;
        position: unset;
    }


    .stat-card {
        padding: 12px 8px;
    }


    .catalog-grid,
    .items-grid {
        zoom: 0.87;
        transform-origin: top center;
    }

    .info-cards-row {
        grid-template-columns: 1fr;
    }

    .info-card.refresh {
        width: unset;
    }

    #recent-viewed-items .item:nth-child(5) {
        display: none;
    }

    .stats-content {
        padding: 12px 17px;
        width: -webkit-fill-available;
        margin: 14px;
    }

    .category-carousel-container {
        transform: scale(0.8);
        transform-origin: top center;
    }


}

@media (max-width: 480px) {
    .catalog-container {
        padding: 12px;
    }

    #recent-viewed-items .item:nth-child(4) {
        display: none;
    }

    .catalog-grid,
    .items-grid {
        zoom: 0.75;
        transform-origin: top center;
    }
}

/* Long-press Context Menu */
.item-context-menu {
    position: fixed;
    background: rgb(255 255 255 / 21%);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    border: 2px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 10001;
    min-width: 220px;
    animation: contextMenuFadeIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: top left;

    @supports (corner-shape: squircle) {
        corner-shape: squircle;
        border-radius: 85px;
    }
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.context-menu-item[data-action="wishlist"]::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data: image/svg+xml, %3Csvg%20fill%3D%22%23fff%22%20viewBox%3D%220%200.5%2036%2036%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M34%2016.78a2.22%202.22%200%200%200-1.29-4l-9-.34a.23.23%200%200%201-.2-.15l-3.11-8.4a2.22%202.22%200%200%200-4.17%200l-3.1%208.43a.23.23%200%200%201-.2.15l-9%20.34a2.22%202.22%200%200%200-1.29%204l7.06%205.55a.23.23%200%200%201%20.08.24l-2.43%208.61a2.22%202.22%200%200%200%203.38%202.45l7.46-5a.22.22%200%200%201%20.25%200l7.46%205a2.2%202.2%200%200%200%202.55%200%202.2%202.2%200%200%200%20.83-2.4l-2.45-8.64a.22.22%200%200%201%20.08-.24Z%22%2F%3E%3C%2Fsvg%3E");
}

.context-menu-item[data-action="wishlist"].active::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data: image/svg+xml, %3Csvg%20fill%3D%22gold%22%20viewBox%3D%220%200.5%2036%2036%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M34%2016.78a2.22%202.22%200%200%200-1.29-4l-9-.34a.23.23%200%200%201-.2-.15l-3.11-8.4a2.22%202.22%200%200%200-4.17%200l-3.1%208.43a.23.23%200%200%201-.2.15l-9%20.34a2.22%202.22%200%200%200-1.29%204l7.06%205.55a.23.23%200%200%201%20.08.24l-2.43%208.61a2.22%202.22%200%200%200%203.38%202.45l7.46-5a.22.22%200%200%201%20.25%200l7.46%205a2.2%202.2%200%200%200%202.55%200%202.2%202.2%200%200%200%20.83-2.4l-2.45-8.64a.22.22%200%200%201%20.08-.24Z%22%2F%3E%3C%2Fsvg%3E");
}

.context-menu-item[data-action="favorite"]::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml, %3Csvg%20viewBox%3D%220.5%20-0.5%2017%2017%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.958%201.03a4.015%204.015%200%200%200-3.911%203.148A4.054%204.054%200%200%200%205.102%201.03c-2.237%200-4.05%201.824-4.05%204.072%200%206.496%208.005%209.838%208.005%209.838s7.912-3.258%207.912-9.879c0-2.228-1.795-4.031-4.011-4.031%22%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
}

.context-menu-item[data-action="favorite"].active::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data: image/svg+xml, %3Csvg%20viewBox%3D%220.5%20-0.5%2017%2017%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.958%201.03a4.015%204.015%200%200%200-3.911%203.148A4.054%204.054%200%200%200%205.102%201.03c-2.237%200-4.05%201.824-4.05%204.072%200%206.496%208.005%209.838%208.005%209.838s7.912-3.258%207.912-9.879c0-2.228-1.795-4.031-4.011-4.031%22%20fill%3D%22red%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
}

.context-menu-item:not(:last-child) {
    border-bottom: 1px solid var(--text-secondary);
}

.context-menu-item:hover {
    background: rgb(255 255 255 / 20%);
    transform: translateX(2px);
}

.context-menu-item:active {
    background: rgb(255 255 255 / 30%);
    transform: scale(0.98);
}

.context-menu-icon {
    font-size: 20px;
    line-height: 1;
    width: 24px;
    text-align: center;
}

/* Prevent text selection during long press */
.item.long-pressing {
    user-select: none;
    -webkit-user-select: none;
}

/* Add visual feedback during long press */
@keyframes longPressScale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.95);
    }

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