/* iPhone uses the same .tapped behavior as Android - no special overrides needed */
/* Hardware acceleration hint for iOS */
.iphone-device .top_loot_item,
.iphone-device .best-drop-item {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* CRITICAL: Non-tapped items must hide their popups on iPhone */
.iphone-device .top_loot_item:not(.tapped) > .profile_pop,
.iphone-device .best-drop-item:not(.tapped) > .profile_pop {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    pointer-events: none !important;
}

/* CRITICAL: Tapped items MUST show popup and hide weapon/name on iPhone */
.iphone-device .top_loot_item.tapped > .profile_pop,
.iphone-device .best-drop-item.tapped > .profile_pop {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    pointer-events: auto !important;
}

/* CRITICAL: Hide weapon image on tapped iPhone items */
.iphone-device .top_loot_item.tapped > img:not(.top-loot-avatar),
.iphone-device .best-drop-item.tapped > img:not(.top-loot-avatar) {
    transform: scale(0) !important;
    opacity: 0 !important;
    -webkit-transform: scale(0) !important;
}

/* CRITICAL: Hide weapon name bar on tapped iPhone items */
.iphone-device .top_loot_item.tapped > .top_loot_item_name,
.iphone-device .best-drop-item.tapped > .top_loot_item_name {
    transform: translateY(100%) !important;
    opacity: 0 !important;
    -webkit-transform: translateY(100%) !important;
    visibility: hidden !important;
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* CRITICAL: Ensure profile_pop background image shows on iPhone */
.iphone-device .top_loot_item.tapped > .profile_pop,
.iphone-device .best-drop-item.tapped > .profile_pop {
    background-size: 85px auto !important;
    background-position: center 50% !important;
    background-repeat: no-repeat !important;
}

/* CRITICAL: Show weapon pattern on iPhone tapped items via profile_pop::before */
/* On iPhone, container-level ::before is behind profile_pop due to z-index, so we use profile_pop::before */
.iphone-device .top_loot_item[data-weapon-pattern].tapped > .profile_pop::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(180deg, rgba(8, 10, 18, 0.65) 0%, rgba(8, 10, 18, 0) 45%),
        var(--top-loot-pattern-image),
        var(--top-loot-pattern-image) !important;
    background-size: 100% 100%, var(--top-loot-pattern-tile-size, 38px auto), var(--top-loot-pattern-tile-size-alt, 28px auto) !important;
    background-position: center, 0 0, var(--top-loot-pattern-offset, 20px 16px) !important;
    background-repeat: no-repeat, repeat, repeat !important;
    opacity: 0.07 !important;
    filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) !important;
    z-index: 0 !important;
    visibility: visible !important;
    pointer-events: none !important;
}

/* Mobile-specific rules for non-iPhone devices (Android, etc.) */
@media (max-width: 768px) {
    /* These rules apply to Android and other mobile devices, but NOT iPhone */
    body:not(.iphone-device) .top_loot_item {
        /* Ensure proper layering on mobile */
        transform-style: flat;
        -webkit-transform-style: flat;
    }
    
    body:not(.iphone-device) .top_loot_item.tapped {
        /* Ensure tapped state is visible and clean */
        z-index: 100 !important;
    }
    
    body:not(.iphone-device) .top_loot_item:not(.tapped) > .profile_pop {
        /* Ensure non-tapped items don't show overlay */
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Best Drop Item */
.best-drop-item {
    position: relative;
    min-width: 160px !important;
    max-width: 160px !important;
    height: 110px !important;
    border: 2px solid #FFD700 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    transform-origin: center;
    animation: pulseBorder 2s infinite;
    z-index: 2;
}

@keyframes pulseBorder {
    0% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), inset 0 0 10px rgba(157, 78, 221, 0.4);
    }

    50% {
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.7), inset 0 0 15px rgba(157, 78, 221, 0.6);
    }

    100% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), inset 0 0 10px rgba(157, 78, 221, 0.4);
    }
}

/* Override all hover animations for best drop item */
#best_drop_item:hover,
.best-drop-item:hover,
.top_loot_item.best-drop-item:hover {
    /* No vertical movement animation */
    transform: none !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5) !important;
    z-index: 100;
}

/* Stop pulseBorder animation when tapped */
.best-drop-item.tapped,
#best_drop_item.tapped {
    animation: none !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5) !important;
}

.best-drop-item:hover img {
    transform: none;
    opacity: 1;
}

.best-drop-item:hover .top_loot_item_name {
    transform: translateY(100%);
    opacity: 0;
}

.best-drop-badge {
    position: absolute;
    top: -10px;
    left: calc(50% - 15px);
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 3;
    border: 2px solid #5a1c7d;
}

.best-drop-badge i {
    color: #5a1c7d;
    font-size: 12px;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

.best-drop-label {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to right, rgba(157, 78, 221, 0.8), rgba(88, 33, 138, 0.9));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    padding: 4px 0;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
    border-top: 1px solid rgba(255, 215, 0, 0.5);
}

.best-drop-timer {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #FFD700;
    font-size: 10px;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 3px 6px;
    border-radius: 10px;
    z-index: 2;
}

.best-drop-timer i {
    margin-right: 4px;
    color: #FFD700;
    font-size: 10px;
}

/* Wrapper for both fixed and scrolling elements */
.top_loot_wrapper {
    position: relative;
    width: 100%;
    height: 120px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

/* Best drop item with right-side golden glow - inherit exact same constraints as top_loot_item */
.best-drop-item {
    /* Ensure exact same dimensions as regular items */
    width: 85px;
    min-width: 85px;
    max-width: 85px;
    flex: 0 0 85px;
    height: 90px;
    margin: auto 0;
    padding: 3px;
    /* Keep the distinctive styling */
    z-index: 10;
    position: relative;
    border: 2px solid #FFD700 !important;
    overflow: hidden;
}

/* Golden glow effect extending to the right */
.best-drop-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: -80px;
    /* Extend beyond the item */
    width: 80px;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0) 100%);
    pointer-events: none;
    /* Allow clicks to pass through */
    z-index: 1;
}

