/* Player Card Layout (Opponents) */
.seat .player-cards,
.seat .cards-container {
    z-index: 1 !important;
    bottom: 35px;
    position: absolute !important;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

/* Individual Card Stacking Priority */
.seat .card,
.player-cards .card,
.cards-container .card {
    z-index: 1 !important;
}

/* Card components */
.card {
    width: 60px;
    height: 85px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border: none;
    box-shadow: none;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.4));
    transform: scale(1.35);
    transform-origin: bottom center;
}

.card:first-child {
    margin-left: 0;
    transform: rotate(-10deg) translateX(10px) translateY(5px);
}

.card:nth-child(2) {
    transform: rotate(10deg) translateX(-10px) translateY(5px);
}

/* Card back */
.card-back {
    background-color: transparent !important;
    /* Absolute path required: cards.css lives at /styles/cards.css, so relative paths would resolve under /styles/Cards/. */
    background-image: url('/Cards/classic/back.png') !important;
    background-size: cover !important;
    background-position: center !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Card animation */
@keyframes dealCard {
    0% {
        opacity: 0;
        transform: translate(var(--startX, 0px), var(--startY, 0px)) scale(0) rotate(-180deg);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
}

.card-animated {
    opacity: 0;
    animation: dealCard 0.5s ease-out forwards;
}


/* Hero hand display */
#hero-hand-display {
    position: fixed;
    bottom: 85px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: -15px;
    z-index: 50;
    pointer-events: none;
}

.hero-waiting-next-hand {
    background: rgba(8, 10, 14, 0.84);
    border: 1px solid rgba(248, 211, 107, 0.45);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    color: #f8d36b;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    padding: 9px 14px;
    text-align: center;
    white-space: nowrap;
}

#hero-hand-display .card {
    transform: scale(3) translateY(20px);
    transform-origin: bottom center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
}

/* Card fan effect */
#hero-hand-display .card:first-child {
    transform: scale(3) rotate(-6deg) translateY(20px);
}

#hero-hand-display .card:last-child {
    transform: scale(3) rotate(6deg) translateY(20px);
}

/* ───────────────────────────────────────────────────────────────
   Omaha 4-card fan
   Scoped under body[data-variant^="omaha"] (set by client/game.js
   on tableConfig). Overrides the Hold'em :first-child/:last-child
   2-card fan with a symmetric 4-card fan via :nth-child(1..4).
   Centered (#hero-hand-display uses left:50% + translateX(-50%)),
   so safe-area-inset-left/right do not need to be added here.
   Touch targets remain ≥44×44px (cards are 82×115 on mobile).
   ─────────────────────────────────────────────────────────────── */

/* Desktop 4-card fan */
body[data-variant^="omaha"] #hero-hand-display .card:nth-child(1) {
    transform: scale(3) rotate(-9deg) translateY(20px);
}
body[data-variant^="omaha"] #hero-hand-display .card:nth-child(2) {
    transform: scale(3) rotate(-3deg) translateY(20px);
}
body[data-variant^="omaha"] #hero-hand-display .card:nth-child(3) {
    transform: scale(3) rotate(3deg) translateY(20px);
}
body[data-variant^="omaha"] #hero-hand-display .card:nth-child(4) {
    transform: scale(3) rotate(9deg) translateY(20px);
}

/* Desktop opponent 4-card fan (radiating from bottom-center).
   Existing global `.card:first-child` / `.card:nth-child(2)` only
   rotate cards 1 and 2 — cards 3-4 of an Omaha opponent stay flat
   and overflow the seat avatar. These rules force a symmetric
   4-card fan with translateX progression so cards radiate evenly
   from the seat center. Hero hand uses `#hero-hand-display`
   (above) — this scope (`.seat .player-cards`) covers both
   opponents and hero-seat showdown reveal (when active). */
body[data-variant^="omaha"] .seat .player-cards .card {
    transform-origin: 50% 100%;
}
/* Opponent fan footprint reduced (translateX
   halved from ±7%/±2% → ±3%/±1%, extremity translateY 5% → 4%,
   scale 1.35 → 1.15) so the post-deal silhouette stays close to
   the deal-stacked footprint and chip stacks behind the fan remain
   visible. Rotation ±9°/±3° preserved. transform-origin stays
   default. */
