@font-face {
    font-family: 'SN Pro';
    src: url('fonts/SNPro/SNPro-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'SN Pro';
    src: url('fonts/SNPro/SNPro-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'SN Pro';
    src: url('fonts/SNPro/SNPro-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

:root {
    /* Colors - Target UI Palette */
    --bg-color: #0d0d0d;
    /* Updated to match body bg */
    --surface-color: #121212;
    --surface-alt: #1c1c1e;
    --text-primary: #ffffff;
    --text-secondary: #8e8e93;
    --accent-color: #ffd60a;
    --card-bg: #ffffff;
    --card-text: #000000;
    --suit-red: #d94541;
    /* Muted red */
    --suit-black: #2c2c2c;
    /* Dark gray */

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-s: 8px;
    --spacing-m: 16px;
    --spacing-l: 24px;
    --spacing-xl: 32px;

    /* Borders & Shadows */
    --radius-xs: 4px;
    --radius-s: 14px;
    --radius-m: 22px;
    --radius-l: 32px;
    --radius-full: 9999px;
    --shadow-premium: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.4);

    --font-family: 'SN Pro', -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #0d0d0d;
    /* Dark overlay to mute the icons and create 'dim paper' effect */
    background-image: linear-gradient(rgba(13, 13, 13, 0.9), rgba(13, 13, 13, 0.9)), url('bg-texture.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--text-primary);
    font-family: var(--font-family);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

#app {
    width: 100%;
    max-width: 480px;
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
        "header"
        "opponents"
        "table"
        "controls"
        "player";
    padding: 0 var(--spacing-m);
    gap: var(--spacing-s);
    overflow: hidden;
    /* Prevent global scroll */
}

/* Home Screen - Remove Gradient, match Game BG */
.home-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0d0d0d;
    /* Flat color */
    background-image: url('bg-texture.png');
    /* Keep texture if desired, or remove */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-l);
    text-align: center;
}

.header-actions {
    grid-area: header;
}

.opponents-bar {
    grid-area: opponents;
}

.table-area {
    grid-area: table;
}

/* Controls Area padding */
.controls-area {
    grid-area: controls;
    padding: 0 16px;
    /* Matched 16px gutter */
    width: 100%;
    box-sizing: border-box;
}

.player-area {
    grid-area: player;
}

/* Status Bar & Header */
.status-bar {
    display: flex;
    justify-content: space-between;
    padding: 14px var(--spacing-s) 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.status-icons {
    display: flex;
    gap: 5px;
    font-size: 14px;
}

.header-actions {
    padding: var(--spacing-s) 16px 0 16px;
    /* Matched 16px gutter */
}

.btn-icon {
    /* Matched Style */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);

    color: var(--text-primary);
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-left: 0px;
    /* Align with app padding */
    font-family: inherit;
    padding-left: 0;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

/* Consolidating .header-actions rules */

.btn-icon:disabled,
.btn-icon.disabled {
    /* Darker glass style - no opacity overlay */
    background: rgba(60, 60, 60, 0.1);
    border-color: rgba(60, 60, 60, 0.15);
    color: rgba(255, 255, 255, 0.4);
    cursor: default;
    pointer-events: none;
    transform: none;
}

/* Opponent Bar */
.opponents-bar {
    display: flex;
    justify-content: space-between;
    width: calc(100% + 2 * var(--spacing-m));
    /* Extend beyond #app padding */
    margin-left: calc(-1 * var(--spacing-m));
    /* Break out of parent padding */
    overflow-x: auto;
    overflow-y: visible;
    padding: 5px 16px 100px 16px;
    /* Internal padding */
    gap: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.opponents-bar::-webkit-scrollbar {
    display: none;
}

/* Compact Opponent */
.opponent {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    /* Slightly tighter radius */
    padding: 12px 6px;
    /* Increased top/bottom padding as requested */
    /* Tighter padding */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    min-height: 90px;
    /* Reduced from 110px */
    height: auto;
    overflow: visible;
}

.glow-pill {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60%;
    background: rgba(255, 215, 0, 0.12);
    /* Subtle glow through glass */
    filter: blur(20px);
    border-radius: 50%;
    z-index: 0;
    /* Bring forward (was -1) */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.opponent.active .glow-pill {
    opacity: 1;
}

.opponent.folded {
    min-height: 100px;
}

.opponent.folded .opponent-avatar,
.opponent.folded .opponent-name,
.opponent.folded .opponent-chips {
    opacity: 0.5;
}

.opponent-avatar {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    background: transparent;
    /* Removed background circles */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    /* Slightly larger emojis */
    position: relative;
    transition: transform 0.2s ease;
}

.avatar-img-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Opponent Showdown Hand */
.opponent-hand-container {
    position: absolute;
    bottom: -70px;
    /* Moved down (was -90px? No, wait. 0 is bottom edge. -90 is below. User said "near top"? Relative to what? Ah, assuming top of screen. Opponent is at top. If card is absolute to opponent, bottom -90 puts it OUTSIDE below. Let's try pushing it further down by increasing negative value if it was too high. */
    /* Actually, if it's "near the top of the screen", it might be that the container isn't relative positioned?
       .opponent has position: relative. So bottom: -90px should be 90px below the opponent card.
       User says "Showdown cards appear near the top of the screen instead of just below the opponent profile cards".
       This suggests they might be overlapping the profile card?
       Let's try bottom: -110px to push them further down away from the profile card. */
    bottom: -115px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    max-width: 120%;
    /* Constrain width */
    width: max-content;
}

/* User's Hand Style Mini-Stack */
.mini-hand-stack {
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.6);
    /* Scale down the whole stack */
    transform-origin: top center;
}

.mini-card {
    /* Use exact same proportions as player card */
    width: 10em;
    height: 14em;
    font-size: 10px;
    /* Base size */
    margin-left: -6em;
    /* Huge negative margin for stacking */
    transform-origin: center bottom;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    /* Shadow for depth */
}

/* Fan effect for mini-stack */
.mini-hand-stack .mini-card:nth-child(1) {
    transform: rotate(-5deg) translateY(0px);
    margin-left: 0;
    z-index: 1;
}

.mini-hand-stack .mini-card:nth-child(2) {
    transform: rotate(5deg) translateY(-5px);
    z-index: 2;
}

.opponent-hand-container .card:hover {
    transform: translateY(-10px) scale(1.1);
    z-index: 101;
}



/* Turn Indicator (Triangle) */
/* Turn Indicator (Downward Triangle) */
.turn-indicator {
    display: none;
}

.dealer-button {
    position: absolute;
    bottom: 0;
    /* Positioned at bottom right of avatar */
    right: -4px;
    background: white;
    color: black;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border: none;
    /* Cleaner look */
}

.opponent-name {
    font-size: 11px;
    color: #888;
    /* Darker grey */
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* Fix: Move bets below card */
.opponent-bet-container {
    position: absolute;
    bottom: -40px;
    /* Below card */
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    z-index: 50;
    pointer-events: none;
}

.opponent-chips {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-top: 2px;
    /* Add space */
}

.opponent-bet-bubble {
    margin-top: 8px;
    background: rgba(255, 215, 0, 0.15);
    /* 15% Yellow */
    color: #ffd700;
    /* Bright Yellow Text */
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* User Bet Bubble - Specific Positioning */
.user-bet-container {
    height: 0;
    /* Don't take flow space */
    position: absolute;
    top: -45px;
    /* Just above controls */
    left: 20px;
    /* Left aligned */
    width: 100%;
    pointer-events: none;
    display: flex;
    justify-content: flex-start;
    padding-left: 0;
    /* Align with call button */
    z-index: 20;
    /* Ensure visible above everything */
}

.user-bet-bubble {
    position: relative;
    /* Reset absolute from shared rule overrides */
    bottom: auto;
    left: auto;
    transform: none;
    background: rgba(255, 215, 0, 0.15);
    /* Match opponents */
    border: 1px solid rgba(255, 215, 0, 0.2);
    color: #ffd700;
    /* Yellow text */
    min-width: 40px;
    height: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    /* Match pot size */
    font-weight: 700;
    padding: 0 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Table Area */
.table-area {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-bottom: var(--spacing-l);
    /* Push table up slightly */
}

.table-center {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Align pot and cards to the right side if needed, but centering is better */
    width: fit-content;
    margin: 0 auto;
}

.community-cards {
    display: flex;
    width: 100vw;
    /* Use viewport width */
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    /* Center using viewport */
    justify-content: center;
    margin-bottom: var(--spacing-m);
    flex: 1;
    overflow: visible;
    /* Allow cards to display */
}

/* Community Card Scale - Fill Width logic */
.community-cards .card {
    font-size: clamp(6px, 2.5vw, 11px);
    /* User requested wider */
    width: 10em;
    height: 14em;
    margin-right: -2em;
    /* Tighter overlap to fit 5 cards */
    flex-shrink: 0;
    /* Don't shrink below ratio */
    transition: margin-right 0.3s ease;
}

/* Adjust overlap for last card */
.community-cards .card:last-child {
    margin-right: 0;
}

.pot-display {
    display: flex;
    justify-content: flex-end;
    /* Keep right aligned */
    align-items: center;
    width: auto;
    min-width: 80px;
    /* SMALLER PILL */
    padding: 4px 14px;
    font-size: 18px;
    /* SMALLER FONT */
    font-weight: 600;
    color: #fff;
}

.pot-display::before {
    content: '';
}

/* Card Styling */
/* 
    UNIFIED CARD SYSTEM 
    Base size is set via font-size on parent/element.
    All internal dimensions use 'em' to scale proportionally.
    Standard Width: 10em
    Standard Height: 14em (2.5/3.5 aspect ratio)
*/
.card {
    width: 10em;
    height: 14em;
    background: var(--card-bg);
    border-radius: 2em;
    display: flex;
    flex-direction: column;
    padding: 0.5em;
    /* scalable padding */
    color: var(--card-text);
    border: 0.9em solid #fff;
    position: relative;
    box-shadow: 0 0.2em 0.8em rgba(0, 0, 0, 0.4);
}

.card.face-down,
.card.face-down-initial {
    background-color: #ffffff;
    /* Continuous Diagonal Stripes */
    background-image: repeating-linear-gradient(45deg,
            transparent,
            transparent 6px,
            #333333 6px,
            #333333 8.5px);
    background-size: auto;
    background-repeat: repeat;
    position: relative;
    overflow: hidden;
    border: 0.9em solid #fff;
    /* Ensure border matches white context */
}

/* Suit Masking Fix (Div instead of Img) */
/* Suit Icon Positioning */
.card-suit,
.suit-icon {
    position: absolute;
    bottom: 1.2em;
    /* Bottom spacing - Anchored low */
    left: .5em;
    display: block !important;
    z-index: 1;
    pointer-events: none;
}

/* Overlay for the swipe reveal animation */
.card-back-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    /* Continuous Diagonal Stripes */
    background-image: repeating-linear-gradient(45deg,
            transparent,
            transparent 6px,
            #333333 6px,
            #333333 8.5px);
    z-index: 2;
    transition: opacity 0.2s ease;
}

.card.reveal .card-back-overlay {
    /* Fast fade out */
    opacity: 0;
    visibility: hidden;
}

.card .card-value,
.card .card-suit,
.card .suit-icon {
    opacity: 0;
    transform: translateY(8px);
    /* Start fading in AFTER back has faded out (0.25s delay) */
    transition: opacity 0.3s ease 0.25s, transform 0.3s ease 0.25s;
}

.card.reveal .card-value,
.card.reveal .card-suit,
.card.reveal .suit-icon {
    opacity: 1;
    transform: translateY(0);
}

.card-value {
    font-size: 3.8em;
    /* Scaled to match player proportion everywhere */
    font-weight: 500;
    line-height: 1;
    margin-top: 0.15em;
    margin-left: 0.15em;
}

/* Eliminated Player Style */
.opponent.eliminated {
    opacity: 0.3;
    filter: grayscale(1);
    pointer-events: none;
}

.opponent.eliminated .glow-pill {
    display: none;
}

/* Card Coloring */
/* Suits are colored via their SVG files, Rank via color */


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

.card.black {
    color: #2b2b2b;
}

.card.red {
    color: #ff5555;
    background-color: white;
}

.card-suit,
.suit-icon {
    width: 3.5em;
    height: 3.5em;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent !important;
}

/* Action Controls Area */
.controls-area {
    position: relative;
    padding: 0 0px;
    /* Restore side padding */
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Action Bar Layout */
.action-bar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% + 2 * var(--spacing-m));
    /* Extend beyond #app padding */
    margin-left: calc(-1 * var(--spacing-m));
    padding: 0 16px;
    /* Internal padding */
    gap: 8px;
    position: relative;
    pointer-events: none;
    box-sizing: border-box;
}

/* Main Controls */
.controls {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
    flex: 1;
    /* Take available space */
    pointer-events: auto;
    /* Re-enable clicks */
}

/* Extra Controls (Skip) */
.extra-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: auto;
    /* Re-enable clicks */
    z-index: 200;
    /* Ensure on top */
}

/* Liquid Glass Button Style */
.btn {
    height: 54px;
    /* Glass Effect */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-radius: 27px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0 var(--spacing-l);
    font-family: 'SN Pro', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    /* Ensure clickable inside pointer-events: none containers */
}

.btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn:active {
    transform: translateY(1px);
    background: rgba(255, 255, 255, 0.02);
}

.btn:disabled,
.btn.disabled {
    /* Darker glass style - no opacity overlay */
    background: rgba(60, 60, 60, 0.1);
    border-color: rgba(60, 60, 60, 0.15);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(60, 60, 60, 0.1);
    color: rgba(255, 255, 255, 0.4);
    cursor: default;
    pointer-events: none;
}

.btn-primary {
    flex: 1;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-secondary {
    flex: 1;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    /* Matched to Primary */
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Matched to Primary */
    color: #ff6b6b;
    /* Red Text */
}

.btn-secondary:hover {
    background: rgba(217, 69, 65, 0.15);
    /* Red tint on hover only */
    border-color: rgba(217, 69, 65, 0.5);
    box-shadow: 0 0 15px rgba(217, 69, 65, 0.2);
}

.controls .btn:not(.btn-round) {
    flex: 1;
    /* Make all play buttons (except round ones) fill width */
    width: 100%;
}

.btn-round {
    width: 54px;
    height: 54px;
    min-width: 54px;
    /* Ensure circular */
    border-radius: 50%;
    padding: 0;
    font-size: 24px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    /* Ensure material consistency (Glass Effect from Player Profile) */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0.74px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* Subtle shadow */
    transition: all 0.2s ease;
    pointer-events: auto;
}

.btn-round:disabled,
.btn-round.disabled {
    /* Darker glass style - no opacity overlay */
    background: rgba(60, 60, 60, 0.1);
    border-color: rgba(60, 60, 60, 0.15);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    color: rgba(255, 255, 255, 0.4);
    cursor: default;
    pointer-events: none;
}

.btn-small {
    padding: var(--spacing-xs) var(--spacing-s);
    font-size: 13px;
    border-radius: var(--radius-s);
    min-width: 55px;
    height: 36px;
    /* Standard glass style */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.btn-small:disabled,
.btn-small.disabled {
    /* Darker glass style - no opacity overlay */
    background: rgba(60, 60, 60, 0.1);
    border-color: rgba(60, 60, 60, 0.15);
    color: rgba(255, 255, 255, 0.4);
    cursor: default;
    pointer-events: none;
}


/* Raise Preset Popup */
/* Raise Preset Popup - Pill Shape */
/* Raise Preset Popup - Pill Shape */
.raise-options {
    position: absolute;
    bottom: 100%;
    right: 20px;
    /* Align roughly with raise button which is on the right */
    left: auto;
    transform: none;
    width: auto;
    min-width: unset;
    /* Let content dictate */
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 100px;
    padding: 6px;
    /* Reduced padding */
    display: flex;
    gap: 8px;
    /* Gap handles the spacing */
    justify-content: center;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    /* Ensure moves above everything */
    margin-bottom: 24px;
    pointer-events: auto;
    /* Force clickable */
}

.raise-preset-btn {
    width: auto;
    min-width: 50px;
    height: 36px;
    padding: 0 12px;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    /* Pill buttons */
    color: #fff;
    font-family: var(--font-family);
    /* Correct font */
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.raise-preset-btn:active {
    background: rgba(255, 255, 255, 0.2);
}

.raise-preset-btn:disabled,
.raise-preset-btn.disabled {
    /* Darker glass style - no opacity overlay */
    background: rgba(60, 60, 60, 0.1);
    border-color: rgba(60, 60, 60, 0.15);
    color: rgba(255, 255, 255, 0.4);
    cursor: default;
    pointer-events: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Pot Pill Targeting */
/* Pot Pill Targeting */
#pot-display,
.pot-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    padding: 10px 24px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    font-size: 18px;
    color: #ffd700;
    font-weight: 700;
    margin-bottom: 24px;
    width: auto;
    /* Prevent full width */
    min-width: 0px;
    /* Minimum width for stability */
}

.pot-label {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 600;
}

#raise-val-label {
    color: #fff;
    font-size: 14px;
}

.btn-confirm {
    width: 100%;
    background: #27ae60;
    /* specific confirm color or keep generic */
    justify-content: center;
}


.btn:active {
    transform: scale(0.97);
    background: #1c1c1e;
}

/* Removed duplicate .btn:disabled - consolidated at line 716 */

/* Player Area */
.player-area {
    /* Manual gutter matching */
    padding: 0 16px;
    padding-bottom: var(--spacing-l);
    box-sizing: border-box;
    width: 100%;
    /* Max width constraint to match table/controls */
    max-width: 480px;
    margin: 0 auto;
}

.player-hand-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    height: 180px;
    /* Reduced from 220px */
    gap: 0px;
    max-width: 100%;
}

/* Explicit container for player cards to ensure space */
/* Explicit container for player cards to ensure space */
.player-cards {
    width: 260px;
    /* 10em + 6em overlap (approx) + padding */
    flex-shrink: 0;
    /* Cannot shrink */
    position: relative;
    display: flex;
    height: 100%;
}

/* Player Cards Scale: ~155px width. 1em = 15.5px */
.player-cards .card {
    font-size: 15.5px;
    width: 10em;
    height: 14em;
    position: absolute;
    bottom: 0;
    /* Reset borders as they are handled by main class, unless override needed */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.player-cards .card:first-child {
    left: 0;
    z-index: 1;
    /* Custom shadow for player can stay px or em */
    box-shadow: 0 0.6em 2em rgba(0, 0, 0, 0.5);
}

.player-cards .card:last-child {
    left: 6em;
    /* Reduced overlap from 6em to 4em as requested */
    z-index: 2;
    box-shadow: -0.6em 0 0.8em rgba(0, 0, 0, 0.3);
}

/* Update Profile Wrapper Layout */
/* Liquid Glass Profile Card */
.player-info-wrapper {
    position: relative;
    width: auto;
    flex: 1;
    height: 100%;
    overflow: hidden;
    /* Hide stats panel until swipe */
    border-radius: 32px;
    /* Match inner radius to clip correctly */
    box-shadow: var(--shadow-premium);
}

.player-profile-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Glass Effect */
    background: rgba(255, 255, 255, 0.1);
    /* Uniform 5% opacity */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

    border-radius: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0;
    /* Increased padding (spacing-l) */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 2;
}

.player-hand-label {
    color: #888;
    font-size: 14px;
    font-weight: 500;
}

.player-avatar-large {
    font-size: 50px;
    position: relative;
}

.player-chips-large {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
}

/* User Bet Bubble */
.user-bet-bubble {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 24px;
    /* Added spacing above buttons */
}

/* Table Center Container */
.table-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.community-cards {
    justify-content: center;
}

/* Player Stats Panel & Swipe Interaction */




.stats-panel {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    border: 1.3px solid #333;
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 3;
}

.player-hand-container.stats-active .player-profile-card {
    transform: translateY(-100%);
}

.player-hand-container.stats-active .stats-panel {
    transform: translateY(-100%);
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

#stat-win-pct {
    color: #ff5f5f;
}

#stat-tie-pct {
    color: #fff;
}

/* Winner Toast */
.winner-toast {
    position: fixed;
    bottom: 220px;
    /* Aligned with player bet area */
    left: 50%;
    /* Center horizontally */
    transform: translateX(-50%) translateY(20px);
    background: var(--accent-color);
    color: #000;
    padding: var(--spacing-s) var(--spacing-m);
    border-radius: var(--radius-full);
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 10px 25px rgba(255, 214, 10, 0.4);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.winner-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Opponent Showdown Cards */
.opponent-hand {
    display: flex;
    justify-content: center;
    /* REMOVED absolute positioning here, handled by wrapper */
    margin-top: 5px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    gap: 4px;
    pointer-events: none;
}



/* Opponent Hand Scale: ~60px width. 1em = 6px */
.opponent-hand .card {
    font-size: 6px;
    /* Scales entire card including border/padding */
    margin-left: -5em;
    /* Clean stack overlap relative to scaled size */
    box-shadow: -0.5em 0 1em rgba(0, 0, 0, 0.5);
    position: relative;
    transition: transform 0.3s ease;

    /* Proportional Fixes for Small Scale */
    border-radius: 1em;
    /* Less rounded corners (was 2em) */
    border-width: 0.6em;
    /* Thinner border (was 0.9em) */
}

.opponent-hand .card:first-child {
    margin-left: 0;
}

.opponent-hand .card:hover {
    transform: translateY(-2em);
    z-index: 10;
}

.opponent-hand .card .card-value {
    font-size: 3.8em;
    /* Same as player cards (3.8em) */
    font-weight: 500;
    line-height: 1;
    margin-top: 0.15em;
    margin-left: 0.15em;
}

.opponent-hand .card .suit-icon {
    /* Match player/community card styling */
    width: 3.5em;
    height: 3.5em;
    bottom: 1.2em;
    left: 0.5em;
}

/* ================================================
   GAME START SEQUENCE STYLES
   ================================================ */

/* Start Button Overlay */
.start-controls {
    display: flex;
    justify-content: center;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 0 20px;
    box-sizing: border-box;
    transition: opacity 0.5s ease;
    pointer-events: none;
    /* Allow clicks through empty space */
}

/* Blur Effect for Fast Forward */
.blur-active {
    filter: blur(4px);
    transition: filter 0.3s ease-out;
    pointer-events: none;
    /* Prevent clicks while blurred */
}

.start-controls.fade-out {
    opacity: 0;
    pointer-events: none;
}

.btn-start {
    width: 100%;
    height: 60px;
    /* Standard Glass Style (No Yellow) */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, background 0.2s ease;
    pointer-events: auto;
    /* Re-enable clicks for the button */
}

.btn-start:hover {
    transform: scale(1.02);
    background: rgba(255, 255, 255, 0.15);
}

.btn-start:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.05);
}

/* Controls State Classes */
.controls.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.controls.controls-disabled {
    pointer-events: none;
    transition: all 0.3s ease;
}

.controls.controls-disabled .btn:disabled,
.controls.controls-disabled .btn.disabled {
    /* Darker glass style for disabled controls */
    background: rgba(60, 60, 60, 0.1);
    border-color: rgba(60, 60, 60, 0.15);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(60, 60, 60, 0.1);
    color: rgba(255, 255, 255, 0.4);
    cursor: default;
}

.controls.visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    filter: none;
    transition: all 0.3s ease;
}

.player-cards .card.face-down-initial .card-value,
.player-cards .card.face-down-initial .suit-icon {
    opacity: 0;
}

.player-cards .card.face-down-initial .card-back-overlay {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
    visibility: visible;
}

/* Animations */
/* Flying Chip */
.flying-chip {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #ffcc00;
    border-radius: 50%;
    border: 2px dashed #b38f00;
    z-index: 50;
    pointer-events: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.6s ease;
}

/* Player Action Text Overlay */
.action-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 20;
    /* Above card content */
    opacity: 0;
    transition: opacity 0.3s ease;
    /* Removed background/scrim as requested - it's now just text + dimmed avatar */
}

.action-overlay.visible {
    opacity: 1;
}

.action-text {
    color: #fff;
    font-size: 14px;
    /* Slightly larger */
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 1);
    /* Strong shadow for readability */
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: rgba(0, 0, 0, 0.4);
    /* Small pill background for text only */
    padding: 2px 8px;
    border-radius: 4px;
}

.action-overlay.visible .action-text {
    transform: scale(1);
}

/* Dim Avatar on Action */
.player-avatar-large {
    transition: opacity 0.3s ease;
}

.player-avatar-large.dimmed {
    opacity: 0.3;
}

.opponent-avatar {
    transition: opacity 0.3s ease, transform 0.2s ease;
}

.opponent-avatar.dimmed {
    opacity: 0.3;
}

/* End of File */

/* Fix: Avatar Dimming */
.dimmed {
    opacity: 0.3 !important;
    filter: grayscale(100%);
    transition: opacity 0.3s ease;
}

/* Fix: Fast Forward Clickability */
#fast-forward-btn {
    pointer-events: auto !important;
    z-index: 2000 !important;
    /* Above everything */
    position: relative;
    /* Ensure stacking context */
}

/* --- Home Screen Styles --- */

.home-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--spacing-l);
}

