#dock .slot {
  padding: 0 !important;
  overflow: hidden;
  border-radius: 10px;
}

/* Δ31a / FR-049 §19 ③④⑤: 三消「纯卡牌自身力学」四段演出
 *
 * 取代 Δ30a 的「三合一磁吸 + 闪白膨胀」单套关键帧——那套让三张牌做**同样**的
 * 动作（都 scale 1.12→1.30），既没有「先被压扁」的受压感，也无法只让中心牌回弹。
 * 本版按角色拆成两套关键帧 + 一条托盘微震：
 *
 *   chip-rush   （左右两张，0~70ms）  强初速滑行猛撞中心牌 → 到位 1 帧内隐去
 *   chip-impact （中心那张，0~210ms） 静止 → 挤压 → 猛烈回弹 → 峰值保持 → 加速坍缩
 *   chip-solo   （可用槽位不足 3 个） 原位闪白 → 直接缩至 0（退化，不抛错）
 *   dock-hit    （#dock 整体，130~220ms）受击微震，仅纵向 2.0px
 *
 * 样式边界（SC-017 ⑤ / SC-021 ③）：
 *   · 位移 / 缩放 / 闪白 / 透明度 **只作用于槽内 `.dock-chip`**；
 *     `.slot` 槽框的 border / padding / background / border-radius 一字未改，
 *     槽框本体也**不位移、不改形**（MUST NOT 把 transform 写在 .slot 上）。
 *   · `#dock .slot { overflow: hidden }` 会把 1.32× 膨胀与横向猛撞裁成
 *     「原地放大」，故 `.slot-shattering` 仍必须把 overflow 覆盖为 visible。
 *   · 选择器特异性 MUST >= 1,3,0
 *     （`#dock .slot.slot-shattering[data-collapse-role=...] .dock-chip`）——
 *     压得住 `.slot.has-tile` 的落座动画 dock-seat（0,2,0）。
 *
 * `--suck-dx` 由 main.js 一次性写入 `.dock-chip` 内联样式（实时 rect 差值），
 * MUST NOT 逐帧改样式、MUST NOT 起 rAF 驱动 CSS。
 * ========================================================= */
#dock .slot.slot-shattering,
#dock .slot.slot-shattering.has-tile,
#dock .slot.slot-shattering.is-filled,
#dock .slot.slot-shattering:not(:empty) {
  position: relative;
  overflow: visible;
}

/* ① 左右两张：滑行猛撞
 * 缓动 cubic-bezier(.12,.72,.22,1) = 强初速 + 丝滑收束（前 30% 时长完成 >= 70% 位移）。
 * ⚠ MUST NOT 用 cubic-bezier(.42,0,.9,.6)——先慢后快 = 「被吸过去」，
 * 与「撞过去」语义相反（那是 Δ30 的取值，方向反了）。 */
#dock .slot.slot-shattering[data-collapse-role="side"] .dock-chip {
  --suck-dx: 0px;
  animation: chip-rush 210ms linear forwards;
  will-change: transform, opacity;
  transform-origin: 50% 50%;
}
@keyframes chip-rush {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    animation-timing-function: cubic-bezier(.12, .72, .22, 1);
  }
  33.3% {
    /* 70ms：贴到中心牌（位移全部走完） */
    transform: translate3d(var(--suck-dx), 0, 0) scale(1);
    opacity: 1;
    animation-timing-function: linear;
  }
  39% {
    /* 到位后 1 帧内的压缩回弹（约 2px 等效）并隐去——三张牌合体的视觉完成 */
    transform: translate3d(var(--suck-dx), 0, 0) scale(.985);
    opacity: 0;
  }
  100% {
    transform: translate3d(var(--suck-dx), 0, 0) scale(.985);
    opacity: 0;
  }
}

/* ② 中心那张：挤压 → 猛烈回弹 → 峰值保持 → 加速坍缩（整段 210ms）
 * `position: relative` 仅为 `.dock-chip::after` 纯白覆盖层提供定位上下文，
 * MUST NOT 改本体的 background / border / border-radius / box-shadow。 */
#dock .slot.slot-shattering[data-collapse-role="center"] .dock-chip {
  animation: chip-impact 210ms linear forwards;
  will-change: transform, filter, opacity;
  transform-origin: 50% 50%;
  position: relative;
}
/* ④ 纯白覆盖层：MUST 用伪元素 + opacity，MUST NOT 只用 filter: brightness()
 * （brightness 单独顶替闪白会把花色图案一起过曝，峰值对比读不出来）。
 * 与 brightness 同帧达峰（误差 <= 1 帧），130ms 前回落至 <= 0.15。 */
#dock .slot.slot-shattering[data-collapse-role="center"] .dock-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #FFFFFF;
  opacity: 0;
  pointer-events: none;
  animation: chip-flash 210ms linear forwards;
}
@keyframes chip-impact {
  0% {
    /* 0~70ms 静止等待左右两张撞上来 */
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1);
    opacity: 1;
    animation-timing-function: linear;
  }
  33.3% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1);
    opacity: 1;
    animation-timing-function: cubic-bezier(.2, .9, .3, 1);
  }
  45.2% {
    /* 70~95ms 挤压：横向压扁 + 纵向拉伸（非等比 —— 「受压」的唯一可读表达） */
    transform: translate3d(0, 0, 0) scale(.92, 1.08);
    filter: brightness(2.1);
    opacity: 1;
    animation-timing-function: cubic-bezier(.18, .92, .3, 1);
  }
  54.8% {
    /* 95~115ms 猛烈回弹至峰值（MUST NOT > 1.40） */
    transform: translate3d(0, 0, 0) scale(1.32);
    filter: brightness(1.34);
    opacity: 1;
    animation-timing-function: linear;
  }
  61.9% {
    /* 115~130ms 峰值保持，亮度 / 覆盖层开始回落 */
    transform: translate3d(0, 0, 0) scale(1.32);
    filter: brightness(1.15);
    opacity: 1;
    animation-timing-function: cubic-bezier(.55, 0, .85, .35);
  }
  100% {
    /* 130~210ms 加速坍缩（起步慢、末端极快） */
    transform: translate3d(0, 0, 0) scale(0);
    filter: brightness(1.05);
    opacity: 0;
  }
}
@keyframes chip-flash {
  0% {
    opacity: 0;
  }
  33.3% {
    opacity: 0;
  }
  45.2% {
    opacity: .70;
  }
  61.9% {
    opacity: .15;
  }
  100% {
    opacity: 0;
  }
}

/* ③ 退化（可用槽位不足 3 个 / 并发异常）：原位闪白 + 直接缩至 0。
 * MUST NOT 抛错、MUST NOT 跳过演出——时长仍 210ms。 */
#dock .slot.slot-shattering[data-collapse-role="solo"] .dock-chip {
  animation: chip-solo 210ms linear forwards;
  will-change: transform, filter, opacity;
  transform-origin: 50% 50%;
}
@keyframes chip-solo {
  0% {
    transform: scale(1);
    filter: brightness(1);
    opacity: 1;
    animation-timing-function: cubic-bezier(.2, .9, .3, 1);
  }
  33.3% {
    transform: scale(.94);
    filter: brightness(2.1);
    opacity: 1;
    animation-timing-function: cubic-bezier(.55, 0, .85, .35);
  }
  100% {
    transform: scale(0);
    filter: brightness(1.05);
    opacity: 0;
  }
}

/* ⑤ 托盘受击微震（130ms 起，<= 90ms，仅纵向）
 * 幅度裁定：只用纵向、设计值 2.0px —— 横向不动 → `--suck-dx` 与飞行终点 X
 * 完全不受影响；纵向 2px 恰好卡在 flight-smoke 的「落定偏差 <= 2px」容差内。
 * MUST NOT 调到 2.5px 以上；MUST NOT 用 margin / top / left 做位移
 * （布局盒必须逐项不变）；MUST NOT 复用 shakeBoard（那是「受阻反弹」语义）。 */
#dock.dock-hit {
  animation: dock-hit 90ms ease-out;
}
@keyframes dock-hit {
  0% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(0, -2px, 0);
  }
  55% {
    transform: translate3d(0, 1px, 0);
  }
  80% {
    transform: translate3d(0, -0.5px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 降级（§19 ⑩）：零滑行 / 零挤压 / 零回弹 / 零微震，只留原位闪白 + 直接缩至 0。
   * 总时长**仍为 210ms**——MUST NOT 因降级改变结算节奏（否则与 sfx_shatter 打架）。 */
  #dock .slot.slot-shattering[data-collapse-role="side"] .dock-chip,
  #dock .slot.slot-shattering[data-collapse-role="center"] .dock-chip,
  #dock .slot.slot-shattering[data-collapse-role="solo"] .dock-chip {
    animation: chip-static 210ms linear forwards;
  }
  #dock .slot.slot-shattering[data-collapse-role="center"] .dock-chip::after {
    animation: none;
    opacity: 0;
  }
  #dock.dock-hit {
    animation: none;
  }
  @keyframes chip-static {
    0% {
      transform: scale(1);
      filter: brightness(1);
      opacity: 1;
    }
    36% {
      transform: scale(1);
      filter: brightness(2.1);
      opacity: 1;
    }
    64% {
      transform: scale(1);
      filter: brightness(1.6);
      opacity: 1;
    }
    100% {
      transform: scale(0);
      filter: brightness(1.05);
      opacity: 0;
    }
  }
}
/* =========================================================
 * Slide & Triple（滑块三消）— 9:16 响应式外壳（D-13）
 * 零外部资源：全部 CSS 渐变/动效程序化（宪章 III）
 * ========================================================= */

:root {
  --bg: #12181f;
  --app-bg: #1B2430;
  --panel: #232f3d;
  --grid-line: #2A3644;
  --ink: #E8EEF6;
  --ink-dim: #9fb0c3;
  --accent: #4CC38A;
  --danger: #E5484D;
  --gold: #FFC53D;
  --radius: 12px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Δ15b3: 全视口背景舞台（底图 + 前景粒子——置于 #app 最底层） ---------- */
#bg-canvas,
#fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none; /* 背景层不拦截任何操作（宪章 IV 输入模型不受影响） */
  z-index: 0;
}
#fx-canvas { z-index: 1; } /* 前景粒子层高于底图、低于棋盘 */

/* Δ20/T092: 全屏顶层特效画布（白瓷碎片瀑布 / 卡牌碎裂） */
#vfx-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 950;
}

/* HUD / 棋盘 / Dock / 道具栏 / 教学层 抬升至背景层之上 */
#hud, #board-wrap, #dock, #items, #toast {
  position: relative;
  z-index: 2;
}
/* Δ29a: 预警横幅是 `#dock` 之上的独立叠层（absolute，不参与 flex 列），
 * 故单独抬升，不进上面的 position:relative 组（否则会重新占位挤压布局） */

/* =========================================================
 * Δ19c/T085: 顶部导航栏三区 + IQ 指数条
 *   左: 返回大厅 / 设置（纯图标）· 中: 极简 IQ 胶囊 · 右: 棱晶胶囊
 * ========================================================= */
#hud {
  flex: 0 0 auto;
  height: clamp(54px, 8.6%, 70px);
  min-height: clamp(54px, 8.6%, 70px);
  max-height: clamp(54px, 8.6%, 70px);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px clamp(10px, 3.2%, 16px);
  container-type: inline-size;
  background: linear-gradient(180deg, rgba(18, 26, 38, .46), rgba(18, 26, 38, .20));
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.hud-left { display: flex; align-items: center; gap: clamp(6px, 1.8cqw, 10px); min-width: 0; }

