/* --- BOMB GAME WRAPPER & LAYOUT --- */
/* Note: .game-wrapper is shared, but essential for the bomb game layout */
.game-wrapper {
    flex-direction: column;
    align-items: center;

    /* Deep Space Blue Background */
    background: radial-gradient(circle at center, #1a2a6c, #0d122b, #000000); 
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(0, 191, 255, 0.3), inset 0 0 50px rgba(0,0,0,0.8);
    max-width: 100%; 
    margin: 0; 
    color: white;
    border: 2px solid #4a69bd;
    position: relative;
}

/* Subtle star effect overlay for the game background */
.game-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 3px),
        radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 2px),
        radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 3px);
    background-size: 550px 550px, 350px 350px, 250px 250px;
    background-position: 0 0, 40px 60px, 130px 270px;
    opacity: 0.3;
    pointer-events: none;
}

/* --- BOMB GAME 3D PERSPECTIVE CONTAINER --- */
#bombGameSection {
    /* Perspective for a 3D look */
    perspective: 1500px; 
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
   
    overflow: hidden;
    background: #2c3e50;
}

/* --- BOMB GAME GRID STYLING --- */
/* The grid container itself */
#bombGameGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 8px;
    width: clamp(280px, 90vw, 500px);
    aspect-ratio: 1 / 1;
    
    background-color: #34495e;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.1);
    
    transform-style: preserve-3d;
    transform: rotateX(10deg) rotateZ(0deg) translateZ(-30px);
    transition: transform 0.5s ease-out;
   
}

/* Generic game grid styles (fallback/base) */
.game-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    padding: 10px;
    background-color: rgba(13, 18, 43, 0.8); 
    border-radius: 10px;
   
    border: 1px solid #4a69bd;
    box-shadow: 0 0 15px rgba(74, 105, 189, 0.4);
    z-index: 2;
}

/* --- BOMB GAME CELLS (CARDS) --- */
#bombGameGrid .game-cell {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
        
    perspective: 1000px; /* Essential for 3D depth */
    position: relative;
    cursor: pointer;
    z-index: 1; /* Default z-index */
}

#bombGameGrid .game-cell-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy spring effect */
    transform-style: preserve-3d;
    transform-origin: center center;
}

/* Flipped State */
#bombGameGrid .game-cell.flipped {
    transform: rotateY(180deg);
}

/* Front and Back Faces */
#bombGameGrid .game-cell .front,
#bombGameGrid .game-cell .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    box-sizing: border-box;
}

/* Front Face (Question Mark) */
#bombGameGrid .game-cell .front {
    background-color: #f1c40f;
    transform: rotateY(0deg);
    border: 3px solid #e67e22;
}

#bombGameGrid .game-cell .front img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}

/* Back Face (Content) */
#bombGameGrid .game-cell .back {
    background-color: #ecf0f1;
    transform: rotateY(180deg);
    border: 3px solid #bdc3c7;
}

#bombGameGrid .game-cell .back img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

/* --- REVEALED STATES (WIN/LOSS) --- */
/* Bomb Revealed */
#bombGameGrid .game-cell .back.bomb-revealed {
    background-color: #e74c3c;
    border-color: #c0392b;
}

/* Coin Revealed */
#bombGameGrid .game-cell .back.coin-revealed {
    background-color: #2ecc71;
    border-color: #27ae60;
}

/* Specific styling for revealed bombs (glow effect) */
.game-cell.bomb { 
    border-color: #ff0000;
    box-shadow: 0 0 15px #ff0000, inset 0 0 15px #ff0000;
    background: rgba(255, 0, 0, 0.1);
    animation: redPulse 0.8s infinite alternate;
}

/* Specific styling for revealed coins (glow effect) */
.game-cell.coin { 
    border-color: #f1c40f; 
    box-shadow: 0 0 15px #f1c40f, inset 0 0 15px #f1c40f;
    background: rgba(241, 196, 15, 0.1); 
    animation: neonPulseGold 0.8s infinite alternate; 
    z-index: 10;
}

/* Disabled State */
#bombGameGrid .game-cell[disabled] {
    cursor: not-allowed;
    pointer-events: none;
}

