/* ============================================================
   开心农场 · H5 样式
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  --green: #43a047;
  --green-d: #2e7d32;
  --green-l: #a5d6a7;
  --brown: #7a5230;
  --brown-d: #5d3f22;
  --gold: #ffb300;
  --sky1: #7ec8f7;
  --sky2: #d9f2ff;
  --card: rgba(255, 255, 255, 0.95);
  --txt: #3a2e1f;
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

html, body {
  height: 100%;
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  color: var(--txt);
  background: #eef7e6;
  overscroll-behavior: none;
}

#app { height: 100%; display: flex; flex-direction: column; }

/* ---------- 通用 ---------- */
button { font-family: inherit; border: none; cursor: pointer; outline: none; }
button:disabled { opacity: .55; cursor: not-allowed; }
.hidden { display: none !important; }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0, 0, 0, 0.28); color: #fff;
  padding: 4px 10px; border-radius: 999px; font-size: 13px;
  backdrop-filter: blur(2px); white-space: nowrap;
}

/* ---------- 登录页 ---------- */
#screen-login {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; gap: 18px;
  background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 55%, #cdeec0 55%, #b8e0a8 100%);
  min-height: 100%;
}
.login-logo { font-size: 64px; text-align: center; filter: drop-shadow(0 6px 8px rgba(0,0,0,.2)); animation: bob 3s ease-in-out infinite; }
.login-title { font-size: 26px; font-weight: 800; color: #2e5d1e; text-shadow: 0 1px 0 #fff; letter-spacing: 4px; }
.login-card {
  width: min(92vw, 360px); background: var(--card); border-radius: 18px;
  padding: 20px 18px; box-shadow: var(--shadow);
}
.login-tabs { display: flex; background: #e8f1dc; border-radius: 999px; padding: 4px; margin-bottom: 16px; }
.login-tabs button {
  flex: 1; padding: 9px 0; border-radius: 999px; background: transparent; color: #57703a; font-size: 15px; font-weight: 600;
}
.login-tabs button.active { background: var(--green); color: #fff; box-shadow: 0 2px 6px rgba(67,160,71,.4); }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: #8a7a63; margin-bottom: 5px; }
.field input {
  width: 100%; padding: 11px 12px; border-radius: 10px; border: 1.5px solid #d8cdb6;
  font-size: 15px; background: #fdfbf5; color: var(--txt); transition: border .2s;
}
.field input:focus { border-color: var(--green); outline: none; background: #fff; }
.btn-primary {
  width: 100%; padding: 12px; border-radius: 12px; background: linear-gradient(180deg, #66bb6a, var(--green-d));
  color: #fff; font-size: 16px; font-weight: 700; box-shadow: 0 3px 8px rgba(46,125,50,.35); letter-spacing: 2px;
}
.form-msg { min-height: 18px; font-size: 12.5px; margin-bottom: 6px; }
.form-msg.err { color: #d32f2f; }
.form-msg.ok { color: #2e7d32; }

/* ---------- 游戏主界面 ---------- */
#screen-game { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 12px; color: #fff;
  background: linear-gradient(180deg, rgba(46,110,180,.95), rgba(84,164,220,.85));
  box-shadow: 0 2px 8px rgba(0,0,0,.15); z-index: 5;
}
.player-box { display: flex; align-items: center; gap: 8px; min-width: 0; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; background: linear-gradient(135deg,#ffe082,#ffb300);
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.player-name { font-size: 15px; font-weight: 700; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-chip { background: rgba(255,255,255,.25); font-size: 11px; padding: 1px 7px; border-radius: 999px; }
.xp-track { width: 74px; height: 6px; background: rgba(0,0,0,.3); border-radius: 4px; overflow: hidden; margin-top: 3px; }
.xp-track i { display: block; height: 100%; background: linear-gradient(90deg,#ffe082,#ffca28); border-radius: 4px; transition: width .4s; }
.stat-box { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.stat-row { display: flex; gap: 6px; }
.stat-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.22); padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.stat-chip small { font-weight: 400; font-size: 10px; opacity: .9; }
.logout-btn { font-size: 11px; background: rgba(0,0,0,.22); color: #fff; padding: 3px 8px; border-radius: 8px; }

/* 场景滚动区 */
.scene-wrap { flex: 1; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; position: relative; }

/* ---------- 农场场景 ---------- */
.farm-scene {
  position: relative; min-height: 100%; padding: 14px 10px 20px;
  background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 30%, #a5d98a 30%, #8fca77 100%);
}

/* ===== 背景主题: 中秋限定(花好月圆) —— 深蓝夜空 ===== */
.farm-scene[data-bg="bg_midautumn"] {
  background-color: #1b2150;   /* 兜底: 多重渐变不被支持时也能看出是夜间主题 */
  background:
    radial-gradient(circle at 84% 9%, #fff6c9 0, rgba(255,246,201,.85) 26px, rgba(255,246,201,.28) 44px, rgba(255,246,201,0) 68px),
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.6) 0, rgba(255,255,255,0) 2.6px),
    radial-gradient(circle at 38% 8%, rgba(255,255,255,.5) 0, rgba(255,255,255,0) 2.4px),
    radial-gradient(circle at 62% 22%, rgba(255,255,255,.45) 0, rgba(255,255,255,0) 2.4px),
    radial-gradient(circle at 14% 33%, rgba(255,255,255,.4) 0, rgba(255,255,255,0) 2.2px),
    radial-gradient(circle at 74% 30%, rgba(255,255,255,.35) 0, rgba(255,255,255,0) 2.2px),
    linear-gradient(180deg, #101538 0%, #1d2456 26%, #333a72 44%, #5a4f83 54%, #8a6d92 58%, #3f5a63 58%, #22343a 100%);
}

/* ===== 背景主题: 中秋限定 · 月满动态版 —— 紫红晚霞 + 更大满月(一眼可辨) ===== */
.farm-scene[data-bg="bg_midautumn_live"] {
  background-color: #3a1f4e;   /* 兜底: 紫红夜色调 */
  background:
    /* 更大更亮的满月 */
    radial-gradient(circle at 78% 13%, #fffdf0 0, rgba(255,248,214,.95) 40px, rgba(255,232,170,.45) 62px, rgba(255,232,170,0) 96px),
    /* 地平线暖霞 */
    radial-gradient(circle at 50% 57%, rgba(255,170,140,.4) 0, rgba(255,170,140,0) 54%),
    /* 星点 */
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.7) 0, rgba(255,255,255,0) 2.6px),
    radial-gradient(circle at 34% 7%, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 2.4px),
    radial-gradient(circle at 55% 20%, rgba(255,255,255,.5) 0, rgba(255,255,255,0) 2.4px),
    radial-gradient(circle at 10% 30%, rgba(255,255,255,.42) 0, rgba(255,255,255,0) 2.2px),
    radial-gradient(circle at 66% 31%, rgba(255,255,255,.4) 0, rgba(255,255,255,0) 2.2px),
    /* 夜空 -> 紫红晚霞 -> 金橙地平线 -> 夜色草地 */
    linear-gradient(180deg, #0d0b2e 0%, #2a1750 20%, #55245f 36%, #8b3a64 48%, #c9666a 55%, #f0a878 58%, #4a4a56 58%, #24343c 100%);
}

.farm-scene[data-bg="bg_midautumn"] .farm-grid,
.farm-scene[data-bg="bg_midautumn_live"] .farm-grid {
  background: rgba(30, 34, 60, .55);
  border-color: rgba(20, 24, 45, .8);
  box-shadow: inset 0 0 34px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.35);
}
.farm-scene[data-bg="bg_midautumn"] .tool-btn,
.farm-scene[data-bg="bg_midautumn_live"] .tool-btn {
  background: rgba(255,255,255,.86); color: #3b2f4a;
}
.farm-scene[data-bg="bg_midautumn"] .farm-visit-head,
.farm-scene[data-bg="bg_midautumn_live"] .farm-visit-head {
  background: rgba(255,255,255,.82);
}

/* ===== 背景主题: 一周年限定(赤金流光) ===== */
.farm-scene[data-bg="bg_anniversary"] {
  background-color: #7a1a2a;   /* 兜底: 多重渐变不被支持时也能看出是赤金庆典主题 */
  background:
    /* 金屑(稀疏几颗, 保证兼容性) */
    radial-gradient(circle at 12% 10%, rgba(255,232,166,.95) 0, rgba(255,232,166,0) 2.6px),
    radial-gradient(circle at 31% 19%, rgba(255,255,255,.6) 0, rgba(255,255,255,0) 2.2px),
    radial-gradient(circle at 47% 8%, rgba(255,204,120,.9) 0, rgba(255,204,120,0) 3px),
    radial-gradient(circle at 65% 21%, rgba(255,240,196,.7) 0, rgba(255,240,196,0) 2.6px),
    radial-gradient(circle at 85% 12%, rgba(255,236,182,.9) 0, rgba(255,236,182,0) 3.2px),
    radial-gradient(circle at 23% 33%, rgba(255,226,150,.5) 0, rgba(255,226,150,0) 2.4px),
    radial-gradient(circle at 73% 35%, rgba(255,226,150,.45) 0, rgba(255,226,150,0) 2.6px),
    /* 地平线赤金暖光 */
    radial-gradient(circle at 50% 52%, rgba(255,190,104,.45) 0, rgba(255,190,104,0) 62%),
    /* 天空 -> 田野 */
    linear-gradient(180deg, #470c1a 0%, #6b1526 15%, #93232f 29%, #b83d33 40%, #d4693a 49%, #e79a4a 55%, #f0c165 58%, #6b7d40 58%, #3f5228 100%);
}
/* 远处柔光层(置于内容之下) */
.farm-scene[data-bg="bg_anniversary"]::before {
  content: ""; position: absolute; top: -8%; left: -14%; right: -14%; height: 64%;
  background:
    radial-gradient(circle at 30% 92%, rgba(255,214,140,.20) 0, rgba(255,214,140,0) 58%),
    radial-gradient(circle at 78% 88%, rgba(255,178,112,.16) 0, rgba(255,178,112,0) 56%);
  pointer-events: none; z-index: 0;
}
/* 高处细碎金屑 */
.farm-scene[data-bg="bg_anniversary"]::after {
  content: ""; position: absolute; top: 3%; left: 0; right: 0; height: 30%;
  background:
    radial-gradient(circle at 7% 44%, rgba(255,244,210,.72) 0, rgba(255,244,210,0) 2.5px),
    radial-gradient(circle at 31% 16%, rgba(255,226,150,.62) 0, rgba(255,226,150,0) 2.8px),
    radial-gradient(circle at 57% 62%, rgba(255,244,210,.55) 0, rgba(255,244,210,0) 2.2px),
    radial-gradient(circle at 74% 26%, rgba(255,226,150,.66) 0, rgba(255,226,150,0) 2.7px),
    radial-gradient(circle at 90% 70%, rgba(255,244,210,.45) 0, rgba(255,244,210,0) 2.2px);
  pointer-events: none; z-index: 0;
}
/* 内容压在装饰层之上 */
.farm-scene .farm-inner { position: relative; z-index: 1; }
.farm-scene[data-bg="bg_anniversary"] .farm-grid,
.farm-scene[data-bg="bg_anniversary"] .farm-tools,
.farm-scene[data-bg="bg_anniversary"] .farm-visit-head {
  position: relative; z-index: 1;
}

/* ===== 派对装饰层(一周年) ===== */
.scene-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

/* ---------- 草地(替换单调纯色): 修剪条纹 + 灯光光池 + 灌木剪影 ---------- */
.scene-deco .lawn {
  position: absolute; left: 0; right: 0; top: 58%; bottom: 0;
  background:
    radial-gradient(circle at 11% 22%, rgba(255,214,140,.32) 0, rgba(255,214,140,0) 46%),
    radial-gradient(circle at 89% 22%, rgba(255,196,120,.28) 0, rgba(255,196,120,0) 44%),
    radial-gradient(circle at 50% 96%, rgba(255,206,120,.16) 0, rgba(255,206,120,0) 52%),
    repeating-linear-gradient(100deg,
      rgba(255,255,255,.055) 0, rgba(255,255,255,.055) 15px,
      rgba(0,0,0,.065) 15px, rgba(0,0,0,.065) 30px),
    linear-gradient(180deg, #748a41 0%, #5f7736 30%, #4b602b 68%, #364821 100%);
}
/* 地平线灌木/树丛剪影(低调, 只露出顶部) */
.scene-deco .lawn::before {
  content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 22px;
  background-image: radial-gradient(circle at 50% 100%, rgba(30,42,21,.95) 0, rgba(30,42,21,.95) 13px, rgba(30,42,21,0) 14px);
  background-size: 46px 22px; background-repeat: repeat-x; background-position: 0 100%;
  opacity: .68;
}
/* 地平线暖光边(呼应天空) */
.scene-deco .lawn::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, rgba(255,214,140,0), rgba(255,236,180,.85), rgba(255,214,140,0));
  opacity: .85;
}

/* ---------- 金边红毯(透视梯形): 金色底 + 红色面 = 视觉金边 ---------- */
.scene-deco .carpet-gold,
.scene-deco .carpet { position: absolute; left: 0; right: 0; top: 59.5%; bottom: 0; }
.scene-deco .carpet-gold {
  clip-path: polygon(43.4% 0, 56.6% 0, 84% 100%, 16% 100%);
  background: linear-gradient(180deg, rgba(255,234,176,.95), rgba(226,178,86,.9));
}
.scene-deco .carpet {
  clip-path: polygon(45.9% 0, 54.1% 0, 81.4% 100%, 18.6% 100%);
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.07) 0, rgba(0,0,0,.07) 8px,
      rgba(255,255,255,.045) 8px, rgba(255,255,255,.045) 16px),
    linear-gradient(180deg, #8e1c2d 0%, #ab2739 48%, #7a1524 100%);
  box-shadow: inset 0 0 30px rgba(0,0,0,.35);
}
.scene-deco .carpet::after {   /* 地毯上的灯光 */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42%;
  background: linear-gradient(180deg, rgba(255,236,180,.3), rgba(255,236,180,0));
}

/* 三角旗串 */
.scene-deco .bunting {
  position: absolute; top: 0; left: 0; right: 0; height: 24px;
  display: flex; justify-content: space-between; align-items: flex-start; padding: 0 2px;
}
.scene-deco .bunting i {
  width: 15px; height: 21px; flex: none;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  animation: flagSway 3.2s ease-in-out infinite;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.scene-deco .bunting::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, rgba(255,236,180,.2), rgba(255,236,180,.75), rgba(255,236,180,.2));
}
@keyframes flagSway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

/* 舞台光束 */
.scene-deco .beam {
  position: absolute; top: -6%; width: 130px; height: 66%; opacity: .17;
  background: linear-gradient(180deg, rgba(255,236,176,.95), rgba(255,236,176,0) 82%);
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
  transform-origin: top center; filter: blur(1px);
  animation: beamPulse 5s ease-in-out infinite;
}
.scene-deco .beam-l { left: 4%; transform: rotate(-11deg); }
.scene-deco .beam-r { right: 4%; transform: rotate(11deg); animation-delay: 1.4s; }
@keyframes beamPulse {
  0%, 100% { opacity: .12; }
  50% { opacity: .24; }
}

/* 气球 */
.scene-deco .balloon {
  position: absolute; width: 24px; height: 30px; border-radius: 50% 50% 48% 48%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.8), rgba(255,255,255,0) 44%),
    var(--c, #ff6b81);
  box-shadow: inset -3px -4px 8px rgba(0,0,0,.2), 0 3px 10px rgba(0,0,0,.18);
  animation: balloonFloat 7s ease-in-out infinite;
}
.scene-deco .balloon::before {   /* 气球结 */
  content: ""; position: absolute; left: 50%; bottom: -3px; width: 6px; height: 6px;
  background: var(--c, #ff6b81); border-radius: 1px;
  transform: translateX(-50%) rotate(45deg);
}
.scene-deco .balloon::after {    /* 线 */
  content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0));
  transform: translateX(-50%);
}
@keyframes balloonFloat {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -14px; }
}

/* 彩屑 */
.scene-deco .cf {
  position: absolute; top: -16px; width: 6px; height: 11px; border-radius: 2px;
  opacity: .92; animation: confettiFall 7s linear infinite;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  8% { opacity: .95; }
  100% { transform: translateY(620px) rotate(560deg); opacity: .1; }
}

/* 金色纪念徽章 */
.scene-deco .seal {
  position: absolute; top: 34px; right: 14px; width: 54px; height: 54px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 34% 26%, #fff6cf, #e6b246 60%, #b8822a);
  color: #5a2a00; line-height: 1.05; text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.75),
              0 0 0 2px rgba(255,238,186,.4), 0 0 18px rgba(255,196,88,.35);
  animation: sealGlow 3.4s ease-in-out infinite;
}
.scene-deco .seal b { font-size: 15px; font-weight: 900; letter-spacing: .5px; }
.scene-deco .seal span { font-size: 10px; font-weight: 700; opacity: .85; }
@keyframes sealGlow {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.75), 0 0 0 2px rgba(255,238,186,.4), 0 0 14px rgba(255,196,88,.3); }
  50% { box-shadow: 0 4px 16px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.85), 0 0 0 2px rgba(255,238,186,.6), 0 0 26px rgba(255,206,110,.5); }
}

/* ============================================================
   中秋装饰层(月光草坪 / 月下池塘 / 灯笼串 / 孔明灯 / 流云 / 桂花)
   ============================================================ */

/* 月光草坪(替代原来的纯色草皮) */
.scene-deco .lawn-moon {
  background:
    radial-gradient(circle at 50% 4%, rgba(214,232,255,.30) 0, rgba(214,232,255,0) 48%),
    radial-gradient(circle at 13% 24%, rgba(190,220,255,.18) 0, rgba(190,220,255,0) 46%),
    radial-gradient(circle at 87% 24%, rgba(190,220,255,.16) 0, rgba(190,220,255,0) 44%),
    repeating-linear-gradient(100deg,
      rgba(198,224,255,.06) 0, rgba(198,224,255,.06) 16px,
      rgba(0,0,0,.075) 16px, rgba(0,0,0,.075) 32px),
    linear-gradient(180deg, #4f6b58 0%, #425c4b 30%, #34483d 68%, #263630 100%);
}
.scene-deco .lawn-moon::before {   /* 远处树丛剪影 */
  content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 22px;
  background-image: radial-gradient(circle at 50% 100%, rgba(20,34,29,.95) 0, rgba(20,34,29,.95) 13px, rgba(20,34,29,0) 14px);
  background-size: 46px 22px; background-repeat: repeat-x; background-position: 0 100%;
  opacity: .6;
}
.scene-deco .lawn-moon::after {    /* 月光洒在草坪上的亮边 */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, rgba(198,224,255,0), rgba(232,242,255,.8), rgba(198,224,255,0));
  opacity: .8;
}

/* 月下池塘(含月亮倒影与水面波纹) */
.scene-deco .pond {
  position: absolute; left: 5%; right: 5%; bottom: 3.5%; height: 25%;
  border-radius: 50% 50% 46% 46% / 34% 34% 44% 44%;
  background: linear-gradient(180deg, #183651 0%, #112941 62%, #0b1c2c 100%);
  box-shadow: inset 0 8px 20px rgba(0,0,0,.55), inset 0 -6px 16px rgba(150,200,240,.14);
  overflow: hidden;
}
.scene-deco .pond::before {        /* 月亮倒影 */
  content: ""; position: absolute; left: 50%; top: 5%; width: 38%; height: 76%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 26%, rgba(255,246,201,.9) 0, rgba(255,246,201,.3) 38%, rgba(255,246,201,0) 72%);
  filter: blur(1px); opacity: .85;
}
.scene-deco .pond::after {         /* 水面波纹 */
  content: ""; position: absolute; left: 0; right: 0; bottom: 6%; height: 30%;
  background: repeating-linear-gradient(180deg,
    rgba(200,225,255,.16) 0, rgba(200,225,255,.16) 1px,
    rgba(200,225,255,0) 1px, rgba(200,225,255,0) 7px);
  opacity: .7;
}

/* 流云 */
.scene-deco .cloud {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(228,240,255,.22), rgba(228,240,255,0) 70%);
  filter: blur(3px); animation: cloudDrift 60s linear infinite;
}
@keyframes cloudDrift {
  0% { margin-left: 0; opacity: 0; }
  12% { opacity: 1; }
  86% { opacity: 1; }
  100% { margin-left: 135%; opacity: 0; }
}

/* 孔明灯(缓缓升起) */
.scene-deco .skylantern {
  position: absolute; width: 13px; height: 17px; border-radius: 42% 42% 52% 52%;
  background: radial-gradient(circle at 50% 62%, #ffe6a8, #ec9a45 68%, rgba(200,110,40,.8));
  box-shadow: 0 0 16px rgba(255,180,90,.6), 0 0 34px rgba(255,150,60,.26);
  animation: skyRise 18s linear infinite; opacity: .95;
}
@keyframes skyRise {
  0% { margin-top: 50px; opacity: 0; }
  10% { opacity: .95; }
  84% { opacity: .8; }
  100% { margin-top: -520px; opacity: 0; }
}

/* 灯笼串 */
.scene-deco .lantern-line {
  position: absolute; left: 0; right: 0; top: 8px; height: 26px;
  border-bottom: 1px solid rgba(255,226,170,.45);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.scene-deco .lantern {
  position: absolute; width: 20px; height: 24px; border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 34% 30%, #ffdca6, #e8402f 60%, #9e150c);
  box-shadow: 0 0 14px rgba(255,140,80,.55), inset -3px -3px 7px rgba(0,0,0,.28);
  transform-origin: top center;
  animation: lanternSway 4.4s ease-in-out infinite;
}
.scene-deco .lantern::before {   /* 上盖 */
  content: ""; position: absolute; left: 50%; top: -4px; width: 10px; height: 4px;
  background: #f0c86a; border-radius: 2px; transform: translateX(-50%);
}
.scene-deco .lantern::after {    /* 流苏 */
  content: ""; position: absolute; left: 50%; bottom: -8px; width: 2px; height: 9px;
  background: linear-gradient(180deg, #f0c86a, rgba(240,200,106,0));
  transform: translateX(-50%);
}
@keyframes lanternSway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

/* 桂花飘落 */
.scene-deco .petal {
  position: absolute; top: -12px; width: 8px; height: 6px;
  border-radius: 50% 0 50% 0; background: #ffe9b0; opacity: .9;
  box-shadow: 0 0 6px rgba(255,220,150,.35);
  animation: petalFall 11s linear infinite;
}
@keyframes petalFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: .9; }
  100% { transform: translateY(620px) rotate(420deg); opacity: .12; }
}

/* 中秋徽章(月光配色) */
.scene-deco .seal-moon {
  background: radial-gradient(circle at 34% 26%, #f4f9ff, #7ba7cf 62%, #3f6b96);
  color: #0d2438;
  box-shadow: 0 4px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.8),
              0 0 0 2px rgba(210,232,255,.35), 0 0 18px rgba(150,200,255,.35);
  animation: none;
}
.scene-deco .seal-moon b { font-size: 15px; letter-spacing: 1px; }

/* 动态版徽章: 暖金配色 + 第二行"动态版", 与普通版一眼区分 */
.scene-deco .seal-moon-live {
  background: radial-gradient(circle at 34% 26%, #fff6d8, #e0a95a 62%, #a8722a);
  color: #4a2500;
  box-shadow: 0 4px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.85),
              0 0 0 2px rgba(255,232,170,.5), 0 0 22px rgba(255,190,90,.45);
}
.scene-deco .seal-moon-live b { font-size: 14px; }
.scene-deco .seal-moon-live span { font-size: 9px; font-weight: 700; opacity: .9; }

/* ============================================================
   中秋 · 月满动态版 专属装饰(满屏灯笼 / 月兔 / 游鱼 / 萤火)
   ============================================================ */

/* 第二排灯笼串(只出现在动态版) */
.scene-deco .lantern-line-2 {
  top: 30px; height: 22px; opacity: .8;
}
.scene-deco .lantern-sm { width: 16px; height: 19px; }
.scene-deco .lantern-sm::before { width: 8px; height: 3px; top: -3px; }
.scene-deco .lantern-sm::after { height: 7px; bottom: -6px; }

/* 池中游鱼(挂在池塘内部, 被池塘裁切) */
.scene-deco .fish {
  position: absolute; left: 44%; width: 17px; height: 9px;
  border-radius: 52% 40% 40% 52%;
  background: linear-gradient(180deg, rgba(255,238,186,.95), rgba(228,166,86,.8));
  box-shadow: 0 0 9px rgba(255,214,140,.5);
  opacity: .9;                            /* 静态兜底: 关掉动画时也停在池中央(而非游到画外) */
  animation: fishSwim 13s linear infinite;
}
.scene-deco .fish::after {   /* 鱼尾 */
  content: ""; position: absolute; right: -5px; top: 1.5px; width: 0; height: 0;
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  border-left: 6px solid rgba(255,220,150,.85);
}
.scene-deco .fish::before {  /* 鱼眼 */
  content: ""; position: absolute; left: 3px; top: 3px; width: 2px; height: 2px;
  border-radius: 50%; background: rgba(60,40,10,.7);
}
@keyframes fishSwim {
  0% { left: -14%; opacity: 0; }
  10% { opacity: .95; }
  86% { opacity: .95; }
  100% { left: 104%; opacity: 0; }
}

/* 月兔剪影(蹲在池边, 轻轻起伏) */
.scene-deco .moonrabbit {
  position: absolute; left: 11%; bottom: 5%; width: 46px; height: 56px;
  opacity: .93; animation: rabbitBob 4.6s ease-in-out infinite;
}
.scene-deco .moonrabbit::before {   /* 身体 */
  content: ""; position: absolute; left: 8px; bottom: 0; width: 30px; height: 27px;
  border-radius: 52% 52% 42% 42%;
  background: linear-gradient(180deg, #24394d, #152638);
  box-shadow: inset -3px -2px 7px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.4);
}
.scene-deco .moonrabbit::after {    /* 头 + 两只耳朵 */
  content: ""; position: absolute; left: 13px; bottom: 22px; width: 21px; height: 19px;
  border-radius: 50%;
  background: linear-gradient(180deg, #24394d, #16283a);
  box-shadow: -4px -11px 0 -5px #223749, 5px -12px 0 -5px #223749, inset -2px -2px 5px rgba(0,0,0,.4);
}
@keyframes rabbitBob {
  0%, 100% { margin-bottom: 0; }
  50% { margin-bottom: 7px; }
}

/* 萤火虫 */
.scene-deco .firefly {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #fff0bd; opacity: .9;
  box-shadow: 0 0 8px rgba(255,226,150,.95), 0 0 18px rgba(255,200,110,.5);
  animation: fireflyDrift 10s ease-in-out infinite;
}
@keyframes fireflyDrift {
  0%, 100% { transform: translate(0, 0); opacity: .3; }
  25% { transform: translate(15px, -22px); opacity: 1; }
  50% { transform: translate(-9px, -36px); opacity: .55; }
  75% { transform: translate(11px, -15px); opacity: .95; }
}

/* 无障碍: 用户偏好减少动效时关闭自动播放 */
@media (prefers-reduced-motion: reduce) {
  .scene-deco .cf,
  .scene-deco .balloon,
  .scene-deco .bunting i,
  .scene-deco .beam,
  .scene-deco .seal,
  .scene-deco .cloud,
  .scene-deco .skylantern,
  .scene-deco .lantern,
  .scene-deco .petal,
  .scene-deco .fish,
  .scene-deco .moonrabbit,
  .scene-deco .firefly { animation: none !important; }
}
.farm-scene[data-bg="bg_anniversary"] .farm-grid {
  background: rgba(58, 18, 22, .52);
  border-color: rgba(255, 214, 102, .42);
  box-shadow: inset 0 0 36px rgba(0,0,0,.44), 0 8px 24px rgba(0,0,0,.34),
              0 0 0 1px rgba(255,228,160,.28), 0 0 22px rgba(255,190,90,.14);
}
.farm-scene[data-bg="bg_anniversary"] .tool-btn {
  background: rgba(255,250,236,.92); color: #7a1f2b;
  box-shadow: 0 4px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.8);
}
.farm-scene[data-bg="bg_anniversary"] .farm-visit-head {
  background: rgba(255,250,236,.88);
}
.farm-visit-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
  background: rgba(255,255,255,.75); border-radius: 14px; padding: 8px 12px; box-shadow: var(--shadow);
}
.farm-visit-head .t { font-weight: 800; font-size: 16px; color: #2e5d1e; }
.back-btn { background: var(--green-d); color: #fff; border-radius: 10px; padding: 6px 12px; font-size: 13px; }

.farm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
  padding: 14px;
  background: rgba(122, 82, 48, .35);
  border: 6px solid rgba(93, 63, 34, .55);
  border-radius: 18px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.2), var(--shadow);
}
@media (max-width: 380px) { .farm-grid { grid-template-columns: repeat(3, 1fr); } }
.plot {
  position: relative; aspect-ratio: 1/1; border-radius: 10px;
  border: 2px solid rgba(93,63,34,.4);
  overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.28), transparent 40%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #c89b64, #a9743f);
  box-shadow: inset 0 -6px 10px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.15);
  cursor: pointer; user-select: none;
}
.plot:active { transform: scale(.97); }
.plot.empty { border-style: dashed; border-color: rgba(255,255,255,.55); }
.plot.empty::after { content: "＋"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; color: rgba(255,255,255,.7); text-shadow: 0 2px 4px rgba(0,0,0,.25); pointer-events: none; }

