/* 月宫寻兔记 · 样式。1rem = 100 设计像素（750 设计稿），根字号由 main.js 按屏宽计算 */
:root {
  --paper: #F8F3E8; --gold: #E9B949; --wood: #EAD9B8; --brown: #5A3A22;
  --amber: #B8732E; --cream: #FFFDF7; --leaf: #6F8B5A; --pink: #F2B8C0;
  --red: #D9583B; --ink: #3A2E22;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; background: #e8dcc4; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink); -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; overscroll-behavior: none;
}
img { display: block; max-width: none; -webkit-user-drag: none; pointer-events: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
[hidden] { display: none !important; }

/* 手机上铺满全屏；电脑 / 平板上显示为居中的手机画框（750 × 1334 比例），不会变成细长条 */
#app {
  position: relative; width: 100%; height: 100%; height: 100dvh;
  margin: 0 auto; overflow: hidden; background: var(--paper);
}
@media (min-width: 600px) {
  body { display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #f4e6c8, #d9c49c); }
  #app {
    width: auto; height: min(calc(100vh - 48px), 960px); height: min(calc(100dvh - 48px), 960px);
    aspect-ratio: 750 / 1334; border-radius: 28px;
    box-shadow: 0 0 0 10px #3a2e22, 0 24px 60px rgba(58, 46, 34, .45);
  }
}
#stage { position: absolute; inset: 0; }

/* ---------- 页面与翻页 ---------- */
.page {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--paper) center / cover no-repeat;
  transform-origin: left center; backface-visibility: hidden;
}
.page.enter { animation: pageIn .6s ease-out both; }
.page.leave { animation: pageOut .5s ease-in both; pointer-events: none; }
@keyframes pageIn { from { opacity: 0; transform: perspective(1200px) rotateY(35deg); } to { opacity: 1; transform: none; } }
@keyframes pageOut { to { opacity: 0; transform: perspective(1200px) rotateY(-30deg) translateX(-10%); } }

