.explanation {
    display: none;
}
.question ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.question li {
    list-style: none;
    display: flex;
    gap: 1em;
    font-size: 0.7em;
    box-sizing: border-box;
}

#score-container li {
    padding-left: 1em;
}

.question li label {
    padding: 0em;
    font-size: 1.2em;
}

/*.explanation-container {
}*/

.explanation-container section {
    font-size: 1em;
    border: 5px solid #949cbb;
    margin: 1em;
    padding: 1em;
}

.explanation-video {
    width: 100%; /* Dynamically fills the space... */
    max-width: 100%; /* ...but strictly caps at the container's edge */
    height: 75vh; /* Uses 75% of the viewport height so it fits any screen size comfortably */
    min-height: 450px; /* Ensures it never shrinks too small to read on mobile devices */
    border: none;
    border-radius: 8px;
}

.question li input[type="radio"] {
    accent-color: #7dc4e4;
}

.instructions {
    /*font-size: 0.8em;*/
    margin-bottom: 1em;
}

.nav-container {
    display: flex;
    justify-content: center; /* Horizontal */
    align-items: center; /* Vertical */
    gap: 1em;
}

.question h4 {
    font-size: 1em;
    margin-bottom: 0.5em;
    font-weight: 500;
}

/* Add this to your styles.css file */
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden; /* Keeps the border-radius on the corners */
}

.leaderboard-table th {
    background-color: #51576d; /* Modern Indigo color */
    color: #c6d0f5;
    text-align: left;
    font-weight: 600;
    padding: 14px 16px;
}

.selected {
    border: 5px solid #737994;
}

.correct {
    border: 5px solid #a6d189;
}

.leaderboard-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #838ba7;
}

/* Zebra striping for rows */
.leaderboard-table tbody tr:nth-of-type(even) {
    background-color: #838ba7;
}

/* Highlight row on hover */
.leaderboard-table tbody tr:hover {
    background-color: #a5adce;
    cursor: pointer;
}