@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&family=Unbounded:wght@700;900&display=swap');

:root {
    --bg: #171317;
    --bg2: #1e1a1e;
    --bg3: #262126;
    --bg4: #2f2a2f;
    --orange: #ff8c1a;
    --gold: #ffb800;
    --neon-orange: #ff8c1a;
    --green-lightning: #00ff88;
    --border: rgba(255, 255, 255, .05);
    --border-active: rgba(255, 184, 0, 0.4);
    --text: #ffffff;
    --text2: #e0e0e0;
    --text3: #b0b0b0;
    --accent: #ffb800;
    --accent2: #ff8c1a;
    --accent-glow: rgba(255, 184, 0, .2);
    --blue: #3b82f6;
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 24px;
    --radius-md: 16px;
    --glass: rgba(23, 19, 23, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-glow: rgba(23, 19, 23, 0.05);
    --font: 'Outfit', 'Golos Text', sans-serif;
    --font-display: 'Outfit', sans-serif;
    --nav-height: 68px;
    --red: #ef4444;

    --reel-item-h: 160px;
    --reel-item-w: 300px;

    /* Premium Rarity Colors */
    --rarity-common: #828ca0;
    --rarity-epic: #a855f7;
    --rarity-legendary: #ffae00;
    --rarity-mythic: #ff00ff;
    --rarity-ultimate: #facc15;
    --rarity-ultimate: #facc15;
}

/* VERTICAL REEL STYLES */
.reel-viewport {
    position: relative;
    width: var(--reel-item-w);
    height: 520px;
    /* Larger focus area */
    background: var(--bg);
    border-radius: 24px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.9),
        0 0 30px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reel-viewport.heroic {
    width: 320px;
    height: 550px;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
    /* Lighter shadow to show item colors */
}

.reel-viewport.heroic.rarity-common {
    border-color: var(--rarity-common);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(130, 140, 160, 0.3);
}

.reel-viewport.heroic.rarity-rare {
    border-color: var(--blue);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(59, 130, 246, 0.3);
}

.reel-viewport.heroic.rarity-epic {
    border-color: var(--rarity-epic);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(168, 85, 247, 0.3);
}

.reel-viewport.heroic.rarity-legendary {
    border-color: var(--rarity-legendary);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 174, 0, 0.3);
}

.reel-viewport.heroic.rarity-mythic {
    border-color: var(--rarity-mythic);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 0, 255, 0.3);
}

.reel-viewport.heroic.rarity-ultimate {
    border-color: var(--rarity-ultimate);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(250, 204, 21, 0.3);
}

.reel-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    will-change: transform;
    display: flex;
    flex-direction: column;
}

.reel-item {
    width: 100%;
    height: var(--reel-item-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: opacity 0.4s, transform 0.4s;
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
}

.reel-item.blur {
    opacity: 0.2;
    filter: blur(1px) grayscale(0.5);
    transform: scale(0.9);
}

.reel-item-img-wrap {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 8px;
}

.reel-item-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3)) brightness(1.1);
}

.reel-item-name {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    text-align: center;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reel-item-rarity-label {
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

/* Pointers (Indicators) - Gray during spin, color on win */
.reel-pointer {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 8px;
    height: 70px;
    background: #444;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: background 0.4s, box-shadow 0.4s;
    .premium-sticker-svg {
        stroke: var(--gold);
        filter: drop-shadow(0 0 4px rgba(255, 184, 0, 0.5));
    }
    .pd-menu-item:hover .premium-sticker-svg {
        stroke: #fff;
    }
    /* Enhanced sticker effect */
    .premium-sticker-svg {
        padding: 1px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.05);
    }
}

.reel-pointer.is-winner {
    background: var(--rarity-color, var(--accent));
    box-shadow: 0 0 25px var(--rarity-color, var(--accent));
}

.reel-viewport.rarity-common {
    --rarity-color: var(--rarity-common);
}

.reel-viewport.rarity-rare {
    --rarity-color: var(--blue);
}

.reel-viewport.rarity-epic {
    --rarity-color: var(--rarity-epic);
}

.reel-viewport.rarity-legendary {
    --rarity-color: var(--rarity-legendary);
}

.reel-viewport.rarity-mythic {
    --rarity-color: var(--rarity-mythic);
}

.reel-viewport.rarity-ultimate {
    --rarity-color: var(--rarity-ultimate);
}

.pointer-left {
    left: -2px;
    border-radius: 0 8px 8px 0;
}

.pointer-right {
    right: -2px;
    border-radius: 8px 0 0 8px;
}

/* Overlays for smooth fade out at edges */
.reel-overlay-top,
.reel-overlay-bottom {
    position: absolute;
    left: 0;
    right: 0;
    height: 180px;
    /* Deeper fade */
    z-index: 20;
    pointer-events: none;
}

.reel-overlay-top {
    top: 0;
    background: linear-gradient(to bottom, var(--bg) 0%, rgba(23, 19, 23, 0.6) 30%, transparent 100%);
}

.reel-overlay-bottom {
    bottom: 0;
    background: linear-gradient(to top, var(--bg) 0%, rgba(23, 19, 23, 0.6) 30%, transparent 100%);
}

/* Social Icons in Navbar */
.nav-socials {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 15px;
}

.social-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text2);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.social-icon-link:hover {
    background: rgba(255, 184, 0, 0.15);
    color: var(--gold);
    border-color: rgba(255, 184, 0, 0.3);
    transform: translateY(-2px);
}

.social-icon-link svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .nav-socials {
        display: none;
        /* Hide on mobile to save space */
    }

    .mobile-hidden {
        display: none !important;
    }
}

.reel-item.rarity-common .reel-item-rarity-label {
    color: var(--rarity-common);
}

.reel-item.rarity-common .reel-item-img-wrap {
    border-color: rgba(130, 140, 160, 0.5);
    box-shadow: 0 0 12px rgba(130, 140, 160, 0.15), inset 0 0 20px rgba(130, 140, 160, 0.05);
}

.reel-item.rarity-common {
    background: radial-gradient(circle at 50% 40%, rgba(130, 140, 160, 0.4) 0%, transparent 95%);
}

.reel-item.rarity-rare .reel-item-rarity-label {
    color: var(--blue);
}

.reel-item.rarity-rare .reel-item-img-wrap {
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.25), inset 0 0 20px rgba(59, 130, 246, 0.08);
}

.reel-item.rarity-rare {
    background: radial-gradient(circle at 50% 40%, rgba(59, 130, 246, 0.45) 0%, transparent 95%);
}

.reel-item.rarity-epic .reel-item-rarity-label {
    color: var(--rarity-epic);
}

.reel-item.rarity-epic .reel-item-img-wrap {
    border-color: rgba(168, 85, 247, 0.6);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3), inset 0 0 20px rgba(168, 85, 247, 0.08);
}

.reel-item.rarity-epic {
    background: radial-gradient(circle at 50% 40%, rgba(168, 85, 247, 0.5) 0%, transparent 95%);
}

.reel-item.rarity-legendary .reel-item-rarity-label {
    color: var(--rarity-legendary);
}

.reel-item.rarity-legendary .reel-item-img-wrap {
    border-color: rgba(255, 174, 0, 0.7);
    box-shadow: 0 0 25px rgba(255, 174, 0, 0.35), inset 0 0 20px rgba(255, 174, 0, 0.1);
}

.reel-item.rarity-legendary {
    background: radial-gradient(circle at 50% 40%, rgba(255, 174, 0, 0.55) 0%, transparent 95%);
}

.reel-item.rarity-mythic .reel-item-rarity-label {
    color: var(--rarity-mythic);
}

.reel-item.rarity-mythic .reel-item-img-wrap {
    border-color: rgba(255, 0, 255, 0.6);
    box-shadow: 0 0 25px rgba(255, 0, 255, 0.3), inset 0 0 20px rgba(255, 0, 255, 0.08);
}

.reel-item.rarity-mythic {
}

.reel-item.rarity-ultimate .reel-item-rarity-label {
    color: var(--rarity-ultimate);
}

.reel-item.rarity-ultimate .reel-item-img-wrap {
    border-color: rgba(250, 204, 21, 0.7);
    box-shadow: 0 0 30px rgba(250, 204, 21, 0.4), inset 0 0 25px rgba(250, 204, 21, 0.12);
}

/* Removed old gradients for minimalist look */

/* REEL GRID FOR MULTI-OPEN */
.reel-mode-multi {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.reel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 200px));
    gap: 12px;
    padding: 15px;
    width: 100%;
    max-width: 1100px;
    justify-content: center;
    justify-items: center;
    margin: 0 auto;
}

.reel-grid .reel-viewport.mini {
    width: 195px;
    height: 360px;
    --reel-item-h: 150px;
    background: var(--bg);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.reel-grid .mini .reel-item {
    /* Background is handled by .reel-item.rarity-X classes */
}

.reel-grid .mini .reel-item-img-wrap {
    width: 85px;
    height: 85px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
}

.reel-grid .mini .reel-item-img {
    width: 65px;
    height: 65px;
    filter: brightness(1.15) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.reel-grid .mini .reel-item-name {
    font-size: 12px;
}

.reel-grid .mini .reel-item-rarity-label {
    font-size: 9px;
}

/* SELL BUTTON ENHANCEMENT */
.btn-sell-active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #10b981 !important;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3) !important;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

@media (max-width: 768px) {
    .reel-grid {
        grid-template-columns: repeat(5, 1fr) !important; /* Force 5 columns to match desktop x10 layout */
        gap: 6px !important;
        padding: 10px 5px !important;
        max-height: 85vh !important;
        width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        justify-items: center !important;
    }

    /* MUHIM: Mini reel overlaylarni butunlay o'chirish — 180px overlay 140px viewport ni to'liq yopadi */
    .reel-grid .reel-viewport.mini .reel-overlay-top,
    .reel-grid .reel-viewport.mini .reel-overlay-bottom {
        display: none !important;
    }

    .reel-grid .reel-viewport.mini {
        width: 65px !important;
        height: 170px !important;
        --reel-item-h: 70px !important;
        border-width: 1px !important;
        border-radius: 10px !important;
        background: #1e1610 !important;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3) !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
    }

    .reel-grid .mini .reel-item-img-wrap {
        width: 45px !important;
        height: 45px !important;
        border-width: 1px !important;
        border-radius: 8px !important;
        margin-bottom: 4px !important;
    }

    .reel-grid .mini .reel-item-img {
        width: 35px !important;
        height: 35px !important;
    }

    .reel-grid .mini .reel-item-name {
        font-size: 8px !important;
        white-space: nowrap !important;
        max-width: 55px !important;
    }

    .reel-grid .mini .reel-item-rarity-label {
        font-size: 7px !important;
        margin-bottom: 1px !important;
    }

    .reel-grid .mini .reel-item {
        background: rgba(255, 255, 255, 0.04) !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
    }
    
    .reveal-slot.single {
        transform: none !important;
        margin-bottom: 0 !important;
    }

    /* Heroic (x1) reel overlay ham o'chirildi - skinlar yaxshi ko'rinishi uchun */
    .reel-viewport.heroic .reel-overlay-top,
    .reel-viewport.heroic .reel-overlay-bottom {
        display: none !important;
    }

    .reel-viewport.heroic {
        width: 260px !important;
        height: 380px !important;
        max-width: 85vw !important;
        --reel-item-h: 110px !important;
        background: #1e1610 !important;
        box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4) !important;
    }

    .reel-viewport.heroic .reel-item-img-wrap {
        width: 70px !important;
        height: 70px !important;
        border-radius: 10px !important;
    }

    .reel-viewport.heroic .reel-item-img {
        width: 55px !important;
        height: 55px !important;
    }

    .reel-viewport.heroic .reel-item-name {
        font-size: 10px !important;
    }

    .reel-viewport.heroic .reel-item {
        padding: 10px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        z-index: 10 !important;
    }

    .reel-track {
        z-index: 5 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .reel-item-img-wrap {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}

/* Base Alignment for Currency and Balances */
.currency-img {
    height: 26px;
    /* Scales perfectly with adjacent text */
    vertical-align: middle;
    margin-left: 4px;
    object-fit: contain;
}

.balance-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 12px;
    border-radius: 50px;
    font-weight: 800;
}

.balance-currency {
    display: flex;
    align-items: center;
}

.r-uc,
.di-reveal-price,
.btn-premium,
.lb-won,
.pm-balance,
.case-card-price,
.cdh-price,
.win-uc,
.win-multi-uc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: var(--bg) !important;
    background-image: none !important;
    background-attachment: fixed !important;
    color: #ffffff !important;
    font-family: 'Outfit', 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    min-width: 320px;
    /* Minimum width of standard phone, prevents collapse in DevTools */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* GOLD DUST PARTICLES */
#gold-particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Removed particles */

/* SHINE EFFECT FOR BUTTONS */
.btn-shine {
    position: relative;
    overflow: hidden;
}

.btn-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(30deg);
    transition: none;
}

.btn-shine:hover::after {
    left: 120%;
    transition: all 0.6s ease-in-out;
}

body::before,
body::after,
html::before,
html::after {
    display: none !important;
    content: none !important;
}

.app {
    border: none !important;
    outline: none !important;
    position: relative;
    z-index: 1;
    overflow-x: hidden !important;
}

body>div[style*="fixed"] {
    display: none !important;
}

/* Hide any injected banners */
/* Hide Cloudflare tunnel warning bar */
<link rel="stylesheet" href="/static/css/style.css?v=11.6">
[class*="cloudflare"],
[id*="cloudflare"],
[class*="cf-"],
[id*="cf-"],
div[style*="position: fixed"][style*="left: 0"][style*="z-index"],
.case-page-char {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    left: -9999px !important;
}

body::after {
    display: none;
}

::-webkit-scrollbar {
    width: 5px
}

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar-thumb {
    background: var(--bg4);
    border-radius: 10px
}

img {
    max-width: 100%
}

a {
    text-decoration: none;
    color: inherit
}

.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 30px
}

/* PREMIUM STICKER ICONS */
.premium-sticker {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255, 184, 0, 0.4));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    vertical-align: middle;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.1);
}

.premium-sticker:hover {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 0 12px rgba(255, 184, 0, 0.6));
}

.premium-sticker-svg {
    width: 24px;
    height: 24px;
    color: var(--gold);
    filter: drop-shadow(0 0 5px rgba(255, 184, 0, 0.3));
    transition: all 0.3s ease;
}

.premium-sticker-svg:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(255, 184, 0, 0.5));
}


.glass {
    background: rgba(255, 255, 255, .02);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border)
}

.currency-img {
    height: 26px;
    width: auto;
    vertical-align: middle;
    display: inline-block
}

/* BUTTONS — Stone-Carved Gold Theme (matching PREMIUM DROP logo) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 32px;
    background: linear-gradient(180deg, #ffca28 0%, #ffb300 40%, #ff8f00 100%);
    color: #fff;
    font-weight: 950;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 0.4);
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 8px;
    position: relative;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
    box-shadow:
        0 6px 20px rgba(255, 184, 0, 0.3),
        0 4px 10px rgba(0,0,0,0.3),
        0 2px 0 rgba(255,255,255,0.2) inset;
}

.btn:hover {
    background: linear-gradient(180deg, #ffd54f 0%, #ffca28 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(255, 184, 0, 0.5);
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.btn:active {
    transform: scale(0.97) translateY(1px);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.5),
        0 1px 0 rgba(255,210,80,0.2) inset,
        0 -1px 3px rgba(0,0,0,0.5) inset;
}

.btn-primary {
    background: linear-gradient(180deg, #daa520 0%, #b8860b 40%, #8b6914 80%, #6d5210 100%);
    color: #fff;
    border: 1px solid rgba(218, 165, 32, 0.4);
    border-top-color: rgba(255, 220, 100, 0.5);
}

.btn-gold {
    background: linear-gradient(180deg, #f0c040 0%, #daa520 30%, #b8860b 70%, #8b6914 100%);
    color: #fff;
    font-weight: 900;
    text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 0 12px rgba(255,184,0,0.4);
    box-shadow:
        0 6px 20px rgba(255,184,0,0.3),
        0 4px 12px rgba(0,0,0,0.4),
        0 1px 0 rgba(255,230,120,0.4) inset,
        0 -2px 6px rgba(0,0,0,0.3) inset;
    border: 1px solid rgba(240,192,64,0.4);
    border-top-color: rgba(255,230,120,0.5);
}

.btn-gold:hover {
    background: linear-gradient(180deg, #f5d060 0%, #e6b820 30%, #c9951a 70%, #a67c10 100%);
    transform: translateY(-2px);
    box-shadow:
        0 10px 30px rgba(255,184,0,0.35),
        0 6px 15px rgba(0,0,0,0.4),
        0 1px 0 rgba(255,240,150,0.5) inset;
}

.btn-success {
    background: linear-gradient(180deg, #2dd36f 0%, #1fa855 40%, #178f48 80%, #10703a 100%);
    color: #fff;
    border: 1px solid rgba(45, 211, 111, 0.3);
    border-top-color: rgba(80, 230, 140, 0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow:
        0 4px 12px rgba(0,0,0,0.4),
        0 1px 0 rgba(80, 230, 140, 0.3) inset,
        0 -2px 6px rgba(0,0,0,0.3) inset;
}

.btn-subtle {
    background: rgba(255, 184, 0, 0.1);
    color: var(--accent);
    border: 1px solid rgba(255, 184, 0, 0.2);
    backdrop-filter: blur(5px);
    font-weight: 700;
}

.btn-subtle:hover {
    background: rgba(255, 184, 0, 0.2);
    color: #fff;
    border-color: var(--accent);
}

.btn-sm {
    padding: 8px 16px;
    font-size: 13px
}

.btn-lg {
    padding: 16px 32px;
    font-size: 17px
}

.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    background: linear-gradient(180deg, #daa520 0%, #b8860b 50%, #8b6914 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(218, 165, 32, 0.4) !important;
    border-radius: 8px !important;
    clip-path: none !important;
    font-weight: 900;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow:
        0 3px 8px rgba(0,0,0,0.4),
        0 1px 0 rgba(255,210,80,0.3) inset;
}

.btn-icon:hover {
    background: linear-gradient(180deg, #f0c040 0%, #c9951a 50%, #a67c10 100%) !important;
    transform: scale(1.05);
    box-shadow:
        0 6px 15px rgba(255,184,0,0.3),
        0 1px 0 rgba(255,230,120,0.4) inset;
}

.btn-pill {
    border-radius: 50px
}

.btn-block {
    width: 100%
}

.btn-premium {
    padding: 14px 28px;
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all .3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    border: 1px solid rgba(255, 184, 0, 0.3);
    border-top-color: rgba(255, 210, 80, 0.5);
    font-family: inherit;
    border-radius: 8px;
    clip-path: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 10px rgba(255,184,0,0.3);
}

.btn-premium.primary {
    background: linear-gradient(180deg, #daa520 0%, #b8860b 40%, #8b6914 80%, #6d5210 100%);
    color: #fff;
    box-shadow:
        0 6px 20px rgba(255,184,0,0.2),
        0 4px 12px rgba(0,0,0,0.4),
        0 1px 0 rgba(255,210,80,0.3) inset,
        0 -2px 6px rgba(0,0,0,0.3) inset;
}

.btn-premium.primary:hover {
    background: linear-gradient(180deg, #f0c040 0%, #c9951a 40%, #a67c10 80%, #7a5a08 100%);
    transform: translateY(-2px);
    box-shadow:
        0 10px 30px rgba(255,184,0,0.3),
        0 1px 0 rgba(255,230,120,0.4) inset;
}

.btn-premium.secondary {
    background: rgba(255, 184, 0, .06);
    color: #fff;
    border: 1px solid rgba(255, 184, 0, .2);
    text-shadow: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.btn-premium.secondary:hover {
    background: rgba(255, 184, 0, .12);
    border-color: rgba(255, 184, 0, 0.35);
}

.w-100 {
    width: 100%
}

.premium-pill {
    background: var(--bg2);
    border: 1px solid rgba(255, 184, 0, .15);
    border-radius: 100px;
    padding: 10px 24px;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px
}

.btn-primary-premium {
    background: linear-gradient(180deg, #ffca28 0%, #ffb300 40%, #ff8f00 100%);
    color: #fff;
    font-weight: 900;
    border: 1px solid rgba(255, 210, 80, 0.5);
    border-top-color: rgba(255, 255, 255, 0.6);
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    box-shadow:
        0 8px 25px rgba(255, 184, 0, 0.3),
        0 4px 10px rgba(0,0,0,0.3),
        0 2px 0 rgba(255,255,255,0.2) inset;
    transition: all 0.3s ease;
    animation: btn-pulse 2s infinite;
}

@keyframes btn-pulse {
    0% { box-shadow: 0 8px 25px rgba(255, 184, 0, 0.3); }
    50% { box-shadow: 0 8px 35px rgba(255, 184, 0, 0.6); }
    100% { box-shadow: 0 8px 25px rgba(255, 184, 0, 0.3); }
}

.btn-primary-premium:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #ffd54f 0%, #ffca28 100%);
    box-shadow: 0 12px 35px rgba(255, 184, 0, 0.5);
}

.dw-btn-voyti {
    background: url('/static/img/dragons-wrath/btn_voyti.png?v=2.1') center/contain no-repeat;
    width: 100%;
    height: 85px;
    border: none;
    cursor: pointer;
    margin-top: 10px;
    filter: drop-shadow(0 5px 15px rgba(255, 184, 0, 0.3));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dw-btn-voyti:hover {
    transform: translateY(-2px) scale(1.01);
    filter: drop-shadow(0 8px 25px rgba(255, 184, 0, 0.5)) brightness(1.1);
}

.dw-btn-voyti:active {
    transform: scale(0.98);
}

/* 3D Stone-Carved Gold Button */
.dw-btn-tactic {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 16px;
    margin-top: 8px;
    border: 1px solid rgba(218, 165, 32, 0.4);
    border-top-color: rgba(255, 220, 100, 0.5);
    border-bottom-color: rgba(90, 60, 0, 0.6);
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, #ffb800 0%, #ff8c1a 50%, #e67e00 100%);
    box-shadow:
        0 8px 25px rgba(255, 184, 0, 0.4),
        0 0 40px rgba(255, 184, 0, 0.1),
        0 2px 0 rgba(255, 255, 255, 0.3) inset,
        0 -3px 8px rgba(0, 0, 0, 0.3) inset;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow:
        0 2px 5px rgba(0,0,0,0.5),
        0 0 20px rgba(255,255,255,0.3);
}

