:root{
  color-scheme:dark;
  --bg:#06070f;
  --bg-glow:#141a2e;
  --scan:rgba(255,255,255,.014);
  --panel:#10131f;
  --panel-2:#0b0d18;
  --edge:#1d2233;
  --text:#e8ecf5;
  --dim:#7b849b;
  --accent:#8adcd3;
  --accent-line:rgba(138,220,211,.42);
  --accent-tint:rgba(138,220,211,.12);
  --accent-glow:rgba(138,220,211,.2);
  --hot:#e3a7bd;
  --hot-line:rgba(227,167,189,.32);
  /* 七种方块色，侧栏标签只借一点色相 */
  --pc1:#79c7f0;
  --pc2:#f6d24c;
  --pc3:#bd8fe8;
  --pc4:#4fc1a6;
  --pc5:#ee6fa8;
  --pc6:#7b8ce8;
  --pc7:#f5a93f;
  --field-1:#101423;
  --field-2:#0a0d18;
  --field-glow:rgba(138,220,211,.05);
  --veil:rgba(6,7,15,.9);
  --key-1:#151a2a;
  --key-2:#0d1019;
  --key-on-1:#1d2438;
  --key-on-2:#11141f;
  --shadow:#05060d;
  --chip-empty:rgba(255,255,255,.055);
  --frame:rgba(255,255,255,.16);
  --pop:#e8ecf5;
  --ghost-line:rgba(255,255,255,.3);
  --ink:#0b0f08;
  --flash:#f4f7fb;
  --wash:205,238,234;

  --mono:ui-monospace,"SF Mono","JetBrains Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}

:root[data-theme="light"]{
  color-scheme:light;
  --bg:#eef0f5;
  --bg-glow:#ffffff;
  --scan:rgba(24,30,50,.022);
  --panel:#ffffff;
  --panel-2:#f5f7fb;
  --edge:#dde2ec;
  --text:#1b2030;
  --dim:#79839a;
  --accent:#1c8b80;
  --accent-line:rgba(28,139,128,.4);
  --accent-tint:rgba(28,139,128,.1);
  --accent-glow:rgba(28,139,128,.16);
  --hot:#c2688f;
  --hot-line:rgba(194,104,143,.34);
  --field-1:#fbfcfe;
  --field-2:#f1f3f9;
  --field-glow:rgba(28,139,128,.05);
  --veil:rgba(248,249,252,.93);
  --key-1:#ffffff;
  --key-2:#edf0f7;
  --key-on-1:#e2e7f2;
  --key-on-2:#d6dded;
  --shadow:#c7cede;
  --chip-empty:rgba(24,30,50,.075);
  --frame:rgba(24,30,50,.15);
  --pop:#2b3145;
  --ghost-line:rgba(30,38,60,.34);
  --ink:#0b0f08;
  --flash:#ffffff;
  --wash:28,139,128;

}

/* 经典模式：单色 LCD 段码屏，全套底色统一为参考色 #98a08b，不做压暗 */
:root[data-theme="classic"]{
  color-scheme:light;
  --bg:#98a08b;
  --bg-glow:#a6ae99;
  --scan:rgba(238,243,226,.022);
  --panel:#a1a994;
  --panel-2:#99a18c;
  --edge:#87907a;
  --text:#141a0e;
  --dim:#333c29;
  --accent:#101608;
  --accent-line:rgba(16,22,8,.42);
  --accent-tint:rgba(16,22,8,.08);
  --accent-glow:rgba(240,246,226,.45);
  --hot:#101608;
  --hot-line:rgba(16,22,8,.5);
  --field-1:#9ba38e;
  --field-2:#969e89;
  --field-glow:rgba(240,246,226,.08);
  --veil:rgba(152,160,139,.97);
  --key-1:#a5ad98;
  --key-2:#99a18c;
  --key-on-1:#8f977f;
  --key-on-2:#868e76;
  --shadow:#8b937e;
  --frame:rgba(16,22,8,.4);
  --pop:#141a0e;
  --ghost-line:rgba(11,15,8,.62);
  /* 经典屏专用：未点亮像素的环与芯（浅色，压在屏体上）+ 堆形朝空那一面的压影 */
  --socket-ring:rgba(240,246,226,.17);
  --socket-core:rgba(240,246,226,.15);
  --stack-shade:rgba(11,15,8,.17);
  --ink:#0b0f08;
  --flash:#eef3e2;
  --wash:238,243,226;

}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}

