/* ==========================================================================
   理想型·加载中 R10 · 游戏主界面 style.css（「99%」深夜酒馆皮）
   视觉真源 = /theme-v2.css（暖黑酒红底 + 琥珀灯 + 黄铜木质）
   规则：本文件不出现字面色相，一律 var(--...)；仅允许纯黑/纯白的
   阴影与高光辅助（与 theme-v2 自身写法一致）。

   R10 三条硬约束（Kim 两版被否的教训，写在最上面）：
   1. 禁满屏重复格纹 —— 一处 repeating 装饰纹都不留。
   2. 禁裸 linear-gradient 当装饰 —— 渐变只允许出现在「某个被画出来的东西」
      身上（木纹、黄铜棱、酒液、灯池、玻璃反光），不允许当背景板刷。
   3. 高级感 = 工艺密度 + 沉浸感。每个组件都必须是店里的一件实物：
      题卡=吧台菜单板 / 按钮=杯垫·黄铜牌 / 房间码=包厢门牌 /
      准备状态=酒杯满上 / 进度=酒液刻度 / 罚酒=一整杯灌下去。
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  min-height: 100%;
}

html {
  background: var(--bar-bg-deep);
  overflow-x: clip; /* 防止 position:fixed 元素的绘制区扩大 html.scrollWidth（scoreSlam 动画时期） */
}

/* 全局舞台 = 站在吧台前往里看：
   顶上两盏吊灯的光池 → 后吧台酒瓶剪影与层板（画出来的 SVG 场景）→ 脚下暗地板。
   一张不重复的整幅场景图，不是纹理。 */
body {
  position: relative;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--ink-hi);
  font-family: var(--font-sans);
  background-color: var(--bar-bg);
}

/* 场景层：后吧台（固定，不随滚动重复） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--scene-backbar);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
  opacity: 0.92;
}

/* 空气层：灯下的暖雾 + 包厢暗角（让内容浮在场景之上，且四角敢暗） */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 66% 36% at 22% 2%, var(--glow-purple-45), transparent 62%),
    radial-gradient(ellipse 56% 30% at 84% 6%, var(--glow-pink-18), transparent 60%),
    radial-gradient(ellipse 70% 30% at 56% 100%, var(--glow-cyan-16), transparent 66%),
    radial-gradient(ellipse 128% 92% at 50% 44%, transparent 48%, rgba(5, 3, 12, 0.72) 100%);
}