.dw-btn-tactic::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(30deg);
    transition: none;
}

.dw-btn-tactic:hover::after {
    left: 140%;
    transition: all 0.6s ease-in-out;
}

.dw-btn-tactic::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,220,100,0.15) 0%, transparent 40%, rgba(0,0,0,0.2) 100%);
    z-index: -1;
    border-radius: 9px;
}

.dw-btn-tactic:hover {
    background: linear-gradient(180deg, #daa520 0%, #c9951a 25%, #a67c10 50%, #8b6914 75%, #6d5210 100%);
    transform: translateY(-2px);
    box-shadow:
        0 10px 30px rgba(255,184,0,0.25),
        0 6px 15px rgba(0,0,0,0.5),
        0 2px 0 rgba(255,230,120,0.4) inset,
        0 -3px 8px rgba(0,0,0,0.3) inset;
    text-shadow:
        0 2px 4px rgba(0,0,0,0.6),
        0 0 20px rgba(255,184,0,0.5),
        0 0 40px rgba(255,140,0,0.3);
}

/* APP */
.app {
    min-height: 100vh
}

/* Back Button (Shared) */
.mobile-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 184, 0, 0.08);
    border: 1px solid rgba(255, 184, 0, 0.25);
    color: var(--gold);
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.mobile-back-btn:hover {
    background: rgba(255, 184, 0, 0.15);
    border-color: rgba(255, 184, 0, 0.4);
    transform: translateY(-1px);
}

.mobile-back-btn:active {
    transform: scale(0.95);
}

.mobile-back-btn svg {
    width: 18px;
    height: 18px;
    stroke: var(--gold);
    transition: 0.2s;
}

/* LOGIN */
/* LOGIN MINIMALIST V3 */
.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 10005;
    background: rgba(15, 16, 21, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-minimal-v3 {
    width: 100%;
    max-width: 380px;
    background: #16181d;
    border: 1px solid #252830;
    border-radius: 12px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.login-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-close-btn:hover {
    color: #fff;
}

.login-v3-logo {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.login-v3-box {
    width: 100%;
}

.login-v3-title {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.btn-v3-google {
    width: 100%;
    padding: 12px;
    background: linear-gradient(180deg, #ffca28 0%, #ffb300 100%);
    border: none;
    border-radius: 8px;
    color: #0c0904;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(255, 184, 0, 0.2);
}

.btn-v3-google:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 184, 0, 0.3);
}

.btn-v3-google:active:not(:disabled) {
    transform: translateY(0);
}

.btn-v3-google:disabled {
    background: #333333 !important;
    color: #888888 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

.login-btn-nav {
    color: var(--gold);
    border: 1px solid var(--gold);
    background: transparent;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-btn-nav:hover {
    background: rgba(255, 184, 0, 0.1) !important;
    box-shadow: 0 0 10px rgba(255, 184, 0, 0.2);
}


.btn-v3-google img {
    width: 20px;
    height: 20px;
    background: #fff;
    padding: 2px;
    border-radius: 4px;
}

/* NAVBAR */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
    height: 60px;
    /* Slimmer as in screenshot */
    display: flex;
    align-items: center;
}

.nav-inner {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 30px;
}

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

.nav-link {
    color: #888;
    font-weight: 800;
    font-size: 13px;
    padding: 8px 20px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    letter-spacing: 0.5px;
}

.nav-link:hover {
    color: #fff;
}

.nav-link.active {
    background: linear-gradient(180deg, #c9951a 0%, #a67c10 40%, #7a5a08 100%);
    color: #fff !important;
    border-radius: 8px;
    clip-path: none;
    padding: 8px 25px;
    border: 1px solid rgba(218, 165, 32, 0.4);
    border-top-color: rgba(255, 220, 100, 0.5);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 0 8px rgba(255,184,0,0.3);
    box-shadow: 0 3px 10px rgba(0,0,0,0.4), 0 1px 0 rgba(255,210,80,0.3) inset;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-socials {
    display: flex;
    gap: 6px;
    margin-right: 15px;
}

.social-icon-link {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    transition: 0.2s;
}

.social-icon-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.social-icon-link svg {
    width: 16px;
    height: 16px;
}

.nav-notif {
    position: relative;
    cursor: pointer;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
}

.balance-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    padding: 4px 4px 4px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.balance-amount {
    font-weight: 800;
    color: #fff;
    font-size: 14px;
}

.btn-balance-add {
    width: 26px;
    height: 26px;
    background: #10b981;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-weight: 900;
    cursor: pointer;
}
}

.nav-admin,
.sound-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(201,149,26,0.2) 0%, rgba(122,90,8,0.15) 100%);
    font-size: 15px;
    cursor: pointer;
    transition: .2s;
    border: 1px solid rgba(218, 165, 32, 0.2);
    color: var(--gold);
    border-radius: 8px;
    clip-path: none;
}

.nav-admin:hover,
.sound-toggle:hover {
    background: linear-gradient(180deg, rgba(201,149,26,0.35) 0%, rgba(122,90,8,0.25) 100%);
    color: #fff;
    border-color: rgba(218, 165, 32, 0.4);
}

.nav-notif {
    position: relative;
    cursor: pointer;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text3);
    transition: .2s;
    clip-path: none;
    border-radius: 8px;
}

.nav-notif:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff
}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    min-width: 18px;
    height: 18px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg)
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: none;
    z-index: 200;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
    padding: 15px
}

.notif-dropdown.show {
    display: block
}

.notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 800;
    font-size: 14px
}

.notif-header button {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 11px;
    cursor: pointer;
    font-weight: 700
}

.notif-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 250px;
    overflow-y: auto
}

.empty-notifs {
    text-align: center;
    color: var(--text3);
    padding: 20px 0;
    font-size: 12px
}

/* PROFILE DROPDOWN */
.profile-wrapper {
    position: relative
}

.user-avatar {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    transition: .2s;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-avatar:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: none;
    z-index: 200;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
    animation: ddIn .2s ease
}

.profile-dropdown.show {
    display: block
}

@media (max-width: 768px) {
    .profile-dropdown {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-width: 350px !important;
        margin: 0 !important;
        z-index: 10001 !important;
        animation: ddMobileIn 0.3s ease !important;
    }

    @keyframes ddMobileIn {
        from { opacity: 0; transform: translate(-50%, -40%) scale(0.95); }
        to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
}

.profile-dropdown-header {
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid var(--border)
}

.pd-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0
}

.pd-info {
    flex: 1;
    min-width: 0
}

.pd-name {
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.pd-id {
    font-size: 12px;
    color: var(--text3);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px
}

.profile-dropdown-menu {
    padding: 8px
}

.pd-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text2);
    cursor: pointer;
    transition: .15s
}

.pd-menu-item:hover {
    background: var(--bg3);
    color: var(--text)
}

.pd-menu-item.danger {
    color: #ff4d4d
}

.pd-menu-item.danger:hover {
    background: rgba(239, 68, 68, .1)
}

.pd-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 0
}

.copy-id,
.copy-btn-minimal {
    cursor: pointer;
    background: none;
    border: none;
    color: var(--text3);
    padding: 2px
}

/* ====== LIVE DROPS V2 ====== */
.live-drops-bar-v2 {
    height: 72px;
    background: rgba(8, 12, 24, 0.9);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    overflow: hidden;
    position: relative;
    z-index: 90;
    display: flex;
    align-items: center;
    padding: 0;
    gap: 0;
}

.ld-label-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ef4444;
    white-space: nowrap;
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    height: 100%;
}

.ld-dot {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    box-shadow: 0 0 8px #ef4444, 0 0 16px rgba(239, 68, 68, 0.4);
    animation: ldPulse 1.5s ease-in-out infinite;
}

@keyframes ldPulse {

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

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

.ld-track-v2 {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(to right, transparent, #000 60px, #000 calc(100% - 60px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 60px, #000 calc(100% - 60px), transparent);
}

.ld-scroll-inner {
    display: flex;
    gap: 10px;
    padding: 0 10px;
    animation: ldMarquee 60s linear infinite;
    will-change: transform;
}

.ld-scroll-inner:hover {
    animation-play-state: paused;
}

@keyframes ldMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.ld-item-v2 {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 14px 8px 10px;
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
    min-width: 180px;
    height: 52px;
}

.ld-item-v2:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.ld-item-v2.rarity-common {
    border-left: 3px solid #828ca0;
}

.ld-item-v2.rarity-epic {
    border-left: 3px solid #3b82f6;
}

.ld-item-v2.rarity-legendary {
    border-left: 3px solid #a855f7;
}

.ld-item-v2.rarity-mythic {
    border-left: 3px solid #eb4b4b;
}

.ld-item-v2.rarity-ultimate {
    border-left: 3px solid #f5c518;
}

.ld-skin-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.ld-user-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    object-fit: cover;
    flex-shrink: 0;
}

.ld-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.ld-user {
    font-size: 11px;
    font-weight: 600;
    color: var(--text2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ld-item-name {
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Live Drop Case Overlay (appears on first click) */
.ld-case-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 26, 0.92);
    backdrop-filter: blur(6px);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
    z-index: 5;
}

.ld-item-v2.show-case .ld-case-overlay {
    opacity: 1;
    pointer-events: auto;
}

.ld-case-overlay img {
    width: 32px;
}

.case-img {
    max-width: 100% !important;
    height: auto !important;
    max-height: 250px !important;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
    transition: transform 0.3s ease;
}

.ld-case-overlay span {
    font-size: 11px;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ====== HERO BANNER ====== */
.hero-banner-new {
    width: 95%;
    max-width: 1400px;
    margin: 20px auto 30px auto;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-new-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
    backface-visibility: hidden;
}

/* Hover zoom removed as requested */

@media (max-width: 768px) {
    .hero-banner-new {
        width: 100%;
        margin: 0 0 15px 0;
        border-radius: 0;
        box-shadow: none;
        border: none;
    }
}

/* Hero banner uses a single responsive image now */

@keyframes hero-breath {

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

    50% {
        transform: scale(1.015) translateY(-8px) rotate(0.5deg);
    }
}

.hero-subtitle {
    font-size: 18px;
    color: var(--text3);
    max-width: 500px;
    line-height: 1.6;
    margin-bottom: 30px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-event-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 106, 0, 0.2);
    border: none;
    padding: 8px 24px;
    clip-path: none;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(255, 140, 26, 0.2);
}

.hero-title {
    font-family: 'Unbounded', 'Outfit', sans-serif;
    font-size: 82px;
    font-weight: 950;
    color: #fff;
    letter-spacing: -2px;
    text-transform: uppercase;
    line-height: 0.95;
    margin-bottom: 15px;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.hero-title-accent {
    color: var(--orange);
    background: linear-gradient(135deg, var(--orange), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(255, 140, 26, 0.3));
}

.hero-subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    max-width: 480px;
    line-height: 1.5;
    margin-bottom: 35px;
    font-weight: 500;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 20px 48px;
    background: linear-gradient(135deg, #ff8c1a, #ffb800);
    color: #fff;
    border: none;
    clip-path: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 40px rgba(255, 140, 26, 0.4);
}

.hero-cta:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 255, 157, 0.1);
}


.hero-cta:active {
    transform: scale(0.98);
}

.hero-cta-icon {
    font-size: 18px;
}

.hero-cta-arrow {
    font-size: 20px;
    transition: transform 0.3s;
}

.hero-cta:hover .hero-cta-arrow {
    transform: translateX(4px);
}

/* MOBILE: Hero Banner */
@media(max-width:768px) {
    .hero-banner {
        height: 320px;
        border-radius: 0;
    }

    .hero-title {
        font-size: 28px;
        letter-spacing: 2px;
    }

    .hero-subtitle {
        font-size: 13px;
        margin-bottom: 18px;
    }

    .hero-cta {
        padding: 14px 28px;
        font-size: 14px;
    }

    .hero-content {
        top: auto;
        bottom: 30px;
        left: 0;
        right: 0;
        transform: none;
        text-align: center;
        padding: 0 20px;
    }
}

/* PAGES */
.page {
    display: none;
    padding-top: 20px;
    padding-bottom: 100px
}

.page.active {
    display: block
}

/* CASES */
.cases-section {
    margin-bottom: 40px
}

.cases-header {
    margin-bottom: 20px;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center
}

.cases-title {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px
}

.cases-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 30px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* VOLUMETRIC LIGHT BEAMS */
.volumetric-container {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.beam {
    position: absolute;
    width: 400px;
    height: 150vh;
    background: linear-gradient(180deg, rgba(255, 106, 0, 0.05) 0%, transparent 100%);
    filter: blur(80px);
    transform-origin: top center;
    animation: beamSway 15s ease-in-out infinite;
}

.beam-1 {
    left: 10%;
    transform: rotate(-15deg);
    animation-delay: 0s;
}

.beam-2 {
    left: 60%;
    transform: rotate(10deg);
    animation-delay: -5s;
    opacity: 0.7;
}

@keyframes beamSway {

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

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

.case-card {
    background: var(--glass);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 10px;
    text-align: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    width: 240px !important;
    flex-shrink: 0;
}

.case-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(255, 184, 0, 0.5);
    box-shadow: 0 15px 45px rgba(255, 184, 0, 0.15);
}

/* Case Rarity Neon Accents Disabled */
.case-card::after,
.case-card::before {
    display: none;
}

.case-img-wrap {
    width: 100%;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.case-img {
    max-height: 260px;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
}

/* PUBG Characters - sahifa bo'ylab to'liq ko'rinish */
.case-page-char {
    position: fixed;
    bottom: 0;
    height: 90vh;
    /* Oyoq-boshigacha ko'rinadi */
    z-index: 1;
    pointer-events: none;
    opacity: 0.7;
    /* Premium visibility */
    filter: drop-shadow(0 0 50px rgba(0, 0, 0, 0.8));
    object-fit: contain;
    transition: opacity 0.5s ease;
}

.case-page-char {
    display: none !important;
    /* Temporarily hide characters to fix blue line */
}

.case-info {
    position: relative;
    z-index: 1;
    width: 100%;
}

.case-name {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.case-price-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 32px;
    background: linear-gradient(180deg, #f0c040 0%, #daa520 30%, #b8860b 70%, #8b6914 100%);
    color: #fff !important;
    font-weight: 950;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(240, 192, 64, 0.4);
    border-top-color: rgba(255, 230, 120, 0.5);
    border-radius: 15px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 12px rgba(255, 184, 0, 0.4);
    box-shadow: 
        0 6px 20px rgba(255, 184, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 1px 0 rgba(255, 230, 120, 0.4) inset,
        0 -2px 6px rgba(0, 0, 0, 0.3) inset;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.case-card:hover .case-price-tag {
    background: linear-gradient(180deg, #ffd54f 0%, #ffca28 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 8px 25px rgba(255, 184, 0, 0.5),
        0 0 30px rgba(255, 184, 0, 0.2),
        0 2px 0 rgba(255, 255, 255, 0.4) inset;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Shine effect for price tag */
.case-price-tag::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(30deg);
    transition: none;
    pointer-events: none;
}

.case-card:hover .case-price-tag::after {
    left: 140%;
    transition: all 0.6s ease-in-out;
}

/* CASE DETAIL PAGE */
.case-page {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: var(--bg);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column
}

.case-page-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: 1;
    background: var(--bg);
    filter: none;
    pointer-events: none;
}

.case-page-inner {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    padding: 0 30px
}

.case-page-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    gap: 15px
}

.case-page-back {
    background: var(--bg3);
    color: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 20px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: .2s;
    font-family: inherit
}

.count-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.3s;
}

.count-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.count-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff !important;
}

.case-page-title {
    font-size: 18px;
    font-weight: 900;
    text-align: center;
    flex: 1;
    color: #ffffff !important;
}

.case-page-title-hero {
    font-size: 42px;
    font-weight: 950;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    margin: 20px 0;
    letter-spacing: 2px;
    font-family: 'Unbounded', sans-serif;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.case-page-top-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.case-page-balance {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg3);
    padding: 8px 14px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 14px;
    border: 1px solid var(--border)
}

.case-promo-btn {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: .2s;
    font-family: inherit
}

.case-promo-btn:hover {
    background: var(--bg4);
    border-color: var(--accent)
}

.case-page-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
    min-height: 250px;
    justify-content: center
}

.case-hero-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .3;
    z-index: 0
}

.case-hero-bg-skins {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    opacity: .1
}

.case-hero-main-wrap {
    position: relative;
    z-index: 1;
    text-align: center
}

/* === CASE DETAIL BANNER === */
.case-detail-banner-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: 3 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    box-shadow: none;
    border: none;
}

.case-detail-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
    mix-blend-mode: screen;
}

.case-detail-banner-logo {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.case-detail-banner-logo .case-img {
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: none;
}

@media (max-width: 768px) {
    .case-detail-banner-wrap {
        aspect-ratio: 2.8 / 1;
    }
    
    .case-detail-banner-logo .case-img {
        max-width: 120px;
        max-height: 120px;
    }
}

@media (max-width: 480px) {
    .case-detail-banner-wrap {
        aspect-ratio: 2.5 / 1;
    }
    
    .case-detail-banner-logo .case-img {
        max-width: 90px;
        max-height: 90px;
    }
}


.case-hero-img {
    max-height: 200px;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .6));
    margin-bottom: 15px
}

.case-hero-sticker {
    font-size: 80px
}

.case-hero-balance-info {
    margin-top: 10px;
    text-align: center
}

.chb-text {
    font-size: 13px;
    color: var(--text2);
    font-weight: 700
}

.chb-hint {
    font-size: 12px;
    color: var(--red);
    margin-top: 4px
}

.case-page-counts {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 15px 0
}

.cp-count-btn {
    background: rgba(201, 149, 26, 0.1);
    border: 1px solid rgba(218, 165, 32, 0.15);
    color: #ccc;
    padding: 10px 20px;
    border-radius: 8px;
    clip-path: none;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: .2s;
    font-family: inherit;
}

.cp-count-btn.active,
.cp-count-btn:hover {
    background: linear-gradient(180deg, #c9951a 0%, #a67c10 40%, #7a5a08 100%);
    color: #fff !important;
    border-color: rgba(218, 165, 32, 0.4);
    border-top-color: rgba(255, 220, 100, 0.5);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 3px 10px rgba(0,0,0,0.4), 0 1px 0 rgba(255,210,80,0.3) inset;
}

.case-page-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0
}

.btn-open-case {
    font-size: 16px !important;
    font-weight: 900 !important;
    height: 56px
}

.case-page-items-section {
    padding: 25px 0
}

.case-items-header {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px
}

.case-items-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px;
}

/* ======= BULLDROP PREMIUM SKIN CARDS ======= */
.detail-item {
    background: var(--bg2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 250px;
    z-index: 1;
    width: calc((100% - 5 * 15px) / 6);
}

/*
 * UNIFIED RARITY COLOR — single source of truth.
 * ucTierClass() returns: common | epic | legendary | mythic | ultimate
 * ALL accents (borders, glow, atmosphere) read --rarity-color.
 */
.detail-item.common,
.detail-item.is-common {
    --rarity-color: #828ca0;
    border-color: rgba(130, 140, 160, 0.3);
}

.detail-item.epic,
.detail-item.is-epic {
    --rarity-color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.35);
}

.detail-item.legendary,
.detail-item.is-legendary {
    --rarity-color: #ffae00;
    border-color: rgba(255, 174, 0, 0.4);
}

.detail-item.mythic,
.detail-item.is-mythic,
.detail-item.is-mythical {
    --rarity-color: #ff00ff;
    border-color: rgba(255, 0, 255, 0.35);
}

.detail-item.ultimate,
.detail-item.is-ultimate {
    --rarity-color: #fff !important;
    border-color: rgba(250, 204, 21, 0.5);
}

/* Top + Bottom neon lines — SAME color, always */
.detail-item::before,
.detail-item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--rarity-color, #828ca0);
    box-shadow: 0 0 20px var(--rarity-color, transparent);
    z-index: 5;
    transition: box-shadow 0.3s, background 0.3s;
}

.detail-item::before {
    top: 0;
    border-radius: 0 0 4px 4px;
}

.detail-item::after {
    display: none;
}

