/* =====================================================================
   screens.css · 各屏组件
   地图 / 市场 / 房车 / 势力 · 委托 / 遭遇 / 标题 · 序章 · 结局 / 反馈
   依赖 theme.css + layout.css；class 与契约 §11.2 一一对应
   ===================================================================== */

/* =====================================================================
   A. 地图屏
   ===================================================================== */
.map-wrap{
  position:relative;
  border:1px solid var(--line);
  background:
    radial-gradient(700px 380px at 32% 18%,rgba(74,127,168,.10),transparent 70%),
    radial-gradient(500px 300px at 78% 72%,rgba(181,80,42,.08),transparent 72%),
    linear-gradient(180deg,#0e1115,#12161b 60%,#0c0f12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 26px rgba(0,0,0,.35);
  overflow:hidden;
}
.map-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:var(--halftone);
  background-size:6px 6px;
  opacity:.22;
  mix-blend-mode:soft-light;
}
.map-toolbar{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:8px 12px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(231,221,200,.06),rgba(0,0,0,.18));
  font-size:var(--fs-tiny);
  color:var(--muted);
}
.map-toolbar .spacer{flex:1 1 auto;}

.map-svg{
  display:block;
  position:relative;
  z-index:1;
  width:100%;
  height:auto;
  font-family:var(--font-sans);
}
.map-svg > svg{display:block;width:100%;height:auto;}

.map-district{
  /* 颜色由 SVG 内联 fill/stroke 提供（每个大区自有色），这里只做交互反馈 */
  stroke-linejoin:round;
  cursor:pointer;
  transition:fill-opacity var(--t) var(--ease),stroke-opacity var(--t) var(--ease),filter var(--t) var(--ease);
}
.map-district:hover{fill-opacity:.26;stroke-opacity:.95;filter:brightness(1.12);}
.map-district.active{filter:drop-shadow(0 0 8px rgba(226,163,62,.18));}
.map-district-label{
  font-family:var(--font-head);
  font-size:13px;
  letter-spacing:.14em;
  fill:var(--paper-3);
  paint-order:stroke;
  stroke:rgba(8,9,11,.75);
  stroke-width:2.4px;
  stroke-linejoin:round;
  pointer-events:none;
  user-select:none;
}
.map-road{
  fill:none;
  stroke:rgba(231,221,200,.34);
  stroke-width:1.8;
  stroke-dasharray:7 6;
  stroke-linecap:round;
  transition:stroke var(--t) var(--ease),stroke-width var(--t) var(--ease);
}
.map-road:hover,.map-road.active{stroke:var(--sodium);stroke-width:2.6;}
.map-road.overgrown{stroke:var(--rad);stroke-dasharray:2 7;opacity:.8;}
.map-block-dot{
  /* 势力色由 SVG 内联 fill 提供；这里只控制透明度与交互 */
  stroke:#0a0c0f;
  stroke-width:1.6;
  cursor:pointer;
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),filter var(--t-fast) var(--ease);
}
.map-block:hover .map-block-dot{transform:scale(1.3);filter:brightness(1.35);}
.map-block.unknown .map-block-dot{opacity:.45;}
.map-block.known .map-block-dot{opacity:1;}
.map-block-dot.known{opacity:1;}
.map-rv{
  stroke:#0a0c0f;
  stroke-width:1.4;
  pointer-events:none;
}
.map-tip{
  position:absolute;
  z-index:40;
  min-width:176px;
  max-width:268px;
  padding:9px 11px;
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg,#1a1e24,#111419);
  box-shadow:0 14px 30px rgba(0,0,0,.7);
  color:var(--paper-2);
  font-size:var(--fs-tiny);
  line-height:1.55;
  pointer-events:none;
}
.map-tip::before{
  content:"";
  position:absolute;
  left:10px;
  top:-5px;
  width:44px;
  height:10px;
  background:rgba(231,221,200,.66);
  transform:rotate(-1.2deg);
}
.map-tip b{display:block;color:var(--paper);font-size:12px;letter-spacing:.04em;margin-bottom:2px;}
.map-tip .mono{color:var(--sodium);}

.map-legend{
  position:absolute;
  z-index:20;
  left:14px;
  bottom:14px;
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:132px;
  padding:9px 11px;
  border:1px solid #a99d83;
  background:linear-gradient(180deg,#e9dfca,#d8cdb4);
  color:#2a2519;
  box-shadow:0 8px 18px rgba(0,0,0,.5);
  font-size:10.5px;
  line-height:1.35;
  letter-spacing:.03em;
}
.map-legend::before{
  content:"";
  position:absolute;
  right:-6px;
  top:-7px;
  width:38px;
  height:12px;
  background:rgba(226,163,62,.55);
  transform:rotate(3deg);
}
.map-legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.map-legend-item::before{
  content:"";
  flex:0 0 auto;
  width:9px;
  height:9px;
  background:var(--c,var(--muted-2));
  border:1px solid rgba(20,20,16,.45);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}

.district-strip{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:2px 2px 8px;
  scrollbar-width:thin;
}
.district-card{
  flex:0 0 auto;
  min-width:158px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-left:3px solid var(--d,var(--rust));
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.15));
  cursor:pointer;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),transform var(--t-fast) var(--ease);
}
.district-card:hover{border-color:var(--line-strong);background:rgba(231,221,200,.045);transform:translateY(-1px);}
.district-card.active{
  border-color:rgba(226,163,62,.55);
  background:linear-gradient(180deg,rgba(226,163,62,.14),rgba(226,163,62,.02));
  box-shadow:inset 0 0 20px rgba(226,163,62,.10);
}
.district-card b{display:block;color:var(--paper);font-size:13px;letter-spacing:.05em;}
.district-card .tiny{color:var(--muted);}

.block-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:10px;
}
.block-card{
  position:relative;
  padding:10px 12px;
  border:1px solid var(--line);
  border-left:3px solid var(--fac,rgba(231,221,200,.24));
  background:linear-gradient(180deg,#15191e,#101318);
  cursor:pointer;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),transform var(--t-fast) var(--ease);
}
.block-card:hover{border-color:var(--line-strong);background:#181d23;transform:translateY(-1px);}
.block-card.active{
  border-color:rgba(226,163,62,.5);
  background:linear-gradient(180deg,rgba(226,163,62,.10),rgba(20,23,28,.9));
  box-shadow:inset 0 0 18px rgba(226,163,62,.08);
}
.block-card b{display:block;font-size:13px;color:var(--paper);letter-spacing:.04em;}
.block-card .tiny{color:var(--muted);}
.block-card.locked{
  opacity:.5;
  filter:grayscale(.55);
  cursor:not-allowed;
  border-left-color:var(--muted-2);
}
.block-card.locked::after{
  content:"";
  position:absolute;
  right:9px;
  top:9px;
  width:7px;
  height:7px;
  background:var(--muted-2);
  transform:rotate(45deg);
}

.eco-row{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:var(--fs-micro);
  color:var(--muted);
  line-height:1.4;
}
.eco-label{
  flex:0 0 auto;
  width:52px;
  color:var(--muted-2);
  letter-spacing:.06em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.eco-pips{display:flex;gap:3px;}
.eco-pip{
  width:8px;
  height:8px;
  border:1px solid var(--line-strong);
  background:transparent;
  transform:skewX(-14deg);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.eco-pip.on{
  background:var(--eco,var(--sodium));
  border-color:var(--eco,var(--sodium));
  box-shadow:0 0 6px rgba(226,163,62,.35);
}

.threat-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 7px 2px 6px;
  border:1px solid rgba(163,58,58,.65);
  background:
    repeating-linear-gradient(135deg,rgba(163,58,58,.30) 0 4px,rgba(163,58,58,.10) 4px 8px);
  color:#e9a696;
  font-size:var(--fs-micro);
  letter-spacing:.08em;
  font-family:var(--font-mono);
  white-space:nowrap;
}
.threat-badge .ico{width:13px;height:13px;}

.travel-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-left:3px solid var(--blue);
  background:linear-gradient(180deg,rgba(74,127,168,.10),rgba(15,18,22,.9) 60%);
}
.route-info{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--paper-3);
  font-variant-numeric:tabular-nums;
}
.route-info .ico{width:14px;height:14px;color:var(--muted);}
.route-danger{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 7px;
  border:1px solid rgba(163,58,58,.55);
  background:rgba(163,58,58,.13);
  color:#e8a08e;
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.06em;
}
.route-danger.high{background:rgba(163,58,58,.24);color:#f0b3a2;}
.route-danger.low{border-color:rgba(147,168,106,.5);background:rgba(147,168,106,.12);color:var(--rad-2);}

/* =====================================================================
   B. 市场屏
   ===================================================================== */
.market{
  --mcols:40px minmax(0,1fr) 78px 78px 50px 108px;
  --mgap:10px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--gap);
  align-items:start;
}
.market > .market-head,
.market > .market-cols{grid-column:1/-1;}

.market-head{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 14px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.14));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.market-head b{font-family:var(--font-head);font-size:16px;letter-spacing:.06em;color:var(--paper);}
.market-cols{
  display:grid;
  grid-template-columns:var(--mcols,40px minmax(0,1fr) 78px 78px 50px 108px);
  gap:var(--mgap,10px);
  padding:6px 13px;
  border-bottom:1px solid var(--line);
  background:#0f1216;
  color:var(--muted-2);
  font-size:var(--fs-micro);
  letter-spacing:.14em;
  text-align:right;
}
.market-cols > *:nth-child(2){text-align:left;}

