/* 智能拼豆软件 — 手机横屏优先 · 浅色主题（仅「拼豆模式」全屏为纯黑） */
:root{
  --bg:#F5F5F5; --card:#ffffff; --line:#d8dce1; --ink:#1f2328; --ink2:#5b6570;
  --brand:#3b82f6; --brand-d:#2f6fe0; --ok:#0f9d58; --warn:#d93025;
  --top:42px; --panel:300px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  background:var(--bg);color:var(--ink);
  font:14px/1.5 system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  /* App 本身占满一屏（#app 是 100dvh），下面还有正文区 #doc，所以页面要可滚动。
     画布是 touch-action:none、侧栏自带内部滚动，所以不影响原有的拖拽/缩放手势。 */
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
button,input,select{font:inherit;color:inherit}
button{
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:5px 10px;cursor:pointer;white-space:nowrap;color:var(--ink);
  touch-action:manipulation;   /* 手机上点按立即响应，不与滚动/双击缩放抢手势 */
}
button:hover{border-color:#9aa3ad}
button.primary{background:var(--brand);border-color:var(--brand);color:#fff}
button.primary:hover{background:var(--brand-d)}
button.wide{width:100%}
button:disabled{opacity:.45;cursor:not-allowed}
input[type=number],input[type=text],select{
  border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:var(--card);color:var(--ink);
}
input::placeholder{color:var(--ink2)}
input[type=range]{width:100%;accent-color:var(--brand)}
canvas{touch-action:none;display:block}
.spacer{flex:1}
.hint{margin:6px 0 0;font-size:12px;color:var(--ink2)}
label{display:block;margin:6px 0;font-size:13px;color:var(--ink2)}
label.inline{display:inline-flex;align-items:center;gap:5px;margin:6px 8px 6px 0;color:var(--ink)}
.row2{display:flex;gap:8px}.row2>label{flex:1}
/* 已固化为默认值、不再显示的控件（保留 DOM 以参与生成流程） */
.opt-off{display:none!important}
#fToggleAll{margin-top:6px}

/* ---------- 布局 ---------- */
#app{display:flex;flex-direction:column;height:100dvh}
#top{
  display:flex;align-items:center;gap:6px;height:var(--top);
  padding:0 8px;background:var(--card);border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.brand{font-weight:600;font-size:15px;margin:0;line-height:1;white-space:nowrap}
/* 页头通往教程页的内链（有利于收录教程页 + 用户找说明） */
a.hdrlink{
  color:var(--ink2);font-size:13px;text-decoration:none;line-height:1;
  padding:5px 9px;border:1px solid var(--line);border-radius:8px;background:var(--card);
}
a.hdrlink:hover{border-color:#9aa3ad;color:var(--ink)}
.tabs{display:flex;gap:4px;margin-left:6px}
.tab{border-radius:8px 8px 0 0;background:#eceff2;border-color:#d8dce1;color:var(--ink2)}
.tab.on{background:var(--brand);border-color:var(--brand);color:#fff}

#main{flex:1;display:flex;min-height:0}
#stage{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.view{display:none;flex:1;min-height:0;flex-direction:column;padding:6px}
.view.on{display:flex}
.imgbar,.viewbar{
  display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:6px;
}
.imgbar button,.viewbar button{padding:4px 9px;font-size:13px}
.sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.pctsign{font-size:12px;color:var(--ink2)}
#inpPct,#fInpPct{width:62px;text-align:center}
.canvasWrap{
  flex:1;min-height:0;position:relative;background:#eceef1;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.canvasWrap canvas{position:absolute;inset:0;width:100%;height:100%}

#panel{
  width:var(--panel);flex:0 0 var(--panel);background:var(--card);
  border-left:1px solid var(--line);overflow-y:auto;padding:8px 10px;
}
#panel.hide{display:none}
.sec{border-bottom:1px dashed var(--line);padding-bottom:8px;margin-bottom:8px}
.sec:last-child{border-bottom:0}
.sec h3{margin:4px 0 6px;font-size:13px;color:var(--ink)}
.btnrow{display:flex;gap:5px;margin:6px 0}
.btnrow.wrap{flex-wrap:wrap}
.btnrow button{flex:1;font-size:12px;padding:5px 6px}

/* ---------- 侧栏「色号粒数」列表（原底部色号汇总条已删除） ---------- */
#sumList{
  display:flex;flex-direction:column;gap:4px;margin-top:2px;
  max-height:44vh;overflow-y:auto;padding-right:2px;
}
.crow{
  display:flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:6px;padding:3px 6px;cursor:pointer;font-size:12px;
  background:var(--card);color:var(--ink);
}
.crow.on{outline:2px solid var(--brand);outline-offset:0}
.crow.done{opacity:.55}
.crow.done .nm::before{content:"✔ ";color:var(--ok);font-weight:700}
.sw{height:22px;border-radius:5px;border:1px solid rgba(0,0,0,.18)}
.crow .sw{width:16px;height:16px;flex:0 0 16px;border-radius:4px}
.crow .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .ct{flex:0 0 auto;color:var(--ink2);font-size:11px}

/* ---------- 拼豆模式（全屏）—— 唯一保持纯黑的部分 ---------- */
#full{
  /* 在拼豆模式内把主题变量切回深色，站点的浅色设定不影响这里 */
  --bg:#000; --card:#000; --line:#333; --ink:#e8eaed; --ink2:#9aa0a6;
  --ok:#19c46a; --warn:#ff5a5a;
  position:fixed;inset:0;z-index:50;background:#000;display:flex;flex-direction:row-reverse;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  color:var(--ink);
}
#full button:hover{border-color:#5a626b}
#full .sw{border-color:rgba(255,255,255,.22)}
#full[hidden]{display:none}
/* #fullRot 承载真正的内容：真实全屏时 Chrome 会忽略全屏元素自身的 transform，
   因此旋转必须作用在它的子元素上（子元素可自由变换）。 */
#fullRot{display:flex;flex-direction:row-reverse;flex:1;min-width:0;min-height:0}
/* 拼豆模式自动横屏：把内容旋转 90°（微信等无法锁定屏幕方向时的兜底，不依赖任何 API） */
#full.pm-rot{padding:0}
#full.pm-rot #fullRot{
  position:absolute;top:50%;left:50%;
  width:100vh;height:100vw;
  transform:translate(-50%,-50%) rotate(90deg);
  transform-origin:center center;
  flex:none;
}
@supports (width:100dvh){
  #full.pm-rot #fullRot{width:100dvh;height:100dvw;}
}
.fstage{flex:1;min-width:0;position:relative;background:#000}
#fGridCanvas{position:absolute;inset:0;width:100%;height:100%}
/* 收起 / 展开侧栏：手机横屏时侧栏太占地方，可以整个收掉让画布占满。
   按钮浮在画布右上角，跟着 #fullRot 一起旋转（所以竖屏自动横屏时位置依然正常）。 */
.fptoggle{
  position:absolute;top:8px;right:8px;z-index:3;
  width:34px;height:34px;padding:0;line-height:1;
  border:1px solid rgba(255,255,255,.28);border-radius:8px;
  background:rgba(22,22,22,.7);color:#e8eaed;font-size:15px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  touch-action:manipulation;
}
#full.panel-hidden .fpanel{display:none}
.fpanel{
  /* 侧栏宽度必须跟着「可用宽度」收窄。手机短边只有 ~390px：固定 290px 会把画布挤成一条
     （竖屏自动横屏时更糟——#fullRot 的 width 变成 100vw，侧栏的固定宽度正好落在短边上，
     画布只剩 ~140px）。宽屏（容器 ≥853px）仍是 290px，行为不变。
     max-width 是给不认识 clamp() 的老浏览器兜底：任何情况下侧栏都不超过 44%。 */
  width:290px;
  width:clamp(176px,34%,290px);
  max-width:44%;
  flex:0 0 auto;
  background:#000;border-left:1px solid var(--line);
  overflow-y:auto;padding:8px 10px;
}
.cur{
  border:1px solid var(--line);border-radius:8px;padding:6px;display:flex;
  align-items:center;gap:8px;font-size:13px;background:#0c0c0c;color:var(--ink);
}
.cur .sw{width:38px;height:26px;flex:0 0 auto}
.fsum{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;max-height:190px;overflow-y:auto}
.fsum .mini{
  width:52px;border:1px solid var(--line);border-radius:6px;padding:2px;
  font-size:10px;text-align:center;cursor:pointer;background:#000;color:var(--ink);
}
.fsum .mini.on{outline:2px solid var(--brand)}
.fsum .mini.done{opacity:.5}
.fsum .mini .ct2{color:var(--ink2);font-size:9px;line-height:1.3}
/* 拼豆模式视图：锁定缩放/移动 + 粒数汇总 */
.lockrow{display:flex;flex-wrap:wrap;gap:0 10px}
.ftotals{margin:6px 0 0;font-size:11px;color:var(--ink2);line-height:1.6}
.sumtot{color:var(--ink2);margin-left:6px}

/* 拼豆模式「物理对齐」：方向微调键盘（1 像素/次，按住连续） */
.nudgepad{
  display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:6px 0 2px;
  max-width:210px;
}
.nudgepad .nud{font-size:15px;line-height:1;padding:8px 0;text-align:center}
.nudgepad .nud.ctr{font-size:11px;padding:8px 2px}
#fNudU{grid-column:2;grid-row:1}
#fNudL{grid-column:1;grid-row:2}
#fAlignReset{grid-column:2;grid-row:2}
#fNudR{grid-column:3;grid-row:2}
#fNudD{grid-column:2;grid-row:3}

/* 区块选择（小地图） */
.fbinfo{font-weight:400;font-size:11px;color:var(--ink2)}
.fblocks{
  display:grid;gap:3px;margin-top:6px;grid-auto-rows:20px;
  max-height:150px;overflow:auto;padding:2px;justify-content:start;
}
.fblk{
  width:20px;height:20px;padding:0;font-size:9px;line-height:1;cursor:pointer;
  border:1px solid var(--line);border-radius:4px;background:#000;color:var(--ink2);
  display:flex;align-items:center;justify-content:center;
}
.fblk.todo{background:#2a2410;border-color:#6b5516;color:#e3c87a}
.fblk.done{background:#0f2e1b;border-color:#1f6b3e;color:#56e08e;font-weight:700}
.fblk.empty{background:#111;border-color:#2a2a2a;color:#666}
.fblk.cur{outline:2px solid var(--brand);outline-offset:0;box-shadow:0 0 0 2px rgba(59,130,246,.3)}

#toast{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
  background:rgba(20,22,26,.94);color:#fff;padding:8px 14px;border-radius:8px;
  border:1px solid rgba(255,255,255,.16);
  font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:99;max-width:80vw;
}
#toast.on{opacity:1}

/* ---------- 竖屏强制横屏遮罩（全站 + 拼豆模式通用） ---------- */
.orient-overlay{
  position:fixed;inset:0;z-index:200;
  background:#000;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  text-align:center;padding:24px;
  /* 覆盖刘海/动态栏 */
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
}
.orient-overlay[hidden]{display:none}
.orient-overlay .rotico{font-size:60px;line-height:1;animation:rotSpin 2s ease-in-out infinite}
@keyframes rotSpin{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}
.orient-overlay p{font-size:17px;line-height:1.7;margin:0}
.orient-overlay b{color:#7aa2ff}
.orient-overlay #rotExit{margin-top:6px}

/* ---------- 手机横屏（主要目标） ---------- */
@media (orientation:landscape) and (max-height:560px){
  :root{--top:38px;--panel:250px}
  .brand{font-size:13px}
  a.hdrlink{padding:4px 8px;font-size:12px}
  #top{gap:4px;padding:0 6px}
  #top button{padding:4px 8px;font-size:12px}
  .imgbar button,.viewbar button{padding:3px 7px;font-size:12px}
  .sec h3{font-size:12px}
  label{font-size:12px;margin:4px 0}
  .fpanel{width:250px;width:clamp(160px,30%,250px);max-width:44%;flex:0 0 auto}
}
/* ---------- 手机竖屏：面板改到底部 ---------- */
@media (orientation:portrait) and (max-width:820px){
  #main{flex-direction:column}
  #panel{
    width:auto;flex:0 0 42%;border-left:0;border-top:1px solid var(--line);
  }
}
/* ---------- 窄屏兜底 ---------- */
@media (max-width:520px){
  :root{--panel:210px}
  .brand{display:none}
  a.hdrlink{display:none}
}

/* ============================================================
   正文内容区 #doc + 页脚 #pagefoot
   —— 位于 App 下方（App 是第一屏），给第一次来的访客和搜索引擎看。
      不参与任何 JS 逻辑，样式与 App 完全隔离。
   ============================================================ */
#doc{
  max-width:880px;margin:0 auto;padding:30px 20px 8px;
  font-size:14.5px;line-height:1.9;color:var(--ink);
}
/* 标题层级：h1（页头品牌）→ h2（文章大节）→ h3（问答小标题） */
#doc h2{font-size:16.5px;line-height:1.6;margin:26px 0 8px;padding-left:9px;border-left:3px solid var(--brand)}
#doc h2.docfirst{
  font-size:21px;line-height:1.5;margin:0 0 14px;padding-left:0;border-left:0;letter-spacing:.2px;
  font-weight:700;
}
#doc h3{font-size:14.5px;margin:16px 0 4px;color:var(--ink)}
#doc .lead{font-size:15px;margin:0 0 6px}
#doc p{margin:8px 0;color:var(--ink)}
#doc ul,#doc ol{margin:8px 0;padding-left:24px}
#doc li{margin:6px 0}
#doc b{color:var(--ink)}
#doc a{color:var(--brand-d);text-decoration:underline;text-underline-offset:2px}
#doc h4+p{color:var(--ink2);margin-top:2px}
#pagefoot{
  max-width:880px;margin:26px auto 0;padding:16px 20px 48px;
  border-top:1px solid var(--line);color:var(--ink2);font-size:12.5px;line-height:1.8;
}
#pagefoot p{margin:4px 0}
#pagefoot a{color:var(--brand-d);text-decoration:none}
#pagefoot a:hover{text-decoration:underline}
#pagefoot .tiny{color:var(--ink2);opacity:.8}
/* 手机竖屏（含平板）：正文区左右留白收紧，字号略小 */
@media (max-width:820px){
  #doc{padding:24px 16px 6px;font-size:14px;line-height:1.85}
  #doc h2{font-size:18.5px}
  #doc h3{font-size:15px;margin-top:22px}
  #pagefoot{padding:14px 16px 40px}
}