/* 伙伴消消岛 · 竖屏 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;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

img,
picture,
canvas,
svg,
video,
button {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: 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-loading {
  background: linear-gradient(180deg, #9fe3ff 0%, #7ec8ff 42%, #6ab6ff 100%);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.loading-panel {
  width: min(78%, 280px);
  text-align: center;
  display: grid;
  gap: 14px;
  justify-items: center;
}

.loading-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(36, 92, 150, 0.22));
  animation: loading-bob 1.6s ease-in-out infinite;
}

.loading-title {
  margin: 0;
  font-size: 1.35rem;
  color: #fff;
  text-shadow: 0 2px 0 rgba(34, 96, 158, 0.35);
}

.loading-bar {
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 2px 4px rgba(36, 92, 150, 0.18);
  overflow: hidden;
}

.loading-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffe56d, #ffb347);
  transition: width 180ms ease-out;
}

.loading-tip {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.92);
}

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

.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;
}

/* 章节全幅主题背景：9:16 原稿，cover + center top 覆盖到约 9:24 */
.screen-game[data-biome] {
  background-color: #89d4ff;
  background-image: none;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.screen-game[data-biome='grass'] {
  background-image: url('../../assets/ui/bg/game-biome-grass.webp');
  background-color: #7ecfff;
}
.screen-game[data-biome='desert'] {
  background-image: url('../../assets/ui/bg/game-biome-desert.webp');
  background-color: #6eb8ef;
}
.screen-game[data-biome='ice'] {
  background-image: url('../../assets/ui/bg/game-biome-ice.webp');
  background-color: #b9e7ff;
}
.screen-game[data-biome='candy'] {
  background-image: url('../../assets/ui/bg/game-biome-candy.webp');
  background-color: #ffd6ec;
}
.screen-game[data-biome='rainbow'] {
  background-image: url('../../assets/ui/bg/game-biome-rainbow.webp');
  background-color: #d6e8ff;
}

/* 底部草地装饰 */
.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;
}
.screen-game[data-biome]::after {
  display: none;
}

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

.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;
  flex: 0 0 clamp(52px, 6.2cqh, 58px);
  width: 100%;
  min-height: clamp(52px, 6.2cqh, 58px);
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink-soft);
  line-height: 1.25;
  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;
  z-index: 3;
  animation: bob 3.4s ease-in-out infinite;
  filter: drop-shadow(0 8px 10px rgba(59, 42, 85, 0.18));
}

/* 首页四角小气球：标题两侧各一、双模式按钮下方两侧各一 */
.db1 {
  width: 11cqw;
  left: 4cqw;
  top: 15cqh;
}

.db2 {
  width: 10.5cqw;
  right: 4cqw;
  top: 13cqh;
  animation-delay: 0.7s;
}

.db3 {
  width: 10cqw;
  left: 6cqw;
  top: 57cqh;
  animation-delay: 1.4s;
}

.db4 {
  width: 9.5cqw;
  right: 5cqw;
  top: 55cqh;
  animation-delay: 2.1s;
}

/* 草地场景：右边树、左边猫 + 熊猫（官方同款站位） */
.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 kept for home layout; old .play-btn art removed */
.play-zone {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}


/* 首页双模式入口：美术按钮自带融合式模式标识，外层只负责呼吸、光圈与文字。 */
.home-mode-row {
  position: relative;
  z-index: 1;
  width: min(92cqw, 500px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(4px, 1.2cqw, 10px);
}

.home-mode-entry {
  position: relative;
  min-width: 0;
  border: 0;
  padding: 0 0 4px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  /* 呼吸动画放在子图上，避免与 :active / 果冻弹抢同一 transform 导致跳帧 */
  transition: transform 0.14s cubic-bezier(0.2, 0.85, 0.25, 1);
  -webkit-tap-highlight-color: transparent;
}

.home-mode-art {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 9px 10px rgba(59, 42, 85, .2));
  pointer-events: none;
  animation: play-pulse 2.2s ease-in-out infinite;
  transform-origin: 50% 58%;
}

.home-mode-entry.is-rogue .home-mode-art { animation-delay: -1.1s; }

.home-mode-shine {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 43%;
  width: 122%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: .48;
  pointer-events: none;
  animation: home-mode-shine-spin 24s linear infinite;
}

.home-mode-entry.is-rogue .home-mode-shine { animation-direction: reverse; }

