/**
 * Blackjack Game Styles
 * Extracted from templates/blackjack.html for modular code organization
 * 
 * Sections:
 * 1. Global Reset & Base Styles
 * 2. Configuration Panel
 * 3. Game Container & Layout
 * 4. Dealer Section
 * 5. Rules Section
 * 6. Player Hands Section
 * 7. Betting Section
 * 8. Chip Deck Section
 * 9. Game Controls Section
 * 10. Card Styles & Animations
 * 11. Chip Styles
 * 12. Floating Controls
 * 13. Table Rules Display
 * 14. Player Spots
 * 15. Active Hand Highlighting
 * 16. Loading & Preloader
 * 17. Responsive Breakpoints
 */

/* =================================================================
   1. GLOBAL RESET & BASE STYLES
   ================================================================= */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}

/* =================================================================
   2. CONFIGURATION PANEL
   ================================================================= */

.game-config-panel {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.9);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    z-index: 15;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    color: white;
}

.config-section {
    background: rgba(255,255,255,0.1);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
}

.config-section h5 {
    color: #ffffff;
    margin-bottom: 15px;
    border-bottom: 2px solid rgba(255,255,255,0.3);
    padding-bottom: 8px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* Configuration Toggle Button */
.config-toggle-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 20;
}

.config-toggle-btn .btn {
    background: rgba(0,0,0,0.7);
    border: 2px solid rgba(255,255,255,0.3);
    color: white;
    backdrop-filter: blur(5px);
    font-size: 12px;
    padding: 5px 10px;
}

.config-toggle-btn .btn:hover {
    background: rgba(0,0,0,0.9);
    border-color: rgba(255,255,255,0.5);
}

/* =================================================================
   3. GAME CONTAINER & LAYOUT
   ================================================================= */

.blackjack-game-container {
    min-height: 100vh;
    width: 100vw;
    height: 100vh;
    background:
        radial-gradient(ellipse at center, #1a4d3a 0%, #0d2f1f 70%, #0a1f15 100%),
        linear-gradient(135deg, #0d2f1f 0%, #1a4d3a 50%, #0d2f1f 100%);
    display: flex;
    flex-direction: column;
    padding: 8vh 1vw 1vh 1vw;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal scroll on container, let child sections handle it */
    overflow-y: auto;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
}

/* Dynamic section sizing based on viewport */
.dealer-section,
.rules-section,
.player-hands-section,
.betting-section,
.chip-deck-section,
.game-controls-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1vh 0;
    flex-shrink: 0;
}

/* Action Buttons Section - Always visible */
.action-buttons-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 1vh 0 1vh 0;
    flex-shrink: 0;
    gap: 0.5vh;
}

/* Second row for surrender button */
.action-buttons-row-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* =================================================================
   4. SHOE & DISCARD TRAY
   ================================================================= */

.shoe-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    pointer-events: none;
    perspective: 1000px;
}

.shoe {
    width: 100px;
    height: 160px;
    position: relative;
    transform-style: preserve-3d;
    transform: scaleX(-1); /* Flip to face left */
}

/* Glossy black triangular prism body */
.shoe-body {
    width: 100px;
    height: 140px;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    border: none;
    border-radius: 4px;
    position: relative;
    clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
    box-shadow: 
        0 10px 20px rgba(0,0,0,0.6),
        inset 0 2px 10px rgba(255,255,255,0.1),
        inset -2px 0 10px rgba(255,255,255,0.15),
        0 0 0 1px rgba(255,255,255,0.05);
    overflow: hidden;
}

/* Glossy reflection effect */
.shoe-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, 
        rgba(255,255,255,0.3) 0%, 
        rgba(255,255,255,0.1) 50%, 
        transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* Side reflection */
.shoe-body::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(to right, 
        rgba(255,255,255,0.2) 0%, 
        transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* Black base with semi-circular cutout */
.shoe-base {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 25px;
    background: #0a0a0a;
    clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
    box-shadow: 
        0 4px 10px rgba(0,0,0,0.7),
        inset 0 2px 4px rgba(0,0,0,0.5);
}

/* Semi-circular cutout on front (left side when flipped) */
.shoe-base::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 15px; /* Right side when flipped = left side visually */
    transform: translateX(50%);
    width: 40px;
    height: 15px;
    background: transparent;
    border-radius: 0 0 40px 40px;
    border: 2px solid #000;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.9);
}

/* Card stack inside shoe */
.shoe-cards {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 0;
    transition: height 0.3s ease;
    z-index: 1;
}

.shoe-card-layer {
    position: absolute;
    width: 70px;
    height: 100px;
    object-fit: cover;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.shoe-card-layer:nth-child(n+2) {
    transform: translateX(-50%) translateY(-2px);
    opacity: 0.95;
}

.shoe-card-layer:nth-child(n+3) {
    transform: translateX(-50%) translateY(-4px);
    opacity: 0.9;
}

.shoe-card-layer:nth-child(n+4) {
    transform: translateX(-50%) translateY(-6px);
    opacity: 0.85;
}

.shoe-card-layer:nth-child(n+5) {
    transform: translateX(-50%) translateY(-8px);
    opacity: 0.8;
}

/* Shoe cover - covers top half of cards */
.shoe-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 70px;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
    box-shadow: 
        0 4px 10px rgba(0,0,0,0.7),
        inset 0 2px 4px rgba(0,0,0,0.5),
        inset 0 -2px 4px rgba(255,255,255,0.05);
    z-index: 3;
    pointer-events: none;
}

/* Glossy reflection on cover */
.shoe-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, 
        rgba(255,255,255,0.3) 0%, 
        rgba(255,255,255,0.1) 50%, 
        transparent 100%);
    pointer-events: none;
}

/* Side reflection on cover */
.shoe-cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(to right, 
        rgba(255,255,255,0.2) 0%, 
        transparent 100%);
    pointer-events: none;
}

/* Card count display */
.shoe-count {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    color: #FFD700;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 
        1px 1px 2px rgba(0,0,0,0.8),
        0 0 4px rgba(255,215,0,0.5);
    z-index: 10;
    background: rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 10px;
}

.discard-tray-container {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 100;
    pointer-events: none;
    perspective: 1000px;
}

.discard-tray {
    width: 100px;
    height: 140px;
    position: relative;
    transform: rotateY(-5deg) rotateX(2deg);
    transform-style: preserve-3d;
}

/* Transparent acrylic rectangular prism body */
.discard-tray-body {
    width: 100px;
    height: 120px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(200, 200, 200, 0.3);
    border-radius: 4px;
    position: relative;
    box-shadow: 
        0 8px 16px rgba(0,0,0,0.3),
        inset 0 0 20px rgba(255,255,255,0.1),
        0 0 0 1px rgba(255,255,255,0.2);
    overflow: hidden;
    clip-path: polygon(0% 0%, 100% 5%, 100% 100%, 0% 95%);
}

/* Sloped bottom inside tray */
.discard-tray-body::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.1) 0%, transparent 100%);
    clip-path: polygon(0% 0%, 100% 20%, 100% 100%, 0% 100%);
}

/* Black U-shaped insert at open end */
.discard-tray-insert {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 25px;
    background: #1a1a1a;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 15% 100%, 0% 80%);
    box-shadow: 
        0 2px 8px rgba(0,0,0,0.5),
        inset 0 2px 4px rgba(0,0,0,0.3);
}

/* U-shape opening */
.discard-tray-insert::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 15px;
    width: 70px;
    height: 15px;
    background: transparent;
    border-radius: 0 0 35px 35px;
    border: 2px solid #0a0a0a;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
}

/* Card stack inside discard tray */
.discard-cards {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 0;
    transition: height 0.3s ease;
}

.discard-card-layer {
    position: absolute;
    width: 70px;
    height: 87px;
    object-fit: cover;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
}

/* Discard card layers will be positioned dynamically via inline styles */
.discard-card-layer {
    opacity: 1;
}

/* Card count display */
.discard-count {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    color: #FFD700;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 
        1px 1px 2px rgba(0,0,0,0.8),
        0 0 4px rgba(255,215,0,0.5);
    z-index: 10;
    background: rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 10px;
}

/* Card animation classes */
.card-animating {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.card-to-discard {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.card-to-shoe {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

/* =================================================================
   5. DEALER SECTION
   ================================================================= */

.dealer-section {
    min-height: 15vh;
    flex-direction: column;
    margin-top: 2vh;
    padding-top: 1vh;
}

.dealer-hand {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vw;
    flex-wrap: wrap;
}

.dealer-spot h4 {
    color: white;
    margin: 0 0 15px 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    font-size: 18px;
}

/* Dealer Area (now at bottom for table layout) */
.dealer-area {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) rotateZ(180deg);
    text-align: center;
    z-index: 5;
}

/* =================================================================
   5. RULES SECTION
   ================================================================= */

.rules-section {
    min-height: 12vh;
    flex-direction: column;
    text-align: center;
}

.rule-line {
    color: white;
    font-size: clamp(12px, 3vw, 18px);
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    margin: 0.5vh 0;
    letter-spacing: 0.5px;
}

/* Table Rules Printed on Felt */
.table-rules-printed {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
    z-index: 5;
    text-align: center;
    pointer-events: none;
}

/* Table Rules Display */
.table-rules-above {
    background: rgba(0,0,0,0.9);
    color: white;
    padding: 20px 30px;
    border-radius: 15px;
    border: 3px solid #FFD700;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    text-align: center;
    margin-bottom: 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.table-rules-above .rules-content h6 {
    color: #FFD700;
    margin: 0 0 15px 0;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.table-rules-above .rules-content p {
    margin: 8px 0;
    font-size: 14px;
    text-align: center;
    font-weight: 500;
}

.table-rules {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.9);
    color: white;
    padding: 20px 30px;
    border-radius: 15px;
    border: 3px solid #FFD700;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    min-width: 300px;
}

.rules-content h6 {
    color: #FFD700;
    margin: 0 0 15px 0;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rules-content p {
    margin: 8px 0;
    font-size: 13px;
    text-align: center;
    font-weight: 500;
}

/* =================================================================
   6. PLAYER HANDS SECTION
   ================================================================= */

.player-hands-section {
    min-height: 15vh;
    gap: 6vw;
    flex-wrap: nowrap;
    margin-bottom: 3vh;
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, 0.5) transparent;
    padding: 0 20px;
    scroll-padding: 20px;
}

/* Webkit scrollbar styling */
.player-hands-section::-webkit-scrollbar {
    height: 8px;
}

.player-hands-section::-webkit-scrollbar-track {
    background: transparent;
}

.player-hands-section::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.5);
    border-radius: 4px;
}

.player-hands-section::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.7);
}

.player-hand {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5vw;
    flex-wrap: wrap;
    min-height: 8vh;
    flex-shrink: 0;
    min-width: 120px;
}

/* =================================================================
   7. BETTING SECTION
   ================================================================= */

.betting-section {
    min-height: 12vh;
    gap: 6vw; /* Match player-hands-section gap */
    flex-wrap: nowrap; /* Match player-hands-section flex-wrap */
    justify-content: flex-start; /* Align with player hands */
    padding: 0 20px; /* Match player-hands-section padding */
    scroll-padding: 20px; /* Match player-hands-section scroll-padding */
    overflow-x: auto; /* Enable horizontal scrolling to match hands */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.player-spot-betting {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
    flex-shrink: 0;
}

.spot-side-bets {
    display: flex;
    /* Use clamp for dynamic gap, but allow it to get very small on mobile */
    gap: clamp(2px, 1vw, 15px);
    margin-bottom: 0; /* Remove bottom margin */
    justify-content: center;
    flex-wrap: nowrap; /* CRITICAL: Prevent wrapping to keep the arc shape */
    align-items: flex-start; /* Align to top so margin-top pushes items down */
    width: 100%;
    position: relative;
    pointer-events: none; /* Let clicks pass through container to circles */
    z-index: 20; /* Ensure side bets sit on top of the betting circle */
}

/* Ensure clicks still work on the circles themselves */
.spot-side-bets > * {
    pointer-events: auto;
}

/* Create the Arc: Push the outer circles down relative to the middle one */
.spot-side-bets .side-bet-circle:first-child {
    /* Left side bet (Pair Square) - keep square flat/horizontal */
    margin-top: clamp(5px, 1.5vw, 10px); 
    /* No rotation for Pair Square - it should stay flat */
}

/* Only apply rotation to non-Pair Square first children (shouldn't happen, but safety) */
.spot-side-bets .side-bet-circle:first-child:not([id^="pairSquare"]) {
    transform: rotate(-10deg); /* Slight rotation to follow curve */
}

.spot-side-bets .side-bet-circle:last-child {
    /* Right side bet (21+3) */
    margin-top: clamp(5px, 1.5vw, 10px);
    transform: rotate(10deg); /* Slight rotation to follow curve */
}

.spot-side-bets .side-bet-circle:nth-child(2) {
    /* Middle side bet (FB) - stays at top */
    margin-top: -5px; /* Negative margin to pull it up and touch betting circle */
    transform: translateY(-2px); /* Lift slightly to enhance arc */
}

/* Hide side bet circles when game is in progress */
.spot-side-bets.hidden {
    display: none;
}

.side-bet-circle {
    /* Reduce minimum size from 35px to 28px to fit on small mobile screens */
    width: clamp(28px, 9vw, 55px);
    height: clamp(28px, 9vw, 55px);
    aspect-ratio: 1;
    border: 2px dashed #FFD700; /* Slightly thinner border for clean look */
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.15); /* Slightly more transparent */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
    /* responsive font size */
    font-size: clamp(8px, 2vw, 11px);
    font-weight: bold;
    color: #FFD700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    flex-shrink: 0; /* Prevent squishing */
}