/* Atmospheric radial inner glow — RICH RARITY BACKGROUND */
.detail-item-bg-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, var(--rarity-color, #828ca0) 0%, rgba(0, 0, 0, 0.2) 100%);
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.3s, background 0.3s;
}

.detail-item:hover .detail-item-bg-glow {
    opacity: 0.5;
    background: radial-gradient(ellipse at 50% 40%, var(--rarity-color) 0%, rgba(0, 0, 0, 0.1) 100%);
}

/* Hover — lift + scale + glow */
.detail-item:hover {
    transform: scale(1.05) translateY(-10px);
    z-index: 10;
    border-color: var(--rarity-color) !important;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}

.detail-item:hover::before,
.detail-item:hover::after {
    box-shadow: 0 0 35px var(--rarity-color);
}

/* Floating skin image — pure transparent, NO blend-mode darkening */
.detail-item-img {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65%;
    max-height: 110px;
    object-fit: contain;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    /* NO mix-blend-mode — it darkens the image */
    z-index: 3;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.8));
}

.detail-item:hover .detail-item-img {
    transform: translate(-50%, -55%) scale(1.1);
    filter: drop-shadow(0 30px 45px rgba(0, 0, 0, 0.9));
}

.detail-item-emoji {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px;
    z-index: 3;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.8));
}

.detail-item:hover .detail-item-emoji {
    transform: translate(-50%, -55%) scale(1.2);
}

/* Category — top-left, faint */
.detail-item-category {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    opacity: 0.4;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    z-index: 6;
}

/* Skin name — bottom-left, bold white, modern sans-serif */
.detail-item-name {
    position: relative;
    font-size: 16px;
    font-weight: 800;
    font-family: 'Outfit', 'Montserrat', 'Inter', sans-serif;
    color: #fff;
    line-height: 1.2;
    z-index: 6;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
    max-width: 95%;
    margin-bottom: 5px;
}

.uc-qty-btn {
    width: 40px !important;
    height: 40px !important;
    background: linear-gradient(135deg, #ff8c1a, #ffb800) !important;
    color: #fff !important;
    border: none !important;
    clip-path: none !important;
    border-radius: 10px !important;
    font-weight: 900 !important;
    font-size: 18px !important;
}

.uc-qty-btn:hover {
    filter: brightness(1.2);
}

/* UC price badge — top-right */
.detail-item-uc {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 12px;
    font-weight: 900;
    color: var(--accent);
    z-index: 6;
    opacity: 0.8;
}


/* ROULETTE */
/* ROULETTE - Legacy Removed */
/* ROULETTE & WIN ITEMS */
.inv-item {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 15px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s;
}

.inv-item::before,
.inv-item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 2;
}

.win-multi-item::before,
.win-multi-item::after {
    display: none !important;
    content: none !important;
}

.inv-item::before {
    top: 0;
}

.inv-item::after {
    display: none;
}

/* Legacy transparent overrides removed */

/* Rarity Color Mapping for all items */
.common,
.rarity-common {
    --item-color: var(--rarity-common);
}

.epic,
.rarity-epic {
    --item-color: var(--rarity-epic);
}

.legendary,
.rarity-legendary {
    --item-color: var(--rarity-legendary);
}

.mythic,
.rarity-mythic {
    --item-color: var(--rarity-mythic);
}

.ultimate,
.rarity-ultimate {
    --item-color: var(--rarity-ultimate);
}

.inv-item::before,
.inv-item::after {
    background: var(--item-color, var(--rarity-common));
    box-shadow: 0 0 10px var(--item-color, transparent);
}

.inv-item::before,
.inv-item::after {
    content: '' !important;
    position: absolute !important;
    left: 15% !important;
    right: 15% !important;
    height: 3px !important;
    z-index: 1 !important;
}

.inv-item::before {
    top: 0 !important;
    border-radius: 0 0 4px 4px !important;
}

.inv-item::after {
    bottom: 0 !important;
    border-radius: 4px 4px 0 0 !important;
}

/* Rarity Background for small cards — SOLID FULL FILL */
.inv-item {
    background: rgba(var(--item-color-rgb, 90, 101, 119), 0.2) !important;
}

/* Legacy roulette-item overrides removed — now handled by MODERN HORIZONTAL ROULETTE section */

.rarity-common {
    --item-color: #5a6577;
    --item-color-rgb: 90, 101, 119;
}

.rarity-epic,
.uc-blue {
    --item-color: #3b82f6;
    --item-color-rgb: 59, 130, 246;
}

.rarity-legendary,
.uc-purple {
    --item-color: #a855f7;
    --item-color-rgb: 168, 85, 247;
}

.rarity-mythic,
.uc-red {
    --item-color: #eb4b4b;
    --item-color-rgb: 235, 75, 75;
}

.rarity-ultimate,
.uc-gold {
    --item-color: #f5c518;
    --item-color-rgb: 245, 197, 24;
}

.roulette-item img,
.win-multi-item img,
.inv-item img,
.win-multi-img,
.win-img-wrap img {
    max-height: 180px;
    object-fit: contain;
    margin: 0 auto;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
    position: relative;
    z-index: 1;
    mix-blend-mode: normal !important;
    background: transparent !important;
}

.roulette-name,
.win-multi-name,
.inv-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text2);
    height: 30px;
    overflow: hidden;
    line-height: 1.2;
    z-index: 1;
}

.r-uc,
.win-multi-uc,
.inv-uc {
    font-size: 13px;
    font-weight: 900;
    color: var(--accent);
    margin-top: 5px;
    z-index: 1;
}

/* Legacy vertical roulette layout removed — now handled by MODERN HORIZONTAL ROULETTE section */

.r-img-wrap {
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.r-img {
    max-height: 80px;
    object-fit: contain;
    background: transparent !important;
}

/* Legacy .roulette-pointer removed */

/* DYNAMIC SIZING - Legacy Removed */
.skip-btn,
.reveal-btn {
    display: none;
    margin: 10px auto;
    padding: 10px 25px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 700;
    font-family: inherit
}

/* WIN OVERLAY */
.win-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    background: #151008;
    backdrop-filter: blur(25px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 20px;
    overflow-y: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.win-overlay::-webkit-scrollbar {
    display: none !important;
    /* Chrome/Safari */
}

.win-overlay.show {
    display: flex;
    z-index: 999999 !important;
    /* Above everything */
}

.win-rays {
    display: none !important;
}

.win-particles {
    display: none !important;
}

.win-card {
    position: relative;
    z-index: 1;
    text-align: center;
    animation: winPop .6s cubic-bezier(.34, 1.56, .64, 1);
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 95%;
    max-width: 1200px;
    /* Even larger */
    transform: scale(1.1);
    /* Scale up further */
}

.win-card::before,
.win-card::after {
    display: none !important;
}

.win-img-wrap img {
    mix-blend-mode: normal;
}

/* Hide white backgrounds */
@keyframes winPop {
    from {
        transform: scale(.7);
        opacity: 0
    }

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

.win-img-wrap {
    margin-bottom: 20px;
    background: transparent !important;
    border: none !important;
}

.win-img-wrap img {
    max-height: 650px;
    /* Even larger */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 80px rgba(255, 255, 255, 0.3));
    mix-blend-mode: normal !important;
    background: transparent !important;
}

.win-name {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 10px;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.win-uc {
    font-size: 32px;
    font-weight: 900;
    color: var(--accent);
    text-shadow: 0 0 20px rgba(255, 106, 0, 0.4);
}

.win-tap {
    font-size: 13px;
    color: var(--text3);
    margin-top: 20px;
    opacity: 0.6;
}

.win-actions {
    margin: 25px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 320px
}

.win-btn-sell {
    background: linear-gradient(135deg, #00c853, #b2ff59) !important;
    color: #fff !important;
    font-weight: 900 !important;
    border: none !important;
    padding: 18px !important;
    border-radius: 12px !important;
    font-size: 1.1rem !important;
    text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(0, 200, 83, 0.3);
}

.win-multi-container {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 1100px;
    width: 100%
}

.win-multi-title {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 20px
}

.win-multi-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px;
    margin-bottom: 15px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* PROFILE / INVENTORY */
.profile-modern-wrap {
    padding: 30px 0
}

.pm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    gap: 20px;
    flex-wrap: wrap
}

.pm-user-info {
    display: flex;
    align-items: center;
    gap: 20px
}

.pm-avatar-wrap {
    position: relative
}

.pm-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg3);
    border: 2px solid var(--accent)
}

.pm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.pm-level-tag {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg2);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 10px;
    font-weight: 900;
    padding: 2px 10px;
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
    white-space: nowrap
}

.pm-user-text {
    display: flex;
    flex-direction: column
}

.pm-username {
    font-size: 24px;
    font-weight: 900
}

.pm-userid {
    font-size: 13px;
    color: var(--text3);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px
}

.pm-header-actions {
    display: flex;
    align-items: center;
    gap: 15px
}

.pm-balance-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 15px
}

.pm-balance-label {
    font-size: 11px;
    color: var(--text3);
    text-transform: uppercase;
    font-weight: 700
}

.pm-balance-val {
    font-size: 22px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 8px
}

.pm-deposit-btn {
    background: linear-gradient(180deg, #ffca28 0%, #ffb300 40%, #ff8f00 100%);
    color: #fff;
    border: 1px solid rgba(255, 210, 80, 0.5);
    border-top-color: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 950;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: 14px;
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
    box-shadow:
        0 6px 20px rgba(255, 184, 0, 0.3),
        0 4px 10px rgba(0,0,0,0.3),
        0 2px 0 rgba(255,255,255,0.2) inset;
}

.pm-deposit-btn:hover {
    background: linear-gradient(180deg, #ffd54f 0%, #ffca28 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 30px rgba(255, 184, 0, 0.5);
}

.pm-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px
}

/* Keep profile grid columns */
.pm-grid {
    grid-template-columns: 350px 1fr;
}

.pm-header {
    flex-direction: row;
    align-items: center;
}

.pm-sidebar {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.pm-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px
}

.pm-card-title {
    font-size: 13px;
    font-weight: 900;
    color: var(--text3);
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 1px
}

.pm-card {
    background: var(--glass);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.pm-stat-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px;
    background: rgba(255, 184, 0, 0.03);
    border: 1px solid rgba(255, 184, 0, 0.05);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.pm-stat-item:hover {
    background: rgba(255, 184, 0, 0.06);
}

.pm-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text3);
}

.pm-stat-val {
    font-size: 18px;
    font-weight: 950;
    color: var(--accent);
    font-family: 'Unbounded', sans-serif;
}

.pm-level-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}

.pm-level-name {
    font-weight: 900;
    color: var(--accent)
}

.pm-xp-text {
    font-size: 12px;
    color: var(--text3);
    font-weight: 700
}

.pm-xp-bar {
    height: 6px;
    background: var(--bg4);
    border-radius: 10px;
    overflow: hidden
}

.pm-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    border-radius: 10px;
    transition: width .5s
}

.pm-sidebar-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px
}

.pm-tabs {
    display: flex;
    background: var(--bg2);
    border: 1px solid rgba(218, 165, 32, 0.15);
    padding: 5px;
    margin-bottom: 25px;
    border-radius: 10px;
    clip-path: none;
}

.pm-tab {
    flex: 1;
    padding: 12px;
    border: 1px solid rgba(255, 184, 0, 0.1);
    background: rgba(255, 184, 0, 0.05);
    color: var(--text3);
    font-weight: 800;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-family: inherit;
    font-size: 14px;
}

.pm-tab.active {
    background: linear-gradient(180deg, #ffca28 0%, #ffb300 100%);
    color: #0c0904 !important;
    border: none;
    box-shadow: 0 4px 15px rgba(255, 184, 0, 0.4);
}

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

.pm-section-header h3 {
    font-size: 16px;
    font-weight: 800
}

.pm-refresh-badge {
    font-size: 11px;
    color: var(--text3);
    background: var(--bg3);
    padding: 4px 12px;
    border-radius: 20px
}

.inv-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px
}

/* Inventory Item Rarity Colors */
.inv-item.common {
    --rarity-color: #828ca0;
}

.inv-item.epic {
    --rarity-color: #a855f7;
}

.inv-item.legendary {
    --rarity-color: #ff4a9e;
}

/* Pink as requested */
.inv-item.mythic {
    --rarity-color: #ea5455;
}

.inv-item.ultimate {
    --rarity-color: #f5c518;
}

.inv-item {
    background: var(--bg2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.inv-item:hover {
    transform: translateY(-5px);
    background: var(--bg3);
    border-color: var(--rarity-color, var(--accent));
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.inv-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--rarity-color, transparent);
    box-shadow: 0 0 15px var(--rarity-color);
    z-index: 2;
}

.inv-img {
    height: 90px;
    object-fit: contain;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

.inv-name {
    font-size: 11px;
    font-weight: 800;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    height: 32px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inv-uc {
    color: #fff;
    font-weight: 900;
    font-size: 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* SELL BUTTON REDESIGN */
.btn-sell {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text3);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-sell:hover {
    background: #fff;
    color: #000;
    transform: scale(1.02);
}

.btn-sell.mini {
    padding: 6px 10px;
    width: auto;
}

.inv-item.legendary {
    background: radial-gradient(circle at center, rgba(255, 74, 158, 0.1), var(--bg2));
}

.inv-item.mythic {
    background: radial-gradient(circle at center, rgba(234, 84, 85, 0.1), var(--bg2));
}

.inv-item.ultimate {
    background: radial-gradient(circle at center, rgba(245, 197, 24, 0.1), var(--bg2));
}

/* REF */
.pm-ref-box {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.pm-ref-label {
    font-size: 12px;
    color: var(--text3)
}

.pm-ref-row {
    display: flex;
    align-items: center;
    gap: 10px
}

.pm-ref-code {
    background: var(--bg3);
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 14px;
    flex: 1
}

.pm-ref-copy {
    background: linear-gradient(135deg, var(--orange), var(--gold));
    border: none;
    color: #000;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
    box-shadow: 0 4px 15px rgba(255, 140, 26, 0.3);
}

.pm-ref-copy:hover {
    transform: scale(1.05);
}

.pm-ref-copy:active {
    transform: scale(0.95);
}

.pm-ref-stats {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: var(--text3)
}

.pm-ref-apply {
    display: flex;
    gap: 8px;
    margin-top: 5px
}

.pm-ref-apply input {
    flex: 1;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-family: inherit
}

.pm-ref-apply button {
    background: var(--accent);
    color: #000;
    border: none;
    padding: 8px 16px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

.pm-codes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px
}

.withdrawal-list {
    display: flex;
    flex-direction: column;
    gap: 10px
}

/* MODALS */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    background: rgba(0, 0, 0, .85);
    backdrop-filter: blur(10px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 40px 10px;
    -webkit-overflow-scrolling: touch;
}

.modal-overlay.show {
    display: flex
}

.modal {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 24px;
    max-width: 500px;
    width: 95%;
    position: relative;
    margin: auto;
    animation: modalIn .3s cubic-bezier(.34, 1.56, .64, 1)
}

@keyframes modalIn {
    from {
        transform: scale(.9) translateY(20px);
        opacity: 0
    }

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

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border)
}

.modal-header h2 {
    font-size: 18px;
    font-weight: 800;
    margin: 0
}

.modal-desc {
    color: var(--text2);
    font-size: 14px;
    line-height: 1.6;
    padding: 0 24px;
    margin: 15px 0
}

/* PHONE MODAL */
.phone-modal-premium {
    max-width: 450px;
    padding: 30px
}

.premium-badge {
    background: var(--accent);
    color: #000;
    font-size: 10px;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 10px
}

.phone-input-section {
    padding: 20px 0
}

.input-group-premium {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 15px
}

.input-group-premium input {
    flex: 1;
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    outline: none;
    font-family: inherit
}

.input-icon {
    font-size: 20px
}

.phone-secure-note {
    text-align: center;
    color: var(--text3);
    font-size: 12px;
    margin-top: 15px
}

/* DEPOSIT MODAL */
.dm-modern-wrap {
    max-width: 650px;
    overflow: hidden;
    margin: auto;
}

.dm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border)
}

.dm-title {
    font-size: 18px;
    font-weight: 800
}

.dm-close {
    background: none;
    border: none;
    color: var(--text3);
    font-size: 24px;
    cursor: pointer;
    padding: 5px
}

.dm-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 400px
}

@media(max-width:600px) {
    .dm-grid {
        grid-template-columns: 1fr
    }

    .dm-sidebar {
        display: none
    }
}

.dm-sidebar {
    background: rgba(255, 255, 255, .02);
    border-right: 1px solid var(--border);
    padding: 20px
}

.dm-body {
    padding: 30px
}

/* LIVE DROPS PREMIUM STYLES */
.ld-item-v2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin: 0 4px;
    min-width: 130px;
    height: 52px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.ld-price-tag {
    font-size: 13px;
    font-weight: 950;
    color: var(--accent);
    font-family: 'Unbounded', sans-serif;
    letter-spacing: -0.5px;
}

.ld-item-v2:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--rarity-color, rgba(255, 255, 255, 0.2));
    transform: translateY(-2px);
}

.ld-user-wrap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.ld-user-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ld-skin-wrap {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.ld-skin-img {
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 0 8px var(--rarity-color, transparent));
}

.ld-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.ld-user {
    font-size: 11px;
    color: var(--text3);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ld-skin {
    font-size: 13px;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ld-rarity-tag {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 8px;
    font-weight: 900;
    padding: 2px 6px;
    background: var(--rarity-color, #828ca0);
    color: #000;
    border-top-left-radius: 4px;
}

/* Rarity Accents for LD */
.ld-item-v2.rarity-common {
    --rarity-color: #828ca0;
}

.ld-item-v2.rarity-epic {
    --rarity-color: #a855f7;
}

.ld-item-v2.rarity-legendary {
    --rarity-color: #ffae00;
}

.ld-item-v2.rarity-mythic {
    --rarity-color: #ff00ff;
}

.ld-item-v2.rarity-ultimate {
    --rarity-color: #facc15;
}

.ld-item-v2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--rarity-color, transparent);
}

.dm-side-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: .2s
}

.dm-side-item.active {
    background: rgba(255, 184, 0, .1);
    border: 1px solid rgba(255, 184, 0, .2)
}

.dm-side-icon {
    font-size: 20px
}

.dm-side-text {
    flex: 1
}

.dm-side-label {
    font-size: 13px;
    font-weight: 700;
    display: block
}

.dm-side-sub {
    font-size: 11px;
    color: var(--text3)
}

.dm-side-flag {
    font-size: 18px
}

.dm-section-title {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--text2)
}

.dm-method-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px
}

.dm-method-card {
    background: linear-gradient(145deg, var(--bg3), var(--bg2));
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px 15px;
    cursor: pointer;
    text-align: center;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.dm-method-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.1), transparent);
    opacity: 0;
    transition: .3s;
}

.dm-method-card:hover {
    border-color: rgba(255, 184, 0, 0.5);
    transform: translateY(-5px);
    background: var(--bg3);
}

.dm-method-card.active {
    border-color: var(--accent);
    background: linear-gradient(145deg, rgba(255, 184, 0, 0.1), var(--bg3));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 184, 0, 0.1);
}

.dm-method-card.active::before {
    opacity: 1;
}

.dm-method-img {
    height: 45px;
    width: auto;
    object-fit: contain;
    margin-bottom: 12px;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3));
    transition: .3s;
}

.dm-method-card:hover .dm-method-img {
    transform: scale(1.1);
}

.dm-method-name {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--text2);
    transition: .3s;
}

.dm-method-card.active .dm-method-name {
    color: var(--accent);
}

.dm-calc-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px
}

.dm-input-group {
    flex: 1
}

.dm-input-group label {
    font-size: 12px;
    color: var(--text3);
    margin-bottom: 6px;
    display: block
}

.dm-input-field {
    display: flex;
    align-items: center;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px
}

.dm-input-field.highlight {
    border-color: var(--accent);
    background: rgba(255, 184, 0, .05)
}

.dm-input-field input {
    flex: 1;
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    outline: none;
    font-family: inherit;
    width: 60px
}

.dm-input-suffix {
    color: var(--text3);
    font-weight: 700;
    font-size: 13px
}

.dm-calc-arrow {
    color: var(--text3)
}

.dm-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px
}

.dm-quick-grid button {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: .2s;
    font-family: inherit
}

.dm-quick-grid button:hover {
    border-color: var(--accent);
    background: rgba(255, 184, 0, .05)
}

.dm-instruction-card {
    background: var(--bg3);
    border-radius: var(--radius);
    padding: 25px
}

.dm-instr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px
}

.dm-instr-title {
    font-weight: 800;
    font-size: 16px
}

.dm-timer {
    color: var(--accent);
    font-weight: 900;
    font-size: 18px
}

.dm-instr-note {
    color: var(--text2);
    font-size: 13px;
    margin-bottom: 20px;
    line-height: 1.6
}

.dm-copy-field {
    margin-bottom: 15px
}

.dm-copy-field label {
    font-size: 12px;
    color: var(--text3);
    margin-bottom: 6px;
    display: block
}

.dm-copy-val {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 6px 6px 6px 16px;
    font-weight: 800;
    transition: .2s;
    height: 52px;
}

.dm-copy-val.highlight {
    border-color: var(--accent);
    background: rgba(255, 184, 0, 0.05);
}