body{
  background:
    radial-gradient(120% 70% at 50% -10%,var(--bg-glow) 0%,rgba(0,0,0,0) 60%),
    repeating-linear-gradient(0deg,var(--scan) 0 1px,rgba(0,0,0,0) 1px 3px),
    var(--bg);
  color:var(--text);
  font-family:var(--sans);
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  transition:background .25s ease,color .25s ease;
}

.cab{
  height:100%;
  max-width:540px;
  margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 10px);
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ---------- 控制按钮 + 标签 ---------- */
.ctl{display:flex;gap:4px;padding:8px 0 9px}
.lbl{
  display:block;
  font:600 9px/1 var(--sans);
  letter-spacing:.14em;
  color:var(--dim);
  text-transform:uppercase;
  margin-bottom:5px;
  white-space:nowrap;
}
/* 标签只沾一点方块色，亮度压在 --dim 附近，不做高亮 */
.lbl.tone-1{color:color-mix(in srgb,var(--pc1) 45%,var(--dim))}
.lbl.tone-2{color:color-mix(in srgb,var(--pc2) 45%,var(--dim))}
.lbl.tone-3{color:color-mix(in srgb,var(--pc3) 45%,var(--dim))}
.lbl.tone-4{color:color-mix(in srgb,var(--pc4) 45%,var(--dim))}
.lbl.tone-5{color:color-mix(in srgb,var(--pc5) 45%,var(--dim))}
.lbl.tone-6{color:color-mix(in srgb,var(--pc6) 45%,var(--dim))}
.lbl.tone-7{color:color-mix(in srgb,var(--pc7) 45%,var(--dim))}
.num{
  font:700 15px/1 var(--mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  color:var(--text);
  white-space:nowrap;
}
.kbd{
  flex:1;
  min-width:0;
  height:30px;
  display:grid;place-items:center;
  border:1px solid var(--edge);
  border-radius:9px;
  background:linear-gradient(180deg,var(--key-1),var(--key-2));
  color:var(--dim);
  font:700 12px/1 var(--mono);
  padding:0;
  cursor:pointer;
}
.kbd[aria-pressed="false"]{opacity:.42;text-decoration:line-through}
.kbd:active{background:var(--key-on-1);color:var(--accent)}
/* 暂停键用右向空心圆角三角：只把三个角收一点，别磨成圆饼 */
.ico-pause{display:block;width:11.7px;height:11.7px}

/* ---------- deck: 棋盘 + 右侧信息栏 ---------- */
.deck{display:flex;align-items:stretch;gap:8px;flex:1;min-height:0}
.side{
  flex:none;
  width:108px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--edge);
  border-radius:16px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  padding:2px 9px 10px;
}
.side > * + *{box-shadow:inset 0 1px 0 var(--edge)}
/* 最后一行也补一条下分隔线，并和侧栏底边留出呼吸 */
.side > *:last-child{box-shadow:inset 0 1px 0 var(--edge),inset 0 -1px 0 var(--edge)}
.stat{padding:8px 0 9px}
.stat .lbl{margin-bottom:4px;font-size:8px}
.stat .num{font-size:13px;letter-spacing:0}
.stat.lead .num{font-size:16px;color:var(--accent);text-shadow:0 0 14px var(--accent-glow)}
/* 四种「速度规则 × 取块方式」组合的最高得分，当前组合高亮 */
.best{padding:8px 0 9px}
.best .lbl{margin-bottom:5px;font-size:8px}
.best-row{display:flex;justify-content:space-between;align-items:baseline;gap:4px;padding:2px 0}
.best-row span{font:600 9px/1.3 var(--sans);letter-spacing:.04em;color:var(--dim);white-space:nowrap}
.best-row b{font:700 11px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--text)}
.best-row.cur span{color:var(--accent)}
.best-row.cur b{color:var(--accent);text-shadow:0 0 10px var(--accent-glow)}
.row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
  padding:7px 0 8px;
  border:0;
  background:none;
  color:inherit;
  font-family:var(--sans);
  text-align:left;
  cursor:pointer;
}
.row .lbl{margin-bottom:4px;font-size:8px}
.row.push{margin-top:auto}
#holdBtn:active{color:var(--accent)}
#holdBtn{transition:opacity .15s}
#holdBtn.used{opacity:.4;cursor:default}
#holdBtn.used:active{color:inherit}
.next-row{display:flex;gap:8px;align-items:center}
.mini{display:block;width:32px;height:22px}
#holdCv{width:58px;height:26px}