.abs { position: absolute; }
.center-x { left: 50%; transform: translateX(-50%); }
.fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 木牌按钮 ---------- */
.wood-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 4.4rem; height: 1.35rem; padding: 0 .9rem .06rem;
  background: url(../assets/img/btn_wood.webp) center / 100% 100% no-repeat;
  font-size: .38rem; font-weight: 800; letter-spacing: .06em; color: var(--brown);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6); white-space: nowrap;
  transition: transform .15s; animation: breathe 2.4s ease-in-out infinite;
}
.wood-btn:active { transform: scale(.94); }
.wood-btn.wide { width: 5.4rem; font-size: .34rem; }
.wood-btn.small { width: 3.4rem; height: 1.05rem; font-size: .3rem; animation: none; }
.wood-btn.glow { filter: drop-shadow(0 0 .18rem var(--gold)) drop-shadow(0 0 .1rem #fff3c4); }
.wood-btn[disabled] { filter: grayscale(.8) opacity(.6); animation: none; }
@keyframes breathe { 50% { transform: scale(1.04); } }

.text-btn {
  min-height: .88rem; padding: .16rem .32rem; border-radius: .44rem;
  background: rgba(255, 253, 247, .88); border: 2px solid var(--brown);
  font-size: .26rem; font-weight: 700; color: var(--brown);
}
.text-btn:active { transform: scale(.95); }

.icon-btn {
  position: absolute; z-index: 60; top: calc(.24rem + var(--safe-t)); right: .24rem;
  width: .88rem; height: .88rem; border-radius: 50%;
  background: rgba(255, 253, 247, .9); border: 2px solid var(--brown);
  font-size: .4rem; font-weight: 700; color: var(--brown); line-height: 1;
}
.icon-btn .sound-off { display: none; }
.icon-btn.muted .sound-on { display: none; }
.icon-btn.muted .sound-off { display: inline; }

.brand-mark {
  position: absolute; z-index: 35; left: .14rem; bottom: calc(.14rem + var(--safe-b));
  width: .84rem; height: auto; pointer-events: none;
}

/* ---------- 对话框 ---------- */
.dialog {
  position: absolute; z-index: 40; left: .2rem; right: .2rem; bottom: calc(.3rem + var(--safe-b));
  display: flex; align-items: flex-start; gap: .14rem; min-height: 2.62rem;
  padding: .5rem .72rem .64rem .3rem;
  background: url(../assets/img/dialog_box.webp?v=leaf1) center / 100% 100% no-repeat;
  cursor: pointer; animation: popUp .25s ease-out;
}
.dialog-avatar { flex: none; width: 1.2rem; height: 1.32rem; object-fit: contain; margin-top: .04rem; }
.dialog-body { flex: 1; min-width: 0; }
.dialog-name { font-size: .26rem; font-weight: 800; color: var(--amber); margin-bottom: .12rem; }
.dialog-text {
  font-size: .3rem; line-height: 1.75; color: var(--ink); min-height: 1.05rem;
  padding-left: .72rem; text-indent: -.72rem;
}
.dialog-next {
  position: absolute; right: .58rem; bottom: .42rem; font-size: .22rem; color: var(--brown);
  animation: blink 1s steps(2) infinite;
}
.dialog.typing .dialog-next { visibility: hidden; }
@keyframes blink { 50% { opacity: .2; } }
@keyframes popUp { from { opacity: 0; transform: translateY(.3rem) scale(.96); } }

.page.comic-page { background: #F8F4EB; container-type: size; }
.comic-stack {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100cqw, calc(100cqh * 1125 / 2000));
  aspect-ratio: 1125 / 2000;
}
.comic-part {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill;
  animation: comicIn .55s ease-out both;
}
.comic-part.p1 {
  clip-path: polygon(3.91% 6.8%, 96.09% 6.8%, 96.09% 28.9%, 3.91% 28.9%);
  animation-delay: .08s;
}
.comic-part.p2 {
  clip-path: polygon(3.91% 29.5%, 96.09% 29.5%, 96.09% 51.55%, 3.91% 59.2%);
  animation-delay: 1.65s;
}
.comic-part.p3 {
  clip-path: polygon(3.91% 59.2%, 96.09% 51.55%, 96.09% 97.5%, 3.91% 97.5%);
  animation-delay: 3.2s;
}
@keyframes comicIn {
  from { opacity: 0; transform: translateY(.22rem); }
  to { opacity: 1; transform: none; }
}
.comic-go {
  position: absolute; z-index: 2;
  left: 13.3%; top: 83%; width: 74.7%; height: 12%;
  background: transparent;
}
.comic-go[disabled] { pointer-events: none; }
.comic-go:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) {
  .comic-part { animation: none; opacity: 1; transform: none; }
}

/* ---------- 弹窗 ---------- */
.modal {
  position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(58, 46, 34, .45); animation: fadeIn .2s;
}
.modal-card {
  position: relative; width: 6.2rem; padding: .5rem .44rem .46rem; text-align: center;
  background: var(--cream); border: 3px solid var(--brown); border-radius: .36rem;
  box-shadow: 0 0 0 .1rem var(--wood), 0 .2rem .5rem rgba(0, 0, 0, .25);
  animation: popUp .3s ease-out;
}
.modal-card::before {
  content: ""; position: absolute; inset: .1rem; border: 2px dashed rgba(90, 58, 34, .35);
  border-radius: .28rem; pointer-events: none;
}
.modal-title { font-size: .44rem; font-weight: 900; color: var(--brown); margin-bottom: .2rem; letter-spacing: .04em; }
.modal-desc { font-size: .3rem; line-height: 1.6; color: var(--ink); margin-bottom: .34rem; }
.modal-sub { font-size: .24rem; color: #7a6450; margin-top: -.2rem; margin-bottom: .3rem; }
.modal-actions { display: flex; gap: .24rem; justify-content: center; }
.gain-icon {
  width: 2.4rem; height: 2.4rem; margin: 0 auto .2rem; position: relative;
}
.gain-icon::before {
  content: ""; position: absolute; inset: -.5rem;
  background: radial-gradient(circle, rgba(233, 185, 73, .55), transparent 65%);
  animation: spinGlow 3s linear infinite;
}
.gain-icon img { position: relative; width: 100%; height: 100%; object-fit: contain; animation: gainPop .7s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes gainPop { from { transform: scale(.2) rotate(-200deg); opacity: 0; } }
@keyframes spinGlow { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } }

.clue-flip { width: 3.4rem; height: 3.4rem; margin: 0 auto .26rem; perspective: 800px; }
.clue-flip > div {
  width: 100%; height: 100%; border-radius: .24rem; border: 3px solid var(--brown);
  background: #fbf3df; display: grid; place-items: center; overflow: hidden;
  animation: flipIn .7s ease-out both;
}
.clue-flip img { width: 82%; height: 82%; object-fit: contain; }
@keyframes flipIn { from { transform: rotateY(180deg); opacity: 0; } }

/* ---------- 关卡顶部栏 ---------- */
.topbar {
  position: absolute; z-index: 30; top: calc(.24rem + var(--safe-t)); left: .24rem; right: 1.3rem;
  display: flex; align-items: center; gap: .2rem;
}
.progress {
  flex: 1; height: .44rem; border-radius: .22rem; background: rgba(255, 253, 247, .9);
  border: 2px solid var(--brown); position: relative; overflow: hidden;
}
.progress i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--amber)); transition: width .3s;
}
.progress span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .24rem; font-weight: 800; color: var(--brown);
}
.skip-btn { position: absolute; z-index: 30; right: .24rem; bottom: calc(.3rem + var(--safe-b)); }

