.page-gambling {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 20px;
    overflow-x: hidden;
    background: radial-gradient(circle at top, #0b1a2a, #05080f 60%);
    color: #eaf6ff;
    min-height: 100vh;
    min-width: 320px; /* Added min-width */
}

.game-status-message {
    font-size: 1.4em; /* Slightly larger */
    font-weight: 900; /* Bolder */
    color: #ffd700; /* Gold color */
    text-shadow: 0 0 15px rgba(255,215,0,0.8), 0 0 25px rgba(255,215,0,0.5); /* Enhanced glow */
    margin-top: 15px; /* More space */
    margin-bottom: 20px; /* More space below */
    text-align: center;
    letter-spacing: 0.05em; /* Slightly spaced out letters */
    animation: pulseGlow 1.5s infinite alternate; /* Subtle pulsing glow */
    background: rgba(0,0,0,0.2); /* Semi-transparent background */
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255,215,0,0.3);
}

@keyframes pulseGlow {
    from {
        text-shadow: 0 0 10px rgba(255,215,0,0.6), 0 0 20px rgba(255,215,0,0.3);
        transform: scale(1);
    }
    to {
        text-shadow: 0 0 20px rgba(255,215,0,1), 0 0 30px rgba(255,215,0,0.7);
        transform: scale(1.02);
    }
}

/* Styles from 2ndcasino.html */
.stars {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
.star {
    position: absolute; width: 2px; height: 2px; background: white;
    border-radius: 50%; animation: twinkle 3s infinite;
}
@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}

.casino-header {
    text-align: center; margin-bottom: 20px; position: relative; z-index: 1;
}
.casino-title {
    font-size: 48px; font-weight: 900; letter-spacing: .3em;
    background: linear-gradient(135deg, #00f0ff, #7cffd4, #ffd700, #ff00ff);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: 0 0 40px rgba(0,240,255,.6);
    margin: 0;
    animation: gradientShift 4s ease infinite;
    filter: drop-shadow(0 0 20px rgba(0,240,255,0.5));
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.game-selector {
    display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; justify-content: center;
    position: relative; z-index: 1;
}
.game-btn {
    border: 0; border-radius: 12px; padding: 12px 20px; cursor: pointer;
    background: rgba(255,255,255,.08); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.2); color: #eaf6ff;
    font-weight: 700; letter-spacing: .1em; transition: all .3s ease;
    position: relative; overflow: hidden;
}
.game-btn::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255,255,255,.2), transparent);
    transform: translateX(-100%);
    transition: transform .5s ease;
}
.game-btn:hover::before {
    transform: translateX(100%);
}
.game-btn.active {
    background: linear-gradient(135deg, #00f0ff, #7cffd4);
    color: #021014; box-shadow: 0 8px 20px rgba(0,255,255,.4);
}
.game-btn:hover { transform: translateY(-2px); }

.game-container { display: none; position: relative; z-index: 1; }
.game-container.active { display: block; }

.machine, .roulette-table, .dice-game, .blackjack-table, .poker-table {
    position: relative;
    padding: 28px 26px 22px;
    width: 100%; max-width: 500px; margin: 0 auto;
    border-radius: 24px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04);
    transition: transform .25s ease, box-shadow .25s ease;
}

.machine.win-pulse, .roulette-table.win-pulse, .dice-game.win-pulse, .blackjack-table.win-pulse, .poker-table.win-pulse { 
    animation: pulse 700ms ease; 
}
@keyframes pulse { 0%{transform:scale(1)} 50%{transform:scale(1.02)} 100%{transform:scale(1)} }

.machine.major-win, .roulette-table.major-win, .dice-game.major-win, .blackjack-table.major-win, .poker-table.major-win { 
    animation: bigWin 1s ease; 
}
@keyframes bigWin { 
    0%{transform:scale(1) rotate(0deg)} 
    15%{transform:scale(1.08) rotate(-2deg)} 
    30%{transform:scale(1.05) rotate(2deg)} 
    45%{transform:scale(1.08) rotate(-1deg)} 
    60%{transform:scale(1.05) rotate(1deg)} 
    100%{transform:scale(1) rotate(0deg)} 
}

