/* ============================================================
   牛马模拟器 — 样式表
   风格：报纸/公文风，克制，略带压抑感
   ============================================================ */

/**
 * 首页像素字：可选本地 assets/fonts/ZPIX.ttf（Zpix）、IPix.ttf；
 * 未放置时由 index 引入的「霞鹜文楷屏幕阅读版」CDN 兜底（屏显、偏点阵感）。
 * 纯离线可把 fusion-pixel 等 woff2 自托管到此目录并增写 @font-face。
 */
@font-face {
  font-family: "Zpix";
  src: url("../assets/fonts/ZPIX.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IPix";
  src: url("../assets/fonts/IPix.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   0. CSS 变量
   ============================================================ */
:root {
  /* 配色 */
  --bg-primary: #f5f0e8;         /* 米白，旧报纸色 */
  --bg-secondary: #ece6d9;       /* 略深的米色，卡片/区块背景 */
  --bg-dark: #2c2c2c;            /* 深色背景（结局页等） */
  --text-primary: #1a1a1a;       /* 主文字，接近纯黑 */
  --text-secondary: #5a5a5a;     /* 次要文字 */
  --text-muted: #8a8a8a;         /* 弱化文字 */
  --text-inverse: #f5f0e8;       /* 深色背景上的文字 */
  --border-color: #3a3a3a;       /* 主边框色 */
  --border-light: #c5bfb3;       /* 浅边框 */
  --accent: #8b0000;             /* 强调色，暗红 */
  --accent-light: #a0522d;       /* 次强调，赭色 */

  /* 状态色 */
  --status-normal: #4a6741;      /* 暗绿 */
  --status-tired: #8a7a2a;       /* 暗黄 */
  --status-overwork: #b85c2f;    /* 橙红 */
  --status-critical: #8b0000;    /* 深红 */

  /* 字体 */
  --font-heading: "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  --font-body: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: "Courier New", "Consolas", monospace;

  /** 首页公告板：像素/屏显中文栈（Zpix 本地 → LXGW WenKai Screen CDN） */
  --font-home-pixel: "Zpix", "IPix", "LXGW WenKai Screen", "PingFang SC", "Microsoft YaHei", sans-serif;

  /* 尺寸 */
  --max-width: 960px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
}

/* ============================================================
   1. 全局重置与基础
   ============================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  line-height: 1.7;
  min-height: 100vh;
  min-height: 100dvh;
  /* 安全区集中在 body，避免与各屏 screen-inner 重复叠加 */
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
}

p {
  margin-bottom: var(--spacing-sm);
}

/* ============================================================
   2. 页面切换
   ============================================================ */
.screen {
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
}

.screen.active {
  display: block;
}

.screen-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-lg);
}

.screen-footer {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
  text-align: center;
}

/* ============================================================
   3. 通用工具类
   ============================================================ */
.hidden {
  display: none !important;
}

.placeholder-text {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.9rem;
}

/* ============================================================
   4. 按钮系统
   ============================================================ */
.btn {
  display: inline-block;
  padding: 10px 24px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  border: 2px solid var(--border-color);
  background: transparent;
  color: var(--text-primary);
  transition: background-color 0.15s, color 0.15s;
  letter-spacing: 0.5px;
}

.btn:hover {
  background-color: var(--text-primary);
  color: var(--bg-primary);
}

.btn:active {
  opacity: 0.85;
}

.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn:disabled:hover {
  background: transparent;
  color: var(--text-primary);
}

/**
 * 创建页「进入求职」：表单未齐时可点，用于弹出 Toast 提示（真正 disabled 无法点击）
 */
#btn-start-interview.btn-creation-gated {
  opacity: 0.42;
  cursor: pointer;
}

#btn-start-interview.btn-creation-gated:hover {
  opacity: 0.55;
}

.btn-primary {
  background-color: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}

.btn-primary:hover {
  background-color: transparent;
  color: var(--text-primary);
}

.btn-secondary {
  border-color: var(--border-light);
  color: var(--text-secondary);
}

.btn-secondary:hover {
  border-color: var(--border-color);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.btn-danger {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-danger:hover {
  background-color: var(--accent);
  color: var(--text-inverse);
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  align-items: center;
}

.btn-back {
  display: inline-block;
  padding: 4px 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.3px;
}

.btn-back:hover {
  color: var(--text-primary);
}

/* ============================================================
   5. 表单元素
   ============================================================ */
fieldset {
  border: none;
  margin-bottom: var(--spacing-lg);
}

legend {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--border-color);
  display: block;
  width: 100%;
}

input[type="text"] {
  width: 100%;
  max-width: 320px;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-primary);
  background-color: transparent;
  border: none;
  border-bottom: 2px solid var(--border-color);
  outline: none;
  transition: border-color 0.15s;
}

input[type="text"]::placeholder {
  color: var(--text-muted);
}

input[type="text"]:focus {
  border-bottom-color: var(--accent);
}

/* Radio 卡片 */
.radio-group {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-top: var(--spacing-sm);
}

.radio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md) var(--spacing-lg);
  border: 2px solid var(--border-light);
  cursor: pointer;
  transition: border-color 0.15s;
  min-width: 100px;
  text-align: center;
}

.radio-card:hover {
  border-color: var(--border-color);
}

.radio-card input[type="radio"] {
  display: none;
}

.radio-card input[type="radio"]:checked + .radio-card-icon {
  transform: scale(1.15);
}

.radio-card input[type="radio"]:checked ~ .radio-card-label {
  font-weight: 700;
}

.radio-card:has(input[type="radio"]:checked) {
  border-color: var(--text-primary);
  background-color: var(--bg-secondary);
}

.radio-card-icon {
  font-size: 2rem;
  line-height: 1;
  transition: transform 0.15s;
}

.radio-card-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  transition: font-weight 0.15s, color 0.15s;
}

.radio-card:has(input[type="radio"]:checked) .radio-card-label {
  color: var(--text-primary);
}

/* ============================================================
   6. 信息盒子
   ============================================================ */
.info-box {
  padding: var(--spacing-md);
  border: 1px solid var(--border-light);
  background-color: var(--bg-secondary);
  margin: var(--spacing-md) 0;
  font-size: 0.9rem;
  line-height: 1.8;
}

/* ============================================================
   7. 首页 — 茶水间底图 + 软木公告板（便签 / 排班纸）
   ============================================================ */

/* 覆盖 .screen.active 的 block，使整屏为 flex 居中 */
#home-screen.screen.active,
#home-screen.active {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  padding: 5%;
  box-sizing: border-box;
  background-color: #2a2520;
  background-image:
    url("../assets/images/breakroom_bg.jpg"),
    url("../assets/images/breakroom_bg.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 100vh;
  min-height: 100dvh;
}

/* 软木公告板容器（桌面端原版；窄屏覆写见 @media max-width 768px #home-screen） */
.notice-board-wrapper {
  position: relative;
  width: 320px;
  max-width: 100%;
  background-color: #d4a373;
  border: 8px solid #5c4033;
  box-shadow:
    inset 4px 4px 0 rgba(0, 0, 0, 0.2),
    8px 8px 0 rgba(0, 0, 0, 0.4);
  padding: 30px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* 标题便利贴 */
.title-note {
  position: relative;
  background-color: #a2d2ff;
  padding: 15px 10px;
  border: 2px solid #000;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
  transform: rotate(-2deg);
  margin-bottom: 25px;
  text-align: center;
  width: 95%;
  overflow: visible;
}

/* 标题区右下角轻微卷边（残破打工感） */
.title-note::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 6px;
  bottom: 5px;
  width: 18px;
  height: 18px;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 52%, rgba(0, 0, 0, 0.14) 52%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.board-title {
  position: relative;
  z-index: 2;
  margin: 0 0 5px 0;
  font-size: 1.8rem;
  color: #000;
  font-family: var(--font-home-pixel);
  letter-spacing: 0.06em;
  line-height: 1.2;
  font-weight: 700;
  -webkit-font-smoothing: none;
  font-synthesis-weight: none;
}

.board-subtitle {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 0.85rem;
  color: #333;
  font-style: normal;
  line-height: 1.4;
  font-family: var(--font-home-pixel);
  -webkit-font-smoothing: none;
}

/* 纸张按钮区 */
.pin-board-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.paper-btn {
  position: relative;
  display: block;
  width: 90%;
  margin: 10px 0;
  padding: 12px 10px;
  font-family: var(--font-home-pixel);
  font-weight: 700;
  font-size: 1.1rem;
  color: #000;
  border: 2px solid #000;
  cursor: pointer;
  transition: none;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
  -webkit-font-smoothing: none;
  font-synthesis-weight: none;
}

/* 按钮前微型像素风图标（与正文字号协调） */
.paper-btn-icon {
  display: inline-block;
  margin-right: 0.4em;
  font-size: 1.05em;
  line-height: 1;
  vertical-align: -0.12em;
  filter: contrast(1.05);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.08);
}

.paper-btn:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.paper-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.schedule-paper {
  background-color: #fdfd96;
  transform: rotate(1deg);
}

.continue-paper {
  background-color: #e8e4dc;
  transform: rotate(-1deg);
  color: #222;
}

.post-it-pink {
  position: relative;
  transform: rotate(-2deg);
  width: 80%;
  overflow: visible;
  background-color: #ffb7b2;
  /* 右下角折角感：不叠在文字上方 */
  background-image: radial-gradient(
    ellipse 34px 34px at 100% 100%,
    rgba(0, 0, 0, 0.14) 0%,
    rgba(0, 0, 0, 0.06) 45%,
    transparent 70%
  );
}

.warning-paper {
  background-color: #fff;
  color: #c00;
  border: 2px dashed #c00;
  transform: rotate(2deg);
  width: 85%;
}

/* 像素图钉（加大、夸张 + 高光） */
.pin {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
  z-index: 4;
  image-rendering: pixelated;
}

.pin::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15);
}

.red-pin {
  background-color: #e74c3c;
}

.blue-pin {
  background-color: #3498db;
}

.yellow-pin {
  background-color: #f1c40f;
}

/* 封箱胶带：半透明 + 横向细条纹 */
.tape {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-5deg);
  width: 56px;
  height: 24px;
  z-index: 4;
  border: 2px solid rgba(0, 0, 0, 0.35);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.25);
  background-color: rgba(245, 248, 252, 0.72);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.95) 0px,
    rgba(255, 255, 255, 0.95) 2px,
    rgba(200, 210, 225, 0.55) 2px,
    rgba(200, 210, 225, 0.55) 4px,
    rgba(255, 255, 255, 0.85) 4px,
    rgba(255, 255, 255, 0.85) 5px
  );
  image-rendering: pixelated;
}

/* 公告板底部版本信息 */
#home-screen .board-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 2px dashed rgba(0, 0, 0, 0.15);
  width: 100%;
  text-align: center;
}

#home-screen .board-footer .version-info,
#home-screen .board-footer .version-by {
  color: #3d2918;
  text-shadow: none;
  font-family: var(--font-home-pixel);
  -webkit-font-smoothing: none;
}

.version-info {
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  margin-bottom: 0;
}

.version-by {
  margin-top: var(--spacing-xs);
  margin-bottom: 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  font-style: italic;
  opacity: 0.92;
}

/* 覆盖全局 .btn 在首页纸张上的 hover（保持像素按压感） */
#home-screen .paper-btn.btn-primary:hover {
  background-color: #fdfd96;
  color: #000;
}

#home-screen .paper-btn.btn-secondary:hover {
  filter: brightness(0.97);
}

#home-screen .paper-btn.btn-danger:hover {
  background-color: #fff;
  color: #c00;
}

/* ============================================================
   8. 角色创建页 — 入职登记表式（浅色、去装饰、宽表单）
   ============================================================ */

#creation-screen {
  --creation-form-max: 100%;
  --creation-surface: #ffffff;
  --creation-rail: #f3f1ec;
  font-family: var(--font-body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg-primary);
  background-image: none;
}

@media (min-width: 769px) {
  #creation-screen {
    --creation-form-max: min(42rem, 92vw);
    /* 极淡氛围：不抢表单；不需要时可整段注释掉 */
    background-color: #f0ebe3;
    background-image: linear-gradient(
      180deg,
      rgba(245, 240, 232, 0.97) 0%,
      rgba(240, 235, 227, 0.99) 40%,
      rgba(238, 233, 225, 1) 100%
    );
  }
}

/**
 * 仅 .active 时 flex：不可写裸 display:flex，否则会盖掉 .screen { display:none }
 */
#creation-screen.screen.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: clamp(1rem, 4vw, 2rem);
}

#creation-screen .screen-inner {
  width: 100%;
  max-width: var(--creation-form-max);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--spacing-md) 0 var(--spacing-xl);
}

#creation-screen h2,
#creation-screen legend,
#creation-screen .radio-card-label,
#creation-screen .stat-name,
#creation-screen .stat-value,
#creation-screen .placeholder-text,
#creation-screen .info-box {
  color: var(--text-primary);
}

#creation-screen .stat-desc {
  color: var(--text-secondary);
}

#creation-screen a,
#creation-screen .btn-back {
  color: var(--text-secondary);
}

#creation-screen .btn-back:hover {
  color: var(--text-primary);
}

/* 顶栏：与表单同宽，文书感分隔 */
#creation-screen #creation-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  max-width: var(--creation-form-max);
  box-sizing: border-box;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-light);
}

#creation-screen #creation-header h2 {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  line-height: 1.25;
}

#creation-body {
  box-sizing: border-box;
  margin: 0 auto var(--spacing-lg);
  position: relative;
  max-width: var(--creation-form-max);
  width: 100%;
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}

/* 主表单容器：白底细框，无拟物 */
#creation-screen .creation-paper {
  position: relative;
  z-index: 0;
  width: 100%;
  background-color: var(--creation-surface);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
  overflow: visible;
}

/**
 * headType 单选：视觉隐藏，保留 label[for] 与 name/value（cow → horse）。
 */
#creation-screen .creation-head-radio-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

/* 已移除的装饰节点：若旧缓存/HTML 残留，不占布局 */
#creation-screen .creation-id-photo-slot,
#creation-screen .creation-id-photo,
#creation-screen .creation-metal-clip,
#creation-screen .creation-paper-stain,
#creation-screen .creation-signature-block,
#creation-screen .creation-signature-line,
#creation-screen .creation-signature-hoof-stamp,
#creation-screen .creation-hoof-placeholder {
  display: none !important;
}

/* 分区：fieldset 用底边分隔，无贴纸旋转 */
#creation-screen fieldset.form-group {
  margin: 0 0 var(--spacing-lg);
  padding: 0 0 var(--spacing-lg);
  border: none;
  background: transparent;
  border-bottom: 1px solid var(--border-light);
}

#creation-screen fieldset.form-group:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

#creation-screen legend {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  width: 100%;
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  border-bottom: none;
}

#creation-screen .radio-card-label {
  font-size: 1rem;
}

#creation-screen .stat-name {
  font-size: 0.9375rem;
  font-weight: 600;
}

#creation-screen .stat-value {
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: var(--font-mono);
}

#creation-screen .stat-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.35;
  margin-top: 0;
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
}

#creation-screen #input-name {
  max-width: 100%;
  width: 100%;
  min-height: 2.75rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 1.0625rem;
  font-family: var(--font-body);
  color: var(--text-primary);
  padding: 0.625rem 0.75rem;
  box-sizing: border-box;
}

#creation-screen #input-name::placeholder {
  color: var(--text-muted);
}

#creation-screen #input-name:focus {
  outline: none;
  border-color: var(--text-secondary);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}

/* 头套：两列等宽选项卡 */
#creation-head .radio-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: stretch;
}

#creation-head .radio-card {
  position: relative;
  box-sizing: border-box;
  flex: 1 1 calc(50% - var(--spacing-md) / 2);
  min-width: 8rem;
  max-width: none;
  min-height: 5.25rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--border-light);
  background: var(--creation-rail);
  border-radius: 6px;
  box-shadow: none;
}

#creation-screen:has(#creation-head-type-cow:checked) #creation-head label[for="creation-head-type-cow"],
#creation-screen:has(#creation-head-type-horse:checked) #creation-head label[for="creation-head-type-horse"] {
  border-color: var(--border-color);
  background: var(--bg-secondary);
  box-shadow: inset 0 0 0 1px var(--border-light);
}

#creation-screen:has(#creation-head-type-cow:checked) #creation-head label[for="creation-head-type-cow"] .radio-card-label,
#creation-screen:has(#creation-head-type-horse:checked) #creation-head label[for="creation-head-type-horse"] .radio-card-label {
  font-weight: 600;
  color: var(--text-primary);
}

#creation-head .radio-card-icon {
  line-height: 1;
  font-size: 1.5rem;
}

#creation-head .radio-card-label {
  display: block;
  width: 100%;
  text-align: center;
}

/* 职业：桌面两列网格，移动单列；.career-item 为网格单元（≥900px 双列时各占一格） */
#creation-screen #job-options.radio-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
}

#creation-screen #job-options .career-item {
  min-width: 0;
}

@media (min-width: 600px) {
  #creation-screen #job-options.radio-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#creation-screen #job-options .radio-card {
  position: relative;
  display: grid;
  grid-template-columns: 18px auto 1fr;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 3rem;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-light);
  background: var(--creation-rail);
  border-radius: 6px;
  box-shadow: none;
  text-align: left;
}

#creation-screen #job-options .radio-card:hover {
  border-color: var(--border-color);
  background: var(--bg-secondary);
}

#creation-screen #job-options .radio-card::before {
  content: "";
  grid-column: 1;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--creation-surface);
  box-sizing: border-box;
  justify-self: center;
}

#creation-screen #job-options .radio-card .radio-card-icon {
  grid-column: 2;
  font-size: 1.1rem;
}

#creation-screen #job-options .radio-card .radio-card-label {
  grid-column: 3;
  text-align: left;
  font-weight: 500;
  font-size: 0.9375rem;
}

#creation-screen #job-options .radio-card:has(input:checked) {
  border-color: var(--border-color);
  background: var(--bg-secondary);
}

/**
 * 选中：绿底白勾，与左侧空心圆同轴（圆心 = 左 padding + 第一列半宽）
 */
#creation-screen #job-options .radio-card:has(input:checked)::after {
  content: "✓";
  position: absolute;
  left: calc(var(--spacing-md) + 9px);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: var(--status-normal);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#creation-screen #job-options .radio-card:has(input:checked)::before {
  opacity: 0;
}

#creation-screen #job-description.info-box {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-family: var(--font-body);
  margin-top: var(--spacing-md);
  -webkit-font-smoothing: antialiased;
}

