/* ==========================================
   1. GLOBAL BODY & VIEWPORT SETUP
   ========================================== */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background-color: #0d0d0d !important;
}

.game-viewport {
    display: flex !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

.game-container {
    position: relative !important;
    flex: 1 !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.blackjack-table {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* ==========================================
   2. MARBLE SIDE COLUMNS (FLUID SCALING)
   ========================================== */
.side-column {
    width: 8% !important;
    min-width: 60px !important;
    height: 100vh !important;
    position: relative !important;
    z-index: 999 !important;
    flex-shrink: 0 !important;
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.9);
}

.left-column {
    background: linear-gradient(90deg, #151515 0%, #3a3a3a 50%, #1a1a1a 100%) !important;
    border-right: 3px solid #f1c40f !important;
}

.right-column {
    background: linear-gradient(90deg, #1a1a1a 0%, #3a3a3a 50%, #151515 100%) !important;
    border-left: 3px solid #f1c40f !important;
}

/* ==========================================
   3. VIDEO & MEDIA CROP (BLEEDS PAST ALL EDGES)
   ========================================== */
#eden-video-layer {
    position: absolute !important;
    top: -25px !important;
    left: -25px !important;
    width: calc(100% + 50px) !important;
    height: calc(100% + 50px) !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

#eden-video-layer video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 35% !important; /* Pulls the table felt back into view */
    transform: scale(1.0) !important;       /* Prevents unnecessary cropping at the edges */
}

/* ==========================================
   4. SEATS & JOIN BADGES OVERLAY
   ========================================== */
.seats-container {
    position: absolute !important;
    bottom: 80px !important; /* Adjusted baseline */
    left: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important; /* Locks vertical alignment across all 3 seats */
    padding: 0 40px !important;
    z-index: 5 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

/* Base Seat Box - Fixes layout shifts when occupied */
.seat {
    position: relative !important;
    width: 180px !important;
    height: 100px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
}

/* Precise Seat Target Alignment over Table Ellipses */
.seat:nth-child(1), #seat-0 {
    transform: translate(45px, -10px) !important;
}

/* Center Seat: Slightly lowered onto table arc without falling off viewport */
#seat-1 {
    transform: translate(0px, 20px) !important; 
}

#seat-2 {
    transform: translate(-45px, -10px) !important;
}

/* Score / Join Badge Styling */
.score-badge {
    background-color: rgba(0, 0, 0, 0.85) !important;
    color: #f1c40f !important;
    font-family: 'Arial', sans-serif !important;
    font-size: 15px !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    padding: 6px 14px !important;
    border: 2px solid #f1c40f !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6) !important;
    display: inline-block !important;
    z-index: 10 !important;
    position: relative !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    white-space: nowrap !important;
}

.seat:hover .score-badge {
    background-color: #f1c40f !important;
    color: #000 !important;
    transition: all 0.2s ease-in-out !important;
}

/* Player Box overlay when seat is occupied */
.player-seat-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-family: 'Arial', sans-serif !important;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.9) !important;
}

.player-seat-info .player-name {
    font-weight: bold !important;
    font-size: 14px !important;
    color: #ffffff !important;
}

.player-seat-info .player-chips {
    font-size: 13px !important;
    color: #2ecc71 !important;
}

/* ==========================================
   5. CARD ANIMATIONS & 3D FLIP SYSTEM
   ========================================== */
.card-flip-container {
    perspective: 1000px !important;
    display: inline-block !important;
    width: 70px !important;  /* Match your card image width */
    height: 98px !important; /* Match your card image height */
    vertical-align: middle !important;
    transform-style: preserve-3d !important;
}

.card-inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1) !important;
    transform-style: preserve-3d !important;
}

/* Apply this class via JavaScript to rotate the down card */
.card-inner.flipped {
    transform: rotateY(180deg) !important;
}

.card-face {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    border-radius: 5px !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4) !important;
}

/* Card Back (Facedown) */
.card-back {
    transform: rotateY(0deg) !important;
}

/* Card Front (Faceup) */
.card-front {
    transform: rotateY(180deg) !important;
}

/* Suppress dealer score badge until card flip completes */
#dealer-score-badge.hidden-score {
    display: none !important;
    opacity: 0 !important;
}

#dealer-score-badge.visible-score {
    display: inline-block !important;
    opacity: 1 !important;
    transition: opacity 0.3s ease-in !important;
}

/* ==========================================
   6. DEALER CARDS & TABLE PERSPECTIVE (FLAT ON FELT)
   ========================================== */

#dealer-cards, 
.dealer-cards-container {
    position: absolute !important;
    top: 61% !important;                       /* Anchors position directly in front of Eden */
    left: 49.2% !important;
    perspective: 1200px !important;            /* Adds deep perspective for the table plane */
    transform-origin: center bottom !important;
    transform: translate(-50%, -50%) rotateX(68deg) scale(0.65) !important; /* Severe pitch laying flat on felt */
    transform-style: preserve-3d !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 6 !important;
    pointer-events: auto !important;
}

/* Individual card styling inside dealer container */
#dealer-cards .card-flip-container,
.dealer-cards-container .card-flip-container {
    margin: 0 -12px !important;                /* Creates natural overlapping card spread */
    transform-style: preserve-3d !important;
    /* Soft contact shadow projected backward along the felt */
    filter: drop-shadow(0px 14px 10px rgba(0, 0, 0, 0.85)) !important;
}

#controls {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px;
    position: absolute;
    bottom: 12px;
    right: 20px;
}

/* Set explicit display order: Surrender -> Split -> Double -> Hit -> Stand */
#controls button:nth-child(1), .surrender-btn { order: 1; }
#controls button:nth-child(2), .split-btn     { order: 2; }
#controls button:nth-child(3), .double-btn    { order: 3; }
#controls button:nth-child(4), .hit-btn       { order: 4; }
#controls button:nth-child(5), .stand-btn     { order: 5; }