/* Q 弹立体圆形图标按钮（浅灰蓝立体圆面 + 白色粗线条图标——无文字） */
.hud-round-btn {
  position: relative;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .85);
  background: linear-gradient(180deg, #9DB2CA 0%, #7E93AD 52%, #64798F 100%);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 3px 0 #4E6076,
    0 7px 14px rgba(8, 15, 24, .34);
  transition: transform .16s cubic-bezier(.2, 1.6, .4, 1), box-shadow .16s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.hud-round-btn:active {
  /* 压下缩一圈；松手时 cubic-bezier 过冲回到 1 = Q 弹 */
  transform: translateY(2px) scale(.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 0 #4E6076, 0 3px 8px rgba(8, 15, 24, .32);
}
.hud-round-btn:hover { filter: brightness(1.06); }
.hud-round-ico { width: 26px; height: 26px; display: block; }
.hud-round-ico svg { width: 100%; height: 100%; display: block; }

.hud-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  pointer-events: none;
}

.hud-right { display: flex; align-items: center; }
/* 圆角深色胶囊：棱晶数量（与大厅 profile v2 实时同步） */
.hud-shard-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px clamp(8px, 2.4cqw, 12px);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(40, 30, 66, .82), rgba(22, 18, 38, .88));
  border: 1px solid rgba(201, 174, 255, .65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 3px 0 rgba(12, 8, 24, .55),
    0 0 14px rgba(178, 138, 255, .35);
  color: #F3EAFF;
  font-weight: 800;
  font-size: clamp(11px, 3.1cqw, 14px);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 七彩棱晶图标（与大厅货币栏同一颗 SVG —— ingame-hud-render-defects Bug 9） */
.prism-gem { width: 1.05em; height: 1.05em; display: block; flex: none; }
.prism-gem-sm { width: 12px; height: 12px; display: block; flex: none; }
#hud-shards { display: inline-flex; align-items: center; gap: 4px; }
#hud-shards b { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- 顶栏中央：极简 IQ 胶囊（半透明深色 · 无图标 · 无称号） ---------- */
.iq-pill {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px clamp(10px, 2.8cqw, 15px);
  border-radius: 999px;
  background: rgba(15, 23, 42, .46);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 4px 12px rgba(8, 15, 24, .28);
  color: #EAF2FF;
  font-size: clamp(12px, 3.4cqw, 15px);
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: auto;
  transition: transform .16s ease;
}
.iq-word { color: rgba(226, 238, 255, .82); letter-spacing: .04em; }
#iq-value { color: #FFFFFF; font-size: 1.16em; }
.iq-pill.level-up { animation: iq-level-up .6s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes iq-level-up {
  0% { transform: scale(1); }
  40% { transform: scale(1.10); box-shadow: 0 0 0 3px rgba(255, 214, 102, .85), 0 0 24px rgba(255, 214, 102, .8); }
  100% { transform: scale(1); }
}
.iq-pill.iq-broken { animation: iq-broken .4s ease-out; }
@keyframes iq-broken {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  55% { transform: translateX(4px); }
  78% { transform: translateX(-2px); }
}
/* 绿色跳字 +5（放大动效，动画结束自动移除） */
.iq-delta {
  position: absolute;
  right: 6px;
  top: -6px;
  transform: translateY(4px) scale(.6);
  opacity: 0;
  color: #24C97E;
  font-weight: 900;
  font-size: 1.02em;
  text-shadow: 0 0 10px rgba(60, 255, 170, .85), 0 2px 4px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.iq-delta.show { animation: iq-delta-pop .78s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes iq-delta-pop {
  0% { opacity: 0; transform: translateY(6px) scale(.5); }
  28% { opacity: 1; transform: translateY(-10px) scale(1.55); }
  55% { opacity: 1; transform: translateY(-16px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-28px) scale(1); }
}
/* ingame-hud-render-defects: 原待消槽右上角的次级状态栏（生命/分数/连击）
 * 整块删除——不再有任何 ♥♥♥ / 30 / x1 展示；数值仍由引擎与结算页消费。 */

/* ---------- #app：9:16 容器（D-13） ---------- */
#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* dvh 规避移动地址栏抖动，不支持时回退 100vh */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Δ15b3: 背景画布未就绪时的中性兜底底色（与暖白磨砂棋盘协调，
     避免深色底透过半透明棋盘形成暗边） */
  background: linear-gradient(180deg, #DCE8F2 0%, #EFE4E8 100%);
}

@media (min-width: 720px) and (max-width: 1023px) {
  #app {
    margin: 0 auto;
    height: 96vh;
    height: 96dvh;
    aspect-ratio: 9 / 16;
    width: auto;
    border-radius: var(--radius);
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
  }
}

@media (min-width: 1024px) {
  #app {
    margin: 0 auto;
    height: 96vh;
    height: 96dvh;
    aspect-ratio: 9 / 16;
    width: auto;
    border-radius: var(--radius);
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
  }
  /* PC 右侧 320px 调试面板位（M4 启用；M1 仅预留） */
  #debug-panel:not([hidden]) {
    position: fixed;
    top: 2vh;
    right: calc((100vw - min(96vh * 9 / 16, 506px)) / 2 - 340px);
    width: 320px;
  }
}

/* ---------- Δ19c/T085: 旧 HUD（Level + /72 副标题 + 生命 + 分数 + 静音键）已退役 ----------
 * 顶栏三区、IQ 指数条与立体圆角按钮的样式统一见文件上部「Δ19c/T085」区块。
 * 生命 / 分数 / 连击移入 IQ 条右侧；静音开关并入设置弹窗（BGM/SFX 双粒度）。
 * 保留本条注释说明样式归属迁移，避免后续误加同名样式。
 * ------------------------------------------------------------------------- */

/* ---------- 棋盘区（约 62%） ---------- */
#board-wrap {
  flex: 1 1 62%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-shadow: none !important;
}
#board {
  /* Δ15b3f（回归修复）: 正方形状完全由 CSS 单向声明，JS 不再回写
     canvas.style 宽高（回写构成「测量自身→缩小写回→再测量」负反馈棘轮，
     20 步内 480px→176px 缩成一小团）。
     宽度撑满容器（width: calc(100% - 12px)），高度由 aspect-ratio 派生，
     两者皆为容器尺寸的纯函数——恒等式，无反馈。 */
  width: calc(100% - 12px);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
  border-radius: var(--radius);
  /* Δ15b3e（Bug B 修复）: 彻底移除毛玻璃与灰白雾遮罩——
     原 backdrop-filter: blur(3px) saturate(1.05) + rgba(255,255,255,.22)
     白纱把高清背景插画糊成雾气（实测背景亮度由 201.6 被提白至 240.5）。
     现完全透明，让 #bg-canvas 的高清风景 100% 锐利通透透出；
     滑块对比度由其自身 3D 厚度边 + 深色投影承载（drawTileBody）。 */
  background: transparent;
  /* ingame-hud-render-defects（Bug 4）: 删除 1px 白描边——棋盘四周不再有
     细白框线；投影收弱，仅保留轻微悬浮感。 */
  border: none;
  outline: none;
  box-shadow: none !important;
  touch-action: manipulation; /* 允许滚动手势不劫持；点击仍走 pointerdown */
  cursor: pointer;
}
#board-wrap.shake { animation: board-shake .3s ease-out; }
@keyframes board-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* =========================================================
 * 顶部 7 格待消槽（简约高级版——ingame-hud-render-defects Bug 5）
 *   浅银灰/冰白圆角外框 + 深灰半透明内衬 + 7 个深色半透明方槽
 *   已彻底删除：竖条纹棕木纹、金属厚度边、槽内白色横线
 * ========================================================= */
#dock {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 1.8cqw, 10px);
  width: min(calc(100% - 22px), 520px);
  height: clamp(58px, 9.2%, 76px);
  min-height: clamp(58px, 9.2%, 76px);
  max-height: clamp(58px, 9.2%, 76px);
  margin: 1px auto 3px;
  padding: 6px clamp(8px, 2.4%, 13px);
  border-radius: 14px;
  container-type: inline-size;
  background: rgba(30, 41, 59, 0.55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
}
/* 7 个干净的深色半透明圆角空槽（无内部横线） */
.slot {
  padding: 0 !important;
  position: relative;
  z-index: 1;
  width: clamp(32px, 10.4cqw, 44px);
  height: clamp(32px, 10.4cqw, 44px);
  flex: none;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(15, 23, 42, 0.45) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, background .2s;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}
/* 有 chip = 凹坑内亮起，卡牌稳稳镶嵌 */
.slot.has-tile,
.slot.is-filled,
.slot.filled,
.slot:not(:empty) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  animation: dock-seat .26s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes dock-seat {
  0% { transform: scale(.72); }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
/* 空槽保持纯粹——不再绘制中央横线（Bug 5） */
.slot.empty::after { content: none; }

/* ---------- Dock（7 格收集槽） ---------- */
.tile-chip {
  width: clamp(36px, 11.5cqw, 50px);
  height: clamp(36px, 11.5cqw, 50px);
  border-radius: 10px;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  transition: transform .18s ease, opacity .18s ease;
  border: 2px solid rgba(255,255,255,.12);
  cursor: pointer;
  padding: 0;
}
.tile-chip svg { width: 70%; height: 70%; display: block; }
/* Δ15b3e（Bug A 修复）: Dock 图标新类 .dock-icon
   · 出口① http:// 等可导出环境 → <img class="dock-icon">（DataURL 切片）
   · 出口② file:// 跨源污染 → <canvas class="dock-icon" data-bid>（同源切片直绘）
   二者消费同一张离屏切片，故与棋盘图标 100% 同源同图。 */
.slot .dock-chip,
.slot.has-tile > .dock-icon,
.slot.is-filled > .dock-icon,
.slot.filled > .dock-icon,
.slot:not(:empty) > .dock-icon {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 8px;
  background: #FFFFFF !important;
  box-shadow: 0 3px 0 #CBD5E1, 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid #E2E8F0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
}

/* Bug fix (flight-frame-redraw-dock-inset): .dock-chip 作为唯一 3D 奶油白卡片，
   子元素一律无内框描边 —— 彻底消灭内嵌小方框 */
.slot .dock-chip {
  width: 100% !important;
  height: 100% !important;
  background: #FFFFFF !important;
  border-radius: 8px !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 3px 0 #CBD5E1, 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 子节点（图标/画布/图片/Emoji）一律去除内框与背景，仅保留居中贴图 */
.slot .dock-chip > *,
.slot .dock-icon,
.slot .chip-icon-canvas,
.slot .chip-icon-emoji,
.slot img.dock-icon,
.slot canvas.dock-icon {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.slot .dock-icon {  width: 78%;
  height: 78%;
  margin: 0;
  border-radius: 8px;
  display: block;
  object-fit: contain;
  /* flight-neighbor-morph-dock-inset（Bug 2）: 此处**严禁**加 filter。
   * file:// 形态下贴图切片无法逐像素扣白底（getImageData 抛 SecurityError），
   * 切片 alpha 轮廓是一个「不透明圆角方块」；drop-shadow 严格按 alpha 轮廓
   * 投射阴影，于是白卡内部多出一圈灰蓝「内嵌小方框」。
   * 投影改由下方 .slot img.dock-icon 单独承担（只有 keying 成功的透明 PNG
   * 才拥有真实动物轮廓）。 */
  pointer-events: none;
  user-select: none;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* keying 成功（http / 无跨源污染）→ 切片 alpha 轮廓就是动物本体，投影贴合 */
.slot img.dock-icon {
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .38));
}
/* keying 失败（file:// 直接双击运行）→ 切片保留不透明白底：
 * 用 darken 把纯白融进 .dock-chip 的白卡面，动物本体基本不变色，白底隐形。
 * 注意**不能**改用 canvas 内的 globalCompositeOperation='darken'——<canvas>
 * 自身背景透明，按规范 alpha=0 处取源色，白底照旧画出（A/B 实测已验证）。
 * 只作用于「canvas 直绘」这一种形态（keying 失败时 chipSVG 的唯一出口）；
 * 托盘 #dock 的深色半透明磨砂样式完全不受影响。 */
#dock.no-keying .slot canvas.dock-icon {
  mix-blend-mode: darken;
}
/* Δ15b/T052i: Dock 贴图切片 chip（精灵图集切片 DataURL）——历史类名保留 */
.tile-chip .chip-icon-canvas,
.slot .chip-icon-canvas {
  width: 78%;
  height: 78%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
  border-radius: 18%;
  pointer-events: none;
  user-select: none;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Δ15b: Emoji 兜底 chip（原生全彩 Emoji 直渲染） */
.slot .chip-icon-emoji {
  font-size: clamp(22px, 7cqw, 34px);
  line-height: 1;
  user-select: none;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.tile-chip.pop { animation: chip-pop .25s ease-out; }
@keyframes chip-pop {
  0% { transform: scale(.3); opacity: 0; }
  70% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}
.tile-chip.burst { animation: chip-burst .3s ease-in forwards; }
@keyframes chip-burst {
  0% { transform: scale(1); }
  100% { transform: scale(1.6); opacity: 0; }
}

/* =========================================================
 * Δ19d/T086: 底部三大道具（撤销 / 灵犀三消 / 乾坤洗牌）
 *   立体大圆按钮（深色金属面 + 厚度边 + 底部投影）+ 原创新绘 SVG 图标
 * ========================================================= */
#items {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 6.4vw, 30px);
  padding: 7px clamp(12px, 4%, 20px) calc(9px + env(safe-area-inset-bottom, 0px));
}
#items .item-btn {
  position: relative;
  width: clamp(56px, 16.4vw, 72px);
  height: clamp(56px, 16.4vw, 72px);
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .82);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 50% 55%, #3D5068 0%, #243244 58%, #131D29 100%);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .34),
    inset 0 -5px 8px rgba(0, 0, 0, .45),
    0 6px 0 #0D1620,
    0 12px 22px rgba(5, 10, 18, .45);
  transition: transform .12s ease, box-shadow .12s ease, filter .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
/* 顶部玻璃高光弧 */
#items .item-btn::before {
  content: '';
  position: absolute;
  top: 5px; left: 14%;
  width: 72%; height: 34%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0));
  pointer-events: none;
}
#items .item-btn:active {
  transform: translateY(4px) scale(.97);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .30),
    inset 0 -4px 7px rgba(0, 0, 0, .45),
    0 2px 0 #0D1620,
    0 5px 12px rgba(5, 10, 18, .40);
}
#items .item-btn:hover { filter: brightness(1.06); }
#items .item-btn:disabled {
  filter: grayscale(.9) brightness(.55);
  cursor: not-allowed;
}
#items .item-icon {
  position: relative;
  z-index: 1;
  width: 70%;
  height: 70%;
  display: grid;
  place-items: center;
  line-height: 1;
  pointer-events: none;
}
#items .item-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
}
/* 右上角红色小徽章：免费次数 `1`；用尽后 `棱晶 50` 购买价 */
#items .item-count {
  position: absolute;
  top: -5px;
  right: -7px;
  z-index: 2;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  background: linear-gradient(180deg, #FF6B70, #D22B33);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .45), 0 0 8px rgba(255, 80, 90, .55);
}
#items .item-btn.item-undo { border-color: rgba(150, 255, 210, .75); }
#items .item-btn.item-magnet { border-color: rgba(160, 220, 255, .78); }
#items .item-btn.item-shuffle { border-color: rgba(255, 215, 150, .78); }

