body {
    font-family: sans-serif;
    background-color: #f4f4f9;
    color: #333;
    display: flex;
    flex-direction: column; /* NEW: Stacks items vertically */
    align-items: center;   /* NEW: Horizontally centers the items */
    padding: 20px;
    /* The old 'justify-content' and 'align-items' lines can be removed */
}

.container {
    background-color: #fff;
    padding: 20px 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 800px;
}

h1, h2, h3 {
    color: #0056b3;
}

.hidden {
    display: none;
}

/* --- Setup Screen --- */
.input-group {
    margin-bottom: 20px;
}
.input-group label {
    display: block;
    margin-bottom: 5px;
}
input[type="number"] {
    width: 100px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* --- Test & Results Screens --- */
.question-row {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.question-number {
    font-weight: bold;
    min-width: 40px;
}

.choices {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-grow: 1; /* NEW: This tells the element to fill all available space */
}
.correct-answer-choices {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-left: 1in; /* CHANGED: Added left margin */
}

.confidence-check {
    margin-left: 1in;
    display: flex;
    align-items: center;
    gap: 10px;
}

.confident-text, #confidence-score-percent { /* CHANGED: Added score to selector */
    color: orange;
    font-weight: bold;
}

.user-answers {
    min-width: 100px;
    font-weight: bold;
    color: #0056b3;
}

/* --- Score Header --- */
.score-header {
    background-color: #e7f1ff;
    padding: 10px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex; /* CHANGED: Added flex properties for layout */
    justify-content: space-between;
    align-items: center;
}

.score-display {
    text-align: right; /* Aligns scores to the right */
    flex-grow: 1; /* Allows this element to fill space */
}

/* --- Buttons --- */
button {
    display: block;
    margin: 20px auto 0 auto;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

button:hover {
    background-color: #0056b3;
}

/* NEW: Style for the reset button */
#reset-btn {
    background-color: #6c757d;
    margin: 0; /* Override the auto margin */
}

#reset-btn:hover {
    background-color: #5a6268;
}

/* Add these new rules to the bottom of your style.css file */

h4 {
    color: #856404; /* A brownish-yellow cautionary color */
    margin: 5px 0 0 0;
}

#cockiness-index-percent {
    font-weight: bold;
    color: #b58500;
}

/* NEW: Style for marking incorrect answers for review */
.marked-for-review {
    background-color: #f8d7da; /* Light pink/red background */
    border-left: 5px solid #dc3545; /* A solid red left border */
    border-radius: 4px; /* Optional: rounds the corners slightly */
}

footer {
    width: 100%;                  /* Ensures the footer spans the full width */
    text-align: center;           /* Centers the text and icons */
    margin-top: 40px;             /* Adds space above the footer */
    padding-top: 20px;            /* Adds space below the separator line */
    border-top: 1px solid #ccc;   /* A subtle line to separate it from the game */
    color: #6c757d;               /* A muted gray color for the text */
    font-size: 0.9em;             /* Makes the font slightly smaller */
}

.social-icon {
    height: 1.1em; /* Sets the icon height relative to the text size */
    width: auto;   /* Maintains the icon's aspect ratio */
    vertical-align: middle; /* Aligns the icon nicely with the text line */
}

/* Styling for the new "Confident" column header */
.column-header {
    font-weight: bold;
    color: #333;
    padding-bottom: 10px;
    margin-bottom: 5px;
    border-bottom: 2px solid #eee;
}

/* Ensures the "Confident" text aligns correctly over the checkboxes */
.column-header .confidence-check {
    padding-left: 5px;
}