/* css/style.css — Thème sombre, responsive tactile */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #121212;
    --panel: #1e1e1e;
    --panel-2: #262626;
    --text: #e0e0e0;
    --muted: #9aa0a6;
    --accent: #3498db;
    --accent-2: #2980b9;
    --good: #27ae60;
    --bad: #e74c3c;
    --fr: #3498db;
    --en: #27ae60;
    --radius: 10px;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 12px;
    -webkit-tap-highlight-color: transparent;
}

.app {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.app-header { }
.app-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.app-header h1 { font-size: 22px; letter-spacing: 1px; }
.header-stats {
    margin-top: 6px;
    display: flex;
    justify-content: center;
    gap: 14px;
    font-size: 13px;
    color: var(--muted);
    flex-wrap: wrap;
}

.tabs {
    display: flex;
    gap: 4px;
    background: var(--panel);
    padding: 4px;
    border-radius: var(--radius);
    flex-shrink: 0;
}
.tab {
    flex: 0;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--muted);
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: background .15s, color .15s;
}
.tab.active { background: var(--accent); color: #fff; }
.tab:hover:not(.active) { background: var(--panel-2); color: var(--text); }
.tab-debug {
    margin-left: 6px;
    opacity: .55;
    font-size: 16px;
}
.tab-debug:hover { opacity: 1; }
.tab-debug[hidden] { display: none; }

#mode-content { min-height: 470px; }

/* ----- Boutons génériques ----- */
button { font-family: inherit; }
.controls { display: flex; justify-content: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.btn-primary {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: transform .08s, background .15s;
}
.btn-primary:hover { background: var(--accent-2); }
.btn-primary:active { transform: scale(.97); }
.btn-ghost {
    padding: 10px 16px;
    border: 1px solid #333;
    border-radius: 8px;
    background: var(--panel-2);
    color: var(--text);
    cursor: pointer;
    font-weight: 600;
}
.btn-ghost:hover { background: #2f2f2f; }
.btn-ghost.danger { color: var(--bad); border-color: #5a2a2a; }
.app-footer { display: flex; gap: 8px; justify-content: center; padding-top: 6px; flex-wrap: wrap; }

/* ----- Conteneurs de mode ----- */
.mode { background: var(--panel); border-radius: var(--radius); padding: 18px; text-align: center; }
.mode h3 { margin-bottom: 12px; font-size: 16px; }

/* ----- Mode écriture ----- */
.char-pager { display: flex; align-items: center; justify-content: center; gap: 12px; }
.pager-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--panel-2);
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
    flex-shrink: 0;
}
.pager-btn:hover { background: var(--accent); color: #fff; }
#hw-current { font-size: 20px; font-weight: 700; min-width: 170px; }
#hw-current.levelup { animation: pop .5s; }
.fr { color: var(--fr); }
.en { color: var(--en); margin-left: 6px; }

#hanzi-writer-container {
    width: 280px;
    height: 280px;
    margin: 10px auto 4px;
    background: #181818;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
    touch-action: none;
}
#hw-stats {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--muted);
    margin-top: 6px;
}
#hw-stats .lvl { color: var(--accent); font-weight: 700; }

.error-message {
    color: var(--bad);
    font-weight: 700;
    min-height: 22px;
    margin-top: 8px;
}
.error-message.good { color: var(--good); }
.error-message.bad { color: var(--bad); }
.error-message.fade-out { animation: fadeOut 1.4s ease forwards; }

/* ----- Mode correspondance ----- */
.match-instr { color: var(--muted); margin: 8px 0; font-size: 14px; }
#m-prompt { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 14px; }
.big-hanzi { font-size: 64px; line-height: 1.1; }
.pinyin { color: var(--muted); font-size: 16px; }
.fr.big, .en.big { font-size: 26px; display: block; }
.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.match-opt {
    padding: 16px 8px;
    border: 1px solid #333;
    border-radius: 10px;
    background: var(--panel-2);
    color: var(--text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    transition: background .15s, transform .08s;
}
.match-opt:hover { background: #2f2f2f; }
.match-opt:active { transform: scale(.97); }
.match-opt.correct { background: rgba(39, 174, 96, .25); border-color: var(--good); }
.match-opt.wrong { background: rgba(231, 76, 60, .25); border-color: var(--bad); }
.match-opt:disabled { cursor: default; }

/* ----- Mode reconstitution ----- */
.recon-clue { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 14px; }
.recon-slot {
    min-height: 70px;
    border: 2px dashed #3a3a3a;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    padding: 10px;
    margin-bottom: 12px;
}
.placeholder { color: var(--muted); font-size: 14px; }
.recon-tokens { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 10px; }
.recon-mode-tag {
    font-size: 11px;
    font-weight: 700;
    color: #b07ce8;
    background: rgba(107, 63, 160, .2);
    border: 1px solid #6b3fa0;
    border-radius: 12px;
    padding: 2px 10px;
    margin-bottom: 4px;
}
.recon-instr { color: var(--muted); font-size: 14px; margin-top: 4px; }
.token {
    min-width: 58px;
    padding: 12px;
    font-size: 30px;
    border-radius: 10px;
    border: 1px solid #333;
    background: var(--panel-2);
    color: var(--text);
    cursor: pointer;
    transition: background .15s, transform .08s;
}
.token:hover { background: #2f2f2f; }
.token.placed { background: rgba(52, 152, 219, .2); border-color: var(--accent); }

/* ----- Liste de phrases (reconstitution manuelle) ----- */
.recon-phrase-list {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #2a2a2a;
}
.recon-phrase-list-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 8px;
    text-align: center;
}
.recon-phrase-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    max-height: 175px;
    overflow: hidden;
    scrollbar-width: none;
}
.recon-phrase-chips::-webkit-scrollbar { display: none; }
.recon-phrase-chip {
    padding: 6px 12px;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid #333;
    background: var(--panel-2);
    color: var(--text);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.recon-phrase-chip:hover { background: #2f2f2f; }
.recon-phrase-chip.done { border-color: var(--good); color: var(--good); }
.recon-phrase-chip.active { border-color: var(--accent); background: rgba(52, 152, 219, .15); }

/* Pagination générique (reconstitution phrases + écriture chars) */
.recon-phrase-pager, .char-pager-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}
.pager-btn {
    min-width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #333;
    background: var(--panel-2);
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.pager-btn:hover:not(:disabled) { background: #2f2f2f; }
.pager-btn:disabled { opacity: .3; cursor: default; }
.pager-btn.small { min-width: 32px; height: 32px; font-size: 16px; }
.pager-info { font-size: 13px; color: var(--muted); min-width: 50px; text-align: center; }

/* Mode tons : bouton besoin d'aide */
.tone-hint-btn {
    background: transparent;
    border: 1px dashed #555;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 14px;
    color: var(--muted);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.tone-hint-btn:hover { border-color: var(--accent); color: var(--accent); }
.tone-hint-pinyin { margin-top: 6px; }

/* ----- Mode tons (correspondance) ----- */
.tone-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 14px 0;
}
.tone-opt {
    padding: 14px 4px;
    border: 1px solid #333;
    border-radius: 10px;
    background: var(--panel-2);
    color: var(--text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    transition: background .15s, transform .08s;
}
.tone-opt:hover { background: #2f2f2f; }
.tone-opt:active { transform: scale(.97); }
.tone-opt.correct { background: rgba(39, 174, 96, .25); border-color: var(--good); }
.tone-opt.wrong { background: rgba(231, 76, 60, .25); border-color: var(--bad); }
.tone-opt:disabled { cursor: default; }
.tone-mark { font-size: 28px; font-weight: 700; }
.tone-num { font-size: 11px; color: var(--muted); }
.tone-desc { font-size: 10px; color: var(--muted); }

.empty { color: var(--muted); padding: 20px; }

/* ----- Toast ----- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(20px);
    background: #333;
    color: #fff;
    padding: 10px 18px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.good { background: var(--good); }
.toast.bad { background: var(--bad); }
.toast.ok { background: #444; }

@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}
.shake { animation: shake .5s; }


/* ----- Sélecteur de caractères (mode écriture) ----- */
.char-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #2a2a2a;
}
.char-chip {
    min-width: 44px;
    height: 44px;
    padding: 0 6px;
    font-size: 22px;
    line-height: 1;
    border-radius: 10px;
    border: 1px solid #333;
    background: var(--panel-2);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .08s, border-color .15s;
}
.char-chip:hover { background: #2f2f2f; }
.char-chip:active { transform: scale(.94); }
.char-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.char-chip.disabled {
    opacity: .3;
    cursor: not-allowed;
    background: transparent;
}

/* ----- En-tête challenge + toggle difficile ----- */
.match-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.match-head h3 { margin: 0; }
.hard-toggle {
    padding: 7px 12px;
    border-radius: 20px;
    border: 1px solid #444;
    background: var(--panel-2);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.hard-toggle.on { background: #6b3fa0; color: #fff; border-color: #6b3fa0; }

/* ----- Minuteur challenge ----- */
.match-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.match-track {
    flex: 1;
    height: 8px;
    background: #2a2a2a;
    border-radius: 5px;
    overflow: hidden;
}
.match-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--good), var(--accent));
    border-radius: 5px;
}
#m-time { font-size: 13px; color: var(--muted); min-width: 30px; text-align: right; }
.pinyin-opt { font-size: 22px; font-weight: 600; }


/* ----- Pinyin sous le caractère (écriture) ----- */
.pinyin-display {
    font-size: 18px;
    color: var(--muted);
    margin: -4px 0 6px;
    letter-spacing: 1px;
}

/* ----- Étiquette de mode (écriture) ----- */
.mode-tag {
    color: #b07ce8;
    font-weight: 700;
    font-size: 12px;
}

/* ----- Badge de mode challenge ----- */
.mode-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}
.mode-badge.easy { background: rgba(52, 152, 219, .2); color: var(--accent); border: 1px solid var(--accent); }
.mode-badge.hard { background: rgba(107, 63, 160, .3); color: #c89eff; border: 1px solid #6b3fa0; }
.mode-badge.x2 { background: rgba(107, 63, 160, .3); color: #c89eff; border: 1px solid #6b3fa0; }

/* ----- Sessions challenge ----- */
.session-progress {
    margin-top: 14px;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}
.session-start, .session-end {
    padding: 26px 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}
.session-start h3, .session-end h3 { font-size: 18px; }
.session-desc { color: var(--muted); font-size: 14px; line-height: 1.5; max-width: 320px; }
.session-score {
    width: 100%;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--panel-2);
    border-radius: 10px;
    padding: 16px;
    margin: 4px 0 8px;
}
.score-line {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
}
.score-line b { color: var(--accent); }

/* ----- Résumé des erreurs de session ----- */
.session-errors {
    width: 100%;
    max-width: 280px;
    background: var(--panel-2);
    border-radius: 10px;
    padding: 14px;
    margin: 4px 0 8px;
    text-align: left;
}
.session-errors h4 {
    margin: 0 0 10px;
    font-size: 15px;
    color: var(--accent);
    text-align: center;
}
.error-group {
    margin-bottom: 12px;
}
.error-group h5 {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--text);
}
.error-advice {
    font-size: 13px;
    color: var(--muted);
    margin: 4px 0 8px;
    font-style: italic;
}
.error-list {
    margin: 6px 0 0;
    padding-left: 18px;
}
.error-list li {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-soft);
}
.error-list .hanzi {
    color: var(--accent);
    font-size: 16px;
    margin-right: 4px;
}

/* ----- Mode écriture : objectif & phrase ----- */
.hw-objectif {
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    margin-bottom: 8px;
    min-height: 18px;
}
.obj-target b { color: var(--accent); }
.obj-ready { color: #b07ce8; font-weight: 700; }
.obj-done { color: var(--good); }

.phrase-banner {
    background: rgba(107, 63, 160, .2);
    border: 1px solid #6b3fa0;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 15px;
    color: #c89eff;
    animation: pulseGlow 1.8s ease-in-out infinite;
}
.banner-icon { font-size: 20px; }
.btn-primary.small { padding: 6px 14px; font-size: 13px; }
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 6px rgba(107, 63, 160, .4); }
    50% { box-shadow: 0 0 16px rgba(107, 63, 160, .8); }
}

.phrase-builder { margin-bottom: 6px; }
.phrase-slots {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.pslot {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    border: 2px solid #333;
    transition: border-color .2s, background .2s;
}
.pslot.done {
    background: rgba(39, 174, 96, .15);
    border-color: var(--good);
    color: var(--text);
}
.pslot.current {
    border-color: var(--accent);
    border-style: dashed;
    animation: blinkBorder 1s ease-in-out infinite;
}
.pslot.todo {
    border-color: #2a2a2a;
    background: transparent;
}
@keyframes blinkBorder {
    0%, 100% { border-color: var(--accent); }
    50% { border-color: #88ccff; }
}
.phrase-progress {
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 4px;
}

.phrase-done {
    text-align: center;
    padding: 16px;
    background: var(--panel-2);
    border-radius: 12px;
    animation: pop .4s;
}
.phrase-result { font-size: 48px; letter-spacing: 4px; margin-bottom: 4px; }
.phrase-result-small { font-size: 36px; letter-spacing: 4px; margin-bottom: 2px; }
.phrase-pinyin { color: var(--muted); font-size: 18px; margin-bottom: 10px; }
.phrase-trad { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.phrase-celebrate { font-size: 16px; color: var(--good); font-weight: 700; margin-bottom: 14px; }


/* ----- Audio ----- */
.phrase-audio-row { margin-bottom: 14px; }
#hw-speak { font-size: 20px; }


/* ----- Titre cliquable (dashboard toggle) ----- */
.app-title {
    cursor: pointer;
    user-select: none;
    transition: opacity .15s;
}
.app-title:hover { opacity: .7; }
.app-title.title-active { opacity: .7; }
.app-title::after {
    content: ' ▾';
    font-size: 14px;
    color: var(--muted);
}


/* ----- Tableau de progression (dashboard) ----- */
.dashboard {
    position: fixed;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: 440px;
    height: 100dvh;
    overflow-y: auto;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge */
    z-index: 100;
    background: var(--panel);
    border-radius: 0;
    padding: 16px 16px 0;   /* le padding bas est fourni par la barre Fermer */
    box-shadow: 0 8px 32px rgba(0, 0, 0, .6);
    animation: dashOpen .3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateX(-50%);
    transform-origin: center center;
}
.dashboard::-webkit-scrollbar { display: none; }
@keyframes dashOpen {
    from { transform: translateX(-50%) scale(0.3); opacity: 0; }
    to   { transform: translateX(-50%) scale(1);   opacity: 1; }
}
.dashboard-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 99;
    animation: pop .15s ease;
}
.dash-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.dash-stat {
    flex: 1;
    min-width: 80px;
    background: var(--panel-2);
    border-radius: 8px;
    padding: 8px 6px;
    text-align: center;
}
.dash-stat b { display: block; font-size: 16px; color: var(--accent); }
.dash-stat span { font-size: 11px; color: var(--muted); }
.dash-modes-stat b { font-size: 13px; }

.dash-chars {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}
.dash-char {
    background: var(--panel-2);
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
    border: 1px solid #333;
    transition: border-color .15s;
}
.dash-char.validated { border-color: var(--good); }
.dash-char.ready { border-color: var(--accent); }
.dash-char.locked { opacity: .35; }
.dash-badge-row { height: 14px; }
.dash-badge { font-size: 11px; }
.dash-badge.ok { color: var(--good); }
.dash-badge.ready { color: var(--accent); }
.dash-badge.locked { color: var(--muted); }
.dash-hanzi { font-size: 24px; line-height: 1.1; }
.dash-pinyin { font-size: 11px; color: var(--muted); }
.dash-lvl { font-size: 12px; color: var(--accent); font-weight: 700; }
.dash-xp { font-size: 10px; color: var(--muted); }
.dash-modes { margin-top: 4px; display: flex; justify-content: center; gap: 2px; }
.dash-mode { font-size: 12px; opacity: .25; }
.dash-mode.done { opacity: 1; }
.dash-need { font-size: 9px; color: #e67e22; margin-top: 2px; }

/* Équilibrage dans le dashboard */
.dash-balance {
    background: var(--panel-2);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 14px;
}
.dash-balance.imbalanced { border: 1px solid #e67e22; }
.dash-balance-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.dash-balance-bars { display: flex; flex-direction: column; gap: 6px; }
.dash-bal-bar { display: flex; align-items: center; gap: 8px; }
.dash-bal-label { font-size: 12px; color: var(--muted); min-width: 100px; }
.dash-bal-track { flex: 1; height: 10px; background: #2a2a2a; border-radius: 5px; overflow: hidden; }
.dash-bal-fill { height: 100%; border-radius: 5px; transition: width .3s; }
.dash-bal-fill.write { background: var(--accent); }
.dash-bal-fill.match { background: #b07ce8; }
.dash-bal-fill.reconst { background: var(--good); }
.dash-bal-num { font-size: 12px; color: var(--text); min-width: 24px; text-align: right; }
.dash-balance-advice { margin-top: 8px; font-size: 13px; color: #f0a060; }
.dash-balance-ok { margin-top: 8px; font-size: 13px; color: var(--good); }
.dash-balance-hint { margin-top: 8px; font-size: 12px; color: var(--muted); }

/* Suggestion d'action prioritaire */
.dash-next-action {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(52, 152, 219, .15);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    cursor: pointer;
    transition: background .15s;
}
.dash-next-action:hover { background: rgba(52, 152, 219, .25); }
.dash-next-icon { font-size: 18px; flex-shrink: 0; }
.dash-next-text { font-size: 14px; font-weight: 600; color: var(--accent); }

.dash-phrase-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    font-size: 14px;
    padding-top: 8px;
    border-top: 1px solid #2a2a2a;
    max-height: 230px;
    overflow: hidden;
}
.dash-phrase { color: var(--muted); }
.dash-phrase.done { color: var(--good); }


/* ----- Joueur & sauvegarde (dashboard) ----- */
.dash-player-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.dash-player-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--panel-2);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 8px 14px;
    color: var(--text);
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: background .15s;
}
.dash-player-btn:hover { background: #2f2f2f; }
.dash-player-emoji { font-size: 22px; }
.dash-add-player {
    width: 38px; height: 38px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: rgba(52, 152, 219, .15);
    color: var(--accent);
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .08s;
}
.dash-add-player:hover { background: rgba(52, 152, 219, .3); }
.dash-add-player:active { transform: scale(.92); }
.dash-close {
    width: 38px; height: 38px;
    border: 1px solid #888;
    border-radius: 8px;
    background: rgba(231, 76, 60, 0.15);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, transform .1s;
}
.dash-close:hover { background: rgba(231, 76, 60, 0.3); color: #fff; transform: scale(1.1); }

/* ----- Poignée de fermeture (haut du dashboard) ----- */
/* Toute la largeur est cliquable, seule la barre est visible. */
.dash-handle {
    display: flex;
    justify-content: center;
    padding: 14px 0 12px;
    margin: -16px -16px 0;   /* zone cliquable étirée jusqu'aux bords */
    cursor: pointer;
}
.dash-handle::before {
    content: '';
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: #555;
    transition: background .15s;
}
.dash-handle:hover::before { background: #888; }

/* ----- Barre « Fermer ▾ » (bas du dashboard) ----- */
/* Sticky : reste visible pendant le scroll du contenu. */
.dash-close-bar {
    position: sticky;
    bottom: 0;
    width: calc(100% + 32px);
    margin: 16px -16px 0;   /* pleine largeur, collée au bord inférieur */
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--panel);
    border: none;
    border-top: 1px solid #333;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.dash-close-bar:hover { background: var(--panel-2); }
.dash-close-bar:active { background: #2a2a2a; }
#dash-save-btn { margin-left: auto; }

/* Bouton toggle des stats du haut */
.dash-stats-toggle {
    width: 32px; height: 38px;
    border: 1px solid #444;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.dash-stats-toggle:hover { background: var(--panel-2); color: var(--text); }

/* Pagination dashboard */
.dash-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}
.dash-toggle-view {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--accent);
    background: rgba(52, 152, 219, .12);
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    min-width: 120px;
    text-align: center;
}
.dash-toggle-view:hover { background: rgba(52, 152, 219, .25); }

/* Vue déverrouillages (étapes) */
.dash-unlocks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.dash-stage {
    background: var(--panel-2);
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid #333;
}
.dash-stage.locked { opacity: .4; }
.dash-stage.current { border-color: var(--accent); }
.dash-stage-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.dash-stage-num { font-size: 15px; font-weight: 700; color: var(--text); }
.dash-stage-status { font-size: 12px; color: var(--muted); }
.dash-stage-stats { display: flex; gap: 16px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.dash-stage-chars { display: flex; flex-wrap: wrap; gap: 4px; }
.unlock-char { font-size: 20px; opacity: .4; }
.unlock-char.validated { color: var(--good); opacity: 1; }
.unlock-char.ready { color: var(--accent); opacity: 1; }
.unlock-char.locked { opacity: .2; }

.btn-ghost.small { padding: 6px 12px; font-size: 13px; }

.dash-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #2a2a2a;
    flex-wrap: wrap;
}

/* ----- Sélection de joueur ----- */
.dash-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}
.dash-section h3 { margin: 0; }
.player-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    width: 100%;
}

/* ----- Page d'aide ----- */
.help-section {
    width: 100%;
    max-width: 400px;
    background: var(--panel-2);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 14px;
    text-align: left;
}
.help-section h3 {
    margin: 0 0 10px;
    font-size: 16px;
    color: var(--accent);
    border-bottom: 1px solid #333;
    padding-bottom: 8px;
}
.help-section p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-soft);
    margin: 8px 0;
}
.help-section ul {
    padding-left: 20px;
    margin: 8px 0;
}
.help-section li {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-soft);
    margin-bottom: 4px;
}

.player-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    width: 100%;
}
.player-card-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.player-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--panel-2);
    border: 2px solid #333;
    border-radius: 12px;
    padding: 14px 18px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    min-width: 90px;
}
.player-card.current { border-color: var(--accent); }
.player-emoji { font-size: 36px; }
.player-name { font-size: 14px; font-weight: 600; }
.player-current-tag { font-size: 10px; color: var(--accent); }
.player-file-tag { font-size: 10px; }
.player-edit-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    opacity: .6;
    transition: opacity .15s;
}
.player-edit-btn:hover { opacity: 1; }

/* ----- Création / édition joueur ----- */
.dash-label {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 4px;
}
.dash-input {
    width: 100%;
    max-width: 260px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #333;
    background: var(--panel-2);
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
}
.dash-input:focus { outline: none; border-color: var(--accent); }

.zodiac-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 320px;
}
.zodiac-btn {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: 2px solid #333;
    background: var(--panel-2);
    font-size: 24px;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .08s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zodiac-btn:hover { background: #2f2f2f; }
.zodiac-btn:active { transform: scale(.92); }
.zodiac-btn.selected { border-color: var(--accent); background: rgba(52, 152, 219, .2); }

/* ===== Mode Nuances (选词填空) ===== */
.nuance-question {
    text-align: center;
    margin: 12px 0 6px;
}
.nuance-blank {
    font-size: 28px;
    color: var(--muted);
    letter-spacing: 4px;
}
.nuance-context {
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    margin: 6px 0 16px;
    letter-spacing: 2px;
}
.nuance-explain {
    background: rgba(52, 152, 219, .12);
    border: 1px solid rgba(52, 152, 219, .3);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 12px 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    white-space: pre-line;
    max-width: 400px;
}

/* ===== Dashboard : Tons & Nuances ===== */
.dash-tones, .dash-nuances {
    padding: 8px 12px 20px;
    max-width: 420px;
    margin: 0 auto;
}
.dash-tone-row, .dash-nuance-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #222;
    font-size: 13px;
}
.dash-tone-mark {
    font-size: 22px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}
.dash-tone-name {
    min-width: 130px;
    color: var(--muted);
    font-size: 12px;
}
.dash-nuance-pair {
    min-width: 90px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}
.dash-tone-track {
    flex: 1;
    height: 10px;
    background: #1a1a1a;
    border-radius: 5px;
    overflow: hidden;
    min-width: 60px;
}
.dash-tone-fill {
    height: 100%;
    border-radius: 5px;
    transition: width .3s ease;
}
.dash-tone-fill.good { background: var(--good); }
.dash-tone-fill.mid { background: #f0ad4e; }
.dash-tone-fill.bad { background: var(--bad); }
.dash-tone-fill.none { background: #333; }
.dash-tone-stat {
    min-width: 36px;
    text-align: right;
    font-weight: 600;
    font-size: 13px;
}
.dash-tone-count {
    min-width: 40px;
    text-align: right;
    color: var(--muted);
    font-size: 11px;
}

/* ----- Minuteur flash (niveau 4 écriture) ----- */
.flash-timer {
    width: 280px;
    margin: 0 auto 8px;
}
.flash-timer-track {
    height: 6px;
    background: #2a2a2a;
    border-radius: 3px;
    overflow: hidden;
}
.flash-timer-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--accent), #b07ce8);
    border-radius: 3px;
}

/* ----- Bouton 😘 (niveau 7+ : révéler le caractère caché) ----- */
.peek-btn {
    font-size: 26px;
    cursor: pointer;
    user-select: none;
    transition: transform .15s;
    display: inline-block;
}
.peek-btn:hover { transform: scale(1.2); }
.peek-btn:active { transform: scale(.9); }

/* ===== Mode "Emballe moi, vraiment" ===== */

/* Glow rouge de fond */
body.emballe-glow::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(231, 76, 60, .18), transparent 70%);
    animation: emballeGlow 1s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 290;
}
@keyframes emballeGlow {
    from { opacity: .4; }
    to   { opacity: 1; }
}

