/* ==========================================================
 *  开心农场 · 样式表
 *  风格：清新田园 + 木质卡通风，移动端优先，桌面居中显示
 * ========================================================== */
:root{
  --green:#5aa832; --green-d:#3f7d22; --green-l:#8fd15c;
  --soil:#8a5a34; --soil-d:#6b4225; --soil-l:#b8834f;
  --wood:#a4713f; --wood-d:#7d5228;
  --cream:#fdf6e3; --cream2:#f5e9cd;
  --ink:#3a2a18; --ink-l:#6b5844;
  --gold:#f2b134; --sky:#a8dcff;
  --ok:#4caf50; --warn:#ff9800; --bad:#e5533d;
  --r:14px;
  --shadow:0 3px 0 rgba(0,0,0,.14), 0 6px 14px rgba(0,0,0,.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#bfe9ff 0%,#d9f2c9 46%,#c8e6a0 100%);
  overflow:hidden;
  user-select:none;
}
#app{max-width:820px;margin:0 auto;height:100%;display:flex;flex-direction:column;position:relative}

img.pix{image-rendering:auto;display:block;pointer-events:none}
img.pix-miss{opacity:.32;filter:grayscale(1)}

/* ---------------- 顶部栏 ---------------- */
#topbar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:8px 12px;
  background:linear-gradient(180deg,var(--wood) 0%,var(--wood-d) 100%);
  border-bottom:3px solid rgba(0,0,0,.18);
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  color:#fff;
}
.tb-left{display:flex;align-items:center;gap:8px;min-width:0}
.lv-badge{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#ffe9a8,var(--gold));
  border:3px solid #fff3cf;color:#7a4a00;font-weight:900;font-size:17px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 0 rgba(0,0,0,.2)
}
.lv-wrap{min-width:0;flex:1}
.lv-name{font-size:11px;opacity:.9;letter-spacing:1px}
.xp-bar{height:9px;background:rgba(0,0,0,.28);border-radius:5px;overflow:hidden;margin-top:2px}
.xp-fill{height:100%;width:0;background:linear-gradient(90deg,#ffe07a,#ffc02e);transition:width .4s}
.tb-right{display:flex;align-items:center;gap:6px}
.res{
  display:flex;align-items:center;gap:4px;padding:4px 9px;border-radius:20px;
  background:rgba(0,0,0,.24);font-weight:800;font-size:13px;font-variant-numeric:tabular-nums
}
.res img{width:18px;height:18px}
.env{
  display:flex;align-items:center;gap:4px;padding:4px 9px;border-radius:20px;
  background:rgba(255,255,255,.2);font-size:12px;font-weight:700;white-space:nowrap
}
.env .ico{font-size:15px;line-height:1}

/* ---------------- 主视图 ---------------- */
#view{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:10px 10px 76px;-webkit-overflow-scrolling:touch}
.panel{
  background:linear-gradient(180deg,var(--cream),var(--cream2));
  border:2px solid #e0cfab;border-radius:var(--r);
  box-shadow:var(--shadow);padding:10px;margin-bottom:10px
}
.panel h3{margin:0 0 8px;font-size:14px;display:flex;align-items:center;gap:6px;color:var(--green-d)}
.panel h3 .tag{margin-left:auto;font-size:11px;font-weight:600;color:var(--ink-l)}
.hint{font-size:11.5px;color:var(--ink-l);line-height:1.6}
.hr{height:1px;background:#e6d7b8;margin:8px 0}

/* ---------------- 农场网格 ---------------- */
.farm-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.farm-head .grow{flex:1}
.btn-row{display:flex;gap:6px;flex-wrap:wrap}

.grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:6px;
  padding:10px;border-radius:var(--r);
  background:
    repeating-linear-gradient(45deg,#7cc24a 0 12px,#74b944 12px 24px);
  border:3px solid #4f8a2c;box-shadow:inset 0 3px 8px rgba(0,0,0,.18)
}
.plot{
  position:relative;aspect-ratio:1/1;border-radius:9px;overflow:hidden;
  border:2px solid rgba(0,0,0,.18);cursor:pointer;
  transition:transform .12s,box-shadow .12s;
  background-color:#b98a55;
  display:flex;align-items:center;justify-content:center;
}
.plot:active{transform:scale(.94)}
.plot .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.plot .sp{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:76%;height:76%;object-fit:contain;z-index:2;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))
}
.plot.ripe .sp{animation:bob 1.1s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-56%) scale(1.09)}}
.plot.withered .sp{filter:grayscale(1) brightness(.62)}
.plot.locked{background:#9aa08f;cursor:pointer}
.plot.locked .sp{opacity:.5}
.plot .lockmask{
  position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;
  background:rgba(30,26,20,.42);color:#fff;font-size:10px;font-weight:800;text-align:center;line-height:1.2
}
.plot .lockmask .c{font-size:11px;color:#ffe07a}

/* 地块角标 */
.plot .badges{position:absolute;left:2px;top:2px;z-index:5;display:flex;gap:2px}
.plot .badge{
  width:17px;height:17px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;
  box-shadow:0 1px 2px rgba(0,0,0,.3)
}
.plot .wbar{
  position:absolute;left:4px;right:4px;bottom:3px;height:5px;z-index:5;
  background:rgba(0,0,0,.35);border-radius:3px;overflow:hidden
}
.plot .wbar i{display:block;height:100%;background:linear-gradient(90deg,#7fd0ff,#2b8fd6)}
.plot .wbar.low i{background:linear-gradient(90deg,#ffb26b,#e5533d)}
.plot .time{
  position:absolute;right:3px;bottom:8px;z-index:5;font-size:9px;color:#fff;
  background:rgba(0,0,0,.42);border-radius:8px;padding:0 4px;line-height:12px
}
.plot .act{
  position:absolute;left:50%;bottom:2px;transform:translateX(-50%);z-index:6;
  font-size:9.5px;color:#fff;background:rgba(0,0,0,.5);border-radius:8px;padding:1px 5px;white-space:nowrap
}

/* ---------------- 按钮 ---------------- */
.btn{
  border:none;border-radius:11px;padding:7px 12px;font-size:12.5px;font-weight:800;
  color:#fff;background:linear-gradient(180deg,var(--green-l),var(--green));
  box-shadow:0 3px 0 var(--green-d);cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:5px;justify-content:center
}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--green-d)}
.btn.gold{background:linear-gradient(180deg,#ffd977,var(--gold));box-shadow:0 3px 0 #b77c10;color:#6b4300}
.btn.gold:active{box-shadow:0 1px 0 #b77c10}
.btn.grey{background:linear-gradient(180deg,#c9c2b4,#a89f8d);box-shadow:0 3px 0 #7d7566}
.btn.grey:active{box-shadow:0 1px 0 #7d7566}
.btn.red{background:linear-gradient(180deg,#ff8b76,#e5533d);box-shadow:0 3px 0 #a83421}
.btn.sm{padding:5px 9px;font-size:11.5px;border-radius:9px}
.btn[disabled]{opacity:.45;pointer-events:none;filter:grayscale(.5)}
.btn img.pix{width:16px;height:16px}

/* ---------------- 卡片网格（牧场 / 加工 / 分店） ---------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.card{
  background:linear-gradient(180deg,#fffdf6,#f3e8cf);
  border:2px solid #e2d1ac;border-radius:12px;padding:8px 6px;text-align:center;
  box-shadow:0 2px 0 rgba(0,0,0,.1);cursor:pointer;position:relative;overflow:hidden
}
.card:active{transform:scale(.97)}
.card .pic{width:100%;height:56px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.card .pic img{max-width:100%;max-height:100%;object-fit:contain;image-rendering:auto}
.card .nm{font-size:12px;font-weight:800;line-height:1.25}
.card .sub{font-size:10.5px;color:var(--ink-l);margin-top:2px;line-height:1.4}
.card.locked{background:#efeade;color:#9a917f}
.card.locked .pic img{opacity:.35;filter:grayscale(1)}
.card.empty{border-style:dashed;background:#fbf7ec}
.card.done .nm{color:var(--green-d)}
.card .pb{height:5px;background:#e3d7bb;border-radius:3px;overflow:hidden;margin-top:5px}
.card .pb i{display:block;height:100%;background:linear-gradient(90deg,var(--green-l),var(--green))}
.card .corner{position:absolute;right:4px;top:4px;font-size:13px}

/* ---------------- 仓库 ---------------- */
.inv{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:7px}
.inv .slot{
  background:#fffdf6;border:2px solid #e2d1ac;border-radius:11px;padding:6px 4px;text-align:center;
  cursor:pointer;position:relative
}
.inv .slot:active{transform:scale(.96)}
.inv .slot img{width:40px;height:40px;margin:0 auto 3px;object-fit:contain}
.inv .slot .n{font-size:10.5px;font-weight:700;line-height:1.2}
.inv .slot .q{position:absolute;right:3px;top:2px;font-size:10.5px;font-weight:900;color:#fff;background:var(--green);border-radius:9px;padding:0 5px}

/* ---------------- 列表行 ---------------- */
.row{
  display:flex;align-items:center;gap:8px;padding:8px;border-radius:11px;
  background:#fffdf6;border:2px solid #e6d8b8;margin-bottom:7px
}
.row .ico{width:34px;height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:center;font-size:20px}
.row .ico img{max-width:100%;max-height:100%;object-fit:contain}
.row .txt{flex:1;min-width:0}
.row .t1{font-size:12.5px;font-weight:800}
.row .t2{font-size:11px;color:var(--ink-l);margin-top:1px;line-height:1.45}
.row .ops{display:flex;gap:5px;flex:0 0 auto}

/* ---------------- 底部导航 ---------------- */
#tabbar{
  position:absolute;left:0;right:0;bottom:0;z-index:40;
  display:flex;background:linear-gradient(180deg,var(--wood),var(--wood-d));
  border-top:3px solid rgba(0,0,0,.2);box-shadow:0 -3px 10px rgba(0,0,0,.18);
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none
}
#tabbar::-webkit-scrollbar{display:none}
.tab{
  flex:1 0 54px;border:none;background:none;color:#f3e3c8;font-family:inherit;
  padding:5px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:10.5px;font-weight:700;cursor:pointer;opacity:.72
}
.tab img{width:22px;height:22px;object-fit:contain}
.tab.on{opacity:1;color:#fff}
.tab.on::before{
  content:'';position:absolute;margin-top:-5px;width:26px;height:3px;border-radius:2px;background:var(--gold)
}
.tab .dot{
  position:absolute;margin:-2px 0 0 16px;min-width:14px;height:14px;border-radius:8px;
  background:var(--bad);color:#fff;font-size:9px;line-height:14px;padding:0 3px;font-weight:900
}

/* ---------------- 弹窗 / 抽屉 ---------------- */
#sheetRoot,#modalRoot{position:absolute;inset:0;z-index:60;pointer-events:none}
.sheet-mask,.modal-mask{
  position:absolute;inset:0;background:rgba(20,14,6,.52);pointer-events:auto;
  animation:fade .18s ease
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  position:absolute;left:0;right:0;bottom:0;pointer-events:auto;
  background:linear-gradient(180deg,var(--cream),var(--cream2));
  border-top:4px solid var(--wood);border-radius:18px 18px 0 0;
  padding:12px 12px 88px;max-height:78%;overflow-y:auto;
  box-shadow:0 -6px 22px rgba(0,0,0,.3);animation:up .22s ease
}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet h4{margin:0 0 10px;font-size:15px;display:flex;align-items:center;gap:6px}
.sheet h4 .x{margin-left:auto;border:none;background:none;font-size:20px;color:var(--ink-l);cursor:pointer}
.modal{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:auto;
  width:min(400px,90%);background:linear-gradient(180deg,#fffdf6,#f3e8cf);
  border:3px solid var(--wood);border-radius:16px;padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);animation:pop .2s ease
}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.9);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.modal h4{margin:0 0 8px;font-size:15px}
.modal .body{font-size:12.5px;line-height:1.7;color:var(--ink)}
.modal .foot{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

/* 选项列表 */
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px}
.opt{
  background:#fffdf6;border:2px solid #e2d1ac;border-radius:11px;padding:7px 5px;text-align:center;cursor:pointer
}
.opt:active{transform:scale(.96)}
.opt.dis{opacity:.42;pointer-events:none}
.opt img{width:38px;height:38px;margin:0 auto 3px;object-fit:contain}
.opt .n{font-size:11.5px;font-weight:800}
.opt .s{font-size:10px;color:var(--ink-l);margin-top:1px}
.opt.sel{border-color:var(--green);background:#eefbe4}

/* ---------------- 提示 ---------------- */
#toastRoot{position:absolute;left:0;right:0;bottom:70px;z-index:80;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:0 16px}
.toast{
  background:rgba(38,26,14,.92);color:#fff;padding:7px 14px;border-radius:20px;
  font-size:12.5px;font-weight:700;animation:tin .25s ease;max-width:100%;text-align:center
}
.toast.ok{background:rgba(46,125,50,.94)}
.toast.warn{background:rgba(180,95,10,.94)}
.toast.bad{background:rgba(180,45,30,.94)}
.toast.gold{background:rgba(160,110,10,.95);color:#fff6d8}
@keyframes tin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------------- 新手引导 ---------------- */
#tutorRoot{position:absolute;inset:0;z-index:90;pointer-events:none}
.tutor-mask{position:absolute;inset:0;background:rgba(15,10,4,.62);pointer-events:auto}
.tutor{
  position:absolute;left:50%;bottom:96px;transform:translateX(-50%);pointer-events:auto;
  width:min(360px,92%);background:linear-gradient(180deg,#fffdf6,#f5ead2);
  border:3px solid var(--wood);border-radius:16px;padding:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.4);animation:up .25s ease
}
.tutor .tt{font-size:15px;font-weight:900;margin-bottom:6px;color:var(--green-d)}
.tutor .tc{font-size:12.5px;line-height:1.75;color:var(--ink);white-space:pre-line}
.tutor .tf{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:8px}
.tutor .step{font-size:11px;color:var(--ink-l)}
.spot{
  position:absolute;z-index:95;border:3px dashed var(--gold);border-radius:12px;
  pointer-events:none;animation:glow 1.2s ease-in-out infinite
}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(242,177,52,.7)}50%{box-shadow:0 0 0 10px rgba(242,177,52,0)}}
/* 引导等待期：非阻塞提示条 */
.tutor-wait{
  position:absolute;left:50%;top:64px;transform:translateX(-50%);pointer-events:auto;
  display:flex;align-items:center;gap:8px;max-width:94%;
  background:linear-gradient(180deg,#fffdf6,#f5ead2);
  border:2px solid var(--gold);border-radius:999px;padding:7px 8px 7px 12px;
  box-shadow:0 6px 16px rgba(0,0,0,.35);animation:tin .25s ease
}
.tutor-wait .wi{flex:none;font-size:15px;animation:glow 1.2s ease-in-out infinite}
.tutor-wait .wt{
  flex:1;min-width:0;font-size:12px;font-weight:800;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

/* ---------------- 杂项 ---------------- */
.tagpill{display:inline-block;font-size:10px;font-weight:800;padding:1px 7px;border-radius:9px;background:#e8f5df;color:var(--green-d)}
.tagpill.g{background:#fff0cc;color:#9a6a00}
.tagpill.r{background:#ffe0da;color:#b3381f}
.tagpill.b{background:#ddeeff;color:#1c5f96}
.empty-tip{text-align:center;color:var(--ink-l);font-size:12px;padding:18px 0}
.center{text-align:center}
.mt8{margin-top:8px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:7px}
.stat{background:#fffdf6;border:2px solid #e6d8b8;border-radius:10px;padding:6px;text-align:center}
.stat .v{font-size:15px;font-weight:900;color:var(--green-d)}
.stat .k{font-size:10.5px;color:var(--ink-l)}
input.txt,textarea.txt{
  width:100%;font-family:inherit;font-size:12px;padding:7px;border-radius:9px;
  border:2px solid #e2d1ac;background:#fffdf6;color:var(--ink)
}

/* 桌面端加宽 */
@media(min-width:700px){
  #app{border-left:3px solid rgba(0,0,0,.1);border-right:3px solid rgba(0,0,0,.1)}
  .grid{gap:8px}
}