/* 最后一拍 · 卡通皮肤
 * 手机竖屏优先，最大宽度 560px 居中。
 *
 * 卡通的三条硬规则（全局一致，别破）：
 *   1. 每个可点/可看的面，都有一圈深色描边（--edge）
 *   2. 立体感用「硬投影」—— 实心、偏移、不模糊（box-shadow: 0 Npx 0 edge）
 *   3. 颜色只用糖果色，不用灰调过渡；灰只留给「锁定 / 不可用」
 */

:root {
  /* 纸与卡 */
  --paper: #FFFDF5;
  --card: #FFFFFF;

  /* 墨：不用纯黑，暖一点更像手绘 */
  --ink: #3A3029;
  --ink-2: #6B5D50;
  --ink-3: #9A8B7C;

  /* 描边与浅底 */
  --edge: #3A3029;
  --edge-2: #B7A28B;
  --line: #EADCC8;
  --line-2: #D8C7AE;

  /* 糖果色 */
  --cream: #FFF3D6;
  --amber: #FFB030;
  --amber-d: #C26A00;
  --amber-l: #FFD98A;
  --teal: #2FC6A6;
  --teal-d: #0F7A62;
  --violet: #8E7BF0;
  --violet-d: #5843B8;
  --sky: #56BDF0;
  --sky-l: #CFEBFF;
  --coral: #FF8080;
  --pink: #FF9EC9;
  --grass: #6FCE5F;
  --gold: #FFC93C;
  --ok: #34B764;
  --bad: #F2606B;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; margin: 0; overflow: hidden; }

body {
  background: #CFEBFF;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input { font-family: inherit; }

#app {
  position: relative;
  height: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  /* 上 45% 是天空，下 55% 是地面 —— 中间那片"空"看起来才是草地，不是空洞 */
  background: linear-gradient(180deg,
    #B4DDFF 0%,
    #CDEAFF 18%,
    #EAF6FF 36%,
    #FFF8E8 52%,
    #FFEFD0 100%);
}

@media (min-width: 600px) {
  #app { box-shadow: 0 0 0 3px var(--edge), 0 20px 50px rgba(58, 48, 41, .18); }
}

/* ---------- 背景装饰：云 / 星 / 丘陵 ---------- */

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

.cloud {
  position: absolute;
  background: #fff;
  border-radius: 60px;
  opacity: .95;
  box-shadow: 0 3px 0 rgba(120, 170, 210, .18);
}

.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 50%;
}

/* 云只放在顶部，避开内容区，否则卡片后面飘白块显得脏 */
.c1 { width: 96px; height: 30px; left: -22px; top: 66px; }
.c1::before { width: 44px; height: 44px; left: 14px; top: -23px; }
.c1::after  { width: 30px; height: 30px; left: 54px; top: -16px; }

.c2 { width: 78px; height: 26px; right: -20px; top: 128px; opacity: .85; }
.c2::before { width: 36px; height: 36px; left: 10px; top: -19px; }
.c2::after  { width: 24px; height: 24px; left: 44px; top: -13px; }

.c3 { width: 58px; height: 20px; left: 16px; top: 214px; opacity: .55; }
.c3::before { width: 28px; height: 28px; left: 8px; top: -15px; }
.c3::after  { width: 18px; height: 18px; left: 34px; top: -9px; }

/* 第四朵只在超长屏出现，避免落进内容区 */
.c4 { display: none; }

.spark {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #FFD98A;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity: .8;
  animation: twinkle 3.2s ease-in-out infinite;
}

.s1 { left: 30px; top: 178px; }
.s2 { right: 38px; top: 58px; animation-delay: .9s; }
.s3 { right: 22px; top: 268px; width: 9px; height: 9px; animation-delay: 1.7s; }

@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0); opacity: .5; }
  50% { transform: scale(1.3) rotate(14deg); opacity: 1; }
}

/* 地平线：两层扁丘陵，只露出一条弧，不当主角 */
.hill {
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: -104px;
  height: 178px;
  border-radius: 50%;
  background: linear-gradient(180deg, #CFEFB6 0%, #A9DE8B 100%);
  opacity: .62;
}

.hill::before {
  content: '';
  position: absolute;
  left: 8%;
  right: -14%;
  bottom: 62px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(180deg, #DDF4C9 0%, #C3E9A5 100%);
  opacity: .8;
}

.screen {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px calc(env(safe-area-inset-bottom, 0px) + 18px);
}

.screen-center {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}

.hidden { display: none !important; }

/* ---------- 首页 ---------- */

.brand { margin-bottom: 10px; }

/* 机构 logo：夹在鼓和作品名之间，读起来是「麦塔库出品 · 最后一拍」 */
.brand-logo {
  display: block;
  height: 26px;
  width: auto;
  margin: 4px auto 8px;
}

.drum-mark {
  position: relative;
  width: 158px;
  height: 152px;
  margin: 0 auto 2px;
  animation: bob 3.4s ease-in-out infinite;
}

.drum-svg { width: 100%; height: 100%; display: block; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-6px) rotate(1.2deg); }
}

.kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--amber-d);
  margin: 0 0 6px;
}

h1 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 1px;
  margin: 0 0 6px;
  color: var(--ink);
  text-shadow: 0 3px 0 #fff, 0 5px 0 rgba(58, 48, 41, .13);
}

h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .5px;
  margin: 0 0 4px;
  text-shadow: 0 2px 0 #fff;
}

.sub {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  margin: 0 0 8px;
}

.feat {
  list-style: none;
  padding: 12px 16px;
  margin: 14px 0 22px;
  width: 100%;
  max-width: 330px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.95;
  background: rgba(255, 255, 255, .72);
  border: 2.5px solid var(--edge);
  border-radius: 20px;
  box-shadow: 0 4px 0 rgba(58, 48, 41, .18);
}

.feat b { color: var(--amber-d); font-size: 16px; font-weight: 800; }

.tip {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.7;
  margin: 14px 0 0;
  text-align: center;
}

/* 只在桌面 Chrome 且嗓音质量一般时出现，点一下就永久收起 */
.vox-hint {
  max-width: 330px;
  margin: 12px 0 0;
  padding: 8px 12px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-2);
  text-align: center;
  background: rgba(255, 255, 255, .78);
  border: 2px dashed var(--line-2);
  border-radius: 12px;
  cursor: pointer;
}

.vox-hint b { color: var(--amber-d); }

/* ---------- 按钮：粗描边 + 硬投影 ---------- */

.btn {
  position: relative;
  border: 3px solid var(--edge);
  border-radius: 20px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 15px 24px;
  background: #FFF3D6;
  color: var(--ink);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
  touch-action: manipulation;
  user-select: none;
  box-shadow: 0 5px 0 var(--edge);
}

.btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--edge);
}

