/*
 * 迷你神偷 · 皮肤与本作专有版式。
 *
 * 两条纪律：
 *
 * 1. **共用组件库只换变量，不改选择器。** 下面第一段把 `--gs-*` 换成本作
 *    走查稿上量到的那套颜色与圆角；`.gs-*` 一个都没被重写——重写它们
 *    会把 44×44 触控下限、安全区、按下态一起改坏，而那正是组件库存在的理由。
 *
 * 2. **只有手机端一套版式。** 视口比手机宽的时候，`game-shell/ui/ui.css` 末尾的
 *    「手机画布锁定」把整个 `#app` 收成一块 9:16 的手机画布居中摆着，
 *    桌面玩到的就是手机上验收过的那一屏。所以这里不许出现按视口宽度放大的规则：
 *    唯一一档 `@media` 是手机横屏（`(orientation: landscape) and (max-height: 560px)`，
 *    560 这个数的唯一真值是 `shared/phone-canvas.json`）。
 *    **分区几何不靠 CSS 分档**——它由 `ui.mjs` 按 `game.config.json` 的 `zones`
 *    逐屏套用，朝向读的是画布元素的 `getBoundingClientRect()`，不是视口。
 *
 * 配色来自 `SCREEN_REVIEW.json` 的 `palette_from_screens`：19 张走查稿上逐屏取的样。
 */

:root {
  /* ---- 本作配色（走查稿取样）---- */
  --sr-bg-deep: #0d0a1a;
  --sr-bg-vault: #150f2c;
  --sr-panel: #141c2e;
  --sr-card: #152238;
  --sr-card-raised: #1b2b45;
  --sr-hairline: rgba(122, 148, 190, 0.22);

  --sr-mint: #2ee6a6;
  --sr-route: #39ff8f;
  --sr-cyan: #4fd8ff;
  --sr-gold: #f5b93c;
  --sr-amber: #f5a623;
  --sr-danger: #ff3b5c;
  --sr-warn: #ffa53d;
  --sr-locked: #5a6270;

  --sr-brick: #4b3a7a;
  --sr-brick-top: #6a54a6;
  --sr-floor: #241b3f;
  --sr-floor-alt: #2b2150;

  /* ---- 覆盖共用组件库的令牌 ---- */
  --gs-ink: #f0ead6;
  --gs-ink-soft: rgba(240, 234, 214, 0.76);
  --gs-ink-dim: #8fa3c0;
  --gs-ink-on-light: #12172a;

  --gs-surface: rgba(20, 28, 46, 0.9);
  --gs-surface-raised: rgba(27, 43, 69, 0.94);
  --gs-surface-sunken: rgba(11, 15, 28, 0.72);
  --gs-hairline: var(--sr-hairline);

  --gs-accent: var(--sr-mint);
  --gs-accent-2: var(--sr-amber);
  --gs-gold: var(--sr-gold);
  --gs-danger: var(--sr-danger);

  --gs-glow-accent: 0 0 0 1px rgba(46, 230, 166, 0.55), 0 0 26px rgba(46, 230, 166, 0.3);
  --gs-glow-gold: 0 0 26px rgba(245, 185, 60, 0.5);
  --gs-shadow-card: 0 16px 38px rgba(4, 2, 14, 0.55);
  --gs-shadow-button: 0 5px 0 rgba(3, 2, 10, 0.42), 0 12px 22px rgba(4, 2, 14, 0.45);
  --gs-shadow-press: 0 2px 0 rgba(3, 2, 10, 0.42), 0 6px 12px rgba(4, 2, 14, 0.45);

  --gs-cta: linear-gradient(135deg, #35f0a8, #14b98a 70%, #0e9a76);
  --gs-radius-md: 16px;
  --gs-radius-lg: 22px;

  /* 保险库大门的中缝在图正中偏上，竖屏 cover 之后要往上取一点才看得到轮盘。 */
  --gs-bg-focus: 50% 42%;

  /* ---- 安全区：底部至少留一段，别贴到画布最下沿 ---- */
  --sr-safe-top: max(env(safe-area-inset-top, 0px), 10px);
  --sr-safe-bottom: max(env(safe-area-inset-bottom, 0px), 22px);
  --sr-safe-left: max(env(safe-area-inset-left, 0px), 8px);
  --sr-safe-right: max(env(safe-area-inset-right, 0px), 8px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  /* 入口的 viewport 一旦被改坏，Safari 会自作主张放大正文字号，把分区撑破。
     这一行是那种情况下的兜底，不是样式偏好。 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #05030d;
  color: var(--gs-ink);
  font-family: "Trebuchet MS", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 0%, #241a4a 0%, rgba(21, 15, 44, 0) 62%),
    linear-gradient(180deg, var(--sr-bg-vault) 0%, var(--sr-bg-deep) 55%, #08060f 100%);
  isolation: isolate;
}

/* ============================ 舞台与分区 ============================ */

.sr-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* 分区坐标是**相对安全区之后可视区**的 0~1，所以先把安全区扣掉，
   再让分区在这个盒子里按百分比落位（`ui.mjs` 写内联的 left/top/width/height）。 */
.sr-safe {
  position: absolute;
  top: var(--sr-safe-top);
  right: var(--sr-safe-right);
  bottom: var(--sr-safe-bottom);
  left: var(--sr-safe-left);
}

.sr-layer { position: absolute; inset: 0; }

.sr-zone {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* 列表型分区自己滚，别把内容顶出分区（分区是 S2 冻结的，不许挪边界）。 */
.sr-zone--scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sr-zone--scroll::-webkit-scrollbar { display: none; }

.sr-zone--center { justify-content: center; align-items: center; }
.sr-zone--end { justify-content: flex-end; }
.sr-zone--gap { gap: 10px; }

/* ============================ 满屏插画背景 ============================ */

.sr-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.sr-backdrop img {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  object-position: var(--gs-bg-focus);
  opacity: 0.9;
}

.sr-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 5, 20, 0.62) 0%, rgba(8, 5, 20, 0.2) 34%,
    rgba(8, 5, 20, 0.42) 68%, rgba(8, 5, 20, 0.84) 100%);
}

/* ============================ 通用小件 ============================ */

.sr-title {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.08;
  background: linear-gradient(180deg, #ffffff, #b9c9ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(120, 160, 255, 0.28);
}

.sr-display { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: 0.01em; }
.sr-sub { margin: 0; font-size: 13px; color: var(--gs-ink-dim); line-height: 1.35; }
.sr-note { margin: 0; font-size: 11px; color: var(--gs-ink-dim); line-height: 1.4; }
.sr-micro { margin: 0; font-size: 10px; color: rgba(143, 163, 192, 0.7); letter-spacing: 0.04em; }
.sr-label { margin: 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gs-ink-dim); }

.sr-logo {
  width: 74px;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(46, 230, 166, 0.4));
}

