*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --accent:#2c3e50;
  --text:#111827; --text-2:#6b7280; --text-3:#9ca3af;
  --bg:#f5f5f7; --card:#ffffff;
  --border:#e5e7eb; --border-2:#f3f4f6;
  --green:#22c55e; --green-bg:#dcfce7; --green-text:#166534;
  --red:#ef4444; --red-bg:#fee2e2; --red-text:#991b1b;
  --gold:#f59e0b;
}
@media (prefers-color-scheme: dark){
  :root{ --text:#e5e7eb; --text-2:#9ca3af; --text-3:#6b7280; --bg:#0b0f19; --card:#111827; --border:#1f2937; --border-2:#1a2332; --green-bg:#0d2818; --green-text:#4ade80; --red-bg:#2d1113; --red-text:#f87171; }
}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;background:var(--bg);color:var(--text);line-height:1.5;}
button{font-family:inherit;}

/* ---------- Player picker ---------- */
.player-picker{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;}
.player-picker[hidden]{display:none!important;}
.picker-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2.5rem 2rem;text-align:center;max-width:340px;width:100%;box-shadow:0 8px 30px rgba(0,0,0,.08);}
.picker-emoji{font-size:2.5rem;margin-bottom:.25rem;}
.picker-card h1{font-size:1.5rem;margin-bottom:1.25rem;}
.picker-label{color:var(--text-2);font-size:14px;margin-bottom:1rem;}
.picker-buttons{display:flex;gap:.75rem;justify-content:center;margin-bottom:1.5rem;}
.btn-player{flex:1;padding:.9rem 1rem;border-radius:12px;border:2px solid var(--border);background:var(--bg);color:var(--text);font-weight:700;font-size:15px;cursor:pointer;transition:all .15s;}
.btn-player:hover{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent);}
.doc-link{display:inline-block;font-size:12.5px;color:var(--text-3);text-decoration:none;}
.doc-link:hover{color:var(--text-2);}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--border);min-height:52px;display:flex;align-items:center;gap:.75rem;padding:.5rem 1.25rem;flex-wrap:wrap;}
.brand{font-size:13px;font-weight:600;color:var(--text);text-decoration:none;}
.brand span{color:var(--text-2);font-weight:400;}
.sep{color:var(--border);font-size:18px;}
.you-are{font-size:13px;color:var(--text-2);}
.btn-link{background:none;border:none;color:var(--accent);cursor:pointer;font-size:12.5px;text-decoration:underline;padding:0;}
.view-nav{display:flex;gap:.4rem;}
.nav-btn{position:relative;width:32px;height:32px;border-radius:9px;border:1px solid var(--border);background:var(--bg);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;}
.nav-btn.active{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent);}
.duels-badge{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;font-size:9.5px;font-weight:700;border-radius:999px;min-width:15px;height:15px;display:flex;align-items:center;justify-content:center;padding:0 3px;}
.duels-badge[hidden]{display:none!important;}
.stats{margin-left:auto;display:flex;gap:1rem;align-items:center;font-weight:700;font-size:14px;}
.stats .stat{display:flex;align-items:center;gap:.3rem;}
.stats .stat.hearts-low{color:var(--red);}

/* ---------- Layout ---------- */
.content{max-width:640px;margin:0 auto;padding:1.5rem 1.25rem 4rem;}
.view[hidden]{display:none!important;}

.domain-tabs{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem;}
.domain-tab{padding:.45rem .9rem;border-radius:999px;border:1.5px solid var(--border);background:var(--card);color:var(--text-2);font-weight:700;font-size:12.5px;cursor:pointer;transition:all .15s;}
.domain-tab.active{border-color:var(--tab-color, var(--accent));background:color-mix(in srgb, var(--tab-color, var(--accent)) 14%, transparent);color:var(--text);}

.module-header{text-align:center;margin-bottom:1.25rem;}
.module-header h2{font-size:1.3rem;margin-bottom:.15rem;}
.module-header p{color:var(--text-2);font-size:13px;}

