/* ===== SLOT MACHINE ONLY STYLES ===== */

/* Specific styling for the slot machine game wrapper */
.slot-machine-wrapper {
    /* Inherits general .game-wrapper styles from main.css */
    
    /* --- NEW 3D BOARD STYLES --- */
    perspective: 1500px; /* Establishes a 3D viewing context for children */
    transform-style: preserve-3d; /* Allows nested 3D transforms */
    transform: rotateX(15deg) rotateY(0deg) translateZ(-80px); /* Tilt the whole board slightly */
    transition: transform 0.5s ease-out, box-shadow 0.5s ease; /* Smooth transitions */
    /* Adjust original box-shadow for a deeper look */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), inset 0 0 80px rgba(0, 191, 255, 0.5);
    /* Maybe increase padding slightly to give space for the tilted elements */
    padding: 30px; 
    /* The background is inherited, but can be overridden here for a more distinct 3D base */
    background: radial-gradient(circle at center, #1f306c, #10183b, #0a0e24); 
    border-color: #3b509d; /* A bit darker for 3D depth */
}


/* Slot machine general theme (if you want it to look different than other games) */
#slotMachineSection.slot-theme {
    background: linear-gradient(120deg, #39275b 0%, #a198d7 100%); /* Original theme background */
    border: 4px solid #dab710;
    border-radius: 18px;
    box-shadow: 0 0 30px #dab71088;
    color: #fff8dc;
    font-family: 'Orbitron', 'Arial Black', sans-serif;
    padding: 40px 25px 25px 25px;
    max-width: 430px;
    margin: 0 auto;
}
#slotMachineSection.slot-theme button,
#slotMachineSection.slot-theme select {
    background: #dab710;
    color: #492870;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    padding: 10px 23px;
    font-size: 17px;
    margin-top: 10px;
    box-shadow: 0 2px 6px #dab71066;
}

/* Slot Grid specific layout */
.slot-machine-wrapper .game-grid {
    grid-template-columns: repeat(6, 1fr); /* 6 columns for slot */
    /* Enhanced background for the grid itself */
    background-color: rgba(18, 25, 60, 0.9); /* Darker, slightly opaque grid background */
    border: 1px solid #5a7bd4; /* Stronger border for grid depth */
    box-shadow: 0 0 20px rgba(74, 105, 189, 0.6), inset 0 0 20px rgba(0,0,0,0.5);
    transform-style: preserve-3d; /* Needed for cells to have their own 3D space */
    transform: translateZ(20px); /* Lift the grid slightly from the board */
    width:100%;
}
/* =========================================
   FANCY SPIN BUTTON (Pharaoh's Wealth)
   ========================================= */

#spinBtn {
    background: linear-gradient(180deg, #ffd700 0%, #f39c12 50%, #d35400 100%);
    color: #2c1e00; /* Deep rich brown/black for high contrast */
    font-family: 'Special Gothic Expanded One', 'Montserrat', sans-serif;
    font-size: 1.5em;
    font-weight: 900;
    padding: 15px 45px;
    border: 2px solid #ffeb3b;
    border-radius: 50px; /* Perfect pill shape */
    text-transform: uppercase;
    letter-spacing: 3px;
    cursor: pointer;
    outline: none;
    
    /* The 3D Pop Effect */
    box-shadow: 
        0 8px 0 #a04000, /* 3D bottom edge */
        0 15px 20px rgba(0, 0, 0, 0.6), /* Drop shadow */
        inset 0 4px 6px rgba(255, 255, 255, 0.6), /* Inner top highlight */
        0 0 15px rgba(241, 196, 15, 0.4); /* Outer gold glow */
        
    transition: all 0.1s ease-in-out;
    animation: idleSpinPulse 2s infinite alternate; /* Breathing glow */
}

/* Hover State - Brighter with a bigger glow */
#spinBtn:hover {
    background: linear-gradient(180deg, #ffeb3b 0%, #f1c40f 50%, #e67e22 100%);
    box-shadow: 
        0 8px 0 #a04000, 
        0 15px 25px rgba(0, 0, 0, 0.7), 
        inset 0 4px 6px rgba(255, 255, 255, 0.8), 
        0 0 25px rgba(241, 196, 15, 0.8);
    transform: translateY(-2px);
}

