.hand {
    margin: 0 auto 60px auto; /* Center horizontally with auto margins */
    padding: 4px 0;
    width: fit-content; /* Only as wide as the cards */
    max-width: 100%; /* Prevent overflow on mobile */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align cards to top - reduces empty space above */
}

.realhand {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
    min-height: 0;
    width: auto;
}

.realhand img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform-origin: center 100%;
    will-change: transform;
}

.realcard {
    position: absolute;
    top: 0;
    left: 50%;          /* Aligns all cards to the center starting point */
    
    /* This makes the cards fan from their bottom-center point, which looks more natural */
    transform-origin: bottom center; 
}


@media (max-width: 600px) {
    .hand {
        margin: 0 auto 40px auto; /* Reduced bottom margin on mobile */
        padding-top: 0;
        padding-bottom: 2rem; /* Add bottom padding to prevent overlap with quiz options */
        width: fit-content; /* Only as wide as the cards */
        max-width: 100%; /* Prevent overflow on mobile */
        transform: scale(0.875); /* Scale to 87.5% on mobile - reduced from 150% */
        transform-origin: center top; /* Scale from top center */
    }

    .realhand {
        min-height: 0;
    }
    
    /* Remove transform from images - scaling is handled by parent .hand element */
    .realhand img {
        /* Transform removed - parent .hand handles scaling to avoid double scaling */
    }
}