/* 波波乐园 · 华语玩法 (types-zh.js) */
.zh-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center}
.zh-stage{position:relative;display:grid;place-items:center}
.zh-stage.two{grid-template-columns:1fr 1fr;gap:14px}
.zh-grid{width:min(100%,300px);height:auto;display:block;filter:drop-shadow(0 6px 0 rgba(43,29,20,.25))}
.zh-grid.mid{width:min(100%,200px)}
.zh-grid.mini{width:74px;filter:none}
.zh-grid.yb{width:100%}
.zg-box{fill:#fffdf6;stroke:#d84b3c;stroke-width:14}
.zg-line{fill:none;stroke:#e58b80;stroke-width:5;stroke-dasharray:22 18}
.zs{fill:#2b1d14;transition:fill .3s}
.zs.off{opacity:0}
.zs.ghost{fill:#e9dfcf}
.zs.done{fill:#2b1d14}
.zs.hot,.zs.hit{fill:#ff6a3d}
.zs.flash{animation:zhFlash .7s}
@keyframes zhFlash{30%,70%{fill:#9aa4b1}}
.zm{fill:none;stroke:#2b1d14;stroke-width:150;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.zm.on{opacity:1}
.zm.hot{stroke:#ff6a3d}
.zh-stage .zs{cursor:default}
.zh-stage svg:not(.mid) .zs{cursor:pointer}
.zh-stage svg:not(.mid) .zs:hover{fill:#7a5a3a}
.zh-stage svg .zs.ghost:hover{fill:#e9dfcf}
.zh-counter{position:absolute;top:-6px;right:calc(50% - 170px);min-width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:#ffd95e;border:4px solid #2b1d14;font:800 28px var(--f-num);box-shadow:0 4px 0 #2b1d14}
.zh-gap{position:absolute;top:8px;left:calc(50% + 100px);font:900 30px var(--f-num);color:#ff6a3d;animation:zhBob 1.2s ease-in-out infinite}
@keyframes zhBob{50%{transform:translateY(-6px)}}
.zh-load{font:600 15px var(--f-body);color:#8a7760;padding:40px}
.zh-big{font:400 160px/1 "Noto Sans SC",serif}
.zh-side{display:grid;gap:12px;align-content:center}
.zh-tip{margin:0;font:600 15px/1.5 var(--f-body);color:#6d5a43}
.zh-btn{min-height:50px;border:4px solid #2b1d14;border-radius:16px;background:#ffd95e;font:800 19px var(--f-body);cursor:pointer;box-shadow:0 5px 0 #2b1d14;color:#2b1d14}
.zh-btn:disabled{opacity:.5;cursor:default}
.zh-btn.sm{min-height:38px;font-size:15px;padding:0 12px;box-shadow:0 3px 0 #2b1d14;border-width:3px}
.zh-btn:not(:disabled):active{transform:translateY(3px);box-shadow:0 2px 0 #2b1d14}
.zh-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.zh-opts.big{grid-template-columns:repeat(3,minmax(0,1fr))}
.zh-opts.strokes{grid-template-columns:repeat(3,minmax(0,1fr))}
.zh-opt{min-height:56px;border:4px solid #2b1d14;border-radius:16px;background:#fff;font:800 22px var(--f-body);cursor:pointer;box-shadow:0 4px 0 #2b1d14;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px;color:#2b1d14;transition:transform .15s}
.zh-opt:hover{transform:translateY(-2px)}
.zh-opt.stroke b{font:800 14px var(--f-num);background:#ffe9a8;border:2px solid #2b1d14;border-radius:8px;padding:0 6px}
.zh-opt.stroke span{font:400 34px/1 "Noto Sans SC",serif}
.zh-opt.stk{flex-direction:column}
.zh-opt.stk span{font:700 13px var(--f-body);color:#6d5a43}
.zh-opt.yes{background:#dff7e7;border-color:#1f8f55}
.zh-opt.no{background:#ffe1e1;animation:zhShake .45s}
@keyframes zhShake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.zh-kind{display:flex;align-items:center;gap:10px;background:#fff;border:4px solid #2b1d14;border-radius:18px;padding:10px 14px;box-shadow:0 4px 0 #2b1d14}
.zh-kind span{font:700 15px var(--f-body);color:#6d5a43}.zh-kind b{font:400 46px/1 "ZCOOL KuaiLe",var(--f-body);color:#ff6a3d}.zh-kind small{font:400 26px "Noto Sans SC",serif;color:#8a7760}
.zh-ord{margin:0;display:grid;justify-items:center;gap:6px;background:#fff;border:3px solid #2b1d14;border-radius:18px;padding:10px;transition:background .3s}
.zh-ord.right{background:#dff7e7}
.zh-ord figcaption{display:flex;align-items:center;gap:8px}.zh-ord figcaption b{font:800 22px var(--f-num)}
.zh-seq{margin:0;min-height:20px;font:600 12px/1.4 var(--f-body);color:#6d5a43;text-align:center}
.zh-dm{display:grid;justify-items:center;gap:10px}
.zh-demo .zh-grid{width:200px}
.zh-names{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0}
.zh-names span{display:inline-flex;gap:4px;align-items:center;font:700 13px var(--f-body);background:#fff;border:2px solid #2b1d14;border-radius:10px;padding:1px 8px;animation:msPop .3s}
.zh-names span b{font:800 12px var(--f-num);color:#8a7760}
.zh-names span.hi{background:#ffe1d6;border-color:#ff6a3d}

/* pinyin */
.zh-py{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:14px}
.zh-py>.tray{max-width:100%;box-sizing:border-box;flex-wrap:wrap;justify-content:center}
.zh-pyhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}
.zh-pyhead .mt-pic{max-width:260px}
.zh-say{display:inline-flex;align-items:center;gap:8px;border:4px solid #2b1d14;border-radius:20px;background:#fff;padding:6px 16px;cursor:pointer;box-shadow:0 4px 0 #2b1d14;font:700 28px var(--f-body)}
.zh-say b{font:400 64px/1.1 "Noto Sans SC",serif}.zh-say i{font-style:normal;font-size:22px}
.zh-syl{display:flex;align-items:flex-end;gap:4px;font:600 64px/1 "Baloo 2",sans-serif;padding:18px 14px 8px;background:#fff;border:4px solid #2b1d14;border-radius:22px;box-shadow:0 5px 0 #2b1d14}
.zh-syl.eq{gap:10px;font-size:48px}.zh-syl.eq>i{font-style:normal;color:#8a7760}
.zh-let{position:relative;display:inline-grid;place-items:center;min-width:46px;padding:0 4px;border-radius:12px;transition:background .2s}
.zh-let.v{color:#d6402f}.zh-let.c{color:#2463c8}
.zh-let[data-drop].hover{background:#fff0d6}
.zh-let.nope{animation:zhShake .45s;background:#ffe1e1}
.zh-let.yes{background:#dff7e7}
.zh-let .zh-tm{position:absolute;top:-30px;left:50%;transform:translateX(-50%);font:800 40px/1 "Baloo 2";color:#ff6a3d;font-style:normal}
.zh-let.try .zh-tm{animation:zhTry .9s}
@keyframes zhTry{0%{opacity:0;transform:translate(-50%,-10px)}30%,70%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.zh-syl.done{animation:msPop .45s cubic-bezier(.3,1.6,.5,1)}
.zh-slot{display:inline-grid;place-items:center;min-width:72px;height:72px;border:4px dashed #b59a72;border-radius:14px;background:#fffaf0;color:#c9b08a}
.zh-slot.hover{border-color:#ff9f1c;background:#fff0d6}
.zh-slot.yes{border-style:solid;border-color:#2b1d14;background:#dff7e7;color:#2463c8}
.zh-res{display:inline-grid;place-items:center;min-width:110px;height:72px;border:4px solid #2b1d14;border-radius:14px;background:#fffaf0;color:#c9b08a}
.zh-res.yes{background:#dff7e7;color:#2b1d14;animation:msPop .45s cubic-bezier(.3,1.6,.5,1)}
.zh-tones .chip,.zh-fins .chip,.zh-inis .chip{display:inline-grid;justify-items:center;font:800 30px "Baloo 2",sans-serif;min-width:76px}
.zh-tone b{font-size:34px;line-height:.8}.zh-tone small{font:700 12px var(--f-body);color:#6d5a43}
.zh-tone.sel{background:#fff3c4;transform:translateY(-4px)}
.zh-contour{width:54px;height:36px}.zh-contour path{fill:none;stroke:#ff6a3d;stroke-width:5;stroke-linecap:round}
.zh-fins.done{opacity:.4;pointer-events:none}
.zh-tonepick{grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,520px)}
.zh-tonepick .zh-opt{flex-direction:column;font-size:15px}
.zh-dsyl{font:700 56px "Baloo 2",sans-serif}
.zh-dtone{display:grid;justify-items:center}.zh-dtone .zh-contour{width:90px;height:60px}.zh-dtone small{color:#6d5a43}
.zh-dch{font:400 70px/1 "Noto Sans SC",serif}

/* 汉字演变 */
.zh-yb{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.zh-yb figure{margin:0;display:grid;justify-items:center;gap:4px}
.zh-yb figcaption{font:700 12px var(--f-body);color:#8a7760}
.zh-ybst img{width:clamp(70px,11vw,110px);height:clamp(70px,11vw,110px);object-fit:contain;background:#fffdf6;border:3px solid #2b1d14;border-radius:14px;padding:4px}
.zh-ybpic .mt-pic{width:clamp(80px,12vw,120px)}
.zh-arrow{font:800 26px var(--f-num);color:#ff9f1c;font-style:normal}
.zh-ybslot{width:clamp(80px,12vw,120px);height:clamp(80px,12vw,120px);display:grid;place-items:center;border:4px dashed #ff9f1c;border-radius:16px;background:#fff7e6;font:900 40px var(--f-num);color:#ff9f1c}
.zh-ybslot.hover{background:#ffe9c2}
.zh-ybslot.yes{border-style:solid;border-color:#1f8f55;background:#fff;padding:4px}
.zh-ybword{display:flex;justify-content:center;gap:6px;font:400 44px/1 "Noto Sans SC",serif;margin:14px 0 0}
.zh-ybword span,.zh-ybblank{display:grid;place-items:center;width:66px;height:66px;background:#fff;border:3px solid #2b1d14;border-radius:14px}
.zh-ybblank{color:#ff9f1c;font-weight:900}
.zh-ybopts .chip{font:400 34px/1 "Noto Sans SC",serif;min-width:64px;justify-content:center}
.zh-ybline{display:flex;align-items:center;gap:8px}.zh-ybline img{width:70px;height:70px;object-fit:contain;border:2px solid #2b1d14;border-radius:10px;background:#fff}.zh-ybline b{font:400 64px/1 "Noto Sans SC",serif}.zh-ybline i{font-style:normal;color:#ff9f1c;font-weight:800}

/* 词语接龙 */
.zh-jl{display:grid;gap:14px;justify-items:center}
.zh-jlpath{display:flex;align-items:center;flex-wrap:wrap;gap:6px;justify-content:center;min-height:70px}
.zh-jlc{display:grid;place-items:center;width:60px;height:60px;border:4px solid #2b1d14;border-radius:50%;background:#dff7e7;font:400 32px/1 "Noto Sans SC",serif}
.zh-jlc.start{background:#ffd95e}
.zh-jlar{font-style:normal;font-weight:800;color:#ff9f1c}
.zh-jlword{margin:0;min-height:36px;font:700 26px var(--f-body);color:#1f8f55}
.zh-jlpool{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:620px}
.zh-jlb{width:70px;height:70px;border:4px solid #2b1d14;border-radius:50% 46% 52% 48%;background:#fff;font:400 32px/1 "Noto Sans SC",serif;cursor:pointer;box-shadow:0 4px 0 #2b1d14;transition:transform .15s}
.zh-jlb:hover{transform:translateY(-3px) rotate(-3deg)}
.zh-jlb.used{opacity:.25;pointer-events:none}
.zh-jlb.no{background:#ffe1e1;animation:zhShake .45s}
.zh-jlgoal{font:700 16px var(--f-body);background:#fff;border:3px dashed #b59a72;border-radius:14px;padding:6px 14px}
.zh-jlgoal.yes{border-style:solid;background:#dff7e7;animation:msPop .5s}
.zh-jlwords{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.zh-jlwords span{background:#fff;border:2px solid #2b1d14;border-radius:10px;padding:2px 10px;font-weight:700}

@media (max-width:760px){
  .zh-wrap{grid-template-columns:1fr}
  .zh-grid{width:min(100%,230px)}
  .zh-stage.two{grid-template-columns:1fr 1fr}
  .zh-grid.mid{width:100%}
  .zh-counter{right:4px}
  .zh-syl{font-size:48px}.zh-syl.eq{font-size:34px;gap:6px;padding:14px 10px 8px}
  .zh-syl.eq .zh-slot{min-width:56px;height:58px}.zh-syl.eq .zh-res{min-width:84px;height:58px}
  .zh-tones .chip,.zh-fins .chip,.zh-inis .chip{min-width:58px;font-size:26px}
  .zh-py>.zh-tones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:8px}
  .zh-tones .chip{min-width:0;padding:6px 2px}.zh-tones .zh-contour{width:44px;height:30px}
  .zh-tonepick{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.zh-gap,.zh-let.try .zh-tm{animation:none}}
/* 找别字 */
.zh-bz{display:grid;gap:14px}
.zh-bztext{margin:0;font:400 30px/2 "Noto Sans SC",serif;background:#fff;border:4px solid #2b1d14;border-radius:20px;padding:12px 18px;box-shadow:0 5px 0 #2b1d14}
.zh-bztext.sm{font-size:22px;line-height:1.7}
.zh-bzc{display:inline-block;cursor:pointer;border-radius:8px;padding:0 1px;transition:background .15s}
.zh-bzc:hover{background:#fff0d6}
.zh-bzc.sel,.zh-bzc.found{background:#ffe1d6;box-shadow:inset 0 0 0 3px #ff6a3d;border-radius:50%}
.zh-bzc.no{animation:zhShake .45s;background:#eee}
.zh-bzc.fixed{position:relative;color:#1f8f55}
.zh-bzc.fixed s{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:18px;color:#d6402f;line-height:1}
.zh-bzc.fixed b{font-weight:400;animation:msPop .4s}
.zh-bzpick{display:grid;gap:8px;justify-items:start}
.zh-bzpick .zh-opts{width:min(100%,420px)}
.zh-bzo{font:400 34px/1 "Noto Sans SC",serif}
.zh-bzdemo{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.zh-bzdemo span{font:400 28px "Noto Sans SC",serif;background:#fff;border:3px solid #2b1d14;border-radius:12px;padding:2px 12px}.zh-bzdemo s{color:#d6402f}.zh-bzdemo b{color:#1f8f55;font-weight:400}

/* stroke-writing effects: glowing brush tip, ink sparks, finish ring, stroke numbers */
.zh-brush .halo{fill:#ffd34a;opacity:.35}
.zh-brush .tip{fill:#2b1d14;stroke:#fff;stroke-width:12}
.zh-brush .glint{fill:#fff;opacity:.85}
.zh-brush.hot .halo{fill:#ff9b5a}.zh-brush.hot .tip{fill:#ff6a3d}
.zh-spark{fill:#ffc94a;transform-box:fill-box;transform-origin:center;pointer-events:none}
.zh-spark.hot{fill:#ff8a5c}
.zh-ring{fill:none;stroke:#ffb020;stroke-width:14;pointer-events:none}
.zh-num{pointer-events:none}
.zh-num circle{fill:#fff7e0;stroke:#ff7b54;stroke-width:10}
.zh-num text{font:900 66px "Baloo 2",sans-serif;fill:#e4572e}
.zs.just{animation:zhJust .6s ease-out}
@keyframes zhJust{0%{fill:#ffb020}100%{fill:#2b1d14}}
.zs.hot.just{animation:none}
@media (prefers-reduced-motion:reduce){.zs.just{animation:none}}
/* the invisible writing lines must never catch taps meant for the strokes; strokes get a slightly larger tap area */
.zm,.zh-fx,.zh-fx *{pointer-events:none}
.zh-stage svg:not(.mid) .zs{stroke:transparent;stroke-width:36;stroke-linejoin:round}