/*
 * 云朵餐厅皮肤。
 *
 * 上半部分：**只覆盖共用组件库的变量**（颜色、圆角、字号、阴影）。
 * 不覆盖任何 `.gs-*` 选择器——那会把组件的结构和可用性一起改坏。
 *
 * 下半部分：本作专有的 `.ck-*` 类。它们是共用库里没有、别的游戏也用不上的形态
 * （分区宿主、云朵读数、订单卡、班次链、配方行）。
 *
 * 设计画布是**手机竖屏**，而且只有这一套版式。底部的 @media 只服务**手机横屏**
 * （竖排分区改横排、放大安全区），桌面不做自适应——共用库会把画布锁成手机大小。
 */

/* ═══════════════════ 一、设计令牌覆盖 ═══════════════════ */

:root {
  --ck-sky-top: #b9c6f2;
  --ck-sky-mid: #dcd0f0;
  --ck-sky-low: #f7dbe4;
  --ck-cream: #fbf4e8;
  --ck-cream-edge: #e7d8c0;
  --ck-mint: #7ed3bd;
  --ck-mint-deep: #4fae97;
  --ck-peach: #f2a186;
  --ck-lilac: #b6a2e6;
  --ck-gold: #ffcb4d;
  --ck-ember: #d9503a;
  --ck-ink: #4d3d8f;
  --ck-ink-soft: #7a6bb5;

  /* 版面节奏：间距只从这一列里取，不再各处手写 5 / 6 / 9 / 10。
     四款游戏里"细节不精细"最常见的来源就是同一层级上出现三种不同的间距。 */
  --ck-s1: 4px;
  --ck-s2: 8px;
  --ck-s3: 12px;
  --ck-s4: 16px;
  --ck-s5: 24px;

  /* 页边 + 安全区。
     **`#app` 的 padding 对分区宿主是无效的**：`.ck-zones` 是 `position: absolute`，
     绝对定位元素的包含块是祖先的 *padding box*，`inset: 0` 正好把那圈 padding 吃回去。
     于是 14px 页边和刘海一起失效，所有分区都顶在视口边上——竖屏顶栏那四枚读数
     被切掉上半截、桌面画布上下各削一条，都是这一条的后果。
     边距必须由 `.ck-zones` 自己吃，这里给出唯一一份真值。 */
  --ck-gutter: 14px;
  --ck-inset-top: calc(var(--gs-safe-top) + var(--ck-gutter));
  --ck-inset-right: calc(var(--gs-safe-right) + var(--ck-gutter));
  --ck-inset-bottom: calc(var(--gs-safe-bottom) + var(--ck-gutter));
  --ck-inset-left: calc(var(--gs-safe-left) + var(--ck-gutter));

  /* 图标着色。
     `assets/icon-*.svg` 全部是 `stroke="currentColor"` 的线稿，但它们是用
     `<img src>` 加载的——**图片文档里的 currentColor 解析成黑色**，
     于是整套图标画出来是硬黑描边，压在粉彩皮肤上像贴错了素材。
     `<img>` 没法继承颜色，只能用滤镜把黑映射到皮肤色；下面的数值是解出来的，
     与目标色误差 ≤ 1/255。改皮肤色时**这几行要一起改**。 */
  --ck-tint-ink: brightness(0) saturate(100%) invert(48%) sepia(41%) saturate(456%) hue-rotate(211deg) brightness(68%) contrast(153%);
  --ck-tint-soft: brightness(0) saturate(100%) invert(37%) sepia(94%) saturate(1000%) hue-rotate(226deg) brightness(87%) contrast(56%);
  --ck-tint-gold: brightness(0) saturate(100%) invert(40%) sepia(75%) saturate(338%) hue-rotate(0deg) brightness(172%) contrast(107%);
  --ck-tint-mint: brightness(0) saturate(100%) invert(42%) sepia(91%) saturate(980%) hue-rotate(133deg) brightness(131%) contrast(38%);
  --ck-tint-ember: brightness(0) saturate(100%) invert(40%) sepia(92%) saturate(998%) hue-rotate(334deg) brightness(86%) contrast(97%);

  /* ---- 共用组件库的变量，只换值不换名 ---- */
  --gs-ink: #4d3d8f;
  --gs-ink-soft: rgba(77, 61, 143, 0.74);
  --gs-ink-dim: rgba(77, 61, 143, 0.5);
  --gs-ink-on-light: #4d3d8f;

  --gs-surface: rgba(251, 244, 232, 0.94);
  --gs-surface-raised: rgba(255, 253, 249, 0.97);
  --gs-surface-sunken: rgba(226, 216, 240, 0.7);
  --gs-hairline: rgba(120, 96, 170, 0.18);

  --gs-accent: #7ed3bd;
  --gs-accent-2: #f2a186;
  --gs-gold: #ffcb4d;
  --gs-danger: #d9503a;

  --gs-radius-sm: 12px;
  --gs-radius-md: 20px;
  --gs-radius-lg: 26px;

  --gs-glow-accent: 0 0 0 2px rgba(126, 211, 189, 0.55), 0 0 24px rgba(126, 211, 189, 0.3);
  --gs-glow-gold: 0 0 22px rgba(255, 203, 77, 0.55);
  --gs-shadow-card: 0 14px 30px rgba(88, 66, 130, 0.2);
  --gs-shadow-button: 0 5px 0 rgba(120, 96, 170, 0.28), 0 12px 20px rgba(88, 66, 130, 0.22);
  --gs-shadow-press: 0 2px 0 rgba(120, 96, 170, 0.28), 0 6px 10px rgba(88, 66, 130, 0.22);
  --gs-cta: linear-gradient(180deg, #92dcc7, var(--ck-mint-deep));
}

/* ═══════════════════ 二、页面骨架与安全区 ═══════════════════ */

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  /* 另外四款都有的一条护栏：入口的 viewport 一旦被改坏（少了 width=device-width），
     两家引擎都会开始自作主张放大正文字号，按 px 排好的分区当场撑破。
     判据是 automation/check_mobile.py 的 `text-size-adjust`。 */
  -webkit-text-size-adjust: 100%;
  font-family: 'Nunito', 'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--gs-ink);
  /* 两张背景图是 lazy 的，到位之前由这层纯 CSS 渐变兜底——**不许白屏** */
  background: linear-gradient(180deg, var(--ck-sky-top) 0%, var(--ck-sky-mid) 46%, var(--ck-sky-low) 100%);
  -webkit-tap-highlight-color: transparent;
}

#app {
  position: fixed;
  inset: 0;
  /* 刘海与底部横条在这里**一次性扣掉**：所有分区坐标都是"扣完之后"的比例 */
  padding:
    calc(var(--gs-safe-top) + 14px)
    calc(var(--gs-safe-right) + 14px)
    calc(var(--gs-safe-bottom) + 14px)
    calc(var(--gs-safe-left) + 14px);
  box-sizing: border-box;
}

.ck-screen { position: absolute; inset: 0; }

/* 分区坐标是"扣掉安全区与页边之后"的比例——这一句就是那个"扣掉"。
   见 :root 的 --ck-inset-*：#app 的 padding 对绝对定位的分区不生效。 */