.item-list{
  display:flex;
  flex-direction:column;
  --mcols:40px minmax(0,1fr) 78px 78px 50px 108px;
}
.item-row{
  display:grid;
  grid-template-columns:var(--mcols,40px minmax(0,1fr) 78px 78px 50px 108px);
  gap:var(--mgap,10px);
  align-items:center;
  padding:9px 13px;
  border-bottom:1px solid var(--line-2);
  transition:background var(--t-fast) var(--ease),opacity var(--t) var(--ease);
}
.item-row:hover{background:rgba(231,221,200,.038);}
.item-row.disabled{opacity:.42;filter:grayscale(.55);pointer-events:none;}
.item-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid var(--line);
  background:#0d1014;
  color:var(--sodium);
}
.item-icon img,.item-icon svg,.item-icon .ico{width:21px;height:21px;}
.item-main{min-width:0;}
.item-name{
  display:flex;
  align-items:baseline;
  gap:7px;
  flex-wrap:wrap;
  color:var(--paper);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.35;
}
.item-desc{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-top:1px;
  color:var(--muted);
  font-size:var(--fs-tiny);
  line-height:1.5;
}
.item-meta{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  margin-top:3px;
  color:var(--muted-2);
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.04em;
}
.item-tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px;}
.item-tags .tag{height:16px;padding:0 5px;font-size:9.5px;}

.price{
  font-family:var(--font-mono);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
  letter-spacing:0;
}
.price.buy{color:var(--sodium);}
.price.sell{color:var(--rad-2);}
.price small{font-size:9.5px;color:var(--muted-2);}