/* Δ19d: 宣扬魔法的道具触发态（短暂发光——点击即生效） */
#items .item-btn.item-flash { animation: item-flash .42s ease-out; }
@keyframes item-flash {
  0% { box-shadow: 0 0 0 0 rgba(150, 230, 255, .85), inset 0 2px 3px rgba(255, 255, 255, .34), 0 6px 0 #0D1620; }
  100% { box-shadow: 0 0 0 16px rgba(150, 230, 255, 0), inset 0 2px 3px rgba(255, 255, 255, .34), 0 6px 0 #0D1620; }
}

/* =========================================================
 * Δ19d/T086: 乾坤洗牌 —— 棋盘卡牌整体旋转缩放洗牌动效
 * （纯表现层；不改变布局盒尺寸，不挤压棋盘）
 * ========================================================= */
#board-wrap.shuffling #board { animation: board-shuffle-spin .62s cubic-bezier(.36, .07, .19, .97); }
@keyframes board-shuffle-spin {
  0% { transform: rotate(0deg) scale(1); }
  28% { transform: rotate(-7deg) scale(1.06); }
  55% { transform: rotate(6deg) scale(0.96); }
  78% { transform: rotate(-2deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1); }
}

/* ---------- 结算浮层 ----------
 * Δ17/T070: 旧 #result-overlay 结算浮层已退役 —— 结算层改由 STM.Result
 * （双风翼棱晶能量铭牌）接管、失败页由 STM.Fail 接管（FR-042 / FR-043）。
 * 保留本占位注释以说明样式归属迁移，避免后续误加同名样式。
 * ---------- */

/* ---------- 调试面板（M4 主功能；M1 骨架隐藏） ---------- */
#debug-panel {
  background: var(--panel);
  border: 1px solid #354558;
  border-radius: 14px;
  padding: 14px;
  color: var(--ink);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#debug-panel h3 { margin: 0; font-size: 14px; color: var(--ink-dim); }
#debug-panel label { display: flex; align-items: center; gap: 8px; }
#debug-panel select, #debug-panel button {
  background: #2a3644;
  color: var(--ink);
  border: 1px solid #3a4a5c;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}
#debug-panel select:hover, #debug-panel button:hover {
  background: #344256;
  border-color: #4a5d76;
}
#debug-panel button:active { transform: translateY(1px); }
/* T056: Bot 运行态高亮（金色脉冲边框 + 提示玩家可点击停止） */
#debug-panel button.active {
  border-color: var(--gold, #FFC53D);
  background: #3a4a1f;
  color: #FFE082;
  animation: bot-pulse 1.4s ease-in-out infinite alternate;
}
@keyframes bot-pulse {
  from { box-shadow: 0 0 0 0 rgba(255,197,61,.55); }
  to   { box-shadow: 0 0 0 6px rgba(255,197,61,0); }
}
#debug-info { color: var(--ink-dim); line-height: 1.6; font-variant-numeric: tabular-nums; }
#debug-info b { color: var(--ink); }
/* M4 T053: 面板需要更宽的下拉框 + 自动填满宽度 */
#debug-level {
  flex: 1; min-width: 0;
  padding: 6px 8px;
}
/* 控件分组（一行内：跳关+重置 / Hint+Auto） */
#debug-panel .row {
  display: flex; gap: 6px; align-items: center;
}
#debug-panel .row > * { flex: 1; min-width: 0; }
#debug-panel .row > select { flex: 1.6; }
/* M4 T053: 移动端浮动按钮（仅 <1024px 显示） */
#debug-toggle {
  display: none;
  position: fixed;
  /* Δ19c: 左下角图标态——顶栏留给【返回大厅/设置】，不与主操作抢位 */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  left: 10px;
  z-index: 41;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: rgba(35, 47, 61, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid #4a5d76;
  color: var(--ink);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 4px 10px rgba(8, 15, 24, .34);
}
#debug-toggle:active { transform: scale(.94); }

/* 移动端调试抽屉（M4 T053 启用——translateY 收展） */
@media (max-width: 1023px) {
  #debug-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 56vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    z-index: 40;
    transform: translateY(100%);
    transition: transform .26s ease-out;
    box-shadow: 0 -12px 40px rgba(0,0,0,.45);
  }
  #debug-panel:not([hidden]) {
    transform: translateY(0);
  }
  /* 显示收起指示抓手 */
  #debug-panel::before {
    content: '';
    display: block;
    width: 48px;
    height: 4px;
    background: rgba(255,255,255,.35);
    border-radius: 2px;
    margin: -4px auto 6px;
  }
  #debug-toggle { display: block; }
}

/* ---------- 通用提示 toast（输入锁反馈） ---------- */
#toast {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  background: rgba(20, 28, 38, .92);
  border: 1px solid #354558;
  color: var(--ink-dim);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transition: opacity .2s;
}
#toast.show { opacity: 1; }

/* =========================================================
 * Δ29a / FR-036: 困难关「险境预警」顶部流光横幅
 *
 * 为什么整块重写：旧 `#challenge-banner` 是**棋盘中央的墨绿弹窗**——
 *   `position:absolute; top:34%; left:50%; transform:translate(-50%,-50%)`
 *   的定位上下文是 `#app`（flex 列），top:34% 恰是棋盘区；
 *   墨绿渐变底 + #FFC53D 黄边 + 两枚 10×46px 金色卷轴端饰 = 用户指认的
 *   「照搬传统麻将」识别特征。Δ29a 把这三样**全部删除**。
 *
 * 新形态：与顶部待消槽融为一体的**通透毛玻璃流光条**——
 *   · 矩形由 JS 与 `#dock` 完全对齐（position:absolute + left/top/width/height），
 *     故包围盒与 `#board-wrap` 零相交（构造性，不靠数值调参）；
 *   · `pointer-events: none` 恒定 → 非模态、不阻塞任何点击；
 *   · 色相全部走 CSS 变量（--banner-hue-a / -b / --banner-glow），六画卷自适应，
 *     **一次性写入**，不逐帧改样式、不起 rAF；
 *   · 流光由纯 transform/opacity 的扫掠实现（零布局抖动）。
 * ========================================================= */
#peak-banner {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 26;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 clamp(6px, 2.2vw, 12px);
  border-radius: 14px;
  overflow: visible;
  pointer-events: none !important; /* 非模态：不阻塞输入、不冻结 rAF 与判定 */
  /* 主色相由 --banner-hue-a 驱动；副色相 b 只出现在右段与流光上，
     保证「主色相」在横幅主体上占绝对主导（门禁按主色相判偏差 <= 30°） */
  background:
    linear-gradient(96deg,
      hsl(var(--banner-hue-a, 205) 78% 62% / 0.52) 0%,
      hsl(var(--banner-hue-a, 205) 70% 56% / 0.44) 46%,
      hsl(var(--banner-hue-b, 196) 74% 62% / 0.30) 100%);
  border: 1px solid hsl(var(--banner-glow, 198) 92% 80% / 0.55);
  box-shadow:
    0 6px 20px hsl(var(--banner-hue-a, 205) 60% 30% / 0.28),
    inset 0 1px 0 hsl(var(--banner-glow, 198) 100% 92% / 0.42);
  -webkit-backdrop-filter: blur(7px) saturate(1.18);
  backdrop-filter: blur(7px) saturate(1.18);
  color: #F7FBFF;
  font-size: clamp(10px, 2.86vw, 13.5px);
  font-weight: 700;
  letter-spacing: .2px;
  text-shadow: 0 1px 2px hsl(var(--banner-hue-a, 205) 70% 22% / 0.75);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 260ms ease-out, transform 260ms ease-out;
}
#peak-banner.show {
  opacity: 1;
  transform: translateY(0);
}
/* 点击打断 / 换关清理：<= 100ms 内不可见（不硬切，80ms 淡出） */
#peak-banner.hide {
  opacity: 0;
  transform: translateY(5px);
}
#peak-banner.hide.instant {
  transition-duration: 80ms;
}

