/* =========================================================
   古木长青 · 种树成长（孩子端）—— 类名统一 tg- 前缀防冲突
   色彩复用 style.css 既有变量（--ink/--paper/--accent/--warm 等）；
   模块自有功能色以 --tg-* 自持，不污染全局。
   ========================================================= */
:root{
  --tg-radius:14px;
  --tg-energy:#b8860b; --tg-energy-light:#daa520;
  --tg-fruit:#5a7a5c; --tg-money:#8b6914;
  --tg-red:#a0522d; --tg-gold:#b8860b;
}

/* ---------- 我的树 · 首页（重构布局） ---------- */
/* 场景区：柔和天空→薄荷雾→暖草绿三段过渡，顶部叠暖光晕呼应插画水彩风。
   竖屏高度给到屏高的 67%（2026-10-25 用户口径：树区加高，但别通高）——
   3D 机位按画框倒推，框加高树才真的大一号；原来 438 的矮框里树只占三成屏。
   再矮也由 max() 兜回原来那档，横屏手机与小屏不会被压扁。 */
.tg-scene{position:relative;background:radial-gradient(120% 60% at 78% 8%,rgba(255,243,205,.75),rgba(255,243,205,0) 55%),linear-gradient(180deg,#cbe7f5 0%,#cfe9d8 46%,#b9dca9 100%);min-height:max(calc(min(80vw,400px) * 1.334 + 22px),67vh);min-height:max(calc(min(80vw,400px) * 1.334 + 22px),67dvh);overflow:hidden;margin:0 -16px}

/* 左上 HUD：状况胶囊 + 资源栏从同一处起排，一行放不下就整条换到下一行、仍然左对齐（文档 10.3） */
.tg-hud{position:absolute;top:12px;left:12px;right:12px;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:6px;pointer-events:none}
.tg-hud>*{pointer-events:auto;max-width:100%}
/* 树的状况：一条胶囊，点开看详情 */
.tg-health-pill{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px 0 9px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(255,255,255,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 1px 4px rgba(0,0,0,.08);font:inherit;font-size:12px;font-weight:600;line-height:1;color:var(--ink);white-space:nowrap;cursor:pointer;transition:transform .15s}
.tg-health-pill:active{transform:scale(.96)}
.tg-health-pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tg-health-pill .tg-health-k{font-weight:500;opacity:.72}
.tg-health-pill .tg-health-main{font-weight:700}
.tg-health-pill .tg-health-sep{opacity:.45}
.tg-health-pill .tg-health-sub{font-weight:500;color:var(--ink-2)}
.tg-health-pill.tone-acc{background:var(--accent);border-color:var(--accent);color:#fff}
.tg-health-pill.tone-slow{background:#c98a2b;border-color:#c98a2b;color:#fff}
.tg-health-pill.tone-bad{background:#a8402a;border-color:#a8402a;color:#fff}
.tg-health-pill.tone-acc .tg-health-sub,.tg-health-pill.tone-slow .tg-health-sub,.tg-health-pill.tone-bad .tg-health-sub{color:rgba(255,255,255,.86)}
/* 320 一档：胶囊字号与内距再压一档，让它和资源栏各自一行还留得下 */
@media (max-width:340px){
  .tg-health-pill{font-size:11px;padding:0 9px 0 8px;gap:4px}
}

/* 树的状况浮层 */
/* 状态色令牌：胶囊、浮层大字结论、行内值、虫口计量共用一套（文档 10.4） */
.tone-good{--tone:var(--ink);--tone-soft:rgba(44,62,45,.06);--tone-line:rgba(44,62,45,.13)}
.tone-acc{--tone:var(--accent);--tone-soft:var(--accent-bg);--tone-line:rgba(90,122,92,.26)}
.tone-slow{--tone:#b4791f;--tone-soft:rgba(201,138,43,.13);--tone-line:rgba(201,138,43,.3)}
.tone-bad{--tone:#a8402a;--tone-soft:rgba(168,64,42,.1);--tone-line:rgba(168,64,42,.26)}
.tg-hv.is-muted,.tg-bugmeter.is-muted{--tone:var(--ink-3);--tone-soft:var(--paper-2);--tone-line:var(--line)}
.tg-health-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.tg-health-head h3{margin:0;justify-content:flex-start;font-size:17px}
.tg-health-x{width:28px;height:28px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink-3);cursor:pointer}
.tg-health-x svg{width:14px;height:14px}
.tg-health-hero{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:12px}
/* 结论做成色块牌：字号最大、带档位圆点，一眼看出树现在是什么状态 */
.tg-health-big{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  padding:5px 13px 5px 11px;border:1px solid var(--tone-line);border-radius:13px;
  background:var(--tone-soft);color:var(--tone);
  font-family:var(--f-display);font-size:21px;font-weight:700;line-height:1.25;letter-spacing:.01em;
}
.tg-health-tick{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--tone)}
.tg-health-why{font-size:12px;color:var(--ink-3);line-height:1.6;flex:1;min-width:160px;padding-top:9px}
.tg-health-sec{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.tg-health-lbl{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ink-4);margin-bottom:4px}
.tg-health-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:3px 0;color:var(--ink-3)}
.tg-health-row>span{flex:0 0 auto}
.tg-health-row b{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;color:var(--ink);font-weight:600;text-align:right;overflow-wrap:anywhere}
/* 行内关键值：短结论进胶囊牌，长说明留在牌外，避免整行糊成一块色 */
.tg-hv{max-width:100%;padding:2px 9px;border:1px solid var(--tone-line);border-radius:999px;background:var(--tone-soft);color:var(--tone);font-size:12px;font-weight:700;line-height:1.5;overflow-wrap:anywhere}
.tg-hv-note{font-size:11.5px;font-weight:500;color:var(--ink-3);overflow-wrap:anywhere}
.tg-bugmeter{display:inline-flex;align-items:center;gap:8px;padding:3px 10px 3px 8px;border:1px solid var(--tone-line);border-radius:999px;background:var(--tone-soft)}
.tg-bugmeter-dots{display:inline-flex;gap:4px}
.tg-bugmeter-dots i{width:7px;height:7px;border-radius:50%;border:1px solid var(--tone-line);background:transparent}
.tg-bugmeter-dots i.on{border-color:var(--tone);background:var(--tone)}
.tg-bugmeter-num{font-size:12.5px;font-weight:700;color:var(--tone);font-variant-numeric:tabular-nums}
.tg-health-none{font-size:12px;color:var(--ink-3);margin:4px 0 0}

/* 资源栏：与状况胶囊同属左上 HUD，换行时跟着左对齐 */
.tg-res-bar-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.tg-res-chip{display:inline-flex;align-items:center;gap:3px;background:rgba(255,255,255,.82);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.5);border-radius:16px;padding:4px 10px;font-size:12px;font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.08);cursor:pointer;transition:.15s}
.tg-res-chip:active{transform:scale(.95)}
.tg-res-chip .chip-num{font-size:13px;font-weight:700}
.tg-res-chip .chip-label{font-size:11px;color:var(--ink-3);font-weight:500}
.tg-res-chip.fruit .chip-num{color:var(--tg-fruit)}
.tg-res-chip.money .chip-num{color:var(--tg-money)}
.tg-res-chip.energy .chip-num{color:var(--tg-energy)}

/* 3D 树铺满整个场景区：它自带天空、雾带与时段光，页面底色只在回落 PNG 时露出来 */
.tg-tree3d-slot{position:absolute;inset:0;z-index:2;overflow:hidden}
.tg-tree-frame{width:100%;height:100%;border:0;display:block;background:transparent}

/* 3D 在跑时，叠层容器不许拦指针 —— 它压在画布上面，会把拖视角与点树全吃掉。
   铭牌按钮和访客 sprite 自己要点，单独放回可点。回落 PNG 时整块照常可点（摇树）。 */
.tg-scene.tree3d-on .tg-visual{pointer-events:none}
/* 3D 在跑时铭牌是树干上的一块真木牌（引擎里建的），贴屏按钮整块收掉；回落 PNG 才露出来 */
.tg-scene.tree3d-on .tg-plaque-btn{display:none}
.tg-scene.tree3d-on .tg-egg{pointer-events:auto}
/* 3D 在跑时铭牌由投影锚点定位；摆动改挂到里面的 svg —— 关键帧动的就是 transform，
   留在按钮上会把父页写进去的定位整个盖掉（铭牌因此一直飘在画面左上角）。 */
.tg-scene.tree3d-on .tg-plaque-btn{animation:none}
.tg-scene.tree3d-on .tg-plaque-btn svg{animation:tg-plaque-sway 4.2s ease-in-out infinite;transform-origin:50% 42%}

/* 树的展示区：3:4 竖幅 —— PNG 阶段图与叠层锚定在这里，
   3D 在跑时这块只留叠层容器（方案第 14 节 A 案：为树让出高度）。 */
.tg-visual{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:400px;max-width:80vw;aspect-ratio:3/4;display:flex;align-items:flex-end;justify-content:center;z-index:3}
.tg-tree-wrap{width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center}
.tg-tree-wrap img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.15))}

