/* ================================================================
   Modulo Coupons — Wheel of Fortune CSS v1.0
   ================================================================ */

.mc-game-area#mc-game-wheel {
    display: flex; flex-direction: column;
    align-items: center; gap: 16px;
    padding: 8px 4px 4px;
}

/* ── Wheel wrapper ── */
.mc-wheel-wrap {
    position: relative;
    width: 100%; max-width: 300px;
    margin: 0 auto;
}

/* Canvas fills wrapper */
#mc-wheel-canvas {
    width: 100%; height: auto;
    display: block;
    border-radius: 50%;
    /* Outer decorative ring */
    box-shadow:
        0 0 0 4px #f59e0b,
        0 0 0 8px #d97706,
        0 0 0 10px rgba(0,0,0,.12),
        0 8px 32px rgba(0,0,0,.25);
}

/* ── Spin button ── */
#mc-wheel-spin-btn {
    background: var(--mc-primary, #7c3aed);
    color: #fff; border: none;
    border-radius: var(--mc-radius-sm, 10px);
    padding: 13px 36px;
    font-size: 16px; font-weight: 800;
    cursor: pointer; letter-spacing: .3px;
    transition: opacity .2s, transform .15s;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    position: relative; overflow: hidden;
}
#mc-wheel-spin-btn:hover  { opacity: .88; transform: translateY(-2px); }
#mc-wheel-spin-btn:active { transform: translateY(0); }
#mc-wheel-spin-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Spinning shimmer */
#mc-wheel-spin-btn.mc-btn--spinning::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%);
    animation: mc-shimmer 1s linear infinite;
}
@keyframes mc-shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

/* ── Win overlay on wheel ── */
.mc-wheel-win-label {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: rgba(0,0,0,.75);
    color: #fff; border-radius: 12px;
    padding: 10px 18px; text-align: center;
    font-weight: 800; font-size: 15px;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none; white-space: nowrap;
    backdrop-filter: blur(4px);
}
.mc-wheel-win-label.mc-visible {
    transform: translate(-50%, -50%) scale(1);
}

/* ── Decorative stars around wheel ── */
.mc-wheel-stars {
    position: absolute; inset: -12px;
    pointer-events: none;
}
.mc-wheel-star {
    position: absolute;
    font-size: 14px;
    animation: mc-star-pulse 2s ease-in-out infinite;
}
@keyframes mc-star-pulse {
    0%,100% { opacity: .6; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.3); }
}