/* ============================================================================
 * new_wheel.css
 * ----------------------------------------------------------------------------
 * The two prize wheels inside Index.html -> Lucky Wheel section.
 *
 * style.min.css sizes the wheel at a fixed 280x280 and paints the cards red /
 * magenta. Everything below re-does those two things: the wheel is now fluid
 * (it fills its card up to 460px and shrinks with the screen) and both cards
 * are light grey. Nothing outside .page_target.luckywheel is touched.
 *
 * ONE NUMBER TO RESIZE THE WHEELS: --nw-wheel-max below.
 * ========================================================================== */

.page_target.luckywheel {
    /* Biggest the wheel is allowed to get on a wide screen. */
    --nw-wheel-max: 460px;
    /* Card padding. The heading pill is pulled up by exactly this much. */
    --nw-pad: clamp(14px, 2.2vw, 26px);
    /* Theme -------------------------------------------------------------- */
    --nw-red-dark: #400001;
    --nw-red: #cc0009;
    --nw-red-grad: linear-gradient(180deg, #400001 0%, #cc0009 100%);
    --nw-gold-dark: #793510;
    --nw-gold: #ea940d;
    --nw-gold-light: #fde689;
    --nw-gold-grad: linear-gradient(180deg, #793510 0%, #ea940d 48%, #fde689 100%);
}

    /* Outer padding for the tab, which has no .page_wrap of its own. */
    .page_target.luckywheel .wheel-section {
        width: 100%;
        max-width: 1240px;
        margin: 0 auto;
        /*padding: 30px 15px 10px;*/
    }

    /* Two wheels, so two columns instead of the three-card layout. */
    .page_target.luckywheel .wheel-grid {
        grid-template-columns: minmax(0, 1fr);
        justify-content: center;
        gap: clamp(18px, 3vw, 32px);
        margin-bottom: 0;
    }

@media (min-width: 768px) {
    .page_target.luckywheel .wheel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 950px) {
    .page_target.luckywheel .wheel-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: calc(var(--nw-wheel-max) + 90px);
    }
}

/* ---------------------------------------------------------------------------
 * 1. Bigger + responsive wheel
 * ------------------------------------------------------------------------ */

/* style.min.css pins this to 280x280px. It now grows with the card. */
.page_target.luckywheel .wheel-box {
    width: 100%;
    max-width: var(--nw-wheel-max);
    /* Fallback for browsers without aspect-ratio, overridden just below. */
    height: clamp(240px, 74vw, var(--nw-wheel-max));
    margin: 0 auto clamp(10px, 1.6vw, 18px);
}

@supports (aspect-ratio: 1 / 1) {
    .page_target.luckywheel .wheel-box {
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* The prize artwork is already positioned in % of the wheel, so it scales by
   itself. The pointer and the hub are pixel sized, so they scale here.
   wheel-logo.png already draws its own gold ring and cream face, so the
   wrapper style.min.css puts around it is stripped back to nothing. */
.page_target.luckywheel .wheel-center-logo {
    width: 33%;
    height: 33%;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

    .page_target.luckywheel .wheel-center-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 0;
        filter: drop-shadow(0 4px 6px rgba(43, 8, 0, 0.45));
    }

/* Gold bulb frame (wheel-frame.png, transparent centre) laid over the wheel,
   and the pin (wheel-pin.png) replacing the CSS triangle. Both are sized in %
   of the wheel, so they scale with it. */
.page_target.luckywheel .wheel-box::after {
    content: "";
    position: absolute;
    z-index: 12;
    inset: 0;
    background: url("../Image/wheel-frame.png") no-repeat center / contain;
    pointer-events: none;
}

/* The pie tucks just inside the frame's inner edge. */
.page_target.luckywheel .wheel-rotor {
    inset: 5.5%;
}

.page_target.luckywheel .wheel-surface {
    border: 0;
}

.page_target.luckywheel .wheel-pointer {
    top: -1.5%;
    left: 50%;
    z-index: 14;
    width: 9%;
    height: 15.65%; /* 92 x 160 artwork, box is square */
    border: 0;
    background: url("../Image/wheel-pin.png") no-repeat center / contain;
    transform: translateX(-50%);
    filter: drop-shadow(0 5px 4px rgba(74, 23, 0, 0.35));
}

.page_target.luckywheel .wheel-card--lucky .wheel-pointer::after {
    display: none;
}

/* Card padding scales too, and the heading pill keeps sitting flush on the
   top edge (its negative margin has to match the padding exactly). */
.page_target.luckywheel .wheel-card--lucky,
.page_target.luckywheel .wheel-card--multiplier {
    padding: var(--nw-pad) !important;
}

    .page_target.luckywheel .wheel-card--lucky .wheel-card__heading,
    .page_target.luckywheel .wheel-card--multiplier .wheel-card__heading {
        gap: clamp(12px, 4vw, 40px);
        margin-top: calc(var(--nw-pad) * -1) !important;
        padding: 6px clamp(16px, 3vw, 30px) !important;
        font-size: clamp(15px, 1.5vw, 18px);
    }

        .page_target.luckywheel .wheel-card--multiplier .wheel-card__heading h3,
        .page_target.luckywheel .wheel-card__title {
            font-size: clamp(15px, 1.5vw, 18px);
        }

.page_target.luckywheel .wheel-card__description {
    margin-bottom: clamp(14px, 2.4vw, 25px) !important;
    font-size: clamp(11px, 1.1vw, 13px) !important;
}

.page_target.luckywheel .button--spin {
    margin: clamp(12px, 2vw, 25px) auto 10px !important;
    font-size: clamp(15px, 1.5vw, 18px);
}

/* ---------------------------------------------------------------------------
 * 2. Light grey cards
 * ------------------------------------------------------------------------ */

.page_target.luckywheel .wheel-card--lucky,
.page_target.luckywheel .wheel-card--multiplier {
    background: linear-gradient(180deg, #f5f6f8 0%, #dcdfe4 100%) !important;
    background-color: #e8eaee !important;
    border: 1px solid #d2d6dd;
    color: #1f2937;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.12) !important;
}

/* White text was set for the old red / magenta cards. */
.page_target.luckywheel .wheel-card__description {
    color: #4b5563 !important;
}

.page_target.luckywheel .chance-text {
    color: #374151 !important;
    background: rgba(17, 24, 39, 0.07);
}

/* ---------------------------------------------------------------------------
 * 3. Recolour the RED and the GOLD wedge only
 *    red  wedge : #bf080f / #f36368  ->  #400001 outer, #cc0009 inner
 *    gold wedge : #ae7a00 / #ffc53e  ->  #793510 outer, #ea940d inner
 *
 * Every other wedge keeps the colour style.min.css already gives it, and
 * nothing outside the wheel is touched. The wedge lists below are copied from
 * style.min.css with only those two wedges swapped.
 *
 * --wedge-rim is the outer end of each wedge, --wedge-hub the brighter inner
 * end (style.min.css masks it so it fades out before reaching the rim).
 * ------------------------------------------------------------------------ */

/* Lucky Wheel : 12 wedges, 30deg each. Red = 11 (HONOR), gold = 12 (iPHONE). */
.page_target.luckywheel .wheel-card--lucky {
    --wedge-rim: conic-gradient(from -15deg, #08683a 0deg 30deg, #d06001 30deg 60deg, #083a80 60deg 90deg, #4c7f1d 90deg 120deg, #651691 120deg 150deg, #05655d 150deg 180deg, #d06001 180deg 210deg, #083a80 210deg 240deg, #4c7f1d 240deg 270deg, #651691 270deg 300deg, #400001 300deg 330deg, /* red  wedge */
    #793510 330deg 360deg); /* gold wedge */
    --wedge-hub: conic-gradient(from -15deg, #1ae584 0deg 30deg, #f8aa68 30deg 60deg, #2c7bea 60deg 90deg, #92d357 90deg 120deg, #ae56df 120deg 150deg, #14e4d4 150deg 180deg, #f8aa68 180deg 210deg, #2c7bea 210deg 240deg, #92d357 240deg 270deg, #ae56df 270deg 300deg, #cc0009 300deg 330deg, /* red  wedge */
    #ea940d 330deg 360deg); /* gold wedge */
}

/* Both wheels are now one whole-wheel image, not prize icons, so they get
   none of the icon drop shadow or colour boost. Each artwork has a hub baked
   into it, so the logo on top is grown enough to cover it - otherwise the
   baked one would spin behind it. */
.page_target.luckywheel .wheel-art__item {
    filter: none;
}

/* Multiplier Wheel : 10 wedges, 36deg each. Red = 9 (OPPO), gold = 10 (iPHONE). */
.page_target.luckywheel .wheel-card--multiplier {
    --wedge-rim: conic-gradient(from -18deg, #08683a 0deg 36deg, #d06001 36deg 72deg, #083a80 72deg 108deg, #4c7f1d 108deg 144deg, #651691 144deg 180deg, #05655d 180deg 216deg, #d06001 216deg 252deg, #083a80 252deg 288deg, #400001 288deg 324deg, /* red  wedge */
    #793510 324deg 360deg); /* gold wedge */
    --wedge-hub: conic-gradient(from -18deg, #1ae584 0deg 36deg, #f8aa68 36deg 72deg, #2c7bea 72deg 108deg, #92d357 108deg 144deg, #ae56df 144deg 180deg, #14e4d4 180deg 216deg, #f8aa68 216deg 252deg, #2c7bea 252deg 288deg, #cc0009 288deg 324deg, /* red  wedge */
    #ea940d 324deg 360deg); /* gold wedge */
}

/* ---------------------------------------------------------------------------
 * 4. Small fixes
 * ------------------------------------------------------------------------ */

/* wheel.js disables the button while a wheel is turning and when the player
   runs out of chances - style.min.css has no disabled state for it. */
.page_target.luckywheel .button--spin:disabled {
    cursor: not-allowed;
    filter: saturate(0.55) brightness(0.95);
    opacity: 0.75;
}

    .page_target.luckywheel .button--spin:disabled:hover,
    .page_target.luckywheel .button--spin:disabled:active {
        transform: none;
    }

/* No artwork in the win popup - wheel.js still drops the prize image into
   #popupPrizeIcon, this just keeps it out of sight. */
.page_target.luckywheel .win-popup__icon {
    display: none;
}


.page_target.luckywheel .progress-track-wrapper {
    display: none;
}

.page_target.luckywheel .milestone-item__tick {
    width: 20px;
    height: 20px;
    margin-top: 6px;
    border-radius: 50%;
    background-color: #d8d8d8;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.4s ease;
}

.page_target.luckywheel .milestone-item.is-reached .milestone-item__tick {
    background-color: #34a853;
}

    .page_target.luckywheel .milestone-item.is-reached .milestone-item__tick::after {
        content: "✔";
        color: #fff;
        font-size: 11px;
    }