/* 锁定的地 */
.plot.locked {
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.12) 0 8px, transparent 8px 16px), linear-gradient(160deg, #8fae6f, #6d8f4e);
  border: 2px solid rgba(0,0,0,.25); cursor: pointer;
}
.lock-info { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.lock-info .lock-ico { font-size: 30px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.lock-price { background: rgba(255,255,255,.9); color: #8a6d1f; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; display:flex; align-items:center; gap:2px; }
.lock-price .coin { color: #f9a825; }
.lock-unlockable .lock-ico { animation: pulseGlow 1.2s infinite; }

/* 作物显示区 */
.crop-zone { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.crop-emoji { font-size: 34px; line-height: 1.15; filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)); }
.plot.growing .crop-emoji { transform-origin: bottom center; animation: growPop .8s ease-out; }
.plot.mature { border-color: #ffe082; box-shadow: 0 0 12px rgba(255,214,0,.65), inset 0 -6px 10px rgba(0,0,0,.12); }
.plot.mature .crop-emoji { animation: ripe 1.6s ease-in-out infinite; font-size: 38px; }
.plot.wilted { filter: grayscale(.6) brightness(.8); }
.plot.wilted .crop-emoji { font-size: 26px; opacity: .85; }
.need-water {
  position: absolute; top: 2px; right: 2px; background: rgba(2,136,209,.85); color: #fff;
  font-size: 9.5px; padding: 1px 5px; border-radius: 999px; display:flex; align-items:center; gap:1px; z-index: 2;
}
.steal-badge {
  position: absolute; top: 2px; left: 2px; background: rgba(216,27,96,.9); color: #fff;
  font-size: 9.5px; padding: 1px 5px; border-radius: 999px; z-index: 2;
}

/* 进度与状态 */
.crop-progress { width: calc(100% - 8px); height: 6px; background: rgba(0,0,0,.35); border-radius: 3px; overflow: hidden; margin: 0 4px 6px; }
.crop-progress i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg,#fff59d,#ffd54f); transition: width .5s linear; }
.plot.mature .crop-progress i { background: linear-gradient(90deg,#a5d6a7,#43a047); }
.time-left { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 9px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); font-weight: 600; }
.state-tag { position: absolute; top: 2px; left: 2px; font-size: 9px; padding: 1px 5px; border-radius: 4px; color:#fff; background: rgba(0,0,0,.45); }
.state-tag.mature-tag { background: #f9a825; animation: pulseGlow 1s infinite; }
.state-tag.wilted-tag { background: #616161; }

.plot-actions { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(0,0,0,.45); z-index: 5; }
.plot-actions button { border-radius: 8px; padding: 5px 8px; font-size: 11.5px; font-weight: 600; box-shadow: 0 2px 5px rgba(0,0,0,.3); }
.btn-water, .btn-fert, .btn-dig, .btn-go, .btn-steal { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.btn-water { background: #29b6f6; color: #fff; }
.btn-fert { background: #ab47bc; color: #fff; }
.btn-dig { background: #8d6e63; color: #fff; }
.btn-harvest { background: linear-gradient(180deg,#ffd54f,#f9a825); color: #5d4000; font-size: 13px; padding: 8px 12px; }
.btn-steal { background: linear-gradient(180deg,#ff8a80,#e53935); color: #fff; font-size: 13px; padding: 8px 12px; }
.btn-go { background: linear-gradient(180deg,#66bb6a,#2e7d32); color:#fff; }

/* 农场底部操作条 */
.farm-tools { max-width: 520px; margin: 10px auto 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tool-btn {
  background: rgba(255,255,255,.9); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600;
  color: var(--txt); box-shadow: var(--shadow); display: inline-flex; align-items: center; gap: 5px;
}
.tool-btn.on { background: linear-gradient(180deg,#ab47bc,#7b1fa2); color: #fff; }

/* ---------- 商店 ---------- */
.shop-scene { padding: 14px 12px 24px; background: linear-gradient(180deg, #fdf6e3, #eef7e6); min-height: 100%; }
.shop-sec-title { font-size: 16px; font-weight: 800; color: #2e5d1e; margin: 14px 4px 8px; display: flex; align-items: center; gap: 6px; }
.shop-sec-title small { font-size: 11px; color: #9a8a6b; font-weight: 400; }
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 560px; margin: 0 auto; }
@media (min-width: 500px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.shop-card {
  background: var(--card); border-radius: 14px; padding: 10px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 5px; border: 1.5px solid transparent; position: relative;
}
.shop-card .crop-img { font-size: 38px; text-align: center; }
.shop-card h4 { font-size: 15px; display:flex; align-items:center; gap:5px; }
.lv-badge { font-size: 10px; background: #ffb300; color: #5d4000; padding: 1px 6px; border-radius: 6px; font-weight: 700; }
.kv { font-size: 11px; color: #7b6a50; display: flex; flex-wrap: wrap; gap: 2px 8px; }
.kv b { color: var(--txt); }
.profit-line { font-size: 11.5px; background: #eafbea; border-radius: 6px; padding: 3px 6px; color: #2e7d32; font-weight: 600; }
.no-wither { display: inline-block; font-size: 10px; background: #e3f2fd; color: #1565c0; border-radius: 6px; padding: 1px 6px; font-weight: 600; }
.buy-btn { margin-top: auto; background: linear-gradient(180deg, #ffca28, #f9a825); color: #5d4000; border-radius: 999px; padding: 7px 0; font-weight: 800; font-size: 13.5px; }
.buy-btn.need-lv { background: #e0e0e0; color: #757575; }
.buy-row { display: flex; align-items: center; gap: 6px; }
.qty-stepper { display: flex; align-items: center; gap: 2px; }
.qty-stepper button { width: 22px; height: 22px; border-radius: 6px; background: #e8f1dc; color: #2e7d32; font-weight: 800; }
.qty-stepper span { font-size: 13px; width: 20px; text-align: center; font-weight: 700; }
.card-lock { position: absolute; inset: 0; background: rgba(0,0,0,.45); color: #fff; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.inv-note { font-size: 10.5px; color: #4e8e4a; background:#e8f7e6; padding:1px 6px; border-radius:6px; align-self: flex-start; }

/* ---------- 好友 ---------- */
.friends-scene { padding: 14px 12px 24px; background: linear-gradient(180deg, #e8f4fb, #eef7e6); min-height: 100%; }
.friend-add { display: flex; gap: 8px; max-width: 520px; margin: 0 auto 12px; }
.friend-add input {
  flex: 1; padding: 11px 12px; border-radius: 12px; border: 1.5px solid #bcd3e3; font-size: 15px; background: #fff;
}
.friend-add button { background: var(--green); color:#fff; border-radius: 12px; padding: 0 18px; font-weight: 700; }
.friend-sec { max-width: 520px; margin: 0 auto 14px; }
.friend-sec h3 { font-size: 14px; color: #31557a; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.friend-sec h3 .cnt { background: #ffb300; color:#fff; font-size: 11px; border-radius: 999px; padding: 0 7px; }
.friend-list { display: flex; flex-direction: column; gap: 8px; }
.friend-item {
  display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 14px; padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.friend-item .avatar { width: 38px; height: 38px; font-size: 20px; }
.friend-item .nm { font-weight: 700; font-size: 14.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-item .sub { font-size: 10.5px; color: #9a8a6b; }
.friend-item .acts { display: flex; gap: 6px; }
.friend-item .acts button { border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 600; }
.empty-tip { text-align: center; color: #9a8a6b; font-size: 13px; padding: 18px 0; }

/* ---------- 消息 ---------- */
.msg-scene { padding: 14px 12px 24px; background: linear-gradient(180deg, #f3e8f7, #eef7e6); min-height: 100%; }
.msg-list { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.msg-item {
  display: flex; gap: 10px; align-items: flex-start; background: var(--card); border-radius: 12px;
  padding: 10px 12px; box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.msg-item .mi { font-size: 22px; }
.msg-item .mt { font-size: 13px; line-height: 1.5; flex: 1; }
.msg-item .mt small { display: block; color: #b0a080; font-size: 10.5px; margin-top: 2px; }

/* ---------- 底部导航 ---------- */
.bottom-nav {
  display: flex; background: rgba(255,255,255,.97); border-top: 1px solid #e5dcc6;
  padding-bottom: env(safe-area-inset-bottom); z-index: 10; box-shadow: 0 -2px 10px rgba(0,0,0,.06);
}
.bottom-nav button {
  flex: 1; background: none; color: #8b7d63; padding: 7px 0 8px; font-size: 10.5px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 600;
}
.bottom-nav button .ic { font-size: 21px; line-height: 1; }
.bottom-nav button.active { color: var(--green-d); }
.bottom-nav button.active .ic { transform: translateY(-1px) scale(1.12); }

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.modal {
  background: #fffdf7; border-radius: 18px; width: min(94vw, 420px); max-height: 82vh;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.35);
  animation: popIn .18s ease-out;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 16px;
  border-bottom: 1px solid #efe6d2; font-size: 16px; font-weight: 800; color: #2e5d1e;
}
.modal-close { background: #eee; width: 26px; height: 26px; border-radius: 50%; color: #777; font-size: 14px; }
.modal-body { padding: 12px 16px; overflow-y: auto; }

/* ---------- 天气: 雨/雪特效 + 胶囊 ---------- */
.wx-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.wx-deco.rain { background: linear-gradient(180deg, rgba(70,110,160,.16), rgba(40,70,120,.28)); }
.wx-deco .raindrop {
  position: absolute; top: -14%; width: 1.5px; height: 34px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(200,226,255,0), rgba(206,230,255,.85));
  transform: rotate(14deg);
  animation: wxRainFall .55s linear infinite;
}
@keyframes wxRainFall {
  0% { transform: translateY(0) rotate(14deg); opacity: 0; }
  12% { opacity: .95; }
  100% { transform: translateY(660px) rotate(14deg); opacity: .25; }
}
.wx-deco.snow { background: linear-gradient(180deg, rgba(220,238,255,.14), rgba(190,215,245,.22)); }
.wx-deco .snowflake {
  position: absolute; top: -8%; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.85);
  animation: wxSnowFall 8s linear infinite;
}
.wx-deco .snowflake:nth-child(3n) { width: 4px; height: 4px; opacity: .85; }
.wx-deco .snowflake:nth-child(4n) { width: 8px; height: 8px; opacity: .7; }
@keyframes wxSnowFall {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .95; }
  50% { transform: translate(14px, 300px); }
  100% { transform: translate(-10px, 640px); opacity: .25; }
}
.wx-chip { background: #eef6ff !important; color: #2b5f8a !important; }
.wx-chip.wx-bad { background: #fff2e6 !important; color: #b3550f !important; }
.wx-chip.wx-snow { background: #eaf4ff !important; color: #26618f !important; }
.state-tag.wx-tag { background: #eef6ff; color: #2b5f8a; }
.wx-fx-tag { color: #2b6fa8; font-weight: 700; }
.wx-fx-note { display: none; }

/* 无障碍: 关闭雨雪动画 */
@media (prefers-reduced-motion: reduce) {
  .wx-deco .raindrop, .wx-deco .snowflake { animation: none !important; opacity: .5; }
}

/* ---------- 养殖场 ---------- */
.ranch-scene { padding: 10px 10px 16px; }
.ranch-head {
  background: linear-gradient(180deg, #fff8e8, #fffdf7); border: 1px solid #efe6d2;
  border-radius: 14px; padding: 10px 12px; font-weight: 800; color: #6b4a1e; font-size: 14px;
  margin-bottom: 8px;
}
.ranch-head small { font-weight: 500; color: #a08a63; font-size: 11.5px; }
.ranch-sum { display: flex; gap: 8px; margin-bottom: 8px; }
.ranch-sum .rs {
  flex: 1; text-align: center; background: #fff; border: 1px solid #eee3ce; border-radius: 12px;
  padding: 7px 4px; font-size: 12px; color: #8a7a5e;
}
.ranch-sum .rs b { color: #2e5d1e; font-size: 15px; }
.pen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px) { .pen-grid { grid-template-columns: repeat(4, 1fr); } }
.pen-card {
  background: #fffdf7; border: 1.5px solid #e9dfc8; border-radius: 14px; padding: 10px 10px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
}
.pen-card.ready { border-color: #7dc98a; background: #f6fdf6; box-shadow: 0 0 0 2px rgba(125,201,138,.15); }
.pen-card.empty { border-style: dashed; color: #a89a80; }
.pen-img { font-size: 40px; line-height: 1.1; filter: drop-shadow(0 3px 6px rgba(0,0,0,.12)); }
.pen-card.empty .pen-img { font-size: 30px; opacity: .6; }
.animal-img { font-size: 42px; }
.pen-name { font-size: 13.5px; font-weight: 800; color: #3d5c22; display: flex; align-items: center; gap: 5px; }
.pen-kind { font-size: 10px; font-weight: 600; color: #9c8b6b; background: #f4ecdc; border-radius: 999px; padding: 1px 6px; }
.pen-prod { font-size: 11.5px; color: #7d6f57; }
.pen-tip { font-size: 11px; color: #a89a80; }
.pen-bar { width: 100%; height: 6px; border-radius: 999px; background: #efe6d2; overflow: hidden; }
.pen-bar i { display: block; height: 100%; background: linear-gradient(90deg, #a5d6a7, #66bb6a); transition: width .4s linear; }
.pen-status { font-size: 11.5px; font-weight: 700; color: #9c8b6b; }
.pen-status.on { color: #2e9e4f; }
.pen-acts { display: flex; gap: 5px; width: 100%; margin-top: 2px; }
.btn-take, .btn-sell2, .btn-sellprod, .pen-card .btn-go {
  flex: 1; border-radius: 9px; font-size: 11.5px; font-weight: 700; padding: 6px 4px;
}
.btn-take { background: linear-gradient(180deg, #66bb6a, #2e7d32); color: #fff; }
.btn-take[disabled] { background: #e6e0d2; color: #a89a80; }
.btn-sell2 { background: #f6eee0; color: #8a6a2a; }
.pen-card .btn-go { background: #eaf4ff; color: #2b6fa8; margin-top: 2px; }
.prod-list { display: flex; flex-direction: column; gap: 6px; }
.prod-row {
  display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #eee3ce;
  border-radius: 12px; padding: 8px 10px;
}
.prod-row .pi { font-size: 22px; }
.prod-row .pn { flex: 1; font-size: 13.5px; font-weight: 700; color: #3d5c22; }
.prod-row .pn small { display: block; font-weight: 500; color: #a08a63; font-size: 11px; }
.prod-row .pq { font-size: 13px; color: #7d6f57; }
.btn-sellprod { flex: none; background: linear-gradient(180deg, #ffd76e, #e0a93c); color: #5a3a00; padding: 6px 12px; }
.ranch-tip { font-size: 11.5px; color: #9c8b6b; line-height: 1.6; margin-top: 10px; }
/* 农场页的动物展示条 */
.farm-animals {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  background: rgba(255,253,247,.92); border: 1px solid #eee3ce; border-radius: 12px;
  padding: 6px 10px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.farm-animals .fa-title { font-size: 12px; font-weight: 800; color: #6b4a1e; }
.farm-animals .fa-item { position: relative; font-size: 22px; }
.farm-animals .fa-item b {
  position: absolute; right: -6px; top: -6px; background: #e53935; color: #fff;
  font-size: 10px; line-height: 1; padding: 2px 4px; border-radius: 999px;
}
.farm-animals .fa-item.ready { animation: faBob 1.4s ease-in-out infinite; }
@keyframes faBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.farm-animals .fa-badge { margin-left: auto; font-size: 11.5px; font-weight: 800; color: #2e9e4f; }
.farm-animals .fa-go { margin-left: auto; font-size: 11.5px; color: #a08a63; }

/* ---------- 强制改名弹窗 ---------- */
.rename-field { padding: 0 16px 6px; }
.rename-field input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 15px;
  border: 1.5px solid #d8cbb0; border-radius: 10px; background: #fffdf7; color: #4a3a1e;
}
.rename-field input:focus { outline: none; border-color: #7dc98a; box-shadow: 0 0 0 3px rgba(125,201,138,.18); }
.modal .msg { padding: 0 16px 6px; }

/* ---------- 「其他」子菜单 ---------- */
.more-scene { padding: 10px 10px 16px; }
.more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .more-grid { grid-template-columns: repeat(4, 1fr); } }
.more-card {
  display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #eee3ce;
  border-radius: 14px; padding: 12px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.more-card:active { transform: scale(.98); }
.more-card .mc-ic { font-size: 26px; }
.more-card .mc-t { flex: 1; font-size: 14px; font-weight: 800; color: #3d5c22; display: flex; align-items: center; gap: 6px; }
.more-card .mc-t small { display: block; font-weight: 500; font-size: 11px; color: #a08a63; margin-top: 3px; }
.more-card .mc-go { color: #c9bda3; font-size: 18px; }
.more-back { margin-bottom: 8px; }
.more-back button {
  background: #fffdf7; border: 1px solid #eee3ce; border-radius: 10px; padding: 6px 12px;
  font-size: 12.5px; font-weight: 700; color: #6b4a1e;
}
/* 原初兑换 */
.origin-card {
  background: linear-gradient(135deg, #f3f7ff, #eef4ff); border: 1px solid #d7e3fb;
  border-radius: 14px; padding: 14px; margin-bottom: 10px;
}
.origin-balance { display: flex; gap: 10px; margin-bottom: 8px; }
.origin-balance .ob {
  flex: 1; background: #fff; border: 1px solid #dbe6f8; border-radius: 10px; padding: 8px 10px;
  font-size: 12.5px; color: #4a5b7a; text-align: center;
}
.origin-balance .ob b { font-size: 16px; color: #1b4fa8; }
.origin-line { font-size: 12.5px; color: #5a6b88; margin-bottom: 10px; }
.origin-line b { color: #1b4fa8; }
.origin-btn {
  width: 100%; padding: 10px; border-radius: 11px; font-size: 13.5px; font-weight: 800;
  background: linear-gradient(180deg, #6ea8fe, #2f6fd0); color: #fff;
}
.origin-btn[disabled] { background: #dfe5ee; color: #98a2b3; }
.origin-tip { font-size: 11px; color: #8595b3; margin-top: 8px; }

/* ---------- 背包 ---------- */
.bag-scene { padding: 10px 10px 16px; }
.bag-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.bag-row {
  display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #eee3ce;
  border-radius: 12px; padding: 9px 11px;
}
.bag-row .bi { font-size: 26px; line-height: 1; }
.bag-row .bn { flex: 1; font-size: 13.5px; font-weight: 700; color: #3d5c22; min-width: 0; }
.bag-row .bn small { display: block; font-weight: 500; color: #a08a63; font-size: 11px; margin-top: 2px; }
.bag-row .bq { font-size: 13px; color: #7d6f57; }
.bag-use {
  flex: none; border-radius: 9px; font-size: 12px; font-weight: 700; padding: 7px 12px;
  background: linear-gradient(180deg, #ffd76e, #e0a93c); color: #5a3a00;
}
.bag-hint { font-size: 11.5px; color: #a08a63; text-align: right; max-width: 42%; }
.ritual-card { border-color: #cfe3f7; background: linear-gradient(180deg, #f7fbff, #fff); }
.bottom-nav button { font-size: 10.5px; padding: 6px 2px; }
.bottom-nav button .ic { font-size: 18px; }

/* ============================================================
 * 抽卡(星缘祈愿) / 角色 / 技能特效
 * ============================================================ */
.gacha-scene { padding: 10px 10px 16px; }
.gacha-banner {
  position: relative; border-radius: 16px; overflow: hidden; margin-bottom: 10px;
  min-height: 260px; background: linear-gradient(160deg, #2b1c46, #4b2a63 60%, #7b3f6d);
  box-shadow: 0 8px 26px rgba(60, 30, 80, .28);
}
.gacha-banner .gb-img {
  position: absolute; right: 0; top: -2%; height: 104%; width: auto;
  object-fit: contain; object-position: right top;
}
.gacha-banner .gb-mask {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(30,16,48,.92) 8%, rgba(30,16,48,.55) 46%, rgba(30,16,48,0) 78%);
}
.gacha-banner .gb-info { position: relative; padding: 18px 16px; max-width: 68%; }
.gacha-banner .gb-tag {
  display: inline-block; font-size: 11px; color: #ffe9a8; background: rgba(255,215,110,.16);
  border: 1px solid rgba(255,215,110,.45); border-radius: 999px; padding: 3px 10px; margin-bottom: 8px;
}
.gacha-banner .gb-name { font-size: 30px; font-weight: 900; color: #fff; letter-spacing: 2px; text-shadow: 0 3px 14px rgba(255,180,90,.5); }
.gacha-banner .gb-title { font-size: 12.5px; color: #f0d9ff; margin-top: 4px; }
.gacha-banner .gb-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.gacha-banner .gb-skills span { font-size: 11.5px; color: #fff; background: rgba(255,255,255,.14); border-radius: 999px; padding: 3px 9px; }
.gacha-panel { background: #fff; border: 1px solid #efe6d2; border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.gp-top { display: flex; justify-content: space-between; font-size: 12.5px; color: #7d6f57; margin-bottom: 8px; }
.gp-top b { color: #1b4fa8; }
.pity-bar { height: 7px; border-radius: 999px; background: #f0ead9; overflow: hidden; margin-bottom: 12px; }
.pity-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd76e, #ff9d3c); transition: width .4s; }
.gp-acts { display: flex; gap: 10px; }
.pull-btn {
  flex: 1; border-radius: 13px; padding: 12px 8px; font-size: 15px; font-weight: 900; color: #4a2c00;
  background: linear-gradient(180deg, #ffe9a8, #ffc44d); box-shadow: 0 4px 12px rgba(255,180,60,.35);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.pull-btn.ten { color: #3b1a5c; background: linear-gradient(180deg, #e6c9ff, #b98bf0); box-shadow: 0 4px 12px rgba(150,90,220,.35); }
.pull-btn small { font-size: 11.5px; font-weight: 700; opacity: .8; }
.pull-btn[disabled] { background: #e7e0d2; color: #a89a80; box-shadow: none; }
.gp-note { font-size: 11px; color: #a08a63; margin-top: 10px; line-height: 1.6; }
.char-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 560px) { .char-grid { grid-template-columns: repeat(5, 1fr); } }
.char-mini { position: relative; border-radius: 12px; overflow: hidden; background: #f7f3ea; border: 1.5px solid #e7dcc4; text-align: center; cursor: pointer; }
.char-mini.r5 { border-color: #f0b429; box-shadow: 0 0 0 2px rgba(240,180,41,.25); }
.char-mini img { width: 100%; height: 96px; object-fit: cover; object-position: top center; display: block; }
.char-mini .cm-name { font-size: 12px; font-weight: 800; color: #3d5c22; padding: 4px 2px 6px; }
.char-mini .cm-name small { color: #b8860b; }
.char-mini .cm-on { position: absolute; top: 4px; right: 4px; font-size: 10px; color: #fff; background: #2e9e4f; border-radius: 999px; padding: 2px 7px; }
.pool-box { background: #fff; border: 1px solid #efe6d2; border-radius: 14px; padding: 10px 12px; }
.pool-toggle { background: none; font-size: 13px; font-weight: 800; color: #6b4a1e; padding: 2px 0; }
.pool-rate { font-size: 12.5px; color: #7d6f57; margin: 8px 0; }
.pool-rate b { color: #1b4fa8; }
.pool-group { margin-top: 8px; }
.pg-title { font-size: 12px; font-weight: 800; color: #8a7a5e; margin-bottom: 4px; }
.pg-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #5b5142; padding: 2px 0; }
.pg-item img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; object-position: top; }
.pg-ic { font-size: 16px; }
/* 角色详情卡(技能面板) */
.char-card { display: flex; gap: 10px; border: 1.5px solid #e7dcc4; border-radius: 14px; padding: 10px; margin-bottom: 10px; background: #fffdf7; }
.char-card.r5 { border-color: #f0b429; box-shadow: 0 0 0 2px rgba(240,180,41,.18); }
.char-card .cc-img { width: 96px; height: 128px; object-fit: cover; object-position: top center; border-radius: 10px; flex: none; background: #f2ece0; }
.char-card .cc-body { flex: 1; min-width: 0; }
.cc-head { display: flex; align-items: center; gap: 6px; }
.cc-head b { font-size: 16px; color: #6b3a1e; }
.cc-stars { color: #f0b429; font-size: 12px; }
.cc-cons { font-size: 10.5px; color: #7d5bb8; border: 1px solid #d9c8f2; border-radius: 999px; padding: 1px 6px; }
.cc-title { font-size: 11.5px; color: #a08a63; margin: 2px 0 6px; }
.sk-row { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 5px; }
.sk-row .sk-ic { font-size: 15px; }
.sk-row .sk-t { font-size: 11.5px; color: #5b5142; line-height: 1.5; }
.sk-row .sk-t b { color: #2e5d1e; }
.sk-row .sk-t small { display: block; color: #8a7a5e; }
.cc-btn {
  margin-top: 6px; border-radius: 10px; padding: 8px 18px; font-size: 13px; font-weight: 800;
  background: linear-gradient(180deg, #ffe9a8, #ffc44d); color: #4a2c00;
}
.cc-btn.off { background: #f1ece1; color: #8a7a5e; }
/* 农场上的上阵角色 */
.farm-leader { position: relative; margin-top: 4px; display: flex; align-items: flex-end; justify-content: flex-end; height: 150px; pointer-events: none; }
.farm-leader .fl-img { height: 150px; width: auto; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 6px 16px rgba(0,0,0,.28)); animation: leaderIdle 3.4s ease-in-out infinite; }
@keyframes leaderIdle { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
.farm-leader .fl-plate {
  pointer-events: auto; cursor: pointer; margin-left: 8px; margin-bottom: 14px; text-align: right;
  background: rgba(255,253,247,.94); border: 1px solid #eee3ce; border-radius: 12px; padding: 6px 10px; box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
.fl-name { font-size: 13.5px; font-weight: 900; color: #6b3a1e; }
.fl-el { font-size: 10.5px; color: #2e9e4f; border: 1px solid #b7e0bf; border-radius: 999px; padding: 1px 6px; margin-left: 5px; }
.fl-skills { display: block; font-size: 12px; margin-top: 3px; letter-spacing: 1px; }
.fl-mine { font-size: 10px; color: #7d5bb8; border: 1px solid #d9c8f2; border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.farm-leader.visit .fl-img { height: 128px; opacity: .96; }
.farm-leader.visit .fl-plate { margin-bottom: 8px; }
.visit-leader-tip {
  font-size: 12px; color: #6b4a1e; background: rgba(255,253,247,.94); border: 1px solid #eee3ce;
  border-radius: 10px; padding: 6px 10px; margin-bottom: 8px;
}
.visit-leader-tip b { color: #6b3a1e; }
.visit-note { font-size: 11px; color: #8a7a5e; margin-top: 6px; }
/* 技能特效层 */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9998; }
.fx-box { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); text-align: center; }
.fx-ring { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid rgba(120,200,255,.9); animation: fxRing .9s ease-out forwards; }
@keyframes fxRing { to { width: 320px; height: 320px; margin: -160px 0 0 -160px; opacity: 0; border-width: 1px; } }
.fx-burst { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(140,200,255,.6) 40%, transparent 70%); animation: fxBurst .8s ease-out forwards; }
.fx-burst.gold { background: radial-gradient(circle, #fff, rgba(255,190,60,.75) 40%, transparent 70%); }
.fx-burst.blue { background: radial-gradient(circle, #fff, rgba(110,170,255,.75) 40%, transparent 70%); }
@keyframes fxBurst { to { width: 360px; height: 360px; margin: -180px 0 0 -180px; opacity: 0; } }
.fx-text { position: relative; font-size: 20px; font-weight: 900; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 18px rgba(255,220,120,.7); animation: fxText 1.2s ease-out forwards; }
.fx-text.big { font-size: 34px; color: #ffe9a8; text-shadow: 0 3px 16px rgba(120,40,0,.6), 0 0 26px rgba(255,180,60,.9); }
.fx-sub { position: relative; font-size: 12.5px; color: #fff8e6; margin-top: 4px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
@keyframes fxText { 0% { transform: scale(.6); opacity: 0 } 25% { transform: scale(1.12); opacity: 1 } 70% { opacity: 1 } 100% { transform: scale(1); opacity: 0 } }
.fx-drops i { position: absolute; left: calc(var(--i) * 14px - 60px); top: -10px; width: 6px; height: 10px; background: linear-gradient(180deg, #bfe6ff, #4fa8ff); border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; animation: fxDrop 1.1s ease-in forwards; animation-delay: calc(var(--i) * 60ms); }
@keyframes fxDrop { 0% { transform: translateY(-30px) scale(.6); opacity: 0 } 30% { opacity: 1 } 100% { transform: translateY(150px) scale(1); opacity: 0 } }
.fx-spark i { position: absolute; left: 0; top: 0; width: 5px; height: 5px; border-radius: 50%; background: #ffd76e; animation: fxSpark 1.1s ease-out forwards; animation-delay: .1s; }
@keyframes fxSpark { 0% { opacity: 0; transform: rotate(calc(var(--i) * 25.7deg)) translateY(0) scale(.6) } 20% { opacity: 1 } 100% { opacity: 0; transform: rotate(calc(var(--i) * 25.7deg)) translateY(-120px) scale(1.1) } }
/* ---------- 抽卡动画(全屏) ---------- */
.gacha-anim { position: fixed; inset: 0; z-index: 9999; background: radial-gradient(circle at 50% 45%, #2a1b46, #120a20 70%); display: flex; align-items: center; justify-content: center; flex-direction: column; overflow: hidden; }
.ga-stars { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 20%, #ffe9a8, transparent), radial-gradient(1.5px 1.5px at 40% 70%, #cfe6ff, transparent), radial-gradient(2px 2px at 85% 65%, #fff, transparent), radial-gradient(1.5px 1.5px at 15% 80%, #ffd6f2, transparent); opacity: .8; animation: gaStars 6s linear infinite; }
@keyframes gaStars { 0% { transform: translateY(0) } 100% { transform: translateY(-18px) } }
.ga-portal { position: absolute; display: flex; align-items: center; justify-content: center; }
.ga-ring { width: 90px; height: 90px; border-radius: 50%; border: 3px solid rgba(180,220,255,.7); animation: gaRing 1.1s ease-out infinite; }
@keyframes gaRing { 0% { transform: scale(.4); opacity: 1 } 100% { transform: scale(3.2); opacity: 0 } }
.ga-core { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, #fff, #7db8ff 60%, transparent); animation: gaCore 1s ease-in-out infinite alternate; }
@keyframes gaCore { from { transform: scale(.8) } to { transform: scale(1.5) } }
.rarity-5 .ga-core { background: radial-gradient(circle, #fff, #ffc44d 60%, transparent); }
.rarity-4 .ga-core { background: radial-gradient(circle, #fff, #c79bff 60%, transparent); }
.ga-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 16px; max-width: 720px; width: 100%; }
.gacha-card { perspective: 900px; }
.gacha-card .gc-inner { position: relative; width: 100%; padding-top: 138%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.8,.3,1.2); }
.gacha-anim.revealed .gacha-card .gc-inner { transform: rotateY(180deg); transition-delay: var(--d); }
.gacha-card.instant .gc-inner { transition-delay: 0ms !important; }
.gc-face { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gc-front { background: linear-gradient(160deg, #3a2a5c, #241a3c); border: 1px solid rgba(255,255,255,.14); }
.gc-front .gc-q { font-size: 26px; color: rgba(255,255,255,.5); font-weight: 900; }
.gc-back { transform: rotateY(180deg); background: linear-gradient(180deg, #6f7fa8, #4a5878); border: 1px solid rgba(255,255,255,.25); }
.gacha-card.r4 .gc-back { background: linear-gradient(180deg, #a97fe0, #6b46a8); box-shadow: 0 0 16px rgba(170,120,240,.55); }
.gacha-card.r5 .gc-back { background: linear-gradient(180deg, #ffd97a, #e0962c); box-shadow: 0 0 26px rgba(255,200,90,.8); }
.gc-back .gc-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.gc-back .gc-ic { font-size: 30px; }
.gc-stars { position: relative; margin-top: auto; font-size: 11px; color: #fff8d9; text-shadow: 0 1px 4px rgba(0,0,0,.5); padding: 2px 0; }
.gc-name { position: relative; font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,.6); padding: 0 4px 4px; text-align: center; }
.gc-sub { position: relative; font-size: 10.5px; color: rgba(255,255,255,.85); padding-bottom: 5px; }
.gc-badge { position: absolute; top: 5px; left: 5px; z-index: 3; font-size: 10px; font-weight: 900; background: #e53935; color: #fff; border-radius: 6px; padding: 1px 5px; }
.ga-skip { position: absolute; right: 16px; top: 16px; font-size: 12.5px; color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 5px 14px; }
.ga-actions { position: absolute; bottom: 26px; gap: 12px; }
.ga-actions button { border-radius: 999px; padding: 10px 26px; font-size: 14px; font-weight: 800; }
.ga-again { background: linear-gradient(180deg, #ffe9a8, #ffc44d); color: #4a2c00; }
.ga-close { background: #fff; color: #3d2b52; }
.ga-5burst { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: b5In .5s ease-out; }
.ga-5burst.out { animation: b5Out .8s ease-in forwards; }
@keyframes b5In { from { opacity: 0 } to { opacity: 1 } }
@keyframes b5Out { to { opacity: 0; transform: scale(1.06) } }
.b5-ring { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 4px solid rgba(255,214,120,.9); animation: fxRing 1.1s ease-out forwards; }
.b5-rays { position: absolute; width: 460px; height: 460px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255,214,120,.55), transparent 22%, rgba(255,214,120,.5) 44%, transparent 62%, rgba(255,214,120,.45) 82%, transparent); animation: b5Rays 6s linear infinite; filter: blur(1px); }
@keyframes b5Rays { to { transform: rotate(360deg) } }
.b5-char { height: 62vh; max-height: 460px; position: relative; filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); animation: b5Char 1s cubic-bezier(.2,.9,.3,1.3); }
@keyframes b5Char { 0% { transform: translateY(40px) scale(.9); opacity: 0 } 100% { transform: translateY(0) scale(1); opacity: 1 } }
.b5-name { position: relative; font-size: 26px; font-weight: 900; color: #fff; text-shadow: 0 3px 14px rgba(255,160,40,.9); margin-top: 10px; }
.b5-name span { color: #ffd76e; font-size: 18px; }
.b5-tag { position: relative; font-size: 12.5px; color: #ffe9a8; margin-top: 6px; letter-spacing: 1px; }
.state-tag.auto-tag { background: #e3f4ff; color: #1b6fa8; }
.tool-btn.wish-btn { position: relative; background: linear-gradient(180deg, #ffe9a8, #ffc44d); color: #4a2c00; font-weight: 800; }
.tool-btn.wish-btn .wish-dot { position: absolute; top: -5px; right: -5px; background: #e53935; color: #fff; font-size: 10px; border-radius: 999px; padding: 1px 5px; }
@media (prefers-reduced-motion: reduce) {
  .farm-leader .fl-img, .ga-stars, .b5-rays, .ga-ring, .ga-core, .fx-ring, .fx-burst { animation: none !important; }
}

/* ---------- 在线状态 ---------- */
.on-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: #a4988a; line-height: 1.4;
}
.on-tag.on { color: #2c9b52; }
.on-tag .on-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #c6bdb0; flex: none;
  display: inline-block;
}
.on-tag.on .on-dot {
  background: #2fc463;
  box-shadow: 0 0 0 3px rgba(47,196,99,.20);
  animation: onPulse 2s ease-in-out infinite;
}
@keyframes onPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.chip.on-chip { background: #e7f7ec; color: #227a41; }
.chip.off-chip { background: rgba(255,255,255,.82); color: #7d7365; }

/* ---------- 公告弹窗 ---------- */
.notice-box { text-align: left; }
.notice-title { font-size: 16.5px; font-weight: 800; color: #2e5d1e; margin-bottom: 9px; text-align: center; }
.notice-body {
  font-size: 14px; line-height: 1.85; color: #3a2e1f;
  background: #fdfaf0; border: 1px solid #efe6d2; border-radius: 12px;
  padding: 11px 13px; max-height: 46vh; overflow-y: auto; word-break: break-word;
}
.notice-time { font-size: 11px; color: #b0a080; margin-top: 9px; text-align: right; }

/* ---------- 加载动画(登录 / 进入农场) ---------- */
.loading-mask {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 28%, rgba(52, 104, 58, .94), rgba(12, 26, 16, .97));
}
.loading-mask.hidden { display: none; }
.loading-box { text-align: center; color: #eaffe6; }
.loading-tractor {
  font-size: 48px; line-height: 1;
  animation: loaderBob .9s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
}
.loading-text { margin-top: 12px; font-size: 14px; letter-spacing: 1px; opacity: .95; }
.loading-bar {
  width: 170px; height: 6px; margin: 12px auto 0; border-radius: 999px;
  background: rgba(255,255,255,.18); overflow: hidden;
}
.loading-bar i {
  display: block; width: 42%; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #a5d6a7, #ffd54f);
  animation: loaderSlide 1.1s ease-in-out infinite;
}
@keyframes loaderBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}
@keyframes loaderSlide {
  0% { margin-left: -42%; }
  100% { margin-left: 100%; }
}
.seed-list { display: flex; flex-direction: column; gap: 8px; }
.seed-item {
  display: flex; gap: 10px; align-items: center; border: 1.5px solid #e6dcc2; border-radius: 12px; padding: 8px 10px;
  background: #fff; cursor: pointer;
}
.seed-item:active { background: #f2faee; border-color: var(--green-l); }
.seed-item .si { font-size: 28px; }
.seed-item .sn { font-weight: 700; font-size: 14px; }
.seed-item .sd { font-size: 11px; color: #8a7a63; margin-top: 1px; }
.seed-item .go { margin-left: auto; color: var(--green-d); font-weight: 800; font-size: 13px; }
.confirm-box { text-align: center; padding: 6px 0; }
.confirm-box .big { font-size: 42px; margin-bottom: 6px; }
.confirm-box .desc { font-size: 14px; color: var(--txt); line-height: 1.7; }
.confirm-box .sub { font-size: 12px; color: #9a8a6b; margin-top: 4px; }
.confirm-acts { display: flex; gap: 10px; margin-top: 16px; }
.confirm-acts button { flex: 1; padding: 11px; border-radius: 12px; font-size: 15px; font-weight: 700; }
.confirm-acts .ok { background: linear-gradient(180deg, #66bb6a, var(--green-d)); color: #fff; }
.confirm-acts .ok.danger { background: linear-gradient(180deg, #ef5350, #c62828); }
.confirm-acts .no { background: #ece3d0; color: #6d5c41; }

/* ---------- Toast ---------- */
#toasts { position: fixed; top: 14px; left: 0; right: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast {
  background: rgba(30,30,30,.88); color: #fff; padding: 9px 16px; border-radius: 999px;
  font-size: 13px; max-width: 88vw; box-shadow: var(--shadow);
  animation: toastIn .2s ease-out;
}
.toast.good { background: rgba(46,125,50,.92); }
.toast.bad { background: rgba(198,40,40,.92); }
.toast.gold { background: rgba(255,160,0,.95); color: #4a3200; font-weight: 700; }

/* ---------- 动画 ---------- */
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes growPop { 0% { transform: scale(.4); opacity: .3; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ripe { 0%,100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.12) rotate(2deg); } }
@keyframes pulseGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
@keyframes popIn { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes toastIn { from { transform: translateY(-14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- 补充: 地块底部操作条 ---------- */
.pill-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 2px 2px 3px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.45));
  border-radius: 0 0 8px 8px;
}
.pill-bar button {
  border-radius: 999px; font-size: 10.5px; padding: 2px 9px;
  font-weight: 800; box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
  white-space: nowrap; line-height: 1.6;
}
.plot.has-pill .time-left { bottom: 19px; }
.plot.empty.plain::after { content: none; }
.coin { color: #ffca28; }

/* ============================================================
   补充: 排行榜 / 活动 / 信箱 / 6栏导航徽标
   ============================================================ */
.nav-badge {
  position: absolute; top: 1px; right: calc(50% - 28px);
  background: #e53935; color: #fff; font-size: 9px; font-weight: 700;
  min-width: 15px; height: 15px; line-height: 15px; border-radius: 999px; padding: 0 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.bottom-nav button { position: relative; }

.rank-scene { padding: 14px 12px 24px; background: linear-gradient(180deg, #fff8e1, #eef7e6); min-height: 100%; }
.rank-head {
  font-size: 17px; font-weight: 800; color: #8a5a00; max-width: 520px; margin: 0 auto 10px;
  display: flex; align-items: center; gap: 6px;
}
.rank-head small { font-size: 11px; color: #b09a5e; font-weight: 400; }
.rank-list { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.rank-item {
  display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.95);
  border-radius: 12px; padding: 7px 12px; box-shadow: 0 2px 6px rgba(0,0,0,.07);
}
.rank-item.me { outline: 2px solid #ffb300; background: #fff8dc; }
.rank-item .rk { width: 34px; font-size: 17px; font-weight: 800; color: #8a6d3b; text-align: center; }
.rank-item .avatar { width: 34px; height: 34px; font-size: 18px; }
.rank-item .nm { flex: 1; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-item .nm em { font-style: normal; color: #ff8f00; font-size: 11px; }
.rank-item .lv { font-size: 11px; color: #7b6a50; background: #f0ead9; border-radius: 8px; padding: 2px 7px; }
.rank-item .co { font-weight: 800; color: #8a6d1f; font-size: 13.5px; }
.rank-me { max-width: 520px; margin: 12px auto 0; text-align: center; color: #6d5c41; font-size: 13px; }
.rank-me b { color: #e65100; }

/* 活动 */
.activity-scene { padding: 14px 12px 24px; background: linear-gradient(180deg, #fbe9f0, #eef7e6); min-height: 100%; }
.act-card {
  background: rgba(255,255,255,.96); border-radius: 14px; padding: 12px 14px; margin: 0 auto 10px;
  max-width: 520px; box-shadow: 0 3px 10px rgba(0,0,0,.08); border: 1px solid #f3d9e5;
}
.act-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.act-head b { font-size: 15.5px; color: #b23a63; }
.tag-run { background: #e3f2fd; color: #1565c0; font-size: 11px; padding: 2px 9px; border-radius: 999px; font-weight: 700; }
.tag-todo { background: #fff3e0; color: #e65100; font-size: 11px; padding: 2px 9px; border-radius: 999px; font-weight: 700; }
.tag-done { background: #e8f5e9; color: #2e7d32; font-size: 11px; padding: 2px 9px; border-radius: 999px; font-weight: 700; }
.act-desc { font-size: 12.5px; color: #8a7a63; margin: 6px 0; }
.act-task { font-size: 13px; color: #4e342e; }
.act-task b { color: #e65100; }
.act-tasks { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.tk-line { position: relative; padding-bottom: 9px; }
.tk-line .tk-name { font-size: 13px; color: #4e342e; }
.tk-line.done .tk-name { color: #2e7d32; }
.tk-line .tk-num { float: right; font-size: 12.5px; font-weight: 700; color: #e65100; }
.tk-line.done .tk-num { color: #2e7d32; }
.tk-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: #f0ead9; border-radius: 4px; overflow: hidden; }
.tk-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffcc80, #f57c00); border-radius: 4px; transition: width .4s; }
.tk-line.done .tk-bar i { background: linear-gradient(90deg, #a5d6a7, #43a047); }
.act-bar { height: 8px; background: #f2ead9; border-radius: 5px; overflow: hidden; margin: 7px 0; }
.act-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f48fb1, #d81b60); border-radius: 5px; transition: width .4s; }
.act-reward { font-size: 12px; color: #2e7d32; background: #eafbea; border-radius: 8px; padding: 4px 8px; font-weight: 600; }
.act-time { font-size: 11px; color: #b0a080; margin-top: 6px; }
.claim-btn {
  background: linear-gradient(180deg, #ffd54f, #f9a825); color: #5d4000; font-weight: 800;
  border-radius: 999px; padding: 8px 20px; font-size: 14px; margin-top: 6px; box-shadow: 0 2px 6px rgba(249,168,37,.4);
}

/* 信箱 */
.mail-scene { padding: 10px 12px 24px; background: linear-gradient(180deg, #e8f4fb, #eef7e6); min-height: 100%; }
.mb-tabs {
  display: flex; gap: 6px; max-width: 520px; margin: 0 auto 10px;
  background: #fff; border-radius: 999px; padding: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.mb-tabs button { flex: 1; padding: 8px 0; border-radius: 999px; font-size: 13.5px; font-weight: 700; background: transparent; color: #57703a; }
.mb-tabs button.active { background: #1976d2; color: #fff; box-shadow: 0 2px 6px rgba(25,118,210,.4); }
.mail-list { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.mail-item {
  display: flex; gap: 9px; align-items: flex-start; background: #fff; border-radius: 12px;
  padding: 10px 12px; box-shadow: 0 2px 6px rgba(0,0,0,.06); cursor: pointer;
}
.mail-item:active { background: #f0f7ff; }
.mail-item .dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; margin-top: 6px; flex: none; }
.mail-item.unread .dot { background: #e53935; box-shadow: 0 0 0 3px rgba(229,57,53,.15); }
.mail-item.unread { background: #fffaf0; }
.mail-item .m-title { font-size: 14px; font-weight: 700; line-height: 1.4; }
.reward-pill { display: inline-block; font-size: 10.5px; background: #e8f5e9; color: #2e7d32; border-radius: 8px; padding: 1px 7px; margin-left: 2px; font-weight: 600; }
.mail-item .m-meta { font-size: 11px; color: #9a8a6b; margin-top: 3px; }
.mail-body p { font-size: 12px; color: #8a7a63; margin-bottom: 8px; }
.mail-body > div { font-size: 14px; line-height: 1.8; }
.reward-box {
  margin-top: 12px; background: #fff8e1; border: 1px dashed #f9a825; color: #8a6d1f;
  border-radius: 10px; padding: 8px 10px; font-size: 13px; font-weight: 700;
}
.mail-body em { color: #2e7d32; font-style: normal; }

/* ============================================================
   背景选择弹窗
   ============================================================ */
.bg-list { display: flex; flex-direction: column; gap: 8px; }
.bg-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1.5px solid #e6dcc2; border-radius: 12px; background: #fff; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.bg-item:hover { border-color: var(--green-l); background: #f7fdf5; }
.bg-item.cur { border-color: #2e7d32; background: #f1faee; box-shadow: 0 0 0 2px rgba(46,125,50,.12); }
.bg-item.locked { opacity: .72; filter: grayscale(.35); }
.bg-prev {
  width: 54px; height: 40px; flex: none; border-radius: 8px; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 55%, #a5d98a 55%, #8fca77 100%);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.12);
}
.bg-prev[data-bg-prev="bg_midautumn"] {
  background:
    radial-gradient(circle at 76% 20%, #fff6c9 0, rgba(255,246,201,.5) 7px, rgba(255,246,201,0) 13px),
    radial-gradient(circle at 22% 22%, rgba(232,64,47,.95) 0, rgba(232,64,47,0) 4px),
    radial-gradient(circle at 50% 88%, rgba(255,246,201,.45) 0, rgba(255,246,201,0) 34%),
    linear-gradient(180deg, #101538 0%, #2b3268 52%, #3f5a63 58%, #22343a 100%);
}
.bg-prev[data-bg-prev="bg_midautumn_live"] {
  background:
    radial-gradient(circle at 78% 16%, #fffdf0 0, rgba(255,248,214,.9) 9px, rgba(255,232,170,.35) 14px, rgba(255,232,170,0) 20px),
    radial-gradient(circle at 18% 22%, rgba(232,64,47,.95) 0, rgba(232,64,47,0) 3.6px),
    radial-gradient(circle at 38% 15%, rgba(232,64,47,.9) 0, rgba(232,64,47,0) 3px),
    radial-gradient(circle at 56% 22%, rgba(232,64,47,.85) 0, rgba(232,64,47,0) 3px),
    radial-gradient(circle at 46% 90%, rgba(255,240,180,.6) 0, rgba(255,240,180,0) 26%),
    linear-gradient(180deg, #0d0b2e 0%, #55245f 36%, #c9666a 55%, #f0a878 58%, #24343c 100%);
}
.bg-prev[data-bg-prev="bg_anniversary"] {  background:
    radial-gradient(circle at 22% 22%, rgba(255,236,182,.9) 0, rgba(255,236,182,0) 2.2px),
    radial-gradient(circle at 62% 15%, rgba(255,236,182,.75) 0, rgba(255,236,182,0) 2px),
    radial-gradient(circle at 50% 48%, rgba(255,190,104,.5) 0, rgba(255,190,104,0) 58%),
    linear-gradient(180deg, #470c1a 0%, #93232f 30%, #d4693a 50%, #f0c165 58%, #3f5228 58%, #3f5228 100%);
}
.bg-meta { flex: 1; min-width: 0; }
.bg-name { font-size: 14px; font-weight: 700; }
.bg-tag { font-size: 10px; background: #fff3e0; color: #e65100; border-radius: 6px; padding: 1px 6px; font-weight: 700; }
.bg-desc { font-size: 11.5px; color: #8a7a63; margin-top: 2px; }
.bg-state { font-size: 12px; font-weight: 700; color: #2e7d32; white-space: nowrap; }
.bg-item.locked .bg-state { color: #9a8a6b; }