/* 切片饼干：壳（所有页面共用）+ 各页。尺寸一律 calc(var(--u) * n)，--u 由 shell.js 按画面算好写进来。
   画风：整块底色 + 内侧深色窄边（inset 描边），不渐变、不高光、不做厚度。 */

:root {
  --table: #d9d0c1;
  --outside: #c2b5a0;
  --bar: #9c8a71;
  --bar-edge: #8a785f;
  --bar-deep: #776650;
  --bar-deep-edge: #66563f;
  --cream: #f1e6d2;
  --cream-edge: #ddcfb6;
  --ink: #4a3f33;
  --ink-2: #6d6357;
  --line: #5f574c;
  --line-strong: #3b3127;
  --panel-line: #847a6c;
  --track-dark: #a89880;
  --fill-dark: #322a26;
  --track-light: #877c6e;
  --fill-light: #c4b39c;
  --oven-red: #a3503f;
  --oven-green: #5aa845;
  --oven-over: #7b3a30;
  --oven-zone: #4a6a3b;

  /* 共用部件（弹窗、提示条）跟着这套颜色走。 */
  --bg: var(--table);
  --surface: #ece3d3;
  --surface-2: #ddd2c0;
  --field: #f5eee2;
  --disc: var(--cream);
  --ink-3: #9a8e7e;
  --accent: var(--bar);
  --on-dark: var(--cream);
}

html,
body {
  background: var(--outside) var(--grain) repeat;
}

#app {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

/* ---------- 抖动（boil.js 挂上 is-boiling 才生效）---------- */
.is-boiling .boil {
  filter: url(#boil);
}

.is-boiling .boil-soft {
  filter: url(#boil-soft);
}

/* ---------- 画面框 ---------- */
.sh-frame {
  position: absolute;
  top: 0;
  background: var(--table) var(--grain) repeat;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  /* 标题栏高度：标题栏和两侧竖排钮的起点共用这一个值。 */
  --bar-h: calc(var(--u) * 25);
}

.sh-frame.is-land {
  --bar-h: calc(var(--u) * 19);
}

.sh-frame.is-ready {
  visibility: visible;
}

.page {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---------- 图标 ---------- */
.sh-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62%;
  height: 62%;
  pointer-events: none;
}

.sh-icon svg {
  width: 100%;
  height: 100%;
}

/* ---------- 圆按钮：整块底色 + 内侧窄边，略不规则的圆 ---------- */
.sh-round {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  min-width: 44px;
  min-height: 44px;
  color: var(--cream);
  background: var(--bar);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.7) var(--bar-edge);
  touch-action: manipulation;
}

.sh-round.sh-xs {
  width: calc(var(--u) * 8.4);
  height: calc(var(--u) * 8.4);
}

.sh-round.sh-s {
  width: calc(var(--u) * 10.4);
  height: calc(var(--u) * 10.4);
}

.sh-round.sh-m {
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
}

.sh-round.sh-l {
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
  min-width: 46px;
  min-height: 46px;
  box-shadow: inset 0 0 0 calc(var(--u) * 0.85) var(--bar-edge);
}

.sh-round.sh-l .sh-icon {
  width: 66%;
  height: 66%;
}

.sh-round.sh-tone-dark {
  background: var(--bar-deep);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.7) var(--bar-deep-edge);
}

/* 选中的工具：奶白底、图标用深色（设计稿 022）。 */
.sh-round.sh-tone-light,
.sh-round[aria-pressed='true'] {
  color: var(--bar-deep);
  background: var(--cream);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.7) var(--cream-edge);
}

/* 面板里的小开关：不铺底，只有图标；关掉时变淡。 */
.sh-round.sh-tone-ghost,
.sh-round.sh-tone-ghost[aria-pressed='true'] {
  color: var(--ink-2);
  background: transparent;
  box-shadow: none;
}

.sh-round.sh-tone-ghost[aria-pressed='false'] {
  color: var(--track-light);
  opacity: 0.55;
}

/* ---------- 文字按钮（圆角矩形）---------- */
.sh-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  height: calc(var(--u) * 12);
  padding: 0 calc(var(--u) * 6);
  color: var(--cream);
  font-size: calc(var(--u) * 5);
  font-weight: 900;
  touch-action: manipulation;
}

.sh-pill-bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: var(--bar);
  border-radius: calc(var(--u) * 2.6) calc(var(--u) * 3) calc(var(--u) * 2.8) calc(var(--u) * 2.4);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.7) var(--bar-edge);
}

