/* ═══════════ 真实菜园 · 游戏场景版 ═══════════ */
:root {
  --wood: #9c7248; --wood-dark: #7a5836;
  --ink: #2d2a24; --paper: rgba(255, 253, 247, 0.94);
  --green: #3e7a3e; --danger: #c0492f; --water: #3d7ba6;
  --serif: "Songti SC", "Noto Serif SC", Georgia, serif;
  --sans: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: var(--sans); color: var(--ink); overflow: hidden; background: #87b5d8; }
.hidden { display: none !important; }
button { font-family: var(--sans); }

/* 游戏世界容器：高度取 visualViewport 实测值（JS 写入 --app-h），
   彻底绕开 iOS 浏览器工具栏对 vh/dvh/fixed-bottom 的不可靠处理 */
.main { position: fixed; top: 0; left: 0; right: 0;
  height: 100dvh; height: var(--app-h, 100dvh); overflow: hidden; }

/* ═══════════ 天空（随真实日出日落切换；四周溢出 60px 供视差） ═══════════ */
.sky { position: absolute; inset: -60px; transition: background 3s; z-index: 0; }
.sky.day   { background: linear-gradient(#4a90c9 0%, #8ec1e3 55%, #cfe6ef 100%); }
.sky.dawn  { background: linear-gradient(#3a4a7a 0%, #b0648a 45%, #f5b47a 80%, #fbd9a0 100%); }
.sky.dusk  { background: linear-gradient(#2e3560 0%, #8a4d6e 45%, #e88a5d 80%, #f5c98a 100%); }
.sky.night { background: linear-gradient(#0a1026 0%, #16213e 60%, #27324e 100%); }
.sky.overcast-day { background: linear-gradient(#7d8c99 0%, #a5b2ba 55%, #c8d0d4 100%); }

/* 太阳 / 月亮 */
#celestial { position: absolute; inset: 0; }
.sun-wrap { position: absolute; top: 5%; right: 10%; width: 230px; height: 230px;
  display: grid; place-items: center; }
.sun-rays { position: absolute; width: 230px; height: 230px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 236, 160, 0.13) 0 9deg, transparent 9deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 26%, rgba(0,0,0,0.8) 44%, transparent 72%);
  mask: radial-gradient(circle, transparent 26%, rgba(0,0,0,0.8) 44%, transparent 72%);
  animation: spin 90s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sun { width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle, #fff8dc 20%, #ffd76e 46%, rgba(255, 215, 110, 0.35) 64%, rgba(255, 205, 90, 0) 90%);
  box-shadow: 0 0 60px 10px rgba(255, 214, 110, 0.5), 0 0 130px 40px rgba(255, 214, 110, 0.16);
  animation: breathe 6s ease-in-out infinite; }
.moon { position: absolute; top: 10%; right: 16%; width: 58px; height: 58px; border-radius: 50%;
  background: #f4f0e2; box-shadow: inset -12px -8px 0 rgba(190, 185, 160, 0.55), 0 0 46px 12px rgba(244, 240, 226, 0.28); }
.moon-wrap { position: absolute; }
.moon-wrap svg { display: block; }
@keyframes breathe { 50% { transform: scale(1.06); } }

/* 星星 */
#stars { position: absolute; inset: 0; }
.star { position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%; background: #eee;
  animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: 0.2; } }

/* 云（漂移） */
#clouds { position: absolute; inset: 0; overflow: hidden; }
.cloud { position: absolute; animation: drift linear infinite; opacity: 0.92; }
.cloud svg { display: block; }
@keyframes drift { from { transform: translateX(-30vw); } to { transform: translateX(110vw); } }

/* 雨 / 雪（独立顶层，雨落满全景并在地面溅开） */
#precip { position: absolute; inset: 0; overflow: hidden; z-index: 7; pointer-events: none; }
.drop { position: absolute; top: -30px; width: 2px; height: 18px; border-radius: 2px;
  background: linear-gradient(rgba(200, 225, 245, 0), rgba(200, 225, 245, 0.7));
  animation: fall linear infinite; }
@keyframes fall { to { transform: translateY(112vh); } }
.flake { position: absolute; top: -20px; color: #fff; font-size: 10px; opacity: 0.85;
  animation: snowfall linear infinite; }
@keyframes snowfall { to { transform: translateY(112vh) translateX(6vw) rotate(200deg); } }
.splash { position: absolute; width: 16px; height: 6px; border: 2px solid rgba(215, 233, 246, 0.5);
  border-radius: 50%; opacity: 0; animation: splashring 1.15s ease-out infinite; }
@keyframes splashring { 0% { transform: scale(0.15); opacity: 0.7; }
  65% { opacity: 0.3; } 100% { transform: scale(1.5); opacity: 0; } }

/* 雾 */
#fog { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.fog-band { position: absolute; left: -10%; width: 120%; height: 22vh; border-radius: 50%;
  background: rgba(225, 228, 228, 0.4); filter: blur(28px); animation: fogdrift 26s ease-in-out infinite alternate; }
@keyframes fogdrift { to { transform: translateX(6vw); } }

/* ═══════════ 大地（地平线上移：土地约占 60%，天空 40%；dvh 适配手机地址栏） ═══════════ */
/* 远山下缘与草地重叠 4%，视差移动/亚像素取整都不会在接缝处露出天空 */
#hills { position: absolute; left: -60px; right: -60px; bottom: 54%; height: 24%;
  width: calc(100% + 120px); z-index: 1; }
.hill-far { fill: var(--hill-far); opacity: 0.75; }
.hill-near { fill: var(--hill-near); }
#ground { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: 2;
  background: linear-gradient(var(--grd-a) 0%, var(--grd-b) 40%, var(--grd-c) 100%);
  transition: background 2s; }

/* ═══════════ 场景调色板：基准（夏季白天）→ 季节覆盖 → 昼夜覆盖（最后级联生效） ═══════════ */
#main { --c-grass: #47793c; --c-tree: #4f8244; --c-tree2: #3f6e38; --c-trunk: #6e4f30;
  --c-fence: #8a6a48; --c-shed: #96714b; --c-roof: #6e4f30; --c-stone: #a3a08f; --c-window: #a8c4d4;
  --hill-far: #6d9660; --hill-near: #5c8a52; --grd-a: #69985a; --grd-b: #5d8b4f; --grd-c: #52804a; }
#main[data-season="spring"] { --c-tree: #5c9448; --c-tree2: #4a7f3c; --c-grass: #4a8040;
  --hill-far: #74a067; --hill-near: #639158; --grd-a: #6fa15e; --grd-b: #63924f; --grd-c: #57854e; }
#main[data-season="autumn"] { --c-tree: #c4802f; --c-tree2: #a2622a; --c-grass: #7d7434;
  --hill-far: #99915c; --hill-near: #83824c; --grd-a: #8e9052; --grd-b: #7f8347; --grd-c: #71763f; }
#main[data-season="winter"] { --c-tree: #6b705f; --c-tree2: #585c4e; --c-grass: #8f9080;
  --hill-far: #a4ac9b; --hill-near: #8f9c8a; --grd-a: #adb3a1; --grd-b: #9da695; --grd-c: #8e988a; }
#main[data-phase="night"] { --c-grass: #29422e; --c-tree: #263e2a; --c-tree2: #1e3423; --c-trunk: #35291b;
  --c-fence: #453723; --c-shed: #4c3b26; --c-roof: #362a1b; --c-stone: #565549; --c-window: #ffd980;
  --hill-far: #2c4030; --hill-near: #263a2a; --grd-a: #2e462f; --grd-b: #2a402c; --grd-c: #283e2a; }
#main[data-phase="dawn"], #main[data-phase="dusk"] { --c-grass: #3d6b38; --c-tree: #40693a;
  --c-tree2: #33582f; --c-trunk: #55401f; --c-fence: #6d5336; --c-shed: #7a5c3c; --c-roof: #55401f;
  --c-stone: #86836f; --c-window: #ffd980;
  --hill-far: #557a4d; --hill-near: #4c7046; --grd-a: #54804a; --grd-b: #4e7745; --grd-c: #486e41; }
#main[data-phase="night"][data-season="winter"] { --hill-far: #3a4440; --hill-near: #333d38;
  --grd-a: #3d453f; --grd-b: #38403a; --grd-c: #333b35; }

/* 落叶（秋） / 雪地（冬） / 水洼（雨后） */
.leaf-fall { animation: leaffall linear infinite; }
@keyframes leaffall { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  85% { opacity: 0.9; } 100% { transform: translate(6vw, 44vh) rotate(310deg); opacity: 0; } }
.puddle { animation: puddleshine 4.5s ease-in-out infinite alternate; }
@keyframes puddleshine { from { opacity: 0.55; } to { opacity: 0.95; } }

/* ═══════════ 场景道具 ═══════════ */
#decor { position: absolute; inset: -60px; z-index: 2; pointer-events: none; }
/* 前景装饰层：在种植床（#scene z3/4）之上、暗角(z6)之下——落地摆件永不被床遮挡。
   inset:0，物件用 % 定位（相对 --app-h 容器）——不能用 vh，iOS 上会越出可见区被裁 */
#decor-front { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.dc { position: absolute; }
.tuft { animation: tuftsway ease-in-out infinite alternate; }
@keyframes tuftsway { from { transform: skewX(-4deg); } to { transform: skewX(5deg); } }
.wildflower { animation: tuftsway 4s ease-in-out infinite alternate; }
.shed-window-night { display: none; }
#main[data-phase="night"] .shed-window-night,
#main[data-phase="dusk"] .shed-window-night,
#main[data-phase="dawn"] .shed-window-night { display: block; }
.smoke { position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(226, 224, 216, 0.55); animation: smokeup 5s ease-out infinite; }
@keyframes smokeup { 0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  25% { opacity: 0.65; } 100% { transform: translate(10px, -52px) scale(2.1); opacity: 0; } }
#main[data-phase="day"] .smoke { display: none; }

/* 飞鸟 */
.bird { position: absolute; left: -6vw; animation: birdfly linear forwards; }
.bird svg { animation: birdbob 2.2s ease-in-out infinite; display: block; }
@keyframes birdfly { to { transform: translateX(118vw); } }
@keyframes birdbob { 50% { transform: translateY(-9px); } }

/* 暗角聚焦 */
#vignette { position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: radial-gradient(ellipse at 50% 58%, transparent 52%, rgba(18, 28, 18, 0.2) 100%); }
#main[data-phase="night"] #vignette {
  background: radial-gradient(ellipse at 50% 58%, transparent 45%, rgba(5, 10, 8, 0.42) 100%); }

/* ═══════════ 菜畦场景 ═══════════ */
/* 菜畦在土地区域内垂直居中（所有尺寸统一）：单排也不会孤零零钉在屏幕底边 */
#scene { position: absolute; left: 0; right: 0; bottom: 0; height: 56%; z-index: 3;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding-bottom: calc(4vh + env(safe-area-inset-bottom)); gap: 2.5vh; }
.beds-row { display: flex; justify-content: center; gap: 3vw; width: 100%; }
.beds-row.back { transform: scale(0.85); z-index: 3; }
.beds-row.front { z-index: 4; }
.bed { position: relative; width: min(240px, 26vw); cursor: pointer; transition: transform 0.25s; }
.bed:hover { transform: translateY(-6px); }
.bed svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 10px rgba(20, 40, 20, 0.28)); }
.bed.locked { opacity: 0.62; }
.bed.locked:hover { opacity: 0.85; }
/* 床前铭牌：手机上床体缩小后 SVG 文字会过小，整块铭牌按比例放大保可读 */
.bed .plate { transform-box: fill-box; transform-origin: center; }
.bed .bubble { position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-size: 22px; animation: floaty 2.2s ease-in-out infinite;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35)); }
@keyframes floaty { 50% { transform: translateX(-50%) translateY(-7px); } }

/* 植物摇曳 */
.plant-sway { transform-origin: 50% 100%; transform-box: fill-box; animation: sway 4.5s ease-in-out infinite; }
@keyframes sway { 25% { transform: rotate(1.6deg); } 75% { transform: rotate(-1.6deg); } }
.plant-sway.windy { animation-duration: 2.2s; }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.bed.just-changed svg { animation: pop 0.5s ease-out; }

/* 墨晕涟漪（浇水反馈） */
.ink-ripple { position: absolute; border: 2px solid rgba(120, 185, 220, 0.75); border-radius: 50%;
  pointer-events: none; animation: ringout 0.9s ease-out forwards; z-index: 30; }
@keyframes ringout { 0% { transform: scale(0.15); opacity: 0.85; } 100% { transform: scale(1.6); opacity: 0; } }

/* ═══════════ HUD ═══════════ */
#hud-top { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: 14px; right: 14px; z-index: 10;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hud-chip { background: var(--paper); border: 2px solid rgba(90, 70, 40, 0.28); border-radius: 22px;
  padding: 7px 14px; font-size: 0.92rem; font-weight: 600; color: var(--ink);
  box-shadow: 0 3px 8px rgba(20, 30, 20, 0.22); cursor: default; }
button.hud-chip { cursor: pointer; }
button.hud-chip:hover { border-color: var(--green); }
#hud-basket { margin-left: auto; }
.hud-chip.bump { animation: bump 0.4s ease-out; }
@keyframes bump { 40% { transform: scale(1.28) rotate(-6deg); } }

.forecast-strip { position: absolute; top: 62px; left: 14px; right: 14px; z-index: 10;
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; }
.fc-day { flex: 0 0 78px; text-align: center; background: var(--paper); border: 2px solid rgba(90,70,40,0.22);
  border-radius: 14px; padding: 8px 4px; font-size: 0.74rem; box-shadow: 0 3px 8px rgba(20,30,20,0.18); }
.fc-day .d { font-weight: 700; } .fc-day .i { font-size: 1.25rem; margin: 1px 0; }
.fc-day .rain { color: var(--water); font-weight: 600; }

/* ═══════════ 底部面板 ═══════════ */
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center;
  pointer-events: none; }
