body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically (if height allows) */
    min-height: 100vh; /* Ensure body takes at least full viewport height */
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px; /* Add some padding */
    box-sizing: border-box; /* Include padding in element's total width and height */
}

#deck-container {
    position: relative; /* Crucial for absolute positioning of cards */
    width: 393px;  /* Adjust card width */
    height: 512px; /* Adjust card height */
    cursor: pointer; /* Indicate it's clickable */
    perspective: 1000px; /* Adds depth for 3D transforms if needed */
    margin: 20px auto; /* Center the container */
    border-radius: 25px; /* Slightly rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); /* Card shadow */
}

.card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff; /* Fallback background */
    border-radius: 25px; /* Slightly rounded corners */
    overflow: hidden; /* Ensure image stays within bounds */

    /* Smooth transition for movement and opacity */
    /*transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;*/

    /* Prevent dragging the image itself */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;

    /* Ensure backfaces are hidden if rotated */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.card img {
    display: block; /* Remove extra space below image */
    width: 100%;
    height: 100%;
    object-fit: contain; /* Scale image while preserving aspect ratio */
}

.card img.lazy-image {
    background-color: #e0e0e0;
}

/* Style for cards that have been "drawn" */
.card.drawn {
    /* Move card off to the side and rotate slightly */
    transform: translateX(-150%) translateY(-20%) rotate(-25deg);
    opacity: 0; /* Fade out */
    cursor: default; /* Not clickable anymore */
}


#prev-button {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
}

#reset-button {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
}