/* ============================================================
   一念之差 · Choices — Arcade theme
   霓虹配色 · CRT 扫描线 · 方块硬阴影
   字体说明：Arcade 观感主要来自霓虹配色 / CRT / 硬阴影 / HUD 血条；
   --font-display 像素字体仅用于开场大字与 PRESS START（尺寸够大、清晰），
   其余全部使用高可读性的 --font-body（Chakra Petch + 系统中文字体回退）。
   ============================================================ */
:root {
  --bg: #07060f;
  --bg2: #0d0a1f;
  --panel: #14122a;
  --panel-2: #1b1736;
  --ink: #e8f0ff;
  --muted: #a4acd2;
  --line: #2a2750;
  --cyan: #00f0ff;
  --magenta: #ff2e88;
  --yellow: #ffe600;
  --green: #39ff14;
  --purple: #b14aff;
  --red: #ff3b5c;
  --radius: 4px;
  /* 仅用于开场 LOGO 与 PRESS START 按钮（尺寸大，像素感清晰） */
  --font-display: 'Press Start 2P', 'ZCOOL QingKe HuangYou', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  /* 正文 / UI：科技感但高可读性，中文回退到系统黑体，避免像素字糊成一团 */
  --font-body: 'Chakra Petch', 'Rajdhani', system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background:
    radial-gradient(1200px 600px at 50% -10%, #1a1140 0%, var(--bg2) 45%, var(--bg) 100%);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
  letter-spacing: .3px;
  overflow-x: hidden;
  position: relative;
}

/* 合成波网格地面，增加 Arcade 氛围 */
body::before {
  content: "";
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 46vh;
  background-image:
    linear-gradient(transparent 0%, rgba(177, 74, 255, .10) 100%),
    repeating-linear-gradient(90deg, rgba(0, 240, 255, .14) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(255, 46, 136, .12) 0 1px, transparent 1px 64px);
  transform: perspective(420px) rotateX(62deg);
  transform-origin: bottom center;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}

/* ===== CRT 扫描线 + 暗角（覆盖全局，不挡点击） ===== */
#crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.20) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
#crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 50%, transparent 58%, rgba(0,0,0,0.55) 100%);
}

/* ============ 街机柜式标题栏 ============ */
#app-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  background: linear-gradient(180deg, #120c2e, #0a0720);
  border-bottom: 3px solid var(--cyan);
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.35), inset 0 -3px 0 rgba(255, 46, 136, .5);
  flex-wrap: wrap;
}
.brand-wrap { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.brand {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  color: var(--yellow);
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(255, 230, 0, .55), 2px 2px 0 #6a4b00;
  animation: flicker 4.5s infinite;
}
.brand-en {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--cyan);
  letter-spacing: 2px;
  text-shadow: 0 0 6px rgba(0, 240, 255, .5);
}
.brand-sub { color: var(--muted); font-size: 15px; letter-spacing: 1px; }

/* 右上角语言切换开关（街机按钮风） */
.lang-toggle {
  display: inline-flex;
  border: 2px solid var(--purple);
  border-radius: var(--radius);
  overflow: hidden;
  flex: none;
  background: #0c0922;
  box-shadow: 0 0 10px rgba(177, 74, 255, .45);
}
.lang-toggle button {
  border: none;
  background: transparent;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: #b9a7ff;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.lang-toggle button + button { border-left: 2px solid var(--purple); }
.lang-toggle button.active { background: var(--purple); color: #fff; text-shadow: 0 0 6px #fff; }
.lang-toggle button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.header-right { display: flex; align-items: center; gap: 12px; flex: none; }
.icon-btn {
  border: 2px solid var(--cyan);
  background: #0c0922;
  color: var(--cyan);
  border-radius: var(--radius);
  width: 40px; height: 40px;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 240, 255, .35);
  transition: background .12s ease, color .12s ease;
}
.icon-btn:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }

.banner {
  position: relative; z-index: 10;
  margin: 12px 24px 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 16px;
  border: 2px solid var(--line);
  background: #0c0922;
}
.banner.ok { color: var(--green); border-color: var(--green); text-shadow: 0 0 6px var(--green); }
.banner.warn { color: var(--yellow); border-color: var(--yellow); }
.banner.error { color: var(--red); border-color: var(--red); text-shadow: 0 0 6px var(--red); }
.hidden { display: none !important; }

