/* 伙伴消消岛 · 竖屏 H5 壳（移动优先，适配 TapTap 创意工坊） */

@font-face {
  font-family: 'ChillRoundF';
  src: url('../../assets/fonts/ChillRoundFRegular-subset.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ChillRoundF';
  src: url('../../assets/fonts/ChillRoundFBold-subset.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 数字用资源包 Fredoka One（OFL，可商用），圆润卡通数字 */
@font-face {
  font-family: 'Fredoka';
  src: url('../../assets/fonts/FredokaOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.num {
  font-family: 'Fredoka', var(--font);
}

:root {
  /* 桌面预览时由 JS 注入模拟刘海/小白条，真机上恒为 0，一切以 env() 为准 */
  --sim-top: 0px;
  --sim-bottom: 0px;

  --ink: #3b2a55;
  --ink-soft: #5c4a78;
  --cream: #fff8ef;
  --pink: #ff7eb6;
  --sky: #7ec8ff;
  --mint: #6fdf9c;
  --sun: #ffd56a;
  --coral: #ff8f70;
  --shadow: 0 10px 24px rgba(59, 42, 85, 0.18);
  --font: 'ChillRoundF', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
}

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

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--font);
  color: var(--ink);
  background: #1a1430;
  user-select: none;
  touch-action: manipulation;
}

img,
button {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* dvh 让地址栏收起/展开时高度跟着变，svh 作为无 dvh 时的保守值 */
#app {
  width: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  display: grid;
  place-items: center;
}

/* 不支持 dvh 的旧 WebView 由 JS 量出真实可视高度 */
html.no-dvh #app {
  height: var(--app-h, 100vh);
}

/* 真机：铺满整个视口，不留黑边。container-type 让内部尺寸按舞台自身高宽换算 */
.phone-stage {
  /* 安全区在这里定义，子元素继承；预览时 --sim-* 才会顶上来 */
  --safe-top: max(env(safe-area-inset-top, 0px), var(--sim-top));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--sim-bottom));
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #89d4ff;
  container-type: size;
  container-name: stage;
}

.screen-flash {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  background: #fff;
  opacity: 0;
}

.screen-flash.is-on {
  animation: hit-flash 0.22s ease-out;
}

@keyframes hit-flash {
  0% { opacity: 0.55; }
  100% { opacity: 0; }
}

.phone-stage.is-shake-sm { animation: screen-shake-sm 0.18s ease-out; }
.phone-stage.is-shake-md { animation: screen-shake-md 0.24s ease-out; }
.phone-stage.is-shake-lg { animation: screen-shake-lg 0.3s ease-out; }

@keyframes screen-shake-sm {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, 0); }
}

@keyframes screen-shake-md {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 0); }
}

@keyframes screen-shake-lg {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 1px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, -1px); }
  80% { transform: translate(1px, 1px); }
}

.board-frame.is-punch {
  animation: board-punch 0.18s cubic-bezier(0.2, 1.2, 0.32, 1);
}

@keyframes board-punch {
  0% { transform: scale(1); }
  40% { transform: scale(1.018); }
  100% { transform: scale(1); }
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  flex-direction: column;
  gap: clamp(6px, 1.2vh, 14px);
  gap: clamp(6px, 1.2cqh, 14px);
  padding-top: calc(var(--safe-top) + clamp(8px, 1.8cqh, 18px));
  padding-bottom: calc(var(--safe-bottom) + clamp(8px, 1.6cqh, 18px));
  padding-left: calc(var(--safe-left) + clamp(10px, 4.6cqw, 22px));
  padding-right: calc(var(--safe-right) + clamp(10px, 4.6cqw, 22px));
  background-size: cover;
  background-position: center top;
}

.screen.is-active {
  display: flex;
  animation: fade-in 280ms ease;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.screen-home {
  background-image: url('../../assets/ui/bg/home-bg.png');
}

.screen-healthy {
  background-image: url('../../assets/ui/bg/home-bg.png');
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.healthy-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.healthy-deco .deco-cloud {
  position: absolute;
  width: clamp(72px, 22cqw, 118px);
  opacity: 0.72;
  animation: cloud-drift 18s ease-in-out infinite;
}

.healthy-deco .hc1 { top: 8%; left: -4%; animation-delay: 0s; }
.healthy-deco .hc2 { top: 14%; right: -6%; width: clamp(64px, 19cqw, 96px); animation-delay: -6s; }
.healthy-deco .hc3 { top: 22%; left: 18%; width: clamp(56px, 16cqw, 84px); opacity: 0.55; animation-delay: -11s; }

.healthy-deco .deco-balloon {
  position: absolute;
  width: clamp(52px, 15cqw, 78px);
  animation: balloon-bob 4.2s ease-in-out infinite;
}

.healthy-deco .hb1 { bottom: 28%; left: 8%; animation-delay: -1s; }
.healthy-deco .hb2 { bottom: 34%; right: 10%; animation-delay: -2.4s; }

.healthy-panel {
  position: relative;
  z-index: 2;
  width: min(92%, 360px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(12px, 2.4cqh, 18px);
  margin-top: -4cqh;
}

.healthy-card {
  background: rgba(255, 255, 255, 0.94);
  border-radius: clamp(22px, 6cqw, 30px);
  padding: clamp(22px, 5.5cqw, 32px) clamp(18px, 4.8cqw, 26px);
  box-shadow:
    0 10px 28px rgba(34, 94, 130, 0.18),
    inset 0 0 0 3px rgba(255, 255, 255, 0.85);
  border: 3px solid rgba(255, 255, 255, 0.95);
}

.healthy-title {
  margin: 0 0 clamp(14px, 3cqh, 20px);
  font-family: 'Fredoka', var(--font);
  font-size: clamp(22px, 6.8cqw, 30px);
  font-weight: 700;
  text-align: center;
  color: #2a6a8a;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.65);
}

.healthy-line {
  margin: 0 0 clamp(10px, 2.2cqh, 14px);
  font-family: 'Fredoka', var(--font);
  font-size: clamp(15px, 4.4cqw, 19px);
  line-height: 1.55;
  text-align: center;
  color: #3d4f5c;
}

.healthy-line:last-child {
  margin-bottom: 0;
}

.healthy-maker {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(36, 84, 112, 0.82);
}

.triangle-mark {
  position: relative;
  display: block;
  width: 92px;
  height: 82px;
  filter: drop-shadow(0 4px 4px rgba(126, 46, 64, 0.2));
  animation: triangle-logo-arrive 720ms cubic-bezier(.2, .9, .25, 1.18) both;
}

.triangle-character {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.triangle-glow,
.triangle-outline,
.triangle-trace {
  fill: #102c2c;
  stroke-linejoin: miter;
  stroke-miterlimit: 10;
}

.triangle-glow {
  fill: none;
  stroke: rgba(255, 57, 74, 0.2);
  stroke-width: 18;
}

.triangle-outline {
  stroke: #ff3543;
  stroke-width: 9;
}

.triangle-trace {
  fill: none;
  stroke: rgba(255, 151, 158, 0.82);
  stroke-width: 2.4;
  stroke-dasharray: 42 270;
  stroke-dashoffset: 42;
  animation: triangle-trace-run 950ms 100ms ease-out both;
}

.triangle-eyes {
  transform-origin: 60px 64px;
  opacity: 0;
  animation: triangle-eyes-appear 260ms 650ms ease-out forwards,
    triangle-eyes-blink 2.1s 1.05s ease-in-out infinite;
}

.triangle-eye-ring {
  fill: #080b10;
  stroke: #d7d9de;
  stroke-width: 3;
}

.triangle-pupil { fill: #080b10; }

.healthy-maker-text {
  font-family: 'Fredoka', var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

.healthy-skip {
  margin: -2px 0 0;
  text-align: center;
  color: rgba(43, 79, 99, 0.66);
  font-size: 12px;
  animation: healthy-skip-pulse 1s ease-in-out infinite;
}

@keyframes triangle-logo-arrive {
  from { opacity: 0; transform: translateY(8px) scale(0.72) rotate(-7deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes triangle-trace-run {
  from { opacity: 0; stroke-dashoffset: 42; }
  30% { opacity: 1; }
  to { opacity: 0; stroke-dashoffset: -270; }
}

@keyframes triangle-eyes-appear {
  from { opacity: 0; transform: scale(0.45); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes triangle-eyes-blink {
  0%, 38%, 46%, 100% { transform: scaleY(1); }
  42% { transform: scaleY(0.1); }
}

@keyframes healthy-skip-pulse {
  0%, 100% { opacity: 0.48; }
  50% { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .triangle-mark,
  .triangle-trace,
  .triangle-eyes,
  .healthy-skip {
    animation: none;
  }

  .triangle-trace { display: none; }
  .triangle-eyes { opacity: 1; }
}

html.store-capture .screen-healthy {
  /* 商店截图模式跳过忠告，由脚本控制 */
}

/* 官方 Game 场景配色：上半深蓝星空，下半天空到草地 */
.screen-game {
  background-image: url('../../assets/ui/deco/points.png'),
    linear-gradient(
      180deg,
      #2c3d7c 0%,
      #35478d 26%,
      #6f9fdd 42%,
      #a8dcf7 54%,
      #d9f3ff 70%,
      #e6f8ea 88%,
      #d3f0c9 100%
    );
  background-size: 150% 44%, 100% 100%;
  background-position: top center, center;
  background-repeat: no-repeat;
}

/* 底部草地装饰 */
.screen-game::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24%;
  background: url('../../assets/ui/bg/landscape.png') bottom center / 100% auto no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* 草地上方的云带 + 右下树（官方同款站位） */
.game-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.deco-cloudband {
  position: absolute;
  left: -6cqw;
  width: 112cqw;
  bottom: 17%;
  opacity: 0.9;
}

/* 官方 Cloud Bunny：深蓝星空区左侧的云朵兔子剪影 */
.deco-cloudbunny {
  position: absolute;
  left: -4cqw;
  top: 11%;
  width: 30cqw;
  opacity: 0.4;
}

.gt-back {
  width: 22cqw;
  right: 20cqw;
  bottom: 13cqh;
}

.gt-front {
  width: 28cqw;
  right: -4cqw;
  bottom: 11cqh;
}

.screen-game .hint {
  position: relative;
  z-index: 3;
  align-self: center;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink-soft);
  text-shadow: none;
}

.screen-settings {
  background-image: linear-gradient(180deg, rgba(126, 200, 255, 0.55), rgba(255, 248, 239, 0.92)),
    url('../../assets/ui/bg/home-bg.png');
  overflow-y: auto;
  overscroll-behavior: contain;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 2;
}

.top-bar-end {
  justify-content: flex-end;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: clamp(30px, 4.2cqh, 38px);
  padding: 4px clamp(9px, 3cqw, 14px);
  border-radius: 999px;
  background: rgba(255, 248, 239, 0.92);
  box-shadow: var(--shadow);
  font-weight: 700;
  font-size: clamp(12px, 1.7cqh, 16px);
  white-space: nowrap;
}

.pill img {
  width: clamp(15px, 2.4cqh, 21px);
  height: clamp(15px, 2.4cqh, 21px);
  object-fit: contain;
}

#home-coins,
#home-stars {
  font-family: 'Fredoka', var(--font);
}

/*
  资源计数条（官方 Items (Pre-Built)/Credits/Coins）：
  卡通描边药丸打底、数字在药丸里靠右，图标压在药丸左端探出来一半。
  用相对定位让图标浮出来，比原来那种「图标+文字挤在药丸里」更贴官方。
*/
.credit {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: clamp(16px, 5cqw, 24px);
}

.credit-pill {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: clamp(48px, 15cqw, 68px);
  min-height: clamp(28px, 4cqh, 36px);
  padding: 3px clamp(10px, 3cqw, 15px) 3px clamp(18px, 6cqw, 28px);
  border-radius: 999px;
  background: rgba(255, 248, 239, 0.95);
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(255, 255, 255, 0.9),
    inset 0 -4px 8px rgba(126, 200, 255, 0.18);
}

.credit-pill b {
  font-family: 'Fredoka', var(--font);
  font-weight: 700;
  font-size: clamp(13px, 1.9cqh, 18px);
  color: var(--ink);
  line-height: 1;
}

.credit-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(26px, 8cqw, 38px);
  height: clamp(26px, 8cqw, 38px);
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(59, 42, 85, 0.3));
  pointer-events: none;
}

/* ==========================================================================
   首页（对照官方 Home - Portrait：Logo → 放射光大播放键 → 圆形按钮 → 草地场景）
   ========================================================================== */

/* 底部草地 */
.screen-home::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 27%;
  background: url('../../assets/ui/bg/landscape.png') bottom center / cover no-repeat;
  pointer-events: none;
  z-index: 0;
}

.home-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.deco-cloud {
  position: absolute;
  animation: drift 9s ease-in-out infinite;
}

.dc1 {
  width: 32cqw;
  left: -7cqw;
  top: 7cqh;
}

.dc2 {
  width: 17cqw;
  right: 3cqw;
  top: 13cqh;
  animation-delay: 2s;
}

.dc3 {
  width: 12cqw;
  left: 22cqw;
  top: 21cqh;
  animation-delay: 4.5s;
}

@keyframes drift {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(3cqw);
  }
}

.deco-balloon {
  position: absolute;
  animation: bob 3.4s ease-in-out infinite;
  filter: drop-shadow(0 8px 10px rgba(59, 42, 85, 0.18));
}

.db1 {
  width: 14cqw;
  left: 3cqw;
  top: 37cqh;
}

.db2 {
  width: 12cqw;
  right: 5cqw;
  top: 33cqh;
  animation-delay: 0.8s;
}

.db3 {
  width: 9cqw;
  right: 15cqw;
  top: 47cqh;
  animation-delay: 1.6s;
}

/* 草地场景：右边树、左边猫 + 熊猫（官方同款站位） */
.deco-tree {
  position: absolute;
  filter: drop-shadow(0 10px 14px rgba(59, 42, 85, 0.2));
}

.dt-back {
  width: 30cqw;
  right: 17cqw;
  bottom: 5cqh;
}

.dt-front {
  width: 40cqw;
  right: -8cqw;
  bottom: 1cqh;
}

.deco-mascot {
  position: absolute;
  filter: drop-shadow(0 10px 16px rgba(59, 42, 85, 0.25));
  animation: bob 3s ease-in-out infinite;
}

/* 站位换算自官方 1280×1920 画布：猫在熊猫左上方、被熊猫挡住下半身，
   手臂从熊猫右侧伸出，所以猫不能压到 32cqw 以右 */
.dm-cat {
  width: 27cqw;
  left: -9cqw;
  bottom: 15cqw;
  animation-delay: 0.5s;
}

/* 熊猫容器按身体原图比例 554×726 撑开，手臂再按官方坐标摆进去 */
.dm-panda {
  width: 43cqw;
  aspect-ratio: 554 / 726;
  left: -8cqw;
  bottom: -20cqw;
}

.panda-body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 官方 Arm：相对身体中心 pos(296,-24)、size(109,280)，且排在身体之前（从身后伸出） */
.panda-arm {
  position: absolute;
  width: 19.7%;
  height: 38.6%;
  left: 93.5%;
  top: 34%;
  transform-origin: 50% 90%;
  animation: panda-wave 2.6s ease-in-out infinite;
}

@keyframes panda-wave {
  0%,
  100% {
    transform: rotate(-7deg) rotateY(-49deg);
  }
  50% {
    transform: rotate(9deg) rotateY(-30deg);
  }
}

/* 小鸡：官方 Chicken 的身体 / 呆毛 / 双翅，翅膀按 idle 动画的 ±15° 拍动 */
.dm-chicken {
  position: absolute;
  width: 11cqw;
  aspect-ratio: 154 / 135;
  left: 8cqw;
  bottom: 56cqw;
  filter: drop-shadow(0 6px 8px rgba(59, 42, 85, 0.22));
  animation: bob 2.6s ease-in-out infinite;
  animation-delay: 1.1s;
}

.chick-body {
  position: absolute;
  left: 9%;
  bottom: 0;
  width: 82%;
}

.chick-hair {
  position: absolute;
  left: 40%;
  bottom: 88%;
  width: 22%;
}

.chick-wing {
  position: absolute;
  width: 25%;
  bottom: 30%;
}

.chick-wing.wl {
  left: -1%;
  transform-origin: 100% 50%;
  animation: flap-l 0.9s ease-in-out infinite;
}

.chick-wing.wr {
  right: -1%;
  transform-origin: 0% 50%;
  animation: flap-r 0.9s ease-in-out infinite;
}

@keyframes flap-l {
  0%,
  100% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(-10deg);
  }
}

@keyframes flap-r {
  0%,
  100% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(10deg);
  }
}

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

/* Logo：星星 + 双侧水花点缀 */
.logo-block {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: clamp(4px, 2.4cqh, 26px);
}

.logo-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
}

.logo-line h1 {
  margin: 0;
  font-size: clamp(32px, 11cqw, 54px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 4px 0 rgba(255, 126, 182, 0.55), 0 10px 24px rgba(59, 42, 85, 0.25);
}

.logo-splash {
  width: clamp(16px, 4.4cqw, 28px);
}

.logo-splash.flip {
  transform: scaleX(-1);
}

.logo-star {
  position: absolute;
  width: clamp(8px, 2.6cqw, 15px);
  animation: twinkle 2.4s ease-in-out infinite;
}

.lst1 {
  left: 13%;
  top: -10%;
}

.lst2 {
  right: 15%;
  top: 4%;
  animation-delay: 0.6s;
}

.lst3 {
  left: 24%;
  bottom: 30%;
  animation-delay: 1.2s;
}

.lst4 {
  right: 25%;
  bottom: 38%;
  animation-delay: 0.3s;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.25;
    transform: scale(0.6);
  }
}

.logo-sub {
  display: inline-block;
  margin: clamp(4px, 1cqh, 10px) 0 0;
  padding: 3px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  font-size: clamp(13px, 2cqh, 18px);
  color: #fff;
  text-shadow: 0 2px 6px rgba(59, 42, 85, 0.35);
}

/* 中央大播放键 + 放射光 */
.play-zone {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}

.radial-shine {
  position: absolute;
  width: min(90cqw, 56cqh);
  aspect-ratio: 1;
  opacity: 0.75;
  animation: spin-slow 26s linear infinite;
  pointer-events: none;
}

@keyframes spin-slow {
  to {
    transform: rotate(360deg);
  }
}

.play-btn {
  position: relative;
  width: min(44cqw, 28cqh);
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: url('../../assets/ui/buttons/btn-play-big.png') center / contain no-repeat;
  filter: drop-shadow(0 12px 20px rgba(59, 42, 85, 0.3));
  transition: transform 0.15s ease;
  animation: play-pulse 2.2s ease-in-out infinite;
}

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

@keyframes play-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

/* 圆形功能键排（设置 / 音乐 / 商店） */
.circle-row {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: clamp(10px, 3.8cqw, 22px);
}

.home-feature {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
}

.home-feature > b {
  color: #fff;
  font-family: var(--font);
  font-size: clamp(13px, 3.8cqw, 17px);
  line-height: 1;
  letter-spacing: 1px;
  text-shadow: 0 2px 0 #7361b5, 0 3px 5px rgba(59, 42, 85, 0.35);
}

/* —— 每日幸运转盘（Unity Spin Wheel 原始盘面 + H5 物理减速） —— */
.spin-popup {
  width: min(100%, 360px);
}

.spin-tip,
.spin-result {
  min-height: 1.4em;
  margin: 0;
  color: var(--ink-soft);
  font-weight: 700;
}

.spin-result {
  color: #e05d8d;
  font-size: clamp(15px, 4.2cqw, 19px);
}

.spin-reward-card[hidden] { display: none; }

.spin-reward-card {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 50%;
  width: min(68cqw, 240px);
  min-height: 190px;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  overflow: hidden;
  border: 4px solid #fff7d4;
  border-radius: 28px;
  background: linear-gradient(165deg, #fffceb 0%, #ffeaa0 42%, #ffad6b 100%);
  box-shadow: 0 8px 0 #c96f45, 0 18px 42px rgba(37,20,74,.42), inset 0 3px 0 rgba(255,255,255,.9);
}

.spin-reward-card.is-showing { animation: spin-reward-pop .72s cubic-bezier(.17,1.48,.36,1) both; }
.spin-reward-card img { z-index: 1; width: 82px; height: 82px; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(106,53,39,.25)); animation: reward-float 1.2s .7s ease-in-out infinite alternate; }
.spin-reward-card small { z-index: 1; color: #b96d45; font-weight: 700; }
.spin-reward-card b { z-index: 1; color: #d94c83; font-size: clamp(20px, 6cqw, 27px); text-shadow: 0 2px 0 #fff; }
.spin-reward-rays { position: absolute; inset: -35%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.66) 0 10deg, transparent 10deg 24deg); animation: reward-rays-spin 8s linear infinite; }

.spin-reward-close {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 9px;
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #f26399;
  box-shadow: 0 3px 0 #bd3e72;
  color: #fff;
  font: 900 21px/1 var(--font);
  cursor: pointer;
}

.spin-reward-accept {
  position: relative;
  z-index: 2;
  margin-top: 6px;
  min-width: 128px;
  padding: 8px 18px;
  border: 2px solid #fff7d4;
  border-radius: 999px;
  background: linear-gradient(180deg, #60df91, #36bd70);
  box-shadow: 0 4px 0 #279451, inset 0 2px 0 rgba(255,255,255,.45);
  color: #fff;
  font: 700 15px var(--font);
  cursor: pointer;
}

.spin-reward-close:active,
.spin-reward-accept:active { transform: scale(.92); }

.spin-fly-coin {
  position: fixed;
  z-index: 2000;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(75,42,28,.28));
  animation: spin-coin-flight .78s var(--coin-delay) cubic-bezier(.22,.62,.24,1) both;
}

/* 商店与星愿奖励：从领取位置沿弧线汇入金币/商店 HUD。 */
.hud-fly-reward {
  position: fixed;
  z-index: 10020;
  width: clamp(22px, 7cqw, 30px);
  height: clamp(22px, 7cqw, 30px);
  object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 3px rgba(53, 37, 84, .28));
  animation: hud-reward-fly 720ms cubic-bezier(.2,.72,.25,1) var(--reward-delay, 0ms) both;
}

.hud-fly-reward.is-prop { width: clamp(25px, 8cqw, 34px); height: clamp(25px, 8cqw, 34px); }

@keyframes hud-reward-fly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.55) rotate(-12deg); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(4deg); }
  58% { opacity: 1; transform: translate(calc(-50% + var(--reward-mid-x)), calc(-50% + var(--reward-mid-y))) scale(.94) rotate(190deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--reward-dx)), calc(-50% + var(--reward-dy))) scale(.42) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hud-fly-reward { display: none; }
}

