/*
 * 磁力快递 · 主题与分区层。
 *
 * 两条纪律：
 * ① **只覆盖组件库的变量，不覆盖 `.gs-*` 选择器。** 覆盖选择器会把组件的可用性
 *    （44×44 触控下限、安全区、焦点圈定）一起改坏，而那些东西坏了在手机上看不出来。
 *    本作自己的东西一律用 `mc-` 前缀，和组件库井水不犯河水。
 * ② **只做手机端。** 全文没有一条不带 `max-height` 的 `@media (min-width: …)`——
 *    那种写法是在给桌面另写一套版式，而桌面跑的是共用库锁出来的一块手机画布
 *    （`shared/game-shell/ui/ui.css` 末尾「手机画布锁定」），拿桌面的尺子量手机画布，
 *    分区当场被撑破。手机横屏是手机的一个朝向，写成 `(orientation: landscape) and
 *    (max-height: 560px)` 这一档；560 来自 `shared/phone-canvas.json`，三款游戏同一个数。
 *
 * 分区（`.mc-zone`）的 0~1 坐标是**扣掉安全区之后**的比例，逐条来自 `game.config.json.zones`，
 * 而那份又逐条镜像 S2 冻结的 `art/SCREEN_SPEC.json`。位置由 JS 写成内联 style，
 * 这里只管它们长什么样。
 */

:root {
  /* ---- 组件库令牌：换成本作的霓虹玩具街机配色 ---- */
  --gs-ink: #EAF2FF;
  --gs-ink-soft: rgba(198, 214, 245, 0.82);
  --gs-ink-dim: rgba(168, 186, 224, 0.6);
  --gs-ink-on-light: #0B1030;

  --gs-surface: rgba(20, 26, 68, 0.86);
  --gs-surface-raised: rgba(32, 40, 92, 0.94);
  --gs-surface-sunken: rgba(10, 14, 42, 0.7);
  --gs-hairline: rgba(120, 158, 240, 0.28);

  --gs-accent: #4BD8F5;
  --gs-accent-2: #2C7FE0;
  --gs-gold: #FFC93A;
  --gs-danger: #FF5C5C;

  --gs-radius-sm: 10px;
  --gs-radius-md: 16px;
  --gs-radius-lg: 22px;

  --gs-glow-accent: 0 0 0 1px rgba(75, 216, 245, 0.55), 0 0 22px rgba(75, 216, 245, 0.32);
  --gs-glow-gold: 0 0 22px rgba(255, 201, 58, 0.5);
  --gs-shadow-card: 0 14px 34px rgba(4, 6, 24, 0.55);
  --gs-shadow-button: 0 5px 0 rgba(4, 6, 24, 0.5), 0 10px 20px rgba(4, 6, 24, 0.45);
  --gs-shadow-press: 0 2px 0 rgba(4, 6, 24, 0.5), 0 5px 10px rgba(4, 6, 24, 0.45);

  --gs-cta: linear-gradient(180deg, #6FE7FF 0%, #2FB8E8 55%, #1E86C4 100%);

  /* ---- 本作自己的令牌 ---- */
  --mc-red: #E23B2C;
  --mc-blue: #2C7FE0;
  --mc-plate: linear-gradient(180deg, rgba(38, 48, 108, 0.95), rgba(18, 24, 62, 0.95));
  --mc-plate-line: rgba(120, 158, 240, 0.32);
  --mc-frame-gold: linear-gradient(180deg, #FFD463, #C98A16);
  --mc-pad: clamp(8px, 2.4vw, 14px);
  /* 分区的**纵向**内边距与行距单独一条：分区高度是 SCREEN_SPEC 冻结的比例，
     矮分区（结算页的 reason 只有画布高的 8%）里，横向那点留白照搬到纵向就是溢出。
     跟的是 `vh` 不是 `vw`：手机横屏时视口很宽而很矮，按宽度算的留白会把矮分区撑爆。 */
  --mc-pad-y: clamp(4px, 0.8vh, 10px);
  --mc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #05070f;
  color: var(--gs-ink);
  font-family: var(--mc-font);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #070B22;
}

/* 安全区扣完之后剩下的那块可视矩形。分区的 0~1 全部相对它。 */
#mc-safe {
  position: absolute;
  top: var(--gs-safe-top);
  right: var(--gs-safe-right);
  bottom: var(--gs-safe-bottom);
  left: var(--gs-safe-left);
  overflow: hidden;
}

#mc-canvas {
  position: absolute;
  inset: 0;
  /* `<canvas>` 是替换元素：绝对定位下 `inset: 0` **不会**把它撑开，
     `width: auto` 取的是内在尺寸（`canvas.width` = CSS px x dpr）。
     少了下面两行，dpr=2 的屏上画布盒子就是安全区的 2 倍，只露出左上四分之一。 */
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.mc-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 浮层宿主铺满安全区，但空着时不许接管命中测试：它排在内容层后面，
   否则顶栏与结算主按钮在 elementFromPoint 下全部变成"被盖住"。
   真正要挡住背景的是浮层根节点自己（.mc-overlay 带 scrim），所以它把指针收回来。 */
.mc-layer--overlay {
  pointer-events: none;
}

.mc-layer--overlay > * {
  pointer-events: auto;
}

/* ---- 分区 ---- */

.mc-zone {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--mc-pad-y);
  padding: var(--mc-pad-y) var(--mc-pad);
}