.sh-pill-text {
  position: relative;
  white-space: nowrap;
}

/* ---------- 云朵标题栏 ---------- */
.sh-titlebar {
  position: relative;
  flex: 0 0 auto;
  height: var(--bar-h);
}

.sh-cloud {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.sh-titlerow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--u) * 22);
  padding: 0 calc(var(--u) * 5);
}

.sh-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 calc(var(--u) * 22);
  font-size: calc(var(--u) * 6.8);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: var(--cream);
  white-space: nowrap;
  pointer-events: none;
}

.sh-back {
  position: relative;
}

/* 中 / EN：一个整体的二选一分段钮，两半共用外框，选中的一半填奶白。 */
.sh-lang {
  position: relative;
  display: flex;
  height: calc(var(--u) * 7.4);
  border-radius: calc(var(--u) * 3.7);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.55) var(--cream);
  font-size: calc(var(--u) * 3.4);
  line-height: 1;
}

.sh-lang-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--u) * 7.6);
  padding: 0 calc(var(--u) * 1.8);
  color: var(--cream);
  font-weight: 700;
  border-radius: calc(var(--u) * 3.7);
}

/* 触摸范围上下各放大到 44px，外观不变。 */
.sh-lang-btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  margin-top: -22px;
}

.sh-lang-btn[aria-pressed='true'] {
  color: var(--bar-deep);
  background: var(--cream);
}

/* ---------- 拉条 ---------- */
.sh-slider {
  position: relative;
  flex: 1 1 auto;
  height: 44px;
  --knob: calc(var(--u) * 4);
}

.sh-slider-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--knob);
  margin-top: calc(var(--u) * -2);
  border-radius: calc(var(--u) * 2);
  background: var(--track-dark);
  pointer-events: none;
}

.sh-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: calc(var(--u) * 2);
  background: var(--fill-dark);
}

.sh-slider-light .sh-slider-track {
  background: var(--track-light);
}

.sh-slider-light .sh-slider-fill {
  background: var(--fill-light);
}

.sh-slider-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  touch-action: pan-y;
}

/* ---------- 百分比框 ---------- */
.sh-percent {
  display: flex;
  align-items: baseline;
  flex: 0 0 auto;
  margin-left: calc(var(--u) * 2.4);
  color: var(--ink);
  font-size: calc(var(--u) * 4);
  line-height: 1.2;
}

.sh-percent-input {
  width: calc(var(--u) * 8);
  padding: 0;
  border: 0;
  border-bottom: calc(var(--u) * 0.45) solid var(--panel-line);
  background: transparent;
  text-align: right;
  font-weight: 900;
  color: var(--ink);
}

.sh-percent-unit {
  margin-left: calc(var(--u) * 0.4);
  font-weight: 900;
}

/* ---------- 面板（参考图）---------- */
.sh-panel {
  position: relative;
  padding: calc(var(--u) * 1.6) calc(var(--u) * 3.4) calc(var(--u) * 1.2);
}

.sh-panel-frame {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: calc(var(--u) * 0.9) solid var(--panel-line);
  border-radius: calc(var(--u) * 3) calc(var(--u) * 4.2) calc(var(--u) * 3.6) calc(var(--u) * 2.6);
  pointer-events: none;
}

.sh-panel-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sh-panel-label {
  margin: 0;
  font-size: calc(var(--u) * 4.4);
  font-weight: 900;
  line-height: 1.3;
  color: var(--ink);
}

.sh-panel-body {
  position: relative;
  display: flex;
  align-items: center;
}

.sh-panel-row {
  display: flex;
  align-items: center;
  padding: calc(var(--u) * 0.4) calc(var(--u) * 3.4);
}

.sh-panel-row .sh-panel-label {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: calc(var(--u) * 4);
}

.sh-panel-row .sh-panel-body {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: calc(var(--u) * 3);
}

/* ---------- 标签面板（面团 + 拉条）---------- */
.sh-tabpanel {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: calc(var(--u) * 11);
}

/* 标签和右边的描边面板是一体的：描边的上沿从标签的上沿接出去，中间没有缝。 */
.sh-tab {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: calc(var(--u) * 25);
  height: calc(var(--u) * 11);
  background: var(--bar);
  border-radius: calc(var(--u) * 2.2) 0 0 0;
  box-shadow: inset 0 calc(var(--u) * 0.9) 0 0 var(--line), inset calc(var(--u) * 0.9) 0 0 0 var(--line);
}