.home-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 400px;
    gap: var(--spacing-xl);
}

.game-title {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -2px;
    background: linear-gradient(180deg, #fff 0%, #aaa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: -10px;
    text-align: center;
}

.subtitle {
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--accent-color);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: center;
    opacity: 0.8;
}

.resume-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transform: translateY(0);
    transition: all 0.3s ease;
}

.resume-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 215, 0, 0.2);
}

.resume-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.resume-time {
    color: var(--accent-color);
}

.resume-stats {
    display: flex;
    gap: 16px;
}

.resume-stat-box {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.stat-label {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 4px;
    font-weight: 600;
}

.btn-large {
    width: 100%;
    height: 60px;
    border-radius: 30px;
    font-size: 18px;
    letter-spacing: 1px;
}

.btn-resume {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, background 0.2s ease;

    /* Fix Squashed Look */
    height: 54px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.btn-resume:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.02);
}

.btn-new-game {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.app-version {
    position: absolute;
    bottom: 20px;
    color: rgba(255, 255, 255, 0.2);
    font-size: 12px;
}

.hidden {
    display: none !important;
}

/* Chip Animation */
.flying-chip {
    position: fixed;
    width: 20px;
    height: 20px;
    background: #ffd700;
    border-radius: 50%;
    color: #000;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #b8860b;
    z-index: 1000;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.6s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* =================================================
   RESPONSIVE BREAKPOINTS FOR SMALLER PHONES
   ================================================= */

/* Medium-small phones (375-400px wide) */
@media screen and (max-width: 400px) {
    :root {
        --spacing-xs: 2px;
        --spacing-s: 4px;
        --spacing-m: 8px;
        /* Tighter margins */
        --spacing-l: 12px;
        --spacing-xl: 16px;
    }

    #app {
        gap: 2px;
        /* Very tight gap */
    }

    .player-hand-container {
        height: 160px !important;
    }

    .player-cards .card {
        font-size: 11px !important;
        /* Smaller player cards on mobile */
    }

    .community-cards .card {
        font-size: clamp(8px, 3vw, 12px) !important;
    }

    .btn {
        height: 48px !important;
        /* Restore touch target */
        font-size: 14px !important;
    }

    /* Fixed Syntax: CSS variables must be in selector */
}

/* Base Mobile Overrides (Global Shrink) */
:root {
    /* Globally Reduce Spacing by ~15% */
    --spacing-m: 14px;
    --spacing-l: 20px;
    --spacing-xl: 28px;
}

/* Mobile Tweaks */
@media screen and (max-width: 450px) {
    #app {
        padding: 0;
        /* Remove global padding, let children handle gutters for alignment */
        gap: 6px;
    }

    .player-hand-container {
        height: 180px;
        /* Reduced fixed height */
    }

    /* Shrink Player Cards (Base 15.5px -> 13px) */
    .player-cards .card {
        font-size: 13px;
    }

    /* Shrink Community Cards - But User requested BIGGER, so increasing clamp */
    .community-cards .card {
        font-size: clamp(7px, 2.5vw, 10px);
    }

    /* Shrink Buttons */
    .btn {
        height: 48px;
        font-size: 13px;
    }
}