@keyframes spin-coin-flight {
  0% { opacity: 0; transform: translate(0,0) scale(.35) rotate(0); }
  16% { opacity: 1; transform: translate(calc(var(--coin-dx) * .08), var(--coin-lift)) scale(1.12) rotate(70deg); }
  100% { opacity: 0; transform: translate(var(--coin-dx), var(--coin-dy)) scale(.45) rotate(420deg); }
}

.coin-arrive { animation: coin-counter-bump .42s cubic-bezier(.2,1.5,.4,1); }
@keyframes coin-counter-bump { 50% { transform: scale(1.34); color: #ffbf2f; } }

@keyframes spin-reward-pop {
  0% { opacity: 0; transform: translate(-50%, -42%) scale(.3) rotate(-7deg); }
  58% { opacity: 1; transform: translate(-50%, -52%) scale(1.1) rotate(2deg); }
  78% { transform: translate(-50%, -49%) scale(.96) rotate(-1deg); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes reward-float { to { transform: translateY(-5px) rotate(3deg) scale(1.05); } }
@keyframes reward-rays-spin { to { transform: rotate(1turn); } }

.wheel-stage {
  position: relative;
  width: min(74cqw, 280px);
  aspect-ratio: 1;
  align-self: center;
  filter: drop-shadow(0 9px 10px rgba(59, 42, 85, 0.28));
}

.wheel-stage::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,234,116,.5), rgba(255,129,188,.08) 62%, transparent 70%);
  animation: wheel-aura 1.8s ease-in-out infinite alternate;
}

@keyframes wheel-aura { to { transform: scale(1.07); opacity: .72; } }

.wheel-rotor,
.wheel-art,
.wheel-prizes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wheel-art {
  object-fit: contain;
}

.wheel-prize {
  --angle: calc(var(--i) * 45deg);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18%;
  height: 18%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-172%) rotate(calc(var(--angle) * -1));
}

.wheel-prize img {
  width: 76%;
  height: 76%;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(59, 42, 85, 0.35));
}

.wheel-prize b {
  position: absolute;
  right: -10%;
  bottom: -4%;
  padding: 1px 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #ef659f;
  color: #fff;
  font-family: 'Fredoka', var(--font);
  font-size: clamp(9px, 2.7cqw, 12px);
}

.wheel-arrow {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 27%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.wheel-center {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: 700;
  font-size: clamp(16px, 5cqw, 22px);
  text-shadow: 0 2px 0 #c65b43;
  pointer-events: none;
}

#btn-spin-now:disabled {
  cursor: default;
}

/* 已领取不是“按钮坏了”：换成弹窗同系的暖橙状态，并直接说明当前状态。 */
#btn-spin-now.is-claimed .btn-image {
  border-image-source: url('../../assets/ui/buttons/pill-orange.png');
  color: #fffaf0;
  opacity: 0.92;
  filter: saturate(0.82);
}

/* 转动过程中保留绿色，只轻微收暗，表示正在执行而不是不可用。 */
#btn-spin-now:disabled:not(.is-claimed) .btn-image {
  filter: brightness(0.9);
}

.daily-dot {
  position: absolute;
  right: -2px;
  top: -3px;
  z-index: 3;
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ff5576;
  box-shadow: 0 2px 4px rgba(59, 42, 85, 0.35);
}

.home-feature.is-ready .circle-btn {
  filter: drop-shadow(0 0 9px rgba(255, 228, 84, 0.95)) drop-shadow(0 6px 10px rgba(59, 42, 85, 0.28));
}

.circle-btn {
  width: clamp(46px, 13cqw, 68px);
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 6px 10px rgba(59, 42, 85, 0.28));
  transition: transform 0.12s ease;
}

button.is-jelly,
[role='button'].is-jelly {
  animation: jelly-press 0.733s linear both !important;
}

/* 关闭钮本身靠 translate 挂在面板边角；通用果冻动画若覆盖 transform，
   点击瞬间就会先跳回面板内部。这里保留定位位移，只在原地压弹。 */
.popup-x.is-jelly {
  animation-name: popup-x-jelly !important;
}

@keyframes popup-x-jelly {
  0%, 100% { transform: translate(32%, -32%) scale(1); }
  25% { transform: translate(32%, -32%) scaleX(1.1939) scaleY(0.7978); }
  41% { transform: translate(32%, -32%) scaleX(0.975) scaleY(1.1147); }
  59% { transform: translate(32%, -32%) scaleX(1.025) scaleY(0.95); }
  77% { transform: translate(32%, -32%) scale(1); }
}

/* Unity Button - Base.controller / Pressed：原始 60fps 关键帧按时间和值逐项换算。 */
@keyframes jelly-press {
  0% { transform: scale(1); }
  25% { transform: scaleX(1.1939) scaleY(0.7978); }
  41% { transform: scaleX(0.975) scaleY(1.1147); }
  59% { transform: scaleX(1.025) scaleY(0.95); }
  77% { transform: scale(1); }
  100% { transform: scale(1); }
}

button.is-idle-pop {
  animation: unity-idle-pop 1.517s ease-in-out both !important;
}

/* Unity Idle - Scale 原曲线：1 → (1.092, .988) → (.983, 1.05) → 1。 */
@keyframes unity-idle-pop {
  0%, 100% { transform: scale(1); }
  33% { transform: scaleX(1.0921) scaleY(0.9883); }
  57% { transform: scaleX(0.9829) scaleY(1.05); }
}

/*
  按钮动效：按下压扁一点（所有按钮统一），
  首页那几个主按钮再加个常驻呼吸/摇摆，让界面不那么死。
  用 prefers-reduced-motion 尊重系统的“减少动态效果”。
*/
.btn:active .btn-image,
.icon-btn:active,
.switch:active {
  transform: scale(0.93);
}

.icon-btn,
.switch {
  transition: transform 0.12s ease, background-color 0.22s ease;
}

.circle-row .circle-btn {
  animation: btn-breathe 2.6s ease-in-out infinite;
}

.circle-row .circle-btn:nth-child(2) {
  animation-delay: 0.5s;
}

.home-audio-btns .circle-btn {
  animation: btn-swing 3.4s ease-in-out infinite;
}

.home-audio-btns .circle-btn:nth-child(2) {
  animation-delay: 0.7s;
}

@keyframes btn-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.04);
  }
}

@keyframes btn-swing {
  0%,
  100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .circle-row .circle-btn,
  .map-feature .circle-btn,
  .map-feature .map-icon-btn,
  .home-audio-btns .circle-btn,
  .play-btn,
  .home-chick,
  .chick-wing,
  button.is-jelly,
  button.is-idle-pop,
  .shop-balloons img,
  .popup-backdrop.is-open .popup,
  .popup-backdrop.is-open .shop-item,
  .win-overlay.is-open .win-stage,
  .win-overlay.is-open .win-star,
  .win-overlay.is-open .wm,
  .win-glow,
  .win-shine,
  .win-sparks img,
  .phone-stage.is-shake-sm,
  .phone-stage.is-shake-md,
  .phone-stage.is-shake-lg,
  .board-frame.is-punch,
  .screen-flash.is-on,
  .combo-toast.show {
    animation: none;
  }
}

.circle-btn img {
  width: 50%;
  height: 50%;
  object-fit: contain;
}

.circle-btn.is-off img {
  opacity: 0.4;
}

.cb-red {
  background-image: url('../../assets/ui/buttons/btn-red.png');
}

.cb-orange {
  background-image: url('../../assets/ui/buttons/btn-orange.png');
}

.cb-blue {
  background-image: url('../../assets/ui/buttons/btn-blue.png');
}

.cb-teal {
  background-image: url('../../assets/ui/buttons/circle-teal.png');
}

.cb-pink {
  background-image: url('../../assets/ui/buttons/circle-pink.png');
}

.cb-green {
  background-image: url('../../assets/ui/buttons/circle-green.png');
}

.cb-purple {
  background-image: url('../../assets/ui/buttons/btn-purple.png');
}

/* 关掉的开关：换成灰底 + 图标压暗，一眼能看出状态 */
.circle-btn.is-off {
  background-image: url('../../assets/ui/buttons/circle-gray.png');
}

.circle-btn.sm {
  width: clamp(38px, 10.5cqw, 54px);
}

/* 音效/音乐开关竖排挂右下角 */
.home-audio-btns {
  position: absolute;
  right: calc(var(--safe-right) + clamp(10px, 4cqw, 20px));
  bottom: calc(var(--safe-bottom) + clamp(12px, 3cqh, 28px));
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2cqh, 14px);
}

/* 首页左侧小鸡：翅膀扇动 + 身子轻微起伏 */
.home-chick {
  position: absolute;
  left: clamp(6px, 3cqw, 26px);
  bottom: clamp(96px, 27cqh, 250px);
  z-index: 3;
  width: clamp(46px, 14cqw, 72px);
  aspect-ratio: 1;
  pointer-events: none;
  animation: chick-hop 2.4s ease-in-out infinite;
}

.home-chick img {
  position: absolute;
  object-fit: contain;
}

.chick-body {
  left: 0;
  bottom: 0;
  width: 100%;
}

.chick-hair {
  left: 32%;
  bottom: 82%;
  width: 36%;
}

.chick-wing {
  bottom: 30%;
  width: 30%;
  transform-origin: top center;
}

.cw-left {
  left: -16%;
  animation: wing-flap 0.62s ease-in-out infinite alternate;
}

.cw-right {
  right: -16%;
  animation: wing-flap 0.62s ease-in-out infinite alternate-reverse;
}

@keyframes wing-flap {
  from {
    transform: rotate(-14deg);
  }
  to {
    transform: rotate(16deg);
  }
}

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

/* 地图左下角返回钮，压在云带上 */
.map-back {
  position: absolute;
  left: calc(var(--safe-left) + clamp(10px, 4cqw, 22px));
  bottom: calc(var(--safe-bottom) + clamp(10px, 2.4cqh, 24px));
  z-index: 5;
  width: clamp(42px, 12cqw, 58px);
}

/* 给草地场景留出的空间（吉祥物/树都在这块区域里） */
.home-ground-space {
  flex: 0 0 clamp(90px, 26cqh, 260px);
}

.btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(46px, 7cqh, 64px);
  transition: transform 120ms ease;
}

.btn:active {
  transform: scale(0.96);
}

/* 资源包的按钮图是 256×256 圆角方块，用 9 宫格拉伸成任意宽度的胶囊，
   直接 background contain 会被压成一个圆 */
.btn-image {
  --slice: clamp(15px, 2.4cqh, 24px);
  width: 100%;
  height: clamp(52px, 8cqh, 74px);
  display: grid;
  place-items: center;
  white-space: nowrap;
  border-style: solid;
  border-width: var(--slice);
  border-image-slice: 104 fill;
  border-image-width: var(--slice);
  border-image-repeat: stretch;
  font-size: clamp(17px, 2.6cqh, 23px);
  font-weight: 700;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.22);
}

.btn-primary .btn-image {
  border-image-source: url('../../assets/ui/buttons/pill-green.png');
  height: clamp(58px, 9cqh, 84px);
  font-size: clamp(19px, 3cqh, 26px);
}

.btn-secondary .btn-image {
  border-image-source: url('../../assets/ui/buttons/pill-blue.png');
}

.btn-ghost .btn-image {
  border-image-source: url('../../assets/ui/buttons/pill-gray.png');
}

.btn-warn .btn-image {
  border-image-source: url('../../assets/ui/buttons/pill-orange.png');
}

.btn-danger .btn-image {
  border-image-source: url('../../assets/ui/buttons/pill-red.png');
}

.icon-btn {
  width: clamp(38px, 5.4cqh, 50px);
  height: clamp(38px, 5.4cqh, 50px);
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 248, 239, 0.92) center / 56% no-repeat;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.icon-btn.settings {
  background-image: url('../../assets/ui/icons/settings.png');
}

.icon-btn.pause {
  background-image: url('../../assets/ui/icons/pause.png');
}

.icon-btn.home {
  background-image: url('../../assets/ui/icons/home.png');
}

.hint {
  margin: 0;
  flex: 0 0 auto;
  align-self: center;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(59, 42, 85, 0.32);
  text-align: center;
  font-size: clamp(11px, 1.6cqh, 14px);
  color: rgba(255, 248, 239, 0.95);
}


/* —— 游戏顶部白色横条（官方 Top Bar：圆形步数徽章 + 目标区 + 按钮） —— */
.hud-strip {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.6cqw, 14px);
  padding: clamp(6px, 1cqh, 10px) clamp(10px, 3cqw, 16px);
  border-radius: clamp(16px, 2.6cqh, 26px);
  background: rgba(255, 252, 245, 0.95);
  box-shadow: var(--shadow), inset 0 0 0 3px rgba(255, 255, 255, 0.85),
    inset 0 -12px 20px rgba(126, 200, 255, 0.22);
}

