/* --- Global Styles --- */
:root {
    --bg-color: #1a1a2e;
    /* Dark Blue/Purple Background */
    --card-color: #2c385a;
    /* Slightly lighter card background */
    --text-color: #e4e4f5;
    /* Light text */
    --accent-color: #7c3843;
    /* Vibrant Accent/Danger */
    --success-color: #4CAF50;
    /* Green Success */
    --wrong-color: #e94560;
    /* Red Wrong */
    --warning-color: #ffc107;
    /* Yellow Warning */
    --border-radius: 8px;
    --font-header: 'Orbitron', sans-serif;
    --font-body: 'Roboto', sans-serif;
}

body {
    margin:0;
    padding: 0;
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    /* min-height: 100vh; */
}

#quiz-container {
    width: 90%;
    max-width: 800px;
    padding: 30px;
    background-color: var(--card-color);
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease-in-out;
}

h1 {
    font-family: var(--font-header);
    color: var(--accent-color);
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 0.5em;
}

h2 {
    font-family: var(--font-header);
    color: var(--text-color);
    text-align: center;
    margin-top: 0;
    font-size: 1.5em;
}

/* --- Buttons --- */
.btn {
    display: block;
    width: 100%;
    padding: 15px;
    margin: 20px 0;  
    font-size: 1.2em;
    font-weight: bold;
    color: var(--text-color);
    border: 2px solid var(--accent-color);
    background-color: var(--card-color);
    /* background-color: var(--accent-color); */
    /* border: none; */
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn:hover {
    background-color: #9a3546;
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn.secondary {
    background-color: #4a6fa5;
}

.btn.secondary:hover {
    background-color: #5d87c2;
}

/* --- Welcome/Result Screen Specifics --- */
.welcome-rules,
.final-results-summary {
    text-align: center;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    margin-bottom: 30px;
    font-size: 1.5em;
}

.final-score {
    margin-top: 30px;
    padding: 20px;
    background-color: #3b4a6b;
    border-radius: var(--border-radius);
}

.level-score {
    font-size: 1.5em;
    font-weight: bold;
    margin: 10px 0;
}

.overall-percentage {
    font-family: var(--font-header);
    font-size: 3em;
    font-weight: 700;
    color: var(--success-color);
    margin-top: 20px;
}

/* --- Question Screen Specifics --- */
.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.question-text {
    font-size: 1.5em;
    margin-bottom: 25px;
    font-weight: 500;
    line-height: 1.4;
}

.answer-options {
    display: grid;
    gap: 5px;
    /* margin-bottom: 30px; */
    font-size: larger;
}

.option {
    background-color: #3b4a6b;
    padding: 20px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s, border 0.2s, box-shadow 0.2s;
    border: 2px solid transparent;
    /* Base border */
    position: relative;
    font-size: 1.2em;
}

.option:hover {
    background-color: #4a5a78;
}

/* Answer Feedback */
.option.selected {
    border: 2px solid var(--warning-color);
    /* Selected state for multiple choice */
    box-shadow: 0 0 10px var(--warning-color);
}

.option.correct {
    border: 2px solid var(--success-color) !important;
    background-color: #2e5c30;
    /* Darker green background */
}

.option.wrong {
    border: 2px solid var(--wrong-color) !important;
    background-color: #5c2e30;
    /* Darker red background */
}

/* --- Warnings & Messages --- */
.warning-message {
    padding: 10px;
    margin-bottom: 15px;
    background-color: #5c4118;
    /* Darker yellow/orange */
    color: var(--warning-color);
    border-radius: var(--border-radius);
    font-weight: bold;
    text-align: center;
    animation: pulse 1s infinite alternate;
}

#action-area {
    /* Az 'action-area' konténer magassága legyen akkora, mint egy .btn gomb */
    min-height: 55px;
    /* A .btn padding: 15px; magasság: 20px; margin: 20px 0; - kb. ennyi a vizuális magassága. */
    margin: 20px 0;
    /* A marginok a .btn-ről átkerülnek a konténerre */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

@keyframes pulse {
    from {
        box-shadow: 0 0 5px var(--warning-color);
    }

    to {
        box-shadow: 0 0 15px var(--warning-color);
    }
}

.message-box {
    text-align: center;
    padding: 25px;
    border-radius: var(--border-radius);
    margin: 20px 0;
}

.message-box.success {
    background-color: #2e5c30;
    color: var(--success-color);
    border: 2px solid var(--success-color);
}

.message-box.failure {
    background-color: #5c2e30;
    color: var(--wrong-color);
    border: 2px solid var(--wrong-color);
}