body[data-variant^="omaha"] .seat .player-cards .card:nth-child(1) {
    transform: scale(1.15) rotate(-9deg) translateX(-3%) translateY(4%);
    margin-right: -30px;
}
body[data-variant^="omaha"] .seat .player-cards .card:nth-child(2) {
    transform: scale(1.15) rotate(-3deg) translateX(-1%) translateY(1%);
    margin-right: -30px;
}
body[data-variant^="omaha"] .seat .player-cards .card:nth-child(3) {
    transform: scale(1.15) rotate(3deg) translateX(1%) translateY(1%);
    margin-right: -30px;
}
body[data-variant^="omaha"] .seat .player-cards .card:nth-child(4) {
    transform: scale(1.15) rotate(9deg) translateX(3%) translateY(4%);
    margin-left: 0;
}

/* Mobile landscape 4-card fan — hero amplified ±12°/±4°
   because ±9°/±3° looked too flat on iPhone 17 Pro Max landscape.
   Compact margin overlap to fit narrow viewports. */
@media (max-width: 950px) and (orientation: landscape) {
    /* Mobile hero — ±7°/±2.5° + translateX/Y conservative. */
    body[data-variant^="omaha"] #hero-hand-display .card:nth-child(1) {
        transform: rotate(-7deg) translateX(-8%) translateY(4%) !important;
        margin-right: -40px !important;
    }
    body[data-variant^="omaha"] #hero-hand-display .card:nth-child(2) {
        transform: rotate(-2.5deg) translateX(-3%) translateY(1%) !important;
        margin-right: -40px !important;
    }
    body[data-variant^="omaha"] #hero-hand-display .card:nth-child(3) {
        transform: rotate(2.5deg) translateX(3%) translateY(1%) !important;
        margin-right: -40px !important;
    }
    body[data-variant^="omaha"] #hero-hand-display .card:nth-child(4) {
        transform: rotate(7deg) translateX(8%) translateY(4%) !important;
        margin-left: 0 !important;
    }
    /* Mobile opponent — same footprint tighten as desktop. */
    body[data-variant^="omaha"] .seat .player-cards .card:nth-child(1) {
        transform: rotate(-9deg) translateX(-3%) translateY(4%) !important;
        margin-right: -30px !important;
    }
    body[data-variant^="omaha"] .seat .player-cards .card:nth-child(2) {
        transform: rotate(-3deg) translateX(-1%) translateY(1%) !important;
        margin-right: -30px !important;
    }
    body[data-variant^="omaha"] .seat .player-cards .card:nth-child(3) {
        transform: rotate(3deg) translateX(1%) translateY(1%) !important;
        margin-right: -30px !important;
    }
    body[data-variant^="omaha"] .seat .player-cards .card:nth-child(4) {
        transform: rotate(9deg) translateX(3%) translateY(4%) !important;
        margin-left: 0 !important;
    }
}

/* Mobile portrait 4-card fan — same amplification as landscape. */
@media (max-width: 950px) and (orientation: portrait) {
    body[data-variant^="omaha"] #hero-hand-display .card:nth-child(1) {
        transform: rotate(-7deg) translateX(-8%) translateY(4%) !important;
        margin-right: -40px !important;
    }
    body[data-variant^="omaha"] #hero-hand-display .card:nth-child(2) {
        transform: rotate(-2.5deg) translateX(-3%) translateY(1%) !important;
        margin-right: -40px !important;
    }
    body[data-variant^="omaha"] #hero-hand-display .card:nth-child(3) {
        transform: rotate(2.5deg) translateX(3%) translateY(1%) !important;
        margin-right: -40px !important;
    }
    body[data-variant^="omaha"] #hero-hand-display .card:nth-child(4) {
        transform: rotate(7deg) translateX(8%) translateY(4%) !important;
        margin-left: 0 !important;
    }
    body[data-variant^="omaha"] .seat .player-cards .card:nth-child(1) {
        transform: rotate(-9deg) translateX(-3%) translateY(4%) !important;
        margin-right: -30px !important;
    }
    body[data-variant^="omaha"] .seat .player-cards .card:nth-child(2) {
        transform: rotate(-3deg) translateX(-1%) translateY(1%) !important;
        margin-right: -30px !important;
    }
    body[data-variant^="omaha"] .seat .player-cards .card:nth-child(3) {
        transform: rotate(3deg) translateX(1%) translateY(1%) !important;
        margin-right: -30px !important;
    }
    body[data-variant^="omaha"] .seat .player-cards .card:nth-child(4) {
        transform: rotate(9deg) translateX(3%) translateY(4%) !important;
        margin-left: 0 !important;
    }
}