.trend{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
  font-family:var(--font-mono);
  font-size:11px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.trend::before{
  content:"";
  width:0;
  height:0;
  border-left:3.5px solid transparent;
  border-right:3.5px solid transparent;
}
.trend.up{color:var(--rad-2);}
.trend.up::before{border-bottom:5px solid currentColor;}
.trend.down{color:#e08a7c;}
.trend.down::before{border-top:5px solid currentColor;}
.trend.flat{color:var(--muted-2);}
.trend.flat::before{width:7px;height:1px;border:0;background:currentColor;}

.qty{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
}
.qty-btn{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  flex:0 0 auto;
  border:1px solid var(--line-strong);
  border-radius:1px;
  background:linear-gradient(180deg,#262c34,#181c22);
  color:var(--paper-2);
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.qty-btn:hover{background:linear-gradient(180deg,#333b45,#222830);border-color:rgba(226,163,62,.55);color:var(--sodium-2);}
.qty-btn:active{transform:translateY(1px);}
.qty-val{
  min-width:26px;
  text-align:center;
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:13px;
  font-variant-numeric:tabular-nums;
}

.cart{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#14181d,#0f1216);
}
.cart-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:4px 0;
  border-bottom:1px dashed var(--line-2);
  color:var(--paper-3);
  font-size:var(--fs-small);
  line-height:1.45;
}
.cart-line b{font-family:var(--font-mono);font-size:12px;color:var(--paper);font-weight:400;}
.cart-total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-top:2px;
  padding-top:8px;
  border-top:1px solid var(--line);
  color:var(--sodium);
  font-family:var(--font-mono);
  font-size:16px;
  font-variant-numeric:tabular-nums;
}
.cart-total small{color:var(--muted);font-size:var(--fs-micro);font-family:var(--font-sans);letter-spacing:.06em;}

.capacity-bar{
  position:relative;
  height:10px;
  border:1px solid var(--line);
  background:#0a0c0f;
  overflow:hidden;
}
.capacity-bar::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 1px,transparent 1px 12px);
  opacity:.7;
}
.capacity-fill{
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--rust),var(--sodium));
  box-shadow:0 0 12px rgba(226,163,62,.3);
  transition:width var(--t-slow) var(--ease);
}
.capacity-bar.over .capacity-fill{background:linear-gradient(90deg,#7c2a24,var(--alert-2));}

.tabs{
  display:flex;
  align-items:flex-end;
  gap:2px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
}
.tab{
  position:relative;
  padding:7px 13px;
  border:1px solid transparent;
  border-bottom:0;
  color:var(--muted);
  font-size:var(--fs-small);
  letter-spacing:.05em;
  white-space:nowrap;
  cursor:pointer;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.tab:hover,.tab.is-hover{color:var(--paper-2);background:rgba(231,221,200,.045);}
.tab.active{
  color:var(--sodium);
  border-color:var(--line);
  background:linear-gradient(180deg,rgba(226,163,62,.13),rgba(226,163,62,.02));
}
.tab.active::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:-1px;
  height:2px;
  background:var(--sodium);
  box-shadow:0 0 10px rgba(226,163,62,.6);
}

.market-side{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#15181d,#101317);
  align-self:start;
}

.deal-banner{
  position:relative;
  padding:7px 12px;
  border:1px solid #b9873a;
  background:
    repeating-linear-gradient(135deg,rgba(0,0,0,.06) 0 5px,transparent 5px 10px),
    linear-gradient(180deg,#eab655,#cf9433);
  color:#221a08;
  font-family:var(--font-head);
  font-size:12.5px;
  letter-spacing:.08em;
  text-align:center;
  transform:rotate(-.5deg);
  box-shadow:0 3px 10px rgba(0,0,0,.4);
}
.deal-banner b{color:#3a2205;}

.rep-discount{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  border:1px dashed rgba(147,168,106,.7);
  background:rgba(147,168,106,.12);
  color:var(--rad-2);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.06em;
}

/* =====================================================================
   C. 房车屏
   ===================================================================== */
.vgarage{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:var(--gap);
  align-items:start;
}
.rv-figure{
  position:relative;
  padding:16px;
  border:1px solid rgba(74,127,168,.34);
  background:
    linear-gradient(rgba(74,127,168,.10) 1px,transparent 1px) 0 0/100% 22px,
    linear-gradient(90deg,rgba(74,127,168,.10) 1px,transparent 1px) 0 0/22px 100%,
    linear-gradient(180deg,#0c1218,#0e151c 60%,#0a1015);
  box-shadow:inset 0 0 60px rgba(0,0,0,.55);
  overflow:hidden;
}
.rv-figure::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:var(--scan);
  opacity:.10;
}
.rv-svg{
  display:block;
  width:100%;
  height:auto;
  max-height:340px;
  object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.55)) contrast(1.03);
}
.rv-svg svg{display:block;width:100%;height:auto;}

.slot-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.rv-slot{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  min-height:64px;
  padding:8px 10px;
  border:1px dashed var(--line-strong);
  background:rgba(18,21,26,.6);
  color:var(--paper-3);
  font-size:var(--fs-tiny);
  line-height:1.4;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.rv-slot b{display:block;color:var(--paper-2);font-size:var(--fs-small);letter-spacing:.03em;}
.rv-slot .tiny{color:var(--muted-2);}
.rv-slot::before{
  content:"";
  position:absolute;
  left:-1px;
  top:-1px;
  width:7px;
  height:7px;
  border-top:1px solid rgba(231,221,200,.35);
  border-left:1px solid rgba(231,221,200,.35);
}
.rv-slot.installed{
  border-style:solid;
  border-color:rgba(226,163,62,.42);
  background:linear-gradient(180deg,rgba(226,163,62,.12),rgba(18,21,26,.75));
}
.rv-slot.installed b{color:var(--sodium-2);}
.rv-slot.empty{opacity:.6;}
.rv-slot.active{
  border-color:var(--sodium);
  box-shadow:0 0 0 1px rgba(226,163,62,.5),inset 0 0 22px rgba(226,163,62,.12);
}

.slot-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-left:3px solid var(--line-strong);
  background:#111419;
  font-size:var(--fs-small);
}

.mod-card{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-left:3px solid var(--line-strong);
  background:linear-gradient(180deg,#121519,#0e1115);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),transform var(--t-fast) var(--ease);
}
.mod-card:hover{border-color:var(--line-strong);transform:translateY(-1px);}
.mod-card.owned{
  border-left-color:var(--rad);
  background:linear-gradient(90deg,rgba(147,168,106,.09),rgba(14,17,21,.9) 62%);
}
.mod-card.locked{opacity:.52;filter:grayscale(.4);}
.mod-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.mod-head b{color:var(--paper);font-size:13px;letter-spacing:.03em;}
.mod-head .tiny{color:var(--muted-2);font-family:var(--font-mono);}
.mod-cost{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  color:var(--sodium);
  font-family:var(--font-mono);
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
.mod-cost .ico{width:13px;height:13px;}
.mod-effects{
  display:flex;
  flex-wrap:wrap;
  gap:5px 9px;
  color:var(--rad-2);
  font-family:var(--font-mono);
  font-size:10.5px;
}
.mod-effects span{display:inline-flex;align-items:center;gap:3px;}

.vehicle-card{
  position:relative;
  display:flex;
  gap:12px;
  padding:10px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#13171c,#0f1216);
  cursor:pointer;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease);
}
.vehicle-card:hover{border-color:var(--line-strong);transform:translateY(-1px);}
.vehicle-card.selected{
  border-color:var(--sodium);
  box-shadow:0 0 0 1px rgba(226,163,62,.45),inset 0 0 30px rgba(226,163,62,.08);
}
.vehicle-card.locked{opacity:.5;filter:grayscale(.6);cursor:not-allowed;}
.vehicle-art{
  flex:0 0 128px;
  display:grid;
  place-items:center;
  padding:4px;
  border:1px solid var(--line-2);
  background:
    linear-gradient(rgba(74,127,168,.10) 1px,transparent 1px) 0 0/100% 14px,
    linear-gradient(90deg,rgba(74,127,168,.10) 1px,transparent 1px) 0 0/14px 100%,
    #0b1116;
  overflow:hidden;
}
.vehicle-art img,.vehicle-art svg{display:block;width:100%;height:auto;}
.vehicle-stats{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  flex:1 1 auto;
}
.vehicle-stats > b{color:var(--paper);font-family:var(--font-head);font-size:14px;letter-spacing:.05em;}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(76px,1fr));
  gap:8px;
}
.stat-grid .stat{padding:5px 7px;border:1px solid var(--line-2);background:rgba(231,221,200,.02);}

.perk{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 10px;
  border:1px dashed rgba(226,163,62,.42);
  background:rgba(226,163,62,.06);
  color:var(--paper-2);
  font-size:var(--fs-small);
  line-height:1.55;
}
.perk b{color:var(--sodium-2);font-size:var(--fs-small);letter-spacing:.06em;}
.service-unlock{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  font-size:var(--fs-tiny);
  color:var(--muted);
}
.service-unlock .tag{height:20px;}

.cargo-list{
  display:flex;
  flex-direction:column;
  gap:1px;
  max-height:320px;
  overflow-y:auto;
}
.cargo-row{
  display:grid;
  grid-template-columns:22px minmax(0,1fr) 44px 62px;
  gap:8px;
  align-items:center;
  padding:5px 6px;
  border-bottom:1px dashed var(--line-2);
  color:var(--paper-3);
  font-size:var(--fs-small);
  line-height:1.4;
}
.cargo-row:hover{background:rgba(231,221,200,.035);}
.cargo-row .ico{width:16px;height:16px;color:var(--muted);}
.cargo-row .mono{text-align:right;color:var(--paper-2);font-size:11.5px;}

/* =====================================================================
   D. 势力 / 委托
   ===================================================================== */
.faction-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:13px;
  border:1px solid var(--line);
  border-top:2px solid var(--fac,var(--rust));
  background:
    linear-gradient(180deg,var(--fac-soft,rgba(231,221,200,.04)),transparent 42%),
    linear-gradient(180deg,#171b20,#101317);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 18px rgba(0,0,0,.28);
  transition:border-color var(--t) var(--ease),transform var(--t-fast) var(--ease);
}
.faction-card:hover{transform:translateY(-1px);}
.faction-card::after{
  content:"";
  position:absolute;
  right:10px;
  bottom:9px;
  width:26px;
  height:26px;
  border:1px solid var(--fac,var(--rust));
  transform:rotate(-8deg);
  opacity:.28;
  pointer-events:none;
}
.faction-head{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.faction-emblem{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  padding:4px;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.07),#0b0e12 72%);
  border:1px solid var(--fac,var(--line-strong));
  box-shadow:inset 0 0 16px rgba(0,0,0,.7),0 0 12px var(--fac-soft,transparent);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
}
.faction-emblem img,.faction-emblem svg{width:100%;height:100%;object-fit:contain;display:block;}
.faction-name{
  color:var(--paper);
  font-family:var(--font-head);
  font-size:16px;
  letter-spacing:.06em;
  line-height:1.2;
}
.faction-motto{
  margin-top:2px;
  color:var(--muted);
  font-size:var(--fs-tiny);
  font-style:italic;
  line-height:1.5;
}

.rep-row{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.rep-row .row{justify-content:space-between;}
.rep-bar{
  position:relative;
  height:8px;
  border:1px solid var(--line);
  background:#0a0c0f;
  overflow:hidden;
}
.rep-bar::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(231,221,200,.28);
  z-index:2;
}
.rep-fill{
  height:100%;
  width:0;
  background:var(--fac,var(--sodium));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 0 10px var(--fac-soft,transparent);
  transition:width var(--t-slow) var(--ease);
}
.rep-tier{
  align-self:flex-start;
  padding:1px 7px;
  border:1px solid currentColor;
  color:var(--fac,var(--sodium));
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.08em;
  line-height:1.6;
  white-space:nowrap;
}

.service-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 9px;
  border:1px solid var(--line-2);
  border-left:2px solid var(--fac,var(--line));
  background:rgba(231,221,200,.022);
  font-size:var(--fs-small);
  color:var(--paper-3);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.service-row:hover{background:rgba(231,221,200,.05);}
.service-row b{color:var(--paper-2);font-size:12.5px;letter-spacing:.02em;}
.service-row .tiny{color:var(--muted);}
.service-row.locked{
  opacity:.48;
  filter:grayscale(.4);
  border-left-color:var(--muted-2);
}
.service-row.locked::after{
  content:"";
  width:9px;
  height:9px;
  margin-left:auto;
  border:1px solid var(--muted-2);
  background:transparent;
  position:relative;
}

.contact{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-top:8px;
  border-top:1px dashed var(--line);
  color:var(--muted);
  font-size:var(--fs-tiny);
}
.contact-line{
  display:flex;
  align-items:baseline;
  gap:8px;
  line-height:1.5;
}
.contact-line b{color:var(--paper-3);font-weight:600;font-size:var(--fs-tiny);}
.contact-line .mono{color:var(--muted-2);font-size:9.5px;}

.task-tabs{
  display:flex;
  align-items:flex-end;
  gap:2px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  margin-bottom:2px;
}
.task-tabs .tab{padding:6px 12px;}

.task-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:13px 14px 12px;
  border:1px solid #b6a98e;
  background:
    linear-gradient(180deg,rgba(255,255,255,.20),transparent 30%),
    linear-gradient(180deg,#ece2cd,#dcd0b6);
  color:#221c11;
  box-shadow:0 8px 18px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.22);
  transition:box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease);
}
.task-card::before{
  content:"";
  position:absolute;
  right:18px;
  top:-6px;
  width:62px;
  height:13px;
  background:linear-gradient(180deg,rgba(239,230,210,.92),rgba(214,201,173,.78));
  box-shadow:0 2px 5px rgba(0,0,0,.35);
  transform:rotate(2deg);
  pointer-events:none;
}
.task-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:var(--halftone-dark);
  background-size:5px 5px;
  opacity:.16;
}
.task-card:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.24);}
.task-card.active{
  box-shadow:0 0 0 2px rgba(181,80,42,.6),0 12px 26px rgba(0,0,0,.5);
}
.task-card b{color:#1b160d;}

.task-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  color:#1b160d;
  font-family:var(--font-head);
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.03em;
  line-height:1.3;
}
.task-meta{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:6px 10px;
  flex-wrap:wrap;
  color:#5d5442;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.03em;
}
.task-meta .ico{color:#7a6a49;}
.task-reward{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:6px 8px;
  border:1px dashed rgba(60,48,30,.38);
  background:rgba(255,255,255,.20);
}
.reward-line{
  display:flex;
  align-items:center;
  gap:6px;
  color:#3b3425;
  font-family:var(--font-mono);
  font-size:10.5px;
  line-height:1.5;
}
.reward-line .ico{width:13px;height:13px;color:#7a5c1e;}
.deadline{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#5d5442;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.03em;
}
.deadline .ico{width:12px;height:12px;}
.deadline.warn{color:#8a2b2b;font-weight:700;}
.task-actions{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-top:2px;
}
.task-card .tag{
  color:#5d5442;
  border-color:rgba(60,48,30,.34);
  background:rgba(255,255,255,.22);
}
.task-card .tag.warn{color:#8a5a12;border-color:rgba(140,90,20,.5);background:rgba(226,163,62,.24);}
.task-card .tag.good{color:#3f4a29;border-color:rgba(70,86,40,.45);background:rgba(147,168,106,.22);}
.task-card .tag.danger{color:#7d2620;border-color:rgba(130,38,32,.5);background:rgba(163,58,58,.16);}
.task-card .muted{color:#5d5442;}
.task-card .tiny{color:#5d5442;}

/* =====================================================================
   E. 遭遇战 / 弹窗内容
   ===================================================================== */
.encounter{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.encounter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
}
.encounter-head b{
  font-family:var(--font-head);
  font-size:17px;
  letter-spacing:.07em;
  color:var(--paper);
  text-shadow:1px 0 rgba(163,58,58,.45);
}

.enemy-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:11px 12px;
  border:1px solid rgba(163,58,58,.38);
  border-left:3px solid var(--alert);
  background:
    radial-gradient(240px 120px at 12% 0%,rgba(163,58,58,.20),transparent 72%),
    linear-gradient(180deg,#191216,#100f12);
}
.enemy-name{
  color:#e7b6a6;
  font-family:var(--font-head);
  font-size:15px;
  letter-spacing:.06em;
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}
.enemy-hp{
  display:flex;
  flex-direction:column;
  gap:4px;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.04em;
}
.enemy-hp .bar{border-color:rgba(163,58,58,.4);}
.enemy-traits{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.enemy-traits .tag{color:#d9a595;border-color:rgba(163,58,58,.42);background:rgba(163,58,58,.13);}

.encounter-art{
  position:relative;
  aspect-ratio:16/9;
  border:1px solid var(--line);
  background-color:#0b0e12;
  background-image:var(--art,none);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  overflow:hidden;
  box-shadow:inset 0 0 70px rgba(0,0,0,.75);
}
.encounter-art img,.encounter-art svg{display:block;width:100%;height:100%;object-fit:cover;}
.encounter-art::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:var(--halftone),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.45));
  background-size:5px 5px,100% 100%;
  opacity:.75;
  mix-blend-mode:multiply;
}

.battle-stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:12px;
  align-items:start;
}
.battle-log{
  display:flex;
  flex-direction:column;
  gap:2px;
  max-height:266px;
  overflow-y:auto;
  padding:8px 10px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#0c0f12,#0e1115);
  font-size:var(--fs-small);
  line-height:1.55;
}
.battle-line{
  position:relative;
  padding:4px 7px;
  border-left:2px solid transparent;
  color:var(--paper-3);
  animation:fadeUp 160ms var(--ease-out);
}
.battle-line.hit{
  border-left-color:var(--rad);
  color:#ccd6b2;
  background:linear-gradient(90deg,rgba(147,168,106,.10),transparent 80%);
}
.battle-line.hurt{
  border-left-color:var(--alert);
  color:#e0aa9b;
  background:linear-gradient(90deg,rgba(163,58,58,.14),transparent 80%);
}
.battle-line.info{color:var(--muted);font-style:italic;}
.battle-line.crit{
  border-left-color:var(--sodium);
  color:var(--sodium-2);
  font-weight:700;
  background:linear-gradient(90deg,rgba(226,163,62,.16),transparent 80%);
  text-shadow:0 0 12px rgba(226,163,62,.35);
}

.choice-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:8px;
}
.choice-btn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:10px 12px;
  border:1px solid var(--line-strong);
  border-radius:2px;
  background:linear-gradient(180deg,#1e232a,#14171c);
  color:var(--paper);
  font-size:13.5px;
  line-height:1.45;
  text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 0 rgba(0,0,0,.45);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease);
}
.choice-btn:hover,.choice-btn.is-hover{
  border-color:rgba(226,163,62,.6);
  background:linear-gradient(180deg,rgba(226,163,62,.14),#161a1f 70%);
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 14px rgba(0,0,0,.5);
}
.choice-btn:active{transform:translateY(0);}
.choice-btn.primary{
  border-color:rgba(226,163,62,.62);
  background:linear-gradient(180deg,rgba(226,163,62,.20),rgba(28,32,38,.92) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 18px rgba(226,163,62,.16);
}
.choice-btn.danger{
  border-color:rgba(163,58,58,.65);
  background:linear-gradient(180deg,rgba(163,58,58,.20),rgba(28,20,20,.92) 70%);
}
.choice-btn[disabled],.choice-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
  transform:none;
  filter:grayscale(.5);
}
.choice-hint{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.03em;
}
.choice-hint .ico{width:13px;height:13px;}
.choice-hint.warn{color:var(--sodium);}

.round-pips{
  display:flex;
  align-items:center;
  gap:4px;
}
.round-pip{
  width:15px;
  height:5px;
  border:1px solid var(--line-strong);
  background:#14171c;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.round-pip.on,.round-pip.active,.round-pip.done{
  background:var(--sodium);
  border-color:var(--sodium-2);
  box-shadow:0 0 8px rgba(226,163,62,.5);
}

.encounter-result{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:13px 14px;
  border:1px solid rgba(226,163,62,.4);
  background:
    radial-gradient(320px 130px at 18% 0%,rgba(226,163,62,.14),transparent 70%),
    linear-gradient(180deg,#171b20,#101216);
  animation:fadeUp 220ms var(--ease-out);
}
.outcome-text{
  color:var(--paper-2);
  font-size:13.5px;
  line-height:1.75;
}
.loot-line{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  color:var(--sodium);
  font-family:var(--font-mono);
  font-size:11.5px;
}
.loot-line .ico{width:14px;height:14px;}
.damage-float{
  position:absolute;
  z-index:8;
  color:#e08573;
  font-family:var(--font-mono);
  font-size:20px;
  font-weight:700;
  line-height:1;
  text-shadow:0 2px 8px rgba(0,0,0,.9),0 0 14px rgba(163,58,58,.6);
  pointer-events:none;
  animation:dmgFloat 900ms var(--ease-out) forwards;
}

/* =====================================================================
   F. 标题屏 / 序章 / 结局
   ===================================================================== */
#title-root:empty{display:none;}
.title-screen{
  position:fixed;
  inset:0;
  z-index:40;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:56px 24px 64px;
  overflow:auto;
  background:#08090b;
}
.title-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-color:#0a0b0d;
  background-image:url("../assets/title-bg.svg");
  background-position:center 42%;
  background-size:cover;
  background-repeat:no-repeat;
  filter:saturate(.95) contrast(1.02);
}
.title-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 34%,rgba(0,0,0,.05) 0%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.9) 100%),
    linear-gradient(180deg,rgba(8,9,11,.72) 0%,transparent 26%,transparent 58%,rgba(8,9,11,.92) 100%);
}
.title-logo{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
}
.logo-main{
  margin:0;
  color:var(--paper-warm);
  font-family:var(--font-head);
  font-size:clamp(38px,6.2vw,84px);
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.04;
  text-shadow:
    0 2px 0 #170f07,
    0 0 46px rgba(226,163,62,.24),
    2px 0 rgba(181,80,42,.55),
    -2px 0 rgba(74,127,168,.38);
}
.logo-sub{
  color:var(--sodium);
  font-family:var(--font-mono);
  font-size:clamp(10px,1.15vw,14px);
  letter-spacing:.52em;
  text-transform:uppercase;
  text-indent:.52em;
  text-shadow:0 0 18px rgba(226,163,62,.3);
}
.logo-tag{
  max-width:640px;
  color:var(--paper-3);
  font-size:13px;
  font-style:italic;
  letter-spacing:.08em;
  line-height:1.6;
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.logo-tag::before,.logo-tag::after{
  content:"—";
  color:var(--muted-2);
  margin:0 8px;
}
.title-menu{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-top:10px;
}
.menu-btn{
  min-width:264px;
  padding:10px 26px;
  border:1px solid rgba(231,221,200,.26);
  border-radius:2px;
  background:linear-gradient(180deg,rgba(20,23,28,.82),rgba(10,12,15,.78));
  color:var(--paper-2);
  font-family:var(--font-head);
  font-size:14px;
  letter-spacing:.16em;
  text-align:center;
  cursor:pointer;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease),background var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease);
  box-shadow:0 3px 0 rgba(0,0,0,.5);
}
.menu-btn:hover,.menu-btn.is-hover{
  color:var(--paper-warm);
  border-color:rgba(231,221,200,.5);
  background:linear-gradient(180deg,rgba(34,39,46,.9),rgba(16,19,24,.86));
  transform:translateY(-1px);
}
.menu-btn.primary{
  color:var(--sodium-2);
  border-color:rgba(226,163,62,.62);
  background:linear-gradient(180deg,rgba(226,163,62,.16),rgba(14,16,20,.86));
  box-shadow:0 3px 0 rgba(0,0,0,.5),inset 0 0 24px rgba(226,163,62,.12),0 0 22px rgba(226,163,62,.14);
}
.menu-btn.primary:hover{
  color:#ffd88a;
  border-color:var(--sodium);
  box-shadow:0 3px 0 rgba(0,0,0,.5),inset 0 0 30px rgba(226,163,62,.18),0 0 30px rgba(226,163,62,.26);
}
.menu-btn[disabled],.menu-btn:disabled{opacity:.38;cursor:not-allowed;transform:none;}
.title-meta{
  position:absolute;
  z-index:2;
  left:26px;
  bottom:46px;
  color:var(--paper-dim);
  font-family:var(--font-mono);
  font-size:10.5px;
  line-height:1.75;
  letter-spacing:.08em;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.title-footer{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:9px 26px;
  border-top:1px solid rgba(231,221,200,.10);
  background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.72));
  color:var(--muted-2);
  font-size:var(--fs-micro);
  letter-spacing:.18em;
}

