:root {
  --brand-red: #da291c;
  --brand-yellow: #ffbc0d;
  --ink: #3d2517;
  --brown: #774526;
  --cream: #fff1d6;
  --blue: #138ed2;
  --green: #46a635;
  --shadow: 0 12px 36px rgba(35, 20, 9, 0.28);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  background: #241f1a;
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

#game-container {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  /* Pixi 画布加载完成前的兜底底色与底图，需与 js/scene-config.js 的 scene.src 保持一致 */
  background: #c9bda8 url("../assets/game/scenes/restaurant-v2.jpg") center / cover no-repeat;
}
#game-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; cursor: grab; }
/* 回合开始弹窗使用设计稿场景图作为明确背景层；HUD 仍由 #ui-layer(z=10) 叠在其上。 */
.round-start-scene-background {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  object-fit: cover; object-position: center 52%; pointer-events: none; user-select: none;
}
.round-start-scene-background[hidden] { display: none; }

/* 主场景 HUD */
#ui-layer { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
/* 注意：.ui-stage 是铺满视口的缩放容器，绝不能让它接收指针事件，
   否则它会盖住整张 Pixi 画布，场景里的事件气泡、员工、顾客全都点不到。
   只有 .ui-stage 内部的具体控件才恢复 pointer-events（见下方 .ui-stage > *）。 */
