/* ============================================================
   HSK 1–9 · Flashcards chinois — thème "encre & papier xuan"
   ============================================================ */
:root{
  --ink:#151a24;          /* encre de chine, bureau sombre */
  --ink-2:#1e2530;
  --ink-3:#28303d;
  --paper:#f2ede1;        /* papier xuan */
  --paper-2:#e9e2d2;
  --grid:#d8b8a8;         /* lignes du mizige */
  --cinabre:#c8372d;      /* rouge sceau */
  --cinabre-2:#a52a22;
  --jade:#3e8e7e;
  --gold:#c9a35c;
  --tx:#ece7db;
  --tx-dim:#9aa3b2;
  --hanzi-font:"Kaiti SC","STKaiti","KaiTi","BiauKai","AR PL UKai CN","Noto Serif SC",serif;
  --ui-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--ink);color:var(--tx);font-family:var(--ui-font);min-height:100vh}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- entête ---------- */
header{max-width:900px;margin:0 auto;padding:22px 16px 8px;display:flex;align-items:center;gap:14px}
.seal{width:52px;height:52px;background:var(--cinabre);border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:var(--hanzi-font);font-size:26px;color:var(--paper);box-shadow:inset 0 0 0 2px rgba(242,237,225,.55), 0 2px 10px rgba(0,0,0,.4);
  transform:rotate(-3deg);flex-shrink:0;line-height:1}
.head-txt{flex:1;min-width:0}
header h1{font-size:20px;font-weight:600;letter-spacing:.02em}
header p{font-size:12.5px;color:var(--tx-dim);margin-top:2px}
.global-stats{font-size:12px;color:var(--jade);font-weight:700;white-space:nowrap}

/* ---------- niveaux ---------- */
.levels{max-width:900px;margin:14px auto 0;padding:0 16px;display:flex;gap:6px;flex-wrap:wrap}
.lv{padding:7px 13px;border-radius:999px;background:var(--ink-2);color:var(--tx-dim);font-size:13.5px;font-weight:600;
  border:1px solid var(--ink-3);transition:all .15s;position:relative}
.lv:hover{color:var(--tx)}
.lv.on{background:var(--cinabre);color:var(--paper);border-color:var(--cinabre)}
.lv .lv-done{font-size:10px;color:var(--jade);margin-left:5px;font-weight:700}
.lv.on .lv-done{color:var(--paper)}

/* ---------- modes ---------- */
.modes{max-width:900px;margin:12px auto 0;padding:0 16px;display:flex;gap:18px;border-bottom:1px solid var(--ink-3)}
.mode{padding:9px 2px;font-size:14px;color:var(--tx-dim);border-bottom:2px solid transparent;font-weight:600}
.mode.on{color:var(--tx);border-bottom-color:var(--gold)}

main{max-width:900px;margin:0 auto;padding:18px 16px 60px}

/* ---------- flashcard : grille mizige ---------- */
.fc-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.progress{width:100%;max-width:460px;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--tx-dim)}
.bar{flex:1;height:5px;background:var(--ink-3);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--jade);border-radius:99px;transition:width .25s}

.card{width:min(460px,100%);aspect-ratio:1/1.08;perspective:1200px;cursor:pointer}
.card-inner{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.card.flipped .card-inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;background:var(--paper);color:var(--ink);
  box-shadow:0 10px 34px rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;overflow:hidden}
.face.back{transform:rotateY(180deg);background:var(--paper-2)}

.mizige{position:absolute;inset:0;opacity:.5;pointer-events:none}
.card-seal{position:absolute;top:14px;right:14px;background:var(--cinabre);color:var(--paper);font-size:11px;font-weight:700;
  padding:5px 8px;border-radius:5px;transform:rotate(3deg);letter-spacing:.05em;box-shadow:inset 0 0 0 1.5px rgba(242,237,225,.5)}
