:root {
  --ink: #2e261f;
  --text: #5e4f42;
  --muted: #867263;
  --paper: #fff8ea;
  --cream: #fff0c9;
  --yellow: #ffd45d;
  --orange: #f18a3c;
  --red: #e85a4d;
  --green: #6baa72;
  --blue: #82c4dc;
  --brown: #9a6637;
  --shadow: 0 18px 48px rgba(89, 56, 24, .2);
  font-family: "Source Han Serif SC", "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", SimSun, serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  color: var(--ink);
  background: #211a17;
  overflow: hidden;
  touch-action: manipulation;
}

button {
  font: inherit;
}

.app {
  position: relative;
  width: min(100vw, 520px);
  height: 100dvh;
  min-height: 500px;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 212, 93, .45), transparent 12rem),
    radial-gradient(circle at 82% 14%, rgba(130, 196, 220, .24), transparent 14rem),
    linear-gradient(180deg, #fff8ea 0%, #ffe5b3 54%, #f8c982 100%);
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(.98);
  transition: opacity .32s ease, transform .32s ease;
}

.screen.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.screen-loading {
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: calc(24px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));
  overflow: hidden;
}

.loading-scene {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: calc(100dvh - 52px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  flex-direction: column;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding-top: min(4dvh, 34px);
}

.loading-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.screen-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 248, 234, .86) 0%, rgba(255, 248, 234, .26) 34%, rgba(255, 248, 234, .08) 58%, rgba(67, 42, 22, .12) 100%),
    radial-gradient(circle at 50% 15%, rgba(255, 248, 234, .92), transparent 15rem);
  pointer-events: none;
}

.brand-logo {
  display: block;
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  z-index: 3;
  width: min(16.8vw, 67px);
  height: auto;
  margin: 0;
  filter: drop-shadow(3px 4px 0 rgba(46, 38, 31, .12));
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 14px;
  font-size: clamp(42px, 13vw, 72px);
  line-height: .96;
  letter-spacing: 0;
}

.screen-loading h1 {
  margin-bottom: 10px;
  font-size: clamp(38px, 11vw, 60px);
  text-shadow: 0 3px 0 rgba(255, 212, 93, .72);
}

.loading-hero {
  transform: translateY(clamp(20px, 6vh, 60px));
}

.loading-title-logo {
  display: block;
  width: min(110.4vw, 468px);
  height: auto;
  margin: -4px auto 10px;
  filter: drop-shadow(0 8px 12px rgba(92, 52, 16, .2));
  transform: translate(-70px, clamp(-80px, -8vh, -30px));
}

.loading-bottom {
  display: none;
}

.loading-remind {
  display: block;
  width: min(90vw, 352px);
  height: auto;
  margin: clamp(-90px, -9vh, -30px) auto 0;
  filter: drop-shadow(0 7px 10px rgba(92, 52, 16, .16));
}

h2 {
  margin-bottom: 12px;
  font-size: clamp(34px, 10vw, 56px);
  line-height: 1.02;
  letter-spacing: 0;
}

h2 span {
  color: var(--orange);
  text-shadow: 3px 3px 0 rgba(255, 212, 93, .68);
}

p {
  color: var(--text);
  line-height: 1.62;
  font-weight: 650;
}

.loader {
  width: min(74vw, 280px);
  height: 20px;
  margin: 10px auto 0;
  padding: 3px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #fffaf0;
  box-shadow: 4px 5px 0 rgba(46, 38, 31, .13);
}

.loader span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--yellow), var(--orange));
  animation: load 5s ease forwards;
}

@keyframes load {
  to {
    width: 100%;
  }
}

.screen-story {
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 248, 234, .86) 0%, rgba(255, 248, 234, .26) 34%, rgba(255, 248, 234, .08) 58%, rgba(67, 42, 22, .12) 100%),
    radial-gradient(circle at 50% 15%, rgba(255, 248, 234, .92), transparent 15rem),
    url("./assets/story_loading_scene.png") center / cover no-repeat;
}