/* 能量过渡条 */
.tg-energy-bridge{background:linear-gradient(180deg,#b9dca9 0%,var(--paper) 100%);padding:0 16px 16px;margin:0 -16px}
.tg-energy-card{background:var(--raise);border-radius:16px;padding:14px 16px;box-shadow:0 4px 16px rgba(44,62,45,.1),0 1px 4px rgba(44,62,45,.06);border:1px solid rgba(255,255,255,.6);margin-top:-12px;position:relative;z-index:5}
.tg-energy-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-bottom:10px}
.tg-energy-label{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--ink-2);font-weight:500;flex:none}
.tg-energy-label svg{width:15px;height:15px;color:var(--tg-energy)}
.tg-energy-value{font-size:14px;font-weight:700;color:var(--tg-energy);letter-spacing:.5px}
.tg-energy-head-right{display:inline-flex;align-items:center;gap:8px;flex:none;margin-left:auto}
/* 成长阶段入口：从旧左上角徽章移入能量卡 */
.tg-stage-chip{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border:1px solid var(--line);border-radius:10px;background:var(--paper-3);color:var(--ink-2);font:inherit;font-size:12px;font-weight:600;line-height:1.4;cursor:pointer;flex:none;transition:transform .15s,background .15s}
.tg-stage-chip svg:first-child{width:12px;height:12px;color:var(--accent)}
.tg-stage-chip svg:last-child{width:12px;height:12px;opacity:.55}
.tg-stage-chip:active{transform:scale(.95);background:var(--paper-2)}
.tg-bar{height:8px;background:var(--paper-3);border-radius:4px;overflow:hidden;margin-bottom:10px;position:relative}
.tg-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--tg-energy) 0%,var(--tg-energy-light) 100%);border-radius:4px;transition:width .6s ease;position:relative}
.tg-bar-fill::after{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 100%);border-radius:4px 4px 0 0}
/* 营养液生效状态已并入左上角「树的状况」胶囊，能量卡内不再单出提示 */
.tg-energy-footer{font-size:12px;color:var(--ink-2);padding-top:8px;line-height:1.6}
.tg-energy-footer b{color:var(--tg-energy);font-weight:600}
.tg-energy-footer em{font-style:normal;color:var(--accent)}
.tg-energy-hint{font-size:11px;color:var(--ink-3);padding-top:6px;line-height:1.5}
.tg-energy-hint b{color:var(--tg-energy);font-weight:600}
.tg-energy-card{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s,box-shadow .15s}
.tg-energy-card:active{transform:scale(.99)}
.tg-energy-card:focus-visible{outline:2px solid var(--tg-energy);outline-offset:2px}
.tg-energy-entry{display:inline-flex;align-items:center;gap:1px;font-size:12px;font-weight:600;color:var(--tg-energy);flex:none}
.tg-energy-entry svg{width:14px;height:14px}
.tg-energy-label .tg-energy-value{margin-left:6px}