.best-drop-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid #5a1c7d;
}

.best-drop-badge i {
    color: #5a1c7d;
    font-size: 14px;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

.best-drop-item .top_loot_item_name {
    background: linear-gradient(to bottom, rgba(255, 215, 0, 0.3), rgba(184, 134, 11, 0.4)) !important;
    border-top: 1px solid rgba(255, 215, 0, 0.5) !important;
    color: #FFD700 !important;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.9) !important;
}

/* Scrolling container */
.top_loot_box {
    flex: 1;
    /* Take remaining width */
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 4px;
    flex-direction: row;
    overflow: hidden;
    /* scroll-behavior: smooth;  -- REMOVED: Conflicts with JS marquee animation */
    transition: transform 0.5s ease, opacity 0.5s ease;
    padding: 10px 0;
    /* Removed expensive backdrop-filter for performance */
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    content-visibility: auto;
    contain: layout paint style;
    will-change: scroll-position;
    /* NO MIRRORING - normal scroll */
}

/* Items: normal, no mirroring */
.top_loot_box .top_loot_item {
    transform: translateZ(0);
}

.top_loot_item {
    position: relative;
    min-width: 140px;
    width: 140px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 6px;
    transition: transform 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    /* Removed expensive backdrop-filter */
    background: rgba(30, 30, 40, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 5px;
    content-visibility: auto;
    contain: content;
    /* Hardware acceleration hint */
    transform: translateZ(0);
    /* Prevent overlay issues on iPhone */
    isolation: isolate;
    /* Prevent flickering on iPhone */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.top_loot_item:hover {
    transform: none;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
    z-index: 100;
    will-change: transform, opacity;
}

/* Prevent all siblings from showing hover state on DESKTOP only */
@media (min-width: 769px) {
    .top_loot_box:has(.top_loot_item:hover) .top_loot_item:not(:hover) > .profile_pop {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

.top_loot_item img {
    width: auto;
    height: 85%;
    object-fit: contain;
    margin: auto;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
    transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (min-width: 769px) {
    .top_loot_item:hover img:not(.top-loot-avatar) {
        transform: scale(0);
        opacity: 0;
    }
}

.top_loot_item_name {
    color: #e6e6ff;
    font-size: 11px;
    font-weight: 600;
    text-shadow: 0 0 4px rgba(159, 127, 255, 0.55), 0 0 8px rgba(87, 51, 221, 0.4);
    padding: 4px 8px;
    text-align: center;
    width: 100%;
    background: linear-gradient(to bottom, rgba(38, 35, 78, 0.85), rgba(23, 19, 61, 0.95));
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 3;
    transition: transform 0.3s ease, opacity 0.3s ease;
    letter-spacing: 0.5px;
    border-top: 1px solid rgba(159, 127, 255, 0.3);
}

@media (min-width: 769px) {
    .top_loot_item:hover .top_loot_item_name {
        transform: translateY(100%);
        opacity: 0;
    }
}

.bg-2 {
    background: linear-gradient(135deg, rgba(96, 80, 220, 0.22) 0%, rgba(55, 42, 165, 0.34) 100%);
    border: 1px solid rgba(96, 80, 220, 0.45);
    box-shadow: inset 0 0 8px rgba(96, 80, 220, 0.16);
}

.bg-3 {
    background: linear-gradient(135deg, rgba(220, 95, 240, 0.22) 0%, rgba(138, 43, 160, 0.34) 100%);
    border: 1px solid rgba(220, 95, 240, 0.45);
    box-shadow: inset 0 0 8px rgba(220, 95, 240, 0.16);
}

.bg-4 {
    background: linear-gradient(135deg, rgba(180, 90, 255, 0.22) 0%, rgba(120, 45, 190, 0.34) 100%);
    border: 1px solid rgba(180, 90, 255, 0.45);
    box-shadow: inset 0 0 8px rgba(180, 90, 255, 0.16);
}

.bg-5 {
    background: linear-gradient(135deg, rgba(200, 125, 255, 0.22) 0%, rgba(150, 75, 230, 0.34) 100%);
    border: 1px solid rgba(200, 125, 255, 0.45);
    box-shadow: inset 0 0 8px rgba(200, 125, 255, 0.16);
}

.top_loot_item>.profile_pop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease, background-size 0.3s ease;
    color: white;
    font-size: 12px;
    opacity: 0;
    padding: 10px;
    text-align: center;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    isolation: isolate;
    /* All cases are big */
    background-size: 120px auto;
    background-position: center 58%;
    background-repeat: no-repeat;
    /* Prevent flickering on iPhone */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Force GPU acceleration on iPhone */
    -webkit-transform: translateZ(0) translateY(0);
}

.top_loot_item:hover>.profile_pop,
.top_loot_item.tapped>.profile_pop {
    background-size: 150px auto;
}

/* Custom cases (open version) - big */
.top_loot_item[data-case-type="custom"] > .profile_pop {
    background-size: 130px auto;
    background-position: center 58%;
}

.top_loot_item[data-case-type="custom"]:hover > .profile_pop,
.top_loot_item[data-case-type="custom"].tapped > .profile_pop {
    background-size: 150px auto;
    background-position: center 58%;
}

/* Standard CS:GO briefcase cases (in /classic/ folder) - smaller and positioned lower */
.top_loot_item[data-case-type="standard"][data-case-image*="/classic/"] > .profile_pop {
    background-size: 80px auto;
    background-position: center 62%;
}

.top_loot_item[data-case-type="standard"][data-case-image*="/classic/"]:hover > .profile_pop,
.top_loot_item[data-case-type="standard"][data-case-image*="/classic/"].tapped > .profile_pop {
    background-size: 100px auto;
    background-position: center 62%;
}

/* Standard "Collection" / Edition cases (NOT in /classic/ folder, e.g. Aqua Collection) — same size as base */
.top_loot_item[data-case-type="standard"]:not([data-case-image*="/classic/"]) > .profile_pop {
    background-size: 120px auto;
    background-position: center 58%;
}

.top_loot_item[data-case-type="standard"]:not([data-case-image*="/classic/"]):hover > .profile_pop,
.top_loot_item[data-case-type="standard"]:not([data-case-image*="/classic/"]).tapped > .profile_pop {
    background-size: 150px auto;
    background-position: center 58%;
}

.top_loot_item>.profile_pop::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(6, 8, 16, 0.54) 0%, rgba(6, 8, 16, 0.84) 54%, rgba(6, 8, 16, 0.96) 100%);
    z-index: 0;
}

/* Hide original top-level overlays on hover/tap so the new container-level backgrounds show through */
.top_loot_item:hover>.profile_pop::before,
.top_loot_item.tapped>.profile_pop::before {
    display: none !important;
}

/* Set up container-level hover overlay behind the popup content */
.top_loot_item:hover::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(8, 10, 18, 0.65) 0%, rgba(8, 10, 18, 0) 45%);
    z-index: 1;
}

/* Desktop only: weapon-pattern hover built from the won weapon image */
@media (min-width: 769px) and (hover: hover) {
    .top_loot_item[data-weapon-pattern]>.profile_pop::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
            linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.11) 43%, transparent 56%),
            radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.16), transparent 36%);
        opacity: 0;
        transform: translateX(-18%) skewX(-8deg);
        transition: opacity 0.24s ease, transform 0.36s ease;
    }

    .top_loot_item[data-weapon-pattern]:hover::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(180deg, rgba(8, 10, 18, 0.65) 0%, rgba(8, 10, 18, 0) 45%),
            var(--top-loot-pattern-image),
            var(--top-loot-pattern-image);
        background-size: 100% 100%, var(--top-loot-pattern-tile-size, 38px auto), var(--top-loot-pattern-tile-size-alt, 28px auto);
        background-position: center, 0 0, var(--top-loot-pattern-offset, 20px 16px);
        background-repeat: no-repeat, repeat, repeat;
        opacity: calc(var(--top-loot-pattern-opacity, 0.4) * 0.35);
        filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
        z-index: 1;
        /* animation: topLootWeaponPattern var(--top-loot-pattern-speed, 5.4s) ease-in-out infinite; */
        /* animation-delay: var(--top-loot-pattern-delay, 0s); */
        transform-origin: center;
    }

    .top_loot_item[data-weapon-pattern]:hover>.profile_pop::after {
        opacity: 0.64;
        transform: translateX(16%) skewX(-8deg);
    }

    .top_loot_item[data-weapon-pattern="tile-flow"]:hover::before {
        /* uses default white silhouette filter */
    }

    .top_loot_item[data-weapon-pattern="tile-wide"]:hover::before {
        opacity: calc((var(--top-loot-pattern-opacity, 0.38) + 0.06) * 0.35);
    }
}