/* ---------- stage ---------- */
.stage{
  position:relative;
  flex:1;
  min-width:0;
  min-height:0;
  display:grid;
  place-items:center;
  border:1px solid var(--edge);
  border-radius:18px;
  background:
    radial-gradient(90% 60% at 50% 0%,var(--field-glow),rgba(0,0,0,0) 70%),
    linear-gradient(180deg,var(--field-1),var(--field-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 46px rgba(0,0,0,.45);
  overflow:hidden;
  touch-action:none;
}
:root[data-theme="light"] .stage{box-shadow:inset 0 1px 0 #fff,inset 0 -12px 30px rgba(30,38,60,.05)}
:root[data-theme="classic"] .stage{
  border-color:#87907a;
  background:
    radial-gradient(130% 60% at 50% 0%,rgba(240,246,226,.14),rgba(0,0,0,0) 68%),
    linear-gradient(180deg,#9ba38e,#949c87);
  box-shadow:inset 0 1px 0 rgba(240,246,226,.22);
}
:root[data-theme="classic"] #board{
  border-radius:12px;
  /* 反射式屏：顶部起亮、底部沉下去，左右各一条 1px 内高光。画布是透明的，这层会从空格里透出来 */
  background:
    linear-gradient(180deg,rgba(240,246,226,.15),rgba(240,246,226,0) 24%,rgba(11,15,8,.05) 76%,rgba(11,15,8,.13)),
    linear-gradient(180deg,var(--field-1),var(--field-2));
  box-shadow:
    0 0 0 2px var(--ink),
    0 0 0 5px rgba(240,246,226,.16),
    inset 1px 0 0 rgba(240,246,226,.22),
    inset -1px 0 0 rgba(240,246,226,.13),
    inset 0 1px 0 rgba(240,246,226,.3);
}
#board{display:block;touch-action:none}
/* T 旋 / 全清的瞬时字样：只做半秒的提醒，不抢分数浮字的位置 */
.board-mark{
  position:absolute;
  left:0;
  right:0;
  top:56%;
  z-index:1;
  pointer-events:none;
  text-align:center;
  font:600 13px/1 var(--sans);
  letter-spacing:.42em;
  text-indent:.42em;
  color:var(--text);
  opacity:0;
}
.board-mark[hidden]{display:none}
.board-mark.show{animation:board-mark .55s ease-out both}
@keyframes board-mark{
  0%{opacity:0;transform:translateY(5px)}
  18%{opacity:.78}
  100%{opacity:0;transform:translateY(-7px)}
}

.veil{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:24px;
  text-align:center;
  background:var(--veil);
  backdrop-filter:blur(3px);
  transition:opacity .18s ease;
}
.veil[hidden]{display:none}
.veil-kicker{
  margin:0;
  font:700 10px/1 var(--mono);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--hot);
}
.veil-title{
  margin:0;
  font:800 40px/1 var(--sans);
  letter-spacing:.12em;
  color:var(--text);
  text-shadow:0 0 22px var(--accent-glow);
}
/* 字标右上角的 AI 署名徽标：细描边小圆圈，靠 token 走三套主题，不叠加发光 */
.veil-title .ai{display:none}
.veil-title.brand{position:relative;display:inline-block}
.veil-title.brand .ai{
  display:inline-grid;
  place-items:center;
  position:absolute;
  top:0;
  right:0;
  transform:translate(45%,-40%);
  width:15px;
  height:15px;
  font:700 8px/1 var(--mono);
  letter-spacing:0;
  border:1px solid var(--accent-line);
  border-radius:50%;
  color:var(--accent);
  background:var(--accent-tint);
  text-shadow:none;
}
.veil-text{
  margin:0;
  font:500 12px/1.8 var(--sans);
  color:var(--dim);
}
.veil-score{
  margin:0;
  font:700 14px/1 var(--mono);
  letter-spacing:.08em;
  color:var(--accent);
}
/* 终局回顾：本局新解锁的徽章，最多露 6 枚，其余折成 +N */
/* 终局多出徽章行时收紧整体纵向节奏，矮屏才不会被遮罩边缘裁掉 */
.veil.has-unlocks{gap:10px}
.veil-unlocks{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:-2px}
.veil-unlock-title{margin:0;font:600 10px/1 var(--sans);letter-spacing:.08em;color:var(--dim)}
.veil-unlock-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px}
.veil-unlock-row .achv-badge{width:28px;height:28px;border-radius:8px;background:transparent}
.veil-unlock-row .achv-badge .achv-ico{width:22px;height:22px}
.veil-unlock-row .achv-badge.t4::before,
.veil-unlock-row .achv-badge.t5::before{border-radius:10px}
.veil-unlock-more{font:600 9px/1 var(--mono);color:var(--dim)}

/* 切外观时短暂浮出这套外观的名字 */
.theme-toast{
  position:absolute;
  top:14px;
  left:50%;
  z-index:6;
  padding:6px 11px;
  border:1px solid var(--accent-line);
  border-radius:999px;
  background:var(--panel);
  color:var(--accent);
  font:600 10px/1 var(--sans);
  letter-spacing:.12em;
  opacity:0;
  transform:translate(-50%,-4px);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.theme-toast.show{opacity:.94;transform:translate(-50%,0)}
.cta{
  margin-top:4px;
  padding:13px 30px;
  border:1px solid var(--accent-line);
  border-radius:999px;
  background:var(--accent-tint);
  color:var(--accent);
  font:700 14px/1 var(--sans);
  letter-spacing:.14em;
  cursor:pointer;
}
.cta:active{background:rgba(138,220,211,.2)}
:root[data-theme="light"] .cta:active{background:rgba(28,139,128,.18)}
:root[data-theme="classic"] .cta:active{background:rgba(16,22,8,.14)}

.ruleset{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
/* 窄屏上每颗胶囊各自换行，靠额外间距把两组开关分开 */
.ruleset + .ruleset{margin-top:8px}
/* 音效四颗词短，排成两列才不致把开始按钮顶出屏 */
.ruleset.quad{display:grid;grid-template-columns:repeat(2,max-content)}
.rule-cap{margin:-8px 0 0;font:600 10px/1 var(--sans);letter-spacing:.18em;color:var(--dim);opacity:.7}
.chip{
  padding:10px 14px;
  border:1px solid var(--edge);
  border-radius:999px;
  background:transparent;
  color:var(--dim);
  font:600 11px/1 var(--sans);
  letter-spacing:.06em;
  cursor:pointer;
}
.chip[aria-pressed="true"]{
  border-color:var(--accent-line);
  background:var(--accent-tint);
  color:var(--accent);
}
/* 局中锁定：组合在开局那一刻定下，暂停界面只做展示 */
.chip.locked{opacity:.4;cursor:default}
.chip.locked[aria-pressed="true"]{opacity:.72}

/* ---------- 成就 ---------- */
.achv-sprite{position:absolute;width:0;height:0;overflow:hidden}
.achv-slot{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  width:100%;
  padding:8px 0 9px;
  border:0;
  background:none;
  color:inherit;
  font-family:var(--sans);
  cursor:pointer;
}
.achv-slot .lbl{align-self:flex-start;margin-bottom:3px;font-size:8px}
.achv-slot:active .achv-badge{transform:scale(.94)}
.achv-badge{
  position:relative;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid var(--achv-a,var(--edge));
  border-radius:12px;
  background:var(--panel-2);
  transition:transform .16s ease;
}
.achv-badge .achv-ico{position:relative;z-index:1;display:block;width:32px;height:32px}
.achv-badge.empty{opacity:.45}
/* 最高两档在徽章底下透一圈多色光，越难颜色越多 */
.achv-badge.t4::before,
.achv-badge.t5::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:15px;
  background:conic-gradient(from 210deg,var(--achv-a),var(--achv-b),var(--achv-c),var(--achv-d),var(--achv-a));
  opacity:.38;
  filter:blur(3px);
  pointer-events:none;
}
.achv-badge.t5::before{opacity:.55;filter:blur(4px)}
.achv-name.empty{font-size:8px;font-weight:600;letter-spacing:.06em}
.achv-name{
  max-width:100%;
  font:700 10px/1.2 var(--sans);
  letter-spacing:.02em;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.achv-count{font:600 8px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--dim)}
@keyframes achvPop{
  0%{transform:scale(.72)}
  55%{transform:scale(1.1)}
  100%{transform:scale(1)}
}
.achv-slot.fresh .achv-badge{animation:achvPop .48s cubic-bezier(.2,1.35,.4,1)}
@media (prefers-reduced-motion:reduce){
  .achv-slot.fresh .achv-badge{animation:none}
}

/* ---------- 成就墙 ---------- */
.achv-wall{gap:10px}
.achv-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 8px}
.achv-top .man-title{white-space:nowrap}
.achv-head{display:flex;align-items:center;gap:7px;min-width:0}
.achv-top-right{display:flex;align-items:center;gap:6px;margin-left:auto}
.achv-wall-count{font:700 11px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--dim)}
.achv-latest,.achv-save-btn,.achv-hint-act{
  padding:4px 7px;
  border:1px solid var(--edge);
  border-radius:999px;
  background:transparent;
  color:var(--dim);
  font:600 9px/1 var(--sans);
  white-space:nowrap;
  cursor:pointer;
}
.achv-latest:active,.achv-save-btn:active,.achv-save-btn[aria-pressed="true"],.achv-hint-act:active{
  color:var(--accent);
  border-color:var(--accent-line);
  background:var(--accent-tint);
}
.achv-meta{margin:-4px 0 0;font:500 9px/1.4 var(--mono);letter-spacing:.02em;color:var(--dim)}
.achv-cats{display:flex;flex-wrap:wrap;gap:3px;margin:-2px 0 0}
.achv-cat{
  padding:5px 6px;
  border:1px solid var(--edge);
  border-radius:999px;
  background:transparent;
  color:var(--dim);
  font:600 9px/1 var(--sans);
  letter-spacing:.04em;
  cursor:pointer;
}
.achv-cat[aria-pressed="true"]{border-color:var(--accent-line);background:var(--accent-tint);color:var(--accent)}
.man-body.achv-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-content:start;
  gap:8px;
  padding:2px 2px 4px;
}
.achv-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:0;
  padding:8px 2px 7px;
  border:1px solid transparent;
  border-radius:11px;
  background:rgba(255,255,255,.03);
  color:inherit;
  font-family:var(--sans);
  cursor:pointer;
}
:root[data-theme="light"] .achv-cell{background:rgba(30,38,60,.035)}
:root[data-theme="classic"] .achv-cell{background:rgba(16,22,8,.04)}
.achv-cell .achv-badge{width:38px;height:38px;border-radius:11px;background:transparent}
.achv-cell .achv-badge .achv-ico{width:30px;height:30px}
.achv-cell .achv-badge.t4::before,
.achv-cell .achv-badge.t5::before{border-radius:14px}
.achv-cell-name{
  max-width:100%;
  font:600 9px/1.15 var(--sans);
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.achv-cell[aria-pressed="true"]{border-color:var(--accent-line);background:var(--accent-tint)}
.achv-cell[aria-pressed="true"] .achv-cell-name{color:var(--accent)}
/* 未达成只压徽章和名字，进度条要留出可读的对比度 */
.achv-cell.locked .achv-badge{opacity:.4;filter:grayscale(1)}
.achv-cell.locked .achv-cell-name{color:var(--dim)}
.achv-prog{display:flex;flex-direction:column;align-items:stretch;gap:2px;width:100%;margin-top:1px}
.achv-prog i{display:block;height:3px;border-radius:2px;background:var(--edge);overflow:hidden}
.achv-prog i b{display:block;height:100%;border-radius:inherit;background:var(--accent);opacity:.55}
.achv-prog span{
  font:500 7px/1 var(--mono);
  font-variant-numeric:tabular-nums;
  color:var(--dim);
  text-align:center;
  white-space:nowrap;
}
.achv-cell:active{transform:scale(.96)}
.achv-hint-row{display:flex;align-items:center;gap:7px;min-height:30px}
.achv-hint{flex:1;min-height:0;margin:0;font:500 10px/1.5 var(--sans);color:var(--dim)}
.achv-hint-act{flex:0 0 auto;align-self:flex-start;margin-top:2px}
.achv-save{flex:1;min-height:0;display:flex;flex-direction:column;gap:9px;overflow-y:auto;padding:2px 2px 4px}
.achv-save[hidden],.achv-meta[hidden],.achv-cats[hidden],.man-body.achv-grid[hidden],.achv-hint-row[hidden],.achv-hint-act[hidden]{display:none}
.achv-save-step{display:flex;flex-direction:column;gap:5px}
.achv-save-label{font:700 9px/1 var(--mono);letter-spacing:.07em;color:var(--dim)}
.achv-save-note{margin:0;font:500 9px/1.45 var(--sans);color:var(--dim)}
.achv-save-row{display:flex;align-items:center;gap:6px}
.achv-save-meta{justify-content:space-between}
.achv-save-meta .achv-save-msg{flex:1}
.achv-save-acts .achv-save-act{flex:1}
.achv-save-code{
  flex:1;
  min-width:0;
  padding:7px 8px;
  border:1px solid var(--edge);
  border-radius:8px;
  background:rgba(255,255,255,.03);
  color:var(--text);
  font:600 10px/1.2 var(--mono);
  letter-spacing:.04em;
}
:root[data-theme="light"] .achv-save-code{background:rgba(30,38,60,.035)}
:root[data-theme="classic"] .achv-save-code{background:rgba(16,22,8,.04)}
.achv-save-code:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 2px var(--accent-tint)}
.achv-save-code.bad{border-color:var(--hot);color:var(--hot)}
.achv-save-code::placeholder{color:var(--dim);letter-spacing:0}
.achv-save-codebox{width:100%;box-sizing:border-box;min-height:42px;resize:none;line-height:1.5;word-break:break-all;overflow:hidden}
.achv-save-act{
  flex:none;
  padding:7px 9px;
  border:1px solid var(--edge);
  border-radius:8px;
  background:transparent;
  color:var(--dim);
  font:600 9px/1 var(--sans);
  cursor:pointer;
}
.achv-save-act:active{color:var(--accent);border-color:var(--accent-line);background:var(--accent-tint)}
.achv-save-act:disabled{opacity:.4;cursor:default}
.achv-save-msg{min-height:15px;margin:0;font:500 9px/1.5 var(--sans);color:var(--dim)}
.achv-save-msg.bad{color:var(--hot)}