.btn-primary {
  background: linear-gradient(180deg, #FFC24D 0%, #FFA726 100%);
  color: #fff;
  width: 100%;
  max-width: 320px;
  text-shadow: 0 2px 0 rgba(160, 84, 0, .55);
}

.btn-primary:disabled {
  background: #E4D9C8;
  color: #A79683;
  text-shadow: none;
  box-shadow: 0 5px 0 #C4B5A0;
}

.btn-ghost {
  background: #fff;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 700;
  padding: 12px 20px;
  box-shadow: 0 4px 0 rgba(58, 48, 41, .22);
  border-width: 2.5px;
}

.btn-ghost:active { box-shadow: 0 1px 0 rgba(58, 48, 41, .22); }

.btn-listen {
  width: 100%;
  background: linear-gradient(180deg, #FFE9B8 0%, #FFD98A 100%);
  color: var(--amber-d);
  box-shadow: 0 5px 0 var(--amber-d);
  margin-top: 6px;
  font-size: 17px;
}

.btn-listen:active { box-shadow: 0 1px 0 var(--amber-d); transform: translateY(4px); }

.btn.small { font-size: 15px; padding: 13px 18px; flex: 1; box-shadow: 0 4px 0 var(--edge); }

/* ---------- 顶栏 ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  flex: 0 0 auto;
  margin-bottom: 4px;
}

.topbar-title {
  flex: 1;
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 #fff;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 2.5px solid var(--edge);
  background: #fff;
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 4px;
  box-shadow: 0 3px 0 var(--edge);
}

.icon-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }

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

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--edge-2);
  transition: width .2s ease, background .2s ease, border-color .2s ease;
}

.dot.on { background: var(--amber); border-color: var(--edge); width: 20px; border-radius: 5px; }
.dot.done { background: var(--amber-l); border-color: var(--edge); }

.stars-total {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  font-weight: 800;
  color: var(--amber-d);
  background: #fff;
  border: 2.5px solid var(--edge);
  border-radius: 14px;
  padding: 3px 10px;
  box-shadow: 0 3px 0 rgba(58, 48, 41, .22);
}

.stars-total .dim { color: #B6A794; font-weight: 700; font-size: 12px; }

.star-mini {
  width: 15px;
  height: 15px;
  background: var(--gold);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 1px 0 rgba(58, 48, 41, .5));
}

/* ---------- 地图 ---------- */

.map {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

.map:focus,
.map:focus-visible { outline: none; }

.map-ch { margin-top: 18px; }

.ch-head h3 {
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 2px;
  text-shadow: 0 2px 0 #fff;
}

.ch-head p {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0 0 10px;
}

.nodes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
}

.node {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 9px;
  text-align: left;
  background: #fff;
  border: 2.5px solid var(--edge);
  border-radius: 22px;
  padding: 9px 12px;
  min-height: 76px;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
  font: inherit;
  color: inherit;
  box-shadow: 0 4px 0 var(--edge);
}

.node:active { transform: translateY(4px); box-shadow: 0 0 0 var(--edge); }

/* 关卡徽章：按章节换色，像一枚贴纸 */
.node-idx {
  position: relative;
  grid-row: span 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFC24D 0%, #FF9F1C 100%);
  border: 3px solid var(--edge);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
  text-shadow: 0 1.5px 0 rgba(150, 80, 0, .45);
}

/* 徽章高光 */
.node-idx::after {
  content: '';
  position: absolute;
  left: 22%;
  top: 12%;
  width: 34%;
  height: 22%;
  border-radius: 50%;
  background: #fff;
  opacity: .55;
  pointer-events: none;
}

.node-name { font-size: 13.5px; font-weight: 700; line-height: 1.25; }

.node-stars { display: flex; gap: 2px; }
.node-stars .star { width: 12px; height: 12px; }

[data-c="0"] .node { background: #FFFBF1; }
[data-c="1"] .node { background: #F3FCF6; }
[data-c="2"] .node { background: #F7F5FF; }

[data-c="1"] .node-idx { background: linear-gradient(180deg, #5FD8B8 0%, #1FAE8C 100%); text-shadow: 0 1.5px 0 rgba(8, 92, 74, .45); }
[data-c="2"] .node-idx { background: linear-gradient(180deg, #AB98FF 0%, #7A63E0 100%); text-shadow: 0 1.5px 0 rgba(50, 34, 118, .45); }

.node.locked {
  background: #F8F1E5;
  border-color: var(--edge-2);
  box-shadow: 0 4px 0 var(--edge-2);
}

[data-c="1"] .node.locked { background: #EFF9F2; }
[data-c="2"] .node.locked { background: #F4F1FD; }

.node.locked .node-idx {
  background: #EDE2D2;
  border-color: var(--edge-2);
  color: #A89781;
  text-shadow: none;
}

[data-c="1"] .node.locked .node-idx { background: #D5EFE1; }
[data-c="2"] .node.locked .node-idx { background: #E2DBF6; }

.node.locked .node-idx::after { opacity: .35; }
.node.locked .node-name { color: #A89781; font-weight: 600; }

.lock {
  width: 13px;
  height: 11px;
  border-radius: 3px;
  background: #8C7A64;
  position: relative;
  display: block;
}

.lock::before {
  content: '';
  position: absolute;
  left: 2px;
  top: -6px;
  width: 8px;
  height: 8px;
  border: 2.4px solid #8C7A64;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

@keyframes shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-6px) rotate(-1.5deg); }
  75% { transform: translateX(6px) rotate(1.5deg); }
}

.shake { animation: shake .3s ease; }

/* ---------- 题目通用 ---------- */

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

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

.q-lead {
  font-size: 18px;
  font-weight: 800;
  margin: 12px 0 0;
  line-height: 1.4;
  background: rgba(255, 255, 255, .94);
  border: 2.5px solid var(--edge);
  border-radius: 16px;
  padding: 9px 14px;
  box-shadow: 0 4px 0 rgba(58, 48, 41, .2);
}

.q-hint {
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 7px 0 6px;
  padding-left: 3px;
}

.q-feedback {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--amber-d);
  margin: 10px 0 0;
  text-align: center;
  min-height: 18px;
}

.row { display: flex; gap: 10px; margin-top: 14px; }

/* ---------- 音高题 ---------- */

.pulse-row {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  flex: 1;
  min-height: 190px;
  margin: 6px 0 12px;
}

/* 柱子落地的那团影子：条子才开始像"立着的东西" */
.pulse-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: 108px;
  height: 14px;
  margin-left: -54px;
  border-radius: 50%;
  background: rgba(58, 48, 41, .11);
  filter: blur(2px);
}

.pulse {
  position: relative;
  width: 98px;
  height: 54px;
  border-radius: 24px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF2DA 100%);
  border: 3.5px solid var(--edge);
  box-shadow: 0 5px 0 var(--edge), 0 16px 18px -12px rgba(58, 48, 41, .45);
  transition: height .38s cubic-bezier(.2, .8, .3, 1), background .12s ease, transform .12s ease;
}

/* 顶部那道白高光：卡通按钮的"塑料感"来源 */
.pulse::before {
  content: '';
  position: absolute;
  left: 16%;
  right: 16%;
  top: 5px;
  height: 26%;
  border-radius: 50%;
  background: #fff;
  opacity: .85;
}

.pulse.on {
  background: linear-gradient(180deg, #FFC24D 0%, #FF9F1C 100%);
  transform: scale(1.06);
}

/* 还没响的时候，柱子里放个小音符 */
.pulse::after {
  content: '♪';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  color: #DCC9AC;
  pointer-events: none;
}

.pulse.on::before { opacity: .45; }

.pulse-cap {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
}

/* ---------- 选项卡 ---------- */

.opts { display: grid; gap: 12px; margin-top: auto; }

.opts.two { grid-template-columns: 1fr 1fr; }
.opts.three { grid-template-columns: repeat(3, 1fr); }
.opts.four { grid-template-columns: repeat(2, 1fr); }

.opt {
  min-height: 96px;
  border-radius: 22px;
  border: 3px solid var(--edge);
  background: #fff;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
  font-family: inherit;
  padding: 12px 8px;
  box-shadow: 0 5px 0 var(--edge);
}

.opt:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--edge); }

/* 不能点时不是"变透明"，而是"变成一张还没醒的卡" —— 透明会让背景透上来发脏 */
.opt:disabled {
  opacity: 1;
  background: #FBF3E4;
  border-color: #B7A28B;
  color: #A89781;
  box-shadow: 0 5px 0 #CBBCA7;
  cursor: default;
}

.opt:disabled:active { transform: none; box-shadow: 0 5px 0 #CBBCA7; }

.opt.ok {
  border-color: var(--ok);
  background: #E6F9EC;
  box-shadow: 0 5px 0 var(--ok);
}

.opt.bad {
  border-color: var(--bad);
  background: #FFEDEE;
  box-shadow: 0 5px 0 var(--bad);
}

.g-arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  filter: drop-shadow(0 2.5px 0 var(--edge));
}

.g-arrow.up { border-bottom: 14px solid var(--amber); }
.g-arrow.down { border-top: 14px solid var(--sky); }

/* 乐器图标：粗线条 + 圆底 */
.ic {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: #FFE9BE;
  border: 2.5px solid var(--edge);
  position: relative;
  display: block;
}

.ic-marimba::before {
  content: '';
  position: absolute;
  inset: 10px 8px;
  background: repeating-linear-gradient(90deg, var(--amber-d) 0 5px, transparent 5px 10px);
  border-radius: 3px;
}

.ic-piano::before {
  content: '';
  position: absolute;
  inset: 9px;
  background: #fff;
  border: 2px solid var(--edge);
  border-radius: 4px;
}

.ic-piano::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 9px;
  width: 6px;
  height: 16px;
  background: var(--edge);
  border-radius: 0 0 2px 2px;
  box-shadow: 14px 0 0 var(--edge);
}

.ic-flute::before {
  content: '';
  position: absolute;
  left: 7px;
  right: 7px;
  top: 19px;
  height: 8px;
  background: #C98B4A;
  border: 2px solid var(--edge);
  border-radius: 4px;
}

.ic-bell::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50% 50% 45% 45%;
  background: var(--gold);
  border: 2px solid var(--edge);
}

.ic-bell::after {
  content: '';
  position: absolute;
  left: 18px;
  top: 29px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--edge);
}

/* ---------- 节奏题 ---------- */

.beats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 9px;
  margin: 22px 0 6px;
}

.beat {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF4E0 100%);
  border: 2.5px solid var(--edge);
  box-shadow: 0 3px 0 var(--edge);
  transition: background .07s ease, transform .07s ease;
}

/* 每拍中心有个小点，敲到时就亮 —— 空方块看起来才像"节拍器" */
.beat::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #E4D3B8;
  transition: background .07s ease, transform .07s ease;
}

.beat.on {
  background: linear-gradient(180deg, #FFC24D 0%, #FF9F1C 100%);
  transform: scale(1.07);
}

.beat.on::after { background: #FFF7E4; transform: scale(1.25); }

.tap-pad {
  flex: 1;
  min-height: 150px;
  margin-top: 14px;
  border-radius: 26px;
  background-color: #FFF7E4;
  background-image:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(rgba(190, 168, 140, .2) 1.4px, transparent 1.6px);
  background-size: auto, 16px 16px;
  border: 3px dashed var(--edge-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: #C9974A;
  user-select: none;
  touch-action: none;
  transition: background-color .1s ease, transform .06s ease, border-color .2s ease;
}

.tap-pad.act { background-color: #FFE9B8; transform: scale(.985); }

.tap-pad.live {
  border-style: solid;
  border-color: var(--amber-d);
  background-color: #FFEFC9;
  color: var(--amber-d);
}

/* ---------- 回声题：五个音块 ---------- */

.echo-mid {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
}

.echo-big {
  width: 122px;
  height: 122px;
  border-radius: 50%;
  background: #fff;
  border: 3.5px solid var(--edge);
  box-shadow: 0 6px 0 var(--edge);
  color: var(--amber-d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  transition: transform .13s ease, background .2s ease, box-shadow .13s ease;
}

.echo-big.pop {
  transform: translateY(4px) scale(1.04);
  background: #FFEFC9;
  box-shadow: 0 2px 0 var(--edge);
}

.echo-foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 4px;
}

.keys {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 20px 0 4px;
}

.echo-foot .keys { margin: 0; }
.echo-foot .keys .key { height: 96px; }

.keys.pick.n3 { grid-template-columns: repeat(3, 1fr); }
.keys.pick.n4 { grid-template-columns: repeat(4, 1fr); }
.keys.pick.n5 { grid-template-columns: repeat(5, 1fr); }

.key {
  height: 84px;
  border-radius: 18px;
  border: 3px solid var(--edge);
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
  transition: transform .08s ease, background .1s ease, box-shadow .08s ease;
  padding: 0;
  box-shadow: 0 4px 0 var(--edge);
}

.key:active { transform: translateY(4px); box-shadow: 0 0 0 var(--edge); }

.key-dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--amber);
  border: 2px solid var(--edge);
}

.key:nth-child(2) .key-dot { background: var(--gold); }
.key:nth-child(3) .key-dot { background: var(--teal); }
.key:nth-child(4) .key-dot { background: var(--sky); }
.key:nth-child(5) .key-dot { background: var(--violet); }

.key.press {
  background: #FFEFC9;
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--edge);
}

.key.bad { background: #FFEDEE; border-color: var(--bad); box-shadow: 0 4px 0 var(--bad); }
.key.mute {
  opacity: 1;
  background: #F7EEE0;
  border-color: #C4B49D;
  box-shadow: 0 4px 0 #D6C8B4;
  color: #AE9C86;
  pointer-events: none;
}

.seq-dots { display: flex; gap: 11px; justify-content: center; margin-top: 14px; }

.seq-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--edge-2);
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

.seq-dots span.lit { background: var(--amber); border-color: var(--edge); transform: scale(1.2); }
.seq-dots span.done { background: var(--ok); border-color: var(--edge); }

/* ---------- 编创题 ---------- */

.compose .slots { margin: auto; max-width: 340px; }

.slots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 9px;
  width: 100%;
  margin: 18px 0 4px;
}

.slot {
  aspect-ratio: 1 / 1.12;
  border-radius: 20px;
  background: rgba(255, 255, 255, .55);
  border: 3px dashed var(--edge-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  color: #AE9C86;
}

.slot.filled {
  background: #FFEFC9;
  border-style: solid;
  border-color: var(--edge);
  color: var(--amber-d);
  box-shadow: 0 4px 0 var(--edge);
}

.keys.pick { margin-top: 14px; }
.keys.pick .key { height: 62px; }

.btn.small,
.row .btn { min-height: 52px; }

/* ---------- 结算 ---------- */

.stars {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 6px;
}

.star { display: block; width: 20px; height: 20px; overflow: visible; }
.star path { transition: fill .2s ease; stroke: var(--edge); stroke-width: 1.6; stroke-linejoin: round; }
.star.off path { fill: #DCCFC0; stroke: var(--edge-2); }
.star.on path { fill: var(--gold); stroke: var(--edge); }

.stars .star { width: 50px; height: 50px; animation: pop .4s cubic-bezier(.2, 1.5, .5, 1) both; }
.stars .star:nth-child(2) { animation-delay: .1s; }
.stars .star:nth-child(3) { animation-delay: .2s; }

@keyframes pop {
  0% { transform: scale(.3) rotate(-14deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.res-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  margin-top: 18px;
}

.res-actions .btn-primary { max-width: none; }

/* ---------- 报告 ---------- */

.report {
  width: 100%;
  max-width: 360px;
  margin: 18px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255, 255, 255, .8);
  border: 2.5px solid var(--edge);
  border-radius: 20px;
  padding: 16px 16px;
  box-shadow: 0 4px 0 rgba(58, 48, 41, .2);
}

.rp-row { display: flex; align-items: center; gap: 10px; }

.rp-name {
  width: 72px;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  text-align: left;
}

.rp-bar {
  flex: 1;
  height: 12px;
  border-radius: 6px;
  background: #EFE4D2;
  border: 2px solid var(--edge);
  overflow: hidden;
}

.rp-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #FFC24D, #FFA726);
  transition: width .6s ease;
}

.rp-val {
  width: 32px;
  font-size: 13px;
  font-weight: 800;
  color: var(--amber-d);
  text-align: right;
}

/* ---------- 剧情卡 ---------- */

#scr-story { padding-top: calc(env(safe-area-inset-top, 0px) + 24px); }

.story-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding-bottom: 88px;
  animation: storyIn .45s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes storyIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.story-art {
  width: 202px;
  height: 124px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .72);
  border: 3px solid var(--edge);
  border-radius: 24px;
  padding: 8px;
  box-shadow: 0 5px 0 var(--edge);
  animation: artBob 4s ease-in-out infinite;
}

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

.story-art .art-svg { width: 100%; height: 100%; }

.story-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
  background: var(--amber);
  border: 2.5px solid var(--edge);
  border-radius: 12px;
  padding: 3px 12px;
  margin: 0 0 10px;
  box-shadow: 0 3px 0 var(--edge);
}

.story-t {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.5;
  text-wrap: balance;
  margin: 0 0 12px;
  max-width: 320px;
  text-shadow: 0 2px 0 #fff;
}

.story-d {
  font-size: 14px;
  line-height: 1.95;
  color: var(--ink-2);
  margin: 0;
  max-width: 320px;
  text-align: left;
}

.story-card.chapter { justify-content: center; }

.story-card.chapter .story-t {
  font-size: 27px;
  letter-spacing: .5px;
  text-wrap: balance;
  max-width: 330px;
}

.story-card.chapter .story-art { width: 226px; height: 138px; }

.story-card.finale .story-kicker { background: var(--gold); color: var(--ink); }

.story-card.finale .story-art { width: 226px; height: 138px; }

.story-foot {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 330px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.story-pager {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 1px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.story-foot .btn {
  flex: 0 0 auto;
  min-width: 112px;
  width: auto;
  max-width: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 18px;
}

/* ---------- 关卡前情 ---------- */

.stage-pre {
  position: relative;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 8px 0 0;
  padding: 9px 12px 9px 14px;
  background: rgba(255, 255, 255, .94);
  border: 2px solid var(--edge-2);
  border-left-width: 5px;
  border-left-color: var(--amber);
  border-radius: 6px 14px 14px 6px;
}

.stage-pre.empty { display: none; }

/* ---------- 章节头 ---------- */

.ch-kicker {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--amber-d);
  background: #FFE9BE;
  border: 2px solid var(--edge);
  border-radius: 10px;
  padding: 2px 9px;
  margin: 0 0 5px;
}

.ch-head .ch-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 6px;
}

.ch-prog {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3);
  margin: 0 0 10px;
}

.ch-prog b { color: var(--amber-d); font-size: 13px; }

/* ---------- 结算页的剧情反馈 ---------- */

.res-story {
  position: relative;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-2);
  max-width: 306px;
  margin: 12px 0 0;
  padding: 12px 15px;
  background: #fff;
  border-radius: 18px;
  border: 2.5px solid var(--edge);
  box-shadow: 0 4px 0 rgba(58, 48, 41, .2);
  text-align: left;
  animation: storyIn .5s ease both;
}

