:root {
    --card-bg: #0b111a;
    --cyan: #00d4ff;
    --magenta: #e21dff;
    --ice-blue: #b8eaff;
    --border-inner: #1a2633;
    --gradient: linear-gradient(90deg, #00d4ff 0%, #e21dff 100%);
}

/* WHEEL START */


.wheel-pointerX {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 25px solid var(--magenta);
    filter: drop-shadow(0 0 8px var(--magenta));
    z-index: 5;
}

.wheel-pointerX {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 25px solid var(--magenta);
    filter: drop-shadow(0 0 8px var(--magenta));
    z-index: 5;
}

#wheel-pointer {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    /* border-top: 25px solid var(--magenta);
    filter: drop-shadow(0 0 8px var(--magenta)); */
    border-top: 25px solid #fff;
    filter: drop-shadow(0 0 8px #fff);
    z-index: 10;
}

.pointer-wiggle {
    animation: pointerWiggle 140ms ease-out;
}

@keyframes pointerWiggle {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }

    30% {
        transform: translateX(-50%) rotate(-12deg);
    }

    60% {
        transform: translateX(-50%) rotate(6deg);
    }

    100% {
        transform: translateX(-50%) rotate(0deg);
    }
}

/* WHEEL ENDS */