.btn-copy-mini {
    background: linear-gradient(135deg, var(--orange), var(--gold));
    border: none;
    color: #fff !important;
    padding: 0 12px;
    height: 38px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.5px;
    transition: .2s;
    box-shadow: 0 4px 10px rgba(255, 140, 26, 0.2);
}

.btn-copy-mini:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 6px 15px rgba(255, 140, 26, 0.3);
}

.btn-copy-mini:active {
    transform: translateY(0);
}

.btn-copy-mini svg {
    width: 14px;
    height: 14px;
}

.dm-warning-box {
    background: rgba(255, 184, 0, .08);
    border: 1px solid rgba(255, 184, 0, .2);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--accent);
    margin: 15px 0
}

.deposit-waiting {
    text-align: center;
    padding: 20px 0
}

.dw-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.dw-text {
    font-weight: 700;
    margin-bottom: 5px
}

.dw-subtext {
    color: var(--text3);
    font-size: 12px
}

/* Deposit Result Animations (Success / Rejected / Expired) */
.dw-result {
    text-align: center;
    padding: 25px 0;
    animation: dwResultFadeIn 0.5s ease;
}

@keyframes dwResultFadeIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.dw-result-circle {
    width: 80px;
    height: 80px;
    margin: 0 auto 18px;
}

.dw-result-svg {
    width: 80px;
    height: 80px;
}

.dw-result-circle-bg {
    fill: none;
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: dwCircleDraw 0.6s ease forwards;
}

.dw-result-success .dw-result-circle-bg {
    stroke: #4ade80;
}

.dw-result-rejected .dw-result-circle-bg {
    stroke: #ef4444;
}

.dw-result-expired .dw-result-circle-bg {
    stroke: var(--accent);
}

@keyframes dwCircleDraw {
    to { stroke-dashoffset: 0; }
}

.dw-result-check {
    fill: none;
    stroke: #4ade80;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: dwCheckDraw 0.4s 0.4s ease forwards;
}

@keyframes dwCheckDraw {
    to { stroke-dashoffset: 0; }
}

.dw-result-x {
    fill: none;
    stroke: #ef4444;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 56;
    stroke-dashoffset: 56;
    animation: dwXDraw 0.4s 0.4s ease forwards;
}

@keyframes dwXDraw {
    to { stroke-dashoffset: 0; }
}

.dw-result-title {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 6px;
}

.dw-result-success .dw-result-title {
    color: #4ade80;
}

.dw-result-rejected .dw-result-title {
    color: #ef4444;
}

.dw-result-expired .dw-result-title {
    color: var(--accent);
}

.dw-result-desc {
    font-size: 13px;
    color: var(--text3);
    font-weight: 600;
}

/* WITHDRAW MODAL - PREMIUM REDESIGN */
.withdraw-modal {
    max-width: 480px;
    background: linear-gradient(135deg, #0e121d 0%, #161a2e 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    padding: 0;
}

.modal-body-padding {
    padding: 0 28px 28px;
}

.withdraw-balance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 18px 22px;
    border-radius: 16px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.wd-label {
    color: var(--text3);
    font-size: 14px;
    font-weight: 500;
}

.wd-balance-val {
    color: var(--accent);
    font-size: 22px;
    font-weight: 900;
    font-family: 'Outfit', sans-serif;
}

.wd-balance-val small {
    font-size: 12px;
    opacity: 0.7;
    margin-left: 4px;
}

.wd-input-group,
.wd-id-input-box {
    margin-bottom: 20px;
}

.wd-input-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text2);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wd-input-wrap {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 5px 15px;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wd-input-wrap:focus-within {
    border-color: var(--accent);
    background: rgba(255, 184, 0, 0.03);
    box-shadow: 0 0 20px rgba(255, 184, 0, 0.1);
}

.wd-input-icon {
    font-size: 20px;
    margin-right: 12px;
    opacity: 0.8;
}

.wd-input-wrap input {
    flex: 1;
    background: none;
    border: none;
    padding: 12px 0;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    font-family: inherit;
    outline: none;
}

.wd-input-wrap input::placeholder {
    color: rgba(255, 255, 255, 0.2);
    font-weight: 500;
}

.wd-quick-btns {
    display: flex;
    gap: 8px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.btn-wd-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text2);
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

.btn-wd-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateY(-2px);
}

.btn-wd-chip.gold {
    background: rgba(255, 184, 0, 0.1);
    color: var(--accent);
    border-color: rgba(255, 184, 0, 0.2);
}

.btn-wd-chip.gold:hover {
    background: var(--accent);
    color: #000;
}

.wd-input-hint {
    font-size: 11px;
    color: var(--text3);
    margin-top: 10px;
    padding-left: 5px;
}

/* PROMO MODAL */
.promo-modal {
    max-width: 420px;
    padding: 0
}

.promo-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 24px
}

.promo-input-icon {
    font-size: 20px
}

.promo-input-wrap input {
    flex: 1;
    background: none;
    border: none;
    color: #fff;
    font-size: 15px;
    outline: none;
    font-family: inherit
}

.promo-link {
    color: var(--accent);
    font-weight: 600
}

.promo-result {
    padding: 20px;
    text-align: center
}

/* WHEEL */
.wheel-header {
    text-align: center;
    padding: 30px 0 20px
}

.wheel-header h1 {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 8px
}

.wheel-header p {
    color: var(--text2);
    font-size: 15px
}

.wheel-main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px
}

.wheel-wrap {
    position: relative;
    width: 400px;
    height: 400px
}

@media(max-width:500px) {
    .wheel-wrap {
        width: 300px;
        height: 300px
    }

    .wheel-wrap canvas {
        width: 300px !important;
        height: 300px !important
    }
}

.wheel-pointer {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 25px solid var(--accent);
    z-index: 10;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .5))
}

.wheel-controls {
    width: 100%;
    max-width: 400px
}

.wheel-promo-input {
    text-align: center
}

.wheel-promo-input label {
    display: block;
    font-size: 14px;
    color: var(--text2);
    margin-bottom: 10px;
    font-weight: 600
}

.input-with-button {
    display: flex;
    gap: 10px
}

.input-with-button input {
    flex: 1;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    color: #fff;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    text-align: center
}

.wheel-hint {
    font-size: 12px;
    color: var(--text3);
    margin-top: 8px
}

.wheel-timer-box {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    justify-content: center
}

.timer-icon {
    font-size: 30px
}

.timer-label {
    font-size: 13px;
    color: var(--text3)
}

.timer-value {
    font-size: 24px;
    font-weight: 900;
    color: var(--accent)
}

/* UC SHOP */
.uc-store-container {
    padding: 30px 0
}

.uc-store-header {
    text-align: center;
    margin-bottom: 30px
}

.uc-title {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 8px
}

.uc-subtitle {
    color: var(--text2);
    font-size: 15px
}

.uc-method-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px
}

.uc-tab {
    flex: 1;
    padding: 12px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-weight: 800;
    clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    transition: .2s;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}

.uc-tab.active {
    background: linear-gradient(135deg, #ff8c1a, #ffb800) !important;
    color: #fff !important;
}

.uc-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px
}

@media(max-width:768px) {
    .uc-main-grid {
        grid-template-columns: 1fr
    }
}

.uc-packs-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.uc-section-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--text3);
    text-transform: uppercase;
    margin-bottom: 10px
}

.uc-packs-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.uc-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px
}

.uc-pack-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 18px 24px;
    cursor: pointer;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    clip-path: polygon(15px 0%, 100% 0%, calc(100% - 15px) 100%, 0% 100%);
    margin-bottom: 5px;
}

.uc-pack-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
}

.uc-pack-item.active {
    background: linear-gradient(135deg, #ff8c1a, #ffb800);
    color: #fff !important;
    box-shadow: 0 10px 25px rgba(255, 140, 26, 0.3);
}

.uc-pack-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--accent);
    color: #000;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(255, 184, 0, 0.4);
    z-index: 10;
    border: 2px solid var(--bg1)
}

.btn-xs {
    padding: 4px 10px;
    font-size: 11px
}

.uc-payment-section {
    margin: 15px 0;
    padding-top: 15px;
    border-top: 1px solid var(--border)
}

.uc-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px
}

.uc-card-item {
    background: linear-gradient(135deg, var(--bg3), var(--bg2));
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    transition: .3s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.uc-card-item:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.uci-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.uci-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.uci-logo {
    height: 24px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.uci-type {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text3);
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 6px;
}

.uci-number {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 2px;
    margin-bottom: 6px;
    font-family: 'Unbounded', sans-serif;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.uci-holder {
    font-size: 11px;
    color: var(--accent);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.uc-card-empty {
    text-align: center;
    padding: 20px;
    color: var(--text3);
    font-size: 13px;
    font-style: italic
}

.uc-order-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 25px
}

.uc-order-summary {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.uos-header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.uos-label {
    color: var(--text3);
    font-size: 13px
}

.uos-pack {
    font-size: 20px;
    font-weight: 900;
    color: var(--accent)
}

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

.uos-qty input {
    width: 60px;
    text-align: center;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit
}

.uos-details {
    background: var(--bg3);
    border-radius: 12px;
    padding: 15px
}

.uos-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px
}

.uos-row span {
    color: var(--text2)
}

.uc-input-group {
    margin: 15px 0
}

.uc-input-group label {
    font-size: 13px;
    color: var(--text2);
    margin-bottom: 8px;
    display: block;
    font-weight: 600
}

.uc-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px
}

.uc-input-wrap input {
    flex: 1;
    background: none;
    border: none;
    color: #fff;
    font-size: 15px;
    outline: none;
    font-family: inherit
}

.uc-input-hint {
    font-size: 11px;
    color: var(--text3);
    margin-top: 6px
}

.uc-receipt-section {
    margin: 15px 0
}

.uc-receipt-section label {
    font-size: 13px;
    color: var(--text2);
    margin-bottom: 8px;
    display: block;
    font-weight: 600
}

.uc-receipt-box {
    background: var(--bg3);
    border: 2px dashed var(--border);
    border-radius: 14px;
    padding: 30px;
    cursor: pointer;
    transition: .2s;
    text-align: center
}

.uc-receipt-box:hover {
    border-color: var(--accent)
}

.uc-receipt-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px
}

.urp-icon {
    font-size: 30px
}

.urp-text {
    font-size: 13px;
    color: var(--text3)
}

.btn-buy-uc {
    height: 70px;
    font-size: 1.1rem;
    box-shadow: 0 15px 35px rgba(255, 140, 26, 0.4);
}

.uc-note {
    font-size: 12px;
    color: var(--text3);
    text-align: center;
    margin-top: 15px;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.uc-pending-container {
    padding: 20px 0
}

.uc-pending-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    max-width: 500px;
    margin: 0 auto
}

.ucp-header {
    margin-bottom: 20px
}

.ucp-icon-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 10px
}

.ucp-icon {
    font-size: 40px
}

.ucp-pulse {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    animation: pulse 2s infinite
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0;
        transform: scale(.8)
    }

    50% {
        opacity: .5;
        transform: scale(1.2)
    }
}

.ucp-content {
    margin-bottom: 20px
}

.ucp-desc {
    color: var(--text2);
    font-size: 14px;
    margin-bottom: 15px
}

.ucp-details {
    background: var(--bg3);
    border-radius: 12px;
    padding: 15px;
    text-align: left
}

/* LEADERBOARD */
.leaderboard-table {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.lb-row {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 15px
}

.lb-rank {
    width: 30px;
    font-weight: 800;
    color: var(--text3)
}

.lb-user {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px
}

.lb-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%
}

.lb-won {
    font-weight: 800;
    color: var(--accent)
}

/* TOOLBAR */
.bottom-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: rgba(18, 18, 26, .95);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    height: 65px;
    display: none
}

.toolbar-inner {
    display: flex;
    height: 100%
}

.toolbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text3);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s
}

.toolbar-item.active {
    color: var(--accent)
}

.tb-icon {
    font-size: 20px
}

/* TOAST */
.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999999 !important;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.toast {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    animation: toastIn .3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    max-width: 350px
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(30px)
    }

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

.toast-success {
    border-color: rgba(34, 197, 94, .3);
    color: #22c55e
}

.toast-error {
    border-color: rgba(239, 68, 68, .3);
    color: #ef4444
}

.toast-info {
    border-color: rgba(59, 130, 246, .3);
    color: #3b82f6
}

.empty-state {
    text-align: center;
    color: var(--text3);
    padding: 40px 0;
    font-size: 14px
}

/* MOBILE */
@media(max-width:768px) {
    .bottom-toolbar {
        display: block
    }

    .nav-links {
        display: none
    }

    .cases-grid {
        display: flex !important;
        gap: 12px !important;
        justify-content: center !important;
    }

    .case-card {
        width: calc(50% - 10px) !important;
        min-width: 0 !important;
    }

    .case-img-wrap {
        height: 170px
    }

    .case-img {
        max-height: 150px
    }

    .case-name {
        font-size: 13px
    }

    .case-price-tag {
        font-size: 12px;
        padding: 5px 14px
    }

    .nav-inner {
        padding: 0 12px
    }

    .container {
        padding: 0 12px
    }

    .page {
        padding-bottom: 80px
    }
}

/* ACHIEVEMENTS */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    padding: 10px 0;
}

.achievement-card {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.achievement-card.locked {
    opacity: 0.6;
    filter: grayscale(0.8);
}

.achievement-card.unlocked {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--bg3), rgba(255, 184, 0, 0.05));
}

.ach-icon {
    font-size: 32px;
    background: rgba(255, 255, 255, 0.03);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    flex-shrink: 0;
}

.ach-info {
    flex: 1;
}

.ach-name {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
}

.ach-desc {
    font-size: 12px;
    color: var(--text2);
    line-height: 1.4;
}

.ach-status {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 8px;
    color: var(--text3);
}

.achievement-card.unlocked .ach-status {
    color: var(--accent);
}

/* BONUS CARD */
.bonus-card-modern {
    background: linear-gradient(135deg, #1e1e28, #2a2a38);
    border: 1px solid rgba(255, 184, 0, 0.1);
}

.bonus-card-modern .pm-card-title {
    color: var(--accent);
}

/* DEPOSIT RECEIPT UPLOAD */
.dm-receipt-upload {
    background: rgba(255, 255, 255, 0.02);
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.dm-receipt-upload:hover {
    border-color: var(--accent);
    background: rgba(255, 184, 0, 0.05);
}

.dm-rup-icon {
    font-size: 28px;
    margin-bottom: 10px;
}

.dm-rup-text {
    font-size: 13px;
    color: var(--text2);
    font-weight: 600;
}

.dm-receipt-upload img {
    max-width: 100%;
    max-height: 150px;
    border-radius: 8px;
    margin-top: 10px;
}

/* CASE PAGE HERO REDESIGN (IMAGE-LIKE) */
.case-page-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
    gap: 30px;
}

.case-preview-carousel {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 20px;
    width: 100%;
    height: 280px;
}

.cpc-item {
    width: 200px;
    height: 220px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0.3;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.cpc-item.active {
    width: 240px;
    height: 260px;
    opacity: 1;
    z-index: 2;
    background: radial-gradient(circle at 50% 100%, var(--accent-glow) 0%, var(--bg2) 80%);
    border-color: var(--accent);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px var(--accent-glow);
}

.cpc-item.active img {
    transform: scale(1.1) translateY(-10px);
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.7));
}

.cpc-item img {
    max-height: 140px;
    max-width: 90%;
    object-fit: contain;
    transition: all 0.4s;
}

.cpc-rarity-bar {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    height: 3px;
    border-radius: 2px;
    background: var(--text3);
}

.case-status-box {
    background: rgba(30, 30, 40, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 8px 16px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    width: fit-content;
    margin: -15px auto 0;
    min-width: 200px;
    z-index: 3;
}

.csb-info {
    font-size: 13px;
    color: var(--text);
    font-weight: 700;
    margin-bottom: 5px;
}

.csb-info b {
    color: var(--accent);
}

.csb-hint {
    font-size: 12px;
    color: var(--text3);
    font-weight: 600;
}

.csb-hint.need {
    color: #ff4d4d;
}

/* ====== PREMIUM REVEAL ANIMATION ====== */
#rouletteArea {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 20px auto;
    background: transparent;
    max-width: 1000px;
}

#rouletteArea.reveal-mode {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    min-height: 280px;
}

#rouletteArea.reveal-grid {
    display: grid !important;
    gap: 12px;
    align-items: stretch;
}

#rouletteArea.reveal-grid.count-2,
#rouletteArea.reveal-grid.count-3,
#rouletteArea.reveal-grid.count-4 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin: 0 auto;
    gap: 20px;
    justify-content: center;
}

/* Center the 3rd card in x3 reveal */
#rouletteArea.reveal-grid.count-3 .reveal-slot:last-child {
    grid-column: span 2;
    justify-self: center;
    width: calc(50% - 10px);
}

#rouletteArea.reveal-grid.count-2 .reveal-slot.mini,
#rouletteArea.reveal-grid.count-3 .reveal-slot.mini,
#rouletteArea.reveal-grid.count-4 .reveal-slot.mini {
    height: 230px;
    aspect-ratio: 1.4 / 1;
    width: auto;
}

#rouletteArea.reveal-grid.count-5,
#rouletteArea.reveal-grid.count-10 {
    grid-template-columns: repeat(5, 1fr);
}

/* Reveal Slot Container */
.reveal-slot {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(10, 12, 20, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.6s, box-shadow 0.6s;
}

.reveal-slot.single {
    width: 306px;
    height: 324px;
    max-width: 85vw;
}

.reveal-slot.mini {
    width: 100%;
    min-height: 135px;
    aspect-ratio: 1 / 1.1;
}

/* Glow ring behind item */
.reveal-glow-ring {
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(255, 184, 0, 0.12) 0%, transparent 65%);
    opacity: 0;
    z-index: 1;
    transition: opacity 0.8s ease;
    pointer-events: none;
}

/* Display area */
.reveal-display {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    padding: 15px;
}

.case-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    overflow: visible;
    /* Kesilishni oldini oladi */
}

.case-img-wrap {
    position: relative;
    width: 100%;
    height: 260px;
    /* Yana ham balandroq qildim, uzun rasmlar sig'ishi uchun */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    z-index: 2;
    padding: 10px;
    /* Rasm qirralarga tegmasligi uchun */
}

.case-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 15px 45px rgba(0, 0, 0, 0.7));
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.case-card:hover .case-img {
    transform: scale(1.15) translateY(-15px);
}

.case-info {
    width: 100%;
    text-align: center;
    z-index: 3;
}

.case-name {
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.case-price-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 16px;
    clip-path: none;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.reveal-item-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    padding: 10px;
    transition: background 0.08s ease;
}

/* Rarity background colors — matching case item grid */
.reveal-item-inner.common {
    background: linear-gradient(to top, rgba(70, 80, 100, 0.6) 0%, rgba(40, 50, 65, 0.4) 100%);
}

.reveal-item-inner.epic {
    background: linear-gradient(to top, rgba(30, 80, 180, 0.55) 0%, rgba(20, 50, 120, 0.4) 100%);
}

.reveal-item-inner.legendary {
    background: linear-gradient(to top, rgba(180, 0, 180, 0.45) 0%, rgba(100, 0, 120, 0.35) 100%);
}

.reveal-item-inner.mythic {
    background: linear-gradient(to top, rgba(200, 40, 40, 0.5) 0%, rgba(120, 20, 20, 0.4) 100%);
}

.reveal-item-inner.ultimate {
    background: linear-gradient(to top, rgba(180, 150, 10, 0.5) 0%, rgba(120, 100, 5, 0.4) 100%);
}

.reveal-img {
    max-height: 140px;
    max-width: 80%;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6));
    transition: filter 0.3s;
}

.mini .reveal-img {
    max-height: 55px;
}

.reveal-item-name {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini .reveal-item-name {
    font-size: 8px;
}

.reveal-emoji {
    font-size: 54px;
}

.mini .reveal-emoji {
    font-size: 30px;
}

.reveal-placeholder {
    font-size: 45px;
    opacity: 0.15;
}

/* Rarity badge */
.reveal-rarity {
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.85;
}

.mini .reveal-rarity {
    font-size: 7px;
    letter-spacing: 1px;
}

.reveal-rarity.common {
    color: #828ca0;
}

.reveal-rarity.epic {
    color: #3b82f6;
    text-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
}

.reveal-rarity.legendary {
    color: #ff00ff;
    text-shadow: 0 0 6px rgba(255, 0, 255, 0.4);
}

.reveal-rarity.mythic {
    color: #ef4444;
    text-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}

.reveal-rarity.ultimate {
    color: #f5c518;
    text-shadow: 0 0 6px rgba(245, 197, 24, 0.4);
}

/* Price display */
.reveal-price {
    font-size: 13px;
    font-weight: 900;
    color: var(--accent);
}

.mini .reveal-price {
    font-size: 9px;
}

/* INVENTORY BULK SELL CARD */
.inv-bulk-sell-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.ibsc-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ibsc-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text3);
    letter-spacing: 1px;
}

.ibsc-value {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    font-family: var(--font-display);
}

.currency-img-lg {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 8px rgba(255, 184, 0, 0.5));
}

.btn-bulk-sell {
    min-width: 200px;
    height: 56px;
}

@media (max-width: 600px) {
    .inv-bulk-sell-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .ibsc-value {
        justify-content: center;
    }

    .btn-bulk-sell {
        width: 100%;
    }
}