.review-banner{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#78350f;border-radius:12px;padding:.9rem 1.1rem;margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:14px;font-weight:600;cursor:pointer;}
.review-banner[hidden]{display:none!important;}

.duel-banner{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e3a8a;border-radius:12px;padding:.9rem 1.1rem;margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:14px;font-weight:600;cursor:pointer;}
.duel-banner[hidden]{display:none!important;}
@media (prefers-color-scheme: dark){ .duel-banner{background:linear-gradient(135deg,#1e3a5f,#1e40af);color:#bfdbfe;} }
@media (prefers-color-scheme: dark){ .review-banner{background:linear-gradient(135deg,#4a3405,#5c4208);color:#fde68a;} }

.league-widget{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.9rem 1.1rem;margin-bottom:1.5rem;font-size:13.5px;}
.league-widget h3{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);margin-bottom:.5rem;}
.league-row{display:flex;justify-content:space-between;align-items:center;padding:.2rem 0;}
.league-row.leading{font-weight:700;}
.league-bar{flex:1;height:6px;background:var(--border-2);border-radius:3px;margin:0 .75rem;overflow:hidden;}
.league-bar-fill{height:100%;background:var(--accent);}

/* ---------- Skill tree ---------- */
.skill-list{display:flex;flex-direction:column;gap:.75rem;}
.skill-node{display:flex;align-items:center;gap:1rem;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1rem 1.1rem;cursor:pointer;transition:transform .1s;}
.skill-node:hover{transform:translateY(-1px);}
.skill-node.locked{opacity:.5;cursor:not-allowed;}
.skill-node.locked:hover{transform:none;}
.skill-circle{width:52px;height:52px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;position:relative;}
.skill-info{flex:1;min-width:0;}
.skill-info .label{font-weight:700;font-size:14.5px;margin-bottom:.25rem;}
.skill-crowns{font-size:13px;letter-spacing:1px;}
.skill-crowns .filled{color:var(--gold);}
.skill-crowns .empty{color:var(--border);}
.skill-due-badge{background:var(--red);color:#fff;font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 7px;flex-shrink:0;}
.skill-practice-btn,.skill-duel-btn{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--bg);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:transform .1s,background .1s;}
.skill-practice-btn:hover,.skill-duel-btn:hover{transform:scale(1.08);background:var(--border-2);}

/* ---------- Défis ---------- */
.duel-list{display:flex;flex-direction:column;gap:1.5rem;}
.duel-section h3{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);margin-bottom:.6rem;}
.duel-section-items{display:flex;flex-direction:column;gap:.6rem;}
.duel-empty{color:var(--text-3);font-size:13px;text-align:center;padding:1.5rem 0;}
.duel-item{display:flex;align-items:center;gap:.9rem;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:.85rem 1rem;}
.duel-circle{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;}
.duel-info{flex:1;min-width:0;}
.duel-info .label{font-weight:700;font-size:14px;}
.duel-info .sub{font-size:12px;color:var(--text-2);}
.duel-result-line{font-size:14px;font-weight:600;margin:.5rem 0 1.5rem;}
.duel-score-compare{display:flex;align-items:center;justify-content:center;gap:1rem;font-size:13px;color:var(--text-2);margin-bottom:.5rem;}
.duel-score-compare .win{color:var(--green-text);font-weight:800;}
.btn-small{border-radius:9px;border:none;background:var(--accent);color:#fff;font-size:12.5px;font-weight:700;padding:.55rem .9rem;cursor:pointer;flex-shrink:0;}
.btn-small.secondary{background:var(--border-2);color:var(--text-2);cursor:default;}

/* ---------- Lesson ---------- */
.lesson-topbar{display:flex;align-items:center;gap:1rem;margin-bottom:1.75rem;}
.btn-quit{background:none;border:none;font-size:20px;color:var(--text-3);cursor:pointer;line-height:1;}
.lesson-progress{flex:1;height:14px;background:var(--border-2);border-radius:7px;overflow:hidden;}
.lesson-progress-fill{height:100%;background:var(--accent);border-radius:7px;transition:width .25s;}
.lesson-hearts{font-size:16px;white-space:nowrap;}

.exercise-area{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.75rem 1.5rem;min-height:320px;display:flex;flex-direction:column;}
.ex-type-badge{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:700;margin-bottom:.6rem;}
.ex-question{font-size:16.5px;font-weight:600;margin-bottom:1.25rem;line-height:1.4;}
.ex-image{width:100%;max-height:220px;object-fit:contain;border-radius:10px;margin-bottom:1rem;background:var(--border-2);}
.ex-credit{font-size:10.5px;color:var(--text-3);margin:-.75rem 0 1rem;}

.ex-options{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem;}
.ex-option{text-align:left;padding:.85rem 1rem;border-radius:10px;border:2px solid var(--border);background:var(--bg);color:var(--text);font-size:14.5px;cursor:pointer;transition:all .12s;}
.ex-option:hover{border-color:var(--accent);}
.ex-option.selected{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, transparent);font-weight:600;}
.ex-option.correct{border-color:var(--green);background:var(--green-bg);color:var(--green-text);font-weight:700;}
.ex-option.incorrect{border-color:var(--red);background:var(--red-bg);color:var(--red-text);font-weight:700;}
.ex-option[disabled]{cursor:default;}
.ex-option .cb{display:inline-block;width:16px;}

.ex-vf-buttons{display:flex;gap:.75rem;margin-bottom:1rem;}
.ex-vf-buttons .ex-option{flex:1;text-align:center;font-weight:700;}

.ex-fill-blank{font-size:16px;line-height:1.7;margin-bottom:1.25rem;}
.ex-fill-blank input{border:none;border-bottom:2px solid var(--accent);background:transparent;font-size:16px;font-weight:700;color:var(--accent);width:180px;text-align:center;padding:.15rem;font-family:inherit;}
.ex-fill-blank input:focus{outline:none;}

.ex-sequence-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;}
.ex-seq-item{padding:.75rem 1rem;border-radius:10px;border:2px solid var(--border);background:var(--bg);cursor:pointer;font-size:14px;display:flex;align-items:center;gap:.6rem;}
.ex-seq-item .num{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:700;display:none;align-items:center;justify-content:center;flex-shrink:0;}
.ex-seq-item.chosen{opacity:.55;border-color:var(--accent);}
.ex-seq-item.chosen .num{display:flex;}

.ex-assoc{display:flex;gap:1rem;margin-bottom:1rem;}
.ex-assoc-col{flex:1;display:flex;flex-direction:column;gap:.5rem;}
.ex-assoc-item{padding:.65rem .8rem;border-radius:10px;border:2px solid var(--border);background:var(--bg);font-size:13px;cursor:pointer;text-align:left;}
.ex-assoc-item.selected{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, transparent);}
.ex-assoc-item.matched{border-color:var(--green);background:var(--green-bg);opacity:.7;cursor:default;}

.ex-flashcard{text-align:center;padding:1rem 0 1.5rem;}
.ex-flashcard .front{font-size:17px;font-weight:600;margin-bottom:1.25rem;}
.ex-flashcard .back{font-size:15px;color:var(--text-2);background:var(--border-2);border-radius:10px;padding:1rem;margin-bottom:1.25rem;text-align:left;}
.ex-flashcard .know-buttons{display:flex;gap:.75rem;}
.ex-flashcard .know-buttons[hidden]{display:none!important;}
.ex-flashcard .know-buttons button{flex:1;padding:.8rem;border-radius:10px;border:2px solid var(--border);background:var(--bg);font-weight:700;cursor:pointer;}

.ex-vignette{background:var(--border-2);border-left:3px solid var(--accent);border-radius:8px;padding:.9rem 1rem;font-size:13.5px;margin-bottom:1.1rem;color:var(--text-2);}
.ex-step-badge{font-size:11px;color:var(--accent);font-weight:700;margin-bottom:.4rem;}

.ex-spacer{flex:1;}
.ex-footer{display:flex;justify-content:flex-end;}
.btn-primary{background:var(--accent);color:#fff;border:none;border-radius:12px;padding:.85rem 1.75rem;font-size:14.5px;font-weight:700;cursor:pointer;}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;}
.btn-primary.full{width:100%;}

.feedback-banner{border-radius:12px;padding:1rem 1.1rem;margin-top:1rem;font-size:13.5px;}
.feedback-banner.correct{background:var(--green-bg);color:var(--green-text);}
.feedback-banner.incorrect{background:var(--red-bg);color:var(--red-text);}
.feedback-title{font-weight:800;font-size:14.5px;margin-bottom:.35rem;}
.feedback-steps{margin-top:.5rem;display:flex;flex-direction:column;gap:.4rem;}
.feedback-step{font-size:12.5px;padding:.4rem .6rem;border-radius:8px;background:rgba(255,255,255,.35);}

/* ---------- Recap ---------- */
.recap-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2rem 1.75rem;text-align:center;}
.recap-emoji{font-size:2.75rem;margin-bottom:.5rem;}
.recap-card h2{font-size:1.35rem;margin-bottom:1.5rem;}
.recap-stats{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1.75rem;flex-wrap:wrap;}
.recap-stat{min-width:80px;}
.recap-stat .num{font-size:1.6rem;font-weight:800;color:var(--accent);}
.recap-stat .label{font-size:11.5px;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em;}
.recap-crown-banner{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#78350f;border-radius:10px;padding:.75rem;margin-bottom:1.25rem;font-weight:700;font-size:14px;}
@media (prefers-color-scheme: dark){ .recap-crown-banner{background:linear-gradient(135deg,#4a3405,#5c4208);color:#fde68a;} }

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);background:#111827;color:#fff;padding:.75rem 1.25rem;border-radius:10px;font-size:13.5px;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:200;max-width:90vw;text-align:center;}

@media (max-width: 480px){
  .content{padding:1rem .85rem 3rem;}
  .exercise-area{padding:1.25rem 1.1rem;}
  .ex-assoc{gap:.6rem;}
}