/* 题型的样式（main.css 顶上 @import 进来）。动效只用 transform / opacity；没有红色状态。 */

/* ── 图片引用：色块、气球、伙伴姿势、还没有的图 ── */
.art-swatch, .art-balloon { display: inline-flex; align-items: center; justify-content: center; }
.art-swatch svg, .art-balloon svg { width: 100%; height: 100%; display: block; }
img.art-swatch, img.art-balloon { object-fit: contain; }
/* 姿势图当「图」用（ui/art.js poseView）：内嵌 svg 的 viewBox 已经裁到画了东西的范围，按比例撑满框。
   Fluent 图自己四周有一圈空白（占画布 ~88%），姿势图裁过就没有了；框给大一点（84%），两种图在卡片里一样满 */
.art-pose { position: relative; min-width: 0; min-height: 0; }
.art-pose > .pose-fit { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; } /* 绝对定位：svg 不给框撑大小，框多大由外面定 */
.pic.art-pose { aspect-ratio: auto; }
.pic-card .pic.art-pose { width: 84%; height: 84%; }
.art-missing { display: grid; place-items: center; aspect-ratio: 1; padding: 4px; overflow: hidden; border: 3px dashed var(--lock-edge); border-radius: 18%; background: #FBF4E8;
  color: var(--ink-mid); font-weight: 700; font-size: clamp(13px, 2.3vh, 22px); line-height: 1.1; text-align: center; }
.scene-deco.art-missing { display: none; }

/* ── 伙伴的动作（姿势图没画好时，原图 + 这些位移动画也成立）── */
.ex-foot .buddy, .scene-buddy { position: relative; }
/* 动的是伙伴的图：buddyView 里是 <img>，姿势图当「图」用时是 .pose-fit（见上） */
.buddy[data-pose] > img, .buddy[data-pose] > .pose-fit { animation: var(--pa, none) var(--pd, .6s) ease-in-out var(--pn, 3) both; transform-origin: 50% 92%; }
.buddy[data-pose][data-loop] > img, .buddy[data-pose][data-loop] > .pose-fit { animation-iteration-count: infinite; }
.buddy[data-pose="jump"] { --pa: pose-jump; --pd: .56s; }
.buddy[data-pose="run"] { --pa: pose-run; --pd: .36s; --pn: 5; }
.buddy[data-pose="clap"] { --pa: pose-clap; --pd: .3s; --pn: 5; }
.buddy[data-pose="dance"] { --pa: pose-dance; --pd: .8s; --pn: 2; }
.buddy[data-pose="sleep"] { --pa: pose-sleep; --pd: 2.4s; --pn: infinite; }
.buddy[data-pose="swim"] { --pa: pose-swim; --pd: 1.1s; --pn: 2; }
.buddy[data-pose="wave"] { --pa: pose-wave; --pd: .5s; }
.buddy[data-pose="nod"] { --pa: pose-nod; --pd: .45s; }
.buddy[data-pose="shake"] { --pa: pose-shake; --pd: .42s; }
.buddy[data-pose="hug"] { --pa: pose-hug; --pd: .9s; --pn: 2; }
@keyframes pose-jump { 45% { transform: translateY(-24%) scale(.96, 1.05); } 85% { transform: translateY(0) scale(1.05, .95); } }
@keyframes pose-run { 0% { transform: translateX(-7%) rotate(-6deg); } 50% { transform: translateX(7%) rotate(6deg); } 100% { transform: translateX(-7%) rotate(-6deg); } }
@keyframes pose-clap { 50% { transform: scale(1.09, .95); } }
@keyframes pose-dance { 25% { transform: translateX(-6%) rotate(-10deg); } 50% { transform: translateY(-7%); } 75% { transform: translateX(6%) rotate(10deg); } }
@keyframes pose-sleep { 0%, 100% { transform: rotate(-13deg) translateY(3%) scale(1); } 50% { transform: rotate(-13deg) translateY(3%) scale(1.03, .97); } }
@keyframes pose-swim { 25% { transform: translate(-8%, -4%) rotate(-10deg); } 75% { transform: translate(8%, 2%) rotate(10deg); } }
@keyframes pose-wave { 30% { transform: rotate(-7deg); } 70% { transform: rotate(7deg); } }
@keyframes pose-nod { 50% { transform: translateY(7%) scale(1.02, .96); } }
@keyframes pose-shake { 25% { transform: translateX(-6%) rotate(-4deg); } 75% { transform: translateX(6%) rotate(4deg); } }
@keyframes pose-hug { 50% { transform: scale(1.06); } }
.buddy[data-pose="sleep"]::after { content: "z z Z"; position: absolute; top: 2%; right: -4%; font-weight: 700; font-size: clamp(16px, 3vh, 30px); color: var(--violet); animation: zzz 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes zzz { 0% { opacity: 0; transform: translateY(30%); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40%); } }
.buddy[data-pose="swim"]::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: 0; height: 26%; border-radius: 40% 40% 18% 18%; background: #9CC2FF; opacity: .8; animation: water 1.1s ease-in-out infinite; pointer-events: none; }
@keyframes water { 50% { transform: translateX(4%) scaleY(1.12); } }
.buddy[data-pose-art="1"]::after { display: none; } /* 美术画的姿势图自带 Zzz / 水花 */
/* 选项卡片上的姿势图（jump 这个词的图就是伙伴跳起来的样子）不动：一张一直蹦的卡会把手指引过去 */
.pic-card .art-pose.buddy[data-pose] > .pose-fit, .pic-card .art-pose::after { animation: none; }

