/* 拼句组件（js/ui/spellkit.js）共用样式：首页/场景课（proto/spell.css）和爱雅思/爱丽丝单词卡（m2.css）都先载入这一份，
   各自只改下面的颜色变量和外框（卡片、HUD 底色、按钮外观）。 */
:root{--kbh:0px;--sk-ink:#f3ecdc;--sk-bright:#fff6dc;--sk-soft:#e8dcb8;--sk-muted:#b9b6c9;--sk-gold:#f2c66d;--sk-green:#9fd3a4;--sk-red:#e9998a;
 --sk-slot:#f1e9d866;--sk-dash:#f1e9d840;--sk-tile:#22365ae6;--sk-tile-line:#6b7a96;--sk-piece:#1b2950;--sk-chip-line:#f1e9d833}

/* 题目 */
.sk .qsub{font-size:12px;color:var(--sk-muted);margin-top:4px}
.sk .slots{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;margin:20px 0 6px;min-height:46px;max-width:100%}
.sk .slot{min-width:2.4ch;padding:2px 3px 5px;border-bottom:2px solid var(--sk-slot);font:24px/1.25 Georgia,serif;text-align:center;color:var(--sk-ink);white-space:pre}
.sk .slot.cur{border-bottom-color:var(--sk-gold)}
.sk .slot.cur::after{content:'';display:inline-block;width:2px;height:1.05em;background:var(--sk-gold);vertical-align:-3px;margin-left:1px;animation:sk-blink 1s steps(1) infinite}
@keyframes sk-blink{50%{opacity:0}}
.sk .slot.bad{border-bottom-color:var(--sk-red);color:var(--sk-red)}.sk .slot.ok{border-bottom-color:var(--sk-green);color:var(--sk-green)}
.sk .punct{font:24px Georgia,serif;color:var(--sk-muted);margin-left:-8px}.sk .punct.lead{margin:0 -8px 0 0}
.sk .placed{display:flex;flex-wrap:wrap;gap:8px;min-height:48px;margin:18px 0 10px;padding-bottom:8px;border-bottom:2px dashed var(--sk-dash)}
.sk .placed span{font:22px Georgia,serif;color:var(--sk-green)}
.sk .tiles{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.sk .tile{border:1px solid var(--sk-tile-line);background:var(--sk-tile);border-radius:10px;padding:9px 14px;font:20px Georgia,serif;color:var(--sk-ink);min-height:46px;cursor:pointer}
.sk .tile.used{visibility:hidden}.sk .tile.shake{animation:sk-shake .35s;border-color:var(--sk-red)}
@keyframes sk-shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.sk .diff{min-height:22px;font-size:14px;color:var(--sk-red);margin-top:6px}.sk .diff b{color:var(--sk-bright);font-weight:600}
.sk .tip{display:none;font-size:14px;color:var(--sk-soft);margin-top:6px}.sk .tip.show{display:block}
.sk .ime{margin-top:8px;font-size:13px;color:var(--sk-gold);display:none}.sk .ime.show{display:block}
.sk .btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:center;align-items:center}

/* 答案页：拼好的拼块（每块一色，下面是这一块的中文；点词看音标和意思） */
.sk .rating{font:600 20px Georgia,serif;color:var(--sk-gold);text-align:center}
.sk .rating.unrated,.sk .rating.skip{color:var(--sk-muted)}
.sk .pieces{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 0;margin:22px 0 6px}
.sk .piece{position:relative;background:color-mix(in srgb,var(--c) 20%,var(--sk-piece));border:2px solid var(--c);border-radius:12px;padding:8px 14px 6px;text-align:center;margin-right:-2px;max-width:100%}
.sk .piece:not(:last-child)::after{content:'';position:absolute;right:-10px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:color-mix(in srgb,var(--c) 20%,var(--sk-piece));border:2px solid var(--c);border-left-color:transparent;border-bottom-color:transparent;transform:rotate(45deg);z-index:2}
.sk .pen{font:24px/1.3 Georgia,serif;color:var(--sk-bright);overflow-wrap:anywhere}
.sk .pw{background:none;border:0;border-bottom:1px dashed transparent;border-radius:0;padding:0 1px;min-height:0;font:inherit;color:inherit;cursor:pointer}
.sk .pw.target{color:var(--sk-gold)}.sk .pw:hover,.sk .pw.on{border-bottom-color:var(--sk-gold);color:var(--sk-gold)}
.sk .pzh{font-size:13px;color:var(--sk-soft);margin-top:2px}
.sk .wline{text-align:center;min-height:24px;font-size:13px;color:var(--sk-muted);margin:6px 0 2px}.sk .wline b{font:18px Georgia,serif;color:var(--sk-bright)}.sk .wline .ipa{color:var(--sk-muted);margin:0 4px}
.sk .ans-zh{text-align:center;color:var(--sk-soft);margin-top:6px}
.sk .bunny-tip{display:flex;align-items:center;gap:8px;margin-top:10px}.sk .bunny-tip img{width:56px;flex:none}
.sk .bunny-tip .bubble{background:#fff8e6;color:#1b2547;border-radius:14px 14px 14px 4px;padding:8px 12px;font:15px/1.5 -apple-system,"PingFang SC",sans-serif;font-style:normal;box-shadow:0 4px 12px #0003}

/* HUD：赞、进度条（连对 ≥3 变金、≥5 流光）、连对数；外框（吸顶、底色）由页面定 */
.sk-hud .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sk-hud .sp{flex:1}
.sk-score{display:inline-block;font:600 22px Georgia,serif;color:var(--sk-bright);font-variant-numeric:tabular-nums}
.sk-score.bump{animation:sk-bump .3s}
@keyframes sk-bump{50%{transform:scale(1.18);color:var(--sk-gold)}}
.sk-meter{height:6px;border-radius:6px;background:#ffffff1f;overflow:hidden;margin-top:6px}
.sk-meter i{display:block;height:100%;width:0;background:#c9d3e8;border-radius:6px;transition:width .35s}
.sk-meter.gold i{background:linear-gradient(90deg,#e8b44f,#ffe39a)}
.sk-meter.flow i{background:linear-gradient(90deg,#e8b44f,#fff4c7,#e8b44f);background-size:200% 100%;animation:sk-flow 1.2s linear infinite}
@keyframes sk-flow{to{background-position:-200% 0}}
.sk-combo{height:18px;font:600 13px Georgia,serif;color:var(--sk-gold);text-align:right;margin-top:3px}
button.sk-chip[data-sk-in],button.sk-chip[data-sk-mode]{white-space:nowrap;border:1px solid var(--sk-chip-line);background:#ffffff0d;border-radius:20px;padding:3px 10px;font-size:12px;color:var(--sk-muted);min-height:0;cursor:pointer}
button.sk-chip.on[data-sk-in],button.sk-chip.on[data-sk-mode]{background:#f2c66d26;border-color:#f2c66d88;color:var(--sk-bright)}

/* 整句弹赞（小兔竖大拇指）、飞向总数的赞 */
.sk-pop{position:fixed;left:50%;top:62%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;z-index:40;text-align:center;font:700 34px Georgia,serif;color:#fff6dc;text-shadow:0 0 18px #f2c66daa,0 3px 8px #000c;transition:transform .3s cubic-bezier(.2,1.7,.4,1),opacity .2s}
.sk-pop.on{transform:translate(-50%,-50%) scale(1);opacity:1}
.sk-pop img{display:block;width:96px;margin:0 auto -4px}.sk-pop b{display:block;font-size:30px;letter-spacing:2px}
.sk-pop small{display:block;font:600 15px -apple-system,"PingFang SC",sans-serif;color:#f2c66d;margin-top:2px}
.sk-coin{position:fixed;margin:-10px 0 0 -10px;font-size:18px;font-style:normal;line-height:1;pointer-events:none;z-index:60;transition:transform .6s cubic-bezier(.4,.1,.3,1),opacity .6s;filter:drop-shadow(0 0 6px #f3d99999)}

/* 自绘键盘（手机上不调系统键盘） */
.kb.sk-kb{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#0e1530f2;border-top:1px solid #ffffff1a;padding:6px 4px calc(6px + env(safe-area-inset-bottom));backdrop-filter:blur(8px);user-select:none;-webkit-user-select:none;touch-action:manipulation}
.kb.sk-kb[hidden]{display:none}
.kb.sk-kb .r{display:flex;justify-content:center;gap:5px;margin:5px 0}
.kb.sk-kb button{flex:1;max-width:44px;height:48px;min-height:0;border:0;border-radius:7px;background:#3a4a72;color:#fff;font:22px -apple-system,sans-serif;box-shadow:0 2px 0 #0007;padding:0}
.kb.sk-kb button:active,.kb.sk-kb button.down{background:#6b80b3;transform:translateY(1px)}
.kb.sk-kb .wide{max-width:none;flex:1.6;font-size:15px}
.kb.sk-kb .space{flex:4;max-width:none;font-size:15px}
.kb.sk-kb .go{flex:1.8;max-width:none;background:linear-gradient(#f6d58a,#e6b04e);color:#2a1d05;font-size:15px;font-weight:600}
.kb.sk-kb .apo{flex:.9}
.kb.sk-kb .num{display:none}.kb.sk-kb.digits .num{display:flex}.kb.sk-kb .num button{height:40px;font-size:19px;background:#2d3b60}
@media (min-width:900px){.sk .slot{font-size:28px}}
@media (prefers-reduced-motion:reduce){.sk *,.sk-pop,.sk-coin,.sk-score,.sk-meter i{animation:none!important;transition:none!important}}

/* 拆多细：设置条上的小面板 */
.sk-chips{display:contents}
.sk-granwrap{position:static;display:inline-flex}
/* 面板按整条设置条的宽度摆，手机上不会超出屏幕 */
:has(>.sk-chips){position:relative}
button.sk-chip[data-sk-granopen],.sk-gran button.sk-chip,.sk-gran .sk-chip.locked{white-space:nowrap;border:1px solid var(--sk-chip-line);background:#ffffff0d;border-radius:20px;padding:3px 10px;font-size:12px;color:var(--sk-muted);min-height:0;cursor:pointer}
.sk-gran button.sk-chip.on,.sk-gran .sk-chip.locked{background:#f2c66d26;border-color:#f2c66d88;color:var(--sk-bright)}
.sk-gran .sk-chip.locked{cursor:default;opacity:.8}
.sk-gran{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;display:flex;flex-wrap:wrap;gap:6px;max-width:420px;margin-left:auto;padding:10px;border-radius:12px;background:var(--sk-piece);border:1px solid var(--sk-chip-line);box-shadow:0 8px 24px #0006;text-align:left}
.sk-gran .sk-gc{display:flex;flex-wrap:wrap;gap:6px;width:100%;padding-top:6px;border-top:1px dashed var(--sk-dash)}
.sk-gran .sk-gnote{width:100%;font-size:11px;color:var(--sk-muted)}
.sk-pts{margin-left:10px;color:var(--sk-gold);font-size:.85em;font-weight:500;white-space:nowrap}
/* 星＝难度档 */
.sk-stars{display:flex;justify-content:center;gap:14px;margin:10px 0 4px}
.sk-star{display:flex;flex-direction:column;align-items:center;min-width:58px;color:var(--sk-muted)}
.sk-star i{font-style:normal;font-size:30px;line-height:1;opacity:.35}
.sk-star.on i{opacity:1;color:var(--sk-gold)}
.sk-star.new i{animation:sk-star-in .7s ease-out}
.sk-star b{font-size:12px;font-weight:600;margin-top:2px}
.sk-star span{font:600 13px Georgia,serif;color:var(--sk-bright)}
.sk-star:not(.on) span{color:var(--sk-muted)}
@keyframes sk-star-in{0%{transform:scale(.3) rotate(-30deg);opacity:0}70%{transform:scale(1.25)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.sk-star.new i{animation:none}}
/* 课程列表里的小星 */
.sk-ministars{display:inline-flex;align-items:center;gap:1px;margin-left:8px;font-size:12px;white-space:nowrap;vertical-align:middle}
.sk-ministars small{font-size:10px;color:var(--sk-muted);margin-right:3px}
.sk-ministars>span{opacity:.3}.sk-ministars>span.on{opacity:1;color:var(--sk-gold)}
.sk-ministars b{font:600 11px Georgia,serif;margin-left:4px;color:var(--sk-gold)}

/* 二期第 2 轮：影子、快捷键、生词本、纠错、学习路线 */
.sk-meter{position:relative}
.sk-ghost{position:absolute;top:-1px;bottom:-1px;width:4px;margin-left:-2px;border-radius:3px;background:#c9b3ef;box-shadow:0 0 6px #c9b3efcc;opacity:.85;transition:left .5s linear}
.sk kbd{display:inline-block;margin-left:5px;padding:0 4px;border:1px solid var(--sk-chip-line);border-radius:4px;font:11px/1.5 ui-monospace,Menlo,monospace;color:var(--sk-muted);vertical-align:1px}
.sk-keys{margin:10px auto 0;max-width:520px;font-size:12px;color:var(--sk-muted)}
.sk-keys summary{cursor:pointer;text-align:center;list-style:none}.sk-keys summary::-webkit-details-marker{display:none}
.sk-keys dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 12px;margin:8px 0 0}
.sk-keys dl div{display:flex;gap:6px;align-items:center}.sk-keys dt,.sk-keys dd{margin:0}
.sk .btn.small{padding:2px 10px;font-size:12px;min-height:0;margin-left:8px;vertical-align:1px}
.sk .sk-vocab.on{border-color:#f2c66d88;color:var(--sk-gold)}
.sk-report{text-align:center;margin-top:8px;font-size:12px}
.sk-report .linkbtn{background:none;border:0;padding:2px 4px;min-height:0;color:var(--sk-muted);text-decoration:underline;cursor:pointer;font:inherit}
.sk-rform{max-width:460px;margin:0 auto;text-align:left}.sk-rhead{color:var(--sk-soft);margin-bottom:6px}
.sk-rform .sk-chips{display:flex;flex-wrap:wrap;gap:6px}
.sk-rform button.sk-chip{border:1px solid var(--sk-chip-line);background:#ffffff0d;border-radius:20px;padding:3px 10px;font-size:12px;color:var(--sk-muted);min-height:0;cursor:pointer}
.sk-rform button.sk-chip.on{background:#f2c66d26;border-color:#f2c66d88;color:var(--sk-bright)}
.sk-rform textarea{width:100%;box-sizing:border-box;margin-top:8px;border-radius:8px;border:1px solid var(--sk-chip-line);background:#ffffff0d;color:var(--sk-ink);padding:6px 8px;font:14px/1.4 -apple-system,"PingFang SC",sans-serif}
.sk-rdone{color:var(--sk-green)}
.sk-route{margin:12px 0}.sk-route-h{font-size:13px;color:var(--sk-muted);margin-bottom:6px}
.sk-route ol{display:flex;gap:8px;overflow-x:auto;list-style:none;margin:0;padding:2px 2px 8px;scroll-snap-type:x proximity}
.sk-route li{flex:none;scroll-snap-align:start}
.sk-rnode{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:96px;padding:8px 10px;border:1px solid var(--sk-chip-line);border-radius:12px;background:#ffffff0a;color:var(--sk-ink);text-decoration:none;font-size:13px}
.sk-rnode .sk-rn{font-weight:600}.sk-rnode small{color:var(--sk-muted);font-size:11px}.sk-rnode .sk-ministars{margin-left:0}
.sk-rnode em{font-style:normal;font-size:11px;color:var(--sk-gold)}.sk-rnode em.lock{color:var(--sk-muted)}
.sk-rnode.current{border-color:#f2c66d99;box-shadow:0 0 0 1px #f2c66d55 inset}.sk-rnode.locked{opacity:.6}

/* 二期第 3 轮：错因、跟读、背景图 */
.sk-errs{text-align:center;font-size:13px;color:var(--sk-red);margin:8px 0 0}.sk-errs span{display:inline-block;margin:2px 4px;padding:1px 8px;border:1px solid color-mix(in srgb,var(--sk-red) 45%,transparent);border-radius:12px}
.sk-speak{text-align:center;margin-top:10px}.sk-listen{color:var(--sk-muted);font-size:13px}
.sk-heard{font:20px/1.5 Georgia,serif}.sk-heard .ok{color:var(--sk-green)}.sk-heard .miss{color:var(--sk-red);text-decoration:underline dotted}
.sk-hit{font-size:13px;color:var(--sk-soft);margin-top:4px}
.sk-bg{background-image:linear-gradient(#0c1330d9,#0c1330e6),var(--sk-bgimg)!important;background-size:cover!important;background-position:center!important}
button.sk-chip.bg,button.sk-chip.ksnd{white-space:nowrap;border:1px solid var(--sk-chip-line);background:#ffffff0d;border-radius:20px;padding:3px 10px;font-size:12px;color:var(--sk-muted);min-height:0;cursor:pointer}
.sk-gk-res-extra{margin:12px 0}
.sk .sk-sipa{text-align:center;font-size:13px;color:var(--sk-muted);margin-top:4px;overflow-wrap:anywhere}
/* 整句解析（拼完整句的答案页） */
.sk .sk-ana{display:flex;flex-wrap:wrap;justify-content:center;gap:22px 10px;margin:24px 0 6px}
.sk .ana-chunk{position:relative;border:2px solid var(--c);border-radius:14px;padding:16px 10px 8px;background:color-mix(in srgb,var(--c) 10%,transparent);max-width:100%}
.sk .ana-role{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--c);color:#1b2140;font-size:12px;font-weight:700;padding:1px 9px;border-radius:999px;white-space:nowrap}
.sk .ana-words{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px}
.sk .pw.ana-w{display:flex;flex-direction:column;align-items:center;gap:1px;border-bottom:0;padding:2px 2px}
.sk .ana-ipa{font-size:12px;color:var(--sk-soft);font-family:"Charis SIL","Doulos SIL","Lucida Grande",sans-serif;min-height:1.2em}
.sk .no-ipa .ana-ipa,.sk .no-ipa .ana-role{display:none}
.sk .no-ipa .ana-chunk{padding-top:8px}
.sk .ana-t{font-size:clamp(22px,4.2vw,34px);font-weight:600;line-height:1.15;padding-bottom:3px;border-bottom:3px solid var(--pc,transparent)}
.sk .ana-zh{font-size:13px;color:var(--sk-ink,inherit);opacity:.85;margin-top:3px;max-width:9em;text-align:center}
.sk .ana-pos{font-size:11px;color:var(--sk-soft)}
.sk .ana-czh{font-size:13px;color:var(--sk-soft);text-align:center;margin-top:6px;border-top:1px dashed color-mix(in srgb,var(--c) 50%,transparent);padding-top:4px}
.sk .ana-w[data-pos=n]{--pc:#6f9cf0}.sk .ana-w[data-pos=v]{--pc:#5cc28a}.sk .ana-w[data-pos=adj]{--pc:#e9a35b}.sk .ana-w[data-pos=adv]{--pc:#d887c4}
.sk .ana-w[data-pos=pron]{--pc:#e46b6b}.sk .ana-w[data-pos=prep]{--pc:#8fa3b8}.sk .ana-w[data-pos=det]{--pc:#8fa3b8}.sk .ana-w[data-pos=conj]{--pc:#b39ddb}.sk .ana-w[data-pos=num]{--pc:#e0c35a}
.sk .ana-w.target .ana-t{color:var(--sk-gold)}.sk .ana-w:hover .ana-t,.sk .ana-w.on .ana-t{color:var(--sk-gold)}
.sk .ana-ipabtn{flex-basis:100%;text-align:center;font-size:12px;opacity:.7;margin-top:-8px}
@media (max-width:560px){.sk .sk-ana{gap:20px 6px}.sk .ana-words{gap:2px 8px}.sk .ana-zh{max-width:7em}}
.sk .sk-ana~.wline{font-size:12px;opacity:.6}
/* 设置折叠芯片 */
.sk-fold{position:relative}
.sk-fold>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:999px;border:1px solid #ffffff33;font-size:13px;color:var(--sk-soft,#c9d1ee)}
.sk-fold>summary::-webkit-details-marker{display:none}
.sk-fold[open]>summary{border-color:var(--sk-gold,#f2c66d);color:var(--sk-gold,#f2c66d)}
.sk-fold>.tools-top{position:absolute;right:0;top:calc(100% + 6px);z-index:20;background:#141a3a;border:1px solid #ffffff22;border-radius:14px;padding:10px;width:max-content;max-width:min(92vw,560px);box-shadow:0 10px 30px #0008}
.sk-fold>.tools-top .sk-chips{display:flex;flex-wrap:wrap;gap:6px}