/* Quiz Modal Styles */
/* Kotoba design — sumi ink on aged paper */

/* ============================================
   DESIGN TOKENS - Kotoba Design System
   ============================================ */
.quiz-modal {
    /* Primary: Indigo-gray (墨 sumi ink) */
    --quiz-primary: #3D5A80;
    --quiz-primary-hover: #2C4A6E;
    --quiz-primary-light: #E8EDF2;
    --quiz-primary-lighter: #F0EDE8;
    --quiz-primary-dark: #1B3A5C;
    --quiz-primary-text: #2C4A6E;
    --quiz-primary-rgb: 61, 90, 128;

    /* Number badges */
    --quiz-num-bg: #F0EDE8;
    --quiz-num-text: #5C5A56;
    --quiz-num-hover-bg: #3D5A80;
    --quiz-num-hover-text: white;

    /* Selected state */
    --quiz-selected-bg: rgba(61, 90, 128, 0.04);
    --quiz-selected-border: var(--quiz-primary);
    --quiz-selected-text: var(--quiz-primary-dark);

    /* Correct — muted moss green */
    --quiz-correct-bg: rgba(163, 177, 138, 0.12);
    --quiz-correct-border: rgba(132, 147, 108, 0.4);
    --quiz-correct-text: #3f5229;
    --quiz-correct-num-bg: rgba(163, 177, 138, 0.22);
    --quiz-correct-num-text: #4d6631;

    /* Incorrect — muted terracotta */
    --quiz-incorrect-bg: rgba(194, 130, 114, 0.10);
    --quiz-incorrect-border: rgba(180, 110, 94, 0.35);
    --quiz-incorrect-text: #7c2d12;
    --quiz-incorrect-num-bg: rgba(194, 130, 114, 0.2);
    --quiz-incorrect-num-text: #A3604E;

    /* Hint */
    --quiz-hint-bg: #F0EDE8;
    --quiz-hint-border: rgba(61, 90, 128, 0.15);
    --quiz-hint-text: #2C4A6E;

    /* Learning feedback */
    --quiz-learning-bg: #F0EDE8;
    --quiz-learning-border: rgba(61, 90, 128, 0.15);
    --quiz-learning-text: #2C4A6E;
    --quiz-learning-label: #3D5A80;

    /* Progress bar */
    --quiz-progress-bg: #e2e8f0;
    --quiz-progress-fill: var(--quiz-primary);

    /* Feedback banners — solid colors, no gradients */
    --quiz-banner-correct: #5A7A4D;
    --quiz-banner-incorrect: #A3604E;
    --quiz-accent-correct: #4E6F3E;
    --quiz-accent-correct-deep: #3f5229;
    --quiz-accent-incorrect: #A3604E;
    --quiz-accent-incorrect-deep: #7c2d12;

    /* Buttons */
    --quiz-btn-bg: var(--quiz-primary);

    /* Muted text — labels, toggles, inactive filters */
    --quiz-text-muted: #94a3b8;
    --quiz-text-muted-hover: #64748b;
}

/* Theme toggle hidden — single Kotoba theme */
.quiz-theme-toggle {
    display: none;
}

/* ============================================
   TYPOGRAPHY - Layered Font System
   Matches Word Stories with Klee One + Nunito
   ============================================ */

/*
   LAYER 1: Japanese text - Klee One calligraphy
   Used for: kana, kanji in answer cards and review
   Note: quiz-answer-btn now uses .quiz-answer-text + .quiz-jp wrapping
*/
.answer-card-word,
.quiz-review-word,
.quiz-kanji-text,
.quiz-kana-text {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
}

/* Question text - Nunito for English prompts */
.quiz-question-text {
    font-family: 'Inter', sans-serif;
}

/* Bilingual helper — small English beside Japanese labels/buttons */
.btn-en,
.label-en {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    opacity: 0.6;
    font-size: 0.8em;
    margin-left: 0.3em;
    letter-spacing: 0.01em;
}

/* Inline Japanese text - Klee One calligraphy */
/* Used in questions, answers, and feedback */
.quiz-jp {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
    color: #44403c;
    letter-spacing: 0.02em;
}