.fc-hanzi{font-family:var(--hanzi-font);font-size:clamp(64px,19vw,110px);line-height:1.15;z-index:1;text-align:center;word-break:keep-all}
.fc-hanzi.long{font-size:clamp(38px,10vw,60px)}
.fc-hint{z-index:1;margin-top:10px;font-size:12px;color:#8a8272;letter-spacing:.04em}
.fc-pinyin{z-index:1;font-size:clamp(26px,7vw,38px);color:var(--cinabre-2);font-weight:600;text-align:center}
.fc-fr{z-index:1;font-size:clamp(18px,5vw,24px);margin-top:12px;text-align:center;color:#2c2417;font-weight:500;padding:0 10px}
.fc-small-hanzi{z-index:1;font-family:var(--hanzi-font);font-size:30px;margin-top:16px;color:#6b6252}

.fc-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn{padding:10px 16px;border-radius:9px;background:var(--ink-2);border:1px solid var(--ink-3);font-size:14px;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;transition:all .15s;color:var(--tx)}
.btn:hover{background:var(--ink-3)}
.btn.red{background:var(--cinabre);border-color:var(--cinabre);color:var(--paper)}
.btn.red:hover{background:var(--cinabre-2)}
.btn.green{background:var(--jade);border-color:var(--jade);color:#f0faf7}
.btn.ghost{background:transparent}
.btn.small{font-size:12.5px;padding:8px 12px}
.judge{display:flex;gap:10px}
.done-msg{text-align:center;padding:40px 20px}
.done-msg .big{font-family:var(--hanzi-font);font-size:64px;color:var(--gold);margin-bottom:12px}
.done-msg p{color:var(--tx-dim);margin:10px 0 20px}

/* ---------- liste ---------- */
.list-tools{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.search{flex:1;min-width:180px;padding:10px 14px;border-radius:9px;background:var(--ink-2);border:1px solid var(--ink-3);color:var(--tx);font-size:14px}
.search::placeholder{color:var(--tx-dim)}
.count{font-size:12.5px;color:var(--tx-dim)}
.wlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.wrow{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:11px;padding:13px 14px;display:flex;align-items:center;gap:12px}
.wrow.known{border-color:var(--jade)}
.wrow .hz{font-family:var(--hanzi-font);font-size:30px;min-width:52px;color:var(--paper)}
.wrow .meta{flex:1;min-width:0}
.wrow .py{color:var(--gold);font-size:14px;font-weight:600}
.wrow .fr{color:var(--tx-dim);font-size:13px;margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.wrow .mini{display:flex;flex-direction:column;gap:6px}
.mini button{width:34px;height:34px;border-radius:8px;background:var(--ink-3);font-size:15px;display:flex;align-items:center;justify-content:center}
.mini button:hover{background:var(--cinabre)}
.lvl-tag{font-size:10px;color:var(--tx-dim);border:1px solid var(--ink-3);padding:2px 6px;border-radius:4px;margin-top:4px;display:inline-block}
.known-tag{font-size:10px;color:var(--jade);border:1px solid var(--jade);padding:2px 6px;border-radius:4px;margin-top:4px;margin-left:4px;display:inline-block;font-weight:700}

/* ---------- règles des traits ---------- */
.rules{display:grid;gap:12px;max-width:640px;margin:0 auto}
.rule{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:11px;padding:16px;display:flex;gap:16px;align-items:center}
.rule .ex{font-family:var(--hanzi-font);font-size:42px;color:var(--gold);min-width:56px;text-align:center}
.rule h3{font-size:15px;margin-bottom:4px}
.rule p{font-size:13.5px;color:var(--tx-dim);line-height:1.5}
.rules-intro{max-width:640px;margin:0 auto 16px;font-size:14px;color:var(--tx-dim);line-height:1.6}

/* ---------- modal tracé ---------- */
.modal{position:fixed;inset:0;background:rgba(10,13,18,.82);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal.open{display:flex}
.mbox{background:var(--paper);color:var(--ink);border-radius:16px;padding:22px;max-width:420px;width:100%;position:relative;max-height:92vh;overflow-y:auto}
.mbox h2{font-size:16px;color:#2c2417;margin-bottom:4px}
.mbox .sub{font-size:13px;color:#8a8272;margin-bottom:14px}
.mclose{position:absolute;top:10px;right:12px;font-size:22px;color:#8a8272;width:36px;height:36px}
.char-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.char-tab{font-family:var(--hanzi-font);font-size:22px;width:44px;height:44px;border-radius:9px;background:#e4dcc8;border:1px solid var(--grid)}
.char-tab.on{background:var(--cinabre);color:var(--paper);border-color:var(--cinabre)}
.writer-frame{width:280px;height:280px;margin:0 auto;position:relative;background:#faf6ec;border:2px solid var(--grid);border-radius:8px}
.writer-frame svg.gridlines{position:absolute;inset:0}
#writerTarget{position:relative;z-index:1}
.mactions{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.mbtn{padding:9px 14px;border-radius:8px;font-size:13.5px;font-weight:600;background:#2c2417;color:var(--paper)}
.mbtn.red{background:var(--cinabre)}
.mbtn.outline{background:transparent;border:1.5px solid #2c2417;color:#2c2417}
.werr{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;text-align:center;padding:16px;z-index:2}
.werr .big{font-family:var(--hanzi-font);font-size:120px;color:#2c2417}
.werr p{font-size:12px;color:#8a8272}
.quiz-msg{text-align:center;font-size:13px;color:var(--jade);font-weight:600;margin-top:8px;min-height:18px}

@media (prefers-reduced-motion: reduce){
  .card-inner{transition:none}
  .bar i{transition:none}
}
@media (max-width:520px){
  .rule .ex{font-size:32px;min-width:44px}
  .global-stats{display:none}
}

/* ---------- options de session (v2) ---------- */
.sess-opts{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;
  font-size:13px;color:var(--tx-dim);width:100%;max-width:460px}
.sess-opts label{display:inline-flex;align-items:center;gap:6px}
.sel{background:var(--ink-2);color:var(--tx);border:1px solid var(--ink-3);border-radius:8px;
  padding:6px 8px;font-size:13px;font-family:inherit}
.chk input{accent-color:var(--cinabre);width:15px;height:15px}
.fc-wrap-inner{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.btn.more{grid-column:1/-1;justify-content:center;margin-top:4px}


/* ---------- animation traits + entraînement tracé ---------- */
#writerTarget{width:100%;height:100%;position:relative;z-index:1}
#writerTarget svg{width:100%;height:100%;display:block}
.native-writer{position:absolute;inset:0}
.native-outline{fill:#d8cdb4;opacity:.55}
.native-fill{fill:#2c2417;transition:opacity .16s ease}
.native-median{fill:none;stroke:#c8372d;stroke-width:56;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.stroke-num{font-family:var(--ui-font);font-size:44px;font-weight:800;fill:#c8372d;paint-order:stroke;stroke:#faf6ec;stroke-width:10;transition:opacity .16s ease;pointer-events:none}
.native-writer.guide-hidden .native-outline,
.native-writer.guide-hidden .native-fill,
#writerTarget.guide-hidden svg:not(.native-writer){opacity:.12}
#traceCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;touch-action:none;border-radius:6px}
#traceCanvas.active{cursor:crosshair;pointer-events:auto}
.trace-tools{display:none;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.trace-tools.open{display:flex}
.quiz-msg.err{color:#c8372d}
.no-char{font-size:12px;color:#8a8272}
@media (max-width:520px){
  .writer-frame{width:min(280px,86vw);height:min(280px,86vw)}
}

/* ---------- mémorisation active et correction du retournement ---------- */
.card,
.card-inner,
.face{
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
}
.face{
  -webkit-backface-visibility:hidden !important;
  backface-visibility:hidden !important;
  visibility:visible;
}
.face.front{
  -webkit-transform:rotateY(0deg) translateZ(1px);
  transform:rotateY(0deg) translateZ(1px);
}
.face.back{
  -webkit-transform:rotateY(180deg) translateZ(1px);
  transform:rotateY(180deg) translateZ(1px);
}
.card.flipped .face.front{pointer-events:none}
.card:not(.flipped) .face.back{pointer-events:none}
.fc-small-hanzi{display:none !important}

.memory-method{width:100%;max-width:760px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.memory-method article{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:11px;padding:13px 14px;display:flex;flex-direction:column;gap:5px}
.memory-method strong{font-size:13.5px;color:var(--gold)}
.memory-method span{font-size:12.5px;line-height:1.45;color:var(--tx-dim)}
.memory-back{z-index:1;width:min(340px,92%);margin-top:20px;display:flex;flex-direction:column;gap:7px}
.memory-back label{font-size:12px;font-weight:700;color:#6b6252}
.memory-back textarea{width:100%;resize:none;border:1px solid #cdbfa7;border-radius:9px;background:#faf6ec;color:#2c2417;padding:10px;font:13px/1.4 var(--ui-font)}
.consolidation-note{font-size:11.5px;line-height:1.4;color:#7c725f;text-align:center}
.review-help{font-size:12px;color:var(--tx-dim);min-height:18px;text-align:center}
.srs-judge{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(680px,100%)}
.btn.srs{justify-content:center;flex-direction:column;gap:2px;padding:10px 12px}
.btn.srs small{font-size:10px;font-weight:500;opacity:.76}
.btn.srs.hard{background:#8b622c;border-color:#8b622c}
.btn.srs.easy{background:#326d88;border-color:#326d88}
.btn.srs:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.5)}
@media(max-width:650px){
  .memory-method{grid-template-columns:1fr}
  .srs-judge{grid-template-columns:repeat(2,minmax(0,1fr))}
}