/* 操作区域 */
.tg-actions{padding:8px 16px 16px}
.tg-action-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
/* 今日任务摘要：竖屏不占位（Pad 横屏右列才亮，见末尾 media），勾选走任务页同一个确认框 */
.tg-today{display:none;margin-top:10px;background:var(--raise);border:1px solid rgba(255,255,255,.6);border-radius:16px;padding:12px 14px;box-shadow:0 4px 16px rgba(44,62,45,.1),0 1px 4px rgba(44,62,45,.06)}
.tg-today-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.tg-today-head b{font-size:14px;color:var(--ink)}
.tg-today-count{font-size:12px;color:var(--ink-3)}
.tg-today-more{margin-left:auto;border:none;background:none;color:var(--accent);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:4px 2px}
.tg-today-list{list-style:none;margin:0;padding:0}
.tg-today-item{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid rgba(44,62,45,.07)}
.tg-today-item:first-child{border-top:none}
.tg-today-box{flex:none;width:22px;height:22px;padding:0;border-radius:7px;border:1.5px solid var(--line);background:var(--paper);display:grid;place-items:center;cursor:pointer;color:transparent;transition:.15s}
.tg-today-box svg{width:13px;height:13px}
.tg-today-box:active{transform:scale(.9)}
.tg-today-name{flex:1;min-width:0;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tg-today-rw{flex:none;font-size:12px;font-weight:700;color:var(--tg-energy)}
.tg-today-item.done .tg-today-box{background:var(--tg-energy);border-color:var(--tg-energy);color:#fff}
.tg-today-item.done .tg-today-name{color:var(--ink-3);text-decoration:line-through}
.tg-today-empty{font-size:12px;color:var(--ink-3);padding:6px 0}
.tg-action-btn{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;background:var(--raise);border-radius:var(--tg-radius);padding:12px 8px;box-shadow:0 1px 4px rgba(44,62,45,.06);border:1px solid var(--line);cursor:pointer;transition:.18s}
.tg-action-btn:active{transform:scale(.96)}
.tg-action-btn svg{width:20px;height:20px;color:var(--accent)}
.tg-action-btn .btn-label{font-size:13px;font-weight:600;color:var(--ink)}
.tg-action-badge{position:absolute;top:-4px;right:-4px;background:#e53935;color:#fff;font-size:10px;font-weight:700;line-height:1;padding:3px 6px;border-radius:8px;box-shadow:0 1px 4px rgba(229,57,53,.35)}

/* ---------- 旧样式保留（其他页面可能用到） ---------- */
.tg-hero{display:none}
.tg-energy{display:none}
.tg-res-bar{display:none}
.tg-entries{display:none}
/* 能量卡 */
.tg-energy{background:var(--raise);border-radius:var(--tg-radius);padding:12px 16px;margin:12px 0 0;box-shadow:0 1px 4px rgba(44,62,45,.06);border:1px solid var(--line)}
.tg-energy-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.tg-energy-label{font-size:13px;color:var(--ink-3);display:inline-flex;align-items:center;gap:3px}
.tg-energy-label svg{width:14px;height:14px}
.tg-energy-value{font-size:14px;font-weight:700;color:var(--tg-energy)}
.tg-bar{height:8px;background:var(--paper-3);border-radius:4px;overflow:hidden}
.tg-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--tg-energy),var(--tg-energy-light));border-radius:4px;transition:width .6s ease}
.tg-goal{display:flex;align-items:center;gap:6px;margin-top:8px;background:var(--paper-2);border-radius:10px;padding:7px 10px;font-size:12.5px;font-weight:600;color:var(--ink)}
.tg-goal>svg{flex:none;width:13px;height:13px;color:var(--tg-energy)}
.tg-goal b{color:var(--tg-energy)}
.tg-goal em{font-style:normal;color:var(--accent)}
.tg-hint{font-size:12px;color:var(--ink-4);margin-top:6px;line-height:1.5}
.tg-hint-next{color:var(--tg-fruit);font-weight:500}
.tg-hint-next .tg-fruit-need{color:var(--tg-energy);font-weight:700}
.tg-hint-next .tg-fruit-ready{color:var(--accent);font-weight:700}
/* 资源卡与入口 */
.tg-res-bar{display:flex;gap:10px;padding:12px 0 0}
.tg-res-card{flex:1;background:var(--raise);border-radius:var(--tg-radius);padding:10px;text-align:center;box-shadow:0 1px 4px rgba(44,62,45,.06);border:1px solid var(--line);cursor:pointer;transition:.15s}
.tg-res-card:active{transform:scale(.97)}
.tg-res-num{font-size:20px;font-weight:700;margin:2px 0}
.tg-res-card.fruit .tg-res-num{color:var(--tg-fruit)}
.tg-res-card.money .tg-res-num{color:var(--tg-money)}
.tg-res-label{font-size:12.5px;color:var(--ink-3);letter-spacing:.02em}
.tg-entries{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 0 0}
.tg-entry{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--raise);border-radius:var(--tg-radius);padding:12px;box-shadow:0 1px 4px rgba(44,62,45,.06);border:1px solid var(--line);cursor:pointer;font-size:13px;font-weight:600;color:var(--ink);transition:.18s}
.tg-entry:active{transform:scale(.97)}
.tg-entry svg{width:15px;height:15px;color:var(--accent);flex:none}
.tg-entry-badge{position:absolute;top:-7px;right:-4px;background:#e53935;color:#fff;font-size:10.5px;font-weight:700;line-height:1;padding:4px 8px;border-radius:10px;letter-spacing:.02em;box-shadow:0 1px 4px rgba(229,57,53,.35)}

/* ---------- 二级页通用 ---------- */
.tg-sec{padding-top:14px}
.tg-title{display:flex;align-items:center;gap:5px;font-family:var(--f-display);font-size:20px;font-weight:400;color:var(--ink);margin:0;letter-spacing:-.01em}
.tg-title svg{width:18px;height:18px;flex:none}
.tg-sub{font-size:12px;color:var(--ink-3);margin-bottom:12px;letter-spacing:.02em}
/* 今日任务环形进度 hero：暖金渐变面板，区别于下方白色任务卡 */
.tg-task-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#fdf7e8 0%,#f6ead0 100%);border:1px solid rgba(184,134,11,.2);border-radius:16px;padding:14px 16px;margin-bottom:12px;box-shadow:0 3px 12px rgba(184,134,11,.12)}
.tg-task-hero::after{content:'';position:absolute;top:-40px;right:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(218,165,32,.18) 0%,rgba(218,165,32,0) 70%);pointer-events:none}
.tg-task-ring{flex:none;background:rgba(255,255,255,.65);border-radius:50%;padding:5px;box-shadow:0 1px 4px rgba(184,134,11,.12)}
.tg-task-hero .tg-task-ring circle:first-child{stroke:rgba(184,134,11,.16)}
.tg-task-ring text{font-size:15px;font-weight:700;fill:var(--tg-energy)}
.tg-task-hero-txt{min-width:0;position:relative;z-index:1}
.tg-task-hero-done{font-size:15px;font-weight:700;color:var(--ink)}
.tg-task-hero-done b{color:var(--tg-energy);font-weight:800}
.tg-task-hero-sub{font-size:12px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.tg-task-hero-sub b{color:var(--tg-energy);font-weight:700}
.tg-back{flex:none;width:32px;height:32px;border:1px solid var(--line);background:var(--raise);border-radius:50%;color:var(--ink-3);display:grid;place-items:center;cursor:pointer;transition:.15s;padding:0}
.tg-back svg{width:15px;height:15px}
.tg-back:active{transform:scale(.9);color:var(--accent)}

/* ---------- 任务中心 ---------- */
.tg-streak{display:inline-flex;align-items:center;gap:4px;background:var(--warm);color:var(--tg-energy);padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;margin-bottom:12px;border:1px solid rgba(184,134,11,.12)}
.tg-streak svg{width:14px;height:14px}
.tg-fullday{display:flex;align-items:center;background:var(--accent-light);color:var(--accent);padding:8px 12px;border-radius:10px;font-size:12px;margin-bottom:12px;border:1px solid rgba(90,122,92,.12)}
.tg-fullday svg{width:14px;height:14px;margin-right:4px;flex:none}
.tg-cal-btn{display:inline-flex;align-items:center;gap:4px;background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:5px 10px;font-size:12px;color:var(--ink-3);cursor:pointer;transition:.15s;font-family:var(--f-body);flex:none}
.tg-cal-btn svg{width:13px;height:13px}
.tg-cal-btn:active{transform:scale(.95)}
.tg-task{background:var(--raise);border-radius:var(--tg-radius);padding:14px 16px;margin-bottom:8px;box-shadow:0 1px 4px rgba(44,62,45,.06);border:1px solid var(--line);display:flex;align-items:center;gap:12px;cursor:pointer;transition:.2s}
.tg-task:active{transform:scale(.98)}
.tg-task.done{opacity:.55}
.tg-check{width:24px;height:24px;border-radius:50%;border:2px solid var(--line-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s;color:transparent;font-size:14px;font-weight:700;line-height:1}
.tg-task.done .tg-check{background:var(--accent);border-color:var(--accent);color:#fff}
.tg-task-info{flex:1;min-width:0}
.tg-task-title{font-size:14px;font-weight:500;color:var(--ink)}
.tg-task-meta{font-size:11px;color:var(--ink-4);margin-top:2px}
.tg-task-desc{font-size:12px;color:var(--ink-3);margin-top:3px;line-height:1.5;overflow-wrap:anywhere}
.tg-task-energy{background:var(--warm);color:var(--tg-energy);padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;flex-shrink:0;display:inline-flex;align-items:center;gap:2px}
.tg-task-energy svg{width:12px;height:12px}
.tg-task-reward{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#2e7d32;background:rgba(76,175,80,.1);border-radius:4px;padding:4px 8px;font-weight:600;flex-shrink:0}
.tg-task-divider{text-align:center;font-size:12px;color:var(--ink-3);padding:14px 0 6px;letter-spacing:.06em;font-weight:600}
/* 日历弹窗 */
.tg-cal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1100;align-items:center;justify-content:center}
.tg-cal-overlay.show{display:flex}
.tg-cal{background:var(--raise);border-radius:16px;padding:16px;width:300px;max-width:90vw;animation:tg-modal-in .25s ease}
.tg-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.tg-cal-title{font-weight:600;font-size:15px;color:var(--ink)}
.tg-cal-nav{width:28px;height:28px;border:1px solid var(--line);background:var(--paper-2);border-radius:8px;cursor:pointer;font-size:16px;color:var(--ink-3);line-height:1;padding:0}
.tg-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.tg-cal-week span{font-size:11px;color:var(--ink-4);padding:4px 0;display:block}
.tg-cal-cell{position:relative;padding:8px 0;font-size:13px;border-radius:8px;cursor:pointer;color:var(--ink)}
.tg-cal-cell:hover{background:var(--paper-2)}
.tg-cal-cell.dim{color:var(--ink-4);opacity:.35;pointer-events:none;background:none}
.tg-cal-cell.today{border:1px solid var(--accent);color:var(--accent);font-weight:600}
.tg-cal-cell.sel{background:var(--accent);color:#fff;font-weight:600;border-color:var(--accent)}
.tg-cal-dot{position:absolute;left:50%;transform:translateX(-50%);bottom:2px;width:4px;height:4px;border-radius:50%;background:var(--accent)}
.tg-cal-cell.sel .tg-cal-dot{background:#fff}

/* ---------- 奖励商店 ---------- */
.tg-shop-bal{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.tg-shop-bal b{font-size:17px;font-weight:700;margin:0 1px;font-family:var(--f-display)}
.tg-shop-bal b.f{color:var(--tg-fruit)}
.tg-shop-bal b.m{color:var(--tg-money)}
.tg-shop-tabs{display:flex;background:var(--paper-2);border-radius:10px;padding:3px;margin-bottom:12px;border:1px solid var(--line)}
.tg-shop-tab{flex:1;padding:8px 4px;text-align:center;font-size:12.5px;font-weight:600;color:var(--ink-3);border-radius:8px;cursor:pointer;transition:.18s}
.tg-shop-tab.active{background:var(--raise);box-shadow:0 1px 3px rgba(44,62,45,.08)}
.tg-shop-tab.fruit.active{color:var(--accent)}
.tg-shop-tab.money.active{color:var(--tg-money)}
.tg-reward-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tg-reward{background:var(--raise);border-radius:var(--tg-radius);padding:14px;box-shadow:0 1px 4px rgba(44,62,45,.06);border:1px solid var(--line);text-align:center;cursor:pointer;transition:.2s}
.tg-reward:active{transform:scale(.96)}
.tg-reward-name{font-size:13px;font-weight:500;color:var(--ink);margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tg-reward-cost{display:inline-flex;align-items:center;gap:2px;background:var(--accent-light);color:var(--accent);padding:3px 8px;border-radius:12px;font-size:12px;font-weight:600}
.tg-reward-cost svg{width:12px;height:12px}
.tg-reward-cost.money{background:#f3ecdd;color:var(--tg-money)}
.tg-reward.cant{opacity:.5}
.tg-reward.cant .tg-reward-cost{background:#f5ebe8;color:var(--tg-red)}
.tg-progress{margin-top:6px;height:4px;background:var(--paper-3);border-radius:2px;overflow:hidden}
.tg-progress-fill{height:100%;background:var(--accent);border-radius:2px}
.tg-progress-fill.money{background:var(--tg-money)}

/* ---------- 明细（果实/零用钱共用） ---------- */
.tg-bal-card{background:linear-gradient(135deg,var(--warm) 0%,#ede4d0 100%);border-radius:16px;padding:22px;color:var(--ink);text-align:center;margin-bottom:16px;border:1px solid rgba(184,134,11,.15)}
.tg-bal-card.fruit{background:var(--accent-light);border-color:rgba(90,122,92,.15)}
.tg-bal-card.energy{background:linear-gradient(135deg,#fef9e7 0%,#fdebd0 100%);border-color:rgba(184,134,11,.15)}
.tg-bal-label{font-size:12px;color:var(--ink-3)}
.tg-bal-num{font-size:32px;font-weight:700;color:var(--tg-money);font-family:var(--f-display);margin-top:4px}
.tg-bal-card.fruit .tg-bal-num{color:var(--tg-fruit)}
.tg-bal-card.energy .tg-bal-num{color:var(--tg-energy)}
.tg-history{background:var(--raise);border-radius:var(--tg-radius);padding:16px;box-shadow:0 1px 4px rgba(44,62,45,.06);border:1px solid var(--line)}
.tg-history h3{font-size:14px;margin-bottom:12px;color:var(--ink);font-weight:600}
.tg-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--paper-2);gap:10px}
.tg-item:last-child{border-bottom:none}
.tg-item .d{font-size:13px;color:var(--ink)}
.tg-item .dt{font-size:11px;color:var(--ink-4);margin-top:2px}
.tg-discount{display:inline-block;font-size:10px;color:#b8860b;background:rgba(184,134,11,.1);padding:1px 5px;border-radius:3px;margin-left:4px}
.tg-boost{display:inline-block;font-size:10px;color:#2e7d32;background:rgba(76,175,80,.12);padding:1px 5px;border-radius:3px;margin-left:4px;font-weight:600}
.tg-item .a{font-weight:700;font-size:14px;flex-shrink:0}
.tg-item .a.plus{color:var(--accent)}
.tg-item .a.minus{color:var(--tg-red)}
.tg-empty{padding:32px 12px;text-align:center;color:var(--ink-4);font-size:12.5px}

/* ---------- 弹窗（挂 body 顶层，不受页面重渲染影响） ---------- */
.tg-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;align-items:center;justify-content:center}
.tg-overlay.show{display:flex}
.tg-modal{background:var(--raise);border-radius:16px;padding:24px;width:320px;max-width:90vw;text-align:center;animation:tg-modal-in .3s ease}
.tg-modal.tall{max-height:76vh;overflow-y:auto;text-align:left}
@keyframes tg-modal-in{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.tg-modal h3{font-size:18px;margin-bottom:8px;color:var(--ink);font-weight:700;display:flex;align-items:center;justify-content:center;gap:4px}
.tg-modal h3 svg{width:20px;height:20px;flex:none}
.tg-modal p{font-size:13px;color:var(--ink-2);margin-bottom:8px;line-height:1.7}
/* 虫害详情里的「为什么会长虫」：最近几条坏习惯，只读 */
.tg-why-title{font-size:12px;font-weight:700;color:var(--ink-3);margin-top:12px;text-align:left}
.tg-why{list-style:none;margin:6px 0 0;padding:8px 12px;background:var(--paper-2);border-radius:10px;font-size:12px;color:var(--ink-3);text-align:left}
.tg-why li{display:flex;justify-content:space-between;gap:10px;padding:4px 0}
.tg-why li+li{border-top:1px dashed var(--line)}
.tg-why li span:first-child{color:var(--ink-2);font-weight:600;min-width:0;overflow-wrap:anywhere}
.tg-why li span:last-child{flex:none;white-space:nowrap}
.tg-btn-row{display:flex;gap:8px;margin-top:14px}
.tg-btn{flex:1;padding:10px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--f-body);transition:.15s}
.tg-btn.cancel{background:var(--paper-2);color:var(--ink-3)}
.tg-btn.confirm{background:var(--accent);color:#fff}
.tg-btn:active{transform:scale(.97)}
.tg-btn:disabled{opacity:.45;cursor:default;transform:none}
.tg-modal label{font-size:12px;color:var(--ink-3);display:block;text-align:left;margin-top:8px}
.tg-modal input,.tg-modal select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin:4px 0 8px;font-size:15px;color:var(--ink);background:var(--paper-2);font-family:var(--f-body)}
/* 物品确认大卡片（合成/使用二次确认：图标+结果描述+消耗清单） */
.tg-modal.tg-item-modal{width:360px;padding:0;overflow:hidden;text-align:center}
.tg-item-card-top{padding:28px 24px 4px}
.tg-item-card-icon{width:84px;height:84px;margin:0 auto 12px;border-radius:50%;background:var(--accent-light);color:var(--accent);display:flex;align-items:center;justify-content:center}
.tg-item-card-icon svg{width:40px;height:40px}
.tg-item-card-title{font-size:18px;font-weight:700;color:var(--ink)}
.tg-item-card-qty{margin-left:6px;font-size:14px;font-weight:700;color:var(--accent)}
.tg-item-card-sub{margin-top:3px;font-size:12px;color:var(--ink-3)}
.tg-item-card-body{padding:6px 24px 0;text-align:left}
.tg-item-card-sec{margin:12px 0 6px;font-size:12px;color:var(--ink-3);font-weight:500}
.tg-item-card-effects{display:flex;flex-direction:column;gap:6px}
.tg-ic-effect{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--ink-2);line-height:1.5}
.tg-ic-effect svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--accent)}
.tg-item-card-cost{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tg-cost-note{font-size:11px;color:var(--ink-3)}
.tg-ic-mini{display:inline-flex}
.tg-ic-mini svg{width:13px;height:13px}
.tg-item-card .tg-btn-row{margin:18px 0 0;padding:0 24px 22px}
.tg-warn{margin-top:12px;padding:10px 12px;background:var(--warm);border:1px solid rgba(184,134,11,.25);border-radius:10px;font-size:12.5px;color:#8a6512;line-height:1.6;text-align:left}
/* 成长阶段说明 */
.tg-stage-intro{font-size:12.5px;color:var(--ink-2);margin:-4px 0 16px;line-height:1.7}
.tg-stage-list{position:relative;padding-left:24px}
.tg-stage-list::before{content:'';position:absolute;left:6px;top:16px;bottom:16px;width:2px;background:var(--line);border-radius:1px}
.tg-stage-item{position:relative;padding:8px 6px 8px 4px;cursor:pointer}
.tg-stage-item:not(.cur):hover{background:var(--paper-3);border-radius:10px}
.tg-stage-item .tg-dot{position:absolute;left:-24px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--raise);border:2px solid var(--line)}
.tg-stage-item.done .tg-dot{background:var(--accent);border-color:var(--accent)}
.tg-stage-item.cur{background:var(--accent-bg);border-radius:10px}
.tg-stage-item.cur .tg-dot{background:var(--tg-energy);border-color:var(--tg-energy);box-shadow:0 0 0 3px rgba(184,134,11,.15)}
.tg-si-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.tg-si-name{font-size:14px;font-weight:700;color:var(--ink)}
.tg-cur-tag{display:inline-block;background:var(--tg-energy);color:#fff;font-size:10px;line-height:1;padding:3px 8px;border-radius:8px;margin-left:6px;font-weight:600;vertical-align:1px}
.tg-si-need{font-size:11.5px;font-weight:600;color:var(--tg-energy);white-space:nowrap}
.tg-si-goal{font-size:12px;color:var(--ink-3);margin-top:3px}
/* 阶段预览：行内手风琴展开该阶段树形态 */
.tg-stage-preview{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.tg-stage-preview>.tg-sp-clip{overflow:hidden;min-height:0}
.tg-stage-item.open .tg-stage-preview{grid-template-rows:1fr}
.tg-sp-box{margin:8px 2px 4px;background:var(--paper-3);border:1px solid var(--line);border-radius:12px;padding:12px 12px 10px;text-align:center}
.tg-sp-box img{width:150px;height:150px;object-fit:contain}
.tg-sp-cap{font-size:11.5px;color:var(--ink-3);margin-top:6px}
.tg-endless{margin-top:14px;background:var(--warm);border-radius:10px;padding:10px 12px;font-size:11.5px;color:var(--ink-2);line-height:1.7}

/* ---------- 动画 ---------- */
.tg-fly{position:fixed;left:50%;top:45%;pointer-events:none;z-index:999;font-size:16px;font-weight:700;color:var(--tg-energy);animation:tg-fly-up 1s ease forwards;display:flex;align-items:center;gap:2px}
.tg-fly.minus{color:var(--tg-red)}
.tg-fly svg{width:12px;height:12px}
@keyframes tg-fly-up{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-80px) scale(1.5)}}
.tg-confetti{position:fixed;top:-10px;width:8px;height:8px;pointer-events:none;z-index:3000;animation:tg-confetti-fall 2s ease forwards}
@keyframes tg-confetti-fall{0%{opacity:1;transform:translateY(0) rotate(0deg)}100%{opacity:0;transform:translateY(100vh) rotate(720deg)}}
.tg-evo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:2000;align-items:center;justify-content:center;flex-direction:column}
.tg-evo.show{display:flex}
.tg-evo-text{color:#fff;font-size:24px;font-weight:700;animation:tg-evo-pulse 1s ease infinite;display:flex;align-items:center;gap:4px}
.tg-evo-text svg{width:20px;height:20px}
.tg-evo-sub{color:var(--tg-energy-light);font-size:14px;margin-top:8px;text-align:center;padding:0 24px;line-height:1.7}
.tg-evo-tip{color:rgba(255,255,255,.4);font-size:12px;margin-top:20px}
@keyframes tg-evo-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.tg-spark{position:absolute;left:50%;top:50%;width:6px;height:6px;background:var(--tg-energy-light);border-radius:50%;animation:tg-spark-fly 1.5s ease infinite}
@keyframes tg-spark-fly{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}

/* ---------- 分页控件 ---------- */
.tg-pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:8px 0}
.tg-pager button{padding:6px 14px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);font-size:13px;cursor:pointer;transition:.15s;font-family:var(--f)}
.tg-pager button:hover:not(:disabled){background:var(--paper-2)}
.tg-pager button:disabled{opacity:.4;cursor:default}
.tg-pager .pager-info{font-size:13px;color:var(--ink-3)}

/* ---------- 虫害状态已并入左上角「树的状况」胶囊与浮层（文档 10） ---------- */

/* ---------- 虫子叠加层（文档 8.3.5：虫子叠加层 + CSS 飘动动画） ---------- */
/* 气泡要探出虫子头顶，这一层不能裁 */
.tg-bug-layer{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:2;overflow:visible}
/* 虫位（树图 512x512 contain 贴底：树冠约 8%~83% 宽 / 13%~68% 高，树干约 44%~59% 宽）
   虫口与坏习惯记录同频后是 3/6/9 只，7~9 号是这次新增的虫位 */
.tg-bug-slot{position:absolute;width:34px;height:26px}
.tg-bug-slot.big{width:44px;height:34px}
.tg-bug-slot-1{top:30%;left:30%}
.tg-bug-slot-2{top:44%;right:22%}
.tg-bug-slot-3{top:22%;left:52%}
.tg-bug-slot-4{bottom:36%;left:27%}
.tg-bug-slot-5{top:52%;right:31%}
.tg-bug-slot-6{bottom:24%;left:55%}
/* 7~9 号位是「最近 3 只」常落的地方，彼此要拉开，气泡才不会叠在一起 */
.tg-bug-slot-7{top:26%;right:26%}
.tg-bug-slot-8{top:30%;left:14%}
.tg-bug-slot-9{top:48%;right:12%}
/* 待发作散虫（文档 9.5）：最多 2 只，尺寸小一档、外圈虚线，落在树冠偏下与树干附近 */
.tg-bug-slot-p1{top:58%;left:38%;width:27px;height:21px}
.tg-bug-slot-p2{top:64%;right:33%;width:27px;height:21px}
/* 爬行动画挂在虫身上，槽位与气泡钉住不动，气泡里的字才不会晃 */
.tg-bug-slot-1 .tg-bug{animation:tg-bug-crawl1 3s ease-in-out infinite}
.tg-bug-slot-2 .tg-bug{animation:tg-bug-crawl2 3.5s ease-in-out infinite .5s}
.tg-bug-slot-3 .tg-bug{animation:tg-bug-crawl3 2.8s ease-in-out infinite 1s}
.tg-bug-slot-4 .tg-bug{animation:tg-bug-crawl1 3.2s ease-in-out infinite 1.5s}
.tg-bug-slot-5 .tg-bug{animation:tg-bug-crawl2 2.6s ease-in-out infinite .3s}
.tg-bug-slot-6 .tg-bug{animation:tg-bug-crawl3 3s ease-in-out infinite .8s}
.tg-bug-slot-7 .tg-bug{animation:tg-bug-crawl2 3.1s ease-in-out infinite 1.2s}
.tg-bug-slot-8 .tg-bug{animation:tg-bug-crawl1 2.7s ease-in-out infinite .9s}
.tg-bug-slot-9 .tg-bug{animation:tg-bug-crawl3 3.3s ease-in-out infinite .4s}
.tg-bug-slot-p1 .tg-bug{animation:tg-bug-crawl4 3.4s ease-in-out infinite}
.tg-bug-slot-p2 .tg-bug{animation:tg-bug-crawl4 3.8s ease-in-out infinite .4s}
/* 内联 SVG 虫子（文档 9.5）：实心色块毛毛虫一枚，不描边；配色画在 SVG 里，状态改用尺寸与透明度区分 */
.tg-bug{position:absolute;inset:0;width:100%;height:100%;--bug-line:rgba(38,48,33,.45);opacity:.92;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}
/* 极淡的深色描边：八向 1px 硬投影叠出一圈轮廓。走 drop-shadow 而不是 stroke，
   是因为虫身由多个圆叠成，描边会在重叠处露出内部弧线；投影只认整体外轮廓 */
.tg-bug svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 0 var(--bug-line)) drop-shadow(0 -1px 0 var(--bug-line)) drop-shadow(1px 0 0 var(--bug-line)) drop-shadow(-1px 0 0 var(--bug-line)) drop-shadow(.7px .7px 0 var(--bug-line)) drop-shadow(-.7px .7px 0 var(--bug-line)) drop-shadow(.7px -.7px 0 var(--bug-line)) drop-shadow(-.7px -.7px 0 var(--bug-line))}
/* 严重虫害（文档 8.3.5.2）：虫子放大加深，密度感更强（尺寸走 .tg-bug-slot.big） */
.tg-bug-slot.big .tg-bug{opacity:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)) saturate(1.35) brightness(.94)}
/* 待发作散虫：淡一档、饱和度压一点，再加虚线圈，表示「还没发作」（灰绿配色本就淡，压太狠会看不见） */
.tg-bug-pending{opacity:.88;filter:saturate(.82);outline:1.5px dashed rgba(139,105,20,.7);outline-offset:4px;border-radius:50%}
/* 常驻来源气泡：这只虫是哪条坏习惯换来的（文档 9.5）
   槽位只有 34px 宽，绝对定位的气泡必须按内容定宽，否则会被槽宽压成竖条。
   离槽 7px 不能再加：2 号位（挂上方）与 3 号位（挂下方）的两只气泡只隔 6px，
   一起抬到 14px 实测会互相压住 10.9×7.7；压住虫的锅改由爬行动画让（最多上 2px / 下 3px） */
.tg-bug-note{
  position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%);
  width:max-content;max-width:112px;padding:3px 7px;border-radius:8px;background:rgba(74,51,36,.92);
  color:#fdf6ea;font-size:11px;line-height:1.35;font-weight:500;text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;
}
.tg-bug-note::after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);border:4px solid transparent;border-top-color:rgba(74,51,36,.92)}
/* 最高的一只虫（3 号位在树冠顶上）气泡改挂下方，免得顶出场景 */
.tg-bug-slot-3 .tg-bug-note{top:calc(100% + 7px);bottom:auto}
.tg-bug-slot-3 .tg-bug-note::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:rgba(74,51,36,.92)}
/* 第 3 只落下的合流：虫群弹入 + 一层暖光扩散（由 fillHome 临时挂 .tg-bug-merge） */
.tg-bug-merge .tg-bug{animation:tg-bug-merge .9s ease-in forwards}
.tg-bug-merge::after{content:'';position:absolute;left:50%;top:50%;width:70%;height:70%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,183,77,.5),transparent 65%);animation:tg-bug-flash .9s ease-out forwards;pointer-events:none}
@keyframes tg-bug-merge{
  0%{opacity:.35;transform:scale(.55)}
  35%{opacity:1;transform:scale(1.25)}
  100%{opacity:.9;transform:scale(1)}
}
@keyframes tg-bug-flash{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  35%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}
}
/* 爬行动画：横向照旧 ±12px 游走，纵向只允许 2px 上 / 3px 下、转身 ±10°、缩放不超过 1。
   预算是气泡离槽 7px：34×26 的虫身转 10° 会把外接框抬高 2.75px（严重虫害 44×34 是 3.55px），
   再加 2px 上浮就到 6.3px，再大一点就会被自己的气泡盖住（2026-10-22 实测 -18px 时压住 357px²） */
