/*
 * Wheel motion correction layer — v1.1.19.
 * Loaded after the legacy theme styles so motion/stacking cannot be masked.
 */

.wheel-stage {
    perspective: 920px;
    transform-style: preserve-3d;
}

.wheel-disc {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, .54),
        inset 0 -16px 22px rgba(172, 61, 19, .16),
        inset 0 8px 14px rgba(255, 245, 172, .12),
        0 8px 0 #dc7130,
        0 11px 0 rgba(159, 58, 25, .2),
        0 22px 34px rgba(166, 44, 27, .24) !important;
}

.wheel-rim {
    background: transparent !important;
    box-shadow:
        0 0 0 3px #f48b2d,
        inset 0 0 0 2px rgba(255, 250, 190, .94),
        inset 0 -5px 7px rgba(205, 91, 12, .2),
        0 7px 0 #e18a2b,
        0 11px 0 rgba(188, 70, 20, .18),
        0 20px 28px rgba(197, 57, 30, .2) !important;
}

.wheel-overlay.is-ready.is-spinning .wheel-stage:not(.is-dimmed) {
    animation: tts-wheel-v114-3d-spin 2.6s cubic-bezier(.16,.72,.18,1) both !important;
}

@keyframes tts-wheel-v114-3d-spin {
    0%   { transform: perspective(920px) rotateX(0deg) rotateY(0deg) scale(1); }
    10%  { transform: perspective(920px) rotateX(8deg) rotateY(-1deg) scale(1.016); }
    55%  { transform: perspective(920px) rotateX(6deg) rotateY(.7deg) scale(1.014); }
    82%  { transform: perspective(920px) rotateX(3deg) rotateY(0deg) scale(1.006); }
    100% { transform: perspective(920px) rotateX(0deg) rotateY(0deg) scale(1); }
}

.wheel-overlay.is-spinning .wheel-stage::before {
    opacity: .82 !important;
    transform: translateZ(-18px) translateY(11px) scale(.95) !important;
    box-shadow: 0 24px 42px 16px rgba(160, 48, 22, .24) !important;
}

.wheel-overlay.is-ready.is-landed .wheel-stage.is-settling {
    animation: tts-wheel-v113-3d-land .5s cubic-bezier(.18,.82,.2,1.04) both !important;
}

@keyframes tts-wheel-v113-3d-land {
    0%   { transform: perspective(920px) rotateX(0deg) scale(1); }
    28%  { transform: perspective(920px) rotateX(-3.1deg) scale(1.045); }
    56%  { transform: perspective(920px) rotateX(1deg) scale(.985); }
    80%  { transform: perspective(920px) rotateX(-.35deg) scale(1.01); }
    100% { transform: perspective(920px) rotateX(0deg) scale(1); }
}

.wheel-hub-button {
    box-shadow:
        0 6px 0 #b71d2d,
        0 10px 0 rgba(132, 29, 32, .12),
        0 15px 23px rgba(159, 39, 33, .3),
        0 0 0 2px rgba(255, 202, 58, .34),
        inset 0 3px 5px rgba(255, 255, 255, .4) !important;
}

.wheel-overlay > .wheel-win-confetti {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10020 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    overflow: visible !important;
    perspective: 760px;
    transform: none !important;
    pointer-events: none !important;
}

.wheel-overlay > .wheel-win-confetti::before,
.wheel-overlay > .wheel-win-confetti::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.12);
}

.wheel-overlay > .wheel-win-confetti::before {
    width: 120px;
    height: 120px;
    border: 5px solid rgba(255, 228, 61, .92);
    box-shadow: 0 0 28px rgba(255, 98, 48, .46), inset 0 0 22px rgba(255, 255, 255, .52);
}

.wheel-overlay > .wheel-win-confetti::after {
    width: 190px;
    height: 190px;
    background: radial-gradient(circle, rgba(255, 255, 218, .9) 0%, rgba(255, 220, 55, .52) 22%, rgba(255, 71, 57, .14) 48%, transparent 70%);
}

.wheel-overlay > .wheel-win-confetti.is-bursting::before {
    animation: tts-wheel-v114-burst-ring .92s cubic-bezier(.12,.7,.18,1) both;
}

.wheel-overlay > .wheel-win-confetti.is-bursting::after {
    animation: tts-wheel-v114-burst-flash .58s ease-out both;
}

