/* Custom styles adapted for the Quartz theme */
:root {
    --quartz-primary: #593196;
    --quartz-secondary: #18b2b2;
    --quartz-dark: #343f56;
    --quartz-light: #f8f9fa;
    --craps-felt: #343f56; /* Changed from green to match theme */
}

html, body {
    height: 100%;
    margin: 0;
    /* Allow vertical scrolling on all screen sizes */
    overflow-y: auto;
}

body {
    /* Changed to a standard system font stack */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    justify-content: center;
    /* Align items to the top to respect padding-top */
    align-items: flex-start;
    padding: 0.5rem; /* Padding for small screens (sides) */
    background-color: var(--bs-body-bg);
    box-sizing: border-box; /* Include padding in element's total width and height */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

.game-console {
    background: linear-gradient(to bottom, #212529, #343f56);
    border: 5px solid var(--quartz-secondary);
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(24, 178, 178, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.5);
    padding: 1.5rem;
    width: 100%;
    max-width: 900px;
    position: relative;
    display: flex; /* Changed to flex for easy toggling */
    flex-direction: column;
    /* Add a top margin for consistent spacing below the fixed navbar */
    margin-top: 1rem;
    margin-bottom: 20px; /* Add some space at the bottom */
}

.playing-surface {
    background-color: var(--craps-felt);
    border-radius: 15px;
    padding: 1rem;
    border: 3px solid #495057;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.6);
}

.dice-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    min-height: 80px;
}

.die {
    width: 60px;
    height: 60px;
    background-color: #fff;
    border: 2px solid #333;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    color: #333;
}

.betting-layout {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.place-bets-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
}

.bet-area {
    border: 2px solid var(--quartz-light);
    border-radius: 10px;
    padding: 0.5rem;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--quartz-light);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bet-area:not(.disabled):hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.bet-area.point-on {
    border-color: var(--quartz-secondary);
    box-shadow: 0 0 12px var(--quartz-secondary), inset 0 0 8px rgba(24, 178, 178, 0.5);
    transform: scale(1.05);
}

.bet-area.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.line-bets-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.bet-area .bet-amount {
    display: block;
    font-size: 1rem;
    color: #ffc107;
    min-height: 20px;
    font-weight: normal;
}

.actions-panel, .betting-panel, .info-panel {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 1rem 1.5rem;
    border-radius: 15px;
}
.actions-panel{
    border-top: 3px solid var(--quartz-secondary);
}
.betting-panel, .info-panel {
    border-top: 2px solid #212529;
}

.action-button, .bet-button {
    /* Use consistent system font */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.1s ease-in-out;
    padding: 0.75rem 0;
    width: 100%;
}

.action-button { font-size: 1.5rem; }
.bet-button { font-size: 1rem; }

/* Styles for the new "Keep Bets" button */
.trash{
    border-radius: 0.375rem; /* Bootstrap's default button border-radius */
    border: 2px solid var(--quartz-light);
    padding: 0.5rem 1rem;
}

#btnKeepBetsTRASH {
    background-color: transparent;
    color: var(--quartz-light);
    transition: all 0.2s ease;
    width: 100%;
}

#btnKeepBets {
    transition: all 0.2s ease;
    width: 100%;
}

#btnKee33pBets { /* This ID seems like a typo, consider removing if not used */
    border: 2px solid var(--quartz-light);
    background-color: transparent;
    color: var(--quartz-light);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem; /* Bootstrap's default button border-radius */
    transition: all 0.2s ease;
    width: 100%;
}

/* Updated: Style for active "Keep Bets" button to match "point-on" visual */
#btnKeepBets.active-toggle-button {
    /*background-color: green;  Still keep the green background as per original design */
    border-color: var(--quartz-secondary); /* Added: Border color */
    box-shadow: 0 0 12px var(--quartz-secondary), inset 0 0 8px rgba(24, 178, 178, 0.5); /* Added: Box shadow */
}

#btnKeepBets:hover:not(.active-toggle-button) {
    background-color: rgba(255, 255, 255, 0.1);
}

.status-message {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.9);
    color: var(--quartz-secondary);
    font-size: 1.5rem;
    padding: 1.5rem;
    border-radius: 15px;
    border: 4px solid var(--quartz-secondary);
    z-index: 100;
    text-align: center;
    display: none; /* Hidden by default, will be set to block by JS */
    width: 90%;
    opacity: 0; /* Start hidden for animation */
}

/* Animation for status message */
@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

.status-message.fade-in-animation {
    animation: fadeIn 0.5s forwards;
}

.status-message.fade-out-animation {
    animation: fadeOut 0.5s forwards;
}


.info-display {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--quartz-light);
    text-align: center;
}
.info-display span {
    color: var(--quartz-secondary);
}

/* --- Bonus Tracker Styles --- */
#bonusTrackerPanel {
    background: linear-gradient(to bottom, #212529, #343f56);
    border: 5px solid var(--quartz-secondary);
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(24, 178, 178, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.5);
    padding: 1.5rem;
    width: 100%;
    max-width: 900px;
    position: relative;
    display: none; /* Hidden by default */
    flex-direction: column;
    margin-top: 1rem;
    margin-bottom: 20px;
}

.bonus-section {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid var(--quartz-secondary);
    margin-bottom: 1rem; /* Space between sections */
}
.bonus-section h5 {
    margin-bottom: 1rem;
}
.badge.hit {
    background-color: var(--quartz-primary) !important; /* Use quartz-primary for hit numbers */
    border: 1px solid var(--quartz-secondary);
    color: var(--quartz-light);
    font-size: 1.1rem;
    padding: 0.5em 0.75em;
    min-width: 35px; /* Ensure badges are a consistent size */
}
.badge.bg-secondary {
    font-size: 1.1rem;
    padding: 0.5em 0.75em;
    min-width: 35px;
}

/* New styles for bonus betting areas */
.bonus-bet-area {
    border: 2px solid var(--quartz-light);
    border-radius: 10px;
    padding: 0.5rem;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--quartz-light);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.2); /* Slightly darker background */
    margin-top: 0.5rem; /* Space from bonus progress */
}

.bonus-bet-area:not(.disabled):hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.bonus-bet-area.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.bonus-bet-area .bet-amount {
    display: block;
    font-size: 1rem;
    color: #ffc107;
    min-height: 20px;
    font-weight: normal;
}


/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .game-console, #bonusTrackerPanel {
        padding: 1rem;
        margin-top: 1rem; /* Keep consistent margin for mobile too */
    }
    .action-button { font-size: 1.2rem; }
    .bet-button { font-size: 0.8rem; }
    .info-display { font-size: 1rem; }
    .actions-panel, .betting-panel, .info-panel { padding: 0.75rem; }
    .bet-area, .bonus-bet-area { font-size: 1rem; padding: 0.25rem; }

    .place-bets-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}