/* 搭档头像：溢出横幅左沿的「探头」构图（不是方形贴片） */
#peak-banner .peak-banner-pet {
  flex: 0 0 auto;
  width: clamp(30px, 9.2vw, 42px);
  height: clamp(30px, 9.2vw, 42px);
  margin-left: calc(-1 * clamp(2px, 1.1vw, 6px));
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: visible;
  background: radial-gradient(circle at 34% 28%,
    hsl(var(--banner-glow, 198) 100% 96% / .95),
    hsl(var(--banner-hue-a, 205) 70% 62% / .85) 62%,
    hsl(var(--banner-hue-a, 205) 62% 40% / .92));
  box-shadow:
    0 0 0 1.5px hsl(var(--banner-glow, 198) 100% 88% / .85),
    0 4px 12px hsl(var(--banner-hue-a, 205) 70% 24% / .38);
  animation: peak-pet-peek 1400ms ease-in-out infinite;
}
#peak-banner .peak-banner-pet .pet-avatar-img,
#peak-banner .peak-banner-pet canvas {
  width: 92%;
  height: 92%;
  border-radius: 50%;
  object-fit: contain;
  display: block;
}
#peak-banner .peak-banner-pet .pet-avatar-emoji {
  font-size: clamp(16px, 5.2vw, 24px);
  line-height: 1;
}
/* 探身预警微动效：横向轻探 + 极轻微摆（幅度可辨但不喧闹） */
@keyframes peak-pet-peek {
  0%   { transform: translate(0, 0) rotate(0deg); }
  35%  { transform: translate(-3px, -1px) rotate(-5deg); }
  62%  { transform: translate(-1px, 0) rotate(2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* 文案：单行可读；窄屏允许折两行，MUST NOT 截断、MUST NOT 出现省略号 */
#peak-banner .peak-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.18;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
}
@media (max-width: 360px) {
  #peak-banner .peak-banner-text { white-space: normal; }
}

/* 流光扫掠（纯 transform/opacity，零布局属性） */
#peak-banner .peak-banner-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(104deg,
    transparent 26%,
    hsl(var(--banner-glow, 198) 100% 92% / .10) 42%,
    hsl(var(--banner-glow, 198) 100% 97% / .55) 50%,
    hsl(var(--banner-glow, 198) 100% 92% / .10) 58%,
    transparent 74%);
  transform: translateX(-115%);
  opacity: 0;
  animation: peak-sheen 1400ms ease-in-out infinite;
}
@keyframes peak-sheen {
  0%   { transform: translateX(-115%); opacity: 0; }
  18%  { opacity: .9; }
  72%  { opacity: .55; }
  100% { transform: translateX(115%); opacity: 0; }
}

/* prefers-reduced-motion: 退化为静态半透明条 + 一次性淡出（零扫掠、零头像浮动），
 * 展示时长与「可被点击打断」语义不变（时长由 JS 的 1400ms 计时器保证） */
@media (prefers-reduced-motion: reduce) {
  #peak-banner .peak-banner-pet { animation: none; }
  #peak-banner .peak-banner-sheen { animation: none; opacity: 0; }
  #peak-banner { transition: opacity 120ms linear; transform: none; }
  #peak-banner.show { transform: none; }
  #peak-banner.hide { transform: none; }
}

/* =========================================================
 * Δ16d/T066: HooLey Games 品牌开机动画（FR-038）
 * · 黑曜石径向微光渐变（严禁纯黑 #000000 死黑——中心微光、四周沉黑）
 * · HooLey 浮雕艺术字（多层描边 + 高光 + 微投影）+ 宽字距 GAMES
 * · 中间两 `o` 双环几何造型（内含高光眼神点），磁力弹跳碰撞吸附 +
 *   俏皮眨动一次 + 七彩棱镜光晕（变形由 rAF 驱动，纯 transform/opacity）
 * · 白金流光自左向右扫掠字面（渐变遮罩位移 --sweep，clip-path 硬边——
 *   非整体闪烁）
 * · 约 2.0s 后平滑淡出并卸载；零布局抖动（全程不触发布局属性）
 * ========================================================= */
#splash-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: radial-gradient(circle at 50% 40%, #151A26 0%, #0A0D14 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 48px 24px 36px;
  overflow: hidden;
  transition: opacity 0.5s ease, filter 0.5s ease;
}
#splash-screen.fade-out {
  opacity: 0;
  filter: blur(6px);
}
#splash-screen.splash-fading {
  opacity: 0;
  visibility: hidden;
}

/* ---- 高级名言预加载过渡屏 ---- */
#splash-branding {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
#splash-screen.stage-loading #splash-branding,
#splash-branding.stage-loading {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 84%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
  transition: top 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top center;
}
#splash-screen.stage-loading #splash-branding .splash-title,
#splash-branding.stage-loading .splash-title {
  font-size: 76px;
  line-height: 1.05;
  font-weight: 800;
}
#splash-screen.stage-loading #splash-branding .splash-sub,
#splash-branding.stage-loading .splash-sub {
  font-size: 19px;
  letter-spacing: 0.3em;
  margin-top: 8px;
  margin-bottom: 24px;
}
#splash-quote {
  opacity: 0;
  transition: opacity 0.8s ease;
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translateX(-50%);
  width: 84%;
  max-width: 340px;
  box-sizing: border-box;
  pointer-events: none;
  margin-bottom: 0;
}
#splash-screen.stage-loading #splash-quote,
#splash-quote.stage-loading {
  opacity: 1;
}
.splash-quote-text,
.quote-text,
#splash-quote p {
  width: 100%;
  text-align: left !important;
  white-space: normal;
  line-height: 1.65;
  font-size: 19px;
  color: #F8FAFC;
  font-weight: 400;
  letter-spacing: 0.02em;
  word-break: break-word;
  text-shadow: 0 2px 10px rgba(255,255,255,0.15);
}
.splash-quote-author,
.quote-author {
  display: block;
  width: 100%;
  text-align: right;
  margin-top: 10px;
  font-size: 14px;
  color: #A7F3D0;
  letter-spacing: 0.08em;
}
#splash-progress-wrap {
  opacity: 0;
  transition: opacity 0.8s ease;
  position: absolute;
  top: 82%;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
#splash-screen.stage-loading #splash-progress-wrap,
#splash-progress-wrap.stage-loading {
  opacity: 1;
}
.splash-progress {
  width: 280px;
  height: 5px;
  background: rgba(255,255,255,0.16);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.splash-progress-fill {
  height: 100%;
  width: 0% !important;
  background: linear-gradient(90deg, #38BDF8, #FBBF24);
  border-radius: 3px;
  position: relative;
  transition: width 0.1s linear;
}
.splash-progress-fill::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 10px rgba(255,255,255,0.9);
}
.splash-glide-mark {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.18em;
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 50%, #CBD5E1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 6px rgba(56,189,248,0.35));
  margin-top: 14px;
}

.splash-brand {
  position: relative;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}

/* 主标题 HooLey —— 原创浮雕艺术字（多层描边 + 顶部高光 + 微投影） */
.splash-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .04em;
  font-family: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  font-size: clamp(52px, 17vw, 104px);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  color: #EEF3FA;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .34),        /* 顶部高光棱 */
    0 -1px 0 rgba(0, 0, 0, .45),            /* 底部暗棱 */
    0 10px 22px rgba(0, 0, 0, .55),          /* 微投影 */
    0 0 34px rgba(120, 170, 255, .16);       /* 冷调氛围辉光 */
}

.splash-ch {
  display: inline-block;
  will-change: transform, opacity, filter;
  opacity: 0;
}

/* ---- `o` 双环几何造型（磁力碰撞 + 眨眼 + 七彩棱镜光晕的载体） ---- */
.splash-oo {
  position: relative;
  width: .62em;
  height: .62em;
  margin: 0 .035em;
  border-radius: 50%;
  will-change: transform, filter;
}
.splash-oo .oo-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: .085em solid rgba(226, 236, 250, .88);
  box-shadow:
    inset 0 .02em 0 rgba(255, 255, 255, .30),   /* 内壁高光 */
    0 .03em 0 rgba(0, 0, 0, .40),               /* 下沿暗棱（浮雕厚度） */
    0 .06em .18em rgba(0, 0, 0, .45);           /* 微投影 */
  transform-origin: 50% 50%;
}
/* 高光眼神点（blink 期间由 rAF 的纵向位移驱动上挑/下沉） */
.splash-oo .oo-eye {
  position: absolute;
  left: 50%;
  top: 50%;
  width: .16em;
  height: .16em;
  margin: -.08em 0 0 -.08em;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFFFFF 0%, #CFE1FF 46%, rgba(150, 190, 255, .82) 100%);
  box-shadow: 0 0 .12em rgba(190, 220, 255, .9);
}

/* ---- 白金流光扫掠（--sweep 由 rAF 0→100% 驱动；非整体闪烁） ---- */
.splash-title::after {
  content: "";
  position: absolute;
  inset: -.16em -.08em;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) calc(var(--sweep, 0%) - 26%),
    rgba(255, 246, 222, .58) calc(var(--sweep, 0%) - 9%),
    rgba(255, 255, 255, .92) var(--sweep, 0%),
    rgba(255, 246, 222, .52) calc(var(--sweep, 0%) + 9%),
    rgba(255, 255, 255, 0) calc(var(--sweep, 0%) + 26%),
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  mix-blend-mode: screen;
  animation: splash-sweep 2s linear infinite;
  opacity: .9;
}
/* 流光遮罩裁切到字面（只扫字不扫底） */
.splash-brand { isolation: isolate; }
@keyframes splash-sweep {
  0%   { background-position: 130% 0; }
  100% { background-position: -60% 0; }
}

/* 副标题 GAMES —— 宽字距形成品牌节奏 */
.splash-sub {
  margin-top: .55em;
  font-family: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  font-size: clamp(11px, 3.4vw, 16px);
  font-weight: 500;
  letter-spacing: .82em;
  text-indent: .82em; /* 抵消尾字距，保持视觉居中 */
  color: rgba(206, 220, 240, .72);
  text-shadow: 0 0 14px rgba(130, 175, 255, .28);
  opacity: 0;
  animation: splash-sub-in .7s ease-out .34s forwards;
}
@keyframes splash-sub-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .splash-title::after { animation: none; }
  .splash-sub { animation: none; opacity: 1; }
}

/* =========================================================
 * Δ17/T068: Glide Critters 主大厅（FR-039）
 * 六区上中下分区布局 100% 保留（视觉皮肤原创重制）
 *
 * 原创性红线（Edge Cases「外围 UI 竞品视觉元素清零红线」）:
 * 本节 MUST NOT 出现浅蓝竖条纹木墙 / 室内盆栽 / 木桌 / 风景木质相框 /
 * 天蓝丝带横幅 / 金色庆典号角 / 天蓝圆弧顶盖（含任何变体形态）。
 * ========================================================= */
:root {
  /* 棱晶星盘 / 奶油果冻 / 琥珀金 —— Δ17 新增色板（全部原创取值） */
  --prism-violet: #8F6FD6;
  --prism-violet-deep: #4A3482;
  --prism-glow: #C9AEFF;
  --amber: #E8A33D;
  --amber-hi: #FFD98A;
  --cream: #FFF6E8;
  --cream-deep: #F0E2CC;
  --portal-glow: 1;
}

#lobby {
  position: absolute;
  inset: 0;
  /* Δ17/T068: #app 为 flex column 容器——大厅须脱离文档流并显式撑满，
     否则作为 flex 子项无布局盒，clientWidth/Height = 0（背景与切片无从绘制） */
  width: 100%;
  height: 100%;
  z-index: 3; /* 高于 #hud/#board-wrap（z-index:2）——大厅与局内互斥 */
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
#lobby[hidden] { display: none !important; }

.lobby-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* 六区定位：仅上/中/下 + 左/右分区，几何与功能语义自 Δ16 保留 */
.lobby-zone { position: absolute; z-index: 1; }
.lobby-zone-topleft     { top: max(14px, env(safe-area-inset-top)); left: 12px; display: flex; gap: 8px; }
.lobby-zone-topright    { top: max(14px, env(safe-area-inset-top)); right: 12px; }
.lobby-zone-midtop      { top: 11%; left: 0; right: 0; text-align: center; }
.lobby-zone-center      { top: 22%; left: 0; right: 0; display: flex; justify-content: center; }
/* Δ32 UI 修复（Bug 1）：中下区按钮略微上提（15% → 17%），
 * 与缩小后的相框重新分配纵向留白——相框上下的呼吸间距由
 * 3.5px / 61px 调整为约 30px / 64px，整组元素视觉重心回到视口中部 */
.lobby-zone-midbottom   { bottom: 17%; left: 0; right: 0; display: flex; justify-content: center; }
.lobby-zone-bottomleft  { bottom: max(14px, env(safe-area-inset-bottom)); left: 12px; display: flex; align-items: center; gap: 8px; }