/* Tick flash — each shuffle step */
.tick-flash {
    animation: revealTick 0.07s ease-out;
}

@keyframes revealTick {
    0% {
        opacity: 0.3;
        transform: scale(0.88);
    }

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

/* Winner lock-in animation */
.winner-locked {
    animation: winnerLockIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes winnerLockIn {
    0% {
        transform: scale(0.7);
        opacity: 0.4;
        filter: brightness(2.5) saturate(0);
    }

    40% {
        transform: scale(1.12);
        filter: brightness(1.6);
    }

    70% {
        transform: scale(0.97);
    }

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

/* Revealed state — slot glows */
.reveal-slot.revealed {
    border-color: rgba(255, 184, 0, 0.35);
    box-shadow: 0 0 50px rgba(255, 184, 0, 0.12), inset 0 0 30px rgba(255, 184, 0, 0.04);
}

.reveal-slot.revealed .reveal-glow-ring {
    opacity: 1;
}

.reveal-slot.revealed .reveal-img {
    filter: drop-shadow(0 0 25px rgba(255, 184, 0, 0.35)) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6));
}

/* Rarity accent colors on reveal */
.reveal-slot.revealed.epic-win {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 50px rgba(59, 130, 246, 0.12);
}

.reveal-slot.revealed.epic-win .reveal-glow-ring {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 65%);
}

.reveal-slot.revealed.legendary-win {
    border-color: rgba(255, 0, 255, 0.4);
    box-shadow: 0 0 50px rgba(255, 0, 255, 0.12);
}

.reveal-slot.revealed.legendary-win .reveal-glow-ring {
    background: radial-gradient(circle, rgba(255, 0, 255, 0.15) 0%, transparent 65%);
}

.reveal-slot.revealed.mythic-win {
    border-color: rgba(235, 75, 75, 0.4);
    box-shadow: 0 0 50px rgba(235, 75, 75, 0.12);
}

.reveal-slot.revealed.mythic-win .reveal-glow-ring {
    background: radial-gradient(circle, rgba(235, 75, 75, 0.2) 0%, transparent 65%);
}

.reveal-slot.revealed.ultimate-win {
    border-color: rgba(245, 197, 24, 0.5);
    box-shadow: 0 0 60px rgba(245, 197, 24, 0.15);
}

.reveal-slot.revealed.ultimate-win .reveal-glow-ring {
    background: radial-gradient(circle, rgba(245, 197, 24, 0.2) 0%, transparent 65%);
}

/* Skip button stays same */
.skip-btn {
    display: none;
    margin: 10px auto;
    padding: 10px 25px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 700;
    font-family: inherit;
}

/* ====== WIN OVERLAY — PREMIUM MINIMAL ====== */
.win-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    background: rgba(5, 8, 18, 0.97);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.win-overlay::-webkit-scrollbar {
    display: none !important;
}

.win-overlay.show {
    display: flex;
    z-index: 999999 !important;
}

/* Close button */
.win-close-btn {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
}

.win-close-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: scale(1.1);
}

/* Win rays/particles disabled */
.win-rays,
.win-particles {
    display: none !important;
}

/* Single Win Card */
.win-card {
    position: relative;
    z-index: 1;
    text-align: center;
    animation: winFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 95%;
    max-width: 500px;
}

.win-card::before,
.win-card::after {
    display: none !important;
}

@keyframes winFadeIn {
    0% {
        transform: scale(0.85);
        opacity: 0;
    }

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

/* Win image with glow */
.win-img-wrap {
    position: relative;
    margin-bottom: 24px;
    background: transparent !important;
    border: none !important;
}

.win-img-wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 184, 0, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    animation: winGlowPulse 2.5s ease-in-out infinite;
}

@keyframes winGlowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }

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

.win-img-wrap img {
    max-height: 280px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 40px rgba(255, 184, 0, 0.2));
    mix-blend-mode: normal !important;
    background: transparent !important;
}

.win-name {
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 8px;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.win-uc {
    font-size: 28px;
    font-weight: 900;
    color: var(--accent);
    text-shadow: 0 0 15px rgba(255, 106, 0, 0.3);
}

.win-tap {
    display: none;
}

.win-actions {
    margin: 8px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 260px;
}

.win-actions .btn {
    padding: 10px 20px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}

/* Multi Win */
.win-multi-container {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 1100px;
    width: 100%;
    animation: winFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.win-multi-title {
    display: none;
}

.win-multi-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    margin: 20px auto !important;
    max-width: 1100px !important;
}

.win-multi-item {
    background: var(--bg3);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px;
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    animation: winItemPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    position: relative;
    overflow: hidden;
    width: 190px !important;
    height: 250px !important;
}

/* Rarity Top Glow Line */
.win-multi-item::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    z-index: 5 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.win-multi-item.common::before {
    background: #5a6577 !important;
    box-shadow: 0 0 15px #5a6577 !important;
}

.win-multi-item.epic::before {
    background: #3b82f6 !important;
    box-shadow: 0 0 15px #3b82f6 !important;
}

.win-multi-item.legendary::before {
    background: #ff00ff !important;
    box-shadow: 0 0 15px #ff00ff !important;
}

.win-multi-item.mythic::before {
    background: #eb4b4b !important;
    box-shadow: 0 0 15px #eb4b4b !important;
}

.win-multi-item.ultimate::before {
    background: #f5c518 !important;
    box-shadow: 0 0 15px #f5c518 !important;
}

/* Premium Rarity Gradients */
.win-multi-item.common {
    background: linear-gradient(180deg, rgba(35, 42, 55, 0.9) 0%, rgba(15, 18, 25, 1) 100%) !important;
}

.win-multi-item.epic {
    background: linear-gradient(180deg, rgba(20, 35, 80, 0.9) 0%, rgba(8, 15, 35, 1) 100%) !important;
}

.win-multi-item.legendary {
    background: linear-gradient(180deg, rgba(65, 15, 85, 0.9) 0%, rgba(35, 5, 45, 1) 100%) !important;
}

.win-multi-item.mythic {
    background: linear-gradient(180deg, rgba(85, 20, 20, 0.9) 0%, rgba(45, 10, 10, 1) 100%) !important;
}

.win-multi-item.ultimate {
    background: linear-gradient(180deg, rgba(85, 75, 15, 0.85) 0%, rgba(45, 40, 5, 1) 100%) !important;
}

.win-multi-img {
    max-width: 95% !important;
    height: 130px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.6));
    margin-bottom: auto;
}

@keyframes winItemPop {
    from {
        transform: scale(0.7);
        opacity: 0;
    }

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

.win-multi-name {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

.win-multi-uc {
    font-size: 12px;
    font-weight: 900;
    color: var(--accent);
}

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.win-multi-uc {
    font-size: 12px;
    font-weight: 900;
    color: var(--accent);
}

#modalStageGame {
    padding: 20px 0;
}

/* DETAIL ITEM REDESIGN (IMAGE-LIKE) */
.detail-item {
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 20px 10px !important;
    border-bottom: none !important;
}

.detail-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 15% !important;
    right: 15% !important;
    height: 3px !important;
    border-radius: 0 0 4px 4px !important;
    z-index: 1 !important;
}

.detail-item.uc-common::before,
.detail-item.common::before {
    background: #5a6577 !important;
}

.detail-item.uc-blue::before,
.detail-item.epic::before {
    background: #3b82f6 !important;
}

.detail-item.uc-purple::before,
.detail-item.legendary::before {
    background: #ff00ff !important;
}

.detail-item.uc-red::before,
.detail-item.mythic::before {
    background: #eb4b4b !important;
}

.detail-item.uc-gold::before,
.detail-item.ultimate::before {
    background: #f5c518 !important;
}

.detail-item-img {
    height: 70px !important;
    margin-bottom: 15px !important;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5)) !important;
}

.detail-item-name {
    font-size: 10px !important;
    color: var(--text2) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    height: auto !important;
    margin-bottom: 0 !important;
}

.cpc-item.active {
    background: radial-gradient(circle at 50% 100%, var(--active-glow, rgba(255, 184, 0, 0.15)) 0%, var(--bg2) 80%) !important;
    border-color: var(--active-glow, var(--accent)) !important;
}

.cpc-name {
    font-size: 11px;
    color: var(--text2);
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 10px;
    opacity: 0.8;
}

.cpc-item.active .cpc-name {
    opacity: 1;
    color: #fff;
}

/* INCREASE WIDTH OF CASE PAGE */
.case-page-inner {
    max-width: 100% !important;
}

.case-page-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding-bottom: 30px !important;
}

.case-main-visual {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px;
    min-height: 400px !important;
    background: transparent !important;
}

.case-hero-card {
    width: 380px;
    height: 380px;
    max-width: 100%;
    max-height: 100vw;
    margin: 0 auto;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 24px;
    z-index: 10 !important;
    overflow: visible !important;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.case-hero-card::before {
    display: none;
}

.case-hero-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, var(--case-color) 0%, transparent 80%);
    opacity: 0.15;
    z-index: 1;
}

.case-hero-img {
    width: 320px !important;
    height: 320px !important;
    max-width: 90vw !important;
    max-height: 50vh !important;
    object-fit: contain;
    z-index: 10 !important;
    position: relative;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
    animation: none;
}

@keyframes caseHeroFloat {

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

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

.case-hero-name {
    margin-top: 15px;
    font-size: 1.6rem;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    z-index: 2;
}

.case-items-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 18px !important;
}

/* ITEM CARD REDESIGN (IMAGE-LIKE) */
.detail-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 18px !important;
    min-height: 260px !important;
    justify-content: flex-end !important;
    border: none !important;
    width: calc((100% - 5 * 18px) / 6) !important;
}

/* Backgrounds based on rarity class (from ucTierClass) — SOLID FULL FILL */
.detail-item.uc-common,
.detail-item.common {
    background: rgba(90, 101, 119, 0.2) !important;
}

.detail-item.uc-blue,
.detail-item.epic {
    background: rgba(59, 130, 246, 0.2) !important;
}

.detail-item.uc-purple,
.detail-item.legendary {
    background: rgba(255, 0, 255, 0.2) !important;
}

.detail-item.uc-red,
.detail-item.mythic {
    background: rgba(235, 75, 75, 0.25) !important;
}

.detail-item.uc-gold,
.detail-item.ultimate {
    background: rgba(245, 197, 24, 0.25) !important;
}

/* Atmospheric inner glow — FULL SURFACE VIBRANCE */
.detail-item-bg-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.3;
    transition: opacity 0.3s;
}

.detail-item.uc-common .detail-item-bg-glow,
.detail-item.common .detail-item-bg-glow {
    background: radial-gradient(circle at 50% 50%, rgba(90, 101, 119, 0.3) 0%, transparent 100%);
}

.detail-item.uc-blue .detail-item-bg-glow,
.detail-item.epic .detail-item-bg-glow {
    background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.3) 0%, transparent 100%);
}

.detail-item.uc-purple .detail-item-bg-glow,
.detail-item.legendary .detail-item-bg-glow {
    background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.3) 0%, transparent 100%);
}

.detail-item.uc-red .detail-item-bg-glow,
.detail-item.mythic .detail-item-bg-glow {
    background: radial-gradient(circle at 50% 50%, rgba(235, 75, 75, 0.4) 0%, transparent 100%);
}

.detail-item.uc-gold .detail-item-bg-glow,
.detail-item.ultimate .detail-item-bg-glow {
    background: radial-gradient(circle at 50% 50%, rgba(245, 197, 24, 0.4) 0%, transparent 100%);
}

.detail-item-category {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    margin-bottom: 2px !important;
}

.detail-item-name {
    font-size: 14px !important;
    color: #fff !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.detail-item-img {
    height: 150px !important;
    width: 95% !important;
    object-fit: contain !important;
    position: absolute !important;
    top: 42% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5)) !important;
}

.detail-item:hover .detail-item-img {
    transform: translate(-50%, -55%) scale(1.15) !important;
}

/* REVEAL OVERLAY */
.di-reveal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(18, 18, 26, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
    border-radius: 12px;
    backdrop-filter: blur(8px);
}

.detail-item.revealed .di-reveal-overlay {
    opacity: 1;
    pointer-events: auto;
}

.di-reveal-price {
    font-size: 18px;
    font-weight: 900;
    color: var(--accent);
    margin-bottom: 5px;
}

.di-reveal-chance {
    font-size: 12px;
    color: var(--text3);
    font-weight: 700;
}

.case-card,
.case-hero-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.case-card.no-card::before,
.case-card.no-card::after,
.case-hero-card.no-card::before,
.case-hero-card.no-card::after {
    display: none !important;
}

.case-card.no-card,
.case-hero-card.no-card {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}

.case-card.no-card .case-img-wrap,
.case-hero-card.no-card .case-img-wrap {
    background: none !important;
}



/* ====== HOME INFO & CONTACT SECTION ====== */
.home-info-section {
    position: relative;
    padding: 80px 0;
    background: radial-gradient(circle at 70% 50%, rgba(255, 106, 0, 0.05) 0%, transparent 60%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 40px;
    overflow: hidden;
}

.hi-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: flex-end;
    max-width: 100%;
    margin: 0 auto;
}

.hi-badge {
    display: inline-flex;
    padding: 6px 16px;
    background: rgba(255, 106, 0, 0.1);
    border: 1px solid rgba(255, 106, 0, 0.2);
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.hi-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 38px;
    font-weight: 950;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff;
}

.hi-accent {
    color: var(--accent);
}

.hi-desc {
    font-size: 16px;
    color: var(--text2);
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 600px;
}

.hi-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

.hi-feat-card {
    display: flex;
    gap: 15px;
}

.hfc-icon {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    color: var(--accent);
}

.hfc-text h4 {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 4px;
    color: #fff;
}

.hfc-text p {
    font-size: 13px;
    color: var(--text3);
    line-height: 1.4;
}

.hi-contacts h3 {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: var(--text3);
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hi-contact-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.hi-contact-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 25px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    transition: all 0.3s;
    min-width: 240px;
}

.hi-contact-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-glow);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.hcb-icon {
    font-size: 24px;
}

.hcb-info span {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

.hcb-info small {
    display: block;
    font-size: 12px;
    color: var(--text3);
}

.hi-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.hi-char-img {
    width: 100%;
    max-width: 500px;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5));
    transform: translateY(20px);
}

.hi-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: var(--accent);
    filter: blur(120px);
    opacity: 0.15;
    z-index: 1;
}

/* ========================= */
/* COMPREHENSIVE RESPONSIVE  */
/* ========================= */

/* Ensure all buttons/inputs inherit font */
button,
input,
select,
textarea {
    font-family: inherit;
}

/* --- TABLET (≤768px) --- */
@media (max-width: 768px) {
    .pm-grid {
        grid-template-columns: 1fr;
    }

    .nav-content {
        padding: 0 12px;
    }

    .page {
        padding-left: 10px;
        padding-right: 10px;
    }

    .logo span {
        font-size: 12px !important;
        /* Shrunk further to 12px to ensure no overlap */
        letter-spacing: 0px !important;
    }

    #adminLink,
    .nav-admin {
        display: none !important;
        /* Hide settings gear by both class and ID */
        visibility: hidden !important;
        width: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .section-title {
        font-size: 20px;
    }

    .win-multi-grid {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 8px;
    }

    .win-multi-container {
        max-width: 100%;
        padding: 0 10px;
    }

    .hi-grid {
        grid-template-columns: 1fr;
    }

    .hi-contact-btn {
        min-width: auto;
        width: 100%;
    }

    .reveal-item-inner {
        padding: 8px 4px !important;
        position: relative !important;
        overflow: hidden !important;
        gap: 2px !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        /* Fill the slot completely */
    }

    .reveal-slot {
        border-radius: 12px !important;
        padding: 0 !important;
        /* No padding around inner */
        background: transparent !important;
        /* Let inner show full color */
    }

    .reveal-display {
        padding: 0 !important;
    }

    .reveal-glow-ring {
        display: none !important;
        /* Remove the "shadow/glow" behind */
    }

    .reveal-item-inner::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 3px !important;
        z-index: 5 !important;
        background: rgba(255, 255, 255, 0.1) !important;
    }

    .reveal-item-inner.common::before {
        background: #5a6577 !important;
    }

    .reveal-item-inner.epic::before {
        background: #3b82f6 !important;
        box-shadow: 0 0 10px #3b82f6;
    }

    .reveal-item-inner.legendary::before {
        background: #ff00ff !important;
        box-shadow: 0 0 10px #ff00ff;
    }

    .reveal-item-inner.mythic::before {
        background: #eb4b4b !important;
        box-shadow: 0 0 10px #eb4b4b;
    }

    .reveal-item-inner.ultimate::before {
        background: #f5c518 !important;
        box-shadow: 0 0 10px #f5c518;
    }

    .reveal-item-inner.common {
        background: linear-gradient(180deg, rgba(35, 42, 55, 0.9) 0%, rgba(15, 18, 25, 1) 100%) !important;
    }

    .reveal-item-inner.epic {
        background: linear-gradient(180deg, rgba(20, 35, 80, 0.9) 0%, rgba(8, 15, 35, 1) 100%) !important;
    }

    .reveal-item-inner.legendary {
        background: linear-gradient(180deg, rgba(65, 15, 85, 0.9) 0%, rgba(35, 5, 45, 1) 100%) !important;
    }

    .reveal-item-inner.mythic {
        background: linear-gradient(180deg, rgba(85, 20, 20, 0.9) 0%, rgba(45, 10, 10, 1) 100%) !important;
    }

    .reveal-item-inner.ultimate {
        background: linear-gradient(180deg, rgba(85, 75, 15, 0.85) 0%, rgba(45, 40, 5, 1) 100%) !important;
    }

    .reveal-item-name {
        font-size: 8px !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
        margin-bottom: 2px !important;
        max-height: 20px !important;
        overflow: hidden !important;
    }

    .reveal-img {
        height: 65px !important;
        max-width: 90% !important;
        object-fit: contain !important;
        filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5)) !important;
    }

    .reveal-price {
        font-size: 10px !important;
        font-weight: 900 !important;
        margin-top: 2px !important;
    }

    .reveal-rarity {
        font-size: 7px !important;
        padding: 1px 6px !important;
    }

    /* 5 columns for x10 mobile roulette as requested */
    #rouletteArea.reveal-grid.count-10 {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
        padding: 5px !important;
    }

    #rouletteArea.reveal-grid.count-5 {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
        padding: 5px !important;
    }

    #rouletteArea.reveal-grid.count-10 .reveal-slot.mini,
    #rouletteArea.reveal-grid.count-5 .reveal-slot.mini {
        aspect-ratio: 1 / 1.5 !important;
        height: auto !important;
    }

    /* Extra small fonts for 5-column mobile layout */
    #rouletteArea.reveal-grid.count-10 .reveal-item-name,
    #rouletteArea.reveal-grid.count-5 .reveal-item-name {
        font-size: 7px !important;
        max-height: 16px !important;
        margin-top: 2px !important;
    }

    #rouletteArea.reveal-grid.count-10 .reveal-img,
    #rouletteArea.reveal-grid.count-5 .reveal-img {
        height: 50px !important;
        /* Increased size */
        filter: none !important;
        /* Removed shadow */
    }

    #rouletteArea.reveal-grid.count-10 .reveal-price,
    #rouletteArea.reveal-grid.count-5 .reveal-price {
        font-size: 8px !important;
        margin-bottom: 2px !important;
    }

    .reveal-item-inner {
        box-shadow: none !important;
        /* Removed card shadow */
    }
}

