@import url("cutscene.css");
:root {
  --ink: #3b2f3d;
  --soft: #8a7a8c;
  --paper: #fffaf4;
  --pink: #ee5f93;
  --pink-l: #ffe3ee;
  --gold: #f2b21b;
  --gold-l: #fff1c4;
  --line: #f0dfe6;
  --accent: #ee5f93;
  --good: #2fae6e;
  --bad: #e2574c;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); }
body { font-size: 20px; line-height: 1.5; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
h1, h2, h3 { margin: 0; }

/* 批注组件只给家长评审用：地址后面加 ?review 才显示 */
body:not(.review) .hna-fab, body:not(.review) .hna-panel { display: none !important; }

.screen {
  min-height: 100vh; min-height: 100dvh;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: flex; flex-direction: column;
  animation: fadein .3s ease;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 通用按钮 ---------- */
.big { font-size: 26px; font-weight: 800; padding: 16px 38px; border-radius: 999px; border: 0; }
.primary { background: var(--accent); color: #fff; box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 70%, #000 30%), 0 10px 24px rgba(0,0,0,.12); }
.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 70%, #000 30%); }
.ghost { background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 12px 24px; font-size: 20px; font-weight: 700; }
.link { background: none; border: 0; color: var(--soft); font-size: 17px; text-decoration: underline; padding: 8px; }
.title-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
a.link { display: inline-block; font-family: inherit; }
.pill { background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 8px 18px; font-size: 18px; font-weight: 700; white-space: nowrap; }
.row-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

.bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bar h2 { font-size: 22px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--line); background: #fff; font-size: 22px; flex: none; }
.count { font-size: 16px; color: var(--soft); white-space: nowrap; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 17px; font-weight: 700; border: 2px solid transparent; }
.chip.grey { background: #f1eef1; color: #a79ea8; }
.chip.lv1 { background: var(--pink-l); color: #c23c70; }
.chip.lv2 { background: #e3eeff; color: #3563c4; border-color: #9dbcf2; }
.chip.gold { background: var(--gold-l); color: #9a6a00; border-color: var(--gold); }

.st { color: #e6dde3; font-size: 22px; }
.st.on { color: var(--gold); }

/* ---------- 标题 ---------- */
.title { align-items: center; justify-content: center; text-align: center; gap: 10px; background: linear-gradient(180deg, #fff0f6 0%, var(--paper) 70%); position: relative; overflow: hidden; }
.title h1 { font-size: clamp(44px, 9vw, 76px); line-height: 1.1; color: var(--pink); letter-spacing: 4px; text-shadow: 0 4px 0 #ffd2e2; }
.title .sub { font-size: 22px; color: var(--soft); margin: 4px 0 18px; }
.title-art { animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-10px); } }
.sparkles span { position: absolute; font-size: 22px; opacity: .0; animation: twinkle 2.8s infinite; pointer-events: none; }
@keyframes twinkle { 50% { opacity: .8; transform: scale(1.2); } }

/* ---------- 剧情 ---------- */
.story { justify-content: center; position: relative; user-select: none; -webkit-user-select: none; cursor: pointer; }
.skip { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px; background: rgba(255,255,255,.8); border: 2px solid var(--line); border-radius: 999px; padding: 6px 16px; font-size: 17px; }
.scene { display: flex; align-items: flex-end; gap: 16px; max-width: 900px; margin: 0 auto; width: 100%; animation: rise .35s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.spk { flex: none; text-align: center; }
.spk .nm { font-weight: 800; font-size: 20px; margin-top: 4px; }
.bubble { flex: 1; background: #fff; border-radius: 26px; padding: 22px 26px; box-shadow: 0 8px 30px rgba(120, 60, 90, .12); border: 2px solid var(--line); position: relative; margin-bottom: 30px; }
.bubble p { margin: 0; font-size: 26px; line-height: 1.6; }
.scene.narr { flex-direction: column; align-items: center; text-align: center; }
.scene.narr .bubble { background: rgba(255,255,255,.7); font-style: normal; }
.narr-icon { font-size: 54px; }
.more { text-align: center; color: var(--soft); font-size: 18px; margin-top: 18px; animation: pulse 1.6s infinite; }
.pager { margin-left: 12px; font-size: 14px; opacity: .7; }
@keyframes pulse { 50% { opacity: .45; } }
.pt { display: inline-block; flex: none; }
.pt-emoji { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; border: 3px solid var(--line); line-height: 1; }

/* ---------- 地图 ---------- */
.map { background: linear-gradient(180deg, #fff0f6 0%, var(--paper) 40%); }
.maphead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mh-l { display: flex; align-items: center; gap: 10px; }
.maphead h2 { font-size: 28px; }
.path { display: flex; flex-direction: column; align-items: center; max-width: 720px; width: 100%; margin: 8px auto; }
.trail { width: 6px; height: 22px; background: repeating-linear-gradient(180deg, #f3c6d6 0 8px, transparent 8px 14px); border-radius: 3px; }
.chap { display: flex; align-items: center; gap: 14px; width: min(100%, 560px); background: #fff; border: 3px solid color-mix(in srgb, var(--accent) 35%, #fff); border-radius: 26px; padding: 14px 18px; text-align: left; box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 22%, #fff); transition: transform .15s; }
.chap.l { transform: translateX(-24px); }
.chap.r { transform: translateX(24px); }
.chap:active { transform: scale(.98); }
.chap.locked { filter: grayscale(1); opacity: .55; box-shadow: none; }
.chap.done { background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--accent) 10%, #fff)); }
.chap-icon { font-size: 44px; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 12%, #fff); border-radius: 50%; flex: none; }
.chap-txt { flex: 1; display: flex; flex-direction: column; }
.chap-no { font-size: 15px; color: var(--accent); font-weight: 800; }
.chap-txt b { font-size: 26px; line-height: 1.2; }
.chap-txt small { font-size: 16px; color: var(--soft); }
.chap-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.chap-stars { color: var(--gold); font-weight: 800; font-size: 18px; }
.rescued { font-size: 15px; color: var(--good); font-weight: 700; white-space: nowrap; }
.map-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; }
.challenge { display: flex; align-items: center; gap: 12px; background: #2e2a36; color: #fff; border: 0; border-radius: 22px; padding: 10px 26px 10px 12px; box-shadow: 0 6px 0 #16131b; text-align: left; }
.challenge b { font-size: 22px; display: block; }
.challenge small { font-size: 15px; opacity: .8; }
.challenge:disabled { opacity: .45; box-shadow: none; }
.challenge .pt { background: #fff; border-radius: 50%; }
.foot-links { display: flex; gap: 12px; }

/* ---------- 章节 ---------- */
.ch-hero { display: flex; align-items: center; gap: 18px; background: rgba(255,255,255,.75); border-radius: 24px; padding: 14px 18px; max-width: 900px; margin: 0 auto 16px; width: 100%; }
.ch-hero p { margin: 0 0 8px; font-weight: 700; }
.ch-hero .chips { justify-content: flex-start; }
.hero-icon { font-size: 60px; flex: none; }
.levels { display: flex; align-items: stretch; justify-content: center; gap: 8px; flex-wrap: wrap; max-width: 1000px; margin: 0 auto; }
.lv { width: 200px; background: #fff; border: 3px solid color-mix(in srgb, var(--accent) 35%, #fff); border-radius: 24px; padding: 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 22%, #fff); }
.lv.locked { filter: grayscale(1); opacity: .5; box-shadow: none; }
.lv-step { font-size: 15px; font-weight: 800; color: var(--accent); }
.lv-icon { font-size: 44px; }
.lv b { font-size: 23px; }
.lv small { font-size: 15px; color: var(--soft); text-align: center; line-height: 1.35; min-height: 40px; }
.lv-arrow { align-self: center; color: #e3c9d4; font-size: 22px; }
.ch-foot { text-align: center; color: var(--soft); font-size: 16px; margin-top: 18px; }

/* ---------- 关卡提示 ---------- */
.tip { justify-content: center; align-items: center; }
.tip-card { display: flex; gap: 18px; align-items: center; background: #fff; border-radius: 28px; padding: 22px 26px; max-width: 760px; box-shadow: 0 10px 30px rgba(120, 60, 90, .12); border: 2px solid var(--line); }
.tip-lv { font-weight: 800; color: var(--accent); font-size: 22px; margin-bottom: 6px; }
.tip-card p { margin: 0; font-size: 24px; line-height: 1.6; }

/* ---------- 答题 ---------- */
.play { gap: 10px; }
.play .bar { margin-bottom: 0; }
.prog { position: relative; width: 150px; height: 28px; background: rgba(255,255,255,.8); border-radius: 999px; overflow: hidden; border: 2px solid var(--line); flex: none; }
.prog-in { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 45%, #fff); transition: width .4s; }
.prog span { position: relative; display: block; text-align: center; font-size: 15px; font-weight: 800; line-height: 24px; }
.boss { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.7); border-radius: 18px; padding: 6px 14px; }
.boss-cloud { font-size: 40px; display: inline-block; }
.boss-cloud.hurt { animation: hurt .5s; }
@keyframes hurt { 30% { transform: scale(.8) rotate(-12deg); filter: brightness(2); } 60% { transform: scale(1.1) rotate(8deg); } }
.hp { flex: 1; height: 16px; background: #eee6ee; border-radius: 999px; overflow: hidden; }
.hp-in { height: 100%; background: linear-gradient(90deg, #7a6a9a, #4a3f63); transition: width .6s ease; }
.hp-t { font-size: 15px; color: var(--soft); white-space: nowrap; }
.prompt { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 20px; padding: 8px 12px; border: 2px solid var(--line); }
.prompt p { margin: 0; flex: 1; font-size: 23px; font-weight: 700; line-height: 1.4; }
.icon-btn { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--line); background: #fff; font-size: 20px; flex: none; }

.playbody { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.stage { position: relative; background: rgba(255,255,255,.72); border-radius: 26px; padding: 16px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 240px; border: 2px dashed color-mix(in srgb, var(--accent) 25%, #fff); }
.answer { display: flex; flex-direction: column; align-items: center; gap: 10px; }
@media (min-width: 900px) and (orientation: landscape) {
  .playbody { flex-direction: row; align-items: stretch; }
  .stage { flex: 1.45; }
  .answer { flex: 1; justify-content: center; }
}

/* 第 1 关：看得见的实物 */
.grid { display: flex; flex-direction: column; gap: .18em; }
.row { display: flex; align-items: center; gap: .35em; animation: rowin .45s both; }
@keyframes rowin { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
.items { display: flex; gap: .06em; padding: .08em .2em; background: rgba(255,255,255,.9); border-radius: .35em; }
.it { display: inline-block; width: 1.15em; text-align: center; line-height: 1.2; filter: grayscale(1) opacity(.4); transform: scale(.82); transition: filter .35s, transform .35s cubic-bezier(.3,1.8,.5,1); }
.it.on { filter: none; transform: scale(1); }
.row.focus .items { outline: 3px solid var(--gold); }
.badge { min-width: 2.2em; font-size: max(20px, .62em); font-weight: 900; text-align: center; color: var(--accent); background: #fff; border-radius: 999px; padding: 0 .4em; border: 2px solid var(--line); }
.badge.q { background: var(--gold-l); color: #9a6a00; border-color: var(--gold); animation: pulse 1.4s infinite; }
.badge.got { animation: none; background: var(--good); color: #fff; border-color: var(--good); }
.see-cap { font-size: 18px; color: var(--soft); font-weight: 700; }

/* 第 2 关：云朵卡 */
.clouds { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 640px; }
.cloud { width: 86px; height: 72px; background: #fff; border-radius: 40px 40px 30px 30px; box-shadow: 0 4px 12px rgba(100, 100, 140, .15), inset 0 -4px 0 #eef0f7; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: rise .4s both; }
.cloud .c-emo { font-size: 20px; line-height: 1; }
.cloud b { font-size: 30px; line-height: 1.1; color: var(--accent); }
.clouds.mini { gap: 6px; }
.clouds.mini .cloud { width: 58px; height: 48px; }
.clouds.mini .cloud b { font-size: 20px; }
.clouds.mini .c-emo { font-size: 14px; }

/* 口诀与算式 */
.spell { display: flex; gap: 2px; font-size: 40px; font-weight: 900; letter-spacing: 2px; color: var(--ink); }
.spell.big { font-size: clamp(48px, 9vw, 76px); }
.spell .c { display: inline-block; }
.spell .hole { color: #9a6a00; background: var(--gold-l); border: 3px dashed var(--gold); border-radius: 14px; padding: 0 .12em; margin: 0 .05em; animation: pulse 1.4s infinite; }
.spell.done .c { color: var(--accent); animation: charpop .5s both; }
.spell.done .c:nth-child(2) { animation-delay: .06s; } .spell.done .c:nth-child(3) { animation-delay: .12s; }
.spell.done .c:nth-child(4) { animation-delay: .18s; } .spell.done .c:nth-child(5) { animation-delay: .24s; }
@keyframes charpop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.25); } 100% { transform: none; opacity: 1; } }
.eq { font-size: 30px; font-weight: 800; color: var(--soft); font-variant-numeric: tabular-nums; }
.eq.small { font-size: 22px; }
.eqb { display: inline-block; min-width: 1.6em; text-align: center; color: #9a6a00; background: var(--gold-l); border: 3px dashed var(--gold); border-radius: 12px; }
.eqb.typing { color: var(--ink); border-style: solid; }
.eqb.got { background: var(--good); color: #fff; border: 3px solid var(--good); }
.fill-wrap, .cast-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cast-eq { font-size: clamp(56px, 11vw, 96px); color: var(--ink); }
.cast-tip { color: var(--soft); font-size: 18px; }

/* 答对后的咒语横幅 */
.fx { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; pointer-events: none; }
.spell-pop { background: rgba(255,255,255,.96); border: 3px solid var(--gold); border-radius: 22px; padding: 6px 24px; text-align: center; box-shadow: 0 10px 30px rgba(242,178,27,.35); animation: popin .45s cubic-bezier(.3,1.6,.5,1) both; }
.spell-pop .spell { justify-content: center; font-size: 46px; }
@keyframes popin { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }

/* 提示与教一遍 */
.hint { width: 100%; }
.hint-in { display: flex; gap: 10px; align-items: flex-start; background: #fffdf3; border: 2px solid var(--gold); border-radius: 18px; padding: 10px 14px; animation: rise .3s; }
.hint-in p { margin: 4px 0; font-size: 20px; }
.skipc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.sk-l { font-size: 17px; color: var(--soft); margin-right: 4px; }
.sk { background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 0 10px; font-weight: 900; font-size: 22px; }
.sk.q { background: var(--gold-l); border-color: var(--gold); color: #9a6a00; }
.arr { color: #d8c3cc; }
.reveal { text-align: center; background: #fffdf3; border: 2px solid var(--gold); border-radius: 18px; padding: 10px; }
.reveal p { margin: 4px 0; }
.reveal .spell { justify-content: center; }
.reveal-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* 输入 */
.choices { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.choice { min-width: 116px; padding: 14px 20px; font-size: 44px; font-weight: 900; background: #fff; border: 3px solid color-mix(in srgb, var(--accent) 40%, #fff); border-radius: 24px; box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 25%, #fff); line-height: 1.1; }
.choice small { display: block; font-size: 18px; color: var(--soft); }
.choice:active { transform: translateY(4px); box-shadow: none; }
.choice.no { opacity: .35; box-shadow: none; text-decoration: line-through; }
.kp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(100%, 360px); }
.kp-grid button { height: 64px; font-size: 32px; font-weight: 800; background: #fff; border: 2px solid var(--line); border-radius: 18px; box-shadow: 0 4px 0 #eadbe1; }
.kp-grid button:active { transform: translateY(3px); box-shadow: none; }
.kp-grid .kp-fn { color: var(--soft); }
.kp-grid .kp-ok { background: var(--accent); color: #fff; border: 0; font-size: 22px; box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 70%, #000 30%); }
.mic { display: flex; align-items: center; gap: 10px; background: #fff; border: 3px solid var(--accent); border-radius: 999px; padding: 10px 28px; font-weight: 800; font-size: 22px; color: var(--accent); }
.mic-i { font-size: 30px; }
.mic.on { background: var(--accent); color: #fff; animation: breathe 1.2s infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent); } }
.diag { font-size: 12px; color: #888; text-align: center; font-family: Menlo, monospace; }
.micline { font-size: 16px; color: var(--soft); text-align: center; max-width: 520px; margin: 4px auto 0; min-height: 22px; }
.voice { position: relative; display: flex; align-items: center; gap: 10px; background: #fff; border: 3px solid var(--accent); border-radius: 999px; padding: 10px 28px; font-weight: 800; font-size: 22px; color: var(--accent); min-height: 54px; opacity: .7; overflow: hidden; }
.voice.on { opacity: 1; animation: breathe 1.2s infinite; }
.voice.warn { border-color: var(--bad, #e2574c); color: var(--bad, #e2574c); opacity: 1; }
.voice .ear { font-size: 30px; display: inline-flex; width: 34px; height: 34px; flex: none; }
.voice .ear svg { width: 100%; height: 100%; display: block; }
.voice.on .ear { animation: bigpulse 1.2s ease-in-out infinite; }   /* 在听的时候星星一闪一闪 */
.voice .lvl { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.voice .lvl i { display: block; height: 100%; width: 0; background: var(--good, #2a9d4b); transition: width .08s; }
.heard { min-height: 24px; font-size: 17px; color: var(--soft); text-align: center; }

.foot { display: flex; align-items: center; gap: 14px; }
.help { background: #fff; border: 2px solid var(--gold); color: #9a6a00; border-radius: 999px; padding: 8px 18px; font-weight: 800; font-size: 18px; flex: none; }
.msg { font-size: 20px; font-weight: 700; }
.msg.good { color: var(--good); }
.msg.bad { color: var(--bad); }

/* ---------- 结算 ---------- */
.result { justify-content: center; align-items: center; background: radial-gradient(circle at 50% 30%, #fff3c9, var(--paper) 60%); }
.res-card { background: #fff; border-radius: 30px; padding: 24px 28px; max-width: 640px; width: 100%; text-align: center; box-shadow: 0 14px 40px rgba(120, 60, 90, .14); border: 2px solid var(--line); }
.res-card h2 { font-size: 30px; }
.res-card p { font-size: 21px; }
.bigstars { font-size: 70px; letter-spacing: 6px; }
.bigstars span { color: #eee4ea; display: inline-block; }
.bigstars span.on { color: var(--gold); animation: starin .6s both; text-shadow: 0 4px 0 #d99a00; }
@keyframes starin { 0% { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.3); } 100% { transform: none; } }
.poof { font-size: 56px; height: 64px; position: relative; }
.poof span { position: absolute; left: 50%; transform: translateX(-50%); }
.poof .p1 { animation: vanish 1s both; }
.poof .p2 { animation: appear 1s both .6s; opacity: 0; }
@keyframes vanish { to { opacity: 0; transform: translateX(-50%) scale(2); } }
@keyframes appear { to { opacity: 1; } }
.rescue { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 24px; font-weight: 800; color: var(--good); margin: 8px 0 14px; }

/* ---------- 咒语书 ---------- */
.legend { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px; }
.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; max-width: 1100px; margin: 0 auto; width: 100%; }
.col { background: #fff; border-radius: 20px; padding: 10px; border: 2px solid var(--line); }
.col h3 { font-size: 19px; text-align: center; margin-bottom: 6px; color: var(--pink); }
.bs { display: flex; flex-direction: column; width: 100%; border: 2px solid transparent; border-radius: 14px; padding: 4px 10px; margin: 4px 0; text-align: left; }
.bs span { font-size: 21px; font-weight: 800; }
.bs small { font-size: 14px; color: var(--soft); }
.bs.grey { background: #f5f2f5; color: #b2a8b3; }
.bs.lv1 { background: var(--pink-l); color: #b8336a; }
.bs.lv2 { background: #e3eeff; color: #3563c4; border-color: #9dbcf2; }
.bs.gold { background: var(--gold-l); color: #8a5e00; border-color: var(--gold); }
.bs.pulse { animation: charpop .5s; }
.book-foot { text-align: center; color: var(--soft); font-size: 16px; }

/* ---------- 家长页 ---------- */
.parent { gap: 14px; background: #fbf8fb; }
.pcard { background: #fff; border-radius: 20px; padding: 16px 18px; border: 2px solid var(--line); max-width: 960px; width: 100%; margin: 0 auto; }
.pcard h3 { font-size: 21px; margin-bottom: 8px; }
.pnote { color: var(--soft); font-size: 16px; margin: 6px 0; }
.tri-wrap { overflow-x: auto; }
.tri { border-collapse: separate; border-spacing: 4px; margin: 0 auto; }
.tri td { border-radius: 10px; padding: 4px 6px; text-align: center; min-width: 76px; border: 2px solid transparent; }
.tri td span { display: block; font-size: 15px; font-weight: 800; white-space: nowrap; }
.tri td small { font-size: 12px; color: var(--soft); }
.tri td.empty { background: none; }
.tri td.grey { background: #f5f2f5; color: #b2a8b3; }
.tri td.lv1 { background: var(--pink-l); color: #b8336a; }
.tri td.lv2 { background: #e3eeff; color: #3563c4; }
.tri td.gold { background: var(--gold-l); color: #8a5e00; }
.tri td.recent { border-color: var(--bad); }
.tg { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f3ecf0; }
.tg input { width: 26px; height: 26px; grid-row: span 2; accent-color: var(--pink); }
.tg span { font-weight: 700; }
.tg small { color: var(--soft); font-size: 15px; }
.music-volume { padding: 16px 0; display: grid; gap: 8px; border-bottom: 1px solid #f3ecf0; }
.music-volume label { display: flex; justify-content: space-between; gap: 16px; font-weight: 700; }
.music-volume output { color: var(--pink); font-variant-numeric: tabular-nums; }
.music-volume input { width: 100%; height: 44px; margin: 0; accent-color: var(--pink); cursor: pointer; }
.music-volume small { color: var(--soft); font-size: 15px; line-height: 1.6; }
.danger { background: #fff; color: var(--bad); border: 2px solid #f3c3bd; border-radius: 999px; padding: 10px 22px; font-weight: 700; }

@media (max-width: 600px) {
  body { font-size: 18px; }
  .bubble p { font-size: 22px; }
  .scene { flex-direction: column; align-items: center; }
  .scene .bubble { margin-bottom: 0; }
  .chap.l, .chap.r { transform: none; }
  .lv-arrow { display: none; }
  .lv { width: calc(50% - 6px); }
  .prog { width: 96px; }
  .prompt p { font-size: 19px; }
  .choice { min-width: 90px; font-size: 36px; }
  .tip-card { flex-direction: column; text-align: center; }
  .tip-card p { font-size: 21px; }
}


/* =================== v0.2 决斗版 =================== */
.lvs i, .lvs { font-style: normal; }
.lvs i { color: #e4d9df; }
.lvs i.on { color: var(--gold); }
.bs .lvs { font-size: 14px; }
.spell.inline { display: inline-flex; font-size: 1em; letter-spacing: 0; vertical-align: baseline; }
.spell.inline .hole { padding: 0 .1em; border-width: 2px; border-radius: 8px; animation: none; }
.learned { font-size: 15px; font-weight: 800; color: #9a6a00; }

/* 地图：魔杖条 */
.wandbar { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid var(--line); border-radius: 20px; padding: 8px 16px; max-width: 720px; width: 100%; margin: 4px auto 8px; }
.wb-icon { font-size: 36px; }
.wb-mid { flex: 1; }
.wb-t { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.wb-t span { font-size: 15px; color: var(--soft); }
.wb-bar { height: 10px; background: #f1e8ee; border-radius: 999px; overflow: hidden; margin-top: 4px; }
.wb-bar div { height: 100%; background: linear-gradient(90deg, #ffb3cf, var(--gold)); border-radius: 999px; }
.banner-top { background: var(--gold-l); border: 2px solid var(--gold); border-radius: 18px; padding: 8px 16px; text-align: center; font-weight: 800; margin: 0 auto 8px; max-width: 720px; }
.lv-rec { font-size: 14px; color: #9a6a00; font-weight: 700; }

/* 决斗画面 */
.battle { gap: 10px; }
.battle .bar { margin-bottom: 0; }
.clock { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--soft); background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 4px 14px; }
.arena { position: relative; flex: 1; min-height: 330px; display: flex; align-items: center; justify-content: space-around; gap: 12px; background: rgba(255,255,255,.6); border-radius: 28px; border: 2px solid color-mix(in srgb, var(--accent) 20%, #fff); padding: 12px; overflow: hidden; }
.hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 1; }
.hero-pt { filter: drop-shadow(0 6px 10px rgba(200, 80, 130, .25)); }
.hero-pt.ouch { animation: ouch .5s; }
@keyframes ouch { 30% { transform: translateX(-14px) rotate(-8deg); filter: brightness(1.6) saturate(.4); } }
.hearts { font-size: 26px; letter-spacing: 2px; }
.heart.lost { animation: heartlost .6s both; }
@keyframes heartlost { 40% { transform: scale(1.6); } 100% { transform: scale(1); opacity: .55; } }
.wand-tag { font-size: 15px; font-weight: 700; color: var(--soft); background: #fff; border-radius: 999px; padding: 2px 12px; border: 2px solid var(--line); }
.foe { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 240px; z-index: 1; }
.foe-top { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.wave-t, .boss-name { font-weight: 800; font-size: 18px; }
.wave-dots { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.wave-dots i { width: 12px; height: 12px; border-radius: 50%; background: #eadfe6; }
.wave-dots i.on { background: var(--good); }
.foe .hp { width: 220px; height: 16px; flex: none; }
.foe .hp-in { background: linear-gradient(90deg, #f06c6c, #c43b3b); }
.eqtag { font-size: 44px; font-weight: 900; background: #fff; border: 3px solid var(--accent); border-radius: 20px; padding: 0 20px; box-shadow: 0 5px 0 color-mix(in srgb, var(--accent) 35%, #fff); font-variant-numeric: tabular-nums; }
.eqtag.pop { animation: popin .4s cubic-bezier(.3,1.6,.5,1); }
.foe-body { position: relative; display: flex; align-items: center; justify-content: center; }
.foe-body.enter { animation: enter .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes enter { from { transform: translateX(120px) scale(.5); opacity: 0; } }
.foe-body.shiver .mob { animation: shiver .18s infinite; }
@keyframes shiver { 50% { transform: translate(2px, -2px) rotate(2deg); } }
.foe-body.lunge { animation: lunge .6s; }
@keyframes lunge { 40% { transform: translateX(-160px) scale(1.25); } }
.foe-body.hurt { animation: hurt .5s; }
@keyframes hurt { 30% { transform: scale(.85) rotate(-10deg); filter: brightness(2); } 60% { transform: scale(1.08) rotate(6deg); } }
.foe-body.poof .mob { animation: poof .6s both; }
@keyframes poof { to { transform: scale(0) rotate(200deg); opacity: 0; } }
.kuromi-foe { filter: drop-shadow(0 6px 10px rgba(80, 40, 120, .3)); }
.shield { position: absolute; inset: -12px; border-radius: 50%; border: 5px solid rgba(120, 190, 255, .55); box-shadow: 0 0 24px rgba(120, 190, 255, .55), inset 0 0 24px rgba(120, 190, 255, .35); pointer-events: none; }
.shield.bounce { animation: bounce .45s; }
@keyframes bounce { 30% { transform: scale(1.15); border-color: #ffd23f; box-shadow: 0 0 40px #ffd23f; } }
.shield.break { animation: shbreak .5s both; }
@keyframes shbreak { 40% { transform: scale(1.2); opacity: 1; border-color: #fff; } 100% { transform: scale(1.6); opacity: 0; } }
.charge { width: 220px; height: 14px; background: #eee6ee; border-radius: 999px; overflow: hidden; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.charge-in { height: 100%; width: 0; transition: width .06s linear; background: linear-gradient(90deg, #ffd23f, #ff9f43); border-radius: 999px; }
.charge-in.hot { background: linear-gradient(90deg, #ff9f43, #e2574c); }
.hintbox { min-height: 20px; }
.dots { display: flex; flex-direction: column; gap: 3px; background: rgba(255,255,255,.85); border-radius: 12px; padding: 6px 8px; }
.drow { display: flex; align-items: center; gap: 3px; }
.drow i { width: var(--d); height: var(--d); border-radius: 50%; background: var(--gold); }
.drow span { font-size: 12px; line-height: 1; font-weight: 800; color: var(--soft); margin-left: 6px; min-width: 22px; }
.groups { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 240px; }
.groups span { background: #fff; border: 2px solid #9dbcf2; color: #3563c4; border-radius: 12px; padding: 0 8px; font-weight: 900; }
.nohint { font-size: 14px; color: #9a6a00; font-weight: 700; }
.fxlayer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.srow { position: absolute; left: 0; top: 0; white-space: nowrap; line-height: 1; filter: drop-shadow(0 0 6px rgba(255, 210, 63, .9)); }
.srow.cast-flash { filter: hue-rotate(145deg) drop-shadow(0 0 8px #80dcff); }
.srow.cast-chain { filter: hue-rotate(280deg) drop-shadow(0 0 8px #cb9aff); }
.srow.cast-meteor { filter: drop-shadow(-12px -8px 5px #ffb446); }
.srow.cast-courage { filter: hue-rotate(305deg) drop-shadow(0 0 8px #ffb3ce); }
.cast-badge { position:absolute; top:-18px; padding:4px 14px; border:2px solid #e6b849; border-radius:999px; background:#fff9df; color:#775400; font-size:20px; font-weight:900; white-space:nowrap; z-index:4; }
.cast-badge.pop { animation:popin .3s cubic-bezier(.3,1.6,.5,1); }
[data-spell-mode="flash"] .cast-badge { background:#e6f8ff; color:#116784; border-color:#70cbe8; }
[data-spell-mode="chain"] .cast-badge { background:#f1eaff; color:#7144a6; border-color:#b395df; }
[data-spell-mode="meteor"] .cast-badge { background:#fff0d6; color:#9b561b; border-color:#e9a765; }
[data-spell-mode="courage"] .cast-badge { background:#ffeaf3; color:#ad456f; border-color:#ed99bd; }
.combo { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-weight: 900; font-size: 22px; color: var(--pink); z-index: 4; }
.combo b { font-size: 34px; }
.combo.pop { animation: popin .4s cubic-bezier(.3,1.6,.5,1); }
.bnr { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; pointer-events: none; z-index: 5; }
.bnr-in { background: rgba(255,255,255,.97); border: 3px solid var(--gold); border-radius: 22px; padding: 6px 24px; text-align: center; box-shadow: 0 10px 30px rgba(242,178,27,.35); animation: popin .45s cubic-bezier(.3,1.6,.5,1) both; }
.bnr-in .spell { justify-content: center; font-size: 46px; }
.teach { }
.rage { font-size: 30px; font-weight: 900; color: var(--bad); }
.rage small { font-size: 18px; color: var(--soft); }
.floaty { position: absolute; top: 30%; left: 50%; font-size: 34px; font-weight: 900; color: var(--bad); animation: floaty 1.1s both; pointer-events: none; z-index: 4; }
.floaty.big { font-size: 48px; color: #ff3d7f; }
@keyframes floaty { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -80px); opacity: 0; } }
.pagefly { position: absolute; top: 40%; left: 50%; font-size: 40px; animation: pagefly 1.2s both; z-index: 4; }
@keyframes pagefly { from { transform: translate(-50%, 0) scale(.5); } 40% { transform: translate(-50%, -40px) scale(1.2); } to { transform: translate(-260px, -220px) scale(.4); opacity: 0; } }
.arena.quake { animation: quake .45s; }
@keyframes quake { 20% { transform: translate(-8px, 4px); } 40% { transform: translate(8px, -4px); } 60% { transform: translate(-5px, 2px); } 80% { transform: translate(4px, 0); } }
.arena.meteor { animation: meteor .9s; }
@keyframes meteor { 30% { box-shadow: inset 0 0 120px rgba(255, 210, 63, .8); } }
.screen.redflash { animation: redflash .5s; }
@keyframes redflash { 30% { box-shadow: inset 0 0 0 999px rgba(226, 87, 76, .18); } }
.controls { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }
.ctl-l { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 240px; flex: 1; max-width: 420px; }
.controls .kp-grid button { height: 58px; }
.eqb { display: inline-block; min-width: 1.4em; text-align: center; }

/* 谜题门 */
.lamps { font-size: 26px; }
.lamp { filter: grayscale(1) opacity(.35); }
.lamp.on { filter: none; }
.door { width: min(100%, 400px); min-height: 380px; display: flex; border-radius: 200px 200px 22px 22px; background: linear-gradient(180deg, #c98a52, #a86b39); padding: 16px; box-shadow: inset 0 0 0 6px #8a5428, 0 10px 24px rgba(0,0,0,.15); perspective: 800px; }
.door-in { flex: 1; justify-content: center; background: #fff8ec; border-radius: 180px 180px 14px 14px; padding: 48px 16px 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; transition: transform .8s, opacity .8s; transform-origin: left center; }
.door.open .door-in { transform: rotateY(-75deg); opacity: .25; }
.door.open { background: radial-gradient(circle, #fff6c8, #ffd66b); }
.door-q { font-size: 24px; font-weight: 800; }
.door-num { font-size: 64px; color: var(--accent); }
.stones { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.stones i { color: #cbb; font-style: normal; }
.stone { background: #e9e4dc; border-radius: 50%; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 900; box-shadow: inset 0 -4px 0 #cfc6b8; }
.stone.q { background: var(--gold-l); }
.choice.card { font-size: 38px; }

/* 输了 */
.lose { background: radial-gradient(circle at 50% 30%, #eef0ff, var(--paper) 60%); }
.lose-art { filter: grayscale(.2); }
.pc-bar { position: relative; height: 18px; background: #eee6ee; border-radius: 999px; margin: 8px auto; max-width: 420px; }
.pc-now { height: 100%; background: linear-gradient(90deg, #8fd18a, var(--good)); border-radius: 999px; }
.pc-prev { position: absolute; top: -6px; width: 4px; height: 30px; background: var(--ink); border-radius: 2px; }
.pc-prev::after { content: '上次'; position: absolute; top: 30px; left: 50%; transform: translateX(-50%); font-size: 13px; font-style: normal; color: var(--soft); white-space: nowrap; }
.cmp { font-weight: 800; color: var(--good); }
.practice { margin: 10px 0; }
.practice .chip { cursor: pointer; }
.ups { background: #fffdf3; border: 2px solid var(--gold); border-radius: 16px; padding: 8px 12px; margin: 10px auto; max-width: 420px; }
.ups-t { font-weight: 900; color: #9a6a00; }
.up { display: flex; justify-content: space-between; align-items: center; font-size: 20px; }
.up .lvs i { font-size: 18px; }
.res-wand { color: var(--soft); font-size: 16px; margin-top: 6px; }
.pace { display: flex; gap: 10px; flex-wrap: wrap; }
.pace-btn { flex: 1; min-width: 120px; background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; align-items: center; }
.pace-btn small { color: var(--soft); font-size: 14px; }
.pace-btn.on { border-color: var(--pink); background: var(--pink-l); }

@media (min-width: 900px) and (orientation: landscape) {
  .battle .controls { flex-wrap: nowrap; }
}
@media (max-width: 700px) {
  .arena { flex-direction: column; min-height: 0; gap: 4px; padding: 8px; }
  .hero { flex-direction: row; gap: 10px; }
  .hero-pt svg { width: 64px; height: 64px; }
  .hearts { font-size: 22px; }
  .wand-tag { display: none; }
  .eqtag { font-size: 34px; }
  .foe .mob-svg { width: 96px; height: 96px; }
  .ctl-l { min-width: 0; }
  .controls .kp-grid button { height: 50px; font-size: 26px; }
  .bnr-in .spell { font-size: 34px; }
}
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; font-size: 28px; line-height: 44px; white-space: nowrap; overflow: hidden; letter-spacing: 18px; opacity: .35; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 12%, transparent)); pointer-events: none; }
@media (max-width: 700px) { .foe .mob-svg { width: 110px; height: 110px; } .hero-pt svg { width: 64px; height: 64px; } }
@media (max-width: 700px) {
  .controls { flex-direction: column; gap: 6px; flex-wrap: nowrap; }
  .ctl-l { width: 100%; max-width: none; flex: none; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .ctl-l .mic, .ctl-l .voice { padding: 6px 18px; font-size: 18px; min-height: 0; }
  .ctl-l .mic-i { font-size: 22px; }
  .ctl-l .msg { width: 100%; text-align: center; font-size: 16px; min-height: 22px; }
  .ctl-l .heard { width: 100%; min-height: 0; }
  .controls .kp { width: 100%; display: flex; justify-content: center; }
}
@media (max-width: 700px) {
  .battle { gap: 6px; }
  .battle .back { width: 40px; height: 40px; }
  .controls .kp-grid { gap: 6px; }
  .controls .kp-grid button { height: 44px; font-size: 24px; }
  .foe { gap: 3px; min-width: 0; }
  .eqtag { font-size: 30px; padding: 0 14px; }
  .dots { padding: 4px 6px; gap: 2px; }
  .ground { height: 30px; font-size: 20px; line-height: 30px; }
}

/* 绘本地点与可说、可点的共同界面 */
.world-art{display:block;width:100%;height:100%;pointer-events:none}
.world-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.screen{position:relative;isolation:isolate}.screen>.world-backdrop~*{position:relative;z-index:1}
.chapter-view{position:relative;width:min(100%,1050px);height:245px;overflow:hidden;border-radius:28px;margin:0 auto 18px;border:3px solid #fff;box-shadow:0 8px 28px #7d68891a}
.chapter-goal{position:absolute;bottom:14px;left:18px;right:18px;background:#fffdf1eF;border:2px solid #fff;border-radius:16px;padding:10px 16px;font-size:20px;font-weight:750;max-width:700px}
.chap-icon:has(.world-art){width:140px;height:88px;overflow:hidden;border-radius:15px;flex:none}.chap-icon .world-art{width:100%;height:100%}
.tip{overflow:hidden;min-height:100svh}.tip .world-backdrop{opacity:.8}.tip-card,.tip>.row-btns,.tip>.input-guide{position:relative;z-index:1}.tip>.input-guide{background:#fffdf5ed;border-radius:999px;padding:7px 20px}
.play{overflow:hidden}.play>.world-backdrop{opacity:.55}.play .bar,.play .prompt,.play .playbody,.play .foot{position:relative;z-index:1}.play .stage{background:#fffdf5e8;border-style:solid;box-shadow:0 8px 24px #6c61751a}.play .answer{padding:16px;background:#fffdf3da;border-radius:24px;max-width:440px}.play .foot{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;background:#fffaf5e8;border-radius:16px;padding:8px}
.input-guide{font-size:18px;font-weight:700;text-align:center;color:#655b72;margin:6px 0 12px}.turn-status{font-size:17px;font-weight:750;color:#685471;text-align:center}.foot .msg{width:100%;text-align:center}.see-cap{font-size:20px}.spell.inline{font-size:32px;letter-spacing:0;flex-wrap:wrap;justify-content:center}.spell{letter-spacing:0;gap:8px}.spell .c{font-variant-numeric:tabular-nums}.chip{font-variant-numeric:tabular-nums;letter-spacing:0}
.battle-actions{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}.battle .hero-pt{width:150px;height:220px}.battle .hero-pt>svg{width:100%;height:100%;overflow:visible}.battle .hero,.battle .foe{filter:drop-shadow(0 4px 5px #39443b16)}.battle .arena{min-height:390px;background:#e5f4ed;box-shadow:inset 0 0 50px #ffffff50}.battle .foe-top{background:#fffffff0;border-radius:16px;padding:5px 14px}.battle .world-art{opacity:.96}.battle .eqtag{font-size:46px}.battle .bnr{pointer-events:none}.battle .turn-status{min-width:250px}.touch-answer[hidden]{display:none}.touch-answer .kp-grid{grid-template-columns:repeat(6,minmax(44px,1fr));max-width:570px}.touch-answer .kp-grid button{height:52px;font-size:26px;min-width:52px}.touch-answer .kp-grid .kp-ok{grid-column:span 2}.controls .ctl-l{min-width:160px}.battle .controls{gap:10px}.battle .controls .voice{font-size:18px}.battle .controls .heard{font-size:16px;min-height:22px}.battle .controls .msg{font-size:18px;text-align:center}
.result{overflow:hidden}.result .world-backdrop{opacity:.7}.result .res-card{position:relative;z-index:1;background:#fffef6f5}.rescue svg{width:90px;height:90px}
/* 地点画按原比例放大（不裁切），舞台外露出的天空由 .cs-view 的天空色补齐 */
.cs-bgwrap>.world-art{position:absolute;width:3200px;height:1707px;left:-800px;top:-333px}.cs-bgwrap>.world-garden{width:2625px;height:1400px;left:-512px;top:-180px}
@media(max-width:700px){.chapter-view{height:210px}.chapter-goal{font-size:16px;padding:8px;bottom:8px;left:8px;right:8px}.chap-icon:has(.world-art){width:80px;height:70px}.play .answer{max-width:none;padding:10px}.input-guide{font-size:17px}.battle .arena{min-height:310px;flex-direction:row;align-items:center}.battle .hero{flex-direction:column}.battle .hero-pt{width:85px;height:135px}.battle .hearts{font-size:19px}.battle .foe{min-width:160px}.battle .eqtag{font-size:30px;padding:0 8px}.battle .foe-top{padding:3px 8px}.battle .foe .hp,.battle .charge{width:165px}.battle-actions{gap:6px}.turn-status{font-size:15px}.touch-answer{width:100%}.touch-answer .kp-grid{grid-template-columns:repeat(6,minmax(35px,1fr));gap:5px}.touch-answer .kp-grid button{min-width:35px;height:44px;font-size:23px}.battle .controls .msg{font-size:16px}.spell{gap:4px}.spell.big{font-size:50px}.choice.card{font-size:28px}.door{min-height:280px}.door-in{padding-top:30px}}
@media(min-width:900px) and (max-height:800px){.battle .arena{min-height:345px}.battle .hero-pt{height:185px;width:128px}.battle .foe .mob-svg{width:140px;height:140px}.battle .hintbox{max-height:80px}.battle .bnr-in .spell{font-size:34px}.battle .controls .kp-grid button{height:44px}.chapter-view{height:200px}.ch-hero{padding:12px}.lv{padding:10px}}
.screen.cs{position:fixed}
.cs-stage{z-index:1}.cs-cap{z-index:10}
.touch-answer .kp-grid .kp-ok{grid-column:span 1;font-size:21px}

/* ---------- 手机专用排版（10-16 颖哥反馈：竖屏显示不全、横过来位置不对） ----------
   竖屏：选关页先放关卡，地点画缩小；关卡两列。
   矮横屏（手机横着拿，高度不到 500）：一屏放下，不用滚。选关页四关一排；战斗页左边战场、右边麦克风。 */
@media (max-width: 700px) and (orientation: portrait) {
  .screen.chapter .bar { order: 0; }
  .screen.chapter .chapter-view { order: 1; height: 150px; margin-bottom: 12px; }
  .screen.chapter .levels { order: 2; }
  .screen.chapter .ch-hero { order: 3; margin: 14px auto 0; }
  .screen.chapter .ch-foot { order: 4; }
  .levels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .levels .lv-arrow { display: none; }
  .lv { width: auto; padding: 10px 8px; }
  .lv-icon { font-size: 34px; }
  .lv b { font-size: 20px; }
  .lv small { min-height: 0; }
  .ch-hero { padding: 10px 12px; gap: 10px; }
  .hero-icon { font-size: 40px; }
  .tip-card { flex-direction: column; text-align: center; padding: 18px; }
  .tip-card p { font-size: 21px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .screen { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .bar { margin-bottom: 6px; }
  .bar h2 { font-size: 19px; }
  .back { width: 40px; height: 40px; font-size: 19px; }
  .big { font-size: 22px; padding: 10px 28px; }
  .row-btns { margin-top: 10px; }

  /* 选关 */
  .screen.chapter .bar { order: 0; }
  .screen.chapter .levels { order: 1; }
  .screen.chapter .chapter-view { order: 2; height: 120px; margin: 12px auto 0; }
  .screen.chapter .ch-hero { order: 3; margin: 12px auto 0; }
  .screen.chapter .ch-foot { order: 4; margin-top: 10px; }
  .levels { flex-wrap: nowrap; gap: 8px; width: 100%; }
  .levels .lv-arrow { display: none; }
  .lv { flex: 1; width: auto; min-width: 0; padding: 8px 6px; gap: 2px; }
  .lv-icon { font-size: 30px; }
  .lv b { font-size: 19px; }
  .lv small { min-height: 0; font-size: 14px; }
  .chapter-goal { font-size: 16px; padding: 6px 12px; bottom: 8px; }

  /* 关前说明 */
  .tip-card { padding: 12px 18px; gap: 12px; }
  .tip-card .pt, .tip-card > svg { width: 80px; height: 80px; }
  .tip-card p { font-size: 20px; line-height: 1.5; }
  .tip-lv { font-size: 18px; margin-bottom: 2px; }
  .tip > .input-guide { margin: 8px 0 0; font-size: 15px; padding: 4px 14px; }

  /* 战斗：一屏放下，左战场、右操作 */
  .screen.battle { display: grid; grid-template-columns: minmax(0, 1fr) 210px; grid-template-rows: auto auto minmax(0, 1fr); gap: 6px 10px; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .battle .bar { grid-column: 1 / -1; margin: 0; }
  .battle .arena { grid-column: 1; grid-row: 2 / 4; min-height: 0; padding: 6px; flex-direction: row; gap: 6px; }
  .battle .battle-actions { grid-column: 2; grid-row: 2; flex-direction: column; gap: 6px; }
  .battle .controls { grid-column: 2; grid-row: 3; flex-direction: column; flex-wrap: nowrap; gap: 4px; align-self: start; overflow: auto; max-height: 100%; }
  .battle .clock { font-size: 15px; }
  .battle .controls .ctl-l { min-width: 0; width: 100%; }
  .battle .turn-status { min-width: 0; font-size: 15px; }
  .battle .hero { flex-direction: column; gap: 2px; }
  .battle .hero-pt { width: 84px; height: 124px; }
  .battle .hearts { font-size: 18px; }
  .battle .wand-tag { display: none; }
  .battle .foe { min-width: 0; gap: 3px; }
  .battle .foe-top { padding: 2px 8px; }
  .battle .eqtag { font-size: 28px; padding: 0 10px; }
  .battle .foe .mob-svg { width: 92px; height: 92px; }
  .battle .foe .hp, .battle .charge { width: 160px; }
  .battle .hintbox { max-height: 64px; overflow: hidden; }
  .battle .controls .msg { font-size: 15px; }
}