.prologue{
  position:fixed;
  inset:0;
  z-index:45;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  background:
    radial-gradient(circle at 50% 38%,rgba(18,21,25,.72),rgba(5,6,8,.96) 76%);
  overflow:auto;
}
.prologue-panel{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  width:min(980px,94vw);
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg,#161a1f,#101317);
  box-shadow:0 30px 64px rgba(0,0,0,.72);
  animation:modalIn 240ms var(--ease-out);
}
.prologue-panel::before{
  content:"";
  position:absolute;
  left:50%;
  top:-9px;
  width:150px;
  height:18px;
  margin-left:-75px;
  background:linear-gradient(180deg,rgba(231,221,200,.8),rgba(214,201,173,.62));
  transform:rotate(-1.2deg);
  box-shadow:0 3px 8px rgba(0,0,0,.5);
  z-index:2;
  pointer-events:none;
}
.prologue-art{
  position:relative;
  min-height:300px;
  border-right:1px solid var(--line);
  background-color:#0a0d11;
  background-image:var(--art,url("../assets/scene-civic.svg"));
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 80px rgba(0,0,0,.7);
}
.prologue-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.42));
  pointer-events:none;
}
.prologue-text{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:26px 28px 24px;
  color:var(--paper-2);
  font-size:15px;
  line-height:1.85;
  letter-spacing:.01em;
  min-width:0;
}
.prologue-speaker{
  color:var(--sodium);
  font-family:var(--font-head);
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.prologue-speaker::after{
  content:"";
  display:block;
  width:34px;
  height:2px;
  margin-top:6px;
  background:var(--rust);
}
.prologue-dots{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:auto;
  padding-top:14px;
}
.prologue-dots > *{
  width:7px;
  height:7px;
  border:1px solid var(--line-strong);
  background:transparent;
  transform:rotate(45deg);
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease);
}
.prologue-dots > .on,.prologue-dots > .active{
  background:var(--sodium);
  border-color:var(--sodium-2);
  box-shadow:0 0 8px rgba(226,163,62,.55);
}
.skip-btn{
  position:absolute;
  right:16px;
  bottom:12px;
  z-index:3;
  padding:3px 8px;
  border:1px solid var(--line);
  background:rgba(10,12,15,.6);
  color:var(--muted);
  font-size:var(--fs-micro);
  letter-spacing:.14em;
  cursor:pointer;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.skip-btn:hover{color:var(--paper-2);border-color:var(--line-strong);}

.ending{
  position:fixed;
  inset:0;
  z-index:46;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:48px 24px 64px;
  overflow-y:auto;
  background:#07080a;
}
.ending-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-color:#0a0b0d;
  background-image:var(--ending-art,url("../assets/scene-ruins.svg"));
  background-position:center 38%;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.34;
  filter:grayscale(.34) contrast(1.05);
}
.ending-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 42%,transparent 8%,rgba(7,8,10,.72) 66%,rgba(7,8,10,.97) 100%),
    linear-gradient(180deg,rgba(7,8,10,.7),transparent 30%,transparent 60%,rgba(7,8,10,.94));
}
.ending > *{position:relative;z-index:1;}
.ending-title{
  margin:0;
  max-width:14em;
  color:var(--paper-warm);
  font-family:var(--font-head);
  font-size:clamp(30px,4.6vw,58px);
  letter-spacing:.10em;
  line-height:1.12;
  text-align:center;
  text-shadow:0 2px 0 #150e07,0 0 40px rgba(226,163,62,.22),2px 0 rgba(181,80,42,.4);
}
.ending-sub{
  margin-top:2px;
  color:var(--sodium);
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  text-align:center;
}
.ending-text{
  max-width:660px;
  color:var(--paper-2);
  font-size:15px;
  line-height:1.9;
  text-align:center;
  text-shadow:0 1px 8px rgba(0,0,0,.85);
}
.ending-stats{
  width:min(560px,92vw);
  padding:14px 16px;
  border:1px solid var(--line);
  background:rgba(13,16,20,.82);
  box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.stat-table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--font-mono);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