/* Pair Square side bet - square shape instead of circle */
.side-bet-circle[id^="pairSquare"] {
    border-radius: 8px; /* Square with slightly rounded corners */
    font-size: clamp(7px, 2vw, 11px);
    /* Keep square flat/horizontal - counter any parent rotation */
    transform: rotate(0deg) !important;
}

/* Fortune Blackjack - simple text styling */
.side-bet-circle[id^="fortuneBlackjack"] {
    align-items: center;
    justify-content: center;
    overflow: visible;
    position: relative;
    font-size: clamp(6px, 1.5vw, 9px);
}

.side-bet-circle:hover {
    border-color: #FFD700;
    background: rgba(255, 215, 0, 0.2);
    /* Preserve rotation while scaling - use transform-origin to scale from center */
    transform-origin: center;
}

/* Apply scale on hover while preserving rotation */
.spot-side-bets .side-bet-circle:first-child:hover {
    transform: scale(1.05);
}

/* Pair Square hover - keep flat */
.spot-side-bets .side-bet-circle[id^="pairSquare"]:hover {
    transform: rotate(0deg) scale(1.05) !important;
}

.spot-side-bets .side-bet-circle:last-child:hover {
    transform: rotate(10deg) scale(1.05);
}

.spot-side-bets .side-bet-circle:nth-child(2):hover {
    transform: translateY(-2px) scale(1.05);
}

