/* CSS Variables */
:root {
    --felt-green: #0d5d2f;
    --felt-green-dark: #0a4a25;
    --felt-green-light: #0f6d3a;
    --card-white: #ffffff;
    --card-red: #d32f2f;
    --card-black: #212121;
    --gold: #ffd700;
    --gold-dark: #ffb300;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-dark: rgba(0, 0, 0, 0.5);
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #05173c 0%, #2d2d2d 100%);
    color: var(--card-white);
    overflow: hidden;
    height: 100vh;
    height: -webkit-fill-available;
    /* iOS Safari fix */
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
    /* Remove tap highlight on mobile */
}

/* Game Container */
.game-container {
    width: 100%;
    max-width: 900px;
    height: 100%;
    min-height: 600px;
    max-height: 1100px;
    background: var(--felt-green);
    background-image: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    border-radius: 20px;
    box-shadow: 0 10px 40px var(--shadow-dark), inset 0 0 100px rgba(0, 0, 0, 0.3);
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
}

/* Header */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    gap: 20px;
    flex-wrap: wrap;
}

.game-header h1 {
    flex: 0 0 auto;
}

.header-buttons {
    flex: 0 0 auto;
    margin-left: auto;
}

.game-header h1 {
    font-size: 2rem;
    text-shadow: 2px 2px 4px var(--shadow-dark);
    letter-spacing: 2px;
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0;
    min-width: 0;
}

/* Header Controls Container */
.header-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Space between HUD and Buttons */
    flex: 1;
    justify-content: flex-end;
    flex-wrap: nowrap;
    /* Prevent wrapping on desktop */
}

.header-hud {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 6px 16px;
    /* Slightly more compact */
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    gap: 15px;
    flex-shrink: 0;
    /* Prevent HUD from squishing */
}

/* ... HUD item styles remain same ... */
.hud-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hud-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 2px;
    line-height: 1;
}

.hud-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--gold);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.1;
    font-family: 'Segoe UI', sans-serif;
}

.hud-separator {
    width: 1px;
    height: 30px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.hud-value-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.hud-locked-indicator {
    font-size: 0.8rem;
    opacity: 0.8;
    line-height: 1;
    visibility: hidden;
    /* Use visibility instead of display to reserve space if desired, or we can toggle class */
    /* Update: actually user wants to reserve space so it DOESNT jump.
       So default is hidden but taking space?
       No, if it takes space always, the pill is always wide.
       User complained about HEIGHT jumping.
       My change to row layout fixes HEIGHT jumping (since it's now side-by-side).
       To fix WIDTH jumping, we can reserve space or just let it expand.
       The vertical jump was the main issue (icon was below).
       Now it is to the right.
       Let's stick with specific styling. */
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    /* Keep buttons purely inline on desktop */
    justify-content: flex-end;
    flex-shrink: 0;
    min-width: fit-content;
}

.btn-header {
    padding: 8px 16px;
    min-height: 36px;
    font-size: 0.9rem;
    min-width: 80px;
    /* Override standard btn min-width if needed */
}

.btn-stats {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.1) 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-stats:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px var(--shadow-dark);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
}

.btn-header {
    padding: 6px 12px;
    font-size: 0.85rem;
    min-width: auto;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

/* Betting Section */
.betting-section {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px 20px;
    border-radius: 10px;
    margin: 15px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: auto;
    position: relative;
    z-index: 5;
    width: 100%;
    box-sizing: border-box;
}

.betting-section.hidden {
    display: none;
    pointer-events: none;
}

.betting-label {
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gold);
    text-shadow: 1px 1px 2px var(--shadow-dark);
    text-align: center;
    align-self: center;
    width: 100%;
}

.bet-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

/* Ensure betting buttons have proper touch targets on mobile */
@media (max-width: 600px) {
    .bet-buttons {
        gap: 8px;
    }

    .btn-bet {
        min-height: 48px;
        /* Ensure minimum touch target */
    }
}

.btn-bet {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.1) 100%);
    color: var(--gold);
    border: 2px solid var(--gold);
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    min-width: 80px;
    min-height: 44px;
    /* Minimum touch target for accessibility */
    transition: all 0.3s ease;
}

.btn-bet:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--card-black);
    transform: translateY(-2px);
    box-shadow: 0 6px 8px var(--shadow-dark);
}

.btn-bet:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-bet.active {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--card-black);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.btn-bet.active.auto-starting {
    animation: pulse-gold 1s ease-in-out infinite;
}