.stat-table td{
  padding:5px 8px;
  border-bottom:1px dashed var(--line-2);
  color:var(--paper-2);
}
.stat-table tr:last-child td{border-bottom:0;}
.stat-table td:first-child{color:var(--muted);font-family:var(--font-sans);letter-spacing:.04em;}
.stat-table td:last-child{text-align:right;color:var(--paper);}

.unlock-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(176px,1fr));
  gap:10px;
  width:min(720px,94vw);
}
.unlock-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px;
  border:1px solid #a89a7c;
  background:linear-gradient(180deg,#e9dfca,#d6cab0);
  color:#241e12;
  box-shadow:0 8px 20px rgba(0,0,0,.45);
  animation:fadeUp 300ms var(--ease-out);
}
.unlock-card::before{
  content:"";
  position:absolute;
  right:10px;
  top:-6px;
  width:46px;
  height:12px;
  background:rgba(239,230,210,.85);
  transform:rotate(3deg);
  box-shadow:0 2px 5px rgba(0,0,0,.3);
}
.unlock-card b{font-family:var(--font-head);font-size:14px;letter-spacing:.06em;color:#1b160d;}
.unlock-card .tiny{color:#5d5442;}
.unlock-card.locked{filter:grayscale(.65);opacity:.72;}
.unlock-card .ico{color:#7a5c1e;width:20px;height:20px;}
.ending-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:4px;
}
.credits{
  max-width:640px;
  margin-top:10px;
  color:var(--muted-2);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.1em;
  line-height:1.9;
  text-align:center;
}

/* =====================================================================
   G. 反馈 / 提示
   ===================================================================== */
.key-hint{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:var(--fs-micro);
  letter-spacing:.08em;
  white-space:nowrap;
}
.key-hint .kbd{height:18px;min-width:18px;font-size:9.5px;}

/* =====================================================================
   H. 屏幕级响应式
   ===================================================================== */
@media (max-width:1499px){
  .grid-veh,.vgarage{grid-template-columns:minmax(0,1fr);}
  .rv-figure{max-width:900px;}
}
@media (max-width:1360px){
  .market{--mcols:34px minmax(0,1fr) 68px 68px 42px 96px;--mgap:8px;}
  .item-list{--mcols:34px minmax(0,1fr) 68px 68px 42px 96px;}
  .market-cols{grid-template-columns:var(--mcols);}
  .battle-stage{grid-template-columns:minmax(0,1fr);}
  .prologue-panel{grid-template-columns:minmax(0,1fr);}
  .prologue-art{min-height:200px;border-right:0;border-bottom:1px solid var(--line);}
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(68px,1fr));}
}
@media (min-width:1560px){
  @supports selector(:has(*)){
    .market:has(> .market-side){
      grid-template-columns:minmax(0,1fr) 302px;
    }
    .market:has(> .market-side) > .market-side{position:sticky;top:0;}
  }
}
@media (max-width:1024px){
  .map-legend{position:static;margin:10px;}
  .ending{padding:32px 18px 48px;}
  .title-screen{padding:40px 18px 56px;}
  .title-meta{position:static;text-align:center;margin-top:6px;}
  .title-footer{position:static;margin-top:auto;}
  .slot-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}


/* =========================================================================
   集成修订 · 2026-11-11 · 按 lead 实机截图与真实 markup 对齐
   （js/screens 的 class 均来自 lead 的渲染代码；本段只补样式，不改结构）
   ========================================================================= */