#app {
  position: relative;
  z-index: 10;
  max-width: 820px;
  margin: 0 auto;
  padding: 24px;
}

#scenario-title {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.4;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, .6);
  line-height: 1.5;
}
.muted { color: var(--muted); font-size: 15px; line-height: 1.6; letter-spacing: .5px; }
.trace-effect { color: var(--muted); font-size: 15px; line-height: 1.6; margin-top: 2px; letter-spacing: .5px; }

/* ============ 主游戏面板（街机屏框） ============ */
#stage {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 3px solid var(--cyan);
  border-radius: 10px;
  padding: 22px 24px;
  box-shadow: 0 0 24px rgba(0, 240, 255, .22), inset 0 0 30px rgba(0, 0, 0, .55);
  position: relative;
}
/* INSERT COIN 字样已移除：模拟街机风但不要求“投币” */

/* ============ 风险监测 HUD（街机血条） ============ */
.hud {
  margin: 18px 0;
  background: #0a0820;
  border: 2px solid var(--magenta);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  box-shadow: 0 0 16px rgba(255, 46, 136, .35), inset 0 0 18px rgba(0,0,0,.6);
}
.hud-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--magenta);
  text-shadow: 0 0 6px var(--magenta);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255, 46, 136, .5);
  display: flex;
  align-items: center;
  gap: 6px;
}
/* 双轨分组：风险轨（愈低愈好）与创业轨（愈高愈好）分列显示 */
.dims { display: flex; flex-direction: column; gap: 14px; }
.dim-group { display: flex; flex-direction: column; gap: 10px; }
.dim-group-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--cyan);
  text-shadow: 0 0 6px rgba(0, 240, 255, .45);
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(0, 240, 255, .35);
}
.dim-group:nth-child(2) .dim-group-title { color: var(--green); text-shadow: 0 0 6px rgba(57, 255, 20, .45); border-bottom-color: rgba(57, 255, 20, .35); }
.dim.danger .dim-label { color: var(--red); text-shadow: 0 0 8px var(--red); }
.dim-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 8px; }
.dim-label { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: 1px; }
.dim-val {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px; color: var(--cyan);
  background: #06040f;
  padding: 4px 8px; border-radius: var(--radius);
  border: 1px solid var(--cyan);
  min-width: 52px; text-align: center;
  text-shadow: 0 0 6px var(--cyan);
}
.dim-track { display: flex; gap: 4px; }
.dim-seg {
  flex: 1; height: 14px; border-radius: 2px;
  background: #1c1838;
  border: 1px solid #2c2754;
  transition: background .25s ease, box-shadow .25s ease;
}
.dim-seg.on { box-shadow: 0 0 8px currentColor; }
.dim.danger .dim-seg.on { animation: dangerPulse 1s ease-in-out infinite; }

/* 单语版面 */
.bilingual { margin-top: 8px; }

