/* All Fours - Custom Styles */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    background: #0a0a0a;
    transition: background 0.5s ease;
}

/* Lobby Screen Responsive - Modern 2025-2026 Design */
#lobby-screen {
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    background: 
        radial-gradient(ellipse at top, rgba(255, 69, 0, 0.05) 0%, transparent 50%),
        #0a0a0a;
}

.glass-panel-lobby {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(10, 10, 10, 0.7);
    border: 1px solid rgba(255, 69, 0, 0.2);
    border-radius: 20px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(255, 69, 0, 0.1);
}

/* Modern Scoreboard with Glassmorphism */
.glass-panel-scoreboard {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(10, 10, 10, 0.75);
    border: 1px solid rgba(255, 69, 0, 0.3);
    border-radius: 16px;
    padding: 12px 16px;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.7),
        0 0 30px rgba(255, 69, 0, 0.2),
        inset 0 0 20px rgba(255, 69, 0, 0.05);
}

.score-item {
    padding: 8px 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 69, 0, 0.1);
    transition: all 0.3s ease;
}

.score-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 69, 0, 0.2);
    transform: translateY(-1px);
}

.team-score-card {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 69, 0, 0.2);
    transition: all 0.3s ease;
    box-shadow: 
        0 2px 10px rgba(0, 0, 0, 0.5),
        inset 0 0 15px rgba(255, 69, 0, 0.05);
}

.team-score-you {
    background: rgba(30, 58, 138, 0.4);
}

.team-score-opponent {
    background: rgba(153, 27, 27, 0.4);
}

.team-score-card:hover {
    border-color: rgba(255, 69, 0, 0.4);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.7),
        0 0 25px rgba(255, 69, 0, 0.2),
        inset 0 0 20px rgba(255, 69, 0, 0.1);
    transform: translateY(-2px);
}

/* Lobby Button Styles */
.player-count-btn.active,
.rule-style-btn.active,
.target-score-btn.active {
    background: rgba(147, 51, 234, 0.8) !important;
    border-color: rgba(255, 69, 0, 0.4) !important;
    box-shadow: 
        0 2px 10px rgba(147, 51, 234, 0.3),
        0 0 15px rgba(255, 69, 0, 0.1);
}

.player-count-btn:not(.active):hover,
.rule-style-btn:not(.active):hover,
.target-score-btn:not(.active):hover {
    background: rgba(55, 65, 81, 0.9) !important;
    border-color: rgba(255, 69, 0, 0.3) !important;
    transform: translateY(-1px);
}

@media (min-width: 640px) {
    #lobby-screen {
        padding: 1rem;
    }
}

@media (min-width: 1024px) {
    #lobby-screen {
        padding: 1.5rem;
    }
}

@media (max-width: 640px) {
    .glass-panel-scoreboard {
        padding: 8px 12px;
    }
    
    .score-item {
        padding: 6px 2px;
    }
    
    .team-score-card {
        padding: 10px 12px;
    }
}

/* Premium theme matching table's red-orange glow */
body.multiplayer-mode,
body:has(#game-screen:not(.hidden)) {
    background: 
        radial-gradient(ellipse at center, rgba(255, 69, 0, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at top left, rgba(255, 69, 0, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse at top right, rgba(255, 69, 0, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse at bottom left, rgba(255, 69, 0, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse at bottom right, rgba(255, 69, 0, 0.05) 0%, transparent 40%),
        #0a0a0a;
    background-attachment: fixed;
}

/* Ensure game screen fits viewport - Mobile First */
#game-screen {
    min-height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

/* Hide game screen completely when hidden - override Tailwind's hidden class */
#game-screen.hidden {
    display: none !important;
    visibility: hidden !important;
}

/* When game screen is NOT hidden, ensure it's visible + 3D table scene */
#game-screen:not(.hidden) {
    display: flex !important;
    visibility: visible !important;
    overflow: visible;
    perspective: 1100px;
    perspective-origin: 50% 42%;
}

/* Scoreboard always visible and compact - Theme matched to table */
#scoreboard {
    flex-shrink: 0;
    padding: 8px 12px;
    background: rgba(10, 10, 10, 0.85) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 69, 0, 0.3) !important;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(255, 69, 0, 0.2),
        inset 0 0 20px rgba(255, 69, 0, 0.05);
}

