/* ============================================================================
   田埂 · ridge.css —— 本款自己的那一套尺度（写下来，全应用只用它）
   ----------------------------------------------------------------------------
   色名（自己起的名，七个角色）：壤（底）· 土（字）· 苗（对了/描出来的）·
   埂（划出来的边界）· 界（次要文字与格线）· 缺（不对/要当心）· 渠（划好的地）
   字号 12 / 15 / 19 / 25 / 34 · 间距 7 / 11 / 18 / 30 · 圆角 3 / 6 / 14
   分隔：虚线 + 留白（不摆卡片、不用阴影）· 动效只有一处（新划的地"落定"一下）
   ★ 全文件的颜色取值只有 :root 那一份，别的行一律 var()。
   ========================================================================== */
:root {
  --rang: #f3ede1;      /* 壤 —— 底 */
  --tu:   #2f2a24;      /* 土 —— 正文字 */
  --miao: #4f8a4f;      /* 苗 —— 对了、描出来的 */
  --geng: #9a7136;      /* 埂 —— 你划出来的边界 */
  --jie:  #8a8272;      /* 界 —— 次要文字与格线 */
  --que:  #b0452c;      /* 缺 —— 不对、要当心 */
  --qu:   #e2d7c2;      /* 渠 —— 已经划好的地 */
  --veil: rgba(47, 42, 36, 0.55);

  --f12: 12px; --f15: 15px; --f19: 19px; --f25: 25px; --f34: 34px;
  --s7: 7px; --s11: 11px; --s18: 18px; --s30: 30px;
  --r3: 3px; --r6: 6px; --r14: 14px;
  --sans: system-ui, -apple-system, "Segoe UI", "Noto Sans SC", "PingFang SC", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
/* ★ 这一条是必需的，不是装饰：#app / #boot 用了 display:flex，ID 选择器比
   UA 的 [hidden]{display:none} 更优先，于是 hidden 属性会**失效** ——
   症状是首屏其实是两屏高、首屏那一处广告被顶到视口外面（本款实测栽过一次）。 */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--rang); color: var(--tu);
  font-family: var(--sans); font-size: var(--f15); line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { margin: 0; font-weight: 650; }
p { margin: 0 0 var(--s11); }
em { font-style: normal; color: var(--geng); }
i, .tiny { font-style: normal; font-size: var(--f12); color: var(--jie); }
b { font-weight: 650; }
code, .num { font-family: var(--mono); }

/* ---------- 启动过程 ---------- */
#boot { display: flex; align-items: center; justify-content: center; height: 100%; }
.bwrap { text-align: center; padding: var(--s30); max-width: 340px; }
.bico { margin-bottom: var(--s11); }
.bwrap h1 { font-size: var(--f34); letter-spacing: 6px; }
.btag { color: var(--jie); font-size: var(--f15); }
.bbar { height: 3px; background: var(--qu); margin: var(--s18) 0 var(--s11); }
.bbar i { display: block; height: 100%; width: 4%; background: var(--geng); transition: width .2s linear; }
#bootMsg { color: var(--jie); font-size: var(--f12); }
#bootErr { color: var(--que); font-size: var(--f12); }

/* ---------- 骨架 ---------- */
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
#consent {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s7);
  padding: var(--s7) var(--s11); border-bottom: 1px dashed var(--jie); font-size: var(--f12);
}
#consent label { display: inline-flex; align-items: center; gap: 4px; }
#consent input { width: 15px; height: 15px; accent-color: var(--miao); margin: 0; }
#consent .tiny { margin-left: auto; }
#dataWarn {
  margin: 0; padding: var(--s7) var(--s11); color: var(--que); font-size: var(--f12);
  border-bottom: 1px dashed var(--jie); background: var(--qu);
}
#dataWarn button { margin-left: var(--s7); }

/* 整块地占满一屏：棋盘是版面里的第一块，下面那条"怎么划 / 正在现算 / 读不出来"是**流式**的一块，
   它出现时棋盘自己让位（★ 早先是浮在棋盘上的，实测压住了最下面一行的木牌）。 */
#stage { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: var(--s7); }
#bdWrap { position: relative; flex: 1; min-height: 0; }
#bd { display: block; width: 100%; height: 100%; touch-action: none; }
#stageTop {
  position: absolute; top: var(--s7); left: var(--s11);
  display: flex; gap: var(--s11); font-size: var(--f12); color: var(--jie);
  background: var(--rang); border-radius: var(--r3); padding: 2px 5px;
}
#stageTop b { color: var(--tu); font-family: var(--mono); }
#stageBox {
  margin-top: var(--s7); border: 1px dashed var(--jie); border-radius: var(--r14);
  padding: var(--s7) var(--s11); font-size: var(--f12);
}
#stageBox .hd { font-size: var(--f15); margin-bottom: 4px; }
#stageBox.warn { border-color: var(--que); color: var(--que); }

#bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s18);
  padding: var(--s11) var(--s11); border-top: 1px dashed var(--jie);
}
#foot {
  display: flex; justify-content: space-between; padding: 0 var(--s11) var(--s7);
  padding-bottom: calc(var(--s7) + env(safe-area-inset-bottom));
  font-size: var(--f12); color: var(--jie);
}
#foot .num { color: var(--tu); }

