/* ==========================================================================
   课堂改版：瓷瓶娃娃形象 · 黑白展厅 · 对话引出制作过程 · 画剪涂刻 · 真实感窑烧 · 对话图卡
   只追加样式，不改动 style.css 的原有规则。
   ========================================================================== */

/* ---------- 展厅镜头推近时，允许展厅画出原本的屏幕范围（修复右侧展品被裁切） ---------- */
#hall-svg { overflow: visible; }

/* ---------- 窑窑老师：瓷瓶娃娃 ---------- */
.yaoyao .yy-arm-left { transform-box: fill-box; transform-origin: 94% 92%; animation: yy-arm-l 3.2s infinite ease-in-out; }
.yaoyao .yy-arm-right { transform-box: fill-box; transform-origin: 6% 92%; animation: yy-arm-r 3.2s infinite ease-in-out; }
@keyframes yy-arm-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(5deg); } }
@keyframes yy-arm-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-5deg); } }
.yaoyao.wave .yy-arm-right { animation: yy-wave .42s 6 alternate ease-in-out; }
@keyframes yy-wave { from { transform: rotate(8deg); } to { transform: rotate(-18deg); } }
.yaoyao.talking .yy-arm-left { animation: yy-arm-l .9s infinite ease-in-out; }
.yaoyao.talking .yy-arm-right { animation: yy-arm-r .9s infinite ease-in-out; }
.yaoyao.happy .yy-arm-left { animation: yy-cheer-l .7s ease-out; }
.yaoyao.happy .yy-arm-right { animation: yy-cheer-r .7s ease-out; }
@keyframes yy-cheer-l { 40% { transform: rotate(16deg); } }
@keyframes yy-cheer-r { 40% { transform: rotate(-16deg); } }
.yaoyao .yy-eyes { transform-box: fill-box; }
.yaoyao.peek-left .yy-eyes { transform: translateX(-4px); }
.yaoyao.peek-right .yy-eyes { transform: translateX(4px); }
.yaoyao.thinking .yy-eyes { transform: translate(3px, -3px); }
.msg .who svg { width: 54px; height: auto; margin-top: 0; }
.msg.bot .who { background: radial-gradient(circle at 50% 40%, #fff, #efe6d4); }
.msg.bot .who { position: relative; }
.msg.bot .who svg { position: absolute; left: 50%; top: 50%; width: 175%; max-width: none; margin: 0; transform: translate(-50%, -40%); }
.msg.bot .who svg * { animation: none !important; }
.msg .who .yy-arm { animation: none; }

/* ---------- 动作骨架接管：关闭旧的关键帧，交给弹簧驱动（聊天记录里的小头像仍用关键帧） ---------- */
.yaoyao.rig .yy-bob, .yaoyao.rig .yy-head, .yaoyao.rig .yy-eyes,
.yaoyao.rig .yy-arm-left, .yaoyao.rig .yy-arm-right, .yaoyao.rig .yy-mouth-open { animation: none !important; transform: none !important; transition: none !important; }
.yaoyao.rig .yy-shadow { animation: none !important; }
.yaoyao.rig .yy-mouth-open { opacity: 0; transition: opacity .12s !important; }
.yaoyao.rig .yy-mouth-smile { transition: opacity .12s; }
.yaoyao.rig.talking .yy-mouth-open { opacity: 1; }
.yaoyao.rig.talking .yy-mouth-smile { opacity: 0; }

/* ---------- 请出窑窑老师：登场动画 ---------- */
#stage-teacher.entrance .teacher-avatar { animation: yy-entrance 1.3s cubic-bezier(.2, 1.35, .4, 1) both; }
#stage-teacher.entrance .teacher-halo { animation: yy-halo 1.6s ease-out both; }
#stage-teacher.entrance .teacher-name-tag { animation: yy-tag 1s .7s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes yy-entrance { 0% { transform: translateY(60%) scale(.3) rotate(-12deg); opacity: 0; } 55% { transform: translateY(-6%) scale(1.06) rotate(3deg); opacity: 1; } 100% { transform: none; } }
@keyframes yy-halo { 0% { transform: scale(.2); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1); } }
@keyframes yy-tag { from { transform: translate(-50%, 30px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.stage.warp-leave { animation: warp-leave 1s ease-in forwards; }
@keyframes warp-leave { to { transform: scale(1.18); filter: blur(5px) brightness(1.5); opacity: .15; } }

/* ---------- 对话：弹出图卡 ---------- */
.chat-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-body .chat-log { flex: 1; }
.teacher-right, .chat-box, .chat-body, .chat-log { min-width: 0; }
/* 图卡：跟在回答后的一条“图片消息”，扁平一行，不抢对话的高度 */
.chat-gallery { flex: none; align-self: stretch; min-width: 0; contain: inline-size; margin: 0 0 2px 52px; border: 2.5px solid var(--ink); border-radius: 18px; background: linear-gradient(180deg, #211a15, #2e241d); color: #f4ecdc; box-shadow: 3px 3px 0 var(--ink); overflow: hidden; }
.chat-log > .chat-gallery { animation: cg-in .45s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes cg-in { from { transform: translateY(-10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.cg-head { display: flex; align-items: baseline; gap: 10px; padding: 8px 14px 0; min-width: 0; }
.cg-kicker { flex: none; font-size: 11px; letter-spacing: .14em; color: var(--gold); font-weight: 700; }
.cg-head b { flex: none; font-family: var(--font-title); font-weight: 400; font-size: 17px; }
.cg-hint { margin-left: auto; min-width: 0; font-size: 11.5px; color: #cdbfa8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 116px; gap: 9px; overflow-x: auto; padding: 8px 14px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(244,236,220,.35) transparent; }
.cg-card { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 0 0 7px; border: 2px solid rgba(244,236,220,.25); border-radius: 13px; background: #f4ecdc; color: var(--ink); text-align: left; overflow: hidden; scroll-snap-align: start; animation: cg-card .45s cubic-bezier(.2, 1.4, .4, 1) both; transition: transform .2s, box-shadow .2s, border-color .2s; }
.cg-card:hover, .cg-card.on { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 8px 16px rgba(0,0,0,.35); }
@keyframes cg-card { from { transform: translateY(14px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.cg-art { display: block; height: 74px; margin-bottom: 4px; overflow: hidden; background: #e9e1cf; }
.cg-art img, .cg-art svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-card b { padding: 0 8px; font-family: var(--font-title); font-weight: 400; font-size: 15px; line-height: 1.25; }
.cg-card small { padding: 0 8px; font-size: 11px; line-height: 1.45; color: #6b5f55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-zoom { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(21,21,21,.66); color: #fff; font-size: 12px; font-style: normal; opacity: .85; transition: transform .2s, background .2s; }
.cg-art { position: relative; }
.cg-card { cursor: zoom-in; }
.cg-card:hover .cg-zoom { background: var(--gold); color: var(--ink); transform: scale(1.12); opacity: 1; }
.cg-more { position: absolute; top: 5px; right: 5px; padding: 2px 7px; border-radius: 999px; background: rgba(21,21,21,.72); color: #fff; font-size: 10.5px; font-weight: 700; cursor: zoom-in; }
.cg-more:hover { background: var(--gold); color: var(--ink); }
/* 电脑端：推荐问题全部显示（紧凑两行），不再横向裁切 */
body[data-display-mode="desktop"] .chips { gap: 7px; padding: 9px 20px 10px; }
body[data-display-mode="desktop"] .chip { padding: 6px 13px; font-size: 13.5px; white-space: nowrap; }
.chip-key { background: var(--ink); color: var(--gold); }
.chip-key:hover { background: var(--gold); color: var(--ink); }
.chat-go { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 9px 16px; border-radius: 999px; border: 3px solid var(--ink); background: linear-gradient(180deg, var(--gold), #e9a52e); font-family: var(--font-title); font-size: 16px; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
.chat-go.ready { animation: go-pulse 1s infinite; }
.chat-go i { font-style: normal; font-variant-numeric: tabular-nums; }
@keyframes go-pulse { 50% { transform: scale(1.05); } }

/* ---------- 制作过程：拉坯师傅 ---------- */
.wheel-spin { animation: wheel-dash .5s linear infinite; }
@keyframes wheel-dash { to { stroke-dashoffset: -32; } }
.throw-clay { animation: throw-grow 3.2s infinite ease-in-out; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes throw-grow { 0% { transform: scale(1.25, .62); } 55%, 85% { transform: scale(1, 1); } 100% { transform: scale(1.25, .62); } }
.throw-rings { animation: wheel-dash .4s linear infinite; }
.arms-throw { animation: throw-hands 3.2s infinite ease-in-out; }
@keyframes throw-hands { 0% { transform: translateY(10px); } 55%, 85% { transform: translateY(-6px); } 100% { transform: translateY(10px); } }

/* ---------- 画 · 剪 · 涂 · 刻 ---------- */
.craft-materials { display: flex; flex-wrap: wrap; gap: 8px; }
.mat { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 999px; background: var(--cream); border: 2.5px solid var(--ink); font-size: 13px; font-weight: 700; box-shadow: 2px 2px 0 var(--ink); }
.mat i { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.mat-card { background: #161616; box-shadow: inset 0 0 0 2px #333; }
.mat-pastel { background: linear-gradient(90deg, #fbf8f0 0 62%, #d9a441 62% 100%); border: 2px solid var(--ink); transform: rotate(-30deg); border-radius: 3px !important; height: 10px !important; }
.mat-scissors { background: radial-gradient(circle at 30% 70%, transparent 3px, var(--kiln) 3.5px 5.5px, transparent 6px), radial-gradient(circle at 70% 70%, transparent 3px, var(--kiln) 3.5px 5.5px, transparent 6px), linear-gradient(60deg, transparent 45%, #9aa3ad 45% 55%, transparent 55%), linear-gradient(-60deg, transparent 45%, #9aa3ad 45% 55%, transparent 55%); }
.mat-stick { background: linear-gradient(135deg, transparent 42%, #c9a46a 42% 58%, transparent 58%); }
.craft-steps { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.craft-steps .step-demo svg { display: block; width: 100%; height: 92px; }
.craft-steps .step-text { padding: 10px 12px; }
.craft-steps .step-text span { font-size: 13px; }
body[data-display-mode="desktop"][data-stage="craft"] .craft-left { padding-bottom: 150px; }
.step-text em { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: var(--kiln); letter-spacing: .08em; }
.step-demo .d-outline { stroke-dasharray: 240; animation: d-draw 3s infinite ease-in-out; }
@keyframes d-draw { from { stroke-dashoffset: 240; } 70%, to { stroke-dashoffset: 0; } }
.step-demo .d-pastel { animation: d-pastel 3s infinite ease-in-out; }
@keyframes d-pastel { 0% { transform: translate(68px, 22px); } 20% { transform: translate(90px, 38px); } 45% { transform: translate(104px, 90px); } 70%, 100% { transform: translate(56px, 92px); } }
.step-demo .d-scissors { animation: d-cut 2.6s infinite ease-in-out; }
@keyframes d-cut { 0% { transform: translate(68px, 22px); } 35% { transform: translate(92px, 22px); } 65% { transform: translate(90px, 38px); } 100% { transform: translate(104px, 92px); } }
.step-demo .d-paper-off { animation: d-off 2.6s infinite; }
@keyframes d-off { 0%, 60% { opacity: .35; transform: none; } 100% { opacity: 0; transform: translateY(12px); } }
.step-demo .d-fill { transform-box: fill-box; transform-origin: 50% 100%; animation: d-fill 2.6s infinite ease-in-out; }
@keyframes d-fill { 0% { transform: scaleY(0); } 70%, 100% { transform: scaleY(1); } }
.step-demo .d-needle { animation: d-needle 2.4s infinite ease-in-out; }
@keyframes d-needle { 0% { transform: translate(58px, 64px); } 100% { transform: translate(112px, 64px); } }
.step-demo .d-wave { stroke-dasharray: 90; animation: draw 2.4s infinite ease-in-out; }
#stage-craft .scratch-wrap { background: #e7dcc6; background-image: linear-gradient(rgba(90,70,40,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(90,70,40,.07) 1px, transparent 1px); background-size: 24px 24px; box-shadow: inset 0 0 50px rgba(90,60,20,.18); }
#stage-craft .scratch-wrap .scrap { transition: transform 1.2s cubic-bezier(.5, 0, .7, .4), opacity 1.2s; transform-origin: 20% 80%; }
#stage-craft .scratch-wrap .scrap.fall { transform: translate(-6%, 70%) rotate(-14deg); opacity: 0; }
.scratch-wrap[data-tool="pastel"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg transform='rotate(40 18 18)'%3E%3Crect x='13' y='2' width='10' height='30' rx='2' fill='%23fbf8f0' stroke='%23151515' stroke-width='2'/%3E%3Crect x='13' y='12' width='10' height='12' fill='%23d9a441' stroke='%23151515' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") 6 32, crosshair; }
.scratch-wrap[data-tool="scissors"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'%3E%3Ccircle cx='9' cy='29' r='6' fill='none' stroke='%23e8632b' stroke-width='3.5'/%3E%3Ccircle cx='21' cy='33' r='5' fill='none' stroke='%23e8632b' stroke-width='3.5'/%3E%3Cpath d='M13 25 L34 4 M18 29 L32 8' stroke='%23626b75' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 33 5, crosshair; }
.scratch-wrap[data-tool="ke"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M4 32 L30 6' stroke='%23151515' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M4 32 L30 6' stroke='%23d8b47a' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") 4 32, crosshair; }
.scratch-wrap.shake { animation: btn-shake .5s; }
.tool-spacer { flex: 1; }
#template-btns { margin-right: auto; }
.btn.pulse { animation: go-pulse 1s infinite; box-shadow: 3px 3px 0 var(--ink), 0 0 0 4px rgba(240,185,60,.45); }

/* ---------- 虚拟窑烧：四步流程 ---------- */
.fire-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fstep { background: var(--cream); border: 3px solid var(--ink); border-radius: 20px; padding: 12px 14px; transition: box-shadow .3s, transform .3s, opacity .3s; opacity: .8; }
.fstep.current { opacity: 1; box-shadow: 5px 5px 0 var(--kiln); transform: translateY(-2px); }
.fstep.done { opacity: 1; }
.fstep-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.fstep-head i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 13px; background: #d6ccb9; color: #fff; flex: none; }
.fstep.current .fstep-head i { background: var(--kiln); }
.fstep.done .fstep-head i { background: var(--jade); font-size: 0; }
.fstep.done .fstep-head i::after { content: "✓"; font-size: 14px; }
.fstep-head b { font-family: var(--font-title); font-weight: 400; font-size: 18px; }
.fstep-head small { color: #999; font-size: 12px; }
.fstep .upload-zone { min-height: 150px; border-width: 3px; }
.link-btn { border: none; background: none; color: var(--kiln); font-weight: 700; font-size: 13px; text-decoration: underline; cursor: pointer; }
.link-btn[hidden] { display: none; }
#stage-fire .upload-preview { padding: 10px; background: #2a211b; }
.preview-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.preview-pair figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.preview-pair img { width: 100%; height: 150px; object-fit: contain; border-radius: 12px; background: #3a2f27; }
.preview-pair .cutout img { background: #efe7d6 repeating-conic-gradient(#e3d9c4 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.preview-pair figcaption { font-size: 11px; color: #d8cbb4; text-align: center; font-weight: 700; }
.preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
#stage-fire .upload-preview .btn { position: static; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--paper-2); border: 2.5px solid var(--ink); }
.seg-btn { border: none; background: transparent; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: #7a6f63; }
.seg-btn.on { background: #fff; color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.seg.duration { display: flex; margin-bottom: 12px; }
.seg.duration .seg-btn { flex: 1; padding: 6px 6px; }
#stage-fire .pattern-tags { display: flex; flex-wrap: wrap; gap: 6px; }
#btn-comment { width: 100%; justify-content: center; }
.comment-card { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px; border-radius: 16px; background: #fff; border: 2.5px solid var(--ink); animation: cg-in .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.comment-card[hidden] { display: none; }
.comment-avatar { width: 64px; flex: none; }
.comment-card b { font-family: var(--font-title); font-weight: 400; font-size: 20px; }
.comment-card p { margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.comment-card.typing b { color: #999; font-size: 15px; }
#btn-fire { width: 100%; justify-content: center; }
#stage-fire.is-firing :is(#btn-fire, #btn-reset-work, #btn-comment, #btn-reupload, .seg-btn, #btn-camera, #btn-album) { pointer-events: none; opacity: .45; }

/* 故事时间 */
.story-card { position: absolute; left: 18px; top: 18px; z-index: 4; width: min(320px, calc(100% - 36px)); display: flex; gap: 12px; padding: 14px; border-radius: 20px; background: rgba(251,248,242,.96); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); animation: cg-in .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.story-card[hidden] { display: none; }
.story-timer { position: relative; width: 52px; height: 52px; flex: none; }
.story-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.st-bg { fill: none; stroke: #eadfcb; stroke-width: 5; }
.st-ring { fill: none; stroke: var(--kiln); stroke-width: 5; stroke-linecap: round; }
.story-timer span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-title); font-size: 17px; font-variant-numeric: tabular-nums; }
.story-kicker { display: block; font-size: 11px; letter-spacing: .14em; color: var(--kiln); font-weight: 700; }
.story-body b { display: block; font-family: var(--font-title); font-weight: 400; font-size: 18px; margin: 2px 0 6px; }
.story-body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.story-body li { font-size: 13.5px; padding: 3px 8px; border-radius: 8px; color: #6b6158; transition: all .3s; }
.story-body li::before { content: "·"; margin-right: 6px; font-weight: 900; }
.story-body li.on { background: var(--gold); color: var(--ink); font-weight: 700; transform: translateX(4px); }
.story-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
#story-phase { font-size: 12px; font-weight: 700; color: #8a5a3c; }
.fire-right:has(.story-card:not([hidden])) .fire-status { opacity: 0; }

/* 出窑：博物馆展台 + 前后对比 */
.fire-result { grid-template-columns: 1.1fr .9fr; }
.result-stage { position: relative; align-self: stretch; display: grid; place-items: center; border-radius: 22px; overflow: hidden; background: radial-gradient(ellipse at 50% 18%, rgba(255,226,170,.55), transparent 55%), radial-gradient(ellipse at 50% 100%, #5a4536 0, #2b211b 60%, #1b1511 100%); box-shadow: inset 0 0 60px rgba(0,0,0,.45); min-height: 0; }
.result-stage::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 6%; height: 7%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,230,190,.18), transparent 70%); pointer-events: none; }
.result-stage { padding: 14px; }
.compare { position: relative; width: 100%; height: 100%; min-height: 260px; user-select: none; animation: result-pop .8s cubic-bezier(.2, 1.5, .4, 1); }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.compare-before-wrap { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-handle { position: absolute; z-index: 2; top: 4%; bottom: 4%; left: var(--pos); width: 40px; margin-left: -20px; cursor: ew-resize; touch-action: none; }
.compare-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 18.5px; width: 3px; background: rgba(255,244,220,.9); box-shadow: 0 0 10px rgba(0,0,0,.4); }
.compare-handle i { position: absolute; top: 50%; left: 2px; width: 36px; height: 36px; transition: transform .15s; margin-top: -18px; border-radius: 50%; background: var(--gold); border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.compare-handle i::before { content: "◂▸"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-style: normal; color: var(--ink); letter-spacing: -1px; }
/* 保留给键盘操作：看不见、也不盖住图片 */
#compare-range { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.compare-handle:hover i, .compare-handle.dragging i { transform: scale(1.15); }
.compare:has(#compare-range:focus-visible) .compare-handle i { outline: 3px solid var(--kiln); outline-offset: 2px; }
.compare-label { position: absolute; top: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(21,21,21,.7); color: #f4ecdc; font-size: 12px; font-weight: 700; pointer-events: none; }
.compare-label.left { left: 10px; }
.compare-label.right { right: 10px; background: var(--gold); color: var(--ink); }
.result-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--paper-2); font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.modal-before { margin: 14px 0; display: flex; align-items: center; gap: 12px; }
.modal-before[hidden] { display: none; }
.modal-before img { width: 96px; height: 96px; object-fit: contain; border-radius: 12px; background: #3a2f27; border: 2px solid var(--ink); }
.modal-before figcaption { font-size: 13px; color: #777; font-weight: 700; }

/* ---------- 竖屏 / 横屏 ---------- */
body[data-display-mode="portrait"] .craft-steps { grid-template-columns: repeat(2, 1fr); }
body[data-display-mode="portrait"] .fire-result { grid-template-columns: 1fr; }
body[data-display-mode="portrait"] .result-stage { height: 380px; }
body[data-display-mode="portrait"] .story-card { left: 10px; right: 10px; top: 10px; width: auto; padding: 10px; }
body[data-display-mode="portrait"] .story-body li { font-size: 12px; }
body[data-display-mode="portrait"] .fire-kiln { height: 420px; }
body[data-display-mode="landscape"] :is(.craft-materials, .step-demo) { display: none; }
body[data-display-mode="landscape"] .craft-steps { grid-template-columns: 1fr 1fr; }
body[data-display-mode="landscape"] .story-card { left: 8px; top: 8px; padding: 8px; gap: 8px; width: 250px; }
body[data-display-mode="landscape"] .story-body li { font-size: 11px; padding: 1px 6px; }
body[data-display-mode="landscape"] .story-body b { font-size: 14px; }
body[data-display-mode="landscape"] .result-note { display: none; }
body[data-display-mode="landscape"] .chat-gallery { margin-left: 40px; }
body[data-display-mode="landscape"] .cg-grid { grid-auto-columns: 100px; padding: 6px 10px 8px; }
body[data-display-mode="landscape"] .cg-art { height: 58px; }
body[data-display-mode="landscape"] .cg-card small { display: none; }
body[data-display-mode="portrait"] .chat-gallery { margin-left: 0; }
body[data-display-mode="portrait"] .cg-hint { display: none; }
/* ===== 图卡大图查看器 ===== */
.card-viewer { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; }
.card-viewer[hidden] { display: none; }
.cv-backdrop { position: absolute; inset: 0; background: rgba(21,17,14,.62); backdrop-filter: blur(5px); opacity: 0; transition: opacity .22s; }
.cv-panel { position: relative; margin: 0; width: min(980px, calc(94 * var(--vw))); max-height: calc(calc(100 * var(--vh)) - 48px); display: grid; grid-template-columns: minmax(0, 1fr) 300px; background: var(--cream); border: 4px solid var(--ink); border-radius: 28px; box-shadow: 10px 10px 0 var(--ink); overflow: hidden; opacity: 0; transform: translateY(14px) scale(.94); transition: opacity .22s, transform .32s cubic-bezier(.2, 1.35, .4, 1); }
.card-viewer.show .cv-backdrop { opacity: 1; }
.card-viewer.show .cv-panel { opacity: 1; transform: none; }
.cv-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink); background: var(--kiln); color: #fff; font-size: 24px; line-height: 1; box-shadow: 2px 2px 0 var(--ink); }
.cv-close:hover { transform: rotate(90deg); transition: transform .2s; }
.cv-stage { position: relative; min-height: 0; background: radial-gradient(circle at 50% 45%, #fbf6ea, #e8dfcc); border-right: 3px solid var(--ink); }
.cv-art { width: 100%; height: min(calc(64 * var(--vh)), 560px); display: grid; place-items: center; padding: 22px 64px; }
.cv-art img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; filter: drop-shadow(0 14px 22px rgba(40,28,18,.28)); }
.cv-art.drawn svg { width: min(100%, 420px); height: auto; max-height: 100%; border-radius: 18px; box-shadow: 0 14px 30px rgba(40,28,18,.22); }
.cv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; color: var(--ink); font-size: 30px; line-height: 1; padding-bottom: 4px; box-shadow: 3px 3px 0 var(--ink); transition: background .15s, transform .15s; }
.cv-nav:hover { background: var(--gold); transform: translateY(-50%) scale(1.06); }
.cv-nav.prev { left: 12px; }
.cv-nav.next { right: 12px; }
.cv-text { display: flex; flex-direction: column; gap: 10px; padding: 64px 26px 24px; min-height: 0; overflow: auto; }
.cv-kicker { font-size: 12px; letter-spacing: .16em; color: var(--kiln); font-weight: 700; }
.cv-text h3 { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: 38px; line-height: 1.1; }
.cv-note { margin: 0; font-size: 17px; line-height: 1.75; color: #3d342d; }
.cv-foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cv-say, .cv-more { padding: 9px 16px; border-radius: 999px; border: 2.5px solid var(--ink); background: #fff; font-weight: 700; font-size: 14px; box-shadow: 2px 2px 0 var(--ink); transition: background .15s, transform .15s; }
.cv-more { background: var(--ink); color: var(--gold); }
.cv-say:hover, .cv-more:hover { background: var(--gold); color: var(--ink); transform: translate(-1px, -1px); }
.cv-more[hidden] { display: none; }
.cv-count { font-size: 13px; color: #8a7d70; font-weight: 700; letter-spacing: .08em; }
@media (max-width: 760px) {
  .cv-panel { grid-template-columns: 1fr; }
  .cv-stage { border-right: 0; border-bottom: 3px solid var(--ink); }
  .cv-art { height: calc(42 * var(--vh)); padding: 16px 56px; }
  .cv-text { padding: 16px 18px 18px; }
  .cv-text h3 { font-size: 28px; }
}

/* ===== 制作过程 · 写实动画（盖在卡通窑场上，原场景不动） ===== */
.kiln-film { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 22px 28px; background: radial-gradient(ellipse at 50% 40%, rgba(40,26,18,.72), rgba(14,10,8,.9)); backdrop-filter: blur(6px); opacity: 0; transition: opacity .32s ease; container-type: size; }
.kiln-film[hidden] { display: none; }
.kiln-film.show { opacity: 1; }
.kf-frame { width: min(1120px, 100%, calc((100cqh - 150px) * 16 / 9)); display: flex; flex-direction: column; gap: 12px; transform: translateY(16px) scale(.97); transition: transform .45s cubic-bezier(.2, 1.25, .4, 1); }
.kiln-film.show .kf-frame { transform: none; }
.kf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; color: #fbf3e2; }
.kf-kicker { display: inline-block; margin-bottom: 4px; padding: 3px 10px; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.kf-head h3 { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: clamp(20px, calc(2.3 * var(--vw)), 30px); line-height: 1.2; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.kf-skip { flex: none; }
.kf-screen { position: relative; aspect-ratio: 16 / 9; border: 4px solid var(--ink); border-radius: 22px; overflow: hidden; background: #0d0a08; box-shadow: 0 0 0 3px rgba(240,185,60,.55), 8px 8px 0 var(--ink), 0 30px 60px rgba(0,0,0,.5); }
.kf-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.kf-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 62%, rgba(0,0,0,.55)); }
.kf-sub { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 2; width: fit-content; max-width: calc(100% - 48px); margin: 0 auto; padding: 9px 20px; border-radius: 14px; background: rgba(21,17,14,.78); color: #fff; font-size: clamp(15px, calc(1.6 * var(--vw)), 21px); font-weight: 700; line-height: 1.45; text-align: center; transform: translateY(10px); opacity: 0; transition: opacity .35s, transform .35s; pointer-events: none; }
.kf-sub.show { opacity: 1; transform: none; }
/* 窑窑老师配音：左下角小主持人，说话时嘴巴动、声波跳 */
.kf-screen .kf-sub { max-width: calc(100% - 300px); }
.kf-narrator { position: absolute; left: 12px; bottom: 6px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 0; pointer-events: none; opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .35s cubic-bezier(.2, 1.3, .4, 1); }
.kiln-film.voiced .kf-narrator { opacity: 1; transform: none; }
.kf-narrator-avatar { width: clamp(76px, calc(8.4 * var(--vw)), 108px); filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.kf-narrator-avatar svg { display: block; width: 100%; height: auto; }
.kf-narrator-tag { display: inline-flex; align-items: center; gap: 3px; margin: -10px 0 0 6px; padding: 4px 10px 4px 8px; position: relative; z-index: 1; border-radius: 999px; border: 2.5px solid var(--ink); background: var(--gold); color: var(--ink); font-size: 12.5px; font-weight: 800; white-space: nowrap; box-shadow: 2px 2px 0 var(--ink); }
.kf-narrator-tag i { width: 3px; height: 6px; margin-right: 1px; border-radius: 2px; background: currentColor; transform-origin: 50% 100%; }
.kf-narrator-tag i:last-of-type { margin-right: 5px; }
.kiln-film.narrating .kf-narrator-tag i { animation: kf-wave .7s ease-in-out infinite alternate; }
.kiln-film.narrating .kf-narrator-tag i:nth-child(2) { animation-delay: .18s; }
.kiln-film.narrating .kf-narrator-tag i:nth-child(3) { animation-delay: .36s; }
@keyframes kf-wave { to { transform: scaleY(2.4); } }
.kf-bigplay { position: absolute; left: 50%; top: 50%; z-index: 3; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; border: 4px solid var(--ink); background: var(--gold); color: var(--ink); display: grid; place-items: center; padding-left: 6px; box-shadow: 4px 4px 0 var(--ink); animation: wiggle 1.6s infinite; }
.kf-bigplay[hidden] { display: none; }
.kf-end { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: #fff; background: rgba(14,10,8,.66); backdrop-filter: blur(3px); animation: cg-in .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.kf-end[hidden] { display: none; }
.kf-end b { font-family: var(--font-title); font-weight: 400; font-size: clamp(30px, calc(3.6 * var(--vw)), 46px); color: var(--gold); }
.kf-end p { margin: 0; font-size: clamp(15px, calc(1.5 * var(--vw)), 19px); line-height: 1.7; }
.kf-end em { font-style: normal; color: var(--gold); font-weight: 700; }
.kf-end-btns { display: flex; gap: 12px; margin-top: 8px; }
.kf-end .btn-ghost { background: #fff; }
.kf-bar { display: flex; align-items: center; gap: 10px; padding: 7px; border-radius: 999px; background: #211a15; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.kf-ctl { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid #fbf3e2; background: transparent; color: #fbf3e2; display: grid; place-items: center; transition: background .15s, color .15s; }
.kf-ctl:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.kf-ctl .i-play, .kf-ctl .i-off { display: none; }
.kiln-film.paused #kf-toggle .i-pause { display: none; }
.kiln-film.paused #kf-toggle .i-play { display: block; }
.kiln-film.muted #kf-sound .i-on { display: none; }
.kiln-film.muted #kf-sound .i-off { display: block; }
.kf-chapters { flex: 1; min-width: 0; display: flex; gap: 6px; }
.kf-chap { --p: 0; position: relative; flex: 1 1 0; min-width: 0; height: 40px; border-radius: 999px; border: 0; background: #3a2f27; color: #cdbfa8; overflow: hidden; font-size: 14px; font-weight: 700; white-space: nowrap; transition: color .2s, background .2s; }
.kf-chap .kf-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p)); background: linear-gradient(90deg, #d99a2b, var(--gold)); }
.kf-chap span { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.kf-chap span b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(251,243,226,.16); font-size: 12px; }
.kf-chap.on, .kf-chap.seen { color: var(--ink); }
.kf-chap.on span b, .kf-chap.seen span b { background: var(--ink); color: var(--gold); }
.kf-chap:hover { background: #4a3d33; }
/* 窑场里重看的入口：在五道工序下面 */
.kiln-film-btn { position: relative; align-self: flex-start; pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px; border: 3px solid var(--ink); background: var(--cream); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); text-align: left; transition: transform .2s, opacity .25s; }
.kiln-film-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.kiln-film-btn.hide { opacity: 0; pointer-events: none; }
.kfb-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; padding-left: 3px; background: var(--kiln); color: #fff; border: 2.5px solid var(--ink); }
.kfb-text { display: flex; flex-direction: column; line-height: 1.2; }
.kfb-text b { font-family: var(--font-title); font-weight: 400; font-size: 18px; }
.kfb-text small { font-size: 12px; color: #6b5f55; }
body.film-open #mini-teacher { opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }

/* ===== 右下角 · 时光列车按钮 ===== */
.time-train-btn { display: inline-flex; align-items: center; gap: 12px; padding: 8px 22px 8px 10px; text-align: left; }
.tt-loco { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #211a15; border: 3px solid var(--ink); }
.tt-loco svg { position: relative; z-index: 1; animation: tt-bob .5s ease-in-out infinite alternate; }
.tt-wheel { transform-box: fill-box; transform-origin: center; }
.tt-puff { position: absolute; left: 17px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fbf3e2; opacity: 0; animation: tt-puff 1.8s ease-out infinite; }
.tt-puff.p2 { animation-delay: .9s; }
.tt-text { display: flex; flex-direction: column; line-height: 1.15; }
.tt-text b { font-family: var(--font-title); font-weight: 400; font-size: 24px; }
.tt-text small { font-size: 13px; font-weight: 700; opacity: .75; }
.time-train-btn:hover .tt-loco svg { animation-duration: .22s; }
@keyframes tt-bob { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
@keyframes tt-puff { 0% { transform: translate(0, 4px) scale(.5); opacity: 0; } 20% { opacity: .9; } 100% { transform: translate(-10px, -16px) scale(1.5); opacity: 0; } }
body[data-display-mode="landscape"] .time-train-btn { padding: 4px 14px 4px 6px; gap: 8px; }
body[data-display-mode="landscape"] .tt-loco { width: 36px; height: 36px; }
body[data-display-mode="landscape"] .tt-loco svg { width: 26px; height: 21px; }
body[data-display-mode="landscape"] .tt-text b { font-size: 16px; }
body[data-display-mode="landscape"] .tt-text small { display: none; }
/* 右下角有“制作人”水印徽标，列车按钮让开它，排在徽标左边 */
body[data-display-mode="desktop"] .time-train-btn { margin-right: 140px; }

/* ===== 虚拟窑烧 · 预览说明（器型已在画剪涂刻里选好，这里不再选） ===== */
.preview-note { font-size: 12.5px; font-weight: 700; color: #d8cbb4; }