/* ============================================================
   末日求生 · 四世界观生存模拟 — 主题样式 v4
   设计：温暖米白底 + 精致卡片 + 四世界观专属强调色
   v4 改动：正式游戏界面改左右双栏仪表盘、工具栏成栏、
   行动/制作 2 列网格压缩高度、右侧栏 sticky 常驻、
   面板世界色左边框描边、排行榜弹窗竖向卡片、响应式补全
   ============================================================ */

:root {
  --bg-1: #f4f1ea;
  --bg-2: #eae4d6;
  --panel: #ffffff;
  --ink: #2c2821;
  --muted: #8b8172;
  --line: #e6dfd0;
  --accent: #3f7d4f;
  --accent-d: #2e6240;
  --warn: #d9a13c;
  --danger: #cf4f45;
  --radius: 16px;
  --shadow-1: 0 2px 8px rgba(56, 46, 28, .05);
  --shadow-2: 0 12px 32px rgba(56, 46, 28, .10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  background:
    radial-gradient(900px 420px at 85% -8%, rgba(140, 170, 120, .18) 0%, rgba(140,170,120,0) 60%),
    radial-gradient(700px 380px at -10% 100%, rgba(200, 170, 120, .16) 0%, rgba(200,170,120,0) 55%),
    linear-gradient(165deg, var(--bg-1) 0%, var(--bg-1) 45%, var(--bg-2) 100%);
}

.gm-wrap { max-width: 1120px; margin: 0 auto; padding: 26px 20px 60px; }

/* ---------- 页头 ---------- */
.gm-header { text-align: center; margin-bottom: 20px; position: relative; }
.gm-header h1 { margin: 0; font-size: 32px; letter-spacing: 3px; line-height: 1.2; }
.gm-sub { margin: 6px 0 10px; color: var(--muted); font-size: 14px; letter-spacing: 1px; }
.gm-badge {
  display: inline-block; padding: 4px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: #eef4e8; color: var(--accent-d); border: 1px solid #d6e3c8; letter-spacing: 1px;
}
.gm-badge.w-steel  { background: #f7eee2; color: #7a4f26; border-color: #e3cdb0; }
.gm-badge.w-island { background: #e8f2f4; color: #1c4a68; border-color: #c4dde2; }
.gm-badge.w-virus  { background: #fbeaea; color: #8c2f2f; border-color: #e8bfbf; }
.gm-badge.w-rad    { background: #eef0e8; color: #4f6042; border-color: #cdd6c2; }

/* ---------- 全局排行榜 ---------- */
.gm-lbpanel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 18px; margin-bottom: 18px; box-shadow: var(--shadow-1);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.gm-lbhead { display: flex; align-items: center; gap: 10px; flex: none; }
.gm-lbhead h2 { margin: 0; font-size: 15px; white-space: nowrap; }
.gm-lbfilter { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.gm-lbfilter button {
  padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 12.5px; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.gm-lbfilter button:hover { border-color: var(--accent); }
.gm-lbfilter button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.gm-restart-btn {
  padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 12.5px; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.gm-restart-btn:hover { background: #f6f1e7; border-color: #d8cdb6; }

/* ---------- 全局工具栏（排行榜 / 成就 / 遗志 / 重开）---------- */
.gm-toolbar {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin: 2px 0 18px; padding: 10px 14px; border-radius: var(--radius);
  background: rgba(255,255,255,.58); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  backdrop-filter: blur(4px);
}
.gm-toolbar .gm-restart-btn { font-size: 13.5px; padding: 7px 16px; }
.gm-boardlist-h {
  list-style: none; counter-reset: rank; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px; flex: 1;
}
.gm-boardlist-h li {
  counter-increment: rank; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 6px; background: #faf7f0; border-radius: 999px; font-size: 12.5px;
}
.gm-boardlist-h li::before {
  content: counter(rank); width: 20px; height: 20px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
}
.gm-boardlist-h li span { display: flex; align-items: center; gap: 4px; }
.gm-boardlist-h li b { color: var(--accent-d); }
.gm-empty { color: var(--muted); font-size: 12.5px; }

/* 排行榜弹窗列表（竖向卡片 + 名次圈） */
.gm-boardlist {
  list-style: none; margin: 0; padding: 2px; max-height: 54vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; text-align: left; counter-reset: rk;
}
.gm-boardlist li {
  counter-increment: rk; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: #faf7f0; border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px;
}
.gm-boardlist li::before {
  content: counter(rk); flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
}
.gm-boardlist li:first-child::before { background: #c9a227; }
.gm-boardlist li:nth-child(2)::before { background: #9aa0a6; }
.gm-boardlist li:nth-child(3)::before { background: #b07a43; }
.gm-boardlist li span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.gm-boardlist li b { color: var(--accent-d); font-size: 14px; flex: none; }
.gm-boardlist::-webkit-scrollbar { width: 8px; }
.gm-boardlist::-webkit-scrollbar-thumb { background: #d8d0be; border-radius: 4px; }
.gm-diff-tag { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: #f0e9da; color: var(--muted); }

/* ---------- 四世界观共用布局 ---------- */
.js-wrap { display: block; }
.hidden { display: none !important; }

.js-topbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.js-day { font-size: 20px; font-weight: 800; }
.js-day span { color: var(--w-accent-d, var(--accent-d)); }
.js-weather { font-size: 13.5px; font-weight: 600; padding: 6px 13px; background: var(--w-soft, #eef4e8); border: 1px solid var(--w-line, #d6e3c8); border-radius: 999px; color: var(--w-accent-d, var(--accent-d)); }
.js-progress { font-size: 13.5px; font-weight: 700; padding: 6px 13px; border-radius: 999px; }
.js-progress b { font-size: 15px; }

.js-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.js-stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 8px; display: flex; flex-direction: column; gap: 7px; align-items: center; text-align: center;
  box-shadow: var(--shadow-1);
}
.js-ic { line-height: 1; }
.js-bar { width: 100%; height: 8px; background: #ece6d8; border-radius: 6px; overflow: hidden; }
.js-bar i { display: block; height: 100%; background: var(--w-accent, var(--accent)); transition: width .35s ease, background .35s ease; }
.js-stat b { font-size: 12.5px; }
.js-stat em { font-style: normal; font-size: 10.5px; color: var(--muted); }

.js-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.js-main { min-width: 0; }
.js-side { min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 14px; align-self: start; }
.js-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; align-items: start; }
.js-panel {
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--w-accent, var(--accent));
  border-radius: var(--radius);
  padding: 15px 16px; box-shadow: var(--shadow-1);
}
.js-panel h2 { margin: 0 0 12px; font-size: 15.5px; letter-spacing: .5px; }
.js-subhead { margin: 16px 0 8px; font-size: 12.5px; color: var(--muted); font-weight: 600; letter-spacing: 1px; }
.js-locdesc { margin: -6px 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.65; }

/* 地点 */
.js-loclist { display: flex; flex-direction: column; gap: 8px; }
.js-loc {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: #faf7f0; color: var(--ink);
  font-size: 13.5px; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .08s ease;
}
.js-loc:hover:not(.cur) { border-color: var(--w-accent, var(--accent)); background: var(--w-soft, #eef4e8); transform: translateY(-1px); }
.js-loc.cur { border-color: var(--w-accent, var(--accent)); background: var(--w-soft, #e4efdd); font-weight: 700; cursor: default; }
.js-loc.dim { opacity: .45; cursor: not-allowed; }

/* 行动 */
.js-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.js-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: #faf7f0; color: var(--ink);
  cursor: pointer; font-size: 13.5px; text-align: left;
  transition: border-color .15s ease, background .15s ease, transform .08s ease, opacity .15s ease;
}
.js-btn:hover:not(:disabled) { border-color: var(--w-accent, var(--accent)); background: var(--w-soft, #eef4e8); transform: translateY(-1px); }
.js-btn:active:not(:disabled) { transform: translateY(0); }
.js-btn:disabled { opacity: .42; cursor: not-allowed; }
.js-act-ic { font-size: 16px; flex: none; }
.js-act-name { flex: 1; font-weight: 600; }
.js-act-cost { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.js-crafts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.js-ctrl { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; margin-top: 16px; }
.js-ghost { justify-content: center; }
.js-primary {
  justify-content: center; color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--w-accent, var(--accent)), var(--w-accent-d, var(--accent-d)));
  font-weight: 700; letter-spacing: 1px;
}
.js-primary:hover:not(:disabled) { filter: brightness(1.08); background: linear-gradient(135deg, var(--w-accent, var(--accent)), var(--w-accent-d, var(--accent-d))); }
.js-primary:disabled { opacity: .5; }

/* 背包 / 物品 */
.js-inv { display: flex; flex-wrap: wrap; gap: 7px; }
.js-item { font-size: 12px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); background: #faf7f0; display: inline-flex; align-items: center; gap: 4px; }
.js-item b { font-size: 11.5px; }
.js-item.base { border-color: #bcd8ae; color: #3f7d4f; background: #f0f7ec; }
.js-item.craft { border-color: #a8c4e2; color: #3a6ea5; background: #eff5fb; }
.js-item.rare { border-color: #d3b7e3; color: #7a4f9e; background: #f8f1fc; }
.js-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.js-part { font-size: 11.5px; padding: 4px 9px; border-radius: 999px; border: 1px dashed var(--line); color: var(--muted); background: #faf7f0; }
.js-part.got { border-style: solid; border-color: var(--w-accent, var(--accent)); color: var(--w-accent-d, var(--accent-d)); background: var(--w-soft, #eef4e8); font-weight: 600; }
.js-know { display: flex; flex-wrap: wrap; gap: 6px; }
.js-hint { color: var(--muted); font-size: 12.5px; margin: 4px 0; }
.js-midrow { margin-bottom: 14px; }
.js-gear { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }

/* 日志 */
.js-logpanel { margin-top: 14px; }
.js-log {
  list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.6;
}
.js-log li { padding: 8px 11px; background: #faf7f0; border-left: 3px solid var(--w-accent, var(--accent)); border-radius: 7px; }
.js-log::-webkit-scrollbar { width: 8px; }
.js-log::-webkit-scrollbar-thumb { background: #d8d0be; border-radius: 4px; }

/* ---------- 四世界观主题色 ---------- */
#island-ui { --w-accent: #2e7d5b; --w-accent-d: #235f45; --w-soft: #e9f3ec; --w-line: #cfe0d2; }
#steel-ui  { --w-accent: #a05a2c; --w-accent-d: #7d4521; --w-soft: #f7efe5; --w-line: #e6d3ba; }
#virus-ui  { --w-accent: #b33a2e; --w-accent-d: #8c2a21; --w-soft: #fcecea; --w-line: #eac4be; }
#rad-ui    { --w-accent: #647a55; --w-accent-d: #4b5c40; --w-soft: #eef1e9; --w-line: #d3dcc9; }

/* ============================================================
   孤岛潮声 · 活岛生态专属面板样式
   ============================================================ */

/* —— 潮汐与季风盘（右上角常驻） —— */
.js-tidedial {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px;
  background: var(--w-soft, #e9f3ec); border: 1px solid var(--w-line, #cfe0d2); color: var(--w-accent-d, #235f45);
}
.js-tidedial b { font-weight: 800; }
.js-td-sep { color: var(--muted); font-weight: 400; }
.js-td-sub { font-size: 11px; font-weight: 500; opacity: .85; }
.js-td-moon {
  display: inline-flex; align-items: center; gap: 2px; margin-left: 2px;
  color: #b8891f; background: #fff7e0; border: 1px solid #ecd79a; border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700;
}
.js-td-moon .ic-svg { width: 13px; height: 13px; }

/* —— 理智四态条 —— */
.js-sanity-state {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 9px 13px; border-radius: 12px; font-size: 13px;
  border: 1px solid var(--line); background: #faf7f0;
}
.js-sanity-state .ic-svg { width: 17px; height: 17px; }
.js-sanity-state b { font-weight: 800; }
.js-sanity-state .js-ss-tip { font-size: 11.5px; color: var(--muted); font-weight: 400; margin-left: auto; }
.js-sanity-state.ss-civ  { border-color: #b9d8c4; background: #eef7f1; color: #2e7d5b; }
.js-sanity-state.ss-sur  { border-color: #cfe0d2; background: #eef4ec; color: #4a6b4f; }
.js-sanity-state.ss-spir { border-color: #d8c8e8; background: #f6f0fb; color: #7a4f9e; }
.js-sanity-state.ss-sea  { border-color: #e8c4be; background: #fdecec; color: #b33a2e; }

/* —— 变体规则 chips —— */
.js-rules { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.js-rule-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; background: #fbeaea; color: #8c2f2f; border: 1px solid #e8bfbf;
}
.js-rule-chip .ic-svg { width: 13px; height: 13px; }

/* —— 梦呓横幅 —— */
.js-dream {
  display: flex; align-items: flex-start; gap: 9px; margin: 0 0 12px; padding: 11px 13px;
  border-radius: 12px; background: linear-gradient(135deg, #f3ecfb, #eaf1f8); border: 1px solid #d9cde8; color: #4a3a6a;
}
.js-dream .ic-svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.js-dream-body { flex: 1; min-width: 0; }
.js-dream-tx { font-size: 13px; line-height: 1.6; font-style: italic; }
.js-dream-btns { display: flex; gap: 8px; margin-top: 8px; }
.js-dream-btn { padding: 6px 13px; border-radius: 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.js-dream-btn.js-primary { background: linear-gradient(135deg, #6a4f9e, #4a3a6a); color: #fff; }
.js-dream-btn.js-ghost { background: #fff; color: #6a4f9e; border-color: #d9cde8; }
.js-dream-btn:hover { filter: brightness(1.05); }

/* —— 三层自然秩序 + 生灵羁绊 —— */
.js-order { display: flex; flex-direction: column; gap: 9px; }
.js-order-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.js-order-name { flex: none; min-width: 84px; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.js-order-name .ic-svg { width: 15px; height: 15px; }
.js-order-pips, .js-bond-pips { display: inline-flex; gap: 3px; }
.js-order-tip { color: var(--muted); font-size: 11.5px; }
.js-pip {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: #ece6d8; border: 1px solid #ddd4c1; transition: background .2s ease, border-color .2s ease;
}
.js-pip.on { background: var(--w-accent, #3f7d4f); border-color: var(--w-accent-d, #2e6240); }
.js-pip.on.bad { background: #cf4f45; border-color: #a83a31; }
.js-pip.on.max { background: #2e7d8c; border-color: #1f5a66; }
.js-bond-row { margin-top: 2px; padding-top: 9px; border-top: 1px dashed var(--line); }
.js-bp { display: inline-flex; align-items: center; gap: 4px; }
.js-bp + .js-bp { margin-left: 12px; }
.js-bp .ic-svg { width: 16px; height: 16px; }

/* —— 技能精进 —— */
.js-skills { display: flex; flex-direction: column; gap: 9px; }
.js-skill-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.js-skill-ic {
  width: 26px; height: 26px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--w-soft, #eef4e8); border: 1px solid var(--w-line, #d6e3c8); color: var(--w-accent-d, #2e6240);
}
.js-skill-ic .ic-svg { width: 15px; height: 15px; }
.js-skill-name { flex: none; min-width: 56px; font-weight: 700; }
.js-skill-pips { display: inline-flex; gap: 3px; }
.js-skill-lv { margin-left: auto; font-size: 11.5px; color: var(--muted); font-weight: 700; }

/* —— 海洋信物 —— */
.js-reliccount { font-size: 12px; color: var(--muted); font-weight: 700; }
.js-relics { display: flex; flex-wrap: wrap; gap: 6px; }
.js-relic {
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--line);
  color: var(--muted); background: #faf7f0; display: inline-flex; align-items: center; gap: 4px;
}
.js-relic .ic-svg { width: 14px; height: 14px; }
.js-relic.got { border-style: solid; border-color: #7a4f9e; color: #5d3a7a; background: #f8f1fc; font-weight: 600; }


/* 病毒之城 / 辐射尘埃 专属 */
.vx-deadline { background: #fdecec; border-color: #e8b4b4; color: #b33a2e; }
.vx-pol { font-style: normal; font-size: 10px; color: var(--muted); margin-left: auto; }
.vx-sick .js-log li { opacity: .8; }
.vx-mad .js-log li { text-shadow: 1px 0 0 rgba(200,60,50,.35); letter-spacing: 1px; }
.vx-mad .js-act-name { color: #a8362c; }
.vx-mad .js-loc { border-color: #e8b4b4; }

/* 红泪之城 · 扩展面板 */
.vx-threat { font-size: 11.5px; color: #b33a2e; margin: 2px 0 8px; line-height: 1.4; }
#vx-bar-resist { background: #7d5fff; }
.js-variant { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.js-variant-chip { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: #fcecea; border: 1px solid #eac4be; color: #8c2a21; display: inline-flex; align-items: center; gap: 4px; }
.js-variant-none { font-size: 11px; color: var(--muted); }
.js-fac { display: flex; flex-direction: column; gap: 10px; }
.js-fac-row { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: #fff; }
.js-fac-row.locked { opacity: .55; }
.js-fac-head { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.js-fac-rep { display: inline-flex; gap: 3px; margin-left: auto; }
.js-rep { width: 9px; height: 9px; border-radius: 50%; background: #e3d7d3; display: inline-block; }
.js-rep.on { background: var(--w-accent, #b33a2e); }
.js-facact { font-size: 12px; width: 100%; margin-top: 4px; }
.js-fac-lock { font-size: 11px; color: var(--muted); font-style: italic; }

.rx-deadline { background: #eef4e8; border-color: #d6e3c8; color: #3f7d4f; }
.rx-mild .js-panel { box-shadow: 0 0 14px rgba(90, 180, 90, .20); }
.rx-mid .js-log li { opacity: .85; }
.rx-sev .js-log li { animation: rx-shake .4s infinite; }
.rx-mad .js-log li { color: #7a6a3a; font-style: italic; }
@keyframes rx-shake { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(1px); } 70% { transform: translateX(-1px); } }

/* ---------- Toast ---------- */
.gm-toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px);
  background: #2f2417; color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  z-index: 60; max-width: 90vw; box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.gm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.gm-toast.bad { background: #a8362c; }

/* ---------- 弹窗 ---------- */
.gm-overlay { position: fixed; inset: 0; background: rgba(40, 34, 24, .55); display: grid; place-items: center; z-index: 50; padding: 16px; backdrop-filter: blur(3px); }
.gm-overlay.hidden { display: none; }
.gm-modal { background: #fff; border-radius: 20px; padding: 26px; width: min(430px, 94vw); text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,.32); }
.gm-modal h2 { margin: 0 0 8px; font-size: 21px; letter-spacing: 1px; }
.gm-over-sum { margin: 0 0 12px; color: var(--ink); font-size: 14.5px; }
.gm-over-sum span { color: var(--accent-d); font-weight: 700; }
.gm-cause { display: inline-block; margin: 0 0 14px; padding: 5px 14px; border-radius: 999px; background: #fbeae8; color: var(--danger); font-size: 13px; font-weight: 600; }
.gm-finalstats { display: flex; justify-content: center; gap: 20px; margin-bottom: 14px; font-size: 12.5px; color: var(--muted); }
.gm-finalstats b { display: block; font-size: 18px; color: var(--ink); margin-top: 2px; }
.gm-finalach { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 16px; }
.gm-endtext { display: block; margin: 0 auto 14px; padding: 13px 15px; max-width: 92%; border-radius: 13px; background: #f4edf7; color: #5d3a7a; font-size: 13.5px; line-height: 1.75; text-align: left; }
.gm-cause.hidden, .gm-endtext.hidden { display: none; }
.gm-modal input { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; font-size: 15px; margin-bottom: 14px; }
.gm-modal input:focus { outline: none; border-color: var(--accent); }
.gm-modal-btns { display: flex; gap: 10px; }
.gm-modal-btns button { flex: 1; padding: 11px; border-radius: 11px; cursor: pointer; font-size: 14px; border: 1px solid var(--line); transition: background .15s ease; }
.gm-primary { background: var(--accent); color: #fff; border-color: transparent !important; font-weight: 700; }
.gm-primary:hover { background: var(--accent-d); }
.gm-ghost { background: #fff; }
.gm-ghost:hover { background: #f7f3ea; }
.gm-badge2 { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--line); color: var(--muted); background: #faf7f0; }
.gm-badge2.got { border-style: solid; border-color: var(--accent); color: var(--accent-d); background: #eef4e8; font-weight: 600; }

/* 难度选择 */
.gm-diff-options { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 2px; }
.gm-diff-opt {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: #faf7f0;
  cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease, transform .08s ease;
}
.gm-diff-opt:hover { border-color: var(--accent); background: #eef4e8; transform: translateY(-1px); }
.gm-diff-opt:active { transform: translateY(0); }
.gm-diff-opt .gm-diff-ic { font-size: 24px; }
.gm-diff-opt .gm-diff-name { font-weight: 700; font-size: 15px; }
.gm-diff-opt .gm-diff-desc { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* 剧情弹窗 */
.js-story-text { margin: 0 0 16px; color: var(--ink); font-size: 14px; line-height: 1.75; text-align: left; }

/* 成就总览 */
.gm-achmodal { max-height: 86vh; display: flex; flex-direction: column; }
.gm-achlist { overflow-y: auto; text-align: left; padding: 4px 6px; margin-bottom: 14px; flex: 1; }
.ach-group { margin: 12px 0 8px; font-size: 13.5px; color: var(--muted); letter-spacing: 1px; }
.ach-group:first-child { margin-top: 0; }
.ach-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.js-story-options { display: flex; flex-direction: column; gap: 9px; }
.js-story-opt {
  display: flex; align-items: center; gap: 11px; padding: 12px 13px;
  border: 1px solid var(--line); border-radius: 13px; background: #faf7f0;
  cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease;
}
.js-story-opt:hover:not(:disabled) { border-color: #7a4f9e; background: #f8f1fc; }
.js-story-opt.dim { opacity: .45; cursor: not-allowed; }
.js-story-ic { font-size: 21px; }
.js-story-name { font-weight: 700; font-size: 14px; }
.js-story-desc { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* ---------- 四世界观卡片选择 ---------- */
.gw-card {
  position: relative;   /* 「新手推荐」角标（.gw-rec）的定位上下文 */
  display: flex; align-items: center; gap: 16px; padding: 18px 16px;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.14); color: #fff;
  cursor: pointer; text-align: left; transition: transform .1s ease, box-shadow .15s ease;
}
.gw-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.3); }
.gw-card:active { transform: translateY(0); }
.gw-ic { font-size: 34px; flex: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.gw-body { flex: 1; min-width: 0; }
.gw-title { font-size: 18px; font-weight: 800; letter-spacing: 2px; }
.gw-slogan { font-size: 12.5px; margin: 3px 0 7px; opacity: .9; }
.gw-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.gw-tags em { font-style: normal; font-size: 11px; padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.18); }
.gw-meta { font-size: 11.5px; opacity: .78; line-height: 1.8; }
.gw-steel  { background: linear-gradient(135deg, #3d3123, #7a4f26); }
.gw-island { background: linear-gradient(135deg, #1c4a68, #2e7d8c); }
.gw-virus  { background: linear-gradient(135deg, #571b1b, #932e2e); }
.gw-rad    { background: linear-gradient(135deg, #34392f, #5d6e4e); }

/* ============================================================
   开局四步流程（暗色启动页）
   ============================================================ */
.boot {
  position: fixed; inset: 0; z-index: 100; overflow-y: auto;
  background: #14161a;
  color: #e8e6df;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 34px 18px 60px;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
.boot.hidden { display: none; }
.boot-bg { position: fixed; inset: 0; z-index: 0; transition: background 1s ease; pointer-events: none; }
.boot-restored {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 999;
  background: rgba(20,24,32,.92); color: #d8e3c8; border: 1px solid rgba(140,180,110,.45);
  padding: 9px 20px; border-radius: 999px; font-size: 13px; box-shadow: 0 6px 24px rgba(0,0,0,.5);
  animation: br-in .3s ease; transition: opacity .5s ease;
}
.boot-restored.out { opacity: 0; }
@keyframes br-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.boot-inner { position: relative; z-index: 1; width: min(1060px, 96vw); }
.boot-steps { display: flex; gap: 10px; justify-content: center; margin-bottom: 26px; flex-wrap: wrap; }
.bs { padding: 7px 16px; border-radius: 999px; font-size: 13px; color: #8b8a84; border: 1px solid #33363d; opacity: .6; transition: all .2s ease; }
.bs.active { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: #fff; opacity: 1; font-weight: 700; }

.bs-panel { display: none; }
.bs-panel.active { display: block; animation: bpIn .35s ease; }
@keyframes bpIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.bp-title { font-size: 26px; font-weight: 800; letter-spacing: 2px; margin: 0 0 6px; text-align: center; }
.bp-sub { text-align: center; color: #a4a29a; font-size: 13.5px; margin: 0 0 22px; }

.boot-worlds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.bw-card { transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; }
.bw-card.picked { outline: 2px solid #fff; transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.5); }

.boot-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.br-card {
  position: relative; padding: 16px 16px 14px; border-radius: 16px; cursor: pointer;
  background: linear-gradient(165deg, #23272f 0%, #191c22 100%);
  border: 1px solid #33363d; text-align: left;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
/* 顶部渐变光条 */
.br-card::before {
  content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(217,180,106,.75), transparent);
  opacity: 0; transition: opacity .2s ease;
}
.br-card:hover { transform: translateY(-3px); border-color: #5a5f6a; box-shadow: 0 12px 26px rgba(0,0,0,.35); }
.br-card:hover::before { opacity: 1; }
.br-card.picked {
  border-color: #d9b46a;
  background: linear-gradient(165deg, #2d2718 0%, #1f1c13 100%);
  box-shadow: 0 0 0 1px rgba(217,180,106,.3), 0 10px 26px rgba(0,0,0,.42);
}
.br-card.picked::before { opacity: 1; }
.br-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.br-avatar {
  width: 54px; height: 54px; border-radius: 15px; flex: none;
  display: grid; place-items: center; font-size: 27px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.22), transparent 52%),
    linear-gradient(140deg, var(--av), #101218);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 10px rgba(0,0,0,.35);
}
.br-id { min-width: 0; }
.br-name { font-weight: 800; font-size: 16.5px; letter-spacing: .5px; }
.br-tag { color: #8f8d85; font-size: 11.5px; margin-top: 3px; }
.br-check {
  margin-left: auto; width: 24px; height: 24px; border-radius: 50%; flex: none;
  border: 1.5px solid #4a4e56; color: transparent;
  display: grid; place-items: center; font-size: 12px; font-weight: 900;
  transition: all .18s ease;
}
.br-card.picked .br-check { background: #d9b46a; border-color: #d9b46a; color: #1a1408; }
.br-skills { display: flex; flex-direction: column; gap: 6px; }
.br-chip {
  font-size: 11.5px; line-height: 1.45; padding: 6px 10px; border-radius: 9px;
  display: flex; align-items: center; gap: 6px;
}
.br-chip.talent { background: rgba(217,180,106,.09); border: 1px solid rgba(217,180,106,.28); color: #e6c87e; }
.br-chip.skill  { background: rgba(112,132,224,.1);  border: 1px solid rgba(112,132,224,.3);  color: #a9b6e8; }

.bs3-grid { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.setgroup { margin-bottom: 14px; }
.setgroup h4 { margin: 0 0 8px; font-size: 13px; color: #a4a29a; letter-spacing: 1px; }
.optrow { display: flex; flex-wrap: wrap; gap: 7px; }
.opt {
  padding: 7px 13px; border-radius: 999px; border: 1px solid #3a3e46; background: #1d2026;
  color: #c9c6bc; font-size: 12.5px; cursor: pointer; transition: all .15s ease;
}
.opt:hover { border-color: #6a7080; }
.opt.picked { background: #d9b46a; color: #1a1408; border-color: #d9b46a; font-weight: 700; }
.presets { gap: 6px; }
.opt.preset { font-size: 12px; padding: 6px 11px; }

.rulebar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rule-col h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: 1px; }
.rc-red { color: #e0706a; }
.rc-green { color: #7fc97f; }
.rule-list { display: flex; flex-direction: column; gap: 5px; max-height: 300px; overflow-y: auto; padding-right: 4px; }
.rule-item {
  display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 9px;
  background: #1d2026; border: 1px solid #33363d; cursor: pointer; font-size: 12px;
}
.rule-item:hover { border-color: #5a5f6a; }
.rule-item.on { border-color: #6a7080; background: #242830; }
.rule-item input { accent-color: #d9b46a; }
.ri-ic { font-size: 14px; }
.ri-name { font-weight: 600; white-space: nowrap; }
.ri-desc { color: #8b8a84; font-size: 11px; margin-left: auto; }

.scorebox { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #1d2026; border: 1px solid #33363d; }
.score-main { font-size: 15px; font-weight: 800; }
.score-main b { color: #d9b46a; font-size: 20px; }
.score-main b.hot { color: #e0706a; }
.score-sub { color: #8b8a84; font-size: 12px; margin-top: 3px; }
.combobox { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.combo-tag { font-size: 11px; padding: 4px 9px; border-radius: 999px; background: #2a2418; color: #d9b46a; border: 1px solid #4a3d22; }
.expbox { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #1d2026; border: 1px solid #33363d; }
.exp-title { font-size: 12px; color: #a4a29a; letter-spacing: 1px; margin-bottom: 6px; }
.exp-line { font-size: 12px; color: #c9c6bc; margin: 3px 0; }

.boot-letter {
  white-space: pre-wrap; font-size: 14px; line-height: 1.9; color: #e0dccd;
  background: #1a1d22; border: 1px solid #33363d; border-radius: 14px;
  padding: 22px 26px; min-height: 180px; margin-bottom: 14px;
  font-family: "KaiTi", "STKaiti", serif; letter-spacing: 1px;
}
.boot-loadout { padding: 12px 16px; border-radius: 12px; background: #1d2026; border: 1px solid #33363d; }
.ld-title { font-size: 12px; color: #a4a29a; letter-spacing: 1px; margin-bottom: 8px; }
.ld-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ld-grid span { font-size: 12.5px; padding: 5px 12px; border-radius: 999px; background: #242830; border: 1px solid #3a3e46; }

.boot-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; gap: 12px; }
.bn-btn { padding: 11px 26px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; border: 1px solid #3a3e46; transition: all .15s ease; }
.bn-btn.ghost { background: transparent; color: #c9c6bc; }
.bn-btn.ghost:hover { background: #22252b; }
.bn-btn.primary { background: #d9b46a; color: #1a1408; border-color: #d9b46a; }
.bn-btn.primary:hover { filter: brightness(1.1); }
.bn-btn:disabled { opacity: .4; cursor: not-allowed; }
.bn-progress { font-size: 12.5px; color: #8b8a84; }
.hidden { display: none !important; }

@media (max-width: 820px) {
  .boot-worlds { grid-template-columns: 1fr; }
  .boot-roles { grid-template-columns: 1fr; }
  .bs3-grid { grid-template-columns: 1fr; }
  .rulebar { grid-template-columns: 1fr; }
}

/* ============================================================
   响应式（游戏主体）
   ============================================================ */
@media (max-width: 920px) {
  .js-grid { grid-template-columns: 1fr; }
  .js-side { position: static; }
  .js-row { grid-template-columns: 1fr; }
  .js-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .js-stats { grid-template-columns: repeat(2, 1fr); }
  .js-actions, .js-crafts { grid-template-columns: 1fr; }
  .gm-lbpanel { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   结局评分 / 遗志
   ============================================================ */
.gm-score-wrap { font-size: 14px; color: var(--muted); margin: 2px 0 6px; }
.gm-score-wrap b { font-size: 22px; color: var(--accent-d); font-weight: 800; margin: 0 3px; }
.gm-legacy-note { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.gm-days-tag { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 3px; }

/* 遗志纪念馆 */
.gm-memolist { text-align: left; }
.memo-total { font-size: 16px; color: var(--ink); }
.memo-total b { font-size: 26px; color: var(--accent-d); font-weight: 800; margin-right: 4px; }
.memo-tier { font-size: 13px; color: var(--ink); margin: 6px 0 10px; }
.memo-tier b { color: var(--accent-d); }
.memo-desc { font-size: 13.5px; color: var(--ink); background: #faf7f0; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; line-height: 1.7; margin: 0; }
.memo-note { font-size: 12px; color: var(--muted); margin-top: 10px; }

/* ============================================================
   SVG 美术层（场景插画 + 矢量图标）
   ============================================================ */

/* 开局背景：全屏场景 + 暗化叠加保证文字可读 */
#boot-bg { overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; }
#boot-bg > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#boot-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(8,10,14,.30), rgba(8,10,14,.74) 82%);
}

/* 世界卡片缩略插画 */
.gw-card { flex-wrap: wrap; }
.gw-scene {
  flex: 1 0 100%; border-radius: 12px; overflow: hidden; height: 110px; margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,.12); position: relative;
  background: #14161a; box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.gw-scene > svg { width: 100%; height: 100%; display: block; }
.gw-scene > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 游戏页头世界横幅 */
.gm-banner {
  border-radius: var(--radius); overflow: hidden; height: 120px; margin-bottom: 18px;
  border: 1px solid var(--line); box-shadow: var(--shadow-1); position: relative;
  background: #e9e4d6; background-size: cover; background-position: center;
}
.gm-banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(8,10,14,.28), transparent 40%, rgba(8,10,14,.45));
}
.gm-banner > svg { width: 100%; height: 100%; display: block; }

/* 矢量图标替换 emoji：inline-flex 行内对齐，图标随父级字号 em 自适应缩放 */
.js-ic {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; line-height: 1; color: var(--ink); gap: .35em;
}
.js-ic.svg-ic { color: #6b6354; }
.ic-svg { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex: none; }
.art-frame { position: relative; }

/* ===== 游戏屏随世界观切换的主题（固定全屏氛围层 + 世界强调色上提） ===== */
body { transition: background .6s ease; }

/* 世界强调色与柔和底色上提到 body：页头 / 徽章 / 弹窗 / toast 统一取色 */
body.w-island { --w-accent:#2e7d5b; --w-accent-d:#235f45; --w-soft:#e9f3ec; --w-line:#cfe0d2;
  background: linear-gradient(165deg,#eaf5f3 0%,#e0ede9 50%,#d3e6e4 100%); }
body.w-steel  { --w-accent:#a05a2c; --w-accent-d:#7d4521; --w-soft:#f7efe5; --w-line:#e6d3ba;
  background: linear-gradient(165deg,#f8f0e3 0%,#efe5d3 50%,#e7d8bf 100%); }
body.w-virus  { --w-accent:#b33a2e; --w-accent-d:#8c2a21; --w-soft:#fcecea; --w-line:#eac4be;
  background: linear-gradient(165deg,#f9eeec 0%,#f1ddda 50%,#ecd0cd 100%); }
body.w-rad    { --w-accent:#647a55; --w-accent-d:#4b5c40; --w-soft:#eef1e9; --w-line:#d3dcc9;
  background: linear-gradient(165deg,#f1f2ea 0%,#e7e9dc 50%,#dde1cf 100%); }

/* 固定全屏世界氛围背景：明显区别于其它世界，露在卡片缝隙 / 边距 / 页头之后 */
.gm-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-size: cover; background-position: center; transition: background-image .6s ease, opacity .6s ease; }
body.w-island .gm-bg {
  background-image:
    linear-gradient(180deg, rgba(10,13,16,.38), rgba(10,13,16,.55)),
    radial-gradient(900px 620px at 86% -8%, rgba(60,160,170,.20), transparent 60%),
    radial-gradient(120% 120% at 50% 42%, transparent 52%, rgba(0,0,0,.42)),
    url(/img/bg-island.jpg);
}
body.w-steel .gm-bg {
  background-image:
    linear-gradient(180deg, rgba(10,13,16,.40), rgba(10,13,16,.56)),
    radial-gradient(900px 620px at 86% -8%, rgba(200,130,60,.18), transparent 60%),
    radial-gradient(120% 120% at 50% 42%, transparent 52%, rgba(0,0,0,.44)),
    url(/img/bg-steel.jpg);
}
body.w-virus .gm-bg {
  background-image:
    linear-gradient(180deg, rgba(14,8,8,.42), rgba(14,8,8,.58)),
    radial-gradient(900px 620px at 86% -8%, rgba(190,60,60,.22), transparent 60%),
    radial-gradient(120% 120% at 50% 42%, transparent 52%, rgba(0,0,0,.46)),
    url(/img/bg-virus.jpg);
}
body.w-rad .gm-bg {
  background-image:
    linear-gradient(180deg, rgba(10,13,16,.40), rgba(10,13,16,.56)),
    radial-gradient(900px 620px at 86% -8%, rgba(130,160,90,.18), transparent 60%),
    radial-gradient(120% 120% at 50% 42%, transparent 52%, rgba(0,0,0,.44)),
    url(/img/bg-rad.jpg);
}

/* 内容浮于背景层之上 */
.gm-wrap { position: relative; z-index: 1; }

/* 页头随世界取色：标题描边 + 世界色分隔线，强化“换世界”观感 */
.gm-header h1 { transition: color .4s ease; }
body.w-island .gm-header h1 { color: #1f6b4d; }
body.w-steel  .gm-header h1 { color: #8a4d22; }
body.w-virus  .gm-header h1 { color: #992b21; }
body.w-rad    .gm-header h1 { color: #54653f; }
.gm-header::after {
  content: ''; display: block; width: 66px; height: 3px; margin: 10px auto 0; border-radius: 3px;
  background: var(--w-accent); transition: background .4s ease;
}

/* ===== 启动屏世界色调叠层（配合 setBootScene 实景图，恢复被覆盖的色调） ===== */
.boot-bg::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.boot-bg.bg-island::before { background: radial-gradient(900px 600px at 20% 12%, rgba(60,130,150,.22), transparent 60%), radial-gradient(700px 500px at 80% 88%, rgba(200,160,80,.14), transparent 60%); }
.boot-bg.bg-steel::before  { background: radial-gradient(900px 600px at 20% 12%, rgba(180,110,50,.20), transparent 60%), radial-gradient(700px 500px at 80% 88%, rgba(120,70,30,.16), transparent 60%); }
.boot-bg.bg-virus::before  { background: radial-gradient(900px 600px at 20% 12%, rgba(160,50,50,.24), transparent 60%), radial-gradient(700px 500px at 80% 88%, rgba(120,30,30,.18), transparent 60%); }
.boot-bg.bg-rad::before    { background: radial-gradient(900px 600px at 20% 12%, rgba(120,150,90,.20), transparent 60%), radial-gradient(700px 500px at 80% 88%, rgba(90,110,70,.16), transparent 60%); }

/* ============================================================
   视觉精修 v5：横幅标题层 + 状态徽章 + 行动图标片 + 面板质感
   ============================================================ */

/* —— 世界横幅：在实景照片上叠加世界名与标语 —— */
.gm-banner { display: flex; align-items: flex-end; background-color: #2a2f3a; }
.gm-banner-tx {
  position: relative; z-index: 2;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  width: 100%; padding: 16px 20px;
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.gm-banner-tx .gm-bk { display: inline-flex; align-self: center; }
.gm-banner-tx .gm-bk .ic-svg { width: 28px; height: 28px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
.gm-banner-t { font-size: 23px; font-weight: 800; letter-spacing: 3px; }
.gm-banner-s { font-size: 13px; opacity: .9; font-weight: 400; letter-spacing: .5px; }

/* —— 状态卡：图标徽章化 —— */
.js-stat .js-ic {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(160deg, #fff, var(--w-soft, #eef4e8));
  color: var(--w-accent-d, #2e6240);
  border: 1px solid var(--w-line, #d6e3c8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 3px rgba(56,46,28,.08);
  margin-bottom: 2px;
}
.js-stat .js-ic .ic-svg { width: 19px; height: 19px; }
.js-stat b { font-variant-numeric: tabular-nums; font-size: 13.5px; }
.js-stat em { letter-spacing: .5px; }

/* —— 行动 / 合成：图标片化 —— */
.js-act-ic {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  background: linear-gradient(160deg, #fff, var(--w-soft, #eef4e8));
  color: var(--w-accent-d, #2e6240);
  border: 1px solid var(--w-line, #d6e3c8);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.js-act-ic .ic-svg { width: 18px; height: 18px; }

/* —— 面板质感提升：柔和渐变 + 分层阴影 —— */
.js-panel {
  background: linear-gradient(180deg, #ffffff 0%, #fcfbf6 100%);
  box-shadow: var(--shadow-2);
}
.js-panel h2 { display: flex; align-items: center; gap: 8px; }
.js-stat { box-shadow: 0 1px 3px rgba(56,46,28,.06), 0 6px 16px rgba(56,46,28,.05); }

/* ============================================================
   视觉精修 v6：布局防裁切 + 游戏主界面美化
   ============================================================ */

/* —— 防裁切①：右侧栏超高时内部滚动，背包/日志永不丢失 —— */
.js-side {
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}
.js-side::-webkit-scrollbar { width: 7px; }
.js-side::-webkit-scrollbar-thumb { background: rgba(0,0,0,.14); border-radius: 4px; }

/* —— 防裁切②：横幅高度自适应，世界名/标语绝不裁切 —— */
.gm-banner { height: auto; min-height: 152px; display: flex; align-items: center; }
.gm-banner-tx { padding: 18px 22px; }
.gm-banner::after {
  background: linear-gradient(180deg, rgba(8,10,14,.30), rgba(8,10,14,.10) 35%, rgba(8,10,14,.56));
}
.gm-banner-t { text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.gm-banner-s { opacity: .92; }
/* 横幅世界标签（由 game.js 注入） */
.gm-banner-tags { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-self: center; }
.gm-bt {
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,.16); color: #fff; letter-spacing: .5px;
  backdrop-filter: blur(2px); text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* —— 防裁切③：全局防横向溢出 —— */
body { overflow-x: hidden; }

/* —— 面板：顶部世界色高光条 + 头部留白 —— */
.js-panel { position: relative; overflow: hidden; }
.js-panel::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--w-accent, #3f7d4f), transparent 72%);
}
.js-panel h2 { padding-top: 4px; }

/* —— 状态卡：世界色描边环 + 悬停微浮 —— */
.js-stat { transition: transform .15s ease, box-shadow .15s ease; }
.js-stat:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(56,46,28,.10), 0 10px 22px rgba(56,46,28,.07); }
.js-stat .js-ic {
  border-color: var(--w-accent, #2e6240);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 4px rgba(56,46,28,.12);
}

/* —— 行动 / 合成按钮：更精致的图标片 + 成本徽标 + 悬停 —— */
.js-btn { gap: 11px; padding: 11px 13px; transition: border-color .15s ease, background .15s ease, transform .08s ease, opacity .15s ease, box-shadow .15s ease; }
.js-act-ic { box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 3px rgba(56,46,28,.10); }
.js-act-name { min-width: 0; }
.js-act-cost {
  margin-left: auto; padding: 2px 9px; border-radius: 999px;
  background: rgba(0,0,0,.05); color: var(--muted); white-space: nowrap; flex: none;
}
.js-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(56,46,28,.10); }
.js-btn:disabled { background: #f3f0e8; }
.js-crafts .js-btn { padding: 10px 12px; }

/* —— 面板头部/区段美化 —— */
.js-subhead {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: 999px; background: var(--w-soft, #eef4e8);
  color: var(--w-accent-d, #2e6240);
}
.js-subhead .js-ic { width: auto; height: auto; }
.js-loc:hover:not(.cur) { transform: translateY(-1px); }

/* —— 工具栏：世界色悬停 —— */
.gm-toolbar .gm-restart-btn:hover {
  border-color: var(--w-accent, #3f7d4f); color: var(--w-accent-d, #2e6240);
  background: var(--w-soft, #f6f1e7);
}

/* —— 主按钮悬停光晕 —— */
.js-primary { box-shadow: 0 6px 16px rgba(56,46,28,.12); }
.js-primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 8px 22px rgba(56,46,28,.18); }
.js-primary:disabled { opacity: .5; }

/* —— 一次性入场动画（仅世界屏首现时播放，不随每次操作重播） —— */
@keyframes gmRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.gm-header, .gm-toolbar, .gm-banner, .js-panel { animation: gmRise .45s ease both; }
.gm-banner { animation-delay: .04s; }
.gm-toolbar { animation-delay: .10s; }
.js-side .js-panel:nth-child(1) { animation-delay: .16s; }
.js-side .js-panel:nth-child(2) { animation-delay: .22s; }
@media (prefers-reduced-motion: reduce) {
  .gm-header, .gm-toolbar, .gm-banner, .js-panel { animation: none; }
}

/* —— 开局页“继续上次游戏”浮窗 —— */
.boot-resume {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 6;
}
.boot-resume .bn-btn {
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  background: linear-gradient(135deg, #4a7fd4, #3a63a8);
  border-color: transparent;
  color: #fff;
}
.boot-resume .bn-btn:hover { filter: brightness(1.08); }

/* —— 老玩家「沿用上次配置直接开始」（放在"继续上次游戏"下方，不动它原来的定位）—— */
.boot-pref {
  position: absolute;
  top: 66px;
  right: 22px;
  z-index: 6;
}
.boot-pref .bn-btn {
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  background: rgba(20,22,26,.72);
  backdrop-filter: blur(6px);
}

/* —— 新手快速开局条（Step 1）—— */
.bq-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 11px 16px;
  border: 1px solid rgba(217,180,106,.35);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(217,180,106,.12), rgba(217,180,106,.04));
}
.bq-ic { font-size: 18px; line-height: 1; }
.bq-text { flex: 1; min-width: 220px; font-size: 13px; line-height: 1.6; color: #d8d3c6; }
.bq-text b { color: #e8c987; }
.bq-bar .bn-btn { flex: none; padding: 9px 20px; font-size: 13px; }

/* —— 世界卡片上的「推荐」角标 —— */
.gw-rec {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  background: linear-gradient(135deg, #d9b46a, #b8934a);
  color: #1a1408;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* ============================================================
   终局目标（四个世界共用）
   —— 目的：把"这局到底要做什么"常驻摆出来。
      以前通关动作散落在各地点动作里（救命信号藏在「天台」、传说结局毫无提示），
      玩家看不到方向，每天就只剩采集与进食 —— 这正是"不知道要干什么"的根因。
   ============================================================ */
.js-goals {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(217,180,106,.28);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(217,180,106,.09), rgba(217,180,106,.02));
}
.js-goals-h { font-size: 12.5px; font-weight: 700; letter-spacing: 1px; opacity: .92; }
.js-goals-h em { font-style: normal; font-weight: 400; opacity: .6; font-size: 11.5px; }
.js-goal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}
.js-goal.ready { border-color: rgba(120,220,150,.5); background: rgba(120,220,150,.1); }
.js-goal.near  { border-color: rgba(217,180,106,.45); }
.js-goal-ic { font-size: 17px; flex: none; }
.js-goal-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.js-goal-body b { font-size: 13px; font-weight: 700; }
.js-goal-body small { font-size: 11.5px; opacity: .72; line-height: 1.5; }
.js-goal-tag {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(255,255,255,.1);
  opacity: .85;
  white-space: nowrap;
}
.js-goal.ready .js-goal-tag { background: #3f8f5b; color: #fff; opacity: 1; }
.js-goal.near  .js-goal-tag { background: rgba(217,180,106,.85); color: #1a1408; opacity: 1; }

/* ============================================================
   归途结算 · 评分明细 / 新解锁
   ============================================================ */
.gm-endmodal { width: min(460px, 94vw); max-height: 90vh; overflow-y: auto; text-align: left; }
.gm-score-detail {
  margin: 2px 0 12px; padding: 12px 14px; border-radius: 13px;
  background: linear-gradient(160deg, #f3f7f1, #eaf3ec); border: 1px solid #d3e2cf; font-size: 13px; line-height: 1.85;
}
.gm-score-detail .sd-line { color: var(--muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.gm-score-detail .sd-line span { color: var(--accent-d); font-weight: 700; }
.gm-score-detail .sd-line b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.gm-score-detail .sd-total { margin-top: 7px; padding-top: 7px; border-top: 1px dashed #c3d6be; font-size: 15px; font-weight: 800; color: var(--accent-d); }
.gm-score-detail .sd-total b { font-size: 18px; }

.gm-unlocks { margin: 2px 0 12px; }
.unlock-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 7px; display: inline-flex; align-items: center; gap: 6px; }
.unlock-title .ic-svg { width: 16px; height: 16px; color: #b07a43; }
.unlock-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent-d); background: #eef4e8; font-weight: 600; margin: 0 6px 6px 0;
}
.unlock-chip .ic-svg { width: 14px; height: 14px; }

/* ============================================================
   中枢大厅（永久之家）
   ============================================================ */
.hub {
  position: fixed; inset: 0; z-index: 30; overflow-y: auto;
  background:
    radial-gradient(900px 520px at 85% -8%, rgba(217,180,106,.20) 0%, rgba(217,180,106,0) 60%),
    radial-gradient(700px 480px at -10% 100%, rgba(90,150,120,.18) 0%, rgba(90,150,120,0) 55%),
    linear-gradient(165deg, #f6f1e6 0%, #efe7d6 50%, #e7ddc8 100%);
}
.hub.hidden { display: none; }
.hub-inner { max-width: 940px; margin: 0 auto; padding: 40px 20px 64px; }

.hub-head { text-align: center; margin-bottom: 26px; }
.hub-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 30px; font-weight: 800; letter-spacing: 4px; color: var(--ink);
}
.hub-logo .js-ic {
  width: 46px; height: 46px; border-radius: 14px; padding: 0;
  background: linear-gradient(160deg, #fff, #f3ead7); border: 1px solid #e3d6bb;
  color: #9a6a2c; box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(120,90,40,.12);
}
.hub-logo .js-ic .ic-svg { width: 26px; height: 26px; }
.hub-tag { margin: 8px 0 18px; color: var(--muted); font-size: 14px; letter-spacing: 1px; }

.hub-status {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.hub-stat {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-1); font-size: 13.5px; color: var(--muted);
}
.hub-stat .js-ic { width: 28px; height: 28px; border-radius: 8px; background: #f3ead7; color: #9a6a2c; border: 1px solid #e3d6bb; }
.hub-stat .js-ic .ic-svg { width: 16px; height: 16px; }
.hub-stat b { color: var(--ink); font-size: 16px; font-weight: 800; }

.hub-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
.hub-card {
  position: relative; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 18px; border-radius: 18px; cursor: pointer; color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #fcfbf6 100%);
  border: 1px solid var(--line); box-shadow: var(--shadow-2);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.hub-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(56,46,28,.14); border-color: #d8c7a4; }
.hc-ic {
  width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(160deg, #fff, #f1e8d4); color: #9a6a2c; border: 1px solid #e3d6bb;
  box-shadow: inset 0 1px 0 #fff;
}
.hc-ic .ic-svg { width: 28px; height: 28px; }
.hc-title { display: block; font-size: 17px; font-weight: 800; letter-spacing: 1px; }
.hc-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.hc-go { margin-left: auto; color: var(--accent); opacity: .55; flex: none; }
.hc-go .ic-svg { width: 20px; height: 20px; }

.hub-actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 26px; flex-wrap: wrap; }
.hub-primary, .hub-ghost {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; border-radius: 14px;
  font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.hub-primary { background: var(--accent); color: #fff; border: 1px solid transparent; box-shadow: 0 6px 16px rgba(56,46,28,.14); }
.hub-primary:hover { background: var(--accent-d); transform: translateY(-1px); }
.hub-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.hub-ghost:hover { background: #f7f3ea; }
.hub-primary .ic-svg, .hub-ghost .ic-svg { width: 18px; height: 18px; }

.hub-news { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-1); margin-bottom: 22px; }
.hub-news-title { margin: 0 0 10px; font-size: 15px; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.hub-news-title .js-ic { color: #b07a43; }
.hub-news-title .js-ic .ic-svg { width: 18px; height: 18px; }
.hub-news-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.hub-news-item { font-size: 13.5px; color: var(--ink); padding: 8px 11px; background: #faf7f0; border-radius: 10px; border-left: 3px solid var(--accent); display: flex; align-items: center; gap: 7px; }
.hub-news-item .ic-svg { width: 16px; height: 16px; }
.hub-news-date { margin-left: auto; color: var(--muted); font-size: 11.5px; }
.hub-news-empty { font-size: 13px; color: var(--muted); padding: 8px 11px; background: #faf7f0; border-radius: 10px; }

.hub-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hub-link {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--muted); font-size: 13px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.hub-link:hover { border-color: var(--accent); color: var(--accent-d); }
.hub-link .ic-svg { width: 16px; height: 16px; }

/* 大厅内面板弹窗 */
.gm-hubmodal { width: min(560px, 94vw); max-height: 86vh; display: flex; flex-direction: column; text-align: left; }
.gm-hubmodal h2 { display: flex; align-items: center; gap: 9px; }
.gm-hubmodal h2 .ic-svg { width: 22px; height: 22px; color: #9a6a2c; }
.hub-modal-body { overflow-y: auto; flex: 1; padding: 4px 6px; margin-bottom: 14px; }
.hub-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 8px; }
.hub-kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 13px; background: #faf7f0; border: 1px solid var(--line); border-radius: 11px; font-size: 13.5px; }
.hub-kv span { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.hub-kv b { font-weight: 800; color: var(--ink); }
.hub-sec { margin: 16px 0 9px; font-size: 13.5px; color: var(--muted); letter-spacing: 1px; display: flex; align-items: center; gap: 7px; }
.hub-tier { padding: 11px 14px; border-radius: 12px; background: linear-gradient(135deg, #f3ead7, #e9dec3); border: 1px solid #e0d0ad; font-size: 14px; margin-bottom: 8px; }
.hub-tier b { color: #8a5a22; font-size: 16px; }
.hub-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.hub-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 11px; border-radius: 999px; border: 1px dashed var(--line); color: var(--muted); background: #faf7f0; }
.hub-chip.on { border-style: solid; border-color: var(--accent); color: var(--accent-d); background: #eef4e8; font-weight: 600; }
.hub-chip .ic-svg { width: 14px; height: 14px; }
.hub-muted { color: var(--muted); font-size: 12.5px; }
.hub-note { font-size: 13px; color: var(--ink); background: #faf7f0; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; line-height: 1.7; margin: 0 0 12px; }
.hub-note b { color: var(--danger); }
/* 轮回印记（多周目记忆） */
.hub-rune { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: #faf7f0; border: 1px solid var(--line); border-radius: 11px; margin-bottom: 8px; font-size: 13px; }
.hub-rune-rank { flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: 1px; color: #8a5a22; background: linear-gradient(135deg, #f3ead7, #e9dec3); border: 1px solid #e0d0ad; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.hub-rune-body { flex: 1; min-width: 0; }
.hub-rune-title { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hub-rune-title .ic-svg { width: 15px; height: 15px; }
.hub-rune-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.hub-rune-win { color: #3f7d4f; }
.hub-rune-loss { color: #cf4f45; }
.hub-rune-bonus { flex: none; font-size: 11.5px; font-weight: 700; color: #9a6a2c; white-space: nowrap; }
.hub-rune-mode { font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #efe6f7; color: #6b4b8a; }
.hub-rune-mode.daily { background: #fff1d6; color: #9a6a2c; }

/* 废墟商店 */
.shop-item { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px; background: #faf7f0; margin-bottom: 9px; }
.shop-ic { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(160deg, #fff, #f1e8d4); color: #9a6a2c; border: 1px solid #e3d6bb; }
.shop-ic .ic-svg { width: 21px; height: 21px; }
.shop-meta { flex: 1; min-width: 0; }
.shop-name { font-size: 14px; font-weight: 700; }
.shop-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.shop-cost { font-size: 13px; font-weight: 700; color: #8a5a22; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.shop-cost .ic-svg { width: 15px; height: 15px; }
.shop-buy { padding: 7px 13px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 12.5px; cursor: not-allowed; white-space: nowrap; }
.shop-buy:not([disabled]) { color: #fff; background: var(--accent); border-color: transparent; cursor: pointer; }

/* 旧日图鉴 */
.codex-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: #faf7f0; margin-bottom: 7px; }
.codex-row.on { border-color: #c9b98a; background: #fdf8ec; }
.codex-ic { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--muted); }
.codex-ic .ic-svg { width: 17px; height: 17px; }
.codex-name { flex: 1; font-size: 13.5px; font-weight: 600; }
.codex-row:not(.on) .codex-name { color: var(--muted); }
.codex-type { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.type-normal { background: #eef4e8; color: #3f7d4f; }
.type-good { background: #e8f0fb; color: #3a6ea5; }
.type-legend { background: #f8f1fc; color: #7a4f9e; }
.type-bad { background: #fbeae8; color: #cf4f45; }

@media (max-width: 680px) {
  .hub-cards { grid-template-columns: 1fr; }
  .hub-grid2 { grid-template-columns: 1fr; }
}

/* ===================== Phase 3：铁人徽章 / 模式标记 / 每日挑战 / 深层面板 ===================== */
/* 铁人·一命徽章（gm-badge 内嵌） */
.gm-badge .gm-iron-tag {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #fff;
  background: linear-gradient(135deg, #b3541e, #7a2e2e); border: 1px solid #8a3a22;
  vertical-align: middle;
}
/* 排行榜模式标记 */
.gm-mode-tag {
  font-style: normal; font-size: 10px; font-weight: 700; margin-left: 6px; padding: 1px 6px;
  border-radius: 999px; background: #efe6f7; color: #6b4b8a; vertical-align: middle;
}
.gm-mode-tag.iron { background: #f9e4dc; color: #a34a1f; }
/* 大厅动态 · 模式徽标 */
.hub-news-mode {
  font-style: normal; font-size: 10px; font-weight: 700; margin-left: 2px; padding: 1px 7px;
  border-radius: 999px; background: #efe6f7; color: #6b4b8a;
}
.hub-news-mode.daily { background: #fff1d6; color: #9a6a2c; }
/* 每日挑战面板 */
.daily-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.daily-w { font-size: 18px; font-weight: 800; letter-spacing: 1px; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.daily-w .ic-svg { width: 22px; height: 22px; }
.daily-d { font-size: 12.5px; color: var(--muted); }
.daily-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.daily-list li {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #faf7f0;
  border: 1px solid var(--line); border-radius: 11px; font-size: 13.5px;
}
.daily-list li:nth-child(-n+3) { border-color: #d8c7a4; background: #fdf8ec; }
.dl-rank { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); font-weight: 800; font-size: 12px; color: var(--muted); }
.daily-list li:nth-child(1) .dl-rank { background: #f3d27a; color: #6b4d00; border-color: #e0b94f; }
.daily-list li:nth-child(2) .dl-rank { background: #e3e6ea; color: #4a5568; border-color: #c8cdd6; }
.daily-list li:nth-child(3) .dl-rank { background: #ecc9a8; color: #7a4a1e; border-color: #d9a76f; }
.dl-name { flex: 1; font-weight: 600; }
.daily-list li em { font-style: normal; font-size: 12px; color: var(--muted); }
.daily-list li b { font-weight: 800; color: var(--ink); }
.daily-cta { text-align: center; margin-top: 16px; }
/* 图鉴 · 结局简介 */
.codex-mid { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.codex-name { font-size: 13.5px; font-weight: 600; }
.codex-desc { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
/* 成就深层面板 */
.ach-total { font-size: 13px; color: var(--muted); background: #faf7f0; border: 1px dashed var(--line); border-radius: 10px; padding: 7px 12px; margin-bottom: 4px; }
.ach-total b { color: var(--accent-d); font-weight: 800; }
.ach-count { float: right; font-weight: 700; color: var(--accent-d); font-size: 12.5px; }
.gm-badge2.lock { opacity: .72; }
.gm-badge2.lock:hover { opacity: 1; border-color: #d8c7a4; cursor: help; }




/* ============================================================
   反馈层（2026-10-07）
   ------------------------------------------------------------
   加它之前：全站 0 个音效、0 处动效。
   点一个行动 → 数值变了、文本换了，**但屏幕上没有任何"变化发生在这里"的提示**。
   生存游戏的乐趣有一半在「我这一步换来/失去了什么」的即时体感上，
   而这个体感现在完全靠玩家自己在两行数字之间心算。

   设计约束（必须遵守，不破坏上面既有的暖米白 + 四世界强调色）：
     · 不引入任何依赖、任何图片资源 —— 全部用 CSS / Web Audio 合成
     · 尊重 prefers-reduced-motion —— 动效降级为「颜色闪一下」，不摇不移
     · 不覆盖既有配色，只加"变化"的一层
   ============================================================ */

/* ---------- 1. 数值变化的瞬时提示 ---------- */
/* 进度条加一层「幽灵条」：旧值以半透明残留，新值滑上去。
   纯 CSS 实现需要两个元素，JS 侧 Fx.bar() 会克隆一个 .js-bar-ghost。 */
.js-bar { position: relative; overflow: hidden; }
.js-bar i { position: relative; z-index: 2; }
.js-bar-ghost {
  position: absolute; left: 0; top: 0; height: 100%;
  background: rgba(0, 0, 0, .16);
  z-index: 1; border-radius: 6px;
  transition: width .85s cubic-bezier(.16, 1, .3, 1);
}
/* 掉血/掉理智：轻微左移一下再回来（比摇晃温和） */
.js-bar-ghost.is-drop { background: rgba(207, 79, 69, .38); }
.js-bar-ghost.is-rise { background: rgba(63, 125, 79, .30); }

/* ---------- 2. 屏幕震动（危险事件） ---------- */
@keyframes gmShake {
  0%   { transform: translate3d(0, 0, 0); }
  15%  { transform: translate3d(-5px, 2px, 0); }
  30%  { transform: translate3d(4px, -2px, 0); }
  45%  { transform: translate3d(-3px, 1px, 0); }
  60%  { transform: translate3d(2px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.gm-shake { animation: gmShake .42s cubic-bezier(.36, .07, .19, .97); }

/* ---------- 3. 低状态的呼吸红光 ---------- */
@keyframes gmPulseDanger {
  0%, 100% { box-shadow: 0 0 0 0 rgba(207, 79, 69, .0); }
  50%      { box-shadow: 0 0 0 4px rgba(207, 79, 69, .18); }
}
.js-stat.is-danger .js-bar { animation: gmPulseDanger 1.7s ease-in-out infinite; }
.js-stat.is-danger > b { color: var(--danger); }

/* 数值本身在危险线以下时的强调 */
.js-stat.is-warn > b { color: var(--warn); }

/* ---------- 4. 日志新条目入场 ---------- */
@keyframes gmLogIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.js-log-new { animation: gmLogIn .34s var(--ease-out, cubic-bezier(.16, 1, .3, 1)); }

/* ---------- 5. 行动按钮的可用性提示 ---------- */
/* 资源不足时不是不让点（点了才有提示才有学习价值），
   而是给一个"这次大概不成"的暗示。 */
@keyframes gmDeny {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}
.gm-deny { animation: gmDeny .3s ease; opacity: .75; }

/* ---------- 6. 行动结算浮字（+3 / -7 从数值旁升起） ---------- */
.gm-float {
  position: fixed; z-index: 90; pointer-events: none;
  font-weight: 800; font-size: 15px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  animation: gmFloat 1.05s cubic-bezier(.16, 1, .3, 1) forwards;
}
.gm-float.is-up   { color: #2e6240; }
.gm-float.is-down { color: var(--danger); }
@keyframes gmFloat {
  0%   { opacity: 0; transform: translateY(4px) scale(.9); }
  22%  { opacity: 1; transform: translateY(-2px) scale(1.06); }
  100% { opacity: 0; transform: translateY(-26px) scale(1); }
}

/* ---------- 7. 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .gm-shake, .gm-deny, .gm-log-new, .gm-float { animation: none !important; }
  .js-bar-ghost { display: none; }
  .js-stat.is-danger .js-bar { animation: none; }
  /* 降级后仍要有视觉提示：给危险项加静态描边 */
  .js-stat.is-danger > b { text-decoration: underline; text-underline-offset: 3px; }
}

/* ============================================================
   局内交互公共层（actpanel.js）
   ① 今日机会按钮  ② 按钮墙收敛 + 原因内联  ③ 夜间抉择面板
   ============================================================ */

/* ① 今日机会：金色高亮，一眼看见"今天多了一件可做的事" */
.js-opp-btn {
  grid-column: 1 / -1;
  border-color: var(--warn);
  background: linear-gradient(180deg, #fffaf0 0%, #fdf2dc 100%);
  box-shadow: inset 0 0 0 1px rgba(217, 161, 60, .35), 0 2px 10px rgba(217, 161, 60, .16);
}
.js-opp-btn:hover:not(:disabled) { border-color: #c98f2c; background: #fdf2dc; }
.js-opp-btn .js-act-cost { color: #a87a22; font-weight: 600; }
.js-opp-btn.is-used { box-shadow: none; }

/* ② 按钮墙收敛：把"暂时做不了"的折叠起来，原因内联可见 */
.js-more {
  margin-top: 10px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .5);
}
.js-more > summary {
  cursor: pointer;
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--muted);
  list-style: none;
}
.js-more > summary::-webkit-details-marker { display: none; }
.js-more > summary::before { content: '▸ '; color: var(--muted); }
.js-more[open] > summary::before { content: '▾ '; }
.js-more[open] > summary { border-bottom: 1px dashed var(--line); }
.js-more .js-blocked-btn {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  opacity: .78; margin: 8px; width: calc(100% - 16px);
  text-align: left;
}
/* 原因内联：原来只在 title 悬停提示里，不悬停就不知道差什么 */
.js-blocked-why {
  flex: 1 0 100%;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  white-space: normal;
}

/* 已决定过夜：动作区变灰且不可点（服务端也会拒绝，但等一个往返太迟钝） */
.js-wrap.is-night .js-actions,
.js-wrap.is-night .js-crafts,
.js-wrap.is-night .js-loclist { opacity: .45; pointer-events: none; filter: grayscale(.25); }

/* ③ 夜间抉择面板 */
.gm-nightmodal { text-align: left; width: min(470px, 94vw); }
.gm-nightmodal h2 { text-align: center; }
.gm-night-sub { margin: 0 0 16px; font-size: 12.5px; line-height: 1.6; color: var(--muted); text-align: center; }
.gm-night-opts { display: grid; gap: 10px; }
.gm-night-opt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 13px 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px; background: #faf7f0; color: var(--ink);
  transition: border-color .15s ease, background .15s ease, transform .08s ease;
}
.gm-night-opt:hover { transform: translateY(-1px); background: #fff; }
.gm-night-opt.risk-low { border-left: 3px solid var(--accent); }
.gm-night-opt.risk-none { border-left: 3px solid #4b8fd0; }
.gm-night-opt.risk-high { border-left: 3px solid var(--danger); }
.gm-night-opt:hover.risk-low { border-color: var(--accent); }
.gm-night-opt:hover.risk-none { border-color: #4b8fd0; }
.gm-night-opt:hover.risk-high { border-color: var(--danger); }
.gm-no-ic { font-size: 22px; flex: none; line-height: 1.2; }
.gm-no-body { display: block; min-width: 0; }
.gm-no-body b { display: block; font-size: 15px; letter-spacing: .5px; }
.gm-no-brief { display: block; margin: 3px 0 5px; font-size: 11.5px; font-style: normal; font-weight: 600; color: var(--accent-d); }
.gm-night-opt.risk-high .gm-no-brief { color: #a8382f; }
.gm-night-opt.risk-none .gm-no-brief { color: #2f6ba0; }
.gm-no-body small { display: block; font-size: 12px; line-height: 1.55; color: var(--muted); }
.gm-night-cancel {
  padding: 10px 18px; border: 1px solid var(--line); border-radius: 11px;
  background: #f4f1ea; color: var(--muted); cursor: pointer; font-size: 13px;
}
.gm-night-cancel:hover { background: #ece7dc; color: var(--ink); }