/* 画规 H5 —— 绿色系开奖表格 + 画线工具 */
:root {
  --bg: #4a7a4d;            /* 页面深绿 */
  --bar: #3f6b42;           /* 工具栏 */
  --cell-bg: #fbfbf4;       /* 号码格底 */
  --cell-alt: #eef2d8;      /* 尾列底 */
  --rowhead-bg: #9cc49a;    /* 期号列底 */
  --mark-bg: #dce8b4;       /* 标记列底 */
  --line-grid: #5c855e;     /* 网格线 */
  --num: #2e6b34;           /* 号码色 */
  --ink: #ffffff;
  --accent: #e85555;
  --cell-h: 58px;
  --grid-x: 1px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  background: var(--bg);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* ---------- 工具栏：关闭 | 撤销 恢复 清除 分享 保存 | 彩种 ---------- */
.toolbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  padding-top: var(--safe-t);
  display: flex; align-items: stretch;
  background: var(--bar);
  box-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.tb-btn {
  border: 0; background: none; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 15px; padding: 8px 0 7px; min-height: 58px;
  font-family: inherit; cursor: pointer; flex: 1;
}
.tb-btn:active { opacity: .75; }
.tb-ico { width: 25px; height: 25px; }
.tb-close { flex: 0 0 62px; }
.tb-game { flex: 0 0 84px; color: #fff; font-weight: 600; }
.tb-div {
  width: 1px; margin: 10px 2px; background: rgba(255,255,255,.35); flex: none;
}
.tb-btn.active { background: rgba(255,255,255,.16); }

/* ---------- 表格 ---------- */
.board-wrap {
  position: fixed; inset: 0;
  padding-top: calc(64px + var(--safe-t));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.board { position: relative; width: 100%; }
.grid-head {
  display: grid;
  grid-template-columns: 64px 44px repeat(var(--cols, 5), 1fr);
  position: sticky; top: 0; z-index: 5;
}
.gh-cell {
  background: var(--bar); color: #dfead9;
  font-size: 14px; text-align: center; padding: 4px 0;
  border-right: var(--grid-x) solid rgba(255,255,255,.12);
}
.grid-body { position: relative; }
.row { display: grid; grid-template-columns: 64px 44px repeat(var(--cols, 5), 1fr); }
.cell {
  height: var(--cell-h);
  border-bottom: var(--grid-x) solid var(--line-grid);
  border-right: var(--grid-x) solid var(--line-grid);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.row .cell:nth-last-child(1) { border-right: 0; }
.rowhead {
  background: var(--rowhead-bg); color: #fff; flex-direction: column; gap: 2px;
}
.rowhead .qi {
  font-family: "Times New Roman", "Liberation Serif", serif;
  font-variant-numeric: lining-nums;
  font-size: 17px; font-weight: 700; letter-spacing: 0;
}
.rowhead .dt { font-size: 11px; font-weight: 500; opacity: .92; }
.numcell { background: var(--cell-bg); }
.numcell.tail { background: var(--cell-alt); }
.sumcell { background: var(--cell-alt); }
.sumnum {
  font-family: "Times New Roman", "Liberation Serif", "Songti SC", serif;
  font-size: 24px; font-weight: 700; color: var(--num); line-height: 1;
  font-variant-numeric: lining-nums;
  user-select: none;
}
.num {
  font-family: "Times New Roman", "Liberation Serif", "Songti SC", serif;
  font-size: var(--num-size, 44px); font-weight: 700; color: var(--num); line-height: 1;
  font-variant-numeric: lining-nums;
  user-select: none;
}
.num.two { font-size: calc(var(--num-size, 44px) * .68); letter-spacing: 1px; }
.numcell.future .num { opacity: 0; }
.numcell.hot { box-shadow: inset 0 0 0 3px rgba(232,85,85,.55); }
.row.opening .rowhead { background: #7fae7d; }

/* ---------- 画线层 ---------- */
.line-layer {
  position: absolute; inset: 0; z-index: 8;
  pointer-events: none;
  user-select: none; -webkit-user-select: none; /* 防止拖动触发文本选择吃掉 pointerup */
}
/* 画线层默认不拦截任何事件：它与 #gridBody 是兄弟节点，
   一旦 pointer-events:auto 就会吞掉格子上的「数字选择器/清除标记」点击（历史 bug 根因）。
   只让「已画好的图形」可被橡皮点中。 */
.line-layer { pointer-events: none; }
.line-layer.pen .sh { pointer-events: auto; cursor: crosshair; }
.line-layer path, .line-layer line { stroke-linecap: round; }
/* 绘图模式下禁止该容器原生滚动：必须在「滚动容器的子元素」上声明，
   之前落在覆盖全表的 svg 上，导致手机上开画后整表无法滚动 */
.board.pen { touch-action: none; }
.board.pen .numcell, .board.pen .sumcell { cursor: crosshair; }

/* ---------- 底部浮动 ---------- */
.fab-lock {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + var(--safe-b)); z-index: 30;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(20, 40, 22, .82); border: 2px solid rgba(255,255,255,.65);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.fab-lock svg { width: 26px; height: 26px; }
.fab-lock.locked { background: var(--accent); border-color: #fff; }

/* 左下颜色选择器：整圆显示当前色 + 白√，色条向上弹、粗细向右弹 */
.fab-color {
  position: fixed; left: 14px; bottom: calc(16px + var(--safe-b)); z-index: 32;
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  background: var(--accent);
}
.fab-color .check { color: #fff; font-size: 20px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.color-panel {
  position: fixed; left: 12px; bottom: calc(74px + var(--safe-b)); z-index: 32;
  background: rgba(30,50,32,.55); border-radius: 22px; padding: 8px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-height: 60vh; overflow: auto;
}
.color-list { display: flex; flex-direction: column; gap: 7px; }
.color-list button {
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  cursor: pointer; position: relative; flex: none;
}
.color-list button.on::after {
  content: "√"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; color: #fff;
  font-size: 16px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.width-panel {
  position: fixed; left: 72px; bottom: calc(16px + var(--safe-b)); z-index: 32;
  background: rgba(30,50,32,.55); border-radius: 20px; padding: 8px 6px;
  display: flex; align-items: center;
}
.width-list { display: flex; flex-direction: column; gap: 9px; align-items: center; }
.width-list button {
  border-radius: 50%; border: 2px solid rgba(255,255,255,.85);
  background: #9b9b9b; cursor: pointer; flex: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.width-list button svg { display: block; }

/* 右下工具胶囊 + 向上弹出的工具菜单 */
.fab-capsule {
  position: fixed; right: 14px; bottom: calc(16px + var(--safe-b)); z-index: 32;
  display: flex; border-radius: 26px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.cap-btn {
  border: 0; background: rgba(60,60,60,.92); color: #fff;
  font-size: 17px; height: 52px; padding: 0 18px; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 6px;
}
.cap-btn svg { width: 22px; height: 22px; }
.cap-btn:active { opacity: .8; }
#fabTools {
  width: 52px; padding: 0; justify-content: center;
  background: rgba(125,125,125,.95);
}
/* 绘图态：右下按钮高亮描边，让用户一眼看出"现在点格子会画线" */
#fabTools.pen { box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 4px 14px rgba(0,0,0,.28); }
.s-ico {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic; font-weight: 700; font-size: 26px; line-height: 1;
}
.tools-row .ti-s, .cap-dyn .ti-s {
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700;
}
.tools-row .ti-a, .cap-dyn .ti-a {
  font-style: normal; font-weight: 700;
}
.cap-dyn { font-size: 20px; line-height: 1; display: flex; align-items: center; }
.cap-dyn svg { width: 22px; height: 22px; }
.tools-panel {
  position: fixed; right: 14px; bottom: calc(74px + var(--safe-b)); z-index: 32;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.tools-row { display: flex; align-items: center; gap: 8px; }
.tools-row .tname {
  background: rgba(40,40,40,.88); color: #fff; font-size: 15px;
  padding: 8px 14px; border-radius: 18px; white-space: nowrap;
}
.tools-row .tbtn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(60,60,60,.92); color: #fff; font-size: 19px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.tools-row .tbtn svg { width: 24px; height: 24px; }
.tools-row .tbtn.on { background: var(--accent); }

/* 文字输入 */
.txt-input {
  width: 100%; height: 52px; border: 1px solid #ddd; border-radius: 12px;
  font-size: 19px; padding: 0 14px; font-family: inherit; outline: none;
}
.txt-input:focus { border-color: var(--accent); }

/* 保存图片预览 */
.sheet-mask.center { align-items: center; justify-content: center; }
.img-sheet {
  width: min(92vw, 420px); max-height: 86vh; overflow: auto;
  background: #fff; color: #333; border-radius: 16px; padding: 16px;
}
.img-preview { width: 100%; border: 1px solid #eee; border-radius: 8px; display: block; }
a.sheet-btn { display: block; text-align: center; text-decoration: none; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(88px + var(--safe-b));
  transform: translateX(-50%) translateY(8px);
  background: rgba(0,0,0,.72); color: #fff; font-size: 16px;
  padding: 10px 18px; border-radius: 10px; z-index: 60;
  opacity: 0; pointer-events: none; transition: .18s;
  max-width: 80vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 底部弹层（键盘/设置） ---------- */
.sheet-mask {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.38);
  display: flex; align-items: flex-end;
}
.sheet {
  width: 100%; background: #fff; color: #333;
  border-radius: 16px 16px 0 0;
  padding: 18px 16px calc(18px + var(--safe-b));
  animation: up .18s ease-out;
}
@keyframes up { from { transform: translateY(40%); } to { transform: none; } }
.sheet-title { font-size: 19px; font-weight: 700; margin-bottom: 14px; }
.sheet-title.accent { border-left: 4px solid var(--accent); padding-left: 8px; }
.sheet-btn {
  width: 100%; border: 0; border-radius: 24px; font-size: 19px;
  padding: 13px 0; font-family: inherit; cursor: pointer; margin-top: 12px;
}
.sheet-btn.primary { background: linear-gradient(90deg, #f26d6d, #e84545); color: #fff; }
.sheet-btn.danger { background: #f5f5f5; color: #c33; }
.sheet-btn.switch-panel { background: #e8f4fd; color: #4a90d9; }

/* 设置面板 */
.opt-row { display: flex; align-items: center; gap: 12px; margin: 12px 0; }

/* ---------- 大设置面板（7页签） ---------- */
.set-panel {
  width: 100%; background: #fff; color: #333;
  border-radius: 16px 16px 0 0; height: 72vh;
  display: flex; flex-direction: column; animation: up .18s ease-out;
}
.set-head {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 16px 10px; border-bottom: 1px solid #f0f0f0;
  position: relative;
}
.set-title { font-size: 19px; font-weight: 700; }
.set-dual {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: #999; font-size: 15px; cursor: pointer; font-family: inherit;
}
.set-body { flex: 1; display: flex; min-height: 0; }
.set-tabs {
  width: 92px; flex: none; background: #f7f7f7; overflow: auto;
  display: flex; flex-direction: column;
}
.set-tabs button {
  border: 0; background: none; padding: 16px 0; font-size: 16px; color: #555;
  font-family: inherit; cursor: pointer; position: relative;
}
.set-tabs button.on { color: #e84343; background: #fff; font-weight: 600; }
.set-tabs button.on::before {
  content: ""; position: absolute; left: 0; top: 20%; height: 60%;
  width: 3px; background: #e84343; border-radius: 2px;
}
.set-content { flex: 1; overflow: auto; padding: 14px 16px calc(20px + var(--safe-b)); }
.set-hint { font-size: 13px; color: #b0b0b0; margin-bottom: 10px; }
.set-item { margin-bottom: 16px; }
.set-item .si-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.set-item .si-sub { font-size: 12px; color: #aaa; font-weight: 400; margin-left: 4px; }
.seg-row { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-row button {
  min-width: 56px; padding: 9px 14px; border: 1px solid #e5e5e5; border-radius: 9px;
  background: #fafafa; font-size: 15px; color: #555; cursor: pointer; font-family: inherit;
}
.seg-row button.on { background: #e84343; border-color: #e84343; color: #fff; font-weight: 600; }
.seg-row button:disabled { opacity: .4; cursor: default; }
.switch-line { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.switch-line .sl-name { font-size: 16px; font-weight: 600; }
.switch-line .sl-sub { font-size: 12px; color: #aaa; display: block; margin-top: 2px; }
.skin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.skin-grid button {
  height: 42px; border: 1px solid #e5e5e5; border-radius: 9px; background: #fafafa;
  font-size: 15px; color: #444; cursor: pointer; font-family: inherit;
}
.skin-grid button.on { background: #e84343; border-color: #e84343; color: #fff; font-weight: 600; }
.skin-grid button:disabled { opacity: .35; cursor: default; }
.lockpos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.lockpos-grid .lp {
  border: 2px solid #eee; border-radius: 10px; padding: 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; background: #fafafa;
}
.lockpos-grid .lp.on { border-color: #e84343; }
.lockpos-grid .lp .demo { width: 100%; height: 54px; border-radius: 6px; background: #cfe3cf; position: relative; }
.lockpos-grid .lp .demo i {
  position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #666;
}
.lockpos-grid .lp span { font-size: 13px; color: #555; }
.ord-list { display: flex; flex-direction: column; gap: 8px; }
.ord-list .ord-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px;
  border: 1px solid #eee; border-radius: 10px;
}
.ord-list .ord-item i { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.ord-list .ord-item button {
  margin-left: auto; border: 1px solid #e5e5e5; background: #fff; border-radius: 8px;
  padding: 5px 10px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.set-link { text-align: center; color: #4a90d9; font-size: 15px; margin-top: 12px; cursor: pointer; }

/* ---------- 数字选择器 ---------- */
.sel-panel {
  width: 100%; background: #fff; color: #333; border-radius: 16px 16px 0 0;
  padding-bottom: calc(12px + var(--safe-b)); animation: up .18s ease-out;
}
.seg2 { display: flex; background: #f2f2f2; border-radius: 14px; overflow: hidden; }
.seg2 button { border: 0; background: none; padding: 6px 16px; font-size: 14px; color: #888; cursor: pointer; font-family: inherit; }
.seg2 button.on { background: #e84343; color: #fff; border-radius: 14px; }
.sel-panel .set-head { justify-content: space-between; }
.sel-body { padding: 12px 16px 0; max-height: 66vh; overflow: auto; }
.sel-label { font-size: 15px; color: #666; margin-bottom: 8px; }
.sel-cond { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; }
.sel-cond button {
  border: 1px solid #e5e5e5; background: #fafafa; border-radius: 9px;
  height: 40px; padding: 0; font-size: 14px; color: #555; cursor: pointer; font-family: inherit;
  text-align: center;
}
.sel-cond button.on { background: #fff2f2; border-color: #e84343; color: #e84343; font-weight: 600; }
.sel-nums { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
.sel-nums button {
  width: 100%; aspect-ratio: 1 / 1; height: auto; border-radius: 50%;
  border: 1px solid #e8e8e8; background: #fafafa;
  font-size: 20px; font-weight: 700; color: #333; cursor: pointer;
  font-family: "Times New Roman", "Liberation Serif", serif; font-variant-numeric: lining-nums;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.sel-nums.mini { grid-template-columns: repeat(7, 1fr); gap: 8px; }
.sel-nums.mini button { font-size: 15px; }
.sel-nums button.on { background: #e84343; border-color: #e84343; color: #fff; }
.sel-aux-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
.sel-aux-row button {
  width: 100%; aspect-ratio: 1 / 1; height: auto; border-radius: 50%;
  border: 1px solid #e8e8e8; background: #fafafa;
  font-size: 16px; font-weight: 700; color: #333; cursor: pointer;
  font-family: "Times New Roman", "Liberation Serif", serif; font-variant-numeric: lining-nums;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.sel-aux-row button:active { background: #fff2f2; border-color: #e84343; }
.sel-fx { display: flex; align-items: center; gap: 14px; }
.fx-switch { display: flex; gap: 12px; font-size: 14px; color: #444; }
.fx-switch label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.fx-switch input { display: none; }
.fx-switch i {
  width: 16px; height: 16px; border-radius: 50%; border: 1px solid #ccc; display: inline-block;
}
.fx-switch input:checked + i { border: 5px solid #e84343; }
.sel-prev { display: flex; gap: 14px; margin-bottom: 8px; }
.sel-prev .pv { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sel-prev .pv .box {
  width: 64px; height: 64px; border-radius: 8px; background: #f5f5f5;
  display: flex; align-items: center; justify-content: center;
  font-family: "Times New Roman", serif; font-weight: 700; font-size: 24px; color: #333;
}
.sel-prev .pv .box.pv-col {
  flex-direction: column; gap: 0; font-size: 17px; line-height: 1.08;
  padding: 2px; box-sizing: border-box; text-align: center; overflow: hidden;
}
.sel-prev .pv .box .pv-cond { font-size: .72em; font-weight: 700; }
.sel-prev .pv i { font-style: normal; font-size: 14px; color: #666; }

/* 格内色块标注（数字选择器结果）——字号由 JS 按行数/格宽自适应内联设置 */
.cmark {
  position: absolute; inset: 3px; border-radius: 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; text-align: center; overflow: hidden;
  color: #fff; font-family: "Times New Roman", serif; font-weight: 700;
  font-size: 26px; line-height: 1.08; z-index: 2;
}
.cmark.hollow { background: none !important; border: 3px solid; }
.cmark .cm-cond { font-size: .72em; font-weight: 700; }

/* 纯点标记（选择器空确定）：格内居中实心圆，再点该格即取消 */
.dotmark {
  position: absolute; left: 50%; top: 50%;
  width: 66%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}

/* 锁按钮其他位置 */
.fab-lock.lt { left: 14px; top: calc(70px + var(--safe-t)); bottom: auto; transform: none; }
.fab-lock.rt { left: auto; right: 14px; top: calc(70px + var(--safe-t)); bottom: auto; transform: none; }
.opt-name { width: 44px; font-size: 17px; color: #555; flex: none; }
.opt-group { display: flex; gap: 8px; flex-wrap: wrap; }
.opt-group button {
  min-width: 62px; height: 42px; padding: 0 10px;
  border: 1px solid #ddd; border-radius: 10px; background: #fafafa;
  font-size: 17px; color: #444; cursor: pointer; font-family: inherit;
}
.opt-group button.on { color: var(--accent); border-color: var(--accent); background: #fff2f2; font-weight: 700; }
.opt-switch { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; }
.opt-switch input { display: none; }
.switch-ui {
  width: 52px; height: 30px; border-radius: 15px; background: #ddd;
  position: relative; transition: .15s; flex: none;
}
.switch-ui::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  transition: .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.opt-switch input:checked + .switch-ui { background: var(--accent); }
.opt-switch input:checked + .switch-ui::after { left: 25px; }
.opt-label { font-size: 17px; color: #444; }
.pen-dot {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 2px solid var(--accent); background: #fff; color: var(--accent);
  font-size: 22px; cursor: pointer;
}
.pen-dot.on { background: var(--accent); color: #fff; }

/* ---------- 放大镜 ---------- */
.loupe {
  position: fixed; z-index: 45; width: 120px; height: 120px;
  border-radius: 50%; overflow: hidden; pointer-events: none;
  border: 3px solid rgba(255,255,255,.92);
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  background: var(--cell-bg);
}
.loupe-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.loupe-inner .grid-head { position: static; }
.loupe-inner .line-layer { pointer-events: none; }
.loupe::before, .loupe::after {
  content: ""; position: absolute; background: rgba(232,85,85,.85); z-index: 2;
}
.loupe::before { left: 50%; top: 36%; bottom: 36%; width: 1.5px; transform: translateX(-50%); }
.loupe::after { top: 50%; left: 36%; right: 36%; height: 1.5px; transform: translateY(-50%); }

/* ---------- 纯净模式 ---------- */
.fab-clean-exit {
  position: fixed; right: 12px; top: calc(10px + var(--safe-t)); z-index: 40;
  display: none; border: 1px solid rgba(255,255,255,.6);
  background: rgba(0,0,0,.35); color: #fff; font-size: 14px;
  padding: 7px 14px; border-radius: 18px; cursor: pointer; font-family: inherit;
}
body.clean .fab-clean-exit { display: block; }
body.clean .toolbar, body.clean .fab-lock, body.clean .fab-color,
body.clean .fab-capsule, body.clean .color-panel, body.clean .width-panel,
body.clean .tools-panel { display: none !important; }
body.clean .board-wrap { padding-top: var(--safe-t); }

/* ---------- 双奖表分隔列 ---------- */
.cell.gapcell { background: var(--bar); border-right: 0; padding: 0; }
.gh-cell.gh-gap { padding: 0; border-right: 0; }

/* ---------- 自定义皮肤 ---------- */
.sk-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 12px; }
.sk-field {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid #eee; border-radius: 10px; padding: 7px 10px;
  cursor: pointer; background: #fafafa;
}
.sk-field input[type="color"] {
  width: 38px; height: 30px; border: 0; padding: 0; background: none; cursor: pointer;
}
.sk-field span { font-size: 14px; color: #555; }

/* ---------- 引导蒙层 ---------- */
.guide-mask {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(46, 74, 48, .72);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18vh;
}
.guide-col {
  color: #eaf3e4; font-size: 24px; font-weight: 600;
  writing-mode: vertical-lr; letter-spacing: 6px;
}
.guide-ok {
  border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.12);
  color: #fff; font-size: 18px; padding: 10px 34px; border-radius: 10px;
  cursor: pointer; font-family: inherit;
}

@media (min-width: 560px) {
  .board-wrap { display: flex; justify-content: center; }
  .board { width: 480px; }
}