.sheet-inner { pointer-events: auto; width: min(560px, 96vw); max-height: 66vh; overflow-y: auto;
  background: var(--paper); border: 3px solid var(--wood); border-bottom: none;
  border-radius: 22px 22px 0 0; padding: 18px 20px 22px; box-shadow: 0 -8px 30px rgba(15, 25, 15, 0.35);
  animation: slideup 0.28s ease-out; }
@keyframes slideup { from { transform: translateY(40%); opacity: 0.4; } }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.sheet-head h3 { font-family: var(--serif); font-size: 1.25rem; }
.sheet-close { border: none; background: none; font-size: 1.5rem; cursor: pointer; color: #8a8578; line-height: 1; }
.stage-tag { display: inline-block; background: #e8f0e4; color: var(--green); border-radius: 20px;
  padding: 1px 10px; font-size: 0.78rem; font-weight: 700; }
.stage-tag.warn { background: #fbe9e4; color: var(--danger); }
.stage-tag.q-prime { background: #fdf3d2; color: #a97f12; border: 1px solid #e8c96a; }
.stage-tag.q-fine { background: #eef3e6; color: #5a7d3c; border: 1px solid #b8cf9a; }

.meter { margin: 8px 0; }
.meter .m-label { display: flex; justify-content: space-between; font-size: 0.78rem; color: #6f6b60; margin-bottom: 3px; }
.m-bar { height: 10px; border-radius: 6px; background: #e3ddd0; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.12); }
.m-fill { height: 100%; border-radius: 6px; transition: width 0.5s; }
.m-fill.growth { background: linear-gradient(90deg, #6aa84f, #3e7a3e); }
.m-fill.water { background: linear-gradient(90deg, #7db8dc, #3d7ba6); }
.m-fill.health { background: linear-gradient(90deg, #e8a75d, #c97a2b); }

.sheet-note { font-size: 0.82rem; color: #6f6b60; margin: 6px 0; }

/* 安装到主屏幕弹层 */
.install-hero { display: flex; align-items: center; gap: 12px; margin: 10px 0 12px; }
.install-hero img { border-radius: 14px; box-shadow: 0 3px 8px rgba(0,0,0,0.18); }
.install-steps { margin: 12px 0 6px; display: flex; flex-direction: column; gap: 9px; }
.install-step { display: flex; align-items: baseline; gap: 10px; font-size: 0.92rem; }
.install-step > b:first-child { flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--wood); color: #fff6e8; font-size: 0.8rem; text-align: center; line-height: 22px; }
.ios-share { color: #1d78d2; font-weight: 700; }
.action-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.btn { padding: 10px 18px; border: 2px solid rgba(90,70,40,0.3); border-radius: 14px; background: #fff;
  color: var(--ink); font-size: 0.95rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 3px 0 rgba(90, 70, 40, 0.25); transition: transform 0.08s; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(90,70,40,0.25); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; border-radius: 8px; }
.btn-primary { background: var(--green); border-color: #2e5c2e; color: #fff; box-shadow: 0 3px 0 #2e5c2e; }
.btn-water { background: var(--water); border-color: #2b5a7c; color: #fff; box-shadow: 0 3px 0 #2b5a7c; }
.btn-danger { background: #fff; color: var(--danger); }
.link-btn { border: none; background: none; color: #6f6b60; cursor: pointer; font-size: 0.9rem; }
.link-btn:hover { color: var(--green); }

.event-log { margin-top: 12px; border-top: 1px dashed #cfc8b8; padding-top: 8px; }
.event-log h4 { font-size: 0.82rem; margin-bottom: 4px; }
.event-item { font-size: 0.78rem; color: #6f6b60; margin-bottom: 3px; }

/* 选种列表 */
.plant-list { display: flex; flex-direction: column; gap: 8px; }
.plant-item { display: flex; align-items: center; gap: 12px; border: 2px solid rgba(90,70,40,0.22);
  border-radius: 14px; padding: 8px 12px; cursor: pointer; background: #fff; }
.plant-item:hover { border-color: var(--green); background: #f4f8f0; }
.plant-item .pi-art { flex: 0 0 52px; }
.plant-item .pi-name { font-weight: 700; }
.plant-item .pi-meta { font-size: 0.75rem; color: #6f6b60; }
.plant-item .pi-score { margin-left: auto; font-family: var(--serif); font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
.score-good { color: var(--green); } .score-mid { color: #b3541e; } .score-bad { color: var(--danger); }

/* 待解锁地块 / 巡园事件卡 */
.chore-card { background: #fdf3e0; border: 2px solid #e0b96a; border-radius: 12px;
  padding: 8px 12px; margin: 8px 0; font-size: 0.85rem; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

/* 收获庆祝与分享卡 */
.harvest-hero { font-size: 1.5rem; text-align: center; margin: 10px 0 6px;
  animation: pop 0.5s ease-out; }
.fact-card { background: #eef4e8; border: 2px solid #b8d0a4; border-radius: 12px;
  padding: 10px 14px; margin: 10px 0; font-size: 0.85rem; line-height: 1.55; }
.share-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(10, 15, 10, 0.72);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.share-box { max-width: 480px; width: 100%; }
.share-canvas-wrap { display: flex; justify-content: center; margin-bottom: 14px; }
.share-box .btn { background: var(--paper); }
.share-box .btn-primary { background: var(--green); }

/* 园丁码 */
.code-box { font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; word-break: break-all;
  background: #fff; border: 2px dashed rgba(90, 70, 40, 0.35); border-radius: 10px;
  padding: 8px 12px; margin: 6px 0; user-select: all; }

/* 图鉴 */
.dex-item { display: flex; align-items: flex-start; gap: 12px; border-bottom: 1px dashed #d8d1c0; padding: 8px 2px; }
.dex-item .dx-emoji { font-size: 28px; }
.dex-item .dx-name { font-weight: 700; }
.dex-item .dx-meta { font-size: 0.78rem; color: #6f6b60; }
.dex-item .dx-count { margin-left: auto; font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--green); white-space: nowrap; }

/* ═══════════ 特效 ═══════════ */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
.fx-pop { position: absolute; font-size: 30px; animation: fxpop 1.1s ease-out forwards; animation-fill-mode: both; }
@keyframes fxpop { 0% { transform: translateY(0) scale(0.6); opacity: 1; }
  100% { transform: translateY(-110px) scale(1.3); opacity: 0; } }
.fx-fly { position: absolute; font-size: 26px; z-index: 31;
  transition: transform 0.9s cubic-bezier(0.35, -0.25, 0.6, 1), opacity 0.9s ease-in; }

/* 氛围生物 */
#ambient { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.butterfly { position: absolute; font-size: 19px; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25)); }
.butterfly.b0 { animation: flutter0 24s ease-in-out infinite alternate; }
.butterfly.b1 { animation: flutter1 30s ease-in-out infinite alternate; }
@keyframes flutter0 {
  0% { transform: translate(0, 0) rotate(-8deg); } 20% { transform: translate(14vw, -7vh) rotate(10deg); }
  45% { transform: translate(28vw, 2vh) rotate(-12deg); } 70% { transform: translate(40vw, -9vh) rotate(8deg); }
  100% { transform: translate(55vw, -3vh) rotate(-6deg); } }
@keyframes flutter1 {
  0% { transform: translate(0, 0) rotate(6deg); } 25% { transform: translate(-16vw, -5vh) rotate(-10deg); }
  55% { transform: translate(-30vw, 3vh) rotate(12deg); } 100% { transform: translate(-48vw, -8vh) rotate(-8deg); } }
.firefly { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffe97a;
  box-shadow: 0 0 9px 3px rgba(255, 233, 122, 0.55); animation: ffdrift ease-in-out infinite alternate, ffblink 2.6s ease-in-out infinite; }
@keyframes ffdrift { to { transform: translate(9vw, -6vh); } }
@keyframes ffblink { 0%, 100% { opacity: 0.1; } 50% { opacity: 1; } }

.toast { position: fixed; top: calc(70px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 40;
  background: var(--paper); border: 2px solid var(--wood); color: var(--ink);
  padding: 10px 22px; border-radius: 16px; font-size: 0.92rem; font-weight: 600;
  box-shadow: 0 6px 20px rgba(15,25,15,0.3); max-width: 92vw; animation: slideup 0.25s ease-out; }

/* 园丁信件 */
.mailbox { transition: transform 0.2s; }
.mailbox:hover { transform: translateY(-3px); }
.letter { background: rgba(255, 252, 240, 0.92); border: 1.5px solid rgba(90, 70, 40, 0.24);
  border-radius: 10px; padding: 12px 15px; margin: 10px 0; }
.letter-date { font-size: 0.76rem; color: #8a8578; margin-bottom: 6px; }
.letter-body { font-size: 0.92rem; line-height: 1.75; white-space: pre-line; }
.letter-sign { text-align: right; color: #6f6b60; font-size: 0.86rem; margin-top: 8px; }
.letter-gift { margin-top: 8px; }
.letter-gift.muted { color: #8a8578; font-size: 0.85rem; }

/* 好友串门：只读床位网格 */
.visit-beds { display: flex; flex-wrap: wrap; gap: 10px 3%; margin-top: 8px; }
.visit-beds .bed-v { width: 30%; }
.visit-beds .bed-v svg { display: block; width: 100%; height: auto;
  filter: drop-shadow(0 5px 6px rgba(20, 40, 20, 0.22)); }
.visit-decor { display: flex; gap: 12px; align-items: flex-end; }

/* 装饰：风车旋翼（转速由 JS 按真实风速设定） */
.pinwheel-rotor { transform-box: fill-box; transform-origin: center; animation: spinwheel linear infinite; }
@keyframes spinwheel { to { transform: rotate(360deg); } }

/* 园丁历 */
.hud-chip { position: relative; }
.chip-dot { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px;
  border-radius: 50%; background: #e05a4e; border: 2px solid var(--paper); }
.alm-head { display: flex; align-items: center; gap: 16px; margin: 4px 0 10px; }
.alm-term { font-family: var(--serif); font-size: 2.4rem; font-weight: 700; line-height: 1.15;
  color: var(--green); letter-spacing: 0.08em; }
.alm-date { color: #6f6b60; font-size: 0.88rem; }
.alm-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 9px 0;
  background: rgba(255, 255, 255, 0.55); border: 1.5px solid rgba(90, 70, 40, 0.16); border-radius: 12px;
  font-size: 0.92rem; }
.alm-row .grow { flex: 1; }
.alm-row .ok { color: var(--green); font-weight: 700; white-space: nowrap; }
.alm-fact { font-size: 0.88rem; color: #5c564a; background: rgba(139, 178, 121, 0.14);
  border-left: 3px solid var(--green); border-radius: 6px; padding: 10px 12px; margin: 10px 0 4px;
  line-height: 1.55; }

/* 持久通知堆（阶段变化，手动关闭）：位于 toast 槽位下方，互不遮挡 */
#notices { position: fixed; top: calc(118px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 39;
  display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 92vw; }
.notice { display: flex; align-items: center; gap: 12px; background: var(--paper);
  border: 2px solid var(--wood); color: var(--ink); border-radius: 16px;
  padding: 9px 12px 9px 20px; font-size: 0.92rem; font-weight: 600;
  box-shadow: 0 6px 20px rgba(15,25,15,0.3); animation: slideup 0.25s ease-out; }
.notice button { flex: none; border: none; cursor: pointer; width: 24px; height: 24px;
  border-radius: 50%; background: rgba(90, 70, 40, 0.14); color: var(--ink);
  font-size: 1.05rem; line-height: 22px; padding: 0; }
.notice button:hover { background: rgba(90, 70, 40, 0.26); }
.notice.out { opacity: 0; transform: translateY(-8px); transition: 0.25s; }

/* ═══════════ 标题画面 ═══════════ */
.setup { position: fixed; inset: 0; overflow: hidden; }
.setup-sky { position: absolute; inset: 0; background: linear-gradient(#16213e 0%, #27324e 55%, #3a5a40 100%); }
.s-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #eee; animation: twinkle 3s infinite; }
.setup-moon { position: absolute; top: 10%; right: 16%; width: 54px; height: 54px; border-radius: 50%;
  background: #f4f0e2; box-shadow: inset -11px -7px 0 rgba(190,185,160,0.5), 0 0 40px 10px rgba(244,240,226,0.25); }
.setup-hill { position: absolute; bottom: 0; left: -10%; width: 120%; height: 30vh;
  background: #2c4430; border-radius: 50% 50% 0 0; }
.setup-sprout { position: absolute; bottom: 22vh; left: 50%; transform: translateX(-50%);
  font-size: 44px; animation: floaty 3s ease-in-out infinite; }
.setup-card { position: relative; z-index: 2; max-width: 420px; margin: 0 auto; padding: 10vh 24px 0;
  text-align: center; color: #f0ede2; }
.brand { font-family: var(--serif); font-weight: 700; letter-spacing: 0.06em; }
.setup-card .brand { font-size: 2.6rem; letter-spacing: 0.08em;
  text-shadow: 0 3px 14px rgba(0,0,0,0.5); margin-bottom: 12px; }
.tagline { color: #c9c4b2; margin-bottom: 30px; }
.setup-card .btn-primary { width: 100%; font-size: 1.05rem; padding: 13px; }
.divider { display: flex; align-items: center; gap: 12px; color: #a8a394; font-size: 0.85rem; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid rgba(200,195,175,0.3); }
.search-row { display: flex; gap: 8px; }
.search-row input { flex: 1; padding: 11px 14px; border: 2px solid rgba(200,195,175,0.35); border-radius: 12px;
  background: rgba(255,253,247,0.95); color: var(--ink); font-size: 1rem; outline: none; }
.city-results { margin-top: 12px; text-align: left; }
.city-results button { display: block; width: 100%; padding: 10px 14px; margin-bottom: 6px;
  border: 2px solid rgba(200,195,175,0.3); border-radius: 12px; background: rgba(255,253,247,0.92);
  color: var(--ink); cursor: pointer; font-size: 0.95rem; text-align: left; }
.city-results button:hover { border-color: var(--green); }
.setup-msg { margin-top: 12px; color: #c9c4b2; font-size: 0.9rem; min-height: 1.4em; }
.setup .link-btn { color: #a8a394; font-size: 0.9rem; }
.setup .link-btn:hover { color: #cfe0b0; }

/* ═══════════ 成就与等级 ═══════════ */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; }
.ach { background: rgba(255, 255, 255, 0.5); border: 1.5px solid rgba(90, 70, 40, 0.16);
  border-radius: 12px; padding: 10px 12px; opacity: 0.55; }
.ach.got { opacity: 1; background: rgba(139, 178, 121, 0.16); border-color: rgba(90, 130, 70, 0.35); }
.ach-emoji { font-size: 1.5rem; line-height: 1.2; }
.ach-name { font-weight: 700; font-size: 0.88rem; margin-top: 2px; }
.ach-desc { font-size: 0.76rem; color: #6f6b60; line-height: 1.45; margin-top: 2px; }

/* 密码恢复码展示 */
.recovery-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.45rem; font-weight: 700; letter-spacing: 0.08em; text-align: center;
  background: rgba(240, 196, 25, 0.14); border: 2px dashed rgba(176, 138, 62, 0.55);
  border-radius: 12px; padding: 16px 10px; margin: 12px 0; user-select: all; }

/* 木秋千：座板随微风轻摆 */
.swing-seat { transform-box: fill-box; transform-origin: 50% 0; animation: swingsway 4.5s ease-in-out infinite; }
@keyframes swingsway { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }

/* ═══════════ 响应式 ═══════════ */
@media (max-width: 680px) {
  .beds-row { gap: 2vw; }
  .bed { width: 30vw; }
  /* 后排可能有 4 床（3 地块 + 温室）：按同排数量收窄，防横向溢出 */
  .bed:first-child:nth-last-child(4),
  .bed:first-child:nth-last-child(4) ~ .bed { width: 23vw; }
  /* 手机：菜畦在土地区域内垂直居中，避免"孤零零钉在屏幕底边"的构图 */
  #scene { height: 56%; gap: 3vh; justify-content: center;
    padding-bottom: calc(5vh + env(safe-area-inset-bottom)); }
  .hud-chip { padding: 5px 10px; font-size: 0.8rem; }
  .bed .plate { transform: scale(1.4); }
  .bed:first-child:nth-last-child(4) .plate,
  .bed:first-child:nth-last-child(4) ~ .bed .plate { transform: scale(1.7); }
  .ach-grid { grid-template-columns: 1fr 1fr; }
  /* 手机：前景摆件按视口收窄，免得底部空地摆不开 */
  #decor-front svg { max-width: 14vw; height: auto; }
}