#creation-screen #btn-roll-stats {
  width: 100%;
  max-width: 16rem;
  margin-top: var(--spacing-xs);
}

#creation-screen #stats-display .placeholder-text {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

#creation-screen #stats-display .stat-desc {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/**
 * 创建页属性行：首行「名称（定宽列）| 说明（可折行）| 数值」，次行进度条。
 * 名称列固定宽度，使各说明左缘对齐（最长名为「学习力」三字）。
 */
#creation-screen .stat-row {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: var(--spacing-sm);
  row-gap: 0.1875rem;
  align-items: start;
  padding: 0.1875rem 0;
  border-bottom: 1px solid var(--border-light);
}

#creation-screen .stat-row:last-child {
  border-bottom: none;
}

#creation-screen .stat-row::after {
  display: none;
}

#creation-screen .stat-name {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  white-space: nowrap;
}

#creation-screen .stat-value {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  padding-left: var(--spacing-xs);
}

#creation-screen .stat-row .status-bar.creation-stat-bar {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  height: 8px;
  margin-top: 0;
  background-color: var(--border-light);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  overflow: hidden;
}

#creation-screen .stat-row .status-bar.creation-stat-bar .status-bar-fill {
  height: 100%;
  min-width: 0;
  max-width: 100%;
  background-color: var(--text-secondary);
  border-radius: 3px;
  transition: width 0.2s ease;
}

#creation-screen #stats-display,
#creation-screen #stats-display .stat-row,
#creation-screen #stats-display .stat-name,
#creation-screen #stats-display .stat-value,
#creation-screen #stats-display .placeholder-text {
  font-family: var(--font-body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

#creation-screen #creation-footer {
  position: relative;
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
  text-align: center;
  width: 100%;
  max-width: var(--creation-form-max);
  box-sizing: border-box;
}

#creation-screen #btn-start-interview {
  min-width: 12rem;
  max-width: 100%;
  min-height: 48px;
  padding: var(--spacing-sm) var(--spacing-xl);
}

#creation-screen #btn-start-interview.btn-creation-gated {
  opacity: 0.55;
}

#creation-screen #btn-start-interview.btn-creation-gated:hover {
  opacity: 0.72;
}

#creation-screen #btn-start-interview.btn:disabled {
  opacity: 0.4;
}

/* 属性展示（仅创建页使用该类名） */
.stats-grid {
  margin: var(--spacing-xs) 0;
}

#creation-screen #creation-stats legend {
  margin-bottom: var(--spacing-xs);
  padding-bottom: 0;
}

#creation-screen #creation-stats.form-group {
  padding-bottom: var(--spacing-xs);
}

#creation-screen #stats-display.stats-grid:has(.stat-row) {
  margin-top: 0;
  margin-bottom: 0;
}

/**
 * 创建页：≥900px 双列布局。
 * 用 flex+wrap+order 而非 2×2 grid：grid 会令第一行高度=max(左,右)，左侧名字区下方被「垫高」，
 * 造成「初始属性」前大块空白；flex 每列独立堆叠，左列名字紧贴属性。
 * 移动端保持单列，不受影响。
 */
@media (min-width: 900px) {
  #creation-screen {
    --creation-form-max: min(56rem, 94vw);
  }

  #creation-screen.screen.active {
    padding: var(--spacing-sm) clamp(0.75rem, 2.5vw, 1.5rem) var(--spacing-md);
  }

  #creation-screen .screen-inner {
    padding: var(--spacing-sm) 0 var(--spacing-md);
  }

  #creation-screen #creation-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
  }

  #creation-screen #creation-body {
    margin-bottom: var(--spacing-sm);
  }

  #creation-screen #creation-footer {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
  }

  #creation-screen .creation-paper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--spacing-sm) var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-sm);
  }

  /**
   * DOM 顺序为 head→name→stats→job；order 重排为视觉左列 name→stats、右列 head→job。
   */
  #creation-screen .creation-paper > fieldset.form-group {
    flex: 1 1 calc(50% - var(--spacing-lg) / 2);
    max-width: calc(50% - var(--spacing-lg) / 2);
    min-width: 0;
    box-sizing: border-box;
    margin-bottom: 0;
  }

  #creation-screen #creation-name {
    order: 1;
  }

  #creation-screen #creation-head {
    order: 2;
  }

  #creation-screen #creation-stats {
    order: 3;
  }

  #creation-screen #creation-job {
    order: 4;
  }

  /* 列内上下分隔线：细下内边距 */
  #creation-screen .creation-paper #creation-name.form-group,
  #creation-screen .creation-paper #creation-head.form-group {
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-light);
  }

  #creation-screen .creation-paper #creation-name legend,
  #creation-screen .creation-paper #creation-head legend {
    margin-bottom: var(--spacing-sm);
    padding-bottom: 0;
  }

  #creation-screen .creation-paper #creation-stats.form-group,
  #creation-screen .creation-paper #creation-job.form-group {
    padding-bottom: 0;
    border-bottom: none;
  }

  #creation-screen #job-description.info-box {
    margin-top: var(--spacing-sm);
  }

  /* 随机属性按钮在左列可拉满列宽 */
  #creation-screen #btn-roll-stats {
    max-width: 100%;
  }

  /* 职业区在右列略窄时仍保持两列宫格 */
  #creation-screen #job-options.radio-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 头套区略压高度，减轻整页纵向总长 */
  #creation-head .radio-group {
    gap: var(--spacing-sm);
  }

  #creation-head .radio-card {
    min-height: 4.25rem;
  }
}

/* ============================================================
   9. 面试页
   ============================================================ */
#interview-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--border-color);
}

#interview-header h2 {
  font-size: 1.5rem;
  letter-spacing: 2px;
}

#company-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin: var(--spacing-md) 0;
}

/* 答题/结果阶段隐藏公司列表，等价单独一屏；与 max-width 主布局无关，手机端同样生效 */
#interview-body.interview-layout-session #interview-market-panel,
#interview-body.interview-layout-result #interview-market-panel {
  display: none;
}

/* 面试区 */
#interview-area {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-lg);
  border: 2px solid var(--border-color);
}

#interview-company-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

#interview-progress {
  margin-top: var(--spacing-md);
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: right;
}

/* 面试结果 */
#interview-result {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-lg);
  border: 2px solid var(--border-color);
  text-align: center;
}

/**
 * 答题 / 结果（≥769px）：session 为会议室底图 + 居中「三段式」对话条（问题 / 作答 / 评价分离）；
 * result 为较小结果卡。窄屏见 @media (max-width: 768px) 面试区块。
 */
@media (min-width: 769px) {
  /* 面试全屏为列 flex，子项可伸展，session 才能把反馈区压到底部 */
  #interview-screen.screen.active,
  #interview-screen.active {
    display: flex;
    flex-direction: column;
  }

  #interview-screen .screen-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
  }

  #interview-screen.screen.active .screen-inner,
  #interview-screen.active .screen-inner {
    min-height: min(100dvh, 100vh);
  }

  #interview-body.interview-layout-session {
    position: relative;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    padding: 1rem 1rem 1.5rem;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-x: hidden;
    background-color: #2c2824;
    /* JPG 优先（省体积）；无 JPG 时底层 PNG 仍可见（非 breakroom，仅会议室图） */
    background-image:
      url("../assets/images/bg_interview_meeting.jpg"),
      url("../assets/images/bg_interview_meeting.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  /** 会议室底图略压暗，突出中央聚焦卡 */
  #interview-body.interview-layout-session::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    z-index: 1;
    pointer-events: none;
  }

  /* 答题区：占满 session，供 .interview-container 绝对居中定位 */
  #interview-body.interview-layout-session #interview-area {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    flex: 1 1 auto;
    min-height: min(72vh, calc(100dvh - 9.5rem));
    overflow: visible;
  }

  #interview-body.interview-layout-session .interview-container {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    width: min(720px, 92%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-sizing: border-box;
  }

  /** 桌面：公司名与页码同一行（左/右），题干仍在卡内下方 */
  #interview-body.interview-layout-session .interview-session-title-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(120, 96, 76, 0.22);
  }

  #interview-body.interview-layout-session #interview-progress {
    margin: 0;
    flex-shrink: 0;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
    color: #5a4535;
    text-shadow: none;
  }

  /**
   * 单卡收敛：标题行 + 题干 / 选项 / 反馈 同卡内纵向排列。
   */
  #interview-body.interview-layout-session .interview-question {
    background: rgba(245, 240, 232, 0.96);
    border: 2px solid #a99983;
    padding: 18px 20px;
    box-sizing: border-box;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      0 6px 20px rgba(0, 0, 0, 0.18);
  }

  #interview-body.interview-layout-session #interview-company-name {
    margin: 0;
    padding: 0;
    border: none;
    text-align: left;
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35;
    color: #2f241b;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  #interview-body.interview-layout-session #interview-question-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  #interview-body.interview-layout-session .interview-question-text {
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 18px;
    line-height: 1.6;
    color: #2f241b;
    background: transparent;
    border: none;
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }

  #interview-body.interview-layout-session .interview-choice.interview-option {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    text-align: left;
    cursor: pointer;
    background: #e9e1d5;
    border: 2px solid #b3a18c;
    color: #2f241b;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }

  #interview-body.interview-layout-session .interview-choice.interview-option:hover {
    background: #d8cbbb;
    transform: translateY(-1px);
  }

  #interview-body.interview-layout-session .interview-choice.interview-option:active {
    transform: translateY(1px);
  }

  #interview-body.interview-layout-session .interview-choice.interview-option.selected {
    background: #d0c4b2;
    border-color: #6b5a48;
    font-weight: 600;
  }

  #interview-body.interview-layout-session .interview-chosen {
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0 0;
    padding: 14px 16px;
    color: #2f241b;
    background: rgba(233, 225, 213, 0.65);
    border: 2px solid #b3a18c;
    border-left: 4px solid #7a6a58;
    border-radius: 0;
    box-shadow: none;
  }

  #interview-body.interview-layout-session .interview-chosen-text {
    margin: 0 0 6px 0;
  }

  #interview-body.interview-layout-session .interview-flavor {
    color: #5c4f42;
  }

  #interview-body.interview-layout-session .interview-answer {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 16px;
    color: #2a3340;
    background: #e2eaf5;
    border: 2px solid #9eb4cc;
    border-left: 4px solid #3d6ea8;
    border-radius: 0;
    box-shadow: none;
    font-size: 0.95rem;
    line-height: 1.65;
    max-height: min(38vh, 18rem);
    overflow-x: hidden;
    overflow-y: auto;
  }

  #interview-body.interview-layout-session #btn-interview-next {
    display: block;
    width: min(320px, 100%);
    margin: 4px auto 0;
    flex-shrink: 0;
  }

  /* 若需结果专用底图：可改为 bg_interview_result.jpg / .png */
  #interview-body.interview-layout-result {
    position: relative;
    box-sizing: border-box;
    min-height: 78vh;
    padding: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2c2824;
    background-image:
      url("../assets/images/bg_interview_meeting.jpg"),
      url("../assets/images/bg_interview_meeting.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  #interview-body.interview-layout-result #interview-result {
    width: min(78%, 34rem);
    max-width: none;
    margin: 0 auto;
    padding: 1.5rem 1.75rem;
    background: rgba(255, 252, 245, 0.95);
    border: 2px solid var(--border-color);
    border-radius: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    text-align: center;
    flex-shrink: 0;
  }
}

/* ============================================================
   10. 主游戏页 — 像素风视觉小说布局（VN）
   ============================================================ */
/**
 * data-scene / data-avatar / data-time / data-bg 由 GameRender.syncGameScreenScene() 维护。
 * 桌面端：单一 16:9 舞台，底图铺满，HUD/日志/对话框均为舞台内 absolute overlay。
 * 移动端：见 §16，纵向流式，不强制套 overlay。
 */
#game-screen {
  background-color: #e9e4da;
}

#game-screen .screen-inner {
  max-width: 1240px;
  padding: var(--spacing-sm) var(--spacing-md);
  box-sizing: border-box;
}

/* 移动端基线：场景层在文档流中占位；桌面端在 @media (min-width:769px) 中改为 absolute 铺满舞台 */
.game-vn-scene-layer {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.game-vn-stage {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

#game-screen .game-shell.game-vn-root {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  box-sizing: border-box;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

@media (min-width: 769px) {
  #game-screen.screen.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
    padding: clamp(8px, 1.5vh, 20px) clamp(8px, 1.5vw, 16px);
    overflow: hidden;
  }

  /**
   * 游戏视口：定宽 + 16:9，所有浮层相对此盒定位（星露谷式单舞台）。
   */
  #game-screen .screen-inner {
    width: min(1400px, 96vw, calc((100dvh - 40px) * 16 / 9));
    max-width: none;
    aspect-ratio: 16 / 9;
    max-height: calc(100dvh - 40px);
    margin: 0 auto;
    padding: 0;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  }

  #game-screen .game-shell.game-vn-root {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    min-height: 0;
  }

  /**
   * 舞台 = 唯一定位上下文（relative + 明确高度）；场景层与对话区均不占文档流高度。
   */
  .game-vn-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    border-radius: inherit;
  }

  /**
   * 桌面舞台：日志 DOM 位于 .game-vn-status-gap 内（便于移动端插在状态与事件之间）。
   * 壳不占高度、不设定位，避免成为 #log-panel 的包含块；日志仍相对 .game-vn-stage 绝对定位。
   */
  .game-vn-status-gap {
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    overflow: visible;
    pointer-events: none;
  }

  .game-vn-status-gap #log-panel.game-vn-log-panel {
    pointer-events: auto;
  }

  .game-vn-scene-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    width: auto;
    height: auto;
    margin: 0;
  }

  .game-vn-scene-layer .game-vn-bg,
  .game-vn-scene-layer .game-vn-characters,
  .game-vn-scene-layer .game-vn-hud {
    pointer-events: none;
  }

  .game-vn-scene-layer .game-vn-panel {
    pointer-events: auto;
  }

  /* HUD：相对舞台绝对定位，不再用 flex 占列 */
  .game-vn-hud {
    display: block;
    padding: 0;
  }

  /**
   * 桌面舞台 HUD：实体像素面板（不透明、无父级 opacity、无毛玻璃）。
   * 状态栏配色见全局「#game-screen .game-vn-hud #status-panel」；此处仅日志区用 #cdb79e。
   */
  #game-screen .game-vn-hud #status-panel.game-vn-status-panel,
  #game-screen .game-vn-stage #log-panel.game-vn-log-panel {
    position: absolute;
    z-index: 20;
    box-sizing: border-box;
    opacity: 1;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    filter: none;
    margin: 0;
    float: none;
    clear: none;
    flex: unset;
    align-self: auto;
    transform: none;
  }

  #game-screen .game-vn-stage #log-panel.game-vn-log-panel {
    background: #cdb79e;
    border: 2px solid #8e735b;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 2px 0 rgba(90, 66, 48, 0.9),
      0 6px 18px rgba(0, 0, 0, 0.18);
    color: #2f241b;
  }

  #game-screen .game-vn-hud #status-panel.game-vn-status-panel {
    top: 18px;
    left: 18px;
    right: auto;
    bottom: auto;
    width: 178px;
    max-width: 178px;
    padding: 12px 12px 14px;
  }

  #game-screen .game-vn-stage #log-panel.game-vn-log-panel {
    top: 18px;
    right: 18px;
    left: auto;
    bottom: auto;
    width: 315px;
    max-width: 315px;
    max-height: min(42vh, 280px);
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: none;
    -webkit-overflow-scrolling: touch;
  }

  #game-screen .game-vn-stage #log-panel #log-entries.vn-log-entries,
  #game-screen .game-vn-stage #log-panel .log-body,
  #game-screen .game-vn-stage #log-panel .event-log-body,
  #game-screen .game-vn-stage #log-panel .log-list {
    background: #d8c4af;
    border: 1px solid #9e8166;
    color: #3a2b20;
  }

  #game-screen .game-vn-stage #log-panel #log-entries.vn-log-entries {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px 8px;
    box-sizing: border-box;
  }

  #game-screen .game-vn-stage #log-panel .vn-log-toolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 8px;
    flex-shrink: 0;
    padding: 6px 8px;
    margin: 0 0 8px;
    background: #8f7358;
    border: 1px solid #6f5743;
    border-radius: 0;
    box-sizing: border-box;
  }

  #game-screen .game-vn-stage #log-panel .vn-log-toolbar .panel-title {
    color: #fff8ee;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  #game-screen .game-vn-stage #log-panel .vn-log-toolbar .vn-log-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 2px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.35;
    color: #3a2b20;
  }

  #game-screen .game-vn-stage #log-panel .vn-log-toolbar .vn-log-meta > span {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  #game-screen
    .game-vn-stage
    #log-panel
    .vn-log-toolbar
    .vn-log-meta
    > span
    + span::before {
    content: '·';
    margin-right: 4px;
    margin-left: 2px;
    opacity: 0.75;
    color: rgba(58, 43, 32, 0.65);
  }

  #game-screen .game-vn-stage #log-panel .vn-log-toolbar .vn-log-toggle {
    flex: 0 0 auto;
    margin-left: auto;
    background: #b89678;
    color: #fffaf3;
    border: 1px solid #866951;
  }

  #game-screen .game-vn-stage #log-panel .vn-log-toolbar .vn-log-toggle:hover {
    background: #a98566;
  }

  #game-screen .game-vn-stage #log-panel .vn-log-toolbar #game-day,
  #game-screen .game-vn-stage #log-panel .vn-log-toolbar #game-period,
  #game-screen .game-vn-stage #log-panel .vn-log-toolbar .vn-log-job,
  #game-screen .game-vn-stage #log-panel .vn-log-toolbar .vn-log-company {
    color: #3a2b20;
  }

  #game-screen .game-vn-stage #log-panel.vn-log-collapsed .vn-log-toolbar {
    margin-bottom: 0;
  }

  /* 状态栏文字/顶栏：与全局 #game-screen 状态栏暖色块一致 */
  #game-screen .game-vn-hud #status-panel .status-panel-topline {
    border-bottom-color: rgba(59, 44, 32, 0.22);
  }

  #game-screen .game-vn-hud #status-panel .status-money-inline,
  #game-screen .game-vn-hud #status-panel #player-name-display {
    color: #3b2c20;
  }

  #game-screen .game-vn-hud #status-panel .status-label {
    color: #4a382b;
  }

  #game-screen .game-vn-hud #status-panel .status-value {
    color: #5a4535;
  }

  #game-screen .game-vn-stage #log-panel .log-entry,
  #game-screen .game-vn-stage #log-panel .log-text,
  #game-screen .game-vn-stage #log-panel .log-time {
    color: #3a2b20;
  }

  #game-screen .game-vn-stage #log-panel .placeholder-text {
    color: #5c4a3c;
  }

  #game-screen .vn-dialog-skin .vn-choice-result #btn-continue-game.event-continue-btn {
    align-self: center;
    margin-top: 0;
  }

  #game-screen .event-continue-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    width: 100%;
  }

  #game-screen .vn-dialog-skin .event-continue-btn.btn,
  #game-screen .vn-dialog-skin .event-continue-btn.btn-primary {
    min-width: 180px;
    width: auto;
    height: 52px;
    padding: 0 28px;
    background: #1f1f1f;
    color: #fffaf2;
    border: 2px solid #4d4d4d;
    border-radius: 0;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 2px 0 rgba(0, 0, 0, 0.35);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    image-rendering: pixelated;
  }

  #game-screen .vn-dialog-skin .event-continue-btn:hover {
    transform: translateY(-1px);
  }

  #game-screen .vn-dialog-skin .event-continue-btn:active {
    transform: translateY(1px);
  }

  /* 底部对话 overlay：相对 .game-vn-stage，与场景层并列、不占流 */
  #game-screen .game-vn-stage > .game-vn-dialog-region {
    position: absolute;
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
    bottom: clamp(6px, 1.5vh, 16px);
    width: min(78%, 920px);
    max-width: 920px;
    max-height: min(40%, 320px);
    z-index: 3;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
    box-sizing: border-box;
    flex: unset;
  }

  #game-screen .game-vn-stage #event-panel.game-vn-event-panel {
    position: static;
    float: none;
    width: 100%;
    max-width: none;
    max-height: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
    border: none;
  }

  #game-screen .game-vn-dialog-region .vn-dialog-skin {
    width: 100%;
    max-width: 100%;
    margin: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  /**
   * 结果态（.event-dialog-card--result）：按内容收缩，不出现区域滚动条，继续键紧跟效果标签。
   * 抵消本文件中 #game-screen .game-vn-stage > .game-vn-dialog-region 的 max-height + overflow-y:auto。
   */
  #game-screen .game-vn-stage > .game-vn-dialog-region:has(.vn-dialog-skin.event-dialog-card--result) {
    max-height: none;
    overflow-y: visible;
    overflow-x: hidden;
  }

  #game-screen .vn-dialog-skin.event-dialog-card--result {
    padding: 18px 24px 18px;
    height: auto;
    min-height: 0;
    max-height: none;
    flex: 0 0 auto;
    gap: 0;
  }

  #game-screen .vn-dialog-skin.event-dialog-card--result .vn-event-content {
    margin-bottom: 0;
    flex: 0 0 auto;
  }

  #game-screen .vn-dialog-skin.event-dialog-card--result #event-title {
    margin: 0 0 10px;
    padding: 0 0 8px;
  }

  #game-screen .vn-dialog-skin.event-dialog-card--result #event-description {
    margin-bottom: 0;
  }

  #game-screen .vn-dialog-skin.event-dialog-card--result .vn-choice-result.event-result {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 12px 0 0;
    padding: 10px 0 0;
    border-top: 1px dashed rgba(120, 96, 76, 0.22);
    flex: 0 0 auto;
  }

  #game-screen .vn-dialog-skin.event-dialog-card--result .event-result-text {
    color: #3a2c20;
    line-height: 1.8;
    font-size: 16px;
    font-style: italic;
    margin: 0 0 10px;
  }

  #game-screen .vn-dialog-skin.event-dialog-card--result .event-result-text p {
    margin: 0 0 10px;
  }

  #game-screen .vn-dialog-skin.event-dialog-card--result .event-result-text p:last-child {
    margin-bottom: 0;
  }

  #game-screen .vn-dialog-skin.event-dialog-card--result .event-effects {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
  }

  #game-screen .vn-dialog-skin.event-dialog-card--result #check-detail:empty {
    display: none;
    margin: 0;
    padding: 0;
  }

  #game-screen .vn-dialog-skin.event-dialog-card--result #check-detail:not(:empty) {
    margin: 0;
    font-size: 0.8rem;
  }

  #game-screen .vn-dialog-skin.event-dialog-card--result .event-dialog-actions,
  #game-screen .vn-dialog-skin.event-dialog-card--result .event-continue-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 18px;
    margin-bottom: 0;
    padding: 0;
    border-top: none;
    background: transparent;
  }

  #game-screen .vn-dialog-skin.event-dialog-card--result .event-continue-btn.btn,
  #game-screen .vn-dialog-skin.event-dialog-card--result .event-continue-btn.btn-primary {
    font-size: 20px;
  }

  .game-vn-characters {
    padding: 0 4% min(10%, 36px);
  }

  .game-vn-sprite {
    height: min(44%, 280px);
    max-width: 40%;
  }
}