/* Header/Menu Button */
.btn-icon {
    width: 38px;
    height: 38px;
    font-size: 20px;
}

/* Opponents Bar */
/* Opponents Bar - 16px Gutter */
.opponents-bar {
    padding: 4px 16px 80px 16px;
    gap: 8px;
}

.opponent {
    border-radius: 12px;
    padding: 6px 4px !important;
    min-height: 80px !important;
    /* Smaller opponent boxes */
}

.opponent-avatar {
    width: 42px;
    height: 42px;
    font-size: 26px;
}

.opponent-name {
    font-size: 10px;
}

.opponent-chips {
    font-size: 12px;
}

.dealer-button {
    width: 15px;
    height: 15px;
    font-size: 9px;
}

.opponent-bet-bubble {
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 10px;
}

/* Community Cards - Wider as requested */
.community-cards .card {
    font-size: clamp(6px, 2.5vw, 11px);
    /* Significantly increased */
}

/* Pot Display */
#pot-display,
.pot-pill {
    padding: 8px 18px;
    font-size: 15px;
    margin-bottom: 16px;
}

/* Buttons */
.btn {
    height: 48px;
    font-size: 14px;
    padding: 0 var(--spacing-m);
    border-radius: 24px;
}

.btn-round {
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 20px;
}

.controls {
    gap: 8px;
}