/* ============ 叙事区（冷色屏，区别于选项） ============ */
.node-text {
  background: linear-gradient(180deg, #0c1430, #0a1028);
  border: 2px solid var(--cyan);
  border-left: 6px solid var(--cyan);
  border-radius: 8px;
  padding: 16px 18px;
  font-size: 20px;
  line-height: 1.65;
  color: #d6f6ff;
  margin-bottom: 16px;
  box-shadow: inset 0 0 22px rgba(0, 240, 255, .10);
}

/* ============ 企划简报：开局先把 business idea 交代清楚 ============ */
.brief {
  background: linear-gradient(180deg, #101a3c, #0b1230);
  border: 2px solid rgba(0, 240, 255, .45);
  border-left: 6px solid var(--cyan);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: inset 0 0 20px rgba(0, 240, 255, .07);
}
.brief-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px; letter-spacing: 2px;
  color: var(--cyan);
  text-shadow: 0 0 6px rgba(0, 240, 255, .45);
  margin-bottom: 10px;
}
.brief-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 16px;
  line-height: 1.6;
}
.brief-row:last-child { margin-bottom: 0; }
.brief-key {
  flex: 0 0 auto;
  min-width: 5.4em;
  font-weight: 700;
  color: var(--yellow);
  text-shadow: 0 0 5px rgba(255, 230, 0, .35);
}
.brief-val { flex: 1 1 auto; color: #cfe4ff; }
.brief-row:last-child .brief-val { color: #ffd9e4; }
.brief-para { font-size: 17px; line-height: 1.7; color: #cfe4ff; }
/* ============ 选项（街机菜单硬阴影按钮） ============ */
.choices-head {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px; letter-spacing: 1px;
  color: var(--yellow);
  text-shadow: 0 0 6px rgba(255, 230, 0, .5);
  margin: 4px 0 12px;
  display: flex; align-items: center; gap: 6px;
}
.choices-head::before { content: "◆"; font-size: 12px; }
.choices { display: flex; flex-direction: column; gap: 12px; }
.choice {
  text-align: left;
  background: #1a0f2e;
  border: 2px solid var(--magenta);
  border-radius: var(--radius);
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  color: #ffd6ea;
  cursor: pointer;
  position: relative;
  box-shadow: 4px 4px 0 #5a0f33;
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease, color .15s ease;
}
.choice::before { content: "▶"; color: var(--magenta); margin-right: 8px; font-size: 12px; text-shadow: 0 0 6px var(--magenta); }
/* 移动端不启用 :hover —— 触屏点按后 hover 会“粘住”，
   导致下一个节点里相同位置的选择项看起来像被预先选中（误导）。
   悬停高亮仅在真正支持悬停的设备上生效，见下方 @media (hover: hover)。 */
.choice:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #5a0f33; }
.choice:disabled {
  opacity: 0.45; cursor: not-allowed;
  border-color: #44395f; color: #8b93b8;
  box-shadow: 2px 2px 0 #2a2240;
}
.choice:disabled::before { color: #44395f; }
/* 未解锁选项：说明「为什么现在不能选」，避免玩家以为是 bug */
.choice-lock {
  display: block;
  margin-top: 6px;
  margin-left: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--yellow);
  opacity: .9;
}
/* 按下反馈（移动端也能看到）：点下去先变亮再翻页，
   避免「毫无反应就直接跳到下一页」造成的困惑 */
.choice.is-pressed:not(:disabled) {
  background: var(--magenta);
  color: #fff;
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #5a0f33;
  text-shadow: 0 0 6px #fff;
}
.choice.is-pressed:not(:disabled)::before { color: #fff; }

/* ============ 决策轨迹（高分榜日志） ============ */
.trace-panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 3px solid var(--purple);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 0 18px rgba(177, 74, 255, .30);
}
.trace-panel h2 {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--purple);
  text-shadow: 0 0 6px rgba(177, 74, 255, .5);
  display: flex; align-items: center; gap: 6px;
}
/* 轨迹条目：章节 → 选择 → 分数变化 → 为什么 */
#trace-list { margin: 10px 0 0; padding: 0; list-style: none; }
.trace-item {
  font-size: 17px; line-height: 1.6;
  margin-bottom: 12px; padding: 12px 14px;
  color: #d9d2ff;
  background: rgba(177, 74, 255, .06);
  border: 1px solid rgba(177, 74, 255, .35);
  border-left: 3px solid var(--purple);
  border-radius: 6px;
}
.trace-act {
  font-size: 13px; letter-spacing: 1px;
  color: var(--cyan); text-shadow: 0 0 6px rgba(0, 240, 255, .35);
  margin-bottom: 4px;
}
.trace-choice { font-size: 17px; font-weight: 600; color: #efeaff; }
.trace-effects { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  font-size: 14px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line);
  background: #0c0922;
}
.chip.good { color: var(--green); border-color: rgba(57, 255, 20, .6); }
.chip.bad { color: var(--red); border-color: rgba(255, 59, 92, .6); }
/* 「为什么这样变」——让学生看见因果，而不只是看见数字 */
.trace-why {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.65;
  color: #c9d4f5;
  background: rgba(0, 240, 255, .05);
  border-left: 2px solid rgba(0, 240, 255, .45);
  padding: 8px 10px;
  border-radius: 4px;
}

/* 「谁该管」——对应 L06 第三问：设计、公司政策，还是法律（社会维度计划 §3.2） */
.fb-actor, .trace-actor {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--purple);
}

/* 每次选择后立即展示「改了什么 + 为什么」，让因果在学习的当下就可见 */
.feedback {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 240, 255, .35);
  background: rgba(0, 240, 255, .06);
}
.fb-choice { font-size: 16px; font-weight: 700; color: #efeaff; margin-bottom: 8px; }
.fb-effects { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-why {
  margin-top: 10px;
  font-size: 15px; line-height: 1.65;
  color: #c9d4f5;
  border-left: 2px solid rgba(0, 240, 255, .45);
  padding-left: 10px;
}

/* 最终风险：独立成块，避免与上方轨迹条目挤在一起 / 文字重叠 */
.trace-final {
  margin-top: 14px;
  padding: 12px 14px;
  border: 2px solid var(--yellow);
  border-radius: var(--radius);
  background: rgba(255, 230, 0, .07);
}
.trace-final-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--yellow);
  text-shadow: 0 0 6px rgba(255, 230, 0, .45);
  margin-bottom: 6px;
}
.trace-final-value {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: #ffe97a;
}