.side-bet-circle.active {
    border-color: #FFD700;
    background: rgba(255, 215, 0, 0.2);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.side-bet-circle.locked {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Side bet chip styling - matches regular betting circle chips */
.side-bet-circle .chip {
    position: absolute;
    width: clamp(20px, 5vw, 32px);
    height: clamp(20px, 5vw, 32px);
    border-radius: 50%;
    border: 3px solid;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: clamp(7px, 1.5vw, 10px);
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Side bet chip colors - match regular betting circle chips */
.side-bet-circle .chip.blueChip {
    border-color: #0066cc;
    color: #0066cc;
}

.side-bet-circle .chip.red {
    border-color: #cc0000;
    color: #cc0000;
}

.side-bet-circle .chip.green {
    border-color: #006600;
    color: #006600;
}

.side-bet-circle .chip.black {
    border-color: #000000;
    color: #000000;
}

.side-bet-circle .chip.purpleChip {
    border-color: #6600cc;
    color: #6600cc;
}

.side-bet-circle .chip.yellowChip {
    border-color: #cc9900;
    color: #cc9900;
}

/* Fortune text styling handled by SVG */

.betting-circle {
    width: clamp(60px, 12vw, 100px);
    height: clamp(60px, 12vw, 100px);
    aspect-ratio: 1; /* Ensure circles stay circular */
    border: 3px dashed #4a9d7c;
    border-radius: 50%;
    background: rgba(74, 157, 124, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Negative margin pulls the circle up to touch the side bets */
    margin-top: -25px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
    flex-shrink: 0; /* Match player-hand flex-shrink */
    min-width: 120px; /* Match player-hand min-width for alignment */
    z-index: 10; /* Lower z-index so it slides under side bets */
}

.betting-circle:hover {
    border-color: #6bb89a;
    background: rgba(74, 157, 124, 0.4);
    transform: scale(1.05);
}

.betting-circle.active {
    border-color: #6bb89a;
    background: rgba(74, 157, 124, 0.3);
    box-shadow: 0 0 20px rgba(74, 157, 124, 0.5);
}

.betting-circle.locked {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

.bet-amount {
    color: white;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
}

/* =================================================================
   8. CHIP DECK SECTION
   ================================================================= */

.chip-deck-section {
    min-height: 10vh;
    flex-direction: column;
    gap: 2vh;
}

.chip-deck {
    display: flex;
    gap: clamp(8px, 2vw, 16px);
    justify-content: center;
    flex-wrap: wrap;
}

.chip-deck.locked {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

/* Chip Tray */
.chip-tray {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    margin-bottom: 0;
    background: rgba(0,0,0,0.7);
    padding: 10px 20px;
    border-radius: 15px;
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(5px);
    z-index: 10;
}

/* =================================================================
   9. GAME CONTROLS SECTION
   ================================================================= */

.game-controls-section {
    min-height: 15vh;
    flex-direction: column;
    gap: 2vh;
}

.game-info {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.game-info-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 1vw;
}

.bankroll-info,
.table-min-info,
.total-bet-info {
    color: white;
    font-size: clamp(12px, 2.5vw, 16px);
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    flex: 1;
}

.bankroll-info {
    text-align: left;
}

.table-min-info {
    text-align: center;
}

.total-bet-info {
    text-align: right;
}

.game-info p {
    margin: 4px 0;
    font-size: 14px;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.action-buttons {
    display: flex;
    gap: clamp(4px, 1vw, 8px);
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    position: relative;
}

.action-buttons .btn {
    font-size: clamp(10px, 2vw, 14px);
    padding: clamp(6px, 1.5vh, 10px) clamp(8px, 2vw, 16px);
    min-width: clamp(50px, 12vw, 80px);
    width: clamp(50px, 12vw, 80px);
    max-width: clamp(50px, 12vw, 80px);
    flex: 0 0 clamp(50px, 12vw, 80px);
    box-sizing: border-box;
    font-weight: bold;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    visibility: visible;
    opacity: 1;
    display: inline-block;
}

.action-buttons .btn.hidden,
.action-buttons-row-2 .btn.hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* New Game button styling */
#new-game-btn {
    min-width: clamp(60px, 14vw, 95px) !important;
    width: clamp(60px, 14vw, 95px) !important;
    max-width: clamp(60px, 14vw, 95px) !important;
    flex: 0 0 clamp(60px, 14vw, 95px) !important;
    padding: clamp(6px, 1.5vh, 10px) clamp(8px, 2vw, 16px) !important;
    white-space: nowrap !important;
    font-weight: bold;
    font-size: clamp(9px, 1.8vw, 13px) !important;
    box-sizing: border-box !important;
}

/* Surrender button styling */
.action-buttons-row-2 .btn {
    min-width: clamp(70px, 15vw, 100px);
    width: clamp(70px, 15vw, 100px);
    max-width: clamp(70px, 15vw, 100px);
    font-size: clamp(10px, 2vw, 14px);
    padding: clamp(6px, 1.5vh, 10px) clamp(12px, 2.5vw, 20px);
    box-sizing: border-box;
    white-space: nowrap;
}

.clear-button.locked {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

/* Game Controls */
.game-controls {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 800px;
}

/* Game Controls Overlay */
.game-controls-overlay {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    background: rgba(0,0,0,0.7);
    padding: 15px 20px;
    border-radius: 15px;
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(5px);
    z-index: 10;
}

/* Additional Controls */
.additional-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Game Result Area */
.game-result-area {
    text-align: center;
}

#game-result {
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
}

/* =================================================================
   10. CARD STYLES & ANIMATIONS
   ================================================================= */

.card-image {
    width: 80px;
    height: 116px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.card-image.dealt {
    animation: dealCard 0.15s ease-out; /* 0.6s / 4 = 0.15s */
}

.card-image.flipped {
    animation: flipCard 0.4s ease-in-out;
}

.card-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}

.doubled-card {
    transform: rotate(90deg);
    transform-origin: center;
    margin: 0 15px;
}

.busted-hand {
    opacity: 0.7;
    filter: grayscale(50%);
}

.busted-hand .card-image {
    transform: rotate(15deg);
    transition: transform 0.3s ease;
}

/* Card Animations */
@keyframes dealCard {
    0% {
        opacity: 0;
        transform: translateY(-100px) rotate(-10deg);
    }
    50% {
        opacity: 0.7;
        transform: translateY(-50px) rotate(-5deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes flipCard {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(90deg);
    }
    100% {
        transform: rotateY(180deg);
    }
}

.flipCard {
    animation: flipCard 0.5s ease-in-out;
}

@keyframes splitCard {
    0% {
        transform: translateX(0) scale(1);
    }
    50% {
        transform: translateX(20px) scale(0.8);
    }
    100% {
        transform: translateX(0) scale(1);
    }
}

@keyframes doubleDown {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.1) rotate(5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* Animated chips for payouts */
.animated-chip {
    position: fixed;
    z-index: 9999;
    transition: all 0.8s ease-in-out;
    pointer-events: none;
}

/* Shake animation for losing side bets */
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

/* =================================================================
   11. CHIP STYLES
   ================================================================= */

.betting-circle .chip {
    position: absolute;
    width: clamp(30px, 8vw, 50px);
    height: clamp(30px, 8vw, 50px);
    border-radius: 50%;
    border: 3px solid;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: clamp(10px, 2vw, 14px);
    z-index: 10;
}

/* Chip Colors */
.betting-circle .chip.blueChip {
    border-color: #0066cc;
    color: #0066cc;
}

.betting-circle .chip.red {
    border-color: #cc0000;
    color: #cc0000;
}

.betting-circle .chip.green {
    border-color: #006600;
    color: #006600;
}

.betting-circle .chip.black {
    border-color: #000000;
    color: #000000;
}

.betting-circle .chip.purpleChip {
    border-color: #6600cc;
    color: #6600cc;
}

.betting-circle .chip.yellowChip {
    border-color: #cc9900;
    color: #cc9900;
}

/* Additional bet chips (for double/split) */
.betting-circle .chip.additional-bet {
    margin-left: 8px;
    z-index: 3;
}

/* Double-down chip positioning */
.double-down-chip {
    position: absolute !important;
    left: -100px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
}

/* Chip Deck Chip Styles */
.cdChip {
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: 4px solid;
    border-radius: 100%;
    display: inline-block;
    color: #000;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.cdChip:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.cdChipActive {
    position: relative;
    top: -4px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    animation: chipShine 2s ease-in-out infinite;
}

@keyframes chipShine {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 20px rgba(255, 255, 255, 0.9), 0 0 30px rgba(255, 255, 255, 0.6), 0 0 40px rgba(255, 255, 255, 0.4);
        transform: scale(1.05);
    }
}

.cdChipSpan {
    display: inherit;
    position: relative;
    top: 2px;
    width: 32px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
}

.blueChip { border-color: rgb(77, 184, 255) !important; }
.red { border-color: red !important; }
.green { border-color: green !important; }
.black { border-color: rgb(20, 20, 20) !important; }
.purpleChip { border-color: purple !important; }
.yellowChip { border-color: #FFD700 !important; }

.clearBet {
    border-color: red;
    background-color: red;
    color: #fff;
    margin-left: 0;
}

.clearBet .cdChipSpan {
    margin-left: -2px;
}

/* =================================================================
   12. FLOATING CONTROLS
   ================================================================= */

.floating-controls-overlay {
    position: fixed;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 90%;
    max-width: 1200px;
    z-index: 1000;
    pointer-events: none;
}

.floating-controls-overlay > * {
    pointer-events: auto;
}

/* =================================================================
   18. PAYTABLE TOOLTIPS
   ================================================================= */

.paytable-tooltip {
    position: absolute;
    background: rgba(0,0,0,0.95);
    color: white;
    border: 2px solid #FFD700;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    z-index: 2000;
    max-width: 300px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.paytable-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

.paytable-tooltip h6 {
    color: #FFD700;
    margin: 0 0 10px 0;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

.paytable-tooltip table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}

.paytable-tooltip th,
.paytable-tooltip td {
    padding: 4px 8px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.paytable-tooltip th {
    color: #FFD700;
    font-weight: bold;
    font-size: 11px;
}

.paytable-tooltip td {
    font-size: 11px;
}

.paytable-tooltip .event-col {
    width: 60%;
}

.paytable-tooltip .pays-col {
    width: 40%;
    text-align: right;
}

.paytable-tooltip .winning-row {
    background-color: rgba(255, 215, 0, 0.3);
    font-weight: bold;
    border: 2px solid #FFD700;
}

.winning-side-bet-tooltip {
    z-index: 10000 !important; /* Higher z-index to appear above other elements */
}

/* =================================================================
   13. TABLE STYLES
   ================================================================= */

.blackjack-table::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0,0,0,0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* Expanded table for additional hands */
.blackjack-table.expanded {
    width: 120vw;
    min-width: 120vw;
}

.blackjack-table.expanded-4 {
    width: 130vw;
    min-width: 130vw;
}

.blackjack-table.expanded-5 {
    width: 140vw;
    min-width: 140vw;
}

/* =================================================================
   14. PLAYER SPOTS
   ================================================================= */

.player-spots {
    position: absolute;
    top: 200px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0 40px;
    z-index: 5;
    transform: rotateZ(180deg);
}

.player-spots::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 80%;
    height: 100px;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.1) 70%, transparent 100%);
    transform: translateX(-50%);
    pointer-events: none;
}

.player-spot {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin: 0 15px;
    transform-origin: center bottom;
}

.player-spot:nth-child(1) { transform: translateY(0px) rotate(-20deg); }
.player-spot:nth-child(2) { transform: translateY(0px) rotate(-10deg); }
.player-spot:nth-child(3) { transform: translateY(0px) rotate(0deg); }
.player-spot:nth-child(4) { transform: translateY(0px) rotate(10deg); }
.player-spot:nth-child(5) { transform: translateY(0px) rotate(20deg); }
.player-spot:nth-child(6) { transform: translateY(0px) rotate(30deg); }
.player-spot:nth-child(7) { transform: translateY(0px) rotate(40deg); }

.spot-label {
    color: white;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

/* Highlight active player spot */
.player-spot.active .spot-label {
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255,215,0,0.8);
}

.player-spot.active .betting-circle {
    border-color: #6bb89a;
    background: rgba(74, 157, 124, 0.3);
    box-shadow: 0 0 20px rgba(74, 157, 124, 0.6);
}

/* Disabled state for inactive spots */
.player-spot.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.player-spot.disabled .betting-circle {
    cursor: not-allowed;
    border-color: #666;
}

/* =================================================================
   15. ACTIVE HAND HIGHLIGHTING
   ================================================================= */

@keyframes yellowShine {
    0% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.8),
                    0 0 30px rgba(255, 215, 0, 0.6),
                    0 0 45px rgba(255, 215, 0, 0.4);
        border-color: rgba(255, 215, 0, 0.9);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 215, 0, 1),
                    0 0 50px rgba(255, 215, 0, 0.8),
                    0 0 75px rgba(255, 215, 0, 0.6);
        border-color: rgba(255, 215, 0, 1);
    }
    100% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.8),
                    0 0 30px rgba(255, 215, 0, 0.6),
                    0 0 45px rgba(255, 215, 0, 0.4);
        border-color: rgba(255, 215, 0, 0.9);
    }
}

.player-hand.active {
    position: relative;
    transition: all 0.3s ease;
    border-radius: 15px;
    padding: 12px;
    margin: 12px;
    box-sizing: border-box;
}

.player-hand.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    border: 3px solid #FFD700;
    pointer-events: none;
    z-index: 10;
    animation: yellowShine 2s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

/* Also highlight the corresponding betting circle */
.betting-circle.active {
    border-color: #FFD700 !important;
    background: rgba(255, 215, 0, 0.2) !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5) !important;
}

/* =================================================================
   16. LOADING & PRELOADER
   ================================================================= */

#card-preloader {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

#card-preloader img {
    width: 1px;
    height: 1px;
    opacity: 0;
}

.loading-cards {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loading-indicator {
    background: rgba(255,255,255,0.95);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin: 20px 0;
}

#loading-indicator p {
    margin: 0;
    color: #666;
    font-size: 16px;
}

/* =================================================================
   17. RESPONSIVE BREAKPOINTS
   ================================================================= */

/* Mobile-specific config toggle adjustments */
@media (max-width: 768px) {
    .config-toggle-btn {
        top: 15px;
        right: 15px;
    }
    .config-toggle-btn .btn {
        font-size: 11px;
        padding: 4px 8px;
    }
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .shoe-container {
        top: 10px;
        right: 10px;
    }
    
    .shoe {
        width: 80px;
        height: 130px;
    }
    
    .shoe-body {
        width: 80px;
        height: 110px;
    }
    
    .shoe-base {
        width: 80px;
        height: 20px;
    }
    
    .shoe-cover {
        width: 80px;
        height: 55px;
    }
    
    .shoe-count {
        font-size: 9px;
        padding: 1px 4px;
    }
    
    .shoe-cards {
        width: 60px;
        bottom: 20px;
    }
    
    .shoe-card-layer {
        width: 60px;
        height: 85px;
    }
    
    .discard-tray-container {
        top: 10px;
        left: 10px;
    }
    
    .discard-tray {
        width: 80px;
        height: 110px;
    }
    
    .discard-tray-body {
        width: 80px;
        height: 90px;
    }
    
    .discard-tray-insert {
        width: 80px;
        height: 20px;
    }
    
    .discard-count {
        font-size: 9px;
        padding: 1px 4px;
    }
    
    .discard-cards {
        width: 60px;
        bottom: 0px;
    }
    
    .discard-card-layer {
        width: 60px;
        height: 72px;
    }
    
    .blackjack-game-container {
        padding: 8vh 1vw 8vh 1vw;
        overflow-x: auto;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .dealer-section {
        margin-top: 4vh;
        padding-top: 2vh;
        min-height: 8vh;
    }
    
    .rules-section {
        margin-top: 2vh;
        min-height: 6vh;
    }
    
    .player-hands-section {
        margin-top: 2vh;
        min-height: 6vh;
        gap: 3vw; /* Match betting section gap */
        padding: 10px 40px 10px 40px; /* Increased left/right padding to prevent cutoff */
        scroll-padding: 40px; /* Match padding for scroll-into-view */
        overflow-x: auto; /* Enable horizontal scrolling on mobile */
        overflow-y: visible;
        margin-left: 0; /* Remove left margin to prevent cutoff */
        margin-right: 0;
        /* Ensure first hand is fully visible */
        scroll-snap-type: x proximity;
        justify-content: flex-start; /* Start from left so user can scroll right */
        min-width: 100%; /* Ensure container is at least as wide as the screen */
    }
    
    .player-hand:first-child {
        scroll-margin-left: 40px; /* Extra margin for first hand to prevent cutoff */
    }
    
    .betting-section {
        margin-top: 0.2vh;
        min-height: 6vh;
        gap: 2.5vw; /* Reduced gap on mobile to bring first and last circles closer to center */
        flex-wrap: nowrap;
        /* visible allows side bets to extend without being cut off */
        overflow-x: visible;
        -webkit-overflow-scrolling: touch;
        padding: 10px 15px;
        scroll-padding: 15px;
        justify-content: space-between;
        overflow-y: visible;
    }
    
    /* Move first and last betting spots closer to center on mobile */
    .betting-section .player-spot-betting:first-child {
        margin-left: 10px; /* Move first circle toward center */
    }
    
    .betting-section .player-spot-betting:last-child {
        margin-right: 10px; /* Move last circle toward center */
    }
    
    .betting-circle {
        flex-shrink: 0;
        width: 50px; /* Fixed smaller size on mobile */
        height: 50px; /* Fixed smaller size on mobile */
        aspect-ratio: 1; /* Ensure circles stay circular */
        /* Negative margin ensures contact with side bets */
        margin-top: -8px; 
        min-width: 50px; /* Override desktop min-width on mobile */
    }
    
    /* Show all three betting circles on mobile */
    .betting-circle:nth-child(3) {
        display: flex;
    }
    
    .chip-deck-section {
        margin-top: 2vh;
        min-height: 6vh;
    }
    
    .game-controls-section {
        margin-top: 0vh;
        min-height: 8vh;
    }
    
    .action-buttons {
        flex-direction: row;
        gap: 2px;
    }
    
    .action-buttons .btn {
        font-size: 10px;
        padding: 4px 6px;
        min-width: 60px;
        width: 60px;
        max-width: 60px;
        flex: 0 0 60px;
        box-sizing: border-box;
    }
    
    .card-image {
        width: 95px;
        height: 138px;
    }
    
    .player-hand {
        margin-bottom: 0.2vh;
        min-width: 100px;
        gap: 2px;
    }
    
    .player-hands-section {
        gap: 2vw;
    }
    
    .floating-controls-overlay {
        bottom: max(env(safe-area-inset-bottom), 5px);
        gap: 12px;
        width: min(100vw - 16px, 600px);
    }
    
    .chip-tray {
        gap: 15px;
        padding: 8px 16px;
        flex-wrap: wrap;
    }
    
    .table-rules-above {
        padding: 15px 20px;
        border-radius: 12px;
        margin-bottom: 15px;
        max-width: 95%;
    }
    
    .table-rules-above .rules-content h6 {
        font-size: 16px;
        margin: 0 0 12px 0;
    }
    
    .table-rules-above .rules-content p {
        font-size: 13px;
        margin: 6px 0;
    }
    
    .table-rules-printed {
        top: 25%;
    }
    
    .rule-line {
        font-size: 12px;
        margin: 4px 0;
    }
    
    .blackjack-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .blackjack-table.expanded,
    .blackjack-table.expanded-4,
    .blackjack-table.expanded-5 {
        margin: 0 auto;
    }
    
    .player-spots {
        top: 200px;
        padding: 0 20px;
    }
    
    /* Show first two player spots on mobile, hide third */
    .player-spot:nth-child(3) {
        display: none;
    }
    
    .dealer-area {
        bottom: 80px;
    }
    
    .betting-circle .chip.additional-bet {
        margin-left: 12px;
    }
    
    .game-controls-overlay {
        flex-direction: column;
        gap: 15px;
        padding: 12px 16px;
    }
    
    .game-controls {
        padding: 20px;
        border-radius: 12px;
    }
    
    .game-info {
        min-width: 180px;
    }
    .game-info p {
        font-size: 13px;
        margin: 3px 0;
    }
    
    #game-result {
        font-size: 16px;
        border-radius: 8px;
    }
    
    .action-buttons-section {
        margin: 1.5vh 0 1vh 0;
    }
    
    .action-buttons {
        gap: 8px;
    }
    
    .action-buttons .btn {
        min-width: 70px;
        width: 70px;
        max-width: 70px;
        font-size: 14px;
        padding: 8px 12px;
        flex: 0 0 70px;
        box-sizing: border-box;
    }
    
    #new-game-btn {
        min-width: 80px !important;
        width: 80px !important;
        max-width: 80px !important;
        flex: 0 0 80px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    .action-buttons-row-2 .btn {
        min-width: 85px;
        width: 85px;
        max-width: 85px;
        font-size: 14px;
        padding: 8px 16px;
        white-space: nowrap;
    }
    
    /* Hide extra betting spots for narrow screens */
    .player-spot:nth-child(4),
    .player-spot:nth-child(5) {
        display: none;
    }
}

@media (max-width: 600px) {
    .blackjack-game-container {
        padding: 8vh 0.5vw 8vh 0.5vw;
    }
    
    .dealer-section {
        margin-top: 4vh;
    }
    
    .rules-section,
    .player-hands-section {
        margin-top: 2vh;
    }
    
    .betting-section {
        margin-top: 0.2vh;
        gap: 2.5vw; /* Reduce gap to bring first and last circles closer to center */
        padding: 0 20px; /* Increased padding to move first/last circles inward */
        justify-content: center; /* Center the betting circles */
    }
    
    /* Move first and last betting spots closer to center */
    .betting-section .player-spot-betting:first-child {
        margin-left: 10px;
    }
    
    .betting-section .player-spot-betting:last-child {
        margin-right: 10px;
    }
    
    .player-hands-section {
        gap: 3vw; /* Match betting section gap */
    }
    
    .chip-deck-section {
        margin-top: 2vh;
    }
    
    .game-controls-section {
        margin-top: 0vh;
    }
    
    .dealer-section,
    .rules-section,
    .player-hands-section {
        margin: 0.5vh 0;
    }
    
    .betting-section {
        margin: 0.2vh 0;
    }
    
    .chip-deck-section,
    .game-controls-section {
        margin: 0.2vh 0;
    }
    
    .card-image {
        width: 115px;
        height: 167px;
    }
    
    .player-hand {
        margin-bottom: 0.2vh;
    }
    
    .floating-controls-overlay {
        bottom: max(env(safe-area-inset-bottom), 3px);
        gap: 10px;
        width: calc(100vw - 12px);
    }
    
    .chip-tray {
        gap: 12px;
        padding: 6px 12px;
    }
    
    .table-rules-above {
        padding: 12px 16px;
        border-radius: 10px;
        margin-bottom: 12px;
    }
    
    .table-rules-above .rules-content h6 {
        font-size: 15px;
        margin: 0 0 10px 0;
    }
    
    .table-rules-above .rules-content p {
        font-size: 12px;
        margin: 5px 0;
    }
    
    .table-rules-printed {
        top: 22%;
    }
    
    .rule-line {
        font-size: 11px;
        margin: 3px 0;
    }
    
    .player-spots {
        top: 190px;
        padding: 0 15px;
    }
    
    .dealer-area {
        bottom: 70px;
    }
    
    .betting-circle .chip.additional-bet {
        margin-left: 10px;
    }
    
    .game-controls-overlay {
        padding: 10px 14px;
    }
    
    .game-controls {
        padding: 18px;
        border-radius: 10px;
    }
    
    .game-info {
        min-width: 160px;
    }
    .game-info p {
        font-size: 12px;
        margin: 3px 0;
    }
    
    #game-result {
        font-size: 15px;
        border-radius: 6px;
    }
    
    .action-buttons-section {
        margin: 1.5vh 0 1vh 0;
    }
    
    .action-buttons {
        gap: 6px;
    }
    
    .action-buttons .btn {
        min-width: 65px;
        width: 65px;
        max-width: 65px;
        font-size: 13px;
        padding: 6px 10px;
        flex: 0 0 65px;
        box-sizing: border-box;
    }
    
    #new-game-btn {
        min-width: 75px !important;
        width: 75px !important;
        max-width: 75px !important;
        flex: 0 0 75px !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    
    .action-buttons-row-2 .btn {
        min-width: 80px;
        width: 80px;
        max-width: 80px;
        font-size: 13px;
        padding: 6px 14px;
        white-space: nowrap;
    }
    
    .blackjack-container {
        padding: 0.4vh;
    }
    
    .blackjack-table {
        width: 99%;
        border-radius: 70px 70px 22px 22px;
    }
    
    .player-spots {
        gap: 12px;
        padding: 0 6px;
        top: 45px;
    }
    
    .dealer-area {
        bottom: 35px;
    }
    
    .player-spot {
        flex: 0 0 calc(50% - 12px);
        min-width: 110px;
    }
    
    .betting-circle {
        width: 48px;
        height: 48px;
    }
    
    .betting-circle .chip {
        width: 32px;
        height: 32px;
        font-size: 8px;
    }
    
    .card-image {
        width: 90px;
        height: 131px;
    }
    
    .chip {
        width: 42px;
        height: 42px;
        font-size: 10px;
    }
    
    .double-down-chip {
        position: absolute !important;
        left: -60px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
    }
    
    .action-buttons .btn {
        min-width: 80px;
        width: 80px;
        max-width: 80px;
        font-size: 13px;
        padding: 8px 12px;
        flex: 0 0 80px;
        box-sizing: border-box;
    }
    
    .player-hand {
        gap: 4px;
    }
    .player-spot {
        margin: 0 8px;
    }
    /* Give non-active hands a subtle size reduction */
    .player-spot:not(.active) .card-image {
        transform: scale(0.85);
    }
}