.mc-zone[data-scroll='y'] {
  overflow-y: auto;
  justify-content: flex-start;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* 按压区：整块画布。后果画在画布上，所以它必须自报 data-canvas-driven，
   否则走查靠 DOM 指纹看不见反应，会把它报成假控件（P21 / A21）。 */
.mc-press {
  position: absolute;
  z-index: 2;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.mc-press:focus-visible {
  outline: 2px solid var(--gs-accent);
  outline-offset: -4px;
}

/* ---- HUD ---- */

.mc-hud {
  display: flex;
  gap: var(--mc-pad);
  align-items: stretch;
  width: 100%;
  min-height: 0;
}

.mc-hud--portrait {
  flex-direction: row;
}

.mc-hud--landscape {
  flex-direction: column;
  overflow: hidden;
}

.mc-hud__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.mc-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--gs-radius-sm);
  background: var(--mc-plate);
  border: 1px solid var(--mc-plate-line);
  min-width: 0;
}

.mc-chip__label {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gs-ink-dim);
  white-space: nowrap;
}

.mc-chip__value {
  font-size: clamp(14px, 4vw, 20px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--gs-ink);
  white-space: nowrap;
}

.mc-chip__value--gold {
  color: var(--gs-gold);
}

.mc-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.mc-progress__track {
  display: flex;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  height: 12px;
  padding: 2px;
  border-radius: 6px;
  background: rgba(8, 12, 34, 0.8);
  border: 1px solid var(--mc-plate-line);
  overflow: hidden;
}

.mc-progress__cell {
  flex: 1 1 0;
  min-width: 1px;
  border-radius: 1px;
  background: rgba(120, 150, 220, 0.18);
}