.sr-loading-stage { align-items: center; justify-content: center; overflow: hidden; }
.sr-loading-thief {
  position: relative;
  z-index: 2;
  width: min(38%, 150px);
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(3, 2, 12, .72));
  animation: sr-loading-walk 900ms ease-in-out infinite alternate;
}
.sr-loading-route {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 24%;
  height: 40%;
  filter: drop-shadow(0 0 8px rgba(57, 255, 143, .8));
}
.sr-loading-route span { position: absolute; display: block; border-radius: 999px; background: var(--sr-route); }
.sr-loading-route span:nth-child(1) { left: 0; bottom: 0; width: 44%; height: 8px; }
.sr-loading-route span:nth-child(2) { left: 42%; bottom: 0; width: 8px; height: 66%; }
.sr-loading-route span:nth-child(3) { left: 42%; bottom: 58%; width: 42%; height: 8px; }
@keyframes sr-loading-walk { from { transform: translateX(-12px); } to { transform: translateX(12px); } }

.sr-card {
  position: relative;
  border-radius: var(--gs-radius-md);
  border: 1px solid var(--sr-hairline);
  background: linear-gradient(180deg, rgba(27, 43, 69, 0.94), rgba(17, 25, 42, 0.94));
  box-shadow: var(--gs-shadow-card);
  padding: 12px 14px;
}