.sh-tab-text {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: calc(var(--u) * 25);
  height: calc(var(--u) * 11);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: calc(var(--u) * 5.4);
  font-weight: 900;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
}

.sh-tabpanel-body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  height: calc(var(--u) * 11);
  padding: calc(var(--u) * 0.9) calc(var(--u) * 4) 0 calc(var(--u) * 3.6);
}

.sh-tabpanel-frame {
  position: absolute;
  left: calc(var(--u) * -2);
  top: 0;
  right: 0;
  bottom: 0;
  border-top: calc(var(--u) * 0.9) solid var(--line);
  border-right: calc(var(--u) * 0.9) solid var(--line);
  border-radius: 0 calc(var(--u) * 3.6) 0 0;
  pointer-events: none;
}

.sh-label {
  flex: 0 0 auto;
  margin-left: calc(var(--u) * 3);
  font-size: calc(var(--u) * 4.4);
  font-weight: 900;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- 底部分隔条 ---------- */
.sh-divider {
  display: block;
  width: 100%;
  height: calc(var(--u) * 3.4);
}

/* ---------- 色格条 ---------- */
.sh-swatches {
  position: relative;
  min-width: 0;
}

.sh-swatch-strip {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
  padding: calc(var(--u) * 2.4) calc(var(--u) * 4);
}

.sh-swatch-strip::-webkit-scrollbar {
  display: none;
}

.sh-cell {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
  min-width: 46px;
  min-height: 46px;
  margin-right: calc(var(--u) * 2.2);
  border: calc(var(--u) * 1.05) solid var(--line);
  color: var(--line);
  background: transparent;
  touch-action: manipulation;
}

.sh-cell:last-child {
  margin-right: 0;
}

.sh-cell-art {
  width: 100%;
  height: 100%;
}

.sh-cell[aria-selected='true'] {
  border-color: var(--line-strong);
  background: var(--cream);
  box-shadow: inset 0 0 0 calc(var(--u) * 1.1) var(--line-strong);
}

.sh-cell[aria-selected='true'] .sh-cell-art {
  transform: scale(1.14);
}

/* 长按自调颜色出现的删除钮。 */
.sh-swatch-strip {
  -webkit-touch-callout: none;
}

.sh-cell-del {
  position: absolute;
  right: calc(var(--u) * -1.6);
  top: calc(var(--u) * -1.6);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 6.6);
  height: calc(var(--u) * 6.6);
  min-width: 26px;
  min-height: 26px;
  border-radius: 50%;
  color: var(--cream);
  background: #a8453b;
  box-shadow: inset 0 0 0 calc(var(--u) * 0.5) #8c352d;
}

.sh-cell-del::after {
  content: '';
  position: absolute;
  left: -10px;
  right: -10px;
  top: -10px;
  bottom: -10px;
}

.sh-cell-del .sh-icon {
  width: 62%;
  height: 62%;
}

.sh-cell-add {
  border-radius: 16% 13% 17% 14%;
}

.sh-cell-add .sh-icon {
  width: 58%;
  height: 58%;
}

/* ---------- 进度条 ---------- */
.sh-progress {
  position: relative;
  display: flex;
  height: calc(var(--u) * 5);
  box-sizing: border-box;
  border: calc(var(--u) * 0.5) solid #33292a;
  background: #33292a;
}

.sh-progress-seg {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  background: #3f3331;
}

.sh-progress-zone {
  background: var(--oven-zone);
}

.sh-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--oven-red);
}

.sh-progress-zone .sh-progress-fill {
  background: var(--oven-green);
}

.sh-progress-hi .sh-progress-fill {
  background: var(--oven-over);
}

/* ============ 第一页：叠面团 ============ */
/* 画布铺满整个页面放在最底下；标题栏、参考图面板、底部的面板和色格条都是浮在画布上的实心件：
   件本身不透明，参考图只从件和件之间的空隙里透出来。 */
.page-stack .st-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.page-stack .sh-titlebar {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: var(--z-rail);
}

.st-body {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-content);
  pointer-events: none;
}

.st-float {
  position: absolute;
  z-index: var(--z-rail);
  background: var(--table) var(--grain) repeat;
}

.st-mode {
  margin-top: calc(var(--u) * 14);
}

.st-float.is-off {
  visibility: hidden;
}