@media (max-height:620px){
  .side{padding-bottom:6px}
  /* 矮屏把成就位改成一行：徽章在左、名字和计数在右，省下纵向空间给下一个 / 保留 */
  .achv-slot{
    display:grid;
    grid-template-columns:36px minmax(0,1fr);
    column-gap:6px;
    row-gap:1px;
    align-items:center;
    padding:4px 0 5px;
    text-align:left;
  }
  .achv-slot .lbl{display:none}
  .achv-slot .achv-badge{grid-row:1 / span 2;width:36px;height:36px;border-radius:10px}
  .achv-slot .achv-badge .achv-ico{width:27px;height:27px}
  .achv-slot .achv-name{justify-self:start;max-width:100%;font-size:9px}
  .achv-slot .achv-name.empty{font-size:8px}
  .achv-slot .achv-count{justify-self:start}
  .row{padding:5px 0 6px}
  .achv-cell .achv-badge{width:34px;height:34px}
  .achv-cell .achv-badge .achv-ico{width:27px;height:27px}
  .man-body.achv-grid{gap:6px}
  .achv-cell{padding:6px 2px 5px;gap:3px}
  .achv-meta{font-size:8px}
  .achv-cats{gap:3px}
  .achv-cat{padding:4px 6px;font-size:8px}
  .achv-prog span{font-size:6.5px}
  .achv-save{gap:7px}
  .achv-save-step{gap:4px}
  .achv-save-code{padding:6px 7px;font-size:9px}
  .achv-save-act{padding:6px 8px;font-size:8px}
  .achv-save-label,.achv-save-note{font-size:8px}
  .achv-save-msg{font-size:8px}
  .veil{gap:10px}
  .veil.has-unlocks{gap:5px;padding-top:18px;padding-bottom:18px}
  .veil-unlock-row .achv-badge{width:24px;height:24px}
  .veil-unlock-row .achv-badge .achv-ico{width:19px;height:19px}
}