/* ---------- z0 场景底（铺满 scene-layer） ---------- */
.game-vn-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #2a2622;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* 场景底图 url：≤900px 写入 #mobile-scene-bg，≥901px 写入 #game-vn-bg（render.js applyGameVnBackground） */

/* 桌面端：移动端全屏底壳不参与布局（子级 .game-vn-stage 仍直接参与 .game-shell 的 16:9 舞台） */
@media (min-width: 901px) {
  #game-screen .mobile-game-shell {
    display: contents !important;
  }

  #game-screen .mobile-scene-bg {
    display: none !important;
  }

  #game-screen .mobile-scene-overlay {
    display: none !important;
  }

  #game-screen .mobile-game-content {
    display: contents !important;
  }

  /* 主流程对话：移动端拆卡壳在桌面不参与盒模型，保持原 #vn-dialog-skin 子级关系 */
  #game-screen .vn-mobile-event-card,
  #game-screen .vn-mobile-option-card {
    display: contents !important;
  }

  /* 会议室头图仅用于 ≤900px；桌面仍用 #interview-body.session 整区底图 */
  #interview-screen .interview-mobile-hero {
    display: none !important;
  }
}

/* ---------- z1 立绘 ---------- */
.game-vn-characters {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: min(3vw, 1.25rem);
  padding: 0 5% min(6vh, 48px);
  box-sizing: border-box;
  pointer-events: none;
}

.game-vn-characters:has(.game-vn-sprite-npc:not(.hidden)) {
  justify-content: space-between;
}

.game-vn-sprite {
  height: min(40vh, 300px);
  width: auto;
  max-width: 42%;
  object-fit: contain;
  flex-shrink: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}

.game-vn-sprite.hidden {
  display: none !important;
}

/* ---------- z2 HUD：状态左上 + 日志右上 ---------- */
.game-vn-hud {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 12px;
  box-sizing: border-box;
  pointer-events: none;
  gap: var(--spacing-sm);
}

.game-vn-panel {
  pointer-events: auto;
}

.game-vn-status-panel {
  max-width: min(300px, 46vw);
  padding: 10px 12px;
  border: 2px solid rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  background: rgba(22, 20, 18, 0.58);
  color: #f5f0e8;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.game-vn-status-panel .status-panel-topline {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.game-vn-status-panel .status-money-inline,
.game-vn-status-panel #player-name-display {
  color: #f5f0e8;
}

.game-vn-log-panel {
  max-width: min(340px, 48vw);
  max-height: min(40vh, 300px);
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  border: 2px solid rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  background: rgba(22, 20, 18, 0.55);
  color: #f0ebe3;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.vn-log-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.game-vn-log-panel .panel-title {
  margin: 0;
  padding: 0 0 4px;
  border-bottom: none;
  font-size: 0.72rem;
  color: rgba(245, 240, 232, 0.75);
}

.vn-log-toggle {
  font-family: var(--font-body);
  font-size: 0.7rem;
  padding: 4px 8px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(245, 240, 232, 0.95);
}

.vn-log-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
}

.vn-log-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 0.72rem;
  margin: 6px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 600;
}

#game-day {
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.92);
}

#game-period {
  font-family: var(--font-heading);
  color: rgba(255, 255, 255, 0.88);
}

.vn-log-job,
.vn-log-company {
  color: rgba(220, 215, 205, 0.85);
  font-weight: 500;
}

#log-entries.vn-log-entries {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#log-panel.vn-log-collapsed #log-entries {
  display: none;
}

#log-panel.vn-log-collapsed {
  max-height: none;
}

/**
 * 桌面端（≥901px）：移动端专用 `#mobile-log-info-strip`（含 `#log-toolbar-meta`）不参与布局
 */
@media (min-width: 901px) {
  #mobile-log-info-strip.mobile-log-info-strip {
    display: none !important;
  }

  #mobile-survival-progress.mobile-survival-progress {
    display: none !important;
  }

  /**
   * 桌面舞台日志：恢复完整四边外框（769+ 基线曾写 border-left:none）。
   */
  #game-screen .game-vn-stage #log-panel.game-vn-log-panel {
    border-left: 2px solid #8e735b;
  }

  /**
   * 展开态：标题栏单行（日志 + 元信息 + 收起），避免按钮落到第二行；略加宽度以利用一行排下。
   */
  #game-screen .game-vn-stage #log-panel.game-vn-log-panel:not(.vn-log-collapsed) .vn-log-toolbar {
    flex-wrap: nowrap;
  }

  #game-screen .game-vn-stage #log-panel.game-vn-log-panel:not(.vn-log-collapsed) .vn-log-toolbar .vn-log-meta {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  /**
   * 桌面端日志：折叠时仅一条紧凑栏；配色与展开的 #log-entries 明细区一致（浅底深字），不用深棕顶栏。
   */
  #game-screen .game-vn-stage #log-panel.game-vn-log-panel.vn-log-collapsed {
    max-height: none;
    width: min(400px, max(268px, 34vw));
    max-width: min(420px, calc(100vw - 140px));
    padding: 5px 10px 6px;
    background: #d8c4af;
    border-color: #9e8166;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 2px 0 rgba(90, 66, 48, 0.75),
      0 5px 14px rgba(0, 0, 0, 0.14);
    color: #3a2b20;
  }

  #game-screen .game-vn-stage #log-panel.game-vn-log-panel.vn-log-collapsed .vn-log-toolbar {
    background: #d8c4af;
    border: 1px solid #9e8166;
    margin: 0;
    padding: 5px 7px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }

  #game-screen .game-vn-stage #log-panel.game-vn-log-panel.vn-log-collapsed .vn-log-toolbar .panel-title {
    color: #3a2b20;
  }

  #game-screen .game-vn-stage #log-panel.game-vn-log-panel.vn-log-collapsed .vn-log-toolbar .vn-log-toggle {
    background: #cdb79e;
    color: #3a2b20;
    border: 1px solid #8e735b;
  }

  #game-screen .game-vn-stage #log-panel.game-vn-log-panel.vn-log-collapsed .vn-log-toolbar .vn-log-toggle:hover {
    background: #c4ad91;
    color: #2a1f18;
    border-color: #7a634e;
  }

  #game-screen .game-vn-stage #log-panel.game-vn-log-panel:not(.vn-log-collapsed) {
    max-height: min(36vh, 248px);
    width: min(400px, max(300px, 38vw));
    max-width: min(440px, calc(100vw - 140px));
  }
}

/* 左侧状态面板（#status-panel 在 HUD 内） */
#status-panel {
  padding: 0;
  border: none;
  background: transparent;
}

/**
 * 主流程状态栏：暖色卡片 + 暖灰棕轨道（覆盖 .game-vn-root 黑底与 pixel_bar_track）。
 * 类名与 render.js 一致：.status-row / .status-label / .status-bar / .status-bar-fill.bar-*。
 */
#game-screen .game-vn-hud #status-panel.game-vn-status-panel {
  background: #d8c3ab;
  border: 2px solid #8c7159;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 0 rgba(101, 76, 57, 0.85),
    0 6px 14px rgba(0, 0, 0, 0.14);
  color: #3b2c20;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#game-screen .game-vn-hud #status-panel .status-panel-topline,
#game-screen .game-vn-hud #status-panel .status-top,
#game-screen .game-vn-hud #status-panel .status-header {
  color: #3b2c20;
}

#game-screen .game-vn-hud #status-panel #player-identity,
#game-screen .game-vn-hud #status-panel #player-head-icon {
  color: inherit;
}

#game-screen .game-vn-hud #status-panel .status-tag.status-normal {
  background: #c8d9b2;
  color: #355126;
  border: 1px solid #6f8b59;
}

#game-screen .game-vn-hud #status-panel .status-tag.status-tired {
  background: #e8d9a8;
  color: #6b5a28;
  border: 1px solid #a68b3a;
}

#game-screen .game-vn-hud #status-panel .status-tag.status-overwork {
  background: #f0d4c4;
  color: #8b4a2a;
  border: 1px solid #c47a52;
}

#game-screen .game-vn-hud #status-panel .status-tag.status-critical {
  background: #f0c8c8;
  color: #7a2525;
  border: 1px solid #b84a4a;
}

#game-screen .game-vn-hud #status-panel .status-row {
  display: grid;
  grid-template-columns: 38px 1fr 32px;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
}

#game-screen .game-vn-hud #status-panel .status-label {
  color: #4a382b;
  font-weight: 600;
}

#game-screen .game-vn-hud #status-panel .status-value {
  color: #5a4535;
  text-align: right;
}

#game-screen .game-vn-hud #status-panel .status-money-inline {
  color: #3b2c20;
}

#game-screen .game-vn-hud #status-panel #player-name-display {
  color: #3b2c20;
}

/**
 * 桌面端（≥901px）状态栏：优先展示「Day X / max」+ 存活绿条，标签与存款与同日行；身份与属性条为次级信息。
 */
@media (min-width: 901px) {
  /**
   * 横向卡片：加宽、压低高度，减轻小屏笔记本上状态区与对白叠层。
   * 顶栏单行（身份 | 天数 | 标签 | 存款）、存活标签与条同排、六维三列网格。
   */
  #game-screen .game-vn-hud #status-panel.game-vn-status-panel {
    width: min(400px, max(292px, 36vw));
    max-width: min(440px, calc(100vw - 140px));
    box-sizing: border-box;
  }

  #game-screen .game-vn-hud #status-panel .status-panel-topline {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto auto;
    grid-template-rows: auto;
    grid-template-areas: 'identity survday statetag money';
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(59, 44, 32, 0.2);
  }

  #game-screen .game-vn-hud #status-panel .status-survival-daymax {
    grid-area: survday;
    font-family: var(--font-home-pixel);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #2a1e15;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    -webkit-font-smoothing: none;
    font-synthesis-weight: none;
  }

  #game-screen .game-vn-hud #status-panel .status-panel-topline > #danger-tag {
    grid-area: statetag;
    justify-self: end;
    margin: 0;
  }

  #game-screen .game-vn-hud #status-panel .status-panel-topline > .status-money-inline {
    grid-area: money;
    justify-self: end;
    margin-left: 0;
    font-size: 0.7rem;
  }

  #game-screen .game-vn-hud #status-panel .status-panel-topline > #player-identity {
    grid-area: identity;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 0 0 auto;
    max-width: min(8.5rem, 40%);
  }

  /**
   * 桌面状态栏：缩小 🐂/🐴 与昵称，避免占位过大（移动端 ≤900px 另有一套规则）。
   */
  #game-screen .game-vn-hud #status-panel #player-head-icon {
    font-size: 0.98rem;
    line-height: 1;
    flex: 0 0 auto;
  }

  #game-screen .game-vn-hud #status-panel #player-name-display {
    font-family: var(--font-home-pixel);
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.03em;
    -webkit-font-smoothing: none;
    font-synthesis-weight: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 0 0 auto;
  }

  #game-screen .game-vn-hud #status-panel .status-survival-progress-wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(59, 44, 32, 0.16);
  }

  #game-screen .game-vn-hud #status-panel .status-survival-progress-label {
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(59, 44, 32, 0.68);
    font-family: var(--font-home-pixel);
    -webkit-font-smoothing: none;
    white-space: nowrap;
  }

  #game-screen .game-vn-hud #status-panel #status-bars.game-vn-status-bars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px 8px;
    align-items: start;
  }

  #game-screen .game-vn-hud #status-panel .status-row {
    grid-template-columns: 28px minmax(0, 1fr) 24px;
    gap: 3px 4px;
    font-size: 0.62rem;
    min-width: 0;
  }

  #game-screen .game-vn-hud #status-panel .status-survival-progress-track {
    height: 5px;
    border-radius: 999px;
    background: rgba(59, 44, 32, 0.14);
    overflow: hidden;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
  }

  /**
   * 宽度由 JS 设置；勿对 width 使用 !important。
   */
  #game-screen .game-vn-hud #status-panel .status-survival-progress-fill {
    width: 0%;
    height: 100%;
    min-height: 3px;
    border-radius: 999px;
    background-color: #7ed957;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: width 0.42s ease-out;
    box-sizing: border-box;
  }
}

#game-screen .game-vn-hud #status-panel .status-bar,
#game-screen .game-vn-hud #status-panel .bar-track,
#game-screen .game-vn-hud #status-panel .pixel-bar-track {
  position: relative;
  height: 10px;
  background: #7f6a58 !important;
  background-image: none !important;
  border: 1px solid #5f4d3f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16);
  overflow: hidden;
  box-sizing: border-box;
  image-rendering: auto;
}

@media (min-width: 901px) {
  #game-screen .game-vn-hud #status-panel .status-bar,
  #game-screen .game-vn-hud #status-panel .bar-track,
  #game-screen .game-vn-hud #status-panel .pixel-bar-track {
    height: 7px;
  }
}

#game-screen .game-vn-hud #status-panel .status-bar-fill {
  height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  transition: width 0.3s ease;
}

#game-screen .game-vn-hud #status-panel .status-bar-fill.bar-health {
  background: #7fae68;
}

#game-screen .game-vn-hud #status-panel .status-bar-fill.bar-stress {
  background: #d2865c;
}

#game-screen .game-vn-hud #status-panel .status-bar-fill.bar-mood {
  background: #6f9bc5;
}

#game-screen .game-vn-hud #status-panel .status-bar-fill.bar-fatigue {
  background: #bba14e;
}

#game-screen .game-vn-hud #status-panel .status-bar-fill.bar-skill {
  background: #7d6cc8;
}

#game-screen .game-vn-hud #status-panel .status-bar-fill.bar-performance {
  background: #c97845;
}

/* 顶栏：头像名 + 危险标签 + 存款（手机与桌面共用，列宽由侧栏决定） */
.status-panel-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs) var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-light);
}

#status-panel .status-panel-topline .status-tag {
  margin-bottom: 0;
}

.status-money-inline {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-primary);
  white-space: nowrap;
}