.st-ref,
.st-adjust {
  top: calc(var(--bar-h) + var(--u) * 1.5);
  left: 50%;
  border-radius: calc(var(--u) * 3) calc(var(--u) * 4.2) calc(var(--u) * 3.6) calc(var(--u) * 2.6);
}

.st-ref {
  width: calc(var(--u) * 58);
  margin-left: calc(var(--u) * -29);
}

.st-adjust {
  width: calc(var(--u) * 62);
  margin-left: calc(var(--u) * -31);
  padding: calc(var(--u) * 1) calc(var(--u) * 2.4);
}

.st-adjust .sh-round {
  margin-left: calc(var(--u) * 1.6);
}

.st-adjust .sh-percent {
  margin-left: calc(var(--u) * 1.2);
}

.st-adjust .sh-percent-input {
  width: calc(var(--u) * 8);
}

.st-adjust .sh-panel-body {
  margin-left: calc(var(--u) * 1.6);
}

.st-dock {
  left: 0;
  right: 0;
  bottom: 0;
}

.st-dough {
  margin: 0 calc(var(--u) * 6);
}

.st-swatches {
  padding-bottom: env(safe-area-inset-bottom);
}

/* 矮横屏：左边舞台，右边一栏放参考图、面团、色格。 */
.is-land .sh-titlerow {
  height: calc(var(--u) * 16);
}

.is-land .sh-round.sh-m {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
}

.is-land .st-ref,
.is-land .st-adjust {
  top: calc(var(--bar-h) + var(--u) * 1);
  left: auto;
  right: calc(var(--u) * 5);
  width: calc(var(--u) * 71);
  margin-left: 0;
}

.is-land .st-dock {
  left: auto;
  width: calc(var(--u) * 78);
}

.is-land .st-dough {
  margin: 0 calc(var(--u) * 5) 0 calc(var(--u) * 3);
}

.sh-lang {
  margin-left: auto;
}

/* ============ 第 2–5 页共用：舞台 + 浮在两侧的竖排钮 + 底部格子条 ============ */
.pg-main {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.pg-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.pg-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.pg-divider,
.pg-swatches {
  flex: 0 0 auto;
}

.pg-swatches {
  padding-bottom: env(safe-area-inset-bottom);
}

/* 两侧的竖排钮（壳定位）：挂在 .page 上，起点是标题栏下沿再往下 1.5u，距页面左右边 5u，钮间距 2.4u；各页的竖排钮都用它，位置一致。 */
.sh-rail {
  position: absolute;
  z-index: var(--z-rail);
  top: calc(var(--bar-h) + var(--u) * 1.5);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sh-rail-left {
  left: calc(var(--u) * 5);
}

.sh-rail-right {
  right: calc(var(--u) * 5);
}

.sh-rail .sh-round {
  margin-bottom: calc(var(--u) * 2.4);
}

/* 右下角浮着的对勾 / 胶囊钮：不参与居中。 */
.pg-corner {
  position: absolute;
  right: calc(var(--u) * 6);
  bottom: calc(var(--u) * 5);
}

.sh-cell[aria-pressed='true'] {
  border-color: var(--line-strong);
  background: var(--cream);
}

.sh-cell-add[aria-pressed='true'] {
  color: var(--bar-deep);
}

/* 烤箱页：顶部进度条、底部一排胶囊钮，都水平居中。 */
.pg-progress {
  position: absolute;
  left: 50%;
  width: calc(var(--u) * 62);
  margin-left: calc(var(--u) * -31);
}

.pg-pills {
  flex: 0 0 auto;
}

/* 浅色胶囊钮（摆盘页「再烤一盘」）。 */
.sh-pill.sh-pill-light {
  color: var(--ink);
}

.sh-pill-light .sh-pill-bg {
  background: #c4b7a2;
  box-shadow: inset 0 0 0 calc(var(--u) * 0.7) #b3a68f;
}

/* 大格子条（摆盘页的器皿）：格子更大，放得下时整排居中，放不下时照常左右滑。 */
.sh-swatches-big .sh-cell {
  width: calc(var(--u) * 19);
  height: calc(var(--u) * 16);
  margin-right: calc(var(--u) * 2.6);
}

.sh-swatches-big .sh-cell:last-child {
  margin-right: auto;
}

.sh-swatches-big .sh-cell:first-child {
  margin-left: auto;
}

.sh-swatches-big .sh-cell-art {
  width: 82%;
  height: 82%;
}

/* 矮横屏的摆盘页：右边竖排钮占满了高度，「再烤一盘」放到左下。 */


/* 顶部常驻的一句提示：没有底和边框，只有文字，贴标题栏下方居中。 */
.sh-notice {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 1.5);
  z-index: var(--z-rail);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--u) * 10);
  padding: 0 calc(var(--u) * 6);
  color: var(--ink);
  font-size: calc(var(--u) * 4.2);
  line-height: 1.3;
  pointer-events: none;
}

