/* ===========================================================
   仕途模拟 G1.0 · 游戏版视觉层
   设计基调：场景为舞台，界面为浮层；首屏只留"戏"，信息收进二级页。
   =========================================================== */
:root{
  --ink:#0c1016;
  --glass:rgba(16,20,27,.60);
  --glass-2:rgba(16,20,27,.78);
  --glass-line:rgba(255,255,255,.16);
  --glass-line-2:rgba(255,255,255,.09);
  --gold:#d9ab4a; --gold-2:#f2dc9f; --gold-deep:#8a6a1e;
  --paper:#fff; --paper-2:#f5f6f8; --paper-3:#eef0f4;
  --tx:#1a1f27; --tx2:#5c6572; --tx3:#8d96a3;
  --line:#e6e9ee; --line-2:#f0f2f5;
  --pri:#1c6f63; --pri-soft:#e8f3f0; --pri-line:#bcdcd5;
  --bad:#c0392b; --bad-soft:#fdeeec;
  --ok:#12876a; --ok-soft:#e9f7f2;
  --warn:#c9862a; --warn-soft:#fdf4e6;
  --r:16px;
  --sh:0 1px 2px rgba(16,24,40,.04),0 6px 18px rgba(16,24,40,.06);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;padding:0;height:100%}
body{
  background:#0d1116;color:var(--tx);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none;
}
#app{max-width:520px;margin:0 auto;position:relative;height:100dvh;overflow:hidden;background:var(--paper-2)}
.screen{display:none}
.screen.active{display:block}

