/* -------------------------------------------------------------
 * Slot Machine Reels
 * ------------------------------------------------------------- */
.reels-container {
    position: absolute;
    top: 50%;
    /* Adjusted for center */
    left: 50%;
    transform: translate(-50%, -53%);
    width: 86%;
    /* Estimate: needs tuning */
    height: 76%;
    /* Estimate: needs tuning */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    /* Space between reels */
    overflow: hidden;
    /* Hide symbols outside the window */
    z-index: 5;
    /* Above board background, below UI overlay/Glass if any */
    /* border: 2px solid red; Debugging border */
}

.reel-column {
    position: relative;
    width: 100%;
    height: 100%;
    /* overflow: hidden;  Masking handled by container or individual column */
}

.reel-strip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Height will be dynamic based on symbol count */
    display: flex;
    flex-direction: column;
    /* transition: transform 0.1s linear; REMOVED to prevent conflict with GSAP */
}

.reel-symbol {
    width: 100%;
    height: 100px;
    /* Symbol height - Needs to match container/row height calculation */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.reel-symbol img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

@media (max-width: 1200px) {
    .reels-container {
        height: 75%;
        /* 3 × 65px = 195px / 315px board height */
        gap: 14px;
    }

    .reel-symbol img {
        width: 65%;
        height: 65%;
    }
}

@media (max-width: 1024px) {
    .reels-container {
        height: 74%;
        /* 3 × 65px = 195px / 265px board height */
    }
}

@media (max-width: 900px) {
    .reels-container {
        height: 72%;
        /* 3 × 55px = 165px / 230px board height */
        gap: 12px;
    }

    .reel-symbol img {
        width: 75%;
        height: 75%;
    }
}

/* Animation Classes */
.is-spinning .reel-strip {
    animation: spinBlur 0.1s linear infinite;
}

@keyframes spinBlur {
    0% {
        transform: translateY(0);
        filter: blur(0px);
    }

    100% {
        transform: translateY(-1000px);
        filter: blur(2px);
    }

    /* Value needs to match strip pattern length */
}