/* ==========================================================================
   魔兽世界：无限 · 航线页（boats.html）
   --------------------------------------------------------------------------
   「航线图」不用位图地图，改用**站点流程条**：每条航线一行，起点 → 途经 → 终点，
   圆点 + 连接线 + 船/飞艇图标。理由：
     · 真实世界地图底图 1.4MB，且泽风岛不在图上，画不出完整关系；
     · 流程条在 360px 手机上天然折行，不需要横滑容器；
     · 新增航线用金色实线、经典航线用暗线，一眼能分出哪条是新开的。
   ========================================================================== */

.bt-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.bt-fact{
  min-width:118px;padding:11px 16px 12px;border-radius:10px;
  background:linear-gradient(180deg,rgba(28,24,16,.72),rgba(12,11,8,.78));
  border:1px solid rgba(216,180,90,.3);
}
.bt-fact b{display:block;font-family:var(--f-title);font-size:22px;color:var(--gold-hi);letter-spacing:.6px;line-height:1.2}
.bt-fact span{display:block;margin-top:3px;font-size:11.2px;color:var(--parch-3)}

/* ---------- 关键事实 ---------- */
.bt-key{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bt-k{
  padding:13px 15px;border-radius:10px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.022);
}
.bt-k b{display:block;font-size:13.4px;color:var(--gold-hi);letter-spacing:.3px;line-height:1.6}
.bt-k span{display:block;margin-top:5px;font-size:11.8px;color:var(--parch-3);line-height:1.65}

/* ---------- 航线卡 ---------- */
.bt-list{display:flex;flex-direction:column;gap:10px}
.bt-route{
  border:1px solid rgba(255,255,255,.08);border-radius:11px;
  background:linear-gradient(180deg,rgba(18,19,24,.8),rgba(10,11,14,.85));
  padding:13px 16px 14px;position:relative;overflow:hidden;
}
.bt-route.new{border-color:rgba(216,180,90,.42);
  background:linear-gradient(180deg,rgba(38,31,16,.75),rgba(12,11,9,.88))}
.bt-route.new::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#f4e3ae,#c9a34c);
}

