/*
 * spin_to_win.html — wheel stage.
 * RECREATION: the source positioned the SPIN button (top: 68%) and the pointer
 * (top: 62%; right: -8%) relative to the whole page column, so both drifted
 * whenever the ad above changed height. They are anchored to the wheel here:
 * button on the hub, pointer at 3 o'clock. The prize is read from the measured
 * pointer position, so the visible segment always matches the award.
 */
.spin-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}

#wheel {
    display: block;
    width: 100%;
    height: 100%;
}

.spin-stage #spin-btn {
    top: 50%;
    left: 50%;
    width: 26%;
    height: 15.4%;
}

.spin-stage #spin-btn:disabled {
    cursor: default;
    filter: saturate(0.6);
}

.spin-stage .imgspin {
    top: 50%;
    right: auto;
    left: calc(100% - 17px);
    transform: translateY(-50%);
    pointer-events: none;
}