#player-identity {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

#player-head-icon {
  font-size: 1.5rem;
}

#player-name-display {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
}

/* 状态标签 */
.status-tag {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  border: 1px solid;
  margin-bottom: var(--spacing-md);
}

.status-normal {
  color: var(--status-normal);
  border-color: var(--status-normal);
}

.status-tired {
  color: var(--status-tired);
  border-color: var(--status-tired);
}

.status-overwork {
  color: var(--status-overwork);
  border-color: var(--status-overwork);
}

.status-critical {
  color: var(--status-critical);
  border-color: var(--status-critical);
  animation: pulse-danger 1.5s ease-in-out infinite;
}

@keyframes pulse-danger {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* 状态条（主流程 HUD 内为纵向像素条；无 pixel_bar_track 时仍有深色槽） */
#status-bars,
#status-bars.game-vn-status-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.game-vn-root .status-row {
  display: grid;
  grid-template-columns: 38px 1fr 34px;
  align-items: center;
  gap: 4px 6px;
  font-size: 0.72rem;
}

.status-row {
  display: grid;
  grid-template-columns: 40px 1fr 32px;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.8rem;
}

.status-label {
  color: var(--text-secondary);
  font-weight: 600;
}

.game-vn-root .status-label {
  color: rgba(255, 255, 255, 0.78);
}

.status-bar {
  height: 8px;
  background-color: var(--border-light);
  overflow: hidden;
}

.game-vn-root .status-bar {
  height: 11px;
  overflow: hidden;
  background-color: #1a1816;
  background-image: url("../assets/images/pixel_bar_track.png");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 100%;
  border: 2px solid #0a0a0a;
  box-sizing: border-box;
  image-rendering: pixelated;
}

.status-bar-fill {
  height: 100%;
  background-color: var(--text-secondary);
  transition: width 0.3s ease;
}

/* 状态条颜色变体 */
.status-bar-fill.bar-health {
  background-color: var(--status-normal);
}

.status-bar-fill.bar-stress {
  background-color: var(--status-overwork);
}

.status-bar-fill.bar-mood {
  background-color: #5b7ea1;
}

.status-bar-fill.bar-skill {
  background-color: #6a5acd;
}

.status-bar-fill.bar-fatigue {
  background-color: var(--status-tired);
}

.status-bar-fill.bar-performance {
  background-color: var(--accent-light);
}

.status-value {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-primary);
}

.game-vn-root .status-value {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.7rem;
}

/* ---------- z3 底部对话框 + 选项（桌面 overlay 见 min-width 769；移动端流式见 §16） ---------- */
.game-vn-dialog-region {
  box-sizing: border-box;
  z-index: 1;
}

@media (max-width: 768px) {
  .game-vn-dialog-region {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    padding: var(--spacing-sm) 0 0;
  }
}

#event-panel.game-vn-event-panel {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: transparent;
  border: none;
}

.vn-dialog-skin {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(14px, 2.8vw, 26px) clamp(16px, 3vw, 32px) clamp(16px, 3vw, 28px);
  background-color: rgba(252, 249, 242, 0.96);
  background-image: url("../assets/images/dialog_box.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid rgba(30, 30, 30, 0.65);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.vn-event-content {
  margin-bottom: 0;
}

#event-title {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  margin: 0 0 var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--text-primary);
}

#event-description,
.vn-event-description {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-primary);
}

#choice-buttons.vn-choice-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
  margin-top: 12px;
}

.btn-choice {
  display: block;
  width: 100%;
  padding: 10px var(--spacing-md);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border-light);
  background-color: transparent;
  color: var(--text-primary);
  transition: border-color 0.15s, background-color 0.15s, filter 0.15s;
}

.btn-choice-vn {
  flex: 1 1 min(200px, 46%);
  max-width: 360px;
  min-height: 44px;
  text-align: center;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 10px 14px;
  box-sizing: border-box;
  background-color: rgba(245, 241, 232, 0.95);
  background-image: url("../assets/images/choice_box.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid rgba(35, 35, 35, 0.55);
  color: var(--text-primary);
}

.btn-choice-vn:hover {
  border-color: var(--text-primary);
  filter: brightness(1.03);
  background-color: rgba(255, 252, 245, 0.98);
}

.btn-choice-vn:active {
  filter: brightness(0.97);
}

/* 选项按钮内「（存款 ±N）」备注，略弱化以免抢主文案 */
.choice-money-hint {
  display: inline-block;
  margin-left: 0.35em;
  font-weight: 500;
  font-size: 0.88em;
  opacity: 0.9;
  color: rgba(55, 48, 40, 0.72);
}

.btn-choice:hover {
  border-color: var(--border-color);
  background-color: var(--bg-secondary);
}

.btn-choice:active {
  background-color: var(--border-light);
}

/**
 * 选择结果与选项同处 dialog 皮肤内，仅分隔线，避免第二张「白卡片」。
 * 继续按钮放在 .event-continue-row 内居中，勿对整块写 opacity（会冲淡文字）。
 */
.vn-dialog-skin .vn-choice-result {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-xs);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: var(--spacing-sm) 0 0;
  padding: var(--spacing-sm) 0 0;
  border-top: 1px dashed rgba(0, 0, 0, 0.2);
  background: transparent;
  border-left: none;
  border-right: none;
  border-bottom: none;
  box-shadow: none;
}

.vn-dialog-skin .vn-choice-result.event-result {
  gap: 18px;
}

.event-continue-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
  width: 100%;
}

/* 选择结果 */
#choice-result,
#choice-result.vn-choice-result {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

#result-text {
  font-size: 0.95rem;
  line-height: 1.9;
  margin-bottom: var(--spacing-md);
  font-style: italic;
}

#result-changes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.change-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  font-weight: 600;
  border: 1px solid;
}

.change-positive {
  color: var(--status-normal);
  border-color: var(--status-normal);
}

.change-negative {
  color: var(--accent);
  border-color: var(--accent);
}

.change-neutral {
  color: var(--text-muted);
  border-color: var(--border-light);
}

#check-detail {
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  margin-bottom: var(--spacing-md);
}

#choice-result .btn:not(.event-continue-btn) {
  margin-top: var(--spacing-sm);
}

#choice-result .event-continue-btn {
  margin-top: 0;
}

/* 主流程日志仅 #game-screen .game-vn-log-panel，勿再用裸 #log-panel 覆盖 VN 样式 */

.panel-title {
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--border-light);
  text-transform: uppercase;
}

#log-entries {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.log-entry {
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px dotted var(--border-light);
  font-size: 0.8rem;
  line-height: 1.5;
}

.log-time {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.log-text {
  color: var(--text-secondary);
}

/* ============================================================
   11. 结局页
   ============================================================ */
#ending-screen {
  background-color: var(--bg-dark);
  color: var(--text-inverse);
}

#ending-screen .screen-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  text-align: center;
  max-width: 640px;
  box-sizing: border-box;
}

#ending-header {
  margin-bottom: var(--spacing-xl);
}

#ending-title {
  font-size: 2.2rem;
  letter-spacing: 4px;
  border-bottom: 2px solid var(--text-inverse);
  padding-bottom: var(--spacing-sm);
}

/* 结局标签（主标签 + 副标签） */
.ending-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}

.ending-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(245, 240, 232, 0.28);
  color: rgba(245, 240, 232, 0.86);
  background: rgba(245, 240, 232, 0.08);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}

.ending-tag--main {
  border-color: var(--ending-accent, rgba(245, 240, 232, 0.4));
  color: var(--ending-accent, rgba(245, 240, 232, 0.9));
  background: rgba(245, 240, 232, 0.06);
}

.ending-tag--sub {
  opacity: 0.95;
}

.ending-reincarnation-archive {
  width: 60%;
  max-width: 28rem;
  padding: 14px 16px 12px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid rgba(245, 240, 232, 0.25);
  background: rgba(216, 196, 175, 0.16);
  color: rgba(245, 240, 232, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 26px rgba(0, 0, 0, 0.18);
  position: relative;
  /* 与上方属性卡片、下方「重新开始/返回首页」保持等距离 */
  margin: 0 0 var(--spacing-md);
  align-self: center;
}

/* 毛边/纸屑感：上缘小锯齿 */
.ending-reincarnation-archive::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: -3px;
  height: 6px;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.24) 0,
    rgba(255, 255, 255, 0.24) 2px,
    transparent 2px,
    transparent 6px
  );
  opacity: 0.35;
  pointer-events: none;
}

.ending-reincarnation-archive-main {
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 0.92rem;
  text-align: center;
  line-height: 1.2;
}

.ending-reincarnation-archive-sub {
  margin-top: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(245, 240, 232, 0.62);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .ending-reincarnation-archive {
    width: 100%;
    padding: 12px 14px 10px;
    border-radius: 10px;
  }

  .ending-reincarnation-archive-main {
    font-size: 0.86rem;
  }

  .ending-reincarnation-archive-sub {
    font-size: 0.66rem;
  }
}

.ending-text {
  font-size: 1rem;
  line-height: 2.2;
  margin-bottom: var(--spacing-lg);
  white-space: pre-line;
  color: rgba(245, 240, 232, 0.85);
}

.ending-epitaph {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(245, 240, 232, 0.55);
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-md) var(--spacing-lg);
  border-left: 3px solid rgba(245, 240, 232, 0.3);
}

.ending-afterlife {
  margin-top: 28px;
  padding: 20px 18px;
  background: #1a1a1a;
  color: #ccc;
  border-radius: 8px;
  font-size: 0.92em;
  line-height: 2;
  white-space: pre-line;
  border-top: 1px solid #333;
}

#ending-screen .info-box {
  background-color: rgba(245, 240, 232, 0.08);
  border-color: rgba(245, 240, 232, 0.2);
  color: rgba(245, 240, 232, 0.7);
  text-align: left;
  width: 100%;
  margin-bottom: var(--spacing-xl);
}

/* 仅收紧「属性+副标签」与按钮之间的间距，让按钮视觉上居中 */
#ending-screen #ending-stats-summary.info-box {
  margin-bottom: var(--spacing-md);
}

#ending-footer {
  flex-direction: row;
  gap: var(--spacing-md);
}

#ending-screen .btn {
  border-color: rgba(245, 240, 232, 0.5);
  color: var(--text-inverse);
}

#ending-screen .btn:hover {
  background-color: var(--text-inverse);
  color: var(--bg-dark);
}

#ending-screen .btn-primary {
  background-color: var(--text-inverse);
  color: var(--bg-dark);
  border-color: var(--text-inverse);
}

#ending-screen .btn-primary:hover {
  background-color: transparent;
  color: var(--text-inverse);
}

/* ============================================================
   12. 弹层
   ============================================================ */
/* ============================================================
   Toast（底部轻提示）
   ============================================================ */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: max(1.1rem, env(safe-area-inset-bottom, 0px));
  z-index: 2000;
  transform: translateX(-50%) translateY(150%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.28s ease;
  max-width: min(92vw, 22rem);
}

.toast-host.toast-host--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast-text {
  display: block;
  padding: 0.55rem 1rem;
  background: rgba(42, 38, 34, 0.94);
  color: var(--bg-primary);
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.45;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-overlay.hidden {
  display: none !important;
}

.modal-box {
  background-color: var(--bg-primary);
  border: 2px solid var(--border-color);
  padding: var(--spacing-xl) var(--spacing-lg);
  max-width: 400px;
  width: 90%;
  text-align: center;
}

.modal-box p {
  font-size: 1rem;
  margin-bottom: var(--spacing-lg);
}

.modal-box .button-group {
  flex-direction: row;
  justify-content: center;
  gap: var(--spacing-md);
}

/* 死亡类结局 · 地府彩蛋弹层（独立于 #modal-overlay，z-index 更高） */
.afterlife-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.55);
  -webkit-tap-highlight-color: transparent;
  animation: afterlife-modal-overlay-in 0.22s ease;
}

.afterlife-modal-overlay.hidden {
  display: none !important;
  animation: none;
}

@keyframes afterlife-modal-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.afterlife-modal-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: min(520px, 92vw);
  max-height: min(78vh, 640px);
  max-height: min(78dvh, 640px);
  box-sizing: border-box;
  padding: 18px 16px max(16px, env(safe-area-inset-bottom, 0px));
  background-color: #1a1a1a;
  color: #f5f5f5;
  border-radius: 12px;
  border: 1px solid #333;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  gap: 14px;
}

.afterlife-modal-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #eee;
  text-align: center;
  flex: 0 0 auto;
}

/* 长文仅在此区域滚动；移动端惯性滚动与安全区由 overlay padding + 本区 overflow 分担 */
.afterlife-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 6px 8px;
  font-size: 0.92rem;
  line-height: 1.75;
  text-align: left;
  color: rgba(255, 255, 255, 0.92);
}

.afterlife-modal-body p {
  margin: 0 0 0.85em;
}

.afterlife-modal-body p:last-child {
  margin-bottom: 0;
}

.afterlife-modal-body::-webkit-scrollbar {
  width: 6px;
}

.afterlife-modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 4px;
}

.afterlife-modal-close-btn {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  font-weight: 600;
  border-radius: 8px;
  background: #3d3d3d;
  color: #f5f5f5;
  border: 1px solid #555;
}

.afterlife-modal-close-btn:hover {
  background: #4a4a4a;
  color: #fff;
}

.afterlife-modal-close-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* ============================================================
   13. 存款特殊显示（无进度条，只显示数字）
   ============================================================ */
.status-row-money {
  grid-template-columns: 40px 1fr;
}

.status-row-money .status-value {
  font-size: 0.85rem;
}

/* ============================================================
   14. 面试/创建页中 render.js 会动态生成的元素预设样式
   ============================================================ */

/* 属性行（创建页属性展示） */
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) 0;
  border-bottom: 1px dotted var(--border-light);
  font-size: 0.9rem;
}

.stat-name {
  font-weight: 600;
}

.stat-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
}

.stat-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* 公司卡片（求职市场）：主内容 + 右侧/底部投递区并排，少占纵向空间 */
.company-card {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid var(--border-light);
  transition: border-color 0.15s;
}

.company-card:hover {
  border-color: var(--border-color);
}

.company-card-main {
  flex: 1;
  min-width: 0;
}

.company-card-apply {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

.company-card-apply .btn-apply {
  white-space: nowrap;
}

.company-card-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.company-card-slogan {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: var(--spacing-sm);
}

.company-card-features {
  list-style: none;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.company-card-features li::before {
  content: "· ";
  color: var(--text-muted);
}

.company-card .btn {
  font-size: 0.85rem;
  padding: 6px 16px;
}

/* 面试选项 */
.interview-choice {
  display: block;
  width: 100%;
  padding: 10px var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-primary);
  transition: border-color 0.15s, background-color 0.15s;
}

.interview-choice:hover {
  border-color: var(--border-color);
  background-color: var(--bg-secondary);
}

.interview-choice.selected {
  border-color: var(--text-primary);
  background-color: var(--bg-secondary);
  font-weight: 600;
}

/* 面试反馈 */
.interview-chosen {
  margin: 16px 0;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid #888;
  border-radius: 4px;
}

.interview-chosen-text {
  font-weight: 500;
  margin: 0 0 4px 0;
}

.interview-flavor {
  color: #aaa;
  font-size: 0.9em;
  font-style: italic;
  margin: 6px 0 0 0;
}

.interview-answer {
  margin: 16px 0;
  padding: 12px 16px;
  background: rgba(74, 144, 217, 0.1);
  border-left: 3px solid #4a90d9;
  border-radius: 4px;
  font-size: 0.93em;
  line-height: 1.7;
}

#btn-interview-next {
  margin-top: 20px;
  width: 100%;
}

/**
 * 面试「下一题」：会议室像素底图为深色，全局 .btn-primary 黑底 + hover 透明会贴桌难辨；
 * 改为与题目区一致的浅色实底，hover 略加深而非透明。
 */
#interview-body.interview-layout-session #btn-interview-next.btn-primary {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-width: 2px;
  border-style: solid;
  border-color: var(--border-color);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}

#interview-body.interview-layout-session #btn-interview-next.btn-primary:hover {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--text-primary);
}

#interview-body.interview-layout-session #btn-interview-next.btn-primary:active {
  opacity: 1;
  background-color: #e4dfd4;
  border-color: var(--border-color);
}

#interview-body.interview-layout-session #btn-interview-next.btn-primary:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

/* 面试结果 */
.interview-pass {
  color: var(--status-normal);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
}

.interview-fail {
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
}

/* ============================================================
   15. 结局页统计摘要（render.js 会生成的结构）
   ============================================================ */
.ending-stat-row {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-xs) 0;
  border-bottom: 1px dotted rgba(245, 240, 232, 0.15);
  font-size: 0.85rem;
}

.ending-stat-label {
  color: rgba(245, 240, 232, 0.5);
}

.ending-stat-value {
  font-family: var(--font-mono);
  color: rgba(245, 240, 232, 0.8);
}

.ending-route-tag {
  display: inline-block;
  margin-top: var(--spacing-md);
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  border: 1px solid rgba(245, 240, 232, 0.4);
  color: rgba(245, 240, 232, 0.7);
  background: transparent;
}

#ending-screen button.ending-route-tag,
#ending-screen button.ending-tag {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(245, 240, 232, 0.28);
  background: rgba(245, 240, 232, 0.08);
  color: rgba(245, 240, 232, 0.86);
  cursor: pointer;
}

#ending-screen button.ending-route-tag {
  background: transparent;
  border-color: rgba(245, 240, 232, 0.4);
  color: rgba(245, 240, 232, 0.7);
}

#ending-screen button.ending-route-tag:focus-visible,
#ending-screen button.ending-tag:focus-visible {
  outline: 2px solid rgba(245, 240, 232, 0.7);
  outline-offset: 2px;
}

#ending-screen button.ending-route-tag:hover,
#ending-screen button.ending-tag:hover {
  background: rgba(245, 240, 232, 0.14);
}

/* 标签说明弹层（轻量、和 afterlife 同一语言） */
.taginfo-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
}

.taginfo-modal-overlay.hidden {
  display: none;
}

.taginfo-modal-box {
  width: min(92vw, 640px);
  max-height: min(86vh, 86dvh);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(245, 240, 232, 0.98);
  color: rgba(59, 44, 32, 0.92);
  border: 2px solid rgba(142, 115, 91, 0.75);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  padding: 16px 16px 14px;
  box-sizing: border-box;
}

.taginfo-modal-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.taginfo-modal-body {
  font-size: 0.92rem;
  line-height: 1.9;
  color: rgba(59, 44, 32, 0.86);
}