.ck-zones {
  position: absolute;
  inset: var(--ck-inset-top) var(--ck-inset-right) var(--ck-inset-bottom) var(--ck-inset-left);
}
.ck-zone {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* **这里写死 8px，不要换成 --ck-s2**：`tests/ui-layer.test.mjs` 的
     「44px 命中区与 8px 相邻间距」是按字面量匹配这几条规则的执行者，
     换成变量之后闸门量到的是变量名，不是间距。 */
  gap: 8px;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

/*
 * 背景：共用库的 `GameBackground`（`.gs-bg` / `.gs-bg__layer`，含多层视差），
 * 自带的压暗层关掉，换成下面这层浅色 scrim——本作是亮的粉彩，
 * 深色压暗会把整张画面弄脏。这里加的是**新类**，没有覆盖任何 `.gs-*` 选择器。
 */
/* 背景要盖住安全区那一圈，所以钉在视口上而不是 #app 的内容盒里 */
.ck-bg { position: fixed; inset: 0; z-index: -1; }
.ck-bg__scrim { position: absolute; inset: 0; background: rgba(40, 24, 70, 1); }

/* ═══════════════════ 三、通用零件 ═══════════════════ */

.ck-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ck-cream);
  border: 2px solid var(--ck-cream-edge);
  box-shadow: var(--gs-shadow-card);
  font-weight: 700;
  max-width: 100%;
  box-sizing: border-box;
}
.ck-pill--mint { background: linear-gradient(180deg, #a5e2d2, var(--ck-mint)); border-color: #6ec0aa; color: #ffffff; }
.ck-pill--peach { background: #fdeee4; border-color: #f0c7b2; }
.ck-pill--dusk { background: rgba(120, 108, 168, 0.92); border-color: rgba(90, 78, 140, 0.9); color: #ffffff; }
.ck-pill p, .ck-pill span { margin: 0; }

/* 帮助页底部那三句免责说明（本地存档 / 无倒计时 / 无内购）是对玩家的承诺，
   一句都不能删，被裁掉半句同样不行。而 `footer` 分区的高是 S2 冻结的，
   三句的长度随语言变——实测 8 种语言 × 4 档视口里有 17 组装不下（pt-BR 溢 17px）。
   先把这块的留白收到最紧，剩下的交给 `screens.fitTightZones()` 按档收字号。 */
.ck-zone[data-zone='footer'] .ck-pill { padding: 4px 12px; gap: 3px; }
.ck-zone[data-zone='footer'] .ck-note { font-size: var(--ck-note-fs, 13px); line-height: 1.2; }

.ck-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, #a5e2d2, var(--ck-mint));
  border: 3px solid #ffffff;
  box-shadow: var(--gs-shadow-card);
}
.ck-banner__icon { width: 30px; height: 30px; }
.ck-banner__text {
  margin: 0;
  font-size: clamp(20px, 5.4vw, 30px);
  color: #ffffff;
  text-shadow: 0 2px 0 rgba(84, 150, 133, 0.85);
  letter-spacing: 0.5px;
}

.ck-title {
  margin: 0;
  font-size: clamp(26px, 8vw, 46px);
  line-height: 1.05;
  text-align: center;
  color: #ffffff;
  /* 原来是 3px 的实心硬描边，在 46px 的标题上像贴纸边。
     收成 2px + 一层柔影：字仍然从插画里跳出来，边缘不再割手。 */
  text-shadow: 0 2px 0 var(--ck-mint-deep), 0 4px 18px rgba(80, 60, 130, 0.32);
  letter-spacing: 0.2px;
}
.ck-tagline, .ck-status, .ck-note, .ck-body { margin: 0; text-align: center; }
.ck-tagline { font-size: 15px; font-weight: 700; }
.ck-note { font-size: 13px; color: var(--gs-ink-soft); }
.ck-body { font-size: 15px; line-height: 1.45; }
.ck-section { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.2; }
.ck-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.ck-logo { width: min(46%, 190px); height: auto; }
.ck-logo--sm { width: 46px; height: 46px; }
.ck-inlineicon { width: 18px; height: 18px; }

.ck-back { position: absolute; left: 0; top: 0; }

/* 线稿图标统一着色（成因见 :root 的 --ck-tint-*）。
   这里只加**新**选择器与共用类的着色，不改任何 .gs-* 的结构或尺寸。 */
.ck-inlineicon,
.ck-stat__icon,
.ck-compare__icon,
.ck-ledger__icon,
.ck-week__day img,
.gs-nav__disc img,
.gs-icon-btn img,
.gs-icon-btn svg { filter: var(--ck-tint-ink); }
.ck-chain__lock,
.ck-decorcard__lock,
.gs-track__slot img { filter: var(--ck-tint-soft); }
.ck-banner__icon { filter: var(--ck-tint-white); }

.ck-stars { display: flex; gap: 3px; }
.ck-screen--result .ck-zone[data-zone='award'] .ck-star {
  width: 34px; height: 34px;
  filter: var(--ck-tint-gold) drop-shadow(0 2px 6px rgba(60, 44, 100, 0.45));
}
.ck-screen--result .ck-zone[data-zone='award'] .ck-star--empty {
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(60, 44, 100, 0.45));
  opacity: 0.55;
}
.ck-star { width: 20px; height: 20px; filter: var(--ck-tint-gold); }
/* 空星不是"灰掉的金星"，是一个更淡的同色轮廓——灰色会在暖色卡片上发脏 */
.ck-star--empty { filter: var(--ck-tint-soft); opacity: 0.5; }

.ck-brandblock {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%;
}

/* 标题屏的头：logo + 标题 + 星星数**并排**。
   竖着叠是 132px，而这个分区（`header` = 0.10 屏高）在 375×812 上只有 81px，
   星星数那一枚直接压到下面的全景图上（分区之间不许相交）。
   并排之后高度就是最高的那一件（标题 46px），三件信息一件没少。 */
.ck-titlehead {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 10px; width: 100%; min-width: 0;
}
/* 标题在 390px 上按 clamp 算出来是 31px，"Cloud Kitchen" 正好折成两行，
   于是 logo、标题、星数三件各自一个高度，页头看起来像三块拼上去的。
   这一处的标题**钉成一行**（整屏最大的那一号字仍留给加载屏的品牌块）。 */
.ck-titlehead .ck-title {
  min-width: 0; white-space: nowrap; font-size: clamp(18px, 5.5vw, 30px);
  overflow: hidden; text-overflow: ellipsis;
}
.ck-titlehead .ck-pill { flex: 0 0 auto; padding: 6px 12px; }
.ck-logo--sm { flex: 0 0 auto; }
.ck-tip__icons { display: flex; align-items: center; gap: 10px; }
.ck-tip__icons img { width: 40px; height: 40px; }
.ck-tip__dash { color: var(--ck-peach); font-weight: 900; letter-spacing: 2px; }
.ck-tip__text { margin: 0; font-size: 14px; text-align: center; font-weight: 700; }

/* ═══════════════════ 四、标题屏 ═══════════════════ */

.ck-decorstage, .ck-cameo { position: absolute; inset: 0; pointer-events: none; }
.ck-decorstage__piece {
  position: absolute; width: 22%; height: auto; transform: translate(-50%, -50%);
}
.ck-cameo__guest { position: absolute; width: 22%; bottom: 6%; }
.ck-cameo__guest:nth-child(1) { right: 6%; }
.ck-cameo__guest:nth-child(2) { right: 30%; bottom: 2%; width: 18%; }

/*
 * 底部圆形导航用共用库的 `IconNav`（`.gs-nav`）。锁着的入口照样显示、
 * 44px 触控下限都由组件保证，这里**一条选择器都不覆盖**——
 * 外观差异全部通过上面那组令牌变量达成。
 */

/* ═══════════════════ 五、班次链与开班选择 ═══════════════════ */

.ck-chain {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  width: 100%; height: 100%; overflow-y: auto; align-content: start; padding: 4px;
  box-sizing: border-box;
}
/* 节点原来是 `border-radius: 50% / 40%` 的椭圆：三列排下来像一排药丸按钮，
   而这是**进度格**。圆角方形既保住了"可点"的观感，又把节点内的横向空间
   还给星排——椭圆的圆弧正好切在第三颗星和锁上。 */
.ck-chain__node {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px;
  min-height: 72px; padding: 10px 6px; border-radius: 20px;
  background: var(--ck-cream); border: 3px solid var(--ck-mint);
  box-shadow: var(--gs-shadow-card); cursor: pointer; font: inherit; color: inherit;
}
.ck-chain__node[data-unlocked='false'] { filter: grayscale(0.85); opacity: 0.66; cursor: default; }
.ck-chain__node[data-here='true'] { box-shadow: var(--gs-glow-accent), var(--gs-shadow-card); }
.ck-chain__node[data-selected='true'] { border-color: var(--ck-gold); }
.ck-chain__num { font-size: 22px; font-weight: 900; line-height: 1; }
/* 锁移到**右上角**：原来在右下，正好压在三颗星的最后一颗上。 */
.ck-chain__lock { position: absolute; right: 7px; top: 7px; width: 16px; height: 16px; }
/* 「你在这里」的角标：钉在当前那一格的上沿，不再占用网格的一格。 */
.ck-chain__here {
  position: absolute; left: 50%; top: -9px; transform: translateX(-50%);
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 10px; font-weight: 900; letter-spacing: 0.3px;
  color: #ffffff; background: linear-gradient(180deg, #a5e2d2, var(--ck-mint));
  border: 2px solid #ffffff; box-shadow: 0 3px 8px rgba(88, 66, 130, 0.25);
}
.ck-chain__node[data-here='true'] { overflow: visible; }

.ck-modes { width: 100%; }
.ck-compare { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ck-compare__row {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--gs-radius-md);
  background: rgba(255, 255, 255, 0.55); border: 1px solid var(--gs-hairline);
}
.ck-compare__icon { width: 26px; height: 26px; }
.ck-compare__label { font-weight: 800; }
.ck-compare__values { display: flex; align-items: center; gap: 8px; }
.ck-compare__value { font-variant-numeric: tabular-nums; opacity: 0.55; }
.ck-compare__value[data-on='true'] { opacity: 1; color: var(--ck-mint-deep); font-size: 1.15em; }
.ck-compare__sep { opacity: 0.35; }

/* ═══════════════════ 六、今日班次与装饰 ═══════════════════ */

.ck-week { display: flex; gap: 6px; }
.ck-week__day {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--ck-cream); border: 2px solid var(--ck-cream-edge); font-weight: 800;
}
.ck-week__day[data-on='true'] { background: var(--ck-mint); color: #ffffff; border-color: #ffffff; }
.ck-week__day[data-today='true'] { box-shadow: var(--gs-glow-accent); }

.ck-preview__orders { display: flex; gap: 8px; width: 100%; justify-content: center; }
.ck-minicard {
  position: relative; flex: 1 1 0; min-width: 0; padding: 6px; border-radius: var(--gs-radius-md);
  background: var(--ck-cream); border: 2px solid var(--ck-cream-edge); text-align: center;
}
.ck-minicard__name { display: block; font-size: 12px; }
.ck-minicard__dish { width: 100%; height: auto; max-height: 68px; object-fit: contain; }
/* 客人头像原来钉在 `right:-4px; top:-8px`——先是探出卡片外面把整条预告行顶宽，
   收进来之后又**压在菜名上**（"Galaxy Jel[头像]"）。
   和订单卡同一个解法：挪到菜品图那一层去，那里只有图，压不到字。 */
.ck-minicard__guest { position: absolute; right: 2px; top: 26px; width: 28px; }
.ck-minicard__name { line-height: 1.2; }
.ck-minicard__finisher {
  position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; background: #ffffff; border: 2px solid var(--ck-cream-edge);
}
.ck-minicard__finisher img { width: 16px; height: 16px; }

.ck-livepreview { position: relative; width: 100%; height: 100%; border-radius: var(--gs-radius-lg); overflow: hidden; border: 3px solid #ffffff; }
.ck-livepreview__bg { width: 100%; height: 100%; object-fit: cover; }

.ck-decorgrid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  width: 100%; height: 100%; overflow-y: auto; padding: 2px; box-sizing: border-box;
}
.ck-decorcard {
  position: relative; display: flex; flex-direction: column; align-items: center;
  min-height: var(--gs-tap-min); padding: 4px; border-radius: var(--gs-radius-md);
  background: #ffffff; border: 2px solid var(--ck-cream-edge); cursor: pointer; font: inherit; color: inherit;
}
.ck-decorcard[data-unlocked='false'] { filter: grayscale(1); opacity: 0.7; cursor: default; }
.ck-decorcard[data-on='true'] { border-color: var(--ck-mint); box-shadow: var(--gs-glow-accent); }
.ck-decorcard__art { width: 100%; height: auto; max-height: 76px; object-fit: contain; }
.ck-decorcard__lock { position: absolute; left: 50%; top: 44%; width: 22px; transform: translateX(-50%); }
.ck-decorcard__foot { display: flex; flex-direction: column; align-items: center; font-size: 11px; line-height: 1.2; }
.ck-decorcard__foot b { font-size: 12px; text-align: center; }

/* ═══════════════════ 七、游玩屏 ═══════════════════ */
/*
 * 分区之间**不许互相遮挡**。HUD、订单、台面、教学横条、动作区各占一块，
 * 竖屏下尤其注意：底部提示条绝不能盖住台面最后一行——所以教学横条
 * 有自己的 `coach` 分区，它在结构上就压不到 `board` 上。
 */

/*
 * 顶栏是**两行网格**，不是会换行的 flex。
 *
 * 换行 flex 的毛病是行高由内容决定：四枚读数 38px + 补货那一行 63px = 101px，
 * 而分区只有 84px，`align-content: center` 于是把两行**同时**推出分区
 * ——第一行画到 y = −10（顶进刘海里被裁掉半截），第二行画到 y = 95（压在订单卡上）。
 * 走查里"顶栏读数只剩下半截"就是这么来的。
 *
 * 网格把行高钉死：第一行 4 列等宽（读数彼此对齐，这是"精细"最直接的来源），
 * 第二行整行给补货环与预告。两行加间距 = 32 + 4 + 44 = 80px，永远装得进 84px。
 */
.ck-hud {
  display: grid;
  /* 列宽按内容走、整行两端对齐：等宽会让 "Score" 空出一截、
     而 "Scorched" 被截成 "Scorc…"——四个数里最该看清的那个反而丢了字。 */
  grid-template-columns: repeat(4, minmax(0, auto));
  grid-auto-rows: min-content;
  align-content: center;
  justify-content: space-between;
  gap: var(--ck-s1) 5px;
  width: 100%;
  height: 100%;
}
.ck-hud__right {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--ck-s2);
  min-width: 0;
}

.ck-stat {
  display: flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 8px;
  min-width: 0; box-sizing: border-box;
  border-radius: 999px; background: var(--ck-cream);
  border: 2px solid #ffffff; box-shadow: 0 4px 10px rgba(88, 66, 130, 0.18);
  min-height: 34px; box-sizing: border-box;
}
.ck-stat__icon { width: 16px; height: 16px; flex: 0 0 auto; }
.ck-stat__body { display: flex; flex-direction: column; line-height: 1.06; min-width: 0; }
/* 标签是"这个数是什么"，值才是要读的东西：两者拉开一档字重与不透明度，
   而不是靠两种字号硬撑高度（高度是这块分区最紧的资源）。 */
.ck-stat__label {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.3px; opacity: 0.66;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ck-stat__value { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck-stat[data-tone='gold'] .ck-stat__value { color: #c98c00; font-size: 15px; }
/* 全屏**唯二**允许出现警示色的地方：焦格逼近上限、空格 ≤3 */
.ck-stat[data-tone='warn'] .ck-stat__value { color: var(--ck-ember); }
.ck-stat[data-bump='true'] { animation: ck-bump 180ms var(--gs-ease-out); }
@keyframes ck-bump { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }

/*
 * 补货环。三处走查所见都在这里：
 * 1. 「RESTOCK」被画了**两遍**——一遍在环里（组件的 label），一遍在环下面
 *    （`.ck-restock__label`）。环里那份在 44px 的环上只有 5.5px 高，读不出来，
 *    却又占掉环内那点地方，把读数挤到环外。留环下那一份，环里那份收掉。
 * 2. 读数「0 / 3.5」在环的内接正方形里放不下 → 折成两行 → 溢出环的描边。
 *    钉成一行、字号跟着环走。
 * 3. 环 + 环下标签竖着叠 = 64px，顶栏第二行只有 44px。改成环与标签**并排**。
 */
.ck-restock {
  position: relative; display: flex; flex-direction: row; align-items: center; gap: 5px;
  flex: 0 0 auto;
  /* 与四枚读数同一种胶囊：顶栏两行看起来才是一块东西，而不是"读数 + 一个裸环" */
  padding: 2px 8px 2px 3px; border-radius: 999px;
  background: var(--ck-cream); border: 2px solid #ffffff;
  box-shadow: 0 4px 10px rgba(88, 66, 130, 0.18);
}
.ck-restock .gs-ring__label { display: none; }
.ck-restock .gs-ring__body { padding-inline: 8%; }
.ck-restock .gs-ring__value { font-size: 12px; white-space: nowrap; letter-spacing: -0.2px; }
.ck-restock__label {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.3px; opacity: 0.66;
  line-height: 1.05; white-space: nowrap;
}
.ck-preview { display: flex; gap: var(--ck-s1); }
.ck-preview__slot {
  display: flex; flex-direction: column; align-items: center;
  padding: 3px 5px; border-radius: 12px; background: var(--ck-cream); border: 2px solid #ffffff;
}
.ck-preview__slot img { width: 22px; height: 22px; }
.ck-preview { flex: 0 0 auto; }
/* 落点列：这一份料会掉进第几列。不标它，「要不要现在腾出那一列」就不可执行 */
.ck-preview__col { font-size: 10px; font-weight: 900; color: var(--ck-mint-deep); }
.ck-preview[data-alert='true'] .ck-preview__slot { border-color: var(--ck-ember); animation: ck-shake 900ms infinite; }
@keyframes ck-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } }

.ck-orders { display: flex; align-items: stretch; gap: 8px; width: 100%; height: 100%; padding-bottom: 2px; box-sizing: border-box; }
.ck-orders__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ck-order {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  gap: 2px; padding: 5px 6px 6px; border-radius: 16px; background: var(--ck-cream);
  border: 3px solid var(--ck-cream-edge); box-shadow: var(--gs-shadow-card);
  font: inherit; color: inherit; cursor: pointer; text-align: left; overflow: visible;
}
.ck-order--tart { border-color: #f0b3a0; }
.ck-order--pancake { border-color: #f3cf8a; }
.ck-order--jelly { border-color: #bcaae8; }
.ck-order[data-legal='true'] { box-shadow: var(--gs-glow-accent), var(--gs-shadow-card); transform: translateY(-2px); }
/* 名字要占满卡片宽度，所以客人头像不能停在标题那一行——
   它被挪到下面的菜品区（那里只有图，压不到任何字）。 */
.ck-order__head { display: flex; flex-direction: column; min-width: 0; }
.ck-order__name {
  font-size: 10.5px; line-height: 1.18; letter-spacing: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ck-order__count { font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ck-order__body { position: relative; flex: 1 1 auto; display: flex; align-items: center; gap: 4px; min-height: 0; }
.ck-order__dish { flex: 1 1 auto; min-width: 0; height: 100%; object-fit: contain; }
.ck-order__dots { display: flex; flex-direction: column; gap: 3px; }
.ck-order__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(120, 96, 170, 0.22); }
.ck-order__dot[data-done='true'] { background: var(--ck-mint); box-shadow: 0 0 0 2px rgba(126, 211, 189, 0.35); }
/* 头像原来钉在 `right:-6px; top:-12px`——**探出卡片外面**，最右那张卡因此
   探出屏幕，三张卡的名字也都被它压住。
   现在它贴在**菜品区**的右上角：还是"客人探头看自己的菜"，
   但既不越界，也压不到任何一个字。 */
.ck-order__guest { position: absolute; right: 0; top: 0; width: 26px; pointer-events: none; z-index: 1; }
/* **收尾料图标 ≥20×20 CSS px**，与台面上那份料完全同形同色。C2 整个压在它身上 */
.ck-order__finisher {
  position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%; background: #ffffff;
  border: 2px solid var(--ck-cream-edge); box-shadow: 0 2px 6px rgba(88, 66, 130, 0.25);
}
.ck-order__finisher img { width: 20px; height: 20px; }

.ck-board { position: relative; width: 100%; height: 100%; outline: none; touch-action: none; }
.ck-board:focus-visible { box-shadow: var(--gs-glow-accent); border-radius: var(--gs-radius-lg); }
.ck-board__canvas { display: block; width: 100%; height: 100%; }

/* T1：手指虚影从预置的露莓滑到相邻云乳。纯 CSS 图形，不在位图里烧字。 */
.ck-finger-ghost {
  position: absolute; z-index: 4; width: 1px; height: 1px;
  pointer-events: none; filter: drop-shadow(0 5px 8px rgba(77, 61, 143, 0.3));
}
.ck-finger-ghost__trail {
  position: absolute; left: 0; top: -3px; width: var(--ck-ghost-distance); height: 6px;
  transform-origin: left center; transform: rotate(var(--ck-ghost-angle));
  border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.9));
}
.ck-finger-ghost__hand {
  position: absolute; left: -13px; top: -13px; width: 26px; height: 36px;
  border: 3px solid #ffffff; border-radius: 16px 16px 12px 12px;
  background: linear-gradient(180deg, #f1eaff, #b9a7e8);
  box-shadow: inset 0 0 0 2px rgba(77,61,143,0.12);
  animation: ck-finger-demo 1.35s ease-in-out infinite;
}
.ck-finger-ghost__hand::before {
  content: ''; position: absolute; left: 7px; top: -16px; width: 9px; height: 22px;
  border: 3px solid #ffffff; border-radius: 999px; background: #d7cbf4;
}
@keyframes ck-finger-demo {
  0%, 18% { transform: translate(0, 0) scale(1); opacity: 0.9; }
  62%, 82% { transform: translate(var(--ck-ghost-dx), var(--ck-ghost-dy)) scale(0.94); opacity: 0.95; }
  100% { transform: translate(var(--ck-ghost-dx), var(--ck-ghost-dy)) scale(0.94); opacity: 0; }
}

/*
 * 教学横条。竖屏分区只有 59px 高、362px 宽，而共用件默认摆的是
 * 「计数 + 进度点(161px) ｜ 文案 ｜ 三张 46px 的图 ｜ 100px 的按钮」——
 * 一行放不下，`flex: 1 1 auto` 于是把**文案**压到 39px 宽，
 * 一句话竖着排成五行、上下各溢出一截，还和运算符、按钮互相压。
 * 这一屏是新玩家的第一分钟，压坏的正好是那句"该怎么玩"。
 *
 * 只收尺寸、不删任何一件：计数列限宽、图收到 26px、按钮收一档内边距，
 * 剩下的宽度全部让给文案，文案自己限两行。
 */
.ck-strip__op { font-size: 15px; font-weight: 900; color: var(--ck-mint-deep); }

.ck-zone[data-zone='coach'] .gs-strip { gap: var(--ck-s2); padding: 6px 10px; }
.ck-zone[data-zone='coach'] .gs-strip__lead { flex: 0 0 auto; max-width: 50px; gap: 2px; }
.ck-zone[data-zone='coach'] .gs-strip__counter { font-size: 15px; }
/* 15 颗进度点排成一条 161px 的长队，比计数本身宽三倍，还从两头探出去。
   限宽 + 换行之后它是一小块点阵，占的宽度与上面的「1 / 15」一样。 */
.ck-zone[data-zone='coach'] .gs-coach__steps {
  max-width: 50px; flex-wrap: wrap; justify-content: center; gap: 3px;
}
.ck-zone[data-zone='coach'] .gs-coach__dot { width: 5px; height: 5px; }
.ck-zone[data-zone='coach'] .gs-strip__figure { flex: 0 0 auto; gap: 3px; }
.ck-zone[data-zone='coach'] .gs-strip__figure img { height: min(100%, 20px); }
.ck-zone[data-zone='coach'] .gs-strip__copy { flex: 1 1 auto; min-width: 0; }
.ck-zone[data-zone='coach'] .gs-strip__body {
  font-size: 11px; line-height: 1.22;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.ck-zone[data-zone='coach'] .gs-coach__skip {
  padding: 6px 12px; font-size: 12.5px; min-height: 38px; min-width: 38px;
}

.ck-actionbar { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; height: 100%; justify-content: center; }
.ck-streak { display: flex; align-items: center; gap: 8px; }
.ck-streak__label { font-size: 12px; font-weight: 900; color: var(--ck-ink); }
.ck-segbar { display: flex; }
.ck-segments { display: flex; gap: 3px; }
.ck-segment {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(120, 96, 170, 0.25);
}
.ck-segment img { width: 12px; height: 12px; opacity: 0; }
.ck-segment[data-on='true'] { background: linear-gradient(180deg, #ffe08a, var(--ck-gold)); }
.ck-segment[data-on='true'] img { opacity: 1; }
.ck-actionbar__buttons { display: flex; gap: 12px; }
.ck-actionbar__buttons .gs-icon-btn { background: var(--ck-cream); border: 2px solid #ffffff; }

/* ═══════════════════ 八、结算页 ═══════════════════ */

.ck-reason { font-weight: 900; }
.ck-reason__sep { opacity: 0.6; }
/* 账单一整块的字号走这一个变量：失败页那五行整句在 en 下要占 9 行，
   比 `detail` 分区高出 51px，第五行会被滚出视野——而分区是 S2 冻结的、
   行数是 A14 定死的、句子长度随语言变。所以字号不能是常量：
   `screens.fitTightZones()` 渲染完量一次，装不下就按半档往下收（下限 10px）。 */
.ck-ledger {
  --ck-ledger-fs: 12.5px;
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  min-height: 0; overflow-y: auto; scrollbar-width: none;
}
.ck-ledger::-webkit-scrollbar { display: none; }
.ck-ledger__row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--ck-s2);
  padding: 3px 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.72);
}
.ck-ledger__row--total { background: rgba(255, 203, 77, 0.28); font-size: 1.08em; }
/* 单行的那几条账单，行高是**图标**撑起来的，不是字撑起来的：
   图标钉死 24px 的话，字号收到 10px 也省不下这几行的一分一毫。 */
.ck-ledger__icon { width: calc(var(--ck-ledger-fs) * 1.6); height: calc(var(--ck-ledger-fs) * 1.6); }
.ck-ledger__label { font-weight: 800; font-size: calc(var(--ck-ledger-fs) + 0.5px); }
.ck-ledger__value { font-variant-numeric: tabular-nums; font-size: calc(var(--ck-ledger-fs) + 2.5px); }
.ck-ledger__line { margin: 0; font-size: var(--ck-ledger-fs); font-weight: 700; line-height: 1.22; }

.ck-advice { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 12px; border-radius: var(--gs-radius-md); background: rgba(255, 255, 255, 0.62); }
.ck-advice__chef { width: 44px; height: 44px; flex: 0 0 auto; }
.ck-advice__text { margin: 0; font-size: 13px; line-height: 1.35; }

/* 「星级门槛 · 250 · 300 · 340 — 你打到 0」这一整句加上刻度条要挤进 57px。
   最后一枚门槛后面挂着那句"你打到多少"，横着排必然把刻度条挤到文字底下。
   让最后一枚**自己占一行**：两行标题 + 刻度条 = 44px，正好落在分区里。 */
.ck-scale { width: 100%; display: flex; flex-direction: column; gap: var(--ck-s1); }
.ck-scale__head {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: var(--ck-s2); row-gap: 2px; font-size: 11px; font-weight: 800;
}
.ck-scale__mark:last-child { flex-basis: 100%; }
.ck-scale__mark { display: inline-flex; align-items: center; gap: 3px; }
.ck-scale__mark img { width: 15px; height: 15px; }
.ck-scale__bar { position: relative; height: 12px; border-radius: 999px; background: rgba(120, 96, 170, 0.28); }
/* 刻度线原来是白的，画在浅色底板上等于没有 */
.ck-scale__tick { position: absolute; top: -3px; width: 3px; height: 18px; background: rgba(77, 61, 143, 0.45); border-radius: 2px; }
.ck-scale__you { position: absolute; top: -5px; width: 12px; height: 22px; margin-left: -6px; border-radius: 4px; background: var(--ck-gold); box-shadow: var(--gs-glow-gold); }

/* 三个分享按钮：各 ≥44×44 CSS px、间距 ≥8px，落在屏幕下半部 */
/*
 * 分享组要在**它自己的分区里装得下**：`share` 是结算页最后一条窄带，
 * 而它同时要放三个 ≥44px 的触控目标（GAME_PLAN §10.7「三个按钮均 ≥44×44 CSS px」）
 * 与一条回执（§10.7 ④ 的六种回执，剧本 01/02 逐条实测）。
 * 所以这里 `height: 100%` 顶住分区高度、内部居中，而不是让内容自然撑高之后
 * 被分区居中——后者会让它上下同时溢出，回执整条落到视口外，
 * `assertCopyShown` 的 `inViewport` / `onTop` 当场判红（真浏览器实测：
 * 败局 bottom=820 > 812、胜局回执 807..839）。
 */
.ck-share {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--ck-s2); width: 100%; height: 100%; min-height: 0;
}
.ck-share__title {
  margin: 0; font-size: 12px; font-weight: 800; opacity: 0.95; line-height: 1.2;
  color: #ffffff; text-shadow: 0 1px 6px rgba(60, 44, 100, 0.75);
}
/* 回执在场时段标题让位：两者说的是同一件事，而回执是这一刻真正要读的那句。 */
.ck-share--receipt .ck-share__title { display: none; }
.ck-share__row { display: flex; gap: 10px; width: 100%; flex: 0 0 auto; }
/* 三枚按钮横排，每枚只有 114px：图标与文字**并排**时文字只剩 90px，
   "Copy result link" 被折成三行、把按钮撑成一块方砖。
   图标改成压在文字上方，整个宽度都留给文字，两行就够。 */
.ck-sharebtn {
  flex: 1 1 0; min-width: var(--gs-tap-min); min-height: var(--gs-tap-min);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 8px; border-radius: var(--gs-radius-md); background: var(--ck-lilac);
  border: 2px solid #ffffff; box-shadow: var(--gs-shadow-button);
  color: #ffffff; font: inherit; font-weight: 800; font-size: 11px; line-height: 1.2;
  text-align: center; cursor: pointer;
}
.ck-sharebtn img { width: 18px; height: 18px; flex: 0 0 auto; filter: brightness(0) invert(1); }
.ck-sharebtn:active { transform: translateY(3px); box-shadow: var(--gs-shadow-press); }
.ck-receipt {
  margin: 0; font-size: 12px; line-height: 1.25; font-weight: 800;
  color: var(--ck-mint-deep); text-align: center;
}

/* ═══════════════════ 九、浮层（只有暂停与分享两个）═══════════════════ */

.ck-overlay { position: fixed; inset: 0; z-index: 40; }
.ck-overlay__scrim { position: absolute; inset: 0; background: rgba(60, 44, 100, 0.5); backdrop-filter: blur(12px); }
.ck-overlay__panel {
  position: absolute; inset: 0;
  padding:
    calc(var(--gs-safe-top) + 14px) calc(var(--gs-safe-right) + 14px)
    calc(var(--gs-safe-bottom) + 14px) calc(var(--gs-safe-left) + 14px);
  box-sizing: border-box;
}
.ck-overlay__panel .ck-zone {
  background: rgba(252, 247, 240, 0.96);
  border-radius: var(--gs-radius-lg);
  border: 2px solid #ffffff;
  box-shadow: var(--gs-shadow-card);
  padding: 10px;
}
.ck-overlay__panel--share .ck-zone { background: rgba(70, 60, 116, 0.95); color: #ffffff; }
.ck-overlay__panel--share .ck-note { color: rgba(255, 255, 255, 0.82); }
/* 页头分区在第十节被统一改成横排（返回 + 标题 + 一枚读数）。
   浮层的页头不是那个形状：它是"标题 + 一行副标题"，横排会把副标题
   压成两行、再顶到关闭按钮底下。这里把它改回竖排，并给关闭按钮留出位置。 */
.ck-overlay__panel .ck-zone[data-zone='header'] {
  flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 2px; padding-right: 52px;
}
.ck-overlay__title { margin: 0; font-size: 22px; line-height: 1.1; }
.ck-overlay__sub { margin: 0; font-size: 12.5px; opacity: 0.78; line-height: 1.25; }
.ck-overlay__close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }

.ck-setting { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.55); }
.ck-setting--slider .ck-slider { grid-column: 1 / -1; }
.ck-setting__icon { width: 22px; height: 22px; filter: var(--ck-tint-ink); }
.ck-setting__label { font-weight: 800; font-size: 14px; min-width: 0; }
/* 分段选择器（减少动态：系统 / 开 / 关）比"Reduced motion"这行标签宽，
   横排时两者一定相撞。让它整行独占——同一行里挤不下就换行，不是压上去。 */
.ck-setting--segmented { grid-template-columns: 22px 1fr; row-gap: 6px; }
.ck-setting--segmented .gs-segmented { grid-column: 1 / -1; width: 100%; }
.ck-toggle {
  position: relative; width: 64px; height: var(--gs-tap-min); min-width: var(--gs-tap-min);
  min-height: var(--gs-tap-min); border-radius: 999px; border: 2px solid #ffffff;
  background: rgba(120, 96, 170, 0.3); cursor: pointer; padding: 0;
}
.ck-toggle[aria-checked='true'] { background: var(--ck-mint); }
.ck-toggle__knob { position: absolute; top: 4px; left: 4px; width: 32px; height: 32px; border-radius: 50%; background: #ffffff; transition: left var(--gs-fast) var(--gs-ease-out); }
.ck-toggle[aria-checked='true'] .ck-toggle__knob { left: 24px; }
/* `accent-color` 只管已填充的那一段，未填充的轨道仍然是浏览器默认的深灰，
   在奶白面板上看起来像一条黑杠。整条轨道自己画。 */
.ck-slider {
  width: 100%; min-height: var(--gs-tap-min); appearance: none; -webkit-appearance: none;
  background: transparent; cursor: pointer;
}
.ck-slider::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--ck-mint-deep) var(--ck-slider-fill, 50%), rgba(120, 96, 170, 0.22) var(--ck-slider-fill, 50%));
}
.ck-slider::-moz-range-track { height: 8px; border-radius: 999px; background: rgba(120, 96, 170, 0.22); }
.ck-slider::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--ck-mint-deep); }
.ck-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; margin-top: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #ffffff; border: 3px solid var(--ck-mint-deep);
  box-shadow: 0 2px 6px rgba(88, 66, 130, 0.3);
}
.ck-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--ck-mint-deep);
  background: #ffffff; box-shadow: 0 2px 6px rgba(88, 66, 130, 0.3);
}