.home-mode-title {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: -4px;
  color: #5a2a10;
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  font-size: clamp(18px, 5.4cqw, 24px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  /* 硬描边白边 + 深色底托，避免白字软阴影在浅蓝底上发虚 */
  text-shadow:
    -1px 0 0 #fff,
    1px 0 0 #fff,
    0 -1px 0 #fff,
    0 1px 0 #fff,
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff,
    0 2px 0 rgba(90, 42, 16, 0.28);
}

.home-mode-entry.is-rogue .home-mode-title {
  color: #3a2160;
  text-shadow:
    -1px 0 0 #fff,
    1px 0 0 #fff,
    0 -1px 0 #fff,
    0 1px 0 #fff,
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff,
    0 2px 0 rgba(58, 33, 96, 0.3);
}

.home-mode-entry:active {
  transform: scale(.94, .91);
  transition-duration: 0.07s;
  transition-timing-function: ease-out;
}

.home-mode-entry.is-jelly .home-mode-art,
.home-mode-entry.is-idle-pop .home-mode-art {
  animation-play-state: paused;
}

.home-mode-entry:focus-visible { outline: 4px solid #fff; outline-offset: 2px; border-radius: 28px; }

.home-mode-dot {
  position: absolute;
  right: 8%;
  top: 7%;
  width: 16px;
  height: 16px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #ff5982;
  box-shadow: 0 2px 0 #a93263;
  animation: daily-pulse 1.2s ease-in-out infinite;
}

@keyframes home-mode-shine-spin {
  from { transform: translate(-50%, -50%) rotate(0); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-height: 650px) {
  .home-mode-row { width: min(76cqw, 410px); }
  .home-mode-title { font-size: clamp(17px, 5cqw, 21px); }
}

@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 {
  /* 从按下态接续弹出，避免 click 时从 scale(1) 硬切造成跳帧 */
  animation: jelly-press 0.48s cubic-bezier(0.22, 1.15, 0.36, 1) both !important;
}

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

@keyframes popup-x-jelly {
  0% { transform: translate(32%, -32%) scale(0.94, 0.91); }
  40% { transform: translate(32%, -32%) scale(1.05, 0.97); }
  68% { transform: translate(32%, -32%) scale(0.985, 1.03); }
  100% { transform: translate(32%, -32%) scale(1); }
}

/* 接续 :active 下压，再轻回弹，关键帧之间用缓动插值而不是线性硬切。 */
@keyframes jelly-press {
  0% { transform: scale(0.94, 0.91); }
  38% { transform: scale(1.045, 0.975); }
  62% { transform: scale(0.985, 1.03); }
  100% { transform: scale(1); }
}

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

/* 轻提醒：幅度收一点，减少与常驻呼吸叠在一起时的突兀感。 */
@keyframes unity-idle-pop {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.045, 0.985); }
  68% { transform: scale(0.99, 1.025); }
}

/*
  按钮动效：按下压扁一点（所有按钮统一），
  首页那几个主按钮再加个常驻呼吸/摇摆，让界面不那么死。
  用 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;
}

/* 按下/果冻期间先停呼吸，避免两套 transform 来回抢 */
.circle-btn:active,
.circle-btn.is-jelly,
.circle-btn.is-idle-pop {
  animation-play-state: paused;
}

.circle-btn:active {
  transform: scale(0.92);
  transition-duration: 0.07s;
}

.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,
  .home-mode-entry,
  .home-mode-art,
  .home-mode-dot,
  .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 img.home-talent-icon { width:68%; height:68%; filter:drop-shadow(0 2px 1px #3b2a5566); }

.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;
}

/* display:grid 会盖掉原生 [hidden]，无存档时「继续探险」必须真正藏住 */
.btn[hidden] {
  display: none !important;
}

.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(6px, 1.8cqw, 10px);
  padding: clamp(7px, 1cqh, 10px) clamp(8px, 2.5cqw, 14px);
  border: 3px solid #fff8e8;
  border-radius: clamp(18px, 2.6cqh, 26px);
  background: linear-gradient(180deg, #fffdf4 0%, #fff4d8 52%, #d9edff 100%);
  box-shadow: 0 4px 0 #76bde0, 0 8px 16px rgba(49, 66, 118, .23),
    inset 0 2px 0 #fff, inset 0 -3px 0 rgba(124, 183, 231, .35);
}

/*
  步数半圆进度环（官方 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.clock-pulse .mr-badge {
  animation: clock-hud-pulse 520ms cubic-bezier(.18, 1.45, .32, 1) both;
}

.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(5px, 0.7cqh, 7px);
}

.hud-level-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 11px 4px;
  border: 1px solid #d0a1e1;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff6ff, #f1defa);
  box-shadow: 0 2px 0 rgba(171, 125, 195, .38);
  font-size: clamp(14px, 1.9cqh, 17px);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #643878;
  line-height: 1.15;
}

.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.is-complete {
  box-shadow: inset 0 2px 3px rgba(24, 39, 70, 0.4), 0 0 0 2px rgba(99, 220, 155, 0.55);
}

.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;
}

.rogue-boss-hud {
  width: 100%;
  height: clamp(42px, 5.7cqh, 52px);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px 3px 2px;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg,#9a69b7,#5a387f 65%,#452c68);
  box-shadow: 0 3px 0 #39214f, inset 0 2px 0 rgba(255,255,255,.34);
  cursor: pointer;
}
.rogue-boss-hud[hidden] { display: none; }
.rogue-boss-hud:focus-visible {
  outline: 2px solid #ffe36b;
  outline-offset: 2px;
}
.boss-hud-main b {
  grid-column: 1 / -1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(13px, 3.8cqw, 15px);
  line-height: 1;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 2px;
}
.boss-hud-avatar { position:relative; flex:0 0 40px; width:40px; height:40px; transform-origin:50% 86%; }
.boss-hud-avatar img { width:100%; height:100%; object-fit:contain; }
.boss-hud-avatar i { position:absolute; top:50%; width:4px; height:6px; border-radius:50%; background:#202936; animation:boss-hud-blink 3.4s steps(1,end) infinite; }
.boss-hud-avatar i:nth-of-type(1) { left:38%; }
.boss-hud-avatar i:nth-of-type(2) { right:32%; }
.boss-hud-avatar em { position:absolute; left:45%; top:66%; width:10px; height:5px; border-bottom:2px solid #6d3129; border-radius:0 0 50% 50%; }
.boss-hud-avatar.is-ready { animation:boss-ready 520ms ease-in-out infinite alternate; }
.boss-hud-avatar.is-hurt { animation:boss-hurt 360ms cubic-bezier(.2,.9,.25,1.3); }
.boss-hud-avatar.is-hurt i { height:2px; top:54%; animation:none; }
.boss-hud-avatar.is-hurt em,.boss-hud-avatar.is-cast em { left:47%; width:7px; height:7px; border:2px solid #6d3129; border-radius:50%; background:#8d3d3d; }
.boss-hud-avatar.is-cast { animation:boss-cast 680ms cubic-bezier(.18,.82,.2,1); }
.boss-hud-avatar.is-cast i { height:3px; top:53%; animation:none; }
.boss-hud-avatar.is-enraged { filter:saturate(1.08); }
@keyframes boss-hud-blink { 0%,43%,47%,100%{transform:scaleY(1)} 45%{transform:scaleY(.08)} }
.boss-hud-main { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1px 4px; }
.boss-hud-main i { position: relative; height: 10px; overflow: hidden; border-radius: 999px; background: #352641; box-shadow: inset 0 1px 2px #1e1526; }
.boss-hud-main i em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ff5e6f,#ffb45e); transition: width .25s ease; }
.boss-hud-main i.is-flash em { animation: boss-hp-flash 420ms ease-out; }
.boss-hud-main small { font: 700 clamp(12px, 3cqw, 14px)/1 'Fredoka',var(--font); }
.boss-turn { width: 35px; display: grid; place-items: center; line-height: 1; }
.boss-turn b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #65421f; background: #ffe36b; box-shadow: inset 0 2px 0 #fff7bd,0 2px 0 #bd7728; font: 800 14px/1 'Fredoka',var(--font); }
.boss-turn.is-ready b {
  color: #6b1f2a;
  background: #ff8f7a;
  box-shadow: inset 0 2px 0 #ffd0c4, 0 2px 0 #c44d3e;
  animation: boss-turn-pulse 520ms ease-in-out infinite alternate;
}
.boss-turn small { margin-top: 2px; font-size: 10px; white-space: nowrap; }
@keyframes boss-hp-flash {
  0% { filter: brightness(1.55); box-shadow: 0 0 8px #ffd27a; }
  100% { filter: none; box-shadow: none; }
}
@keyframes boss-turn-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}

.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);
}

.rogue-hud-wallet {
  min-width: 52px;
  height: 36px;
  padding: 3px 8px 3px 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 2px solid #fff2ca;
  border-radius: 999px;
  background: linear-gradient(180deg, #7a5bb5, #513a85);
  box-shadow: 0 3px 0 #34265c, 0 5px 10px rgba(45, 29, 79, .25);
  color: #fff6c7;
  cursor: pointer;
}
.rogue-hud-wallet[hidden] { display: none; }
.rogue-hud-wallet img { width: 27px; height: 27px; object-fit: contain; }
.rogue-hud-wallet b { font: 700 17px/1 'Fredoka', var(--font); }
.rogue-hud-wallet small {
  position:absolute; left:50%; top:calc(100% - 2px); transform:translateX(-50%);
  white-space:nowrap; padding:3px 7px; border-radius:10px;
  background:#ffe592; color:#8b541d; border:1px solid #dca64a;
  font:700 10px/1 var(--font); text-shadow:0 1px #fff8d9;
}
.rogue-hud-wallet small[hidden] { display:none; }
.rogue-hud-wallet small.rogue-hud-asc { top:auto; bottom:calc(100% - 4px); background:#efe2ff; color:#553085; border-color:#a58bd6; text-shadow:none; }
.endless-start-ascension { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:4px 10px; margin:8px 0 4px; padding:8px 12px; border-radius:14px; background:rgba(255,255,255,.55); }
.endless-start-ascension[hidden] { display:none; }
.endless-start-ascension > b { font-size:14px; }
.endless-asc-stepper { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.endless-asc-stepper button { width:30px; height:30px; border-radius:50%; border:0; background:#5b8def; color:#fff; font-size:18px; font-weight:700; }
.endless-asc-stepper button:disabled { opacity:.35; }
.endless-asc-stepper strong { min-width:56px; text-align:center; }
.endless-start-ascension small { grid-column:1 / -1; font-size:12px; line-height:1.35; opacity:.85; }
.endless-start-ascension .endless-asc-note { opacity:.6; }
.rogue-hud-wallet:active { transform: scale(.94,.91); }
.rogue-hud-wallet.is-idle-pop { animation: reward-target-pop .48s ease; }

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

/* 棋盘区：竖屏优先占满宽度；多余高度由本区吸收，不拿技能条来换棋盘尺寸 */
.board-frame {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 1.2cqh, 12px) 0;
  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;
  transform: translate(var(--pixel-nudge-x, 0px), var(--pixel-nudge-y, 0px));
  isolation: isolate;
  contain: layout style;
}

/* 白色面板跟随棋盘尺寸，避免在 9:21 / 9:24 上被拉成大白条 */
.board-grid::before {
  content: '';
  position: absolute;
  inset: -2.5%;
  border-radius: 7%;
  /* 轻描边底板即可；过白/模糊会在连锁时像蒙了一层雾 */
  background: rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(255, 255, 255, 0.28);
  pointer-events: none;
}

.board-boss {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  left: var(--boss-left);
  top: var(--boss-top);
  width: var(--boss-width);
  height: var(--boss-height);
  display: grid;
  place-items: center;
  transform-origin: 50% 88%;
  filter: drop-shadow(0 2px 0 rgba(40, 28, 18, 0.28)) drop-shadow(0 8px 10px rgba(40, 28, 18, 0.18));
}
.board-boss .boss-body {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}
.board-boss[data-boss-id="stump-king"] .boss-body { width: 112%; height: 112%; }
.boss-crystal-armor {
  position:absolute; z-index:4; left:50%; top:50%; width:100%; height:100%;
  object-fit:contain; transform:translate(-50%,-50%) scale(.82); opacity:0;
  pointer-events:none; transition:opacity .18s ease, transform .24s ease;
}
.board-boss.has-crystal-armor .boss-crystal-armor {
  opacity:.9; transform:translate(-50%,-50%) scale(1);
  animation:boss-armor-breathe 1.2s ease-in-out infinite alternate;
}
@keyframes boss-armor-breathe {
  from { transform:translate(-50%,-50%) scale(.98); }
  to { transform:translate(-50%,-50%) scale(1.04); }
}
.board-boss.has-parts {
  grid-template-columns: repeat(var(--boss-part-count), minmax(0, 1fr));
  place-items: stretch;
  filter: drop-shadow(0 2px 0 rgba(40, 28, 18, 0.22));
}
.board-boss.has-parts.is-scattered {
  display: block;
  pointer-events: none;
}
.board-boss.has-parts.is-scattered .boss-part {
  position: absolute;
  box-sizing: border-box;
  padding: 2%;
}
.board-boss[data-boss-id="mushroom-trio"].has-parts.is-scattered .boss-part {
  padding: 0;
}
.boss-part {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  transform-origin: 50% 88%;
}
.board-boss.has-parts .boss-part .boss-body { width: 104%; height: 104%; object-fit: contain; }
/* 三兄弟贴图留白多；略放大贴合一格，避免盖住邻格动物 */
.board-boss[data-boss-id="mushroom-trio"] .boss-part .boss-body {
  width: 112%;
  height: 112%;
  filter: drop-shadow(0 2px 2px rgba(40, 28, 18, 0.28));
}
.board-boss.has-parts .boss-part .boss-face { width: 58%; height: 38%; }
.board-boss[data-boss-id="mushroom-trio"] .boss-part .boss-face {
  width: 50%;
  height: 34%;
}
.boss-face {
  position:absolute;
  z-index:2;
  left:var(--face-x);
  top:var(--face-y);
  width:44%;
  height:34%;
  transform:translate(-50%,-50%) scale(var(--face-scale,1));
  transform-origin:center;
  --boss-ink:#202936;
  --boss-mouth:#6d3129;
  --boss-cheek:#e96f72;
}
.boss-brow {
  position:absolute;
  z-index:2;
  top:-1%;
  width:24%;
  height:17%;
  opacity:0;
  border-top:clamp(2px,.7cqw,4px) solid var(--boss-ink);
  border-radius:50%;
  transition:opacity 90ms ease,transform 90ms ease;
}
.boss-brow.is-left { left:14%; transform:rotate(8deg); }
.boss-brow.is-right { right:14%; transform:rotate(-8deg); }
.boss-eye {
  position:absolute;
  z-index:2;
  top:8%;
  width:15%;
  height:25%;
  overflow:visible;
  border-radius:50%;
  background:var(--boss-ink);
  animation:boss-eye-open 3.6s steps(1,end) infinite;
  animation-delay:var(--blink-delay,0ms);
}
.boss-eye.is-left { left:19%; }
.boss-eye.is-right { right:19%; }
.boss-eye b {
  position:absolute;
  left:-12%;
  top:20%;
  width:124%;
  height:72%;
  box-sizing:border-box;
  opacity:0;
  border-top:clamp(2px,.75cqw,4px) solid var(--boss-ink);
  border-radius:50%;
  background:transparent;
  animation:boss-eye-closed 3.6s steps(1,end) infinite;
  animation-delay:var(--blink-delay,0ms);
}
.boss-cheek { position:absolute; top:39%; width:18%; height:13%; border-radius:50%; background:var(--boss-cheek); opacity:.56; }
.boss-cheek.is-left { left:8%; }
.boss-cheek.is-right { right:8%; }
.boss-mouth { position:absolute; left:34%; top:52%; width:32%; height:22%; box-sizing:border-box; border-bottom:clamp(2px,.7cqw,4px) solid var(--boss-mouth); border-radius:0 0 50% 50%; }
.boss-face.mood-happy .boss-cheek { opacity:.72; }
.boss-face.mood-happy .boss-mouth { left:31%; width:38%; height:25%; }
.boss-face.mood-sleepy .boss-eye { top:12%; height:18%; }
.boss-face.mood-sleepy .boss-mouth { left:37%; width:26%; }
.boss-face.mood-grumpy .boss-brow { opacity:.46; }
.boss-face.mood-grumpy .boss-brow.is-left { transform:rotate(16deg); }
.boss-face.mood-grumpy .boss-brow.is-right { transform:rotate(-16deg); }
.boss-face.mood-hungry .boss-mouth { left:40%; top:53%; width:20%; height:27%; border:clamp(2px,.7cqw,4px) solid var(--boss-mouth); border-radius:50%; background:#934746; }
.board-boss.is-enraged .boss-brow { opacity:.78; }
.board-boss.is-enraged .boss-cheek { background:#ee6262; opacity:.72; }
.board-boss.is-ready .boss-brow { opacity:.86; }
.board-boss.is-ready .boss-brow.is-left { transform:rotate(20deg) translateY(5%); }
.board-boss.is-ready .boss-brow.is-right { transform:rotate(-20deg) translateY(5%); }
.board-boss.is-ready .boss-mouth { left:38%; width:24%; height:17%; }
.board-boss.is-hurt .boss-brow { opacity:1; }
.board-boss.is-hurt .boss-brow.is-left { transform:rotate(-16deg) translateY(20%); }
.board-boss.is-hurt .boss-brow.is-right { transform:rotate(16deg) translateY(20%); }
.board-boss.is-hurt .boss-eye { top:18%; height:17%; border-radius:0; background:transparent; animation:none; }
.board-boss.is-hurt .boss-eye b { top:6%; opacity:1; animation:none; }
.board-boss.is-hurt .boss-eye.is-left b { transform:rotate(11deg); }
.board-boss.is-hurt .boss-eye.is-right b { transform:rotate(-11deg); }
.board-boss.is-hurt .boss-cheek { transform:scale(1.16); opacity:.82; }
.board-boss.is-hurt .boss-mouth { left:42%; top:55%; width:16%; height:24%; border:clamp(2px,.7cqw,4px) solid var(--boss-mouth); border-radius:50%; background:#934746; }
.board-boss.is-cast .boss-brow { opacity:1; }
.board-boss.is-cast .boss-brow.is-left { transform:rotate(22deg) translateY(18%); }
.board-boss.is-cast .boss-brow.is-right { transform:rotate(-22deg) translateY(18%); }
.board-boss.is-cast .boss-eye { top:17%; height:12%; border-radius:999px; animation:none; }
.board-boss.is-cast .boss-eye.is-left { transform:rotate(8deg); }
.board-boss.is-cast .boss-eye.is-right { transform:rotate(-8deg); }
.board-boss.is-cast .boss-eye b { opacity:0; animation:none; }
.board-boss.is-cast .boss-cheek { opacity:.78; transform:scale(.9); }
.board-boss.is-cast .boss-mouth { left:39%; top:52%; width:22%; height:30%; border:clamp(2px,.7cqw,4px) solid var(--boss-mouth); border-radius:50%; background:#934746; }
.board-boss.is-defeated .boss-brow,.board-boss.is-defeated .boss-cheek { opacity:0; }
.board-boss.is-defeated .boss-eye { top:16%; height:18%; border-radius:0; background:transparent; animation:none; }
.board-boss.is-defeated .boss-eye b { left:0; top:45%; width:100%; height:3px; opacity:1; border:0; border-radius:999px; background:var(--boss-ink); animation:none; transform:rotate(45deg); }
.board-boss.is-defeated .boss-eye b::after { content:''; position:absolute; inset:0; border-radius:inherit; background:inherit; transform:rotate(90deg); }
.board-boss.is-defeated .boss-mouth { left:35%; top:65%; width:30%; height:18%; border:0; border-top:clamp(2px,.7cqw,4px) solid var(--boss-mouth); border-radius:50% 50% 0 0; }
.board-boss.is-idle:not(.has-parts) { animation: boss-idle 1.75s ease-in-out infinite alternate; }
.board-boss.has-parts.is-idle .boss-part {
  animation: boss-part-idle 1.55s ease-in-out infinite alternate;
  animation-delay: var(--part-delay);
}
.board-boss.is-ready:not(.has-parts) { animation:boss-ready 520ms ease-in-out infinite alternate; }
.board-boss.has-parts.is-ready .boss-part { animation:boss-ready 520ms ease-in-out infinite alternate; animation-delay:var(--part-delay); }
.board-boss.is-hurt { animation: boss-hurt 360ms cubic-bezier(.2,.9,.25,1.3); }
.board-boss.is-cast { z-index: 3; animation: boss-cast 680ms cubic-bezier(.18,.82,.2,1); }
.board-boss.has-parts.is-cast { animation:none; }
.board-boss.has-parts.is-cast .boss-part { animation:boss-mushroom-cast 540ms cubic-bezier(.18,.82,.2,1) both; animation-delay:var(--cast-delay); }
/* 换位中藏原位主体，只播飞行层；落地用 is-settling 先藏新本体，拆飞行层同帧再亮 */
.board-boss.has-parts.is-warping,
.board-boss.has-parts.is-settling {
  opacity: 0;
  animation: none;
}
.board-boss.has-parts.is-warping .boss-part,
.board-boss.has-parts.is-settling .boss-part { animation: none; }
.tile.boss-warp-source { opacity: 0 !important; pointer-events: none; }
.boss-mushroom-flyer,
.boss-animal-flyer {
  position: absolute;
  z-index: 20;
  object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transform-origin: 50% 88%;
  filter: drop-shadow(0 4px 6px rgba(40, 28, 18, 0.28));
  will-change: transform;
}
.boss-mushroom-flyer.is-hopping,
.boss-animal-flyer.is-hopping {
  animation: boss-hop-swap 580ms cubic-bezier(.22,.82,.18,1) both;
}
.boss-animal-flyer { z-index: 19; }
@keyframes boss-hop-swap {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1, 1);
  }
  12% {
    transform: translate(-50%, -46%) scale(1.1, 0.84);
  }
  46% {
    transform: translate(
      calc(-50% + var(--hop-mx)),
      calc(-50% + var(--hop-my) - var(--hop-lift, 36px))
    ) scale(1.06, 1.08);
  }
  78% {
    transform: translate(
      calc(-50% + var(--hop-dx)),
      calc(-50% + var(--hop-dy) + 3px)
    ) scale(1.08, 0.9);
  }
  100% {
    opacity: 1;
    transform: translate(
      calc(-50% + var(--hop-dx)),
      calc(-50% + var(--hop-dy))
    ) scale(1, 1);
  }
}
.board-boss.is-defeated { animation: boss-defeat 620ms ease-in both; }
.boss-hit-number { position:absolute; left:50%; top:5%; opacity:0; color:#fff56b; -webkit-text-stroke:2px #9b3c31; paint-order:stroke fill; font:900 25px/1 'Fredoka',var(--font); }
.boss-hit-number.is-on { animation: boss-number 520ms ease-out both; }
.boss-hit-number.is-heavy.is-on { font-size: 30px; color: #ffe08a; -webkit-text-stroke: 2.5px #8a2a24; }
.tile.boss-root-grow .block-img { animation: boss-root-grow 360ms cubic-bezier(.2,1.2,.3,1) both; }
@keyframes boss-idle { from{transform:translateY(1%) scale(1,.98)} to{transform:translateY(-2%) scale(.99,1.02)} }
@keyframes boss-part-idle { from{transform:translateY(2%) scale(1,.97)} to{transform:translateY(-3%) scale(.98,1.03)} }
@keyframes boss-eye-open { 0%,42%,47%,100%{background-color:var(--boss-ink)} 43%,46%{background-color:transparent} }
@keyframes boss-eye-closed { 0%,42%,47%,100%{opacity:0} 43%,46%{opacity:1} }
@keyframes boss-ready { from{transform:translateY(1%) scale(1,.97)} to{transform:translateY(-2%) scale(1.025,1.04)} }
@keyframes boss-hurt { 0%{transform:scale(1)} 35%{transform:scale(1.13,.78) rotate(-3deg)} 75%{transform:scale(.94,1.1) rotate(2deg)} 100%{transform:scale(1)} }
@keyframes boss-cast { 0%{transform:scale(1)} 28%{transform:scale(1.08,.86) translateY(4%)} 68%{transform:scale(.92,1.18) translateY(-6%)} 100%{transform:scale(1)} }
@keyframes boss-mushroom-cast { 0%{transform:translateY(0) scale(1)} 30%{transform:translateY(5%) scale(1.08,.86)} 70%{transform:translateY(-18%) scale(.94,1.12)} 100%{transform:translateY(0) scale(1)} }
@keyframes boss-defeat { 0%{opacity:1;transform:scale(1)} 55%{transform:scale(1.15,.72)} 100%{opacity:0;transform:scale(.15) rotate(12deg)} }
@keyframes boss-number { 0%{opacity:0;transform:translate(-50%,8px) scale(.5)} 25%{opacity:1;transform:translate(-50%,-4px) scale(1.25)} 100%{opacity:0;transform:translate(-50%,-28px) scale(.9)} }
.board-damage-number { position:absolute; z-index:26; pointer-events:none; white-space:nowrap; color:#fff7b3; -webkit-text-stroke:2px #854333; paint-order:stroke fill; text-shadow:0 3px 0 #743a2888; font:900 clamp(17px,5cqw,25px)/1 'Fredoka',var(--font); animation:board-damage-float .78s cubic-bezier(.17,.8,.22,1) both; }
.board-damage-number.is-boss { color:#fff176; -webkit-text-stroke:3px #96362e; font-size:clamp(25px,8cqw,41px); animation-duration:.85s; }
.board-damage-number.is-ice { color:#ddfaff; -webkit-text-stroke:2px #317db4; }
@keyframes board-damage-float { 0%{opacity:0;transform:translate(-50%,8px) scale(.55)} 20%{opacity:1;transform:translate(-50%,-4px) scale(1.18)} 75%{opacity:1} 100%{opacity:0;transform:translate(-50%,-34px) scale(.9)} }
@media (prefers-reduced-motion: reduce) { .board-damage-number { animation-duration:.5s; } }
@keyframes boss-root-grow { from{opacity:.3;transform:scale(.3) rotate(-8deg)} to{opacity:1;transform:scale(1) rotate(0)} }

/* 手机端略提不透明，仍远低于原先 0.62 的「牛奶层」 */
@media (pointer: coarse), (max-width: 520px) {
  .board-grid::before {
    background: rgba(255, 255, 255, 0.22);
  }
}

.tile {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  transition: transform var(--fall-ms, 150ms) cubic-bezier(0.2, 0.72, 0.28, 1);
  /* 单格自成包含块：位移/挤压不会牵连整盘重排重绘 */
  contain: layout style paint;
  backface-visibility: hidden;
  /* 默认不永久 will-change：64 格各一层会吃光移动端显存 */
}

.tile.is-falling {
  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%;
}

/* 消除前短暂蓄力：用纯 transform 表达（filter/drop-shadow 在移动端逐帧代价高） */
.tile.match-ready .gem {
  transform: scale(1.07, 0.9);
  filter: brightness(1.2);
}

.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 伪元素，不创建逐格 DOM/粒子。 */
.tile.clear-target { z-index: 7; }
.tile.clear-target::after {
  content: '';
  position: absolute;
  z-index: 6;
  inset: 8%;
  border: 3px solid rgba(255, 248, 181, .98);
  border-radius: 27%;
  background: rgba(255, 221, 100, .13);
  pointer-events: none;
  animation: clear-target-lock var(--clear-ms, 180ms) ease-out both;
}
.tile.clear-target.is-stripe::after {
  inset: 13%;
  border-width: 2px;
  border-radius: 50%;
  border-color: #fffbd0;
  background: rgba(255, 231, 91, .16);
}
.tile.clear-target.is-rainbow::after {
  border-color: #fff;
  outline: 3px solid rgba(255, 107, 181, .82);
  background: rgba(102, 222, 246, .18);
}
.tile.clear-target.is-cross::after,
.tile.clear-target.is-prop::after {
  border-color: #fff4b1;
  outline: 2px solid rgba(255, 117, 157, .78);
  background: rgba(255, 166, 83, .18);
}
.tile.clear-target.is-skill::after {
  border-color: #fff;
  outline: 2px solid rgba(137, 108, 239, .82);
  background: rgba(115, 220, 245, .18);
}
@keyframes clear-target-lock {
  0% { opacity: 0; transform: scale(.5); }
  58% { opacity: 1; transform: scale(1.06); }
  100% { opacity: .94; transform: scale(1); }
}

.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: 3%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 84%;
  padding: 7px 13px 8px 10px;
  border: 2px solid #fff9df;
  border-radius: 15px;
  color: #493356;
  background: linear-gradient(180deg, #fffdf3, #f7e9ce);
  box-shadow: 0 3px 0 #c7a977, 0 7px 14px rgba(54, 38, 71, .22), inset 0 1px 0 #fff;
  font-size: clamp(12px, 3.3cqw, 15px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  animation: board-cue-pop 1.3s ease-out both;
  --cue-accent: #ad77d7;
}

.board-cue::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 4px;
  background: var(--cue-accent);
  box-shadow: 0 1px 0 rgba(65, 39, 67, .28);
  transform: rotate(45deg);
}

.board-cue.is-combo { --cue-accent: #f06ba7; }
.board-cue.is-panda,
.board-cue.is-bear { --cue-accent: #839aa7; }
.board-cue.is-cat,
.board-cue.is-flowercat { --cue-accent: #e579b7; }
.board-cue.is-chicken { --cue-accent: #f4b640; }
.board-cue.is-bunny,
.board-cue.is-bluebunny { --cue-accent: #80c6e8; }
.board-cue.is-prop { --cue-accent: #e99254; }
.board-cue.is-pig { --cue-accent: #e783a9; }
.board-cue.is-purplecat { --cue-accent: #a47cdb; }
.board-cue.is-bluebird { --cue-accent: #74bee8; }
.board-cue.is-redbird { --cue-accent: #e67756; }
.board-cue.is-frog { --cue-accent: #68b978; }
.board-cue.is-silverfox,
.board-cue.is-fox { --cue-accent: #9aa8bc; }
.board-cue.is-blackpig { --cue-accent: #716783; }
.board-cue.is-snowfox,
.board-cue.is-polarbear { --cue-accent: #7fc4ea; }

.skill-impact,
.prop-impact {
  position:absolute;
  z-index:13;
  width:clamp(46px,16%,82px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.skill-impact img,
.prop-impact img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 3px rgba(55,35,68,.36)); }
.skill-impact { animation:skill-impact-pop 460ms cubic-bezier(.16,1.16,.3,1) both; }
.skill-impact.is-cat img { animation:skill-cat-swipe 460ms ease-out both; }
.skill-impact.is-chicken img { animation:skill-chicken-peck 460ms ease-in-out both; }
.prop-impact.is-hammer { transform-origin:15% 90%; animation:prop-hammer-swing 420ms cubic-bezier(.2,.85,.25,1) both; }
.prop-impact i { position:absolute; left:48%; top:58%; width:60%; aspect-ratio:1; border:5px solid #fff7a9; border-radius:50%; transform:translate(-50%,-50%); animation:prop-hit-ring 420ms ease-out both; }
@keyframes skill-impact-pop {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.35); }
  45% { opacity:1; transform:translate(-50%,-58%) scale(1.12); }
  100% { opacity:0; transform:translate(-50%,-75%) scale(.92); }
}
@keyframes skill-cat-swipe { 0% { transform:translateX(-35%) rotate(-18deg); } 55% { transform:translateX(12%) rotate(8deg) scale(1.14); } 100% { transform:translateX(26%) rotate(4deg); } }
@keyframes skill-chicken-peck { 0%,100% { transform:rotate(0); } 35% { transform:rotate(16deg) translateY(12%); } 62% { transform:rotate(-7deg) translateY(-4%); } }
@keyframes prop-hammer-swing {
  0% { opacity:0; transform:translate(-58%,-68%) rotate(-48deg) scale(.72); }
  50% { opacity:1; transform:translate(-48%,-50%) rotate(16deg) scale(1.12); }
  72% { transform:translate(-50%,-50%) rotate(-5deg) scale(.96); }
  100% { opacity:0; transform:translate(-50%,-50%) rotate(0) scale(1); }
}
@keyframes prop-hit-ring { 0%,42% { opacity:0; transform:translate(-50%,-50%) scale(.2); } 58% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.65); } }

.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-panda::after,
.tile.ultimate-target.is-bear::after {
  border-radius: 30%;
  background: rgba(158, 180, 199, .28);
}

.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.flower-pair-mark {
  z-index: 9;
}
.tile.flower-pair-mark::after {
  content: '';
  position: absolute;
  z-index: 6;
  inset: 6%;
  border: 3px solid rgba(255, 156, 214, .98);
  border-radius: 22%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 232, 246, .55) 0 18%, transparent 42%),
    rgba(255, 120, 188, .16);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .55),
    0 0 14px rgba(255, 120, 198, .85),
    inset 0 0 10px rgba(255, 190, 230, .35);
  pointer-events: none;
  animation: flower-pair-lock 280ms cubic-bezier(.18, 1.15, .32, 1) both;
}
@keyframes flower-pair-lock {
  0% { opacity: 0; transform: scale(.42) rotate(-8deg); }
  62% { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: .96; transform: scale(1) rotate(0); }
}

.flower-pair-link {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 186, 226, .35) 12%,
    #ff9ad6 50%,
    rgba(255, 186, 226, .35) 88%,
    transparent 100%);
  box-shadow: 0 0 10px rgba(255, 120, 198, .9), 0 0 2px #fff;
  animation: flower-pair-link-glow 360ms ease-out both;
}
.flower-pair-link.is-h {
  height: 5px;
  transform: translateY(-50%);
}
.flower-pair-link.is-v {
  width: 5px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 186, 226, .35) 12%,
    #ff9ad6 50%,
    rgba(255, 186, 226, .35) 88%,
    transparent 100%);
}
@keyframes flower-pair-link-glow {
  0% { opacity: 0; filter: brightness(1.4); }
  40% { opacity: 1; }
  100% { opacity: .88; filter: brightness(1); }
}

.board.is-low-fx .tile.flower-pair-mark::after {
  animation: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .45), 0 0 6px rgba(255, 120, 198, .55);
  background: rgba(255, 120, 188, .14);
}
.board.is-low-fx .flower-pair-link {
  animation: none;
  box-shadow: none;
  opacity: .75;
}

.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%, -6px) scale(.94); }
  13%, 76% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -5px) scale(.99); }
}

@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; }
  .board-boss,
  .board-boss .boss-part,
  .board-boss .boss-eye,
  .board-boss .boss-eye b,
  .boss-hud-avatar,
  .boss-hud-avatar i,
  .boss-turn.is-ready b,
  .boss-hud-main i.is-flash em,
  .boss-mushroom-flyer,
  .boss-animal-flyer { animation: none !important; }
  .tile.tile-land .gem { animation: none; }
  .tile.match-ready .gem,
  .tile.special-fire .gem { transform: none; filter: none; }
  .tile.clear-target::after { animation: none; }
  .tile.combo-convert .gem { animation: none; }
  .tile.ultimate-target::after,
  .tile.flower-pair-mark::after,
  .tile.bunny-arrive .gem { animation: none; }
  .flower-pair-link { animation: none; opacity: .7; box-shadow: none; }
  .skill-impact,.prop-impact { display: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: 3%;
  background: url('../../assets/ui/gems/tile.webp') center / contain no-repeat;
  opacity: 0.42;
  filter: drop-shadow(0 3px 3px rgba(59, 42, 85, 0.18));
}

/* 棋子为资源包精灵图（Icons/Game/Animals） */
.gem {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  object-fit: contain;
  /* DOM 回退路径：常驻 filter 在半像素格位易发糊；阴影交给底衬。 */
  filter: none;
  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: 10%;
  left: 50%;
  transform: translateX(-50%) scale(0.86);
  max-width: min(86%, 300px);
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(59, 42, 85, 0.86);
  color: #ffd56a;
  font-size: clamp(16px, 4.8cqw, 22px);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 14;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}

.combo-toast.is-hot {
  background: linear-gradient(180deg, #ff8a5c, #f2685f);
  color: #fff;
  font-size: clamp(18px, 5.4cqw, 26px);
  box-shadow: 0 4px 0 rgba(168, 56, 48, 0.55), 0 10px 22px rgba(120, 30, 20, 0.28);
}

/* 技能不可用：暖色小卡，允许多行，别用大红连击条 */
.combo-toast.is-deny {
  top: 14%;
  max-width: min(90%, 280px);
  padding: 11px 16px 12px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.98), rgba(255, 236, 198, 0.96));
  color: #8a3f14;
  border: 2px solid #f0c56a;
  box-shadow:
    0 3px 0 #d4a24a,
    0 10px 24px rgba(90, 48, 12, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  font-size: clamp(13px, 3.5cqw, 15px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.01em;
  white-space: normal;
  text-shadow: none;
}

.combo-toast.is-info {
  top: 12%;
  max-width: min(88%, 260px);
  padding: 9px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(236, 248, 255, 0.96), rgba(186, 220, 246, 0.94));
  color: #1f4f78;
  border: 2px solid #9ec8ea;
  box-shadow: 0 3px 0 #6fa0c8, 0 8px 18px rgba(30, 60, 100, 0.22);
  font-size: clamp(13px, 3.4cqw, 15px);
  font-weight: 800;
  line-height: 1.35;
  white-space: normal;
  text-shadow: none;
}

/* 走错步是操作反馈，不是惩罚警报：留在棋盘上方让玩家看清扣步结果。 */
.combo-toast.is-invalid {
  top: 11%;
  width: max-content;
  max-width: min(82%, 260px);
  padding: 10px 18px 11px;
  border: 2px solid #fff5d3;
  border-radius: 18px;
  background: #fff5df;
  color: #80512e;
  box-shadow: 0 3px 0 #cfa56c, 0 6px 16px rgba(88, 53, 28, .16);
  font-size: clamp(14px, 3.8cqw, 17px);
  line-height: 1.25;
  white-space: normal;
  text-shadow: none;
}
.combo-toast.is-invalid small {
  display: block;
  margin-top: 4px;
  color: #a06a40;
  font-size: clamp(11px, 3cqw, 13px);
  font-weight: 700;
}

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

.combo-toast.is-deny.show {
  animation: deny-toast-pop 1.85s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.combo-toast.is-info.show {
  animation: deny-toast-pop 1.45s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
.combo-toast.is-invalid.show {
  animation: invalid-toast-in 2.65s ease-out both;
}
@keyframes invalid-toast-in {
  0% { opacity: 0; transform: translateX(-50%) translateY(7px) scale(.95); }
  9% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.02); }
  16%, 80% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
  .combo-toast.is-invalid.show { opacity: 1; transform: translateX(-50%); }
}

@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);
  }
}

@keyframes deny-toast-pop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(0.88);
  }
  12% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.04);
  }
  78% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px) scale(0.96);
  }
}

.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 {
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.popup-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* 滚动条按包里的圆润风格描一下 */
.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%, 380px);
  max-height: min(92vh, 720px);
}

/* 设置面板：复用弹窗那套分件结构，居中放在屏幕中间 */
.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; }
.dev-tools .dev-rogue-note { margin: 5px 0 0 49px; color: #a9f0d8; }

.popup-skill-lab .popup-panel { max-height: min(78cqh, 640px); overflow: auto; }
#popup-skill-lab.popup-backdrop {
  z-index: 1200;
}
.skill-lab-body { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.skill-lab-note { margin: 0; color: #4a3a78; font-size: 13px; line-height: 1.4; }
.skill-lab-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.skill-lab-toolbar .btn { min-height: 36px; padding: 0 12px; font-size: 13px; }
.skill-lab-body h4 { margin: 4px 0 0; color: #5a3d9a; font-size: 14px; }
.skill-lab-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 28cqh;
  overflow: auto;
  padding: 2px;
}
.skill-lab-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 72px;
  padding: 8px 4px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #f7f1ff, #e7dbff);
  box-shadow: 0 2px 0 #b9a4e2;
  color: #4a2f86;
  font: 700 11px var(--font);
  cursor: pointer;
}
.skill-lab-card img,
.skill-lab-card span,
.skill-lab-card small { pointer-events: none; }
.skill-lab-card img { width: 36px; height: 36px; object-fit: contain; }
.skill-lab-card small { color: #7a62b0; font-weight: 600; }
.skill-lab-card.is-on {
  background: linear-gradient(180deg, #fff4b8, #ffd56a);
  box-shadow: 0 2px 0 #d4a12a;
  color: #6a4010;
}
.skill-lab-card.is-on small { color: #8a5a18; }

.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.4cqw, 16px));
  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, 6.5cqw, 58px));
  padding-bottom: calc(var(--safe-bottom) + clamp(52px, 10cqh, 84px));
  /* 顶栏预留区用天空渐变，避免与 level-map-9 顶边形成硬切线。 */
  background: linear-gradient(180deg, #86d4ff 0%, #a6e2ff 42%, rgba(166, 226, 255, 0) 100%);
}

