/* ================================================================
   Modulo Coupons — Slot Machine CSS v1.0
   ================================================================ */

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

/* ── Machine body ── */
.mc-slot-machine {
    background: linear-gradient(160deg, #1a1a2e, #16213e, #0f3460);
    border-radius: var(--mc-radius, 16px);
    padding: 16px;
    width: 100%; max-width: 320px;
    box-shadow:
        0 0 0 3px #f59e0b,
        0 0 0 5px #92400e,
        0 12px 40px rgba(0,0,0,.5);
    position: relative;
    overflow: hidden;
}

/* Sheen effect on body */
.mc-slot-machine::before {
    content: '';
    position: absolute; top: 0; left: -50%; width: 30%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
    transform: skewX(-15deg);
    pointer-events: none;
}

/* ── Screen bezel ── */
.mc-slot-screen {
    background: #000;
    border-radius: 10px;
    padding: 10px 8px;
    border: 3px solid #374151;
    box-shadow: inset 0 0 20px rgba(0,0,0,.8), 0 0 12px rgba(245,158,11,.15);
    position: relative;
    overflow: hidden;
}
/* Screen scanlines */
.mc-slot-screen::after {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.08) 2px, rgba(0,0,0,.08) 4px);
    pointer-events: none; z-index: 10;
}

/* ── Reels container ── */
.mc-slot-reels {
    display: flex; gap: 6px;
    justify-content: center;
}

/* ── Single reel ── */
.mc-slot-reel {
    flex: 1;
    height: 90px;
    overflow: hidden;
    border-radius: 6px;
    background: #111;
    position: relative;
    border: 1px solid #1f2937;
}

/* Reel fade top/bottom */
.mc-slot-reel::before,
.mc-slot-reel::after {
    content: ''; position: absolute;
    left: 0; right: 0; height: 28px; z-index: 5; pointer-events: none;
}
.mc-slot-reel::before { top: 0; background: linear-gradient(#000, transparent); }
.mc-slot-reel::after  { bottom: 0; background: linear-gradient(transparent, #000); }

/* Reel strip — scrolls vertically */
.mc-slot-strip {
    display: flex; flex-direction: column;
    transition: transform 0s; /* JS controls timing */
    will-change: transform;
}

/* Symbol cell */
.mc-slot-symbol {
    height: 90px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-size: clamp(28px, 9vw, 38px);
    gap: 2px;
    flex-shrink: 0;
}
.mc-slot-symbol-label {
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    color: rgba(255,255,255,.7); text-align: center;
    line-height: 1.1;
}

/* ── Win line indicator ── */
.mc-slot-win-line {
    position: absolute; top: 50%; left: 0; right: 0;
    height: 2px; transform: translateY(-50%);
    background: rgba(245,158,11,.0);
    z-index: 6; pointer-events: none;
    transition: background .3s;
}
.mc-slot-screen.mc-win-flash .mc-slot-win-line {
    background: rgba(245,158,11,.9);
    box-shadow: 0 0 12px rgba(245,158,11,.8);
    animation: mc-win-line-flash .4s ease-in-out 4;
}
@keyframes mc-win-line-flash {
    0%,100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* ── Win glow on reels ── */
.mc-slot-reel.mc-reel-win {
    animation: mc-reel-glow .5s ease-in-out 4;
    border-color: #f59e0b;
}
@keyframes mc-reel-glow {
    0%,100% { box-shadow: none; }
    50%      { box-shadow: 0 0 16px rgba(245,158,11,.9); }
}

/* ── Lever / spin button ── */
#mc-slot-spin-btn {
    background: linear-gradient(160deg, #dc2626, #991b1b);
    color: #fff; border: none;
    border-radius: 50px;
    padding: 13px 36px;
    font-size: 16px; font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 0 #7f1d1d, 0 6px 20px rgba(0,0,0,.3);
    transition: transform .1s, box-shadow .1s;
    letter-spacing: .5px;
}
#mc-slot-spin-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #7f1d1d, 0 8px 24px rgba(0,0,0,.3); }
#mc-slot-spin-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #7f1d1d; }
#mc-slot-spin-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 #7f1d1d; }

/* ── Credits display ── */
.mc-slot-credits {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; margin-top: 10px;
    background: rgba(0,0,0,.4); border-radius: 8px;
}
.mc-slot-credit-label {
    font-size: 9px; text-transform: uppercase;
    letter-spacing: 1px; color: rgba(255,255,255,.4);
}
.mc-slot-credit-val {
    font-size: 16px; font-weight: 900;
    color: #f59e0b; font-family: monospace; letter-spacing: 2px;
}

/* ── Decorative lights strip ── */
.mc-slot-lights {
    display: flex; justify-content: space-around;
    padding: 0 8px; margin-bottom: 10px;
}
.mc-slot-light {
    width: 8px; height: 8px; border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 6px #f59e0b;
    animation: mc-light-blink 1s ease-in-out infinite;
}
.mc-slot-light:nth-child(2) { animation-delay: .15s; background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.mc-slot-light:nth-child(3) { animation-delay: .30s; background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.mc-slot-light:nth-child(4) { animation-delay: .45s; background: #3b82f6; box-shadow: 0 0 6px #3b82f6; }
.mc-slot-light:nth-child(5) { animation-delay: .60s; background: #a855f7; box-shadow: 0 0 6px #a855f7; }
.mc-slot-light:nth-child(6) { animation-delay: .75s; }
@keyframes mc-light-blink {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.8); }
}

/* ── Result text ── */
.mc-slot-result-text {
    font-size: 13px; font-weight: 700;
    color: #f59e0b; text-align: center;
    min-height: 20px; letter-spacing: .3px;
    text-shadow: 0 0 8px rgba(245,158,11,.5);
    margin-top: 6px;
}