/* Scoreboard responsive adjustments */
@media (max-width: 640px) {
    .glass-panel-scoreboard {
        padding: 8px 12px;
    }
    
    .score-item {
        padding: 6px 2px;
    }
    
    .team-score-card {
        padding: 10px 12px;
    }
}

/* Table Themes - DO NOT use table image, only gradients */
.game-table-green {
    background: linear-gradient(135deg, #065f46 0%, #047857 50%, #065f46 100%);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5), 0 10px 50px rgba(0, 0, 0, 0.8);
    border: 8px solid #92400e;
}

.game-table-blue {
    background: linear-gradient(135deg, #075985 0%, #0284c7 50%, #075985 100%);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5), 0 10px 50px rgba(0, 0, 0, 0.8);
    border: 8px solid #1e3a8a;
}

.game-table-red {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 50%, #991b1b 100%);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5), 0 10px 50px rgba(0, 0, 0, 0.8);
    border: 8px solid #7f1d1d;
}

.game-table-purple {
    background: linear-gradient(135deg, #6b21a8 0%, #9333ea 50%, #6b21a8 100%);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5), 0 10px 50px rgba(0, 0, 0, 0.8);
    border: 8px solid #4c1d95;
}

/* Card Styling - Modern, Smaller Size for Better UX */
.card {
    cursor: default;
    user-select: none;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.28s ease,
                filter 0.28s ease,
                opacity 0.3s ease;
    position: relative;
    will-change: transform, opacity, filter;
    width: 70px;
    height: 98px;
    min-width: 70px;
    min-height: 98px;
    aspect-ratio: 0.714;
    border-radius: 8px;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    /* Layered shadow = card thickness + lift off the table */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 -1px 0 rgba(0, 0, 0, 0.12) inset,
        1px 0 0 rgba(0, 0, 0, 0.08),
        -1px 0 0 rgba(0, 0, 0, 0.06),
        0 2px 0 #d4d4d4,
        0 3px 0 #c4c4c4,
        0 4px 0 #b0b0b0,
        0 8px 16px rgba(0, 0, 0, 0.45),
        0 16px 28px rgba(0, 0, 0, 0.28);
}

/* Thin edge highlight for physical card depth */
.card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.25),
        inset 0 0 12px rgba(0, 0, 0, 0.06);
    z-index: 2;
}

.card.playable {
    animation: pulse 1s infinite;
    cursor: pointer !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 2px 0 #d4d4d4,
        0 3px 0 #c4c4c4,
        0 4px 0 #b0b0b0,
        0 0 20px rgba(234, 179, 8, 0.75),
        0 10px 22px rgba(0, 0, 0, 0.4);
}

/* Hover lift is applied via JS so fan transforms are preserved */
.card.playable:hover {
    z-index: 100;
    filter: brightness(1.06);
}

.card-back {
    background-image: url('/images/card-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 2px 0 #1a3d2e,
        0 3px 0 #143226,
        0 4px 0 #0f281e,
        0 8px 16px rgba(0, 0, 0, 0.5),
        0 16px 28px rgba(0, 0, 0, 0.3);
}

/* Played cards area smooth transitions */
#played-cards {
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Animations */
@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(234, 179, 8, 0.8);
    }

    50% {
        box-shadow: 0 0 30px rgba(234, 179, 8, 1);
    }
}

@keyframes cardDeal {
    from {
        opacity: 0;
        filter: brightness(1.4);
    }

    to {
        opacity: 1;
        filter: brightness(1);
    }
}

/* Card animation and sizing — opacity only so hand fan transforms stay intact */
.card {
    animation: cardDeal 0.45s ease-out;
}

