/* EVIL CASINO - The Most Fair Casino Ever */
/* Compact Single-Screen Layout - v20 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-dark: #1a0a2e;
    --bg-table: #0d4d0d;
    --bg-table-felt: #145214;
    --gold: #ffd700;
    --gold-dark: #b8860b;
    --red: #ff3333;
    --green: #33ff33;
    --white: #f0f0f0;
    --black: #0a0a0a;
    --purple: #6b2d6b;
    --pixel-shadow: 3px 3px 0px #000;
}

html, body {
    height: 100%;
    overflow: hidden;
}

/* Scaling Wrapper for Proportional Resizing */
.game-scale-wrapper {
    width: 1200px;
    height: 800px;
    transform-origin: top center;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

body {
    font-family: 'Press Start 2P', 'Courier New', monospace;
    background: var(--bg-dark);
    background-image: 
        linear-gradient(45deg, #1a0a2e 25%, transparent 25%),
        linear-gradient(-45deg, #1a0a2e 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #2a1a3e 75%),
        linear-gradient(-45deg, transparent 75%, #2a1a3e 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    color: var(--white);
    image-rendering: pixelated;
}

/* Scanlines effect */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 2px
    );
    z-index: 1000;
}

.game-container {
    height: 800px;
    max-height: 800px;
    width: 900px;
    max-width: 900px;
    margin: 0 auto;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

/* Header + Money Combined - Ultra Compact */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    flex-shrink: 0;
}

header {
    text-align: center;
    padding: 4px 12px;
    border: 2px solid var(--gold);
    background: linear-gradient(180deg, #2a1a3e 0%, #1a0a2e 100%);
    box-shadow: 2px 2px 0px #000, inset 0 0 10px rgba(255, 215, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

header h1 {
    font-size: 1.1rem;
    color: var(--gold);
    text-shadow: 
        2px 2px 0px var(--black),
        -1px -1px 0px var(--red);
    animation: flashy 0.5s infinite alternate;
    letter-spacing: 2px;
}

@keyframes flashy {
    from { filter: brightness(1); }
    to { filter: brightness(1.3); }
}

/* Money Display - Ultra Compact */
.money-display {
    background: #000;
    border: 2px solid var(--gold);
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 2px 2px 0px #000;
    flex-shrink: 0;
}

.money-label {
    font-size: 0.5rem;
    color: #888;
}

.money-amount {
    font-size: 1rem;
    color: var(--green);
    text-shadow: 1px 1px 0px var(--black);
}

.money-amount.losing {
    color: var(--red);
    animation: shake 0.3s infinite;
}

.bet-separator {
    color: #555;
    margin: 0 8px;
    font-size: 0.8rem;
}

.bet-amount {
    font-size: 1rem;
    color: var(--gold);
    text-shadow: 1px 1px 0px var(--black);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* Table - Flex grow to fill space */
.table {
    background: var(--bg-table);
    border: 3px solid #8b4513;
    border-radius: 10px;
    padding: 6px 10px;
    box-shadow: 
        2px 2px 0px #000,
        inset 0 0 20px rgba(0, 0, 0, 0.5);
    background-image: 
        radial-gradient(ellipse at center, var(--bg-table-felt) 0%, var(--bg-table) 100%);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* Deck Pile */
.deck-area {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.deck-pile {
    width: 50px;
    height: 70px;
    position: relative;
}

.deck-card {
    position: absolute;
    width: 44px;
    height: 62px;
    background: linear-gradient(135deg, #8b0000 0%, #4a0000 100%);
    border: 2px solid #222;
    border-radius: 4px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.deck-card::before {
    content: '💀';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    opacity: 0.7;
}

.deck-card::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 3px;
}

.deck-count {
    font-size: 12px;
    color: var(--gold);
    text-shadow: 1px 1px 0px #000;
    margin-top: 3px;
    font-weight: bold;
}

.deck-label {
    font-size: 6px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Shuffle animation */
.deck-area.shuffling .deck-pile {
    animation: shake 0.5s ease-in-out infinite;
}

.deck-area.shuffling .deck-count {
    color: #ff6600;
    animation: pulse 0.3s ease-in-out infinite alternate;
}

@keyframes shake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-5px) rotate(-5deg); }
    75% { transform: translateX(5px) rotate(5deg); }
}

@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
}

/* Shuffle overlay message */
.shuffle-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 1200px;
    height: 800px;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.shuffle-message {
    background: linear-gradient(135deg, #8b0000, #4a0000);
    border: 4px solid var(--gold);
    padding: 30px 50px;
    text-align: center;
    animation: shuffleIn 0.3s ease-out;
}

.shuffle-message h2 {
    color: var(--gold);
    font-size: 24px;
    margin-bottom: 15px;
    text-shadow: var(--pixel-shadow);
}

.shuffle-message p {
    color: #fff;
    font-size: 12px;
}

@keyframes shuffleIn {
    from { transform: scale(0) rotate(-180deg); opacity: 0; }
    to { transform: scale(1) rotate(0deg); opacity: 1; }
}

.dealer-section, .player-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Give betting UI the felt space while the hand is empty */
.player-section:has(.betting-controls:not(.hidden)) > .hand,
.player-section:has(.betting-controls:not(.hidden)) > .score {
    display: none;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.55rem;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Make dealer icon larger on the game table */
.section-header .satan-container {
    width: 50px;
    height: 50px;
    transform: scale(1.4);
}

.section-header .loser-container {
    width: 45px;
    height: 45px;
    transform: scale(1.3);
}

.avatar {
    font-size: 1.1rem;
}

/* SATAN - THE DEALER */
.satan-container {
    position: relative;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.satan {
    position: relative;
    width: 28px;
    height: 32px;
    z-index: 2;
}

/* Horns */
.horns {
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 2px;
}

.horn {
    width: 5px;
    height: 10px;
    background: linear-gradient(180deg, #4a0000 0%, #8b0000 50%, #cc0000 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    animation: hornGlow 2s ease-in-out infinite;
}

.horn.left {
    transform: rotate(-15deg);
}

.horn.right {
    transform: rotate(15deg);
}

@keyframes hornGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5) drop-shadow(0 0 3px #ff0000); }
}

/* Satan's Head */
.satan-head {
    width: 24px;
    height: 22px;
    background: linear-gradient(180deg, #8b0000 0%, #cc0000 50%, #8b0000 100%);
    border-radius: 6px 6px 8px 8px;
    position: relative;
    margin: 4px auto 0;
    box-shadow: 
        inset 0 1px 2px rgba(255, 100, 100, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.5);
    border: 1px solid #4a0000;
}

/* Eyes */
.satan-eyes {
    display: flex;
    justify-content: space-around;
    padding: 4px 2px 0;
}

.eye {
    width: 7px;
    height: 5px;
    background: #ffff00;
    border-radius: 1px;
    position: relative;
    box-shadow: 
        0 0 4px #ffff00,
        0 0 6px #ff6600;
    animation: evilEyes 3s ease-in-out infinite;
}

.eye.left {
    transform: skewY(-5deg);
}

.eye.right {
    transform: skewY(5deg);
}

.pupil {
    position: absolute;
    width: 3px;
    height: 4px;
    background: #000;
    border-radius: 1px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: evilLook 4s ease-in-out infinite;
}

@keyframes evilEyes {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

@keyframes evilLook {
    0%, 100% { left: 50%; }
    25% { left: 30%; }
    75% { left: 70%; }
}

/* Nose */
.satan-nose {
    width: 4px;
    height: 3px;
    background: #6b0000;
    margin: 1px auto;
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}

/* Mouth */
.satan-mouth {
    width: 14px;
    height: 5px;
    background: #2a0000;
    margin: 0 auto;
    border-radius: 0 0 6px 6px;
    position: relative;
    border: 1px solid #000;
    animation: evilSmile 2s ease-in-out infinite;
}

@keyframes evilSmile {
    0%, 100% { width: 14px; }
    50% { width: 16px; }
}

/* Fangs */
.fang {
    position: absolute;
    width: 3px;
    height: 4px;
    background: #fff;
    top: 0;
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}

.fang.left {
    left: 1px;
}

.fang.right {
    right: 1px;
}

/* Goatee */
.goatee {
    width: 5px;
    height: 6px;
    background: linear-gradient(180deg, #2a0000, #000);
    margin: -1px auto 0;
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}

/* Flames behind Satan - hidden for compact view */
.flames {
    display: none;
}

.flame {
    width: 5px;
    height: 12px;
    background: linear-gradient(180deg, #ff0000 0%, #ff6600 40%, #ffcc00 80%, #fff 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flicker 0.3s ease-in-out infinite alternate;
    opacity: 0.8;
}

.flame.f1 {
    height: 10px;
    animation-delay: 0s;
}

.flame.f2 {
    height: 14px;
    animation-delay: 0.1s;
}

.flame.f3 {
    height: 8px;
    animation-delay: 0.2s;
}

@keyframes flicker {
    0% { transform: scaleY(1) scaleX(1); opacity: 0.8; }
    100% { transform: scaleY(1.2) scaleX(0.8); opacity: 1; }
}

/* Dealer title styling */
.dealer-title {
    font-size: 0.55rem;
    color: #ff3333;
    text-shadow: 1px 1px 0 #000;
    line-height: 1.3;
}

.satan-subtitle {
    font-size: 0.4rem;
    color: #ff6600;
    animation: subtitlePulse 1s ease-in-out infinite;
}

@keyframes subtitlePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* THE LOSER - THE PLAYER */
.loser-container {
    position: relative;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.loser {
    position: relative;
    width: 28px;
    height: 30px;
    z-index: 2;
    transform: scale(0.85);
    transform-origin: center center;
}

/* Pathetic balding hair */
.loser-hair {
    position: absolute;
    top: 0;
    left: 4px;
    right: 4px;
    height: 10px;
    display: flex;
    justify-content: space-around;
}

.hair-strand {
    width: 4px;
    height: 8px;
    background: #3d2914;
    border-radius: 2px 2px 0 0;
    transform-origin: bottom;
}

.hair-strand.s1 {
    transform: rotate(-20deg);
    height: 6px;
}

.hair-strand.s2 {
    height: 10px;
    transform: rotate(5deg);
}

.hair-strand.s3 {
    transform: rotate(25deg);
    height: 5px;
}

.bald-spot {
    position: absolute;
    width: 14px;
    height: 8px;
    background: #d4a574;
    border-radius: 50%;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Sickly pale head */
.loser-head {
    width: 30px;
    height: 28px;
    background: linear-gradient(180deg, #e8d4b8 0%, #d4bc9a 40%, #c9ae8a 100%);
    border-radius: 8px 8px 10px 10px;
    position: relative;
    margin: 4px auto 0;
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.3);
    border: 1px solid #a08060;
}

/* Green tinge of sickness */
.loser-head::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(100, 140, 100, 0.15);
    border-radius: inherit;
    animation: sicknessWave 3s ease-in-out infinite;
}

@keyframes sicknessWave {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.25; }
}

/* Sweat drops */
.sweat-drops {
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
}

.sweat {
    position: absolute;
    width: 4px;
    height: 6px;
    background: linear-gradient(180deg, rgba(150,200,255,0.8), rgba(100,150,255,0.4));
    border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
    animation: sweatDrip 2s ease-in infinite;
}

.sweat.s1 {
    left: 4px;
    animation-delay: 0s;
}

.sweat.s2 {
    left: 50%;
    animation-delay: 0.7s;
}

.sweat.s3 {
    right: 4px;
    animation-delay: 1.4s;
}

@keyframes sweatDrip {
    0% { top: 0; opacity: 1; }
    100% { top: 40px; opacity: 0; }
}

/* Sunken tired eyes */
.loser-eyes {
    display: flex;
    justify-content: space-around;
    padding: 8px 4px 0;
    position: relative;
}

.eye-bag {
    position: absolute;
    width: 12px;
    height: 6px;
    background: rgba(80, 60, 80, 0.4);
    border-radius: 0 0 50% 50%;
    top: 14px;
}

.eye-bag.left {
    left: 5px;
}

.eye-bag.right {
    right: 5px;
}

.loser-eye {
    width: 10px;
    height: 7px;
    background: #fff;
    border-radius: 50%;
    position: relative;
    border: 1px solid #666;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(255,0,0,0.3);
}

/* Tired droopy eyelid */
.tired-lid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: #d4bc9a;
    border-radius: 50% 50% 0 0;
    z-index: 2;
    animation: tiredBlink 4s ease-in-out infinite;
}

@keyframes tiredBlink {
    0%, 85%, 100% { height: 40%; }
    90% { height: 90%; }
}

.loser-pupil {
    position: absolute;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle at 30% 30%, #666, #222);
    border-radius: 50%;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    animation: nervousLook 2s ease-in-out infinite;
}

@keyframes nervousLook {
    0%, 100% { transform: translateX(-50%); }
    25% { transform: translateX(-80%); }
    75% { transform: translateX(-20%); }
}

/* Crooked red nose */
.loser-nose {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #d4a088, #c08070);
    margin: 1px auto;
    border-radius: 50%;
    transform: rotate(5deg) translateX(1px);
    box-shadow: inset -1px -1px 2px rgba(0,0,0,0.2);
}

/* Sad frowning mouth */
.loser-mouth {
    width: 14px;
    height: 6px;
    border: 2px solid #8b5a5a;
    border-top: none;
    border-radius: 0 0 12px 12px;
    margin: 2px auto 0;
    position: relative;
    background: #5a3030;
    animation: quiver 0.5s ease-in-out infinite;
}

@keyframes quiver {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.95); }
}

.missing-tooth {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #5a3030;
    top: 0;
    left: 4px;
}

/* Tears streaming down */
.tear {
    position: absolute;
    width: 4px;
    height: 8px;
    background: linear-gradient(180deg, rgba(100,150,255,0.8), rgba(100,150,255,0.2));
    border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
    animation: crying 1.5s ease-in infinite;
}

.tear.left {
    left: 6px;
    top: 16px;
    animation-delay: 0s;
}

.tear.right {
    right: 6px;
    top: 16px;
    animation-delay: 0.75s;
}

@keyframes crying {
    0% { top: 16px; opacity: 1; height: 8px; }
    100% { top: 38px; opacity: 0; height: 4px; }
}

/* Patchy stubble */
.stubble {
    position: absolute;
    bottom: 2px;
    left: 6px;
    right: 6px;
    height: 8px;
    background-image: radial-gradient(circle, #5a4030 1px, transparent 1px);
    background-size: 3px 3px;
    opacity: 0.4;
}

/* Sad fat neck */
.loser-neck {
    width: 20px;
    height: 8px;
    background: linear-gradient(180deg, #d4bc9a, #c9ae8a);
    margin: -2px auto 0;
    border-radius: 0 0 4px 4px;
    position: relative;
}

.neck-fat {
    position: absolute;
    width: 24px;
    height: 4px;
    background: #c4a888;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0 0 8px 8px;
}

/* Stink lines */
.stink-lines {
    position: absolute;
    right: -8px;
    top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1;
}

.stink {
    font-size: 10px;
    color: #7a8a5a;
    opacity: 0;
    animation: stinkFloat 2s ease-in-out infinite;
}

.stink.s1 {
    animation-delay: 0s;
}

.stink.s2 {
    animation-delay: 1s;
}

@keyframes stinkFloat {
    0% { opacity: 0; transform: translateX(0) translateY(0); }
    50% { opacity: 0.7; }
    100% { opacity: 0; transform: translateX(8px) translateY(-10px); }
}

/* Player title styling */
.player-title {
    font-size: 0.55rem;
    color: #88aa88;
    text-shadow: 1px 1px 0 #000;
    line-height: 1.3;
}

.loser-subtitle {
    font-size: 0.4rem;
    color: #6a8a6a;
    animation: loserPulse 2s ease-in-out infinite;
}

@keyframes loserPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.4; }
}

.hand {
    display: flex;
    gap: 4px;
    min-height: 60px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 3px;
    flex: 1;
}

.score {
    text-align: center;
    font-size: 0.8rem;
    padding: 2px;
    color: var(--gold);
    text-shadow: 1px 1px 0px var(--black);
}

.bust-probability {
    text-align: center;
    font-size: 0.6rem;
    padding: 4px 8px;
    margin-top: 4px;
    color: #fff;
    background: linear-gradient(180deg, #8B0000 0%, #4a0000 100%);
    border: 2px solid #ff4444;
    border-radius: 4px;
    font-family: 'Press Start 2P', monospace;
    text-shadow: 1px 1px 0px var(--black);
    animation: pulse-warning 1.5s ease-in-out infinite;
}

.bust-probability.low-risk {
    background: linear-gradient(180deg, #006400 0%, #003300 100%);
    border-color: #44ff44;
}

.bust-probability.medium-risk {
    background: linear-gradient(180deg, #8B8B00 0%, #4a4a00 100%);
    border-color: #ffff44;
}

.bust-probability.high-risk {
    background: linear-gradient(180deg, #8B0000 0%, #4a0000 100%);
    border-color: #ff4444;
}

@keyframes pulse-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Cards - Compact */
.card {
    width: 48px;
    height: 70px;
    background: #fff;
    border: 2px solid #333;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2px;
    font-size: 0.65rem;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s;
    image-rendering: pixelated;
    position: relative;
    flex-shrink: 0;
}

.card:hover {
    transform: translateY(-2px);
}

.card.red {
    color: #cc0000;
}

.card.black {
    color: #000;
}

.card.face-down {
    background: linear-gradient(45deg, #4a0080 25%, #6a0dad 25%, #6a0dad 50%, #4a0080 50%, #4a0080 75%, #6a0dad 75%);
    background-size: 8px 8px;
    border: 2px solid #ffd700;
}

.card.face-down::after {
    content: '?';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    color: var(--gold);
    text-shadow: 1px 1px 0px #000;
}

.card-corner {
    font-size: 0.5rem;
    font-weight: bold;
    line-height: 1;
}

.card-corner.bottom {
    align-self: flex-end;
    transform: rotate(180deg);
}

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

.card.dealing {
    animation: dealCard 0.3s ease-out;
}

@keyframes dealCard {
    from {
        transform: translateY(-100px) rotate(180deg);
        opacity: 0;
    }
    to {
        transform: translateY(0) rotate(0);
        opacity: 1;
    }
}

/* Message Area - Compact */
.message-area {
    text-align: center;
    padding: 4px 6px;
    margin: 3px 0;
    font-size: 0.55rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1px dashed var(--gold);
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message-area.win {
    border-color: var(--green);
    color: var(--green);
    animation: winPulse 0.5s infinite alternate;
}

.message-area.lose {
    border-color: var(--red);
    color: var(--red);
}

@keyframes winPulse {
    from { box-shadow: 0 0 5px var(--green); }
    to { box-shadow: 0 0 15px var(--green); }
}

/* Controls - Compact */
.controls {
    margin-top: 8px;
}

/* On-felt betting UI (chips + bet boxes live in player section) */
.betting-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1;
    min-height: 0;
    width: 100%;
    padding: 6px 8px 4px;
    z-index: 5;
}

/* Container for side bets - horizontal layout */
.side-bets-and-rebet-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.side-bets-total {
    font-size: 0.55rem;
    color: var(--gold);
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    white-space: nowrap;
}

/* Side Bets Section */
/* Side Bets + Rebet Combined Row */
.side-rebet-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: stretch;
    margin-bottom: 8px;
}

.rebet-section {
    display: flex;
    align-items: center;
}

.rebet-section.hidden {
    display: none;
}

.rebet-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    padding: 16px 28px;
    background: linear-gradient(180deg, #228822 0%, #115511 100%);
    color: var(--gold);
    border: 4px solid var(--gold);
    cursor: pointer;
    box-shadow: 4px 4px 0px #000;
    transition: all 0.2s ease;
    line-height: 1.3;
    white-space: nowrap;
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.rebet-btn:hover {
    background: linear-gradient(180deg, #33aa33 0%, #227722 100%);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0px #000;
}

.rebet-amount {
    font-size: 0.6rem;
    color: #66ff66;
}

.rebet-amount {
    font-size: 0.8rem;
    color: #66ff66;
}

.side-bets-section {
    display: flex;
    gap: 6px;
    align-items: center;
    background: rgba(26, 0, 51, 0.8);
    border: 1px solid #6633cc;
    border-radius: 4px;
    padding: 6px 10px;
    flex: 1;
}

.side-bet-option {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #444;
    border-radius: 4px;
    padding: 4px 8px;
    flex: 1;
}

.side-bet-label {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
    font-size: 0.5rem;
}

.side-bet-name {
    color: #fff;
}

.side-bet-info {
    color: #888;
    cursor: help;
    font-size: 0.55rem;
}

.side-bet-info:hover {
    color: var(--gold);
}

.side-bet-buttons {
    display: flex;
    gap: 2px;
    justify-content: center;
}

.side-bet-btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.4rem;
    padding: 4px 5px;
    background: #333;
    border: 1px solid #555;
    color: #888;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 3px;
}

.side-bet-btn:hover {
    background: #444;
    border-color: #666;
    color: #fff;
}

.side-bet-btn.active {
    background: linear-gradient(180deg, #cc9900 0%, #996600 100%);
    border-color: var(--gold);
    color: #000;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.side-bet-btn[data-amount="0"].active {
    background: #333;
    border-color: #666;
    color: #888;
    box-shadow: none;
}

.side-bets-total {
    text-align: center;
    margin-top: 5px;
    font-size: 0.55rem;
    color: #aaa;
}

.side-bets-total span {
    color: var(--gold);
}

/* Side Bet Result Popup */
.side-bet-result {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.95);
    border: 3px solid var(--gold);
    border-radius: 10px;
    padding: 20px 30px;
    z-index: 1000;
    text-align: center;
    animation: sideBetPop 0.5s ease-out;
}

.side-bet-result.win {
    border-color: #00ff00;
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.5);
}

.side-bet-result.lose {
    border-color: #ff4444;
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.3);
}

.side-bet-result-title {
    font-size: 1rem;
    margin-bottom: 10px;
}

.side-bet-result-detail {
    font-size: 0.7rem;
    color: #aaa;
    margin-bottom: 5px;
}

.side-bet-result-payout {
    font-size: 1.2rem;
    color: var(--gold);
}

@keyframes sideBetPop {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.1); }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.side-bets-total {
    font-size: 0.55rem;
    color: #aa88ff;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid #444;
}

.bet-buttons {
    display: flex;
    gap: 4px;
    justify-content: stretch;
    margin-bottom: 6px;
}

.bet-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    padding: 8px 4px;
    background: linear-gradient(180deg, #444 0%, #222 100%);
    color: var(--gold);
    border: 2px solid var(--gold);
    cursor: pointer;
    box-shadow: 2px 2px 0px #000;
    transition: all 0.1s;
    flex: 1;
    text-align: center;
}

.bet-btn:hover {
    background: linear-gradient(180deg, #555 0%, #333 100%);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0px #000;
}

.bet-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px #000;
}

.bet-btn.all-in {
    background: linear-gradient(180deg, #8b0000 0%, #4a0000 100%);
    border-color: var(--red);
    color: var(--white);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    50% { box-shadow: 2px 2px 0px #000, 0 0 10px rgba(255, 0, 0, 0.4); }
}

.bet-btn.selected {
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--black);
}

.subtext {
    font-size: 0.4rem;
    opacity: 0.6;
    display: none;
}

.current-bet {
    text-align: center;
    font-size: 0.65rem;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

#current-bet {
    color: var(--gold);
    font-size: 0.85rem;
}

.deal-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    padding: 10px 25px;
    background: linear-gradient(180deg, var(--green) 0%, #009900 100%);
    color: var(--black);
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 2px 2px 0px #000;
}

.deal-btn:disabled {
    background: #444;
    color: #888;
    border-color: #666;
    cursor: not-allowed;
}

.deal-btn:not(:disabled):hover {
    transform: scale(1.03);
}

/* ===== CHIP-BASED BETTING SYSTEM ===== */

.bet-areas-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: 520px;
}

/* Individual Bet Area */
.bet-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px 22px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-height: 78px;
}

.bet-area:hover {
    transform: scale(1.04);
}

.bet-area.active {
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.6);
}

/* Main Bet Area - Larger */
.main-bet-area {
    background: linear-gradient(180deg, rgba(139, 69, 19, 0.85) 0%, rgba(101, 67, 33, 0.95) 100%);
    border: 3px solid #ffd700;
    min-width: 120px;
    width: 140px;
    min-height: 96px;
    padding: 10px 14px 24px;
}

.main-bet-area:hover {
    border-color: #fff;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
}

/* Side Bet Areas */
.side-bet-area {
    background: linear-gradient(180deg, rgba(75, 0, 130, 0.75) 0%, rgba(48, 0, 84, 0.85) 100%);
    border: 2px solid #9966cc;
    min-width: 100px;
    width: 115px;
    padding: 8px 10px 22px;
}

.side-bet-area:hover {
    border-color: #cc99ff;
    box-shadow: 0 0 10px rgba(153, 102, 255, 0.5);
}

.side-bet-area .bet-area-label {
    font-size: 0.42rem;
    line-height: 1.35;
    text-align: center;
}

.side-bet-area .bet-area-payout {
    font-size: 0.35rem;
    white-space: nowrap;
}

.bet-area-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: #fff;
    text-align: center;
    margin-bottom: 4px;
    text-shadow: 1px 1px 2px #000;
}

.bet-area-payout {
    font-size: 0.4rem;
    color: #aaa;
    margin-bottom: 6px;
}

.bet-area-total {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: #ffd700;
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 1px 1px 2px #000;
}

.chip-stack {
    position: relative;
    min-height: 28px;
    min-width: 36px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.main-bet-area .chip-stack {
    min-height: 34px;
    min-width: 42px;
}

.chip-in-stack {
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.35rem;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border: 2px dashed rgba(255, 255, 255, 0.4);
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
    background: var(--chip-color, #888);
    transition: transform 0.15s ease;
    animation: chipDrop 0.2s ease-out;
}

@keyframes chipDrop {
    from {
        transform: translateY(-30px) scale(1.2);
        opacity: 0.5;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.chip-in-stack::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.chip-tray {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 6px;
}

.chip {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--chip-color, #888);
    border: 3px dashed rgba(255, 255, 255, 0.4);
    box-shadow: 
        0 3px 6px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
}

.chip::before {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.chip:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 
        0 6px 12px rgba(0, 0, 0, 0.5),
        0 0 12px var(--chip-accent, #aaa);
}

.chip.selected {
    transform: translateY(-6px) scale(1.12);
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.5),
        0 0 20px var(--chip-accent, #aaa),
        0 0 32px var(--chip-accent, #aaa);
    border-color: rgba(255, 255, 255, 0.8);
    animation: chipBounce 0.5s ease infinite;
}

@keyframes chipBounce {
    0%, 100% { transform: translateY(-6px) scale(1.12); }
    50% { transform: translateY(-10px) scale(1.12); }
}

.chip-value {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    z-index: 1;
}

/* Betting action bar — same slot as hit/stand controls */
.betting-actions {
    display: flex;
    gap: 6px;
    justify-content: stretch;
    padding: 8px;
    background: #1a0a2e;
    border: 2px solid var(--purple);
    box-shadow: 2px 2px 0px #000;
    flex-shrink: 0;
}

.betting-action-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    padding: 12px 6px;
    border: 2px solid;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 2px 2px 0px #000;
    flex: 1;
    text-align: center;
}

.betting-action-btn:hover:not(:disabled) {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0px #000;
}

.betting-action-btn:active:not(:disabled) {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px #000;
}

.betting-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.betting-action-btn.undo-btn {
    background: linear-gradient(180deg, #ff8c00 0%, #cc7000 100%);
    border-color: #ffaa33;
    color: #fff;
}

.betting-action-btn.clear-btn {
    background: linear-gradient(180deg, #dc3545 0%, #a52834 100%);
    border-color: #ff6b7a;
    color: #fff;
}

.betting-action-btn.rebet-action-btn {
    background: linear-gradient(180deg, #17a2b8 0%, #117a8b 100%);
    border-color: #4dd4ec;
    color: #fff;
}

.betting-action-btn.double-bet-btn {
    background: linear-gradient(180deg, #fd7e14 0%, #c96209 100%);
    border-color: #ffaa4d;
    color: #fff;
}

.betting-action-btn.deal-btn {
    background: linear-gradient(180deg, #28a745 0%, #1e7e34 100%);
    border-color: #5dd879;
    color: #fff;
}

.betting-action-btn.deal-btn:not(:disabled) {
    animation: dealPulse 1.5s ease infinite;
}

@keyframes dealPulse {
    0%, 100% { box-shadow: 2px 2px 0px #000; }
    50% { box-shadow: 2px 2px 0px #000, 0 0 15px rgba(40, 167, 69, 0.6); }
}

/* Hide old elements */
.bet-buttons,
.side-bets-and-rebet-container,
.side-bets-section,
.side-bets-total,
.rebet-section {
    display: none !important;
}

/* Game Controls */
.game-controls {
    display: flex;
    gap: 6px;
    justify-content: stretch;
    padding: 8px;
    background: #1a0a2e;
    border: 2px solid var(--purple);
    box-shadow: 2px 2px 0px #000;
    flex-shrink: 0;
}

.action-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    padding: 12px 8px;
    border: 2px solid;
    cursor: pointer;
    box-shadow: 2px 2px 0px #000;
    transition: all 0.1s;
    flex: 1;
    text-align: center;
}

.action-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0px #000;
}

.action-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px #000;
}

.action-btn .subtext {
    display: none;
}

.hit-btn {
    background: linear-gradient(180deg, #ff6600 0%, #cc3300 100%);
    border-color: #ffcc00;
    color: var(--white);
}

.stand-btn {
    background: linear-gradient(180deg, #0066ff 0%, #0033cc 100%);
    border-color: #66ccff;
    color: var(--white);
}

.double-btn {
    background: linear-gradient(180deg, #9900ff 0%, #6600cc 100%);
    border-color: #cc66ff;
    color: var(--white);
}

.double-btn:disabled {
    background: #444;
    border-color: #666;
    cursor: not-allowed;
    opacity: 0.5;
}

.split-btn {
    background: linear-gradient(180deg, #00cccc 0%, #008888 100%);
    border-color: #66ffff;
    color: var(--white);
}

.split-btn:disabled {
    background: #444;
    border-color: #666;
    cursor: not-allowed;
    opacity: 0.5;
}

.split-btn:not(:disabled):hover {
    background: linear-gradient(180deg, #00ffff 0%, #00aaaa 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 255, 255, 0.4);
}

/* Split hands display */
#player-hand.split-mode {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
}

.split-hand {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #666;
    border-radius: 10px;
    padding: 10px;
    min-width: 120px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.split-hand.active {
    border-color: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

.split-hand.completed {
    opacity: 0.7;
}

.split-hand-label {
    font-size: 0.6rem;
    color: #ffd700;
    margin-bottom: 8px;
    text-align: center;
    font-family: 'Press Start 2P', monospace;
}

.split-cards {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
    min-height: 80px;
}

.split-hand .card {
    transform: scale(0.85);
}

.split-hand-score {
    text-align: center;
    font-size: 0.9rem;
    margin-top: 5px;
    color: var(--gold);
}

.hidden {
    display: none !important;
}

.popup.hidden {
    display: none !important;
}

/* Stats Bar */
.stats-bar {
    display: flex;
    justify-content: space-around;
    margin-top: 5px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--purple);
    font-size: 0.55rem;
    flex-shrink: 0;
}

.stat-label {
    color: #888;
}

.stat-value {
    color: var(--gold);
    margin-left: 4px;
}


/* Upgrades Bar */
.upgrades-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #4a3a6a;
    font-size: 0.5rem;
    flex-shrink: 0;
}

.upgrades-label {
    color: var(--gold);
    font-size: 0.5rem;
}

.active-upgrades {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    color: #aaa;
}

.perk-badge {
    background: linear-gradient(180deg, #3a2a5a 0%, #2a1a4a 100%);
    border: 1px solid var(--gold);
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 0.45rem;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.perk-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    border-color: #fff;
}

/* Perk Tooltip Popup */
.perk-tooltip {
    position: fixed;
    background: linear-gradient(180deg, #2a1a4a 0%, #1a0a2a 100%);
    border: 3px solid var(--gold);
    border-radius: 12px;
    padding: 16px 20px;
    z-index: 100000;
    pointer-events: none;
    min-width: 220px;
    max-width: 300px;
    box-shadow: 
        0 0 0 2px #000,
        0 8px 32px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(138, 43, 226, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -100%);
    margin-top: -15px;
}

.perk-tooltip::before {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 12px 10px 0 10px;
    border-style: solid;
    border-color: var(--gold) transparent transparent transparent;
}

.perk-tooltip::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 7px 0 7px;
    border-style: solid;
    border-color: #1a0a2a transparent transparent transparent;
}

.perk-tooltip-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    color: var(--gold);
    margin-bottom: 10px;
    text-shadow: 2px 2px 0px var(--black);
    text-align: center;
    border-bottom: 1px solid rgba(218, 165, 32, 0.3);
    padding-bottom: 8px;
}

.perk-tooltip-desc {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    color: #ddd;
    line-height: 1.6;
    text-align: center;
}

/* Broke Popup */
.popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 1200px;
    height: 800px;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    /* Prevent backdrop clicks from doing anything */
    pointer-events: auto;
}

.popup:not(.hidden) {
    display: flex;
}

.popup-content {
    background: linear-gradient(180deg, #2a1a3e 0%, #1a0a2e 100%);
    border: 5px solid var(--red);
    padding: 25px;
    text-align: center;
    box-shadow: 0 0 40px rgba(255, 0, 0, 0.5);
    max-width: 450px;
    /* Ensure content receives clicks */
    pointer-events: auto;
}

/* Post-Round Choice Popup */
.post-round-content {
    border-color: var(--gold);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.4);
}

.post-round-content h2 {
    color: var(--gold);
    animation: none;
}

.post-round-stats {
    font-size: 0.6rem;
    color: #ccc;
    margin-bottom: 20px;
    line-height: 1.6;
}

.post-round-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.post-round-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    padding: 12px 20px;
    border: 3px solid;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 3px 3px 0px #000;
}

.post-round-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0px #000;
}

.post-round-btn.shop-btn {
    background: linear-gradient(180deg, #198754 0%, #0d5c36 100%);
    border-color: #28a745;
    color: #fff;
}

.post-round-btn.skip-btn {
    background: linear-gradient(180deg, #6c757d 0%, #495057 100%);
    border-color: #adb5bd;
    color: #fff;
}

/* Floor Complete Popup */
.floor-complete-content {
    border-color: #ff4444;
    box-shadow: 0 0 50px rgba(255, 68, 68, 0.5);
    max-width: 500px;
}

.floor-complete-content h2 {
    color: #ff4444;
    font-size: 1.1rem;
    animation: none;
}

.floor-complete-msg {
    font-size: 0.55rem;
    color: #ccc;
    margin-bottom: 20px;
}

.dealer-perk-reveal {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid #ff4444;
    padding: 15px;
    margin: 15px 0;
}

.dealer-perk-reveal h3 {
    font-size: 0.5rem;
    color: #ff4444;
    margin-bottom: 12px;
}

.dealer-perk-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.dealer-perk-name {
    font-size: 0.6rem;
    color: var(--gold);
    margin-bottom: 5px;
}

.dealer-perk-desc {
    font-size: 0.45rem;
    color: #aaa;
}

.popup-content h2 {
    font-size: 1.2rem;
    color: var(--red);
    margin-bottom: 15px;
    animation: flashy 0.3s infinite alternate;
}

.broke-message {
    font-size: 0.7rem;
    margin-bottom: 20px;
    line-height: 1.8;
    color: #ccc;
}

.restart-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    padding: 14px 24px;
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--black);
    border: 3px solid var(--white);
    cursor: pointer;
    box-shadow: 3px 3px 0px #000;
}

.restart-btn:hover {
    transform: scale(1.05);
}

/* Upgrade Popup */
.upgrade-content {
    border-color: var(--gold) !important;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.5) !important;
    max-width: 600px;
}

.upgrade-content h2 {
    color: var(--gold) !important;
    animation: none !important;
}

.upgrade-subtitle {
    font-size: 0.6rem;
    color: #aaa;
    margin-bottom: 20px;
}

.upgrade-options {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.upgrade-card {
    font-family: 'Press Start 2P', monospace;
    background: linear-gradient(180deg, #3a2a5a 0%, #1a0a3a 100%);
    border: 3px solid var(--purple);
    padding: 15px;
    width: 150px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.upgrade-card:hover {
    border-color: var(--gold);
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3);
}

.upgrade-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.upgrade-name {
    font-size: 0.55rem;
    color: var(--gold);
    margin-bottom: 8px;
}

.upgrade-desc {
    font-size: 0.45rem;
    color: #aaa;
    line-height: 1.6;
}

/* Boss Popup */
.boss-content {
    border-color: #ff0000 !important;
    box-shadow: 0 0 60px rgba(255, 0, 0, 0.7) !important;
    animation: bossGlow 1s ease-in-out infinite alternate;
}

@keyframes bossGlow {
    from { box-shadow: 0 0 40px rgba(255, 0, 0, 0.5); }
    to { box-shadow: 0 0 80px rgba(255, 0, 0, 0.9); }
}

.boss-portrait {
    font-size: 4rem;
    margin-bottom: 15px;
    animation: bossFloat 2s ease-in-out infinite;
}

@keyframes bossFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.boss-content h2 {
    color: #ff3333 !important;
    font-size: 1rem;
    text-shadow: 0 0 10px #ff0000;
}

.boss-description {
    font-size: 0.6rem;
    color: #ff9999;
    margin: 15px 0;
    font-style: italic;
}

.boss-rule {
    font-size: 0.55rem;
    color: var(--gold);
    background: rgba(255, 0, 0, 0.2);
    padding: 10px;
    border: 2px solid #ff3333;
    margin: 15px 0;
}

.boss-fight-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    padding: 15px 30px;
    background: linear-gradient(180deg, #cc0000 0%, #880000 100%);
    color: var(--white);
    border: 3px solid var(--gold);
    cursor: pointer;
    box-shadow: 4px 4px 0px #000;
    animation: fightPulse 0.5s ease-in-out infinite alternate;
}

@keyframes fightPulse {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

.boss-fight-btn:hover {
    background: linear-gradient(180deg, #ff0000 0%, #aa0000 100%);
}

/* Event Popup */
.event-content {
    border-color: #9933ff !important;
    box-shadow: 0 0 60px rgba(153, 51, 255, 0.6) !important;
    animation: eventGlow 2s ease-in-out infinite alternate;
    max-width: 450px;
}

@keyframes eventGlow {
    from { box-shadow: 0 0 40px rgba(153, 51, 255, 0.4); }
    to { box-shadow: 0 0 70px rgba(153, 51, 255, 0.8); }
}

.event-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.event-icon {
    font-size: 3.5rem;
    animation: eventIconFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(153, 51, 255, 0.8));
}

@keyframes eventIconFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.05); }
}

.event-content h2 {
    color: #cc99ff !important;
    font-size: 0.85rem;
    text-shadow: 0 0 10px #9933ff;
    margin: 0;
}

.event-description {
    font-size: 0.55rem;
    color: #ddccff;
    margin: 15px 0;
    font-style: italic;
    line-height: 1.6;
    text-align: center;
}

.event-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.event-choice-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    padding: 12px 15px;
    background: linear-gradient(180deg, #4a2a6a 0%, #2a1a4a 100%);
    color: var(--white);
    border: 2px solid #9933ff;
    cursor: pointer;
    box-shadow: 3px 3px 0px #000;
    transition: all 0.2s ease;
    text-align: left;
    line-height: 1.4;
}

.event-choice-btn:hover {
    background: linear-gradient(180deg, #6a3a9a 0%, #4a2a6a 100%);
    transform: translateX(5px);
    box-shadow: 5px 5px 0px #000;
}

.event-choice-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.event-choice-btn .choice-cost {
    color: #ff6666;
    font-size: 0.4rem;
    display: block;
    margin-top: 5px;
}

.event-choice-btn .choice-cost.free {
    color: #66ff66;
}

/* Victory Popup */
.victory-content {
    border-color: var(--green) !important;
    box-shadow: 0 0 60px rgba(51, 255, 51, 0.7) !important;
}

.victory-content h2 {
    color: var(--green) !important;
    font-size: 1.3rem;
}

.victory-message {
    font-size: 0.65rem;
    color: #aaffaa;
    margin: 15px 0;
}

.victory-stats {
    font-size: 0.55rem;
    color: var(--gold);
    margin: 15px 0;
    line-height: 1.8;
}

/* Boss Mode Table Styling */
.table.boss-mode {
    border-color: #ff0000;
    box-shadow: 
        var(--pixel-shadow),
        inset 0 0 50px rgba(255, 0, 0, 0.3),
        0 0 30px rgba(255, 0, 0, 0.5);
}

/* Main Menu */
.main-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 1200px;
    height: 800px;
    background: linear-gradient(180deg, #1a0a2e 0%, #0a0015 50%, #1a0a2e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
}

.menu-content {
    text-align: center;
    max-width: 600px;
    padding: 40px;
}

.menu-logo {
    margin-bottom: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.menu-title {
    font-size: 2.5rem;
    color: var(--gold);
    text-shadow: 
        0 0 10px var(--gold),
        0 0 20px var(--gold),
        4px 4px 0px #000;
    animation: menuGlow 2s ease-in-out infinite alternate;
    margin-bottom: 15px;
}

@keyframes menuGlow {
    from { text-shadow: 0 0 10px var(--gold), 0 0 20px var(--gold), 4px 4px 0px #000; }
    to { text-shadow: 0 0 20px var(--gold), 0 0 40px var(--gold), 0 0 60px var(--red), 4px 4px 0px #000; }
}

.menu-subtitle {
    font-size: 0.8rem;
    color: var(--red);
    margin-bottom: 20px;
}

/* Menu Dealer Icon - reuses game satan sprite but scaled up */
.menu-dealer-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    animation: satanFloat 3s ease-in-out infinite;
}

.satan-container.menu-size {
    width: 100px;
    height: 110px;
    transform: scale(2.2);
    transform-origin: center center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.satan-container.menu-size .satan {
    width: 40px;
    height: 45px;
}

.menu-flames {
    display: flex !important;
}

@keyframes satanFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-15px) rotate(3deg); }
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
}

.menu-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    padding: 20px 40px;
    border: 4px solid var(--gold);
    background: linear-gradient(180deg, #3a2a5a 0%, #1a0a3a 100%);
    color: var(--gold);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 4px 4px 0px #000;
}

.menu-btn:hover {
    background: linear-gradient(180deg, #4a3a6a 0%, #2a1a4a 100%);
    transform: translateY(-3px);
    box-shadow: 4px 7px 0px #000;
}

.start-btn {
    background: linear-gradient(180deg, #2a5a2a 0%, #0a3a0a 100%);
    border-color: var(--green);
    color: var(--green);
    font-size: 1.1rem;
}

.start-btn:hover {
    background: linear-gradient(180deg, #3a6a3a 0%, #1a4a1a 100%);
    box-shadow: 0 0 20px rgba(51, 255, 51, 0.5), 4px 7px 0px #000;
}

.menu-footer {
    font-size: 0.5rem;
    color: #666;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.menu-footer .version-number {
    font-size: 0.55rem;
    color: var(--gold);
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 12px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 4px;
    letter-spacing: 1px;
}

.changelog-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    padding: 8px 16px;
    background: transparent;
    border: 2px solid #555;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
}

.changelog-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(255, 215, 0, 0.1);
}

.menu-footer .disclaimer {
    color: var(--red);
    margin-top: 5px;
}

/* Changelog Modal */
.changelog-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5001;
}

.changelog-content {
    background: linear-gradient(180deg, #2a1a3e 0%, #1a0a2e 100%);
    border: 4px solid var(--gold);
    padding: 30px 40px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
    display: flex;
    flex-direction: column;
}

.changelog-content h2 {
    font-size: 1.1rem;
    color: var(--gold);
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.changelog-entries {
    flex: 1;
    overflow-y: auto;
    padding-right: 10px;
    margin-bottom: 20px;
}

.changelog-entries::-webkit-scrollbar {
    width: 8px;
}

.changelog-entries::-webkit-scrollbar-track {
    background: #1a0a2a;
    border-radius: 4px;
}

.changelog-entries::-webkit-scrollbar-thumb {
    background: var(--purple);
    border-radius: 4px;
}

.changelog-entries::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

.changelog-entry {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(255, 215, 0, 0.2);
}

.changelog-entry:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.changelog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.changelog-version {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.75rem;
    color: var(--green);
    background: rgba(51, 255, 51, 0.1);
    padding: 4px 10px;
    border: 1px solid var(--green);
    border-radius: 3px;
}

.changelog-date {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    color: #888;
}

.changelog-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: var(--gold);
    margin-bottom: 12px;
}

.changelog-changes {
    list-style: none;
    padding: 0;
    margin: 0;
}

.changelog-changes li {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    color: #bbb;
    padding: 6px 0 6px 20px;
    position: relative;
    line-height: 1.6;
}

.changelog-changes li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--gold);
}

/* Responsive changelog */
@media (max-width: 600px) {
    .changelog-content {
        padding: 20px;
        max-height: 85vh;
    }
    
    .changelog-content h2 {
        font-size: 0.9rem;
    }
    
    .changelog-version {
        font-size: 0.6rem;
    }
    
    .changelog-title {
        font-size: 0.5rem;
    }
    
    .changelog-changes li {
        font-size: 0.4rem;
    }
    
    .menu-footer .version-number {
        font-size: 0.45rem;
    }
    
    .changelog-btn {
        font-size: 0.4rem;
        padding: 6px 12px;
    }
}

/* Options Menu */
.options-menu, .howto-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5001;
}

.options-content, .howto-content {
    background: linear-gradient(180deg, #2a1a3e 0%, #1a0a2e 100%);
    border: 4px solid var(--gold);
    padding: 30px 50px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
}

.options-content h2, .howto-content h2 {
    font-size: 1.2rem;
    color: var(--gold);
    text-align: center;
    margin-bottom: 30px;
}

.option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 2px solid #3a2a5a;
}

.option-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: var(--white);
}

.toggle-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    padding: 10px 20px;
    border: 3px solid var(--green);
    background: linear-gradient(180deg, #2a5a2a 0%, #0a3a0a 100%);
    color: var(--green);
    cursor: pointer;
    min-width: 80px;
}

.toggle-btn.off {
    border-color: var(--red);
    background: linear-gradient(180deg, #5a2a2a 0%, #3a0a0a 100%);
    color: var(--red);
}

.file-option {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.file-input {
    display: none;
}

.file-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    padding: 10px 15px;
    border: 2px solid var(--purple);
    background: #2a1a4a;
    color: var(--white);
    cursor: pointer;
}

.file-label:hover {
    background: #3a2a5a;
}

.back-btn {
    margin-top: 30px;
    width: 100%;
}

/* How To Play */
.howto-text {
    text-align: left;
    font-size: 0.55rem;
    line-height: 2;
    color: #ccc;
}

.howto-text p {
    margin-bottom: 10px;
}

.howto-text strong {
    color: var(--gold);
}

.howto-text .warning-text {
    color: var(--red);
    margin-top: 20px;
    text-align: center;
}

/* Music Controls */
.music-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 8px;
}

.music-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    background: linear-gradient(180deg, #3a2a5a 0%, #1a0a3a 100%);
    border: 3px solid var(--gold);
    color: var(--gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 2px 2px 0px #000;
}

.music-btn:hover {
    background: linear-gradient(180deg, #4a3a6a 0%, #2a1a4a 100%);
    transform: scale(1.1);
}

.music-btn.playing {
    animation: musicPulse 1s ease-in-out infinite;
    border-color: var(--green);
}

@keyframes musicPulse {
    0%, 100% { box-shadow: 0 0 5px var(--green); }
    50% { box-shadow: 0 0 15px var(--green), 0 0 25px var(--green); }
}

.volume-slider-container {
    background: linear-gradient(180deg, #3a2a5a 0%, #1a0a3a 100%);
    border: 2px solid var(--gold);
    padding: 8px 12px;
    border-radius: 4px;
}

.volume-slider {
    width: 80px;
    height: 6px;
    appearance: none;
    background: #1a0a2a;
    border-radius: 3px;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--gold);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--gold);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.volume-slider-small {
    width: 60px;
    height: 5px;
    appearance: none;
    background: #1a0a2a;
    border-radius: 3px;
    cursor: pointer;
}

.volume-slider-small::-webkit-slider-thumb {
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--gold);
    border-radius: 50%;
    cursor: pointer;
}

/* Menu Back Button */
.menu-back-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    padding: 8px 12px;
    background: linear-gradient(180deg, #2a5a2a 0%, #1a3a1a 100%);
    color: var(--gold);
    border: 3px solid var(--gold);
    cursor: pointer;
    box-shadow: 3px 3px 0px #000;
    transition: all 0.2s ease;
}

.menu-back-btn:hover {
    background: linear-gradient(180deg, #3a7a3a 0%, #2a5a2a 100%);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0px #000;
}

.menu-back-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px #000;
}

/* Top Left Buttons Container */
.top-left-buttons {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 8px;
    z-index: 100;
}

.top-left-buttons.hidden {
    display: none;
}

/* Reset Button */
.reset-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    padding: 8px 12px;
    background: linear-gradient(180deg, #8b0000 0%, #4a0000 100%);
    color: var(--gold);
    border: 3px solid var(--gold);
    cursor: pointer;
    box-shadow: 3px 3px 0px #000;
    transition: all 0.2s ease;
}

.reset-btn:hover {
    background: linear-gradient(180deg, #aa0000 0%, #6a0000 100%);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0px #000;
}

.reset-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px #000;
}

/* Menu Button (small) */
.menu-btn-small {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    padding: 8px 12px;
    background: linear-gradient(180deg, #4a2c7a 0%, #2a1a4a 100%);
    color: var(--gold);
    border: 3px solid var(--purple);
    cursor: pointer;
    box-shadow: 3px 3px 0px #000;
    transition: all 0.2s ease;
}

.menu-btn-small:hover {
    background: linear-gradient(180deg, #6a3c9a 0%, #3a2a5a 100%);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0px #000;
}

.menu-btn-small:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px #000;
}

/* Shop Button (small - top area) */
.shop-btn-small {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    padding: 8px 12px;
    background: linear-gradient(180deg, #198754 0%, #0d5c36 100%);
    color: #fff;
    border: 2px solid #3cb879;
    cursor: pointer;
    box-shadow: 3px 3px 0px #000;
    transition: all 0.2s ease;
}

.shop-btn-small:hover {
    background: linear-gradient(180deg, #28a745 0%, #1e7e34 100%);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0px #000;
}

.shop-btn-small:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px #000;
}

/* Card Tracker (Left Side) */
.card-tracker {
    position: absolute;
    left: 10px;
    top: 60px;
    height: 720px;
    width: 150px;
    background: linear-gradient(180deg, #2a1a3e 0%, #1a0a2e 100%);
    border: 3px solid var(--gold);
    padding: 10px;
    z-index: 100;
    box-shadow: 4px 4px 0px #000;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.card-tracker h3 {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--gold);
    text-align: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--purple);
}

.suit-section {
    margin-bottom: 6px;
}

.suit-header {
    font-size: 1rem;
    text-align: center;
    margin-bottom: 3px;
}

.suit-header.spades, .suit-header.clubs {
    color: #333;
    text-shadow: 0 0 3px #fff;
}

.suit-header.hearts, .suit-header.diamonds {
    color: #ff3333;
    text-shadow: 0 0 3px #ff6666;
}

.suit-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
}

.tracker-card {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    width: 20px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #000;
    border-radius: 2px;
    border: 1px solid #666;
    transition: all 0.3s ease;
}

.tracker-card.played {
    background: #444;
    color: #666;
    opacity: 0.4;
    text-decoration: line-through;
    border-color: #333;
}

/* Red suits */
.suit-section:nth-child(2) .tracker-card,
.suit-section:nth-child(3) .tracker-card {
    color: #cc0000;
}

.suit-section:nth-child(2) .tracker-card.played,
.suit-section:nth-child(3) .tracker-card.played {
    color: #553333;
}

.scoreboard {
    position: absolute;
    right: 10px;
    top: 70px;
    height: 710px;
    width: 150px;
    background: linear-gradient(180deg, #2a1a3e 0%, #1a0a2e 100%);
    border: 3px solid var(--gold);
    padding: 10px;
    z-index: 90;
    box-shadow: 4px 4px 0px #000;
    display: flex;
    flex-direction: column;
}

.scoreboard h3 {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--gold);
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--purple);
}

.scoreboard-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    margin: 5px 0;
    border-radius: 4px;
}

.dealer-entry {
    background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, transparent 100%);
    border-left: 3px solid var(--red);
}

.player-entry {
    background: linear-gradient(90deg, rgba(100, 100, 255, 0.2) 0%, transparent 100%);
    border-left: 3px solid #6666ff;
}

.scoreboard-icon {
    font-size: 1.5rem;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Scale down game board icons for scoreboard */
.satan-container.scoreboard-size,
.loser-container.scoreboard-size {
    transform: scale(0.85);
    transform-origin: center center;
}

/* Enable flames for scoreboard satan */
.scoreboard-size .flames {
    display: flex;
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    gap: 2px;
    z-index: 1;
}

/* Mini Satan Sprite for Scoreboard (legacy) */
.mini-satan-sprite {
    width: 28px;
    height: 28px;
    position: relative;
}

.mini-horns {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    display: flex;
    justify-content: space-between;
}

.mini-horn {
    width: 6px;
    height: 8px;
    background: linear-gradient(180deg, #ff3333 0%, #8b0000 100%);
}

.mini-horn.left {
    transform: rotate(-15deg);
    border-radius: 3px 0 0 0;
}

.mini-horn.right {
    transform: rotate(15deg);
    border-radius: 0 3px 0 0;
}

.mini-satan-head {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 18px;
    background: linear-gradient(180deg, #cc0000 0%, #8b0000 100%);
    border-radius: 4px;
}

.mini-satan-eyes {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    display: flex;
    justify-content: space-between;
}

.mini-eye {
    width: 5px;
    height: 5px;
    background: #ffff00;
    border-radius: 50%;
    box-shadow: 0 0 3px #ff6600;
}

/* Mini Loser Sprite for Scoreboard */
.mini-loser-sprite {
    width: 28px;
    height: 28px;
    position: relative;
}

.mini-loser-head {
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    background: linear-gradient(180deg, #b8e8b8 0%, #90c090 100%);
    border-radius: 50%;
    border: 1px solid #666;
}

.mini-loser-eyes {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    display: flex;
    justify-content: space-between;
}

.mini-loser-eye {
    width: 4px;
    height: 4px;
    background: #333;
    border-radius: 50%;
}

.mini-loser-mouth {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 3px;
    border: 2px solid #666;
    border-top: none;
    border-radius: 0 0 4px 4px;
    background: transparent;
}

.scoreboard-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scoreboard-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: #aaa;
}

.scoreboard-score {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    color: var(--white);
    font-weight: bold;
}

.scoreboard-score.winning {
    color: var(--green);
    text-shadow: 0 0 5px var(--green);
}

.scoreboard-score.losing {
    color: var(--red);
    text-shadow: 0 0 5px var(--red);
}

.scoreboard-score.tied {
    color: var(--gold);
}

.scoreboard-vs {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--gold);
    text-align: center;
    margin: 5px 0;
}

.scoreboard-history {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 2px solid var(--purple);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.history-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.35rem;
    color: #888;
    display: block;
    margin-bottom: 5px;
}

.history-list {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    color: #aaa;
    flex: 1;
    overflow-y: auto;
    line-height: 1.6;
}

.history-list::-webkit-scrollbar {
    width: 6px;
}

.history-list::-webkit-scrollbar-track {
    background: #1a0a2a;
}

.history-list::-webkit-scrollbar-thumb {
    background: var(--purple);
    border-radius: 3px;
}

.history-list::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

.history-item {
    display: block;
}

.history-item.win {
    color: var(--green);
}

.history-item.loss {
    color: var(--red);
}

.history-item.push {
    color: var(--gold);
}

.history-item.placeholder {
    color: #444;
    opacity: 0.5;
}

/* ========================================
   ROGUELIKE UI ELEMENTS
   ======================================== */

/* Room Indicator Bar */
/* Room indicator removed - floor info shown in stats bar */

/* Curses Bar */
.curses-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    padding: 2px 6px;
    background: rgba(100, 0, 0, 0.3);
    border: 1px solid #660000;
    font-size: 0.4rem;
    flex-shrink: 0;
}

.curses-label {
    color: var(--red);
    font-size: 0.4rem;
}

.curse-badge {
    background: linear-gradient(180deg, #4a0000 0%, #2a0000 100%);
    border: 2px solid var(--red);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.45rem;
    color: #ff6666;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* Relic badge styling */
.perk-badge.relic {
    background: linear-gradient(180deg, #4a4a0a 0%, #2a2a00 100%);
    border-color: #aaaa00;
    color: #ffff66;
}

.perk-badge.side-bet {
    background: linear-gradient(180deg, #0a4a3a 0%, #002a2a 100%);
    border-color: #00ccaa;
    color: #66ffdd;
}

/* Side Bet Perk Unlock Popup */
.side-bet-perk-unlock {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, #0a3a3a 0%, #002020 100%);
    border: 4px solid #00ccaa;
    border-radius: 12px;
    padding: 30px 40px;
    text-align: center;
    z-index: 10000;
    box-shadow: 0 0 60px rgba(0, 204, 170, 0.6), inset 0 0 20px rgba(0, 204, 170, 0.2);
    animation: perkUnlockPop 0.5s ease-out;
}

@keyframes perkUnlockPop {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.side-bet-perk-unlock.fade-out {
    animation: perkUnlockFade 0.5s ease-out forwards;
}

@keyframes perkUnlockFade {
    to {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }
}

.perk-unlock-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    color: #00ffcc;
    text-shadow: 0 0 10px #00ccaa;
    margin-bottom: 15px;
}

.perk-unlock-icon {
    font-size: 3rem;
    margin: 15px 0;
    animation: perkIconBounce 1s ease-in-out infinite;
}

@keyframes perkIconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.perk-unlock-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.75rem;
    color: var(--gold);
    margin-bottom: 10px;
}

.perk-unlock-desc {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #aaffee;
    margin-bottom: 15px;
    line-height: 1.5;
}

.perk-unlock-milestone {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: #66aa88;
    padding: 5px 10px;
    background: rgba(0, 100, 80, 0.3);
    border-radius: 4px;
}

/* Event Popup */
.event-content {
    border-color: #6666ff !important;
    box-shadow: 0 0 40px rgba(100, 100, 255, 0.5) !important;
    max-width: 500px;
}

.event-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.event-icon {
    font-size: 3rem;
    animation: eventFloat 2s ease-in-out infinite;
}

@keyframes eventFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.event-content h2 {
    color: #8888ff !important;
    font-size: 1rem;
}

.event-desc {
    font-size: 0.6rem;
    color: #ccc;
    margin-bottom: 25px;
    line-height: 1.6;
    text-align: center;
}

.event-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.event-choice-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    padding: 12px 20px;
    background: linear-gradient(180deg, #3a2a5a 0%, #1a0a3a 100%);
    border: 3px solid var(--purple);
    color: var(--white);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.event-choice-btn:hover {
    border-color: var(--gold);
    background: linear-gradient(180deg, #4a3a6a 0%, #2a1a4a 100%);
    transform: translateX(5px);
}

.choice-cost {
    color: var(--red);
    font-size: 0.45rem;
    margin-left: 8px;
}

/* Shop Popup */
.shop-content {
    border-color: var(--green) !important;
    box-shadow: 0 0 40px rgba(51, 255, 51, 0.3) !important;
    max-width: 600px;
}

.shop-content h2 {
    color: var(--green) !important;
    margin-bottom: 10px;
}

.shop-money {
    font-size: 0.7rem;
    color: #aaa;
    margin-bottom: 20px;
}

.shop-money .gold {
    color: var(--gold);
    font-size: 0.9rem;
}

.shop-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.shop-item {
    font-family: 'Press Start 2P', monospace;
    background: linear-gradient(180deg, #2a3a2a 0%, #0a2a0a 100%);
    border: 3px solid #336633;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.shop-item:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
}

.shop-item.unaffordable {
    opacity: 0.4;
    cursor: not-allowed;
}

.item-icon {
    font-size: 1.5rem;
    text-align: center;
}

.item-name {
    font-size: 0.45rem;
    color: var(--gold);
    text-align: center;
}

.item-desc {
    font-size: 0.4rem;
    color: #aaa;
    text-align: center;
}

.item-cost {
    font-size: 0.5rem;
    color: var(--green);
    text-align: center;
    margin-top: 5px;
}

.shop-leave-btn {
    width: 100%;
    margin-top: 10px;
}

/* Pre-Round Shop Button */
.shop-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    padding: 8px 16px;
    background: linear-gradient(180deg, #4a2c7a 0%, #2a1a4a 100%);
    border: 3px solid #8844cc;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s;
    text-shadow: 1px 1px 0 #000;
}

.shop-btn:hover {
    background: linear-gradient(180deg, #6a3c9a 0%, #3a2a5a 100%);
    border-color: #aa66ee;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(136, 68, 204, 0.4);
}

.shop-btn:active {
    transform: translateY(0);
}

/* Pre-Round Shop Popup */
.pre-round-shop-content {
    max-width: 850px;
    padding: 20px;
}

.pre-round-shop-content h2 {
    margin-bottom: 8px;
}

.pre-round-shop-content .shop-money {
    margin-bottom: 5px;
}

.shop-info {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    color: #aaa;
    margin-bottom: 12px;
    text-align: center;
}

.pre-round-shop-items {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-bottom: 12px;
    justify-content: center;
}

button.perk-shop-item {
    font-family: 'Press Start 2P', monospace;
    background: linear-gradient(180deg, #2a2a3a 0%, #1a1a2a 100%);
    border: 3px solid #4466aa;
    padding: 18px 15px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    width: 250px;
    min-height: 220px;
    text-align: center;
    color: inherit;
    flex-shrink: 0;
}

.perk-shop-item:hover:not(.unaffordable):not(.owned) {
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

.perk-shop-item.unaffordable {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #333;
}

.perk-shop-item.owned {
    opacity: 0.7;
    cursor: default;
    border-color: var(--green);
    background: linear-gradient(180deg, #1a3a1a 0%, #0a2a0a 100%);
}

.perk-shop-item.owned::after {
    content: '✓ OWNED';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 100, 0, 0.9);
    color: var(--green);
    padding: 4px 8px;
    font-size: 0.5rem;
    border: 2px solid var(--green);
}

.perk-icon {
    font-size: 2.8rem;
    text-align: center;
}

.perk-name {
    font-size: 0.7rem;
    color: var(--gold);
    text-align: center;
}

.perk-desc {
    font-size: 0.55rem;
    color: #bbb;
    text-align: center;
    line-height: 1.6;
}

.perk-cost {
    font-size: 0.8rem;
    color: var(--green);
    text-align: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #333;
}

.shop-active-perks {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #333;
    padding: 8px;
    margin-bottom: 10px;
}

.shop-active-perks h3 {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: var(--gold);
    margin-bottom: 5px;
}

#shop-active-perks-list {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.35rem;
    color: #aaa;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.active-perk-badge {
    background: linear-gradient(180deg, #336633 0%, #224422 100%);
    border: 2px solid var(--green);
    padding: 3px 6px;
    color: #fff;
}

.shop-close-btn {
    width: 100%;
    background: linear-gradient(180deg, #4a2a2a 0%, #2a1a1a 100%);
    border-color: #aa4444;
}

.shop-close-btn:hover {
    background: linear-gradient(180deg, #5a3a3a 0%, #3a2a2a 100%);
    border-color: #cc6666;
}

.shop-empty {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--gold);
    text-align: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px dashed #555;
}

/* Elite Mode Table Styling */
.table.elite-mode {
    border-color: #ff6600;
    box-shadow: 
        var(--pixel-shadow),
        inset 0 0 40px rgba(255, 102, 0, 0.2),
        0 0 20px rgba(255, 102, 0, 0.4);
}

/* Rigged Effects */
.card.rigged {
    animation: riggedCard 0.5s ease-out;
}

@keyframes riggedCard {
    0% { transform: scale(1); }
    25% { transform: scale(1.15) rotate(3deg); }
    50% { transform: scale(0.9) rotate(-3deg); }
    75% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.dealer-winning {
    animation: dealerLaugh 0.5s infinite;
}

@keyframes dealerLaugh {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ========================================
   RESPONSIVE DESIGN - Mobile First
   ======================================== */

/* Hide sidebars on smaller screens - they need too much space */
@media (max-width: 1100px) {
    .card-tracker,
    .scoreboard {
        display: none !important;
    }
    
    .game-container {
        left: 0;
        max-width: 100%;
        padding: 4px 8px;
    }
}

/* Tablet and smaller desktop */
@media (max-width: 900px) {
    .game-container {
        padding: 4px 8px;
    }
    
    header {
        padding: 3px 8px;
    }
    
    header h1 {
        font-size: 0.9rem;
        letter-spacing: 1px;
    }
    
    .money-display {
        padding: 3px 8px;
    }
    
    .money-label {
        font-size: 0.4rem;
    }
    
    .money-amount {
        font-size: 0.85rem;
    }
    
    .table {
        padding: 4px 8px;
    }
    
    /* Deck position adjustment */
    .deck-area {
        right: 5px;
    }
    
    .deck-pile {
        width: 40px;
        height: 55px;
    }
    
    .deck-card {
        width: 35px;
        height: 48px;
    }
    
    .deck-card::before {
        font-size: 10px;
    }
    
    .deck-count {
        font-size: 10px;
    }
    
    .card {
        width: 42px;
        height: 60px;
    }
    
    .card-center {
        font-size: 0.95rem;
    }
    
    .card-corner {
        font-size: 0.45rem;
    }
    
    .stats-bar {
        padding: 3px 6px;
        font-size: 0.4rem;
    }
    
    .upgrades-bar {
        padding: 2px 6px;
        font-size: 0.35rem;
    }
}

/* Mobile landscape and portrait */
@media (max-width: 700px) {
    html, body {
        overflow: hidden;
    }
    
    .game-container {
        padding: 3px 5px;
        height: 100vh;
        max-height: 100vh;
        overflow: hidden;
    }
    
    header {
        padding: 2px 6px;
    }
    
    header h1 {
        font-size: 0.75rem;
        letter-spacing: 1px;
    }
    
    .money-display {
        padding: 2px 6px;
    }
    
    .money-label {
        font-size: 0.35rem;
        display: none;
    }
    
    .money-amount {
        font-size: 0.75rem;
    }
    
    .table {
        padding: 4px;
        border-width: 2px;
        border-radius: 6px;
    }
    
    .curses-bar {
        padding: 2px 4px;
    }
    
    .curse-badge {
        font-size: 0.35rem;
        padding: 1px 3px;
    }
    
    /* Deck - smaller and repositioned */
    .deck-area {
        position: absolute;
        right: 3px;
        top: 3px;
        transform: none;
    }
    
    .deck-pile {
        width: 32px;
        height: 44px;
    }
    
    .deck-card {
        width: 28px;
        height: 38px;
    }
    
    .deck-card::before {
        font-size: 8px;
    }
    
    .deck-count {
        font-size: 8px;
    }
    
    .deck-label {
        font-size: 5px;
    }
    
    /* Sections */
    .section-header {
        padding: 2px 4px;
        font-size: 0.45rem;
        gap: 4px;
    }
    
    .dealer-title,
    .player-title {
        font-size: 0.45rem;
    }
    
    .satan-subtitle,
    .loser-subtitle {
        display: none;
    }
    
    /* Character sprites - hide on mobile for space */
    .satan-container,
    .loser-container {
        width: 24px;
        height: 24px;
    }
    
    .satan {
        width: 20px;
        height: 22px;
    }
    
    .horns {
        top: -3px;
    }
    
    .horn {
        width: 4px;
        height: 7px;
    }
    
    .satan-head {
        width: 18px;
        height: 16px;
        margin-top: 2px;
    }
    
    .satan-eyes {
        padding: 2px 1px 0;
    }
    
    .eye {
        width: 5px;
        height: 4px;
    }
    
    .pupil {
        width: 2px;
        height: 3px;
    }
    
    .satan-mouth {
        width: 10px;
        height: 4px;
    }
    
    .fang {
        width: 2px;
        height: 3px;
    }
    
    .goatee {
        display: none;
    }
    
    .flames {
        display: none;
    }
    
    .loser-container {
        width: 24px;
        height: 26px;
    }
    
    .loser {
        width: 20px;
        height: 22px;
    }
    
    .loser-head {
        width: 24px;
        height: 24px;
        margin-top: 5px;
    }
    
    .loser-hair {
        display: none;
    }
    
    .hair-strand {
        display: none;
    }
    
    .bald-spot {
        display: none;
    }
    
    .stink-lines {
        display: none;
    }
    
    /* Cards - mobile size */
    .hand {
        min-height: 50px;
        gap: 3px;
        padding: 2px;
    }
    
    .card {
        width: 36px;
        height: 52px;
        border-width: 1px;
        border-radius: 3px;
        padding: 2px;
        box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
    }
    
    .card-corner {
        font-size: 0.4rem;
    }
    
    .card-center {
        font-size: 0.85rem;
    }
    
    .card.face-down::after {
        font-size: 0.9rem;
    }
    
    .score {
        font-size: 0.65rem;
        padding: 1px;
    }
    
    /* Message area */
    .message-area {
        padding: 3px;
        margin: 2px 0;
        font-size: 0.45rem;
        min-height: 24px;
    }
    
    /* Controls */
    .controls {
        margin-top: 3px;
    }
    
    /* Side bets - extra compact on mobile */
    .side-bets-section {
        padding: 2px 4px;
        margin-bottom: 3px;
    }
    
    .side-bets-title {
        font-size: 0.4rem;
        margin-bottom: 2px;
    }
    
    .side-bets-optional {
        display: none;
    }
    
    .side-bets-row {
        gap: 4px;
    }
    
    .side-bet-option {
        padding: 2px 4px;
    }
    
    .side-bet-label {
        font-size: 0.4rem;
        margin-bottom: 2px;
    }
    
    .side-bet-btn {
        font-size: 0.3rem;
        padding: 2px 3px;
    }
    
    .side-bets-total {
        display: none;
    }
    
    .betting-controls {
        padding: 4px;
        gap: 6px;
    }

    .betting-actions {
        padding: 4px;
        border-width: 1px;
        gap: 3px;
    }

    .betting-action-btn {
        padding: 6px 3px;
        font-size: 0.4rem;
        border-width: 1px;
    }

    .bet-areas-row {
        gap: 6px;
    }

    .main-bet-area {
        min-width: 90px;
        width: 100px;
        min-height: 72px;
        padding: 6px 8px 18px;
    }

    .side-bet-area {
        min-width: 72px;
        width: 82px;
        min-height: 64px;
        padding: 5px 6px 16px;
    }

    .chip {
        width: 32px;
        height: 32px;
    }

    .chip::before {
        width: 20px;
        height: 20px;
    }

    .chip-value {
        font-size: 0.35rem;
    }
    
    .rebet-section {
        margin-bottom: 3px;
        padding-bottom: 3px;
    }
    
    .rebet-btn {
        font-size: 0.45rem;
        padding: 5px 15px;
    }
    
    .rebet-amount {
        font-size: 0.55rem;
    }
    
    .rebet-or {
        font-size: 0.35rem;
        margin-top: 3px;
    }
    
    .bet-buttons {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 2px;
    }
    
    .bet-btn {
        padding: 5px 2px;
        font-size: 0.4rem;
        flex: none;
    }
    
    .bet-btn.all-in {
        grid-column: span 1;
    }
    
    .subtext {
        display: none;
    }
    
    .current-bet {
        font-size: 0.45rem;
        margin-top: 4px;
        flex-direction: row;
        gap: 6px;
    }
    
    #current-bet {
        font-size: 0.55rem;
    }
    
    .deal-btn {
        font-size: 0.45rem;
        padding: 6px 15px;
    }
    
    .game-controls {
        padding: 4px;
        border-width: 1px;
        gap: 3px;
    }
    
    .action-btn {
        padding: 6px 4px;
        font-size: 0.45rem;
        border-width: 1px;
    }
    
    .action-btn .subtext {
        display: none;
    }
    
    /* Stats bar */
    .stats-bar {
        margin-top: 2px;
        padding: 2px 4px;
        font-size: 0.35rem;
        gap: 4px;
    }
    
    .stat {
        white-space: nowrap;
    }
    
    .upgrades-bar {
        margin-top: 2px;
        padding: 2px 4px;
        font-size: 0.3rem;
    }
    
    .perk-badge {
        font-size: 0.3rem;
        padding: 1px 3px;
    }
    
    /* Fixed elements */
    .reset-btn {
        font-size: 0.35rem;
        padding: 4px 6px;
    }
    
    .music-controls {
        top: 5px;
        right: 5px;
        gap: 3px;
    }
    
    .music-btn {
        width: 24px;
        height: 24px;
        font-size: 0.8rem;
    }
    
    .volume-slider-container {
        padding: 3px 5px;
    }
    
    .volume-slider-small {
        width: 40px;
    }
}

/* Small mobile phones */
@media (max-width: 400px) {
    .game-container {
        padding: 2px 3px;
    }
    
    header h1 {
        font-size: 0.65rem;
    }
    
    .money-display {
        padding: 2px 5px;
        gap: 4px;
    }
    
    .money-label {
        display: none;
    }
    
    .money-amount {
        font-size: 0.65rem;
    }
    
    .table {
        padding: 3px;
    }
    
    .section-header {
        padding: 2px 3px;
    }
    
    .dealer-title,
    .player-title {
        font-size: 0.4rem;
    }
    
    /* Even smaller cards */
    .card {
        width: 32px;
        height: 46px;
    }
    
    .card-corner {
        font-size: 0.35rem;
    }
    
    .card-center {
        font-size: 0.7rem;
    }
    
    .hand {
        min-height: 48px;
        gap: 2px;
    }
    
    .message-area {
        font-size: 0.4rem;
        min-height: 20px;
        padding: 2px;
    }
    
    .bet-buttons {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .bet-btn {
        font-size: 0.35rem;
        padding: 4px 2px;
    }
    
    .bet-btn.all-in {
        grid-column: span 1;
    }
    
    .action-btn {
        font-size: 0.4rem;
        padding: 5px 3px;
    }
    
    .stats-bar {
        font-size: 0.3rem;
    }
    
    .score {
        font-size: 0.55rem;
    }
    
    /* Hide character sprites on tiny screens */
    .satan-container,
    .loser-container {
        display: none;
    }
}

/* Very short screens (landscape mobile) */
@media (max-height: 550px) {
    html, body {
        overflow: hidden;
    }
    
    .game-container {
        height: 100vh;
        max-height: 100vh;
        padding: 2px 5px;
        overflow: hidden;
    }
    
    header {
        padding: 2px 5px;
    }
    
    header h1 {
        font-size: 0.65rem;
    }
    
    .money-display {
        padding: 2px 5px;
    }
    
    .table {
        padding: 3px 5px;
    }
    
    .section-header {
        padding: 1px 3px;
    }
    
    .satan-container,
    .loser-container {
        display: none;
    }
    
    .hand {
        min-height: 45px;
    }
    
    .card {
        width: 34px;
        height: 48px;
    }
    
    .card-center {
        font-size: 0.75rem;
    }
    
    .message-area {
        min-height: 20px;
        padding: 2px;
        margin: 2px 0;
    }
    
    .controls {
        margin-top: 2px;
    }
    
    .betting-controls {
        padding: 3px;
        gap: 4px;
    }

    .betting-actions {
        padding: 3px;
    }
    
    .game-controls {
        padding: 3px;
    }
    
    .action-btn {
        padding: 5px 3px;
    }
    
    .stats-bar {
        margin-top: 2px;
        padding: 2px;
    }
    
    .upgrades-bar {
        margin-top: 1px;
        padding: 2px;
    }
    
    /* Hide side bets in landscape for space */
    .side-bets-section {
        display: none;
    }
}

/* Taller screens but narrow - typical mobile portrait */
@media (max-width: 500px) and (min-height: 700px) {
    .game-container {
        padding: 4px 6px;
    }
    
    .table {
        flex: 1;
        min-height: 0;
    }
    
    .hand {
        min-height: 55px;
    }
    
    .card {
        width: 40px;
        height: 58px;
    }
    
    .card-center {
        font-size: 0.9rem;
    }
    
    .bet-btn {
        padding: 6px 4px;
    }
    
    .action-btn {
        padding: 8px 5px;
    }
}

/* Main Menu responsive */
@media (max-width: 600px) {
    .menu-content {
        padding: 20px;
    }
    
    .menu-title {
        font-size: 1.5rem;
    }
    
    .menu-subtitle {
        font-size: 0.6rem;
    }
    
    .satan-container.menu-size {
        transform: scale(1.8);
    }
    
    .menu-buttons {
        gap: 10px;
        margin-bottom: 25px;
    }
    
    .menu-btn {
        font-size: 0.7rem;
        padding: 15px 25px;
    }
    
    .start-btn {
        font-size: 0.85rem;
    }
    
    .menu-footer {
        font-size: 0.4rem;
    }
}

/* Options/How-to menu responsive */
@media (max-width: 500px) {
    .options-content, 
    .howto-content {
        padding: 20px;
        width: 95%;
    }
    
    .options-content h2,
    .howto-content h2 {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }
    
    .option-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 0;
    }
    
    .option-label {
        font-size: 0.5rem;
    }
    
    .toggle-btn {
        font-size: 0.5rem;
        padding: 8px 15px;
    }
    
    .volume-slider {
        width: 100%;
    }
    
    .howto-text {
        font-size: 0.5rem;
        line-height: 1.8;
    }
    
    .back-btn {
        margin-top: 20px;
        font-size: 0.6rem;
        padding: 12px 20px;
    }
}

/* Popup responsive */
@media (max-width: 500px) {
    .popup-content {
        max-width: 95%;
        padding: 20px 15px;
    }
    
    .popup-content h2 {
        font-size: 1rem;
    }
    
    .broke-message {
        font-size: 0.6rem;
    }
    
    .restart-btn {
        font-size: 0.6rem;
        padding: 12px 20px;
    }
    
    /* Upgrade popup */
    .upgrade-content {
        max-width: 95%;
    }
    
    .upgrade-options {
        flex-direction: column;
        gap: 10px;
    }
    
    .upgrade-card {
        width: 100%;
    }
    
    .upgrade-icon {
        font-size: 1.5rem;
    }
    
    .upgrade-name {
        font-size: 0.5rem;
    }
    
    .upgrade-desc {
        font-size: 0.4rem;
    }
    
    /* Boss popup */
    .boss-portrait {
        font-size: 2.5rem;
    }
    
    .boss-content h2 {
        font-size: 0.85rem;
    }
    
    .boss-description {
        font-size: 0.5rem;
    }
    
    .boss-rule {
        font-size: 0.45rem;
        padding: 8px;
    }
    
    .boss-fight-btn {
        font-size: 0.65rem;
        padding: 12px 20px;
    }
    
    /* Victory popup */
    .victory-content h2 {
        font-size: 1rem;
    }
    
    .victory-message {
        font-size: 0.55rem;
    }
    
    .victory-stats {
        font-size: 0.45rem;
    }
    
    /* Event popup mobile */
    .event-content {
        max-width: 95%;
        padding: 20px 15px;
    }
    
    .event-icon {
        font-size: 2rem;
    }
    
    .event-content h2 {
        font-size: 0.8rem;
    }
    
    .event-desc {
        font-size: 0.5rem;
    }
    
    .event-choice-btn {
        font-size: 0.45rem;
        padding: 10px 12px;
    }
    
    .choice-cost {
        font-size: 0.4rem;
    }
    
    /* Shop popup mobile */
    .shop-content {
        max-width: 95%;
        padding: 20px 15px;
    }
    
    .shop-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .shop-item {
        padding: 8px;
    }
    
    .item-icon {
        font-size: 1.2rem;
    }
    
    .item-name {
        font-size: 0.4rem;
    }
    
    .item-desc {
        font-size: 0.35rem;
    }
    
    .item-cost {
        font-size: 0.45rem;
    }
}

/* Shuffle overlay responsive */
@media (max-width: 500px) {
    .shuffle-message {
        padding: 20px 30px;
    }
    
    .shuffle-message h2 {
        font-size: 1rem;
    }
    
    .shuffle-message p {
        font-size: 0.5rem;
    }
}

/* Handle notch/safe areas on modern phones */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
    
    .game-container {
        padding-top: max(8px, env(safe-area-inset-top));
    }
}

/* ===== FLOOR MAP ===== */
#floor-map {
    z-index: 200;
}
.floor-map-content {
    max-width: 920px;
    width: 95%;
    background: linear-gradient(180deg, #1a0a12 0%, #0d0610 100%);
    border: 3px solid #8b0000;
}
.floor-map-contract {
    color: #ffd700;
    font-size: 0.65rem;
    margin: 8px 0;
    line-height: 1.5;
}
.floor-map-hint {
    font-size: 0.5rem;
    color: #aaa;
    margin-bottom: 16px;
}
.floor-map-nodes {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    min-height: 180px;
    padding: 12px 0;
}
.map-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.map-connector {
    display: flex;
    align-items: center;
    color: #664;
    font-size: 1.4rem;
    padding: 0 2px;
}
.map-node {
    background: #221018;
    border: 2px solid #553;
    color: #ccc;
    font-family: "Press Start 2P", monospace;
    font-size: 0.4rem;
    padding: 10px 8px;
    min-width: 72px;
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.map-node-icon { font-size: 1.1rem; line-height: 1; }
.map-node-label { text-align: center; line-height: 1.3; max-width: 80px; }
.map-node.available {
    border-color: #ffd700;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
    animation: mapPulse 1.6s ease-in-out infinite;
}
.map-node.available:hover {
    transform: scale(1.06);
    background: #3a1820;
}
.map-node.completed {
    opacity: 0.45;
    border-color: #444;
}
.map-node.current {
    outline: 2px dashed #0f0;
}
.map-node.locked {
    opacity: 0.35;
    filter: grayscale(0.8);
}
.map-node[data-type="boss"].available {
    border-color: #ff2222;
    box-shadow: 0 0 14px rgba(255, 0, 0, 0.5);
}
.map-node[data-type="boss"].contract-risk.available {
    border-color: #ff8800;
    box-shadow: 0 0 12px rgba(255, 140, 0, 0.45);
}
.map-node[data-type="shop"].available { border-color: #4af; }
.map-node[data-type="elite"].available { border-color: #f84; }
@keyframes mapPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 215, 0, 0.25); }
    50% { box-shadow: 0 0 14px rgba(255, 215, 0, 0.55); }
}
.game-container.map-focus .table,
.game-container.map-focus .controls,
.game-container.map-focus .money-display {
    filter: brightness(0.35);
    pointer-events: none;
}
.stats-bar .contract-stat .stat-value {
    font-size: 0.45rem;
    max-width: 280px;
    display: inline-block;
    line-height: 1.4;
    text-align: left;
}
.boss-portrait {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.boss-portrait .dealer-sprite {
    transform: scale(1.8);
    margin: 16px;
}
.table.elite-mode {
    box-shadow: 0 0 20px rgba(255, 120, 40, 0.45);
}
#dealer-sprite-mount {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    min-height: 35px;
}
#dealer-sprite-mount.elite-tint .house-dealer-container {
    filter: hue-rotate(-25deg) saturate(1.4) brightness(1.1);
}
.dealer-sprite {
    position: relative;
    width: 35px;
    height: 35px;
}

/* ===== HOUSE DEALER ===== */
.house-dealer-container { width: 35px; height: 35px; position: relative; }
.house-dealer { position: relative; width: 28px; height: 32px; margin: 0 auto; }
.hd-visor {
    position: absolute; top: 0; left: 2px; right: 2px; height: 6px;
    background: #111; border-radius: 2px 2px 0 0; z-index: 3;
}
.hd-visor::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
    background: rgba(0,200,255,0.35);
}
.hd-head {
    width: 22px; height: 20px; margin: 5px auto 0;
    background: linear-gradient(180deg, #c4a882, #a08060);
    border-radius: 5px; border: 1px solid #5a4030; position: relative;
}
.hd-eyes { display: flex; justify-content: space-around; padding: 5px 2px 0; }
.hd-eye {
    width: 5px; height: 4px; background: #1a1a1a; border-radius: 1px; position: relative;
}
.hd-pupil {
    width: 2px; height: 2px; background: #0ff; position: absolute; top: 1px; left: 1px;
    box-shadow: 0 0 3px #0ff;
}
.hd-nose {
    width: 3px; height: 3px; background: #8a6040; margin: 1px auto 0; border-radius: 1px;
}
.hd-mouth {
    width: 10px; height: 2px; background: #3a2010; margin: 2px auto 0; border-radius: 1px;
}
.hd-bowtie {
    width: 12px; height: 6px; background: #8b0000; margin: 2px auto 0;
    clip-path: polygon(0 50%, 40% 0, 40% 100%, 0 50%, 100% 50%, 60% 0, 60% 100%);
}
.hd-collar {
    width: 18px; height: 4px; background: #eee; margin: 1px auto 0; border-radius: 0 0 2px 2px;
}

/* ===== ANOMALY BOSSES (compact CSS sprites) ===== */
.pitboss .pb-hair { height: 4px; background: #222; width: 24px; margin: 0 auto; border-radius: 2px 2px 0 0; }
.pitboss .pb-head { width: 22px; height: 20px; margin: 0 auto; background: #d2b48c; border-radius: 4px; border: 1px solid #654; position: relative; }
.pitboss .pb-glasses { position: absolute; top: 5px; left: 2px; right: 2px; height: 4px; border-top: 2px solid #222; border-bottom: 1px solid #222; }
.pitboss .pb-eyes { display: flex; justify-content: space-around; padding-top: 5px; }
.pitboss .pb-eye { width: 4px; height: 3px; background: #111; }
.pitboss .pb-mouth { width: 8px; height: 2px; background: #422; margin: 6px auto 0; }
.pitboss .pb-clipboard { width: 10px; height: 8px; background: #ddd; margin: 2px auto 0; border: 1px solid #888; }

.ladyluck .ll-hair { height: 6px; width: 26px; margin: 0 auto; background: linear-gradient(90deg, #4a0080, #c0a); border-radius: 8px 8px 0 0; }
.ladyluck .ll-head { width: 22px; height: 20px; margin: 0 auto; background: #e8c4a8; border-radius: 6px; position: relative; border: 1px solid #864; }
.ladyluck .ll-blindfold { position: absolute; top: 6px; left: 0; right: 0; height: 5px; background: #111; }
.ladyluck .ll-coin { position: absolute; right: -4px; top: 8px; width: 7px; height: 7px; background: gold; border-radius: 50%; border: 1px solid #a80; }
.ladyluck .ll-smile { width: 10px; height: 3px; border-bottom: 2px solid #622; border-radius: 0 0 8px 8px; margin: 14px auto 0; }

.loanshark .ls-fin { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #4a7080; margin: 0 auto; }
.loanshark .ls-head { width: 24px; height: 18px; margin: 0 auto; background: #6a9; border-radius: 4px 4px 10px 10px; border: 1px solid #356; }
.loanshark .ls-eyes { display: flex; justify-content: space-around; padding-top: 4px; }
.loanshark .ls-eye { width: 5px; height: 4px; background: #111; border-radius: 50%; }
.loanshark .ls-teeth { height: 4px; margin: 4px 3px 0; background: repeating-linear-gradient(90deg, #fff 0 3px, #356 3px 4px); }

.countess .ct-hair { height: 8px; width: 26px; margin: 0 auto; background: #111; border-radius: 10px 10px 0 0; }
.countess .ct-head { width: 20px; height: 20px; margin: 0 auto; background: #e8e0e8; border-radius: 5px; border: 1px solid #666; position: relative; }
.countess .ct-eyes { display: flex; justify-content: space-around; padding-top: 6px; }
.countess .ct-eye { width: 4px; height: 4px; background: #800; box-shadow: 0 0 4px #f00; }
.countess .ct-fangs { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.countess .ct-fangs div { width: 2px; height: 5px; background: #fff; clip-path: polygon(50% 100%, 0 0, 100% 0); }
.countess .ct-drop { width: 4px; height: 6px; background: #a00; margin: 2px auto 0; border-radius: 50% 50% 40% 40%; }

.twins { display: flex; flex-wrap: wrap; justify-content: center; width: 34px; }
.twins .tw-head { width: 14px; height: 16px; background: #c9a; border: 1px solid #654; border-radius: 3px; margin: 0 1px; }
.twins .tw-head.left { background: #cab; }
.twins .tw-head.right { background: #bac; }
.twins .tw-eye { width: 3px; height: 3px; background: #111; margin: 4px auto 0; }
.twins .tw-mouth { width: 6px; height: 2px; background: #422; margin: 3px auto 0; }
.twins .tw-collar { width: 28px; height: 5px; background: #224; margin: 2px auto 0; }

.grandmaster .gm-crown { width: 18px; height: 6px; margin: 0 auto; background: gold; clip-path: polygon(0 100%, 0 40%, 25% 70%, 50% 0, 75% 70%, 100% 40%, 100% 100%); }
.grandmaster .gm-head { width: 22px; height: 20px; margin: 0 auto; background: #c4a882; border-radius: 4px; border: 1px solid #543; position: relative; }
.grandmaster .gm-monocle { position: absolute; right: 3px; top: 5px; width: 7px; height: 7px; border: 2px solid gold; border-radius: 50%; }
.grandmaster .gm-eyes { display: flex; justify-content: space-around; padding-top: 6px; }
.grandmaster .gm-eye { width: 3px; height: 3px; background: #111; }
.grandmaster .gm-mouth { width: 8px; height: 2px; background: #333; margin: 5px auto 0; }

.croupier .cr-hat { width: 24px; height: 6px; margin: 0 auto; background: #111; border-radius: 2px; }
.croupier .cr-head { width: 20px; height: 18px; margin: 0 auto; background: #d2b48c; border-radius: 4px; border: 1px solid #654; }
.croupier .cr-eyes { display: flex; justify-content: space-around; padding-top: 5px; }
.croupier .cr-eye { width: 4px; height: 3px; background: #222; }
.croupier .cr-mustache { width: 12px; height: 3px; background: #333; margin: 4px auto 0; border-radius: 0 0 6px 6px; }
.croupier .cr-chip { width: 8px; height: 8px; margin: 2px auto 0; background: #0d6efd; border-radius: 50%; border: 2px dashed #fff; }

.hangman .hg-noose { width: 14px; height: 8px; margin: 0 auto; border: 2px solid #8b4513; border-bottom: none; border-radius: 8px 8px 0 0; }
.hangman .hg-head { width: 18px; height: 18px; margin: 0 auto; background: #bbb; border-radius: 50%; border: 1px solid #555; }
.hangman .hg-eyes { display: flex; justify-content: space-around; padding-top: 5px; }
.hangman .hg-eye { width: 4px; height: 1px; background: #111; transform: rotate(25deg); }
.hangman .hg-frown { width: 8px; height: 4px; border-top: 2px solid #333; border-radius: 8px 8px 0 0; margin: 4px auto 0; }

.jester .js-hat { height: 10px; width: 28px; margin: 0 auto; background: linear-gradient(90deg, #c00, #0a0); clip-path: polygon(0 100%, 15% 0, 50% 60%, 85% 0, 100% 100%); position: relative; }
.jester .js-bell { position: absolute; top: -2px; width: 4px; height: 4px; background: gold; border-radius: 50%; }
.jester .js-bell.l { left: 2px; }
.jester .js-bell.r { right: 2px; }
.jester .js-head { width: 20px; height: 18px; margin: 0 auto; background: #e8c4a8; border-radius: 4px; border: 1px solid #864; }
.jester .js-eyes { display: flex; justify-content: space-around; padding-top: 4px; }
.jester .js-eye { width: 5px; height: 5px; background: #111; border-radius: 50%; }
.jester .js-grin { width: 12px; height: 6px; border: 2px solid #422; border-top: none; border-radius: 0 0 12px 12px; margin: 2px auto 0; }

.bookie .bk-head { width: 22px; height: 20px; margin: 2px auto 0; background: #c4a882; border-radius: 4px; border: 1px solid #543; position: relative; }
.bookie .bk-eyes { display: flex; justify-content: space-around; padding-top: 5px; }
.bookie .bk-eye { width: 4px; height: 3px; background: #111; }
.bookie .bk-cig { position: absolute; right: -6px; bottom: 6px; width: 8px; height: 2px; background: #eee; }
.bookie .bk-cig::after { content: ""; position: absolute; right: -3px; top: -1px; width: 3px; height: 3px; background: #f60; border-radius: 50%; }
.bookie .bk-mouth { width: 8px; height: 2px; background: #333; margin: 5px auto 0; }
.bookie .bk-ledger { width: 12px; height: 8px; margin: 2px auto 0; background: #f5f0d0; border: 1px solid #886; }

.widow .wd-veil { width: 26px; height: 8px; margin: 0 auto; background: #111; border-radius: 8px 8px 0 0; opacity: 0.85; }
.widow .wd-head { width: 20px; height: 18px; margin: 0 auto; background: #ddd0d8; border-radius: 5px; border: 1px solid #666; }
.widow .wd-eyes { display: flex; justify-content: space-around; padding-top: 5px; }
.widow .wd-eye { width: 4px; height: 4px; background: #400; border-radius: 50%; }
.widow .wd-lips { width: 8px; height: 3px; background: #800; margin: 4px auto 0; border-radius: 2px; }
.widow .wd-spider { width: 6px; height: 6px; margin: 2px auto 0; background: #222; border-radius: 50%; box-shadow: -4px 0 #222, 4px 0 #222; }

.auditor .au-glasses { width: 22px; height: 5px; margin: 0 auto; border: 2px solid #333; border-radius: 2px; background: rgba(150,200,255,0.3); }
.auditor .au-head { width: 20px; height: 18px; margin: 0 auto; background: #c4a882; border-radius: 3px; border: 1px solid #543; }
.auditor .au-eyes { display: flex; justify-content: space-around; padding-top: 4px; }
.auditor .au-eye { width: 3px; height: 3px; background: #111; }
.auditor .au-mouth { width: 6px; height: 2px; background: #333; margin: 5px auto 0; }
.auditor .au-clipboard { width: 10px; height: 10px; margin: 2px auto 0; background: #eee; border: 1px solid #888; }

.satan-mount .flames { display: flex !important; }