.taginfo-modal-body .taginfo-k {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid rgba(142, 115, 91, 0.45);
  border-radius: 999px;
  background: rgba(216, 196, 175, 0.35);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.taginfo-modal-body .taginfo-meta {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(142, 115, 91, 0.35);
  color: rgba(59, 44, 32, 0.72);
  font-size: 0.88rem;
}

.taginfo-modal-close-btn {
  margin-top: 12px;
  width: 100%;
  border: 2px solid rgba(142, 115, 91, 0.75) !important;
  background: transparent !important;
  color: rgba(59, 44, 32, 0.92) !important;
}

.taginfo-modal-close-btn:hover {
  background: rgba(216, 196, 175, 0.4) !important;
}

#ending-screen .ending-route-tag-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 12px;
  margin-top: var(--spacing-md);
}

#ending-screen .ending-route-tag-row .ending-route-tag {
  margin-top: 0;
}

.ending-subtags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 10px;
}

#ending-screen .ending-stats-extra {
  display: block;
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px dotted rgba(245, 240, 232, 0.22);
  font-size: 0.88rem;
  line-height: 1.9;
  white-space: pre-line;
  color: rgba(245, 240, 232, 0.78);
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   15.1 结局分主题配色（8大类，D 内含 fired/promoted 两变体）
   ============================================================ */
#ending-screen {
  background-color: var(--ending-bg, var(--bg-dark));
  color: var(--ending-fg, var(--text-inverse));
}

#ending-title {
  border-bottom-color: var(--ending-underline, var(--text-inverse));
}

#ending-screen .ending-text {
  color: var(--ending-body-fg, rgba(245, 240, 232, 0.85));
}

#ending-screen .ending-epitaph {
  color: var(--ending-epitaph-fg, rgba(245, 240, 232, 0.55));
  border-left-color: var(--ending-epitaph-border, rgba(245, 240, 232, 0.3));
}

#ending-screen .ending-afterlife {
  background: var(--ending-afterlife-bg, #1a1a1a);
  color: var(--ending-afterlife-fg, #ccc);
  border-top: 1px solid var(--ending-afterlife-border, #333);
}

#ending-screen .info-box {
  background-color: var(--ending-info-bg, rgba(245, 240, 232, 0.08));
  border-color: var(--ending-info-border, rgba(245, 240, 232, 0.2));
  color: var(--ending-info-fg, rgba(245, 240, 232, 0.7));
}

/* 结局统计摘要 */
#ending-screen .ending-stat-row {
  border-bottom: 1px dotted var(--ending-stat-divider, rgba(245, 240, 232, 0.15));
}

#ending-screen .ending-stat-label {
  color: var(--ending-stat-label-fg, rgba(245, 240, 232, 0.5));
}

#ending-screen .ending-stat-value {
  color: var(--ending-stat-value-fg, rgba(245, 240, 232, 0.8));
}

#ending-screen .ending-route-tag {
  border: 1px solid var(--ending-accent, rgba(245, 240, 232, 0.4));
  color: var(--ending-accent, rgba(245, 240, 232, 0.7));
}

#ending-screen .ending-stats-extra {
  border-top: 1px dotted var(--ending-stats-extra-divider, rgba(245, 240, 232, 0.22));
  color: var(--ending-stats-extra-fg, rgba(245, 240, 232, 0.78));
}

/* 主题变量对标签的适配（浅底主题反色、整体保持统一语言） */
#ending-screen .ending-tag {
  border-color: var(--ending-tag-border, rgba(245, 240, 232, 0.28));
  color: var(--ending-tag-fg, rgba(245, 240, 232, 0.86));
  background: var(--ending-tag-bg, rgba(245, 240, 232, 0.08));
}

#ending-screen .ending-tag--main {
  border-color: var(--ending-accent, rgba(245, 240, 232, 0.4));
  color: var(--ending-accent, rgba(245, 240, 232, 0.9));
  background: var(--ending-tag-main-bg, rgba(245, 240, 232, 0.06));
}

/* 结局页按钮：随主题反色 */
#ending-screen .btn {
  border-color: var(--ending-btn-border, rgba(245, 240, 232, 0.5));
  color: var(--ending-btn-fg, var(--text-inverse));
}

#ending-screen .btn:hover {
  background-color: var(--ending-btn-hover-bg, var(--text-inverse));
  color: var(--ending-btn-hover-fg, var(--bg-dark));
}

#ending-screen .btn-primary {
  background-color: var(--ending-btn-primary-bg, var(--text-inverse));
  color: var(--ending-btn-primary-fg, var(--bg-dark));
  border-color: var(--ending-btn-primary-bg, var(--text-inverse));
}

#ending-screen .btn-primary:hover {
  background-color: transparent;
  color: var(--ending-btn-primary-bg, var(--text-inverse));
}

/* ========== Theme A：死亡 / 终止 ========= */
#ending-screen.ending-theme-death {
  --ending-bg: #1E1E1E;
  --ending-fg: #F2F0EA;
  --ending-underline: #F2F0EA;
  --ending-body-fg: rgba(242, 240, 234, 0.85);
  --ending-epitaph-fg: rgba(242, 240, 234, 0.55);
  --ending-epitaph-border: rgba(242, 240, 234, 0.3);
  --ending-info-bg: rgba(242, 240, 234, 0.08);
  --ending-info-border: rgba(242, 240, 234, 0.2);
  --ending-info-fg: rgba(242, 240, 234, 0.7);
  --ending-stat-divider: rgba(245, 240, 232, 0.15);
  --ending-stat-label-fg: rgba(242, 240, 234, 0.5);
  --ending-stat-value-fg: rgba(242, 240, 234, 0.8);
  --ending-accent: #EDE8DE;
  --ending-stats-extra-divider: rgba(242, 240, 234, 0.22);
  --ending-stats-extra-fg: rgba(242, 240, 234, 0.78);
  --ending-btn-border: rgba(242, 240, 234, 0.5);
  --ending-btn-fg: #F2F0EA;
  --ending-btn-hover-bg: #F2F0EA;
  --ending-btn-hover-fg: #1E1E1E;
  --ending-btn-primary-bg: #F2F0EA;
  --ending-btn-primary-fg: #1E1E1E;
}

/* ========== Theme B：崩溃 / 裸辞 / 离场 ========= */
#ending-screen.ending-theme-resign {
  --ending-bg: #2C313A;
  --ending-fg: #F3F1EA;
  --ending-underline: #F3F1EA;
  --ending-body-fg: rgba(243, 241, 234, 0.85);
  --ending-epitaph-fg: rgba(243, 241, 234, 0.55);
  --ending-epitaph-border: rgba(243, 241, 234, 0.3);
  --ending-info-bg: rgba(243, 241, 234, 0.08);
  --ending-info-border: rgba(243, 241, 234, 0.2);
  --ending-info-fg: rgba(243, 241, 234, 0.7);
  --ending-stat-divider: rgba(243, 241, 234, 0.15);
  --ending-stat-label-fg: rgba(243, 241, 234, 0.5);
  --ending-stat-value-fg: rgba(243, 241, 234, 0.8);
  --ending-accent: #AAB7C8;
  --ending-stats-extra-divider: rgba(243, 241, 234, 0.22);
  --ending-stats-extra-fg: rgba(243, 241, 234, 0.78);
  --ending-btn-border: rgba(243, 241, 234, 0.5);
  --ending-btn-fg: #F3F1EA;
  --ending-btn-hover-bg: #F3F1EA;
  --ending-btn-hover-fg: #2C313A;
  --ending-btn-primary-bg: #F3F1EA;
  --ending-btn-primary-fg: #2C313A;
}

/* ========== Theme C：月光 / 欠费 / 生存见底 ========= */
#ending-screen.ending-theme-moonlight {
  --ending-bg: #3A342D;
  --ending-fg: #F4EBDD;
  --ending-underline: #F4EBDD;
  --ending-body-fg: rgba(244, 235, 221, 0.85);
  --ending-epitaph-fg: rgba(244, 235, 221, 0.55);
  --ending-epitaph-border: rgba(244, 235, 221, 0.3);
  --ending-info-bg: rgba(244, 235, 221, 0.08);
  --ending-info-border: rgba(244, 235, 221, 0.2);
  --ending-info-fg: rgba(244, 235, 221, 0.7);
  --ending-stat-divider: rgba(244, 235, 221, 0.15);
  --ending-stat-label-fg: rgba(244, 235, 221, 0.5);
  --ending-stat-value-fg: rgba(244, 235, 221, 0.8);
  --ending-accent: #C8A977;
  --ending-stats-extra-divider: rgba(244, 235, 221, 0.22);
  --ending-stats-extra-fg: rgba(244, 235, 221, 0.78);
  --ending-btn-border: rgba(244, 235, 221, 0.5);
  --ending-btn-fg: #F4EBDD;
  --ending-btn-hover-bg: #F4EBDD;
  --ending-btn-hover-fg: #3A342D;
  --ending-btn-primary-bg: #F4EBDD;
  --ending-btn-primary-fg: #3A342D;
}

/* ========== Theme D1：被裁 / 被优化（现实淘汰） ========= */
#ending-screen.ending-theme-work-dismissal {
  --ending-bg: #3A3D3B;
  --ending-fg: #F1EFE7;
  --ending-underline: #F1EFE7;
  --ending-body-fg: rgba(241, 239, 231, 0.85);
  --ending-epitaph-fg: rgba(241, 239, 231, 0.55);
  --ending-epitaph-border: rgba(241, 239, 231, 0.3);
  --ending-info-bg: rgba(241, 239, 231, 0.08);
  --ending-info-border: rgba(241, 239, 231, 0.2);
  --ending-info-fg: rgba(241, 239, 231, 0.7);
  --ending-stat-divider: rgba(241, 239, 231, 0.15);
  --ending-stat-label-fg: rgba(241, 239, 231, 0.5);
  --ending-stat-value-fg: rgba(241, 239, 231, 0.8);
  --ending-accent: #A7B0A8;
  --ending-stats-extra-divider: rgba(241, 239, 231, 0.22);
  --ending-stats-extra-fg: rgba(241, 239, 231, 0.78);
  --ending-btn-border: rgba(241, 239, 231, 0.5);
  --ending-btn-fg: #F1EFE7;
  --ending-btn-hover-bg: #F1EFE7;
  --ending-btn-hover-fg: #3A3D3B;
  --ending-btn-primary-bg: #F1EFE7;
  --ending-btn-primary-fg: #3A3D3B;
}

/* ========== Theme D2：卷王 / 高压上位 / 空心成功（看似赢了） ========= */
#ending-screen.ending-theme-work-grind {
  --ending-bg: #3B352C;
  --ending-fg: #F5EFE2;
  --ending-underline: #F5EFE2;
  --ending-body-fg: rgba(245, 239, 226, 0.85);
  --ending-epitaph-fg: rgba(245, 239, 226, 0.55);
  --ending-epitaph-border: rgba(245, 239, 226, 0.3);
  --ending-info-bg: rgba(245, 239, 226, 0.08);
  --ending-info-border: rgba(245, 239, 226, 0.2);
  --ending-info-fg: rgba(245, 239, 226, 0.7);
  --ending-stat-divider: rgba(245, 239, 226, 0.15);
  --ending-stat-label-fg: rgba(245, 239, 226, 0.5);
  --ending-stat-value-fg: rgba(245, 239, 226, 0.8);
  --ending-accent: #B89A63;
  --ending-stats-extra-divider: rgba(245, 239, 226, 0.22);
  --ending-stats-extra-fg: rgba(245, 239, 226, 0.78);
  --ending-btn-border: rgba(245, 239, 226, 0.5);
  --ending-btn-fg: #F5EFE2;
  --ending-btn-hover-bg: #F5EFE2;
  --ending-btn-hover-fg: #3B352C;
  --ending-btn-primary-bg: #F5EFE2;
  --ending-btn-primary-fg: #3B352C;
}

/* ========== Theme E：重组 / 制度化 / 组织吸纳 ========= */
#ending-screen.ending-theme-restructured {
  --ending-bg: #34413A;
  --ending-fg: #EEF1EA;
  --ending-underline: #EEF1EA;
  --ending-body-fg: rgba(238, 241, 234, 0.85);
  --ending-epitaph-fg: rgba(238, 241, 234, 0.55);
  --ending-epitaph-border: rgba(238, 241, 234, 0.3);
  --ending-info-bg: rgba(238, 241, 234, 0.08);
  --ending-info-border: rgba(238, 241, 234, 0.2);
  --ending-info-fg: rgba(238, 241, 234, 0.7);
  --ending-stat-divider: rgba(238, 241, 234, 0.15);
  --ending-stat-label-fg: rgba(238, 241, 234, 0.5);
  --ending-stat-value-fg: rgba(238, 241, 234, 0.8);
  --ending-accent: #90A18D;
  --ending-stats-extra-divider: rgba(238, 241, 234, 0.22);
  --ending-stats-extra-fg: rgba(238, 241, 234, 0.78);
  --ending-btn-border: rgba(238, 241, 234, 0.5);
  --ending-btn-fg: #EEF1EA;
  --ending-btn-hover-bg: #EEF1EA;
  --ending-btn-hover-fg: #34413A;
  --ending-btn-primary-bg: #EEF1EA;
  --ending-btn-primary-fg: #34413A;
}

/* ========== Theme F：希望 / 苟住 / 还有明天 ========= */
#ending-screen.ending-theme-hope {
  --ending-bg: #E8E1D2;
  --ending-fg: #3B352E;
  --ending-underline: #3B352E;
  --ending-body-fg: rgba(59, 53, 46, 0.88);
  --ending-epitaph-fg: rgba(59, 53, 46, 0.76);
  --ending-epitaph-border: rgba(59, 53, 46, 0.42);
  --ending-info-bg: rgba(59, 53, 46, 0.06);
  --ending-info-border: rgba(59, 53, 46, 0.14);
  --ending-info-fg: rgba(59, 53, 46, 0.7);
  --ending-stat-divider: rgba(59, 53, 46, 0.15);
  --ending-stat-label-fg: rgba(59, 53, 46, 0.5);
  --ending-stat-value-fg: rgba(59, 53, 46, 0.8);
  --ending-accent: #8DA06C;
  --ending-stats-extra-divider: rgba(59, 53, 46, 0.22);
  --ending-stats-extra-fg: rgba(59, 53, 46, 0.78);
  --ending-btn-border: rgba(59, 53, 46, 0.35);
  --ending-btn-fg: #3B352E;
  --ending-btn-hover-bg: #3B352E;
  --ending-btn-hover-fg: #E8E1D2;
  --ending-btn-primary-bg: #3B352E;
  --ending-btn-primary-fg: #E8E1D2;
  --ending-tag-border: rgba(59, 53, 46, 0.18);
  --ending-tag-fg: rgba(59, 53, 46, 0.78);
  --ending-tag-bg: rgba(255, 255, 255, 0.34);
  --ending-tag-main-bg: rgba(255, 255, 255, 0.24);
}

/* 希望主题：修复结局页浅色背景下「路线/副标签」「查看轮回档案」白字不可读 */
#ending-screen.ending-theme-hope button.ending-route-tag,
#ending-screen.ending-theme-hope button.ending-tag {
  border-color: var(--ending-tag-border, rgba(59, 53, 46, 0.18));
  color: var(--ending-tag-fg, rgba(59, 53, 46, 0.78));
  background: var(--ending-tag-bg, rgba(255, 255, 255, 0.34));
}

#ending-screen.ending-theme-hope button.ending-route-tag:hover,
#ending-screen.ending-theme-hope button.ending-tag:hover {
  background: rgba(255, 255, 255, 0.55);
}

#ending-screen.ending-theme-hope button.ending-route-tag:focus-visible,
#ending-screen.ending-theme-hope button.ending-tag:focus-visible {
  outline: 2px solid rgba(59, 53, 46, 0.45);
  outline-offset: 2px;
}

#ending-screen.ending-theme-hope .ending-reincarnation-archive {
  border: 1px solid rgba(59, 53, 46, 0.18);
  background: rgba(255, 255, 255, 0.34);
  color: rgba(59, 53, 46, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 10px 26px rgba(0, 0, 0, 0.12);
}

#ending-screen.ending-theme-hope .ending-reincarnation-archive-sub {
  color: rgba(59, 53, 46, 0.62);
}

/* ========== Theme G：AI 同化 / 技术异化 ========= */
#ending-screen.ending-theme-ai {
  --ending-bg: #24323A;
  --ending-fg: #EAF2F3;
  --ending-underline: #EAF2F3;
  --ending-body-fg: rgba(234, 242, 243, 0.85);
  --ending-epitaph-fg: rgba(234, 242, 243, 0.55);
  --ending-epitaph-border: rgba(234, 242, 243, 0.3);
  --ending-info-bg: rgba(234, 242, 243, 0.08);
  --ending-info-border: rgba(234, 242, 243, 0.2);
  --ending-info-fg: rgba(234, 242, 243, 0.7);
  --ending-stat-divider: rgba(234, 242, 243, 0.15);
  --ending-stat-label-fg: rgba(234, 242, 243, 0.5);
  --ending-stat-value-fg: rgba(234, 242, 243, 0.8);
  --ending-accent: #7FAEB7;
  --ending-stats-extra-divider: rgba(234, 242, 243, 0.22);
  --ending-stats-extra-fg: rgba(234, 242, 243, 0.78);
  --ending-btn-border: rgba(234, 242, 243, 0.5);
  --ending-btn-fg: #EAF2F3;
  --ending-btn-hover-bg: #EAF2F3;
  --ending-btn-hover-fg: #24323A;
  --ending-btn-primary-bg: #EAF2F3;
  --ending-btn-primary-fg: #24323A;
}

/* ========== Theme H：职业隐藏终局（职业档案） ========= */
#ending-screen.ending-theme-job {
  --ending-bg: #403A35;
  --ending-fg: #F3EDE3;
  --ending-underline: #F3EDE3;
  --ending-body-fg: rgba(243, 237, 227, 0.85);
  --ending-epitaph-fg: rgba(243, 237, 227, 0.55);
  --ending-epitaph-border: rgba(243, 237, 227, 0.3);
  --ending-info-bg: rgba(243, 237, 227, 0.08);
  --ending-info-border: rgba(243, 237, 227, 0.2);
  --ending-info-fg: rgba(243, 237, 227, 0.7);
  --ending-stat-divider: rgba(243, 237, 227, 0.15);
  --ending-stat-label-fg: rgba(243, 237, 227, 0.5);
  --ending-stat-value-fg: rgba(243, 237, 227, 0.8);
  --ending-accent: #A78BC2; /* 默认：设计；由 JS 按 player.job 覆盖 */
  --ending-stats-extra-divider: rgba(243, 237, 227, 0.22);
  --ending-stats-extra-fg: rgba(243, 237, 227, 0.78);
  --ending-btn-border: rgba(243, 237, 227, 0.5);
  --ending-btn-fg: #F3EDE3;
  --ending-btn-hover-bg: #F3EDE3;
  --ending-btn-hover-fg: #403A35;
  --ending-btn-primary-bg: #F3EDE3;
  --ending-btn-primary-fg: #403A35;
}