/* --- MOBILE (≤480px) --- */
@media (max-width: 480px) {
    :root {
        --nav-height: 56px;
        --radius: 12px;
        --radius-sm: 8px;
    }

    body {
        font-size: 13px;
    }

    /* Header */
    .logo-text {
        font-size: 14px !important;
    }

    .nav-balance-text {
        font-size: 13px;
    }

    .nav-icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .nav-right {
        gap: 6px;
    }

    .nav-content {
        padding: 0 8px;
        gap: 6px;
    }

    /* Section Titles */
    .section-title {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .section-subtitle {
        font-size: 12px;
    }

    /* Case Grid */
    .cases-grid {
        display: flex !important;
        gap: 8px !important;
        justify-content: center !important;
    }

    .case-card {
        width: calc(50% - 6px) !important;
        min-width: 0 !important;
    }

    .case-card {
        border-radius: 10px;
    }

    .case-card-name {
        font-size: 11px;
    }

    .case-card-price {
        font-size: 12px;
    }

    .case-card-img {
        height: 80px;
    }

    /* Case Detail Modal */
    .case-detail-modal {
        padding: 10px;
    }

    .case-detail-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .case-main-visual {
        text-align: center;
    }

    .case-main-visual img {
        margin: 0 auto;
        display: block;
        max-width: 100%;
        height: auto;
    }

    .cdh-title {
        font-size: 20px;
    }

    .cdh-price {
        font-size: 16px;
    }

    .detail-items-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .detail-item {
        padding: 8px 4px;
    }

    .detail-item-name {
        font-size: 9px;
    }

    .detail-item-uc {
        font-size: 10px;
    }

    /* Open button area */
    .open-controls {
        padding: 0 10px;
    }

    .count-btn {
        padding: 8px 12px;
        font-size: 12px;
        min-width: 36px;
    }

    .open-btn,
    #openBtn {
        padding: 14px 20px;
        font-size: 15px;
        border-radius: 12px;
    }

    /* Roulette */
    #rouletteArea {
        margin: 10px auto;
    }

    .roulette-container {
        height: 160px;
        border-radius: 8px;
    }

    .roulette-container.mini-roulette {
        height: 100px;
    }

    .roulette-item {
        width: 150px !important;
        height: 140px;
    }

    .mini-roulette .roulette-item {
        width: 90px !important;
        height: 85px;
    }

    .r-name {
        font-size: 9px;
    }

    .r-uc {
        font-size: 10px;
    }

    .roulette-pointer-line::before {
        border-width: 10px 8px 0 8px;
    }

    .roulette-pointer-line::after {
        border-width: 0 8px 10px 8px;
    }

    .roulette-container::before,
    .roulette-container::after {
        width: 60px;
    }

    /* Multi-case grid on mobile */
    .count-5 .roulette-stack,
    .count-10 .roulette-stack {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 5px !important;
    }

    .count-5 .roulette-item,
    .count-10 .roulette-item {
        width: 100% !important;
        max-width: 70px !important;
        height: 80px !important;
    }

    /* Win Overlay */
    .win-overlay {
        padding: 15px 10px;
        overflow-y: auto;
    }

    .win-card {
        padding: 20px 15px;
        max-width: 95%;
    }

    .win-name {
        font-size: 18px;
    }

    .win-uc {
        font-size: 16px;
    }

    .win-img-wrap img {
        max-height: 180px;
    }

    .win-multi-grid {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .win-multi-item {
        width: auto !important;
        max-width: none !important;
        padding: 4px 2px !important;
        height: 110px !important;
        /* Shorter height as requested */
        border-radius: 6px !important;
        gap: 2px !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }

    .win-multi-img {
        width: 100% !important;
        height: 65px !important;
        margin-bottom: 2px !important;
        object-fit: contain !important;
    }

    .win-multi-name {
        font-size: 8px !important;
        line-height: 1 !important;
        white-space: normal !important;
        text-align: center !important;
        height: 24px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .win-multi-uc {
        font-size: 9px !important;
        margin-top: auto !important;
        padding-bottom: 2px !important;
    }

    /* Rarity backgrounds update for mobile to be more vibrant */
    .win-multi-item.ultimate {
        background: linear-gradient(180deg, #7a6e12 0%, #4a420b 100%) !important;
    }

    .win-multi-item.mythic {
        background: linear-gradient(180deg, #8a1a1a 0%, #5a1010 100%) !important;
    }

    .win-multi-item.legendary {
        background: linear-gradient(180deg, #7a1a7a 0%, #4a104a 100%) !important;
    }

    .win-multi-item.epic {
        background: linear-gradient(180deg, #1a4a8a 0%, #10305a 100%) !important;
    }

    .win-multi-item.common {
        background: linear-gradient(180deg, #3a4a5a 0%, #202a35 100%) !important;
    }


    /* Hero */
    .hero-banner {
        height: 250px;
    }

    .hero-title {
        font-size: 22px;
        letter-spacing: 1px;
    }

    .hero-subtitle {
        font-size: 12px;
    }

    /* Profile/Inventory */
    .pm-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .pm-header-actions {
        width: 100%;
        justify-content: center;
    }

    .pm-balance-card {
        flex-direction: column;
        padding: 15px 20px;
        gap: 12px;
        width: 100%;
        text-align: center;
        justify-content: center;
        min-width: 250px;
    }

    .pm-balance-val {
        justify-content: center;
    }

    .pm-balance {
        font-size: 18px;
    }

    .inv-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    .inv-item {
        padding: 10px 6px;
    }

    .inv-name {
        font-size: 10px;
    }

    .inv-price {
        font-size: 11px;
    }

    /* Sidebar Menu */
    .sidebar-menu {
        width: 280px;
    }

    .sidebar-user-name {
        font-size: 15px;
    }

    /* Bottom actions */
    /* Legacy Bottom actions removed - replaced by mobile-bottom-nav */

}

/* --- VERY SMALL (≤380px) --- */
@media (max-width: 420px) {
    .logo-text {
        font-size: 13px !important;
    }

    .cases-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .case-card {
        width: calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        min-width: 0 !important;
        flex-basis: calc(50% - 6px) !important;
    }

    .case-card-img {
        height: 100px;
    }

    .case-card-name {
        font-size: 13px;
    }

    .case-card-price {
        font-size: 14px;
    }

    .detail-items-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .win-multi-grid {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .win-multi-item {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        /* Allow shrinking */
        padding: 4px 2px !important;
        height: 140px !important;
        border-radius: 6px !important;
        gap: 2px !important;
        overflow: hidden !important;
    }

    .win-multi-img {
        width: 100% !important;
        height: 55px !important;
        object-fit: contain !important;
    }

    .win-multi-name {
        font-size: 7px !important;
        line-height: 1 !important;
        white-space: normal !important;
        text-align: center !important;
        height: 18px !important;
        overflow: hidden !important;
    }

    .win-multi-uc {
        font-size: 8px !important;
        margin-top: auto !important;
    }

    .hero-title {
        font-size: 20px;
    }

    .cdh-title {
        font-size: 18px;
    }

    .count-5 .roulette-stack,
    .count-10 .roulette-stack,
    .reveal-grid.count-5,
    .reveal-grid.count-10 {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
    }

    .reveal-slot.mini {
        width: 100% !important;
        height: 110px !important;
        /* Shorter height as requested */
        border-radius: 6px !important;
    }

    .reveal-item-inner {
        padding: 4px 2px !important;
        gap: 1px !important;
        justify-content: space-between !important;
    }

    .reveal-img {
        max-height: 55px !important;
        object-fit: contain !important;
    }

    .reveal-item-name {
        font-size: 7px !important;
        line-height: 1 !important;
        height: 18px !important;
    }

    .reveal-rarity {
        font-size: 6px !important;
        padding: 2px 4px !important;
    }

    .reveal-price {
        font-size: 8px !important;
        margin-top: auto !important;
    }
}

/* --- TELEGRAM WEBAPP SPECIFIC --- */
body.tg-webapp {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* When opened inside TG WebApp, add extra bottom padding for nav */
.tg-webapp .page {
    padding-bottom: calc(var(--nav-height) + 20px + env(safe-area-inset-bottom, 0px));
}

.tg-webapp .mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* TG WebApp header condensed */
.tg-webapp .nav-content {
    padding: 0 8px;
}

/* Fix for TG WebApp viewport height */
.tg-webapp .win-overlay {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
}

.tg-webapp .case-detail-modal {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
}

/* CATEGORY SECTIONS */
.category-section {
    margin-bottom: 40px;
}

.category-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.category-header.centered {
    flex-direction: column;
    text-align: center;
    gap: 10px;
}

.cat-title h3 {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    margin: 0;
    letter-spacing: 2px;
}

.category-header.centered .cat-line {
    width: 60px;
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
    margin: 0 auto;
}

.cat-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.rule-warning-inventory {
    background: rgba(234, 84, 85, 0.1);
    border: 1px solid rgba(234, 84, 85, 0.3);
    color: #ea5455;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: pulse-red 2s infinite;
}

/* ======= HOME STATS GRID ======= */
.hi-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 25px 0;
}

.hi-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px 15px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.hi-stat-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.hi-stat-icon {
    font-size: 24px;
    margin-bottom: 5px;
    filter: drop-shadow(0 0 10px rgba(255, 184, 0, 0.2));
}

.hi-stat-val {
    font-size: 28px;
    font-weight: 950;
    color: #fff;
    font-family: 'Unbounded', sans-serif;
    letter-spacing: -1px;
}

.hi-stat-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ======= MOBILE BOTTOM NAVIGATION ======= */
.mobile-bottom-nav {
    display: none; /* Hidden by default, shown in media query */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75px;
    background: rgba(20, 15, 10, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 184, 0, 0.15);
    z-index: 10000;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
}

.m-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 1;
    cursor: pointer;
    transition: transform 0.2s;
    text-align: center;
}

.m-nav-item span {
    font-size: 10px;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.m-nav-item.active span {
    color: var(--gold);
}

.m-nav-item.active .premium-sticker-svg {
    stroke: var(--gold);
    filter: drop-shadow(0 0 10px rgba(255, 184, 0, 0.4));
}

.m-nav-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text3);
}

.m-nav-center {
    margin-top: -35px;
}

.m-nav-center-outer {
    width: 65px;
    height: 65px;
    background: var(--bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(255, 184, 0, 0.15);
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.4);
}

.m-nav-center-inner {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--gold), var(--orange));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    box-shadow: 0 5px 15px rgba(255, 184, 0, 0.3);
}

.m-nav-center span {
    margin-top: 5px;
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }
    body {
        padding-bottom: 85px !important;
    }
    .m-nav-item span {
        font-size: 9px !important;
    }
}


.bn-text {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- MOBILE QUERIES --- */
/* ============================================================
   ULTIMATE MOBILE PREMIUM OVERRIDES (App-Style)
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --nav-height: 60px;
    }

    /* 1. Global & Layout */
    .container {
        padding: 0 15px !important;
    }

    .page {
        padding-bottom: 100px !important;
    }

    /* Wheel Responsive Adjustments */
    .wheel-header {
        padding: 10px 0 5px !important;
    }
    .wheel-header h1 {
        font-size: 20px !important;
        margin-bottom: 4px !important;
    }
    .wheel-header p {
        font-size: 13px !important;
        margin-bottom: 5px !important;
    }
    .wheel-main-container {
        gap: 15px !important;
    }
    .wheel-tg-promo {
        margin: 5px auto !important;
        padding: 5px 10px !important;
        border-radius: 8px !important;
    }
    .wheel-promo-input label {
        margin-bottom: 6px !important;
        font-size: 13px !important;
    }
    .input-with-button input {
        padding: 10px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }
    .input-with-button button {
        padding: 10px 15px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }
    .wheel-hint {
        font-size: 11px !important;
        margin-top: 5px !important;
    }

    /* 2. Header: Ultra-Minimalist */
    .navbar {
        background: rgba(5, 10, 24, 0.85) !important;
        backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .nav-inner {
        padding: 0 8px !important;
        justify-content: space-between !important;
        gap: 5px !important;
    }

    .nav-links {
        display: none !important;
        /* Keep text links hidden as they are in bottom nav */
    }

    .nav-notif,
    .sound-toggle,
    .nav-admin,
    .profile-wrapper {
        display: flex;
    }

    /* Small Icons */
    .nav-notif,
    .sound-toggle,
    .nav-admin {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .nav-notif svg {
        width: 16px !important;
        height: 16px !important;
    }

    .logo {
        gap: 6px !important;
    }

    .logo img {
        height: 30px !important;
    }

    .logo span {
        display: block !important;
        font-size: 11px !important;
        letter-spacing: 0.5px !important;
    }

    .balance-box {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 2px 2px 2px 8px !important;
        border-radius: 10px !important;
        height: 32px !important;
        display: flex;
        align-items: center !important;
        gap: 4px !important;
    }

    .balance-amount {
        font-family: 'Unbounded', sans-serif !important;
        font-size: 11px !important;
        color: #fff !important;
    }

    .balance-currency img {
        width: 14px !important;
        height: 14px !important;
    }

    .btn-balance-add {
        width: 24px !important;
        height: 24px !important;
        background: #22c55e !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        clip-path: none !important;
        margin-left: 4px !important;
    }

    .user-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    /* 3. Hero Banner */
    .hero-banner {
        height: 140px !important;
        border-radius: 0 0 20px 20px !important;
        margin-bottom: 15px !important;
    }

    .hero-content {
        padding: 15px !important;
    }

    .hero-title {
        font-size: 18px !important;
        margin-bottom: 4px !important;
    }

    .hero-subtitle {
        font-size: 11px !important;
        margin-bottom: 10px !important;
    }

    .hero-cta {
        padding: 8px 16px !important;
        font-size: 12px !important;
    }

    /* 4. Live Drops */
    .live-drops {
        height: 50px !important;
        margin-bottom: 15px !important;
    }

    .ld-item-v2 {
        min-width: 100px !important;
        height: 42px !important;
        padding: 2px 8px !important;
        gap: 6px !important;
    }

    .ld-skin-wrap {
        width: 32px !important;
        height: 32px !important;
    }

    .ld-price-tag {
        font-size: 11px !important;
    }

    /* 5. Cases Grid (Keep as requested) */
    .cases-grid {
        display: flex !important;
        gap: 10px !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .case-card {
        width: calc(50% - 8px) !important;
        min-width: 0 !important;
    }

    /* 6. Section Titles */
    .section-title {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }

    /* 7. Profile & Inventory */
    .pm-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .pm-avatar {
        width: 60px !important;
        height: 60px !important;
    }

    .pm-username {
        font-size: 18px !important;
    }

    .inv-items-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .inv-item {
        padding: 10px !important;
    }

    .inv-img {
        height: 60px !important;
    }

    .inv-name {
        font-size: 9px !important;
        height: 24px !important;
    }

    /* 8. UC Store */
    .uc-packs-list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .uc-pack-card {
        padding: 15px 10px !important;
    }

    /* 9. Case Detail Page */
    .case-page-inner {
        padding: 10px !important;
    }

    .case-page-topbar {
        margin-bottom: 5px !important;
        gap: 8px !important;
        justify-content: space-between !important;
    }

    #detailTitleTopbar {
        display: none !important;
        /* Remove redundant top name */
    }

    .case-page-title-hero {
        font-size: 24px !important;
        margin: 20px 0 10px 0 !important;
        /* Added more top space */
        line-height: 1.2 !important;
    }

    #rouletteArea {
        margin-top: 65px !important;
        /* Push skins lower */
    }

    .case-page-counts {
        margin-top: 80px !important;
        /* Move even lower to clear Skip button */
        margin-bottom: 30px !important;
    }

    .reel-actions {
        margin-top: 6px !important;
        /* Position action area slightly lower */
    }

    #skipBtn {
        margin-top: 0 !important;
    }

    .case-page-actions {
        margin-top: 20px !important;
    }

    .case-top-title-wrap {
        flex: 1 !important;
        text-align: left !important;
        padding-left: 10px !important;
        overflow: hidden !important;
    }

    .case-page-title-mini {
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #fff !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    .case-page-back {
        padding: 8px 12px !important;
        font-size: 11px !important;
        min-width: 70px !important;
        position: relative !important;
        z-index: 9999 !important;
    }

    .case-page-top-actions {
        gap: 5px !important;
        position: relative !important;
        z-index: 9999 !important;
    }

    .case-page-balance {
        padding: 4px 8px !important;
        font-size: 10px !important;
        /* Smaller balance */
    }

    .case-page-balance .cpb-icon img {
        width: 12px !important;
        height: 12px !important;
    }

    .case-promo-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    .case-promo-btn span:last-child {
        display: none !important;
        /* Hide "Promokod kiritish" text on very small screens */
    }

    .case-promo-btn::after {
        content: "Promo" !important;
        /* Shorter text */
    }

    .case-page-title {
        font-size: 1.2rem !important;
        margin-bottom: 15px !important;
    }

    .case-hero-main-wrap {
        height: auto !important;
        min-height: 0 !important;
        max-height: 420px !important;
        overflow: visible !important;
    }

    .case-main-visual img {
        max-height: 160px !important;
    }

    /* Redundant counts block removed */

    .skip-btn {
        position: relative !important;
        z-index: 101 !important;
        margin: 20px auto 30px !important;
        /* Large bottom margin to push everything away */
        padding: 8px 20px !important;
        font-size: 12px !important;
        display: block !important;
        width: fit-content !important;
        background: rgba(26, 32, 53, 0.95) !important;
        border: 2px solid var(--accent) !important;
        border-radius: 10px !important;
    }

    .cp-count-btn {
        padding: 10px 6px !important;
        font-size: 12px !important;
        min-width: 40px !important;
        margin: 0 2px !important;
    }

    .case-page-actions {
        margin-top: 30px !important;
        /* Push the Open button further down */
    }

    .dw-btn-tactic {
        height: 60px !important;
        font-size: 1.1rem !important;
    }

    .case-items-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 0 15px !important;
    }
    .detail-item {
        width: calc((100% - 12px) / 2) !important;
    }

    .detail-item {
        min-height: 145px !important;
        padding: 12px 10px !important;
        border-radius: 12px !important;
        border-width: 1.5px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .detail-item .item-img-wrap,
    .detail-item-img {
        max-height: 65px !important;
        margin-bottom: 8px !important;
    }

    .detail-item img {
        height: 50px !important;
        width: auto !important;
        max-width: 100% !important;
    }

    .detail-item-name,
    .detail-item .item-name {
        font-size: 11px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        margin-top: 5px !important;
        white-space: normal !important;
        width: 100% !important;
    }

    .detail-item-uc,
    .detail-item .item-uc-val {
        font-size: 11px !important;
    }

    .di-reveal-price {
        font-size: 15px !important;
        margin-bottom: 4px !important;
    }

    .di-reveal-chance {
        font-size: 11px !important;
    }

    .di-reveal-price .currency-img {
        width: 15px !important;
        height: 15px !important;
    }

    /* 10. Win Overlay */
    .win-card {
        margin-top: 20px !important;
    }

    .win-img-wrap img {
        max-height: 180px !important;
    }

    .win-name {
        font-size: 16px !important;
    }

    /* 11. Stats & Info Section */
    .hi-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .hi-stat-card {
        padding: 15px !important;
    }

    .hi-contact-links {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .hi-title {
        font-size: 20px !important;
    }

    .hi-desc {
        font-size: 13px !important;
    }

    .hi-contact-btn {
        padding: 15px !important;
    }

    /* 12. Bottom Navigation visibility */
    /* Visibility handled by .mobile-bottom-nav */


    /* 13. Improved Touch Targets */
    .nav-notif,
    .sound-toggle,
    .nav-admin,
    .btn-balance-add,
    .user-avatar {
        position: relative !important;
        cursor: pointer !important;
    }

    /* Expand hit area for small buttons */
    .nav-notif::after,
    .sound-toggle::after,
    .nav-admin::after,
    .btn-balance-add::after {
        content: '';
        position: absolute;
        inset: -10px;
        /* Expands hit area by 10px on all sides */
    }

    .section-title {
        font-size: 13px !important;
        padding: 6px 15px !important;
        letter-spacing: 1px !important;
    }

    /* 14. Deposit Modal Mobile Optimization */
    .dm-modern-wrap {
        max-width: 96% !important;
        margin: 20px auto !important;
    }

    .dm-title {
        font-size: 16px !important;
    }

    .dm-grid {
        grid-template-columns: 1fr !important;
    }

    .dm-sidebar {
        display: none !important;
        /* Hide sidebar on mobile to save space */
    }

    .dm-body {
        padding: 12px 10px !important;
    }

    .dm-section-title {
        font-size: 12px !important;
        margin-bottom: 10px !important;
    }

    .dm-method-card {
        padding: 12px 8px !important;
    }

    .dm-method-img {
        height: 32px !important;
    }

    .dm-method-name {
        font-size: 11px !important;
    }

    .dm-input-field {
        padding: 8px 12px !important;
    }

    .dm-input-field input {
        font-size: 14px !important;
    }

    .dm-quick-grid {
        gap: 5px !important;
    }

    .dm-quick-grid button {
        padding: 8px 4px !important;
        font-size: 10px !important;
    }

    .dm-instruction-card {
        padding: 15px !important;
    }

    .dm-instr-title {
        font-size: 14px !important;
    }

    .dm-timer {
        font-size: 15px !important;
    }

    .dm-instr-note {
        font-size: 11px !important;
        margin-bottom: 15px !important;
    }

    .dm-copy-val {
        height: 44px !important;
        padding-left: 12px !important;
        font-size: 12px !important;
    }

    .btn-copy-mini {
        height: 32px !important;
        padding: 0 8px !important;
        font-size: 10px !important;
    }

    .dm-receipt-upload {
        padding: 15px !important;
    }

    .dm-rup-icon {
        font-size: 20px !important;
        margin-bottom: 5px !important;
    }

    .dm-rup-text {
        font-size: 11px !important;
    }

    .dm-tip {
        font-size: 10px !important;
        padding: 10px !important;
        margin-top: 10px !important;
    }

    .dm-warning-box {
        font-size: 11px !important;
        padding: 10px !important;
        margin-bottom: 10px !important;
    }

    .dm-copy-field {
        margin-bottom: 10px !important;
    }

    .dm-unique-explain {
        margin-bottom: 10px !important;
        padding: 10px !important;
        font-size: 11px !important;
    }

    .dm-instr-note {
        margin-bottom: 10px !important;
    }

    .mobile-back-wrap {
        display: block !important;
        margin-bottom: 15px !important;
    }

    .mobile-back-btn:active {
        background: rgba(255, 255, 255, 0.1) !important;
        transform: scale(0.95) !important;
    }

    .mobile-back-btn svg {
        opacity: 0.7 !important;
    }

    /* Mobile Win Results Grid Fix: 5 columns / 2 rows */
    .win-multi-grid {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
        padding: 6px !important;
        box-sizing: border-box !important;
    }

    .win-multi-item {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 120px !important;
        padding: 6px 2px !important;
        border-radius: 8px !important;
        gap: 4px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .win-multi-img {
        max-height: 42px !important;
        width: auto !important;
        object-fit: contain !important;
        margin-bottom: auto !important;
    }

    .win-multi-name {
        font-size: 8px !important;
        font-weight: 700 !important;
        margin-top: 2px !important;
        margin-bottom: 2px !important;
        line-height: 1.1 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
    }

    .win-multi-uc {
        font-size: 8px !important;
        font-weight: 900 !important;
        margin-bottom: 0 !important;
    }

    .win-multi-uc img {
        width: 10px !important;
        height: 10px !important;
        object-fit: contain !important;
    }

    /* Mobile Soft Fade Mask for Spinning Slots */
    [id^="reelViewport"] {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 1) 92%, transparent 100%) !important;
        mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 1) 92%, transparent 100%) !important;
    }

    /* Mobile Roulette Compact Sizing (x1-x10) */
}