@media (max-width: 480px) {
    .blackjack-game-container {
        padding: 8vh 0.5vw 8vh 0.5vw;
    }
    
    .dealer-section {
        margin-top: 4vh;
        min-height: 10vh;
    }
    
    .rules-section,
    .player-hands-section {
        margin-top: 2vh;
    }
    
    .rules-section {
        min-height: 8vh;
    }
    
    .player-hands-section {
        min-height: 6vh;
    }
    
    .betting-section {
        margin-top: 0.2vh;
        min-height: 6vh;
        gap: 2.5vw; /* Reduce gap to bring first and last circles closer to center */
        padding: 0 20px; /* Increased padding to move first/last circles inward */
        justify-content: center; /* Center the betting circles */
    }
    
    /* Move first and last betting spots closer to center */
    .betting-section .player-spot-betting:first-child {
        margin-left: 10px;
    }
    
    .betting-section .player-spot-betting:last-child {
        margin-right: 10px;
    }
    
    .player-hands-section {
        gap: 3vw; /* Match betting section gap */
    }
    
    .chip-deck-section {
        margin-top: 2vh;
        min-height: 6vh;
    }
    
    .game-controls-section {
        margin-top: 0vh;
        min-height: 10vh;
    }
    
    .card-image {
        width: 85px;
        height: 123px;
    }
    
    .player-hand {
        margin-bottom: 0.2vh;
        min-width: 90px;
        gap: 2px;
    }
    
    .player-hands-section {
        gap: 2vw;
    }
    
    .floating-controls-overlay {
        bottom: max(env(safe-area-inset-bottom), 2px);
        gap: 8px;
        width: calc(100vw - 8px);
    }
    
    .chip-tray {
        gap: 10px;
        padding: 5px 10px;
    }
    
    .table-rules-above {
        padding: 10px 14px;
        border-radius: 8px;
        margin-bottom: 10px;
    }
    
    .table-rules-above .rules-content h6 {
        font-size: 14px;
        margin: 0 0 8px 0;
    }
    
    .table-rules-above .rules-content p {
        font-size: 11px;
        margin: 4px 0;
    }
    
    .table-rules-printed {
        top: 20%;
    }
    
    .rule-line {
        font-size: 10px;
        margin: 3px 0;
    }
    
    .player-spots {
        top: 180px;
        padding: 0 10px;
    }
    
    .dealer-area {
        bottom: 60px;
    }
    
    .betting-circle .chip.additional-bet {
        margin-left: 8px;
    }
    
    .game-controls-overlay {
        padding: 8px 12px;
    }
    
    .game-controls {
        padding: 15px;
        border-radius: 8px;
    }
    
    .game-info {
        min-width: 140px;
    }
    .game-info p {
        font-size: 11px;
        margin: 2px 0;
    }
    
    #game-result {
        font-size: 14px;
        border-radius: 5px;
    }
    
    .action-buttons-section {
        margin: 1.5vh 0 1vh 0;
    }
    
    .action-buttons {
        gap: 5px;
    }
    
    .action-buttons .btn {
        min-width: 60px;
        width: 60px;
        max-width: 60px;
        font-size: 12px;
        padding: 5px 8px;
        flex: 0 0 60px;
        box-sizing: border-box;
    }
    
    #new-game-btn {
        min-width: 70px !important;
        width: 70px !important;
        max-width: 70px !important;
        flex: 0 0 70px !important;
        padding: 5px 8px !important;
        font-size: 11px !important;
    }
    
    .action-buttons-row-2 .btn {
        min-width: 75px;
        width: 75px;
        max-width: 75px;
        font-size: 12px;
        padding: 5px 12px;
        white-space: nowrap;
    }
    
    .blackjack-container {
        padding: 0.3vh;
    }
    
    .blackjack-table {
        width: 100%;
        border-radius: 60px 60px 20px 20px;
    }
    
    .player-spots {
        gap: 10px;
        padding: 0 5px;
        top: 40px;
    }
    
    .dealer-area {
        bottom: 30px;
    }
    
    .player-spot {
        flex: 0 0 calc(100% - 10px);
        min-width: 100px;
    }
    
    .betting-circle {
        width: 45px;
        height: 45px;
        /* Adjusted for smaller screens */
        margin-top: -5px; 
    }

    /* Slightly tighter arc for very small screens */
    .spot-side-bets .side-bet-circle:nth-child(2) {
        margin-top: 10px;
    }
    
    .betting-circle .chip {
        width: 30px;
        height: 30px;
        font-size: 8px;
    }
    
    .card-image {
        width: 75px;
        height: 109px;
    }
    
    .chip {
        width: 40px;
        height: 40px;
        font-size: 10px;
    }
    
    .double-down-chip {
        position: absolute !important;
        left: -60px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
    }
    
    .action-buttons .btn {
        min-width: 70px;
        width: 70px;
        max-width: 70px;
        font-size: 13px;
        padding: 8px 12px;
        flex: 0 0 70px;
        box-sizing: border-box;
    }
}

/* Extra-small devices */
@media (max-width: 420px) {
    .card-image {
        width: 70px;
        height: 102px;
    }
    
    .betting-section {
        gap: 2vw; /* Even smaller gap for very small screens */
        padding: 0 15px; /* Increased padding to move first/last circles inward */
        justify-content: center; /* Center the betting circles */
    }
    
    /* Move first and last betting spots closer to center */
    .betting-section .player-spot-betting:first-child {
        margin-left: 8px;
    }
    
    .betting-section .player-spot-betting:last-child {
        margin-right: 8px;
    }
    
    .player-hands-section {
        gap: 2.5vw; /* Match betting section gap */
    }
    
}

@media (max-width: 360px) {
    .table-rules-printed {
        top: 18%;
    }
    
    .rule-line {
        font-size: 9px;
        margin: 2px 0;
    }
    
    .betting-section {
        gap: 1.8vw; /* Smallest gap for tiny screens */
        padding: 0 12px; /* Increased padding to move first/last circles inward */
        justify-content: center; /* Center the betting circles */
    }
    
    /* Move first and last betting spots closer to center */
    .betting-section .player-spot-betting:first-child {
        margin-left: 6px;
    }
    
    .betting-section .player-spot-betting:last-child {
        margin-right: 6px;
    }
    
    .player-hands-section {
        gap: 2vw; /* Match betting section gap */
    }
    
}

/* Responsive Design for larger screens */
@media (max-width: 1200px) {
    .blackjack-table {
        height: 500px;
        border-radius: 150px 150px 40px 40px;
    }
    
    .player-spots {
        padding: 0 20px;
    }
    
    .dealer-area {
        bottom: 60px;
    }
    
    .betting-circle {
        width: 70px;
        height: 70px;
    }
    
    .card-image {
        width: 110px;
        height: 160px;
    }
    
    .below-table-controls {
        margin-top: 20px;
    }
}

/* Mobile & UX overrides */
/* Prevent active player hand from scaling */
.player-spot.active {
    transform: none !important;
}