.screen-boss {
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(255, 248, 234, .86) 0%, rgba(255, 248, 234, .26) 34%, rgba(255, 248, 234, .08) 58%, rgba(67, 42, 22, .12) 100%),
    radial-gradient(circle at 50% 15%, rgba(255, 248, 234, .92), transparent 15rem),
    url("./assets/end_bg1.png") center / cover no-repeat;
}


.story-heading {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 auto 10px;
  text-align: center;
  translate: -10px clamp(-80px, -8vh, -30px);
}

.story-heading-logo {
  display: block;
  width: min(109.44vw, 461px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 8px 12px rgba(46, 38, 31, .18));
}

.story-card {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  min-height: min(43dvh, 364px);
  flex-direction: column;
  justify-content: center;
  padding: clamp(47px, 9.1vw, 60px) clamp(62px, calc(9vw + 20px), 78px) clamp(77px, 15.6vw, 98px);
  background: url("./assets/pg1_task.png") center / 100% 100% no-repeat;
  translate: 0 clamp(-70px, -7vh, -25px);
  filter: drop-shadow(0 12px 18px rgba(92, 52, 16, .18));
  animation: scroll-breathe 2.4s ease-in-out infinite;
}

@keyframes scroll-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-4px) scale(1.012);
  }
}

.story-copy {
  position: relative;
  z-index: 1;
  max-width: 304px;
  margin: 0 auto;
  font-family: "Source Han Serif SC", "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", SimSun, serif;
  text-align: center;
  translate: 0 clamp(6px, 2vh, 18px);
}

.story-card p {
  margin-bottom: 8px;
  font-size: clamp(15px, calc(3.3vw + 3px), 18px);
  line-height: 1.56;
}

.task-btn {
  position: absolute;
  left: 50%;
  bottom: calc(clamp(16px, 5vw, 30px) - clamp(50px, 16vh, 140px));
  z-index: 2;
  display: block;
  width: min(37.2vw, 155px);
  aspect-ratio: 1448 / 1086;
  cursor: pointer;
  border: 0;
  background: url("./assets/pg1_btn.png") center / contain no-repeat;
  filter: drop-shadow(4px 7px 0 rgba(46, 38, 31, .12));
  transform: translateX(-50%);
  -webkit-tap-highlight-color: transparent;
}

.task-btn:active {
  transform: translateX(-50%) translateY(2px) scale(.98);
}















.primary-btn,
.ghost-btn,
.scene-tab,
.icon-btn {
  cursor: pointer;
  border: 0;
  -webkit-tap-highlight-color: transparent;
}

.primary-btn,
.ghost-btn {
  min-height: 52px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 950;
  box-shadow: 5px 5px 0 rgba(46, 38, 31, .15);
}

.primary-btn {
  background: var(--ink);
  color: white;
}

.ghost-btn {
  background: #fff8ea;
  color: var(--ink);
}





.screen-game {
  justify-content: flex-start;
  overflow: hidden;
  padding: calc(16px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
}

.screen-game[data-scene="breakfast"] {
  background:
    linear-gradient(180deg, rgba(255, 248, 234, .86) 0%, rgba(255, 248, 234, .26) 34%, rgba(255, 248, 234, .08) 58%, rgba(67, 42, 22, .12) 100%),
    radial-gradient(circle at 50% 15%, rgba(255, 248, 234, .92), transparent 15rem),
    url("./assets/wise_bg.png") center / cover no-repeat;
}

.screen-game[data-scene="office"] {
  background:
    linear-gradient(180deg, rgba(255, 248, 234, .86) 0%, rgba(255, 248, 234, .26) 34%, rgba(255, 248, 234, .08) 58%, rgba(67, 42, 22, .12) 100%),
    radial-gradient(circle at 50% 15%, rgba(255, 248, 234, .92), transparent 15rem),
    url("./assets/courage_bg.png") center / cover no-repeat;
}

.screen-game[data-scene="fitness"] {
  background:
    linear-gradient(180deg, rgba(255, 248, 234, .86) 0%, rgba(255, 248, 234, .26) 34%, rgba(255, 248, 234, .08) 58%, rgba(67, 42, 22, .12) 100%),
    radial-gradient(circle at 50% 15%, rgba(255, 248, 234, .92), transparent 15rem),
    url("./assets/insist_bg.png") center / cover no-repeat;
}

.trial-scene-logo {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  left: 12px;
  z-index: 2;
  display: block;
  width: min(50.4vw, 210px);
  height: auto;
  margin: 0;
  filter: drop-shadow(0 9px 12px rgba(92, 52, 16, .2));
}

.hp-bar {
  position: absolute;
  left: 50%;
  bottom: calc(2px + env(safe-area-inset-bottom));
  z-index: 2;
  display: grid;
  width: min(101.4vw, 426px);
  aspect-ratio: 3547 / 1182;
  grid-template-columns: 1fr;
  align-items: center;
  margin: 0;
  padding: 0 14% 1% 29%;
  background: url("./assets/hp_bg.png") center / contain no-repeat;
  filter: drop-shadow(0 7px 10px rgba(92, 52, 16, .16));
  transform: translateX(-50%);
}

.hp-bar > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.hearts {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  align-items: center;
  transform: translate(-25px, 11px);
}

.heart {
  display: block;
  aspect-ratio: 1;
  min-width: 0;
  background: url("./assets/hp.png") center 58% / 129.6% no-repeat;
  opacity: .2;
  filter: grayscale(.8);
}

.heart.is-full {
  opacity: 1;
  filter: none;
}

.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: visible;
  padding-top: clamp(108px, 20dvh, 162px);
  padding-bottom: clamp(154px, 26dvh, 188px);
}