/* 375×812 下结算动作区只有 7–11% 高；两枚 44px CTA 纵排会越区。
 * 横排仍保持同一信息层级，同时让每枚按钮完整落在 actions 分区内。 */
.ck-screen--result .ck-zone[data-zone='actions'] { flex-direction: row; }

.ck-cardpreview { width: 100%; height: 100%; object-fit: contain; border-radius: var(--gs-radius-md); }
.ck-cardpreview--pending { background: rgba(255, 255, 255, 0.16); }

/* ═══════════════════ 十、帮助页 ═══════════════════ */

.ck-recipe {
  display: flex; align-items: center; gap: var(--ck-s2); width: 100%;
  padding: var(--ck-s2) var(--ck-s1); box-sizing: border-box;
  border-bottom: 1px solid var(--gs-hairline);
}
.ck-recipe:last-child { border-bottom: 0; }
.ck-recipe--deny .ck-recipe__glyphs img { filter: grayscale(1); }
.ck-recipe__glyphs { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ck-recipe__item { width: 40px; height: 40px; }
.ck-recipe__op { font-size: 18px; font-weight: 900; color: var(--ck-mint-deep); }
.ck-recipe__deny { font-size: 22px; font-weight: 900; color: var(--ck-ember); }
.ck-recipe__text { margin: 0; font-size: 13px; font-weight: 700; }
.ck-helpsec { display: flex; gap: 10px; padding: 6px 4px; }
.ck-helpsec__icon { width: 30px; height: 30px; flex: 0 0 auto; }
.ck-helpsec__title { margin: 0 0 2px; font-size: 15px; }
.ck-helpsec__body { margin: 0; font-size: 12.5px; line-height: 1.4; }
.ck-offline__mark { width: 84px; height: 84px; }

/* 内容多的分区允许自己滚，**但绝不许把动作区挤出屏幕** */
.ck-zone[data-zone='content'], .ck-zone[data-zone='recipes'],
.ck-zone[data-zone='detail'], .ck-zone[data-zone='grid'],
.ck-zone[data-zone='settings'], .ck-zone[data-zone='orders'] {
  overflow-y: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ck-zone[data-zone='content']::-webkit-scrollbar,
.ck-zone[data-zone='recipes']::-webkit-scrollbar,
.ck-zone[data-zone='detail']::-webkit-scrollbar,
.ck-zone[data-zone='grid']::-webkit-scrollbar,
.ck-zone[data-zone='settings']::-webkit-scrollbar,
.ck-zone[data-zone='orders']::-webkit-scrollbar { display: none; }

/* 可滚分区的下边界原来是一条**硬切线**：最后一段正文被从半行处齐齐切断，
   看起来像渲染坏了，而不是"还有内容"。留一条 20px 的余量 + 渐隐，
   下边界就成了"这里还没完"的提示。 */
.ck-zone[data-zone='content'],
.ck-zone[data-zone='recipes'],
.ck-zone[data-zone='detail'],
.ck-zone[data-zone='grid'] {
  padding-bottom: 20px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 20px), transparent 100%);
}
/* 浮层里的分区自己就是一张卡：卡的下边界已经说清"到这儿为止"，
   再加 20px 渐隐余量只会把最后一行控件顶出卡外。 */