/* Ensure all hands are visible on mobile */
@media (max-width: 768px) {
    .player-spot:nth-child(n) {
        display: flex !important;
    }
    
    /* Override any display:none rules for extra hands */
    .player-spot:nth-child(4),
    .player-spot:nth-child(5),
    .player-spot:nth-child(6),
    .player-spot:nth-child(7) {
        display: flex !important;
    }
    
    .blackjack-table {
        width: 98%;
        height: auto;
        min-height: 400px;
        border-radius: 80px 80px 25px 25px;
    }
    
    .blackjack-table.expanded {
        width: 120%;
    }
    
    .blackjack-table.expanded-4 {
        width: 130%;
    }
    
    .blackjack-table.expanded-5 {
        width: 140%;
    }
    
    .player-spots {
        flex-wrap: wrap;
        gap: 15px;
        padding: 0 8px;
        top: 50px;
    }
    
    .dealer-area {
        bottom: 40px;
    }
    
    .player-spot {
        flex: 0 0 calc(50% - 15px);
        min-width: 120px;
    }
    
    .betting-circle {
        width: 50px;
        height: 50px;
        aspect-ratio: 1;
        /* Reduced from 12px to 2px to bring side bet arc closer */
        margin-top: 2px;
        min-width: 50px;
    }

    .betting-section {
        /* Ensure the container doesn't force a wrap or scroll if not needed */
        justify-content: center;
        gap: 15px; 
    }

    .player-spot-betting {
        /* Allow spot to shrink slightly to fit screen width if needed */
        min-width: 90px; 
        max-width: 33vw; /* Ensure 3 spots fit on screen width */
    }

    .spot-side-bets {
        gap: 2px;
        margin-bottom: 0;
    }

    .side-bet-circle {
        /* Force specific size for consistency on mobile */
        width: 32px;
        height: 32px;
        font-size: 8px;
        border-width: 1px;
    }

    /* FIX: Adjusted margins to flatten the arc and bring the middle bet lower 
       This prevents Fortune Blackjack from looking "too high"
    */
    .spot-side-bets .side-bet-circle:first-child {
        margin-top: 25px;
        transform: rotate(-10deg);
    }
    
    .spot-side-bets .side-bet-circle:last-child {
        margin-top: 25px;
        transform: rotate(10deg);
    }
    
    .spot-side-bets .side-bet-circle:nth-child(2) {
        /* Added margin pushes it down closer to circle and flattens the arc */
        margin-top: 12px; 
        transform: translateY(0); /* Removed lift */
    }
    
    /* Pair Square - square shape on mobile */
    .side-bet-circle[id^="pairSquare"] {
        border-radius: 6px;
        font-size: 7px;
    }
    
    /* Fortune text on mobile */
    .side-bet-circle[id^="fortuneBlackjack"] {
        font-size: 6px;
    }

    /* Adjust arc curve for smaller scale - Pair Square stays flat */
    .spot-side-bets .side-bet-circle:first-child {
        margin-top: 25px;
        /* No rotation for Pair Square - it should stay flat */
    }
    
    /* Pair Square stays flat on mobile */
    .spot-side-bets .side-bet-circle[id^="pairSquare"] {
        transform: rotate(0deg) !important;
    }
    
    .spot-side-bets .side-bet-circle:last-child {
        margin-top: 25px;
        transform: rotate(10deg); /* Preserve rotation on mobile */
    }
    
    .spot-side-bets .side-bet-circle:nth-child(2) {
        transform: translateY(-2px); /* Preserve lift on mobile */
    }
    
    .betting-circle .chip {
        width: 35px;
        height: 35px;
        font-size: 9px;
    }
    
    .card-image {
        width: 95px;
        height: 138px;
    }
    
    .below-table-controls {
        margin-top: 12px;
        gap: 12px;
    }
    
    .chip-tray {
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }
    
    .chip {
        width: 45px;
        height: 45px;
        font-size: 11px;
    }
    
    .double-down-chip {
        position: absolute !important;
        left: -60px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
    }
    
    .action-buttons {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
    }
    
    .action-buttons .btn {
        flex: 0 0 70px;
        min-width: 70px;
        width: 70px;
        max-width: 70px;
        font-size: 14px;
        padding: 8px 12px;
        box-sizing: border-box;
    }
    
    .game-controls {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    
    .game-controls button {
        width: 100%;
        max-width: 200px;
        font-size: 14px;
        padding: 8px 16px;
    }
    
    .bankroll-display {
        font-size: 16px;
        padding: 6px 10px;
    }
    
    .total-bet-display {
        font-size: 14px;
        padding: 5px 10px;
    }
    
    .table-minimum {
        font-size: 14px;
        padding: 5px 10px;
    }
    
    .shoe-info {
        font-size: 12px;
        padding: 4px 8px;
    }
}


/* Additional inline styles merged */

    /* Global reset for full-screen layout */
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow-x: hidden;
    }

    /* Game Configuration Panel */
    .game-config-panel {
        position: fixed;
        top: 60px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.9);
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.5);
        backdrop-filter: blur(10px);
        z-index: 15;
        max-width: 90vw;
        max-height: 80vh;
        overflow-y: auto;
        color: white;
    }
    
    .config-section {
        background: rgba(255,255,255,0.1);
        padding: 15px;
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.2);
        color: white;
    }

    .config-section h5 {
        color: #ffffff;
        margin-bottom: 15px;
        border-bottom: 2px solid rgba(255,255,255,0.3);
        padding-bottom: 8px;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    }
    
    /* Configuration Toggle Button */
    .config-toggle-btn {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 20;
    }

    .config-toggle-btn .btn {
        background: rgba(0,0,0,0.7);
        border: 2px solid rgba(255,255,255,0.3);
        color: white;
        backdrop-filter: blur(5px);
        font-size: 12px;
        padding: 5px 10px;
    }

    .config-toggle-btn .btn:hover {
        background: rgba(0,0,0,0.9);
        border-color: rgba(255,255,255,0.5);
    }

    /* Mobile-specific config toggle adjustments */
    @media (max-width: 768px) {
        .config-toggle-btn {
            top: 15px;
            right: 15px;
        }
        .config-toggle-btn .btn {
            font-size: 11px;
            padding: 4px 8px;
        }
    }

    /* Blackjack Game Container - Full Page Felt Background */
    .blackjack-game-container {
        min-height: 100vh;
        width: 100vw;
        height: 100vh;
        background:
            radial-gradient(ellipse at center, #1a4d3a 0%, #0d2f1f 70%, #0a1f15 100%),
            linear-gradient(135deg, #0d2f1f 0%, #1a4d3a 50%, #0d2f1f 100%);
        display: flex;
        flex-direction: column;
        padding: 8vh 1vw 1vh 1vw;
        box-sizing: border-box;
        overflow-x: hidden; /* Prevent horizontal scroll on container, let child sections handle it */
        overflow-y: auto;
        margin: 0;
        position: fixed;
        top: 0;
        left: 0;
    }
    
    /* Dynamic section sizing based on viewport */
    .dealer-section,
    .rules-section,
    .player-hands-section,
    .betting-section,
    .chip-deck-section,
    .game-controls-section {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1vh 0;
        flex-shrink: 0;
    }
    
    /* Action Buttons Section - Always visible */
    .action-buttons-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 1vh 0 1vh 0; /* Positive top margin for spacing from player cards */
        flex-shrink: 0;
        gap: 0.5vh;
    }
    
    /* Second row for surrender button */
    .action-buttons-row-2 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    
    /* Dealer Section */
    .dealer-section {
        min-height: 15vh;
        flex-direction: column;
        margin-top: 2vh; /* Add top margin to prevent cutoff */
        padding-top: 1vh; /* Add padding for extra space */
    }
    
    .dealer-title {
        color: white;
        font-size: clamp(16px, 4vw, 24px);
        margin: 0 0 2vh 0;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
        font-weight: bold;
    }
    
    .dealer-hand {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1vw;
        flex-wrap: wrap;
    }
    
    /* Rules Section */
    .rules-section {
        min-height: 12vh;
        flex-direction: column;
        text-align: center;
    }
    
    .rule-line {
        color: white;
        font-size: clamp(12px, 3vw, 18px);
        font-weight: bold;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        margin: 0.5vh 0;
        letter-spacing: 0.5px;
    }
    
    /* Player Hands Section */
        .player-hands-section {
            min-height: 15vh;
            gap: 6vw; /* Increased gap to match betting circles for better alignment */
            flex-wrap: nowrap; /* Prevent wrapping - use horizontal scroll instead */
            margin-bottom: 3vh; /* Add spacing below player cards */
            overflow-x: auto; /* Enable horizontal scrolling */
            overflow-y: visible;
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
            scrollbar-width: thin; /* Firefox */
            scrollbar-color: rgba(255, 215, 0, 0.5) transparent; /* Firefox scrollbar */
            padding: 0 20px; /* Add padding on sides to ensure highlights aren't cut off */
            scroll-padding: 20px; /* Padding for scroll-into-view */
        }
    
    /* Webkit scrollbar styling */
    .player-hands-section::-webkit-scrollbar {
        height: 8px;
    }
    
    .player-hands-section::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .player-hands-section::-webkit-scrollbar-thumb {
        background: rgba(255, 215, 0, 0.5);
        border-radius: 4px;
    }
    
    .player-hands-section::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 215, 0, 0.7);
    }
    
    .player-hand {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5vw;
        flex-wrap: wrap;
        min-height: 8vh;
        flex-shrink: 0; /* Prevent hands from shrinking when scrolling */
        min-width: 120px; /* Minimum width to ensure cards are visible */
    }
    
    /* Betting Section */
    .betting-section {
        min-height: 12vh;
        gap: 6vw; /* Increased gap for better spacing between betting circles */
        flex-wrap: wrap;
    }
    
    .betting-circle {
        width: clamp(60px, 12vw, 100px);
        height: clamp(60px, 12vw, 100px);
        border: 3px dashed #4a9d7c;
        border-radius: 50%;
        background: rgba(74, 157, 124, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: visible;
    }
    
    /* Chip Deck Section */
    .chip-deck-section {
        min-height: 10vh;
        flex-direction: column;
        gap: 2vh;
    }
    
    .chip-deck {
        display: flex;
        gap: clamp(8px, 2vw, 16px);
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* Game Controls Section */
    .game-controls-section {
        min-height: 15vh;
        flex-direction: column;
        gap: 2vh;
    }
    
    .game-info {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    
    .game-info-line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 1vw;
    }
    
    .bankroll-info,
    .table-min-info,
    .total-bet-info {
        color: white;
        font-size: clamp(12px, 2.5vw, 16px);
        margin: 0;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
        flex: 1;
    }
    
    .bankroll-info {
        text-align: left;
    }
    
    .table-min-info {
        text-align: center;
    }
    
    .total-bet-info {
        text-align: right;
    }
    
    .action-buttons {
        display: flex;
        gap: clamp(4px, 1vw, 8px);
        justify-content: center;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
        position: relative;
    }
    
    .action-buttons .btn {
        font-size: clamp(10px, 2vw, 14px);
        padding: clamp(6px, 1.5vh, 10px) clamp(8px, 2vw, 16px);
        min-width: clamp(50px, 12vw, 80px);
        width: clamp(50px, 12vw, 80px);
        max-width: clamp(50px, 12vw, 80px);
        flex: 0 0 clamp(50px, 12vw, 80px);
        box-sizing: border-box;
    }
    
    /* Betting Circle States */
    .betting-circle:hover {
        border-color: #6bb89a;
        background: rgba(74, 157, 124, 0.4);
        transform: scale(1.05);
    }
    
    .betting-circle.active {
        border-color: #6bb89a;
        background: rgba(74, 157, 124, 0.3);
        box-shadow: 0 0 20px rgba(74, 157, 124, 0.5);
    }
    
    /* Chip Styling */
    .betting-circle .chip {
        position: absolute;
        width: clamp(30px, 8vw, 50px);
        height: clamp(30px, 8vw, 50px);
        border-radius: 50%;
        border: 3px solid;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: clamp(10px, 2vw, 14px);
        z-index: 10;
    }
    
    /* Chip Colors */
    .betting-circle .chip.blueChip {
        border-color: #0066cc;
        color: #0066cc;
    }
    
    .betting-circle .chip.red {
        border-color: #cc0000;
        color: #cc0000;
    }
    
    .betting-circle .chip.green {
        border-color: #006600;
        color: #006600;
    }
    
    .betting-circle .chip.black {
        border-color: #000000;
        color: #000000;
    }
    
    .betting-circle .chip.purpleChip {
        border-color: #6600cc;
        color: #6600cc;
    }
    
    .betting-circle .chip.yellowChip {
        border-color: #cc9900;
        color: #cc9900;
    }
    
    /* Mobile-specific adjustments */
    @media (max-width: 768px) {
        .blackjack-game-container {
            padding: 8vh 1vw 8vh 1vw; /* Increased both top and bottom padding to prevent cutoff */
        }
        
        .dealer-section {
            margin-top: 4vh; /* Extra margin on mobile to prevent cutoff and move lower */
            padding-top: 2vh;
            min-height: 8vh;
        }
        
        .rules-section {
            margin-top: 2vh; /* Add margin to move rules section lower */
        }
        
        .player-hands-section {
            margin-top: 2vh; /* Add margin to move player hands lower */
        }
        
        .betting-section {
            margin-top: 0.2vh; /* Further reduced margin to bring betting section closer to player hands */
        }
        
        .chip-deck-section {
            margin-top: 2vh; /* Added margin to create space between betting circles and chip deck */
        }
        
        .game-controls-section {
            margin-top: 0vh; /* Further reduced margin to move game controls closer */
            min-height: 8vh;
        }
        
        .rules-section {
            min-height: 6vh;
        }
        
        .player-hands-section {
            min-height: 6vh; /* Reduced height to make more compact */
            gap: 4vw; /* Reduced gap on mobile for better fit */
            padding: 10px 40px 10px 40px; /* Increased left/right padding to prevent cutoff */
            scroll-padding: 40px; /* Match padding for scroll-into-view */
            overflow-x: auto; /* Enable horizontal scrolling on mobile */
            overflow-y: visible;
            margin-left: 0; /* Remove left margin to prevent cutoff */
            margin-right: 0;
            scroll-snap-type: x proximity; /* Ensure first hand is fully visible */
        }
        
        .player-hand:first-child {
            scroll-margin-left: 40px; /* Extra margin for first hand to prevent cutoff */
        }
        

        
        .betting-section {
            min-height: 6vh; /* Reduced height to make more compact */
            gap: 2vw; /* Reduced gap on mobile to fit all 3 circles */
            flex-wrap: nowrap; /* Prevent wrapping on mobile */
            overflow-x: hidden; /* Prevent scrolling on mobile */
            -webkit-overflow-scrolling: touch;
            padding: 10px 15px 10px 15px; /* Reduced padding on mobile to fit all circles */
            scroll-padding: 15px;
            justify-content: space-between; /* Evenly space betting circles on mobile */
            overflow-y: visible;
        }
        
        .betting-circle {
            flex-shrink: 0; /* Prevent betting circles from shrinking */
            width: 50px; /* Fixed smaller size on mobile */
            height: 50px; /* Fixed smaller size on mobile */
            aspect-ratio: 1; /* Ensure circles stay circular */
            min-width: 50px; /* Override desktop min-width on mobile */
        }
        
        /* Show all three betting circles on mobile */
        .betting-circle:nth-child(3) {
            display: flex;
        }
        
        .chip-deck-section {
            min-height: 6vh;
        }
        
        .game-controls-section {
            min-height: 8vh;
        }
        
        .action-buttons {
            flex-direction: row;
            gap: 2px;
        }
        
        .action-buttons .btn {
            font-size: 10px;
            padding: 4px 6px;
            min-width: 60px;
            width: 60px;
            max-width: 60px;
            flex: 0 0 60px;
            box-sizing: border-box;
        }
    }

    @media (max-width: 600px) {
        .blackjack-game-container {
            padding: 8vh 0.5vw 8vh 0.5vw; /* Increased top and bottom padding for smaller screens */
        }
        
        .dealer-section {
            margin-top: 4vh; /* Extra margin for smaller screens */
        }
        
        .rules-section,
        .player-hands-section {
            margin-top: 2vh; /* Add margin to these sections */
        }
        
        .betting-section {
            margin-top: 0.2vh; /* Further reduced margin to bring betting section closer to player hands */
        }
        

        
        .chip-deck-section {
            margin-top: 2vh; /* Added margin to create space between betting circles and chip deck */
        }
        
        .game-controls-section {
            margin-top: 0vh; /* Further reduced margin to move game controls closer */
        }
        
        .dealer-section,
        .rules-section,
        .player-hands-section {
            margin: 0.5vh 0;
        }
        
        .betting-section {
            margin: 0.2vh 0; /* Further reduced margin for tighter spacing */
        }
        
        .chip-deck-section,
        .game-controls-section {
            margin: 0.2vh 0; /* Further reduced margin for tighter spacing */
        }
    }

    @media (max-width: 480px) {
        .blackjack-game-container {
            padding: 8vh 0.5vw 8vh 0.5vw; /* Increased top and bottom padding for smallest screens */
        }
        
        .dealer-section {
            margin-top: 4vh; /* Extra margin for smallest screens */
        }
        
        .rules-section,
        .player-hands-section {
            margin-top: 2vh; /* Add margin to these sections */
        }
        
        .betting-section {
            margin-top: 0.2vh; /* Further reduced margin to bring betting section closer to player hands */
        }
        

        
        .chip-deck-section {
            margin-top: 2vh; /* Added margin to create space between betting circles and chip deck */
        }
        
        .game-controls-section {
            margin-top: 0vh; /* Further reduced margin to move game controls closer */
        }
        
        .dealer-section {
            min-height: 10vh;
        }
        
        .rules-section {
            min-height: 8vh;
        }
        
        .player-hands-section {
            min-height: 6vh; /* Reduced height to make more compact */
        }
        
        .betting-section {
            min-height: 6vh; /* Reduced height to make more compact */
        }
        
        .chip-deck-section {
            min-height: 6vh;
        }
        
        .game-controls-section {
            min-height: 10vh;
        }
    }
    
    /* Ensure table expansion works properly on mobile */
    @media (max-width: 768px) {
        .blackjack-table-container {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        }
        
        .blackjack-table.expanded,
        .blackjack-table.expanded-4,
        .blackjack-table.expanded-5 {
            margin: 0 auto; /* Center the expanded table */
        }
    }
    
    /* Expanded table for additional hands */
    .blackjack-table.expanded {
        width: 120vw;
        min-width: 120vw;
    }

    .blackjack-table.expanded-4 {
        width: 130vw;
        min-width: 130vw;
    }

    .blackjack-table.expanded-5 {
        width: 140vw;
        min-width: 140vw;
    }
    
    /* Mobile expanded table adjustments */
    @media (max-width: 768px) {
        .blackjack-table.expanded {
            min-width: 120vw;
        }

        .blackjack-table.expanded-4 {
            min-width: 130vw;
        }

        .blackjack-table.expanded-5 {
            min-width: 140vw;
        }
    }

    @media (max-width: 600px) {
        .blackjack-table.expanded {
            min-width: 120vw;
        }

        .blackjack-table.expanded-4 {
            min-width: 130vw;
        }

        .blackjack-table.expanded-5 {
            min-width: 140vw;
        }
    }

    @media (max-width: 480px) {
        .blackjack-table.expanded {
            min-width: 120vw;
        }

        .blackjack-table.expanded-4 {
            min-width: 130vw;
        }

        .blackjack-table.expanded-5 {
            min-width: 140vw;
        }
    }
    
    .blackjack-table::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(0,0,0,0.1) 0%, transparent 50%);
        pointer-events: none;
    }
    
    /* Table Rules Display */
    .table-rules-above {
        background: rgba(0,0,0,0.9);
        color: white;
        padding: 20px 30px;
        border-radius: 15px;
        border: 3px solid #FFD700;
        box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        text-align: center;
        margin-bottom: 20px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Mobile-specific table rules adjustments */
    @media (max-width: 768px) {
        .table-rules-above {
            padding: 15px 20px;
            border-radius: 12px;
            margin-bottom: 15px;
            max-width: 95%;
        }
    }
    
    @media (max-width: 600px) {
        .table-rules-above {
            padding: 12px 16px;
            border-radius: 10px;
            margin-bottom: 12px;
        }
    }
    
    @media (max-width: 480px) {
        .table-rules-above {
            padding: 10px 14px;
            border-radius: 8px;
            margin-bottom: 10px;
        }
    }
    
    .table-rules-above .rules-content h6 {
        color: #FFD700;
        margin: 0 0 15px 0;
        font-size: 18px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .table-rules-above .rules-content p {
        margin: 8px 0;
        font-size: 14px;
        text-align: center;
        font-weight: 500;
    }
    
    /* Mobile-specific table rules content adjustments */
    @media (max-width: 768px) {
        .table-rules-above .rules-content h6 {
            font-size: 16px;
            margin: 0 0 12px 0;
        }
        
        .table-rules-above .rules-content p {
            font-size: 13px;
            margin: 6px 0;
        }
    }
    
    @media (max-width: 600px) {
        .table-rules-above .rules-content h6 {
            font-size: 15px;
            margin: 0 0 10px 0;
        }
        
        .table-rules-above .rules-content p {
            font-size: 12px;
            margin: 5px 0;
        }
    }
    
    @media (max-width: 480px) {
        .table-rules-above .rules-content h6 {
            font-size: 14px;
            margin: 0 0 8px 0;
        }
        
        .table-rules-above .rules-content p {
            font-size: 11px;
            margin: 4px 0;
        }
    }
    
    .table-rules {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.9);
        color: white;
        padding: 20px 30px;
        border-radius: 15px;
        border: 3px solid #FFD700;
        z-index: 10;
        box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        min-width: 300px;
    }
    
    .rules-content h6 {
        color: #FFD700;
        margin: 0 0 15px 0;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .rules-content p {
        margin: 8px 0;
        font-size: 13px;
        text-align: center;
        font-weight: 500;
    }
    
    /* Table Rules Printed on Felt */
    .table-rules-printed {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(180deg);
        z-index: 5;
        text-align: center;
        pointer-events: none;
    }
    
    .rule-line {
        color: white;
        font-size: 18px;
        font-weight: bold;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        margin: 8px 0;
        letter-spacing: 1px;
        font-family: 'Arial', sans-serif;
    }
    


    /* Player Spots (moved much higher) */
    .player-spots {
        position: absolute;
        top: 200px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 0 40px;
        z-index: 5;
        transform: rotateZ(180deg);
    }
    
    /* Mobile-specific table rules adjustments */
    @media (max-width: 768px) {
        .table-rules-printed {
            top: 25%;
        }
        
        .rule-line {
            font-size: 12px;
            margin: 4px 0;
        }
    }
    
    @media (max-width: 600px) {
        .table-rules-printed {
            top: 22%;
        }
        
        .rule-line {
            font-size: 11px;
            margin: 3px 0;
        }
    }
    
    @media (max-width: 480px) {
        .table-rules-printed {
            top: 20%;
        }
        
        .rule-line {
            font-size: 10px;
            margin: 3px 0;
        }
    }
    
    @media (max-width: 360px) {
        .table-rules-printed {
            top: 18%;
        }
        
        .rule-line {
            font-size: 9px;
            margin: 2px 0;
        }
    }

    /* Mobile-specific player spots adjustments */
    @media (max-width: 768px) {
        .player-spots {
            top: 200px;
            padding: 0 20px;
        }
        
        /* Show first two player spots on mobile, hide third */
        .player-spot:nth-child(3) {
            display: none;
        }
    }
    
    @media (max-width: 600px) {
        .player-spots {
            top: 190px;
            padding: 0 15px;
        }
    }
    
    @media (max-width: 480px) {
        .player-spots {
            top: 180px;
            padding: 0 10px;
        }
    }
    
    /* Dealer Area (now at bottom) */
    .dealer-area {
        position: absolute;
        bottom: 80px;
        left: 50%;
        transform: translateX(-50%) rotateZ(180deg);
        text-align: center;
        z-index: 5;
    }
    
    /* Mobile-specific dealer area adjustments */
    @media (max-width: 768px) {
        .dealer-area {
            bottom: 80px;
        }
    }
    
    @media (max-width: 600px) {
        .dealer-area {
            bottom: 70px;
        }
    }
    
    @media (max-width: 480px) {
        .dealer-area {
            bottom: 60px;
        }
    }
    
    .dealer-spot h4 {
        color: white;
        margin: 0 0 15px 0;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
        font-size: 18px;
    }
    
    .dealer-hand {
        display: flex;
        justify-content: center;
        gap: 10px;
        min-height: 60px;
    }
    
    .player-spots::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 80%;
        height: 100px;
        background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.1) 70%, transparent 100%);
        transform: translateX(-50%);
        pointer-events: none;
    }
    
    .player-spot {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin: 0 15px;
        transform-origin: center bottom;
    }
    
    .player-spot:nth-child(1) { transform: translateY(0px) rotate(-20deg); }
    .player-spot:nth-child(2) { transform: translateY(0px) rotate(-10deg); }
    .player-spot:nth-child(3) { transform: translateY(0px) rotate(0deg); }
    /* Only 3 spots now, creating a nice arc */
    
    /* Dynamic positioning for more than 3 hands */
    .player-spot:nth-child(4) { transform: translateY(0px) rotate(10deg); }
    .player-spot:nth-child(5) { transform: translateY(0px) rotate(20deg); }
    .player-spot:nth-child(6) { transform: translateY(0px) rotate(30deg); }
    .player-spot:nth-child(7) { transform: translateY(0px) rotate(40deg); }
    
    .spot-label {
        color: white;
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 10px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    }
    
    .betting-circle {
        width: 80px;
        height: 80px;
        border: 3px dashed #4a9d7c;
        border-radius: 50%;
        background: rgba(74, 157, 124, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        /* Reduced from 15px to 5px to bring side bet arc closer */
        margin-top: 5px;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: visible;
    }
    
    /* Mobile-specific betting circle adjustments - ensure circular shape */
    @media (max-width: 768px) {
        .betting-circle {
            width: 50px;
            height: 50px;
            aspect-ratio: 1; /* Ensure circles stay circular */
            /* Reduced from 12px to 2px to bring side bet arc closer */
            margin-top: 2px;
            min-width: 50px; /* Override desktop min-width */
        }
    }
    
    @media (max-width: 600px) {
        .betting-circle {
            width: 50px;
            height: 50px;
            aspect-ratio: 1; /* Ensure circles stay circular */
            /* Reduced from 10px to 2px to bring side bet arc closer */
            margin-top: 2px;
            min-width: 50px; /* Override desktop min-width */
        }
    }
    
    @media (max-width: 480px) {
        .betting-circle {
            width: 45px;
            height: 45px;
            aspect-ratio: 1; /* Ensure circles stay circular */
            /* Reduced from 8px to 1px to bring side bet arc closer */
            margin-top: 1px;
            min-width: 45px; /* Override desktop min-width */
        }
    }
    
    .betting-circle .chip {
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 3px solid;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 10px;
        color: black;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        z-index: 2;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    /* Additional bet chips (for double/split) */
    .betting-circle .chip.additional-bet {
        margin-left: 8px; /* Reduced spacing to bring double down bet closer to initial bet */
        z-index: 3;
    }
    
    /* Mobile-specific additional bet chip positioning */
    @media (max-width: 768px) {
        .betting-circle .chip.additional-bet {
            margin-left: 12px; /* Reduced spacing for better proximity on mobile */
        }
    }
    
    @media (max-width: 600px) {
        .betting-circle .chip.additional-bet {
            margin-left: 10px; /* Reduced spacing for medium mobile screens */
        }
    }
    
    @media (max-width: 480px) {
        .betting-circle .chip.additional-bet {
            margin-left: 8px; /* Reduced spacing for smaller mobile screens */
        }
    }
    
    /* Double-down chip positioning (outside betting circle) */
    .double-down-chip {
        position: absolute !important;
        left: -100px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
    }
    

    
    .betting-circle:hover {
        border-color: #6bb89a;
        background: rgba(74, 157, 124, 0.4);
        transform: scale(1.05);
    }
    
    .betting-circle.active {
        border-color: #6bb89a;
        background: rgba(74, 157, 124, 0.3);
        box-shadow: 0 0 20px rgba(74, 157, 124, 0.5);
    }
    
    .bet-amount {
        color: white;
        font-weight: bold;
        font-size: 12px;
        text-align: center;
    }
    
    .player-hand {
        display: flex;
        justify-content: center;
        gap: 8px;
        min-height: 50px;
        min-width: 120px;
    }
    
    /* Floating Controls Overlay */
    .floating-controls-overlay {
        position: fixed; /* fixed to viewport to avoid table rotation */
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        width: 90%;
        max-width: 1200px;
        z-index: 1000; /* above table */
        pointer-events: none; /* Allow clicks to pass through to table */
    }

    .floating-controls-overlay > * {
        pointer-events: auto; /* Re-enable pointer events for child elements */
    }

    /* Mobile-specific floating controls adjustments */
    @media (max-width: 768px) {
        .floating-controls-overlay {
            bottom: max(env(safe-area-inset-bottom), 5px);
            gap: 12px;
            width: min(100vw - 16px, 600px);
        }
    }

    @media (max-width: 600px) {
        .floating-controls-overlay {
            bottom: max(env(safe-area-inset-bottom), 3px);
            gap: 10px;
            width: calc(100vw - 12px);
        }
    }

    @media (max-width: 480px) {
        .floating-controls-overlay {
            bottom: max(env(safe-area-inset-bottom), 2px);
            gap: 8px;
            width: calc(100vw - 8px);
        }
    }
    
    /* Chip Tray */
    .chip-tray {
        display: flex;
        align-items: center;
        gap: 20px;
        justify-content: center;
        margin-bottom: 0;
        background: rgba(0,0,0,0.7);
        padding: 10px 20px;
        border-radius: 15px;
        border: 2px solid rgba(255,255,255,0.3);
        backdrop-filter: blur(5px);
        z-index: 10;
    }
    
    /* Mobile-specific chip tray adjustments */
    @media (max-width: 768px) {
        .chip-tray {
            gap: 15px;
            padding: 8px 16px;
            flex-wrap: wrap;
        }
    }

    @media (max-width: 600px) {
        .chip-tray {
            gap: 12px;
            padding: 6px 12px;
        }
    }

    @media (max-width: 480px) {
        .chip-tray {
            gap: 10px;
            padding: 5px 10px;
        }
    }
    
    .chip-deck {
        display: flex;
        gap: 8px;
        background: transparent;
        padding: 0;
        border-radius: 0;
        border: none;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Mobile-specific chip deck adjustments - no longer needed since background removed */
    
    /* Card Styles */
    .card-image {
        width: 80px;
        height: 116px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        transition: all 0.3s ease;
        position: relative;
        z-index: 1;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    }
    /* Mobile-specific card image adjustments */
    @media (max-width: 768px) {
        .blackjack-game-container {
            overflow-x: auto;
            padding-left: 10px;
            padding-right: 10px;
        }
        
        .player-hands-section {
            justify-content: flex-start;
            min-width: 100%;
        }
        
        .card-image {
            width: 95px;
            height: 138px;
        }
        
        .player-hand {
            margin-bottom: 0.2vh;
            min-width: 100px;
            gap: 2px;
        }
        
        .player-hands-section {
            gap: 2vw;
        }
    }
    
    @media (max-width: 600px) {
        .card-image {
            width: 90px;
            height: 131px;
        }
        
        .player-hand {
            margin-bottom: 0.2vh;
            min-width: 95px;
            gap: 2px;
        }
    }
    
    @media (max-width: 480px) {
        .card-image {
            width: 85px;
            height: 123px;
        }
        
        .player-hand {
            margin-bottom: 0.2vh;
            min-width: 90px;
            gap: 2px;
        }
        
        .player-hands-section {
            gap: 2vw;
        }
    }
    
    .card-image.dealt {
        animation: dealCard 0.15s ease-out; /* 0.6s / 4 = 0.15s */
    }
    
    .card-image.flipped {
        animation: flipCard 0.4s ease-in-out;
    }
    
    .card-image:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    }
    
    .doubled-card {
        transform: rotate(90deg);
        transform-origin: center;
        margin: 0 15px;
    }
    
    .busted-hand {
        opacity: 0.7;
        filter: grayscale(50%);
    }
    
    .busted-hand .card-image {
        transform: rotate(15deg);
        transition: transform 0.3s ease;
    }
    
    /* Locked betting state */
    .betting-circle.locked {
        opacity: 0.7;
        cursor: not-allowed;
        pointer-events: none;
    }
    
    .chip-deck.locked {
        opacity: 0.7;
        cursor: not-allowed;
        pointer-events: none;
    }
    
    .clear-button.locked {
        opacity: 0.7;
        cursor: not-allowed;
        pointer-events: none;
    }
    
    /* Card Animations */
    @keyframes dealCard {
        0% {
            opacity: 0;
            transform: translateY(-100px) rotate(-10deg);
        }
        50% {
            opacity: 0.7;
            transform: translateY(-50px) rotate(-5deg);
        }
        100% {
        opacity: 1;
            transform: translateY(0) rotate(0deg);
        }
    }
    
    @keyframes flipCard {
        0% {
            transform: rotateY(0deg);
        }
        50% {
            transform: rotateY(90deg);
        }
        100% {
            transform: rotateY(180deg);
        }
    }
    
    .flipCard {
        animation: flipCard 0.5s ease-in-out;
    }
    
    /* Animated chips for payouts */
    .animated-chip {
        position: fixed;
        z-index: 9999;
        transition: all 0.8s ease-in-out;
        pointer-events: none;
    }
    
    @keyframes splitCard {
        0% {
            transform: translateX(0) scale(1);
        }
        50% {
            transform: translateX(20px) scale(0.8);
        }
        100% {
            transform: translateX(0) scale(1);
        }
    }
    
    @keyframes doubleDown {
        0% {
            transform: scale(1) rotate(0deg);
        }
        50% {
            transform: scale(1.1) rotate(5deg);
        }
        100% {
            transform: scale(1) rotate(0deg);
        }
    }
    
    /* Chip Styles */
    .cdChip {
        width: 40px;
        height: 40px;
        background-color: #fff;
        border: 4px solid;
        border-radius: 100%;
        display: inline-block;
        color: #000;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        z-index: 2;
    }
    
    .cdChip:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    .cdChipActive {
        position: relative;
        top: -4px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    }
    
    .cdChipSpan {
        display: inherit;
        position: relative;
        top: 2px;
        width: 32px;
        font-weight: bold;
        font-size: 14px;
        text-align: center;
    }
    
    .blueChip { border-color: rgb(77, 184, 255) !important; }
    .red { border-color: red !important; }
    .green { border-color: green !important; }
    .black { border-color: rgb(20, 20, 20) !important; }
    .purpleChip { border-color: purple !important; }
    .yellowChip { border-color: #FFD700 !important; }
    
    .clearBet {
        border-color: red;
        background-color: red;
        color: #fff;
        margin-left: 0;
    }
    
    .clearBet .cdChipSpan {
        margin-left: -2px;
    }
    
    /* Game Controls */
    .game-controls {
        background: white;
        padding: 25px;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        width: 100%;
        max-width: 800px;
    }
    
    /* Mobile-specific game controls adjustments */
    @media (max-width: 768px) {
        .game-controls {
            padding: 20px;
            border-radius: 12px;
        }
    }
    
    @media (max-width: 600px) {
        .game-controls {
            padding: 18px;
            border-radius: 10px;
        }
    }
    
    @media (max-width: 480px) {
        .game-controls {
            padding: 15px;
            border-radius: 8px;
        }
    }
    
    .game-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-width: 200px;
    }

    .game-info p {
        margin: 4px 0;
        font-size: 14px;
        color: #ffffff;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    }
    
    /* Mobile-specific game info adjustments */
    @media (max-width: 768px) {
        .game-info {
            min-width: 180px;
        }
        .game-info p {
            font-size: 13px;
            margin: 3px 0;
        }
    }

    @media (max-width: 600px) {
        .game-info {
            min-width: 160px;
        }
        .game-info p {
            font-size: 12px;
            margin: 3px 0;
        }
    }

    @media (max-width: 480px) {
        .game-info {
            min-width: 140px;
        }
        .game-info p {
            font-size: 11px;
            margin: 2px 0;
        }
    }
    
    .action-buttons {
        display: flex;
        gap: 10px;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    
    .action-buttons .btn {
        min-width: 80px;
        width: 80px;
        max-width: 80px;
        font-weight: bold;
        padding: 8px 12px;
        flex: 0 0 80px;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        visibility: visible;
        opacity: 1;
        box-sizing: border-box;
        display: inline-block; /* Ensure buttons are displayed by default */
    }

    .action-buttons .btn.hidden,
    .action-buttons-row-2 .btn.hidden {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }
    
    /* New Game button styling - slightly wider to fit text */
    #new-game-btn {
        min-width: clamp(60px, 14vw, 95px) !important;
        width: clamp(60px, 14vw, 95px) !important;
        max-width: clamp(60px, 14vw, 95px) !important;
        flex: 0 0 clamp(60px, 14vw, 95px) !important;
        padding: clamp(6px, 1.5vh, 10px) clamp(8px, 2vw, 16px) !important;
        white-space: nowrap !important;
        font-weight: bold;
        font-size: clamp(9px, 1.8vw, 13px) !important;
        box-sizing: border-box !important;
    }
    
    /* Surrender button styling - centered in second row */
    .action-buttons-row-2 .btn {
        min-width: clamp(70px, 15vw, 100px);
        width: clamp(70px, 15vw, 100px);
        max-width: clamp(70px, 15vw, 100px);
        font-size: clamp(10px, 2vw, 14px);
        padding: clamp(6px, 1.5vh, 10px) clamp(12px, 2.5vw, 20px);
        box-sizing: border-box;
        white-space: nowrap;
    }
    
    /* Mobile-specific action buttons adjustments */
    @media (max-width: 768px) {
        .action-buttons-section {
            margin: 1.5vh 0 1vh 0;
        }
        
        .action-buttons {
            gap: 8px;
        }
        
        .action-buttons .btn {
            min-width: 70px;
            width: 70px;
            max-width: 70px;
            font-size: 14px;
            padding: 8px 12px;
            flex: 0 0 70px;
            box-sizing: border-box;
        }
        
        #new-game-btn {
            min-width: 80px !important;
            width: 80px !important;
            max-width: 80px !important;
            flex: 0 0 80px !important;
            padding: 8px 12px !important;
            font-size: 13px !important;
        }
        
        .action-buttons-row-2 .btn {
            min-width: 85px;
            width: 85px;
            max-width: 85px;
            font-size: 14px;
            padding: 8px 16px;
            white-space: nowrap;
        }
    }
    
    @media (max-width: 600px) {
        .action-buttons-section {
            margin: 1.5vh 0 1vh 0;
        }
        
        .action-buttons {
            gap: 6px;
        }
        
        .action-buttons .btn {
            min-width: 65px;
            width: 65px;
            max-width: 65px;
            font-size: 13px;
            padding: 6px 10px;
            flex: 0 0 65px;
            box-sizing: border-box;
        }
        
        #new-game-btn {
            min-width: 75px !important;
            width: 75px !important;
            max-width: 75px !important;
            flex: 0 0 75px !important;
            padding: 6px 10px !important;
            font-size: 12px !important;
        }
        
        .action-buttons-row-2 .btn {
            min-width: 80px;
            width: 80px;
            max-width: 80px;
            font-size: 13px;
            padding: 6px 14px;
            white-space: nowrap;
        }
    }
    
    @media (max-width: 480px) {
        .action-buttons-section {
            margin: 1.5vh 0 1vh 0;
        }
        
        .action-buttons {
            gap: 5px;
        }
        
        .action-buttons .btn {
            min-width: 60px;
            width: 60px;
            max-width: 60px;
            font-size: 12px;
            padding: 5px 8px;
            flex: 0 0 60px;
            box-sizing: border-box;
        }
        
        #new-game-btn {
            min-width: 70px !important;
            width: 70px !important;
            max-width: 70px !important;
            flex: 0 0 70px !important;
            padding: 5px 8px !important;
            font-size: 11px !important;
        }
        
        .action-buttons-row-2 .btn {
            min-width: 75px;
            width: 75px;
            max-width: 75px;
            font-size: 12px;
            padding: 5px 12px;
            white-space: nowrap;
        }
    }
    
    /* Game Controls Overlay */
    .game-controls-overlay {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        width: 100%;
        background: rgba(0,0,0,0.7);
        padding: 15px 20px;
        border-radius: 15px;
        border: 2px solid rgba(255,255,255,0.3);
        backdrop-filter: blur(5px);
        z-index: 10;
    }

    /* Mobile-specific game controls overlay adjustments */
    @media (max-width: 768px) {
        .game-controls-overlay {
            flex-direction: column;
            gap: 15px;
            padding: 12px 16px;
        }
    }

    @media (max-width: 600px) {
        .game-controls-overlay {
            padding: 10px 14px;
        }
    }

    @media (max-width: 480px) {
        .game-controls-overlay {
            padding: 8px 12px;
        }
    }

    /* Additional Controls */
    .additional-controls {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    /* Game Result Area */
    .game-result-area {
        text-align: center;
    }
    
    #game-result {
        font-size: 18px;
        font-weight: bold;
        border-radius: 10px;
    }
    
    /* Mobile-specific game result adjustments */
    @media (max-width: 768px) {
        #game-result {
            font-size: 16px;
            border-radius: 8px;
        }
    }
    
    @media (max-width: 600px) {
        #game-result {
            font-size: 15px;
            border-radius: 6px;
        }
    }
    
    @media (max-width: 480px) {
        #game-result {
            font-size: 14px;
            border-radius: 5px;
        }
    }
    

    
    /* Responsive Design */
    @media (max-width: 1200px) {
        .blackjack-table {
            height: 500px;
            border-radius: 150px 150px 40px 40px;
        }
        
        /* Remove conflicting width overrides - let the expansion classes handle table width */
        
        .player-spots {
            padding: 0 20px;
        }
        
        .dealer-area {
            bottom: 60px;
        }
        
        .betting-circle {
            width: 70px;
            height: 70px;
        }
        
        .card-image {
            width: 110px; /* Increased for better visibility on mobile */
            height: 160px; /* Increased for better visibility on mobile */
        }
        
        .below-table-controls {
            margin-top: 20px;
        }
    }
    
    @media (max-width: 768px) {
        .blackjack-container {
            padding: 0.5vh;
        }
        
        .blackjack-table {
            width: 98%;
            height: auto;
            min-height: 400px;
            border-radius: 80px 80px 25px 25px;
        }
        
        .blackjack-table.expanded {
            width: 120%;
        }
        
        .blackjack-table.expanded-4 {
            width: 130%;
        }
        
        .blackjack-table.expanded-5 {
            width: 140%;
        }
        
        .player-spots {
            flex-wrap: wrap;
            gap: 15px;
            padding: 0 8px;
            top: 50px;
        }
        
        .dealer-area {
            bottom: 40px;
        }
        
        .player-spot {
            flex: 0 0 calc(50% - 15px);
            min-width: 120px;
        }
        
        .betting-circle {
            width: 50px;
            height: 50px;
        }
        
        .betting-circle .chip {
            width: 35px;
            height: 35px;
            font-size: 9px;
        }
        
        .card-image {
            width: 95px; /* Increased for better visibility on mobile */
            height: 138px; /* Increased for better visibility on mobile */
        }
        
        .below-table-controls {
            margin-top: 12px;
            gap: 12px;
        }
        
        .chip-tray {
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
        }
        
        .chip {
            width: 45px;
            height: 45px;
            font-size: 11px;
        }
        
        /* Double-down chip positioning */
        .double-down-chip {
            position: absolute !important;
            left: -60px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            z-index: 10 !important;
        }
        
        .action-buttons {
            flex-direction: row; /* Change to horizontal layout on mobile */
            align-items: center;
            gap: 8px;
            flex-wrap: nowrap; /* Prevent wrapping to maintain button positions */
        }
        
        .action-buttons .btn {
            flex: 0 0 70px;
            min-width: 70px;
            width: 70px;
            max-width: 70px;
            font-size: 14px;
            padding: 8px 12px;
            box-sizing: border-box;
        }
        
        .game-controls {
            flex-direction: column;
            gap: 10px;
            align-items: center;
        }
        
        .game-controls button {
            width: 100%;
            max-width: 200px;
            font-size: 14px;
            padding: 8px 16px;
        }
        
        .bankroll-display {
            font-size: 16px;
            padding: 6px 10px;
        }
        
        .total-bet-display {
            font-size: 14px;
            padding: 5px 10px;
        }
        
        .table-minimum {
            font-size: 14px;
            padding: 5px 10px;
        }
        
        .shoe-info {
            font-size: 12px;
            padding: 4px 8px;
        }
        
        /* Ensure all hands are visible on mobile */
        .player-spot:nth-child(n) {
            display: flex !important;
        }
        
        /* Override any display:none rules for extra hands */
        .player-spot:nth-child(4),
        .player-spot:nth-child(5),
        .player-spot:nth-child(6),
        .player-spot:nth-child(7) {
            display: flex !important;
        }
    }
    
    /* Card Preloader */
    #card-preloader {
        position: absolute;
        left: -9999px;
        top: -9999px;
    }
    
    #card-preloader img {
        width: 1px;
        height: 1px;
        opacity: 0;
    }
    
    /* Loading Animation */
    .loading-cards {
        display: inline-block;
        width: 30px;
        height: 30px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 0 auto 15px auto;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    #loading-indicator {
        background: rgba(255,255,255,0.95);
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        margin: 20px 0;
    }
    
    #loading-indicator p {
        margin: 0;
        color: #666;
        font-size: 16px;
    }
    
    /* Highlight active player spot */
    .player-spot.active .spot-label {
        color: #FFD700;
        text-shadow: 0 0 10px rgba(255,215,0,0.8);
    }
    
    .player-spot.active .betting-circle {
        border-color: #6bb89a;
        background: rgba(74, 157, 124, 0.3);
        box-shadow: 0 0 20px rgba(74, 157, 124, 0.6);
    }
    
    /* Disabled state for inactive spots */
    .player-spot.disabled {
        opacity: 0.5;
        pointer-events: none;
    }
    
    .player-spot.disabled .betting-circle {
        cursor: not-allowed;
        border-color: #666;
    }

    /* --- Additional mobile optimisation: Hide extra betting spots for narrow screens --- */
    @media (max-width: 768px) {
        .player-spot:nth-child(4),
        .player-spot:nth-child(5) {
            display: none;
        }
    }
    @media (max-width: 600px) {
        .blackjack-container {
            padding: 0.4vh;
        }
        
        .blackjack-table {
            width: 99%;
            border-radius: 70px 70px 22px 22px;
        }
        
        .player-spots {
            gap: 12px;
            padding: 0 6px;
            top: 45px;
        }
        
        .dealer-area {
            bottom: 35px;
        }
        
        .player-spot {
            flex: 0 0 calc(50% - 12px);
            min-width: 110px;
        }
        
        .betting-circle {
            width: 48px;
            height: 48px;
        }
        
        .betting-circle .chip {
            width: 32px;
            height: 32px;
            font-size: 8px;
        }
        
        .card-image {
            width: 85px; /* Increased for better visibility on mobile */
            height: 123px; /* Increased for better visibility on mobile */
        }
        
        .chip {
            width: 42px;
            height: 42px;
            font-size: 10px;
        }
        
        /* Double-down chip positioning */
        .double-down-chip {
            position: absolute !important;
            left: -60px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            z-index: 10 !important;
        }
        
        .action-buttons .btn {
            min-width: 80px;
            width: 80px;
            max-width: 80px;
            font-size: 13px;
            padding: 8px 12px;
            flex: 0 0 80px;
            box-sizing: border-box;
        }
        
        .game-controls button {
            max-width: 190px;
            font-size: 13px;
            padding: 7px 14px;
        }
        
        .bankroll-display {
            font-size: 15px;
            padding: 5px 9px;
        }
        
        .total-bet-display {
            font-size: 13px;
            padding: 4px 9px;
        }
        
        .table-minimum {
            font-size: 13px;
            padding: 4px 9px;
        }
        
        .shoe-info {
            font-size: 11px;
            padding: 3px 7px;
        }
    }
    
    @media (max-width: 480px) {
        .blackjack-container {
            padding: 0.3vh;
        }
        
        .blackjack-table {
            width: 100%;
            border-radius: 60px 60px 20px 20px;
        }
        
        .player-spots {
            gap: 10px;
            padding: 0 5px;
            top: 40px;
        }
        
        .dealer-area {
            bottom: 30px;
        }
        
        .player-spot {
            flex: 0 0 calc(100% - 10px);
            min-width: 100px;
        }
        
        .betting-circle {
            width: 45px;
            height: 45px;
        }
        
        .betting-circle .chip {
            width: 30px;
            height: 30px;
            font-size: 8px;
        }
        
        .card-image {
            width: 75px; /* Increased for better visibility on mobile */
            height: 109px; /* Increased for better visibility on mobile */
        }
        
        .chip {
            width: 40px;
            height: 40px;
            font-size: 10px;
        }
        
        /* Double-down chip positioning */
        .double-down-chip {
            position: absolute !important;
            left: -60px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            z-index: 10 !important;
        }
        
        .action-buttons .btn {
            min-width: 70px;
            width: 70px;
            max-width: 70px;
            font-size: 13px;
            padding: 8px 12px;
            flex: 0 0 70px;
            box-sizing: border-box;
        }
        
        .game-controls button {
            max-width: 180px;
            font-size: 13px;
            padding: 6px 12px;
        }
        
        .bankroll-display {
            font-size: 14px;
            padding: 5px 8px;
        }
        
        .total-bet-display {
            font-size: 12px;
            padding: 4px 8px;
        }
        
        .table-minimum {
            font-size: 12px;
            padding: 4px 8px;
        }
        
        .shoe-info {
            font-size: 11px;
            padding: 3px 6px;
        }
    }

    /* Yellow shining animation for active hand */
    @keyframes yellowShine {
        0% {
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.8),
                        0 0 30px rgba(255, 215, 0, 0.6),
                        0 0 45px rgba(255, 215, 0, 0.4);
            border-color: rgba(255, 215, 0, 0.9);
        }
        50% {
            box-shadow: 0 0 25px rgba(255, 215, 0, 1),
                        0 0 50px rgba(255, 215, 0, 0.8),
                        0 0 75px rgba(255, 215, 0, 0.6);
            border-color: rgba(255, 215, 0, 1);
        }
        100% {
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.8),
                        0 0 30px rgba(255, 215, 0, 0.6),
                        0 0 45px rgba(255, 215, 0, 0.4);
            border-color: rgba(255, 215, 0, 0.9);
        }
    }

    /* Highlight active player hand */
    .player-hand.active {
        position: relative;
        transition: all 0.3s ease;
        border-radius: 15px;
        padding: 12px; /* Increased padding to ensure highlight is visible and cards aren't clipped */
        margin: 12px; /* Add margin to prevent cutoff on edges */
        box-sizing: border-box;
    }

    .player-hand.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 20px;
        border: 3px solid #FFD700;
        pointer-events: none;
        z-index: 10;
        animation: yellowShine 2s ease-in-out infinite;
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    }

    /* Also highlight the corresponding betting circle */
    .betting-circle.active {
        border-color: #FFD700 !important;
        background: rgba(255, 215, 0, 0.2) !important;
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.5) !important;
    }