.trial-scene.is-hidden {
  display: none;
}

.sun {
  display: none;
}

.level-bubble {
  display: none;
}

.trial-guide {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: min(43.4vw, 185px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 0;
  transform: translateY(clamp(-22px, -2vh, -8px));
}

.trial-character {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 12px 14px rgba(92, 52, 16, .26))
    drop-shadow(3px 4px 0 rgba(46, 38, 31, .1));
  transform: scale(1.15);
  transform-origin: center bottom;
}

.trial-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("./assets/question-bubble.png") center / 100% 100% no-repeat;
  filter: drop-shadow(4px 5px 0 rgba(46, 38, 31, .1));
}

.trial-guide p {
  margin: 0;
  padding: 16px 22px;
  color: #5d4736;
  font-family: "Source Han Serif SC", "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: clamp(15px, 3.9vw, 18px);
  line-height: 1.56;
  font-weight: 650;
  text-align: center;
  text-align-last: center;
}

/* 后两个场景的气泡：上下拉伸、左右缩短 */
.screen-game[data-scene="office"] .trial-guide p,
.screen-game[data-scene="fitness"] .trial-guide p {
  padding: 22px 14px;
}

.trial-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(124px, 20dvh, 158px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-height: 172px;
  padding: 14px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: rgba(255, 248, 234, .92);
  box-shadow: 6px 7px 0 rgba(46, 38, 31, .12);
}

.trial-panel.is-hidden {
  display: none;
}

/* 智慧试炼：问答区使用 wise-qna.png 背景 */
.quiz-panel {
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding-top: 52px;
  overflow: visible;
}

.quiz-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./assets/wise-qna.png") center / 100% 100% no-repeat;
  filter: drop-shadow(6px 7px 0 rgba(46, 38, 31, .12));
  opacity: 0.75;
  transform: scaleY(1.5);
  transform-origin: center center;
  pointer-events: none;
  z-index: -1;
}

.quiz-panel .quiz-option {
  border: none;
  background: transparent;
  box-shadow: none;
}

.quiz-panel .quiz-option:first-child {
  transform: translateY(3px);
}

.quiz-panel .quiz-option:nth-child(2) {
  transform: translateY(1px);
}