@keyframes tg-bug-crawl1{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}
  20%{transform:translate(8px,-2px) rotate(10deg) scale(1)}
  40%{transform:translate(-6px,2px) rotate(-8deg) scale(.95)}
  60%{transform:translate(12px,-1px) rotate(10deg) scale(.98)}
  80%{transform:translate(-4px,3px) rotate(-5deg) scale(1)}
}
@keyframes tg-bug-crawl2{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}
  25%{transform:translate(-10px,2px) rotate(-10deg) scale(.96)}
  50%{transform:translate(6px,-2px) rotate(8deg) scale(1)}
  75%{transform:translate(-8px,1px) rotate(-10deg) scale(.98)}
}
/* 3 号位的气泡挂在虫身下方，所以往下也只能 3px */
@keyframes tg-bug-crawl3{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  30%{transform:translate(10px,-2px) rotate(10deg)}
  60%{transform:translate(-8px,3px) rotate(-10deg)}
  80%{transform:translate(5px,1px) rotate(6deg)}
}
/* 待发作散虫外圈还有一圈 5.5px 的虚线：一律不往上飘，转身也压到 6° 以内 */
@keyframes tg-bug-crawl4{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}
  30%{transform:translate(9px,4px) rotate(6deg) scale(.98)}
  55%{transform:translate(-7px,6px) rotate(-6deg) scale(1)}
  80%{transform:translate(4px,2px) rotate(4deg) scale(.97)}
}
@keyframes tg-bug-wiggle{
  0%,100%{transform:rotate(0deg)}
  25%{transform:rotate(8deg)}
  75%{transform:rotate(-8deg)}
}