/* Prevent active player hand from scaling so it doesn't shift when highlighted */
/* Note: The yellow shining border animation is still applied via ::before pseudo-element */
.player-spot.active {
    transform: none !important;
}

/* Responsive adjustments – make sure all hands fit on smaller screens */
@media (max-width: 600px) {
    .card-image {
        width: 90px; /* Increased for better visibility on mobile */
        height: 131px; /* Increased for better visibility on mobile */
    }
    .player-hand {
        gap: 4px;
    }
    .player-spot {
        margin: 0 8px;
    }
    /* Give non-active hands a subtle size reduction so the current hand stands out */
    .player-spot:not(.active) .card-image {
        transform: scale(0.85);
    }
}

/* Extra-small devices */
@media (max-width: 420px) {
    .card-image {
        width: 70px; /* Increased for better visibility on mobile */
        height: 102px; /* Increased for better visibility on mobile */
    }
}

/* Insurance Modal Styles */
.insurance-hand-item {
    background-color: #f8f9fa;
    transition: background-color 0.2s ease;
}

.insurance-hand-item:hover {
    background-color: #e9ecef;
}

.insurance-hand-item label {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.insurance-checkbox {
    cursor: pointer;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
}

#insurance-hands-list {
    max-height: 400px;
    overflow-y: auto;
}