.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: 4;
  left: -14%;
  right: -14%;
  top: calc(var(--future-y, 0.5%) - 1.2%);
  height: clamp(96px, 12.5%, 168px);
  overflow: visible;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.28) 58%, rgba(255, 255, 255, 0) 100%);
}

.map-future-clouds img {
  position: absolute;
  width: 58%;
  filter: drop-shadow(0 8px 14px rgba(32, 128, 166, 0.18));
  animation: future-cloud 5.5s ease-in-out infinite alternate;
}

.map-future-clouds img:nth-child(1) { left: -10%; bottom: -18%; width: 62%; }
.map-future-clouds img:nth-child(2) { right: -8%; bottom: -6%; width: 56%; animation-delay: -1.7s; }
.map-future-clouds img:nth-child(3) { left: 24%; top: -22%; width: 52%; animation-delay: -3.2s; }
.map-future-clouds img:nth-child(4) { left: 8%; top: 8%; width: 44%; animation-delay: -2.1s; }
.map-future-clouds img:nth-child(5) { right: 10%; top: 2%; width: 48%; animation-delay: -4.4s; }

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

/* 固定顶云：始终贴在屏幕最上方，不随长宽比往下漂 */
.map-top-clouds {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--safe-top) + 82px);
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.map-top-cloudband {
  position: absolute;
  left: -8cqw;
  width: 116cqw;
  top: calc(var(--safe-top) + 50px);
  transform: scaleY(-1);
  transform-origin: top center;
  opacity: 0.97;
  filter: drop-shadow(0 6px 10px rgba(120, 190, 230, 0.22));
}

.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; }
.node-unlock-kind.kind-boss { background: #c45a2c; }
.map-node .node-face.is-boss-face {
  inset: 16%;
  width: 68%;
  height: 68%;
  object-fit: contain;
}
.map-node .node-num.is-boss-num {
  bottom: 22%;
  font-size: clamp(9px, 2.6cqw, 12px);
  opacity: .92;
  text-shadow: 0 1px 0 rgba(80, 40, 10, .35);
}
.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.55;
  filter: saturate(0.45);
  z-index: 2;
}

.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,
  .map-future-clouds img {
    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: 64%;
  bottom: calc(var(--safe-bottom) + clamp(8px, 1.5cqh, 14px));
  transform: translateX(-50%);
  z-index: 5;
  width: min(65cqw, 310px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(3px, 1.2cqw, 8px);
}

.map-bottom-row .home-feature { min-width: 0; gap: 0; }
.map-bottom-row .home-feature > b {
  position: relative;
  z-index: 2;
  min-width: 72%;
  margin-top: -5px;
  padding: 4px 5px 5px;
  border: 2px solid #fff7c9;
  border-radius: 999px;
  background: linear-gradient(180deg, #6490dd, #3e5db3);
  box-shadow: 0 3px 0 #2e4288, 0 5px 8px rgba(47, 54, 113, .2);
  font-size: clamp(15px, 4.1cqw, 18px);
  line-height: 1;
  letter-spacing: 0;
  -webkit-text-stroke: 0;
  text-align: center;
  text-shadow: 0 1px 0 #34529d;
}
.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(8px, 2.4cqw, 12px);
  min-height: clamp(44px, 6.6cqh, 58px);
  padding: clamp(6px, 1cqh, 9px) clamp(14px, 3.4cqw, 18px) clamp(6px, 1cqh, 9px)
    clamp(6px, 1cqh, 9px);
  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;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* display:flex 会盖掉原生 [hidden]，无尽模式必须强制藏掉横条 */
.partner[hidden] {
  display: none !important;
}

.partner-meta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: clamp(4px, 0.7cqh, 6px);
  min-width: 0;
  padding-block: 1px;
}

.partner-tap-hint {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd56a, #f4a83a);
  color: #6a3d00;
  font-size: clamp(11px, 1.55cqh, 13px);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 3px 0 #c47d18, 0 6px 12px rgba(59, 42, 85, 0.28);
  pointer-events: none;
  animation: partner-tap-bob 0.9s ease-in-out infinite;
}

.partner-tap-hint::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #f4a83a;
}

@keyframes partner-tap-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

.partner-ring {
  position: relative;
  flex: 0 0 auto;
  width: clamp(36px, 5.4cqh, 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(72px, 20cqw, 118px);
  height: clamp(10px, 1.55cqh, 14px);
  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 {
  min-height: 1.15em;
  font-size: clamp(11px, 1.55cqh, 13px);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* 能量满：整个伙伴条变成可点的发光按钮 */
.partner.is-ready {
  cursor: pointer;
  z-index: 8;
  transform: scale(1.06);
  background: linear-gradient(180deg, #4a82bc, #2f5f96);
  box-shadow:
    0 0 0 3px #fff3a8,
    0 0 0 6px rgba(255, 180, 64, 0.55),
    0 8px 22px rgba(255, 170, 40, 0.45),
    inset 0 2px 4px rgba(255, 255, 255, 0.22);
  animation: partner-glow 1.05s ease-in-out infinite;
}

.partner.is-ready::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 2px solid rgba(255, 220, 120, 0.85);
  pointer-events: none;
  animation: partner-ring-pulse 1.1s ease-out infinite;
}

.partner.is-ready .partner-ring {
  animation: partner-pop 0.85s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(255, 245, 180, 0.9), 0 4px 10px rgba(59, 42, 85, 0.28);
}

.partner.is-ready .partner-skill {
  color: #ffe28a;
  font-size: clamp(11px, 1.65cqh, 14px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.partner.is-guiding {
  z-index: 42;
  transform: scale(1.1);
}

.partner-ready-badge {
  position: absolute;
  top: -5px;
  right: -8px;
  min-width: 28px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ff5e5e, #d32f2f);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(.2, 1.45, .35, 1);
}

.partner.is-ready .partner-ready-badge {
  opacity: 1;
  transform: scale(1);
  animation: partner-badge-bounce 1.1s ease-in-out infinite;
}

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

@keyframes partner-ring-pulse {
  0% { opacity: 0.95; transform: scale(0.96); }
  100% { opacity: 0; transform: scale(1.18); }
}

/* 首次就绪引导：压暗棋盘，突出左下伙伴 */
.partner-guide {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.partner-guide-dim {
  position: absolute;
  inset: 0;
  background: rgba(18, 28, 52, 0.52);
  pointer-events: none;
}

.partner-guide-card {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-bottom) + clamp(118px, 20cqh, 168px));
  transform: translateX(-50%);
  z-index: 41;
  width: min(86%, 320px);
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 8px 10px;
  padding: 12px 14px 12px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff8e8, #ffe7b8);
  border: 3px solid #fff;
  box-shadow: 0 8px 0 #c98a3e, 0 14px 28px rgba(40, 28, 18, 0.35);
  pointer-events: auto;
}

.partner-guide-face {
  grid-row: 1 / 3;
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.12);
}

.partner-guide-copy {
  display: grid;
  gap: 3px;
  color: #5a3a28;
  line-height: 1.25;
}

.partner-guide-copy b {
  font-size: clamp(14px, 3.8cqw, 17px);
  color: #c44d2e;
}

.partner-guide-copy span {
  font-size: clamp(11px, 3.1cqw, 13px);
  font-weight: 700;
}

.partner-guide-copy em {
  font-style: normal;
  font-size: clamp(10px, 2.8cqw, 12px);
  color: #8a5a3a;
}

.partner-guide-ok {
  grid-column: 1 / -1;
  margin-top: 2px;
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  background: linear-gradient(180deg, #ffd56a, #f4a83a);
  box-shadow: 0 3px 0 #c47d18;
  color: #6a3d00;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.partner-guide-ok:active { transform: translateY(1px); }

.partner-guide-finger {
  position: absolute;
  left: clamp(42px, 16cqw, 72px);
  bottom: calc(var(--safe-bottom) + clamp(72px, 12cqh, 98px));
  z-index: 41;
  font-size: clamp(28px, 7cqw, 36px);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
  animation: partner-finger-bob 0.85s ease-in-out infinite;
  pointer-events: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .partner.is-ready,
  .partner.is-ready .partner-ring,
  .partner.is-ready .partner-ready-badge,
  .partner-tap-hint,
  .partner-guide-finger,
  .partner.is-ready::before {
    animation: none;
  }
}

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

.panda-route-layer,
.panda-charge-trail {
  position: absolute;
  inset: 0;
  z-index: 22;
  border-radius: 5%;
}
.panda-route-layer { touch-action: none; background: rgba(35, 58, 46, .17); }
.board-frame.is-panda-routing { z-index: 3; }
.panda-charge-trail { pointer-events: none; }
.panda-route-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.panda-route-line polyline {
  fill: none;
  stroke: #fff4a8;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px #48a875) drop-shadow(0 0 5px #ffe27c);
}
.panda-charge-runner {
  position: absolute;
  z-index: 2;
  width: 10%; height: 10%;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(1.35);
  filter: drop-shadow(0 2px 2px #326748) drop-shadow(0 0 7px #fff1a0);
  pointer-events: none;
}
.panda-charge-trail .panda-route-line polyline { animation: panda-charge-flash .23s ease-out both; }
.panda-route-origin {
  position: absolute;
  width: 10%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 3px solid #fff5ae;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(48, 160, 103, .82), 0 0 18px 5px rgba(255, 236, 129, .85);
  pointer-events: none;
  animation: panda-route-pulse .75s ease-in-out infinite alternate;
}
.panda-route-caption {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 6px 12px;
  white-space: nowrap;
  border: 2px solid #e5f5cd;
  border-radius: 999px;
  color: #fffaf0;
  background: #396e55;
  box-shadow: 0 3px 0 #245139, 0 5px 10px #24433166;
  font-size: clamp(11px, 3.1cqw, 16px);
  font-weight: 800;
  pointer-events: none;
}
.panda-route-caption b { color: #ffe49c; margin-left: 5px; }
.panda-route-cancel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 60px; min-height: 36px;
  border: 2px solid #f4e0b1;
  border-radius: 999px;
  color: #6b4930; background: #fff5df;
  box-shadow: 0 3px 0 #b38b62;
  font-weight: 800;
  pointer-events: auto;
}
.panda-route-guide {
  position: absolute;
  inset: 3% 5% auto;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 13px 14px;
  border: 4px solid #f6e4b9;
  border-radius: 22px;
  color: #4d422e;
  background: #fff9e8;
  box-shadow: 0 7px 0 #98734f, 0 18px 30px #263d2d80;
  text-align: center;
}
.panda-route-guide img { width: 52px; height: 52px; object-fit: contain; }
.panda-route-guide b { font-size: clamp(20px, 5cqw, 26px); }
.panda-route-guide p { margin: 0; font-size: clamp(12px, 3cqw, 15px); line-height: 1.35; }
.panda-route-guide button {
  margin-top: 3px;
  padding: 9px 25px;
  border: 2px solid #438951;
  border-radius: 999px;
  color: white; background: #67ad69;
  box-shadow: 0 3px 0 #2f6e42;
  font-weight: 900;
}
.panda-demo-board {
  position: relative;
  width: min(100%, 210px);
  aspect-ratio: 4 / 3;
  border: 3px solid #c6a66d;
  border-radius: 15px;
  overflow: hidden;
  background-color: #e1f1cf;
  background-image: linear-gradient(#b6d3a04d 1px, transparent 1px), linear-gradient(90deg, #b6d3a04d 1px, transparent 1px);
  background-size: 25% 33.333%;
}
.panda-demo-board svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; }
.panda-demo-board polyline { fill: none; stroke: #fff4a8; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px #19884e); }
.panda-demo-cell {
  position: absolute;
  left: calc(var(--c) * 25%); top: calc(var(--r) * 33.333%);
  width: 25%; height: 33.333%;
  display: grid; place-items: center;
  transition: opacity .24s, scale .24s, filter .24s;
}
.panda-demo-cell img { width: 86%; height: 86%; object-fit: contain; }
.panda-demo-cell.is-hit[data-demo-step="1"], .panda-demo-cell.is-hit[data-demo-step="2"] { opacity: .24; scale: .55; }
.panda-demo-cell.is-hit:not(.panda-demo-boss)::after { content: '✦'; position: absolute; color: #fff2a0; font-size: 30px; scale: 2; }
.panda-demo-boss.is-hit { filter: brightness(1.65) drop-shadow(0 0 8px #ffdf6b); }
.panda-demo-boss.is-hit::after { content: '−1'; position: absolute; right: -1px; top: -12px; color: #b63136; font-weight: 1000; font-size: 18px; text-shadow: 1px 1px #fff; }
.panda-demo-board .panda-demo-runner {
  position: absolute; z-index: 3;
  width: 25%; height: 33.333%; object-fit: contain;
  transform: translate(-50%, -50%) scale(.82);
  transition: left .3s ease-out, top .3s ease-out;
  filter: drop-shadow(0 1px 3px #25734e);
}
.panda-demo-caption { min-height: 23px; font-size: clamp(13px, 3.3cqw, 16px); font-weight: 900; color: #41774c; }
.panda-demo-actions { display: flex; gap: 8px; }
.panda-route-guide .panda-demo-replay { color: #73573a; background: #fff4d8; border-color: #d8b77e; box-shadow: 0 3px 0 #b49460; padding-inline: 14px; }
@keyframes panda-route-pulse { from { scale: .88; opacity: .72; } to { scale: 1.08; opacity: 1; } }
@keyframes panda-charge-flash { from { opacity: 1; stroke-width: 3.2; } to { opacity: 0; stroke-width: 1.2; } }
@media (prefers-reduced-motion: reduce) {
  .panda-route-origin, .panda-charge-trail .panda-route-line polyline { animation: none; }
}

.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 0 0 3px #fff3a8,
      0 0 0 6px rgba(255, 180, 64, 0.45),
      0 8px 22px rgba(255, 170, 40, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 3px #ffe28a,
      0 0 0 10px rgba(255, 180, 64, 0),
      0 10px 26px rgba(255, 170, 40, 0.55);
  }
}

@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);
  /* 模糊层常驻在棋盘上方，移动端 GPU 代价高：手机上用更实的底色替代，视觉几乎一致 */
}

@media (min-width: 900px) and (pointer: fine) {
  .prop-bar {
    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;
  contain: layout style;
  will-change: transform, opacity;
}

.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: translate(-50%, -50%) scale(1);
  }
  40% {
    transform: translate(-50%, -50%) scale(1.18);
  }
}

@keyframes clock-hud-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  45% { transform: translate(-50%, -50%) scale(1.2); filter: drop-shadow(0 0 10px #8eeeff) brightness(1.16); }
}

/* 时钟加步：完全脱离布局，从道具栏飞向步数徽章，不再把顶部栏挤动。 */
.clock-gain-fx {
  position: absolute;
  z-index: 1600;
  left: var(--clock-start-x);
  top: var(--clock-start-y);
  width: 68px;
  height: 68px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: clock-gain-flight 900ms cubic-bezier(.2, .74, .2, 1) both;
}
.clock-gain-fx img {
  position: absolute;
  inset: 7px;
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(31, 88, 139, .34));
  animation: clock-gain-spin 520ms ease-out both;
}
.clock-gain-fx b {
  position: absolute;
  left: 50%;
  top: -13px;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #fff56e;
  -webkit-text-stroke: 2px #267cb5;
  paint-order: stroke fill;
  font: 900 24px/1 'Fredoka', var(--font);
  animation: clock-gain-number 720ms ease-out both;
}
.clock-gain-fx i {
  position: absolute;
  inset: 2px;
  border: 3px solid rgba(113, 232, 255, .88);
  border-radius: 50%;
  animation: clock-gain-ring 560ms ease-out both;
}
.clock-gain-fx i:nth-of-type(2) { animation-delay: 120ms; }
.clock-gain-fx i:nth-of-type(3) { animation-delay: 240ms; }
@keyframes clock-gain-flight {
  0% { opacity: 0; transform: translate(-50%, -35%) scale(.6); }
  18% { opacity: 1; transform: translate(-50%, -80%) scale(1.08); }
  55% { opacity: 1; transform: translate(-50%, -115%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--clock-dx)), calc(-50% + var(--clock-dy))) scale(.42); }
}
@keyframes clock-gain-spin {
  from { transform: rotate(-18deg) scale(.8); }
  65% { transform: rotate(16deg) scale(1.12); }
  to { transform: rotate(0) scale(1); }
}
@keyframes clock-gain-number {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(.65); }
  28%, 72% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -14px) scale(.9); }
}
@keyframes clock-gain-ring {
  from { opacity: .85; transform: scale(.45); }
  to { opacity: 0; transform: scale(1.35); }
}

.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));
}

/* 烈日沙王：流沙只是限时标记，不锁交换、不复用冰层/石块耐久。 */
.quicksand-overlay {
  position: absolute;
  inset: 3%;
  z-index: 4;
  pointer-events: none;
  border-radius: 50%;
  filter: drop-shadow(0 2px 3px rgba(124,69,24,.32));
}

.quicksand-overlay i {
  position: absolute;
  inset: 7%;
  border: clamp(2px, .65cqw, 4px) solid rgba(246,178,55,.88);
  border-left-color: rgba(255,244,168,.95);
  border-bottom-color: rgba(190,103,28,.72);
  border-radius: 48% 52% 44% 56%;
  background: radial-gradient(circle, transparent 46%, rgba(232,139,38,.25) 49%, rgba(255,220,105,.18) 67%, transparent 70%);
  animation: quicksand-spin 1.05s linear infinite;
}

.quicksand-overlay b {
  position: absolute;
  right: -1%;
  top: -3%;
  display: grid;
  place-items: center;
  width: 31%;
  aspect-ratio: 1;
  border: 2px solid #fff5c9;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(#f7a92f,#dc681f);
  box-shadow: 0 2px 4px rgba(105,50,24,.42);
  font: 900 clamp(10px,3cqw,15px)/1 'Fredoka',var(--font);
}

.tile.boss-quicksand-mark .quicksand-overlay { animation: quicksand-arrive 420ms cubic-bezier(.2,1.35,.35,1) both; }
.tile.quicksand-sink .gem { animation: quicksand-sink 360ms ease-in both; }
.tile.quicksand-sink .quicksand-overlay { animation: quicksand-close 360ms ease-in both; }

@keyframes quicksand-spin { to { transform: rotate(360deg); } }
@keyframes quicksand-arrive { from { opacity:0; transform:scale(1.55); } to { opacity:1; transform:scale(1); } }
@keyframes quicksand-sink { to { opacity:0; transform:scale(.35) translateY(18%); } }
@keyframes quicksand-close { to { opacity:0; transform:scale(.28) rotate(180deg); } }

@media (prefers-reduced-motion: reduce) {
  .quicksand-overlay i,
  .tile.boss-quicksand-mark .quicksand-overlay,
  .tile.quicksand-sink .gem,
  .tile.quicksand-sink .quicksand-overlay { animation: none; }
}

.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.is-tough-block::after {
  content: attr(data-hp);
  position: absolute;
  z-index: 4;
  right: 2%;
  bottom: 3%;
  display: grid;
  place-items: center;
  width: 24%;
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 50%;
  background: #d86145;
  color: #fff;
  box-shadow: 0 2px 3px rgba(76,43,45,.35);
  font: 900 clamp(9px,2.4cqw,13px)/1 'Fredoka',var(--font);
  pointer-events: none;
}

.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-hit[data-block='cloud'] .block-img { animation-name: cloud-hit; }

/* 彩云：闲置蠕动只用 transform；正式三态贴图不再叠滤镜（省 GPU）。 */
.tile[data-block='cloud'] .block-img {
  animation: cloud-wriggle 2.8s ease-in-out infinite;
  animation-delay: calc(var(--cloud-phase, 0) * -0.55s);
  transform-origin: 50% 70%;
}
.tile.cloud-push .block-img { animation: cloud-push 260ms ease-out both; }
.tile.cloud-drift .block-img { animation: cloud-drift-hop 160ms ease-out both; }
.tile.cloud-drift-land .block-img { animation: cloud-drift-land 240ms cubic-bezier(.2,1.1,.3,1) both; }
.tile.block-hit[data-block='cloud'] .block-img,
.tile.cloud-push .block-img,
.tile.cloud-drift .block-img,
.tile.cloud-drift-land .block-img,
.tile.block-break.break-cloud .block-img {
  animation-iteration-count: 1;
}

@keyframes cloud-wriggle {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1, 1) rotate(0deg); }
  30% { transform: translate3d(0, -2%, 0) scale(1.035, .965) rotate(-1.6deg); }
  55% { transform: translate3d(0, 1.5%, 0) scale(.975, 1.03) rotate(1.2deg); }
  78% { transform: translate3d(0, -1%, 0) scale(1.02, .985) rotate(-.8deg); }
}
@keyframes cloud-hit {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0); }
  35% { transform: translate3d(0, 3%, 0) scale(1.12, .84) rotate(-3deg); }
  70% { transform: translate3d(0, -2%, 0) scale(.94, 1.08) rotate(2deg); }
  100% { transform: translate3d(0, 0, 0) scale(1) rotate(0); }
}
@keyframes cloud-push {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  40% { transform: translate3d(0, -4%, 0) scale(1.1, .88); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes cloud-drift-hop {
  0% { transform: translate3d(0, 0, 0) scale(1, 1); }
  50% { transform: translate3d(0, -5%, 0) scale(1.12, .9); }
  100% { transform: translate3d(0, 0, 0) scale(.96, 1.04); }
}
@keyframes cloud-drift-land {
  0% { transform: translate3d(0, -12%, 0) scale(.86, 1.08); opacity: .7; }
  55% { transform: translate3d(0, 3%, 0) scale(1.06, .94); opacity: 1; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}
@keyframes cloud-break {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); }
  40% { opacity: 1; transform: translate3d(0, -4%, 0) scale(1.16, .82) rotate(-7deg); }
  100% { opacity: 0; transform: translate3d(0, 8%, 0) scale(.48) rotate(12deg); }
}

.board.is-low-fx .tile[data-block='cloud'] .block-img {
  animation: none;
}
.board.is-low-fx .tile.block-hit[data-block='cloud'] .block-img { animation: cloud-hit 180ms ease-out both; }
.board.is-low-fx .tile.cloud-drift .block-img { animation: cloud-drift-hop 120ms ease-out both; }
.board.is-low-fx .tile.cloud-drift-land .block-img { animation: cloud-drift-land 160ms ease-out both; }
.board.is-low-fx .tile.cloud-push .block-img { animation: cloud-push 180ms ease-out both; }
.board.is-low-fx .tile.block-break.break-cloud .block-img { animation: cloud-break 140ms ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .tile[data-block='cloud'] .block-img,
  .tile.cloud-push .block-img,
  .tile.cloud-drift .block-img,
  .tile.cloud-drift-land .block-img {
    animation: none !important;
  }
}

.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; }
.tile.block-break.break-cloud .block-img { animation-name: cloud-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%; }
.obstacle-burst.is-cloud i { background: linear-gradient(135deg, #f7fbff, #9ad4ff); border-radius: 55% 45% 50% 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));
}

/* 下落/低特效时关掉特殊棋滤镜，避免与 transform 叠加整板重绘 */
.board.is-low-fx .tile[data-special] .gem,
.tile.is-falling[data-special] .gem,
.board.is-low-fx .tile.special-fire .gem,
.board.is-low-fx .tile.match-ready .gem {
  filter: none;
}

.board.is-low-fx .skill-fx-flower,
.board.is-low-fx .skill-fx-burn { animation: none; }
/* 技能板闪改用遮罩亮度，避免 filter 作用在整块棋盘子树 */
.skill-fx-flower,
.skill-fx-burn {
  position: relative;
}
.skill-fx-flower::after,
.skill-fx-burn::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  border-radius: inherit;
  animation: skill-board-veil .48s ease;
}
.skill-fx-burn::after { animation-name: skill-board-veil-burn; }
@keyframes skill-board-veil {
  0% { background: transparent; }
  40% { background: rgba(255, 248, 210, 0.22); }
  100% { background: transparent; }
}
@keyframes skill-board-veil-burn {
  0% { background: transparent; }
  35% { background: rgba(255, 170, 90, 0.2); }
  100% { background: transparent; }
}