/* ---------------------------- A. 标题屏 ---------------------------- */
.title-top{
  color:var(--muted-2);
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.logo-kicker{
  color:var(--sodium);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.34em;
  text-transform:uppercase;
  opacity:.85;
}
.title-logo{gap:9px;}
.title-menu{
  width:min(380px,100%);
  gap:8px;
}
.menu-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  min-width:0;
  padding:10px 16px;
  text-align:left;
}
.menu-btn.ghost{
  border-color:rgba(231,221,200,.18);
  background:linear-gradient(180deg,rgba(16,19,23,.7),rgba(10,12,15,.6));
  color:var(--paper-3);
}
.menu-btn.ghost:hover{
  color:var(--paper-warm);
  border-color:rgba(231,221,200,.38);
}
.menu-en{
  flex:0 0 auto;
  color:var(--muted-2);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.1em;
  white-space:nowrap;
}
.menu-btn.primary .menu-en{color:rgba(255,214,134,.62);}
.menu-btn:hover .menu-en{color:var(--muted);}
.menu-btn.primary:hover .menu-en{color:rgba(255,214,134,.9);}
/* 关键修复：统计信息不再绝对定位，回到菜单下方正常文档流 */
.title-meta{
  position:static;
  left:auto;
  bottom:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:-2px;
  color:var(--paper-dim);
  font-size:10px;
  letter-spacing:.14em;
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.title-meta .tiny{font-size:10px;letter-spacing:.14em;}
.title-footer{
  color:var(--muted-2);
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.title-art{object-fit:cover;opacity:.96;}

/* ---------------------------- B. 序章 ---------------------------- */
.prologue-panel{
  border-left:1px solid var(--line);
  background:linear-gradient(180deg,#14181e,#0d1014 70%);
}
.prologue-kicker{
  color:var(--sodium);
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.26em;
}
.prologue-speaker{
  color:var(--sodium-2);
  font-size:12.5px;
  letter-spacing:.18em;
}
.prologue-text{
  max-width:46ch;
  color:var(--paper-2);
  font-size:15.5px;
  line-height:1.9;
}
.prologue-actions{display:flex;flex-wrap:wrap;gap:8px;}
.prologue-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(8,9,11,.12),rgba(8,9,11,.55) 62%,rgba(13,16,20,.92) 100%);
  pointer-events:none;
}
.prologue-art .art-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.prologue-dot{
  transition:background var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.prologue-dot.active{box-shadow:0 0 10px rgba(226,163,62,.6);}

/* ---------------------------- C. 地图 ---------------------------- */
.map-screen .map-wrap{
  border:0;
  background:none;
  box-shadow:none;
  overflow:visible;
  padding:0;
}
.map-screen .map-canvas{
  position:relative;
  min-width:0;
  border:1px solid var(--line);
  background:
    radial-gradient(700px 380px at 32% 18%,rgba(74,127,168,.10),transparent 70%),
    radial-gradient(520px 320px at 78% 72%,rgba(181,80,42,.08),transparent 72%),
    linear-gradient(180deg,#0e1115,#12161b 60%,#0c0f12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 26px rgba(0,0,0,.35);
  overflow:hidden;
}
.map-screen .map-canvas::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background-image:var(--halftone);
  background-size:6px 6px;
  opacity:.2;
  mix-blend-mode:soft-light;
}
.map-screen .map-svg{
  display:block;
  width:100%;
  height:auto;
  position:relative;
  z-index:1;
}
/* 大区名：21px 用户单位（画布约缩放到 58%，实显 ≈12px），描边保证压在路网与街区上也清楚 */
.map-svg .map-district-label{
  font-family:var(--font-head);
  font-size:18.5px;
  font-weight:700;
  letter-spacing:.1em;
  fill:#f2e9d6;
  opacity:.92;
  paint-order:stroke;
  stroke:rgba(6,7,9,.92);
  stroke-width:4.2px;
  stroke-linejoin:round;
  cursor:pointer;
  transition:fill var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);
}
.map-svg .map-district-label:hover{fill:var(--sodium-2);opacity:1;}
/* 街区名：只显示当前/选中/悬停的，避免 18 个标签互相打架 */
.map-svg .map-block-label{
  font-family:var(--font-sans);
  font-size:15px;
  fill:#f4ecda;
  opacity:.94;
  paint-order:stroke;
  stroke:rgba(6,7,9,.9);
  stroke-width:3.6px;
  stroke-linejoin:round;
  pointer-events:none;
}
.map-svg .map-block:not(.current):not(.selected) .map-block-label{display:none;}
.map-svg .map-block:hover .map-block-label{display:block;}
.map-svg .map-block{cursor:pointer;}
.map-svg .map-horde-pip{
  fill:var(--alert-2);
  stroke:#0a0c0f;
  stroke-width:1.4;
}
.map-svg .map-rv-ring{
  fill:none;
  stroke:var(--sodium);
  stroke-width:2;
}
/* 地图右侧：限高滚动，出发面板吸底常驻 */
.map-screen .map-side{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:calc(100vh - 318px);
  min-height:320px;
  overflow-y:auto;
  padding:0 5px 0 0;
  scrollbar-width:thin;
  scrollbar-color:#333941 #0b0d10;
}
.map-screen .map-side::-webkit-scrollbar{width:8px;}
.map-screen .map-side > .travel-panel{
  position:sticky;
  bottom:0;
  z-index:6;
  margin-top:auto;
  box-shadow:0 -14px 26px rgba(0,0,0,.6);
}
.map-screen .panel.map-district-panel .panel-body{padding:11px 12px 12px;}
.map-screen .panel.map-district-panel .panel-body > p{margin-bottom:9px;}

/* 大区条：提高文字对比度 */
.district-card{
  color:var(--paper);
  border-left:3px solid var(--fcolor,var(--line-strong));
}
.district-name{
  display:block;
  color:var(--paper);
  font-family:var(--font-head);
  font-size:13px;
  letter-spacing:.05em;
  line-height:1.3;
}
.district-meta{
  display:block;
  margin-top:2px;
  color:var(--muted) !important;
  font-size:9.5px;
  letter-spacing:.04em;
  opacity:1;
}
.district-card:hover .district-name{color:var(--paper-warm);}
.district-card.active .district-name{color:var(--sodium-2);}
.district-card.active .district-meta{color:rgba(242,189,92,.75) !important;}

/* 街区卡：势力色走 --fcolor（lead 内联） */
.block-card{
  color:var(--paper-3);
  border-left-color:var(--fcolor,var(--fac,var(--line-strong)));
}
.block-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.block-card-top b{
  color:var(--paper);
  font-size:12.5px;
  letter-spacing:.03em;
}
.block-sub{
  margin-top:1px;
  color:var(--muted);
  font-size:10px;
  line-height:1.45;
}
.block-eco{
  display:flex;
  flex-direction:column;
  gap:1px;
  margin-top:5px;
}
.block-eco .eco-row{gap:6px;}
.block-eco .eco-label{
  width:auto;
  min-width:38px;
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size:9.5px;
}
.block-eco .eco-label .ico{width:12px;height:12px;opacity:.8;}
.block-eco .eco-num{
  margin-left:auto;
  color:var(--muted-2);
  font-size:9px;
}
.block-eco .eco-pip{width:7px;height:7px;}
.block-tags{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:6px;
}
.block-tags .tag{height:17px;padding:0 5px;font-size:9px;}
.block-tags .tag .ico{width:11px;height:11px;}

/* 区块详情 */
.block-detail{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#15191e,#0f1216);
}
.block-detail .panel-title{font-size:15px;color:var(--paper);}
.block-detail p{
  color:var(--paper-3);
  font-size:11.5px;
  line-height:1.65;
}
.block-detail .warn{color:#d9a08c;}
.eco-detail{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:7px 0;
  border-top:1px dashed var(--line-2);
  border-bottom:1px dashed var(--line-2);
}
.eco-detail .eco-label{width:76px;}

/* 出发面板 */
.travel-panel{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 13px;
  border:1px solid rgba(226,163,62,.28);
  border-left:3px solid var(--sodium);
  background:linear-gradient(180deg,rgba(226,163,62,.11),rgba(11,14,18,.97) 62%);
}
.travel-panel .panel-title{font-size:14px;color:var(--paper);}
.travel-panel .row{gap:8px;flex-wrap:wrap;margin-top:2px;}
.travel-panel .btn.primary{flex:1 1 auto;}
.route-info{
  display:flex;
  flex-wrap:wrap;
  gap:3px 12px;
  color:var(--paper-3);
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.6;
}
.route-info b{color:var(--paper);font-weight:700;}
.route-info.warn{color:var(--sodium);}
.route-danger{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border:1px solid rgba(163,58,58,.5);
  background:rgba(163,58,58,.12);
  color:#e8a08e;
  font-family:var(--font-mono);
  font-size:10.5px;
  line-height:1.5;
}
.route-danger b{color:#f2b6a4;}
.route-danger.warn{
  border-color:rgba(226,163,62,.5);
  background:rgba(226,163,62,.10);
  color:var(--sodium-2);
}

/* 图例：纸片 + 真实色点/线段子元素（覆盖旧的 ::before 圆点） */
.map-legend{
  border:1px solid #a99d83;
  color:#2a2519;
}
.map-legend .map-legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  color:#2a2519;
  font-size:10.5px;
}
.map-legend .map-legend-item::before{content:none;display:none;}
.map-legend .dot{
  flex:0 0 auto;
  display:inline-block;
  width:9px;
  height:9px;
  border:1px solid rgba(20,20,16,.45);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.map-legend .line{
  flex:0 0 auto;
  display:inline-block;
  width:22px;
  height:0;
  border-top:2px dashed #4a4230;
}
.map-legend .line.overgrown{border-top-style:dotted;border-top-color:#5d6b3c;}

/* ---------------------------- D. 市场 ---------------------------- */
.market-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:12px 0 10px;
  padding-bottom:2px;
  border-bottom:1px solid var(--line);
}
.market-toolbar .tabs{border-bottom:0;}
.market-toolbar .row{gap:6px;}
.market-list{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#13171c,#0f1216);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.market-screen .item-row{
  grid-template-columns:34px minmax(0,1fr) 86px 158px;
  gap:10px;
  padding:9px 12px;
}
.price-col{
  display:flex;
  flex-direction:column;
  gap:2px;
  align-items:flex-end;
  text-align:right;
}
.price-col .price{font-size:13px;line-height:1.4;}
.item-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  flex-wrap:wrap;
}
.item-actions .btn.small{padding:3px 8px;font-size:10.5px;letter-spacing:.04em;}
.market-screen .market-side{gap:12px;}
.market-screen .market-side .panel{background:linear-gradient(180deg,#15191e,#101317);}
.market-screen .cargo-mini{
  margin-top:8px;
  color:var(--paper-3);
  line-height:1.7;
}
.market-screen .item-row .item-meta .trend{display:inline-flex;}
.market-screen .item-row .item-meta .ico{width:12px;height:12px;}

/* ---------------------------- E. 房车 ---------------------------- */
.vgarage{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--gap);
  align-items:start;
}
.vgarage > .wide,
.vgarage > .panel.wide{grid-column:1/-1;}
.rv-figure{
  min-height:0;
  padding:14px;
}
.rv-figure .rv-img{
  display:block;
  width:100%;
  height:auto;
  max-height:380px;
  object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.55));
}
.rv-figure-caption{
  position:absolute;
  left:14px;
  right:14px;
  bottom:10px;
  color:var(--paper-3);
  letter-spacing:.06em;
  text-shadow:0 1px 5px rgba(0,0,0,.95);
}
.vehicle-screen .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.vehicle-screen .stat-grid .stat{padding:5px 7px;}
.vehicle-card-body{
  display:flex;
  flex-direction:column;
  gap:5px;
  flex:1 1 auto;
  min-width:0;
}
.vehicle-art .art-img{
  object-fit:contain;
  height:auto;
}
.vehicle-card-grid{gap:12px;}
.vehicle-card-grid .vehicle-card{height:100%;}
.vehicle-card .tag{margin-left:auto;}
/* 槽位：vehicle.js 里每个槽位是 .panel.slot-card，恢复面板纵向布局 */
.slot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:10px;
  align-items:start;
}
.panel.slot-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:0;
  border-left:1px solid var(--line);
  background:linear-gradient(180deg,#15191e,#101317);
}
.panel.slot-card .panel-head{padding:7px 11px;min-height:32px;}
.panel.slot-card .panel-title{font-size:13px;}
.panel.slot-card .panel-body{display:flex;flex-direction:column;gap:6px;padding:9px 10px 10px;}
.panel.slot-card .panel-body > .tiny{color:var(--muted);}
.mod-card{padding:8px 10px;}
.mod-name{color:var(--paper);font-size:12.5px;letter-spacing:.02em;}
.mod-card .row{gap:6px;}
.mod-card .tag{height:16px;font-size:9.5px;}
.mod-card > .tiny{line-height:1.5;}
.mod-effects{margin-top:1px;}
.mod-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:3px;
  padding-top:5px;
  border-top:1px dashed var(--line-2);
}
.mod-foot .tiny{color:var(--muted);font-family:var(--font-mono);font-size:9.5px;line-height:1.5;}
.mod-foot .btn.small{flex:0 0 auto;}
@supports selector(:has(*)){
  .vgarage:has(> .slot-grid){grid-template-columns:minmax(0,1fr);}
  .vgarage:has(> .slot-grid) > .slot-grid{grid-template-columns:repeat(auto-fit,minmax(310px,1fr));}
  .vgarage:has(> .slot-grid) > .rv-figure{max-width:540px;}
}
.service-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.service-row > div{min-width:0;flex:1 1 auto;}
.service-row .btn.small{flex:0 0 auto;margin-top:2px;}
.service-list{display:flex;flex-direction:column;gap:6px;margin-top:7px;}
.faction-desc{margin:0;color:var(--paper-3);font-size:11.5px;line-height:1.6;}