#ui-layer > *:not(.ui-stage) { pointer-events: auto; }
#ui-layer > .ui-stage { pointer-events: none; }
.top-bar {
  position: absolute; top: 0; left: 0; right: 0;
  min-height: 68px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 18px 16px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  background: linear-gradient(180deg, rgba(31, 18, 8, 0.88), rgba(31, 18, 8, 0.3) 72%, transparent);
}
.player-info { display: flex; align-items: center; gap: 9px; color: #fff; }
.avatar {
  width: 43px; height: 43px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #ffd75a, #f29d16); border: 2px solid #fff2cb;
  color: #733716; font-weight: 900; box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.player-name { font-size: 14px; font-weight: 800; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.level-badge { margin-left: 4px; padding: 2px 7px; border-radius: 8px; background: var(--brand-red); font-size: 10px; }
.experience-row { display: flex; align-items: center; gap: 7px; margin-top: 5px; color: #fff4da; font-size: 10px; }
.exp-bar { width: 82px; height: 6px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.25); }
.exp-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #84d65e, #36a447); transition: width .3s; }
.restaurant-kpis { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.kpi-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 9px;
  border: 1px solid rgba(255,236,190,.32); border-radius: 12px;
  background: rgba(91, 48, 20, .86); color: #fff4d6; font-size: 11px;
  box-shadow: 0 2px 7px rgba(0,0,0,.2); backdrop-filter: blur(5px);
}
.kpi-chip strong { color: #fff; }
.event-guide {
  position: absolute; top: 82px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid rgba(255,208,96,.6); border-radius: 14px;
  background: rgba(61,37,23,.9); color: #fff6de; font-size: 11px; cursor: pointer;
  animation: guidePulse 2.4s infinite;
}
.event-guide.event-active { border-color: #ffcf42; background: rgba(156,39,27,.94); }
.event-guide:focus-visible { outline: 3px solid rgba(255,215,83,.75); }
.event-guide-icon { font-size: 18px; }
@keyframes guidePulse { 50% { transform: translateX(-50%) translateY(-3px); box-shadow: 0 5px 18px rgba(255,188,13,.3); } }
.event-queue-panel {
  position: absolute; top: 126px; left: 50%; transform: translateX(-50%);
  max-width: min(620px,calc(100vw - 30px)); padding: 6px 8px;
  display: flex; align-items: center; gap: 7px; border-radius: 13px;
  background: rgba(48,27,15,.88); border: 1px solid rgba(255,215,120,.35); color: #fff2cf;
}
.event-queue-panel[hidden] { display: none; }
.event-queue-label { color: #ffd45c; font-size: 9px; font-weight: 900; }
.event-queue-list { display: flex; gap: 6px; overflow-x: auto; }
.event-queue-item { padding: 5px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; background: rgba(255,255,255,.08); color: #fff; font-size: 9px; cursor: pointer; white-space: nowrap; }
.event-queue-item.urgent { border-color: #ffb02e; background: rgba(179,55,35,.7); }
/* .shift-label / .shift-time / .shift-progress / .shift-count / .current-action-chip /
   .shift-pause-btn 已随 2026-09 首页改版一起移除（#shiftMeter 红色倒计时横幅删除） */

.staff-dispatch-card { width: min(560px,94vw); }
.staff-dispatch-card h2 { margin-top: 2px; font-size: 20px; }
.staff-dispatch-kicker { color: #b36c1d; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.station-coverage { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-bottom: 12px; }
.coverage-chip { padding: 8px; border-radius: 11px; background: #f6dfbc; color: #6f4933; text-align: center; font-size: 10px; font-weight: 800; }
.coverage-chip.empty { background: #ffe0d7; color: #ac3c29; }
.staff-recruit-button {
  width: 100%; margin: 0 0 10px; padding: 9px 12px; border: 2px dashed #e0a32a; border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff4c9; color: #70431d; cursor: pointer;
}
.staff-recruit-button span { font-size: 12px; font-weight: 900; }
.staff-recruit-button small { color: #9b7049; font-size: 9px; }
.staff-recruit-button:hover:not(:disabled) { border-style: solid; background: #ffe69a; }
.staff-recruit-button:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.35); }
.staff-dispatch-list { display: grid; gap: 8px; }
.staff-dispatch-row { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 8px; padding: 10px; border: 1px solid #ead0ae; border-radius: 13px; background: rgba(255,255,255,.62); }
.staff-identity strong,.staff-identity span { display: block; }
.staff-identity strong { font-size: 13px; }
.staff-identity span { margin-top: 2px; color: #8a6c58; font-size: 9px; }
.station-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.station-option { padding: 7px 4px; border: 1px solid #ddc09d; border-radius: 9px; background: #fffaf1; color: #704733; font-size: 9px; cursor: pointer; }
.station-option.active { border-color: #f1a519; background: #ffe09a; font-weight: 900; }
.staff-dispatch-tip { margin-top: 10px; color: #8b715f; font-size: 9px; line-height: 1.5; text-align: center; }

/* ============ 层级基准（改动前先看这里） ============
   canvas 1 < ui-layer 10 < 常规模态 120 < 事件对话 130 < 决策事件 140
   < 培训舞台 200 < 结算 210 < 闭店 220 < 事件全屏视频 300 < 启动页 400
   < toast 600/610 < 竖屏提示 900
   规则：任何"浮层"都必须高于它的来源层。启动页是唯一的不透明整屏遮罩，
   因此必须排在所有业务浮层之上，且只在启动阶段存在。
   事件全屏视频（转场 / 剧情介绍 / 开始答题）要盖住主界面与决策浮层，
   所以排在业务浮层之上、启动页之下。 */
:root {
  --z-modal: 120;
  --z-dialog: 130;
  --z-decision: 140;
  --z-training: 200;
  --z-settle: 210;
  --z-closure: 220;
  /* 「本回合详情」是从结算页/闭店页里再打开的一层，必须高于它们，
     否则会被结算页整块盖住，看起来像点了没反应。 */
  --z-detail: 230;
  /* 二次确认要能压在结算/闭店/明细之上（它可能从任何一层里被唤起） */
  --z-confirm: 240;
  --z-video: 300;
  --z-start: 400;
}

/* 模态 */
.modal-overlay {
  position: absolute; inset: 0; z-index: var(--z-modal); display: none; place-items: center;
  padding: 20px; background: rgba(25,14,7,.72); backdrop-filter: blur(4px);
}
.modal-overlay.active { display: grid; animation: fadeIn .22s ease-out; }
@keyframes fadeIn { from { opacity: 0; } }
.modal-content {
  width: min(440px, 94vw); max-height: 84vh; overflow-y: auto;
  padding: 22px; border: 2px solid #e7b58c; border-radius: 22px;
  background: linear-gradient(180deg, #fff9ed, #fff0da); box-shadow: var(--shadow);
  animation: modalIn .24s ease-out;
}
@keyframes modalIn { from { transform: translateY(20px) scale(.97); opacity: 0; } }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.modal-title { font-size: 18px; font-weight: 900; }
.close-btn {
  width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(61,37,23,.1); color: var(--ink); font-weight: 900;
}
.event-character { text-align: center; margin-bottom: 12px; }
.event-character-avatar {
  width: 58px; height: 58px; margin: 0 auto 5px; border-radius: 50%;
  display: grid; place-items: center; background: #ffe5a3; font-size: 30px;
}
.event-character-name { color: #855e48; font-size: 12px; }
.event-title { margin-bottom: 8px; text-align: center; font-size: 19px; font-weight: 900; }
.event-description { margin-bottom: 16px; color: #664939; font-size: 13px; line-height: 1.65; }
.choices-list { display: grid; gap: 9px; }
.choice-btn {
  width: 100%; padding: 13px 14px; border: 2px solid #f1d0a7; border-radius: 13px;
  background: #fffaf0; color: var(--ink); text-align: left; cursor: pointer;
}
.choice-btn:hover { border-color: var(--brand-yellow); }
.choice-text { font-size: 13px; font-weight: 800; }

/* 经营数据保留轻量浮层；事件中转页使用与食安挑战一致的完整舞台。 */
#businessModal, #taskModal {
  place-items: center; padding: 72px 18px 122px;
  background: transparent; backdrop-filter: none; pointer-events: none;
}
#eventModal { pointer-events: auto; }
#businessModal .modal-content, #taskModal .modal-content {
  width: min(350px, 44vw); max-height: calc(100vh - 205px); padding: 15px;
  border-radius: 17px; pointer-events: auto;
}
/* ---------- 事件对话舞台（Figma 事件选择 589:10302，812x375） ----------
   设计令牌：外板 #A7642A + 描边渐变 #E8A163→#471302 2px / radius 24
             内凹槽 #76420A + 1px #C47B3C / radius 15
             选项行 #FBE9CE + 描边渐变 #FEFBF1→#EDB67C 2.25px / radius 12
             序号胶囊 #FFBC0D，文字 #5C3818
             对话气泡 #FBE9CE + 描边渐变 #FEFBF1→#F0B594 2.25px / radius 24
             名牌 #362669 + 描边渐变 #846FC4→#13063B */
.dialog-overlay { z-index: var(--z-dialog); padding: 0; background: rgba(0, 0, 0, .8); }
.dialog-overlay.active { display: block; }
.dialog-stage {
  position: absolute; left: 50%; top: 50%;
  width: 812px; height: 375px;
  transform: translate(-50%, -50%) scale(var(--ui-scale, 1));
  transform-origin: center center;
  line-height: 1.45;
}
.dialog-close {
  position: absolute; left: 8px; top: 8px; z-index: 4;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent url('../assets/game/ui/icons/btn-close.png') center / contain no-repeat;
  transition: transform .12s ease-out;
}
.dialog-close:hover { transform: scale(1.08); }

/* 左侧立绘：设计稿 320x320 @ (60,55)
   与决策浮层同理：按 1:1 contain 显示完整立绘，不做放大裁切；
   z-index 低于对话气泡（3），台词不能被人物挡住。 */
#eventModal .event-portrait-frame {
  position: absolute; left: 60px; top: 55px; width: 320px; height: 320px; z-index: 2;
}
#eventModal .event-portrait-image {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .28));
}
#eventModal .event-character-avatar {
  position: absolute; inset: 0; width: auto; height: auto; margin: 0; border-radius: 0;
  display: grid; place-items: center; background: transparent; font-size: 110px;
}
/* emoji 只作为立绘加载失败时的兜底。ID 选择器的 display 会覆盖浏览器默认的
   [hidden]{display:none}，必须显式声明，否则 emoji 会压在立绘上。 */
#eventModal .event-character-avatar[hidden], .event-portrait-image[hidden] { display: none; }

/* 对话气泡：设计稿里气泡底边固定在 y=359，高度随文案行数向上长
     1 行 → 352x62 @ (49,297)   3 行 → 352x102 @ (49,257)
   所以这里用 bottom 定位而不是 top，否则文案一多就会顶穿舞台底边。
   名牌骑在气泡上沿（设计稿 Frame 101 比气泡顶再高 12px）。 */
.dialog-speech {
  position: absolute; left: 49px; bottom: 16px; z-index: 3; width: 352px; min-height: 62px;
  padding: 20px 25px 12px; box-sizing: border-box;
  border: 2.25px solid transparent; border-radius: 24px;
  background:
    linear-gradient(#FBE9CE, #FBE9CE) padding-box,
    linear-gradient(180deg, #FEFBF1, #F0B594) border-box;
}
.dialog-nametag {
  /* -14 = 设计稿的 -12 再补上气泡 2.25px 边框（absolute 偏移是从 padding 边算的） */
  position: absolute; left: 18px; top: -14px;
  display: inline-flex; align-items: baseline; gap: 4px;
  min-width: 135px; padding: 4px 14px; box-sizing: border-box;
  border: 1.8px solid transparent; border-radius: 8px;
  background:
    linear-gradient(#362669, #362669) padding-box,
    linear-gradient(180deg, #846FC4, #13063B) border-box;
}
.dialog-nametag strong { color: #fff; font-size: 12px; font-weight: 900; white-space: nowrap; }
.dialog-nametag span { color: rgba(255, 255, 255, .8); font-size: 9px; font-weight: 500; white-space: nowrap; }
#eventModal .event-description {
  margin: 0; max-height: 44px; overflow-y: auto;
  color: #5C3818; font-size: 13px; font-weight: 500; line-height: 1.45; text-align: left;
}

/* 右侧木质选项板：设计稿 342x347 @ (427,13)
   z-index:3 与对话气泡同层：木板必须压在立绘（z-index:2）之上，
   否则窗口变窄、立绘被拉近时人物会盖到选项上。 */
.dialog-board { position: absolute; left: 427px; top: 13px; width: 342px; height: 347px; z-index: 3; }
/* 横幅：设计稿 259x45，水平居中于 342 宽的木板 —— (342-259)/2 = 41.5。
   之前写成 left:6px 是照抄了设计稿里外层 Frame 94 的坐标，
   但真正可见的横幅图在 Frame 94 内部还有 +36 的偏移，
   于是横幅比木板整整左偏了 36px，看起来就是「标题和表格没对齐」。
   颜色只能来自切图本身：banner-blue.png / banner-red.png 是四周透明的缎带形状，
   自带蓝/红渐变与飘带端头。曾经为了「看起来更实」补了 #138ED2 底色 + border-radius，
   结果缎带外的透明区被填成蓝色方块，反而露出方角 —— 不要再加纯色底或圆角。 */
.dialog-banner {
  position: absolute; left: 41.5px; top: 0; z-index: 3;
  display: grid; place-items: center;
  width: 259px; height: 45px;
  background: url('../assets/game/ui/icons/banner-blue.png?v=2') center / 100% 100% no-repeat;
  /* 横幅下方的棕色柔光（设计稿 Ellipse 5：262x29 @ (-2,14)，模糊 7.5）。
     必须用 drop-shadow，不能用 ::before + z-index:-1 ——
     本元素有 z-index:3 自成层叠上下文，按 CSS 绘制顺序「负 z-index 子元素」排在
     「本元素的背景」之后，伪元素那团棕色反而糊在蓝色缎带上面，
     缎带看起来就像被加了一层半透明、透出背景色（banner-blue.png 缎带主体是不透明的）。
     drop-shadow 恒定绘制在元素自身图形之下，且自动跟随缎带外形，比椭圆更贴设计。 */
  filter: drop-shadow(0 6px 10px rgba(124, 70, 27, .9));
}
.dialog-banner span {
  max-width: 210px; overflow: hidden;
  color: #fff; font-size: 16px; font-weight: 900; text-align: center;
  text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 0 #018BE6, 0 -1px 0 #018BE6, 1px 0 0 #018BE6, -1px 0 0 #018BE6;
}
.dialog-board-frame {
  position: absolute; left: 0; top: 20px; width: 342px; height: 327px; box-sizing: border-box;
  padding: 30px 16px 26px;
  border: 2px solid transparent; border-radius: 24px;
  background:
    linear-gradient(#A7642A, #A7642A) padding-box,
    linear-gradient(180deg, #E8A163, #471302) border-box;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
}
.dialog-board-well {
  height: 100%; padding: 12px 10px; box-sizing: border-box; overflow-y: auto;
  border: 1px solid #C47B3C; border-radius: 15px; background: #76420A;
}
#eventModal .choices-list { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-height: 100%; }
#eventModal .choice-btn {
  position: relative; display: block; width: 100%; box-sizing: border-box;
  min-height: 62px; padding: 10px 12px 10px 42px;
  border: 2.25px solid transparent; border-radius: 12px;
  background:
    linear-gradient(#FBE9CE, #FBE9CE) padding-box,
    linear-gradient(180deg, #FEFBF1, #EDB67C) border-box;
  color: #5C3818; text-align: left; cursor: pointer;
  transition: filter .12s ease-out;
}
#eventModal .choice-btn:hover { filter: brightness(1.04) saturate(1.06); }
#eventModal .choice-index {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 100px; background: #FFBC0D;
  color: #5C3818; font-size: 14px; font-weight: 700;
}
#eventModal .choice-text { display: block; font-size: 13px; font-weight: 700; line-height: 1.4; }
.choice-hints { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.choice-hints i {
  padding: 1px 4px; border: 1px solid rgba(248, 141, 0, .5); border-radius: 4px;
  color: #8A5A2B; font-size: 9px; font-style: normal; font-weight: 700; white-space: nowrap;
}

/* ============ 决策事件浮层（Figma new 画布） ============
   说明 589:10281 / 选择 589:10302 / 反馈 589:10353，共用 812x375 定尺舞台。
   立绘 320x320；对话气泡 352x83 @ (49,277)；右侧木板 342x347 @ (427,13)。
   说明步骤立绘居中偏右 @ (246,55) 并显示红色告警标签，选择/反馈步骤立绘靠左 @ (60,55)。 */
.decision-overlay { z-index: var(--z-decision); padding: 0; background: rgba(0, 0, 0, .8); }
.decision-overlay.active { display: block; }
.decision-stage {
  position: absolute; left: 50%; top: 50%;
  width: 812px; height: 375px;
  transform: translate(-50%, -50%) scale(var(--ui-scale, 1));
  transform-origin: center center;
  line-height: 1.45;
}

/* 立绘框：设计稿 320x320。切图本身就是方形完整构图（人物含留白居中），
   所以按 1:1 contain 显示即可。早期版本用 overflow:hidden + height:118% 放大，
   结果帽子被上边缘切掉、身体被下边缘切掉、左右也被裁。
   层级：立绘必须排在对话气泡（z-index:3）与木板之下 —— 说明页的气泡有 470px 宽，
   会和居中偏右的立绘大面积重叠，人物压在气泡上会把台词挡掉一大段。
   台词优先级高于人物，所以这里固定 z-index:2。 */
.decision-portrait-frame {
  position: absolute; left: 60px; top: 55px; width: 320px; height: 320px; z-index: 2;
  transition: left .28s ease-out;
}
.decision-stage[data-step="brief"] .decision-portrait-frame { left: 246px; }
.decision-portrait {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .28));
}

/* 红色告警标签：设计稿 Frame 114 @ (488,211) 198x48 */
.decision-alert {
  position: absolute; left: 488px; top: 211px; z-index: 3;
  min-width: 198px; max-width: 260px; padding: 12px 16px; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;
  border: 2px solid #DA291C; border-radius: 16px; background: #740800;
  color: #fff; font-size: 14px; font-weight: 900;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
.decision-alert[hidden] { display: none; }
.decision-alert::before { content: '⚠'; font-size: 16px; }

/* 说明步骤的气泡横跨中下部（设计稿 Frame 99 560x95 @ (126,264)） */
.decision-speech { transition: left .28s ease-out, width .28s ease-out; }
.decision-stage[data-step="brief"] .decision-speech { left: 126px; width: 470px; }
/* 剧情视频播放期间气泡整个收起（renderDecisionStep 写 hidden）。
   .dialog-speech 没有声明 display，UA 的 [hidden]{display:none} 本来就生效，
   这条只是把意图写明，防止今后有人给 .dialog-speech 加 display 把它覆盖掉。 */
.decision-speech[hidden] { display: none; }
/* 设计稿正文：15px / 500 / 行高 1.448，最多 3 行（66px） */
#decisionModal .event-description {
  margin: 0; max-height: 66px; overflow-y: auto;
  color: #5C3818; font-size: 15px; font-weight: 500; line-height: 1.448; text-align: left;
}

/* 继续按钮：只在说明步骤出现，位置对齐设计稿气泡右侧的黄色按钮 */
.decision-continue {
  position: absolute; left: 612px; top: 296px; z-index: 4;
  min-width: 74px; padding: 9px 18px; border: 1.5px solid #5C3818; border-radius: 100px;
  background: linear-gradient(180deg, #FFC838, #F88D00); color: #4A2711;
  font-size: 14px; font-weight: 900; cursor: pointer;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .3);
  transition: transform .12s, filter .12s;
}
.decision-continue:hover { filter: brightness(1.06); }
.decision-continue:active { transform: scale(.96); }
.decision-continue[hidden] { display: none; }

.decision-board[hidden] { display: none; }

/* ============ 决策舞台背景视频层（整个事件期间常驻） ============
   素材本身就是整幅事件页构图：左侧人物在演，右侧留白。
   所以视频铺满整个 812x375 舞台当背景，对话气泡、红色告警、右侧木板都叠在上面 ——
   剧情、选项、反馈全程共用这一层背景，一段播完就定格在最后一帧。
   不要在段落之间收起/显示这一层：任何显隐切换都会让人明显感到「跳了一下」。
   两个 video 轮换：新的一段在隐藏那个里 loadeddata 之后才交叉淡入，段间不会闪黑。
   z-index 只能是 0：木板与关闭按钮都是 z-index:auto/3 的定位元素，写 1 会盖住木板。
   用 cover 而不是 contain：视频宽高比（2.333）比舞台（2.165）更宽，
   contain 会上下留黑边、木板悬空在黑边上很难看；cover 只裁掉左右各约 4%，
   人物仍在偏左位置，裁掉的是场景留白。 */
.decision-stage-video {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; border-radius: 18px; background: #17100a;
}
.decision-stage-video[hidden] { display: none; }
.decision-stage-video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transition: opacity .22s ease-out;
}
.decision-stage-video video.is-active { opacity: 1; }
/* 三段视频必须用同一个缩放比例（也就是都不缩放），否则人物大小会在段间跳。
   曾经给剧情/答题两段加过 transform: scale(1.2712)：这两段素材虽然也是 1624x750，
   但画布里烘了一层电影黑边，有效画面只有 1624x590 @ y=80（ffmpeg cropdetect 实测），
   放大 750/590≈1.271 正好把黑边裁掉、事件页看着是满幅的。
   问题是从原始帧里裁同一个框可以验证：黑边纯粹是 padding，画面本身和满幅的
   决策结果段是同一机位、同一比例。于是那个 1.271 等于凭空把剧情/答题的人物放大了 27%，
   玩家看到的就是「介绍和答题里人物大一圈，到结果动画突然缩小」。
   现在三段统一 object-fit: cover + 不缩放，人物大小一致，代价是剧情/答题上下各露 40px
   暗边（就是素材自带的黑边，和本层底色 #17100a 一致，读起来像剧情段的电影画幅）。
   彻底解决要靠素材：让 UI 按满幅 1624x750 重导剧情/答题两段。
   注意不要为了「填满舞台」再把某一段单独放大 —— 那就是这个 bug 本身。 */
/* 只要背景视频层在用（播放中或已定格），静态立绘就一直隐藏 ——
   视频里已经有人物了，再叠一张立绘会出现两个人；
   而且中途把立绘换回来同样是一次生硬的切换。
   必须用 display:none —— setDecisionPortrait 会给 <img> 写内联 visibility:visible，
   父级用 visibility:hidden 会被子元素反向覆盖掉。 */
.decision-stage[data-stage-video] .decision-portrait-frame { display: none; }
/* 剧情素材里已经画了那条红色告警（"A炸炉温度出现异常"），
   DOM 再画一遍就是两个红标签叠在一起，所以有视频背景时隐藏 DOM 版本。
   没有视频的事件线（库存预警 / 高峰期人手不足）仍然显示 DOM 告警。 */
.decision-stage[data-stage-video] .decision-alert { display: none; }

/* 决策板严格按设计稿定位（坐标都相对 .dialog-board 342x347）：
     木框 342x327 @ (0,20) → .dialog-board-frame
     深色木槽 310x230 @ (17,50) → .dialog-board-well
     按钮 310x44 @ (17,290) → .decision-actions
   原来木槽用 padding 撑到 267 高，会一直伸到按钮底下；这里改成绝对定位定死尺寸。
   只覆盖 .decision-board，#eventModal 的对话板不受影响。 */
.decision-board .dialog-board-frame { padding: 0; }
.decision-board .dialog-board-well {
  position: absolute; left: 15px; top: 28px;
  width: 310px; height: 230px; box-sizing: border-box;
  padding: 0; overflow: visible;
}
.decision-board .decision-actions { top: 290px; bottom: auto; }

/* 反馈步骤的横幅是红色（设计稿 Component 11 / 横幅-red 1，文字描边 #B80027）；
   选择步骤是蓝色（横幅-blue 1，描边 #018BE6）。设计稿只有这两个变体，
   不按 success/warning/danger 再分色。 */
.decision-stage[data-step="feedback"] .decision-banner {
  background-image: url('../assets/game/ui/icons/banner-red.png?v=2');
}
.decision-stage[data-step="feedback"] .decision-banner span {
  text-shadow: 0 1px 0 #B80027, 0 -1px 0 #B80027, 1px 0 0 #B80027, -1px 0 0 #B80027;
}

/* 木板内的选项区：设计稿选项 300x70 @ (22,56)/(22,131)/(22,206)，间距 5，
   即在 310x230 的木槽里再内缩 5/4/3，序号胶囊 22px #FFBC0D。 */
.decision-choices { display: flex; flex-direction: column; gap: 5px; margin: 5px 4px 3px; }
.decision-choices[hidden] { display: none; }
.decision-choice {
  position: relative; display: block; width: 100%; box-sizing: border-box;
  min-height: 70px; padding: 10px 12px 10px 42px;
  border: 2.25px solid transparent; border-radius: 12px;
  background:
    linear-gradient(#FBE9CE, #FBE9CE) padding-box,
    linear-gradient(180deg, #FEFBF1, #EDB67C) border-box;
  color: #5C3818; text-align: left; cursor: pointer;
  transition: filter .12s ease-out, box-shadow .12s ease-out;
}
.decision-choice:hover { filter: brightness(1.04) saturate(1.06); }
/* 选中态：设计稿 Component 10 —— 3px #F88D00 描边 + 右上角勾选圆点 */
.decision-choice.selected {
  border-color: #F88D00;
  background: linear-gradient(#FFF6E4, #FFF6E4) padding-box, linear-gradient(#F88D00, #F88D00) border-box;
  box-shadow: 0 0 0 1px #F88D00;
}
.decision-choice.selected::after {
  content: '✓'; position: absolute; right: 8px; top: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: #F88D00; color: #fff; font-size: 12px; font-weight: 900;
}
.decision-choice-index {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 100px; background: #FFBC0D;
  color: #5C3818; font-size: 15px; font-weight: 700;
}
.decision-choice-text { display: block; font-size: 14px; font-weight: 700; line-height: 1.4; }
.decision-choice-tag {
  display: inline-block; margin-top: 5px; padding: 1px 4px;
  border: 1px solid rgba(248, 141, 0, .5); border-radius: 4px;
  color: #F88D00; font-size: 11px; font-weight: 500;
}

/* 反馈步骤（设计稿 决策反馈A 589:10353）：
   深色木槽里再叠一块奶油面板 300x220 @ (22,56)，面板里从上到下是
     你的选择（11/500）→ 虚线分隔的状态表（标签 13/700，状态值 10/700）
     → 底部 #FAD4A6 结算条 280x42.5，条顶压着「= 预计经营趋势 =」小标题
   之前是深色木槽 + 一排奶油小胶囊，和设计稿完全不是一个东西。 */
.decision-result {
  position: relative; height: 100%; box-sizing: border-box;
  margin: 5px 4px 3px; padding: 12px 8px 8px;
  display: flex; flex-direction: column;
  border: 2.25px solid transparent; border-radius: 12px;
  background:
    linear-gradient(#FBE9CE, #FBE9CE) padding-box,
    linear-gradient(180deg, #FEFBF1, #EDB67C) border-box;
  color: #5C3818;
}
.decision-result[hidden] { display: none; }
.decision-result-choice { padding: 0 15px; font-size: 11px; font-weight: 500; line-height: 1.45; }
.decision-result-choice strong { font-weight: 700; }
.decision-status { margin-top: 11px; padding: 0 15px; display: flex; flex-direction: column; }
.decision-status-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 3px 0;
}
/* 设计稿的行间分隔是 0.5px 2-2 虚线；CSS 最细只能 1px */
.decision-status-row + .decision-status-row { border-top: 1px dashed rgba(167, 100, 42, .38); }
.decision-status-row > span { font-size: 13px; font-weight: 700; line-height: 1.39; }
.decision-status-row b { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.decision-status-row.tone-ok b { color: #4CAF50; }
.decision-status-row.tone-alert b { color: #DA291C; }
/* 备注型状态：棕色正文色 + 16px 黄色警示图标（设计稿 594:7615，员工调配那一行）。
   图标是通用警示三角，其它 warn 行复用同一枚。 */
.decision-status-row.tone-warn b { color: #5C3818; }
.decision-status-row.tone-warn b::before {
  content: ''; flex: none; width: 16px; height: 16px;
  background: url('../assets/game/ui/icons/icon-warning-amber.png') center / contain no-repeat;
}
.decision-preview {
  position: relative; margin-top: auto; padding: 18px 0 6px;
  border-radius: 6px; background: #FAD4A6;
  box-shadow: inset 0 1px 1px rgba(222, 177, 123, .5), inset 0 -1px 1px #FFF3E1;
}
.decision-preview-title {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 2px 16px;
  font-size: 10px; font-weight: 500; white-space: nowrap;
}
.decision-preview-title i { font-style: normal; color: rgba(92, 56, 24, .2); }
.decision-preview-title span { color: rgba(92, 56, 24, .6); }
.decision-preview-metrics { display: flex; gap: 2px; padding: 0 19px; }
.decision-preview-metrics span {
  flex: 1; text-align: center; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.decision-preview-metrics i { font-style: normal; }

.decision-actions { position: absolute; left: 17px; bottom: 0; width: 310px; }
.decision-confirm {
  width: 100%; height: 44px; border: 0; border-radius: 13px; cursor: pointer;
  background: linear-gradient(180deg, #FFC838, #F88D00);
  color: #4A2711; font-size: 14px; font-weight: 900;
  box-shadow: inset 0 -3px 0 rgba(163, 60, 5, .35);
  transition: filter .12s, transform .12s;
}
.decision-confirm:hover:not(:disabled) { filter: brightness(1.06); }
.decision-confirm:active:not(:disabled) { transform: scale(.98); }
.decision-confirm:disabled { filter: grayscale(.6); opacity: .6; cursor: not-allowed; }

/* ============ 提前结束回合的二次确认（Figma 提前结束回合 681:10925） ============
   与事件页木板同源，所以横幅直接复用 .dialog-banner（259x45 切图 + 棕色柔光），
   只把切图换成红版、文字描边换成 #B80027 —— 和决策反馈页的红横幅是同一个变体。
   其余尺寸/坐标严格照设计稿（见 index.html 里的坐标清单），
   布局用绝对定位而不是 flex：卡片是定尺的，绝对坐标最不容易和设计稿走偏。 */
.confirm-overlay { z-index: var(--z-confirm); padding: 0; background: rgba(0, 0, 0, .7); }
.confirm-overlay.active { display: block; }
.confirm-stage {
  position: absolute; left: 50%; top: 50%;
  width: 812px; height: 375px;
  transform: translate(-50%, -50%) scale(var(--ui-scale, 1));
  transform-origin: center center;
  line-height: 1.45;
}
.confirm-card { position: absolute; left: 236px; top: 50px; width: 340px; height: 286px; }
/* 横幅用红版：和 .decision-stage[data-step="feedback"] .decision-banner 同一套令牌 */
.confirm-banner { background-image: url('../assets/game/ui/icons/banner-red.png?v=2'); }
.confirm-banner span {
  text-shadow: 0 1px 0 #B80027, 0 -1px 0 #B80027, 1px 0 0 #B80027, -1px 0 0 #B80027;
}
.confirm-frame {
  position: absolute; left: 0; top: 21px; width: 340px; height: 265px; box-sizing: border-box;
  border: 2px solid transparent; border-radius: 24px;
  background:
    linear-gradient(#A7642A, #A7642A) padding-box,
    linear-gradient(180deg, #E8A163, #471302) border-box;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
}
/* 木槽只是外板上的一道凹陷装饰，奶油面板是它的兄弟节点（设计稿里也是两个平级图层）。
   注意坐标要减掉父级描边：绝对定位是从父级的 padding 边算起，而设计稿的坐标是从
   外沿算起。外板描边 2px → 设计稿 (16,29)/(21,35) 在这里写成 (14,27)/(19,33)；
   同理面板描边 2.25px，面板内三块内容的坐标也各减 2.25。 */
.confirm-well {
  position: absolute; left: 14px; top: 27px; width: 310px; height: 170px; box-sizing: border-box;
  border: 1px solid #C47B3C; border-radius: 15px; background: #76420A;
}
.confirm-panel {
  position: absolute; left: 19px; top: 33px; width: 300px; height: 159px; box-sizing: border-box;
  border: 2.25px solid transparent; border-radius: 12px;
  background:
    linear-gradient(#FBE9CE, #FBE9CE) padding-box,
    linear-gradient(180deg, #FEFBF1, #EDB67C) border-box;
  color: #5C3818;
}
/* 面板内三块内容：设计稿相对外板 (37,54)/(143,90)/(37,135)
   → 相对面板外沿 (16,19)/(_,55)/(16,100) → 再减面板描边 2.25 */
.confirm-panel-title {
  position: absolute; left: 13.75px; top: 16.75px; width: 268px; margin: 0;
  font-size: 14px; font-weight: 500; line-height: 1.286; text-align: center;
}
.confirm-progress {
  position: absolute; left: 0; top: 52.75px; width: 100%;
  font-size: 28px; font-weight: 900; line-height: 20px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.confirm-note {
  position: absolute; left: 13.75px; top: 97.75px;
  display: flex; align-items: flex-start; gap: 10px;
}
.confirm-note-icon { flex: none; width: 38px; height: 38px; object-fit: contain; }
.confirm-note p {
  width: 220px; margin: 0;
  font-size: 14px; font-weight: 500; line-height: 1.286; text-align: left;
}
/* 按钮压在外板之上（外板 z-index 默认 auto，这里给 2 就够） */
.confirm-actions { position: absolute; left: 16px; top: 230px; z-index: 2; display: flex; gap: 10px; }
.confirm-btn {
  width: 150px; height: 44px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: 13px; cursor: pointer;
  color: #4A2711; font-size: 14px; font-weight: 900;
  /* 设计稿给按钮文字加了 1px 白描边，四向 text-shadow 是这套稿子里一贯的实现方式 */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55), 0 -1px 0 rgba(255, 255, 255, .35);
  box-shadow: inset 0 -3px 0 rgba(163, 60, 5, .25);
  transition: filter .12s, transform .12s;
}
.confirm-btn-cancel { background: linear-gradient(180deg, #FBE5C6, #E3AE64); border-color: rgba(227, 174, 100, .5); }
.confirm-btn-primary { background: linear-gradient(180deg, #FFC838, #F88D00); border-color: rgba(248, 141, 0, .5); }
.confirm-btn:hover { filter: brightness(1.06); }
.confirm-btn:active { transform: scale(.98); }
.confirm-btn:focus-visible { outline: 2px solid rgba(255, 215, 83, .9); outline-offset: 3px; }

/* Figma 812×375 舞台 */
.flow-overlay {
  position: absolute; inset: 0; z-index: var(--z-training); display: none; place-items: center;
  background: #211c18;
}
.flow-overlay.active { display: grid; }
/* 启动页是唯一不透明的整屏遮罩，必须盖住所有业务浮层；
   反过来说它一旦不在启动阶段就必须被移除 active，否则会挡住事件浮层。 */
#startScreen { z-index: var(--z-start); }
.figma-stage {
  position: relative; overflow: hidden;
  width: min(100vw, calc(100vh * 2.165333));
  height: min(100vh, calc(100vw / 2.165333));
  background-position: center; background-repeat: no-repeat; background-size: 100% 100%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 70px rgba(0,0,0,.48);
}

/* 保留原训练画面与半身角色，只将舞台缩小并居中成浮层。
   层级必须高于 .modal-overlay（120）：培训是从事件浮层进入的下一层，
   之前被设成 115，任何没关掉的模态都会盖在食安/客诉舞台上面。 */
#complaintScreen, #foodSafetyScreen, #resultScreen {
  z-index: var(--z-training); place-items: center; padding: 0;
  background: rgba(28,17,10,.55); backdrop-filter: blur(2px);
}
/* 与 HUD／事件卡共用 812x375 定尺 + --ui-scale，
   避免培训页用 vw/vh 百分比、HUD 用定尺缩放，导致手机上两套比例不一致。 */
#complaintScreen .figma-stage, #foodSafetyScreen .figma-stage, #resultScreen .figma-stage {
  width: 812px; height: 375px; aspect-ratio: auto; overflow: hidden;
  transform: scale(var(--ui-scale, 1)); transform-origin: center center;
  background-position: center; background-repeat: no-repeat; background-size: 100% 100%;
  border-radius: 18px; box-shadow: 0 18px 60px rgba(0,0,0,.42);
}
/* 启动动画舞台：整屏铺满，视频用 contain 完整显示，不裁掉标题。
   视频原生 1470x630（2.333:1），比舞台的 2.165:1 更宽，用 cover 会切掉左右两侧的门店。 */
.start-stage {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  display: grid; place-items: center;
  background: #17100a;
}
.start-video {
  width: 100%; height: 100%; object-fit: contain;
  background: #17100a;
}
/* 音乐开关：启动页右下角，全局唯一的声音入口（旧版还有一个 .start-sound-btn，已删除）。
   .pending = 偏好是「开」但浏览器还没允许出声，用呼吸动画提示点一下就有声音。 */
.music-toggle {
  position: absolute; z-index: 5; right: 16px; bottom: 16px;
  width: 48px; height: 48px; padding: 0; border: none; border-radius: 50%;
  background: rgba(40, 22, 10, .72); color: #fff;
  font-size: 24px; cursor: pointer;
  backdrop-filter: blur(4px);
  transition: transform .12s, background .15s;
}
.music-toggle:hover { background: rgba(60, 32, 15, .85); transform: scale(1.08); }
.music-toggle:active { transform: scale(.95); }
.music-toggle.pending {
  border: 1.5px solid rgba(255, 232, 154, .85);
  animation: musicTogglePulse 1.4s ease-in-out infinite;
}
@keyframes musicTogglePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 56, .5); }
  50% { box-shadow: 0 0 0 8px rgba(255, 200, 56, 0); }
}
.music-toggle-icon { pointer-events: none; }
.start-loader {
  position: absolute; z-index: 3; left: 34.8%; top: 76.3%; width: 30.4%; height: 5.5%;
  padding: .42% .65%; border: 2px solid #eab779; border-radius: 999px;
  display: flex; align-items: center; gap: 3%;
  background: #673719; box-shadow: 0 3px 10px rgba(0,0,0,.32); transition: opacity .25s, transform .25s;
}
.start-loader[hidden] { display: none; }
.start-loader.complete { visibility: hidden; opacity: 0; pointer-events: none; }
.start-loader-track { position: relative; flex: 1; height: 72%; overflow: hidden; border-radius: 999px; background: #3f2518; box-shadow: inset 0 2px 5px rgba(0,0,0,.35); }
.start-loader-track i {
  position: relative; display: block; width: 0; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg,#ff9d00,#ffd43b); transition: width .28s ease-out;
}
.start-loader-track i::after {
  content: ""; position: absolute; inset: 0; width: 45%; transform: translateX(-130%);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  animation: loadingShimmer 1.15s linear infinite;
}
@keyframes loadingShimmer { to { transform: translateX(330%); } }
.start-loader strong { min-width: 15%; color: #fff8e8; text-align: center; font-size: clamp(10px,1.25vw,18px); text-shadow: 0 2px 2px rgba(0,0,0,.45); }
.start-loading-status { position: absolute; left: 0; right: 0; top: 125%; color: rgba(255,246,222,.9); text-align: center; font-size: clamp(7px,.75vw,11px); font-weight: 800; text-shadow: 0 2px 3px #2c160a; }
.stage-back {
  position: absolute; z-index: 9; left: 5.7%; top: 4.2%; width: 5%; aspect-ratio: 1;
  border: 2px solid #f2c49f; border-radius: 50%; background: linear-gradient(#9b5b35,#6f3d23); color: #fff8e9;
  display: grid; place-items: center; cursor: pointer; font-size: clamp(12px,1.6vw,22px); font-weight: 900;
  box-shadow: 0 3px 8px rgba(0,0,0,.28);
}
.stage-back:hover, .stage-back:focus-visible { outline: 3px solid rgba(255,255,255,.7); }

/* 客诉陪练 */
.complaint-stage { background-image: url("../assets/game/ui/backgrounds/complaint-scene-clean-v2.png"); }
.training-metrics {
  position: absolute; z-index: 5; top: 2.2%; left: 12.7%; right: 14.4%; height: 14%;
  display: grid; grid-template-columns: 1.25fr 1fr .9fr; gap: 2.1%;
}
.metric-pill {
  min-width: 0; padding: 0 6%; border: 2px solid #e9b998; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 5%;
  background: linear-gradient(#9a5a35, #754022); color: #fff4df; box-shadow: 0 3px 8px rgba(0,0,0,.24);
  font-size: clamp(8px, 1.15vw, 15px); font-weight: 900;
}
.metric-pill strong { color: #ffd456; white-space: nowrap; }
.emotion-track { width: 37%; height: 22%; overflow: hidden; border-radius: 99px; background: linear-gradient(90deg, #4bbb42, #f2c52e, #d22c22); }
.emotion-fill { width: 28%; height: 100%; border-right: 3px solid #fff; background: rgba(255,255,255,.24); transition: width .45s; }
.complaint-dialog-panel {
  position: absolute; z-index: 4; left: 53.5%; top: 20%; width: 40.5%; height: 56%;
  padding: 2.1% 2.5%; overflow-y: auto; border: 3px solid #e4a981; border-radius: 8% / 14%;
  background: #fff1d6; box-shadow: var(--shadow);
}
.dialog-eyebrow { display: flex; justify-content: space-between; align-items: center; gap: 3%; color: #9a684c; font-size: clamp(8px, .92vw, 12px); }
/* 包裹层不继承 .dialog-eyebrow span 的药丸底色，只有内部标签保留药丸样式 */
.dialog-eyebrow .dialog-eyebrow-role {
  padding: 0; border-radius: 0; background: transparent;
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
/* 顾客情绪表情：取自角色切图的真实表情，不使用 emoji */
.customer-mood-face {
  width: clamp(26px, 3.6vw, 46px); aspect-ratio: 1; flex: 0 0 auto;
  border: 2px solid #e9b998; border-radius: 50%; background: #ffe9c8;
  object-fit: cover; object-position: 50% 12%;
  box-shadow: 0 2px 6px rgba(0,0,0,.22); transition: border-color .3s;
}
.customer-mood-face[hidden] { display: none; }
.customer-mood-face.is-negative { border-color: #e0553f; }
.customer-mood-face.is-neutral { border-color: #e8ab34; }
.customer-mood-face.is-positive { border-color: #4ca63f; }
.dialog-eyebrow span { padding: 3px 8px; border-radius: 99px; background: #8c4d2d; color: #fff5df; font-weight: 900; }
.customer-line { margin: 2.2% 0 1.8%; color: #67412c; font-size: clamp(9px, 1.2vw, 16px); font-weight: 900; line-height: 1.45; }
.coach-tip { margin-bottom: 1.6%; color: #8b765f; font-size: clamp(7px, .82vw, 11px); }
.response-choices { display: grid; gap: 4px; }
.response-choice {
  width: 100%; padding: 5px 8px; border: 1px solid #d8ad86; border-radius: 9px;
  background: rgba(255,255,255,.76); color: #5b3521; text-align: left;
  font-size: clamp(7px, .84vw, 11px); font-weight: 700; line-height: 1.28; cursor: pointer;
}
.response-choice:hover:not(:disabled) { border-color: #ef9d00; background: #fff; }
.response-choice.selected-good { border-color: #4ca63f; background: #e9f7df; }
.response-choice.selected-risk { border-color: #d95743; background: #fff0eb; }
.response-choice:disabled { opacity: .74; cursor: default; }
.training-feedback { margin-top: 4px; min-height: 1.2em; font-size: clamp(7px, .8vw, 10px); font-weight: 800; }
.training-feedback.positive { color: #2d7c29; }
.training-feedback.warning { color: #b33a27; }
.voice-action {
  position: absolute; z-index: 5; left: 59%; bottom: 7%; width: 30%; height: 12%;
  border: 2px solid #ffe99a; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(#ffd64d,#f5a70a); color: #633310;
  font-size: clamp(8px,1vw,13px); font-weight: 900; box-shadow: 0 4px 0 #bd6c06, 0 8px 18px rgba(0,0,0,.28);
}
.voice-action:hover, .voice-action:focus-visible { outline: 3px solid rgba(255,255,255,.75); }
.mic-icon { display: inline; }

/* 食安答题 */
.food-stage { background-image: url("../assets/game/ui/backgrounds/food-safety-scene-clean-v1.png"); }
.quiz-timer {
  position: absolute; z-index: 4; left: 9.5%; top: 3.8%; width: 24.5%; height: 13%; padding: 6px 12px; border: 2px solid #e9b998; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(#965533,#70401f); color: #fff5dd; font-size: clamp(10px, 1.35vw, 18px); font-weight: 900;
}
.quiz-panel {
  position: absolute; z-index: 3; right: 3.2%; top: 6%; width: 42%; height: 88%;
  padding: 2.3% 2%; overflow-y: auto; border: 4px solid #f2a313; border-radius: 5%;
  background: #fff8e4; box-shadow: var(--shadow);
}
.quiz-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quiz-tag { padding: 4px 9px; border-radius: 99px; background: var(--blue); color: #fff; font-size: clamp(8px, .95vw, 12px); font-weight: 900; }
.quiz-header strong { color: #147eb9; font-size: clamp(9px, 1.1vw, 14px); }
.quiz-panel h2 { margin: 2.3% 0; color: #4b2d1b; font-size: clamp(10px, 1.25vw, 17px); line-height: 1.35; }
.quiz-options { display: grid; gap: 4px; }
.quiz-option {
  width: 100%; min-height: 27px; padding: 4px 7px; border: 1.5px solid #d9b18a; border-radius: 9px;
  display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 6px;
  background: #fff; color: #5c3a25; text-align: left; cursor: pointer;
}
.quiz-option span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #f6dca8; font-size: 9px; }
.quiz-option strong { font-size: clamp(7px, .83vw, 11px); line-height: 1.22; }
.quiz-option:hover:not(:disabled) { border-color: #e79500; }
.quiz-option.correct { border-color: #48a33d; background: #ebf8e7; }
.quiz-option.incorrect { border-color: #d64b3e; background: #fff0ed; }
.quiz-option:disabled { color: inherit; cursor: default; }
.quiz-explanation { margin-top: 5px; min-height: 20px; font-size: clamp(7px, .78vw, 10px); line-height: 1.25; font-weight: 700; }
.quiz-explanation.positive { color: #2f7f2b; }
.quiz-explanation.warning { color: #b53d2b; }
.quiz-next {
  float: right; margin-top: 5px; padding: 5px 18px; border: 0; border-radius: 99px;
  background: linear-gradient(#ffd34b,#ffac09); color: #683914; font-size: clamp(8px,.9vw,12px); font-weight: 900; cursor: pointer;
}
.quiz-next:disabled { filter: grayscale(1); opacity: .5; cursor: default; }

/* 结果页 */
.result-stage { background-size: 100% 100%; }
.result-stage.load-failed {
  background: radial-gradient(circle at 50% 18%, rgba(255,210,74,.22), transparent 32%), linear-gradient(145deg,#75411f,#2f1d15 72%);
  box-shadow: 0 18px 60px rgba(0,0,0,.42), inset 0 0 0 2px rgba(255,218,133,.25);
}
.result-stage.load-failed::before {
  content: "演练结果"; position: absolute; left: 0; right: 0; top: 16%;
  color: #ffd33e; text-align: center; font-size: clamp(18px,3vw,34px); font-weight: 900;
}
.result-summary {
  position: absolute; left: 56%; top: 47%; width: 35%; padding: 1.4% 2%;
  display: none; gap: 3px; border-radius: 14px; background: rgba(56,32,18,.94); color: #fff4d9;
  text-align: center; backdrop-filter: blur(4px);
}
.result-summary.visible { display: grid; }
.result-stage.load-failed .result-summary { left: 22%; top: 31%; width: 56%; padding: 3%; gap: 8px; }
.result-summary strong { color: #ffd33e; font-size: clamp(10px,1.4vw,18px); }
.result-summary span { font-size: clamp(7px,.85vw,11px); }
.result-summary em { color: #fff; font-size: clamp(7px,.8vw,10px); font-style: normal; }
.result-actions { position: absolute; left: 40.5%; bottom: 6.5%; width: 39.5%; height: 11.5%; display: flex; justify-content: center; gap: 6.5%; }
.result-actions button {
  width: 46.75%; border: 0; border-radius: 999px; outline: 0; background: transparent;
  color: transparent; font-size: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.result-actions button:hover { outline: 0; }
.result-actions button:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.62); }
.result-stage.load-failed .result-actions { left: 25%; width: 50%; }
.result-stage.load-failed .result-actions button {
  color: #5c321b; font-size: clamp(9px,1.2vw,15px); font-weight: 900;
  background: linear-gradient(#ffd64d,#f1a006); box-shadow: 0 3px 0 #a75b0b;
}
.result-stage.load-failed .result-actions button:focus-visible {
  box-shadow: 0 3px 0 #a75b0b, inset 0 0 0 2px rgba(255,255,255,.78);
}
.result-back {
  position: absolute; z-index: 5; left: 5.7%; top: 4.2%; width: 5%; aspect-ratio: 1;
  border: 0; border-radius: 50%; outline: 0; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.result-back:hover { outline: 0; }
.result-back:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.62); }
.result-stage.load-failed .result-back { background: rgba(255,255,255,.14); }

/* 经营数据和任务 */
.business-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-card { padding: 14px; border: 1px solid #edd0aa; border-radius: 14px; background: rgba(255,255,255,.58); }
.stat-card-title { margin-bottom: 5px; color: #89644d; font-size: 11px; }
.stat-card-value { font-size: 23px; font-weight: 900; }
.stat-card-change { margin-top: 5px; color: #378236; font-size: 10px; }
.trust-stars { color: #efaa00; letter-spacing: 1px; }
.metric-progress { height: 6px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: #eadbca; }
.metric-progress i { display: block; height: 100%; background: linear-gradient(90deg,#f2b01e,#53a947); }
.metric-progress.food i { background: linear-gradient(90deg,#59b9db,#2a8dca); }
.task-list { display: grid; gap: 9px; }
.task-item { padding: 12px; border: 1px solid #edd0aa; border-radius: 12px; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.55); }
.task-checkbox { width: 24px; height: 24px; flex: 0 0 auto; border: 2px solid #bea58f; border-radius: 50%; display: grid; place-items: center; }
.task-checkbox.done { border-color: #48a33d; background: #48a33d; color: #fff; }
.task-text { flex: 1; font-size: 13px; }
.task-text.done { color: #9b8c80; text-decoration: line-through; }
.task-reward { color: #d06b13; font-size: 11px; font-weight: 900; }
/* .shift-end-summary / .shift-end-actions 现仅由闭店弹窗复用，回合结算页见文件末尾的 .settle-* */
.shift-end-summary { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-bottom: 16px; }
.shift-end-summary div { padding: 11px; border: 1px solid #edd0aa; border-radius: 12px; background: rgba(255,255,255,.58); }
.shift-end-summary span { display: block; color: #89644d; font-size: 10px; }
.shift-end-summary strong { display: block; margin-top: 3px; font-size: 20px; }
.shift-end-actions { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.next-shift-btn, .shift-secondary-btn { padding: 11px; border-radius: 99px; font-weight: 900; cursor: pointer; }
.next-shift-btn { grid-column: 1 / -1; border: 0; background: linear-gradient(#ffd34b,#f5a30b); color: #673611; }
.shift-secondary-btn { border: 1px solid #d9ae82; background: rgba(255,255,255,.72); color: #704028; }
.shift-secondary-btn:hover { border-color: #f0a918; background: #fffaf0; }
.shift-detail-card { width: min(520px,94vw); text-align: left; }
.shift-detail-card .modal-header { align-items: flex-start; }
.shift-detail-card h2 { margin-top: 2px; font-size: 20px; }
.shift-detail-kicker { color: #b36c1d; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.shift-detail-overview { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-bottom: 12px; }
.shift-detail-overview div { padding: 9px; border-radius: 11px; background: #f8e5c7; text-align: center; }
.shift-detail-overview span { display: block; color: #8d684f; font-size: 9px; }
.shift-detail-overview strong { display: block; margin-top: 2px; font-size: 16px; }
.shift-record-list { display: grid; gap: 7px; max-height: 42vh; overflow-y: auto; padding-right: 3px; }
.shift-record-item { display: grid; grid-template-columns: 48px 1fr; gap: 9px; padding: 10px; border: 1px solid #ead0ae; border-radius: 12px; background: rgba(255,255,255,.64); }
.shift-record-time { color: #a26a32; font-size: 10px; font-weight: 900; }
.shift-record-content strong { display: block; font-size: 12px; }
.shift-record-content span { display: block; margin-top: 3px; color: #775845; font-size: 10px; line-height: 1.45; }
.shift-record-item.success { border-left: 4px solid #4ca63f; }
.shift-record-item.warning { border-left: 4px solid #ed9a24; }
.shift-record-empty { padding: 24px; color: #8d786a; text-align: center; }
.shift-local-note { margin-top: 10px; color: #907563; font-size: 9px; text-align: center; }

/* 即时反馈 */
/* 纯提示层，绝不能拦指针：它盖在屏幕正中，一旦可点击就会吃掉
   场景里事件气泡、员工、顾客的点击（提示消失前那 2.4s 全是死区）。 */
.feedback-toast {
  position: fixed; z-index: 600; left: 50%; top: 50%; transform: translate(-50%,-50%);
  max-width: min(80vw, 480px); padding: 14px 22px; border-radius: 14px;
  background: rgba(35,22,13,.94); color: #fff; text-align: center; font-size: 13px;
  box-shadow: var(--shadow); animation: toastLife 2.4s forwards;
  pointer-events: none;
}
@keyframes toastLife { 0% { opacity: 0; transform: translate(-50%,-45%) scale(.94); } 12%,78% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-58%); } }
.reward-popup {
  position: fixed; z-index: 610; left: 50%; top: 42%; transform: translate(-50%,-50%);
  padding: 20px 30px; border: 3px solid #fff0a5; border-radius: 18px;
  background: linear-gradient(145deg,#ffd94e,#f79510); box-shadow: 0 10px 35px rgba(242,151,16,.45);
  animation: toastLife 2.5s forwards;
  pointer-events: none; /* 同 .feedback-toast：奖励飘窗也是纯提示，不能挡住场景点击 */
}
.reward-title { color: #fff; font-size: 18px; font-weight: 900; text-shadow: 0 2px 3px rgba(0,0,0,.2); }

.rotate-hint { display: none; position: absolute; inset: 0; z-index: 900; place-items: center; background: #2a2019; color: #fff3d7; text-align: center; }
.rotate-hint span { font-size: 45px; }
.rotate-hint p { margin-top: 10px; font-weight: 800; }

@media (orientation: portrait) and (max-width: 700px) {
  .rotate-hint { display: grid; align-content: center; }
}

/* HUD、事件卡、决策浮层、培训页与结算页现在统一使用 812x375 定尺舞台 + --ui-scale，
   缩放由 JS 统一计算，不再需要按视口高度断点微调尺寸。 */

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

/* 坐标网格调试读数（隐藏工具，Ctrl+Shift+G 切换） */
.scene-grid-readout {
  position: absolute; z-index: 400; left: 50%; bottom: 14px; transform: translateX(-50%);
  padding: 6px 12px; border: 1px solid rgba(255, 211, 75, .55); border-radius: 8px;
  background: rgba(20, 12, 6, .84); color: #ffe9b8;
  font-family: Menlo, Consolas, monospace; font-size: 12px; font-weight: 700;
  letter-spacing: .02em; pointer-events: none; white-space: nowrap;
}
.scene-grid-readout[hidden] { display: none; }

/* ============ 新 UI 稿设计令牌 ============
   取自 Figma「new」画布（section 569:5874）与 Environmental HUD（580:6896）：
   深棕底 + 琥珀描边 + 毛玻璃，替代原先的米黄浅色调。 */
:root {
  --panel-dark: rgba(0, 0, 0, .6);
  --panel-brown: #703C1D;
  --panel-brown-shade: rgba(0, 0, 0, .27);
  --panel-stroke: rgba(255, 255, 255, .1);
  --panel-stroke-warm: #F9C5A7;
  --panel-blur: blur(9px);
  --panel-radius: 9px;
  --text-dim: rgba(255, 255, 255, .6);
  --accent-amber: #FFB020;
  --accent-danger: #F83822;
}

/* ---------- 环境 HUD（天气时间轴） ---------- */
.environmental-hud {
  position: absolute; z-index: 60; right: 14px; top: 88px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 9px 6px; min-width: 54px;
  border: .75px solid var(--panel-stroke); border-radius: var(--panel-radius);
  background: var(--panel-dark); backdrop-filter: var(--panel-blur);
  pointer-events: none;
}
/* ---------- 时钟（设计稿 node-1：28×28 框内 22×22 圆环，白色 2px 描边 + 两根指针） ----------
   角度由 JS 每分钟写入 --clock-hour-angle / --clock-minute-angle，
   两个变量都是「累计角度」（不取模），配合线性过渡指针只会往前走。 */
.env-clock {
  position: relative; flex: none;
  box-sizing: border-box; width: 24px; height: 24px;
  border: 2px solid #fff; border-radius: 50%;
  --clock-hour-angle: 0deg;
  --clock-minute-angle: 0deg;
}
.env-clock-hand {
  position: absolute; left: 50%; bottom: 50%;
  border-radius: 99px; background: #fff;
  transform-origin: 50% 100%;
}
/* 角度由 requestAnimationFrame 每帧写入，所以这里不能再加 transition ——
   过渡会和逐帧写入互相打断，反而变成一顿一顿的。 */
.env-clock-hand.hour { width: 2px; height: 5px; margin-left: -1px; transform: rotate(var(--clock-hour-angle)); }
.env-clock-hand.minute { width: 2px; height: 7px; margin-left: -1px; transform: rotate(var(--clock-minute-angle)); }
/* 设计稿的餐段与体感文案都是 7px / 500，没有描边或投影 */
.env-segment-label { flex: none; color: #fff; font-size: 7px; font-weight: 500; line-height: 1.45; white-space: nowrap; }
/* 分隔线：设计稿 Line 29 / Line 30，24px 宽 1px 高 */
.env-divider { flex: none; width: 24px; height: 1px; background: rgba(255, 255, 255, .08); }
.env-weather { flex: none; display: grid; place-items: center; width: 20px; height: 20px; }
.env-weather .env-icon { width: 20px; height: 20px; }

.kpi-chip.is-alert { border-color: var(--accent-danger); background: rgba(248, 56, 34, .22); }

/* ---------- 回合 GC 账本（结算页右栏深色框，对应设计稿 593:4033） ----------
   375px 屏高放不下 7 行明细，改为 3 列紧凑格：标签在上、数值在下。 */
.settle-ledger {
  flex: 0 0 auto;
  padding: 8px; border-radius: 8px;
  background: #5C3818; color: #F9E1CE;
}
.settlement-ledger-title { margin-bottom: 3px; color: #F9E1CE; font-size: 10px; font-weight: 900; }
.settlement-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px 6px; }
.settlement-cell { display: flex; flex-direction: column; }
.settlement-cell span { color: rgba(249, 225, 206, .62); font-size: 8px; font-weight: 500; white-space: nowrap; }
.settlement-cell strong { color: var(--accent-amber); font-size: 11px; font-weight: 900; line-height: 1.3; }
.settlement-cell.negative strong { color: #FF9C8A; }
.settlement-cell.total strong { font-size: 12px; }
.settlement-note { margin: 4px 0 0; color: rgba(255, 233, 200, .7); font-size: 8px; line-height: 1.4; }
.metric-progress.equipment i { background: linear-gradient(90deg, #59B9DB, #7ED4F0); }
.metric-progress.restaurant i { background: linear-gradient(90deg, #F2B01E, #4CA63F); }



/* ============ 手机横屏适配：812x375 设计舞台 ============
   Figma 新稿每一屏都是 812x375（iPhone 横屏逻辑分辨率）。
   这里把 HUD 放进一个固定 812x375 的舞台并等比缩放，
   于是所有尺寸都能直接照抄设计稿像素值，不同屏幕比例下也不会变形。
   Pixi 画布仍按视口原生分辨率渲染，不受缩放影响，避免模糊。 */
#ui-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* 舞台尺寸由 JS 按视口换算（见 ui.js 的 updateUiScale），默认值只作为无脚本兜底。
   注意这里不能写死 812x375，否则视口比例不等于 812:375 时会出现信箱空白。 */
.ui-stage {
  position: absolute; left: 50%; top: 50%;
  width: var(--ui-stage-w, 812px); height: var(--ui-stage-h, 375px);
  transform: translate(-50%, -50%) scale(var(--ui-scale, 1));
  transform-origin: center center;
  /* ---------- 首页改版布局令牌（2026-09）：坐标全部集中在此，便于对照 Figma 微调 ----------
     左侧环境 HUD / 左下摇杆 / 右侧竖排导航。左轨（正餐/舒适）已移除。 */
  --env-hud-left: 45px;
  --env-hud-top: 75px;
  --joystick-left: 30px;
  --joystick-bottom: 18px;
  --joystick-base-size: 96px;
  --joystick-knob-size: 44px;
  --nav-right: 16px;
  --nav-top: 66px;
  --nav-btn-size: 54px;
  --nav-gap: 12px;
}
.ui-stage > * { pointer-events: auto; }

/* ---------- 顶部 HUD（对齐设计稿 padding 10px 48px / 高 60） ---------- */
.ui-stage .top-bar {
  position: absolute; left: 0; top: 0; right: 0; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 48px 0; gap: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
}

/* 玩家信息卡片 */
.ui-stage .player-card {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ui-stage .player-avatar-frame {
  width: 48px;
  height: 48px;
  border-radius: 9px;
  background: linear-gradient(180deg, #F3D2A4, #E6B779);
  box-shadow: 0px 1px 3px rgba(183, 142, 89, 1);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
/* 头像改用 UI 稿的真人切图，不再用文字首字母 */
.ui-stage .player-avatar-frame img.avatar { object-fit: cover; background: none; border: 0; }
.ui-stage .player-avatar-frame .avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 900;
  background: linear-gradient(#FFC838, #F88D00);
  color: #5C3818;
  border: none;
}
.ui-stage .player-info-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ui-stage .player-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ui-stage .player-role {
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, .6);
}
.ui-stage .level-badge {
  margin-left: 4px; padding: 1px 5px; border-radius: 99px; font-size: 9px;
  background: linear-gradient(#FFC838, #F88D00); color: #5C3818;
}
.ui-stage .player-exp-bar {
  position: relative;
  width: 72px;
  height: 8px;
  border-radius: 100px;
  background: linear-gradient(90deg, #A35D22, #754114);
  border: 0.5px solid #905622;
  box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
.ui-stage .player-exp-bar .exp-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #F3B108, #EF8D03);
  transition: width .3s;
}
.ui-stage .player-exp-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 7px;
  font-weight: 900;
  text-shadow: 0px 0.5px 0px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* CurrencyPill */
.ui-stage .currency-pills {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ui-stage .currency-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px 0 4px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(112, 60, 29, .92), rgba(60, 30, 14, .92));
  border: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  white-space: nowrap;
}
/* 胶囊图标改用 UI 稿切图（金币 / 小票 / 笑脸表盘），不再用 emoji + 渐变圆底 */
.ui-stage .pill-icon {
  width: 44px;
  height: 44px;
  margin-left: -6px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(203, 97, 1, .35));
}
.ui-stage .pill-label {
  color: #F9E1CE;
  font-size: 11px;
  font-weight: 700;
}
.ui-stage .currency-pill strong {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
}

/* HUD 逐位数字滚动动画（js/ui.js 的 animateNumberRoll）：
   strong 开 tabular-nums 让各数字字形等宽；变化的位放进定宽滚动槽
   （宽度由 JS 实测数字步进写入行内样式，CSS 的 1ch 仅为兜底，
   因为部分系统字体里 ch 与 tabular 数字实际步进不相等），
   槽内旧数字上滑淡出、新数字从下滑入，错峰延迟由 --digit-roll-delay 控制；
   未变化的字符（¥ 前缀、千分位逗号、相同数字）为静止的 digit-roll-char。
   位数不变时总宽恒定，胶囊不会再随数字变化抖动 */
.ui-stage .currency-pill strong {
  font-variant-numeric: tabular-nums;
}
.ui-stage .currency-pill strong .digit-roll-prefix {
  display: inline-block;
  vertical-align: bottom;
}
.ui-stage .currency-pill strong .digit-roll-stage {
  display: inline-block;
  vertical-align: bottom;
  white-space: nowrap;
}
.ui-stage .currency-pill strong .digit-roll-char {
  display: inline-block;
  vertical-align: bottom;
}
.ui-stage .currency-pill strong .digit-roll-cell {
  position: relative;
  display: inline-block;
  width: 1ch;
  overflow: hidden;
  vertical-align: bottom;
  text-align: center;
}
.ui-stage .currency-pill strong .digit-roll-cell .digit-roll-old,
.ui-stage .currency-pill strong .digit-roll-cell .digit-roll-new {
  display: block;
}
.ui-stage .currency-pill strong .digit-roll-cell .digit-roll-new {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
  transition-delay: var(--digit-roll-delay, 0ms);
}
.ui-stage .currency-pill strong .digit-roll-stage.rolling .digit-roll-cell .digit-roll-old {
  transform: translateY(-100%);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
  transition-delay: var(--digit-roll-delay, 0ms);
}
.ui-stage .currency-pill strong .digit-roll-stage.rolling .digit-roll-cell .digit-roll-new {
  transform: translateY(0);
  opacity: 1;
}

/* 设置按钮：UI 稿右上角的棕色齿轮切图 */
/* 库存 / 设备徽标：已从 HUD 移入「地图」面板 */
.ops-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ops-inline .ops-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 10px; border: 1px solid #e7c79f; border-radius: 99px;
  background: #fffaf0; color: #5c3818; font-size: 11px; font-weight: 700; cursor: default;
}
.ops-inline .ops-badge strong { color: #b3560f; font-weight: 900; }
.ops-inline .ops-badge.is-warn { border-color: var(--accent-amber); background: #fff4d6; }
.ops-inline .ops-badge.is-alert { border-color: var(--accent-danger); background: #ffe9e4; }
.ops-inline .ops-badge.is-alert strong { color: #c22a18; }
.ops-inline .ops-fix {
  height: 28px; padding: 0 12px; border: 0; border-radius: 99px; cursor: pointer;
  background: linear-gradient(#FFD64D, #F1A006); color: #5C321B; font-size: 11px; font-weight: 900;
}
.ops-inline .ops-fix.danger { background: linear-gradient(#FF7B63, #E13B22); color: #fff; }
.ops-inline .ops-fix[hidden] { display: none; }

/* ---------- 环境 HUD ---------- */
/* 靠左元素必须用 left 定位。舞台宽度会随视口变化（见 .ui-stage）。
   2026-09 首页改版：左轨「正餐/舒适」按钮已移除，环境 HUD 从右侧挪回左侧，
   对齐设计稿 (45,75)，左距由 .ui-stage 的 --env-hud-left 令牌控制。 */
.ui-stage .environmental-hud {
  position: absolute; left: var(--env-hud-left, 45px); top: var(--env-hud-top, 75px); right: auto;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  box-sizing: border-box; width: 40px; min-width: 0; padding: 9px 6px;
  border: .75px solid var(--panel-stroke); border-radius: var(--panel-radius);
  background: var(--panel-dark); backdrop-filter: var(--panel-blur);
  pointer-events: none;
}
/* ---------- 体感弧形表（UI 稿 temp-row：27×26 框内 24×18.67 的弧 + 4×4 白点） ----------
   弧是一条 270° 的彩色带，缺口 90° 朝正下方：
   起点（缺口左端）蓝 #48AEFF → 绿 #4CAF50 → 琥珀 #FFBC0D → 红 #DA291C（缺口右端）。
   换算：conic-gradient 的 from 225deg 正好落在缺口左端，顺时针 270° 到缺口右端。
   线宽按设计稿的 2px：圆环半径 11，遮罩只留 10~12 这一圈。
   --comfort-angle 由 JS 写入（沿弧的 0~270°），用来定位白色指示点。 */
.env-comfort {
  position: relative; flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  --comfort-angle: 101deg;
}
.env-comfort::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 225deg,
    #48AEFF 0deg, #4CAF50 101deg, #FFBC0D 190deg, #DA291C 270deg,
    transparent 270deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 9.7px, #000 10.3px 11.7px, transparent 12.3px);
  mask: radial-gradient(circle, transparent 0 9.7px, #000 10.3px 11.7px, transparent 12.3px);
}
/* 指示点：沿弧旋转到当前体感对应的色标位置（设计稿里「舒适」正落在绿色段） */
.env-comfort::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px; margin: -2px; border-radius: 50%;
  background: #fff;
  transform: rotate(calc(225deg + var(--comfort-angle))) translateY(-10.5px);
  transform-origin: center center;
  transition: transform .4s ease-out;
}
.env-comfort-label {
  position: relative; z-index: 1;
  color: #fff; font-size: 7px; font-weight: 500; white-space: nowrap;
}
.env-comfort[data-tone="warn"] .env-comfort-label { color: #FFE08A; }
.env-comfort[data-tone="bad"] .env-comfort-label { color: #FFC1B8; }

/* ---------- 库存 / 设备紧凑徽标（放左侧，避免遮挡右侧天气 HUD） ---------- */
.ops-rail { position: absolute; left: 48px; top: 66px; display: flex; align-items: center; gap: 6px; }
.ops-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 8px; border: 1px solid var(--panel-stroke); border-radius: 99px;
  background: var(--panel-dark); backdrop-filter: var(--panel-blur);
  color: rgba(255, 255, 255, .85); font-size: 10px; font-weight: 800; cursor: pointer;
}
.ops-badge-icon { font-size: 11px; }
.ops-badge.is-warn { border-color: var(--accent-amber); color: #FFE0A3; }
.ops-badge.is-alert { border-color: var(--accent-danger); background: rgba(248, 56, 34, .28); color: #FFD9D3; }
.ops-fix {
  height: 24px; padding: 0 10px; border: 0; border-radius: 99px; cursor: pointer;
  background: linear-gradient(#FFD64D, #F1A006); color: #5C321B; font-size: 10px; font-weight: 900;
}
.ops-fix.danger { background: linear-gradient(#FF7B63, #E13B22); color: #fff; }

/* 右下角盾形「结束回合」按钮（.round-end-btn）已随 2026-09 首页改版移除：
   回合由时钟推进自动结算，续局入口在结算页「进入下一回合」。 */

/* ---------- 舞台内其余 HUD 缩到设计比例 ---------- */
.ui-stage .event-guide { top: 66px; left: 50%; transform: translateX(-50%); font-size: 11px; padding: 6px 14px; }
.ui-stage .event-queue-panel { top: 100px; right: 96px; }
/* ---------- 底部导航（.bottom-nav 基础规则） ----------
   2026-09 首页改版：导航改为右侧竖排图标列（限时活动/成就/伙伴/班次任务），
   定位与尺寸由文件末尾「底部导航改右侧竖排」区块接管；
   这里只保留元素级基础规则（flex 布局、无默认背景/边框）。
   旧的「左侧三按钮 + 右下盾形结束回合」布局已随改版移除。 */
.ui-stage .bottom-nav {
  position: absolute; left: 48px; bottom: 16px;
  display: flex; align-items: flex-end; gap: 12px;
  margin: 0; padding: 0; background: none; border: 0;
}
.ui-stage .nav-btn {
  width: 60px; height: 60px; padding: 0; border: 0; border-radius: 0;
  position: relative; display: block; background: transparent; cursor: pointer;
  transition: transform .15s, filter .15s;
  -webkit-tap-highlight-color: transparent;
}
.ui-stage .nav-btn .nav-icon {
  position: absolute; left: -7.5px; top: -7.5px;
  width: 75px; height: 75px; border: 0; border-radius: 0; background: none;
  object-fit: contain; pointer-events: none;
}
/* 标签文字已经画在图标 PNG 里，DOM 文本只保留给屏幕阅读器 */
.ui-stage .nav-btn .nav-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ui-stage .nav-btn:hover, .ui-stage .nav-btn:focus-visible { transform: translateY(-2px); filter: brightness(1.08); }
.ui-stage .nav-btn:focus-visible { outline: 2px solid rgba(255, 215, 83, .9); outline-offset: 4px; }
.ui-stage .nav-btn:active { transform: scale(.95); }
.ui-stage .nav-new-badge {
  position: absolute; z-index: 2; right: -8px; top: -8px; min-width: 25px; height: 13px; padding: 0 4px;
  display: grid; place-items: center; border: 1px solid #fff1c9; border-radius: 8px;
  background: #DA291C; color: #fff; font-size: 6px; font-weight: 900; line-height: 1;
  box-shadow: 0 2px 4px rgba(45,18,4,.45); pointer-events: none;
}

/* 班次进度带（.ui-stage .shift-meter）已随 2026-09 首页改版移除：
   班次进度由时钟推进自动结算，首页不再显示倒计时横幅。 */

/* 值班行动收进「地图」面板 */
.shift-action-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 12px; }
.shift-action-btn {
  min-width: 0; padding: 8px 6px; border: 1px solid #e7c79f; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #fffaf0; color: #5c3818; cursor: pointer; transition: transform .12s, background .15s;
}
.shift-action-btn:hover:not(:disabled) { background: #ffeec4; border-color: #f1a519; }
.shift-action-btn:active:not(:disabled) { transform: scale(.96); }
.shift-action-btn:disabled { opacity: .45; filter: grayscale(.4); cursor: not-allowed; }
.shift-action-btn.selected { border-color: #f1a519; background: #ffe09a; }
.shift-action-icon { font-size: 20px; }
.shift-action-text { font-size: 11px; font-weight: 800; }
.shift-action-btn small { color: #9b7049; font-size: 8px; text-align: center; line-height: 1.25; }

/* ---------- 结算明细补充 ---------- */
.settlement-warn { color: #FF9C8A; font-weight: 900; }

/* ---------- 闭店弹窗（Figma 679:10672 完全复刻） ----------
   设计尺寸 548×335，外板 #A7642A + 渐变描边 #E8A163→#471302 2px / radius 24
         内衬虚线 #C27A3B 1px dashed / radius 17 @ (7,7)
         内容卡 #FBE9CE + 渐变描边 #FEFBF1→#F0B594 2.25px / radius 16
         标题 24px/900 #5C3818 / 装饰线渐变 #E0B283
         数据卡 #FFF5E7 / radius 12 / gap 16px / 图标 36×36 白底方块
         按钮渐变 #FFC838→#F88D00 / 文字 #4A2711 + 1px 白描边 */
.closure-overlay { z-index: var(--z-closure); }

/* 外板：棕色背景 + 渐变描边 */
.closure-overlay .closure-card {
  position: relative;
  width: 548px; box-sizing: border-box;
  padding: 12px;
  border: 2px solid transparent; border-radius: 24px;
  background:
    linear-gradient(#A7642A, #A7642A) padding-box,
    linear-gradient(180deg, #E8A163, #471302) border-box;
  box-shadow: 0 8px 32px rgba(80, 40, 10, .35);
  text-align: center;
  animation: modalIn .24s ease-out;
}

/* 虚线边框衬里 */
.closure-inner-border {
  position: absolute; left: 7px; top: 7px; right: 7px; bottom: 7px;
  border: 1px dashed #C27A3B; border-radius: 17px;
  pointer-events: none;
}

/* 内层内容卡 */
.closure-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 12px 16px; box-sizing: border-box;
  border: 2.25px solid transparent; border-radius: 16px;
  background:
    linear-gradient(#FBE9CE, #FBE9CE) padding-box,
    linear-gradient(180deg, #FEFBF1, #F0B594) border-box;
}

/* 左上角红色关闭按钮 */
.closure-close {
  position: absolute; z-index: 5;
  left: -18px; top: -18px;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer;
  background: #C0392B url('../assets/game/ui/icons/btn-close-red.png') center / 60% 60% no-repeat;
  box-shadow: 0 3px 8px rgba(0,0,0,.3);
  transition: transform .12s ease-out;
}
.closure-close:hover { transform: scale(1.1); }
.closure-close:active { transform: scale(.95); }

/* 右上角「已闭店」印章（Figma 680:10853）
   卡片内位置 (408,24) 尺寸槽 126×126；切图 235×199 非正方形，
   必须保持原始比例显示（height:auto），不做任何 CSS 旋转/拉伸 ——
   倾斜是切图里「已闭店」矩形本身的形态。 */
.closure-stamp {
  position: absolute; z-index: 2;
  right: 2px; top: 12px;          /* 卡片坐标 right=14, top=24（内卡比卡片内缩 12px） */
  width: 126px; height: auto;
  opacity: .45; pointer-events: none; user-select: none;
}

/* 标题行 */
.closure-header {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  width: 100%;
}
.closure-header h2 {
  margin: 0; font-size: 24px; font-weight: 900; color: #5C3818; white-space: nowrap;
}

/* 标题两侧装饰（Figma 680:10810/10812：19px 渐变线 + 2 颗 14px 星，gap 4）
   排布：线在外侧、星紧靠标题；线的渐变从星侧实色向外侧透明淡出 */
.closure-starline {
  display: flex; align-items: center; gap: 4px;
  flex: 0 0 auto; height: 14px;
}
.closure-starline::before {
  content: ''; width: 19px; height: 1px; flex: 0 0 auto;
}
.closure-starline--left::before {
  order: -1;   /* 线在星之外侧 */
  background: linear-gradient(90deg, rgba(224, 178, 131, 0), #E0B283);
}
.closure-starline--right::before {
  order: 3;    /* 线在星之外侧 */
  background: linear-gradient(90deg, #E0B283, rgba(224, 178, 131, 0));
}
.closure-starline i {
  display: block; width: 14px; height: 14px; flex: 0 0 auto;
  background: #E0B283;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
  border-radius: 1.27px;
}

/* 描述文字 */
.closure-desc {
  margin: 0; color: #5C3818; font-size: 12px; font-weight: 500;
  line-height: 1.5; text-align: center;
}

/* 数据卡片 2×2 网格 */
.closure-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  width: 444px;
}
.closure-stat {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
  background: #FFF5E7; border-radius: 12px;
  text-align: left;
}
.closure-stat:first-child { border-radius: 12px 0 0 0; }
.closure-stat:nth-child(2) { border-radius: 0 12px 0 0; }
.closure-stat:nth-child(3) { border-radius: 0 0 0 12px; }
.closure-stat:last-child { border-radius: 0 0 12px 0; }

/* 图标容器：36×36 白底圆角方块 */
.closure-stat-icon {
  width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: 6px;
  object-fit: contain;
}
.closure-stat-body { flex: 1 1 auto; min-width: 0; }
.closure-stat-label {
  display: block; color: #89644D; font-size: 11px; font-weight: 600;
  margin-bottom: 2px;
}
.closure-stat-value {
  display: block; color: #5C3818; font-size: 20px; font-weight: 900;
}
.closure-stat-value.is-negative { color: #C0392B; }

/* 重新开业按钮 */
.closure-btn-wrap {
  display: flex; justify-content: center;
}

.closure-restart-btn {
  display: block; width: 160px;
  padding: 10px 0; border: 0; border-radius: 10px;
  background: linear-gradient(180deg, #FFC838, #F88D00);
  color: #4A2711; font-size: 14px; font-weight: 900;
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(200, 100, 0, .3);
  transition: transform .12s, box-shadow .12s;
}
.closure-restart-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(200, 100, 0, .4); }
.closure-restart-btn:active { transform: scale(.97); }
/* ============ 回合结算页（Figma round-settlement 593:3976） ============
   设计尺寸 812x375，padding 16px 48px，列间距 12px。
   与 .ui-stage 共用 --ui-scale，保证手机横屏下与 HUD 同比例。
   设计令牌：面板 #FBE9CE / 描边渐变 #FEFBF1→#F0B594 2px / radius 16px
             metric card #FFF3DA + 1px #A7642A / radius 12px
             市场行 #E1F0F8 + 1px #2C6B9E / radius 8px
             深色提示 #5C3818 + 文字 #F9E1CE
             主按钮渐变 #FFC838→#F88D00 + 1.5px #5C3818 / XP 徽标 #5BC25F */
.settle-overlay { z-index: var(--z-settle); padding: 0; background: rgba(30, 18, 10, .75); backdrop-filter: blur(4px); }
.settle-overlay.active { display: block; }
#closureModal { z-index: var(--z-closure); }
#shiftDetailModal { z-index: var(--z-detail); }
.settle-stage {
  position: absolute; left: 50%; top: 50%;
  width: 812px; height: 375px;
  transform: translate(-50%, -50%) scale(var(--ui-scale, 1));
  transform-origin: center center;
  font-family: var(--font-family, inherit);
  line-height: 1.4;
}

/* ---------- 头部：关闭 40 + 标题 + 评价 + 分隔线 + 健康度（设计稿 (48,16) 716x48） ---------- */
.settle-head {
  position: absolute; left: 48px; top: 16px; width: 716px; height: 48px;
  display: flex; align-items: center; gap: 16px;
}
.settle-close {
  width: 40px; height: 40px; flex: 0 0 auto; padding: 0; border: 0; cursor: pointer;
  background: transparent url('../assets/game/ui/icons/btn-close-red.png') center / contain no-repeat;
  transition: transform .12s ease-out;
}
.settle-close:hover { transform: scale(1.08); }
.settle-title { flex: 1 1 auto; margin: 0; color: #FBE9CE; font-size: 18px; font-weight: 900; white-space: nowrap; }
.settle-head-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.settle-meta-label { color: rgba(251, 233, 206, .8); font-size: 12px; font-weight: 700; }
.settle-meta-grade { color: #fff; font-size: 16px; font-weight: 900; white-space: nowrap; }
.settle-meta-health { color: #5BC25F; font-size: 18px; font-weight: 900; white-space: nowrap; }
.settle-meta-health.down { color: #FF8A7A; }
.settle-head-divider { flex: 0 0 auto; width: 1px; height: 16px; background: rgba(251, 233, 206, .4); }

/* ---------- 三列主体（设计稿 (48,72) 宽 716，gap 8） ---------- */
.settle-columns {
  position: absolute; left: 48px; top: 72px; width: 716px;
  display: flex; align-items: stretch; gap: 8px;
}

/* 左：Sam 复盘卡 —— 棕框 + 虚线内衬 + 米色卡片 + 回形针 */
.settle-npc-card {
  position: relative; flex: 1 1 auto; min-width: 0; height: 231px; box-sizing: border-box;
  padding: 12px; border: 2px solid transparent; border-radius: 24px;
  background:
    linear-gradient(#A7642A, #A7642A) padding-box,
    linear-gradient(180deg, #E8A163, #471302) border-box;
}
.settle-npc-card::before {
  content: ''; position: absolute; left: 7px; top: 7px; right: 7px; bottom: 7px;
  border: 1px dashed #C27A3B; border-radius: 17px; pointer-events: none;
}
.settle-paperclip {
  position: absolute; left: 127px; top: -15px; width: 72px; height: 72px;
  filter: drop-shadow(0 3px 3px rgba(169, 102, 44, .35)); pointer-events: none;
}
.settle-npc-inner {
  height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 16px; border: 2.25px solid transparent; border-radius: 16px;
  background:
    linear-gradient(#FBE9CE, #FBE9CE) padding-box,
    linear-gradient(180deg, #FEFBF1, #F0B594) border-box;
}
.settle-npc-head { display: flex; align-items: center; gap: 16px; }
.settle-npc-avatar {
  width: 48px; height: 48px; flex: 0 0 auto; box-sizing: border-box;
  display: grid; place-items: center; padding: 2px; border-radius: 9px;
  background: linear-gradient(180deg, #FBE6C5, #BD8043);
  box-shadow: 0 1px 3px rgba(183, 142, 89, 1);
}
.settle-npc-avatar img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
.settle-npc-id { display: flex; flex-direction: column; }
.settle-npc-id strong { color: #5C3818; font-size: 16px; font-weight: 900; line-height: 1.2; }
.settle-npc-id small { color: #A37C5E; font-size: 9px; font-weight: 500; }
.settle-npc-review {
  margin: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto;
  color: #5C3818; font-size: 12px; font-weight: 500; line-height: 1.5;
}

/* 中列：本回合处理 + 宏观市场（设计稿宽 280）
   高度锁在与左卡一致的 231px，两块面板内部各自滚动，
   否则内容一多就会顶出 375 的舞台高度、压住底部按钮。 */
.settle-mid {
  flex: 0 0 280px; width: 280px; height: 231px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 8px;
}
.settle-mid .settle-panel { min-height: 0; }
.settle-mid .settle-panel:first-child { flex: 1 1 auto; }
.settle-mid .settle-panel:last-child { flex: 0 0 auto; }
.settle-mid .settle-review-list { overflow-y: auto; min-height: 0; }

.settle-panel {
  box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border: 2.25px solid transparent; border-radius: 16px;
  background:
    linear-gradient(#FBE9CE, #FBE9CE) padding-box,
    linear-gradient(180deg, #FEFBF1, #F0B594) border-box;
}
.settle-panel-title { flex: 0 0 auto; color: rgba(92, 56, 24, .6); font-size: 10px; font-weight: 500; }
.settle-panel-title small { margin-left: 4px; font-size: 9px; }

/* 本回合处理：行内 ✅/⚠ + 事件名 + 右侧状态 */
.settle-review-list { display: flex; flex-direction: column; gap: 4px; }
.settle-review-row {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 4px 8px; border-radius: 6px; background: #FFF5E7;
}
.settle-review-main { display: flex; align-items: center; gap: 6px; min-width: 0; }
.settle-review-main i { flex: 0 0 auto; font-size: 12px; font-style: normal; line-height: 1; }
.settle-review-main span { overflow: hidden; color: #5C3818; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.settle-review-status { flex: 0 0 auto; font-size: 11px; font-weight: 900; }
.settle-review-row.success .settle-review-status { color: #5BC25F; }
.settle-review-row.warning .settle-review-status { color: #BF7206; }
.settle-review-row.neutral .settle-review-status { color: #A37C5E; }
.settle-review-empty { padding: 6px; color: #A37C5E; font-size: 11px; text-align: center; }

/* 宏观市场：两张横向卡片，图标 + 名称 + 客流影响 */
.settle-market-list { display: flex; align-items: stretch; gap: 6px; }
.settle-market-row {
  flex: 1 1 0; min-width: 0; display: flex; gap: 4px;
  padding: 6px 8px; border: 1px solid rgba(167, 100, 42, .4); border-radius: 12px;
  background: #FFF3DA;
}
.settle-market-icon { flex: 0 0 12px; font-size: 12px; line-height: 1.3; }
.settle-market-text { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.settle-market-label { color: #5C3818; font-size: 11px; font-weight: 700; line-height: 1.35; }
.settle-market-impact { color: #DB0007; font-size: 10px; font-weight: 900; }
.settle-market-row.positive .settle-market-impact { color: #1F8A46; }
.settle-market-empty { padding: 6px; color: #A37C5E; font-size: 11px; text-align: center; }

/* 右列：最终经营数据（设计稿宽 200），每行 = 图标 + 标签/数值 + 涨跌 */
.settle-metrics-panel { flex: 0 0 200px; width: 200px; height: 231px; box-sizing: border-box; }
.settle-metrics { display: flex; flex-direction: column; gap: 4px; }
.settle-metric {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 8px; border-radius: 12px; background: #FFF5E7;
}
.settle-metric-icon { width: 30px; height: 30px; flex: 0 0 auto; object-fit: contain; }
.settle-metric-body { display: flex; flex-direction: column; min-width: 0; }
.settle-metric-label { color: #A37C5E; font-size: 10px; font-weight: 700; white-space: nowrap; }
.settle-metric-figure { display: flex; align-items: baseline; gap: 6px; }
.settle-metric-value { color: #5C3818; font-size: 16px; font-weight: 900; line-height: 1.3; white-space: nowrap; }
.settle-metric-delta { font-size: 10px; font-weight: 900; white-space: nowrap; }
.settle-metric-delta.up { color: #5BC25F; }
.settle-metric-delta.down { color: #FF3728; }
.settle-metric-delta.flat { color: #A37C5E; }

/* ---------- 底部（设计稿 (48,315) 宽 716） ---------- */
.settle-foot {
  position: absolute; left: 48px; top: 315px; width: 716px;
  display: flex; align-items: center; justify-content: space-between;
}
.settle-xp { display: flex; align-items: center; gap: 10px; }
.settle-xp-badge {
  padding: 0 5px; border-radius: 5px; background: #FFBC0D;
  color: #222; font-size: 12.5px; font-weight: 500; line-height: 1.6;
}
.settle-xp-value { color: #FFBC0D; font-size: 20px; font-weight: 900; line-height: 1; }
.settle-foot-actions { display: flex; align-items: center; gap: 10px; }
.settle-ghost-btn {
  padding: 7px 14px; border: 1.5px solid rgba(240, 181, 148, .8); border-radius: 10px;
  background: rgba(251, 233, 206, .16); color: #FBE9CE;
  font-size: 12px; font-weight: 900; cursor: pointer;
  transition: background .12s ease-out;
}
.settle-ghost-btn:hover { background: rgba(251, 233, 206, .3); }
.settle-next-btn {
  width: 160px; height: 44px; border: 1px solid rgba(248, 141, 0, .5); border-radius: 13px;
  background: linear-gradient(180deg, #FFC838, #F88D00); color: #4A2711;
  box-shadow: inset 0 -3px 0 rgba(163, 60, 5, .3);
  font-size: 14px; font-weight: 900; cursor: pointer;
  transition: filter .12s ease-out, transform .12s ease-out;
}
.settle-next-btn:hover { filter: brightness(1.06); }
.settle-next-btn:active { transform: scale(.98); }

/* ============ 事件全屏视频播放器 ============
   用于「转场（主界面 → 事件）」「剧情介绍」「开始答题」三段。
   必须是 fixed 整屏：它是 body 顶层浮层，不能放进 812x375 的决策舞台里，
   否则视频会被舞台裁成一小块。
   data-backdrop="transparent" 给转场用（webm 带透明通道，主界面还能透出来），
   "solid" 给剧情介绍 / 开始答题用（黑底，专注剧情）。 */
.event-video-player {
  position: fixed; inset: 0; z-index: var(--z-video);
  display: grid; place-items: center;
  background: #000;
  cursor: pointer;
}
.event-video-player[data-backdrop="transparent"] { background: transparent; }
.event-video-player[hidden] { display: none; }
.event-video {
  width: 100%; height: 100%;
  object-fit: contain;
}
/* 转场是一段带透明通道的「云层擦除」，作用就是盖住主界面，所以要铺满视口：
   用 contain 会上下各露一条主界面，擦除效果就漏了。左右裁掉约 4% 的云没影响。
   剧情介绍 / 开始答题保持 contain：那是正片，不能裁掉画面内容。 */
.event-video-player[data-backdrop="transparent"] .event-video { object-fit: cover; }
/* 跳过提示：淡淡地摆在右下角，不抢画面 */
.event-video-skip {
  position: absolute; right: 3.2%; bottom: 6%;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(20, 12, 6, .55); color: rgba(255, 246, 222, .82);
  font-size: clamp(10px, 1.1vw, 13px); font-weight: 700; pointer-events: none;
}
.event-video-player[data-skippable="false"] .event-video-skip { display: none; }


/* ============ 2026-09 Figma：成就 / 伙伴 / 今日任务 / 回合开始 / 巡视检查 ============ */
/* 三个入口完全使用 Figma PNG；顺序为成就、伙伴、今日任务。 */
.feature-page-overlay, .patrol-inspection-overlay, .round-start-overlay { padding: 0; background: rgba(0, 0, 0, .78); backdrop-filter: blur(3px); }
.feature-page-overlay { z-index: 150; background: rgba(0,0,0,.7); backdrop-filter: none; }
.patrol-inspection-overlay { z-index: 155; }
.round-start-overlay { z-index: 160; }
.feature-page-overlay.active, .patrol-inspection-overlay.active, .round-start-overlay.active { display: block; }
.feature-page-stage {
  position: absolute; left: 50%; top: 50%; width: 812px; height: 375px; overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--ui-scale, 1)); transform-origin: center;
  color: #4A2711; font-family: "Noto Sans SC", sans-serif;
}
.feature-close {
  position: absolute; z-index: 8; left: 48px; top: 16px; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: transparent url('../assets/game/ui/icons/btn-close-red.png') center / contain no-repeat;
  filter: drop-shadow(0 3px 2px rgba(50,19,3,.55)); cursor: pointer;
}
.feature-close:hover, .feature-close:focus-visible { transform: scale(1.05); filter: brightness(1.06) drop-shadow(0 3px 2px rgba(50,19,3,.55)); }
.feature-close:active { transform: scale(.95); }
.feature-wood-card {
  position: absolute; box-sizing: border-box; overflow: hidden; border: 2px solid transparent; border-radius: 24px;
  background: linear-gradient(#A7642A,#A7642A) padding-box, linear-gradient(180deg,#E8A163,#471302) border-box;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.feature-wood-card::before {
  content: ''; position: absolute; z-index: 0; inset: 8px; border: 1px dashed rgba(251,233,206,.35); border-radius: 17px; pointer-events: none;
}
.feature-primary-btn {
  min-height: 36px; padding: 8px 18px; border: 1.5px solid #5C3818; border-radius: 10px;
  background: linear-gradient(180deg, #FFC838, #F88D00); color: #4A2711; font-size: 12px; font-weight: 900;
  box-shadow: 0 3px 0 #7C461E; cursor: pointer;
}
.feature-primary-btn:disabled { opacity: .45; filter: grayscale(.4); cursor: not-allowed; }
.feature-primary-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #7C461E; }

/* 回合开始：严格还原 Figma「第 2 回合」画板。
   设计坐标（812×375）：外板 460×269 @ (176,65)，横幅 259×45 @ (276.5,41)，
   深棕槽 429×179 @ (191.5,89.5)，奶油内容 418×168 @ (197,95)，按钮 200×44 @ (326,276)。 */
.round-start-overlay { background: rgba(0,0,0,.7); backdrop-filter: none; }
.round-start-card {
  position: absolute; left: 50%; top: 50%; width: 460px; height: 269px; box-sizing: border-box;
  transform: translate(-50%, -50%) scale(var(--ui-scale, 1)) translateY(12px); transform-origin: center;
  border: 2px solid transparent; border-radius: 24px;
  background: linear-gradient(#A7642A,#A7642A) padding-box, linear-gradient(180deg,#E8A163,#471302) border-box;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.round-start-ribbon {
  position: absolute; z-index: 3; left: 100.5px; top: -24px; width: 259px; height: 45px;
  display: grid; place-items: center;
  background: transparent url('../assets/game/ui/icons/banner-red.png?v=2') center / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 9px rgba(124,70,27,.65));
}
.round-start-ribbon span {
  max-width: 210px; overflow: hidden; color: #fff; font-size: 18px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 0 #B80027, 0 -1px 0 #B80027, 1px 0 0 #B80027, -1px 0 0 #B80027;
}
.round-start-well {
  position: absolute; left: 13.5px; top: 22.5px; width: 429px; height: 179px; box-sizing: border-box; padding: 5.5px;
  border: 1px solid #C47B3C; border-radius: 15px; background: #76420A;
}
.round-start-inner {
  width: 100%; height: 100%; box-sizing: border-box; padding: 17px 17px 12px;
  border: 2.25px solid transparent; border-radius: 12px;
  background: linear-gradient(#FBE9CE,#FBE9CE) padding-box, linear-gradient(180deg,#FEFBF1,#F0B594) border-box;
}
.round-start-meta { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.round-start-meta span:first-child { color: #DA291C; font-size: 12px; font-weight: 500; letter-spacing: .48em; white-space: nowrap; }
.round-start-meta span:last-child { color: #A37C5E; font-size: 11px; font-weight: 700; white-space: nowrap; }
.round-start-inner h2 { margin: 17px 0 8px; color: #4A2711; font-size: 20px; font-weight: 900; line-height: 1.2; white-space: nowrap; }
.round-start-inner p { margin: 0; color: #8E6D4E; font-size: 12px; font-weight: 500; line-height: 1.5; white-space: pre-line; }
.round-contract {
  display: flex; align-items: center; gap: 7px; margin-top: 9px; padding: 5px 8px;
  border: 1px solid #E9B872; border-radius: 7px; background: rgba(255,255,255,.42);
  color: #7B4A24; font-size: 9px; line-height: 1;
}
.round-contract span { flex: 0 0 auto; color: #DA291C; font-weight: 900; }
.round-contract strong { min-width: 0; overflow: hidden; flex: 1; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.round-contract em { flex: 0 0 auto; color: #4A8C2B; font-style: normal; font-weight: 900; }
.round-start-confirm {
  position: absolute; left: 50%; top: 211px; width: 200px; height: 44px; min-height: 44px; padding: 0;
  transform: translateX(-50%);
  border: 1px solid rgba(248,141,0,.5); border-radius: 13px;
  background: linear-gradient(180deg,#FFC838,#F88D00); color: #4A2711; font-size: 14px; font-weight: 900;
  box-shadow: 0 3px 0 #7C461E;
}
.round-start-confirm:active:not(:disabled) { transform: translateX(-50%) translateY(2px); }


/* 我的成就：Figma 560×335 @ (136,20)，左 215 / 右 303。 */
.achievement-board { left: 136px; top: 20px; width: 560px; height: 335px; padding: 13px; display: grid; grid-template-columns: 215px 303px; gap: 12px; }
.achievement-profile, .achievement-badges { position: relative; z-index: 1; box-sizing: border-box; border: 2px solid transparent; border-radius: 16px; background: linear-gradient(#FBE9CE,#FBE9CE) padding-box, linear-gradient(180deg,#FFF8EC,#E8AD73) border-box; }
.achievement-profile { height: 305px; padding: 10px 14px; display: flex; flex-direction: column; gap: 7px; }
.achievement-identity { display: flex; align-items: center; gap: 13px; }
.achievement-identity img { width: 42px; height: 42px; object-fit: cover; border-radius: 9px; }
.achievement-identity div { display: grid; gap: 2px; }
.achievement-identity strong { font-size: 14px; line-height: 1.15; }
.achievement-identity span { color: #7A563A; font-size: 10px; }
/* Lv1 在设计稿里是卡片底色上的纯文字，没有色块底；经验条紧随其后。 */
.achievement-level-line { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 7px; }
.achievement-level-line > strong { display: grid; place-items: center start; border-radius: 0; background: none; color: #4A2711; font-size: 11px; }
/* 经验条：深棕轨道（竖向渐变）+ 琥珀竖向渐变填充 + 浅色进度文字，取自 Figma 成就页。 */
.achievement-exp { position: relative; height: 11px; overflow: hidden; border: 0; border-radius: 99px; background: linear-gradient(180deg,#9C5A21,#7E4616); }
.achievement-exp i { display: block; width: 36%; height: 100%; border-radius: inherit; background: linear-gradient(180deg,#FDDF80 0%,#F2AA07 25%,#F09404 100%); }
.achievement-exp span { position: absolute; inset: 0; color: #EBD9C3; text-align: center; font-size: 7px; font-weight: 900; line-height: 11px; }
.achievement-revenue { padding: 9px 12px; border: 1px solid #DCBB9B; border-radius: 12px; background: #FFF5E7; display: grid; gap: 2px; }
.achievement-revenue strong { font-size: 21px; font-weight: 500; line-height: 1; }
.achievement-revenue span { color: #9B704C; font-size: 8px; font-weight: 700; }
.achievement-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.achievement-mini-stats div { padding: 7px 10px; border: 1px solid #DCBB9B; border-radius: 10px; background: #FFF5E7; display: grid; gap: 2px; }
.achievement-mini-stats strong { font-size: 17px; font-weight: 500; line-height: 1; }
.achievement-mini-stats span { color: #9B704C; font-size: 7px; font-weight: 700; }
.achievement-profile button { width: 100%; height: 36px; flex: 0 0 36px; border-radius: 9px; font-size: 11px; font-weight: 900; cursor: pointer; }
/* 两个按钮的渐变与描边按 Figma 采样：分享是亮金渐变 + 顶部高光 + 底部深金压边，
   排行榜是米色竖向渐变 + 浅棕描边（白色文字同样来自设计稿）。 */
.achievement-share { border: 1px solid #FBAF1D; background: linear-gradient(180deg,#FFC736,#FFBC0E); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,240,.7), inset 0 -3px 0 #F88E01; }
.achievement-ranking { border: 1px solid #EBBF83; background: linear-gradient(180deg,#FDEAD0,#F7DAB0); color: #fff; }
.achievement-badges { height: 305px; padding: 10px 14px; overflow: hidden; }
.achievement-badges header { height: 27px; display: flex; align-items: center; justify-content: space-between; }
.achievement-badges h2 { margin: 0; font-size: 15px; font-weight: 500; }
.achievement-badges header span { color: #936B4A; font-size: 10px; font-weight: 800; }
.achievement-badge-grid { display: grid; grid-template-columns: repeat(2,1fr); grid-auto-rows: 128px; gap: 8px; }
.achievement-badge-card { position: relative; box-sizing: border-box; padding: 5px 7px 4px; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 rgba(213,169,119,.45); text-align: center; }
.achievement-badge-card img { display: block; width: 48px; height: 48px; margin: 6px auto 9px; object-fit: contain; }
.achievement-badge-card strong { display: block; margin-top: -1px; font-size: 11px; line-height: 1.2; }
.achievement-badge-card p { margin: 4px -2px 0; color: #936B4A; font-size: 7px; white-space: nowrap; }
.achievement-badge-card > span { display: block; margin-top: 4px; color: #46A944; font-size: 8px; font-weight: 900; }
.achievement-badge-card.locked { color: #8D7765; }
.achievement-badge-card.locked > span { color: #8D7765; }

/* 我的伙伴：Figma 560×335 @ (136,20)，主卡 + 双列伙伴卡。 */
.partner-board { left: 136px; top: 20px; width: 560px; height: 335px; }
.partner-board > h2 { position: relative; z-index: 1; height: 50px; margin: 0; display: grid; place-items: center; color: #FBE9CE; font-size: 18px; font-weight: 900; }
/* 伙伴列表比容器高（设计稿最后一行也是截断的），所以这里必须纵向可滚动。
   滚动条按游戏 UI 习惯隐藏，只保留手势/滚轮滑动。 */
.partner-list-shell { position: absolute; z-index: 1; left: 13px; right: 13px; top: 50px; bottom: 12px; box-sizing: border-box; padding: 8px 14px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; border: 2px solid transparent; border-radius: 16px; background: linear-gradient(#FBE9CE,#FBE9CE) padding-box, linear-gradient(180deg,#FFF8EC,#E8AD73) border-box; }
.partner-list-shell::-webkit-scrollbar { width: 0; height: 0; }
.partner-lead-card { position: relative; height: 82px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 14px; background: #fff; }
.partner-lead-avatar { width: 66px; height: 66px; box-sizing: border-box; flex: 0 0 auto; object-fit: cover; border-radius: 12px; background: transparent; }
.partner-lead-copy { display: grid; align-content: center; gap: 4px; }
.partner-lead-copy strong { font-size: 14px; font-weight: 500; }
.partner-lead-copy span { width: max-content; padding: 3px 8px; border-radius: 99px; background: #FFF0D8; color: #8A5B35; font-size: 9px; font-weight: 700; }
.partner-lead-copy small { color: #50B146; font-size: 9px; font-weight: 900; }
.partner-ai-tag { position: absolute; right: 16px; top: 12px; padding: 2px 7px; border-radius: 99px; background: #2497EA; color: #fff; font-size: 7px; font-weight: 900; }
.partner-lead-card button { position: absolute; right: 16px; bottom: 16px; width: 84px; height: 29px; border: 1px solid #F38A00; border-radius: 9px; background: linear-gradient(180deg,#FFD248,#FFA900); color: #222; font-size: 9px; font-weight: 900; box-shadow: inset 0 -2px 0 rgba(196,91,0,.28); cursor: pointer; }
.partner-card-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 98px; gap: 8px; margin-top: 8px; }
.partner-person-card { position: relative; min-width: 0; box-sizing: border-box; padding: 8px 16px; display: flex; align-items: center; gap: 10px; border-radius: 14px; background: #fff; }
.partner-person-card img { width: 64px; height: 64px; box-sizing: border-box; flex: 0 0 auto; object-fit: cover; border-radius: 9px; background: transparent; }
.partner-person-card > div { min-width: 0; display: grid; gap: 5px; }
.partner-person-card strong { font-size: 14px; font-weight: 500; }
.partner-person-card span { width: max-content; padding: 3px 8px; border-radius: 99px; background: #FFF0D8; color: #8A5B35; font-size: 9px; font-weight: 700; }
.partner-person-card small { display: flex; align-items: center; gap: 4px; color: #8A5B35; font-size: 8px; white-space: nowrap; }
.partner-person-card small i { width: 72px; height: 7px; overflow: hidden; border-radius: 99px; background: #ECE8E0; }
.partner-person-card small b { display: block; height: 100%; background: #50B85A; }
.partner-person-card em { position: absolute; right: 14px; top: 14px; min-width: 18px; height: 18px; box-sizing: border-box; display: grid; place-items: center; border-radius: 99px; color: #fff; font-size: 8px; font-style: normal; font-weight: 900; }
.partner-person-card em.red { background: #EB2E22; }.partner-person-card em.gold { background: #F4AD00; }

/* 今日任务：Figma 548×335 @ (132,20)，左挑战 210 / 右任务 296。 */
.daily-board { left: 132px; top: 20px; width: 548px; height: 335px; }
.daily-board > h2 { position: relative; z-index: 1; height: 50px; margin: 0; display: grid; place-items: center; color: #FBE9CE; font-size: 18px; font-weight: 900; }
.daily-columns { position: relative; z-index: 1; display: grid; grid-template-columns: 210px 296px; gap: 12px; margin: 0 13px 13px; }
.daily-challenge-card, .daily-task-list { height: 273px; box-sizing: border-box; border: 2px solid transparent; border-radius: 16px; background: linear-gradient(#FBE9CE,#FBE9CE) padding-box, linear-gradient(180deg,#FFF8EC,#E8AD73) border-box; }
.daily-challenge-card { padding: 14px; }
.daily-challenge-meta { position: relative; height: 14px; white-space: nowrap; }
.daily-challenge-meta strong { position: absolute; left: 0; top: 0; color: #DA291C; font-size: 11px; font-weight: 500; letter-spacing: .12em; }
.daily-challenge-meta span { position: absolute; left: 88px; top: 1px; color: #A37C5E; font-size: 7px; font-weight: 800; }
.daily-challenge-card h3 { margin: 17px 0 12px; color: #4A2711; font-size: 20px; font-weight: 500; line-height: 1.4; }
.daily-challenge-card p { margin: 0; color: #8E6D4E; font-size: 11px; line-height: 1.62; }
/* 任务行数已数据化（gameState.tasks，当前 6 条），行数会随数据增删，所以用 grid-auto-rows
   代替写死的 grid-template-rows: repeat(4,52px)——写死 4 行时第 5、6 行会被挤压或溢出。
   为什么必须滚动而不是压缩行高：.daily-task-list 是 812×375 定尺舞台内的定高卡片
   （box-sizing: border-box，height 273px − 2×2px border − 2×13px padding ⇒ 可用内容高 243px），
   6 行 × 52px + 5 × 8px gap = 352px，超出 109px；而 .feature-wood-card 是 overflow: hidden，
   不滚动就直接被裁掉看不见（可用高度只放得下 4 行 + 一点点）。
   行高 52px 是 Figma 稿尺寸且勾选框/文案排版都按它定的，压行高会破稿，故改为纵向滚动。
   align-content: start 保证任务少于可用高度时行仍从顶部排布，不被拉开。 */
.daily-task-list { padding: 13px; display: grid; grid-auto-rows: 52px; align-content: start; gap: 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.daily-task-row { width: 100%; height: 52px; box-sizing: border-box; padding: 0 14px 0 18px; border: 0; border-radius: 12px; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 10px; background: #fff; color: #4A2711; text-align: left; cursor: pointer; }
.daily-task-row:disabled { opacity: 1; cursor: default; }
.daily-task-row i { width: 20px; height: 20px; box-sizing: border-box; border: 2px solid #E8CDA8; border-radius: 4px; background: #fff; }
.daily-task-row.done i { position: relative; border-color: #58A923; background: linear-gradient(180deg,#73C439,#4D9D1F); box-shadow: 0 1px 2px rgba(43,96,17,.25); }
.daily-task-row.done i::after { content: '✓'; position: absolute; inset: -2px 0 0; display: grid; place-items: center; color: #fff; font-size: 15px; font-style: normal; font-weight: 900; }
.daily-task-row strong { font-size: 13px; font-weight: 500; }
.daily-task-row time { color: #8E6D4E; font-size: 14px; }

/* 巡视检查：左侧静态切图是视频层的临时替代，右侧流程独立，后续替换媒体不动业务状态机。 */
.patrol-inspection-stage { position: absolute; left: 50%; top: 50%; width: 760px; height: 330px; overflow: hidden; transform: translate(-50%,-50%) scale(var(--ui-scale,1)); transform-origin: center; border: 2px solid #5C3818; border-radius: 20px; background: #FBE9CE; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.patrol-close { position: absolute; left: 10px; top: 10px; z-index: 6; }
.patrol-static-scene { position: absolute; inset: 0 330px 0 0; overflow: hidden; background: #3B2415; }
.patrol-static-scene img { width: 100%; height: 100%; object-fit: cover; object-position: 37% 58%; filter: saturate(.92) contrast(1.05); }
.patrol-scene-shade { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 45%, rgba(45,24,12,.3)), linear-gradient(0deg, rgba(20,10,4,.78), transparent 48%); }
.patrol-npc-bubble { position: absolute; left: 58px; right: 18px; bottom: 18px; padding: 12px 14px; border: 2px solid #EDB67C; border-radius: 15px; background: rgba(251,233,206,.96); color: #5C3818; }
.patrol-npc-bubble strong { font-size: 11px; }
.patrol-npc-bubble p { margin: 4px 0 0; font-size: 10px; line-height: 1.45; }
.patrol-inspection-panel { position: absolute; right: 0; top: 0; width: 330px; height: 100%; box-sizing: border-box; padding: 24px 24px 20px; border-left: 3px solid #5C3818; background: #FFF2E2; }
.patrol-kicker { color: #DA291C; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.patrol-inspection-panel h2 { margin: 2px 0 10px; font-size: 22px; }
.patrol-intro p { margin: 0 0 8px; color: #7A563A; font-size: 10px; line-height: 1.5; }
.patrol-intro ul { margin: 0 0 14px; padding-left: 18px; color: #5C3818; font-size: 10px; line-height: 1.8; }
.patrol-intro .feature-primary-btn { width: 100%; }
.patrol-progress { height: 8px; margin-bottom: 10px; overflow: hidden; border: 1.5px solid #5C3818; border-radius: 6px; background: #E5E7EB; }
.patrol-progress i { display: block; width: 0; height: 100%; background: #FFBC0D; transition: width .25s; }
.patrol-check-list { display: grid; gap: 7px; margin-bottom: 10px; }
.patrol-check-item { width: 100%; min-height: 43px; padding: 7px 10px; box-sizing: border-box; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 8px; border: 1.5px solid #B9783C; border-radius: 9px; background: #fff; color: #5C3818; text-align: left; cursor: pointer; }
.patrol-check-item i { width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid #5C3818; border-radius: 50%; background: #F1E2CC; font-style: normal; }
.patrol-check-item strong { display: block; font-size: 10px; }.patrol-check-item small { color: #8E6D4E; font-size: 8px; }
.patrol-check-item.checked { border-color: #5A9848; background: #EFF8EA; }.patrol-check-item.checked i { background: #68BE45; color: #fff; }
.patrol-checking .feature-primary-btn { width: 100%; }
.patrol-complete { padding-top: 35px; text-align: center; }.patrol-complete > strong { display: block; color: #4D9A3A; font-size: 25px; }.patrol-complete p { margin: 12px 0 20px; color: #7A563A; font-size: 11px; }

/* ============ 独立小游戏中心 / 新品海报拼图 ============ */
.minigame-hub-overlay { z-index: 170; }
.poster-puzzle-overlay { z-index: 180; }
.poster-result-overlay { z-index: 190; }
.poster-puzzle-overlay,
.poster-result-overlay {
  /* Escape the scaled game container: cover the browser viewport, not only the 812×375 UI stage. */
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  /* Figma 817:7344: the restaurant scene has one uniform #000 70% viewport overlay. */
  background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url('../assets/game/ui/registration/registration-video-complete-bg.png') center / cover no-repeat;
  backdrop-filter: none;
}
/* The launch video is a separate full-screen layer; never let it overlap a running puzzle. */
body:has(#posterPuzzleModal.active) #startScreen,
body:has(#posterPuzzleResultModal.active) #startScreen {
  display: none !important;
}
.minigame-hub-card {
  position: absolute; left: 50%; top: 50%; width: 430px; height: 286px; box-sizing: border-box;
  transform: translate(-50%,-50%); border: 2px solid #E9A45E; border-radius: 24px;
  background: #A9652B; box-shadow: 0 15px 38px rgba(0,0,0,.5);
}
.minigame-hub-card::before {
  content: ''; position: absolute; inset: 10px; border: 1px dashed rgba(255,239,211,.32); border-radius: 16px; pointer-events: none;
}
.minigame-ribbon, .poster-result-ribbon {
  position: absolute; z-index: 3; left: 50%; top: -25px; width: 260px; height: 48px;
  transform: translateX(-50%); display: grid; place-items: center;
  background: transparent url('../assets/game/ui/icons/banner-red.png?v=2') center / 100% 100% no-repeat;
  filter: drop-shadow(0 5px 6px rgba(92,31,7,.45));
}
.minigame-ribbon h2, .poster-result-ribbon h2 {
  margin: -3px 0 0; color: #fff; font-size: 18px; font-weight: 900; text-shadow: 0 2px 0 #A8071D;
}
.minigame-hub-intro {
  position: absolute; z-index: 1; left: 28px; right: 28px; top: 31px; margin: 0;
  color: #FFF0D3; font-size: 10px; font-weight: 800; text-align: center;
}
.minigame-entry-card {
  position: absolute; z-index: 1; left: 50%; top: 58px; width: 190px; height: 210px; box-sizing: border-box;
  transform: translateX(-50%); padding: 10px; border: 2px solid #FFF2D5; border-radius: 16px;
  background: #FBE9CE; box-shadow: 0 4px 0 #774117;
}
.minigame-entry-card > img {
  display: block; width: 100%; height: 92px; border: 2px solid #6F3A16; border-radius: 10px;
  object-fit: cover; object-position: center; background: #3E2414;
}
.minigame-entry-copy { padding-top: 8px; text-align: center; }
.minigame-entry-copy h3 { margin: 0; color: #4A2711; font-size: 16px; font-weight: 900; }
.minigame-entry-copy p { margin: 4px 0 0; color: #8E6D4E; font-size: 9px; }
.minigame-start-btn, .poster-puzzle-action, .poster-result-action {
  border: 2px solid #F39A00; border-radius: 11px; background: #FFC128; color: #4A2711;
  font-weight: 900; box-shadow: inset 0 -3px 0 rgba(224,122,0,.35); cursor: pointer;
}
.minigame-start-btn {
  position: absolute; left: 12px; right: 12px; bottom: 11px; height: 38px; font-size: 14px;
}
.minigame-start-btn:hover, .minigame-start-btn:focus-visible, .poster-puzzle-action:hover, .poster-puzzle-action:focus-visible, .poster-result-action:hover, .poster-result-action:focus-visible { filter: brightness(1.06); transform: translateY(-1px); }
.minigame-start-btn:focus-visible, .poster-puzzle-action:focus-visible, .poster-result-action:focus-visible, .poster-puzzle-tile:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.minigame-hub-close { left: auto; right: 174px; top: 47px; width: 30px; height: 30px; }

.poster-puzzle-stage {
  /* The full-viewport overlay owns the only dimmer; keep the 812×375 stage UI-only. */
  background: transparent;
}
.poster-puzzle-close { left: 20px; top: 14px; width: 45px; height: 45px; }
.poster-puzzle-title {
  position: absolute; z-index: 2; left: 82px; top: 17px; margin: 0; color: #FFF2D5;
  font-size: 18px; font-weight: 900; line-height: 28px; text-shadow: 0 2px 3px #2C1308;
}
.poster-puzzle-timer {
  /* Figma 840:12368：168×44 的透明外框；棕色铭牌从左 14px 开始，
     左侧秒表跨出铭牌边界，五个数字槽保留供运行时逐位写入。 */
  position: absolute; z-index: 3; right: 40px; top: 60px;
  width: 168px; height: 44px; box-sizing: border-box;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px 8px 44px;
  color: #FBE9CE;
}
.poster-puzzle-timer::before {
  content: ''; position: absolute; z-index: -1; left: 14px; top: 4px; right: 0; height: 36px;
  border: 2px solid #F0B594; border-radius: 22px;
  background: #703C1D;
  box-shadow: 0 0 .4px rgba(40, 17, 7, .8);
}
.poster-puzzle-timer > .poster-timeless-icon {
  /* timeless.png 的非透明像素边界为 16..88 × 23..88（107×107 画布）；
     以下偏移让可见筹码完整悬在计时卡上方，而不是被透明留白压进卡片。 */
  position: absolute; left: 30px; top: -73px; z-index: 1;
  width: 60px; height: 60px; object-fit: contain; pointer-events: none;
}
.poster-puzzle-timer > .poster-timer-stopwatch {
  position: absolute; z-index: 1; left: 0; top: 0;
  width: 44px; height: 44px; filter: drop-shadow(0 1px 1px rgba(40, 17, 7, .45));
  pointer-events: none;
}
.poster-puzzle-timer > span {
  position: relative; z-index: 1; flex: 0 0 auto;
  color: #FBE9CE; font-size: 11px; font-weight: 900; line-height: 14px; white-space: nowrap;
}
.poster-puzzle-timer > strong {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 2px;
  margin-left: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: inherit; font: inherit;
}
.poster-puzzle-timer > strong > .digit-slot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 18px; padding: 2px; box-sizing: content-box;
  border: 0; border-radius: 2px; background: #FFFFFF; color: #6B3609;
  font-size: 14px; font-weight: 900; line-height: 14px; font-variant-numeric: tabular-nums;
  box-shadow: none;
}
.poster-puzzle-timer > strong > .digit-slot.colon {
  width: 5px; height: auto; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: #FFFFFF; font-size: 12px; line-height: 14px; box-shadow: none;
}
.poster-puzzle-board-shell {
  position: absolute; z-index: 2; left: 140px; top: 62px; width: 312px; height: 312px; box-sizing: border-box;
  padding: 0; border: 0; background: transparent;
}
.poster-puzzle-board {
  width: 288px; height: 288px; box-sizing: content-box; padding: 7px;
  display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); gap: 3px;
  border: 5px solid #D18A35; border-radius: 18px; background: #F4C56F;
  box-shadow: inset 0 0 0 3px #FFE7A8, 0 8px 16px rgba(0,0,0,.45);
}
.poster-puzzle-tile {
  min-width: 0; min-height: 0; padding: 0; overflow: hidden; border: 1px solid #6D3514; border-radius: 9px;
  background: #7B431D; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,229,167,.35);
}
.poster-puzzle-tile img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.poster-puzzle-tile:hover { filter: brightness(1.08); }
.poster-puzzle-tile.is-empty {
  display: grid; place-items: center; border-style: dashed; background: #875128; color: #F8D89B; font-size: 9px; font-weight: 900;
}
.poster-puzzle-preview {
  position: absolute; z-index: 6; left: 12px; top: 12px; width: 288px; height: 288px; overflow: hidden;
  border: 3px solid #FFE59B; border-radius: 10px; background: #2E1C12; box-shadow: 0 6px 18px rgba(0,0,0,.55);
}
.poster-puzzle-preview[hidden] { display: none; }
.poster-puzzle-preview img { width: 100%; height: 100%; object-fit: cover; }
.poster-puzzle-preview span {
  position: absolute; right: 8px; bottom: 8px; padding: 4px 8px; border-radius: 8px;
  background: rgba(55,28,13,.85); color: #fff; font-size: 9px; font-weight: 900;
}
.poster-puzzle-info {
  position: absolute; z-index: 2; right: 25px; top: 66px; width: 210px; height: 294px; box-sizing: border-box;
  padding: 14px 15px 11px; border: 3px solid #EABF91; border-radius: 18px; background: #FFF0D8;
  box-shadow: 0 8px 18px rgba(0,0,0,.35); text-align: center;
}
.poster-puzzle-info h3 { margin: 0 0 8px; color: #8A654C; font-size: 12px; }
.poster-puzzle-target { width: 106px; height: 106px; border-radius: 10px; object-fit: cover; box-shadow: 0 2px 6px rgba(71,37,15,.28); }
.poster-puzzle-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.poster-puzzle-stats > div {
  min-width: 0; height: 46px; box-sizing: border-box; padding: 6px 8px; border: 1px solid #E8CFAB; border-radius: 10px;
  background: #FFF9ED; text-align: left;
}
.poster-puzzle-stats span, .poster-puzzle-stats strong { display: block; }
.poster-puzzle-stats span { color: #987154; font-size: 9px; font-weight: 800; }
.poster-puzzle-stats strong { margin-top: 1px; color: #51301C; font-size: 18px; font-variant-numeric: tabular-nums; }
.poster-puzzle-action { width: 100%; height: 34px; font-size: 12px; }
.poster-puzzle-action.secondary { margin-top: 6px; border-color: #DEB57B; background: #FFE8C2; box-shadow: inset 0 -3px 0 rgba(195,139,72,.25); }
.poster-puzzle-action:disabled { opacity: .55; cursor: wait; transform: none; }
.poster-puzzle-help { margin: 7px -4px 0; color: #967358; font-size: 8px; line-height: 1.25; }
.poster-puzzle-help[data-tone="active"] { color: #B25C16; }
.poster-puzzle-help[data-tone="error"] { color: #C63C25; font-weight: 900; }
.poster-puzzle-help[data-tone="success"] { color: #4D922F; font-weight: 900; }

.poster-result-card {
  position: absolute; left: 50%; top: 50%; width: 500px; height: 270px; box-sizing: border-box;
  transform: translate(-50%,-50%); border: 2px solid #EABF91; border-radius: 22px;
  background: #FFF0D8; box-shadow: 0 16px 42px rgba(0,0,0,.6);
}
.poster-result-ribbon { top: -24px; width: 260px; height: 48px; }
.poster-result-ribbon h2 { font-size: 17px; }
.poster-result-art { position: absolute; left: 22px; top: 45px; width: 165px; height: 165px; }
.poster-result-art > img:first-child { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; box-shadow: 0 3px 8px rgba(69,35,15,.32); }
.poster-result-art .poster-result-stamp {
  position: absolute; right: -8px; bottom: -5px; width: 90px; height: 32px; object-fit: contain;
  transform: rotate(-10deg); filter: drop-shadow(0 1px 0 rgba(255,246,222,.9));
}
.poster-result-content { position: absolute; left: 210px; right: 22px; top: 44px; }
.poster-result-content > p { height: 29px; margin: 0 0 8px; color: #8E6D4E; font-size: 9px; line-height: 1.45; }
.poster-result-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 9px; }
.poster-result-stats > div { height: 55px; box-sizing: border-box; padding: 8px; border: 1px solid #E7CEAA; border-radius: 10px; background: #FFF9ED; }
.poster-result-stats span, .poster-result-stats strong { display: block; }
.poster-result-stats span { color: #987154; font-size: 9px; }
.poster-result-stats strong { margin-top: 2px; color: #DA291C; font-size: 18px; font-variant-numeric: tabular-nums; }
.poster-result-action { width: 100%; height: 38px; font-size: 13px; }
.poster-result-action.secondary { margin-top: 7px; border-color: #DEB57B; background: #FFE8C2; box-shadow: inset 0 -3px 0 rgba(195,139,72,.25); }

/* ============ 2026-09 首页改版：左轨移除 / 摇杆 / 右侧竖排导航 ============
   布局坐标全部由 .ui-stage 上的 CSS 变量令牌驱动（--env-hud-* / --joystick-* / --nav-*），
   对照 Figma 微调只动变量不动规则。
   本区块追加在文件末尾，同特异性后写优先，覆盖旧版 .bottom-nav 定位。 */

/* ---------- 左侧按钮轨（正餐 / 舒适）已随 2026-09 首页改版移除：
   HTML 中 .left-rail 已删除，对应 Figma 首页左侧只有环境 HUD（见 .environmental-hud）。 */

/* ---------- 摇杆区（左下） ---------- */
.ui-stage .joystick-zone {
  position: absolute; z-index: 55;
  left: var(--joystick-left); bottom: var(--joystick-bottom);
  width: var(--joystick-base-size); height: var(--joystick-base-size);
  touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: pointer;
}
.ui-stage .joystick-base {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .32);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .2), rgba(0, 0, 0, .16) 55%),
    rgba(0, 0, 0, .45);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .3);
  transition: border-color .15s;
}
.ui-stage .joystick-zone.active .joystick-base { border-color: rgba(255, 213, 106, .65); }
.ui-stage .joystick-knob {
  position: absolute; left: 50%; top: 50%;
  width: var(--joystick-knob-size); height: var(--joystick-knob-size);
  border-radius: 50%;
  border: 2px solid rgba(255, 244, 214, .85);
  background: radial-gradient(circle at 32% 28%, #ffd98a, #e09a2d 60%, #b46e12);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45), inset 0 -3px 6px rgba(120, 60, 0, .35);
  /* knob 用 transform translate 定位：基准居中 (-50%,-50%)，偏移由 js/player.js 写入
     --knob-x / --knob-y（px）。不加 transition：摇杆要即时跟手。 */
  transform: translate(calc(-50% + var(--knob-x, 0px)), calc(-50% + var(--knob-y, 0px)));
  pointer-events: none;
}

/* ---------- 底部导航改右侧竖排（限时活动/成就/伙伴/班次任务） ----------
   新位置 right:16 / top:66；2026-09 图标改版：图标替换为 Figma 高清素材，
   .nav-btn 去掉深色底与投影，直接展示完整图标（PNG 内烘焙底框+图形+标签文字）。 */
.ui-stage .bottom-nav {
  position: absolute; z-index: 55;
  right: var(--nav-right); top: var(--nav-top); left: auto; bottom: auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--nav-gap);
  margin: 0; padding: 0; background: none; border: 0;
}
.ui-stage .nav-btn {
  width: var(--nav-btn-size); height: var(--nav-btn-size);
  padding: 0; border: 0; border-radius: 0;
  position: relative; box-sizing: border-box;
  display: grid; place-items: center;
  background: transparent; backdrop-filter: none; box-shadow: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .15s, filter .15s;
}
.ui-stage .nav-btn .nav-icon {
  position: static; left: auto; top: auto;
  width: var(--nav-btn-size); height: var(--nav-btn-size);
  border: 0; border-radius: 0; background: none;
  object-fit: contain; pointer-events: none;
}
/* 标签文字已烘焙在图标 PNG 内，DOM 文本只保留给屏幕阅读器 */
.ui-stage .nav-btn .nav-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ui-stage .nav-btn:hover, .ui-stage .nav-btn:focus-visible { transform: translateX(-2px); filter: brightness(1.1); }
.ui-stage .nav-btn:focus-visible { outline: 2px solid rgba(255, 215, 83, .9); outline-offset: 3px; }
.ui-stage .nav-btn:active { transform: scale(.95); }

/* 底部居中红色倒计时横幅（.ui-stage .shift-meter）已随 2026-09 首页改版移除：
   班次进度由时钟推进自动结算，首页不再显示横幅与暂停按钮。 */


/* ============ 外层城市地图 / 角色创建（Figma 812×375） ============ */
.city-map-screen, .registration-screen {
  z-index: var(--z-start); padding: 0; background: #17100a;
}
.city-map-stage, .registration-stage {
  position: relative; overflow: hidden;
  font-family: "PingFang SC", "Noto Sans SC", sans-serif;
}
/* 注册页继续使用固定设计稿舞台；城市地图采用与餐厅首页一致的视口等效舞台。 */
.registration-stage {
  width: 812px; height: 375px;
  transform: scale(var(--ui-scale, 1)); transform-origin: center;
}
.city-map-stage {
  position: absolute; left: 50%; top: 50%;
  width: var(--ui-stage-w, 812px); height: var(--ui-stage-h, 375px);
  transform: translate(-50%, -50%) scale(var(--ui-scale, 1));
  transform-origin: center;
}
.city-map-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; pointer-events: none; }
.city-map-hud {
  position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 60px; padding: 10px 48px 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  background: linear-gradient(180deg, rgba(0,0,0,.42), transparent);
}
.city-map-player-card { display: flex; align-items: center; width: 154px; height: 48px; color: #5c3818; }
.city-map-avatar-frame {
  width: 48px; height: 48px; box-sizing: border-box; padding: 3px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.8); border-radius: 9px;
  background: linear-gradient(#f3d2a4,#e6b779); box-shadow: 0 1px 3px #b78e59;
}
.city-map-avatar-frame img { width: 100%; height: 100%; display: block; border-radius: 6px; background: linear-gradient(#f3be1e,#ffbc0d); object-fit: cover; }
.city-map-player-copy { position: relative; display: block; width: 106px; height: 48px; margin-left: 5px; padding: 7px 0 0 6px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.35); border-radius: 9px; background: linear-gradient(#fbe6c5,#bd8043); }
.city-map-player-copy strong { display: inline-block; font-size: 12px; font-weight: 900; text-shadow: 0 .5px rgba(255,255,255,.4); }
.city-map-player-copy em { margin-left: 6px; color: #da291c; font-size: 8px; font-style: normal; font-weight: 900; }
.city-map-player-copy i { position: absolute; left: 7px; bottom: 7px; width: 72px; height: 8px; overflow: hidden; border: .5px solid #905622; border-radius: 9px; background: #754114; }
.city-map-player-copy b { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(#f3b108,#ef8d03); }
.city-map-player-copy small { position: absolute; inset: -1px 0 0; color: #fff; font-size: 7px; font-style: normal; font-weight: 900; line-height: 8px; text-align: center; }
.city-map-location { margin-top: 0; padding: 9px 16px 6px; border-radius: 8px; background: rgba(0,0,0,.6); box-shadow: 0 2px 16px rgba(0,0,0,.35); color: #fff; font-size: 15px; font-weight: 600; backdrop-filter: blur(10px); }
.city-store-marker { position: absolute; z-index: 3; left: 330px; top: 140px; width: 165px; height: 96px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.city-store-marker:focus-visible { outline: 3px solid #fff; outline-offset: 6px; border-radius: 18px; }
.city-store-label { position: absolute; top: 20px; left: 48px; min-width: 117px; padding: 11px 18px 7px 40px; box-sizing: border-box; border: 2px solid #f0b594; border-radius: 16px; background: #703c1d; color: #fff; text-align: center; box-shadow: 0 3px 7px rgba(40,15,2,.35); }
.city-store-label strong { display: block; font-size: 15px; font-weight: 600; line-height: 18px; }
.city-store-label em { display: block; color: #4ebe77; font-size: 12px; font-style: normal; font-weight: 600; line-height: 18px; }
.city-store-pin { position: absolute; left: 2px; top: 2px; width: 72px; height: 80px; display: grid; place-items: center; transform: rotate(-4deg); border-radius: 50% 50% 50% 5%; background: #db0007; clip-path: polygon(50% 0, 90% 14%, 100% 53%, 50% 100%, 0 53%, 10% 14%); filter: drop-shadow(0 3px 2px rgba(67,15,0,.35)); }
.city-store-pin::before { content: ""; position: absolute; width: 39px; height: 35px; border-radius: 50%; background: #ffbc0d; }
.city-store-pin b { position: relative; z-index: 1; color: #db0007; font-family: Arial, sans-serif; font-size: 26px; font-weight: 1000; line-height: 1; }
.city-map-actions { position: absolute; z-index: 3; top: 86px; right: 27px; display: grid; gap: 8px; }
.city-map-actions button { position: relative; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#fff5dc 0 10%,#f3d6bc 11% 45%,#b97a4a 46% 100%); color: #4a2711; cursor: pointer; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.city-map-actions button:hover { transform: scale(1.06); }
.city-map-actions span { display: block; font-size: 24px; line-height: 31px; }
.city-map-actions small { display: inline-block; padding: 1px 7px; border: 1px solid #efd0b7; border-radius: 9px; background: rgba(252,240,231,.85); color: #7d4e2d; font-size: 9px; font-weight: 900; line-height: 13px; }
.city-map-toast { position: absolute; z-index: 2; left: 48px; bottom: 51px; padding: 9px 16px 6px; border-radius: 16px; background: rgba(0,0,0,.6); color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 2px 16px rgba(0,0,0,.35); backdrop-filter: blur(10px); }
.city-map-toast span { display: inline-block; width: 22px; height: 22px; margin-right: 4px; border-radius: 50%; background: #ffc838; color: #a7642a; text-align: center; line-height: 22px; }

.registration-stage { background: #24150c; }
.registration-backdrop { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)), url('../assets/game/video/launch-poster.jpg') center / cover no-repeat; }
.registration-steps { position: absolute; z-index: 2; top: 28px; left: 245.5px; display: flex; align-items: center; gap: 16px; color: #a78c74; font-size: 12px; font-weight: 600; }
.registration-steps span { padding: 6px 16px; border: 1px solid #fbe9ce; border-radius: 100px; background: #fbe9ce; white-space: nowrap; }
.registration-steps span.active { border-color: #ffbc0d; background: #ffbc0d; color: #4a2711; }
.registration-steps i { width: 24px; border-top: 2px solid rgba(251,233,206,.8); }
.registration-card { position: absolute; z-index: 2; left: 100px; top: 75px; display: flex; gap: 10px; width: 612px; height: 223px; box-sizing: border-box; padding: 12px; border: 2px solid transparent; border-radius: 24px; background: linear-gradient(#a7642a,#a7642a) padding-box, linear-gradient(#e8a163,#471302) border-box; }
.registration-card-dashes { position: absolute; inset: 7px; border: 1px dashed #c27a3b; border-radius: 17px; pointer-events: none; }
.registration-preview-panel, .registration-form-panel { position: relative; z-index: 1; box-sizing: border-box; border: 2px solid transparent; border-radius: 16px; background: linear-gradient(#fbe9ce,#fbe9ce) padding-box, linear-gradient(#fefbf1,#f0b594) border-box; }
.registration-preview-panel { width: 250px; padding: 23px 16px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.registration-hero-frame { width: 96px; height: 96px; box-sizing: border-box; padding: 4px; border: 1px solid rgba(255,255,255,.8); border-radius: 18px; background: linear-gradient(#f3d2a4,#e6b779); box-shadow: 0 1px 3px #b78e59; }
.registration-hero-frame img { display: block; width: 100%; height: 100%; border-radius: 12px; background: linear-gradient(#f3be1e,#ffbc0d); object-fit: contain; object-position: center top; }
.registration-gender { display: flex; align-self: stretch; justify-content: center; gap: 8px; }
.registration-gender button { min-width: 81px; padding: 6px 16px; border: 0; border-radius: 100px; background: rgba(166,101,49,.2); color: #a78c74; font-size: 13px; font-weight: 900; cursor: pointer; }
.registration-gender button.selected { background: #ffbc0d; color: #4a2711; }
.registration-form-panel { flex: 1; padding: 14px 16px; }
.registration-form-panel h1, .registration-name-field { display: block; margin: 0; color: #8e6d4e; font-size: 14px; font-weight: 900; }
.registration-avatar-options { display: flex; align-items: center; gap: 8px; margin: 10px 0 10px; }
.registration-avatar-options > button:not(.registration-camera) { width: 48px; height: 48px; padding: 2px; overflow: hidden; border: .5px solid rgba(255,255,255,.8); border-radius: 9px; background: linear-gradient(#f3d2a4,#e6b779); cursor: pointer; }
.registration-avatar-options > button.selected { box-shadow: 0 0 0 2px #a7642a; }
.registration-avatar-options img { width: 100%; height: 100%; display: block; border-radius: 6px; background: linear-gradient(#f3be1e,#ffbc0d); object-fit: contain; object-position: center top; }
.registration-camera { width: 48px; height: 48px; padding: 3px 0; border: 1px dashed #a7642a; border-radius: 8px; background: transparent; color: #8e6d4e; cursor: pointer; }
.registration-camera span { display: block; font-size: 18px; line-height: 19px; }
.registration-camera small { display: block; font-size: 8px; font-weight: 900; }
.registration-name-field > span { display: flex; height: 40px; margin-top: 8px; overflow: hidden; border-radius: 12px; background: #fff; }
.registration-name-field input { min-width: 0; flex: 1; padding: 0 12px; border: 0; outline: none; background: transparent; color: #4a2711; font: 500 14px Inter, sans-serif; }
.registration-name-field input::placeholder { color: #a78c74; }
.registration-name-field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #da291c; }
.registration-name-field button { width: 42px; border: 0; background: #ffc838; color: #4a2711; font-size: 21px; font-weight: 900; cursor: pointer; }
.registration-next { position: absolute; z-index: 2; left: 326px; top: 310px; width: 160px; height: 40px; padding: 0; border: 1px solid rgba(248,141,0,.5); border-radius: 12px; background: linear-gradient(#ffc838,#f88d00); box-shadow: 0 3px 0 #7c461e; color: #4a2711; font: 900 14px "Noto Sans SC",sans-serif; cursor: pointer; text-shadow: 0 1px #fff8; }
.registration-next:hover { filter: brightness(1.04); }
.registration-next:active { transform: translateY(2px); box-shadow: 0 1px 0 #7c461e; }


/* 2026-09 外层地图精修：直接采用 Figma 导出的 M 定位 SVG、伙伴原始头像素材和既有导航 PNG。 */
.city-map-screen.is-modal-active { z-index: calc(var(--z-modal) - 1); }
.city-map-hud { display: block; }
.city-map-location { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); }
.city-map-avatar-frame { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.city-map-avatar-frame img { border-radius: 0; background: none; object-fit: contain; }
.city-store-pin { left: 0; top: 0; width: 96px; height: 96px; display: block; transform: none; border-radius: 0; background: none; clip-path: none; filter: none; }
.city-store-pin::before { display: none; }
.city-map-actions { top: 10px; right: 48px; display: flex; align-items: flex-start; gap: 8px; }
.city-map-actions button { width: 54px; height: 54px; padding: 0; border: 0; border-radius: 0; background: none; filter: none; }
.city-map-actions button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.city-map-actions button > img { display: block; width: 54px; height: 54px; object-fit: contain; pointer-events: none; }
.city-map-settings-decoration { display: block; width: 54px; height: 54px; object-fit: contain; pointer-events: none; user-select: none; }
.city-map-actions .nav-new-badge { position: absolute; top: -3px; right: -5px; min-width: 22px; padding: 1px 3px; border: 1px solid #fff; border-radius: 8px; background: #da291c; color: #fff; font-family: Arial, sans-serif; font-size: 7px; font-weight: 900; line-height: 1; }
.city-map-toast { display: flex; align-items: center; gap: 4px; padding: 9px 16px 6px; border-radius: 16px; background: rgba(0,0,0,.6); backdrop-filter: blur(20px); box-shadow: none; }
.city-map-toast img { width: 28px; height: 28px; display: block; flex: 0 0 auto; object-fit: contain; }
.city-map-toast span { display: none; }
.registration-hero-frame { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.registration-hero-frame img { border-radius: 0; background: none; object-fit: contain; object-position: center; }
.registration-avatar-options { flex-wrap: wrap; gap: 4px 8px; }
.registration-avatar-options > button:not(.registration-camera) { padding: 0; border: 0; border-radius: 0; background: none; }
.registration-avatar-options > button.selected { box-shadow: 0 0 0 2px #a7642a; border-radius: 7px; }
.registration-avatar-options img { border-radius: 0; background: none; object-fit: contain; object-position: center; }

/* 注册形象列表固定为单行：项目超出可视宽度时横向滑动，不压缩头像也不折行。 */
.registration-avatar-options { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.registration-avatar-options::-webkit-scrollbar { display: none; }
.registration-avatar-options > button:not(.registration-camera), .registration-avatar-options .registration-camera { flex: 0 0 48px; }

/* 覆盖旧的 wrap 规则：头像和麦相机必须是同一条可横向滚动的轨道。 */
.registration-avatar-options { display: flex !important; flex-wrap: nowrap !important; align-items: center; white-space: nowrap; touch-action: pan-x; }
.registration-avatar-options > button { flex-shrink: 0 !important; }

/* 降级为不换行的内联滚动轨道，保证麦相机与全部头像绝不会另起一行。 */
.registration-avatar-options { display: block !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; }
.registration-avatar-options > button { display: inline-flex !important; align-items: center; justify-content: center; vertical-align: top; margin-right: 8px; }
.registration-avatar-options > button:last-child { margin-right: 0; }

/* 轨道本身按内容宽度展开，外层仅提供滚动窗口。 */
.registration-avatar-options { display: block !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: normal !important; }
.registration-avatar-track { display: flex; flex-wrap: nowrap; width: max-content; gap: 8px; }
.registration-avatar-track > button { width: 48px; height: 48px; box-sizing: border-box; flex: 0 0 48px; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: none; cursor: pointer; }
.registration-avatar-track > button.selected { box-shadow: 0 0 0 2px #a7642a; border-radius: 7px; }
.registration-avatar-track > button img { width: 100%; height: 100%; display: block; object-fit: contain; }
.registration-avatar-track > .registration-camera { display: flex; flex-direction: column; gap: 2px; overflow: visible; border: 1px dashed #a7642a; border-radius: 8px; color: #8e6d4e; }

/* 注册背景与头像项直接使用 Figma 组件切图；边框、色块和相机图形不再由 CSS 二次模拟。 */
.registration-backdrop { background: url('../assets/game/ui/registration/registration-video-complete-bg.png') center / cover no-repeat; }
.registration-avatar-track > button.selected { box-shadow: none; border-radius: 0; }
.registration-avatar-track > .registration-camera { display: block; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: none; color: inherit; }
.registration-avatar-track > .registration-camera img { display: block; width: 48px; height: 48px; object-fit: contain; }

/* 城市地图使用原始社区大图，并按 Figma 989:8635 的取景坐标裁切。 */
.city-map-background {
  inset: auto; left: -10px; top: -653px;
  width: 2527px; height: 1421px; max-width: none; max-height: none;
  object-fit: fill;
}


/* 城市地图拖拽：只移动地图内容与门店定位，HUD 和顶部功能入口固定。 */
.city-map-content {
  position: absolute; inset: 0; z-index: 1;
  transform: translate(var(--city-map-pan-x, 0px), var(--city-map-pan-y, 0px));
  will-change: transform;
}
.city-map-background {
  z-index: 0; pointer-events: auto; user-select: none; touch-action: none;
  cursor: grab;
}
.city-map-background.is-dragging { cursor: grabbing; }
.city-map-content .city-store-marker { z-index: 2; }

/* ============ 2026-09 城市地图：Figma HUD、等级门店与缩放 ============ */
.city-map-player-card { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.city-map-player-card:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 10px; }
/* Figma SharedHUD：资料底板从头像下方开始，让头像与标题区域连续重叠，不留黑色间隔。 */
.city-map-avatar-frame { position: relative; z-index: 2; }
.city-map-player-copy { width: 123px; margin-left: -27px; padding-left: 38px; }
.city-map-player-copy i { left: 38px; }
.city-map-actions button > img { width: 54px; height: 54px; }
.city-map-zoom-controls { position: absolute; z-index: 3; right: 32px; bottom: 28px; display: grid; grid-template-columns: 29px 47px 29px; align-items: center; height: 29px; overflow: hidden; border: 1px solid rgba(255,242,215,.78); border-radius: 15px; background: rgba(55,28,13,.72); box-shadow: 0 2px 7px rgba(0,0,0,.35); backdrop-filter: blur(8px); }
.city-map-zoom-controls button { width: 29px; height: 29px; padding: 0; border: 0; background: transparent; color: #fff4d7; font-size: 19px; font-weight: 900; line-height: 1; cursor: pointer; }
.city-map-zoom-controls button:hover, .city-map-zoom-controls button:focus-visible { background: rgba(255,188,13,.35); }
.city-map-zoom-controls output { color: #fff4d7; font: 800 9px/1 Arial, sans-serif; text-align: center; }
.city-map-toast { max-width: 310px; overflow: hidden; }
.city-map-toast span { display: block; white-space: nowrap; animation: city-ticker-enter .32s ease both; }
.city-map-toast span.is-changing { animation: city-ticker-enter .32s ease both; }
@keyframes city-ticker-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .city-map-toast span, .city-map-toast span.is-changing { animation: none; } }
.city-map-content { transform: translate(var(--city-map-pan-x, 0px), var(--city-map-pan-y, 0px)) scale(var(--city-map-zoom, 1)); transform-origin: 0 0; }
.city-map-markers { position: absolute; inset: 0; z-index: 2; }
.city-store-marker { width: 181px; height: 96px; z-index: 2; }
.city-store-marker.is-locked { cursor: not-allowed; }
.city-store-marker.is-locked .city-store-label { background: #703c1d; }
.city-store-marker.is-locked .city-store-label em { color: #d9d1c8; }
.city-store-marker.is-locked .city-store-pin { filter: grayscale(.35) brightness(.78); }
.city-store-label em.city-store-unlock { color: #d9d1c8; }
.city-store-marker:disabled { opacity: 1; }

/* 主角属性：切换时保留 Step1 的背景舞台，只替换前景卡片。 */
.registration-screen.is-step2 .registration-steps,
.registration-screen.is-step2 .registration-card,
.registration-screen.is-step2 .registration-next {
  visibility: hidden; pointer-events: none;
}
.attributes-overlay {
  z-index: calc(var(--z-start) + 1); padding: 0; background: transparent; backdrop-filter: none;
}
.attributes-overlay.active { display: grid; animation: none; }
.attributes-stage {
  position: relative; left: auto; top: auto; width: 812px; height: 375px;
  transform: scale(var(--ui-scale, 1)); transform-origin: center;
  background: transparent;
  font-family: "PingFang SC", "Noto Sans SC", sans-serif;
}
.attributes-steps { position: absolute; z-index: 2; top: 28px; left: 252px; display: flex; align-items: center; gap: 16px; color: #fbe9ce; font-size: 12px; font-weight: 600; }
.attributes-steps span, .attributes-steps b { padding: 6px 16px; border: 1px solid #fbe9ce; border-radius: 100px; background: rgba(74,39,17,.65); font-weight: 600; white-space: nowrap; }
.attributes-steps b { border-color: #ffbc0d; background: #ffbc0d; color: #4a2711; }
.attributes-steps i { width: 24px; border-top: 2px solid rgba(251,233,206,.8); }
.attributes-card { position: absolute; left: 100px; top: 75px; width: 612px; height: 218px; box-sizing: border-box; display: grid; grid-template-columns: 220px 1fr; gap: 12px; padding: 12px; border: 2px solid transparent; border-radius: 24px; background: linear-gradient(#a7642a,#a7642a) padding-box, linear-gradient(#e8a163,#471302) border-box; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.attributes-card::after { content: ''; position: absolute; inset: 7px; border: 1px dashed #c27a3b; border-radius: 17px; pointer-events: none; }
.attributes-summary, .attributes-traits { position: relative; z-index: 1; box-sizing: border-box; border: 2px solid transparent; border-radius: 16px; background: linear-gradient(#fbe9ce,#fbe9ce) padding-box, linear-gradient(#fefbf1,#f0b594) border-box; }
.attributes-summary { padding: 20px 16px; }
.attributes-profile { display: flex; align-items: center; gap: 16px; }
.attributes-profile img { width: 48px; height: 48px; object-fit: contain; }
.attributes-profile div { display: grid; gap: 2px; }
.attributes-profile strong { color: #5c3818; font-size: 16px; font-weight: 900; }.attributes-profile small { color: #a37c5e; font-size: 9px; }
.attributes-summary > span { display: block; margin-top: 22px; color: #8e6d4e; font-size: 12px; }.attributes-summary p { margin: 8px 0 0; color: #e37401; font-size: 14px; font-weight: 900; line-height: 1.5; text-decoration: underline 2px #40b9e5; text-underline-offset: 2px; }
.attributes-traits { padding: 25px 28px; background: #fff5e7; }.attributes-traits h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.attributes-traits label { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 16px; margin-bottom: 22px; color: #8e6d4e; font-size: 14px; font-weight: 900; text-align: center; }.attributes-traits label:last-child { margin-bottom: 0; }
.attributes-traits input { width: 100%; height: 18px; margin: 0; accent-color: #ffbc0d; cursor: pointer; }.attributes-traits b { font-weight: 900; }
.attributes-actions { position: absolute; z-index: 2; top: 310px; left: 238px; display: flex; gap: 16px; }.attributes-actions button { width: 160px; height: 40px; border: 1px solid rgba(227,174,100,.65); border-radius: 12px; background: linear-gradient(#fbe5c6,#e3ae64); color: #4a2711; font-size: 14px; font-weight: 900; cursor: pointer; box-shadow: 0 3px 0 #8a5427; }.attributes-actions button:last-child { border-color: rgba(248,141,0,.65); background: linear-gradient(#ffc838,#f88d00); }

/* 麦麦游戏厅：卡组横向滚动，锁定卡片保留玩法预览和等级条件。 */
.minigame-hub-overlay { z-index: 170; }.minigame-hub-close { left: 42px; right: auto; top: 11px; width: 45px; height: 45px; }.minigame-hub-title { position: absolute; z-index: 2; left: 114px; top: 20px; margin: 0; color: #fff2d5; font-size: 18px; font-weight: 900; text-shadow: 0 2px 2px #2c1308; }
.minigame-hub-card, .minigame-ribbon, .minigame-hub-intro { display: none; }
.minigame-game-track { position: absolute; z-index: 2; left: 50px; right: 28px; top: 80px; display: flex; gap: 16px; padding: 0 2px 16px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }.minigame-game-track::-webkit-scrollbar { display: none; }
.minigame-entry-card { position: relative; flex: 0 0 225px; width: 225px; height: 262px; padding: 13px 14px; transform: none; border: 2px solid #d68a3b; border-radius: 23px; background: #b86f2a; box-shadow: none; scroll-snap-align: start; text-align: center; }.minigame-entry-card::before { content: ''; position: absolute; left: 12px; right: 12px; top: 49px; bottom: 20px; border-radius: 16px; background: #fff2dd; }.minigame-entry-card > * { position: relative; z-index: 1; }.minigame-entry-card h3 { height: 22px; margin: 0; color: #fff; font-size: 16px; font-weight: 900; line-height: 22px; }.minigame-entry-card > img, .arcade-game-art { display: block; width: 190px; height: 93px; margin: 16px auto 0; border: 2px solid #e2ad6b; border-radius: 11px; object-fit: cover; background: #7e431d; }.arcade-game-art { display: grid; place-items: center; font-size: 54px; }.arcade-game-art.farm { background: linear-gradient(#9fe1ff 0 38%,#72bb48 39%); }.arcade-game-art.burger { background: linear-gradient(135deg,#5a321c,#d47a22); }.arcade-game-art.service { background: linear-gradient(135deg,#d31920,#f7bd19); }.minigame-entry-card p { margin: 11px 0; color: #8e6d4e; font-size: 12px; }.minigame-entry-card .minigame-start-btn, .minigame-entry-card > button:not(.minigame-start-btn) { position: relative; left: auto; right: auto; bottom: auto; width: 155px; height: 38px; font-size: 14px; }.minigame-entry-card > button:disabled { border: 2px solid #b9bec5; border-radius: 11px; background: linear-gradient(#f3f3f3,#d6d6d6); color: #999; font-size: 14px; font-weight: 900; box-shadow: inset 0 -2px 0 rgba(90,90,90,.14); }.arcade-scroll-control { position: absolute; z-index: 3; top: 194px; width: 30px; height: 48px; padding: 0; border: 1px solid rgba(255,243,214,.7); border-radius: 15px; background: rgba(74,39,17,.6); color: #fff2d5; font-size: 35px; line-height: 36px; cursor: pointer; }.arcade-scroll-control:hover { background: rgba(255,188,13,.65); }.arcade-scroll-control.prev { left: 13px; }.arcade-scroll-control.next { right: 13px; }

/* Figma 游戏封面来自同一张导出的游戏厅画板；仅取封面区域，卡片与交互仍是可滚动的原生内容。 */
.arcade-game-art.farm, .arcade-game-art.burger { font-size: 0; background-image: none; background-repeat: no-repeat; background-size: 812px 375px; }
.arcade-game-art.farm { background-position: -321px -145px; }.arcade-game-art.burger { background-position: -563px -145px; }
.attributes-summary { border: 0; border-radius: 0; background: #fbe9ce; }.attributes-traits { border-color: rgba(167,100,42,.2); background: #fff5e7; }

.arcade-gc-pill { position: absolute; z-index: 3; right: 32px; top: 18px; min-width: 98px; height: 28px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border-radius: 15px; background: #fff2dd; color: #6a3819; box-shadow: 0 2px 5px rgba(0,0,0,.35); font-size: 14px; font-weight: 900; }.arcade-gc-pill span { font-size: 15px; }.arcade-gc-pill strong { font-variant-numeric: tabular-nums; }

/* 地图公告：旧版圆形图标规则会把文字压成 22px，明确重置后以单行从下向上滚入。 */
.city-map-toast { width: max-content; max-width: calc(100% - 96px); height: 46px; box-sizing: border-box; overflow: hidden; }
.city-map-toast span, .city-map-toast span.is-changing { width: auto; height: auto; min-width: 0; margin: 0; padding: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; line-height: 22px; text-align: left; white-space: nowrap; }
.city-map-toast span.is-changing { animation: city-ticker-roll .48s cubic-bezier(.22,.8,.32,1) both; }
@keyframes city-ticker-roll { from { opacity: 0; transform: translateY(120%); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .city-map-toast span.is-changing { animation: none; } }

/* 门店提示统一按 Figma 的单行名称/解锁状态卡片展示，避免长名称折行或压到 HUD。 */
.city-store-label { min-width: 141px; padding-right: 20px; }
.city-store-label strong, .city-store-label em { white-space: nowrap; }
.city-store-label strong { overflow: visible; }

/* 麦麦游戏厅复用注册页完成后的餐厅背景；舞台与卡组只允许横向浏览。 */
.minigame-hub-overlay, .minigame-hub-overlay.active { overflow: hidden !important; overscroll-behavior: none; }
.minigame-hub-stage { overflow: hidden; background: linear-gradient(rgba(26,13,6,.62), rgba(26,13,6,.62)), url('../assets/game/ui/registration/registration-video-complete-bg.png') center / cover no-repeat; }
.minigame-game-track { top: 80px; bottom: 18px; height: auto; box-sizing: border-box; align-items: flex-start; padding: 0 2px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior-x: contain; overscroll-behavior-y: none; }
.minigame-entry-card { flex-basis: 218px; width: 218px; height: 258px; }
.minigame-entry-card > img, .arcade-game-art { width: 183px; height: 90px; margin-top: 14px; }
.minigame-entry-card p { margin: 9px 0; }

/* 公告文本使用独立节点，彻底避开旧 .city-map-toast span 的圆形徽标规则。 */
.city-map-toast .city-map-ticker-text,
.city-map-toast .city-map-ticker-text.is-changing {
  display: block;
  flex: 0 1 auto;
  width: auto;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  line-height: 22px;
  text-align: left;
  white-space: nowrap;
}
.city-map-toast .city-map-ticker-text.is-changing { animation: city-ticker-roll .48s cubic-bezier(.22,.8,.32,1) both; }

/* 城市地图手势：全尺寸标记层必须穿透到背景图；仅开放门店保留自身点击。 */
.city-map-markers { pointer-events: none; }
.city-map-markers .city-store-marker:not(:disabled) { pointer-events: auto; }

/* 游戏厅响应式卡组：轨道占用标题下方至底部安全区，卡片只由可用宽度和 Figma 比例推导。 */
.minigame-hub-stage {
  --arcade-track-top: 80px;
  --arcade-track-bottom: 18px;
}
.minigame-game-track {
  top: var(--arcade-track-top) !important;
  bottom: auto !important;
  height: calc(100% - var(--arcade-track-top) - var(--arcade-track-bottom)) !important;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  gap: 2%;
  padding: 0 2px;
  overflow-x: auto;
  overflow-y: hidden;
}
.minigame-entry-card {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  box-sizing: border-box;
  flex: 0 0 30% !important;
  inline-size: 30% !important;
  block-size: auto !important;
  min-block-size: 0 !important;
  max-block-size: 100% !important;
  aspect-ratio: 225 / 262 !important;
  align-self: flex-start !important;
  display: grid;
  grid-template-rows: repeat(4, auto);
  align-content: space-between;
  gap: 4px;
  padding: clamp(10px, 1.6vw, 13px);
  overflow: hidden;
}
.minigame-entry-card::before { top: 48px; bottom: 16px; }
.minigame-entry-card > * { min-inline-size: 0; }
.minigame-entry-card h3 { height: auto; min-height: 22px; line-height: 1.25; }
.minigame-entry-card > img,
.minigame-entry-card .arcade-game-art {
  box-sizing: border-box;
  inline-size: min(100%, 190px);
  block-size: auto;
  min-block-size: 0;
  margin: 0 auto;
  aspect-ratio: 190 / 93;
  object-fit: cover;
}
.minigame-entry-card p { margin: 0; line-height: 1.2; }
.minigame-entry-card .minigame-start-btn,
.minigame-entry-card > button:not(.minigame-start-btn) { width: min(100%, 155px); margin: 0 auto; }

/* 城市地图：以 Figma 合成地图还原默认“游戏厅左上、社区店前景”构图。
   合成图已包含 HUD、右侧功能入口、社区店气泡与公告；DOM 保留为透明热区，避免二次叠画。 */
/* 透明交互层保持 812×375 源坐标，再随 cover 背景的缩放与裁切整体同步。 */
.city-map-reference-interactions {
  position: absolute;
  z-index: 2;
  left: var(--city-map-reference-offset-x, 0px);
  top: var(--city-map-reference-offset-y, 0px);
  width: 812px;
  height: 375px;
  transform: scale(var(--city-map-reference-scale, 1));
  transform-origin: top left;
  pointer-events: none;
}
.city-map-reference-interactions > * { pointer-events: auto; }

/* Figma 城市首页为 812×375 构图：完整等比显示 UI 前景，16:9 城市世界补齐全屏背景。 */
.city-map-reference-screen .city-map-stage {
  background: #20150d url('../assets/game/ui/map/city-map-community.png') center / cover no-repeat;
}
.city-map-reference-screen .city-map-background {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
.city-map-reference-screen .city-map-hud,
.city-map-reference-screen .city-map-actions,
.city-map-reference-screen .city-map-zoom-controls,
.city-map-reference-screen .city-map-toast {
  opacity: 0;
}
.city-map-reference-screen .city-map-hud { background: transparent; }
.city-map-reference-screen .city-map-toast { pointer-events: none; }
.city-map-reference-screen .city-store-marker.is-reference-hotspot { background: transparent; }

/* 全屏城市地图与游戏厅：外层遮罩已覆盖视口，场景本身也必须使用原生视口尺寸，
   不能再继承 812×375 的等比缩放舞台。Figma 坐标仅用于地图热区换算。 */
.city-map-stage {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  transform: none;
}
/* 游戏厅遮罩使用不透明底色；实际全屏场景由下方舞台的干净餐厅取景提供。 */
.minigame-hub-overlay,
.minigame-hub-overlay.active {
  z-index: calc(var(--z-start) + 1) !important;
  background: #24150c !important;
}
.minigame-hub-stage {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  transform: none;
  /* The source image is a vertical sheet; 300% height + 36% Y isolates its clean front-of-house restaurant section. */
  background: linear-gradient(rgba(26,13,6,.62), rgba(26,13,6,.62)), url('../assets/game/scenes/restaurant-v3-bg.jpg') center 36% / auto 300% no-repeat;
}

/* Figma node 990:9673 — Screen_3_Game_Arcade：全屏背景之上的 812×375 等比 UI 层。 */
.minigame-hub-stage .arcade-node-stage {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 812px;
  height: 375px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--ui-scale, 1));
  transform-origin: center;
  pointer-events: none;
}
.minigame-hub-stage .arcade-node-stage > * { pointer-events: auto; }
.minigame-hub-stage .arcade-node-stage .minigame-game-track {
  left: 50px;
  right: 28px;
  top: 80px !important;
  bottom: auto !important;
  width: auto;
  height: 277px !important;
  min-height: 0;
  gap: 16px;
  padding: 0 2px 16px;
  overflow-x: auto;
  overflow-y: hidden;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card {
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box;
  flex: 0 0 225px !important;
  inline-size: 225px !important;
  block-size: 262px !important;
  min-block-size: 0 !important;
  max-block-size: none !important;
  height: 262px !important;
  aspect-ratio: auto !important;
  align-self: auto !important;
  display: block;
  padding: 13px 14px;
  overflow: hidden;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card::before { top: 49px; bottom: 20px; }
.minigame-hub-stage .arcade-node-stage .minigame-entry-card h3 { height: 22px; min-height: 0; margin: 0; line-height: 22px; }
.minigame-hub-stage .arcade-node-stage .minigame-entry-card > img,
.minigame-hub-stage .arcade-node-stage .minigame-entry-card .arcade-game-art {
  inline-size: 190px;
  block-size: 93px;
  min-block-size: 0;
  margin: 16px auto 0;
  aspect-ratio: auto;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card p { margin: 11px 0; line-height: normal; }
.minigame-hub-stage .arcade-node-stage .minigame-entry-card .minigame-start-btn,
.minigame-hub-stage .arcade-node-stage .minigame-entry-card > button:not(.minigame-start-btn) {
  width: 155px;
  height: 38px;
  margin: 0;
}

/* 游戏厅首张卡复用 Figma 画板中的封面裁切，避免运行时落回无关海报。 */
.arcade-game-art.puzzle {
  font-size: 0;
  background-image: none;
  background-repeat: no-repeat;
  background-size: 812px 375px;
  background-position: -79px -145px;
}

/* 城市地图单世界修复：地图仅由可缩放的社区世界图呈现；HUD/操作控件固定在真实视口边缘。 */
.city-map-reference-screen .city-map-stage {
  background: #20150d;
  touch-action: none;
}
.city-map-reference-screen .city-map-background {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
}
.city-map-reference-screen .city-map-reference-interactions {
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
  pointer-events: none;
}
.city-map-reference-screen .city-map-reference-interactions > * {
  pointer-events: none;
}
.city-map-reference-screen .city-map-player-card,
.city-map-reference-screen .city-map-actions button {
  pointer-events: auto;
}
.city-map-reference-screen .city-map-hud,
.city-map-reference-screen .city-map-actions,
.city-map-reference-screen .city-map-zoom-controls,
.city-map-reference-screen .city-map-toast {
  opacity: 1;
}
.city-map-reference-screen .city-map-hud {
  background: linear-gradient(180deg, rgba(0, 0, 0, .42), transparent);
}

/* 麦麦游戏厅：依据 Figma 993:15172 的 812×375 画布收敛最终坐标；卡组由用户横向拖动浏览。 */
.minigame-hub-stage .arcade-node-stage .minigame-hub-close {
  left: 42px;
  top: 11px;
  width: 45px;
  height: 45px;
}
.minigame-hub-stage .arcade-node-stage .minigame-hub-title {
  left: 114px;
  top: 20px;
  margin: 0;
  line-height: 22px;
}
.minigame-hub-stage .arcade-node-stage .minigame-game-track {
  top: 84px !important;
  height: 273px !important;
  padding: 0 2px 7px;
  scroll-padding-inline: 2px;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  touch-action: pan-x;
  cursor: grab;
}
.minigame-hub-stage .arcade-node-stage .minigame-game-track:focus-visible {
  outline: 3px solid #FFF2D5;
  outline-offset: 3px;
}
.minigame-hub-stage .arcade-node-stage .minigame-game-track.is-pointer-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card {
  height: 266px !important;
  block-size: 266px !important;
  flex: 0 0 230px !important;
  inline-size: 230px !important;
  scroll-snap-align: start;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card > img.arcade-game-art {
  display: block;
  inline-size: 194px;
  block-size: 90px;
  margin-top: 16px;
  -webkit-user-drag: none;
  user-select: none;
}
/* 两侧箭头与设计稿一致地保留为滑动提示，不再承担点击翻页功能。 */
.minigame-hub-stage .arcade-node-stage .arcade-scroll-control { pointer-events: none; }

/* 当前游戏币：Figma 993:15230 的 CurrencySales（116×44）与 44×44 裁切金币图标。 */
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill {
  right: 32px;
  top: 10px;
  min-width: 0;
  width: 116px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 22px;
  background: linear-gradient(#FBE9CE, #FBE9CE) padding-box, linear-gradient(180deg, #FEFBF1, #F0B594) border-box;
  box-shadow: 0 0 .4px rgba(71,37,15,.35);
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > span {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 44px;
  height: 44px;
  overflow: hidden;
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > span > img {
  display: block;
  width: 53.33px;
  height: 53.33px;
  max-width: none;
  transform: translate(-4.67px, -4.67px);
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > strong {
  position: absolute;
  left: 54px;
  top: 15px;
  color: #6B3609;
  font-family: Inter, "Noto Sans SC", sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 14px;
}

/* 游戏厅参考画面使用紧凑游戏币胶囊；保留新金币素材，仅缩小其可见尺寸。 */
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill {
  right: 32px;
  top: 18px;
  min-width: 98px;
  width: auto;
  height: 28px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 15px;
  background: #FFF2DD;
  box-shadow: 0 2px 5px rgba(0,0,0,.35);
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > span {
  position: static;
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  overflow: hidden;
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > span > img {
  display: block;
  width: 18px;
  height: 18px;
  max-width: 18px;
  object-fit: contain;
  transform: none;
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > strong {
  position: static;
  color: #6A3819;
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  line-height: normal;
}

/* 游戏厅浮层以完整视口换算设计坐标：不再把内部 UI 限死在 375px 高度。 */
.minigame-hub-stage .arcade-node-stage {
  width: var(--ui-stage-w, 812px);
  height: var(--ui-stage-h, 375px);
  overflow: visible;
}
.minigame-hub-stage .arcade-node-stage .minigame-game-track {
  top: 80px !important;
  bottom: 18px !important;
  height: auto !important;
}
/* Figma 游戏厅参考构图中的卡片与封面尺寸；轨道高度由全屏舞台自动计算。 */
.minigame-hub-stage .arcade-node-stage .minigame-entry-card {
  flex: 0 0 225px !important;
  inline-size: 225px !important;
  height: min(262px, 100%) !important;
  block-size: min(262px, 100%) !important;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card > img.arcade-game-art {
  inline-size: 190px;
  block-size: 93px;
  margin-top: 16px;
}
/* Figma 页面参考中的游戏币为紧凑图标；新素材在同一可见尺寸内居中显示。 */
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > span,
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > span > img {
  width: 18px;
  height: 18px;
}

/* 麦麦游戏厅：使用整个浏览器视口布局，卡组随可用宽高响应式放大。 */
.minigame-hub-stage .arcade-node-stage {
  inset: 0;
  width: 100vw;
  height: 100vh;
  transform: none;
  overflow: hidden;
  --arcade-card-width: clamp(225px, 29vw, 320px);
  --arcade-card-gap: clamp(16px, 1.8vw, 28px);
  --arcade-three-cards: calc(var(--arcade-card-width) + var(--arcade-card-width) + var(--arcade-card-width) + var(--arcade-card-gap) + var(--arcade-card-gap));
}
.minigame-hub-stage .arcade-node-stage .minigame-hub-close {
  left: clamp(42px, 5vw, 72px);
  top: clamp(11px, 3vh, 24px);
  width: clamp(45px, 5vw, 58px);
  height: clamp(45px, 5vw, 58px);
}
.minigame-hub-stage .arcade-node-stage .minigame-hub-title {
  left: clamp(114px, 14vw, 202px);
  top: clamp(20px, 5.33vh, 38px);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.25;
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill {
  right: clamp(32px, 4vw, 58px);
  top: clamp(18px, 4.8vh, 34px);
  min-width: clamp(98px, 10vw, 132px);
  height: clamp(28px, 4vh, 36px);
  padding-inline: clamp(13px, 1.2vw, 18px);
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > span,
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > span > img {
  width: clamp(18px, 2.2vh, 22px);
  height: clamp(18px, 2.2vh, 22px);
}
.minigame-hub-stage .arcade-node-stage .arcade-scroll-control { display: none; }
.minigame-hub-stage .arcade-node-stage .minigame-game-track {
  left: 4vw;
  right: 4vw;
  top: 18vh !important;
  bottom: 7vh !important;
  height: auto !important;
  display: flex;
  align-items: center;
  gap: var(--arcade-card-gap);
  padding-block: 0;
  padding-inline: max(0px, calc((100% - var(--arcade-three-cards)) / 2));
  scroll-padding-inline: max(0px, calc((100% - var(--arcade-three-cards)) / 2));
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card {
  flex: 0 0 var(--arcade-card-width) !important;
  inline-size: var(--arcade-card-width) !important;
  block-size: auto !important;
  height: auto !important;
  aspect-ratio: 225 / 262 !important;
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: space-between;
  gap: clamp(5px, 1vh, 12px);
  padding: clamp(13px, 1.7vw, 24px);
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card::before {
  top: clamp(49px, 18%, 72px);
  bottom: clamp(20px, 7%, 32px);
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card h3 {
  height: auto;
  min-height: 22px;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.25;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card > img.arcade-game-art {
  inline-size: 100%;
  block-size: auto;
  margin: 0;
  aspect-ratio: 190 / 93;
  object-fit: cover;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card p {
  margin: 0;
  font-size: clamp(12px, 1.2vw, 16px);
  line-height: 1.2;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card .minigame-start-btn,
.minigame-hub-stage .arcade-node-stage .minigame-entry-card > button:not(.minigame-start-btn) {
  width: 70%;
  height: clamp(38px, 5vh, 48px);
  margin: 0 auto;
  font-size: clamp(14px, 1.4vw, 18px);
}

/* Figma 993:15175：卡片以实际的 220×257 设计比例整体缩放。
   宽度同时受横向三卡空间和可用高度约束，不再以固定像素宽高裁切卡片。 */
.minigame-hub-stage .arcade-node-stage {
  --arcade-card-width: min(29vw, 64.2vh);
  --arcade-card-gap: min(1.8vw, 3.8vh);
  --arcade-three-cards: calc(var(--arcade-card-width) + var(--arcade-card-width) + var(--arcade-card-width) + var(--arcade-card-gap) + var(--arcade-card-gap));
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card {
  aspect-ratio: 220 / 257 !important;
  container-type: inline-size;
  padding: 6.7cqw;
  gap: 2.7cqw;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card h3 {
  min-height: 9.8cqw;
  font-size: 8.1cqw;
  line-height: 1.25;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card > img.arcade-game-art {
  width: 73%;
  inline-size: 73%;
  block-size: auto;
  margin: 0 auto;
  aspect-ratio: 190 / 93;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card p {
  font-size: 5.35cqw;
  line-height: 1.2;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card .minigame-start-btn,
.minigame-hub-stage .arcade-node-stage .minigame-entry-card > button:not(.minigame-start-btn) {
  height: 17cqw;
  font-size: 6.2cqw;
}

/* 新品海报拼图：舞台虚拟尺寸换算为整个视口；既不受 375px 高度限制，也不拉伸棋盘比例。 */
.poster-puzzle-stage,
.poster-result-stage {
  width: var(--ui-stage-w);
  height: var(--ui-stage-h);
}
/* 与游戏厅保持同一套全视口安全边距：关闭按钮不再只贴在 812×375 内容画板左上。 */
.poster-puzzle-stage .poster-puzzle-close {
  left: 5%;
  top: 3%;
}

/* 功能页本身已适配完整视口；不要让主场景的竖屏旋转提示遮挡其关闭和操作控件。 */
body:has(#minigameHubModal.active) .rotate-hint,
body:has(#posterPuzzleModal.active) .rotate-hint,
body:has(#posterPuzzleResultModal.active) .rotate-hint {
  display: none !important;
}

/* 卡片自身不能以 cqw 计算 padding（会回退到 812px 舞台）；以卡片百分比和同源 vw/vh 保持全部元素同比分布。 */
.minigame-hub-stage .arcade-node-stage .minigame-entry-card {
  padding: 6.7%;
  gap: 2.7%;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card h3 {
  min-height: 0;
  font-size: min(2.4vw, 5.2vh);
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card > img.arcade-game-art {
  width: 80%;
  inline-size: 80%;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card p {
  font-size: min(1.75vw, 3.8vh);
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card .minigame-start-btn,
.minigame-hub-stage .arcade-node-stage .minigame-entry-card > button:not(.minigame-start-btn) {
  width: 80%;
  height: 15.6%;
  font-size: min(2.1vw, 4.55vh);
}

/* 百分比 padding 也会相对父级轨道计算；以下数值由 min(29vw, 64.2vh) 的卡片宽度直接换算。 */
.minigame-hub-stage .arcade-node-stage .minigame-entry-card {
  grid-template-rows: auto auto auto auto;
  padding: min(1.943vw, 4.301vh);
  gap: min(.783vw, 1.733vh);
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card .minigame-start-btn,
.minigame-hub-stage .arcade-node-stage .minigame-entry-card > button:not(.minigame-start-btn) {
  height: min(5.28vw, 11.7vh);
}

/* 993:15175 标注：封面为 160×94，挑战按钮高 38 / 卡宽 220；继续随卡片比例同步缩放。 */
.minigame-hub-stage .arcade-node-stage .minigame-entry-card > img.arcade-game-art {
  aspect-ratio: 160 / 94;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card .minigame-start-btn,
.minigame-hub-stage .arcade-node-stage .minigame-entry-card > button:not(.minigame-start-btn) {
  height: min(4.68vw, 10.38vh);
}

/* 拼图资源自身就是 Figma 993:15175 的完整卡面，不能再作为二级封面嵌入新卡片。 */
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.arcade-puzzle-card {
  display: block;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.arcade-puzzle-card::before { display: none; }
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.arcade-puzzle-card > img.arcade-card-fidelity-art {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.arcade-puzzle-card .minigame-start-btn {
  position: absolute;
  z-index: 2;
  left: 14%;
  right: 14%;
  bottom: 8%;
  width: auto;
  height: 14%;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.arcade-puzzle-card .minigame-start-btn:focus-visible {
  outline: 3px solid #FFF2D5;
  outline-offset: -4px;
  filter: none;
  transform: none;
}

/* 993:15175 首卡采用相对设计坐标，避免旧 Grid 行高把内容压进内层面板。 */
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable {
  display: block;
  padding: 0;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable h3,
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable > img.arcade-game-art,
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable p,
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable .minigame-start-btn {
  position: absolute;
  z-index: 1;
  margin: 0;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable h3 {
  top: 7%;
  left: 0;
  width: 100%;
  font-size: min(2.4vw, 5.2vh);
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable > img.arcade-game-art {
  top: 25%;
  left: 14%;
  width: 72%;
  inline-size: 72%;
  height: auto;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable p {
  top: 65%;
  left: 0;
  width: 100%;
  font-size: min(1.75vw, 3.8vh);
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable .minigame-start-btn {
  top: 75%;
  left: 14%;
  width: 72%;
  height: min(4.68vw, 10.38vh);
  font-size: min(2.1vw, 4.55vh);
}

/* Figma 520:5709：餐厅主页右下返回江城地图入口，位于与左下摇杆对称的安全边距内。 */
.ui-stage {
  --city-map-entry-right: 24px;
  --city-map-entry-bottom: 18px;
  --city-map-entry-size: 82px;
}
.ui-stage .city-map-entry-btn {
  position: absolute;
  z-index: 55;
  right: var(--city-map-entry-right);
  bottom: var(--city-map-entry-bottom);
  width: var(--city-map-entry-size);
  height: var(--city-map-entry-size);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s, filter .15s;
}
.ui-stage .city-map-entry-btn > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
/* Figma 导出 SVG 的 10px 描边文字在浏览器中会被磨砂层模糊；
   用同一位置和尺寸的原生标签覆盖，仅保留 SVG 的地图图形。 */
.ui-stage .city-map-entry-btn > span {
  position: absolute;
  z-index: 1;
  left: 13px;
  bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 18px;
  box-sizing: border-box;
  border: 1px solid #F9E7D8;
  border-radius: 10px;
  background: linear-gradient(180deg, #B97A4A 0%, #EAB68D 100%);
  box-shadow: inset 0 1px 0 rgba(255, 250, 244, .62), 0 1px 1px rgba(85, 42, 18, .24);
  color: #FFFDF8;
  font-family: "Noto Sans SC", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
  white-space: nowrap;
  -webkit-text-stroke: .65px #8A4E27;
  paint-order: stroke fill;
  text-shadow: 0 1px 0 rgba(106, 52, 22, .32);
  pointer-events: none;
}
.ui-stage .city-map-entry-btn:hover,
.ui-stage .city-map-entry-btn:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.ui-stage .city-map-entry-btn:focus-visible {
  outline: 3px solid rgba(255, 242, 213, .95);
  outline-offset: 3px;
  border-radius: 16px;
}
.ui-stage .city-map-entry-btn:active { transform: scale(.95); }


/* 游戏厅卡片的操作区共用同一基线：锁定状态只改变外观，不参与 Grid 行高分配。 */
.minigame-hub-stage .arcade-node-stage .minigame-entry-card > button {
  position: absolute !important;
  z-index: 1;
  top: 75% !important;
  bottom: auto !important;
  left: 14% !important;
  width: 72% !important;
  margin: 0 !important;
}

/* 520:7141：Figma 江城地图组件的本体尺寸。 */
.ui-stage { --city-map-entry-size: 76px; }

/* 993:15175：拼图顶部安全栏。关闭、标题和计时互不侵占。 */
.poster-puzzle-stage .poster-puzzle-close {
  left: 24px;
  top: 14px;
}
.poster-puzzle-stage .poster-puzzle-title {
  left: 84px;
  top: 17px;
}
.poster-puzzle-stage .poster-puzzle-timer {
  /* Figma 840:12368：金币悬于计时卡上方，卡片位于顶部安全栏第二行。 */
  right: 40px;
  top: 60px;
  z-index: 3;
}

/* 棋盘和目标面板以共同容器居中，顶部计时栏不参与主体布局。 */
.poster-puzzle-stage .poster-puzzle-game-layout {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(50% + 28px);
  display: flex;
  align-items: center;
  gap: 48px;
  width: 570px;
  height: 312px;
  transform: translate(-50%, -50%);
}
.poster-puzzle-stage .poster-puzzle-game-layout .poster-puzzle-board-shell {
  position: relative;
  left: auto;
  top: auto;
  flex: 0 0 312px;
}
.poster-puzzle-stage .poster-puzzle-game-layout .poster-puzzle-info {
  position: relative;
  right: auto;
  top: auto;
  flex: 0 0 210px;
}


/* Figma 840:12368 / 993:15025：拼图计时与游戏厅游戏币最终规格。
   计时器不再绑定 168px 的外框宽度，而由固定内容自然决定宽度，并受舞台可用宽度约束。 */
.poster-puzzle-stage .poster-puzzle-timer {
  position: absolute;
  z-index: 3;
  inset-inline-end: clamp(20px, 4.93%, 40px);
  top: 60px;
  inline-size: max-content;
  max-inline-size: calc(100% - 40px);
  height: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px 8px 44px;
  color: #FBE9CE;
  white-space: nowrap;
}
.poster-puzzle-stage .poster-puzzle-timer::before {
  left: 14px;
  right: 0;
  top: 4px;
  height: 36px;
  box-sizing: border-box;
}
/* 840:12368 没有游戏币装饰；timeless.png 不属于“操作用时”组件。 */
.poster-puzzle-stage .poster-puzzle-timer > .poster-timeless-icon { display: none; }
.poster-puzzle-stage .poster-puzzle-timer > span {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 14px;
}
.poster-puzzle-stage .poster-puzzle-timer > strong {
  flex: 0 0 auto;
  min-inline-size: 0;
  gap: 2px;
}
.poster-puzzle-stage .poster-puzzle-timer > strong > .digit-slot {
  width: 13px;
  height: 18px;
  box-sizing: border-box;
  padding: 0;
  font-size: 14px;
  line-height: 14px;
}
.poster-puzzle-stage .poster-puzzle-timer > strong > .digit-slot.colon {
  width: 5px;
  height: auto;
  box-sizing: content-box;
  padding: 0;
  font-size: 12px;
  line-height: 14px;
}

/* 993:15025：麦麦游戏厅右上角游戏币。外框 116×44，筹码 44×44，金额从 x=54 起。 */
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill {
  position: absolute;
  z-index: 3;
  right: 32px;
  top: 18px;
  min-inline-size: 0;
  inline-size: 116px;
  block-size: 44px;
  box-sizing: border-box;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #6B3609;
  font-family: Inter, "Noto Sans SC", sans-serif;
  font-size: 12px;
  font-weight: 800;
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill::before {
  content: '';
  position: absolute;
  inset: 8px 0 8px 20px;
  box-sizing: border-box;
  border: 1px solid #F0B594;
  border-radius: 14px;
  background: #FBE9CE;
  box-shadow: 0 0 .4px rgba(40, 17, 7, .3);
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > span {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  display: block;
  width: 44px;
  height: 44px;
  overflow: visible;
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > span > img {
  position: absolute;
  left: -4.67px;
  top: -4.67px;
  display: block;
  width: 53.33px;
  height: 53.33px;
  max-width: none;
  object-fit: contain;
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > strong {
  position: absolute;
  z-index: 2;
  left: 54px;
  top: 15px;
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: 14px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}


/* 游戏厅只有 feature-page-stage 负责 --ui-scale；内层 812×375 节点不得再次缩放。 */
.minigame-hub-stage .arcade-node-stage {
  transform: translate(-50%, -50%);
}
/* 动态游戏币金额在筹码右侧的可用区域内双向居中，单个数字不会贴左。 */
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > strong {
  left: 44px;
  right: 0;
  top: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  line-height: 14px;
}


/* 游戏厅最终是全视口舞台：CurrencySales 以 812×375 Figma 基准等比换算，
   使胶囊、筹码与金额和卡片保持同一放大比例。 */
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill {
  right: min(3.9409vw, 8.5333vh);
  top: min(2.2167vw, 4.8vh);
  inline-size: min(14.2857vw, 30.9333vh);
  block-size: min(5.4187vw, 11.7333vh);
  font-size: min(1.4778vw, 3.2vh);
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill::before {
  inset: min(.9852vw, 2.1333vh) 0 min(.9852vw, 2.1333vh) min(2.4631vw, 5.3333vh);
  border-radius: min(1.7241vw, 3.7333vh);
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > span {
  width: min(5.4187vw, 11.7333vh);
  height: min(5.4187vw, 11.7333vh);
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > span > img {
  left: -8.75%;
  top: -8.75%;
  width: 121.2%;
  height: 121.2%;
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > strong {
  left: min(5.4187vw, 11.7333vh);
  right: 0;
  top: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  font-size: inherit;
  line-height: min(1.7241vw, 3.7333vh);
}


/* 全视口游戏厅的 CurrencySales 与卡片采用同一 812×375 等比系数，
   不能保留 116×44 的未缩放像素尺寸。 */
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill {
  right: min(3.9409vw, 8.5333vh);
  top: min(2.2167vw, 4.8vh);
  inline-size: min(14.2857vw, 30.9333vh);
  block-size: min(5.4187vw, 11.7333vh);
  font-size: min(1.4778vw, 3.2vh);
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill::before {
  inset: min(.9852vw, 2.1333vh) 0 min(.9852vw, 2.1333vh) min(2.4631vw, 5.3333vh);
  border-radius: min(1.7241vw, 3.7333vh);
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > span {
  width: min(5.4187vw, 11.7333vh);
  height: min(5.4187vw, 11.7333vh);
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > span > img {
  left: -8.75%;
  top: -8.75%;
  width: 121.2%;
  height: 121.2%;
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > strong {
  left: min(5.4187vw, 11.7333vh);
  right: 0;
  top: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  font-size: inherit;
  line-height: min(1.7241vw, 3.7333vh);
}


/* 游戏厅/拼图最终布局：全屏只承载餐厅背景，所有交互 UI 回到同一张 812×375 设计画布。
   禁止继续以 100vw、100vh 或各自的 vw/vh 规则重算卡片，从而保证 Figma 比例。 */
.minigame-hub-overlay,
.minigame-hub-overlay.active {
  background: rgba(0, 0, 0, .48) !important;
}
.minigame-hub-stage {
  /* 这个容器是视口背景，必须脱离 .feature-page-stage 的 812×375 缩放。
     只有内部 .arcade-node-stage 应用 --ui-scale，避免全屏时发生二次缩放。 */
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  transform: none;
  background: linear-gradient(rgba(26, 13, 6, .42), rgba(26, 13, 6, .42)), url('../assets/game/scenes/restaurant-v3-bg.jpg') center 36% / auto 300% no-repeat;
}
.minigame-hub-stage .arcade-node-stage {
  position: absolute;
  inset: auto;
  left: 50%;
  top: 50%;
  width: 812px;
  height: 375px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--ui-scale, 1));
  transform-origin: center;
  --arcade-card-width: 230px;
  --arcade-card-gap: 16px;
}
.minigame-hub-stage .arcade-node-stage .minigame-hub-close {
  left: 42px;
  top: 11px;
  width: 45px;
  height: 45px;
}
.minigame-hub-stage .arcade-node-stage .minigame-hub-title {
  left: 114px;
  top: 20px;
  font-size: 18px;
  line-height: 22px;
}
.minigame-hub-stage .arcade-node-stage .minigame-game-track {
  left: 50px;
  right: 28px;
  top: 84px !important;
  bottom: auto !important;
  height: 273px !important;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 2px 7px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-inline: 2px;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card {
  flex: 0 0 230px !important;
  inline-size: 230px !important;
  block-size: 266px !important;
  height: 266px !important;
  aspect-ratio: auto !important;
  display: block;
  padding: 13px 14px;
  gap: 0;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card h3 {
  min-height: 0;
  font-size: 16px;
  line-height: 22px;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card > img.arcade-game-art {
  inline-size: 194px;
  block-size: 90px;
  margin-top: 16px;
  aspect-ratio: auto;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card p {
  margin: 11px 0;
  font-size: 12px;
  line-height: normal;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card .minigame-start-btn,
.minigame-hub-stage .arcade-node-stage .minigame-entry-card > button:not(.minigame-start-btn) {
  width: 155px;
  height: 38px;
  margin: 0;
  font-size: 14px;
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill {
  right: 32px;
  top: 18px;
  min-inline-size: 0;
  inline-size: 116px;
  block-size: 44px;
  padding: 0;
  font-size: 12px;
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill::before {
  inset: 8px 0 8px 20px;
  border-radius: 14px;
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > span {
  width: 44px;
  height: 44px;
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > span > img {
  left: -4.67px;
  top: -4.67px;
  width: 53.33px;
  height: 53.33px;
}
.minigame-hub-stage .arcade-node-stage .arcade-gc-pill > strong {
  left: 44px;
  right: 0;
  top: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  font-size: inherit;
  line-height: 14px;
}

/* 拼图结果与进行页复用餐厅背景，仅保留与其他功能页一致的一层轻度调暗。 */
.poster-puzzle-overlay,
.poster-result-overlay {
  background: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)), url('../assets/game/scenes/restaurant-v3-bg.jpg') center 36% / auto 300% no-repeat;
}
.poster-puzzle-stage,
.poster-result-stage {
  width: 812px;
  height: 375px;
}

/* 参照 UI 的空拼图槽：浅木纹内嵌面板和凹刻“空”字，不依赖切图。 */
.poster-puzzle-tile.is-empty {
  position: relative;
  display: block;
  overflow: hidden;
  border: 3px solid #E7AE61;
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(255, 232, 172, .55), rgba(154, 83, 30, .08)),
    repeating-linear-gradient(12deg, #E6A65D 0 3px, #F7CA84 3px 6px, #D8954A 6px 8px);
  box-shadow:
    inset 0 0 0 3px #87451F,
    inset 0 0 0 6px #E7B064,
    inset 0 7px 9px rgba(94, 45, 16, .28),
    inset 0 -5px 8px rgba(255, 232, 168, .46);
  color: transparent;
  cursor: default;
}
.poster-puzzle-tile.is-empty > span { display: none; }
.poster-puzzle-tile.is-empty::before {
  content: '空';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #C8843D;
  font-family: "Noto Sans SC", sans-serif;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: 2px #955023;
  paint-order: stroke fill;
  text-shadow: 2px 2px 0 #F4C67E, -2px -2px 0 #7D401E, 0 4px 5px rgba(90, 43, 16, .32);
  transform: translateY(-1px);
}


/* 首张“华容道拼图”与锁定卡共用同一内容栅格。
   清除历史百分比绝对定位，避免首卡标题单独放大；顶部关闭、页面标题、游戏币均不受影响。 */
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable {
  padding: 13px 14px;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable > h3,
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable > img.arcade-game-art,
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable > p,
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable > .minigame-start-btn {
  position: relative;
  z-index: 1;
  inset: auto;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable > h3 {
  width: auto;
  height: 22px;
  min-height: 0;
  margin: 0;
  font-size: 16px;
  line-height: 22px;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable > img.arcade-game-art {
  width: 194px;
  height: 90px;
  margin: 16px auto 0;
  aspect-ratio: auto;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable > p {
  width: auto;
  margin: 11px 0;
  font-size: 12px;
  line-height: normal;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable > .minigame-start-btn {
  width: 155px;
  height: 38px;
  margin: 0;
  font-size: 14px;
}


/* 首卡保留已验证的封面、人数和按钮绝对坐标；仅将标题收敛到锁定卡的文字规格。 */
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable {
  padding: 0;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable > h3 {
  position: absolute;
  z-index: 1;
  top: 13px;
  left: 0;
  width: 100%;
  height: 22px;
  margin: 0;
  font-size: 16px;
  line-height: 22px;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable > img.arcade-game-art {
  position: absolute;
  z-index: 1;
  top: 25%;
  left: 14%;
  width: 72%;
  height: auto;
  margin: 0;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable > p {
  position: absolute;
  z-index: 1;
  top: 65%;
  left: 0;
  width: 100%;
  margin: 0;
  font-size: 12px;
  line-height: normal;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.playable > .minigame-start-btn {
  position: absolute;
  z-index: 1;
  top: 75%;
  left: 14%;
  width: 72%;
  height: 38px;
  margin: 0;
  font-size: 14px;
}


/* 游戏厅 / 拼图的顶部安全栏属于真实视口，不能随居中的 812×375 内容舞台下移。
   顶部栏从 (0,0) 等比缩放，保留 Figma 的 11/14px 顶边距；卡组、棋盘仍由各自舞台居中。 */
.minigame-hub-stage > .arcade-topbar,
.poster-puzzle-overlay > .poster-puzzle-topbar {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  width: 812px;
  height: 64px;
  transform: scale(var(--ui-scale, 1));
  transform-origin: top left;
  pointer-events: none;
}
.minigame-hub-stage > .arcade-topbar > *,
.poster-puzzle-overlay > .poster-puzzle-topbar > * {
  pointer-events: auto;
}
.minigame-hub-stage > .arcade-topbar .minigame-hub-close {
  position: absolute;
  left: 42px;
  top: 11px;
  width: 45px;
  height: 45px;
}
.minigame-hub-stage > .arcade-topbar .minigame-hub-title {
  position: absolute;
  z-index: 2;
  left: 114px;
  top: 20px;
  margin: 0;
  color: #FFF2D5;
  font-size: 18px;
  font-weight: 900;
  line-height: 22px;
  text-shadow: 0 2px 2px #2C1308;
}
.minigame-hub-stage > .arcade-topbar .arcade-gc-pill {
  position: absolute;
  z-index: 3;
  right: 32px;
  top: 18px;
  inline-size: 116px;
  block-size: 44px;
  min-inline-size: 0;
  box-sizing: border-box;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #6B3609;
  font-family: Inter, "Noto Sans SC", sans-serif;
  font-size: 12px;
  font-weight: 800;
}
.minigame-hub-stage > .arcade-topbar .arcade-gc-pill::before {
  content: '';
  position: absolute;
  inset: 8px 0 8px 20px;
  box-sizing: border-box;
  border: 1px solid #F0B594;
  border-radius: 14px;
  background: #FBE9CE;
  box-shadow: 0 0 .4px rgba(40, 17, 7, .3);
}
.minigame-hub-stage > .arcade-topbar .arcade-gc-pill > span {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  display: block;
  width: 44px;
  height: 44px;
  overflow: visible;
}
.minigame-hub-stage > .arcade-topbar .arcade-gc-pill > span > img {
  position: absolute;
  left: -4.67px;
  top: -4.67px;
  display: block;
  width: 53.33px;
  height: 53.33px;
  max-width: none;
  object-fit: contain;
}
.minigame-hub-stage > .arcade-topbar .arcade-gc-pill > strong {
  position: absolute;
  z-index: 2;
  left: 44px;
  right: 0;
  top: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: 14px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.poster-puzzle-overlay > .poster-puzzle-topbar .poster-puzzle-close {
  position: absolute;
  left: 24px;
  top: 14px;
  width: 45px;
  height: 45px;
}
.poster-puzzle-overlay > .poster-puzzle-topbar .poster-puzzle-title {
  position: absolute;
  z-index: 2;
  left: 84px;
  top: 17px;
  margin: 0;
  color: #FFF2D5;
  font-size: 18px;
  font-weight: 900;
  line-height: 28px;
  text-shadow: 0 2px 3px #2C1308;
}


/* 地图首页顶部 HUD 固定在视口边缘；按统一设计比例适度放大，
   三组分别以左/中/右锚点展开，不影响城市世界图的拖拽和缩放。 */
.city-map-reference-screen .city-map-player-card {
  transform: scale(var(--city-map-hud-scale, 1));
  transform-origin: left top;
}
.city-map-reference-screen .city-map-location {
  transform: translateX(-50%) scale(var(--city-map-hud-scale, 1));
  transform-origin: center top;
}
.city-map-reference-screen .city-map-actions {
  transform: scale(var(--city-map-hud-scale, 1));
  transform-origin: right top;
}

/* “操作用时”与关闭、标题共享视口顶部安全栏，避免受居中拼图舞台的垂直偏移影响。 */
.poster-puzzle-overlay > .poster-puzzle-topbar .poster-puzzle-timer {
  position: absolute;
  z-index: 3;
  right: 40px;
  top: 60px;
  inline-size: max-content;
  max-inline-size: 772px;
  height: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px 8px 44px;
  color: #FBE9CE;
  white-space: nowrap;
  pointer-events: none;
}
.poster-puzzle-overlay > .poster-puzzle-topbar .poster-puzzle-timer::before {
  left: 14px;
  right: 0;
  top: 4px;
  height: 36px;
  box-sizing: border-box;
}
.poster-puzzle-overlay > .poster-puzzle-topbar .poster-puzzle-timer > .poster-timeless-icon { display: none; }
.poster-puzzle-overlay > .poster-puzzle-topbar .poster-puzzle-timer > span {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 14px;
}
.poster-puzzle-overlay > .poster-puzzle-topbar .poster-puzzle-timer > strong {
  flex: 0 0 auto;
  min-inline-size: 0;
  gap: 2px;
}
.poster-puzzle-overlay > .poster-puzzle-topbar .poster-puzzle-timer > strong > .digit-slot {
  width: 13px;
  height: 18px;
  box-sizing: border-box;
  padding: 0;
  font-size: 14px;
  line-height: 14px;
}
.poster-puzzle-overlay > .poster-puzzle-topbar .poster-puzzle-timer > strong > .digit-slot.colon {
  width: 5px;
  height: auto;
  box-sizing: content-box;
  padding: 0;
  font-size: 12px;
  line-height: 14px;
}


/* 拼图空槽提亮：保留木纹与凹刻层次，移除过深的棕色描边和内阴影。 */
.poster-puzzle-tile.is-empty {
  border-color: #F6D49A;
  background:
    linear-gradient(135deg, rgba(255, 244, 206, .72), rgba(210, 151, 77, .06)),
    repeating-linear-gradient(12deg, #F5CF91 0 3px, #FFE5B2 3px 6px, #EFC17D 6px 8px);
  box-shadow:
    inset 0 0 0 3px #BF8248,
    inset 0 0 0 6px #F4D39B,
    inset 0 6px 8px rgba(137, 80, 36, .16),
    inset 0 -5px 8px rgba(255, 245, 210, .62);
}
.poster-puzzle-tile.is-empty::before {
  color: #DCA45E;
  -webkit-text-stroke-color: #B97B42;
  text-shadow: 2px 2px 0 #FFE4AE, -1px -1px 0 #D39A5D, 0 3px 4px rgba(132, 77, 32, .18);
}

/* 右侧目标/提示面板的右边线与顶部操作用时铭牌的 right:40px 对齐。
   570px 主布局原右端为 691px；向右平移 81px 后刚好落在 772px。 */
.poster-puzzle-stage .poster-puzzle-game-layout {
  left: calc(50% + 81px);
}


/* 提示面板固定右对齐；棋盘单独居中于其左侧的可用空间，不能再跟随面板一起右移。 */
.poster-puzzle-stage .poster-puzzle-game-layout {
  left: 0;
  width: 812px;
  display: block;
  transform: translateY(-50%);
}
.poster-puzzle-stage .poster-puzzle-game-layout .poster-puzzle-board-shell {
  position: absolute;
  left: 101px;
  top: 0;
  flex: none;
}
.poster-puzzle-stage .poster-puzzle-game-layout .poster-puzzle-info {
  position: absolute;
  left: 562px;
  right: auto;
  top: 9px;
  flex: none;
}


/* 指定素材覆盖：游戏厅使用新场景，拼图空位直接使用提供的空槽图；
   首页头像本身保留边框，移除外层容器的重复底色与阴影。 */
.minigame-hub-stage {
  background: url('../assets/game/scenes/game_background.png') center / cover no-repeat;
}
.poster-puzzle-tile.is-empty {
  border: 0;
  border-radius: 9px;
  background: url('../assets/game/minigames/poster-puzzle/empty.png') center / cover no-repeat;
  box-shadow: none;
}
.poster-puzzle-tile.is-empty::before { content: none; }
.ui-stage .player-avatar-frame {
  background: transparent;
  box-shadow: none;
}
.ui-stage .player-avatar-frame img.avatar {
  object-fit: cover;
  background: transparent;
  border: 0;
}


/* 拼图进行页和结算页使用专属夜景餐厅背景；游戏厅仍保持独立场景。 */
.poster-puzzle-overlay,
.poster-result-overlay {
  background: url('../assets/game/minigames/poster-puzzle/puzzle_background.png') center / cover no-repeat;
}


/* 锁定游戏卡与华容道拼图使用相同的内容安全边距和纵向坐标。 */
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.locked {
  display: block;
  padding: 0;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.locked > h3 {
  position: absolute;
  z-index: 1;
  top: 13px;
  left: 0;
  width: 100%;
  height: 22px;
  margin: 0;
  font-size: 16px;
  line-height: 22px;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.locked > img.arcade-game-art {
  position: absolute;
  z-index: 1;
  top: 25%;
  left: 14%;
  width: 72%;
  inline-size: 72%;
  height: auto;
  margin: 0;
  aspect-ratio: auto;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.locked > p {
  position: absolute;
  z-index: 1;
  top: 65%;
  left: 0;
  width: 100%;
  margin: 0;
  font-size: 12px;
  line-height: normal;
}
.minigame-hub-stage .arcade-node-stage .minigame-entry-card.locked > button:not(.minigame-start-btn) {
  position: absolute;
  z-index: 1;
  top: 75%;
  left: 14%;
  width: 72%;
  height: 38px;
  margin: 0;
  font-size: 14px;
}


/* 拼图顶部栏：计时铭牌与标题同行垂直居中；交通枢纽整体标记移动；
   成就页左侧两个操作按钮统一使用深棕文字。 */
.poster-puzzle-overlay > .poster-puzzle-topbar .poster-puzzle-timer {
  top: 9px;
}
.achievement-profile .achievement-share,
.achievement-profile .achievement-ranking {
  color: #4A2711;
}