.mc-progress__cell[data-on='true'] {
  background: linear-gradient(180deg, #7FE9FF, #2FB8E8);
  box-shadow: 0 0 6px rgba(75, 216, 245, 0.7);
}

.mc-progress[data-stalled='true'] .mc-progress__cell[data-on='true'] {
  background: rgba(170, 180, 205, 0.55);
  box-shadow: none;
}

/* 横屏：进度条**竖着画**（SCREEN_SPEC screen-05），仍然是 24 格。 */
.mc-progress[data-axis='y'] {
  flex: 1 1 auto;
  min-height: 0;
}

.mc-progress[data-axis='y'] .mc-progress__track {
  flex-direction: column-reverse;
  width: 16px;
  height: 100%;
  flex: 1 1 auto;
}

.mc-seals {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-wrap: nowrap;
}

/* 横屏：五枚磁封竖排两列。 */
.mc-seals[data-axis='y'] {
  flex-wrap: wrap;
  max-width: 44px;
}

.mc-seals canvas {
  display: block;
  width: 18px;
  height: 21px;
}

.mc-forecast {
  display: flex;
  gap: 4px;
  align-items: center;
}

.mc-forecast canvas {
  display: block;
  border-radius: 6px;
  background: rgba(10, 14, 40, 0.7);
  border: 1px solid var(--mc-plate-line);
}

.mc-forecast__slot[data-pulse='true'] canvas {
  box-shadow: var(--gs-glow-gold);
}

/* 横屏：三格预告竖排，**最上那格最大**（对应竖屏的「最左最大」）。 */
.mc-forecast[data-axis='y'] {
  flex-direction: column;
  align-items: flex-start;
}

.mc-brandmark {
  display: block;
  width: clamp(48px, 16vw, 96px);
  height: auto;
  align-self: center;
}

/* ---- 通用卡片与文字 ---- */

.mc-card {
  background: var(--mc-plate);
  border: 1px solid var(--mc-plate-line);
  border-radius: var(--gs-radius-md);
  padding: var(--mc-pad);
  box-shadow: var(--gs-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mc-card[data-selected='true'] {
  border-color: var(--gs-gold);
  box-shadow: var(--gs-glow-gold);
}

.mc-card[data-locked='true'] {
  filter: saturate(0.35);
}

.mc-title {
  font-size: clamp(18px, 5.6vw, 30px);
  font-weight: 900;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--gs-ink);
  text-shadow: 0 2px 0 rgba(4, 6, 24, 0.6);
}

.mc-title--brand {
  font-size: clamp(28px, 9vw, 52px);
  line-height: 0.95;
  color: var(--mc-red);
  text-shadow: 0 3px 0 rgba(4, 6, 24, 0.7), 0 0 22px rgba(226, 59, 44, 0.45);
}

.mc-title--brand b {
  display: block;
  color: var(--gs-accent-2);
  text-shadow: 0 3px 0 rgba(4, 6, 24, 0.7), 0 0 22px rgba(44, 127, 224, 0.5);
}

.mc-sub {
  margin: 0;
  font-size: clamp(11px, 3.2vw, 14px);
  color: var(--gs-ink-soft);
  line-height: 1.35;
}

.mc-body {
  margin: 0;
  font-size: clamp(12px, 3.4vw, 15px);
  line-height: 1.45;
  color: var(--gs-ink-soft);
}

.mc-hero {
  font-size: clamp(30px, 11vw, 60px);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gs-gold);
  text-shadow: 0 3px 0 rgba(4, 6, 24, 0.7), var(--gs-glow-gold);
}

.mc-hero[data-tone='plain'] {
  color: var(--gs-ink);
  text-shadow: 0 3px 0 rgba(4, 6, 24, 0.7), 0 0 22px rgba(140, 180, 255, 0.4);
}

.mc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mc-pad);
  min-width: 0;
}

.mc-row--wrap {
  flex-wrap: wrap;
}

/* 浮层底部那一行并排的次要动作。布局本身来自组件库的 `.gs-segmented`
   （等分 + 允许收缩 + 收窄内边距），这里只把字号压到能在 375 宽上三格并排不折行的档，
   并且**不碰任何 `.gs-*` 选择器的可用性属性**（高度下限、焦点圈、触控间距一律照旧）。 */