.circular-logo {
    border-radius: 50% !important;
    object-fit: cover !important;
    box-shadow: 0 0 20px rgba(255, 184, 0, 0.4) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    aspect-ratio: 1/1;
}

/* ======= SEARCH & FILTER BAR ======= */
.filter-bar-wrap {
    margin: 20px 0 40px 0;
    padding: 0 15px;
    position: sticky;
    top: 60px; /* Stay below the navbar */
    z-index: 2000; /* Ensure it stays above content */
}

.filter-bar-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(20, 20, 25, 0.95); /* More opaque for better contrast when sticky */
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 10px;
    border-radius: 16px;
    backdrop-filter: blur(25px);
    flex-wrap: wrap;
    max-width: 1400px;
    margin: 0 auto;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

/* Custom Dropdown Styling */
.filter-custom-select {
    position: relative;
    width: 100%;
    cursor: pointer;
    user-select: none;
}

.fcs-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.fcs-selected::after {
    content: '▼';
    font-size: 10px;
    opacity: 0.5;
    transition: 0.3s;
}

.filter-custom-select.active .fcs-selected::after {
    transform: rotate(180deg);
}

.fcs-options {
    position: absolute;
    top: calc(100% + 15px);
    left: -15px;
    right: -15px;
    background: rgba(25, 25, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    display: none;
    z-index: 1001;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    backdrop-filter: blur(20px);
    animation: fadeInSlide 0.2s ease-out;
}

@keyframes fadeInSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.filter-custom-select.active .fcs-options {
    display: block;
}

.fcs-option {
    padding: 12px 20px;
    color: var(--text2);
    font-size: 14px;
    font-weight: 600;
    transition: 0.2s;
}

.fcs-option:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent);
    padding-left: 25px;
}

.fcs-option.active {
    background: rgba(255, 184, 0, 0.1);
    color: var(--accent);
}

.filter-btn-home {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    color: var(--text2);
    font-size: 20px;
}

.filter-btn-home:hover {
    background: var(--accent);
    color: #000;
    border-color: transparent;
    transform: translateY(-2px);
}

.filter-group {
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    gap: 10px;
    transition: 0.2s;
}

.filter-group:focus-within {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.08);
}

.filter-group.search {
    flex: 2;
    min-width: 250px;
}

.filter-group.category {
    flex: 1.2;
    min-width: 200px;
}

.filter-group.price {
    flex: 0.8;
    min-width: 130px;
}

.filter-icon {
    font-size: 16px;
    opacity: 0.6;
}

.filter-input {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    outline: none;
}

.filter-input::placeholder {
    color: rgba(255,255,255,0.3);
}

.filter-select {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    outline: none;
    cursor: pointer;
}

.filter-select option {
    background: #111;
    color: #fff;
}

.filter-reset-btn {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    color: var(--text3);
    font-size: 18px;
}

.filter-reset-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
}

.filter-mobile-collapsible {
    display: contents;
}

.filter-toggle-mobile {
    display: none;
}

@media (max-width: 768px) {
    .filter-bar-wrap {
        top: 60px;
        margin: 10px 0 20px 0;
        padding: 0 8px;
    }
    .filter-bar-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px;
        border-radius: 12px;
    }
    .filter-btn-home {
        display: flex !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        flex-shrink: 0 !important;
    }
    .filter-group.category {
        display: flex !important;
        flex: 1 !important;
        min-width: 0 !important;
        height: 40px !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    .filter-group.category .filter-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: 4px !important;
        opacity: 0.9 !important;
    }
    .filter-toggle-mobile {
        display: flex !important;
        width: 40px !important;
        height: 40px !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        color: var(--text2) !important;
        flex-shrink: 0 !important;
    }
    .filter-toggle-mobile.active {
        background: var(--accent) !important;
        color: #000 !important;
        border-color: transparent !important;
    }
    .filter-toggle-mobile.active .premium-sticker-svg {
        color: #000 !important;
        stroke: #000 !important;
        filter: none !important;
    }
    .filter-mobile-collapsible {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 10px;
        margin-top: 4px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .filter-mobile-collapsible.active {
        display: flex;
    }
    .filter-mobile-collapsible .filter-group {
        height: 44px !important;
        border-radius: 22px !important;
        padding: 0 16px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .filter-mobile-collapsible .filter-group.search {
        width: 100% !important;
        min-width: 0 !important;
    }
    .filter-mobile-collapsible .filter-group.price {
        width: 100% !important;
        display: flex !important;
        min-width: 0 !important;
    }
    .filter-mobile-collapsible .filter-reset-btn {
        display: flex !important;
        width: 100% !important;
        height: 44px !important;
        border-radius: 22px !important;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .filter-mobile-collapsible .filter-input::placeholder {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* Mobil rejimda Premium Header-ni ko'rsatish va chiroyli tartibga solish */
    .navbar {
        display: flex !important;
        height: 55px !important;
        background: rgba(23, 19, 23, 0.95) !important; /* Deep dark chocolate background to match site theme */
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border-bottom: 1px solid rgba(255, 184, 0, 0.15) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }

    .nav-inner {
        padding: 0 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Hide unnecessary desktop links & elements in mobile header */
    .nav-links, 
    .profile-wrapper, 
    .nav-notif, 
    .nav-admin, 
    #adminLink {
        display: none !important;
    }

    /* Premium mobile logo-wrap */
    .logo-wrap {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-right: 0 !important;
    }

    .logo-wrap img {
        height: 28px !important;
        width: 28px !important;
    }

    .logo-wrap span {
        font-size: 13px !important;
        letter-spacing: 0.5px !important;
    }

    /* Sound toggle style in mobile header */
    .nav-sound-toggle {
        margin-right: 8px !important;
        opacity: 0.8 !important;
    }

    /* Premium mobile balance box layout */
    .balance-box {
        padding: 4px 10px !important;
        height: 32px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        background: rgba(255, 184, 0, 0.08) !important;
        border: 1px solid rgba(255, 184, 0, 0.25) !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .balance-amount {
        font-weight: 800 !important;
    }

    .balance-currency img {
        width: 16px !important;
        height: 16px !important;
    }

    .btn-balance-add {
        width: 18px !important;
        height: 18px !important;
        font-size: 12px !important;
        line-height: 16px !important;
        border-radius: 4px !important;
        background: var(--gold) !important;
        color: #000 !important;
        margin-left: 2px !important;
    }

    /* Enable 100% smooth vertical scrolling on mobile views (both mouse wheel and swipe) */
    html, body {
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100% !important;
        position: relative !important;
        touch-action: auto !important;
    }

    /* Allow blocking scroll only when explicitly needed (e.g. during roulette or modal openings) */
    body.no-scroll {
        overflow: hidden !important;
        height: 100vh !important;
        touch-action: none !important;
    }

    /* Adjust main app/page container margin to fit below 55px sticky navbar */
    .app {
        padding-top: 0 !important;
    }
    .page {
        padding-top: 10px !important;
        margin-top: 0 !important;
    }
    .filter-bar-wrap {
        top: 55px !important; /* Move exactly below 55px sticky navbar! */
        margin: 5px 0 15px 0 !important;
    }

    /* Mobile: ensure long modals (deposit, withdraw) scroll fully past bottom nav */
    .modal-overlay {
        padding-bottom: 120px !important;
    }
    .modal-overlay .modal {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    /* Mobile Full-Screen Menu Overlay */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(16, 12, 10, 0.95);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        z-index: 9999;
        display: block; /* Use block so natural scrolling works without flexbox clipping */
        padding: 40px 20px 120px 20px; /* Extra bottom padding to ensure it scrolls past the very bottom */
        overflow-y: auto; /* Enable scrolling */
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y; /* Ensure touch scrolling works */
        animation: fadeInMenu 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes fadeInMenu {
        from { opacity: 0; transform: scale(1.05); }
        to { opacity: 1; transform: scale(1); }
    }

    .mobile-menu-content {
        width: 100%;
        max-width: 480px;
        background: var(--bg); /* Match the site's main background */
        border: 1px solid rgba(255, 184, 0, 0.15);
        border-radius: 20px;
        padding: 24px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: relative;
        margin: 0 auto; /* Center horizontally */
    }

    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding-bottom: 16px;
    }

    .mm-user-profile {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .mm-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent), #d48b00);
        box-shadow: 0 0 15px rgba(255, 184, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: 800;
        color: #fff !important;
        overflow: hidden;
        border: 2px solid rgba(255, 255, 255, 0.1);
    }

    .mm-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mm-name {
        font-family: 'Outfit', sans-serif;
        font-size: 20px;
        font-weight: 800;
        color: #fff;
    }

    .mm-id {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.6);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mm-close-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.8);
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.2s;
    }

    .mm-close-btn:hover {
        background: var(--red);
        color: #fff;
        border-color: transparent;
    }

    .mobile-menu-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mm-menu-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.04);
        color: rgba(255, 255, 255, 0.9);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mm-menu-item:active {
        background: rgba(255, 184, 0, 0.08);
        border-color: rgba(255, 184, 0, 0.2);
        color: var(--accent);
        transform: scale(0.98);
    }

    .mm-menu-item.danger {
        color: var(--red);
        border-color: rgba(234, 84, 85, 0.1);
    }

    .mm-menu-item.danger:active {
        background: rgba(234, 84, 85, 0.1);
        border-color: rgba(234, 84, 85, 0.2);
        color: var(--red);
    }

    .mm-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
    }

    .mm-divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.06);
        margin: 8px 0;
    }

    /* Mobile Social Links Section inside Overlay */
    .mobile-menu-footer {
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding-top: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mm-socials-title {
        font-size: 13px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.5);
        text-transform: uppercase;
        letter-spacing: 1px;
        text-align: center;
    }

    .mm-socials {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .mm-social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        color: #fff;
        transition: 0.2s;
    }

    .mm-social-link.telegram {
        background: #0088cc;
        box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3);
    }

    .mm-social-link.youtube {
        background: #ff0000;
        box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
    }

    .mm-social-link.instagram {
        grid-column: span 2;
        background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
        box-shadow: 0 4px 12px rgba(220, 39, 67, 0.3);
    }

    .mm-social-link:active {
        transform: scale(0.95);
        opacity: 0.9;
    }
}

/* PREMIUM GLOWING GIFT SVG */
.premium-gift-svg {
    color: var(--gold);
    filter: drop-shadow(0 0 5px rgba(255, 184, 0, 0.6));
    animation: pulseGift 2.2s infinite ease-in-out;
    display: inline-block;
    vertical-align: middle;
    transition: filter 0.3s ease;
}

.case-promo-btn:hover .premium-gift-svg {
    filter: drop-shadow(0 0 10px rgba(255, 184, 0, 0.9)) brightness(1.2);
}

@keyframes pulseGift {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 4px rgba(255, 184, 0, 0.5));
    }
    50% {
        transform: scale(1.08) rotate(3deg);
        filter: drop-shadow(0 0 9px rgba(255, 184, 0, 0.8));
    }
}

/* ============================================================
   ACTIVE PROMO CARD (Profile Sidebar)
   ============================================================ */
.active-promo-card {
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.08) 0%, rgba(255, 140, 0, 0.04) 100%);
    border: 1px solid rgba(255, 184, 0, 0.25) !important;
    border-radius: 16px !important;
    padding: 18px !important;
    position: relative;
    overflow: hidden;
    animation: apcFadeIn 0.4s ease;
}

.active-promo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffb800, #ff6a00, #ffb800);
    background-size: 200% 100%;
    animation: apcShimmer 3s linear infinite;
}

@keyframes apcFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes apcShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.apc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.apc-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: apcBadgePulse 2s ease-in-out infinite;
}

