/* ===========================================
   Flora Botanik-Quiz Styles
   Angepasst an Flora-Design (--flora-* Variablen)
   =========================================== */

.quiz-container {
    max-width: 680px;
    margin: 0 auto;
}

/* Kategoriekarten */
.quiz-cat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--flora-light, #faf7f2);
    border: 1px solid var(--flora-border, #d4c9b8);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    animation: quizFadeUp 0.4s ease both;
}
.quiz-cat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--flora-shadow-hover, rgba(45,80,22,0.16));
    border-color: var(--flora-primary, #2d5016);
}
.quiz-cat-card:active { transform: scale(0.98); }

.quiz-cat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.quiz-cat-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--flora-text, #3a3a3a);
    font-family: 'Playfair Display', Georgia, serif;
}
.quiz-cat-meta {
    font-size: 13px;
    color: #8a7d6b;
    margin-top: 2px;
}
.quiz-cat-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Gemischt-Button */
.quiz-btn-mixed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--flora-primary, #2d5016);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px var(--flora-shadow, rgba(45,80,22,0.08));
    transition: all 0.2s ease;
}
.quiz-btn-mixed:hover {
    background: var(--flora-primary-light, #3d6b20);
    transform: translateY(-1px);
}

/* Fortschritts-Box */
.quiz-progress-box {
    margin-top: 20px;
    padding: 14px 16px;
    background: var(--flora-light, #faf7f2);
    border: 1px solid var(--flora-border, #d4c9b8);
    border-radius: 10px;
    animation: quizFadeUp 0.4s ease 0.3s both;
}
.quiz-progress-title {
    font-size: 13px;
    color: #8a7d6b;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.quiz-progress-items {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.quiz-progress-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.quiz-progress-pct {
    font-size: 13px;
    font-weight: 600;
}
.quiz-progress-count {
    font-size: 11px;
    color: #8a7d6b;
}
.quiz-streak-info {
    margin-top: 8px;
    font-size: 13px;
    color: #8a7d6b;
}

/* Quiz-Topbar */
.quiz-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.quiz-btn-back {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #8a7d6b;
    padding: 4px 8px;
    font-family: inherit;
}
.quiz-btn-back:hover { color: var(--flora-text, #3a3a3a); }
.quiz-topbar-cat {
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.quiz-topbar-score {
    font-size: 14px;
    color: #8a7d6b;
}

/* Fortschrittsbalken */
.quiz-bar-track {
    height: 4px;
    background: var(--flora-border, #d4c9b8);
    border-radius: 2px;
    margin-bottom: 20px;
    overflow: hidden;
}
.quiz-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* Streak-Badge */
.quiz-streak-badge {
    text-align: center;
    font-size: 13px;
    color: var(--flora-accent, #8b6914);
    margin-bottom: 10px;
    animation: quizFadeUp 0.3s ease;
}

/* Fragekarte */
.quiz-q-card {
    background: var(--flora-light, #faf7f2);
    border-radius: 14px;
    padding: 24px 20px;
    border: 1px solid var(--flora-border, #d4c9b8);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    margin-bottom: 14px;
}
.quiz-q-num {
    font-size: 11px;
    color: #8a7d6b;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.quiz-q-text {
    font-size: 17px;
    line-height: 1.55;
    color: var(--flora-text, #3a3a3a);
}

/* Antwort-Buttons */
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.quiz-opt-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: var(--flora-light, #faf7f2);
    border: 1px solid var(--flora-border, #d4c9b8);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    color: var(--flora-text, #3a3a3a);
    transition: all 0.2s ease;
    width: 100%;
    font-family: inherit;
}
.quiz-opt-btn:not(.quiz-answered):hover {
    background: var(--flora-bg, #f5f0e8);
    border-color: var(--flora-primary, #2d5016);
}
.quiz-opt-btn:active { transform: scale(0.98); }
.quiz-opt-btn.quiz-correct {
    background: #e8f5e9;
    border: 2px solid #4a7c59;
    color: #2d5a3a;
}
.quiz-opt-btn.quiz-wrong {
    background: #fce8e8;
    border: 2px solid #c0392b;
    color: #8b2020;
}
.quiz-opt-btn.quiz-dimmed {
    opacity: 0.5;
    background: var(--flora-bg, #f5f0e8);
}

.quiz-opt-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    background: var(--flora-border, #d4c9b8);
    color: #8a7d6b;
    transition: all 0.2s ease;
}
.quiz-opt-circle.quiz-c-correct {
    background: #4a7c59;
    color: #fff;
}
.quiz-opt-circle.quiz-c-wrong {
    background: #c0392b;
    color: #fff;
}

/* Erklärungsbox */
.quiz-explain-box {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    color: #5a4a3a;
    animation: quizFadeUp 0.3s ease;
}
.quiz-explain-box.quiz-ok {
    background: rgba(232,245,233,0.25);
    border: 1px solid #b8d8be;
}
.quiz-explain-box.quiz-nope {
    background: rgba(252,232,232,0.25);
    border: 1px solid #e8b8b8;
}
.quiz-explain-detail {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    font-size: 13px;
    color: #5a4a3a;
    line-height: 1.55;
}

/* Weiter-Button */
.quiz-btn-next {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 13px 16px;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    animation: quizFadeUp 0.3s ease;
    transition: transform 0.15s ease;
}
.quiz-btn-next:hover { transform: translateY(-1px); }
.quiz-btn-next:active { transform: scale(0.98); }

/* Ergebnis-Screen */
.quiz-result-screen {
    text-align: center;
    margin-top: 20px;
    animation: quizFadeUp 0.5s ease;
}
.quiz-ring-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}
.quiz-ring-pct {
    position: relative;
    margin-top: -76px;
    margin-bottom: 24px;
    font-size: 28px;
    font-weight: 600;
    line-height: 100px;
}
.quiz-result-h {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 4px;
}
.quiz-result-sub {
    color: #8a7d6b;
    font-size: 15px;
    margin: 8px 0 24px;
}

.quiz-tip-box {
    background: var(--flora-light, #faf7f2);
    border: 1px solid var(--flora-border, #d4c9b8);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    text-align: left;
}
.quiz-tip-title {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8a7d6b;
    margin-bottom: 10px;
}
.quiz-tip-text {
    font-size: 14px;
    line-height: 1.6;
    color: #5a4a3a;
}

.quiz-result-buttons {
    display: flex;
    gap: 10px;
}
.quiz-btn-again {
    flex: 1;
    padding: 13px 16px;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
}
.quiz-btn-home {
    flex: 1;
    padding: 13px 16px;
    background: var(--flora-light, #faf7f2);
    border: 1px solid var(--flora-border, #d4c9b8);
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    color: #5a4a3a;
}
.quiz-btn-again:active,
.quiz-btn-home:active { transform: scale(0.98); }
.quiz-btn-home:hover { background: var(--flora-bg, #f5f0e8); }

/* Leaderboard */
.quiz-leaderboard {
    margin-top: 24px;
    text-align: left;
}
.quiz-leaderboard table {
    width: 100%;
    border-collapse: collapse;
}
.quiz-leaderboard th,
.quiz-leaderboard td {
    padding: 8px 12px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid var(--flora-border, #d4c9b8);
}
.quiz-leaderboard th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8a7d6b;
}

/* Login-Hinweis */
.quiz-login-hint {
    margin-top: 16px;
    padding: 12px 16px;
    background: #fff8e1;
    border: 1px solid var(--flora-accent, #8b6914);
    border-radius: 10px;
    font-size: 14px;
    color: #5a4a3a;
    text-align: center;
}
.quiz-login-hint a {
    color: var(--flora-accent, #8b6914);
    font-weight: 600;
}

/* Punkte-Anzeige */
.quiz-points-earned {
    margin-top: 12px;
    padding: 10px;
    background: #e8f5e9;
    border-radius: 8px;
    font-size: 14px;
    color: #2d5a3a;
    font-weight: 600;
    animation: quizFadeUp 0.3s ease;
}

/* Animation */
.quiz-fade-in { animation: quizFadeUp 0.4s ease; }

@keyframes quizFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 576px) {
    .quiz-q-text { font-size: 15px; }
    .quiz-opt-btn { font-size: 14px; padding: 11px 14px; }
    .quiz-result-buttons { flex-direction: column; }
}