/* ---------- 按钮：文字 + 下划线（全应用只这一种） ---------- */
button {
  font: inherit; color: var(--tu); background: none; border: 0; cursor: pointer;
  padding: var(--s7) 0; border-bottom: 1px solid var(--jie);
}
button:active { color: var(--geng); border-bottom-color: var(--geng); border-bottom-width: 2px; }
button[disabled] { color: var(--jie); border-bottom-style: dotted; cursor: default; }
button.lk { border-bottom-style: dotted; color: var(--geng); font-size: var(--f12); padding: 2px 0; }
button.warn { color: var(--que); border-bottom-color: var(--que); }
button.on { color: var(--geng); border-bottom-width: 2px; }

/* ---------- 那一处广告：唯一一处样式定义（.adbtn / .adtag） ---------- */
.adbtn { position: relative; color: var(--geng); border-bottom-color: var(--geng); }
.adbtn[disabled] { color: var(--jie); }
.adtag {
  position: absolute; top: -7px; right: -12px; background: var(--que); color: var(--rang);
  font-size: 9px; line-height: 1.3; padding: 1px 3px; border-radius: var(--r3);
}

/* ---------- 覆盖层 ---------- */
#sheet { position: fixed; inset: 0; background: var(--veil); overflow: auto; }
.panel {
  max-width: 460px; margin: 6vh auto; background: var(--rang);
  border: 1px solid var(--jie); border-radius: var(--r14); padding: var(--s18);
}
.panel header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s11); }
.panel h2 { font-size: var(--f25); }
.panel h3 { font-size: var(--f19); margin: var(--s18) 0 var(--s7); }
.panel ol, .panel ul { margin: 0 0 var(--s11); padding-left: var(--s18); }
.panel li { margin-bottom: 4px; }
.row { display: flex; align-items: baseline; gap: var(--s7); padding: var(--s7) 0; border-bottom: 1px dashed var(--jie); font-size: var(--f12); }
.row:last-child { border-bottom: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .m { font-family: var(--mono); color: var(--jie); white-space: nowrap; }
.row .ok { color: var(--miao); }
.row .no { color: var(--que); }
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s7); }
.cell {
  border: 1px solid var(--jie); border-radius: var(--r6); background: var(--rang);
  padding: var(--s7) 2px; text-align: center; font-size: var(--f12); line-height: 1.25;
}
.cell .n { font-family: var(--mono); font-size: var(--f15); display: block; }
.cell.on { border-color: var(--geng); border-width: 2px; }
.cell.done { background: var(--qu); }
.cell .st { color: var(--miao); letter-spacing: -1px; }
.cell.here .n { color: var(--geng); }
.skel { height: 34px; border-radius: var(--r6); background: var(--qu); }
.ta { width: 100%; height: 120px; font-family: var(--mono); font-size: var(--f12); border: 1px dashed var(--jie); border-radius: var(--r6); background: var(--rang); color: var(--tu); padding: var(--s7); }
.kv { display: flex; justify-content: space-between; gap: var(--s7); padding: 3px 0; font-size: var(--f12); }
.kv .v { font-family: var(--mono); }
.kv .bad { color: var(--que); }
.big { font-size: var(--f34); font-family: var(--mono); }

#toast {
  position: fixed; left: var(--s18); right: var(--s18);
  bottom: calc(var(--s30) + env(safe-area-inset-bottom));
  background: var(--tu); color: var(--rang); font-size: var(--f12);
  border-radius: var(--r6); padding: var(--s7) var(--s11); text-align: center;
  /* ★ 提示条压在最下面那一排按钮上：不关掉命中测试，它就会**把后面的点击吃掉**
     （本款实测栽过一次：连点两次广告，第二次的提示条盖住按钮，第三次就点不动了） */
  pointer-events: none;
}
#toast.warn { background: var(--que); }

/* ---------- 棋盘：只有这一套画法（画在 SVG 上的类） ---------- */
.bd-paper { fill: var(--rang); stroke: var(--jie); stroke-width: 1; }
.bd-grid { stroke: var(--jie); stroke-opacity: .3; stroke-width: 1; fill: none; }
.bd-reg { fill: var(--qu); stroke: var(--geng); stroke-width: 2.5; }
.bd-plate { fill: var(--geng); stroke: var(--tu); stroke-width: 1; }
.bd-plate.taken { stroke: var(--miao); stroke-width: 2; }
.bd-num { fill: var(--rang); font-family: var(--mono); font-size: 22px; font-weight: 650; }
.bd-hintrect { fill: none; stroke: var(--miao); stroke-width: 3; stroke-dasharray: 9 6; }
.bd-pre { fill: var(--qu); fill-opacity: .5; stroke: var(--geng); stroke-width: 2; stroke-dasharray: 6 5; }
.bd-pre.bad { stroke: var(--que); fill: var(--que); fill-opacity: .12; }
.bd-pretxt { fill: var(--jie); font-family: var(--mono); font-size: 14px; }

/* 动效只有这一处：新划下的一块地"落定"一下 */
.bd-reg.fresh { transform-box: fill-box; transform-origin: center; animation: settle .16s ease-out; }
@keyframes settle { from { transform: scale(.93); opacity: .35; } to { transform: scale(1); opacity: 1; } }