/* =============================================================
   §1 样式
   ============================================================= */
:root{
  --bg:#1e1811;
  --bg2:#282017;
  --panel:#302518;
  --panel2:#3a2d1d;
  --line:#503d27;
  --line2:#634c30;
  --txt:#f0e3cf;
  --txt-dim:#b5a189;
  --leaf:#7fc46a;
  --leaf-d:#4e9450;
  --amber:#e0a94c;
  --amber-d:#b9812c;
  --warn:#e58a5a;
  --water:#6fb7e0;
  --cell:54px;
  --mono:"SF Mono",SFMono-Regular,ui-monospace,Menlo,Consolas,"Courier New",monospace;
  --lh:21px;          /* 编辑器行高，行号/高亮条依赖它 */
  --pad-t:10px;       /* 编辑器上内边距 */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--txt);
  background:
    radial-gradient(1200px 700px at 20% -10%, #33281b 0%, transparent 60%),
    linear-gradient(160deg,#1e1811 0%,#171209 100%);
  overflow:hidden;
}
.app{height:100vh;display:flex;flex-direction:column;min-width:1040px}

/* ---------- 顶栏 ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#352a1c,#2a2115);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.brand{font-size:17px;font-weight:700;letter-spacing:.5px}
.brand .sub{font-size:11px;font-weight:500;color:var(--txt-dim);margin-left:10px;letter-spacing:0}
.stats{display:flex;gap:8px}
.stat{
  background:#241c12;border:1px solid var(--line);border-radius:7px;
  padding:4px 12px;min-width:86px;text-align:center;
}
.stat .k{display:block;font-size:10px;color:var(--txt-dim);letter-spacing:1px}
.stat b{font-size:16px;font-variant-numeric:tabular-nums;color:var(--amber)}
.stat b.pop{animation:pop .32s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.32);color:#ffd88a}100%{transform:scale(1)}}

/* ---------- 主体两栏（左林场 / 右编辑器） ---------- */
main{flex:1;display:flex;gap:14px;padding:14px;min-height:0}
.panel{
  background:linear-gradient(180deg,var(--panel),#291f14);
  border:1px solid var(--line);border-radius:10px;
  display:flex;flex-direction:column;min-height:0;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
}
.panel-hd{
  padding:8px 13px;font-size:12px;letter-spacing:1px;color:var(--txt-dim);
  border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.02);flex:none;
}
.panel.farm{flex:none;width:590px}
.panel.code{flex:1;min-width:420px}

/* ---------- 林场舞台 ---------- */
.stage-wrap{padding:12px;display:flex;justify-content:center}
.stage{position:relative;width:541px;height:541px;flex:none}

/* §去AI化③：浅木纹底色 + 淡虚线网格，不使用纯白背景 */
.grid{
  position:relative;width:541px;height:541px;
  display:grid;grid-template-columns:repeat(10,var(--cell));grid-template-rows:repeat(10,var(--cell));
  border-top:1px dashed rgba(122,92,56,.42);
  border-left:1px dashed rgba(122,92,56,.42);
  border-radius:4px;
  background-color:#e6d2ac;
  background-image:
    repeating-linear-gradient(93deg, rgba(140,101,58,.10) 0 2px, rgba(140,101,58,0) 2px 23px),
    repeating-linear-gradient(93deg, rgba(112,79,42,.07) 0 1px, rgba(112,79,42,0) 1px 8px),
    repeating-linear-gradient(87deg, rgba(158,120,74,.06) 0 3px, rgba(158,120,74,0) 3px 41px),
    radial-gradient(420px 300px at 22% 18%, rgba(255,240,208,.55), transparent 70%),
    radial-gradient(360px 320px at 82% 88%, rgba(150,110,62,.20), transparent 72%);
  box-shadow:inset 0 0 34px rgba(96,66,32,.28);
}
.cell{
  position:relative;width:var(--cell);height:var(--cell);
  border-right:1px dashed rgba(122,92,56,.30);
  border-bottom:1px dashed rgba(122,92,56,.30);
  overflow:hidden;
}
/* 土壤湿度：--w 由 JS 写入 0~1 */
.cell .soil{
  position:absolute;inset:0;
  background:rgba(74,48,20,calc(var(--w,0) * .40));
  transition:background .5s linear;
}
.cell .soil::after{ /* 湿润时的水光 */
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 32% 28%, rgba(120,190,230,.30), transparent 62%);
  opacity:calc(var(--w,0) * .9);transition:opacity .5s linear;
}