/* Mobile-first responsive design */
@media (max-width: 640px) {
    .game-table-oval {
        height: calc(100vh - 150px);
        max-height: 500px;
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
    
    .card {
        min-width: 45px;
        width: 45px;
        min-height: 63px;
        height: 63px;
        padding: 0.3rem;
    }
    
    #trump-card-display,
    #deck-display {
        width: 45px !important;
        height: 63px !important;
        min-width: 45px !important;
        min-height: 63px !important;
    }
    
    #left-player-hand .card,
    #right-player-hand .card {
        width: 40px !important;
        height: 56px !important;
        margin-top: -36px !important;
    }

    #bottom-player-hand .card,
    #top-player-hand .card {
        margin-left: -26px;
    }

    #bottom-player-hand .card:first-child,
    #top-player-hand .card:first-child {
        margin-left: 0;
    }

    #game-screen:not(.hidden) .game-table-oval {
        transform: rotateX(12deg) scale(0.99, 0.93) translateY(-4px) translateZ(8px);
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .game-table-oval {
        height: calc(100vh - 180px);
        max-height: 600px;
        padding: 0;
    }
}

@media (min-width: 1025px) {
    .game-table-oval {
        height: calc(100vh - 200px);
        max-height: 700px;
    }
}

@media (max-width: 640px) {
    .game-table-oval {
        height: 400px;
        padding: 0;
        border: none;
        margin: 0 auto;
    }
}

/* Modern Gaming UI - Floating Buttons and Glassmorphism */
.floating-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(255, 69, 0, 0.3);
    border-radius: 12px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(255, 69, 0, 0.1);
    z-index: 100;
}

.floating-btn:hover {
    background: rgba(10, 10, 10, 0.8);
    border-color: rgba(255, 69, 0, 0.6);
    box-shadow: 
        0 6px 30px rgba(0, 0, 0, 0.7),
        0 0 25px rgba(255, 69, 0, 0.3);
    transform: translateY(-2px);
}

.glass-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(255, 69, 0, 0.3);
    border-radius: 12px;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(255, 69, 0, 0.1);
    transition: all 0.3s ease;
}

.game-overlay {
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    background: rgba(10, 10, 10, 0.4);
    border: 1px solid rgba(255, 69, 0, 0.3);
    border-radius: 20px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(255, 69, 0, 0.2);
    border: 1px solid rgba(255, 69, 0, 0.3);
    border-radius: 16px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(255, 69, 0, 0.2);
}

/* Mobile responsive for floating buttons */
@media (max-width: 640px) {
    .floating-btn {
        padding: 10px 16px;
        font-size: 0.875rem;
    }
    
    .glass-panel {
        padding: 8px 12px;
        font-size: 0.75rem;
    }
}

/* Button Hover Effects - Theme matched to table */
button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Game screen buttons - Red-orange theme accents */
#game-screen button {
    border: 1px solid rgba(255, 69, 0, 0.3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 69, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#game-screen button:hover {
    border-color: rgba(255, 69, 0, 0.6);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 69, 0, 0.3);
    transform: translateY(-1px);
}

/* Specific button styling */
#back-to-lobby-btn {
    background: rgba(31, 41, 55, 0.8) !important;
    border-color: rgba(255, 69, 0, 0.2) !important;
}

#back-to-lobby-btn:hover {
    background: rgba(55, 65, 81, 0.9) !important;
    border-color: rgba(255, 69, 0, 0.4) !important;
}

#rules-btn {
    background: rgba(234, 88, 12, 0.8) !important;
    border-color: rgba(255, 69, 0, 0.4) !important;
}

#rules-btn:hover {
    background: rgba(249, 115, 22, 0.9) !important;
    border-color: rgba(255, 69, 0, 0.6) !important;
}

/* Trump indicator - Theme matched */
#trump-indicator {
    text-shadow: 0 0 10px rgba(255, 69, 0, 0.5), 0 0 20px rgba(255, 69, 0, 0.3);
}

#trump-suit {
    color: #ff4500 !important;
    text-shadow: 0 0 15px rgba(255, 69, 0, 0.8), 0 0 30px rgba(255, 69, 0, 0.5);
}

button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

button:hover::before {
    width: 300px;
    height: 300px;
}

/* Scoreboard highlights */
#team-scores>div {
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 69, 0, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(255, 69, 0, 0.05);
}

#team-scores>div:hover {
    transform: scale(1.05);
    border-color: rgba(255, 69, 0, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 69, 0, 0.2), inset 0 0 20px rgba(255, 69, 0, 0.1);
}

/* Score values - Theme matched */
#scoreboard .text-xl,
#scoreboard .text-2xl {
    text-shadow: 0 0 10px rgba(255, 69, 0, 0.3);
}