@keyframes pulse-gold {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
        transform: scale(1.05);
    }
}


/* Status Bar */
.status-bar {
    background: rgba(0, 0, 0, 0.4);
    padding: 12px 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    text-align: center;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* Game Table */
.game-table {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 0;
    min-height: 0;
    overflow: visible;
}

.dealer-section,
.player-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.player-section {
    gap: 12px;
    position: relative;
}

/* Betting section inside player section - positioned between cards and controls */
.player-section .betting-section {
    order: 2;
    /* After cards (order: 1), before controls (order: 3) */
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

/* Ensure cards container comes first */
.player-section .cards-container {
    order: 1;
}

/* Ensure controls come last */
.player-section .controls {
    order: 3;
}

.section-label {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px var(--shadow-dark);
    padding: 0 10px;
    width: 100%;
}

.section-label > span:first-child {
    text-align: center;
}

.section-label .score {
    position: static;
}

.score {
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 15px;
    border-radius: 20px;
    min-width: 50px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Cards Container */
.cards-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 100px;
    align-items: flex-start;
    justify-content: center;
    padding: 5px;
    perspective: 1000px;
    max-width: 100%;
    overflow-x: hidden;
    /* Prevent horizontal scroll, cards wrap instead */
    overflow-y: visible;
}

/* Card Styles */
.card {
    width: 70px;
    height: 100px;
    background: var(--card-white);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px;
    box-shadow: 0 4px 8px var(--shadow), 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s ease,
    margin 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    flex-shrink: 0;
    /* Prevent cards from shrinking */
    max-width: 100%;
    /* Ensure cards don't overflow container */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px var(--shadow-dark), 0 4px 8px rgba(0, 0, 0, 0.3);
}

.card.red {
    color: var(--card-red);
}

.card.black {
    color: var(--card-black);
}

.card.hidden {
    background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.1) 10px, rgba(255, 255, 255, 0.1) 20px);
    color: transparent;
}

.card.hidden::before,
.card.hidden::after {
    display: none;
}

.card-value {
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1;
}

.card-suit {
    font-size: 1.8rem;
    text-align: center;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-corner {
    font-size: 0.9rem;
    font-weight: bold;
}

/* Card Animation */
@keyframes dealCard {
    0% {
        opacity: 0;
        transform: translateY(-80px) translateX(-20px) rotate(-15deg) scale(0.8);
    }

    50% {
        opacity: 0.8;
        transform: translateY(10px) translateX(5px) rotate(5deg) scale(1.05);
    }

    100% {
        opacity: 1;
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    }
}

@keyframes flipCard {
    0% {
        transform: rotateY(0deg) scaleX(1);
    }

    50% {
        transform: rotateY(90deg) scaleX(0.1);
    }

    100% {
        transform: rotateY(180deg) scaleX(1);
    }
}

@keyframes revealCard {
    0% {
        opacity: 0;
        transform: rotateY(180deg) scale(0.8);
    }

    50% {
        transform: rotateY(90deg) scale(1.1);
    }

    100% {
        opacity: 1;
        transform: rotateY(0deg) scale(1);
    }
}

.card.new-card {
    animation: dealCard 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card.flipping {
    animation: flipCard 0.8s ease-in-out;
}

.card.revealing {
    animation: revealCard 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Controls */
.controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
    flex-shrink: 0;
    padding: 0;
    position: relative;
    z-index: 10;
    order: 3;
    /* After betting section */
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 6px var(--shadow);
    min-width: 100px;
    min-height: 44px;
    /* Minimum touch target for accessibility */
    position: relative;
    z-index: 11;
    pointer-events: auto;
    touch-action: manipulation;
    /* Prevent double-tap zoom on mobile */
    -webkit-tap-highlight-color: transparent;
    /* Remove tap highlight */
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    pointer-events: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--card-black);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px var(--shadow-dark);
}

.btn-primary.pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 4px 6px var(--shadow);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 12px var(--shadow-dark), 0 0 20px rgba(255, 215, 0, 0.5);
    }
}

.btn-action {
    background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
    color: white;
}

.btn-action:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px var(--shadow-dark);
    background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
}

#standBtn {
    background: linear-gradient(135deg, #ef5350 0%, #c62828 100%);
}

#standBtn:hover:not(:disabled) {
    background: linear-gradient(135deg, #ff7043 0%, #d32f2f 100%);
}

.btn-advice {
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: white;
}