/* Active State - Satisfying mechanical "press down" */
#spinBtn:active {
    box-shadow: 
        0 0px 0 #a04000, /* Removes the 3D edge */
        0 5px 10px rgba(0, 0, 0, 0.6), /* Shrinks the drop shadow */
        inset 0 4px 6px rgba(255, 255, 255, 0.4);
    transform: translateY(8px); /* Moves the button down */
}

/* Disabled State - When spinning */
#spinBtn:disabled {
    background: linear-gradient(180deg, #7f8c8d, #34495e);
    color: #bdc3c7;
    border-color: #95a5a6;
    box-shadow: 0 4px 0 #2c3e50;
    transform: translateY(4px);
    animation: none;
    cursor: not-allowed;
}

/* Idle Breathing Glow Animation */
@keyframes idleSpinPulse {
    0% { filter: brightness(1); }
    100% { 
        filter: brightness(1.15); 
        box-shadow: 
            0 8px 0 #a04000, 
            0 15px 20px rgba(0,0,0,0.6), 
            inset 0 4px 6px rgba(255,255,255,0.6), 
            0 0 25px rgba(241,196,15,0.7); 
    }
}
/* Slot machine individual cell styling */
.slot-machine-wrapper .game-grid .game-cell {
    position: relative; 
    overflow: hidden; 
    /* font-size: 1px; -- REMOVED */
    
    /* --- NEW 3D TILE STYLES --- */
    transform-style: preserve-3d; /* Allows the symbol inside to be 3D relative to the cell */
    transform: translateZ(10px); /* Makes the tiles pop out slightly from the grid */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease, background 0.2s ease;
    /* Redo background to give a more metallic, slightly convex look */
    background: linear-gradient(145deg, #2b3a6c, #1a254c); /* Blue-grey metallic gradient */
    border: 2px solid #94b2f0; /* Sharper border */
    box-shadow: 
        inset 0 0 15px rgba(0,0,0,0.9), /* Dark inner shadow for depth */
        0 8px 15px rgba(0, 0, 0, 0.4), /* Lift effect */
        0 0 5px rgba(100, 150, 250, 0.3); /* Subtle outer glow */
    
    /* Ensure z-index is handled correctly within the 3D space */
    z-index: 1; 
}

/* Style for the symbol span inside the cell */
.slot-machine-wrapper .game-grid .game-cell span {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; 
    justify-content: center;
    align-items: center;
    font-size: 2.5rem; /* Changed to REM for consistent sizing */
    line-height: 1; 
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.8)); 
    will-change: transform, filter; 
    /* Ensure symbol sits on the face of the 3D tile */
    transform: translateZ(1px); /* Slightly raise the symbol from the tile face */
}

/* Neon Glow Effect for slot wins */
.slot-machine-wrapper .game-cell.winning { 
    border-color: #f1c40f; 
    box-shadow: 
        0 0 15px #f1c40f, 
        inset 0 0 15px #f1c40f,
        0 8px 20px rgba(241, 196, 15, 0.7); /* Enhanced shadow for winning state */
    background: linear-gradient(145deg, #fce07f, #f1c40f); /* Brighter winning background */
    animation: slotNeonGold 0.8s infinite alternate; 
    z-index: 10;
}
@keyframes slotNeonGold { 
    from { box-shadow: 0 0 10px #f1c40f, inset 0 0 5px #f1c40f; }
    to { box-shadow: 0 0 25px #f1c40f, inset 0 0 15px #f1c40f, 0 10px 30px rgba(241, 196, 15, 0.9); transform: scale(1.05) translateZ(15px); }
}

/* Info Display specific to Slot Machine */
#slotMachineSection .info-display {
    /* Current general styles are fine for slot, no explicit override here unless desired */
    transform: translateZ(30px); /* Lift info display slightly */
}

/* Main Controls specific to Slot Machine */
#slotMachineSection .main-controls {
    /* Current general styles are fine for slot, no explicit override here unless desired */
    transform: translateZ(40px); /* Lift controls slightly more */
}

/* Bet Box specific to Slot Machine */
#slotMachineSection .bet-box {
    /* Current general styles are fine for slot, no explicit override here unless desired */
}

/* Game Button (Spin) specific to Slot Machine */

/* ===== FANCY SPIN BUTTON STYLES ===== */


/* Pseudo-element for a subtle glint/reflection on the button */
#spinBtn.game-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Start off-screen to the left */
  
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg); /* Create a slanted glint effect */
    transition: left 0.6s ease;
    z-index: 1; /* Ensure glint is above button background */
}