.promo-badge-free {
    background: linear-gradient(135deg, #00c853, #69f0ae);
    color: #003d19;
    box-shadow: 0 0 15px rgba(0, 200, 83, 0.4);
}

.promo-badge-discount {
    background: linear-gradient(135deg, #ffb800, #ff8f00);
    color: #3d2600;
    box-shadow: 0 0 15px rgba(255, 184, 0, 0.4);
}

@keyframes apcBadgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.apc-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.apc-body {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.apc-case-img-wrap {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.apc-case-img-wrap:hover {
    transform: scale(1.1) rotate(-3deg);
    box-shadow: 0 0 20px rgba(255, 184, 0, 0.3);
}

.apc-case-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.apc-info {
    flex: 1;
    min-width: 0;
}

.apc-case-name {
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.apc-price {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
}

.apc-old-price {
    font-size: 13px;
    color: var(--text3);
    text-decoration: line-through;
    opacity: 0.6;
}

.apc-new-price {
    font-size: 16px;
    font-weight: 950;
    color: #4ade80;
}

.promo-badge-discount ~ .apc-body .apc-new-price,
.apc-price .apc-new-price {
    color: #4ade80;
}

.apc-go-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(180deg, #ffca28 0%, #ffb300 40%, #ff8f00 100%);
    color: #fff;
    border: 1px solid rgba(255, 210, 80, 0.5);
    border-top-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    font-weight: 950;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    box-shadow:
        0 6px 20px rgba(255, 184, 0, 0.3),
        0 4px 10px rgba(0, 0, 0, 0.3),
        0 2px 0 rgba(255, 255, 255, 0.2) inset;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.apc-go-btn:hover {
    background: linear-gradient(180deg, #ffd54f 0%, #ffca28 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 30px rgba(255, 184, 0, 0.5);
}

.apc-go-btn:active {
    transform: translateY(0) scale(0.98);
}
/* --- LIVE DROPS STYLES --- */
.live-drops-container {
    display: flex;
    gap: 0px;
    background: rgba(13, 10, 15, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 12px 16px;
    margin-bottom: 25px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.4);
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    height: 175px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.live-drops-main {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    scrollbar-width: none; /* Hide scrollbar on Firefox */
}
.live-drops-main::-webkit-scrollbar {
    display: none; /* Hide scrollbar on Chrome/Safari/Webkit */
}
.live-drops-track {
    display: flex;
    gap: 12px;
    align-items: center;
}
.live-drop-item {
    width: 135px;
    min-width: 135px;
    height: 145px;
    background: radial-gradient(circle at 50% 30%, var(--rarity-color-alpha, rgba(28, 25, 34, 0.65)) 0%, rgba(18, 16, 22, 0.9) 100%);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: dropSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}
.live-drop-item:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.7), 0 0 15px var(--rarity-color-alpha);
}
.live-drop-item.rarity-common {
    background: radial-gradient(circle at 50% 35%, rgba(130, 140, 160, 0.35) 0%, rgba(130, 140, 160, 0.05) 60%, rgba(18, 16, 22, 0.95) 100%);
    border-color: rgba(130, 140, 160, 0.25);
}
.live-drop-item.rarity-uncommon {
    background: radial-gradient(circle at 50% 35%, rgba(46, 204, 113, 0.45) 0%, rgba(46, 204, 113, 0.08) 60%, rgba(18, 16, 22, 0.95) 100%);
    border-color: rgba(46, 204, 113, 0.35);
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5), 0 0 15px rgba(46, 204, 113, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.live-drop-item.rarity-rare {
    background: radial-gradient(circle at 50% 35%, rgba(0, 191, 255, 0.45) 0%, rgba(0, 191, 255, 0.08) 60%, rgba(18, 16, 22, 0.95) 100%);
    border-color: rgba(0, 191, 255, 0.35);
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5), 0 0 18px rgba(0, 191, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.live-drop-item.rarity-epic {
    background: radial-gradient(circle at 50% 35%, rgba(59, 130, 246, 0.45) 0%, rgba(59, 130, 246, 0.08) 60%, rgba(18, 16, 22, 0.95) 100%);
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5), 0 0 18px rgba(59, 130, 246, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.live-drop-item.rarity-legendary {
    background: radial-gradient(circle at 50% 35%, rgba(255, 0, 255, 0.55) 0%, rgba(255, 0, 255, 0.1) 60%, rgba(18, 16, 22, 0.95) 100%);
    border-color: rgba(255, 0, 255, 0.45);
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 0, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.live-drop-item.rarity-mythic {
    background: radial-gradient(circle at 50% 35%, rgba(235, 75, 75, 0.6) 0%, rgba(235, 75, 75, 0.1) 60%, rgba(18, 16, 22, 0.95) 100%);
    border-color: rgba(235, 75, 75, 0.45);
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5), 0 0 28px rgba(235, 75, 75, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.live-drop-item.rarity-ultimate {
    background: radial-gradient(circle at 50% 35%, rgba(250, 204, 21, 0.6) 0%, rgba(250, 204, 21, 0.1) 60%, rgba(18, 16, 22, 0.95) 100%);
    border-color: rgba(250, 204, 21, 0.45);
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5), 0 0 28px rgba(250, 204, 21, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.live-drop-item:hover img {
    transform: scale(1.08);
}
.live-drop-card-glow {
    display: none !important;
}
.live-drop-top-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 18px;
    z-index: 2;
}
.live-drop-username {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    width: 100%;
}
.live-drop-badge-crown {
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(255, 184, 0, 0.12);
    border: 1px solid rgba(255, 184, 0, 0.3);
    border-radius: 20px;
    padding: 1px 6px;
    font-size: 9.5px;
    font-weight: 800;
    color: #ffb800;
    text-shadow: 0 0 5px rgba(255, 184, 0, 0.3);
    height: 14px;
    line-height: 12px;
}
.crown-svg-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffb800;
}
.live-drop-dot-indicator {
    width: 6px;
    height: 6px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    flex-shrink: 0;
}
.live-drop-img-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 4px 0;
    z-index: 2;
}
.live-drop-img-wrap img {
    max-width: 85px;
    max-height: 65px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
    transition: transform 0.3s ease;
}
.live-drop-info-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    z-index: 2;
    margin-top: auto;
}
.live-drop-category {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}
.live-drop-name-text {
    font-size: 11px;
    color: #ffffff;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    margin-top: 2px;
    font-family: 'Outfit', sans-serif;
}
.top-drop-today {
    display: none !important; /* Hide sidebar "Kunlik Top" as per screenshot to let drops row fill 100% width */
}
@keyframes dropSlideIn {
    from {
        opacity: 0;
        width: 0;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        width: 135px;
        min-width: 135px;
        padding-left: 12px;
        padding-right: 12px;
        transform: scale(1);
    }
}
@media (max-width: 768px) {
    .live-drops-container {
        padding: 8px;
        height: auto;
    }
    .live-drops-main {
        height: 125px !important;
        width: 100%;
    }
    .live-drop-item {
        width: 105px !important;
        min-width: 105px !important;
        height: 115px !important;
        padding: 6px 8px !important;
        border-radius: 10px !important;
        animation: dropSlideInMobile 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }
    .live-drop-img-wrap img {
        max-width: 65px !important;
        max-height: 48px !important;
    }
    .live-drop-badge-crown {
        font-size: 8px !important;
        padding: 0px 4px !important;
        height: 12px !important;
        line-height: 10px !important;
    }
    .live-drop-dot-indicator {
        width: 5px !important;
        height: 5px !important;
    }
    .live-drop-category {
        font-size: 7px !important;
    }
    .live-drop-name-text {
        font-size: 9.5px !important;
        margin-top: 1px !important;
    }
    .live-drop-username {
        font-size: 8.5px !important;
    }
}

@keyframes dropSlideInMobile {
    from {
        opacity: 0;
        width: 0;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        width: 105px;
        min-width: 105px;
        padding-left: 8px;
        padding-right: 8px;
        transform: scale(1);
    }
}

/* --- PREMIUM MOBILE INVENTORY OVERRIDES --- */
@media (max-width: 768px) {
    .profile-modern-wrap {
        padding: 15px 0 !important;
    }

    .pm-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 20px !important;
        margin-bottom: 25px !important;
    }

    .pm-user-info {
        flex-direction: row !important; /* Keep avatar and username side-by-side as shown in image */
        align-items: center !important;
        justify-content: center !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .pm-avatar-wrap {
        position: relative !important;
    }

    .pm-avatar {
        width: 70px !important;
        height: 70px !important;
        border: 2px solid var(--accent) !important;
        box-shadow: 0 0 15px rgba(255, 184, 0, 0.25) !important;
    }

    .pm-level-tag {
        bottom: -4px !important;
        font-size: 9px !important;
        padding: 1px 8px !important;
    }

    .pm-user-text {
        text-align: left !important; /* Left-align user text next to avatar */
        align-items: flex-start !important;
    }

    .pm-username {
        font-size: 20px !important;
        font-weight: 900 !important;
        color: #fff !important;
        margin: 0 !important;
    }

    .pm-userid {
        font-size: 12px !important;
        margin-top: 2px !important;
    }

    .pm-header-actions {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .pm-balance-card {
        background: linear-gradient(135deg, rgba(30, 25, 31, 0.95) 0%, rgba(20, 16, 21, 0.95) 100%) !important;
        border: 1px solid rgba(255, 184, 0, 0.15) !important;
        border-radius: 16px !important;
        padding: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .pm-balance-label {
        font-size: 11px !important;
        color: var(--text3) !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        font-weight: 800 !important;
    }

    .pm-balance-val {
        font-size: clamp(20px, 6vw, 26px) !important;
        font-family: 'Unbounded', sans-serif !important;
        font-weight: 950 !important;
        color: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        word-break: break-all !important;
    }

    .pm-balance-val .currency-img {
        width: 24px !important;
        height: 24px !important;
        vertical-align: middle !important;
        filter: drop-shadow(0 0 8px rgba(255, 184, 0, 0.4)) !important;
    }

    .pm-deposit-btn {
        width: 85% !important;
        max-width: 260px !important;
        background: linear-gradient(135deg, #ffca28 0%, #ff9800 100%) !important;
        color: #000 !important;
        font-weight: 900 !important;
        font-size: 14px !important;
        border-radius: 30px !important;
        padding: 12px 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border: none !important;
        box-shadow: 0 4px 15px rgba(255, 152, 0, 0.35) !important;
        transition: all 0.2s ease !important;
        text-shadow: none !important;
    }

    .pm-deposit-btn:active {
        transform: scale(0.98) !important;
    }

    .pm-deposit-btn svg {
        stroke: #000 !important;
        stroke-width: 3.5 !important;
        width: 16px !important;
        height: 16px !important;
    }

    /* Stats Card & items on mobile */
    .pm-card {
        background: rgba(30, 24, 35, 0.45) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border: 1px solid rgba(255, 184, 0, 0.1) !important;
        border-radius: 20px !important;
        padding: 20px !important;
        margin-bottom: 20px !important;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
    }

    .pm-card-title {
        font-size: 12px !important;
        color: rgba(255, 255, 255, 0.5) !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        font-weight: 800 !important;
        margin-bottom: 15px !important;
    }

    .pm-stats-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .pm-stat-item {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 14px 16px !important;
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 184, 0, 0.06) !important;
        border-radius: 14px !important;
        width: 100% !important;
        gap: 10px !important;
        box-shadow: inset 0 0 10px rgba(255, 184, 0, 0.02) !important;
    }

    .pm-stat-label {
        font-size: 11px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        text-align: left !important;
    }

    .pm-stat-val {
        font-size: 16px !important;
        font-weight: 900 !important;
        color: var(--accent) !important;
        text-align: right !important;
        font-family: 'Unbounded', sans-serif !important;
        text-shadow: 0 0 10px rgba(255, 184, 0, 0.2) !important;
    }

    #invTotalUCtoReal {
        font-size: 11px !important;
        color: #ffb800 !important;
        font-weight: 800 !important;
        margin-top: 2px !important;
    }

    /* Level and XP card overrides on mobile */
    .pm-level-info {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }

    .pm-level-name {
        font-size: 15px !important;
        font-weight: 900 !important;
        color: var(--accent) !important;
        text-shadow: 0 0 8px rgba(255, 184, 0, 0.2) !important;
    }

    .pm-xp-text {
        font-size: 11px !important;
        color: rgba(255, 255, 255, 0.6) !important;
        font-weight: 800 !important;
    }

    .pm-xp-bar {
        height: 8px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        border: 1px solid rgba(255, 255, 255, 0.02) !important;
    }

    .pm-xp-fill {
        height: 100% !important;
        background: linear-gradient(90deg, #ffd54f, #ff9800) !important;
        box-shadow: 0 0 10px rgba(255, 152, 0, 0.5) !important;
        border-radius: 10px !important;
    }

    /* Daily reward card overrides on mobile */
    .pm-card.bonus-card-modern p {
        font-size: 12px !important;
        color: rgba(255, 255, 255, 0.6) !important;
        margin-bottom: 15px !important;
    }

    .dw-btn-tactic {
        background: linear-gradient(135deg, #ffca28 0%, #ff9800 100%) !important;
        color: #000 !important;
        font-weight: 950 !important;
        font-size: 14px !important;
        letter-spacing: 1px !important;
        border-radius: 14px !important;
        height: 50px !important;
        border: none !important;
        box-shadow: 0 5px 20px rgba(255, 152, 0, 0.35) !important;
        transition: all 0.2s ease !important;
        text-transform: uppercase !important;
        width: 100% !important;
    }

    .dw-btn-tactic:active {
        transform: scale(0.97) !important;
    }

    /* Action buttons (Settings & Withdraw) */
    .pm-sidebar-actions {
        display: flex !important;
        gap: 12px !important;
        width: 100% !important;
        margin-top: 15px !important;
    }

    .pm-sidebar-actions button {
        flex: 1 !important;
        height: 44px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        border-radius: 12px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: rgba(255, 255, 255, 0.03) !important;
        color: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
        transition: all 0.2s ease !important;
    }

    .pm-sidebar-actions button:active {
        transform: scale(0.97) !important;
        background: rgba(255, 255, 255, 0.08) !important;
    }

    /* mobile-back-btn tweak */
    .mobile-back-wrap {
        margin-bottom: 15px !important;
        padding-top: 5px !important;
    }

    .mobile-back-btn {
        padding: 8px 16px !important;
        font-size: 11px !important;
    }
}


/* ============================================================
   UPGRADE SYSTEM STYLES
   ============================================================ */
.upgrade-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    align-items: start;
    margin-top: 20px;
}

.upgrade-panel {
    position: relative;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 480px;
}



.upgrade-panel.center-panel {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.panel-title {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Source Tabs Switch */
.upgrade-source-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 14px;
    padding: 4px;
    border: 1px solid var(--border);
}

.source-tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text3);
    padding: 10px;
    border-radius: 10px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 13px;
}

.source-tab-btn.active {
    background: var(--gold);
    color: #000;
    box-shadow: 0 4px 15px rgba(255, 184, 0, 0.25);
}

.source-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* Balance input styles */
.balance-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px 0;
}

.input-label {
    font-size: 12px;
    color: var(--text3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.amount-number-box {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2px 15px;
    transition: border-color 0.3s;
}

.amount-number-box:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(255, 184, 0, 0.1);
}

.amount-number-box input {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    width: 100%;
    outline: none;
    font-family: 'Unbounded', sans-serif;
}

.amount-number-box .currency-symbol {
    font-weight: 900;
    color: var(--gold);
    font-size: 16px;
}

/* Range input tweak */
.balance-input-wrap input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
    outline: none;
    margin: 10px 0;
    cursor: pointer;
}

.balance-input-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 10px rgba(255, 184, 0, 0.5);
    cursor: pointer;
    transition: transform 0.1s;
}

.balance-input-wrap input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.quick-amount-buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.quick-amount-buttons button {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    color: #fff;
    padding: 8px 0;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.quick-amount-buttons button:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(255, 184, 0, 0.05);
}

.user-avail-bal {
    font-size: 12px;
    color: var(--text3);
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    padding: 10px;
    border-radius: 10px;
    border: 1px dashed var(--border);
}

.user-avail-bal span {
    color: var(--gold);
    font-weight: 800;
}

/* User Inventory Grid */
.inventory-selection-title {
    font-size: 12px;
    color: var(--text3);
}

.upgrade-inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
}

.upgrade-inventory-grid::-webkit-scrollbar {
    width: 4px;
}

.upgrade-inventory-grid::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

.inv-item-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 135px;
    justify-content: space-between;
    box-sizing: border-box;
}

.inv-item-card.selected {
    border-color: var(--gold) !important;
    box-shadow: inset 0 0 12px rgba(255, 184, 0, 0.3), 0 0 20px rgba(255, 184, 0, 0.25) !important;
}

.inv-item-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.inv-item-card .item-value {
    font-size: 11px;
    color: var(--gold);
    font-weight: 800;
    letter-spacing: 0.5px;
}

.selected-source-skin-display {
    background: rgba(255, 184, 0, 0.04);
    border: 1px solid var(--border-active);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    justify-content: center;
}

.selected-skin-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.selected-skin-card .card-emoji {
    display: none !important;
}

.selected-skin-card .card-img {
    height: 70px;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.4));
}

.selected-skin-card .card-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

.selected-skin-card .card-price {
    font-size: 12px;
    color: var(--gold);
    font-weight: 800;
}

/* ======= CENTER PANEL: Modern Circular Progress ======= */
.upgrade-center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 10px 0;
}

/* Preview Items (MANBA / MAQSAD) */
.upgrade-preview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.upgrade-preview-item .preview-label {
    font-size: 9px;
    font-weight: 800;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.upgrade-preview-item .preview-value {
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    font-family: 'Unbounded', sans-serif;
}

#upgradeSourcePreview .preview-value {
    color: var(--text2);
}

#upgradeTargetPreview .preview-value {
    color: var(--gold);
}

/* Circular Progress Wrapper */
.upgrade-circle-wrap {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.upgrade-circle-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 20px rgba(245, 197, 24, 0.15));
    transition: filter 0.5s ease;
}

.upgrade-circle-bg {
    opacity: 0.5;
}

.upgrade-circle-progress {
    transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.4s ease;
}

.upgrade-circle-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.upgrade-percent-text {
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    font-family: 'Unbounded', sans-serif;
    letter-spacing: 1px;
    text-shadow: 0 0 20px rgba(245, 197, 24, 0.3);
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

.upgrade-chance-label {
    font-size: 9px;
    font-weight: 800;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Upgrade Button (Trigger) */
.upgrade-trigger-btn {
    background: linear-gradient(135deg, var(--gold), var(--orange));
    border: none;
    border-radius: 50px;
    padding: 14px 48px;
    font-size: 15px;
    font-weight: 900;
    color: #000;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 1.5px;
    cursor: pointer;
    box-shadow: 0 0 25px rgba(255, 184, 0, 0.35);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.upgrade-trigger-btn:hover:not(:disabled) {
    transform: scale(1.06);
    box-shadow: 0 0 40px rgba(255, 184, 0, 0.55);
}

.upgrade-trigger-btn:active:not(:disabled) {
    transform: scale(0.96);
}

.upgrade-trigger-btn:disabled {
    background: linear-gradient(135deg, #333, #444);
    color: #666;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.upgrade-details-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 220px;
    background: rgba(255, 255, 255, 0.02);
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
}

/* Result Overlay */
.upgrade-result-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 14, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 24px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInOverlay 0.3s ease;
}

@keyframes fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}

.upgrade-result-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* Premium Sticker Card Layout */
.result-sticker-card {
    position: relative;
    width: 260px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: stickerShow 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, floatingCard 3.5s ease-in-out infinite 0.6s;
    transition: all 0.3s ease;
}

@keyframes stickerShow {
    0% { transform: scale(0.3) rotate(-12deg); opacity: 0; filter: blur(5px); }
    70% { transform: scale(1.08) rotate(3deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; filter: blur(0); }
}

@keyframes floatingCard {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0px); }
}

/* Shimmer Light sweep effect */
.result-sticker-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -70%;
    width: 40%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 30%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.1) 70%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(25deg);
    animation: holographicShine 3.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes holographicShine {
    0% { left: -70%; }
    18% { left: 140%; }
    100% { left: 140%; }
}

/* Rarity specific borders and box-shadows */
.result-sticker-card.rarity-common {
    border-color: rgba(130, 140, 160, 0.3);
    box-shadow: 0 0 25px rgba(130, 140, 160, 0.15), inset 0 0 15px rgba(130, 140, 160, 0.05);
}
.result-sticker-card.rarity-rare {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.3), inset 0 0 20px rgba(59, 130, 246, 0.1);
}
.result-sticker-card.rarity-epic {
    border-color: rgba(168, 85, 247, 0.6);
    box-shadow: 0 0 35px rgba(168, 85, 247, 0.35), inset 0 0 20px rgba(168, 85, 247, 0.15);
}
.result-sticker-card.rarity-legendary {
    border-color: rgba(255, 174, 0, 0.7);
    box-shadow: 0 0 40px rgba(255, 174, 0, 0.4), inset 0 0 20px rgba(255, 174, 0, 0.2);
}
.result-sticker-card.rarity-mythic {
    border-color: rgba(255, 0, 255, 0.8);
    box-shadow: 0 0 45px rgba(255, 0, 255, 0.4), inset 0 0 25px rgba(255, 0, 255, 0.2);
}
.result-sticker-card.rarity-ultimate {
    border-color: rgba(250, 204, 21, 0.9);
    box-shadow: 0 0 50px rgba(250, 204, 21, 0.5), inset 0 0 30px rgba(250, 204, 21, 0.25);
}

/* Lose card style */
.result-sticker-card.lose-card {
    border-color: rgba(239, 68, 68, 0.3);
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.15), inset 0 0 15px rgba(239, 68, 68, 0.05);
    background: rgba(239, 68, 68, 0.01);
}
.result-sticker-card.lose-card::after {
    display: none;
}

/* Badges inside card */
.sticker-badge {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: inline-block;
}

.sticker-badge.win {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.25);
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
}

.sticker-badge.lose {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.25);
    text-shadow: 0 0 8px rgba(248, 113, 113, 0.3);
}

.sticker-rarity-tag {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: -4px;
}
.sticker-rarity-tag.common { color: var(--rarity-common); }
.sticker-rarity-tag.rare { color: var(--blue); }
.sticker-rarity-tag.epic { color: var(--rarity-epic); }
.sticker-rarity-tag.legendary { color: var(--rarity-legendary); }
.sticker-rarity-tag.mythic { color: var(--rarity-mythic); }
.sticker-rarity-tag.ultimate { color: var(--rarity-ultimate); }

.sticker-image-container {
    width: 130px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 4px 0;
}

.sticker-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
}

.sticker-radial-backdrop {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--rarity-color, rgba(255,255,255,0.08)) 0%, rgba(0,0,0,0) 70%);
    filter: blur(12px);
    opacity: 0.6;
    z-index: 1;
    animation: pulseBackdrop 2.5s ease-in-out infinite;
}

@keyframes pulseBackdrop {
    0% { transform: scale(0.9); opacity: 0.4; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(0.9); opacity: 0.4; }
}

.sticker-title-text {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    text-align: center;
    line-height: 1.3;
    font-family: 'Outfit', sans-serif;
    word-break: break-word;
    max-width: 210px;
    margin-top: 4px;
}

.sticker-price-text {
    font-size: 16px;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(255, 184, 0, 0.3);
    font-family: 'Outfit', sans-serif;
}

.result-close-btn {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 10px;
    border-radius: 12px;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s ease;
    margin-top: 4px;
}

.result-close-btn:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);
}

.result-sticker-card.lose-card .result-close-btn:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

/* Spinning animation for circle during upgrade */
@keyframes circleSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes circleSpinGlow {
    0% { filter: drop-shadow(0 0 15px rgba(245, 197, 24, 0.2)); }
    50% { filter: drop-shadow(0 0 35px rgba(245, 197, 24, 0.6)); }
    100% { filter: drop-shadow(0 0 15px rgba(245, 197, 24, 0.2)); }
}

.upgrade-circle-svg.processing {
    transform-origin: center;
    animation: circleSpinGlow 0.8s ease-in-out infinite;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.detail-row span {
    color: var(--text3);
}

.detail-row strong {
    color: #fff;
}

.detail-row #summarySourceVal {
    color: var(--text2);
}

.detail-row #summaryTargetVal {
    color: var(--gold);
}

/* Target Panel */
.target-search-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.target-search-bar input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    padding: 10px 14px;
    border-radius: 10px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.target-search-bar input:focus {
    border-color: var(--gold);
}

.target-search-bar select {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    padding: 10px;
    border-radius: 10px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    outline: none;
    cursor: pointer;
}

.upgrade-targets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.upgrade-targets-grid::-webkit-scrollbar {
    width: 4px;
}

.upgrade-targets-grid::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

.target-item-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 135px;
    justify-content: space-between;
    box-sizing: border-box;
}

.target-item-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.target-item-card.selected {
    border-color: var(--gold) !important;
    box-shadow: inset 0 0 12px rgba(255, 184, 0, 0.3), 0 0 20px rgba(255, 184, 0, 0.25) !important;
}

.target-item-card.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.target-item-card.disabled:hover {
    transform: none;
    border-color: var(--border);
    box-shadow: none !important;
}

.card-image-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    width: 100%;
}

.target-item-card img, .inv-item-card img {
    max-height: 52px;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    transition: transform 0.2s ease;
}

.target-item-card:hover img, .inv-item-card:hover img {
    transform: scale(1.08);
}

.card-info-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.target-item-card .item-name, .inv-item-card .item-name {
    font-size: 10px;
    font-weight: 700;
    color: var(--text2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.target-item-card .item-price {
    font-size: 11px;
    color: var(--gold);
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Rarity Background Gradients & Glow Borders for both inv and target cards */
.inv-item-card.rarity-common, .target-item-card.rarity-common {
    background: linear-gradient(135deg, rgba(30,30,35,0.75) 0%, rgba(15,15,18,0.85) 100%) !important;
    border: 1px solid rgba(130, 140, 160, 0.2) !important;
}
.inv-item-card.rarity-common:hover, .target-item-card.rarity-common:hover {
    border-color: rgba(130, 140, 160, 0.5) !important;
    box-shadow: 0 0 10px rgba(130, 140, 160, 0.15) !important;
}

.inv-item-card.rarity-rare, .target-item-card.rarity-rare {
    background: linear-gradient(135deg, rgba(20,30,50,0.75) 0%, rgba(10,15,30,0.85) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
}
.inv-item-card.rarity-rare:hover, .target-item-card.rarity-rare:hover {
    border-color: rgba(59, 130, 246, 0.6) !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.2) !important;
}

.inv-item-card.rarity-epic, .target-item-card.rarity-epic {
    background: linear-gradient(135deg, rgba(45,20,60,0.75) 0%, rgba(20,10,35,0.85) 100%) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
}
.inv-item-card.rarity-epic:hover, .target-item-card.rarity-epic:hover {
    border-color: rgba(168, 85, 247, 0.7) !important;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.25) !important;
}

.inv-item-card.rarity-legendary, .target-item-card.rarity-legendary {
    background: linear-gradient(135deg, rgba(60,15,60,0.75) 0%, rgba(30,5,30,0.85) 100%) !important;
    border: 1px solid rgba(255, 0, 255, 0.3) !important;
}
.inv-item-card.rarity-legendary:hover, .target-item-card.rarity-legendary:hover {
    border-color: rgba(255, 0, 255, 0.7) !important;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.3) !important;
}

.inv-item-card.rarity-mythic, .target-item-card.rarity-mythic {
    background: linear-gradient(135deg, rgba(60,15,15,0.75) 0%, rgba(30,5,5,0.85) 100%) !important;
    border: 1px solid rgba(235, 75, 75, 0.35) !important;
}
.inv-item-card.rarity-mythic:hover, .target-item-card.rarity-mythic:hover {
    border-color: rgba(235, 75, 75, 0.8) !important;
    box-shadow: 0 0 18px rgba(235, 75, 75, 0.35) !important;
}

.inv-item-card.rarity-ultimate, .target-item-card.rarity-ultimate {
    background: linear-gradient(135deg, rgba(60,40,15,0.75) 0%, rgba(30,20,5,0.85) 100%) !important;
    border: 1px solid rgba(255, 184, 0, 0.3) !important;
}
.inv-item-card.rarity-ultimate:hover, .target-item-card.rarity-ultimate:hover {
    border-color: rgba(255, 184, 0, 0.7) !important;
    box-shadow: 0 0 20px rgba(255, 184, 0, 0.4) !important;
}

/* Responsiveness for Upgrade Grid */
@media (max-width: 900px) {
    .upgrade-container {
        grid-template-columns: 1fr;
    }
    .upgrade-panel {
        min-height: auto;
    }
}

/* Responsive mobile fix for vertical reel indicators vertical alignment */
@media (max-width: 600px) {
    .vertical-reel-wrapper {
        align-self: center !important;
    }
}

/* Responsive desktop fix for vertical reel indicators vertical alignment */
@media (min-width: 600px) {
    .vertical-reel-wrapper {
        align-self: center !important;
    }
}

/* Custom override for single case win card on mobile/responsive */
@media (max-width: 600px) {
    .win-multi-item.single-card-override {
        width: 250px !important;
        height: 330px !important;
        padding: 20px 15px !important;
        gap: 15px !important;
        justify-content: space-between !important;
        overflow: visible !important;
    }
    .win-multi-item.single-card-override img.win-multi-img {
        height: 150px !important;
        max-height: 150px !important;
        width: auto !important;
        margin-bottom: 10px !important;
        object-fit: contain !important;
    }
    .win-multi-item.single-card-override .win-multi-emoji {
        font-size: 50px !important;
        margin-bottom: 15px !important;
    }
    .win-multi-item.single-card-override .win-multi-name {
        font-size: 13px !important;
        font-weight: 800 !important;
        height: auto !important;
        display: block !important;
        -webkit-line-clamp: none !important;
        overflow: visible !important;
        margin-top: 5px !important;
    }
    .win-multi-item.single-card-override .win-multi-uc {
        font-size: 16px !important;
        padding-bottom: 0 !important;
        margin-top: auto !important;
    }
}