.ck-overlay__panel .ck-zone { padding-bottom: 10px; -webkit-mask-image: none; mask-image: none; }
.ck-overlay__panel .ck-zone[data-zone='settings'] { gap: 6px; }
.ck-setting { padding: 5px 8px; }

/*
 * 成段的字**不许直接画在插画上**。
 *
 * 云海那张背景自带高光，正好从帮助页第二段正文中间穿过去——一行字里有半行
 * 是白底白字；结算页的账目、今日班次的成绩块也一样，各自贴在云上，
 * 于是同一块屏幕上有的字有底、有的字没底，看起来就是"没做完"。
 *
 * 规则：**一屏里凡是承载成段文字或数据的分区，都站在同一种奶白底板上**。
 * 底板的下边界本身就说清了"到这儿为止"，所以这些分区不再叠渐隐余量。
 */
.ck-screen--help .ck-zone[data-zone='recipes'],
.ck-screen--help .ck-zone[data-zone='content'],
.ck-screen--daily .ck-zone[data-zone='preview'],
.ck-screen--daily .ck-zone[data-zone='record'],
.ck-screen--result .ck-zone[data-zone='detail'],
.ck-screen--result .ck-zone[data-zone='scale'],
.ck-screen--result .ck-zone[data-zone='advice'],
.ck-screen--shiftSelect .ck-zone[data-zone='detail'],
.ck-screen--shiftMap .ck-zone[data-zone='unlock'] {
  background: rgba(252, 247, 240, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--gs-radius-lg);
  box-shadow: var(--gs-shadow-card);
  padding: var(--ck-s3) var(--ck-s3) var(--ck-s2);
  box-sizing: border-box;
  -webkit-mask-image: none; mask-image: none;
}
/* 底板出现之后，板内那些"卡中卡"就不需要各自再来一层边框与投影了 */
.ck-screen--result .ck-zone[data-zone='advice'] .ck-advice { background: none; padding: 0; }

