/* agent 商人 · 第一版「一天」——温馨、低饱和、不用高对比 */
:root {
  --ink: #4a4038;
  --ink-soft: #7b6f63;
  --paper: #f6efe0;
  --paper-2: #fffaf0;
  --line: #e0d4bf;
  --green: #7fa86a;
  --green-deep: #4f7a52;
  --clay: #c98f6a;
  --gold: #c9a54a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  background: radial-gradient(circle at 30% 0%, #fbf5e8, #efe6d3 60%, #e6dcc6);
  color: var(--ink);
}
header {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px 20px; background: rgba(255, 250, 240, .82);
  border-bottom: 2px solid var(--line);
}
h1 { font-size: 18px; margin: 0; letter-spacing: .5px; }
h1 .sub { font-size: 12px; color: var(--ink-soft); font-weight: 400; margin-left: 4px; }
h1 .ver { font-size: 11px; color: var(--ink-soft); font-weight: 400; margin-left: 6px; background: var(--line); border-radius: 8px; padding: 1px 6px; }
.clock { font-size: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-width: 0; }
.anchor { background: var(--green); color: #fff; border-radius: 10px; padding: 2px 10px; }
.light { color: var(--ink-soft); }
/* T6：头部时间对照（世界第 N 天 HH:MM ＝ 现实 YYYY-MM-DD HH:MM（1:1）） */
.time-cmp { font-size: 13px; color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; white-space: nowrap; }
.controls { margin-left: auto; display: flex; gap: 8px; }
button {
  font: inherit; font-size: 13px; padding: 6px 12px; cursor: pointer;
  background: var(--paper-2); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 10px;
}
button:hover { background: #fff; border-color: var(--green); }
button.primary { background: var(--green); color: #fff; border-color: var(--green-deep); }
button:disabled { opacity: .45; cursor: default; }

main { display: flex; gap: 18px; padding: 18px 20px; align-items: flex-start; }
.map-wrap { flex: 0 0 auto; }
canvas {
  image-rendering: pixelated; image-rendering: crisp-edges;
  border-radius: 12px; border: 3px solid var(--line); background: #cfe7c8;
  box-shadow: 0 6px 18px rgba(120, 100, 70, .18);
}
.legend { font-size: 12px; color: var(--ink-soft); margin-top: 8px; }
.legend span { margin-right: 10px; }
/* T6：地图场景切换器（本版留位：只有当前场景一项；四图并建＝P1） */
.scene-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-size: 12px; color: var(--ink-soft); }
.scene-bar select { font-size: 12.5px; padding: 2px 6px; }

.panels { flex: 1 1 520px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-width: 360px; }
.panel {
  background: rgba(255, 250, 240, .9); border: 1.5px solid var(--line);
  border-radius: 12px; padding: 10px 12px;
}
.panel h2 { font-size: 14px; margin: 0 0 8px; color: var(--green-deep); }
.panel h2 .hint { font-size: 11px; color: var(--ink-soft); font-weight: 400; }
.agent-row {
  border-bottom: 1px dashed var(--line); padding: 5px 0; font-size: 13px;
}
.agent-row:last-child { border-bottom: 0; }
.agent-name { font-weight: 600; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.stock { color: var(--ink-soft); font-size: 12px; }
.bar { height: 5px; background: var(--line); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--green); }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td { text-align: left; padding: 3px 4px; border-bottom: 1px solid var(--line); }
th { color: var(--ink-soft); font-weight: 500; }
td.num, th.num { text-align: right; }
.msg { font-size: 12px; min-height: 16px; margin-top: 6px; color: var(--green-deep); }
.msg.bad { color: #b4553f; }
pre#report { white-space: pre-wrap; font-size: 12px; line-height: 1.5; margin: 0; max-height: 260px; overflow: auto; }
#log { font-size: 12px; line-height: 1.55; max-height: 260px; overflow: auto; }
#log .k { color: var(--clay); }
select, input { font: inherit; font-size: 12.5px; padding: 3px 6px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; }
.row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.pending-item { font-size: 12px; color: var(--clay); }

/* v1.3.0 暂停键：钟被停住时按钮变醒目（一眼看出"世界停着"） */
button.paused { background: var(--gold); color: #fff; border-color: var(--gold); }
button.paused:hover { background: #d8b45c; border-color: #d8b45c; }

/* ---- 窄屏（手机；#81：workdesk 游戏页 iframe 里也生效）----
   canvas 内部 512×512 分辨率不变，只改显示尺寸 */
@media (max-width: 820px) {
  main { flex-direction: column; padding: 12px; gap: 12px; }
  .map-wrap { width: 100%; }
  canvas { width: 100%; height: auto; }
  .panels { grid-template-columns: 1fr; min-width: 0; width: 100%; }
  button { min-height: 40px; }
  .panels table { display: block; overflow-x: auto; white-space: nowrap; }
  pre#report, #log { max-height: 200px; }
}

/* ---- T6.1 数据栏一屏（宽屏；先生 2026-09-23 追加）----
   先生原话：「最好是一页能看全，现在我还要下拉才看得到最后一个数据栏」。
   宽屏整页不滚：body 固定视口高，长内容在各自 panel 内滚，不推整页。
   1366×768 走 2 列、1920×1080 走 3 列（≥1400）；5 个数据栏都在屏内。 */
@media (min-width: 900px) {
  html { height: 100%; }
  body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
  header { flex: 0 0 auto; }
  main { flex: 1 1 auto; min-height: 0; overflow: hidden; align-items: stretch; }
  .map-wrap { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .map-wrap canvas { display: block; width: auto; height: auto; max-width: 100%;
    max-height: calc(100% - 34px); }
  .panels { min-height: 0; overflow: hidden; grid-auto-rows: minmax(0, 1fr); }
  .panel { min-height: 0; overflow: auto; }
}
@media (min-width: 1400px) {
  .panels { grid-template-columns: repeat(3, 1fr); }
}