.quiz-success {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(100px, 17dvh, 135px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 172px;
  padding: 14px;
}

.quiz-success.is-hidden,
.battle-success.is-hidden,
.fitness-success.is-hidden {
  display: none;
}

.fitness-success {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(100px, 17dvh, 135px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 172px;
  padding: 14px;
}

.battle-success {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(100px, 17dvh, 135px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 172px;
  padding: 14px;
}

/* ── 成功页精灵 ── */
.success-fairy {
  display: block;
  width: min(66vw, 260px);
  height: auto;
  margin: 2px auto 0;
  cursor: pointer;
  filter: drop-shadow(5px 6px 0 rgba(46, 38, 31, .15));
  animation: fairy-float 3s ease-in-out infinite;
  transform: translateY(clamp(10px, 2vh, 30px));
  -webkit-tap-highlight-color: transparent;
}

.success-fairy:active {
  transform: translateY(clamp(10px, 2vh, 30px)) scale(.95);
}

@keyframes fairy-float {
  0%, 100% {
    transform: translateY(clamp(10px, 2vh, 30px)) scale(1);
  }
  50% {
    transform: translateY(calc(clamp(10px, 2vh, 30px) - 8px)) scale(1.02);
  }
}

/* ── 成功页提示文字图 ── */
.success-remind {
  display: block;
  width: min(94vw, 374px);
  height: auto;
  margin: 4px auto 0;
  filter: drop-shadow(5px 6px 0 rgba(46, 38, 31, .15));
}

/* ── 成功页按钮 ── */
.fairy-btn {
  display: block;
  width: min(46vw, 185px);
  height: auto;
  margin: clamp(4px, 1vh, 12px) auto 0;
  padding: 0;
  border: none;
  background: none;
  filter: drop-shadow(6px 8px 10px rgba(46, 38, 31, .25));
  animation: fairy-btn-float 2.4s ease-in-out infinite;
  transform: translate(clamp(90px, 17vw, 140px), clamp(70px, 9vh, 90px));
  -webkit-tap-highlight-color: transparent;
}

.fairy-btn img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes fairy-btn-float {
  0%, 100% {
    transform: translate(clamp(90px, 17vw, 140px), clamp(70px, 9vh, 90px)) scale(1);
  }
  50% {
    transform: translate(clamp(90px, 17vw, 140px), calc(clamp(70px, 9vh, 90px) - 10px)) scale(1.1);
  }
}

.trial-label {
  margin: 0;
  color: var(--brown);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .1em;
}

.trial-panel h3 {
  margin: 0;
  font-size: clamp(16px, 4.2vw, 20px);
  line-height: 1.35;
  text-align: center;
}

/* 智慧试炼：问题与选项分开，缩减间距 */
.quiz-panel {
  gap: -2px;
}

.quiz-panel h3 {
  margin-top: -25px;
}

.quiz-panel .quiz-options {
  gap: 0;
  margin-top: 9px;
}

.quiz-panel .quiz-option {
  font-size: clamp(14px, 3.6vw, 17px);
}

.trial-progress {
  align-self: flex-end;
  padding: 5px 9px;
  border: 2px solid rgba(46, 38, 31, .7);
  border-radius: 999px;
  background: white;
  color: var(--brown);
  font-size: 12px;
  font-weight: 950;
}

.trial-done {
  padding: 14px;
  border: 2px solid rgba(46, 38, 31, .72);
  border-radius: 13px;
  background: rgba(107, 170, 114, .16);
  color: var(--green);
  font-weight: 950;
  text-align: center;
}

.quiz-options {
  display: grid;
  gap: 8px;
}

.quiz-option,
.mini-btn,
.spell-mini {
  min-height: 42px;
  border: 2px solid rgba(46, 38, 31, .78);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-weight: 950;
  box-shadow: 3px 4px 0 rgba(46, 38, 31, .1);
  -webkit-tap-highlight-color: transparent;
}

.quiz-option.is-correct {
  color: var(--green);
}

.quiz-option.is-wrong {
  color: var(--red);
  animation: wrong-shake .24s ease;
}

@keyframes wrong-shake {
  0%, 100% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-7px);
  }
  70% {
    transform: translateX(7px);
  }
}

.battle-panel,
.fitness-panel {
  align-items: center;
  text-align: center;
}

.battle-panel,
.fitness-panel {
  border: none;
  background: none;
  box-shadow: none;
}

.monster-img {
  display: block;
  width: min(56vw, 224px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(7px 8px 0 rgba(46, 38, 31, .14));
  animation: monster-float 2.4s ease-in-out infinite;
  transform: translateY(clamp(-130px, -12vh, -50px));
}

@keyframes monster-float {
  0%, 100% {
    transform: translateY(clamp(-130px, -12vh, -50px)) scale(1);
  }
  50% {
    transform: translateY(clamp(-130px, -12vh, -50px)) scale(1.05);
  }
}

.monster-img.is-hit {
  animation: monster-hit .42s ease;
}

@keyframes monster-hit {
  0%, 100% {
    transform: translateY(clamp(-130px, -12vh, -50px)) translateX(0) rotate(0);
  }
  25% {
    transform: translateY(clamp(-130px, -12vh, -50px)) translateX(12px) rotate(4deg);
  }
  60% {
    transform: translateY(clamp(-130px, -12vh, -50px)) translateX(-10px) rotate(-4deg);
  }
}

.light-ray {
  position: relative;
  z-index: 5;
  display: block;
  width: min(36vw, 168px);
  height: auto;
  margin: 0 auto;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(255, 212, 93, .8));
  transform: translateY(0);
}

.light-ray.is-fire {
  animation: none;
  opacity: 1;
}

.mini-btn.secondary {
  background: var(--yellow);
}

.ray-btn {
  position: relative;
  z-index: 6;
  display: block;
  width: min(42vw, 180px);
  height: auto;
  margin: 10px auto 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  filter: drop-shadow(4px 5px 0 rgba(46, 38, 31, .12));
  -webkit-tap-highlight-color: transparent;
  transform: translateY(clamp(-75px, -7vh, -30px));
}

.ray-btn img {
  display: block;
  width: 100%;
  height: auto;
}

.ray-btn:active {
  /* no movement on click */
}

.spell-mini {
  width: 100%;
  background: var(--ink);
  color: white;
}

.pushup-img {
  display: block;
  width: min(68vw, 280px);
  height: auto;
  margin: 0 auto;
  cursor: pointer;
  filter: drop-shadow(7px 8px 0 rgba(46, 38, 31, .14));
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
  transform: translateY(clamp(-20px, -2vh, -8px));
}

.pushup-img:active {
  transform: translateY(clamp(-20px, -2vh, -8px)) scaleX(1.04) scaleY(.94);
}

.pushup-img.is-down {
  transform: translateY(clamp(-20px, -2vh, -8px)) scaleX(1.04) scaleY(.94);
}

.toast-mascot {
  position: relative;
  display: grid;
  place-items: center;
  border: 4px solid var(--ink);
  border-radius: 42% 42% 48% 48%;
  background:
    radial-gradient(circle at 70% 28%, rgba(148, 96, 42, .45) 0 5px, transparent 6px),
    radial-gradient(circle at 36% 22%, rgba(148, 96, 42, .32) 0 4px, transparent 5px),
    var(--toast, #e2b06f);
  box-shadow: 8px 10px 0 rgba(46, 38, 31, .13);
}

.toast-large {
  width: min(38vw, 150px);
  height: auto;
  aspect-ratio: 150 / 124;
  margin: 0 auto 22px;
  animation: float 3.2s ease-in-out infinite;
}

.toast-catch {
  position: absolute;
  left: 50%;
  top: 49%;
  width: min(36vw, 148px);
  height: min(30vw, 120px);
  min-width: min(28vw, 120px);
  min-height: min(24vw, 98px);
  transform: translate(-50%, -50%);
  animation: float-target 3s ease-in-out infinite;
}

.toast-catch.is-caught {
  opacity: .48;
  filter: grayscale(.18);
  animation: none;
}

.toast-catch.is-caught .toast-tag {
  background: var(--yellow);
}

.toast-face::before,
.toast-face::after {
  content: "";
  position: absolute;
  top: 42%;
  width: min(2.5vw, 10px);
  height: auto;
  aspect-ratio: 10 / 14;
  border-radius: 999px;
  background: var(--ink);
}

.toast-face::before {
  left: 36%;
}

.toast-face::after {
  right: 36%;
}

.toast-face {
  width: min(8vw, 32px);
  height: auto;
  aspect-ratio: 32 / 18;
  margin-top: 32px;
  border-bottom: 4px solid var(--ink);
  border-radius: 0 0 999px 999px;
}

.toast-tag {
  position: absolute;
  left: 50%;
  top: -32px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: white;
  font-size: 12px;
  font-weight: 950;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-12px) rotate(2deg);
  }
}