.mc-actionrow {
  width: 100%;
  /* 只改**令牌**，不写 `.gs-btn { … }`：按钮的高度下限、焦点圈、触控间距一个都不动。

     调的必须是 `--gs-text-sm` 而不是 `--gs-text-md`。
     `.gs-btn` 的字号确实读 `--gs-text-md`，但 `.gs-segmented .gs-btn` 又把它
     覆盖成了 `var(--gs-text-sm)`（`shared/game-shell/ui/ui.css`），所以原来那行
     `--gs-text-md` 在这一行里**一个字号都没改到**——写了等于没写。
     后果是走查在 375×812 报 `zone-overflow`：三格按 14px 排不下 304.5px，
     `.gs-segmented` 的 `flex-wrap` 接手换成两行（44 → 96），
     `panel-actions` 于是要 149px 而分区只有 138px，「Quit to Title」被裁掉一截。

     `--gs-space-3` 是 `.gs-segmented .gs-btn` 的 `padding-inline`，它决定
     `min-width: fit-content` 这条**不换行下限**。按钮宽度由 `flex: 1 1 0` 等分决定，
     所以收窄它只降低换行阈值，不缩可点区域（三格各约 96px，远高于 44px 下限）。

     取值按八个语种里最宽的一份算（`tools/probe_actionrow_locales.mjs`：
     pt-BR 折算 41 个拉丁字宽，最宽）：375 宽下 11.25px 字号 + 6px 内边距需要
     约 285px，可用 304.5px。11px 是下限，宽画布仍然回到 14px。 */
  --gs-text-sm: clamp(11px, 3vw, 14px);
  --gs-space-3: 6px;
}

.mc-grid {
  display: grid;
  gap: var(--mc-pad);
  min-width: 0;
}

.mc-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mc-muted {
  color: var(--gs-ink-dim);
}

.mc-num {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* ---- 结算页 ---- */

/*
 * 六行拆解要在 27% 的分区里**装得下**，不能靠滚动。
 * 所以行是 `flex: 1 1 0` 的：分区矮了行跟着矮，`scrollHeight` 永远等于 `clientHeight`，
 * 走查的 `zone-overflow` 与剧本的 `assertZonesFit` 都不会被触发。
 * 小手机（320×568）上这一段只有 153px，六行按固定行高排会溢出 13px——
 * 那正是"文字被裁掉一截"的来源。
 */
.mc-breakdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

.mc-breakdown__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 8px;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(120, 158, 240, 0.16);
  font-size: clamp(11px, 3.2vw, 15px);
  line-height: 1.1;
}

.mc-breakdown__row[data-zero='true'] {
  filter: saturate(0.2);
  color: var(--gs-ink-dim);
}

.mc-breakdown__row[data-total='true'] {
  border-bottom: 0;
  border-top: 2px solid var(--mc-plate-line);
  font-weight: 900;
  color: var(--gs-gold);
}

/* ---- 结算页：归因两行、四格统计、解锁轨道 ----
   这三块都住在 SCREEN_SPEC 冻结的矮分区里（reason 8%、stats 13%），
   所以排版按"分区高度"定，不按"看着舒服"定：行距压到 1.2 以内、
   四格统计用**不换行**的四列栅格（换行就是两排 = 分区高度翻倍），
   解锁轨道的标题、进度条、剩余段数并成一行。 */
.mc-zone[data-zone='reason'] {
  gap: 2px;
}

.mc-zone[data-zone='reason'] .mc-body {
  font-size: clamp(11px, 3vw, 14px);
  line-height: 1.2;
}

.mc-zone[data-zone='reason'] .mc-sub {
  font-size: clamp(10px, 2.6vw, 12px);
  line-height: 1.18;
}

.mc-statgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}

.mc-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 3px 5px;
  border-radius: var(--gs-radius-sm);
  background: var(--mc-plate);
  border: 1px solid var(--mc-plate-line);
}

.mc-stat img {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.mc-stat__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.mc-stat__text .mc-chip__label {
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mc-stat__text .mc-chip__value {
  font-size: clamp(12px, 3.4vw, 16px);
  line-height: 1.1;
}

.mc-unlockrow {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.mc-unlockrow .mc-progress {
  flex: 1 1 auto;
}

.mc-breakdown__value {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--gs-gold);
}

/* ---- 浮层 ---- */

.mc-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.mc-overlay__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 22, 0.72);
  backdrop-filter: blur(2px);
}

.mc-overlay__panel {
  position: absolute;
  border-radius: var(--gs-radius-lg);
  background: linear-gradient(180deg, rgba(26, 34, 84, 0.97), rgba(14, 18, 50, 0.97));
  border: 2px solid rgba(120, 190, 255, 0.55);
  box-shadow: 0 0 26px rgba(75, 216, 245, 0.28), var(--gs-shadow-card);
}