/* 结算页的 `detail` 是全屏最挤的一块底板：分区高度 S2 冻结（竖屏 0.28），
   里面要装一条段标题 + A14 的五行整句账单。12px 的四周留白与 8px 的分区间距
   在这里是 20px 的净损失，而那正好是 `fitTightZones()` 少收一档字号的量。 */
.ck-screen--result .ck-zone[data-zone='detail'] {
  padding: 8px 10px 6px;
  gap: 4px;
}
.ck-screen--result .ck-zone[data-zone='detail'] .ck-section { font-size: 13.5px; }

/* 底板里的列表自己滚时，渐隐要加在**列表**上而不是底板上——
   加在底板上会把卡片的下边框一起化掉，看起来像卡片没画完；
   加在列表上，卡片的边界是硬的，边界里的内容告诉你"下面还有"。 */
.ck-ledger, .ck-chain, .ck-decorgrid {
  padding-bottom: 14px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent 100%);
}
/* 账单是**不该滚的那一种**列表：A14 要五行同时在眼前，`fitTightZones()` 会把它收到
   装得下为止。既然不滚，这条"下面还有"的渐隐余量就只是白占 14px 高，
   而这 14px 正好是收字号时最先要省的那一截。 */
.ck-ledger {
  padding-bottom: 4px;
  -webkit-mask-image: none;
  mask-image: none;
}