@keyframes float-target {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0) rotate(-2deg);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-12px) rotate(2deg);
  }
}

.hp-float {
  position: absolute;
  right: 38px;
  top: 42%;
  z-index: 5;
  width: 92px;
  aspect-ratio: 1;
  background: url("./assets/hp++.png") center / contain no-repeat;
  opacity: 0;
  transform: translateY(clamp(100px, 18vh, 160px)) scale(.8);
  filter: drop-shadow(0 8px 10px rgba(92, 52, 16, .2));
  pointer-events: none;
}

.hp-float.is-visible {
  animation: hp-pop .8s ease;
}

@keyframes hp-pop {
  0% {
    opacity: 0;
    transform: translateY(clamp(100px, 18vh, 160px)) scale(.8);
  }
  18%, 70% {
    opacity: 1;
    transform: translateY(clamp(80px, 15vh, 135px)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(clamp(60px, 12vh, 110px)) scale(.92);
  }
}

.screen-report {
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(255, 248, 234, .86) 0%, rgba(255, 248, 234, .26) 34%, rgba(255, 248, 234, .08) 58%, rgba(67, 42, 22, .12) 100%),
    radial-gradient(circle at 50% 15%, rgba(255, 248, 234, .92), transparent 15rem),
    url("./assets/end_bg2.png") center / cover no-repeat;
}