button,
input,
select {
  font: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.app {
  position: relative;
  z-index: 1;
  width: min(100%, 720px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(24px, calc(env(safe-area-inset-top) + 18px)) 20px calc(34px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 顶端：吧台挂杆（R11 = 一根通电的粉色霓虹灯管，不再是铜条） */
.app::before {
  content: "";
  height: 6px;
  width: min(140px, 38%);
  margin: 0 auto 8px;
  border-radius: var(--radius-pill);
  background-image: linear-gradient(
    180deg,
    var(--neon-pink-hot) 0 34%, var(--neon-pink) 34% 100%);
  box-shadow: 0 0 10px var(--glow-pink-70), 0 0 26px var(--glow-pink-40);
}

/* 大标题保留像素字（Kim 过关资产：logo + 大标题），正文一律不用 */
h1,
h2 {
  color: var(--ink-hi);
  text-wrap: balance;
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 26px var(--glow-amber-25);
}

h1 {
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: 0.04em;
}

h2 {
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* 霓虹招牌字 */
.neon {
  color: var(--neon-pink-hot);
  text-shadow: var(--neon-text-pink);
  animation: neon-flicker 7s linear infinite;
}

.brand-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

/* 店招小灯箱：黄铜边框 + 灯箱里那点暖光（不是发光的塑料方块） */
.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: var(--radius-sm);
  border: var(--stroke) solid var(--brass-dim);
  background-color: var(--bar-bg-deep);
  background-image: radial-gradient(ellipse 80% 70% at 50% 12%, var(--glow-amber-25), transparent 72%);
  box-shadow: var(--edge-brass), 0 5px 12px rgba(0, 0, 0, 0.55);
  user-select: none;
  overflow: hidden;
}
.brand-mark svg {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

.drink-choice-grid button {
  display: grid;
  min-width: 0;
  place-items: center;
  gap: 2px;
  font-size: 21px;
}

.drink-choice-grid small {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-mid);
}

.drink-choice-grid button.sel small { color: var(--ink-hi); }

/* --- 入座第四问「今晚想品鉴谁」（R9 PRD §3.2）---
   与称呼/杯子/罚酒三连问同一套外观（复用 .emoji-grid + .drink-choice-grid 的按钮样式），
   只把轨道换成三等分。必须写成 .emoji-grid.seek-choice-grid：.emoji-grid 的 5 轨规则
   在本文件里排在后面，同优先级会赢，加一层类才盖得住。
   minmax(0, 1fr) 保证 390 宽零横向溢出。 */
.emoji-grid.seek-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.emoji-grid.seek-choice-grid button { min-width: 0; }

.seek-choice-grid small {
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* 选中态跟着 .sel 走（.emoji-grid button.sel 已给霓虹粉描边），这里只补取向问的青色提示线 */
.seek-note {
  margin-top: -2px;
  font-size: 12.5px;
  line-height: 1.5;
  border-left: 3px solid var(--neon-cyan);
  padding-left: 9px;
}

.amber {
  color: var(--neon-amber);
  text-shadow: var(--neon-text-amber);
}

.dim,
.progress,
.wait-list {
  color: var(--ink-mid);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
}

/* 面板 = 吧台菜单板：深木背板 + 顶端黄铜压条 + 灯从上面烘下来
   （原「玻璃卡片」名字保留，全站在用；material 换成木+铜） */
.glass {
  position: relative;
  border: 0;
  border-radius: var(--radius-card);
  padding: 22px 20px 20px;
  color: var(--ink-hi);
  background-color: var(--panel-solid);
  background-image:
    /* 顶端灯池：这块板被吊灯烘着 */
    radial-gradient(ellipse 72% 44% at 50% -6%, var(--glow-amber-25), transparent 66%),
    /* 绒面光泽（画出来的一层，不是刷渐变） */
    var(--tex-velvet);
  box-shadow: var(--shadow-panel);
  overflow: hidden; /* 裁切动画溢出（scoreSlam scale/blur 会临时撑宽 scrollWidth） */
}

/* 菜单板顶端的黄铜压条（画出来的金属件，撑住整块板的「实物感」） */
.glass::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  pointer-events: none;
  background-image: var(--scene-counter);
  background-size: 100% 100%;
  opacity: 0.95;
}

/* 板子右上角那颗黄铜螺丝（挂在墙上的板都得拧俩钉） */
.app > .glass::after {
  content: "";
  position: absolute;
  inset: 13px 12px auto auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-image:
    linear-gradient(122deg, transparent 0 40%, var(--brass-shade) 40% 60%, transparent 60% 100%),
    radial-gradient(circle at 34% 30%, var(--brass-hi), var(--brass) 46%, var(--brass-dim) 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), inset 0 -1px 1px rgba(0, 0, 0, 0.5);
}

.phase-in > * {
  animation: rise 0.34s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.phase-in > *:nth-child(2) { animation-delay: 0.04s; }
.phase-in > *:nth-child(3) { animation-delay: 0.08s; }
.phase-in > *:nth-child(4) { animation-delay: 0.12s; }
.phase-in > *:nth-child(n + 5) { animation-delay: 0.16s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 按钮 = 霓虹粉按键（主）/ 木杯垫（次） ----------
   R11（Kim：「不兴奋」）：主 CTA 从黄铜牌换成霓虹粉/紫。
   发光预算放宽到「主 CTA + 激活态 + 招牌」三处，仅此三处，仍禁满屏发光。 */
.btn {
  position: relative;
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--radius-btn);
  color: #fff;
  background-image: linear-gradient(
    168deg,
    var(--neon-pink-hot) 0%, var(--neon-pink) 46%,
    #e01d6b 74%, var(--neon-purple) 100%);
  box-shadow: var(--box-neon-cta);
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.32), 0 0 12px rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.btn:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow:
    var(--edge-neon),
    0 4px 0 #8f1240,
    0 0 40px var(--glow-pink-70),
    0 16px 34px rgba(0, 0, 0, 0.55);
}

/* 按下去 = 灯管被按进台面里（光同时收一档） */
.btn:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: var(--edge-neon), 0 0 0 #8f1240, 0 0 16px var(--glow-pink-40), 0 4px 10px rgba(0, 0, 0, 0.55);
}

/* 失效 = 没擦的旧铜牌，蒙了一层灰 */
.btn:disabled {
  color: var(--ink-ghost);
  background-image: none;
  background-color: var(--bar-bg-raise);
  box-shadow: var(--edge-wood), 0 3px 0 rgba(0, 0, 0, 0.45);
  text-shadow: none;
  cursor: not-allowed;
}

/* 次按钮 = 木杯垫：压印的木片，不抢主铜牌 */
.btn.ghost {
  color: var(--ink-hi);
  background-color: var(--wood);
  background-image: var(--tex-wood);
  box-shadow: var(--edge-wood), 0 3px 0 var(--wood-dim), 0 8px 18px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
  letter-spacing: 0.05em;
}

.btn.ghost:hover:not(:disabled) {
  color: var(--neon-cyan-soft);
  filter: none;
  box-shadow: var(--edge-wood), 0 3px 0 var(--wood-dim), 0 8px 18px rgba(0, 0, 0, 0.45), 0 0 18px var(--glow-cyan-16);
}

.btn.small {
  display: inline-flex;
  width: auto;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  font-size: 15px;
  white-space: nowrap;
}

/* 降级为小字链接的次要动作（?room 动线里的「另开一桌」） */
.link-btn {
  display: inline-block;
  padding: 8px 4px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-btn:hover { color: var(--neon-cyan-soft); }

/* 输入框 / 下拉 = 刻进木头里的凹槽（写在点单本上的那一行） */
input[type="text"],
select {
  width: 100%;
  min-height: 50px;
  padding: 12px 13px;
  border: var(--stroke-thin) solid var(--brass-dim);
  border-radius: var(--radius-sm);
  outline: none;
  color: var(--ink-hi);
  background-color: var(--bar-bg-deep);
  box-shadow: var(--edge-carve);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 650;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
select:focus {
  border-color: var(--brass);
  box-shadow: var(--focus-ring), var(--edge-carve);
}

input::placeholder {
  color: var(--ink-dim);
  font-weight: 550;
}

select option {
  color: var(--ink-hi);
  background: var(--bar-bg-deep);
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.grow {
  flex: 1;
  min-width: 0;
}

.center { text-align: center; }

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hidden { display: none !important; }

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(48px, 1fr));
  gap: 8px;
}

/* 选项格 = 一摞木杯垫，选中的那张被挑出来放到灯下 */
.emoji-grid button {
  min-width: 48px;
  min-height: 52px;
  padding: 7px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink-hi);
  background-color: var(--wood);
  background-image: var(--tex-wood);
  box-shadow: var(--edge-wood), 0 3px 0 var(--wood-dim), 0 6px 14px rgba(0, 0, 0, 0.4);
  font-size: 25px;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.emoji-grid button:active { transform: translateY(3px); box-shadow: var(--edge-wood), 0 0 0 var(--wood-dim); }

.emoji-grid button.sel {
  background-color: var(--wood-hi);
  box-shadow:
    var(--edge-brass),
    0 3px 0 var(--brass-shade),
    0 8px 18px rgba(0, 0, 0, 0.45),
    0 0 22px var(--glow-amber-55);
}

/* 今晚特调徽章 = 挂在杯脚上的酒单小吊牌 */
.cocktail-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 0;
  border-left: 4px solid var(--brass);
  border-radius: var(--radius-sm);
  background-color: var(--velvet);
  background-image: var(--tex-velvet);
  box-shadow: var(--edge-brass), 0 6px 16px rgba(0, 0, 0, 0.45);
  text-align: left;
}

.cocktail-chip .ck-glass { font-size: 26px; flex: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }

.cocktail-chip b {
  display: block;
  color: var(--amber-hi);
  text-shadow: var(--neon-text-amber);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.04em;
}

.cocktail-chip span {
  display: block;
  color: var(--ink-mid);
  font-size: 12px;
  line-height: 1.45;
}

.players {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 座位行 = 吧台上的一格位置：木条 + 一枚黄铜座位牌 */
.player {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  overflow: hidden;
  border: 0;
  border-left: 4px solid var(--brass);
  border-radius: var(--radius-sm);
  color: var(--ink-hi);
  background-color: var(--bar-bg-raise);
  background-image: var(--tex-wood);
  box-shadow: var(--edge-wood), 0 5px 14px rgba(0, 0, 0, 0.4);
  font-size: 16px;
  font-weight: 700;
}

.player:nth-child(even) { border-left-color: var(--brass-dim); }
.player > span:first-child { font-size: 23px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }

.player b {
  max-width: 12em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player .tag {
  flex: none;
  padding: 3px 9px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--wood-dim);
  background-image: linear-gradient(172deg, var(--brass-hi) 0%, var(--brass) 40%, var(--brass-dim) 100%);
  box-shadow: var(--edge-brass), 0 2px 5px rgba(0, 0, 0, 0.55);
  font-size: 12px;
  font-weight: 800;
}

.player .kickBtn,
.player .stats { margin-left: auto; }
.player .stats { color: var(--ink-dim); font-size: 13px; }
.player.offline { opacity: 0.55; border-left-color: var(--ink-ghost); }

.player.offline b::after {
  content: " / offline";
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 600;
}

/* 房间码 = 包厢门牌（圣经 §五）：钉在门上的黄铜牌，号码是刻上去再镀暗的。
   四角四颗螺丝由 ::before 画出，牌面木底衬在铜牌后 → 一眼看懂是「门牌」。 */
/* R11：门牌从「黄铜刻字」换成「霓虹门号」—— 号码本身是灯管，牌面是暗紫板。
   这是大厅三件事里的第一件，必须是全屏最亮最大的一块。 */
.roomcode {
  position: relative;
  padding: 22px 16px 20px;
  border: 0;
  border-radius: var(--radius-btn);
  color: #fff;
  background-color: var(--bar-bg-deep);
  background-image: radial-gradient(ellipse 82% 78% at 50% 44%, rgba(255, 45, 120, 0.16), transparent 72%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 140, 185, 0.45),
    inset 0 0 22px -6px var(--glow-pink-40),
    0 0 26px var(--glow-pink-40),
    0 18px 34px rgba(0, 0, 0, 0.6);
  font-family: var(--font-pixel);
  font-size: clamp(50px, 14.5vw, 74px);
  line-height: 1;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  /* 灯管字：白芯 + 粉晕 */
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.95),
    0 0 12px var(--neon-pink-hot),
    0 0 30px var(--glow-pink-70),
    0 0 60px var(--glow-pink-40);
}

/* 门牌四角的螺丝 */
.roomcode::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 6px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(201, 166, 255, 0.14);
  /* R11 修 bug：原写法 `circle 4px at 6px 6px` 的最后一个色标会把**整块**填成
     brass-shade（不透明），把房间码数字整个盖住。改成四张 9×9 的小图各定位到
     一个角，角外一律 transparent —— 只画螺丝，不遮字。 */
  background-image:
    radial-gradient(circle at 50% 50%, var(--brass-hi) 0 32%, var(--brass-shade) 36% 80%, transparent 82%),
    radial-gradient(circle at 50% 50%, var(--brass-hi) 0 32%, var(--brass-shade) 36% 80%, transparent 82%),
    radial-gradient(circle at 50% 50%, var(--brass-hi) 0 32%, var(--brass-shade) 36% 80%, transparent 82%),
    radial-gradient(circle at 50% 50%, var(--brass-hi) 0 32%, var(--brass-shade) 36% 80%, transparent 82%);
  background-size: 9px 9px;
  background-position:
    3px 3px,
    calc(100% - 3px) 3px,
    3px calc(100% - 3px),
    calc(100% - 3px) calc(100% - 3px);
  background-repeat: no-repeat;
}

/* 二维码 = 压在门牌下的小卡片 */
.qr-wrap {
  display: inline-block;
  margin: 4px auto;
  padding: 10px;
  border: var(--stroke) solid var(--brass-dim);
  border-radius: var(--radius-sm);
  background: #fff; /* 扫码可靠性：码区保持白底 */
  box-shadow: var(--edge-brass), 0 10px 26px rgba(0, 0, 0, 0.55);
}

.qr-wrap canvas {
  display: block;
  max-width: 100%;
  border-radius: 2px;
}

/* ---------- 抽签舞台 ---------- */
.stick-stage {
  display: flex;
  flex-direction: column;
  /* R13：签筒缩小后 620 会在筒下方留一大片空场（读起来像「箱子被扔在空房间里」）。
     压到 520，筒的底座正好落在背景那条 62% 台面线附近。 */
  min-height: 520px;
  padding: 30px 20px;
  overflow: hidden;
  align-items: center;
  gap: 20px;
  /* 抽签舞台 = 站在吧台前：后墙酒瓶剪影（画出来的场景）+ 台面暗色实心块（R12 去木纹） */
  background-color: var(--bar-bg-deep);
  background-image:
    var(--scene-backbar),
    linear-gradient(180deg, transparent 0 62%, var(--bar-floor) 62% 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: 50% -8%, 50% 100%;
  background-size: 128% auto, 100% 100%;
}

/* 吧台台面：一条压在舞台底部的暗色台沿（R12 去木纹，只留台面剖面 SVG） */
.stick-stage::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 74px;
  background-color: var(--bar-counter);
  background-image: var(--scene-counter);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 14px;
  box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.55), inset 0 12px 26px -12px var(--glow-amber-25);
}

/* ===== 签筒（R13：Kim 判上一版「很诡异」——巨大近黑箱子怼在版心、签全藏没、
   筒身印粉色 100，读成智能音箱/垃圾桶）。本轮四条整改，全部只在 CSS 里做：
     ① 比例：筒身 150px 宽 ×178px 高（390 屏 ≈38%），不再霸屏；筒下留一条台面线，
        整个组件往版心偏下摆，读作「坐在吧台上的一个筒」。
     ② 形态：真圆柱——筒口一圈明显椭圆开口（口沿高光 + 口内两道暗面），
        筒身左右两侧压暗中间提亮（圆柱明暗），筒口收边 + 两道黄铜箍线。
     ③ 签可见：静止态 7 根签的签头在筒口内明显可见（露出口沿 9-19px、参差高低）。
        HTML 只有 3 个 .stick（不能动），另外 4 根由 .stick::before/::after 画。
     ④ 数字：筒身上的「100」删掉，充能百分比只留筒下方那行文字。

   前后遮挡仍靠 DOM 绘制顺序，不动 HTML（结构固定为
   .stick-cup > .stick.s1 + .stick.s2 + .stick.s3）：
     ::before —— 筒口（在签之前绘制 → 签压在开口里）
     .stick   —— 签（含各自的伪元素兄弟签）
     ::after  —— 筒前壁（在签之后绘制 → 遮住口沿以下的签身）

   坐标基准：.stick-cup 盒 180×224，筒身左右各内缩 26px（= 128 宽 ×196 高）。
   高:宽 ≈ 1.53 且筒身向下收 9px（clip-path 微锥），才读得出「签筒」而不是「桶」。
   筒口椭圆中心 (90, 20)、rx 64 / ry 20；前壁上沿 y=20；盒底 28px 是台面带。 */
.stick-cup {
  position: relative;
  /* 盒子比筒身宽/高一圈：筒缩小了，但可点区域反而比上一版（138×174 = 24012）大 */
  width: 180px;
  height: 224px;
  margin-top: 96px;
  border: 0;
  /* 本体只画「筒坐在台面上」这件事：一条淡出的台沿高光 + 一团接触影。
     筒口由 ::before 画、筒身由 ::after 画。 */
  background-color: transparent;
  background-image:
    radial-gradient(ellipse 42% 46% at 50% 50%, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4) 52%, transparent 76%),
    linear-gradient(90deg, transparent 0, var(--brass-dim) 10%, var(--brass-hi) 50%, var(--brass-dim) 90%, transparent 100%);
  background-size: 100% 40px, 100% 2px;
  background-position: 50% calc(100% - 10px), 50% calc(100% - 24px);
  background-repeat: no-repeat;
  cursor: pointer;
  will-change: transform;
}

/* 筒口 = 一个真的开口：黄铜口沿椭圆 + 口内前后两道暗面（画在签后面，所以签在口里） */
.stick-cup::before {
  content: "";
  position: absolute;
  inset: 0 26px auto 26px;
  height: 40px;
  border: var(--stroke-bold) solid var(--brass-dim);
  border-radius: 50%;
  background-color: #0a0710;
  background-image: radial-gradient(ellipse 82% 130% at 50% 4%, #000 0%, transparent 78%);
  box-shadow:
    inset 0 7px 11px -6px rgba(0, 0, 0, 0.95),
    inset 0 -11px 16px -7px rgba(0, 0, 0, 0.9),
    0 -1px 0 var(--glass-edge),
    0 1px 0 var(--brass-hi);
}

/* 筒前壁 = 签筒的正脸。R13 去掉「100」，只留材质：
   最上一层是圆柱明暗（两侧压暗、左侧一道打光棱），它同时把下面两道箍线的两端吃掉，
   让直线箍读起来像绕过去的弧。 */
.stick-cup::after {
  content: "";
  position: absolute;
  inset: 20px 26px 28px 26px;
  border: var(--stroke-thin) solid var(--line-counter);
  /* 上沿走椭圆（筒口前唇，跟 ::before 的口沿同一条弧），下沿是筒底的圆角 */
  border-radius: 50% 50% 22px 22px / 20px 20px 14px 14px;
  /* 微锥：底比口窄 7px。签筒是「口大底小」的，正的圆柱反而像桶 */
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 7px 100%);
  background-color: #2b2140;
  background-image:
    /* ① 圆柱明暗（最上层）：两侧压暗、中偏左提亮 —— 「圆」全靠这一层 */
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 13%, rgba(0, 0, 0, 0) 34%,
      rgba(255, 255, 255, 0.06) 44%, rgba(0, 0, 0, 0) 60%,
      rgba(0, 0, 0, 0.3) 79%, rgba(0, 0, 0, 0.66) 100%),
    /* ② 打光棱 */
    linear-gradient(90deg, transparent 0 17%, rgba(233, 240, 255, 0.17) 17% 22%, transparent 22% 100%),
    /* ③ 箍线 · 上（黄铜细线：暗底 + 受光） */
    linear-gradient(180deg, transparent 0 42px, var(--brass-shade) 42px 43px, var(--brass) 43px 45px, var(--brass-hi) 45px 46px, transparent 46px),
    /* ④ 箍线 · 下 */
    linear-gradient(180deg, transparent 0 122px, var(--brass-shade) 122px 123px, var(--brass) 123px 125px, var(--brass-hi) 125px 126px, transparent 126px),
    /* ⑤ 筒身本体：上暗（近口）下略受台灯 */
    linear-gradient(180deg, #241b34 0%, #372a4e 48%, var(--bar-counter) 100%);
  box-shadow:
    /* 筒口收边：沿着椭圆上沿的一道亮唇 */
    inset 0 3px 0 -1px rgba(176, 148, 104, 0.85),
    inset -10px -14px 20px -6px rgba(0, 0, 0, 0.55),
    /* §5.2 精修：右侧一道极淡的霓虹粉环境光（吧台灯从右后方洗过来） */
    inset -6px 0 12px -7px var(--glow-pink-40),
    /* 筒底一圈内暗，把「底是圆的」交代掉（外投影交给 .stick-cup 的接触影，
       因为 clip-path 会把本元素的外阴影一起裁掉） */
    inset 0 -10px 14px -8px rgba(0, 0, 0, 0.8);
}

/* 签：亮签头 + 琥珀颈 + 暗签身。默认 translate 为 0 = 站在筒里、签头露在口内。
   探出用 translate 属性（不用 transform），才不会覆盖各根签自己的 rotate。 */
.stick-cup .stick,
.stick-cup .stick::before,
.stick-cup .stick::after {
  position: absolute;
  width: 9px;
  height: 126px;
  border: var(--stroke-thin) solid var(--line-counter);
  border-radius: 5px 5px 2px 2px;
  /* §5.2 美术精修：琥珀签头(顶亮芯) → 黄铜颈箍一道 → 暗签身（道具感三段式；
     原签身用 --ink-mid 浅紫，弹出后像根白签——换成紫黑签身，受光面留一丝提亮） */
  background-image: linear-gradient(90deg, rgba(243, 236, 255, 0.1) 0 2px, transparent 2px),
    linear-gradient(180deg,
    var(--amber-hi) 0 4px, var(--neon-amber) 4px 13px,
    var(--brass-hi) 13px 14px, var(--brass-dim) 14px 16px,
    var(--bar-bg-wall) 16px 100%);
  box-shadow: 0 0 6px var(--glow-amber-25);
}

.stick-cup .stick {
  translate: 0 0;
  transition: translate 0.22s cubic-bezier(0.2, 1.5, 0.4, 1);
}

/* HTML 只给了 3 根签，另外 4 根用伪元素补齐 —— 一共 7 根，签头参差高低。
   前壁上沿在 y=20，所以各签露出口沿 9~17px（横坐标都压在筒口椭圆内）。 */
.stick-cup .stick::before,
.stick-cup .stick::after {
  content: "";
  translate: 0 0;
}

.stick-cup .s1 { left: 46px; top: 10px; transform: rotate(-4deg); }
.stick-cup .s1::before { left: 13px; top: -6px; transform: rotate(3deg); }
.stick-cup .s1::after { left: 26px; top: 2px; transform: rotate(-2deg); }
.stick-cup .s2 { left: 85px; top: 3px; }
.stick-cup .s2::before { left: 13px; top: 5px; transform: rotate(4deg); }
.stick-cup .s3 { left: 111px; top: 6px; transform: rotate(3deg); }
.stick-cup .s3::after { left: 13px; top: 5px; transform: rotate(-3deg); }

/* ===== 动效（PRD-append-0812 §5.2 红线重做）=====
   静止态零动画：签插在筒里完全静止——原「充能态 7 签 stickJostle infinite」
   与「.shaking infinite」全部删除，整段 CSS 里不允许再出现 infinite。
   摇的过程仍由 app.js animateCup() 按真实摇动强度驱动（事件触发、自然衰减，有始有终）。 */

/* 手指按住签筒：签探出一点，纯按压反馈（transition 回弹，无循环） */
.stick-stage .stick-cup:active .stick { translate: 0 -30px; }
.stick-stage .stick-cup:active .s2 { translate: 0 -40px; }

/* 出签定格态（drawn）：中签那根（s2）定在口沿之上，签头被灯照亮。
   re-render 重建 DOM 时 class 已在身上 → 直接呈现定格帧，不重播动画。
   s2::before 是它的伪元素兄弟签（DOM 上是子节点，会被父签的 translate 带着走）——
   给它一个等量反向位移，让它稳稳留在筒里：弹出的永远只有一支。 */
.stick-cup.drawn .s2 { translate: 0 -62px; }
.stick-cup.drawn .s2::before { translate: 0 62px; box-shadow: 0 0 6px var(--glow-amber-25); }
.stick-cup.drawn .s2,
.stick-cup.burst .s2 { box-shadow: 0 0 14px var(--glow-amber-55); }

/* 出签瞬间（burst，只在 drawn 翻转的那一帧挂上）：
   整筒短促晃动(0.36s) → 中签带缓动弹出、过冲回落定格(0.3s 起、~1.0s 收) → 签面牌 0.7s 进场。
   全程 ≤1.5s，收在定格帧。 */
.stick-cup.burst { animation: cupRattle 0.36s ease-in-out both; }
.stick-cup.burst .s2 { animation: stickLeap 0.72s cubic-bezier(0.18, 1.35, 0.32, 1) 0.3s both; }
/* 兄弟签的反向补偿：同曲线同节奏，视觉上它一动不动 */
.stick-cup.burst .s2::before { animation: stickStay 0.72s cubic-bezier(0.18, 1.35, 0.32, 1) 0.3s both; }

@keyframes cupRattle {
  0%, 100% { transform: rotate(0); }
  22% { transform: rotate(-6deg) translateX(-3px); }
  48% { transform: rotate(5deg) translateX(3px); }
  74% { transform: rotate(-2.5deg) translateX(-2px); }
}

@keyframes stickLeap {
  0% { translate: 0 0; }
  62% { translate: 0 -76px; }
  100% { translate: 0 -62px; }
}

@keyframes stickStay {
  0% { translate: 0 0; }
  62% { translate: 0 76px; }
  100% { translate: 0 62px; }
}

/* 签面牌等中签弹出后再进场（只在 burst 同帧渲染时延迟；纯 drawn 重绘不延迟） */
.stick-cup.burst ~ .stick-out { animation-delay: 0.7s; animation-fill-mode: backwards; }

@media (prefers-reduced-motion: reduce) {
  .stick-cup.burst,
  .stick-cup.burst .s2,
  .stick-cup.burst .s2::before { animation-duration: 0.01s; animation-delay: 0s; }
  .stick-cup.burst ~ .stick-out { animation-delay: 0s; }
}

/* 抽出来的那根签：被灯照着的琥珀签牌（R12 去掉签身上的假木纹条） */
.stick-out {
  max-width: 100%;
  padding: 16px 20px;
  overflow-wrap: anywhere;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--wood-dim);
  background-color: var(--neon-amber);
  background-image:
    radial-gradient(ellipse 90% 120% at 30% 0%, rgba(255, 240, 210, 0.65), transparent 68%);
  box-shadow: var(--edge-brass), 0 0 26px var(--glow-amber-55), 0 12px 26px rgba(0, 0, 0, 0.55);
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.35;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 244, 220, 0.6);
  animation: stickPop 0.55s cubic-bezier(0.2, 1.6, 0.4, 1);
}