.stage-title {
  position: absolute; z-index: 20; top: calc(1.0rem + var(--safe-t)); left: 50%; transform: translateX(-50%);
  padding: .1rem .4rem; border-radius: .3rem; white-space: nowrap;
  background: rgba(255, 253, 247, .85); border: 2px solid var(--brown);
  font-size: .3rem; font-weight: 800; color: var(--brown);
}

/* 手势引导 */
.guide {
  position: absolute; z-index: 35; inset: 0; display: grid; place-items: center;
  background: rgba(58, 46, 34, .3); animation: fadeIn .3s;
}
.guide-box {
  padding: .3rem .44rem; border-radius: .3rem; background: var(--cream);
  border: 3px solid var(--brown); font-size: .3rem; font-weight: 700; text-align: center; line-height: 1.6;
}
.guide-hand { font-size: .8rem; display: block; animation: handMove 1.2s ease-in-out infinite; }
@keyframes handMove { 0%, 100% { transform: translateX(-.5rem); } 50% { transform: translateX(.5rem); } }
.guide-hand.circle { animation: handCircle 1.4s linear infinite; }
@keyframes handCircle {
  0% { transform: translate(.4rem, 0); } 25% { transform: translate(0, .4rem); }
  50% { transform: translate(-.4rem, 0); } 75% { transform: translate(0, -.4rem); } 100% { transform: translate(.4rem, 0); }
}
.guide-hand.tap { animation: handTap .9s ease-in-out infinite; }
@keyframes handTap { 50% { transform: scale(.8) translateY(.1rem); } }

/* toast */
.toast {
  position: absolute; z-index: 55; left: 50%; top: 42%; transform: translate(-50%, -50%);
  padding: .2rem .4rem; border-radius: .3rem; background: rgba(58, 46, 34, .85); color: #fff;
  font-size: .28rem; white-space: nowrap; animation: fadeIn .2s;
}

/* ---------- 横屏 ---------- */
.landscape {
  display: none; position: fixed; inset: 0; z-index: 99; background: var(--paper);
  flex-direction: column; align-items: center; justify-content: center; gap: 16px; font-size: 16px; color: var(--brown);
}
.landscape img { width: 120px; }
@media (orientation: landscape) and (max-height: 500px) { .landscape { display: flex; } }


/* ================= 场景 ================= */
.char { position: absolute; transition: opacity .4s; }
.bob { animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-.12rem); } }
.char-in-left { animation: charInL .7s cubic-bezier(.3, 1.2, .5, 1) both; }
.char-in-right { animation: charInR .75s .12s cubic-bezier(.3, 1.2, .5, 1) both; }
@keyframes charInL { from { opacity: 0; transform: translateX(-1.1rem); } }
@keyframes charInR { from { opacity: 0; transform: translateX(1.1rem); } }
.hop { animation: hop .55s ease-out; }
@keyframes hop { 40% { transform: translateY(-.32rem) scale(1.03); } }
.cup-float { animation: bob 2.8s ease-in-out infinite; }
.steam { position: absolute; width: .1rem; height: .1rem; border-radius: 50%; background: rgba(255, 255, 255, .9); animation: steamUp 2.2s ease-out infinite; }
@keyframes steamUp { to { transform: translateY(-.7rem) scale(1.6); opacity: 0; } }
.float-icon { position: absolute; width: .72rem; height: .72rem; object-fit: contain; animation: iconDrift 2.6s ease-in forwards; pointer-events: none; }
@keyframes iconDrift {
  0% { opacity: 0; transform: translateY(.3rem) scale(.5); }
  18% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-1.8rem) scale(.85); }
}

.wobble { animation: wobble 1.8s steps(3) infinite; }
@keyframes wobble { 33% { transform: rotate(-1.5deg); } 66% { transform: rotate(1.5deg); } }
.fade-in { animation: fadeIn .6s both; }
.fade-in.bob { animation: fadeIn .6s both, bob 2.6s ease-in-out .6s infinite; }
.float-up { animation: floatUp .7s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes floatUp { from { opacity: 0; transform: translateY(.6rem); } }

/* 加载页 */
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; }
.loading-cup { position: relative; width: 2.6rem; height: 3.5rem; }
.loading-cup img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .4s; }
.loading-text { font-size: .3rem; font-weight: 700; color: var(--brown); letter-spacing: .1em; }
.loading-bar { width: 3.6rem; height: .16rem; border-radius: .08rem; background: var(--wood); overflow: hidden; }
.loading-bar i { display: block; height: 100%; width: 0; background: var(--amber); transition: width .2s; }

