/* 开心识字 · 网页版(设计稿 750rpx → 1px = 2rpx,舞台最宽 500px 居中) */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* hidden 属性必须永远生效,压过任何 display 规则 */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
  height: -webkit-fill-available;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  background: #fff6e9;
  font-family: -apple-system, 'Yuanti SC', 'STYuanti', 'PingFang SC', 'Helvetica Neue', sans-serif;
  color: #3a3632;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}

#app {
  height: 100%;
  height: -webkit-fill-available;
  height: 100dvh;
}

/* 低龄体感:按钮弹簧手感 —— 按下缩小下沉,松手过冲回弹(≈1.05 再回位) */
.press,
.f-btn,
.next,
.r-btn,
.w-btn,
.nav,
.e-btn,
.item,
.chip {
  transition: transform 0.26s cubic-bezier(0.34, 1.8, 0.5, 1), filter 0.26s ease;
}

.press:active,
.f-btn:active,
.next:active,
.r-btn:active,
.w-btn:active,
.nav:active,
.e-btn:active,
.item:active,
.chip:active {
  transform: translateY(4px) scale(0.96);
  filter: brightness(0.94);
}

/* —— 解锁门 —— */
#gate {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: linear-gradient(180deg, #82c5fb 0%, #b7e4ff 28%, #e6f6ff 50%, #fff3d2 78%, #ffe4b6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.45s ease, transform 0.45s ease;
  cursor: pointer;
  overflow: hidden;
}

#gate.hide {
  opacity: 0;
  transform: scale(1.06);
  pointer-events: none;
}

.gate-inner {
  text-align: center;
}

.gate-egg {
  font-size: 96px;
  animation: bounce 1.6s infinite;
}

.gate-title {
  margin-top: 12px;
  font-size: 30px;
  font-weight: 900;
  color: #7a4a12;
}

.gate-hint {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 800;
  font-family: inherit;
  color: #b08356;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  cursor: pointer;
  display: inline-block;
  padding: 8px 22px;
  border-radius: 999px;
}

#gate.ready .gate-hint {
  color: #fff;
  background: linear-gradient(180deg, #4ed47e, #2fb55c);
  animation: eipulse 1.2s infinite;
}

/* —— toast —— */
#toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(52, 40, 22, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(40, 28, 10, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 999;
  max-width: 80%;
  text-align: center;
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1.02);
}

/* —— 通用骨架 —— */
.sub-page,
.home-page {
  height: 100%;
  min-height: -webkit-fill-available;
  min-height: 100vh;
  min-height: 100dvh; /* iPad Safari:动态视口高度,排除地址栏 */
  display: flex;
  flex-direction: column;
}

.home-page {
  background: #fff6e9;
}

/* 首页主体:地图铺满,兔子悬浮在地图左侧天空上 */
.home-body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  padding: 10px 14px 6px;
  flex-shrink: 0;
}

.exit {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  border: 3px solid #fff;
  box-shadow: 0 4px 0 rgba(120, 80, 30, 0.14), inset 0 3px 5px rgba(255, 255, 255, 0.8);
  cursor: pointer;
  flex-shrink: 0;
}

.exit.ph {
  font-size: 15px;
  font-weight: 900;
  color: #e2732a;
}

.top-mid {
  flex: 1;
  margin: 0 11px;
}

.track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.bar {
  position: relative;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffc53d, #ff8a3d);
  transition: width 0.35s ease;
  overflow: hidden;
}

/* 进度条上的流光 */
.bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 38%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: trackshine 2.2s linear infinite;
}

@keyframes trackshine {
  to {
    left: 115%;
  }
}