/* ============ 结局（街机结算屏） ============ */
.ending {
  position: relative;
  z-index: 10;
  max-width: 820px;
  margin: 8px auto 40px;
  padding: 30px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 3px solid var(--line);
  box-shadow: 0 0 30px rgba(0, 240, 255, .18), inset 0 0 30px rgba(0,0,0,.5);
  overflow: hidden;
}
.ending::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--muted); }
.ending.type-success { border-color: var(--green); box-shadow: 0 0 30px rgba(57, 255, 20, .35); }
.ending.type-success::before { background: var(--green); }
.ending.type-fail { border-color: var(--red); box-shadow: 0 0 30px rgba(255, 59, 92, .40); }
.ending.type-fail::before { background: var(--red); }
.ending.type-compromise { border-color: var(--yellow); box-shadow: 0 0 30px rgba(255, 230, 0, .30); }
.ending.type-compromise::before { background: var(--yellow); }
.ending h2 {
  margin: 8px 0 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 26px; line-height: 1.4;
  color: var(--ink);
  text-shadow: 0 0 8px rgba(255,255,255,.3);
}
.ending p { font-size: 18px; line-height: 1.7; color: #d6e0ff; }
.ending-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px; letter-spacing: 1px;
  padding: 6px 12px; border-radius: var(--radius);
  background: #0c0922; color: var(--muted);
  border: 1px solid var(--line);
}
.ending.type-success .ending-tag { color: var(--green); border-color: var(--green); text-shadow: 0 0 6px var(--green); }
.ending.type-fail .ending-tag { color: var(--red); border-color: var(--red); text-shadow: 0 0 6px var(--red); }
.ending.type-compromise .ending-tag { color: var(--yellow); border-color: var(--yellow); text-shadow: 0 0 6px var(--yellow); }
.reflection {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(0, 240, 255, .06);
  border-left: 3px solid var(--cyan);
  border-radius: 6px;
  font-size: 16px;
  color: #cfeaff;
}
.btn-restart {
  margin-top: 22px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  background: var(--yellow);
  color: #1a1400;
  border: 2px solid #fff;
  border-radius: var(--radius);
  padding: 12px 18px;
  cursor: pointer;
  box-shadow: 4px 4px 0 #6a4b00;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn-restart:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #6a4b00; }

/* 题材专属的一句补白（结局页） */
.ending-flavor {
  font-size: 16px; line-height: 1.7;
  color: var(--yellow);
  border-left: 3px solid var(--yellow);
  padding-left: 12px;
  background: rgba(255, 230, 0, .05);
}

/* ============ 详细复盘（每个结局的教学主体） ============ */
.debrief {
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.debrief-title {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--cyan);
  text-shadow: 0 0 6px rgba(0, 240, 255, .35);
}
.debrief-body { margin: 0; font-size: 16px; line-height: 1.75; color: #cfd8f5; }
.stakeholders { margin: 0; padding: 0; list-style: none; }
.stakeholder {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 0;
  border-top: 1px dashed rgba(255, 255, 255, .12);
}
.stakeholder:first-child { border-top: none; }
.sh-who { font-size: 16px; color: var(--yellow); }
.sh-impact { font-size: 15px; line-height: 1.65; color: #cfd8f5; }
.mitigations { margin: 0; padding-left: 22px; }
.mitigation { font-size: 16px; line-height: 1.7; margin-bottom: 6px; color: #cfd8f5; }
.footnote { margin-top: 10px; font-size: 14px; color: var(--muted); }

.ending-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ============ 导出学习报告 ============ */
.export-box {
  margin-top: 26px;
  padding: 16px 18px;
  border: 1px dashed rgba(177, 74, 255, .55);
  border-radius: var(--radius);
  background: rgba(177, 74, 255, .07);
}
.export-title {
  font-size: 16px; font-weight: 700; color: var(--purple);
  margin-bottom: 6px;
}
.export-note {
  margin: 0 0 12px;
  font-size: 13px; line-height: 1.7; color: var(--muted);
}
.export-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-export {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--purple);
  background: transparent;
  border: 2px solid var(--purple);
  border-radius: var(--radius);
  padding: 10px 18px;
  cursor: pointer;
}
.btn-export.alt { color: var(--cyan); border-color: var(--cyan); }
.btn-shuffle {
  margin-top: 22px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  background: transparent;
  color: var(--cyan);
  border: 2px solid var(--cyan);
  border-radius: var(--radius);
  padding: 12px 18px;
  cursor: pointer;
  box-shadow: 4px 4px 0 #0a4661;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn-shuffle:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0a4661; }

#app-footer {
  position: relative; z-index: 10;
  text-align: center; padding: 16px;
  font-size: 14px; color: var(--muted); line-height: 1.6;
  letter-spacing: 1px;
}

/* ============ PRESS START 开场画面 ============ */
#start-screen {
  position: fixed; inset: 0; z-index: 40;
  /* 不用 align-items:center：内容高过视口时会把上下两端裁掉且无法滚动。
     改为子项 margin:auto 的「安全居中」+ 容器可滚动。 */
  display: flex; justify-content: center;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(900px 500px at 50% 30%, #1d1147 0%, #0a0720 70%, #05030f 100%);
  text-align: center;
  padding: 24px;
}
.start-inner { max-width: 680px; margin: auto; }
.start-toggle { display: inline-flex; margin: 0 auto 22px; }
.start-logo {
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 1.4;
  color: var(--yellow);
  text-shadow: 0 0 14px var(--yellow), 6px 6px 0 #6a4b00;
  animation: flicker 4s infinite;
}
.start-logo span {
  display: block;
  font-size: 20px;
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan);
  margin-top: 10px;
}
.start-sub { margin: 18px 0 20px; }

/* 开场画面的「本局题材」卡片（开局随机抽，可换） */
.scenario-card {
  margin: 0 auto 26px;
  max-width: 560px;
  padding: 14px 16px;
  border: 2px solid var(--magenta);
  border-radius: 8px;
  background: rgba(255, 46, 136, .08);
  box-shadow: 0 0 14px rgba(255, 46, 136, .25);
}
.scenario-card-label {
  font-size: 12px; letter-spacing: 2px;
  color: var(--magenta);
  text-shadow: 0 0 6px rgba(255, 46, 136, .5);
  margin-bottom: 6px;
}
.scenario-card-label .en { display: block; }
.scenario-card-label .zh { display: block; margin-top: 3px; font-size: 12px; }
.scenario-card-body { min-height: 44px; }
.scenario-card-title { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.scenario-card-hook { margin-top: 6px; font-size: 15px; color: var(--muted); line-height: 1.6; }
/* 题材卡内容中英双行：中文在上，英文小字在下（开始画面无语言切换按钮） */
.scenario-card-title .zh, .scenario-card-title .en,
.scenario-card-hook .zh, .scenario-card-hook .en { display: block; }
.scenario-card-title .en {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .5px;
}
.scenario-card-hook .zh { color: #cfe4ff; }
.scenario-card-hook .en { margin-top: 4px; font-size: 13px; color: var(--muted); }
.btn-shuffle-start {
  margin-top: 14px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  background: transparent;
  color: var(--cyan);
  border: 2px solid var(--cyan);
  border-radius: var(--radius);
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: 3px 3px 0 #0a4661;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn-shuffle-start span { display: block; }
.btn-shuffle-start:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0a4661; }

/* 清除存档：故意做得比两个主按钮低调——它是机房维护用的，不是玩家的主要动作。 */
.btn-clear-saves {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 5px 11px;
  cursor: pointer;
}
.btn-clear-saves:hover { color: var(--cyan); border-color: var(--cyan); }
.btn-clear-saves span { display: block; }
.start-sub .en {
  font-size: 20px;
  color: var(--cyan);
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(0, 240, 255, .4);
}
.start-sub .zh {
  margin-top: 6px;
  font-size: 17px;
  color: var(--muted);
  letter-spacing: 1px;
}
.start-btn {
  font-family: var(--font-display);
  font-size: 18px;
  color: #1a1400;
  background: var(--yellow);
  border: 3px solid #fff;
  border-radius: var(--radius);
  padding: 18px 32px;
  cursor: pointer;
  box-shadow: 6px 6px 0 #6a4b00;
  animation: blink 1.1s steps(1) infinite;
  transition: transform .08s ease, box-shadow .08s ease;
}
.start-btn span { display: block; }
.start-btn .zh { font-family: var(--font-body); font-size: 17px; margin-top: 6px; }
.start-btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #6a4b00; }
.start-hint { margin-top: 30px; }
.start-hint .en { font-size: 15px; color: var(--ink); letter-spacing: 1px; }
.start-hint .zh { margin-top: 5px; font-size: 14px; color: var(--muted); letter-spacing: 1px; }

/* ============ 彩蛋：页眉星标 + 面板 ============ */
.egg-star {
  margin-left: 8px;
  color: var(--yellow);
  font-size: 15px;
  text-shadow: 0 0 8px rgba(255, 230, 0, .7);
  animation: blink 1.6s steps(1) infinite;
}
.egg-panel {
  position: fixed; inset: 0;
  z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(4, 3, 12, .88);
}
.egg-panel.hidden { display: none; }
.egg-inner {
  max-width: 620px;
  padding: 26px 26px 22px;
  border: 2px solid var(--yellow);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 0 26px rgba(255, 230, 0, .3), 6px 6px 0 #6a4b00;
}
.egg-title .en {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--yellow);
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255, 230, 0, .5);
}
.egg-title .zh { display: block; margin-top: 8px; font-size: 17px; font-weight: 700; color: var(--ink); }
.egg-body { margin: 16px 0 20px; }
.egg-body .en { display: block; font-size: 15px; color: var(--muted); line-height: 1.7; }
.egg-body .zh { display: block; margin-top: 10px; font-size: 15px; color: var(--ink); line-height: 1.8; }

/* ============ 结局：完美通关徽章 ============ */
.ending-tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.perfect-badge {
  display: inline-block;
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  color: #1a1400;
  background: var(--yellow);
  border: 2px solid #fff;
  border-radius: var(--radius);
  padding: 4px 10px;
  box-shadow: 0 0 14px rgba(255, 230, 0, .55);
  animation: blink 1.4s steps(1) infinite;
}
.perfect-note {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--yellow);
  line-height: 1.7;
}

/* ============ 复盘归因：把结论对回第几步 ============ */
.attribution {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--cyan);
  background: rgba(0, 240, 255, .06);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.attribution-note { margin: 0 0 8px; font-size: 13px; color: var(--cyan); letter-spacing: .5px; }
.attr-boxes { list-style: none; margin: 0; padding: 0; }
.attr-box { margin-bottom: 10px; }
.attr-box:last-child { margin-bottom: 0; }
.attr-box-name { display: block; font-size: 14px; color: var(--ink); }
.attr-moves { list-style: none; margin: 5px 0 0; padding: 0; }
.attr-move {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  font-size: 14px; line-height: 1.6; color: var(--muted);
}
.attr-step { color: var(--cyan); font-size: 12px; letter-spacing: 1px; }
.attr-act {
  flex: 1 1 100%;
  font-size: 11px; letter-spacing: .5px;
  color: var(--purple);
  opacity: .9;
}
.attr-choice { color: var(--ink); }
.attr-delta { font-weight: 700; }
/* 归因里的增减：颜色按「对你好不好」，不是按数字正负（避免风险+4 被涂成绿色） */
.attr-delta.good { color: var(--green); }
.attr-delta.bad { color: var(--red); }

/* ============ 分数总账（结局页）：逐维度对账 ============ */
.ledger { border-color: rgba(0, 240, 255, .35); }
.ledger-note {
  margin: 0 0 14px;
  font-size: 13px; line-height: 1.7;
  color: var(--muted);
}
.ledger-group { margin-bottom: 16px; }
.ledger-group:last-child { margin-bottom: 0; }
.ledger-rows { list-style: none; margin: 0; padding: 0; }
.ledger-row {
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.ledger-row:first-child { border-top: none; padding-top: 2px; }
.ledger-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px;
}
.ledger-label {
  flex: 1 1 auto;
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.ledger-journey {
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ledger-net {
  font-size: 14px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ledger-net.good { color: var(--green); border-color: rgba(57, 255, 20, .6); }
.ledger-net.bad { color: var(--red); border-color: rgba(255, 59, 92, .6); }
.ledger-net.flat { color: var(--muted); }
.ledger-moves { margin-top: 6px; }
.ledger-moves-label {
  display: block;
  font-size: 11px; letter-spacing: .5px;
  color: var(--cyan);
  opacity: .85;
}
.ledger-none {
  margin-top: 4px;
  font-size: 13px; color: var(--muted); font-style: italic;
}

/* ============ 悬停高亮：仅在真正支持悬停的设备上生效 ============
   触屏设备点按后 :hover 会“粘住”，使新渲染出来的选项看起来像被预先
   选中，容易误导玩家。用 (hover: hover) and (pointer: fine) 限定后，
   移动端只会保留 :active 的瞬时反馈，不会再出现预设高亮。 */
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { background: var(--cyan); color: #06121a; }

  .choice:hover:not(:disabled) {
    background: var(--magenta);
    color: #fff;
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 #5a0f33;
    text-shadow: 0 0 6px #fff;
  }
  .choice:hover:not(:disabled)::before { color: #fff; }

  .btn-restart:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #6a4b00; }
  .btn-shuffle:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #0a4661; }
  .btn-shuffle-start:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #0a4661; }
  .start-btn:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 #6a4b00; }
}

/* 触屏点按时不要出现默认的半透明灰色闪烁块（也会被误认为“已选中”） */
button, .choice, .icon-btn, .lang-toggle button {
  -webkit-tap-highlight-color: transparent;
}

/* ============ 动画 ============ */
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: .25; } }
@keyframes flicker {
  0%, 19%, 21%, 55%, 57%, 100% { opacity: 1; }
  20%, 56% { opacity: .55; }
}
@keyframes dangerPulse {
  0%, 100% { box-shadow: 0 0 6px var(--red); }
  50% { box-shadow: 0 0 14px var(--red), 0 0 22px var(--red); }
}

@media (prefers-reduced-motion: reduce) {
  .brand, .start-logo, .start-btn, .dim.danger .dim-seg.on { animation: none !important; }
}

/* ============ 响应式：桌面与移动端适配 ============ */
@media (max-width: 720px) {
  #app-header { padding: 12px 16px; }
  .brand { font-size: 18px; }
  .brand-en { font-size: 12px; }
  #app { padding: 16px; }
  #scenario-title { font-size: 18px; }
  .node-text { font-size: 17px; padding: 12px 14px; }
  .brief { padding: 11px 12px; margin-bottom: 14px; }
  .brief-title { font-size: 12px; letter-spacing: 1px; margin-bottom: 8px; }
  .brief-row { font-size: 14px; line-height: 1.5; margin-bottom: 5px; }
  .brief-key { min-width: 4.4em; }
  .brief-para { font-size: 15px; }
  .choices-head { font-size: 15px; }
  .choice { font-size: 17px; padding: 12px 14px; }
  .dim-label { font-size: 14px; }
  .dim-val { font-size: 13px; }
  .dim-seg { height: 11px; }
  #trace-list li { font-size: 16px; }
  .trace-final-label { font-size: 14px; }
  .trace-final-value { font-size: 15px; }
  .ending { padding: 22px 18px; }
  .ending h2 { font-size: 21px; }
  .debrief { padding: 12px 12px; }
  .debrief-title { font-size: 15px; }
  .debrief-body, .mitigation { font-size: 15px; }
  .trace-item { padding: 10px 12px; }
  .trace-choice { font-size: 16px; }
  .chip { font-size: 13px; }
  .scenario-card { padding: 12px 12px; margin-bottom: 18px; }
  .scenario-card-title { font-size: 16px; }
  .scenario-card-label .en, .scenario-card-label .zh { font-size: 11px; }
  .start-logo { font-size: 30px; }
  .start-logo span { font-size: 14px; }
  .start-btn { font-size: 14px; padding: 14px 22px; }
  .egg-inner { padding: 20px 18px 18px; }
  .egg-title .en { font-size: 13px; }
  .egg-body .en, .egg-body .zh { font-size: 14px; }
  .attribution { padding: 10px 12px; }
  .attr-move { font-size: 13px; }
  .attr-choice { flex: 1 1 100%; }
}