/* ════════════════════════════════════════════════════════════
   游友邮轮 · 语音导览「讲解卡片」+ 竖屏直播间模式
   - 到站/到港/到码头自动弹出的讲解卡片，可点卡片任意处或 ✕ 关闭
   - 支持照片画廊 / 视频播放
   - ?live=1 竖屏直播间模式（抖音直播伴侣可直接采集窗口）
   ════════════════════════════════════════════════════════════ */

:root{
  --nc-blue:#0e3a6e;
  --nc-orange:#f58220;
  --nc-ink:#1a2733;
  --nc-line:#e6edf3;
  --nc-soft:#f2f7fc;
}

/* 卡片遮罩：底部略压暗、顶部透明，地球仍可见（方便边看地球边讲解） */
.narrCard{
  position:absolute; inset:0; z-index:60;
  display:none;
  align-items:flex-end; justify-content:center;
  padding:0 12px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(8,30,48,.55) 0%, rgba(8,30,48,.28) 38%, rgba(8,30,48,0) 72%);
  -webkit-tap-highlight-color:transparent;
}
.narrCard.on{ display:flex; animation:narrFade .25s ease; }
@keyframes narrFade{ from{opacity:0} to{opacity:1} }

.narrCardInner{
  position:relative;
  width:min(720px,100%);
  max-height:72vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:#fff;
  border-radius:18px;
  box-shadow:0 14px 50px rgba(8,30,48,.35);
  padding:16px 16px 14px;
  transform:translateY(22px) scale(.985);
  opacity:0;
  animation:narrPop .32s cubic-bezier(.2,.9,.25,1) forwards;
}
@keyframes narrPop{ to{ transform:translateY(0) scale(1); opacity:1; } }

.narrClose{
  position:absolute; top:10px; right:10px; z-index:3;
  width:34px; height:34px; border-radius:17px;
  border:none; background:rgba(14,58,110,.08); color:#0e3a6e;
  font-size:16px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
}
.narrClose:active{ background:rgba(14,58,110,.18); }

.narrHead{ display:flex; align-items:center; gap:10px; margin:2px 38px 10px 2px; flex-wrap:wrap; }
.narrPort{ font-size:19px; font-weight:800; color:var(--nc-blue); line-height:1.2; }
.narrDay{ font-size:12px; font-weight:800; color:#fff; background:var(--nc-orange); border-radius:999px; padding:3px 10px; white-space:nowrap; }
.narrLive{ font-size:11px; font-weight:800; color:#fff; background:#e23b3b; border-radius:999px; padding:3px 9px; letter-spacing:.5px; animation:narrBlink 1.4s infinite; }
@keyframes narrBlink{ 50%{ opacity:.45; } }

/* 媒体区：照片画廊 / 视频 / 占位 */
.narrMedia{ margin:2px 0 10px; }
.narrGallery{ display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
.narrImg{ height:150px; border-radius:12px; object-fit:cover; scroll-snap-align:start; flex:0 0 auto; background:#eef3f8; box-shadow:0 2px 8px rgba(8,30,48,.12); }
.narrVideo{ width:100%; max-height:240px; border-radius:12px; background:#000; display:block; }
.narrMediaEmpty{
  height:88px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg,#eef3f8,#eef3f8 12px,#e7eef6 12px,#e7eef6 24px);
  color:#7d93a8; font-size:13px; font-weight:600;
  border:1px dashed #cdd9e4;
}

.narrBody{ font-size:14px; line-height:1.72; color:var(--nc-ink); }
.narrBlock{ margin-top:9px; }
.narrLb{ font-weight:800; color:var(--nc-blue); }
.narrSub{ margin-top:11px; background:var(--nc-soft); border-left:3px solid var(--nc-orange); border-radius:0 10px 10px 0; padding:9px 12px; font-size:13.5px; line-height:1.7; color:#27425c; }
.narrSub.empty{ display:none; }

.narrActs{ display:flex; gap:8px; margin-top:13px; }
.narrActs .btn{ flex:1; min-height:46px; }
.narrVerse{ margin-top:9px; font-size:10.5px; color:#9aa7b4; line-height:1.5; display:flex; gap:8px; align-items:baseline; }
.narrProg{ margin-left:auto; font-weight:800; color:var(--nc-orange); white-space:nowrap; }

/* ═══ 竖屏直播间模式（?live=1） ═══ */
body.live .tabBar,
body.live .navPill,
body.live .calcQuick,
body.live .layerBtn,
body.live .layerPanel,
body.live .globeTip,
body.live .brandbar{ display:none !important; }

body.live .narrCard{
  padding:0 0 calc(96px + env(safe-area-inset-bottom)) 0;
  align-items:flex-end;
  background:linear-gradient(to top, rgba(8,30,48,.62) 0%, rgba(8,30,48,.3) 42%, rgba(8,30,48,0) 75%);
}
body.live .narrCardInner{
  width:100%; max-width:100%; border-radius:20px 20px 0 0;
  max-height:80vh; padding:20px 20px 18px;
}
body.live .narrPort{ font-size:23px; }
body.live .narrBody{ font-size:16px; line-height:1.8; }
body.live .narrImg{ height:220px; }
body.live .narrSub{ font-size:15px; }
body.live .narrActs .btn{ min-height:54px; font-size:15px; }

/* 开播遮罩（竖屏模式首个手势：解锁音频 + 开讲） */
.liveStart{
  position:absolute; inset:0; z-index:80;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; background:rgba(6,22,38,.82); color:#fff; text-align:center; padding:24px;
}
.liveStart.on{ display:flex; }
.liveStart .lsT{ font-size:22px; font-weight:800; letter-spacing:.5px; }
.liveStart .lsS{ font-size:13px; color:#bcd2e6; max-width:340px; line-height:1.7; }
.liveStart .lsBtn{
  margin-top:6px; padding:15px 38px; border:none; border-radius:999px;
  background:linear-gradient(180deg,#ffb457,#f58220); color:#fff;
  font-size:17px; font-weight:800; box-shadow:0 10px 30px rgba(245,130,32,.5); cursor:pointer;
}
.liveStart .lsBtn:active{ transform:translateY(2px); }
.liveStart .lsBadge{ font-size:12px; font-weight:800; color:#fff; background:#e23b3b; border-radius:999px; padding:4px 12px; letter-spacing:1px; animation:narrBlink 1.4s infinite; }