#scoreboard .text-yellow-400 {
    color: #ff4500 !important;
    text-shadow: 0 0 15px rgba(255, 69, 0, 0.8), 0 0 30px rgba(255, 69, 0, 0.5);
}

/* Modal backdrop */
#rules-modal {
    backdrop-filter: blur(8px);
}

/* Trinidad vs Tobago indicator */
.rule-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    font-size: 0.875rem;
    z-index: 100;
}

/* Premium Oval Table Design - Using Exact Table Image - Mobile First */
/* Only apply table image to .game-table-oval class, not other table themes */
/* IMPORTANT: Only show table when game-screen is visible */
#game-screen:not(.hidden) .game-table-oval {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 180px);
    max-height: calc(100vh - 180px);
    min-height: 400px;
    margin: 0 auto;
    flex: 1;
    /* Use exact table image - seamlessly blended */
    background-image: url('/images/table-oval.png');
    background-color: transparent;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-blend-mode: normal;
    border-radius: 0;
    border: none;
    overflow: visible;
    padding: 0;
    z-index: 1;
    transform-style: preserve-3d;
    transform-origin: 50% 70%;
    /* Receding table plane — near edge larger, far edge smaller */
    transform: rotateX(16deg) scale(0.98, 0.90) translateY(-6px) translateZ(12px);
    filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.85))
            drop-shadow(0 18px 28px rgba(0, 0, 0, 0.55))
            drop-shadow(0 0 70px rgba(255, 69, 0, 0.28));
    box-shadow:
        0 50px 120px rgba(0, 0, 0, 0.95),
        0 20px 40px rgba(0, 0, 0, 0.6),
        0 0 80px rgba(255, 69, 0, 0.35);
    transition: transform 0.35s ease, filter 0.35s ease;
}

/* Table apron / wood rim thickness under the felt */
#game-screen:not(.hidden) .game-table-oval::before {
    display: block !important;
    content: '' !important;
    visibility: visible !important;
    position: absolute;
    left: 1.5%;
    right: 1.5%;
    top: 3%;
    bottom: -22px;
    z-index: -1;
    border-radius: 50% / 40%;
    background:
        linear-gradient(180deg,
            rgba(90, 40, 22, 0.95) 0%,
            rgba(45, 18, 10, 0.98) 35%,
            rgba(18, 8, 5, 1) 70%,
            rgba(8, 3, 2, 1) 100%);
    transform: translateZ(-28px) translateY(14px) scaleY(1.04);
    box-shadow:
        0 8px 0 rgba(20, 8, 4, 0.9),
        0 16px 0 rgba(10, 4, 2, 0.75),
        0 28px 40px rgba(0, 0, 0, 0.7),
        inset 0 2px 8px rgba(255, 120, 60, 0.12);
    pointer-events: none;
}

/* Soft floor contact shadow beneath the table */
#game-screen:not(.hidden) .game-table-oval::after {
    display: block !important;
    content: '' !important;
    visibility: visible !important;
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -48px;
    height: 70px;
    z-index: -2;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.35) 40%,
        transparent 72%);
    transform: translateZ(-40px) rotateX(75deg) scale(1.05, 0.55);
    filter: blur(6px);
    pointer-events: none;
}

/* Other table themes should NOT have the table image - only when game-screen is visible */
#game-screen:not(.hidden) .game-table-green,
#game-screen:not(.hidden) .game-table-blue,
#game-screen:not(.hidden) .game-table-red,
#game-screen:not(.hidden) .game-table-purple {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 180px);
    max-height: calc(100vh - 180px);
    min-height: 400px;
    margin: 0 auto;
    flex: 1;
    /* NO table image for these - use gradient backgrounds */
    background-color: #0a0a0a;
    border-radius: 50% / 30%;
    border: none;
    transform-style: preserve-3d;
    transform-origin: 50% 70%;
    transform: rotateX(14deg) scale(0.98, 0.91) translateY(-4px);
    box-shadow:
        0 0 60px rgba(255, 69, 0, 0.5),
        0 0 100px rgba(255, 69, 0, 0.3),
        0 40px 100px rgba(0, 0, 0, 0.9),
        0 18px 0 rgba(0, 0, 0, 0.45);
    overflow: visible;
    padding: 20px;
    z-index: 1;
}