/* Question content entrance animation */
@keyframes questionContentReveal {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quiz-question-content {
    animation: questionContentReveal 0.3s ease-out;
}

/* Answer button text wrapper - Nunito base with Japanese wrapped */
.quiz-answer-text {
    font-family: 'Inter', sans-serif;
}

/* answer-card-word font-size set in quiz-question.css (1.35em) */


/*
   LAYER 2: Romanization - Nunito italic
   Used for: pronunciation guides, romaji
*/
.answer-card-roma,
.quiz-review-romanization,
.quiz-hint-text[data-type="romanization"] {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    letter-spacing: 0.02em;
    color: #78716c; /* WCAG AA: 4.6:1 on white (was #a8a29e at 3.2:1) */
}

/*
   LAYER 3: English/UI text - Nunito
   Used for: all English text, buttons, labels, feedback
*/
.quiz-modal {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
}

/* Answer card English */
.answer-card-english,
.quiz-review-english {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

/* Feedback text */
.quiz-feedback,
.quiz-feedback .feedback-status,
.quiz-feedback .feedback-explanation {
    font-family: 'Inter', sans-serif;
}

/* Hint and tip text */
.quiz-hint,
.quiz-tip-content,
.quiz-hint-text {
    font-family: 'Inter', sans-serif;
}

/* Buttons and controls */
.quiz-start-btn,
.quiz-finish-btn,
.quiz-nav-btn,
.quiz-hint-btn,
.quiz-resume-btn,
.quiz-start-new-btn,
.quiz-end-early-btn {
    font-family: 'Inter', sans-serif;
}

/* Labels and status text */
.quiz-progress-label,
.quiz-progress-stats,
.quiz-type-label,
.answer-card-pos {
    font-family: 'Inter', sans-serif;
}

.quiz-modal-title,
.quiz-status {
    font-family: 'Klee One', 'Noto Sans JP', 'Inter', sans-serif;
}

.hint-label {
    font-family: 'Klee One', 'Noto Sans JP', 'Inter', sans-serif;
}

/* Ruby in quiz content (questions, answers, feedback) — not UI chrome */
.quiz-modal rt {
    font-size: max(0.75em, 10px);
    color: #78716c;
}

/* Progress bar */
.quiz-progress-label {
    font-family: 'Inter', sans-serif;
}

/* Streak badge */
.quiz-streak-badge {
    font-family: 'Inter', sans-serif;
}

/* Results screen */
.quiz-results-score,
.quiz-results-summary,
.quiz-performance-chart {
    font-family: 'Inter', sans-serif;
}

/* ============================================ */

/* ============================================
   PREMIUM ANIMATIONS - Staggered reveals, bounces
   ============================================ */

/* (quizAnswerSlideIn + quizDotBounce removed — Karesansui: no staggered animations) */


/* Streak milestone celebration pulse */
@keyframes streakMilestonePulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 169, 110, 0.4); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(201, 169, 110, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 169, 110, 0); }
}


/* Feedback slide in from below */
@keyframes feedbackSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Reduced motion - disable all animations */
/* Screen fade-in transition */
@keyframes screenFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quiz-start-screen,
.quiz-results-screen,
.quiz-dashboard-screen {
    animation: screenFadeIn 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .quiz-answer-btn,
    .quiz-progress-fill,
    .quiz-progress-glow,
    .quiz-avatar,
    .quiz-start-icon,
    .quiz-streak-fire,
    .quiz-start-btn::before,
    .score-ring-fill,
    .quiz-start-screen,
    .quiz-results-screen,
    .quiz-dashboard-screen {
        animation: none !important;
        transition: opacity 0.1s ease !important;
    }
}

/* Overlay - simple dark blur */
.quiz-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.quiz-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Modal Container - Warm Cream style */
.quiz-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: min(480px, 92vw);
    min-height: min(580px, 75vh);
    max-height: 85vh;
    background: var(--color-washi, #F5F0E8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    /* Layered shadow — Karesansui: quieter depth */
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.04),
        0 10px 15px -3px rgba(0, 0, 0, 0.05),
        0 25px 50px -12px rgba(0, 0, 0, 0.08);
    z-index: 2100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.quiz-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Washi paper fiber texture — Karesansui: subtler */
.quiz-modal::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.025;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(139, 115, 85, 0.5) 2px, rgba(139, 115, 85, 0.5) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(139, 115, 85, 0.5) 2px, rgba(139, 115, 85, 0.5) 4px);
}

/* No decorative orbs - clean design */