/* terrain.css —— 「地形瓦片生成器」独立页
 * 跟 px.css / matte.css 同一套规矩：
 *   ① 容器上显式声明 color —— body 在 data-theme 作用域外，不写会继承成浅色字；
 *   ② 棋盘格用局部 --ck-a/--ck-b，不写死深色值（首页 .checker 就是这么踩的坑）。 */

.tg-tool{margin-top:26px}

.tg-step{display:flex;gap:14px;margin-bottom:16px}
.tg-step-n{
  flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--primary);color:#fff;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.tg-step-b{
  flex:1;min-width:0;background:var(--bg-panel);border:1px solid var(--border);
  border-radius:12px;padding:16px;color:var(--text-1);
}
.tg-step-b .sec-title{color:var(--text-1)}
.tg-step-b .hint{color:var(--muted)}

/* ---- 棋盘格（透明区） ---- */
.tg-box,.tg-sheet-wrap,.tg-map-wrap,.tg-mat{
  --ck-a:#e9ecf2;--ck-b:#f7f8fb;
  background-image:repeating-conic-gradient(var(--ck-a) 0% 25%,var(--ck-b) 0% 50%);
  background-size:16px 16px;
}
.tg-sheet-wrap,.tg-map-wrap{background-size:12px 12px}
[data-theme="dark"] .tg-box,
[data-theme="dark"] .tg-sheet-wrap,
[data-theme="dark"] .tg-map-wrap,
[data-theme="dark"] .tg-mat{--ck-a:#1b1b20;--ck-b:#24242a}

/* ---- ② 参数区 ---- */
.tg-ctrl{
  display:flex;flex-direction:column;gap:10px;
  background:var(--bg-inset);border:1px solid var(--border);
  border-radius:10px;padding:12px 14px;
}
.tg-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tg-lab{font-size:12.5px;color:var(--text-2)}
.tg-row input[type=range]{width:150px;max-width:40vw}
.tg-row select{
  background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;
  color:var(--text-1);font-size:13px;padding:5px 8px;max-width:100%;
}
.tg-row select:focus{outline:none;border-color:var(--primary)}
.tg-status{font-size:12.5px;color:var(--text-2)}
.tg-status.tg-ok{color:var(--accent);font-weight:600}
.tg-stat{font-size:12.5px;color:var(--text-2);margin-top:10px;min-height:18px}
.tg-info{
  font-size:12.5px;line-height:1.6;color:var(--text-2);
  background:var(--primary-soft);border-radius:9px;padding:7px 10px;
  flex:1;min-width:220px;
}
[data-theme="dark"] .tg-info{background:rgba(124,92,255,.18);color:var(--text-1)}
.tg-warn{
  font-size:12.5px;line-height:1.6;color:#8a5a00;
  background:#fff5d6;border:1px solid #f0d79a;border-radius:9px;padding:7px 10px;
  margin-top:8px;display:none;
}
[data-theme="dark"] .tg-warn{background:rgba(186,117,23,.16);border-color:rgba(239,159,39,.4);color:#f5c98a}
.tg-warn.on{display:block}
.tg-num{
  background:var(--bg-inset);border:1px solid var(--border);border-radius:8px;
  color:var(--text-1);font-size:13px;padding:5px 8px;width:74px;
}
.tg-num:focus{outline:none;border-color:var(--primary)}
.tg-color{
  width:38px;height:30px;padding:0;border:1px solid var(--border);border-radius:8px;
  background:none;cursor:pointer;
}

/* ---- ② 素材 / 瓦片集 ---- */
.tg-cmp{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;margin-top:14px}
.tg-cmp-col{min-width:0}
.tg-cmp-hd{font-size:12.5px;color:var(--text-2);margin-bottom:6px}
.tg-box{
  position:relative;border:1px solid var(--border);border-radius:10px;
  overflow:hidden;min-height:120px;line-height:0;padding:6px;
}
.tg-box canvas{display:block;width:100%;height:auto;image-rendering:pixelated}
.tg-mat canvas{display:block;width:100%;height:auto;image-rendering:pixelated}
.tg-empty{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--muted);line-height:1.6;text-align:center;padding:10px;
}
.tg-sheet-wrap{
  position:relative;border:1px solid var(--border);border-radius:10px;
  overflow:auto;line-height:0;min-height:160px;cursor:crosshair;text-align:center;
  padding:6px;
}
/* 瓦片集按实际像素尺寸显示，不拉伸 —— 拉成非整数倍会把方角糊掉、还起摩尔纹，
   而这一页最需要看清的就是「直角是直角、圆角是圆角」。超过容器宽才缩。 */
.tg-sheet-wrap canvas{display:inline-block;width:auto;max-width:100%;height:auto;image-rendering:pixelated}

/* ---- 选中瓦片的 3×3 位示意 ---- */
.tg-pick{
  display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-top:12px;
  background:var(--bg-inset);border:1px solid var(--border);border-radius:10px;padding:11px 13px;
}
.tg-bits{display:grid;grid-template-columns:repeat(3,30px);grid-template-rows:repeat(3,30px);gap:3px;flex:none}
.tg-bit{
  border:1px solid var(--border);border-radius:5px;background:var(--bg-panel);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-2);
}
.tg-bit.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.tg-bit.mid{background:var(--primary-soft);border-color:var(--primary);color:var(--primary);font-weight:700}
[data-theme="dark"] .tg-bit.mid{background:rgba(124,92,255,.24);color:#c9b8ff}
.tg-bit.off{opacity:.5}
.tg-pick-txt{font-size:12.5px;line-height:1.7;color:var(--text-2);min-width:180px;flex:1}
.tg-pick-txt b{color:var(--text-1)}
.tg-pick-none{font-size:12.5px;color:var(--muted);line-height:1.7}

/* ---- ③ 试画 ---- */
.tg-map-wrap{
  display:inline-block;border:1px solid var(--border);border-radius:10px;
  overflow:hidden;line-height:0;cursor:crosshair;max-width:100%;
}
.tg-map-wrap canvas{display:block;image-rendering:pixelated;max-width:100%;height:auto}
.tg-map-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.tg-hint-line{font-size:12.5px;color:var(--muted);line-height:1.7;margin-top:8px}

/* ---- ④ 导出 ---- */
.tg-opt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0}

@media (max-width:760px){
  .tg-cmp{grid-template-columns:1fr}
  .tg-step-n{width:24px;height:24px;font-size:12px}
  .tg-step-b{padding:13px}
  .tg-row input[type=range]{width:130px}
  .tg-bits{grid-template-columns:repeat(3,26px);grid-template-rows:repeat(3,26px)}
}