/*
  步数半圆进度环（官方 Progress Bar (Half Radial)）：
  中间粉色圆徽章显示剩余步数，外圈 270° 弧显示离下一颗星的进度，
  三颗星平均分布在弧上（1/3、2/3、3/3 处），拿到就换成点亮图。
  弧长 198 = 270/360 × 2π × 42，进度靠 --mr-progress(0~1) 推 dashoffset。
*/
.moves-radial {
  --mr-len: 198;
  position: relative;
  flex: 0 0 auto;
  width: clamp(58px, 8.6cqh, 82px);
  aspect-ratio: 1;
}

.mr-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mr-track,
.mr-fill {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
}

.mr-track {
  stroke: rgba(59, 42, 85, 0.2);
}

.mr-fill {
  stroke: #57d7a3;
  stroke-dasharray: var(--mr-len);
  stroke-dashoffset: calc(var(--mr-len) * (1 - var(--mr-progress, 0)));
  filter: drop-shadow(0 0 3px rgba(87, 215, 163, 0.6));
  transition: stroke-dashoffset 0.45s ease;
}

.mr-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-content: center;
  text-align: center;
  color: #fff;
  background: url('../../assets/ui/buttons/circle-pink.png') center / contain no-repeat;
  filter: drop-shadow(0 3px 5px rgba(59, 42, 85, 0.3));
}

.mr-badge b {
  font-family: 'Fredoka', var(--font);
  font-size: clamp(16px, 2.6cqh, 24px);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(199, 44, 116, 0.5);
}

.mr-badge i {
  font-style: normal;
  font-size: clamp(8px, 1.15cqh, 11px);
  line-height: 1.1;
  opacity: 0.95;
}

.mr-star {
  position: absolute;
  width: 29%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(59, 42, 85, 0.35));
  transition: transform 0.2s ease;
}

/* 位置＝弧上 1/3、2/3、3/3 处（左下 → 右下 → 右上） */
.ms1 {
  left: 20.3%;
  top: 79.7%;
}

.ms2 {
  left: 79.7%;
  top: 79.7%;
}

.ms3 {
  left: 79.7%;
  top: 20.3%;
}

.mr-star.is-on {
  transform: translate(-50%, -50%) scale(1.18);
  filter: brightness(1.12) drop-shadow(0 0 4px #fff6a4) drop-shadow(0 2px 3px rgba(59, 42, 85, 0.35));
}

.moves-radial.bump .mr-badge {
  animation: badge-bump 0.4s ease;
}

.moves-radial.is-low .mr-badge {
  filter: drop-shadow(0 0 7px rgba(255, 171, 61, .88)) saturate(1.15);
}

.moves-radial.is-critical .mr-badge {
  filter: drop-shadow(0 0 9px rgba(255, 74, 91, .95)) saturate(1.35);
  animation: moves-critical 680ms ease-in-out infinite alternate;
}

.moves-radial.is-critical .mr-badge b { color: #fff6a8; }

@keyframes moves-critical {
  from { transform: translate(-50%, -50%) scale(1); }
  to { transform: translate(-50%, -50%) scale(1.08); }
}

.hud-mid {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1cqh, 10px);
}

.hud-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hud-chip {
  font-size: clamp(11px, 1.6cqh, 14px);
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}

.hud-coins {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hud-coins img {
  width: clamp(15px, 2.1cqh, 20px);
  height: clamp(15px, 2.1cqh, 20px);
}

.hud-coins b {
  font-family: 'Fredoka', var(--font);
  font-size: clamp(13px, 1.9cqh, 17px);
  color: #e8992f;
}

/* 目标动物：脸 + 泡泡数字（官方 Goals 控件） */
.goals-row {
  display: flex;
  justify-content: center;
  gap: clamp(7px, 2.3cqw, 13px);
}

.hud-progress {
  position: relative;
  width: 100%;
  height: clamp(6px, 0.9cqh, 9px);
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  background: #41648c;
  box-shadow: inset 0 2px 3px rgba(24, 39, 70, 0.4), 0 1px 3px rgba(59, 42, 85, 0.18);
}

.hud-progress::after {
  content: '目标';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255,255,255,.92);
  font-size: 7px;
  line-height: 1;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(24,39,70,.7);
  pointer-events: none;
}

.hud-progress.is-complete::after { content: '完成'; }

.hud-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #63dc9b, #ffe66d);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45);
  transition: width 0.45s ease;
}

.goal-chip {
  position: relative;
  width: clamp(30px, 4.6cqh, 44px);
  aspect-ratio: 1;
}

.goal-face {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(59, 42, 85, 0.22));
}

/* 泡泡数字：上色圆 + Fredoka 数字（资源包 Amount Circle 风格） */
.goal-count {
  position: absolute;
  right: -6px;
  bottom: -6px;
  min-width: clamp(16px, 2.3cqh, 21px);
  height: clamp(16px, 2.3cqh, 21px);
  padding: 0 3px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #ff9ec6, #f25f9e);
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(59, 42, 85, 0.3);
  color: #fff;
  font-family: 'Fredoka', var(--font);
  font-size: clamp(10px, 1.5cqh, 13px);
  line-height: 1;
  display: grid;
  place-items: center;
}

.goal-chip.is-done .goal-count {
  background: radial-gradient(circle at 35% 30%, #a6ef9f, #46c055);
  transform: scale(.88);
}

.goal-chip.is-done .goal-face {
  opacity: 0.82;
}

.goal-done-mark {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(25,115,51,.45);
}

.hud-btns {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.7cqh, 8px);
}

.hud-btns .icon-btn {
  width: clamp(30px, 4.2cqh, 40px);
  height: clamp(30px, 4.2cqh, 40px);
}

/* 棋盘区吃掉 HUD 与道具栏之间的全部剩余高度，棋盘本身取宽高较小的一边保持正方形 */
.board-frame {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 30cqh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 1.6cqh, 14px);
  /* 自己也当容器，棋盘才能用 100cqh 拿到"剩余高度"把自己压成正方形 */
  container-type: size;
  container-name: boardarea;
}

/* 宽高取两者较小值：矮屏受高度限制，长屏受宽度限制，始终是正方形 */
.board-grid {
  position: relative;
  width: min(100%, 100cqh);
  height: auto;
  aspect-ratio: var(--board-aspect, 1 / 1);
  margin: auto;
  touch-action: none;
}

/* 白色面板跟随棋盘尺寸，避免在 9:21 / 9:24 上被拉成大白条 */
.board-grid::before {
  content: '';
  position: absolute;
  inset: -2.5%;
  border-radius: 7%;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px);
}

.tile {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform var(--fall-ms, 150ms) cubic-bezier(0.2, 0.72, 0.28, 1);
  will-change: transform;
}

/* 棋子落地只挤压内层图片，不覆盖 tile 的位移 transform。 */
.tile.tile-land .gem {
  animation: tile-land-jelly 210ms cubic-bezier(0.2, 0.9, 0.28, 1.25);
  transform-origin: 50% 88%;
}

/* 消除前短暂蓄力，让交换命中、特殊棋爆发和真正消失形成清楚的三段节奏。 */
.tile.match-ready .gem {
  transform: scale(1.06, 0.92);
  filter: brightness(1.22) drop-shadow(0 3px 3px rgba(59, 42, 85, 0.22));
}

.tile.special-fire {
  z-index: 8;
}

.tile.special-fire .gem {
  transform: scale(1.2);
  filter: brightness(1.45) drop-shadow(0 0 10px rgba(255, 232, 108, 0.95));
}

.tile.combo-convert .gem {
  animation: combo-convert 260ms cubic-bezier(.16,1.35,.3,1) both;
}

@keyframes combo-convert {
  0% { opacity: .35; transform: scale(.55) rotate(-12deg); filter: brightness(1.8); }
  65% { opacity: 1; transform: scale(1.18) rotate(5deg); filter: brightness(1.35) drop-shadow(0 0 9px #fff29a); }
  100% { transform: scale(1) rotate(0); }
}

/* 特殊棋的方向轨迹：横/竖条直接画出清除轴，彩虹用扩散光环表示全色清除。 */
.special-trace {
  position: absolute;
  z-index: 9;
  pointer-events: none;
}

.special-trace.is-h,
.special-trace.is-v {
  overflow: hidden;
  filter: drop-shadow(0 0 7px rgba(255, 244, 154, .95));
}

.special-trace.is-h {
  left: 0;
  right: 0;
  top: var(--trace-y);
  height: 9px;
  transform: translateY(-50%) scaleX(0);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #fff 14%, #ffe66c 50%, #fff 86%, transparent);
  animation: special-line-h 360ms cubic-bezier(.12,.8,.25,1) both;
}

.special-trace.is-v {
  top: 0;
  bottom: 0;
  left: var(--trace-x);
  width: 9px;
  transform: translateX(-50%) scaleY(0);
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, #fff 14%, #8ff3ff 50%, #fff 86%, transparent);
  animation: special-line-v 360ms cubic-bezier(.12,.8,.25,1) both;
}

.special-trace.is-rainbow {
  left: var(--trace-x);
  top: var(--trace-y);
  width: clamp(36px, 13cqw, 68px);
  aspect-ratio: 1;
  border: 6px solid rgba(255,255,255,.9);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255,104,166,.72), 0 0 0 10px rgba(110,224,255,.62), 0 0 18px rgba(255,243,109,.95);
  animation: special-rainbow-ring 390ms ease-out both;
}

@keyframes special-line-h {
  0% { opacity: 0; transform: translateY(-50%) scaleX(.08); }
  35% { opacity: 1; transform: translateY(-50%) scaleX(1); }
  100% { opacity: 0; transform: translateY(-50%) scaleX(1); }
}

@keyframes special-line-v {
  0% { opacity: 0; transform: translateX(-50%) scaleY(.08); }
  35% { opacity: 1; transform: translateX(-50%) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1); }
}

@keyframes special-rainbow-ring {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(-18deg); }
  38% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(3.4) rotate(24deg); }
}

.board-cue {
  position: absolute;
  z-index: 14;
  left: 50%;
  top: 12%;
  transform: translate(-50%, -8px) scale(.82);
  padding: 6px 16px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #6b4db7, #46307f);
  box-shadow: 0 3px 0 rgba(43, 30, 83, .72), 0 6px 16px rgba(43, 30, 83, .3);
  font-size: clamp(12px, 3.4cqw, 16px);
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
  animation: board-cue-pop 700ms cubic-bezier(.2, 1.2, .3, 1) both;
}