/* ============================================================
   16. 移动端适配
   ============================================================ */

/* 平板/手机断点 (≤768px) */
@media (max-width: 768px) {
  /* 0. 各屏统一内边距（除游戏屏另有更紧规则） */
  .screen-inner {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  /* 触控友好：主要按钮不低于约 44px */
  .btn {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .btn-back {
    min-height: 44px;
    padding: 10px 12px 10px 0;
    display: inline-flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
  }

  /* 创建 / 面试顶栏：窄屏可换行，标题不被挤没 */
  #creation-header,
  #interview-header {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: var(--spacing-sm);
  }

  #creation-header h2,
  #interview-header h2 {
    flex: 1 1 12rem;
    min-width: 0;
    font-size: 1.35rem;
    letter-spacing: 1px;
  }

  /*
   * 主流程移动端：底图由 fixed #mobile-scene-bg 铺满；section 勿再铺 bg-primary，否则与遮罩叠出「发灰」。
   */
  #game-screen.screen.active {
    padding: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  /* 主流程底图：≤900px 见后文 #mobile-scene-bg；此处不操作 #game-vn-bg */

  #game-screen .game-shell {
    display: contents;
    max-width: none !important;
    margin: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  /* 移动端：纵向文档流，覆盖桌面 absolute 舞台 */
  .game-vn-stage {
    position: relative !important;
    inset: auto !important;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    width: 100%;
    overflow: visible;
    border-radius: 0;
  }

  .game-vn-scene-layer {
    position: relative !important;
    flex: 0 0 auto;
    min-height: 200px;
    max-height: 38vh;
    width: 100%;
    overflow: hidden;
    z-index: auto;
    pointer-events: auto;
  }

  .game-vn-scene-layer .game-vn-bg,
  .game-vn-scene-layer .game-vn-characters,
  .game-vn-scene-layer .game-vn-hud {
    pointer-events: none;
  }

  .game-vn-scene-layer .game-vn-panel {
    pointer-events: auto;
  }

  .game-vn-sprite {
    height: min(26vh, 200px);
    max-width: 46%;
  }

  .game-vn-hud {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6px 8px;
    position: absolute;
    inset: 0;
    z-index: 2;
  }

  #status-panel.game-vn-status-panel,
  .game-vn-hud #status-panel,
  #log-panel.game-vn-log-panel,
  .game-vn-stage #log-panel {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    max-width: min(48%, 11rem);
    max-height: min(36vh, 220px);
    width: auto;
    margin: 0;
    transform: none !important;
  }

  .game-vn-dialog-region {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-height: none !important;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .game-vn-status-panel,
  .game-vn-log-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .vn-dialog-skin {
    background-image: none;
    border-radius: 4px;
    box-shadow: none;
    /**
     * 勿对整块 #vn-dialog-skin 使用 filter：部分移动 WebKit 下会使 flex 子项（事件卡）
     * 与 .game-vn-status-gap 发生错位/叠层异常；投影已由 .vn-mobile-event-card 的 box-shadow 承担。
     */
    filter: none;
  }

  .btn-choice-vn {
    background-image: none;
    flex: 1 1 100%;
    max-width: none;
  }

  /*
   * 1. 主游戏窄屏（≤768 基线）：纵向流式舞台；≤900 时日志入口见 .game-vn-status-gap，非整行底栏
   */
  #game-screen .screen-inner {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 24px);
    padding: var(--spacing-sm) var(--spacing-sm);
    box-sizing: border-box;
  }

  #status-panel {
    flex: 0 0 auto;
    order: unset;
    align-self: stretch;
    width: auto;
    padding: 0;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
  }

  .status-panel-topline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
  }

  .status-money-inline {
    margin-left: 0;
    font-size: 0.84rem;
  }

  #player-name-display {
    font-size: 0.88rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #player-head-icon {
    font-size: 1.25rem;
  }

  #status-panel .status-tag {
    font-size: 0.72rem;
    padding: 2px 8px;
    letter-spacing: 0.5px;
  }

  #status-bars {
    gap: var(--spacing-xs);
  }

  .status-row {
    grid-template-columns: 34px 1fr 36px;
    font-size: 0.78rem;
    gap: 6px;
  }

  .status-bar {
    height: 7px;
  }

  .status-value {
    font-size: 0.75rem;
  }

  #event-panel.game-vn-event-panel {
    flex: 0 0 auto;
    order: unset;
    align-self: stretch;
    width: 100%;
    border-top: none;
    padding: var(--spacing-sm);
  }

  #event-content {
    margin-bottom: var(--spacing-md);
  }

  /* 主流程日志在 scene 内 HUD，勿拉满整行成「第二块屏」 */
  #game-screen #log-panel.game-vn-log-panel {
    flex: 0 1 auto;
    order: unset;
    align-self: stretch;
    width: auto;
    min-height: 0;
    max-height: min(36vh, 220px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: none;
    border-top: none;
    padding: 8px 10px;
    box-sizing: border-box;
  }

  #log-entries {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #log-panel > .placeholder-text {
    margin: 0;
    font-size: 0.78rem;
  }

  #log-panel .panel-title {
    position: static;
    margin-bottom: var(--spacing-xs);
    padding-bottom: 4px;
    background: transparent;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    flex: 0 0 auto;
  }

  #log-panel .log-entry {
    font-size: 0.76rem;
    padding-bottom: var(--spacing-xs);
  }

  #log-panel .log-text {
    display: block;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.45;
  }

  #log-panel .log-time {
    font-size: 0.68rem;
  }

  /* 选择结果：继续/确定居中，易点 */
  #choice-result {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* 主流程 ≤768：继续条全宽；勿套用桌面 28px 大按钮 */
  #game-screen .event-continue-row {
    justify-content: stretch;
  }

  #game-screen .vn-dialog-skin .event-continue-btn.btn,
  #game-screen .vn-dialog-skin .event-continue-btn.btn-primary {
    align-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 48px;
    padding: 12px 20px;
    font-size: 1.05rem;
    margin-top: var(--spacing-md);
    margin-left: 0;
    margin-right: 0;
    transform: none;
  }

  #game-screen #choice-result .btn-primary:not(.event-continue-btn),
  #game-screen #choice-result .btn:not(.event-continue-btn) {
    align-self: center;
    width: min(92%, 18.5rem);
    margin-top: var(--spacing-md);
    margin-left: auto;
    margin-right: auto;
  }

  /* 6. 优化按钮体验 */
  .btn-choice {
    padding: 12px 16px;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 8px;
  }

  /* 8. 优化事件标题 */
  #event-title {
    font-size: 1.1rem;
  }

  /* 10. 选择结果区域优化 */
  #choice-result {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
  }

  /*
   * 11. 首页（窄屏）：底图为氛围层（::before），无主色蒙版；公告板叠在图上。
   * 公告板「轻浮层 + 融合 + 接触影」仅在本段；桌面端仍用全局 .notice-board-wrapper 原版。
   */
  #home-screen.screen.active,
  #home-screen.active {
    position: relative;
    overflow-x: hidden;
    /* 主底色不依赖整图裁切 */
    background-color: #e8e2d8;
    background-image: none;
    justify-content: flex-start;
    align-items: center;
    padding: max(12px, env(safe-area-inset-top, 0px)) clamp(12px, 4vw, 20px)
      max(16px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }

  #home-screen.screen.active::before,
  #home-screen.active::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    /* 移动端专用底图；缺失时回退桌面 breakroom_bg（与首页桌面段一致） */
    background-image:
      url("../assets/images/breakroom_bg_mobile.jpg"),
      url("../assets/images/breakroom_bg_mobile.png"),
      url("../assets/images/breakroom_bg.jpg"),
      url("../assets/images/breakroom_bg.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
  }

  #home-screen .notice-board-wrapper {
    position: relative;
    z-index: 2;
    width: min(92vw, 390px);
    max-width: min(92vw, 390px);
    margin-top: clamp(8px, 3vh, 24px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
    transform: none;
    padding: 18px 14px 12px;
    box-sizing: border-box;
    border: 3px solid #6b4a2f;
    border-radius: 2px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
    background: transparent;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.15));
  }

  #home-screen .notice-board-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background-color: rgba(212, 163, 115, 0.9);
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.04) 45%,
      rgba(255, 255, 255, 0.08) 100%
    );
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
  }

  #home-screen .notice-board-wrapper::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -8px;
    height: 12px;
    background: rgba(0, 0, 0, 0.15);
    filter: blur(6px);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
  }

  #home-screen .notice-board-wrapper > * {
    position: relative;
    z-index: 1;
  }

  #home-screen .title-note {
    transform: none;
    margin-bottom: 12px;
    padding: 10px 8px;
    width: 100%;
    max-width: 100%;
  }

  #home-screen .board-title {
    font-size: 1.45rem;
    letter-spacing: 0.04em;
  }

  #home-screen .board-subtitle {
    font-size: 0.78rem;
    line-height: 1.35;
  }

  #home-screen .pin-board-group {
    margin-bottom: 8px;
  }

  #home-screen .paper-btn {
    min-width: 0;
    transform: none !important;
    width: 92%;
    margin: 5px 0;
    padding: 10px 10px;
    font-size: 0.95rem;
    line-height: 1.35;
  }

  #home-screen .paper-btn:active {
    transform: translate(1px, 1px) !important;
  }

  #home-screen .schedule-paper,
  #home-screen .continue-paper,
  #home-screen .post-it-pink,
  #home-screen .warning-paper {
    transform: none !important;
  }

  #home-screen .post-it-pink {
    width: 90%;
  }

  #home-screen .warning-paper {
    width: 90%;
  }

  #home-screen .board-footer {
    padding-top: 10px;
    margin-top: 4px;
  }

  #home-screen .board-footer .version-info {
    font-size: 0.72rem;
    line-height: 1.45;
  }

  #home-screen .board-footer .version-by {
    font-size: 0.66rem;
    margin-top: 4px;
  }

  /* 13. 面试页优化 */
  #interview-area {
    padding: var(--spacing-md);
  }

  /* 答题/结果：窄屏不用场景图与底部对话框，全宽可读 */
  #interview-body.interview-layout-session,
  #interview-body.interview-layout-result {
    min-height: 0;
    padding: 0;
    display: block;
    background-image: none;
    background-color: transparent;
  }

  #interview-body.interview-layout-session #interview-area,
  #interview-body.interview-layout-result #interview-result {
    width: 100%;
    max-width: 100%;
    max-height: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    flex-shrink: unset;
    overflow: visible;
  }

  /* session 答题区 padding / 顶距由 @media (max-width: 900px) 专用规则统一控制，避免与头图模块叠层 */

  /* 窄屏：中央绝对定位改为文档流，避免裁切 */
  #interview-body.interview-layout-session #interview-area .interview-container {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    z-index: auto;
    gap: 12px;
  }

  #interview-body.interview-layout-session #interview-progress {
    color: var(--text-muted);
    text-shadow: none;
    font-weight: 500;
  }

  /* session 卡内边距由 ≤900px 规则收紧，此处不再写死 .interview-question padding，避免与 900 打架 */

  #interview-body.interview-layout-session .interview-choice.interview-option {
    font-size: 0.95rem;
    padding: 12px 14px;
  }

  #interview-body.interview-layout-result #interview-result {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  #interview-player-summary {
    font-size: 0.9rem;
  }

  /* 公司卡：窄屏收紧内边距，投递钮在右侧柱，不占满行 */
  .company-card {
    align-items: stretch;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .company-card-apply {
    justify-content: flex-end;
    padding-bottom: 2px;
  }

  .company-card-apply .btn-apply {
    width: auto;
    min-width: 5.5rem;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 0.78rem;
  }

  .company-card-features {
    margin-bottom: var(--spacing-sm);
  }

  /* 角色创建：窄屏 100% 宽、表单内边距收紧、职业单列（避免与下方通用 #job-options 网格混淆） */
  #creation-screen .screen-inner {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }

  #creation-screen.screen.active {
    padding: var(--spacing-sm);
  }

  #creation-screen #creation-body {
    padding: 0;
    margin-bottom: var(--spacing-md);
  }

  #creation-screen #creation-header {
    margin-bottom: var(--spacing-md);
  }

  #creation-screen .creation-paper {
    padding: var(--spacing-md) var(--spacing-sm);
  }

  #creation-screen #job-options.radio-group {
    grid-template-columns: 1fr;
  }

  #creation-screen #creation-body legend {
    font-size: 0.875rem;
  }

  #creation-head .radio-group {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  #creation-head .radio-card {
    flex: 1 1 calc(50% - var(--spacing-sm) / 2);
    min-width: 0;
    max-width: none;
    min-height: 5.5rem;
  }

  #creation-head .radio-card-icon {
    font-size: 1.45rem;
  }

  #creation-head .radio-card-label {
    font-size: 0.9rem;
  }

  /* 职业：两列大字，比 3 列易读；最后一行单独一项时居中 */
  #job-options.radio-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: var(--spacing-sm);
  }

  #job-options .radio-card {
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 12px 10px;
    min-height: 4.75rem;
    flex-direction: column;
    gap: 6px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
  }

  #job-options .radio-card:nth-last-child(1):nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 12.5rem;
    margin-left: auto;
    margin-right: auto;
  }

  #job-options .radio-card-icon {
    font-size: 1.5rem;
  }

  #job-options .radio-card-label {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.03em;
  }

  #creation-name input[type="text"] {
    max-width: 100%;
  }

  #creation-job .info-box {
    margin: var(--spacing-sm) 0 var(--spacing-xs);
    padding: var(--spacing-sm);
    font-size: 0.84rem;
    line-height: 1.65;
  }

  #creation-screen #creation-footer {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-light);
  }

  /* 结局：内容上对齐，避免 flex 垂直居中 + 上一屏滚动导致标题在视口上方外 */
  #ending-screen .screen-inner {
    justify-content: flex-start;
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-xl);
  }

  #ending-header {
    margin-bottom: var(--spacing-md);
    width: 100%;
  }

  .interview-choice {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 1rem;
    -webkit-tap-highlight-color: transparent;
  }

  #btn-interview-next {
    min-height: 48px;
  }

  /* 结局页：窄屏可读、标题不破版 */
  #ending-title {
    font-size: 1.65rem;
    letter-spacing: 2px;
    line-height: 1.25;
    word-break: break-word;
  }

  .ending-text {
    font-size: 0.95rem;
    line-height: 2;
    text-align: left;
    width: 100%;
    max-width: 100%;
  }

  .ending-epitaph {
    font-size: 0.88rem;
    width: 100%;
    box-sizing: border-box;
  }

  #ending-footer.button-group,
  #ending-footer {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    max-width: 100%;
  }

  #ending-screen .btn {
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
  }

  .modal-box {
    max-height: min(90vh, 90dvh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--spacing-md);
    box-sizing: border-box;
  }
}

/* 窄屏手机断点 (≤480px) */
@media (max-width: 480px) {
  .screen-inner {
    padding: var(--spacing-md) var(--spacing-sm);
  }

  /* 1. 更小的内边距 */
  #game-screen .screen-inner {
    padding: var(--spacing-xs);
  }
  
  /* 2. 事件标题进一步缩小 */
  #event-title {
    font-size: 1rem;
  }
  
  /* 3. 事件描述优化 */
  #event-description {
    font-size: 0.9rem;
    line-height: 1.8;
  }
  
  /* 4. 按钮更大更易点击 */
  .btn-choice {
    padding: 14px 16px;
    margin-bottom: 10px;
  }
  
  /* 5. 选择结果按钮（继续键由 .event-continue-btn 全宽，勿缩成窄条） */
  #choice-result .btn:not(.event-continue-btn) {
    padding: 12px 24px;
    font-size: 1rem;
    align-self: center;
    width: min(92%, 18.5rem);
    margin-left: auto;
    margin-right: auto;
  }

  #game-screen .vn-dialog-skin .event-continue-btn.btn,
  #game-screen .vn-dialog-skin .event-continue-btn.btn-primary {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* 7. 状态条布局更加紧凑 */
  .status-row {
    grid-template-columns: 25px 1fr 28px;
    font-size: 0.75rem;
  }

  .status-label {
    font-size: 0.75rem;
  }

  .status-value {
    font-size: 0.75rem;
  }

  /* 8. 首页公告板标题（极窄屏） */
  #home-screen .board-title {
    font-size: 1.3rem;
    letter-spacing: 0.03em;
  }

  #home-screen.screen.active,
  #home-screen.active {
    padding: max(8px, env(safe-area-inset-top, 0px)) 3% max(12px, env(safe-area-inset-bottom, 0px));
  }

  #home-screen .notice-board-wrapper {
    margin-top: 6px;
    padding: 16px 12px 10px;
  }

  #home-screen .paper-btn {
    padding: 9px 8px;
    font-size: 0.9rem;
    margin: 4px 0;
  }

  /* 9. 面试页进一步优化 */
  #interview-area {
    padding: var(--spacing-sm);
  }

  #creation-header h2,
  #interview-header h2 {
    font-size: 1.2rem;
  }

  #ending-title {
    font-size: 1.35rem;
    letter-spacing: 1px;
  }

  /* 10. 模态框优化 */
  .modal-box {
    padding: var(--spacing-lg) var(--spacing-md);
    width: calc(100% - 2 * var(--spacing-md));
    max-width: 95vw;
  }

  #creation-screen #creation-footer .btn {
    width: 100%;
    max-width: 24rem;
  }

  #creation-screen #btn-start-interview {
    width: 100%;
    max-width: 24rem;
  }

  /* 极窄屏：公司卡主文通栏，投递仍贴右下 */
  .company-card {
    flex-wrap: wrap;
  }

  .company-card-apply {
    margin-left: auto;
  }
}

/* ============================================================
   图鉴（通关解锁）
   ============================================================ */
.codex-screen-inner {
  padding-bottom: var(--spacing-xl);
}

.codex-header {
  margin-bottom: var(--spacing-md);
}

.codex-header .btn-back {
  margin-bottom: var(--spacing-sm);
}

.codex-title {
  font-size: 1.65rem;
  margin-bottom: var(--spacing-xs);
}