@keyframes tts-wheel-v114-burst-ring {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.12); border-width: 7px; }
    18% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(2.9); border-width: 1px; }
}

@keyframes tts-wheel-v114-burst-flash {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.08); }
    20% { opacity: .96; transform: translate(-50%, -50%) scale(.72); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(2.25); }
}

.wheel-overlay > .wheel-win-confetti span {
    position: absolute;
    display: block;
    width: 10px;
    height: 16px;
    border-radius: 2px;
    opacity: 0;
    animation: none !important;
    transform-style: preserve-3d;
    backface-visibility: visible;
    box-shadow: 0 2px 3px rgba(114, 37, 18, .18);
    will-change: transform, opacity;
}

.wheel-overlay > .wheel-win-confetti span:nth-child(4n) {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.wheel-overlay > .wheel-win-confetti span:nth-child(6n) {
    border-radius: 70% 20% 70% 20%;
}

.wheel-overlay > .wheel-win-confetti span:nth-child(4n + 1) { background: #ffda32; }
.wheel-overlay > .wheel-win-confetti span:nth-child(4n + 2) { background: #ff334f; }
.wheel-overlay > .wheel-win-confetti span:nth-child(4n + 3) { background: #fff; }
.wheel-overlay > .wheel-win-confetti span:nth-child(4n) { background: #ff8a24; }

.wheel-overlay.is-landed .wheel-win-confetti span {
    animation: none !important;
}

.wheel-prize-card {
    overflow: visible !important;
}

.wheel-prize-amount-slot {
    position: relative !important;
    z-index: 2;
    overflow: visible !important;
    isolation: isolate;
}

.wheel-prize-amount-slot > * {
    position: relative;
    z-index: 2;
}

.wheel-prize-amount-slot::before,
.wheel-prize-amount-slot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.12);
}

.wheel-prize-amount-slot::before {
    width: 118px;
    height: 118px;
    border: 3px solid rgba(255, 73, 54, .74);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(255, 212, 51, .15);
}

.wheel-prize-amount-slot::after {
    width: 190px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 225, 71, .96) 0%, rgba(255, 116, 35, .28) 36%, transparent 72%);
}

.wheel-prize-amount-slot.is-impacting::before {
    animation: tts-wheel-v113-shock-ring .82s cubic-bezier(.12,.7,.18,1) both;
}

.wheel-prize-amount-slot.is-impacting::after {
    animation: tts-wheel-v113-impact-flash .58s ease-out both;
}

@keyframes tts-wheel-v113-shock-ring {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.12); border-width: 6px; }
    18%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); border-width: 1px; }
}

@keyframes tts-wheel-v113-impact-flash {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
    20%  { opacity: 1; transform: translate(-50%, -50%) scale(.9); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}

.wheel-prize-amount,
.wheel-prize-amount.is-revealed {
    filter: none !important;
    text-rendering: geometricPrecision;
}

.wheel-prize-amount {
    opacity: 0;
    font-size: clamp(2.35rem, 10vw, 3.15rem) !important;
    font-weight: 950 !important;
    letter-spacing: -.055em !important;
    color: #f1273e !important;
    text-shadow: 0 3px 0 #ffd33f, 0 8px 18px rgba(212, 53, 40, .24) !important;
    transform: translateY(18px) scale(.18);
}

.wheel-prize-amount.is-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: none !important;
}

.wheel-prize-amount::before {
    width: 170% !important;
    height: 190% !important;
    background: radial-gradient(circle, rgba(255, 228, 71, .86) 0%, rgba(255, 116, 38, .28) 38%, transparent 68%) !important;
}

.wheel-prize-amount.is-revealed::before {
    animation: tts-wheel-v112-prize-halo .86s ease-out forwards !important;
}

@keyframes tts-wheel-v112-prize-halo {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
    20%  { opacity: 1; }
    62%  { opacity: .54; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

.wheel-prize-card.is-impacting {
    animation: tts-wheel-v112-card-impact .66s cubic-bezier(.18,.84,.2,1.08) both !important;
}

@keyframes tts-wheel-v112-card-impact {
    0%   { transform: scale(1); }
    28%  { transform: scale(1.038); box-shadow: 0 0 0 8px rgba(255, 210, 55, .2), 0 19px 45px rgba(197, 47, 35, .28); }
    55%  { transform: scale(.99); }
    78%  { transform: scale(1.012); }
    100% { transform: scale(1); }
}