/* Indicateur de chargement */
.emballe-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 210;
    text-align: center;
    pointer-events: none;
}
.emballe-loader-text {
    font-size: 20px;
    font-weight: 700;
    color: #ff6b6b;
    text-shadow: 0 0 12px rgba(231, 76, 60, .6);
    margin-bottom: 10px;
    animation: emballeTextPulse 1s ease-in-out infinite;
}
@keyframes emballeTextPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.emballe-loader-bar {
    width: 240px;
    height: 8px;
    background: #2a2a2a;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 auto;
}
#emballe-loader-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #e74c3c, #ff6b6b);
    border-radius: 4px;
    transition: width .1s linear;
}
/* Les boutons n'apparaissent qu'après ~1,2 s (évite les clics accidentels) */
.emballe-pick-wrap {
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}
.emballe-pick-wrap.emballe-pick-visible {
    opacity: 1;
    pointer-events: auto;
}
.emballe-game-pick {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 14px;
}
.emballe-game-btn {
    background: transparent;
    border: none;
    font-size: 36px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: transform .15s, background .15s;
    line-height: 1;
}
.emballe-game-btn:hover {
    transform: scale(1.25);
    background: rgba(255, 107, 107, .15);
}
.emballe-game-btn:active {
    transform: scale(1.1);
}
/* Barre « Plus tard » : pleine largeur sous les trois boutons */
.emballe-later-btn {
    display: block;
    width: 100%;
    max-width: 240px;
    margin: 10px auto 0;
    padding: 9px 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 107, 107, .3);
    border-radius: 8px;
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.emballe-later-btn:hover {
    background: rgba(255, 107, 107, .12);
    color: var(--text);
}