.codex-lead {
  color: var(--text-secondary);
  font-size: 0.92rem;
  margin-bottom: var(--spacing-xs);
}

.codex-progress {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-light);
}

.codex-progress-row {
  margin-bottom: 10px;
}

.codex-progress-row:last-child {
  margin-bottom: 0;
}

.codex-progress-line {
  margin: 0 0 5px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.codex-progress-track {
  height: 2px;
  background: var(--border-light);
  border-radius: 1px;
  overflow: hidden;
}

.codex-progress-fill {
  display: block;
  height: 100%;
  background: var(--text-muted);
  opacity: 0.45;
  border-radius: 1px;
  transition: width 0.25s ease;
}

.codex-tabs {
  display: flex;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0 var(--spacing-md);
  border-bottom: 2px solid var(--border-light);
  padding-bottom: var(--spacing-sm);
}

.codex-tab {
  flex: 1;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  border: 2px solid var(--border-light);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.codex-tab:hover {
  border-color: var(--border-color);
  color: var(--text-primary);
}

.codex-tab.active {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--border-color);
}

.codex-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--spacing-lg);
  align-items: start;
}

/* 轮回记录模式：单列“履历卡” */
#codex-screen.codex-mode-reincarnations .codex-panels {
  grid-template-columns: 1fr;
}

#codex-screen.codex-mode-reincarnations .codex-detail {
  display: none;
}

#codex-screen.codex-mode-reincarnations .codex-list-wrap {
  max-height: min(70vh, 640px);
}

.reincarnation-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: rgba(216, 196, 175, 0.16);
  color: var(--text-primary);
  box-sizing: border-box;
}

.reincarnation-card + .reincarnation-card {
  margin-top: var(--spacing-sm);
}

.reincarnation-card.is-new {
  border-color: var(--border-light);
  box-shadow: none;
  animation: none;
}

@keyframes reincarnationNewFlash {
  0% { opacity: 1; }
  100% { opacity: 1; }
}

.reincarnation-card-topline {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.reincarnation-card-world {
  font-size: 1rem;
}

.reincarnation-new-badge {
  display: inline-block;
  margin-left: 10px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(200, 40, 40, 0.92);
  color: #fff;
  transform: translateY(-2px);
}

.reincarnation-card-day {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.reincarnation-card-companyline {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.reincarnation-card-divider {
  border-top: 1px dashed rgba(0, 0, 0, 0.18);
}

.reincarnation-card-final {
  font-size: 0.98rem;
  font-weight: 700;
}

.reincarnation-card-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--text-secondary);
}

.reincarnation-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.reincarnation-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.reincarnation-tag--route {
  border-color: rgba(142, 115, 91, 0.55);
  color: rgba(59, 44, 32, 0.92);
  background: rgba(216, 196, 175, 0.25);
}

.codex-list-wrap {
  max-height: min(70vh, 520px);
  overflow: hidden;
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
}

.codex-list {
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: var(--spacing-sm);
  -webkit-overflow-scrolling: touch;
}

.codex-period-heading {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0.04em;
  padding: var(--spacing-sm) var(--spacing-xs) var(--spacing-xs);
  margin-top: var(--spacing-xs);
  border-bottom: 1px dashed var(--border-light);
}

.codex-period-heading:first-child {
  margin-top: 0;
}

.codex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin-bottom: 4px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.45;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.12s, border-color 0.12s;
}

.codex-row-label {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.codex-row--done .codex-row-label {
  color: var(--text-primary);
}

.codex-done-badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--status-normal);
  color: var(--status-normal);
  background: rgba(74, 103, 65, 0.1);
  white-space: nowrap;
}

.codex-row--done:is(:hover, .is-selected) .codex-done-badge {
  background: rgba(74, 103, 65, 0.18);
}

.codex-seen-ribbon {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--status-normal);
  margin: 0 0 var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--status-normal);
  background: rgba(74, 103, 65, 0.08);
  border-radius: 2px;
}

.codex-seen-ribbon--event {
  color: var(--text-secondary);
  border-color: var(--border-light);
  background: var(--bg-secondary);
  font-weight: 500;
  opacity: 0.95;
}

.codex-row:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--border-light);
}

.codex-row.is-selected {
  background: var(--bg-primary);
  border-color: var(--border-color);
  box-shadow: inset 3px 0 0 var(--accent-light);
}

.codex-row-fallback {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.codex-detail {
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  -webkit-overflow-scrolling: touch;
}

.codex-placeholder {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.92rem;
  margin: 0;
}

.codex-detail-title {
  font-size: 1.15rem;
  margin-bottom: var(--spacing-xs);
}

.codex-detail-id {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: var(--spacing-md);
}

.codex-detail-id code {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.codex-detail-body p {
  margin-bottom: var(--spacing-sm);
}

.codex-muted {
  color: var(--text-muted);
}

.codex-event-desc {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px dashed var(--border-light);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .codex-panels {
    grid-template-columns: 1fr;
  }

  .codex-list-wrap {
    max-height: 40vh;
  }

  .codex-list {
    max-height: 40vh;
  }

  .codex-detail {
    max-height: none;
  }

  /* 轮回记录：让列表更“长”，避免只能露出一世 */
  #codex-screen.codex-mode-reincarnations .codex-list-wrap {
    max-height: 68vh;
  }

  #codex-screen.codex-mode-reincarnations .codex-list {
    max-height: 68vh;
  }
}

/* ============================================================
   主流程 ≤900px：状态栏左右栏（六项全显）+ 日志入口在「状态↔事件」缓冲区（弱样式）；展开仍为底部抽屉
   #log-panel 桌面仍为 .game-vn-stage 内绝对定位；≥901 不变
   ============================================================ */
