/* === Banksino - Final Unified Stylesheet === */

/* --- 1. Global & Font Imports --- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {
    --primary-glow: #f39c12;    /* Orange */
    --secondary-glow: #f1c40f; /* Yellow */
    --link-color: #63d4d0;       /* Cyan */
    --background-dark: #1a1a1a;
    --background-med: #2c2c2c;
    --background-light: #3a3a3a;
    --border-color: #444;
    --text-light: #ccc;
    --text-white: #fff;
    --font-primary: 'Orbitron', sans-serif;
    --font-secondary: 'Roboto', sans-serif;
}

html {scroll-behavior: smooth;}

body {
    font-family: var(--font-secondary);
    background-color: var(--background-dark);
    color: var(--text-light);
    margin: 0;
}

main {
    padding: 2rem 1rem;
}

/* --- 2. Header & Navigation --- */
header {
    background-color: #000;
    padding: 1.5rem 2rem; /* Added a little more vertical padding */
    display: flex;
    flex-direction: column; /* This stacks the title and nav vertically */
    align-items: center;   /* This centers them horizontally */
    gap: 0.5rem;             /* This adds a nice space between the title and the nav links */
    border-bottom: 2px solid var(--border-color);
}
header h1 a {
    font-family: var(--font-primary);
    color: #8A2BE2; /* Banksino Purple */
    text-decoration: none;
    font-size: 2.5rem;
    text-shadow: 0 0 5px #fff, 0 0 10px #8A2BE2;
}
header nav a {
    color: var(--link-color);
    text-decoration: none;
    margin: 0 1rem;
    font-size: 1.1rem;
    font-family: var(--font-primary);
}
header nav form { display: inline; margin: 0; padding: 0; }
header nav form button {
    background: none; border: none; padding: 0;
    color: var(--link-color);
    font: inherit; cursor: pointer; outline: inherit;
    vertical-align: baseline;
}
header nav a:hover, header nav form button:hover {
    text-decoration: underline;
}


/* --- 3. Main Game Layout (Mobile First) --- */
.game-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    /*width: 100%;*/
    max-width: 500px; /* Constrain width on mobile */
    margin: 0 auto;   /* Center the wrapper */

    
}

.live-feed {
    width: 100%;
    background: var(--background-med);
    padding: 1.5rem;
    border-radius: 15px;
    border: 2px solid #333;
    box-sizing: border-box; /* Ensure padding is included in width */
    order: 2; /* Keep feeds below the slot on mobile */
}

/* --- 4. Slot Machine Container --- */
.slot-container {
    width: 100%;
    padding: 5.5rem; /* Adjusted padding for mobile */
    border: 4px solid var(--border-color);
    border-radius: 25px;
    background: radial-gradient(circle at top, var(--background-light) 0%, #111 100%);
    text-align: center;
    box-shadow: 0 0 20px var(--primary-glow), 0 0 40px var(--primary-glow);
    box-sizing: border-box;
    order: 1; /* Place slot machine at the top on mobile */
}
.slot-container h2 {
    font-family: var(--font-primary);
    margin-top: 1rem;

    font-size: 1.5rem; /* Increased font size */
}
.rules-link {
    display: block;
    margin-top: -10px;
    margin-bottom: 10px;
    color: var(--secondary-glow);
    text-decoration: underline;
    font-size: 1rem;
    cursor: pointer;
}

/* --- 5. Reels & Animation --- */
.slot-result {
    display: flex; justify-content: center; gap: 1rem;
    margin: 1.5rem 0; padding: 0.5rem; background: #0a0a0a;
    border-radius: 10px; box-shadow: inset 0 0 15px #000; height: 4rem;

    height: 5rem; /* Increased height */
}
.reel {
    width: 5rem; height: 5rem; /* Increased size */
    overflow: hidden;
    background: #000; border: 2px solid #333;
    border-radius: 8px; position: relative;
    /*
    width: 4rem; height: 4rem; overflow: hidden;
    background: #000; border: 2px solid #333;
    border-radius: 8px; position: relative;
    */
}
.reel::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%);
    pointer-events: none;
}
.reel-strip { list-style: none; padding: 0; margin: 0; }
.reel-strip li {
    /*height: 4rem; font-size: 2.5rem; line-height: 4rem;
    text-align: center; text-shadow: 0 0 5px var(--primary-glow);*/
    height: 5rem; /* Increased height */
    font-size: 3rem; /* Increased font size */
    line-height: 5rem; /* Increased line-height */
    text-align: center; text-shadow: 0 0 5px var(--primary-glow);
}

/* --- 6. Live Feed Content --- */
.live-feed h3 {
    margin-top: 0;
    font-family: var(--font-primary);
    color: var(--secondary-glow);
    text-align: center;
}
.live-feed .winner-item {
    background: var(--background-light); margin-bottom: 0.5rem;
    padding: 0.5rem 1rem; border-radius: 8px;
    font-size: 1rem; display: flex;
    justify-content: space-between; align-items: center;
}