.res-story.empty { display: none; }

.res-reward {
  margin-top: 14px;
  padding: 11px 20px;
  border-radius: 18px;
  background: linear-gradient(170deg, #FFE9A8, #FFD173);
  border: 3px solid var(--edge);
  box-shadow: 0 5px 0 var(--edge);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: pop .5s cubic-bezier(.2, 1.3, .5, 1) both;
}

.res-reward .reward-k {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #8A5C14;
}

.res-reward b {
  font-size: 18px;
  font-weight: 800;
  color: #6B4408;
}

.res-reward i {
  font-size: 12px;
  font-style: normal;
  color: #8A5C14;
}

/* ---------- 台阶排队 ---------- */

.stones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  margin: 18px 0 0;
}

.stone {
  position: relative;
  aspect-ratio: 1 / 1.42;
  border-radius: 52% 46% 47% 41% / 48% 54% 44% 50%;
  background: linear-gradient(158deg, #FFFDF7 0%, #EFE2CC 62%, #E2D2B8 100%);
  border: 3px solid var(--edge);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
  box-shadow: 0 5px 0 var(--edge);
}

/* 石斑：三颗深浅不一的点，避免"白方块"的塑料感 */
.stone::before {
  content: '';
  position: absolute;
  left: 26%;
  top: 26%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(58, 48, 41, .18);
  box-shadow: 25px 16px 0 rgba(58, 48, 41, .13), 5px 38px 0 rgba(58, 48, 41, .1);
}

/* 左上高光：小一点、虚一点，别像蛋壳 */
.stone::after {
  content: '';
  position: absolute;
  left: 20%;
  top: 15%;
  width: 20%;
  height: 11%;
  border-radius: 50%;
  background: #fff;
  opacity: .7;
}

.stone .stone-n {
  font-size: 16px;
  font-weight: 800;
  color: #A89781;
}

.stone:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--edge); }