/* Hide game table completely when game-screen is hidden */
#game-screen.hidden,
#game-screen.hidden #game-table,
#game-screen.hidden .game-table-oval,
#game-screen.hidden .game-table-green,
#game-screen.hidden .game-table-blue,
#game-screen.hidden .game-table-red,
#game-screen.hidden .game-table-purple {
    display: none !important;
    visibility: hidden !important;
}

/* Ensure lobby screen doesn't show any game elements */
#lobby-screen #game-table,
#lobby-screen #game-screen {
    display: none !important;
    visibility: hidden !important;
}

/* Fallback if image not found - keep dark background */
.game-table-oval:not([style*="background-image"]) {
    background: #0a0a0a;
    border: none;
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

/* Player position indicators */
.game-table-oval .player-position {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 69, 0, 0.2) 0%, rgba(255, 69, 0, 0.05) 70%, transparent 100%);
    border: 2px solid rgba(255, 69, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Center play area - Modern spacing */
.game-table-oval #played-cards,
/* Trump/Deck Container */
#trump-deck-container {
    position: relative;
    z-index: 30;
    margin-bottom: 8px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
}

#trump-card-display {
    /* No background - just shows the table until trump is turned */
    background: transparent;
}

/* Played Cards - Below trump/deck, no overlap */
#played-cards {
    position: relative;
    z-index: 25;
    min-width: 200px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    margin-top: 8px;
}

#played-cards .card {
    margin: 0 -4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 26;
    transform: perspective(600px) rotateX(8deg) translateZ(4px);
}

#played-cards .card:hover {
    transform: perspective(600px) rotateX(4deg) translateY(-8px) translateZ(12px) scale(1.06);
    z-index: 27;
}

/* Ensure player areas are properly positioned on oval */
.game-table-oval > div[id*="player"] {
    z-index: 15;
}

/* Held-hand containers — perspective so cards fan in 3D */
#bottom-player-hand,
#top-player-hand,
#left-player-hand,
#right-player-hand {
    gap: 0;
    flex-wrap: nowrap;
    overflow: visible;
    transform-style: preserve-3d;
    perspective: 900px;
    perspective-origin: center center;
}

#bottom-player-hand {
    max-width: 95%;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 6px;
    perspective-origin: 50% 120%;
}

#top-player-hand {
    max-width: 95%;
    justify-content: center;
    align-items: flex-start;
    padding-top: 4px;
    perspective-origin: 50% -20%;
}

#left-player-hand,
#right-player-hand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: 280px;
    width: 90px;
}

#left-player-hand {
    perspective-origin: -20% 50%;
}

#right-player-hand {
    perspective-origin: 120% 50%;
}

/* Overlap is driven mostly by JS transforms; keep light CSS fallbacks */
#top-player-hand .card,
#bottom-player-hand .card {
    position: relative;
    margin-left: -34px;
    flex-shrink: 0;
}

#top-player-hand .card:first-child,
#bottom-player-hand .card:first-child {
    margin-left: 0;
}

#left-player-hand .card,
#right-player-hand .card {
    position: relative;
    margin-top: -50px;
    flex-shrink: 0;
}

#left-player-hand .card:first-child,
#right-player-hand .card:first-child {
    margin-top: 0;
}

/* Seat wrappers stay above the felt and don't clip the fan */
.game-table-oval > div[class*="absolute"] {
    overflow: visible;
    transform-style: preserve-3d;
}

/* Game screen background - Theme matched to table */
#game-screen {
    background: 
        radial-gradient(ellipse at center, rgba(255, 69, 0, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at top left, rgba(255, 69, 0, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse at top right, rgba(255, 69, 0, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse at bottom left, rgba(255, 69, 0, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse at bottom right, rgba(255, 69, 0, 0.05) 0%, transparent 40%),
        #0a0a0a;
    background-attachment: fixed;
}

/* Subtle texture overlay for depth */
body.multiplayer-mode::before,
#game-screen::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 69, 0, 0.01) 2px,
            rgba(255, 69, 0, 0.01) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 69, 0, 0.01) 2px,
            rgba(255, 69, 0, 0.01) 4px
        );
    pointer-events: none;
    z-index: 0;
}

#game-screen::before {
    position: absolute;
}