@keyframes topLootWeaponPattern {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    42% {
        transform: translate3d(3px, -5px, 0) scale(1.035);
    }

    68% {
        transform: translate3d(-4px, 2px, 0) scale(1.018);
    }
}

/* Color-based backgrounds on hover (PC) and tap (mobile) */
.color-gold:hover::before,
.color-gold.tapped::before {
    background-color: rgba(255, 215, 0, 0.4) !important;
}

.color-red:hover::before,
.color-red.tapped::before {
    background-color: rgba(255, 59, 59, 0.4) !important;
}

.color-pink:hover::before,
.color-pink.tapped::before {
    background-color: rgba(255, 126, 185, 0.4) !important;
}

.color-blue:hover::before,
.color-blue.tapped::before {
    background-color: rgba(80, 146, 255, 0.4) !important;
}

.color-purple:hover::before,
.color-purple.tapped::before {
    background-color: rgba(162, 89, 255, 0.4) !important;
}

.color-white:hover::before,
.color-white.tapped::before {
    background-color: rgba(248, 250, 252, 0.4) !important;
}

.color-khaki:hover::before,
.color-khaki.tapped::before {
    background-color: rgba(226, 194, 117, 0.4) !important;
}

.color-gray:hover::before,
.color-gray.tapped::before,
.color-grey:hover::before,
.color-grey.tapped::before {
    background-color: rgba(176, 176, 176, 0.4) !important;
}

.top_loot_item>.profile_pop b {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    padding: 0 6px;
    text-align: center;
    z-index: 10;
    max-width: 100%;
    color: rgba(255, 255, 255, 0.96);
    background: transparent;
    font-family: "Outfit", "Montserrat", sans-serif;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-shadow: none;
    -webkit-text-stroke: 0;
    overflow-wrap: anywhere;
}

/* Light overlay on mobile (tap) */
.top_loot_item.tapped>.profile_pop::before {
    background: linear-gradient(180deg, rgba(8, 10, 18, 0.65) 0%, rgba(8, 10, 18, 0) 45%) !important;
}

.top_loot_item[data-weapon-pattern].tapped>.profile_pop::before {
    background-image: 
        linear-gradient(180deg, rgba(8, 10, 18, 0.65) 0%, rgba(8, 10, 18, 0) 45%),
        var(--top-loot-pattern-image),
        var(--top-loot-pattern-image) !important;
    opacity: 0.25 !important;
}

.top_loot_item>.profile_pop .case-pop-label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute !important;
}

.top_loot_item.case-source-unavailable>.profile_pop .case-pop-label {
    display: none !important;
    visibility: hidden !important;
}

/* Special positioning for best drop item profile popup */
.best-drop-item>.profile_pop {
    justify-content: center;
    padding-top: 20px;
    /* Position case name higher */
}

/* Microheader / micro-top-loot styles are provided by `static/css/home.css`.
   Removed duplicate/conflicting rules here to avoid overrides and performance issues. */