#insurance-hands-list .hand {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Dark Mode - Insurance Modal */
body.dark-mode .insurance-hand-item {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
    border-color: #4a4a4a !important;
}

body.dark-mode .insurance-hand-item:hover {
    background-color: #4a4a4a !important;
    border-color: #5a5a5a !important;
}

body.dark-mode .insurance-hand-item label {
    color: #e0e0e0 !important;
}

body.dark-mode .insurance-hand-item label strong {
    color: #ffffff !important;
}

body.dark-mode .insurance-hand-item .hand {
    color: #e0e0e0 !important;
}

body.dark-mode #insuranceModal .modal-content {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

body.dark-mode #insuranceModal .modal-header {
    background-color: #2a2a2a !important;
    border-bottom-color: #3a3a3a !important;
}

body.dark-mode #insuranceModal .modal-title {
    color: #ffffff !important;
}

body.dark-mode #insuranceModal .modal-body {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}

body.dark-mode #insuranceModal .modal-body p {
    color: #e0e0e0 !important;
}

body.dark-mode #insuranceModal .modal-body h5 {
    color: #ffffff !important;
}

body.dark-mode #insuranceModal .modal-footer {
    background-color: #2a2a2a !important;
    border-top-color: #3a3a3a !important;
}

body.dark-mode #insuranceModal .close {
    color: #ffffff !important;
    text-shadow: 0 1px 0 #000;
    opacity: 0.7;
}

body.dark-mode #insuranceModal .close:hover {
    opacity: 1;
}

/* Dark Mode - Bootstrap border class override for insurance modal */
body.dark-mode #insuranceModal .border {
    border-color: #4a4a4a !important;
}

body.dark-mode #insuranceModal .rounded {
    border-color: #4a4a4a !important;
}

/* Dark Mode - Ensure all text elements in insurance modal are visible */
body.dark-mode #insuranceModal .modal-body * {
    color: inherit;
}

body.dark-mode #insuranceModal .modal-body strong {
    color: #ffffff !important;
}

/* Dark Mode - Card images in insurance modal */
body.dark-mode #insuranceModal .card-image {
    filter: brightness(1.1);
}

@media (max-width: 768px) {
    #insurance-hands-list {
        max-height: 300px;
    }
    
    .insurance-hand-item {
        padding: 10px !important;
    }
}