.cloud-end-img {
  position: absolute;
  top: calc(5px + env(safe-area-inset-top));
  left: 12px;
  display: block;
  width: min(48vw, 192px);
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(92, 52, 16, .18));
}

.report-title-img {
  display: block;
  width: min(80vw, 477px);
  height: auto;
  margin: 30px auto 10px;
  filter: drop-shadow(0 6px 10px rgba(92, 52, 16, .18));
  transform: translateY(clamp(-160px, -15vh, -60px));
  animation: report-title-float 2.8s ease-in-out infinite;
}

@keyframes report-title-float {
  0%, 100% { transform: translateY(clamp(-160px, -15vh, -60px)) scale(1); }
  50% { transform: translateY(calc(clamp(-160px, -15vh, -60px) - 8px)) scale(1.04); }
}

.replay-btn {
  display: block;
  width: min(40vw, 160px);
  height: auto;
  margin: 10px auto 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  filter: drop-shadow(6px 8px 10px rgba(46, 38, 31, .25));
  -webkit-tap-highlight-color: transparent;
  animation: replay-float 2.4s ease-in-out infinite;
  transform: translateY(clamp(60px, 18vh, 180px));
}

.replay-btn img {
  display: block;
  width: 100%;
  height: auto;
}

.replay-btn:active {
  transform: translateY(clamp(60px, 18vh, 180px)) scale(.96);
}

@keyframes replay-float {
  0%, 100% { transform: translateY(clamp(60px, 18vh, 180px)) scale(1); }
  50% { transform: translateY(clamp(60px, 18vh, 180px)) scale(1.05); }
}

.boss-stage {
  position: relative;
  width: 100%;
  min-height: min(72dvh, 680px);
  overflow: visible;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.boss-cloud-img {
  display: block;
  width: min(75vw, 302px);
  height: auto;
  margin: clamp(-65px, -6vh, -20px) auto 10px;
  animation: cloud-drift 4s ease-in-out infinite;
  filter: drop-shadow(4px 5px 0 rgba(46, 38, 31, .14));
}

.boss-title-img {
  display: block;
  width: min(80vw, 480px);
  height: auto;
  margin: 10px auto;
  filter: drop-shadow(0 10px 18px rgba(46, 38, 31, .45));
  transform: translateY(clamp(-255px, -27vh, -115px));
}

@keyframes cloud-drift {
  0%, 100% { transform: translate(15%, -12%) translateX(0); }
  50% { transform: translate(15%, -12%) translateX(-14px); }
}

.energy-btn {
  display: block;
  width: min(33vw, 130px);
  height: auto;
  margin: 10px auto 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  filter: drop-shadow(6px 8px 10px rgba(46, 38, 31, .25));
  -webkit-tap-highlight-color: transparent;
  transform: translateY(clamp(-220px, -23vh, -90px));
  animation: energy-float 2.4s ease-in-out infinite;
}

.energy-btn img {
  display: block;
  width: 100%;
  height: auto;
}

.energy-btn:active {
  transform: translateY(calc(clamp(-220px, -23vh, -90px) + 4px)) scale(.98);
  filter: drop-shadow(4px 5px 0 rgba(46, 38, 31, .16));
}

@keyframes energy-float {
  0%, 100% { transform: translateY(clamp(-220px, -23vh, -90px)) scale(1); }
  50% { transform: translateY(calc(clamp(-220px, -23vh, -90px) - 8px)) scale(1.05); }
}

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

.chant {
  position: absolute;
  z-index: 2;
  width: min(38vw, 164px);
  height: auto;
  filter: drop-shadow(3px 4px 0 rgba(46, 38, 31, .1));
  animation: chant-jump .82s ease forwards;
}

@keyframes chant-jump {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(.82) rotate(-4deg);
  }
  20%, 72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(clamp(-180px, -16vh, -60px)) scale(1.08) rotate(4deg);
  }
}











