/* =========================================================
 * 汉正老街 · 样式 (css/style.css)  v4
 * 双端铁律：PC 1440 三栏 / 手机 414 单页一屏 + 底部抽屉
 * 手机端不切页——场景/订单/货架全在一页；
 * 进货 / 百宝箱 / 账本 = 从底部滑出的抽屉（覆盖式，不跳页）。
 * ========================================================= */
:root{
  --bg:#F3EADA; --card:#FFFBF3; --line:#E4D5BC;
  --ink:#3A3128; --ink-2:#7B6A55; --ink-3:#A8977F;
  --brand:#C4553B; --brand-2:#E8A33D; --green:#5E9E52;
  --shadow:0 2px 10px rgba(90,70,40,.10);
  --radius:14px;
  --bar-h:60px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow-x:hidden}
body{
  background:var(--bg);color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  user-select:none;
  background-image:radial-gradient(rgba(200,175,135,.20) 1px,transparent 1px);
  background-size:22px 22px;
}
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:100%;}

/* ---------- 顶栏 ---------- */
.topbar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;background:linear-gradient(180deg,#B8462E,#C4553B);
  color:#FFF3E2;box-shadow:0 2px 8px rgba(120,50,30,.25);z-index:5;
}
.brand{display:flex;flex-direction:column;line-height:1.15}
.brand-sub{font-size:10px;opacity:.72;letter-spacing:2px}
.brand-main{font-size:20px;font-weight:800;letter-spacing:3px}
.stats{display:flex;gap:8px;align-items:center}
.stat{
  position:relative;
  display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.16);
  padding:5px 10px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;
}
.stat i{font-style:normal;font-size:11px;width:16px;height:16px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.3)}
.stat b{font-size:15px;display:inline-block}
.stat em{font-style:normal;font-size:11px;opacity:.8;margin-left:2px}
.s-stam b{color:#FFE4A6}

/* ---------- 微交互：数字一变就弹一下 + 飘个 ±N ---------- */
.stat b.bump{animation:stat-bump .52s cubic-bezier(.2,.9,.3,1)}
@keyframes stat-bump{
  0%{transform:scale(1)}28%{transform:scale(1.34);color:#FFF0B4}
  62%{transform:scale(.955)}100%{transform:scale(1)}}
.stat b.bump-down{animation:stat-bump-down .5s cubic-bezier(.2,.9,.3,1)}
@keyframes stat-bump-down{
  0%{transform:scale(1)}28%{transform:scale(1.16);color:#DAE6C8}
  100%{transform:scale(1)}}
.float-n{position:absolute;left:50%;top:-2px;font-size:12.5px;font-weight:800;
  pointer-events:none;white-space:nowrap;letter-spacing:.5px;
  animation:float-n 1.15s cubic-bezier(.2,.8,.3,1) forwards}
.float-n.plus{color:#FFE9A8;text-shadow:0 1px 5px rgba(70,30,0,.78)}
.float-n.minus{color:#DCE8F2;text-shadow:0 1px 5px rgba(20,40,60,.72)}
@keyframes float-n{
  0%{opacity:0;transform:translate(-50%,6px) scale(.75)}
  20%{opacity:1;transform:translate(-50%,-7px) scale(1.05)}
  100%{opacity:0;transform:translate(-50%,-34px) scale(1)}}

/* ---------- 主区 ---------- */
.main{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;padding:12px;gap:12px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:12px;margin-bottom:12px}
.center{display:flex;flex-direction:column}
.ph{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:1px;
  display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.ph-gap{margin-top:18px}
.ph-tip{font-size:11px;font-weight:400;color:var(--ink-3)}

/* ---------- 场景 ---------- */
.scene{
  position:relative;height:210px;border-radius:12px;overflow:hidden;
  /* 兜底底色（图没加载出来时也不至于露白） */
  background:linear-gradient(160deg,#DCC7A3 0%,#CBAA7D 45%,#B08E62 100%);
  transition:filter .4s;
  isolation:isolate; /* 把发光层的混合关在场景里，别溢到卡片外面去 */
  --rich:0; /* 0=开局冷清 → 1=末期兴旺，驱动氛围浓度，由 app.js 按等级写入 */
}
.scene::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,240,210,.20) 0%,transparent 35%,rgba(40,26,12,.46) 100%)}
/* 阶段色调：让同/不同阶段呈现相应氛围 */
.scene-tint{position:absolute;inset:0;z-index:1;pointer-events:none;transition:.4s}
.scene.t1 .scene-tint{background:rgba(70,62,50,.34)}
.scene.t2 .scene-tint{background:rgba(95,75,50,.16)}
.scene.t3 .scene-tint{background:rgba(130,85,40,.05)}
.scene.t4 .scene-tint{background:rgba(220,170,90,.06);mix-blend-mode:screen}
.scene.t5 .scene-tint{background:rgba(255,200,110,.10);mix-blend-mode:screen}
.scene.t6 .scene-tint{background:rgba(255,220,140,.16);mix-blend-mode:screen}
.scene-mask{position:absolute;inset:0;z-index:4;background:rgba(120,100,70,.35);opacity:0;transition:.3s}
.scene.dirty .scene-mask{opacity:1}
.scene-title{position:absolute;left:12px;bottom:10px;z-index:5;display:flex;flex-direction:column;
  text-shadow:0 1px 4px rgba(0,0,0,.5);color:#fff;
  transition:transform .6s cubic-bezier(.2,.84,.24,1),opacity .6s}
.scene-title.pop{animation:title-pop 1.5s cubic-bezier(.2,.84,.24,1)}
@keyframes title-pop{0%{transform:translateY(9px);opacity:0}
  22%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.scene-title b{font-size:17px;letter-spacing:2px}
.scene-title span{font-size:11px;opacity:.92}
.scene-clean{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;background:rgba(40,30,20,.55);
  cursor:pointer} /* 整块可点：不必非点准按钮，点哪擦哪 */
.clean-title{color:#FFF3E2;font-weight:700;letter-spacing:2px}
.clean-bar{width:60%;height:10px;background:rgba(255,255,255,.25);border-radius:999px;overflow:hidden}
.clean-bar span{display:block;height:100%;width:0;background:var(--brand-2);transition:.25s}
.clean-hint{font-size:11px;color:#FFE9C8;opacity:.78;letter-spacing:1px}

/* ---------- 场景：图层 / 呼吸推镜 / 氛围动态 ---------- */
/* 图层双层交替：换阶段时交叉淡入；外层的极缓推镜让静止插画有呼吸感 */
.scene-kb{position:absolute;inset:0;z-index:0;
  animation:kb-breathe 46s ease-in-out infinite alternate}
@keyframes kb-breathe{
  from{transform:scale(1.015) translate3d(0,0,0)}
  to{transform:scale(1.075) translate3d(-.8%,-.9%,0)}}
.scene-bg{position:absolute;inset:0;background-size:cover;background-position:center 38%;
  opacity:0;transition:opacity .85s ease;
  animation:bg-warm 21s ease-in-out infinite alternate}
.scene-bg.on{opacity:1}
/* 整幅画极缓地「暖—亮」呼吸：静止的插画因此活过来 */
@keyframes bg-warm{from{filter:brightness(1) saturate(1)}
  to{filter:brightness(1.05) saturate(1.08)}}
/* 升级：暂停呼吸，改播一次「弹近」，让玩家明确感到「变大/变气派了」 */
.scene.up .scene-kb{animation:kb-pop 1.2s cubic-bezier(.2,.86,.24,1)}
@keyframes kb-pop{0%{transform:scale(1.03)}26%{transform:scale(1.14)}100%{transform:scale(1.045)}}

/* 氛围层（纯 CSS，不动原画一像素）
   ⚠️ 放在调色层之上，并且光效走 mix-blend-mode —— 彩色插画上直接叠半透明白
     会被画面「吃掉」，看不出亮；用发光混合才真的透出光来（2026-10-11 实测）。 */
.fx{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;
  mix-blend-mode:screen} /* 整层走「发光」混合：半透明白直接叠会被画面吃掉，看不出亮 */
.fx-solid{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
/* 阳光：一道斜射光带缓慢扫过 */
.fx-sun{position:absolute;inset:-24%;
  background:linear-gradient(104deg,transparent 30%,rgba(255,238,182,.88) 44%,
    rgba(255,252,232,.52) 51%,transparent 64%);
  filter:blur(7px);
  opacity:calc(.42 + var(--rich,0) * .24);
  animation:fx-sun 24s ease-in-out infinite alternate}
@keyframes fx-sun{from{transform:translate3d(-7%,-3%,0)}to{transform:translate3d(6%,3%,0)}}
/* 薄雾：底部横向流动；店铺越兴旺雾越淡 */
.fx-haze{position:absolute;left:-28%;right:-28%;bottom:-8%;height:48%;
  background:radial-gradient(58% 100% at 50% 100%,rgba(255,246,226,.55),transparent 72%);
  filter:blur(9px);opacity:calc(.56 - var(--rich,0) * .22);
  animation:fx-haze 30s ease-in-out infinite alternate}
@keyframes fx-haze{from{transform:translate3d(-8%,0,0)}to{transform:translate3d(8%,0,0)}}
/* 浮尘：细小微粒缓缓上浮；数量固定，靠透明度随等级由稀到密 */
.fx-dust{position:absolute;inset:0}
.fx-dust i{position:absolute;width:5px;height:5px;border-radius:50%;
  background:rgba(255,246,214,.98);box-shadow:0 0 10px 2px rgba(255,226,150,.9);
  opacity:0;animation:fx-rise linear infinite}
@keyframes fx-rise{
  0%{opacity:0;transform:translate3d(0,10px,0) scale(.5)}
  16%{opacity:calc(.16 + var(--rich,0) * .58)}
  78%{opacity:calc(.14 + var(--rich,0) * .52)}
  100%{opacity:0;transform:translate3d(var(--dx,8px),-66px,0) scale(1.15)}}
.fx-dust i:nth-child(1){left:13%;top:64%;animation-duration:11s;animation-delay:0s;--dx:11px}
.fx-dust i:nth-child(2){left:30%;top:72%;animation-duration:14s;animation-delay:2.3s;--dx:-9px}
.fx-dust i:nth-child(3){left:52%;top:57%;animation-duration:12.5s;animation-delay:4.6s;--dx:13px}
.fx-dust i:nth-child(4){left:67%;top:76%;animation-duration:16s;animation-delay:1.5s;--dx:-10px}
.fx-dust i:nth-child(5){left:83%;top:63%;animation-duration:13s;animation-delay:5.9s;--dx:9px}
.fx-dust i:nth-child(6){left:43%;top:82%;animation-duration:15s;animation-delay:7.4s;--dx:-13px}
/* 落叶：偶尔一片飘下 */
.fx-leaf{position:absolute;inset:0}
.fx-leaf i{position:absolute;top:-14px;width:12px;height:9px;background:#E5A23C;
  box-shadow:0 1px 3px rgba(70,45,10,.55);
  border-radius:60% 12% 62% 14%;opacity:0;animation:fx-fall linear infinite}
.fx-leaf i:nth-child(1){left:21%;animation-duration:18s;animation-delay:3s}
.fx-leaf i:nth-child(2){left:56%;animation-duration:22s;animation-delay:9.5s}
.fx-leaf i:nth-child(3){left:79%;animation-duration:20s;animation-delay:15s}
@keyframes fx-fall{
  0%{opacity:0;transform:translate3d(0,-8px,0) rotate(0)}
  10%{opacity:.9}88%{opacity:.72}
  100%{opacity:0;transform:translate3d(-40px,232px,0) rotate(330deg)}}
/* 飞鸟：很久才掠过一只 */
.fx-bird{position:absolute;inset:0}
.fx-bird i{position:absolute;top:15%;left:-8%;width:2px;height:2px;opacity:0;
  filter:drop-shadow(0 1px 2px rgba(60,40,10,.55));   /* 浅色鸟 + 投影：暗屋顶上才看得见 */
  animation:fx-fly 38s linear infinite}
.fx-bird i::before,.fx-bird i::after{content:"";position:absolute;top:-1px;width:11px;height:11px;
  border-top:2px solid rgba(255,246,230,.78);border-radius:50%}
.fx-bird i::before{left:-9px;transform:rotate(-14deg)}
.fx-bird i::after{right:-9px;transform:rotate(14deg)}
@keyframes fx-fly{
  0%{left:-8%;top:13%;opacity:0}
  7%{opacity:.62}50%{top:8.5%}92%{opacity:.5}
  100%{left:107%;top:12%;opacity:0}}

/* ---------- 升级揭幕：金光爆闪 + 称号大字 + 星屑 ---------- */
.lv-up{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.lv-up[hidden]{display:none}
.lv-flash{position:absolute;inset:0;opacity:0;
  background:radial-gradient(circle at 50% 56%,#FFF7DE 0%,#FFDC93 42%,rgba(255,190,90,0) 76%)}
.lv-up.go .lv-flash{animation:lv-flash .95s ease-out}
@keyframes lv-flash{0%{opacity:0}11%{opacity:.94}100%{opacity:0}}
.lv-big{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;opacity:0;text-align:center;padding:0 14px}
.lv-up.go .lv-big{animation:lv-big 2.5s cubic-bezier(.2,.84,.24,1)}
.lv-big b{font-size:27px;font-weight:900;letter-spacing:6px;text-indent:6px;color:#FFF8E8;
  text-shadow:0 2px 14px rgba(110,54,8,.72),0 0 38px rgba(255,196,96,.62)}
.lv-big span{font-size:11.5px;letter-spacing:2.5px;color:#FFECC4;
  text-shadow:0 1px 8px rgba(90,40,0,.75)}
@keyframes lv-big{
  0%{opacity:0;transform:translateY(18px) scale(.84)}
  20%{opacity:1;transform:none}
  72%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-14px) scale(1.05)}}
.lv-spark{position:absolute;inset:0}
.lv-spark i{position:absolute;left:50%;top:55%;width:6px;height:6px;border-radius:50%;
  background:#FFE9AE;box-shadow:0 0 11px rgba(255,214,120,.95);opacity:0;
  animation:lv-spark 1.55s cubic-bezier(.16,.7,.3,1) forwards}
@keyframes lv-spark{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}
  15%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.15)}}

/* 系统开了「减少动态效果」就全停，只留静态画面 */
@media (prefers-reduced-motion:reduce){
  .scene-kb,.fx *,.lv-up *,.scene-title.pop{animation:none !important}
}

.chapter-tip{font-size:12px;color:var(--ink-2);margin:10px 2px 0;line-height:1.6}

/* ---------- 阿正指路：当前最该做的一件事 ---------- */
.guide{
  display:flex;flex-direction:column;margin-top:10px;
  background:linear-gradient(100deg,#FFF7EF,#FCEEDF);
  border:1px solid #EFD8C2;border-radius:12px;padding:9px 11px;
}
.guide[hidden]{display:none}
.gd-body{display:flex;align-items:center;gap:10px}
/* 福利期标识：让「这是限时新手福利」看得见 */
.gd-tag{align-self:flex-start;margin-bottom:7px;font-size:10px;font-weight:800;
  letter-spacing:.4px;color:#8A4A28;background:#FBE3CB;border-radius:999px;padding:2px 9px}
.gd-tag[hidden]{display:none}
.guide.helper{background:linear-gradient(100deg,#FFF4E2,#FBE4C8);border-color:#EFCBA0}
.gd-ico{font-size:19px;line-height:1;flex:0 0 auto}
.gd-tx{flex:1 1 auto;min-width:0}
.gd-tx b{display:block;font-size:13px;font-weight:800;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-tx span{display:block;font-size:11.5px;color:var(--ink-2);line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guide .btn{flex:0 0 auto;padding:8px 13px;font-size:12.5px;border-radius:9px}
/* 新手期呼吸提示，让「该点哪」一眼可见（Lv4 之后自动停，不吵老玩家） */
.guide.new{animation:gpulse 1.8s ease-in-out infinite}
@keyframes gpulse{
  0%,100%{box-shadow:0 0 0 0 rgba(196,85,59,0)}
  55%{box-shadow:0 0 0 4px rgba(196,85,59,.15)}
}

.scene-actions{display:flex;gap:10px;margin-top:12px}

/* ---------- 进货（新版：一个按钮 · 随机出料） ---------- */
.fetch-one{display:flex;flex-direction:column;gap:9px}
.fetch-go{width:100%;padding:15px 0;font-size:16px;font-weight:800;letter-spacing:2px}
.fetch-go:disabled{opacity:.55}
.fo-line{font-size:11.5px;line-height:1.7;color:var(--ink-2);text-align:center}
.fo-line b{color:var(--brand-2);font-weight:800}
.fo-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.fc{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--line);
  border-radius:9px;background:#FFFDF7;padding:3px 6px 3px 3px}
.fc img{width:22px;height:22px;object-fit:contain;display:block}
.fc em{font-style:normal;font-size:10px;font-weight:800;color:var(--ink-3)}
.fo-note{font-size:11px;line-height:1.6;color:var(--ink-3);text-align:center}
.fo-why{color:#B8462E;font-weight:700}
.scene-actions .btn{flex:1}

/* ---------- 按钮 ---------- */
.btn{
  border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:10px 12px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;
  transition:.15s;font-family:inherit;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.btn:active{transform:scale(.955)}   /* 按压回弹：给点「按下去」的手感 */
.btn-primary{background:linear-gradient(180deg,#D4634A,#C4553B);color:#fff;border-color:#B8462E}
.btn-clean{background:var(--brand-2);color:#4A3000;border-color:#D18F2E}
.btn-sign{width:100%;background:#FFF2D8;border-color:#EBD3A8;color:#8A6A22;margin-top:6px}
.btn-dex{width:100%;background:#EEF4FB;border-color:#CFE0F2;color:#3A6EA5;margin-top:8px}
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed}
.mini{
  border:1px dashed var(--line);background:#FFFDF8;color:var(--ink-2);
  padding:5px 10px;border-radius:999px;font-size:11.5px;font-weight:700;cursor:pointer;
  font-family:inherit;white-space:nowrap;transition:.15s;
}
.mini:active{transform:scale(.96)}
.mini[disabled]{opacity:.4;cursor:not-allowed}

/* ---------- 进货单 ---------- */
.buy-list{display:flex;flex-direction:column;gap:8px}
.buy{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;
  padding:8px 10px;background:#fff;cursor:pointer;transition:.15s}
.buy:active{transform:scale(.985)}
.buy.off{opacity:.5;cursor:not-allowed}
.b-ico{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  font-size:20px;flex:0 0 auto;border-radius:9px;background:#F7F0E2}
.b-ico img{width:30px;height:30px;object-fit:contain;display:block}
.b-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.b-tx b{font-size:13px}
.b-tx em{font-style:normal;font-size:11px;color:var(--ink-3)}
.b-go{font-size:12px;font-weight:700;color:#fff;background:var(--brand);border-radius:999px;
  padding:4px 11px;flex:0 0 auto;white-space:nowrap}
.buy.off .b-go{background:var(--ink-3);font-weight:400}

/* ---------- 百宝箱 ---------- */
.tool-list{display:flex;flex-direction:column;gap:8px}
.tool{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;
  padding:9px 10px;background:#fff;cursor:pointer;transition:.15s}
.tool:active{transform:scale(.985)}
.tool.off{opacity:.5;cursor:not-allowed}
.t-ico{width:34px;height:34px;border-radius:9px;background:#FFF2D8;display:flex;
  align-items:center;justify-content:center;font-size:17px;flex:0 0 auto}
.t-tx{flex:1;min-width:0}
.t-tx b{font-size:13px;display:block}
.t-tx span{font-size:11px;color:var(--ink-3);display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.t-left{font-size:11px;font-weight:700;color:var(--brand);background:#FBE9E4;
  border-radius:999px;padding:3px 9px;flex:0 0 auto;white-space:nowrap}
.t-left.inf{color:var(--green);background:#EDF6EA}

/* ---------- 货架 / 材料（按链分组） ---------- */
.bag{display:flex;flex-direction:column;gap:12px}
.bag-group{}
.bg-head{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  color:var(--ink-2);letter-spacing:1px;margin-bottom:7px}
.bg-head i{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto}
.bg-head span{margin-left:auto;font-weight:400;color:var(--ink-3)}
.bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.mat{
  position:relative;aspect-ratio:1/1;border-radius:12px;border:1px solid var(--line);
  background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;cursor:pointer;transition:.15s;overflow:hidden;
}
/* 链路色条：一眼看得出这件货属于哪条链 */
.mat .cb{position:absolute;left:0;top:0;right:0;height:3px;background:var(--c,transparent);
  border-radius:12px 12px 0 0;z-index:2}
.mat.has-out{padding-bottom:15px}
.mat:active{transform:scale(.95)}
.mat.empty{cursor:default;aspect-ratio:auto;padding:26px 10px;border-style:dashed;background:#FFFDF7}
.mat .ico{margin-top:2px;font-size:28px;line-height:1}
.mat .ico .e{font-size:26px;color:var(--ink-3)}
.mat .nm{font-size:10px;color:var(--ink-2);text-align:center;padding:0 2px;line-height:1.25}
.mat .cnt{position:absolute;right:5px;top:4px;font-size:11px;font-weight:800;
  background:var(--ink);color:#fff;border-radius:999px;padding:0 6px;min-width:18px;text-align:center;z-index:3}
.mat.lv1{border-color:#EBD9B8}
.mat.lv2{border-color:#E0CBA0}
.mat.lv3{border-color:#D2B57C}
.mat.lv4{border-color:#C79E56}
.mat.lv5{border-color:#C4553B;box-shadow:0 0 0 2px rgba(196,85,59,.10)}
.mat.lv6{border-color:#B8462E;box-shadow:0 0 0 2px rgba(184,70,46,.14)}
.mat.lv7{border-color:#A8551F;box-shadow:0 0 0 2px rgba(168,85,31,.16)}
.mat.lv8{border-color:#8E5A12;box-shadow:0 0 0 2px rgba(142,90,18,.18)}
.mat.lv9{border-color:#7A4A0E;box-shadow:0 0 0 2px rgba(122,74,14,.20)}
.mat.lv10{border-color:#8E2F2F;box-shadow:0 0 0 2px rgba(142,47,47,.24);
  background:linear-gradient(180deg,#FFF8EA,#FFEFD3)}
.mat.ready::before{content:"";position:absolute;inset:0;border:2px solid var(--brand-2);
  border-radius:12px;animation:pulse 1.4s infinite;z-index:1}
.mat.partial{border-style:dashed;opacity:.94}
.mat.hi{border-color:#2F8FE0 !important;box-shadow:0 0 0 3px rgba(47,143,224,.28) !important}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.95}}
.mat .ico img{width:42px;height:42px;object-fit:contain;display:block}
/* 底部「→ 产出」预览条：可合成 = 绿，缺料 = 灰棕 */
.mat .out{position:absolute;left:0;right:0;bottom:0;height:15px;display:flex;align-items:center;
  justify-content:center;gap:2px;font-size:9.5px;font-weight:700;color:#fff;padding:0 2px;
  background:linear-gradient(180deg,#5E9E52,#4C8A41);overflow:hidden;white-space:nowrap;z-index:2}
.mat .out.lack{background:linear-gradient(180deg,#9C8871,#7B6A55)}
.mat .out img{width:12px;height:12px;object-fit:contain;flex:0 0 auto}
.mat .out span{overflow:hidden;text-overflow:ellipsis}

/* ---------- 订单 ---------- */
.order-list{display:flex;flex-direction:column;gap:10px}
.order{
  border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff;
  display:flex;flex-direction:column;gap:8px;
}
.order.ok{border-color:#CFE4C8;background:#FBFEF8}
.order-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink-3)}
.order-need{display:flex;gap:8px;flex-wrap:wrap}
.need{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--ink-2);
  background:#F7F0E2;border-radius:8px;padding:3px 7px}
.need.lack{color:#C4553B;background:#FBE9E4}
.need.look{cursor:pointer}
.need.look::after{content:"↗";font-size:10px;opacity:.55;margin-left:1px}
.need .n-ico{font-size:15px;display:inline-flex;align-items:center}
.need .n-ico img{width:18px;height:18px;object-fit:contain;vertical-align:middle;display:block}
.need-empty{font-size:13px;color:var(--ink-3);text-align:center;padding:20px 0}
.order-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.order-reward{font-size:12px;color:var(--ink-2)}
.order-reward b{color:var(--brand);font-size:14px}
.order-btns{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.order .btn{padding:6px 14px;font-size:13px}

/* ---------- 账本 / 品牌 / 广播 ---------- */
.ledger{border:1px dashed var(--line);border-radius:10px;padding:10px;background:#FDF8EE}
.ledger-row{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2);padding:3px 0}
.ledger-row b{color:var(--ink)}
.brand-list{display:flex;flex-direction:column;gap:7px}
.brand{display:flex;justify-content:space-between;align-items:center;font-size:13px;
  border:1px dashed var(--line);border-radius:9px;padding:7px 10px;background:#FDF8EE;color:var(--ink-3)}
.brand.on{border-style:solid;border-color:#CFE4C8;background:#EDF6EA;color:var(--ink)}
.brand .br-nm{font-weight:700}
.brand .br-tip{font-size:11px}
.brand.on .br-tip{color:var(--green)}
.ad-list{display:flex;flex-direction:column;gap:8px}
.ad{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;
  padding:9px 10px;background:#fff;cursor:pointer;transition:.15s}
.ad:active{transform:scale(.98)}
.ad.off{opacity:.5}
.ad .a-ico{width:30px;height:30px;border-radius:8px;background:#FFF2D8;display:flex;
  align-items:center;justify-content:center;font-size:16px;flex:0 0 auto}
.ad .a-tx{flex:1;min-width:0}
.ad .a-tx b{font-size:13px;display:block}
.ad .a-tx span{font-size:11px;color:var(--ink-3);display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ad .ad-left{font-size:11px;color:var(--ink-3);flex:0 0 auto}

/* ---------- 手机底部操作栏 / 抽屉（PC 默认全隐藏） ---------- */
.actionbar{display:none}
.sheet-mask{display:none}
.sheet-head{display:none}

/* [hidden] 必须压过 display:flex / display:block */
.dialog[hidden],.scene-clean[hidden],.sheet-mask[hidden]{display:none !important}

/* ---------- 提示 / 对话 ---------- */
.toast-wrap{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:100;
  display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{background:rgba(58,49,40,.92);color:#fff;font-size:13px;padding:8px 16px;border-radius:999px;
  animation:tin .25s ease, tout .3s ease 1.5s forwards}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes tout{to{opacity:0;transform:translateY(-6px)}}
.dialog{position:fixed;inset:0;z-index:90;background:rgba(40,30,20,.5);
  display:flex;align-items:flex-end;justify-content:center;padding:20px}
.dialog-card{background:var(--card);border-radius:16px;padding:16px 18px;max-width:460px;width:100%;
  border:1px solid var(--line);box-shadow:0 10px 30px rgba(60,40,20,.3)}
.dialog-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.dialog-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:2px solid #EBD3A8;background:#F3EADA}
.dialog-cat{font-size:12px;font-weight:800;color:var(--brand-2);letter-spacing:2px}
.dialog-text{margin:0 0 14px;font-size:14px;line-height:1.7;color:var(--ink)}
.dialog .btn{width:100%}

/* ---------- 合成台（点材料卡弹出） ---------- */
.craft,.dex{position:fixed;inset:0;z-index:92;background:rgba(40,30,20,.5);
  display:flex;align-items:flex-end;justify-content:center;padding:16px}
.craft[hidden],.dex[hidden]{display:none !important}
.craft-card,.dex-card{background:var(--card);border-radius:16px;border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(60,40,20,.3);width:100%;max-width:480px;
  max-height:86vh;display:flex;flex-direction:column}
.craft-head,.dex-head{display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--line);flex:0 0 auto}
.craft-head b,.dex-head b{font-size:15px;font-weight:800;letter-spacing:1px}
/* 统一的关闭「叉叉」：圆形、可点区域够大（手机也好按） */
.auth-x,.craft-x,.dex-x{
  margin-left:auto;flex:0 0 auto;padding:0;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:#6B5A47;
  font-family:inherit;font-size:22px;line-height:1;font-weight:400;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s,color .15s,transform .1s;
}
.auth-x:hover,.craft-x:hover,.dex-x:hover{background:#F7F0E2;color:var(--ink)}
.auth-x:active,.craft-x:active,.dex-x:active{transform:scale(.9)}
.craft-body,.dex-body{padding:14px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.cf-flow{display:flex;align-items:stretch;gap:8px}
.cf-side{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.cf-label{font-size:11px;font-weight:800;color:var(--ink-3);letter-spacing:1px}
.cf-col{display:flex;flex-direction:column;gap:6px;width:100%}
.cf-mat{display:flex;align-items:center;gap:7px;border:1px solid var(--line);
  border-radius:10px;padding:6px 8px;background:#fff;min-width:0}
.cf-mat.lack{border-color:#E6B7AC;background:#FDF3F0}
.cf-mat.self{border-color:#CFE4C8;background:#F7FCF4}
.cf-ico{font-size:22px;flex:0 0 auto;display:flex;align-items:center}
.cf-ico img{width:30px;height:30px;object-fit:contain;display:block}
.cf-out .cf-ico{font-size:34px}
.cf-out .cf-ico img{width:54px;height:54px}
.cf-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.cf-mat .cf-nm{font-size:11.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-mat .cf-have{font-size:10px;color:var(--ink-3)}
.cf-mat.lack .cf-have{color:#C4553B;font-weight:700}
.cf-arrow{flex:0 0 auto;align-self:center;font-size:20px;color:var(--brand-2);font-weight:800}
.cf-out{display:flex;align-items:center;gap:7px;border:1px solid #E0D0AE;border-radius:10px;
  padding:6px 8px;background:linear-gradient(180deg,#FFF8EA,#FFEFD3);width:100%;min-width:0}
.cf-out .cf-tx b{font-size:12.5px}
.cf-out .cf-tx span{font-size:10px;color:var(--ink-3)}
.cf-tip{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--ink-2);
  background:#FDF8EE;border:1px dashed var(--line);border-radius:10px;padding:9px 11px}
.cf-tip b{color:var(--brand)}
.cf-go{width:100%;margin-top:12px}
.cf-no{font-size:12.5px;color:var(--ink-3);text-align:center;padding:6px 0 2px}

/* ---------- 配方图鉴 ---------- */
.dex-sub{font-size:11px;color:var(--ink-3);margin-left:2px}
.dex-chain{border:1px solid var(--line);border-radius:11px;padding:8px 10px;background:#fff;margin-bottom:9px}
.dex-ch-name{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;
  color:var(--ink-2);letter-spacing:1px;margin-bottom:6px}
.dex-ch-name i{width:9px;height:9px;border-radius:50%;display:inline-block}
.dex-ch-name em{font-style:normal;font-size:10px;font-weight:400;color:var(--ink-3);margin-left:auto}
.dex-row{display:flex;align-items:center;gap:3px;overflow-x:auto;padding:2px 0 4px}
.dex-cell{flex:0 0 auto;width:52px;display:flex;flex-direction:column;align-items:center;gap:1px;
  border:1px solid var(--line);border-radius:9px;padding:4px 2px;background:#fff;cursor:pointer;transition:.13s}
.dex-cell:active{transform:scale(.94)}
.dex-cell img{width:26px;height:26px;object-fit:contain}
.dex-cell .de{font-size:19px;line-height:26px}
.dex-cell span{font-size:8.5px;color:var(--ink-2);text-align:center;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.dex-cell.locked{opacity:.4;filter:grayscale(.7)}
.dex-cell.have{border-color:#CFE4C8;background:#F6FCF3}
.dex-arr{flex:0 0 auto;font-size:11px;color:var(--ink-3)}
.dex-legend{font-size:11px;color:var(--ink-3);text-align:center;margin:4px 0 10px;line-height:1.6}
/* 已成套的链：整行转绿，链名后缀奖券标记（集齐一链送兑换券） */
.dex-chain.done{border-color:#CFE4C8;background:#FBFEF8}
.dex-chain.done .dex-ch-name em{color:#3F7A34;font-weight:800}

/* =========================================================
 * 账号（老汉正.com 会员账号）：顶栏入口 + 登录浮层
 * ========================================================= */
.acct{
  display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.38);color:#FFF3E2;border-radius:999px;
  padding:5px 11px;font-size:12px;font-weight:700;cursor:pointer;
  font-family:inherit;white-space:nowrap;flex:0 0 auto;
}
.acct:active{transform:scale(.95)}
.acct.on{background:rgba(255,243,226,.96);color:#8A4A28;border-color:transparent}
.acct-ico{font-size:13px;line-height:1}
.acct-nm{max-width:66px;overflow:hidden;text-overflow:ellipsis}

.auth{position:fixed;inset:0;z-index:94;background:rgba(40,30,20,.5);
  display:flex;align-items:flex-start;justify-content:center;padding:16px}
.auth[hidden]{display:none !important}
.auth-card{background:var(--card);border-radius:16px;border:1px solid var(--line);
  max-width:400px;width:100%;max-height:88vh;display:flex;flex-direction:column;
  box-shadow:0 16px 48px rgba(60,40,20,.3);margin-top:6vh}
.auth-head{display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--line);flex:0 0 auto}
.auth-head b{font-size:15px;font-weight:800;letter-spacing:1px}
.auth-body{padding:14px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch}

.af{display:flex;flex-direction:column;gap:7px}
.af label{font-size:12px;font-weight:700;color:var(--ink-2);margin-top:2px}
.af input[type=tel],.af input[type=password],.af input[type=text]{
  width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:#FFFDF7;font-size:15px;
  font-family:inherit;color:var(--ink);outline:none;
}
.af input:focus{border-color:var(--brand-2);background:#fff}
.af-remember{display:flex;align-items:center;gap:6px;font-size:12px;
  color:var(--ink-2);font-weight:400 !important;margin:3px 0 2px}
.af-remember input{width:auto}
.af .btn{margin-top:4px;width:100%}
.af-links{display:flex;justify-content:space-between;gap:10px;margin-top:7px}
.af-links a{font-size:12px;color:var(--brand-2);cursor:pointer;text-decoration:underline}
.af-note{font-size:11px;line-height:1.7;color:var(--ink-3);margin:6px 0 0;
  background:#FFF8EA;border:1px solid #F0E2C6;border-radius:10px;padding:8px 10px}
.af-note b{color:var(--brand-2)}
.btn.btn-out{background:#FBEFEC;border-color:#F0D5CE;color:#B8462E}

.acct-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;
  background:linear-gradient(180deg,#FFF8EA,#FFEFD3);border:1px solid #F0E2C6}
.acct-ava{width:46px;height:46px;border-radius:50%;background:var(--brand-2);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;flex:0 0 auto}
.acct-info{display:flex;flex-direction:column;line-height:1.45;min-width:0}
.acct-info b{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-info span{font-size:12px;color:var(--ink-3)}
.acct-sync{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:10px;
  border:1px dashed var(--line);background:#FFFDF7;font-size:12px;color:var(--ink-2)}
.acct-sync b{color:var(--green);font-size:12px}
.acct-sync em{font-style:normal;font-size:11px;color:var(--ink-3);line-height:1.6}

/* =========================================================
 * 门禁封面：未登录时的「老街夜色」
 * 层级 93 —— 压在游戏之上、账号浮层（94）之下，
 * 所以点「进入老街」弹登录时，登录框出现在封面之上。
 * ========================================================= */
.gate{position:fixed;inset:0;z-index:93;overflow:hidden;
  background:#0C1220;display:flex;align-items:center;justify-content:center;
  overscroll-behavior:contain;transition:opacity .42s ease}
.gate[hidden]{display:none !important}
/* 揭开时先淡出、再隐藏（未登录/截图模式下自动触发） */
.gate.out{opacity:0;pointer-events:none}
/* 盖着的时候锁住底层滚动（防 iOS 上手指一划把后面的游戏滚走） */
html.gate-on,html.gate-on body{overflow:hidden;height:100%}

/* 底图：老街场景做缓慢推拉（Ken Burns），再压一层夜色 */
.gate-bg{position:absolute;inset:-8%;
  background:url(../assets/img/scene/s1.jpg) center 42%/cover no-repeat;
  filter:saturate(.80) brightness(.74) blur(.4px);
  animation:gate-kb 28s ease-in-out infinite alternate}
.gate-sky{position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 8%,rgba(96,128,180,.28) 0%,transparent 62%),
    linear-gradient(180deg,rgba(6,10,22,.86) 0%,rgba(14,20,38,.62) 34%,
      rgba(30,22,18,.42) 66%,rgba(8,6,5,.88) 100%)}

/* 月亮 */
.gate-moon{position:absolute;top:11%;left:50%;transform:translateX(-50%);
  width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle at 37% 33%,#FFF8E4,#F1DFB2 56%,#D6BD86 100%);
  box-shadow:0 0 48px 14px rgba(255,240,200,.26),0 0 150px 52px rgba(255,228,170,.11);
  animation:gate-moon 8s ease-in-out infinite}

/* 三层雾：横向缓慢漂移，速度与方向都不同 */
.gate-fog{position:absolute;left:-35%;right:-35%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(222,212,196,.22),transparent 66%);
  filter:blur(15px)}
.gf-a{bottom:-16%;height:52%;animation:gate-fog 36s linear infinite}
.gf-b{bottom:0;height:40%;opacity:.72;animation:gate-fog 54s linear infinite reverse}
.gf-c{bottom:16%;height:32%;opacity:.44;animation:gate-fog 74s linear infinite}

/* 灯笼：几点暖光，各自忽明忽暗 */
.gate-lanterns{position:absolute;left:0;right:0;bottom:21%;height:70px}
.gate-lanterns i{position:absolute;left:var(--x);bottom:0;width:9px;height:13px;
  border-radius:50% 50% 46% 46%;
  background:radial-gradient(circle at 50% 34%,#FFE9B6,#EF8446);
  box-shadow:0 0 18px 6px rgba(240,138,74,.55);
  animation:gate-lan 3.6s ease-in-out infinite;animation-delay:var(--d)}

/* 文案区 */
.gate-inner{position:relative;z-index:4;text-align:center;
  padding:0 26px;max-width:540px;width:100%;
  animation:gate-up 1.1s cubic-bezier(.2,.7,.3,1) both}
.gate-tag{font-size:11px;letter-spacing:5px;text-indent:5px;
  color:rgba(255,236,208,.58);margin-bottom:16px}
.gate-title{margin:0;font-size:46px;font-weight:800;letter-spacing:13px;
  text-indent:13px;color:#FFF4E3;
  text-shadow:0 2px 20px rgba(255,178,110,.38),0 0 70px rgba(255,148,80,.22);
  animation:gate-glow 5.5s ease-in-out infinite}
.gate-sub{margin-top:9px;font-size:11px;letter-spacing:3px;text-indent:3px;
  color:rgba(255,232,200,.50)}
.gate-line{margin:20px 0 26px;min-height:46px;font-size:13px;line-height:1.85;
  color:rgba(255,240,218,.80);transition:opacity .5s,transform .5s}
.gate-line.out{opacity:0;transform:translateY(-6px)}
.gate-go{width:100%;max-width:310px;padding:14px 0;font-size:16px;font-weight:800;
  letter-spacing:2px;box-shadow:0 10px 30px rgba(196,85,59,.48);
  animation:gate-breathe 2.8s ease-in-out infinite}
.gate-alt{margin-top:15px}
.gate-alt a{font-size:12.5px;color:rgba(255,238,214,.74);
  text-decoration:underline;cursor:pointer}
.gate-note{margin-top:20px;font-size:11px;line-height:1.7;color:rgba(255,238,214,.40)}

@keyframes gate-kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.10) translate(-1.4%,-1.2%)}}
@keyframes gate-moon{0%,100%{box-shadow:0 0 44px 12px rgba(255,240,200,.22),0 0 140px 46px rgba(255,228,170,.10)}
  50%{box-shadow:0 0 58px 18px rgba(255,240,200,.32),0 0 175px 62px rgba(255,228,170,.15)}}
@keyframes gate-fog{from{transform:translateX(-12%)}to{transform:translateX(12%)}}
@keyframes gate-lan{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
@keyframes gate-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes gate-glow{0%,100%{text-shadow:0 2px 20px rgba(255,178,110,.34),0 0 60px rgba(255,148,80,.18)}
  50%{text-shadow:0 2px 26px rgba(255,190,124,.52),0 0 96px rgba(255,152,84,.30)}}
@keyframes gate-breathe{0%,100%{transform:scale(1);box-shadow:0 10px 30px rgba(196,85,59,.44)}
  50%{transform:scale(1.028);box-shadow:0 14px 38px rgba(196,85,59,.60)}}
/* 尊重系统「减少动态效果」 */
@media (prefers-reduced-motion:reduce){
  .gate-bg,.gate-moon,.gate-fog,.gate-lanterns i,.gate-title,.gate-go,.gate-inner{animation:none}
}

/* =========================================================
 * PC（>=900px）：三栏，无抽屉、无底栏
 * ========================================================= */
@media (min-width:900px){
  .main{display:grid;grid-template-columns:320px minmax(0,1fr) 320px;align-items:start}
  .panel{margin-bottom:0}
  .center{display:flex;flex-direction:column;gap:12px}
  .scene{height:340px}
  .bg-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
  .mat .ico img{width:46px;height:46px}
  .buy-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dialog{align-items:center}
  .dialog-card{max-width:520px}
  .craft,.dex{align-items:center}
  .craft-card{max-width:560px}
  .dex-card{max-width:780px}
  .auth{align-items:center}
  .auth-card{max-width:420px;margin-top:0}
}

/* =========================================================
 * 手机（<=899px）：单页一屏 + 底部抽屉
 * ========================================================= */
@media (max-width:899px){
  .main{
    display:flex;flex-direction:column;gap:10px;
    padding:10px 10px calc(var(--bar-h) + 18px + env(safe-area-inset-bottom));
  }
  /* 打散中栏，让 场景/进货/百宝箱/货架 参与 main 的纵向排序 */
  .center{display:contents}
  .panel{display:block;margin-bottom:0;padding:11px}
  .panel-scene{order:1}
  .panel-orders{order:2}
  .panel-merge{order:3}

  /* 顶栏：414 宽下必须塞得下「品牌 + 铜板 + 货车 + 积分 + 等级」 */
  .topbar{padding:8px 10px}
  .brand-main{font-size:17px;letter-spacing:2px}
  .brand-sub{font-size:9px;letter-spacing:1px}
  .stats{gap:5px}
  .stat{padding:4px 7px;font-size:11px;gap:3px}
  .stat b{font-size:13px}
  .stat i{width:13px;height:13px;font-size:9px}
  .stat em{display:none}
  .brand{flex:0 0 auto}

  /* 场景压缩，把纵向空间让给"订单 + 货架" */
  .scene{height:172px}
  .scene-title b{font-size:15px}
  .chapter-tip{font-size:11.5px;margin-top:8px}
  /* 阿正指路：手机上再收一点，保证 414 宽一行放得下 */
  .guide{margin-top:8px;padding:8px 10px;border-radius:11px}
  .gd-body{gap:8px}
  .gd-tag{font-size:9.5px;padding:2px 8px;margin-bottom:6px}

  /* 进货单按钮 */
  .fetch-go{padding:14px 0;font-size:15px}
  .fo-chips{gap:5px}
  .fc img{width:20px;height:20px}
  .gd-ico{font-size:17px}
  .gd-tx b{font-size:12.5px}
  .gd-tx span{font-size:11px}
  .guide .btn{padding:7px 11px;font-size:12px}
  .scene-actions{gap:8px;margin-top:9px}
  .scene-actions .btn{padding:9px 8px;font-size:12.5px;min-width:0}

  /* 订单：横向滑动卡片 */
  .order-list{
    display:flex;flex-direction:row;gap:8px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:2px 2px 6px;margin:0 -2px;
  }
  .order{flex:0 0 84%;scroll-snap-align:start}
  .order-list .need-empty{flex:1 0 100%;padding:16px 0}
  .order-foot{flex-direction:column;align-items:stretch;gap:6px}
  .order-btns{justify-content:flex-end}

  .bg-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:7px}

  /* 底部操作栏：固定在底，只负责开面板 */
  .actionbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:65;
    background:var(--card);border-top:1px solid var(--line);
    padding:5px 6px calc(5px + env(safe-area-inset-bottom));
    box-shadow:0 -3px 14px rgba(90,70,40,.12);
  }
  .abtn{
    flex:1;position:relative;border:0;background:none;font-family:inherit;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:1px;
    padding:6px 0;border-radius:10px;color:var(--ink-2);font-size:11px;font-weight:700;
  }
  .abtn:active{background:#F7F0E2}
  .ab-ico{font-size:21px;line-height:1.15}
  .ab-badge{
    position:absolute;top:1px;left:calc(50% + 7px);
    background:var(--brand);color:#fff;font-size:10px;font-weight:700;
    min-width:17px;height:17px;line-height:17px;border-radius:999px;padding:0 4px;
    text-align:center;box-shadow:0 1px 3px rgba(120,50,30,.35);
  }

  /* 抽屉：进货 / 百宝箱 / 账本 */
  .panel-buy,.panel-tools,.panel-more{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;
    margin:0;border-radius:18px 18px 0 0;border-bottom:0;
    max-height:78vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:14px 14px calc(16px + env(safe-area-inset-bottom));
    transform:translateY(102%);
    transition:transform .28s cubic-bezier(.22,.7,.3,1);
    box-shadow:0 -8px 30px rgba(60,40,20,.28);
  }
  .panel-buy.open,.panel-tools.open,.panel-more.open{transform:translateY(0)}
  .sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
  .sheet-head b{font-size:14px;font-weight:800;letter-spacing:1px}
  .sheet-x{
    border:1px solid var(--line);background:#fff;border-radius:999px;font-family:inherit;
    font-size:12px;color:var(--ink-2);padding:4px 14px;cursor:pointer;
  }
  .ph-dup{display:none}          /* 标题已由抽屉头承担 */
  .sheet-mask{display:block;position:fixed;inset:0;z-index:66;background:rgba(40,30,20,.45)}

  .dialog{padding:14px}

  /* 合成台 / 图鉴在手机上的适配 */
  .craft,.dex{padding:10px}
  .craft-head,.dex-head{padding:11px 14px}
  .craft-head b,.dex-head b{white-space:nowrap}
  .dex-sub{display:none}                  /* 标题栏地方小，说明文字在图鉴正文里已有 */
  .dex-cell{width:46px}
  .dex-cell img{width:23px;height:23px}
  .cf-mat{padding:5px 7px}
  .cf-mat .cf-ico img{width:26px;height:26px}
  .cf-out .cf-ico img{width:46px;height:46px}

  /* 账号入口：顶栏 414 宽下再收一点 */
  .acct{padding:4px 8px;font-size:11px;gap:3px}
  .acct-nm{max-width:48px}
  /* 账号浮层 */
  .auth{padding:10px;align-items:flex-start}
  .auth-card{max-height:86vh;margin-top:5vh}
  .auth-head{padding:11px 14px}
  .auth-body{padding:12px 14px}

  /* 门禁封面：414 宽下标题不能撑破一行 */
  .gate-inner{padding:0 22px}
  .gate-title{font-size:33px;letter-spacing:8px;text-indent:8px}
  .gate-sub{font-size:10px;letter-spacing:2px;text-indent:2px}
  .gate-moon{width:56px;height:56px;top:13%}
  /* 竖屏是竖构图裁横图，取景往下挪，才看得到铺面而不是只见屋檐 */
  .gate-bg{background-position:center 68%}
  .gate-tag{font-size:10px;letter-spacing:4px;text-indent:4px;margin-bottom:13px}
  .gate-line{margin:16px 0 22px;min-height:60px;font-size:12.5px;line-height:1.8}
  .gate-go{max-width:100%;padding:13px 0;font-size:15px}
  .gate-lanterns{bottom:23%}
}

/* =========================================================
 * v5 一屏固定布局（2026-10-13）
 * 孙总要求：不要翻页。PC 三栏横向、手机左右两栏，
 * 全部功能钉在同一屏上，点功能出弹窗。页面本身永不滚动。
 * ========================================================= */

/* ① 页面层：彻底禁掉整页滚动 */
html,body{overflow:hidden}
.app{height:100dvh;overflow:hidden}

/* ② 主区：吃掉剩余高度，自己也不滚（原 overflow:auto 正是「要往下翻」的根源） */
.main{flex:1 1 auto;min-height:0;overflow:hidden;padding:12px;gap:12px}

/* 货架速览：仅手机左栏使用（PC 场景本来就撑满，不需要） */
.glance{display:none}

/* ③ 底部功能条：PC / 手机共用（原来只是手机的抽屉栏） */
.actionbar{
  display:flex !important;flex:0 0 auto;
  position:static;left:auto;right:auto;bottom:auto;z-index:auto;
  justify-content:center;gap:4px;
  background:var(--card);border-top:1px solid var(--line);
  padding:6px 10px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 12px rgba(90,70,40,.10);
}
.abtn{
  flex:1 1 0;max-width:118px;position:relative;border:0;background:none;font-family:inherit;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:6px 0;border-radius:10px;color:var(--ink-2);font-size:11px;font-weight:700;
}
.abtn:hover{background:#F7F0E2}
.abtn:active{background:#F1E6D2}
.ab-ico{font-size:19px;line-height:1.15}
.ab-nm{font-size:11px}
.ab-badge{
  position:absolute;top:1px;left:calc(50% + 8px);
  background:var(--brand);color:#fff;font-size:10px;font-weight:700;
  min-width:17px;height:17px;line-height:17px;border-radius:999px;padding:0 4px;
  text-align:center;box-shadow:0 1px 3px rgba(120,50,30,.35);
}

/* ④ 统一弹窗：背包 / 进货 / 百宝箱 / 广播 / 账本 */
.modal{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(40,30,20,.5);
}
.modal[hidden]{display:none}
.modal-card{
  display:flex;flex-direction:column;width:100%;max-width:560px;max-height:86vh;
  background:var(--card);border-radius:18px;overflow:hidden;
  box-shadow:0 14px 44px rgba(60,40,20,.32);
}
.modal-head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);
}
.modal-head b{font-size:15px;font-weight:800;letter-spacing:1px}
.modal-x{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);
  font:20px/1 -apple-system,sans-serif;cursor:pointer;
}
.modal-x:hover{background:#F7F0E2}
.modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px}
.mpane[hidden]{display:none !important}
.ph-dup{display:flex;margin-bottom:12px}          /* 覆盖手机版抽屉里隐藏重复标题的旧规则 */
.btn-wide{width:100%;margin-top:12px;letter-spacing:1px}

/* ⑤ PC（>=900px）：三栏横向，各栏内部独立滚，整页不滚 */
@media (min-width:900px){
  .main{
    display:grid;
    grid-template-columns:290px minmax(0,1fr) 270px;
    align-items:stretch;
    overflow:hidden;
  }
  .panel{margin-bottom:0}
  .panel-orders,.panel-more{display:flex;flex-direction:column;min-height:0;overflow-y:auto}
  .order-list{overflow-y:auto;min-height:0}
  .center{display:flex;flex-direction:column;gap:12px;min-height:0}
  .panel-scene{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  .panel-scene .scene{flex:1 1 auto;height:auto;min-height:260px}
}

/* ⑥ 手机（<=899px）：左右两栏 —— 左场景 / 右订单，一屏钉死 */
@media (max-width:899px){
  .main{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    gap:8px;
    padding:8px;
    overflow:hidden;
  }
  .panel{padding:9px}
  .center{order:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
  .panel-scene{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;gap:0}
  /* 1.72:1 —— 门店装修（灯笼/匾额/货箱/街坊）要看得清，比原来的 2.05:1 高一点 */
  .panel-scene .scene{flex:0 0 auto;height:auto;aspect-ratio:1.72/1;border-radius:11px}
  .scene-actions{margin-top:auto}
  .panel-orders{order:2;display:flex;flex-direction:column;min-height:0;overflow:hidden}
  .panel-more{display:none}
  /* 订单：手机上也走纵向列表 —— 原来那套「横向滑动卡片」在两栏里会串位 */
  .order-list{
    flex:1 1 auto;display:flex;flex-direction:column;gap:8px;
    overflow-x:hidden;overflow-y:auto;min-height:0;
    scroll-snap-type:none;padding:0;margin:0;
  }
  .order{flex:0 0 auto;scroll-snap-align:none;padding:9px}
  .chapter-tip{margin-top:8px;font-size:11px;line-height:1.5}
  .modal{padding:12px}
  .modal-card{max-height:84vh}
  .modal-body{padding:12px 13px}

  /* 阿正指路：用 grid 排 —— 图标与文字一行，按钮独占第二行，标题不再被挤断 */
  .gd-body{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 8px}
  .gd-tx{min-width:0}
  .guide .btn{grid-column:1 / -1;margin-top:5px;text-align:center}

  /* 升级按钮文案长，允许折行，别被截断 */
  .scene-actions .btn{white-space:normal;line-height:1.32;font-size:11.5px;padding:8px 6px}

  /* 货架速览：把「手上有哪些货」铺满左栏剩余空间 */
  .glance{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin-top:9px}
  .glance-head{display:flex;align-items:center;justify-content:space-between;gap:6px;
    font-size:11.5px;font-weight:700;letter-spacing:.5px;margin-bottom:6px}
  .bag-glance{flex:1 1 auto;min-height:0;overflow-y:auto;gap:8px}
  .bag-glance .bg-grid{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:5px}
  .bag-glance .bg-head{font-size:10px;margin-bottom:4px}
  .bag-glance .mat{padding:5px 3px;border-radius:9px}
  .bag-glance .mat .ico img{width:26px;height:26px}
  .bag-glance .mat .nm{font-size:9.5px}
  .bag-glance .mat .cnt{font-size:10px}
  .bag-glance .out{font-size:9px}
}

/* ⑦ 矮屏兜底：手机横过来时不撑破 */
@media (max-height:520px){
  .panel-scene .scene{min-height:84px}
  .chapter-tip{display:none}
}

/* =========================================================
 * v3.7 门店装修层 + 章节目标/升级门禁 + 每日额度 + 跑腿 + 满月单
 * （2026-10-13 · 孙总：外观要随等级明显升级 / 要有目标与难度 / 每日固定收入）
 * ========================================================= */

/* ---------- ① 门店装修层 ----------
   只画了 6 张阶段底图（一张管 5–8 级），所以「同阶段的等级差」本来在画面上看不见。
   这一层用代码把装修叠上去：灯笼 / 货箱 / 顾客 / 竖匾，按等级生长。
   z-index 2：在调色层之上、氛围光效之下；不接指针，绝不挡点击。 */
/* 装修层压在氛围光效之上（否则会被 screen 混合洗白，字都看不清），
   其余图层顺次让位 —— 这一组是配套的，别单独改其中一个 */
.shop{position:absolute;inset:0;z-index:4;pointer-events:none;font-size:18px}
.scene-mask{z-index:5}
.scene-title{z-index:6}
.lv-up{z-index:7}
.scene-clean{z-index:8}
/* 灯火：必须是 .scene 的直接子层，才能跟底图真正混合发光 */
.sh-glow{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;
  opacity:calc(.22 + var(--rich,0) * .78);transition:opacity .8s;
  background:
    radial-gradient(38% 30% at 22% 62%,rgba(255,196,110,.52),transparent 70%),
    radial-gradient(30% 26% at 70% 58%,rgba(255,206,130,.40),transparent 72%),
    radial-gradient(46% 34% at 50% 80%,rgba(255,170,90,.32),transparent 74%)}

/* 灯笼：檐下一整排（挂在匾额下方，所以不挡字），随等级一盏盏多起来 */
.sh-lanterns{position:absolute;left:0;right:0;top:0;height:56%}
/* 摇摆挂在内层 —— 外层留给「新灯笼落进来」的入场上动画（只在 .new 时播一次） */
.sh-lantern{position:absolute;top:19%;margin-left:-.85em;width:1.7em;transform-origin:top center}
.sh-lantern.new{animation:sh-drop .75s cubic-bezier(.2,1.5,.4,1)}
.sh-lantern i{position:relative;transform-origin:top center;
  animation:sh-sway 4.6s ease-in-out infinite}
.sh-lantern::before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:2.4em;
  margin-left:-.5px;background:linear-gradient(180deg,rgba(60,40,20,0),rgba(70,46,22,.8))}
.sh-lantern i{display:block;width:100%;height:1.42em;
  border-radius:50% 50% 46% 46% / 44% 44% 56% 56%;
  background:radial-gradient(circle at 34% 28%,#FF8A55,#DC4021 58%,#8E2413);
  box-shadow:0 0 .75em rgba(255,124,64,.8),inset 0 0 .4em rgba(255,226,160,.55)}
.sh-lantern i::before,.sh-lantern i::after{content:"";position:absolute;left:20%;width:60%;height:.16em;
  background:linear-gradient(90deg,#C99A2E,#FFE9A8,#C99A2E);border-radius:2px}
.sh-lantern i::before{top:-.02em}
.sh-lantern i::after{bottom:-.02em}
.sh-lantern u{display:block;width:2px;height:.85em;margin:.06em auto 0;text-decoration:none;
  background:linear-gradient(180deg,#E8B23A,#B03A1E)}
@keyframes sh-sway{0%,100%{transform:rotate(-3.2deg)}50%{transform:rotate(3.2deg)}}
@keyframes sh-drop{0%{transform:translateY(-160%) scale(.7);opacity:0}
  60%{transform:translateY(6%) scale(1.06);opacity:1}100%{transform:none;opacity:1}}

/* 匾额：横匾挂在上沿正中，材质分 6 档跟着阶段换（素木 → 描金 → 彩绘 → 鎏金 → 金字 → 老字号） */
.sh-sign{position:absolute;left:50%;top:3.5%;transform:translateX(-50%);
  display:flex;align-items:baseline;gap:.4em;padding:.36em .72em .32em;
  border-radius:.22em;border:.09em solid #C9A063;transform-origin:top center;
  background:linear-gradient(180deg,#8A5A32,#6B4223);
  box-shadow:0 .3em .9em rgba(30,16,4,.55),inset 0 0 .6em rgba(0,0,0,.35);
  animation:sh-sway2 6.5s ease-in-out infinite}
.sh-sign::before,.sh-sign::after{content:"";position:absolute;top:.24em;width:.22em;height:.22em;
  border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9A8,#C99A2E)}
.sh-sign::before{left:.24em}
.sh-sign::after{right:.24em}
.sh-sign b{font-size:1.12em;font-weight:800;letter-spacing:.12em;color:#FFE9B8;
  text-shadow:0 1px 2px rgba(0,0,0,.7);white-space:nowrap}
.sh-sign em{font-style:normal;font-size:.58em;color:#E8C98A;letter-spacing:.04em;white-space:nowrap}
.sh-sign.t1{background:linear-gradient(180deg,#9C7550,#775336)}
.sh-sign.t2{background:linear-gradient(180deg,#8A5A32,#6B4223)}
.sh-sign.t3{background:linear-gradient(180deg,#B0743A,#8A4F24);border-color:#E3BE7A}
.sh-sign.t4{background:linear-gradient(180deg,#A45C33,#7A3A1C);border-color:#F0CE86}
.sh-sign.t5{background:linear-gradient(180deg,#C08A3E,#8E5A1E);border-color:#FFE29A;
  box-shadow:0 0 1.1em rgba(255,196,100,.5),0 .35em 1em rgba(30,16,4,.5)}
.sh-sign.t6{background:linear-gradient(180deg,#D4A34A,#9A6A20);border-color:#FFF0B8;
  box-shadow:0 0 1.6em rgba(255,210,120,.65),0 .35em 1em rgba(30,16,4,.5)}
/* 匾额要保住自身的居中位移，所以 keyframes 里把 translateX 一起写上 */
@keyframes sh-sway2{0%,100%{transform:translateX(-50%) rotate(-1deg)}
  50%{transform:translateX(-50%) rotate(1deg)}}

/* 幌子：解锁商户后才挂出去（第 2 阶段起） */
.sh-banner{position:absolute;right:5%;top:0;width:1.6em;
  transform-origin:top center;animation:sh-sway 5.4s ease-in-out infinite}
.sh-banner i{display:flex;align-items:center;justify-content:center;width:100%;height:3.2em;
  border-radius:0 0 .28em .28em;border:.08em solid #C9A063;
  background:linear-gradient(180deg,#2F6E62,#1C4840);
  color:#FFE9B8;font-size:.85em;font-weight:800;letter-spacing:.05em;
  box-shadow:0 .3em .8em rgba(20,12,4,.45)}
.sh-banner.new{animation:sh-drop .75s cubic-bezier(.2,1.5,.4,1),sh-sway 5.4s ease-in-out infinite}

/* 货箱堆：每 2 级 +1 只 */
.sh-crates{position:absolute;left:30%;right:40%;bottom:3%;
  display:flex;flex-wrap:wrap-reverse;align-items:flex-end;justify-content:center;gap:.26em}
.sh-crate{width:1.6em;height:1.2em;border-radius:.14em;border:.07em solid #7A5828;
  background:linear-gradient(180deg,#C39A5E,#9A743C);
  box-shadow:0 .12em .3em rgba(20,12,4,.32),inset 0 .17em 0 rgba(255,238,196,.4)}
.sh-crate.new{animation:sh-pop .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes sh-pop{0%{transform:translateY(-40%) scale(.6);opacity:0}
  60%{transform:translateY(3%) scale(1.08);opacity:1}100%{transform:none;opacity:1}}

/* 顾客：到 9 / 16 / 24 / 32 级各来一位街坊 */
.sh-crowd{position:absolute;right:8%;bottom:2.5%;display:flex;align-items:flex-end;gap:.32em}
.sh-person{position:relative;width:.95em;height:2.25em;opacity:.92}
.sh-person::before{content:"";position:absolute;left:50%;top:0;width:.6em;height:.6em;margin-left:-.3em;
  border-radius:50%;background:#3A2A1C;box-shadow:0 0 .2em rgba(0,0,0,.35)}
.sh-person::after{content:"";position:absolute;left:50%;bottom:0;width:.84em;height:1.55em;margin-left:-.42em;
  border-radius:.4em .4em .1em .1em;background:linear-gradient(180deg,#4A3624,#2C2015)}
.sh-person.new{animation:sh-walk .9s cubic-bezier(.2,.9,.3,1)}
@keyframes sh-walk{0%{transform:translateX(60%) scale(.9);opacity:0}
  35%{opacity:1}100%{transform:none;opacity:.92}}

@media (prefers-reduced-motion:reduce){
  .sh-lantern,.sh-lantern.new,.sh-sign,.sh-banner,.sh-banner.new,.sh-crate.new,.sh-person.new{animation:none}
}

/* ---------- ② 章节目标条 + 升级门禁（钩子与阻碍） ---------- */
.goalbar{margin-top:10px;border:1px solid var(--line);border-radius:12px;background:var(--card);
  padding:9px 11px;display:flex;flex-direction:column;gap:7px}
.gb-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.gb-top b{font-size:12.5px;letter-spacing:.5px;color:var(--ink)}
.gb-upto{font-size:11px;font-weight:800;color:var(--brand-2);white-space:nowrap}
.gb-track{height:7px;border-radius:999px;background:#F1E7D6;overflow:hidden}
.gb-track span{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#E0A23A,#C4553B);transition:width .5s cubic-bezier(.2,.84,.24,1)}
.gb-track.done span{background:linear-gradient(90deg,#8CCB76,#4E9A45)}
.gb-reqs{display:flex;flex-wrap:wrap;gap:5px}
.gb-req{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:800;
  padding:3px 7px;border-radius:999px;border:1px solid var(--line);background:#FFFDF7;color:var(--ink-3)}
.gb-req b{font-weight:800}
.gb-req.ok{background:#F1FAEE;border-color:#CFE4C8;color:#3F7A34}
.gb-req.miss{background:#FFF6F2;border-color:#F2D8CF;color:#B8462E}
.gb-req.part{background:#FFF9EC;border-color:#EFE0C2;color:#9A7218}
.gb-desc{font-size:11.5px;line-height:1.55;color:var(--ink-3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- ③ 每日订单额度（产出闸门） ---------- */
.ph-quota{margin-left:auto;font-size:11px;font-weight:800;color:var(--ink-2);
  background:#FFF8EA;border:1px solid #F0E2C6;border-radius:999px;padding:2px 8px;white-space:nowrap}
.ph-quota.done{background:#F1FAEE;border-color:#CFE4C8;color:#3F7A34}
.ph-quota.miss{background:#FFF1EC;border-color:#F2CDBF;color:#B8462E}
.quota-note{margin:2px 0 8px;padding:8px 10px;border-radius:10px;font-size:11.5px;line-height:1.6;
  background:linear-gradient(180deg,#FFF6EE,#FFEFE4);border:1px solid #F2D8CF;color:#9A4A2E}
.quota-note b{color:#B8462E}

/* ---------- ④ 满月大单（每天的钩子） ---------- */
.order.moon{border-color:#E8C36A;background:linear-gradient(180deg,#FFFCF2,#FFF4D8);
  box-shadow:0 4px 16px rgba(200,150,50,.20)}
.order.moon .order-top{color:#9A7218;font-weight:800;flex-wrap:wrap;gap:4px}
.order.moon .order-top .moon-tag{white-space:nowrap;flex:0 0 auto}
.order.moon .order-reward b{color:#B8860B}
.moon-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;
  padding:2px 7px;border-radius:999px;background:linear-gradient(90deg,#E8B23A,#C99A2E);color:#4A3200}

/* ---------- ⑤ 帮街坊跑腿（B 方案的当日小出口） ---------- */
.btn-errand{flex:0 0 auto;background:#FFF3D6;border-color:#EBD3A8;color:#8A6A22;
  font-size:13px;padding:10px 12px}
.btn-errand em{font-style:normal;font-weight:800;color:#B8462E}
.btn-errand:disabled{opacity:.45}
.btn-errand.can{animation:errand-pulse 2.2s ease-in-out infinite}
@keyframes errand-pulse{0%,100%{box-shadow:0 0 0 0 rgba(200,150,50,0)}
  55%{box-shadow:0 0 0 4px rgba(200,150,50,.16)}}

/* 手机：装修层整体缩小，件数不变但按比例收 */
@media (max-width:899px){
  .shop{font-size:9px}
  .sh-lantern{width:1.45em;margin-left:-.72em}
  .sh-sign{padding:.3em .5em .26em;gap:.3em}
  .sh-sign b{font-size:.86em;letter-spacing:.06em}
  .sh-crates{left:26%;right:46%;gap:.2em}
  .sh-crate{width:1.3em;height:.98em}
  .sh-crowd{right:6%;gap:.26em}
  .sh-person{width:.85em;height:1.9em}
  .goalbar{padding:7px 9px;gap:6px;margin-top:8px}
  .gb-top b{font-size:11.5px}
  .gb-upto{font-size:10.5px}
  .gb-req{font-size:10px;padding:2px 6px}
  .gb-desc{font-size:10.5px;-webkit-line-clamp:2}
  .btn-errand{font-size:11.5px;padding:8px 8px}
}
/* 窄且矮的手机：描述行直接收掉，别把左栏挤爆 */
@media (max-width:899px) and (max-height:760px){
  .gb-desc{display:none}
}

/* =========================================================
 * v3.8 老账本：积分出口（2026-10-13 · 孙总拍板「1」）
 *   翻页（免费机会·概率公示）/ 积分直换 / 奖品券 / 预算熔断
 * ========================================================= */

/* ---------- ① 积分总览 ---------- */
.ld-hero{border:1px solid var(--line);border-radius:12px;background:var(--card);
  padding:11px 13px;display:flex;flex-direction:column;gap:4px}
.ld-ptbig{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ld-ptbig b{font-size:30px;font-weight:800;color:var(--brand-2);line-height:1;letter-spacing:.5px}
.ld-ptbig span{font-size:11.5px;color:var(--ink-3)}
.ld-ptsub{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3)}
.ld-ptsub b{color:var(--ink);font-weight:800}

/* ---------- ② 翻页区（免费机会 + 概率公示） ---------- */
.ld-roll{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ld-roll-l{display:flex;align-items:baseline;gap:5px}
.ld-roll-l b{font-size:24px;font-weight:800;color:#8A5A12;line-height:1}
.ld-roll-l span{font-size:11.5px;color:var(--ink-3)}
.ld-roll .btn{flex:1 1 130px;min-width:120px}
.ld-roll .btn:disabled{opacity:.5}
.ld-rates{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.ld-rate{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;
  padding:3px 8px;border-radius:999px;border:1px solid #F0E2C6;background:#FFFDF4;color:#8A6A22}
.ld-rate.none{opacity:.62}
.ld-rate b{font-weight:800;color:#B8462E}
.ld-rule-tog{margin-top:8px;font-size:11.5px;color:var(--ink-3);background:none;
  border:1px dashed var(--line);border-radius:8px;padding:5px 10px;cursor:pointer}
.ld-rule-tog:hover{color:var(--ink-2);border-color:var(--line-2,#E4D6BB)}
.ld-rule{margin-top:7px;padding:9px 11px;border-radius:10px;background:#FBF7EE;
  border:1px solid #EFE4CC;font-size:11.5px;line-height:1.75;color:var(--ink-3)}
.ld-rule p{margin:0}
.ld-rule b{color:#B8462E}
.ld-fuse{margin-top:9px;padding:8px 11px;border-radius:10px;font-size:11.5px;line-height:1.6;
  background:linear-gradient(180deg,#FFF6EE,#FFEFE4);border:1px solid #F2D8CF;color:#9A4A2E}

/* ---------- ③ 积分直换 ---------- */
.ld-shop{display:flex;flex-direction:column;gap:8px}
.ld-item{display:flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);padding:9px 11px}
.li-ico{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;font-size:21px;background:#FFF6E2;border:1px solid #F0E2C6}
.li-tx{flex:1 1 auto;min-width:0}
.li-tx b{display:block;font-size:13px;font-weight:800;color:var(--ink)}
.li-tx span{display:block;font-size:11px;color:var(--ink-3);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-cost{flex:0 0 auto;text-align:right}
.li-cost b{display:block;font-size:13px;font-weight:800;color:var(--brand-2);white-space:nowrap}
.li-cost span{display:block;font-size:10.5px;color:var(--ink-3)}
.li-btn{flex:0 0 auto}
.li-btn .btn{padding:7px 12px;font-size:12px}
.li-btn .btn:disabled{opacity:.5}

/* ---------- ④ 奖品券 ---------- */
.ld-prizes{display:flex;flex-direction:column;gap:8px}
.ld-prize{border:1px dashed #E0C98F;border-radius:12px;padding:10px 12px;
  background:linear-gradient(180deg,#FFFDF4,#FFF8E6)}
.ld-prize.used{opacity:.62;border-style:solid;border-color:var(--line);
  background:var(--card)}
.pz-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pz-top b{font-size:13px;font-weight:800;color:var(--ink)}
.pz-mode{font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:999px;
  border:1px solid var(--line);background:#FFFDF7;color:var(--ink-3)}
.pz-mode.online{background:#E6F1FB;border-color:#B5D4F4;color:#0C447C}
.pz-mode.store{background:#E1F5EE;border-color:#9FE1CB;color:#085041}
.pz-mode.both{background:#FAEEDA;border-color:#FAC775;color:#633806}
.pz-state{margin-left:auto;font-size:10.5px;font-weight:800;color:#3F7A34}
.ld-prize.used .pz-state{color:var(--ink-3)}
.pz-code{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.pz-code code{font-family:var(--font-mono);font-size:15px;font-weight:800;letter-spacing:1.5px;
  color:#8A5A12;background:#FFF3D6;border:1px solid #EBD3A8;border-radius:8px;padding:3px 9px}
.ld-prize.used .pz-code code{color:var(--ink-3);background:var(--bg-2,#F5F2EA);border-color:var(--line)}
.pz-copy{font-size:11px;font-weight:800;color:#8A6A22;background:#FFF3D6;
  border:1px solid #EBD3A8;border-radius:999px;padding:3px 10px;cursor:pointer}
.pz-tip{margin-top:5px;font-size:11px;color:var(--ink-3);line-height:1.55}
.pz-empty{border:1px dashed var(--line);border-radius:12px;padding:14px;text-align:center;
  font-size:11.5px;color:var(--ink-3);line-height:1.7}

/* ---------- ⑤ 手机端 ---------- */
@media (max-width:899px){
  .ld-hero{padding:9px 11px}
  .ld-ptbig b{font-size:26px}
  .ld-roll-l b{font-size:21px}
  .ld-roll .btn{flex:1 1 100%}
  .ld-item{padding:8px 9px;gap:8px}
  .li-ico{width:34px;height:34px;font-size:19px}
  .li-tx b{font-size:12.5px}
  .li-tx span{font-size:10.5px}
  .li-cost b{font-size:12.5px}
  .pz-code code{font-size:13.5px;letter-spacing:1px}
  .ld-rule{font-size:11px}
}

/* =========================================================
 * v3.9 图鉴成套奖励 + 神秘摊主（周末夜市）+ 街坊实名订单
 * （2026-10-13 · 孙总要点 ②③④：给图鉴一个奖励 / 给周末一个事件 / 给订单一张脸）
 * ========================================================= */

/* ---------- ⑥ 街坊实名订单 ---------- */
.order.npc{border-left:3px solid var(--brand-2)}
.npc-tag{display:inline-flex;align-items:center;gap:5px;font-weight:800;color:var(--ink);white-space:nowrap}
.npc-tag i{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-size:11px;font-style:normal;flex:0 0 auto}
.order-line{font-size:11.5px;line-height:1.55;color:var(--ink-2);background:#FDF8EE;
  border:1px dashed var(--line);border-radius:9px;padding:6px 9px}
.order.npc .order-line{border-style:solid;border-color:#F0E2C6;background:#FFFDF4}

/* ---------- ⑦ 神秘摊主（周末夜市 Boss） ---------- */
.order.boss{border-color:#8E6FB8;background:linear-gradient(180deg,#FBF8FF,#F3EDFA);
  box-shadow:0 4px 16px rgba(110,80,160,.16)}
.order.boss .order-top{color:#6A4A99;font-weight:800;flex-wrap:wrap;gap:4px}
.order.boss .order-reward b{color:#7A4FC0}
.boss-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;
  padding:2px 7px;border-radius:999px;background:linear-gradient(90deg,#9B7BC8,#7A4FC0);
  color:#fff;white-space:nowrap;flex:0 0 auto}
.boss-tag.dim{background:#E4DCF0;color:#6A4A99}
.order.boss.soon{border-style:dashed;opacity:.92;box-shadow:none;background:var(--card)}
.order.boss.done{opacity:.72;border-style:solid;border-color:var(--line);
  background:var(--card);box-shadow:none}
.order.boss .order-line{border-color:#D9CCEC;background:#F6F1FC;color:#5A4478}

/* ---------- ⑧ 街坊熟人墙（账本） ---------- */
.nb-list{display:flex;flex-direction:column;gap:7px}
.nb{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:11px;
  padding:8px 10px;background:#fff}
.nb.off{opacity:.55}
.nb-ico{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:17px;flex:0 0 auto}
.nb-tx{flex:1 1 auto;min-width:0}
.nb-tx b{font-size:12.5px;display:block;color:var(--ink)}
.nb-tx b em{font-style:normal;font-size:10.5px;font-weight:400;color:var(--ink-3)}
.nb-sub{display:block;font-size:10.5px;color:var(--ink-3);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-bar{display:block;height:5px;border-radius:999px;background:#F1E7D6;margin-top:5px;overflow:hidden}
.nb-bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#E0A23A,#C4553B);transition:width .4s}
.nb-lv{flex:0 0 auto;font-size:12px;font-weight:800;color:#8A6A22;white-space:nowrap}

/* ---------- ⑨ 手机端适配 ---------- */
@media (max-width:899px){
  .order-line{font-size:11px;padding:5px 8px}
  .npc-tag i{width:16px;height:16px;font-size:10px}
  .nb{padding:7px 9px;gap:8px}
  .nb-ico{width:30px;height:30px;font-size:15px}
  .nb-tx b{font-size:12px}
  .nb-sub{font-size:10px}
  .nb-lv{font-size:11px}
}