/* 封面 */
.cover-sub {
  position: absolute; left: 50%; top: 21.5%; transform: translateX(-50%); white-space: nowrap;
  padding: .06rem .3rem; border-radius: .3rem; background: rgba(255, 253, 247, .85);
  border: 2px solid var(--amber); font-size: .28rem; font-weight: 800; color: var(--amber); letter-spacing: .12em;
}
.cover-start { position: absolute; left: 16.5%; width: 69%; top: 81.4%; height: 12.1%; border-radius: .5rem; }
.cover-start::after {
  content: ""; position: absolute; inset: -6%; border-radius: inherit;
  box-shadow: 0 0 0 .05rem rgba(233, 185, 73, .0); animation: ring 2s ease-out infinite;
}
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(233, 185, 73, .7); } 100% { box-shadow: 0 0 0 .3rem rgba(233, 185, 73, 0); } }
.cover-petal { position: absolute; top: -5%; width: .3rem; animation: petalFall linear infinite; pointer-events: none; }
@keyframes petalFall { to { transform: translate(var(--dx, -.6rem), 115vh) rotate(540deg); } }

/* 剧情：漩涡与换装 */
.swirl { position: absolute; left: 50%; top: 38%; width: 5.4rem; margin-left: -2.7rem; opacity: 0; transform: scale(.2); }
.swirl.on { animation: swirlIn 2.2s ease-in forwards; }
@keyframes swirlIn {
  0% { opacity: 0; transform: scale(.2) rotate(0); }
  40% { opacity: 1; transform: scale(1) rotate(200deg); }
  100% { opacity: 1; transform: scale(3.5) rotate(720deg); }
}
.flash { position: absolute; inset: 0; background: #fff8e0; opacity: 0; pointer-events: none; }
.flash.on { animation: flash 1.2s ease-in-out; }
@keyframes flash { 50% { opacity: 1; } }

/* 配方卡（委托页） */
.recipe-card {
  position: absolute; left: 50%; top: 15%; width: 5.6rem; margin-left: -2.8rem; padding: .3rem .3rem .26rem;
  background: var(--cream); border: 3px solid var(--brown); border-radius: .26rem;
  box-shadow: 0 0 0 .08rem var(--wood), 0 .16rem .4rem rgba(0, 0, 0, .2);
}
.recipe-card h3 { text-align: center; font-size: .34rem; color: var(--brown); margin-bottom: .16rem; letter-spacing: .1em; }
.recipe-row { display: flex; justify-content: space-between; }
.recipe-row div { width: 1.18rem; text-align: center; font-size: .22rem; font-weight: 700; color: var(--brown); }
.recipe-row img { width: 1.1rem; height: 1.1rem; object-fit: contain; margin: 0 auto .04rem; filter: grayscale(.85) opacity(.55); }
.recipe-card p { margin-top: .14rem; text-align: center; font-size: .22rem; color: #7a6450; }

/* 选关页 */
.hub-title { position: absolute; left: 50%; top: calc(.2rem + var(--safe-t)); width: 4.6rem; margin-left: -2.3rem; }
.hub-top {
  position: absolute; left: .34rem; right: .34rem; top: calc(1.75rem + var(--safe-t));
  display: flex; align-items: center; gap: .24rem; height: 2.6rem;
}
.hub-cup { position: relative; width: 1.9rem; height: 2.5rem; flex: none; }
.hub-cup img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .6s; }
.hub-cup .cup-glow { position: absolute; inset: -.3rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 185, 73, .5), transparent 65%); opacity: 0; }
.hub-cup.pulse .cup-glow { animation: cupGlow 1.4s ease-out; }
@keyframes cupGlow { 30% { opacity: 1; } }
.hub-map { position: relative; flex: 1; height: 2.5rem; }
.map-piece { position: absolute; inset: 0; background: url(../assets/img/map_puzzle.webp) center / contain no-repeat; transition: opacity .6s, filter .6s; }
.map-piece.q0 { clip-path: inset(0 50% 50% 0); }
.map-piece.q1 { clip-path: inset(0 0 50% 50%); }
.map-piece.q2 { clip-path: inset(50% 50% 0 0); }
.map-piece.q3 { clip-path: inset(50% 0 0 50%); }
.map-piece.off { opacity: .14; filter: grayscale(1); }
.map-piece.new { animation: pieceIn .8s ease-out; }
@keyframes pieceIn { from { opacity: .14; transform: scale(1.12); } }
.hub-map-label { position: absolute; left: 0; right: 0; bottom: -.36rem; text-align: center; font-size: .2rem; color: #7a6450; }
.hub-map.complete .map-piece { animation: mapDone 1.6s ease-in-out 2; }
@keyframes mapDone { 50% { filter: drop-shadow(0 0 .15rem var(--gold)); } }

.hub-grid {
  position: absolute; left: .34rem; right: .34rem; top: calc(4.85rem + var(--safe-t));
  display: grid; grid-template-columns: 1fr 1fr; gap: .22rem;
}
.hub-card {
  position: relative; height: 2.95rem; border-radius: .26rem; overflow: hidden;
  background: linear-gradient(#fdf6e6, #f3e4c4); border: 3px solid var(--brown);
  box-shadow: inset 0 0 0 .06rem #fffaf0, 0 .06rem 0 rgba(90, 58, 34, .25);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: .16rem;
}
.hub-card img.art { position: absolute; top: .2rem; left: 50%; width: 2.3rem; height: 2.0rem; margin-left: -1.15rem; object-fit: contain; transition: filter .6s; }
.hub-card .label { position: relative; font-size: .3rem; font-weight: 900; color: var(--brown); letter-spacing: .04em; }
.hub-card.todo img.art { filter: grayscale(.7) brightness(.92); }
.hub-card.todo { animation: cardBreathe 2.6s ease-in-out infinite; }
.hub-card.todo:nth-child(2) { animation-delay: .3s; }
.hub-card.todo:nth-child(3) { animation-delay: .6s; }
.hub-card.todo:nth-child(4) { animation-delay: .9s; }
@keyframes cardBreathe { 50% { transform: scale(1.025); } }
.hub-card.done { border-color: var(--amber); }
.hub-card.done .label { color: var(--amber); }
.hub-card .stamp { position: absolute; right: .1rem; top: .1rem; width: .9rem; transform: rotate(14deg); }
.hub-card.just-done { animation: cardDone 1s ease-out; }
.hub-card.just-done .stamp { animation: stampIn .5s .3s cubic-bezier(.3, 1.6, .5, 1) both; }
.hub-card.just-done::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 240, 180, .85) 50%, transparent 70%);
  animation: sweep 1s ease-out forwards;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes stampIn { from { transform: rotate(14deg) scale(2.4); opacity: 0; } }