/* 这道题的主角是舞台上的伙伴：底栏那只让位（位置留着，布局不跳） */
.ex[data-actor="1"] .ex-foot > .buddy { visibility: hidden; }

/* ── 小场景 ── */
.scene { position: relative; width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3%; padding: 6% 5% 5%; pointer-events: none; }
/* 场景里的伙伴（buddy.js buddyView fit）：图已裁掉四周空白，框的宽高比跟着图走（--ar），按比例放满、脚踩底边。
   伙伴 + 一样东西并排时两个都限宽（46% + 3% + 40% + 两边 10% 留白 < 100%），谁也不会画到卡片外面 */
.buddy-fit { aspect-ratio: var(--ar, 4 / 5); }
.buddy-fit > .pose-fit { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.scene .scene-buddy { height: 94%; max-width: 46%; }
/* 卡片高度有限：场景里跳、欢呼的幅度小一点（伙伴已经放大到卡片的 ~80%，原来的幅度会跳出卡片） */
.scene .buddy[data-pose="jump"] { --pa: pose-jump-sm; }
.scene .buddy.cheer { animation-name: cheer-sm; }
@keyframes pose-jump-sm { 45% { transform: translateY(-9%) scale(.97, 1.03); } 85% { transform: translateY(0) scale(1.03, .97); } }
@keyframes cheer-sm { 25% { transform: translateY(-7%) scale(.98, 1.03); } 50% { transform: translateY(0) scale(1.03, .97); } 75% { transform: translateY(-3%); } }
.scene .scene-item { height: 62%; width: auto; max-width: 40%; object-fit: contain; align-self: center; flex: none; }
.scene .scene-item.art-swatch, .scene .scene-item.art-missing { aspect-ratio: 1; }
.scene .scene-item.art-balloon { aspect-ratio: 100 / 130; }
.scene .scene-item.art-pose { aspect-ratio: var(--ar, 4 / 5); } /* 裁过空白的姿势图：框的形状跟着画走 */
.scene[data-n="1"] .scene-item { height: 84%; max-width: 84%; }
.scene[data-n="1"] .scene-item.art-pose { height: 94%; max-width: 90%; } /* 只有一张姿势图的场景（I can swim.）：和 Fluent 图一样满 */
.scene[data-n="1"] .scene-buddy { height: 94%; max-width: 90%; } /* 伙伴自己就是这幅画（Hello! / 动一动 / 故事格）：和只有一张姿势图的场景一样满 */
.scene-deco { position: absolute; top: 7%; right: 8%; width: 17%; aspect-ratio: 1; object-fit: contain; animation: deco-float 1.8s ease-in-out infinite; }
@keyframes deco-float { 50% { transform: translateY(-14%) scale(1.08); } }
.scene-card { --w: min(86vw, 50vh, 520px); position: relative; flex: none; width: var(--w); height: calc(var(--w) * .8); border-radius: 36px; background: var(--card); border: 4px solid var(--card-edge); box-shadow: 0 7px 0 var(--card-edge); transition: transform 90ms ease-out; }
.scene-card.mid { --w: min(72vw, 40vh, 420px); }
.scene-card:active { transform: translateY(5px); }

/* ── 选项：不能点的图卡、光秃秃的气球 ── */
.pic-card.still:active { transform: none; }
.pic-card.bare { background: none; border-color: transparent; box-shadow: none; }
.pic-card.bare .pic { width: 94%; height: 94%; animation: bob 2.4s ease-in-out infinite; }
.pic-card.bare.float-1 .pic { animation-delay: -.6s; }
.pic-card.bare.float-2 .pic { animation-delay: -1.2s; }
.pic-card.bare.float-3 .pic { animation-delay: -1.8s; }
.pic-card.bare.right { border-color: transparent; box-shadow: none; }
.pic-card.bare.glow { border-color: transparent; box-shadow: none; }
.pic-card.popped .pic { animation: balloon-pop 280ms ease-out forwards; }
@keyframes balloon-pop { 40% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1.5) translateY(-30%); opacity: 0; } }
/* 气球「啵」地飞走以后：原地炸开一圈金色的小花，绿勾落在气球原来的位置（不再挂在空卡片的右上角） */
.pic-card.popped::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: 7px dotted var(--gold); pointer-events: none; animation: pop-burst 460ms ease-out forwards; }
@keyframes pop-burst { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.pic-card.popped .badge { top: 50%; left: 50%; right: auto; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 13px; animation: pop-in 220ms 140ms ease-out both; }
/* 颜色卡（色块、气球；ui/options.js 加 .tint-card）不是答案 / 点过了：不变透明、不变灰（红色会看成粉色、灰了的红像棕色），
   颜色原样保留，只是缩小退后一步（点它也不再有反应） */
.pic-card.tint-card.faded { opacity: 1; transform: scale(.76); }
.pic-card.tint-card.faded.wiggle { animation: wiggle-small 240ms ease-in-out; }
@keyframes wiggle-small { 20% { transform: scale(.76) translateX(-7px) rotate(-2deg); } 50% { transform: scale(.76) translateX(6px) rotate(2deg); } 80% { transform: scale(.76) translateX(-3px); } }

/* 幽灵手指（再试试第 3 步、没反应时的提示） */
.ghost-finger { position: absolute; right: -4%; bottom: -14%; z-index: 2; width: 40%; max-width: 96px; pointer-events: none; color: var(--gold-edge); animation: finger-tap 1s ease-in-out infinite; }
.ghost-finger .icon, .ghost-finger img { display: block; width: 100%; }
@keyframes finger-tap { 50% { transform: translate(-10%, -12%) scale(.92); } }

/* ── 声音泡泡当选项（sound-pick、missing 的声音版）── */
.bubble.speaking { transform: scale(1.14); outline: 6px solid var(--gold); outline-offset: 5px; }
.bubble.faded { opacity: .4; }
.bubble.right { background: var(--yes); box-shadow: 0 7px 0 #1E9C72; animation: pop-in 220ms ease-out; }
.bubble.glow::after { border-radius: 50%; }
.ex-sound-pick .ex-main { gap: clamp(18px, 4vh, 44px); }

/* ── 谁躲起来了 ── */
.missing-shown { display: flex; gap: 8px; padding: 10px 10px 15px; border-radius: 28px; background: var(--bg-deep); }
/* 手机上也尽量大：3 张 101px、4 张 78px（以前 92 / 74px）；答案卡片 2 张 140px、3 张 105px（以前 105） */
.missing-shown .pic-card { --size: min(26vw, 17vh, 170px); transition: transform 160ms ease-out, opacity 150ms; }
.missing-shown.shown-4 .pic-card { --size: min(20vw, 15vh, 150px); }
.missing-shown .pic-card.lit { border-color: var(--gold); box-shadow: 0 7px 0 var(--gold-edge); transform: scale(1.07); }
.blanket { position: absolute; inset: -5%; transform: scale(.2) rotate(-25deg); opacity: 0; transition: transform 220ms ease-out, opacity 140ms; pointer-events: none; }
.blanket svg { width: 100%; height: 100%; display: block; }
img.blanket { width: 110%; height: 110%; }
.pic-card.covered .blanket { transform: none; opacity: 1; }
.cards.missing-options { --size: min(36vw, 22vh, 220px); flex-wrap: nowrap; max-width: none; transition: opacity 180ms; }
.cards.missing-options.cards-3 { --size: min(27vw, 20vh, 200px); }
.cards.missing-options.waiting { opacity: 0; pointer-events: none; }
.cards.missing-options.answer-bubbles { gap: min(4vw, 22px); }
.ex-missing .ex-main { gap: clamp(18px, 4.5vh, 48px); }

/* ── 听一句选一幅 ── */
.cards.scenes { --w: min(78vw, 33vh, 400px); flex-direction: column; flex-wrap: nowrap; max-width: none; gap: 14px; }
.cards.scenes.cards-3 { --w: min(70vw, 28vh, 330px); }
.pic-card.scene-option { width: var(--w); height: calc(var(--w) * .72); border-radius: 30px; display: block; }
.pic-card.scene-option > .scene { position: absolute; inset: 0; } /* 按钮里的百分比高度不可靠：场景直接铺满卡片，里面的伙伴和东西才能按比例缩在框里 */

/* ── 是不是 ── */
.ex-yes-no .ex-main { gap: clamp(20px, 4vh, 40px); }
.yn-row { display: flex; gap: clamp(14px, 4vw, 36px); }
.pic-card.yn-btn { --size: min(38vw, 22vh, 220px); border-radius: 26%; }
/* 答之前两个按钮长得一样：白卡片、米色边，只有脸和字是彩色的（Yes 绿、No 蓝紫）——哪个都不能事先看上去像「对」的。
   点对哪个，哪个就和别的题一样：绿边 + 右上角一个绿勾（.right / .badge，main.css + ui/options.js）；没点对的照常变淡 */
.yn-yes b { color: #178460; }
.yn-no b { color: var(--violet-edge); }
/* 上面是脸（扣掉下面一行字的高度，剩多少就多大），下面是 Yes / No 两个字：字永远在卡片里面（iPhone 上以前会掉到卡片边上 / 外面） */
.yn-face { --yn-label: clamp(22px, 3.6vh, 36px); width: 100%; height: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6% 6% 5%; pointer-events: none; }
.yn-art { position: relative; display: block; flex: none; height: min(72%, calc(100% - var(--yn-label) * 1.15)); aspect-ratio: 1; transform-origin: 50% 90%; }
.yn-art > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.yn-face b { flex: none; font-family: "Pals Word", var(--font); font-size: var(--yn-label); line-height: 1.1; }
.yn-yes .yn-art { animation: pose-nod .9s ease-in-out infinite; }
.yn-no .yn-art { animation: pose-shake .9s ease-in-out infinite; }
.yn-btn.right .yn-art, .yn-btn.faded .yn-art { animation: none; } /* 答完就不再点头 / 摇头 */

/* ── 动一动 ── */
.btn-did { min-width: 0; gap: 12px; padding: 0 30px 0 24px; font-size: 28px; letter-spacing: 1px; white-space: nowrap; }
.btn-did .icon { width: 40px; height: 40px; flex: none; }
@media (max-width: 480px) { .btn-did { font-size: 23px; gap: 8px; padding: 0 20px 0 16px; letter-spacing: 0; } .btn-did .icon { width: 32px; height: 32px; } }

/* ── 小故事 ── */
.story { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.story-dots { display: flex; gap: 10px; }
.story-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--card-edge); }
.story-dots i.on { background: var(--teal); }
.page-in { animation: page-in 200ms ease-out; }
@keyframes page-in { from { opacity: .2; transform: translateX(26px); } }
.story-action { display: inline-flex; }

/* ── 开宝箱 ── */
.chest-step { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: clamp(10px, 4vh, 40px); padding: var(--pad); background: radial-gradient(80% 55% at 50% 42%, #FFE9B8, transparent 70%); }
.chest-wrap { position: relative; width: min(64vw, 40vh, 380px); margin: auto 0; }
.chest { display: block; width: 100%; transition: transform 90ms ease-out; }
.chest-art { display: block; width: 100%; }
.chest-art svg { display: block; width: 100%; }
.chest .is-open, .chest.open .is-closed { display: none; }
.chest.open .is-open { display: block; }
.chest:active { transform: scale(.96); }
.chest.hint { animation: chest-hint 1.1s ease-in-out infinite; }
.chest.open { animation: pop-in 240ms ease-out; }
@keyframes chest-hint { 20% { transform: rotate(-4deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-2deg); } 80% { transform: none; } }
.chest-prize, .finish-sticker { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: #fff; border: 6px solid var(--gold); }
.sticker-pic { width: 72%; height: 72%; object-fit: contain; }
.chest-prize { position: absolute; z-index: 2; left: 27%; bottom: 48%; width: 46%; transform: translateY(45%) scale(0); opacity: 0; transition: transform 420ms cubic-bezier(.3, 1.5, .5, 1), opacity 140ms; pointer-events: none; }
.chest-prize.out { transform: translateY(-38%) scale(1); opacity: 1; }
.chest-prize.fly { transition: transform 520ms cubic-bezier(.5, 0, .7, .6), opacity 520ms; opacity: .25; }
.chest-book { position: absolute; top: 4px; right: var(--pad); width: 64px; height: 64px; color: var(--violet); }
.chest-book .icon { width: 100%; height: 100%; }
.chest-foot { width: 100%; max-width: 680px; display: flex; align-items: flex-end; justify-content: space-between; }
.chest-buddy { height: clamp(120px, 20vh, 220px); }
.player.is-chest .progress { visibility: hidden; }

/* ── 横屏 ── */
@media (orientation: landscape) {
  .scene-card { --w: min(46vw, 68vh, 520px); }
  .scene-card.mid { --w: min(40vw, 56vh, 420px); }
  .cards.scenes { --w: min(27vw, 66vh, 380px); flex-direction: row; gap: 16px; }
  .cards.scenes.cards-3 { --w: min((var(--avail) - 2 * 16px) / 3, 60vh, 330px); } /* 三幅一排：按主区域真正的宽度（--avail，main.css）平分 */
  .missing-shown .pic-card { --size: min(13vw, 25vh, 170px); }
  .missing-shown.shown-4 .pic-card { --size: min(11vw, 23vh, 150px); }
  .cards.missing-options, .cards.missing-options.cards-3 { --size: min(15vw, 27vh, 200px); }
  .pic-card.yn-btn { --size: min(17vw, 27vh, 220px); }
  .ex-yes-no .pic-card.mid, .ex-sound-pick .pic-card.mid { --size: min(30vw, 42vh, 330px); }
  .chest-wrap { width: min(40vw, 46vh, 380px); }
}

/* iPad 横屏的三幅小场景：上两幅、下一幅（一排三幅只有 ~230px 宽，伙伴和东西都太小）。手机横屏太矮，仍是一排 */
@media (orientation: landscape) and (min-height: 600px) {
  .cards.scenes.cards-3 { --w: min((var(--avail) - 16px) / 2, (100vh - 270px) / 2 / .72, 380px); flex-wrap: wrap; justify-content: center; max-width: calc(var(--w) * 2 + 20px); }
}

@media (prefers-reduced-motion: reduce) {
  .buddy[data-pose] > img, .buddy[data-pose] > .pose-fit, .scene-deco, .pic-card.bare .pic, .ghost-finger, .yn-art, .chest.hint { animation: none; }
}