@keyframes stickPop {
  from { opacity: 0; transform: translateY(60px) scale(0.5); }
  to { opacity: 1; transform: none; }
}

@keyframes pop {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* 进度 = 酒液刻度（圣经 §五）：一支横放的量酒杯，酒液从左边灌进去。
   槽壁是玻璃（内凹高光），酒是琥珀，液面有一道亮边。 */
.progress-track {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 18px;
  overflow: hidden;
  border: var(--stroke-thin) solid var(--brass-dim);
  border-radius: var(--radius-pill);
  background-color: var(--bar-bg-deep);
  box-shadow: var(--edge-carve), 0 0 0 3px rgba(0, 0, 0, 0.28);
}

/* 玻璃上的反光条（画在槽壁上，不随酒液动） */
.progress-track::after {
  content: "";
  position: absolute;
  inset: 2px 8px auto;
  height: 4px;
  border-radius: var(--radius-pill);
  background-image: linear-gradient(90deg, transparent, var(--glass-edge) 22%, transparent 62%);
  pointer-events: none;
}

.progress-fill {
  width: 0;
  height: 100%;
  background-color: var(--liquor);
  background-image:
    linear-gradient(180deg, rgba(255, 236, 200, 0.55) 0 20%, transparent 20% 62%, rgba(0, 0, 0, 0.3) 62% 100%),
    linear-gradient(90deg, var(--liquor-deep) 0%, var(--liquor) 40%, var(--neon-amber) 100%);
  box-shadow: 2px 0 0 var(--amber-hi), 0 0 16px var(--glow-amber-55);
  transition: width 0.15s ease;
}

/* 摇签进度播报：灯下的字 */
.stick-stage .progress {
  color: var(--amber-hi);
  text-shadow: var(--neon-text-amber);
  font-weight: 700;
}

/* 大比分（R11）：从「刻在铜牌上」改成「霓虹管数字」—— 打分是心动时刻 */
.score-val {
  color: #fff;
  font-family: var(--font-pixel);
  font-size: clamp(90px, 24vw, 132px);
  line-height: 0.98;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.95),
    0 0 14px var(--neon-pink-hot),
    0 0 34px var(--glow-pink-70),
    0 0 68px var(--glow-pink-40);
  transition: transform 0.1s ease;
}

.score-val.bump { animation: bump 0.18s ease; }

@keyframes bump { 40% { transform: scale(1.1); } }

input[type="range"] {
  width: 100%;
  height: 58px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: pan-x;
}

/* 打分滑杆（R11）= 霓虹刻度槽：越往右灯越亮，握把是一枚发光粉旋钮 */
input[type="range"]::-webkit-slider-runnable-track {
  height: 20px;
  border: var(--stroke-thin) solid var(--brass-dim);
  border-radius: var(--radius-pill);
  background-color: var(--bar-bg-deep);
  background-image:
    linear-gradient(180deg, rgba(255, 236, 245, 0.32) 0 22%, transparent 22% 64%, rgba(0, 0, 0, 0.38) 64% 100%),
    linear-gradient(90deg, var(--neon-purple) 0 10%, #d92a8e 52%, var(--neon-pink-hot) 100%);
  box-shadow: var(--edge-carve);
}

input[type="range"]::-webkit-slider-thumb {
  width: 46px;
  height: 46px;
  margin-top: -14px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 50%;
  background-image:
    linear-gradient(122deg, transparent 0 42%, rgba(0, 0, 0, 0.28) 42% 58%, transparent 58% 100%),
    radial-gradient(circle at 34% 28%, #ffe3ee 0 16%, var(--neon-pink-hot) 40%, var(--neon-pink) 72%, #a3134c 100%);
  box-shadow: var(--edge-neon), 0 4px 0 #8f1240, 0 0 20px var(--glow-pink-40), 0 8px 16px rgba(0, 0, 0, 0.6);
}

input[type="range"]::-moz-range-track {
  height: 20px;
  border: var(--stroke-thin) solid var(--brass-dim);
  border-radius: var(--radius-pill);
  background-color: var(--bar-bg-deep);
  background-image:
    linear-gradient(180deg, rgba(255, 236, 245, 0.32) 0 22%, transparent 22% 64%, rgba(0, 0, 0, 0.38) 64% 100%),
    linear-gradient(90deg, var(--neon-purple) 0 10%, #d92a8e 52%, var(--neon-pink-hot) 100%);
}

input[type="range"]::-moz-range-thumb {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background-image: radial-gradient(circle at 34% 28%, #ffe3ee 0 16%, var(--neon-pink-hot) 40%, var(--neon-pink) 72%, #a3134c 100%);
  box-shadow: var(--edge-neon), 0 4px 0 #8f1240, 0 0 20px var(--glow-pink-40);
}

.slider-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: -4px;
  padding: 0 18px;
  color: var(--ink-dim);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- 题卡 = 吧台菜单板（圣经 §五：组件拟物） ----------
   一块挂在吧台后的深木板，上下两根黄铜挂条，题目像今日特饮一样写在板上。
   左边缘的黄铜卡槽是「这一条是当前在点的那一道」。 */
.question-card {
  position: relative;
  overflow: hidden;
  padding: 30px 22px 24px 26px;
  border: 0;
  border-radius: var(--radius-card);
  color: var(--ink-hi);
  background-color: var(--wood);
  background-image:
    radial-gradient(ellipse 84% 52% at 50% -10%, var(--glow-amber-25), transparent 68%),
    var(--tex-wood);
  box-shadow:
    var(--edge-wood),
    0 20px 44px rgba(0, 0, 0, 0.6),
    inset 0 0 60px rgba(0, 0, 0, 0.35);
  font-family: var(--font-display);
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1.55;
  font-weight: 700;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.6);
}

/* 菜单板上下两根黄铜挂条 —— 板子是被吊起来的，不是浮在空中的 div */
.question-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 9px;
  background-image: var(--scene-counter);
  background-size: 100% 100%;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
}

/* 底部挂条（提高一档特异性压过 .app > .glass::after 的螺丝：菜单板挂着，不拧钉） */
.glass.question-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  width: auto;
  height: 6px;
  border-radius: 0;
  background-image: linear-gradient(180deg, var(--brass) 0 34%, var(--brass-dim) 34% 72%, var(--brass-shade) 72% 100%);
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.5);
  opacity: 0.9;
}

/* 辣度 = 灶台档位牌（圣经 §五：灶台三档火）：一小块烧热的铁牌，
   🌶️ 由 app.js 按 spice 给 1–3 个，牌子本体在这里画。 */
.question-card .spice {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 16px;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  color: var(--neon-red);
  background-color: var(--bar-bg-deep);
  background-image: linear-gradient(180deg, rgba(255, 226, 178, 0.13), rgba(0, 0, 0, 0.45));
  box-shadow: var(--edge-brass), 0 0 16px rgba(216, 84, 63, 0.32);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: 1px;
  text-shadow: none;
}

/* 结算行 = 吧台上的一张酒单小票（木托盘上排开） */
.reveal-row {
  position: relative;
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink-hi);
  background-color: var(--bar-bg-raise);
  background-image: var(--tex-wood);
  box-shadow: var(--edge-wood), 0 5px 14px rgba(0, 0, 0, 0.42);
  font-size: 16px;
  font-weight: 700;
}

.reveal-row b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reveal-row .g {
  flex: none;
  margin-left: auto;
  color: var(--amber-hi);
  font-family: var(--font-pixel);
  font-size: 25px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7), 0 0 14px var(--glow-amber-55);
}

.reveal-row.drink {
  background-color: var(--velvet);
  box-shadow: 5px 0 0 var(--neon-red) inset, var(--edge-wood), 0 6px 16px rgba(0, 0, 0, 0.45);
}

.reveal-row.exact {
  background-color: var(--wood-hi);
  box-shadow: 5px 0 0 var(--brass) inset, var(--edge-brass), 0 0 20px var(--glow-amber-25);
}

/* 徽章 = 盖在小票上的印章 */
.badge {
  flex: none;
  padding: 3px 9px;
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: var(--edge-brass);
  font-size: 12px;
  font-weight: 800;
}

.badge.drink { color: var(--ink-hi); background-color: var(--neon-red); box-shadow: var(--edge-brass), 0 0 12px rgba(216, 84, 63, 0.45); }
.badge.exact { color: var(--wood-dim); background-image: linear-gradient(172deg, var(--brass-hi), var(--brass) 46%, var(--brass-dim)); box-shadow: var(--edge-brass), 0 0 14px var(--glow-amber-55); }

/* 揭晓大分 = 心动时刻，马天尼粉在这里出场（圣经 §四：只给爆灯/揭晓/亮相/logo） */
.big-score {
  color: var(--neon-pink-hot);
  font-family: var(--font-pixel);
  font-size: clamp(82px, 22vw, 124px);
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-shadow: var(--neon-text-pink);
}

.big-score .unit {
  margin-left: 5px;
  color: var(--ink-mid);
  font-size: 28px;
  font-weight: 700;
  text-shadow: none;
}

.seq {
  opacity: 0;
  animation: rise 0.34s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  animation-delay: var(--d, 0s);
}

.seq-pop {
  opacity: 0;
  animation: badgeIn 0.3s cubic-bezier(0.2, 1.5, 0.4, 1) both;
  animation-delay: var(--d, 0s);
}

@keyframes badgeIn {
  from { opacity: 0; transform: scale(0.3); }
  to { opacity: 1; transform: scale(1); }
}

.seq-score {
  opacity: 0;
  animation: scoreSlam 0.42s cubic-bezier(0.2, 1.4, 0.35, 1) both;
  animation-delay: var(--d, 0s);
}

@keyframes scoreSlam {
  from { opacity: 0; transform: scale(1.8); filter: blur(6px); }
  60% { opacity: 1; filter: none; }
  to { opacity: 1; transform: scale(1); }
}

.drink-shake {
  opacity: 1 !important;
  animation: drinkShake 0.45s ease both;
  animation-delay: 0s;
}

@keyframes drinkShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  35% { transform: translateX(5px); }
  55% { transform: translateX(-4px); }
  75% { transform: translateX(3px); }
}

.float-txt {
  position: absolute;
  z-index: 5;
  top: 4px;
  right: 52px;
  color: var(--neon-red);
  font-size: 16px;
  font-weight: 800;
  text-shadow: 0 0 8px var(--glow-pink-40);
  pointer-events: none;
  animation: floatUp 0.6s ease-out both;
  animation-delay: var(--d, 0s);
}

@keyframes floatUp {
  from { opacity: 0; transform: translateY(6px) scale(0.7); }
  25% { opacity: 1; transform: translateY(-4px) scale(1.1); }
  to { opacity: 0; transform: translateY(-26px); }
}

.fx-layer {
  position: fixed;
  z-index: 200;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.fx-layer .confetti {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 15px;
  border: var(--stroke-thin) solid rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  animation: confettiFall 0.6s cubic-bezier(0.3, 0.6, 0.6, 1) both;
  will-change: transform, opacity;
}

@keyframes confettiFall {
  from { opacity: 1; transform: translate(0, 0) rotate(0); }
  to { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 80vh)) rotate(var(--rot, 540deg)); }
}

.fx-layer .cheer {
  position: absolute;
  font-size: 30px;
  animation: cheerPop 0.55s cubic-bezier(0.2, 1.2, 0.4, 1) both;
  will-change: transform, opacity;
}

@keyframes cheerPop {
  from { opacity: 0; transform: translate(0, 0) scale(0.4); }
  30% { opacity: 1; transform: translate(calc(var(--dx, 0) * 0.5), calc(var(--dy, 0) * 0.5)) scale(1.2); }
  to { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)); }
}

.flip-scene {
  perspective: 1200px;
}

.flip-card {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4.15;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.35, 0.1, 0.25, 1.2);
}

.flip-card.flipped { transform: rotateY(180deg); }