.bt-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bt-badge{
  font-size:10.5px;padding:2px 8px;border-radius:4px;letter-spacing:.4px;
  color:#241a06;background:linear-gradient(180deg,#f4e3ae,#d3ae5a);
}
.bt-h b{font-size:14.6px;color:var(--parch);letter-spacing:.4px;font-weight:600}
.bt-route.new .bt-h b{color:var(--gold-hi)}
.bt-kind{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:11.2px;color:var(--parch-3);letter-spacing:.4px;
}
.bt-kind svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.bt-kind.ship{color:#8fb8e8}
.bt-kind.zeppelin{color:#e8c48f}

/* ---------- 站点流程条 ---------- */
.bt-line{display:flex;align-items:center;gap:0;margin-top:12px;flex-wrap:wrap;row-gap:8px}
.bt-stop{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  min-width:78px;padding:0 2px;
}
.bt-dot{
  width:11px;height:11px;border-radius:50%;
  background:#1b1e24;border:2px solid rgba(200,190,160,.55);
  box-shadow:0 0 0 3px rgba(0,0,0,.45);
}
.bt-route.new .bt-dot{border-color:#e8cb78;background:#3a2f14;
  box-shadow:0 0 0 3px rgba(0,0,0,.45),0 0 10px rgba(232,203,120,.45)}
.bt-stop b{font-size:12.4px;color:var(--parch);font-weight:600;white-space:nowrap;letter-spacing:.2px}
.bt-stop i{font-style:normal;font-size:10.5px;color:var(--parch-3);white-space:nowrap}
.bt-seg{
  flex:1 1 40px;min-width:34px;height:2px;position:relative;
  background:linear-gradient(90deg,rgba(200,190,160,.32),rgba(200,190,160,.12));
  margin:0 2px 22px;
}
.bt-route.new .bt-seg{
  background:linear-gradient(90deg,#e8cb78,rgba(232,203,120,.28));
}
.bt-seg::after{
  content:"";position:absolute;right:-1px;top:-2.5px;
  width:7px;height:7px;border-radius:50%;
  background:rgba(200,190,160,.55);
}
.bt-route.new .bt-seg::after{background:#e8cb78}
.bt-seg em{
  position:absolute;left:50%;top:-19px;transform:translateX(-50%);
  font-style:normal;font-size:9.5px;color:var(--parch-3);white-space:nowrap;letter-spacing:.2px;
}
.bt-note{margin-top:10px;font-size:12px;line-height:1.75;color:var(--parch-3)}
.bt-note b{color:var(--parch-2);font-weight:600}

/* ---------- 泽风岛 ---------- */
.bt-zeff{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bt-z{
  padding:14px 16px;border-radius:10px;
  border:1px solid rgba(216,180,90,.28);
  background:linear-gradient(180deg,rgba(34,28,15,.5),rgba(10,11,14,.7));
}
.bt-z b{display:block;font-size:13.2px;color:var(--gold-hi);letter-spacing:.4px}
.bt-z span{display:block;margin-top:6px;font-size:11.8px;line-height:1.7;color:var(--parch-3)}
.bt-z span b{display:inline;font-size:inherit;color:var(--parch)}

/* ---------- 码头 ---------- */
.bt-ports{display:flex;flex-direction:column;gap:12px}
.bt-cont{border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:12px 14px;background:rgba(255,255,255,.02)}
.bt-cont h4{
  font-family:var(--f-title);font-size:13.5px;letter-spacing:1.4px;
  color:var(--gold);margin-bottom:9px;
}
.bt-cont h4 span{font-family:var(--f-body);font-size:10.5px;color:var(--parch-3);letter-spacing:.3px;margin-left:6px}
.bt-chips{display:flex;flex-wrap:wrap;gap:7px}
.bt-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:20px;font-size:11.8px;
  color:var(--parch-2);background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
}
.bt-chip.n{color:#f0dfa4;border-color:rgba(216,180,90,.45);background:rgba(216,180,90,.09)}
.bt-chip em{font-style:normal;font-size:10.5px;color:var(--parch-3)}

/* ---------- FAQ ---------- */
.bt-faq{display:flex;flex-direction:column;gap:9px}
.bt-faq details{
  border:1px solid rgba(255,255,255,.08);border-radius:9px;
  background:rgba(255,255,255,.022);padding:12px 16px;
}
.bt-faq summary{cursor:pointer;font-size:13.6px;color:var(--parch);font-weight:600;list-style:none}
.bt-faq summary::-webkit-details-marker{display:none}
.bt-faq summary::before{content:"▸";display:inline-block;width:16px;color:var(--gold);transition:transform .15s}
.bt-faq details[open] summary::before{transform:rotate(90deg)}
.bt-faq details p{margin:9px 0 0 16px;font-size:12.8px;line-height:1.85;color:var(--parch-2)}
.bt-faq details p b{color:var(--gold-hi);font-weight:600}

.bt-src{
  margin-top:22px;padding:13px 16px;border-radius:9px;font-size:12px;line-height:1.85;
  color:var(--parch-3);background:rgba(255,255,255,.022);border:1px dashed rgba(216,180,90,.24);
}
.bt-src b{color:var(--parch-2);font-weight:500}

/* ---------- 响应式 ---------- */
@media(max-width:1024px){
  .bt-key{grid-template-columns:1fr 1fr}
  .bt-zeff{grid-template-columns:1fr}
}
@media(max-width:820px){
  .bt-key{grid-template-columns:1fr}
  .bt-fact{min-width:calc(50% - 5px)}
  .bt-fact b{font-size:19px}
  .bt-route{padding:12px 13px 13px}
  .bt-h b{font-size:13.6px}
  .bt-kind{margin-left:0;width:100%;padding-left:2px}
  .bt-line{gap:0}
  .bt-stop{min-width:64px}
  .bt-stop b{font-size:11.6px;white-space:normal;text-align:center;line-height:1.4}
  .bt-seg{min-width:24px;flex:1 1 24px;margin-bottom:24px}
  .bt-seg em{font-size:9px}
  .bt-note{font-size:11.6px}
}
@media(max-width:380px){
  .bt-stop{min-width:56px}
  .bt-stop b{font-size:11px}
  .bt-kind{font-size:10.6px}
}

/* ==========================================================================
   §v372 航线图（世界地图 + 自绘 SVG 叠加层）+ 泽风岛小图
   --------------------------------------------------------------------------
   血染 2026-10-27：「航线页面 把他的地图也搬过来，内容自己检查下 核对下 完善优化一下」。
   底图＝游戏原生世界地图（羊皮纸，1024×683），航线/码头/标签＝本站自己的 SVG 叠加层：
     · 底色是浅羊皮纸 ⇒ 金色航线要配**暗色光晕**才立得住，白晕会糊进纸里；
     · 标签用深墨字 + 浅色描边（paint-order:stroke），压在浅底和深水面上都读得清；
     · 默认只显示「新增航线经过的 8 个码头」和地图边缘接续点，鼠标停在航线上再亮出该航线全部码头。
   ⛔ 不再做位图航线图：航线数据改了图就废，SVG 只换 d 就行。
   ========================================================================== */
.bt-map{margin:16px 0 0;padding:0}
.bt-canvas{
  position:relative;border-radius:12px;overflow:hidden;
  border:1px solid rgba(201,169,97,.38);background:#0b0b0e;
  box-shadow:0 22px 48px -30px #000,0 0 0 1px rgba(0,0,0,.5) inset;
}
.bt-base{display:block;width:100%;height:auto}
/* 四周压暗一圈，让航线从画面里浮出来，同时把亮羊皮纸压到跟深色版面对得上 */
.bt-wash{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(122% 96% at 50% 42%,rgba(8,8,12,0) 44%,rgba(8,8,12,.32) 100%);
  box-shadow:inset 0 0 54px 8px rgba(8,8,12,.26);
}
.bt-ovl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---------- 航线 ---------- */
.bt-halo{
  fill:none;stroke:rgba(46,30,8,.30);stroke-width:7;stroke-linecap:round;
  stroke-linejoin:round;transition:opacity .18s;
}
.bt-halo.new{stroke:rgba(46,30,8,.38);stroke-width:8.5}
.bt-line{
  fill:none;stroke:#4e7288;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  opacity:.9;transition:opacity .18s,stroke .18s,stroke-width .18s;
}
.bt-line.new{stroke:#ad7a1b;stroke-width:2.7;opacity:1}
.bt-line[data-travel="air"]{stroke-dasharray:7 5}

/* ---------- 码头 ---------- */
.bt-dot-halo{fill:rgba(252,244,226,.5)}
.bt-dot{fill:#7d4f10;stroke:#fbf3e0;stroke-width:1.5}
.bt-dock:not(.new) .bt-dot{fill:#3d5f72;stroke:#eef3f6;stroke-width:1.1}
.bt-dock:not(.new) .bt-dot-halo{fill:rgba(238,246,250,.32)}
.bt-dock text{
  font-family:var(--f-body);font-size:12.4px;fill:#2a1e0c;letter-spacing:.2px;
  paint-order:stroke;stroke:rgba(251,243,224,.94);stroke-width:3.6;stroke-linejoin:round;
  opacity:0;transition:opacity .18s;
}
.bt-dock.new text{opacity:1}

/* ---------- 地图边缘接续点 ---------- */
.bt-term-ring{fill:rgba(251,243,224,.9);stroke:#a4711c;stroke-width:1.8}
.bt-term-dot{fill:#a4711c}
.bt-term text{
  font-family:var(--f-body);font-size:11.8px;fill:#3b2a10;
  paint-order:stroke;stroke:rgba(251,243,224,.95);stroke-width:3.6;stroke-linejoin:round;
}

/* ---------- 高亮态（鼠标停在航线卡片上 / 点住） ---------- */
.bt-ovl.has-focus .bt-halo{opacity:.1}
.bt-ovl.has-focus .bt-line{opacity:.13}
.bt-ovl.has-focus .bt-line.on{opacity:1;stroke:#c8901f;stroke-width:3.4}
.bt-ovl.has-focus .bt-halo.on{opacity:1;stroke:rgba(40,24,4,.5);stroke-width:9}
.bt-ovl.has-focus .bt-dock{opacity:.28}
.bt-ovl.has-focus .bt-dock.on{opacity:1}
.bt-ovl.has-focus .bt-dock.on text{opacity:1}
.bt-ovl.has-focus .bt-term{opacity:.28}

/* ---------- 图例 ---------- */
.bt-legend{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:11px;
  font-size:12px;line-height:1.6;color:#9c988d;letter-spacing:.2px;
}
.bt-lg{display:inline-flex;align-items:center;gap:8px}
.bt-ln{display:inline-block;width:26px;height:0;border-top:2.6px solid #a4711c;border-radius:2px}
.bt-ln.old{border-top:1.9px solid #4e7288}
.bt-lgdot{
  display:inline-block;width:9px;height:9px;border-radius:50%;background:#7d4f10;
  box-shadow:0 0 0 2px rgba(251,243,224,.85);
}
.bt-lgterm{
  display:inline-block;width:11px;height:11px;border-radius:50%;
  border:1.8px solid #a4711c;background:rgba(251,243,224,.9);
}

/* ---------- 泽风岛小图 ---------- */
.bt-plate{
  display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:24px;
  align-items:center;margin:14px 0 24px;
}
.bt-pmap{
  position:relative;margin:0;border-radius:12px;overflow:hidden;
  border:1px solid rgba(201,169,97,.38);background:#0b0b0e;
  box-shadow:0 18px 40px -28px #000;
}
.bt-pname{
  position:absolute;left:57.5%;top:82%;transform:translate(-50%,-50%);
  font-size:12px;line-height:1.4;color:#2a1e0c;white-space:nowrap;
  padding:1px 7px 2px;border-radius:4px;background:rgba(251,243,224,.88);
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.bt-plate-dot{fill:#a4711c;stroke:#fbf3e0;stroke-width:2}
.bt-pinfo h3{
  margin:0 0 8px;font-family:var(--f-title);font-size:18px;letter-spacing:1.4px;
  color:var(--gold-hi);font-weight:700;
}
.bt-pinfo p{margin:0 0 14px;font-size:13px;line-height:1.75;color:#a9a69c}
.bt-parr{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.bt-parr li{display:flex;align-items:flex-start;gap:10px;font-size:12.8px;line-height:1.7;color:#b3afa2}
.bt-parr .bt-ln{flex:0 0 auto;margin-top:9px}
.bt-parr b{color:var(--parch);font-weight:600}

@media(max-width:900px){
  /* 小屏把图放进横向滚动容器：整张图缩到 360px 宽，标签会小到看不清 */
  .bt-map{overflow-x:auto;overflow-y:hidden;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .bt-canvas{min-width:700px}
  .bt-plate{grid-template-columns:1fr;gap:14px}
  .bt-pinfo h3{font-size:16px}
}
@media(max-width:820px){
  .bt-legend{font-size:11.6px;gap:6px 14px}
  .bt-lg:last-child{display:none}   /* 极窄屏省掉接续点图例，图上本来就有字 */
}