.quiz-wrapper {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 16px;
}

.quiz-progress {
    text-align: center;
    color: #777;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.quiz-message {
    text-align: center;
    min-height: 1.6em;
    font-weight: 600;
    margin-bottom: 16px;
}

.quiz-message-correct {
    color: #2e7d32;
}

.quiz-message-incorrect {
    color: #c0392b;
}

.quiz-main {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.quiz-card-image img {
    max-width: 260px;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

.quiz-choices {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 320px;
    max-width: 100%;
}

.choice-box {
    background: #fff;
    border: 2px solid #d9d2c8;
    border-radius: 10px;
    padding: 16px 18px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    font-size: 0.95rem;
}

    .choice-box:hover {
        border-color: #cc79dc;
        transform: translateY(-1px);
    }

/* Correct answer, and the user clicked it */
.choice-correct {
    background: #66bb6a !important;
    border-color: #2e7d32 !important;
    color: #fff;
}

/* Correct answer, revealed because the user picked something else */
.choice-correct-reveal {
    background: #c8e6c9 !important;
    border-color: #66bb6a !important;
}

/* Wrong answer the user clicked */
.choice-incorrect {
    background: #ef9a9a !important;
    border-color: #c0392b !important;
}

.quiz-details {
    max-width: 900px;
    margin: 24px auto 0;
    background: #faf8f5;
    border: 1px solid #d9d2c8;
    border-radius: 10px;
    padding: 18px 22px;
}

    .quiz-details p {
        margin-bottom: 8px;
    }

.quiz-details-title {
    text-align: center;
    color: #444;
    margin-bottom: 16px;
}

.quiz-detail-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.quiz-detail-box {
    flex: 1;
    min-width: 200px;
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: 8px;
    padding: 14px 16px;
}

.quiz-detail-label {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: #999;
    font-weight: 700;
    margin-bottom: 6px;
}

.quiz-detail-value {
    font-size: 0.9rem;
    color: #333;
}

.quiz-detail-yesno {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 4px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.quiz-detail-yesno-yes {
    background: #2e7d32;
}

.quiz-detail-yesno-maybe {
    background: #b08d00;
}

.quiz-detail-yesno-no {
    background: #c0392b;
}

.quiz-detail-keywords {
    margin-top: 14px;
    margin-bottom: 0;
    font-size: 0.85rem;
    color: #555;
}

.quiz-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.result-thumb {
    width: 32px;
    height: auto;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Named result-badge (not badge) to avoid colliding with Flash.css's
   unrelated .badge { position: absolute; top: 0; right: 0; } ribbon rule,
   which is loaded globally via the Content/css bundle. */
.result-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.result-badge-success {
    background: #2e7d32;
}

.result-badge-danger {
    background: #c0392b;
}

.result-badge-learning {
    background: #b08d00;
}

/* Yes/No reading */
.yesno-overall {
    display: inline-block;
    font-size: 2rem;
    font-weight: 700;
    padding: 10px 40px;
    border-radius: 50px;
    color: #fff;
}

.yesno-overall-yes {
    background: #2e7d32;
}

.yesno-overall-maybe {
    background: #b08d00;
}

.yesno-overall-no {
    background: #c0392b;
}

.yesno-spread {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.yesno-card {
    width: 220px;
    text-align: center;
}

    .yesno-card img {
        max-width: 160px;
        width: 100%;
        border-radius: 8px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.18);
        margin: 8px 0;
    }

.card-reversed {
    transform: rotate(180deg);
}

.yesno-indicator {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

.yesno-indicator-yes {
    background: #2e7d32;
}

.yesno-indicator-maybe {
    background: #b08d00;
}

.yesno-indicator-no {
    background: #c0392b;
}

.yesno-position {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: #777;
    margin-top: 6px;
}

.yesno-cardname {
    font-weight: 600;
    margin: 2px 0 6px;
}

.yesno-meaning {
    font-size: 0.85rem;
    color: #444;
}

/* Love, Money & Career 9-card spread */
.lmc-row {
    margin-bottom: 32px;
}

.lmc-row-title {
    text-align: center;
    color: #6d5d80;
    margin-bottom: 16px;
}

.lmc-cards {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.lmc-card {
    width: 200px;
    text-align: center;
}

    .lmc-card img {
        max-width: 140px;
        width: 100%;
        border-radius: 8px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.18);
        margin: 8px 0;
    }

.lmc-position {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: #777;
    margin-top: 6px;
}

.lmc-cardname {
    font-weight: 600;
    margin: 2px 0 6px;
}

.lmc-meaning {
    font-size: 0.85rem;
    color: #444;
}