/* 霞光华文教育 · 互动故事播放器（共用样式） */
:root{
  --bg:#eef1f3; --surface:#ffffff; --surface-2:#f5f2f6; --ink:#1d2830; --muted:#5b6770; --line:#d9dee2;
  --accent:#b8406a; --accent-soft:#f6dde6; --good:#2f7d5b; --good-soft:#dcefe5; --bad:#b4472f; --bad-soft:#f7e0da;
  --gold:#e2a93b; --gold-soft:#fbefd6;
  --f-display:"ZCOOL XiaoWei","Noto Serif SC","Songti SC",serif;
  --f-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#151a1f; --surface:#1f262d; --surface-2:#262d35; --ink:#e7ecef; --muted:#a3adb5; --line:#343d46;
  --accent:#ec7fa3; --accent-soft:#3d2430; --good:#6fcf9f; --good-soft:#1f3a2e; --bad:#f09a82; --bad-soft:#40261f; --gold:#f0c060; --gold-soft:#3a3120;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#151a1f; --surface:#1f262d; --surface-2:#262d35; --ink:#e7ecef; --muted:#a3adb5; --line:#343d46;
  --accent:#ec7fa3; --accent-soft:#3d2430; --good:#6fcf9f; --good-soft:#1f3a2e; --bad:#f09a82; --bad-soft:#40261f; --gold:#f0c060; --gold-soft:#3a3120;
  color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.7;padding-inline:16px;padding-block:20px 48px}
.wrap{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.back{font-size:14px;color:var(--accent);text-decoration:none}
.back:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
header.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px}
.brand{font-size:13px;letter-spacing:.12em;color:var(--accent);font-weight:700}
h1{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,5vw,40px);line-height:1.2;margin:2px 0 0;text-wrap:balance}
.sub{color:var(--muted);font-size:14px;margin:0}
.meta{font-size:13px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}
.tag{border:1px solid var(--line);border-radius:999px;padding:1px 10px;background:var(--surface)}