/* ---------- 顶部左区：设置 / 调试 圆钮 ---------- */
.lobby-round-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .55);
  background: rgba(24, 32, 52, .42);
  backdrop-filter: blur(6px);
  font-size: 18px;
  cursor: pointer;
  color: var(--ink);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
}
.lobby-btn-debug.is-on {
  border-color: var(--amber-hi);
  background: rgba(232, 163, 61, .55);
  box-shadow: 0 0 12px rgba(255, 217, 138, .70);
}

/* ---------- 顶部右区：棱晶货币栏 ---------- */
.lobby-shards {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(46, 36, 84, .70), rgba(26, 20, 52, .70));
  border: 1.5px solid var(--prism-glow);
  font-weight: 700;
  font-size: clamp(13px, 3.6vw, 17px);
  color: #FFF;
  text-shadow: 0 0 8px rgba(201, 174, 255, .8);
}
/* 七彩切面棱晶 SVG 图标（程序化切面——零外部资源） */
.lobby-shards-icon { display: block; width: 20px; height: 20px; filter: drop-shadow(0 0 5px rgba(201, 174, 255, .9)); }
.lobby-gem { width: 100%; height: 100%; display: block; }
/* 数量弹跳动效（余额变化时触发一次——纯 CSS 动画） */
.lobby-shards-value { display: inline-block; transform-origin: center; }
.lobby-shards-value.is-bump { animation: shard-bump .42s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes shard-bump {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.42); }
  70%  { transform: scale(.94); }
  100% { transform: scale(1); }
}

/* ---------- 中上区：3D 浮雕徽标（Δ20 Bug 3：双行字标 + 棱镜星芒） ---------- */
.lobby-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px 0;
}
/* 棱镜星芒（徽标背后的方向星芒装饰） */
.lobby-brand-burst {
  position: absolute;
  left: 50%; top: 50%;
  width: 190px; height: 190px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: .55;
  background:
    conic-gradient(from 0deg,
      rgba(255,255,255,.55) 0deg 3deg, transparent 3deg 45deg,
      rgba(255,214,140,.50) 45deg 48deg, transparent 48deg 90deg,
      rgba(201,174,255,.50) 90deg 93deg, transparent 93deg 135deg,
      rgba(140,220,255,.50) 135deg 138deg, transparent 138deg 180deg,
      rgba(255,140,190,.45) 180deg 183deg, transparent 183deg 225deg,
      rgba(255,255,255,.45) 225deg 228deg, transparent 228deg 270deg,
      rgba(255,214,140,.45) 270deg 273deg, transparent 273deg 315deg,
      rgba(201,174,255,.45) 315deg 318deg, transparent 318deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 22%, #000 34%, #000 62%, transparent 76%);
  mask: radial-gradient(circle, transparent 22%, #000 34%, #000 62%, transparent 76%);
}
/* 双行立体字标容器（Δ20 Bug 3：上下双行居中紧凑叠排）
   上行 Glide（大字） / 下行 Critters（稍小）——两词共享同一套立体字
   构造，读作一个整体字标而非「两个独立元素」 */
.lobby-brand-name {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
}
.lobby-brand-row { display: block; text-align: center; }
/* ① Glide —— 纯白→暖奶油黄立体渐变字 + 天蓝/深海蓝厚描边（Δ20 Bug 3）
   注：MUST NOT 用「硬投影」（text-shadow 偏移实色块）——它会盖在
   background-clip:text 的渐变填充之上，使字整体发暗发蓝（实机截图确认）。
   立体感由 -webkit-text-stroke（paint-order:stroke fill）+ 柔和 drop-shadow 承担。 */
.lobby-brand-glide {
  display: block;
  font-style: normal;
  font-size: clamp(28px, 8.6vw, 46px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBEE 34%, #FFE9A8 74%, #FFD97A 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px rgba(24, 74, 150, .85);
  paint-order: stroke fill;
  filter: drop-shadow(0 4px 8px rgba(20, 50, 110, .40));
}
/* ② Critters —— 同一套立体字构造（去绿胶囊外框），字号略小紧贴上行 */
.lobby-brand-critters {
  display: block;
  font-style: normal;
  font-size: clamp(16px, 5.0vw, 26px);
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1;
  margin-top: 2px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBEE 36%, #FFEFC0 78%, #FFE09A 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.8px rgba(24, 74, 150, .82);
  paint-order: stroke fill;
  filter: drop-shadow(0 3px 6px rgba(20, 50, 110, .36));
}
/* Δ20 Bug 3：两侧白色扁三角风翼（.lobby-brand-wing 系列）已从 DOM 与样式
   中删除——双行叠排后风翼会把字标拉成不均衡两端，改为由棱镜星芒统一点缀。 */
/* 玩家萌宠从标题上方探出（随呼吸轻微浮动；Δ20 Bug 3：双行叠排后
   停靠在整个字标正上方居中位） */
.lobby-brand-pet {
  position: absolute;
  left: 50%; top: -42px;
  transform: translateX(-50%);
  width: 46px; height: 46px;
  border-radius: 50% 50% 46% 46%;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 0 14px rgba(201, 174, 255, .85), 0 4px 10px rgba(20, 50, 110, .30);
  border: 2.5px solid rgba(255, 255, 255, .95);
  display: grid; place-items: center;
  animation: pet-breathe 2.8s ease-in-out infinite;
}
.lobby-brand-pet .pet-avatar-img,
.lobby-brand-pet .pet-avatar-emoji {
  width: 100%; height: 100%; border-radius: 50%; object-fit: contain; font-size: 24px; line-height: 1;
}
@keyframes pet-breathe {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-7px); }
}

/* ---------- 中心区：棱晶星盘 / 时空传送门（Δ17 FR-039 §5） ----------
 * 替代 Δ16 的「2×2 风景木质拼图相框」：齿轮+风翼纹饰环形底座 + 能量晶片 */
.portal {
  position: relative;
  /* Δ32 UI 修复（Bug 1）：相框整体等比缩小至原尺寸 ~87%（340 → 296），
   * 原 340px 相框 + 顶部悬浮铭牌上探 34px 会把副标题 Critters 的下缘
   * 压住（实测 brand.bottom 161 / plaque.top 164.5，仅 3.5px 呼吸）。
   *
   * 纵向节奏改用视口高度驱动（纯百分比定位 + 固定像素间距在矮屏会撞车）：
   *   ① margin-top = 138px − 11vh —— 抵消 #lobby 六区 top:11% / 22% 的
   *      百分比差，使「标题底 → 铭牌顶」恒为 ~29px 呼吸间距；
   *   ② width 上限 72vh − 232px —— 即「不让相框撞到下方关卡按钮」的
   *      最大可行尺寸（784 高 → 332px，不生效；604 高 → 203px，生效）。
   *   ③ 296px 为基准尺寸上限，保证大屏不被 vw 撑爆。 */
  width: min(72vw, 296px, calc(72vh - 232px));
  aspect-ratio: 1;
  margin-top: calc(138px - 11vh); /* 让出顶部悬浮铭牌 + 与标题区的呼吸间距 */
  display: grid;
  place-items: center;
}

/* 顶部悬浮胶囊铭牌：大陆名称 + 充能进度 X/4
   Δ20 Bug 3：琥珀金 → 天空蓝/薄荷绿渐变胶囊 + 白字（清爽，贴合蓝天背景） */
.portal-plaque {
  position: absolute;
  top: -34px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 6px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #9FE3FF 0%, #62C4F0 52%, #3E9FD8 100%);
  border: 2px solid rgba(255, 255, 255, .92);
  color: #FFFFFF;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(20, 70, 120, .40);
  box-shadow: 0 4px 14px rgba(30, 64, 175, .20), inset 0 1px 0 rgba(255, 255, 255, .85);
}
.portal-plaque-name { font-size: clamp(12px, 3.4vw, 16px); }
.portal-plaque-prog {
  padding: 1px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .30);
  color: #FFFFFF;
  font-size: clamp(11px, 3.0vw, 14px);
}

/* 外圈星盘底座（Δ20 Bug 3：冰晶奶油白圆角画板——彻底去除土棕底色） */
.portal-ring {
  position: absolute; inset: 0;
  border-radius: 26%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .78) 46%, rgba(236, 246, 255, .82) 100%);
  border: 2px solid rgba(255, 255, 255, .95);
  box-shadow:
    0 12px 32px rgba(30, 64, 175, .18),
    0 0 calc(26px * var(--portal-glow)) rgba(120, 190, 255, .38),
    inset 0 3px 10px rgba(255, 255, 255, .95),
    inset 0 -4px 12px rgba(120, 160, 220, .18);
}
/* Δ20 Bug 3：8 齿长方体凸起已从 DOM 与样式中删除（.portal-gear 系列）。
   「机械齿轮刻纹」语义由 .portal-ring 的内描边与角部棱晶高光承载。 */

/* 风翼纹饰（左右各一，贴合底座圆角；Δ20 Bug 3：改为浅蓝冰晶调，
   与冰晶奶油白画板协调，不再是突兀的纯白三角） */
.portal-wing {
  position: absolute; top: 50%;
  width: 30%; height: 15%;
  background: linear-gradient(100deg, rgba(255,255,255,.92), rgba(176, 216, 255, .42));
  transform: translateY(-50%);
}
.portal-wing-l { left: -8%; clip-path: polygon(100% 50%, 30% 0, 62% 50%, 30% 100%); }
.portal-wing-r { right: -8%; clip-path: polygon(0 50%, 70% 0, 38% 50%, 70% 100%); }

/* 2×2 能量晶片 */
.portal-grid {
  position: relative;
  width: 74%; height: 74%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3%;
  padding: 2px;
}
.portal-chip {
  position: relative;
  overflow: hidden;
  border-radius: 22%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
  /* 已点亮：随辉光节拍轻微呼吸 */
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.85),
              0 0 calc(14px * var(--portal-glow)) rgba(120, 190, 255, .50);
}
.portal-chip-cv { width: 100%; height: 100%; display: block; }

/* 棱晶色散边缘高光（仅已点亮） */
.portal-chip-shine {
  position: absolute; inset: 0;
  display: none;
  background: linear-gradient(128deg, rgba(255,255,255,.34) 0%, transparent 38%, transparent 62%, rgba(160, 200, 255, .30) 100%);
}
.portal-chip.is-lit .portal-chip-shine { display: block; }

/* 盲盒态标记 + 充能关卡标注（Δ20 Bug 3：浅冰蓝底上的精致锁图标） */
.portal-chip-lock { display: none; }
.portal-chip.is-blind .portal-chip-lock {
  display: block;
  position: absolute; left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  font-size: clamp(15px, 4.4vw, 22px);
  filter: drop-shadow(0 1px 3px rgba(40, 80, 130, .45));
}
.portal-chip-caption {
  position: absolute; left: 2%; right: 2%; bottom: 3%;
  text-align: center;
  font-size: clamp(8px, 2.3vw, 11px);
  font-weight: 700;
  line-height: 1.25;
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(30, 70, 120, .75);
  pointer-events: none;
}
.portal-chip.is-lit .portal-chip-caption { display: none; }
/* 第 4 块 = 满充能大奖位（棱晶 ×150 预览）——白金色高亮 */
.portal-chip.is-bonus .portal-chip-caption {
  color: #FFF3C4;
  text-shadow: 0 1px 3px rgba(30, 70, 120, .85), 0 0 8px rgba(255, 243, 196, .85);
}

/* 左右切换按钮 */
.portal-nav { position: absolute; inset: 0; pointer-events: none; }
.portal-nav-btn {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  /* Δ32：尺寸保持 38px 不变——相框虽等比缩小，但箭头是触控目标，
   * 再缩小会跌破可点击尺寸（< 44px 命中区已属下限，不再下探）。 */
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .70);
  background: linear-gradient(180deg, rgba(74, 52, 130, .82), rgba(42, 28, 78, .82));
  color: #FFF;
  font-size: 24px; line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .40);
}
/* Δ17/上线前打磨: 左右切换按钮 MUST 完全落在视口内——
 * 原 -46px 固定外移在窄屏（375px）会溢出视口，MUST NOT 被裁切 */
