:root {
    --f1-red: #E10600;
    --f1-black: #000000;
    --f1-white: #FFFFFF;
    --f1-carbon: #15151E;
    --f1-dark-grey: #38383F;
    --f1-light-grey: #949498;
    --f1-error: #ff3333;
    --f1-success: #00d100;

    --f1-font: "Formula1 Display-Regular", Arial, sans-serif;
    --f1-font-wide: "Formula1 Display-Wide", Arial, sans-serif;
    --f1-font-bold: "Formula1 Display-Bold", Arial, sans-serif;

    --space-xs: 4px;
    --space-s: 8px;
    --space-m: 16px;
    --space-l: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;

    --f1-border-radius: 0 10px 0 0;
    --f1-speed-accent: 10px solid var(--f1-red);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--f1-font);
    background-color: var(--f1-white);
    color: var(--f1-black);
    line-height: 1.6;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--space-l);
}

header {
    background-color: var(--f1-black);
    padding: var(--space-xl) 0;
    text-align: center;
    border-bottom: 5px solid var(--f1-red);
}

.f1-logo {
    height: 40px;
}

h1, h2, h3 {
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-m);
}

.f1-wide { font-family: var(--f1-font-wide); color: var(--f1-white); }
.f1-bold { font-family: var(--f1-font-bold); }

.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--f1-red);
    color: var(--f1-white);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: var(--f1-border-radius);
    transition: background-color 0.3s;
    border: none;
    cursor: pointer;
    font-family: var(--f1-font);
}

.btn:hover:not(:disabled) {
    background-color: #b50500;
}

.btn:disabled {
    background-color: var(--f1-dark-grey);
    cursor: not-allowed;
    opacity: 0.6;
}

.card {
    background: var(--f1-carbon);
    color: var(--f1-white);
    padding: var(--space-xl);
    border-radius: var(--f1-border-radius);
    border-left: var(--f1-speed-accent);
    margin-top: var(--space-xl);
}

.quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-l);
    border-bottom: 1px solid var(--f1-dark-grey);
    padding-bottom: var(--space-s);
}

.progress {
    font-size: 0.8rem;
    color: var(--f1-light-grey);
    text-transform: uppercase;
}

.race-info h2 {
    color: var(--f1-red);
    margin-bottom: 5px;
}

.podium-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-m);
    margin: var(--space-xl) 0;
}

.slot {
    background: var(--f1-dark-grey);
    padding: var(--space-m);
    border-radius: 4px;
    text-align: center;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slot-label {
    font-size: 0.75rem;
    color: var(--f1-light-grey);
    text-transform: uppercase;
    margin-bottom: var(--space-s);
}

.driver-selection {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-s);
}

.driver-btn {
    background: var(--f1-dark-grey);
    color: var(--f1-white);
    border: 1px solid transparent;
    padding: var(--space-s) var(--space-m);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--f1-font);
}

.driver-btn:hover:not(.selected) {
    border-color: var(--f1-red);
}

.driver-btn.selected {
    background: var(--f1-red);
    font-weight: bold;
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-xl);
}

.results-table th, .results-table td {
    padding: var(--space-m);
    text-align: left;
    border-bottom: 1px solid var(--f1-dark-grey);
}

.results-table th {
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--f1-light-grey);
}

.score-cell {
    font-weight: bold;
}

.correct { color: var(--f1-success); }
.incorrect { color: var(--f1-error); }

.final-score {
    text-align: center;
    margin-top: var(--space-xxl);
}

.score-value {
    font-size: 4rem;
    color: var(--f1-red);
    font-family: var(--f1-font-wide);
}

@media (max-width: 768px) {
    .podium-slots { grid-template-columns: 1fr; }
    .driver-selection { grid-template-columns: 1fr; }
}