/* ---------------------------- F. 委托 ---------------------------- */
.tasks-screen .screen-body{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:12px;
  align-items:start;
}
.tasks-screen .screen-body > .empty,
.tasks-screen .screen-body > .empty-state{grid-column:1/-1;}
.task-card{
  border-left:4px solid var(--fcolor,#b6a98e);
}
.task-title{
  color:#1b160d;
  font-family:var(--font-head);
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.03em;
  line-height:1.3;
}
.task-head{align-items:flex-start;}
.task-head > div{min-width:0;}
.task-meta{color:#5d5442;}
.task-meta .ico{width:12px;height:12px;color:#7a6a49;vertical-align:-2px;}
.task-card p.tiny{color:#3b3425;line-height:1.6;}
.task-req{
  padding:4px 8px;
  border-left:2px solid rgba(181,80,42,.55);
  background:rgba(255,255,255,.16);
  color:#3b3425;
  font-size:11px;
  line-height:1.6;
}
.task-req b{color:#1b160d;}
.task-card .task-reward{
  display:block;
  padding:5px 8px;
  border:1px dashed rgba(60,48,30,.38);
  background:rgba(255,255,255,.18);
  color:#3b3425;
  font-size:11px;
  line-height:1.6;
}
.task-card .task-reward b{color:#1b160d;}
.task-card .deadline{white-space:nowrap;}
.task-card-wrap{display:flex;flex-direction:column;gap:4px;}
.task-hint{padding:0 4px;color:#5d5442;font-size:10.5px;line-height:1.5;}
.task-card-wrap .task-hint.good{color:#3f4a29;}
.task-card.done,
.task-card.failed{opacity:.84;filter:grayscale(.32);}
.task-card.request-card{border-left-color:#8c5a2c;}
.tasks-screen .tab{font-size:12px;}

/* ---------------------------- G. 势力 ---------------------------- */
.faction-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:14px;
  align-items:start;
}
.faction-card{
  border-top-color:var(--fcolor,var(--fac,var(--rust)));
  background:
    linear-gradient(180deg,var(--fcolor,var(--fac-soft,rgba(231,221,200,.04))),transparent 0.001%),
    linear-gradient(180deg,#171b20,#101317);
}
.faction-head{align-items:flex-start;}
.faction-head > div{min-width:0;}
.faction-name{font-size:15px;}
.faction-motto{margin-top:1px;}
.rep-tier.hostile{color:#e08a7c;}
.rep-tier.cold{color:#b9ad92;}
.rep-tier.neutral{color:var(--paper-3);}
.rep-tier.friendly{color:var(--rad-2);}
.rep-tier.ally{color:var(--sodium-2);}
.rel-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-family:var(--font-mono);
  font-size:10.5px;
}
.rel-table th{
  padding:5px 6px;
  border-bottom:1px solid var(--line);
  color:var(--muted-2);
  font-weight:400;
  font-size:9px;
  letter-spacing:.05em;
  text-align:center;
  white-space:nowrap;
}
.rel-table th:first-child{text-align:left;color:transparent;}
.rel-table td{
  padding:4px 6px;
  border-bottom:1px dashed var(--line-2);
  text-align:center;
  color:var(--paper-3);
  white-space:nowrap;
}
.rel-table td:first-child{
  text-align:left;
  color:var(--muted);
  font-family:var(--font-sans);
  font-size:10.5px;
}
.rel-table td.good{color:var(--rad-2);}
.rel-table td.bad{color:#e08a7c;}
.rel-table td.muted{color:var(--muted-2);}
.rel-table tr:hover td{background:rgba(231,221,200,.035);}

/* ---------------------------- H. 档案 ---------------------------- */
.log-list{
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - 300px);
  overflow-y:auto;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#111418,#0d1013);
}
.log-list .log-item{padding:7px 12px;font-size:12.5px;}
.radio-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:10px;
  align-items:start;
}
.radio-item{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-left:3px solid var(--blue);
  background:linear-gradient(180deg,#141920,#101318);
  text-align:left;
  cursor:pointer;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),transform var(--t-fast) var(--ease);
}
.radio-item:hover{
  border-color:rgba(74,127,168,.55);
  background:linear-gradient(180deg,rgba(74,127,168,.12),#101318 70%);
  transform:translateY(-1px);
}
.radio-item.seen{opacity:.62;border-left-color:var(--muted-2);}
.radio-title{
  color:var(--paper);
  font-family:var(--font-head);
  font-size:13.5px;
  letter-spacing:.03em;
  line-height:1.35;
}
.npc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:10px;
  align-items:start;
}
.npc-card{
  display:flex;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-left:3px solid var(--fcolor,var(--line-strong));
  background:linear-gradient(180deg,#14181d,#101318);
}
.npc-card.locked{opacity:.5;filter:grayscale(.55);}
.npc-portrait{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-strong);
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.06),#0a0d11 72%);
  color:var(--muted);
}
.npc-portrait .ico{width:22px;height:22px;}
.npc-name{
  color:var(--paper);
  font-family:var(--font-head);
  font-size:14px;
  letter-spacing:.03em;
  line-height:1.3;
}
.npc-card p{margin-top:3px;line-height:1.55;}
.journal-screen .stat-grid.big{grid-template-columns:repeat(4,minmax(0,1fr));}

/* ---------------------------- I. 营地 ---------------------------- */
.camp-art{
  position:relative;
  min-height:420px;
  border:1px solid var(--line);
  background:#0b0e12;
  overflow:hidden;
}
.camp-art .art-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.88;
}
.camp-image-fallback{display:none;}
.camp-overlay{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:2;
  padding:10px 12px;
  border-left:3px solid var(--sodium);
  background:rgba(9,11,14,.82);
  box-shadow:0 10px 24px rgba(0,0,0,.55);
}
.camp-overlay p{margin-top:3px;color:var(--paper-3);}
.camp-options{display:flex;flex-direction:column;gap:8px;}
.camp-option{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:11px 13px;
  border:1px solid var(--line);
  border-left:3px solid var(--line-strong);
  background:linear-gradient(180deg,#171b21,#101318);
  text-align:left;
  cursor:pointer;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),transform var(--t-fast) var(--ease);
}
.camp-option:hover{
  border-color:rgba(226,163,62,.5);
  border-left-color:var(--sodium);
  background:linear-gradient(180deg,rgba(226,163,62,.10),#101318 70%);
  transform:translateY(-1px);
}
.camp-option[disabled],.camp-option:disabled{
  opacity:.46;
  cursor:not-allowed;
  transform:none;
  filter:grayscale(.4);
}
.camp-option-name{
  color:var(--paper);
  font-family:var(--font-head);
  font-size:13.5px;
  letter-spacing:.04em;
}
.camp-option-hint{color:var(--muted);line-height:1.55;}
.camp-option.direct{border-left-color:var(--sodium);}

/* ---------------------------- J. 遭遇 ---------------------------- */
.encounter-screen .encounter-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:14px;
  padding-bottom:11px;
  border-bottom:1px solid var(--line);
}
.encounter-screen .encounter-head b{
  font-size:15px;
  text-shadow:none;
}
.encounter-screen .round-pips{align-items:center;gap:5px;}
.encounter-screen .round-pips .tiny{
  margin-left:6px;
  color:var(--muted);
  font-size:10.5px;
  letter-spacing:.06em;
}
.encounter-screen .round-pip{width:18px;height:6px;}
.encounter-screen .encounter-art{
  position:relative;
  aspect-ratio:auto;
  min-height:560px;
  border:1px solid var(--line);
  background:#0a0d10;
  box-shadow:inset 0 0 90px rgba(0,0,0,.8);
  overflow:hidden;
}
.encounter-screen .encounter-art > .art-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.86;
}
.encounter-screen .encounter-art::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,9,12,.55),transparent 26%,transparent 42%,rgba(7,9,12,.82)),
    radial-gradient(ellipse at 50% 48%,transparent 40%,rgba(0,0,0,.6) 100%);
}
.encounter-screen .encounter-art > .enemy-panel{
  position:absolute;
  left:14px;
  right:14px;
  top:14px;
  z-index:2;
  background:linear-gradient(180deg,rgba(24,14,16,.94),rgba(12,10,12,.88));
  border:1px solid rgba(163,58,58,.5);
  box-shadow:0 12px 26px rgba(0,0,0,.55);
}
.enemy-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.enemy-hp{
  position:relative;
  height:8px;
  overflow:hidden;
  border:1px solid rgba(163,58,58,.45);
  background:#0a0c0f;
}
.enemy-hp-fill{
  height:100%;
  width:0;
  background:linear-gradient(90deg,#7c2a24,var(--alert-2));
  box-shadow:0 0 10px rgba(163,58,58,.5);
  transition:width var(--t-slow) var(--ease);
}
.encounter-screen .encounter-art > .battle-log{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:2;
  max-height:46%;
  overflow-y:auto;
  padding:8px 10px;
  border:1px solid var(--line-strong);
  background:rgba(8,10,13,.9);
  box-shadow:0 -10px 28px rgba(0,0,0,.6);
}
.battle-log .battle-line{padding:4px 7px;}
.encounter-screen .encounter-side{gap:12px;}
.encounter-screen .choice-list{display:flex;flex-direction:column;gap:7px;}
.encounter-screen .choice-btn{width:100%;}
.encounter-screen .choice-hint{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  margin-top:3px;
}
.encounter-screen .encounter-result{gap:9px;padding:12px;}
.encounter-screen .encounter-result .btn{margin-top:4px;}
.encounter-screen .stat-grid{gap:6px;}

/* ---------------------------- K. 结局 ---------------------------- */
.ending{
  display:block;
  padding:0;
  text-align:left;
  background:#07080a;
}
.ending-bg{position:absolute;inset:0;overflow:hidden;}
.ending-bg .ending-art{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.5;
  filter:grayscale(.3) contrast(1.04);
}
.ending-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(7,8,10,.94) 0%,rgba(7,8,10,.74) 46%,rgba(7,8,10,.34) 100%),
    linear-gradient(180deg,rgba(7,8,10,.66),transparent 26%,transparent 58%,rgba(7,8,10,.92));
}
.ending-main{
  position:relative;
  z-index:2;
}
.ending-title{
  margin:6px 0 4px;
  text-align:left;
  text-shadow:0 2px 0 #150e07,0 0 44px rgba(226,163,62,.22);
}
.ending-sub{text-align:left;}
.ending-text-wrap{max-width:740px;margin-top:14px;}
.ending-text{
  max-width:none;
  margin:0 0 10px;
  text-align:left;
  color:var(--paper-2);
  font-size:14.5px;
  line-height:1.9;
  text-shadow:0 1px 8px rgba(0,0,0,.85);
}
.ending-columns{align-items:start;}
.ending-columns .panel{background:rgba(13,16,20,.9);}
.ending-columns .panel-body{padding:12px;}
.ending-columns .stat-table{font-size:12px;}
.stat-table{margin:0;}
.stat-table td{padding:5px 8px;}
.ending-footer{
  margin-top:22px;
  color:var(--muted-2);
  font-size:10px;
  letter-spacing:.14em;
}
.unlock-card{
  gap:10px;
  color:#241e12;
  padding:9px 11px;
}
.unlock-card b{color:#1b160d;}
.unlock-card .tiny{color:#5d5442;}
.unlock-card .vehicle-art{
  width:104px;
  height:54px;
  flex:0 0 104px;
  padding:3px;
  border:1px solid rgba(40,32,18,.28);
  background:#0d1114;
}
.unlock-card .vehicle-art .art-img{object-fit:contain;height:100%;}
.unlock-card .tag{margin-left:auto;}
.unlock-card.locked{filter:grayscale(.6);opacity:.7;}
.ending.dead .ending-title{color:#d9b6a8;text-shadow:0 0 40px rgba(163,58,58,.3);}

/* ---------------------------- L. 其它集成细节 ---------------------------- */
.art-img{display:block;}
.emblem-img{display:block;width:100%;height:100%;object-fit:contain;}
.table-wrap{overflow-x:auto;}
.stat-grid.big{grid-template-columns:repeat(4,minmax(0,1fr));}
.screen-body.empty-state{
  border:0;
  background:none;
  min-height:0;
  padding:0;
}
.empty h2{
  margin:2px 0 4px;
  color:var(--paper);
  font-family:var(--font-head);
  font-size:20px;
  letter-spacing:.06em;
}
.empty .ico{width:26px;height:26px;color:var(--muted);margin-bottom:4px;}
.settings-screen .panel-body .row{min-height:34px;}
.settings-screen .grid-2{align-items:start;}
.trend .ico{width:12px;height:12px;opacity:.9;}
.trend::before{display:none;}
.trend.up .ico,.trend.down .ico{vertical-align:0;}
.log-feed .log-item .ico{width:13px;height:13px;vertical-align:-2px;}

/* 屏幕级：1280×800 适配 */
@media (max-height:820px){
  .map-screen .map-side{max-height:calc(100vh - 292px);}
  .encounter-screen .encounter-art{min-height:480px;}
  .camp-art{min-height:340px;}
  .log-list{max-height:calc(100vh - 280px);}
}
@media (max-width:1360px){
  .map-screen .item-row{grid-template-columns:30px minmax(0,1fr) 78px 142px;}
  .market-screen .item-row{grid-template-columns:30px minmax(0,1fr) 74px 142px;}
  .item-actions .btn.small{padding:3px 6px;font-size:10px;}
  .vgarage{grid-template-columns:minmax(0,1fr);}
  .faction-grid{grid-template-columns:minmax(0,1fr);}
  .tasks-screen .screen-body{grid-template-columns:minmax(0,1fr);}
}


/* =========================================================================
   集成修订 2 · 2026-11-11 · 对齐 lead 最新的两行 HUD 与遭遇/序章结构
   （lead 在 overrides.css 里已接管顶栏 flex 骨架；这里只调分配与细节）
   ========================================================================= */

/* 资源 chips 按内容宽度，目标行吃掉剩余宽度并省略号收缩，避免 1280 下被截断 */
.topbar .hud-row .hud-chips{flex:0 0 auto;overflow:visible;}
.topbar .hud-row .hud-chip{flex:0 0 auto;}
.topbar .hud-objective-text{flex:0 1 auto;min-width:0;}
.topbar .hud-objective{overflow:hidden;}
.topbar .hud-threat{flex:0 0 auto;}
@media (max-width:1360px){
  .topbar .hud-objective-text{max-width:34vw;}
}
@media (max-width:1180px){
  .topbar .hud-row .hud-chips{flex:0 1 auto;}
  .topbar .hud-row .hud-chip .hud-label{display:none;}
}

/* 遭遇：lead 已把敌人面板与战斗日志移出画面，恢复文档流；画面保持 16:6.4 */
.encounter-screen .enemy-hp{
  display:block;
  height:auto;
  overflow:visible;
  border:0;
  background:none;
  padding:0;
}
.encounter-screen .enemy-hp .bar{
  height:10px;
  border:1px solid rgba(163,58,58,.42);
  background:#150d0d;
  overflow:hidden;
  margin-bottom:5px;
}
.encounter-screen .enemy-hp .enemy-hp-fill{
  height:100%;
  background:linear-gradient(90deg,#7d2620,var(--alert-2));
  box-shadow:inset 0 0 8px rgba(0,0,0,.5);
}
.encounter-screen .encounter-art{
  min-height:0;
  aspect-ratio:16 / 6.4;
  max-height:340px;
}
.encounter-screen .encounter-art > .art-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.encounter-screen .encounter-art > .encounter-art-label{z-index:2;}
.encounter-screen .encounter-main > .enemy-panel{
  position:relative;
  left:auto;
  right:auto;
  top:auto;
  z-index:auto;
}
.encounter-screen .encounter-main > .battle-log{max-height:262px;}
.encounter-screen .encounter-intro{line-height:1.65;}

/* 序章正文（lead 已改为 .prologue-copy） */
.prologue-copy{
  margin:0;
  max-width:46ch;
  color:var(--paper-2);
  font-size:15.5px;
  line-height:1.9;
}
.prologue-text{max-height:100%;}

/* 地图侧栏：保证 900 与 800 高下"出发"面板始终在视口内（sticky 吸底 + 限高） */
.map-screen .map-side{max-height:calc(100vh - 342px);min-height:300px;}
@media (max-height:820px){
  .map-screen .map-side{max-height:calc(100vh - 318px);}
}
.map-screen .map-side > .travel-panel{
  order:-1;
  flex:0 0 auto;
  position:sticky;
  top:0;
  bottom:auto;
  z-index:7;
  box-shadow:0 14px 26px rgba(0,0,0,.62);
}
.map-screen .map-side > .travel-panel + *{margin-top:0;}
/* 大区名以锚点居中，避免贴边被画布裁切 */
.map-svg .map-district-label{text-anchor:middle;}

/* 标题：统计行紧贴菜单下方，桌面与窄屏都留 12px，不重叠 */
.title-screen .title-meta{margin-top:-6px;margin-bottom:0;}


/* ---- 集成微调 3：声望条单行、锁定服务角标、房车蓝图满宽 ---- */
.faction-card .rep-row{flex-direction:row;align-items:center;gap:8px;}
.faction-card .rep-bar{flex:1 1 auto;}
.faction-card .rep-row > .mono{
  flex:0 0 auto;
  min-width:28px;
  color:var(--paper-3);
  font-size:10px;
  text-align:right;
}
.service-row.locked::after{content:none;display:none;}
.rv-figure{padding-bottom:34px;}
.rv-figure .rv-img{max-height:none;}
@supports selector(:has(*)){
  .vgarage:has(> .slot-grid) > .rv-figure{max-width:none;width:100%;}
}