/* =================================
   STAGE
   ================================= */
.mw-widget {
    width: 100%;
    max-width: 876px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;

}

.mw-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 876 / 1580;
    overflow: hidden;
}

/* =================================
   BACKGROUND
   ================================= */
.mw-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* =================================
   WHEEL BASE
   ================================= */
.mw-wheel-slot {
    position: absolute;
    transform: translate(-50%, -50%);
}

.mw-wheel {
    width: var(--wheel-size);
    height: auto;
    aspect-ratio: 1 / 1;
    display: block;

    transform: rotate(0deg);
    transform-origin: 50% 50%;
    transition: transform 4.2s cubic-bezier(0.15, 0.85, 0.25, 1);

    user-select: none;
    -webkit-user-drag: none;
}

/* =================================
   SPIN BUTTON (INVISIBLE)
   ================================= */
.mw-spin-btn {
    position: absolute;
    transform: translate(-50%, -50%);

    width: var(--btn-w);
    height: var(--btn-h);

    background: transparent;
    border: none;
    color: transparent;

    cursor: pointer;
}

.mw-spin-btn:disabled {
    opacity: 0.5;
}

/* =================================
   ADJECTIVE WHEEL CONFIG
   ================================= */
.mw-adj {
    --wheel-x: 46.5%;
    --wheel-y: 23%;
    --wheel-size: 131%;

    --btn-x: 56%;
    --btn-y: 46%;
    --btn-w: 200px;
    --btn-h: 65px;
}

/* =================================
   NOUN WHEEL CONFIG
   ================================= */
.mw-noun {
    --wheel-x: 46.5%;
    --wheel-y: 71%;
    --wheel-size: 131%;

    --btn-x: 56%;
    --btn-y: 94%;
    --btn-w: 200px;
    --btn-h: 65px;
}