/* Hover effects for the fancy spin button */
#spinBtn.game-button:hover {
    transform: scale(1.08) translateY(-12px) translateZ(50px); /* Lift more, slightly larger */
    border-color: #ffe082; /* Brighter gold on hover */
    box-shadow:
        0 0 15px rgba(0, 255, 0, 0.6),      /* Stronger green glow */
        0 12px 25px rgba(0, 0, 0, 0.7),     /* More pronounced lift */
        inset 0 0 20px rgba(255, 255, 255, 0.3),
        inset 0 -7px 20px rgba(0, 0, 0, 0.6);
    animation-play-state: paused; /* Pause pulsation on hover */
}

/* Glint animation on hover */
#spinBtn.game-button:hover::before {
    left: 150%; /* Sweep the glint across the button */
}

/* Active (pressed) state for the fancy spin button */
#spinBtn.game-button:active {
    transform: scale(0.95) translateY(-5px) translateZ(50px); /* Visually "push in" */
    background: radial-gradient(circle at 50% 50%, #27ae60, #145a32); /* Darker green on press */
    border-color: #f1c40f; /* Slightly darker gold */
    box-shadow:
        0 0 5px rgba(0, 255, 0, 0.2),      /* Dimmer green glow */
        0 2px 5px rgba(0, 0, 0, 0.4),      /* Less lift */
        inset 0 0 20px rgba(0, 0, 0, 0.8), /* Deep inner shadow */
        inset 0 5px 10px rgba(255, 255, 255, 0.1); /* Subtle inner highlight */
    transition-duration: 0.1s; /* Faster response when clicked */
}

/* Add this Keyframe for the pulsating animation at the end of your slot.css file */
@keyframes spinBtnPulse {
    0% {
        box-shadow:
            0 0 10px rgba(0, 255, 0, 0.4),
            0 8px 20px rgba(0, 0, 0, 0.6),
            inset 0 0 15px rgba(255, 255, 255, 0.2),
            inset 0 -5px 15px rgba(0, 0, 0, 0.5);
    }
    100% {
        box-shadow:
            0 0 15px rgba(0, 255, 0, 0.6),
            0 10px 22px rgba(0, 0, 0, 0.7),
            inset 0 0 18px rgba(255, 255, 255, 0.3),
            inset 0 -6px 18px rgba(0, 0, 0, 0.6);
    }
}


/* Paytable Button specific to Slot Machine */
#openPaytableBtn.game-button.cash-in {
    /* Current general styles are fine, but can add specific size/color */
    transform: translateZ(45px); /* Lift paytable button */
    box-shadow: 0 5px 10px rgba(0,0,0,0.4);
}


/* Game Message specific to Slot Machine */
#slotMessage {
    /* Current general styles are fine for slot, no explicit override here unless desired */
    transform: translateZ(25px); /* Lift message */
}


/* --- SLOT MACHINE ANIMATIONS --- */

/* The .spinning class for blur effect */
.slot-machine-wrapper .game-grid .game-cell span.spinning {
   animation: fancySlotSpin 0.3s linear infinite; /* Rapidly cycling animation */
}

/* Keyframes for landing / bounce at the end */
@keyframes slotLand {
    0%   { transform: translateY(-50%) translateZ(1px) scale(0.8); filter: blur(5px); opacity: 0; } /* Start small, blurry, slightly hidden */
    60%  { transform: translateY(10%) translateZ(1px) scale(1.05); filter: blur(0px); opacity: 1; } /* Overshoot a bit, clear, slightly large */
    80%  { transform: translateY(-5%) translateZ(1px) scale(0.98); filter: blur(0px); } /* Recoil slightly, slightly small */
    100% { transform: translateY(0) translateZ(1px) scale(1); filter: blur(0px); } /* Final stable state */
}
.slot-machine-wrapper .game-grid .game-cell span.landing {
    animation: slotLand 0.3s ease-out forwards;
    filter: none;
}