/* Modale de jeu — thème rouge */
.emballe-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(20, 5, 5, .75);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: emballeModalIn .3s ease;
}
@keyframes emballeModalIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.emballe-modal[hidden] { display: none; }
.emballe-modal-content {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: linear-gradient(160deg, #2a1216, #1a0a0e);
    border: 1px solid #663333;
    border-radius: 16px;
    padding: 20px 16px 24px;
    box-shadow: 0 12px 48px rgba(231, 76, 60, .3);
    animation: emballeContentIn .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes emballeContentIn {
    from { transform: scale(.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.emballe-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 1px solid #444;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    transition: background .15s, color .15s;
}
.emballe-close:hover { background: var(--panel-2); color: var(--text); }

/* HUD commun aux jeux */
.emballe-game { display: flex; flex-direction: column; gap: 12px; }
.emballe-hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px;
    font-size: 16px;
}
.emballe-score b { color: var(--accent); font-size: 20px; }
.emballe-combo { color: #f39c12; font-weight: 700; font-size: 15px; }
.emballe-lives { font-size: 16px; letter-spacing: 2px; }
.emballe-round { color: var(--muted); font-size: 14px; }
.emballe-instr {
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    min-height: 20px;
}
.emballe-instr.active { color: var(--accent); font-weight: 600; }
.emballe-instr.good { color: var(--good); font-weight: 700; }
.emballe-instr.bad { color: var(--bad); font-weight: 700; }
.emballe-timer-bar {
    height: 6px;
    background: #2a2a2a;
    border-radius: 3px;
    overflow: hidden;
}
#ewok-timer-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #e74c3c, #ff6b6b);
    border-radius: 3px;
}

/* Écran de fin commun */
.emballe-over {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 16px;
    text-align: center;
}
.emballe-over-emoji { font-size: 56px; animation: pop .5s; }
.emballe-over-score { font-size: 24px; font-weight: 700; color: var(--accent); }
.emballe-over-msg { font-size: 15px; color: var(--muted); }
.emballe-over .btn-primary { margin-top: 6px; }

/* ----- Game A : Wok ----- */
.wok-target {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #ff6b6b;
    padding: 8px;
    background: rgba(231, 76, 60, .12);
    border-radius: 8px;
    margin-bottom: 6px;
}
.wok-char {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(40, 20, 20, .9);
    border: 2px solid #663333;
    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.wok-char:hover { border-color: #ff6b6b; }

/* ----- Game B : Mémo ----- */
.memo-area {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    justify-items: center;
    padding: 8px 0;
    min-height: 220px;
}
.memo-tile {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    border-radius: 12px;
    border: 2px solid #553333;
    background: rgba(40, 20, 20, .6);
    color: var(--text);
    cursor: pointer;
    transition: all .2s;
    user-select: none;
}
.memo-tile:active { transform: scale(.92); }
.memo-tile.memo-flash {
    border-color: var(--good);
    background: rgba(39, 174, 96, .3);
    box-shadow: 0 0 20px rgba(39, 174, 96, .5);
}
.memo-tile.memo-correct {
    border-color: var(--good);
    background: rgba(39, 174, 96, .2);
}
.memo-tile.memo-wrong {
    border-color: var(--bad);
    background: rgba(231, 76, 60, .2);
    opacity: .5;
}
.memo-tile.memo-reveal {
    border-color: var(--good);
    background: rgba(39, 174, 96, .15);
    animation: pop .3s;
}

/* ----- Game C : Orbit ----- */
.orbit-area {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}
.orbit-ring {
    position: absolute;
    top: 0;
    left: 0;
}
.orbit-ring circle {
    transition: stroke-dashoffset .05s linear;
}
.orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
}
.orbit-buttons {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    pointer-events: none;
}
.orbit-btn {
    position: absolute;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    border-radius: 50%;
    border: 2px solid #663333;
    background: rgba(40, 20, 20, .7);
    color: var(--text);
    cursor: pointer;
    pointer-events: auto;
    transition: background .15s, border-color .15s, transform .15s;
    user-select: none;
}
.orbit-btn:hover { border-color: #ff6b6b; background: #3a1a1a; }
.orbit-btn:active { transform: scale(.88) !important; }
.orbit-btn.orbit-correct { background: rgba(39, 174, 96, .3); border-color: var(--good); }
.orbit-btn.orbit-wrong { background: rgba(231, 76, 60, .3); border-color: var(--bad); }

/* ----- Classement arcade ----- */
.emballe-lb-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 12px;
    text-align: center;
}
.emballe-lb-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    margin-bottom: 14px;
}
.emballe-lb-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid transparent;
    transition: background .15s;
}
.emballe-lb-row.me {
    background: rgba(52, 152, 219, .15);
    border-color: var(--accent);
}
.emballe-lb-rank {
    font-size: 18px;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}
.emballe-lb-emoji {
    font-size: 18px;
    flex-shrink: 0;
}
.emballe-lb-name {
    flex: 1;
    font-size: 14px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.emballe-lb-best {
    font-size: 18px;
    font-weight: 700;
    color: #ff6b6b;
    flex-shrink: 0;
}
.emballe-lb-empty {
    text-align: center;
    color: var(--muted);
    padding: 20px;
}

/* ----- Grille mémo responsive (grandes grilles) ----- */
.memo-area {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
    overflow: visible;
}