/* ---------- 树的三阶段（CSS 造型 + 过渡动画） ---------- */
.plant{
  position:absolute;left:50%;bottom:9px;width:0;height:0;
  transform-origin:50% 100%;
  transition:transform .55s cubic-bezier(.34,1.28,.5,1), opacity .35s ease;
  opacity:0;transform:scale(.15);
}
.plant i{position:absolute;display:block}
.trunk{left:-3px;bottom:0;width:6px;height:15px;border-radius:2px;
  background:linear-gradient(#94623a,#67401f);}
.crown{border-radius:50% 50% 46% 46%;}
.c1{left:-14px;bottom:11px;width:28px;height:25px;
  background:radial-gradient(circle at 34% 28%, #96d47f, #3d8b43);}
.c2{left:-9px;bottom:23px;width:18px;height:17px;
  background:radial-gradient(circle at 40% 30%, #aee096, #4f9e53);}

.cell[data-state="empty"]  .plant{opacity:0;transform:scale(.12)}
.cell[data-state="sapling"] .plant{opacity:1;transform:scale(.36)}
.cell[data-state="young"]  .plant{opacity:1;transform:scale(.70)}
.cell[data-state="mature"] .plant{opacity:1;transform:scale(1.04)}
/* 成熟树：树冠更饱满深绿 + 缓慢摇曳（每棵 animation-delay 随机，避免整齐划一） */
.cell[data-state="mature"] .c1{background:radial-gradient(circle at 34% 28%, #7fc96a, #2f7a38)}
.cell[data-state="mature"] .c2{background:radial-gradient(circle at 40% 30%, #9ad684, #3f8f47)}
.cell[data-state="mature"] .plant{animation:sway 3.4s ease-in-out infinite}
@keyframes sway{0%,100%{rotate:-1.6deg}50%{rotate:1.6deg}}
/* 收割倒树动画 */
.plant.chop{transform:scale(1) rotate(76deg) translateX(12px)!important;opacity:0!important;
  transition:transform .48s cubic-bezier(.5,-0.2,.7,.6), opacity .42s ease .06s;animation:none!important}

/* ---------- 仓库（左上角固定 0,0 静态标识） ---------- */
.cell.depot{background:
  repeating-linear-gradient(45deg, rgba(120,84,44,.14) 0 5px, rgba(120,84,44,0) 5px 10px);}
.depot-mark{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.depot-mark svg{display:block;filter:drop-shadow(0 1px 1px rgba(60,40,15,.4))}
.depot-mark span{font-size:9px;color:#6a4a24;font-weight:700;letter-spacing:1px}

/* ---------- 特效层 & 运输车 ---------- */
.fx{position:absolute;left:1px;top:1px;width:100%;height:100%;pointer-events:none;overflow:hidden}
.cart{
  position:absolute;width:34px;height:34px;left:0;top:0;
  margin:10px 0 0 10px;                 /* 居中到格内 */
  font-size:26px;line-height:34px;text-align:center;
  filter:drop-shadow(0 3px 3px rgba(60,40,10,.45));
  transition-property:left,top;transition-timing-function:cubic-bezier(.4,.05,.35,1);
  z-index:5;
}
.cart.busy{animation:jiggle .3s ease}
@keyframes jiggle{0%,100%{translate:0 0}30%{translate:0 -3px}60%{translate:1px 1px}}
.drop{
  position:absolute;width:4px;height:9px;border-radius:50% 50% 60% 60%;
  background:linear-gradient(#bfe6fb,#5aa9d8);opacity:0;
  animation-name:drip;animation-timing-function:cubic-bezier(.4,.1,.7,1);animation-fill-mode:forwards;
}
@keyframes drip{0%{opacity:0;translate:0 -6px;scale:.7}25%{opacity:.95}100%{opacity:0;translate:0 34px;scale:.9}}
.splash{position:absolute;width:26px;height:9px;border-radius:50%;
  border:1.5px solid rgba(120,190,230,.75);opacity:0;animation:splash .5s ease-out forwards}
@keyframes splash{0%{opacity:.9;scale:.2}100%{opacity:0;scale:1.5}}
.chip{position:absolute;font-size:15px;line-height:1;opacity:1;z-index:4}
.ftxt{position:absolute;font-size:12px;font-weight:800;color:#3f6b2c;
  text-shadow:0 1px 0 rgba(255,255,255,.6);opacity:0;animation:ftxt .95s ease-out forwards;white-space:nowrap}
.ftxt.gold{color:#8a5a10}
@keyframes ftxt{0%{opacity:0;translate:0 4px}18%{opacity:1}100%{opacity:0;translate:0 -22px}}

/* ---------- 图例 ---------- */
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;padding:0 14px 12px;font-size:11px;color:var(--txt-dim)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}

/* ---------- 工具栏 ---------- */
.toolbar{display:flex;gap:7px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap}
button{
  font-family:inherit;font-size:12.5px;font-weight:600;color:#1f1710;
  border:1px solid rgba(0,0,0,.28);border-radius:6px;padding:6px 13px;cursor:pointer;
  background:linear-gradient(180deg,#e9c47c,#cf9b45);
  box-shadow:0 2px 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.35);
  transition:filter .1s ease, transform .06s ease, box-shadow .06s ease;
}
button.ghost{background:linear-gradient(180deg,#4b3a26,#3a2c1c);color:var(--txt);border-color:#5c462d;
  box-shadow:0 2px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06)}
button.go{background:linear-gradient(180deg,#9ada84,#5aa257);}
button:hover{filter:brightness(1.07)}
/* §去AI化⑤：按压变暗 + 下沉反馈 */
button:active{filter:brightness(.78);transform:translateY(2px);box-shadow:0 0 0 rgba(0,0,0,.3), inset 0 2px 4px rgba(0,0,0,.3)}
button:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.5);transform:none}
select{
  font-family:inherit;font-size:12px;color:var(--txt);background:#3a2c1c;
  border:1px solid #5c462d;border-radius:6px;padding:5px 8px;cursor:pointer;
}
select:active{filter:brightness(.8)}
.spacer{flex:1}
.tool-label{font-size:11px;color:var(--txt-dim)}

/* ---------- 编辑器 ---------- */
.editor{position:relative;display:flex;flex:1 1 46%;min-height:150px;border-bottom:1px solid var(--line);background:#20190f;overflow:hidden}
.gutter{
  flex:none;width:44px;overflow:hidden;text-align:right;
  padding:var(--pad-t) 7px 40px 0;font-family:var(--mono);font-size:12.5px;line-height:var(--lh);
  color:#6f5a3f;background:#1b1509;border-right:1px solid var(--line);user-select:none;
}
.gutter div{height:var(--lh)}
.gutter div.on{color:#ffd489;font-weight:700;background:rgba(224,169,76,.14);border-radius:3px}
.code-wrap{position:relative;flex:1;overflow:hidden}
.hl-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hl-bar{
  position:absolute;left:0;right:0;height:var(--lh);
  background:linear-gradient(90deg, rgba(224,169,76,.20), rgba(224,169,76,.04));
  border-left:3px solid var(--amber);display:none;
}
.hl-bar.show{display:block}
textarea#code{
  position:absolute;inset:0;width:100%;height:100%;resize:none;
  background:transparent;color:#e8dcc4;border:0;outline:none;
  font-family:var(--mono);font-size:12.5px;line-height:var(--lh);
  padding:var(--pad-t) 12px 40px 12px;white-space:pre;overflow:auto;
  caret-color:var(--amber);tab-size:2;
}
textarea#code:read-only{color:#c9bb9f;background:rgba(224,169,76,.03)}

/* ---------- 日志 ---------- */
.log{
  flex:1 1 34%;min-height:110px;overflow-y:auto;padding:7px 11px;
  font-family:var(--mono);font-size:11.5px;line-height:1.65;background:#1b1509;
}
.log div{white-space:pre-wrap;word-break:break-word}
.log .t{color:#6a563b}
.log .sys{color:#8fa2b8}
.log .act{color:#c7b899}
.log .ok{color:#8ed67c}
.log .warn{color:var(--warn)}
.log .say{color:#e0c46a}
.log .err{color:#ef7d6b}

/* ---------- 语法速查 ---------- */
.cheat{flex:none;border-top:1px solid var(--line);background:#241c12;max-height:34%;overflow:auto}
.cheat summary{padding:7px 13px;font-size:12px;color:var(--txt-dim);cursor:pointer;user-select:none}
.cheat summary:hover{color:var(--txt)}
.cheat .body{padding:2px 14px 14px;font-size:11.5px;line-height:1.85;color:#cbbb9d}
.cheat code{font-family:var(--mono);color:#f0c675;background:rgba(255,255,255,.05);padding:1px 5px;border-radius:4px}
.cheat h4{margin:10px 0 3px;font-size:11px;color:var(--leaf);letter-spacing:1px}


/* =============================================================
   移动端适配（响应式）：窄屏上下堆叠 + 触控友好
   桌面端（>820px）布局完全不变，本段只影响手机/小平板
   ============================================================= */
@media (max-width: 820px){
  body{overflow:auto}
  .app{height:auto;min-height:100vh;min-width:0}
  main{flex-direction:column;overflow:visible;padding:10px;gap:10px}
  .panel.farm{width:100%;flex:none}
  .panel.code{width:100%;min-width:0;flex:none}
  .stage{width:min(94vw,440px);height:min(94vw,440px)}
  .grid{width:100%;height:100%;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr)}
  .cell{width:100%;height:100%}
  .editor{flex:none;height:230px}
  .log{height:150px}
  .cheat{max-height:none}
  .topbar{flex-wrap:wrap;gap:8px}
  .stats{flex-wrap:wrap}
  .stat{flex:1 1 auto;min-width:72px}
  .toolbar{position:sticky;top:0;z-index:6;background:var(--bg2);flex-wrap:wrap;padding:8px 10px}
  .toolbar button{flex:1 1 auto;min-height:42px;font-size:15px}
  .toolbar select{flex:1 1 100px}
  .tool-label{display:none}
  .legend{font-size:10px;gap:4px 10px}
}
@media (max-width: 480px){
  .stat{min-width:62px;padding:3px 6px}
  .brand .sub{display:none}
  .legend{display:none}
}