.stone.lit {
  background: linear-gradient(160deg, #FFE9B8, #FFC966);
  transform: translateY(-6px);
  box-shadow: 0 9px 0 var(--edge);
}

.stone.lit .stone-n { color: var(--amber-d); }

.stone.done {
  background: #D9F6E2;
  border-color: var(--ok);
  box-shadow: 0 5px 0 var(--ok);
}

.stone.done .stone-n { color: #1E7A44; }

.stone.bad {
  background: #FFEDEE;
  border-color: var(--bad);
  box-shadow: 0 5px 0 var(--bad);
  animation: shake .3s ease;
}

.stone.mute { opacity: .5; pointer-events: none; }

.stone-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  margin-top: 18px;
}

.stone-q .stones { margin-top: auto; }
.stone-q .stone-track { margin-bottom: auto; }
.stone-q .row { margin-bottom: 4px; }

.track-slot {
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .6);
  border: 2.5px dashed var(--edge-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #AE9C86;
}

.track-slot.on {
  background: #FFE9B8;
  border-style: solid;
  border-color: var(--edge);
  color: var(--amber-d);
  box-shadow: 0 3px 0 var(--edge);
}

/* ---------- 找不同的那段 ---------- */

.odd-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 22px 0 0;
  max-width: 330px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.odd-q .odd-row { margin-top: auto; }
.odd-q .btn-listen { margin-top: 26px; margin-bottom: auto; }

.odd {
  position: relative;
  aspect-ratio: 1 / 2.35;
  border-radius: 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF6E6 100%);
  border: 3px solid var(--edge);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 0 var(--edge);
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
}

/* 顶部一小截节拍条，暗示"这是一段拍子" */
.odd::before {
  content: '';
  position: absolute;
  left: 30%;
  right: 30%;
  top: 14px;
  height: 4px;
  border-radius: 2px;
  background: #E4D3B8;
}

.odd span {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink-3);
}

.odd.play {
  background: linear-gradient(180deg, #FFE9B8, #FFC966);
  transform: translateY(-5px);
  box-shadow: 0 9px 0 var(--edge);
}

.odd.play::before { background: rgba(255, 255, 255, .75); }

.odd.play span { color: var(--amber-d); }

.odd:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--edge); }

.odd.ok { border-color: var(--ok); background: #D9F6E2; box-shadow: 0 5px 0 var(--ok); }
.odd.ok span { color: #1E7A44; }
.odd.bad { border-color: var(--bad); background: #FFEDEE; box-shadow: 0 5px 0 var(--bad); }

/* ---------- 木头鸟接龙 ---------- */

.bird-wrap {
  display: flex;
  justify-content: center;
  margin: 6px 0 4px;
}

.bird {
  position: relative;
  width: 74px;
  height: 58px;
  transition: transform .18s ease;
}

/* 身体 */
.bird::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 54px;
  height: 42px;
  border-radius: 52% 46% 30% 46%;
  background: #FFD98A;
  border: 3px solid var(--edge);
}

/* 嘴 */
.bird::after {
  content: '';
  position: absolute;
  left: 51px;
  top: 24px;
  z-index: 4;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 17px solid var(--amber);
  filter: drop-shadow(2px 0 0 var(--edge));
}

/* 尾巴 */
.bird .tl {
  position: absolute;
  left: -8px;
  top: 16px;
  width: 16px;
  height: 10px;
  border-radius: 6px 2px 2px 6px;
  background: #FFC24D;
  border: 3px solid var(--edge);
  transform: rotate(-14deg);
  z-index: 0;
}

/* 眼睛 */
.bird i {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--edge);
  top: 22px;
  z-index: 5;
}

.bird i:first-of-type { left: 34px; }
.bird i:last-of-type { left: 44px; }

/* 腮红 */
.bird b {
  position: absolute;
  left: 28px;
  top: 33px;
  width: 12px;
  height: 7px;
  border-radius: 50%;
  background: var(--pink);
  opacity: .85;
  z-index: 5;
}

.call-q .bird-wrap { margin: 16px 0 0; }

.bird.sing { animation: birdSing .42s ease; }

@keyframes birdSing {
  0%, 100% { transform: translateY(0) rotate(0); }
  40% { transform: translateY(-8px) rotate(-8deg); }
  70% { transform: translateY(-2px) rotate(4deg); }
}

/* ---------- 和弦明暗 ---------- */

.chord-vis {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  margin: 10px 0 0;
}

.mood-q .chord-vis {
  flex: 1;
  min-height: 220px;
  max-height: 400px;
  margin: 10px 0 20px;
}

.mood-q .btn-listen { margin-bottom: 18px; }

.chord-vis span {
  width: 34px;
  height: 42%;
  border-radius: 17px;
  background: #fff;
  border: 3px solid var(--edge);
  box-shadow: 0 4px 0 var(--edge);
  transition: height .3s ease, background .3s ease;
}

.chord-vis span:nth-child(2) { height: 62%; }
.chord-vis span:nth-child(3) { height: 80%; }

.chord-vis span.on {
  background: linear-gradient(180deg, #FFC24D, #FFA726);
  height: 92%;
}

.g-sun,
.g-moon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: block;
  border: 3px solid var(--edge);
}

.g-sun {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(255, 201, 60, .32);
}

.g-moon {
  background: var(--violet);
  box-shadow: inset -8px -3px 0 0 #CFEBFF;
}

/* ---------- 最后一拍 ---------- */

.drum-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 130px;
}

