html {
    height: 100%;
    width: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-image: url('pattern.png');
    background-repeat: repeat;
    background-color: #2c3e50;
    overflow: auto; /* Changed from hidden to auto in case of smaller screens, though overflow should ideally be on html/body */
}

#slot-machine-container {
    position: relative;
    width: 1581px;
    height: 871px;
    flex-shrink: 0;
}

#machine-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

#machine-underlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Same width as the container */
    height: 100%; /* Same height as the container */
    z-index: 0;  /* Places it below slots (z-index: 1) and overlay (z-index: 10) */
    pointer-events: none; /* Ensures it doesn't interfere with clicks */
}

#slot-machine-clickable-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    cursor: pointer;
}

.slot-window {
    position: absolute;
    width: 450px;
    height: 760px;
    overflow: hidden; /* ADDED BACK: This will clip the flipping card to the window's bounds */
    background-color: transparent;
    z-index: 1;
    perspective: 1500px; /* This provides the 3D context for the child .card-flipper */
}

/* Original positions for slot windows */
#slot1 { top: 75px; left: 46px; }
#slot2 { top: 75px; left: 565px; }
#slot3 { top: 75px; left: 1083px; }

/* Remove old .wheel-strip styles as it's no longer in HTML */
/*
.wheel-strip { ... }
.wheel-strip img { ... }
*/

/* New styles for card flip */
.card-flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Slower bouncy flip */
}

.card-flipper.is-flipped {
    transform: rotateY(180deg);
}

.card-face { /* Applied to the <img> tags */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Crucial for the flip effect */
    /* object-fit: cover; /* Uncomment if your card images have different aspect ratios and need to fill */
    /* border-radius: 10px; /* Optional: if you want rounded corners on cards */
}

.card-front {
    /* transform: rotateY(0deg); /* Default state */
    /* z-index: 2; /* Not strictly necessary with backface-visibility */
}

.card-back {
    transform: rotateY(180deg); /* Initially positioned at the back */
}