/* 亮相卡 = 装在黄铜相框里的一张照片，翻面是背后写的字 */
.flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-card);
  background-color: var(--panel-solid);
  box-shadow: var(--edge-brass), 0 26px 62px rgba(0, 0, 0, 0.62), 0 0 26px var(--glow-purple-20);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-face.back {
  gap: 10px;
  padding: 20px;
  overflow-y: auto;
  background-color: var(--velvet);
  background-image: var(--tex-velvet);
  transform: rotateY(180deg);
}

/* 生图等待：灯从画框上扫过（不是紫色 shimmer，是灯在找人） */
.art-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-bottom: var(--stroke) solid var(--brass-dim);
  background-color: var(--bar-bg-deep);
  background-image: linear-gradient(110deg, transparent 36%, var(--glow-amber-25) 50%, transparent 64%);
  background-size: 220% 100%;
  animation: shimmer 1.6s linear infinite;
}

.art-wrap.loaded {
  background: var(--bar-bg-deep);
  animation: none;
}

@keyframes shimmer {
  from { background-position: 130% 0; }
  to { background-position: -90% 0; }
}

/* R6：「你老公/老婆/老板/TA 来咯」彩蛋。文案不再写死在此，由 app.js 按模组×性别
   注入 .waiting-egg 真实元素（MODULE_PROFILES.waiting）。立绘登场那刻弹出并常驻可见。 */
.waiting-egg {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 3;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(26, 10, 14, 0.66);
  border: var(--stroke-thin) solid var(--brass-dim);
  color: var(--neon-pink-hot);
  text-shadow: var(--neon-text-pink);
  font-family: var(--font-pixel);
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  animation: eggPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             eggGlow 1.8s ease-in-out 0.5s infinite;
}

@keyframes eggPop {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.82); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes eggGlow {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 1; }
}

.art-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.art-wrap.loaded img { opacity: 1; }

.flip-face .caption {
  padding: 14px;
  border-top: 4px solid var(--brass);
  text-align: center;
  background-color: var(--panel-solid);
  background-image: var(--tex-velvet);
}

.flip-face .caption b { font-size: 22px; }

.detail-item {
  padding: 12px;
  border: 0;
  border-left: 4px solid var(--brass-dim);
  border-radius: var(--radius-sm);
  color: var(--ink-hi);
  background-color: var(--bar-bg-raise);
  background-image: var(--tex-velvet);
  box-shadow: var(--edge-wood), 0 5px 12px rgba(0, 0, 0, 0.4);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
}

.flip-hint {
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 650;
  text-align: center;
}

.poster-img {
  /* 海报是 1080×1920 竖图，桌面端宽容器下按宽度铺满会拉得极高，改为限高等比缩放 */
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
  border: var(--stroke) solid var(--brass-dim);
  border-radius: var(--radius-btn);
  box-shadow: var(--edge-brass), 0 22px 52px rgba(0, 0, 0, 0.65);
  animation: pop 0.35s ease;
}

/* toast = 马丁递过来的一张便条 */
.toast {
  position: fixed;
  z-index: 300;
  left: 50%;
  bottom: 90px;
  max-width: 84vw;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink-hi);
  background-color: var(--wood);
  background-image: var(--tex-wood);
  box-shadow: var(--edge-brass), 0 16px 34px rgba(0, 0, 0, 0.6);
  font-size: 15px;
  font-weight: 650;
  text-align: center;
  transform: translateX(-50%);
  animation: pop 0.3s ease;
}

/* 断线提示条：自动重连中为提示态，重连放弃后变成可点的手动重连按钮 */
.reconnect-bar {
  position: fixed;
  z-index: 320;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 50%;
  max-width: 88vw;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--neon-red);
  box-shadow: var(--edge-brass), 0 12px 28px rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: 750;
  font-family: inherit;
  transform: translateX(-50%);
  cursor: pointer;
}

.reconnect-bar.retrying {
  background-color: var(--wood);
  background-image: var(--tex-wood);
  color: var(--ink-hi);
  cursor: default;
}

.boot {
  margin-top: 40vh;
  color: var(--ink-mid);
  font-weight: 650;
  text-align: center;
}

/* ---------- 非诚勿扰灯板 = 吧台上方那排灯泡（心动时刻，粉在这里合法） ---------- */
.light-panel {
  overflow: hidden;
  background-color: var(--bar-bg-deep);
  background-image:
    radial-gradient(ellipse 80% 44% at 50% -4%, var(--glow-pink-18), transparent 66%),
    var(--tex-velvet);
}

.lamp-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

/* 单颗灯泡：黄铜灯座 + 没通电的玻璃壳 */
.lamp {
  width: 22px;
  height: 22px;
  border: var(--stroke-thin) solid var(--brass-dim);
  border-radius: 50%;
  background-color: var(--bar-bg-deep);
  background-image: radial-gradient(circle at 34% 28%, var(--glass-edge) 0 14%, transparent 42%);
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* 爆灯：灯泡通电 —— 全站最该出现马天尼粉的地方 */
.lamp.on {
  border-color: var(--brass);
  background-image: radial-gradient(circle at 34% 30%, #fff 0 15%, var(--neon-pink-hot) 20% 52%, var(--neon-pink) 76%);
  box-shadow: 0 0 18px var(--glow-pink-70), 0 0 34px var(--glow-pink-40);
  animation: lampPulse 1.6s ease-in-out infinite;
}

.lamp.dead {
  background-color: var(--bar-bg-deep);
  background-image: none;
  border-color: var(--brass-shade);
  opacity: 0.8;
}

@keyframes lampPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}

.light-count {
  color: var(--ink-hi);
  font-size: 18px;
  font-weight: 800;
}

.light-count .neon { font-size: 26px; }
.light-btns { width: 100%; }

/* 爆灯 = 心动时刻：整个按钮变成一盏亮起来的粉灯（全站少数几处马天尼粉之一） */
.btn.light-burst {
  color: #fff;
  background-color: var(--neon-pink);
  background-image: radial-gradient(ellipse 80% 120% at 30% 0%, var(--neon-pink-hot), transparent 70%);
  box-shadow: var(--edge-brass), 0 4px 0 var(--brass-shade), 0 0 30px var(--glow-pink-70);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.btn.light-burst:hover:not(:disabled) { filter: brightness(1.06); box-shadow: var(--edge-brass), 0 4px 0 var(--brass-shade), 0 0 44px var(--glow-pink-70); }

/* 灭灯 = 把灯关掉：暗下去的木牌 */
.btn.light-off {
  color: var(--ink-mid);
  background-color: var(--bar-bg-deep);
  background-image: var(--tex-wood);
  box-shadow: var(--edge-wood), 0 4px 0 var(--wood-dim);
  text-shadow: none;
}

.heart-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0 20%, var(--glow-pink-18) 20% 55%, var(--glow-pink-40) 55% 80%, transparent 80%);
  animation: glowFade 1.05s ease-out both;
}

@keyframes glowFade {
  from { opacity: 0; transform: scale(0.8); }
  25% { opacity: 1; }
  to { opacity: 0; transform: scale(1.08); }
}

.fx-heart {
  position: absolute;
  font-size: 32px;
  animation: heartFly 0.95s cubic-bezier(0.2, 1, 0.4, 1) both;
  will-change: transform, opacity;
}

@keyframes heartFly {
  from { opacity: 0; transform: translate(0, 0) scale(0.3); }
  25% { opacity: 1; transform: translate(calc(var(--dx) * 0.4), calc(var(--dy) * 0.4)) scale(1.25); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.8); }
}

.fx-layer.lamp-off {
  background: var(--bar-bg-deep);
  animation: lampOffCurtain 0.65s ease-in-out both;
}

@keyframes lampOffCurtain {
  from { opacity: 0; }
  35% { opacity: 0.9; }
  to { opacity: 0; }
}

/* ---------- 弹幕 ---------- */
.dm-layer {
  position: fixed;
  z-index: 250;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.dm-item {
  position: absolute;
  left: 100vw;
  padding: 7px 14px;
  border: var(--stroke-thin) solid var(--brass-dim);
  border-radius: var(--radius-pill);
  color: var(--ink-hi);
  background: var(--panel-deep);
  box-shadow: var(--edge-brass), 0 6px 16px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  animation: dmFly linear both;
  will-change: transform;
}

@keyframes dmFly {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100vw - 100%)); }
}

.dm-item.dm-emoji {
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  font-size: 34px;
}

.dm-item.dm-burst {
  color: #fff;
  border-color: var(--neon-pink);
  background: var(--neon-pink);
  box-shadow: var(--neon-box-pink);
}

.dm-item.dm-off {
  color: var(--ink-mid);
  border-color: var(--ink-ghost);
  background: var(--bar-bg-deep);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.dm-bar {
  position: fixed;
  z-index: 260;
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex;
  width: min(660px, calc(100vw - 24px));
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 10px;
  border: var(--stroke-thin) solid var(--line-neon);
  border-radius: var(--radius-pill);
  background: var(--panel-deep);
  box-shadow: 0 0 16px var(--glow-purple-20), 0 18px 40px rgba(0, 0, 0, 0.5);
  transform: translateX(-50%);
  backdrop-filter: blur(16px);
}

.dm-emoji-toggle {
  display: grid;
  width: 44px;
  height: 44px;
  flex: none;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ink-mid);
  background: transparent;
  font-size: 25px;
  cursor: pointer;
}

.dm-emoji-toggle.open,
.dm-emoji-toggle:active {
  color: var(--neon-cyan-soft);
  background: var(--bar-bg-raise);
}

.dm-emoji-panel {
  position: fixed;
  z-index: 261;
  left: 50%;
  bottom: calc(72px + env(safe-area-inset-bottom));
  display: grid;
  width: min(356px, calc(100vw - 24px));
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  padding: 10px;
  border: var(--stroke-thin) solid var(--line-neon);
  border-radius: var(--radius-btn);
  background: var(--panel-solid);
  box-shadow: 0 0 18px var(--glow-purple-20), 0 24px 48px rgba(0, 0, 0, 0.55);
  transform: translateX(-50%);
}

.dm-e {
  display: grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 23px;
  cursor: pointer;
}

.dm-e:active {
  background: var(--bar-bg-wall);
  transform: scale(1.1);
}

.dm-bar input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 7px 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
}

.dm-bar input:focus {
  border: 0;
  box-shadow: none;
}

.dm-send { flex: none; }

body.has-dmbar .app {
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

.chat-fab {
  position: fixed;
  z-index: 270;
  right: 14px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  /* 呼叫铃：吧台上那颗按一下叫人的黄铜铃 */
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background-image: radial-gradient(circle at 34% 26%, var(--brass-hi) 0 16%, var(--brass) 44%, var(--brass-dim) 76%, var(--brass-shade) 100%);
  box-shadow: var(--edge-brass), 0 4px 0 var(--brass-shade), 0 14px 26px rgba(0, 0, 0, 0.6);
  font-size: 25px;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.chat-fab:active { transform: translateY(3px); }

body.dm-emoji-open .chat-fab {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.82);
}

body:not(.has-dmbar) .chat-fab {
  bottom: calc(16px + env(safe-area-inset-bottom));
}

.chat-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 23px;
  height: 23px;
  padding: 0 5px;
  border: var(--stroke-thin) solid var(--neon-pink);
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--neon-pink);
  box-shadow: 0 0 8px var(--glow-pink-70);
  font-size: 12px;
  line-height: 20px;
  font-weight: 800;
}

.chat-mask {
  position: fixed;
  z-index: 280;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
}

.chat-drawer {
  position: fixed;
  z-index: 290;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(380px, 92vw);
  flex-direction: column;
  border-left: var(--stroke-bold) solid var(--brass-dim);
  background-color: var(--bar-bg);
  background-image: var(--tex-velvet);
  box-shadow: -4px 0 0 var(--brass-shade), -22px 0 60px rgba(0, 0, 0, 0.7);
  transform: translateX(110%);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.chat-drawer.open { transform: none; }

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top)) 16px 14px;
  border-bottom: var(--stroke) solid var(--brass-dim);
  color: var(--amber-hi);
  background-color: var(--bar-bg-deep);
  background-image: var(--tex-wood);
  text-shadow: var(--neon-text-amber);
  font-family: var(--font-pixel);
  font-size: 18px;
}

.chat-close {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink-hi);
  background-color: var(--wood);
  background-image: var(--tex-wood);
  box-shadow: var(--edge-wood), 0 3px 0 var(--wood-dim);
  font-size: 16px;
  font-weight: 800;
  text-shadow: none;
  cursor: pointer;
}

.chat-msgs {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 14px;
}

.chat-msg {
  max-width: 94%;
  padding: 10px 12px;
  border: var(--stroke-thin) solid var(--brass-shade);
  border-radius: var(--radius-sm);
  background: var(--panel-solid);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.chat-msg.mine {
  align-self: flex-end;
  border-color: var(--brass-dim);
  background-color: var(--velvet);
  box-shadow: var(--edge-brass), 0 4px 10px rgba(0, 0, 0, 0.4);
}

.cm-head {
  margin-bottom: 3px;
  color: var(--ink-dim);
  font-size: 12px;
  font-weight: 700;
}

.cm-text {
  overflow-wrap: anywhere;
  color: var(--ink-hi);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 550;
}

.cm-reacts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.cm-reacts:empty { display: none; }

.react-chip {
  min-height: 44px;
  padding: 2px 8px;
  border: var(--stroke-thin) solid var(--line-soft);
  border-radius: var(--radius-pill);
  color: var(--ink-hi);
  background: var(--bar-bg-raise);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.react-chip.mine {
  border-color: var(--brass);
  color: var(--amber-hi);
  background-color: var(--velvet);
}

.emoji-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
  padding: 6px;
  border: var(--stroke-thin) solid var(--line-neon);
  border-radius: var(--radius-sm);
  background: var(--panel-solid);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  animation: pop 0.18s ease;
}

.picker-e {
  min-width: 44px;
  min-height: 44px;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 21px;
  cursor: pointer;
}

.picker-e:active { background: var(--bar-bg-wall); transform: scale(1.12); }

.chat-input {
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: var(--stroke-thin) solid var(--line-neon);
  background: var(--bar-bg-deep);
}

.chat-input input {
  flex: 1;
  min-height: 44px;
  padding: 9px;
  font-size: 15px;
}

/* ---------- Aha 报告：立绘 → 相亲档案 → 相处细节 ---------- */
/* 三段导航 = 吧台上的三个木卡位，当前那张被推到灯下 */
.aha-stage-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 0;
  border-radius: var(--radius-btn);
  background-color: var(--bar-bg-deep);
  background-image: var(--tex-wood);
  box-shadow: var(--edge-carve);
}

