/* =========================
       RESPONSIVE MOBILE DESIGN
       ========================= */

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

        /* Main content */
        #promo-container {
            margin: 60px auto 0;
            width: 100%;
            padding: 0 10px;
            box-sizing: border-box;
        }

        #claim-box {
            width: 100%;
            padding: 0 10px;
            box-sizing: border-box;
        }

        #phases {
            width: 100%;
        }

        /* =========================
           PROMO BANNER
           ========================= */

        .promo-box {
            width: 100%;
            box-sizing: border-box;
            padding: 6px;
            margin: 0 0 15px 0 !important;
            border-radius: 15px;
        }

        .promo-box > a {
            display: block;
            width: 100%;
        }

        .promo-box > a img {
            width: 100% !important;
            height: auto !important;
            display: block;
            border-radius: 15px;
        }

        .promo-details {
            width: 100%;
        }

        .promo-box .details-bg {
            width: 80% !important;
            max-width: 80%;
            box-sizing: border-box;

            margin: 10px auto 0;
            padding: 8px 12px;

            background: black;
            border: 2px solid #303030;
            border-radius: 12px 12px 0 0;

            display: flex;
            flex-direction: column;
            gap: 4px;

            overflow: hidden;
        }

        .promo-box .event-details {
            width: 100%;
            display: flex;
            align-items: center;

            gap: 5px;

            font-size: 10px;
            line-height: 1.3;

            white-space: nowrap;
            overflow: hidden;
        }

        /* FORCE the icons to stay small */
        .promo-box .event-details img,
        .promo-box .details-bg > img {
            width: 14px !important;
            height: 14px !important;
            min-width: 14px !important;
            max-width: 14px !important;
            min-height: 14px !important;
            max-height: 14px !important;

            object-fit: contain;
            flex-shrink: 0;
        }

        .promo-box .event-details span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }



        #target_text {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            margin-top: 20px;
            text-align: center;
        }

        #target {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            gap: 5px;
        }

        .target-amount {
            position: relative;

            width: 250px;
            height: 32px;
            line-height: 32px;

            padding: 0;

            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0.5px;

            display: flex;
            align-items: center;
            justify-content: center;

            box-sizing: border-box;
        }

        /* ARROW */
        .target-amount::after {
            content: "";

            position: absolute;

            top: 0;
            right: -16px;

            width: 0;
            height: 0;

            border-top: 16px solid transparent;
            border-bottom: 16px solid transparent;
            border-left: 16px solid #A51E24;
        }

        /* TEXT BELOW */
        .target-message {
            display: block;

            width: 250px;

            padding-left: 0;
            margin: 0;

            font-size: 14px;
            line-height: 18px;
            font-weight: 700;

            letter-spacing: 0.5px;
            text-align: center;

            box-sizing: border-box;
        }

        /* =========================
           PHASE LIST
           ========================= */

        .phase-list {
            width: 100% !important;

            display: flex !important;
            flex-direction: column;

            gap: 4%;

            margin: 20px 0;
            padding: 0;
        }


        /* =========================
           PHASE CARD
           ========================= */

        .phase-card {
            position: relative;

            width: 100%;
            height: 62px;
            min-height: 62px;

            padding: 0;

            display: grid;

            grid-template-columns: 26% 1fr 24%;

            align-items: center;

            border-radius: 14px;

            overflow: visible;

            margin-block: 15px;

            box-sizing: border-box;
        }


        /* =========================
           PHASE LEFT SIDE
           ========================= */

        .phase-title {
            position: absolute;

            left: 0;
            top: 7px;

            width: 26%;

            text-align: center;

            font-size: 11px;
            line-height: 1;

            margin: 0;
        }


        .phase-number {
            position: absolute;

            left: 0;
            top: 20px;

            width: 26%;

            text-align: center;

            font-size: 32px;
            line-height: 1;

            margin: 0;
        }


        /* =========================
           DIVIDER
           ========================= */

        .phase-divider {
            display: none;
        }


        /* Vertical divider */
        .phase-card::before {
            content: "";

            position: absolute;

            top: 0;
            bottom: 0;

            left: 26%;

            width: 1px;

            background: rgba(255,255,255,.15);

            border: none;

            border-radius: 0;

            pointer-events: none;

            z-index: 1;
        }


        /* =========================
           UNIT LEFT
           ========================= */

        .phase-left {
            grid-column: 2;

            margin: 0;
            margin-top: -30px;

            padding-left: 10px;

            text-align: left;

            font-size: 11px;
            line-height: 1.1;

            color: #999;
        }


        .phase-left .unit {
            font-size: 12px;

            margin-right: 3px;
        }


        /* =========================
           REWARD
           ========================= */

        .reward-title {
            position: absolute;

            left: 26%;
            top: 28px;

            margin: 0;
            padding-left: 10px;

            font-size: 11px;
            line-height: 1;

            color: #999;
        }


        .reward-value {
            position: absolute;

            left: 26%;
            top: 43px;

            margin: 0;
            padding-left: 10px;

            font-size: 11px;
            line-height: 1;

            color: #999;

            white-space: nowrap;

            overflow: hidden;
            text-overflow: ellipsis;

            max-width: calc(74% - 90px);
        }


        /* =========================
           CLAIM BUTTON
           ========================= */

        .claim-btn {
            position: absolute;

            right: 10px;
            top: 50%;

            transform: translateY(-50%);

            width: 70px;
            height: 24px;

            min-width: 0;
            max-width: none;

            aspect-ratio: auto;

            font-size: 10px;

            padding: 0;

            border-radius: 20px;
        }


        .claim-btn:hover {
            transform: translateY(-50%);
        }


        /* =========================
           ACTIVE CARD
           ========================= */

        .phase-card.claimed {
            border: 1px solid #d71920;

            background: linear-gradient(
                to right,
                #850000 0%,
                #5a0808 100%
            );
        }


        /* Active card arrow */
        .phase-card.claimed::after {
            content: "";

            position: absolute;

            left: 50%;
            bottom: -22px;

            right: auto;
            top: auto;

            transform: translateX(-50%);

            width: 0;
            height: 0;

            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 9px solid #d71920;

            z-index: 5;
        }


        /* =========================
           LOCKED CARD
           ========================= */

        .phase-card.locked {
            opacity: .55;

            border-color: #333;

            background: linear-gradient(
                to right,
                #222 0%,
                #111 100%
            );
        }


        /* =========================
           NOTES
           ========================= */

        #notes {
            padding: 0 10px;
            font-size: 12px;
        }

        #claim-box {
            height: auto !important;
            min-height: 0 !important;
            margin-bottom: 0 !important;
            padding-bottom: 0 !important;
        }

        #phases {
            height: auto !important;
            min-height: 0 !important;
        }
    }