/* 100天农场 · 样式表（v3 架构版）
   规则：① 颜色/圆角/描边/阴影/层级全走 :root 令牌；② 每个组件只定义一次（不再「基础＋底部覆盖」两段）。
   风格锚 v2.0：蜜色木 / 砖红 / 赭黄 / 苔绿 / 樱粉 / 深蓝，深棕黑描边。 */
:root{
  /* —— 颜色 —— */
  --wood:#d9a86c; --wood-d:#b07d47; --brick:#a3573e; --soil:#bd7f3f; --soil-d:#8a5433;
  --moss:#86a548; --pink:#e7a6b6; --water:#3f6f86; --outline:#3d2412; --paper:#f3ead6;
  --warm:#f6c46a; --warm-sky:#f4a259; --gold:#d2a256; --ink:#31220f; --muted:#86705a;
  --panel:#f6e8ca; --panel-2:#eddab2; --wood-frame:#8a5a2e;
  /* —— 农场底图实测原色（唯一色彩基准，新组件一律引用这些）—— */
  --grass:#d3d945; --grass-d:#b6bd3a; --pond:#73b3cc;
  --soil-art:#a26644; --soil-art-d:#875137; --deep:#2b1400;
  /* 常用渐层面（纸卡 / 木底 / 砖红钮 / 木钮 / 金钮） */
  --grad-paper:linear-gradient(180deg,#faf1da,#f4e6c4);
  --grad-chip:linear-gradient(180deg,#fffaf0,#f3e6cc);
  --grad-brick:linear-gradient(180deg,#b86547,#a3573e 55%,#8a4733);
  --grad-wood:linear-gradient(180deg,#e3bd88,#d9a86c 55%,#c08f52);
  --grad-gold:linear-gradient(180deg,#e3bf78,#d2a256 55%,#ba8136);
  --grad-tab:linear-gradient(180deg,#f0e2bd,#e4d09f);
  --grad-tab-on:linear-gradient(180deg,#b86547,#a3573e);
  /* —— 圆角 —— */
  --r-chip:9px; --r-cell:8px; --r-item:10px; --r-btn:12px; --r-scene:14px; --r-card:16px; --r-pill:999px;
  /* —— 描边 / 阴影 —— */
  --bw:2px; --bw2:3px;
  --shadow:0 5px 0 rgba(58,42,32,.16);
  --shadow-card:0 4px 0 rgba(58,42,32,.14), inset 0 0 0 2px rgba(255,255,255,.5), inset 0 -3px 0 rgba(138,90,46,.12);
  /* —— 层级 —— */
  /* 层级。--z-overlay 以前是 50，比钓鱼那层（200）还低 —— 所以在湖边点工具坞的任何一个，
     面板是开了，但整个开在钓鱼页底下，她看不到；工具坞自己又因为「有弹窗就收起来」不见了，
     看起来就像「按一下东西全消失」。弹窗本来就该盖在所有场景之上，所以排到钓鱼与工具坞后面。 */
  --z-scene:6; --z-fish:200; --z-fishback:210; --z-dock:220; --z-overlay:240; --z-toast:260; --z-curtain:300;
  /* —— 安全区 —— */
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --nav-h:calc(86px + var(--safe-b));   /* 底栏总高（含安全区）——浮层一律拿这个避开它 */
  --top-h:calc(38px + var(--safe-t));   /* 顶部小药丸占掉的高度 */
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;touch-action:manipulation}
/* 屏幕最上面那一条（iOS 状态栏那格）到底是谁画的，会因为「怎么安装的」而不同：
   有时是 html、有时是 body、装成 App 之后是铺满全屏的 #app。
   之前只染了其中一个，所以她那边一直还是米黄。现在三个一起吃 --shell，
   不管哪一个赢，那条都会是当前场景的颜色。 */
html{background:var(--shell,#2b1a0e)}
body{background:var(--shell,#2b1a0e);color:var(--ink);user-select:none}
.home-scene,.farm-map{touch-action:pan-y} /* 场景区允许竖向滑动翻页，仍禁双指缩放 */
input,textarea,select{font-size:16px!important;-webkit-user-select:text;user-select:text;-webkit-touch-callout:default} /* ≥16px：iOS 聚焦不放大 */
/* 像素图放大要用最近邻（脆），pixelated 必须放最后一条——iOS Safari 支持 pixelated，
   若把 crisp-edges 放最后会退回平滑插值，人物就糊了 */
img.art{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated;object-fit:contain}

/* 外壳：木底纹 + 竖向 flex */
#app{position:fixed;inset:0;display:flex;flex-direction:column;max-width:520px;margin:0 auto;overflow:hidden;
  background:var(--ui-bg, linear-gradient(180deg,#f7d9a6,#f4c583)) 0 0 / 300px repeat, #e6c184;image-rendering:pixelated}
/* 全屏场景页：整个外壳就是当前场景的颜色（--shell 由 JS 从底图边缘实测）——
   房间木头咖啡、农场草绿、湖边林地绿，那条看起来是场景往上延伸。 */
#app.home-full,#app.farm-full{background:var(--shell,#2b1a0e)}

/* 顶栏：整块板子拿掉了 —— 一条横条压在画面上，怎么调都像贴上去的。
   现在只剩「天数」和「金币」两颗小药丸各据一角，中间完全透空，画面看得见。 */
#topbar{position:absolute;z-index:8;left:10px;right:10px;top:calc(7px + var(--safe-t));
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  padding:0;background:none;border:none;box-shadow:none;pointer-events:none}
.tb-left,.tb-right{display:flex;align-items:center;gap:6px;min-width:0;pointer-events:auto}
/* 小药丸：半透明深底 ＋ 毛玻璃 ＋ 柔和投影，压在任何场景上都读得清也不抢戏 */
.badge,.coins,.icon-btn{height:27px;border:none;border-radius:var(--r-pill);color:#f6ead2;
  background:rgba(30,19,10,.52);display:inline-flex;align-items:center;
  backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px) saturate(1.1);
  box-shadow:0 2px 8px rgba(16,9,3,.34)}
.badge{padding:0 11px;font-size:13px;font-weight:700;letter-spacing:.02em}
.badge.ghost{background:rgba(181,83,58,.82);color:#fff8ec}
/* 金币：等宽金色数字，跟钓鱼那颗同一套 */
.coins{gap:5px;padding:0 11px;font-size:13px;justify-content:center;color:var(--gold);
  font-family:ui-monospace,Menlo,monospace}
.coins b{font-variant-numeric:tabular-nums;font-weight:700;font-size:14px}
/* 金币。以前是 CSS 画的一个渐层圆点 —— 全游戏只有它不是像素画，顶栏跟商店价钱一眼看得出来是「网页元件」。
   现在换成钓鱼页那套 UI 里本来就有的那枚像素金币（抠出来放 assets/ui_coin.png），
   两边就是同一枚了。--ui-coin 由 JS 在开机时塞进来（见 game.js 的 preloadUiBits）。 */
.ic-coin{width:15px;height:15px;display:inline-block;vertical-align:-2px;
  background:var(--ui-coin) center/contain no-repeat;image-rendering:pixelated;
  /* 素材还没载进来之前的兜底，免得价钱前面空一格 */
  background-color:transparent}
.ic-coin.no-art{border-radius:50%;background:radial-gradient(circle at 35% 32%,#ffe08a,var(--gold) 70%)}
.icon-btn{width:28px;padding:0;justify-content:center;font-size:14px;cursor:pointer;color:#f6ead2}
.icon-btn:active{transform:translateY(1px);filter:brightness(1.15)}
.icon-btn.on{background:rgba(240,195,74,.3);color:#ffe6b0}

/* 页面容器：顶栏是浮起来的，所以清单页要自己把它的高度让出来 */
#screen{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:calc(var(--top-h) + 6px) 14px 20px}
.page{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h2.page-title{font-size:17px;margin:2px 0 12px;display:flex;align-items:center;gap:8px}
.hint{color:var(--muted);font-size:12.5px;line-height:1.6}
/* 分页标题底下那一句（商店的「这个镇的东西，本来就买不完」、心动的那一句）。
   清单页的底纹是木头，浅灰小字整句沉进木纹里 —— 她那台手机上根本读不到。
   给它一块半透明的纸垫，字色也压深，才像钉在木板上的一张小条子。 */
.page > .hint{display:inline-block;margin:0 0 11px;padding:5px 12px;border-radius:var(--r-pill);
  color:#6b543c;background:rgba(250,241,218,.86);
  box-shadow:0 1.5px 0 rgba(58,42,32,.14),inset 0 0 0 1.5px rgba(138,90,46,.22)}
/* 这两个到处在用，但一直没有自己的规则（靠所在区块的样式撑着），
   券夹跟券的历史是新的区块，没有那层保护，所以在这里补上通用的一份。 */
.muted{color:var(--muted);font-size:12.5px;line-height:1.6;margin:0}
.kv{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 2px;
  border-bottom:1px solid rgba(138,90,46,.18);font-size:13.5px}
.kv:last-child{border-bottom:none}

/* 底部导航 */
/* 跟顶栏同一套暖深褐。
   安全区（Home 横条）那段留白以前加在 #nav 上，是一块「看得到、点不到」的死区，
   图标也被推得太靠下不好按。现在把那段留白移进按钮本身：
   图标与文字整体往上提，而可点区域一路延伸到屏幕最底，手指落在哪都算数。 */
#nav{flex:0 0 auto;display:flex;background:linear-gradient(180deg,#3d2716,#2b1a0d);
  border-top:var(--bw) solid rgba(20,12,6,.5);padding-bottom:0;box-shadow:0 -3px 10px rgba(20,12,6,.24);
  min-height:var(--nav-h)}
.tab{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:15px 0 calc(var(--safe-b) + 12px);
  gap:5px;color:#c9b494;font-size:12.5px;font-weight:600;cursor:pointer;position:relative;opacity:.8;
  min-height:var(--nav-h)}
img.ic{width:34px;height:34px;object-fit:contain;image-rendering:pixelated}
img.pt-ic{width:23px;height:23px;object-fit:contain;image-rendering:pixelated;flex:0 0 auto}
.tab.active{opacity:1;color:#fff8ec}
.tab.active img.ic{transform:scale(1.08)}
.tab .dot{position:absolute;top:8px;right:calc(50% - 24px);width:10px;height:10px;border-radius:50%;background:var(--brick);border:1.5px solid #fff}

/* 卡片 / 面板 */
.card{background:var(--grad-paper);border:var(--bw2) solid var(--wood-frame);border-radius:var(--r-card);padding:12px;
  margin-bottom:12px;box-shadow:var(--shadow-card)}
.card h3{margin:0 0 8px;font-size:15px}
.row{display:flex;align-items:center;gap:10px}
.spread{justify-content:space-between}
.grid{display:grid;gap:10px}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}
.grid.g5{grid-template-columns:repeat(5,1fr)}
.grid.g6{grid-template-columns:repeat(6,1fr)}

/* 按钮：砖红（主）/ 木（次）/ 金 */
button.btn{font-family:inherit;color:#fff8ec;border:var(--bw2) solid var(--outline);border-radius:var(--r-btn);
  padding:9px 14px;font-size:14px;font-weight:700;cursor:pointer;
  background:var(--grad-brick);box-shadow:0 4px 0 #6e392b, inset 0 2px 0 rgba(255,255,255,.22);text-shadow:0 1px 0 rgba(58,42,32,.4)}
button.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #6e392b, inset 0 2px 0 rgba(255,255,255,.18)}
button.btn.wide{width:100%}
button.btn.sec{color:var(--ink);text-shadow:none;background:var(--grad-wood);box-shadow:0 4px 0 #9c6a2c, inset 0 2px 0 rgba(255,255,255,.32)}
button.btn.sec:active{box-shadow:0 1px 0 #9c6a2c, inset 0 2px 0 rgba(255,255,255,.28)}
button.btn.gold{color:var(--ink);text-shadow:none;background:var(--grad-gold);box-shadow:0 4px 0 #93662f, inset 0 2px 0 rgba(255,255,255,.42)}
button.btn.gold:active{box-shadow:0 1px 0 #93662f, inset 0 2px 0 rgba(255,255,255,.38)}
button.btn:disabled{background:#c9beac;color:#8a8072;text-shadow:none;box-shadow:0 4px 0 #9a9080;cursor:default}
.pill{display:inline-flex;align-items:center;gap:4px;background:var(--grad-chip);
  border:var(--bw) solid var(--outline);border-radius:var(--r-pill);padding:3px 10px;
  font-size:12px;font-weight:700;box-shadow:0 1.5px 0 rgba(58,42,32,.14)}

/* 家 */
.home-scene{position:relative;border:var(--bw2) solid var(--outline);border-radius:var(--r-scene);overflow:hidden;box-shadow:var(--shadow)}
.home-scene img.bg{width:100%;display:block}
/* 家＝真正全屏房间：等比放大铺满整个屏幕区（上下顶满、无留边），只裁掉两边极窄的木框边。
   场景框 = 图片本身的比例，所以热区坐标 = 图片坐标，永远精准。 */
#app.home-full #screen{padding:0;position:relative;overflow:hidden;background:#2a1f18}
#app.home-full .page{position:absolute;inset:0;margin:0;animation:none}
#app.home-full .home-scene{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  height:100%;width:auto;aspect-ratio:var(--ar,.563);max-width:none;border:none;border-radius:0;box-shadow:none;margin:0}
#app.home-full .home-scene img.bg{width:100%;height:100%;display:block;object-fit:cover}
.home-hotspots{position:absolute;inset:0}
.hot{position:absolute;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;filter:drop-shadow(0 2px 0 rgba(0,0,0,.2))}
.hot img{width:44px;height:44px}
.hot span{font-size:10px;background:#fff8ecdd;border:1.5px solid var(--outline);border-radius:6px;padding:0 4px}
.hot .dot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:var(--brick);border:var(--bw) solid #fff}
/* 点击区：对准底图家具，平时只留淡框，hover/点亮时提示 */
.zone{position:absolute;cursor:pointer;border-radius:var(--r-cell);display:flex;align-items:flex-end;justify-content:center;
  border:var(--bw) dashed transparent;transition:border-color .15s,background .15s}
.zone:hover,.zone:active{border-color:rgba(255,248,236,.6);background:rgba(255,248,236,.12)}
.zone-label{font-size:10px;background:#fff8ecdd;border:1.5px solid var(--outline);border-radius:6px;padding:0 4px;
  margin-bottom:2px;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;pointer-events:none;white-space:nowrap}
.zone:hover .zone-label,.zone:active .zone-label{opacity:1;transform:none}
/* 出口（房间最下面那条走道 → 农场）：标签一直看得见，不然没人知道那边能走 */
.zone.exit{align-items:center}
.zone.exit .zone-label{opacity:.94;transform:none;margin:0;font-size:11px;font-weight:700;padding:2px 7px;
  background:rgba(28,17,8,.72);color:#fff8ec;border-color:rgba(20,12,6,.5);animation:exitBreathe 2.4s ease-in-out infinite}
.zone.exit .zone-label::before{content:'↓ '}
@keyframes exitBreathe{0%,100%{opacity:.72}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.zone.exit .zone-label{animation:none}}
.zone-icon{width:42px;height:52px;position:absolute;left:50%;bottom:60%;transform:translateX(-50%);filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.zone .dot{position:absolute;top:-4px;right:-4px;width:11px;height:11px;border-radius:50%;background:var(--brick);border:var(--bw) solid #fff}
/* 她：等速走位＋踏步小跳＋朝向翻转 */
.char-mini{position:absolute;left:50%;top:72%;transform:translate(-50%,-92%);height:84px;pointer-events:none;
  transition:left var(--walk,.6s) linear, top var(--walk,.6s) linear;will-change:left,top}
.char-mini img{display:block;height:84px;transform-origin:50% 100%}
.char-mini.face-left{transform:translate(-50%,-92%) scaleX(-1)}
.char-mini .mini-shadow{position:absolute;left:50%;bottom:-3px;width:36px;height:9px;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at center, rgba(40,28,18,.34), rgba(40,28,18,0) 70%)}
.char-mini.walking img{animation:walkstep .34s ease-in-out infinite}
/* 四方向真帧走路：逐帧切换，人物略大、贴地 */
/* 角色高度按场景可调：每个场景在其容器上设 --char-h（近景大、俯视远景小），默认 96px */
.char-mini.walk-sprite{transform:translate(-50%,-90%);height:var(--char-h,12.6%)}
/* 图片吃满容器：--char-h 就能用「场景高度的百分比」，换任何手机比例都不会跑掉
   （原本两处都写 var(--char-h) 是固定 px，屏幕一高人物就相对变小） */
.char-mini.walk-sprite img{height:100%;width:auto}
.char-mini.walk-sprite.walking img{animation:none}
.char-mini.walk-sprite.face-left{transform:translate(-50%,-90%) scaleX(-1)}
@keyframes walkstep{
  0%{transform:translateY(0) rotate(-3.2deg)}
  25%{transform:translateY(-3px) rotate(0deg) scaleY(1.015)}
  50%{transform:translateY(0) rotate(3.2deg)}
  75%{transform:translateY(-3px) rotate(0deg) scaleY(1.015)}
  100%{transform:translateY(0) rotate(-3.2deg)}
}
.char-mini.walking .mini-shadow{animation:walkshadow .34s ease-in-out infinite}
@keyframes walkshadow{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(.82);opacity:.8}}
@media (prefers-reduced-motion: reduce){.char-mini{transition:none}.char-mini.walking img{animation:none}.char-mini.walking .mini-shadow{animation:none}}
.hot.placed.big img{width:56px;height:56px}
.hot.placed img{width:38px;height:38px}
/* 宠物：慢慢溜达 */
.pet-mini{position:absolute;transform:translate(-50%,-88%);pointer-events:auto;cursor:pointer;z-index:3;
  transition:left var(--petwalk,2s) ease-in-out, top var(--petwalk,2s) ease-in-out}
/* 尺寸跟着房间比例走：她在房间里高 --char-h（12.6% 场景高），鸡约她的一半。
   原本钉死 34px，萤幕一大就变成一只小蚂蚁、一小又太胖。
   她说「在房间有点不明显」——从 0.45 提到 0.52，只大一点点，还是明显比她矮一截。 */
.pet-mini{height:calc(var(--char-h,12.6%) * 0.52)}
/* 让鸡从木地板上「浮」出来的三件事，都刻意做得很轻，不要变成贴纸：
   ① 脚下一小片接地影 —— 棕鸡跟木地板同色系，没有影子就是糊在地上
   ② 图本身一层 1px 的落影 —— 只把轮廓从背景推开，不加外框
   ③ 站着的时候偶尔低头啄一下 —— 动态最抓眼睛，但频率压到五秒一次，不会吵 */
.pet-mini img{height:100%;width:auto;image-rendering:pixelated;display:block;
  filter:drop-shadow(0 1px 1px rgba(48,30,16,.34))}
.pet-mini .pet-shadow{position:absolute;left:50%;bottom:1px;width:62%;height:16%;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at center, rgba(46,30,18,.30), rgba(46,30,18,0) 70%)}
.pet-mini.face-left{transform:translate(-50%,-88%) scaleX(-1)}
.pet-mini.moving img{animation:petbob .5s ease-in-out infinite}
@keyframes petbob{50%{transform:translateY(-2px)}}
/* 站着发呆时的低头啄食。每只鸡的 --peck 延迟是随机的（见 game.js），
   四只不会同一拍一起点头，那样会很假。 */
.pet-mini:not(.moving) img{animation:petpeck 5.4s ease-in-out infinite;animation-delay:var(--peck,0s)}
@keyframes petpeck{
  0%,84%,100%{transform:translateY(0) rotate(0)}
  88%{transform:translateY(2px) rotate(7deg)}
  92%{transform:translateY(2px) rotate(7deg)}
  96%{transform:translateY(0) rotate(0)}
}
@media (prefers-reduced-motion: reduce){.pet-mini{transition:none}
  .pet-mini.moving img,.pet-mini:not(.moving) img{animation:none}}

/* 农场 */
.farm-map{position:relative;border:var(--bw2) solid var(--outline);border-radius:var(--r-scene);overflow:hidden;box-shadow:var(--shadow)}
.farm-map img.bg{width:100%;display:block}
/* 农场＝真全屏（同家：等比铺满、只裁两边极窄边、热区=图坐标） */
#app.farm-full #screen{padding:0;position:relative;overflow:hidden;background:#2a1f18}
#app.farm-full .page{position:absolute;inset:0;margin:0;animation:none}
#app.farm-full .farm-map{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  height:100%;width:auto;aspect-ratio:.558;max-width:none;border:none;border-radius:0;box-shadow:none;margin:0}
#app.farm-full .farm-map img.bg{width:100%;height:100%;display:block;object-fit:cover}
/* 全屏农场左上浮动圆钮（浇水 / 采集背包 / 图鉴 / 鱼篓） */
/* 工具坞：平时收成一颗钮，点开才横向展开三组（集市／农活／收藏）。
   放在农场最上方草地上——竖着放会压到第一排土垄，那格就点不到了。 */
/* 顶栏现在浮在画面上，工具坞改挂右上角那片空草地：
   左上角是订单木牌（画在底图里，挪不动），坞压上去木牌就点不到了。
   位置用「底图百分比」，因为场景是等比铺满、两侧会裁掉一点，写死 px 会跑到画面外。 */
/* 工具坞。以前是农场页里的一块（position:absolute 在 .farm-map 上），所以只有农场看得到。
   她要「每一頁都顯示、包括釣魚，而且可以拖到左右兩側」——
   所以改成挂在 body 上的 fixed 浮层，位置由 --dock-y 与 .side-l/.side-r 决定。
   钓鱼是同一份文件里的 iframe 覆盖层，z-index 拉到它之上就会浮在钓鱼画面上。 */
.farm-hud{position:fixed;top:var(--dock-y,120px);z-index:var(--z-dock);
  display:flex;flex-direction:column;gap:6px;
  touch-action:none;   /* 拖曳时不要让浏览器抢走手势去滚动 */
  padding:6px;border-radius:14px;
  background:linear-gradient(180deg,rgba(72,48,28,.62),rgba(52,34,20,.62));
  border:2px solid rgba(28,18,10,.34);box-shadow:0 3px 0 rgba(28,18,10,.28);
  transition:padding .16s ease}
/* 毛玻璃只挂在展开的时候。挂在基底那条规则上的话，收起来之後 iOS 还是会糊着那块空盒子。 */
.farm-hud.open{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
/* 收起来时只剩那一颗钮本身：不要底板、不要边框、不要影子，也不要毛玻璃。
   她说「未點開的時候去黑底」——原本那层深色底板会在房间/钓鱼上糊一块。 */
.farm-hud:not(.open){background:none;border:none;box-shadow:none;padding:0;
  backdrop-filter:none;-webkit-backdrop-filter:none}
/* 靠左 / 靠右：贴边放，展开的格子往画面内侧长 */
.farm-hud.side-r{right:10px;align-items:flex-end}
.farm-hud.side-l{left:10px;align-items:flex-start}
.farm-hud.dragging{transition:none;opacity:.9;box-shadow:0 6px 14px rgba(28,18,10,.4)}
/* 有弹窗时先躲起来：它浮在最上层（要能盖过钓鱼），不躲的话会压在弹窗上面 */
.farm-hud.hidden{display:none}
/* 拖到一半时两边那条半透明的落点提示已经拿掉了（她说不要）：
   那条比工具坞本身还显眼，而且吸到哪边放手就看得到，不必先预告。 */
/* 收纳钮 */
/* 她说「工具欄的可以稍微再大一點點」：整组 42 → 50，图标 28 → 33，抽屉格线跟着走。 */
.farm-hud .fh-toggle{position:relative;flex:0 0 auto;width:50px;height:50px;border-radius:13px;
  border:2px solid rgba(28,18,10,.30);background:linear-gradient(180deg,#fffaf0,#f2ddb6);
  cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 0 rgba(28,18,10,.26);
  transition:transform .08s ease,box-shadow .08s ease}
.farm-hud .fh-toggle .fh-tg{font-size:22px;line-height:1;color:#5a3a20;font-weight:800}
/* 她画的那两张本身就是一块木牌（不是贴在按钮上的记号），所以有图的时候
   要把程式原本画的奶油色底、描边、阴影全部收掉，不然会变成「木牌贴在按钮上」两层框。
   图直接铺满整颗钮。 */
.farm-hud .fh-toggle.has-art{background:none;border:none;box-shadow:none;border-radius:0}
.farm-hud .fh-toggle.has-art:active{box-shadow:none}
.farm-hud .fh-toggle .fh-tg-ic{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;display:block;
  filter:drop-shadow(0 2px 0 rgba(28,18,10,.30))}
.farm-hud .fh-toggle:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 rgba(28,18,10,.26)}
/* 抽屉：收起时宽度归零并淡出 */
.fh-tray{display:grid;grid-template-columns:repeat(2,50px);gap:7px;overflow:hidden;
  max-height:260px;opacity:1;transition:max-height .2s ease,opacity .16s ease,margin .2s ease}
/* 收起来时抽屉不只要「看不见」，还要「不占位」。
   抽屉是两栏 42px 的格线，就算 max-height 归零，它的**宽度**还是 90px ——
   於是整个工具坞的盒子跟着变成 90px 宽，比那颗钮往左多出 48px。
   平常看不出来，但基底那条规则有 backdrop-filter:blur(3px)，iOS 会把那整块盒子的背景
   照样糊掉：她截图里那条「多出来的透明条」就是这块被糊过的空盒子。
   （backdrop-filter 在 iOS 上就算後面改成 none 也常常留着，所以这里两件事一起做：
     ① 收起时把抽屉的宽度也归零 ② 毛玻璃只在展开时才挂上去。） */
.farm-hud:not(.open) .fh-tray{max-height:0;width:0;opacity:0;margin-top:-6px;pointer-events:none}
/* 分组只是逻辑上的，视觉上让按钮直接落进格子里 */
.farm-hud .fh-grp{display:contents}
.farm-hud .fh-grp + .fh-grp{padding-left:6px;border-left:1px solid rgba(255,240,214,.24)}
@media (prefers-reduced-motion: reduce){.farm-hud,.fh-tray{transition:none}}
.farm-hud .fh-btn{width:50px;height:50px;border-radius:13px;border:2px solid rgba(28,18,10,.30);
  background:linear-gradient(180deg,#fffaf0,#f2ddb6);line-height:1;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 0 rgba(28,18,10,.26);
  display:flex;align-items:center;justify-content:center;position:relative;padding:0;
  -webkit-tap-highlight-color:transparent;transition:transform .08s ease,box-shadow .08s ease}
.farm-hud .fh-btn .fh-em{font-size:24px;line-height:1}
.farm-hud .fh-btn .fh-ic{width:34px;height:34px;object-fit:contain;image-rendering:pixelated;display:block}
.farm-hud .fh-btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 rgba(28,18,10,.26)}
.farm-hud .fh-cnt{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 3px;border-radius:var(--r-pill);
  background:var(--brick);color:#fff8ec;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff8ec}
/* 一季一图，昼夜靠罩层：醒着=暖金；睡着=冷蓝 */
.bg-tint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light}
.bg-tint.warm{background:linear-gradient(180deg,rgba(246,196,106,.28),rgba(244,162,89,.10))}
.bg-tint.cool{background:linear-gradient(180deg,rgba(36,50,82,.42),rgba(59,74,107,.30));mix-blend-mode:multiply}
/* 昼夜：人物/宠物/作物现在都在 .bg-tint 罩层之下，跟房间被同一层光染色，
   夜晚一起变冷变暗、白天一起偏暖——不再单独给前景加滤镜（否则会双重压暗）。 */
/* 直接点背景里画好的 8 块土：透明点击区 */
.soil{position:absolute;width:15.5%;height:7.8%;transform:translate(-50%,-50%);cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:var(--r-cell);transition:background .12s}
.soil:hover,.soil:active{background:rgba(255,248,236,.14)}
/* 还没开垦的那排：压暗＋挂锁，点了引导去工坊 */
.soil.locked{background:rgba(24,16,8,.42);box-shadow:inset 0 0 0 2px rgba(24,16,8,.30)}
/* 挂锁：锁身一块圆角砖 + 上面一道锁梁，都用边框画，缩放不会糊 */
.soil.locked .q.lock{width:15px;height:12px;border-radius:3px;opacity:.9;
  background:#efe4cc;box-shadow:inset 0 0 0 2px rgba(45,30,16,.65)}
.soil.locked .q.lock::before{content:'';position:absolute;left:50%;top:-7px;transform:translateX(-50%);
  width:9px;height:9px;border-radius:5px 5px 0 0;border:2.5px solid #efe4cc;border-bottom:none}
.soil.locked .q.lock::after{content:'';position:absolute;left:50%;top:4px;transform:translateX(-50%);
  width:3px;height:4px;border-radius:1px;background:rgba(45,30,16,.65)}
/* 缺水：原本是一圈砖红框＋一颗 iOS 彩色水滴 emoji，太跳也不像同一套画风。
   改成「土干掉」的暖色薄罩 ＋ 自己画的一颗小水滴，安静但一眼看得到。 */
.soil.dry{box-shadow:inset 0 0 0 2px rgba(181,83,58,.34);border-radius:var(--r-cell);
  background:rgba(201,138,44,.13)}
.soil .q.drop{top:-5px;right:0;width:11px;height:14px;opacity:.95;text-shadow:none;
  background:linear-gradient(180deg,#7fc4e8,#4a90c2 60%,#356b8c);
  border:1.5px solid rgba(61,36,18,.85);
  border-radius:50% 50% 50% 50% / 66% 66% 34% 34%;
  clip-path:polygon(50% 0%, 78% 34%, 92% 62%, 78% 90%, 50% 100%, 22% 90%, 8% 62%, 22% 34%);
  box-shadow:inset 2px -2px 0 rgba(255,255,255,.35);
  animation:dropbob 1.8s ease-in-out infinite}
@keyframes dropbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}

/* 长按一块地浮出来的名牌：种的是什么、什么状态 */
.peek{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%,4px);
  background:rgba(58,42,32,.92);color:#fff8ec;border-radius:var(--r-chip);
  padding:3px 8px;display:flex;flex-direction:column;align-items:center;gap:1px;
  white-space:nowrap;pointer-events:none;z-index:30;opacity:0;transition:opacity .18s,transform .18s}
.peek.on{opacity:1;transform:translate(-50%,0)}
.peek b{font-size:12px;font-weight:700;line-height:1.2}
.peek span{font-size:10px;opacity:.85;line-height:1.2}
/* 作物在土块里的大小与位置：她说植物「有一点點大」。
   缩到 132%（原 150%），并往下压一点，让图自带的那块土堆压在土垄上，而不是浮在半空。 */
.soil img{width:96%;height:132%;object-fit:contain;transform:translateY(-2%);filter:drop-shadow(0 2px 2px rgba(0,0,0,.30))}
.soil .q{position:absolute;font-size:20px;color:#fff8ec;text-shadow:0 1px 2px rgba(0,0,0,.5);opacity:.9}
/* 空地上那颗「＋」以前是系统字体画的加号：字体一换形状就变，
   压在像素田上又细又亮，跟旁边的画风完全不是一回事。改成自己画的一块「可以种」的记号：
   虚线圆角框 ＋ 中间两条粗杠，缩放怎么变都是同一个形状。 */
.soil .q.plus{width:26px;height:26px;border-radius:7px;opacity:.62;text-shadow:none;
  border:2px dashed rgba(255,248,236,.72);box-shadow:0 1px 2px rgba(0,0,0,.35)}
.soil .q.plus::before,.soil .q.plus::after{content:'';position:absolute;left:50%;top:50%;
  background:rgba(255,248,236,.9);border-radius:2px;box-shadow:0 1px 1px rgba(0,0,0,.35)}
.soil .q.plus::before{width:12px;height:3px;transform:translate(-50%,-50%)}
.soil .q.plus::after{width:3px;height:12px;transform:translate(-50%,-50%)}
.soil:active .q.plus{opacity:.95}
/* 熟了那颗星以前是「✦」这个字。同样的毛病 —— 换成 clip-path 切出来的四角星，
   金色、有描边、会一亮一亮，跟游戏里别处的金币是同一个色系。 */
.soil .q.ready{top:-7px;right:0;width:16px;height:16px;text-shadow:none;opacity:1;
  background:linear-gradient(180deg,#f3dda2,var(--gold) 55%,#ba8136);
  clip-path:polygon(50% 0%,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0% 50%,40% 40%);
  filter:drop-shadow(0 1px 0 rgba(58,42,32,.55));
  animation:readytwinkle 1.6s ease-in-out infinite}
@keyframes readytwinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.22) rotate(22deg)}}
.soil .q.grow{font-size:9px;font-weight:700;background:rgba(58,42,32,.82);color:#fff8ec;border-radius:6px;
  padding:1px 5px;line-height:1.5;text-shadow:none;position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);white-space:nowrap}
.night-item{position:absolute;cursor:pointer;transform:translate(-50%,-50%)}
.night-item img{width:30px;height:30px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
/* 水量条（一次浇满随时间掉，到 0 枯萎） */
.water-bar{position:absolute;bottom:-1px;left:14%;right:14%;height:4px;background:rgba(58,42,32,.45);border-radius:3px;overflow:hidden;z-index:2}
.water-bar i{display:block;height:100%;background:#4a90c2}
.water-bar i.low{background:#c98a2c}
/* 好感未揭示：问号占位 */
.npc-portrait.mystery{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#3a2e26,#2a211b)}
.npc-portrait.mystery span{font-size:40px;font-weight:800;color:#f0c46a;opacity:.85}
@keyframes bob{50%{transform:translateY(-4px)}}

/* 图鉴 */
.collection-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
/* 格子以前是一块平的米色方块加一圈黑边，跟游戏里别处的槽位（.art-slot、背包格）不是同一套，
   三十格排在一起就显得很素。改成同一套：纸色渐层 + 内高光 + 底部一道暖影，收到的还会浮起来一点。 */
.cell{aspect-ratio:1/1;background:var(--grad-chip);border:var(--bw) solid var(--outline);border-radius:var(--r-cell);
  display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -3px 0 rgba(138,90,46,.14),0 2px 0 rgba(58,42,32,.13);
  transition:transform .1s ease,box-shadow .1s ease}
.cell:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 rgba(58,42,32,.13)}
.cell img{width:78%;height:78%}
/* 还没收到的：整格沉下去、图变剪影 —— 一眼分得出「有」跟「没有」 */
.cell.locked{background:rgba(120,80,40,.13);
  box-shadow:inset 0 2px 3px rgba(58,42,32,.20),inset 0 -1px 0 rgba(255,255,255,.22)}
.cell.locked img{filter:brightness(0) saturate(0);opacity:.28}
.cell .hb{position:absolute;top:1px;left:3px;font-size:10px;color:var(--brick)}

/* 心动 / NPC */
.npc-card{display:flex;gap:12px;align-items:center}
.npc-portrait{width:74px;height:100px;flex:0 0 auto;border:var(--bw) solid var(--outline);border-radius:var(--r-item);
  overflow:hidden;background:linear-gradient(180deg,#f7d9a6,#eabf86);display:flex;align-items:flex-end;justify-content:center;padding:8px 8px 4px}
.npc-portrait img{height:100%;width:auto;max-width:100%;object-fit:contain}
.hearts{display:flex;align-items:center;gap:3px;margin:4px 0}
.hearts .h{width:16px;height:16px}
/* 好感条跟任务页那两条进度条统一：凹进去的槽 + 有高光的填充。
   以前是「深棕粗描边 + 一块平砖红」，跟这个游戏别处的条子长得不一样。 */
.affbar{height:9px;border-radius:5px;overflow:hidden;
  background:rgba(120,80,40,.20);box-shadow:inset 0 1px 0 rgba(58,42,32,.16)}
.affbar>i{display:block;height:100%;transition:width .35s ease;
  background:linear-gradient(180deg,#d9705a,var(--brick))}
.love-ready{box-shadow:0 0 0 3px var(--gold),var(--shadow);animation:glow 1.3s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 5px var(--pink),var(--shadow)}}
.stage-dots{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.stage-dots .sd{font-size:11px;font-weight:700;padding:3px 8px;line-height:1;
  border:var(--bw) solid var(--outline);border-radius:var(--r-pill);background:var(--grad-chip);
  box-shadow:0 1.5px 0 rgba(58,42,32,.14)}
.stage-dots .sd.done{background:var(--grad-brick);color:#fff8ec;box-shadow:0 1.5px 0 #6e392b}
.stage-dots .sd.ready{background:var(--grad-gold);box-shadow:0 1.5px 0 #93662f}
.stage-dots .sd.wait{opacity:.62;border-style:dashed;box-shadow:none}
/* 「下一段是什么、还差多少」。以前只有四颗写着 ♥10/♥30 的药丸 ——
   十二段剧情每段都有名字，页面上一个字都没露。 */
.npc-card .nx{display:flex;align-items:center;gap:7px;margin-top:9px;padding:6px 9px;
  border-radius:var(--r-item);background:rgba(120,80,40,.07);
  border:var(--bw) solid rgba(120,80,40,.20);font-size:12.5px;min-width:0}
.npc-card .nx.on{background:rgba(181,83,58,.10);border-color:rgba(163,87,62,.34)}
.npc-card .nx.done{background:rgba(134,165,72,.12);border-color:rgba(134,165,72,.34)}
.npc-card .nx .nx-tag{flex:0 0 auto;font-weight:800;color:var(--brick);font-size:11.5px;
  padding:2px 7px;border-radius:var(--r-pill);background:var(--grad-chip);
  box-shadow:inset 0 0 0 1.5px rgba(138,90,46,.30)}
.npc-card .nx .nx-name{flex:1;min-width:0;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.npc-card .nx .nx-need{flex:0 0 auto;color:var(--muted);font-size:11.5px}
.npc-card .nx .nx-go{flex:0 0 auto;color:var(--brick);font-weight:800;font-size:11.5px}
.npc-card .nx .nx-wait{flex:0 0 auto;color:var(--muted);font-size:11px}
/* 他留下来的东西：四格小图，没拿到的是虚线空格 */
.npc-card .keeps{display:flex;gap:6px;margin-top:8px}
.npc-card .kp{width:34px;height:34px;flex:0 0 auto;border-radius:9px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--grad-chip);border:var(--bw) solid rgba(120,80,40,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.npc-card .kp.off{background:rgba(120,80,40,.07);border-style:dashed;box-shadow:none}
.npc-card .kp .kp-ic{width:88%;height:88%;object-fit:contain;image-rendering:pixelated}
.npc-card .kp .lv-note{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:8.5px;line-height:1.15;text-align:center;padding:2px;color:var(--muted);
  background:var(--grad-paper)}
/* 送礼那颗以前是整行左靠的大钮，右边一大片空白，卡片看起来是歪的。往右靠、也不用那么大。 */
.npc-card .npc-acts{justify-content:flex-end;margin-top:9px}
.npc-card .npc-acts .btn{padding:7px 18px;font-size:13.5px}

/* 商店 */
.shop-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:6px}
.shop-tabs button{white-space:nowrap;border:var(--bw) solid var(--outline);border-radius:var(--r-pill);
  padding:5px 12px;font-size:13px;cursor:pointer;font-family:inherit;background:var(--grad-tab);box-shadow:0 2px 0 rgba(58,42,32,.12)}
.shop-tabs button.active{background:var(--grad-tab-on);box-shadow:0 2px 0 #6e392b;color:#fff8ec}
.shop-item{display:flex;gap:10px;align-items:center;padding:8px;background:var(--panel);border:var(--bw) solid var(--outline);border-radius:var(--r-item)}
.shop-item img{width:48px;height:48px;flex:0 0 auto}
.shop-item .si-body{flex:1;min-width:0}
.shop-item .si-name{font-size:13.5px;font-weight:700}
.shop-item .si-desc{font-size:11.5px;color:var(--muted);line-height:1.45}
/* 右栏得有个宽度上限。以前只给「用做的换的」那三只鸡限过宽（.deed），
   可是种子的解锁条件（「采满 8 颗草莓解锁（草莓 0/8）」）走的是普通的 .hint，
   没有上限就一路撑开，把左边的说明挤成两三个字一行 ——
   大黄种子那一行「酸得很有主见。煮过　采满 8 颗草莓解锁　之后就好说话了。」
   两段文字插在一起，就是这么来的。所有 .hint 一起限宽、一起靠右折行。 */
.shop-item .si-buy{flex:0 0 auto;max-width:136px;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.shop-item .si-buy .hint{max-width:136px;text-align:right;font-size:11px;line-height:1.45;white-space:normal}
/* 价钱做成一枚小价签（金底 + 内描边），不再是一串浮在按钮上方的散字。
   跟工坊那颗「金币＋数字」的买钮是同一套语言。 */
.price{font-size:12.5px;font-weight:800;display:inline-flex;align-items:center;gap:4px;
  padding:2.5px 9px;border-radius:var(--r-pill);color:#5a4322;
  background:linear-gradient(180deg,#f0dcae,#dfc384);
  box-shadow:inset 0 0 0 1.5px rgba(138,90,46,.40),0 1.5px 0 rgba(58,42,32,.12)}

/* 任务页。以前是两张白卡、每行一个名字加一颗按钮，太素。
   现在每条是一张有图的小卡，上面加一条今天的进度；勾掉的不消失只压暗，
   看得到「今天做了几件」才有做完的感觉。 */
.task-card{padding-bottom:6px}
.tk-head{display:flex;align-items:baseline;gap:8px}
.tk-head h3{margin:0;flex:1}
.tk-head .tk-prog{font-size:13px;font-weight:800;color:var(--brick);font-variant-numeric:tabular-nums}
.tk-bar{height:6px;border-radius:3px;background:rgba(120,80,40,.16);overflow:hidden;margin:9px 0 11px}
.tk-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--moss),#a8c96a);transition:width .3s ease}
.tk-row{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-item);
  background:rgba(120,80,40,.06);border:var(--bw) solid rgba(120,80,40,.20)}
.tk-row+.tk-row{margin-top:7px}
.tk-row.kk{background:rgba(181,83,58,.08);border-color:rgba(181,83,58,.26)}
/* 做完的那一行压暗——但压的是图跟字，不压右边那颗勾。
   勾才是「做完了」的那个奖励，整行一起淡掉的话，她画的那颗打勾框看起来像坏的。 */
.tk-row.done .tk-ic{opacity:.5;filter:grayscale(.35)}
.tk-row.done .tk-txt{opacity:.5}
/* 每一行左边那颗图给它一块小底板 —— 光一个漂浮的图示看起来像清单，垫起来才像游戏里的一栏 */
.tk-row .tk-ic{width:46px;height:46px;flex:0 0 auto;padding:5px;object-fit:contain;image-rendering:pixelated;
  border-radius:10px;background:var(--grad-chip);border:var(--bw) solid rgba(120,80,40,.26)}
.tk-row .tk-txt{flex:1;min-width:0}
.tk-row .tk-name{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35}
.tk-row.done .tk-name{text-decoration:line-through;text-decoration-thickness:2px}
.tk-row .tk-gain{margin-top:3px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px}
.tk-row .tk-late{margin-left:6px;font-size:11px;color:var(--brick);display:inline-flex;align-items:center;gap:3px}
/* 逾期那一条前面挂她画的红徽章 */
.ic-late{width:13px;height:13px;display:inline-block;flex:0 0 auto;
  background:var(--task-late) center/contain no-repeat;image-rendering:pixelated}
/* 三件都勾完，标题右边挂一枚小勋章 */
.tk-head .tk-medal{width:30px;height:30px;flex:0 0 auto;margin-left:2px;object-fit:contain;
  image-rendering:pixelated;animation:medalpop .45s ease}
@keyframes medalpop{from{transform:scale(.4) rotate(-18deg);opacity:0}to{transform:none;opacity:1}}
.tk-check{flex:0 0 auto;width:34px;height:34px;border-radius:10px;cursor:pointer;padding:0;
  border:var(--bw) solid var(--outline);background:var(--grad-chip);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 0 rgba(28,18,10,.22);
  font-size:17px;font-weight:800;color:#fff8ec;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:transform .08s ease}
.tk-check:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 rgba(28,18,10,.22)}
.tk-check.on{background:var(--moss);border-color:var(--outline);box-shadow:none}
.tk-check:disabled{cursor:default}
/* 她画了勾选框（tk_box_off / tk_box_on），有图就整颗换成图：框、底、勾都在图里，
   所以把 CSS 那套木框与阴影全关掉，不然会是「图上再套一层框」。 */
.tk-check.art{width:40px;height:40px;border:none;border-radius:0;background:none;box-shadow:none;
  background-image:var(--tk-box-off);background-size:100% 100%;background-repeat:no-repeat;
  image-rendering:pixelated}
.tk-check.art:active{transform:translateY(2px);box-shadow:none}
.tk-check.art.on{background-image:var(--tk-box-on)}
/* 跟别处的空状态（.empty）同一套虚线纸板 */
.tk-empty{text-align:center;color:var(--muted);font-size:13.5px;line-height:1.9;padding:16px 14px;margin-top:4px;
  border:2px dashed rgba(138,90,46,.34);border-radius:var(--r-item);background:rgba(120,80,40,.05)}
/* 「今天在农场」那三条：自动勾的，没有按钮，所以右边只放一颗小圆点当状态灯 */
.tk-row.auto{background:rgba(134,165,72,.08);border-color:rgba(134,165,72,.30)}
.tk-row.auto.done{opacity:1;background:rgba(134,165,72,.16)}
.tk-row.auto.done .tk-name{text-decoration:none}
.tk-dot{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#fff8ec;line-height:1;
  background:rgba(120,80,40,.10);border:var(--bw) dashed rgba(120,80,40,.4)}
.tk-dot.on{background:var(--moss);border:var(--bw) solid var(--outline);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.tk-dot.art{width:28px;height:28px;border:none;background:var(--tk-dot-off) center/100% 100% no-repeat;
  box-shadow:none;image-rendering:pixelated}
.tk-dot.art.on{background-image:var(--tk-dot-on)}
/* 「一百天」：四条长线目标，只有进度条没有按钮 —— 它们不是今天能做完的事 */
.goal-row{padding:9px 2px}
.goal-row+.goal-row{border-top:1px dashed rgba(120,80,40,.22)}
.goal-row .gl-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.goal-row .gl-name{font-size:13.5px;font-weight:700}
.goal-row .gl-num{font-size:14px;font-weight:800;color:var(--brick);font-variant-numeric:tabular-nums}
.goal-row .gl-max{font-size:11.5px;font-weight:700;color:var(--muted)}
.goal-row .gl-bar{height:8px;border-radius:4px;overflow:hidden;
  background:rgba(120,80,40,.16);box-shadow:inset 0 1px 0 rgba(58,42,32,.12)}
.goal-row .gl-bar i{display:block;height:100%;transition:width .35s ease;
  background:linear-gradient(180deg,#e0b455,var(--wood-d))}
.goal-row.done .gl-num{color:var(--moss)}
.goal-row.done .gl-bar i{background:linear-gradient(180deg,#a8c96a,var(--moss))}

/* 券夹：商店「奖励券」分页最上面那一块。买来的券收在这，按「用掉」才是真的跟他开口。 */
.wallet{background:var(--grad-paper);border:var(--bw2) solid var(--wood-frame);border-radius:var(--r-card);
  padding:11px 12px;margin-bottom:12px;box-shadow:var(--shadow-card)}
.wallet-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.wallet-h b{font-size:15px}
/* 一张券＝一张票根：左边是撕票那半（金色、有虚线齿孔和两个咬口），右边写它换来什么。
   以前是一行普通清单，跟商品列表长得一样 —— 它是「券」，就得看起来像张票。 */
.ticket{position:relative;display:flex;align-items:stretch;border-radius:var(--r-item);
  border:var(--bw) solid var(--wood-frame);background:var(--grad-chip);
  box-shadow:0 3px 0 rgba(58,42,32,.14), inset 0 0 0 2px rgba(255,255,255,.5)}
.ticket+.ticket{margin-top:10px}
.ticket .tk-stub{position:relative;flex:0 0 60px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;padding:9px 4px;
  background:var(--grad-gold);border-right:2px dashed rgba(61,36,18,.42);
  border-radius:calc(var(--r-item) - 2px) 0 0 calc(var(--r-item) - 2px)}
/* 撕票线上下各咬掉一口。填的是券夹纸色，看起来就是被打孔机咬过的两个缺口。 */
.ticket .tk-stub::before,.ticket .tk-stub::after{content:'';position:absolute;right:-7px;
  width:12px;height:12px;border-radius:50%;background:#f7ecd0}
.ticket .tk-stub::before{top:-7px}
.ticket .tk-stub::after{bottom:-7px}
.ticket .tk-stub-ic{width:32px;height:32px}
.ticket .tk-stub-n{font-size:11px;font-weight:800;color:var(--ink);line-height:1;
  padding:2px 6px;border-radius:var(--r-pill);background:rgba(255,250,236,.72);
  box-shadow:inset 0 0 0 1.5px rgba(61,36,18,.35)}
.ticket .tk-body{flex:1;min-width:0;padding:10px 11px;display:flex;align-items:center;gap:10px}
.ticket .tk-lines{flex:1;min-width:0}
.ticket .tk-tname{font-size:13.5px;font-weight:800;line-height:1.3}
.ticket .tk-tdesc{margin-top:3px;font-size:11.5px;color:var(--muted);line-height:1.45}
.ticket .tk-use{flex:0 0 auto;padding:8px 15px;font-size:13px}
.wallet-past{margin-top:9px;text-align:center;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* 物品详情卡：背包／鱼篓点开一样东西看到的那一张。
   以前只有「名字＋有几份＋三颗按钮」，像结帐画面不像背包。
   现在是「大图在左、名字与分类在右、底下一句介绍、再底下写它还能干嘛」。 */
.item-sheet .it-head{display:flex;gap:14px;align-items:center}
.item-sheet .it-art{flex:0 0 auto;width:86px;height:86px;border-radius:var(--r-item);
  background:var(--panel-2);border:var(--bw) solid var(--outline);
  box-shadow:inset 0 -3px 0 rgba(138,90,46,.14);
  display:flex;align-items:center;justify-content:center;padding:6px}
.item-sheet .it-art .it-img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.item-sheet .it-art .egg{position:static;width:40px;height:52px}
.item-sheet .it-meta{flex:1;min-width:0}
.item-sheet .it-name{font-size:19px;font-weight:800;color:var(--ink);line-height:1.25}
.item-sheet .it-tag{display:inline-block;margin-top:5px;font-size:11px;font-weight:800;color:#fff8ec;
  padding:2px 9px;border-radius:var(--r-pill);text-shadow:0 1px 0 rgba(58,42,32,.35)}
.item-sheet .it-tag.k-crop{background:var(--moss)}
.item-sheet .it-tag.k-proc{background:var(--brick)}
.item-sheet .it-tag.k-egg{background:#c9973f}
.item-sheet .it-tag.k-fish{background:var(--water)}
.item-sheet .it-num{margin-top:7px;font-size:12.5px;color:var(--muted)}
.item-sheet .it-num b{font-size:15px;color:var(--ink)}
.item-sheet .it-desc{margin:13px 0 0;font-size:13px;line-height:1.7;color:var(--ink);
  background:rgba(120,80,40,.07);border-left:3px solid rgba(120,80,40,.28);
  border-radius:0 var(--r-cell) var(--r-cell) 0;padding:9px 11px}
.item-sheet .it-uses{margin-top:9px;display:flex;flex-direction:column;gap:5px}
.item-sheet .it-use{font-size:12px;color:var(--muted);padding-left:14px;position:relative}
.item-sheet .it-use::before{content:"·";position:absolute;left:4px;font-weight:800;color:var(--brick)}
.item-sheet .it-total{margin-top:11px;text-align:right;font-size:12.5px;color:var(--muted)}
.item-sheet .it-total b{font-size:16px;color:var(--ink)}
/* 卖几份：−／数字／＋ 一组，右边「全部」「留 1」两颗快捷。
   数字那格用等宽数字并写死宽度，1→10→100 的时候两颗钮不会左右跳。 */
.qty-row{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.qty{display:flex;align-items:center;flex:0 0 auto;border-radius:var(--r-btn);overflow:hidden;
  border:var(--bw2) solid var(--outline);background:var(--grad-chip);
  box-shadow:0 3px 0 rgba(58,42,32,.16),inset 0 1px 0 rgba(255,255,255,.6)}
.qty .qty-b{width:46px;height:44px;flex:0 0 auto;padding:0;cursor:pointer;font-family:inherit;
  border:none;background:none;font-size:22px;font-weight:800;color:var(--ink);line-height:1;
  display:flex;align-items:center;justify-content:center}
.qty .qty-b:active{background:rgba(120,80,40,.14)}
.qty .qty-b:disabled{opacity:.3;cursor:default}
.qty .qty-n{min-width:56px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);
  background:rgba(120,80,40,.10);
  box-shadow:inset 2px 0 0 rgba(61,36,18,.18),inset -2px 0 0 rgba(61,36,18,.18)}
.qty-quick{display:flex;gap:6px;flex:1;min-width:0;justify-content:flex-end}
.qty-quick .qty-chip{padding:8px 13px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:700;
  color:var(--ink);border:var(--bw) solid var(--outline);border-radius:var(--r-pill);
  background:var(--grad-tab);box-shadow:0 2px 0 rgba(58,42,32,.14)}
.qty-quick .qty-chip:active{transform:translateY(2px);box-shadow:0 0 0 rgba(58,42,32,.14)}
.qty-quick .qty-chip:disabled{opacity:.38;cursor:default;box-shadow:none;transform:none}

/* 采集包网格 */
.harvest-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.hv-slot{position:relative;aspect-ratio:1/1;background:var(--panel-2);border:var(--bw) solid var(--outline);border-radius:var(--r-cell);
  display:flex;align-items:center;justify-content:center;padding:3px;box-shadow:inset 0 -2px 0 rgba(138,90,46,.12)}
.hv-slot img{width:82%;height:82%;object-fit:contain;image-rendering:pixelated}
.hv-slot .cnt{position:absolute;right:2px;bottom:0;font-size:11px;font-weight:800;color:var(--ink);background:rgba(246,232,202,.92);border-radius:5px;padding:0 4px;line-height:1.5}
/* 单价印在左上角：不点进去也知道这一格值多少，要清仓时才决定得了先卖哪一样 */
.hv-slot .unit{position:absolute;left:2px;top:1px;font-size:9px;font-weight:700;color:var(--muted);
  background:rgba(246,232,202,.86);border-radius:4px;padding:0 3px;line-height:1.5}
/* 背包分区的小标题：左边「作物 12 份 · 340G」，右边一颗「这类全卖」 */
.bag-sec{display:flex;align-items:center;gap:8px;margin:14px 0 7px}
.bag-sec .bs-name{flex:1;min-width:0;font-size:13.5px;font-weight:800;color:var(--ink)}
.bag-sec .btn.sm{padding:5px 10px;font-size:12px;box-shadow:0 3px 0 #9c6a2c}
.bag-sec .btn.sm:active{box-shadow:0 1px 0 #9c6a2c}
.sell-big,.col-big{width:88px;height:88px;object-fit:contain;image-rendering:pixelated;display:block;margin:8px auto 4px}

/* ===== 剧情呈现层（§11 五级视觉重量）===== */
.overlay{position:fixed;inset:0;z-index:var(--z-overlay);display:flex;align-items:center;justify-content:center;
  background:rgba(30,20,14,.55);padding:18px}
.overlay[hidden]{display:none}
.overlay .frame{max-width:460px;width:100%;overflow-y:auto;animation:pop .28s ease;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;max-height:82vh;max-height:min(82vh, calc(100dvh - 110px))}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
/* 1 全屏卷轴（主线，最重） */
.frame.scroll{background:var(--paper);border:5px solid var(--outline);border-radius:6px;
  box-shadow:0 0 0 6px var(--wood-d),0 14px 30px rgba(0,0,0,.4);padding:22px 20px}
.frame.scroll .ep-head{text-align:center;border-bottom:var(--bw) dashed var(--wood-d);padding-bottom:10px;margin-bottom:14px}
.frame.scroll .ep-head .ep-day{font-size:12px;color:var(--muted)}
.frame.scroll .ep-head .ep-title{font-size:18px;font-weight:800}
/* 2 NPC 立绘对话框 */
.frame.portrait{background:transparent;display:flex;flex-direction:column;align-items:center;gap:0}
.frame.portrait .stand{height:210px}
.frame.portrait .dbox{background:var(--panel);border:4px solid var(--outline);border-radius:var(--r-scene);padding:14px 16px;width:100%;box-shadow:var(--shadow)}
/* 3 信纸 */
.frame.letter{background:var(--paper);border:var(--bw2) solid var(--outline);border-radius:var(--r-cell);box-shadow:var(--shadow);padding:0;overflow:hidden}
.frame.letter .lt-top{display:flex;gap:10px;padding:14px 16px 6px}
.frame.letter .chair{width:52px;height:70px;opacity:.8;flex:0 0 auto}
.frame.letter .lt-face{width:56px;height:76px;flex:0 0 auto;object-fit:contain}
.frame.letter .lt-body{padding:6px 18px 18px;background:repeating-linear-gradient(transparent,transparent 27px,rgba(58,42,32,.12) 28px)}
/* 4 小纸条卡（小剧场） */
.frame.note{background:var(--panel);border:var(--bw2) solid var(--wood-frame);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);padding:16px 18px;max-width:380px;transform:rotate(-.6deg)}
.frame.note .note-tag{font-size:11px;color:var(--muted);margin-bottom:6px}

.line{margin:0 0 10px;line-height:1.75;font-size:15px}
.line .who{font-weight:800;margin-right:4px}
.line.n{color:var(--ink)}
.line.tv{color:var(--water)}
.line.he,.line.qin,.line.jin{color:var(--brick);font-weight:600}
.line.she{color:var(--ink)}
.scene-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.scene-tap{text-align:center;color:var(--muted);font-size:12px;margin-top:8px}

/* 5 toast（系统提示，最轻） */
.toasts{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + 12px);z-index:var(--z-toast);display:flex;
  flex-direction:column;align-items:center;gap:6px;pointer-events:none;padding:0 16px}
.toast{background:var(--ink);color:#fff8ec;border-radius:var(--r-pill);padding:8px 16px;font-size:13px;box-shadow:var(--shadow);animation:tin .3s ease;max-width:100%}
.toast.gold{background:var(--gold);color:var(--ink)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 电视机内嵌 */
.tv-screen{background:var(--water);border:4px solid #222;border-radius:var(--r-btn);padding:16px;color:#eaf0f7;text-align:center}
.tv-stars{display:flex;justify-content:center;gap:4px;margin:8px 0}
.tv-stars img{width:26px;height:26px}
.tv-daily{background:#1b2b44;border-radius:var(--r-cell);padding:10px 12px;font-size:14px;line-height:1.6;margin-top:8px}
.tv-sign{font-size:11px;color:#a9bcd6;margin-top:4px;text-align:right}

/* 回忆册 */
.mem-tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.mem-tabs button{border:var(--bw) solid var(--outline);border-radius:var(--r-pill);padding:4px 11px;font-size:12.5px;cursor:pointer;font-family:inherit;
  background:var(--grad-tab);box-shadow:0 2px 0 rgba(58,42,32,.12)}
.mem-tabs button.active{background:var(--grad-tab-on);box-shadow:0 2px 0 #6e392b;color:#fff8ec}
.mem-item{background:var(--panel);border:var(--bw) solid var(--outline);border-radius:var(--r-item);padding:10px 12px;margin-bottom:8px;cursor:pointer}
.mem-item .mi-t{font-weight:700;font-size:13.5px}
.mem-item .mi-s{font-size:11px;color:var(--muted)}
.mem-group{font-size:12px;font-weight:800;color:var(--brick);margin:14px 2px 6px;letter-spacing:.5px}
.mem-group:first-of-type{margin-top:12px}

/* 弹窗通用（gifting / choose） */
.sheet{background:var(--grad-paper);border:var(--bw2) solid var(--wood-frame);border-radius:var(--r-card);padding:16px;max-width:420px;width:100%;
  box-shadow:var(--shadow-card);max-height:82vh;max-height:min(82vh, calc(100dvh - 96px));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sheet h3{margin:0 0 10px}
/* 工坊：三条升级线，依序买 */
.workshop-sheet{max-width:430px}
.ws-head{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.ws-head .ws-title{font-size:20px;font-weight:800;color:var(--ink)}
.ws-head .ws-sub{font-size:12px;color:var(--ink-soft,#8a6a4a)}
.ws-line{margin-bottom:14px;padding:11px 12px;border-radius:12px;
  background:rgba(120,80,40,.06);border:2px solid rgba(120,80,40,.18)}
.ws-line.soon{opacity:.62}
.wl-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.wl-head .wl-name{font-size:16px;font-weight:800;color:var(--ink)}
.wl-head .wl-lv{font-size:12px;font-weight:800;color:var(--brick)}
.wl-head .wl-desc{font-size:12px;color:var(--ink-soft,#8a6a4a);width:100%}
.wl-tier{display:flex;align-items:center;gap:10px;padding:8px 9px;margin-top:6px;border-radius:9px;
  background:rgba(255,250,240,.7);border:1px solid rgba(120,80,40,.16)}
.wl-tier.next{border-color:var(--brick);background:rgba(255,250,240,.96);
  box-shadow:0 0 0 2px rgba(181,83,58,.16)}
.wl-tier.locked{opacity:.5}
.wl-tier .wt-lv{flex:0 0 auto;width:20px;height:20px;border-radius:6px;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;background:rgba(120,80,40,.18);color:var(--ink)}
.wl-tier.owned .wt-lv{background:rgba(95,159,69,.85);color:#fff8ec}
.wl-tier.next .wt-lv{background:var(--brick);color:#fff8ec}
.wl-tier .wt-ic{width:30px;height:30px;object-fit:contain;image-rendering:pixelated;flex:0 0 auto}
.wl-tier.locked .wt-ic{filter:grayscale(.7) opacity(.75)}
.wl-tier .wt-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.wl-tier .wt-name{font-size:14px;font-weight:700;color:var(--ink)}
.wl-tier .wt-eff{font-size:11.5px;line-height:1.5;color:var(--ink-soft,#8a6a4a)}
.wl-tier .wt-done{font-size:11px;font-weight:800;color:#5f9f45;white-space:nowrap}
.wl-tier .wt-cost{flex:0 0 auto;margin-left:4px;font-size:12px;font-weight:700;color:var(--ink-faint,#a98d6c);
  white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.wl-tier .wt-cost .ic-coin{opacity:.65}
.wl-tier .btn{white-space:nowrap;padding:6px 11px;font-size:13px}

/* ── 图片容器通则 ──────────────────────────────────────────────
   「生成图带进来框就不对」的根因：图自己带了底/边/阴影，CSS 又套一层框 → 双重框、圆角对不上。
   规则：素材永远是「去背、无边、无阴影、同尺寸画布」，框一律由这里给。
   任何新图只要套 .art-slot（外框）＋ img.art（图本身），比例和留白就自动一致。 */
.art-slot{display:flex;align-items:center;justify-content:center;
  background:var(--grad-chip);border:var(--bw) solid var(--outline);border-radius:var(--r-item);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);overflow:hidden;padding:6%}
.art-slot > img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;display:block}
.art-slot.plain{background:none;border:none;box-shadow:none;padding:0}   /* 只要对齐、不要框时用 */
.art-slot.sq{aspect-ratio:1/1}                                            /* 正方槽：图再怎么换都不会撑变形 */

/* 农场里的实体订单木牌 */
.farm-board{position:absolute;left:5.5%;top:20%;width:15%;z-index:14;cursor:pointer;
  filter:drop-shadow(0 3px 2px rgba(40,24,10,.35))}
.farm-board img{width:100%;height:auto;display:block;image-rendering:pixelated}
.farm-board:active{transform:translateY(2px)}
.farm-board .fh-cnt{top:-6px;right:-6px}

/* 厨房加工台：上面两口锅，下面配方 */
.kitchen-sheet{max-width:430px}
.pot-row{display:flex;gap:10px}
.pot{flex:1 1 0;min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:10px;border-radius:14px;background:linear-gradient(180deg,#fbeecb,#f2d6a4);
  border:2px dashed rgba(120,80,40,.35);text-align:center}
.pot.busy{border-style:solid;border-color:rgba(120,80,40,.4)}
.pot.done{border-style:solid;border-color:var(--brick);box-shadow:0 0 0 3px rgba(181,83,58,.22)}
.pot .pot-ic{width:48px;height:48px;object-fit:contain;image-rendering:pixelated}
.pot .pot-name{font-size:14px;font-weight:800;color:var(--ink)}
.pot .pot-empty{font-size:15px;font-weight:800;color:var(--muted)}
.pot .pot-sub{font-size:11.5px;color:var(--muted)}
.pot .btn{padding:6px 12px;font-size:13px}
.ws-sub-h{margin:14px 0 8px;font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--brick)}
.recipe{display:flex;align-items:center;gap:10px;padding:9px 10px;margin-bottom:8px;border-radius:11px;
  background:rgba(255,250,240,.72);border:2px solid rgba(120,80,40,.16)}
.recipe.ok{border-color:rgba(95,159,69,.5);background:rgba(255,250,240,.96)}
.recipe.locked{opacity:.5}
.recipe .rc-ic{width:42px;height:42px;object-fit:contain;image-rendering:pixelated;flex:0 0 auto}
.recipe .rc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.recipe .rc-name{font-size:14.5px;font-weight:800;color:var(--ink);display:flex;align-items:baseline;gap:7px}
.recipe .rc-time{font-size:11px;font-weight:700;color:var(--brick)}
.recipe .rc-need{display:flex;flex-wrap:wrap;gap:4px}
.recipe .rc-need .chip{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;padding:2px 7px 2px 4px;
  border-radius:6px;background:rgba(120,80,40,.09);border:1px solid rgba(120,80,40,.2);color:var(--ink);white-space:nowrap}
.recipe .rc-need .chip.got{background:rgba(95,159,69,.16);border-color:rgba(95,159,69,.5);font-weight:700}
.recipe .rc-need .chip-ic{width:17px;height:17px;object-fit:contain;image-rendering:pixelated}
.recipe .rc-desc{font-size:11.5px;line-height:1.5;color:var(--muted)}
.recipe .rc-tail{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto}
.recipe .rc-val{font-size:14px;font-weight:800;color:var(--brick);display:flex;align-items:center;gap:3px}
.recipe .rc-tail .btn{padding:6px 12px;font-size:13px}

/* 订单板：一张一张手写字条 */
.order-sheet{max-width:430px}
.ob-head{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.ob-head .ob-title{font-size:20px;font-weight:800;color:var(--ink)}
.ob-head .ob-sub{font-size:12px;color:var(--ink-soft,#8a6a4a)}
.slip{display:flex;flex-direction:column;gap:7px;padding:13px 14px;margin-bottom:10px;
  background:linear-gradient(180deg,#fffaf0,#f6e6c6);border:2px solid rgba(120,80,40,.22);
  border-radius:12px;box-shadow:0 2px 0 rgba(120,80,40,.16)}
.slip.ok{border-color:rgba(95,159,69,.55);box-shadow:0 0 0 2px rgba(95,159,69,.18),0 2px 0 rgba(120,80,40,.16)}
.slip.kk{border-color:var(--brick);border-width:3px}
.slip-kind{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--ink-soft,#8a6a4a)}
.slip.kk .slip-kind{color:var(--brick)}
.slip-from{font-size:16px;font-weight:800;color:var(--ink)}
.slip-want{display:flex;flex-wrap:wrap;gap:5px}
.slip-want .chip{display:inline-flex;align-items:center;gap:4px;
  font-size:12px;padding:3px 9px 3px 5px;border-radius:6px;white-space:nowrap;
  background:rgba(120,80,40,.09);border:1px solid rgba(120,80,40,.2);color:var(--ink)}
.slip-want .chip-ic{width:20px;height:20px;object-fit:contain;image-rendering:pixelated;flex:0 0 auto}
.slip-want .chip.got{background:rgba(95,159,69,.16);border-color:rgba(95,159,69,.5);font-weight:700}
.slip-quote{font-size:13px;line-height:1.6;color:var(--ink-soft,#8a6a4a);
  border-left:3px solid rgba(120,80,40,.28);padding-left:9px}
.slip.kk .slip-quote{border-left-color:var(--brick);color:var(--ink)}
.slip-pay{display:flex;align-items:center;gap:8px;padding-top:9px;
  border-top:1px dashed rgba(120,80,40,.28)}
.slip-pay .pay-g{font-size:16px;font-weight:800;color:var(--brick);display:flex;align-items:center;gap:3px}
.slip-pay .pay-aff{font-size:12px;font-weight:700;color:var(--brick)}
.slip-pay .btn{margin-left:auto}

/* 衣柜 2 选一：两张展示卡，选中高亮 + 「穿着中」角标 */
.wardrobe-sheet{max-width:390px}
.wardrobe-head{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.wardrobe-head .wh-title{font-size:20px;font-weight:800;color:var(--ink)}
.wardrobe-head .wh-sub{font-size:12px;color:var(--ink-soft,#8a6a4a)}
.wardrobe-row{display:flex;gap:14px;justify-content:center}
.wardrobe-card{flex:1 1 0;max-width:180px;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 10px 14px;border-radius:20px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg,#fbeecb,#f2d6a4);border:3px solid rgba(120,80,40,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 3px 0 rgba(120,80,40,.18);
  transition:transform .1s ease, box-shadow .12s ease, border-color .12s ease}
.wardrobe-card .wc-pv{width:100%;height:156px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;
  border-radius:15px;background:radial-gradient(120% 85% at 50% 15%, rgba(255,255,255,.6), rgba(190,150,100,.16));
  box-shadow:inset 0 2px 7px rgba(120,80,40,.2)}
.wardrobe-card .art{height:146px;image-rendering:pixelated;filter:drop-shadow(0 3px 2px rgba(60,40,20,.28))}
.wardrobe-card .wc-name{font-weight:800;color:var(--ink);font-size:15px;margin-top:8px}
.wardrobe-card .wc-sub{font-size:11px;color:var(--ink-soft,#8a6a4a)}
.wardrobe-card.on{border-color:var(--brick);
  box-shadow:0 0 0 3px rgba(181,83,58,.28), inset 0 1px 0 rgba(255,255,255,.55), 0 3px 0 rgba(120,80,40,.2)}
.wardrobe-card.on::after{content:'✓ 穿着中';position:absolute;top:9px;right:9px;background:var(--brick);color:#fff8ec;
  font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;box-shadow:0 1px 0 rgba(120,60,40,.35)}
.wardrobe-card:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 0 rgba(120,80,40,.2)}
/* 长列表弹窗：表头与「合上」贴边固定，中间列表自己滚 */
.sheet.tall{display:flex;flex-direction:column;padding:0}
.sheet.tall>.sheet-head{padding:14px 16px 8px;position:sticky;top:0;background:var(--panel);z-index:2;border-bottom:var(--bw) solid rgba(138,90,46,.35)}
.sheet.tall>.sheet-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:12px 16px;flex:1 1 auto}
.sheet.tall>.sheet-foot{padding:10px 16px 14px;position:sticky;bottom:0;background:var(--panel);border-top:var(--bw) solid rgba(138,90,46,.35)}
/* 空状态以前就是一段孤零零的灰字浮在面板中间，看着像还没做完。
   改成一块虚线纸板：这里本来会有东西，只是现在没有。 */
.empty{color:var(--muted);font-size:13px;line-height:1.9;text-align:center;padding:18px 14px;margin-top:8px;
  border:2px dashed rgba(138,90,46,.34);border-radius:var(--r-item);background:rgba(120,80,40,.05)}
.center{text-align:center}
.mt{margin-top:12px}

/* 设置开关 */
.set-row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid rgba(138,90,46,.18)}
.set-l{flex:1;min-width:0}
.set-t{font-size:14px;font-weight:700}
.set-d{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.toggle{flex:0 0 auto;width:48px;height:28px;border-radius:var(--r-pill);border:var(--bw) solid var(--outline);
  background:#c9beac;position:relative;cursor:pointer;transition:background .15s;padding:0}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff8ec;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.toggle.on{background:var(--moss)}
.toggle.on::after{left:22px}

/* —— 湖边钓鱼：入口木牌 + 全屏 iframe —— */
.fish-spot{position:absolute;transform:translate(-50%,-100%);z-index:var(--z-scene);cursor:pointer;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.4));animation:fishbob 2.4s ease-in-out infinite;display:flex;flex-direction:column;align-items:center;gap:1px}
@keyframes fishbob{50%{transform:translate(-50%,-108%)}}
.fish-spot .fs-sign{width:58px;height:auto;image-rendering:pixelated;display:block}
.fish-spot .fs-tag{font-size:10px;font-weight:800;color:#fff8ec;background:rgba(58,42,32,.82);border-radius:6px;padding:1px 6px;letter-spacing:.06em;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.fish-spot:active{animation:none;transform:translate(-50%,-100%) scale(.93)}
@media (prefers-reduced-motion: reduce){.fish-spot{animation:none}}
/* 过场幕 / 加载中。
   她说换页「一跳一跳」——上一格直接被下一格盖掉，中间什麼都没有。
   这层幕盖在最上面（比钓鱼的 iframe 还上面，因为进湖边正是要盖住它载入的过程）。
   加载的图案没有另外画：就是她自己的走路图两格轮着放，等於她正在走过去。 */
.curtain{position:fixed;inset:0;z-index:var(--z-curtain);background:#241608;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s ease}
.curtain.on{opacity:1;pointer-events:auto}
.cur-in{display:flex;flex-direction:column;align-items:center;gap:14px}
.cur-walk{position:relative;width:60px;height:60px}
.cur-walk img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
/* 两格交替：第二格把同一段动画往前挪半个周期，就是「左脚右脚」 */
.cur-walk img{animation:cur-step .56s steps(1,end) infinite}
.cur-walk img:nth-child(2){animation-delay:-.28s}
@keyframes cur-step{0%,49.9%{opacity:1}50%,100%{opacity:0}}
.cur-t{font-size:13px;color:rgba(255,248,236,.82);letter-spacing:.08em}
/* 清单页之间不盖幕，只让内容自己淡一下 —— 换一张纸而已，盖幕就变成拖 */
#screen{transition:opacity .13s ease}
#screen.swapping{opacity:0}
@media(prefers-reduced-motion:reduce){
  .curtain,#screen{transition:none}
  .cur-walk img{animation:none}
  .cur-walk img:nth-child(2){opacity:0}
}

.fish-overlay{position:fixed;inset:0;z-index:var(--z-fish);background:var(--shell-fish,#5f7346);display:block}
.fish-frame{width:100%;height:100%;border:none;display:block;background:transparent}
/* 回农场的出口做在场景里（木桥最左端），不再浮一颗按钮在画面上 */

/* 农场草地上的蛋：没有专门的素材，直接用 CSS 画——一颗带暖色高光的小椭圆，
   四种鸡各一个色。会轻轻上下浮动，让她一眼看得到「地上有东西可以捡」。 */
.egg{position:absolute;width:17px;height:22px;transform:translate(-50%,-50%);cursor:pointer;z-index:12;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  border:1.5px solid rgba(80,32,32,.75);
  box-shadow:0 2px 0 rgba(58,42,32,.22), inset -2px -3px 0 rgba(80,50,30,.18), inset 2px 3px 0 rgba(255,255,255,.5);
  animation:eggbob 2.4s ease-in-out infinite}
.egg.egg_brown{background:#c08a52}
.egg.egg_cream{background:#f0e4d2}
.egg.egg_gold {background:#d9b256}
.egg.egg_black{background:#8a7466}
.egg:active{transform:translate(-50%,-50%) scale(.9)}
/* 她画了四颗（egg_brown / egg_cream / egg_gold / egg_black）。有图就整颗换成图：
   壳色、高光、描边都在图里，所以 CSS 那颗椭圆的底色、圆角、描边、内阴影全关掉 ——
   不然会变成「图外面再套一圈壳」。浮动（eggbob）跟落地那道影留着，那两个本来就该由 CSS 出，
   所以生成方案里特别写了「图里不要画影子」。 */
.egg.art{background:none;border:none;border-radius:0;box-shadow:none;
  background-size:contain;background-position:center;background-repeat:no-repeat;
  image-rendering:pixelated;
  filter:drop-shadow(0 2px 0 rgba(58,42,32,.26))}
.egg.art.egg_brown{background-image:var(--egg-brown)}
.egg.art.egg_cream{background-image:var(--egg-cream)}
.egg.art.egg_gold {background-image:var(--egg-gold)}
.egg.art.egg_black{background-image:var(--egg-black)}
/* 场景里那颗小，图缩下去描边会糊 —— 稍微放大一点点，看得清楚 */
.egg.art:not(.inv){width:20px;height:25px}
/* 面板／背包格子里的蛋：场景版是「以座标为中心」所以自带位移与浮动，
   直接搬进格子就会偏一半、还在那里上下飘。这个变体把那些都关掉。 */
.egg.inv{position:relative;left:auto;top:auto;transform:none;animation:none;
  z-index:auto;cursor:inherit;margin:0 auto}
.egg.inv:active{transform:none}
@keyframes eggbob{0%,100%{margin-top:0}50%{margin-top:-3px}}

/* 鸡舍面板：一行一只鸡，还没到手的压暗并写清楚差多少 */
.coop-row{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-top:8px;border-radius:var(--r-item);
  background:var(--grad-chip);border:var(--bw) solid var(--wood-frame);cursor:pointer}
.coop-row.locked{opacity:.55;cursor:default;filter:grayscale(.5)}
.coop-row.on{box-shadow:0 0 0 2px var(--gold) inset}
.coop-ic{width:38px;height:38px;object-fit:contain;image-rendering:pixelated;flex:0 0 auto}
.coop-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.coop-txt b{font-size:14px}
.coop-txt .muted{font-size:11.5px;line-height:1.35}
.coop-tag{flex:0 0 auto;font-size:11px;padding:3px 8px;border-radius:var(--r-pill);
  background:var(--grad-gold);color:var(--ink);border:var(--bw) solid #93662f}

/* 电视：今天那句话还没看 → 萤幕亮起来（看过就熄）。
   分两层：.tv-glass 贴在萤幕玻璃那一小块上（座标是对着底图量的），负责「亮」；
   .zone.tv-on 是罩住整台电视的点击区，负责把光溢到柜子和墙上。
   以前只有后者，光整片糊在电视外围，萤幕本身还是暗的 —— 她要的是萤幕亮。 */
.tv-glass{position:absolute;pointer-events:none;z-index:2;border-radius:3px;
  background:radial-gradient(ellipse at 50% 42%, rgba(255,250,226,.95) 0%, rgba(255,238,180,.82) 52%, rgba(255,218,138,.58) 84%, rgba(255,202,112,.34) 100%);
  box-shadow:0 0 9px 3px rgba(255,220,140,.50), 0 0 24px 9px rgba(255,200,110,.24);
  mix-blend-mode:screen;   /* 用 screen 叠，底图的萤幕纹路会透出来，像真的亮着，不是贴一块黄纸 */
  animation:tvglass 2.4s ease-in-out infinite}
@keyframes tvglass{0%,100%{opacity:.72}50%{opacity:1}}
.zone.tv-on{background:radial-gradient(ellipse at 50% 45%, rgba(255,236,170,.20), rgba(255,214,120,.08) 55%, transparent 72%);
  box-shadow:0 0 16px 5px rgba(255,214,120,.20);border-radius:6px;animation:tvglow 2.6s ease-in-out infinite}
@keyframes tvglow{0%,100%{opacity:.72}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.tv-glass,.zone.tv-on{animation:none}}


/* 送礼面板顶上那张「好感从哪来」小表。以前这三条散在程式里 ——
   她不会知道交一张他寄来的订单比送一份通用礼物还多。 */
.aff-src{margin:10px 0 12px;padding:8px 11px;border-radius:var(--r-item);
  background:rgba(120,80,40,.06);border:var(--bw) solid rgba(120,80,40,.20)}
.aff-src .as-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:12.5px;color:var(--muted);padding:3px 0}
.aff-src .as-row + .as-row{border-top:1px dashed rgba(120,80,40,.20)}
.aff-src .as-row b{color:var(--brick);font-size:13px;font-variant-numeric:tabular-nums}
.aff-src .as-row.hi{color:var(--ink);font-weight:700}

/* ── 心动小屋 ──
   三个人各一格「他留下来的东西」。一开始是空的，好感每推一档就多一件，
   点物件＝重看那一幕。a（KK）那格刻意不是房间而是信箱旁那面墙 ——
   整个故事他从没出现过，做成房间会把设定拆掉。 */
.love-sheet{max-width:430px}
.lv-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.lv-head .lv-title{font-size:19px;font-weight:800;color:var(--ink)}
.lv-head .lv-sub{font-size:12.5px;color:var(--muted)}
.lv-scene{position:relative;aspect-ratio:4/3;border-radius:var(--r-scene);overflow:hidden;
  border:var(--bw2) solid var(--wood-frame);
  background:var(--ui-bg, linear-gradient(180deg,#f7d9a6,#f4c583)) 0 0 / 300px repeat, #e6c184;
  box-shadow:inset 0 3px 10px rgba(58,42,32,.22)}
/* 有背景图的时候：图铺满，原本那层木纹底不要了 */
.lv-scene.art{background-size:cover;background-position:center;image-rendering:pixelated}
.lv-slot{position:absolute;width:23%;aspect-ratio:1/1;transform:translate(-50%,-50%);
  border-radius:var(--r-item);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease}
.lv-slot:active{transform:translate(-50%,-50%) scale(.93)}
.lv-slot .lv-ic{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 3px 0 rgba(58,42,32,.30))}
/* 还没拿到的那几格：一个虚线的空位，看得出「这里以后会有东西」 */
.lv-slot.empty{background:rgba(58,42,32,.16);border:2px dashed rgba(255,248,236,.45);
  backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}
.lv-slot.empty .lv-q{width:14px;height:14px;border-radius:50%;
  background:rgba(255,248,236,.55);box-shadow:0 1px 2px rgba(0,0,0,.3)}
/* 图鉴没画的那几件（#11 黑西装、#15 保温盒），还有金小葵♥150 本来就刻意没有物件 ——
   那几格退回一张字条，上面是那一段的标题。 */
.lv-slot .lv-note{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  padding:8px;border-radius:var(--r-item);text-align:center;line-height:1.35;
  font-size:11.5px;font-weight:700;color:#6b543c;
  background:var(--grad-paper);border:var(--bw) solid var(--wood-frame);
  box-shadow:0 3px 0 rgba(58,42,32,.22);transform:rotate(-3deg)}
.lv-note-line{margin:10px 2px 0;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.7}