/* 鼓身：比鼓面大一圈的橙色圆环，鼓才有厚度 */
.drum-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  margin: -90px 0 0 -90px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFC24D 0%, #E98A1E 100%);
  border: 4px solid var(--edge);
  box-shadow: 0 14px 22px -8px rgba(58, 48, 41, .38);
}

.drum-face {
  position: relative;
  width: 152px;
  height: 152px;
  border-radius: 50%;
  background:
    radial-gradient(circle 8px at 50% 50%, #E2C08C 96%, transparent 100%),
    radial-gradient(circle at 38% 30%, #FFFDF4 0%, #FFF0D2 58%, #FFDFA8 100%);
  border: 4px solid var(--edge);
  box-shadow: inset 0 -8px 14px rgba(198, 150, 92, .22);
  transition: transform .12s ease, box-shadow .2s ease;
}

/* 一圈鼓钉：8 个圆点，纯 CSS 定位，比 conic 扇形更像钉 */
.drum-face::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cg%20fill='%23D08F27'%3E%3Ccircle%20cx='50'%20cy='6'%20r='3.9'/%3E%3Ccircle%20cx='81.1'%20cy='18.9'%20r='3.9'/%3E%3Ccircle%20cx='94'%20cy='50'%20r='3.9'/%3E%3Ccircle%20cx='81.1'%20cy='81.1'%20r='3.9'/%3E%3Ccircle%20cx='50'%20cy='94'%20r='3.9'/%3E%3Ccircle%20cx='18.9'%20cy='81.1'%20r='3.9'/%3E%3Ccircle%20cx='6'%20cy='50'%20r='3.9'/%3E%3Ccircle%20cx='18.9'%20cy='18.9'%20r='3.9'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.drum-face::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  border: 3px dashed var(--edge-2);
  opacity: .95;
}

.drum-face.glow {
  box-shadow: inset 0 -8px 14px rgba(198, 150, 92, .22), 0 0 0 12px rgba(255, 176, 48, .3);
}

.drum-face.beat { transform: scale(1.04); }

.drum-face.hit {
  transform: translateY(4px) scale(.95);
  box-shadow: inset 0 -8px 14px rgba(198, 150, 92, .3), 0 0 0 18px rgba(255, 176, 48, .28);
}

.drum-face.open {
  background: radial-gradient(circle at 38% 30%, #FFFFFF 0%, #FFF7E0 55%, #FFD98A 100%);
  border-color: var(--edge);
  animation: drumOpen .8s ease both;
}

@keyframes drumOpen {
  0% { transform: scale(.94); }
  45% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.beats.big { gap: 12px; margin: 6px 0 18px; }
.beats.big .beat {
  height: 34px;
  aspect-ratio: auto;
  border-radius: 10px;
  background: #fff;
}

.tap-pad.big {
  flex: 0 0 auto;
  height: 170px;
  min-height: 0;
  max-height: none;
  font-size: 22px;
}

/* ---------- 倒影题 ---------- */

.mirror-q .echo-big {
  background: #E8F4FF;
  border-color: var(--edge);
  color: #3B6E96;
}

.mirror-q .seq-dots span {
  transform: scaleX(-1);
}

/* ---------- 矮屏（iPhone SE / 小安卓）紧凑版 ----------
 * 目标：667px 高的机器上，15 关内容都放得下，不出现滚动或裁切
 */
@media (max-height: 740px) {
  .screen {
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
  }

  .topbar { height: 40px; margin-bottom: 2px; }
  .icon-btn { width: 36px; height: 36px; font-size: 20px; }

  .stage-pre {
    font-size: 12px;
    line-height: 1.55;
    padding: 6px 10px 6px 11px;
    margin-top: 5px;
    border-left-width: 4px;
  }

  .q-lead {
    font-size: 16px;
    padding: 7px 12px;
    margin-top: 8px;
    border-radius: 14px;
  }

  .q-hint { font-size: 11.5px; margin: 5px 0 4px; }

  /* 音高 */
  .pulse-row { min-height: 140px; margin: 4px 0 8px; gap: 34px; }
  .pulse-wrap { height: 140px; }
  .pulse { width: 84px; }
  .pulse-cap { font-size: 11px; }

  /* 选项 */
  .opt { min-height: 76px; font-size: 16px; border-radius: 18px; }
  .ic { width: 40px; height: 40px; border-radius: 13px; }

  /* 回声 */
  .echo-mid { min-height: 92px; }
  .echo-big { width: 98px; height: 98px; font-size: 24px; }
  .keys .key { height: 72px; }
  .echo-foot .keys .key { height: 78px; }
  .seq-dots { margin-top: 9px; }

  /* 节奏 */
  .beats { margin: 12px 0 4px; gap: 7px; }
  .tap-pad { min-height: 112px; margin-top: 10px; font-size: 20px; }
  .tap-pad.big { height: 128px; font-size: 20px; }
  .beats.big { margin: 4px 0 10px; }
  .beats.big .beat { height: 26px; }

  /* 台阶 / 石头 */
  .stones { gap: 9px; margin-top: 10px; }
  .stone-track { gap: 9px; margin-top: 10px; }
  .track-slot { height: 30px; }

  /* 找不同 */
  .odd-row { margin-top: 12px; gap: 8px; }
  .odd-q .btn-listen { margin-top: 14px; }

  /* 和弦 */
  .mood-q .chord-vis { min-height: 148px; max-height: none; margin: 6px 0 12px; }
  .mood-q .btn-listen { margin-bottom: 10px; }

  /* 接龙 / 最后一拍 */
  .bird { width: 62px; height: 48px; }
  .bird::before { width: 46px; height: 36px; }
  .bird::after { left: 44px; top: 20px; border-left-width: 14px; }
  .call-q .bird-wrap { margin: 8px 0 0; }
  .drum-wrap { min-height: 108px; }
  .drum-face { width: 122px; height: 122px; }
  .drum-wrap::before { width: 146px; height: 146px; margin: -73px 0 0 -73px; }
  .drum-face::after { width: 50px; height: 50px; margin: -25px 0 0 -25px; }

  /* 编创 */
  .compose .slots { max-width: 290px; }
  .keys.pick .key { height: 56px; }

  /* 结算 / 报告 */
  .stars .star { width: 42px; height: 42px; }
  .res-story { margin-top: 9px; padding: 10px 13px; }
  .report { gap: 9px; padding: 12px 13px; margin: 12px 0 4px; }
  .res-actions { margin-top: 12px; gap: 8px; }
  .btn { font-size: 17px; padding: 13px 22px; }

  /* 剧情卡 */
  #scr-story { padding-top: calc(env(safe-area-inset-top, 0px) + 16px); }
  .story-art { width: 168px; height: 104px; margin-bottom: 10px; }
  .story-card.chapter .story-art,
  .story-card.finale .story-art { width: 184px; height: 112px; }
  .story-t { font-size: 19px; margin-bottom: 9px; }
  .story-card.chapter .story-t { font-size: 23px; }
  .story-d { font-size: 13px; line-height: 1.8; }
  .story-card { padding-bottom: 74px; }
}

/* ---------- 无障碍 / 省电 ---------- */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   旁白 / 动画绘本 / 过场 / 任务条 / 十章长卷
   （这一段是后加的，覆盖了原来 story-card 那套静态卡片）
   ============================================================ */

/* ---------- 旁白开关 ---------- */

.voice-btn {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 16px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid var(--edge);
  background: #fff;
  color: var(--amber-d);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  padding: 0 0 1px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--edge);
}

.voice-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }

.voice-btn.off {
  background: #EFE4D2;
  border-color: var(--edge-2);
  color: #A89781;
  box-shadow: 0 3px 0 var(--edge-2);
  text-decoration: line-through;
}

.voice-btn.inline {
  position: static;
  width: 34px;
  height: 34px;
  font-size: 14px;
  flex: 0 0 auto;
}

/* ---------- 分镜动画：一场戏由若干镜头组成 ---------- */

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

.cine-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  flex: 0 0 auto;
}