.machine.lose, .roulette-table.lose, .dice-game.lose, .blackjack-table.lose, .poker-table.lose { 
    animation: sadShake 600ms ease; 
}
@keyframes sadShake {
    0%{transform:translateX(0) scale(1)} 
    15%{transform:translateX(-4px) scale(0.98)} 
    30%{transform:translateX(4px) scale(0.98)} 
    45%{transform:translateX(-3px) scale(0.99)} 
    60%{transform:translateX(3px) scale(0.99)} 
    75%{transform:translateX(-2px) scale(0.995)} 
    100%{transform:translateX(0) scale(1)}
}

.title {
    text-align:center; letter-spacing: .25em; font-weight: 700; opacity:.9; margin-bottom: 10px;
    transition: color .3s ease, text-shadow .3s ease;
}
.title.win-glow { 
    color: #7cffd4; 
    text-shadow: 0 0 20px rgba(124,255,212,.8), 0 0 40px rgba(0,240,255,.6);
    animation: titlePulse 1s ease infinite;
}
.title.major-glow {
    color: #ffd700;
    text-shadow: 0 0 30px rgba(255,215,0,1), 0 0 60px rgba(255,215,0,.8), 0 0 90px rgba(255,215,0,.6);
    animation: titleMajor 0.8s ease infinite;
}
@keyframes titlePulse { 0%, 100%{opacity:.9} 50%{opacity:1} }
@keyframes titleMajor { 0%, 100%{transform:scale(1)} 50%{transform:scale(1.1)} }

.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0 14px; }
.reel-wrap { 
    position: relative; height: 110px; overflow: hidden; border-radius: 14px;
    box-shadow: 0 0 20px rgba(0,255,255,0.3);
}
.reel-wrap::before {
    content:""; position:absolute; inset:0; pointer-events:none; opacity:0; 
    background: linear-gradient(135deg, transparent, rgba(255,255,255,.2), transparent);
    transform: translateX(-100%);
    transition: transform .5s ease;
}
.reel-wrap.scanning::before { animation: scan 1.2s linear infinite; opacity:.8; }
@keyframes scan { to { transform: translateY(100%);} }

.reel {
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 20px rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
    transition: filter .2s ease;
}
.reel.spinning { filter: blur(3px) drop-shadow(0 0 8px rgba(0,255,255,.6)); }

.symbols { will-change: transform; }
.symbol { 
    height:110px; display:grid; place-items:center; font-size: 44px; 
    text-shadow: 0 0 10px rgba(0,255,255,.6);
    filter: drop-shadow(0 0 8px rgba(0,255,255,0.4));
}
.symbol.final { animation: glitch 450ms ease; }
@keyframes glitch {
    0%{transform:translate(0)} 20%{transform:translate(-2px,1px)} 40%{transform:translate(2px,-1px)} 60%{transform:translate(-1px,2px)} 80%{transform:translate(1px,-2px)} 100%{transform:translate(0)}
}

.hud { display:flex; flex-direction: column; gap:12px; }
.stats { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.panel { 
    background: rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.12); 
    border-radius: 12px; padding: 8px 10px;
    box-shadow: 0 0 15px rgba(0,255,255,0.2);
}
.panel b{letter-spacing:.1em}

