/* Global Kiosk Reset */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    #exit-to-home-btn {
        position: fixed; /* Position relative to the viewport */
        bottom: 30px;
        right: 30px;
        font-size: 2.5rem; /* Adjust icon size */
        color: #aab8c2; /* A soft white/grey color */
        text-decoration: none;
        z-index: 1001; /* Make sure it's on top of the name prompt background */
        transition: color 0.3s ease, transform 0.3s ease;
    }

    #exit-to-home-btn:hover {
        color: #ffffff; /* Brighter white on hover */
        transform: scale(1.1);
    }
    .table-layout {

        position: relative;
        background-image: url('/images/craps_blackfelt.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        aspect-ratio: 1920 / 960;
        display: block;
    }
    .bet-overlay {
        position: absolute;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;

    }
    .bet-overlay:hover {
        background-color: rgba(255, 215, 0, 0.4);
    }

    /* This rule targets all non-clickable positioning overlays */
    [id^="puck-"][id$="-overlay"],
    [id^="come-"][id$="-overlay"]:not(#come-overlay),
    [id^="dont-come-"][id$="-overlay"]:not(#dont-come-overlay) {
        pointer-events: none;
        cursor: default;
    }

    #pass-line-overlay {
        top: 78.5%;
        left: 22.5%;
        width: 26.5%;
        height: 9.5%;
        border-radius: 0 0 0 100px;
    }

    #odds-pass-overlay {
        top: 78.5%;
        left: 49%;
        width: 6.5%;
        height: 9.5%;
    }

    #dont-pass-overlay {
        top: 69%;
        left: 31%;
        width: 18%;
        height: 9%;
    }

    #odds-dont-pass-overlay {
        top: 69%;
        left: 49%;
        width: 6.5%;
        height: 9.5%;
    }

    #field-overlay {
        top: 53.5%;
        left: 31%;
        width: 24.5%;
        height: 15%;
    }

    #come-overlay {
        top: 37.5%;
        left: 26.2%;
        width: 29.4%;
        height: 16%;
    }

    #dont-come-overlay {
        top: 12.5%;
        left: 26.2%;
        width: 4.8%;
        height: 25%;
    }

    #puck-off-overlay {
        top: 5%;
        left: 26.2%;
        width: 4.8%;
        height: 6.5%;
    }
    /* 4 Bet Areas */
    #puck-4-overlay {
        top: 5%;
        left: 31%;
        width: 4.9%;
        height: 6.5%;
    }

    #buy-4-overlay {
        top: 27%;
        left: 31%;
        width: 4.9%;
        height: 7%;
    }
    
    #lay-4-overlay {
        top: 20%;
        left: 31%;
        width: 4.9%;
        height: 8%;
    }

    #place-4-overlay {
        top: 33.8%;
        left: 31%;
        width: 4.9%;
        height: 3.5%;
    }

    #come-4-overlay {
        top: 17.5%;
        left: 31%;
        width: 2.5%;
        height: 2.5%;
    }
    

    #odds-come-4-overlay {
        top: 17.5%;
        left: 33.6%;
        width: 2.3%;
        height: 2.5%;
    }
    #dont-come-4-overlay {
        top: 12.2%;
        left: 31%;
        width: 2.4%;
        height: 5.2%;
    }

    #odds-dont-come-4-overlay {
        top: 12.2%;
        left: 33.4%;
        width: 2.4%;
        height: 5.2%;
    }

    /* 5 Bet Areas */
    #puck-5-overlay {
        top: 5%;
        left: 36%;
        width: 4.9%;
        height: 6.5%;
    }
    
    #buy-5-overlay {
        top: 27%;
        left: 36%;
        width: 4.9%;
        height: 7%;
    }        

    #lay-5-overlay {
        top: 20%;
        left: 36%;
        width: 4.9%;
        height: 8%;
    }

    #place-5-overlay {
        top: 33.8%;
        left: 36%;
        width: 4.9%;
        height: 3.5%;
    }

    #come-5-overlay {
        top: 17.5%;
        left: 36%;
        width: 2.3%;
        height: 2.5%;
    }


    #odds-come-5-overlay {
        top: 17.5%;
        left: 38.5%;
        width: 2.3%;
        height: 2.5%;
    }

    #dont-come-5-overlay {
        top: 12.2%;
        left: 36%;
        width: 2.4%;
        height: 5.2%;
    }

    #odds-dont-come-5-overlay {
        top: 12.2%;
        left: 38.5%;
        width: 2.4%;
        height: 5.2%;
    }
    /* 6 Bet Areas */
    #puck-6-overlay {
        top: 5%;
        left: 41%;
        width: 4.9%;
        height: 6.5%;
    }

    #buy-6-overlay {
        top: 27%;
        left: 40.8%;
        width: 4.9%;
        height: 7%;
    }

    #lay-6-overlay {
        top: 20%;
        left: 40.8%;
        width: 4.9%;
        height: 8%;
    }

    #place-6-overlay {
        top: 33.8%;
        left: 40.8%;
        width: 4.9%;
        height: 3.5%;
    }

    #come-6-overlay {
        top: 17.5%;
        left: 40.8%;
        width: 2.3%;
        height: 2.5%;
    }

    #odds-come-6-overlay {
        top: 17.5%;
        left: 43.4%;
        width: 2.3%;
        height: 2.5%;
    }

    #dont-come-6-overlay {
        top: 12.2%;
        left: 40.8%;
        width: 2.4%;
        height: 5.2%;
    }

    #odds-dont-come-6-overlay {
        top: 12.2%;
        left: 43.4%;
        width: 2.4%;
        height: 5.2%;
    }
    /* 8 Bet Areas*/
    #puck-8-overlay {
        top: 5%;
        left: 45.8%;
        width: 4.9%;
        height: 6.5%;
    }

    #buy-8-overlay {
        top: 27%;
        left: 45.8%;
        width: 4.9%;
        height: 7%;
    }

    #lay-8-overlay {
        top: 20%;
        left: 45.8%;
        width: 4.9%;
        height: 8%;
    }

    #place-8-overlay {
        top: 33.8%;
        left: 45.8%;
        width: 4.9%;
        height: 3.5%;
    }

    #come-8-overlay {
        top: 17.5%;
        left: 45.8%;
        width: 2.3%;
        height: 2.5%;
    }

    #odds-come-8-overlay {
        top: 17.5%;
        left: 48.4%;
        width: 2.3%;
        height: 2.5%;
    }

    #dont-come-8-overlay {
        top: 12.2%;
        left: 45.8%;
        width: 2.4%;
        height: 5.2%;
    }

    #odds-dont-come-8-overlay {
        top: 12.2%;
        left: 48.4%;
        width: 2.4%;
        height: 5.2%;
    }
    /* 9 Bet Areas*/
    #puck-9-overlay {
        top: 5%;
        left: 50.7%;
        width: 4.9%;
        height: 6.5%;
    }

    #buy-9-overlay {
        top: 27%;
        left: 50.7%;
        width: 4.9%;
        height: 7%;
    }

    #lay-9-overlay {
        top: 20%;
        left: 50.7%;
        width: 4.9%;
        height: 8%;
    }

    #place-9-overlay {
        top: 33.8%;
        left: 50.7%;
        width: 4.9%;
        height: 3.5%;
    }

    #come-9-overlay {
        top: 17.5%;
        left: 50.7%;
        width: 2.3%;
        height: 2.5%;
    }

    #odds-come-9-overlay {
        top: 17.5%;
        left: 53.3%;
        width: 2.3%;
        height: 2.5%;
    }

    #dont-come-9-overlay {
        top: 12.2%;
        left: 50.7%;
        width: 2.4%;
        height: 5.2%;
    }

    #odds-dont-come-9-overlay {
        top: 12.2%;
        left: 53.3%;
        width: 2.4%;
        height: 5.2%;
    }
    /* 10 Bet Areas*/
    #puck-10-overlay {
        top: 5%;
        left: 55.7%;
        width: 4.9%;
        height: 6.5%;
    }
    #buy-10-overlay {
        top: 27%;
        left: 55.7%;
        width: 4.9%;
        height: 7%;
    }

    #lay-10-overlay {
        top: 20%;
        left: 55.7%;
        width: 4.9%;
        height: 8%;
    }

    #place-10-overlay {
        top: 33.8%;
        left: 55.7%;
        width: 4.9%;
        height: 3.5%;
    }

    #come-10-overlay {
        top: 17.5%;
        left: 55.7%;
        width: 2.3%;
        height: 2.5%;
    }

    #odds-come-10-overlay {
        top: 17.5%;
        left: 58.2%;
        width: 2.3%;
        height: 2.5%;
    }

    #dont-come-10-overlay {
        top: 12.2%;
        left: 55.7%;
        width: 2.4%;
        height: 5.2%;
    }

    #odds-dont-come-10-overlay {
        top: 12.2%;
        left: 58.2%;
        width: 2.4%;
        height: 5.2%;
    }

    #eleven-overlay {
        top: 40.8%;
        left: 58.5%;
        width: 1.8%;
        height: 5.8%;
        border-radius: 50%;
    }

    #c-craps-overlay {
        top: 40.8%;
        left: 56.3%;
        width: 1.8%;
        height: 5.8%;
        border-radius: 50%;
    }

    #c-and-e-craps-overlay {
        top: 48%;
        left: 56.6%;
        width: 3.5%;
        height: 12.3%;
        border-radius: 50%;
    }

    #hard-6-overlay {
        top: 23.5%;
        left: 61.7%;
        width: 8.8%;
        height: 11%;
    }

    #hard-10-overlay {
        top: 34.2%;
        left: 70.6%;
        width: 8.8%;
        height: 11%;
    }

    #hard-8-overlay {
        top: 23.5%;
        left: 70.6%;
        width: 8.8%;
        height: 11%;
    }

    #hard-4-overlay {
        top: 34.2%;
        left: 61.7%;
        width: 8.8%;
        height: 11%;
    }

    #craps-3-overlay {
        top: 57%;
        left: 61.7%;
        width: 7%;
        height: 11%;
    }

    #craps-2-overlay {
        top: 46%;
        left: 61.7%;
        width: 7%;
        height: 11%;
    }

    #craps-12-overlay {
        top: 46%;
        left: 72.5%;
        width: 7%;
        height: 11%;
    }

    #horn-overlay {
        top: 51.5%;
        left: 68.7%;
        width: 3.7%;
        height: 11%;
    }

    #craps-11-overlay {
        top: 56.8%;
        left: 72.4%;
        width: 7.1%;
        height: 11%;
    }

    #any-seven-overlay {
        top: 13%;
        left: 61.7%;
        width: 17.8%;
        height: 5.5%;
    }

    #any-craps-overlay {
        top: 67.8%;
        left: 61.7%;
        width: 17.8%;
        height: 6%;
    }

    /* --- HOP BETS SIDE PANEL --- */
    #hop-bets-btn {
        position: absolute;
        top: 50%;
        left: 1%;
        transform: translateY(-50%);
        width: 50px; 
        height: 300px;
        background-image: url('/images/HopBets.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
        z-index: 10;
        transition: transform 0.2s ease;
    }

    #hop-bets-btn:hover {
        transform: translateY(-50%) scale(1.05);
    }

    #hop-bet-indicators-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none; /* Make it invisible to clicks */
    }

    .side-panel {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 350px;
        background-color: rgba(27, 38, 59, 0.95);
        border-right: 2px solid #d4af37;
        box-shadow: 5px 0 15px rgba(0,0,0,0.5);
        z-index: 3000;            
        transform: translateX(-100%);
        transition: transform 0.4s ease-in-out; 
    }
    
    .side-panel.open {
        transform: translateX(0%);
    }

    .side-panel-content {
        padding: 20px;
        height: 100%;
        overflow-y: hidden; 
        display: flex;
        flex-direction: column;
    }

    .side-panel-content h2 {
        color: #ffd700;
        text-align: center;
        flex-shrink: 0;
    }

    .hop-bets-container {
        margin-top: 15px;
        overflow-y: auto;
        flex-grow: 1;
    }

    .hop-category h4 {
        color: #ffd700;
        margin-bottom: 10px;
        border-bottom: 1px solid #5d8aa8;
        padding-bottom: 5px;
    }

    .hop-bets-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 10px;
        margin-bottom: 20px;
    }

    .hop-bet-option {
        background-color: rgba(0, 0, 0, 0.2);
        border: 1px solid #5d8aa8;
        border-radius: 8px;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .hop-bet-option:hover {
        background-color: rgba(255, 215, 0, 0.4);
        border-color: #ffd700;
    }

    .side-panel-close-btn {
        position: absolute;
        top: 55%;
        right: -40px;
        transform: translateY(-50%);
        width: 50px;
        height: 40px;
        background-color: #d4af37;
        color: #111;
        border: none;
        border-radius: 0 10px 10px 0;
        cursor: pointer;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease-in-out;
    }

    .side-panel.open .side-panel-close-btn {
        opacity: 1;
        pointer-events: auto;
    }

    html, body {
        height: 100vh;
        width: 100vw;
        overflow: hidden;
        background: #000;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .game-container {
        width: 100%;
        height: 100%;
        max-width: 1920px;
        max-height: 1080px;
        background: #0c3710 radial-gradient(circle, #0c3710 0%, #082309 70%);
        border: 8px solid #d4af37;
        border-radius: 20px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .table-title {
        padding: 0.5vh 0;
        font-size: 2.2vh;
        letter-spacing: 3px;
        background: linear-gradient(to right, #8b0000, #b22222, #8b0000);
        color: #f8f8f8;
        text-transform: uppercase;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        border-bottom: 4px solid #d4af37;
        font-weight: 700;
        flex-shrink: 0;
        text-align: center;
    }

    .header {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 0.5vw;
        background: linear-gradient(135deg, #1e3c5f, #152642);
        padding: 0.8vh 0.8vw;
        border-bottom: 3px solid #d4af37;
        flex-shrink: 0;
    }

    .header div {
        text-align: center;
        padding: 0.4vh 0.5vw;
        background: rgba(13, 71, 161, 0.8);
        border-radius: 8px;
        font-weight: bold;
        font-size: 1.6vh;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
        border: 1px solid #5d8aa8;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5vw;
        
    }

    .timer, .player-name, .credit {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 0.5vh;
    }

    .timer-label, .player-label, .credit-label {
        font-size: 1.6vh;
        line-height: 1.2;
    }

    .timer-value {
        font-size: 4vh !important;
        font-weight: bold;
        color: #ffd700;
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
        margin-top: -0.2vh;
    }

    .player-value {
        font-size: 2.5vh !important;
        font-weight: bold;
        color: #ffd700;
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
        margin-top: -0.2vh;
    }

    .bet-limits {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 0.8vh 0.5vw;
        background: rgba(13, 71, 161, 0.8);
        border-radius: 8px;
        font-weight: bold;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
        border: 1px solid #5d8aa8;
    }

    .limit-line {
        font-size: 1.5vh;
        white-space: nowrap;
        display: flex;
        gap: 0.3vw;
    }

    .limit-label {
        color: #aab8c2;
    }


    #minBet, #maxBet {
        color: #20c997;
        font-weight: bold;
    }

    #maxOdds {
        color: #ffd700; 
        font-weight: bold;
    }

    .phase {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 0.8vh 0.5vw;
        background: rgba(13, 71, 161, 0.8);
        border-radius: 8px;
        font-weight: bold;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
        border: 1px solid #5d8aa8;
    }

    .phase-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.1;
        width: 100%;
    }

    .phase-label {
        font-size: 1.6vh;
        white-space: nowrap;
    }

    .phase-value {
        font-size: 1.8vh !important;
        font-weight: bold;
        color: #ffd700;
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
        margin: 0.2vh 0;
    }

    .puck-container {
        margin-top: 0.3vh;
    }

    .puck {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 0.7rem;
        text-transform: uppercase;
        box-shadow: inset 0 0 5px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
        flex-shrink: 0;
    }

    .puck-off {
        background-color: #111;
        color: white;
        border: 2px solid #555;
    }

    #bet-indicators-container, #puck-on, #puck-off {
        position: absolute;
        pointer-events: none;
    }

    .bet-indicator, .bet-status-indicator {
        pointer-events: none;
    }

    .credit-value {
        font-size: 2.8vh !important;
        font-weight: bold;
        color: #ffd700;
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
    }

    .win-bet {
        flex-direction: column;
        gap: 0.4vh;
        font-size: 1.4vh !important;
    }

    .table-layout {
        flex-grow: 1;
        display: grid;
        grid-template-columns: repeat(14, 1fr);
        grid-template-rows: repeat(7, 1fr);
        gap: 0.3vh;
        padding: 1vh 1vw;
        position: relative;
        min-height: 0;
    }

    .bet-area {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0.5vh;
        border-radius: 6px;
        font-weight: bold;
        font-size: 1.4vh;
        cursor: pointer;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4);
        position: relative;
        overflow: hidden;
    }

    .bet-text {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }

    .payout {
        font-size: 1.2vh;
        color: #ffd700;
        margin-top: 0.5vh;
    }

    .number-bets {
        grid-column: 1 / span 12;
        grid-row: 1 / span 3;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 0.5vw;
    }

    .number-bet {
        display: flex;
        flex-direction: column;
        gap: 0.5vh;
        position: relative;
    }

    .number-header {
        background: rgba(0, 0, 0, 0.4);
        padding: 0.5vh;
        border-radius: 4px;
        font-size: 2.2vh;
        font-weight: bold;
        text-align: center;
    }

    .bet-option {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        padding: 0.3vh;
        font-size: 1.3vh;
        position: relative;
    }

    .span-two {
        grid-column: span 2;
    }

    /* Player Controls Section */
    .player-controls {
        flex-shrink: 0; /* Prevent this section from shrinking */
        padding: 1vh 1vw;
        background: #0d1b2a;
    }

    .dice-container {
        display: flex;
        justify-content: center;
        gap: 2vw;
        margin-bottom: 1vh;
    }

    .table-die {
        width: 7vh;
        height: 7vh;
        border-radius: 1vh;
        padding: 0.5vh;
    }

    .table-die .dot {
        width: 1.5vh;
        height: 1.5vh;
    }

    .chips {
        display: flex;
        justify-content: center;
        gap: 1vw;
        margin-bottom: 1vh;
    }

    .chip {
        width: 6vh;
        height: 6vh;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 1.8vh;
        cursor: pointer;
        border: 3px solid white;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    }

    .chip-25 {
        background: linear-gradient(145deg, #ff6b6b, #ee5253);
    }

    .chip-50 {
        background: linear-gradient(145deg, #48dbfb, #0abde3);
    }

    .chip-1 {
        background: linear-gradient(145deg, #feca57, #ff9f43);
    }

    .chip-5 {
        background: linear-gradient(145deg, #1dd1a1, #10ac84);
    }

    .chip-25::after {
        content: '¢25';
    }

    .chip-50::after {
        content: '¢50';
    }

    .chip-1::after {
        content: '$1';
    }

    .chip-5::after {
        content: '$5';
    }

    .buttons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1vw;
    }

    .button {
        background: linear-gradient(145deg, #0d47a1, #0a3a87);
        color: white;
        padding: 1vh 1.5vw;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        font-weight: bold;
        font-size: 1.5vh;
        text-align: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5vw;
        transition: all 0.2s ease-in-out;
    }

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

    .button:active {
        transform: translateY(1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .button-cancel {
        background: linear-gradient(145deg, #6c757d, #495057);
        border: 1px solid #888;
    }

    .button-cancel:hover {
        background: linear-gradient(145deg, #dc3545, #bd2130);
        border-color: #f5c6cb;
    }

    .bottom-info {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1vw;
        padding: 0.5vh 1vw;
    }

    .roll-history-container {
        background: linear-gradient(145deg, #1b263b, #152031);
        border: 2px solid #d4af37;
        border-radius: 10px;
        padding: 0.8vh 1vw;
        font-size: 1.5vh;
        display: flex;
        align-items: center;
        gap: 1vw;
        flex-wrap: nowrap;
        overflow-x: auto;
        min-height: 40px;
    }

    .new-badge {
        position: absolute;
        top: -4px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #28a745;
        color: white;
        padding: 1px 6px;
        border-radius: 5px;
        font-size: 0.6rem;
        font-weight: bold;
        text-transform: uppercase;
    }

    .roll-item {
        display: flex;
        gap: 4px; 
        position: relative; 
    }

    .history-separator {
        margin: 0 8px; 
        align-self: center; 
    }

    #rollHistory {
        display: flex;
        align-items: center;
        gap: 1vw;
    }

    .history-die {
        width: 2.5vh;
        height: 2.5vh;
        border-radius: 4px;
    }

    .history-die .dot {
        width: 0.5vh;
        height: 0.5vh;
    }

    .sound-controls-container {
        display: flex;
        align-items: center;
        gap: 0.8vw;
        padding: 0 1vw;
        background: rgba(0,0,0,0.2);
        border-radius: 50px;
    }

    .sound-icon {
        color: #aab8c2;
    }

    #volume-slider {
        cursor: pointer;
    }

    .button-rules {
        background: linear-gradient(145deg, #6f42c1, #5a32a3);
    }

    /* Styles for the Rules Modal */
    .rules-content {
        height: 70vh;
        width: 60vw;
        max-width: 800px;
        display: flex;
        flex-direction: column;
    }

    .rules-close-btn {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 2.5rem;
        color: #fff;
        background: none;
        border: none;
        cursor: pointer;
    }

    /* Styles for the Swiper slider */
    .swiper {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        text-align: left;
        font-size: 1rem;
        padding: 20px;
        overflow-y: auto;
    }

    .swiper-slide h4 {
        color: #ffd700;
        margin-bottom: 15px;
    }

    /* --- BANNERS AND OVERLAYS CSS --- */
    #fireCanvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: none;
        z-index: 3500;
        pointer-events: none;
        background-color: transparent;
    }
    #bannerCanvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 2000; 
        pointer-events: none;
        display: block;
    }
    .wait-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 2500;
    }    

    .wait-text {
        color: white;
        font-size: 2.5rem;
        font-weight: bold;
        text-align: center;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
        padding: 20px;
    }
    .banner {
        position: fixed;
        padding: 25px 80px;
        border-radius: 15px;
        font-size: 3.5rem;
        font-weight: bold;
        text-transform: uppercase;
        color: white;
        text-shadow: 0 3px 6px rgba(0,0,0,0.5);
        z-index: 2000;
        display: none; /* This is the key: hidden by default */
        left: 50%;
    }


    .banner-win {
        top: 20px;
        transform: translateX(-50%);
        background: linear-gradient(145deg, #1e90ff, #0d47a1);
        border: 4px solid #add8e6;
        font-size: 3rem;
        padding: 20px 60px;
        animation: banner-fade 4s ease-in-out;
        --banner-transform: translateX(-50%);
    }

    #win-banner-amount {
        color: #ffd700;
        font-weight: bold;
    }


    @@keyframes banner-fade {
        0%, 100% {
            opacity: 0;
            transform: var(--banner-transform, translate(-50%, -50%)) scale(0.8);
        }

        15%, 85% {
            opacity: 1;
            transform: var(--banner-transform, translate(-50%, -50%)) scale(1);
        }
    }

    /* --- NEW 3D DICE STYLES --- */

    /* The main overlay that contains the animation */
    .dice-roll-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        display: none; /* Hidden by default */
        justify-content: center;
        align-items: center;
        z-index: 3000;
        flex-direction: column;
    }

    /* Variables for easy customization */
    :root {
        --dice-size: 100px;
        --dot-size: 20px;
        --perspective: 800px;
    }

    .scene {
        display: flex;
        gap: 50px;
        perspective: var(--perspective);
    }

    .cube {
        width: var(--dice-size);
        height: var(--dice-size);
        position: relative;
        transform-style: preserve-3d;
        transform: translateZ(calc(var(--dice-size) / -2));
        transition: transform 1.5s ease-out; /* Slower, more dramatic transition */
    }

    .face {
        position: absolute;
        width: var(--dice-size);
        height: var(--dice-size);
        background-color: #c0392b; /* Red dice */
        border: 2px solid #333;
        border-radius: 10px;
        display: grid;
        padding: 10px;
        box-sizing: border-box;
    }

    .dot {
        width: var(--dot-size);
        height: var(--dot-size);
        background-color: #fff; /* White dots */
        border-radius: 50%;
        align-self: center;
        justify-self: center;
    }

    /* --- Face Positions & Dot Layouts --- */
    .one {
        transform: rotateY(0deg) translateZ(calc(var(--dice-size) / 2));
        grid-template-areas: ". . ." ". a ." ". . .";
    }

    .two {
        transform: rotateX(-90deg) translateZ(calc(var(--dice-size) / 2));
        grid-template-areas: "a . ." ". . ." ". . b";
    }

    .three {
        transform: rotateY(90deg) translateZ(calc(var(--dice-size) / 2));
        grid-template-areas: "a . ." ". b ." ". . c";
    }

    .four {
        transform: rotateY(-90deg) translateZ(calc(var(--dice-size) / 2));
        grid-template-areas: "a . b" ". . ." "c . d";
    }

    .five {
        transform: rotateX(90deg) translateZ(calc(var(--dice-size) / 2));
        grid-template-areas: "a . b" ". c ." "d . e";
    }

    .six {
        transform: rotateY(180deg) translateZ(calc(var(--dice-size) / 2));
        grid-template-areas: "a . b" "c . d" "e . f";
    }

    .one .dot:nth-child(1) {
        grid-area: a;
    }

    .two .dot:nth-child(1) {
        grid-area: a;
    }

    .two .dot:nth-child(2) {
        grid-area: b;
    }

    .three .dot:nth-child(1) {
        grid-area: a;
    }

    .three .dot:nth-child(2) {
        grid-area: b;
    }

    .three .dot:nth-child(3) {
        grid-area: c;
    }

    .four .dot:nth-child(1) {
        grid-area: a;
    }

    .four .dot:nth-child(2) {
        grid-area: b;
    }

    .four .dot:nth-child(3) {
        grid-area: c;
    }

    .four .dot:nth-child(4) {
        grid-area: d;
    }

    .five .dot:nth-child(1) {
        grid-area: a;
    }

    .five .dot:nth-child(2) {
        grid-area: b;
    }

    .five .dot:nth-child(3) {
        grid-area: c;
    }

    .five .dot:nth-child(4) {
        grid-area: d;
    }

    .five .dot:nth-child(5) {
        grid-area: e;
    }

    .six .dot:nth-child(1) {
        grid-area: a;
    }

    .six .dot:nth-child(2) {
        grid-area: b;
    }

    .six .dot:nth-child(3) {
        grid-area: c;
    }

    .six .dot:nth-child(4) {
        grid-area: d;
    }

    .six .dot:nth-child(5) {
        grid-area: e;
    }

    .six .dot:nth-child(6) {
        grid-area: f;
    }

    

    @@keyframes fadeInOutResult {
        0% {
            opacity: 0;
        }

        10%, 90% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    

    .dice-sum {
        font-size: 7rem;
        font-weight: bold;
        color: #dc3545;
        text-shadow: 0 0 10px rgba(255,255,255,0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        padding: 0 20px;
    }

    

    .overlay-die .dot {
        width: 30px;
        height: 30px;
    }

    .chip-indicator {
        width: 3vh;
        height: 3vh;
        position: absolute;
        transform: translate(-50%, -50%);
        background-image: url('/images/greenchip.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .chip-amount {
        color: #000;
        font-weight: bold;
        font-size: 1.4vh;
        text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.7);
    }

    .bet-status-indicator {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 2.2vh;
        height: 2.2vh;
        border-radius: 50%;
        font-size: 1vh;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 4;
        box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        border: 1px solid rgba(255, 255, 255, 0.7);
        text-transform: uppercase;
    }

    .status-on {
        background-color: #28a745;
        color: white;
    }

    .status-off {
        background-color: #dc3545;
        color: white;
    }

    .chip.selected {
        box-shadow: 0 0 20px #ffd700, 0 0 30px #ffd700;
        transform: scale(1.15);
    }

    #name-prompt {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #1b263b;
        padding: 20px;
        border: 2px solid #ffd700;
        z-index: 1000;
        text-align: center;
    }

    #name-prompt input {
        margin: 10px 0;
        padding: 5px;
        width: 100%;
        font-size: 1.2rem;
    }

    #name-prompt button {
        background-color: #0d47a1;
        color: white;
        padding: 10px 20px;
        border: 1px solid #ffd700;
        cursor: pointer;
        font-size: 1.1rem;
        border-radius: 5px;
        margin-top: 10px;
    }

    #exit-to-home-btn {
        position: fixed; /* Position relative to the viewport */
        bottom: 30px;
        right: 30px;
        font-size: 2.5rem; /* Adjust icon size */
        color: #aab8c2; /* A soft white/grey color */
        text-decoration: none;
        z-index: 1001; /* Make sure it's on top of the name prompt background */
        transition: color 0.3s ease, transform 0.3s ease;
    }

    #exit-to-home-btn:hover {
        color: #ffffff; /* Brighter white on hover */
        transform: scale(1.1);
    }

    .notification {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(25, 135, 84, 0.9);
        color: white;
        padding: 15px 30px;
        border-radius: 50px;
        font-size: 1.1rem;
        z-index: 1000;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        display: none;
    }

    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 4000;
    }

    .modal-content {
        background: radial-gradient(circle, #2a3b52 0%, #1b263b 100%);
        border: 2px solid #d4af37;
        border-radius: 15px;
        padding: 30px;
        width: 90%;
        max-width: 450px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 15px rgba(0,0,0,0.4);
        color: #f0f0f0;
    }

    .modal-content h2 {
        color: #ffd700;
        text-transform: uppercase;
        font-size: 1.8rem;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
        margin-bottom: 20px; 
    }

    .modal-content .form-group, .modal-content .modal-input-container {
        margin-bottom: 15px;
        text-align: left;
    }

    .modal-content label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
        color: #aab8c2;
        font-size: 0.9rem;
    }

    .modal-content input[type="number"],
    .modal-content input[type="email"],
    .modal-content input[type="text"],
    .modal-content select {
        width: 100%;
        padding: 12px 15px;
        background-color: rgba(0, 0, 0, 0.3);
        border: 1px solid #5d8aa8;
        border-radius: 8px;
        color: #ffffff;
        font-size: 1.1rem;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
        transition: all 0.3s ease;
    }

    .modal-content input:focus,
    .modal-content select:focus {
        outline: none;
        border-color: #d4af37;
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.5), inset 0 2px 4px rgba(0,0,0,0.4);
    }

    .quick-amounts {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin: 15px 0;
    }

    .quick-amount-btn {
        background: #495057;
        color: white;
        border: 1px solid #6c757d;
        padding: 8px 15px;
        border-radius: 20px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
    }

    .quick-amount-btn:hover {
        background: #d4af37;
        color: #111;
        border-color: #d4af37;
    }

    .modal-actions {
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    .puck {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 0.7rem;
        text-transform: uppercase;
        box-shadow: inset 0 0 5px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
        flex-shrink: 0;
    }

    .puck-off {
        background-color: #111;
        color: white;
        border: 2px solid #555;
    }

    .puck-on {
        background-color: white;
        color: #111;
        border: 2px solid #888;
        position: absolute;
        z-index: 100;
        transition: top 0.5s ease, left 0.5s ease;
    }

    .hidden {
        display: none !important;
    }

    .die-face {
        background-color: #dc3545;
        border: 1px solid #ffc107;
        display: grid;
        grid-template-areas: "a . c" "e g f" "d . b";
    }

    .die-face .dot {
        background-color: white;
        border-radius: 50%;
        align-self: center;
        justify-self: center;
    }

    .die-face .dot[data-area="a"] {
        grid-area: a;
    }

    .die-face .dot[data-area="b"] {
        grid-area: b;
    }

    .die-face .dot[data-area="c"] {
        grid-area: c;
    }

    .die-face .dot[data-area="d"] {
        grid-area: d;
    }

    .die-face .dot[data-area="e"] {
        grid-area: e;
    }

    .die-face .dot[data-area="f"] {
        grid-area: f;
    }

    .die-face .dot[data-area="g"] {
        grid-area: g;
    }

    #playerList {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 0 15px;
        min-height: 40px;
    }

    .player-list-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .shooter-badge {
        background-color: #f1c40f;
        color: #2c3e50;
        padding: 2px 8px;
        border-radius: 5px;
        font-weight: bold;
        font-size: 0.8em;
        text-transform: uppercase;
    }

    .player-name {
        font-weight: bold;
        font-size: 1.1em;
    }

    .player-separator {
        font-size: 1.5em;
        color: #6c757d;
        font-weight: 100;
    }