/* Raise Options */
.raise-options {
    padding: 5px;
    gap: 6px;
    margin-bottom: 18px;
}

.raise-preset-btn {
    min-width: 42px;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 16px;
}

/* Player Area */
.player-area {
    padding: 0 12px;
    padding-bottom: var(--spacing-m);
}

.player-hand-container {
    height: 185px;
    gap: 0;
}

.player-cards {
    width: 220px;
}

.player-cards .card {
    font-size: 13px;
}


.player-profile-card {
    border-radius: 26px;
    padding: 20px 0;
}

.player-info-wrapper {
    border-radius: 26px;
}

.player-avatar-large {
    font-size: 40px;
}

.player-chips-large {
    font-size: 20px;
}

.player-hand-label {
    font-size: 12px;
}

/* User Bet Bubble */
.user-bet-bubble {
    font-size: 16px;
    padding: 5px 12px;
    height: 26px;
}

.user-bet-container {
    top: -38px;
    left: 12px;
}

/* Start Button */
.btn-start {
    height: 52px;
    font-size: 16px;
}

/* Home Screen */
.game-title {
    font-size: 36px;
}

.subtitle {
    font-size: 12px;
    letter-spacing: 3px;
}

.resume-card {
    padding: 18px;
    gap: 16px;
}

.btn-large {
    height: 52px;
    font-size: 16px;
}