/* ============ 创建角色 ============ */
#screen-create{height:100dvh;overflow-y:auto;background:var(--paper-2)}
.create-wrap{padding:34px 20px 44px}
.brand{text-align:center;margin-bottom:22px}
.brand-title{font-size:30px;font-weight:700;letter-spacing:5px}
.brand-title span{color:var(--pri)}
.brand-sub{margin-top:8px;color:var(--tx3);font-size:12.5px;letter-spacing:1.5px}
.card{background:var(--paper);border-radius:var(--r);box-shadow:var(--sh);padding:16px;margin-bottom:13px;border:1px solid var(--line-2)}
.card-hd{font-size:13px;font-weight:600;color:var(--tx2);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.hd-note{font-weight:400;color:var(--tx3);font-size:12px}
.field{margin-bottom:15px}
.field:last-child{margin-bottom:2px}
.field label{display:block;font-size:12px;color:var(--tx3);margin-bottom:7px}
input[type=text]{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:15px;background:#fbfbfc;outline:none;font-family:inherit}
input[type=text]:focus{border-color:var(--pri);background:#fff}
select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:#fff;font-family:inherit}
.seg{display:flex;gap:7px}
.seg-btn{flex:1;padding:9px;border:1px solid var(--line);background:#fbfbfc;border-radius:10px;font-size:14px;color:var(--tx2);cursor:pointer;font-family:inherit}
.seg-btn.active{background:var(--pri-soft);border-color:var(--pri);color:var(--pri);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{padding:8px 13px;border:1px solid var(--line);background:#fbfbfc;border-radius:20px;font-size:13px;color:var(--tx2);cursor:pointer;font-family:inherit}
.chip.active{background:var(--pri-soft);border-color:var(--pri);color:var(--pri);font-weight:600}
.chip.locked{opacity:.55;cursor:not-allowed;background:#f0f1f3}
.btn-primary{width:100%;padding:15px;background:var(--pri);color:#fff;border:none;border-radius:13px;font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;box-shadow:0 6px 18px rgba(28,111,99,.28)}
.btn-primary:active{transform:scale(.985)}
.btn-ghost{width:100%;padding:12px;background:transparent;color:var(--tx2);border:1px solid var(--line);border-radius:12px;font-size:14px;margin-top:10px;cursor:pointer;font-family:inherit}
.saves{margin-top:16px}
.save-item{background:var(--paper);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;margin-bottom:8px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.save-item .si-l{font-size:14px;font-weight:600}
.save-item .si-r{font-size:12px;color:var(--tx3)}

/* ============ 游戏主屏：场景为舞台 ============ */
#screen-game{position:relative;height:100dvh;overflow:hidden}
.stage{position:absolute;inset:0;background:#0d1116}
.stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;transition:opacity .55s ease}
.stage-img.swap{opacity:0}
.stage-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,11,16,.62) 0%,rgba(8,11,16,.06) 26%,rgba(8,11,16,.10) 48%,rgba(8,11,16,.62) 74%,rgba(8,11,16,.90) 100%)}
.stage-cap{position:absolute;left:16px;right:16px;top:74px;z-index:4;color:rgba(255,255,255,.82);
  font-size:12px;letter-spacing:.6px;text-shadow:0 1px 6px rgba(0,0,0,.55);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stage-cap .cap-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}

/* ============ HUD ============ */
.hud{position:absolute;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top) + 12px) 14px 0;
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;z-index:6}
.avatar-btn{display:flex;align-items:center;gap:9px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-line);border-radius:999px;padding:4px 15px 4px 4px;cursor:pointer;font-family:inherit;transition:transform .18s ease}
.avatar-btn:active{transform:scale(.96)}
.av-circle{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#f0dda8,#c69b3c);color:#3d2f0d;font-size:16px;font-weight:700;
  box-shadow:0 0 0 2px rgba(255,255,255,.22),inset 0 -3px 8px rgba(0,0,0,.18)}
.av-meta{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.av-meta b{color:#fff;font-size:13.5px;font-weight:600;letter-spacing:.4px}
.av-meta i{color:var(--gold-2);font-size:10.5px;font-style:normal;letter-spacing:.5px}
.hud-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.hud-chip{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-line);border-radius:999px;padding:5px 12px;color:#fff;font-size:12px;font-weight:600;
  letter-spacing:.3px;white-space:nowrap}
.hud-chip.gold{color:var(--gold-2)}
.hud-chip.ap{display:flex;align-items:center;gap:5px}
.ap-pip{width:5px;height:5px;border-radius:50%;background:var(--gold);display:inline-block}
.ap-pip.off{background:rgba(255,255,255,.25)}
.hud-icon{width:34px;height:34px;border-radius:999px;background:var(--glass);backdrop-filter:blur(16px);
  border:1px solid var(--glass-line);color:#fff;cursor:pointer;position:relative;font-family:inherit;
  display:flex;align-items:center;justify-content:center;font-size:15px}
.hud-icon .badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;border-radius:8px;background:var(--bad);
  color:#fff;font-size:10px;line-height:16px;text-align:center;padding:0 4px;font-weight:700;box-shadow:0 0 0 2px rgba(13,17,22,.7)}
.hud-icon .badge.hide{display:none}

/* ============ 待办气泡 ============ */
.bubbles{position:absolute;left:14px;right:14px;bottom:92px;z-index:5;display:flex;flex-direction:column;gap:9px;pointer-events:none}
.bub{pointer-events:auto;position:relative;text-align:left;font-family:inherit;cursor:pointer;
  background:var(--glass-2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--glass-line);border-radius:14px;padding:10px 13px;color:#fff;
  display:flex;align-items:center;gap:11px;
  animation:bubIn .46s cubic-bezier(.18,.9,.24,1) backwards;transition:transform .16s ease,border-color .2s ease}
.bub:active{transform:scale(.982)}
.bub .b-ico{width:32px;height:32px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:15px;background:rgba(255,255,255,.10);border:1px solid var(--glass-line-2)}
.bub .b-main{flex:1;min-width:0}
.bub .b-t{font-size:13.5px;font-weight:600;letter-spacing:.3px;display:flex;align-items:center;gap:6px}
.bub .b-d{font-size:11.5px;color:rgba(255,255,255,.62);margin-top:2px;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.bub .b-arrow{color:rgba(255,255,255,.38);font-size:15px;flex:none}
/* ⚠️ 气泡的修饰类一律带 b- 前缀。曾用裸 .act/.task，与任务抽屉里的
   .actgrid .act / .task 撞名，导致气泡背景与内边距被抽屉样式覆盖
   （白底白字整颗看不见）。命名空间化后彻底隔离。 */
.bub.b-evt{border-color:rgba(217,171,74,.44)}
.bub.b-evt .b-ico{background:rgba(217,171,74,.18);border-color:rgba(217,171,74,.36)}
.bub.b-risk{border-color:rgba(192,57,43,.5)}
.bub.b-risk .b-ico{background:rgba(192,57,43,.22);border-color:rgba(192,57,43,.42)}
.bub.b-from-echo{border-color:rgba(217,171,74,.6);box-shadow:0 0 0 1px rgba(217,171,74,.18),0 8px 26px rgba(217,171,74,.14)}
.b-pulse{animation:bubIn .46s cubic-bezier(.18,.9,.24,1) backwards,pulseGlow 2.4s ease-in-out infinite .6s}
@keyframes bubIn{from{opacity:0;transform:translateY(18px) scale(.965)}to{opacity:1;transform:none}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(217,171,74,0)}50%{box-shadow:0 0 0 3px rgba(217,171,74,.16)}}
.bub-more{pointer-events:auto;align-self:flex-start;background:rgba(255,255,255,.10);border:1px solid var(--glass-line-2);
  color:rgba(255,255,255,.78);border-radius:999px;padding:4px 12px;font-size:11.5px;font-family:inherit;cursor:pointer}

/* ============ 结算按钮 ============ */
.stage-foot{position:absolute;left:14px;right:14px;bottom:calc(env(safe-area-inset-bottom) + 16px);z-index:6;display:flex;gap:10px}
.btn-settle{flex:1;height:52px;border-radius:15px;border:1px solid rgba(217,171,74,.5);cursor:pointer;font-family:inherit;
  background:linear-gradient(160deg,rgba(217,171,74,.96),rgba(176,131,35,.96));color:#231a05;
  font-size:16px;font-weight:700;letter-spacing:3px;
  box-shadow:0 8px 26px rgba(217,171,74,.28),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-settle:active{transform:scale(.985)}
.btn-settle[disabled]{opacity:.55;cursor:default}

/* ============ 抽屉 ============ */
.sheet{position:fixed;top:0;bottom:0;left:0;right:0;max-width:520px;margin:0 auto;z-index:70;
  background:var(--paper-2);display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .34s cubic-bezier(.2,.9,.25,1);box-shadow:0 -10px 40px rgba(0,0,0,.3)}
.sheet.open{transform:none}
.sheet-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;
  padding:calc(env(safe-area-inset-top) + 14px) 16px 13px;background:var(--paper);border-bottom:1px solid var(--line-2)}
.sheet-title{font-size:17px;font-weight:700;letter-spacing:1px}
.sheet-close{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--paper-2);
  color:var(--tx2);font-size:16px;cursor:pointer;font-family:inherit;line-height:1}
.sheet-body{flex:1;overflow-y:auto;padding:14px 14px calc(env(safe-area-inset-bottom) + 28px);-webkit-overflow-scrolling:touch}

/* ============ 身份卡 ============ */
.idcard{position:relative;border-radius:18px;padding:18px;color:#fff;overflow:hidden;margin-bottom:14px;
  background:linear-gradient(150deg,#1f3a37,#16211f 60%,#241d10);border:1px solid rgba(217,171,74,.22)}
.idcard::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(217,171,74,.20),transparent 68%)}
.idc-top{display:flex;align-items:center;gap:13px;position:relative}
.idc-av{width:58px;height:58px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#f2dfa9,#c69b3c);color:#3d2f0d;font-size:24px;font-weight:700;
  box-shadow:0 0 0 3px rgba(217,171,74,.25),inset 0 -4px 10px rgba(0,0,0,.2)}
.idc-name{font-size:20px;font-weight:700;letter-spacing:2px;display:flex;align-items:center;gap:8px}
.idc-badge{font-size:11px;font-weight:600;color:#2a1f07;background:linear-gradient(160deg,#f2dc9f,#d9ab4a);padding:2px 9px;border-radius:6px;letter-spacing:.5px}
.idc-sub{font-size:12px;color:rgba(255,255,255,.62);margin-top:4px;letter-spacing:.4px}
.idc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;position:relative}
.idc-cell{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:9px 11px}
.idc-cell .k{font-size:10.5px;color:rgba(255,255,255,.55);letter-spacing:.6px}
.idc-cell .v{font-size:15px;font-weight:700;margin-top:3px;letter-spacing:.4px}
.idc-cell .v.gold{color:var(--gold-2)}

/* ============ 折叠段 ============ */
.sec{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);margin-bottom:11px;overflow:hidden}
.sec-hd{display:flex;align-items:center;gap:9px;padding:14px 15px;cursor:pointer;font-family:inherit;
  width:100%;background:none;border:none;text-align:left}
.sec-hd .s-ico{width:26px;height:26px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--pri-soft);color:var(--pri);font-size:13px}
.sec-hd .s-t{flex:1;font-size:14.5px;font-weight:600;letter-spacing:.5px}
.sec-hd .s-note{font-size:11.5px;color:var(--tx3);font-weight:400}
.sec-hd .s-arw{color:var(--tx3);font-size:12px;transition:transform .25s ease}
.sec.open .sec-hd .s-arw{transform:rotate(90deg)}
.sec-body{display:none;padding:0 15px 15px}
.sec.open .sec-body{display:block;animation:secIn .26s ease}
@keyframes secIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ============ 参数卡 ============ */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pcard{background:var(--paper-2);border:1px solid var(--line-2);border-radius:12px;padding:10px 12px}
.pcard .p-h{display:flex;justify-content:space-between;align-items:baseline}
.pcard .p-n{font-size:12px;color:var(--tx2);letter-spacing:.5px}
.pcard .p-v{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.pcard .p-bar{height:4px;border-radius:3px;background:var(--line);margin-top:7px;overflow:hidden}
.pcard .p-bar i{display:block;height:100%;border-radius:3px;background:var(--pri);transition:width .5s cubic-bezier(.2,.9,.25,1)}
.pcard.risk .p-bar i{background:var(--bad)}
.pcard.risk .p-v{color:var(--bad)}
.pcard.health .p-bar i{background:var(--ok)}
.pcard.health .p-v{color:var(--ok)}
.pcard.gold .p-v{color:var(--gold-deep)}
.pcard.wide{grid-column:1 / -1}

/* ============ 通用条目 ============ */
.kv{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid var(--line-2);font-size:14px}
.kv:first-child{border-top:none}
.kv span{color:var(--tx2)}
.bar{height:8px;background:var(--line-2);border-radius:5px;overflow:hidden;margin-bottom:12px}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--pri),#5aa79a);border-radius:5px;transition:width .5s}
.gate{margin-top:10px;padding:10px 12px;background:var(--paper-2);border-radius:10px;font-size:12px;color:var(--tx2);line-height:1.6}
.gate.ok{background:var(--ok-soft);color:#0c6b53}
.spark{display:flex;align-items:flex-end;gap:5px;height:64px}
.spark div{flex:1;background:var(--pri-soft);border-radius:4px 4px 0 0;position:relative;min-height:4px}
.spark div b{position:absolute;bottom:-17px;left:0;right:0;text-align:center;font-size:10px;color:var(--tx3);font-weight:400}
.hist{border-top:1px solid var(--line-2);padding:9px 0;font-size:13px;display:flex;gap:10px}
.hist:first-child{border-top:none}
.hist .h-d{color:var(--tx3);font-size:12px;white-space:nowrap;flex:none}
.empty{text-align:center;color:var(--tx3);font-size:13px;padding:20px 0}

/* 关系 */
.npc{padding:11px 0;border-top:1px solid var(--line-2)}
.npc:first-child{border-top:none}
.npc .n-t{display:flex;align-items:center;gap:8px;font-size:14px}
.npc .n-t b{font-weight:600}
.npc .n-stance{font-size:10.5px;padding:1px 7px;border-radius:5px;font-weight:600;letter-spacing:.4px}
.npc .n-stance.support{background:var(--ok-soft);color:var(--ok)}
.npc .n-stance.neutral{background:var(--paper-3);color:var(--tx2)}
.npc .n-stance.hostile{background:var(--bad-soft);color:var(--bad)}
.npc .n-r{font-size:11px;color:var(--tx3);margin-left:auto}
.npc .n-d{font-size:12px;color:var(--tx3);margin-top:4px;line-height:1.5}
.npc .n-stats{margin:10px 0 6px;display:flex;flex-direction:column;gap:6px}
.npc .ns{display:flex;align-items:center;gap:8px;font-size:12px}
.npc .ns span{color:var(--tx3);width:28px;flex:0 0 auto}
.npc .ns-bar{flex:1;height:6px;background:var(--line-2);border-radius:3px;overflow:hidden}
.npc .ns-bar i{display:block;height:100%;border-radius:3px}
.npc .ns b{width:28px;text-align:right;font-size:12px}
.npc .n-ledger{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.npc .lg{font-size:11px;padding:3px 9px;border-radius:7px;background:var(--paper-2);border:1px solid var(--line-2);color:var(--tx2)}
.npc .lg.owe{background:var(--warn-soft);border-color:#f0dcb6;color:#8a6212}
.npc .n-mems{margin-top:9px;border-top:1px dashed var(--line);padding-top:8px}
.npc .n-mems-hd{font-size:11px;color:var(--tx3);margin-bottom:4px}
.npc .n-mem{font-size:12px;color:var(--tx2);padding:3px 0;line-height:1.5}
.npc .nm-d{color:var(--tx3);margin-right:6px;font-size:11px}

/* 成就 */
.ach{display:flex;gap:9px;padding:9px 0;border-top:1px solid var(--line-2);align-items:center}
.ach:first-child{border-top:none}
.ach .dot{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none}
.ach.on .dot{background:var(--gold)}
.ach .a-t{font-size:13px;font-weight:600}
.ach .a-d{font-size:11px;color:var(--tx3)}
.ach.off{opacity:.45}

/* 任务 / 事件 */
.task{border-top:1px solid var(--line-2);padding:12px 0}
.task:first-child{border-top:none}
.task .t-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.task .t-t{font-size:14px;font-weight:600;flex:1}
.task .t-diff{font-size:11px;padding:2px 7px;border-radius:5px;background:var(--paper-3);color:var(--tx2);white-space:nowrap}
.task .t-d{font-size:12px;color:var(--tx3);margin-top:4px;line-height:1.5}
.task .t-b{margin-top:9px;display:flex;align-items:center;gap:10px}
.task .t-why{font-size:12px;color:var(--warn);margin-top:6px;line-height:1.5}
.rate{flex:1;height:5px;background:var(--line-2);border-radius:3px;overflow:hidden}
.rate i{display:block;height:100%;background:var(--ok);border-radius:3px}
.rate-t{font-size:12px;color:var(--tx2);white-space:nowrap}
.mini{padding:7px 15px;border-radius:9px;border:1px solid var(--pri);background:var(--pri-soft);color:var(--pri);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.mini.fail{border-color:#f3d2d2;background:var(--bad-soft);color:var(--bad)}
.mini.done{border-color:var(--line);background:var(--paper-2);color:var(--tx3);cursor:default}
.actgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
/* ⚠️ 必须限定在 .actgrid 内：.act 是个过于通用的类名，曾与首页待办气泡的
   .bub.act 撞名，导致气泡背景被这里的浅色 #fbfbfc 覆盖、而文字仍是 .bub 的
   白色 → 白底白字整颗气泡"消失"。作用域化后不再可能冲突。 */
.actgrid .act{border:1px solid var(--line);background:#fbfbfc;border-radius:12px;padding:12px;cursor:pointer;text-align:left;font-family:inherit}
.actgrid .act:active{background:var(--pri-soft);border-color:var(--pri-line)}
.actgrid .act[disabled]{opacity:.4;cursor:not-allowed}
.actgrid .act .ac-n{font-size:14px;font-weight:600}
.actgrid .act .ac-d{font-size:11px;color:var(--tx3);margin-top:3px;line-height:1.4}

/* 纪事卡 */
.chronicle{border-radius:15px;padding:14px 15px;margin-bottom:13px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#fbfaf6,#f3efe4);border:1px solid #e8dfc8}
.chronicle .ch-hd{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--gold-deep);letter-spacing:.8px;font-weight:600}
.chronicle .ch-title{font-size:16px;font-weight:700;margin:8px 0 6px;letter-spacing:1px}
.chronicle .ch-text{font-size:13.5px;line-height:1.85;color:#43403a}
.chronicle .ch-hl{margin-top:11px;border-top:1px dashed #e0d6bd;padding-top:9px}
.chronicle .ch-hl div{font-size:12px;color:#6d6759;line-height:1.7}
.chronicle.tone-bad{background:linear-gradient(150deg,#fdf8f7,#f7ecea);border-color:#eed6d2}
.chronicle.tone-tense{background:linear-gradient(150deg,#f6f6f7,#eeeef0);border-color:#dcdde1}
.chronicle.tone-warm{background:linear-gradient(150deg,#fdf9f2,#f9f0e0);border-color:#efdfc4}
.chronicle.tone-good{background:linear-gradient(150deg,#f7fbf6,#eef6ec);border-color:#d8e9d4}

/* 伏笔 */
.echo-item{display:flex;gap:9px;padding:9px 0;border-top:1px solid var(--line-2);font-size:12.5px;align-items:flex-start}
.echo-item:first-child{border-top:none}
.echo-item .e-ico{color:var(--gold-deep);flex:none}
.echo-item .e-tx{color:var(--tx2);line-height:1.6;flex:1}
.echo-item .e-when{color:var(--tx3);font-size:11.5px;white-space:nowrap}

/* 模态 */
.modal{position:fixed;inset:0;background:rgba(10,13,18,.62);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;z-index:90;padding:0;animation:fadeIn .2s ease}
.modal.center{align-items:center;padding:22px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{background:var(--paper);border-radius:22px 22px 0 0;padding:22px 20px calc(env(safe-area-inset-bottom) + 24px);
  width:100%;max-width:520px;max-height:88dvh;overflow-y:auto;animation:sheetUp .3s cubic-bezier(.2,.9,.25,1)}
.modal.center .modal-box{border-radius:20px;padding:22px 20px 24px}
@keyframes sheetUp{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
.modal-type{font-size:11px;color:var(--pri);font-weight:700;letter-spacing:1.5px}
.modal-echo{margin:11px 0 0;padding:10px 12px;border-radius:11px;background:var(--warn-soft);
  border:1px solid #f0dcb6;font-size:12.5px;color:#8a6212;line-height:1.65}
.modal-title{font-size:20px;font-weight:700;margin:7px 0 12px;letter-spacing:1px}
.modal-body{font-size:14.5px;line-height:1.85;color:var(--tx2);margin-bottom:18px}
.modal-choices{display:flex;flex-direction:column;gap:10px}
.choice{padding:14px 15px;border:1px solid var(--line);border-radius:13px;background:#fbfbfc;font-size:14px;
  text-align:left;cursor:pointer;font-family:inherit;line-height:1.55;transition:all .16s ease}
.choice:active{transform:scale(.99)}
.choice[disabled]{opacity:.45;cursor:not-allowed}
.choice.pivotal{border-color:var(--gold);background:linear-gradient(160deg,#fffdf6,#fbf4e2)}
.choice .c-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.6px;padding:1px 7px;border-radius:5px;margin-left:8px;vertical-align:middle}
.choice.pivotal .c-tag{background:var(--gold);color:#33260a}

/* 结局 */
.end-title{font-size:24px;font-weight:700;text-align:center;letter-spacing:2px}
.end-name{text-align:center;color:var(--gold-deep);font-size:13px;margin-top:6px;font-weight:600}
.end-text{font-size:14px;line-height:1.9;color:var(--tx2);margin:16px 0}
.end-story{margin:12px 0 4px}
.story-line{background:var(--paper-2);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;margin-bottom:10px;text-align:left}
.story-line .sl-hd{font-size:13px;color:var(--pri);margin-bottom:4px}
.story-line .sl-tx{font-size:13px;color:var(--tx2);line-height:1.7}
.end-verdict{font-size:13px;color:var(--tx2);font-style:italic;margin:8px 0 4px}
.end-tl-wrap{margin:12px 0 4px;text-align:left}
.end-tl-hd{font-size:13px;font-weight:700;margin-bottom:8px}
.end-tl{max-height:220px;overflow-y:auto;border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;background:var(--paper-2)}
.tl-item{display:flex;gap:8px;align-items:baseline;padding:5px 0;border-bottom:1px dashed var(--line-2);font-size:12px}
.tl-item:last-child{border-bottom:none}
.tl-date{color:var(--tx3);white-space:nowrap}
.tl-tx{color:var(--tx2);line-height:1.5}
.end-stats{background:var(--paper-2);border-radius:12px;padding:13px 15px;font-size:13px;line-height:1.95;margin:14px 0}
.end-stats div{display:flex;justify-content:space-between}
.end-stats span{color:var(--tx3)}
.end-kc{margin:14px 0}
.kc-hd{font-size:13px;font-weight:700;margin-bottom:8px}
.kc-item{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:6px 0;border-bottom:1px dashed var(--line)}
.kc-date{color:var(--tx3);flex:none}
.kc-tag{flex:none;font-size:11px;padding:1px 8px;border-radius:10px;font-weight:600}
.kc-tag.t-career{background:#e8f0ff;color:#2b5fd9}
.kc-tag.t-family{background:#e6f7ef;color:#0a9d58}
.kc-tag.t-help{background:#fff4e0;color:#c47b10}
.share-card{background:linear-gradient(150deg,#fbfaf6,#f1ece0);border-radius:14px;padding:18px;margin-bottom:14px;border:1px solid #e8dfc8;font-size:14px;line-height:1.85}
.share-card .s-title{font-size:18px;font-weight:700;margin-bottom:6px}
.share-card .s-sub{color:var(--tx2);font-size:13px;margin-bottom:12px}
.share-card .s-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line-2)}
.share-card .s-tl{background:transparent;color:var(--tx2);padding:0;font-size:12px;white-space:pre-wrap;margin-bottom:10px;font-family:inherit}
.lb-section{margin-bottom:14px}
.lb-hd{font-size:13px;font-weight:600;color:var(--tx2);margin-bottom:8px}
.lb-item{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.lb-item:first-child{font-weight:600;color:var(--gold-deep)}

/* 教程 */
.tutor{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;justify-content:flex-end}
.tutor-mask{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.tutor-card{position:relative;background:var(--paper);border-radius:20px 20px 0 0;padding:22px 20px calc(env(safe-area-inset-bottom) + 26px);box-shadow:0 -8px 30px rgba(0,0,0,.2);animation:sheetUp .28s ease;max-width:520px;margin:0 auto;width:100%}
.tutor-step{font-size:12px;color:var(--pri);font-weight:700;margin-bottom:6px}
.tutor-title{font-size:18px;font-weight:700;margin-bottom:10px}
.tutor-body{font-size:14px;color:var(--tx2);line-height:1.75;margin-bottom:18px}
.tutor-actions{display:flex;gap:10px}
.tutor-actions .btn-primary{flex:1;margin-top:0}
.tutor-actions .btn-ghost{flex:1;margin-top:0}
.tutor-highlight{position:relative;z-index:101;box-shadow:0 0 0 4px rgba(217,171,74,.6),0 8px 30px rgba(217,171,74,.3);border-radius:14px;animation:tutorPulse 1.6s infinite}
@keyframes tutorPulse{0%,100%{box-shadow:0 0 0 4px rgba(217,171,74,.55)}50%{box-shadow:0 0 0 7px rgba(217,171,74,.28)}}

/* toast */
.toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%);z-index:120;background:rgba(18,22,29,.94);
  color:#fff;padding:11px 19px;border-radius:12px;font-size:13px;max-width:82%;text-align:center;line-height:1.6;
  box-shadow:0 8px 26px rgba(0,0,0,.28);animation:toastIn .26s ease}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.toast.good{border:1px solid rgba(18,135,106,.5)}
.toast.bad{border:1px solid rgba(192,57,43,.5)}

/* 职级难度调节 */
.subbar{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 12px) 14px 12px;background:var(--paper);border-bottom:1px solid var(--line-2);position:sticky;top:0;z-index:20}
.sb-back{background:none;border:none;color:var(--pri);font-size:14px;cursor:pointer;padding:4px 2px;font-family:inherit}
.sb-title{font-size:16px;font-weight:700}
.sb-act{background:none;border:none;color:var(--tx3);font-size:13px;cursor:pointer;font-family:inherit}
#screen-tuning{height:100dvh;overflow-y:auto;background:var(--paper-2);display:none}
#screen-tuning.active{display:block}
#tn-main{padding:14px 14px 40px}
.tn-note{font-size:12px;line-height:1.7;color:var(--tx3);margin-top:10px}
.tn-row{display:flex;align-items:center;gap:12px;font-size:14px}
.tn-row span{width:70px;color:var(--tx2);flex-shrink:0}
.tn-row b{width:56px;text-align:right;font-variant-numeric:tabular-nums;color:var(--pri);font-size:13px}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:3px;background:var(--line);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--pri);box-shadow:0 1px 4px rgba(16,24,40,.18);cursor:pointer}
.btn-mini{margin-top:12px;padding:9px 14px;background:var(--pri-soft);color:var(--pri);border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.tn-item{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--sh);padding:13px 14px;margin-bottom:10px}
.tn-hd{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tn-hd b{font-size:14.5px}
.tn-sub{display:block;font-size:11.5px;color:var(--tx3);margin-top:3px}
.tn-d{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;flex-shrink:0}
.tn-d.lv1{color:var(--ok)}.tn-d.lv2{color:var(--pri)}.tn-d.lv3{color:var(--warn)}.tn-d.lv4{color:var(--bad)}
.tn-bar{display:flex;align-items:center;gap:10px;margin-top:8px}
.tn-foot{display:flex;justify-content:space-between;align-items:center;margin-top:9px}
.tn-more{background:none;border:none;color:var(--tx3);font-size:12px;cursor:pointer;padding:2px 0;font-family:inherit}
.tn-reset{background:none;border:none;color:var(--pri);font-size:12px;cursor:pointer;padding:2px 0;font-family:inherit}
.tn-detail{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
.tn-knob{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:12.5px}
.tn-knob label{width:104px;color:var(--tx2);flex-shrink:0;line-height:1.3}
.tn-knob b{width:52px;text-align:right;font-variant-numeric:tabular-nums;font-size:12px}
.tn-inline{font-size:13px;color:var(--tx2);line-height:1.9}
.tn-inline .k{color:var(--tx3);display:inline-block;min-width:74px}
.tn-tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:5px;background:var(--pri-soft);color:var(--pri);margin-left:6px;font-weight:600}

/* 版本角标 */
.ver-tag{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 2px);text-align:center;
  font-size:10px;color:rgba(255,255,255,.28);letter-spacing:1px;z-index:5;pointer-events:none}

@media (max-width:400px){
  .idc-name{font-size:18px}
  .btn-settle{letter-spacing:2px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}