/* ---- 开关行 ---- */

.mc-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--gs-tap-min);
  padding: 4px 8px;
  border: 0;
  border-radius: var(--gs-radius-sm);
  background: transparent;
  color: var(--gs-ink);
  font: inherit;
  font-size: clamp(12px, 3.6vw, 16px);
  text-align: left;
  cursor: pointer;
}

.mc-toggle + .mc-toggle {
  border-top: 1px solid rgba(120, 158, 240, 0.16);
}

.mc-toggle__icon {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  opacity: 0.9;
}

.mc-toggle__label {
  flex: 1 1 auto;
  min-width: 0;
}

.mc-toggle__knob {
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: rgba(10, 14, 40, 0.9);
  border: 1px solid var(--mc-plate-line);
  position: relative;
  transition: background var(--gs-normal) var(--gs-ease-out);
}

.mc-toggle__knob::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #9FB0D8;
  transition: transform var(--gs-normal) var(--gs-ease-out);
}

.mc-toggle[aria-pressed='true'] .mc-toggle__knob {
  background: linear-gradient(180deg, #6FE7FF, #2FB8E8);
}

.mc-toggle[aria-pressed='true'] .mc-toggle__knob::after {
  transform: translateX(20px);
  background: #0B1030;
}

/* ---- 列表 ---- */

.mc-list {
  display: flex;
  flex-direction: column;
  gap: var(--mc-pad);
  width: 100%;
}

.mc-item {
  display: flex;
  align-items: center;
  gap: var(--mc-pad);
  /* `width: 100%` 配 `padding` + `border` 时必须是 border-box，否则这一条的实际宽度是
     「分区内容宽 + 2×--mc-pad + 2×1px」，成就列表在 375 宽上就横向多出 20px，
     右边那一列进度数字（0/1）被 `overflow:hidden` 齐刷刷切掉——走查报的
     `zone-overflow ... 内容比它宽 11px` 就是这一条。本作没有全局的 `*{box-sizing}`，
     所以每一个「显式给了宽度又有内边距」的块都要自己声明。 */
  box-sizing: border-box;
  width: 100%;
  min-height: var(--gs-tap-min);
  padding: var(--mc-pad);
  border-radius: var(--gs-radius-md);
  border: 1px solid var(--mc-plate-line);
  background: var(--mc-plate);
  color: var(--gs-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mc-item[data-selected='true'] {
  border-color: var(--gs-gold);
  box-shadow: var(--gs-glow-gold);
}

.mc-item[data-locked='true'] {
  filter: saturate(0.4);
}

.mc-item canvas {
  display: block;
  flex: 0 0 auto;
  border-radius: var(--gs-radius-sm);
}

.mc-item__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mc-item__name {
  font-weight: 800;
  font-size: clamp(12px, 3.6vw, 16px);
}

.mc-item__lock {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  opacity: 0.75;
}

.mc-skin-card {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
}

.mc-skin-thumb {
  display: block;
  width: 100%;
  min-height: 54px;
  max-height: 82px;
  object-fit: contain;
  border-radius: var(--gs-radius-sm);
  background: radial-gradient(circle, rgba(75, 216, 245, 0.18), rgba(10, 14, 42, 0.35) 68%);
}

.mc-skin-thumb--small {
  width: 34px;
  height: 34px;
  min-height: 34px;
  flex: 0 0 34px;
}

/* ---- 每日路单 ---- */

/* 连送天数的 14 颗点。设计稿（screen-13）画的是一排小圆点跟在「DAY 4」后面，
   直径大约是画布宽的 1/27。原来写成「7 列等分 + 正方形」，于是每颗点的直径变成
   `分区宽 ÷ 7`（375 宽上就是 47px），两行叠起来 99px——`streak` 分区总共才 138px，
   一个连送指示就把它吃掉四分之三，后面的解锁行整块被裁。
   所以直径写成固定值，让它们自己排成一行（14×12 + 13×4 = 220px，375 宽上排得下）。 */
.mc-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
}

.mc-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(140, 170, 230, 0.45);
  background: transparent;
}

.mc-dot[data-state='on'] {
  background: var(--gs-gold);
  box-shadow: var(--gs-glow-gold);
  border-color: var(--gs-gold);
}

.mc-dot[data-state='today'] {
  background: linear-gradient(90deg, var(--gs-gold) 50%, transparent 50%);
  border-color: var(--gs-gold);
}

/* 三格皮肤解锁预告。设计稿（screen-13）把它画成**一行三格**，格里是「DAY 3 / ARC SKIN」
   两行小字 + 一张小图。原来用 `.mc-row--wrap`：每格的标签是 `white-space: nowrap` 的
   一整句，三格加起来远宽过分区，于是折成三行、约 150px 高，`streak` 分区（138px）
   当场被裁掉一大半——第二格的下半截和第三格整格都看不见。
   改成固定三列，标签允许折行，格子自己收缩。 */
.mc-unlockchips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.mc-unlockchips .mc-chip {
  min-width: 0;
  gap: 4px;
  padding: 3px 6px;
}

.mc-unlockchips .mc-chip__label {
  white-space: normal;
  line-height: 1.15;
  min-width: 0;
}

.mc-unlockchips .mc-skin-thumb--small {
  width: 26px;
  height: 26px;
  min-height: 26px;
  flex: 0 0 26px;
}

.mc-unlockchips .mc-item__lock {
  width: 14px;
  height: 14px;
}

.mc-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

.mc-bars__col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  height: 100%;
}

