/*
 * top_loot_ios.css
 * iOS-specific overrides for the top loot roulette.
 *
 * Goal: make tap behavior identical to Android.
 *   - Default: weapon image + name bar visible, profile_pop HIDDEN.
 *   - First tap (.tapped added by JS): profile_pop visible, weapon image
 *     and name bar hidden.
 *   - Second tap: navigate to case page.
 *
 * Applies to: touch screens where (hover: none) is true –
 * i.e. iPhone, iPad, and Android (as a safety net alongside the
 * main mobile rules in top_loot.css).
 */

/* ─── 1. RESET HOVER-TRIGGERED EFFECTS ON TOUCH ──────────────────────────── */
/*
 * On iOS Safari every tap fires :hover. The desktop hover rules
 * (hiding weapon image and showing profile_pop) must be neutralised
 * on touch devices UNLESS the .tapped class is present.
 */
@media (max-width: 768px) and (hover: none) {

    /* Prevent the desktop :hover from hiding the weapon image */
    .top_loot_item:hover img:not(.top-loot-avatar),
    .best-drop-item:hover img:not(.top-loot-avatar) {
        transform: none !important;
        opacity: 1 !important;
    }

    /* Prevent the desktop :hover from hiding the skin name */
    .top_loot_item:hover .top_loot_item_name,
    .best-drop-item:hover .top_loot_item_name {
        transform: none !important;
        opacity: 1 !important;
    }

    /* Prevent the desktop :hover from showing profile_pop */
    .top_loot_item:hover > .profile_pop,
    .best-drop-item:hover > .profile_pop {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* ─── 2. DEFAULT STATE: profile_pop fully hidden ──────────────────── */
    .top_loot_item > .profile_pop,
    .best-drop-item > .profile_pop {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        padding: 8px !important;
        background-color: transparent !important;
        background-size: 70px auto !important;
        background-position: center 50% !important;
        background-repeat: no-repeat !important;
        z-index: 2 !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
    }

    /* Custom (open) cases – slightly larger background */
    .top_loot_item[data-case-type="custom"] > .profile_pop,
    .top_loot_item[data-case-type="custom"].tapped > .profile_pop {
        background-size: 80px auto !important;
    }

    /* Classic briefcase – slightly smaller */
    .top_loot_item[data-case-type="standard"][data-case-image*="/classic/"] > .profile_pop,
    .top_loot_item[data-case-type="standard"][data-case-image*="/classic/"].tapped > .profile_pop {
        background-size: 50px auto !important;
    }

    /* Collection / Edition cases (standard, NOT /classic/) – in between */
    .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/"]).tapped > .profile_pop {
        background-size: 62px auto !important;
    }

    /* ─── 3. DEFAULT STATE: weapon image + name fully visible ─────────── */
    .top_loot_item > img:not(.top-loot-avatar),
    .best-drop-item > img:not(.top-loot-avatar) {
        transform: none !important;
        opacity: 1 !important;
        transition: transform 0.3s ease, opacity 0.3s ease !important;
    }

    .top_loot_item .top_loot_item_name,
    .best-drop-item .top_loot_item_name {
        transform: none !important;
        opacity: 1 !important;
        transition: transform 0.3s ease, opacity 0.3s ease !important;
    }

    /* ─── 4. TAPPED STATE: show profile_pop, hide weapon + name ──────── */
    .top_loot_item.tapped > .profile_pop,
    .best-drop-item.tapped > .profile_pop {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        background-size: 85px auto !important;
    }

    /* Classic briefcase tapped */
    .top_loot_item[data-case-type="standard"][data-case-image*="/classic/"].tapped > .profile_pop {
        background-size: 60px auto !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;
        transition: transform 0.25s ease, opacity 0.25s ease !important;
    }

    /* Hide skin 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;
    }

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

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

    /* ─── 6. SUPPRESS inner profile_pop::before overlays on tap ──────── */
    .top_loot_item.tapped > .profile_pop::before,
    .best-drop-item.tapped > .profile_pop::before,
    .top_loot_item[data-weapon-pattern].tapped > .profile_pop::before {
        display: none !important;
    }
}