.board-cue.is-choco {
  color: #fff6b0;
  background: linear-gradient(180deg, #a7654a, #6b382d);
}

.board-cue.is-combo {
  color: #fff;
  background: linear-gradient(180deg, #ff79b2, #7556c8);
  box-shadow: 0 3px 0 rgba(72, 48, 131, .72), 0 6px 18px rgba(255, 93, 167, .35);
}

.board-cue.is-bear { background: linear-gradient(180deg, #e59b55, #9a5937); }
.board-cue.is-cat { background: linear-gradient(180deg, #ff8ec6, #a34e91); }
.board-cue.is-chicken { background: linear-gradient(180deg, #ffd95d, #e58b37); color: #603b2f; }
.board-cue.is-bunny { background: linear-gradient(180deg, #83dcff, #7a65d3); }

.tile.ultimate-target {
  z-index: 8;
}

.tile.ultimate-target::after {
  content: '';
  position: absolute;
  z-index: 5;
  inset: 7%;
  border: 4px solid rgba(255,255,255,.92);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255,235,119,.95);
  animation: ultimate-lock 150ms ease-out both;
}

.tile.ultimate-target.is-bear::after {
  border-radius: 30%;
  background: rgba(255,174,91,.24);
}

.tile.ultimate-target.is-cat::after {
  border-radius: 12%;
  border-color: #ff9bd0;
  background: repeating-linear-gradient(105deg, transparent 0 8px, rgba(255,255,255,.72) 9px 12px, transparent 13px 19px);
}

.tile.ultimate-target.is-chicken::after {
  border-color: #ffe86d;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0 12%, transparent 14%);
}

.tile.bunny-arrive .gem {
  animation: bunny-rainbow-arrive 320ms cubic-bezier(.15,1.4,.3,1) both;
}

@keyframes ultimate-lock {
  from { opacity: 0; transform: scale(.3) rotate(-10deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes bunny-rainbow-arrive {
  0% { opacity: 0; transform: translateY(-35%) scale(.2) rotate(-24deg); }
  68% { opacity: 1; transform: translateY(4%) scale(1.22) rotate(6deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}

@keyframes board-cue-pop {
  0% { opacity: 0; transform: translate(-50%, 4px) scale(.72); }
  24%, 72% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -10px) scale(.94); }
}

@keyframes tile-land-jelly {
  0% { transform: scale(1); }
  34% { transform: scale(1.08, 0.86); }
  68% { transform: scale(0.96, 1.07); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tile { transition-duration: 1ms; }
  .tile.tile-land .gem { animation: none; }
  .tile.match-ready .gem,
  .tile.special-fire .gem { transform: none; filter: none; }
  .tile.combo-convert .gem { animation: none; }
  .tile.ultimate-target::after,
  .tile.bunny-arrive .gem { animation: none; }
  .special-trace { display: none; }
  .board-cue { animation: none; opacity: 1; }
}

/* 眨眼时轻微挤压一下，更生动 */
.gem-blink {
  animation: gem-blink-squash 0.15s ease;
}

@keyframes gem-blink-squash {
  50% {
    transform: scale(1.04, 0.9);
  }
}

/* 每格底衬，用资源包的 Tile 图 */
.tile::before {
  content: '';
  position: absolute;
  inset: 4%;
  background: url('../../assets/ui/gems/tile.png') center / contain no-repeat;
  opacity: 0.55;
}

/* 棋子为资源包精灵图（Icons/Game/Animals） */
.gem {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(59, 42, 85, 0.22));
  transition: transform 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
  -webkit-user-drag: none;
}

.tile.selected .gem {
  transform: scale(1.16);
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 5px 6px rgba(59, 42, 85, 0.3));
}

.tile.pop .gem {
  transform: scale(0);
  opacity: 0;
}

.tile.shuffle .gem {
  animation: shuffle-pop 0.4s ease;
}

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

.combo-toast {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(59, 42, 85, 0.86);
  color: #ffd56a;
  font-size: clamp(18px, 5.4cqw, 24px);
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.combo-toast.is-hot {
  background: linear-gradient(180deg, #ff8a5c, #f2685f);
  color: #fff;
  font-size: clamp(20px, 6cqw, 28px);
}

.combo-toast.show {
  animation: combo-pop 0.7s ease;
}

@keyframes combo-pop {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.5);
  }
  30% {
    opacity: 1;
    transform: translateX(-50%) scale(1.1);
  }
  70% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.9) translateY(-16px);
  }
}

.popup-backdrop {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(26, 20, 48, 0.45);
  z-index: 20;
  padding: calc(var(--safe-top) + 18px) 20px calc(var(--safe-bottom) + 18px);
}

.popup-backdrop.is-open {
  display: grid;
}

.popup-backdrop.is-open .popup {
  animation: popup-jelly-in 0.42s cubic-bezier(0.18, 0.9, 0.25, 1.25) both;
}

@keyframes popup-jelly-in {
  /* 不缩放整个定位容器，避免右上角绝对定位的关闭钮在首帧横向闪位。 */
  0% { opacity: 0; transform: translateY(18px); }
  58% { opacity: 1; transform: translateY(-3px); }
  80% { transform: translateY(1px); }
  100% { opacity: 1; transform: none; }
}

/*
  弹窗拆成三件：耳朵条（装饰，只露一小截）/ 面板（真正的内容容器）/ 标题旗 + 关闭钮（压在面板顶边）。
  面板不再用整张背景图铺，因为原图的内层浅色区只占下半截，内容必然溢到耳朵上去。
  这里改成面板本体由 CSS 描（配色直接取自原图像素），高度跟着内容长，内容永远待在浅色区里。
*/
.popup {
  --rim: #22bfce;
  --rim-dark: #138bac;
  --panel: #e3fafc;
  --ear-peek: clamp(26px, 8cqw, 40px);
  --rim-w: clamp(7px, 2.4cqw, 11px);
  --flag-h: clamp(30px, 8.6cqw, 42px);
  position: relative;
  width: min(100%, 340px);
  max-height: 100%;
  padding-top: var(--ear-peek);
  display: flex;
  flex-direction: column;
  min-height: 0;
  text-align: center;
}

.popup-pink {
  --rim: #ff7fa8;
  --rim-dark: #d94b7d;
  --panel: #fff3f6;
}

/* 耳朵只露顶上一小截，下半截被面板压住，正好接成“一只动物顶着框”。
   宽度要比标题旗宽，两只耳朵才会从旗子左右两侧露出来 */
.popup-ears {
  position: absolute;
  top: 0;
  left: 50%;
  width: 92%;
  height: calc(var(--ear-peek) + var(--rim-w));
  object-fit: cover;
  object-position: top center;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
}

.popup-panel {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.4cqh, 12px);
  padding: calc(var(--flag-h, 34px) * 0.62 + 8px) clamp(14px, 5cqw, 22px) clamp(14px, 4cqw, 20px);
  border-radius: clamp(20px, 6.5cqw, 30px);
  background: var(--panel);
  box-shadow:
    0 0 0 var(--rim-w) var(--rim),
    0 0 0 calc(var(--rim-w) + 2px) var(--rim-dark),
    inset 0 clamp(-10px, -2cqw, -6px) 0 rgba(19, 139, 172, 0.06),
    0 14px 26px rgba(20, 40, 60, 0.28);
}

/* —— 标题旗（官方 Flag：两端旗尾 + 可拉伸中段） —— */
.popup-flag {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -52%);
  height: var(--flag-h);
  max-width: 88%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  z-index: 3;
  filter: drop-shadow(0 3px 4px rgba(20, 40, 60, 0.26));
}

.flag-tail {
  flex: none;
  height: 100%;
  aspect-ratio: 87 / 105;
  background: url('../../assets/ui/popups/flag-tail.png') center / 100% 100% no-repeat;
}

/* 左尾镜像一下，缺口就朝外了 */
.popup-flag .flag-tail:first-child {
  transform: scaleX(-1);
}

.flag-text {
  min-width: 0;
  padding: 0 clamp(8px, 2.6cqw, 16px);
  display: grid;
  place-items: center;
  background: url('../../assets/ui/popups/flag-center.png') center / 100% 100% no-repeat;
  font-size: clamp(15px, 4.4cqw, 21px);
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 rgba(176, 38, 78, 0.55);
}

/* —— 右上角关闭钮 —— */
.popup-x {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(28px, 8.4cqw, 40px);
  height: clamp(28px, 8.4cqw, 40px);
  transform: translate(32%, -32%);
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: url('../../assets/ui/buttons/circle-teal.png') center / contain no-repeat;
  cursor: pointer;
  z-index: 4;
  filter: drop-shadow(0 3px 4px rgba(20, 40, 60, 0.28));
  transition: transform 120ms ease;
}

.popup-pink .popup-x {
  background-image: url('../../assets/ui/buttons/circle-pink.png');
}

.popup-x:active {
  transform: translate(32%, -32%) scale(0.9);
}

.popup-x img {
  width: 42%;
  height: 42%;
  display: block;
  margin: auto;
}

/* 内容区：装不下就在面板里滚，绝不顶破边框 */
.popup-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.6cqh, 12px);
  padding-right: 2px;
}

/* 滚动条按包里的圆润风格描一下 */
.popup-body::-webkit-scrollbar {
  width: 6px;
}

.popup-body::-webkit-scrollbar-track {
  background: rgba(19, 139, 172, 0.1);
  border-radius: 999px;
}

.popup-body::-webkit-scrollbar-thumb {
  background: var(--rim);
  border-radius: 999px;
}

.popup-body {
  scrollbar-width: thin;
  scrollbar-color: var(--rim) rgba(19, 139, 172, 0.1);
}

.popup-line {
  margin: 0;
  font-size: clamp(12px, 1.9cqh, 16px);
  color: var(--ink-soft);
}

.popup .popup-actions {
  flex: none;
  width: 100%;
  display: grid;
  gap: clamp(6px, 1.4cqh, 10px);
}

#popup-pause .btn.is-confirming {
  filter: saturate(1.2) drop-shadow(0 0 8px rgba(255, 206, 72, .72));
  animation: confirm-attention 520ms ease-in-out infinite alternate;
}

#popup-pause #btn-quit-game.is-confirming {
  filter: saturate(1.2) drop-shadow(0 0 8px rgba(255, 92, 105, .72));
}

@keyframes confirm-attention {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}

/* 商店内容多，给它宽一点；高度仍然跟内容走，装不下再靠 max-height 触发列表滚动 */
.popup-tall {
  width: min(100%, 360px);
}

/* 目标弹窗要摆一整行道具，给宽一点，内容也就不用挤着滚 */
.popup-goal {
  width: min(100%, 366px);
}

/* 设置面板：复用弹窗那套分件结构，居中放在屏幕中间 */
.settings-panel {
  margin: auto;
}

.dev-tools {
  width: min(88%, 360px);
  margin: 10px auto 0;
  padding: 12px;
  border-radius: 16px;
  background: rgba(31, 58, 92, 0.94);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 5px 16px rgba(25,35,70,.28);
  color: #fff;
  font-size: 12px;
}

.dev-tools[hidden] { display: none; }
.dev-tools > b { display: block; margin-bottom: 8px; color: #ffe77d; text-align: center; font-size: 14px; }
.dev-tool-row { display: grid; grid-template-columns: 42px 1fr 58px; gap: 7px; align-items: center; margin-top: 7px; }
.dev-tool-row input {
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border: 2px solid #88cce9;
  border-radius: 9px;
  background: #fff;
  color: #294466;
  font: 700 13px var(--font);
}
.dev-tool-row button,
.dev-reset {
  min-height: 32px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(180deg, #61d9b2, #27aa86);
  box-shadow: 0 3px 0 #19775f;
  color: #fff;
  font: 700 12px var(--font);
}
.dev-reset { width: 100%; margin-top: 10px; background: linear-gradient(180deg, #ff8092, #d94c66); box-shadow-color: #9c2f45; }
.dev-tools small { display: block; margin-top: 10px; color: #bdd9ec; line-height: 1.35; overflow-wrap: anywhere; }

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(7px, 1.4cqh, 13px) 2px;
  font-size: clamp(14px, 2.2cqh, 19px);
  font-weight: 700;
}

.setting-row + .setting-row {
  border-top: 1px solid rgba(217, 75, 125, 0.14);
}

.setting-name {
  color: var(--ink);
}

/*
  开关照官方 Switch With Icon 来：药丸轨道（带内阴影）+ 带图标的圆形滑块。
  开＝绿色滑块滑到右边，关＝灰色滑块滑到左边。
*/
.switch {
  position: relative;
  flex: none;
  width: clamp(62px, 17cqw, 82px);
  height: clamp(32px, 8.6cqw, 42px);
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
  background: #7fd8a8;
  box-shadow: inset 0 3px 6px rgba(59, 42, 85, 0.28), inset 0 0 0 2px rgba(255, 255, 255, 0.55);
  transition: background-color 0.22s ease;
}

.switch.is-off {
  background: #cbbfd8;
}

.switch-knob {
  position: absolute;
  top: 50%;
  left: calc(100% - 2px);
  height: 100%;
  aspect-ratio: 1;
  transform: translate(-100%, -50%);
  display: grid;
  place-items: center;
  background: url('../../assets/ui/buttons/circle-green.png') center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(59, 42, 85, 0.35));
  transition: left 0.22s ease;
}

.switch.is-off .switch-knob {
  left: 2px;
  transform: translate(0, -50%);
  background-image: url('../../assets/ui/buttons/circle-gray.png');
}

.switch-knob img {
  width: 52%;
  height: 52%;
  object-fit: contain;
}

.switch.is-off .switch-knob img {
  opacity: 0.75;
}

/* —— 关卡地图：地图铺满整屏，顶栏/云带浮在上层，滚动条隐藏靠拖 —— */
.screen-map {
  background: #7ec8ff;
  padding: 0;
}

.map-top {
  position: absolute;
  top: calc(var(--safe-top) + clamp(8px, 1.8cqh, 18px));
  left: calc(var(--safe-left) + clamp(10px, 4.6cqw, 22px));
  right: calc(var(--safe-right) + clamp(10px, 4.6cqw, 22px));
  z-index: 4;
}

.map-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.map-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.map-scroll.is-dragging {
  cursor: grabbing;
  /* 拖动中别让图片/节点被选中或触发点击 */
  user-select: none;
}

/* 地图上下留出安全区，第一关和最后一关不会被顶栏或云带挡住 */
.map-canvas {
  padding-top: calc(var(--safe-top) + clamp(46px, 9cqh, 72px));
  padding-bottom: calc(var(--safe-bottom) + clamp(52px, 10cqh, 84px));
  /* 第 9 段地图顶边的实际底色，填满为顶栏预留的区域，避免出现蓝色断层。 */
  background: #00ccd7;
}

.map-canvas {
  width: 100%;
}

.map-art {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.map-backgrounds {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
}

.map-seg {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

.map-nodes {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.map-chapters {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.chapter-sign {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(116px, 34cqw, 166px);
  min-height: 52px;
  transform: translate(-50%, -50%) rotate(-2deg);
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  padding: 7px 9px;
  border-radius: 13px;
  background: linear-gradient(180deg, #fff3c3, #edc77e);
  border: 3px solid #fff9dc;
  box-shadow: 0 4px 0 #a96e42, 0 7px 12px rgba(64,44,74,.25);
  color: #75436b;
}

.chapter-sign > i {
  grid-row: 1 / 3;
  width: 29px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #61c9a7;
  color: #fff;
  font-style: normal;
  font-size: 17px;
  box-shadow: inset 0 2px 2px rgba(255,255,255,.55), 0 2px 0 #378d74;
}

.chapter-sign span { display: grid; line-height: 1.05; font-size: 10px; }
.chapter-sign span b { font-size: 13px; color: #d45778; }
.chapter-sign em { grid-column: 2; margin-top: 2px; color: #966644; font-size: 9px; font-style: normal; }
.chapter-sign.is-locked { filter: grayscale(.78); opacity: .72; }
.chapter-sign.is-complete > i { background: #60cb75; }

.chapter-finish {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) rotate(2deg);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
  background: rgba(75,48,112,.88);
  box-shadow: 0 3px 0 rgba(42,27,70,.8);
  color: #fff1a1;
  font-size: 9px;
}

.chapter-finish span { width: 20px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #f26ca3; }
.chapter-finish.is-complete span { background: #55c875; }

.map-future-clouds {
  position: absolute;
  z-index: 0;
  inset: -0.3% 0 auto;
  height: 3.3%;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(216,250,255,.94), rgba(255,255,255,.12));
}

.map-future-clouds img { position: absolute; width: 46%; filter: drop-shadow(0 6px 12px rgba(32,128,166,.16)); animation: future-cloud 5s ease-in-out infinite alternate; }
.map-future-clouds img:nth-child(1) { left: -8%; bottom: -8%; }
.map-future-clouds img:nth-child(2) { right: -5%; bottom: 5%; animation-delay: -1.7s; }
.map-future-clouds img:nth-child(3) { left: 30%; top: -8%; width: 42%; animation-delay: -3.2s; }

@keyframes future-cloud { to { transform: translateY(8px) translateX(5px); } }

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

.map-flying-cloud,
.map-angel {
  position: absolute;
  top: var(--y);
  left: -34%;
  will-change: transform;
}

.map-flying-cloud {
  width: clamp(80px, 29cqw, 142px);
  opacity: 0.78;
  filter: drop-shadow(0 6px 10px rgba(34, 112, 150, 0.12));
  animation: map-cloud-cross 14s linear infinite;
  animation-delay: var(--delay);
}

.map-flying-cloud.cloud-1 { width: clamp(58px, 21cqw, 104px); animation-duration: 18s; opacity: 0.58; }
.map-flying-cloud.cloud-2 { width: clamp(104px, 36cqw, 172px); animation-duration: 22s; opacity: 0.42; }

@keyframes map-cloud-cross {
  from { transform: translateX(0); }
  to { transform: translateX(168cqw); }
}

.map-angel {
  left: 8%;
  width: clamp(32px, 11cqw, 52px);
  transform-origin: 50% 60%;
  filter: drop-shadow(0 4px 5px rgba(39, 102, 153, 0.2));
  animation: angel-float 2.5s ease-in-out infinite;
  animation-delay: var(--delay);
}

.map-angel.life-right { left: auto; right: 8%; animation-name: angel-float-right; }

@keyframes angel-float {
  0%, 100% { transform: translate(0, 0) rotate(-5deg) scaleY(1); }
  50% { transform: translate(18px, -10px) rotate(5deg) scaleY(1.15); }
}

@keyframes angel-float-right {
  0%, 100% { transform: translate(0, 0) rotate(5deg) scaleY(1); }
  50% { transform: translate(-18px, -10px) rotate(-5deg) scaleY(1.15); }
}

/*
  关卡节点照官方 Level Button prefab 分件拼：
  Shadow(Circle - Blurry) → Button(Color)(Circle Button - X) → White Border(Circle)
  → Text(数字) → Stars(Star - Yellow / Outline)，锁住的加气泡锁牌。
  颜色按关卡循环，靠 --bubble 换图，不用每个颜色写一套。
*/
.map-node {
  --node: clamp(46px, 14.5cqw, 64px);
  --bubble: url('../../assets/ui/buttons/circle-pink.png');
  position: absolute;
  width: var(--node);
  height: var(--node);
  margin: calc(var(--node) / -2) 0 0 calc(var(--node) / -2);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  display: grid;
  place-items: center;
  transition: transform 0.12s ease;
}

.map-node > * {
  position: absolute;
  pointer-events: none;
}

.map-node:not(.is-locked):active {
  transform: scale(0.94);
}

.node-pink {
  --bubble: url('../../assets/ui/buttons/circle-pink.png');
}

.node-orange {
  --bubble: url('../../assets/ui/buttons/circle-orange.png');
}

.node-green {
  --bubble: url('../../assets/ui/buttons/circle-green.png');
}

.node-blue {
  --bubble: url('../../assets/ui/buttons/circle-blue.png');
}

.node-purple {
  --bubble: url('../../assets/ui/buttons/btn-purple.png');
}

.node-teal {
  --bubble: url('../../assets/ui/buttons/circle-teal.png');
}

.node-coral {
  --bubble: url('../../assets/ui/buttons/circle-coral.png');
}

.node-yellow {
  --bubble: url('../../assets/ui/buttons/circle-yellow.png');
}

/* 白圈在最外，泡泡底比白圈小一圈，露出描边（官方 Button (Color) 是 -16/200） */
.node-ring {
  inset: 0;
  width: 100%;
  height: 100%;
}

.node-bubble {
  inset: 8%;
  background: var(--bubble) center / contain no-repeat;
}

.node-shadow {
  left: 0;
  top: 6%;
  width: 100%;
  opacity: 0.5;
}

.map-node .node-num {
  position: relative;
  z-index: 2;
  font-family: 'Fredoka', var(--font);
  font-size: calc(var(--node) * 0.42);
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 0 rgba(59, 42, 85, 0.45);
}

.node-face {
  inset: 20%;
  width: 60%;
  height: 60%;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 2px 2px rgba(59, 42, 85, 0.35));
}

/* 三颗星压在泡泡下沿（官方 Stars 在 y=-87，约节点半径的 87%） */
.map-node .node-stars {
  left: 50%;
  bottom: -14%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 1px;
}

.map-node .node-stars img {
  width: calc(var(--node) * 0.3);
  height: calc(var(--node) * 0.3);
}

/* 锁牌挂左上角（官方 Lock 在 -50,100） */
.node-lock {
  left: -18%;
  top: -22%;
  width: 52%;
  aspect-ratio: 1;
  z-index: 4;
}

.node-lock img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.node-lock .lock-icon {
  inset: 16%;
  width: 68%;
  height: 68%;
}

.map-node.is-locked {
  cursor: default;
}

.map-node.is-locked .node-bubble {
  filter: grayscale(0.55) brightness(0.9);
}

.map-node.is-locked .node-num {
  opacity: 0.92;
}

/* 解锁节点：泡泡保持彩色，里头是被困住的新动物 */
.map-node.is-trapped .node-bubble {
  filter: none;
}

.map-node.is-trapped { cursor: pointer; }

.node-unlock-preview {
  position: absolute;
  left: 50%;
  bottom: 118%;
  z-index: 12;
  width: clamp(132px, 38cqw, 172px);
  display: grid;
  gap: 2px;
  padding: 8px 10px 9px;
  border: 3px solid #fff9d8;
  border-radius: 15px;
  background: linear-gradient(180deg, #fff8cf, #ffd783);
  box-shadow: 0 4px 0 #bd7a42, 0 8px 16px rgba(44, 31, 77, .28);
  color: #76506d;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 7px) scale(.84);
  transform-origin: 50% 100%;
  transition: opacity 130ms ease, transform 180ms cubic-bezier(.18,.9,.3,1.18);
}

.node-unlock-preview::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: #ffd783;
  border-right: 3px solid #fff9d8;
  border-bottom: 3px solid #fff9d8;
  transform: translateX(-50%) rotate(45deg);
}

.node-unlock-preview b { color: #d45379; font-size: clamp(11px, 3.2cqw, 14px); }
.node-unlock-preview small { font-size: clamp(8px, 2.4cqw, 10px); line-height: 1.2; }
.node-unlock-preview em { color: #996537; font-size: clamp(8px, 2.3cqw, 10px); font-style: normal; font-weight: 800; }
.node-unlock-kind {
  position: absolute;
  left: 50%;
  bottom: 4%;
  z-index: 7;
  min-width: 36px;
  padding: 2px 6px;
  border: 2px solid #fff9dc;
  border-radius: 999px;
  background: #ef6f9a;
  box-shadow: 0 2px 0 rgba(111, 55, 81, .35);
  color: #fff;
  font-size: clamp(8px, 2.4cqw, 11px);
  font-weight: 900;
  line-height: 1.05;
  transform: translateX(-50%);
  white-space: nowrap;
}
.node-unlock-kind.kind-skill { background: #7e62d9; }
.node-unlock-kind.kind-skin { background: #4ea9c7; }
.node-unlock-kind.kind-prop { background: #e49535; }
.node-unlock-kind.kind-ability { background: #5aaa68; }
.map-node.is-previewing { z-index: 20; }
.map-node.is-previewing .node-unlock-preview { opacity: 1; transform: translate(-50%, 0) scale(1); }
.map-node.preview-right .node-unlock-preview { left: 10%; transform: translate(0, 7px) scale(.84); transform-origin: 15% 100%; }
.map-node.preview-right.is-previewing .node-unlock-preview { transform: translate(0, 0) scale(1); }
.map-node.preview-right .node-unlock-preview::after { left: 18%; }
.map-node.preview-left .node-unlock-preview { left: auto; right: 10%; transform: translate(0, 7px) scale(.84); transform-origin: 85% 100%; }
.map-node.preview-left.is-previewing .node-unlock-preview { transform: translate(0, 0) scale(1); }
.map-node.preview-left .node-unlock-preview::after { left: 82%; }

@media (prefers-reduced-motion: reduce) {
  .node-unlock-preview { transition: opacity 80ms linear; }
}

/* 九区最顶端只留一个后续开放终点，不在沿途堆一串灰色占位关。 */
.map-node.is-coming-soon {
  opacity: 0.42;
  filter: saturate(0.35);
}

.map-node.is-coming-soon .node-lock {
  display: none;
}

.coming-soon-sign {
  left: 50%;
  top: -62%;
  z-index: 6;
  width: max-content;
  padding: 5px 12px;
  transform: translateX(-50%);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(59, 42, 85, 0.82);
  color: #fff;
  font-size: clamp(11px, 3.2cqw, 14px);
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(59, 42, 85, 0.28);
}

/* 当前关：背后一圈慢慢转的光（官方 Effects/Rotation 360 是 6.58s 一圈） */
.node-shine {
  left: -60%;
  top: -60%;
  width: 220%;
  height: 220%;
  z-index: 0;
  opacity: 0.75;
  animation: node-spin 6.6s linear infinite;
}

@keyframes node-spin {
  to {
    transform: rotate(360deg);
  }
}

/* 头像挂件（官方 Avatar 在 -80,60，Callout 打底 + 圆形头像 + 两个肥皂泡） */
.node-avatar {
  left: -46%;
  bottom: 62%;
  width: 76%;
  aspect-ratio: 1;
  z-index: 5;
  animation: node-float 2.8s ease-in-out infinite;
}

.node-avatar img {
  position: absolute;
}

.map-progress-orb {
  position: fixed;
  z-index: 10010;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 4px solid #fffbd1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ffe55f 36%, #ff8b4f 72%);
  box-shadow: 0 0 0 5px rgba(255, 232, 91, .25), 0 0 18px #fff178;
  pointer-events: none;
  animation: map-progress-fly 720ms cubic-bezier(.22,.72,.25,1) both;
}

.map-progress-orb::before,
.map-progress-orb::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 2px solid rgba(255, 248, 156, .7);
  border-radius: 50%;
  animation: map-orb-ring 420ms ease-out infinite;
}
.map-progress-orb::after { animation-delay: 180ms; }

@keyframes map-progress-fly {
  0% { opacity: 0; transform: translate(0, 0) scale(.55); }
  12% { opacity: 1; transform: translate(0, -8px) scale(1.15); }
  58% { transform: translate(var(--map-mid-x), var(--map-mid-y)) scale(.92); }
  100% { opacity: 0; transform: translate(var(--map-dx), var(--map-dy)) scale(.62); }
}

@keyframes map-orb-ring { to { opacity: 0; transform: scale(1.65); } }

.map-node.is-advance-target .node-bubble { animation: map-node-await 680ms ease-in-out infinite; }
.map-node.is-advance-arrived .node-ring { animation: map-node-unlock-ring 520ms cubic-bezier(.18,.9,.28,1.25) both; }

@keyframes map-node-await { 50% { filter: brightness(1.22) drop-shadow(0 0 7px #fff29a); } }
@keyframes map-node-unlock-ring {
  0% { transform: scale(.72); opacity: .35; }
  65% { transform: scale(1.26); opacity: 1; }
  100% { transform: scale(1); }
}

.map-progress-toast {
  position: absolute;
  z-index: 15;
  top: calc(var(--safe-top) + 76px);
  left: 50%;
  width: min(82%, 310px);
  display: grid;
  gap: 1px;
  padding: 10px 18px;
  border: 3px solid #fff8ce;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff3a8, #ffbf69);
  box-shadow: 0 4px 0 #bd6d43, 0 9px 22px rgba(59,42,85,.28);
  color: #7c4868;
  text-align: center;
  pointer-events: none;
  transform: translateX(-50%);
  animation: map-toast-in 2.35s ease both;
}
.map-progress-toast b { color: #d34d70; font-size: clamp(15px, 4.2cqw, 19px); }
.map-progress-toast span { font-size: clamp(10px, 2.8cqw, 12px); font-weight: 800; }

@keyframes map-toast-in {
  0% { opacity: 0; transform: translate(-50%, -14px) scale(.88); }
  12%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -8px) scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  .map-progress-orb { display: none; }
  .map-node.is-advance-target .node-bubble,
  .map-node.is-advance-arrived .node-ring { animation: none; }
  .map-progress-toast { animation: none; }
}

.av-callout {
  inset: 0;
  width: 100%;
  height: 100%;
}

.av-face {
  left: 16%;
  top: 12%;
  width: 68%;
  height: 68%;
  border-radius: 50%;
  object-fit: cover;
}

.av-soap {
  width: 26%;
  opacity: 0.9;
}

.s1 {
  right: -8%;
  top: 4%;
  animation: soap-drift 3.2s ease-in-out infinite;
}

.s2 {
  right: -16%;
  top: 34%;
  width: 18%;
  animation: soap-drift 3.2s ease-in-out infinite 1.1s;
}

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

@keyframes soap-drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translate(4px, -8px) scale(1.15);
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .node-shine,
  .node-avatar,
  .av-soap,
  .map-flying-cloud,
  .map-angel {
    animation: none;
  }
}

.map-cloudband {
  position: absolute;
  left: -6cqw;
  width: 112cqw;
  bottom: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.95;
}

/* 地图底部功能栏：照 Unity 图三放在云层上方（Spin / Shop / Stars） */
.map-bottom-row {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-bottom) + clamp(6px, 1.5cqh, 14px));
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 3.6cqw, 20px);
}

.map-bottom-row .home-feature { min-width: 0; }
.map-bottom-row .home-feature > b { font-size: clamp(11px, 3.1cqw, 15px); }
.endless-icon-stack .mis-main { width: 58%; height: 58%; left: 21%; top: 17%; object-fit: contain; }
.endless-icon-stack .mis-outline { opacity: .72; }
.endless-feature.is-locked { filter: grayscale(.72); opacity: .72; }
.endless-lock { position: absolute; right: -3px; top: -4px; z-index: 5; min-width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #68568f; color: #fff; font: 700 10px var(--font); }

.map-feature .circle-btn {
  width: clamp(44px, 12.4cqw, 62px);
  animation: btn-breathe 2.8s ease-in-out infinite;
}

.map-feature .map-icon-btn {
  width: clamp(52px, 14.4cqw, 74px);
  height: clamp(52px, 14.4cqw, 74px);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 6px 8px rgba(59, 42, 85, 0.32));
  animation: btn-breathe 2.8s ease-in-out infinite;
}

.map-icon-stack {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.map-icon-stack img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.map-icon-stack .mis-shadow {
  transform: translateY(8%);
  opacity: 0.55;
  z-index: 1;
}

.map-icon-stack .mis-outline {
  z-index: 2;
}

.map-icon-stack .mis-main {
  z-index: 3;
}

.map-feature:nth-child(2) .circle-btn {
  animation-delay: 0.35s;
}

.map-feature:nth-child(3) .circle-btn {
  animation-delay: 0.7s;
}

.map-feature:nth-child(2) .map-icon-btn {
  animation-delay: 0.35s;
}

.map-feature:nth-child(3) .map-icon-btn {
  animation-delay: 0.7s;
}

.map-icon-btn:active {
  transform: scale(0.94);
}

/*
  底部栏文字对齐 Unity MERKIN SDF Outline Blue：
  白填充 + 深蓝描边。中文走 ChillRoundF 粗体，描边用 paint-order 先画边再填字。
*/
.map-feature > b {
  color: #fff;
  font-family: 'ChillRoundF', var(--font);
  font-weight: 700;
  font-size: clamp(13px, 3.6cqw, 16px);
  letter-spacing: 0.5px;
  -webkit-text-stroke: 3px #3d5fb8;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #2a4488;
}

.map-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-bottom) + clamp(74px, 12cqh, 98px));
  transform: translateX(-50%);
  z-index: 4;
  max-width: 84%;
  white-space: nowrap;
}

html.store-capture .map-hint {
  display: none;
}

/* 软著截图：隐藏广告位、调试面板，避免 AD 标识触发审查疑虑 */
html.ruanzhu-capture .ad-btn,
html.ruanzhu-capture .ad-badge,
html.ruanzhu-capture .dev-tools {
  display: none !important;
}

/* —— 道具栏：圆形按钮浮在草地上（官方 Booster Buttons 风格） —— */
/* —— 动物伙伴充能条 —— */
.partner {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: clamp(6px, 2cqw, 10px);
  padding: clamp(4px, 0.8cqh, 7px) clamp(12px, 3cqw, 18px) clamp(4px, 0.8cqh, 7px)
    clamp(4px, 0.8cqh, 7px);
  border: 0;
  border-radius: 999px;
  /* 深色底才衬得出进度条的白描边和高光，跟包里的面板同一套配色 */
  background: linear-gradient(180deg, #2b4a70, #1f3a5c);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.14), 0 4px 12px rgba(0, 0, 0, 0.3);
  cursor: default;
  font-family: inherit;
}

.partner-ring {
  position: relative;
  width: clamp(34px, 5.2cqh, 48px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--partner-color, #c98a5e);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(59, 42, 85, 0.2);
}

.partner-face {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

/*
  照官方 Progress Bar - With Icon 的层次：
  Outline（白描边）→ Background(Mask)（深色轨道 + Inner Glow）→ Bar（彩色填充 + Lights 高光）。
  高光贴在填充里而不是轨道上，所以只有已填的那截才反光，空槽是纯深色的。
*/
.partner-bar {
  position: relative;
  width: clamp(62px, 18cqw, 110px);
  height: clamp(11px, 1.8cqh, 17px);
  border-radius: 999px;
  background: #24405f;
  box-shadow: 0 0 0 2px #fff, inset 0 2px 4px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.partner-fill {
  position: relative;
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd873, var(--partner-color, #f4b52f) 62%, #e09a1c);
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.22);
  transition: width 0.3s ease;
  overflow: hidden;
}

/*
  官方的 Lights 是白色剪影，靠透明度当高光叠上去。
  只铺上半截、两头留边（对应 prefab 里 Lights 的 20/-80 内缩），铺满会把底色洗白。
*/
.partner-shine {
  position: absolute;
  left: 10%;
  top: 8%;
  /* 替换元素在 left+right 下会按固有比例算宽，必须写死 width 才铺得开 */
  width: 80%;
  height: 40%;
  object-fit: fill;
  opacity: 0.6;
  pointer-events: none;
}

.partner-skill {
  font-size: clamp(10px, 1.5cqh, 13px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

/* 能量满：整个伙伴条变成可点的发光按钮 */
.partner.is-ready {
  cursor: pointer;
  background: linear-gradient(180deg, #3d6ea0, #2a5480);
  animation: partner-glow 1.3s ease-in-out infinite;
}

.partner.is-ready .partner-ring {
  animation: partner-pop 0.9s ease-in-out infinite;
}

.partner.is-ready .partner-skill {
  color: #ffd56a;
}

.tile.skill-preview {
  z-index: 7;
}

.tile.skill-preview::after {
  content: '';
  position: absolute;
  inset: 5%;
  border: 3px solid #fff3a8;
  border-radius: 24%;
  background: rgba(255, 220, 83, 0.22);
  box-shadow: 0 0 0 3px rgba(255, 151, 62, 0.72), 0 0 16px rgba(255, 239, 126, 0.95);
  pointer-events: none;
  animation: skill-preview-pulse 0.42s ease-in-out infinite alternate;
}

.board-grid.preview-cat .tile.skill-preview::after { border-radius: 12%; background: rgba(255, 143, 198, 0.24); }
.board-grid.preview-chicken .tile.skill-preview::after { border-radius: 50%; }
.board-grid.preview-bunny .tile.skill-preview::after { background: rgba(129, 211, 255, 0.3); }

@keyframes skill-preview-pulse {
  from { transform: scale(0.84); opacity: 0.68; }
  to { transform: scale(1.04); opacity: 1; }
}

.skill-preview-label {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 8px;
  transform: translate(-50%, -10px) scale(0.86);
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7052bd, #4b338f);
  box-shadow: 0 3px 0 #38266d, 0 5px 14px rgba(40, 24, 82, 0.35);
  color: #fff5a8;
  font-size: clamp(11px, 3cqw, 14px);
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.18s ease;
}

.skill-preview-label.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

@keyframes partner-glow {
  0%,
  100% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(255, 213, 106, 0.75);
  }
  50% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 8px rgba(255, 213, 106, 0);
  }
}

@keyframes partner-pop {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

.prop-bar {
  width: min(calc(100% - 20px), 430px);
  min-height: clamp(48px, 7.5cqh, 66px);
  margin: 0 auto clamp(2px, .6cqh, 6px);
  padding: clamp(4px, .7cqh, 7px) clamp(8px, 2.2cqw, 14px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(7px, 2.2cqw, 14px);
  flex: 0 0 auto;
  z-index: 3;
  position: relative;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(211,235,255,.72));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), 0 5px 14px rgba(35,49,91,.2);
  backdrop-filter: blur(4px);
}

.prop-btn {
  position: relative;
  width: clamp(42px, 6.5cqh, 58px);
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 6px 10px rgba(59, 42, 85, 0.3));
  transition: transform 0.12s ease;
}

.prop-btn:hover:not(.is-empty) { transform: translateY(-2px); }

.prop-btn:active {
  transform: scale(0.9);
}

.prop-icon {
  width: 56%;
  height: 56%;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(59, 42, 85, 0.3));
}

.prop-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: clamp(16px, 2.2cqh, 20px);
  height: clamp(16px, 2.2cqh, 20px);
  padding: 0 4px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: 'Fredoka', var(--font);
  font-size: clamp(10px, 1.6cqh, 13px);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 5px rgba(59, 42, 85, 0.3);
}

.prop-btn.is-active {
  outline: 3px solid #ffd56a;
  outline-offset: 2px;
  border-radius: 50%;
}

.prop-btn.is-empty {
  opacity: 0.72;
  filter: saturate(.62) drop-shadow(0 4px 7px rgba(59, 42, 85, 0.18));
}

.prop-btn.is-locked {
  display: none;
}

/* —— 消除迸发粒子 —— */
.fx-burst {
  position: absolute;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 7;
}

.fx-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(30px, 9cqw, 56px);
  height: clamp(30px, 9cqw, 56px);
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0.9;
  animation: fx-glow 0.42s ease-out forwards;
}

@keyframes fx-glow {
  to {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

.fx-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(12px, 3.4cqw, 20px);
  height: clamp(12px, 3.4cqw, 20px);
  transform: translate(-50%, -50%);
  animation: fx-fly 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes fx-fly {
  0% {
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1)
      rotate(var(--rot));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-burst {
    display: none;
  }
}

/* 十字弹命中前扫过的一道十字光 */
.cross-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.cross-flash::before,
.cross-flash::after {
  content: '';
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.92), transparent);
  animation: cross-zap 0.22s ease-out;
}

.cross-flash::before {
  left: 0;
  right: 0;
  top: calc(var(--row) * (100% / var(--rows)));
  height: calc(100% / var(--rows));
}

.cross-flash::after {
  top: 0;
  bottom: 0;
  left: calc(var(--col) * (100% / var(--cols)));
  width: calc(100% / var(--cols));
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.92), transparent);
}

@keyframes cross-zap {
  from {
    opacity: 0;
    filter: brightness(2);
  }
  to {
    opacity: 1;
  }
}

/* 磁铁吸走前的抖动（动内层图片，避免覆盖棋子自身的定位 transform） */
.tile.magnet-pull {
  z-index: 5;
}

.tile.magnet-pull .gem {
  animation: magnet-shake 0.28s ease-in-out;
}

@keyframes magnet-shake {
  0%,
  100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.18) rotate(-10deg);
  }
  75% {
    transform: scale(1.18) rotate(10deg);
  }
}

@keyframes badge-bump {
  0%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.18);
  }
}

.board-grid.prop-aim {
  cursor: crosshair;
  outline: 3px dashed rgba(255, 126, 182, 0.7);
  outline-offset: 4px;
  border-radius: 12px;
}

/* —— 冰块 / 障碍 / 特殊棋 —— */
.ice-overlay {
  position: absolute;
  inset: 2%;
  width: 96%;
  height: 96%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 2px rgba(40, 100, 160, 0.25));
}

.block-img {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(59, 42, 85, 0.28));
  transition: transform 0.15s ease, opacity 0.15s ease;
  -webkit-user-drag: none;
}

.tile.is-block {
  z-index: 1;
}

.tile.block-hit .block-img {
  animation: block-shake 0.2s ease;
}

.tile.block-hit[data-block='wood'] .block-img { animation-name: wood-hit; }
.tile.block-hit[data-block='stone'] .block-img { animation-name: stone-hit; }
.tile.block-hit[data-block='choco'] .block-img { animation-name: choco-hit; }

.tile.block-break .block-img { animation-duration: 170ms; animation-timing-function: ease-out; animation-fill-mode: both; }
.tile.block-break.break-wood .block-img { animation-name: wood-break; }
.tile.block-break.break-stone .block-img { animation-name: stone-break; }
.tile.block-break.break-choco .block-img { animation-name: choco-break; }

@keyframes wood-hit {
  30% { transform: translateX(-5px) rotate(-4deg) scale(1.04); }
  65% { transform: translateX(4px) rotate(3deg) scale(.97); }
}

@keyframes stone-hit {
  35% { transform: translateY(3px) scale(.9); filter: brightness(1.35); }
  70% { transform: translateY(-2px) scale(1.03); }
}

@keyframes choco-hit {
  35% { transform: scale(1.14, .82); filter: saturate(1.35); }
  70% { transform: scale(.92, 1.08); }
}

@keyframes wood-break {
  0% { opacity: 1; transform: scale(1) rotate(0); }
  38% { transform: scale(1.08, .9) rotate(-5deg); filter: brightness(1.35); }
  100% { opacity: 0; transform: scale(.55) rotate(12deg); }
}

@keyframes stone-break {
  0% { opacity: 1; transform: scale(1); }
  34% { transform: scale(.88); filter: brightness(1.7) contrast(1.15); }
  100% { opacity: 0; transform: scale(1.18); filter: brightness(1.9); }
}

@keyframes choco-break {
  0% { opacity: 1; transform: scale(1); }
  38% { transform: scale(1.18, .74) rotate(4deg); filter: saturate(1.45) brightness(1.15); }
  100% { opacity: 0; transform: translateY(12%) scale(.7, .42) rotate(-7deg); }
}

.obstacle-burst {
  position: absolute;
  z-index: 10;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.obstacle-burst i {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: 3px 7px 3px 6px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(35,25,60,.24);
  animation: obstacle-chip 0.5s ease-out both;
}

.obstacle-burst.is-ice i { background: linear-gradient(135deg, #f6ffff, #69c9f5); clip-path: polygon(50% 0,100% 100%,0 75%); }
.obstacle-burst.is-wood i { background: linear-gradient(135deg, #efc16d, #9c572e); border-radius: 2px; }
.obstacle-burst.is-stone i { background: linear-gradient(135deg, #cad1df, #626d85); border-radius: 45% 55% 40% 60%; }
.obstacle-burst.is-choco i { background: linear-gradient(135deg, #b66b48, #5a2d2d); border-radius: 50%; }

@keyframes obstacle-chip {
  0% { opacity: 1; transform: translate(0,0) rotate(0) scale(.45); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); }
}

.tile.choco-grow .block-img {
  animation: choco-grow 0.22s cubic-bezier(0.2, 1.45, 0.45, 1);
}

@keyframes choco-grow {
  0% {
    transform: scale(0.15) rotate(-12deg);
    opacity: 0;
  }
  68% {
    transform: scale(1.14) rotate(3deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

@keyframes block-shake {
  0%,
  100% {
    transform: translateX(0) scale(1);
  }
  30% {
    transform: translateX(-4px) scale(1.05);
  }
  60% {
    transform: translateX(4px) scale(0.96);
  }
}

.tile.ice-hit .ice-overlay {
  animation: ice-crack 0.2s ease;
}

.tile.ice-break::after {
  content: '';
  position: absolute;
  z-index: 6;
  inset: 6%;
  border: 4px solid rgba(218, 250, 255, .95);
  clip-path: polygon(50% 0, 61% 35%, 100% 18%, 72% 51%, 100% 82%, 61% 65%, 50% 100%, 39% 65%, 0 82%, 28% 51%, 0 18%, 39% 35%);
  background: rgba(132, 222, 255, .26);
  filter: drop-shadow(0 0 7px #dffaff);
  animation: ice-break-final 170ms ease-out both;
}

@keyframes ice-break-final {
  0% { opacity: .25; transform: scale(.72) rotate(-8deg); }
  45% { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 0; transform: scale(1.32) rotate(8deg); }
}

@keyframes ice-crack {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile.block-break .block-img,
  .tile.ice-break::after { animation: none; }
}

.tile[data-special] .gem {
  filter: drop-shadow(0 0 5px rgba(255, 213, 106, 0.85))
    drop-shadow(0 3px 3px rgba(59, 42, 85, 0.22));
}

.tile.spawn-special .gem {
  animation: spawn-pop 0.28s ease;
}

@keyframes spawn-pop {
  from {
    transform: scale(0.3);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.win-stars {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(6px, 2cqw, 14px);
  position: relative;
  z-index: 3;
  min-height: clamp(56px, 12cqh, 88px);
}

.win-star {
  width: clamp(44px, 12cqw, 62px);
  height: auto;
  transform: scale(0);
  transform-origin: center bottom;
}

.win-star.is-mid {
  width: clamp(56px, 16cqw, 78px);
}

.win-star.is-left {
  transform: rotate(20deg) scale(0);
}

.win-star.is-right {
  transform: rotate(-20deg) scale(0);
}

.win-star:not(.is-earned) {
  transform: scale(0.82);
  opacity: 0.4;
  filter: grayscale(1);
}

.win-overlay.is-open .win-star.is-earned.is-left {
  animation: win-star-pop 0.83s cubic-bezier(0.18, 1.4, 0.32, 1) both;
  animation-delay: 0.2s;
}

.win-overlay.is-open .win-star.is-earned.is-mid {
  animation: win-star-pop 0.83s cubic-bezier(0.18, 1.4, 0.32, 1) both;
  animation-delay: 0.4s;
}

.win-overlay.is-open .win-star.is-earned.is-right {
  animation: win-star-pop 0.83s cubic-bezier(0.18, 1.4, 0.32, 1) both;
  animation-delay: 0.8s;
}

@keyframes win-star-pop {
  0% { transform: scale(0); }
  44% { transform: scale(1); }
  52% { transform: scale(1.34, 1.6); }
  63% { transform: scale(1.06, 0.82); }
  100% { transform: scale(1); }
}

.win-overlay.is-open .win-star.is-earned.is-left {
  animation-name: win-star-pop-left;
}
.win-overlay.is-open .win-star.is-earned.is-right {
  animation-name: win-star-pop-right;
}

@keyframes win-star-pop-left {
  0% { transform: rotate(20deg) scale(0); }
  44% { transform: rotate(20deg) scale(1); }
  52% { transform: rotate(20deg) scale(1.34, 1.6); }
  63% { transform: rotate(20deg) scale(1.06, 0.82); }
  100% { transform: rotate(20deg) scale(1); }
}

@keyframes win-star-pop-right {
  0% { transform: rotate(-20deg) scale(0); }
  44% { transform: rotate(-20deg) scale(1); }
  52% { transform: rotate(-20deg) scale(1.34, 1.6); }
  63% { transform: rotate(-20deg) scale(1.06, 0.82); }
  100% { transform: rotate(-20deg) scale(1); }
}

.win-sparks {
  position: absolute;
  top: 8%;
  left: 50%;
  width: min(80%, 280px);
  height: 22%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 4;
}

.win-sparks img {
  position: absolute;
  width: 18px;
  opacity: 0;
}

.win-overlay.is-open .win-sparks img {
  animation: win-spark 1.4s ease-out both;
}

.win-sparks img:nth-child(1) { left: 12%; top: 40%; animation-delay: 0.22s; }
.win-sparks img:nth-child(2) { left: 46%; top: 8%; animation-delay: 0.42s; }
.win-sparks img:nth-child(3) { left: 78%; top: 36%; animation-delay: 0.82s; }
.win-sparks img:nth-child(4) { left: 28%; top: 70%; animation-delay: 0.3s; }
.win-sparks img:nth-child(5) { left: 62%; top: 58%; animation-delay: 0.55s; }
.win-sparks img:nth-child(6) { left: 88%; top: 12%; animation-delay: 0.9s; }

@keyframes win-spark {
  0% { opacity: 0; transform: translateY(8px) scale(0.4); }
  25% { opacity: 1; transform: translateY(-10px) scale(1); }
  100% { opacity: 0; transform: translateY(-36px) scale(0.6); }
}

.win-coins {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  max-width: 100%;
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  min-height: clamp(24px, 4.4cqh, 32px);
}

.win-coins img {
  flex: none;
  width: clamp(20px, 6cqw, 26px);
  height: clamp(20px, 6cqw, 26px);
}

.win-coins b {
  font-family: 'Fredoka', var(--font);
  font-size: clamp(18px, 5.4cqw, 24px);
  color: #e8992f;
  line-height: 1.1;
}

/* —— 全屏胜利层（官方 End Game - Win） —— */
.popup-backdrop.win-overlay {
  padding: 0;
  background: rgba(10, 10, 10, 0.78);
  place-items: stretch;
}

.win-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.8cqh, 10px);
  padding: calc(var(--safe-top) + 10px) 12px calc(var(--safe-bottom) + 14px);
  overflow-x: hidden;
  overflow-y: auto;
}

.win-stage.is-exiting {
  animation: win-stage-exit 190ms ease-in both !important;
  pointer-events: none;
}

@keyframes win-stage-exit {
  to { opacity: 0; transform: translateY(-8px) scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  #popup-pause .btn.is-confirming,
  .win-stage.is-exiting { animation: none !important; }
}

.win-overlay.is-open .win-stage {
  animation: win-fade-in 0.25s ease both;
}

@keyframes win-fade-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.win-fx {
  position: absolute;
  inset: 8% 0 38%;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 0;
}

.win-glow {
  width: min(90%, 420px);
  opacity: 0.45;
  animation: win-glow-pulse 1.58s ease-in-out infinite;
}

.win-shine {
  position: absolute;
  width: min(78%, 360px);
  opacity: 0.35;
  animation: node-spin 6.6s linear infinite;
}

@keyframes win-glow-pulse {
  0%,
  100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.win-mascots {
  position: relative;
  z-index: 1;
  width: min(88%, 340px);
  height: clamp(140px, 26cqh, 220px);
  margin-top: 0;
  flex: 0 1 auto;
}

.wm {
  position: absolute;
  width: 42%;
  object-fit: contain;
  transform-origin: center bottom;
  --pose: rotate(0deg);
  transform: var(--pose);
}

.wm-cat { left: 4%; top: 8%; width: 46%; --pose: rotate(-18deg); }
.wm-bear { left: -2%; top: 34%; width: 44%; --pose: rotate(18deg); }
.wm-bunny { right: 2%; top: 18%; width: 42%; --pose: rotate(-16deg); }
.wm-frog { left: 28%; bottom: -4%; width: 38%; --pose: rotate(1deg); }
.wm-chick { right: 18%; bottom: 2%; width: 32%; --pose: rotate(8deg); }

.win-overlay.is-open .wm-cat { animation: win-mascot-pop 0.67s ease both; }
.win-overlay.is-open .wm-bunny { animation: win-mascot-pop 0.67s ease both; animation-delay: 0.1s; }
.win-overlay.is-open .wm-bear { animation: win-mascot-pop 0.67s ease both; animation-delay: 0.18s; }
.win-overlay.is-open .wm-frog { animation: win-mascot-pop 0.67s ease both; animation-delay: 0.27s; }
.win-overlay.is-open .wm-chick { animation: win-mascot-pop 0.67s ease both; animation-delay: 0.32s; }

@keyframes win-mascot-pop {
  0% { transform: var(--pose) scale(0); }
  55% { transform: var(--pose) scale(1.22); }
  100% { transform: var(--pose) scale(1); }
}

.win-headline {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(88%, 300px);
  height: clamp(36px, 7cqh, 52px);
  margin-top: -22px;
  flex: 0 0 auto;
}

.win-headline .flag-tail:first-child {
  transform: scaleX(-1);
}

.win-headline .flag-text {
  flex: 1;
  height: 100%;
  display: grid;
  place-items: center;
  background: url('../../assets/ui/popups/flag-center.png') center / 100% 100% no-repeat;
  color: #fff;
  font-weight: 700;
  font-size: clamp(18px, 5.2cqw, 24px);
  text-shadow: 0 2px 0 rgba(59, 42, 85, 0.35);
}

.win-score-pill {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 16px;
  background: #fff7e8;
  box-shadow: inset 0 0 0 3px #f2d7a8, 0 4px 0 #e0b56a;
  color: #00abc8;
  font-weight: 700;
}

.win-score-pill b {
  font-family: 'Fredoka', var(--font);
  font-size: clamp(18px, 5.2cqw, 24px);
  color: #00e447;
}

.win-efficiency {
  position: relative;
  z-index: 3;
  margin: -2px 0 0;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(35, 83, 119, .48);
  color: #fff5ae;
  font-size: clamp(10px, 2.8cqw, 13px);
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(23, 42, 77, .55);
}

.win-overlay.is-open .win-score-pill { animation: result-step-in 360ms 420ms ease-out both; }
.win-overlay.is-open .win-efficiency { animation: result-step-in 360ms 570ms ease-out both; }
.win-overlay.is-open .win-coins { animation: result-step-in 360ms 720ms ease-out both; }

@keyframes result-step-in {
  from { opacity: 0; transform: translateY(8px) scale(.9); }
  to { opacity: 1; transform: none; }
}

.win-unlock {
  position: relative;
  z-index: 3;
  width: min(90%, 340px);
  padding: 14px 8px 8px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 250, 222, 0.98), rgba(255, 224, 168, 0.98));
  box-shadow: inset 0 0 0 3px #fff8dd, 0 4px 0 #d49b58, 0 8px 20px rgba(33, 18, 72, 0.28);
  flex: 0 0 auto;
  margin-top: 8px;
}

.win-unlock[hidden] {
  display: none;
}

.unlock-ribbon {
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  min-width: 116px;
  padding: 4px 16px 6px;
  border-radius: 8px 8px 14px 14px;
  background: linear-gradient(180deg, #ff6fa9, #e94782);
  box-shadow: 0 3px 0 #b92e66;
  color: #fff;
  text-align: center;
  font-size: clamp(12px, 3.3cqw, 15px);
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(110, 27, 67, 0.35);
}

.unlock-card-list {
  display: grid;
  gap: 5px;
}

.unlock-card {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  text-align: left;
}

.unlock-icon {
  flex: 0 0 auto;
  width: clamp(38px, 10cqw, 48px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #7ee2ff, #4aa8e8);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.7), 0 2px 0 #317bb4;
}

.unlock-card.is-partner .unlock-icon { background: linear-gradient(180deg, #ffb5dc, #ef72ae); box-shadow: inset 0 2px 3px rgba(255,255,255,.7), 0 2px 0 #c34f88; }
.unlock-card.is-prop .unlock-icon { background: linear-gradient(180deg, #ffe67d, #f4ae3f); box-shadow: inset 0 2px 3px rgba(255,255,255,.7), 0 2px 0 #cb812c; }

.unlock-icon img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.unlock-copy {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}

.unlock-copy b {
  color: #684199;
  font-size: clamp(13px, 3.5cqw, 16px);
}

.unlock-copy small {
  margin-top: 2px;
  color: #8a5d49;
  font-size: clamp(9px, 2.5cqw, 11px);
}

.win-overlay.is-open .win-unlock:not([hidden]) {
  animation: unlock-card-pop 0.52s 0.62s cubic-bezier(.2,1.5,.45,1) both;
}

@keyframes unlock-card-pop {
  from { opacity: 0; transform: translateY(12px) scale(.72); }
  to { opacity: 1; transform: none; }
}

.win-goals {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: clamp(8px, 3cqw, 14px);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(16,73,108,.38);
}

.win-goal {
  position: relative;
  width: clamp(38px, 10cqw, 48px);
  aspect-ratio: 1;
  border-radius: 14px;
  background: rgba(0, 80, 114, 0.7);
  display: grid;
  place-items: center;
}

.win-goal > img:first-child {
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.win-check {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 34% !important;
  height: 34% !important;
  padding: 2px;
  border-radius: 50%;
  background: #55c875;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.win-goal-count {
  position: absolute;
  bottom: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #ff6b6b;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

.win-btns {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: clamp(12px, 4cqw, 22px);
  padding-top: 4px;
}

.win-btns .circle-btn {
  width: clamp(52px, 15cqw, 72px);
}

.win-action {
  display: grid;
  justify-items: center;
  gap: 2px;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 2px 2px rgba(30, 54, 85, .5);
}

.win-action small { font-size: clamp(10px, 2.8cqw, 13px); }
.win-action.is-primary small { color: #fff6a3; }
.win-action.is-primary .circle-btn { animation: win-next-pulse 1.8s 1.2s ease-in-out infinite; }

@keyframes win-next-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.win-fly-coin {
  position: absolute;
  z-index: 8;
  left: 0;
  top: 0;
  width: clamp(18px, 5cqw, 25px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(92, 54, 24, .32));
  animation: win-coin-gather 760ms var(--win-coin-delay) cubic-bezier(.2,.72,.25,1) both;
}

.win-coins.is-bumped { animation: win-coin-bump 380ms cubic-bezier(.2,1.45,.35,1); }

@keyframes win-coin-gather {
  0% { opacity: 0; transform: translate(var(--win-start-x), var(--win-start-y)) scale(.45) rotate(0); }
  20% { opacity: 1; }
  55% { transform: translate(var(--win-end-x), calc(var(--win-end-y) - 42px)) scale(1.05) rotate(220deg); }
  100% { opacity: 0; transform: translate(var(--win-end-x), var(--win-end-y)) scale(.55) rotate(520deg); }
}

@keyframes win-coin-bump { 45% { transform: scale(1.18); } }

.pause-status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  width: 100%;
  margin: 4px 0 10px;
  padding: 10px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(230,243,255,.88));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 3px 8px rgba(53,60,105,.15);
  color: #61718d;
  font-size: clamp(11px, 3.2cqw, 14px);
}

.pause-status b { grid-row: 1 / span 2; align-self: center; color: #7046a1; font-size: 1.16em; }
.pause-status span { text-align: left; font-weight: 700; }
.pause-status strong { color: #ef5c96; }

@media (prefers-reduced-motion: reduce) {
  .win-action.is-primary .circle-btn,
  .win-coins.is-bumped { animation: none; }
  .win-fly-coin { display: none; }
}

.win-close {
  position: absolute;
  top: calc(var(--safe-top) + 8px);
  right: calc(var(--safe-right) + 8px);
  z-index: 5;
  width: clamp(36px, 10cqw, 48px);
}

/* —— 关卡目标弹窗（官方 Start Game / Level Goal）—— */
.goal-stars {
  display: flex;
  justify-content: center;
  gap: clamp(4px, 2cqw, 10px);
  margin-bottom: clamp(2px, 1cqh, 6px);
}

.goal-stars img {
  width: clamp(30px, 10.5cqw, 46px);
  height: clamp(30px, 10.5cqw, 46px);
  filter: drop-shadow(0 3px 4px rgba(59, 42, 85, 0.28));
}

.goal-level-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  margin: -2px 0 2px;
  color: #536688;
  font-size: clamp(11px, 3.1cqw, 14px);
}

.goal-level-meta b { color: #5b3e8f; font-size: 1.08em; }
.goal-level-meta span { font-weight: 700; }
.goal-level-meta i {
  padding: 2px 8px;
  border-radius: 999px;
  background: #77cfe8;
  color: #fff;
  font-style: normal;
  font-weight: 800;
}
.goal-level-meta i.is-spike,
.goal-level-meta i.is-exam,
.goal-level-meta i.is-pre-exam { background: linear-gradient(180deg, #ff8a79, #e8546f); }
.goal-level-meta i.is-breather { background: linear-gradient(180deg, #8fe28c, #53b96c); }
.goal-level-meta i.is-combo { background: linear-gradient(180deg, #a995ef, #725ac4); }

.goal-moves-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff91bd, #ea5f9e);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 2px 0 #bd3e79;
  color: #fff;
  font-weight: 800;
}

.goal-moves-pill b {
  font-family: 'Fredoka', var(--font);
  font-size: clamp(16px, 4.5cqw, 20px);
}

.goal-learning {
  margin: 0;
  padding: 5px 12px;
  border: 2px solid rgba(255, 213, 106, 0.9);
  border-radius: 999px;
  background: #fff8df;
  color: #6b4b2a;
  font-size: clamp(11px, 1.7cqh, 14px);
  font-weight: 700;
}

.goal-partner {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 6px;
  border-radius: 14px;
  background: rgba(126, 200, 255, 0.2);
  color: var(--ink-soft);
  font-size: clamp(11px, 1.7cqh, 14px);
}

.goal-partner > strong { text-align: center; color: #52769f; }
.goal-partner-options { display: flex; gap: 5px; overflow-x: auto; padding: 1px; scrollbar-width: none; }
.goal-partner-options::-webkit-scrollbar { display: none; }
.goal-partner-option {
  display: flex;
  flex: 1 0 108px;
  align-items: center;
  gap: 4px;
  min-height: 46px;
  padding: 4px 6px;
  border: 2px solid rgba(90, 142, 184, .26);
  border-radius: 12px;
  background: rgba(255,255,255,.68);
  color: var(--ink-soft);
}
.goal-partner-option.is-selected {
  border-color: #ffb536;
  background: #fff6c9;
  box-shadow: 0 2px 0 #df9c2f, 0 0 0 2px rgba(255,255,255,.8) inset;
  transform: translateY(-1px);
}
.goal-partner-option small { font-size: 9px; color: #68819b; white-space: nowrap; }

.goal-partner img {
  width: clamp(28px, 4.2cqh, 38px);
  height: clamp(28px, 4.2cqh, 38px);
  object-fit: contain;
}

.goal-partner-option span {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.2;
}

/* 目标动物摆在深色圆角条上（官方 Background - Inner Shadow - Blue Dark） */
.dark-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 3cqw, 16px);
  padding: clamp(8px, 2.4cqh, 14px) clamp(10px, 4cqw, 18px);
  border-radius: clamp(14px, 4cqw, 20px);
  background: linear-gradient(#3a5b86, #2f4f78);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.strip-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.strip-item img {
  width: clamp(30px, 9cqw, 42px);
  height: clamp(30px, 9cqw, 42px);
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.strip-item b {
  font-family: 'Fredoka', var(--font);
  font-size: clamp(15px, 4.6cqw, 20px);
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

.goal-unlock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 214, 106, 0.22);
  color: #5a3d12;
  font-size: clamp(12px, 3.4cqw, 14px);
  font-weight: 700;
}

.goal-unlock img {
  width: clamp(28px, 8cqw, 36px);
  height: clamp(28px, 8cqw, 36px);
  object-fit: contain;
}

/*
  关前展示身上的道具（官方在目标弹窗底部也列可用道具）。
  固定按道具数量分列、铺满一行：宽度不够时整排一起缩小，
  绝不换行——换行会多占一截高度，还会剩个落单的在第二行。
*/
.goal-props {
  display: grid;
  grid-template-columns: repeat(var(--cols, 6), 1fr);
  gap: clamp(3px, 1.4cqw, 8px);
  width: 100%;
  justify-items: center;
  /* 数量角标探出格子下沿，留出这一截免得被裁掉、也免得撑出滚动条 */
  padding-bottom: clamp(3px, 1cqw, 6px);
}

.goal-prop {
  position: relative;
  width: 100%;
  max-width: clamp(34px, 11cqw, 48px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(59, 42, 85, 0.08);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
}

.goal-prop img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.goal-prop b {
  position: absolute;
  right: -4%;
  bottom: -6%;
  min-width: clamp(16px, 5cqw, 22px);
  padding: 0 4px;
  border-radius: 999px;
  background: #ff7eb6;
  color: #fff;
  font-family: 'Fredoka', var(--font);
  font-size: clamp(11px, 3.2cqw, 14px);
  line-height: clamp(16px, 5cqw, 22px);
  box-shadow: 0 2px 4px rgba(59, 42, 85, 0.3);
}

.goal-prop b.is-zero {
  background: #b6a9cb;
}

.goal-prop.is-recommended {
  background: rgba(255, 220, 92, .28);
  box-shadow: inset 0 0 0 3px #ffd95c, 0 0 9px rgba(255, 195, 55, .55);
}

.goal-prop small {
  position: absolute;
  left: 50%;
  top: -7px;
  transform: translateX(-50%);
  padding: 1px 5px;
  border-radius: 999px;
  background: #ff735f;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(85,37,48,.25);
}

/* 推荐道具缺货：数量角标变成可点的“去商店”，并提示可直接跳商店 */
.goal-prop.is-out {
  cursor: pointer;
  animation: goal-prop-out-hint 1.4s ease-in-out infinite;
}

.goal-prop.is-out b.is-zero {
  background: #ff8f70;
  font-size: clamp(9px, 2.6cqw, 11px);
  padding: 0 6px;
}

.goal-prop.is-heat b.is-zero {
  box-shadow: 0 0 0 3px rgba(255, 143, 112, .35);
}

@keyframes goal-prop-out-hint {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.goal-prop-tip {
  margin: 6px 0 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 143, 112, .16);
  color: #8c3a24;
  font-size: clamp(11px, 3cqw, 13px);
  font-weight: 700;
  text-align: center;
}

.goal-prop-tip.is-heat {
  background: rgba(255, 143, 112, .28);
  color: #7c2d16;
  animation: goal-prop-tip-pulse 1.2s ease-in-out infinite;
}

@keyframes goal-prop-tip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .72; }
}

@media (prefers-reduced-motion: reduce) {
  .moves-radial.is-critical .mr-badge { animation: none; }
  .goal-prop.is-out, .goal-prop-tip.is-heat { animation: none; }
}

/* 失败页直接展示尚缺目标，避免玩家只看到分数却不知道为何失败。 */
.lose-remaining {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.lose-goal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 86px;
  padding: 5px 9px 5px 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffaf0, #f0e1c9);
  box-shadow: inset 0 0 0 2px #fff, 0 2px 0 #c8a981;
}

.lose-goal img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.lose-goal b {
  color: #6d4d79;
  font-size: clamp(11px, 3.2cqw, 14px);
  white-space: nowrap;
}

.lose-tip {
  margin: 2px 0 0;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(87, 111, 161, .12);
  color: #66577e;
  font-size: clamp(11px, 3.1cqw, 13px);
  font-weight: 700;
  text-align: center;
}

.lose-tip.is-near {
  background: #fff5c9;
  color: #a05b35;
  box-shadow: inset 0 0 0 2px rgba(255, 200, 77, .45);
}

.ad-revive.is-soft {
  opacity: .72;
  filter: saturate(.72);
  transform: scale(.96);
}

.lose-tip.is-revive-strong {
  background: linear-gradient(180deg, #fff1a9, #ffd778);
  color: #a34c31;
  box-shadow: inset 0 0 0 2px #fff8ce, 0 3px 8px rgba(190, 101, 44, .2);
}

.ad-revive.is-strong {
  box-shadow: 0 4px 0 #b65a2b, 0 0 0 3px rgba(255, 224, 99, .42), 0 7px 16px rgba(137, 67, 44, .25);
  animation: revive-recommend 1.45s ease-in-out infinite;
}

@keyframes revive-recommend {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  .win-overlay.is-open .win-score-pill,
  .win-overlay.is-open .win-efficiency,
  .win-overlay.is-open .win-coins { animation: none; }
  .ad-revive.is-strong { animation: none; }
}

/* —— 金币商店（余额 + 看广告领币并排一行，下面是滚动列表）—— */
.shop-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.shop-balloons {
  position: absolute;
  z-index: 0;
  left: 8%;
  right: 8%;
  top: -4px;
  height: var(--ear-peek);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: none;
}

.shop-balloons img {
  width: clamp(28px, 10cqw, 44px);
  transform-origin: 50% 100%;
  animation: shop-balloon-sway 3.4s ease-in-out infinite;
}
.shop-balloons img:nth-child(2) { animation-delay: -1.1s; }
.shop-balloons img:nth-child(3) { animation-delay: -2.2s; }

@keyframes shop-balloon-sway {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-8px) rotate(4deg); }
}

.shop-coins {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px clamp(8px, 3cqw, 12px);
  border-radius: 999px;
  background: rgba(255, 213, 106, 0.35);
}

.shop-coins img {
  width: clamp(18px, 5cqw, 22px);
  height: clamp(18px, 5cqw, 22px);
}

.shop-coins b {
  font-family: 'Fredoka', var(--font);
  font-size: clamp(15px, 4.4cqw, 18px);
  color: #e8992f;
}

/* —— 广告激励位通用样式 —— */
.ad-badge {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 16px;
  padding: 0 4px;
  border-radius: 5px;
  background: linear-gradient(180deg, #ff8a5c, #f2685f);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.ad-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  color: #6a3d00;
  background: linear-gradient(180deg, #fff0c2, #ffd873);
  box-shadow: 0 4px 0 #e0a92c, 0 6px 12px rgba(59, 42, 85, 0.2);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.ad-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #e0a92c, 0 3px 6px rgba(59, 42, 85, 0.2);
}

.ad-btn img {
  width: clamp(20px, 3cqh, 26px);
  height: clamp(20px, 3cqh, 26px);
  object-fit: contain;
}

.ad-btn-text {
  font-size: clamp(13px, 1.9cqh, 16px);
}

.ad-btn-text b {
  font-family: 'Fredoka', var(--font);
  color: #e8992f;
}

.ad-revive {
  background: linear-gradient(180deg, #bff0c6, #7fdc93);
  box-shadow: 0 4px 0 #46b061, 0 6px 12px rgba(59, 42, 85, 0.2);
  color: #14532d;
  margin-bottom: 4px;
}

.ad-revive:active {
  box-shadow: 0 2px 0 #46b061, 0 3px 6px rgba(59, 42, 85, 0.2);
}

/* 商店列表就是 .popup-body，只是要靠上铺满而不是居中 */
/*
  商店列表照官方 Scroll View - List：深色圆角容器裹住，
  每行是一颗青色圆角药丸（Circle - Sliced (Rounded Square) + Inner Glow），
  左边圆形图标底、右边亮面按钮。
*/
.shop-list {
  gap: clamp(7px, 2cqw, 10px);
  align-items: stretch;
  justify-content: flex-start;
  padding: clamp(7px, 2cqw, 11px);
  border-radius: clamp(14px, 4cqw, 20px);
  background: #1f3a5c;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(255, 255, 255, 0.1);
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  scroll-padding-block: 8px;
}

/* 深色容器里的滚动条也换成浅色，不然在深底上看不见 */
.shop-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
}

.shop-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
}

.shop-list {
  scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.08);
}

/* 领币按钮挤在余额旁边，缩成一小条 */
.shop-head .ad-coins {
  width: auto;
  flex: none;
  gap: 5px;
  padding: 6px clamp(8px, 3cqw, 12px);
  border-radius: 999px;
}

.shop-item {
  display: flex;
  align-items: center;
  gap: clamp(7px,2.4cqw,11px);
  padding: 8px clamp(7px,2.5cqw,10px);
  border-radius: 999px;
  background: linear-gradient(180deg, #2f9fc4, #2a86ad);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.22), inset 0 3px 6px rgba(255, 255, 255, 0.16),
    0 2px 5px rgba(0, 0, 0, 0.22);
}

.shop-item button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (pointer: coarse) {
  .shop-buy { min-height: 44px; min-width: 72px; }
  .shop-ad { min-height: 36px; }
  .shop-item:focus-within { outline: none; }
  .popup-backdrop.is-open .shop-item { animation-duration: .24s; }
}

/* 星愿成就 */
.progression-popup { width:min(94%,370px); }
.progression-popup .popup-panel { height:min(82cqh,650px); max-height:calc(100cqh - 54px); }
.star-summary { flex:none; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; margin:0 2px 3px; padding: 9px 14px; border-radius: 18px; background: linear-gradient(180deg,#fff8d4,#ffe49a); box-shadow: inset 0 0 0 3px #fff,0 3px 0 #d4a44d; color:#684199; }
.star-summary img { grid-row: span 2; width: 54px; filter: drop-shadow(0 3px 3px rgba(90,54,32,.2)); }
.star-summary span { font: 700 22px 'Fredoka',var(--font); }
.star-summary small { font-size: 10px; color:#8a5d49; }
.achievement-list {
  flex:1 1 0;
  min-height:0;
  justify-content:flex-start;
  align-items:stretch;
  gap:8px;
  padding:8px 10px 14px 4px;
  scroll-padding-block:8px 14px;
  touch-action:pan-y;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  scrollbar-gutter:stable;
  mask-image:linear-gradient(to bottom,transparent 0,#000 8px,#000 calc(100% - 10px),transparent 100%);
}
.achievement-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding:8px; border-radius:18px; background:linear-gradient(180deg,#e8eff7,#cbd8e7); box-shadow:inset 0 0 0 2px #fff,0 2px 4px rgba(38,52,84,.18); }
.achievement-item.is-ready { background:linear-gradient(180deg,#fff7cf,#ffe399); }
.achievement-item.is-claimed { opacity:.68; }
.achievement-badge { position:relative; width:44px; height:44px; display:grid; place-items:center; }
.achievement-badge img { width:100%; }
.achievement-badge b { position:absolute; color:#8d5826; font:700 11px 'Fredoka',var(--font); text-shadow:0 1px #fff; }
.achievement-copy { display:grid; min-width:0; text-align:left; }
.achievement-copy > b { color:#684199; font-size:13px; }
.achievement-copy small { color:#795f72; font-size:9px; }
.achievement-copy i { height:5px; margin-top:4px; overflow:hidden; border-radius:999px; background:#7a8da7; }
.achievement-copy i span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#64d99b,#ffd75c); }
.achievement-item button { max-width:105px; min-height:40px; padding:5px 8px; border:0; border-radius:12px; background:linear-gradient(180deg,#61dd91,#35b96b); box-shadow:0 3px 0 #238d50; color:#fff; font:700 10px var(--font); touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.achievement-item button:disabled { background:#9aa8b9; box-shadow:0 2px 0 #758497; }
.progression-popup .popup-actions { padding-top:2px; }

@media (pointer:coarse) {
  .achievement-item button { min-width:58px; min-height:44px; }
  .achievement-item:focus-within { outline:none; }
}

@media (max-height:620px) {
  .progression-popup .popup-panel { height:calc(100cqh - 42px); gap:5px; }
  .star-summary { padding-block:6px; }
  .star-summary img { width:44px; }
  .progression-popup .popup-actions .btn { min-height:48px; }
}

/* 无尽肉鸽模式 */
.endless-popup { width:min(92%,360px); }
.endless-run-hud {
  position: absolute;
  z-index: 6;
  top: calc(var(--safe-top) + clamp(88px, 13cqh, 112px));
  left: 50%;
  width: min(78%, 300px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 8px;
  padding: 5px 10px;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 14px;
  background: rgba(63, 48, 112, .88);
  box-shadow: 0 3px 8px rgba(38,31,72,.24);
  color: #fff;
  transform: translateX(-50%);
  pointer-events: none;
}
.endless-run-hud[hidden] { display:none; }
.endless-run-hud b { color:#ffe77d; font-size:11px; white-space:nowrap; }
.endless-run-hud > span { overflow:hidden; color:#d9f6ff; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.endless-run-hud small { grid-column:1 / -1; overflow:hidden; color:#ffcfe4; font-size:8px; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.endless-hero { display:flex; align-items:center; gap:12px; padding:12px; border-radius:20px; background:linear-gradient(145deg,#dff8ff,#b9dcff); box-shadow:inset 0 0 0 3px #fff,0 4px 0 #75a9d6; text-align:left; }
.endless-hero > img { width:72px; filter:drop-shadow(0 4px 4px rgba(48,41,88,.25)); }
.endless-hero div { display:grid; gap:4px; }
.endless-hero b { color:#684199; font-size:17px; }
.endless-hero small { color:#52728f; line-height:1.35; }
.endless-stats { display:flex; justify-content:center; gap:10px; margin:10px 0 4px; }
.endless-stats span { padding:6px 12px; border-radius:999px; background:#fff3c7; color:#8a5d49; }
.endless-stats b { color:#e05d8d; font-family:'Fredoka',var(--font); }
.endless-rule { margin:7px 0; color:#66527e; font-size:12px; }
#btn-endless-start:disabled { filter:grayscale(1); opacity:.62; }
.endless-choice-popup { width:min(92%,370px); }
.endless-floor-result { margin:0 0 8px; color:#704f83; font-weight:700; }
.endless-floor-reward { margin:-3px 0 7px; color:#bd6b2f; font-size:11px; font-weight:800; }
.endless-owned { margin:0 0 8px; padding:5px 8px; border-radius:10px; background:rgba(103,74,137,.1); color:#775a89; font-size:9px; line-height:1.3; }
.endless-choice-list { display:grid; gap:8px; }
.endless-choice-list button { display:grid; grid-template-columns:48px 1fr; grid-template-rows:auto auto; gap:1px 8px; align-items:center; padding:10px 12px; border:2px solid #fff; border-radius:18px; background:linear-gradient(180deg,#fff7cf,#ffd990); box-shadow:0 4px 0 #d09b49; color:#684199; text-align:left; }
.endless-choice-list button i { grid-row:span 2; font-style:normal; font-size:32px; text-align:center; }
.endless-choice-list button b { font-size:15px; }
.endless-choice-list button small { color:#8a5d49; }
.endless-retire { margin-top:12px; border:0; background:transparent; color:#936f91; text-decoration:underline; font:12px var(--font); }

.endless-fail-summary {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  padding:9px;
  border-radius:15px;
  background:linear-gradient(180deg,#e4f4ff,#bedcff);
  box-shadow:inset 0 0 0 2px #fff,0 3px 0 #7da9d3;
  color:#664d81;
  text-align:center;
}
.endless-fail-summary[hidden] { display:none; }
.endless-fail-summary > b { grid-column:1/-1; color:#d85987; font-size:17px; }
.endless-fail-summary > span { padding:4px 2px; border-radius:9px; background:rgba(255,255,255,.58); font-size:10px; font-weight:800; }
.endless-fail-summary > small { grid-column:1/-1; color:#5f7596; font-size:9px; }
.endless-fail-summary.is-record { background:linear-gradient(180deg,#fff4ad,#ffd36f); box-shadow:inset 0 0 0 2px #fffbd5,0 3px 0 #c78939,0 0 14px rgba(255,210,71,.42); }
.endless-fail-summary.is-record > b { animation:endless-record-pop 1.1s ease-in-out infinite; }
@keyframes endless-record-pop { 50% { transform:scale(1.08); color:#f04470; } }

@media (prefers-reduced-motion:reduce) {
  .endless-fail-summary.is-record > b { animation:none; }
}

/* 官方列表是双色交替的，隔行换个青调免得一片糊 */
.shop-item:nth-child(even) {
  background: linear-gradient(180deg, #37b3cf, #2f97b8);
}

.shop-item.is-locked {
  background: linear-gradient(180deg, #60758d, #495e77);
}

.shop-item.is-locked .shop-item-icon,
.shop-item.is-locked .spark {
  filter: grayscale(1) brightness(0.72);
}

.shop-item.is-locked .shop-buy,
.shop-item.is-locked .shop-ad {
  opacity: 0.42;
  cursor: default;
  filter: grayscale(1);
}

.popup-backdrop.is-open .shop-item {
  animation: shop-row-enter 0.42s cubic-bezier(0.18, 0.9, 0.25, 1.18) both;
}
.popup-backdrop.is-open .shop-item:nth-child(2) { animation-delay: 45ms; }
.popup-backdrop.is-open .shop-item:nth-child(3) { animation-delay: 90ms; }
.popup-backdrop.is-open .shop-item:nth-child(4) { animation-delay: 135ms; }
.popup-backdrop.is-open .shop-item:nth-child(5) { animation-delay: 180ms; }
.popup-backdrop.is-open .shop-item:nth-child(6) { animation-delay: 225ms; }

@keyframes shop-row-enter {
  from { opacity: 0; transform: translateX(24px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* 图标坐在官方圆形按钮底图上，配几颗 Sparkle */
.shop-item-icon {
  position: relative;
  flex: 0 0 auto;
  width: clamp(42px, 6.4cqh, 54px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 3px 5px rgba(59, 42, 85, 0.25));
}

.shop-item-icon > img:first-child {
  width: 58%;
  height: 58%;
  object-fit: contain;
}

.shop-item-icon .spark {
  position: absolute;
  width: 34%;
  height: 34%;
  object-fit: contain;
  pointer-events: none;
  animation: spark-twinkle 2.2s ease-in-out infinite;
}

.spark-a {
  top: -6%;
  right: -4%;
}

.spark-b {
  bottom: 2%;
  left: -8%;
  width: 24%;
  height: 24%;
  animation-delay: 1.1s;
}

@keyframes spark-twinkle {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.shop-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

.shop-name {
  font-weight: 700;
  font-size: clamp(14px, 2cqh, 17px);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.shop-desc {
  font-size: clamp(10px, 1.4cqh, 12px);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.25;
}

.shop-have {
  font-size: clamp(11px, 1.5cqh, 13px);
  color: rgba(255, 255, 255, 0.78);
}

.shop-have b {
  font-family: 'Fredoka', var(--font);
}

.shop-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 0 0 auto;
  align-items: stretch;
  width:clamp(82px,24cqw,102px);
}

.shop-lock-badge {
  flex:0 0 auto;
  width:clamp(68px,20cqw,86px);
  min-height:52px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:2px;
  padding:5px 6px;
  border:2px solid rgba(255,255,255,.28);
  border-radius:16px;
  background:rgba(30,48,72,.38);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.22);
  color:#e9f3ff;
  font-size:10px;
  font-weight:700;
}

.shop-lock-badge img { width:22px; height:22px; object-fit:contain; opacity:.78; }

/* 亮面按钮：底色渐变 + 官方 Lights 高光贴面，跟 demo 里的 Button 一个观感 */
.shop-buy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width:0;
  padding: 7px clamp(8px,3cqw,14px);
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd56a, #f4b52f);
  box-shadow: 0 4px 0 #d89a20, 0 6px 10px rgba(59, 42, 85, 0.25);
  color: #6a3d00;
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
  transition: transform 0.1s ease;
}

.shop-buy::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../../assets/ui/deco/lights.png') center / 100% 100% no-repeat;
  opacity: 0.55;
  pointer-events: none;
}

.shop-buy > * {
  position: relative;
  z-index: 1;
}

/* 每行的"看广告免费+1" */
.shop-ad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8f6a, #f2685f);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s ease;
  white-space:nowrap;
}

.shop-ad .ad-badge {
  min-width: 22px;
  height: 14px;
  font-size: 9px;
}

.shop-ad:active {
  transform: scale(0.94);
}

.shop-buy img {
  width: 18px;
  height: 18px;
}

.shop-buy b {
  font-family: 'Fredoka', var(--font);
  font-size: 15px;
}

.shop-buy:active {
  box-shadow: 0 2px 0 #d89a20, 0 3px 6px rgba(59, 42, 85, 0.25);
}

.shop-buy.is-cant {
  filter: grayscale(0.5);
  opacity: 0.7;
}

.shop-buy.shake {
  animation: shop-shake 0.3s ease;
}

@keyframes shop-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@container stage (max-width:340px) {
  .shop-item-icon { width:42px; }
  .shop-name { font-size:13px; }
  .shop-desc { font-size:9px; }
  .shop-have { font-size:10px; }
  .shop-actions { width:78px; }
  .shop-buy { padding-inline:6px; }
  .shop-ad { gap:2px; padding-inline:4px; font-size:10px; }
  .shop-lock-badge { width:62px; padding-inline:3px; }
}

/* ==========================================================================
   屏幕比例适配
   以舞台自身宽高比为准（container query），而不是看设备是不是"手机"。
   矮屏(9:16 及更矮)：压缩留白、砍掉次要文案，保住棋盘。
   长屏(9:21 / 9:24)：把多出来的高度还给棋盘和吉祥物。
   ========================================================================== */

/* 9:16 = 0.5625，比这更宽（更矮）的走紧凑排版 */
@container stage (min-aspect-ratio: 9 / 17) {
  .screen-game .hint {
    display: none;
  }

  .logo-block {
    margin-top: 0;
  }

  .home-ground-space {
    flex-basis: clamp(80px, 23cqh, 190px);
  }

  .dm-panda {
    width: 34cqw;
    bottom: -16cqw;
  }

  .dm-cat {
    width: 21cqw;
    bottom: 12cqw;
  }

  .dm-chicken {
    width: 9cqw;
    bottom: 44cqw;
  }

  .dt-front {
    width: 32cqw;
  }

  .dt-back {
    width: 24cqw;
  }

  .deco-balloon {
    display: none;
  }
}

/* 极矮（近 4:3 平板竖屏或横屏残留）时进一步收窄棋盘两侧留白 */
@container stage (min-aspect-ratio: 3 / 4) {
  .board-frame {
    padding: 4px 14px;
  }

  .score-row {
    gap: 6px;
  }
}

/* 9:20 以上的长屏：宽度是瓶颈，把两侧留白收窄换棋盘更大 */
@container stage (max-aspect-ratio: 9 / 20) {
  .screen {
    padding-left: calc(var(--safe-left) + clamp(8px, 2.6cqw, 14px));
    padding-right: calc(var(--safe-right) + clamp(8px, 2.6cqw, 14px));
  }

  /* 横向留白只保留给面板描边，其余全给棋盘 */
  .board-frame {
    padding: clamp(10px, 2.4cqh, 22px) 11px;
  }

  .logo-block {
    margin-top: clamp(20px, 7cqh, 90px);
  }
}

/* 手机小屏：顶部与底部各自成完整工具条，避免按钮挤到角落或遮住棋盘。 */
@media (max-width: 390px) {
  .hud-strip {
    gap: 6px;
    padding: 5px 8px;
  }
  .moves-radial { width: clamp(52px, 8.2cqh, 68px); }
  .goals-row { gap: 5px; }
  .goal-chip { width: clamp(28px, 4.25cqh, 37px); }
  .goal-count { right: -4px; bottom: -4px; }
  .hud-btns .icon-btn { width: 32px; height: 32px; }
  .prop-bar { width: calc(100% - 8px); gap: 6px; padding-inline: 6px; }
  .prop-btn { width: clamp(40px, 6.2cqh, 52px); }
  .prop-count { top: -2px; right: -2px; }
}

@media (max-height: 700px) and (orientation: portrait) {
  .screen-game { gap: 4px; }
  .hud-strip { padding-block: 4px; }
  .board-frame { padding-block: 4px; }
  .partner { transform: scale(.9); transform-origin: left center; margin-block: -3px; }
  .prop-bar { min-height: 44px; padding-block: 3px; margin-bottom: 0; }
  .prop-btn { width: 40px; }
  .hint { padding-block: 2px; }

  .win-stage { gap: 3px; padding-top: calc(var(--safe-top) + 5px); padding-bottom: calc(var(--safe-bottom) + 7px); }
  .win-stars { min-height: 42px; }
  .win-star { width: 40px; }
  .win-star.is-mid { width: 51px; }
  .win-mascots { height: 116px; width: min(78%, 285px); }
  .win-headline { height: 34px; margin-top: -16px; }
  .win-score-pill { padding: 3px 13px; }
  .win-coins img { width: 18px; height: 18px; }
  .win-unlock { padding: 12px 7px 6px; }
  .unlock-icon { width: 34px; }
  .win-goal { width: 34px; }
  .win-btns { padding-top: 1px; }
  .win-btns .circle-btn { width: 48px; }
  .win-stage.has-unlock .win-mascots { height: 92px; width: min(70%, 240px); }
  .win-stage.has-unlock .win-stars { min-height: 34px; }
  .win-stage.has-unlock .win-star { width: 34px; }
  .win-stage.has-unlock .win-star.is-mid { width: 43px; }
  .win-stage.has-unlock .win-goals { display: none; }
  .win-stage.has-unlock .win-unlock {
    display: block !important;
    flex: 0 0 auto;
    width: min(92%, 290px);
    min-height: 64px;
  }
}

@media (max-height: 600px) and (orientation: portrait) {
  .win-stage.has-unlock .win-mascots { display: none; }
  .win-stage.has-unlock .win-headline { margin-top: 0; }
  .win-stage.has-unlock .win-unlock {
    z-index: 20;
    min-height: 72px;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    background: linear-gradient(180deg, #fff9d9, #ffdca0) !important;
  }
}

/* ==========================================================================
   横屏提示：本作是竖屏玩法，横过来直接盖一层引导
   ========================================================================== */
.rotate-guard {
  display: none;
}

@media (orientation: landscape) and (max-height: 560px) {
  .rotate-guard {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    gap: 14px;
    align-content: center;
    background: #1a1430;
    color: var(--cream);
    text-align: center;
    padding: 24px;
  }

  .rotate-guard .rotate-icon {
    font-size: 46px;
    animation: rotate-tip 2s ease-in-out infinite;
  }

  .rotate-guard p {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
  }
}

@keyframes rotate-tip {
  0%,
  60%,
  100% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(-90deg);
  }
}

/* ==========================================================================
   桌面调试用的机型预览框（真机上整块不生效，游戏直接铺满视口）
   ========================================================================== */
.preview-bar {
  display: none;
}

@media (min-width: 900px) and (min-height: 620px) {
  html.preview-mode #app {
    background: radial-gradient(circle at 50% 0%, #2a2154, #12102b 70%);
  }

  html.preview-mode .phone-stage {
    width: auto;
    height: min(94dvh, 940px);
    aspect-ratio: var(--preview-ratio, 9 / 19.5);
    border-radius: 38px;
    box-shadow: 0 0 0 10px #241c46, 0 0 0 12px #3b3070, 0 26px 60px rgba(0, 0, 0, 0.55);
  }

  /* 模拟刘海：只在预览里画，真机靠 env() 自己让位 */
  html.preview-mode .phone-stage[data-notch='true']::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 34%;
    height: 26px;
    border-radius: 999px;
    background: #14112b;
    z-index: 100;
    pointer-events: none;
  }

  /* 模拟底部小白条 */
  html.preview-mode .phone-stage[data-homebar='true']::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36%;
    height: 5px;
    border-radius: 999px;
    background: rgba(20, 17, 43, 0.55);
    z-index: 100;
    pointer-events: none;
  }

  html.preview-mode .preview-bar {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cfc6f5;
    font-size: 12px;
    width: 184px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
  }

  html.preview-mode .preview-bar hr {
    width: 100%;
    margin: 4px 0;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.14);
  }

  html.preview-mode .preview-bar strong {
    font-size: 11px;
    letter-spacing: 0.08em;
    opacity: 0.6;
    text-transform: uppercase;
  }

  html.preview-mode .preview-bar button {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 9px;
    cursor: pointer;
    text-align: left;
  }

  html.preview-mode .preview-bar button.is-on {
    background: #6a5ae0;
    border-color: #8f82ff;
    color: #fff;
  }

  html.preview-mode .preview-bar button.debug-action,
  html.preview-mode .preview-debug-row button {
    border-color: rgba(120,215,255,.35);
    background: rgba(55,132,190,.18);
    color: #e6f7ff;
  }

  html.preview-mode .preview-debug-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
  }

  html.preview-mode .preview-debug-row input {
    min-width: 0;
    width: 100%;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    padding: 6px 7px;
    background: rgba(4,8,30,.45);
    color: #fff;
    font: 12px var(--font);
    outline: none;
  }

  html.preview-mode .preview-debug-row input:focus {
    border-color: #8f82ff;
    box-shadow: 0 0 0 2px rgba(143,130,255,.18);
  }

  html.preview-mode .preview-bar button.is-danger {
    border-color: rgba(255,116,139,.58);
    background: rgba(190,45,80,.22);
    color: #ffd9e1;
  }

  html.preview-mode .preview-debug-status {
    min-height: 1.3em;
    color: #9ee7ba;
    font-size: 11px;
    line-height: 1.35;
  }

  html.preview-mode .preview-debug-details {
    width: 100%;
    max-height: 170px;
    margin: 0;
    overflow: auto;
    padding: 7px;
    border-radius: 8px;
    background: rgba(4,8,30,.58);
    color: #cfe8ff;
    font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  html.preview-mode .preview-debug-details[hidden] { display: none; }
}

/* ===== 新手引导 ===== */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.tutorial-dim {
  position: absolute;
  inset: 0;
  background: rgba(26, 20, 48, 0.45);
  animation: tut-fade-in 0.25s ease both;
}

.tutorial-hint {
  z-index: 1001;
}

.tutorial-hint::after {
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: 18px;
  border: 3px solid #ffd56a;
  box-shadow: 0 0 0 4px rgba(255, 213, 106, 0.35), 0 0 18px rgba(255, 213, 106, 0.55);
  animation: tut-pulse 1.1s ease-in-out infinite;
  pointer-events: none;
}

.tutorial-bubble {
  position: absolute;
  z-index: 1002;
  max-width: 240px;
  padding: 10px 16px;
  border-radius: 18px;
  background: #fff8ef;
  border: 3px solid #ffd56a;
  color: #3b2a55;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 8px 22px rgba(59, 42, 85, 0.22);
  white-space: nowrap;
  animation: tut-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.tutorial-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #ffd56a transparent transparent;
}

.tutorial-finger {
  position: absolute;
  z-index: 1003;
  width: 52px;
  height: 58px;
  margin-left: -18px;
  margin-top: -8px;
  pointer-events: none;
  animation: tut-swipe 1.6s ease-in-out infinite;
}

.tutorial-finger.mini {
  width: 36px;
  height: 40px;
  margin: 0;
  animation-duration: 1.4s;
}

.tutorial-finger svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 3px 5px rgba(43, 77, 102, 0.35));
}

.tutorial-card {
  position: absolute;
  z-index: 1004;
  width: min(78vw, 320px);
  padding: 18px 16px 16px;
  border-radius: 24px;
  background: #fff8ef;
  border: 4px solid #7ec8ff;
  box-shadow: 0 14px 34px rgba(59, 42, 85, 0.28);
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: auto;
  animation: tut-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.tutorial-card h4 {
  margin: 0 0 12px;
  font-size: 17px;
  color: #3b2a55;
}

.tutorial-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.tutorial-demo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 16px;
  background: rgba(126, 200, 255, 0.18);
}

.tutorial-demo-row img {
  width: 38px;
  height: 38px;
}

.tutorial-demo-slot {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(126, 200, 255, 0.35);
}

.tutorial-demo-slot img {
  position: absolute;
  left: 0;
  top: 0;
}

.tutorial-demo p {
  margin: 0;
  font-size: 13px;
  color: #5c4a78;
}

.tutorial-demo-result {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #684199;
  font-size: 12px;
  font-weight: 700;
}

.tutorial-demo-result b { color: #ee7b45; font-size: 20px; }
.tutorial-demo-result img { width: 44px; height: 44px; object-fit: contain; animation: tutorial-result-pop 1.25s ease-in-out infinite; }

@keyframes tutorial-result-pop {
  0%, 100% { transform: scale(.92); }
  45% { transform: scale(1.08); }
}

.tutorial-ok {
  appearance: none;
  border: none;
  padding: 11px 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6fdf9c, #4ecb85);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 6px 0 #38a86a, 0 8px 14px rgba(56, 168, 106, 0.25);
  cursor: pointer;
  transition: transform 0.08s ease;
}

.tutorial-ok:active {
  transform: scale(0.94);
}

@keyframes tut-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tut-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.85; }
}

@keyframes tut-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.75); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes tut-swipe {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(var(--tx, 40px), var(--ty, 0)); }
}