*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0e13; --panel:#121a23; --panel2:#0e151d; --line:#1e2b38;
  --ink:#e6eef7; --dim:#7f93a6; --teal:#4fd1c5; --amber:#f6ad55;
  --red:#f16a6a; --blue:#5aa9f0; --green:#7ed37e;
  /* 主题附加变量：昼夜两套配色只改这一组，别处一律走变量 */
  --bg-glow:#152231; --canvas-bg:#0b121a; --card-grad:#141f2b;
  --card-grad2:#101a24; --pip:#22303c; --pip-edge:#31424f;
  --shade:#000; --sun:0;
  color-scheme:dark;
}
/* 白天主题：同一套布局换一层日光下的浅色纸面，强调色加深以保证对比度 */
html[data-theme="day"]{
  --bg:#eef2f6; --panel:#ffffff; --panel2:#f4f8fb; --line:#d2dde8;
  --ink:#16212c; --dim:#5b7085; --teal:#0d8f83; --amber:#b4710a;
  --red:#c94343; --blue:#2c74c4; --green:#358a44;
  --bg-glow:#dbe7f2; --canvas-bg:#c8d6e3; --card-grad:#eef4f9;
  --card-grad2:#e4ecf4; --pip:#c8d5e1; --pip-edge:#b0c1d1;
  --shade:#5a6d7e; --sun:1;
  color-scheme:light;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:radial-gradient(1200px 600px at 20% -10%,#152231 0%,var(--bg) 60%);
  color:var(--ink); min-height:100vh; min-height:100dvh;
  font:14px/1.55 -apple-system,"Segoe UI",system-ui,"Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain;
}
.wrap{max-width:1900px;margin:0 auto;padding:10px 10px 24px}

/* ============ 顶栏 ============ */
.top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:13px}
.brand{font-size:17px;font-weight:700;letter-spacing:.5px;display:flex;align-items:center;gap:9px}
.brand em{font-style:normal;font-size:11px;color:var(--dim);letter-spacing:2px;font-weight:500}
.dot{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);animation:pulse 2.4s infinite}
@keyframes pulse{50%{opacity:.35}}
.top .spacer{flex:1}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:6px 12px;font-size:12.5px;color:var(--dim)}
.chip b{color:var(--ink);font-variant-numeric:tabular-nums}
.chip.ap{display:flex;align-items:center;gap:8px}
/* 顶栏时钟：入夜（22:00–06:00）转成警示色，只是配色，不触发结算 */
.chip.clk{font-variant-numeric:tabular-nums;letter-spacing:.4px}
.chip.clk b{letter-spacing:.4px}
.chip.clk.hot{border-color:rgba(226,110,90,.55);color:#e2866e}
.chip.clk.hot b{color:#f0a08c}
/* 顶栏扬声器开关 */
.chip.snd{width:36px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;color:var(--ink);cursor:pointer;transition:border-color .15s,color .15s,opacity .15s}
.chip.snd:hover{border-color:#4fd1c5;color:#4fd1c5}
.chip.snd:active{transform:scale(.94)}
.chip.snd.off{color:#5a6572;opacity:.7}
@media(max-width:640px){.chip.snd{width:44px;height:44px;font-size:17px}}
/* 顶栏账户入口：游客显示「游客」，登录后显示昵称 */
.chip.acc{display:inline-flex;align-items:center;gap:6px;max-width:170px;cursor:pointer;
  font:inherit;font-size:12.5px;transition:border-color .15s,color .15s}
.chip.acc b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.acc:hover{border-color:var(--teal)}
.chip.acc.on{border-color:rgba(79,209,197,.5);color:var(--teal)}
.chip.acc.on b{color:var(--teal)}
#apNum{display:inline-flex;align-items:center;gap:3px}
.pip{display:block;width:7px;height:7px;border-radius:50%;background:var(--pip);box-shadow:inset 0 0 0 1px var(--pip-edge)}
.pip.on{background:var(--teal);box-shadow:0 0 8px -1px var(--teal)}

/* ============ 布局：左栏（日志 + 状态）/ 地图 ============
   右侧功能不再是第三栏，改成悬浮在右上角的图标坞（见文件末尾 .act-dock），
   地图因此多拿到两百多像素。 */
.body{display:grid;grid-template-columns:230px minmax(0,1fr);gap:8px;align-items:start}
.col{display:flex;flex-direction:column;gap:12px;min-width:0}
.c-status{grid-column:1}
.c-world{grid-column:2}

canvas{
  display:block;margin:0;max-width:100%;
  border-radius:14px;border:1px solid var(--line);background:#0b121a;cursor:pointer;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
}
/* ============ 街区画布：地图外面套一条街道信息 ============ */
.street{width:100%;margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.street-top{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;
  font-size:10.5px;letter-spacing:.5px;color:var(--dim);
}
.street-name{color:var(--teal);letter-spacing:1.4px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.street-name.hot{color:#eaf6ff;text-shadow:0 0 10px rgba(127,227,255,.45)}
.street-key{margin-left:auto;display:flex;align-items:center;gap:4px;white-space:nowrap;flex:0 0 auto}
.street-key i.k{display:inline-block;width:9px;height:9px;border-radius:3px;margin-left:7px;vertical-align:-1px}
.street-key i.k.on{background:#1d3a33;box-shadow:inset 0 0 0 1px rgba(79,209,197,.75)}
.street-key i.k.off{background:#1a2530;box-shadow:inset 0 0 0 1px rgba(120,145,170,.3)}
.street-key i.k.sp{background:#20303f;box-shadow:inset 0 0 0 1px rgba(143,166,186,.8)}
.street-key i.k.lit{background:#2a3a1d;box-shadow:inset 0 0 0 1px rgba(163,230,53,.85)}
/* ============ 主线 · 残页：左下角的引导卡 ============ */
.quest-float{width:auto}
.quest-chip{
  display:flex;align-items:center;gap:9px;width:100%;padding:11px 11px 12px;
  border:1px solid rgba(79,209,197,.28);border-radius:12px;text-align:left;
  background:linear-gradient(180deg,rgba(16,25,34,.88),rgba(9,15,21,.84));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 44px -28px #000,inset 0 1px 0 rgba(255,255,255,.05);
  color:var(--ink);font:inherit;cursor:pointer;transition:.16s;
}
.quest-chip:hover{border-color:rgba(79,209,197,.55);transform:translateY(-1px)}
.quest-chip:active{transform:translateY(0) scale(.995)}
.quest-chip .q-ico{
  flex:0 0 20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(79,209,197,.15);color:var(--teal);
  font-size:8px;font-style:normal;line-height:1;
  box-shadow:0 0 0 3px rgba(79,209,197,.06);
}
/* 纵向节奏：标题 / 说明 / 目标 / 奖励各留一口气，别糊成一坨 */
.quest-chip .q-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.quest-chip .q-top{display:flex;align-items:baseline;gap:6px;min-width:0}
.quest-chip b{
  font-size:12px;font-weight:600;letter-spacing:.3px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.quest-chip .q-num{
  flex:0 0 auto;font-size:10.5px;font-style:normal;font-weight:600;
  color:var(--teal);font-variant-numeric:tabular-nums;
}
.quest-chip .q-tip{
  font-size:10.5px;font-style:normal;line-height:1.5;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 章节卡：每条路一个进度块，做完一条就点亮一条，全部点亮才发奖。
   目标文案往往很长，必须竖排并允许换行：
   横排 flex 会把每个胶囊挤窄，文字溢出后压到旁边的目标上，整块糊成一片。 */
.quest-chip .q-goals{display:flex;flex-direction:column;gap:6px}
.quest-chip .q-goal{
  display:flex;align-items:flex-start;justify-content:space-between;gap:6px;
  font-size:10px;font-style:normal;line-height:1.55;padding:6px 8px;border-radius:8px;
  color:var(--dim);background:rgba(120,145,170,.1);
  box-shadow:inset 0 0 0 1px rgba(120,145,170,.18);
  font-variant-numeric:tabular-nums;
}
/* 目标文案可换行，进度固定贴右边，长文案不会把「0/2」挤到孤零零一行 */
.quest-chip .q-goal-tx{flex:1 1 auto;min-width:0;font-style:normal;overflow-wrap:anywhere}
.quest-chip .q-goal-num{flex:0 0 auto;font-style:normal;opacity:.85}
.quest-chip .q-goal.on{color:#0f2a26;background:rgba(79,209,197,.82);box-shadow:inset 0 0 0 1px rgba(79,209,197,.95)}
/* 可点的目标行：点哪条就把箭头指到哪条要做的事（game.js 按 data-goal-kind 代理） */
.quest-chip .q-goal.can-go{cursor:pointer;transition:background .15s,box-shadow .15s}
.quest-chip .q-goal.can-go:hover{background:rgba(246,173,85,.16);box-shadow:inset 0 0 0 1px rgba(246,173,85,.45)}
/* 可点目标行右侧常驻一个小箭头：触屏没有 hover，也得一眼看出这行能点 */
.quest-chip .q-goal.can-go::after{content:'↗';flex:0 0 auto;font-style:normal;font-size:10px;color:#f6ad55;opacity:.5;transition:opacity .15s}
.quest-chip .q-goal.can-go:hover::after{opacity:1}
html[data-theme="day"] .quest-chip .q-goal.can-go::after{color:#b07a2c;opacity:.6}
html[data-theme="day"] .quest-chip .q-goal.can-go:hover{background:rgba(246,173,85,.22);box-shadow:inset 0 0 0 1px rgba(176,122,44,.45)}
.quest-chip .q-reward{
  font-size:9.5px;font-style:normal;line-height:1.6;color:rgba(246,173,85,.85);
  overflow-wrap:anywhere;
}
/* 超智体私语：一人一句，只是语气，不改变这一章的目标 */
.quest-chip .q-whisper{
  font-size:10px;font-style:italic;line-height:1.5;color:rgba(79,209,197,.9);
  max-width:100%;overflow-wrap:anywhere;
}
.quest-chip.is-story{gap:8px}
html[data-theme="day"] .quest-chip .q-goal{background:rgba(100,120,130,.1);box-shadow:inset 0 0 0 1px rgba(100,120,130,.2);color:#66798a}
html[data-theme="day"] .quest-chip .q-goal.on{color:#fff;background:#2f9c8f;box-shadow:inset 0 0 0 1px #2f9c8f}
html[data-theme="day"] .quest-chip .q-reward{color:#b07a2c}
html[data-theme="day"] .quest-chip .q-whisper{color:#2f9c8f}
.quest-chip .q-arrow{flex:0 0 auto;font-size:12px;font-style:normal;color:var(--teal);opacity:.75}
.quest-chip.done{border-color:rgba(246,173,85,.36)}
.quest-chip.done .q-ico{background:rgba(246,173,85,.14);color:var(--amber);box-shadow:0 0 0 3px rgba(246,173,85,.06)}
.quest-chip.done b{color:var(--amber)}
.quest-chip.done .q-num,.quest-chip.done .q-arrow{color:var(--amber)}
html[data-theme="day"] .quest-chip{
  border-color:#cfe4e0;
  background:linear-gradient(180deg,rgba(255,255,252,.94),rgba(248,244,234,.9));
  box-shadow:0 20px 44px -30px rgba(90,70,40,.5),inset 0 1px 0 #fff;
}
html[data-theme="day"] .quest-chip .q-tip{color:#66798a}
html[data-theme="day"] .quest-chip.done{border-color:#e3c79a}
html[data-theme="day"] .street-name.hot{color:#0f5f57;text-shadow:none}
.street canvas{max-width:100%}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 14px}
.card h3{font-size:11px;letter-spacing:1.6px;color:var(--dim);font-weight:600;margin-bottom:10px}

/* ============ 状态条 ============ */
.stat{margin-bottom:9px}
.stat:last-child{margin-bottom:0}
.stat-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;margin-bottom:4px}
.stat-head .num{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.stat-head .lbl{color:var(--dim)}
.bar{height:7px;border-radius:5px;background:#1a2531;overflow:hidden}
.bar i{display:block;height:100%;border-radius:5px;transition:width .25s ease}

/* 今晚结算清单：缺什么一眼可见 */
.need-list{display:flex;flex-direction:column;gap:5px;margin-top:11px;padding-top:11px;border-top:1px dashed #22303d}
.need-row{display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.5}
.need-row .k{flex:0 0 34px;color:var(--dim)}
.need-row .v{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.need-row .v em{font-style:normal;font-weight:500;color:var(--dim);font-size:11.5px}
.need-row .flag{margin-left:auto;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px}
.need-row.ok .flag{color:var(--green);background:rgba(126,211,126,.12)}
.need-row.no .flag{color:var(--red);background:rgba(241,106,106,.16)}
.need-row.no .v{color:var(--red)}

/* ============ 急需解决（浮在地图左下角） ============
   只回答一个问题：现在家里最撑不住的是什么。
   每条都能点：家务事直接办掉，要出门的把镜头和人物带到最近的补给点。 */
/* 左下角一列：章节引导 / 形象 / 搭话 / 遭遇 / 补给 / 急需，全部收在这里。
   整列压在画布上，但不吃空白处的点击；卡多了就地滚动，不会顶出地图。
   滚动能力保留，但滚动条不画出来 —— 这一列是贴在画布上的浮层，露出滚动条太脏。 */
.map-stack{
  position:absolute;left:10px;bottom:10px;z-index:3;
  width:min(238px,calc(100% - 20px));
  max-height:calc(100% - 20px);
  display:flex;flex-direction:column;gap:8px;
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;-ms-overflow-style:none;
  pointer-events:none;              /* 两块之间的空白不挡地图点击 */
}
.map-stack::-webkit-scrollbar{width:0;height:0;display:none}
.map-stack>*{pointer-events:auto}
.map-stack>#apHelp:empty,
.map-stack>#lookSlot:empty,
.map-stack>#visit:empty{display:none}   /* 没内容时不留空槽 */

/* 左下角临时日志：新消息浮在引导列「上方」，一条压一条往上长，几秒后自己消失。
   是一过性的气泡，不吃指针 —— 透过它点到的东西照常生效。
   宿主必须自己撑满整块地图：它是 .map-frame 的 flex item，
   缩成 0×0 时里面绝对定位的气泡会被裁掉，DOM 上看得到却不画出来。
   宿主的 bottom 由 ui/src/App.jsx 按 .map-stack 顶边实时算，气泡才不会压在卡片上。 */
#logFlash{position:absolute;inset:0;z-index:6;pointer-events:none}
.log-flash{
  position:absolute;left:10px;bottom:10px;z-index:6;
  width:min(238px,calc(100% - 20px));
  display:flex;flex-direction:column;gap:6px;
  pointer-events:none;
  animation:logFlashIn .22s cubic-bezier(.22,1,.36,1) both;
}
@keyframes logFlashIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.log-flash .bubble{
  display:flex;align-items:flex-start;gap:8px;max-width:100%;
  padding:7px 10px;border-radius:10px;
  background:rgba(17,26,36,.94);border:1px solid #223140;
  font-size:12px;line-height:1.5;color:#a9bccd;
  box-shadow:0 16px 32px -20px #000,inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.log-flash .bubble .tx{flex:1;min-width:0;word-break:break-word}
.log-flash .bubble b{font-weight:700;font-variant-numeric:tabular-nums}
.log-flash .bubble b.up{color:var(--green)}
.log-flash .bubble b.down{color:var(--red)}
.log-flash .bubble.good{color:#b7e6b7;background:rgba(22,41,28,.94);border-color:#2c5b2c}
.log-flash .bubble.bad{color:#f4b0b0;background:rgba(42,23,25,.94);border-color:#5b2c2c}
html[data-theme="day"] .log-flash .bubble{
  background:rgba(255,253,247,.95);border-color:#d8e2ec;color:#41586b;
  box-shadow:0 16px 32px -22px rgba(90,70,40,.5),inset 0 1px 0 #fff;
}
html[data-theme="day"] .log-flash .bubble.good{background:rgba(239,250,241,.96);border-color:#a9d8b0;color:#26693a}
html[data-theme="day"] .log-flash .bubble.bad{background:rgba(253,238,238,.96);border-color:#e8b6b6;color:#8f3232}
.urgent-float{
  position:relative;z-index:auto;
  width:auto;
  padding:9px 10px 10px;border-radius:12px;
  border:1px solid rgba(122,170,200,.22);
  background:linear-gradient(180deg,rgba(16,25,34,.86),rgba(9,15,21,.82));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 44px -28px #000,inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="day"] .urgent-float{
  border-color:#e3d6bf;
  background:linear-gradient(180deg,rgba(255,253,247,.9),rgba(250,244,232,.86));
  box-shadow:0 20px 44px -30px rgba(90,70,40,.55),inset 0 1px 0 #fff;
}
.urgent-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.urgent-float h3{
  display:flex;align-items:center;gap:8px;margin:0;
  font-size:10.5px;letter-spacing:2px;font-weight:600;color:#8ba4b9;
}
.urgent-float h3::before{
  content:"";flex:0 0 2px;width:2px;height:11px;border-radius:2px;
  background:linear-gradient(180deg,var(--amber),rgba(226,168,74,0));
}
html[data-theme="day"] .urgent-float h3{color:#4f6577}
.urgent-count{font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.urgent-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.urgent-item{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:7px 9px;color:var(--ink);font:inherit;cursor:pointer;
  transition:border-color .18s,background .18s,transform .18s;
}
.urgent-item:hover{border-color:var(--teal);background:rgba(79,209,197,.08);transform:translateX(1px)}
.urgent-item:active{transform:translateX(0) scale(.995)}
.urgent-item .udi{
  flex:0 0 7px;width:7px;height:7px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 8px var(--amber);
}
.urgent-item.bad .udi{background:var(--red);box-shadow:0 0 8px var(--red);animation:pulse 1.8s infinite}
.urgent-item .tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.urgent-item .tx b{font-size:12.5px;font-weight:700;line-height:1.35}
/* 提示最多两行：一列宽本来就窄，全截成省略号等于没给信息 */
.urgent-item .tx em{
  font-style:normal;font-size:11px;line-height:1.35;color:var(--dim);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.urgent-item .go{flex:0 0 auto;margin-left:auto;font-size:11px;font-weight:700;color:var(--teal)}
/* 点下去先亮一下：告诉玩家「这一条收到了」，后面的提示气泡顺着它冒出来 */
.urgent-item.hit{
  border-color:var(--teal);background:rgba(79,209,197,.16);
  animation:urgentHit .45s cubic-bezier(.22,1,.36,1);
}
@keyframes urgentHit{
  0%{transform:translateX(0) scale(1)}
  35%{transform:translateX(3px) scale(1.015)}
  100%{transform:translateX(0) scale(1)}
}
.urgent-ok{padding:5px 2px;font-size:12px;color:var(--dim)}
.urgent-ok b{display:block;margin-bottom:2px;font-size:12.5px;color:var(--green)}
.urgent-ok em{font-style:normal}

/* ============ 身体体能不足（左下角，压在「急需解决」上面） ============
   点到走不动的一步时弹出来：吃口热的 / 打一针 / 等自然恢复，
   把「这点体力还能怎么续」摊在明面上，而不是只弹一句提示。
   只做一次性入场，不再硬闪 —— 反复被拦本来就是常事，闪烁只会更烦。 */
.ap-help{
  position:relative;
  --apGlow:246,173,85;
  padding:10px 11px 11px;border-radius:12px;
  border:1px solid rgba(246,173,85,.42);
  background:linear-gradient(180deg,rgba(24,19,12,.94),rgba(11,9,7,.92));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 44px -26px #000,inset 0 1px 0 rgba(255,255,255,.06);
  /* 从画面中央放大一下，再落回左下角；落位后保持安静 */
  animation:apHelpPop .46s cubic-bezier(.2,.85,.25,1);
}
html[data-theme="day"] .ap-help{
  --apGlow:214,132,20;
  border-color:#e6c48e;
  background:linear-gradient(180deg,rgba(255,251,242,.95),rgba(250,243,231,.92));
  box-shadow:0 20px 44px -30px rgba(90,70,40,.5),inset 0 1px 0 #fff;
}
.ap-help-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ap-help h3{
  display:flex;align-items:center;gap:8px;margin:0;
  font-size:11px;letter-spacing:1.5px;font-weight:700;color:var(--amber);
}
.ap-help h3::before{
  content:"";flex:0 0 2px;width:2px;height:11px;border-radius:2px;
  background:linear-gradient(180deg,var(--amber),rgba(226,168,74,0));
}
.ap-help-x{
  flex:0 0 auto;width:20px;height:20px;line-height:1;padding:0;
  border:1px solid var(--line);border-radius:6px;background:transparent;
  color:var(--dim);font-size:14px;cursor:pointer;
}
.ap-help-x:hover{color:var(--ink);border-color:var(--amber)}
.ap-help-sub{margin:7px 0 9px;font-size:11.5px;line-height:1.55;color:var(--dim)}
.ap-help-idle{margin:7px 0 0;padding-top:7px;border-top:1px dashed var(--line);
  font-size:11px;line-height:1.5;color:var(--dim)}
.ap-help-idle::before{content:"▸ ";color:var(--teal)}
.ap-help-sub b{color:var(--ink);font-variant-numeric:tabular-nums}
.ap-opt{
  display:flex;flex-direction:column;gap:2px;width:100%;margin:0 0 6px;
  padding:7px 9px;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:9px;background:var(--panel2);
  color:var(--ink);
}
.ap-opt b{font-size:12px;font-weight:700}
.ap-opt em{font-style:normal;font-size:11px;line-height:1.45;color:var(--dim)}
.ap-opt:hover:not(:disabled){border-color:var(--amber);background:rgba(246,173,85,.08)}
.ap-opt:disabled{opacity:.45;cursor:not-allowed}
/* 硬撑：用生命换这一步，颜色比普通补给更重，提醒玩家这是最后一条路 */
.ap-opt.ap-push{border-color:rgba(241,106,106,.45);background:rgba(241,106,106,.07)}
.ap-opt.ap-push b{color:#f0898a}
.ap-opt.ap-push:hover:not(:disabled){border-color:#f16a6a;background:rgba(241,106,106,.14)}
.ap-help-foot{
  width:100%;padding:6px 2px 0;border:0;background:transparent;
  text-align:left;font-size:11px;color:var(--dim);cursor:pointer;
}
.ap-help-foot:hover{color:var(--teal)}
/* 轻轻放大一下就够了，不再位移和闪烁 */
@keyframes apHelpPop{
  0%{opacity:0;transform:scale(.97)}
  100%{opacity:1;transform:none}
}

/* 顶栏身体体能徽章：AP 不足时红闪抖动，把玩家常看的数字也拉进来 */
.chip.ap.alarm{
  animation:apAlarm .9s ease-out 1;
  border-color:rgba(241,106,106,.75);
  color:#f16a6a;
}
@keyframes apAlarm{
  0%{transform:none;box-shadow:0 0 0 0 rgba(241,106,106,.6)}
  15%{transform:translateX(-3px) scale(1.08);box-shadow:0 0 0 3px rgba(241,106,106,.4)}
  30%{transform:translateX(3px) scale(1.02)}
  45%{transform:translateX(-2px)}
  60%{transform:translateX(2px)}
  100%{transform:none;box-shadow:0 0 0 0 rgba(241,106,106,0)}
}
@media (prefers-reduced-motion: reduce){
  .ap-help{animation:none}
  .chip.ap.alarm{animation:none;outline:2px solid rgba(241,106,106,.75)}
}

/* ============ 章节提示 · 指向目标的箭头 ============
   和「身体体能不足」共用同一套视觉：琥珀色虚线 + 流动 + 箭头头部 + 光晕。
   起点是左下角的章节卡，终点是这一步真正要点的位置（功能坞按钮 / 地图上的楼）。
   箭头挂在 body 上（position:fixed），所以右侧功能坞、地图、移动端换行都能指到。 */
.quest-arrow{
  position:fixed;left:0;top:0;z-index:70;
  pointer-events:none;overflow:visible;
}
.quest-arrow>path{
  fill:none;stroke:#f6ad55;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:8 10;
  filter:drop-shadow(0 0 7px rgba(246,173,85,.8));
  animation:apArrowFlow .45s linear infinite, questArrowOut 2.4s ease forwards;
}
@keyframes apArrowFlow{to{stroke-dashoffset:-18}}
@keyframes questArrowOut{0%,74%{opacity:1}100%{opacity:0}}
/* 气泡压在章节卡上沿：先说做什么，箭头负责指哪儿 */
.quest-hint{
  position:fixed;z-index:71;pointer-events:none;white-space:nowrap;
  transform:translate(-50%,-100%);
  padding:4px 9px;border-radius:8px;
  font-size:12px;font-weight:700;letter-spacing:.3px;color:#ffe7a3;
  background:rgba(24,19,12,.96);
  border:1px solid rgba(246,173,85,.65);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.8),0 0 14px rgba(246,173,85,.32);
  animation:questHintPop 2.4s ease forwards;
}
/* 点卡片弹出的完整提示：允许换行，把被省略号截掉的那半句补全。
   类名别再叫 wrap —— 桌面端 .wrap 是整页布局容器（flex + 100dvh），撞名会把气泡撑满一屏 */
.quest-hint.tip-multi{
  white-space:normal;max-width:min(224px,44vw);
  line-height:1.5;font-weight:600;text-align:left;
}
@keyframes questHintPop{
  0%{opacity:0;transform:translate(-50%,-92%) scale(.94)}
  10%{opacity:1;transform:translate(-50%,-104%) scale(1.02)}
  18%{transform:translate(-50%,-100%) scale(1)}
  78%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-112%)}
}
/* 章节卡本身也更容易被一眼看到：图标呼吸 + 右侧箭头轻轻推一下 */
.quest-chip:not(.done) .q-arrow{
  color:#f6ad55;opacity:.95;
  animation:qArrowNudge 1.3s ease-in-out infinite;
}
@keyframes qArrowNudge{
  0%,100%{transform:translateX(0);opacity:.7}
  50%{transform:translateX(3px);opacity:1}
}
.quest-chip:not(.done) .q-ico{animation:qIcoPulse 1.8s ease-in-out infinite}
@keyframes qIcoPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(79,209,197,.06)}
  50%{box-shadow:0 0 0 3px rgba(246,173,85,.16),0 0 12px rgba(246,173,85,.28)}
}
html[data-theme="day"] .quest-hint{
  color:#7a4d12;background:rgba(255,251,242,.97);border-color:rgba(214,132,20,.6);
}
@media (prefers-reduced-motion: reduce){
  .quest-arrow>path,.quest-hint{animation:none}
  .quest-chip .q-arrow,.quest-chip .q-ico{animation:none}
}

/* ============ 脑力（Token）：不是存款，是生存竞争力 ============ */
.brain{
  border:1px solid #2b4258;border-radius:10px;padding:7px 9px;margin-bottom:10px;
  background:linear-gradient(180deg,rgba(45,93,92,.16),rgba(20,30,40,.35));
  transition:border-color .2s,background .2s;
}
.brain.warn{border-color:#6d5520;background:linear-gradient(180deg,rgba(180,140,50,.14),rgba(20,30,40,.35))}
.brain.bad{border-color:#6d2b2b;background:linear-gradient(180deg,rgba(241,106,106,.15),rgba(20,30,40,.35))}
.brain-head{display:flex;align-items:baseline;gap:6px}
.brain-lab{font-size:10px;letter-spacing:1.4px;color:var(--dim);font-weight:600}
.brain-num{margin-left:auto;font-size:18px;font-weight:800;line-height:1;color:var(--teal);font-variant-numeric:tabular-nums}
.brain-num em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--dim);margin-left:2px}
.brain.warn .brain-num{color:var(--amber)}
.brain.bad .brain-num{color:var(--red)}
/* 四档并排。这是全局最核心的一次取舍，做成按钮而不是下拉，让代价一眼可比 */
.brain-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:6px}
.btier{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-width:0;padding:4px 2px;border-radius:7px;cursor:pointer;font:inherit;line-height:1.15;
  background:rgba(255,255,255,.04);border:1px solid #24333f;color:var(--dim);
  transition:border-color .15s,background .15s,color .15s,transform .1s;
}
.btier b{font-size:10.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.btier i{font-style:normal;font-size:9.5px;font-variant-numeric:tabular-nums;opacity:.8}
.btier:hover{border-color:#3d6b7a;color:var(--ink)}
.btier:active{transform:scale(.95)}
.btier.on{
  border-color:var(--teal);background:rgba(79,209,197,.16);color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(79,209,197,.22);
}
.btier.on i{color:var(--teal);opacity:1}
.brain-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.bchip{
  font-size:10.5px;line-height:1.6;padding:0 6px;border-radius:999px;color:var(--dim);
  background:rgba(255,255,255,.05);border:1px solid #24333f;font-variant-numeric:tabular-nums;
}
.bchip.off{color:var(--red);border-color:#6d2b2b;background:rgba(241,106,106,.12)}
.brain-foot{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11px;color:var(--dim)}
.brain-foot b{margin-left:auto;font-size:11px;font-weight:700;color:var(--teal);white-space:nowrap}
.brain.warn .brain-foot b{color:var(--amber)}
.brain.bad .brain-foot b{color:var(--red)}

/* ============ 日志（气泡流，左栏顶部） ============ */
.card-log{padding:12px 0 0;transition:box-shadow .2s}

/* 左栏第一块：进游戏第一眼就看到刚发生什么 */
.left-log{padding:11px 0 0}
.left-log .log{height:clamp(180px,30vh,320px)}
.left-log .log .bubble{max-width:100%}
.left-log .log .bubble.day{max-width:none}

.log-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 13px 8px;flex-wrap:wrap;row-gap:6px}
.log-head h3{white-space:nowrap;flex:1 1 auto;min-width:0;margin:0}
.log-tools{display:flex;gap:6px;flex:0 0 auto;margin-left:auto}
.log-filter{
  background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  color:var(--dim);font:inherit;font-size:11px;padding:4px 11px;cursor:pointer;
  transition:.15s;touch-action:manipulation;white-space:nowrap;
}
.log-filter.on{color:var(--teal);border-color:#2d5d5c;background:#102224}
.log{
  height:clamp(200px,34vh,380px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:8px;padding:2px 12px 12px;
  scroll-behavior:smooth;
}
.log::-webkit-scrollbar{width:6px}
.log::-webkit-scrollbar-thumb{background:#24333f;border-radius:3px}
.log::-webkit-scrollbar-track{background:transparent}

/* 每条日志是一个气泡：圆角尾巴朝左，自带阴影，从下往上冒出来 */
.log .bubble{
  position:relative;align-self:flex-start;max-width:96%;
  display:flex;align-items:flex-start;gap:8px;
  background:#16222e;border:1px solid #223140;border-radius:12px 12px 12px 4px;
  padding:8px 12px 8px 10px;
  font-size:12.8px;line-height:1.62;color:#a9bccd;
  box-shadow:0 8px 16px -12px #000;
}
/* 新冒出来的那条才播放上浮动画 */
.log .bubble.fresh{animation:bubbleIn .26s cubic-bezier(.2,.8,.3,1) both}
.log .bubble::after{
  content:"";position:absolute;left:-4px;top:12px;width:8px;height:8px;
  background-color:inherit;border-left:1px solid #223140;border-bottom:1px solid #223140;
  transform:rotate(45deg);
}
.log .bubble::before{
  content:"·";flex:0 0 16px;height:16px;line-height:16px;text-align:center;margin-top:2px;
  border-radius:50%;background:#223140;color:#8fa6ba;font-size:11px;font-weight:700;
}
.log .bubble .tx{flex:1;min-width:0;word-break:break-word}
.log .bubble b{font-weight:700;font-variant-numeric:tabular-nums}
.log .bubble b.up{color:var(--green)}
.log .bubble b.down{color:var(--red)}
.log .bubble.good{color:#b7e6b7;background-color:#16291c;border-color:#2c5b2c}
.log .bubble.good::before{content:"＋";background:rgba(126,211,126,.16);color:var(--green)}
.log .bubble.bad{color:#f4b0b0;background-color:#2a1719;border-color:#5b2c2c}
.log .bubble.bad::before{content:"－";background:rgba(241,106,106,.16);color:var(--red)}
/* 最新一条描边发光，一眼看到刚刚发生了什么 */
.log .bubble:last-child{box-shadow:0 0 0 1px rgba(79,209,197,.28),0 10px 20px -12px #000}
/* 每天的分隔标签吸顶，滚多远都知道自己在第几天 */
.log .bubble.day{
  align-self:stretch;justify-content:center;text-align:center;
  position:sticky;top:0;z-index:3;margin:2px 0;
  background:linear-gradient(180deg,#1a2733,#121a23);
  border:1px solid #2c4a5b;border-radius:999px;
  color:var(--blue);font-weight:700;font-size:11.5px;letter-spacing:.5px;
  padding:5px 10px;box-shadow:0 8px 12px -10px #000;
}
.log .bubble.day::before{content:"▍";background:none;color:var(--blue)}
.log .bubble.day::after{display:none}
/* 日期分隔行里的折叠按钮：旧日期默认收成这一行，点一下把那天放出来 */
.log .bubble.day .lg-fold{
  margin-left:8px;padding:1px 9px;border-radius:999px;
  border:1px solid #2c4a5b;background:#0f1a22;color:var(--teal);
  font:inherit;font-size:10.5px;font-weight:600;letter-spacing:0;line-height:1.5;
  cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s;
  touch-action:manipulation;
}
.log .bubble.day .lg-fold:hover,.log .bubble.day .lg-fold:focus-visible{
  border-color:#3d6f7c;background:#132630;outline:none;
}
html[data-theme="day"] .log .bubble.day .lg-fold{
  border-color:#b9d4e2;background:#eef6fa;color:#1d6b73;
}

@keyframes bubbleIn{
  from{opacity:0;transform:translateY(10px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* 放大：日志浮到屏幕中央，一屏看全 */
body.log-open::after{
  content:"";position:fixed;inset:0;background:rgba(4,8,12,.72);
  backdrop-filter:blur(3px);z-index:29;
}
.card-log.expanded{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(880px,94vw);height:min(84vh,780px);z-index:30;
  display:flex;flex-direction:column;padding:14px 0 0;
  background:var(--panel);border:1px solid #2b3d4f;border-radius:16px;
  box-shadow:0 40px 90px -24px #000;
}
.card-log.expanded .log-head{padding:0 16px 10px}
.card-log.expanded .log,
.left-log.card-log.expanded .log{flex:1;height:auto;max-height:none;padding:2px 16px 16px}
.card-log.expanded .bubble,
.left-log.card-log.expanded .log .bubble{max-width:82%;min-width:0;font-size:13.4px}
.card-log.expanded .log .bubble.day{max-width:none;align-self:stretch}

/* ============ 行动区 ============ */

/* 遭遇面板：收在左下角引导列里，不再全屏弹层 + 全屏遮罩，地图始终看得见、点得到 */
.enc{display:none}
.enc.on{
  display:block;position:relative;z-index:auto;
  width:auto;max-height:none;overflow:visible;
  margin:0;padding:10px 11px 11px;border-radius:12px;
  border:1px solid #e05a5a;background:linear-gradient(180deg,#291a1d,#111a23);
  box-shadow:0 0 0 1px rgba(241,106,106,.35),0 20px 44px -28px #000;
  animation:encFlash .9s ease-in-out infinite;
}
/* 遭遇没处理完就狂闪边框，别让人找不到 */
@keyframes encFlash{
  0%,100%{box-shadow:0 0 0 1px rgba(241,106,106,.5),0 0 16px -6px rgba(241,106,106,.5);border-color:#e05a5a}
  50%{box-shadow:0 0 0 4px rgba(241,106,106,.85),0 0 34px 2px rgba(241,106,106,.55);border-color:#ffb3b3}
}
.enc.on.hit{animation:encFlash .9s ease-in-out infinite,encHit .5s ease-out}
@keyframes encHit{
  0%{transform:scale(1)}
  35%{transform:scale(1.025)}
  100%{transform:scale(1)}
}
.enc-t{font-size:11px;letter-spacing:1.4px;color:#ff9d9d;font-weight:600;margin-bottom:6px}
.enc-t::before{content:"⚠ "}
.enc-x{font-size:12.5px;line-height:1.65;color:#c8d8e6;margin-bottom:9px}
.enc-btns{display:grid;gap:6px}
.enc-btns button{
  display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;min-height:44px;
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 10px;
  color:var(--ink);font:inherit;font-size:13px;cursor:pointer;transition:.15s;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
}
.enc-btns button b{font-weight:600}
.enc-btns button span{font-size:11px;color:var(--dim)}
.enc-btns button:disabled{opacity:.4;cursor:default}
/* 收进左栏后按卡片宽度收一档字号，三选一仍然一眼能读 */
.map-stack .enc-t{font-size:10px;letter-spacing:1px;margin-bottom:4px}
.map-stack .enc-x{font-size:11px;line-height:1.55;margin-bottom:7px}
.map-stack .enc-btns{gap:5px}
.map-stack .enc-btns button{font-size:11.5px;padding:6px 8px;min-height:0;border-radius:8px;gap:1px}
.map-stack .enc-btns button span{font-size:10px}

/* 顶部遭遇提示：固定在视口内，滚到哪都躲不掉 */
.enc-flag{
  display:none;position:fixed;z-index:60;top:10px;left:50%;transform:translateX(-50%);
  align-items:center;gap:9px;max-width:min(620px,92vw);padding:8px 14px;border-radius:999px;
  border:1px solid #e05a5a;background:linear-gradient(180deg,#3a1f22,#1d1214);color:#ffe4e4;
  font:inherit;font-size:13px;cursor:pointer;touch-action:manipulation;
  -webkit-user-select:none;user-select:none;
}
.enc-flag.on{display:flex;animation:encFlagFlash .9s ease-in-out infinite}
.enc-flag.on.hit{animation:encFlagFlash .9s ease-in-out infinite,encFlagHit .45s ease-out}
/* 弹层已经占住屏幕中央，顶部提示条不用再露头 */
body.has-enc .enc-flag{display:none}
@keyframes encFlagHit{
  0%{transform:translateX(-50%) scale(1)}
  40%{transform:translateX(-50%) scale(1.08)}
  100%{transform:translateX(-50%) scale(1)}
}
@keyframes encFlagFlash{
  0%,100%{box-shadow:0 0 0 0 rgba(241,106,106,.55),0 10px 26px -12px #000;border-color:#e05a5a}
  50%{box-shadow:0 0 0 5px rgba(241,106,106,.4),0 10px 26px -12px #000;border-color:#ffbcbc}
}
.enc-flag .ico{
  flex:0 0 auto;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  background:var(--red);color:#160b0c;font-size:12px;font-weight:800;line-height:1;
}
.enc-flag .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.enc-flag .go{flex:0 0 auto;color:#ffb3b3;font-size:12px}
.enc-flag:active{transform:translateX(-50%) scale(.98)}
@media(prefers-reduced-motion:reduce){
  .enc.on,.enc-flag.on{animation:none!important}
  .enc.on{box-shadow:0 0 0 3px rgba(241,106,106,.5)}
  .veil-moon,.veil-dots span,.veil-box,.veil.on{animation:none!important}
}

.home{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
.home button,.night{
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--ink);
  font:inherit;font-size:12.5px;padding:9px;min-height:44px;cursor:pointer;transition:.15s;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
}
.home button:disabled{opacity:.35;cursor:not-allowed}
/* 家里动作卡：左侧图标 + 名称/消耗一行 + 说明一行，长文案不再糊成一格 */
.home button.hact{
  display:grid;grid-template-columns:20px minmax(0,1fr) auto;
  grid-template-rows:auto auto;align-items:center;column-gap:6px;row-gap:2px;
  text-align:left;padding:8px 9px;min-height:48px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 70%),var(--panel2);
}
.home button.hact .hicon{
  grid-column:1;grid-row:1 / 3;width:20px;height:20px;border-radius:6px;
  display:grid;place-items:center;font-size:12px;line-height:1;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line);
}
.home button.hact .hname{
  grid-column:2;grid-row:1;font-size:11.8px;font-weight:600;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.home button.hact .hcost{
  grid-column:3;grid-row:1;justify-self:end;font-size:9.5px;font-weight:600;
  color:var(--amber);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.home button.hact .hmeta{
  grid-column:2 / 4;grid-row:2;font-style:normal;font-size:9.5px;line-height:1.35;
  color:var(--dim);
}
.night{
  width:100%;margin-top:10px;padding:12px;font-size:13.5px;font-weight:600;
  background:linear-gradient(180deg,#1b2e3f,#152533);border-color:#2b4a63;color:#cfe6f7
}
.night.hot{border-color:var(--teal);color:#eafcfa;box-shadow:0 0 0 1px rgba(79,209,197,.35),0 0 18px -6px var(--teal)}
.night:disabled{opacity:.6;cursor:default}
.hint{margin-top:7px;font-size:11px;color:#7f93a6;line-height:1.6}

/* ============ 入夜结算遮罩（居中） ============ */
.veil{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  background:rgba(5,9,13,.84);backdrop-filter:blur(7px);z-index:12;
}
.veil.on{display:flex;animation:veilIn .18s ease-out}
.veil-box{
  width:100%;max-width:340px;padding:26px 22px 20px;text-align:center;
  background:linear-gradient(180deg,#101a24,#0b131b);border:1px solid #24405a;border-radius:18px;
  box-shadow:0 26px 60px -22px #000,0 0 0 1px rgba(79,209,197,.1);
  animation:veilPop .22s ease-out;
}
.veil-moon{font-size:28px;line-height:1;animation:veilSwing 1.7s ease-in-out infinite}
.veil-title{margin-top:10px;font-size:15px;font-weight:700;color:#e7f2fa}
.veil-title b{color:var(--teal)}
.veil-line{
  margin-top:10px;min-height:44px;display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1.65;color:#9fb4c6;
  transition:opacity .21s ease-in-out;
}
.veil-line.swap{animation:veilSwap .42s ease-out}
.veil-bar{margin-top:14px;height:4px;border-radius:99px;background:#1b2b3a;overflow:hidden}
.veil-bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#2f6f88,var(--teal))}
.veil-dots{margin-top:13px;display:flex;gap:6px;justify-content:center}
.veil-dots span{width:6px;height:6px;border-radius:50%;background:#3d6a80;animation:veilDot 1.1s infinite}
.veil-dots span:nth-child(2){animation-delay:.18s}
.veil-dots span:nth-child(3){animation-delay:.36s}
.veil-skip{margin-top:16px;font-size:11px;color:#5f7385;letter-spacing:.04em}
@keyframes veilIn{from{opacity:0}to{opacity:1}}
@keyframes veilPop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes veilBar{from{width:0}to{width:100%}}
@keyframes veilSwap{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes veilDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
@keyframes veilSwing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

/* ============ 开场卡：第一屏只讲三件事——为什么、活多久、往哪走 ============ */
.intro{
  position:fixed;inset:0;z-index:13;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(5,9,13,.74);backdrop-filter:blur(6px);
  animation:veilIn .2s ease-out;
}
.intro-card{
  /* 外层已经有 20px 内边距，这里按 100% 收，不能用 92vw，否则窄屏会溢出 */
  position:relative;width:min(420px,100%);padding:22px 22px 20px;border-radius:16px;
  background:linear-gradient(165deg,var(--card-grad),var(--card-grad2));
  border:1px solid var(--line);
  box-shadow:0 26px 60px -18px #000,0 0 0 1px rgba(79,209,197,.08);
  animation:veilPop .24s ease-out;
}
.intro-card::before{
  content:"";position:absolute;left:22px;right:22px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(79,209,197,.65),transparent);
}
.intro-kicker{display:block;font-size:9.5px;font-weight:600;letter-spacing:2px;color:var(--teal)}
.intro-card h2{margin-top:8px;font-size:20px;line-height:1.32;letter-spacing:.3px;color:var(--ink)}
.intro-card p{margin-top:9px;font-size:12px;line-height:1.75;color:var(--dim)}
.intro-goals{margin-top:14px;display:flex;flex-direction:column;gap:5px}
.intro-goals div{
  display:grid;grid-template-columns:34px minmax(0,1fr);align-items:baseline;gap:8px;
  padding:6px 9px;border-radius:8px;border:1px solid var(--line);
  background:rgba(255,255,255,.028);
}
.intro-goals b{font-size:9.5px;font-weight:700;letter-spacing:.8px;color:var(--amber)}
.intro-goals span{font-size:11px;color:var(--ink);opacity:.86}
.intro-btn{
  margin-top:16px;width:100%;min-height:38px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(79,209,197,.45);
  background:linear-gradient(180deg,rgba(79,209,197,.20),rgba(79,209,197,.07));
  color:var(--ink);font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.8px;
  transition:.16s;
}
.intro-btn:hover{background:rgba(79,209,197,.28);border-color:var(--teal)}
html[data-theme="day"] .intro{background:rgba(216,228,238,.76)}
html[data-theme="day"] .intro-goals div{background:#f4f8fb}
html[data-theme="day"] .intro-card{box-shadow:0 26px 60px -22px rgba(30,48,66,.45),0 0 0 1px rgba(13,143,131,.08)}


/* ============ 结算弹层 / toast ============ */
.overlay{
  position:fixed;inset:0;background:rgba(6,10,14,.86);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:9;
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
}
.overlay.on{display:flex}
.modal{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;
  max-width:440px;width:100%;max-height:86vh;overflow-y:auto;text-align:center
}
.modal h2{font-size:22px;margin-bottom:10px}
.modal p{color:var(--dim);font-size:13.5px;line-height:1.8;margin-bottom:20px}
.modal p b{color:var(--ink)}
.modal button{
  background:var(--teal);color:#062a28;border:0;border-radius:10px;padding:12px 26px;
  font:inherit;font-weight:700;cursor:pointer;min-height:46px;touch-action:manipulation
}

/* ============ 账户弹层 ============
   登录只是「把进度记到账户」的可选入口，游客关掉它照样能玩。
   视觉：深色毛玻璃 + 渐变描边 + 顶部氛围光，移动端转成底部抽屉。 */
body.acct-open{overflow:hidden}
.acct-ov{
  z-index:14;padding:24px;
  background:
    radial-gradient(760px 460px at 50% 16%,rgba(79,209,197,.16),transparent 64%),
    radial-gradient(520px 340px at 82% 84%,rgba(90,169,240,.1),transparent 70%),
    rgba(4,8,12,.72);
  backdrop-filter:blur(16px) saturate(125%);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
}
.acct-ov.on{animation:acctFade .24s ease both}
.acct-modal{
  position:relative;isolation:isolate;width:min(440px,100%);
  max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;overflow-x:hidden;
  padding:26px 26px 22px;border-radius:22px;text-align:left;color:var(--ink);
  background:linear-gradient(180deg,rgba(25,37,51,.94),rgba(11,17,24,.97));
  border:1px solid rgba(126,168,196,.16);
  box-shadow:
    0 36px 90px -24px rgba(0,0,0,.8),
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 1px 0 rgba(255,255,255,.07) inset;
  animation:acctIn .36s cubic-bezier(.22,1,.36,1) both;
  scrollbar-width:thin;scrollbar-color:rgba(120,160,190,.28) transparent;
}
.acct-modal::-webkit-scrollbar{width:6px}
.acct-modal::-webkit-scrollbar-thumb{background:rgba(120,160,190,.26);border-radius:99px}
/* 渐变描边：用遮罩抠出 1px 内描边，比直接 border 更有光泽 */
.acct-modal::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(145deg,rgba(79,209,197,.55),rgba(255,255,255,.05) 38%,rgba(246,173,85,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.acct-ambient{
  position:absolute;left:-18%;right:-18%;top:-150px;height:300px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(260px 170px at 20% 46%,rgba(79,209,197,.3),transparent 70%),
    radial-gradient(240px 160px at 82% 28%,rgba(90,169,240,.2),transparent 72%);
  filter:blur(22px);
}
.acct-head{position:relative;z-index:1;display:flex;align-items:center;gap:13px;margin-bottom:20px}
.acct-mark{
  flex:0 0 auto;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  font-size:18px;font-weight:800;letter-spacing:.5px;color:var(--teal);
  background:linear-gradient(145deg,rgba(79,209,197,.24),rgba(79,209,197,.03));
  border:1px solid rgba(79,209,197,.34);
  box-shadow:0 12px 26px -14px rgba(79,209,197,.85),inset 0 1px 0 rgba(255,255,255,.18);
}
.acct-heading{flex:1;min-width:0}
.acct-heading h2{font-size:19px;line-height:1.25;letter-spacing:.2px;margin:0}
.acct-heading p{font-size:11.5px;color:var(--dim);letter-spacing:.3px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-x{
  flex:0 0 auto;width:34px;height:34px;min-height:auto;padding:0;display:grid;place-items:center;
  border-radius:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  color:var(--dim);cursor:pointer;transition:color .2s,background .2s,transform .25s,border-color .2s;
}
.acct-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.acct-x:hover{color:var(--ink);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16);transform:rotate(90deg)}
.acct-body{position:relative;z-index:1}

/* 游客提示 */
.acct-note{
  display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;padding:11px 13px;border-radius:12px;
  background:linear-gradient(135deg,rgba(79,209,197,.09),rgba(90,169,240,.05));
  border:1px solid rgba(79,209,197,.18);color:var(--dim);font-size:12px;line-height:1.65;
}
.acct-note svg{flex:0 0 auto;width:15px;height:15px;margin-top:1px;fill:none;stroke:var(--teal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.acct-note b{color:var(--ink);font-weight:600}

/* 登录 / 注册切换：滑块指示器 */
.acct-tabs{
  position:relative;display:flex;margin-bottom:18px;padding:4px;border-radius:12px;
  background:rgba(5,11,17,.55);border:1px solid rgba(255,255,255,.06);
}
.acct-tab-ink{
  position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);border-radius:9px;
  background:linear-gradient(180deg,rgba(79,209,197,.22),rgba(79,209,197,.1));
  border:1px solid rgba(79,209,197,.32);
  box-shadow:0 8px 20px -12px rgba(79,209,197,.9),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.acct-tabs[data-active="register"] .acct-tab-ink{transform:translateX(100%)}
.acct-tabs button{
  position:relative;z-index:1;flex:1;min-height:36px;padding:8px;border:0;border-radius:9px;
  background:transparent;color:var(--dim);font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:color .2s;
}
.acct-tabs button.on{color:var(--ink)}

/* 表单 */
.acct-form.shake{animation:acctShake .34s cubic-bezier(.36,.07,.19,.97)}
.acct-field{display:block;margin-bottom:13px}
.acct-field > span:first-child{
  display:block;margin:0 0 7px 2px;font-size:11.5px;font-weight:600;letter-spacing:.45px;color:var(--dim);
}
.acct-field > span:first-child em{font-style:normal;font-weight:500;color:#667a8e;margin-left:4px}
.acct-remember{
  display:flex;align-items:center;gap:8px;margin:-1px 2px 12px;
  font-size:12px;color:var(--dim);cursor:pointer;user-select:none;
}
.acct-remember input{
  flex:0 0 auto;width:15px;height:15px;min-height:auto;margin:0;
  accent-color:#39b5aa;cursor:pointer;
}
.acct-input{
  display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:12px;
  background:rgba(5,11,17,.55);border:1px solid rgba(255,255,255,.08);
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.acct-input > svg{
  flex:0 0 auto;width:15px;height:15px;color:#60768b;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:color .2s;
}
.acct-input input{
  flex:1;min-width:0;padding:12px 0;border:0;outline:none;background:transparent;
  color:var(--ink);font:inherit;font-size:14px;letter-spacing:.2px;
}
.acct-input input::placeholder{color:#5b6f83;font-size:12.5px;letter-spacing:0}
.acct-input:focus-within{
  border-color:rgba(79,209,197,.58);background:rgba(8,17,24,.82);
  box-shadow:0 0 0 3px rgba(79,209,197,.12);
}
.acct-input:focus-within > svg{color:var(--teal)}
.acct-eye{
  flex:0 0 auto;width:30px;height:30px;min-height:auto;padding:0;display:grid;place-items:center;
  border:0;border-radius:8px;background:transparent;color:#60768b;cursor:pointer;transition:color .15s,background .15s;
}
.acct-eye svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.acct-eye .eye-slash{opacity:0;transition:opacity .15s}
.acct-eye.on .eye-slash{opacity:1}
.acct-eye:hover{color:var(--teal);background:rgba(79,209,197,.08)}

/* 错误提示：默认收合，出错时展开并轻抖 */
.acct-err{
  display:flex;align-items:flex-start;gap:7px;overflow:hidden;
  max-height:0;opacity:0;margin:0;color:#f08c7c;font-size:12px;line-height:1.55;
  transition:max-height .26s ease,opacity .2s ease,margin .2s ease;
}
.acct-err.on{max-height:64px;opacity:1;margin:0 0 12px}
.acct-err svg{flex:0 0 auto;width:14px;height:14px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* 主按钮：渐变 + 光晕 + loading */
.acct-submit{
  position:relative;display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:46px;padding:12px 18px;border:0;border-radius:12px;cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;letter-spacing:.45px;color:#04211f;
  background:linear-gradient(135deg,#68e6d9,#39b5aa);
  box-shadow:0 16px 32px -16px rgba(79,209,197,.95),inset 0 1px 0 rgba(255,255,255,.42);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,opacity .18s;
}
.acct-submit:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 20px 36px -16px rgba(79,209,197,1),inset 0 1px 0 rgba(255,255,255,.48)}
.acct-submit:active:not(:disabled){transform:translateY(0) scale(.992)}
.acct-submit:disabled{opacity:.72;cursor:progress}
.acct-spin{
  display:none;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(4,33,31,.28);border-top-color:#04211f;animation:acctSpin .7s linear infinite;
}
.acct-submit.loading .acct-spin{display:block}
.acct-hint{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;
  margin:16px 0 0;padding-top:13px;border-top:1px solid rgba(255,255,255,.06);
  font-size:11px;color:#66798c;letter-spacing:.2px;
}
.acct-hint b{font-weight:500;color:#4f6172}
.acct-hint code{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10.5px;color:var(--teal);
  background:rgba(79,209,197,.08);border:1px solid rgba(79,209,197,.16);
  padding:1px 6px;border-radius:5px;
}

/* 已登录：头像 + 数据卡 + 云端状态 */
.acct-profile{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.acct-avatar{
  flex:0 0 auto;width:54px;height:54px;border-radius:17px;display:grid;place-items:center;
  font-size:21px;font-weight:800;color:#04211f;
  background:linear-gradient(145deg,#7eeee2,#34b0a5);
  box-shadow:0 16px 30px -16px rgba(79,209,197,.95),inset 0 1px 0 rgba(255,255,255,.55);
  padding:0;border:0;overflow:hidden;cursor:pointer;font-family:inherit;
  transition:transform .18s ease,filter .18s ease;
}
.acct-avatar:hover{transform:translateY(-1px);filter:brightness(1.05)}
.acct-avatar img{width:54px;height:54px;max-width:54px;max-height:54px;object-fit:cover;display:block}

/* 人物形象：左侧立绘预览，右侧说明与两个操作 */
.acct-look{
  display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;padding:12px;
  border-radius:13px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.acct-look-pic{
  flex:0 0 auto;width:82px;height:104px;border-radius:11px;display:grid;place-items:center;
  font-size:10.5px;color:var(--dim);text-align:center;
  background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.14);overflow:hidden;
}
.acct-look-pic.has-img{border-style:solid;border-color:rgba(79,209,197,.28);background:#0b1f27}
.acct-look-pic img{width:100%;height:100%;max-width:82px;max-height:104px;object-fit:contain;display:block}
.acct-look-info{flex:1;min-width:0}
.acct-look-info h3{margin:1px 0 4px;font-size:12.5px;font-weight:600;letter-spacing:.2px}
.acct-look-info p{margin:0;font-size:11.5px;line-height:1.6;color:var(--dim)}
.acct-look-btns{display:flex;gap:7px;margin:9px 0 0}
.acct-look-btns .acct-btn{flex:1;min-height:34px;padding:6px 10px;font-size:12px;border-radius:9px}
.acct-look-note{margin:7px 0 0;font-size:11px;line-height:1.55;color:var(--teal);min-height:1.55em}
.acct-look-note:empty{display:none}
.acct-who{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;line-height:1.3}
.acct-badge{
  flex:0 0 auto;padding:1px 7px;border-radius:6px;font-size:10.5px;font-weight:600;letter-spacing:.3px;
  color:var(--amber);border:1px solid rgba(246,173,85,.42);background:rgba(246,173,85,.08);
}
.acct-badge.player{color:var(--dim);border-color:rgba(127,147,166,.3);background:rgba(127,147,166,.06)}
.acct-username{margin-top:4px;font-size:12px;color:var(--dim);letter-spacing:.2px}
/* 改昵称：昵称旁一个小按钮，点开原地变成输入框 */
.acct-nick-edit{
  flex:0 0 auto;margin-left:2px;padding:2px 8px;border-radius:7px;
  font:inherit;font-size:11px;font-weight:500;cursor:pointer;
  color:var(--dim);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  transition:color .18s,background .18s,border-color .18s;
}
.acct-nick-edit:hover{color:var(--teal);background:rgba(79,209,197,.1);border-color:rgba(79,209,197,.32)}
.acct-nick{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.acct-nick input{
  min-width:0;width:132px;padding:6px 9px;border-radius:8px;
  font:inherit;font-size:14px;font-weight:600;
  color:var(--ink);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
}
.acct-nick input:focus{outline:none;border-color:rgba(79,209,197,.55);background:rgba(79,209,197,.06)}
.acct-nick button{
  padding:6px 10px;border-radius:8px;font:inherit;font-size:12px;cursor:pointer;
  color:var(--dim);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
}
.acct-nick button[type="submit"]{color:#062a28;background:var(--teal);border-color:transparent;font-weight:700}
.acct-nick button:disabled{opacity:.5;cursor:default}
.acct-nick-err{margin-top:6px;font-size:12px;color:var(--red)}
html[data-theme="day"] .acct-nick input{background:rgba(255,255,255,.8);border-color:rgba(90,120,150,.24);color:#26323f}
html[data-theme="day"] .acct-nick-edit{background:rgba(255,255,255,.7);border-color:rgba(90,120,150,.2)}
.acct-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.acct-stat{
  padding:10px 6px;border-radius:11px;text-align:center;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
}
.acct-stat b{display:block;font-size:14px;line-height:1.35;font-variant-numeric:tabular-nums}
.acct-stat span{display:block;margin-top:2px;font-size:10.5px;color:var(--dim);letter-spacing:.4px}
.acct-cloud{
  display:flex;gap:11px;align-items:flex-start;margin:0 0 16px;padding:13px 14px;border-radius:13px;
  background:linear-gradient(135deg,rgba(79,209,197,.08),rgba(90,169,240,.04));
  border:1px solid rgba(79,209,197,.18);
}
.acct-cloud-ic{
  flex:0 0 auto;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:rgba(79,209,197,.1);border:1px solid rgba(79,209,197,.2);
}
.acct-cloud-ic svg{width:16px;height:16px;fill:none;stroke:var(--teal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.acct-cloud h3{font-size:12.5px;font-weight:600;margin:0 0 3px;letter-spacing:.2px}
.acct-cloud p{font-size:11.5px;color:var(--dim);line-height:1.6;margin:0}
.acct-actions{display:flex;gap:9px}
.acct-btn{
  flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.04);color:var(--ink);font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;transition:background .18s,border-color .18s,transform .18s,opacity .18s;
}
.acct-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.acct-btn:hover:not(:disabled){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.acct-btn:active:not(:disabled){transform:scale(.985)}
.acct-btn.primary{
  border:0;color:#04211f;background:linear-gradient(135deg,#68e6d9,#39b5aa);
  box-shadow:0 14px 28px -16px rgba(79,209,197,.95);
}
.acct-btn.primary:hover:not(:disabled){background:linear-gradient(135deg,#74ecdf,#40c0b4)}
.acct-btn.danger{color:#f08c7c;border-color:rgba(240,140,124,.22);background:rgba(240,140,124,.06)}
.acct-btn.danger:hover:not(:disabled){background:rgba(240,140,124,.12);border-color:rgba(240,140,124,.34)}
.acct-btn:disabled{opacity:.5;cursor:not-allowed}
.acct-foot{
  margin:15px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.06);
  font-size:11px;line-height:1.65;color:#66798c;
}

/* 白天主题：同一套结构换成浅色纸面，保证对比度 */
html[data-theme="day"] .acct-ov{
  background:
    radial-gradient(760px 460px at 50% 16%,rgba(13,143,131,.14),transparent 64%),
    rgba(30,48,64,.42);
}
html[data-theme="day"] .acct-modal{
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(240,246,251,.98));
  border-color:rgba(20,50,70,.12);
  box-shadow:0 34px 80px -26px rgba(18,44,64,.42),inset 0 1px 0 #fff;
}
html[data-theme="day"] .acct-modal::before{
  background:linear-gradient(145deg,rgba(13,143,131,.45),rgba(255,255,255,.4) 40%,rgba(180,113,10,.2));
}
html[data-theme="day"] .acct-tabs{background:rgba(20,50,70,.05);border-color:rgba(20,50,70,.08)}
html[data-theme="day"] .acct-tab-ink{
  background:linear-gradient(180deg,rgba(13,143,131,.16),rgba(13,143,131,.08));
  border-color:rgba(13,143,131,.22);box-shadow:0 8px 18px -14px rgba(13,143,131,.8);
}
html[data-theme="day"] .acct-input{background:rgba(255,255,255,.82);border-color:rgba(20,50,70,.12)}
html[data-theme="day"] .acct-input:focus-within{background:#fff;border-color:rgba(13,143,131,.55);box-shadow:0 0 0 3px rgba(13,143,131,.1)}
html[data-theme="day"] .acct-note{background:linear-gradient(135deg,rgba(13,143,131,.08),rgba(44,116,196,.04));border-color:rgba(13,143,131,.16)}
html[data-theme="day"] .acct-stat{background:rgba(20,50,70,.03);border-color:rgba(20,50,70,.07)}
html[data-theme="day"] .acct-look{background:rgba(20,50,70,.03);border-color:rgba(20,50,70,.07)}
html[data-theme="day"] .acct-look-pic{background:rgba(20,50,70,.03);border-color:rgba(20,50,70,.14)}
html[data-theme="day"] .acct-look-pic.has-img{background:#eaf3f8;border-color:rgba(13,143,131,.26)}
html[data-theme="day"] .acct-cloud{background:linear-gradient(135deg,rgba(13,143,131,.07),rgba(44,116,196,.03));border-color:rgba(13,143,131,.16)}
html[data-theme="day"] .acct-btn{background:rgba(20,50,70,.04);border-color:rgba(20,50,70,.1)}
html[data-theme="day"] .acct-btn:hover:not(:disabled){background:rgba(20,50,70,.08)}
/* 日间主题下主/危险按钮要保住自己的底色，否则会被上面的浅灰覆盖 */
html[data-theme="day"] .acct-btn.primary{
  border:0;color:#04211f;background:linear-gradient(135deg,#4ddcce,#25b0a5);
  box-shadow:0 16px 30px -18px rgba(13,143,131,.9);
}
html[data-theme="day"] .acct-btn.primary:hover:not(:disabled){background:linear-gradient(135deg,#5ce4d6,#2ebcb0)}
html[data-theme="day"] .acct-btn.danger{color:#bf5137;border-color:rgba(191,81,55,.22);background:rgba(191,81,55,.06)}
html[data-theme="day"] .acct-btn.danger:hover:not(:disabled){background:rgba(191,81,55,.12);border-color:rgba(191,81,55,.32)}
html[data-theme="day"] .acct-x{background:rgba(20,50,70,.04);border-color:rgba(20,50,70,.1)}
html[data-theme="day"] .acct-x:hover{background:rgba(20,50,70,.08)}
html[data-theme="day"] .acct-hint,html[data-theme="day"] .acct-foot{border-color:rgba(20,50,70,.08)}
html[data-theme="day"] .acct-modal::after{background:rgba(20,50,70,.16)}

/* 平板：略窄的居中卡片 */
@media(max-width:1024px){
  .acct-ov{padding:20px}
  .acct-modal{width:min(430px,92vw)}
}
/* 移动端：底部抽屉，贴安全区 */
@media(max-width:760px){
  .acct-ov{padding:0;align-items:flex-end}
  .acct-modal{
    width:100%;max-width:none;max-height:90vh;max-height:90dvh;
    border-radius:24px 24px 0 0;
    padding:26px 20px calc(20px + env(safe-area-inset-bottom));
    animation:acctUp .38s cubic-bezier(.22,1,.36,1) both;
  }
  .acct-modal::after{
    content:"";position:absolute;top:9px;left:50%;width:38px;height:4px;border-radius:99px;
    transform:translateX(-50%);background:rgba(255,255,255,.16);
  }
  .acct-head{margin-top:4px}
  .acct-submit,.acct-btn{min-height:48px}
  .acct-input input{font-size:16px}   /* 16px 避免 iOS 聚焦时自动放大 */
}
@media(max-width:380px){
  .acct-modal{padding-left:16px;padding-right:16px}
  .acct-stats{gap:6px}
  .acct-actions{flex-direction:column}
}

@keyframes acctFade{from{opacity:0}to{opacity:1}}
@keyframes acctIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes acctUp{from{opacity:.4;transform:translateY(100%)}to{opacity:1;transform:none}}
@keyframes acctSpin{to{transform:rotate(360deg)}}
@keyframes acctShake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(3px)}
  30%,50%,70%{transform:translateX(-4px)}
  40%,60%{transform:translateX(4px)}
}
@media(prefers-reduced-motion:reduce){
  .acct-ov.on,.acct-modal,.acct-tabs button,.acct-tab-ink,.acct-submit,.acct-btn,.acct-x{animation:none!important;transition:none!important}
}
.toast{
  position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(20px);max-width:86vw;text-align:center;
  background:#1b2937;border:1px solid #2c4459;color:var(--ink);padding:9px 18px;border-radius:10px;
  font-size:13px;line-height:1.55;opacity:0;transition:.25s;pointer-events:none;z-index:20
}
/* 显示中才接管指针：长提示可以点一下收起，平时不挡地图点击 */
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;cursor:pointer}
/* 多行提示（章节卡点开这类）：逐行左对齐，长句不再糊成一片 */
.toast.multi{text-align:left;max-width:min(560px,92vw);padding:10px 14px}
.toast-line{display:block}

/* 只在有指针悬停的设备上做位移特效，避免手机上点完样式卡住 */
@media(hover:hover) and (pointer:fine){
  .home button:hover:not(:disabled){background:#16222e;border-color:#2b3d4f}
  .night:hover:not(:disabled){background:linear-gradient(180deg,#213b52,#1a2e40)}
  .log-filter:hover{border-color:#2d5d5c;color:var(--teal)}
}

/* ============ 桌面端：整页锁定，三栏各自滚动 ============ */
@media(min-width:1201px){
  html{height:100%}
  body{height:100%;overflow:hidden}
  .wrap{
    height:100dvh;display:flex;flex-direction:column;overflow:hidden;
    padding-top:6px;padding-bottom:6px;
  }
  .top{flex:0 0 auto;margin-bottom:6px}
  .body{
    flex:1 1 auto;min-height:0;overflow:hidden;align-items:stretch;
    grid-template-rows:minmax(0,1fr);
  }
  .col{min-height:0}

  /* 地图：吃掉中间栏剩下的全部宽高。画布是矩形视口（宽高都铺满），
     里面的正方形街区居中等比放大，横向余量由延伸街景填满，不再左右留白 */
  .c-world{overflow:hidden;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
  .street{max-width:100%;margin:0;flex:1 1 auto;min-height:0;gap:4px}
  .street .map-frame{flex:1 1 auto;min-width:0;min-height:0}

  /* 左栏：日志（信息流）占 1/3，家庭状态占 2/3 —— 状态是生存核心，给它更大的版面 */
  .c-status{overflow:hidden}
  .c-status>.card-log{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
  .c-status>.card-log .log{flex:1 1 auto;height:auto;min-height:0}
  .c-status>.card:not(.card-log){
    flex:2 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    /* 拿到 2/3 高度后行距回宽，五类物资 + 脑力 + 今晚清单一次性看全 */
    padding-top:11px;padding-bottom:11px;
  }
  .c-status>.card:not(.card-log) h3{margin-bottom:9px;font-size:11px}
  .c-status>.card:not(.card-log) .stat{margin-bottom:7px}
  .c-status>.card:not(.card-log) .stat-head{font-size:12px;margin-bottom:3px}
  .c-status>.card:not(.card-log) .bar{height:6px}
  .c-status>.card:not(.card-log) .need-list{margin-top:9px;padding-top:9px;gap:5px}
  .c-status>.card:not(.card-log) .need-row{font-size:12.5px;line-height:1.35}
  .c-status>.card:not(.card-log) .need-row .v em{font-size:11px}
  /* 脑力块是 Token 生存线，字号回一档 */
  .c-status>.card:not(.card-log) .brain{padding:8px 9px;margin-bottom:10px}
  .c-status>.card:not(.card-log) .brain-num{font-size:18px}
  .c-status>.card:not(.card-log) .brain-chips{margin-top:4px;gap:4px}
  .c-status>.card:not(.card-log) .bchip{font-size:10.5px;padding:0 6px}
  .c-status>.card:not(.card-log) .brain-foot{margin-top:4px;font-size:11px}
/* 窄卡片里四档要塞得下：缩字号、压内边距，别让「全开推演」换行 */
.c-status>.card:not(.card-log) .brain-tiers{gap:3px;margin-top:5px}
.c-status>.card:not(.card-log) .btier{padding:3px 1px;border-radius:6px}
.c-status>.card:not(.card-log) .btier b{font-size:10px}
.c-status>.card:not(.card-log) .btier i{font-size:9px}

  /* 右侧功能坞里的面板滚动区 */
  .act-scroll{
    flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    padding-right:3px;
  }

  /* 细滚动条，别抢视线 */
  .c-status>.card:not(.card-log)::-webkit-scrollbar,
  .act-scroll::-webkit-scrollbar{width:6px}
  .c-status>.card:not(.card-log)::-webkit-scrollbar-thumb,
  .act-scroll::-webkit-scrollbar-thumb{background:#24333f;border-radius:3px}
  .c-status>.card:not(.card-log),
  .act-scroll{scrollbar-width:thin;scrollbar-color:#24333f transparent}
}

/* 矮一些的窗口（笔记本 768/800 高常见）：把结算清单压成两列，半个左栏也装得下 */
@media(min-width:1201px) and (max-height:900px){
  /* 矮窗口：顶栏也压薄，横向的空白在宽屏上本来就用不上，省高度最划算 */
  .top{margin-bottom:6px;gap:8px}
  .chip{padding:4px 10px;font-size:12px}
  .brand{font-size:16px}
  .c-status>.card:not(.card-log) .need-list{
    display:block;gap:0;
  }
  .c-status>.card:not(.card-log) .need-row{gap:5px;font-size:11.5px;margin-bottom:3px}
  .c-status>.card:not(.card-log) .need-row .k{flex:0 0 28px}
  .c-status>.card:not(.card-log) .need-row .flag{margin-left:auto;padding:0 5px;font-size:10px}
  .c-status>.card:not(.card-log) .stat-head{font-size:11px}
}

@media(max-width:1200px){
  .body{grid-template-columns:minmax(0,1fr) 252px}
  .c-world{grid-column:1;grid-row:1}
  .c-status{grid-column:2;grid-row:1}
}

/* ============ 侧栏折叠 ============
   地图是主角：左栏和右侧功能坞各自收起，腾出的宽度整份还给街区视口。
   收起的是栏本身（display:none），同时重排网格轨道，不留空槽。 */
.chip.snd.side-tog{width:30px;padding:0;font-size:11px;letter-spacing:0}
@media(max-width:640px){.chip.snd.side-tog{width:38px;font-size:13px}}
.body.hide-stat>.c-status,.body.hide-act>.act-dock{display:none}
@media(min-width:1201px){
  .body.hide-stat{grid-template-columns:minmax(0,1fr)}
  .body.hide-stat>.c-world{grid-column:1}
}
@media(max-width:1200px){
  .body.hide-stat{grid-template-columns:minmax(0,1fr)}
  .body.hide-stat>.c-world{grid-column:1;grid-row:1}
}

/* ============ 手机 ============ */
@media(max-width:760px){
  .wrap{padding:0 12px calc(24px + env(safe-area-inset-bottom))}
  .top{
    position:sticky;top:0;z-index:6;margin:0 -12px 10px;gap:7px;
    padding:calc(8px + env(safe-area-inset-top)) 12px 8px;
    background:rgba(10,14,19,.95);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .brand{font-size:15px;letter-spacing:0}
  .brand em{display:none}
  .dot{width:7px;height:7px}
  /* 窄屏上宁可换行，也别让顶栏挤成一条被裁掉的横条 */
  .top>.brand,.top>.chip{flex:0 0 auto}
  .chip{padding:4px 9px;font-size:11.5px;border-radius:8px}
  .chip#weatherChip{flex:1 1 100%;order:9;text-align:center}
  .body{display:flex;flex-direction:column;gap:10px}
  .c-world{order:1}
  .c-status{order:2}
  .c-act{order:3}
  /* 地图左下角这一列：窄屏上收窄一号，别把街区挡完 */
  .map-stack{left:8px;bottom:8px;width:min(212px,calc(100% - 16px))}
  .log-flash{left:8px;bottom:8px;width:min(212px,calc(100% - 16px))}
  .urgent-float{padding:8px 9px 9px}
  .ap-help{padding:8px 9px 9px}
  .urgent-item{padding:6px 8px;gap:6px}
  .urgent-item .tx b{font-size:12px}
  .urgent-item .tx em{font-size:10.5px}
  /* 手机上顺序：地图 → 日志 → 状态 → 行动 */
  .left-log{margin-bottom:0}
  .left-log .log{height:clamp(132px,22vh,190px)}
  .left-log .log .bubble{max-width:100%}
  .card{padding:12px;border-radius:12px}
  .card h3{margin-bottom:8px;font-size:10.5px;letter-spacing:1.3px}
  .card-log{padding:10px 0 0}
  .log-head{padding:0 12px 7px}
  .log{height:clamp(160px,30vh,280px);padding:2px 10px 10px;gap:7px}
  .log .bubble{max-width:100%;font-size:12.5px;line-height:1.6}
  .card-log.expanded{width:94vw;height:74vh}
  #stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
  #stats .brain{grid-column:1/-1;margin-bottom:0}
  #stats .stat{margin-bottom:0}
  #stats .need-list{grid-column:1/-1;margin-top:2px;padding-top:9px}
  .stat-head{font-size:12px;margin-bottom:3px}
  .bar{height:6px}
  .home{gap:8px}
  .home button,.night{font-size:13px;padding:12px;min-height:46px}
  .hint{font-size:10.5px}
  /* 手机上提示条吸在底部安全区上方：不挡顶栏，也不会随页面滚走 */
  .enc-flag{
    top:auto;left:8px;right:8px;transform:none;max-width:none;justify-content:center;
    bottom:calc(10px + env(safe-area-inset-bottom));box-shadow:0 8px 24px -8px #000;
  }
  .enc-flag:active{transform:scale(.98)}
  /* 手机上提示条是 left/right 撑满的，抖动不能带 translateX，否则会横跳 */
  .enc-flag.on.hit{animation:encFlagFlash .9s ease-in-out infinite,encFlagHitM .45s ease-out}
  @keyframes encFlagHitM{
    0%{transform:scale(1)}
    40%{transform:scale(1.06)}
    100%{transform:scale(1)}
  }
  /* 提示条占住底部时，toast 让位 */
  .has-enc .toast{bottom:calc(66px + env(safe-area-inset-bottom))}
}
@media(max-width:760px) and (orientation:landscape){
  .street{max-width:min(58vw,400px)}
  canvas{max-width:100%}
}

/* ============ 钱包 · 顶栏（信号 / Token / 钻石） ============ */
/* 信号 = 线上能不能用；钻石 = 随时能花但会被偷；Token = 没信号是死数字，有信号会被划走 */
.chip.wal{display:flex;align-items:center;gap:9px;font-variant-numeric:tabular-nums}
.wal-sig{display:inline-flex;align-items:flex-end;gap:2px}
.wal-sig i{display:block;width:5px;height:11px;border-radius:1.5px;background:#22323f}
.wal-sig i.on{background:var(--teal);box-shadow:0 0 6px -1px var(--teal)}
.wal-tok{color:var(--amber);font-weight:600}
.wal-tok b{color:var(--amber)}
.wal-tok i{font-style:normal;font-size:10px;opacity:.65;margin-left:1px}
.wal-cash{color:var(--green);font-size:12px}
.wal-cash b{color:var(--green)}
.chip.wal.nosig .wal-sig i.on{background:var(--red);box-shadow:none}
.chip.wal.nosig .wal-tok{opacity:.4;text-decoration:line-through}

/* ============ 交易面板：黑市 / 空投 / 链上 ============ */
.shop-wrap .sub{
  font-size:10.5px;letter-spacing:.12em;color:var(--dim);
  text-transform:uppercase;margin:10px 0 7px;font-weight:600;
}
/* 分段式页签：整体像一枚胶囊控制器，选中项只亮自己那一段 */
.shop-tabs{
  display:flex;gap:3px;padding:3px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:11px;background:var(--panel2);
}
.shop-tabs button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:6px 0;min-height:30px;border:0;border-radius:8px;background:transparent;
  color:var(--dim);font-size:11.5px;font-weight:600;letter-spacing:.2px;cursor:pointer;
  transition:color .15s,background .15s,box-shadow .15s;
}
.shop-tabs button em{font-style:normal;font-size:12px;line-height:1;opacity:.85}
.shop-tabs button:hover{color:var(--ink)}
.shop-tabs button.on{
  color:var(--ink);
  background:linear-gradient(180deg,#173b42,#102b31);
  box-shadow:inset 0 0 0 1px rgba(79,209,197,.42),0 1px 6px -3px rgba(79,209,197,.55);
}
.shop-tabs button.on em{opacity:1}
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
/* 链上：动作名更长（买入 1 Token / 全部质押），两列会截断，改成单列铺满 */
.shop-grid.col1{grid-template-columns:1fr}

/* 分组小标题：买入 / 变卖 */
.shop-sec{
  grid-column:1/-1;display:flex;align-items:center;gap:8px;
  margin:3px 0 -1px;font-size:9.5px;font-weight:600;letter-spacing:1.6px;
  color:var(--dim);text-transform:uppercase;
}
.shop-sec::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

/* 单条交易：左侧资源图标 + 中间名称/说明 + 右侧价签 */
.trade{
  display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:6px;
  padding:7px 8px;min-height:44px;border-radius:10px;text-align:left;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 70%),var(--panel2);
  color:var(--ink);font-size:12px;cursor:pointer;
  transition:border-color .15s,transform .12s,box-shadow .15s;
}
.trade:not(:disabled):hover{
  border-color:rgba(79,209,197,.38);
  box-shadow:0 6px 16px -12px rgba(0,0,0,.8);
  transform:translateY(-1px);
}
.trade:not(:disabled):active{transform:scale(.98)}
.trade:disabled{opacity:.38;cursor:not-allowed}

/* 资源图标徽章：底色跟着资源色走，emoji 保持本色 */
.ticon{
  width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  font-size:12px;line-height:1;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px var(--line);
}
.ticon[data-k="food"]{background:rgba(79,209,197,.13);box-shadow:inset 0 0 0 1px rgba(79,209,197,.30)}
.ticon[data-k="water"]{background:rgba(90,169,240,.13);box-shadow:inset 0 0 0 1px rgba(90,169,240,.30)}
.ticon[data-k="power"]{background:rgba(246,173,85,.13);box-shadow:inset 0 0 0 1px rgba(246,173,85,.30)}
.ticon[data-k="meds"]{background:rgba(246,135,179,.13);box-shadow:inset 0 0 0 1px rgba(246,135,179,.30)}
.ticon[data-k="fuel"]{background:rgba(199,146,234,.13);box-shadow:inset 0 0 0 1px rgba(199,146,234,.30)}
.ticon[data-k="token"]{background:rgba(246,173,85,.13);box-shadow:inset 0 0 0 1px rgba(246,173,85,.30)}
.ticon[data-k="diamond"]{background:rgba(143,227,255,.13);box-shadow:inset 0 0 0 1px rgba(143,227,255,.30)}

.tbody{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.tbody b{font-weight:600;font-size:11.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbody em{
  font-style:normal;font-size:9.5px;color:var(--dim);letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;
  font-variant-numeric:tabular-nums;
}

/* 价签：买入是暖金，变卖是青绿，右侧对齐 */
.tprice{
  justify-self:end;padding:2px 6px;border-radius:6px;
  font-size:11px;font-weight:600;color:var(--amber);white-space:nowrap;
  font-variant-numeric:tabular-nums;
  background:rgba(246,173,85,.10);box-shadow:inset 0 0 0 1px rgba(246,173,85,.16);
}
.trade.sell{border-style:dashed;border-color:rgba(79,209,197,.20)}
.trade.sell .tprice{
  color:var(--teal);
  background:rgba(79,209,197,.09);box-shadow:inset 0 0 0 1px rgba(79,209,197,.18);
}
.tgo{justify-self:end;font-size:15px;line-height:1;color:var(--dim);opacity:.6;padding-right:2px}
.trade:not(:disabled):hover .tgo{color:var(--teal);opacity:1}

/* 链上行情条 */
.fin-rate{
  grid-column:1/-1;display:flex;align-items:baseline;gap:8px;
  padding:9px 11px;border-radius:10px;border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(246,173,85,.10),rgba(79,209,197,.06)),var(--panel2);
  font-size:11px;color:var(--dim);
}
.fin-rate b{font-size:18px;line-height:1.1;color:var(--amber);font-variant-numeric:tabular-nums}
.fin-rate i{
  margin-left:auto;font-style:normal;font-size:10px;color:var(--dim);
  font-variant-numeric:tabular-nums;padding:2px 6px;border-radius:6px;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line);
}

/* 说明行：前面挂一个小标记，长句不再糊成一团 */
.shop-note{
  grid-column:1/-1;display:flex;gap:6px;
  font-size:10.5px;line-height:1.55;color:var(--dim);padding:2px 2px;
}
.shop-note i{font-style:normal;font-size:10.5px;line-height:1.55;opacity:.65;flex:0 0 auto}
.shop-note span{flex:1;min-width:0}
.shop-note.on{color:var(--teal)}
.shop-note.warn{color:var(--red)}
/* 挖矿 / 喂基站：金色系，和取暖的橙色按钮区分开 */
.home button.tok{border-color:#3a2f1b;background:linear-gradient(180deg,#1d1710,#14120e);color:#f0c37a}
.home button.tok:disabled{opacity:.4}

/* 结局评级 */
.tier{color:var(--amber)}
.ov-w{color:var(--dim);font-size:12px}

@media(max-width:640px){
  .chip.wal{gap:7px;padding:5px 9px}
  .trade{padding:7px 7px;min-height:46px;gap:6px}
  .tbody b{font-size:11.2px}
  .shop-tabs button{min-height:36px}
  .shop-grid{grid-template-columns:1fr}
}

/* ===== 算计 · 求助 AI 面板（Token 的唯一消耗出口） ===== */
.ai-wrap{margin-top:12px}
.ai-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px}
.ai-head b{font-size:12.5px;color:#cfe6ef;letter-spacing:.04em}
.ai-head span{font-size:10.5px}
.ai-ok{color:#7fe0b0}
.ai-warn{color:#ff8a7a;font-weight:700}
.ai-grid{display:flex;flex-direction:column;gap:5px}
.ai-btn{
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"name cost" "desc cost";
  gap:1px 8px;text-align:left;padding:7px 9px;min-height:44px;cursor:pointer;
  background:rgba(24,46,60,.62);border:1px solid rgba(93,192,220,.26);
  border-radius:9px;color:#d4e8f0;font:inherit;transition:.15s;
}
.ai-btn:hover:not(:disabled){background:rgba(36,72,92,.8);border-color:rgba(93,192,220,.6);transform:translateY(-1px)}
.ai-btn:disabled{opacity:.38;cursor:not-allowed}
.ai-name{grid-area:name;font-size:12px;font-weight:600}
.ai-desc{grid-area:desc;font-size:10.5px;opacity:.66}
.ai-cost{
  grid-area:cost;align-self:center;font-size:11.5px;font-weight:700;color:#6fe3d0;
  background:rgba(20,60,66,.7);border-radius:6px;padding:2px 6px;
}
.ai-note{margin-top:6px;font-size:10.5px;opacity:.55;line-height:1.45}
/* 两组之间要分得开：挣钱那组是"劳力"，解决那组是"脑力"，别让人以为混在一起 */
.ai-group-h{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin:9px 0 5px;padding-top:8px;border-top:1px dashed rgba(93,192,220,.18);
}
.ai-group-h:first-of-type{margin-top:0;padding-top:0;border-top:0}
.ai-group-h span{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#9fd7e8}
.ai-group-h i{font-size:10px;font-style:normal;opacity:.5}
.ai-btn.ai-earn{background:rgba(26,52,44,.6);border-color:rgba(93,220,160,.24)}
.ai-btn.ai-earn:hover:not(:disabled){background:rgba(34,74,60,.82);border-color:rgba(93,220,160,.6)}
.ai-cost.ai-gain{color:#7fe0b0;background:rgba(18,58,44,.75)}
/* 今日最划算：把"这枚 Token 该花在哪"顶在挣钱卡片上方 */
.ai-best{
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  margin:0 0 6px;padding:6px 9px;border-radius:8px;
  border:1px dashed rgba(93,220,160,.34);background:rgba(20,58,46,.55);
}
.ai-best b{font-size:10px;letter-spacing:.06em;color:#7fe0b0}
.ai-best span{font-size:11px;color:#d9f2e6;font-variant-numeric:tabular-nums}
.ai-btn.ai-best-card{
  border-color:rgba(93,220,160,.6);
  box-shadow:inset 0 0 0 1px rgba(93,220,160,.16);
}
@media(max-width:760px){.ai-grid{gap:6px}.ai-btn{min-height:48px}}

/* ===== 神格 · 化身 =====
   分身不产出物资，所以这块面板刻意做成"信息面板"而不是"数值面板"：
   一条进度、几个正在外面的影子，没有可刷的收益数字。 */
.deity-wrap{margin-top:12px}
.deity-wrap .sub{
  font-size:10.5px;letter-spacing:.12em;color:var(--dim);
  text-transform:uppercase;margin:10px 0 7px;font-weight:600;
}
.deity-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.deity-head b{font-size:12.5px;color:#d9e9ff;letter-spacing:.04em}
.deity-head span{font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.deity-bar{height:5px;border-radius:3px;background:#16222d;overflow:hidden;border:1px solid rgba(126,180,255,.16)}
.deity-bar i{display:block;height:100%;background:linear-gradient(90deg,#6f8cff,#7fe6ff);box-shadow:0 0 10px -2px #7fe6ff}
.deity-next{margin:4px 0 7px;font-size:10.5px;color:var(--dim)}
.deity-btn{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:8px 10px;min-height:42px;border-radius:9px;cursor:pointer;font:inherit;
  color:#e6f4ff;border:1px solid rgba(126,180,255,.38);
  background:linear-gradient(180deg,rgba(36,54,92,.75),rgba(24,36,62,.7));
  transition:.15s;
}
.deity-btn:hover:not(:disabled){border-color:rgba(127,230,255,.7);transform:translateY(-1px)}
.deity-btn:disabled{opacity:.38;cursor:not-allowed}
.deity-btn span{font-size:12px;font-weight:600}
.deity-btn em{font-style:normal;font-size:10.5px;color:#9fc6ff;font-variant-numeric:tabular-nums}
.deity-list{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.deity-item{
  display:flex;align-items:center;gap:7px;font-size:11px;padding:5px 8px;border-radius:8px;
  background:rgba(26,42,66,.55);border:1px solid rgba(126,180,255,.16);
}
.deity-item .dv-i{width:7px;height:7px;border-radius:50%;background:#7fe6ff;box-shadow:0 0 8px -1px #7fe6ff;flex:none}
.deity-item .dv-n{color:#dce9f8}
.deity-item .dv-t{flex:1;color:var(--dim);font-size:10.5px}
.deity-item button{
  padding:2px 7px;border-radius:6px;border:1px solid rgba(126,180,255,.4);
  background:rgba(40,66,110,.7);color:#bfe0ff;font-size:10.5px;cursor:pointer;
}
.deity-item button:hover{background:rgba(54,88,146,.85)}
.deity-hint{margin-top:6px;font-size:10.5px;line-height:1.45;opacity:.6;color:var(--dim)}
.deity-hint.on{opacity:1;color:#8fe8ff;font-weight:600}

/* ============================================================
   视觉精修层 v3
   只改观感：底色、层次、描边、光效、动效。
   不动任何尺寸与布局，左栏 1/3·2/3 的分割、地图点击坐标均不受影响。
   ============================================================ */
::selection{background:rgba(79,209,197,.28);color:#eafffb}
:focus-visible{outline:2px solid rgba(79,209,197,.55);outline-offset:2px}

/* 底色：四层冷光叠出来，避免大面积纯色发灰 */
body{
  background:
    radial-gradient(1100px 620px at 18% -12%,#17283a 0%,rgba(23,40,58,0) 62%),
    radial-gradient(900px 520px at 88% 2%,#1a2432 0%,rgba(26,36,50,0) 58%),
    radial-gradient(760px 520px at 50% 108%,#0f2026 0%,rgba(15,32,38,0) 62%),
    #080c11;
}
/* 全屏极细噪点：这是"看起来不像网页"的关键一层 */
html::before{
  content:"";position:fixed;inset:0;z-index:120;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 顶栏 ---------- */
.brand{letter-spacing:.8px;text-shadow:0 0 22px rgba(79,209,197,.25)}
.dot{box-shadow:0 0 0 3px rgba(79,209,197,.12),0 0 12px var(--teal)}
.chip{
  background:linear-gradient(180deg,rgba(27,38,50,.92),rgba(14,21,29,.92));
  border:1px solid rgba(122,170,200,.16);border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 20px -18px #000;
}
#dayNum,#apNum,#sigNum,#tokNum,#cashNum,
.stat-head .num,.brain-num,.bchip,.ai-cost{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- 卡片：内高光 + 悬空阴影，取代平涂 ---------- */
.card{
  background:linear-gradient(180deg,rgba(22,32,43,.94),rgba(12,19,26,.94));
  border:1px solid rgba(122,170,200,.15);border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 48px -38px #000;
}
.card h3{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:2px;color:#8ba4b9}
.card h3::before{
  content:"";flex:0 0 2px;width:2px;height:11px;border-radius:2px;
  background:linear-gradient(180deg,var(--teal),rgba(79,209,197,0));
  box-shadow:0 0 8px rgba(79,209,197,.7);
}

/* ---------- 状态条：内凹槽 + 顶部高光 ---------- */
.bar{height:8px;border-radius:6px;background:#121c26;box-shadow:inset 0 1px 2px rgba(0,0,0,.65)}
.bar i{box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.22)}

/* ---------- 地图：加一层真正的画框 ---------- */
.street{position:relative}
.map-frame{
  position:relative;border-radius:16px;overflow:hidden;background:#080d12;
  box-shadow:inset 0 0 70px -24px #000,0 34px 70px -54px #000;
  display:flex;align-items:center;justify-content:center;
}
/* 画布铺满整个地图框：尺寸由 syncCanvasSize 按视口算出（可以是矩形），永不变形 */
.map-frame canvas{
  display:block;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;
  border:0;border-radius:0;background:transparent;
}
/* 3D 层垫在 2D 图层下面：地面和楼体由 WebGL 画，2D 只留楼名 / NPC / 气泡 / 悬停框 */
.map-frame .gl-canvas{
  position:absolute;inset:0;z-index:0;pointer-events:none;
}
.map-frame #map{position:relative;z-index:1;touch-action:none;cursor:grab}
/* 四角轻压暗：画布有"屏幕"感，但别压成黑框 —— 白天场景压重了会发脏 */
.map-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(122% 90% at 50% 42%,rgba(0,0,0,0) 62%,rgba(20,26,32,.28) 100%);
}

/* ---------- 按钮：悬停微抬 + 内描边，按下有回弹 ---------- */
.ai-btn,.log-filter,.night,.enc-btns button,.trade{
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .2s,border-color .2s,background .2s,color .2s;
}
.ai-btn:hover:not(:disabled),.enc-btns button:hover:not(:disabled){
  box-shadow:0 12px 26px -20px #000,inset 0 0 0 1px rgba(79,209,197,.2);
}
.ai-btn:active:not(:disabled),.night:active:not(:disabled){transform:translateY(0) scale(.994)}

/* ---------- 日志气泡 ---------- */
.log .bubble{box-shadow:0 10px 22px -16px #000,inset 0 1px 0 rgba(255,255,255,.04)}
.log::-webkit-scrollbar{width:7px}
.log::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#2c3f4e,#1b2731);border-radius:4px;
  border:2px solid transparent;background-clip:padding-box;
}

/* ---------- 三栏错峰浮入 ---------- */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* 放大后的日志卡片要自己定位：入场动画的 fill-mode 会把 transform 钉成 none，
   覆盖掉它的 translate(-50%,-50%)，所以放大态必须排除在入场动画之外 */
.c-status>.card:not(.expanded),.c-world>.street,.c-act>.card{
  animation:rise .5s cubic-bezier(.2,.8,.3,1) both;
}
.c-world>.street{animation-delay:.06s}
.c-act>.card{animation-delay:.12s}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- 顶栏与底部分隔光带 ---------- */
.top{position:relative}
.top::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;
  background:linear-gradient(90deg,rgba(79,209,197,.55),rgba(122,170,200,.14) 42%,rgba(122,170,200,0));
}
/* 桌面端鼠标靠近卡片时描边微亮（只改阴影，不碰 transform，避免和入场动画打架） */
@media(hover:hover) and (min-width:1100px){
  .c-act>.card,.c-status>.card{transition:box-shadow .25s,border-color .25s}
  .c-act>.card:hover,.c-status>.card:hover{
    border-color:rgba(122,170,200,.26);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -46px #000;
  }
}

/* ==================================================================
   白天主题：暗色主题一行不动，这里只覆盖那些仍写死深色的"大面积表面"。
   面板/文字/边框本身已走 var(--panel)/var(--line)/var(--ink)，会自动跟随。
   ================================================================== */
html[data-theme="day"] body{
  background:radial-gradient(1200px 600px at 20% -10%,var(--bg-glow) 0%,var(--bg) 60%);
}
html[data-theme="day"] .top::after{
  background:linear-gradient(90deg,rgba(13,143,131,.5),rgba(90,140,180,.16) 42%,rgba(90,140,180,0));
}

/* ---- 地图画框：白天也只留深色底，画布之外不露出浅色边 ---- */
html[data-theme="day"] .map-frame{
  background:#080d12;
  box-shadow:inset 0 0 60px -30px rgba(60,90,120,.5),0 24px 50px -40px rgba(60,90,120,.6);
}

/* ---- 左栏日志气泡（左栏最大的一块面积） ---- */
html[data-theme="day"] .log::-webkit-scrollbar-thumb{background:#c2d2df}
html[data-theme="day"] .log .bubble{
  background:#fff;border-color:#d8e3ed;color:#3d5266;
  box-shadow:0 8px 16px -12px rgba(70,100,130,.45);
}
html[data-theme="day"] .log .bubble::after{
  background-color:#fff;border-left-color:#d8e3ed;border-bottom-color:#d8e3ed;
}
/* 收益/损失气泡的小尾巴要跟着气泡本身换色，不能一律白色 */
html[data-theme="day"] .log .bubble.good::after{
  background-color:#effaf1;border-left-color:#a9d8b0;border-bottom-color:#a9d8b0;
}
html[data-theme="day"] .log .bubble.bad::after{
  background-color:#fdeeee;border-left-color:#e8b6b6;border-bottom-color:#e8b6b6;
}
html[data-theme="day"] .bar{box-shadow:inset 0 1px 2px rgba(90,120,150,.20)}
html[data-theme="day"] .log .bubble::before{background:#e6eef6;color:#6b8397}
html[data-theme="day"] .log .bubble.good{background-color:#effaf1;border-color:#a9d8b0;color:#26693a}
html[data-theme="day"] .log .bubble.good::before{background:rgba(53,138,68,.14)}
html[data-theme="day"] .log .bubble.bad{background-color:#fdeeee;border-color:#e8b6b6;color:#8f3232}
html[data-theme="day"] .log .bubble.bad::before{background:rgba(201,67,67,.13)}
html[data-theme="day"] .log .bubble:last-child{
  box-shadow:0 0 0 1px rgba(13,143,131,.3),0 10px 20px -12px rgba(70,100,130,.5);
}
html[data-theme="day"] .log .bubble.day{
  background:linear-gradient(180deg,#e8f1f8,#dce8f3);
  border-color:#bfd3e3;color:var(--blue);
  box-shadow:0 8px 12px -10px rgba(70,100,130,.4);
}
html[data-theme="day"] .log-filter.on{color:var(--teal);border-color:#8fd0c8;background:#e4f6f3}

/* ---- 放大日志时的遮罩与浮层 ---- */
html[data-theme="day"] body.log-open::after{background:rgba(198,212,225,.66)}
html[data-theme="day"] .card-log.expanded{
  border-color:#c2d4e4;box-shadow:0 40px 90px -24px rgba(60,90,120,.42);
}

/* ---- 状态条 / 今晚清单 / Token 脑力块 ---- */
html[data-theme="day"] .bar{background:#d5e0ea}
html[data-theme="day"] .need-list{border-top-color:#dde7f0}
html[data-theme="day"] .brain{
  border-color:#bcd2de;
  background:linear-gradient(180deg,rgba(13,143,131,.10),rgba(244,248,251,.92));
}
html[data-theme="day"] .brain.warn{
  border-color:#d8b878;
  background:linear-gradient(180deg,rgba(180,113,10,.12),rgba(252,248,240,.92));
}
html[data-theme="day"] .brain.bad{
  border-color:#dda6a6;
  background:linear-gradient(180deg,rgba(201,67,67,.12),rgba(252,244,244,.92));
}
html[data-theme="day"] .bchip{background:rgba(22,33,44,.05);border-color:#c9d7e3}
html[data-theme="day"] .bchip.off{background:rgba(201,67,67,.10);border-color:#dda6a6}

/* ---- 入夜按钮 / 顶部警示条 / 轻提示 ---- */
html[data-theme="day"] .night{
  background:linear-gradient(180deg,#e4eef7,#d3e1ee);border-color:#b9cede;
}
html[data-theme="day"] .enc-flag{
  border-color:#d98a8a;
  background:linear-gradient(180deg,#fdeaea,#f7dcdc);color:#8f3232;
}
html[data-theme="day"] .toast{
  background:#fff;border-color:#cfdde9;
  box-shadow:0 10px 24px -14px rgba(60,90,120,.55);
}

/* ==================================================================
   白天主题 · 视觉精修层对应配色
   v3 精修层把卡片/顶栏/头条/交易/AI 等表面写死成了夜色渐变，
   这里统一换成纸面浅色，并保证深色文字落在浅底上足够清楚。
   ================================================================== */
html[data-theme="day"] ::selection{background:rgba(13,143,131,.22);color:#0b2c2a}

/* ---- 顶栏 ---- */
html[data-theme="day"] .brand{text-shadow:none}
html[data-theme="day"] .dot{box-shadow:0 0 0 3px rgba(13,143,131,.14),0 0 10px -1px rgba(13,143,131,.55)}
html[data-theme="day"] .chip{
  background:linear-gradient(180deg,#ffffff,#f2f6fa);
  border-color:rgba(120,150,180,.32);color:var(--dim);
  box-shadow:inset 0 1px 0 #fff,0 8px 18px -18px rgba(40,70,100,.55);
}
html[data-theme="day"] .chip b{color:var(--ink)}
/* 钱包里的金额保持自己的语义色，不要被上面那条统一成墨色 */
html[data-theme="day"] .wal-tok,html[data-theme="day"] .wal-tok b{color:var(--amber)}
html[data-theme="day"] .wal-cash,html[data-theme="day"] .wal-cash b{color:var(--green)}
html[data-theme="day"] .chip.snd:hover{border-color:var(--teal);color:var(--teal)}
html[data-theme="day"] .chip.snd.off{color:#8a9bac;opacity:.8}
/* 脑力四档在白天要能看清：默认浅底，选中用青色描边 */
html[data-theme="day"] .btier{background:#fff;border-color:rgba(120,150,180,.32);color:#5b6b7a}
html[data-theme="day"] .btier:hover{border-color:var(--teal);color:#0b2c2a}
html[data-theme="day"] .btier.on{background:rgba(13,143,131,.12);border-color:var(--teal);color:#0b2c2a}
html[data-theme="day"] .btier.on i{color:var(--teal)}
/* 白天时主题按钮也带 .off（表示当前是白天），月亮图标不能跟着变灰 */
html[data-theme="day"] #themeBtn.off{color:#40566b;opacity:1}

/* ---- 卡片与头条 ---- */
html[data-theme="day"] .card{
  background:linear-gradient(180deg,#ffffff,#f4f8fb);
  border-color:rgba(120,150,180,.28);
  box-shadow:inset 0 1px 0 #fff,0 18px 36px -32px rgba(40,70,100,.5);
}
html[data-theme="day"] .card h3{color:#4f6577}
html[data-theme="day"] .card h3::before{box-shadow:none}

/* ---- 地图画框：浅色玻璃，四角只轻轻收边，不要夜间那种压黑 ---- */
html[data-theme="day"] .map-frame::after{
  background:radial-gradient(115% 84% at 50% 42%,rgba(255,255,255,0) 66%,rgba(140,165,190,.22) 100%);
}

/* ---- 街道信息 ---- */
html[data-theme="day"] .street-name{color:#0b7f74}
html[data-theme="day"] .street-name.hot{color:#0b7f74;text-shadow:none}
html[data-theme="day"] .street-key i.k.on{background:#cdeee9;box-shadow:inset 0 0 0 1px rgba(13,143,131,.6)}
html[data-theme="day"] .street-key i.k.off{background:#dfe8f0;box-shadow:inset 0 0 0 1px rgba(120,145,170,.45)}
html[data-theme="day"] .street-key i.k.sp{background:#dde9f4;box-shadow:inset 0 0 0 1px rgba(90,130,165,.55)}
html[data-theme="day"] .street-key i.k.lit{background:#e3f0cf;box-shadow:inset 0 0 0 1px rgba(110,160,40,.6)}

/* ---- 日志工具条 ---- */
html[data-theme="day"] .log-filter{background:#fff;border-color:#d2dde8}
html[data-theme="day"] .log-filter:hover{border-color:#8fd0c8;color:var(--teal)}

/* ---- 家中操作 / 入夜 ---- */
html[data-theme="day"] .home button:hover:not(:disabled){background:#eef5fa;border-color:#b9cede}
html[data-theme="day"] .home button.hact{background:linear-gradient(180deg,#fff,#f8fbfd 70%)}
html[data-theme="day"] .home button.hact .hicon{background:rgba(13,143,131,.06)}
html[data-theme="day"] .home button.tok{
  border-color:#e3cfa4;background:linear-gradient(180deg,#fff9ec,#fdf1d8);color:#8a5d12;
}
html[data-theme="day"] .night{color:var(--ink)}
html[data-theme="day"] .night:hover:not(:disabled){background:linear-gradient(180deg,#dce9f5,#cdddec)}
html[data-theme="day"] .night.hot{
  color:#0b7f74;
  box-shadow:0 0 0 1px rgba(13,143,131,.28),0 0 16px -8px rgba(13,143,131,.55);
}
html[data-theme="day"] .hint{color:var(--dim)}

/* ---- 交易面板 ---- */
html[data-theme="day"] .shop-tabs{background:#eef4f9}
html[data-theme="day"] .shop-tabs button{color:#5b7085}
html[data-theme="day"] .shop-tabs button:hover{color:var(--ink)}
html[data-theme="day"] .shop-tabs button.on{
  color:#0b6f66;background:linear-gradient(180deg,#e6f7f4,#dcf1ee);
  box-shadow:inset 0 0 0 1px rgba(13,143,131,.22);
}
html[data-theme="day"] .trade{background:linear-gradient(180deg,#fff,#f8fbfd 70%)}
html[data-theme="day"] .trade.sell{border-color:rgba(13,143,131,.22)}
html[data-theme="day"] .ticon{background:rgba(13,143,131,.06)}
html[data-theme="day"] .tprice{background:rgba(180,113,10,.08);box-shadow:inset 0 0 0 1px rgba(180,113,10,.16)}
html[data-theme="day"] .trade.sell .tprice{background:rgba(13,143,131,.08);box-shadow:inset 0 0 0 1px rgba(13,143,131,.16)}
html[data-theme="day"] .fin-rate{
  background:linear-gradient(135deg,rgba(180,113,10,.07),rgba(13,143,131,.05)),#fff;
}
html[data-theme="day"] .fin-rate i{background:rgba(13,143,131,.05)}

/* ---- 求助 AI ---- */
html[data-theme="day"] .ai-head b{color:var(--ink)}
html[data-theme="day"] .ai-ok{color:#2f7a4a}
html[data-theme="day"] .ai-warn{color:var(--red)}
html[data-theme="day"] .ai-btn{
  background:#f6fafc;border-color:rgba(70,140,170,.30);color:var(--ink);
}
html[data-theme="day"] .ai-btn:hover:not(:disabled){
  background:#e8f3f8;border-color:rgba(13,143,131,.5);
}
html[data-theme="day"] .ai-desc{opacity:.78}
html[data-theme="day"] .ai-cost{color:#0b6f66;background:#dff3f0}
html[data-theme="day"] .ai-group-h{border-top-color:rgba(70,140,170,.22)}
html[data-theme="day"] .ai-group-h span{color:#156d78}
html[data-theme="day"] .ai-group-h i{opacity:.6}
html[data-theme="day"] .ai-note{opacity:.75}
html[data-theme="day"] .ai-btn.ai-earn{background:#f1faf3;border-color:rgba(60,150,90,.30)}
html[data-theme="day"] .ai-btn.ai-earn:hover:not(:disabled){
  background:#e3f6e9;border-color:rgba(60,150,90,.5);
}
html[data-theme="day"] .ai-cost.ai-gain{color:#2f7a4a;background:#dbf2e2}
html[data-theme="day"] .ai-best{background:#eefaf3;border-color:rgba(60,150,90,.35)}
html[data-theme="day"] .ai-best b{color:#2f7a4a}
html[data-theme="day"] .ai-best span{color:var(--ink)}
html[data-theme="day"] .ai-btn.ai-best-card{border-color:rgba(60,150,90,.6)}

/* ---- 神格 · 化身 ---- */
html[data-theme="day"] .deity-head b{color:var(--ink)}
html[data-theme="day"] .deity-bar{background:#e3ecf4;border-color:rgba(70,140,170,.2)}
html[data-theme="day"] .deity-btn{
  background:#f3f8fd;border-color:rgba(70,140,170,.34);color:var(--ink);
}
html[data-theme="day"] .deity-btn:hover:not(:disabled){border-color:rgba(13,143,131,.55)}
html[data-theme="day"] .deity-btn em{color:#3f6f9c}
html[data-theme="day"] .deity-item{background:#f4f9fd;border-color:rgba(70,140,170,.18)}
html[data-theme="day"] .deity-item .dv-n{color:var(--ink)}
html[data-theme="day"] .deity-item button{
  background:#e8f3fb;border-color:rgba(70,140,170,.36);color:#26608f;
}
html[data-theme="day"] .deity-hint{color:#5b7085;opacity:.85}
html[data-theme="day"] .deity-hint.on{color:#0b7f74}


/* ---- 遭遇面板 ---- */
html[data-theme="day"] .enc.on{
  border-color:#d98a8a;
  background:linear-gradient(180deg,#fdf2f2,#fbeaea);
}
html[data-theme="day"] .enc-t{color:var(--red)}
html[data-theme="day"] .enc-x{color:#3f5568}
html[data-theme="day"] .enc-btns button{border-color:#e2c6c6;background:#fff}
html[data-theme="day"] .enc-btns button:hover:not(:disabled){background:#fdf5f5}
html[data-theme="day"] .enc-flag .go{color:#b4453f}

/* ---- 结算弹层主按钮 ---- */
html[data-theme="day"] .modal button{background:#0b7d72;color:#fff}
html[data-theme="day"] .modal button:hover{background:#096a61}

/* ---- 滚动条 / 遭遇图标 ---- */
html[data-theme="day"] .c-status>.card:not(.card-log)::-webkit-scrollbar-thumb,
html[data-theme="day"] .act-scroll::-webkit-scrollbar-thumb{background:#c9d7e3}
html[data-theme="day"] .c-status>.card:not(.card-log),
html[data-theme="day"] .act-scroll{scrollbar-color:#c9d7e3 transparent}
html[data-theme="day"] .enc-flag .ico{color:#fff}

/* ---- 手机顶栏吸顶时也要跟着换成浅色，否则会盖出一条黑带 ---- */
@media(max-width:760px){
  html[data-theme="day"] .top{background:rgba(238,243,248,.96);border-bottom-color:var(--line)}
}

/* ============ 右键菜单（日志卡片 · 已打开的文件） ============
   面板/文字/分隔线全部走变量，昼夜主题自动跟随，只有阴影和悬停底色单独调 */
.ctx{
  position:fixed; left:0; top:0; z-index:80; min-width:198px; max-width:270px; padding:6px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.22);
  color:var(--ink); font-size:13px; user-select:none;
  opacity:0; transform:translateY(-4px) scale(.985); transform-origin:top left;
  transition:opacity .12s ease,transform .12s ease; pointer-events:none;
}
.ctx.on{opacity:1;transform:none;pointer-events:auto}
.ctx[hidden]{display:none}
.ctx-hd{
  padding:4px 10px 6px; font-size:11px; letter-spacing:.4px; color:var(--dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ctx-item{
  display:flex; align-items:center; gap:14px; width:100%; padding:7px 10px;
  border:0; border-radius:7px; background:none; color:inherit;
  font:inherit; text-align:left; cursor:pointer; transition:background .12s,color .12s;
}
.ctx-item .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctx-item kbd{flex:0 0 auto;font:11px/1 inherit;color:var(--dim);letter-spacing:.3px}
.ctx-item:hover,.ctx-item.on{background:rgba(79,209,197,.15);color:var(--teal)}
.ctx-item:hover kbd,.ctx-item.on kbd{color:inherit;opacity:.85}
.ctx-item:disabled{opacity:.36;cursor:default;background:none;color:var(--ink)}
.ctx-item.danger:hover{background:rgba(241,106,106,.16);color:var(--red)}
.ctx-sep{height:1px;margin:5px 8px;background:var(--line)}
html[data-theme="day"] .ctx{box-shadow:0 20px 44px -20px rgba(52,72,92,.42),0 0 0 1px rgba(90,120,150,.08)}
html[data-theme="day"] .ctx-item:hover{background:rgba(13,143,131,.12)}
html[data-theme="day"] .ctx-item.danger:hover{background:rgba(201,67,67,.12)}

/* 固定在顶部的日志条：左侧一道琥珀色标记 */
.log .bubble.pin{box-shadow:inset 2px 0 0 var(--amber)}

/* 人物形象：挂在左下角引导列里的一张小卡，不再是全屏暗底大图 */
.look-mini{
  position:relative;margin:0;display:flex;flex-direction:column;gap:6px;
  padding:8px 8px 9px;border-radius:12px;
  border:1px solid rgba(126,168,196,.22);
  background:linear-gradient(180deg,rgba(16,25,34,.9),rgba(9,15,21,.86));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 44px -28px #000,inset 0 1px 0 rgba(255,255,255,.05);
  animation:visitIn .26s cubic-bezier(.22,1,.36,1) both;
}
/* 形象照按片子本来的比例铺满整张卡：不留两侧灰边，也不切掉头和脚。
   生成的人像固定 480×620（见 game.js npcLookURL），外来头像万一比例不同就居中裁边。 */
.look-mini img{
  display:block;width:100%;height:auto;aspect-ratio:480/620;
  border-radius:9px;background:rgba(0,0,0,.22);object-fit:cover;object-position:center;
}
.look-mini figcaption{font-size:10.5px;line-height:1.45;letter-spacing:.02em;color:var(--dim)}
.look-x{
  position:absolute;z-index:1;top:6px;right:6px;width:24px;height:24px;padding:0;
  display:grid;place-items:center;border-radius:8px;cursor:pointer;
  background:rgba(10,16,22,.72);border:1px solid rgba(255,255,255,.12);
  color:var(--dim);transition:color .2s,background .2s,transform .25s;
}
.look-x svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.look-x:hover{color:var(--ink);background:rgba(255,255,255,.1);transform:rotate(90deg)}
html[data-theme="day"] .look-mini{
  border-color:#e3d6bf;
  background:linear-gradient(180deg,rgba(255,253,247,.94),rgba(250,244,232,.9));
  box-shadow:0 20px 44px -30px rgba(90,70,40,.55),inset 0 1px 0 #fff;
}
html[data-theme="day"] .look-mini figcaption{color:#66798a}
html[data-theme="day"] .look-x{background:rgba(255,255,255,.8);border-color:rgba(90,120,150,.2);color:#51627a}

/* 搭话 / 敲门卡：和章节卡同宽，排在左下角那一列里。
   形象直接画在卡里，不再另开一层全屏大图；卡片本身也不再 fixed 居中。 */
#visit:empty{display:none}
@keyframes visitIn{
  from{opacity:0;transform:translateY(14px) scale(.96)}
  to{opacity:1;transform:none}
}
/* 好事：落地后轻轻回弹一下，绿色光圈荡开 */
@keyframes visitGood{
  0%{opacity:0;transform:translateY(14px) scale(.95)}
  55%{opacity:1;transform:translateY(0) scale(1.015)}
  100%{opacity:1;transform:none}
}
@keyframes visitGoodGlow{
  0%{box-shadow:0 28px 64px -26px rgba(0,0,0,.9),0 0 0 0 rgba(79,209,197,.55)}
  70%{box-shadow:0 28px 64px -26px rgba(0,0,0,.9),0 0 0 12px rgba(79,209,197,0)}
  100%{box-shadow:0 28px 64px -26px rgba(0,0,0,.9),0 0 0 0 rgba(79,209,197,0)}
}
/* 坏事：先顿一下再左右撞两下，红边跟着闪 */
@keyframes visitBad{
  0%{opacity:0;transform:translateY(12px) scale(.96)}
  20%{opacity:1;transform:translateX(-5px) scale(1.005)}
  36%{transform:translateX(4px)}
  52%{transform:translateX(-3px)}
  68%{transform:translateX(2px)}
  84%{transform:translateX(-1px)}
  100%{opacity:1;transform:none}
}
@keyframes visitBadGlow{
  0%{box-shadow:0 28px 64px -26px rgba(0,0,0,.9),0 0 0 0 rgba(240,109,109,.6)}
  70%{box-shadow:0 28px 64px -26px rgba(0,0,0,.9),0 0 0 12px rgba(240,109,109,0)}
  100%{box-shadow:0 28px 64px -26px rgba(0,0,0,.9),0 0 0 0 rgba(240,109,109,0)}
}
/* 闭门羹 / 空手：只是淡上来，别给存在感 */
@keyframes visitFade{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
/* 好事那道从卡片上扫过去的光 */
@keyframes visitSweep{
  from{transform:translateX(-120%)}
  to{transform:translateX(120%)}
}
/* 结果条目一条一条浮出来，眼睛跟得上 */
@keyframes visitLine{
  from{opacity:0;transform:translateX(-7px)}
  to{opacity:1;transform:none}
}
.visit-card{
  position:relative;padding:9px 10px 10px;
  border-radius:12px;border:1px solid rgba(126,168,196,.22);
  background:linear-gradient(180deg,rgba(25,37,51,.96),rgba(11,17,24,.98));
  box-shadow:0 20px 44px -28px rgba(0,0,0,.9);
  animation:visitIn .26s cubic-bezier(.22,1,.36,1) both;
}
/* 形象：整张人像按原比例铺满卡宽，不留两侧灰边，也不切掉头和脚 */
.visit-face{
  display:block;width:100%;height:auto;aspect-ratio:480/620;margin:0 0 7px;
  border-radius:9px;background:rgba(0,0,0,.22);object-fit:cover;object-position:center;
}
.visit-card.good{border-color:rgba(79,209,197,.4);box-shadow:0 20px 44px -28px rgba(0,0,0,.9),0 0 0 1px rgba(79,209,197,.12)}
.visit-card.bad{border-color:rgba(240,109,109,.42);box-shadow:0 20px 44px -28px rgba(0,0,0,.9),0 0 0 1px rgba(240,109,109,.12)}
.visit-card.ruin{border-color:rgba(246,173,85,.34)}
/* 结果卡：入场按成色分三套，光圈和扫光叠在入场动画上面 */
.visit-card.result{overflow:hidden;animation:visitFade .3s ease-out both}
.visit-card.result.good{
  animation:visitGood .38s cubic-bezier(.22,1.2,.36,1) both,visitGoodGlow .85s ease-out .08s both;
}
.visit-card.result.bad{
  animation:visitBad .5s cubic-bezier(.22,1,.36,1) both,visitBadGlow .8s ease-out .06s both;
}
.visit-card.result.good::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(79,209,197,.18) 50%,transparent 68%);
  animation:visitSweep .72s ease-out .1s both;
}
.visit-card.result .visit-lines li{animation:visitLine .26s ease-out both}
.visit-card.result .visit-lines li:nth-child(1){animation-delay:.1s}
.visit-card.result .visit-lines li:nth-child(2){animation-delay:.18s}
.visit-card.result .visit-lines li:nth-child(3){animation-delay:.26s}
.visit-card.result .visit-lines li:nth-child(4){animation-delay:.34s}
.visit-card.result .visit-head h3{animation:visitLine .26s ease-out both}
.visit-head{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.visit-head h3{margin:0;font-size:12.5px;letter-spacing:.02em;color:var(--ink)}
.visit-door{font-size:10.5px;color:var(--dim)}
.visit-sub{margin:4px 0 0;font-size:11px;line-height:1.55;color:var(--dim)}
.visit-meta{margin:3px 0 0;font-size:10px;line-height:1.5;color:var(--dim);opacity:.85}
.visit-lines{margin:6px 0 0;padding-left:14px;font-size:11.5px;line-height:1.65;color:var(--ink)}
.visit-lines li::marker{color:var(--dim)}
.visit-acts{display:flex;align-items:center;gap:6px;margin-top:8px}
.visit-blocked{flex:1;font-size:11px;line-height:1.45;color:var(--dim)}
.visit-go{
  flex:1;padding:7px 10px;border-radius:9px;cursor:pointer;
  font-size:12px;font-weight:600;letter-spacing:.02em;color:#0b1016;
  background:linear-gradient(180deg,#f6ad55,#e08a2e);border:1px solid rgba(246,173,85,.6);
  transition:filter .18s,transform .18s;
}
.visit-go:hover{filter:brightness(1.08)}
.visit-go:active{transform:translateY(1px)}
.visit-x{
  flex:0 0 auto;padding:7px 11px;border-radius:9px;cursor:pointer;
  font-size:11.5px;color:var(--dim);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  transition:color .18s,background .18s;
}
.visit-x:hover{color:var(--ink);background:rgba(255,255,255,.1)}
html[data-theme="day"] .visit-card{
  background:linear-gradient(180deg,rgba(252,253,255,.98),rgba(240,245,250,.99));
  border-color:rgba(90,120,150,.2);
}
html[data-theme="day"] .visit-x{background:rgba(255,255,255,.7);border-color:rgba(90,120,150,.2);color:#51627a}
@media (max-width:640px){
  .visit-card{padding:8px 9px 9px}
  /* 窄屏也别锁死高度：锁了比例就会把画面裁掉一截，形象照按卡宽自己算高 */
  .visit-head h3{font-size:12px}
}
/* 晃眼就关掉：结果照常出，只是不再弹、不再抖、不再扫光 */
@media (prefers-reduced-motion:reduce){
  .visit-card,.visit-card.result,.visit-card.result.good,.visit-card.result.bad,
  .visit-card.result .visit-lines li,.visit-card.result .visit-head h3{animation:none!important}
  .visit-card.result.good::after{display:none}
}

/* ===== 宅基（买地卡） ===== */
/* 买地卡仍然居中弹出（它是一次性决策），所以保留自己的居中位移动画：
   visitIn 已经改成纯竖直位移，直接复用会把 translateX(-50%) 抹掉。 */
@keyframes plotIn{
  from{opacity:0;transform:translateX(-50%) translateY(16px) scale(.96)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
.plot-card{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:16;
  width:min(420px,calc(100% - 24px));padding:12px 13px 13px;
  border-radius:14px;border:1px solid rgba(246,173,85,.32);
  background:linear-gradient(180deg,rgba(30,36,44,.97),rgba(12,16,22,.98));
  box-shadow:0 28px 64px -26px rgba(0,0,0,.9);
  animation:plotIn .26s cubic-bezier(.22,1,.36,1) both;
}
.plot-card.sold{border-color:rgba(126,168,196,.24)}
.plot-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plot-head h3{margin:0;font-size:14.5px;letter-spacing:.02em;color:var(--ink)}
.plot-where{font-size:11.5px;color:var(--dim)}
.plot-price{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.plot-price-k{font-size:11.5px;color:var(--dim)}
.plot-price b{font-size:19px;color:#ffe7a3;letter-spacing:.02em}
.plot-state{
  margin-left:auto;font-size:11.5px;padding:2px 8px;border-radius:999px;
  background:rgba(246,173,85,.16);color:#f6c07a;
}
.plot-state.sold{background:rgba(126,168,196,.16);color:#a9c3d8}
.plot-sub{margin:6px 0 0;font-size:12.5px;line-height:1.6;color:var(--dim)}
.plot-msg{margin:6px 0 0;font-size:12px;color:#f08a8a}
/* 已建成的房：名字、层数、匠人写的一句话 */
.plot-house{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:8px;
  padding:7px 9px;border-radius:9px;
  background:rgba(246,173,85,.1);border:1px solid rgba(246,173,85,.22);
}
.plot-house-tag{
  font-size:10.5px;padding:1px 7px;border-radius:999px;
  background:rgba(246,173,85,.18);color:#f6c07a;
}
.plot-house b{font-size:13.5px;color:var(--ink)}
.plot-house-fl{font-size:11px;color:var(--dim)}
.plot-house p{flex:1 0 100%;margin:4px 0 0;font-size:11.5px;line-height:1.55;color:var(--dim)}
/* 建房描述：一句话交给服务端翻译，输入框不参与任何数值 */
.plot-build{margin-top:8px}
.plot-in{
  width:100%;box-sizing:border-box;resize:none;padding:7px 9px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink);
  font:inherit;font-size:12px;line-height:1.55;outline:none;
}
.plot-in::placeholder{color:var(--dim);opacity:.8}
.plot-in:focus{border-color:rgba(246,173,85,.55)}
.plot-tip{display:block;margin-top:4px;font-size:10.5px;line-height:1.5;color:var(--dim)}
.plot-acts{display:flex;align-items:center;gap:8px;margin-top:10px}
.plot-go{
  flex:1;padding:8px 12px;border-radius:10px;cursor:pointer;
  font-size:13px;font-weight:600;letter-spacing:.02em;color:#0b1016;
  background:linear-gradient(180deg,#f6ad55,#e08a2e);border:1px solid rgba(246,173,85,.6);
  transition:filter .18s,transform .18s;
}
.plot-go:hover:not(:disabled){filter:brightness(1.08)}
.plot-go:active:not(:disabled){transform:translateY(1px)}
.plot-go:disabled{opacity:.55;cursor:not-allowed}
.plot-x{
  flex:0 0 auto;padding:8px 14px;border-radius:10px;cursor:pointer;
  font-size:12.5px;color:var(--dim);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  transition:color .18s,background .18s;
}
.plot-x:hover{color:var(--ink);background:rgba(255,255,255,.1)}
html[data-theme="day"] .plot-card{
  background:linear-gradient(180deg,rgba(252,253,255,.98),rgba(240,245,250,.99));
  border-color:rgba(200,150,60,.28);
}
html[data-theme="day"] .plot-price b{color:#a06a12}
html[data-theme="day"] .plot-house{background:rgba(214,132,20,.08);border-color:rgba(214,132,20,.2)}
html[data-theme="day"] .plot-house-tag{background:rgba(214,132,20,.14);color:#a06a12}
html[data-theme="day"] .plot-in{background:rgba(255,255,255,.85);border-color:rgba(90,120,150,.2);color:#2b3646}
html[data-theme="day"] .plot-x{background:rgba(255,255,255,.7);border-color:rgba(90,120,150,.2);color:#51627a}
@media (max-width:640px){
  .plot-card{bottom:12px;padding:10px 11px 11px}
  .plot-head h3{font-size:13.5px}
  /* iOS 聚焦小于 16px 的输入框会自动放大页面，描述框单独抬到 16px */
  .plot-in{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .plot-card{animation:none!important}
}


/* ===== 与神对话 =====
   对话面板是「输入框 + 对白」，不是数值面板：气运只以标签出现，
   真正的乘数在 game.js 里生效，玩家看到的是天时，不是公式。 */
.divine-wrap{margin-top:12px}
.divine-wrap .sub{
  font-size:10.5px;letter-spacing:.12em;color:var(--dim);
  text-transform:uppercase;margin:10px 0 7px;font-weight:600;
}
.divine-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.divine-head b{font-size:12.5px;color:var(--ink);letter-spacing:.04em}
.divine-head span{font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums}
/* 残页：面板顶部一条折叠栏。收起时只占一行，展开才铺开原文，
   免得把运势、画像和对话区一起挤下去。 */
.divine-clues{
  flex:0 0 auto;margin:0 0 6px;padding:6px 8px 7px;border-radius:9px;
  border:1px dashed rgba(79,209,197,.3);background:rgba(35,66,82,.22);
}
.dc-top{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--dim);min-width:0}
.dc-toggle{
  display:inline-flex;align-items:center;gap:4px;min-width:0;
  padding:0;border:0;background:none;color:var(--ink);
  font:inherit;font-size:10.5px;font-weight:600;cursor:pointer;
}
.dc-toggle:hover{color:#8fe8ff}
.dc-arrow{
  display:inline-block;font-style:normal;font-size:9px;color:var(--teal);
  transition:transform .15s;
}
.dc-arrow.open{transform:rotate(90deg)}
.dc-top>span:last-child{margin-left:auto;font-size:9.5px;white-space:nowrap;opacity:.85}
.dc-lit{color:var(--amber);font-weight:600;opacity:1}
.dc-ready{color:var(--teal);font-weight:600;opacity:1}
.dc-list{
  margin-top:6px;max-height:96px;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:4px;
}
.dc-item{
  padding:4px 6px;border-radius:6px;
  background:rgba(10,16,23,.55);border:1px solid var(--line);
}
.dc-item b{display:block;font-size:10px;font-weight:600;color:#bfe0ff}
.dc-item span{display:block;margin-top:1px;font-size:10px;line-height:1.5;color:var(--dim)}
.dc-use{
  display:flex;align-items:flex-start;gap:6px;margin-top:6px;
  font-size:10.5px;line-height:1.5;color:var(--dim);cursor:pointer;
}
.dc-use input{flex:0 0 auto;margin:1px 0 0;accent-color:var(--teal)}
.dc-use.on{color:#8fe8ff}
.dc-hint{margin-top:5px;font-size:9.5px;color:var(--amber);opacity:.85}
html[data-theme="day"] .divine-clues{border-color:#c9e0dc;background:#f0f8f6}
html[data-theme="day"] .dc-item{background:#fff;border-color:#dde8ee}
html[data-theme="day"] .dc-item b{color:#16324a}
html[data-theme="day"] .dc-use.on{color:#0b6b7a}
.divine-off{
  font-size:11px;line-height:1.6;color:var(--dim);padding:8px 10px;border-radius:8px;
  background:var(--panel2);border:1px dashed var(--line);
}
.divine-luck{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.dl-tag{
  font-size:10.5px;padding:2px 7px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel2);color:var(--dim);font-variant-numeric:tabular-nums;
}
.dl-tag.good{color:#7fe6c0;border-color:rgba(127,230,192,.45);background:rgba(35,80,66,.35)}
.dl-tag.bad{color:#ff9b9b;border-color:rgba(255,155,155,.42);background:rgba(84,36,42,.35)}
/* 白天主题下原来沿用了夜里的浅色字，压在浅底上几乎看不清 */
html[data-theme="day"] .dl-tag.good{color:#0b7f74;border-color:rgba(13,143,131,.4);background:rgba(13,143,131,.1)}
html[data-theme="day"] .dl-tag.bad{color:#b03636;border-color:rgba(190,70,70,.4);background:rgba(190,70,70,.08)}
.divine-profile{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.dp-trait,.dp-key{
  font-size:10px;padding:1px 6px;border-radius:6px;border:1px solid var(--line);
  color:var(--dim);background:var(--panel2);
}
.dp-key{color:#9fc6ff;border-color:rgba(126,180,255,.3)}
html[data-theme="day"] .dp-key{color:#2c74c4;border-color:rgba(44,116,196,.32)}
.divine-body{
  max-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;
  padding:7px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);
}
.divine-empty{font-size:10.5px;color:var(--dim);line-height:1.6;text-align:center;padding:8px 0}
.divine-msg{display:flex;gap:6px;border-radius:8px}
.divine-msg .dm-who{
  flex:none;width:16px;height:16px;border-radius:50%;font-style:normal;font-size:9.5px;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
  border:1px solid var(--line);color:var(--dim);
}
.divine-msg .dm-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.divine-msg .dm-tx{font-size:11.5px;line-height:1.6;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.divine-msg.god .dm-who{color:#bfe0ff;border-color:rgba(126,180,255,.45)}
.divine-msg.god .dm-tx{color:#cfe4ff}
.divine-msg.me{flex-direction:row-reverse}
.divine-msg.me .dm-main{align-items:flex-end}
.divine-msg.me .dm-tx{
  padding:4px 8px;border-radius:8px;background:rgba(54,88,146,.35);color:var(--ink);
}
.divine-msg.typing .dm-tx{opacity:.6;letter-spacing:2px}

/* 城中 / 凡间徽标：让玩家一眼分清哪句是神谕、哪句是刚从外面查回来的 */
.dm-mode{
  align-self:flex-start;font-style:normal;font-size:9px;letter-spacing:.5px;
  padding:0 5px;border-radius:5px;color:#8fe8ff;
  border:1px solid rgba(127,230,255,.38);background:rgba(35,66,82,.5);
}

/* 来源卡片：默认收起，只留一行「来源 N 条」，点开才铺开资料出处 */
.dm-src{display:flex;flex-direction:column;gap:4px;margin-top:1px}
.dm-src-toggle{
  display:inline-flex;align-items:center;gap:4px;align-self:flex-start;
  padding:1px 0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:9px;letter-spacing:.3px;color:var(--dim);
  opacity:.75;transition:.15s;
}
.dm-src-toggle:hover{opacity:1;color:#bcd8f5}
.dm-src-arrow{
  font-style:normal;font-size:11px;line-height:1;
  transform:rotate(0deg);transition:transform .16s ease;
}
.dm-src.open .dm-src-arrow{transform:rotate(90deg)}
.dm-src-list{display:flex;flex-direction:column;gap:3px}
.dm-src-item{
  display:block;padding:3px 6px;border-radius:6px;text-decoration:none;
  border:1px solid var(--line);background:rgba(26,36,54,.55);transition:.15s;
}
.dm-src-item b{
  display:block;font-size:10px;font-weight:500;line-height:1.45;color:#bcd8f5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dm-src-item span{display:block;font-size:9px;color:var(--dim);margin-top:1px}
.dm-src-item:hover{border-color:rgba(126,180,255,.5);background:rgba(36,54,86,.7)}
.dm-src-item:hover b{color:#dcefff}

/* 问法切换：随祂判断 / 只问城中 / 问凡间 */
.divine-mode{display:flex;align-items:center;gap:4px;margin-top:6px}
.divine-mode button{
  padding:4px 7px;border-radius:7px;cursor:pointer;font:inherit;font-size:10px;
  border:1px solid var(--line);background:var(--panel2);color:var(--dim);transition:.15s;
}
.divine-mode button:hover:not(:disabled){color:var(--ink);border-color:rgba(126,180,255,.45)}
.divine-mode button:disabled{opacity:.32;cursor:not-allowed}
.divine-mode button.on{color:#8fe8ff;border-color:rgba(127,230,255,.5);background:rgba(35,66,82,.5)}
.dm-quota{margin-left:auto;font-size:9.5px;color:var(--dim);opacity:.8;white-space:nowrap}
.divine-err{margin-top:5px;font-size:10.5px;color:#ff9b9b}
.divine-note{margin-top:5px;font-size:10.5px;line-height:1.5;color:var(--dim)}
.divine-in{margin-top:6px}
.divine-in textarea{
  width:100%;box-sizing:border-box;resize:none;padding:7px 9px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink);
  font:inherit;font-size:11.5px;line-height:1.55;outline:none;
}
.divine-in textarea:focus{border-color:rgba(126,180,255,.55)}
.divine-ops{display:flex;gap:4px;margin-top:5px}
.divine-ops button{
  flex:1;padding:5px 4px;border-radius:7px;cursor:pointer;font:inherit;font-size:10.5px;
  border:1px solid var(--line);background:var(--panel2);color:var(--dim);transition:.15s;
}
.divine-ops button:hover:not(:disabled){color:var(--ink);border-color:rgba(126,180,255,.45)}
.divine-ops button:disabled{opacity:.38;cursor:not-allowed}
.divine-ops button.on{color:#8fe8ff;border-color:rgba(127,230,255,.5);background:rgba(35,66,82,.5)}
.divine-ops button.primary{
  flex:1.2;color:#e6f4ff;font-weight:600;
  border-color:rgba(126,180,255,.38);
  background:linear-gradient(180deg,rgba(36,54,92,.75),rgba(24,36,62,.7));
}
.divine-foot{margin-top:6px;font-size:10px;color:var(--dim);opacity:.75}
html[data-theme="day"] .divine-msg.god .dm-tx{color:#16324a}
html[data-theme="day"] .divine-msg.me .dm-tx{background:rgba(13,143,131,.14)}
html[data-theme="day"] .divine-ops button.primary{color:#0d3a56;background:#e8f2fb}
html[data-theme="day"] .dm-mode{color:#0b6b7a;border-color:rgba(13,143,131,.35);background:rgba(13,143,131,.1)}
html[data-theme="day"] .dm-src-item{background:rgba(255,255,255,.65)}
html[data-theme="day"] .dm-src-item b{color:#16324a}
html[data-theme="day"] .dm-src-toggle:hover{color:#16324a}
html[data-theme="day"] .divine-mode button.on{color:#0b6b7a;border-color:rgba(13,143,131,.42);background:rgba(13,143,131,.12)}

/* ===== 右侧功能坞 =====
   原来「家里 / 交易 / 算计 / 神格 / 问命 / 入夜」全挤在右栏一条滚动区里，
   高度不够就互相压着，点的时候也分不清是哪个。现在收成一排图标钉在右上角，
   点哪个展开哪个，一次只开一个；再点一次、点空白处或 Esc 都收起。
   --dock-top 由 ActionDock.jsx 按顶栏实际高度写进来（顶栏会随屏宽换行变高）。 */
.act-dock{
  position:fixed;top:var(--dock-top,70px);right:12px;z-index:8;
  width:auto;align-items:flex-end;overflow:visible;
}
.dock-bar{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.dock-rail{
  display:flex;gap:4px;padding:4px;border-radius:12px;
  background:rgba(14,21,29,.82);border:1px solid var(--line);
  box-shadow:0 14px 30px -22px #000;backdrop-filter:blur(9px);
}
.dock-btn{
  width:46px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border:1px solid transparent;border-radius:9px;background:transparent;color:var(--dim);
  font:inherit;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
}
.dock-btn .di{font-size:15px;line-height:1}
.dock-btn .dl{font-size:9.5px;letter-spacing:.6px;line-height:1}
.dock-btn:hover{color:var(--ink);background:rgba(43,66,84,.5);border-color:rgba(79,209,197,.28)}
.dock-btn.on{color:#eafcfa;border-color:rgba(79,209,197,.55);background:#12323a}
.dock-btn:active{transform:scale(.96)}

/* 入夜倒计时：现在排在街道信息行里，跟着布局走，不会再压住图例 */
.street-night{flex:0 0 auto;display:flex;align-items:center;margin-left:2px}
.street-night .night{
  width:auto;margin:0;padding:2px 8px;min-height:0;border-radius:7px;
  font-size:10px;font-weight:600;line-height:1.6;letter-spacing:.2px;
}

.dock-pop{
  display:none;flex-direction:column;overflow:hidden;
  width:330px;max-width:calc(100vw - 88px);
  max-height:min(560px,calc(100vh - var(--dock-top,70px) - 90px));
  padding:10px 12px 12px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 22px 50px -26px #000;
}
.act-dock[data-open] .dock-pop{display:flex;animation:dockIn .14s ease-out}
@keyframes dockIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dock-sec{display:none;flex-direction:column;min-height:0}
.act-dock[data-open="home"] .dock-sec[data-sec="home"],
.act-dock[data-open="shop"] .dock-sec[data-sec="shop"],
.act-dock[data-open="ai"] .dock-sec[data-sec="ai"],
.act-dock[data-open="deity"] .dock-sec[data-sec="deity"],
.act-dock[data-open="divine"] .dock-sec[data-sec="divine"]{display:flex;flex:1 1 auto;min-height:0}
.dock-pop-hd{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex:0 0 auto}
.dock-pop-hd h3{margin:0;font-size:10.5px;letter-spacing:1.2px;color:var(--dim)}
.dock-x{
  margin-left:auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:7px;background:var(--panel2);color:var(--dim);
  font:inherit;font-size:14px;line-height:1;cursor:pointer;
}
.dock-x:hover{color:var(--ink);border-color:var(--teal)}
.dock-pop .act-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
.dock-pop .act-scroll::-webkit-scrollbar{width:6px}
.dock-pop .act-scroll::-webkit-scrollbar-thumb{background:#24333f;border-radius:3px}
.dock-pop .act-scroll{scrollbar-width:thin;scrollbar-color:#24333f transparent}
.dock-pop .home{margin-top:0}
html[data-theme="day"] .dock-rail{background:rgba(255,255,255,.9)}
html[data-theme="day"] .dock-btn:hover{background:#eef5fa;border-color:#b9cede}
html[data-theme="day"] .dock-btn.on{color:#0d3a56;background:#dff1ef;border-color:#7fc8c0}
html[data-theme="day"] .dock-pop .act-scroll{scrollbar-color:#c9d7e3 transparent}
html[data-theme="day"] .dock-pop .act-scroll::-webkit-scrollbar-thumb{background:#c9d7e3}

@media(max-width:760px){
  .act-dock{right:8px}
  .dock-rail{gap:2px;padding:3px;border-radius:11px}
  .dock-btn{width:42px;height:42px}
  .dock-btn .di{font-size:15px}
  .dock-pop{width:calc(100vw - 24px);max-width:calc(100vw - 24px);max-height:70vh}
  .street-night .night{font-size:9.5px;padding:2px 6px}
}

/* ===== 开局遮罩：赛博朋克家族聚会 =====
   配置要等一次网络往返，这期间给一屏会动的夜景，而不是一行灰字。
   整屏全是 DOM + CSS 动画画的，不加载任何图片：网慢的时候不会再多几个请求，
   也不占主线程。DOM 由 game.js 的 showBootMask() 拼出来，样式全在这里。 */
#bootMask{
  background:
    radial-gradient(120% 90% at 50% 112%, rgba(255,79,216,.20), transparent 62%),
    radial-gradient(90% 70% at 50% 110%, rgba(79,209,197,.20), transparent 60%),
    linear-gradient(180deg,#05070c 0%,#070c14 46%,#04060a 100%);
  color:#dbe6f5;
  font:14px/1.6 system-ui,sans-serif;
  letter-spacing:.12em;
}
.bp-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}

/* 两团霓虹雾，一冷一暖，压在地板两侧慢慢呼吸 */
.bp-glow{position:absolute;border-radius:50%;filter:blur(56px);opacity:.5}
.bp-glow.g1{left:-10vmin;bottom:4vmin;width:46vmin;height:46vmin;background:rgba(255,79,216,.55);animation:bpGlow 7s ease-in-out infinite}
.bp-glow.g2{right:-12vmin;bottom:2vmin;width:52vmin;height:52vmin;background:rgba(79,209,197,.5);animation:bpGlow 9s ease-in-out infinite reverse}
@keyframes bpGlow{50%{opacity:.22;transform:scale(1.12)}}

/* 霓虹招牌 */
.bp-sign{position:absolute;top:11%;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap}
.bp-sign b{
  display:block;font-size:clamp(18px,3.4vw,40px);font-weight:700;letter-spacing:.32em;
  color:#ffe9fb;
  text-shadow:0 0 6px #ff4fd8,0 0 22px rgba(255,79,216,.75),0 0 60px rgba(255,79,216,.35);
  animation:bpFlicker 7s steps(1) infinite;
}
.bp-sign span{
  display:block;margin-top:7px;font-size:clamp(9px,1.05vw,12px);letter-spacing:.52em;
  color:#8fe8ff;text-shadow:0 0 12px rgba(79,209,197,.85);
}
/* 招牌最下面一行：进化史点题，比上面两行更暗更小，不抢主标题 */
.bp-sign em{
  display:block;margin-top:9px;font-style:normal;
  font-size:clamp(8.5px,0.92vw,11px);letter-spacing:.44em;
  color:#c3b2f0;text-shadow:0 0 10px rgba(255,79,216,.5);
  animation:bpSlogan 5.5s ease-in-out infinite;
}
@keyframes bpSlogan{50%{opacity:.62}}
@keyframes bpFlicker{0%,95%,100%{opacity:1}96%{opacity:.5}97%{opacity:1}98%{opacity:.68}}

/* 透视地板：两组网格朝观众流动 */
.bp-floor{position:absolute;left:0;right:0;bottom:0;height:48%;overflow:hidden;perspective:420px;perspective-origin:50% 0}
.bp-grid{
  position:absolute;left:-30%;right:-30%;top:0;height:120%;
  background-image:
    repeating-linear-gradient(90deg, rgba(79,209,197,.34) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(0deg, rgba(255,79,216,.26) 0 1px, transparent 1px 54px);
  transform-origin:50% 0;
  transform:rotateX(64deg);
  animation:bpGrid 2.6s linear infinite;
  opacity:.9;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 100%);
}
@keyframes bpGrid{from{background-position:0 0}to{background-position:0 54px}}
.bp-horizon{
  position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(79,209,197,.9),rgba(255,79,216,.9),transparent);
  box-shadow:0 0 18px rgba(79,209,197,.65),0 0 42px rgba(255,79,216,.45);
}

/* 跳舞的剪影：头 / 身 / 双臂 / 双腿，全部是盒子拼的，只有轮廓发光 */
.bp-dancer{
  position:absolute;bottom:17%;left:var(--x);
  width:34px;height:88px;
  transform:translateX(-50%) scale(var(--s,1));
  transform-origin:50% 100%;
}
.bp-fig{position:absolute;inset:0;transform-origin:50% 100%;animation:bpDance 1.55s ease-in-out infinite;animation-delay:var(--d,0s)}
.bp-dancer i{
  position:absolute;display:block;background:#060a11;
  border:1px solid var(--c,rgba(79,209,197,.55));
  box-shadow:0 0 10px -2px var(--c,rgba(79,209,197,.55));
}
.bp-hd{left:50%;top:2px;width:15px;height:15px;margin-left:-7.5px;border-radius:50%}
.bp-bd{left:50%;top:17px;width:21px;height:34px;margin-left:-10.5px;border-radius:9px 9px 6px 6px}
.bp-ar{top:20px;width:5px;height:26px;border-radius:3px;transform-origin:50% 0}
.bp-ar.l{left:1px;animation:bpArmL 1.25s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.bp-ar.r{right:1px;animation:bpArmR 1.25s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.bp-leg{top:49px;width:6px;height:32px;border-radius:3px}
.bp-leg.l{left:8px;transform:rotate(3deg)}
.bp-leg.r{right:8px;transform:rotate(-3deg)}
@keyframes bpDance{
  0%,100%{transform:translateY(0) rotate(-3.5deg)}
  25%{transform:translateY(-3px) rotate(0deg)}
  50%{transform:translateY(-5px) rotate(3.5deg)}
  75%{transform:translateY(-2px) rotate(1deg)}
}
@keyframes bpArmL{from{transform:rotate(14deg)}to{transform:rotate(-28deg)}}
@keyframes bpArmR{from{transform:rotate(-14deg)}to{transform:rotate(28deg)}}

/* 喝酒的两位：右臂定期举杯，杯子和碰杯的亮点跟着手一起动
   类名带 bp- 前缀：游戏本体也有一整套 .toast 提示，直接叫 toast 会被它的 opacity:0 吃掉 */
.bp-dancer.bp-toast .bp-ar.r{animation:bpToast 2.8s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes bpToast{0%,55%{transform:rotate(20deg)}70%,88%{transform:rotate(-96deg)}100%{transform:rotate(20deg)}}
.bp-glass{
  position:absolute;right:-4px;top:35px;width:9px;height:13px;
  border-radius:2px 2px 3px 3px;
  border:1px solid rgba(255,209,121,.95);
  background:linear-gradient(180deg,rgba(255,220,150,.9),rgba(255,140,60,.6));
  box-shadow:0 0 14px rgba(255,190,90,.95);
  animation:bpGlass 2.8s ease-in-out infinite;animation-delay:var(--d,0s);
}
@keyframes bpGlass{
  0%,55%{transform:translate(0,0) rotate(0)}
  70%,88%{transform:translate(-15px,-23px) rotate(-18deg)}
  100%{transform:translate(0,0) rotate(0)}
}
.bp-spark{
  position:absolute;right:9px;top:9px;width:3px;height:3px;border-radius:50%;
  background:#fff;box-shadow:0 0 12px 4px rgba(255,214,140,.9);opacity:0;
  animation:bpSpark 2.8s ease-in-out infinite;animation-delay:var(--d,0s);
}
@keyframes bpSpark{
  0%,64%{opacity:0;transform:scale(.4)}
  72%{opacity:1;transform:scale(1.7)}
  82%{opacity:0;transform:scale(.6)}
  100%{opacity:0}
}

/* 星际：星点、行星、掠过的飞行器和 AI 全息球，把画面上半部分填满 */
.bp-space{position:absolute;left:0;right:0;top:0;height:58%;overflow:hidden;pointer-events:none}
.bp-space i{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:#dff0ff;box-shadow:0 0 6px rgba(170,215,255,.9);
  animation:bpTwinkle 3.6s ease-in-out infinite;
}
@keyframes bpTwinkle{50%{opacity:.25;transform:scale(.7)}}

.bp-planet{
  position:absolute;right:9%;top:8%;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#7de9ff,#2f6f9e 42%,#16233b 72%,#0a1020 100%);
  box-shadow:0 0 42px rgba(79,209,197,.32), inset -18px -20px 42px rgba(0,0,0,.7);
  opacity:.8;animation:bpPlanet 16s ease-in-out infinite;
}
.bp-planet::after{
  content:'';position:absolute;left:-32%;top:44%;width:164%;height:26%;
  border:1px solid rgba(143,232,255,.5);border-radius:50%;
  transform:rotate(-18deg);box-shadow:0 0 18px rgba(143,232,255,.35);
}
@keyframes bpPlanet{50%{transform:translateY(-9px)}}

.bp-craft{
  position:absolute;left:-12%;width:36px;height:9px;border-radius:4px 12px 12px 4px;
  background:linear-gradient(90deg,#0a1018,#12202b);
  border:1px solid rgba(79,209,197,.75);
  box-shadow:0 0 16px rgba(79,209,197,.5);
}
.bp-craft b{
  position:absolute;left:3px;top:50%;width:3px;height:3px;margin-top:-1.5px;
  border-radius:50%;background:#8fe8ff;box-shadow:0 0 8px #8fe8ff;
}
.bp-craft::after{
  content:'';position:absolute;right:100%;top:50%;margin-top:-1px;width:90px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,79,216,.8));
}
.bp-craft.c1{top:30%;animation:bpFly 14s linear infinite}
.bp-craft.c2{top:41%;width:26px;height:7px;animation:bpFly 19s linear infinite;animation-delay:-7s}
.bp-craft.c3{top:23%;width:18px;height:6px;opacity:.7;animation:bpFly 24s linear infinite;animation-delay:-15s}
@keyframes bpFly{
  0%{transform:translateX(0) translateY(0)}
  50%{transform:translateX(65vw) translateY(-2vh)}
  100%{transform:translateX(130vw) translateY(1vh)}
}

/* AI：一颗脉动的全息球，两道不同角度的光环慢慢转 */
.bp-ai{position:absolute;left:16%;top:33%;width:96px;height:96px;margin-left:-48px;animation:bpFloat 6s ease-in-out infinite}
.bp-ai-core{
  position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#e8fbff,#5fd8ea 45%,rgba(79,209,197,.15) 72%,transparent 74%);
  box-shadow:0 0 24px rgba(143,232,255,.75);
  animation:bpAiPulse 2.4s ease-in-out infinite;
}
.bp-ai-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(143,232,255,.55);border-radius:50%}
.bp-ai-ring.a{width:78px;height:78px;margin:-39px 0 0 -39px;box-shadow:0 0 12px rgba(143,232,255,.35);animation:bpRingA 7s linear infinite}
.bp-ai-ring.b{width:96px;height:96px;margin:-48px 0 0 -48px;border-color:rgba(255,79,216,.45);animation:bpRingB 9s linear infinite}
.bp-ai b{
  position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:6px;
  font-size:10px;letter-spacing:.4em;color:#8fe8ff;text-shadow:0 0 10px rgba(79,209,197,.9);
}
@keyframes bpRingA{from{transform:rotateX(68deg) rotateZ(0)}to{transform:rotateX(68deg) rotateZ(360deg)}}
@keyframes bpRingB{from{transform:rotateY(70deg) rotateZ(360deg)}to{transform:rotateY(70deg) rotateZ(0)}}
@keyframes bpAiPulse{50%{transform:scale(1.18);opacity:.85}}
@keyframes bpFloat{50%{transform:translateY(-10px)}}

/* 悬停的机器人：方脑袋、两只亮眼、脚下一团推进光 */
.bp-robot{
  position:absolute;bottom:16%;left:var(--x);width:36px;height:64px;
  transform:translateX(-50%) scale(var(--s,1));transform-origin:50% 100%;
  animation:bpHover 3.2s ease-in-out infinite;animation-delay:var(--d,0s);
}
.bp-robot i{
  position:absolute;display:block;background:#070c13;
  border:1px solid rgba(143,232,255,.6);box-shadow:0 0 12px -2px rgba(143,232,255,.55);
}
.bp-rh{left:50%;top:0;width:20px;height:15px;margin-left:-10px;border-radius:5px}
.bp-rh::before,.bp-rh::after{
  content:'';position:absolute;top:5px;width:4px;height:3px;border-radius:1px;
  background:#8fe8ff;box-shadow:0 0 8px #8fe8ff;
}
.bp-rh::before{left:4px}
.bp-rh::after{right:4px}
.bp-rb{left:50%;top:18px;width:24px;height:26px;margin-left:-12px;border-radius:7px}
.bp-ra{top:20px;width:5px;height:20px;border-radius:3px}
.bp-ra.l{left:-1px;animation:bpArmL 2.4s ease-in-out infinite alternate}
.bp-ra.r{right:-1px;animation:bpArmR 2.4s ease-in-out infinite alternate}
.bp-rj{
  left:50%;bottom:-8px;width:10px;height:10px;margin-left:-5px;border:0;border-radius:50% !important;
  background:radial-gradient(circle,rgba(143,232,255,.95),rgba(79,209,197,0) 70%) !important;
  box-shadow:none !important;animation:bpJet .9s ease-in-out infinite;
}
@keyframes bpHover{50%{transform:translateX(-50%) translateY(-6px) scale(var(--s,1))}}
@keyframes bpJet{50%{opacity:.35;transform:scaleY(1.5)}}
/* 后排机器人：站得更高、颜色更暗、轻微虚化，和前排拉开纵深 */
.bp-robot.bk{bottom:var(--y,33%);opacity:.72;filter:blur(.45px);animation-duration:4.6s}
.bp-robot.bk i{
  border-color:rgba(143,232,255,.48);
  box-shadow:0 0 8px -3px rgba(143,232,255,.5);
}

/* Token 波纹：从人群脚下往外扩，一圈冷一圈暖 */
.bp-token{position:absolute;left:50%;bottom:48%;width:0;height:0;pointer-events:none}
.bp-token i{
  position:absolute;left:50%;top:50%;width:50px;height:16px;margin:-8px 0 0 -25px;
  border:1px solid rgba(79,209,197,.6);border-radius:50%;opacity:0;
  animation:bpRipple 4.5s ease-out infinite;
}
.bp-token i:nth-child(2){border-color:rgba(255,79,216,.5);animation-delay:1.5s}
.bp-token i:nth-child(3){animation-delay:3s}
@keyframes bpRipple{
  0%{transform:scale(.25);opacity:0}
  12%{opacity:.8}
  100%{transform:scale(8);opacity:0}
}
/* 环心往天上打一束传输光，配合外扩的波纹读作「Token 正在上链」 */
.bp-token::before{
  content:'';position:absolute;left:50%;top:50%;width:70px;height:22px;margin:-11px 0 0 -35px;
  border-radius:50%;background:radial-gradient(ellipse,rgba(143,232,255,.35),transparent 70%);filter:blur(4px);
}
.bp-token::after{
  content:'';position:absolute;left:50%;top:50%;width:2px;height:150px;margin:-150px 0 0 -1px;
  background:linear-gradient(180deg,rgba(143,232,255,0),rgba(143,232,255,.55));
  transform-origin:50% 100%;filter:blur(.6px);
  animation:bpBeam 4.5s ease-out infinite;
}
@keyframes bpBeam{
  0%{opacity:0;transform:scaleY(.5)}
  20%{opacity:.9}
  70%{opacity:.22}
  100%{opacity:0;transform:scaleY(1.15)}
}

/* 扫描线 + 暗角，让整屏更像一块藏在角落里的显示器 */
.bp-scan{
  position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
  animation:bpScan 6s linear infinite;
}
@keyframes bpScan{from{transform:translateY(0)}to{transform:translateY(3px)}}

/* 载入文案：三个点依次亮，下面一条来回扫的进度光带 */
.bp-load{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);width:min(320px,76vw);text-align:center}
.bp-tip{font-size:12.5px;letter-spacing:.28em;color:#cfe0f2;text-shadow:0 0 12px rgba(79,209,197,.45)}
.bp-ell i{font-style:normal;animation:bpDot 1.2s infinite}
.bp-ell i:nth-child(2){animation-delay:.16s}
.bp-ell i:nth-child(3){animation-delay:.32s}
@keyframes bpDot{0%,60%,100%{opacity:.18}30%{opacity:1}}
.bp-bar{position:relative;margin:10px auto 0;height:2px;border-radius:2px;background:rgba(120,160,200,.18);overflow:hidden}
.bp-bar i{
  position:absolute;top:0;left:0;width:38%;height:100%;border-radius:2px;
  background:linear-gradient(90deg,transparent,#4fd1c5,#ff4fd8,transparent);
  animation:bpBar 1.5s ease-in-out infinite;
}
@keyframes bpBar{from{transform:translateX(-110%)}to{transform:translateX(300%)}}
.bp-sub{margin-top:8px;font-size:10.5px;letter-spacing:.34em;color:#6d8199}

@media (max-width:560px){
  .bp-sign{top:14%}
  .bp-sign b{letter-spacing:.2em}
  .bp-sign span{letter-spacing:.32em}
  .bp-sign em{letter-spacing:.26em}
  /* 窄屏这架小飞行器的尾迹正好横穿招牌，先藏掉 */
  .bp-craft.c3{display:none}
  /* 窄屏把行星收小并推到右上角，别压住招牌；人和机器人整体抬高，给底部文案让位 */
  .bp-planet{width:72px;height:72px;right:3%;top:4%;opacity:.62}
  .bp-floor{height:44%}
  .bp-dancer,.bp-robot{bottom:26%}
  .bp-token{bottom:44%}
  .bp-load{bottom:2.5%}
}
/* 系统里勾了「减少动态」就只留一张静态夜景 */
@media (prefers-reduced-motion:reduce){
  #bootMask .bp-scene *,#bootMask .bp-load *{animation:none!important}
  .bp-glass,.bp-spark{opacity:0}
}