:root {
    --w-pop: var(--brand, #e8590c);
    --w-pop-2: var(--brand-2, #be440a);
    --w-cream: #fffdf7;
    --w-cream-2: var(--gold-soft, #fbefd6);
    --w-ink: var(--ink, #211c16);
    --w-rim: #ffffff;
}
.wheel-veil [hidden],
[hidden] {
    display: none !important;
}

.wheel-veil {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    background: rgba(28, 20, 12, 0.62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.35s ease,
        visibility 0.35s;
}
.wheel-veil.is-open {
    opacity: 1;
    visibility: visible;
    cursor: pointer;
}
.wheel-veil.is-spinning,
.wheel-veil.is-won {
    cursor: default;
}
.wheel-confetti {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.wheel-wrap {
    position: relative;
    width: min(360px, 84vw, 52vh);
    aspect-ratio: 1;
    flex: 0 0 auto;
    cursor: pointer;
    transform: scale(0.94);
    opacity: 0;
    transition:
        transform 0.55s cubic-bezier(0.2, 0.9, 0.2, 1),
        opacity 0.4s ease;
}
.wheel-veil.is-open .wheel-wrap {
    transform: none;
    opacity: 1;
}
.wheel-veil.is-won .wheel-wrap {
    transform: scale(0.7);
}
.wheel-veil.is-spinning .wheel-wrap {
    cursor: default;
}
.wheel-svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 16px 34px rgba(40, 24, 8, 0.4));
}
.wheel-needle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}
.wheel-needle .wn-pin {
    transform-box: view-box;
    transform-origin: 200px 30px;
}
.wheel-veil.is-spinning .wheel-needle .wn-pin {
    animation: wheel-tick 0.11s linear infinite;
}
@keyframes wheel-tick {
    0%,
    100% {
        transform: rotate(0deg);
    }
    45% {
        transform: rotate(-8deg);
    }
}

.wheel-panel {
    flex: 0 0 auto;
    max-width: 420px;
    margin-top: 22px;
    text-align: center;
    color: #fff;
    animation: wheel-rise 0.5s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
@keyframes wheel-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.wheel-panel h2 {
    font-size: clamp(21px, 5vw, 28px);
    font-weight: 900;
    line-height: 1.3;
    margin: 0 0 8px;
    text-shadow: 0 2px 14px rgba(20, 12, 4, 0.45);
}
.wheel-panel p {
    margin: 0 auto 14px;
    max-width: 330px;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}
.wheel-now {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
}
.wheel-now b {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
}
.wheel-btn {
    display: inline-block;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 16.5px;
    font-weight: 800;
    color: #fff;
    padding: 15px 40px;
    border-radius: 100px;
    background: linear-gradient(135deg, var(--brand-3, #fb8c3c) 0%, var(--w-pop) 48%, var(--w-pop-2) 100%);
    box-shadow: 0 12px 26px -8px rgba(232, 89, 12, 0.8);
    transition:
        transform 0.12s ease,
        filter 0.2s;
}
.wheel-btn:hover {
    filter: brightness(1.06);
}
.wheel-btn:active {
    transform: scale(0.97);
}
.wheel-btn:disabled {
    opacity: 0.6;
    cursor: default;
    box-shadow: none;
    transform: none;
    animation: none;
}
.wheel-btn.is-pulsing {
    animation: wheel-pulse 1.7s ease-in-out infinite;
}
@keyframes wheel-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 12px 26px -8px rgba(232, 89, 12, 0.8);
    }
    50% {
        transform: scale(1.06);
        box-shadow: 0 18px 36px -6px rgba(232, 89, 12, 0.95);
    }
}
.wheel-prize {
    font-size: clamp(26px, 6.5vw, 36px);
    font-weight: 900;
    line-height: 1.2;
    color: #ffb067;
    margin: 0 0 12px;
    text-shadow: 0 2px 18px rgba(232, 89, 12, 0.5);
}
.wheel-prices {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}
.wheel-prices .new {
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    color: #fff;
}
.wheel-prices .new small {
    font-size: 17px;
    font-weight: 700;
    margin-inline-start: 4px;
}
.wheel-prices .old {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: line-through;
}
.wheel-saved {
    display: inline-block;
    background: var(--w-pop);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    padding: 5px 13px;
    border-radius: 100px;
    margin-bottom: 14px;
}
.wheel-hold {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 14px !important;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 12.5px !important;
    font-weight: 600;
    line-height: 1.4 !important;
    text-align: center;
    color: #ffc9a3 !important;
}
.wheel-hold b {
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.price-old.is-wheel {
    animation: wheel-rise 0.45s ease both;
}

@media (max-width: 600px) {
    .wheel-wrap {
        width: min(330px, 86vw, 46vh);
    }
    .wheel-veil.is-won .wheel-wrap {
        transform: scale(0.6);
    }
    .wheel-panel {
        margin-top: 16px;
    }
    .wheel-btn {
        width: 100%;
        padding: 15px 18px;
    }
    .wheel-prices .new {
        font-size: 34px;
    }
}
@media (max-height: 680px) {
    .wheel-veil {
        justify-content: flex-start;
        padding-top: 16px;
    }
    .wheel-wrap {
        width: min(280px, 78vw, 40vh);
    }
    .wheel-veil.is-won .wheel-wrap {
        transform: scale(0.52);
    }
    .wheel-panel {
        margin-top: 10px;
    }
    .wheel-panel h2 {
        font-size: 20px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .wheel-veil,
    .wheel-wrap,
    .wheel-panel {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
    .wheel-veil.is-spinning .wheel-needle .wn-pin,
    .wheel-btn.is-pulsing {
        animation: none !important;
    }
}