.aha-stage-nav button {
  display: flex;
  min-width: 0;
  min-height: 58px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 8px 10px;
  border: var(--stroke-thin) solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-mid);
  background: transparent;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.aha-stage-nav button span {
  color: var(--brass);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.aha-stage-nav button.active {
  border-color: transparent;
  color: var(--ink-hi);
  background-color: var(--wood-hi);
  background-image: var(--tex-wood);
  box-shadow: var(--edge-brass), 0 3px 0 var(--brass-shade), 0 0 20px var(--glow-amber-25);
}

.aha-stage-nav button.active span { color: var(--amber-hi); }

/* 亮相舞台 = 黄铜画框 */
.aha-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: var(--stroke-bold) solid var(--brass-dim);
  border-radius: var(--radius-card);
  background-color: var(--panel-solid);
  box-shadow: var(--edge-brass), 0 28px 64px rgba(0, 0, 0, 0.65), 0 0 30px var(--glow-purple-20);
}

.portrait-stage {
  display: flex;
  flex-direction: column;
}

.portrait-stage .art-wrap {
  flex: none;
  width: 100%;
  aspect-ratio: 3 / 3.72;
}

/* 桌面端容器很宽，竖图按 100% 宽会被 aspect-ratio 撑到超出视口，改按视口高度限宽 */
@media (min-width: 720px) {
  .portrait-stage {
    max-width: calc(58vh * 3 / 3.72);
    margin-inline: auto;
  }
}

.art-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink-hi);
  /* 立绘还没来：先给一面被灯烘着的酒馆背墙，不是灰底占位 */
  background-color: var(--bar-bg-wall);
  background-image:
    var(--scene-backbar);
  background-repeat: no-repeat;
  background-position: 50% 30%;
  background-size: cover;
}

.art-fallback::before {
  content: "100% MATCH";
  padding: 7px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  color: #fff;
  background-color: var(--neon-pink);
  box-shadow: var(--edge-brass), 0 0 22px var(--glow-pink-70);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.art-fallback b {
  max-width: 80%;
  font-family: var(--font-pixel);
  font-size: clamp(30px, 8vw, 44px);
  line-height: 1.1;
  font-weight: 700;
  text-align: center;
  text-shadow: var(--neon-text-purple);
}

.art-fallback span {
  color: var(--ink-mid);
  font-size: 15px;
  font-weight: 650;
}

.art-wrap img { z-index: 1; }

.art-wrap.failed::before { content: none; }
.art-wrap.failed .archetype-chip { z-index: 2; }

.art-fallback b { text-shadow: 0 3px 0 rgba(0, 0, 0, 0.7), 0 0 30px var(--glow-amber-25); }

.archetype-chip {
  position: absolute;
  z-index: 3;
  /* R6：让位给顶部居中的「你老公/老婆/老板来咯」彩蛋，档案名下移一行避免重叠 */
  top: 52px;
  right: 14px;
  max-width: calc(100% - 28px);
  padding: 7px 11px;
  border: var(--stroke-thin) solid var(--brass-dim);
  border-radius: var(--radius-pill);
  color: var(--ink-hi);
  background: var(--panel-deep);
  box-shadow: var(--edge-brass);
  backdrop-filter: blur(6px);
  font-size: 13px;
  font-weight: 800;
}

/* 亮相铭牌 = 画框下沿钉的那块说明牌（绒面 + 黄铜压条） */
.portrait-stage > .caption {
  position: relative;
  padding: 18px 18px 20px;
  border-top: 5px solid var(--profile-accent, var(--brass));
  background-color: var(--panel-solid);
  background-image: var(--tex-velvet);
}

.portrait-stage > .caption::after {
  content: "";
  position: absolute;
  top: -5px;
  right: 0;
  width: 34%;
  height: 5px;
  background: var(--profile-primary, var(--neon-pink));
}

.ideal-name {
  display: block;
  color: var(--ink-hi);
  font-family: var(--font-pixel);
  font-size: clamp(26px, 7vw, 36px);
  line-height: 1.1;
  font-weight: 700;
}

.ideal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0;
}

/* 关键词 = 挂在酒瓶颈上的小标签 */
.ideal-meta span,
.keyword-row span,
.chemistry-tag {
  padding: 5px 10px;
  border: var(--stroke-thin) solid var(--brass-dim);
  border-radius: var(--radius-pill);
  color: var(--ink-hi);
  background-color: var(--bar-bg-raise);
  box-shadow: inset 0 1px 0 rgba(255, 226, 178, 0.14), 0 2px 5px rgba(0, 0, 0, 0.4);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 750;
}

.ideal-meta span:first-child {
  color: #fff;
  border-color: var(--profile-primary, var(--neon-pink));
  background: var(--profile-primary, var(--neon-pink));
}

/* 相亲档案 / 相处细节 = 包厢卡座里的绒面档案本 */
.profile-stage,
.relationship-stage {
  min-height: 520px;
  padding: 26px 24px 24px;
  background-color: var(--panel-solid);
  background-image:
    radial-gradient(ellipse 78% 40% at 50% -8%, var(--glow-amber-25), transparent 66%),
    var(--tex-velvet);
}

/* 档案本上沿的黄铜索引条 */
.profile-stage::before,
.relationship-stage::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 38%;
  height: 8px;
  background-image: linear-gradient(180deg, var(--brass-hi) 0 26%, var(--brass) 26% 62%, var(--brass-shade) 62% 100%);
  border-left: 46px solid var(--profile-primary, var(--neon-pink));
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55);
}

/* 档案页眉的烫金小标 */
.profile-kicker {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 6px 11px;
  border: var(--stroke-thin) solid var(--brass-dim);
  border-radius: var(--radius-pill);
  color: var(--brass-hi);
  background: var(--bar-bg-deep);
  box-shadow: var(--edge-carve);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.profile-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: var(--stroke-thin) solid var(--brass-dim);
  box-shadow: 0 1px 0 rgba(255, 226, 178, 0.1);
}

.profile-title-row > div { min-width: 0; }

.mbti-badge {
  flex: none;
  padding: 9px 11px;
  border: 0;
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--profile-primary, var(--neon-pink));
  box-shadow: var(--edge-brass), 0 0 18px var(--glow-pink-40);
  font-family: var(--font-pixel);
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-grid > div {
  min-width: 0;
  padding: 12px 13px;
  border: 0;
  border-left: 4px solid var(--profile-primary, var(--neon-pink));
  border-radius: var(--radius-sm);
  background-color: var(--bar-bg-raise);
  background-image: var(--tex-wood);
  box-shadow: var(--edge-wood), 0 5px 13px rgba(0, 0, 0, 0.38);
}

.profile-grid > div.wide { grid-column: 1 / -1; }

.profile-grid span {
  display: block;
  margin-bottom: 3px;
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 700;
}

.profile-grid b {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ink-hi);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 750;
}

.keyword-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.keyword-row span:nth-child(2n) { background-color: var(--velvet); }

.profile-bio {
  margin-top: 14px;
  padding: 13px 14px;
  border: 0;
  border-left: 3px solid var(--brass-dim);
  border-radius: var(--radius-sm);
  color: var(--ink-hi);
  background: var(--panel-deep);
  box-shadow: var(--edge-carve);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 600;
}

.fiction-note {
  margin-top: 14px;
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1.45;
  font-weight: 600;
}

.relationship-stage h2 {
  max-width: 90%;
  margin-bottom: 10px;
  font-size: clamp(24px, 6.5vw, 34px);
  line-height: 1.14;
}

.chemistry-tag {
  display: inline-flex;
  margin-bottom: 18px;
  border-color: var(--brass);
  color: var(--amber-hi);
  background-color: var(--velvet);
  box-shadow: var(--edge-brass), 0 0 14px var(--glow-amber-25);
}

.relationship-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.relationship-list .detail-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding: 13px;
  border-color: var(--line-soft);
  border-left: var(--stroke-thin) solid var(--line-soft);
}

.relationship-list .detail-item > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--profile-primary, var(--neon-pink));
  box-shadow: var(--edge-brass), 0 0 12px var(--glow-pink-40);
  font-family: var(--font-pixel);
  font-size: 12px;
  font-weight: 700;
}

.relationship-list .detail-item p {
  color: var(--ink-hi);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
}

.stage-next {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 11px 11px 16px;
  border: 0;
  border-radius: var(--radius-btn);
  color: var(--ink-hi);
  background-color: var(--wood);
  background-image: var(--tex-wood);
  box-shadow: var(--edge-wood), 0 3px 0 var(--wood-dim), 0 8px 18px rgba(0, 0, 0, 0.45);
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
}

.stage-next span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--wood-dim);
  background-image: linear-gradient(172deg, var(--brass-hi), var(--brass) 46%, var(--brass-dim));
  box-shadow: var(--edge-brass), 0 3px 7px rgba(0, 0, 0, 0.55);
  font-size: 20px;
}

.stage-next:hover { background-color: var(--wood-hi); }

.btn.light-burst.selected,
.btn.light-off.selected {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
  box-shadow: var(--edge-brass), 0 4px 0 var(--brass-shade), 0 0 0 8px var(--glow-amber-25);
}

/* ==========================================================================
   CHUG 罚酒仪式 · R10 重构（Kim 点名：「霓虹那版 chugchugchug 上下三个分布很难看」）
   --------------------------------------------------------------------------
   旧版 = 三段堆叠（三行 CHUG / 节奏条 / 卡片墙），三坨东西上下排队 → 没有构图。
   新版 = 一张完整构图：版心一只大酒杯（纯 CSS/伪元素画出杯壁、酒液、酒沫、
   杯底光），CHUG 横排一行压在杯口上方作为「起哄声」，节奏铜牌钉在杯身正中，
   罚酒名单收成杯脚下的一排小票。整页只有一个视觉主体。

   app.js 的 DOM 一行没动：
     .chug-stage > .chug-title(含两个 <br>) / .chug-beat / .drinkers-grid /
     .center.dim / .chug-actions
   三行 CHUG 靠「.chug-title 变 flex 容器 + br 隐藏」压成一行，不改文案 token。
   ========================================================================== */
.chug-stage {
  position: relative;
  display: flex;
  min-height: 660px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  padding: clamp(20px, 4.5vw, 34px) clamp(16px, 4vw, 30px) clamp(20px, 4vw, 30px);
  border: 0;
  border-radius: var(--radius-card);
  /* 罚酒是在吧台前当众进行的：后墙 + 台面 */
  background-color: var(--bar-bg-deep);
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 8%, var(--glow-amber-25), transparent 66%),
    var(--scene-backbar);
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 0, 50% 0;
  background-size: 100% 100%, cover;
  box-shadow: var(--edge-brass), 0 26px 62px rgba(0, 0, 0, 0.65);
  isolation: isolate;
}

/* ---- 版心大酒杯：杯身（::before）+ 里面的酒（::after） ---- */
/* 杯身：玻璃壁 + 左右棱光 + 杯口铜圈感，画出来的，不是渐变色块 */
.chug-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: clamp(96px, 20vw, 138px);
  width: min(280px, 62vw);
  height: min(380px, 84vw);
  transform: translateX(-50%);
  border-radius: 12px 12px 44px 44px / 8px 8px 60px 60px;
  background-image:
    /* 高光棱（左）+ 反光棱（右）：玻璃的两道光 */
    linear-gradient(96deg,
      transparent 0 9%, rgba(255, 240, 214, 0.34) 9% 13%, transparent 13% 20%,
      rgba(255, 240, 214, 0.1) 20% 22%, transparent 22% 78%,
      rgba(255, 240, 214, 0.16) 78% 82%, transparent 82% 90%,
      rgba(255, 240, 214, 0.28) 90% 94%, transparent 94% 100%),
    linear-gradient(180deg, rgba(255, 236, 206, 0.14), rgba(0, 0, 0, 0.3));
  box-shadow:
    inset 0 0 0 3px rgba(255, 236, 206, 0.22),
    inset -16px -22px 40px rgba(0, 0, 0, 0.45),
    0 26px 50px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* 杯里的酒：从杯底往上灌（chugFill 动画 = 酒液上涨做进度）
   ——真实进度需要 app.js 在 .chug-stage 上给 --chug-progress，见交付回报的钩子清单。 */
/* 杯里的酒：元素覆盖整只杯，酒液靠 background-size 从杯底往上灌。
   高度 = var(--chug-progress)（app.js 挂上来就是真进度；没挂时用默认值 + 上涨动画）。 */
.chug-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: calc(clamp(96px, 20vw, 138px) + 6px);
  width: calc(min(280px, 62vw) - 14px);
  height: calc(min(380px, 84vw) - 14px);
  transform: translateX(-50%);
  border-radius: 6px 6px 40px 40px / 4px 4px 56px 56px;
  overflow: hidden;
  background-image:
    /* 酒沫：液面那道亮边 */
    linear-gradient(180deg, var(--foam) 0 6px, rgba(255, 230, 190, 0.55) 6px 11px, transparent 11px 100%),
    /* 灯从左上打进酒里 */
    radial-gradient(ellipse 74% 42% at 26% 6%, rgba(255, 228, 174, 0.55), transparent 64%),
    /* 酒体：上浅下深 */
    linear-gradient(180deg, var(--neon-amber) 0%, var(--liquor) 44%, var(--liquor-deep) 100%);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 100% var(--chug-progress, 46%);
  filter: drop-shadow(0 0 26px var(--glow-amber-55));
  animation: chugFill 2.4s cubic-bezier(0.3, 0.8, 0.4, 1) both;
  pointer-events: none;
}