button {
    border:0; border-radius: 14px; padding: 10px 14px; color:#021014; cursor:pointer; 
    background: linear-gradient(135deg, #00f0ff, #7cffd4);
    box-shadow: 0 8px 20px rgba(0,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.25);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    font-weight:700; letter-spacing:.1em;
}
button:hover { 
    transform: translateY(-3px); /* More pronounced lift */
    box-shadow: 0 12px 25px rgba(0,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.25); /* Stronger shadow */
    filter: brightness(1.1); /* Slight brightness increase */
}
button:active { 
    transform: translateY(1px); 
    filter: brightness(.9); /* Slightly darker when pressed */
    box-shadow: 0 4px 10px rgba(0,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.2); /* Softer shadow when pressed */
}
button:disabled { filter: grayscale(.6) brightness(.8); box-shadow:none; cursor:not-allowed; }

.bet { display:flex; align-items:center; gap:6px; }
.bet button { padding: 6px 10px; }

.spin-btn {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    letter-spacing: .2em;
    background: linear-gradient(135deg, #00f0ff, #7cffd4, #00f0ff);
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
    box-shadow: 0 12px 30px rgba(0,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.3), 0 0 20px rgba(0,255,255,.3);
}
.spin-btn:hover { box-shadow: 0 14px 35px rgba(0,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.3), 0 0 30px rgba(0,255,255,.4); }
.spin-btn:active { transform: translateY(2px); box-shadow: 0 8px 20px rgba(0,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.3), 0 0 15px rgba(0,255,255,.3); }

@keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

.particles { position:absolute; inset:0; pointer-events:none; z-index: 100; }
.p { 
    position:absolute; width:6px; height:6px; border-radius:50%; background: #7cffd4; 
    filter: drop-shadow(0 0 6px #7cffd4); 
    animation: pop 800ms ease forwards; 
}
@keyframes pop { from{opacity:1; transform:translate(0,0) scale(1)} to{opacity:0; transform:translate(var(--x), var(--y)) scale(.4)} }

.win-shake { animation: shake 500ms ease; }
@keyframes shake { 0%{transform:translateX(0)} 25%{transform:translateX(-2px)} 50%{transform:translateX(2px)} 75%{transform:translateX(-1px)} 100%{transform:translateX(0)} }

.major-shake { animation: majorShake 700ms ease; }
@keyframes majorShake {
    0%{transform:translateX(0) scale(1)} 
    10%{transform:translateX(-3px) scale(1.05)} 
    20%{transform:translateX(3px) scale(1.05)} 
    30%{transform:translateX(-3px) scale(1.05)} 
    40%{transform:translateX(3px) scale(1.05)} 
    50%{transform:translateX(-2px) scale(1.03)} 
    60%{transform:translateX(2px) scale(1.03)} 
    70%{transform:translateX(-1px) scale(1.01)} 
    80%{transform:translateX(1px) scale(1.01)} 
    100%{transform:translateX(0) scale(1)}
}

.reel.major-glow {
    box-shadow: inset 0 0 0 1px rgba(255,215,0,.6), 0 0 30px rgba(255,215,0,.8), 0 0 50px rgba(255,215,0,.5);
    border-color: rgba(255,215,0,.5);
}

.lose-fade { animation: loseFade 800ms ease; }
@keyframes loseFade {
    0%{opacity:1; filter:brightness(1)}
    40%{opacity:0.6; filter:brightness(0.6)}
    100%{opacity:1; filter:brightness(1)}
}

.roulette-wheel {
    width: 280px; height: 280px; margin: 20px auto;
    border-radius: 50%; position: relative;
    background: conic-gradient(from 0deg, 
    #ff0000 0deg, #ff0000 11.25deg,
    #000000 11.25deg, #000000 22.5deg,
    #ff0000 22.5deg, #ff0000 33.75deg,
    #000000 33.75deg, #000000 45deg,
    #ff0000 45deg, #ff0000 56.25deg,
    #000000 56.25deg, #000000 67.5deg,
    #ff0000 67.5deg, #ff0000 78.75deg,
    #000000 78.75deg, #000000 90deg,
    #ff0000 90deg, #ff0000 101.25deg,
    #000000 101.25deg, #000000 112.5deg,
    #ff0000 112.5deg, #ff0000 123.75deg,
    #000000 123.75deg, #000000 135deg,
    #ff0000 135deg, #ff0000 146.25deg,
    #000000 146.25deg, #000000 157.5deg,
    #ff0000 157.5deg, #ff0000 168.75deg,
    #000000 168.75deg, #000000 180deg,
    #ff0000 180deg, #ff0000 191.25deg,
    #000000 191.25deg, #000000 202.5deg,
    #ff0000 202.5deg, #ff0000 213.75deg,
    #000000 213.75deg, #000000 225deg,
    #ff0000 225deg, #ff0000 236.25deg,
    #000000 236.25deg, #000000 247.5deg,
    #ff0000 247.5deg, #ff0000 258.75deg,
    #000000 258.75deg, #000000 270deg,
    #ff0000 270deg, #ff0000 281.25deg,
    #000000 281.25deg, #000000 292.5deg,
    #ff0000 292.5deg, #ff0000 303.75deg,
    #000000 303.75deg, #000000 315deg,
    #ff0000 315deg, #ff0000 326.25deg,
    #000000 326.25deg, #000000 337.5deg,
    #ff0000 337.5deg, #ff0000 348.75deg,
    #000000 348.75deg, #000000 360deg
    );
    box-shadow: 0 0 0 12px rgba(255,255,255,.15), 0 10px 40px rgba(0,0,0,.6), 
                inset 0 0 40px rgba(0,0,0,.4), 0 0 60px rgba(0,255,255,0.3);
    transition: transform 3s cubic-bezier(.2,.8,.2,1);
}
.roulette-wheel::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 20px; height: 20px; background: #ffd700;
    border-radius: 50%; box-shadow: 0 0 20px rgba(255,215,0,.8);
}
.roulette-pointer {
    position: absolute; top: 10px; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #7cffd4;
    filter: drop-shadow(0 0 10px rgba(124,255,212,.8));
    z-index: 10;
}
.betting-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0;
}
.bet-option {
    padding: 12px; border-radius: 10px; cursor: pointer;
    background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.2);
    text-align: center; font-weight: 700; transition: all .3s ease;
    box-shadow: 0 0 10px rgba(0,255,255,0.1);
}
.bet-option:hover { 
    background: rgba(255,255,255,.12); transform: scale(1.05); 
    box-shadow: 0 0 20px rgba(0,255,255,0.3);
}
.bet-option.red { border-color: rgba(255,0,0,.5); color: #ff6b6b; }
.bet-option.black { border-color: rgba(0,0,0,.5); color: #ddd; }
.bet-option.selected {
    background: rgba(0,255,255,.2); border-color: #00f0ff;
    box-shadow: 0 0 20px rgba(0,255,255,.4);
}
.result-number {
    text-align: center; font-size: 32px; font-weight: 900;
    margin: 10px 0; color: #7cffd4; text-shadow: 0 0 20px rgba(124,255,212,.8);
}

.dice-container {
    display: flex; justify-content: center; gap: 20px; margin: 30px 0;
}
.die {
    width: 80px; height: 80px; background: rgba(255,255,255,.95);
    border-radius: 12px; display: grid; place-items: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,.4), inset 0 0 0 2px rgba(0,0,0,.1),
                0 0 20px rgba(0,255,255,0.3);
    transition: transform .3s ease;
}
.die-value {
    font-size: 48px; color: #000;
}
.die.rolling { animation: roll 500ms linear infinite; }
@keyframes roll {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.1); }
    50% { transform: rotate(180deg) scale(1); }
    75% { transform: rotate(270deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}
.dice-bets {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0;
}
.total-display {
    text-align: center; font-size: 24px; font-weight: 900; margin: 10px 0;
    color: #7cffd4; text-shadow: 0 0 20px rgba(124,255,212,.8);
}

.card-area {
    min-height: 150px; margin: 20px 0;
}
.card-row {
    display: flex; gap: 10px; justify-content: center; margin-bottom: 20px;
    flex-wrap: wrap;
}
.card {
    width: 60px; height: 90px; background: white;
    border-radius: 8px; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,.5), 0 0 15px rgba(0,255,255,0.2);
    font-weight: 900; font-size: 24px;
    position: relative;
    animation: dealCard 0.3s ease;
}
@keyframes dealCard {
    from { transform: translateY(-50px) rotateY(180deg); opacity: 0; }
    to { transform: translateY(0) rotateY(0); opacity: 1; }
}
.card.hearts, .card.diamonds { color: #ff0000; }
.card.clubs, .card.spades { color: #000; }
.card-back {
    background: linear-gradient(135deg, #00f0ff, #7cffd4);
    color: transparent;
}
.hand-label {
    text-align: center; font-weight: 700; margin-bottom: 10px;
    color: #7cffd4; text-shadow: 0 0 10px rgba(124,255,212,.5);
}
.hand-total {
    text-align: center; font-size: 20px; font-weight: 900;
    color: #ffd700; text-shadow: 0 0 15px rgba(255,215,0,.6);
    margin-top: 5px;
}
.blackjack-actions {
    display: flex; gap: 10px; justify-content: center; margin-top: 15px;
}
.blackjack-actions button {
    flex: 1; max-width: 120px;
}

.poker-hand {
    display: flex; gap: 10px; justify-content: center; margin: 20px 0;
    flex-wrap: wrap;
}
.poker-card {
    width: 70px; height: 100px; background: white;
    border-radius: 8px; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,.5), 0 0 15px rgba(0,255,255,0.2);
    font-weight: 900; font-size: 28px;
    cursor: pointer;
    transition: all .3s ease;
    position: relative;
}
.poker-card:hover {
    transform: translateY(-10px);
}
.poker-card.selected {
    transform: translateY(-20px);
    box-shadow: 0 8px 25px rgba(255,215,0,.8), 0 0 30px rgba(255,215,0,0.5);
}
.poker-card.hearts, .poker-card.diamonds { color: #ff0000; }
.poker-card.clubs, .poker-card.spades { color: #000; }
.poker-result {
    text-align: center; font-size: 22px; font-weight: 900;
    margin: 15px 0; color: #ffd700; text-shadow: 0 0 20px rgba(255,215,0,.8);
    min-height: 30px;
}

.jackpot-banner {
    position: fixed; top: 10px; right: 10px;
    background: rgba(255,215,0,.15); backdrop-filter: blur(10px);
    border: 2px solid rgba(255,215,0,.5); border-radius: 12px;
    padding: 10px 16px; color: #ffd700;
    font-weight: 900; letter-spacing: .1em;
    box-shadow: 0 0 30px rgba(255,215,0,.4);
    animation: jackpotPulse 2s ease infinite;
    z-index: 1000;
}
@keyframes jackpotPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(255,215,0,.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 50px rgba(255,215,0,.6); }
}

.win-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.8);
    display: none; align-items: center; justify-content: center;
    z-index: 2000;
    animation: fadeIn 0.3s ease;
}
.win-overlay.active { display: flex; }
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.win-message {
    background: linear-gradient(135deg, rgba(0,240,255,0.2), rgba(255,215,0,0.2));
    border: 3px solid #ffd700;
    border-radius: 20px;
    padding: 20px; /* Reduced padding */
    text-align: center;
    box-shadow: 0 0 60px rgba(255,215,0,0.8);
    animation: bigWinPopup 0.6s ease;
    max-width: 90%; /* Ensure it doesn't get too wide on small screens */
}
@keyframes bigWinPopup {
    0% { transform: scale(0) rotate(-180deg); }
    60% { transform: scale(1.1) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.win-message h2 {
    font-size: 38px; /* Reduced font size */
    margin: 0 0 15px 0; /* Adjusted margin */
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: 0 0 30px rgba(255,215,0,1);
    animation: winTextPulse 1s ease infinite;
}
@keyframes winTextPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.win-amount {
    font-size: 28px; /* Reduced font size */
    color: #7cffd4;
    text-shadow: 0 0 20px rgba(124,255,212,.8);
}