.cine-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
  background: var(--amber);
  border: 2.5px solid var(--edge);
  border-radius: 11px;
  padding: 3px 11px;
  box-shadow: 0 3px 0 var(--edge);
  white-space: nowrap;
}

.cine-kicker.empty { visibility: hidden; }

.cine-skip {
  border: 0;
  background: transparent;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-3);
  padding: 6px 2px 6px 10px;
  cursor: pointer;
  letter-spacing: 1px;
}

.cine-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 2px 0 4px;
}

/* ---- 画框 ---- */

.cine-scene {
  position: relative;
  width: min(100%, 352px);
  aspect-ratio: 5 / 3;
  flex: 0 0 auto;
  overflow: hidden;
  border: 3px solid var(--edge);
  border-radius: 24px;
  box-shadow: 0 6px 0 var(--edge);
  background: #F4E6C9;
  isolation: isolate;
}

/* 镜头：缩放 + 平移。三层各自再叠一点反向位移，就有了纵深。
   transform 由 JS 直接写死，不走 CSS 变量 —— 变量参与 transform 过渡时
   各浏览器表现不一致，而且拖不动时很难查 */
.cine-cam {
  position: absolute;
  inset: 0;
  transform-origin: 50% 58%;
  transition: transform 3.6s cubic-bezier(.2, .55, .3, 1), filter .6s ease;
  will-change: transform;
}

.ly { position: absolute; inset: -8%; }
.ly-svg { width: 100%; height: 100%; display: block; }

.ly-far,
.ly-mid,
.ly-near { transition: transform 3.6s cubic-bezier(.2, .55, .3, 1); }

/* 调色：同一张画，换一层光就是另一种情绪 */
.cine-grade { position: absolute; inset: 0; pointer-events: none; }

.cine-grade[data-g="warm"]  { background: radial-gradient(118% 92% at 64% 12%, rgba(255, 214, 140, .34), rgba(255, 240, 210, 0) 58%); }
.cine-grade[data-g="cold"]  { background: linear-gradient(180deg, rgba(74, 100, 148, .36), rgba(42, 60, 96, .2)); }
.cine-grade[data-g="dim"]   { background: rgba(44, 36, 30, .36); }
.cine-grade[data-g="gold"]  { background: radial-gradient(92% 82% at 50% 52%, rgba(255, 240, 178, .38), rgba(255, 220, 140, .1) 74%); }
.cine-grade[data-g="night"] { background: linear-gradient(180deg, rgba(26, 20, 54, .5), rgba(58, 40, 88, .26)); }
.cine-grade[data-g="cool"]  { background: linear-gradient(180deg, rgba(120, 190, 220, .16), rgba(70, 150, 190, .1)); }

/* 暗角：让画面"厚"一点，别像贴纸 */
.cine-cinebar {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 21px;
  box-shadow: inset 0 0 30px rgba(58, 48, 41, .3), inset 0 -20px 26px rgba(58, 48, 41, .12);
}

/* ---- 粒子 ---- */

.cine-motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 21px;
  z-index: 2;
}

.cine-motes i {
  position: absolute;
  display: block;
  border-radius: 50%;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes moteDrift {
  0%   { transform: translate(0, 8px); opacity: .1; }
  50%  { transform: translate(9px, -18px); opacity: .75; }
  100% { transform: translate(-4px, -40px); opacity: .08; }
}

@keyframes moteRise {
  0%   { transform: translate(0, 14px) scale(.6); opacity: 0; }
  22%  { opacity: .85; }
  100% { transform: translate(-9px, -62px) scale(1); opacity: 0; }
}

@keyframes moteFall {
  0%   { transform: translate(0, -26px); opacity: 0; }
  26%  { opacity: .8; }
  100% { transform: translate(-16px, 116px); opacity: 0; }
}

/* ---- 短短 ---- */

.cine-hero {
  position: absolute;
  bottom: 2px;
  width: 56px;
  height: 80px;
  opacity: 0;
  z-index: 4;
}

.cine-hero.right  { right: 6%; }
.cine-hero.left   { left: 7%; }
.cine-hero.center { left: 50%; margin-left: -28px; }
.cine-hero.small  { width: 44px; height: 63px; }
.cine-hero.small.center { margin-left: -22px; }

.cine-hero.in { animation: heroIn .52s cubic-bezier(.2, 1.4, .4, 1) both; }

.cine-hero .hero-svg { width: 100%; height: 100%; display: block; }

@keyframes heroIn {
  0%   { opacity: 0; transform: translateY(28px) scale(.66); }
  60%  { opacity: 1; transform: translateY(-8px) scale(1.05); }
  80%  { transform: translateY(1px) scale(.99); }
  100% { opacity: 1; transform: none; }
}

/* 说话：嘴张合 + 身体轻轻晃 */
.cine-hero.talk .hero-svg { animation: talk .3s ease-in-out infinite alternate; }

@keyframes talk {
  from { transform: translateY(0) rotate(-2.2deg); }
  to   { transform: translateY(-4px) rotate(2.2deg); }
}

.cine-hero .hm,
.cine-hero .hg-body,
.cine-hero .hg-shut,
.cine-hero .hg-eyes {
  transform-box: fill-box;
}

.cine-hero .hg-shut { opacity: 0; animation: blinkOff 5.6s steps(1) infinite; }
.cine-hero .hg-eyes { opacity: 1; animation: blinkOn 5.6s steps(1) infinite; }

@keyframes blinkOn  { 0%, 93%, 100% { opacity: 1; } 94%, 96% { opacity: 0; } }
@keyframes blinkOff { 0%, 93%, 100% { opacity: 0; } 94%, 96% { opacity: 1; } }

.cine-hero .hm { transform-origin: center; }
.cine-hero.talk .hm { animation: hm .24s ease-in-out infinite alternate; }
@keyframes hm { to { transform: scaleY(2.7); } }

/* 歪头：听到动静，愣一下 */
.cine-hero.notice .hg-body {
  transform-origin: 50% 88%;
  animation: headTilt .56s cubic-bezier(.3, 1.5, .4, 1);
}
@keyframes headTilt {
  0%   { transform: rotate(0); }
  38%  { transform: rotate(-13deg) translateY(-2px); }
  70%  { transform: rotate(-9deg); }
  100% { transform: rotate(0); }
}

/* 敲下去：先仰后砸 */
.cine-hero.strike .hg-body {
  transform-origin: 50% 92%;
  animation: strikeBody .46s cubic-bezier(.4, .8, .3, 1);
}
@keyframes strikeBody {
  0%   { transform: rotate(0); }
  34%  { transform: rotate(9deg) translateY(-6px); }
  62%  { transform: rotate(-11deg) translateY(3px) scaleY(.94); }
  100% { transform: rotate(0); }
}

/* 泄气：整个人往下塌 */
.cine-hero.sad .hg-body {
  transform-origin: 50% 100%;
  animation: sadSink .9s ease-out forwards;
}
@keyframes sadSink {
  to { transform: translateY(4px) scaleY(.9) rotate(-3deg); }
}
.cine-hero.sad .hg-eyes { animation: none; opacity: .55; }

/* ---- 换景黑场 ---- */

.cine-veil {
  position: absolute;
  inset: 0;
  background: #2A241E;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
  z-index: 9;
}

.cine-veil.on { opacity: 1; }

/* ---- 由台词触发的画面效果 ---- */

.fx-burst {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 252, 226, .95), rgba(255, 230, 150, 0) 70%);
  animation: burstOut .9s ease-out forwards;
  pointer-events: none;
  z-index: 5;
}