/* ---------- 说明书浮层 ---------- */
.manual{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px 18px 16px;
  background:var(--veil);
  backdrop-filter:blur(3px);
  overflow:hidden;
  text-align:left;
}
.manual[hidden]{display:none}
/* 标题和关闭按钮钉住，正文自己滚，矮屏上也能翻到最后一节 */
.man-body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
}
.man-title{
  margin:0;
  font:800 19px/1 var(--sans);
  letter-spacing:.14em;
  color:var(--text);
}
.man-sec{margin:0}
.man-h{
  margin:0 0 3px;
  font:700 9px/1 var(--sans);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--hot);
}
.man-li{margin:0;font:500 11px/1.65 var(--sans);color:var(--dim)}
.man-li b{color:var(--text);font-weight:700}
.man-close{margin-top:auto;flex:none;width:100%;text-align:center}

/* ---------- pad ---------- */
.pad{
  display:flex;
  justify-content:space-between;
  gap:12px;
  touch-action:none;
}
.cluster{display:flex;align-items:flex-start;gap:8px;flex:1}
.key{
  --tone:var(--accent);
  flex:1;
  min-width:0;
  aspect-ratio:1;
  border:1px solid var(--tone);
  border-radius:14px;
  background:linear-gradient(180deg,var(--key-1),var(--key-2));
  color:var(--tone);
  font:600 20px/1 var(--mono);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 0 var(--shadow);
  padding:0;
  cursor:pointer;
}
/* 高亮落在方形描边上；六个键各一种低饱和色，图标跟着同一个颜色走 */
.key[data-act="left"]{--tone:#6f8fae}
.key[data-act="soft"]{--tone:#83956b}
.key[data-act="right"]{--tone:#ae7d64}
.key[data-act="ccw"]{--tone:#8d78aa}
.key[data-act="cw"]{--tone:#5f948c}
.key[data-act="drop"]{--tone:#a96f7d}
/* 经典屏底色偏亮，同一组色压暗一档才看得清 */
:root[data-theme="classic"] .key[data-act="left"]{--tone:#385266}
:root[data-theme="classic"] .key[data-act="soft"]{--tone:#4a5a3c}
:root[data-theme="classic"] .key[data-act="right"]{--tone:#6b4a38}
:root[data-theme="classic"] .key[data-act="ccw"]{--tone:#524166}
:root[data-theme="classic"] .key[data-act="cw"]{--tone:#355852}
:root[data-theme="classic"] .key[data-act="drop"]{--tone:#653f49}
.chev{display:inline-block;transform:rotate(90deg);font:700 21px/1 var(--mono)}
.key.on{
  background:linear-gradient(180deg,var(--key-on-1),var(--key-on-2));
  border-color:var(--tone);
  color:var(--tone);
  transform:translateY(1px);
  box-shadow:inset 0 0 0 1px var(--tone),0 1px 0 var(--shadow);
}

@media (min-width:560px){
  .cab{padding-top:calc(env(safe-area-inset-top) + 20px);padding-bottom:calc(env(safe-area-inset-bottom) + 20px)}
  .veil-title{font-size:48px}
}