.quiz-setup {
    position: absolute;
    z-index: 3;
    top: 228px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.category-select {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    bottom: 45px;
    margin-bottom: 50px;
    color: var(--bleu-fonce);
    font-family: "IBM Plex Sans", Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.category-select select {
    width: 240px;
    padding: 10px 14px;
    border: 1px solid var(--bleu-clair);
    border-radius: 8px;
    background: white;
    color: var(--bleu-fonce);
    font: inherit;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(11, 40, 85, 0.08);
    cursor: pointer;
}

.category-select select:hover,
.category-select select:focus {
    border-color: var(--bleu);
    outline: none;
}

.category-select .selected-category {
    color: var(--bleu);
    font-size: 13px;
    font-weight: 500;
}

.start-btn {
    padding: 12px 28px;
    border: none;
    border-radius: 8px;
    background: var(--vert-true);
    color: white;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
}

.start-btn:hover {
    background: rgb(from var(--vert-true) r g b / 85%);
}

#skipBtn {
    position: absolute;
    padding: 8px 16px;
    border: 1px solid var(--bleu-clair);
    border-radius: 8px;
    background: white;
    color: var(--bleu);
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    top: 240px;
    right: 244px;
}

#skipBtn:hover:not(:disabled) {
    background: var(--bleu);
    color: white;
}

#skipBtn:disabled {
    opacity: 0.4;
    cursor: default;
}

.buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 55px;
    width: 350px;
}

.true-btn {
    background-color: var(--vert-true);
    color: rgb(255, 255, 255);
    padding: 10px 20px;
    cursor: pointer;
    font-size: 24px;
}

.true-btn:hover {
    background-color: rgb(from var(--vert-true) r g b / 80%);
}

.false-btn {
    background-color: var(--rouge-false);
    color: rgb(255, 255, 255);
    padding: 10px 20px;
    cursor: pointer;
    font-size: 24px;
}

.false-btn:hover {
    background-color: rgb(from var(--rouge-false) r g b / 80%);
}

.true-btn,
.false-btn {
    transition: opacity 0.25s ease;
    border: none;
    border-radius: 6px;
}

.answer-disabled {
    pointer-events: none;
}

.button-faded {
    opacity: 0.35;
    transition: opacity 0.25s ease;
}

.button-faded.active {
    opacity: 1;
    pointer-events: auto;
}

.next-btn {
    margin-bottom: 20px;
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    background: var(--bleu);
    color: white;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
}

.next-btn:hover {
    background: var(--bleu-peu-fonce);
}

.hidden{
    display: none;
}

.restart-btn {
    background-color: var(--bleu);
    color: white;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    border: none;
    padding: 10px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 24px;
}

.restart-btn:hover {
    background-color: var(--bleu-fonce);
}

#quitBtn {
    margin-bottom: 28px;
    padding: 8px 16px;
    border: 1px solid var(--rouge-false);
    border-radius: 8px;
    background: white;
    color: var(--rouge-false);
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
}

#quitBtn:hover {
    background: var(--rouge-false);
    color: white;
}
.see-results-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 8px 16px;
    border: 1px solid var(--bleu-clair);
    border-radius: 8px;
    background: white;
    color: var(--bleu);
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
}

.see-results-btn:hover {
    background: rgb(from var(--bleu-clair) r g b / 15%);
}

.see-results-btn.hidden {
    display: none;
}

/* ---------- Phone ---------- */
@media (max-width: 600px) {
    /* True / False keep their desktop size, just less space above them */
    /* Centered with a fixed gap instead of pushed to both ends (space-between on desktop) */
    .buttons {
        justify-content: center;
        gap: 52px;
        max-width: calc(100% - 32px);
        margin-top: 20px;
    }

    /* Skip goes under the True / False buttons instead of floating over the statement */
    #skipBtn {
        position: static;
        order: 1;
        margin-top: 34px;
        padding: 6px 14px;
        font-size: 14px;
    }

    .answer-display,
    .detail-display,
    .next-btn,
    .restart-btn,
    .see-results-btn,
    #quitBtn {
        order: 2;
    }

    .restart-btn {
        font-size: 20px;
    }
}