.sh-notice-bg {
  display: none;
}

.sh-notice-text {
  position: relative;
  white-space: nowrap;
  font-weight: 900;
}

/* 模板提示条：同样只有文字，没有底和边框。 */
.toast {
  background: transparent;
  color: var(--ink);
  font-weight: 900;
  white-space: nowrap;
  border: 0;
  --toast-top: calc(var(--bar-h) + var(--u) * 1.5);
}

.toast-action {
  border: 0;
  background: transparent;
  color: var(--bar-deep);
  text-decoration: underline;
}

/* 带「撤销」的提示是一个实心气泡：整块点一下关掉，里面的「撤销」是一颗小药丸。 */
.toast.has-action {
  padding: calc(var(--u) * 1.6) calc(var(--u) * 3) calc(var(--u) * 1.6) calc(var(--u) * 4.4);
  border-radius: calc(var(--u) * 5);
  background: var(--bar);
  color: var(--on-dark);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.7) var(--bar-edge);
}

.toast.has-action .toast-action {
  min-height: calc(var(--u) * 7.4);
  margin-left: calc(var(--u) * 3);
  padding: 0 calc(var(--u) * 3);
  border: calc(var(--u) * 0.6) solid var(--on-dark);
  border-radius: 999px;
  color: var(--on-dark);
  text-decoration: none;
}

/* 第一页：色格条紧贴上面的面团面板，没有分隔线。 */
.st-swatches .sh-swatch-strip {
  padding-top: calc(var(--u) * 1.6);
}

.sh-icon-hand,
.sh-cell-add .sh-icon-hand {
  width: 76%;
  height: 76%;
}

/* 底部的翻页排：回退贴左、下一步贴右（左右边距和两侧竖排钮一样），中间的按钮正好在中轴上；按钮至少 52px。 */
.sh-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--u) * 3);
  display: flex;
  align-items: center;
  padding: 0 calc(var(--u) * 5);
  pointer-events: none;
}

.sh-nav-left,
.sh-nav-right {
  flex: 1 1 0;
  display: flex;
  align-items: center;
}

.sh-nav-right {
  justify-content: flex-end;
}

.sh-nav-mid {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.sh-nav button {
  pointer-events: auto;
}

.sh-round.sh-nav-btn {
  min-width: 52px;
  min-height: 52px;
}

/* 烤箱页的那排不浮在舞台上，排在舞台下面；回退钮的左边距、距页面下沿（3u）和其他页一致。 */
.sh-nav.pg-pills {
  position: relative;
  bottom: auto;
  padding: calc(var(--u) * 1) calc(var(--u) * 5) calc(var(--u) * 3);
}

.pg-pills .sh-pill {
  padding: 0 calc(var(--u) * 4);
}

/* 第一页：面团面板和色格之间的分隔线（和面板勾线同粗同色）。 */
.st-rule {
  height: 0;
  margin: 0 calc(var(--u) * 6);
  border-top: calc(var(--u) * 0.9) solid var(--line);
}

.is-land .st-rule {
  margin: 0 calc(var(--u) * 5) 0 calc(var(--u) * 3);
}

/* 模板提示条也在抖动里（文字用弱抖动）。 */
.is-boiling .toast {
  filter: url(#boil-soft);
}

/* ---------- 游戏状态 ---------- */
/* 不在当前步骤的页面：留在原处保持尺寸（画布照常排版），只是看不见、点不到。 */
.page.is-away {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  pointer-events: none;
}

/* 当下做不了的按钮：变淡、点不动。 */
.sh-round[disabled],
.sh-pill[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

/* 拖着的东西画在窗口大小的悬浮层上，盖在所有东西上面，点击穿过去。 */
.sh-float {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-float);
  pointer-events: none;
}

/* 画面区上的手势全部自己处理，不让浏览器滚动页面。 */
.st-stage,
.pg-stage {
  touch-action: none;
}