.bomb-game-grid button.game-cell:disabled:not(.bomb):not(.coin) {
    pointer-events: none;
    opacity: 1;
    filter: none;
    transition: none;
}

/* --- ANIMATIONS --- */
@keyframes neonPulseGold {
    from { box-shadow: 0 0 10px #f1c40f, inset 0 0 5px #f1c40f; }
    to { box-shadow: 0 0 25px #f1c40f, inset 0 0 15px #f1c40f; transform: scale(1.05); }
}

@keyframes redPulse {
    from { box-shadow: 0 0 10px #ff0000, inset 0 0 5px #ff0000; }
    to { box-shadow: 0 0 25px #ff0000, inset 0 0 15px #ff0000; transform: scale(1.05); }
}

/* --- BOMB GAME UI ELEMENTS --- */
.game-title {
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-size: 1.5em;
    background: linear-gradient(to bottom, #ffd700, #f1c40f, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    letter-spacing: 2px;
}

.game-message {
    height: 1.5em;
 
    color: #00ffff;
    text-shadow: 0 0 10px #00ffff;
    font-weight: bold;
    text-align: center;
   
    width: 100%;
    z-index: 2;
}

/* --- CONTROLS PANEL SPECIFIC TO BOMB GAME --- */
.info-display.bomb-game { 
    flex-direction: column;
    align-items: flex-start;

}
.info-display.bomb-game span {
    width: 100%;
}

.bomb-game-grid .game-cell img {
    max-width: 90%; 
    max-height: 90%;
    object-fit: contain;
    user-drag: none; 
    -webkit-user-drag: none;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.5)); 
}
/* --- FANCIER BOMB BET BUTTON --- */

#bombBetBtn {
    position: relative;
    padding: 12px 12px;
    font-family: 'Special Gothic Expanded One', sans-serif; /* Matches your game title */
    font-size: 1em;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none;
    border-radius: 50px; /* Fully rounded pill shape */
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy transition */
    
    /* 1. Main Gradient Background (Gold/Orange/Red for excitement) */
    background: linear-gradient(135deg, #ffae00 0%, #ff5e00 100%);
    
    /* 2. Multiple Box Shadows for Glow and Depth */
    box-shadow: 
        0 5px 15px rgba(255, 94, 0, 0.4),  /* Orange outer glow */
        0 0 0 4px rgba(255, 255, 255, 0.1), /* Subtle outer ring */
        inset 0 2px 0 rgba(255, 255, 255, 0.4), /* Top inner highlight (glassy look) */
        inset 0 -2px 5px rgba(0, 0, 0, 0.2); /* Bottom inner shadow */
    
    z-index: 1;
}

/* Shine Effect Animation */
#bombBetBtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.6), 
        transparent
    );
    transform: skewX(-20deg);
    transition: 0.5s;
    pointer-events: none;
}

/* Hover State */
#bombBetBtn:hover {
    transform: scale(1.05) translateY(-3px); /* Grow and lift */
    background: linear-gradient(135deg, #ffbe33 0%, #ff7033 100%); /* Slightly lighter gradient */
    box-shadow: 
        0 15px 25px rgba(255, 94, 0, 0.5), /* Stronger glow */
        0 0 20px rgba(255, 215, 0, 0.4), /* Gold halo */
        inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

/* Trigger the shine on hover */
#bombBetBtn:hover::before {
    left: 100%;
    transition: 0.5s;
}

/* Active/Pressed State */
#bombBetBtn:active {
    transform: scale(0.95) translateY(2px); /* Shrink and press down */
    box-shadow: 
        0 2px 10px rgba(255, 94, 0, 0.3), /* Reduced shadow */
        inset 0 2px 5px rgba(0, 0, 0, 0.3); /* Inner shadow for depth */
}

/* Disabled State */
#bombBetBtn:disabled {
    background: #34495e;
    color: #7f8c8d;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    border: 2px solid #555;
}
#bombGameGrid .game-cell.flipped .game-cell-inner {
    transform: rotateY(180deg) scale(1.1); /* Rotate AND grow slightly */
    z-index: 10; /* Bring above neighbors during flip */
}

/* Add a flash effect on the back face when flipped */
#bombGameGrid .game-cell.flipped .back {
    animation: flashShine 0.8s ease-out forwards;
}