.stat-value {
    font-size: 20px;
}

/* Winner Toast */
.winner-toast {
    font-size: 14px;
    padding: 6px 12px;
}

/* Action Overlay */
.action-text {
    font-size: 12px;
}

/* Opponent Showdown Cards */
.opponent-hand-container {
    bottom: -75px;
}

.opponent-hand .card {
    font-size: 5px;
}
}

/* Very small phones (360px and below - like iPhone SE, older Androids) */
@media screen and (max-width: 360px) {
    :root {
        --spacing-xs: 2px;
        --spacing-s: 4px;
        --spacing-m: 10px;
        --spacing-l: 14px;
        --spacing-xl: 20px;
    }

    #app {
        padding: 0 var(--spacing-xs);
        gap: 4px;
    }

    /* Header/Menu Button */
    .btn-icon {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    .header-actions {
        padding: var(--spacing-s) 0 4px 0;
    }

    /* Opponents Bar */
    .opponents-bar {
        padding: 3px 8px 70px 8px;
        gap: 6px;
    }

    .opponent {
        border-radius: 10px;
        padding: 8px 4px;
        min-height: 85px;
    }

    .opponent-avatar {
        width: 36px;
        height: 36px;
        font-size: 22px;
    }

    .opponent-name {
        font-size: 9px;
    }

    .opponent-chips {
        font-size: 11px;
    }

    .dealer-button {
        width: 13px;
        height: 13px;
        font-size: 8px;
        right: -2px;
    }

    .opponent-bet-bubble {
        padding: 2px 6px;
        font-size: 11px;
        border-radius: 8px;
    }

    /* Community Cards - even smaller */
    .community-cards .card {
        font-size: clamp(3.5px, 1.5vw, 7px);
        margin-right: -1.5em;
    }

    /* Pot Display */
    #pot-display,
    .pot-pill {
        padding: 6px 14px;
        font-size: 14px;
        margin-bottom: 12px;
        border-radius: 24px;
    }

    /* Buttons - compact */
    .btn {
        height: 44px;
        font-size: 13px;
        padding: 0 var(--spacing-s);
        border-radius: 22px;
    }

    .btn-round {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 18px;
    }

    .controls {
        gap: 6px;
    }

    .controls-area {
        margin-bottom: 14px;
    }

    /* Raise Options */
    .raise-options {
        padding: 4px;
        gap: 4px;
        margin-bottom: 14px;
    }

    .raise-preset-btn {
        min-width: 38px;
        height: 28px;
        padding: 0 8px;
        font-size: 11px;
        border-radius: 14px;
    }

    /* Player Area - significantly smaller */
    .player-area {
        padding: 0 8px;
        padding-bottom: var(--spacing-s);
    }

    .player-hand-container {
        height: 160px;
    }

    .player-cards {
        width: 190px;
    }

    .player-cards .card {
        font-size: 11px;
    }

    .player-profile-card {
        border-radius: 22px;
        padding: 16px 0;
    }

    .player-info-wrapper {
        border-radius: 22px;
    }

    .player-avatar-large {
        font-size: 34px;
    }

    .player-chips-large {
        font-size: 18px;
    }

    .player-hand-label {
        font-size: 11px;
    }

    /* User Bet Bubble */
    .user-bet-bubble {
        font-size: 14px;
        padding: 4px 10px;
        height: 24px;
    }

    .user-bet-container {
        top: -34px;
        left: 8px;
    }

    /* Start Button */
    .btn-start {
        height: 48px;
        font-size: 14px;
    }

    /* Home Screen */
    .game-title {
        font-size: 30px;
    }

    .subtitle {
        font-size: 11px;
        letter-spacing: 2px;
        margin-bottom: 14px;
    }

    .resume-card {
        padding: 14px;
        gap: 12px;
        border-radius: 18px;
    }

    .btn-large {
        height: 48px;
        font-size: 14px;
        border-radius: 24px;
    }

    .stat-value {
        font-size: 18px;
    }

    .stat-label {
        font-size: 9px;
    }

    .resume-stat-box {
        padding: 10px;
        border-radius: 10px;
    }

    /* Winner Toast */
    .winner-toast {
        font-size: 13px;
        padding: 5px 10px;
        bottom: 340px;
    }

    /* Action Overlay */
    .action-text {
        font-size: 11px;
        padding: 2px 6px;
    }

    /* Opponent Showdown Cards */
    .opponent-hand-container {
        bottom: -65px;
    }

    .opponent-hand .card {
        font-size: 4.5px;
    }

    .opponent-hand {
        padding: 4px;
        border-radius: 10px;
    }
}

/* CSS Update: Fix Continue Button, Showdown Stack, Raise Menu */

/* Make Continue Button larger (and all resume buttons) */
.btn-resume {
    height: 60px !important;
    /* Force height */
    font-size: 18px !important;
}

/* Ensure hidden class works */
.hidden {
    display: none !important;
}

/* Fix Raise Options Popup Position */
.raise-options {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: 250px;
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 40px;
    padding: 8px;
    display: flex;
    /* Base display state (when not hidden) */
    justify-content: space-between;
    gap: 8px;
    z-index: 1000;
}

/* Fix Opponent Showdown Stack Position */
.opponent-hand-container {
    position: absolute;
    bottom: -15px;
    /* Hang slightly off bottom to clear Name */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 20;
    /* Above chips/name */
    overflow: visible;
}

/* Ensure Stack doesn't get clipped */
.opponent {
    overflow: visible !important;
}

/* Ensure cards are visible */
.opponent-hand .card {
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.5);
    /* Stronger shadow */
}