/* PHASE10_V76_UPRIGHT_HAND_START
 * Hand only: native asset quality, zero tilt/scale, correct sorted draw slot.
 * Safe with V72/V73 toolbar/50%-visible layout and V75 target selection.
 * No rules for table-melds, draw/discard stacks, avatars, lobby or game engine.
 */

/* ALL devices: no 3-D deck fan, scaling, or filters on real hand art. */
#gameScreen #handCards.hand-cards {
    perspective: none !important;
    transform-style: flat !important;
}
#gameScreen #handCards.hand-cards > .hand-card {
    /* Move vertically for selection only. Never tilt or upscale the PNG. */
    --fan: 0deg !important;
    transform: translate3d(0, var(--lift, 0px), 0) !important;
    transform-origin: center bottom !important;
    transform-style: flat !important;
    rotate: none !important;
    scale: none !important;
    skew: none !important;
    filter: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.14) !important;
    transition: transform .14s ease-out !important;
}
#gameScreen #handCards.hand-cards > .hand-card .fairy-card.has-card-png {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 7px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
    overflow: hidden !important;
}
#gameScreen #handCards.hand-cards > .hand-card .fairy-card.has-card-png > img.card-png {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 7px !important;
    object-fit: contain !important;
    object-position: center !important;
    image-rendering: auto !important;
    -webkit-font-smoothing: auto !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    /* Slight brighten-only correction so original art remains sharp on both
       desktop and mobile, especially when half-covered by the dark action bar. */
    filter: brightness(1.32) contrast(1.10) saturate(1.10) !important;
    transform: none !important;
    rotate: none !important;
    scale: none !important;
    box-shadow: none !important;
    transition: none !important;
}

/* New cards already enter their sorted DOM slot via renderViewerHand().
 * Remove V52's elevated z-index which made them cover adjacent cards.
 * Keep the informative NEU marker, but no out-of-place fly-in or enlargement.
 */
#gameScreen #handCards.hand-cards > .hand-card.has-new-marker:not(.selected) {
    z-index: auto !important;
}
#gameScreen #handCards.hand-cards > .hand-card.new-card {
    animation: mp-v76-arrive-straight .22s ease-out 1 both !important;
}
@keyframes mp-v76-arrive-straight {
    from { opacity: .68; }
    to { opacity: 1; }
}
#gameScreen #handCards.hand-cards > .hand-card.selected {
    --lift: -22px !important;
    z-index: 60 !important;
}
#gameScreen #handCards.hand-cards > .hand-card:focus-visible {
    outline: 2px solid rgba(255, 230, 161, .95) !important;
    outline-offset: 1px !important;
}

/* Desktop: get readable, original-sized PNGs by setting card dimensions,
 * not applying the old 155% CSS scale. The existing overlapping slots remain.
 */
@media (pointer: fine) and (hover: hover) and (min-width: 901px) {
    #gameScreen #handCards.hand-cards > .hand-card {
        flex: 0 0 clamp(72px, 7.65vw, 121px) !important;
        width: clamp(72px, 7.65vw, 121px) !important;
        height: auto !important;
        aspect-ratio: 480 / 721 !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    #gameScreen #handCards.hand-cards > .hand-card.selected {
        --lift: -25px !important;
    }
}

/* Touch: preserve V72's precise centered fan width and half-height toolbar
 * crop, but ensure every button is 100% vertical and matches source ratio.
 */
@media (pointer: coarse), (hover: none) and (max-width: 1100px) {
    #gameScreen #handCards.hand-cards > .hand-card {
        flex: 0 0 var(--mp-v72-card-width, 68px) !important;
        width: var(--mp-v72-card-width, 68px) !important;
        height: var(--mp-v72-card-height, 102px) !important;
        aspect-ratio: 480 / 721 !important;
        margin-left: calc(-1 * var(--mp-v72-overlap, 18px)) !important;
        transform: translate3d(0, var(--lift, 0px), 0) !important;
    }
    #gameScreen #handCards.hand-cards > .hand-card:first-child {
        margin-left: 0 !important;
    }
    #gameScreen #handCards.hand-cards > .hand-card.selected {
        --lift: -19px !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    #gameScreen #handCards.hand-cards > .hand-card.new-card {
        animation-duration: 1ms !important;
    }
}
/* PHASE10_V76_UPRIGHT_HAND_END */