/* =====================================================
   人生模拟器样式 · 给初学者的说明：
   1. 颜色都定义在 :root 里，想换风格只改这几个变量就行
   2. .game-grid 用 CSS Grid 把屏幕分成三列
   3. 带 hidden 类的元素会被藏起来（弹窗平时就是隐藏的）
   ===================================================== */

:root {
  --bg: #1a1f2e;          /* 深夜蓝背景 */
  --panel: #232a3d;       /* 面板颜色 */
  --panel-edge: #34405c;  /* 面板描边 */
  --text: #e8ecf5;        /* 主文字 */
  --text-dim: #93a0bc;    /* 变弱的文字 */
  --accent: #ffd166;      /* 黄色强调（按钮高亮） */
  --green: #4ade80;
  --blue: #60a5fa;
  --pink: #f472b6;
  --orange: #fb923c;
  --red: #f87171;
  --radius: 14px;

  /* =====================================================
     字体（四层）
     全项目不加载任何外部字体文件，只用系统自带的字。
     这样离线能玩、包体不变大，但在 Mac 和 Windows 上
     都会自动落到「看起来最像」的那一款。

       --font-ui    界面：按钮、属性、标签（黑体，耐看）
       --font-serif 叙事：日志、弹窗正文、标题（宋体，有味道）
       --font-kai   语气：人物外貌、内心旁白、讣告（楷体，像手写）
       --font-mono  数字：属性值、金额、日期（等宽，跳动时不抖）
     ===================================================== */
  --font-ui: "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC",
             "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --font-serif: "Songti SC", "STSong", "Source Han Serif SC",
                "Noto Serif CJK SC", "SimSun", serif;
  --font-kai: "Kaiti SC", "STKaiti", "KaiTi", "Songti SC", serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* 字号阶梯：只有这六档，别的地方不许再随手写 12.5px */
  --fs-xs: 11.5px;
  --fs-s: 12.5px;
  --fs-m: 13.5px;
  --fs-l: 15px;
  --fs-xl: 19px;
  --fs-2xl: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-m);
  line-height: 1.65;
  /* 中文在深色背景上容易发虚：抗锯齿 + 字距微调，字会“实”一点 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  /* iPhone 的刘海和底部小白条会压在网页上。env(safe-area-inset-*) 是系统给的
     「安全距离」，电脑上不认这个函数，整行会被直接丢掉，于是自动用上面那行 18px。 */
  padding: calc(18px + env(safe-area-inset-top))
           calc(18px + env(safe-area-inset-right))
           calc(18px + env(safe-area-inset-bottom))
           calc(18px + env(safe-area-inset-left));
}

/* ---------- 三列网格布局 ---------- */
.game-grid {
  display: grid;
  grid-template-columns: 280px 420px 300px;
  gap: 16px;
  max-width: 1080px;
  width: 100%;
}

/* ---------- 进了小镇：中间那列撑宽 ----------
   World.show() 给 body 加 town-on，World.hide() 摘掉。
   420px 的固定列在宽屏上像一条缝，街上来往的人看不清；撑到 1fr 才用得上窗口。
   窄屏本来就是单列（下面的 media 规则），不再撑，否则会横出去。 */
@media (min-width: 1025px) {
  body.town-on .game-grid { grid-template-columns: 280px minmax(520px, 1fr) 300px; max-width: 1240px; }
}

/* 屏幕窄的时候自动叠成一列，手机也能玩 */
@media (max-width: 1024px) {
  .game-grid { grid-template-columns: 1fr; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  padding: 18px;
}

.panel-title {
  /* 标题用宋体：黑体标题像软件，宋体标题像书 */
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: .08em;
}

.log-title {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--text-dim);
  margin: 14px 0 8px;
  letter-spacing: .06em;
}

.map-hint {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.7;
  border-left: 3px solid var(--accent);
  padding-left: 8px;
  margin-bottom: 6px;
}