.sr-card--glow { border-color: rgba(46, 230, 166, 0.45); box-shadow: var(--gs-glow-accent), var(--gs-shadow-card); }
.sr-card--locked { opacity: 0.72; border-color: rgba(90, 98, 112, 0.5); }
.sr-card[style*="ui-card-route"] { min-height: 126px; background-repeat: no-repeat; }

.sr-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--sr-hairline);
  color: var(--gs-ink-dim);
  background: rgba(10, 14, 26, 0.7);
}
.sr-chip--active { color: #06170f; background: var(--sr-mint); border-color: transparent; }
.sr-chip--warn { color: #1c1204; background: var(--sr-gold); border-color: transparent; }
.sr-chip--locked { color: var(--sr-locked); }

.sr-hero {
  margin: 0;
  font-size: 52px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #ffe08a, #f5b93c 55%, #d98f16);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(245, 185, 60, 0.42));
}

.sr-icon { width: 20px; height: 20px; filter: var(--gs-icon-tint-ink); opacity: 0.9; }
.sr-icon--gold { filter: var(--gs-icon-tint-gold); opacity: 1; }
.sr-icon--accent { filter: var(--gs-icon-tint-accent); opacity: 1; }

/* ============================ 按钮 ============================ */

.sr-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: var(--gs-ink);
  min-height: var(--gs-tap-min);
  min-width: var(--gs-tap-min);
  padding: 10px 18px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(24, 36, 58, 0.94);
  border: 1px solid var(--sr-hairline);
  box-shadow: var(--gs-shadow-press);
  transition: transform var(--gs-fast) var(--gs-ease-out), filter var(--gs-fast) var(--gs-ease-out);
}

.sr-btn:active { transform: scale(0.96); }
.sr-btn[disabled] { opacity: 0.55; cursor: default; }

.sr-btn--primary {
  background: var(--gs-cta);
  color: #042014;
  border-color: transparent;
  font-size: 17px;
  box-shadow: var(--gs-shadow-button), 0 0 26px rgba(46, 230, 166, 0.34);
}

.sr-btn--secondary { border-color: rgba(79, 216, 255, 0.42); color: var(--sr-cyan); }
.sr-btn--ghost { background: rgba(10, 14, 26, 0.5); box-shadow: none; }
.sr-btn--wide { width: 100%; }

.sr-iconbtn {
  appearance: none;
  cursor: pointer;
  width: var(--gs-tap-min);
  height: var(--gs-tap-min);
  border-radius: 999px;
  border: 1px solid var(--sr-hairline);
  background: rgba(11, 16, 30, 0.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sr-iconbtn:active { transform: scale(0.94); }

/* 圆形图标入口（标题页那一排）。锁着的照样显示、照样能聚焦，只是灰掉并说明条件。 */
.sr-nav { display: flex; justify-content: space-between; gap: 8px; width: 100%; }

.sr-nav__item {
  appearance: none;
  cursor: pointer;
  border: 0;
  background: none;
  color: var(--gs-ink-dim);
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1 1 0;
  min-width: var(--gs-tap-min);
  min-height: var(--gs-tap-min);
  padding: 2px 0;
}

.sr-nav__disc {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(79, 216, 255, 0.34);
  background: radial-gradient(circle at 50% 30%, rgba(46, 230, 166, 0.2), rgba(10, 15, 28, 0.9));
  display: grid;
  place-items: center;
}

/* ============================ 游玩 HUD ============================ */

.sr-hud {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
}

.sr-hud__stack { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-width: 0; }
.sr-hud__row { display: flex; align-items: center; gap: 8px; }

/* 警戒余量条：**界面上唯一会减少并可能归零的常驻元素**（§6.5）。
   红→橙→黄三段染色，读数写在条里面，双速时换成斜纹。 */
.sr-alarm {
  position: relative;
  flex: 1 1 auto;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(122, 148, 190, 0.3);
  background: rgba(8, 11, 22, 0.85);
  overflow: hidden;
}

.sr-alarm__fill {
  position: absolute;
  inset: 1px auto 1px 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff3b5c 0%, #f5a623 46%, #ffd76a 100%);
  transition: width var(--gs-fast) linear;
}

.sr-alarm[data-level="warn"] .sr-alarm__fill { background: linear-gradient(90deg, #ff3b5c, #f5a623); }
.sr-alarm[data-level="critical"] .sr-alarm__fill {
  background: linear-gradient(90deg, #ff2a4d, #ff6b3d);
  animation: sr-pulse 1s steps(2, end) infinite;
}

/* 双速纹理：进入 sealed 状态之后条上多一层斜纹，形状而不只是颜色（无障碍）。 */
.sr-alarm[data-double="true"] .sr-alarm__fill {
  background-image:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.34) 0 6px, rgba(0, 0, 0, 0) 6px 12px),
    linear-gradient(90deg, #ff2a4d, #ff8a3d);
}

.sr-alarm__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

@keyframes sr-pulse { from { filter: brightness(1); } to { filter: brightness(1.45); } }

/* 房间进度点：只亮不灭（§6.5）。 */
.sr-pips { display: flex; gap: 4px; align-items: center; }
.sr-pips__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(122, 148, 190, 0.5);
  background: transparent;
}
.sr-pips__dot[data-on="true"] { background: var(--sr-mint); border-color: transparent; box-shadow: 0 0 8px rgba(46, 230, 166, 0.6); }
.sr-pips__dot[data-current="true"] { border-color: var(--sr-mint); box-shadow: 0 0 8px rgba(46, 230, 166, 0.5); }

.sr-count { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 15px; }
.sr-count small { font-size: 10px; letter-spacing: 0.1em; color: var(--gs-ink-dim); font-weight: 700; }

/* ============================ 棋盘 ============================ */

/* `play` 分区整块接收指针（热区比画出来的棋盘大，§2.3 的外扩就在这一层），
   棋盘画布本身按格子比例居中——`data-role="board"` 量到的就是这块矩形。 */
.sr-board-zone { position: absolute; touch-action: none; }

.sr-board {
  position: absolute;
  display: block;
  border-radius: 10px;
  touch-action: none;
  image-rendering: auto;
}

/* 第二根手指的灰色涟漪：不夺笔，但必须被看见（§6.1 overlapping-pointers）。 */
.sr-ripple {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 999px;
  border: 2px solid rgba(200, 210, 230, 0.75);
  background: rgba(200, 210, 230, 0.12);
  pointer-events: none;
  opacity: 0;
}
.sr-ripple[data-on="true"] { animation: sr-ripple 420ms var(--gs-ease-out) 1; }
@keyframes sr-ripple {
  from { opacity: 0.9; transform: scale(0.5); }
  to { opacity: 0; transform: scale(1.25); }
}

.sr-hint {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: var(--sr-mint);
  text-align: center;
}

/* ============================ 内嵌横条（非模态） ============================ */

/* 结构上就做不成模态：没有遮罩、不圈焦点、不进弹窗栈。它钉在自己的分区里。 */
/* `display: flex` 不能省：少了它 `flex-direction: row` 一点作用都没有，
   横条会退化成竖着堆的块——教学条在最窄的手机上就是这样把 hint 分区顶穿的。 */
.sr-inline {
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid var(--sr-hairline);
  background: rgba(13, 19, 34, 0.94);
  padding: 6px 10px;
  max-width: 100%;
}

.sr-inline__cells { display: flex; flex: 1 1 auto; justify-content: space-around; gap: 6px; min-width: 0; }
.sr-inline__cell { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.sr-inline__cell b { font-size: 14px; font-weight: 800; }
.sr-inline__cell small { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gs-ink-dim); }
.sr-inline__cell[data-total="true"] b { color: var(--sr-mint); }
.sr-verdict-strip { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sr-verdict-strip .sr-display { font-size: 16px; }

/* 教学气泡：钉在 hint 分区里，结构上不可能压住棋盘。
   高度预算是死的：`hint` 分区只有画布高的 0.09，最窄的手机（320×568）上就是 48px。
   跳过按钮的 44×44 一个像素不许动（平台基线），所以能收的只有横条自己的内边距
   与按钮内部的留白——收的是**变量**，不是 `.gs-*` 选择器。 */
.sr-coach {
  gap: 8px;
  padding: 1px 8px;
  --gs-space-3: 6px;
  --gs-space-5: 12px;
  --gs-text-md: 13px;
}
.sr-coach__body { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.sr-coach__steps { display: flex; gap: 4px; }
.sr-coach__dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(143, 163, 192, 0.4); }
.sr-coach__dot[data-active="true"] { background: var(--sr-mint); }
.sr-coach__text { font-size: 12px; line-height: 1.25; color: var(--gs-ink); flex: 1 1 auto; min-width: 0; }

/* ============================ 浮层 ============================ */

.sr-scrim {
  position: absolute;
  inset: 0;
  background: rgba(5, 3, 13, 0.68);
  backdrop-filter: blur(3px);
}

.sr-panel {
  position: absolute;
  border-radius: 20px;
  border: 1px solid rgba(79, 216, 255, 0.4);
  background: linear-gradient(180deg, rgba(22, 32, 54, 0.97), rgba(14, 20, 36, 0.97));
  box-shadow: 0 0 0 1px rgba(46, 230, 166, 0.12), 0 26px 60px rgba(3, 2, 12, 0.7);
}

.sr-overlay-head { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }

.sr-stats { display: flex; gap: 8px; width: 100%; }
.sr-stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 4px;
  border-radius: 12px;
  background: rgba(9, 13, 26, 0.72);
  border: 1px solid var(--sr-hairline);
}
.sr-stat b { font-size: 15px; font-weight: 800; }
.sr-stat small { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gs-ink-dim); text-align: center; }
.sr-stat[data-tone="gold"] b { color: var(--sr-gold); }
.sr-stat[data-tone="mint"] b { color: var(--sr-mint); }

.sr-rows { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.sr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(9, 13, 26, 0.66);
  border: 1px solid var(--sr-hairline);
  font-size: 13px;
}
.sr-row span { flex: 1 1 auto; min-width: 0; color: var(--gs-ink-soft); }
.sr-row b { font-weight: 800; color: var(--sr-mint); }

/* ============================ 解锁轨道 ============================ */

.sr-track { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.sr-track__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--sr-hairline);
  background: rgba(9, 14, 28, 0.72);
}
.sr-track__row[data-current="true"] { border-color: rgba(46, 230, 166, 0.6); box-shadow: var(--gs-glow-accent); }
.sr-track__badge {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(122, 148, 190, 0.4);
  color: var(--gs-ink-dim);
}
.sr-track__row[data-unlocked="true"] .sr-track__badge { background: var(--sr-mint); color: #05170f; border-color: transparent; }
.sr-track__text { flex: 1 1 auto; min-width: 0; }
.sr-track__text b { display: block; font-size: 12px; }
.sr-track__text small { display: block; font-size: 10px; color: var(--gs-ink-dim); }
.sr-award-progress { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.sr-award-progress__track {
  display: block;
  flex: 1 1 auto;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(143, 163, 192, .45);
  background: rgba(4, 7, 16, .85);
}
.sr-award-progress__fill { display: block; height: 100%; border-radius: inherit; background: var(--sr-amber); }
.sr-tip-list { display: grid; gap: 6px; margin: 0; padding-left: 22px; }

/* 横向的 12 格解锁条（标题页与结算页那一条）。 */
.sr-trackbar { display: flex; gap: 3px; width: 100%; }
.sr-trackbar__cell {
  flex: 1 1 0;
  height: 8px;
  border-radius: 3px;
  background: rgba(122, 148, 190, 0.22);
}
.sr-trackbar__cell[data-on="true"] { background: var(--sr-mint); box-shadow: 0 0 8px rgba(46, 230, 166, 0.5); }

.sr-meter {
  position: relative;
  width: 100%;
  height: 16px;
  border-radius: 999px;
  background: rgba(9, 13, 26, 0.8);
  border: 1px solid var(--sr-hairline);
  overflow: hidden;
}
.sr-meter__fill { position: absolute; inset: 1px auto 1px 1px; border-radius: 999px; background: var(--sr-mint); }
.sr-meter__text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #05170f;
  mix-blend-mode: normal;
}

/* 四格 / 七格的离散进度（每日目标那两条）。 */
.sr-cells { display: flex; gap: 6px; width: 100%; }
.sr-cells__cell {
  flex: 1 1 0;
  height: 16px;
  border-radius: 6px;
  border: 1px solid var(--sr-hairline);
  background: rgba(9, 13, 26, 0.7);
}
.sr-cells__cell[data-on="true"] { background: var(--sr-route); border-color: transparent; box-shadow: 0 0 10px rgba(57, 255, 143, 0.45); }

.sr-week { display: flex; gap: 6px; justify-content: space-between; width: 100%; }
.sr-week__day { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1 1 0; }
.sr-week__disc {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(122, 148, 190, 0.4);
  display: grid;
  place-items: center;
  font-size: 13px;
  color: #05170f;
}
.sr-week__day[data-state="done"] .sr-week__disc { background: var(--sr-mint); border-color: transparent; }
.sr-week__day[data-state="today"] .sr-week__disc { border-color: var(--sr-mint); box-shadow: var(--gs-glow-accent); }
.sr-week__day small { font-size: 9px; color: var(--gs-ink-dim); }

/* ============================ 开关与设置行 ============================ */

.sr-setting { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid rgba(122, 148, 190, 0.14); }
.sr-setting__top { display: flex; align-items: center; gap: 10px; }
.sr-setting__top b { flex: 1 1 auto; font-size: 14px; }

.sr-toggle {
  appearance: none;
  cursor: pointer;
  border: 0;
  padding: 0;
  width: 56px;
  height: 44px;
  min-width: 56px;
  min-height: var(--gs-tap-min);
  border-radius: 999px;
  background: #1c2940;
  border: 1px solid var(--sr-hairline);
  position: relative;
  flex: 0 0 auto;
}
.sr-toggle::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #cfd6e0;
  transition: transform var(--gs-fast) var(--gs-ease-out);
}
.sr-toggle[aria-checked="true"] { background: #22c55e; border-color: transparent; }
.sr-toggle[aria-checked="true"]::after { transform: translateX(24px); background: #ffffff; }

/* 开关本体与外层都保持至少 44px，真实命中区和视觉控件不会脱节。 */
.sr-toggle-hit {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--gs-tap-min);
  min-width: var(--gs-tap-min);
}

.sr-notice {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(245, 166, 35, 0.55);
  background: rgba(60, 38, 10, 0.6);
  color: #ffd9a0;
  font-size: 11px;
  line-height: 1.35;
}

/* ============================ 色板与图表 ============================ */

.sr-swatches { display: grid; gap: 8px; width: 100%; }
.sr-swatches[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
.sr-swatches[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

.sr-swatch {
  appearance: none;
  cursor: pointer;
  padding: 6px 4px 7px;
  border-radius: 12px;
  border: 1px solid #2a3560;
  background: #12162c;
  color: var(--gs-ink-dim);
  font: inherit;
  font-size: 9px;
  min-height: var(--gs-tap-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
}
.sr-swatch__dot { width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.22); }
.sr-swatch__cloak {
  width: 36px;
  height: 34px;
  display: block;
  border-radius: 50% 50% 18% 18%;
  background: linear-gradient(135deg, var(--swatch-trim), var(--swatch-cloak) 38%, #090b18 140%);
  clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .55));
}
.sr-swatch__route { position: relative; display: block; width: 40px; height: 34px; }
.sr-swatch__route i { position: absolute; display: block; border-radius: 999px; background: var(--swatch-line); box-shadow: 0 0 7px var(--swatch-line); }
.sr-swatch__route i:nth-child(1) { left: 2px; bottom: 4px; width: 20px; height: 5px; }
.sr-swatch__route i:nth-child(2) { left: 18px; bottom: 4px; width: 5px; height: 18px; }
.sr-swatch__route i:nth-child(3) { left: 18px; bottom: 17px; width: 20px; height: 5px; }
.sr-swatch[aria-pressed="true"] { border-color: var(--sr-mint); box-shadow: var(--gs-glow-accent); color: var(--gs-ink); }
.sr-swatch[aria-disabled="true"] { opacity: 0.55; }

.sr-record-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
  min-height: 88px;
  padding: 12px 14px;
  border: 1px solid rgba(122, 148, 190, .45);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(19, 35, 58, .96), rgba(9, 15, 31, .96));
  box-shadow: var(--gs-shadow-card);
}
.sr-record-card__icon { grid-row: 1 / 3; width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(79, 216, 255, .35)); }
.sr-record-card__value { grid-column: 3; grid-row: 1 / 3; font-size: 30px; color: var(--sr-mint); }

.sr-chart { display: flex; align-items: flex-end; gap: 6px; height: 92px; width: 100%; padding: 0 2px; }
.sr-chart__bar { flex: 1 1 0; border-radius: 5px 5px 2px 2px; background: rgba(201, 197, 214, 0.55); min-height: 4px; }
.sr-chart__bar[data-latest="true"] { background: var(--sr-mint); box-shadow: 0 0 12px rgba(46, 230, 166, 0.45); }

.sr-sharecard { width: 100%; border-radius: 12px; border: 1px solid var(--sr-hairline); display: block; }

/* ============================ 手机横屏 ============================
 * 唯一的分档，条件写死成 `(orientation: landscape) and (max-height: 560px)`：
 * 那是**手机横过来**，不是桌面。560 的唯一真值是 shared/phone-canvas.json，
 * 与画布锁定的出口高度是同一个数——写成别的数，中间那一段高度会两套规则都不管。
 * 这里只收字号与内距，**分区几何仍然由 ui.mjs 按画布方向套用**。 */
@media (orientation: landscape) and (max-height: 560px) {
  .sr-title { font-size: 22px; }
  .sr-hero { font-size: 38px; }
  .sr-display { font-size: 17px; }
  .sr-sub { font-size: 11px; }
  .sr-logo { width: 52px; height: 52px; }
  .sr-hud { flex-direction: column; align-items: stretch; gap: 8px; }
  .sr-hud__stack { flex: 0 0 auto; }
  .sr-alarm { height: 18px; }
  .sr-nav { flex-wrap: wrap; }
  .sr-nav__disc { width: 38px; height: 38px; }
  .sr-chart { height: 64px; }
}

/* ============================ 矮画布 ============================
 * 站点在最矮的常见手机（375×667）上交给游戏的框是 **342×403**：分区比例不变，
 * 于是 `help` 的抬头只剩 30px、`hint` 只剩 33px——**装不下一个 44×44 的按钮**。
 *
 * 处置照 2026-08-25 的平台基线走，两条都不越界：
 *   ① 收的是**变量**（字号、内距），`--gs-tap-min` 一个像素没动——44×44 是基线，
 *      不许为了塞进 33px 的分区去破它；
 *   ② 收紧之后还装不下的，**分区自己滚**（"边界不动，内容滚"）。分区几何是 S2
 *      冻结的，这里一格没挪。
 * **棋盘那一块分区除外**：它整块是 §2.1 唯一操作的热区，一旦变成滚动容器就会
 * 把拉线的指针吃掉。它也不需要——画布本来就是按分区尺寸算出来的，永远装得下。
 *
 * 560px 的唯一真值是 shared/phone-canvas.json，与横屏那一档同一个数。 */
@media (max-height: 560px) {
  :root {
    --gs-text-md: 13px;
    --gs-text-sm: 12px;
    --gs-space-3: 8px;
    --gs-space-5: 12px;
    --sr-safe-top: max(env(safe-area-inset-top, 0px), 6px);
    --sr-safe-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
  }

  .sr-zone:not(.sr-board-zone) {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .sr-zone:not(.sr-board-zone)::-webkit-scrollbar { width: 0; height: 0; }

  /* 抬头收的是关闭键**周围**的留白，键本身仍是 44×44。 */
  .sr-overlay-head { gap: 6px; }
  .sr-coach { padding: 0 6px; }
}

/* 减少动态：只去掉「动」，判定信息照常渲染（锥体、两级预告、虚影、到达拍号、
   凹口红色描边都画在画布上，不受这里影响）。 */
:root[data-reduced-motion="on"] .sr-alarm[data-level="critical"] .sr-alarm__fill { animation: none; }
:root[data-reduced-motion="on"] .sr-ripple[data-on="true"] { animation: none; opacity: 0.75; }
:root[data-reduced-motion="on"] .sr-loading-thief { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .sr-alarm[data-level="critical"] .sr-alarm__fill { animation: none; }
  .sr-ripple[data-on="true"] { animation: none; opacity: 0.75; }
  .sr-loading-thief { animation: none; }
}