@keyframes burstOut {
  0%   { transform: scale(.4); opacity: 1; }
  100% { transform: scale(24); opacity: 0; }
}

.fx-note {
  position: absolute;
  bottom: 20%;
  width: 26px;
  height: 26px;
  animation: noteUp 2.4s ease-out forwards;
  pointer-events: none;
  z-index: 5;
}

.fx-note svg { width: 100%; height: 100%; display: block; }

@keyframes noteUp {
  0%   { transform: translateY(0) scale(.4) rotate(-8deg); opacity: 0; }
  16%  { transform: translateY(-16px) scale(1) rotate(0); opacity: 1; }
  100% { transform: translateY(-104px) scale(.86) rotate(14deg); opacity: 0; }
}

/* 鼓面裂开：画面猛地一震，光转冷 */
.shake-hard { animation: shakeHard .52s cubic-bezier(.36, .07, .19, .97); }

@keyframes shakeHard {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* 敲击：短促的上下震 */
.shake-hit { animation: shakeHit .32s cubic-bezier(.36, .07, .19, .97); }

@keyframes shakeHit {
  25% { transform: translateY(3px) scale(1.015); }
  50% { transform: translateY(-2px); }
  75% { transform: translateY(1px); }
}

.is-cracked .crack-line {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: crackGrow .62s cubic-bezier(.3, .9, .4, 1) forwards;
}

@keyframes crackGrow { to { stroke-dashoffset: 0; } }

.is-cracked .cine-grade {
  background: linear-gradient(180deg, rgba(24, 30, 52, .5), rgba(58, 68, 96, .26));
  transition: background .55s ease;
}

/* 画面跟着褪色：颜色一淡，观众就知道"坏了" */
.is-cracked .cine-cam { filter: saturate(.6) brightness(.95); }

.is-dim .cine-grade { background: rgba(44, 36, 30, .5); transition: background .7s ease; }

/* ---- 台词气泡 ---- */

.cine-bubble {
  position: relative;
  width: 100%;
  max-width: 332px;
  flex: 0 0 auto;
  background: #fff;
  border: 3px solid var(--edge);
  border-radius: 20px;
  padding: 12px 15px;
  box-shadow: 0 4px 0 var(--edge);
  margin-top: 14px;
  z-index: 6;
}

.cine-bubble::after {
  content: '';
  position: absolute;
  right: 28px;
  top: -11px;
  width: 17px;
  height: 17px;
  background: #fff;
  border-left: 3px solid var(--edge);
  border-top: 3px solid var(--edge);
  border-radius: 5px 0 0 0;
  transform: rotate(45deg);
}

/* 短短站左边时，气泡尾巴跟着换到左边 */
.cine.hero-left .cine-bubble::after {
  right: auto;
  left: 28px;
  border-left: 0;
  border-right: 3px solid var(--edge);
  border-radius: 0 5px 0 0;
}

/* 站正中时，尾巴也挪到正中 */
.cine.hero-center .cine-bubble::after {
  right: auto;
  left: 50%;
  margin-left: -9px;
}

.cine-t {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.55;
  margin: 0;
  text-wrap: balance;
  letter-spacing: .2px;
  min-height: 1.55em;
}

.cine-d {
  width: 100%;
  max-width: 332px;
  flex: 0 0 auto;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 10px 0 0;
  text-align: left;
  opacity: 0;
  transition: opacity .28s ease;
  min-height: 1.85em;
}

.cine-d.in { opacity: 1; }

.typing::after {
  content: '▏';
  margin-left: 1px;
  color: var(--amber);
  animation: caret .7s steps(1) infinite;
}

@keyframes caret { 50% { opacity: 0; } }

.cine-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding-top: 10px;
}

.cine-dots { display: flex; gap: 6px; flex: 1; align-items: center; }

.cine-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--edge-2);
  transition: width .2s ease, background .2s ease, border-color .2s ease;
}

.cine-dots i.on { width: 20px; border-radius: 5px; background: var(--amber); border-color: var(--edge); }
.cine-dots i.done { background: var(--amber-l); border-color: var(--edge); }

.cine-sound {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2.5px solid var(--edge);
  background: #fff;
  color: var(--amber-d);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--edge);
}

.cine-sound:active { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }

.cine-sound.pulse { animation: soundPulse .5s ease; }

@keyframes soundPulse {
  0%   { box-shadow: 0 3px 0 var(--edge), 0 0 0 0 rgba(255, 176, 48, .55); }
  100% { box-shadow: 0 3px 0 var(--edge), 0 0 0 16px rgba(255, 176, 48, 0); }
}

#cineNext {
  flex: 0 0 auto;
  width: auto;
  min-width: 108px;
  max-width: none;
  padding: 12px 20px;
  font-size: 15.5px;
  border-radius: 18px;
}

/* 章节卡 / 终章的配色 */
.cine.chapter .cine-kicker { background: var(--teal); }
.cine.chapter .cine-t { font-size: 20px; }
.cine.finale .cine-kicker { background: var(--gold); color: var(--ink); }

/* ---------- 过关过场：横移长卷 ---------- */

.pass {
  width: 100%;
  max-width: 340px;
  flex: 0 0 auto;
  margin: 0 auto 8px;
}

.pass-view {
  position: relative;
  height: 94px;
  border-radius: 18px;
  overflow: hidden;
  border: 2.5px solid var(--edge);
  box-shadow: 0 4px 0 var(--edge);
  background: linear-gradient(180deg, #DCEFF7 0%, #EDF6E6 58%, #E3D9BC 58.5%, #D3C4A0 100%);
}

.pass-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0) 58%);
  pointer-events: none;
}

.pass-hill {
  position: absolute;
  bottom: 26px;
  width: 190px;
  height: 62px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transition: transform .34s ease-out;
  pointer-events: none;
}