.bar.rv {
  background: linear-gradient(90deg, #a58bff, #7a5bd6);
}

.label {
  margin-top: 4px;
  text-align: center;
  font-size: 12px;
  color: #8a6b4a;
  font-weight: 800;
}

.body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes eipulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

@keyframes pop {
  0% {
    transform: scale(0) rotate(-40deg);
  }
  70% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes charpop {
  0% {
    transform: scale(0.85);
    opacity: 0.4;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes eipop {
  from {
    transform: scale(0.75);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-6px);
  }
  40%,
  80% {
    transform: translateX(6px);
  }
}

.pop-a,
.pop-b {
  animation: charpop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========== 世界地图(横屏全屏) ========== */
.home-map {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  scrollbar-width: none;
}

.home-map::-webkit-scrollbar {
  display: none;
}

.map-inner {
  position: relative;
  min-width: 100%;
  height: 100%;
  margin: 0;
  /* 横屏:背景横向循环铺满 */
  background-image: linear-gradient(
    90deg,
    #8fcbf9 0%,
    #b9e2ff 10%,
    #ddf2ff 24%,
    #edf8da 42%,
    #cdeb9f 64%,
    #aede83 80%,
    #9ed470 86%,
    #d8f3ec 93%,
    #8fcbf9 100%
  );
  background-size: 1590px 100%;
  background-repeat: repeat-x;
  border: 4px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px;
  box-shadow: 0 12px 26px rgba(120, 80, 30, 0.18);
  overflow: hidden;
}

.link {
  position: absolute;
  height: 10px;
  transform-origin: left center;
  z-index: 2;
  /* 圆点小路 */
  background-image: radial-gradient(circle 4px at 10px 5px, rgba(255, 255, 255, 0.95) 96%, transparent);
  background-size: 20px 10px;
  background-repeat: repeat-x;
}

.banner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  padding: 6px 17px;
  box-shadow: 0 4px 0 rgba(120, 80, 30, 0.1);
  z-index: 3;
  white-space: nowrap;
}

.b-emoji {
  font-size: 22px;
  margin-right: 7px;
}

.b-title {
  font-size: 16px;
  font-weight: 900;
  margin-right: 8px;
}

.b-done {
  font-size: 12px;
  font-weight: 700;
  color: #8a6b4a;
  background: #fff6ec;
  padding: 2px 8px;
  border-radius: 999px;
}

.node {
  position: absolute;
  width: 85px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  cursor: pointer;
}

.node:active {
  transform: translate(-50%, -50%) scale(0.94);
}

.node-face {
  position: relative;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 37px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

.node-t0 .node-face { background: linear-gradient(180deg, #ffb066, #ff7e3d); box-shadow: 0 5px 0 #e0622a; }
.node-t1 .node-face { background: linear-gradient(180deg, #5fd0b2, #2fa98c); box-shadow: 0 5px 0 #1f8a72; }
.node-t2 .node-face { background: linear-gradient(180deg, #6fbcff, #3d8ef7); box-shadow: 0 5px 0 #2b6fd0; }
.node-t3 .node-face { background: linear-gradient(180deg, #a8d95e, #5cb532); box-shadow: 0 5px 0 #47931f; }
.node-t4 .node-face { background: linear-gradient(180deg, #ff9cba, #f76e97); box-shadow: 0 5px 0 #d94e78; }
.node-t5 .node-face { background: linear-gradient(180deg, #b39dff, #8b6ef3); box-shadow: 0 5px 0 #6c4fd1; }
.node-t6 .node-face { background: linear-gradient(180deg, #ffd36b, #f5a623); box-shadow: 0 5px 0 #c97410; }
.node-t7 .node-face { background: linear-gradient(180deg, #ff9a9a, #f25c5c); box-shadow: 0 5px 0 #d14343; }

.node-locked .node-face {
  background: linear-gradient(180deg, #cfc9c0, #b3aca2);
  box-shadow: 0 5px 0 #948d83;
}

.node-story .node-face {
  background: linear-gradient(180deg, #7fe3c8, #3dbd9b);
  box-shadow: 0 5px 0 #2b9a7d;
}

.node-story.node-locked .node-face {
  background: linear-gradient(180deg, #cfc9c0, #b3aca2);
  box-shadow: 0 5px 0 #948d83;
}

.node-no {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe28a, #ffc53d);
  border: 2px solid #fff;
  color: #7a5200;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.node-stars {
  margin-top: 5px;
  font-size: 15px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.55);
}

.node-stars .on {
  color: #ffcf33;
  text-shadow: 0 0 7px rgba(255, 190, 40, 0.95);
}

.story-tag {
  margin-top: 5px;
  font-size: 11px;
  font-weight: 900;
  color: #1f8a72;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 2px 9px;
}

.mascot {
  position: absolute;
  width: 60px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  z-index: 4;
  cursor: pointer;
  animation: bounce 1.6s infinite;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.18));
}

.m-body {
  font-size: 33px;
  line-height: 1;
}

.m-hat {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  z-index: 2;
}

.m-face {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 15px;
  opacity: 0.92;
  z-index: 2;
}

.m-neck {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  z-index: 2;
}

/* 顶栏(首页) */
.home-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px 7px;
  background: linear-gradient(115deg, #ffe9c4, #ffdfae 38%, #ffd9a4 62%, #ffe9c4);
  background-size: 220% 100%;
  animation: tbflow 9s ease-in-out infinite;
  box-shadow: 0 3px 0 rgba(224, 162, 21, 0.25);
  z-index: 5;
  flex-shrink: 0;
}

@keyframes tbflow {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.tb-title {
  font-size: 21px;
  font-weight: 900;
  color: #7a4a12;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tb-title {
    background: linear-gradient(92deg, #e8641f, #f59e1b 55%, #ff5c8a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.tb-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tb-done,
.tb-stars,
.tb-coins,
.tb-parent {
  font-size: 13px;
  font-weight: 900;
  color: #7a4a12;
  background: rgba(255, 255, 255, 0.85);
  padding: 5px 11px;
  border-radius: 999px;
  border: 2.5px solid #fff;
  box-shadow: 0 3px 0 rgba(122, 74, 18, 0.18);
}

.tb-stars,
.tb-coins {
  font-weight: 900;
  color: #e2732a;
  background: linear-gradient(180deg, #fff, #fff3df);
}

.tb-parent,
.tb-coins {
  cursor: pointer;
}

/* 悬浮球 */
.task-bubble,
.balloon {
  position: fixed;
  right: 17px;
  z-index: 20;
  cursor: pointer;
}

.task-bubble {
  bottom: calc(128px + env(safe-area-inset-bottom));
  width: 52px;
  height: 52px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 0 rgba(120, 80, 30, 0.14);
  animation: bounce 2.8s ease-in-out infinite;
}

.tb2-emoji {
  font-size: 29px;
}

.task-dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5a5a;
  border: 2px solid #fff;
}

.balloon {
  bottom: calc(35px + env(safe-area-inset-bottom));
  width: 60px;
  height: 70px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  animation: bounce 2.4s ease-in-out infinite;
}

/* 错题本气球:复习气球上方,有错题才出现 */
.wrong-balloon {
  bottom: calc(115px + env(safe-area-inset-bottom));
  animation: bounce 2.8s ease-in-out infinite;
}

.balloon-emoji {
  font-size: 52px;
  line-height: 1;
}

.balloon-badge {
  position: absolute;
  top: -3px;
  right: -2px;
  min-width: 22px;
  padding: 2px 6px;
  background: #ff5a5a;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  border-radius: 999px;
  border: 2px solid #fff;
}

/* 今日任务面板 */
.task-mask {
  position: fixed;
  inset: 0;
  background: rgba(58, 42, 20, 0.5);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  animation: fadein 0.25s ease;
}

.task-sheet {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 8px 17px calc(15px + env(safe-area-inset-bottom));
}

.t-bar {
  width: 45px;
  height: 5px;
  border-radius: 999px;
  background: #efe4d2;
  margin: 0 auto 9px;
}

.t-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.t-title {
  font-size: 18px;
  font-weight: 900;
}

.t-coins {
  font-size: 14px;
  font-weight: 900;
  color: #d8911a;
  background: #fff6ec;
  padding: 4px 11px;
  border-radius: 999px;
}

.t-row {
  display: flex;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #fff6ec;
}

.t-row.t-bonus {
  border-bottom: none;
}

.t-icon {
  font-size: 23px;
  margin-right: 9px;
}

.t-main {
  flex: 1;
}

.t-name {
  font-size: 14px;
  font-weight: 800;
}

.t-sub {
  margin-top: 2px;
  font-size: 11px;
  color: #b08356;
  font-weight: 700;
}

.t-claim {
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(180deg, #4ed47e, #2fb55c);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.t-claim.t-hot {
  background: linear-gradient(180deg, #ffb066, #ff7e3d);
  animation: eipulse 1.2s infinite;
}

.t-claim.t-done {
  background: #eafaf0;
  color: #2e8a4f;
}

.t-claim.t-dis {
  background: #f2e9da;
  color: #b3a48c;
}

.t-tip {
  margin-top: 8px;
  text-align: center;
  font-size: 11px;
  color: #c9a878;
  font-weight: 700;
}

/* ========== 认字卡 ========== */
.scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.card {
  margin: 7px 15px 10px;
  background: #fff;
  border-radius: 22px;
  border: 3px solid #ffe3c4;
  padding: 0 14px 10px;
  box-shadow: 0 10px 22px rgba(120, 80, 30, 0.16);
}

.card-head {
  margin: 0 -14px 4px;
  background: linear-gradient(90deg, #ffb84d, #ff8a3d);
  border-radius: 18px 18px 0 0;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ch-t {
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.ch-no {
  color: rgba(255, 255, 255, 0.95);
  font-size: 12px;
  font-weight: 700;
}

.pinyin {
  text-align: center;
  font-size: 23px;
  font-weight: 900;
  color: #e2732a;
  letter-spacing: 2px;
  margin-top: 4px;
}

.lcv {
  display: block;
  width: min(235px, 55vw);
  height: min(235px, 55vw);
  margin: 0 auto;
}

.memo {
  margin-top: 5px;
  display: flex;
  align-items: center;
  background: #fff6ec;
  border-radius: 10px;
  padding: 6px 9px;
  cursor: pointer;
}

.memo[hidden] {
  display: none;
}

.memo-badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fff;
  border: 2px dashed #ffc9a0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.memo-emoji {
  font-size: 29px;
}

.memo-col {
  flex: 1;
  margin-left: 9px;
  display: flex;
  flex-direction: column;
}

.memo-cap {
  font-size: 12px;
  font-weight: 800;
  color: #e2732a;
}

.memo-txt {
  margin-top: 2px;
  font-size: 12px;
  color: #8a6b4a;
  line-height: 1.45;
}

.tip {
  margin-top: 8px;
  background: #fff6ec;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 12px;
  color: #8a6b4a;
  line-height: 1.5;
}

.tip[hidden] {
  display: none;
}

.words {
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  cursor: pointer;
}

.words-label {
  font-size: 12px;
  color: #b08356;
  margin-right: 9px;
  font-weight: 700;
}

.word {
  font-size: 13px;
  font-weight: 700;
  color: #6b4a26;
  background: #ffe9cf;
  border-radius: 7px;
  padding: 4px 9px;
  margin-right: 6px;
  margin-bottom: 4px;
}

.word:nth-child(3) {
  background: #d9f2e5;
  color: #2e6b4f;
}

.word:nth-child(4) {
  background: #ddeeff;
  color: #2b5e8a;
}

.sentence {
  margin-top: 8px;
  display: flex;
  align-items: center;
  background: #f0f7ef;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 13px;
  color: #4a6b3a;
  line-height: 1.6;
  cursor: pointer;
}

.s-text {
  flex: 1;
}

.s-audio[hidden] {
  display: none;
}

.footer {
  display: flex;
  align-items: center;
  padding: 6px 14px calc(8px + env(safe-area-inset-bottom));
  flex-shrink: 0;
}

.f-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 0 rgba(120, 80, 30, 0.12);
  cursor: pointer;
}

.f-dis {
  opacity: 0.35;
}

.f-icon {
  font-size: 19px;
  line-height: 1.1;
}

.f-txt {
  font-size: 9px;
  font-weight: 700;
  color: #8a6b4a;
}

.next {
  flex: 1;
  text-align: center;
  background: linear-gradient(180deg, #4ed47e, #2fb55c);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  padding: 12px 0;
  border-radius: 999px;
  box-shadow: 0 5px 0 #1f8a43;
  cursor: pointer;
  letter-spacing: 1px;
}

/* ========== 答题 ========== */
.ask {
  flex: 1;
  position: relative;
  padding: 8px 20px 15px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 题面滚动区:矮屏(手机横屏/小窗)下题干+选项可能超出视口,必须能上下滑;
   图章/巩固卡/报幕浮层挂在 .ask 上,不跟随滚动 */
.ask-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

.ask-scroll::-webkit-scrollbar {
  display: none;
}

.q-head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.q-egg {
  font-size: 26px;
  margin-right: 8px;
  animation: bounce 1.6s infinite;
}

.q-text {
  font-size: 16px;
  font-weight: 900;
}

.q-stage {
  margin-top: 12px;
  height: 135px;
  background: #fff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 0 rgba(120, 80, 30, 0.08);
  cursor: pointer;
  flex-shrink: 0;
}

.q-audio {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.q-audio-icon {
  font-size: 48px;
}

.q-audio-txt {
  margin-top: 5px;
  font-size: 12px;
  color: #b08356;
  font-weight: 700;
}

.q-emoji {
  font-size: 75px;
  line-height: 1;
}

.q-word {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 5px;
}

.q-hint {
  margin-top: 9px;
  text-align: center;
  font-size: 12px;
  color: #8a6b4a;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 5px 13px;
  width: fit-content;
  align-self: center;
}

.q-hint[hidden] {
  display: none;
}

.opts {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.opt {
  position: relative;
  width: 48%;
  height: 84px;
  margin-bottom: 13px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
  cursor: pointer;
  animation: charpop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  transition: transform 0.15s ease;
}

/* 糖果光泽 */
.opt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 46%);
  pointer-events: none;
}

.opt:active {
  transform: scale(0.95);
}

.opt:nth-child(2) {
  animation-delay: 0.08s;
}

.opt:nth-child(3) {
  animation-delay: 0.16s;
}

.opt:nth-child(4) {
  animation-delay: 0.24s;
}

.opt-c0 { background: linear-gradient(180deg, #ff9d7a, #ff7e50); box-shadow: 0 5px 0 #d95a2e; }
.opt-c1 { background: linear-gradient(180deg, #64c8f7, #3aa6e8); box-shadow: 0 5px 0 #2a83b8; }
.opt-c2 { background: linear-gradient(180deg, #ffd764, #ffbe30); box-shadow: 0 5px 0 #dd9a12; color: #6b4e00; text-shadow: 0 1px 0 rgba(255,255,255,0.4); }
.opt-c3 { background: linear-gradient(180deg, #a8d95e, #7cc23b); box-shadow: 0 5px 0 #5f9c26; }

.opt-ok {
  filter: saturate(1.3) brightness(1.05);
  animation: okpop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 答对:白圈 + 金色光环 */
.opt-ok::after {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 0 26px 8px rgba(255, 208, 66, 0.85);
}

@keyframes okpop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

.opt-bad {
  animation: shake 0.45s;
  filter: grayscale(0.55);
  opacity: 0.75;
}

.fly {
  position: absolute;
  left: 50%;
  top: -3px;
  font-size: 20px;
  font-weight: 900;
  color: #ffb400;
  text-shadow: 0 1px 0 #fff;
  animation: flyup 0.95s ease-out forwards;
  pointer-events: none;
}

@keyframes flyup {
  0% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -85px);
    opacity: 0;
  }
}

.stamp {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%) rotate(-8deg);
  background: linear-gradient(180deg, #ffab61, #ff7e3d);
  color: #fff;
  font-size: 32px;
  font-weight: 900;
  padding: 10px 24px;
  border-radius: 13px;
  border: 3px dashed rgba(255, 255, 255, 0.85);
  z-index: 30;
  pointer-events: none;
  white-space: nowrap;
  animation: stampin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes stampin {
  0% {
    transform: translate(-50%, -50%) rotate(-22deg) scale(2.3);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) rotate(-5deg) scale(0.92);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(-8deg) scale(1);
    opacity: 1;
  }
}

.stamp[hidden] {
  display: none;
}

/* 记一记卡 */
.fix-mask {
  position: absolute;
  inset: 0;
  background: rgba(58, 42, 20, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  animation: fadein 0.25s ease;
}

.fix-mask[hidden] {
  display: none;
}

.fix-card {
  width: 235px;
  background: #fff;
  border-radius: 15px;
  padding: 15px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: eipop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fix-head {
  font-size: 14px;
  font-weight: 900;
  color: #8a6b4a;
}

.fix-pinyin {
  margin-top: 5px;
  font-size: 20px;
  font-weight: 900;
  color: #e2732a;
  letter-spacing: 2px;
}

.fix-char {
  font-size: 70px;
  font-weight: 900;
  line-height: 1.15;
}

.fix-emoji {
  font-size: 28px;
}

.fix-hint {
  margin-top: 6px;
  font-size: 12px;
  color: #8a6b4a;
  background: #fff6ec;
  border-radius: 6px;
  padding: 4px 8px;
  line-height: 1.5;
}

.fix-btn {
  margin-top: 12px;
  background: linear-gradient(180deg, #4ed47e, #2fb55c);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  padding: 9px 26px;
  border-radius: 999px;
  box-shadow: 0 4px 0 #1f8a43;
  cursor: pointer;
  animation: eipulse 1.2s infinite;
}

/* 报幕引导卡 */
.exam-intro {
  position: fixed;
  inset: 0;
  background: rgba(58, 42, 20, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadein 0.3s ease;
  cursor: pointer;
}

.exam-intro[hidden] {
  display: none;
}

.ei-card {
  width: 280px;
  background: #fff;
  border-radius: 18px;
  padding: 22px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: eipop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ei-egg {
  font-size: 50px;
  animation: bounce 1.4s infinite;
}

.ei-title {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 900;
  color: #e2732a;
  letter-spacing: 2px;
}

.ei-sub {
  margin-top: 8px;
  font-size: 13px;
  color: #8a6b4a;
  font-weight: 700;
  text-align: center;
  line-height: 1.6;
}

.ei-btn {
  margin-top: 18px;
  background: linear-gradient(180deg, #4ed47e, #2fb55c);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  padding: 11px 28px;
  border-radius: 999px;
  box-shadow: 0 5px 0 #1f8a43;
  animation: eipulse 1.2s infinite;
}

/* ========== 结算 ========== */
.result {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-bottom: 15px;
}

.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cf {
  position: absolute;
  top: -35px;
  animation-name: fall;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}

@keyframes fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(92vh) rotate(560deg);
    opacity: 0.15;
  }
}

.r-mascot {
  font-size: 55px;
  animation: bounce 1.4s infinite;
}

.r-banner {
  margin-top: 7px;
  background: linear-gradient(90deg, #ffab61, #ff7e3d);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  padding: 8px 33px;
  border-radius: 11px;
  transform: rotate(-3deg);
  box-shadow: 0 5px 0 rgba(213, 102, 30, 0.55);
  letter-spacing: 2px;
  position: relative;
  overflow: hidden;
  animation: rbanner 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards;
}

@keyframes rbanner {
  from {
    transform: rotate(-3deg) scale(0.4);
    opacity: 0;
  }
  to {
    transform: rotate(-3deg) scale(1);
    opacity: 1;
  }
}

/* 横幅上扫过的光泽 */
.r-banner::after {
  content: '';
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -90px;
  width: 48px;
  transform: skewX(-24deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: bsheen 2.6s ease-in-out 1.1s infinite;
}

@keyframes bsheen {
  0% {
    left: -90px;
  }
  55%,
  100% {
    left: calc(100% + 44px);
  }
}

.review-page .r-banner {
  background: linear-gradient(90deg, #a58bff, #7a5bd6);
  box-shadow: 0 5px 0 rgba(104, 76, 190, 0.55);
}

.r-stars {
  margin-top: 17px;
  display: flex;
  align-items: center;
}

.r-star {
  font-size: 42px;
  opacity: 0.3;
}

.r-star.r-big {
  font-size: 62px;
  margin: 0 11px;
}

.r-star.show {
  opacity: 1;
  animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 0 12px rgba(255, 193, 7, 0.85));
}

.r-sub {
  margin-top: 13px;
  font-size: 15px;
  color: #8a6b4a;
  font-weight: 800;
}

.r-coin {
  margin-top: 7px;
  font-size: 13px;
  font-weight: 900;
  color: #d8911a;
  background: rgba(255, 246, 236, 0.95);
  border-radius: 999px;
  padding: 5px 14px;
  animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.r-review {
  margin-top: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.r-review-t {
  font-size: 12px;
  color: #8a6b4a;
  font-weight: 700;
}

.r-chips {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 330px;
}

.r-chip {
  width: 46px;
  height: 48px;
  background: #fff;
  border: 2.5px solid #ffe3c4;
  border-radius: 13px;
  margin-right: 7px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 0 4px 0 rgba(120, 80, 30, 0.12);
  cursor: pointer;
}

.r-btn {
  margin-top: 15px;
  width: 215px;
  text-align: center;
  background: linear-gradient(180deg, #4ed47e, #2fb55c);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  padding: 11px 0;
  border-radius: 999px;
  box-shadow: 0 5px 0 #1f8a43;
  cursor: pointer;
  letter-spacing: 1px;
}

.r-btn.r-alt {
  background: #fff;
  color: #e2732a;
  box-shadow: 0 5px 0 rgba(120, 80, 30, 0.14);
}

/* ========== 描红弹层(旧,保留兼容) ========== */
.write-mask {
  position: fixed;
  inset: 0;
  background: rgba(58, 42, 20, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  animation: fadein 0.25s ease;
}

.write-mask[hidden] {
  display: none;
}

/* ========== 描红内嵌区域(新) ========== */
.inline-write {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  opacity: 0;
}

.inline-write.iw-open {
  max-height: 500px;
  opacity: 1;
}

.iw-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffe3c4, transparent);
  margin: 10px 0 8px;
}

.iw-title {
  text-align: center;
  font-size: 15px;
  font-weight: 900;
  color: #e2732a;
}

.iw-progress {
  text-align: center;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  color: #e2732a;
  background: #fff6ec;
  border-radius: 999px;
  padding: 2px 12px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.iw-canvas-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.iw-canvas-wrap canvas.wcv {
  width: min(215px, 50vw);
  height: min(215px, 50vw);
  touch-action: none;
  border: 2px dashed #ffd6a8;
  border-radius: 14px;
  background: #fffdf8;
}

.iw-chick {
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 1em;
  height: 1.2em;
  font-size: 44px;
  pointer-events: none;
}

.iw-msg {
  text-align: center;
  min-height: 18px;
  font-size: 13px;
  font-weight: 800;
  color: #ff5a5a;
}

.iw-msg:empty {
  display: none;
}

.iw-done {
  text-align: center;
  min-height: 18px;
  font-size: 14px;
  font-weight: 900;
  color: #2e8a4f;
  animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.iw-done[hidden] {
  display: none;
}

.iw-btns {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  padding-bottom: 4px;
}

.iw-btn {
  background: #fff6ec;
  color: #e2732a;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(120, 80, 30, 0.1);
}

/* 写字小鸡装扮容器 */
.w-dance {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}

.write-card {
  width: 300px;
  background: #fff;
  border-radius: 18px;
  padding: 13px 15px 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: eipop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.w-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.w-title {
  font-size: 16px;
  font-weight: 900;
}

.w-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff6ec;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #b08356;
  font-weight: 900;
  cursor: pointer;
}

.w-progress {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  color: #e2732a;
  background: #fff6ec;
  border-radius: 999px;
  padding: 3px 12px;
}

.w-canvas-wrap canvas {
  width: 215px;
  height: 215px;
  margin-top: 5px;
  touch-action: none;
}

.w-msg {
  min-height: 20px;
  font-size: 13px;
  font-weight: 800;
  color: #ff5a5a;
}

.w-msg:empty {
  display: none;
}

.w-done {
  min-height: 20px;
  font-size: 14px;
  font-weight: 900;
  color: #2e8a4f;
  animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.w-done[hidden] {
  display: none;
}

.w-btns {
  margin-top: 6px;
  display: flex;
}

.w-btn {
  background: #fff6ec;
  color: #e2732a;
  font-size: 14px;
  font-weight: 900;
  padding: 8px 26px;
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(224, 162, 21, 0.25);
  margin: 0 6px;
  cursor: pointer;
}

/* ========== 故事 ========== */
.reader {
  flex: 1;
  margin: 8px 22px 10px;
  background: #fff;
  border: 4px solid #fff;
  border-radius: 24px;
  padding: 17px 18px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 12px 24px rgba(120, 80, 30, 0.18);
  min-height: 0;
  overflow-y: auto;
}

.scene {
  font-size: 85px;
  line-height: 1.15;
  animation: bounce 2.4s infinite;
}

.line {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tk {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.35;
  padding: 0 2px;
  cursor: pointer;
}

.tk-new {
  color: #b08356;
  border-bottom: 3px dotted #ffb367;
}

.pinyin-row {
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 17px;
}

.py {
  font-size: 10px;
  color: transparent;
  padding: 0 2px;
}

.py-new {
  color: #e2923a;
  font-weight: 800;
}

.play {
  margin-top: 13px;
  background: linear-gradient(180deg, #4ed47e, #2fb55c);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  padding: 8px 26px;
  border-radius: 999px;
  box-shadow: 0 4px 0 #1f8a43;
  cursor: pointer;
}

.dots {
  margin-top: 12px;
}

.dot {
  font-size: 11px;
  color: #e8dcc8;
  margin: 0 3px;
}

.dot.on {
  color: #ff8a3d;
}

.navs {
  display: flex;
  align-items: center;
  padding: 0 22px calc(10px + env(safe-area-inset-bottom));
  flex-shrink: 0;
}

.nav {
  width: 65px;
  height: 55px;
  background: #fff;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-right: 10px;
  box-shadow: 0 4px 0 rgba(120, 80, 30, 0.12);
  cursor: pointer;
}

.nav.dis {
  opacity: 0.35;
}

.nav.go {
  flex: 1;
  background: linear-gradient(180deg, #4ed47e, #2fb55c);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 4px 0 #1f8a43;
}

.done-mask {
  position: fixed;
  inset: 0;
  background: rgba(58, 42, 20, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadein 0.3s ease;
}

.done-card {
  width: 260px;
  background: #fff;
  border-radius: 18px;
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: eipop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.d-egg {
  font-size: 48px;
  animation: bounce 1.4s infinite;
}

.d-title {
  margin-top: 5px;
  font-size: 24px;
  font-weight: 900;
  color: #e2732a;
}

.d-sub {
  margin-top: 7px;
  font-size: 13px;
  color: #8a6b4a;
  font-weight: 700;
}

.d-btn {
  margin-top: 13px;
  width: 190px;
  text-align: center;
  background: linear-gradient(180deg, #4ed47e, #2fb55c);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  padding: 10px 0;
  border-radius: 999px;
  box-shadow: 0 4px 0 #1f8a43;
  cursor: pointer;
}

.d-btn.d-alt {
  background: #fff;
  color: #e2732a;
  box-shadow: 0 4px 0 rgba(120, 80, 30, 0.14);
}

/* ========== 商店 ========== */
.shop-page {
  height: 100%;
  display: flex;
  flex-direction: row;
  background: #fff6e9;
}

.shop-left {
  width: 38%;
  min-width: 140px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  background: linear-gradient(180deg, #ffe9c4, #fff6e9);
  flex-shrink: 0;
  position: relative;
}

.shop-left .exit {
  position: absolute;
  top: 10px;
  left: 10px;
}

.shop-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.shop-right-top {
  display: flex;
  justify-content: flex-end;
  padding: 10px 12px 0;
  flex-shrink: 0;
}

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.chick {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-body {
  font-size: 60px;
  line-height: 1;
  animation: bounce 1.6s infinite;
}

/* 旧 .c-hat/.c-face/.c-neck 槽位规则已并入统一的 .dz-* 中心锚定体系,此处不再需要 */

.s-title {
  margin-top: 5px;
  font-size: 18px;
  font-weight: 900;
  color: #7a4a12;
}

.s-sub {
  margin-top: 2px;
  font-size: 11px;
  color: #a5793c;
  font-weight: 700;
}

.coins {
  font-size: 15px;
  font-weight: 900;
  color: #d8911a;
  background: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(224, 162, 21, 0.35);
}

.shop-list {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 15px;
}

.shop-list .sec {
  background: #fff;
  border-radius: 14px;
  margin: 0 15px 12px;
  padding: 12px 13px;
  box-shadow: 0 5px 13px rgba(120, 80, 30, 0.1);
}

.sec-t {
  font-size: 14px;
  font-weight: 900;
  color: #7a4a12;
  margin-bottom: 9px;
}

.items {
  display: flex;
  flex-wrap: wrap;
}

.item {
  position: relative;
  width: 100px;
  background: #fff6ec;
  border: 2.5px solid #fff;
  border-radius: 16px;
  padding: 10px 0 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 8px;
  margin-bottom: 8px;
  box-shadow: 0 4px 0 rgba(224, 162, 21, 0.2);
  cursor: pointer;
}

.item:nth-child(3n) {
  margin-right: 0;
}

.item.owned {
  background: #eafaf0;
}

.item.on {
  background: linear-gradient(180deg, #ffe9b8, #ffd88a);
}

.item.poor {
  opacity: 0.55;
}

.i-emoji {
  font-size: 38px;
  line-height: 1.2;
}

.i-name {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  color: #6b4a26;
}

.i-badge {
  position: absolute;
  top: -7px;
  right: -4px;
  background: #ff5a5a;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 999px;
  border: 2px solid #fff;
}

.i-badge[hidden] {
  display: none;
}

.i-badge.i-new {
  background: #2fb55c;
}

.foot {
  text-align: center;
  font-size: 11px;
  color: #c9a878;
  font-weight: 700;
  padding: 3px 0 15px;
}

/* ========== 家长中心 ========== */
.parent-page {
  height: 100%;
  overflow-y: auto;
  padding: 12px 15px calc(20px + env(safe-area-inset-bottom));
  background: #fff6e9;
}

.gate {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gate-card {
  width: 280px;
  background: #fff;
  border-radius: 18px;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 9px 20px rgba(120, 80, 30, 0.18);
}

.gate-egg {
  font-size: 44px;
}

.gate-title {
  margin-top: 5px;
  font-size: 15px;
  font-weight: 800;
  color: #8a6b4a;
}

.gate-q {
  margin-top: 12px;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 2px;
}

.gate-input {
  margin-top: 14px;
  width: 140px;
  height: 46px;
  background: #fff6ec;
  border: none;
  border-radius: 10px;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  outline: none;
}

.gate-err {
  margin-top: 7px;
  font-size: 12px;
  color: #e64340;
  font-weight: 700;
}

.gate-btn {
  margin-top: 16px;
  background: linear-gradient(180deg, #4ed47e, #2fb55c);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  padding: 10px 28px;
  border-radius: 999px;
  box-shadow: 0 4px 0 #1f8a43;
  cursor: pointer;
}

.parent-page .sec {
  background: #fff;
  border-radius: 14px;
  padding: 13px 14px;
  margin-bottom: 12px;
  box-shadow: 0 5px 13px rgba(120, 80, 30, 0.1);
}

.stats {
  display: flex;
  margin-bottom: 7px;
}

.stats:last-of-type {
  margin-bottom: 0;
}

.stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff6ec;
  border-radius: 9px;
  padding: 8px 0;
  margin-right: 7px;
}

.stat:last-child {
  margin-right: 0;
}

.stat-n {
  font-size: 22px;
  font-weight: 900;
  color: #e2732a;
}

.stat-hot {
  color: #ff5a5a;
}

.stat-s {
  font-size: 12px;
  color: #b08356;
}

.stat-l {
  margin-top: 3px;
  font-size: 11px;
  color: #8a6b4a;
  font-weight: 700;
}

.worlds {
  margin-top: 10px;
}

.world {
  display: flex;
  align-items: center;
  padding: 5px 0;
}

.w-emoji {
  font-size: 16px;
  margin-right: 7px;
}

.w-title {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: #6b4a26;
}

.w-done {
  font-size: 12px;
  font-weight: 800;
  color: #b08356;
  background: #fff6ec;
  border-radius: 999px;
  padding: 3px 9px;
}

.w-done.w-full {
  color: #2e8a4f;
  background: #e3f5e9;
}

.chips {
  display: flex;
  flex-wrap: wrap;
}

.chip {
  width: 75px;
  background: #fff6ec;
  border-radius: 9px;
  padding: 7px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 7px;
  margin-bottom: 7px;
  cursor: pointer;
}

.chip:nth-child(4n) {
  margin-right: 0;
}

.chip-c {
  font-size: 22px;
  font-weight: 900;
}

.chip-p {
  margin-top: 1px;
  font-size: 10px;
  color: #b08356;
  font-weight: 700;
}

.days {
  display: flex;
  align-items: flex-end;
}

.day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 4px;
}

.d-nums {
  height: 20px;
  display: flex;
  gap: 2px;
  font-size: 10px;
  font-weight: 800;
}

.d-lv {
  color: #e2732a;
}

.d-rv {
  color: #7a5bd6;
}

.d-bar {
  width: 15px;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffc53d, #ff8a3d);
  margin-top: 3px;
}

.d-bar.d-empty {
  background: #f2e9da;
  height: 7px;
}

.d-label {
  margin-top: 5px;
  font-size: 10px;
  color: #8a6b4a;
  font-weight: 700;
}

.days-legend {
  margin-top: 9px;
  font-size: 11px;
  color: #b08356;
  font-weight: 700;
}

.row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #fff6ec;
}

.row:last-of-type {
  border-bottom: none;
}

.row-main {
  flex: 1;
}

.row-t {
  font-size: 14px;
  font-weight: 800;
}

.row-s {
  margin-top: 2px;
  font-size: 11px;
  color: #b08356;
  line-height: 1.5;
}

.switch {
  width: 22px;
  height: 22px;
}

.picker {
  font-size: 13px;
  font-weight: 800;
  color: #e2732a;
  background: #fff6ec;
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
}

.danger {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: #e64340;
  background: #ffecec;
  border-radius: 8px;
  padding: 10px 0;
  cursor: pointer;
}

.parent-page .foot {
  text-align: center;
  font-size: 11px;
  color: #c9a878;
  font-weight: 700;
  padding: 5px 0 10px;
}

/* 空状态 */
.empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 30px 60px;
  text-align: center;
}

.e-egg {
  font-size: 55px;
}

.e-title {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 900;
  color: #7a4a12;
}

.e-sub {
  margin-top: 8px;
  font-size: 13px;
  color: #8a6b4a;
  font-weight: 700;
  line-height: 1.7;
}

.e-btn {
  margin-top: 22px;
  background: #fff;
  color: #e2732a;
  font-size: 15px;
  font-weight: 900;
  padding: 10px 30px;
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(120, 80, 30, 0.16);
  cursor: pointer;
}

/* ========== 防误触确认弹层 ========== */
.confirm-mask {
  position: fixed;
  inset: 0;
  background: rgba(48, 38, 84, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: fadein 0.25s ease;
}

.confirm-card {
  width: 290px;
  background: #fff;
  border-radius: 20px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 20px 44rpx rgba(40, 30, 80, 0.35);
  animation: eipop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cf2-egg {
  font-size: 52px;
  animation: bounce 1.4s infinite;
}

.cf2-title {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 900;
  color: #3a3632;
}

.cf2-sub {
  margin-top: 6px;
  font-size: 13px;
  color: #8a6b4a;
  font-weight: 700;
  text-align: center;
  line-height: 1.6;
}

.cf2-stay {
  margin-top: 18px;
  width: 100%;
  text-align: center;
  background: linear-gradient(180deg, #4ed47e, #2fb55c);
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  padding: 13px 0;
  border-radius: 999px;
  box-shadow: 0 5px 0 #1f8a43;
  letter-spacing: 2px;
  cursor: pointer;
  animation: eipulse 1.2s infinite;
}

.cf2-leave {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 800;
  color: #b3a48c;
  background: #f2e9da;
  padding: 8px 26px;
  border-radius: 999px;
  cursor: pointer;
}

/* ========== 小朋友友好的返回按钮(全面屏无系统返回,出口全部可视化) ========== */
/* 子页面大号胶囊返回:地图 */
.exit.exit-pill {
  width: auto;
  min-width: 92px;
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 900;
  color: #7a4a12;
}

/* 家长口算门的逃生口:小朋友算不出题也能回去玩 */
.gate-esc {
  margin-top: 16px;
  background: #fff6ec;
  color: #e2732a;
  font-size: 17px;
  font-weight: 900;
  padding: 13px 48px;
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(224, 162, 21, 0.3);
  cursor: pointer;
  animation: eipulse 1.6s infinite;
}

/* 家长中心主界面返回 */
.p-back {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 999px;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 900;
  color: #7a4a12;
  box-shadow: 0 4px 0 rgba(120, 80, 30, 0.14);
  margin-bottom: 12px;
  cursor: pointer;
}

/* ================================================================
   酷炫特效层(网页版专属):地图场景 / 门屏 / 转场 / 光泽 / 粒子
   全部只动视觉,不动业务;动画只用 transform/opacity,保证 iPad 流畅
   ================================================================ */

/* —— 粒子特效容器(fx.js 用)—— */
.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 800; /* 盖过弹层,低于 toast 和门屏 */
  pointer-events: none;
  overflow: hidden;
}

.fx-p {
  position: absolute;
  line-height: 1;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12));
}

/* —— 页面进舱转场(低龄体感:从中心放大出现,像推开一扇门)—— */
.page-in {
  height: 100%; /* 路由容器必须有确定高度,否则地图/滚动区会被内容撑开,页面无法内部滚动 */
  animation: pagezoom 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 低龄体感:地图 ↔ 闯关类页面(learn/review/story)的「推进」转场 ——
   新页从中心放大弹出(带一点过冲),体感是地图被推远、新世界迎面而来 */
.page-zoom {
  animation: pagepush 0.46s cubic-bezier(0.3, 1.2, 0.45, 1) both;
}

@keyframes pagepush {
  from { opacity: 0; transform: scale(0.74); }
  70% { opacity: 1; transform: scale(1.015); }
  to { opacity: 1; transform: scale(1); }
}

/* 商店开场:小鸡从地图方向(左下)一路飞进预览台,QQ 秀开场 */
.chick.fly-in {
  animation: chickflyin 0.78s cubic-bezier(0.3, 1.15, 0.4, 1) both;
}

@keyframes chickflyin {
  from { transform: translate(-72vw, 52vh) scale(0.35) rotate(-26deg); opacity: 0; }
  45% { opacity: 1; }
  to { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
}

@keyframes pagezoom {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

.page-in .home-topbar,
.page-in .topbar,
.page-in .shop-left {
  animation: slidedown 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* 首页顶栏自带流光动画,转场结束后接上 */
.page-in .home-topbar {
  animation: slidedown 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards, tbflow 9s ease-in-out 0.5s infinite;
}

.page-in .map-inner,
.page-in .card,
.page-in .ask,
.page-in .reader,
.page-in .result,
.page-in .stage,
.page-in .empty,
.page-in .sec {
  animation: risein 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.page-in .footer,
.page-in .navs {
  animation: slideup 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s backwards;
}

@keyframes slidedown {
  from { transform: translateY(-24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes risein {
  from { transform: translateY(26px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideup {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* —— 启动门屏:太阳 / 云朵 / 星星 —— */
.gate-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.g-sun {
  position: absolute;
  top: 7%;
  right: 12%;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe0 0 30%, #ffe27a 58%, rgba(255, 220, 110, 0.25) 74%, transparent 78%);
}

.g-sun::before,
.md-sun::before {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 219, 96, 0.55) 0deg 8deg, transparent 8deg 21deg);
  -webkit-mask: radial-gradient(circle, transparent 0 44%, #000 52% 62%, transparent 70%);
  mask: radial-gradient(circle, transparent 0 44%, #000 52% 62%, transparent 70%);
  animation: sunspin 24s linear infinite;
}

@keyframes sunspin {
  to { transform: rotate(360deg); }
}

.g-cl {
  position: absolute;
  left: 0;
  transform: translateX(-15vw);
  animation-name: gcloudfly;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes gcloudfly {
  from { transform: translateX(-15vw); }
  to { transform: translateX(115vw); }
}

.g-tw {
  position: absolute;
  animation: gtwinkle 1.9s ease-in-out infinite;
}

@keyframes gtwinkle {
  0%, 100% { transform: scale(0.75) rotate(-8deg); opacity: 0.5; }
  50% { transform: scale(1.2) rotate(8deg); opacity: 1; }
}

#gate .gate-egg {
  font-size: 110px;
  animation: eggbounce 1.6s ease-in-out infinite;
  filter: drop-shadow(0 12px 10px rgba(120, 80, 30, 0.22));
}

@keyframes eggbounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  28% { transform: translateY(-18px) scale(0.97, 1.04); }
  46% { transform: translateY(0) scale(1.05, 0.92); }
  62% { transform: translateY(-7px) scale(1, 1); }
  80% { transform: translateY(0) scale(1.02, 0.98); }
}

#gate .gate-title {
  margin-top: 14px;
  font-size: 40px;
  letter-spacing: 3px;
  animation: titlefloat 3.2s ease-in-out infinite;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #gate .gate-title {
    background: linear-gradient(180deg, #ff9a3d, #ef6c17);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

@keyframes titlefloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

#gate .gate-hint {
  box-shadow: 0 4px 0 rgba(120, 80, 30, 0.12);
}

#gate.ready .gate-hint {
  box-shadow: 0 6px 0 rgba(31, 138, 67, 0.5), 0 0 26px rgba(78, 212, 126, 0.75);
}

/* —— 地图场景:太阳 / 流云 / 小鸟 / 草地小花 —— */
.map-decor {
  position: absolute;
  inset: 0;
  z-index: 1; /* 压在背景上,躲在路径(2)和小鸡节点(3)下面 */
  pointer-events: none;
}

.md-sun {
  position: absolute;
  top: 26px;
  right: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe0 0 30%, #ffe27a 58%, rgba(255, 220, 110, 0.25) 74%, transparent 78%);
}

.md-sun::before {
  inset: -18px;
}

.md-cl {
  position: absolute;
  left: 0;
  transform: translateX(-90px);
  animation-name: cloudfly;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes cloudfly {
  from { transform: translateX(-90px); }
  to { transform: translateX(660px); }
}

.md-bird {
  position: absolute;
  left: 0;
  font-size: 22px;
  transform: translateX(-60px);
  animation-name: birdfly;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes birdfly {
  0% { transform: translateX(-60px) translateY(0); }
  25% { transform: translateX(150px) translateY(-16px); }
  50% { transform: translateX(330px) translateY(2px); }
  75% { transform: translateX(500px) translateY(-14px); }
  100% { transform: translateX(680px) translateY(0); }
}

/* —— 地图节点与横幅的出场动画 —— */
.banner {
  animation: bannerin 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes bannerin {
  from { transform: translateX(-50%) translateY(-26px) scale(0.8); opacity: 0; }
  to { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

.node {
  animation: nodein 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes nodein {
  from { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  70% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* 世界横幅配色(跟该世界关卡的主色呼应) */
.banner-t0 { background: linear-gradient(90deg, #fffdf9, #ffe7d1); }
.banner-t1 { background: linear-gradient(90deg, #fffdf9, #d8f3ec); }
.banner-t2 { background: linear-gradient(90deg, #fffdf9, #d9ebff); }
.banner-t3 { background: linear-gradient(90deg, #fffdf9, #e4f4d2); }
.banner-t4 { background: linear-gradient(90deg, #fffdf9, #ffe3ec); }
.banner-t5 { background: linear-gradient(90deg, #fffdf9, #e9e2ff); }
.banner-t6 { background: linear-gradient(90deg, #fffdf9, #fff0c9); }
.banner-t7 { background: linear-gradient(90deg, #fffdf9, #ffdfdf); }

/* 当前关:呼吸光环 + 轻轻摇摆 */
.node-current::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 75px;
  height: 75px;
  margin-left: -37.5px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 18px 4px rgba(255, 214, 90, 0.8);
  animation: halo 1.9s ease-out infinite;
  pointer-events: none;
}

@keyframes halo {
  0% { transform: scale(1); opacity: 0.9; }
  75% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.node-current .node-face {
  animation: nodewob 2.4s ease-in-out infinite;
}

@keyframes nodewob {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

/* 已通关 / 已解锁的小故事:头上闪一颗小星星 */
.node-done .node-face::after {
  content: '✨';
  position: absolute;
  top: -7px;
  left: -6px;
  font-size: 15px;
  animation: twinkle 1.7s ease-in-out infinite;
}

.node-open .node-face::after {
  content: '✨';
  position: absolute;
  top: -7px;
  right: -4px;
  font-size: 15px;
  animation: twinkle 1.9s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { transform: scale(0.75) rotate(-10deg); opacity: 0.55; }
  50% { transform: scale(1.15) rotate(10deg); opacity: 1; }
}

.node-open .story-tag {
  background: linear-gradient(180deg, #4ed47e, #2fb55c);
  color: #fff;
  box-shadow: 0 2px 0 #1f8a43;
}

/* —— 金币跳动 / 连击火焰 —— */
.tb-coins.bump {
  animation: coinbump 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes coinbump {
  0% { transform: scale(1); }
  40% { transform: scale(1.3) rotate(-4deg); }
  100% { transform: scale(1); }
}

/* 顶栏徽章放得下 🔥12 */
.topbar .exit.ph {
  width: auto;
  min-width: 36px;
  padding: 0 7px;
  border-radius: 999px;
}

.topbar .exit.ph.hot {
  background: linear-gradient(180deg, #ffb066, #ff7e3d);
  box-shadow: 0 3px 0 rgba(213, 102, 30, 0.55), 0 0 16px rgba(255, 140, 40, 0.7);
  animation: firepulse 1s ease-in-out infinite;
}

@keyframes firepulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

/* —— 结算页:背后旋转的光芒 —— */
.result::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 38%;
  width: 950px;
  height: 950px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 213, 79, 0.13) 0deg 11deg,
    rgba(255, 213, 79, 0) 11deg 25deg
  );
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 72%);
  mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 72%);
  animation: rayspin 18s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.review-page .result::before {
  background: repeating-conic-gradient(
    from 0deg,
    rgba(165, 139, 255, 0.14) 0deg 11deg,
    rgba(165, 139, 255, 0) 11deg 25deg
  );
}

@keyframes rayspin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 让结算内容站在光芒上面(撒花保持原层) */
.result > *:not(.confetti) {
  position: relative;
  z-index: 1;
}

/* —— 主按钮:扫过的光泽 —— */
.next,
.r-btn,
.cf2-stay {
  position: relative;
  overflow: hidden;
}

.next::before,
.r-btn::before,
.cf2-stay::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 44%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: bsheen2 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bsheen2 {
  0% { left: -80%; }
  45%, 100% { left: 135%; }
}

/* —— 故事页 —— */
.scene {
  filter: drop-shadow(0 10px 8px rgba(120, 80, 30, 0.18));
}

.tk {
  transition: background-color 0.15s ease;
}

.tk:active {
  background: #fff3d2;
  border-radius: 8px;
}

.dot.on {
  text-shadow: 0 0 8px rgba(255, 138, 61, 0.8);
}

/* —— 商店 —— */
.item.on {
  box-shadow: 0 0 0 3px rgba(255, 184, 77, 0.9), 0 3px 0 rgba(224, 162, 21, 0.35);
}

.item .i-emoji {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.item:active .i-emoji {
  transform: scale(1.25) rotate(-8deg);
}

/* —— 空状态:蛋蛋飘一飘 —— */
.e-egg {
  animation: floaty 2.6s ease-in-out infinite;
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* —— 减少动态偏好时,关掉纯装饰动画 —— */
@media (prefers-reduced-motion: reduce) {
  .md-cl,
  .md-bird,
  .md-sun::before,
  .g-cl,
  .g-tw,
  .g-sun::before,
  .bar::after,
  .r-banner::after,
  .next::before,
  .r-btn::before,
  .cf2-stay::before,
  .result::before {
    animation: none !important;
  }
}

/* ================================================================
   二阶精修(参考洪恩识字那种厚实立体的游戏化质感):
   描边大标题 / 宝石关卡泡泡 / 树林草地装饰 / 星星底座 / 糖果立体按钮
   ================================================================ */

/* —— 描边标题:本体画白描边,伪元素画渐变填充(伪元素 z-index:-1 会盖住 background-clip 填充,不能反过来) —— */
.tb-title {
  position: relative;
  z-index: 0;
  letter-spacing: 1px;
  -webkit-text-stroke: 6px rgba(255, 255, 255, 0.95);
  color: transparent;
}

.tb-title::before {
  content: attr(data-t);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background: linear-gradient(92deg, #e8641f, #f59e1b 55%, #ff5c8a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
}

#gate .gate-title {
  position: relative;
  z-index: 0;
  font-size: 44px;
  -webkit-text-stroke: 9px #fff;
  color: transparent;
}

#gate .gate-title::before {
  content: attr(data-t);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, #ff9a3d, #ef6c17);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
}

/* —— 门屏气球 —— */
.g-balloon {
  position: absolute;
  bottom: 15%;
  font-size: 38px;
  animation: gbsway 3.6s ease-in-out infinite;
}

@keyframes gbsway {
  0%, 100% { transform: translateY(0) rotate(-7deg); }
  50% { transform: translateY(-20px) rotate(7deg); }
}

/* —— 地图装饰:树林 / 气球 / 蝴蝶蜜蜂 / 小星星 —— */
.md-tree {
  position: absolute;
  opacity: 0.95;
  filter: drop-shadow(0 3px 2px rgba(70, 110, 30, 0.25));
}

.md-balloon {
  position: absolute;
  font-size: 28px;
  animation: mbsway 3.8s ease-in-out infinite;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.12));
}

@keyframes mbsway {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-16px) rotate(5deg); }
}

.md-fly {
  position: absolute;
  font-size: 20px;
  animation-name: bffly;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes bffly {
  0% { transform: translate(0, 0) rotate(10deg); }
  25% { transform: translate(130px, -26px) rotate(-10deg); }
  50% { transform: translate(250px, 8px) rotate(10deg); }
  75% { transform: translate(370px, -22px) rotate(-10deg); }
  100% { transform: translate(480px, 0) rotate(10deg); }
}

.md-sp {
  position: absolute;
  font-size: 13px;
  opacity: 0.75;
  animation: twinkle 2.1s ease-in-out infinite;
}

/* —— 关卡:宝石泡泡质感 —— */
.node {
  width: 96px;
}

.node-face {
  width: 84px;
  height: 84px;
  font-size: 40px;
  border: 5px solid #fff;
}

.node-no {
  width: 26px;
  height: 26px;
  font-size: 14px;
  top: -7px;
  right: -7px;
  border-width: 2.5px;
}

/* 每个世界的宝石配色:顶部高光 + 底部阴影,像一颗颗糖果 */
.node-t0 .node-face {
  background: radial-gradient(circle at 50% 28%, #ffc998, #ff8a3d 62%, #ef6c1c);
  box-shadow: 0 7px 0 #d95a2e, inset 0 5px 7px rgba(255, 255, 255, 0.55), inset 0 -9px 12px rgba(0, 0, 0, 0.14);
}
.node-t1 .node-face {
  background: radial-gradient(circle at 50% 28%, #8fe6cd, #35b295 62%, #238068);
  box-shadow: 0 7px 0 #1f8a72, inset 0 5px 7px rgba(255, 255, 255, 0.55), inset 0 -9px 12px rgba(0, 0, 0, 0.14);
}
.node-t2 .node-face {
  background: radial-gradient(circle at 50% 28%, #9ed6ff, #3d8ef7 62%, #2769c9);
  box-shadow: 0 7px 0 #2b6fd0, inset 0 5px 7px rgba(255, 255, 255, 0.55), inset 0 -9px 12px rgba(0, 0, 0, 0.14);
}
.node-t3 .node-face {
  background: radial-gradient(circle at 50% 28%, #c8ec8f, #5cb532 62%, #429421);
  box-shadow: 0 7px 0 #47931f, inset 0 5px 7px rgba(255, 255, 255, 0.55), inset 0 -9px 12px rgba(0, 0, 0, 0.14);
}
.node-t4 .node-face {
  background: radial-gradient(circle at 50% 28%, #ffc3d2, #f76e97 62%, #de5480);
  box-shadow: 0 7px 0 #d94e78, inset 0 5px 7px rgba(255, 255, 255, 0.55), inset 0 -9px 12px rgba(0, 0, 0, 0.14);
}
.node-t5 .node-face {
  background: radial-gradient(circle at 50% 28%, #cfc0ff, #8b6ef3 62%, #6c50d6);
  box-shadow: 0 7px 0 #6c4fd1, inset 0 5px 7px rgba(255, 255, 255, 0.55), inset 0 -9px 12px rgba(0, 0, 0, 0.14);
}
.node-t6 .node-face {
  background: radial-gradient(circle at 50% 28%, #ffe7a3, #f5a623 62%, #d88a0a);
  box-shadow: 0 7px 0 #c97410, inset 0 5px 7px rgba(255, 255, 255, 0.55), inset 0 -9px 12px rgba(0, 0, 0, 0.14);
}
.node-t7 .node-face {
  background: radial-gradient(circle at 50% 28%, #ffb3b3, #f25c5c 62%, #d43c3c);
  box-shadow: 0 7px 0 #d14343, inset 0 5px 7px rgba(255, 255, 255, 0.55), inset 0 -9px 12px rgba(0, 0, 0, 0.14);
}
.node-locked .node-face,
.node-story.node-locked .node-face {
  background: radial-gradient(circle at 50% 28%, #e6e1da, #b3aca2 62%, #9a9288);
  box-shadow: 0 7px 0 #948d83, inset 0 5px 7px rgba(255, 255, 255, 0.5), inset 0 -9px 12px rgba(0, 0, 0, 0.12);
}
.node-story.node-open .node-face {
  background: radial-gradient(circle at 50% 28%, #a9f0dc, #3dbd9b 62%, #2b9a7d);
  box-shadow: 0 7px 0 #2b9a7d, inset 0 5px 7px rgba(255, 255, 255, 0.55), inset 0 -9px 12px rgba(0, 0, 0, 0.14);
}

/* 星星挂在小圆牌上 */
.node-stars {
  margin-top: 6px;
  font-size: 15px;
  letter-spacing: 3px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 2px 10px 2px 13px;
  box-shadow: 0 3px 0 rgba(120, 80, 30, 0.12);
  color: #e3d9c8;
}

/* 当前关:头上跳动的小白箭头 */
.node-current::after {
  content: '';
  position: absolute;
  top: -38px;
  left: 50%;
  margin-left: -12px;
  border: 12px solid transparent;
  border-top: 15px solid #fff;
  filter: drop-shadow(0 3px 2px rgba(120, 80, 30, 0.3));
  animation: gobounce 1s ease-in-out infinite;
}

@keyframes gobounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-9px); opacity: 0.85; }
}

/* 光环跟着加大的一圈 */
.node-current::before {
  width: 84px;
  height: 84px;
  margin-left: -42px;
  border-width: 4px;
}

.node-done .node-face::after {
  top: -9px;
  left: -9px;
  font-size: 17px;
}

.node-open .node-face::after {
  top: -9px;
  right: -6px;
  font-size: 17px;
}

/* 世界横幅:厚实指示牌 */
.banner {
  border: 3px solid #fff;
  padding: 7px 19px;
  box-shadow: 0 5px 0 rgba(120, 80, 30, 0.14), 0 10px 16px rgba(120, 80, 30, 0.1);
}

.b-title {
  font-size: 17px;
}

.b-done {
  background: #fff;
  font-weight: 900;
  box-shadow: inset 0 1px 3px rgba(120, 80, 30, 0.12);
}

/* —— 答题选项:糖果方块 —— */
.opt {
  height: 92px;
  border-radius: 20px;
  border: 4px solid rgba(255, 255, 255, 0.95);
  font-size: 46px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}

.opt-c0 { background: linear-gradient(180deg, #ffb08c, #ff7e50); box-shadow: 0 7px 0 #d95a2e, inset 0 5px 7px rgba(255, 255, 255, 0.4), inset 0 -9px 12px rgba(0, 0, 0, 0.1); }
.opt-c1 { background: linear-gradient(180deg, #7dd2fb, #3aa6e8); box-shadow: 0 7px 0 #2a83b8, inset 0 5px 7px rgba(255, 255, 255, 0.4), inset 0 -9px 12px rgba(0, 0, 0, 0.1); }
.opt-c2 { background: linear-gradient(180deg, #ffe08a, #ffbe30); box-shadow: 0 7px 0 #dd9a12, inset 0 5px 7px rgba(255, 255, 255, 0.45), inset 0 -9px 12px rgba(0, 0, 0, 0.08); color: #6b4e00; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.45); }
.opt-c3 { background: linear-gradient(180deg, #b8e374, #7cc23b); box-shadow: 0 7px 0 #5f9c26, inset 0 5px 7px rgba(255, 255, 255, 0.4), inset 0 -9px 12px rgba(0, 0, 0, 0.1); }

/* —— 主按钮:加厚立体感 —— */
.next,
.r-btn {
  border: 3px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 6px 0 #1f8a43, inset 0 4px 6px rgba(255, 255, 255, 0.4);
  font-size: 17px;
  letter-spacing: 2px;
}

.r-btn {
  width: 232px;
  padding: 13px 0;
}

.r-btn.r-alt {
  background: #fff;
  color: #e2732a;
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 0 rgba(120, 80, 30, 0.14);
}

.cf2-stay {
  box-shadow: 0 6px 0 #1f8a43, inset 0 4px 6px rgba(255, 255, 255, 0.4);
}

/* —— 结算:星星底座 + 厚横幅 —— */
.r-mascot {
  font-size: 66px;
  filter: drop-shadow(0 10px 8px rgba(120, 80, 30, 0.2));
}

.r-banner {
  border: 3px solid #fff;
  border-radius: 16px;
  font-size: 26px;
  padding: 9px 36px;
  box-shadow: 0 7px 0 rgba(213, 102, 30, 0.5);
}

.review-page .r-banner {
  box-shadow: 0 7px 0 rgba(104, 76, 190, 0.5);
}

.r-star {
  width: 76px;
  height: 76px;
  font-size: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 34%, #ffffff, #ffedcf 78%);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 5px 0 rgba(213, 102, 30, 0.22), inset 0 -5px 8px rgba(0, 0, 0, 0.05);
}

.r-star.r-big {
  width: 98px;
  height: 98px;
  font-size: 58px;
  margin: 0 11px;
}

/* —— 认字卡:笔顺画框 + 大拼音 —— */
.pinyin {
  font-size: 27px;
}

.lcv {
  border: 3px dashed #ffd0a6;
  border-radius: 18px;
  background: #fffdf9;
}

.card-head {
  padding: 8px 14px;
}

.ch-t {
  font-size: 15px;
  letter-spacing: 1px;
}

/* —— 商店金币盘 —— */
.coins {
  border: 2.5px solid #fff;
  box-shadow: 0 3px 0 rgba(224, 162, 21, 0.35);
}

/* —— 首页顶栏更厚的底边 —— */
.home-topbar {
  box-shadow: 0 4px 0 rgba(224, 162, 21, 0.35);
}

/* —— 太阳更亮一点 —— */
.md-sun {
  width: 66px;
  height: 66px;
}

/* ================================================================
   三环节(认/写/玩)+ QQ秀商店
   ================================================================ */

/* —— 顶栏三环节指示器 —— */
.ph-row {
  margin-top: 5px;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.ph-it {
  font-size: 11px;
  font-weight: 900;
  color: #b3a48c;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  padding: 3px 10px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, color 0.25s ease;
}

.ph-row[data-on='0'] .ph-it:nth-child(1),
.ph-row[data-on='1'] .ph-it:nth-child(2),
.ph-row[data-on='2'] .ph-it:nth-child(3) {
  color: #fff;
  background: linear-gradient(180deg, #4ed47e, #2fb55c);
  box-shadow: 0 2px 0 #1f8a43;
  transform: scale(1.1);
}

/* 通关后三个环节全部点亮 */
.ph-row[data-on='3'] .ph-it {
  color: #2e8a4f;
  background: #eafaf0;
}

/* —— 商店:分类页签 —— */
.shop-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 7px;
  padding: 9px 15px;
  overflow-x: auto;
  background: linear-gradient(180deg, #ffe9c4 65%, rgba(255, 233, 196, 0));
  scrollbar-width: none;
}

.shop-tabs::-webkit-scrollbar {
  display: none;
}

.shop-tab {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 900;
  color: #7a4a12;
  background: #fff;
  padding: 7px 14px;
  border-radius: 999px;
  border: 2.5px solid #fff;
  box-shadow: 0 3px 0 rgba(224, 162, 21, 0.25);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.shop-tab.on {
  background: linear-gradient(180deg, #ffb066, #ff7e3d);
  color: #fff;
  box-shadow: 0 3px 0 #d95a2e;
  transform: scale(1.06);
}

/* —— 商店预览台:QQ 秀式大立绘(1em × 1.2em,与参考图 500×602 等比) —— */
.chick {
  width: 1em;
  height: 1.2em;
}

/* 商店预览台与地图小鸡的装扮槽位统一走 .dz-* / .m-* 两套定位 */

/* 地图小鸡的特效光环 */
.m-fx {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  z-index: 0;
  animation: fxpulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes fxpulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.16); opacity: 0.65; }
}

/* —— 首页小吉祥物的同款槽位 —— */
.m-hand {
  position: absolute;
  right: -15px;
  top: 6px;
  font-size: 16px;
  z-index: 2;
}

.m-fx {
  inset: -10px;
  font-size: 46px;
}

/* ================================================================
   可玩性改造 P0:世界皮肤 / 限时点字 / 连击狂热 / 评级
   皮肤靠 CSS 变量换,8 个世界共用同一套样式,不写 8 遍
   ================================================================ */

/* —— 8 套世界场景(与地图 node-t0~t7 配色对齐)—— */
.sub-page {
  --w-bg: linear-gradient(180deg, rgba(255, 231, 194, 0.55) 0%, rgba(255, 248, 236, 0.72) 100%), url('/assets/bg/w1.webp');
  --w-accent: #ff8a3d;
  --w-soft: rgba(255, 255, 255, 0.72);
  position: relative;
  background: var(--w-bg);
  background-size: cover;
  background-position: center top;
  transition: background 0.45s ease;
}

/* 世界背景图(半透明世界色遮罩保证字卡可读,图片透出场景感) */
.sub-page.w2 { --w-bg: linear-gradient(180deg, rgba(205, 239, 226, 0.5) 0%, rgba(242, 251, 247, 0.7) 100%), url('/assets/bg/w2.webp'); --w-accent: #2fa98c; }
.sub-page.w3 { --w-bg: linear-gradient(180deg, rgba(201, 231, 255, 0.5) 0%, rgba(239, 248, 255, 0.7) 100%), url('/assets/bg/w3.webp'); --w-accent: #3d8ef7; }
.sub-page.w4 { --w-bg: linear-gradient(180deg, rgba(216, 240, 192, 0.5) 0%, rgba(246, 251, 236, 0.7) 100%), url('/assets/bg/w4.webp'); --w-accent: #5cb532; }
.sub-page.w5 { --w-bg: linear-gradient(180deg, rgba(255, 217, 228, 0.5) 0%, rgba(255, 244, 246, 0.7) 100%), url('/assets/bg/w5.webp'); --w-accent: #f76e97; }
.sub-page.w6 { --w-bg: linear-gradient(180deg, rgba(232, 222, 255, 0.5) 0%, rgba(248, 245, 255, 0.7) 100%), url('/assets/bg/w6.webp'); --w-accent: #8b6ef3; }
.sub-page.w7 { --w-bg: linear-gradient(180deg, rgba(255, 233, 168, 0.5) 0%, rgba(255, 251, 240, 0.7) 100%), url('/assets/bg/w7.webp'); --w-accent: #f5a623; }
.sub-page.w8 { --w-bg: linear-gradient(180deg, rgba(255, 214, 214, 0.5) 0%, rgba(255, 243, 243, 0.7) 100%), url('/assets/bg/w8.webp'); --w-accent: #f25c5c; }

/* 场景粒子要压在内容下面 */
.sub-page > .topbar,
.sub-page > .body,
.sub-page > .fever-tag {
  position: relative;
  z-index: 1;
}

.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.scene .sp {
  position: absolute;
  top: -8%;
  line-height: 1;
  opacity: 0.45;
  animation-name: scene-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes scene-fall {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(115vh) rotate(200deg); }
}

/* —— 限时点字:字铺满屏 + 顶部倒计时条(quiz-ui 渲染 .tap-bar/.tap-fill/.tap-target)—— */
.ask-tap .q-stage {
  height: 118px;
}

.tap-bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 3px rgba(120, 80, 30, 0.18);
  overflow: hidden;
  margin-bottom: 10px;
}

.tap-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #5fd0b2, #2fa98c);
  transition: width 0.08s linear;
}

.ask-tap .tap-fill {
  background: linear-gradient(90deg, #ffc53d, #f25c5c);
}

/* 限时点字的字卡飘在 .opts 区域内(由 startTap 绝对定位),这里给容器高度 */
.ask-tap .opts {
  position: relative;
  min-height: 330px;
}

.tap-target {
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
  cursor: pointer;
  user-select: none;
  box-shadow: 0 5px 0 rgba(120, 80, 30, 0.18);
  animation: charpop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  transition: transform 0.15s ease;
}

.tap-target:active {
  transform: scale(0.92);
}

/* —— 狂热:连对 3 题以上,整页换金色 —— */
.sub-page.fever .track {
  box-shadow: 0 0 14px rgba(255, 150, 0, 0.55);
}

.sub-page.fever .bar {
  background: linear-gradient(90deg, #ffd21f, #ff6a00);
}

.sub-page.fever .card,
.sub-page.fever .ask {
  box-shadow: 0 8px 0 rgba(255, 140, 0, 0.18);
}

.fever-tag {
  position: absolute;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 5px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb020, #f25c00);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 0 rgba(150, 60, 0, 0.35);
  pointer-events: none;
  animation: fever-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fever-pop {
  from { transform: translateX(-50%) scale(0.6); opacity: 0; }
}

/* —— 结算评级 S / A / B / C —— */
.r-grade {
  width: 64px;
  height: 64px;
  margin: 0 auto 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(180deg, #c7c4bc, #8b877e);
  box-shadow: 0 5px 0 #6b675f;
  animation: grade-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s backwards;
}

.r-grade[data-grade='S'] {
  background: linear-gradient(180deg, #ffe08a, #ff8a3d);
  box-shadow: 0 5px 0 #d95f13, 0 0 24px rgba(255, 150, 40, 0.65);
}

.r-grade[data-grade='A'] {
  background: linear-gradient(180deg, #ffa3c7, #f25c8a);
  box-shadow: 0 5px 0 #cf3a6d;
}

.r-grade[data-grade='B'] {
  background: linear-gradient(180deg, #7fc9ff, #3d8ef7);
  box-shadow: 0 5px 0 #2b6fd0;
}

@keyframes grade-in {
  from { transform: scale(0.3) rotate(-28deg); opacity: 0; }
}

.r-coin-detail {
  display: block;
  font-size: 13px;
  opacity: 0.85;
  margin-top: 2px;
}

/* ================================================================
   可玩性改造(P0):句子填空 / 形近辨析 / 笔顺挑战 / 拼字 / 连线 / BOSS / 随机事件 / 成长层
   ================================================================ */

/* —— 句子填空 / 形近辨析 / 笔顺挑战(四选一变体)—— */
.q-fill {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 2px;
  text-align: center;
  line-height: 1.7;
  color: #4a3520;
}

.q-blank {
  display: inline-block;
  min-width: 38px;
  padding: 0 4px;
  margin: 0 2px;
  text-align: center;
  color: #ff8a3d;
  border-bottom: 4px solid #ff8a3d;
}

.q-pinyin {
  font-size: 42px;
  font-weight: 900;
  color: #3d8ef7;
}

.q-stroke-char {
  font-size: 72px;
  font-weight: 900;
  color: #4a3520;
}

.q-odd-tip {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 800;
  color: #8a6b4a;
}

/* —— 拼字 / 连线(拖拽交互,网页版用点击模拟)—— */
.ask-match .q-stage {
  display: none;
}

.match-area {
  margin-top: 12px;
}

.m-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.m-part {
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 900;
  color: #4a3520;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 5px 0 rgba(120, 80, 30, 0.16);
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease, opacity 0.2s ease;
}

.m-part:active {
  transform: scale(0.93);
}

.m-part.used {
  opacity: 0.32;
  pointer-events: none;
  filter: grayscale(0.6);
}

.m-slot {
  margin: 16px auto 6px;
  width: 160px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.85);
  border: 3px dashed #cbb38f;
  border-radius: 14px;
}

.m-slot-q {
  font-size: 30px;
  color: #cbb38f;
}

.m-slot-p {
  font-size: 34px;
  font-weight: 900;
  color: #4a3520;
}

.m-slot.ok {
  border-style: solid;
  border-color: #2fa98c;
  background: #d9f7e9;
  box-shadow: 0 5px 0 #1f8a72;
  animation: okpop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.m-result {
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  color: #8a6b4a;
}

.m-cols {
  display: flex;
  gap: 16px;
  justify-content: center;
  position: relative;
}

/* 连线画布:铺满连线区,只画线不挡点击 */
.m-lines {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.m-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 160px;
  position: relative;
  z-index: 1;
}

.m-chip {
  padding: 12px 6px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(120, 80, 30, 0.12);
  font-size: 26px;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease;
}

.m-chip:active {
  transform: scale(0.95);
}

.m-char {
  color: #4a3520;
}

.m-word {
  color: #3d8ef7;
}

.m-chip.sel {
  outline: 3px solid #ff8a3d;
  outline-offset: 2px;
}

/* 已连线:轻提示但保留可点(点击拆线重连) */
.m-chip.used {
  opacity: 0.85;
  background: #f2fbf6;
  box-shadow: 0 4px 0 #9be3b4;
}

/* 连错的线两端:标红抖动 */
.m-chip.bad {
  animation: shake 0.45s;
  outline: 3px solid #ff5a5a;
  outline-offset: 2px;
}

/* 一键清空重连 */
.m-reset {
  position: absolute;
  right: 0;
  bottom: -6px;
  z-index: 2;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid #ffe0b2;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  color: #b08356;
  cursor: pointer;
  user-select: none;
}

.m-reset:active {
  transform: scale(0.94);
}

/* 重连 + 换一对 并排放在右下角(连错卡住时换一对词组,不卡关) */
.m-link-actions {
  position: absolute;
  right: 0;
  bottom: -6px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.m-link-actions .m-reset {
  position: static;
}

/* —— BOSS 横幅 —— */
.boss-banner {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  padding: 6px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6a3df5, #3d1f9e);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 0 rgba(40, 20, 120, 0.4);
  pointer-events: none;
  animation: fever-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sub-page.is-boss .track {
  box-shadow: 0 0 14px rgba(120, 60, 255, 0.6);
}

.sub-page.is-boss .bar {
  background: linear-gradient(90deg, #b18cff, #6a3df5);
}

/* —— 随机事件浮标(幸运星 / 神秘蛋)—— */
.evt-float {
  position: absolute;
  top: 90px;
  left: 50%;
  z-index: 7;
  font-size: 44px;
  pointer-events: none;
  transform: translateX(-50%);
  animation: evt-rise 1.6s ease-out forwards;
}

@keyframes evt-rise {
  0% { transform: translate(-50%, 0) scale(0.4); opacity: 0; }
  20% { opacity: 1; transform: translate(-50%, -10px) scale(1.2); }
  100% { transform: translate(-50%, -120px) scale(1); opacity: 0; }
}

/* —— 结算成长层(等级 / 集字册 / 成就)—— */
.r-grow {
  margin: 6px 0 4px;
  text-align: center;
}

.r-lv {
  font-size: 15px;
  font-weight: 900;
  color: #6b4e00;
}

.r-col {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 700;
  color: #8a6b4a;
}

.r-ach {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.r-ach-pill {
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a, #ff8a3d);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 4px 0 #d95f13;
  animation: grade-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* ================================================================
   集字册 / 成就页(网页版)
   ================================================================ */
.col-page {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, #fff7ec, #ffeede);
  padding: 0 14px 30px;
}

.col-xp {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.col-lv {
  font-size: 14px;
  font-weight: 900;
  color: #6b4e00;
  white-space: nowrap;
}

.col-xpbar {
  flex: 1;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 3px rgba(120, 80, 30, 0.18);
  overflow: hidden;
}

.col-xpfill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd21f, #ff8a3d);
}

.col-xptxt {
  font-size: 12px;
  font-weight: 800;
  color: #8a6b4a;
  white-space: nowrap;
}

.col-stats {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.col-st {
  font-size: 13px;
  font-weight: 800;
  color: #8a6b4a;
}

.col-st b {
  color: #4a3520;
  font-size: 15px;
}

.col-legend {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.lg {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  color: #fff;
}

.lg-seen { background: #3d8ef7; }
.lg-written { background: #2fa98c; }
.lg-used { background: #f5a623; }
.lg-locked { background: #b9aa90; }

.col-group {
  padding: 0;
}

.col-ghead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  margin-bottom: 8px;
  box-shadow: 0 4px 0 rgba(120, 80, 30, 0.1);
}

.col-gemoji {
  font-size: 22px;
}

.col-gtitle {
  font-weight: 900;
  color: #5a4528;
  flex: 1;
}

.col-gcount {
  font-size: 12px;
  font-weight: 800;
  color: #8a6b4a;
}

.col-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.col-tile {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 26px;
  font-weight: 900;
  color: #4a3520;
  background: #fff;
  box-shadow: 0 4px 0 rgba(120, 80, 30, 0.12);
  position: relative;
  cursor: pointer;
  user-select: none;
}

.col-tile.col-seen { background: #e3f0ff; color: #3d8ef7; }
.col-tile.col-written { background: #e0f5ec; color: #2fa98c; }
.col-tile.col-used { background: #fff0cf; color: #d98a13; box-shadow: 0 4px 0 #c97410; }
.col-tile.col-locked { background: #efe9df; color: #c4b79f; box-shadow: none; cursor: default; }
.col-tile.col-used::after {
  content: '⭐';
  position: absolute;
  top: -5px;
  right: -4px;
  font-size: 14px;
}

.col-ach {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ach-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(120, 80, 30, 0.1);
}

.ach-icon {
  font-size: 28px;
}

.ach-main {
  flex: 1;
}

.ach-name {
  font-weight: 900;
  color: #4a3520;
}

.ach-desc {
  font-size: 12px;
  color: #8a6b4a;
}

.ach-locked {
  opacity: 0.6;
  filter: grayscale(0.5);
}

.ach-locked .ach-name {
  color: #9a8c74;
}

/* ================================================================
   三阶:UI 重设计(「识字冒险」新设计稿:温暖琥珀橙 + 奶油底 +
   圆角 3D 按钮体系)。本段落在文件末尾,同特异性下覆盖前两阶。
   涉及:地图首页 / 认字卡片 / 趣味答题 / 通关奖励 / 全局门屏与按钮
   ================================================================ */

/* —— 品牌设计 tokens(与设计稿 :root 一致)—— */
:root {
  /* 单品牌主色:温暖琥珀橙 */
  --sz-primary-50: #fff8ed;
  --sz-primary-100: #ffefd4;
  --sz-primary-200: #ffdba8;
  --sz-primary-300: #ffc06d;
  --sz-primary-400: #ff9f33;
  --sz-primary-500: #f6830a;
  --sz-primary-600: #d96805;
  --sz-primary-700: #b44d08;
  --sz-primary-800: #923c0f;
  --sz-primary-900: #783210;
  /* 中性色(暖) */
  --sz-neutral-0: #ffffff;
  --sz-neutral-50: #fefaf5;
  --sz-neutral-100: #f7f1e8;
  --sz-neutral-200: #ede3d6;
  --sz-neutral-300: #decdb8;
  --sz-neutral-400: #c8b092;
  --sz-neutral-500: #a68b6a;
  --sz-neutral-600: #856d50;
  --sz-neutral-700: #6b5640;
  --sz-neutral-800: #4f3f31;
  --sz-neutral-900: #352a21;
  /* 表面 */
  --sz-background: #fff8ed;
  --sz-foreground: #352a21;
  --sz-card: #ffffff;
  --sz-muted: #f7f1e8;
  --sz-muted-foreground: #856d50;
  --sz-border: #ede3d6;
  /* 语义状态色 */
  --sz-state-success: #3dbb7c;
  --sz-state-success-bg: #e6f7ee;
  --sz-state-warning: #f5a623;
  --sz-state-error: #ef5b5b;
  --sz-state-error-bg: #ffecec;
  --sz-state-info: #5aa6e8;
  --sz-state-info-bg: #e8f4fd;
  /* 阴影:仅用于浮动层 */
  --sz-shadow-sm: 0 1px 2px rgba(53, 42, 33, 0.04);
  --sz-shadow-md: 0 8px 24px -8px rgba(53, 42, 33, 0.12);
  --sz-shadow-lg: 0 24px 60px -16px rgba(53, 42, 33, 0.18);
}

html,
body {
  background: var(--sz-background);
  color: var(--sz-foreground);
}

.home-page {
  background: var(--sz-background);
}

/* —— 解锁门:换暖奶油底 —— */
#gate {
  background: linear-gradient(180deg, #ffdba8 0%, #ffefd4 30%, #fff8ed 62%, #fff3dd 100%);
}

#gate.ready .gate-hint {
  background: linear-gradient(180deg, var(--sz-primary-400), var(--sz-primary-500));
  box-shadow: 0 6px 0 var(--sz-primary-700), 0 0 26px rgba(246, 131, 10, 0.55);
}

/* —— 通用:主 CTA 全部换成琥珀橙 3D 按钮 —— */
.next {
  background: linear-gradient(180deg, var(--sz-primary-400), var(--sz-primary-500));
  box-shadow: 0 6px 0 var(--sz-primary-700), 0 10px 20px rgba(180, 77, 8, 0.28);
  font-size: 17px;
}

.r-btn {
  background: linear-gradient(180deg, var(--sz-primary-400), var(--sz-primary-500));
  box-shadow: 0 6px 0 var(--sz-primary-700), 0 8px 16px rgba(246, 131, 10, 0.3);
}

.r-btn.r-alt {
  background: var(--sz-card);
  color: var(--sz-primary-700);
  border: 2px solid var(--sz-primary-200);
  box-shadow: var(--sz-shadow-sm);
}

.fix-btn,
.ei-btn {
  background: linear-gradient(180deg, var(--sz-primary-400), var(--sz-primary-500));
  box-shadow: 0 5px 0 var(--sz-primary-700);
}

.t-claim {
  background: linear-gradient(180deg, var(--sz-primary-400), var(--sz-primary-500));
}

.t-claim.t-hot {
  background: linear-gradient(180deg, #ff9f33, #f6830a);
}

/* —— 顶栏胶囊条(学习/复习页)+ 连击徽章 —— */
.exit {
  border: 2px solid var(--sz-border);
  box-shadow: var(--sz-shadow-sm);
}

.exit.exit-pill {
  width: auto;
  height: auto;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--sz-foreground);
  background: var(--sz-card);
}

/* 连击徽章:🔥 连击 xN 胶囊 */
.exit.ph {
  width: auto;
  height: auto;
  min-width: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 800;
  color: var(--sz-primary-700);
  background: var(--sz-card);
  border: 2px solid var(--sz-primary-200);
  box-shadow: var(--sz-shadow-sm);
}

.exit.ph svg {
  width: 18px;
  height: 18px;
  color: var(--sz-primary);
  flex-shrink: 0;
}

.exit.ph.hot {
  color: #fff;
  background: linear-gradient(180deg, #ff9f33, #f6830a);
  border-color: var(--sz-primary-500);
  box-shadow: 0 4px 0 var(--sz-primary-700), var(--sz-shadow-md);
  animation: eipulse 1.2s infinite;
}

.exit.ph.hot svg {
  color: #ffe066;
}

/* 进度条与文案 */
.track {
  background: var(--sz-neutral-100);
}

.bar {
  background: linear-gradient(90deg, var(--sz-primary-300), var(--sz-primary-500));
}

.label {
  color: var(--sz-muted-foreground);
}

/* 三环节指示:胶囊化(认一认 → 写一写 → 玩一玩) */
.ph-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 5px;
}

.ph-it {
  font-size: 10px;
  font-weight: 700;
  color: var(--sz-muted-foreground);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--sz-border);
  border-radius: 999px;
  padding: 2px 8px;
  transition: all 0.25s ease;
}

.ph-it + .ph-it::before {
  content: none;
}

.ph-row[data-on] .ph-it {
  opacity: 0.55;
}

.ph-row .ph-it:nth-child(1) { }
.ph-row[data-on='0'] .ph-it:nth-child(1),
.ph-row[data-on='1'] .ph-it:nth-child(2),
.ph-row[data-on='2'] .ph-it:nth-child(3),
.ph-row[data-on='3'] .ph-it {
  opacity: 1;
  color: #fff;
  background: linear-gradient(180deg, var(--sz-primary-400), var(--sz-primary-500));
  border-color: transparent;
  box-shadow: 0 3px 0 rgba(180, 77, 8, 0.35);
}

/* ================================================================
   一、地图首页
   ================================================================ */

/* 顶栏:奶油→桃色竖向渐变胶囊条 */
.home-topbar {
  background: linear-gradient(180deg, var(--sz-primary-200) 0%, var(--sz-background) 100%);
  box-shadow: none;
}

.home-topbar .tb-title {
  -webkit-text-stroke: 0;
  background: none;
  color: var(--sz-primary-800);
  font-size: 20px;
  letter-spacing: 1px;
}

.home-topbar .tb-title::before {
  content: none;
}

.tb-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
}

.tb-pill {
  font-size: 12px;
  font-weight: 700;
  color: var(--sz-neutral-700);
  background: rgba(255, 255, 255, 0.8);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(53, 42, 33, 0.08);
  box-shadow: none;
  cursor: pointer;
}

.tb-pill.tb-stars,
.tb-pill.tb-coins {
  color: var(--sz-primary-700);
  font-weight: 800;
}

/* hero:挥手小公主 + 对话气泡(悬浮在地图左侧天空上,与背景融为一体) */
.home-hero {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 6;
  width: 136px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 8px;
  pointer-events: none;
  background: none;
}

.hero-chick {
  width: 84px;
  height: 98px;
  flex-shrink: 0;
}

.chick-wave {
  animation: chickwave 2.2s ease-in-out infinite;
  transform-origin: 48px 90px;
}

@keyframes chickwave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-4deg); }
  75% { transform: rotate(4deg); }
}

.hero-bubble {
  position: relative;
  padding: 8px 10px;
  border-radius: var(--sz-radius-lg, 16px);
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid #a9d6ef;
  box-shadow: 0 4px 12px rgba(60, 110, 160, 0.16);
  font-size: 12px;
  font-weight: 700;
  color: var(--sz-primary-800);
  text-align: center;
  line-height: 1.4;
}

.hero-bubble::after {
  content: '';
  position: absolute;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 10px;
  border-color: transparent transparent transparent #fff;
}

/* 地图舞台:暖奶油底 + 浅草色地面循环(横屏) */
.map-inner {
  background-image: linear-gradient(
    90deg,
    #fff8ed 0%,
    #fdf1de 22%,
    #fdf3e3 58%,
    #f2f4e2 78%,
    #e8efd2 90%,
    #f4eedd 97%,
    #fff8ed 100%
  );
  border: 2px solid var(--sz-border);
  border-radius: 16px;
  box-shadow: var(--sz-shadow-md);
}

/* 小路:米黄路基 + 橙色虚线中线(设计稿双层路径) */
.link {
  height: 14px;
  background: #f7d99c;
  border-radius: 999px;
  background-image: none;
  box-shadow: 0 2px 0 rgba(180, 77, 8, 0.1);
}

.link::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 4.5px;
  height: 5px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(246, 131, 10, 0.5) 0 8px, transparent 8px 20px);
}

/* 世界横幅:白卡 + 世界色徽章 */
.banner {
  background: var(--sz-card);
  border: 2px solid var(--sz-border);
  border-radius: 16px;
  padding: 8px 16px;
  box-shadow: var(--sz-shadow-md);
  gap: 8px;
}

.b-emoji {
  width: 38px;
  height: 38px;
  margin-right: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 2px solid #fff;
  box-shadow: 0 3px 0 rgba(53, 42, 33, 0.12);
}

.banner-t0 .b-emoji { background: linear-gradient(180deg, #ffb066, #ff7e3d); }
.banner-t1 .b-emoji { background: linear-gradient(180deg, #5fd0b2, #2fa98c); }
.banner-t2 .b-emoji { background: linear-gradient(180deg, #6fbcff, #3d8ef7); }
.banner-t3 .b-emoji { background: linear-gradient(180deg, #a8d95e, #5cb532); }
.banner-t4 .b-emoji { background: linear-gradient(180deg, #ff9cba, #f76e97); }
.banner-t5 .b-emoji { background: linear-gradient(180deg, #b39dff, #8b6ef3); }
.banner-t6 .b-emoji { background: linear-gradient(180deg, #ffd36b, #f5a623); }
.banner-t7 .b-emoji { background: linear-gradient(180deg, #ff9a9a, #f25c5c); }

.b-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--sz-foreground);
}

.b-done {
  font-size: 11px;
  font-weight: 700;
  color: var(--sz-muted-foreground);
  background: var(--sz-neutral-100);
  padding: 3px 9px;
  border-radius: 999px;
}

/* 关卡节点:圆形圆点 + 白描边 + 3D 底影(状态配色,替代宝石渐变) */
.node {
  width: 92px;
}

.node-face {
  width: 62px;
  height: 62px;
  font-size: 29px;
  font-weight: 800;
  border: 3px solid #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 0 rgba(53, 42, 33, 0.12), var(--sz-shadow-md);
  text-shadow: none;
}

.node-face > svg {
  display: block;
}

/* 已完成:金色 + 绿色底影 */
.node-done .node-face {
  background: linear-gradient(180deg, #ffe066, #f5c518);
  color: var(--sz-primary-900);
  box-shadow: 0 6px 0 rgba(61, 187, 124, 0.4), var(--sz-shadow-md);
}

/* 当前关:品牌橙 + 加大 + 双层脉冲光环 */
.node-current .node-face {
  width: 76px;
  height: 76px;
  font-size: 36px;
  background: linear-gradient(180deg, var(--sz-primary-400), var(--sz-primary-500));
  box-shadow: 0 8px 0 rgba(246, 131, 10, 0.35), var(--sz-shadow-lg);
}

.node-current .node-face::before,
.node-current .node-face::after {
  content: '';
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  border: 3px solid var(--sz-primary-300);
  animation: nodepulse 1.8s ease-out infinite;
  pointer-events: none;
}

.node-current .node-face::after {
  animation-delay: 0.6s;
}

@keyframes nodepulse {
  0% { transform: scale(0.92); opacity: 0.8; }
  100% { transform: scale(1.32); opacity: 0; }
}

/* 锁定:暖灰 + 锁图标 */
.node-locked .node-face,
.node-story.node-locked .node-face {
  background: var(--sz-neutral-200);
  color: var(--sz-neutral-500);
  box-shadow: 0 4px 0 rgba(53, 42, 33, 0.08), var(--sz-shadow-sm);
}

.node-lock {
  width: 24px;
  height: 24px;
}

/* 小故事节点:保留绿色 */
.node-story .node-face {
  background: linear-gradient(180deg, #7fe3c8, #3dbd9b);
}

/* 节点标签:第 X 关 / 已完成 */
.node-label {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sz-neutral-600);
  line-height: 1;
}

.node-label-current {
  color: var(--sz-primary-700);
  font-weight: 800;
}

.node-label-done {
  color: var(--sz-state-success);
}

.node-stars {
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(53, 42, 33, 0.22);
}

.node-stars .on {
  color: #f5a623;
  text-shadow: 0 0 6px rgba(245, 166, 35, 0.8);
}

.story-tag {
  color: #2d7a4d;
  background: rgba(255, 255, 255, 0.92);
}

/* 地图小鸡:SVG 形象 + 装扮层坐标微调 */
.mascot {
  width: 64px;
  height: 56px;
}

.m-chick {
  width: 50px;
  height: 58px;
}

.m-hat {
  top: -8px;
  font-size: 16px;
}

.m-face {
  top: 16px;
  font-size: 14px;
}

.m-neck {
  bottom: 0;
  font-size: 12px;
}

.m-body {
  font-size: 0;
}

/* 地图右侧留白:别让任务条压住最后一关 */
.home-map {
  padding-right: 108px;
  padding-bottom: 0;
}

/* 底部任务条(替代右下角悬浮球) */
.task-badge {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  max-width: 468px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--sz-card);
  border: 2px solid var(--sz-primary-200);
  box-shadow: var(--sz-shadow-lg);
  z-index: 20;
  cursor: pointer;
  animation: risein 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.task-badge-coin {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffe066, #f5c518);
  border: 2px solid #fff;
  box-shadow: 0 4px 0 rgba(53, 42, 33, 0.12);
}

.task-badge-coin svg {
  width: 26px;
  height: 26px;
}

.task-badge-main {
  flex: 1;
  min-width: 0;
}

.task-badge-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--sz-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-badge-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--sz-muted-foreground);
}

.task-badge-go {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--sz-primary-500);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 4px 0 rgba(180, 77, 8, 0.35);
}

.task-badge:active .task-badge-go {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(180, 77, 8, 0.35);
}

.task-badge .task-dot {
  top: -4px;
  right: -4px;
}

/* 复习气球:让出底部任务条的位置 */
.balloon {
  bottom: calc(104px + env(safe-area-inset-bottom));
}

/* ================================================================
   二、认字卡片
   ================================================================ */

.card {
  margin: 10px 16px 12px;
  background: var(--sz-card);
  border-radius: 16px;
  border: 2px solid var(--sz-border);
  padding: 0 16px 14px;
  box-shadow: var(--sz-shadow-md);
}

.card-head {
  margin: 0 -16px 6px;
  background: linear-gradient(90deg, var(--sz-primary-400), var(--sz-primary-500));
  border-radius: 13px 13px 0 0;
  padding: 7px 14px;
}

.ch-t {
  font-size: 13px;
}

.lcv {
  width: 216px;
  height: 216px;
}

/* 拼音行:大拼音 + 圆形音频按钮 */
.pinyin-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  position: relative;
  z-index: 1;
}

/* 认字卡上的字 canvas:固定 216x216,避免被旧 .lcv 的 min(235px,55vw)
   在宽屏下撑大,把下面的拼音行挡住 */
.char-tap > .lcv {
  width: 216px !important;
  height: 216px !important;
  display: block;
  margin: 0 auto;
}

.pinyin {
  font-size: 26px;
  font-weight: 800;
  color: var(--sz-primary-600);
  letter-spacing: 2px;
  line-height: 1.3;
  padding: 2px 0;
}

.audio-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sz-primary-100);
  color: var(--sz-primary-500);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}

.audio-btn:active {
  transform: scale(0.92);
}

.audio-btn svg {
  width: 18px;
  height: 18px;
}

/* 吉祥物记忆条:小鸡 + 气泡 */
.mascot-speech {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.mascot-speech[hidden] {
  display: none;
}

.ms-chick {
  width: 52px;
  height: 60px;
  flex-shrink: 0;
  animation: chickbob 2.4s ease-in-out infinite;
}

@keyframes chickbob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.ms-bubble {
  flex: 1;
  position: relative;
  padding: 10px 14px;
  border-radius: 14px;
  border-top-left-radius: 4px;
  background: var(--sz-card);
  border: 2px solid var(--sz-primary-200);
  box-shadow: var(--sz-shadow-sm);
  font-size: 14px;
  line-height: 1.5;
  color: var(--sz-foreground);
}

.ms-bubble strong {
  color: var(--sz-primary-700);
}

.tip {
  background: var(--sz-neutral-100);
  border-radius: 10px;
  color: var(--sz-neutral-700);
}

/* 组词:两列词卡 */
.words-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  cursor: pointer;
}

.word-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--sz-card);
  border: 1px solid var(--sz-border);
  border-radius: 12px;
  box-shadow: var(--sz-shadow-sm);
}

.word-card:active {
  transform: scale(0.97);
}

.w-txt {
  flex: 1;
  font-size: 19px;
  font-weight: 800;
  color: var(--sz-foreground);
  text-align: center;
}

.w-audio {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sz-primary-100);
  color: var(--sz-primary-500);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.w-audio svg {
  width: 14px;
  height: 14px;
}

/* 例句卡 */
.sentence {
  margin-top: 8px;
  background: var(--sz-card);
  border: 1px solid var(--sz-border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--sz-foreground);
  box-shadow: var(--sz-shadow-sm);
  gap: 10px;
}

.s-audio {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sz-primary-100);
  color: var(--sz-primary-500);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.s-audio svg {
  width: 16px;
  height: 16px;
}

/* 看笔顺:全宽虚线按钮 */
.stroke-btn {
  margin-top: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  border-radius: 14px;
  background: var(--sz-card);
  color: var(--sz-primary-600);
  border: 2px dashed var(--sz-primary-300);
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.stroke-btn:active {
  transform: scale(0.98);
  background: var(--sz-primary-50);
}

.stroke-btn svg {
  width: 20px;
  height: 20px;
}

/* 底部操作栏 */
.footer {
  gap: 8px;
}

.f-btn {
  width: 56px;
  height: 58px;
  border-radius: 16px;
  background: var(--sz-card);
  border: 1px solid var(--sz-border);
  box-shadow: var(--sz-shadow-sm);
}

/* ================================================================
   三、趣味答题
   ================================================================ */

.ask {
  padding: 8px 18px 14px;
}

/* 题面:白卡居中 */
.q-head {
  margin-top: 6px;
  background: var(--sz-card);
  border-radius: 16px;
  border: 1px solid var(--sz-border);
  box-shadow: var(--sz-shadow-md);
  padding: 14px 14px;
}

.q-egg {
  font-size: 24px;
}

.q-text {
  font-size: 16px;
  font-weight: 800;
  color: var(--sz-foreground);
  text-align: center;
}

.q-stage {
  background: var(--sz-card);
  border: 1px solid var(--sz-border);
  border-radius: 16px;
  box-shadow: var(--sz-shadow-sm);
}

.q-audio-icon {
  font-size: 40px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--sz-primary-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.q-audio-txt {
  color: var(--sz-muted-foreground);
  font-weight: 700;
}

.q-hint {
  color: var(--sz-neutral-700);
  background: var(--sz-card);
  border: 1px solid var(--sz-border);
}

/* 选项:全宽列式彩色大按钮(字母圈 + 大字) */
.opts {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-content: stretch;
}

.opt {
  width: 100%;
  height: 58px;
  margin-bottom: 0;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 10px;
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 5px 0 rgba(53, 42, 33, 0.14);
}

.opt:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 rgba(53, 42, 33, 0.14);
}

.opt-letter {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.opt-char {
  flex: 1;
  text-align: center;
  line-height: 1;
}

.opt-c0 { background: linear-gradient(180deg, #ff9f33, #f6830a); box-shadow: 0 5px 0 var(--sz-primary-700); }
.opt-c1 { background: linear-gradient(180deg, #5ad88a, #3dbb7c); box-shadow: 0 5px 0 #2b9463; }
.opt-c2 { background: linear-gradient(180deg, #72b9f5, #5aa6e8); box-shadow: 0 5px 0 #3d7fb5; }
.opt-c3 { background: linear-gradient(180deg, #ffd66b, #f5a623); box-shadow: 0 5px 0 #c97e12; color: #6b4e00; }
.opt-c3 .opt-letter { color: #6b4e00; }

/* 限时点字:飘字保持方块小卡,不显示字母圈 */
.tap-target {
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 16px;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tap-target .opt-letter {
  display: none;
}

.tap-target .opt-char {
  flex: none;
}

/* 窄屏兜底:字卡固定 58px 在 < 420px 容器里会顶满格子,缩小到 46px 给网格留出间距 */
@media (max-width: 420px) {
  .tap-target {
    width: 46px;
    height: 46px;
    font-size: 24px;
    border-radius: 13px;
  }
}

.tap-bar {
  background: var(--sz-neutral-100);
}

/* 图章反馈:居中白卡(答对啦 / 时间到) */
.stamp {
  background: rgba(255, 255, 255, 0.97);
  color: var(--sz-state-success);
  border: 2px solid var(--sz-primary-100);
  border-radius: 16px;
  font-size: 26px;
  padding: 14px 32px;
  box-shadow: var(--sz-shadow-lg);
}

/* 记一记卡 / 报幕卡 */
.fix-card,
.ei-card {
  border-radius: 16px;
  border: 1px solid var(--sz-border);
  box-shadow: var(--sz-shadow-lg);
}

.fix-pinyin {
  color: var(--sz-primary-600);
}

.fix-head,
.ei-sub,
.fix-hint {
  color: var(--sz-muted-foreground);
}

.ei-title {
  color: var(--sz-primary-600);
}

/* 部件拼字 / 连线配对(拖拽类)保持可用性,仅调圆角阴影 */
.m-part,
.m-chip {
  border-radius: 14px;
}

/* ================================================================
   四、通关奖励
   ================================================================ */

.result {
  justify-content: flex-start;
  overflow-y: auto;
  padding: 10px 16px 26px;
  gap: 6px;
}

.result::-webkit-scrollbar {
  display: none;
}

.r-banner {
  margin-top: 4px;
  background: linear-gradient(90deg, var(--sz-primary-400), var(--sz-primary-500));
  box-shadow: 0 5px 0 var(--sz-primary-700);
  font-size: 21px;
}

/* 评级奖牌 */
.r-medal {
  margin-top: 4px;
  filter: drop-shadow(0 12px 24px rgba(246, 131, 10, 0.25));
  animation: medalpop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards;
}

.r-medal .medal-svg {
  width: 128px;
  height: 160px;
  display: block;
}

@keyframes medalpop {
  from { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}

.r-stars {
  margin-top: 4px;
}

.r-star {
  font-size: 36px;
}

.r-star.r-big {
  font-size: 54px;
  margin: 0 9px;
}

.r-sub {
  margin-top: 4px;
  font-size: 14px;
  color: var(--sz-muted-foreground);
  font-weight: 700;
}

/* 奖励卡片行:金币 / 星星 / 新字卡 */
.r-rewards {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  width: min(100%, 330px);
}

.r-reward-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 6px 10px;
  background: var(--sz-card);
  border: 1px solid var(--sz-border);
  border-radius: 16px;
  box-shadow: var(--sz-shadow-md);
  animation: risein 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.r-reward-card:nth-child(2) {
  animation-delay: 0.1s;
}

.r-reward-card:nth-child(3) {
  animation-delay: 0.2s;
}

.r-reward-card > svg,
.rr-star {
  width: 34px;
  height: 34px;
  display: block;
}

.rr-num {
  font-size: 17px;
  font-weight: 800;
  color: var(--sz-foreground);
}

.rr-cap {
  font-size: 11px;
  color: var(--sz-muted-foreground);
}

.r-coin {
  color: var(--sz-primary-700);
  background: var(--sz-primary-50);
  border: 1px solid var(--sz-primary-100);
}

/* 欢呼小鸡 + 气泡 */
.r-cheer {
  margin-top: 6px;
  display: flex;
  justify-content: center;
}

.r-cheer-wrap {
  position: relative;
  padding-top: 34px;
}

.r-cheer-chick {
  width: 106px;
  height: 106px;
  display: block;
  animation: chickjump 0.95s ease-in-out infinite;
}

/* 结算页欢呼小公主(带装扮):同 1em × 1.2em 场景盒,情绪动画由 cm-celebrate 自带 */
.r-cheer-chick-box {
  position: relative;
  width: 1em;
  height: 1.2em;
  font-size: 76px;
  margin: 0 auto;
}

@keyframes chickjump {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-14px) scale(1.03); }
}

.r-speech {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sz-card);
  border: 1px solid var(--sz-border);
  padding: 5px 12px;
  border-radius: 12px;
  box-shadow: var(--sz-shadow-sm);
  font-size: 13px;
  font-weight: 800;
  color: var(--sz-foreground);
  white-space: nowrap;
}

.r-speech::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  background: var(--sz-card);
  border-right: 1px solid var(--sz-border);
  border-bottom: 1px solid var(--sz-border);
}

/* 成长行 / 复习 chips / 按钮 */
.r-grow {
  font-size: 12px;
  color: var(--sz-muted-foreground);
}

.r-lv,
.r-col {
  color: var(--sz-muted-foreground);
  font-weight: 700;
}

.r-chip {
  border: 2px solid var(--sz-primary-100);
  border-radius: 12px;
  box-shadow: var(--sz-shadow-sm);
}

.r-btn {
  margin-top: 12px;
}

/* ================================================================
   五、其余页面按钮统一(商店/家长中心/故事/集字册继承品牌色)
   ================================================================ */

.e-btn {
  background: linear-gradient(180deg, var(--sz-primary-400), var(--sz-primary-500));
  box-shadow: 0 5px 0 var(--sz-primary-700);
}

.w-btn {
  background: linear-gradient(180deg, var(--sz-primary-400), var(--sz-primary-500));
  box-shadow: 0 5px 0 var(--sz-primary-700);
}

.w-done {
  color: var(--sz-state-success);
}

/* ================================================================
   低龄体感(IMPROVE-KIDS):小鸡情绪 / 共享装扮 / 答题陪伴 /
   物理特效 / 宝箱结算 / 地图小世界 / 进度条小鸡 / 按钮回弹
   原则:反馈靠动画和 emoji,不靠文字
   ================================================================ */

/* —— 一、小鸡情绪系统:cm-{mood} 驱动 SVG 内 .cm-body 的动作 —— */
.cm {
  overflow: visible; /* 头顶的 ⭐🔥💤 允许冒出画布 */
}

.cm .cm-body {
  transform-origin: 48px 96px; /* 脚底为轴:蹦跳/歪头都像站在地上 */
}

/* 待机:轻轻呼吸 */
.cm-idle .cm-body {
  animation: cmbreathe 2.8s ease-in-out infinite;
}

@keyframes cmbreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.02); }
}

/* 答对:蹦一下 */
.cm-happy .cm-body {
  animation: cmjump 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 连对:连蹦两下 */
.cm-excited .cm-body {
  animation: cmjump 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 2;
}

@keyframes cmjump {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-13px) scale(1.04, 0.97); }
  100% { transform: translateY(0) scale(1); }
}

/* 狂热:高速蹦跳 + 火焰光晕 */
.cm-fever {
  filter: drop-shadow(0 0 6px rgba(255, 120, 0, 0.75));
}

.cm-fever .cm-body {
  animation: cmfever 0.42s ease-in-out infinite;
}

@keyframes cmfever {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(-4deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-6px) rotate(4deg); }
}

/* 答错:头歪一下 */
.cm-sad .cm-body {
  animation: cmsad 0.5s ease both;
}

@keyframes cmsad {
  0% { transform: rotate(0); }
  35% { transform: rotate(-7deg) translateY(2px); }
  100% { transform: rotate(0); }
}

/* 加油:摇摇头举拳头 */
.cm-encourage .cm-body {
  animation: cmcheer 1s ease;
}

@keyframes cmcheer {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-4px); }
  30% { transform: translateX(4px); }
  45% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  75% { transform: translateY(-6px); }
}

/* 好奇:歪头凑近看 */
.cm-curious .cm-body {
  animation: cmlean 1.5s ease;
}

@keyframes cmlean {
  0% { transform: rotate(0); }
  40% { transform: rotate(8deg) translateY(2px); }
  100% { transform: rotate(0); }
}

/* 通关庆祝:转圈跳舞 */
.cm-celebrate .cm-body {
  animation: cmdance 0.9s ease-in-out infinite;
}

@keyframes cmdance {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-9px) rotate(-9deg); }
  50% { transform: translateY(0) rotate(0); }
  75% { transform: translateY(-9px) rotate(9deg); }
}

/* 睡觉:慢呼吸 */
.cm-sleep .cm-body {
  animation: cmbreathe 3.6s ease-in-out infinite;
}

/* —— 二、共享装扮渲染:dz-* 槽位(商店/地图/答题/认字/结算同一只小鸡)——
   容器只定 font-size(=小鸡宽度),槽位全部用 em 等比缩放 */
/* —— 装扮槽位:中心锚定体系(任何分辨率/平台都稳) ——
   原理:人物图在所有场景盒子(1em × 1.2em)里都撑满盒高,
   锚点用「盒高百分比」= 身体部位的真实位置,与字号、DPR、viewport 无关;
   emoji 字模的行盒(line-height:1 → 恰为 font-size 见方)由 flex 居中,
   再用 translate(-50%,-50%) 把行盒中心钉在锚点上。
   平台字模墨迹上下溢出被限制在 ±(墨迹-行盒)/2,不会再整片糊到脸上。 */
.dz {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.dz[hidden] {
  display: none;
}

.dz-body {
  position: relative;
  left: auto;
  transform: none;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.dz-body svg,
.dz-body img {
  width: 100%;
  height: 100%;
  display: block;
}

/* 背景板:垫在身后的大图案 */
.dz-bg {
  top: 46%;
  font-size: 1.3em;
  opacity: 0.4;
  z-index: 0;
}

/* 身边特效光环(缩放动画自带中心锚定,避免覆盖 translate 跳位) */
.dz-fx {
  top: 50%;
  font-size: 0.95em;
  opacity: 0.6;
  z-index: 1;
  animation: dxfx 1.8s ease-in-out infinite;
}

@keyframes dxfx {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.16);
    opacity: 0.65;
  }
}

/* 锚点(参考图 500×602 像素实测):
   头顶冠区 ~11.5%(角+耳朵之上)、眼睛 ~25.5%、颈部 ~35.5%、持杖手 ~36% @ 右侧 89%
   字号用盒宽 em,随盒子等比缩放;比旧值明显调小,确保盖不满脸 */
.dz-hat {
  top: 11.5%;
  font-size: 0.18em;
  z-index: 4;
}

.dz-face {
  top: 25.5%;
  font-size: 0.14em;
  z-index: 4;
}

.dz-neck {
  top: 35.5%;
  font-size: 0.15em;
  z-index: 4;
}

.dz-hand {
  left: 89%;
  top: 36%;
  font-size: 0.21em;
  z-index: 5;
  animation: dzsway 3s ease-in-out infinite;
}

/* 手持物摇摆:translate 百分比基于自身尺寸,分辨率无关,且保留中心锚定 */
@keyframes dzsway {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(-6deg);
  }
  50% {
    transform: translate(-50%, -66%) rotate(6deg);
  }
}

/* 各场景小公主尺寸:1em 宽 × 1.2em 高(与参考图 500×602 等比) */
.chick {
  font-size: 150px; /* 商店预览台 */
}

.hero-chick-box {
  position: relative;
  width: 1em;
  height: 1.2em;
  font-size: 76px;
  flex-shrink: 0;
}

.w-canvas-wrap {
  position: relative; /* 写字弹层里的小鸡挂在画布右下角 */
}

.w-chick {
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 1em;
  height: 1.2em;
  font-size: 56px;
}

/* 认字卡记忆条小鸡(覆盖旧固定宽高,改为字号等比) */
.ms-chick {
  position: relative;
  width: 1em;
  height: 1.2em;
  font-size: 52px;
}

/* —— 三、答题区小鸡陪伴:小鸡 + 情绪气泡 —— */
.ask-chick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 10px;
  flex-shrink: 0;
}

.ask-chick-box {
  position: relative;
  width: 1em;
  height: 1.2em;
  font-size: 48px;
}

.ask-bubble {
  position: relative;
  max-width: 64%;
  background: var(--sz-card);
  border: 2px solid var(--sz-primary-200);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--sz-primary-800);
  box-shadow: var(--sz-shadow-sm);
}

/* 气泡小尾巴,指向左边的小鸡 */
.ask-bubble::after {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  margin-top: -6px;
  border: 6px solid transparent;
  border-right-color: var(--sz-card);
}

.ask-bubble.pop {
  animation: bubblepop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bubblepop {
  0% { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* —— 四、答对物理特效:彩虹波浪 + 金色粒子雨 —— */
.fx-rainbow {
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: min(120vw, 560px);
  height: var(--rh, 150px);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  box-shadow:
    0 -7px 0 0 #ef5b5b,
    0 -14px 0 0 #f6830a,
    0 -21px 0 0 #f5c518,
    0 -28px 0 0 #3dbb7c,
    0 -35px 0 0 #5aa6e8,
    0 -42px 0 0 #9b7ef0;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
  opacity: 0;
  transform: translate(-50%, 100%);
  animation: rainbow-rise 1.2s cubic-bezier(0.22, 0.9, 0.34, 1) forwards;
  pointer-events: none;
}

@keyframes rainbow-rise {
  0% { transform: translate(-50%, 100%); opacity: 0; }
  18% { opacity: 0.95; }
  70% { transform: translate(-50%, 0); opacity: 0.95; }
  100% { transform: translate(-50%, -8%); opacity: 0; }
}

.fx-gold {
  position: absolute;
  top: -40px;
  line-height: 1;
  will-change: transform;
  animation-name: goldfall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes goldfall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateY(105vh) rotate(280deg); opacity: 0.35; }
}

/* —— 五、狂热:整页变金(背景 + 光晕)—— */
.sub-page.fever {
  --w-bg: linear-gradient(180deg, #ffe6a6 0%, #fff4d6 55%, #fff4d6 100%);
}

.sub-page.fever::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 28%, rgba(255, 190, 60, 0.2), transparent 62%);
  animation: fxpulse 1.6s ease-in-out infinite;
}

/* —— 六、认字卡互动:字卡弹入 / 点字放大发光 / 组词高亮 —— */
.char-pop {
  position: relative;
}

.char-tap {
  position: relative;
  border-radius: 16px;
  cursor: pointer;
  /* 低龄体感:字卡彩色边框随世界主题变色,「换世界了」一眼可感 */
  box-shadow: 0 0 0 4px var(--w-accent, #ff8a3d), 0 6px 14px rgba(53, 42, 33, 0.12);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  /* 限制字卡尺寸跟着 canvas(.lcv)走,避免 canvas 被旧 .lcv 样式
     (min(235px,55vw)) 在宽屏下被 55vw 撑高,把下方拼音行挡掉 */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

.char-tap:active {
  transform: scale(0.97);
}

.tap-hint {
  margin: 4px auto 0;
  width: fit-content;
  font-size: 12px;
  font-weight: 800;
  color: var(--sz-primary-700);
  background: var(--sz-primary-100);
  border-radius: 999px;
  padding: 3px 14px;
  animation: tipbounce 1.6s ease-in-out infinite;
}

@keyframes tipbounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* 点字:抖一下 + 放大一圈 + 发光 */
.char-pop.zoom .char-tap {
  animation: charzoom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes charzoom {
  0% { transform: scale(1); }
  35% { transform: scale(1.07) rotate(-2deg); }
  65% { transform: scale(1.02) rotate(2deg); }
  100% { transform: scale(1); }
}

.char-pop.zoom .char-tap::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 20px;
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.65), 0 0 24px 6px rgba(255, 208, 66, 0.6);
  animation: glowfade 0.55s ease forwards;
  pointer-events: none;
}

@keyframes glowfade {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* —— P0:笔顺播完 → 字"活"过来:放大发光 → 淡出 → emoji 弹出 —— */
.char-tap.morphing {
  pointer-events: none;
}

.char-tap.morphing canvas {
  animation: morphGlow 0.6s ease-out forwards;
}

@keyframes morphGlow {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.18); filter: brightness(1.3) drop-shadow(0 0 18px rgba(255,193,7,0.9)); }
  100% { transform: scale(0.6); opacity: 0; filter: brightness(1.6) drop-shadow(0 0 30px rgba(255,193,7,1)); }
}

.morph-emoji {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 80px;
  pointer-events: none;
  z-index: 10;
  animation: morphEmoji 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s forwards;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}

@keyframes morphEmoji {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-15deg); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.3) rotate(5deg); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(0.9) rotate(-3deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

.morph-sparkles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 9;
}

.morph-sparkles .sp {
  position: absolute;
  font-size: 20px;
  animation: sparkleOut 0.8s cubic-bezier(0.22, 0.9, 0.36, 1) forwards;
}

@keyframes sparkleOut {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--sx, 0px)), calc(-50% + var(--sy, 0px))) scale(1.1); opacity: 0; }
}

/* 组词里的目标字高亮 */
.w-hl {
  color: #e2732a;
  background: rgba(255, 214, 102, 0.45);
  border-radius: 5px;
  padding: 0 2px;
  box-shadow: 0 2px 0 rgba(245, 166, 35, 0.35);
}

/* 点过的组词卡点亮 */
.word-card.w-on {
  border-color: var(--sz-primary-400);
  background: linear-gradient(180deg, #fff8ea, #ffefd4);
  animation: wordon 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes wordon {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* 记忆条里的 emoji 卡片 */
.ms-emoji {
  font-size: 24px;
  margin-right: 5px;
}

/* —— 七、进度条小鸡:跟着进度走,快到终点跑起来 —— */
.track {
  position: relative;
  overflow: visible; /* 小鸡要站在进度条上面,不能被裁掉 */
}

.bar-chick {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  font-size: 17px;
  line-height: 1;
  transform: translate(-50%, -50%);
  transition: left 0.35s ease;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(53, 42, 33, 0.3));
}

.bar-chick.run {
  animation: chickrun 0.45s ease-in-out infinite;
}

/* 连对中:小鸡兴奋,进度条动画跟着提速 */
.bar-chick.fast {
  transition-duration: 0.16s;
}

@keyframes chickrun {
  0%, 100% { transform: translate(-50%, -58%) rotate(-8deg); }
  50% { transform: translate(-50%, -42%) rotate(8deg); }
}

/* —— 八、开宝箱结算:两段式仪式(晃箱子 → 点开飞奖励)—— */
.chest-stage {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* 箱子旁欢呼的小鸡 */
.chest-chick {
  position: absolute;
  left: -80px;
  top: 4px;
  width: 1em;
  height: 1.2em;
  font-size: 60px;
}

.chest {
  position: relative;
  width: 120px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  animation: chestwiggle 1.4s ease-in-out infinite;
}

.chest-emoji {
  font-size: 84px;
  line-height: 1;
  filter: drop-shadow(0 6px 0 rgba(53, 42, 33, 0.12));
}

.chest-glow {
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 90, 0.55), transparent 65%);
  animation: fxpulse 1.6s ease-in-out infinite;
  pointer-events: none;
}

.chest-silver .chest-glow {
  background: radial-gradient(circle, rgba(210, 225, 245, 0.7), transparent 65%);
}

.chest-gold .chest-glow {
  inset: -44%;
  background: radial-gradient(circle, rgba(255, 200, 60, 0.75), transparent 68%);
}

.chest-tip {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 900;
  color: var(--sz-primary-700);
  animation: tipbounce 1.2s ease-in-out infinite;
}

@keyframes chestwiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}

/* 开箱后的奖励区 */
.chest-reveal {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: risein 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.chest-reveal[hidden] {
  display: none;
}

/* —— 九、地图小世界:装饰物可点 + 通关小动物 + 小鸡气泡 —— */
.md-cl,
.md-bird,
.md-balloon,
.md-fly,
.md-tree {
  pointer-events: auto; /* 装饰物可以从「背景」里被点中 */
  cursor: pointer;
}

/* 已通关关卡旁的小动物:三种步态 */
.map-animal {
  position: absolute;
  left: -32px;
  bottom: -6px;
  font-size: 16px;
  pointer-events: none;
  z-index: 2;
}

.ma-0 {
  animation: animalwalk 5s ease-in-out infinite;
}

.ma-1 {
  animation: animalfly 4s ease-in-out infinite;
}

.ma-2 {
  animation: animalhop 3s ease-in-out infinite;
}

@keyframes animalwalk {
  0%, 100% { transform: translateX(0) scaleX(1); }
  20% { transform: translateX(-14px) scaleX(1); }
  50% { transform: translateX(-24px) scaleX(-1); }
  80% { transform: translateX(-10px) scaleX(-1); }
}

@keyframes animalfly {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-16px, -10px); }
}

@keyframes animalhop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* 地图小鸡头顶的引导气泡:指着当前关 */
.m-tip {
  position: absolute;
  left: 50%;
  top: -36px;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--sz-card);
  border: 2px solid var(--sz-primary-200);
  border-radius: 10px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 900;
  color: var(--sz-primary-800);
  box-shadow: var(--sz-shadow-sm);
  pointer-events: none;
  z-index: 6;
  animation: tipbounce 1.5s ease-in-out infinite;
}

.m-tip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--sz-card);
}

/* —— 十、按钮回弹:松手时弹过头一点再稳住(低龄孩子最吃这一套)—— */
.opt,
.f-btn,
.w-btn,
.word-card,
.d-btn,
.t-claim,
.fix-btn,
.ei-btn,
.next,
.chest,
.char-tap {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* —— 十一、动画降级:尊重系统「减弱动态效果」设置 —— */
@media (prefers-reduced-motion: reduce) {
  .cm .cm-body,
  .fx-rainbow,
  .fx-gold,
  .bar-chick.run,
  .chest,
  .chest-glow,
  .m-tip,
  .tap-hint,
  .map-animal,
  .md-decor,
  .md-car,
  .md-meteor,
  .md-ufo,
  .w-dance,
  .cb-btn,
  .cb-frag,
  .just-chick,
  .m-arrow {
    animation: none !important;
  }
}

/* ================================================================
   低龄体感 · 二期(IMPROVE-KIDS 更新):世界背景图 / 专属装饰 /
   BGM 配套样式 / 装扮碎片 / 写完跳舞小鸡
   ================================================================ */

/* —— 一、地图世界背景:每世界一张绘本场景图,盖在旧渐变(兜底)之上 —— */
.map-bg {
  position: absolute;
  inset: 0;
  z-index: 0; /* 躲在路径点(2)、关卡节点(3)、装饰层(1)之下,只做氛围 */
  pointer-events: none;
}

.map-bg .mb-w {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  background-size: cover;
  background-position: center;
}

/* 世界过渡:相邻背景段之间一道柔和的白色渐隐,避免生硬换图 */
.map-bg .mb-w + .mb-w {
  mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 100%);
}

/* —— 二、每世界专属装饰物:md-decor 基础类(可点 + 轻浮动)—— */
.md-decor {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(53, 42, 33, 0.18));
  animation: mdfloat 3.4s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

.md-decor:active {
  transform: scale(1.18);
}

@keyframes mdfloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

/* 专属持续动画:汽车来回开 / 流星斜闪 / UFO 盘旋 */
.md-car {
  animation: mdcarside 9s ease-in-out infinite;
}

@keyframes mdcarside {
  0%, 100% { translate: 0 0; }
  50% { translate: 90px 0; }
}

.md-meteor {
  animation: mdmeteor 4.5s ease-in-out infinite;
}

@keyframes mdmeteor {
  0%, 100% { translate: 0 0; opacity: 1; }
  45% { translate: -46px 22px; opacity: 0.55; }
  55% { translate: -46px 22px; opacity: 0.55; }
}

.md-ufo {
  animation: mdufo 5s ease-in-out infinite;
}

@keyframes mdufo {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  30% { translate: 22px -12px; rotate: 8deg; }
  70% { translate: -18px 6px; rotate: -6deg; }
}

/* —— 三、写字弹层:写完小鸡跳到字上转圈跳舞 —— */
.w-dance {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 1em;
  height: 1.2em;
  font-size: 64px;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(53, 42, 33, 0.28));
  animation: wdancein 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes wdancein {
  0% { transform: translate(-50%, -150%) scale(0.4); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* —— 四、宝箱奖励区的碎片卡(区别于金币/星星卡)—— */
.r-reward-card.r-frag {
  background: linear-gradient(180deg, #f3e8ff, #e7d6ff);
  border-color: #c9b2f0;
  animation: wordon 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.r-reward-card.r-frag .rr-num {
  color: #8b6ef3;
}

/* 金宝箱(BOSS 关)的世界徽章卡:金底大奖杯,收集 8 个世界的荣誉 */
.r-reward-card.r-badge {
  background: linear-gradient(180deg, #fff4d6, #ffe6a6);
  border-color: #f5c518;
  animation: wordon 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.r-reward-card.r-badge .rr-emoji {
  font-size: 30px;
  line-height: 1.1;
}

/* —— 五、商店:装扮碎片合成条 —— */
.craft-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px auto 0;
  width: min(100%, 500px);
  background: linear-gradient(180deg, #faf3ff, #f1e6ff);
  border: 2px solid #d9c5f5;
  border-radius: 16px;
  padding: 8px 12px;
  box-shadow: 0 4px 0 rgba(139, 110, 243, 0.12);
}

.cb-frag {
  font-size: 30px;
  line-height: 1;
  animation: mdfloat 2.6s ease-in-out infinite;
}

.cb-info {
  flex: 1;
  min-width: 0;
}

.cb-title {
  font-size: 13px;
  font-weight: 900;
  color: #6b4fc7;
}

.cb-dots {
  display: flex;
  gap: 4px;
  margin-top: 3px;
}

.cb-dots .dot {
  font-size: 15px;
  line-height: 1;
  filter: grayscale(1);
  opacity: 0.35;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cb-dots .dot.on {
  filter: none;
  opacity: 1;
  transform: scale(1.08);
}

.cb-hint {
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 700;
  color: #9a86cf;
}

.cb-btn {
  flex-shrink: 0;
  background: linear-gradient(180deg, #a37ff5, #8b5ef0);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  border-radius: 999px;
  padding: 8px 14px;
  box-shadow: 0 4px 0 #6d47d1;
  animation: tipbounce 1.1s ease-in-out infinite;
}

.cb-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #6d47d1;
}

/* ================================================================
   低龄体感 · 三期(IMPROVE-KIDS 收尾):组词字飞入 / 写得快加速鼓掌 /
   刚通关节点跳舞小鸡 / 复习指向气球
   ================================================================ */

/* —— 一、点组词:目标字从字卡飞进组词卡(「马」飞进「马上」,飞行走 WAAPI)—— */
.fly-char {
  position: fixed;
  z-index: 90;
  font-size: 46px;
  font-weight: 900;
  color: #e2732a;
  text-shadow: 0 2px 0 #fff, 0 5px 12px rgba(53, 42, 33, 0.28);
  pointer-events: none;
  will-change: transform;
}

/* —— 二、写字写得又快又准:旁边小鸡加速鼓掌(excited 连蹦提速)—— */
.w-chick.cheer-fast .cm-excited .cm-body {
  animation-duration: 0.3s;
  animation-iteration-count: 4;
}

/* —— 三、刚通关的关卡:小鸡跳上节点转圈庆祝,4s 后挥挥手走人 —— */
.just-chick {
  position: absolute;
  z-index: 7;
  width: 1em;
  height: 1.2em;
  font-size: 52px;
  transform: translate(-50%, -72%);
  pointer-events: none;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.22));
  animation: justin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.just-chick.bye {
  animation: justout 0.6s ease both;
}

@keyframes justin {
  from { transform: translate(-50%, -190%) scale(0.3) rotate(-16deg); opacity: 0; }
  to { transform: translate(-50%, -72%) scale(1) rotate(0deg); opacity: 1; }
}

@keyframes justout {
  from { transform: translate(-50%, -72%) scale(1); opacity: 1; }
  to { transform: translate(-50%, -30%) scale(0.4); opacity: 0; }
}

/* —— 四、有复习任务:地图小鸡指向右下角的复习气球 —— */
.mascot.point-review .m-tip {
  background: linear-gradient(180deg, #ffb26b, #ff8a3d);
  border-color: #f07030;
  color: #fff;
}

.mascot.point-review .m-tip::after {
  border-top-color: #ff8a3d;
}

/* 指向箭头:小鸡右下方飘一只 👉,一蹦一蹦指向复习气球 */
.m-arrow {
  position: absolute;
  right: -26px;
  bottom: -14px;
  font-size: 22px;
  z-index: 6;
  pointer-events: none;
  animation: marrow 1.1s ease-in-out infinite;
}

@keyframes marrow {
  0%, 100% { transform: translate(0, 0) rotate(-24deg); }
  50% { transform: translate(7px, 5px) rotate(-24deg); }
}

/* —— P0 T9:开宝箱结算奖励逐项飞出(每项 350ms)—— */
/* 初始:下移 + 透明,等 chest-in 触发弹入 */
.chest-step {
  opacity: 0;
  transform: translateY(24px) scale(0.92);
  transition: opacity 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: opacity, transform;
}
/* 触发弹入:回位 + 不透明 */
.chest-step.chest-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* 等待中(还没轮到):保持隐藏,不响应点击避免误触 */
.chest-step.chest-wait {
  pointer-events: none;
}
/* 减少动效偏好:跳过动画直接显示 */
@media (prefers-reduced-motion: reduce) {
  .chest-step { opacity: 1; transform: none; transition: none; }
}

/* —— P0 T8:8 世界皮肤 CSS 变量(只改值,配合 data-world 属性切换)—— */
/* 现有 .sub-page 内联 theme 渐变保留作兜底,这些变量供粒子/边框/强调色等扩展使用 */
.sub-page[data-world="1"] { --world-accent: #FF8A3D; --world-particle: #FFD8A8; }
.sub-page[data-world="2"] { --world-accent: #5AB0E8; --world-particle: #CDEFE2; }
.sub-page[data-world="3"] { --world-accent: #4CAF50; --world-particle: #A8E6A8; }
.sub-page[data-world="4"] { --world-accent: #7CB342; --world-particle: #D8F0C0; }
.sub-page[data-world="5"] { --world-accent: #EC407A; --world-particle: #FFD9E4; }
.sub-page[data-world="6"] { --world-accent: #9575CD; --world-particle: #E8DEFF; }
.sub-page[data-world="7"] { --world-accent: #FFB300; --world-particle: #FFE9A8; }
.sub-page[data-world="8"] { --world-accent: #5C6BC0; --world-particle: #FFD6D6; }

/* —— 认字卡游戏化:卡片头探索任务点(🔊听一听 · 🧩点组词 · 📖读例句)—— */
.ch-side {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 三个任务点:没玩过灰扑扑,玩过弹亮;全亮后整组金光一闪 */
.exp-dots {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  transition: box-shadow 0.3s ease;
}
.ed {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-style: normal;
  line-height: 1;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.ed.on {
  filter: none;
  opacity: 1;
  background: #fff;
  box-shadow: 0 2px 5px rgba(148, 74, 20, 0.35);
  animation: edpop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.exp-dots.full {
  animation: edfull 1.2s ease;
}
@keyframes edpop {
  0% { transform: scale(0.3); }
  60% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
@keyframes edfull {
  0%, 100% { box-shadow: 0 0 0 2px #ffd76e, 0 0 10px #ffca3a; }
  50% { box-shadow: 0 0 0 4px #ffd76e, 0 0 20px #ffb703; }
}

/* —— 认字卡游戏化:惊喜点字小游戏(兔兔考考你)—— */
.mini-mask {
  position: fixed;
  inset: 0;
  z-index: 90; /* 低于 exam-intro(100),高于普通内容 */
  display: grid;
  place-items: center;
  background: rgba(43, 26, 10, 0.45);
  animation: fadein 0.25s ease;
}
.mini-card {
  width: min(88vw, 340px);
  background: linear-gradient(180deg, #fffdf5, #fff3d2);
  border: 3px solid #ffd76e;
  border-radius: 26px;
  padding: 18px 16px 10px;
  text-align: center;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
.mini-title {
  font-size: 19px;
  font-weight: 900;
  color: #8a5a2b;
}
.mini-sub {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 700;
  color: #a0794f;
}
/* 出题提示:大 emoji(看图找字)或 🔊 按钮(听音找字) */
.mini-emoji {
  width: 76px;
  height: 76px;
  margin: 10px auto 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px rgba(255, 166, 43, 0.4);
  display: grid;
  place-items: center;
  font-size: 42px;
  animation: miniemoji 1.6s ease-in-out infinite;
}
.mini-cue-audio {
  font-size: 32px;
  cursor: pointer;
}
@keyframes miniemoji {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50% { transform: scale(1.08) rotate(3deg); }
}
/* 三只字气球:各自颜色、错开节奏上下漂;点错变红抖一抖 */
.mini-balloons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 14px 0 8px;
}
.mini-b {
  width: 60px;
  height: 70px;
  border-radius: 50% 50% 48% 48% / 58% 58% 42% 42%;
  background: radial-gradient(circle at 32% 28%, #ffe9a8, #ffb703);
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 900;
  color: #7c4a12;
  box-shadow: inset -5px -7px 10px rgba(148, 84, 20, 0.28), 0 8px 14px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  animation: minifloat 2.6s ease-in-out infinite;
  transition: transform 0.15s ease;
}
.mini-b:nth-child(2) {
  background: radial-gradient(circle at 32% 28%, #d1f4ff, #4cc3ff);
  color: #0b5a86;
  animation-delay: 0.35s;
}
.mini-b:nth-child(3) {
  background: radial-gradient(circle at 32% 28%, #e2ffd9, #5fce62);
  color: #23632c;
  animation-delay: 0.7s;
}
.mini-b:active {
  transform: scale(0.9);
}
.mini-b.bad {
  animation: shake 0.45s ease;
  background: radial-gradient(circle at 32% 28%, #ffd9d9, #ff6b6b);
  color: #8a1f1f;
}
@keyframes minifloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.mini-skip {
  margin-top: 2px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #b39474;
  cursor: pointer;
}
/* 猜字谜:hint 文案气泡(替代 emoji 圆盘的位置) */
.mini-riddle {
  margin: 10px auto 2px;
  max-width: 250px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
  border: 2px dashed #ffb703;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: #7c4a12;
}
/* 组词开箱:词卡竖排,和气球同一套配色(点错变红抖一抖) */
.mini-words {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 8px;
}
.mini-word {
  padding: 10px 16px;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, #ffe9a8, #ffb703);
  font-size: 20px;
  font-weight: 900;
  color: #7c4a12;
  box-shadow: inset -5px -7px 10px rgba(148, 84, 20, 0.28), 0 8px 14px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  animation: minifloat 2.6s ease-in-out infinite;
  transition: transform 0.15s ease;
}
.mini-word:nth-child(2) {
  background: radial-gradient(circle at 32% 28%, #d1f4ff, #4cc3ff);
  color: #0b5a86;
  animation-delay: 0.35s;
}
.mini-word:nth-child(3) {
  background: radial-gradient(circle at 32% 28%, #e2ffd9, #5fce62);
  color: #23632c;
  animation-delay: 0.7s;
}
.mini-word:active { transform: scale(0.95); }
.mini-word.bad {
  animation: shake 0.45s ease;
  background: radial-gradient(circle at 32% 28%, #ffd9d9, #ff6b6b);
  color: #8a1f1f;
}
/* 数笔画/组词出题时,题面圆盘里放的是汉字本体 */
.mini-char { font-size: 34px; font-weight: 900; color: #b3541e; }

/* —— 洪恩式「玩」环节:字玩具(全部代码生成 SVG,零美术资源)—— */
.toy-mask {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: rgba(43, 26, 10, 0.45);
  animation: fadein 0.25s ease;
  touch-action: none;
}
.toy-card {
  position: relative;
  overflow: hidden;
  width: min(88vw, 360px);
  background: linear-gradient(180deg, #fffdf5, #fff3d2);
  border: 3px solid #ffd76e;
  border-radius: 26px;
  padding: 18px 16px 10px;
  text-align: center;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
/* 流光扫过:每隔 3.2s 一道高光掠过卡片 */
.toy-card::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -90px;
  width: 60px;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: toysheen 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes toysheen {
  0% { left: -90px; }
  45%, 100% { left: 110%; }
}
.toy-title { font-size: 19px; font-weight: 900; color: #8a5a2b; }
.toy-sub { margin-top: 3px; font-size: 14px; font-weight: 700; color: #a0794f; }
.toy-stage { min-height: 240px; display: grid; place-items: center; padding: 12px 0 6px; }
.toy-skip {
  margin-top: 2px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #b39474;
  cursor: pointer;
}
/* 收尾冲击波:从卡片中心荡开一圈光环 */
.toy-wave {
  position: fixed;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 6px solid #ffd76e;
  z-index: 99;
  pointer-events: none;
  animation: toywave 0.75s ease-out forwards;
}
@keyframes toywave {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(20); opacity: 0; }
}

/* 玩具①爆米花锅:SVG 锅 + 压力表指针 + 蒸汽 + 会飞的锅盖 */
.pop-zone {
  position: relative;
  width: 220px;
  height: 212px;
  touch-action: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.pop-svg { width: 100%; height: 100%; display: block; }
.pop-svg.shake { animation: potshake 0.14s linear infinite; }
@keyframes potshake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-2px, 1px) rotate(-1.5deg); }
  75% { transform: translate(2px, -1px) rotate(1.5deg); }
}
.pop-svg.boom { animation: potpop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes potpop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18) rotate(-3deg); }
  100% { transform: scale(1); }
}
.pv-s { opacity: 0; }
.pop-svg.hot .pv-s { animation: steamrise 1s ease-in-out infinite; }
.pv-s.s2 { animation-delay: 0.3s; }
.pv-s.s3 { animation-delay: 0.6s; }
@keyframes steamrise {
  0% { transform: translateY(8px); opacity: 0; }
  40% { opacity: 0.85; }
  100% { transform: translateY(-16px); opacity: 0; }
}
.pv-needle-g {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.1s linear;
}
.pv-arc { transition: stroke-dashoffset 0.08s linear; }
.pv-lid {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.pop-svg.hot .pv-lid { animation: lidrattle 0.18s linear infinite; }
@keyframes lidrattle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(1.5px, -2px) rotate(2deg); }
}
.pop-svg.boom .pv-lid { transform: translateY(-58px) rotate(26deg); opacity: 0; }
.pop-pop-char {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, #ffe9c9);
  box-shadow: 0 8px 18px rgba(255, 166, 43, 0.5);
  display: grid;
  place-items: center;
  font-size: 38px;
  font-weight: 900;
  color: #b3541e;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}
.pop-pop-char.show {
  transform: translateX(-50%) scale(1);
  filter: drop-shadow(0 0 14px rgba(255, 183, 3, 0.85));
}

/* 玩具②点一点:旋转光芒 + 环形进度圈 + 宝石落篮 + 点击涟漪 */
.tap-zone { position: relative; width: 220px; height: 296px; }
.tap-rays {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  height: 220px;
  animation: rayspin 9s linear infinite;
}
@keyframes rayspin { to { transform: rotate(360deg); } }
.tap-ring-wrap { position: absolute; top: 20px; left: 40px; width: 140px; height: 140px; }
.tap-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.tap-ring-prog { transition: stroke-dashoffset 0.15s ease; }
.tap-char {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, #ffe9c9);
  box-shadow: 0 10px 20px rgba(255, 166, 43, 0.4);
  display: grid;
  place-items: center;
  font-size: 54px;
  font-weight: 900;
  color: #b3541e;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.tap-char.hit { animation: taphit 0.25s ease; }
@keyframes taphit {
  0% { transform: scale(1); }
  50% { transform: scale(1.16) rotate(3deg); }
  100% { transform: scale(1); }
}
.tap-ripple {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 3px solid #ffb703;
  pointer-events: none;
  animation: tapripple 0.55s ease-out forwards;
}
@keyframes tapripple {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(7); opacity: 0; }
}
.tap-basket { position: absolute; bottom: 0; left: 15px; width: 190px; height: 46px; }
.tap-basket svg { width: 100%; display: block; }
.tap-gems {
  position: absolute;
  top: -6px;
  left: 20px;
  right: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.tap-gems i {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(135deg, #7fe3ff, #378add);
  transform: rotate(45deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  animation: blockdrop 0.3s ease both;
  animation-delay: var(--d, 0s);
}
@keyframes blockdrop {
  from { transform: translateY(-16px) rotate(45deg) scale(0.4); opacity: 0; }
  to { transform: translateY(0) rotate(45deg) scale(1); opacity: 1; }
}

/* 玩具③擦一擦:渐变雾面 + 字底光晕 + 提示小手指 */
.rub-zone {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(255, 166, 43, 0.35);
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;
  cursor: pointer;
}
.rub-glow {
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 183, 3, 0.5), transparent 70%);
  opacity: 0.25;
  transition: opacity 0.5s ease;
}
.rub-zone.reveal .rub-glow {
  opacity: 1;
  animation: glowpulse 1s ease-in-out infinite alternate;
}
@keyframes glowpulse {
  from { transform: scale(0.95); }
  to { transform: scale(1.08); }
}
.rub-char {
  font-size: 120px;
  font-weight: 900;
  color: #b3541e;
  animation: minifloat 2.6s ease-in-out infinite;
}
.rub-hint {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-size: 26px;
  z-index: 2;
  pointer-events: none;
  animation: rubhint 1.2s ease-in-out infinite;
  transition: opacity 0.3s ease;
}
.rub-hint.off { opacity: 0; }
@keyframes rubhint {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-16px, -8px); }
}
.rub-zone canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.6s ease;
  cursor: grab;
}
@media (prefers-reduced-motion: reduce) {
  .mini-emoji, .mini-b, .mini-word, .rub-char, .tap-rays { animation: none; }
  .pop-svg.shake, .tap-char.hit, .pop-svg.boom, .pop-svg.hot .pv-lid, .pop-svg.hot .pv-s,
  .rub-zone.reveal .rub-glow, .rub-hint, .toy-card::after { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mini-emoji, .mini-b, .mini-word { animation: none; }
}
/* —— 写一写原地切换(替代 inline-write 底部展开):写字板顶替大字卡位置,页面不再滚上滚下 —— */
.write-pane {
  display: none;
}

.card.writing .char-view {
  display: none;
}

.card.writing .write-pane {
  display: block;
  animation: iwpop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes iwpop {
  from { transform: scale(0.88); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* 写字板放大到接近大字卡的尺寸,描红更好下笔 */
.card.writing .iw-canvas-wrap canvas.wcv {
  width: min(260px, 64vw);
  height: min(260px, 64vw);
}

/* 写字星级:写完亮星,连着 3 星变"神笔手" */
.wd-stars {
  display: flex;
  justify-content: center;
  gap: 5px;
  font-size: 21px;
  line-height: 1;
  margin-bottom: 3px;
}

.wd-star {
  color: #e6dcc9;
}

.wd-star.on {
  color: #ffb703;
  text-shadow: 0 0 9px rgba(255, 183, 3, 0.55);
  animation: wdpop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.wd-star.on:nth-child(2) { animation-delay: 0.12s; }
.wd-star.on:nth-child(3) { animation-delay: 0.24s; }

@keyframes wdpop {
  from { transform: scale(0.2) rotate(-28deg); }
  to { transform: scale(1) rotate(0); }
}

.wd-txt {
  font-size: 14px;
  font-weight: 800;
  color: #8a5a2b;
}

@media (prefers-reduced-motion: reduce) {
  .card.writing .write-pane { animation: none; }
  .wd-star.on { animation: none; }
}


/* ================================================================
   游戏化视觉 v2(GAME-VISUAL v2)
   ① 兔兔新建模待机动画(耳朵摇摆/眨眼/欢呼蹦跳)
   ② 分层动态背景(闯关页云层+山丘 / 地图云层 / 门屏)
   ③ 认字魔法蛋孵化仪式
   ④ 厚实游戏质感:大按钮流光 / 彩色工具钮 / 字卡魔法环
   ================================================================ */

/* —— ① 兔兔待机动画 —— */
.rb-ear {
  transform-box: fill-box;
  transform-origin: 50% 95%;
}

.rb-ear-l {
  animation: rbear 4.6s ease-in-out infinite;
}

.rb-ear-r {
  animation: rbear 4.6s ease-in-out -2.3s infinite;
}

@keyframes rbear {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-5deg); }
}

.rb-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: rbblink 5.4s infinite;
}

@keyframes rbblink {
  0%, 91%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.12); }
  97% { transform: scaleY(1); }
}

/* 结算欢呼兔:持续小蹦跳 */
.cm-cheer-body {
  transform-origin: 48px 96px;
  animation: rbcheer 1.15s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

@keyframes rbcheer {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-13px) scale(1.03, 0.97); }
}

@media (prefers-reduced-motion: reduce) {
  .rb-ear-l, .rb-ear-r, .rb-eyes, .cm-cheer-body { animation: none; }
}

/* —— ② 分层动态背景 —— */
/* 远云:白软云团,慢速横漂 */
.scene::before,
.scene::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  background-repeat: repeat-x;
}

.scene::before {
  top: 2%;
  height: 42%;
  background-image:
    radial-gradient(closest-side at 30% 62%, rgba(255, 255, 255, 0.92) 58%, transparent 60%),
    radial-gradient(closest-side at 55% 44%, rgba(255, 255, 255, 0.88) 50%, transparent 52%),
    radial-gradient(closest-side at 76% 64%, rgba(255, 255, 255, 0.8) 55%, transparent 57%),
    radial-gradient(closest-side at 46% 74%, rgba(255, 255, 255, 0.85) 62%, transparent 64%);
  background-size: 380px 120px;
  animation: rbcloudfar 95s linear infinite;
  opacity: 0.8;
}

@keyframes rbcloudfar {
  from { background-position-x: 0; }
  to { background-position-x: 380px; }
}

/* 近云 + 右上角太阳光晕:稍快、更透 */
.scene::after {
  top: 16%;
  height: 34%;
  background-image:
    radial-gradient(circle at 88% 6%, rgba(255, 238, 178, 0.9), rgba(255, 238, 178, 0) 26%),
    radial-gradient(closest-side at 34% 60%, rgba(255, 255, 255, 0.8) 56%, transparent 58%),
    radial-gradient(closest-side at 66% 48%, rgba(255, 255, 255, 0.75) 48%, transparent 50%);
  background-size: 100% 100%, 560px 100px, 560px 100px;
  background-repeat: no-repeat, repeat-x, repeat-x;
  animation: rbcloudnear 60s linear infinite;
}

@keyframes rbcloudnear {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 560px 0, 560px 0; }
}

/* 底部世界色山丘光带:呼应世界主题色,字卡更有"站在场景里"的感觉 */
.sub-page::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(85% 150% at 16% 118%, var(--w-hill, rgba(140, 205, 150, 0.5)) 52%, transparent 54%),
    radial-gradient(75% 170% at 82% 122%, var(--w-hill2, rgba(120, 190, 235, 0.4)) 50%, transparent 52%),
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.28));
}

/* 各世界的山丘配色(与 --w-accent 同族但更柔和) */
.sub-page.w1 { --w-hill: rgba(255, 190, 130, 0.5); --w-hill2: rgba(255, 214, 150, 0.4); }
.sub-page.w2 { --w-hill: rgba(150, 220, 195, 0.5); --w-hill2: rgba(120, 205, 235, 0.4); }
.sub-page.w3 { --w-hill: rgba(150, 205, 245, 0.5); --w-hill2: rgba(180, 215, 250, 0.42); }
.sub-page.w4 { --w-hill: rgba(175, 225, 130, 0.5); --w-hill2: rgba(205, 235, 160, 0.42); }
.sub-page.w5 { --w-hill: rgba(250, 175, 200, 0.5); --w-hill2: rgba(255, 205, 220, 0.42); }
.sub-page.w6 { --w-hill: rgba(195, 175, 245, 0.5); --w-hill2: rgba(220, 205, 250, 0.42); }
.sub-page.w7 { --w-hill: rgba(250, 210, 130, 0.5); --w-hill2: rgba(255, 230, 170, 0.42); }
.sub-page.w8 { --w-hill: rgba(245, 160, 160, 0.5); --w-hill2: rgba(250, 195, 190, 0.42); }

/* 世界地图:云层漂过 + 底部草色光带 */
.map-inner::before,
.map-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-repeat: repeat-x;
}

.map-inner::before {
  background-image:
    radial-gradient(closest-side at 32% 20%, rgba(255, 255, 255, 0.95) 58%, transparent 60%),
    radial-gradient(closest-side at 58% 12%, rgba(255, 255, 255, 0.9) 48%, transparent 50%),
    radial-gradient(closest-side at 76% 24%, rgba(255, 255, 255, 0.85) 55%, transparent 57%),
    radial-gradient(circle at 92% 10%, rgba(255, 243, 190, 0.95), rgba(255, 243, 190, 0) 14%);
  background-size: 460px 130px, 460px 130px, 460px 130px, 100% 100%;
  background-repeat: repeat-x, repeat-x, repeat-x, no-repeat;
  animation: rbmapcloud 110s linear infinite;
}

@keyframes rbmapcloud {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 460px 0, 460px 0, 460px 0, 0 0; }
}

.map-inner::after {
  background:
    radial-gradient(80% 190% at 20% 116%, rgba(255, 255, 255, 0.5) 46%, transparent 48%),
    radial-gradient(70% 210% at 84% 120%, rgba(240, 250, 215, 0.55) 44%, transparent 46%),
    linear-gradient(180deg, transparent 82%, rgba(255, 255, 255, 0.35));
}

/* 门屏:云层打底,装饰 emoji 漂在云上 */
#gate::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(closest-side at 30% 30%, rgba(255, 255, 255, 0.85) 55%, transparent 57%),
    radial-gradient(closest-side at 62% 18%, rgba(255, 255, 255, 0.75) 46%, transparent 48%),
    radial-gradient(closest-side at 80% 40%, rgba(255, 255, 255, 0.7) 52%, transparent 54%);
  background-size: 420px 130px;
  background-repeat: repeat-x;
  animation: rbcloudfar 80s linear infinite;
}

/* —— ③ 认字魔法蛋孵化 —— */
/* 蛋期:大字盖住,下方内容蒙上一层"还没解锁"的柔光 */
.char-view.egg-mode .char-tap canvas {
  visibility: hidden;
}

.char-view.egg-mode .tap-hint {
  visibility: hidden;
}

.char-view.egg-mode .pinyin-row,
.char-view.egg-mode .words-grid,
.char-view.egg-mode .sentence,
.char-view.egg-mode .stroke-btn,
.char-view.egg-mode .mascot-speech {
  opacity: 0.25;
  filter: saturate(0.4);
  pointer-events: none;
  transition: opacity 0.45s ease, filter 0.45s ease;
}

.egg-wrap {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 16px;
}

.egg-core {
  position: relative;
  width: min(200px, 46vw);
  animation: eggfloat 2s ease-in-out infinite;
}

@keyframes eggfloat {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-7px) rotate(1.5deg); }
}

.egg-core svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.egg-glow {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 240, 190, 0.8), rgba(255, 240, 190, 0) 62%);
  animation: eggbreath 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes eggbreath {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.12); }
}

.egg-hint {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 900;
  color: #b06a1e;
  background: rgba(255, 255, 255, 0.92);
  border: 2.5px solid #ffd9a0;
  padding: 6px 18px;
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(214, 148, 58, 0.25);
  animation: tipbounce 1.6s ease-in-out infinite;
}

/* 敲蛋瞬间:蛋壳上下飞开 + 白光扩散 */
.egg-wrap.crack {
  pointer-events: none;
}

.egg-wrap.crack .egg-core {
  animation: none;
}

.egg-wrap.crack .egg-top {
  animation: eggtop 0.6s cubic-bezier(0.22, 0.9, 0.36, 1) forwards;
}

.egg-wrap.crack .egg-bot {
  animation: eggbottom 0.6s cubic-bezier(0.22, 0.9, 0.36, 1) forwards;
}

.egg-wrap.crack .egg-flash {
  animation: eggflash 0.55s ease-out forwards;
}

@keyframes eggtop {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(26px, -110px) rotate(38deg); opacity: 0; }
}

@keyframes eggbottom {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(-20px, 66px) rotate(-22deg); opacity: 0; }
}

.egg-flash {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98), rgba(255, 236, 160, 0.85) 45%, rgba(255, 236, 160, 0) 70%);
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  pointer-events: none;
}

@keyframes eggflash {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(11); opacity: 0; }
}

/* 孵出后:字从蛋心弹出 */
.char-view.just-hatched .char-tap canvas {
  animation: hatchpop 0.65s cubic-bezier(0.34, 1.68, 0.5, 1);
}

@keyframes hatchpop {
  0% { transform: scale(0.1) rotate(-14deg); }
  60% { transform: scale(1.22) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .egg-core, .egg-glow, .egg-hint { animation: none; }
  .egg-wrap.crack .egg-top, .egg-wrap.crack .egg-bot, .egg-wrap.crack .egg-flash { animation-duration: 0.01s; }
  .char-view.just-hatched .char-tap canvas { animation: none; }
}

/* —— ④ 厚实游戏质感 —— */
/* 大按钮:白描边 + 流光扫过 + 柔和光晕 */
.next {
  position: relative;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 6px 0 #1f8a43, 0 10px 22px rgba(47, 181, 92, 0.38);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}

.next::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: btnshine 2.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes btnshine {
  0%, 55% { left: -60%; }
  100% { left: 135%; }
}

/* 底部工具钮:一颗一色,游戏道具栏的感觉 */
.f-btn {
  border: 3px solid #fff;
  box-shadow: 0 5px 0 rgba(120, 80, 30, 0.16), 0 6px 12px rgba(120, 80, 30, 0.14);
}

.f-btn:nth-child(1) { background: linear-gradient(180deg, #9adcff, #5fc2f2); box-shadow: 0 5px 0 #2f95c4, 0 8px 14px rgba(63, 174, 231, 0.35); }
.f-btn:nth-child(2) { background: linear-gradient(180deg, #ffb3d1, #f985b1); box-shadow: 0 5px 0 #d15c8d, 0 8px 14px rgba(240, 120, 170, 0.35); }
.f-btn:nth-child(3) { background: linear-gradient(180deg, #d9c2ff, #b491f5); box-shadow: 0 5px 0 #8d64d6, 0 8px 14px rgba(160, 118, 235, 0.35); }

.f-btn .f-icon {
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.12));
}

.f-btn .f-txt {
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

/* 字卡魔法环:缓缓旋转的虚线光环 */
.char-tap::before {
  content: '';
  position: absolute;
  inset: -11px;
  border-radius: 22px;
  border: 3px dashed rgba(255, 255, 255, 0.8);
  opacity: 0.55;
  animation: rbring 30s linear infinite;
  pointer-events: none;
}

@keyframes rbring {
  to { transform: rotate(360deg); }
}

/* 卡片头:节日彩带条纹 */
.card-head {
  background-image:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.16) 0 10px, transparent 10px 22px),
    linear-gradient(90deg, #ffb84d, #ff8a3d);
}

/* 进度条:白描边 + 端点小鸡光晕 */
.track {
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(120, 80, 30, 0.12);
}

.bar-chick {
  filter: drop-shadow(0 2px 3px rgba(53, 42, 33, 0.25));
}

/* 组词卡:糖果小卡 */
.word-card {
  background: linear-gradient(180deg, #fff, #fff2e2);
  border: 2px solid #ffd9a8;
  border-radius: 12px;
  box-shadow: 0 3px 0 rgba(230, 168, 92, 0.28);
  padding: 7px 12px;
  margin-bottom: 7px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.word-card:active {
  transform: translateY(2px) scale(0.97);
}

.word-card .w-hl {
  color: #e86a1f;
  text-shadow: 0 0 8px rgba(255, 170, 60, 0.55);
}

/* 看笔顺按钮:胶囊 + 呼吸 */
.stroke-btn {
  background: linear-gradient(180deg, #fff, #fff6e8);
  border: 2.5px solid #ffd9a0;
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(230, 168, 92, 0.3);
  padding: 8px 22px;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .next::after, .char-tap::before { animation: none; }
}

/* ================================================================
   v13:吉祥物 img 化(参考图抠图直出,500×602 透明底)
   ================================================================ */

/* 兔兔公主图片:场景盒子给尺寸,img 等比填满 */
.chick-img {
  display: block;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}

.cm .chick-img,
.cheer-wrap .chick-img {
  width: 100%;
  height: 100%;
}

/* 情绪外壳:原来是 svg 自撑尺寸,现在是 span,需显式撑满场景盒子 */
.cm {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.cheer-wrap {
  position: relative;
  display: block;
}

/* img 的动作轴心:百分比"脚底为轴",替代原 SVG 坐标(48px 96px / 48px 90px) */
.cm .cm-body,
.cm-cheer-body {
  transform-origin: 50% 100%;
}

.chick-wave {
  transform-origin: 50% 92%;
}

/* 欢呼/情绪装饰(星星等)叠在人物上方 */
.cm-extra {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 地图页悬浮小公主:脚下投影,站在天空上更稳 */
.hero-chick-box .chick-img {
  filter: drop-shadow(0 5px 9px rgba(70, 90, 140, 0.32));
}


/* ============================================================
   v17:BOSS 战斗条 / 随机事件强化 / 字精灵回家 / 小鸡走路 / 新世界标题
   ============================================================ */

/* —— 一、BOSS 战斗条:字灵守卫 + 血条(大挑战轮挂在右上角) —— */
.boss-fight {
  position: absolute;
  top: 116px;
  right: 10px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: rgba(43, 18, 87, 0.88);
  box-shadow: 0 4px 0 rgba(40, 20, 120, 0.4);
  pointer-events: none;
  animation: fever-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bf-guard {
  width: 46px;
  height: 42px;
  flex: none;
}

.bf-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.bf-name {
  font-size: 11px;
  font-weight: 900;
  color: #d9c6ff;
  letter-spacing: 1px;
  line-height: 1.1;
}

.bf-hearts {
  display: flex;
  gap: 2px;
  font-size: 13px;
  margin-top: 2px;
  line-height: 1;
}

.bf-heart.off {
  filter: grayscale(1);
  opacity: 0.35;
  transform: scale(0.85);
}

/* 答对一刀:守卫疼得左右抖 */
.boss-fight.hit .bf-guard {
  animation: bf-hit 0.42s ease;
}

@keyframes bf-hit {
  0% { transform: translateX(0); }
  25% { transform: translateX(-6px) rotate(-7deg); }
  55% { transform: translateX(5px) rotate(6deg); }
  100% { transform: translateX(0); }
}

/* 心空倒下:翻倒变灰 */
.boss-fight.dead .bf-guard {
  animation: bf-dead 0.8s ease both;
  filter: grayscale(0.9);
}

@keyframes bf-dead {
  0% { transform: rotate(0); }
  30% { transform: rotate(-14deg) translateY(2px); }
  100% { transform: rotate(90deg) translateY(14px); opacity: 0.55; }
}

/* —— 二、随机事件「啊!」时刻:全屏闪光 + 大浮标 —— */
.evt-flash {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(255, 244, 200, 0.95), rgba(255, 213, 106, 0.35) 45%, transparent 72%);
  animation: evt-flashin 0.85s ease-out forwards;
}

@keyframes evt-flashin {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

.evt-float.evt-big {
  top: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: evt-rise2 2.4s ease-out forwards;
}

.evt-float.evt-big .evt-emoji {
  font-size: 64px;
  filter: drop-shadow(0 6px 10px rgba(180, 120, 0, 0.35));
}

.evt-float.evt-big .evt-cap {
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(61, 31, 158, 0.92);
  color: #ffe9b0;
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(40, 20, 120, 0.4);
}

@keyframes evt-rise2 {
  0% { transform: translate(-50%, 0) scale(0.4); opacity: 0; }
  12% { transform: translate(-50%, -8px) scale(1.25); opacity: 1; }
  22% { transform: translate(-50%, -14px) scale(1.05); }
  78% { transform: translate(-50%, -34px) scale(1.05); opacity: 1; }
  100% { transform: translate(-50%, -70px) scale(1); opacity: 0; }
}

/* —— 三、字精灵回家:结算页新点亮的字带 NEW 角标,逐个蹦出来 —— */
.r-chip .r-new {
  position: absolute;
  top: -7px;
  right: -7px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #ff5c5c;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  font-style: normal;
  box-shadow: 0 2px 0 rgba(160, 30, 30, 0.4);
  animation: r-new-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes r-new-pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.r-chip.lit-pop {
  animation: lit-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes lit-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35) rotate(-6deg); }
  100% { transform: scale(1); }
}

/* —— 四、小鸡走到下一关:节点被「点亮」弹一下 —— */
.node.arrive .node-face {
  animation: node-arrive 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes node-arrive {
  0% { transform: scale(1); }
  35% { transform: scale(1.22); box-shadow: 0 0 0 10px rgba(255, 197, 61, 0.35); }
  100% { transform: scale(1); }
}

/* —— 五、新世界标题浮现(换世界滚动 / 换 BGM 时) —— */
.world-title {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.world-title .wt-emoji {
  font-size: 74px;
  filter: drop-shadow(0 8px 12px rgba(60, 40, 10, 0.3));
}

.world-title .wt-txt {
  padding: 10px 26px;
  border-radius: 999px;
  background: rgba(255, 252, 244, 0.95);
  color: #3d2b1f;
  font-size: 20px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 6px 0 rgba(214, 158, 82, 0.35), 0 12px 28px rgba(120, 80, 30, 0.25);
}

.world-title.show {
  animation: world-title-in 1.9s ease both;
}

@keyframes world-title-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  22% { transform: translate(-50%, -50%) scale(1); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(0.98); }
}

/* —— 六、结算页「加练错字」按钮:暖橙强调色 —— */
.r-btn.r-drill {
  background: linear-gradient(180deg, #ffb45c, #f59234);
}

/* NEW 角标定位基准(只给新点亮的字加,不动基础 .r-chip) */
.r-chip.spirit-new {
  position: relative;
}

/* ============================================================
   v18:认一认/玩一玩趣味包——乱点彩蛋 / 例句小剧场 / 救字精灵队列 / 选项气球化
   ============================================================ */

/* —— 一、乱点彩蛋:同一个字连点 3 次,字宝宝打滚 —— */
.char-tap.tickled {
  animation: tickle-roll 0.65s ease-in-out;
}

@keyframes tickle-roll {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-7deg) scale(1.04); }
  45% { transform: rotate(6deg) scale(1.03); }
  70% { transform: rotate(-4deg); }
}

/* —— 二、例句小剧场:句中目标字高亮 + emoji 蹦跳走过 —— */
.sentence {
  position: relative;
}

.s-text .s-hot {
  color: #d96805;
  font-weight: 900;
  font-size: 1.3em;
  padding: 0 1px;
}

.theater-emoji {
  position: absolute;
  right: 8px;
  top: -4px;
  font-size: 26px;
  pointer-events: none;
  animation: theater-hop 1.8s ease-in-out both;
}

@keyframes theater-hop {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  15% { transform: translate(0, -26px) scale(1.15); opacity: 1; }
  30% { transform: translate(10px, 0) scale(1); }
  55% { transform: translate(22px, -30px) scale(1.1); }
  80% { transform: translate(34px, 0) scale(1); opacity: 1; }
  100% { transform: translate(40px, -8px) scale(0.9); opacity: 0; }
}

/* —— 三、救字精灵队列:左下角排排坐,狂热时波浪舞 —— */
.rescue-row {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 3px;
  max-width: 72%;
  pointer-events: none;
}

.rr-it {
  font-style: normal;
  font-size: 17px;
  line-height: 1;
  padding: 3px 4px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 8px;
  box-shadow: 0 2px 0 rgba(120, 80, 30, 0.18);
  animation: rr-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.rr-it.rr-hide {
  visibility: hidden;
  animation: none;
}

@keyframes rr-in {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

/* 狂热:整支队伍跳波浪(--d 是每只错开的相位) */
.sub-page.fever .rr-it {
  animation: rr-wave 0.7s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes rr-wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* 飞行中的字精灵(挂在 body 上,飞行结束落地入列) */
.rr-fly {
  position: fixed;
  z-index: 80;
  font-size: 24px;
  pointer-events: none;
}

/* —— 四、选项气球化:轻轻浮着,答对飞走 —— */
.opt.opt-float {
  animation: opt-float 2.8s ease-in-out infinite;
}

@keyframes opt-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.opt.opt-fly {
  animation: opt-fly 0.65s ease-in forwards !important;
}

@keyframes opt-fly {
  30% { transform: translateY(-8px) scale(1.12); opacity: 1; }
  100% { transform: translateY(-70px) scale(0.7) rotate(8deg); opacity: 0; }
}

/* ================================================================
   主题特效 v2:H5 酷炫化(纯 CSS、零 JS、零资源)
   极光流体光斑 + 玻璃拟态卡片 + 流光渐变 CTA + 渐变标题字
   全部基于每世界的 --w-accent,换世界自动换色
   ================================================================ */

/* —— 1. 极光流体:两团世界色光晕在背景缓慢漂移(径向渐变自带软边,不用 filter,不吃性能)—— */
.sub-page::before,
.sub-page::after {
  content: '';
  position: absolute;
  width: 64vmax;
  height: 64vmax;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.sub-page::before {
  top: -16vmax;
  left: -18vmax;
  background: radial-gradient(circle, var(--w-accent) 0%, transparent 60%);
  opacity: 0.32;
  animation: orbA 17s ease-in-out infinite alternate;
}
.sub-page::after {
  bottom: -20vmax;
  right: -22vmax;
  background: radial-gradient(circle, var(--w-accent) 0%, transparent 58%);
  opacity: 0.2;
  animation: orbB 23s ease-in-out infinite alternate;
}
@keyframes orbA {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(9vmax, 7vmax) scale(1.16); }
}
@keyframes orbB {
  from { transform: translate(0, 0) scale(1.12); }
  to { transform: translate(-11vmax, -7vmax) scale(0.94); }
}

/* —— 2. 玻璃拟态卡片:半透白 + 背景模糊,光斑从卡后透出来 —— */
.card {
  background: rgba(255, 253, 246, 0.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 14px 34px rgba(90, 50, 10, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.mini-card,
.toy-card {
  background: rgba(255, 253, 245, 0.88);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
}
/* 卡片头换成世界主题渐变(带缓动的流光底),不支持 color-mix 的浏览器自动退回纯色 */
.card-head {
  background: var(--w-accent);
  background: linear-gradient(
    100deg,
    var(--w-accent) 0%,
    color-mix(in srgb, var(--w-accent) 70%, #b34a00) 55%,
    var(--w-accent) 100%
  );
  background-size: 180% 100%;
  animation: headshift 6s ease-in-out infinite alternate;
}
@keyframes headshift {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}

/* —— 3. 流光渐变 CTA:主按钮底色缓慢流动(叠加既有 3D 底边和扫光)—— */
.next,
.r-btn,
.fix-btn,
.ei-btn,
.t-claim {
  background: linear-gradient(115deg, var(--sz-primary-400) 25%, #ffc53d 50%, var(--sz-primary-400) 75%);
  background-size: 240% 100%;
  animation: ctashift 3s linear infinite;
}
@keyframes ctashift {
  from { background-position: 130% 0; }
  to { background-position: -130% 0; }
}

/* —— 4. 渐变流光标题字 —— */
.toy-title,
.mini-title {
  background: linear-gradient(110deg, #8a5a2b 20%, #e08a2e 50%, #8a5a2b 80%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ctashift 4s linear infinite;
}

/* —— 5. 减少动效偏好:全部退回静态 —— */
@media (prefers-reduced-motion: reduce) {
  .sub-page::before,
  .sub-page::after,
  .card-head,
  .next,
  .r-btn,
  .fix-btn,
  .ei-btn,
  .t-claim,
  .toy-title,
  .mini-title {
    animation: none;
  }
}

/* —— P1 象形字源动画:「古文字变变变」—— */
/* 象形字孵化后先演一段:古人画的图画 → 变身 → 汉字;点卡片任意处可跳过 */
.pic-mask {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: rgba(43, 26, 10, 0.45);
  animation: fadein 0.25s ease;
  touch-action: none;
}
.pic-card {
  overflow: hidden;
  width: min(88vw, 360px);
  background: linear-gradient(180deg, #fffdf5, #fff3d2);
  border: 3px solid #ffd76e;
  border-radius: 26px;
  padding: 18px 16px 10px;
  text-align: center;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
.pic-title { font-size: 19px; font-weight: 900; color: #8a5a2b; }
.pic-stage { position: relative; width: 176px; height: 176px; margin: 8px auto 2px; }
.pic-svg,
.pic-char { position: absolute; inset: 0; }
.pic-svg svg { width: 100%; height: 100%; display: block; }
.pic-char {
  display: grid;
  place-items: center;
  font-size: 120px;
  font-weight: 900;
  color: #8a5a2b;
  font-family: 'Kaiti SC', 'STKaiti', serif;
  opacity: 0;
  transform: scale(0.3);
}
.pic-card.morph .pic-svg { opacity: 0; transform: scale(0.5) rotate(-8deg); transition: transform 0.55s ease, opacity 0.55s ease; }
.pic-card.morph .pic-char { opacity: 1; transform: scale(1); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; }
.pic-tip { font-size: 13px; font-weight: 700; color: #a0794f; }
.pic-skip {
  margin-top: 2px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #b39474;
  cursor: pointer;
}

/* —— P0 字义玩具① 动作字「做一做」:学什么动作,小人就做什么动作 —— */
.do-zone {
  position: relative;
  width: 300px;
  max-width: 82vw;
  height: 212px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.do-ground {
  position: absolute;
  bottom: 36px;
  left: 6px;
  right: 6px;
  height: 10px;
  border-radius: 6px;
  background: #e7d3ac;
}
.do-actor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 56px;
  margin: 0 auto;
  width: fit-content;
  font-size: 84px;
  line-height: 1;
  will-change: transform;
}
.do-hint,
.ani-hint,
.cnt-hint {
  font-size: 14px;
  font-weight: 800;
  color: #c9a06a;
  text-align: center;
  animation: hintbob 1.6s ease-in-out infinite;
}
.do-zone .do-hint { position: absolute; top: 4px; left: 0; right: 0; }
.do-hint.off,
.ani-hint.off,
.cnt-hint.off { display: none; }
.do-dots {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 9px;
}
.do-dots i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #e7d3ac;
  transition: background 0.2s;
}
.do-dots i.on { background: #ffb703; }
@keyframes hintbob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* —— P0 字义玩具② 动物字「叫一叫」:摸摸睡着的小动物,它就念自己的名字 —— */
.ani-zone {
  position: relative;
  width: 240px;
  max-width: 82vw;
  height: 204px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.ani-bed {
  position: absolute;
  bottom: 28px;
  left: 12px;
  right: 12px;
  height: 28px;
  border-radius: 15px;
  background: #f3d9b8;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.06);
}
.ani-pet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 46px;
  margin: 0 auto;
  width: fit-content;
  font-size: 88px;
  line-height: 1;
}
.ani-pet.bump { animation: anibump 0.5s ease-out; }
.ani-pet.wake { animation: wakejump 0.6s ease-out; }
.ani-zzz {
  position: absolute;
  top: 10px;
  right: 34px;
  font-size: 30px;
  animation: floatzzz 2s ease-in-out infinite;
}
.ani-zzz.gone { opacity: 0; transition: opacity 0.3s; }
.ani-zone .ani-hint { position: absolute; bottom: 0; left: 0; right: 0; }
@keyframes anibump {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-30px) scale(1.1); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes wakejump {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-46px) scale(1.16) rotate(-6deg); }
  70% { transform: translateY(-8px) scale(1.05) rotate(4deg); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes floatzzz {
  0%, 100% { transform: translateY(0) rotate(-6deg); opacity: 0.85; }
  50% { transform: translateY(-10px) rotate(4deg); opacity: 1; }
}

/* —— P0 字义玩具③ 数量字「数一数」:有几个就摆几个果子,点着数 —— */
.cnt-zone { width: 300px; max-width: 84vw; }
.cnt-big {
  height: 78px;
  line-height: 78px;
  font-size: 62px;
  font-weight: 900;
  color: #b3541e;
  text-align: center;
}
.cnt-big.pop { animation: cntpop 0.3s ease; }
.cnt-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 8px 0 14px;
  touch-action: none;
  cursor: pointer;
}
.cnt-it {
  position: relative;
  font-size: 38px;
  line-height: 1;
  padding: 5px;
  border-radius: 12px;
  background: #fff;
  border: 2.5px solid #f0e2c4;
  transition: transform 0.18s, border-color 0.18s, background 0.18s;
}
.cnt-it.on {
  border-color: #ffb703;
  background: #fff3d2;
  transform: scale(0.9);
}
.cnt-it.on::after {
  content: '✓';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #4cc38a;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.cnt-grid.done .cnt-it.on { animation: cntdance 0.5s ease infinite alternate; }
@keyframes cntpop {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes cntdance {
  from { transform: scale(0.9) rotate(-3deg); }
  to { transform: scale(0.94) rotate(3deg); }
}

/* —— P2 玩具扩容④「喂一喂」:拖字宝宝进小怪兽嘴里 —— */
.fd-zone {
  position: relative;
  width: 300px;
  max-width: 84vw;
  height: 236px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.fd-food {
  position: absolute;
  top: 10px;
  left: 16px;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  font-size: 36px;
  font-weight: 900;
  color: #b3541e;
  background: #fffdf5;
  border: 3px solid #ffd76e;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  cursor: grab;
  z-index: 3;
  touch-action: none;
}
.fd-food.drag { cursor: grabbing; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2); }
.fd-monster {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 148px;
}
.fd-monster svg { width: 100%; display: block; }
.fd-monster .fd-mouth { transition: transform 0.18s ease; transform-origin: 80px 102px; transform-box: view-box; }
.fd-monster.chew .fd-mouth { transform: scaleY(0.12); }
.fd-monster.chew svg { animation: fdchew 0.5s ease; }
@keyframes fdchew {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.07, 0.94); }
  60% { transform: scale(0.96, 1.05); }
}
.fd-hint {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  font-size: 14px;
  font-weight: 800;
  color: #c9a06a;
  text-align: center;
  animation: hintbob 1.6s ease-in-out infinite;
}
.fd-hint.off { display: none; }

/* —— P2 玩具扩容⑤「浇一浇」:长按浇水,🌱→🌿→开花 —— */
.wt-zone {
  position: relative;
  width: 280px;
  max-width: 84vw;
  height: 236px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.wt-plant {
  position: absolute;
  left: 0;
  right: 0;
  top: 42px;
  margin: 0 auto;
  width: fit-content;
  font-size: 84px;
  line-height: 1;
  transition: opacity 0.3s;
}
.wt-plant.hidden { opacity: 0; }
.wt-plant.grow { animation: wtgrow 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes wtgrow {
  0% { transform: scale(0.6); }
  100% { transform: scale(1); }
}
.wt-bloom {
  position: absolute;
  left: 0;
  right: 0;
  top: 34px;
  margin: 0 auto;
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
  font-size: 56px;
  font-weight: 900;
  color: #b3541e;
  background: radial-gradient(circle at 50% 44%, #ffe3ee 0 30%, #ffb3d1 60%, #ff8fb8 100%);
  border-radius: 50%;
  border: 4px solid #ffd76e;
  opacity: 0;
  transform: scale(0.2) rotate(-30deg);
  pointer-events: none;
}
.wt-bloom.open {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
}
.wt-pot {
  position: absolute;
  left: 0;
  right: 0;
  top: 138px;
  margin: 0 auto;
  width: 92px;
  height: 58px;
  background: linear-gradient(180deg, #e2924f, #c96a2c);
  border-radius: 8px 8px 26px 26px;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
}
.wt-ring {
  position: absolute;
  right: 4px;
  bottom: 22px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: conic-gradient(#4cc38a 0deg, #e7d3ac 0deg);
  display: grid;
  place-items: center;
  font-size: 34px;
  cursor: pointer;
  touch-action: none;
}
.wt-ring::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #fffdf5;
}
.wt-ring span { position: relative; z-index: 1; }
.wt-ring.busy { animation: wtpulse 0.7s ease-in-out infinite; }
@keyframes wtpulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
.wt-hint {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 14px;
  font-weight: 800;
  color: #c9a06a;
  text-align: center;
  animation: hintbob 1.6s ease-in-out infinite;
}
.wt-hint.off { display: none; }

/* —— P2 玩具扩容⑥「抓一抓」:字宝宝地洞捉迷藏,冒头就点 —— */
.wk-zone {
  position: relative;
  width: 300px;
  max-width: 84vw;
  height: 236px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.wk-hole {
  position: absolute;
  bottom: 26px;
  width: 92px;
  height: 128px;
}
.wk-hole:nth-child(1) { left: 4px; }
.wk-hole:nth-child(2) { left: 50%; margin-left: -46px; bottom: 44px; }
.wk-hole:nth-child(3) { right: 4px; }
.wk-pit {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  border-radius: 50%;
  background: #8a5a2b;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.22);
}
.wk-pop {
  position: absolute;
  bottom: 14px;
  left: 50%;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  display: grid;
  place-items: center;
  font-size: 36px;
  font-weight: 900;
  color: #b3541e;
  background: #fffdf5;
  border: 3px solid #ffd76e;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
  transform: translateY(96px);
  opacity: 0;
  transition: transform 0.18s ease, opacity 0.18s ease;
  cursor: pointer;
}
.wk-pop.up { transform: translateY(10px); opacity: 1; }
.wk-hint {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 14px;
  font-weight: 800;
  color: #c9a06a;
  text-align: center;
  animation: hintbob 1.6s ease-in-out infinite;
}
.wk-hint.off { display: none; }