/* =============================================================
   Kheper — Quiz module
   Réutilise les variables CSS de style.css
   ============================================================= */

/* ── Conteneur ─────────────────────────────────────────────── */
.quiz-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
}

.quiz-panel { display: block; }
.quiz-panel[hidden] { display: none; }

/* ── Section titre ─────────────────────────────────────────── */
.quiz-section-title {
    font-family: var(--font-title);
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    color: var(--gold-dim);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.quiz-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border-light), transparent);
}

/* ══════════════════════════════════════════════════════════════
   MENU
══════════════════════════════════════════════════════════════ */
.mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.7rem;
    margin-bottom: 1.75rem;
}

.mode-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1rem 0.9rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
    position: relative;
    overflow: hidden;
}

.mode-card:hover:not(.disabled) {
    border-color: var(--border-light);
    background: var(--bg-card-h);
    transform: translateY(-1px);
}

.mode-card.selected {
    border-color: var(--gold-dim);
    background: var(--bg-card-h);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.15), 0 4px 16px rgba(0,0,0,0.4);
}

.mode-card.selected::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.mode-card.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.mode-icon {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 0.3rem;
    display: block;
}

.mode-title {
    font-family: var(--font-title);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--text);
    display: block;
}

.mode-desc {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.4;
    display: block;
}

.mode-badge {
    display: inline-block;
    margin-top: 0.4rem;
    font-family: var(--font-title);
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 99px;
}

.mode-badge.privilege { background: rgba(20,143,119,0.15); color: var(--turquoise-light); border: 1px solid rgba(20,143,119,0.3); }
.mode-badge.locked    { background: rgba(110,100,84,0.15); color: var(--text-muted); border: 1px solid var(--border); }

/* Level tabs */
.level-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

.level-tab {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-family: var(--font-title);
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.45rem 1rem;
    cursor: pointer;
    transition: all var(--transition);
    flex: 1;
    text-align: center;
}

.level-tab:hover { border-color: var(--border-light); color: var(--text); }

.level-tab.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #0D0A05;
    font-weight: 700;
}

