/* ============================================================
   笔画顺序 bishun / 偏旁部首 pianpang（改版）
   样式照抄功能原型 prototype.html，链接于 style.css 之后
   ============================================================ */

/* ---------- Hero ---------- */
.hero .zh{opacity:.85;font-size:.92rem;}
.hero .pill{display:inline-block;background:rgba(255,255,255,.16);border-radius:999px;padding:3px 12px;font-size:.78rem;margin-bottom:10px;letter-spacing:.4px;}

/* ---------- generic cards / steps ---------- */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
.info-card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);}
.info-card .ico{width:38px;height:38px;border-radius:10px;background:#fdf1dc;color:var(--red-dark);display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.info-card h3{color:var(--red-dark);font-size:1.02rem;margin-bottom:4px;}
.info-card p{font-size:.9rem;color:var(--ink);}
.info-card .zh{color:var(--muted);font-size:.82rem;}

/* ---------- 8 strokes grid ---------- */
.stroke-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
.stroke-card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;gap:14px;align-items:center;cursor:pointer;transition:.12s;box-shadow:var(--shadow);font-family:inherit;}
.stroke-card:hover{transform:translateY(-2px);border-color:var(--red);}
.stroke-glyph{flex:0 0 56px;width:56px;height:56px;border-radius:12px;background:#fdf1dc;color:var(--red-dark);display:flex;align-items:center;justify-content:center;}
.stroke-glyph svg{width:40px;height:40px;}
.stroke-info h3{font-size:.98rem;color:var(--red-dark);}
.stroke-info .py{color:var(--red);font-size:.82rem;font-weight:600;}
.stroke-info .en{color:var(--muted);font-size:.82rem;}
.stroke-info .demo{margin-top:5px;font-size:.8rem;}
.stroke-info .demo b{font-size:1.05rem;}
.go-arrow{margin-left:auto;color:var(--gold);flex:0 0 auto;}

/* ---------- 笔画例字演示弹窗 ---------- */
.demo-mask{display:none;position:fixed;inset:0;z-index:1000;background:rgba(35,18,18,.55);align-items:center;justify-content:center;padding:20px;}
.demo-mask.show{display:flex;}
.demo-modal{position:relative;background:var(--card);border-radius:18px;max-width:580px;width:100%;max-height:92vh;overflow:auto;padding:24px 26px;box-shadow:0 24px 60px rgba(0,0,0,.32);}
.demo-close{position:absolute;top:12px;right:14px;width:36px;height:36px;border:none;border-radius:50%;background:#f3ece0;color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer;transition:.12s;font-family:inherit;}
.demo-close:hover{background:var(--red);color:#fff;}
.demo-head{display:flex;gap:14px;align-items:center;margin-bottom:16px;padding-right:40px;}
.demo-head .stroke-glyph{flex:0 0 54px;width:54px;height:54px;}
.demo-head h3{font-size:1.25rem;color:var(--red-dark);}
.demo-head .demo-en{color:var(--muted);font-size:.86rem;margin-top:3px;}
.demo-stage{display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:center;}
.demo-grid{position:relative;flex:0 0 auto;width:240px;height:240px;border:2px solid var(--line);border-radius:12px;background:#fffdf8;
  background-image:linear-gradient(var(--line),var(--line)),linear-gradient(90deg,var(--line),var(--line));
  background-size:100% 1px,1px 100%;background-position:center;background-repeat:no-repeat;}
#demo-target{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
#demo-target svg{display:block;}
.demo-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.85rem;pointer-events:none;background:rgba(255,253,248,.85);}
.demo-meta{flex:1;min-width:200px;}
.demo-charline{font-size:1rem;color:var(--muted);display:flex;align-items:center;flex-wrap:wrap;gap:4px;}
.demo-charline b{font-size:1.9rem;color:var(--red-dark);line-height:1;margin-right:4px;}
.demo-speak{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-left:6px;border:1.5px solid var(--line);border-radius:50%;background:#fff;color:var(--red);cursor:pointer;transition:.12s;}
.demo-speak:hover{border-color:var(--red);background:#fdf1dc;}
.demo-hint{margin-top:12px;font-size:.88rem;line-height:1.55;color:var(--ink);background:#fdf1dc;border-radius:10px;padding:10px 13px;}
.demo-hint b{color:var(--red);}
.demo-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:20px;}
.demo-actions svg{flex:0 0 auto;}
@media(max-width:560px){
  .demo-modal{padding:20px 18px;}
  .demo-stage{flex-direction:column;}
  .demo-grid{width:208px;height:208px;}
  .demo-meta{width:100%;}
}
@media(max-height:720px){
  .demo-modal{padding:16px 20px;}
  .demo-head{margin-bottom:10px;}
  .demo-head .stroke-glyph{flex-basis:44px;width:44px;height:44px;}
  .demo-head .stroke-glyph svg{width:32px;height:32px;}
  .demo-grid{width:188px;height:188px;}
  .demo-hint{margin-top:8px;padding:8px 11px;font-size:.84rem;}
  .demo-actions{margin-top:12px;}
}

/* ---------- rules list ---------- */
.rule-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.rule-card{background:var(--card);border:1.5px solid var(--line);border-left:5px solid var(--gold);border-radius:var(--radius);padding:14px 16px;cursor:pointer;transition:.12s;display:flex;align-items:center;gap:12px;font-family:inherit;}
.rule-card:hover{border-color:var(--red);background:#fffdf8;}
.rule-no{width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 30px;}
.rule-txt h3{font-size:.95rem;color:var(--red-dark);}
.rule-txt .zh{font-size:.8rem;color:var(--muted);}
.rule-char{margin-left:auto;font-size:2rem;color:var(--red-dark);}

/* ---------- Practice lab ---------- */
.lab{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;}
.lab-main{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;}
.lab-canvas-wrap{flex:0 0 auto;}
.grid-box{position:relative;width:280px;height:280px;border:2px solid var(--line);border-radius:12px;background:#fffdf8;
  background-image:linear-gradient(var(--line),var(--line)),linear-gradient(90deg,var(--line),var(--line));
  background-size:100% 1px,1px 100%; background-position:center; background-repeat:no-repeat;}
#writer-target{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
#writer-target svg{display:block;}
.writer-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.85rem;pointer-events:none;}
.lab-side{flex:1;min-width:260px;}
.lab-char-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:2px;}
.lab-char-head .big{font-size:2.6rem;color:var(--red-dark);line-height:1;}
.lab-py{font-size:1.3rem;color:var(--red);font-weight:700;}
.lab-en{font-size:1rem;color:var(--ink);margin-bottom:4px;}
.lab-meta{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px;}
.tag{font-size:.78rem;border:1.5px solid var(--line);border-radius:999px;padding:3px 11px;color:var(--muted);background:#fff;}
.tag b{color:var(--red-dark);}
.modes{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.mode-btn{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;font-size:.92rem;cursor:pointer;transition:.12s;color:var(--ink);font-family:inherit;}
.mode-btn svg{width:16px;height:16px;}
.mode-btn:hover{border-color:var(--red);}
.mode-btn.on{background:var(--red);border-color:var(--red);color:#fff;font-weight:600;}
.mode-btn.on .mode-sub{color:rgba(255,255,255,.8);}
.mode-sub{font-size:.74rem;color:var(--muted);}
.lab-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.icon-btn{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--red-dark);transition:.12s;}
.icon-btn:hover{border-color:var(--red);background:#fdeeee;}
.icon-btn svg{width:19px;height:19px;}
.nav-word{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 18px;cursor:pointer;font-size:.9rem;font-family:inherit;}
.nav-word:hover{border-color:var(--red);}
.progress-line{font-size:.88rem;color:var(--muted);min-height:22px;margin-bottom:4px;}
.progress-line b{color:var(--red-dark);}
.feedback{min-height:24px;font-size:.92rem;font-weight:600;}
.feedback.ok{color:var(--green);} .feedback.err{color:var(--red);}
.mastered-badge{display:none;align-items:center;gap:6px;background:#f0f9f3;border:1px solid var(--green);color:var(--green);border-radius:999px;padding:4px 12px;font-size:.82rem;font-weight:600;}
.mastered-badge.show{display:inline-flex;}

/* char picker */
.picker{margin-top:20px;border-top:1.5px dashed var(--line);padding-top:18px;}
.picker-group{margin-bottom:12px;}
.picker-label{font-size:.82rem;color:var(--muted);margin-bottom:7px;font-weight:600;}
.picker-chips{display:flex;flex-wrap:wrap;gap:7px;}
.pick{width:46px;height:46px;border:1.5px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.12s;font-family:inherit;}
.pick .c{font-size:1.45rem;color:var(--red-dark);line-height:1;}
.pick .n{position:absolute;top:2px;right:4px;font-size:.6rem;color:var(--muted);}
.pick:hover{border-color:var(--red);transform:translateY(-1px);}
.pick.on{background:var(--red);border-color:var(--red);}
.pick.on .c{color:#fff;} .pick.on .n{color:rgba(255,255,255,.8);}
.pick.done{border-color:var(--green);}
.pick.done .c{color:var(--green);}
.pick.done.on .c{color:#fff;}
.pick.done::after{content:"";position:absolute;top:-5px;right:-5px;width:14px;height:14px;border-radius:50%;background:var(--green);border:2px solid var(--card);}

/* ---------- RADICALS ---------- */
.dissector{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;}
.dissect-select{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;}
.ds-btn{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:8px 14px;cursor:pointer;font-size:1.15rem;color:var(--red-dark);transition:.12s;font-family:inherit;}
.ds-btn small{display:block;font-size:.62rem;color:var(--muted);}
.ds-btn:hover{border-color:var(--red);}
.ds-btn.on{background:var(--red);border-color:var(--red);color:#fff;}
.ds-btn.on small{color:rgba(255,255,255,.85);}
.dissect-stage{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;min-height:210px;}
.part{width:150px;border-radius:14px;padding:18px 14px;text-align:center;transition:transform .5s ease,opacity .5s;}
.part .role{font-size:.7rem;letter-spacing:1px;font-weight:700;border-radius:999px;padding:2px 10px;display:inline-block;margin-bottom:8px;}
.part .glyph{font-size:4.4rem;line-height:1.1;color:var(--ink);}
.part .nm{font-size:.95rem;margin-top:4px;}
.part .clue{font-size:.82rem;color:var(--muted);margin-top:3px;min-height:20px;}
.part-meaning{background:#fdf6e3;border:2px solid var(--gold);}
.part-meaning .role{background:var(--gold);color:#fff;}
.part-sound{background:#f5f3ef;border:2px solid var(--line);}
.part-sound .role{background:var(--muted);color:#fff;}
.dissect-op{font-size:1.8rem;color:var(--gold);font-weight:700;}
.dissect-eq{font-size:1.8rem;color:var(--muted);}
.part-result{background:var(--red);border:2px solid var(--red);width:150px;border-radius:14px;padding:18px 14px;text-align:center;color:#fff;}
.part-result .glyph{color:#fff;}
.part-result .nm{font-size:.95rem;} .part-result .clue{color:rgba(255,255,255,.85);}
.dissect-actions{text-align:center;margin-top:20px;}
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;border:none;border-radius:999px;padding:11px 22px;font-size:.95rem;font-weight:600;cursor:pointer;transition:.12s;font-family:inherit;}
.btn-primary:hover{background:var(--red-dark);}
.btn-primary svg{width:17px;height:17px;}
.dissect-hint{text-align:center;color:var(--muted);font-size:.82rem;margin-top:10px;}
.dissect-stage .part,.dissect-stage .dissect-op,.dissect-stage .dissect-eq{transition:transform .45s ease,opacity .45s ease;}
.part{cursor:pointer;}
.dissect-stage.split .part-meaning{transform:translateX(-20px);opacity:.5;}
.dissect-stage.split .part-sound{transform:translateX(20px);opacity:.5;}
.dissect-stage.split .dissect-op,.dissect-stage.split .dissect-eq{opacity:.15;}
.dissect-stage.split .part-result{opacity:.22;transform:scale(.9);transition:transform .45s ease,opacity .45s ease;}

/* position map */
.posmap{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.pos-btn{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font-size:.88rem;cursor:pointer;transition:.12s;font-family:inherit;}
.pos-btn:hover{border-color:var(--red);}
.pos-btn.on{background:var(--red-dark);border-color:var(--red-dark);color:#fff;}

.rad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;}
.rad-card{background:var(--card);border:1.5px solid var(--line);border-left:5px solid var(--gold);border-radius:var(--radius);padding:14px 16px;display:flex;gap:13px;align-items:flex-start;box-shadow:var(--shadow);}
.rad-glyph{flex:0 0 52px;width:52px;height:52px;border-radius:12px;background:#fdf1dc;color:var(--red-dark);font-size:1.9rem;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.rad-glyph:hover{background:var(--gold);color:#fff;}
.rad-info{min-width:0;flex:1;}
.rad-info h3{font-size:.98rem;color:var(--red-dark);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pos-chip{font-size:.62rem;font-weight:700;letter-spacing:.4px;background:#f5f3ef;color:var(--muted);border-radius:5px;padding:1px 6px;text-transform:uppercase;}
.rad-en{color:var(--muted);font-size:.78rem;margin-bottom:5px;}
.rad-tip{font-size:.82rem;line-height:1.5;margin-bottom:8px;}
.rad-examples{display:flex;flex-wrap:wrap;gap:6px;}
.rad-ex{border:1.5px solid var(--line);background:#fffdf8;border-radius:8px;padding:3px 9px;cursor:pointer;font-size:.92rem;display:inline-flex;align-items:baseline;gap:5px;font-family:inherit;color:var(--ink);}
.rad-ex b{color:var(--red-dark);font-size:1.02rem;}
.rad-ex small{color:var(--muted);font-size:.7rem;}
.rad-ex:hover{border-color:var(--red);background:#fdeeee;}

@media (max-width:720px){
  body{font-size:15px;}
  .info-card p,.section-sub,.stroke-info .demo,.rad-tip,.lab p{font-size:.88rem;}
  .grid-box{width:240px;height:240px;margin:0 auto;}
  .lab-canvas-wrap{width:100%;}
  .part,.part-result{width:130px;}
}