/* Completely hide micro-top-loot in all cases */
.micro-top-loot,
.micro-top-loot-items,
.micro-top-loot-item,
.micro-top-loot-toggle,
.micro-best-drop,
.micro-best-drop-badge {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.profile_pop img {
    width: 45px;
    height: 45px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 8px;
    object-fit: cover;
}

/* Level-based avatar border colors */
.top-loot-avatar.lvl-0 {
    border-color: #6b7280;
}

.top-loot-avatar.lvl-1 {
    border-color: rgb(245, 231, 192);
}

.top-loot-avatar.lvl-2 {
    border-color: rgb(255, 224, 102);
}

.top-loot-avatar.lvl-3 {
    border-color: rgb(74, 222, 128);
}

.top-loot-avatar.lvl-4 {
    border-color: rgb(59, 130, 246);
}

.top-loot-avatar.lvl-5 {
    border-color: rgb(168, 85, 247);
}

.top-loot-avatar.lvl-6 {
    border-color: rgb(251, 191, 36);
}

.top-loot-avatar.lvl-7 {
    border-color: rgb(34, 197, 94);
}

.top-loot-avatar.lvl-8 {
    border-color: rgb(236, 72, 153);
}

.top-loot-avatar.lvl-9 {
    border-color: rgb(59, 130, 246);
}

.top-loot-avatar.lvl-10 {
    border-color: rgb(255, 255, 255);
}

@media (min-width: 769px) {
    .top_loot_item:hover>.profile_pop {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

.top_loot_item.tapped>.profile_pop {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    /* Force hardware acceleration on iPhone */
    -webkit-transform: translateZ(0) translateY(0);
    transform: translateZ(0) translateY(0);
    /* Ensure it's on top */
    z-index: 10;
    /* Force repaint on iPhone */
    will-change: opacity, transform;
}

.top_loot_item.tapped img:not(.top-loot-avatar),
.best-drop-item.tapped img:not(.top-loot-avatar) {
    transform: scale(0);
    opacity: 0;
    /* Ensure smooth transition on iPhone */
    -webkit-transform: scale(0);
    transition: transform 0.3s ease, opacity 0.3s ease;
    -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
}

.top_loot_item.tapped .top_loot_item_name,
.best-drop-item.tapped .top_loot_item_name {
    transform: translateY(100%);
    opacity: 0;
    /* Ensure smooth transition on iPhone */
    -webkit-transform: translateY(100%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
}


/* newItemHighlight animation removed - no fade in/out */

.top_loot_item.new {
    /* animation removed */
}

.color-red {
    background: linear-gradient(135deg, rgba(255, 59, 59, 0.28) 0%, rgba(168, 0, 0, 0.28) 100%);
    border: 1.5px solid rgba(255, 59, 59, 0.28);
    box-shadow: 0 0 12px 2px rgba(255, 59, 59, 0.16);
}

.color-blue {
    background: linear-gradient(135deg, rgba(80, 146, 255, 0.28) 0%, rgba(32, 87, 196, 0.28) 100%);
    border: 1.5px solid rgba(80, 146, 255, 0.28);
    box-shadow: 0 0 12px 2px rgba(80, 146, 255, 0.16);
}

.color-pink {
    background: linear-gradient(135deg, rgba(255, 126, 185, 0.28) 0%, rgba(255, 101, 163, 0.28) 100%);
    border: 1.5px solid rgba(255, 126, 185, 0.28);
    box-shadow: 0 0 12px 2px rgba(255, 126, 185, 0.16);
}

.color-gold {
    background: linear-gradient(135deg, rgba(255, 224, 102, 0.28) 0%, rgba(255, 215, 0, 0.28) 100%);
    border: 1.5px solid rgba(255, 215, 0, 0.28);
    box-shadow: 0 0 12px 2px rgba(255, 224, 102, 0.16);
}

.color-white {
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.28) 0%, rgba(226, 232, 240, 0.28) 100%);
    border: 1.5px solid rgba(226, 232, 240, 0.28);
    box-shadow: 0 0 12px 2px rgba(232, 232, 232, 0.16);
}

.color-purple {
    background: linear-gradient(135deg, rgba(162, 89, 255, 0.28) 0%, rgba(110, 39, 197, 0.28) 100%);
    border: 1.5px solid rgba(162, 89, 255, 0.28);
    box-shadow: 0 0 12px 2px rgba(162, 89, 255, 0.16);
}

.color-khaki {
    background: linear-gradient(135deg, rgba(226, 194, 117, 0.28) 0%, rgba(191, 167, 111, 0.28) 100%);
    border: 1.5px solid rgba(226, 194, 117, 0.28);
    box-shadow: 0 0 12px 2px rgba(226, 194, 117, 0.16);
}

.color-gray,
.color-grey {
    background: linear-gradient(135deg, rgba(176, 176, 176, 0.28) 0%, rgba(110, 110, 110, 0.28) 100%);
    border: 1.5px solid rgba(176, 176, 176, 0.28);
    box-shadow: 0 0 12px 2px rgba(176, 176, 176, 0.16);
}

.color-red .top_loot_item_name {
    background: linear-gradient(to bottom, rgba(255, 59, 59, 0.32), rgba(168, 0, 0, 0.38));
    border-top: 1px solid rgba(255, 59, 59, 0.22);
}

.color-blue .top_loot_item_name {
    background: linear-gradient(to bottom, rgba(80, 146, 255, 0.32), rgba(32, 87, 196, 0.38));
    border-top: 1px solid rgba(80, 146, 255, 0.22);
}

.color-pink .top_loot_item_name {
    background: linear-gradient(to bottom, rgba(255, 126, 185, 0.32), rgba(255, 101, 163, 0.38));
    border-top: 1px solid rgba(255, 126, 185, 0.22);
}

.color-gold .top_loot_item_name {
    background: linear-gradient(to bottom, rgba(255, 224, 102, 0.32), rgba(255, 215, 0, 0.38));
    border-top: 1px solid rgba(255, 215, 0, 0.22);
}

.color-white .top_loot_item_name {
    background: linear-gradient(to bottom, rgba(248, 250, 252, 0.32), rgba(226, 232, 240, 0.38));
    border-top: 1px solid rgba(226, 232, 240, 0.22);
    color: #222;
    text-shadow: none;
}

.color-purple .top_loot_item_name {
    background: linear-gradient(to bottom, rgba(162, 89, 255, 0.32), rgba(110, 39, 197, 0.38));
    border-top: 1px solid rgba(162, 89, 255, 0.22);
}

.color-khaki .top_loot_item_name {
    background: linear-gradient(to bottom, rgba(226, 194, 117, 0.32), rgba(191, 167, 111, 0.38));
    border-top: 1px solid rgba(226, 194, 117, 0.22);
    color: #222;
    text-shadow: none;
}

.color-gray .top_loot_item_name,
.color-grey .top_loot_item_name {
    background: linear-gradient(to bottom, rgba(176, 176, 176, 0.32), rgba(110, 110, 110, 0.38));
    border-top: 1px solid rgba(176, 176, 176, 0.22);
    color: #222;
    text-shadow: none;
}

@media (max-width: 768px) {
    .top_loot_wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        overflow: hidden !important;
        contain: layout paint !important;
    }

    .top_loot_box {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100px;
        padding: 8px 0;
        gap: 3px;
        overflow: hidden !important;
    }

    .top_loot_item,
    .best-drop-item {
        min-width: 120px;
        max-width: 120px;
        padding: 4px;
        border-radius: 5px;
    }

    /* Best drop specific for tablet */
    .best-drop-item {
        min-width: 130px !important;
        max-width: 130px !important;
        width: 130px !important;
        height: 90px !important;
        align-self: center !important;
        margin-top: 0 !important;
    }

    .top_loot_item img {
        height: 80%;
    }

    .top_loot_item_name {
        font-size: 10px;
        padding: 3px 6px;
        letter-spacing: 0.3px;
    }

    .profile_pop {
        font-size: 11px;
        padding: 8px;
        background-size: 70px auto !important;
        background-position: center 50% !important;
    }

    /* Collection / Edition cases on tablet — same as custom */
    .top_loot_item[data-case-type="standard"]:not([data-case-image*="/classic/"]) > .profile_pop,
    .top_loot_item[data-case-type="standard"]:not([data-case-image*="/classic/"]):hover > .profile_pop,
    .top_loot_item[data-case-type="standard"]:not([data-case-image*="/classic/"]).tapped > .profile_pop {
        background-size: 72px auto !important;
    }

    /* Classic briefcase on tablet */
    .top_loot_item[data-case-type="standard"][data-case-image*="/classic/"] > .profile_pop,
    .top_loot_item[data-case-type="standard"][data-case-image*="/classic/"]:hover > .profile_pop,
    .top_loot_item[data-case-type="standard"][data-case-image*="/classic/"].tapped > .profile_pop {
        background-size: 52px auto !important;
    }

    /* Custom cases on tablet */
    .top_loot_item[data-case-type="custom"] > .profile_pop,
    .top_loot_item[data-case-type="custom"]:hover > .profile_pop,
    .top_loot_item[data-case-type="custom"].tapped > .profile_pop {
        background-size: 72px auto !important;
    }

    .profile_pop img {
        width: 40px;
        height: 40px;
        margin-bottom: 6px;
    }
}

@media (max-width: 576px) {
    .top_loot_box {
        height: 85px;
        padding: 6px 0;
        gap: 2px;
    }

    .top_loot_item,
    .best-drop-item {
        min-width: 100px;
        max-width: 100px;
        width: 100px;
        padding: 3px;
        border-radius: 4px;
    }

    /* Force best drop to exactly match other items */
    .best-drop-item {
        flex: 0 0 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
        width: 120px !important;
        height: 85px !important;
        align-self: center !important;
        margin-top: 0 !important;
    }



    .top_loot_item:hover {
        transform: translateZ(0);
    }

    .top_loot_item img {
        height: 75%;
    }

    .top_loot_item_name {
        font-size: 9px;
        padding: 2px 4px;
        letter-spacing: 0.2px;
    }

    .profile_pop {
        font-size: 10px;
        padding: 6px;
        background-size: 60px auto !important;
        background-position: center 50% !important;
    }

    /* Collection / Edition cases on 576px — same as custom */
    .top_loot_item[data-case-type="standard"]:not([data-case-image*="/classic/"]) > .profile_pop,
    .top_loot_item[data-case-type="standard"]:not([data-case-image*="/classic/"]):hover > .profile_pop,
    .top_loot_item[data-case-type="standard"]:not([data-case-image*="/classic/"]).tapped > .profile_pop {
        background-size: 62px auto !important;
    }

    /* Classic briefcase on 576px */
    .top_loot_item[data-case-type="standard"][data-case-image*="/classic/"] > .profile_pop,
    .top_loot_item[data-case-type="standard"][data-case-image*="/classic/"]:hover > .profile_pop,
    .top_loot_item[data-case-type="standard"][data-case-image*="/classic/"].tapped > .profile_pop {
        background-size: 44px auto !important;
    }

    /* Custom cases on 576px */
    .top_loot_item[data-case-type="custom"] > .profile_pop,
    .top_loot_item[data-case-type="custom"]:hover > .profile_pop,
    .top_loot_item[data-case-type="custom"].tapped > .profile_pop {
        background-size: 62px auto !important;
    }

    .profile_pop img {
        width: 35px;
        height: 35px;
        margin-bottom: 5px;
    }
}

@media (max-width: 480px) {
    .top_loot_box {
        height: 85px;
        padding: 6px 0;
        gap: 2px;
    }

    .top_loot_item {
        min-width: 100px;
        padding: 3px;
        border-radius: 4px;
    }

    .top_loot_item:hover {
        transform: translateZ(0);
    }

    .top_loot_item img {
        height: 75%;
    }

    .top_loot_item_name {
        font-size: 9px;
        padding: 2px 4px;
        letter-spacing: 0.2px;
    }

    .profile_pop {
        font-size: 10px;
        padding: 6px;
        background-size: 58px auto !important;
        background-position: center 50% !important;
    }

    /* Collection / Edition cases on 480px — same as custom */
    .top_loot_item[data-case-type="standard"]:not([data-case-image*="/classic/"]) > .profile_pop,
    .top_loot_item[data-case-type="standard"]:not([data-case-image*="/classic/"]):hover > .profile_pop,
    .top_loot_item[data-case-type="standard"]:not([data-case-image*="/classic/"]).tapped > .profile_pop {
        background-size: 58px auto !important;
    }

    /* Classic briefcase on 480px */
    .top_loot_item[data-case-type="standard"][data-case-image*="/classic/"] > .profile_pop,
    .top_loot_item[data-case-type="standard"][data-case-image*="/classic/"]:hover > .profile_pop,
    .top_loot_item[data-case-type="standard"][data-case-image*="/classic/"].tapped > .profile_pop {
        background-size: 42px auto !important;
    }

    /* Custom cases on 480px */
    .top_loot_item[data-case-type="custom"] > .profile_pop,
    .top_loot_item[data-case-type="custom"]:hover > .profile_pop,
    .top_loot_item[data-case-type="custom"].tapped > .profile_pop {
        background-size: 58px auto !important;
    }

    .profile_pop img {
        width: 35px;
        height: 35px;
        margin-bottom: 5px;
    }
}

@media (max-width: 360px) {
    .top_loot_box {
        height: 75px;
        padding: 5px 0;
        gap: 1px;
    }

    .top_loot_item,
    .best-drop-item {
        min-width: 85px;
        max-width: 85px;
        width: 85px;
        padding: 2px;
    }

    /* Force consistent sizing */
    .best-drop-item {
        flex: 0 0 85px;
        min-width: 85px;
        max-width: 85px;
        width: 85px;
        height: 75px;
    }

    .top_loot_item:hover {
        transform: translateZ(0);
    }

    .top_loot_item img {
        height: 70%;
    }

    .top_loot_item_name {
        font-size: 8px;
        padding: 2px 3px;
        letter-spacing: 0.1px;
    }

    .profile_pop {
        font-size: 9px;
        padding: 4px;
        background-size: 50px auto !important;
        background-position: center 50% !important;
    }

    /* Collection / Edition cases on 360px — same as custom */
    .top_loot_item[data-case-type="standard"]:not([data-case-image*="/classic/"]) > .profile_pop,
    .top_loot_item[data-case-type="standard"]:not([data-case-image*="/classic/"]):hover > .profile_pop,
    .top_loot_item[data-case-type="standard"]:not([data-case-image*="/classic/"]).tapped > .profile_pop {
        background-size: 52px auto !important;
    }

    /* Classic briefcase on 360px */
    .top_loot_item[data-case-type="standard"][data-case-image*="/classic/"] > .profile_pop,
    .top_loot_item[data-case-type="standard"][data-case-image*="/classic/"]:hover > .profile_pop,
    .top_loot_item[data-case-type="standard"][data-case-image*="/classic/"].tapped > .profile_pop {
        background-size: 36px auto !important;
    }

    /* Custom cases on 360px */
    .top_loot_item[data-case-type="custom"] > .profile_pop,
    .top_loot_item[data-case-type="custom"]:hover > .profile_pop,
    .top_loot_item[data-case-type="custom"].tapped > .profile_pop {
        background-size: 52px auto !important;
    }

    .profile_pop img {
        width: 30px;
        height: 30px;
        margin-bottom: 4px;
        border-width: 1px;
    }
}

@media (max-width: 320px) {
    .top_loot_box {
        height: 70px;
        padding: 4px 0;
    }

    .top_loot_item,
    .best-drop-item {
        min-width: 75px;
        padding: 2px;
        border-radius: 3px;
    }

    .best-drop-item {
        flex: 0 0 75px;
        width: 75px;
        height: 70px;
    }

    .top_loot_item img {
        height: 65%;
    }

    .top_loot_item_name {
        font-size: 7px;
        padding: 1px 2px;
        letter-spacing: 0;
    }

    .profile_pop {
        font-size: 8px;
        padding: 3px;
    }

    .profile_pop img {
        width: 25px;
        height: 25px;
        margin-bottom: 3px;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    .top_loot_box {
        height: 60px;
        padding: 3px 0;
    }

    .top_loot_item {
        min-width: 70px;
        padding: 2px;
    }

    .top_loot_item img {
        height: 60%;
    }

    .top_loot_item_name {
        font-size: 7px;
        padding: 1px 2px;
    }

    .profile_pop {
        font-size: 7px;
        padding: 2px;
    }

    .profile_pop img {
        width: 20px;
        height: 20px;
        margin-bottom: 2px;
    }
}

@media (max-width: 768px) {
    .top_loot_box .top_loot_item,
    .best-drop-item {
        transition: transform 0.2s ease, opacity 0.2s ease !important;
    }

    /* Hide popup by default on mobile, make it full-size */
    .top_loot_item > .profile_pop,
    .best-drop-item > .profile_pop {
        display: none !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        overflow: hidden;
        padding: 8px !important;
        background-color: transparent !important;
        background-size: 70px auto !important;
        background-position: center 50% !important;
        background-repeat: no-repeat;
        z-index: 2;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    
    /* Aggressively force-hide non-tapped popups */
    .top_loot_item:not(.tapped) > .profile_pop,
    .best-drop-item:not(.tapped) > .profile_pop {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        background-image: none !important;
    }

    /* Custom cases - big */
    .top_loot_item[data-case-type="custom"] > .profile_pop {
        background-size: 80px auto !important;
        background-position: center 50% !important;
    }

    /* Standard briefcase cases - smaller and positioned lower */
    .top_loot_item[data-case-type="standard"][data-case-image*="/classic/"] > .profile_pop {
        background-size: 50px auto !important;
        background-position: center 50% !important;
    }

    /* Show popup on tap */
    .top_loot_item.tapped > .profile_pop,
    .best-drop-item.tapped > .profile_pop {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto;
        background-size: 85px auto !important;
        transition: opacity 0.2s ease !important;
    }

    .top_loot_item[data-case-type="standard"][data-case-image*="/classic/"].tapped > .profile_pop {
        background-size: 60px auto !important;
    }

    /* Hide original top-level overlays on mobile tap so container-level ones show through */
    /* Exception: iPhone uses profile_pop::before for pattern (see .iphone-device rules above) */
    body:not(.iphone-device) .top_loot_item.tapped>.profile_pop::before,
    body:not(.iphone-device) .best-drop-item.tapped>.profile_pop::before,
    body:not(.iphone-device) .top_loot_item[data-weapon-pattern].tapped>.profile_pop::before {
        display: none !important;
    }

    /* Hide CASE label on mobile */
    .top_loot_item > .profile_pop .case-pop-label,
    .best-drop-item > .profile_pop .case-pop-label {
        display: none !important;
        visibility: hidden !important;
    }

    /* Raise case name to the absolute top of the popup */
    .top_loot_item > .profile_pop b,
    .best-drop-item > .profile_pop b {
        position: absolute !important;
        top: 8px !important;
        left: 0;
        right: 0;
        padding: 0 6px;
        text-align: center;
        display: block !important;
        font-size: 10px !important;
        line-height: 16px !important;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: "Outfit", "Montserrat", sans-serif !important;
        font-weight: 500 !important;
        letter-spacing: 0.01em !important;
        color: #ffffff !important;
        background: transparent !important;
        text-shadow: none !important;
        -webkit-text-stroke: 0 !important;
        z-index: 10;
        margin: 0 !important;
    }

    /* Hide weapon image on tap */
    .top_loot_item.tapped > img:not(.top-loot-avatar),
    .best-drop-item.tapped > img:not(.top-loot-avatar) {
        transform: scale(0) !important;
        opacity: 0 !important;
    }

    .top_loot_item > img:not(.top-loot-avatar),
    .best-drop-item > img:not(.top-loot-avatar) {
        transition: transform 0.3s ease, opacity 0.3s ease !important;
        height: 85% !important;
    }

    /* Hide bottom name bar on tap */
    .top_loot_item.tapped .top_loot_item_name,
    .best-drop-item.tapped .top_loot_item_name {
        transform: translateY(100%) !important;
        opacity: 0 !important;
    }

    .top_loot_item_name {
        transition: transform 0.3s ease, opacity 0.3s ease !important;
    }

    .top_loot_item_name .item-case-name {
        display: block !important;
    }
}




/* Reduced motion and low-end overrides */
@media (prefers-reduced-motion: reduce) {
    .top_loot_box {
        scroll-behavior: auto;
        transition: none !important;
        backdrop-filter: none;
    }

    .top_loot_item,
    .top_loot_item img,
    .top_loot_item_name {
        transition: none !important;
    }

    .top_loot_item:hover {
        transform: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
}

body.low-end-device .top_loot_box {
    backdrop-filter: none !important;
}

body.low-end-device .top_loot_item {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

body.low-end-device .top_loot_item img {
    filter: none !important;
}

body.low-end-device .top_loot_item_name {
    text-shadow: none !important;
}

/* Legacy/low-end fallbacks: minimize GPU-heavy effects */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .top_loot_box {
        backdrop-filter: none;
        background: rgba(0, 0, 0, 0.3);
    }

    .top_loot_item {
        backdrop-filter: none;
    }
}

body.low-end-device .top_loot_box,
body.low-end-device .top_loot_item,
body.low-end-device .top_loot_item img,
body.low-end-device .top_loot_item_name {
    transition: none !important;
}

body.low-end-device .top_loot_item.new {
    animation: none !important;
}

body.low-end-device .top_loot_item {
    will-change: auto !important;
}

body.low-end-device .top_loot_item:hover {
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

body.low-end-device .top_loot_item:hover img {
    transform: none !important;
    opacity: 1 !important;
}

body.low-end-device .top_loot_item:hover .top_loot_item_name {
    transform: none !important;
    opacity: 1 !important;
}

body.low-end-device .top_loot_item,
body.low-end-device .top_loot_item_name {
    box-shadow: none !important;
}

@media screen and (max-width: 1024px) {
    html.ios-constrained .top_loot_box,
    body.is-ios .top_loot_box {
        background: rgba(8, 10, 28, 0.48) !important;
        border-bottom-color: rgba(126, 87, 255, 0.18) !important;
    }

    html.ios-constrained body.low-end-device .top_loot_item,
    body.is-ios.low-end-device .top_loot_item {
        box-shadow: none !important;
        background: rgba(30, 30, 40, 0.9) !important;
    }

    html.ios-constrained body.low-end-device .top_loot_item.color-blue,
    body.is-ios.low-end-device .top_loot_item.color-blue {
        background: linear-gradient(135deg, rgba(80, 146, 255, 0.28) 0%, rgba(32, 87, 196, 0.28) 100%) !important;
        border-color: rgba(80, 146, 255, 0.28) !important;
    }

    html.ios-constrained body.low-end-device .top_loot_item.color-purple,
    body.is-ios.low-end-device .top_loot_item.color-purple {
        background: linear-gradient(135deg, rgba(162, 89, 255, 0.28) 0%, rgba(110, 39, 197, 0.28) 100%) !important;
        border-color: rgba(162, 89, 255, 0.28) !important;
    }

    html.ios-constrained body.low-end-device .top_loot_item.color-pink,
    body.is-ios.low-end-device .top_loot_item.color-pink {
        background: linear-gradient(135deg, rgba(255, 126, 185, 0.28) 0%, rgba(255, 101, 163, 0.28) 100%) !important;
        border-color: rgba(255, 126, 185, 0.28) !important;
    }

    html.ios-constrained body.low-end-device .top_loot_item.color-red,
    body.is-ios.low-end-device .top_loot_item.color-red {
        background: linear-gradient(135deg, rgba(255, 59, 59, 0.28) 0%, rgba(168, 0, 0, 0.28) 100%) !important;
        border-color: rgba(255, 59, 59, 0.28) !important;
    }

    html.ios-constrained body.low-end-device .top_loot_item.color-gold,
    body.is-ios.low-end-device .top_loot_item.color-gold {
        background: linear-gradient(135deg, rgba(255, 224, 102, 0.28) 0%, rgba(255, 215, 0, 0.28) 100%) !important;
        border-color: rgba(255, 215, 0, 0.28) !important;
    }

    html.ios-constrained body.low-end-device .top_loot_item.color-white,
    body.is-ios.low-end-device .top_loot_item.color-white {
        background: linear-gradient(135deg, rgba(248, 250, 252, 0.28) 0%, rgba(226, 232, 240, 0.28) 100%) !important;
        border-color: rgba(226, 232, 240, 0.28) !important;
    }

    html.ios-constrained body.low-end-device .top_loot_item.color-khaki,
    body.is-ios.low-end-device .top_loot_item.color-khaki {
        background: linear-gradient(135deg, rgba(226, 194, 117, 0.28) 0%, rgba(191, 167, 111, 0.28) 100%) !important;
        border-color: rgba(226, 194, 117, 0.28) !important;
    }

    html.ios-constrained body.low-end-device .top_loot_item.color-gray,
    html.ios-constrained body.low-end-device .top_loot_item.color-grey,
    body.is-ios.low-end-device .top_loot_item.color-gray,
    body.is-ios.low-end-device .top_loot_item.color-grey {
        background: linear-gradient(135deg, rgba(176, 176, 176, 0.28) 0%, rgba(110, 110, 110, 0.28) 100%) !important;
        border-color: rgba(176, 176, 176, 0.28) !important;
    }

    html.ios-constrained body.low-end-device .best-drop-item,
    html.ios-constrained body.low-end-device .best-drop-item.color-blue,
    html.ios-constrained body.low-end-device .best-drop-item.color-purple,
    html.ios-constrained body.low-end-device .best-drop-item.color-pink,
    html.ios-constrained body.low-end-device .best-drop-item.color-red,
    html.ios-constrained body.low-end-device .best-drop-item.color-gold,
    html.ios-constrained body.low-end-device .best-drop-item.color-white,
    html.ios-constrained body.low-end-device .best-drop-item.color-khaki,
    html.ios-constrained body.low-end-device .best-drop-item.color-gray,
    html.ios-constrained body.low-end-device .best-drop-item.color-grey,
    body.is-ios.low-end-device .best-drop-item,
    body.is-ios.low-end-device .best-drop-item.color-blue,
    body.is-ios.low-end-device .best-drop-item.color-purple,
    body.is-ios.low-end-device .best-drop-item.color-pink,
    body.is-ios.low-end-device .best-drop-item.color-red,
    body.is-ios.low-end-device .best-drop-item.color-gold,
    body.is-ios.low-end-device .best-drop-item.color-white,
    body.is-ios.low-end-device .best-drop-item.color-khaki,
    body.is-ios.low-end-device .best-drop-item.color-gray,
    body.is-ios.low-end-device .best-drop-item.color-grey {
        background: linear-gradient(135deg, rgba(255, 224, 102, 0.3) 0%, rgba(184, 134, 11, 0.26) 100%) !important;
        border-color: rgba(255, 215, 0, 0.74) !important;
    }

    html.ios-constrained .best-drop-item::after,
    body.is-ios .best-drop-item::after {
        right: -64px;
        width: 64px;
        background: linear-gradient(to right, rgba(255, 215, 0, 0.42), rgba(255, 215, 0, 0) 100%);
    }
}

/* Mobile-only Top Loot Styling (name at top, case image fully bright/legible on tap) */
@media (max-width: 768px) {
    .top_loot_item>.profile_pop b {
        position: absolute;
        top: 8px;
        left: 0;
        right: 0;
        padding: 0 6px;
        text-align: center;
    }

    .top_loot_item>.profile_pop {
        background-position: center 58% !important;
    }

    .top_loot_item[data-case-type="custom"] > .profile_pop {
        background-position: center 58% !important;
    }

    .top_loot_item[data-case-type="standard"][data-case-image*="/classic/"] > .profile_pop {
        background-position: center 62% !important;
    }

    /* Hide original top-level overlay on mobile tap */
    /* Exception: iPhone uses profile_pop::before for pattern (see .iphone-device rules above) */
    body:not(.iphone-device) .top_loot_item.tapped>.profile_pop::before {
        display: none !important;
    }

    /* Container-level overlay on mobile tap */
    .top_loot_item.tapped::before {
        content: '';
        display: block;
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(8, 10, 18, 0.65) 0%, rgba(8, 10, 18, 0) 45%);
        z-index: 1;
    }

    .top_loot_item[data-weapon-pattern].tapped::before {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background-image: 
            linear-gradient(180deg, rgba(8, 10, 18, 0.65) 0%, rgba(8, 10, 18, 0) 45%),
            var(--top-loot-pattern-image),
            var(--top-loot-pattern-image) !important;
        background-size: 100% 100%, var(--top-loot-pattern-tile-size, 38px auto), var(--top-loot-pattern-tile-size-alt, 28px auto) !important;
        background-position: center, 0 0, var(--top-loot-pattern-offset, 20px 16px) !important;
        background-repeat: no-repeat, repeat, repeat !important;
        opacity: 0.08 !important;
        filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) !important;
        z-index: 1 !important;
    }
}