:root {
    --min-player-card-width: 85px;
    --min-player-card-height: 119px;
    --min-dealer-card-width: 55px;
    --min-dealer-card-height: 77px;
}

/* --- Basic Reset and Body Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Crucial for layout calculations */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #d2d4df; /* Global default color */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

html, body {
    height: 100%;
    /* overflow: hidden; Removed to allow scrolling on smaller screens if needed */
    background-color: #0e0f1a;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100%; /* Ensure body takes at least full height */
}

/* --- Top Bar Styles --- */
.top-bar {
    background-color: #1c1f2a;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 100;
    flex-shrink: 0;
}

.logo { font-size: 28px; font-weight: bold; color: white; }
.wallet { display: flex; align-items: center; background-color: #2c2f3d; border-radius: 6px; padding: 8px 16px; cursor: pointer; }
.balance { margin-right: 10px; font-weight: bold; }
.blue-button { background-color: #3f8cff; color: white; border: none; border-radius: 6px; padding: 8px 16px; font-weight: bold; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.blue-button:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

/* --- Main Game Area Layout --- */
.main-content {
    flex: 1;
    display: flex;
    padding: 20px;
    gap: 20px;
    overflow: hidden; /* Prevent content spill on large screens */
    align-items: stretch;
}

/* --- Left Side: Controls Panel --- */
.controls-panel {
    width: 400px;
    flex-shrink: 0;
    background-color: #1c1f2a;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* --- Right Side: Game Container --- */
.game-container {
    flex: 1;
    border-radius: 8px;
    display: flex;
    flex-direction: column; /* Children stack vertically */
    position: relative;
    min-width: 0; /* Prevents flex item overflow */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    overflow: hidden;
    /* --- Background Image --- */
    /* TODO: Replace this URL with the actual path to your wallpaper.jpg or remove the line */
    /* background-image: url('path/to/your/wallpaper.jpg'); */
    background-color: #15172a; /* Fallback color */
    background-size: cover; /* Cover the entire container */
    background-position: center center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
}

/* --- Dealer and Player Areas --- */
.dealer-area {
    width: 70%;
    text-align: left;
    position: relative;
    padding: 80px 0;
    background-color: #232746; /* Semi-transparent dark overlay */
    border-radius: 8px;
    margin: 10px auto; /* Use auto margin for robust horizontal centering */
}
.player-area {
    /* Keep your existing styles */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /* IMPORTANT CHANGE: Align content to the top to ensure vertical scrolling starts correctly */
    align-items: flex-start; /* Changed from 'center' to 'flex-start' */
    align-content: flex-start; /* Changed from 'center' to 'flex-start' for wrapped lines */
    position: relative;
    flex-grow: 1;
    /* Increase top padding to give more vertical space for cards at the top */
    padding: 40px 0 20px 0; /* Adjust top padding as needed (top, right, bottom, left) */
    gap: clamp(10px, 2vmin, 20px);
    overflow-y: auto; /* Ensure vertical scrolling is enabled */
    background-color: #15172a;
    margin: 0 10px 10px 10px;
    border-radius: 0 0 8px 8px;
    /* If you have a min-height here that's causing issues, consider adjusting it */
    min-height: 50vh; /* Keep this if you want it to take up at least half viewport height */
}

/* --- Individual player hand container --- */
.player-hand {
    border-radius: 8px;
    padding: 20px;
    transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    max-width: 45%;
    flex-basis: 45%;
    flex-shrink: 0;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    background-color: #15172a;
    border: 1px solid transparent;
    min-height: 400px; /* Reduced from 400px to prevent overflow */
    margin: 10px 0; /* Add some vertical margin */
}
.player-hand.active-hand {
    background-color: rgba(63, 140, 255, 0.15); /* Slightly stronger highlight */
    border-color: rgba(63, 140, 255, 0.5);
    transform: scale(1.02);
}

/* --- Hand Result Display (Below Cards) --- */
.hand-result {
    margin-top: clamp(10px, 1.5vmin, 15px); /* Increased dynamic margin */
    font-size: clamp(14px, 2.2vmin, 18px); /* Dynamic font size */
    font-weight: bold;
    min-height: clamp(20px, 3.5vmin, 26px); /* Dynamic min height */
    text-align: center;
    width: 100%;
    background-color: rgba(14, 15, 26, 0); /* Transparent background */
    padding: 3px 6px;
    border-radius: 4px;
    color: #d2d4df; /* Default text color */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7); /* Improve readability */
}
/* Specific result colors */
.hand-result.win { color: #2ecc71; }
.hand-result.lose { color: #e74c3c; }
.hand-result.push { color: #f4ad57; }
.hand-result.bust { color: #e74c3c; font-weight: 800;}


/* --- Score Display (Inside Footer) --- */
.score-display { display: flex; justify-content: center; align-items: baseline; gap: 10px; width: 100%; margin-bottom: 2px; }
.score-label { font-size: 14px; color: #a0a3af; font-weight: 500; }
.score-value { font-size: 20px; font-weight: bold; color: white; min-width: 25px; text-align: center; transition: transform 0.3s ease-out, color 0.3s ease-out; display: inline-block; }
.score-value.score-higher { transform: translateY(-4px) scale(1.1); color: #2ecc71; }
.score-value.score-lower { transform: translateY(0px) scale(0.9); color: #a0a3af; opacity: 0.8; }
.score-separator { color: #a0a3af; font-size: 16px; }

/* --- Game Footer --- */
.game-footer {
    background-color: #2c2f3d;
    padding: 8px 15px;
    border-radius: 8px 8px 8px 8px; /* Match container */
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    position: relative; /* Ensure it stays within game-container */
    z-index: 10; /* Above cards if they overlap somehow */
    margin: -45px 10px 10px 10px; /* Pulls footer up over the game board */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* Subtle top shadow */
}
.footer-info-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.footer-logo { font-size: 14px; font-weight: bold; color: #fff; font-style: italic; }
.footer-label { font-size: 12px; color: #a0a3af; font-weight: 500; }


/* --- Cards Containers - Sizing relative to cards --- */
.cards {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align cards to top */
    position: relative;
    width: 100%;
    margin-bottom: 80px; /* Space below cards before result text */
}
.dealer-cards {
    /* Set height based on clamped card height + some buffer */
    min-height: 0;
    position: absolute;
}
.player-hand .cards {
    /* Set height based on clamped card height + stacking buffer */
    min-height: calc(clamp(119px, 25.2vmin, 203px) + clamp(15px, 1.5vmin, 15px)+ clamp(15px, 1.5vmin, 15px));
}

/* --- Card Styling (Using clamp() and vmin) --- */
.card {
    position: absolute;
    top: 0; /* Position relative to .cards container */
    left: 50%; /* Center horizontally */
    border-radius: clamp(4px, 1vmin, 8px); /* Dynamic radius */
    overflow: hidden;
    /* Remove border from .card - it will be on the faces instead */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 4px 8px rgba(0, 0, 0, 0.4);
    opacity: 0; /* Start hidden for animation */
}

/* Dealer Cards - Dynamic Size */
.dealer-cards .card {
    width: clamp(var(--min-dealer-card-width), 11vmin, 80px);
    height: clamp(var(--min-dealer-card-height), 15.4vmin, 112px);
    left: 80px;

}

/* Player Cards - Dynamic Size */
.player-hand .card {
    width: clamp(var(--min-player-card-width), 18vmin, 145px);
    height: clamp(var(--min-player-card-height), 25.2vmin, 203px);
    --horizontal-spacing: clamp(400px, 1vmin, 800px);
}

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

.card.is-flipped .card-inner {
    transform: rotateY(180deg);
}

.card-face, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    /* Add border to both faces so it flips with the card */
    border-radius: clamp(4px, 1vmin, 8px);
    border-style: solid;
    border-color: #29a2ff;
    border-width: 20px;
}

/* Apply different border widths based on card type */
.dealer-cards .card-face,
.dealer-cards .card-back {
    border-width: clamp(2px, 0.4vmin, 3px);
}

.player-hand .card-face,
.player-hand .card-back {
    border-width: clamp(3px, 0.6vmin, 4px);
}

.card-face {
    background-color: white;
    padding: clamp(4px, 1vmin, 8px);
}

.card-back {
    background-color: #2079be;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent 100%);
    background-size: 40px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotateY(180deg);
    padding: clamp(4px, 1vmin, 8px);
}

/* Update highlight animations to affect the card faces instead of the card container */
.card.win-highlight .card-face,
.card.win-highlight .card-back {
    border-color: #2ecc71 !important;
    box-shadow: 0 0 15px 3px rgba(46, 204, 113, 0.7) !important;
    animation: winPulse 1.5s infinite;
}

.card.lose-highlight .card-face,
.card.lose-highlight .card-back {
    border-color: #e74c3c !important;
    box-shadow: 0 0 15px 3px rgba(231, 76, 60, 0.7) !important;
    animation: losePulse 1.5s infinite;
}

.card.push-highlight .card-face,
.card.push-highlight .card-back {
    border-color: #ff9100 !important;
    box-shadow: 0 0 15px 3px rgb(171, 65, 0) !important;
    animation: losePulse 1.5s infinite;
}

/* Ensure bust results are always red */
.hand-result.bust {
    color: #e74c3c !important;
    font-weight: 800;
}

.game-result.bust {
    color: #e74c3c !important;
}

/* Make sure dealer bust shows as red (dealer loses) */
.dealer-area .hand-result.bust {
    color: #e74c3c !important;
}

/* Explicit Suit/Value Coloring */
.card-face.card-black .card-value,
.card-face.card-black .card-suit,
.card-face.card-black .card-center {
    color: black !important;
}
.card-face.card-red .card-value,
.card-face.card-red .card-suit,
.card-face.card-red .card-center {
    color: #e53935 !important;
}

/* Dynamic Font Sizes within Cards */
.card-value { font-weight: 600; line-height: 1; }
.player-hand .card-value { font-size: clamp(18px, 3.8vmin, 30px); }
.dealer-cards .card-value { font-size: clamp(12px, 2.3vmin, 16px); }

.card-suit { align-self: flex-start; }
.player-hand .card-suit { font-size: clamp(20px, 4vmin, 32px); }
.dealer-cards .card-suit { font-size: clamp(14px, 2.6vmin, 18px); }

.card-center { align-self: center; margin-top: -15%; }
.player-hand .card-center { font-size: clamp(45px, 9vmin, 75px); }
.dealer-cards .card-center { font-size: clamp(28px, 5vmin, 38px); }

.stake-logo { font-size: clamp(14px, 2.5vmin, 20px); color: white; font-style: italic; font-weight: bold; transform: rotate(-10deg); text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
.dealer-cards .stake-logo { font-size: clamp(12px, 2vmin, 16px); }
.info-text { display: none; }


/* --- Controls Panel Elements --- */
.controls-panel .bet-label { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #a0a3af; padding: 0 2px; margin-bottom: 10px; }
.controls-panel .crypto-amount { font-size: 12px; opacity: 0.7; }
.controls-panel .bet-input-row { display: flex; border: 1px solid #3a3e4c; border-radius: 6px; overflow: hidden; align-items: stretch; margin-bottom: 15px; height: 46px; }

.controls-panel .bet-input {
    flex: 0 0 40%; /* Reduced basis */
    border: none;
    border-radius: 0;
    border-right: 1px solid #1c1f2a;
    background-color: #2c2f3d;
    padding: 12px;
    color: white;
    font-size: 16px;
    text-align: right;
    height: 100%;
    outline: none;
    transition: border-color 0.3s ease;
}
.controls-panel .bet-input::-webkit-outer-spin-button, .controls-panel .bet-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.controls-panel .bet-input[type=number] { -moz-appearance: textfield; }
.controls-panel .bet-input:focus { border-color: #3f8cff; }


.controls-panel .multiplier {
    flex: 1; /* Let them share remaining space */
    border: none;
    border-radius: 0;
    border-left: 1px solid #1c1f2a;
    background-color: #3a3e4c;
    color: #d2d4df;
    cursor: pointer; /* Default cursor for multipliers */
    font-size: 13px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 5px;
    height: 100%;
}

.controls-panel .action-buttons { display: flex; gap: 10px; margin-bottom: 10px; }

/* MODIFIED: Base style for glass buttons */
.controls-panel .action-button {
    flex: 1;
    padding: 14px;
    border-radius: 8px;
    /* MODIFIED: Using border property for glass effect */
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    -webkit-backdrop-filter: blur(4px);
}
/* MODIFIED: Tinted glass backgrounds */
.hit-button { background-color: rgba(42, 61, 96, 0); color: rgba(70, 125, 255, 0.79); }
.stand-button { background-color: rgba(46, 47, 39, 0.29); color: rgba(237, 255, 4, 0.69); }
.double-button { background-color: rgba(46, 47, 39, 0.29); color: rgba(255, 4, 4, 0.58); }
.split-button { background-color: rgba(46, 47, 39, 0.29); color: rgba(237, 255, 4, 0.69); }
.half-button { background-color: rgba(46, 47, 39, 0.29); color: rgba(237, 255, 4, 0.69); }
.max-button { background-color: rgba(46, 47, 39, 0.29); color: rgba(237, 255, 4, 0.69); }
.bet-button { background-color: rgba(46, 47, 39, 0.29); color: rgba(237, 255, 4, 0.69); }
.halfBet-button { background-color: rgba(46, 47, 39, 0.29); color: rgba(237, 255, 4, 0.69); }

.controls-panel .secondary-buttons { display: flex; gap: 10px; margin-bottom: 15px; }
/* MODIFIED: Base style for secondary glass buttons */
.controls-panel .secondary-button {
    flex: 1;
    padding: 14px;
    border-radius: 8px;
    /* MODIFIED: Using border property for glass effect */
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* MODIFIED: Base glass background */
    background-color: rgba(58, 62, 76, 0.2);
    color: #a0a3af;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
    font-size: 16px;
    /* MODIFIED: Add backdrop filter */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


.controls-panel .place-bet-button {
    width: 100%;
    background-color: #28c96e;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 14px 20px;
    font-weight: bold;
    cursor: pointer; /* Default cursor for bet button */
    box-shadow: 0 4px 6px rgba(0,0,0,0.2), inset 0 -2px 0 rgba(0,0,0,0.2);
    transition: all 0.1s ease;
    font-size: 16px;
    position: relative; /* Added for spinner positioning */
    overflow: hidden; /* Added to clip spinner if it's too big */
    min-height: 50px; /* Explicit minimum height to prevent collapse */
    height: 50px; /* Fixed height for consistency */
    display: flex; /* Use flexbox for centering content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}
/* Style for the text inside the button */
.controls-panel .place-bet-button .bet-text {
    display: inline; /* Default state */
    /* Ensure text is above the spinner if they overlap */
    z-index: 1;
}

/* --- Rules Display Area --- */
.controls-panel .rules-display {
    margin-top: auto; /* Push rules to the bottom */
    padding-top: 15px;
    border-top: 1px solid #3a3e4c;
    font-size: 12px;
    color: #a0a3af;
    text-align: center;
    line-height: 1.6;
}
.controls-panel .rules-display p {
    margin-bottom: 5px;
}
.controls-panel .rules-display p:last-child {
    margin-bottom: 0;
}


/* --- Game Result Message --- */
.game-result { color: white; font-size: 32px; font-weight: bold; text-align: center; opacity: 0; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-shadow: 0 3px 6px rgba(0,0,0,0.5); position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%) translateY(20px); z-index: 50; min-height: 45px; background-color: rgba(0, 0, 0, 0.6); padding: 8px 20px; border-radius: 8px; pointer-events: none; visibility: hidden; }
.game-result.visible { opacity: 1; transform: translate(-50%, -50%) translateY(0); visibility: visible; }
.game-result.win { color: #2ecc71; }
.game-result.lose { color: #e74c3c; }
.game-result.push { color: #f4ad57; }
.game-result.bust { color: #e74c3c; }


/* --- Card Highlights --- */
.win-highlight { border-color: #2ecc71 !important; box-shadow: 0 0 15px 3px rgba(46, 204, 113, 0.7) !important; animation: winPulse 1.5s infinite; }
.lose-highlight { border-color: #e74c3c !important; box-shadow: 0 0 15px 3px rgba(231, 76, 60, 0.7) !important; animation: losePulse 1.5s infinite; }
.push-highlight { border-color: #e74c3c !important; box-shadow: 0 0 15px 3px rgba(231, 76, 60, 0.7) !important; animation: losePulse 1.5s infinite; }

/* --- Card Deck (Visual only) --- */
.card-deck { position: absolute; width: clamp(55px, 11vmin, 80px); height: clamp(77px, 15.4vmin, 112px); background-color: #3f8cff; border-radius: clamp(4px, 1vmin, 8px); top: 20px; right: 20px; transform: none; box-shadow: 0 4px 8px rgba(0,0,0,0.3), -5px 0 0 #3a7ee0, -10px 0 0 #356fcc; z-index: 1; }
.card-deck:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%); border-radius: inherit; }

/* --- Animations --- */
/* Define target transforms for stacking */

@keyframes dealCardAnimation {
    from {
        transform: translate(calc(150px + 50vw - 50%), -150px) scale(0.7) rotate(15deg); /* Start near top-right deck */
        opacity: 0;
        z-index: 100;
    }
    to {
        transform: translate(var(--tx), var(--ty)) scale(1) rotate(0deg); /* End at calculated stacked position */
        opacity: 1;
    }
}

.deal-animation {
    animation: dealCardAnimation 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes pulseTotal { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); background-color: #3f8cff; } }

/* Modified betButtonPulse: slightly subtler glow */
@keyframes betButtonPulse {
    0% { transform: scale(1); box-shadow: 0 0 8px 2px rgba(40, 201, 110, 0.4), inset 0 -2px 0 rgba(0,0,0,0.2); }
    50% { transform: scale(1.01); box-shadow: 0 0 15px 4px rgba(40, 201, 110, 0.6), inset 0 -2px 0 rgba(0,0,0,0.2); }
    100% { transform: scale(1); box-shadow: 0 0 8px 2px rgba(40, 201, 110, 0.4), inset 0 -2px 0 rgba(0,0,0,0.2); }
}


@keyframes winPulse { 0%, 100% { box-shadow: 0 0 15px 3px rgba(46, 204, 113, 0.6); } 50% { box-shadow: 0 0 25px 5px rgba(46, 204, 113, 0.9); } }
@keyframes losePulse { 0%, 100% { box-shadow: 0 0 15px 3px rgba(231, 76, 60, 0.6); } 50% { box-shadow: 0 0 25px 5px rgba(231, 76, 60, 0.9); } }

/* New keyframe animation for button press */
@keyframes betPressAnimation {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 6px rgba(0,0,0,0.2), inset 0 -2px 0 rgba(0,0,0,0.2);
    }
    50% {
        transform: scale(0.98); /* Slightly shrink */
        box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 -1px 0 rgba(0,0,0,0.2); /* Deeper shadow for "pressed" look */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 6px rgba(0,0,0,0.2), inset 0 -2px 0 rgba(0,0,0,0.2);
    }
}

/* Add the loading spinner styles */
.lds-circle,
.lds-circle div {
    box-sizing: border-box;
}
.lds-circle {
    display: inline-block;
    transform: translateZ(1px);
    /* Initially hidden by default, shown via .loading class */
    display: none;
}
.lds-circle > div {
    display: inline-block;
    /* Adjust size to fit button better */
    width: 30px; /* Match the size of the overall lds-circle when active */
    height: 30px; /* Match the size of the overall lds-circle when active */
    margin: 0; /* Remove default margin */
    background: currentColor; /* Use button's current color */
    border-radius: 50%;
    animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
@keyframes lds-circle {
    0%, 100% {
        animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
    }
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(1800deg);
        animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
    }
    100% {
        transform: rotateY(3600deg);
    }
}

/* Style for when the button is loading */
.place-bet-button.loading .bet-text {
    display: none; /* Hide the text */
}

.place-bet-button.loading .lds-circle {
    display: block; /* Show the spinner */
    position: absolute; /* Position relative to the button */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px; /* Set the overall size of the spinner container */
    height: 30px; /* Set the overall size of the spinner container */
}

/* Ensure the button is not clickable during loading */
.place-bet-button.loading {
    cursor: default; /* Change cursor to default, not not-allowed for loading */
    pointer-events: none; /* Prevents clicks on the button while loading */
    opacity: 0.8; /* Slightly dim it */
    animation: none !important; /* Stop other animations like pulse on load */
}


.pulse-total { animation: pulseTotal 0.4s ease forwards; }


/* --- Button Hover/Active States --- */
/* Base hover for available buttons */
.controls-panel .action-button:not(.unavailable):hover,
.controls-panel .secondary-button:not(.unavailable):hover {
    filter: brightness(1.2); /* Brighter instead of changing bg color */
    cursor: pointer; /* Explicitly set cursor */
}

.controls-panel .multiplier:not(.unavailable):hover,
.controls-panel .place-bet-button:not(.unavailable):hover {
    transform: translateY(-2px);
    filter: brightness(1.15);
    box-shadow: 0 6px 10px rgba(0,0,0,0.3), inset 0 -2px 0 rgba(0,0,0,0.1);
    cursor: pointer; /* Explicitly set cursor */
}

.controls-panel .place-bet-button:not(.unavailable):hover {
    box-shadow: 0 6px 10px rgba(0,0,0,0.3), inset 0 -2px 0 rgba(0,0,0,0.2);
}

.controls-panel .multiplier:not(.unavailable):hover { background-color: #4a4e5c; }

/* Base active for available buttons */
.controls-panel .action-button:not(.unavailable):active,
.controls-panel .secondary-button:not(.unavailable):active {
    transform: translateY(1px);
    filter: brightness(0.9);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

.controls-panel .multiplier:not(.unavailable):active {
    transform: translateY(1px);
    filter: brightness(0.9);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 -1px 0 rgba(0,0,0,0.1);
}

/* Apply the new press animation to the place-bet-button when active and not unavailable/loading */
.controls-panel .place-bet-button:not(.unavailable):active:not(.loading) {
    animation: betPressAnimation 0.15s ease forwards; /* Short, snappy animation */
}

.controls-panel .multiplier:not(.unavailable):active { background-color: #5a5e6c; }


/* --- Remove button highlights / focus outline --- */
button,
button:focus,
button:active,
button:focus-visible,
button:focus-within,
.blue-button,
.blue-button:focus,
.blue-button:active,
.blue-button:focus-visible,
.blue-button:focus-within,
.action-button,
.action-button:focus,
.action-button:active,
.action-button:focus-visible,
.action-button:focus-within,
.secondary-button,
.secondary-button:focus,
.secondary-button:active,
.secondary-button:focus-visible,
.secondary-button:focus-within,
.place-bet-button,
.place-bet-button:focus,
.place-bet-button:active,
.place-bet-button:focus-visible,
.place-bet-button:focus-within {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* --- UNAVAILABLE (formerly disabled) state --- */
/* Apply this class to elements that should look unavailable */
.controls-panel .action-button.unavailable,
.controls-panel .secondary-button.unavailable,
.controls-panel .multiplier.unavailable,
.controls-panel .bet-input.unavailable { /* Apply to input and multipliers if they should also look unavailable */
    opacity: 0.5; /* Visually dim */

}

/* The place-bet-button should NOT use .unavailable for low balance, only .loading when game starts.
   When game is in progress, disableAllControls() will make it unavailable.
   So, we removed '.place-bet-button.unavailable' from the block above.
   Its styling when unavailable during game will come from .place-bet-button.loading or the general logic in enableGameControls/disableAllControls. */

/* Specific styling for bet input when unavailable */
.controls-panel .bet-input.unavailable {
    border-color: #3a3e4c; /* Maintain standard border color for input */
}


/* --- Toast Notifications --- */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast-notification {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 12px 16px;
    min-width: 250px;
    max-width: 300px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Initial state for animation */
    transform: translateX(120%); /* Starts off-screen to the right */
    animation: slideIn 0.3s ease-out forwards; /* Apply slide-in animation */
    transition: all 0.8s ease; /* Smooth transition for other properties */
}

.toast-notification.error {
    background: rgba(231, 76, 60, 0.15);
    border-left: 3px solid #e74c3c;
}

.toast-notification.success {
    background: rgba(46, 204, 113, 0.15);
    border-left: 3px solid #2ecc71;
}

.toast-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.toast-message {
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    cursor: pointer;
    padding: 0 0 2px 10px;
    line-height: 1;
    transition: color 0.2s ease;
}

.toast-close:hover {
    color: #fff;
}

/* Class to apply for fade-out animation */
.fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

/* Keyframe for slide-in animation */
@keyframes slideIn {
    from {
        transform: translateX(120%); /* Starts off-screen to the right */
    }
    to {
        transform: translateX(0%); /* Ends on-screen */
    }
}

/* Keyframe for fade-out animation */
@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateX(120%); /* Slides off-screen to the right while fading */
    }
}


.hidden { display: none; }

/* --- Responsive Design Adjustments --- */
@media (max-width: 1200px) {
    /* Dealer Cards - Dynamic Size */
    .dealer-cards .card {
        width: clamp(var(--min-dealer-card-width), 11vmin, 80px);
        height: clamp(var(--min-dealer-card-height), 15.4vmin, 112px);
        left: -20px;
    }

    html, body { overflow: auto; } /* Allow scrolling */
    .main-content { flex-direction: column; padding: 10px; gap: 15px; align-items: stretch; height: auto; overflow: visible; }
    .controls-panel { width: 100%; order: 2; flex-shrink: 0; margin-top: 15px; }
    .game-container { order: 1; min-height: 450px; flex-shrink: 0; margin: 0; /* Remove margin */ border-radius: 8px; }
    .dealer-area {
        position: relative;
        padding: 8%;
        max-width: 50%;
        left: 1%;
        margin-top: 1%;
        border-radius: 8px 8px 8px 8px;
    }
    .player-area { margin: 0; border-radius: 0; align-items: center;} /* Stack hands vertically & center */
    .player-hand { max-width: 80%; flex-basis: auto; min-width: 250px; } /* Allow hands to take more width */
    .card-deck { display: none; }
    .game-result { font-size: 24px; top: 50%; }
    .game-footer { padding: 10px 15px; margin: 0; border-radius: 0 0 8px 8px;}
}

@media (max-width: 900px) {
    /* Dealer Cards - Dynamic Size */
    .dealer-cards .card {
        width: clamp(var(--min-dealer-card-width), 11vmin, 80px);
        height: clamp(var(--min-dealer-card-height), 15.4vmin, 112px);
        left: -20px;
    }

    html, body { overflow: auto; } /* Allow scrolling */
    .main-content { flex-direction: column; padding: 10px; gap: 15px; align-items: stretch; height: auto; overflow: visible; }
    .controls-panel { width: 100%; order: 2; flex-shrink: 0; margin-top: 15px; }
    .game-container { order: 1; min-height: 450px; flex-shrink: 0; margin: 0; /* Remove margin */ border-radius: 8px; }
    .dealer-area {
        position: relative;
        padding: 10%;
        max-width: 100%;
        left: 1%;
        margin-top: 1%;
        border-radius: 8px 8px 8px 8px;
    }
    .player-area {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center; /* This centers the flex items (player-hand divs) when they all fit on one line */
        align-items: center;    /* This vertically centers items within a flex line */
        /* ... other properties ... */
        padding: 20px 0; /* Padding for the entire playerArea */
        gap: clamp(10px, 2vmin, 20px); /* Space between player-hand divs */

    }    .player-hand { max-width: 80%; flex-basis: auto; min-width: 250px; align-self: center; } /* Allow hands to take more width */
    .card-deck { display: none; }
    .game-result { font-size: 24px; top: 50%; }
    .game-footer { padding: 10px 15px; margin: 0; border-radius: 0 0 8px 8px;}
}

@media (max-width: 650px) {
    /* Dealer Cards - Dynamic Size */
    .dealer-cards .card {
        width: clamp(var(--min-dealer-card-width), 11vmin, 80px);
        height: clamp(var(--min-dealer-card-height), 15.4vmin, 112px);
        left: -20px;
        scale: 0.8;
        top: -8px;
    }

    html, body { overflow: auto; } /* Allow scrolling */
    .main-content { flex-direction: column; padding: 10px; gap: 15px; align-items: stretch; height: auto; overflow: visible; }
    .controls-panel { width: 100%; order: 2; flex-shrink: 0; margin-top: 15px; }
    .game-container { order: 1; min-height: 450px; flex-shrink: 0; margin: 0; /* Remove margin */ border-radius: 8px; }
    .dealer-area {
        position: relative;
        padding: 10%;
        max-width: 100%;
        left: 1%;
        margin-top: 3%;
        border-radius: 8px 8px 8px 8px;
    }
    .player-area {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center; /* This centers the flex items (player-hand divs) when they all fit on one line */
        align-items: center;    /* This vertically centers items within a flex line */
        /* ... other properties ... */
        padding: 20px 0; /* Padding for the entire playerArea */
        gap: clamp(10px, 2vmin, 20px); /* Space between player-hand divs */

    }
    .player-hand { max-width: 80%; flex-basis: auto; min-width: 250px; } /* Allow hands to take more width */
    .card-deck { display: none; }
    .game-result { font-size: 24px; top: 50%; }
    .game-footer { padding: 10px 15px; margin: 0; border-radius: 0 0 8px 8px;}
}

@media (max-width: 450px) {
    /* Dealer Cards - Dynamic Size */
    .dealer-cards .card {
        width: clamp(var(--min-dealer-card-width), 11vmin, 80px);
        height: clamp(var(--min-dealer-card-height), 15.4vmin, 112px);
        left: -20px;
        scale: 0.6;
        top: -15px;
    }

    html, body { overflow: auto; } /* Allow scrolling */
    .main-content { flex-direction: column; padding: 10px; gap: 15px; align-items: stretch; height: auto; overflow: visible; }
    .controls-panel { width: 100%; order: 2; flex-shrink: 0; margin-top: 15px; }
    .game-container { order: 1; min-height: 450px; flex-shrink: 0; margin: 0; /* Remove margin */ border-radius: 8px; }
    .dealer-area {
        position: relative;
        padding: 12%;
        max-width: 100%;
        left: 1%;
        margin-top: 5%;
        border-radius: 8px 8px 8px 8px;
    }
    .player-hand { max-width: 80%; flex-basis: auto; min-width: 250px; } /* Allow hands to take more width */
    .card-deck { display: none; }
    .game-result { font-size: 24px; top: 50%; }
    .game-footer { padding: 10px 15px; margin: 0; border-radius: 0 0 8px 8px;}
}