.pass-hill.h1 { right: -56px; background: #C8DFBC; bottom: 24px; }
.pass-hill.h2 { left: -48px; background: #ADCBA0; }

.pass-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 62% at 50% 64%, rgba(255, 238, 172, .92), rgba(255, 238, 172, 0) 72%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

.pass-view.landed .pass-glow { opacity: 1; }

.pass-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  background: linear-gradient(180deg, #DED3B4, #C7B993);
  pointer-events: none;
}

.pass-track {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  height: 48px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  z-index: 3;
}

.pass-track::before {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  top: 9px;
  border-top: 3.5px dashed rgba(58, 48, 41, .55);
}

.pn {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #8C7A64;
  box-shadow: 0 2px 0 rgba(58, 48, 41, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  z-index: 1;
}

.pn i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #B6A48C;
  transition: background .2s ease;
}

.pn.done { background: #FFE9B8; border-color: var(--edge); }
.pn.done i { background: var(--amber); }

.pn.now {
  background: var(--amber);
  border-color: var(--edge);
  box-shadow: 0 0 0 5px rgba(255, 176, 48, .3);
  animation: pnPop .55s cubic-bezier(.2, 1.6, .4, 1) 1;
}

.pn.now i { background: #fff; }

@keyframes pnPop {
  0%   { transform: scale(1); }
  42%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

.pass-hero {
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 30px;
  height: 44px;
  transition: transform .13s cubic-bezier(.3, .9, .4, 1);
  z-index: 4;
}

.pass-hero .hero-svg { width: 100%; height: 100%; display: block; }

.pass-ripple {
  position: absolute;
  bottom: 12px;
  width: 52px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .95);
  animation: rippleOut .66s ease-out forwards;
  pointer-events: none;
  z-index: 2;
}

@keyframes rippleOut {
  0%   { transform: scale(.28); opacity: .95; }
  100% { transform: scale(1.55); opacity: 0; }
}

.pass-cap {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-2);
  margin: 5px 4px 0;
  text-align: left;
  min-height: 2.2em;
}

/* ---------- 关卡任务条：这一关属于哪一章、要拿什么、走到第几步 ---------- */

.mission {
  flex: 0 0 auto;
  margin-top: 2px;
  padding: 7px 11px 8px;
  background: rgba(255, 255, 255, .95);
  border: 2.5px solid var(--edge);
  border-radius: 15px;
  box-shadow: 0 3px 0 rgba(58, 48, 41, .18);
}

.m-head { display: flex; align-items: center; gap: 8px; }

.m-ch {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--amber-d);
  white-space: nowrap;
}

.m-pips { margin-left: auto; display: flex; gap: 4px; flex: 0 0 auto; }

.m-pips i {
  width: 15px;
  height: 7px;
  border-radius: 4px;
  background: #EFE4D2;
  border: 1.5px solid var(--line-2);
}

.m-pips i.on { background: var(--amber); border-color: var(--edge); }
.m-pips i.done { background: var(--amber-l); border-color: var(--edge); }

.m-goal {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
}

.m-tag {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  background: var(--amber);
  border: 1.5px solid var(--edge);
  border-radius: 6px;
  padding: 1px 4px;
}

.m-tag.alt { background: #B7A28B; }

.m-goal b { flex: 0 0 auto; font-size: 13px; color: var(--ink); }

.m-now {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 章节配色 */
.mission[data-c="1"] .m-ch { color: var(--teal-d); }
.mission[data-c="1"] .m-tag { background: var(--teal); }
.mission[data-c="1"] .m-pips i.on { background: var(--teal); }
.mission[data-c="1"] .m-pips i.done { background: #B7EDDD; }

.mission[data-c="2"] .m-ch { color: var(--violet-d); }
.mission[data-c="2"] .m-tag { background: var(--violet); }
.mission[data-c="2"] .m-pips i.on { background: var(--violet); }
.mission[data-c="2"] .m-pips i.done { background: #D9D2FB; }

.mission + .stage-pre { margin-top: 7px; }

/* ---------- 十章长卷（地图顶部） ---------- */

.arc {
  margin-top: 4px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .9);
  border: 2.5px solid var(--edge);
  border-radius: 18px;
  box-shadow: 0 4px 0 rgba(58, 48, 41, .18);
}

.arc-hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.arc-hd b { font-size: 14px; font-weight: 800; }
.arc-hd span { margin-left: auto; font-size: 10.5px; color: var(--ink-3); }

.act { display: flex; align-items: center; gap: 7px; padding: 3.5px 0; opacity: .56; }
.act.open { opacity: 1; }

.act-no {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #fff;
  background: #B7A28B;
  border-radius: 5px;
  padding: 1.5px 5px;
}

.act.open .act-no { background: var(--amber); border: 1.5px solid var(--edge); }

.act-nm { font-size: 12.5px; font-weight: 800; }

.act-pips { margin-left: auto; display: flex; gap: 3px; }

.act-pips i { width: 11px; height: 6px; border-radius: 3px; background: #DDCDB7; }
.act-pips i.open { background: #FFD98A; }
.act-pips i.done { background: var(--amber); }

/* ---------- 结算页 / 档案页改成可滚动的一列 ---------- */

#scr-result,
#scr-final {
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: calc(env(safe-area-inset-top, 0px) + 18px);
}

#scr-result .stars { margin-top: 2px; }

/* 内容不满一屏时居中；超出时 auto 边距自动归零，不会把顶部裁掉 */
#scr-result > :first-child { margin-top: auto; }
#scr-result > .res-actions:last-child { margin-bottom: auto; }
#scr-final > :first-child { margin-top: auto; }
#scr-final > .tip:last-child { margin-bottom: auto; }

#scr-result .res-actions,
#scr-final .res-actions { flex: 0 0 auto; }

/* 星星等过场演完再蹦出来 */
.stars:not(.in) .star { animation: none; opacity: 0; }
.stars.in .star { animation: pop .42s cubic-bezier(.2, 1.5, .5, 1) both; }
.stars.in .star:nth-child(2) { animation-delay: .09s; }
.stars.in .star:nth-child(3) { animation-delay: .18s; }

/* ---------- 终章之后的预告：后面还有九章 ---------- */

.teaser { width: 100%; max-width: 356px; margin-top: 16px; flex: 0 0 auto; }

.teaser-hd {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--amber-d);
  margin: 0 0 8px;
  text-align: left;
}

.tz-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  margin-bottom: 7px;
  text-align: left;
  background: rgba(255, 255, 255, .72);
  border: 2px dashed var(--edge-2);
  border-radius: 12px;
}

.tz-no {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #EFE4D2;
  border: 2px solid var(--edge-2);
  color: #8C7A64;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tz-main { min-width: 0; }
.tz-nm { font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.tz-pl { font-size: 10.5px; color: var(--ink-3); margin-left: 5px; font-weight: 600; }
.tz-line { font-size: 11px; color: var(--ink-3); line-height: 1.5; margin-top: 1px; }

.tz-tag {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 800;
  color: #A89781;
  border: 1.5px solid var(--line-2);
  border-radius: 5px;
  padding: 1px 4px;
}

/* ---------- 矮屏紧凑 ---------- */

@media (max-height: 740px) {
  .cine-scene { width: min(86%, 292px); border-radius: 20px; }
  .cine-hero { width: 44px; height: 63px; }
  .cine-hero.center { margin-left: -22px; }
  .cine-hero.small { width: 36px; height: 52px; }
  .cine-hero.small.center { margin-left: -18px; }
  .cine-t { font-size: 16px; }
  .cine.chapter .cine-t { font-size: 18px; }
  .cine-d { font-size: 12.5px; line-height: 1.72; margin-top: 7px; }
  .cine-bubble { padding: 9px 12px; border-radius: 17px; margin-top: 11px; }
  .cine-hd { height: 28px; }
  .cine-foot { padding-top: 6px; }
  .cine-sound { width: 38px; height: 38px; }
  #cineNext { padding: 10px 16px; font-size: 14.5px; min-width: 96px; }

  .mission { padding: 5px 9px 6px; border-radius: 13px; }
  .m-ch { font-size: 10.5px; }
  .m-goal { margin-top: 4px; font-size: 11.5px; }
  .m-goal b { font-size: 12px; }
  .m-now { font-size: 10.5px; }
  .m-pips i { width: 12px; height: 6px; }

  #scr-result, #scr-final { padding-top: calc(env(safe-area-inset-top, 0px) + 10px); }
  .pass { margin-bottom: 4px; }
  .pass-view { height: 78px; }
  .pass-track { height: 42px; bottom: 14px; }
  .pn { width: 18px; height: 18px; }
  .pass-hero { width: 26px; height: 38px; bottom: 3px; }
  .pass-cap { font-size: 12.5px; line-height: 1.72; }
  .arc { padding: 8px 10px; }
  .act { padding: 2.5px 0; }
  .teaser { margin-top: 10px; }
  .tz-row { padding: 5px 8px; margin-bottom: 5px; }
}

/* ---------- 云同步提示（由 js/cloud.js 注入到首页底部） ---------- */
.cloud-note {
  margin: 9px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-3);
  text-align: center;
}
.cloud-note b {
  font-weight: 600;
  color: var(--ink-3);
}
.cloud-note.on b {
  color: var(--teal-d);
}
.cloud-note a {
  color: var(--amber-d);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cloud-note .cn-sep {
  opacity: .5;
  margin: 0 2px;
}

@media (max-height: 740px) {
  .cloud-note { font-size: 11px; margin-top: 6px; }

  /* 矮屏（如 375×667）：logo 和鼓一起收一点，保证开头页不顶出屏幕 */
  .brand-logo { height: 22px; margin: 2px auto 6px; }
  .drum-mark { width: 124px; height: 118px; }
}