.portal-nav-prev { left: 6px; }
.portal-nav-next { right: 6px; }
.portal-nav-btn:disabled { opacity: .32; cursor: default; }

/* ---------- 中下区：翠绿胶囊大按钮（文案严格 `关卡 X`） ---------- */
.lobby-btn-level {
  padding: 15px 52px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #7FE0A8 0%, var(--accent) 52%, #2E8C5D 100%);
  color: #06281A;
  font-size: clamp(19px, 5.6vw, 26px);
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 7px 0 #256B47, 0 12px 22px rgba(0, 0, 0, .42);
  transition: transform .10s ease-out, box-shadow .10s ease-out;
}
.lobby-btn-level:active {
  transform: translateY(4px);
  box-shadow: 0 3px 0 #256B47, 0 6px 14px rgba(0, 0, 0, .42);
}

/* 强制纯白底（任务 3） */
.logo-mascot, #lobby-mascot, .avatar-item, .lobby-brand-pet, .lobby-avatar, .avatar-cell {
  background: #FFFFFF !important;
}

/* ---------- 左下角：玩家头像 + 昵称 ---------- */
.lobby-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .88);
  background: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .40);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  display: grid; place-items: center;
}
.lobby-avatar-img { display: grid; place-items: center; width: 100%; height: 100%; }
.lobby-avatar-img .pet-avatar-img,
.lobby-avatar-img .pet-avatar-emoji { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; font-size: 24px; line-height: 1; }
.lobby-nick {
  padding: 5px 13px;
  border-radius: 999px;
  /* Δ20 Bug 3：土黄 → 纯白/浅蓝磨砂胶囊 + 深蓝文字 */
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(214, 238, 255, .88));
  border: 1.5px solid rgba(255, 255, 255, .92);
  color: #16386E;
  font-weight: 700;
  font-size: clamp(12px, 3.4vw, 15px);
  box-shadow: 0 3px 9px rgba(30, 64, 175, .18);
}

/* ---------- 窄屏微调 ---------- */
@media (max-width: 400px) {
  /* Δ32：窄屏沿用同一套 vh 驱动的纵向节奏，仅放宽 vw 占比（相框不被过度压扁） */
  .portal { width: min(76vw, 296px, calc(72vh - 232px)); }
  /* 星盘收窄后按钮内嵌于圆盘两侧，保证 375px 窄屏零溢出 */
  .portal-nav-btn { width: 42px; height: 42px; font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-chip { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .30); }
}

/* ---------- Δ17/T068 §1: 场景互斥（大厅 ⇄ 局内，禁止叠加态） ----------
 * 大厅显示时隐藏局内的 HUD / 棋盘 / Dock / 道具栏 / 调试面板。
 * 弹窗（模态）在两层之上，不受此规则影响（Edge Case 铁律例外）。 */
#app.scene-lobby #hud,
#app.scene-lobby #board-wrap,
#app.scene-lobby #dock,
#app.scene-lobby #items,
#app.scene-lobby #tutorial-root,
#app.scene-lobby #debug-panel,
#app.scene-lobby #bg-canvas,
#app.scene-lobby #fx-canvas,
#app.scene-lobby #combo-float-layer,
#app.scene-lobby #peak-banner {
  display: none !important;
}

/* =========================================================
 * Δ17/T069: 奶油果冻质感弹窗（FR-040 §0 共用视觉基底）
 *   3D 奶油白圆角软胶卡片 + 琥珀金胶囊标题铭牌 + 棱晶圆角拨片开关
 * 原创性红线: MUST NOT 使用天蓝圆弧顶盖等竞品标志性载体
 * ========================================================= */
#modal-root {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 20; /* 高于大厅（3）与局内层（2）——模态跨场景常驻 */
  display: grid;
  place-items: center;
}
#modal-root[hidden] { display: none !important; }

.modal-scrim {
  position: absolute; inset: 0;
  background: rgba(12, 10, 28, .62);
  backdrop-filter: blur(3px);
}

/* 3D 奶油白圆角软胶卡片：顶部高光 + 柔和内阴影 → 软胶/果冻立体感 */
.jelly-card {
  position: relative;
  width: min(86vw, 380px);
  max-height: 86vh;
  /* Δ32 UI 修复（Bug 2）：原 overflow-y:auto + overflow-x:visible 会被
   * CSS 规范归一为 auto/auto（实测 computed = auto / auto），把顶部
   * 绝对定位的琥珀金铭牌上探部分整块切掉（实测被裁 16px）。
   * 现改为 overflow: visible —— 卡片本身永不裁切；纵向溢出交由
   * .jelly-body 内部滚动承担（见下）。 */
  overflow: visible;
  padding: 64px 20px 22px; /* 顶部预留铭牌安全区（铭牌 12px + 高 40px + 间距） */
  border-radius: 30px;
  background: linear-gradient(170deg, #FFFDF8 0%, var(--cream) 46%, var(--cream-deep) 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .95),   /* 顶部高光 */
    inset 0 -8px 18px rgba(186, 154, 108, .30), /* 底部柔和内阴影 */
    0 16px 40px rgba(0, 0, 0, .48);
  animation: jelly-in .28s cubic-bezier(.2, 1.3, .5, 1);
}
@keyframes jelly-in {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* 琥珀金胶囊标题铭牌（替代天蓝圆弧顶盖）
 * Δ32 UI 修复（Bug 2）：原 top:-17px 让铭牌上探到卡片边界之外，
 * 一旦卡片存在任何 overflow 裁切就会把上半部分切掉。现整体内收至
 * 卡片内部（top:12px），配合 .jelly-card 的 padding-top:64px，
 * 标题胶囊、右上关闭按钮与底部主按钮三者均在卡片内完整呈现。 */
.jelly-plaque {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  padding: 7px 30px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--amber-hi), var(--amber) 58%, #C87F22);
  border: 2px solid rgba(255, 255, 255, .82);
  color: #4A2E08;
  font-weight: 800;
  font-size: clamp(15px, 4.2vw, 19px);
  white-space: nowrap;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255,255,255,.72);
}
.jelly-subtitle {
  margin: 0 0 12px;
  text-align: center;
  font-size: clamp(11px, 3.0vw, 13px);
  color: #9A8464;
}
/* Δ32：卡片不再滚动（overflow:visible），纵向溢出改为 body 内部滚动——
 * 上限 = 86vh 卡片高度 −（padding-top 64 + padding-bottom 22 + 副标题约 30）
 * padding-bottom 6px：让底部主按钮的 0 4px 0 立体投影落在滚动容器内，
 * 否则 overflow:auto 会把投影与圆角下缘一起切平（视觉上像被裁断）。 */
.jelly-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 6px;
  max-height: calc(86vh - 128px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 右上角圆润关闭按钮（奶油软胶质感——与卡片同系） */
.jelly-close {
  position: absolute;
  top: 10px; right: 12px;
  width: 30px; height: 30px;
  padding: 0;
  border: 2px solid rgba(232, 163, 61, .55);
  border-radius: 50%;
  background: linear-gradient(180deg, #FFFDF8, #EFE2CC);
  color: #6B5636;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.85);
  transition: transform .12s ease-out;
}
.jelly-close:active { transform: translateY(2px) scale(.94); }
.jelly-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(232,163,61,.40); }

/* 设置行 */
.jelly-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .68);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(150, 120, 80, .14);
  cursor: pointer;
}
.jelly-row.is-disabled { opacity: .62; cursor: default; }
.jelly-row-label { flex: 1; font-size: clamp(13px, 3.6vw, 16px); color: #4A3A22; }
.jelly-row-hint { font-size: clamp(10px, 2.8vw, 12px); color: #A08A68; }

/* 棱晶圆角拨片开关（滑块态虹彩微光） */
.prism-toggle {
  position: relative;
  width: 54px; height: 30px;
  border-radius: 999px;
  background: linear-gradient(180deg, #D8CBB8, #B9A88E);
  box-shadow: inset 0 2px 5px rgba(90, 70, 40, .34);
  transition: background .22s ease, box-shadow .22s ease;
  flex: none;
}
.prism-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.prism-toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(160deg, #FFFFFF, #EFE4D2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .32);
  transition: transform .22s cubic-bezier(.3, 1.4, .5, 1);
}
.prism-toggle.is-on {
  background: linear-gradient(180deg, var(--prism-glow), var(--prism-violet));
  box-shadow: inset 0 2px 5px rgba(52, 34, 96, .40), 0 0 12px rgba(201, 174, 255, .80);
}
.prism-toggle.is-on .prism-toggle-knob { transform: translateX(24px); }

/* 昵称输入框 */
.jelly-field { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.jelly-field-label { font-size: clamp(13px, 3.6vw, 16px); color: #4A3A22; }
.jelly-input {
  flex: 1;
  padding: 9px 14px;
  border: 2px solid rgba(232, 163, 61, .60);
  border-radius: 14px;
  background: #FFF;
  font-size: clamp(13px, 3.6vw, 16px);
  color: #3A2C16;
  font-family: inherit;
}
.jelly-input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(232,163,61,.22); }

/* 萌宠头像选择网格（45 选 1） */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  margin: 4px 0 6px;
}
.avatar-cell {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 2.5px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  background: #FFFFFF;
  overflow: hidden;
  cursor: pointer;
  display: grid; place-items: center;
}
.avatar-cell .pet-avatar-img,
.avatar-cell .pet-avatar-emoji { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; font-size: 17px; line-height: 1; }
.avatar-cell.is-selected {
  border-color: var(--amber);
  box-shadow: 0 0 0 2px rgba(232, 163, 61, .45), 0 0 12px rgba(255, 217, 138, .90);
}
.avatar-tick {
  position: absolute; right: -1px; bottom: -1px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--amber);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  line-height: 15px;
  text-align: center;
  opacity: 0;
}
.avatar-cell.is-selected .avatar-tick { opacity: 1; }

/* 按钮 */
.jelly-btn {
  padding: 12px;
  border: none;
  border-radius: 18px;
  font-family: inherit;
  font-size: clamp(14px, 3.8vw, 17px);
  font-weight: 700;
  cursor: pointer;
}
.jelly-btn-primary {
  background: linear-gradient(180deg, #7FE0A8, var(--accent) 55%, #2E8C5D);
  color: #06281A;
  box-shadow: 0 4px 0 #256B47, 0 8px 16px rgba(0, 0, 0, .30);
}
.jelly-btn-secondary {
  background: linear-gradient(180deg, #FFFFFF, #EFE2CC);
  color: #5A4526;
  box-shadow: 0 3px 0 #CDB894, 0 6px 12px rgba(0, 0, 0, .20);
}
.jelly-btn:active { transform: translateY(3px); }

/* ---------- Δ16f/T071: 道具购买角标（免费次数用尽 → `棱晶 50`） ---------- */
#items button.is-buyable .item-count {
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--prism-glow), var(--prism-violet));
  border: 1.5px solid rgba(255, 255, 255, .8);
  color: #FFF;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(201, 174, 255, .85);
}
#items button.is-buyable { border-color: var(--prism-glow); }
#items button.is-buyable.selecting { box-shadow: 0 0 0 3px rgba(201, 174, 255, .55); }

/* ---------- Δ18/T071: 扣费飘字 `-50 棱晶` + 余额不足轻晃 ---------- */
.shard-float {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 30;
  pointer-events: none;
  font-size: clamp(15px, 4.6vw, 20px);
  font-weight: 900;
  color: #FFE9B0;
  text-shadow: 0 0 12px rgba(255, 140, 190, .95), 0 2px 4px rgba(0, 0, 0, .8);
  animation: shard-float-up 1.2s cubic-bezier(.25, .9, .35, 1) forwards;
}
@keyframes shard-float-up {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  22%  { opacity: 1; transform: translate(-50%, -78%) scale(1.18); }
  42%  { transform: translate(-50%, -92%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -142%) scale(.95); }
}
/* 余额不足 → 按钮轻晃（拒绝扣费、拒绝消耗——FR-041 §2） */
#items button.is-denied { animation: item-denied .42s ease-out; }
@keyframes item-denied {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-6px); }
  38% { transform: translateX(6px); }
  58% { transform: translateX(-4px); }
  78% { transform: translateX(3px); }
}