/* ---------- 营养液光效（光晕+粒子+底部光环+星光） ---------- */
/* 光晕：多层叠加 + 呼吸脉冲 */
.nutrient-glow{animation:tg-nutrient-pulse 2.5s ease-in-out infinite}
.nutrient-glow-lv1{filter:drop-shadow(0 0 12px rgba(165,214,167,.7)) drop-shadow(0 0 25px rgba(129,199,132,.4))}
.nutrient-glow-lv2{filter:drop-shadow(0 0 16px rgba(197,225,165,.75)) drop-shadow(0 0 30px rgba(139,195,74,.45)) drop-shadow(0 0 5px rgba(220,237,140,.5))}
.nutrient-glow-lv3{filter:drop-shadow(0 0 20px rgba(255,224,130,.8)) drop-shadow(0 0 40px rgba(255,193,7,.5)) drop-shadow(0 0 8px rgba(255,235,59,.6))}
@keyframes tg-nutrient-pulse{
  0%,100%{filter:brightness(1) drop-shadow(0 0 12px rgba(76,175,80,.5))}
  50%{filter:brightness(1.08) drop-shadow(0 0 22px rgba(76,175,80,.75))}
}
/* 粒子层：与虫子层同级，absolute 全覆盖 */
.tg-nutrient-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:hidden}
/* 底部光环：树根处的椭圆光斑 */
.tg-nutrient-aura{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);width:70%;height:18%;border-radius:50%;background:radial-gradient(ellipse,var(--aura-color,rgba(165,214,167,.45)) 0%,transparent 70%);animation:tg-aura-breathe 3s ease-in-out infinite;filter:blur(4px)}
@keyframes tg-aura-breathe{
  0%,100%{opacity:.6;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.1)}
}
/* 单个粒子：较大圆点带自身发光，从底部上浮 */
.tg-nutrient-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--dot-color,#a5d6a7);box-shadow:0 0 6px 2px var(--dot-color,#a5d6a7);opacity:0;animation:tg-dot-float 3.5s ease-in-out infinite}
.tg-nutrient-dot-1{left:20%;bottom:12%;animation-delay:0s;animation-duration:3.2s}
.tg-nutrient-dot-2{left:50%;bottom:18%;animation-delay:0.7s;animation-duration:3.6s}
.tg-nutrient-dot-3{left:75%;bottom:8%;animation-delay:1.4s;animation-duration:3.8s}
.tg-nutrient-dot-4{left:35%;bottom:22%;animation-delay:2.1s;animation-duration:3.4s}
.tg-nutrient-dot-5{left:65%;bottom:15%;animation-delay:0.3s;animation-duration:4s}
.tg-nutrient-dot-6{left:15%;bottom:20%;animation-delay:1.8s;animation-duration:3.5s}
.tg-nutrient-dot-7{left:80%;bottom:14%;animation-delay:0.9s;animation-duration:3.7s}
.tg-nutrient-dot-8{left:45%;bottom:10%;animation-delay:2.5s;animation-duration:3.3s}
@keyframes tg-dot-float{
  0%{opacity:0;transform:translateY(0) scale(.5)}
  10%{opacity:1;transform:translateY(-8px) scale(1.1)}
  50%{opacity:.85;transform:translateY(-45px) scale(1)}
  85%{opacity:.5;transform:translateY(-80px) scale(.8)}
  100%{opacity:0;transform:translateY(-100px) scale(.4)}
}
/* 星光闪烁：十字星形 */
.tg-nutrient-star{position:absolute;width:4px;height:4px;background:var(--star-color,#fff);opacity:0;animation:tg-star-twinkle 2s ease-in-out infinite;clip-path:polygon(50% 0%,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0% 50%,40% 40%)}
.tg-nutrient-star-1{left:18%;top:25%;animation-delay:0s;animation-duration:2.2s;width:6px;height:6px}
.tg-nutrient-star-2{left:72%;top:18%;animation-delay:0.8s;animation-duration:1.8s}
.tg-nutrient-star-3{left:55%;top:35%;animation-delay:1.5s;animation-duration:2.5s;width:5px;height:5px}
.tg-nutrient-star-4{left:30%;top:15%;animation-delay:0.4s;animation-duration:2s}
.tg-nutrient-star-5{left:82%;top:40%;animation-delay:1.1s;animation-duration:1.9s;width:5px;height:5px}
.tg-nutrient-star-6{left:42%;top:28%;animation-delay:1.8s;animation-duration:2.3s}
@keyframes tg-star-twinkle{
  0%,100%{opacity:0;transform:scale(.3) rotate(0deg)}
  30%{opacity:1;transform:scale(1.2) rotate(30deg)}
  50%{opacity:.9;transform:scale(1) rotate(45deg)}
  70%{opacity:1;transform:scale(1.1) rotate(60deg)}
}

/* ---------- 我的背包（文档 8.3.5.5） ---------- */
.tg-pharm-pest{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#fff3e0,#ffe0b2);border:1px solid #ffb74d;border-radius:12px;padding:12px 16px;font-size:13px;color:#e65100;margin-bottom:14px;font-weight:500}
.tg-pharm-pest .tg-pharm-pest-ic{width:20px;height:20px;flex:none;animation:tg-bug-wiggle 1.2s ease-in-out infinite}
.tg-pharm-pest .tg-pharm-pest-ic svg{width:20px;height:20px;display:block}
.tg-pharm-pest > span:last-child{flex:1;line-height:1.4}
/* 只有待发作散虫时走中性提示，不借用虫害的橙色警报 */
.tg-pharm-pest.is-warn{background:linear-gradient(135deg,#faf6ea,#f2ead6);border-color:#d9c9a3;color:#7a5c2e}

/* 统一分节标题：左侧主色竖条强调，分组边界更明显 */
.tg-sec-title{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink-2);margin:4px 2px 8px;letter-spacing:.02em}
.tg-sec-title::before{content:'';width:3px;height:12px;border-radius:2px;background:var(--accent)}
.tg-pharm-inv-card{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:14px}
/* 背包网格卡片（3列，图标+名称，整卡可点击弹大卡片） */
.tg-bag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tg-bag-card{background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;position:relative;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.tg-bag-card:active{transform:scale(.96);box-shadow:0 2px 8px rgba(0,0,0,.12)}
/* 数量角标：主色 chip + 白字，显著高于卡片背景 */
.tg-bag-qty{position:absolute;top:8px;right:8px;font-size:13px;font-weight:700;color:#fff;background:var(--accent);border-radius:9px;padding:2px 8px;min-width:26px;text-align:center;line-height:1.3;letter-spacing:.02em}
/* 图标区 */
.tg-bag-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.tg-bag-icon svg{width:26px;height:26px}
/* 不同物品图标底色 */
.icon-spray{background:#e3f2fd;color:#1565c0}
.icon-bottle{background:#fff8e1;color:#f57f17}
.icon-herb{background:#e8f5e9;color:#2e7d32}
.icon-powder{background:#f3e5f5;color:#7b1fa2}
/* 名称 */
.tg-bag-name{font-size:12px;font-weight:600;color:var(--ink);text-align:center;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* 物品操作已改为整卡点击弹确认大卡片，卡片不再内嵌按钮 */
/* 物料色点：纯CSS实现，跨设备一致（草药=绿、魔法粉=紫），供配方chips与任务奖励用 */
.tg-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tg-dot.herb{background:#66bb6a}
.tg-dot.powder{background:#ba68c8}
/* 当前生效的营养液状态条 */
.tg-pharm-active{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;margin-bottom:12px;font-size:13px;font-weight:500}
.tg-pharm-active-lv1{background:rgba(165,214,167,.3);border:1px solid #a5d6a7;color:#2e7d32}
.tg-pharm-active-lv2{background:rgba(197,225,165,.3);border:1px solid #c5e1a5;color:#33691e}
.tg-pharm-active-lv3{background:rgba(255,224,130,.3);border:1px solid #ffe082;color:#f57f17}
.tg-pharm-active-icon{width:8px;height:8px;border-radius:50%;background:currentColor;animation:tg-pulse 2s infinite}
@keyframes tg-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
/* 营养液配方卡片左边框高亮 */
.tg-pharm-recipe-nutrient{border-left:3px solid var(--accent)}

/* 合成配方区（公式化：成品 ← 原料chips） */
/* 配方卡弱化为线框式（透明底），与背包实底卡形成层次区分 */
.tg-pharm-recipe{background:transparent;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.tg-pharm-recipe:last-child{margin-bottom:0}
/* 合成按钮独立右列、随整卡垂直居中：与背包行“使用”按钮同心智 */
.tg-pharm-recipe-main{min-width:0;flex:1}
.tg-pharm-recipe-name{font-size:14px;font-weight:700;margin-bottom:3px}
.tg-pharm-recipe-effect{font-size:12.5px;font-weight:600;color:#1b5e20;background:rgba(76,175,80,.14);border-radius:8px;padding:5px 10px;line-height:1.5;display:inline-block}
.tg-pharm-recipe-effect b{font-weight:700;color:#2e7d32}
.tg-pharm-recipe-formula{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:10px}
.tg-pharm-formula-label{font-size:12px;color:var(--ink-2);font-weight:600}
.tg-mat-chip{display:inline-flex;align-items:center;gap:5px;background:var(--paper);border:1.5px solid var(--line);border-radius:8px;padding:4px 9px;font-size:12px;color:var(--ink-2);flex-shrink:0}
.tg-mat-chip .tg-mat-count{font-weight:700;color:var(--ink-3)}
.tg-mat-chip.ok{border-color:#66bb6a;background:rgba(76,175,80,.1)}
.tg-mat-chip.ok .tg-mat-count{color:#2e7d32}
.tg-mat-chip.lack{opacity:.7}
.tg-mat-plus{font-size:12px;color:var(--ink-3);font-weight:700;flex-shrink:0}
/* 正方形按钮：上魔法星图标、下“合成”文字（flex column 居中） */
.tg-btn.synth{background:var(--accent);color:#fff;border:none;border-radius:10px;width:44px;height:44px;padding:0;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;flex:none}
.tg-btn.synth svg{width:18px;height:18px;display:block}
.tg-synth-label{font-size:10px;font-weight:600;line-height:1.1;letter-spacing:.02em}
.tg-btn.synth:disabled{opacity:.35;cursor:default;background:#bbb}
.tg-btn.synth:active:not(:disabled){transform:scale(.95)}

/* 原料任务区 */
.tg-pharm-tasks-wrap{margin-bottom:14px}
.tg-pharm-tasks-title{font-size:12px;font-weight:700;color:var(--ink-3);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em}
.tg-pharm-task{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.tg-pharm-task:last-child{margin-bottom:0}
.tg-pharm-task-left{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;flex:1;min-width:0}
.tg-pharm-task-title{font-size:13px;font-weight:600;line-height:1.45;word-break:break-word}
.tg-pharm-task-reward{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#2e7d32;background:rgba(76,175,80,.1);border-radius:4px;padding:2px 6px;font-weight:600;flex-shrink:0}
.tg-pharm-task .tg-btn.confirm{background:#4caf50;color:#fff;border:none;border-radius:8px;padding:5px 14px;font-size:12px;font-weight:600;cursor:pointer;flex-shrink:0}
.tg-pharm-task .tg-btn.confirm:active{transform:scale(.95)}

/* 去做任务获取原料引导按钮 */
/* 悬浮任务按钮：移出滚动区固定在屏幕底部，内容从其下方滚过 */
.tg-pharm-task-dock{flex:none;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(250,250,247,0),var(--paper) 36%)}
/* 按钮改为内容自适应宽度、居中展示，不再通栏占满整行 */
.tg-pharm-task-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:fit-content;margin:0 auto;padding:13px 30px;background:linear-gradient(135deg,#5a7a5c,#6b8f6d);color:#fff;border-radius:14px;font-size:15px;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 2px 8px rgba(90,122,92,.25);white-space:nowrap}
.tg-pharm-task-btn:active{transform:scale(.97);box-shadow:0 1px 4px rgba(90,122,92,.2)}
.tg-pharm-task-btn svg{width:18px;height:18px}

/* ---------- 古树铭牌：树上小木牌入口 ---------- */
.tg-plaque-btn{position:absolute;z-index:7;width:36px;height:36px;padding:0;border:none;background:none;cursor:pointer;
  transform-origin:50% 8%;pointer-events:auto;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 1px 2px rgba(255,255,255,.9)) drop-shadow(0 2px 3px rgba(44,62,45,.28));
  animation:tg-plaque-sway 4.2s ease-in-out infinite}
.tg-plaque-btn svg{width:100%;height:100%;display:block}
.tg-plaque-btn:active{animation:none;transform:scale(.88)}
/* 小树时期立在树旁，长成后钉在树干左侧 */
.tg-plaque-btn.base{left:50%;margin-left:-112px;bottom:6%}
.tg-plaque-btn.trunk{left:50%;margin-left:-72px;bottom:26%}
@keyframes tg-plaque-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@media (prefers-reduced-motion:reduce){.tg-plaque-btn{animation:none}}

/* ---------- 古树铭牌：居中弹层 ---------- */
.tg-plaque-overlay{z-index:1100}
/* 从铭牌进入的改名框要压在铭牌层之上 */
.tg-overlay.tg-modal-raise{z-index:1250}
.tg-plaque-card{position:relative;width:360px;max-width:92vw;background:var(--raise);border-radius:20px;
  padding:14px 14px 16px;box-shadow:0 18px 48px rgba(20,30,20,.28);animation:tg-modal-in .28s ease}
.tg-plaque-x{position:absolute;top:10px;right:10px;z-index:3;width:28px;height:28px;padding:0;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.82);color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.tg-plaque-x svg{width:13px;height:13px}
.tg-plaque-x:active{transform:scale(.9);background:var(--paper-3)}
.tg-plaque-stage{position:relative;height:clamp(180px,34vh,252px);border-radius:14px;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,#fdf6e4 0%,#f0e0c2 55%,#e2cca3 100%)}
.tg-plaque-frame{position:absolute;inset:0;width:100%;height:100%;border:none;background:transparent;display:block}
.tg-plaque-hint{margin-top:9px;text-align:center;font-size:11px;color:var(--ink-3)}
.tg-plaque-rename{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:10px;padding:10px;
  border:1px solid var(--line);border-radius:10px;background:var(--paper-2);color:var(--ink);
  font-family:var(--f-body);font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.tg-plaque-rename svg{width:13px;height:13px;color:var(--ink-2)}
.tg-plaque-rename:active{transform:scale(.98);background:var(--paper-3)}

/* 3D 不可用时的 CSS 简版铭牌 */
.tg-plaque-fb-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.tg-plaque-fb{width:232px;height:144px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#f6e8c8 0%,#e8d3a9 100%);border:5px solid #7a5230;
  box-shadow:0 12px 24px rgba(71,47,22,.3),inset 0 0 0 2px rgba(243,227,191,.85),inset 0 0 22px rgba(122,82,48,.2);
  cursor:grab;touch-action:none;transform-style:preserve-3d;transition:transform .1s linear}
.tg-plaque-fb:active{cursor:grabbing}
.tg-fb-kicker{font-size:9px;letter-spacing:.22em;color:rgba(112,79,43,.75);font-weight:600}
.tg-fb-name{font-family:"Songti SC","STSong","SimSun",serif;font-size:26px;line-height:1.2;color:#3d2b18;font-weight:700;max-width:200px;text-align:center}
.tg-fb-rule{width:96px;height:1px;background:rgba(122,82,48,.55);margin:6px 0 5px;position:relative}
.tg-fb-rule::after{content:'';position:absolute;left:50%;top:-2.5px;width:6px;height:6px;margin-left:-3px;background:rgba(122,82,48,.7);transform:rotate(45deg)}
.tg-fb-age{font-size:12.5px;color:#5a4128;font-weight:600}
.tg-fb-stage{font-size:10.5px;color:rgba(112,79,43,.82);margin-top:2px}

/* ---------- 平板适配：内容收窄居中，不随屏宽拉伸 ---------- */
@media(min-width:768px){
  .tg-scene,.tg-energy-bridge,.tg-actions,.tg-hero,.tg-energy,.tg-res-bar,.tg-entries,.tg-sec,.tg-bal-card,.tg-history{width:100%;max-width:480px;margin-left:auto;margin-right:auto}
  /* 弹窗在 pad 上微加宽，与内容区比例协调 */
  .tg-cal{width:320px}
  .tg-modal{width:360px}
}

/* ---------- Pad 横屏：树区独占左半屏通高，能量与操作挪到右列 ----------
   门槛只认「横屏 + 平板宽度」（≥900）：iPhone 横屏 844 宽不套这套，右列会挤成两行。
   场景区 sticky 在左、右列照常整页滚；3D 机位由 ResizeObserver 自动重算，引擎不用改。
   树区从 56% 收到 40%（2026-10-25 用户口径：pad 把显示区域调窄）——原来 720 宽的框里
   冠幅只占六成，两侧各空出一条天与地；收到 40% 后框的宽高比贴近树本身的比例。
   两列作为一个整体居中，右边不会因为树区变窄多出一条空白。 */
@media (orientation:landscape) and (min-width:900px){
  .body.tg-home{display:flex;align-items:flex-start;justify-content:center;gap:18px;padding:14px 20px calc(var(--tab-h) + 24px + env(safe-area-inset-bottom,0px))}
  .body.tg-home>.tg-scene{position:sticky;top:14px;flex:0 0 40%;width:40%;max-width:none;margin:0;min-height:0;height:calc(100vh - var(--tab-h) - 28px);height:calc(100dvh - var(--tab-h) - 28px);border-radius:18px}
  .body.tg-home>.tg-side{flex:1 1 auto;min-width:0;max-width:520px}
  /* 竖屏那条草绿过渡带和它的负外边距在右列没有意义；480 的居中上限也让给右列 */
  .body.tg-home .tg-energy-bridge{background:none;margin:0;padding:0;max-width:none}
  .body.tg-home .tg-energy-card{margin-top:0}
  .body.tg-home .tg-actions{padding:10px 0 0;max-width:none}
  .body.tg-home .tg-today{display:block}
}