/* ---- 分区必须自己容纳内容，不许溢到隔壁分区身上 ----
 *
 * 分区表是 S2 冻结的比例，而内容会随语言、解锁数量、朝向变长。
 * 这里原来只给四个"明显是列表"的分区开了滚动，剩下的溢出就直接压到隔壁分区上
 * （`.ck-zone` 是 `overflow: visible`，所以不是被裁，是**互相盖住**——
 * 分区契约里两块不许相交，走查一次报了 39 条 zone-overflow，都是这一类）。
 *
 * 分两种收法：
 * - **顶栏那一行读数**（Score / 焦格 / 空位 / 已上 + 补货）是横向排的，
 *   一行放不下就**换行**，不能滚——玩家不该为了看"已上几单"去横向拖一下。
 *   分区有两行的高度，换行正好。
 * - **订单条**在横屏是窄长的一列，三张卡叠起来必然超过分区高度：那是列表，
 *   按列表处理，滚。
 */
/* 顶栏装进两行这件事现在由第七节的**网格**保证（行高钉死，不靠内容自觉），
   这里只留高度下限，别让某一行塌成一条线。 */
.ck-hud .ck-stat { min-height: 30px; }
.ck-zone[data-zone='orders'] { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
/* 页头就是"返回 + 标题 + 一枚读数"这一行：竖着叠是 44+53+38+间距 = 151px，
   而这个分区最多给 89px（竖屏）/ 60px（横屏），最右那枚读数直接压到下一块上。
   横排之后高度就是最高的那一件（53px），三件都在。 */
.ck-zone[data-zone='header'] {
  flex-direction: row;
  justify-content: center;
  gap: 10px;
}
.ck-zone[data-zone='header'] > * { min-width: 0; }

/* 解锁轨道的 8 个节点排成 8 × 56 + 间距 = 504px，而分区只有 362px。
   共用件自带横滚，可"横滚"在这里是错的解法：这是**进度展示**不是列表，
   玩家不会去拖它，看到的就是"右边被切掉一半的第五个圈"。
   换成两行四列，八件一件不少，全在视野里。 */
.ck-zone[data-zone='unlock'] .gs-track__row {
  display: grid; grid-template-columns: repeat(4, 52px); justify-content: center;
  overflow-x: visible; gap: var(--ck-s2);
}
.ck-zone[data-zone='unlock'] .gs-track__slot { width: 52px; height: 52px; }
.ck-zone[data-zone='unlock'] .gs-track__slot img { width: 34px; height: 34px; }

/* 今日班次的成绩块：大数字与三格数据竖着叠是 172px，分区只有 130px。
   这个分区有 375px 宽，两块并排（101 + 102）绰绰有余。 */
.ck-zone[data-zone='record'] { flex-direction: row; justify-content: center; gap: 12px; }
/* 预告行按边框盒算宽，否则内边距会把它顶出分区 2px */
.ck-preview__orders { max-width: 100%; box-sizing: border-box; }

/* ═══════════════════ 十一、手机横屏 ═══════════════════ */
/*
 * 这一节原来叫「宽屏自适应」，里面有一档 `min-width: 1100px` 的桌面版式。
 * 桌面版式已经取消：共用库（`game-shell/ui/ui.css` 末尾「手机画布锁定」）
 * 会在视口比手机宽时把整个 `#app` 收成一块 ≤540px 的手机画布居中摆着，
 * 桌面玩到的就是手机上验收过的那一屏。
 *
 * 所以剩下的两档都加了 `max-height`：它们只服务**手机横过来**这一种情况。
 * 少了那个条件，规则会在桌面上生效，而桌面那块画布只有手机那么宽——
 * 拿桌面的尺子去量它，安全区和字号一起把分区撑破。
 */

@media (min-width: 700px) and (max-height: 560px) {
  :root { --gs-text-sm: 15px; --gs-text-md: 17px; --gs-text-lg: 22px; }
  #app {
    padding:
      calc(var(--gs-safe-top) + 22px) calc(var(--gs-safe-right) + 28px)
      calc(var(--gs-safe-bottom) + 22px) calc(var(--gs-safe-left) + 28px);
  }
  .ck-order__name { font-size: 12.5px; }
  .ck-order__count { font-size: 15px; }
  .ck-stat__label { font-size: 12px; }
  .ck-stat__value { font-size: 17px; }
  .ck-segment { width: 22px; height: 22px; }
  .ck-decorgrid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════ 十一点五、站内短竖屏 ═══════════════════
 *
 * 手机游戏页里的 iframe 会出现 342×403 这类“竖着、但只有半屏高”的画布。
 * 它既不是常规竖屏，也不会命中下面的横屏规则。继续套 812px 高的排法时，标题页
 * 两枚 CTA 与 56px 圆盘导航会在最后 26% 高度里纵向相撞，结果是主按钮看得见却点不到。
 *
 * 分区比例仍然完全来自 SCREEN_SPEC；这一档只把分区内部的组件改成紧凑形态：
 * CTA 并排、导航只保留 44px 图标盘、HUD 改为单行读数。所有交互件仍守 44px 下限。
 */
@media (orientation: portrait) and (max-width: 600px) and (max-height: 560px) {
  :root {
    --ck-gutter: 0px;
    --gs-text-xs: 10px;
    --gs-text-sm: 12px;
    --gs-text-md: 14px;
    --gs-text-lg: 17px;
  }

  .ck-zone { gap: 4px; }
  .ck-pill { gap: 4px; padding: 3px 9px; border-width: 1px; }
  .ck-banner { gap: 5px; padding: 2px 10px; border-width: 2px; }
  .ck-banner__icon { width: 22px; height: 22px; }
  .ck-banner__text { font-size: 17px; line-height: 1.05; }
  .ck-back { z-index: 2; }

  /* 标题页：两枚动作横排；四枚导航盘压到触控下限并隐藏可见标签。
     aria-label 仍在按钮上，读屏语义不丢。 */
  .ck-titlehead { gap: 5px; }
  .ck-titlehead .ck-logo--sm { width: 30px; height: 30px; }
  .ck-titlehead .ck-title { font-size: 17px; }
  .ck-titlehead .ck-pill { padding: 2px 7px; font-size: 11px; flex-wrap: nowrap; }
  .ck-titlehead .ck-inlineicon { width: 14px; height: 14px; }
  .ck-screen--title .ck-zone[data-zone='actions'] {
    flex-direction: row;
    gap: 8px;
  }
  .ck-screen--title .ck-zone[data-zone='actions'] .gs-btn {
    flex: 1 1 0;
    min-width: 0;
  }
  .ck-zone[data-zone='nav'] .gs-nav {
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    height: 100%;
    padding: 0;
  }
  .ck-zone[data-zone='nav'] .gs-nav__item {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  .ck-zone[data-zone='nav'] .gs-nav__disc { width: 44px; height: 44px; }
  .ck-zone[data-zone='nav'] .gs-nav__disc img { width: 23px; height: 23px; }
  .ck-zone[data-zone='nav'] .gs-nav__item > span:not(.gs-nav__disc) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .gs-btn { padding: 5px 10px; font-size: 14px; line-height: 1.15; }
  .ck-screen--shiftSelect .gs-segmented { flex-wrap: nowrap; gap: 8px; }
  .ck-screen--shiftSelect .gs-segmented .gs-btn {
    min-width: 0;
    padding-inline: 6px;
    font-size: 12px;
  }
  .ck-compare { gap: 4px; }
  .ck-compare__row {
    grid-template-columns: 20px minmax(70px, 1fr) auto;
    gap: 5px;
    padding: 3px 7px;
  }
  .ck-compare__icon { width: 19px; height: 19px; }
  .ck-compare__label { font-size: 11px; }
  .ck-compare__values { gap: 4px; font-size: 12px; }
  .ck-zone[data-zone='note'] .ck-pill { padding-block: 2px; }
  .ck-zone[data-zone='note'] .ck-note { font-size: 10px; line-height: 1.15; }

  /* 今日班次原来把常规竖屏的 36px 周历、三张大预告卡和结果大数字原样塞进
     403px 高画布。这里保持信息完整，只收成短屏尺寸并把底部按钮与说明并排。 */
  .ck-screen--daily .ck-zone[data-zone='streak'] { gap: 2px; }
  .ck-screen--daily .ck-week { gap: 4px; }
  .ck-screen--daily .ck-week__day {
    width: 31px;
    height: 31px;
    border-width: 1px;
    font-size: 11px;
  }
  .ck-screen--daily .ck-zone[data-zone='streak'] .ck-pill { font-size: 10px; }
  .ck-screen--daily .ck-zone[data-zone='preview'] { gap: 2px; }
  .ck-screen--daily .ck-zone[data-zone='preview'] .ck-section { font-size: 11px; }
  .ck-screen--daily .ck-preview__orders {
    flex: 1 1 auto;
    min-height: 0;
    gap: 4px;
  }
  .ck-screen--daily .ck-minicard {
    height: 100%;
    padding: 3px;
    border-width: 1px;
    border-radius: 12px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .ck-screen--daily .ck-minicard__name { font-size: 9px; }
  .ck-screen--daily .ck-minicard__count { font-size: 9px; }
  .ck-screen--daily .ck-minicard__dish { max-height: 46px; }
  .ck-screen--daily .ck-minicard__guest { top: 20px; width: 20px; }
  .ck-screen--daily .ck-minicard__finisher { right: 2px; bottom: 2px; width: 18px; height: 18px; }
  .ck-screen--daily .ck-minicard__finisher img { width: 13px; height: 13px; }
  .ck-screen--daily .ck-zone[data-zone='record'] { gap: 6px; }
  .ck-screen--daily .gs-hero { gap: 1px; }
  .ck-screen--daily .gs-hero__label { font-size: 9px; }
  .ck-screen--daily .gs-hero__value { font-size: 30px; }
  .ck-screen--daily .gs-stats { gap: 2px; padding: 3px 5px; }
  .ck-screen--daily .gs-stat { gap: 1px; }
  .ck-screen--daily .gs-stat__icon { width: 18px; height: 18px; }
  .ck-screen--daily .gs-stat__value { font-size: 15px; }
  .ck-screen--daily .gs-stat__label { font-size: 9px; }
  .ck-screen--daily .ck-zone[data-zone='actions'] {
    flex-direction: row;
    gap: 8px;
  }
  .ck-screen--daily .ck-zone[data-zone='actions'] > * { flex: 1 1 0; min-width: 0; }
  .ck-screen--daily .ck-zone[data-zone='actions'] .ck-note { font-size: 9.5px; line-height: 1.15; }

  /* 八件解锁物在短屏改成单行缩略轨道，避免两行 52px 节点挤出 23% 分区。 */
  .ck-zone[data-zone='unlock'] { gap: 2px; }
  .ck-zone[data-zone='unlock'] .ck-section { font-size: 11px; }
  .ck-zone[data-zone='unlock'] .gs-track { gap: 2px; width: 100%; }
  .ck-zone[data-zone='unlock'] .gs-track__row {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 3px;
    width: 100%;
    padding: 0;
  }
  .ck-zone[data-zone='unlock'] .gs-track__slot {
    min-width: 0;
    width: auto;
    height: auto;
    aspect-ratio: 1;
    border-radius: 9px;
  }
  .ck-zone[data-zone='unlock'] .gs-track__slot img { width: 58%; height: 58%; }
  .ck-zone[data-zone='unlock'] .gs-track__at { bottom: 1px; font-size: 8px; }

  /* 帮助页依然可滚，但缩小每行的固定图形，把宽度与高度优先留给说明文字。 */
  .ck-screen--help .ck-zone[data-zone='header'] { min-height: 44px; }
  .ck-recipe { gap: 4px; padding: 4px 2px; }
  .ck-recipe__item { width: 28px; height: 28px; }
  .ck-recipe__op { font-size: 14px; }
  .ck-recipe__text { font-size: 10.5px; line-height: 1.18; }
  .ck-helpsec { gap: 5px; padding: 3px 2px; }
  .ck-helpsec__icon { width: 22px; height: 22px; }
  .ck-helpsec__title { font-size: 12px; }
  .ck-helpsec__body { font-size: 10.5px; line-height: 1.25; }
  .ck-zone[data-zone='footer'] .ck-pill { padding: 1px 7px; gap: 1px; }
  .ck-zone[data-zone='footer'] .ck-note { line-height: 1.08; }

  /* 游戏主屏：40px 顶栏必须是一行。标签视觉隐藏但保留在 DOM 中；图标 + 数值、
     补货倒计时与两份预告仍同时可见。 */
  .ck-screen--play .ck-hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
  }
  .ck-screen--play .ck-stat {
    flex: 0 1 auto;
    gap: 2px;
    min-height: 30px;
    padding: 2px 4px;
    border-width: 1px;
  }
  .ck-screen--play .ck-stat__icon { width: 12px; height: 12px; }
  .ck-screen--play .ck-stat__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .ck-screen--play .ck-stat__value,
  .ck-screen--play .ck-stat[data-tone='gold'] .ck-stat__value { font-size: 10.5px; }
  .ck-screen--play .ck-hud__right {
    display: flex;
    flex: 0 1 auto;
    gap: 2px;
  }
  .ck-screen--play .ck-restock { gap: 2px; padding: 1px 3px 1px 1px; border-width: 1px; }
  .ck-screen--play .ck-restock .gs-ring { width: 28px !important; height: 28px !important; }
  .ck-screen--play .ck-restock .gs-ring__value { font-size: 8px; }
  .ck-screen--play .ck-restock__label { display: none; }
  .ck-screen--play .ck-preview { gap: 1px; }
  .ck-screen--play .ck-preview__slot { padding: 1px 2px; border-width: 1px; }
  .ck-screen--play .ck-preview__slot img { width: 15px; height: 15px; }
  .ck-screen--play .ck-preview__col { font-size: 8px; line-height: 1; }
  .ck-screen--play .ck-order { padding: 3px 4px; border-width: 2px; }
  .ck-screen--play .ck-order__name { font-size: 9px; }
  .ck-screen--play .ck-order__count { font-size: 11px; }
  .ck-screen--play .ck-order__guest { width: 21px; }
  .ck-screen--play .ck-order__finisher { width: 21px; height: 21px; }
  .ck-screen--play .ck-order__finisher img { width: 16px; height: 16px; }
  .ck-screen--play .ck-zone[data-zone='coach'] .gs-strip { padding: 2px 5px; gap: 4px; }
  .ck-screen--play .ck-zone[data-zone='coach'] .gs-strip__figure { display: none; }
  .ck-screen--play .ck-zone[data-zone='coach'] .gs-strip__lead { display: none; }
  .ck-screen--play .ck-zone[data-zone='coach'] .gs-strip__body {
    font-size: 9.5px;
    line-height: 1.1;
    -webkit-line-clamp: 2;
  }
  .ck-screen--play .ck-zone[data-zone='coach'] .gs-coach__skip {
    min-width: 44px;
    min-height: 26px;
    height: 26px;
    padding: 2px 6px;
    font-size: 10px;
  }
  .ck-screen--play .ck-actionbar { flex-direction: row; justify-content: space-between; gap: 4px; }
  .ck-screen--play .ck-streak { gap: 3px; min-width: 0; }
  .ck-screen--play .ck-streak__label { font-size: 9px; }
  .ck-screen--play .ck-segments { gap: 1px; }
  .ck-screen--play .ck-segment { width: 12px; height: 12px; }
  .ck-screen--play .ck-segment img { width: 8px; height: 8px; }
  .ck-screen--play .ck-actionbar__buttons { gap: 8px; }

  /* 浮层在短屏保留滚动设置区；收紧装饰性留白，关闭与返回仍是 44px。 */
  .ck-overlay__panel { padding: 0; }
  .ck-overlay__panel .ck-zone { padding: 5px 7px; border-radius: 16px; }
  .ck-overlay__panel .ck-zone[data-zone='header'] {
    /* 面板卡自身有上下各 1px 边框；46px 的边框盒正好留下 44px 内容盒给关闭按钮。 */
    height: 46px !important;
    min-height: 46px;
    padding-right: 48px;
    box-sizing: border-box;
  }
  .ck-overlay__title { font-size: 17px; }
  .ck-overlay__sub { font-size: 10px; }
  .ck-overlay__close { box-sizing: border-box; }
  .ck-overlay__panel .ck-zone[data-zone='settings'] { gap: 4px; }
  .ck-setting { padding: 3px 5px; gap: 5px; }
  .ck-setting__label { font-size: 11px; }
}

/* 横屏手机：分区表已换成横排，这里只把纵向堆叠的小构件改成横排。
   560 这个数来自 `shared/phone-canvas.json` 的 shortViewportMaxHeightPx，
   也就是画布锁定给"手机横过来"留的那个出口。这里原来写 520：
   于是 521–560px 高的那一档**谁都不管**——画布不锁（按 560 判它是手机横屏），
   横屏样式又不生效（按 520 判它不是），正好落在两套规则的缝里。 */
@media (orientation: landscape) and (max-height: 560px) {
  /* 横屏 hud 分区是 0.27 宽 × 0.30 高的一小块竖条：四枚读数排成两列两行，
     补货那一行整条占满。等宽两列同样让四个数字对齐。 */
  .ck-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  /* 帮助页底部那三句免责说明：横屏这一栏只有 429px 宽，三句必然折成两行，
     两行 × 16px + 内边距 = 80px，而分区只有 52px。收一档内边距与字号就装得下，
     三句一句不删——它们是"本地存档 / 无倒计时 / 无内购"，删哪句都是骗玩家。 */
  .ck-zone[data-zone='footer'] .ck-pill { padding: 2px 10px; gap: 2px; }
  /* 字号**不在这里钉死**：钉死会盖掉 `fitTightZones()` 写在药丸上的
     `--ck-note-fs`，横屏就永远收不动。这一档只收留白，字号交给那一套。 */
  /*
   * 订单卡在横屏是**横躺**的，不是竖屏那张卡转个方向。
   *
   * 竖屏那张卡（名字在上、大图在下）在 228×269 的竖条里每张要 243px，
   * 三张只看得见一张零一点，另外两张要拖才知道有——而"谁在等什么"
   * 恰恰是这一屏每秒都要扫一眼的东西。
   * 横躺之后一张 82px，三张 246px，一屏全在。
   */
  /* 间距同样保持 8px：订单卡是可点控件，相邻控件的下限由闸门守着。 */
  .ck-orders { flex-direction: column; gap: 8px; }
  .ck-order {
    flex: 0 0 auto; flex-direction: row; align-items: center; gap: var(--ck-s2);
    min-height: 76px; padding: 6px 8px;
  }
  .ck-order__head { flex: 1 1 auto; order: 2; }
  .ck-order__body { order: 1; flex: 0 0 62px; height: 62px; flex-direction: row; }
  .ck-order__dish { height: 100%; width: 62px; flex: 0 0 62px; }
  .ck-order__dots { order: 3; flex-direction: row; gap: 4px; }
  .ck-order__guest { right: auto; left: 44px; top: 2px; width: 22px; }
  .ck-order__finisher { right: 6px; bottom: 6px; width: 22px; height: 22px; }
  .ck-order__finisher img { width: 16px; height: 16px; }

  /* 横屏 hud 分区实测 220×109：两行读数 + 一行补货要装进去，
     每行 34px、补货那行 36px、行距 2px（34+2+34+2+36 = 108）。
     这一档的 `--gs-text-*` 是给宽屏放大的，读数**反而要收**——
     不收就是 43+43+46 = 132px，补货那一行直接画到订单卡上。 */
  .ck-hud { gap: 2px 5px; }
  .ck-hud .ck-stat { min-height: 0; padding: 2px 6px; }
  .ck-hud .ck-stat__icon { width: 14px; height: 14px; }
  .ck-hud .ck-stat__label { font-size: 9.5px; }
  .ck-hud .ck-stat__value { font-size: 12.5px; }
  .ck-hud .ck-stat[data-tone='gold'] .ck-stat__value { font-size: 14px; }
  .ck-restock { padding: 1px 6px 1px 2px; }
  .ck-restock .gs-ring { width: 30px !important; height: 30px !important; }
  .ck-restock .gs-ring__value { font-size: 9.5px; }
  .ck-restock__label { font-size: 9px; }
  .ck-preview__slot img { width: 18px; height: 18px; }

  /* 横屏教学条只有 219×70：图示放不下（三张图 + 两个运算符本身就 90px），
     留下来会把那句"该怎么做"再一次压成零宽。图示在竖屏保留，这里收掉。 */
  .ck-zone[data-zone='coach'] .gs-strip__figure { display: none; }
  .ck-zone[data-zone='coach'] .gs-strip { padding: 6px 8px; gap: 6px; }
  .ck-zone[data-zone='coach'] .gs-strip__lead { max-width: 38px; }
  .ck-zone[data-zone='coach'] .gs-coach__steps { max-width: 38px; }
  .ck-zone[data-zone='coach'] .gs-strip__counter { font-size: 13px; }
  .ck-zone[data-zone='coach'] .gs-strip__body { -webkit-line-clamp: 4; font-size: 10.5px; line-height: 1.2; }
  .ck-zone[data-zone='coach'] .gs-coach__skip { padding: 5px 8px; font-size: 11.5px; min-height: 34px; min-width: 34px; }

  .ck-actionbar {
    justify-content: center; gap: var(--ck-s3);
    padding: var(--ck-s3) var(--ck-s2); box-sizing: border-box;
    height: auto; max-height: 100%; align-self: center; width: auto; min-width: 132px;
    border-radius: var(--gs-radius-lg);
    background: rgba(252, 247, 240, 0.72);
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: var(--gs-shadow-card);
  }
  .ck-zone[data-zone='actions'] { justify-content: center; }
  .ck-actionbar__buttons { flex-direction: row; }
  .ck-title { font-size: clamp(22px, 5vw, 34px); }
  /* 横屏页头只有 359px，里面还站着 logo 和星数：`vw` 在这里量的是 844，
     clamp 会顶到上限 30px，标题当场比它的位置宽 70px。这一档单独钉一个值。 */
  .ck-titlehead .ck-title { font-size: 22px; }
}

/* 减少动态：状态变化保留，只把时长压掉。**弹回、焦格放热、降温泛蓝是判定信息，不是装饰** */
@media (prefers-reduced-motion: reduce) {
  .ck-stat[data-bump='true'], .ck-preview[data-alert='true'] .ck-preview__slot { animation: none; }
  .ck-finger-ghost__hand { animation: none; transform: translate(var(--ck-ghost-dx), var(--ck-ghost-dy)); }
}
:root[data-reduced-motion='on'] .ck-stat[data-bump='true'],
:root[data-reduced-motion='on'] .ck-preview[data-alert='true'] .ck-preview__slot { animation: none; }
:root[data-reduced-motion='on'] .ck-finger-ghost__hand {
  animation: none; transform: translate(var(--ck-ghost-dx), var(--ck-ghost-dy));
}