/* =========================================================
 * Δ17/T072+T073: 通关结算层（双风翼棱晶能量铭牌）+ 传送门开启展板
 * 原创性红线: MUST NOT 出现天蓝丝带横幅 / 金色庆典号角 / 礼花筒 /
 * 风景木质相框等竞品标志性载体
 * ========================================================= */
#result-root {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 25; /* 模态场景层——位于大厅(3)/局内(2) 之上 */
  display: grid; place-items: center;
}
#result-root[hidden] { display: none !important; }

.result-card-celebrate {
  position: relative;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 26px;
  /* Δ17: 完全不透明底衬——结算层须遮蔽大厅/局内，MUST NOT 透出下层 */
  background:
    radial-gradient(circle at 50% 34%, #3E2B70 0%, #0C0920 74%, #08061A 100%);
  padding: 20px;
  overflow: hidden;
}

/* ---------- 【双风翼棱晶能量铭牌】（Δ17 原创构图） ---------- */
.nameplate {
  position: relative;
  width: min(92vw, 400px);
  padding: 62px 22px 30px;
  display: flex; align-items: center; justify-content: center;
}

/* ① 纯白流线型滑行风翼（两侧舒展） */
.plate-wing {
  position: absolute; top: 16px;
  width: 46%; height: 74px;
  background: linear-gradient(115deg, rgba(255,255,255,.98) 0%, rgba(206, 232, 255, .70) 46%, rgba(160, 200, 255, .12) 100%);
}
.plate-wing-l { left: -6%; clip-path: polygon(100% 44%, 22% 0, 58% 40%, 30% 100%); }
.plate-wing-r { right: -6%; clip-path: polygon(0 44%, 78% 0, 42% 40%, 70% 100%); filter: drop-shadow(0 0 10px rgba(190, 225, 255, .60)); }

/* ② 七彩折射棱晶簇（承托铭牌） */
.plate-cluster { position: absolute; bottom: 6px; left: 0; right: 0; height: 54px; }
.plate-shard {
  position: absolute;
  bottom: 0; left: 50%;
  width: 16px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 7px var(--h, #fff));
}
.plate-shard-0 { margin-left: -74px; height: 34px; transform: rotate(-17deg); }
.plate-shard-1 { margin-left: -46px; height: 50px; transform: rotate(-7deg); }
.plate-shard-2 { margin-left: -17px; height: 62px; }
.plate-shard-3 { margin-left: 13px;  height: 54px; transform: rotate(8deg); }
.plate-shard-4 { margin-left: 44px;  height: 44px; transform: rotate(15deg); }
.plate-shard-5 { margin-left: 70px;  height: 30px; transform: rotate(21deg); }
.plate-shard-6 { margin-left: -2px;  height: 40px; transform: rotate(-3deg); opacity: .7; }

/* ③ 琥珀金渐变铭牌（居中承载赞美词） */
.plate-bar {
  position: relative; z-index: 2;
  padding: 8px 24px;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  animation: plate-pop .52s cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes plate-pop {
  from { opacity: 0; transform: scale(.70) translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.plate-praise {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, #FFFFFF 0%, #FDE68A 45%, #F59E0B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 12px rgba(245, 158, 11, 0.55));
  position: relative;
  padding-bottom: 8px;
}
.plate-praise::after {
  content: '';
  position: absolute;
  left: 10%; right: 10%; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.55), transparent);
  filter: blur(0.5px);
}

/* ④ 萌宠乘发光微缩滑板在铭牌顶端跃起 */
.plate-rider {
  position: absolute; z-index: 3;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 56px;
  animation: rider-hop 1.5s ease-in-out infinite;
}
.plate-pet {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.92);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.46);
  display: grid; place-items: center;
}
.plate-pet .pet-avatar-img, .plate-pet .pet-avatar-emoji { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; font-size: 26px; line-height: 1; }
.plate-board {
  position: absolute; left: 50%; bottom: -12px;
  transform: translateX(-50%);
  width: 66px; height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.5), var(--prism-glow), rgba(255,255,255,.5));
  box-shadow: 0 0 18px rgba(201, 174, 255, .95);
  animation: board-glow 1.5s ease-in-out infinite;
}
@keyframes rider-hop {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  42%      { transform: translateX(-50%) translateY(-16px); }
  70%      { transform: translateX(-50%) translateY(2px); }
}
@keyframes board-glow {
  0%, 100% { opacity: .70; }
  50%      { opacity: 1; }
}

