/* racetrack-history.css */

#racetrack-history-page main {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}

.rh-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 15px;
}

.rh-header h2 {
    margin: 0;
    font-size: 1.8em;
}

.rh-stats-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.rh-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
}

.rh-stat-label {
    font-size: 0.9em;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 10px;
}

.rh-placement-stats {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-weight: 900;
    font-family: monospace;
    font-size: 1.8em;
}

.rh-stat-1 { color: #FFD700; }
.rh-stat-2 { color: #C0C0C0; }
.rh-stat-3 { color: #CD7F32; }
.rh-stat-sep { opacity: 0.2; }

.rh-stat-value {
    font-size: 2em;
    font-weight: 900;
    color: var(--accent-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.rh-jbucks-icon {
    width: 24px;
    height: 24px;
}

.rh-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rh-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    background: var(--card-bg);
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.rh-timestamp {
    font-size: 0.9em;
    opacity: 0.7;
}

.rh-placement-cell {
    display: flex;
    justify-content: center;
}

.rh-placement-tag {
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.85em;
    text-transform: uppercase;
}

.rh-place-1 { background: #FFD700; color: #000; }
.rh-place-2 { background: #C0C0C0; color: #000; }
.rh-place-3 { background: #CD7F32; color: #000; }
.rh-place-none { background: rgba(0,0,0,0.1); color: var(--text-color); opacity: 0.5; }

.rh-payout {
    text-align: right;
    font-weight: 800;
    color: var(--accent-pink);
}

.rh-no-data {
    text-align: center;
    padding: 40px;
    opacity: 0.6;
    font-style: italic;
}

@media (max-width: 600px) {
    .rh-stats-summary {
        grid-template-columns: 1fr;
    }
    .rh-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .rh-placement-cell {
        grid-column: span 2;
        order: 3;
        margin-top: 5px;
    }
}