/* --- 7. Form Controls & Text --- */
.bet-selector { margin-bottom: 1.5rem; display: flex; justify-content: center; gap: 0.5rem; }
.bet-btn {
    /*background-color: #333; border: 2px solid #555; color: #ccc;
    padding: 0.5rem 1rem; border-radius: 8px; font-family: var(--font-primary);
    font-size: 0.9rem; font-weight: bold; cursor: pointer; transition: all 0.2s ease;*/
    background-color: #333; border: 2px solid #555; color: #ccc;
    padding: 0.5rem 1rem; border-radius: 8px; font-family: var(--font-primary);
    font-size: 1rem; /* Increased font size */
    font-weight: bold; cursor: pointer; transition: all 0.2s ease;
}
.bet-btn.active {
    background-color: var(--secondary-glow); color: #111;
    border-color: #fff; transform: scale(1.1); box-shadow: 0 0 10px var(--secondary-glow);
}
button[name="spin"] {
    /*background: linear-gradient(145deg, #ffac32, #e08c00);
    color: var(--background-dark); border: 2px solid #ffc872;
    padding: 1rem 2rem; border-radius: 12px;
    font-size: 1.2rem; font-weight: bold; cursor: pointer;
    font-family: var(--font-primary);
    transition: transform 0.1s ease;*/
    background: linear-gradient(145deg, #ffac32, #e08c00);
    color: var(--background-dark); border: 2px solid #ffc872;
    padding: 1rem 2rem; border-radius: 12px;
    font-size: 1.4rem; /* Increased font size */
    font-weight: bold; cursor: pointer;
    font-family: var(--font-primary);
    transition: transform 0.1s ease;
}
button[name="spin"]:active { transform: scale(0.95); }
label { margin: 0 1rem; }
.token-balance { 
    /*font-size: 1.1rem; margin-bottom: 1rem; color: var(--secondary-glow);*/
    font-size: 1.2rem; /* Increased font size */ 
    margin-bottom: 1rem; 
    color: var(--secondary-glow); 
 }
.message { margin-top: 1rem; font-size: 1.2rem; height: 1.5rem; }

/* --- 8. Modal Styles --- */
.modal {
    position: fixed; z-index: 1000; left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex; justify-content: center; align-items: center;
}
.modal.hidden { display: none; }
.modal-content {
    background: radial-gradient(circle at top, #333 0%, #111 100%);
    padding: 20px 40px; border: 2px solid var(--primary-glow);
    border-radius: 15px; width: 90%; max-width: 500px;
    position: relative; box-shadow: 0 0 30px var(--primary-glow);
}
.close-btn {
    color: #aaa; position: absolute; top: 10px; right: 20px;
    font-size: 28px; font-weight: bold; cursor: pointer;
}
.modal-content table { width: 100%; margin-top: 1rem; border-collapse: collapse; }
.modal-content th, .modal-content td { text-align: left; padding: 8px; border-bottom: 1px solid #444; }
.modal-content th { color: var(--primary-glow); }

/* --- 9. Footer --- */
footer {
    background: #000; color: var(--text-light);
    padding: 1rem; text-align: center; margin-top: 2rem;
}

.footer-links {
            margin-bottom: 1rem;
        }
.footer-links a {
    color: var(--link-color);
    text-decoration: none;
    margin: 0 0.5rem;
}
.footer-links a:hover {
    text-decoration: underline;
}


/* --- 10. Desktop Layout (Corrected) --- */
@media (min-width: 1200px) {
    .game-wrapper {
        display: grid;
        /* A flexible grid that keeps the center constrained and the sides equal */
        grid-template-columns: 1fr minmax(0, 700px) 1fr;
        align-items: flex-start;
        gap: 2rem;
        max-width: 1600px;
        margin: 2rem auto;
        padding: 0 2rem;
    }

    #live-winners-feed {
        grid-column: 1;      /* Place on the left */
        order: initial;      /* Reset mobile order */
        max-width: none;
        justify-self: center; 
    }

    .slot-container {
        grid-column: 2;      /* Place in the center */
        order: initial;      /* THIS IS THE KEY FIX */
         /* NEW: Set a width, not max-width, to control its size within the grid area */
        width: 85%; 
        padding: 1rem;
        /* NEW: This is how you center it within its grid column */
        justify-self: center; 
    }

    #donations-leaderboard {
        grid-column: 3;      /* Place on the right */
        order: initial;      /* Reset mobile order */
        max-width: none;
        justify-self: center; 
    }
}

/* --- Purchase Button Style --- */

.purchase-btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(145deg, #2ecc71, #27ae60); /* Green gradient */
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 10px;
    border: 2px solid #34d399;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
    font-family: var(--font-primary);
}

.purchase-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}


/* --- NEW: Win and Jackpot Glow Animations --- */


.win-glow {
    animation-name: winGlowAnimation;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
}

.jackpot-win-glow {
    animation-name: jackpotGlowAnimation;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: 2; /* Loop for extra effect */
}

@keyframes winGlowAnimation {
    0% { box-shadow: 0 0 20px #f39c12, 0 0 40px #f39c12; }
    50% { box-shadow: 0 0 30px #2ecc71, 0 0 60px #2ecc71; } /* Pulse to green */
    100% { box-shadow: 0 0 20px #f39c12, 0 0 40px #f39c12; }
}

@keyframes jackpotGlowAnimation {
    0% { box-shadow: 0 0 20px #f39c12, 0 0 40px #f39c12; }
    25% { box-shadow: 0 0 35px #3498db, 0 0 70px #3498db; } /* Blue */
    50% { box-shadow: 0 0 35px #9b59b6, 0 0 70px #9b59b6; } /* Purple */
    75% { box-shadow: 0 0 35px #e74c3c, 0 0 70px #e74c3c; } /* Red */
    100% { box-shadow: 0 0 20px #f39c12, 0 0 40px #f39c12; }
}


/* --- NEW: Header Sound Toggle --- */
#sound-toggle {
    background: none;
    border: 2px solid var(--text-light);
    color: var(--text-light);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    /*margin-left: 1rem; *//* Adds space between it and the nav */
}

#sound-toggle:hover {
    background: var(--link-color);
    color: var(--background-dark);
    border-color: var(--link-color);
}

#sound-toggle.muted {
    border-color: #666;
    color: #666;
}

.pool-card ol {
    padding-left: 20px;
}
.pool-card li {
    margin-bottom: 0.5rem;
}