@keyframes chugFill {
  from { background-size: 100% 8%; }
  to   { background-size: 100% var(--chug-progress, 46%); }
}

/* ---- 起哄声：CHUG CHUG CHUG 压成一行，横在杯口上方 ----
   app.js 给的是 CHUG<br>CHUG<br>CHUG；display:flex 把三段文本变成三个
   匿名 flex item，br 隐掉 → 一行三声，不动一个字。 */
.chug-title {
  position: relative;
  z-index: 2;
  /* app.js 给的是 CHUG<br>CHUG<br>CHUG（三行）。Kim 点名「上下三个分布很难看」，
     但文案 token 一个字不许改 —— 用多栏排版把三行摊成一行三声：
     容器高度锁死一行，column-fill:auto 让每个换行自动流进下一栏。
     （试过 flex：Chrome 把 <br> 连同前后文本归进同一个匿名 flex item，压不平。） */
  display: block;
  width: 100%;
  height: 1em;
  column-count: 3;
  column-fill: auto;
  column-gap: clamp(4px, 2vw, 14px);
  overflow: hidden;
  color: var(--amber-hi);
  font-family: var(--font-pixel);
  font-size: clamp(24px, 7.6vw, 50px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: var(--neon-text-amber);
}

/* 三声起哄一声比一声近（第三声最响，像人凑到你耳边喊） */
.chug-title { animation: chugShout 0.72s ease-in-out infinite; }

@keyframes chugShout {
  0%, 100% { transform: scale(1); }
  46%      { transform: scale(1.035); }
}

/* ---- 节奏铜牌：钉在杯身正中，「举杯。干了。」 ---- */
.chug-beat {
  position: relative;
  z-index: 2;
  align-self: center;
  margin-top: clamp(150px, 34vw, 216px);
  padding: 11px 20px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--wood-dim);
  background-image: linear-gradient(
    172deg, var(--brass-hi) 0%, var(--brass) 20%, var(--brass-dim) 52%, var(--brass) 76%, var(--brass-hi) 100%);
  box-shadow:
    var(--edge-brass),
    0 5px 0 var(--brass-shade),
    0 14px 30px rgba(0, 0, 0, 0.6);
  font-family: var(--font-display);
  font-size: clamp(19px, 5.4vw, 28px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 232, 190, 0.5);
  animation: chugBeat 0.72s ease-in-out infinite;
}

@keyframes chugBeat {
  0%, 100% { transform: scale(1) rotate(-0.6deg); }
  45%      { transform: scale(1.05) rotate(0.6deg); }
}

/* ---- 名单：收成杯脚下的一排小票，不再是抢戏的卡片墙 ---- */
.drinkers-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  width: 100%;
  margin-top: clamp(186px, 40vw, 236px);
}

.drinker-card {
  display: grid;
  min-width: 0;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink-hi);
  background-color: rgba(26, 14, 16, 0.82);
  background-image: var(--tex-wood);
  box-shadow: var(--edge-wood), 0 5px 14px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  font-size: 14px;
}

.drinker-card .dim { font-size: 12px; }

/* 喝完 = 杯子倒扣，木牌被灯照亮 */
.drinker-card.done {
  background-color: rgba(52, 32, 20, 0.86);
  box-shadow: var(--edge-brass), 0 0 18px var(--glow-amber-25);
}

/* 每个人手里的那只小杯：空的时候只有杯壁，喝完琥珀见底 */
.drink-cup {
  display: grid;
  width: 38px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 4px 4px 13px 13px;
  color: var(--ink-hi);
  background-color: var(--bar-bg-deep);
  background-image:
    linear-gradient(96deg, transparent 0 14%, var(--glass-edge) 14% 19%, transparent 19% 100%),
    linear-gradient(180deg, transparent 0 42%, var(--liquor-deep) 42% 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 236, 206, 0.2), 0 3px 8px rgba(0, 0, 0, 0.55);
  font-size: 21px;
}

.drinker-card.done .drink-cup {
  background-image:
    linear-gradient(96deg, transparent 0 14%, var(--glass-edge) 14% 19%, transparent 19% 100%),
    linear-gradient(180deg, transparent 0 88%, var(--liquor-deep) 88% 100%);
  box-shadow: inset 0 0 0 2px var(--brass), 0 0 12px var(--glow-amber-25);
}

/* 每个人的酒液刻度 */
.drink-progress {
  grid-column: 2;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--bar-bg-deep);
  box-shadow: var(--edge-carve);
}

.drink-progress > span,
.drink-progress::before {
  display: block;
  width: var(--drink-progress, 0%);
  height: 100%;
  background-image: linear-gradient(90deg, var(--liquor-deep), var(--liquor) 55%, var(--neon-amber));
  box-shadow: 1px 0 0 var(--amber-hi);
  transition: width 0.24s ease;
}

.drink-progress::before { content: ""; }

/* 计数行也压在构图里，不另起一坨 */
.chug-stage > .center.dim {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  color: var(--ink-mid);
}

.chug-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
}

.chug-actions > * { flex: 1; }

/* ==========================================================================
   国王时刻 · 精绘扑克牌（全员读心命中触发）
   结构：.king-stage > .king-card > .kc-inner（描金双框 + 玑镂纹 + 角标 + 牌面）
   ========================================================================== */
.king-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 26px 20px 24px;
  overflow: hidden;
  /* 国王时刻在包厢卡座里发生：绒面 + 头顶一盏灯 */
  background-color: var(--bar-bg-deep);
  background-image:
    radial-gradient(ellipse 68% 40% at 50% -4%, var(--glow-amber-55), transparent 68%),
    var(--tex-velvet);
}

.king-card {
  position: relative;
  width: min(300px, 78vw);
  aspect-ratio: 5 / 7;
  border-radius: 14px;
  /* 烫金描边：琥珀双色渐变模拟金箔 */
  background: linear-gradient(160deg, var(--neon-amber) 0%, var(--neon-amber-deep) 28%, var(--neon-amber) 52%, var(--neon-amber-deep) 78%, var(--neon-amber) 100%);
  padding: 5px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.65),
    0 0 34px var(--glow-amber-55),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  animation: kingIn 0.6s cubic-bezier(0.2, 1.4, 0.35, 1) both;
}

@keyframes kingIn {
  from { opacity: 0; transform: translateY(40px) rotate(-6deg) scale(0.8); }
  to { opacity: 1; transform: none; }
}

/* 金框流光 */
.king-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.5) 46%, transparent 60%);
  background-size: 260% 100%;
  animation: kingShine 3.4s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}

@keyframes kingShine {
  0%, 100% { background-position: 120% 0; }
  50% { background-position: -60% 0; }
}

.kc-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: var(--stroke-thin) solid var(--neon-amber-deep);
  /* 牌面：酒红绒布 + 灯从上方压下来（旧版玑镂斜纹=重复格纹，R10 删除） */
  background-color: var(--velvet);
  background-image:
    radial-gradient(ellipse 86% 56% at 50% -4%, var(--glow-amber-25), transparent 72%),
    var(--tex-velvet);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 内金细框 */
.kc-inner::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--neon-amber-deep);
  border-radius: 7px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 10px var(--glow-amber-25);
  pointer-events: none;
}

.kc-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 0.95;
  font-family: var(--font-pixel);
  color: var(--neon-amber);
  text-shadow: 0 0 8px var(--glow-amber-55);
}

.kc-corner b { font-size: 30px; font-weight: 700; }
.kc-corner span { font-size: 19px; color: var(--neon-pink); text-shadow: 0 0 8px var(--glow-pink-70); }
.kc-corner.tl { top: 14px; left: 15px; }
.kc-corner.br { right: 15px; bottom: 14px; transform: rotate(180deg); }

.kc-center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  text-align: center;
}

/* 像素王冠：三尖冠 clip-path + 宝石 */
.kc-crown {
  position: relative;
  width: 76px;
  height: 52px;
  background: linear-gradient(180deg, var(--neon-amber) 0 62%, var(--neon-amber-deep) 62% 100%);
  clip-path: polygon(0 100%, 0 34%, 17% 58%, 33% 10%, 50% 46%, 67% 10%, 83% 58%, 100% 34%, 100% 100%);
  filter: drop-shadow(0 0 12px var(--glow-amber-55));
  animation: crownBob 2.6s ease-in-out infinite;
}

.kc-crown::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--neon-pink);
  box-shadow: 0 0 10px var(--glow-pink-70);
}

@keyframes crownBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.kc-king-emoji { font-size: 46px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); }

.kc-king-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-hi);
  font-family: var(--font-pixel);
  font-size: 24px;
  font-weight: 700;
  text-shadow: var(--neon-text-amber);
}

.kc-sub {
  color: var(--ink-mid);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
}

/* 牌面中央大 K 水印 */
.kc-watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--brass-shade);
  opacity: 0.4;
  font-family: var(--font-pixel);
  font-size: 190px;
  font-weight: 700;
  pointer-events: none;
  user-select: none;
}

/* 圣旨面板 */
.king-decree {
  width: 100%;
  padding: 16px 18px;
  border: var(--stroke-thin) solid var(--neon-amber);
  border-radius: var(--radius-sm);
  color: var(--ink-hi);
  /* 圣旨 = 卷起来的酒单纸（R12 去掉横向纤维纹：纯色纸面 + 顶上一盏灯） */
  background-color: var(--panel-deep);
  background-image:
    radial-gradient(ellipse 90% 70% at 50% -10%, var(--glow-amber-25), transparent 70%);
  box-shadow: var(--edge-brass), 0 0 20px var(--glow-amber-25);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 700;
  text-align: center;
  animation: pop 0.35s ease;
}

.king-decree::before {
  content: "圣旨";
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border: var(--stroke-thin) solid var(--neon-amber);
  border-radius: var(--radius-pill);
  color: var(--amber-hi);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

/* 国王选题：三张小牌 */
.king-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.king-option {
  position: relative;
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 13px 14px 13px 46px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink-hi);
  background-color: var(--panel-solid);
  background-image: var(--tex-wood);
  box-shadow: var(--edge-wood), 0 5px 14px rgba(0, 0, 0, 0.45);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.king-option::before {
  content: "K";
  position: absolute;
  left: 13px;
  top: 12px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: 4px;
  color: var(--wood-dim);
  background-image: linear-gradient(172deg, var(--brass-hi), var(--brass) 48%, var(--brass-dim));
  box-shadow: var(--edge-brass);
  font-family: var(--font-pixel);
  font-size: 14px;
}

.king-option:hover,
.king-option:active {
  background-color: var(--wood-hi);
  box-shadow: var(--edge-brass), 0 0 20px var(--glow-amber-25), 0 8px 18px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}

/* ---------- 响应式 ---------- */
@media (max-width: 520px) {
  .app {
    width: 100%;
    padding-right: 14px;
    padding-left: 14px;
    gap: 12px;
  }

  .app::before {
    width: 76px;
    height: 4px;
  }

  .glass { padding: 16px; }

  .row { gap: 8px; }

  .emoji-grid {
    grid-template-columns: repeat(5, minmax(46px, 1fr));
    gap: 6px;
  }

  /* 第四问在窄屏保持三等分（不能继承上面的 5 轨 46px 下限，否则 390 会横向溢出） */
  .emoji-grid.seek-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .player b { max-width: 8.5em; }

  body:not(.has-dmbar) .player .kickBtn {
    margin-right: 58px;
  }

  .roomcode {
    font-size: 58px;
  }

  .stick-stage {
    min-height: 510px;
    padding: 26px 14px;
  }

  .question-card { font-size: 21px; }

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

  .reveal-row b {
    max-width: calc(100% - 54px);
  }

  .reveal-row .g {
    position: absolute;
    top: 10px;
    right: 12px;
  }

  .badge { margin-left: 31px; }

  .flip-card {
    aspect-ratio: 3 / 4.35;
  }

  .dm-bar {
    width: calc(100vw - 20px);
    padding-left: 7px;
  }

  .dm-quick .dm-q:nth-child(n + 4) { display: none; }

  .chat-fab { right: 10px; }

  /* 悬浮球净空：小屏下聊天球悬在 bottom 84px，一屏排满时会压住
     aha 标语 / 国王第三道旨意等末尾内容 → 给内容底部留出球的高度 */
  body.has-dmbar .app {
    padding-bottom: calc(158px + env(safe-area-inset-bottom));
  }

  body:not(.has-dmbar) .app {
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }

  .aha-stage-nav button {
    min-height: 56px;
    padding: 7px 6px;
    font-size: 11px;
  }

  .portrait-stage .art-wrap { aspect-ratio: 3 / 3.65; }

  .profile-stage,
  .relationship-stage {
    min-height: 500px;
    padding: 20px 17px;
  }

  .profile-title-row { gap: 10px; }

  .profile-title-row .ideal-name { font-size: 26px; }

  .profile-grid > div { padding: 10px; }

  .relationship-list .detail-item {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    padding: 11px;
  }

  .relationship-list .detail-item > span {
    width: 32px;
    height: 32px;
  }

  /* CHUG 构图在窄屏不变形：杯子仍是唯一主体，只压缩四周留白 */
  .chug-stage {
    min-height: 640px;
    padding: 20px 14px 20px;
  }

  .drinkers-grid { grid-template-columns: minmax(0, 1fr); }

  .chug-actions { flex-direction: column; }

  .king-card { width: min(260px, 74vw); }
  .kc-watermark { font-size: 150px; }
}

@media (min-width: 900px) {
  .app {
    padding-top: 38px;
    padding-bottom: 54px;
  }

  .glass { padding: 24px; }

  .stick-stage { min-height: 560px; }

  .flip-scene {
    width: min(100%, 560px);
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   R2 新组件：卡组选择 / 马丁锐评 / 每题灯 / 号码国王
   （移动优先，390 宽不溢出；配色一律走 theme 变量）
   ============================================================ */

/* --- 顶栏「我的」入口 --- */
.me-btn { white-space: nowrap; }

/* --- 卡组选择（首页「今晚聊什么」）---
   R9：一期只剩「满分男 · 满分女」一张恋爱局合并卡（老板/闺蜜藏在 PHASE1_FLAGS 后）。
   轨道一律 minmax(0, 1fr)：长文案（如「满分男 · 满分女」）不会把 390 宽撑出横向滚动。 */
.deck-pick { gap: 10px; }
.deck-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
/* 单卡（一期常态）：主卡感更强一点，霓虹口吻不变 */
.deck-cards.single .deck-card {
  padding: 18px;
  border-left-color: var(--brass);
  background-color: var(--wood);
  box-shadow: var(--edge-brass), 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 24px var(--glow-amber-25);
}
.deck-cards.single .deck-card b { font-size: 20px; }
.deck-cards.single .dc-kicker { color: var(--amber-hi); opacity: 1; }
.deck-card {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  text-align: left;
  border: 0;
  border-left: 4px solid var(--brass-dim);
  border-radius: var(--radius-sm);
  background-color: var(--panel-solid);
  background-image: var(--tex-wood);
  box-shadow: var(--edge-wood), 0 6px 16px rgba(0, 0, 0, 0.42);
  color: var(--ink-hi);
  cursor: pointer;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
.deck-card b {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  min-width: 0;
  overflow-wrap: anywhere; /* 「满分男 · 满分女」在 390 窄屏折行，不横向裁切 */
}
.dc-kicker {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--brass);
  opacity: 0.9;
}
.dc-line { font-size: 12.5px; line-height: 1.45; color: var(--ink-lo, rgba(244, 236, 255, 0.62)); }
.deck-card:hover { transform: translateY(-2px); background-color: var(--wood-hi); }
.deck-card.sel {
  border-left-color: var(--brass);
  background-color: var(--wood-hi);
  box-shadow: var(--edge-brass), 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 26px var(--glow-amber-55);
}
.deck-card.sel .dc-kicker { color: var(--amber-hi); opacity: 1; }

/* 大厅：本桌卡组小标 */
.deck-chip {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 7px 14px;
  border: var(--stroke-thin) solid var(--brass-dim);
  border-radius: 999px;
  background-color: var(--velvet);
  box-shadow: var(--edge-brass);
}
.deck-chip b { font-size: 15px; font-weight: 800; color: var(--ink-hi); }
.deck-chip .dc-kicker { font-size: 9px; }
.deck-chip .dc-line { font-size: 11.5px; }

/* 大厅：设置行（每人几题 / 酒劲）*/
.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.settings-row label { flex: 0 0 auto; }
.settings-row select { flex: 1 1 auto; min-width: 0; }

/* --- 马丁锐评 NPC --- */
/* 马丁锐评 = 他从吧台里递过来的一张小条 */
.laok-box {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 14px;
  border-left: 3px solid var(--brass);
  border-radius: var(--radius-sm);
  background-color: var(--velvet);
  background-image: var(--tex-velvet);
  box-shadow: var(--edge-wood), 0 5px 14px rgba(0, 0, 0, 0.42);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.laok-box.show { opacity: 1; transform: none; }
.laok-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bar-bg-deep);
  border: 2px solid var(--brass-dim);
  box-shadow: var(--edge-brass), 0 3px 7px rgba(0, 0, 0, 0.5);
  display: grid;
  place-items: center;
}
.laok-avatar svg, .laok-avatar canvas { width: 100%; height: 100%; }
.laok-line { min-width: 0; }
.laok-line b {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--amber-hi);
  margin-bottom: 3px;
}
.laok-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-hi); }