.mc-bars__bar {
  width: 100%;
  flex: 1 1 auto;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #A7E9FF, #3FB1E6);
  align-self: flex-end;
}

.mc-bars__bar[data-empty='true'] {
  background: transparent;
  border: 1px dashed rgba(140, 170, 230, 0.5);
}

.mc-bars__tick {
  font-size: 9px;
  color: var(--gs-ink-dim);
  white-space: nowrap;
}

/* ---- 教学横条挂载点 ---- */

.mc-coach {
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity var(--gs-normal) var(--gs-ease-out);
}

.mc-coach[data-visible='false'] {
  opacity: 0;
}

/* ---- 分享卡 ---- */

.mc-sharecard {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  border-radius: var(--gs-radius-md);
  border: 1px solid var(--mc-plate-line);
  object-fit: contain;
}

/* ---- 播报（节流 1 s，只播分数 / 磁封 / 班次进度 / 预告变化）---- */

.mc-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * 手机横屏——**手机的一个朝向，不是桌面**。
 * 560 是 `shared/phone-canvas.json` 的 `shortViewportMaxHeightPx`：
 * 高于它由共用库把画布锁成竖的，低于它满屏走横屏分区。三款游戏必须用同一个数，
 * 否则中间那一段高度会两套规则都不管。
 */
@media (orientation: landscape) and (max-height: 560px) {
  :root {
    --mc-pad: 8px;
  }

  .mc-title {
    font-size: clamp(15px, 4.2vh, 24px);
  }

  .mc-title--brand {
    font-size: clamp(20px, 7vh, 36px);
  }

  .mc-hero {
    font-size: clamp(28px, 12vh, 48px);
  }

  .mc-seals canvas {
    width: 15px;
    height: 18px;
  }

  .mc-chip__value {
    font-size: clamp(12px, 4vh, 18px);
  }
}

/* 减少动态：关掉本作自己的动画。**判定时长一个都不改**（§6.1、§10.5）。 */
@media (prefers-reduced-motion: reduce) {
  .mc-coach,
  .mc-toggle__knob,
  .mc-toggle__knob::after {
    transition: none;
  }
}

:root[data-reduced-motion='on'] .mc-coach,
:root[data-reduced-motion='on'] .mc-toggle__knob,
:root[data-reduced-motion='on'] .mc-toggle__knob::after {
  transition: none;
}