@media (min-width: 700px) {
  body {
    background:
      radial-gradient(circle at 18% 12%, rgba(255, 212, 93, .36), transparent 22rem),
      radial-gradient(circle at 84% 18%, rgba(130, 196, 220, .28), transparent 24rem),
      #211a17;
  }

  .app {
    height: min(100dvh, 920px);
    min-height: 620px;
    margin-top: max(0px, calc((100dvh - 920px) / 2));
    border-left: 1px solid rgba(255, 255, 255, .16);
    border-right: 1px solid rgba(255, 255, 255, .16);
  }
}

@media (max-height: 680px) {
  .app {
    min-height: 560px;
  }

  .toast-large {
    width: min(38vw, 120px);
    margin-bottom: 14px;
  }

  h1 {
    font-size: clamp(34px, 11vw, 54px);
  }

  h2 {
    font-size: clamp(30px, 9vw, 44px);
  }

  .stage {
    min-height: 250px;
  }
}

/* ── 矮屏适配 (iPhone SE / ≤600px 高度) ── */
@media (max-height: 600px) {
  .app {
    min-height: 460px;
  }

  .boss-stage {
    min-height: 60dvh;
  }

  .stage {
    padding-top: clamp(80px, 16dvh, 130px);
    padding-bottom: clamp(120px, 22dvh, 150px);
  }

  .trial-panel,
  .quiz-success,
  .battle-success,
  .fitness-success {
    bottom: clamp(100px, 16dvh, 130px);
  }

  .loading-title-logo {
    width: min(100vw, 400px);
  }

  .loading-remind {
    margin: clamp(-60px, -7vh, -20px) auto 0;
  }

  h1 {
    font-size: clamp(30px, 10vw, 48px);
  }

  h2 {
    font-size: clamp(26px, 8vw, 38px);
  }
}

/* ── 极矮屏 (≤520px 高度) ── */
@media (max-height: 520px) {
  .app {
    min-height: 400px;
  }

  .boss-stage {
    min-height: 50dvh;
  }

  .stage {
    padding-top: clamp(60px, 12dvh, 100px);
    padding-bottom: clamp(90px, 18dvh, 120px);
  }

  .trial-panel,
  .quiz-success,
  .battle-success,
  .fitness-success {
    bottom: clamp(80px, 12dvh, 100px);
  }

  .trial-panel {
    min-height: 130px;
  }

  .quiz-success,
  .battle-success,
  .fitness-success {
    min-height: 130px;
  }

  .story-card {
    min-height: min(35dvh, 280px);
    padding: 30px 40px 50px;
  }

  .loading-scene {
    min-height: auto;
  }

  .boss-cloud-img {
    margin: clamp(-30px, -4vh, -10px) auto 8px;
  }

  h1 {
    font-size: clamp(26px, 9vw, 42px);
  }

  h2 {
    font-size: clamp(22px, 7vw, 34px);
  }
}

/* ── 窄屏 (≤360px 宽度) ── */
@media (max-width: 360px) {
  .app {
    border-left: none;
    border-right: none;
  }

  .stage {
    padding-left: 4px;
    padding-right: 4px;
  }

  .trial-panel {
    padding: 10px;
  }
}