.player{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px -18px rgba(20,30,40,.35)}
.stage{position:relative;aspect-ratio:16/9;max-width:100%;background:#2b3a48;overflow:hidden}
.stage svg{display:block;position:absolute;inset:0;width:100%;height:100%}
.stage svg.xin{animation:xin .9s ease-in-out both}
.stage svg.xout{animation:xout .9s ease-in-out both;pointer-events:none}
@keyframes xin{from{opacity:0}to{opacity:1}}
@keyframes xout{from{opacity:1}to{opacity:0}}
.findlayer{position:absolute;inset:0;cursor:crosshair;box-shadow:inset 0 0 0 4px rgba(242,194,48,.85);animation:findpulse 1.6s ease-in-out infinite}
@keyframes findpulse{0%,100%{box-shadow:inset 0 0 0 4px rgba(242,194,48,.85)}50%{box-shadow:inset 0 0 0 8px rgba(242,194,48,.45)}}
.stage circle.hit{fill:rgba(242,194,48,.25);stroke:#f2c230;stroke-width:5;animation:pulse2 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse2{0%,100%{stroke-width:5}50%{stroke-width:9}}
.stage circle.miss{fill:none;stroke:#d9534f;stroke-width:4;stroke-dasharray:6 5}
.kb{animation:kb 18s ease-out both;transform-box:fill-box;transform-origin:center}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.06)}}
.stage svg.in{animation:fadein .6s ease-out}
.act{position:absolute;left:12px;top:10px;background:rgba(15,22,30,.62);color:#fff;font-size:13px;padding:3px 10px;border-radius:999px;letter-spacing:.06em}
.startcover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(15,20,30,.55);color:#fff;border:0;font:inherit;cursor:pointer;width:100%}
.startcover .big{width:72px;height:72px;border-radius:50%;background:#fff;color:#27304a;display:grid;place-items:center;font-size:28px;padding-left:6px}
.startcover span{font-size:15px}
.startcover:focus-visible{outline:4px solid var(--gold);outline-offset:-6px}
.caption{min-height:92px;padding:16px 20px 12px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;flex-direction:column;gap:6px}
.caption p{margin:0;font-size:clamp(17px,2.6vw,20px);line-height:1.75;min-height:1.75em}
.caption .hint{font-size:12px;color:var(--muted);align-self:flex-end}
.dots{display:flex;gap:5px}
.dots i{width:18px;height:4px;border-radius:2px;background:var(--line)}
.dots i.on{background:var(--accent)}
mark.hl{background:var(--gold-soft);color:inherit;border-bottom:2px solid var(--gold);padding:0 2px;border-radius:2px}

.panel{padding:16px 20px 18px;display:flex;flex-direction:column;gap:12px}
.qlabel{font-size:12px;letter-spacing:.12em;color:var(--accent);font-weight:700}
.qtext{font-size:18px;font-weight:500;margin:0}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}
.opt{font:inherit;font-size:16px;text-align:left;padding:11px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink);cursor:pointer;display:flex;gap:10px;align-items:flex-start;min-width:0}
.opt b{color:var(--accent);flex:none}
.opt:hover:not(:disabled){border-color:var(--accent)}
.opt:focus-visible,.btn:focus-visible,.caption:focus-visible,.ctl:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.opt:disabled{cursor:default}
.opt.right{border-color:var(--good);background:var(--good-soft)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt.choice{background:var(--surface)}
.feedback{border-radius:10px;padding:10px 14px;font-size:15px}
.feedback.ok{background:var(--good-soft)} .feedback.no{background:var(--bad-soft)}
.feedback strong{display:block;margin-bottom:2px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{font:inherit;font-size:15px;border-radius:999px;padding:8px 18px;border:1.5px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer}
.btn.ghost{background:transparent;color:var(--accent)}

.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--surface-2);border-top:1px solid var(--line)}
.controls .row{gap:8px}
.ctl{font:inherit;font-size:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:6px 12px;cursor:pointer}
.ctl[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.score{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

.ending{display:flex;flex-direction:column;gap:10px}
.ending h3{font-family:var(--f-display);font-weight:400;font-size:28px;margin:0;color:var(--accent)}
.ending p{margin:0}
.goodline{border-left:3px solid var(--gold);padding:2px 0 2px 12px}
.sample{background:var(--gold-soft);border-radius:10px;padding:12px 16px;display:flex;flex-direction:column;gap:6px}
.sample p{text-indent:2em;line-height:1.9}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:14px;border-radius:999px;padding:2px 12px;background:var(--surface-2);border:1px solid var(--line)}
.chip.got{background:var(--accent-soft);border-color:transparent}
.chip.locked{color:var(--muted);border-style:dashed}
.small{font-size:13px;color:var(--muted)}

.tips{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.tips h2{font-family:var(--f-display);font-weight:400;font-size:24px;margin:0}
.tips ol{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:6px;max-width:65ch}
.tips li b{color:var(--accent)}

/* 点画面跳转 */
.spots{position:absolute;inset:0;background:rgba(10,15,25,.12)}
.spot{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:none;border:0;padding:0;cursor:pointer;font:inherit}
.spot .ring{width:clamp(34px,6vw,54px);height:clamp(34px,6vw,54px);border-radius:50%;border:3px solid #fff;background:rgba(242,194,48,.55);animation:ping 1.4s ease-out infinite}
.spot.frame .ring{position:absolute;inset:0;width:auto;height:auto;border-radius:6px;background:rgba(242,194,48,.08);border:3px solid rgba(242,194,48,.95)}
.spot .lab{position:relative;background:rgba(20,24,34,.82);color:#fff;font-size:clamp(11px,1.8vw,15px);line-height:1.3;padding:3px 10px;border-radius:999px;white-space:nowrap}
.spot.frame{justify-content:flex-end;padding-bottom:8px}
.spot:hover .ring,.spot:focus-visible .ring{background:rgba(242,194,48,.3)}
.spot:focus-visible{outline:none}.spot:focus-visible .ring{outline:3px solid #fff}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(242,194,48,.8)}100%{box-shadow:0 0 0 14px rgba(242,194,48,0)}}
.stage svg.zoomto{transition:transform .5s ease-in;transform:scale(1.7)}
@media (prefers-reduced-motion: reduce){.spot .ring{animation:none}.stage svg.zoomto{transition:none}}

/* 拼音 */
ruby{display:inline-flex;flex-direction:column-reverse;align-items:center;vertical-align:bottom;margin:0 .06em;line-height:1.25}
rt{display:block;font-family:var(--f-body);font-size:.5em;line-height:1.3;color:var(--muted);letter-spacing:0;font-weight:400;white-space:nowrap}
mark.hl rt{color:var(--ink)}
.hl-under.py-on mark.hl{border-bottom:0;padding:0 1px;box-shadow:inset 0 -3px 0 var(--gold)}
.py-on .caption p{line-height:2.2}
.py-on .qtext,.py-on .opt,.py-on .feedback,.py-on .ending p,.py-on .sample p,.py-on .pick span,.py-on .out p.para{line-height:2.3}
.opt b{line-height:inherit}

/* svg motion */
.rain line{stroke:#d6e6f1;stroke-width:1.6;stroke-linecap:round;opacity:.55;animation:fall .8s linear infinite}
.rain.heavy line{stroke-width:2.2;opacity:.7;animation-duration:.5s}
@keyframes fall{from{transform:translate(8px,-40px)}to{transform:translate(-14px,470px)}}
.sway{animation:sway 2.6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:translateY(0)}50%{transform:translateY(2.5px)}}
.glow{animation:pulse 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:.75;transform:scale(1.15)}}
.enter{animation:enter .9s ease-out}
@keyframes enter{from{transform:translateX(-50px);opacity:.2}to{transform:none;opacity:1}}
.bob{animation:bob 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.twinkle{animation:tw 2s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.3}50%{opacity:1}}
.streak{animation:streak 1.2s linear infinite}
@keyframes streak{from{transform:translateY(-20px)}to{transform:translateY(140px)}}
.spin{animation:spin 18s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
.grow{animation:grow 7s ease-out both;transform-box:fill-box;transform-origin:center}
@keyframes grow{from{transform:scale(.45)}to{transform:scale(1)}}
.fadeover{animation:fadeover 7s ease-out both}
@keyframes fadeover{from{opacity:0}to{opacity:1}}
.haze{animation:haze 2.2s ease-in-out infinite}
@keyframes haze{0%{transform:translateY(10px);opacity:0}40%{opacity:.6}100%{transform:translateY(-30px);opacity:0}}
.drift{animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-30px)}to{transform:translateX(40px)}}
.blow{animation:blow 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}
@keyframes blow{0%,100%{transform:skewX(-4deg)}50%{transform:skewX(-16deg)}}
.flash{animation:flash 5s linear infinite}
@keyframes flash{0%,86%,90%,94%,100%{opacity:0}88%,92%{opacity:.85}}
.flap{animation:flap .35s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes flap{from{transform:scaleX(1)}to{transform:scaleX(.3)}}
.flutter{animation:flutter 6s ease-in-out infinite alternate}
@keyframes flutter{0%{transform:translate(0,0)}33%{transform:translate(40px,-25px)}66%{transform:translate(80px,10px)}100%{transform:translate(120px,-15px)}}
.drip{animation:drip 1.6s ease-in infinite}
@keyframes drip{0%{transform:translateY(0);opacity:1}100%{transform:translateY(22px);opacity:0}}
.tear{animation:drip 1.2s ease-in infinite}
.rise{animation:fadeover 3s ease-out both}
/* 人物动作 */
.idle,.walk,.run,.hop,.shiver,.sob,.nod,.blink{transform-box:fill-box}
.idle{animation:idle 2.6s ease-in-out infinite;transform-origin:bottom center}
@keyframes idle{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.018)}}
.walk{animation:walk .42s ease-in-out infinite alternate;transform-origin:bottom center}
@keyframes walk{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-6px) rotate(2deg)}}
.run{animation:run .26s ease-in-out infinite alternate;transform-origin:bottom center}
@keyframes run{from{transform:translateY(0) rotate(4deg)}to{transform:translateY(-9px) rotate(8deg)}}
.hop{animation:hop .9s ease-in-out infinite;transform-origin:bottom center}
@keyframes hop{0%,55%,100%{transform:translateY(0)}25%{transform:translateY(-22px)}}
.shiver{animation:shiver .1s linear infinite alternate}
@keyframes shiver{from{transform:translateX(-1.8px)}to{transform:translateX(1.8px)}}
.sob{animation:sob .45s ease-in-out infinite alternate;transform-origin:bottom center}
@keyframes sob{from{transform:translateY(0)}to{transform:translateY(2.5px) scaleY(.99)}}
.nod{animation:nod 1.4s ease-in-out infinite;transform-origin:bottom center}
@keyframes nod{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}
.sway2{animation:sway2 2s ease-in-out infinite;transform-origin:bottom center;transform-box:fill-box}
@keyframes sway2{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.blink{animation:blink 4.2s infinite;transform-origin:center}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.stroll{animation:stroll 4.5s ease-out both}
@keyframes stroll{from{transform:translateX(-260px)}to{transform:translateX(0)}}
.dash{animation:stroll 2.2s ease-out both}
.comein{animation:comein 1.6s ease-out both}
@keyframes comein{from{transform:translateX(220px)}to{transform:translateX(0)}}
@keyframes fadein{from{opacity:.3}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .rain line,.sway,.glow,.enter,.bob,.idle,.walk,.run,.hop,.shiver,.sob,.nod,.sway2,.blink,.stroll,.dash,.comein,.twinkle,.streak,.spin,.haze,.drift,.blow,.flash,.flap,.flutter,.drip,.tear,.stage svg.in,.stage svg.xin,.stage svg.xout,.kb,.findlayer,.stage circle.hit{animation:none!important}
  .grow,.fadeover,.rise{animation-duration:.01s!important}
}