/* 经纬网分段按钮：四段一次只看一段（以前摞成一条几屏长的带子） */
.map-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 2px; }
.map-tab {
  flex: 1 1 calc(50% - 3px);
  background: #1d2434; border: 1px solid var(--panel-edge); color: var(--text-dim);
  border-radius: 8px; padding: 5px 4px; font-size: 12px; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.map-tab:hover { color: var(--text); border-color: #3a465f; }
.map-tab.on {
  background: var(--accent); border-color: var(--accent);
  color: #1a1f2e; font-weight: bold;
}
/* 一段最多占半屏多一点，剩下在段内滚：右栏不再把整页拉长 */
.map-sec { max-height: 56vh; overflow-y: auto; padding-right: 2px; }
.map-sec::-webkit-scrollbar { width: 6px; }
.map-sec::-webkit-scrollbar-thumb { background: #333d54; border-radius: 3px; }

/* ---------- 左列：小人与属性 ---------- */
#baby-canvas { display: block; margin: 0 auto; }

.baby-name { text-align: center; font-size: 18px; font-weight: bold; margin-top: 6px; }
.age-tag {
  font-size: 12px; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 1px 8px; margin-left: 4px; font-weight: normal;
}
.baby-stage { text-align: center; font-size: 13px; color: var(--text-dim); margin: 4px 0 14px; }

.stat-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 9px; font-size: 13px;
}
.stat-name { width: 74px; flex-shrink: 0; }
.bar {
  flex: 1; height: 10px; background: #141827;
  border-radius: 999px; overflow: hidden;
}
.bar-fill {
  height: 100%; width: 0%;
  border-radius: 999px;
  transition: width .4s ease;  /* 数值变化时进度条平滑伸缩 */
}
.bar-knowledge  { background: var(--blue); }
/* 知识越过 2000（《爱因斯坦》的门槛）：条换成金色并且微微发光。
   条的上限只有 420，读到 2000 的时候它已经满了几十年，得有个标记。 */
.stat-row.stat-maxed .bar-knowledge {
  background: linear-gradient(90deg, #ffcf5c, #f0a52f);
  box-shadow: 0 0 10px rgba(255, 207, 92, .6);
}
.stat-row.stat-maxed .stat-num { color: #ffcf5c; }
/* 成神：所有数值都是 ∞，数字换成金色、大一号 */
.stat-row.god-row .stat-num {
  color: #ffd86b; font-size: 15px;
  text-shadow: 0 0 8px rgba(255, 216, 107, .55);
}

/* ---------- 成神：弹窗底下那行“神语” ---------- */
.god-tongue {
  margin-top: 10px; padding: 7px 10px;
  border-left: 3px solid #ffd86b;
  background: rgba(255, 216, 107, .06);
  color: #d9c68a; font-size: 12px; line-height: 1.75;
  letter-spacing: .04em; word-break: break-word;
  border-radius: 0 8px 8px 0;
}
.god-tongue b { color: #ffd86b; font-size: 11px; margin-right: 6px; letter-spacing: .12em; }
.bar-health     { background: var(--green); }
.bar-friendship { background: var(--pink); }
.bar-character  { background: var(--accent); }
.bar-energy     { background: var(--orange); }
.bar-career     { background: #6f8fb5; }
.bar-grit       { background: #d9603c; }
.bar-fame       { background: #c9a227; }
.bar-family     { background: #d98452; }
.bar-peace      { background: #4fa39c; }
.stat-num {
  width: 38px; text-align: right; color: var(--text-dim);
  font-family: var(--font-mono); font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.money-row { justify-content: space-between; }
.money-num {
  font-family: var(--font-mono); font-weight: bold; color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* 重开一局 */
.mini-btn {
  display: block; width: 100%; margin-top: 14px;
  background: transparent; color: var(--text-dim);
  border: 1px dashed var(--panel-edge); border-radius: 9px;
  padding: 7px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.mini-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- 中列：时间与行动 ---------- */
.time-card {
  background: linear-gradient(135deg, #2d3a5e, #232a3d);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  padding: 14px; text-align: center; margin-bottom: 14px;
}
.time-date {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl); font-weight: 600; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;   /* 数字等宽：换月时不左右跳 */
}
.time-sub { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
/* 距升学倒计时：单独一行小字 */
.time-left { font-size: 11.5px; color: var(--text-dim); margin-top: 5px; letter-spacing: .02em; }
.time-left:empty { display: none; }

.actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.action-btn {
  background: #2c3650; color: var(--text);
  border: 1px solid var(--panel-edge); border-radius: 10px;
  padding: 12px 8px; font-size: 15px; cursor: pointer;
  font-family: inherit;
  transition: transform .12s, background .12s;
}
.action-btn:hover:not(:disabled) {
  background: #3a4870; transform: translateY(-2px);
}
.action-btn:active:not(:disabled) { transform: translateY(0); }
.action-btn:disabled { opacity: .35; cursor: not-allowed; }
.action-cost { font-size: 11px; color: var(--text-dim); margin-top: 3px; }

/* 面板顶端那条「出门去小镇」：整宽、比旁边那堆行动按钮亮一点。
   它不在 .actions 网格里，是时间卡下面单摆的一条。 */
.action-btn.town-entry {
  display: block; width: 100%; text-align: center;
  margin-bottom: 12px; border-color: var(--accent); color: var(--accent);
}
.action-btn.town-entry:hover:not(:disabled) { background: var(--accent); color: #1a1f2e; }
.action-btn.town-entry:hover:not(:disabled) .action-cost { color: #1a1f2e; }

/* ---------- 日志 ---------- */
.log-box {
  height: 240px; overflow-y: auto;
  background: #141827; border-radius: 10px;
  padding: 11px 12px;
  /* 日志是这个游戏读得最多的字：宋体 + 大行高，像读一本流水账日记 */
  font-family: var(--font-serif);
  font-size: var(--fs-m); line-height: 1.78;
  letter-spacing: .01em;
}
.log-entry { padding: 4px 2px; border-bottom: 1px dashed #2b3450; }
.log-entry .log-date {
  color: #5c6b8f; font-size: 11px; margin-right: 6px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.log-good  { color: var(--green); }
.log-bad   { color: var(--red); }
.log-event { color: var(--accent); }
.log-major { color: var(--pink); font-weight: bold; }

/* ---------- 右列：经纬网卡片 ---------- */
.map-card {
  background: #1c2233; border: 1px solid var(--panel-edge);
  border-radius: 10px; padding: 9px 11px; margin-bottom: 8px;
  font-size: 13px; line-height: 1.55;
}
.map-card .map-card-title { font-weight: bold; }
.map-card .map-card-desc { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.map-card.done   { border-color: var(--green); }
.map-card.doing  { border-color: var(--accent); }
.map-card.locked { opacity: .45; }
.map-card.hidden-card { display: none; }   /* 还没出现的支线：不留痕，保持神秘 */

/* ---------- 弹窗 ---------- */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .65);
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}
.overlay.hidden { display: none; }

.modal {
  width: min(460px, 92vw);
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  animation: pop .18s ease;   /* 弹出动画 */
  /* 书包窗最多列 10 种东西 + 一个「合上」：矮屏幕上按钮会顶出屏幕，
     整扇窗自己滚，别把标题和上半截选项裁掉。 */
  max-height: calc(100vh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
}
@keyframes pop {
  from { transform: scale(.9); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
/* 截图模式（?shot=...）：无头浏览器会在动画中途定格，拍出来是半透明的。
   只在截图时关掉，真玩的时候留着那一下弹出来的手感。 */
body.shot-mode .modal { animation: none; }
.modal-tag {
  display: inline-block; font-size: 12px; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 2px 10px; margin-bottom: 10px;
}
.modal-title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl); font-weight: 600;
  letter-spacing: .05em; margin-bottom: 10px;
}
.modal-text {
  font-family: var(--font-serif);
  font-size: 14.5px; line-height: 1.9; letter-spacing: .01em;
  color: var(--text); margin-bottom: 16px;
}
.modal-text b { font-weight: 600; color: var(--accent); }
.modal-buttons { display: flex; flex-direction: column; gap: 9px; }
.modal-btn {
  background: #2c3650; border: 1px solid var(--panel-edge);
  border-radius: 10px; color: var(--text);
  padding: 11px; font-size: 15px; cursor: pointer; font-family: inherit;
  text-align: left;
  transition: background .12s;
}
.modal-btn:hover { background: var(--accent); color: #1a1f2e; }

/* ---------- 分量徽标：白 绿 蓝 紫 金 红 彩 ----------
   每一档一个专属符号 + 自己的颜色。彩色那档是渐变，不靠单一颜色。
   颜色全写死在这里，因为 js/rarity.js 只管“是哪一档”，不管长什么样。 */
.rar {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-ui); font-size: 11px; font-weight: 600; line-height: 1;
  padding: 3px 7px 3px 5px; border-radius: 5px; letter-spacing: .02em;
  border: 1px solid currentColor; background: rgba(255,255,255,.04);
  vertical-align: middle; cursor: help; white-space: nowrap;
}
.rar .rar-mark { font-style: normal; font-size: 10px; line-height: 1; }
.rar-white  { color: #c9d3e6; }
.rar-green  { color: #4cc38a; }
.rar-blue   { color: #4a9eff; }
.rar-purple { color: #a86bff; }
.rar-gold   { color: #ffc53d; }
.rar-red    { color: #ff5a5a; box-shadow: 0 0 10px rgba(255,90,90,.18); }
/* 彩：边框走一圈渐变，符号本身也是五彩的 */
.rar-prism {
  color: #ffe9a8; border-color: #ffd166;
  background: linear-gradient(100deg, rgba(255,90,90,.20), rgba(255,197,61,.20) 25%,
              rgba(76,195,138,.20) 50%, rgba(74,158,255,.20) 75%, rgba(168,107,255,.20));
}
.rar-prism .rar-mark {
  background: linear-gradient(90deg, #ff5a5a, #ffc53d, #4cc38a, #4a9eff, #a86bff, #ff8ad4);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .rar-prism { animation: rarShine 5s linear infinite; }
  @keyframes rarShine {
    0%, 100% { filter: hue-rotate(0deg); }
    50%      { filter: hue-rotate(40deg); }
  }
}
/* ---------- 成神入场动画（js/cinema.js） ----------
   铺满窗口的一层 canvas，盖住面板和弹窗（overlay 才 10），
   5 秒后自己删掉；这期间不接受点击。 */
#cinema {
  position: fixed; inset: 0;
  z-index: 300;
  pointer-events: auto;
  background: transparent;
}

/* ---------- 终焉炫彩：一辈子只有一次（成神） ----------
   徽标本身是流动的彩带；弹窗（.modal.final）整扇窗也换成彩色边框。 */
.rar-final {
  color: #fff0fb;
  border-color: #ff8ad4;
  background: linear-gradient(100deg, rgba(255,90,90,.30), rgba(255,197,61,.30) 20%,
              rgba(76,195,138,.30) 40%, rgba(74,158,255,.30) 60%,
              rgba(168,107,255,.30) 80%, rgba(255,138,212,.30));
  box-shadow: 0 0 16px rgba(255,138,212,.6);
}
.rar-final .rar-mark {
  background: linear-gradient(90deg, #ff5a5a, #ffc53d, #4cc38a, #4a9eff, #a86bff, #ff8ad4, #ff5a5a);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: finalShift 6s linear infinite;
}
@keyframes finalShift { to { background-position: 200% 0; } }

.modal.final {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(115deg, #ff5a5a, #ffc53d, #4cc38a, #4a9eff, #a86bff, #ff8ad4, #ff5a5a) border-box;
  background-size: auto, 300% 100%;
  animation: finalFrame 8s linear infinite, pop .18s ease;
  box-shadow: 0 0 46px rgba(255,138,212,.45), 0 22px 60px rgba(0,0,0,.6);
}
@keyframes finalFrame { to { background-position: 0 0, 300% 0; } }
.modal.final .modal-title { text-shadow: 0 0 18px rgba(255,138,212,.55); }

/* 弹窗顶上：徽标 + 一句为什么是这一档 */
.modal-rank { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.modal-rank .rar { font-size: 12px; padding: 4px 9px 4px 7px; }
.rar-hint { font-size: 11.5px; color: var(--text-dim); }

/* ---------- 今日小事（任务板）---------- */
.task-board { display: flex; flex-direction: column; gap: 7px; margin-bottom: 6px; }
.task-card {
  display: flex; align-items: center; gap: 8px;
  background: #1c2233; border: 1px solid var(--panel-edge);
  border-left: 3px solid var(--accent);
  border-radius: 9px; padding: 8px 11px; cursor: pointer;
  font-size: 14px; transition: background .12s, transform .12s;
}
.task-card:hover { background: #29324c; transform: translateX(2px); }
.task-mark { color: var(--accent); font-weight: bold; }
.task-name { flex: 0 1 auto; }
.task-meta { margin-left: auto; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.task-tired { opacity: .5; border-left-color: var(--red); }
.task-empty { font-size: 13px; color: var(--text-dim); padding: 8px 2px; }

/* ---------- 2D 开放小镇 ---------- */
.world-wrap { position: relative; border-radius: 12px; overflow: hidden; }
#world-canvas {
  display: block; width: 100%; height: auto;
  background: #6fae6f;
  image-rendering: auto;
  outline: none;
}
.world-hud {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; flex-wrap: wrap;
}
.world-prompt {
  flex: 1; min-width: 200px;
  font-size: 13px; color: var(--accent);
  background: #141827; border: 1px solid var(--panel-edge);
  border-radius: 999px; padding: 7px 14px;
}
.world-back {
  background: #2c3650; color: var(--text); border: 1px solid var(--panel-edge);
  border-radius: 999px; padding: 7px 14px; cursor: pointer; font-family: inherit; font-size: 13px;
}

/* ---------- 背包：不再有常驻横栏（js/bag.js）----------
   以前画布下面一条、全屏时右边一条；现在两个书包按钮都开一扇弹窗，
   列表就用 .modal-btn，所以这里不再需要 .bag-bar / .bag-slot 那套样式。 */

/* ---------- 镇上的委托（js/board.js）：贴一张纸，接不接随你 ---------- */
.offer-board { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
/* 标题画在 board.js 里：进了小镇别的 .log-title 会被藏起来，这块得自己带标题 */
.of-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-serif); font-size: 13.5px; color: var(--text); padding: 2px 1px 0;
}
.of-head span { font-family: var(--font-ui); font-size: 11px; color: var(--text-dim); }
/* ---------- 这一生 / 结局图鉴（js/report.js，第八轮）---------- */
.rp-life {
  background: #1c2233; border: 1px solid var(--panel-edge); border-left: 3px solid var(--accent);
  border-radius: 9px; padding: 10px 12px; margin-bottom: 10px; font-size: 12.5px;
}
.rp-life-h { font-family: var(--font-serif); font-size: 14px; margin-bottom: 6px; }
.rp-life-row { display: flex; gap: 10px; padding: 3px 0; color: var(--text); line-height: 1.65; }
.rp-life-row > span:first-child { flex: 0 0 62px; color: var(--text-dim); }
.rp-life-row > span:last-child { flex: 1; }
.rp-miss > span:last-child { color: var(--red); }
.rp-grave {
  margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--panel-edge);
  font-family: var(--font-kai); color: var(--accent); line-height: 1.8;
}
.ed-count { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.ed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
.ed-card { background: #1c2233; border: 1px solid var(--panel-edge); border-radius: 8px; padding: 8px 9px; }
.ed-card.locked { opacity: .55; border-style: dashed; }
.ed-t { font-size: 12.5px; color: var(--text); line-height: 1.5; }
.ed-s { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.ed-x { font-size: 11.5px; color: var(--text-dim); margin-top: 5px; line-height: 1.6; }

/* 暂无委托：给一块虚线板，别让右栏看起来是空白 */
.of-empty {
  border: 1px dashed var(--panel-edge); border-radius: 9px;
  padding: 14px 12px; line-height: 1.75; color: var(--text);
}
.of-empty .dim { color: var(--text-dim); font-size: 12px; }
.of-card {
  background: #1c2233; border: 1px solid var(--panel-edge);
  border-left: 3px solid var(--blue);
  border-radius: 9px; padding: 8px 11px; font-size: 13px; cursor: pointer;
  transition: background .12s, transform .12s;
}
.of-card:hover { background: #232b42; transform: translateX(2px); }
.of-top { display: flex; justify-content: space-between; gap: 8px; font-weight: bold; }
.of-top b { color: var(--blue); font-size: 11.5px; font-weight: normal; }
.of-where { color: var(--text-dim); font-size: 11.5px; margin-top: 3px; }
.of-brief { margin-top: 5px; line-height: 1.6; }
.of-reward { margin-top: 5px; font-size: 11.5px; color: var(--accent); }
.of-btns { display: flex; gap: 7px; margin-top: 7px; flex-wrap: wrap; }
.of-take, .of-skip {
  border-radius: 999px; padding: 5px 12px; font-family: inherit; font-size: 12px; cursor: pointer;
}
.of-take { background: var(--accent); color: #1a1f2e; border: 1px solid var(--accent); font-weight: bold; }
.of-take:hover { filter: brightness(1.08); }
.of-skip { background: transparent; color: var(--text-dim); border: 1px dashed var(--panel-edge); }
.of-skip:hover { color: var(--text); border-color: var(--text-dim); }
.ms-card.ms-board { border-left-color: var(--blue); }
.ms-drop { color: var(--blue); }
.world-back:hover { background: var(--accent); color: #1a1f2e; }

/* 手机方向盘 */
.touch-pad { display: grid; grid-template-columns: repeat(3, 44px); gap: 6px; margin-top: 8px; }
.tp {
  background: #2c3650; color: var(--text); border: 1px solid var(--panel-edge);
  border-radius: 8px; height: 38px; font-size: 15px; cursor: pointer; font-family: inherit;
}
.tp:active { background: var(--accent); color: #1a1f2e; }
.tp-up { grid-column: 2; }
.tp-left { grid-column: 1; grid-row: 2; }
.tp-down { grid-column: 2; grid-row: 2; }
.tp-right { grid-column: 3; grid-row: 2; }
.tp-e { grid-column: 3; grid-row: 1; background: #4a3f22; color: var(--accent); font-weight: bold; }
.tp-f { grid-column: 3; grid-row: 3; background: #22404a; color: #8fd3ff; font-weight: bold; }

/* ---------- 人物关系卡 ---------- */
.npc-card {
  position: relative;
  background: #1c2233; border: 1px solid var(--panel-edge);
  border-radius: 9px; padding: 7px 10px; margin-bottom: 6px;
  font-size: 12.5px; line-height: 1.5;
}
.npc-card.locked { opacity: .45; }
.npc-card.has-quest { border-color: var(--accent); }
.npc-dot {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; margin-right: 5px; vertical-align: 1px;
}
.npc-role { color: var(--text-dim); font-size: 11px; }
.npc-rel { float: right; color: var(--accent); font-size: 11px; }
.npc-bar {
  clear: both; height: 4px; background: #141827;
  border-radius: 999px; margin-top: 5px; overflow: hidden;
}
.npc-bar i { display: block; height: 100%; border-radius: 999px; }
.npc-quest { color: var(--accent); font-size: 11px; margin-top: 4px; }
.npc-card.gone { opacity: .6; border-style: dashed; }

/* 隐藏剧本：进行中的这一幕给金边，当上总统整张卡发光 */
.map-card.hidden-act { border-left: 3px solid var(--accent); }
.map-card.president {
  border-color: #c9a227;
  background: linear-gradient(135deg, #3a3120, #1c2233);
  color: var(--accent); font-weight: bold;
}
.npc-total { font-size: 11.5px; color: var(--text-dim); margin-bottom: 7px; line-height: 1.6; }
.npc-hint { font-size: 12px; color: var(--accent); margin: 0 0 8px; }

/* 人生经纬网上的时代分隔线 */
.era-line {
  font-size: 11px; color: var(--text-dim); letter-spacing: 3px;
  margin: 12px 0 6px; padding-bottom: 3px;
  border-bottom: 1px solid var(--panel-edge);
}

/* 主线卡上的小进度条 */
.mini-bar { height: 5px; margin-top: 6px; }
.prog { color: var(--accent); font-size: 11px; font-weight: normal; }

/* 弹窗里的人物卡 */
.npc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.npc-head b { font-family: var(--font-serif); font-size: 17px; letter-spacing: .04em; }
/* 写一个人的样子，用楷体：像有人在纸上给你描述他 */
.npc-look {
  font-family: var(--font-kai);
  font-size: 13.5px; line-height: 1.9; color: var(--text); margin-bottom: 8px;
}
.npc-per {
  font-family: var(--font-kai);
  font-size: 13px; color: var(--text-dim); line-height: 1.85; margin-bottom: 10px;
}
.npc-bonds { font-size: 12px; color: var(--accent); margin: 10px 0 4px; }
.npc-bond { font-size: 12px; color: var(--text-dim); line-height: 1.7; padding-left: 6px; }

/* 人物线：不是档案，是一句话提醒你"他不是一个人" */
.npc-line {
  font-family: var(--font-kai);
  font-size: 13px; line-height: 1.8; color: var(--text);
  margin: 10px 0 0; padding: 7px 9px;
  border-left: 2px solid var(--panel-edge);
  background: rgba(255,255,255,.03);
}
.npc-line .dim { font-size: 12px; color: var(--text-dim); }

/* 回指：这一块的语气要像“他记得”，不能像系统提示 */
.npc-recall {
  font-family: var(--font-kai);
  font-size: 13px; line-height: 1.85; color: var(--text);
  margin: 0 0 10px; padding: 8px 10px;
  border-left: 2px solid var(--accent);
  background: rgba(201,162,39,.05);
}
.npc-recall b { font-weight: normal; color: var(--accent); }
.npc-recall .q { color: var(--text-dim); font-size: 12px; }

/* 小工具类 */
.dim { color: var(--text-dim); font-size: 12.5px; }

/* 键帽：用等宽字体，大小一眼分得清 */
kbd {
  font-family: var(--font-mono); font-size: .86em; line-height: 1;
  padding: 2px 5px; border-radius: 4px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  border-bottom-width: 2px; color: var(--text);
}

::selection { background: rgba(255,209,102,.30); color: #fff; }
.mark { color: var(--accent); font-size: 13px; }
.hidden { display: none !important; }

/* =========================================================
   窗口层（思维导图 / 家族档案）与全屏小镇
   ========================================================= */
.win {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(10, 13, 22, .96);
  display: flex; flex-direction: column;
}
.win.hidden { display: none; }

.win-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--panel-edge);
  background: #1a2033; flex-wrap: wrap;
}
.web-tab {
  background: #232a3d; border: 1px solid var(--panel-edge); color: var(--text-dim);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.web-tab.on { color: #1a1f2e; background: var(--accent); border-color: var(--accent); font-weight: bold; }
.win-tip { font-size: 11.5px; color: var(--text-dim); flex: 1; }
.web-btn {
  background: #2c3650; border: 1px solid var(--panel-edge); color: var(--text);
  border-radius: 8px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.web-btn:hover { background: var(--accent); color: #1a1f2e; }
.web-x { border-color: var(--red); }
.win-body { flex: 1; padding: 12px; overflow: auto; position: relative; }
#web-canvas { display: block; width: 100%; border-radius: 10px; cursor: grab; }
.web-book { color: var(--text); font-size: 13px; }

/* 家族档案 */
.book-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.book-head b { font-family: var(--font-serif); font-size: 19px; letter-spacing: .14em; }
.book-head span { color: var(--text-dim); font-size: 12.5px; }
.book-sub { color: var(--accent); font-size: 12.5px; margin: 14px 0 8px; }
.achv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 9px; }
.achv {
  background: #1c2233; border: 1px solid var(--panel-edge); border-radius: 10px;
  padding: 9px 11px; font-size: 13px; display: flex; flex-direction: column; gap: 2px;
}
.achv-icon { font-size: 18px; }
.achv.locked { opacity: .42; }
.achv-desc { color: var(--text-dim); font-size: 11.5px; }
.ending-list { display: flex; flex-wrap: wrap; gap: 7px; }
.ending-list span {
  background: #1c2233; border: 1px solid var(--panel-edge);
  border-radius: 999px; padding: 4px 11px; font-size: 12px;
}
.book-foot { margin-top: 18px; display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text-dim); }

/* ---------- 存档区（家族档案最下面）：导出 / 导入 / 自动快照 ---------- */
.save-box {
  margin: 8px 0 4px; padding: 12px;
  border: 1px solid var(--panel-edge); border-radius: 10px;
  background: rgba(0, 0, 0, .16);
}
.save-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.save-tip { color: var(--text-dim); font-size: 11.5px; line-height: 1.65; }
.save-import textarea {
  width: 100%; min-height: 90px; margin: 6px 0; padding: 8px 10px;
  border: 1px solid var(--panel-edge); border-radius: 8px;
  background: rgba(0, 0, 0, .28); color: var(--text);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  resize: vertical;
}
.snap-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.snap-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .035);
}
.snap-row .snap-when { font-size: 12px; color: var(--text); }
.snap-row .snap-when em { font-style: normal; font-size: 11px; color: var(--text-dim); margin-left: 4px; }
.snap-undo { background: rgba(255, 209, 102, .09); }

/* ---------- 小镇全屏：整个屏幕都是镇子 ---------- */
/* 注意：不能写 .game-grid { display:none } —— 小镇的 canvas 就住在那里面，
   连它的祖先一起藏掉，fixed 也救不回来，整屏就是黑的。只藏左右两栏。 */
body.town-full .game-grid { display: block; }
body.town-full .col-character, body.town-full .col-map { display: none; }
body.town-full .col-main { border: 0; background: transparent; padding: 0; }
/* 全屏时背包竖在地图右边：地图让出一条，不是把背包盖在楼上 */
body.town-full .world-wrap {
  position: fixed; inset: 0; z-index: 25; border-radius: 0; display: block;
  background: var(--bg);      /* 室内画布比屏幕矮时，下面不要露出面板文字 */
}
/* 背包改成弹窗后，全屏不再需要从右边让出一条（旧的 --bag-w 一并删掉） */
/* 应急复位那个圆钮原本钉在屏幕右下角，全屏时会跟退出全屏那几个按钮撞：
   全屏时挪到左上（时间标签下面），不压底部按钮 */
body.town-full .rescue-btn { top: calc(48px + env(safe-area-inset-top)); left: 12px; right: auto; bottom: auto; }
body.town-full #world-canvas { width: 100%; height: auto; }
body.town-full .world-hud {
  position: fixed; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 8px 12px; background: rgba(20,24,39,.92);
  border-top: 1px solid var(--panel-edge);
  /* 这条 HUD 贴着屏幕下沿，触屏方向键就住在它里面：
     不避开 Home 指示条，手指会先碰到那条横杠而不是按钮。 */
  padding: 8px calc(12px + env(safe-area-inset-right))
           calc(8px + env(safe-area-inset-bottom))
           calc(12px + env(safe-area-inset-left));
}
body.town-full .touch-pad { margin-top: 0; }

/* ---------- 本学期目标 ---------- */
.goal-board { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.goal-card {
  background: #1c2233; border: 1px solid var(--panel-edge);
  border-left: 3px solid var(--blue);
  border-radius: 9px; padding: 8px 11px; font-size: 13px;
}
.goal-card.goal-done { border-left-color: var(--green); }
.goal-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.goal-top b { color: var(--accent); font-size: 12px; }
.goal-sub { color: var(--text-dim); font-size: 11px; margin-top: 4px; }

/* 面板小按钮 */
.win-btns { float: right; display: flex; gap: 5px; }
.mini-act {
  background: #232a3d; border: 1px solid var(--panel-edge); color: var(--text-dim);
  border-radius: 999px; padding: 3px 9px; font-size: 11px; cursor: pointer; font-family: inherit;
}
.mini-act:hover { color: var(--accent); border-color: var(--accent); }

/* =========================================================
   桌面窗口（我的一天 / 我的小人 / 人生经纬网 各自弹出）
   ========================================================= */
.appwin {
  position: fixed; z-index: 40;
  background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 40px);
}
.appwin.hidden { display: none; }
.appwin.maxed { left: 8px !important; top: 40px !important; width: calc(100vw - 16px) !important; max-height: calc(100vh - 56px); }
.appwin-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; background: #1a2033; border-bottom: 1px solid var(--panel-edge);
  cursor: move; user-select: none;
}
.appwin-title { font-size: 13px; font-weight: bold; letter-spacing: 1px; flex: 1; }
.appwin-btns { display: flex; gap: 4px; }
.aw-b {
  width: 26px; height: 22px; line-height: 1; font-size: 12px;
  background: #232a3d; color: var(--text-dim);
  border: 1px solid var(--panel-edge); border-radius: 6px; cursor: pointer; font-family: inherit;
}
.aw-b:hover { color: var(--accent); border-color: var(--accent); }
.appwin-body { overflow: auto; padding: 14px; }
.appwin-body .panel, .appwin-body section.panel { border: 0; background: transparent; padding: 0; }
/* 搬进窗口后，面板宽度跟着窗口走 */
.inwin { min-width: 0; }

/* 三栏里空出来的格子 */
.hole {
  border: 1px dashed var(--panel-edge); border-radius: 12px;
  padding: 22px 14px; text-align: center; color: var(--text-dim); font-size: 12.5px;
  display: flex; flex-direction: column; gap: 10px; align-items: center; min-height: 140px; justify-content: center;
}
.hole button {
  background: #232a3d; color: var(--text-dim); border: 1px solid var(--panel-edge);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.hole button:hover { color: var(--accent); border-color: var(--accent); }

/* =========================================================
   室内：房间小面板（贴在画布下方，绝不盖住地图）
   ========================================================= */
.room-panel {
  margin-top: 10px; padding: 10px 12px;
  background: #1c2233; border: 1px solid var(--panel-edge);
  border-left: 3px solid var(--accent);
  border-radius: 10px; display: flex; flex-direction: column; gap: 7px;
  max-height: 210px; overflow: auto;
}
.room-panel.hidden { display: none; }
.rp-head { display: flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.rp-head span { color: var(--text-dim); font-size: 11.5px; margin-left: auto; }
.rp-desc { font-size: 12px; color: var(--text-dim); line-height: 1.7; }
.rp-lock { font-size: 12px; color: var(--red); }
.rp-empty { font-size: 12px; color: var(--text-dim); }
.rp-btn {
  text-align: left; background: #2c3650; color: var(--text);
  border: 1px solid var(--panel-edge); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.rp-btn:hover { background: var(--accent); color: #1a1f2e; }
.rp-btn em { font-style: normal; opacity: .65; font-size: 11px; margin-left: 6px; }
.rp-btn.off { opacity: .45; cursor: not-allowed; }
.rp-why { font-size: 11px; color: var(--red); margin-left: 6px; }
.rp-done { font-size: 12px; color: var(--green); line-height: 1.6; border-top: 1px dashed var(--panel-edge); padding-top: 6px; }
body.town-full .room-panel { max-height: 26vh; }

/* =========================================================
   任务清单（有人托你办事）
   ========================================================= */
.mission-board { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ms-card {
  background: #1c2233; border: 1px solid var(--panel-edge);
  border-left: 3px solid var(--accent);
  border-radius: 9px; padding: 8px 11px; font-size: 13px; cursor: pointer;
  transition: background .12s, transform .12s;
}
.ms-card:hover { background: #232b42; transform: translateX(2px); }
.ms-card.ms-urgent { border-left-color: var(--red); }
.ms-top { display: flex; justify-content: space-between; gap: 8px; font-weight: bold; }
.ms-top b { color: var(--accent); font-size: 11.5px; font-weight: normal; }
/* 卡片标题前面那一小块分量徽标：比弹窗里的小一号，不抢标题 */
.ms-top .rar, .of-top .rar { font-size: 10px; padding: 2px 5px 2px 4px; margin-right: 5px; }
.ms-top .rar .rar-mark, .of-top .rar .rar-mark { font-size: 9px; }
.ms-card.ms-urgent .ms-top b { color: var(--red); }
.ms-step { color: var(--text); font-size: 12.5px; margin-top: 4px; }
.ms-where { color: var(--text-dim); font-size: 11.5px; margin-top: 3px; line-height: 1.6; }
.ms-bar { height: 4px; margin-top: 6px; }
/* 室内：任务步骤那几个按钮特别标出来 */
.rp-mission { border-left: 3px solid var(--accent); background: #2b3450; }
.rp-mission em { color: var(--accent); font-style: normal; font-size: 11px; margin-left: 6px; }
.rp-mission-tip { font-size: 11.5px; color: var(--accent); padding: 2px 0 0; }

/* 任务卡上的"婉拒"——小、灰、但一直在那儿 */
.ms-refuse {
  margin-top: 6px; background: transparent; color: var(--text-dim);
  border: 1px dashed var(--panel-edge); border-radius: 999px;
  padding: 3px 10px; font-size: 11.5px; cursor: pointer; font-family: inherit;
}
.ms-refuse:hover { color: var(--red); border-color: var(--red); }

/* 经纬网顶栏统计（断线多了会变红） */
.win-stat { margin-left: auto; color: var(--text-dim); font-size: 11.5px; padding: 0 8px; }
.win-stat-bad { color: var(--red); }

/* 家族档案里"上一世那一页" */
.book-past { margin: 6px 0 10px; }
.past-h { font-weight: bold; color: var(--accent); font-size: 13px; margin-bottom: 3px; }
.past-r { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px;
          color: var(--text-dim); padding: 2px 0; flex-wrap: wrap; }
.past-bad { color: var(--red); }

/* 名册：工位与生分 */
.npc-where { font-size: 11px; color: var(--accent); margin-top: 3px; }
.npc-cool { font-size: 11px; color: var(--red); margin-top: 2px; }

/* =========================================================
   主界面（标题屏）
   ========================================================= */
.mainscreen {
  position: fixed; inset: 0; z-index: 900;
  background: radial-gradient(circle at 50% 18%, #2b3450 0%, #151926 62%, #0d1018 100%);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.ms-inner { text-align: center; max-width: 560px; width: 100%; }
.ms-title { margin: 0 0 8px; font-family: var(--font-serif);
            font-size: 34px; font-weight: 600; letter-spacing: .14em; text-indent: .14em;
            background: linear-gradient(90deg, #ffcf5c, #ff9a5c); -webkit-background-clip: text; color: transparent; }
.ms-sub { font-family: var(--font-kai); color: var(--text-dim);
          font-size: 13px; line-height: 1.85; margin: 0 0 10px; }
.ms-canvas { display: block; margin: 0 auto 10px; background: rgba(0,0,0,.22);
             border: 1px solid var(--panel-edge); border-radius: 14px; }
.ms-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ms-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--panel-2); border: 1px solid var(--panel-edge); border-radius: 11px;
  padding: 9px 12px; cursor: pointer; color: var(--text); font-family: inherit; text-align: left;
  transition: background .12s, transform .12s, border-color .12s;
}
.ms-btn:hover { background: #2b3450; transform: translateY(-1px); border-color: var(--accent); }
.ms-btn span { font-size: 14px; font-weight: bold; }
.ms-btn em { font-style: normal; font-size: 11px; color: var(--text-dim); }
.ms-btn.ms-heir { grid-column: 1 / -1; border-color: var(--accent); background: #2b2440; }
.ms-foot { color: #6b7894; font-size: 11px; margin: 12px 0 0; }

/* =========================================================
   分区直达
   ========================================================= */
.district {
  position: fixed; inset: 6vh 6vw; z-index: 860;
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}
.dz-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
          border-bottom: 1px solid var(--panel-edge); background: var(--panel-2); font-size: 13px; }
.dz-bar .dim { color: var(--text-dim); font-size: 11.5px; }
.dz-close { margin-left: auto; }
.dz-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; }
.dz-tab { background: var(--panel-2); border: 1px solid var(--panel-edge); border-radius: 999px;
          padding: 5px 12px; font-size: 12.5px; cursor: pointer; color: var(--text); font-family: inherit; }
.dz-tab.on { background: var(--accent); color: #14182a; border-color: var(--accent); font-weight: bold; }
.dz-desc { padding: 8px 14px 0; color: var(--text-dim); font-size: 12px; }
.dz-body { flex: 1; overflow: auto; padding: 10px 14px 14px;
           display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 10px; align-content: start; }
.dz-card { background: var(--panel-2); border: 1px solid var(--panel-edge); border-radius: 12px; padding: 10px 12px; }
.dz-card.dz-lock { opacity: .55; }
.dz-name { font-weight: bold; font-size: 13.5px; margin-bottom: 3px; }
.dz-line { color: var(--text-dim); font-size: 11.5px; line-height: 1.6; min-height: 32px; }
.dz-note { color: var(--red); font-size: 11.5px; margin-top: 5px; }
.dz-btns { display: flex; gap: 6px; margin-top: 7px; }
.dz-go, .dz-in { flex: 1; font-size: 12px; padding: 6px 8px; border-radius: 9px; cursor: pointer;
                 font-family: inherit; border: 1px solid var(--panel-edge); background: #232b42; color: var(--text); }
.dz-in { border-color: var(--accent); color: var(--accent); }
.dz-go:hover, .dz-in:hover { background: #2d3752; }

/* 人生剪影条 + 面板上的快捷按钮 */
.baby-strip { display: block; margin: 6px auto 2px; }
.ms-quick { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 10px; }
/* 书包单独占一行：它是“随时能开”的入口，不跟两扇窗挤成三个小钮 */
#q-bag { flex: 1 0 100%; }
.q-btn { background: var(--panel-2); border: 1px solid var(--panel-edge); border-radius: 999px;
         padding: 5px 10px; font-size: 12px; cursor: pointer; color: var(--text); font-family: inherit; }
.q-btn:hover { border-color: var(--accent); color: var(--accent); }
.q-btn kbd { color: var(--text-dim); font-size: 10px; }
/* 卡住自救时闪一下的提示 */
.world-hint { color: var(--accent) !important; font-weight: bold; }

/* 刚派下来的任务：卡片亮一下，替代弹窗 */
.ms-card.ms-new { border-color: var(--accent); background: #26304a; animation: msNew 1.6s ease-out; }
@keyframes msNew {
  0% { box-shadow: 0 0 0 0 rgba(255,207,92,.55); transform: translateX(6px); }
  70% { box-shadow: 0 0 0 10px rgba(255,207,92,0); }
  100% { transform: translateX(0); }
}

/* 小镇 HUD：提示条一行摆好，按钮靠右，别互相压 */
.world-hud { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 门口那句话会越拼越长（办事 N 件 · 小事 N 件 · 贴着委托），
   早先一行截断会把最后的“贴着一张委托”吞掉：宁可让它换行，也不许藏 */
.world-hud .world-prompt { flex: 1 1 240px; min-width: 0; white-space: normal;
  line-height: 1.55; }
.world-hud .world-back { flex: 0 0 auto; }

/* 分区界面：说明独占一行，关闭按钮像个按钮 */
.dz-desc { grid-column: 1 / -1; padding: 2px 0 4px; }
.dz-close { background: #2c3650; color: var(--text); border: 1px solid var(--panel-edge);
            border-radius: 999px; padding: 5px 12px; cursor: pointer; font-family: inherit; font-size: 12.5px; }
.dz-close:hover { border-color: var(--red); color: var(--red); }
/* 面板标题里的按钮：不再浮动，免得下面的说明文字绕排成三行 */
.win-btns { float: none; display: flex; gap: 6px; margin-top: 6px; }

/* 🛟 应急复位：右下角常驻，任何界面都点得到 */
.rescue-btn {
  position: fixed; right: 14px; bottom: 14px; z-index: 950;
  width: 42px; height: 42px; border-radius: 50%;
  background: #2b3450; border: 1px solid var(--panel-edge); color: var(--text);
  font-size: 19px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
}
.rescue-btn:hover { border-color: var(--accent); transform: translateY(-2px); }


/* 锁住的地点：也能点，告诉玩家差什么 */
.dz-why { width: 100%; font-size: 12px; padding: 6px 8px; border-radius: 9px; cursor: pointer;
          font-family: inherit; border: 1px dashed var(--red); background: #2a2434; color: var(--red); }
.dz-why:hover { background: #342b3f; }

/* =====================================================
   ★ 首屏加载遮罩（第十轮上线）
   86 个脚本没下完之前先给个画面，别让玩家盯着白屏。
   收起逻辑写在 index.html 的内联脚本里，所以这块样式不依赖任何 js。
   z-index 要高过一切：弹窗才 900 上下，这里给 9999。
   ===================================================== */
.boot {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  transition: opacity .5s ease, visibility .5s ease;
}
.boot-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-title {
  font-family: var(--font-serif); font-size: 26px; letter-spacing: .14em; color: var(--text);
}
.boot-bar { width: 148px; height: 4px; border-radius: 999px; overflow: hidden; background: #2c3550; }
.boot-bar i {
  display: block; width: 40%; height: 100%; border-radius: 999px; background: var(--accent);
  animation: boot-run 1.1s ease-in-out infinite;
}
@keyframes boot-run {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(280%); }
}
.boot-txt { font-size: 13px; color: var(--text-dim); letter-spacing: .1em; }