@keyframes cardDone { 30% { transform: scale(1.06); } }

.hub-recipe {
  position: absolute; left: .34rem; right: .34rem; top: calc(11.18rem + var(--safe-t));
  text-align: center; font-size: .23rem; line-height: 1.5; color: #8a7560;
}
.hub-recipe b { font-weight: 800; color: #b9a58c; transition: color .5s; }
.hub-recipe b.on { color: var(--amber); }
.hub-start { position: absolute; left: 50%; bottom: calc(.56rem + var(--safe-b)); margin-left: -2.2rem; }

/* 关卡一 · 金桂 */
.osm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.osm-tree-hit { position: absolute; left: 0; right: 0; top: 0; height: 45%; }

/* 关卡二 · 灯谜 */
.lanterns { position: absolute; left: 0; right: 0; top: 18%; display: flex; justify-content: space-around; padding: 0 .3rem; }
.lantern {
  position: relative; width: 1.9rem; height: 2.9rem; transform-origin: 50% 0;
  animation: swing 2.4s ease-in-out infinite; transition: filter .4s, opacity .4s;
}
.lantern:nth-child(2) { animation-delay: -.8s; }
.lantern:nth-child(3) { animation-delay: -1.6s; }
.lantern::before { content: ""; position: absolute; left: 50%; top: -3rem; height: 3rem; border-left: 2px solid var(--brown); }
.lantern img { width: 100%; height: 100%; object-fit: contain; }
.lantern.locked { opacity: .45; filter: grayscale(.6); }
.lantern.lit { filter: drop-shadow(0 0 .3rem #ffd76a); }
.lantern.active::after {
  content: "点我"; position: absolute; left: 50%; bottom: -.5rem; transform: translateX(-50%);
  font-size: .22rem; font-weight: 800; color: var(--brown); background: var(--cream);
  border: 2px solid var(--brown); border-radius: .2rem; padding: .02rem .14rem; white-space: nowrap;
}
@keyframes swing { 50% { transform: rotate(4deg); } 0%, 100% { transform: rotate(-4deg); } }
.riddle {
  position: absolute; z-index: 41; left: .3rem; right: .3rem; top: 44%; padding: .5rem .5rem .4rem;
  background: url(../assets/img/riddle_card.webp) center / 100% 100% no-repeat; animation: popUp .3s;
  text-align: center;
}
.riddle-q { font-size: .32rem; font-weight: 800; line-height: 1.55; color: var(--brown); margin-bottom: .3rem; padding: 0 .3rem; }
.riddle-opts { display: flex; gap: .2rem; justify-content: center; }
.riddle-opts button {
  min-width: 1.5rem; min-height: .88rem; padding: 0 .2rem; border-radius: .2rem;
  background: var(--cream); border: 3px solid var(--brown); font-size: .3rem; font-weight: 800; color: var(--brown);
}
.riddle-opts button:active { transform: scale(.94); }
.riddle-opts button.wrong { opacity: .35; animation: shake .35s; pointer-events: none; text-decoration: line-through; }
.riddle-opts button.right { background: var(--gold); }
@keyframes shake { 25% { transform: translateX(-.08rem); } 75% { transform: translateX(.08rem); } }
.tea-can { position: absolute; left: 50%; top: 10%; width: 2rem; margin-left: -1rem; animation: canDrop 1.4s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes canDrop { from { transform: translateY(-4rem); } }

/* 关卡三 · 鲜奶 */
.mortar-wrap { position: absolute; left: 50%; top: 50%; width: 5.6rem; height: 4.7rem; margin: -2rem 0 0 -2.8rem; touch-action: none; }
.mortar-wrap > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.milk-surface {
  position: absolute; left: 22%; top: 12%; width: 63%; height: 31%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #fffdf6, #f3ecdc); overflow: hidden; pointer-events: none;
}
.milk-surface .swirl-line {
  position: absolute; inset: 12%; border-radius: 50%; border: .04rem dashed rgba(184, 150, 100, .45);
  opacity: 0; transition: opacity .5s;
}
.milk-surface .bubble { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(200, 180, 150, .4); opacity: 0; transition: opacity .6s; }
.milk-foam {
  position: absolute; left: 20%; top: 2%; width: 67%; height: 40%; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 45% 35%, #fff 0 30%, #fbf6ea 60%, #efe3c8 100%);
  box-shadow: inset 0 -.06rem .1rem rgba(184, 150, 100, .35), 0 -.04rem .12rem rgba(255, 255, 255, .8);
  opacity: 0; transform: scaleY(.4); transform-origin: 50% 90%; transition: opacity .8s, transform .8s; pointer-events: none;
}
.milk-foam.on { opacity: 1; transform: none; }
.milk-foam.half { opacity: .7; transform: scaleY(.6); }
.pestle { position: absolute; width: 1.2rem; height: 2.6rem; object-fit: contain; pointer-events: none; transform-origin: 50% 90%; transition: left .05s, top .05s; }
.circle-hint { position: absolute; left: 53%; top: 27%; width: 3.2rem; height: 1.6rem; margin: -.8rem 0 0 -1.6rem;
  border: .05rem dashed rgba(90, 58, 34, .45); border-radius: 50%; animation: spinGlow 6s linear infinite; pointer-events: none; }

/* 关卡四 · 碧根果 */
.leaf-field { position: absolute; left: .3rem; right: .3rem; top: 45%; bottom: 9%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.leaf-cell { position: relative; display: grid; place-items: center; }
.leaf-cell:nth-child(3n+2) { transform: translateY(.3rem); }
.leaf-cell button { position: relative; width: 1.9rem; height: 1.5rem; }
.leaf-cell .item { position: absolute; left: 50%; top: 50%; width: 1.2rem; height: 1.2rem; margin: -.6rem 0 0 -.6rem; object-fit: contain; opacity: 0; transform: scale(.4); transition: all .35s cubic-bezier(.3, 1.5, .5, 1); }
.leaf-cell .leaf { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .4s, opacity .4s; }
.leaf-cell.open .leaf { opacity: 0; transform: translateX(var(--lx, 1rem)) rotate(30deg) scale(.7); }
.leaf-cell.open .item { opacity: 1; transform: scale(1); }
.leaf-cell.fly .item { transition: all .7s ease-in; transform: translate(var(--fx), var(--fy)) scale(.3); opacity: 0; }
.leaf-cell.bounce .item { animation: bounceNo .5s; }
.leaf-cell.shake button { animation: shake .4s 3; }
@keyframes bounceNo { 30% { transform: translateY(-.25rem); } }
.pecan-count { position: absolute; left: 50%; top: 31%; transform: translateX(-50%); display: flex; gap: .16rem; }
.pecan-count img { width: .8rem; height: .8rem; object-fit: contain; filter: grayscale(1) opacity(.35); transition: filter .4s; }
.pecan-count img.got { filter: none; animation: gainPop .5s; }

/* 品牌彩蛋：月宫茶印 */
.seal-egg { position: absolute; z-index: 15; width: .72rem; height: .72rem; opacity: .85; animation: sealPulse 3s ease-in-out infinite; }
.seal-egg img { width: 100%; height: 100%; }
.seal-egg.got { animation: sealGot .7s ease-in forwards; pointer-events: none; }
@keyframes sealPulse { 50% { transform: scale(1.1) rotate(8deg); } }
@keyframes sealGot { to { transform: translate(-2rem, -8rem) scale(.3); opacity: 0; } }

/* 调制 */
.mix-cup { position: absolute; left: 50%; top: 40%; width: 2.9rem; height: 3.8rem; margin-left: -1.45rem; }
.mix-cup img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .8s; }
.mix-cup.target { filter: drop-shadow(0 0 .2rem rgba(233, 185, 73, .9)); }
.mix-tray { position: absolute; left: .2rem; right: .2rem; top: 18%; display: flex; justify-content: space-around; }
.mix-item { position: relative; width: 1.5rem; height: 1.5rem; touch-action: none; }
.mix-item img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.mix-item span { position: absolute; left: 50%; bottom: -.36rem; transform: translateX(-50%); white-space: nowrap; font-size: .22rem; font-weight: 800; color: var(--brown); }
.mix-item.next::before {
  content: ""; position: absolute; inset: -.16rem; border-radius: 50%;
  border: .05rem solid var(--gold); animation: ring2 1.4s ease-out infinite;
}
@keyframes ring2 { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.mix-item.used { opacity: .2; pointer-events: none; }
.mix-item.dragging { z-index: 30; transition: none; }
.mix-item.back { transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.pour-fx { position: absolute; left: 50%; top: 32%; width: 1.4rem; height: 1.4rem; margin-left: -.7rem; object-fit: contain; animation: pour 1s ease-in forwards; pointer-events: none; }
@keyframes pour { 0% { transform: translateY(-.4rem) rotate(0); } 50% { transform: translateY(0) rotate(-35deg); } 100% { transform: translateY(1.2rem) rotate(-35deg) scale(.3); opacity: 0; } }
.mix-hint { position: absolute; left: 0; right: 0; top: 33%; text-align: center; font-size: .26rem; font-weight: 800; color: var(--brown); }

/* 开场杯中桂花仍用 .particle；玉兔页香气用 .scent */
.particle { position: absolute; width: .14rem; height: .14rem; border-radius: 50%; background: #ffd76a; box-shadow: 0 0 .1rem #ffe9a8; pointer-events: none; animation: particle 2.4s ease-out forwards; }
@keyframes particle { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--px), var(--py)); opacity: 0; } }
.scent {
  position: absolute; pointer-events: none; z-index: 6; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, .72) 42%, rgba(255, 255, 255, 0) 72%);
  box-shadow: 0 0 .16rem rgba(255, 255, 255, .95);
  animation: scentDrift 4s ease-in-out infinite;
}
@keyframes scentDrift {
  0% { transform: translate(0, 0) scale(.72) rotate(-10deg); opacity: 0; }
  10% { opacity: .95; }
  72% { opacity: .8; }
  100% { transform: translate(var(--px), var(--py)) scale(1) rotate(22deg); opacity: 0; }
}

/* 玉兔现身 */
.rabbit-ears { position: absolute; width: 1.4rem; }
.rabbit-big { position: absolute; left: 50%; width: 4.4rem; margin-left: -2.2rem; z-index: 4; }
.rabbit-big.jump { animation: rabbitJump 1s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes rabbitJump { 0% { transform: translateY(3rem) scale(.4); opacity: 0; } 60% { transform: translateY(-.6rem) scale(1.05); opacity: 1; } }

/* 产品露出：整页自上而下排，标签和原料卡不会叠在一起 */
.product-sheet {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  padding: calc(.72rem + var(--safe-t)) .28rem calc(.16rem + var(--safe-b));
  overflow: hidden; pointer-events: none;
}
.product-sheet > * { pointer-events: auto; }
.product-hero { position: relative; width: 2.7rem; flex: 1 1 auto; min-height: 2.1rem; max-height: 3.35rem; }
.product-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.product-name { position: relative; text-align: center; flex: none; margin-top: .06rem; }
.product-name h2 { font-size: .52rem; font-weight: 900; color: var(--brown); letter-spacing: .12em; text-shadow: 0 2px 0 #fff, 0 0 .2rem rgba(255, 255, 255, .9); }
.product-name p { display: inline-block; font-size: .24rem; font-weight: 800; color: var(--amber); letter-spacing: .08em; margin-top: .06rem; padding: .04rem .22rem; border-radius: .3rem; background: rgba(255, 253, 247, .94); border: 2px solid rgba(184, 115, 46, .35); }
.sell-cards { position: relative; width: 100%; flex: none; margin-top: .18rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .12rem; }
.sell-card { padding: .14rem .06rem .16rem; border-radius: .2rem; background: rgba(255, 253, 247, .94); border: 2px solid var(--brown); text-align: center; animation: floatUp .6s both; }
.sell-card img { width: .9rem; height: .9rem; object-fit: contain; margin: 0 auto .06rem; }
.sell-card b { display: block; font-size: .26rem; color: var(--brown); }
.sell-card span { display: block; font-size: .2rem; color: #7a6450; margin-top: .02rem; }
.slogan {
  position: relative; width: 100%; margin-top: .16rem; padding: .12rem .14rem .1rem;
  text-align: center; font-size: .3rem; font-weight: 900; color: var(--brown);
  letter-spacing: .02em; line-height: 1.4;
  background: rgba(255, 253, 247, .96); border: 2px solid rgba(184, 115, 46, .4); border-radius: .2rem;
}
.slogan small { display: block; margin-top: .04rem; font-size: .2rem; font-weight: 700; color: #6d4b32; letter-spacing: .04em; }
.product-actions { position: relative; margin-top: auto; padding-top: .12rem; display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.cloud-layer { position: absolute; pointer-events: none; }

/* 证书 / 喝法 / 贺卡：一屏排完，不出现页面滚动 */
.back-mini {
  position: absolute; z-index: 35; top: calc(.2rem + var(--safe-t)); left: .2rem;
  height: .8rem; padding: 0 .22rem; border-radius: .4rem;
  background: rgba(255, 253, 247, .94); border: 2px solid var(--brown);
  font-size: .26rem; font-weight: 800; color: var(--brown); line-height: 1;
}
.back-mini:active { transform: scale(.94); }
.sheet {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  overflow: hidden; gap: .12rem;
  padding: calc(.96rem + var(--safe-t)) .28rem calc(.2rem + var(--safe-b));
}
.sheet.sheet-mid { justify-content: center; }
.sheet .page-head { margin: 0; flex: none; font-size: .4rem; }
.sheet .name-row { margin: 0; flex: none; }
.cert-frame { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.cert-img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: .16rem; box-shadow: 0 .1rem .4rem rgba(90, 58, 34, .3); pointer-events: auto; -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; }
.cert-tip { margin: 0; flex: none; text-align: center; font-size: .24rem; font-weight: 700; color: var(--brown); }
.cert-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .14rem; margin: 0; flex: none; }
.name-row { display: flex; gap: .16rem; align-items: center; justify-content: center; margin-bottom: .26rem; }
.name-row input, .card-form input, .card-form textarea {
  font: inherit; font-size: .3rem; color: var(--ink); background: var(--cream);
  border: 2px solid var(--brown); border-radius: .2rem; padding: .16rem .22rem; outline: none;
  -webkit-user-select: text; user-select: text;
}
.name-row input { width: 3.4rem; }
.name-row input:focus, .card-form input:focus, .card-form textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 .05rem rgba(233, 185, 73, .4); }
.tips-card { width: 100%; padding: .28rem .3rem; border-radius: .24rem; background: var(--cream); border: 2px dashed var(--brown); flex: none; }
.tip-art { width: 1.7rem; flex: none; }
.tips-card h3 { font-size: .3rem; color: var(--brown); margin-bottom: .12rem; }
.tips-card p { font-size: .26rem; line-height: 1.7; color: var(--ink); }
.tips-card .todo { color: #8a7258; font-size: .22rem; }

/* 贺卡 */
.card-form { display: flex; flex-direction: column; gap: .14rem; width: 100%; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.card-form label { font-size: .26rem; font-weight: 800; color: var(--brown); }
.card-form textarea { min-height: 1.15rem; resize: none; line-height: 1.5; }
.preset-row { display: flex; flex-wrap: wrap; gap: .12rem; }
.preset-row button { padding: .1rem .2rem; min-height: .7rem; border-radius: .3rem; background: #fbf0d8; border: 2px solid var(--wood); font-size: .22rem; color: var(--brown); }
.link-box { width: 100%; font-size: .22rem; word-break: break-all; padding: .16rem; border-radius: .16rem; background: #fbf3df; border: 2px dashed var(--brown); -webkit-user-select: all; user-select: all; }
.card-preview { display: flex; align-items: center; gap: .2rem; padding: .2rem; border-radius: .24rem; background: var(--cream); border: 2px solid var(--brown); }
.card-preview img { width: 1.6rem; flex: none; }
.card-preview p { font-size: .26rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.envelope { position: absolute; left: 50%; top: 30%; width: 4.6rem; margin-left: -2.3rem; }
.envelope img { width: 100%; }
.letter {
  position: absolute; left: .5rem; right: .5rem; top: 14%; padding: .5rem .44rem; text-align: center;
  background: var(--cream); border: 3px solid var(--brown); border-radius: .3rem;
  box-shadow: 0 0 0 .1rem var(--wood), 0 .2rem .5rem rgba(0, 0, 0, .2); animation: letterOut .8s cubic-bezier(.3, 1.3, .5, 1) both;
}
@keyframes letterOut { from { transform: translateY(2rem) scale(.6); opacity: 0; } }
.letter .from { font-size: .36rem; font-weight: 900; color: var(--brown); line-height: 1.5; word-break: break-all; }
.letter .msg { margin: .26rem 0 .34rem; font-size: .3rem; line-height: 1.7; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.letter img { width: 2.4rem; margin: 0 auto .2rem; }

.page-head { text-align: center; font-size: .44rem; font-weight: 900; color: var(--brown); letter-spacing: .1em; margin: .1rem 0 .3rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.clue-piece { display: block; width: 100%; height: 100%; background-size: 200% 200%; background-repeat: no-repeat; }