/* css/crash.css */

/* Ensure crash game container uses casino styles if not already inherited */
#crash-game-container {
    /* Styles from .casino-container in styles.css are expected to apply.
       Add specific overrides or additions here if needed. */
}

#multiplier-display {
    transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
    /* Base color is set by JS now */
}

/* Animation for when the game crashes */
.crashed-animation {
    animation: crashPulse 0.5s infinite alternate;
}

@keyframes crashPulse {
    0% { transform: scale(1); text-shadow: 0 0 10px rgba(239, 68, 68, 0.7), 0 0 20px rgba(239, 68, 68, 0.5); }
    100% { transform: scale(1.05); text-shadow: 0 0 20px rgba(239, 68, 68, 1), 0 0 30px rgba(239, 68, 68, 0.8); }
}

#game-status {
    min-height: 2em; /* Prevent layout shift when text changes */
    transition: color 0.3s ease-in-out;
    font-weight: 500;
}

#place-bet-button, #cash-out-button {
    /* Ensure casino-button styles from styles.css apply.
       Specific width/flex properties are handled in crash.php via Tailwind. */
}

/* More specific disabled styles for crash buttons if needed */
#cash-out-button:disabled, #place-bet-button:disabled {
    background: linear-gradient(135deg, #4B5563, #374151) !important; /* Gray gradient for disabled */
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    transform: none !important; /* Disable hover transform */
}

.casino-button-action-pending {
    opacity: 0.7;
    cursor: wait;
}
.casino-button-action-success {
    background: linear-gradient(135deg, #10B981, #059669) !important; /* Green success */
    animation: pulseSuccess 0.5s 1;
}

@keyframes pulseSuccess {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}


#recent-crashes-history {
    min-height: 50px; /* Ensure it has some height even when empty */
    background-color: rgba(0,0,0,0.2); /* Slightly darker background for contrast */
}

#recent-crashes-history span {
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

#recent-crashes-history span:hover {
    transform: scale(1.1);
    background-color: rgba(255,255,255,0.1); /* Slight highlight on hover */
}

/* Responsive adjustments if necessary */
@media (max-width: 768px) {
    #multiplier-display {
        font-size: 3.5rem; /* Smaller on mobile */
    }
    #game-status {
        font-size: 1rem;
    }
    .casino-title {
        font-size: 1.5rem;
    }

    .flex-col.md\:flex-row > * {
        margin-bottom: 0.75rem; /* Add some space between stacked buttons on mobile */
    }
    .flex-col.md\:flex-row > *:last-child {
        margin-bottom: 0;
    }
    #bet-amount {
        padding: 10px; /* Easier to tap */
    }
    #place-bet-button, #cash-out-button {
        padding: 12px 0; /* Larger tap target */
    }
}

/* Chart container styling */
#chart-container {
    background-color: rgba(0, 0, 0, 0.1); /* Subtle background for the chart area */
    border-radius: 8px;
    padding: 10px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

/* Chart state-specific styling (optional, can be used to change border or background) */
#chart-container.chart-betting {
    /* border: 2px solid rgba(255, 215, 0, 0.3); */
}
#chart-container.chart-in-progress {
    /* border: 2px solid rgba(75, 192, 192, 0.5); */
}
#chart-container.chart-crashed {
    /* border: 2px solid rgba(255, 99, 132, 0.7); */
}

/* Player Table Styles */
#crash-players-table-container {
    max-height: 300px; /* Adjust as needed */
    overflow-y: auto;
    border-radius: 0.375rem; /* Tailwind rounded-md */
    border: 1px solid var(--gold);
    background-color: var(--secondary-bg); /* Match casino-card bg */
}

#crash-players-table thead th {
    position: sticky;
    top: 0;
    z-index: 1; /* Lower than header/modals but above table body */
    background-color: var(--dark-gradient-start); /* Darker for header */
    border-bottom: 1px solid var(--gold);
}

#crash-players-table tbody tr {
    transition: transform 0.4s ease-in-out, opacity 0.3s ease-in-out, background-color 0.2s ease;
    border-bottom: 1px solid var(--dark-gradient-end); /* Subtle row separator */
}

#crash-players-table tbody tr:last-child {
    border-bottom: none;
}

#crash-players-table tbody tr:hover {
    background-color: rgba(255, 215, 0, 0.08); /* Subtle gold hover */
}

#crash-players-table .player-row img {
    border: 1px solid var(--gold);
    min-width: 32px; /* Ensure image space */
}

#crash-players-table .username {
    max-width: 120px; /* Adjust as needed for your layout */
}


/* Status text styling */
.status-text.status-active { color: #34D399; /* Emerald 400 / Tailwind green-400 */ }
.status-text.status-cashed_out { color: #60A5FA; /* Blue 400 / Tailwind blue-400 */ }
.status-text.status-lost { color: #F87171; /* Red 400 / Tailwind red-400 */ }

/* Top 3 rank highlighting */
#crash-players-table tbody tr[data-rank="1"] .rank {
    color: var(--gold);
    font-weight: bold;
    text-shadow: 0 0 4px var(--gold);
}
#crash-players-table tbody tr[data-rank="2"] .rank {
    color: #C0C0C0; /* Silver */
    font-weight: bold;
}
#crash-players-table tbody tr[data-rank="3"] .rank {
    color: #CD7F32; /* Bronze */
    font-weight: bold;
}