:root {
  --bg: #FFF7EF;
  --card: #FFFFFF;
  --ink: #2C2A28;
  --ink-2: #6B645E;
  --ink-3: #A29890;
  --line: #F0E4D8;
  --brand: #FF8A3D;
  --brand-soft: #FFF0E4;
  --teal: #35A98A;
  --teal-soft: #E6F6F1;
  --amber: #F5B942;
  --amber-soft: #FFF6E0;
  --amber-dark: #8A6416;
  --red: #E5645C;
  --red-soft: #FDECEB;
  --blue: #4E8FD6;
  --blue-soft: #EAF2FC;
  --r: 16px;
  --shadow: 0 2px 10px rgba(120, 90, 60, .07);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

#app { max-width: 560px; margin: 0 auto; min-height: 100vh; padding-bottom: 84px; }

/* ---------- 通用 ---------- */
.card {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 16px;
  margin: 12px;
}
.card.tight { padding: 12px 14px; }

.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

.muted { color: var(--ink-2); font-size: 13px; }
.tiny { color: var(--ink-3); font-size: 12px; }
.center { text-align: center; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mb8 { margin-bottom: 8px; }

h1 { font-size: 20px; margin: 0; }
h2 { font-size: 16px; margin: 0 0 10px; }
h3 { font-size: 14px; margin: 0 0 8px; color: var(--ink-2); font-weight: 600; }

.divider { height: 1px; background: var(--line); margin: 12px 0; }

/* ---------- 顶部 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(135deg, #FF9A52, #FF7A33);
  color: #fff; padding: 14px 16px 16px;
  border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
}
.topbar .sub { opacity: .9; font-size: 12px; margin-top: 2px; }
.topbar .row.between { align-items: flex-start; }
.chip {
  background: rgba(255,255,255,.22); border-radius: 999px;
  padding: 4px 10px; font-size: 12px; cursor: pointer; border: none; color: #fff;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: 12px; padding: 11px 16px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  background: var(--brand); color: #fff; font-family: inherit;
}
.btn:active { transform: translateY(1px); }
.btn.block { display: flex; width: 100%; }
.btn.ghost { background: var(--brand-soft); color: var(--brand); }
.btn.gray { background: #F3EDE7; color: var(--ink-2); }
.btn.teal { background: var(--teal); color: #fff; }
.btn.red { background: var(--red-soft); color: var(--red); }
.btn.sm { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- 表单 ---------- */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.input {
  width: 100%; border: 1px solid var(--line); background: #fff;
  border-radius: 12px; padding: 11px 13px; font-size: 16px; color: var(--ink);
  font-family: inherit; outline: none;
}
.input:focus { border-color: var(--brand); }
.input.err { border-color: var(--red); }
.err-text { color: var(--red); font-size: 12px; margin-top: 4px; }
.code-row { display: flex; gap: 8px; }
.code-row .input { flex: 1; }
.code-row .btn { flex: 0 0 auto; white-space: nowrap; }

/* ---------- 标签 ---------- */
.badge {
  display: inline-block; border-radius: 999px; padding: 2px 9px;
  font-size: 11px; font-weight: 600; line-height: 1.7;
}
.badge.amber { background: var(--amber-soft); color: #B37F14; }
.badge.teal { background: var(--teal-soft); color: #21805F; }
.badge.red { background: var(--red-soft); color: var(--red); }
.badge.blue { background: var(--blue-soft); color: #2F6BAF; }
.badge.gray { background: #F3EDE7; color: var(--ink-2); }

/* ---------- 数值块 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat {
  background: #FFFBF7; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px; text-align: center;
}
.stat .v { font-size: 20px; font-weight: 700; line-height: 1.2; }
.stat .k { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* ---------- 进度条 ---------- */
.bar { height: 8px; background: #F3EDE7; border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .3s; }
.bar.teal > i { background: var(--teal); }
.bar.amber > i { background: var(--amber); }
.bar.blue > i { background: var(--blue); }

/* ---------- 列表项 ---------- */
.item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.item:last-child { border-bottom: none; }
.item .title { font-weight: 600; }
.item .desc { font-size: 12px; color: var(--ink-3); }

/* ---------- 打卡格 ---------- */
.task-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.task {
  border: 1px solid var(--line); border-radius: 14px; padding: 12px;
  background: #fff; cursor: pointer; position: relative; text-align: left;
}
.task.on { background: var(--teal-soft); border-color: var(--teal); }
.task.wait { background: var(--amber-soft); border-color: var(--amber); }
.task .n { font-weight: 600; }
.task .p { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.task .tick { position: absolute; top: 10px; right: 12px; font-size: 13px; }

/* ---------- 底部导航 ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; max-width: 560px; margin: 0 auto;
  background: #fff; border-top: 1px solid var(--line);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
}
.tabbar > div {
  flex: 1; text-align: center; font-size: 11px; color: var(--ink-3);
  cursor: pointer; padding: 4px 0;
}
.tabbar > div.on { color: var(--brand); font-weight: 700; }
.tabbar .ico { font-size: 19px; display: block; line-height: 1.3; position: relative; }
/* 底部「好友」未读红点数字 */
.tabdot {
  position: absolute; top: -4px; left: calc(50% + 5px);
  min-width: 15px; height: 15px; padding: 0 4px; box-sizing: border-box;
  border-radius: 999px; background: var(--red); color: #fff;
  font-size: 9.5px; font-weight: 800; font-style: normal; line-height: 15px;
  text-align: center; display: none; pointer-events: none;
}

/* ---------- 宠物 / 花园 ---------- */
.pet-hero {
  background: linear-gradient(160deg, #FFF3E2, #FFE7CE);
  border-radius: var(--r); padding: 18px; text-align: center;
}
.pet-face { font-size: 58px; line-height: 1; }
.plot {
  border: 1px dashed var(--line); border-radius: 14px; padding: 12px;
  text-align: center; background: #FFFDF9; min-height: 96px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.plot.growing { border-style: solid; background: #F6FCF9; }
.plot.ripe { border-style: solid; border-color: var(--amber); background: var(--amber-soft); }
.plot .emo { font-size: 30px; }

/* ---------- 提示 ---------- */
#toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  background: rgba(44,42,40,.92); color: #fff; padding: 10px 18px;
  border-radius: 999px; font-size: 14px; z-index: 99;
  opacity: 0; pointer-events: none; transition: opacity .2s; max-width: 80%;
  text-align: center;
}
#toast.show { opacity: 1; }

.modal-mask {
  position: fixed; inset: 0; background: rgba(30,25,20,.45); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: #fff; border-radius: 18px; padding: 18px; width: 100%; max-width: 340px;
}
.modal .input { margin-top: 10px; }
.modal .btns { display: flex; gap: 8px; margin-top: 14px; }
.modal .btns .btn { flex: 1; }

/* 宠物形象选择器 */
.look-modal { max-width: 380px; }
.look-modal h2 { margin: 0 0 4px; font-size: 17px; }
.look-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.look-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #FFF6E9; border: 2px solid transparent; border-radius: 14px;
  padding: 8px 4px 6px; cursor: pointer; transition: .15s ease;
}
.look-card span { font-size: 12.5px; color: var(--ink-1); font-weight: 600; }
.look-card .look-mini { width: 100%; height: 76px; display: block; }
.look-card:hover { background: #FFEEDA; }
.look-card.on { border-color: var(--amber); background: #FFF0D2; box-shadow: 0 2px 10px rgba(242,167,46,.25); }
.look-card.on span { color: var(--amber-dark); }

.empty { text-align: center; color: var(--ink-3); font-size: 13px; padding: 22px 0; }
.hint { background: var(--amber-soft); border-radius: 12px; padding: 10px 12px; font-size: 12px; color: #8A6416; }
.warn { background: var(--red-soft); border-radius: 12px; padding: 10px 12px; font-size: 12px; color: var(--red); }
.note { background: var(--blue-soft); border-radius: 12px; padding: 10px 12px; font-size: 12px; color: #2F6BAF; }

.invite-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px; font-weight: 700; letter-spacing: 2px;
  background: var(--brand-soft); color: var(--brand);
  border-radius: 12px; padding: 12px; text-align: center;
}

/* ---------- 农场场景 ---------- */
.farm-card { padding: 10px; }
.farm {
  display: block; width: 100%; height: auto;
  border-radius: 14px; background: #DCF4FF;
  overflow: hidden;
}
/* ---------- 花园：等距 2D 贴图场景（无 3D 变换） ---------- */
.g2d-stage {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  overflow: hidden; background: #7CC24B;
  touch-action: none; cursor: grab;
}
.g2d-stage:active { cursor: grabbing; }
.g2d-grass {
  position: absolute; inset: 0;
  background: url('../img/garden/grass.png') repeat left top;
  background-size: 192px 192px;
  background-color: #7CC24B;
}
.g2d-stage.is-rain .g2d-grass { filter: saturate(.62) brightness(.84); }
/* 雨：两层雨丝（远细密慢 / 近粗疏快）+ 整体压暗，贴近真实降雨观感 */
.g2d-rain {
  position: absolute; left: -30%; top: -30%; right: 0; bottom: 0;
  pointer-events: none;
}
.g2d-rain1 {
  background-image: repeating-linear-gradient(100deg, rgba(206, 228, 244, .10) 0 1px, transparent 1px 18px);
  animation: g2drain1 .9s linear infinite;
}
.g2d-rain2 {
  background-image: repeating-linear-gradient(104deg, rgba(228, 242, 252, .17) 0 1px, transparent 1px 42px);
  animation: g2drain2 .55s linear infinite;
}
.g2d-raindim { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(44, 66, 58, .07); pointer-events: none; }
@keyframes g2drain1 { to { background-position: -14px 96px } }
@keyframes g2drain2 { to { background-position: -34px 140px } }

.g2d-world { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.g2d-scene { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.g2d-plot, .g2d-decor, .g2d-fence { position: absolute; }
.g2d-plot img, .g2d-decor img, .g2d-fence img {
  width: 100%; height: 100%; display: block;
  -webkit-user-drag: none; user-select: none;
}
.g2d-decor img, .g2d-fence img { filter: drop-shadow(0 6px 6px rgba(30, 60, 20, .22)); }

/* 选中地块：金圈 + 轻微上浮 */
.g2d-plot.is-sel { filter: drop-shadow(0 0 0 #F5A623); }
.g2d-plot.is-sel img { animation: g2dpop 1.4s ease-in-out infinite; }
@keyframes g2dpop { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
.g2d-plot.is-sel::after {
  content: ""; position: absolute; left: 50%; bottom: 4%;
  width: 74%; height: 30%; margin-left: -37%;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #F5A623;
  opacity: .95;
}
/* 成熟：金色柔光 + 提示可收 */
.g2d-plot.is-ripe img { filter: drop-shadow(0 0 8px rgba(255, 214, 90, .85)); }
.g2d-plot.is-locked { opacity: .92; cursor: pointer; }
.g2d-lock {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  background: rgba(38, 30, 22, .72); color: #FFE7B0;
  font-size: 10px; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.g2d-plot.is-withered img { filter: saturate(.5) brightness(.9); }

/* ============ L2 光影 / 粒子 ============ */
/* 地块柔软落地阴影（等距块自带厚度，drop-shadow 强化落地感；随渲染顺序自然遮挡） */
.g2d-plot img { filter: drop-shadow(0 7px 7px rgba(45, 30, 10, .30)); }
/* 动物/设施点缀（L1 风格贴图）：外层定位锚点=底部中心落地点，内层 img 承接浮动动画与落地阴影 */
.g2d-anim {
  position: absolute; pointer-events: none; user-select: none;
  transform: translate(-50%, -100%);
}
.g2d-anim img {
  width: 100%; display: block;
  filter: drop-shadow(0 6px 5px rgba(45, 30, 10, .30));
  animation: g2dbob 3.4s ease-in-out infinite;
}
.g2d-anim.g2d-chick img { animation-duration: 2.6s; }
.g2d-anim.g2d-well img, .g2d-anim.g2d-sign img { animation: none; }  /* 设施不浮动，只留落地阴影 */
@keyframes g2dbob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
/* L2 触发式粒子爆发：在选中地块 world 坐标发散 */
.g2d-burst { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 6; }
.g2d-burst span {
  position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; opacity: 0; transform: rotate(var(--a)) translateY(0);
  animation: g2dburst .9s ease-out forwards;
}
.g2d-burst-water span { background: radial-gradient(circle, #CFE8FF, #6FB7E8); }
.g2d-burst-harvest span { background: radial-gradient(circle, #FFE9A8, #F2B23A); }
.g2d-burst-plant span { background: radial-gradient(circle, #CDEFC0, #5FB36A); }
.g2d-burst-revive span { background: radial-gradient(circle, #FFD6E6, #E878A8); }
.g2d-burst-spark span { background: radial-gradient(circle, #FFF1C2, #F2B23A); }
@keyframes g2dburst {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) translateY(-22px) scale(.4); }
}

/* ============ L3 动态天气 / 昼夜 ============ */
.g2d-fx { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; z-index: 4; }
.g2d-weather { z-index: 5; transition: background .6s; }
.g2d-weather.sunny { background: radial-gradient(120% 80% at 50% 0%, rgba(255, 243, 200, .10), transparent 60%); }
.g2d-weather.cloudy { background: linear-gradient(180deg, rgba(225, 232, 238, .34), rgba(190, 200, 210, .20)); }
.g2d-stage.is-cloudy .g2d-grass { filter: brightness(.96) saturate(.92); }
.g2d-weather.heat { background: linear-gradient(180deg, rgba(255, 168, 72, .22), rgba(255, 140, 40, .10)); }
.g2d-stage.is-heat .g2d-grass { filter: brightness(1.04) saturate(1.06); }
.g2d-phase { z-index: 6; transition: background .8s; }
.g2d-phase.day { background: transparent; }
.g2d-phase.dusk { background: linear-gradient(180deg, rgba(255, 150, 70, .20), rgba(120, 80, 140, .16)); }
.g2d-stage.is-dusk .g2d-grass { filter: brightness(.94) saturate(.96); }
.g2d-phase.night { background: linear-gradient(180deg, rgba(20, 32, 70, .46), rgba(10, 18, 46, .40)); }
.g2d-stage.is-night .g2d-grass { filter: brightness(.7) saturate(.86); }
.g2d-phase.night::before {
  content: ""; position: absolute; left: 14%; top: 12%; width: 2px; height: 2px; border-radius: 50%;
  background: #FFF; box-shadow:
    40px 30px #FFF, 90px 12px #FFF, 150px 50px #FFF, 220px 20px #FFF, 300px 60px #FFF, 360px 28px #FFF,
    60px 90px #FFF, 130px 110px #FFF, 200px 84px #FFF, 280px 120px #FFF, 340px 96px #FFF,
    20px 150px #FFF, 110px 160px #FFF, 250px 150px #FFF, 330px 170px #FFF, 70px 210px #FFF, 180px 200px #FFF, 300px 220px #FFF;
  opacity: .9; animation: g2dtwinkle 3.5s ease-in-out infinite;
}
.g2d-phase.night::after {
  content: ""; position: absolute; right: 12%; top: 10%; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #FFF7DA, #F2E29A 60%, rgba(242, 226, 154, .2));
  box-shadow: 0 0 26px 8px rgba(255, 247, 218, .35);
}
@keyframes g2dtwinkle { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
/* 常驻粒子层（随天气/时段显隐） */
.g2d-pollen, .g2d-firefly { position: absolute; inset: 0; pointer-events: none; z-index: 5; display: none; }
.g2d-stage.is-day .g2d-pollen, .g2d-stage.is-dusk .g2d-pollen { display: block; }
.g2d-stage.is-night .g2d-firefly { display: block; }
.g2d-pollen::before {
  content: ""; position: absolute; left: 20%; top: 40%; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255, 240, 190, .9); box-shadow:
    60px -30px rgba(255, 240, 190, .8), 140px 20px rgba(255, 236, 170, .7), 220px -50px rgba(255, 240, 190, .8),
    300px 10px rgba(255, 236, 170, .7), 90px 80px rgba(255, 240, 190, .7), 260px 90px rgba(255, 236, 170, .7),
    180px 130px rgba(255, 240, 190, .7), 40px 150px rgba(255, 236, 170, .7);
  animation: g2dpollen 6s linear infinite;
}
@keyframes g2dpollen { 0% { transform: translateY(0); opacity: .4 } 50% { opacity: .9 } 100% { transform: translateY(-40px); opacity: .3 } }
.g2d-firefly::before {
  content: ""; position: absolute; left: 24%; top: 50%; width: 5px; height: 5px; border-radius: 50%;
  background: #D9F58A; box-shadow:
    80px -40px #C9EF7A, 200px 10px #E2F89A, 300px -30px #C9EF7A, 140px 90px #D9F58A, 260px 120px #E2F89A,
    50px 140px #C9EF7A, 320px 150px #D9F58A;
  opacity: .85; animation: g2dfirefly 4.2s ease-in-out infinite;
}
@keyframes g2dfirefly { 0%, 100% { opacity: .25; transform: translate(0, 0) } 50% { opacity: 1; transform: translate(10px, -12px) } }

/* ============ 正面平视固定场景（gflat，对标开心农场参考图，仅 H5） ============ */
/* 舞台复用 .g2d-stage 基座（position/overflow/草地/L3 调色层全继承），此处只写差异 */
/* 自适应缩放：--gzw 映射视口宽（手机 ≤700px → 700 → 系数 1，宽屏线性放大到 1085 → 系数 1.55）。
   用法 calc(N / 700 * var(--gzw))：数字÷数字=数字，再乘长度 → 合法（CSS 不允许 长度/长度 出无单位系数） */
.gflat-stage {
  cursor: default; touch-action: manipulation;
  --gzw: clamp(700px, 100vw, 1085px);
}
.gflat-stage .g2d-grass { filter: saturate(1.08) brightness(1.02); }  /* 正面版草地更鲜绿 */

/* 栅栏横排：一段栅栏贴图横向平铺（自带透明底，草从间隙透出）；顶让木纹 HUD */
.gflat-fencerow {
  position: absolute; left: 0; right: 0; top: 14.5%;
  height: calc(46 / 700 * var(--gzw));
  background: url('../img/gardenflat/fence.png') repeat-x left bottom / auto 100%;
  pointer-events: none;
}

/* 后景装饰（舞台百分比定位 + 底部中心锚） */
.gflat-deco {
  position: absolute; transform: translate(-50%, -100%); pointer-events: none; user-select: none;
  filter: drop-shadow(0 5px 4px rgba(45, 30, 10, .28));
}
.gflat-crow { animation: gflat-sway 4.6s ease-in-out infinite; }
@keyframes gflat-sway { 0%, 100% { transform: translate(-50%, -100%) rotate(-2.2deg) } 50% { transform: translate(-50%, -100%) rotate(2.2deg) } }

/* 农田区容器：田边装饰（池塘/前景花丛/小女孩）锚在它上面，永远跟着田走
   宽度：手机 330px（原尺寸），宽屏按 --gz 放大并封顶 92% 防溢出 */
.gflat-mid {
  position: absolute; left: 50%; top: 25%; transform: translateX(-50%);
  width: min(calc(330 / 700 * var(--gzw)), 92%);
}
.gflat-mdeco { position: absolute; pointer-events: none; user-select: none; filter: drop-shadow(0 4px 4px rgba(45, 30, 10, .25)); }

/* 农田框：浅棕土路底 + 圆角 + 内阴影（参考图的成组土垄区） */
.gflat-field {
  position: relative; display: grid; grid-template-columns: repeat(5, 1fr);
  gap: calc(7 / 700 * var(--gzw));
  background: linear-gradient(180deg, #DCB98A, #C79E6B);
  border-radius: calc(18 / 700 * var(--gzw)); padding: calc(14 / 700 * var(--gzw)) calc(12 / 700 * var(--gzw));
  box-shadow: inset 0 3px 10px rgba(90, 58, 22, .30), 0 6px 14px rgba(60, 42, 10, .22);
}

/* 单格：热区互不重叠（正面网格无需菱形命中反算） */
.gflat-plot { position: relative; aspect-ratio: 1 / 0.86; cursor: pointer; }
/* 空地土垄：CSS 穹顶土堆，质感对齐贴图自带的土堆 */
.gflat-mound {
  position: absolute; left: 4%; right: 4%; bottom: 2%; height: 58%;
  border-radius: 46% 46% 42% 42% / 58% 58% 34% 34%;
  background: radial-gradient(ellipse at 50% 26%, #9A6B42 0%, #7C5233 52%, #5E3A1F 100%);
  box-shadow: inset 0 -5px 8px rgba(40, 22, 6, .38), inset 0 3px 3px rgba(255, 226, 178, .28);
}
.gflat-plot.is-wet .gflat-mound { filter: brightness(.78) saturate(1.1); }
/* 未开垦：草皮穹顶 */
.gflat-grasstuft {
  position: absolute; left: 6%; right: 6%; bottom: 3%; height: 52%;
  border-radius: 48% 48% 40% 40% / 60% 60% 32% 32%;
  background: radial-gradient(ellipse at 50% 26%, #8FD465 0%, #6DB94A 60%, #58A03C 100%);
  box-shadow: inset 0 -4px 7px rgba(30, 70, 16, .3), inset 0 3px 3px rgba(230, 255, 200, .3);
}
/* 作物贴图：底部中心锚在格内（贴图自带土堆，与 CSS 土垄视觉衔接） */
.gflat-crop {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 3px 3px rgba(45, 30, 10, .25));
}
.gflat-crop.is-ripe { animation: gflat-ripepulse 1.6s ease-in-out infinite; }
@keyframes gflat-ripepulse { 0%, 100% { transform: translateX(-50%) scale(1) } 50% { transform: translateX(-50%) scale(1.06) } }
/* 成熟金色柔光 */
.gflat-glow {
  position: absolute; left: 50%; bottom: 4%; width: 86%; height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(255, 208, 92, .55), rgba(255, 208, 92, 0) 68%);
  pointer-events: none; animation: gflat-glowp 1.6s ease-in-out infinite;
}
@keyframes gflat-glowp { 0%, 100% { opacity: .75 } 50% { opacity: 1 } }
/* 选中：金圈 + 顶部小三角 */
.gflat-plot.is-sel::after {
  content: ''; position: absolute; inset: -3px; border: 2.5px solid #FFB020; border-radius: 12px;
  box-shadow: 0 0 10px rgba(255, 176, 32, .65); pointer-events: none;
}
.gflat-plot.is-sel::before {
  content: ''; position: absolute; left: 50%; top: -13px; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #FFB020;
  animation: g2dbob 1.2s ease-in-out infinite; pointer-events: none; z-index: 3;
}
/* 状态标签（参考图「枯萎收菜」「收完」角标；收进格内防超出田框） */
.gflat-tag {
  position: absolute; right: 0; top: -4px; z-index: 3;
  font-size: 9.5px; line-height: 1; padding: 3px 5px; border-radius: 999px; pointer-events: none;
  color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); white-space: nowrap;
}
.gflat-tag-w { background: #8A6B4A; }
.gflat-tag-r { background: #F5A623; }
.gflat-tag-l { background: rgba(90, 110, 70, .85); }
.gflat-pest { position: absolute; left: -4px; top: -8px; font-size: 15px; z-index: 3; pointer-events: none; animation: g2dbob 1.8s ease-in-out infinite; }
.gflat-wet { position: absolute; left: -3px; bottom: 0; font-size: 12px; z-index: 3; pointer-events: none; opacity: .9; }
/* 小女孩主角：站在田框正下方（锚在 .gflat-mid），轻微呼吸浮动 */
.gflat-girl { animation: gflat-girlbob 3s ease-in-out infinite; }
@keyframes gflat-girlbob { 0%, 100% { transform: translateX(-50%) translateY(0) } 50% { transform: translateX(-50%) translateY(-3px) } }
/* 提示条（与 g2d-hint 同款风格；16% 避开木纹顶栏双条） */
.gflat-hint {
  position: absolute; left: 50%; top: 16%; transform: translateX(-50%);
  background: rgba(255, 253, 247, .92); color: #6E6B60;
  font-size: 11px; padding: 4px 12px; border-radius: 999px;
  pointer-events: none; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(60, 42, 10, .12);
}

/* ============ 木纹农场风 HUD（参考图同款，仅 H5 花园页） ============ */
/* 顶部双条木纹栏 */
.wf-top { position: absolute; left: 0; right: 0; top: 0; z-index: 20; padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 0; pointer-events: none; }
.wf-top > * { pointer-events: auto; }
.wf-row1 {
  position: relative; display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #B8763F 0%, #9C5C28 55%, #8A4E20 100%);
  border: 2px solid #6E4218; border-radius: 14px; padding: 6px 10px;
  box-shadow: inset 0 2px 0 rgba(255, 222, 175, .35), inset 0 -3px 0 rgba(70, 40, 10, .38), 0 4px 10px rgba(60, 40, 10, .28);
}
.wf-row1 .gfs-back { position: static; flex: 0 0 auto; }
/* 标题牌：居中木牌（参考图「开心农场」） */
.wf-title {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #D9A05E, #B4713B);
  border: 2px solid #6E4218; border-radius: 10px;
  color: #FFF6E3; font-weight: 800; font-size: 16px; letter-spacing: 2px; padding: 4px 18px;
  text-shadow: 0 1px 0 rgba(90, 50, 10, .65);
  box-shadow: inset 0 1px 0 rgba(255, 226, 178, .4), 0 2px 6px rgba(60, 40, 10, .35);
  pointer-events: none; white-space: nowrap;
}
.wf-weather { margin-left: auto; flex: 0 0 auto; background: rgba(255, 246, 227, .92); color: #7A4A05; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1.5px solid #6E4218; }
/* 第二行：货币框（金币=积分 / 连击=连续打卡天数） */
.wf-row2 { display: flex; gap: 8px; margin-top: 6px; }
.wf-cap {
  flex: 1; display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  background: linear-gradient(180deg, #B8763F, #8A4E20);
  border: 2px solid #6E4218; border-radius: 12px; padding: 5px 10px;
  color: #FFE9C2; font-size: 12px; font-weight: 700; text-shadow: 0 1px 0 rgba(90, 50, 10, .5);
  box-shadow: inset 0 2px 0 rgba(255, 222, 175, .3), 0 3px 8px rgba(60, 40, 10, .25);
}
.wf-cap i { font-style: normal; font-size: 15px; }
.wf-cap b { color: #FFF8E8; font-size: 14px; margin-left: 2px; }
.wf-cap.wf-coin b { color: #FFD35C; }
.wf-cap.wf-streak b { color: #FFE3C7; text-shadow: 0 1px 2px rgba(80, 40, 0, .55), 0 1px 0 rgba(90, 50, 10, .5); }
.wf-cap.wf-streak.is-hot { border-color: #F5A623; box-shadow: inset 0 2px 0 rgba(255, 222, 175, .3), 0 0 10px rgba(245, 166, 35, .45), 0 3px 8px rgba(60, 40, 10, .25); }
.wf-cap.wf-streak.is-hot b { color: #FFD35C; }
.wf-cap.wf-streak.is-hot i { display: inline-block; animation: wfflame 1.5s ease-in-out infinite; }
.wf-cap.wf-streak.is-cold { opacity: .92; }
.wf-cap.wf-streak.is-cold i { opacity: .55; }
@keyframes wfflame { 0%, 100% { transform: scale(1) rotate(-2deg) } 50% { transform: scale(1.16) rotate(2deg) } }

/* 底部木纹五键条（参考图：播种/浇水/一键收获/除草/背包） */
.wf-bar {
  display: flex; gap: 7px; align-items: stretch;
  background: linear-gradient(180deg, #B8763F 0%, #9C5C28 55%, #8A4E20 100%);
  border: 2px solid #6E4218; border-radius: 16px; padding: 8px;
  box-shadow: inset 0 2px 0 rgba(255, 222, 175, .32), inset 0 -3px 0 rgba(70, 40, 10, .38), 0 -4px 14px rgba(60, 40, 10, .22);
}
.wf-btn {
  flex: 1; min-height: 54px; border: 2px solid #6E4218; border-radius: 11px; cursor: pointer;
  background: linear-gradient(180deg, #D9A05E, #B4713B);
  color: #FFF6E3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 12px; font-weight: 800; text-shadow: 0 1px 0 rgba(90, 50, 10, .6);
  box-shadow: inset 0 2px 0 rgba(255, 230, 190, .4), 0 2px 5px rgba(60, 40, 10, .3);
  font-family: inherit;
}
.wf-btn .wb-ico { font-size: 19px; line-height: 1; }
.wf-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(70, 40, 10, .4); }
.wf-btn:disabled { opacity: .45; cursor: default; filter: grayscale(.5); }
/* 一键收获：居中大按钮（参考图同款金黄主按钮） */
.wf-btn.wf-big {
  flex: 1.5; background: linear-gradient(180deg, #FFD35C, #F59E1B);
  color: #7A4A05; font-size: 14px; text-shadow: 0 1px 0 rgba(255, 240, 200, .6);
  box-shadow: inset 0 2px 0 rgba(255, 246, 210, .6), 0 3px 8px rgba(60, 40, 10, .35);
}
/* 信息卡内次级操作（施肥/加速/清理/复活） */
.wf-extras { display: flex; gap: 8px; margin-top: 10px; }
.wf-extras .wf-btn { min-height: 40px; font-size: 12px; }
.wf-extras .wf-btn .wb-ico { font-size: 15px; }



.g2d-hint {
  position: absolute; left: 50%; top: 62px; transform: translateX(-50%);
  background: rgba(255, 253, 247, .92); color: #6E6B60;
  font-size: 11px; padding: 4px 12px; border-radius: 999px;
  pointer-events: none; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(60, 42, 10, .12);
}
/* 右侧竖轨：次要入口（背包/商店/统计/商城）+ 缩放 ±（与小程序 .g2d-rail 同构） */
.g2d-rail {
  position: absolute; right: 10px; top: 24%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(255, 253, 247, .95); border-radius: 999px;
  padding: 5px 0; box-shadow: 0 4px 16px rgba(60, 42, 10, .18);
}
.g2d-rbtn {
  width: 38px; height: 34px; border: 0; background: transparent;
  font-size: 18px; cursor: pointer; line-height: 1; border-radius: 999px; padding: 0;
}
.g2d-rsep { width: 56%; height: 1px; background: #EDE5D8; margin: 3px 0; }
.g2d-rail button {
  width: 34px; height: 30px; border: 0; background: transparent;
  color: #185FA5; font-size: 17px; font-weight: 700; cursor: pointer; line-height: 1;
}
.g2d-rail span { font-size: 10px; color: #8A867C; }

/* ---------- 全屏花园：场景铺满 + HUD 悬浮 ---------- */
.gfs {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  z-index: 40; background: #7CC24B; overflow: hidden;
}
.gfs .g2d-stage { border-radius: 0; }

.gfs-top {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
}
/* 左上：圆形返回钮（木质暖色，软阴影替代硬 3D） */
.gfs-back {
  width: 36px; height: 36px; line-height: 34px; text-align: center;
  border: 0; border-radius: 50%;
  background: linear-gradient(#E7B978, #C98A4B); color: #4A2C10;
  font-size: 22px; box-shadow: 0 4px 12px rgba(122, 74, 5, .35);
  cursor: pointer; padding: 0;
}
/* 右上：三枚资源胶囊（描边圆角胶囊 + 图标）。语义色沿用 Daylight：
   天气=中性 / 积分=琥珀 / 时间额度=数据蓝（与小程序 garden.wxss 同构） */
.gfs-caps { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.gfs-cap {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px; padding: 5px 11px;
  box-shadow: 0 2px 10px rgba(60, 42, 10, .14);
}
.cap-ico { font-size: 13px; line-height: 1; }
.cap-tx { font-size: 12px; font-weight: 700; line-height: 1; }

.gfs-chip {
  background: rgba(255, 253, 247, .94);
  border: 1px solid #DED3C1; color: #5C5A52;
}
.gfs-coin {
  background: #FDEED9; border: 1px solid #E8C79A; color: #8F4A05;
  padding: 5px 13px 5px 10px;
}
.gfs-coin .coin-ico { font-size: 14px; line-height: 1; }
.gfs-time {
  background: #E6F1FB; border: 1px solid #B8D4F0; color: #185FA5;
}

.gfs-bottom {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  display: flex; flex-direction: column; gap: 10px;
}
.gfs-panel { width: 100%; max-height: 38vh; overflow: auto; }
/* 操作坞：奶油底圆角条 + 均分四枚圆角钮（按选中地块状态动态映射）
   kind：main=品牌渐变主操作 / ghost=奶油描边次操作 / off=置灰不可点 */
.gfs-bar {
  display: flex; gap: 4px;
  background: rgba(255, 253, 247, .96);
  border-radius: 14px;
  padding: 5px 6px;
  box-shadow: 0 8px 24px rgba(60, 42, 10, .18);
}
.wbtn {
  flex: 1; min-height: 48px; border: 0;
  padding: 4px 0 3px;
  background: #FBF5EC; border: 1px solid #DED3C1; border-radius: 12px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer; box-sizing: border-box;
}
.wbtn:active { transform: scale(.96); opacity: .88; }
.wbtn .wb-ico { font-size: 22px; line-height: 1.1; }
.wbtn .wb-tx { font-size: 11px; font-weight: 600; color: #5C5A52; margin-top: 3px; line-height: 1; }
/* 主操作（浇水 / 收获 / 种植 / 清理）：品牌渐变 + 白字，对比度 5.8:1 */
.wbtn.main { background: linear-gradient(180deg, #B4620A, #8F4A05); border: 0; }
.wbtn.main .wb-tx { color: #FFFFFF; }
/* 置灰：图标降透明 + 文字降饱和，明确「当前地块用不上」 */
.wbtn.off { background: #F1EFE8; border: 0; cursor: default; }
.wbtn.off:active { transform: none; opacity: 1; }
.wbtn.off .wb-ico { opacity: .45; }
.wbtn.off .wb-tx { color: #9A968C; }

.gfs-sheet {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(18, 28, 38, .45);
  display: flex; align-items: flex-end;
}
.gfs-sheet-in {
  width: 100%; max-height: 74vh; overflow: auto;
  background: #FFFDF7;
  border-radius: 16px 16px 0 0;
  padding: 14px 14px 18px;
}
#garden3d-canvas { display: block; width: 100%; height: 100%; }
@keyframes drift {
  0%   { transform: translateX(-14px); }
  50%  { transform: translateX(16px); }
  100% { transform: translateX(-14px); }
}
.cld.c1 { animation: drift 26s ease-in-out infinite; }
.cld.c2 { animation: drift 34s ease-in-out infinite reverse; }

@keyframes bobY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.petbounce { animation: bobY 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }

@keyframes spin360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spin { animation: spin360 5s linear infinite; transform-box: fill-box; }

@keyframes sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}
.sway { animation: sway 3.4s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: .16; }
  50%      { opacity: .38; }
}
.pulse { animation: pulse 1.8s ease-in-out infinite; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
.bob { animation: bob 1.1s ease-in-out infinite; transform-box: fill-box; }

@keyframes fall {
  0%   { transform: translateY(-6px); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(26px); opacity: 0; }
}
.drop { animation: fall 1.1s ease-in forwards; transform-box: fill-box; }
.drop.d1 { animation-delay: .08s; }
.drop.d2 { animation-delay: .16s; }
.drop.d3 { animation-delay: .24s; }
.drop.d4 { animation-delay: .32s; }
.drop.d5 { animation-delay: .40s; }

/* 播种按钮 */
.seed-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.seed {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: #fff; border-radius: 12px;
  padding: 9px 10px; cursor: pointer; font-family: inherit; font-size: 14px;
  color: var(--ink); text-align: left;
}
.seed .e { font-size: 20px; }
.seed .n { font-weight: 600; flex: 1; }
.seed .c { font-size: 12px; color: var(--ink-3); }
.seed.off { opacity: .5; }

/* ---------- 积分商城 ---------- */
.shop-head { background: linear-gradient(135deg, #FF9A52, #FF7A33); color: #fff; }
.shop-head .tiny { color: rgba(255,255,255,.85); }
.shop-head .pts { font-size: 30px; font-weight: 800; line-height: 1.1; }
.shop-head .stat { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.25); color: #fff; }
.shop-head .stat .k { color: rgba(255,255,255,.85); }
.shop-head .btn.ghost { background: rgba(255,255,255,.22); color: #fff; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-c {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; color: var(--ink-2); cursor: pointer;
}
.chip-c.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

.goods-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 12px 12px; }
.goods {
  background: #fff; border-radius: var(--r); box-shadow: var(--shadow);
  padding: 12px; position: relative; cursor: pointer;
  display: flex; flex-direction: column; min-height: 168px;
}
.goods.off { opacity: .55; }
.g-ico { font-size: 34px; line-height: 1.1; }
.g-name { font-weight: 700; margin-top: 4px; }
.g-desc { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; min-height: 32px; }
.g-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.g-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 6px; }
.g-foot .price { color: var(--brand); font-weight: 800; font-size: 15px; flex: 1; }
.g-foot .price.poor { color: var(--ink-3); }
.g-tag {
  position: absolute; top: 8px; right: 8px;
  background: var(--red-soft); color: var(--red);
  font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 7px;
}

.c-ico { font-size: 24px; width: 30px; text-align: center; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper .qty { min-width: 22px; text-align: center; font-weight: 700; }

/* 商品详情弹层 */
.sheet-mask {
  position: fixed; inset: 0; background: rgba(30,25,20,.45); z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  background: #fff; width: 100%; max-width: 560px;
  border-radius: 20px 20px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  animation: sheetUp .22s ease-out;
}
@keyframes sheetUp { from { transform: translateY(30px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
.sheet-head { display: flex; align-items: center; gap: 12px; }
.sheet-ico { font-size: 44px; line-height: 1; }
.sheet-name { font-size: 17px; font-weight: 700; }
.chipx {
  border: none; background: #F3EDE7; color: var(--ink-2);
  width: 30px; height: 30px; border-radius: 999px; cursor: pointer; font-size: 14px;
}
.sheet-body { max-height: 48vh; overflow-y: auto; margin-top: 12px; }
.sheet-body .desc { font-size: 13px; color: var(--ink-2); }
.sheet-foot { display: flex; gap: 8px; margin-top: 14px; }

.form-body { max-height: 52vh; overflow-y: auto; }
.form-body .field { margin-bottom: 10px; }

/* ===== v5 · 登录方式切换 ===== */
.lg-tabs {
  display: flex; gap: 8px; margin-top: 12px;
}
.lg-tabs > div {
  flex: 1; text-align: center; padding: 9px 0; border-radius: 12px;
  background: #fff; color: var(--ink-2); font-size: 12.5px; cursor: pointer;
  border: 1.5px solid transparent;
}
.lg-tabs > div .ico { display: block; font-size: 17px; margin-bottom: 2px; }
.lg-tabs > div.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); font-weight: 700; }

/* ===== v12 · 登录页角色选择（🧒 孩子 / 👨‍👩‍👧 家长，与小程序一致） ===== */
.lg-secl { font-size: 12px; color: #7A5B44; margin: 0 0 10px; letter-spacing: 2px; }
.lg-roles { display: flex; gap: 10px; margin-bottom: 18px; }
.lg-role {
  flex: 1; background: #FBF7F0; border: 2px solid #EDE5D8; border-radius: 14px;
  padding: 13px 12px 12px; position: relative; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.lg-role.on {
  background: #FDEED9; border-color: #D98314;
  box-shadow: 0 4px 14px rgba(217, 131, 20, .20);
}
.lg-role-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 5px; }
.lg-emoji { font-size: 28px; line-height: 1.1; }
.lg-check {
  width: 20px; height: 20px; border-radius: 10px; flex: 0 0 20px;
  background: #B4620A; color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.lg-role-name { font-size: 15px; font-weight: 700; color: #22211D; }
.lg-role-desc { font-size: 12px; color: #6B5540; margin-top: 3px; line-height: 1.5; }

/* ===== v6 · 个人中心账号卡 ===== */
.acct { display: flex; align-items: center; gap: 12px; padding: 14px; background: linear-gradient(135deg, #FFF4E8, #FFE9D6); border-radius: var(--r); border: 1px solid var(--line); }
.acct-avatar {
  width: 50px; height: 50px; border-radius: 50%; flex: 0 0 50px;
  background: var(--brand); color: #fff; font-size: 22px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 2px solid #fff; box-shadow: var(--shadow);
}
.acct-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== v5 · 商城分类与商品卡 ===== */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip2 {
  border: none; background: #F6F1EC; color: var(--ink-2);
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; cursor: pointer;
}
.chip2.on { background: var(--brand); color: #fff; font-weight: 700; }

.goods { background: #fff; border-radius: 14px; padding: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.goods.off { opacity: .62; }
.goods .g-emoji { font-size: 30px; text-align: center; line-height: 1.1; }
.goods .g-emoji .g-img { width: 46px; height: 46px; object-fit: contain; display: block; margin: 0 auto; }
.goods .g-name { font-size: 12.5px; font-weight: 700; margin-top: 4px; text-align: center; }
.goods .g-tag { font-size: 10.5px; color: var(--ink-3); text-align: center; margin-top: 2px; }
.goods .g-price { font-size: 13px; font-weight: 800; color: var(--brand); text-align: center; margin-top: 4px; }
.goods .g-bag { font-size: 10.5px; color: var(--teal); text-align: center; min-height: 14px; margin-bottom: 6px; }

.cart-box {
  background: var(--brand-soft); border-radius: 16px; padding: 12px; margin-top: 12px;
}
.cart-box .item { background: transparent; padding: 6px 0; }

.sheet-emoji { font-size: 40px; line-height: 1; }
.kv {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px dashed #EFE6DE; font-size: 13px;
}
.kv span { color: var(--ink-2); }
.kv b { font-weight: 700; }
.kv b.big { font-size: 17px; color: var(--brand); }

/* ===== v5 · 宠物场景 ===== */
.pet-card { padding: 8px; }
.pet-scene { width: 100%; display: block; border-radius: 16px; background: #FFF3E0; }
.shake { animation: shake 1.4s ease-in-out infinite; transform-origin: 150px 170px; }
@keyframes shake {
  0%, 82%, 100% { transform: rotate(0deg); }
  86% { transform: rotate(-5deg); }
  90% { transform: rotate(5deg); }
  94% { transform: rotate(-3deg); }
}
.rn { animation: raindrop 1s linear infinite; }
.r1 { animation-delay: .1s } .r2 { animation-delay: .35s } .r3 { animation-delay: .6s }
@keyframes raindrop { from { transform: translateY(-10px); opacity: .2 } to { transform: translateY(24px); opacity: .9 } }

/* 六宫格页签在小屏上不要太挤 */
.tabbar > div { font-size: 10.5px; }
.tabbar > div .ico { font-size: 16px; }

/* ================= 好友模块（会话 / 好友 / 聊天 / 公开资料） ================= */
.seg {
  display: flex; gap: 0; margin: 12px 0;
  background: #fff; border-radius: 12px; padding: 4px;
  border: 1px solid var(--line, #EDE5D8);
}
.seg > div {
  flex: 1; text-align: center; padding: 9px 0; font-size: 14px; color: var(--ink-2);
  border-radius: 9px; font-weight: 600; cursor: pointer;
}
.seg > div.on { background: linear-gradient(135deg, #E9972E, #B4620A); color: #fff; }

.friend-page { padding-bottom: 12px; }
.conv-item, .result-item {
  display: flex; align-items: center; gap: 12px; background: #fff;
  border: 1px solid var(--line, #EDE5D8); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 10px; cursor: pointer;
}
.conv-item:active, .result-item:active { background: #FBF6EC; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; background: #FDEED9; color: #B4620A;
  display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
  object-fit: cover;
}
.conv-mid { flex: 1; min-width: 0; }
.conv-name { font-size: 15px; font-weight: 600; }
.conv-last { font-size: 12px; color: var(--ink-3); margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.searchbar { display: flex; gap: 8px; margin-bottom: 12px; }
.searchbar .input { flex: 1; }
.block-title { font-size: 13px; color: var(--ink-3); margin: 16px 2px 8px; font-weight: 600; }

/* 聊天 */
.chat-page { display: flex; flex-direction: column; height: calc(100vh - 120px); min-height: 420px; }
.chat-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #fff;
  border-bottom: 1px solid #ECE6D8; border-radius: 14px 14px 0 0;
}
.chat-back { font-size: 26px; color: #B4620A; background: none; border: none; cursor: pointer; line-height: 1; padding: 0 4px; }
.chat-avatar {
  width: 38px; height: 38px; border-radius: 19px; flex-shrink: 0;
  background: #FDEED9; border: 1px solid #EDE5D8; object-fit: cover;
}
.chat-avatar-text { display: flex; align-items: center; justify-content: center; font-size: 20px; color: #B4620A; }
.chat-title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; }
.chat-body { flex: 1; overflow-y: auto; padding: 14px 12px; }
.msg-row { display: flex; margin-bottom: 10px; }
.msg-row.me { justify-content: flex-end; }
.bubble {
  max-width: 68%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5;
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.05); word-break: break-all;
}
.msg-row.me .bubble { background: linear-gradient(135deg, #E9972E, #B4620A); color: #fff; }
.bubble-img { padding: 5px; }
/* 拳霸对决邀请卡（聊天气泡内的 kof_invite 消息） */
.msg-kof { display: flex; flex-direction: column; gap: 5px; min-width: 190px; }
.msg-kof-t { font-size: 15px; font-weight: 800; color: #B4620A; }
.msg-kof-r { font-size: 12px; color: #8A6B3F; }
.msg-kof-r b { color: #B4620A; letter-spacing: 2px; }
.msg-kof .btn { margin-top: 3px; align-self: flex-start; }
.msg-img { width: 200px; border-radius: 10px; display: block; cursor: pointer; }
.chat-input-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: #fff; border-top: 1px solid #ECE6D8;
}
.ico-btn {
  width: 38px; height: 38px; border-radius: 50%; background: #F3EEE2; color: #B4620A;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  border: none; cursor: pointer; flex-shrink: 0;
}
.chat-input {
  flex: 1; height: 38px; padding: 0 14px; background: #F3EEE2;
  border: none; border-radius: 19px; font-size: 14px;
}
.emoji-panel {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 10px;
  background: #fff; border-top: 1px solid #ECE6D8;
}
.emoji-cell { font-size: 22px; padding: 5px; cursor: pointer; border-radius: 8px; }
.emoji-cell:active { background: #F3EEE2; }

/* 公开资料卡 */
.profile-row { display: flex; align-items: center; gap: 12px; }
.profile-avatar {
  width: 52px; height: 52px; border-radius: 26px; flex-shrink: 0;
  background: #FDEED9; border: 1px solid #EDE5D8; object-fit: cover;
}
.profile-avatar-text { display: flex; align-items: center; justify-content: center; font-size: 24px; color: #B4620A; }

/* ============ 管理后台（admin.js） ============ */
.seg.wrap { flex-wrap: wrap; gap: 4px; }
.seg.wrap > div { flex: 0 0 auto; min-width: 64px; padding: 9px 12px; }
.ml8 { margin-left: 8px; }

/* 底部保存条：dirty 时才出现 */
.savebar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; gap: 10px; padding: 12px 4px 16px;
  background: linear-gradient(to top, var(--bg) 78%, rgba(255,247,239,0));
}
.savebar .btn { margin-top: 0; }

/* 复选框开关（与设计系统一致的胶囊样式） */
.switch { position: relative; display: inline-block; width: 48px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
  position: absolute; inset: 0; border-radius: 15px; background: #E5DCCF;
  transition: background .18s; cursor: pointer;
}
.switch span::before {
  content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%;
  left: 3px; top: 3px; background: #fff; transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.switch input:checked + span { background: var(--teal); }
.switch input:checked + span::before { transform: translateX(20px); }

/* 跨家庭成员编辑行：纵向堆叠 */
.item.col { flex-direction: column; align-items: stretch; }
.item.col .row { flex-wrap: wrap; }

/* JSON 编辑框 */
textarea.input { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; resize: vertical; }

/* 管理后台 tab 高亮行 */
.item[style*="background"] { border-radius: 12px; }

/* ============ 宠物场景选择行（与小程序 scene-row 一致） ============ */
.scene-row {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.scene-row::-webkit-scrollbar { display: none; }
.scene-chip {
  flex: 0 0 auto; padding: 7px 12px; border-radius: 999px;
  background: #FBF3E8; border: 1.5px solid var(--line, #EADFCF);
  font-size: 12.5px; color: #7A6A55; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.scene-chip.on {
  border-color: var(--brand, #B4620A); background: var(--brand-soft, #FBEBD8);
  color: var(--brand-deep, #8F4A05); font-weight: 700;
}

/* ============ 登录页协议链接与协议阅读页 ============ */
.lg-foot {
  text-align: center; font-size: 12px; color: #8A7A64; margin-top: 14px; line-height: 1.8;
}
.lg-link { color: var(--brand-deep, #8F4A05); text-decoration: none; cursor: pointer; }
.lg-link:hover { text-decoration: underline; }
.doc-p { font-size: 13.5px; line-height: 1.85; color: #4A3F33; margin: 8px 0 0; }
.doc-p:first-child { margin-top: 4px; }

/* ============ 宠物空间自由摆放 ============ */
.full { width: 100%; }
.pet-scene { touch-action: none; }   /* 防止拖动装饰时页面滚动 */
.decor-layer .pdecor { cursor: default; }
.pdecor { transition: none; }
.pdecor.sel { cursor: grabbing; }
.decor-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.decor-add .chip { font-size: 12px; padding: 6px 10px; }
.pdecor { -webkit-tap-highlight-color: transparent; }

/* ============ 钓鱼场 · 全屏沉浸式（视觉对标参考图） ============ */
/* 场景层纯装饰（pointer-events:none）；HUD 四角悬浮；
   钓竿几何：竿身 rotate(--ang)，线框反向 rotate 保持竖直，竿尖/线/浮标永远咬合 */
.ffs {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  z-index: 40; overflow: hidden; background: #2E82B8;
}
.ff-scene { position: absolute; inset: 0; pointer-events: none; }

/* ---------- 场景：天空 / 太阳 / 云 / 远山 / 水面 ---------- */
.ff-sky { position: absolute; inset: 0 0 70% 0; background: linear-gradient(180deg, #8FD4F2 0%, #BFE3F7 55%, #E4F4FC 100%); }
.ff-sun {
  position: absolute; right: 13%; top: 5%; width: 52px; height: 52px; border-radius: 50%;
  background: #FFEF9E; box-shadow: 0 0 26px 14px rgba(255, 239, 158, .5);
}
.ff-cloud { position: absolute; animation: drift 30s ease-in-out infinite; }
.ff-hills { position: absolute; left: 0; right: 0; top: 21%; height: 9%; }
.ff-water {
  position: absolute; left: 0; right: 0; top: 30%; bottom: 0;
  background: linear-gradient(180deg, #4AA3D4 0%, #2E82B8 34%, #1F6C9E 72%, #17557F 100%);
}
.ff-shine {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 34% at 50% 0%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 72%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 52px, rgba(255, 255, 255, .05) 52px 54px);
}
.ff-wave {
  position: absolute; left: 0; right: 0; height: 24px;
  background-repeat: repeat-x; background-size: 480px 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='24' viewBox='0 0 480 24'%3E%3Cpath d='M0 12 Q30 2 60 12 T120 12 T180 12 T240 12 T300 12 T360 12 T420 12 T480 12' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: ffWave linear infinite;
}
@keyframes ffWave { from { background-position-x: 0 } to { background-position-x: -480px } }

/* 鱼群：泳道（.ff-lane，宽=屏宽）来回横移 —— % 相对泳道，任何屏宽都无缝；
   鱼体在两端瞬间掉头（去程朝右 / 回程朝左）；尾鳍摆动 + 身体上下起伏。
   深浅分层由 JS 配表给出（越深 = 越大越慢越淡）。
   负 animation-delay 续播：render 重建 DOM 后动画接着走，不跳回起点。 */
.ff-lane {
  position: absolute; left: 0; width: 100%;
  animation: ffSwimX linear infinite alternate;
  will-change: transform;
}
/* 2%~70%：整条鱼（含尾鳍）始终留在屏内，不游出边界被裁 */
@keyframes ffSwimX { from { transform: translateX(2%) } to { transform: translateX(70%) } }
.ff-fish { animation: ffFlip linear infinite; }
.ff-fish svg { display: block; animation: ffFishBob 2.8s ease-in-out infinite alternate; }
.ff-tail {
  transform-box: fill-box; transform-origin: right center;
  animation: ffTail .44s ease-in-out infinite alternate;
}
/* 掉头：ffFlip 时长 = 完整来回（JS 里给 dur*2），前半程头朝右（去程）、
   后半程头朝左（回程）。不能用 alternate —— 反向迭代会倒放关键帧，
   鱼刚掉头就翻回头朝右，回程整程头朝后（曾踩坑）。 */
@keyframes ffFlip { 0%, 49.9% { transform: scaleX(1) } 50%, 100% { transform: scaleX(-1) } }
@keyframes ffFishBob { from { transform: translateY(-5px) } to { transform: translateY(6px) } }
@keyframes ffTail { from { transform: rotate(-15deg) } to { transform: rotate(15deg) } }

/* 咬钩：一条鱼游到浮标下方，让人看见「有东西在咬」
   坐标对齐浮标落点（54%W, 65%H → 水区内 46% + 30px / 52%） */
.ff-nib {
  position: absolute; left: 46%; top: 52%; width: 54px;
  color: #0B3E63; opacity: 0;
  animation: ffNib 1.3s ease-in-out infinite;
}
.ff-nib svg { display: block; }
.ff-nib .ff-tail { animation-duration: .26s; }
@keyframes ffNib {
  0% { transform: translateX(-160px); opacity: 0 }
  22% { opacity: .85 }
  62% { transform: translateX(0); opacity: .85 }
  100% { transform: translateX(30px); opacity: 0 }
}

/* 气泡：从水底缓缓升起 */
.ff-bubble {
  position: absolute; bottom: 5%; border-radius: 50%;
  background: rgba(255, 255, 255, .48);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
  animation: ffRise linear infinite;
}
@keyframes ffRise {
  0% { transform: translateY(0); opacity: 0; }
  14% { opacity: .6; }
  100% { transform: translateY(-52vh); opacity: 0; }
}

/* ---------- 钓竿 + 线组 + 浮标（几何咬合） ---------- */
/* 注册成 <angle> 后 --ang 才能被 transition/animation 插值（渐进增强：
   老 webview 不支持 @property 时降级为瞬间切角度，不影响抛竿关键帧动画） */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: -70deg; }
/* 持竿点在「底部中间偏左」（left 30% / top 84%），竿长 70%W（≈273px，390 基准），
   竿身朝右前上方 70°（握竿等待姿态），鱼线垂到浮标落点（54%W, 65%H）≈ 画面正中偏下。
   角度标定（竿根 117,655　竿尖 x=117+273·cosθ　y=655+273·sinθ，CSS y 轴向下）：
     -104° 后仰 → (51,390)　-50° 前甩 → (292,446)　-70° 等待 → (210,398)
     -95° 扬竿 → (93,383)　-62° 咬钩下沉 → (245,414)
   浮标 = 竿尖 + 线长（30% × 48%H ≈ 112px），全程 x ≤ 334、y ≤ 568，均在 390×780 屏内。 */
.ff-rod {
  position: absolute; left: 30%; top: 84%; width: 70%; height: 48%;
  --ang: -70deg;
  transform-origin: left top; transform: rotate(var(--ang));
  transition: transform .35s ease, opacity .3s ease;
}
.ff-rod::before {   /* 竿身：左端握把粗、右端竿梢细（clip-path 锥形，老 webview 降级为等宽） */
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 13px;
  border-radius: 6px;
  clip-path: polygon(0 0, 100% 30%, 100% 70%, 0 100%);
  background:
    linear-gradient(90deg, #7A5433 0 13%, rgba(0, 0, 0, 0) 13%),
    linear-gradient(180deg, #6FC0A9, #2A6B5C 62%, #1E5245);
  box-shadow: inset 0 -2px 0 rgba(6, 30, 26, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.ff-rod::after {   /* 握把缠线 + 导环（只覆盖左段，右段保持竿身干净） */
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 13px;
  border-radius: 6px;
  clip-path: polygon(0 0, 100% 30%, 100% 70%, 0 100%);
  background:
    repeating-linear-gradient(90deg, rgba(12, 40, 34, 0) 0 15px, rgba(12, 40, 34, .3) 15px 17px);
}
.ff-reel {
  position: absolute; left: 6%; top: -6px; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #F4F6F8, #B9C4CC 58%, #8D99A3);
  border: 2px solid #6E7A85; box-shadow: 0 2px 6px rgba(10, 40, 70, .35);
}
.ff-reel::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #5B6670; transform: translate(-50%, -50%); }
/* 线框：反向旋转抵消竿身角度 → 线永远竖直；竿尖即线框原点 */
.ff-line {
  position: absolute; left: 100%; top: 0; width: 0; height: 100%;
  transform-origin: left top; transform: rotate(calc(-1 * var(--ang)));
  transition: transform .35s ease;
}
.ff-line > i {
  position: absolute; left: -1px; top: 0; width: 2px; height: 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .5));
  border-radius: 2px;
}
.ff-bobber { position: absolute; left: -9px; top: 30%; width: 18px; height: 18px; animation: bobY 2.6s ease-in-out infinite; }
.ff-bobber::before { content: ''; position: absolute; left: 50%; top: -7px; width: 2.5px; height: 8px; background: #FF7A3D; transform: translateX(-50%); border-radius: 2px; }
.ff-bobber i {
  position: absolute; inset: 0; border-radius: 50% 50% 46% 46%;
  background: linear-gradient(180deg, #FF7A3D 0 46%, #FFFDF7 46% 100%);
  box-shadow: 0 2px 6px rgba(10, 40, 70, .35), inset 0 0 0 1.5px rgba(255, 255, 255, .7);
}
.ff-ripple {
  position: absolute; left: -32px; top: calc(30% - 32px); width: 64px; height: 64px;
  border: 2px solid rgba(255, 255, 255, .55); border-radius: 50%;
  animation: ffRipple 2.8s ease-out infinite; opacity: 0;
}
.ff-ripple.r2 { animation-delay: -.95s; }
.ff-ripple.r3 { animation-delay: -1.9s; }
@keyframes ffRipple { 0% { transform: scale(.35); opacity: .65 } 100% { transform: scale(1.5); opacity: 0 } }
.ff-splash {
  position: absolute; left: -42px; top: calc(30% - 42px); width: 84px; height: 84px;
  border: 3px solid rgba(255, 255, 255, .95); border-radius: 50%; opacity: 0;
}
@keyframes ffSplash { 0% { transform: scale(.3); opacity: .95 } 100% { transform: scale(1.6); opacity: 0 } }

/* ---------- 顶栏 HUD ---------- */
.ff-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; padding: 9px 10px 0; display: flex; flex-direction: column; gap: 6px; }
.ff-top-row { display: flex; align-items: flex-start; gap: 8px; }
.ff-back {
  flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255, 253, 247, .94); color: #4A2C10;
  font-size: 22px; line-height: 34px; text-align: center;
  box-shadow: 0 4px 12px rgba(20, 60, 90, .3); cursor: pointer; padding: 0;
}
.ff-player {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(180deg, #3D7AB8, #28598E);
  border: 2px solid rgba(255, 255, 255, .85); border-radius: 12px;
  padding: 5px 10px 5px 6px; box-shadow: 0 4px 14px rgba(20, 60, 90, .32);
}
.ff-player-ava {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFE9C2, #EBB877);
  border: 1.5px solid #FFF; display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.ff-player-tx { display: flex; flex-direction: column; line-height: 1.25; }
.ff-player-name { color: #FFF; font-size: 13px; font-weight: 800; text-shadow: 0 1px 0 rgba(10, 40, 70, .5); }
.ff-player-sub { color: #D6E8F8; font-size: 10.5px; font-weight: 600; }
.ff-circs { margin-left: auto; display: grid; grid-template-columns: repeat(2, auto); gap: 5px 8px; }
.ff-circ { border: 0; background: transparent; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ff-circ-ico {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF, #E3F0FA); border: 2px solid #7FB3DC;
  box-shadow: 0 3px 8px rgba(20, 60, 90, .28);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.ff-circ:active .ff-circ-ico { transform: scale(.93); }
.ff-circ-tx { font-size: 9.5px; font-weight: 700; color: #FFF; text-shadow: 0 1px 2px rgba(10, 50, 80, .65); }
.ff-top-row2 { display: flex; justify-content: center; gap: 8px; }
.ff-pill {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
  padding: 5px 12px; font-size: 12px; font-weight: 700;
  box-shadow: 0 2px 10px rgba(20, 60, 90, .25);
}
.ff-pill b { font-size: 14px; }
.ff-pill-coin { background: #FDEED9; border: 1px solid #E8C79A; color: #8F4A05; }
.ff-pill-nrg { background: #E6F1FB; border: 1px solid #B8D4F0; color: #185FA5; }

/* ---------- 左侧钓具卡 / 右侧钓获卡 ---------- */
.ff-gear { position: absolute; left: 10px; top: 140px; z-index: 3; width: 132px; display: flex; flex-direction: column; gap: 7px; }
.ff-card { background: rgba(255, 253, 247, .94); border-radius: 12px; padding: 8px 10px; box-shadow: 0 4px 14px rgba(20, 60, 90, .25); }
.ff-card-t { font-size: 12px; font-weight: 800; color: #3A2E1E; }
.ff-card-n { color: #B4620A; }
.ff-card-d { font-size: 10px; color: #7A7060; margin-top: 3px; }
.ff-bar { height: 7px; border-radius: 99px; background: #EDE4D4; margin-top: 6px; overflow: hidden; }
.ff-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7CC24B, #4E9A2F); }
.ff-bar.is-bait i { background: linear-gradient(90deg, #5FB8E8, #2E82B8); }
/* 耐久条：琥珀（正常）→ 橙（≤3 次快断了）→ 红（断了） */
.ff-bar.is-dura { margin-top: 5px; }
.ff-bar.is-dura i { background: linear-gradient(90deg, #F2C14E, #D98324); }
.ff-bar.is-dura.is-low i { background: linear-gradient(90deg, #FFA94D, #E8590C); }
.ff-bar.is-dura.is-dead i { background: linear-gradient(90deg, #E88A8A, #C0392B); width: 100% !important; }
.ff-card-d.is-low { color: #E8590C; font-weight: 700; }
.ff-card-d.is-dead, .desc.is-dead { color: #C0392B; font-weight: 700; }
.desc.is-low { color: #E8590C; font-weight: 700; }
.ff-card.is-empty { text-align: center; }
.ff-card-btn { margin-top: 6px; border: 0; border-radius: 99px; padding: 5px 12px; background: linear-gradient(180deg, #B4620A, #8F4A05); color: #FFF; font-size: 11px; font-weight: 700; cursor: pointer; }
.ff-catch { position: absolute; right: 10px; top: 140px; z-index: 3; width: 126px; display: flex; flex-direction: column; gap: 7px; }
.ff-catchcard {
  display: flex; align-items: center; gap: 7px; text-align: left;
  background: rgba(255, 253, 247, .94); border: 0; border-radius: 12px; padding: 6px 8px;
  box-shadow: 0 4px 14px rgba(20, 60, 90, .25); cursor: pointer;
}
.ff-catch-ava {
  width: 30px; height: 30px; border-radius: 50%; background: #FFF;
  border: 2px solid var(--tc, #6B7280); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.ff-catch-tx { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ff-catch-tx b { font-size: 11.5px; color: #3A2E1E; }
.ff-catch-tx i { font-size: 9.5px; color: #7A7060; font-style: normal; }
.ff-catchcard.is-empty { display: block; text-align: center; font-size: 10.5px; color: #7A7060; line-height: 1.5; padding: 10px 8px; cursor: default; }

/* ---------- 底部操作区 ---------- */
.ff-bottom {
  position: absolute; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.ff-btns { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; }
.ff-btn { border: 0; background: transparent; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ff-btn-ico {
  position: relative; width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF, #EAF3FB); border: 2px solid #8FBCDD;
  box-shadow: 0 4px 12px rgba(20, 60, 90, .3);
  display: flex; align-items: center; justify-content: center; font-size: 23px;
}
.ff-btn:active .ff-btn-ico { transform: scale(.94); }
.ff-btn-tx { font-size: 10.5px; font-weight: 700; color: #FFF; text-shadow: 0 1px 2px rgba(10, 50, 80, .7); }
.ff-badge {
  position: absolute; right: -4px; top: -4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 99px; background: #B42318; color: #FFF;
  font-size: 10px; font-style: normal; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid #FFF;
}
.ff-pair { display: flex; gap: 14px; }
.ff-big { border: 0; padding: 0; cursor: pointer; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ff-big-ico {
  width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #FFC168, #F08A1D 62%, #D96E08);
  border: 3px solid #FFF;
  box-shadow: 0 8px 22px rgba(180, 90, 10, .45), inset 0 -6px 12px rgba(140, 60, 0, .28);
  display: flex; align-items: center; justify-content: center; font-size: 38px;
}
.ff-big:active .ff-big-ico { transform: scale(.95); }
.ff-big-tx { font-size: 13px; font-weight: 800; color: #FFF; text-shadow: 0 1px 2px rgba(10, 50, 80, .7); }
.ff-big.is-off { cursor: default; }
.ff-big.is-off .ff-big-ico { filter: grayscale(.55); opacity: .75; }
.ff-big.is-wait { cursor: default; }
.ff-big.is-wait .ff-big-ico { background: radial-gradient(circle at 34% 28%, #E8E4DA, #C9C2B2 62%, #B0A893); }
.ff-big.is-hook .ff-big-ico {
  background: radial-gradient(circle at 34% 28%, #FF8A7A, #E8452F 62%, #C62A1B);
  animation: ffHookPulse .6s ease-in-out infinite;
}
@keyframes ffHookPulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.08) } }

/* 咬钩横幅 + 限时条 */
.ff-bite {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: linear-gradient(180deg, #FFE58A, #F5B93B); border: 2px solid #FFF;
  border-radius: 14px; padding: 8px 16px 9px;
  box-shadow: 0 6px 18px rgba(150, 90, 0, .35);
  animation: ffBannerIn .25s ease-out;
}
.ff-bite-tx { font-size: 13.5px; font-weight: 800; color: #6B3A00; }
.ff-bite-bar { width: 150px; height: 6px; border-radius: 99px; background: rgba(107, 58, 0, .22); overflow: hidden; }
.ff-bite-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #B42318, #E8452F); animation: ffBiteBar 2.6s linear forwards; }
@keyframes ffBiteBar { from { width: 100% } to { width: 0% } }
@keyframes ffBannerIn { from { transform: translateY(14px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.ff-hint {
  background: rgba(255, 253, 247, .92); border-radius: 99px; padding: 6px 14px;
  font-size: 11.5px; font-weight: 700; color: #8F4A05;
  box-shadow: 0 3px 10px rgba(20, 60, 90, .22);
}

/* ---------- 结算卡 ---------- */
.ff-res-mask {
  position: absolute; inset: 0; z-index: 6; background: rgba(16, 42, 66, .5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ff-res {
  width: min(300px, 86%); background: #FFFDF7; border-radius: 18px;
  padding: 18px 16px 14px; text-align: center;
  box-shadow: 0 18px 44px rgba(10, 30, 50, .4);
  animation: ffResIn .28s cubic-bezier(.2, .9, .3, 1.2);
}
.ff-res-ava { font-size: 46px; line-height: 1; }
.ff-res-t { font-size: 17px; font-weight: 800; color: #3A2E1E; margin-top: 8px; }
.ff-res-name { font-size: 13px; color: #5C5344; margin-top: 4px; }
.ff-res-name i { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 99px; background: #F1EDE3; color: #7A7060; margin-left: 2px; }
.ff-res-stats { font-size: 11.5px; color: #8A8070; margin-top: 6px; }
.ff-res-btns { display: flex; gap: 8px; margin-top: 12px; }
.ff-res-btns .btn { flex: 1; }
@keyframes ffResIn { from { transform: scale(.85); opacity: 0 } to { transform: scale(1); opacity: 1 } }

/* 弹层（复用花园底部弹层壳）压在结算卡之上 */
.ffs .gfs-sheet { z-index: 8; }

/* ---------- 状态机：竿/线/浮标/鱼群联动 ---------- */
/* 甩竿前（idle）不显示鱼竿：抛竿瞬间才淡入并从画面下方举起 */
.ffs.is-idle .ff-rod { opacity: 0; }

/* 咬钩：鱼往下扯 → 竿身被压平（-70° → -62°，竿尖下沉 16px） */
.ffs.is-bite .ff-rod { --ang: -62deg; }

/* 抛竿：从下方举起 → 后仰蓄力 → 前甩送线 → 竿梢余振 → 停在握竿等待角。
   线框同步反向（角度取反），保证鱼线永远竖直、竿尖与线顶端咬合。 */
.ffs.is-casting .ff-rod { animation: ffSwing .92s ease-in-out 1; }
.ffs.is-casting .ff-line { animation: ffSwingLine .92s ease-in-out 1; }
.ffs.is-casting .ff-line > i { animation: ffLineOut .92s ease-out 1; }
.ffs.is-casting .ff-bobber { animation: ffCast .5s ease-out .52s 1 backwards; }
.ffs.is-casting .ff-splash { animation: ffSplash .5s ease-out .6s 1; }

/* 提竿：扬竿一下（结算遮罩半透，背景仍可见） */
.ffs.is-result .ff-rod { animation: ffHook .55s cubic-bezier(.2, .8, .3, 1) 1; }
.ffs.is-result .ff-line { animation: ffHookLine .55s cubic-bezier(.2, .8, .3, 1) 1; }
.ffs.is-result .ff-splash { animation: ffSplash .7s ease-out .04s 1; }

.ffs.is-bite .ff-bobber { animation: ffDip .55s ease-in-out infinite; }
.ffs.is-bite .ff-ripple { animation-duration: 1.1s; border-color: rgba(255, 255, 255, .8); }

/* 抛竿主关键帧（.92s）：
   0~14%  竿从画面下方 54px 处举起就位（配合 opacity 淡入 = 「抽竿」出场）
   14~30% 后仰蓄力（竿尖划到左后 -104°）
   30~46% 前甩送线（最快的一下，带 ease-in 加速，竿尖甩到右前 -50°）
   46~100% 竿梢弹性余振（逐步衰减的小幅摆动）→ 停在 -70° 握竿等待 */
@keyframes ffSwing {
  0% { transform: translate(0, 54px) rotate(-64deg); }
  14% { transform: translate(0, 6px) rotate(-72deg); animation-timing-function: cubic-bezier(.4, 0, .7, .4); }
  30% { transform: translate(0, 0) rotate(-104deg); animation-timing-function: cubic-bezier(.16, .68, .28, 1); }
  46% { transform: translate(0, 0) rotate(-50deg); animation-timing-function: cubic-bezier(.3, 0, .5, 1); }
  58% { transform: translate(0, 0) rotate(-66deg); }
  70% { transform: translate(0, 0) rotate(-75deg); }
  82% { transform: translate(0, 0) rotate(-67deg); }
  92% { transform: translate(0, 0) rotate(-71deg); }
  100% { transform: translate(0, 0) rotate(-70deg); }
}
/* 线框角度严格取反 → 抵消竿身旋转，鱼线永远竖直 */
@keyframes ffSwingLine {
  0% { transform: rotate(64deg) }
  14% { transform: rotate(72deg); animation-timing-function: cubic-bezier(.4, 0, .7, .4); }
  30% { transform: rotate(104deg); animation-timing-function: cubic-bezier(.16, .68, .28, 1); }
  46% { transform: rotate(50deg); animation-timing-function: cubic-bezier(.3, 0, .5, 1); }
  58% { transform: rotate(66deg) }
  70% { transform: rotate(75deg) }
  82% { transform: rotate(67deg) }
  92% { transform: rotate(71deg) }
  100% { transform: rotate(70deg) }
}
/* 线长跟着甩（基准 30%）：举起收线 → 后仰收到最短 → 前甩瞬间放开 → 落水回弹 */
@keyframes ffLineOut {
  0% { height: 4% }
  14% { height: 11% }
  30% { height: 6% }
  46% { height: 4% }
  64% { height: 34% }
  82% { height: 26% }
  92% { height: 31% }
  100% { height: 30% }
}
/* 扬竿：从咬钩的下沉角 -62° 猛地向后上方抬起（竿尖 -95° 时 x≈93，仍在屏内） */
@keyframes ffHook {
  0% { transform: rotate(-62deg) }
  30% { transform: rotate(-95deg) }
  56% { transform: rotate(-74deg) }
  78% { transform: rotate(-80deg) }
  100% { transform: rotate(-70deg) }
}
@keyframes ffHookLine {
  0% { transform: rotate(62deg) }
  30% { transform: rotate(95deg) }
  56% { transform: rotate(74deg) }
  78% { transform: rotate(80deg) }
  100% { transform: rotate(70deg) }
}
/* 浮标落水：入水下沉 → 弹起 → 回稳（纯竖向，横向位移由竿尖轨迹给出，不出屏） */
@keyframes ffCast {
  0% { transform: translateY(-12px) scale(.86); }
  26% { transform: translateY(16px) scale(1.06); }
  48% { transform: translateY(-8px) scale(.98); }
  70% { transform: translateY(4px) scale(1); }
  86% { transform: translateY(-2px) }
  100% { transform: translateY(0) }
}
@keyframes ffDip { 0%, 100% { transform: translateY(0) } 40% { transform: translateY(12px) } 70% { transform: translateY(4px) } }

/* ---------- 休闲入口（花园/宠物/钓鱼场） ---------- */
.lx-list { display: flex; flex-direction: column; }
.lx-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  cursor: pointer;
  border-radius: 10px;
  transition: background .15s;
}
.lx-entry + .lx-entry { border-top: 1px solid var(--line); }
.lx-entry:active { background: var(--brand-soft); }
.lx-emoji {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  background: var(--brand-soft);
}
.lx-entry.teal  .lx-emoji { background: var(--teal-soft); }
.lx-entry.amber .lx-emoji { background: var(--amber-soft); }
.lx-entry .chev { color: var(--ink-3); font-size: 20px; font-weight: 600; }
.lx-status {
  display: inline-block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.4;
  padding: 2px 9px;
  border-radius: 999px;
  background: #F3F0EC;
  color: var(--ink-2);
}
.lx-status.teal  { background: var(--teal-soft);  color: var(--teal); }
.lx-status.amber { background: var(--amber-soft); color: var(--amber-dark); }

/* ---------- 宠物空间 · 全屏（.pfs，参考「萌宠小屋」布局） ---------- */
.pfs {
  position: fixed; inset: 0; z-index: 40; overflow: hidden;
  background: linear-gradient(180deg, #FFF3E0 0%, #FFE0BE 62%, #E9CFA6 62.5%, #E2C69A 100%);
}
.pfs .pet-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pfs .pet-scene .pdecor { cursor: grab; }

/* 顶栏标题 pill（返回键/积分 pill 复用 .ff-back / .ff-pill） */
.p-title {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255, 253, 247, .95); border: 2px solid #F2C14E; border-radius: 12px;
  padding: 7px 12px; font-size: 13.5px; font-weight: 800; color: #7A4A10;
  box-shadow: 0 4px 12px rgba(150, 90, 20, .25); white-space: nowrap;
}
.p-topsp { flex: 1 1 auto; }

/* 左侧状态卡（头像 + 名字 + 四项数值） */
.p-stats {
  position: absolute; left: 10px; top: 62px; z-index: 3; width: 150px;
  background: rgba(255, 253, 247, .95); border: 2px solid #FFF; border-radius: 16px;
  padding: 10px 10px 9px; box-shadow: 0 5px 16px rgba(150, 90, 20, .28);
}
.p-stats-h { display: flex; align-items: center; gap: 7px; padding-bottom: 7px; border-bottom: 1.5px dashed #F0E2C8; }
.p-stats-ava { width: 40px; height: 40px; border-radius: 50%; background: #FFF7E0; border: 2px solid #F2C14E; overflow: hidden; flex: 0 0 auto; }
.p-stats-ava svg { width: 100%; height: 100%; display: block; }
.p-stats-nm { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.p-stats-nm b { font-size: 13.5px; color: #5A3A12; }
.p-stats-nm i { font-size: 10px; font-style: normal; color: #B48A3C; font-weight: 700; }
.p-stat { display: flex; align-items: center; gap: 5px; margin-top: 7px; }
.p-stat-ico { width: 21px; height: 21px; border-radius: 50%; background: #FFF3D6; display: flex; align-items: center; justify-content: center; font-size: 11px; flex: 0 0 auto; }
.p-stat-t { font-size: 10.5px; font-weight: 700; color: #7A5A28; flex: 0 0 auto; }
.p-stat-bar { flex: 1 1 auto; height: 6px; border-radius: 99px; background: #F0E6CE; overflow: hidden; }
.p-stat-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FFB35C, #F08A1D); }
.p-stat-bar i.is-full { background: linear-gradient(90deg, #9BD07A, #5FA33E); }
.p-stat-bar i.is-clean { background: linear-gradient(90deg, #7CC7EE, #3E92C4); }
.p-stat-bar i.is-mood { background: linear-gradient(90deg, #FFD35C, #F0A81D); }
.p-stat-bar i.is-bond { background: linear-gradient(90deg, #FF9EB0, #E86A84); }
.p-stat-bar i.is-low { background: linear-gradient(90deg, #FFA94D, #E8590C); }
.p-stat b { font-size: 11px; color: #5A3A12; flex: 0 0 auto; min-width: 20px; text-align: right; }

/* 右侧入口（商店 / 背包 / 布置 / 更多） */
.p-side { position: absolute; right: 10px; top: 64px; z-index: 3; display: flex; flex-direction: column; gap: 10px; }
.p-sbtn {
  width: 50px; height: 50px; border-radius: 16px; border: 2px solid #FFF;
  background: linear-gradient(180deg, #FFFDF6, #F7E6C4);
  box-shadow: 0 4px 12px rgba(150, 90, 20, .3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  cursor: pointer; padding: 0;
}
.p-sbtn span { font-size: 19px; line-height: 1.1; }
.p-sbtn i { font-size: 9px; font-style: normal; font-weight: 800; color: #9A6A20; }
.p-sbtn:active { transform: scale(.93); }

/* 蛋卡 + 提示条 */
.p-egg {
  position: absolute; left: 10px; right: 74px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 3;
  background: rgba(255, 253, 247, .95); border: 2px solid #FFF; border-radius: 14px;
  padding: 10px 12px; box-shadow: 0 5px 16px rgba(150, 90, 20, .28);
}
.p-hint {
  position: absolute; left: 12px; right: 12px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 3;
  text-align: center; font-size: 11.5px; font-weight: 700; color: #8F4A05;
  background: rgba(255, 240, 210, .95); border-radius: 99px; padding: 6px 12px;
  box-shadow: 0 3px 10px rgba(150, 90, 20, .22);
}

/* 底部动作区（喂食 / 玩耍 / 清洁 / 说说话） */
.p-bottom {
  position: absolute; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 3; display: flex; gap: 10px;
}
.p-bottom.is-half .p-act { flex: 1; }
.p-act {
  flex: 1; border: 0; border-radius: 16px; padding: 10px 0 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: linear-gradient(180deg, #FFB35C, #F08A1D);
  box-shadow: 0 5px 14px rgba(180, 90, 10, .4), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.p-act span { font-size: 22px; line-height: 1.1; }
.p-act i { font-size: 12px; font-style: normal; font-weight: 800; color: #FFF; text-shadow: 0 1px 2px rgba(120, 50, 0, .5); }
.p-act:active { transform: scale(.95); }
.p-act.play { background: linear-gradient(180deg, #8FD07A, #55A33E); box-shadow: 0 5px 14px rgba(60, 120, 40, .4), inset 0 1px 0 rgba(255, 255, 255, .45); }
.p-act.clean { background: linear-gradient(180deg, #7CC7EE, #3E92C4); box-shadow: 0 5px 14px rgba(30, 90, 140, .4), inset 0 1px 0 rgba(255, 255, 255, .45); }
.p-act.talk { background: linear-gradient(180deg, #C2A2F0, #8A5FD0); box-shadow: 0 5px 14px rgba(100, 60, 160, .4), inset 0 1px 0 rgba(255, 255, 255, .45); }

/* 布置模式工具条（不遮场景，装饰要拖拽） */
.p-editbar {
  position: absolute; left: 10px; right: 10px; bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 4; background: rgba(255, 253, 247, .97); border: 2px solid #F2C14E;
  border-radius: 14px; padding: 10px 12px; box-shadow: 0 6px 18px rgba(150, 90, 20, .35);
}
.decor-add { display: flex; gap: 6px; overflow-x: auto; }

/* 布置模式隐藏其它 HUD，专心拖拽 */
.pfs.is-edit .p-side, .pfs.is-edit .p-bottom, .pfs.is-edit .p-hint, .pfs.is-edit .p-egg { display: none; }

.pfs .gfs-sheet { z-index: 8; }

/* ================= 成长记录（身高体重） ================= */
.grow-spark { width: 120px; height: 30px; display: block; margin-top: 4px; }
.lbl { display: block; font-size: 11px; color: #B07A3A; margin-bottom: 3px; font-weight: 700; }

/* ================= 钓鱼「发现」结算卡 ================= */
.ff-disc { margin: 10px 0 4px; padding: 12px; border-radius: 14px; background: linear-gradient(180deg, #FFF7E6, #FFEFD2);
  border: 2px dashed var(--dc, #F2A33C); text-align: center; }
.ff-disc-badge { display: inline-block; font-size: 12px; font-weight: 800; color: #B45309; background: #FFE9B0;
  border-radius: 999px; padding: 2px 10px; margin-bottom: 6px; }
.ff-disc-ava { font-size: 46px; line-height: 1; }
.ff-disc-name { font-size: 17px; font-weight: 800; margin-top: 2px; }
.ff-disc-name i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--dc, #6B7280); }
.ff-disc-intro { font-size: 13px; color: #6B5840; margin: 6px 4px 2px; line-height: 1.5; }
.ff-disc-tip { font-size: 11px; color: #B08A4A; margin-top: 6px; }

/* ================= 水生物图鉴 ================= */
.codex-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.codex-cell { border: 1px solid #F0E2CC; border-radius: 12px; padding: 10px 8px; background: #FFFBF3; text-align: center; }
.codex-cell.is-lock { background: #F4F1EA; opacity: .7; }
.codex-ava { font-size: 30px; line-height: 1; }
.codex-name { font-size: 14px; font-weight: 800; margin-top: 2px; }
.codex-intro { font-size: 11px; color: #7A6A55; line-height: 1.45; margin: 4px 2px 6px; }
.codex-tier { font-size: 11px; font-weight: 700; }
.codex-sub { font-size: 10px; color: #9A8A72; margin-top: 2px; line-height: 1.4; }
.codex-img { width: 100%; height: 64px; object-fit: cover; border-radius: 8px; margin-bottom: 4px; background: #EFE9DD; }
.sp-photo { width: 100%; height: 64px; object-fit: cover; border-radius: 8px; margin-bottom: 4px; background: #EFE9DD; }
.ff-disc-img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; margin: 6px auto 0; display: block; background: #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.ff-disc-sub { font-size: 12px; color: #8A6D3B; margin-top: 2px; }