.btn-advice:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px var(--shadow-dark);
    background: linear-gradient(135deg, #42a5f5 0%, #2196f3 100%);
}


/* Modal Styles */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: -webkit-fill-available;
    /* iOS Safari fix */
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    padding: 10px;
}

.modal-overlay.show {
    display: flex !important;
}

.modal-content {
    background: var(--felt-green);
    background-image: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    border-radius: 20px;
    padding: 0;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 40px var(--shadow-dark), inset 0 0 100px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.modal-header h2 {
    margin: 0;
    color: var(--gold);
    text-shadow: 2px 2px 4px var(--shadow-dark);
    font-size: 1.5rem;
    letter-spacing: 1px;
}

.modal-close {
    background: none;
    border: none;
    color: var(--card-white);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    min-width: 30px;
    /* Ensure tap target is large enough */
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    touch-action: manipulation;
    /* Prevent double-tap zoom */
    -webkit-tap-highlight-color: transparent;
}

.game-over-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    align-items: stretch;
    /* Explicitly force stretch */
}

.btn-game-over {
    width: 100% !important;
    /* Force full width overriding any other styles */
    max-width: none !important;
    padding: 12px;
    line-height: normal;
    /* Allow text to flow naturally */
    display: block;
    /* Ensure block behavior */
    margin: 0;
}

.btn-game-over small {
    font-size: 0.8rem;
    /* Slightly smaller base size */
    opacity: 0.9;
    font-weight: normal;
    display: block;
    margin-top: 4px;
    line-height: 1.2;
}