.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; }

#popup-pause .popup-panel { max-height: 100%; }
#popup-pause .popup-actions { gap:5px; }
#popup-pause .popup-actions .btn { min-height:46px; }
#popup-pause .popup-actions .btn-image { height:48px; font-size:17px; --slice:17px; }
.pause-save-note { margin:0 4px 2px; color:#537b70; font-size:12px; font-weight:700; line-height:1.35; text-align:center; }
.pause-save-note[hidden] { display:none; }
.pause-save-note.is-error { color:#bd5262; }
.pause-scroll { flex:1 1 auto; min-height:0; width:100%; overflow-y:auto; overscroll-behavior:contain; padding:2px 3px 8px; scrollbar-width:thin; scrollbar-color:#e7a9c5 transparent; }
.pause-audio { margin:9px 0 3px; padding:5px 9px; border:2px solid #e6c4d8; border-radius:17px; background:linear-gradient(145deg,#fff9fd,#f8e8f2); box-shadow:0 3px 0 #d7a9c4; }
.pause-audio-row { min-height:56px; display:flex; align-items:center; gap:8px; text-align:left; }
.pause-audio-row + .pause-audio-row { border-top:1px solid #e8cfe0; }
.pause-audio-icon { flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(#ac83d8,#7958ae); box-shadow:inset 0 2px #d6b5f1,0 2px 0 #654393; }
.pause-audio-icon img { width:23px; height:23px; object-fit:contain; }
.pause-audio-copy { flex:1 1 auto; min-width:0; display:grid; gap:1px; color:#694e83; }
.pause-audio-copy b { font-size:14px; line-height:1.1; }
.pause-audio-copy small { color:#9a82a7; font-size:10px; line-height:1.2; }
.pause-audio .switch { flex:none; width:60px; height:34px; }
@media (max-width:350px) { .pause-audio-copy small { font-size:9px; } .pause-audio .switch { width:55px; height:31px; } }

@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: 8px;
  width: 100%;
  padding: 8px;
  border-radius: 16px;
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(255, 214, 120, .35), transparent 55%),
    radial-gradient(100% 70% at 90% 10%, rgba(126, 200, 255, .35), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(210, 232, 255, .55));
  color: var(--ink-soft);
  font-size: clamp(11px, 1.7cqh, 14px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 4px 14px rgba(40, 70, 110, .12);
}

.loadout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}
.loadout-head > strong {
  color: #2f5a86;
  font-size: clamp(13px, 2cqh, 16px);
}
.loadout-count {
  font-size: 11px;
  color: #5a7a9a;
}
.loadout-count b { color: #e08a20; font-size: 14px; }

.loadout-gems {
  display: grid;
  gap: 6px;
  max-height: 88px;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
}
.loadout-gem-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 6px;
  align-items: center;
}
.loadout-gem-label {
  font-size: 10px;
  color: #6a849e;
  text-align: center;
}
.loadout-gem-picks {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}
.loadout-gem-picks::-webkit-scrollbar { display: none; }
.loadout-gem {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 52px;
  padding: 4px 6px 5px;
  border: 2px solid rgba(90, 142, 184, .22);
  border-radius: 12px;
  background: rgba(255,255,255,.75);
  color: #3a5a78;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.loadout-gem img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.18));
  animation: loadout-gem-bob 2.4s ease-in-out infinite;
}
.loadout-gem:nth-child(2n) img { animation-delay: .3s; }
.loadout-gem:nth-child(3n) img { animation-delay: .55s; }
.loadout-gem b { font-size: 10px; font-weight: 700; }
.loadout-gem.is-selected {
  border-color: #ffb536;
  background: #fff6c9;
  box-shadow: 0 2px 0 #df9c2f, 0 0 0 2px rgba(255,255,255,.75) inset;
  transform: translateY(-2px);
}

.popup-goal .popup-body {
  justify-content: flex-start;
  gap: 8px;
}

.loadout-skills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  max-height: none;
  overflow: visible;
  padding: 0;
}
.loadout-animals {
  display: flex;
  gap: 6px;
  justify-content: center;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.loadout-animals::-webkit-scrollbar { display: none; }
.loadout-animal {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 44px;
}
.loadout-animal img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(40, 70, 110, .18));
}
.loadout-animal b { font-size: 10px; color: #3d6284; }

.goal-partner { position: relative; }

.loadout-skill {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 26px;
  min-height: 46px;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(90, 142, 184, .22);
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  color: #2d4d6e;
}
.loadout-skill__pick {
  display: grid;
  grid-template-columns: 32px 1fr 16px;
  gap: 4px;
  align-items: center;
  min-width: 0;
  padding: 4px 2px 4px 4px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.loadout-skill__pick img { width: 30px; height: 30px; object-fit: contain; }
.loadout-skill__pick b { display: flex; gap: 3px; align-items: baseline; font-size: 12px; }
.loadout-skill__pick em { font-style: normal; font-size: 9px; color: #e07a45; }
.loadout-skill__pick small { font-size: 10px; color: #5a7894; }
.loadout-skill__pick i { font-style: normal; font-weight: 800; color: #e08a20; }
.loadout-skill__info {
  align-self: stretch;
  border: 0;
  border-left: 1px solid rgba(90, 142, 184, .2);
  background: rgba(255,255,255,.45);
  color: #3d6d9a;
  font-size: 11px;
  font-weight: 800;
}
.skill-sheet {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 12px 36px 10px 12px;
  overflow: auto;
  border-radius: 14px;
  background: #fffdf6;
  box-shadow: 0 8px 24px rgba(40, 70, 110, .22);
  text-align: left;
}
.skill-sheet[hidden] { display: none; }
.skill-sheet img { width: 42px; height: 42px; object-fit: contain; }
.skill-sheet b { font-size: 15px; color: #1f4a72; }
.skill-sheet small { color: #5a7894; font-size: 11px; }
.skill-sheet strong { color: #c45d18; font-size: 13px; }
.skill-sheet p { margin: 2px 0 0; color: #3d5670; font-size: 12px; line-height: 1.45; }
.skill-sheet__x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #e7f2fb;
  color: #3d6284;
  font-size: 18px;
}
.loadout-skill img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.loadout-skill span {
  display: grid;
  min-width: 0;
}
.loadout-skill b { font-size: 12px; color: #1f4a72; }
.loadout-skill small {
  font-size: 10px;
  color: #5a7894;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loadout-skill i {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  color: #7a92aa;
  text-align: center;
}
.loadout-skill.is-selected {
  border-color: #ffb536;
  background: #fff8dc;
  box-shadow: 0 2px 0 #df9c2f;
}
.loadout-skill.is-selected i { color: #e08a20; font-size: 14px; }
.loadout-skill[data-kind="passive"] i { color: #4f8a3a; }
.loadout-empty {
  margin: 0;
  padding: 8px;
  text-align: center;
  color: #6a849e;
  font-size: 12px;
}

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

@media (prefers-reduced-motion: reduce) {
  .loadout-gem img,
  .loadout-skill__face img { animation: none; }
}

.endless-skill-orb.is-passive {
  opacity: .92;
}
.endless-skill-orb.is-passive .endless-skill-orb__water,
.endless-skill-orb.is-passive .endless-skill-orb__wave,
.endless-skill-orb.is-passive .endless-skill-orb__pct {
  display: none;
}
.endless-skill-orb.is-passive::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(106, 154, 74, .55);
  pointer-events: none;
}
@keyframes passive-proc {
  0% { transform: scale(1) translateY(0); filter: brightness(1); }
  30% { transform: scale(1.24) translateY(-8px); filter: brightness(1.45); }
  58% { transform: scale(0.94) translateY(2px); filter: brightness(1.08); }
  80% { transform: scale(1.08) translateY(-3px); filter: brightness(1.2); }
  100% { transform: scale(1) translateY(0); filter: brightness(1); }
}
@keyframes passive-ring {
  0% { box-shadow: 0 0 0 2px rgba(255, 214, 90, .35); }
  35% { box-shadow: 0 0 0 8px rgba(255, 220, 90, .9); }
  100% { box-shadow: 0 0 0 2px rgba(106, 154, 74, .55); }
}
.endless-skill-orb.is-proc .endless-skill-orb__disk {
  animation: passive-proc .48s cubic-bezier(.2, .85, .2, 1);
}
.endless-skill-orb.is-proc::after {
  animation: passive-ring .48s ease;
}
@media (prefers-reduced-motion: reduce) {
  .endless-skill-orb.is-proc .endless-skill-orb__disk,
  .endless-skill-orb.is-proc::after { animation: none; }
}

.board.is-silver-aim { outline: 2px solid rgba(176, 192, 208, .85); outline-offset: 2px; }
.skill-fx-stripe { animation: skill-stripe-pop .4s ease; }
@keyframes skill-stripe-pop {
  0% { transform: scale(.7); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.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: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, calc(18px - (var(--n, 2) - 2) * 4px), 16px);
  --n: 2;
  padding: clamp(8px, 2.4cqh, 14px) clamp(8px, 3cqw, 14px);
  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(22px, calc(48px - (var(--n, 2) - 2) * 7px), 42px);
  height: clamp(22px, calc(48px - (var(--n, 2) - 2) * 7px), 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(13px, calc(22px - (var(--n, 2) - 2) * 2px), 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[hidden] {
  display: none;
}

.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:not(.is-recommended) small {
  background: #6f86c7;
}
.prop-btn.is-capped {
  filter: grayscale(.35);
  opacity: .72;
}

/* 没库存的道具都可以点进商店；只有推荐道具缺货时才呼吸提示 */
.goal-prop.is-out {
  cursor: pointer;
}

.goal-prop.is-recommended.is-out {
  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-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-continue-tip {
  margin:6px 12px 0; padding:8px 10px; border-radius:12px;
  background:#e8f7ff; color:#3d6f8a; font-size:12px; font-weight:700; text-align:center; line-height:1.35;
}
.endless-continue-tip[hidden] { display: none !important; }
.endless-lobby-actions { display:flex; flex-direction:column; gap:8px; }
.endless-lobby-actions .btn { width:100%; }
.endless-rule-list {
  margin:8px 0 4px; padding:0 0 0 18px; color:#66527e; font-size:12px; line-height:1.45; text-align:left;
  /* 规则文案会随版本变长：小屏时自己收缩滚动，绝不把下面的按钮顶出面板（隐藏滚动条） */
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.endless-rule-list::-webkit-scrollbar { width:0; height:0; }
@media (max-height: 660px) {
  .endless-rule-list { font-size:11px; line-height:1.34; margin:5px 0 2px; }
}
.endless-soft-tip { margin:4px 0 0; color:#8a7a9e; font-size:11px; }
.endless-choice-popup,
.endless-start-popup {
  box-sizing: border-box;
  width: min(94%, 390px);
  height: calc(100vh - 40px);
  max-height: calc(100vh - 40px);
  height: min(94cqh, calc(100dvh - 20px));
  max-height: calc(100dvh - 20px);
}
.endless-start-popup > .popup-flag { top: var(--ear-peek); }
.endless-start-popup > .popup-x { top: var(--ear-peek); right: 8px; transform: translateY(-32%); }
.endless-start-popup > .popup-x:active { transform: translateY(-32%) scale(.9); }
.endless-start-popup .popup-panel {
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  min-height: 0;
  gap: clamp(8px, 1.5cqh, 14px);
  padding-bottom: clamp(12px, 2cqh, 22px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.endless-start-popup .endless-start-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.endless-start-popup .endless-start-scroll::-webkit-scrollbar { display: none; }
.endless-start-popup .endless-start-lead { margin-bottom: 4px; }
.endless-start-popup .endless-start-list { margin-bottom: 4px; }
.endless-start-popup .endless-start-tools {
  min-height: 0;
  overflow: visible;
  margin-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.endless-start-popup .endless-start-tools::-webkit-scrollbar { width: 0; height: 0; }
.endless-start-popup .popup-actions {
  flex: 0 0 auto;
  padding-top: 2px;
  margin-top: 2px;
}
.endless-start-lead { margin:0 0 10px; color:#704f83; font-weight:700; }
.endless-start-list {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-bottom:10px;
}
.endless-start-card {
  display:grid;
  gap:4px;
  justify-items:center;
  padding:10px 6px;
  border:2px solid #fff;
  border-radius:16px;
  background:linear-gradient(180deg,#f3fbff,#d7ecff);
  box-shadow:0 4px 0 #7eabd4;
  color:#684199;
  animation:endless-card-in .28s ease both;
}
.endless-start-card img { width:48px; height:48px; object-fit:contain; }
.endless-start-card b { font-size:13px; }
.endless-start-card span { font-size:11px; font-weight:800; }
.endless-start-card small { color:#6d7f96; font-size:9px; line-height:1.25; text-align:center; }
.endless-start-card.is-selected {
  border-color:#f6d56a;
  box-shadow:0 0 0 2px #ffe89a, 0 4px 0 #c9a24a;
  background:linear-gradient(180deg,#fff8d6,#ffe7a0);
}
.endless-start-tools {
  display:grid; gap:7px; margin:2px 0 10px; padding:9px 10px;
  border:2px solid rgba(255,255,255,.9); border-radius:15px;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(218,238,255,.72));
  box-shadow:0 3px 0 rgba(100,145,188,.3);
}
.endless-start-tools > div:first-child { display:flex; align-items:center; justify-content:space-between; color:#704f83; font-size:11px; }
.endless-start-tools > div:first-child small { color:#4d82aa; font-weight:900; }
.endless-start-tool-list { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.endless-start-tool {
  display:grid; justify-items:center; gap:2px; min-width:0; padding:5px 2px 4px;
  border:2px solid transparent; border-radius:10px; background:rgba(255,255,255,.72);
  color:#69788b; box-shadow:0 2px 0 rgba(95,126,157,.22);
}
.endless-start-tool img { width:27px; height:27px; object-fit:contain; }
.endless-start-tool span { font-size:8px; font-weight:900; white-space:nowrap; }
.endless-start-tool > small { color:#718196; font-size:7px; font-weight:800; }
.endless-start-tool > div { display:grid; grid-template-columns:20px 18px 20px; align-items:center; justify-content:center; gap:2px; }
.endless-start-tool > div button {
  width:20px; height:20px; padding:0; border:0; border-radius:50%; background:#72b7e6; color:#fff;
  box-shadow:0 2px 0 #4e8ebd; font:900 14px/20px system-ui;
}
.endless-start-tool > div button:disabled { opacity:.3; box-shadow:none; }
.endless-start-tool > div b { color:#684199; font-size:11px; }
.endless-start-tool.is-empty { filter:saturate(.45); opacity:.66; }
.endless-start-tool.is-selected { border-color:#f2be45; background:#fff3b8; color:#8a5b1f; box-shadow:0 2px 0 #c9902d; }
.endless-start-tool.is-denied { animation:shake .24s ease; }
.endless-start-tools > p { margin:0; color:#7c708b; font-size:8px; font-weight:800; text-align:center; }
@keyframes endless-card-in {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:none; }
}
.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:8px; border-radius:12px; background:rgba(103,74,137,.1); color:#775a89; font-size:10px; line-height:1.35; text-align:left; }
.endless-owned-inner { display:grid; gap:6px; }
.endless-chip-row { display:flex; flex-wrap:wrap; gap:6px; }
.endless-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px 3px 4px; border-radius:999px; background:#fff; color:#684199; font-size:10px; font-weight:800;
}
.endless-chip img { width:18px; height:18px; object-fit:contain; }
.endless-bag-line { color:#2f8f7a; font-weight:800; font-size:10px; }
.endless-choice-list { display:grid; gap:8px; }
.endless-bless-card {
  position:relative;
  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-bless-card.rarity-uncommon {
  background:linear-gradient(180deg,#e8fff6,#c8f0e2);
  box-shadow:0 4px 0 #6fafa0;
  border-left:5px solid var(--partner-color, #5db89a);
}
.endless-bless-card.rarity-rare {
  background:linear-gradient(180deg,#f3e8ff,#e0c8ff);
  box-shadow:0 4px 0 #9a74c4, 0 0 0 1px #f0d27a;
}
.endless-bless-icon { grid-row:span 2; width:44px; height:44px; object-fit:contain; }
.endless-bless-card b { font-size:15px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.endless-bless-card small { color:#8a5d49; }
.endless-lv-pill {
  font-style:normal; font-size:10px; font-weight:800;
  padding:2px 6px; border-radius:999px; background:#684199; color:#fff;
}
.endless-rare-tag {
  position:absolute; top:6px; right:8px;
  font-style:normal; font-size:9px; font-weight:800;
  padding:2px 6px; border-radius:999px; background:#684199; color:#ffe77d;
}
.endless-retire { margin-top:12px; border:0; background:transparent; color:#936f91; text-decoration:underline; font:12px var(--font); }

.endless-skills {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px 6px;
  align-self: stretch;
  align-content: flex-start;
  justify-content: flex-start;
  max-width: 100%;
  /* 技能多时压缩自身，把垂直空间还给棋盘 */
  flex: 0 1 auto;
  max-height: none;
  overflow: visible;
  padding: 10px 9px 10px;
  margin-block: 0;
}
.endless-skills[hidden] { display: none !important; }

.rogue-badge-proc {
  position: absolute;
  left: 9px;
  bottom: calc(100% - 2px);
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: min(245px, 84vw);
  padding: 6px 11px 6px 6px;
  border: 1.5px solid #fff1bc;
  border-radius: 16px;
  background: rgba(58, 48, 78, .94);
  color: #fff9e8;
  box-shadow: 0 3px 8px rgba(33, 26, 55, .22);
  font: 800 12px/1.2 var(--font);
  pointer-events: none;
  opacity: 0;
}
.rogue-badge-proc__row { display: flex; align-items: center; gap: 7px; }
.rogue-badge-proc img { width: 28px; height: 28px; flex: none; object-fit: contain; }
.rogue-badge-proc span { min-width: 0; }
.rogue-badge-proc small { display: block; margin-top: 2px; color: #ffe49b; font-size: 10px; }
.rogue-badge-proc .rogue-badge-proc__more { padding: 0 3px; }
.rogue-badge-proc.is-on { animation: rogue-badge-proc-in 2.15s ease-out both; }
@keyframes rogue-badge-proc-in {
  0% { opacity: 0; transform: translateY(8px) scale(.94); }
  12%, 78% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-9px) scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
  .rogue-badge-proc.is-on { animation: none; opacity: 1; }
}

/* 局内技能 tip：贴在技能条附近的圆角说明卡 */
.skill-tip {
  position: absolute;
  inset: 0;
  z-index: 28;
  display: grid;
  align-content: end;
  justify-items: center;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.skill-tip[hidden] { display: none !important; }
.skill-tip__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(18, 34, 58, 0.28);
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.skill-tip__card {
  --partner-color: #f2a0c0;
  position: relative;
  z-index: 1;
  pointer-events: auto;
  width: min(352px, 94%);
  margin-bottom: clamp(72px, 14cqh, 128px);
  padding: 14px 16px 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fffef8 0%, #fffdf7 42%, #fff8ee 100%);
  border: 3px solid #fff;
  box-shadow:
    0 0 0 2px var(--partner-color),
    0 12px 28px rgba(36, 58, 96, 0.28),
    0 3px 0 rgba(42, 58, 92, 0.18);
  text-align: left;
  animation: skill-tip-pop 0.28s cubic-bezier(0.18, 0.9, 0.28, 1.2) both;
}
.skill-tip__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--partner-color), transparent 46%);
  opacity: 0.18;
  pointer-events: none;
}
@keyframes skill-tip-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .skill-tip__card { animation: none; }
}
.skill-tip__x {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #e8f2fb);
  color: #3d6284;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 0 rgba(90, 120, 160, 0.25);
  cursor: pointer;
}
.skill-tip__x:active { transform: scale(0.92); }
.skill-tip__head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding-right: 28px;
}
.skill-tip__icon-wrap {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--partner-color) 78%);
  border: 3px solid #fff;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.18),
    inset 0 2px 4px rgba(255, 255, 255, 0.55);
}
.skill-tip__icon-wrap img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
.skill-tip__titles {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.skill-tip__titles b {
  font-size: 16px;
  color: #1f4a72;
  line-height: 1.2;
}
.skill-tip__titles span {
  font-size: 13px;
  font-weight: 700;
  color: #7a4a28;
}
.skill-tip__badges {
  display: grid;
  gap: 4px;
  justify-items: end;
}
.skill-tip__kind,
.skill-tip__lv {
  margin: 0;
  padding: 3px 8px;
  border-radius: 999px;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.skill-tip__kind.is-active {
  background: linear-gradient(180deg, #ffe7a0, #f0b24a);
  color: #6a3d00;
}
.skill-tip__kind.is-passive {
  background: linear-gradient(180deg, #d8f5b8, #8fc86a);
  color: #2c5a18;
}
.skill-tip__lv {
  background: linear-gradient(180deg, #3a5478, #243a58);
  color: #fff;
}
.skill-tip__lv[hidden],
.skill-tip__note[hidden] { display: none !important; }
.skill-tip__power {
  position: relative;
  z-index: 1;
  display: block;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 248, 232, 0.92);
  color: #c45d18;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  box-shadow: inset 0 0 0 1px rgba(196, 93, 24, 0.18);
}
.skill-tip__desc {
  position: relative;
  z-index: 1;
  margin: 8px 0 0;
  color: #3d5670;
  font-size: 12.5px;
  line-height: 1.5;
}
.skill-tip__note {
  position: relative;
  z-index: 1;
  margin: 8px 0 0;
  padding: 7px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, #e8f4ff, #d7eaff);
  color: #2f5f8a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: inset 0 0 0 1px rgba(90, 142, 184, 0.28);
}
.skill-tip__note.is-sealed {
  background: linear-gradient(180deg, #e8f6ff, #cfe8ff);
  color: #2a6ea0;
}
.skill-tip__note.is-charge {
  background: linear-gradient(180deg, #fff6e4, #ffe7bf);
  color: #8a4e12;
}
.skill-tip__note.is-deny {
  background: linear-gradient(180deg, #ffe8e8, #ffd0d0);
  color: #a12828;
}

/* 银狐换位：棋盘外用遮罩挡交互，不再对每个 HUD 子节点做 filter（连击时很贵） */
.screen-game.is-silver-focus > :not(.board-frame) {
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.screen-game.is-silver-focus > .board-frame {
  position: relative;
  z-index: 8;
  pointer-events: auto;
  filter: none;
  opacity: 1;
}
.screen-game.is-silver-focus > .board-frame::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 22px;
  box-shadow: 0 0 0 999px rgba(18, 12, 36, 0.55);
  pointer-events: none;
  z-index: -1;
}
.screen-game.is-silver-focus #btn-pause,
.screen-game.is-silver-focus .hint {
  pointer-events: auto;
  opacity: 1;
}
.screen-game.is-silver-focus .hint {
  pointer-events: none;
  color: #fff8d6;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* 圆形「蓄水」进度：内盘裁切蓄水，Lv 徽标挂在盘外 */
.endless-skill-orb {
  --pct: 0;
  position: relative;
  flex: 0 0 auto;
  width: var(--orb-size, 58px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.endless-skill-orb__disk {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2.5px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  background: #1a314d;
  box-shadow:
    0 2px 0 rgba(42, 58, 92, 0.55),
    0 4px 10px rgba(38, 31, 72, 0.28),
    inset 0 2px 4px rgba(255, 255, 255, 0.12);
}
.endless-skill-orb__water {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: 0;
  height: calc(var(--pct) * 1%);
  background: linear-gradient(180deg, #ffe7a8, var(--partner-color, #f4b52f) 52%, #c77820);
  transition: height 0.35s ease;
  pointer-events: none;
}
.endless-skill-orb__wave {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 10px;
  bottom: calc(var(--pct) * 1% - 5px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  opacity: calc(min(var(--pct), 92) / 100);
  transition: bottom 0.35s ease, opacity 0.35s ease;
  pointer-events: none;
  animation: endless-orb-wave 1.6s ease-in-out infinite;
}
@keyframes endless-orb-wave {
  0%, 100% { transform: translateX(-4%) scaleY(1); }
  50% { transform: translateX(4%) scaleY(1.15); }
}
.endless-skill-orb__face {
  position: relative;
  z-index: 2;
  width: 68%;
  height: 68%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}
.endless-skill-lv {
  position: absolute;
  right: -5px;
  bottom: -4px;
  z-index: 5;
  min-width: 22px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #3a5478, #243a58);
  color: #fff;
  font: 800 8px/1 var(--font);
  letter-spacing: 0.02em;
  border: 1.5px solid #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.endless-skill-orb__pct {
  position: absolute;
  left: 50%;
  top: 3px;
  z-index: 3;
  transform: translateX(-50%);
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(20, 36, 58, 0.72);
  color: #fff;
  font: 800 7px/12px var(--font);
  letter-spacing: 0.02em;
  pointer-events: none;
}
.endless-skill-orb.is-ready .endless-skill-orb__disk {
  border-color: #ffe89a;
  box-shadow: 0 0 0 3px rgba(255, 226, 138, .8), 0 0 15px rgba(255, 190, 65, .55), 0 4px 0 #c9a24a;
}
.endless-skill-orb.is-ready { z-index: 2; }
.endless-skill-orb.is-ready .endless-skill-orb__pct {
  background: linear-gradient(180deg, #ffd56a, #f4a83a);
  color: #6a3d00;
}
.endless-skills[data-count="3"] { --orb-size: 54px; }
.endless-skills[data-count="4"] { --orb-size: 49px; }
.endless-skills[data-count="5"] { --orb-size: clamp(38px, 12cqw, 44px); }
.endless-skills[data-count="6"] { --orb-size: clamp(34px, 11cqw, 40px); }
.endless-skill-orb.is-ready::before {
  content: ''; position: absolute; inset: -7px; border: 2px solid #fff3a2; border-radius: 50%;
  pointer-events: none; animation: skill-ready-ring 2.2s ease-out infinite;
}
.endless-skill-orb__sparkles { position:absolute; inset:0; pointer-events:none; display:none; }
.endless-skill-orb.is-ready .endless-skill-orb__sparkles { display:block; }
.endless-skill-orb__sparkles i {
  position:absolute; left:50%; top:50%; width:14px; height:14px;
  background:url('../../assets/ui/deco/fx-sparkle.png') center/contain no-repeat;
  opacity:0; animation: skill-ready-particle 2.4s ease-out infinite;
}
.endless-skill-orb__sparkles i:nth-child(1) { --sx:-24px; --sy:-39px; animation-delay:0s; }
.endless-skill-orb__sparkles i:nth-child(2) { --sx:22px; --sy:-48px; animation-delay:.7s; }
.endless-skill-orb__sparkles i:nth-child(3) { --sx:3px; --sy:-58px; animation-delay:1.4s; }
@keyframes skill-ready-ring { 0%{opacity:.9;transform:scale(.92)} 80%,100%{opacity:0;transform:scale(1.25)} }
@keyframes skill-ready-particle { 0%{opacity:0;transform:translate(-50%,-50%) scale(.2)} 18%{opacity:1} 75%{opacity:.8} 100%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.85)} }
@media (prefers-reduced-motion: reduce) { .endless-skill-orb.is-ready::before,.endless-skill-orb__sparkles i { animation:none; } .endless-skill-orb__sparkles { display:none!important; } }
.endless-skill-orb:active .endless-skill-orb__disk {
  transform: scale(0.94);
}

.pause-endless {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, #f4fbff, #e4f0ff);
  box-shadow: inset 0 0 0 2px #fff, 0 3px 0 #9bb8d8;
  text-align: left;
  color: #5a4a78;
}
.pause-endless[hidden] { display: none; }
.pause-endless-row {
  display: grid;
  gap: 4px;
}
.pause-endless-row > b {
  color: #684199;
  font-size: 12px;
}
.pause-endless-row > span {
  font-size: 12px;
  line-height: 1.35;
}
.pause-endless-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pause-endless-chip {
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff3c7;
  color: #8a5d49;
  font: 800 11px var(--font);
}
.pause-endless-tip {
  margin: 0;
  color: #8a6f9e;
  font-size: 11px;
  line-height: 1.4;
}

.pause-endless-overview { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.pause-endless-overview > span { min-width:0; min-height:50px; display:grid; place-items:center; align-content:center; grid-template-columns:auto auto; gap:0 3px; border-radius:13px; background:#fff; box-shadow:0 2px 0 #c7d6e8; color:#684199; }
.pause-endless-overview img { width:24px; height:24px; object-fit:contain; }
.pause-endless-overview b { font:700 17px/1.1 'Fredoka',var(--font); }
.pause-endless-overview small { grid-column:1/-1; color:#76869b; font-size:9px; }
.pause-build-open { width:100%; min-height:52px; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; align-items:center; padding:8px 12px; border:2px solid #8ed4c7; border-radius:14px; background:linear-gradient(180deg,#effff8,#d5f4e9); box-shadow:0 3px 0 #84bdb3; color:#327568; text-align:left; }
.pause-build-open span { font-weight:800; font-size:14px; }
.pause-build-open small { color:#699188; font-size:9px; }
.pause-build-open > b { grid-column:2; grid-row:1/-1; font:800 25px/1 sans-serif; }

.prop-bag-badge {
  position:absolute;
  left:2px; top:2px;
  z-index:2;
  padding:1px 5px;
  border-radius:999px;
  background:#2f9e86;
  color:#fff;
  font:800 9px var(--font);
  border:1.5px solid #fff;
  pointer-events:none;
}

.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;
  /* 卡内文字再长也不撑破面板（避免横向溢出） */
  min-width:0;
}
.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; min-width:0; overflow-wrap:anywhere; }
.endless-fail-summary > .endless-global-coins { display:flex; align-items:center; justify-content:center; gap:3px; background:linear-gradient(180deg,#fff6bd,#ffe17a); color:#9b5d17; }
.endless-fail-summary > .endless-global-coins img { width:19px; height:19px; object-fit:contain; flex:0 0 auto; }
.endless-fail-summary > small { grid-column:1/-1; color:#5f7596; font-size:9px; overflow-wrap:anywhere; }
.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% { color:#f04470; text-shadow:0 0 9px rgba(255,186,64,.9); } }

@media (max-width:360px) {
  .endless-start-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .endless-start-card { min-width:0; padding:7px 4px; }
  .endless-start-card img { width:42px; height:42px; }
}
@media (prefers-reduced-motion:reduce) {
  .endless-fail-summary.is-record > b { animation:none; }
  .endless-start-card { 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:21 / 9:24 又高又窄：cqh 会把字号和胶囊撑爆，目标说明和技能名被折断。改按宽度排。 */
@container stage (max-aspect-ratio: 9 / 20) {
  .popup,
  .popup-goal,
  .popup-tall {
    width: 100%;
    max-height: calc(100cqh - var(--safe-top) - var(--safe-bottom) - 12px);
  }

  .popup-backdrop {
    padding: calc(var(--safe-top) + 6px) 8px calc(var(--safe-bottom) + 6px);
  }

  .popup-x {
    top: 6px;
    right: 6px;
    transform: none;
  }

  .popup-x:active {
    transform: scale(0.9);
  }

  .popup-panel {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    gap: 6px;
    padding-inline: 10px;
  }

  .popup-body {
    justify-content: flex-start;
    gap: 6px;
  }

  .goal-learning {
    width: 100%;
    border-radius: 12px;
    padding: 6px 10px;
    font-size: clamp(11px, 3.3cqw, 13px);
    line-height: 1.35;
  }

  .loadout-skills {
    grid-template-columns: 1fr;
  }

  .loadout-skill small {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .loadout-animal {
    min-width: 0;
    flex: 1 1 0;
  }

  .loadout-animal b {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .shop-item {
    align-items: center;
    border-radius: 16px;
    padding: 6px;
    gap: 6px;
  }

  .shop-item-icon {
    width: 34px;
  }

  .shop-name {
    font-size: 12px;
    white-space: nowrap;
  }

  .shop-desc,
  .shop-have {
    font-size: 10px;
    line-height: 1.25;
  }

  .shop-actions {
    width: 56px;
  }

  .shop-buy,
  .shop-ad {
    min-width: 0;
    min-height: 28px;
    padding-inline: 2px;
    font-size: 10px;
  }
}
@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;
  }

  /* 矮屏保留首页小气球，仅略缩小避免挤占双模式按钮 */
  .home-deco .deco-balloon {
    display: block;
  }

  .db1,
  .db2 {
    width: 9.5cqw;
  }

  .db3,
  .db4 {
    width: 9cqw;
  }
}

/* 极矮（近 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(6px, 1.6cqh, 14px) 11px clamp(18px, 4.2cqh, 40px);
  }

  .screen-game .board-boss .boss-body {
    width: 100%;
    height: 100%;
  }
  .screen-game .board-boss[data-boss-id="stump-king"] .boss-body { width:112%; height:112%; }

  .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;
}

.rogue-debug-toggle[hidden], .rogue-debug-desk[hidden] { display: none; }
.rogue-debug-toggle {
  position: fixed; z-index: 11000;
  right: max(8px, env(safe-area-inset-right));
  top: max(8px, env(safe-area-inset-top));
  padding: 7px 11px;
  border: 2px solid #94e6c9; border-radius: 999px;
  background: #224b5e; color: white;
  font: 800 12px var(--font); box-shadow: 0 3px 9px #18344588;
}
.rogue-debug-desk {
  position: fixed; z-index: 11001;
  right: max(8px, env(safe-area-inset-right));
  top: max(8px, env(safe-area-inset-top));
  width: min(420px, calc(100vw - 16px));
  max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
  display: flex; flex-direction: column; gap: 9px;
  padding: 13px;
  border: 2px solid #95cde0; border-radius: 18px;
  background: #f5fbf3; color: #244552;
  box-shadow: 0 8px 0 #335367, 0 18px 38px #0a2737aa;
  font-family: var(--font);
}
.rogue-debug-head { display: flex; align-items: flex-start; justify-content: space-between; }
.rogue-debug-head div { display: grid; gap: 2px; }
.rogue-debug-head small { font-size: 10px; letter-spacing: .09em; color: #5d8390; }
.rogue-debug-head b { font-size: 20px; }
.rogue-debug-head button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #d8e8eb; color: #315669; font-size: 24px; }
.rogue-debug-status { margin: 0; min-height: 20px; font-size: 12px; line-height: 1.35; }
.rogue-debug-actions, .rogue-debug-stock, .rogue-debug-tabs { display: flex; gap: 6px; }
.rogue-debug-desk button, .rogue-debug-desk select, .rogue-debug-desk input {
  font-family: var(--font); font-size: 12px;
}
.rogue-debug-actions button, .rogue-debug-stock button, .rogue-debug-tabs button, .rogue-debug-card button {
  border: 1px solid #8db9a7; border-radius: 9px; padding: 7px 9px;
  color: #28534d; background: #e1f3e5; font-weight: 800;
}
.rogue-debug-desk button:disabled { opacity: .42; }
.rogue-debug-stock select, #rogue-debug-search {
  min-width: 0; border: 1px solid #aec9c9; border-radius: 9px; padding: 7px;
  color: #274a56; background: white;
}
.rogue-debug-stock select:first-child { width: 112px; flex: none; }
.rogue-debug-stock select:nth-child(2) { flex: 1; }
.rogue-debug-tabs button { flex: 1; }
.rogue-debug-tabs .is-active { background: #347d87; color: #fff; border-color: #347d87; }
#rogue-debug-search { width: 100%; }
.rogue-debug-list { min-height: 100px; overflow: auto; overscroll-behavior: contain; display: grid; gap: 6px; padding-right: 3px; }
.rogue-debug-card { display: flex; align-items: center; gap: 7px; padding: 7px; border: 1px solid #c8dcd8; border-radius: 11px; background: white; }
.rogue-debug-card.is-owned { border-color: #5ebca6; background: #f2fff6; }
.rogue-debug-card > img { width: 38px; height: 38px; object-fit: contain; flex: none; }
.rogue-debug-card > span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.rogue-debug-card b { font-size: 13px; }
.rogue-debug-card small { color: #607d84; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rogue-debug-card > button { flex: none; }
.rogue-debug-card small.rogue-debug-effect { color: #7a9094; font-size: 10.5px; line-height: 1.35; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.rogue-debug-effect-levels { display: grid; gap: 1px; }
.rogue-debug-effect-levels .is-current { color: #2f6f78; font-weight: 700; }
.rogue-debug-card small.rogue-debug-effect-cap { color: #347d87; }
.rogue-debug-levels { display: flex; gap: 3px; }
.rogue-debug-levels button { padding: 6px 5px; }
.rogue-debug-levels .is-active { color: white; background: #347d87; }
.rogue-debug-note { margin: 0; color: #738b8e; font-size: 10px; line-height: 1.3; }
@media (max-width: 600px) {
  .rogue-debug-desk { left: 8px; right: 8px; width: auto; }
  .rogue-debug-list { max-height: 42dvh; }
}

@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;
}

/* 居中说明卡（障碍引导 / 目标与分数教学）：必须给 left/top，否则 translate(-50%,-50%) 会飞出屏幕 */
.tutorial-overlay.is-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  padding: max(12px, env(safe-area-inset-top, 0px)) 14px max(12px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.tutorial-overlay.is-modal .tutorial-dim {
  pointer-events: auto;
}

.tutorial-overlay.is-modal .tutorial-card {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: min(86vw, 340px);
  max-height: min(78vh, 560px);
  overflow: auto;
  pointer-events: auto;
  z-index: 1004;
  /* 勿用 tut-pop：其 fill 含 translate(-50%,-50%)，会把 flex 居中的卡拽到左上 */
  animation: tut-pop-center 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.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: -28px;
  margin-top: -3px;
  pointer-events: none;
  animation: tut-swipe 1.6s ease-in-out infinite;
}

.tutorial-finger--floating {
  position: fixed !important;
  z-index: 2147483000 !important;
}

.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 2px 1px #fff) drop-shadow(0 4px 5px rgba(43, 77, 102, 0.48));
}

.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);
}

.obstacle-guide-card {
  max-width: min(92vw, 340px);
}

.obstacle-guide-body {
  margin: 8px 0 14px;
  font-size: 14px;
  line-height: 1.45;
  color: #4a5d70;
  text-align: center;
}

/* Boss 首见卡：一屏看懂打法，不用大段文字。 */
.boss-guide-card {
  width: min(90vw, 356px) !important;
  padding: 15px 15px 16px;
  border-color: #ffbd62;
  background: linear-gradient(180deg, #fffaf0 0%, #fff1d6 100%);
  overflow: hidden !important;
}

.boss-guide-heading {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  min-height: 66px;
  margin: -7px 0 2px;
  text-align: left;
}
.boss-guide-heading:has(.has-trio) {
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 6px;
}

.boss-guide-heading > div:last-child { position: relative; z-index: 2; min-width: 0; }
.boss-guide-heading small {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f16f55;
  color: #fff;
  font: 800 10px/1.4 var(--font);
  letter-spacing: 1px;
}
.boss-guide-heading h4 {
  margin: 2px 0 1px;
  color: #6e3c2e;
  font-size: 22px;
  line-height: 1.15;
}
.boss-guide-heading p {
  margin: 0;
  color: #9a6550;
  font-size: 13px;
  font-weight: 700;
}

.boss-guide-hero {
  position: relative;
  width: 80px;
  height: 72px;
  margin-left: -6px;
  display: grid;
  place-items: center;
  transform-origin: 50% 88%;
  animation: boss-idle 2.3s ease-in-out infinite alternate;
}
.boss-guide-hero > img { width: 100%; height: 100%; object-fit: contain; }
.boss-guide-hero .boss-face { width: 44%; height: 34%; }
.boss-guide-hero.has-trio {
  width: 96px;
  height: 68px;
  margin-left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  animation: none;
  overflow: visible;
}
.boss-guide-hero-part {
  position: relative;
  width: 36px;
  height: 48px;
  margin: 0 -3px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  transform-origin: 50% 88%;
  animation: boss-idle 2.3s ease-in-out infinite alternate;
  animation-delay: calc(var(--part-i, 0) * -420ms);
}
.boss-guide-hero-part > img { width: 112%; height: 112%; object-fit: contain; }
.boss-guide-hero-part .boss-face { width: 48%; height: 34%; }

.boss-live-demo {
  width: 190px;
  height: 205px;
  margin-bottom: 2px;
}
.boss-live-demo .combo-live-board {
  width: 172px;
  height: 172px;
  border: 2px solid rgba(255, 190, 98, .46);
  background: linear-gradient(180deg, rgba(174, 226, 255, .42), rgba(120, 202, 160, .26));
  box-shadow: inset 0 0 12px rgba(255,255,255,.62);
}
.boss-live-pack {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.boss-live-pack .boss-live-hp,
.boss-live-pack .boss-live-damage {
  left: 28%;
  right: 28%;
}
.boss-live-pack.is-hurt .boss-live-target { animation: boss-hurt 360ms cubic-bezier(.2,.9,.25,1.3); }
.boss-live-pack.is-cast .boss-live-target { animation: boss-mushroom-cast 540ms cubic-bezier(.18,.82,.2,1) both; }
.boss-live-target {
  position: absolute;
  z-index: 1;
  left: 25%;
  top: 25%;
  width: 50%;
  height: 50%;
  display: grid;
  place-items: center;
  transform-origin: 50% 82%;
  transition: left 420ms cubic-bezier(.18,.82,.2,1), top 420ms cubic-bezier(.18,.82,.2,1);
  box-sizing: border-box;
  pointer-events: none;
}
/* 三兄弟各占演示盘一格，体量与动物棋子接近 */
.boss-live-target.is-part {
  width: 25%;
  height: 25%;
  padding: 1%;
}
.boss-demo-warp-animal { transition: transform 560ms cubic-bezier(.22,.82,.18,1); z-index: 6; }
.boss-live-target > img { width: 100%; height: 100%; object-fit: contain; }
.boss-live-target.is-large > img { width: 72%; height: 72%; }
.boss-live-target.is-large .boss-face { width: 36%; height: 28%; }
.boss-live-target.is-part > img { width: 100%; height: 100%; }
.boss-live-target .boss-face { width: 44%; height: 34%; }
.boss-live-target.is-part .boss-face { width: 48%; height: 32%; }
.boss-live-armor {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 92%;
  height: 92%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: .92;
  transition: opacity 280ms ease, transform 280ms ease, filter 280ms ease;
}
.boss-live-armor.is-crack {
  filter: brightness(1.15) saturate(1.2);
  animation: boss-live-armor-crack 420ms ease;
}
.boss-live-armor.is-break {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.18);
  filter: brightness(1.4);
}
@keyframes boss-live-armor-crack {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  35% { transform: translate(-50%, -50%) scale(1.08) rotate(-2deg); }
  70% { transform: translate(-50%, -50%) scale(.96) rotate(2deg); }
}
.boss-live-target.is-hurt { z-index: 1; animation: boss-hurt 360ms cubic-bezier(.2,.9,.25,1.3); }
.boss-live-target.is-cast { z-index: 1; animation: boss-cast 680ms cubic-bezier(.18,.82,.2,1); }
.boss-live-hp {
  position: absolute;
  z-index: 6;
  left: 12%;
  right: 12%;
  top: -2%;
  height: 7px;
  padding: 2px;
  border-radius: 999px;
  background: #6d3d44;
  box-shadow: 0 1px 0 rgba(255,255,255,.65);
  overflow: hidden;
}
.boss-live-hp i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff765d, #ffcf55);
  transition: width 260ms ease;
}
.boss-live-damage {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 4%;
  opacity: 0;
  color: #fff56b;
  -webkit-text-stroke: 1.5px #9b3c31;
  paint-order: stroke fill;
  font: 900 20px/1 'Fredoka', var(--font);
}
.boss-live-damage.is-on { animation: boss-number 520ms ease-out both; }
.boss-live-stripe-beam {
  position: absolute;
  z-index: 6;
  left: -8%;
  width: 116%;
  height: 13%;
  transform: translateY(-50%) scaleX(0);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff88b 34%, #ffb550 52%, #fff88b 70%, rgba(255,255,255,0));
  box-shadow: 0 0 10px #ffb23e;
  pointer-events: none;
  animation: boss-guide-beam 480ms ease-out both;
}
.boss-live-wood {
  position: absolute;
  z-index: 4;
  left: 75%;
  top: 75%;
  width: 25%;
  height: 25%;
  object-fit: contain;
  animation: boss-root-grow 360ms cubic-bezier(.2,1.2,.3,1) both;
}
.boss-live-cloud {
  position: absolute;
  z-index: 3;
  width: 25%;
  height: 25%;
  object-fit: contain;
  pointer-events: none;
  animation: boss-root-grow 360ms cubic-bezier(.2,1.2,.3,1) both;
}
@keyframes boss-guide-beam {
  0% { opacity: 0; transform: translateY(-50%) scaleX(.08); }
  28% { opacity: 1; transform: translateY(-50%) scaleX(1); }
  100% { opacity: 0; transform: translateY(-50%) scaleX(1); }
}

.boss-guide-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 3px 0 10px;
}
.boss-guide-rule {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 7px 3px 6px;
  border-radius: 15px;
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 0 0 2px rgba(255, 190, 98, .32), 0 3px 7px rgba(130, 80, 43, .09);
}
.boss-guide-rule img { width: 42px; height: 42px; object-fit: contain; }
.boss-guide-rule span {
  margin-top: 1px;
  color: #775447;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.boss-guide-rule b { color: #e45e45; font-size: 13px; line-height: 1.3; }
.boss-guide-rules--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 8px;
}
.boss-guide-rules--compact.has-one {
  grid-template-columns: 1fr;
}
.boss-guide-rules--compact .boss-guide-rule {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 5px 3px;
  border-radius: 10px;
}
.boss-guide-rules--compact .boss-guide-rule span { margin: 0; }
.boss-guide-rules--compact.has-three .boss-guide-rule:last-child {
  grid-column: 1 / -1;
}

.ccd-tile.boss-root-grow .block-img {
  animation: boss-root-grow 360ms cubic-bezier(.2,1.2,.3,1) both;
}

.boss-guide-skill {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1px 8px;
  margin-bottom: 13px;
  padding: 9px 10px;
  border-radius: 15px;
  background: linear-gradient(180deg, #8ad77c, #6fc169);
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.34), 0 4px 0 #4c9b4c;
  text-align: left;
}
.boss-guide-spell {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(55, 112, 50, .28);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}
.boss-guide-spell img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: none;
}
.boss-guide-skill b { font-size: 13px; line-height: 1.2; }
.boss-guide-skill small { color: #efffe9; font-size: 11px; font-weight: 700; line-height: 1.2; }

@media (max-width: 350px), (max-height: 650px) {
  .boss-guide-card { padding: 11px 11px 13px; }
  .boss-guide-heading { grid-template-columns: 66px minmax(0, 1fr); min-height: 56px; }
  .boss-guide-heading:has(.has-trio) { grid-template-columns: 84px minmax(0, 1fr); }
  .boss-guide-hero { width: 68px; height: 60px; }
  .boss-guide-hero.has-trio { width: 84px; height: 58px; }
  .boss-guide-hero-part { width: 32px; height: 42px; margin: 0 -2px; }
  .boss-guide-heading h4 { font-size: 19px; }
  .boss-live-demo { width: 174px; height: 185px; }
  .boss-live-demo .combo-live-board { width: 154px; height: 154px; }
  .boss-guide-skill { margin-bottom: 10px; padding: 7px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .boss-guide-hero { animation: none; }
  .boss-live-target.is-hurt,
  .boss-live-target.is-cast,
  .boss-live-stripe-beam,
  .boss-live-wood { animation-duration: .01ms; }
}

#hud-goals.tutorial-goals-pulse,
.tutorial-spotlight {
  position: relative;
  z-index: 1005 !important;
  animation: tutorial-goals-glow 1s ease-in-out infinite;
  border-radius: 16px;
  box-shadow: 0 0 0 3px #ffe56a, 0 0 18px rgba(255, 213, 90, 0.85);
}

.tutorial-spotlight-clone {
  border-radius: 16px;
  box-shadow: 0 0 0 3px #ffe56a, 0 0 18px rgba(255, 213, 90, 0.85);
  animation: tutorial-goals-glow 1s ease-in-out infinite;
  background: rgba(255, 248, 239, 0.96);
  overflow: hidden;
}
#moves-radial.tutorial-spotlight-clone,
.tutorial-spotlight-clone.moves-radial {
  border-radius: 50%;
  background: transparent;
}

.tutorial-spotlight-host {
  position: relative;
  z-index: 1005 !important;
}

.hud-strip.tutorial-spotlight-host {
  z-index: 1006 !important;
}

@keyframes tutorial-goals-glow {
  0%, 100% { box-shadow: 0 0 0 3px #ffe56a, 0 0 12px rgba(255, 213, 90, 0.55); }
  50% { box-shadow: 0 0 0 5px #fff29a, 0 0 22px rgba(255, 213, 90, 0.95); }
}

.tutorial-point-stack {
  position: absolute;
  z-index: 1004;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translate(-50%, 0);
  pointer-events: none;
  animation: tut-pop-point 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.tutorial-point-stack .tutorial-bubble--point {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  max-width: none;
  transform: none;
  animation: none;
}
.tutorial-point-stack .tutorial-ok--point {
  pointer-events: auto;
  min-width: 148px;
}

.tutorial-bubble--point {
  position: absolute;
  display: grid;
  gap: 6px;
  max-width: min(78vw, 236px);
  white-space: normal;
  padding: 12px 14px 14px;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 1004;
  transform: translate(-50%, 0);
  /* 覆盖通用 tut-pop（含 translateY(-50%)），否则气泡会整体上移出界 */
  animation: tut-pop-point 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.tutorial-bubble--point b {
  font-size: 15px;
  color: #3b2a55;
}
.tutorial-bubble--point span {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #5c4a78;
}
.tutorial-point-stack .tutorial-bubble--point.is-tail-up::after,
.tutorial-bubble--point.is-tail-up::after {
  bottom: auto;
  top: -10px;
  left: var(--tail-x, 50%);
  transform: translateX(-50%);
  border-width: 0 10px 10px;
  border-color: transparent transparent #ffd56a;
}
.tutorial-bubble--point.is-tail-down::after {
  bottom: -10px;
  top: auto;
  left: var(--tail-x, 50%);
  transform: translateX(-50%);
}

.tutorial-finger.tutorial-finger--point {
  position: fixed !important;
  width: 40px;
  height: 44px;
  margin-left: -21px;
  margin-top: -3px;
  z-index: 2147483000;
  pointer-events: none;
  /* 盖掉 tut-swipe，避免未设 --tx 时手指横漂消失 */
  animation: tut-point-bob 0.9s ease-in-out infinite !important;
}
@keyframes tut-point-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

.tutorial-ok--point {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none !important;
  min-width: 168px;
  pointer-events: auto;
}
.tutorial-ok--point:active {
  transform: scale(0.96) !important;
}
/* 双保险：引导按钮即使被加上 is-jelly 也不改定位 */
button.tutorial-ok.is-jelly {
  animation: none !important;
}

.tutorial-card--combo {
  width: min(88vw, 360px);
}

.combo-live-demo {
  position: relative;
  margin: 0 auto 10px;
  width: 200px;
  height: 228px;
}
.combo-live-board {
  position: relative;
  width: 184px;
  height: 184px;
  margin: 0 auto;
  border-radius: 16px;
  background: rgba(126, 200, 255, 0.22);
  overflow: hidden;
}
.combo-live-board .ccd-tile {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / var(--ccd-cols, 4));
  height: calc(100% / var(--ccd-rows, 4));
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 4%;
  transition: transform var(--fall-ms, 150ms) cubic-bezier(0.2, 0.72, 0.28, 1);
  z-index: 3;
}
.combo-live-board .ccd-tile.rainbow-burst-preview::after {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: 4;
  border: 3px solid #ff6fb1;
  border-radius: 10px;
  background: rgba(255, 233, 92, .18);
  box-shadow: 0 0 8px #fff07a, inset 0 0 5px rgba(255,255,255,.9);
  animation: rainbow-preview-pulse 520ms ease-in-out infinite alternate;
}
@keyframes rainbow-preview-pulse {
  from { opacity: .7; transform: scale(.9); }
  to { opacity: 1; transform: scale(1.04); }
}
.rainbow-guide-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: -3px 0 3px;
}
.rainbow-guide-title img { width: 54px; height: 54px; object-fit: contain; }
.rainbow-guide-title small { color: #b66e9f; font-size: 11px; font-weight: 800; }
.rainbow-guide-title h4 { margin: 0; color: #74418f; }
.combo-live-board .ccd-tile.is-falling {
  will-change: transform;
  z-index: 5;
}
.combo-live-board .ccd-tile.is-swap-glow {
  z-index: 5;
  filter: drop-shadow(0 0 6px rgba(126, 200, 255, 0.9));
}
.combo-live-board .ccd-tile .gem {
  width: 88%;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(59, 42, 85, 0.22));
  transition: transform 0.08s ease, opacity 0.12s ease, filter 0.08s ease;
}
.combo-live-board .ccd-tile .block-img,
.combo-live-board .ccd-tile .ice-img {
  position: absolute;
  width: 88%;
  height: 88%;
  object-fit: contain;
  pointer-events: none;
}
.combo-live-board .ccd-tile .ice-img {
  z-index: 2;
  width: 100%;
  height: 100%;
}
.combo-live-board .ccd-tile.block-hit .block-img {
  animation: wood-hit 180ms ease;
}
.combo-live-board .ccd-tile.block-break .block-img {
  animation: wood-break 170ms ease-out both;
}
.combo-live-board .ccd-tile.cloud-push .block-img {
  animation: cloud-push 260ms ease-out both;
}
.combo-live-board .ccd-tile.cloud-drift .block-img {
  animation: cloud-drift-hop 160ms ease-out both;
}
.combo-live-board .ccd-tile.cloud-drift-land .block-img {
  animation: cloud-drift-land 240ms cubic-bezier(.2, 1.1, .3, 1) both;
}
.combo-live-board .ccd-tile.ice-hit .ice-img {
  filter: brightness(1.35);
}
.combo-live-board .ccd-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));
}
.combo-live-board .ccd-tile.pop .gem,
.combo-live-board .ccd-tile.pop .block-img {
  transform: scale(0);
  opacity: 0;
}
.combo-live-board .ccd-tile.tile-land .gem {
  animation: tile-land-jelly 210ms cubic-bezier(0.2, 0.9, 0.28, 1.25);
  transform-origin: 50% 88%;
}
.combo-live-board .ccd-tile.combo-convert .gem {
  animation: combo-convert 260ms cubic-bezier(.16,1.35,.3,1) both;
}
.combo-live-demo .ccd-badge {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 4;
  padding: 4px 8px;
  border-radius: 999px;
  background: #ffd56a;
  color: #7a4a12;
  font: 800 11px var(--font);
}
.combo-live-demo .ccd-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  text-align: center;
  font: 700 12px var(--font);
  color: #684199;
}
.combo-live-demo .ccd-swap-hand {
  position: absolute;
  width: 34px;
  height: 38px;
  z-index: 5;
  margin-left: -18px;
  margin-top: -2px;
  pointer-events: none;
  animation: ccd-hand-nudge 1.1s ease-in-out infinite;
}
.combo-live-demo .ccd-swap-hand svg { width: 100%; height: 100%; display: block; }
@keyframes ccd-hand-nudge {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(var(--hand-dx, 12px), var(--hand-dy, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .combo-live-board .ccd-tile {
    transition: none !important;
  }
  .combo-live-board .ccd-tile.tile-land .gem,
  .combo-live-demo .ccd-swap-hand,
  .tutorial-finger--point,
  .tutorial-spotlight,
  .tutorial-spotlight-clone,
  #hud-goals.tutorial-goals-pulse {
    animation: none !important;
  }
  .clock-gain-fx { display: none !important; }
}

.tutorial-goals-demo__chip {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(126, 200, 255, 0.55);
  display: grid;
  place-items: center;
}

.tutorial-goals-demo__chip img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.tutorial-goals-demo__chip b,
.tutorial-goals-demo__chip i {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  color: #fff;
  background: #3ecf7a;
  box-shadow: 0 2px 0 #2aa35c;
}

.tutorial-goals-demo__chip i {
  background: #ff6b8a;
  box-shadow: 0 2px 0 #d44d6a;
}

.tutorial-score-demo {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.tutorial-score-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e8f6ff;
  color: #2f5f86;
  font-size: 13px;
  font-weight: 800;
}

.tutorial-score-pill.is-hot {
  background: linear-gradient(180deg, #ffe9a8, #ffd56a);
  color: #8a4d12;
}

.tutorial-score-arrow {
  color: #ee7b45;
  font-weight: 800;
  font-size: 16px;
}

.obstacle-demo {
  margin: 6px 0 4px;
}

.obstacle-demo__stage {
  position: relative;
  height: 88px;
  display: grid;
  place-items: center;
}

.obstacle-demo__frame {
  position: absolute;
  width: 56px;
  height: 56px;
  object-fit: contain;
  opacity: 0;
}

.obstacle-demo--wood .f0 {
  animation: obstacle-wood-f0 2.4s ease-in-out infinite;
}
.obstacle-demo--wood .f1 {
  animation: obstacle-wood-f1 2.4s ease-in-out infinite;
}
.obstacle-demo__burst {
  position: absolute;
  font-size: 18px;
  font-weight: 800;
  color: #ee7b45;
  opacity: 0;
  animation: obstacle-wood-burst 2.4s ease-in-out infinite;
}

@keyframes obstacle-wood-f0 {
  0%, 35% { opacity: 1; transform: scale(1); }
  45%, 100% { opacity: 0; transform: scale(0.85); }
}
@keyframes obstacle-wood-f1 {
  0%, 40% { opacity: 0; transform: scale(0.9); }
  48%, 78% { opacity: 1; transform: scale(1); }
  88%, 100% { opacity: 0; transform: scale(0.8); }
}
@keyframes obstacle-wood-burst {
  0%, 82% { opacity: 0; transform: translateY(6px) scale(0.8); }
  88% { opacity: 1; transform: translateY(-4px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-12px) scale(0.9); }
}

.obstacle-demo--stone .stone-grid {
  display: grid;
  grid-template-columns: 36px 56px 36px;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  gap: 2px 4px;
  height: auto;
}
.obstacle-demo__stone {
  width: 52px;
  height: 52px;
  object-fit: contain;
  grid-column: 2;
  grid-row: 1;
  animation: obstacle-stone-pulse 1.6s ease-in-out infinite;
}
.obstacle-demo__side {
  font-size: 22px;
  font-weight: 800;
  color: #e85d5d;
  grid-row: 1;
  animation: obstacle-miss-flash 1.6s ease-in-out infinite;
}
.obstacle-demo__side:first-child { grid-column: 1; }
.obstacle-demo__side:nth-child(3) { grid-column: 3; }
.obstacle-demo__vert {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 13px;
  font-weight: 700;
  color: #3cb371;
  animation: obstacle-hit-pulse 1.6s ease-in-out infinite;
}

@keyframes obstacle-stone-pulse {
  0%, 100% { transform: scale(1); filter: none; }
  50% { transform: scale(1.06); filter: drop-shadow(0 0 6px rgba(60, 179, 113, 0.55)); }
}
@keyframes obstacle-miss-flash {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
@keyframes obstacle-hit-pulse {
  0%, 100% { opacity: 0.7; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(2px); }
}

.obstacle-demo--ice .ice-stack {
  width: 64px;
  height: 64px;
}
.obstacle-demo--ice .ice-base,
.obstacle-demo--ice .ice-cover {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.obstacle-demo--ice .ice-cover.f0 {
  animation: obstacle-ice-f0 2.8s ease-in-out infinite;
}
.obstacle-demo--ice .ice-cover.f1 {
  animation: obstacle-ice-f1 2.8s ease-in-out infinite;
}

@keyframes obstacle-ice-f0 {
  0%, 28% { opacity: 1; }
  38%, 100% { opacity: 0; }
}
@keyframes obstacle-ice-f1 {
  0%, 32% { opacity: 0; }
  40%, 68% { opacity: 1; }
  78%, 100% { opacity: 0; }
}

.obstacle-demo--choco .choco-spread {
  display: flex;
  gap: 18px;
  align-items: center;
  height: auto;
}
.obstacle-demo--choco img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.obstacle-demo--choco .choco-b {
  animation: obstacle-choco-spread 2s ease-in-out infinite;
}

@keyframes obstacle-choco-spread {
  0%, 35% { opacity: 0; transform: translateX(-12px) scale(0.7); }
  50%, 85% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(8px) scale(0.85); }
}

.obstacle-demo__caption {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #6a7f92;
  text-align: center;
}

@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-pop-point {
  from { opacity: 0; transform: translate(-50%, 0) scale(0.75); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes tut-pop-center {
  from { opacity: 0; transform: scale(0.75); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes tut-swipe {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(var(--tx, 40px), var(--ty, 0)); }
}
/* Run shop: fixed header/footer, touch-scrollable marketplace, original island art. */
.rogue-build summary { cursor: pointer; font-size: 13px; padding: 10px 0; border-bottom: 1px solid #d8ceb8; }.rogue-build summary span { font-size: 10px; color: #796d59; float: right; }
#popup-rogue-shop { z-index: 160; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); place-items: center; box-sizing: border-box; }
.rogue-market { width: min(100%, 640px); max-width: calc(100vw - 20px); margin: auto; max-height: calc(var(--app-height, 100dvh) - 24px); height: min(920px, calc(100dvh - 24px)); display: flex; flex-direction: column; overflow: hidden; border: 3px solid #f4d98f; border-radius: 25px; background: #f9f2df; color: #453626; box-shadow: 0 18px 60px #14232270; text-align: left; box-sizing: border-box; }
.rogue-header { padding: 18px 18px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: linear-gradient(125deg,#245b55,#367c66); color: #fff9df; flex-shrink: 0; }
.rogue-header small { font: 9px/1.4 sans-serif; letter-spacing: 1.5px; color: #bbdac4; }
.rogue-header h2 { margin: 4px 0; font-size: 25px; color: #fff9df; }
.rogue-header p { margin: 0; font-size: 11px; }
.rogue-wallet { display: grid; grid-template-columns: 26px auto; align-items: center; min-width: 78px; padding: 8px; background: #153e38; border: 1px solid #89b597; border-radius: 14px; }
.rogue-wallet img { width: 26px; height: 26px; object-fit: contain; }.rogue-wallet b { font-size: 27px; color: #ffdb72; }.rogue-wallet span { grid-column: 1/-1; font-size: 10px; text-align: center; }
.rogue-scroll {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 18px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rogue-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.rogue-market h3 { font-size: 15px; margin: 12px 0 8px; }.rogue-market h3 em { font-style: normal; font-size: 10px; font-weight: normal; margin-left: 6px; color: #776959; }
.rogue-income { display: grid; grid-template-columns: repeat(var(--income-count, 4),1fr); padding: 8px 0; background: #eee4cc; border-radius: 12px; }.rogue-income span { text-align: center; font-size: 11px; border-right: 1px solid #d8ceb8; }.rogue-income span:last-child { border: none; }.rogue-income b { display: block; font-size: 18px; color: #376950; }
.rogue-interest { font-size: 12px; margin: 8px 0; }.rogue-interest small { display: block; font-size: 10px; color: #80745f; margin-top: 4px; }
.rogue-slots { display: grid; gap: 6px; grid-template-columns: repeat(var(--slot-count, 2),minmax(0,1fr)); }
.rogue-slot { min-width: 0; background: #fffaf0; border: 1px solid #dcd0b6; border-radius: 10px; padding: 6px 3px; display: flex; align-items: center; flex-direction: column; justify-content: center; font-size: 11px; text-align: center; }.rogue-slot img { width: 34px; height: 34px; object-fit: contain; }.rogue-slot small { font-size: 9px; color: #796d59; }.rogue-slot.empty { border-style: dashed; min-height: 56px; color: #918573; }.rogue-slot button { padding: 4px; font-size: 10px; margin-top: 3px; min-height: 30px; background: #e9dbc3; color: #62513a; border: 0; border-radius: 6px; }
.rogue-offers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.rogue-card { min-width: 0; border-radius: 14px; padding: 9px; border: 2px solid #d5c4a0; background: linear-gradient(#fffef7,#f1e6cc); box-shadow: 0 3px 0 #d1c1a0; display: flex; flex-direction: column; align-items: center; text-align: center; }.rogue-card.rare { border-color: #b89bce; background: linear-gradient(#fffcff,#ede1f3); }.rogue-card.sold { opacity: .65; box-shadow: none; }.rogue-rarity { font-size: 10px; color: #82715b; }.rogue-card > img { height: 54px; width: 58px; object-fit: contain; margin: 5px; }.rogue-card h4 { margin: 2px 0 5px; font-size: 16px; }.rogue-card p { font-size: 11px; line-height: 1.5; margin: 0 0 8px; flex: 1; }
.rogue-card button,.rogue-footer button,.rogue-replace button { font: inherit; min-height: 40px; border: 0; border-radius: 10px; padding: 8px 10px; cursor: pointer; background: #d89732; color: #fffdf1; box-shadow: inset 0 -3px #a16c2c; }.rogue-card button { width: 100%; font-size: 13px; }.rogue-market button:disabled { background: #ddd5c3; color: #877e6c; box-shadow: none; cursor: default; }.rogue-market button:active:not(:disabled) { transform: scale(.97,.94); }.rogue-market button:focus-visible { outline: 3px solid #369b91; outline-offset: 2px; }
.rogue-next { margin-top: 14px; border-radius: 12px; background: #e0ecdf; padding: 1px 12px 10px; }.rogue-next-goals { display: flex; gap: 14px; flex-wrap: wrap; }.rogue-next-goals span { display: flex; gap: 4px; align-items: center; }.rogue-next-goals img { width: 27px; height: 27px; object-fit: contain; }.rogue-next p,.rogue-next strong { font-size: 12px; }.rogue-next p { margin: 6px 0; }
.rogue-message { font-size: 12px; color: #89520c; min-height: 22px; padding-top: 8px; }.rogue-replace { border: 2px solid #c09965; border-radius: 12px; background: #fff8e8; padding: 12px; margin-bottom: 8px; }.rogue-replace p { font-size: 12px; }.rogue-replace button { display: block; width: 100%; margin: 6px 0; }
.rogue-footer { flex-shrink: 0; display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; padding: 12px 16px 8px; background: #f8eedb; border-top: 1px solid #d8ceb8; }.rogue-footer .rogue-depart { background: #348165; box-shadow: inset 0 -3px #235942; }.rogue-footer .rogue-retire { grid-column: 1/-1; background: transparent; color: #7a6b54; box-shadow: none; font-size: 11px; min-height: 28px; padding: 4px; }
@media (max-width: 350px) { .rogue-scroll { padding: 8px 10px; }.rogue-header { padding: 12px; }.rogue-header h2 { font-size: 22px; }.rogue-card h4 { font-size: 14px; }.rogue-slot { font-size: 10px; }.rogue-footer { padding: 8px 10px; } }

/* shop-v2：更像关卡间的游戏补给站，而不是规则说明页。 */
.rogue-market {
  position: relative;
  border-color: #ffc8db;
  background: linear-gradient(180deg, #fff8e8 0%, #fff3d9 100%);
  box-shadow: 0 18px 0 #412e6570, 0 24px 60px #17243c80;
}
.rogue-replace-layer { position:absolute; z-index:20; inset:0; display:grid; place-items:center; padding:18px; background:#30234b99; backdrop-filter:blur(3px); }
.rogue-replace { position:relative; width:min(100%,430px); max-height:calc(100% - 24px); overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; padding:19px 14px 14px; border:3px solid #ffd0df; border-radius:23px; background:linear-gradient(180deg,#fffaf0,#ffefd9); box-shadow:0 9px 0 #34244d80,0 20px 50px #22172a88; text-align:center; }
.rogue-replace > small { display:inline-block; padding:3px 9px; border-radius:999px; background:#eadcf6; color:#76558d; font-size:9px; }
.rogue-replace h3 { margin:7px 32px 3px; color:#684676; font-size:19px; }
.rogue-replace > p { margin:0 4px 11px; color:#8b6e74; font-size:10px; }
.rogue-replace-x { position:absolute; right:9px; top:9px; width:34px!important; min-height:34px!important; padding:0!important; border:2px solid #fff!important; border-radius:50%!important; background:linear-gradient(#ff9bbc,#e86695)!important; box-shadow:0 3px 0 #ad456c!important; font:700 22px/1 sans-serif!important; }
.rogue-replace-choices { display:grid; gap:8px; }
.rogue-replace-choices > button { width:100%; min-height:72px; margin:0; padding:7px 9px; display:grid; grid-template-columns:54px minmax(0,1fr) auto; align-items:center; gap:8px; border:2px solid #9ed5d0; border-radius:16px; background:linear-gradient(#f3fffb,#dff6ed); box-shadow:0 3px 0 #8bbcb4; color:#365f5a; text-align:left; }
.rogue-replace-choices > button > img { width:52px; height:52px; object-fit:contain; }
.rogue-replace-choices span { min-width:0; display:flex; flex-direction:column; }
.rogue-replace-choices span b { font-size:14px; color:#4d3c65; }
.rogue-replace-choices span small { margin-top:2px; color:#6f8581; font-size:9px; line-height:1.35; }
.rogue-replace-choices em { padding:5px 7px; display:flex; align-items:center; gap:2px; border-radius:10px; background:#fff1b8; color:#a26825; font:normal 700 11px var(--font); white-space:nowrap; }
.rogue-replace-choices em img { width:20px; height:20px; }
.rogue-replace .rogue-replace-cancel { width:100%; margin-top:10px; border:0; background:#eadde1; color:#906678; box-shadow:inset 0 -3px #ccb9c0; }
.rogue-header {
  position: relative;
  overflow: hidden;
  padding: 17px 18px 14px;
  background: linear-gradient(135deg, #7860c8 0%, #bf67aa 58%, #ed8fa9 100%);
  text-shadow: 0 2px 0 #5b3b7a70;
}
.rogue-header::before,
.rogue-header::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: #fff4;
  pointer-events: none;
}
.rogue-header::before { width: 88px; height: 88px; right: 82px; top: -55px; }
.rogue-header::after { width: 42px; height: 42px; left: -18px; bottom: -22px; }
.rogue-header > * { position: relative; z-index: 1; }
.rogue-header small { font: 700 11px/1.3 inherit; letter-spacing: .5px; color: #fff4dc; }
.rogue-header h2 { margin: 2px 0; font-size: 27px; letter-spacing: 1px; }
.rogue-header p { color: #fff2df; font-size: 12px; }
.rogue-wallet {
  grid-template-columns: 30px auto;
  min-width: 91px;
  padding: 8px 10px;
  border: 2px solid #ffd2e4;
  border-radius: 18px;
  background: #513b83c9;
  box-shadow: inset 0 2px #ffffff28, 0 3px 0 #4b3264;
}
.rogue-wallet img { width: 30px; height: 30px; filter: drop-shadow(0 2px 0 #80375f80); }
.rogue-wallet b { font-size: 27px; color: #fff8ce; }
.rogue-wallet span { color: #fbddea; font-size: 9px; }
.rogue-scroll { padding: 12px 14px 18px; }
.rogue-income {
  grid-template-columns: repeat(var(--income-count, 4), 1fr);
  gap: 7px;
  padding: 0;
  background: transparent;
}
.rogue-income span {
  border: 1px solid #ead8b0 !important;
  border-radius: 13px;
  padding: 7px 4px;
  background: #fffaf0;
  box-shadow: 0 3px 0 #ddcfaf;
}
.rogue-income small { display: block; font-size: 10px; color: #79674f; }
.rogue-income b { display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 17px; color: #d55385; }
.rogue-income b img { width: 19px; height: 19px; object-fit: contain; }
.rogue-legacy-interest { margin: 8px 0 0; color: #8c6b4c; font-size: 11px; text-align: center; }
.rogue-legacy-interest img { width: 18px; vertical-align: -4px; }
.rogue-new-partners { margin-top: 12px; padding: 9px 10px; border: 2px solid #e1c99f; border-radius: 16px; background: #fff6dc; color: #825b3c; }
.rogue-new-partners > b { display: block; margin-bottom: 7px; font-size: 12px; }
.rogue-new-partners > div { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.rogue-new-partners span { display: grid; flex: 0 0 53px; justify-items: center; gap: 2px; font-size: 9px; white-space: nowrap; }
.rogue-new-partners img { width: 39px; height: 39px; object-fit: contain; }
.rogue-build {
  margin: 12px 0 4px;
  border: 2px solid #9dd9d4;
  border-radius: 16px;
  overflow: hidden;
  background: #eafaf5;
  box-shadow: 0 3px 0 #b7d5cc;
}
.rogue-build-open {
  width:100%;
  min-height:58px;
  margin:12px 0 4px;
  padding:7px 11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border:2px solid #9dd9d4;
  border-radius:16px;
  background:linear-gradient(180deg,#effff9,#ddf6ee);
  box-shadow:0 3px 0 #9fcac1;
  color:#25685f;
}
.rogue-build-open:active { transform:scale(.98,.95); }
.rogue-build-open .rogue-build-count i { transform:none; }
.rogue-build summary {
  min-height: 56px;
  padding: 7px 11px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  cursor: pointer;
}
.rogue-build summary::-webkit-details-marker { display: none; }
.rogue-build summary span { float: none; }
.rogue-build-team { display: flex; align-items: center; min-width: 0; }
.rogue-build-team img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  margin-right: -9px;
  border-radius: 50%;
  background: #fff9e9;
  border: 2px solid #fff;
  box-shadow: 0 2px 0 #70aaa0;
}
.rogue-build-count { color: #568278 !important; font-size: 11px !important; white-space: nowrap; margin-left: 10px; }
.rogue-build-count i { display: inline-block; margin-left: 4px; font: 700 20px/1 sans-serif; transform: rotate(90deg); transition: transform .2s ease; }
.rogue-build[open] .rogue-build-count i { transform: rotate(-90deg); }
.rogue-build-body { padding: 0 9px 10px; border-top: 1px dashed #9ccfc7; }
.rogue-build-body h3 { margin: 9px 0 5px; color: #3c6f67; font-size: 12px; }
.rogue-slot { border: 1px solid #bcded6; background: #fffdf4; box-shadow: 0 2px 0 #c5d7cf; }
.rogue-slot.empty { min-height: 62px; background: #dff3ed; color: #779c94; }
.rogue-slot button { display: flex; align-items: center; justify-content: center; gap: 2px; background: #ffd7e5; color: #9a4165; }
.rogue-slot button img { width: 17px; height: 17px; }
.rogue-shelf h3 { display: flex; align-items: baseline; margin-top: 14px; color: #543f37; font-size: 17px; }
.rogue-shelf h3::before { content: '✦'; color: #ef7eaa; margin-right: 5px; }
.rogue-shelf h3 em { margin-left: auto; color: #a17e64; }
.rogue-lane { margin-top: 10px; }
.rogue-lane:first-of-type { margin-top: 2px; }
.rogue-lane-title {
  margin: 0 0 6px;
  padding: 0 2px;
  color: #6d5848;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.rogue-lane-title::before {
  content: '·';
  margin-right: 4px;
  color: #ef7eaa;
}
.rogue-offers { gap: 9px; }
.rogue-offers--skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rogue-offers--badges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rogue-offers--badges.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rogue-offers--props { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 350px) {
  .rogue-offers--badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rogue-offers--badges.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rogue-lane-title { font-size: 11px; }
}
.rogue-chest-layer {
  position: absolute; inset: 0; z-index: 8;
  display: grid; place-items: center;
  background: #1a1238cc; padding: 18px;
}
.rogue-chest {
  position: relative; width: min(94%, 380px); padding: 18px 16px 16px;
  border-radius: 20px; background: linear-gradient(#fff8e8, #ffe7c2);
  border: 3px solid #f0b45a; box-shadow: 0 10px 0 #c9842f;
  text-align: center;
}
.rogue-chest small { color: #b06a1c; letter-spacing: 1px; font-weight: 700; }
.rogue-chest h3 { margin: 6px 0 4px; color: #6a3a12; font-size: 22px; }
.rogue-chest p { margin: 0 0 12px; color: #8a5a2a; font-size: 13px; }
.rogue-chest-open { display: grid; justify-items: center; gap: 4px; width: 100%; margin-top: 3px; border: 0; background: transparent; color: #874b20; font: inherit; font-weight: 800; font-size: 17px; cursor: pointer; }
.rogue-chest-open:disabled { cursor: default; }
.rogue-chest-art { position: relative; display: block; width: min(68vw, 220px); height: 205px; animation: rogue-chest-idle 1.7s ease-in-out infinite; }
.rogue-chest-art > img, .rogue-chest-opened-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rogue-chest-art .rogue-chest-halo { inset: -18%; width: 136%; height: 136%; opacity: .42; animation: rogue-chest-halo 5s linear infinite; }
.rogue-chest-art .rogue-chest-body, .rogue-chest-opened-art .rogue-chest-body { z-index: 2; }
.rogue-chest-art .rogue-chest-lid, .rogue-chest-opened-art .rogue-chest-lid { z-index: 3; transform: translateY(7%); transform-origin: 50% 38%; }
.rogue-chest-art .rogue-chest-closed { z-index:4; }
.rogue-chest-flare { position: absolute; z-index: 1; left: 15%; top: 18%; width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(circle, #fffbe3 0%, #ffe080 48%, #ffe08000 78%); opacity: 0; transform: scale(.25); pointer-events: none; }
.rogue-chest-art .rogue-chest-spark { z-index: 4; left: 50%; top: 48%; right: auto; bottom: auto; width: 28px; height: 28px; opacity: 0; pointer-events: none; }
.rogue-chest-spark--1 { --dx: -98px; --dy: -85px; --spin: -90deg; }
.rogue-chest-spark--2 { --dx: -35px; --dy: -120px; --spin: 80deg; }
.rogue-chest-spark--3 { --dx: 82px; --dy: -100px; --spin: 125deg; }
.rogue-chest-spark--4 { --dx: 115px; --dy: -22px; --spin: -125deg; }
.rogue-chest-spark--5 { --dx: 94px; --dy: 62px; --spin: 160deg; }
.rogue-chest-spark--6 { --dx: 5px; --dy: 92px; --spin: -80deg; }
.rogue-chest-spark--7 { --dx: -82px; --dy: 70px; --spin: 115deg; }
.rogue-chest-spark--8 { --dx: -114px; --dy: -2px; --spin: -145deg; }
.rogue-chest-action { padding: 8px 24px; border-radius: 24px; background: #ffdf80; box-shadow: 0 4px 0 #d89945; }
.rogue-chest.is-opening .rogue-chest-art { animation: rogue-chest-click .18s ease-out both; }
.rogue-chest.is-opening .rogue-chest-halo { animation: rogue-chest-halo-burst .65s ease-out both; }
.rogue-chest.is-opening .rogue-chest-flare { animation: rogue-chest-flash .62s ease-out both; }
.rogue-chest.is-opening .rogue-chest-closed { animation:rogue-chest-closed-away .16s ease-in both; }
.rogue-chest.is-opening .rogue-chest-lid { will-change: transform, opacity; animation: rogue-chest-lid-open .65s cubic-bezier(.18,.8,.18,1) both; }
.rogue-chest.is-opening .rogue-chest-body { will-change: transform; animation: rogue-chest-body-pop .65s ease-out both; }
.rogue-chest.is-opening .rogue-chest-spark { will-change: transform, opacity; animation: rogue-chest-spark-fly .64s cubic-bezier(.15,.75,.2,1) both; }
.rogue-chest.is-opening .rogue-chest-action { transform: translateY(3px); background: #ffc96f; box-shadow: 0 1px 0 #d89945; }
.rogue-chest-opened-art { position: relative; width: 150px; height: 150px; margin: 2px auto 5px; }
.rogue-chest-opened-art::before { content: ''; position: absolute; z-index: 1; left: 12%; top: 38%; width: 76%; height: 25%; border-radius: 50%; background: radial-gradient(ellipse, #fff8b2 0%, #ffcf58 44%, #8c3f1b 88%); box-shadow: 0 0 18px #ffe484; }
.rogue-chest-opened-art .rogue-chest-body { z-index: 2; }
.rogue-chest-opened-art .rogue-chest-lid { transform: translate(-4%,-21%) rotate(-9deg); }
.rogue-chest-choices { display: grid; gap: 8px; max-height: min(345px, 57dvh); overflow-y: auto; padding: 2px 2px 5px; }
.rogue-chest-choice { display: grid; grid-template-columns: 62px minmax(0,1fr) 39px; align-items: center; gap: 9px; min-height: 88px; padding: 8px; border: 2px solid #d7a568; border-radius: 14px; background: #fff9ea; color: #6d411e; text-align: left; font: inherit; cursor: pointer; }
.rogue-chest-choice:active { transform: scale(.985); }
.rogue-chest-choice__icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 12px; background: #fff0cb; border: 1px solid #e8c78e; }
.rogue-chest-choice__icon img { display: block; width: 54px; height: 54px; object-fit: contain; }
.rogue-chest-choice__copy { display: grid; gap: 1px; min-width: 0; }
.rogue-chest-choice__copy small { color: #a36a2a; font-size: 10px; letter-spacing: 0; }
.rogue-chest-choice__copy b { color: #613812; font-size: 15px; line-height: 1.15; }
.rogue-chest-choice__copy em { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #8a613a; font-size: 11px; font-style: normal; line-height: 1.2; }
.rogue-chest-choice__pick { color: #ad6822; font-size: 11px; font-weight: 900; }
.rogue-chest-choice--upgrade { border-color: #63b5bf; background: #effdff; }
.rogue-chest-choice--trait { border-color: #cf8ab6; background: #fff2fb; }
.rogue-chest-choice--coins { border-color: #e6b14c; background: #fff7d9; }
.rogue-chest-choice--prop { border-color: #a4b5dd; background: #f5f7ff; }
.rogue-chest.is-opened .rogue-chest-choice { animation: rogue-chest-card-rise .36s cubic-bezier(.16,.8,.22,1) both; }
.rogue-chest.is-opened .rogue-chest-choice:nth-child(2) { animation-delay: .09s; }
.rogue-chest.is-opened .rogue-chest-choice:nth-child(3) { animation-delay: .18s; }
@keyframes rogue-chest-idle { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
@keyframes rogue-chest-click { 0% { transform: scale(.94); } 65% { transform: scale(1.04); } to { transform: scale(1); } }
@keyframes rogue-chest-halo { to { transform: rotate(360deg); } }
@keyframes rogue-chest-halo-burst { 50% { opacity: .9; transform: scale(1.14) rotate(32deg); } to { opacity: 0; transform: scale(1.5) rotate(55deg); } }
@keyframes rogue-chest-flash { 35% { opacity: .95; transform: scale(1.15); } to { opacity: 0; transform: scale(1.8); } }
@keyframes rogue-chest-lid-open { 0% { transform: translateY(7%); } 16% { transform: translateY(11%) scale(.98); } 65% { transform: translate(-2%,-15%) rotate(-6deg); } to { transform: translate(-4%,-21%) rotate(-9deg); } }
@keyframes rogue-chest-closed-away { to { opacity:0; transform:scale(.97); } }
@keyframes rogue-chest-body-pop { 30% { transform: scale(.93); } 65% { transform: scale(1.09); } to { transform: scale(1); } }
@keyframes rogue-chest-spark-fly { 22% { opacity: 1; transform: translate(0,0) scale(.5); } 70% { opacity: 1; } to { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(.9); } }
@keyframes rogue-chest-card-rise { from { opacity: 0; transform: translateY(36px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (pointer: coarse), (max-width: 520px) { .rogue-chest-spark:nth-last-child(-n+4) { display: none; } .rogue-chest-art .rogue-chest-halo { animation: none; } }
@media (prefers-reduced-motion: reduce) { .rogue-chest-art, .rogue-chest-art .rogue-chest-halo, .rogue-chest.is-opening .rogue-chest-art img, .rogue-chest.is-opening .rogue-chest-flare, .rogue-chest.is-opened .rogue-chest-choice { animation: none; } .rogue-chest-art .rogue-chest-spark { display: none; } }
.rogue-card {
  position: relative;
  padding: 10px 8px 9px;
  border-color: #e4bc87;
  background: linear-gradient(180deg, #fffdf7 0%, #fff2cf 100%);
  box-shadow: 0 4px 0 #d9b77e, inset 0 1px #fff;
}
.rogue-card.rare {
  border-color: #d990c6;
  background: linear-gradient(180deg, #fff8ff, #f7dcf0);
  box-shadow: 0 4px 0 #bf78ae, inset 0 1px #fff;
}
.rogue-rarity {
  align-self: flex-start;
  padding: 2px 7px;
  border-radius: 10px;
  background: #f4ddb6;
  color: #8f633c;
  font-size: 9px;
}
.rogue-card.rare .rogue-rarity { background: #eebcdf; color: #873c73; }
/* 类型用形状区分，稀有度/等级用颜色 */
.rogue-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1.5px solid transparent;
  box-shadow: 0 1px 0 #0001;
}
/* 新伙伴技能：旗形三角尾 */
.rogue-tag--skill {
  border-radius: 3px 10px 10px 3px;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%);
  padding-right: 12px;
}
/* 技能升级：斜切条带（不 skew 文字） */
.rogue-tag--upgrade {
  border-radius: 2px;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  padding: 2px 10px;
}
/* 伙伴徽章：盾牌底 */
.rogue-tag--badge-partner {
  border-radius: 8px 8px 4px 4px;
  clip-path: polygon(8% 0, 92% 0, 100% 28%, 100% 68%, 50% 100%, 0 68%, 0 28%);
  padding: 3px 10px 6px;
}
/* 通用/闪亮徽章：圆角胶囊 */
.rogue-tag--badge {
  border-radius: 999px;
  padding: 2px 9px;
}
/* 道具强化：菱形切角 */
.rogue-tag--prop-core {
  border-radius: 3px;
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
  padding: 2px 11px;
}
/* 当局道具：票根圆角方 */
.rogue-tag--prop {
  border-radius: 5px;
  border-style: dashed;
}
/* 单层补给：软椭圆 */
.rogue-tag--supply {
  border-radius: 12px 4px;
}
/* 稀有扩展：双边缺口票 */
.rogue-tag--expand {
  border-radius: 4px;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 94% 50%, 100% 65%, 100% 100%, 0 100%, 0 65%, 6% 50%, 0 35%);
  padding: 2px 10px;
}
/* 颜色 = 等级/稀有度 */
.rogue-tag--tier-common {
  background: #f3dfb8;
  color: #7a552f;
  border-color: #e2c48a;
}
.rogue-tag--tier-skill {
  background: #cfe9ff;
  color: #2f5f8f;
  border-color: #9cc7ef;
}
.rogue-tag--tier-lv2 {
  background: #d4f0d8;
  color: #2f6b3a;
  border-color: #9fd4a8;
}
.rogue-tag--tier-lv3 {
  background: #ffe6a8;
  color: #8a5a12;
  border-color: #efc45a;
}
.rogue-tag--tier-rare {
  background: #f3c6e8;
  color: #7a2f6a;
  border-color: #d992c4;
}
.rogue-tag--prop.rogue-tag--tier-common {
  background: #ffe0d2;
  color: #9a4028;
  border-color: #f0b094;
}
.rogue-tag--prop-core.rogue-tag--tier-common {
  background: #e4ddff;
  color: #5240a0;
  border-color: #b8abe8;
}
.rogue-tag--supply.rogue-tag--tier-common {
  background: #d8f4ef;
  color: #2a6d64;
  border-color: #9ed9cf;
}
.rogue-card > img { width: 60px; height: 56px; margin: 3px; filter: drop-shadow(0 3px 1px #7c5a4430); }
.rogue-card h4 { max-width:100%; margin: 1px 0 3px; font-size: 16px; color: #49382f; overflow-wrap:anywhere; }
.rogue-card p { max-width:100%; min-height: 33px; margin: 0 0 7px; font-size: 10px; line-height: 1.55; color: #725d4d; overflow-wrap:anywhere; }
.rogue-card-price { display:flex; align-items:center; justify-content:center; gap:2px; min-height:23px; margin:0 0 5px; color:#a35f24; font-size:13px; font-weight:900; }
.rogue-card-price img { width:19px; height:19px; object-fit:contain; }
.rogue-card button {
  min-height: 39px;
  padding: 6px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex-wrap: nowrap;
  border: 2px solid #f194b5;
  border-radius: 13px;
  background: linear-gradient(#ff9fc0, #ed6d9e);
  box-shadow: inset 0 2px #ffc7d9, inset 0 -3px #bd4f79, 0 2px 0 #a9496d;
}
.rogue-card button > span {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
}
.rogue-card button > b,
.rogue-footer button > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 2px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}
.rogue-card button img,
.rogue-footer button img { width: 20px; height: 20px; object-fit: contain; filter: drop-shadow(0 1px #963e69); }
.rogue-market button:disabled { border-color: #d6cdbd; background: #ddd5c3; color: #877e6c; box-shadow: none; }
.rogue-next {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 11px;
  border: 2px solid #99cbe8;
  border-radius: 16px;
  background: linear-gradient(135deg, #eaf9ff, #dff2ff);
  box-shadow: 0 3px 0 #a8c9db;
}
.rogue-next > div:first-child small { color: #6b8fa5; font-size: 9px; }
.rogue-next h3 { margin: 0; color: #346c8d; white-space: nowrap; }
.rogue-next-goals { gap: 3px; justify-content: center; flex-wrap: nowrap; }
.rogue-next-goals span { gap: 0; font-size: 11px; }
.rogue-next-goals img { width: 25px; height: 25px; }
.rogue-next.is-boss { border-color: #e5ae7b; background: linear-gradient(135deg, #fff3df, #ffe9d6); box-shadow: 0 3px 0 #d9ae8b; }
.rogue-next.is-boss h3 { color: #98503c; }
.rogue-next-goals .rogue-next-boss { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rogue-next-goals .rogue-next-boss img { width: 39px; height: 39px; flex: none; object-fit: contain; filter: drop-shadow(0 2px 1px #8e523355); }
.rogue-next-goals .rogue-next-boss > span { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; color: #884c3c; line-height: 1.2; }
.rogue-next-goals .rogue-next-boss b { font-size: 12px; white-space: nowrap; }
.rogue-next-goals .rogue-next-boss small { margin-top: 2px; color: #b46042; font-size: 11px; font-weight: 800; white-space: nowrap; }
.rogue-next p { display: none; }
.rogue-next strong { display: flex; flex-direction: column; align-items: center; color: #347294; font-size: 14px; white-space: nowrap; }
.rogue-next strong > img { width: 27px; height: 27px; object-fit: contain; }
.rogue-next strong small { font-size: 8px; font-weight: 400; color: #6a91a8; }
.rogue-next-party { grid-column: 1 / -1; min-width: 0; padding-top: 7px; border-top: 1px solid #a9d4e8; }
.rogue-next-party-label { display: block; color: #367492; font-size: 11px; font-weight: 800; }
.rogue-next-party-list { display: flex; min-width: 0; gap: 2px; margin-top: 2px; }
.rogue-next-partner { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; color: #35637c; }
.rogue-next-partner img { width: 27px; height: 27px; object-fit: contain; }
.rogue-next-partner small { max-width: 100%; overflow: hidden; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.rogue-next.is-boss .rogue-next-party { border-top-color: #edc8a5; }
.rogue-next.is-boss .rogue-next-party-label { color: #98503c; }
.rogue-message { min-height: 20px; color: #c24f7d; text-align: center; font-weight: 700; }
.rogue-footer {
  padding: 10px 14px 7px;
  border-color: #ead6b5;
  background: #fff5df;
}
.rogue-footer button { min-height: 45px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 15px; }
.rogue-footer button[data-refresh] { border: 2px solid #f2a3be; background: linear-gradient(#ffb0ca, #ef7ba5); box-shadow: inset 0 -4px #bf567d, 0 3px 0 #a64a6c; }
.rogue-footer .rogue-depart { background: linear-gradient(#56c5aa, #2f9b80); box-shadow: inset 0 -4px #22705e, 0 3px 0 #1f6555; font-size: 16px; }
.rogue-footer .rogue-depart b { font: 700 25px/1 sans-serif; }
.rogue-footer .rogue-retire { color: #9b8066; font-size: 10px; }
@media (max-width: 350px) {
  .rogue-header { padding: 12px 13px; }
  .rogue-wallet { min-width: 82px; }
  .rogue-build-count { font-size: 9px !important; }
  .rogue-income { gap:3px; }
  .rogue-income span { min-width:0; padding:6px 1px; }
  .rogue-income small { font-size:8px; }
  .rogue-income b { gap:0; font-size:14px; }
  .rogue-income b img { width:15px; height:15px; }
  .rogue-build-open { padding-inline:7px; }
  .rogue-build-team img { width:31px; height:31px; }
  .rogue-card { padding-inline: 6px; }
  .rogue-card > img { width: 52px; height: 50px; }
  .rogue-next { grid-template-columns: auto 1fr auto; padding-inline: 7px; }
  .rogue-next.is-boss { gap: 4px; }
  .rogue-next-goals .rogue-next-boss { gap: 2px; }
  .rogue-next-goals .rogue-next-boss img { width: 32px; height: 32px; }
  .rogue-next-goals .rogue-next-boss b { font-size: 11px; }
  .rogue-next-goals .rogue-next-boss small { font-size: 10px; }
  .rogue-next-partner img { width: 24px; height: 24px; }
  .rogue-next-partner small { font-size: 9px; }
}

/* 独立构筑页：游戏中与补给站共用，点击伙伴/徽章查看详细效果。 */
#popup-rogue-build { z-index:190; padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); }
.rogue-build-panel { width:min(100%,520px); max-height:calc(100dvh - 24px); display:flex; flex-direction:column; overflow:hidden; border:3px solid #ffd5e4; border-radius:26px; background:linear-gradient(180deg,#fff9e9,#f9edda); box-shadow:0 18px 0 #33245466,0 25px 60px #16213c88; color:#4d3b37; text-align:left; }
.rogue-build-panel > header { position:relative; flex:0 0 auto; min-height:94px; padding:17px 64px 14px 18px; display:flex; align-items:center; gap:14px; background:linear-gradient(135deg,#765fc4,#c36aa9 65%,#ef90aa); color:#fff; overflow:hidden; }
.rogue-build-panel > header::after { content:''; position:absolute; width:120px; height:120px; right:90px; top:-75px; border-radius:50%; background:#fff3; }
.rogue-build-panel header > div:first-child { position:relative; z-index:1; }
.rogue-build-panel header small { color:#ffe9f2; font-size:10px; }
.rogue-build-panel header h2 { margin:1px 0 0; color:#fff; font-size:27px; text-shadow:0 2px 0 #663e8280; }
.rogue-build-wallet { position:relative; z-index:1; margin-left:auto; padding:6px 9px; display:flex; align-items:center; gap:3px; border:2px solid #ffd6e5; border-radius:14px; background:#513b83c9; box-shadow:0 3px 0 #452e68; }
.rogue-build-wallet img { width:29px; height:29px; }
.rogue-build-wallet b { color:#fff6c5; font:700 24px/1 'Fredoka',var(--font); }
.rogue-build-close { position:absolute; z-index:2; right:12px; top:13px; width:40px; height:40px; display:grid; place-items:center; padding:0; border:2px solid #fff; border-radius:50%; background:linear-gradient(#ff8aac,#e95f8c); box-shadow:0 3px 0 #ae4168; }
.rogue-build-close img { width:56%; }
.rogue-build-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 12px 14px 18px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rogue-build-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.rogue-build-tempo > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.rogue-build-tempo > div > span { padding:7px 5px; border:2px solid #e6c27e; border-radius:12px; background:#fff3bd; color:#7d5922; text-align:center; font-size:9px; }
.rogue-build-tempo > div b { display:block; margin-top:2px; color:#a45a22; font:700 15px/1 'Fredoka',var(--font); }
.rogue-build-scroll section > h3 { margin:8px 0 7px; display:flex; align-items:center; gap:6px; color:#5c4771; font-size:15px; }
.rogue-build-scroll section > h3 small { padding:2px 7px; border-radius:999px; background:#eaddf5; color:#795c99; font-size:9px; }
.rogue-build-grid { display:grid; gap:7px; }
.rogue-build-grid.partners { grid-template-columns:repeat(3,minmax(0,1fr)); }
.rogue-build-grid.traits { grid-template-columns:repeat(3,minmax(0,1fr)); }
.rogue-build-card { min-width:0; min-height:92px; padding:7px 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px solid #c5ded8; border-radius:15px; background:linear-gradient(180deg,#fffef8,#edf8f3); box-shadow:0 3px 0 #b9d1cb; color:#4e6c66; }
.rogue-build-card img { width:43px; height:43px; object-fit:contain; filter:drop-shadow(0 2px 1px #604a5230); }
.rogue-build-partner-art { position:relative; width:52px; height:50px; display:block; }
.rogue-build-partner-art > img:first-child { width:45px; height:45px; }
.rogue-build-partner-art .rogue-build-skill-mark { position:absolute; right:-3px; bottom:-1px; width:24px; height:24px; border:2px solid #fff; border-radius:50%; filter:drop-shadow(0 1px 1px #62485a66); }
.rogue-build-card b { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.rogue-build-card small { color:#78958f; font-size:8px; white-space:nowrap; }
.rogue-build-card.is-badge { border-color:#e6c699; background:linear-gradient(#fffdf5,#fff0cc); box-shadow:0 3px 0 #d9bf93; }
.rogue-build-card.is-selected { border-color:#ee78a5; box-shadow:0 0 0 2px #ffd1e2,0 4px 0 #c75682; transform:translateY(-1px); }
.rogue-build-card.is-empty { border-style:dashed; box-shadow:none; color:#9c958b; background:#eee8de; }
.rogue-build-card.is-empty i { font:700 26px/1 sans-serif; color:#bbb0a1; }
.rogue-build-bag > div { min-height:48px; display:flex; flex-wrap:wrap; gap:6px; padding:7px; border-radius:13px; background:#eadff3; }
.rogue-build-bag > div > span { display:flex; align-items:center; gap:3px; padding:3px 7px; border-radius:10px; background:#fff; color:#5d4777; }
.rogue-build-bag img { width:25px; height:25px; object-fit:contain; }
.rogue-build-bag b { font-size:10px; }.rogue-build-bag small { font:700 12px 'Fredoka',var(--font); }.rogue-build-bag em { margin:auto; color:#94869e; font-size:10px; }
.rogue-build-detail-layer { position:absolute; inset:0; z-index:5; display:grid; place-items:center; padding:15px; }
.rogue-build-detail-layer[hidden] { display:none; }
.rogue-build-detail-backdrop { position:absolute; inset:0; border:0; background:#241834ab; }
.rogue-build-detail { position:relative; width:min(100%,390px); max-height:min(75dvh,520px); margin:0; padding:20px 14px 14px; overflow:auto; border:3px solid #9dccdf; border-radius:22px; background:linear-gradient(145deg,#f3fdff,#dff2ff); box-shadow:0 8px 0 #81b8d0,0 18px 35px #1b284666; }
.rogue-build-detail-close { position:absolute; right:9px; top:8px; width:32px; height:32px; border:2px solid #fff; border-radius:50%; background:#ed78a2; color:#fff; font:900 23px/1 var(--font); }
.rogue-build-detail-content { padding-top:20px; }
.rogue-build-detail-head { display:flex; align-items:center; gap:10px; }
.rogue-build-detail-head > img { width:58px; height:58px; object-fit:contain; }
.rogue-build-detail-head small { color:#668ba1; font-size:9px; }.rogue-build-detail-head h3 { margin:1px 0!important; color:#4f3b77!important; font-size:18px!important; }.rogue-build-detail-head p { margin:0; color:#5d7e91; font-size:11px; }
.rogue-level-curve { margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; list-style:none; }
.rogue-level-curve li { min-width:0; padding:7px 4px; display:grid; place-items:center; align-content:start; gap:3px; border-radius:12px; background:#fff; color:#587487; text-align:center; }
.rogue-level-curve li.is-current { background:linear-gradient(#fff2bd,#ffdc72); box-shadow:inset 0 0 0 2px #e9b844; color:#775225; }
.rogue-level-curve b { font:700 13px 'Fredoka',var(--font); }.rogue-level-curve span { min-height:28px; font-size:9px; line-height:1.35; }.rogue-level-curve small { color:#8b7a70; font-size:8px; }
.rogue-build-sell { width:100%; min-height:40px; margin-top:9px; display:flex; justify-content:center; align-items:center; gap:3px; border:0; border-radius:12px; background:#f0d8df; color:#9a4968; font:700 11px var(--font); }
.rogue-build-sell img { width:20px; height:20px; }
.adventure-coin-flight { position:fixed; z-index:999; width:28px; height:28px; pointer-events:none; transform:translate(-50%,-50%); animation:adventure-coin-fly 760ms cubic-bezier(.2,.72,.24,1) both; }
@keyframes adventure-coin-fly { 0%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(-20deg)} 18%{opacity:1} 55%{transform:translate(calc(-50% + var(--coin-x)),calc(-50% + var(--coin-y) - 34px)) scale(1.18) rotate(160deg)} 100%{opacity:0;transform:translate(calc(-50% + var(--coin-x)),calc(-50% + var(--coin-y))) scale(.45) rotate(340deg)} }
.rogue-wallet.is-arriving,.rogue-hud-wallet.is-adventure { animation:adventure-wallet-pop .55s ease; }
@keyframes adventure-wallet-pop { 45%{transform:scale(1.14,.9);filter:brightness(1.25)} }
@media(max-width:350px){.rogue-build-grid.partners,.rogue-build-grid.traits{grid-template-columns:repeat(2,minmax(0,1fr))}.rogue-build-panel>header{padding-left:14px}.rogue-build-wallet{padding-inline:6px}}

/* 探险局外成长：沿用岛屿弹窗语言，但用卡片化信息避免文字墙。 */
.talent-popup { width:min(100%,390px); max-width:100%; box-sizing:border-box; height:min(82dvh,680px); }
.talent-popup .popup-panel { width:100%; box-sizing:border-box; }
.talent-popup .popup-panel { min-height:0; }
.talent-head {
  flex:0 0 auto;
  margin:2px 2px 8px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:2px solid #8ecce7;
  border-radius:16px;
  background:linear-gradient(135deg,#e8f9ff,#d8effc);
  box-shadow:0 3px 0 #a4cada;
}
.talent-head > * { min-width:0; }
.talent-head .talent-wallet { min-width:0; }
.talent-ad-coins { flex:1 1 auto; min-width:0; padding-inline:5px; white-space:nowrap; }
.talent-head .talent-wallet {
  flex:none;
  min-width:0;
  padding:5px 9px;
  display:grid;
  grid-template-columns:25px auto;
  align-items:center;
  justify-content:center;
  column-gap:4px;
  border:2px solid #eebc49;
  border-radius:999px;
  background:linear-gradient(#fff6bb,#ffd766);
  box-shadow:inset 0 2px #fffbd9,0 3px 0 #c7922e;
}
.talent-head .talent-wallet small { grid-column:1/-1; color:#9b702b; font-size:8px; line-height:1; }
.talent-head .talent-wallet img { width:25px; height:25px; object-fit:contain; }
.talent-head .talent-wallet b { color:#8a5a20; font:700 20px/1 'Fredoka',var(--font); }
.talent-ad-coins {
  min-height:48px;
  padding:6px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:2px solid #69c88a;
  border-radius:16px;
  background:linear-gradient(#a9efa9,#62cf83);
  box-shadow:inset 0 2px #d8ffd8,inset 0 -4px #3da865,0 3px 0 #2f8a53;
  color:#24643b;
  font:700 12px var(--font);
}
.talent-ad-coins > i { padding:2px 4px; border-radius:5px; background:#f16b67; color:#fff; font:700 9px/1 var(--font); box-shadow:0 1px 2px #5c3e4066; }
.talent-ad-coins > img { width:24px; height:24px; object-fit:contain; }
.talent-ad-coins > span b { color:#98621f; font:700 16px/1 'Fredoka',var(--font); }
.talent-ad-coins > span { min-width:0; }
.talent-ad-coins:active { transform:scale(1.04,.9); }
.talent-ad-coins:disabled { filter:saturate(.45); opacity:.75; }
.talent-ad-coins.is-loading > span { font-size:0; }
.talent-ad-coins.is-loading > span::after { content:'播放中…'; font-size:11px; }
.talent-list {
  width:100%;
  min-height:0;
  padding:2px 2px 8px;
  align-items:stretch;
  justify-content:flex-start;
  gap:8px;
  overflow-y:auto;
  touch-action:pan-y;
}
.talent-section-title {
  flex:0 0 auto;
  margin:4px 5px 0;
  padding-left:10px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#4d6f92;
  font-size:13px;
  text-align:left;
}
.talent-section-title::before { content:''; width:6px; height:18px; border-radius:999px; background:linear-gradient(#ff9ac0,#df598b); box-shadow:0 2px 0 #a9476d; }
.talent-card {
  flex:0 0 auto;
  min-height:100px;
  padding:9px;
  display:grid;
  grid-template-columns:62px minmax(0,1fr) 82px;
  align-items:center;
  gap:8px;
  border:2px solid #a8d2e5;
  border-radius:18px;
  background:linear-gradient(145deg,#fffef8,#eaf8ff);
  box-shadow:0 4px 0 #a9c9d8,0 6px 12px #36617a16;
}
.talent-card.is-maxed { border-color:#efc967; background:linear-gradient(145deg,#fffdf1,#fff1bd); box-shadow:0 4px 0 #d4aa49; }
.talent-icon { position:relative; width:60px; height:66px; display:grid; place-items:center; }
.talent-icon::before { content:''; position:absolute; inset:5px 2px 3px; border-radius:18px; background:linear-gradient(#dff7ff,#bce5f5); box-shadow:inset 0 0 0 2px #fff9; }
.talent-icon img { position:relative; width:50px; height:50px; object-fit:contain; filter:drop-shadow(0 2px 1px #31566a42); }
.talent-icon span { position:absolute; right:0; bottom:0; padding:2px 5px; border:2px solid #fff; border-radius:999px; background:#6f73c8; color:#fff; font:700 9px/1 var(--font); }
.talent-copy { min-width:0; }
.talent-copy h3 { margin:0; color:#4f4775; font-size:15px; }
.talent-copy p { margin:4px 0 1px; color:#42708a; font-size:10px; line-height:1.35; }
.talent-copy small { display:block; color:#8b7899; font-size:8px; line-height:1.35; }
.talent-level { height:8px; margin-top:3px; display:flex; gap:3px; }
.talent-level i { width:17px; height:6px; border-radius:999px; background:#d7d9dc; box-shadow:inset 0 1px #b9bdc2; }
.talent-level i.is-on { background:linear-gradient(90deg,#ffd55c,#f3a83d); box-shadow:inset 0 1px #fff3a9,0 1px #c78127; }
.talent-buy {
  min-height:58px;
  padding:6px 5px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border:2px solid #e37ca5;
  border-radius:14px;
  background:linear-gradient(#ff9fc1,#ef719f);
  box-shadow:inset 0 2px #ffcce0,inset 0 -4px #c1517b,0 3px 0 #a8486c;
  color:#fff;
  text-shadow:0 1px #a64b70;
  font:700 11px var(--font);
}
.talent-buy b { display:flex; align-items:center; gap:2px; color:#fff6bd; font:700 14px/1 'Fredoka',var(--font); }
.talent-buy img { width:20px; height:20px; object-fit:contain; }
.talent-buy:not(:disabled):active { transform:scale(1.06,.88); }
.talent-buy:disabled { border-color:#c8c2b6; background:#d9d4c9; box-shadow:inset 0 -3px #aaa59b,0 2px 0 #979187; color:#817b72; text-shadow:none; }
.talent-card.is-maxed .talent-buy:disabled { border-color:#dcae48; background:linear-gradient(#ffe889,#efbd48); box-shadow:inset 0 2px #fff6b9,0 3px 0 #b98631; color:#81561e; }
.talent-buy.is-denied { animation:talent-denied .28s ease; }
@keyframes talent-denied { 25%{transform:translateX(-4px)} 50%{transform:translateX(4px)} 75%{transform:translateX(-2px)} }
.talent-toast { position:sticky; z-index:2; top:0; align-self:center; padding:5px 13px; border-radius:999px; background:#5677b7; box-shadow:0 3px 0 #38578f; color:#fff; font-size:10px; }
.rogue-global-reward {
  margin:7px 0 2px;
  padding:7px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:2px solid #e9c35a;
  border-radius:13px;
  background:linear-gradient(135deg,#fff9d3,#ffe99a);
  color:#87601f;
  box-shadow:0 3px 0 #d0a23f;
}
.rogue-global-reward span { display:flex; align-items:center; gap:4px; font-size:11px; }
.rogue-global-reward img { width:23px; height:23px; object-fit:contain; }
.rogue-global-reward b { color:#c57924; font:700 16px/1 'Fredoka',var(--font); }
.rogue-global-reward small { color:#8d6c32; font-size:9px; }
.rogue-global-reward small.is-arriving { animation:global-wallet-pop .65s ease; }
.global-coin-flight { position:fixed; z-index:999; width:23px; height:23px; pointer-events:none; transform:translate(-50%,-50%); animation:global-coin-fly .72s cubic-bezier(.18,.75,.22,1) both; }
@keyframes global-coin-fly { 0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-25deg)} 18%{opacity:1} 58%{transform:translate(calc(-50% + var(--coin-x)),calc(-50% + var(--coin-y) - 24px)) scale(1.15) rotate(170deg)} 100%{opacity:0;transform:translate(calc(-50% + var(--coin-x)),calc(-50% + var(--coin-y))) scale(.55) rotate(320deg)} }
@keyframes global-wallet-pop { 45%{transform:scale(1.12,.9);color:#c47723} }
@media(max-width:350px){
  .talent-popup{height:min(86dvh,650px)}
  .talent-card{grid-template-columns:52px minmax(0,1fr) 72px;padding:7px 6px;gap:5px}
  .talent-icon{width:50px}.talent-icon img{width:43px;height:43px}
  .talent-copy h3{font-size:13px}.talent-copy p{font-size:9px}.talent-buy{font-size:10px}
}
.ad-revive.is-free .ad-badge { display: none; }
.rogue-victory{position:relative;isolation:isolate;overflow:hidden;margin:8px 0 14px;padding:20px 16px;text-align:center;border:2px solid #f1c663;border-radius:22px;background:linear-gradient(145deg,#fff5cc,#ffe1b2);color:#74401b;box-shadow:inset 0 2px 0 #fff9e7}
.rogue-victory>img{position:absolute;z-index:-1;width:240px;height:240px;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.35;pointer-events:none}
.rogue-victory h3{font-size:28px;margin:8px 0;color:#a34a18;text-shadow:0 2px #fff}
.rogue-victory p{font-size:13px;line-height:1.65;margin:7px 0}
.rogue-victory b{display:block;font-size:12px;margin-top:12px}