/* ⑤ 棱晶星芒与光点粒子（原创程序化粒子） */
.plate-sparks { position: absolute; inset: 0; pointer-events: none; }
.spark {
  position: absolute;
  width: 7px; height: 7px;
  left: var(--dx); top: var(--dy);
  border-radius: 50%;
  background: var(--amber-hi);
  box-shadow: 0 0 10px rgba(255, 217, 138, .95);
  animation: spark-fly 2.4s ease-out infinite;
}
.spark-1 { background: var(--prism-glow); box-shadow: 0 0 10px rgba(201,174,255,.95); }
.spark-2 { background: #7AE582; box-shadow: 0 0 10px rgba(122,229,130,.9); }
.spark-3 { background: #FF6B9D; box-shadow: 0 0 10px rgba(255,107,157,.9); }
@keyframes spark-fly {
  0%   { opacity: 0; transform: translateY(0) scale(.4); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-90px) scale(1.2); }
}

/* ---------- 中部：棱晶星盘（2×2 能量晶片）+ 棱晶飞入 ---------- */
.result-mid { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
/* 2×2 能量晶片（象限 0=左上 1=右上 2=左下 3=右下）——与大厅棱晶星盘同构 */
.result-chips {
  position: relative;
  width: 148px; height: 148px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  padding: 4px;
  border-radius: 26%;
  background: linear-gradient(160deg, rgba(232,163,61,.34), rgba(120,86,220,.30));
  box-shadow: 0 0 0 3px rgba(232,163,61,.85), 0 10px 26px rgba(0,0,0,.48);
}
.result-chip {
  position: relative;
  border-radius: 16%;
  overflow: hidden;
  background: rgba(66,44,124,.55);
  box-shadow: inset 0 0 0 1px rgba(214,186,255,.34);
}
.result-chipcv { width: 100%; height: 100%; display: block; }
/* 未点亮象限 = 紫晶盲盒态（不泄漏未解锁画面内容——FR-044 §4） */
.result-chip.is-blind {
  background:
    radial-gradient(circle at 50% 38%, rgba(150,110,225,.55) 0%, rgba(108,76,190,.42) 55%, rgba(66,44,124,.60) 100%);
  box-shadow: inset 0 0 0 1px rgba(214,186,255,.34);
}
/* 新点亮象限 = 翻转折出动画（困难位关——T072 ④） */
.result-chip.just-lit { animation: chip-flip .7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes chip-flip {
  0%   { transform: rotateY(90deg) scale(.6); opacity: .2; }
  100% { transform: none; opacity: 1; }
}
.result-shards { display: flex; align-items: center; gap: 8px; }
.shard-fly {
  font-size: 30px; font-style: normal;
  animation: shard-in .9s cubic-bezier(.3, 1.3, .4, 1);
}
@keyframes shard-in {
  from { transform: translateY(-56px) scale(.5); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.result-shard-amt {
  font-size: clamp(22px, 6.4vw, 30px);
  font-weight: 900;
  color: var(--prism-glow);
  text-shadow: 0 0 14px rgba(201, 174, 255, .95);
}
.result-shard-amt.is-flying { animation: amt-glow 1.6s ease-out; }
@keyframes amt-glow {
  0%   { transform: scale(1.5); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.result-foot { margin-top: 6px; }
.result-btn {
  padding: 15px 46px;
  border: none; border-radius: 999px;
  background: linear-gradient(180deg, #7FE0A8, var(--accent) 52%, #2E8C5D);
  color: #06281A;
  font-size: clamp(16px, 4.6vw, 20px);
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 0 #256B47, 0 12px 22px rgba(0,0,0,.42);
}
.result-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #256B47; }

/* ---------- Δ17/T073: 新奇幻大陆传送门开启展板 ---------- */
.portal-board {
  position: relative;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  gap: 14px;
  padding: 24px 18px 34px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #2A1C58 0%, #0A0818 76%);
}
.portal-board-art { position: absolute; inset: 0; }
.portal-board-cv { width: 100%; height: 100%; display: block; opacity: .92; }

/* 时空传送门光柱（Δ17 原创构图） */
.portal-beam {
  position: absolute; left: 50%; top: 50%;
  width: 62%; height: 120%;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(201,174,255,.34) 42%, rgba(255,217,138,.40) 58%, transparent);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: beam-pulse 3.2s ease-in-out infinite;
}
@keyframes beam-pulse {
  0%, 100% { opacity: .45; }
  50%      { opacity: .95; }
}

.portal-board-info {
  position: relative; z-index: 2;
  width: min(92vw, 400px);
  padding: 18px 20px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(180deg, rgba(20, 14, 44, .82), rgba(10, 8, 24, .90));
  border: 2px solid rgba(201, 174, 255, .55);
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
}
.portal-board-name {
  margin: 0 0 10px;
  font-size: clamp(20px, 6.4vw, 28px);
  font-weight: 800;
  background: linear-gradient(180deg, #FFFFFF, var(--amber-hi) 55%, var(--amber));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* 关卡区间徽章 */
.portal-board-badge { display: inline-block; margin-bottom: 10px; }
.portal-board-range {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--amber-hi), var(--amber));
  color: #4A2E08;
  font-weight: 800;
  font-size: clamp(12px, 3.6vw, 15px);
  box-shadow: 0 3px 9px rgba(0,0,0,.4);
}
/* 萌宠探险手账文案 */
.portal-board-note { margin: 0; }
.portal-board-note-text {
  margin: 0;
  color: #DCD2F5;
  font-size: clamp(12px, 3.4vw, 14px);
  line-height: 1.65;
}
.portal-board-foot { position: relative; z-index: 2; margin-top: 6px; }

/* =========================================================
 * Δ16g/T074: 无倒计时失败界面（FR-043）
 * 视觉沿用 Δ17 奶油果冻软胶卡片基底
 * 无倒计时红线: MUST NOT 出现倒计时数字 / 剩余时间 / 限时话术
 * ========================================================= */
#fail-root {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 26; /* 与结算层同级——失败页取代结算层出现 */
  display: grid; place-items: center;
  /* Δ17: 完全不透明底衬——失败页须遮蔽大厅/局内，MUST NOT 透出下层 */
  background:
    radial-gradient(circle at 50% 40%, #34246A 0%, #0C0918 74%, #070512 100%);
}
#fail-root[hidden] { display: none !important; }

.fail-card {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  /* 标题铭牌 absolute 定位于 top:-17px——必须放行溢出，否则被卡片裁切 */
  overflow: visible;
  padding-top: 46px;
}
/* 右上角返回主大厅按钮（T074 ③）——绝对定位于**覆盖层**右上角
 * （不放进卡片内——卡片内会与居中的标题铭牌重叠） */
.fail-back-lobby {
  position: absolute;
  top: 10px; right: 12px;
  z-index: 3;
  padding: 7px 14px;
  border: 2px solid rgba(255, 255, 255, .84);
  border-radius: 999px;
  background: linear-gradient(180deg, #FFF6E6, #F3D6A8 62%, #D9AE6E);
  color: #6A4415;
  font-size: 12px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 3px 0 #B98F52, 0 6px 14px rgba(0, 0, 0, .28);
}
.fail-back-lobby:active { transform: translateY(2px); box-shadow: 0 1px 0 #B98F52; }
.fail-plaque { background: linear-gradient(180deg, #FFD3C4, #F0906A 58%, #C05A34); }

/* 温和鼓励文案（XX% = 通关率暗示值，非倒计时） */
.fail-encourage {
  margin: 0 0 2px;
  font-size: clamp(13px, 3.7vw, 16px);
  color: #7A5C36;
  font-weight: 600;
}
.fail-reason { margin: 0; }

/* 萌宠头像 + 委屈泪滴 */
.fail-pet {
  position: relative;
  margin: 18px 0 10px;
  width: 96px; height: 96px;
}
.fail-pet-face {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .9);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .34);
  display: grid; place-items: center;
}
.fail-pet-face .pet-avatar-img,
.fail-pet-face .pet-avatar-emoji { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; font-size: 40px; line-height: 1; }
/* 泪滴：生成—滑落—消散 */
.fail-tear {
  position: absolute;
  top: 22%; left: 26%;
  width: 11px; height: 15px;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.95), rgba(130, 200, 255, .92));
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .30);
  animation: tear-fall 1.5s cubic-bezier(.4, 0, .8, 1) forwards;
}
@keyframes tear-fall {
  0%   { opacity: 0; transform: translateY(0) scale(.5); }
  22%  { opacity: 1; transform: translateY(4px) scale(1); }
  100% { opacity: 0; transform: translateY(62px) scale(.85); }
}

.fail-foot {
  display: flex; flex-direction: column;
  gap: 10px; width: 100%;
  margin-top: 14px;
}
.fail-revive.is-poor {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: 0 4px 0 #256B47;
  filter: grayscale(.5);
}
/* 棱晶不足提示（FR-041 §3 明确提示，不扣费） */
.fail-toast {
  position: absolute;
  left: 50%; bottom: 16%;
  transform: translateX(-50%);
  padding: 10px 24px;
  border-radius: 999px;
  background: rgba(20, 14, 44, .94);
  border: 2px solid var(--prism-glow);
  color: #FFF;
  font-weight: 700;
  font-size: clamp(13px, 3.6vw, 16px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
  animation: toast-in .2s ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Δ17/T068: 大厅场景隐藏 M4 浮动调试抽屉按钮 ----------
 * 大厅顶部左区已有自己的 🛠 开关（FR-039 §2，与局内共用同一状态）；
 * M4 的 position:fixed 抽屉按钮与大厅开关位置重叠且 z-index 更高，
 * 会拦截大厅按钮点击 —— 故大厅场景下隐藏（局内不受影响）。 */
#app.scene-lobby #debug-toggle { display: none !important; }

/* =========================================================
 * Δ17/上线前打磨: 触屏适配统一纪律
 * 基线对齐既有棋盘层（#board-wrap touch-action: manipulation +
 * 52~68px 最小点击区 + user-select: none）——外围 UI MUST NOT 比
 * 棋盘层更难点中，且 MUST NOT 在触屏上触发 300ms 延迟或文本选取。
 * ========================================================= */
#lobby, #modal-root, #result-root, #fail-root {
  touch-action: manipulation; /* 消除点击延迟，不劫持滚动手势 */
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* 触控设备：所有可点元素达到 ≥44px 最小命中区（WCAG 2.5.5 AAA） */
@media (pointer: coarse) {
  .lobby-round-btn { width: 48px; height: 48px; }
  .portal-nav-btn { width: 46px; height: 46px; }
  .lobby-avatar { width: 56px; height: 56px; }
  .lobby-btn-level { padding: 18px 60px; }
  .jelly-btn { padding: 15px; }
  .prism-toggle { width: 60px; height: 34px; }
  .prism-toggle-knob { width: 28px; height: 28px; }
  .prism-toggle.is-on .prism-toggle-knob { transform: translateX(26px); }
  .result-btn { padding: 18px 52px; }
  .avatar-cell { border-width: 3px; }
}

/* 窄屏横屏（手机横放）：星盘与按钮缩小，避免溢出 */
@media (orientation: landscape) and (max-height: 520px) {
  .portal { width: min(46vw, 210px); margin-top: 20px; }
  .lobby-zone-midtop { top: 6%; }
  .lobby-zone-center { top: 14%; }
  .lobby-zone-midbottom { bottom: 9%; }
  .lobby-brand-name { font-size: clamp(18px, 4.4vh, 26px); }
  .plate-praise { font-size: clamp(17px, 5.2vh, 24px); }
  .result-card-celebrate { gap: 14px; }
  .nameplate { padding: 46px 18px 20px; }
}

/* =========================================================
 * Δ19e/T087: L1/L2 交互式玩法引导层
 *   非模态（pointer-events:none，不冻结核心循环）
 *   半透明糖果卡片 + 动态指引小手（压在实际可飞出目标上）
 * ========================================================= */
#tutorial-root {
  position: absolute;
  inset: 0;
  z-index: 8; /* 高于局内层(2)，低于弹窗/结算层(20/25) */
  pointer-events: none;
}
#tutorial-root[hidden] { display: none !important; }

.tut-card {
  position: absolute;
  left: 50%;
  bottom: clamp(96px, 17%, 150px);
  transform: translateX(-50%);
  width: min(88%, 440px);
  padding: 13px 42px 13px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .95);
  background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(236, 245, 255, .92) 62%, rgba(214, 232, 250, .92) 100%);
  color: #1E3348;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 4px 0 rgba(126, 146, 172, .60),
    0 12px 26px rgba(10, 18, 30, .34);
  animation: tut-card-in .34s cubic-bezier(.2, 1.25, .4, 1);
}
@keyframes tut-card-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.96); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.tut-card.tut-out { animation: tut-card-out .32s ease-in forwards; }
@keyframes tut-card-out {
  to { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.97); }
}
.tut-step {
  display: inline-block;
  margin-bottom: 4px;
  padding: 1px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7FE0A8, #2E8C5D);
  color: #04271A;
  font-size: clamp(9px, 2.5vw, 11px);
  font-weight: 900;
  letter-spacing: .06em;
  box-shadow: 0 2px 0 rgba(20, 80, 55, .55);
}
.tut-text {
  font-size: clamp(12px, 3.45vw, 15px);
  font-weight: 700;
  line-height: 1.58;
  letter-spacing: .01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
.tut-text b { color: #0C7F63; }
.tut-text em { font-style: normal; color: #6A3FB0; }
.tut-skip {
  position: absolute;
  top: 8px;
  right: 8px;
  pointer-events: auto; /* 卡片本体不拦截输入，仅跳过按钮可点 */
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(120, 145, 175, .55);
  background: rgba(255, 255, 255, .92);
  color: #51677E;
  font-family: inherit;
  font-size: clamp(10px, 2.8vw, 12px);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(146, 164, 186, .65);
}
.tut-skip:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }

/* 动态指引小手：绝对定位压住目标卡牌上方 */
.tut-hand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -112%);
  font-size: clamp(30px, 9vw, 44px);
  line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(8, 15, 24, .55));
  animation: tut-point 1.05s ease-in-out infinite;
  transition: left .22s ease, top .22s ease;
  will-change: transform, left, top;
}
@keyframes tut-point {
  0%, 100% { transform: translate(-50%, -112%) scale(1); }
  50% { transform: translate(-50%, -128%) scale(1.08); }
}
.tut-hand.hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tut-hand { animation: none; }
  .iq-pill::after { animation: none; }
}

/* (appended) prism-gem sizing in fail/result/lobby surfaces (2026-10-23) */
.fail-revive .prism-gem { width: 1.15em; height: 1.15em; vertical-align: -0.15em; display: inline-block; }
.shard-fly .prism-gem { width: 30px; height: 30px; display: inline-block; }
.portal-chip-caption .prism-gem-sm { width: 12px; height: 12px; vertical-align: -2px; display: inline-block; }

/* Delta20/T094: result home button */
.result-home-btn {
  position: absolute; top: 10px; left: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.18); color: #fff;
  font-size: 16px; cursor: pointer; z-index: 5;
}
.result-home-btn:hover { background: rgba(255,255,255,.32); }

/* =========================================================
 * Δ22b/T110: 连击微光艺术字飘字（FR-050 §9）
 *   锚点：#dock 正下方（JS 逐次换算至 #app 坐标系，不缓存布局）
 *   命中安全：整层 pointer-events:none + z-index:60
 *   （高于 #dock/#board-wrap 的 z-index:2，低于弹窗/结算层 20/25）
 *   视觉：圆润字重 800 + 字距 .04em + 柔和发光描边 + 半透明毛玻璃胶囊底衬
 * ========================================================= */
#combo-float-layer {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  overflow: hidden;
}
.combo-float-row {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.combo-float {
  --cf-core: #BFE9FF;
  --cf-glow: rgba(120, 200, 255, .85);
  position: relative;
  display: inline-block;
  padding: .2em .8em;
  border-radius: 999px;
  font-size: clamp(15px, 4.2vw, 21px);
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.24;
  color: var(--cf-core);
  white-space: nowrap;
  text-shadow: 0 0 10px var(--cf-glow), 0 0 22px var(--cf-glow), 0 2px 6px rgba(8, 15, 30, .55);
  transform-origin: 50% 62%;
  animation: combo-float-life 1120ms cubic-bezier(.22, .9, .3, 1) forwards;
  will-change: transform, opacity;
}
/* 半透明毛玻璃胶囊底衬（::before 承载，避免与流光文字的 background-clip 冲突）
 * 深色磨砂而非白纱：卡牌与风景底图偏亮，浅底衬会让浅色艺术字发虚不可读 */
.combo-float::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(16, 26, 44, .42);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 6px 20px rgba(6, 12, 24, .38), inset 0 0 12px rgba(255, 255, 255, .10);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
/* 分级配色：冰蓝（Combo ×2）/ 翠玉（Good!）/ 琥珀金（Great!）/ 极光紫金（Unbelievable!） */
.combo-float-t2 { --cf-core: #CDEEFF; --cf-glow: rgba(122, 202, 255, .88); }
.combo-float-t3 { --cf-core: #B9FFE2; --cf-glow: rgba(87, 224, 166, .90); }
.combo-float-t4 { --cf-core: #FFE7B4; --cf-glow: rgba(255, 177, 61, .92); }
.combo-float-t5 {
  color: transparent;
  background-image: linear-gradient(100deg, #FFFDF0 0%, #FFD37A 30%, #F0D4FF 66%, #BFF3FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  /* 暗色细描边：保证璀璨流光在亮底（天空/沙滩）上仍清晰可读 */
  -webkit-text-stroke: .6px rgba(24, 14, 44, .55);
  text-shadow: none;
  filter: drop-shadow(0 0 9px rgba(201, 174, 255, .95))
          drop-shadow(0 0 20px rgba(255, 209, 122, .80))
          drop-shadow(0 2px 5px rgba(8, 15, 30, .70));
}
.combo-float-t5::before {
  background: linear-gradient(100deg, rgba(44, 28, 8, .62), rgba(28, 18, 50, .66));
  border-color: rgba(255, 236, 176, .58);
  box-shadow: 0 6px 24px rgba(58, 34, 120, .45), inset 0 0 14px rgba(255, 240, 190, .22);
}
/* 生命周期 1120ms：0~650ms 弹性放大（easeOutBack），随后平滑上浮淡出 */
@keyframes combo-float-life {
  0% {
    opacity: 0;
    transform: scale(.6) translateY(8px);
    animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);
  }
  58% { /* 650ms / 1120ms */
    opacity: 1;
    transform: scale(1.05) translateY(-6px);
    animation-timing-function: cubic-bezier(.33, .05, .3, 1);
  }
  100% {
    opacity: 0;
    transform: scale(1.02) translateY(-34px);
  }
}
/* reduced-motion：退化为纯淡入淡出（无缩放 / 无位移），保留可读性 */
@keyframes combo-float-fade {
  0% { opacity: 0; }
  18% { opacity: 1; }
  76% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .combo-float {
    animation: combo-float-fade 900ms ease-out forwards;
  }
}