/* Start button */
.btn-start {
    width: 100%;
    background: linear-gradient(135deg, #8A6828, var(--gold));
    border: none;
    border-radius: var(--radius);
    color: #0D0A05;
    font-family: var(--font-title);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding: 0.85rem 1.5rem;
    cursor: pointer;
    transition: filter var(--transition), transform var(--transition);
    margin-bottom: 2rem;
}

.btn-start:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.btn-start:active { transform: translateY(0); }
.btn-start:disabled { opacity: 0.4; cursor: not-allowed; transform: none; filter: none; }

/* Score history */
.score-history {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.score-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
}
.score-row:last-child { border-bottom: none; }

.score-mode  { color: var(--text-dim); font-style: italic; }
.score-level { font-family: var(--font-title); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; }
.score-pct   { font-family: var(--font-title); font-size: 0.85rem; font-weight: 700; min-width: 3ch; text-align: right; }
.score-pct.good { color: var(--turquoise-light); }
.score-pct.ok   { color: #E6A817; }
.score-pct.bad  { color: #E57373; }
.score-fraction { color: var(--text-muted); font-size: 0.75rem; }

.no-scores {
    padding: 1rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-style: italic;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   GAME
══════════════════════════════════════════════════════════════ */
.quiz-game-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.quiz-counter {
    font-family: var(--font-title);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    color: var(--gold-dim);
    white-space: nowrap;
}

.quiz-progress-track {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.quiz-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
}

.quiz-score-live {
    font-family: var(--font-title);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Question area — animations */
#quiz-question-area {
    min-height: 380px;
}

@keyframes slide-in-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-out-up {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}

.slide-in  { animation: slide-in-up  0.22s ease forwards; }
.slide-out { animation: slide-out-up 0.15s ease forwards; }

/* Prompt */
.quiz-prompt {
    text-align: center;
    padding: 1.25rem 1rem 1.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(201,168,76,0.03) 0%, transparent 60%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.quiz-prompt-glyph {
    font-size: clamp(3.5rem, 10vw, 5.5rem);
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(201,168,76,0.25));
}

.quiz-prompt-translit {
    font-family: var(--font-title);
    font-size: clamp(2rem, 7vw, 3.5rem);
    color: var(--gold);
    line-height: 1;
    letter-spacing: 0.1em;
}

.quiz-prompt-text {
    font-family: var(--font-body);
    font-size: clamp(1.4rem, 5vw, 2rem);
    color: var(--sand);
    line-height: 1.2;
    font-style: italic;
}

.quiz-prompt-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

/* Audio button (mode 5) */
.quiz-play-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    background: rgba(20,143,119,0.08);
    border: 1px solid rgba(20,143,119,0.3);
    border-radius: var(--radius);
    color: var(--turquoise-light);
    padding: 1rem 2rem;
    cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font-title);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

.quiz-play-btn:hover    { background: rgba(20,143,119,0.15); border-color: var(--turquoise); }
.quiz-play-btn.loading  { opacity: 0.6; cursor: wait; }
.quiz-play-btn.playing  { border-color: var(--gold); color: var(--gold); background: var(--gold-glow); }

.play-icon  { font-size: 2rem; line-height: 1; }
.play-label { font-size: 0.68rem; }

/* Choices grid */
.quiz-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.quiz-choices.choices-glyph { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 480px) {
    .quiz-choices.choices-glyph { grid-template-columns: repeat(2, 1fr); }
}

.choice-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 0.8rem 0.6rem;
    cursor: pointer;
    text-align: center;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 64px;
}

.choice-btn::before {
    content: attr(data-kbd);
    position: absolute;
    top: 4px; left: 6px;
    font-family: var(--font-title);
    font-size: 0.55rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    opacity: 0;
    transition: opacity var(--transition);
}

.choice-btn:hover:not(:disabled)::before { opacity: 1; }

.choice-btn:hover:not(:disabled) {
    border-color: var(--border-light);
    background: var(--bg-card-h);
    transform: translateY(-1px);
}

.choice-btn:active:not(:disabled) { transform: translateY(0); }

.choice-btn:disabled { cursor: default; }

/* States */
.choice-btn.correct {
    border-color: var(--turquoise);
    background: rgba(20,143,119,0.12);
    color: var(--turquoise-light);
    box-shadow: 0 0 0 1px rgba(20,143,119,0.2);
}

.choice-btn.wrong {
    border-color: #C0392B;
    background: rgba(192,57,43,0.1);
    color: #E57373;
}

.choice-display {
    font-size: 1.5rem;
    line-height: 1;
    display: block;
}

/* Choices texte (modes 1, 3, 4) */
.choices-text .choice-display,
.choices-translit .choice-display {
    font-family: var(--font-title);
    font-size: 1rem;
    letter-spacing: 0.04em;
}

.choice-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    display: block;
    line-height: 1.2;
}

/* Feedback */
.quiz-feedback {
    margin-top: 0.9rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    line-height: 1.5;
    border: 1px solid;
    animation: slide-in-up 0.2s ease;
}

.quiz-feedback[hidden] { display: none; }

.quiz-feedback.correct {
    background: rgba(20,143,119,0.08);
    border-color: rgba(20,143,119,0.3);
    color: var(--text-dim);
}

.quiz-feedback.correct strong { color: var(--turquoise-light); }

.quiz-feedback.wrong {
    background: rgba(192,57,43,0.08);
    border-color: rgba(192,57,43,0.3);
    color: var(--text-dim);
}

.quiz-feedback.wrong strong { color: #E57373; }

.quiz-feedback em { color: #E6A817; font-style: normal; }

/* ══════════════════════════════════════════════════════════════
   RESULT
══════════════════════════════════════════════════════════════ */
.result-header {
    text-align: center;
    padding: 2rem 1rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, rgba(201,168,76,0.04) 0%, transparent 60%);
}

.result-glyph {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 4px 16px currentColor);
    opacity: 0.8;
}

.result-grade {
    font-family: var(--font-title);
    font-size: 1.4rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.result-score {
    font-family: var(--font-title);
    font-size: 2.5rem;
    color: var(--text);
    line-height: 1;
}

.result-pct {
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    margin-top: 0.15rem;
}

.result-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.stat-pill {
    font-family: var(--font-title);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    padding: 0.3rem 0.75rem;
    border-radius: 99px;
    border: 1px solid;
}

.stat-pill.correct { background: rgba(20,143,119,0.1); border-color: rgba(20,143,119,0.3); color: var(--turquoise-light); }
.stat-pill.wrong   { background: rgba(192,57,43,0.1); border-color: rgba(192,57,43,0.3); color: #E57373; }
.stat-pill.streak  { background: rgba(230,168,23,0.1); border-color: rgba(230,168,23,0.3); color: #E6A817; }

.result-meta {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    margin-bottom: 1.25rem;
    font-style: italic;
}

/* Breakdown */
.breakdown-details {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.breakdown-details summary {
    padding: 0.7rem 1rem;
    font-family: var(--font-title);
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold-dim);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition);
}

.breakdown-details[open] summary { border-color: var(--border); }

.breakdown-list {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
}

.breakdown-row {
    display: grid;
    grid-template-columns: 1.5rem 1fr 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 1rem;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--border);
}
.breakdown-row:last-child { border-bottom: none; }

.breakdown-row.ok  { background: rgba(20,143,119,0.04); }
.breakdown-row.ko  { background: rgba(192,57,43,0.04); }

.br-icon    { font-family: var(--font-title); font-size: 0.75rem; }
.br-icon    .breakdown-row.ok & { color: var(--turquoise); }
.breakdown-row.ok  .br-icon { color: var(--turquoise); }
.breakdown-row.ko  .br-icon { color: #E57373; }
.br-prompt  { color: var(--text-dim); font-size: 1rem; }
.br-answer  { color: var(--gold); font-family: var(--font-title); font-size: 0.78rem; }

/* Result actions */
.result-actions {
    display: flex;
    gap: 0.75rem;
}

.btn-retry, .btn-menu {
    flex: 1;
    padding: 0.75rem;
    border-radius: var(--radius);
    font-family: var(--font-title);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition);
    border: 1px solid;
}

.btn-retry {
    background: linear-gradient(135deg, #8A6828, var(--gold));
    border-color: var(--gold);
    color: #0D0A05;
    font-weight: 700;
}

.btn-retry:hover { filter: brightness(1.1); }

.btn-menu {
    background: transparent;
    border-color: var(--border-light);
    color: var(--text-dim);
}

.btn-menu:hover { border-color: var(--gold-dim); color: var(--text); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 520px) {
    .mode-grid { grid-template-columns: 1fr; }
    .quiz-choices { grid-template-columns: 1fr 1fr; }
    .result-actions { flex-direction: column; }
    .score-row { grid-template-columns: 1fr auto auto; }
    .score-level { display: none; }
}