/* Mobile specific tweaks for Game Over buttons */
@media (max-width: 400px) {
    .btn-game-over {
        padding: 10px 8px;
        /* Reduce padding on small screens */
    }

    .btn-game-over small {
        font-size: 0.7rem;
        /* Even smaller on mobile */
        margin-top: 2px;
    }
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.modal-body {
    padding: 20px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-item.stat-winrate {
    margin-top: 10px;
    padding-top: 20px;
    border-top: 2px solid rgba(255, 215, 0, 0.3);
}

.stat-label {
    font-size: 1.1rem;
    color: var(--card-white);
    text-shadow: 1px 1px 2px var(--shadow-dark);
    font-weight: 500;
}

.stat-value {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--gold);
}

/* Responsive Design */
@media (max-width: 600px) {
    .game-container {
        padding: 10px;
        /* Reduced from 15px */
        max-height: 100vh;
        max-height: -webkit-fill-available;
        border-radius: 0;
        min-height: auto;
    }

    /* Mobile Header Layout - CSS GRID */
    .game-header {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
        /* Reduced gap */
        padding-bottom: 8px;
        /* Reduced from 12px */
    }

    .game-header h1 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        width: auto;
        text-align: left;
        margin: 0;
        /* Responsive font size: minimum 1rem, preferred 5vw, max 1.2rem */
        font-size: clamp(1rem, 4vw, 1.2rem);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 5px;
    }

    .header-controls {
        display: contents;
    }

    .game-header .header-hud {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        width: auto;
        min-width: 0;
        padding: 3px 8px;
        /* Reduced padding */
        margin: 0;
        gap: 6px;
        justify-self: end;
    }

    .header-buttons {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
        width: 100%;
        justify-content: center;
        margin-top: 2px;
        /* Reduced margin */
        gap: 6px;
        flex-wrap: nowrap;
    }

    .hud-item {
        flex-direction: row;
        gap: 5px;
    }

    .hud-label {
        font-size: 0.65rem;
        margin-bottom: 0;
    }

    .hud-value {
        font-size: 1rem;
    }

    .btn-header {
        flex: 1;
        padding: 4px 4px;
        /* Minimal padding */
        font-size: 0.7rem;
        /* Smaller font to accommodate timer text */
        min-height: 30px;
        max-width: 140px;
        /* Allow a bit more width if available */
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        /* Prevent wrapping */
        letter-spacing: -0.3px;
        /* Squeeze text slightly */
    }

    /* Smallest screens: Stack HUD and Buttons nicely */
    @media (max-width: 400px) {
        .header-controls {
            flex-direction: column;
            align-items: stretch;
        }

        .header-hud {
            width: 100%;
        }

        .header-buttons {
            width: 100%;
            justify-content: space-between;
        }

        .btn-header {
            flex: 1;
            /* Stretch buttons */
        }
    }

    /* Deleted conflicting order rules */
    .hud-label {
        font-size: 0.65rem;
    }

    .hud-value {
        font-size: 1.1rem;
    }

    .btn-header {
        padding: 10px 16px;
        font-size: 0.9rem;
        min-height: 44px;
        /* Minimum touch target size */
        flex: 0 0 auto;
        /* Don't grow, don't shrink, auto width */
        min-width: 0;
    }

    .header-buttons {
        margin-left: auto;
    }

    .status-bar {
        font-size: 0.9rem;
        padding: 6px 10px;
        /* Reduced padding */
        margin-bottom: 6px;
        /* Reduced margin */
        min-height: 32px;
        /* Reduced height */
        line-height: 1.3;
    }

    .game-table {
        gap: 6px;
        /* Reduced gap */
        padding: 4px 0;
    }

    .dealer-section,
    .player-section {
        gap: 4px;
        /* Reduced gap */
    }

    .section-label {
        font-size: 1.1rem;
        gap: 8px;
        padding: 2px 5px;
        /* Reduced padding */
        margin-bottom: 2px;
    }

    .score {
        padding: 4px 10px;
        font-size: 0.95rem;
        min-width: 40px;
        min-height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card {
        width: 55px;
        /* Slightly smaller */
        height: 77px;
        font-size: 0.9rem;
        padding: 4px;
    }

    .card-value {
        font-size: 1rem;
    }

    .card-suit {
        font-size: 1.4rem;
    }

    .cards-container {
        gap: 4px;
        padding: 4px 2px;
        min-height: 85px;
        /* Reduced minimum height */
    }

    .betting-section {
        padding: 8px 10px;
        /* Reduced padding */
        margin: 6px 0;
        /* Reduced margin */
        gap: 8px;
    }

    .betting-label {
        font-size: 0.95rem;
        margin-bottom: 4px;
    }

    .bet-buttons {
        gap: 8px;
        width: 100%;
    }

    .btn-bet {
        padding: 12px 16px;
        font-size: 0.95rem;
        min-width: 0;
        flex: 1 1 calc(50% - 4px);
        /* Two buttons per row with gap */
        min-height: 48px;
        /* Minimum touch target size */
        max-width: calc(50% - 4px);
    }


    .player-section .betting-section {
        margin-top: 12px;
        margin-bottom: 12px;
        width: 100%;
    }

    .controls {
        gap: 12px;
        margin-top: 12px;
        padding: 8px 0;
    }

    .btn {
        padding: 14px 24px;
        font-size: 1rem;
        min-width: 120px;
        min-height: 48px;
        /* Minimum touch target size */
        flex: 1;
        max-width: calc(50% - 6px);
    }

    /* Modal improvements for mobile */
    .modal-content {
        max-width: 95%;
        width: 95%;
        margin: 10px;
        max-height: 90vh;
        max-height: -webkit-fill-available;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling on iOS */
    }

    .modal-header {
        padding: 15px;
    }

    .modal-header h2 {
        font-size: 1.2rem;
    }

    .modal-body {
        padding: 15px;
    }

    .stat-item {
        padding: 12px 0;
    }

    .stat-label {
        font-size: 1rem;
    }

    .stat-value {
        font-size: 1.1rem;
    }
}

@media (max-height: 500px) {
    .game-container {
        padding: 8px;
    }

    .game-header {
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

    .game-header h1 {
        font-size: 1.3rem;
    }

    .status-bar {
        margin-bottom: 8px;
        padding: 8px 12px;
        min-height: 40px;
        font-size: 0.85rem;
    }

    .game-table {
        gap: 12px;
        padding: 6px 0;
    }

    .dealer-section,
    .player-section {
        gap: 8px;
    }

    .section-label {
        font-size: 0.95rem;
        padding: 4px 5px;
    }

    .score {
        padding: 4px 10px;
        font-size: 0.9rem;
        min-height: 28px;
    }

    .card {
        width: 48px;
        height: 68px;
        padding: 4px;
    }

    .card-value {
        font-size: 0.95rem;
    }

    .card-suit {
        font-size: 1.2rem;
    }

    .cards-container {
        gap: 5px;
        padding: 4px;
        min-height: 75px;
    }

    .betting-section {
        padding: 10px 12px;
        margin: 8px 0;
        gap: 10px;
    }

    .betting-label {
        font-size: 0.85rem;
    }

    .bet-buttons {
        gap: 6px;
    }

    .btn-bet {
        padding: 8px 10px;
        font-size: 0.85rem;
        min-height: 40px;
    }


    .controls {
        gap: 8px;
        margin-top: 8px;
        padding: 4px 0;
    }

    .btn {
        padding: 10px 18px;
        font-size: 0.9rem;
        min-height: 44px;
    }
}

/* Very small screens (< 400px) */
@media (max-width: 400px) {
    .game-container {
        padding: 10px;
    }

    .game-header {
        gap: 10px;
        margin-bottom: 8px;
    }

    .game-header h1 {
        font-size: 1.3rem;
        letter-spacing: 1px;
        width: 100%;
        text-align: center;
    }

    .header-info {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .balance-display,
    .bet-display {
        width: 100%;
        padding: 8px 10px;
        font-size: 0.85rem;
        justify-content: space-between;
    }

    .balance-value,
    .bet-value {
        font-size: 1.05rem;
    }

    .header-buttons {
        gap: 8px;
        width: 100%;
        justify-content: flex-end;
    }

    .btn-header {
        padding: 10px 14px;
        font-size: 0.85rem;
        min-height: 44px;
        /* Minimum touch target */
        flex: 0 0 auto;
        /* Don't grow, don't shrink, auto width */
    }

    .card {
        width: 45px;
        height: 65px;
        padding: 6px;
    }

    .card-value {
        font-size: 0.9rem;
    }

    .card-suit {
        font-size: 1.2rem;
    }

    .card-corner {
        font-size: 0.75rem;
    }

    .btn {
        padding: 8px 14px;
        font-size: 0.85rem;
        min-width: 70px;
    }

    .section-label {
        font-size: 0.9rem;
        gap: 10px;
    }

    .score {
        padding: 4px 12px;
        font-size: 0.9rem;
        min-width: 40px;
    }

    .status-bar {
        font-size: 0.8rem;
        padding: 8px 12px;
        min-height: 40px;
    }

    .cards-container {
        gap: 6px;
        padding: 3px;
    }

    .header-info {
        gap: 6px;
    }

    .balance-display,
    .bet-display {
        padding: 4px 8px;
        font-size: 0.85rem;
    }

    .balance-value,
    .bet-value {
        font-size: 1rem;
    }

    .betting-section {
        padding: 10px 12px;
        margin: 8px 0;
    }

    .betting-label {
        font-size: 0.85rem;
    }

    .bet-buttons {
        gap: 5px;
    }

    .btn-bet {
        padding: 6px 10px;
        font-size: 0.85rem;
        min-width: 60px;
    }

    .player-section .betting-section {
        margin-top: 6px;
        margin-bottom: 6px;
    }

    .controls {
        margin-top: 6px;
    }

    .modal-content {
        max-width: 98%;
        width: 98%;
        border-radius: 15px;
    }

    .modal-header {
        padding: 12px;
    }

    .modal-header h2 {
        font-size: 1.1rem;
    }

    .modal-body {
        padding: 12px;
    }

    .stat-item {
        padding: 10px 0;
    }

    .stat-label {
        font-size: 0.9rem;
    }

    .stat-value {
        font-size: 1rem;
    }

    .header-info {
        gap: 6px;
    }

    .balance-display,
    .bet-display {
        padding: 4px 8px;
        font-size: 0.8rem;
    }

    .balance-value,
    .bet-value {
        font-size: 0.95rem;
    }

    .betting-section {
        padding: 10px 12px;
        margin: 8px 0;
    }

    .betting-label {
        font-size: 0.8rem;
    }

    .bet-buttons {
        gap: 5px;
    }

    .btn-bet {
        padding: 6px 10px;
        font-size: 0.8rem;
        min-width: 55px;
    }


    .player-section .betting-section {
        margin-top: 6px;
        margin-bottom: 6px;
    }

    .controls {
        margin-top: 6px;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .game-container {
        max-height: 100vh;
        max-height: -webkit-fill-available;
        padding: 10px;
    }

    .game-header {
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

    .game-header h1 {
        font-size: 1.3rem;
    }

    .status-bar {
        margin-bottom: 10px;
        padding: 8px 15px;
        font-size: 0.85rem;
        min-height: 35px;
    }

    .game-table {
        gap: 10px;
        padding: 5px 0;
    }

    .card {
        width: 45px;
        height: 65px;
    }

    .section-label {
        font-size: 0.95rem;
    }

    .controls {
        margin-top: 10px;
        gap: 6px;
    }

    .btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}