#bombGameGrid .game-cell .front,
#bombGameGrid .game-cell .back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    border-radius: 12px; /* Smooth corners */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

/* Front Face (Question Mark) - Added slight gradient */
#bombGameGrid .game-cell .front {
    background: linear-gradient(135deg, #f1c40f, #e67e22);
    border: 2px solid #d35400;
}

/* Back Face (The Reveal) - Rotated initially */
#bombGameGrid .game-cell .back {
    background-color: #ecf0f1;
    transform: rotateY(180deg);
    border: 2px solid #bdc3c7;
    overflow: hidden; /* Important for the shine effect */
}

/* --- ANIMATIONS --- */

/* Flash of light across the card upon reveal */
@keyframes flashShine {
    0% { filter: brightness(1); }
    30% { filter: brightness(2.5); box-shadow: 0 0 20px rgba(255,255,255,0.8); }
    100% { filter: brightness(1); box-shadow: 0 0 10px rgba(0,0,0,0.5); }
}

/* Specific styling for Coin (Win) */
#bombGameGrid .game-cell .back.coin-revealed {
    background: radial-gradient(circle, #2ecc71, #27ae60);
    border-color: #2ecc71;
    box-shadow: 0 0 15px #2ecc71; /* Green Glow */
}

/* Specific styling for Bomb (Loss) */
#bombGameGrid .game-cell .back.bomb-revealed {
    background: radial-gradient(circle, #e74c3c, #c0392b);
    border-color: #c0392b;
    box-shadow: 0 0 15px #c0392b; /* Red Glow */
    animation: shake 0.5s ease-in-out; /* Shake the bomb */
}

/* Shake animation for the bomb */
@keyframes shake {
    0%, 100% { transform: rotateY(180deg) translateX(0); }
    25% { transform: rotateY(180deg) translateX(-5px); }
    75% { transform: rotateY(180deg) translateX(5px); }
}
/* --- FANCIER CASH IN BUTTON --- */

#cashInBtn { /* Or use a class like .cashin-btn if you prefer */
    position: relative;
    padding: 12px 40px;
    font-family: 'Special Gothic Expanded One', sans-serif; /* Matches your game title */
    font-size: 1.5em;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none;
    border-radius: 50px; /* Fully rounded pill shape */
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy transition */
    
    /* 1. Main Gradient Background (Vibrant Green for cash-in) */
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); /* Emerald Green */
    
    /* 2. Multiple Box Shadows for Glow and Depth */
    box-shadow: 
        0 5px 15px rgba(46, 204, 113, 0.4),  /* Green outer glow */
        0 0 0 4px rgba(255, 255, 255, 0.1), /* Subtle outer ring */
        inset 0 2px 0 rgba(255, 255, 255, 0.4), /* Top inner highlight (glassy look) */
        inset 0 -2px 5px rgba(0, 0, 0, 0.2); /* Bottom inner shadow */
    
    z-index: 1;
}

/* Shine Effect Animation */
#cashInBtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.6), 
        transparent
    );
    transform: skewX(-20deg);
    transition: 0.5s;
    pointer-events: none;
}

/* Hover State */
#cashInBtn:hover {
    transform: scale(1.05) translateY(-3px); /* Grow and lift */
    background: linear-gradient(135deg, #5cb85c 0%, #4cae4c 100%); /* Slightly lighter green gradient */
    box-shadow: 
        0 15px 25px rgba(46, 204, 113, 0.5), /* Stronger green glow */
        0 0 20px rgba(0, 255, 0, 0.4), /* Brighter green halo */
        inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

/* Trigger the shine on hover */
#cashInBtn:hover::before {
    left: 100%;
    transition: 0.5s;
}

/* Active/Pressed State */
#cashInBtn:active {
    transform: scale(0.95) translateY(2px); /* Shrink and press down */
    box-shadow: 
        0 2px 10px rgba(46, 204, 113, 0.3), /* Reduced shadow */
        inset 0 2px 5px rgba(0, 0, 0, 0.3); /* Inner shadow for depth */
}

/* Disabled State */
#cashInBtn:disabled {
    background: #34495e;
    color: #7f8c8d;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    border: 2px solid #555;
}