/* --- 每题爆灯：结算行内的小灯 + 面板 --- */
.round-light-panel { gap: 10px; }
.row-lamp {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  margin: 0 2px;
  vertical-align: middle;
  flex: 0 0 auto;
}
.row-lamp.on {
  background-image: radial-gradient(circle at 40% 35%, var(--neon-pink-hot) 0 26%, var(--neon-pink) 100%);
  box-shadow: 0 0 10px var(--glow-pink-70);
}
.row-lamp.dead {
  background: var(--bar-bg-deep);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--brass-shade);
}

/* --- 号码国王（R2.5 匿名号码对抗版）--- */
.king-chance-stage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.king-numcard {
  align-self: center;
  display: grid;
  justify-items: center;
  gap: 3px;
  width: min(150px, 62vw);
  padding: 14px 16px 16px;
  border: 0;
  border-radius: 14px;
  background-color: var(--velvet);
  background-image: var(--tex-velvet);
  box-shadow: var(--edge-brass), 0 10px 24px rgba(0, 0, 0, 0.55), 0 0 22px var(--glow-amber-25);
  animation: kingDealIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
@keyframes kingDealIn {
  0% { opacity: 0; transform: translateY(24px) rotate(-8deg) scale(0.85); }
  100% { opacity: 1; transform: none; }
}
.knc-kicker {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--brass);
  opacity: 0.95;
}
.knc-num {
  font-family: var(--font-pixel, monospace);
  font-size: 58px;
  line-height: 1;
  font-weight: 800;
  color: var(--amber-hi);
  text-shadow: var(--neon-text-amber);
}
.knc-hint { font-size: 10.5px; color: var(--ink-lo, rgba(244, 236, 255, 0.6)); text-align: center; }
.kc-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 750;
  line-height: 1.45;
  color: var(--ink-hi);
}
.kc-mini {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 30px;
  border: 0;
  border-radius: 4px;
  background-image: linear-gradient(172deg, var(--brass-hi), var(--brass) 46%, var(--brass-dim));
  box-shadow: var(--edge-brass);
  color: var(--wood-dim);
  line-height: 1;
  font-family: var(--font-pixel, monospace);
}
.kc-mini b { font-size: 13px; }
.kc-mini span { font-size: 9px; }
.king-results { display: flex; flex-direction: column; gap: 9px; }
.king-result-line {
  padding: 11px 13px;
  border: 0;
  border-left: 3px solid var(--brass-dim);
  border-radius: var(--radius-sm);
  background-color: var(--panel-solid);
  background-image: var(--tex-wood);
  box-shadow: var(--edge-wood), 0 4px 11px rgba(0, 0, 0, 0.4);
}
.king-result-line b { font-size: 14px; color: var(--amber-hi); }
.king-order-text { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-hi); }
.king-nums {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
}
.king-num {
  min-width: 48px;
  min-height: 48px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background-color: var(--wood);
  background-image: var(--tex-wood);
  box-shadow: var(--edge-wood), 0 3px 0 var(--wood-dim), 0 6px 14px rgba(0, 0, 0, 0.42);
  color: var(--ink-hi);
  font-family: var(--font-pixel, monospace);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.king-num small { display: block; font-size: 9px; font-family: inherit; opacity: 0.7; }
.king-num:hover { transform: translateY(-1px); background-color: var(--wood-hi); }
.king-num.sel {
  color: var(--wood-dim);
  background-image: linear-gradient(172deg, var(--brass-hi), var(--brass) 46%, var(--brass-dim));
  box-shadow: var(--edge-brass), 0 3px 0 var(--brass-shade), 0 0 22px var(--glow-amber-55);
}
.king-option.sel {
  background-color: var(--wood-hi);
  box-shadow: var(--edge-brass), 0 0 24px var(--glow-amber-55), 0 6px 16px rgba(0, 0, 0, 0.45);
}
.king-order-preview {
  padding: 11px 14px;
  border: 1px dashed var(--brass);
  border-radius: var(--radius-sm);
  background-color: rgba(232, 167, 92, 0.09);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-hi);
  text-align: center;
}

@media (max-width: 400px) {
  .knc-num { font-size: 50px; }
  .king-num { min-width: 44px; min-height: 44px; font-size: 18px; }
  .deck-card b { font-size: 16px; }
}

/* ============ 图鉴（R8 CODEX：按 deck 分本收集型号徽章）+ 满分人生入口 ============ */
.gx-banner {
  padding: 13px 16px;
  text-align: center;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: var(--amber-hi);
  border-left: 4px solid var(--brass);
  background-color: rgba(232, 167, 92, 0.08);
}
.gx-life { flex-direction: row; align-items: center; gap: 12px; }
.gx-life-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--amber-hi);
  text-shadow: var(--neon-text-amber);
}
/* 宽视口横排：基类 .btn 是 width:100%，flex:none 下 basis=auto 会按 100% 结算、
   把整行吃掉 → 左侧 .grow 被压成一字宽竖排（1400 桌面崩坏事故）。width:auto 收缩到内容宽。
   ≤480 媒体查询里会切回 column + width:100%，手机端表现不变。 */
.gx-life .btn { flex: none; width: auto; white-space: nowrap; padding: 10px 16px; }

.gx-codex { display: grid; gap: 12px; margin: 14px 0; min-width: 0; }
/* 未登录：整页置灰（banner 提示「登录后开始收集」） */
.gx-locked-page { opacity: 0.45; filter: grayscale(0.7); pointer-events: none; }

/* 四本图鉴切换 tab（390 宽 4 列必须 minmax(0,1fr)，裸 1fr 会被长词撑爆横向裁切） */
.gx-book-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
/* 图鉴分册 tab = 酒柜上四块木牌 */
.gx-book-tab {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px 4px;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--wood);
  background-image: var(--tex-wood);
  box-shadow: var(--edge-wood), 0 3px 0 var(--wood-dim);
  color: var(--ink-hi);
  cursor: pointer;
  text-align: center;
}
.gx-book-tab b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-book-tab small { font-size: 10.5px; color: var(--ink-lo, rgba(244, 236, 255, 0.55)); letter-spacing: 0.06em; }
.gx-book-tab.sel {
  background-color: var(--wood-hi);
  box-shadow: var(--edge-brass), 0 3px 0 var(--brass-shade), 0 0 20px var(--glow-amber-25);
}
.gx-book-tab.sel small { color: var(--amber-hi); }

.gx-book-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 0 2px;
}
.gx-book-head b { font-size: 16px; font-weight: 800; color: var(--ink-hi); }
.gx-book-head .dim { font-size: 12px; }

/* 16 格型号徽章墙：4×4，轨道一律 minmax(0,1fr)（427>390 裁切事故复发点，别改回 1fr） */
.gx-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.gx-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  aspect-ratio: 3 / 4;
  padding: 6px 4px;
  border: 0;
  border-radius: var(--radius-sm);
  /* 每一格 = 酒柜里的一个格子：绒面背板 + 顶上一道层板光 */
  background-color: var(--bar-bg-deep);
  background-image:
    linear-gradient(180deg, var(--glow-amber-25) 0 2px, transparent 2px 100%),
    var(--tex-velvet);
  box-shadow: var(--edge-carve);
  text-align: center;
  overflow: hidden;
}
.gx-type.locked { filter: grayscale(0.6) brightness(0.72); }
.gx-type.locked .gx-type-sil { font-size: 22px; opacity: 0.45; filter: brightness(0); text-shadow: 0 0 0 var(--wood-dim); }
.gx-type.locked .gx-type-code { font-size: 12px; color: var(--ink-dim); letter-spacing: 0.08em; }
.gx-type.locked.hidden-type { border-style: dashed; }
/* 已收集 = 这一格里的酒被灯照亮了（粉只用一道细边点心动，不铺满） */
.gx-type.unlocked {
  background-color: var(--velvet-hi);
  background-image:
    linear-gradient(180deg, var(--neon-pink) 0 2px, transparent 2px 100%),
    radial-gradient(ellipse 90% 60% at 50% 0%, var(--glow-pink-18), transparent 70%),
    var(--tex-velvet);
  box-shadow: var(--edge-brass), 0 0 18px var(--glow-pink-18);
}
.gx-type.unlocked.hidden-type {
  background-image:
    linear-gradient(180deg, var(--brass-hi) 0 2px, transparent 2px 100%),
    radial-gradient(ellipse 90% 60% at 50% 0%, var(--glow-amber-25), transparent 70%),
    var(--tex-velvet);
  box-shadow: var(--edge-brass), 0 0 20px var(--glow-amber-55);
}
.gx-type-code { font-size: 12px; font-weight: 800; color: var(--ink-hi); letter-spacing: 0.04em; }
.gx-type-star { color: var(--amber-hi); text-shadow: var(--neon-text-amber); }
.gx-type-name {
  font-size: 10px;
  line-height: 1.25;
  color: var(--ink-hi);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.gx-type-count { font-size: 10px; color: var(--neon-pink-hot); font-weight: 700; }
.gx-type-loading { grid-column: 1 / -1; text-align: center; padding: 28px 0; }
.gx-book-note { font-size: 11.5px; text-align: center; letter-spacing: 0.03em; padding: 0 6px; }

/* 满分室友/老师：敬请期待占位卡 */
.gx-soon-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.gx-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 14px 8px;
  border: 1px dashed var(--brass-shade);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.3);
}
.gx-soon b { font-size: 13.5px; font-weight: 800; color: var(--ink-dim); }
.gx-soon span { font-size: 10.5px; color: var(--ink-ghost); letter-spacing: 0.1em; }

/* 亮相页型号角标（renderAha 第一页 caption 顶部）：#07 · 名称，隐藏款带 ✦ */
.gx-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  margin-bottom: 6px;
  padding: 4px 11px;
  border: var(--stroke-thin) solid var(--profile-accent, var(--brass));
  border-radius: 999px;
  background-color: rgba(232, 167, 92, 0.1);
  box-shadow: var(--edge-carve);
  font-size: 12px;
  line-height: 1.3;
}
.gx-type-badge-code {
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--profile-accent, var(--amber-hi));
  flex: none;
}
.gx-type-badge-name {
  color: var(--ink-hi);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gx-type-badge.hidden-type {
  border-color: var(--brass);
  background-color: rgba(232, 167, 92, 0.14);
}
.gx-type-badge.hidden-type .gx-type-badge-code { color: var(--amber-hi); }

/* 满分人生 付费占位 modal */
.life-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(12, 6, 7, 0.76);
  backdrop-filter: blur(3px);
}
.life-modal {
  max-width: 340px;
  width: 100%;
  display: grid;
  gap: 14px;
  text-align: center;
  padding: 26px 22px;
  border: var(--stroke) solid var(--brass);
  box-shadow: var(--edge-brass), 0 24px 56px rgba(0, 0, 0, 0.7), 0 0 30px var(--glow-amber-55);
}
.life-modal-title { font-size: 22px; font-weight: 800; }
.life-modal-body { font-size: 14px; line-height: 1.6; color: var(--ink-hi); }