@media (max-width: 900px) {
  #game-screen.screen.active {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
    padding: max(6px, env(safe-area-inset-top, 0px)) var(--spacing-sm) max(10px, env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  /**
   * 存活 Day/进度条仅桌面 HUD 展示；≤900px 用原顶栏 + 独立 mobile 存活条。
   */
  #game-screen .status-survival-daymax,
  #game-screen .status-survival-progress-wrap {
    display: none !important;
  }

  #game-screen .screen-inner {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: unset !important;
    max-height: none !important;
    min-height: min(calc(100dvh - 20px), 100%) !important;
    margin: 0 !important;
    padding: var(--spacing-xs) var(--spacing-sm) !important;
    overflow: visible !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex-shrink: 1 !important;
    position: relative !important;
  }

  #game-screen .game-shell.game-vn-root {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: min(calc(100dvh - 56px), 100%) !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  /*
   * 主流程 ≤900px：氛围层
   * fixed 底图 (z0) 原图直出；.mobile-scene-overlay 关闭（曾叠黑渐变 + section 灰底导致整屏发灰）
   * 前景 .mobile-game-content (z2)
   */
  #game-screen .mobile-game-shell {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    background: transparent !important;
  }

  #game-screen .mobile-scene-bg {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-color: var(--bg-secondary) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    /* 已移除 brightness/saturate：避免压暗 mobile 专用底图与立绘细节 */
    filter: none !important;
  }

  /* 全屏暗渐变/暖罩已撤：与 *_mobile.jpg 原图亮度冲突；可读性由事件卡/状态栏自身对比保证 */
  #game-screen .mobile-scene-overlay {
    display: none !important;
  }

  #game-screen .mobile-game-content {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  #game-screen .game-vn-bg,
  #game-screen .game-vn-scene-layer .game-vn-bg {
    display: none !important;
    background-image: none !important;
    visibility: hidden !important;
  }

  /* 面试 session：顶部头图 + 下方问答实体卡（非整页会议室底） */
  #interview-body:not(.interview-layout-session) .interview-mobile-hero {
    display: none !important;
  }

  /*
   * session 面试模块：与桌面 ≥769 的 align-items:center 叠在一起时，子项会按内容缩窄，头图与 #interview-area 宽度不一致。
   * 此处强制拉伸 + 统一宽度，与 .screen-inner 的 min(92vw,760px) 同宽（body 占满内层内容盒）。
   */
  #interview-body.interview-layout-session {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: min(92vw, 760px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    background: transparent !important;
    background-image: none !important;
    position: relative !important;
  }

  #interview-body.interview-layout-session .interview-mobile-hero {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    height: clamp(110px, 18vh, 150px) !important;
    min-height: 110px !important;
    max-height: 150px !important;
    margin: 0 !important;
    background-color: #2c2824 !important;
    background-image:
      url("../assets/images/bg_interview_meeting.jpg"),
      url("../assets/images/bg_interview_meeting.png") !important;
    background-size: cover !important;
    background-position: 74% center !important;
    background-repeat: no-repeat !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px 8px 0 0 !important;
    border: 1px solid var(--border-light) !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
  }

  #interview-body.interview-layout-session .interview-mobile-hero::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.12),
      rgba(245, 240, 232, 0.18)
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* 头图 + 问答区：同宽拼接；左右不再叠一层 margin（与头图对齐） */
  #interview-body.interview-layout-session #interview-area {
    flex: 1 1 auto !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-light) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    margin: 0 0 var(--spacing-sm) !important;
    margin-top: 0 !important;
    padding: 6px 12px 10px !important;
    box-shadow: 0 4px 18px rgba(45, 38, 30, 0.08) !important;
  }

  #interview-body.interview-layout-session #interview-area .interview-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #interview-body.interview-layout-session .interview-session-title-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 0 6px !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid rgba(120, 96, 76, 0.22) !important;
  }

  #interview-body.interview-layout-session #interview-company-name {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 0.98rem !important;
    line-height: 1.3 !important;
  }

  #interview-body.interview-layout-session #interview-progress {
    flex: 0 0 auto !important;
    margin: 0 !important;
    text-align: right !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    text-shadow: none !important;
  }

  #interview-body.interview-layout-session .interview-question {
    background: rgba(245, 240, 232, 0.96) !important;
    border: 2px solid #a99983 !important;
    padding: 8px 12px 12px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      0 6px 20px rgba(0, 0, 0, 0.12) !important;
  }

  #interview-body.interview-layout-session .interview-choice.interview-option {
    background: #e9e1d5 !important;
    border: 2px solid #b3a18c !important;
  }

  #game-screen .game-vn-stage {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: min(calc(100dvh - 72px), 100%) !important;
    max-height: none !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  /* 仅状态条 + 矮立绘，为事件卡腾出首屏 */
  #game-screen .game-vn-scene-layer {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: min(228px, 36vh) !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    z-index: auto !important;
    pointer-events: auto !important;
  }

  #game-screen .game-vn-scene-layer .game-vn-characters {
    position: relative !important;
    inset: auto !important;
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: min(72px, 14vh) !important;
    width: 100% !important;
    z-index: 1 !important;
    order: 2 !important;
    pointer-events: none !important;
    padding: 0 4px 4px !important;
    justify-content: center !important;
    gap: min(2vw, 0.5rem) !important;
  }

  #game-screen .game-vn-sprite {
    height: min(12vh, 72px) !important;
    max-width: 38% !important;
  }

  #game-screen .game-vn-scene-layer .game-vn-hud {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 8px 2px !important;
    box-sizing: border-box !important;
    z-index: 3 !important;
    flex: 0 0 auto !important;
    order: 1 !important;
    pointer-events: none !important;
  }

  #game-screen .game-vn-scene-layer .game-vn-hud .game-vn-panel {
    pointer-events: auto !important;
  }

  /* 状态栏：左窄 + 右宽；木板感保留，极轻悬浮与氛围层拉开层级 */
  #game-screen .game-vn-hud #status-panel.game-vn-status-panel,
  #game-screen .game-vn-hud #status-panel {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(3.6rem, 23%) 1fr !important;
    gap: 6px 10px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 6px 8px 7px !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    order: 1 !important;
    transform: none !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }

  #game-screen .status-panel-topline {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
  }

  #game-screen #player-identity {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #game-screen #player-head-icon {
    font-size: 1.32rem !important;
    line-height: 1 !important;
  }

  #game-screen #player-name-display {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: 100% !important;
  }

  #game-screen .game-vn-hud #status-panel .status-tag {
    font-size: 0.64rem !important;
    padding: 2px 6px !important;
    letter-spacing: 0.02em !important;
    max-width: 100% !important;
  }

  #game-screen .game-vn-hud #status-panel .status-money-inline {
    font-size: 0.68rem !important;
    font-family: var(--font-mono) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    word-break: break-all !important;
  }

  #game-screen #status-bars.game-vn-status-bars {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #game-screen .game-vn-hud #status-panel .status-row {
    grid-template-columns: minmax(2.35rem, 28%) 1fr minmax(1.5rem, 17%) !important;
    gap: 4px 5px !important;
    font-size: 0.66rem !important;
    padding: 0.04rem 0 !important;
    align-items: center !important;
  }

  #game-screen .game-vn-hud #status-panel .status-label {
    font-size: 0.64rem !important;
  }

  #game-screen .game-vn-hud #status-panel .status-value {
    font-size: 0.64rem !important;
    text-align: right !important;
  }

  #game-screen .game-vn-hud #status-panel .status-bar,
  #game-screen #status-panel .status-bar {
    height: 4px !important;
    min-height: 4px !important;
  }

  /* 状态栏与事件卡之间：纵向壳；首行为轻量日志信息条（与事件卡左右对齐），次行为 #log-panel 占位 */
  #game-screen .game-vn-status-gap {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 5 !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }

  /**
   * 轻量日志信息条：浅色半透明底 + 统一棕灰字，不压在场景底图上；宽度与 .vn-mobile-event-card 一致（16px = 4px 面板内边距 + 12px 卡外边距）
   */
  #game-screen #mobile-log-info-strip.mobile-log-info-strip {
    position: relative !important;
    z-index: 8 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: auto !important;
    max-width: none !important;
    margin: 4px 16px 6px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    border-radius: 8px !important;
    background: rgba(255, 250, 242, 0.88) !important;
    border: 1px solid rgba(92, 78, 58, 0.18) !important;
    box-shadow: 0 1px 3px rgba(45, 38, 30, 0.06) !important;
    color: #5a4d3e !important;
    -webkit-font-smoothing: antialiased !important;
  }

  #game-screen .game-vn-status-gap:has(#log-panel.mobile-log-floating:not(.vn-log-collapsed)) #mobile-log-info-strip.mobile-log-info-strip {
    display: none !important;
  }

  #game-screen .mobile-log-info-strip-main {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  #game-screen .mobile-log-strip-heading {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #4d4234 !important;
    white-space: nowrap !important;
  }

  #game-screen #mobile-log-info-strip #log-toolbar-meta.vn-log-toolbar-meta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 2px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    font-size: 0.66rem !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    color: #5a4d3e !important;
  }

  #game-screen #mobile-log-info-strip #log-toolbar-meta .log-toolbar-meta-item {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: inherit !important;
  }

  #game-screen #mobile-log-info-strip #log-toolbar-meta .log-toolbar-meta-item + .log-toolbar-meta-item::before {
    content: '·' !important;
    margin-right: 4px !important;
    margin-left: 1px !important;
    opacity: 0.65 !important;
    flex-shrink: 0 !important;
    color: rgba(90, 77, 62, 0.75) !important;
  }

  #game-screen #mobile-log-info-strip .vn-log-toggle-strip {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin: 0 0 0 8px !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
    font-weight: 500 !important;
    background: #f2d98a !important;
    color: #5c4f36 !important;
    border: 1px solid #d2b96a !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }

  #game-screen #mobile-log-info-strip .vn-log-toggle-strip:hover,
  #game-screen #mobile-log-info-strip .vn-log-toggle-strip:focus-visible {
    background: #ebd37f !important;
    color: #4a3f2c !important;
    border-color: #c4a85a !important;
  }

  /**
   * 日志条下方：存活进度（day / maxDays），细条 + 轻字，仅窄屏主流程。
   * 竖直间距：与 #mobile-log-info-strip 的 margin-bottom(6px) 对齐，由下侧 margin-bottom 单独承担至事件卡的间距，避免与 dialog / 卡片 margin 叠放。
   */
  #game-screen .mobile-survival-progress {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 16px 6px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
  }

  #game-screen .mobile-survival-progress-label {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.62rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    color: rgba(90, 77, 62, 0.58) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    -webkit-font-smoothing: antialiased !important;
  }

  /**
   * 夜晚回家：底图偏暗，标签改浅色 + 轻字影（data-time 由 syncGameScreenScene 写入 #game-screen）。
   */
  #game-screen[data-time='night'] .mobile-survival-progress-label {
    color: rgba(245, 240, 232, 0.9) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
  }

  #game-screen .mobile-survival-progress-track {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(45, 38, 30, 0.08) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /**
   * 宽度由 render.js 按 day/maxDays 写入 style.width；切勿对 width 使用 !important，否则会盖住内联样式，整轨只剩灰底。
   */
  #game-screen .mobile-survival-progress-fill {
    display: block !important;
    width: 0%;
    height: 100% !important;
    min-height: 3px !important;
    border-radius: 999px !important;
    background-color: #7ed957 !important;
    background-image: repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 6px,
      rgba(255, 255, 255, 0.16) 6px,
      rgba(255, 255, 255, 0.16) 7px
    ) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    transition: width 0.45s ease-out !important;
    box-sizing: border-box !important;
  }

  #game-screen .game-vn-status-gap:has(#log-panel.mobile-log-floating:not(.vn-log-collapsed)) #mobile-survival-progress.mobile-survival-progress {
    margin-bottom: 6px !important;
  }

  /*
   * 日志：收起 = 缓冲区内文档流（flex 子项贴右）；展开 = 底部 fixed 抽屉
   */
  #game-screen .game-vn-status-gap #log-panel.game-vn-log-panel.mobile-log-floating {
    pointer-events: auto !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    margin: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-top: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #game-screen .game-vn-status-gap #log-panel.game-vn-log-panel.mobile-log-floating.vn-log-collapsed {
    position: static !important;
    right: auto !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
    max-height: none !important;
    z-index: auto !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    overflow: visible !important;
  }

  #game-screen #log-panel.vn-log-collapsed .vn-log-meta,
  #game-screen #log-panel.vn-log-collapsed #log-entries,
  #game-screen #log-panel.vn-log-collapsed .log-body,
  #game-screen #log-panel.vn-log-collapsed .event-log-body,
  #game-screen #log-panel.vn-log-collapsed .log-list {
    display: none !important;
  }

  /* 折叠态：摘要与按钮在 #mobile-log-info-strip，此处不再渲染顶栏 */
  #game-screen #log-panel.mobile-log-floating.vn-log-collapsed .vn-log-toolbar {
    display: none !important;
  }

  #game-screen .game-vn-status-gap #log-panel.game-vn-log-panel.mobile-log-floating:not(.vn-log-collapsed) {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(52vh, 380px) !important;
    padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 12px 12px 0 0 !important;
    transform: none !important;
    overflow: hidden !important;
    z-index: 52 !important;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.22) !important;
  }

  #game-screen .game-vn-status-gap #log-panel.game-vn-log-panel.mobile-log-floating:not(.vn-log-collapsed) #log-entries.vn-log-entries {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 事件卡：主视觉；与存活进度间距仅由 .mobile-survival-progress margin-bottom 承担，此处勿再加 margin-top */
  #game-screen .game-vn-stage > .game-vn-dialog-region {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
    z-index: 4 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
  }

  /* 选择态：为底部固定选项条预留滚动安全区（结果态仍用下方较小留白） */
  #game-screen .game-vn-stage > .game-vn-dialog-region:has(#vn-dialog-skin.event-dialog-card:not(.event-dialog-card--result)) {
    padding-bottom: max(168px, 24vh, env(safe-area-inset-bottom, 0px)) !important;
  }

  #game-screen .game-vn-stage #event-panel.game-vn-event-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 var(--spacing-xs) var(--spacing-xs) !important;
    margin: 0 !important;
  }

  /*
   * 选择态：外壳不画大卡，拆成 .vn-mobile-event-card（上）+ .vn-mobile-option-card（底固定）
   * 结果态：两壳 display:contents，仍用下方 .event-dialog-card--result 单卡样式
   */
  #game-screen #vn-dialog-skin.vn-dialog-skin.event-dialog-card:not(.event-dialog-card--result) {
    padding: 0 !important;
    gap: 10px !important;
    background: none !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
  }

  #game-screen #vn-dialog-skin.event-dialog-card--result .vn-mobile-event-card,
  #game-screen #vn-dialog-skin.event-dialog-card--result .vn-mobile-option-card {
    display: contents !important;
  }

  /* 上：事件正文卡（仅选择态；z-index 低于日志条与底栏选项；上间距由 .mobile-survival-progress margin-bottom 统一控制） */
  #game-screen #vn-dialog-skin.event-dialog-card:not(.event-dialog-card--result) .vn-mobile-event-card {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 1 auto !important;
    align-self: stretch !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 12px 0 !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    z-index: 1 !important;
    max-height: min(44vh, 340px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background-color: rgba(255, 252, 245, 0.9) !important;
    background-image:
      linear-gradient(to bottom, rgba(255, 252, 245, 0.94), rgba(255, 252, 245, 0.82)),
      url("../assets/images/dialog_box.png") !important;
    background-size: 100% 100%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, center !important;
    border: 2px solid rgba(30, 30, 30, 0.55) !important;
    box-shadow:
      0 4px 14px rgba(35, 28, 22, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }

  /* 下：选项条（固定底；结果时 #choice-buttons.hidden 则整壳隐藏） */
  #game-screen #vn-dialog-skin.event-dialog-card:not(.event-dialog-card--result) .vn-mobile-option-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100% - 24px) !important;
    max-width: 520px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px !important;
    z-index: 24 !important;
    border-radius: 12px !important;
    pointer-events: auto !important;
    background-color: rgba(255, 252, 245, 0.92) !important;
    border: 2px solid rgba(30, 30, 30, 0.5) !important;
    box-shadow:
      0 6px 20px rgba(0, 0, 0, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }

  #game-screen .vn-mobile-option-card:has(#choice-buttons.hidden) {
    display: none !important;
  }

  /* 结果态单卡：保留原对话盒视觉（与桌面同系） */
  #game-screen #vn-dialog-skin.vn-dialog-skin.event-dialog-card--result {
    padding: 8px 10px 10px !important;
    border-radius: 4px !important;
    background-color: transparent !important;
    background-image:
      linear-gradient(to bottom, rgba(255, 252, 245, 0.95), rgba(255, 252, 245, 0.86)),
      url("../assets/images/dialog_box.png") !important;
    background-size: 100% 100%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, center !important;
    border: 2px solid rgba(30, 30, 30, 0.65) !important;
    box-shadow:
      0 5px 18px rgba(35, 28, 22, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  }

  #game-screen #event-title {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
    margin: 0 0 0.35em !important;
  }

  #game-screen #event-description,
  #game-screen .vn-event-description {
    font-size: 0.86rem !important;
    line-height: 1.52 !important;
  }

  #game-screen #choice-buttons.vn-choice-row {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
  }

  #game-screen .btn-choice-vn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
    margin-bottom: 0 !important;
    font-size: 0.88rem !important;
    min-height: 42px !important;
    background-color: transparent !important;
    background-image:
      linear-gradient(to bottom, rgba(255, 252, 245, 0.94), rgba(255, 252, 245, 0.84)),
      url("../assets/images/choice_box.png") !important;
    background-size: 100% 100%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, center !important;
    box-shadow:
      0 3px 10px rgba(35, 28, 22, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  }

  #game-screen .btn-choice-vn:last-child {
    margin-bottom: 0 !important;
  }

  /*
   * 对话壳 flex；选择态高度由上部事件卡 + 底栏自理；结果态保留 min-height 压版式
   */
  #game-screen #vn-dialog-skin.vn-dialog-skin.event-dialog-card,
  #game-screen .vn-dialog-skin.event-dialog-card {
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  #game-screen #vn-dialog-skin.event-dialog-card--result {
    min-height: min(400px, 56dvh) !important;
  }

  #game-screen .vn-dialog-skin:not(.event-dialog-card--result) #event-content.vn-event-content {
    min-height: 0 !important;
    flex: 0 1 auto !important;
  }

  #game-screen .vn-dialog-skin.event-dialog-card--result #event-content.vn-event-content {
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }

  #game-screen .vn-dialog-skin.event-dialog-card--result #choice-result.vn-choice-result.event-result {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 260px !important;
    margin-top: 8px !important;
    padding-top: 10px !important;
    gap: 10px !important;
  }

  #game-screen .vn-dialog-skin.event-dialog-card--result .event-result-text {
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
  }

  #game-screen .vn-dialog-skin.event-dialog-card--result .event-effects {
    margin-top: 12px !important;
    margin-bottom: 16px !important;
    flex: 0 0 auto !important;
  }

  #game-screen .vn-dialog-skin.event-dialog-card--result #check-detail:not(:empty) {
    flex: 0 0 auto !important;
    margin-bottom: 4px !important;
  }

  #game-screen .vn-dialog-skin.event-dialog-card--result .event-continue-row,
  #game-screen .vn-dialog-skin.event-dialog-card--result .event-dialog-actions {
    margin-top: auto !important;
    padding-top: 12px !important;
  }

  #game-screen .vn-dialog-skin .event-continue-btn.btn,
  #game-screen .vn-dialog-skin .event-continue-btn.btn-primary {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 56px !important;
    box-sizing: border-box !important;
  }

  /*
   * 主流程日志 ≤900px：展开底部抽屉 / 收起为状态↔事件间弱入口（仅 .mobile-log-floating；桌面不变）
   */
  #game-screen #log-panel.game-vn-log-panel.mobile-log-floating:not(.vn-log-collapsed) {
    background: #6b6560 !important;
    color: #f3ebe0 !important;
    border: none !important;
    border-top: 2px solid #4a433d !important;
  }

  #game-screen #log-panel.mobile-log-floating:not(.vn-log-collapsed) .vn-log-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px 8px !important;
    background: #5a544e !important;
    border: 1px solid rgba(255, 247, 234, 0.14) !important;
    border-radius: 0 !important;
    padding: 6px 8px !important;
    flex-shrink: 0 !important;
  }

  #game-screen #log-panel.mobile-log-floating:not(.vn-log-collapsed) .vn-log-toolbar .panel-title {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
    text-align: left !important;
    color: #fff8f0 !important;
    font-weight: 700 !important;
    -webkit-font-smoothing: antialiased !important;
  }

  #game-screen #log-panel.mobile-log-floating:not(.vn-log-collapsed) .vn-log-toolbar .vn-log-meta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-size: 0.64rem !important;
    gap: 0 2px !important;
  }

  #game-screen #log-panel.mobile-log-floating:not(.vn-log-collapsed) .vn-log-toolbar .vn-log-meta > span {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #game-screen
    #log-panel.mobile-log-floating:not(.vn-log-collapsed)
    .vn-log-toolbar
    .vn-log-meta
    > span
    + span::before {
    content: '·' !important;
    margin-right: 4px !important;
    margin-left: 2px !important;
    opacity: 0.65 !important;
    color: rgba(255, 247, 234, 0.45) !important;
  }

  #game-screen #log-panel.mobile-log-floating:not(.vn-log-collapsed) .vn-log-toolbar .vn-log-toggle {
    margin-left: auto !important;
  }

  #game-screen #log-panel.mobile-log-floating:not(.vn-log-collapsed) .vn-log-toggle {
    background: #857a6e !important;
    color: #fffaf3 !important;
    border: 1px solid rgba(255, 247, 234, 0.38) !important;
    font-weight: 600 !important;
  }

  #game-screen #log-panel.mobile-log-floating:not(.vn-log-collapsed) .vn-log-toggle:hover,
  #game-screen #log-panel.mobile-log-floating:not(.vn-log-collapsed) .vn-log-toggle:focus-visible {
    background: #968a7d !important;
    color: #fffdf8 !important;
  }

  #game-screen #log-panel.mobile-log-floating:not(.vn-log-collapsed) .vn-log-toolbar .vn-log-meta {
    color: #e4dbd0 !important;
    flex-shrink: 0 !important;
  }

  #game-screen #log-panel.mobile-log-floating:not(.vn-log-collapsed) #game-day,
  #game-screen #log-panel.mobile-log-floating:not(.vn-log-collapsed) #game-period,
  #game-screen #log-panel.mobile-log-floating:not(.vn-log-collapsed) .vn-log-job,
  #game-screen #log-panel.mobile-log-floating:not(.vn-log-collapsed) .vn-log-company {
    color: #ddd3c6 !important;
  }

  #game-screen #log-panel.mobile-log-floating:not(.vn-log-collapsed) #log-entries.vn-log-entries {
    background: #524c47 !important;
    border: 1px solid rgba(255, 247, 234, 0.12) !important;
    color: #efe6da !important;
  }

  #game-screen #log-panel.mobile-log-floating:not(.vn-log-collapsed) .log-entry {
    border-top: 1px solid rgba(255, 247, 234, 0.1) !important;
    padding-top: 8px !important;
    margin-top: 8px !important;
  }

  #game-screen #log-panel.mobile-log-floating:not(.vn-log-collapsed) .log-entry:first-child {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  #game-screen #log-panel.mobile-log-floating:not(.vn-log-collapsed) .log-time {
    color: #c4b8a8 !important;
    font-size: 0.68rem !important;
    display: block !important;
    margin-bottom: 3px !important;
  }

  #game-screen #log-panel.mobile-log-floating:not(.vn-log-collapsed) .log-text {
    color: #f5efe6 !important;
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
  }

  #game-screen #log-panel.mobile-log-floating:not(.vn-log-collapsed) .placeholder-text {
    color: #c9bfb2 !important;
    font-style: italic !important;
  }

  #game-screen #log-panel.game-vn-log-panel.mobile-log-floating.vn-log-collapsed {
    background: transparent !important;
    color: #7a6a45 !important;
    border: none !important;
  }

  /*
   * ≤900px：统一二级页顶栏（文档流 flex 一行，左对齐标题；覆盖 §16 #creation-header/#interview-header 的 flex-wrap 与 h2 flex 漂移）
   */
  #creation-header.mobile-page-header,
  #interview-header.mobile-page-header,
  #ending-header.mobile-page-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    row-gap: unset !important;
  }

  #creation-header.mobile-page-header > .btn-back,
  #creation-header.mobile-page-header > .page-back,
  #interview-header.mobile-page-header > .btn-back,
  #interview-header.mobile-page-header > .page-back {
    flex: 0 0 auto !important;
    position: static !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 6px 12px 6px 0 !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    align-self: center !important;
  }

  #creation-header.mobile-page-header > h2.page-title,
  #interview-header.mobile-page-header > h2.page-title,
  #ending-header.mobile-page-header > h2.page-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 1.22rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.03em !important;
    transform: none !important;
  }

  #codex-screen .codex-header.mobile-page-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: var(--spacing-sm) !important;
    padding-bottom: var(--spacing-sm) !important;
    box-sizing: border-box !important;
  }

  #codex-screen .codex-header.mobile-page-header > .btn-back,
  #codex-screen .codex-header.mobile-page-header > .page-back {
    flex: 0 0 auto !important;
    position: static !important;
    min-height: 0 !important;
    padding: 6px 12px 6px 0 !important;
    margin: 0 !important;
    line-height: 1.35 !important;
  }

  #codex-screen .codex-header.mobile-page-header > .codex-title.page-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: 1.22rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0.03em !important;
    transform: none !important;
  }

  #codex-screen .codex-header.mobile-page-header > .codex-lead,
  #codex-screen .codex-header.mobile-page-header > .codex-progress {
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /*
   * 创建页 ≤900px：紧凑单列 + 头套横向矮按钮 + 收紧留白；「开始面试」贴内容（footer 少 margin）
   */
  #creation-screen .screen-inner {
    width: min(92vw, 760px) !important;
    max-width: min(92vw, 760px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: var(--spacing-sm) var(--spacing-sm) !important;
    box-sizing: border-box !important;
  }

  #creation-screen #creation-header.mobile-page-header {
    max-width: 100% !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
  }

  #creation-screen #creation-body {
    margin-bottom: var(--spacing-sm) !important;
    padding: 0 !important;
  }

  #creation-screen .creation-paper {
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) !important;
    border-radius: 6px !important;
  }

  #creation-screen fieldset.form-group {
    margin: 0 0 var(--spacing-sm) !important;
    padding: 0 0 var(--spacing-sm) !important;
  }

  #creation-screen fieldset.form-group:last-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #creation-screen legend {
    font-size: 0.8125rem !important;
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
  }

  #creation-head .radio-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #creation-head .radio-card {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 72px !important;
    max-height: 88px !important;
    height: auto !important;
    padding: 8px 10px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  #creation-head .radio-card-icon {
    font-size: 1.15rem !important;
    line-height: 1 !important;
  }

  #creation-head .radio-card-label {
    display: inline !important;
    width: auto !important;
    text-align: left !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
  }

  #creation-screen #input-name {
    min-height: 52px !important;
    max-height: 56px !important;
    padding: 10px 12px !important;
    font-size: 0.9375rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  #creation-screen #btn-roll-stats {
    min-height: 52px !important;
    max-height: 56px !important;
    margin-top: 6px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #creation-screen #stats-display.stats-grid {
    margin: 4px 0 6px !important;
  }

  #creation-screen .stat-row {
    padding: 0.08rem 0 !important;
    row-gap: 0.1rem !important;
  }

  #creation-screen #creation-footer {
    margin-top: var(--spacing-sm) !important;
    padding-top: var(--spacing-xs) !important;
    border-top: 1px solid var(--border-light) !important;
  }

  #creation-screen #btn-start-interview {
    min-height: 48px !important;
    margin-top: 0 !important;
  }

  #interview-screen .screen-inner {
    width: min(92vw, 760px) !important;
    max-width: min(92vw, 760px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: var(--spacing-sm) !important;
    box-sizing: border-box !important;
  }

  #interview-header.mobile-page-header {
    max-width: 100% !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
    border-bottom-width: 1px !important;
  }

  #interview-screen #interview-market-panel,
  #interview-screen #interview-player-summary {
    margin-top: var(--spacing-xs) !important;
  }

  /* session 答题区顶距由内联模块规则接管，避免与头图之间叠出双倍 margin */
  #interview-body:not(.interview-layout-session) #interview-area {
    margin-top: var(--spacing-sm) !important;
    padding: var(--spacing-md) var(--spacing-sm) !important;
  }

  #interview-screen #interview-result {
    margin-top: var(--spacing-sm) !important;
    padding: var(--spacing-md) var(--spacing-sm) !important;
  }

  #ending-screen .screen-inner {
    width: min(92vw, 760px) !important;
    max-width: min(92vw, 760px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #ending-header.mobile-page-header {
    border-bottom: 1px solid var(--border-light) !important;
    padding-bottom: 10px !important;
    margin-bottom: var(--spacing-sm) !important;
  }

  #codex-screen .codex-screen-inner {
    width: min(92vw, 760px) !important;
    max-width: min(92vw, 760px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: var(--spacing-sm) !important;
    box-sizing: border-box !important;
  }

  /*
   * 创建页 ≤900px：职业单列 + 选中项下方内联说明；底部 #job-description 隐藏
   */
  #creation-screen #job-options.career-job-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin-top: 0 !important;
  }

  #creation-screen #job-options .career-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #creation-screen #job-options .career-option.radio-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 48px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 18px auto 1fr !important;
    align-items: center !important;
    justify-content: start !important;
    text-align: left !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
  }

  #creation-screen #job-options .career-option .radio-card-icon {
    grid-column: 2 !important;
    font-size: 1rem !important;
  }

  #creation-screen #job-options .career-option .radio-card-label {
    grid-column: 3 !important;
    text-align: left !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
  }

  #creation-screen #job-description.info-box {
    display: none !important;
  }

  #creation-screen .career-inline-description {
    display: none;
    margin-top: 4px;
    padding: 8px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.8rem;
    line-height: 1.55;
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
  }

  #creation-screen .career-inline-description strong {
    display: block;
    margin-bottom: 0.25em;
    font-size: 0.88rem;
  }

  #creation-screen .career-inline-description ul {
    margin: 0.35em 0 0;
    padding-left: 1.2em;
  }

  /**
   * :checked 与 .selected 双条件：新 WebKit 以 :has 对齐原生勾选；旧环境仍依赖 JS 的 .selected。
   */
  #creation-screen .career-item.selected .career-inline-description,
  #creation-screen .career-item:has(input:checked) .career-inline-description {
    display: block;
  }

  #creation-screen #creation-footer {
    margin-top: var(--spacing-md) !important;
    padding-top: var(--spacing-sm) !important;
  }

  /*
   * 首页 ≤900px：底图与 ≤768px 段一致（伪元素层），不在此禁用 ::before/::after，
   * 否则会后置覆盖 @media (max-width: 768px) 中的茶水间背景。
   * 769–900px 仍用根选择器 #home-screen 上的 cover 底图。
   */
}

/* ≥901px：创建页职业内联说明仅服务窄屏，桌面始终用底部 #job-description */
@media (min-width: 901px) {
  #creation-screen .career-inline-description {
    display: none !important;
  }
}