#slot-machine-wrapper {
    width: 700px; /* Adjusted width for user request */
    height: 90%;
    max-height: 500px; /* Taller for vertical scrolling */
}

.slot-machine {
    width: 100%;
    height: 100%;
    background-color: var(--block-color);
    border-radius: 15px;
    box-shadow: 0 0 25px var(--block-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
}

.slot-header {
    background-color: var(--secondary-color);
    width: 100%;
    padding: 15px 0;
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
    color: var(--text-color);
    border-bottom: 3px solid var(--primary-color);
    margin-bottom: 20px;
}

.slot-display-wrapper {
    height: 300px; /* Height for visible vertical items */
    width: 100%;
    overflow: hidden;
    position: relative;
    background-color: var(--slot-item-bg);
    border: 3px solid var(--primary-color); /* Added border for definition */
    border-radius: 10px;
}

.slot-items {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%; /* Occupy full width of wrapper */
    display: flex; /* Vertical layout */
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
}

.slot-items.spinning {
    /* State indicator for JS, no transition */
}

@keyframes flash-winner {
    0%, 100% {
        background-color: var(--slot-item-bg);
        color: var(--text-color);
        transform: scale(1);
    }
    50% {
        background-color: var(--slot-highlight);
        color: var(--text-color-dark);
        transform: scale(1.05);
    }
}

.flashing {
    animation: flash-winner 0.5s 2; /* Flash 2 times */
}


.slot-item {
    height: 100px; /* Height of each item */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-color);
    font-size: 1.8em;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--slot-item-bg);
    flex-shrink: 0;
    box-sizing: border-box; /* Added for accurate height calculation */
}

.slot-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(
        to bottom, /* Changed to bottom for vertical */
        rgba(26, 26, 46, 0.9) 0%,
        rgba(26, 26, 46, 0.2) 20%,
        rgba(26, 26, 46, 0.2) 80%,
        rgba(26, 26, 46, 0.9) 100%
    );
}

.slot-highlight {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: var(--slot-item-height, 100px); /* Default height */
    transform: translateY(-50%);
    box-sizing: border-box;
    border-top: 2px solid transparent; /* Changed to transparent */
    border-bottom: 2px solid transparent; /* Changed to transparent */
    background-color: transparent; /* Changed to transparent */
    pointer-events: none; /* Allows clicks to pass through to the slot machine */
    z-index: 2;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out; /* Add transition for smoothness */
}

.spin-slot-button {
    margin-top: 25px;
    padding: 15px 40px;
    font-size: 1.3em;
}

#show-final-results-button {
    margin-top: 20px;
    position: absolute;
    bottom: 15px;
    right: 25px;
    z-index: 10;
}

@media (max-width: 768px) {
    #slot-machine-wrapper {
        width: 95%; /* Adjust wrapper width for mobile */
    }

    .slot-machine {
        width: 100%; /* Make slot machine fill its wrapper */
    }

    .slot-display-wrapper {
        height: 360px; /* 120px * 3 items */
    }

    .slot-item {
        height: 120px; /* 40px * 3 */
        font-size: 1.5em; /* 1em * 1.5 */
    }

    .slot-highlight {
        height: 120px; /* Same as slot-item height */
    }
}