/* --- PAYTABLE MODAL (Specific to Slot Game) --- */
#paytableModal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.8); 
    justify-content: center;
    align-items: center;
}
#paytableModal .paytable-content {
    background: linear-gradient(135deg, #1a2a6c, #0d122b);
    margin: auto;
    padding: 25px;
    border: 2px solid #f1c40f;
    width: 90%;
    max-width: 400px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 191, 255, 0.5);
    color: white;
    text-align: left;
    position: relative;
}
#paytableModal .paytable-content h3 {
    text-align: center;
    color: #ffd700;
    font-family: 'Special Gothic Expanded One', sans-serif;
    margin-bottom: 15px;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
}
#paytableModal .paytable-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
}
#paytableModal .paytable-close:hover,
#paytableModal .paytable-close:focus {
    color: #f1c40f;
    text-decoration: none;
    cursor: pointer;
}
#paytableModal .paytable-explanation p {
    font-size: 0.9em;
    line-height: 1.4;
    margin-bottom: 10px;
    color: #e0e0e0;
}
#paytableModal .paytable-rules {
    margin-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 15px;
}
#paytableModal .paytable-rules h4 {
    color: #f1c40f;
    margin-bottom: 10px;
}
#paytableModal .paytable-symbols-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Symbol, Name, Value */
    gap: 5px 10px;
 
    font-size: 0.85em;
}
#paytableModal .paytable-symbols-grid div {
    padding: 3px 0;
}
#paytableModal .paytable-symbols-grid .header {
    font-weight: bold;
    color: #ffd700;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    margin-bottom: 5px;
}
#paytableModal .paytable-symbols-grid .symbol-char {
    font-size: 1.5em;
    text-align: center;
}
#paytableModal .paytable-symbols-grid .symbol-name {
    color: #ccc;
}
#paytableModal .paytable-symbols-grid .symbol-value {
    color: #f1c40f;
    font-weight: bold;
}

/* Custom SweetAlert styles for slot big wins */
.slot-win-popup {
    border: 3px solid #ffd700; 
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8); 
    border-radius: 20px;
    background: radial-gradient(circle at center, #1a2a6c, #0d122b, #000000) !important; 
    color: white !important; 
}
.slot-win-popup .swal2-title {
    color: #f1c40f !important; 
    font-family: 'Special Gothic Expanded One', sans-serif;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}
.slot-win-popup .swal2-html-container {
    color: #e0e0e0 !important; 
}
.slot-win-popup .swal2-icon.swal2-success {
    border-color: #ffd700 !important; 
}
.slot-win-popup .swal2-icon.swal2-success .swal2-success-line-tip,
.slot-win-popup .swal2-icon.swal2-success .swal2-success-line-long {
    background-color: #ffd700 !important; 
}
.slot-win-popup .swal2-confirm {
    background-color: #f1c40f !important; 
    color: #1a2a6c !important; 
    font-weight: bold;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    transition: all 0.3s ease;
}
.slot-win-popup .swal2-confirm:hover {
    background-color: #ffd700 !important;
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
}
/* New Fancier Spinning Animation Keyframes */
@keyframes fancySlotSpin {
    0% {
        transform: scale(1) translate(0, 0);
        filter: blur(0.5px); /* Start with a lighter blur */
        opacity: 1;
    }
    25% {
        transform: scale(0.98) translate(-0.5px, 0.5px);
        filter: blur(1.5px);
        opacity: 0.98;
    }
    50% {
        transform: scale(1.02) translate(0.5px, -0.5px);
        filter: blur(2.5px); /* Reduced maximum blur */
        opacity: 1;
    }
    75% {
        transform: scale(0.98) translate(-0.5px, 0.5px);
        filter: blur(1.5px);
        opacity: 0.98;
    }
    100% {
        transform: scale(1) translate(0, 0);
        filter: blur(0.5px);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .slot-machine-wrapper .game-grid .game-cell span {
        font-size: 2rem; /* Slightly smaller icons for tablets */
    }
}

@media (max-width: 500px) {
    .slot-machine-wrapper .game-grid .game-cell span {
        font-size: 1.5rem; /* Even smaller icons for mobile phones */
    }
    /* You might also need to adjust grid gap or cell size slightly if still too cramped */
    .slot-machine-wrapper .game-grid {
        gap: 3px; /* Reduce gap between cells */
    }

    #spinBtn {
 
    /* font-weight: 900; */
    padding: 5px 4px;
    border: 2px solid #ffeb3b;
   font-size: 1.2em;
}

.game-button.cash-in {
    width: auto;
    height: auto;
    border-radius: 5px;
    font-size: 0.8em;
    padding: 4px 4px;
    background: linear-gradient(to top, #4a69bd, #294a8d);
    border: 1px solid #7cb1d6;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    top: 0;
}
}