/* ================================================
   QUIZ KANA — STYLES GLOBAUX
================================================ */

.quiz-hero {
    background: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)),
                url('img/quiz.jpg') center/cover no-repeat;
    padding: clamp(40px,8vw,80px) 0;
    text-align: center;
}
.quiz-hero h1 { font-size: clamp(1.8rem,5vw,3.5rem); font-weight:700; }
.quiz-hero p  { font-size: clamp(1rem,2vw,1.2rem); color:#cbd5e1; }

/* ---- Accordion leçons ---- */
.accordion-item {
    background:#1e293b;
    border:1px solid rgba(255,255,255,.1);
    margin-bottom:1rem;
    border-radius:12px !important;
    overflow:hidden;
}
.accordion-button {
    background:#1e293b;
    color:#fff;
    font-size:clamp(1.2rem,3vw,1.8rem);
    font-weight:700;
    border-radius:12px !important;
    min-height:90px;
}
.accordion-button:not(.collapsed){ background:#0f172a; color:#f87171; box-shadow:none; }
.accordion-button::after{ filter:invert(1); }
.accordion-button:focus{ box-shadow:none; outline:3px solid #f87171; outline-offset:2px; }
.accordion-body{ background:#1e293b; color:#e2e8f0; }

/* ---- Boutons kana (leçon) ---- */
.btn-kana {
    font-size:clamp(1.3rem,3.5vw,1.8rem);
    min-width:105px;
    margin:.35rem;
    border-radius:10px;
    font-family:'Noto Sans JP',sans-serif;
    transition:transform .15s,box-shadow .15s,background .15s;
    padding:.55rem .9rem;
    background:#1e293b;
    color:#e2e8f0;
    border:1px solid rgba(255,255,255,.12);
}
.btn-kana:hover{
    transform:translateY(-3px);
    box-shadow:0 6px 15px rgba(220,38,38,.25);
    background:#27374d;
    border-color:#dc2626;
    color:#fff;
}
.btn-kana-hiragana { border-left:3px solid #dc2626; }
.btn-kana-katakana { border-left:3px solid #f87171; }

/* ================================================
   ÉCRAN DE SÉLECTION DE MODE
================================================ */
#screenMode {
    padding:clamp(20px,4vw,40px);
    background:#0f172a;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.08);
}

.mode-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:16px;
    margin:24px 0;
}
.mode-card {
    background:#1e293b;
    border:2px solid rgba(255,255,255,.1);
    border-radius:16px;
    padding:24px 16px;
    text-align:center;
    cursor:pointer;
    transition:all .2s;
    color:#e2e8f0;
    position:relative;
    overflow:hidden;
}
.mode-card:hover, .mode-card.selected {
    border-color:#dc2626;
    background:#27374d;
    transform:translateY(-4px);
    box-shadow:0 10px 30px rgba(220,38,38,.2);
}
.mode-card.selected::after {
    content:'✓';
    position:absolute;
    top:10px; right:12px;
    font-size:14px;
    background:#dc2626;
    color:#fff;
    width:22px; height:22px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    line-height:22px;
}
.mode-icon { font-size:2.5rem; margin-bottom:12px; display:block; }
.mode-name { font-size:1.1rem; font-weight:700; margin-bottom:6px; }
.mode-desc { font-size:.82rem; color:#94a3b8; line-height:1.4; }

.options-row {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:12px;
    margin-bottom:24px;
}
.opt-label { display:block; font-size:.85rem; color:#94a3b8; margin-bottom:6px; }
.opt-select {
    width:100%;
    background:#1e293b;
    color:#e2e8f0;
    border:1px solid rgba(255,255,255,.2);
    border-radius:10px;
    padding:8px 12px;
    font-size:.95rem;
}
.opt-select:focus{ border-color:#dc2626; outline:none; box-shadow:0 0 0 3px rgba(220,38,38,.2); }
.opt-select option{ background:#1e293b; }

.btn-launch {
    display:block;
    width:100%;
    padding:14px;
    background:#dc2626;
    color:#fff;
    border:none;
    border-radius:12px;
    font-size:1.1rem;
    font-weight:700;
    cursor:pointer;
    transition:background .2s,transform .1s;
    letter-spacing:.5px;
}
.btn-launch:hover{ background:#b91c1c; }
.btn-launch:active{ transform:scale(.98); }

/* ================================================
   HUD PARTAGÉ (barre de progression, stats)
================================================ */
.quiz-hud {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
    gap:12px;
    flex-wrap:wrap;
}
.hud-stat {
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width:60px;
}
.hud-value { font-size:1.4rem; font-weight:700; line-height:1; }
.hud-label { font-size:.7rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }
.hud-green  { color:#4ade80; }
.hud-red    { color:#f87171; }
.hud-yellow { color:#fbbf24; }
.hud-white  { color:#fff; }

.progress-track {
    height:8px;
    background:#1e293b;
    border-radius:4px;
    overflow:hidden;
    margin-bottom:24px;
}
.progress-fill {
    height:100%;
    border-radius:4px;
    background:linear-gradient(90deg,#dc2626,#f87171);
    transition:width .4s ease;
}

/* ---- Grand kana ---- */
.kana-stage {
    text-align:center;
    margin:12px 0 24px;
}
.kana-char {
    font-family:'Noto Sans JP',sans-serif;
    font-size:clamp(5rem,18vw,9rem);
    line-height:1;
    cursor:pointer;
    transition:transform .1s,color .1s;
    display:inline-block;
    user-select:none;
    color:#fff;
}
.kana-char:hover{ transform:scale(1.06); color:#f87171; }
.kana-char:active{ transform:scale(.96); }
.sound-hint { font-size:.82rem; color:#94a3b8; margin-top:4px; }

/* ================================================
   MODE QUIZ — CHOIX
================================================ */
.choices-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    max-width:480px;
    margin:0 auto 16px;
}
.choice-btn {
    font-family:'Noto Sans JP',sans-serif;
    font-size:clamp(1rem,3vw,1.3rem);
    padding:12px 8px;
    border-radius:12px;
    background:#1e293b;
    color:#e2e8f0;
    border:2px solid rgba(255,255,255,.12);
    cursor:pointer;
    transition:all .15s;
    font-weight:600;
}
.choice-btn:hover:not(:disabled){ background:#334155; border-color:#dc2626; transform:translateY(-2px); }
.choice-btn.correct { background:#16a34a !important; border-color:#16a34a !important; color:#fff !important; }
.choice-btn.wrong   { background:#dc2626 !important; border-color:#dc2626 !important; color:#fff !important; }
.choice-btn:disabled{ cursor:not-allowed; }

#quizFeedback {
    text-align:center;
    font-size:1.05rem;
    font-weight:600;
    min-height:1.6rem;
}
.fb-ok  { color:#4ade80; }
.fb-err { color:#f87171; }

/* ================================================
   MODE FLASHCARD
================================================ */
.flashcard-wrap {
    perspective:1000px;
    max-width:400px;
    margin:0 auto 24px;
    height:200px;
}
.flashcard-inner {
    position:relative;
    width:100%;
    height:100%;
    transform-style:preserve-3d;
    transition:transform .55s cubic-bezier(.4,0,.2,1);
    cursor:pointer;
}
.flashcard-wrap.flipped .flashcard-inner { transform:rotateY(180deg); }
.fc-face {
    position:absolute;
    inset:0;
    border-radius:20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}
.fc-front { background:#1e293b; border:2px solid rgba(255,255,255,.12); }
.fc-back  { background:#0f172a; border:2px solid #dc2626; transform:rotateY(180deg); }
.fc-front .kana-char{ color:#fff; font-size:clamp(4rem,14vw,7rem); }
.fc-back  .kana-char{ color:#f87171; font-size:clamp(3rem,10vw,5rem); }
.fc-back  .fc-romaji { font-size:1.8rem; font-weight:700; color:#fff; margin-top:8px; }
.fc-tap-hint { font-size:.8rem; color:#94a3b8; margin-top:8px; }

.fc-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    max-width:400px;
    margin:0 auto;
}
.fc-btn {
    padding:12px;
    border-radius:12px;
    border:none;
    font-size:1rem;
    font-weight:700;
    cursor:pointer;
    transition:all .15s;
}
.fc-btn-no  { background:#7f1d1d; color:#fca5a5; }
.fc-btn-yes { background:#14532d; color:#86efac; }
.fc-btn-no:hover  { background:#991b1b; }
.fc-btn-yes:hover { background:#166534; }

.fc-pile-info { text-align:center; font-size:.85rem; color:#94a3b8; margin-top:12px; }

/* ================================================
   MODE CHRONO
================================================ */
.timer-ring-wrap {
    display:flex;
    justify-content:center;
    margin-bottom:16px;
}
.timer-ring {
    position:relative;
    width:80px; height:80px;
}
.timer-ring svg { transform:rotate(-90deg); }
.timer-bg   { stroke:#1e293b; }
.timer-arc  { stroke:#dc2626; stroke-linecap:round; transition:stroke-dashoffset .9s linear, stroke .3s; }
.timer-num {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.6rem;
    font-weight:700;
    color:#fff;
}

.chrono-score {
    text-align:center;
    margin-bottom:8px;
    font-size:1rem;
    color:#94a3b8;
}
.chrono-score span { color:#fbbf24; font-size:1.3rem; font-weight:700; }

/* ================================================
   ÉCRAN RÉSULTAT
================================================ */
#screenResult {
    text-align:center;
    padding:clamp(24px,5vw,48px);
    background:#0f172a;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.08);
}
.result-medal { font-size:4rem; margin-bottom:12px; display:block; }
.result-score { font-size:clamp(2rem,6vw,3.5rem); font-weight:700; margin-bottom:4px; }
.result-sub   { color:#94a3b8; margin-bottom:28px; }
.result-bar-wrap { max-width:360px; margin:0 auto 28px; }
.result-bar-row { display:flex; justify-content:space-between; font-size:.85rem; color:#94a3b8; margin-bottom:6px; }
.result-bar { height:10px; background:#1e293b; border-radius:5px; overflow:hidden; }
.result-bar-fill { height:100%; border-radius:5px; background:linear-gradient(90deg,#dc2626,#f87171); }

.errors-title { font-size:1rem; font-weight:700; margin-bottom:12px; text-align:left; color:#f87171; }
.error-row {
    display:flex;
    align-items:center;
    gap:14px;
    background:#1e293b;
    border-radius:12px;
    padding:10px 16px;
    margin-bottom:8px;
    text-align:left;
}
.er-kana  { font-family:'Noto Sans JP',sans-serif; font-size:2rem; color:#f87171; min-width:44px; text-align:center; }
.er-info  { }
.er-ok    { color:#4ade80; font-weight:700; }
.er-bad   { color:#f87171; font-size:.85rem; }

.result-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.btn-restart { background:#dc2626; color:#fff; border:none; border-radius:12px; padding:12px 28px; font-size:1rem; font-weight:700; cursor:pointer; transition:background .2s; }
.btn-restart:hover { background:#b91c1c; }
.btn-options { background:transparent; color:#e2e8f0; border:2px solid rgba(255,255,255,.2); border-radius:12px; padding:12px 28px; font-size:1rem; font-weight:700; cursor:pointer; transition:all .2s; }
.btn-options:hover { border-color:#dc2626; color:#f87171; }

/* ================================================
   UTILITAIRES
================================================ */
.hidden { display:none !important; }
.quiz-section-box {
    background:#0f172a;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.08);
    padding:clamp(20px,4vw,36px);
}

@media(max-width:480px){
    .mode-grid { grid-template-columns:1fr; }
    .choices-grid { grid-template-columns:1fr 1fr; gap:8px; }
    .fc-actions { grid-template-columns:1fr 1fr; }
    .result-actions { flex-direction:column; align-items:center; }
}