@media (max-width: 480px) {
  /* 390 宽验收硬指标：16 格保持 4×4 不裁切（minmax(0,1fr) 轨道 + 字号缩一档） */
  .gx-type-grid { gap: 6px; }
  .gx-type { padding: 5px 3px; }
  .gx-type-name { font-size: 9px; -webkit-line-clamp: 3; }
  .gx-type-code { font-size: 11px; }
  .gx-book-tabs { gap: 6px; }
  .gx-book-tab b { font-size: 12px; }
  .gx-life { flex-direction: column; align-items: stretch; text-align: center; }
  .gx-life .btn { width: 100%; }
}

/* ==========================================================================
   R10 · 布局收敛（PRD-R10-UI-IP §四）
   艺术皮肤本轮不换：以下全部沿用 theme-v2 的变量与既有组件质感，
   只做信息架构：新首页 / 桌局组件（房主·客人）/ 反馈小弹窗 / 方向确认弹层。
   竖屏铁律：所有新 grid 轨道一律 minmax(0, 1fr)，390 宽零横向溢出。
   ========================================================================== */

/* ---- 首页/桌局共用的极简顶栏 ---- */
.mini-topbar {
  min-height: 34px;
}

/* ---- 4.1 新首页 ---- */
.landing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  justify-items: center;
  text-align: center;
  padding: 6px 0 0;
}

.landing-logo {
  width: 96px;
  max-width: 40vw;
  margin-bottom: 2px;
}

.landing-logo svg {
  width: 100%;
  height: auto;
  display: block;
  /* logo 是马天尼杯 + 那颗橄榄（马丁天线上的同一颗）：心动色的合法出场地 */
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 18px var(--glow-pink-40));
}

.landing-title {
  font-size: clamp(26px, 8.5vw, 38px);
  line-height: 1.15;
}

.landing-tag {
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-top: -4px;
}

.landing-cta {
  width: 100%;
  margin-top: 6px;
  font-size: 20px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.landing-second {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.landing-second b { font-size: 16px; }

.landing-second small {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mid);
  letter-spacing: 0.02em;
}

.landing-how {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  text-align: left;
  padding: 14px 16px;
}

/* 「怎么玩」= 钉在墙上的店规牌，每一条前面一根铜条 */
.landing-how p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-mid);
  padding-left: 13px;
  border-left: 3px solid var(--brass-dim);
}

.landing-feedback {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--ink-dim);
}

/* ---- 4.2 桌局组件 ---- */
.table-head {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.table-back {
  font-size: 13px;
  justify-self: start;
}

.table-head-title {
  font-size: 15px;
  color: var(--ink-mid);
  justify-self: end;
  letter-spacing: 0.08em;
}

.table-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* 开桌/入桌 = 门口两块木牌，选中的那块被挑到灯下 */
.table-tab {
  min-width: 0;
  padding: 13px 6px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-mid);
  background-color: var(--wood-dim);
  background-image: var(--tex-wood);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--edge-wood), inset 0 3px 8px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.table-tab.sel {
  color: var(--ink-hi);
  background-color: var(--wood-hi);
  box-shadow: var(--edge-brass), 0 3px 0 var(--brass-shade), 0 0 20px var(--glow-amber-25);
}

/* 人数 1-10（Kim 定死的常量）= 10 个选项，5×2 一屏放得下；「1」那格带「一个人玩」小标注 */
.seats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

/* 人数 = 吧台上摆开的十个座位牌 */
.seats-grid button {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 1px;
  padding: 10px 2px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink-mid);
  background-color: var(--wood);
  background-image: var(--tex-wood);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--edge-wood), 0 3px 0 var(--wood-dim);
  cursor: pointer;
}

.seats-grid button b { font-size: 17px; line-height: 1.2; }

.seats-grid button small {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--ink-dim);
}

.seats-grid button.sel small { color: var(--amber-hi); }

.seats-grid button.sel {
  color: var(--wood-dim);
  background-image: linear-gradient(172deg, var(--brass-hi), var(--brass) 46%, var(--brass-dim));
  box-shadow: var(--edge-brass), 0 3px 0 var(--brass-shade), 0 0 20px var(--glow-amber-55);
}

.code-entry input {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.4em;
  text-align: center;
}

.table-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.table-cta .btn { width: 100%; }

.lobby-cta { margin-top: -4px; }

/* 准备状态 = 酒杯满上（圣经 §五）：徽章左边画一只小杯，
   还没准备是空杯（只有杯壁），坐稳了酒就满到杯口 + 灯照上去。
   （BACK 契约 player.ready；字段没到时根本不渲染） */
.ready-badge {
  position: relative;
  flex: none;
  padding: 4px 10px 4px 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--ink-dim);
  border: var(--stroke-thin) solid var(--brass-shade);
  border-radius: var(--radius-pill);
  background-color: rgba(0, 0, 0, 0.28);
}

/* 空杯 */
.ready-badge::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 9px;
  height: 12px;
  margin-top: -6px;
  border-radius: 1px 1px 4px 4px;
  box-shadow: inset 0 0 0 1.5px var(--brass-shade);
  background-image: linear-gradient(180deg, transparent 0 78%, var(--brass-shade) 78% 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* 坐稳了 = 满上（R11：激活态吃发光预算，粉的） */
.ready-badge.on {
  color: var(--neon-pink-hot);
  border-color: var(--neon-pink);
  background-color: var(--glow-pink-18);
  box-shadow: 0 0 12px var(--glow-pink-40);
}

.ready-badge.on::before {
  box-shadow: inset 0 0 0 1.5px var(--neon-pink);
  background-image:
    linear-gradient(180deg, var(--foam) 0 2px, var(--neon-pink-hot) 2px 30%, var(--neon-pink) 30% 100%);
}

.seat-count { font-size: 13px; font-weight: 500; }

/* ---- 反馈小弹窗 ---- */
.fb-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 6, 7, 0.76);
  backdrop-filter: blur(3px);
}

.fb-modal {
  width: 100%;
  max-width: 340px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 20px 18px;
}

.fb-title { font-size: 17px; }

.fb-modal textarea {
  width: 100%;
  max-width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 12px;
  color: var(--ink-hi);
  background: var(--bar-bg-deep);
  border: var(--stroke-thin) solid var(--brass-dim);
  border-radius: var(--radius-sm);
  box-shadow: var(--edge-carve);
}

.fb-modal textarea:focus,
.fb-modal input:focus { outline: none; border-color: var(--brass); }

.fb-actions { display: flex; gap: 8px; }
.fb-actions .btn { min-width: 0; }

/* ---- 4.3 方向确认弹层 ---- */
.dir-overlay {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 6, 7, 0.8);
  backdrop-filter: blur(3px);
}

.dir-modal {
  width: 100%;
  max-width: 340px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 22px 18px;
  text-align: center;
}

.dir-title { font-size: 18px; line-height: 1.3; }
.dir-sub { font-size: 12.5px; }

.dir-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

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

/* 方向选择 = 三块木杯垫；选中的那块推到灯下（这是「今晚想品鉴谁」，心动前一秒） */
.dir-grid button {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 13px 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-mid);
  background-color: var(--wood);
  background-image: var(--tex-wood);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--edge-wood), 0 3px 0 var(--wood-dim);
  cursor: pointer;
}

.dir-grid button.sel {
  color: var(--ink-hi);
  background-color: var(--wood-hi);
  box-shadow: var(--edge-brass), 0 3px 0 var(--brass-shade), 0 0 20px var(--glow-pink-40);
}

.dir-emoji { font-size: 20px; line-height: 1.1; }
.dir-waiting { gap: 8px; }

@media (max-width: 480px) {
  .landing-cta { font-size: 19px; }
  .seats-grid { gap: 6px; }
  .seats-grid button { padding: 9px 1px; }
  .seats-grid button b { font-size: 16px; }
  .seats-grid button small { font-size: 8.5px; }
  .dir-grid button { font-size: 12px; }
}

/* 大厅成员行加了准备徽章后 390 宽会挤：酒水说明不换行、徽章缩一档，名字仍可省略号 */
.player .dim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 480px) {
  .player { gap: 7px; padding: 9px 10px; }
  .player .dim { font-size: 12px; }
  .player .ready-badge { padding: 2px 6px; font-size: 10px; }
  .player .tag { padding: 2px 6px; font-size: 10px; }
}

/* ==========================================================================
   R11 靶3 · 大厅收窄（Kim：「大厅设计 UI 还是复杂，要按竖屏手机页面去想体验」）
   --------------------------------------------------------------------------
   390 竖屏下，大厅只允许有三件事，其余一律降级：
     ① 房码（大）      —— .roomcode，全屏最亮最大的一块
     ② 成员 + 准备状态（中）—— .players / .ready-badge
     ③ 底部主按钮（大） —— .lobby-cta .btn
   降级对象（压缩为一行式 / 缩小 / 排到最后，不删功能）：
     卡组卡 .deck-chip、二维码 .qr-wrap、邀请链接按钮、
     局数 .settings-row、锅底 .stove-block。
   本块只用 CSS（隐藏/压缩/重排），不动 app.js 的 DOM。
   放在文件最末 = 同优先级下必胜。
   ========================================================================== */
@media (max-width: 480px) {

  /* ---- 顶栏压扁（全屏通用）----
     30px 像素字在 390 宽会折成「理想型 / 加载中」两行，
     且像素字形超出 line-height:1.08 的行盒 → 压在副标（"桌子留好了，把人叫来吧"）上。
     降到 24px 正好一行，行高放松到 1.3，副标补一口气：顶栏省下约 40px 竖屏空间。 */
  .brand-title { gap: 8px; }
  .brand-mark { width: 36px; height: 36px; flex: 0 0 36px; }
  .brand-mark svg { width: 26px; height: 26px; }
  .brand-title h1 { font-size: 24px; line-height: 1.3; letter-spacing: 0.02em; }
  .brand-title + .dim { margin-top: 3px; font-size: 12.5px; }

  /* ---- 通用：卡片内边距收一档，一屏能多装一件事 ---- */
  .app { gap: 11px; padding-left: 14px; padding-right: 14px; }
  .app > .glass { padding: 15px 14px 14px; }
  .app > .glass.stack { gap: 10px; }

  /* ---- ① 房码：唯一的大块。牌面撑满，字给到最大 ---- */
  .roomcode {
    order: 0;
    padding: 18px 12px 16px;
    font-size: clamp(58px, 17vw, 72px);
    letter-spacing: 0.12em;
  }

  /* 二维码降级：从 180 缩到 96，只是「顺手能扫」，不再占半屏 */
  .qr-wrap { order: 1; padding: 6px; margin: 0 auto; border-width: 1px; }
  .qr-wrap canvas { width: 96px; height: 96px; }

  /* 邀请链接按钮降级为一行式小按钮（不再是通栏） */
  #copyBtn {
    order: 2;
    align-self: center;
    min-height: 38px;
    padding: 7px 14px;
    font-size: 13px;
    letter-spacing: 0.02em;
  }

  /* 卡组卡降级：排到本卡最后 + 压成一行，超出省略号 */
  .deck-chip {
    order: 9;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    max-width: 100%;
    gap: 6px;
    padding: 5px 11px;
    box-shadow: none;
    border-color: var(--line-neon);
    background-color: transparent;
    opacity: 0.82;
  }
  .deck-chip b { font-size: 12.5px; white-space: nowrap; }
  .deck-chip .dc-kicker { font-size: 8.5px; letter-spacing: 0.14em; flex: none; }
  .deck-chip .dc-line {
    font-size: 11px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 今晚特调小条同样压成一行 */
  .cocktail-chip { padding: 8px 10px; font-size: 12px; }
  .cocktail-chip span:not(.ck-glass) { display: none; }

  /* ---- ② 成员 + 准备状态：保持「中」的量级，别再瘦 ---- */
  .app > .glass.stack h2 { font-size: 18px; letter-spacing: 0.02em; }
  .seat-count { font-size: 12px; }
  .players { gap: 7px; }
  .player b { font-size: 15px; }
  .player .ready-badge { font-size: 10.5px; padding: 3px 7px 3px 19px; }
  .player .ready-badge::before { left: 6px; width: 8px; height: 11px; margin-top: -5.5px; }
  /* 「请离」在手机上退成图标级小按钮，别跟准备状态抢视线 */
  .player .kickBtn {
    min-width: 34px;
    min-height: 34px;
    padding: 4px 7px;
    font-size: 11px;
    opacity: 0.6;
  }

  /* ---- 降级：局数 / 酒劲 / 位子数 全部压成一行式 ---- */
  .settings-row { gap: 8px; }
  .settings-row label { font-size: 12.5px; flex: none; }
  .settings-row select {
    flex: 0 0 auto;
    width: auto;
    min-width: 118px;
    max-width: 60%;
    margin-left: auto;
    min-height: 40px;
    padding: 7px 10px;
    font-size: 14px;
  }

  .stove-block {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 9px;
  }
  .stove-block > label { font-size: 12.5px; }
  .stove-block .stove-fire { grid-column: 2; gap: 6px; }
  .stove-block .stove-fire button {
    min-height: 40px;
    padding: 4px 2px;
    font-size: 12px;
    line-height: 1.15;
  }
  .stove-block .stove-fire button small { font-size: 9px; }
  .stove-block > .dim { grid-column: 1 / -1; font-size: 11px; line-height: 1.4; }

  /* ---- ③ 底部主按钮：这一屏的终点，给到最大 ---- */
  .lobby-cta { margin-top: 2px; gap: 6px; }
  .lobby-cta .btn {
    min-height: 60px;
    font-size: 21px;
    letter-spacing: 0.14em;
  }
  .lobby-cta .dim { font-size: 12.5px; }
}