/* 外景直播（outing.js）：大场景图、地图进度条、到站牌、连麦小窗。只在 body.is-outing 下生效，别的节目一行不受影响。
   颜色、圆角、阴影全用设计系统的 token（design/tokens.css）。 */

/* ① 大场景图：铺在舞台背景（.bg）上面、画框（#fable-frame）下面；底下压暗一截给字幕和卡片流 */
.outing-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; display: none; }
body.is-outing.outing-away .outing-scene { display: block; }
.outing-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 38%;
  opacity: 0; transition: opacity 900ms var(--fb-ease-out); }
.outing-scene img.is-on { opacity: 1; }
.outing-scene::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5, 6, 8, .55) 0%, rgba(5, 6, 8, 0) 22%, rgba(5, 6, 8, 0) 52%, rgba(5, 6, 8, .82) 100%); }
.outing-lost { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); margin: 0; padding: 6px 14px; z-index: 2;
  border: 1px solid var(--fb-line-strong); border-radius: var(--fb-radius-pill); background: rgba(5, 6, 8, .72);
  color: var(--fb-ink-2); font: 500 14px/20px var(--font-body); letter-spacing: .04em; white-space: nowrap; }
/* 场景图就是她：舞台上那几个站着的立绘让给图；说话的人看头像、卡片和字幕 */
body.is-outing.outing-away #fable-arena .fable-people,
body.is-outing.outing-away #stage #lead, body.is-outing.outing-away #stage #foil, body.is-outing.outing-away #stage #ensemble { visibility: hidden; }
/* 狼人杀的环节（开场 / 夜里 / 竞选 / 发言 / 投票 / 散场）和「怎么玩」外景直播用不上：地图那一块顶替它们的位置 */
body.is-outing .st__side, body.is-outing .st-kick, body.is-outing #howto, body.is-outing #howto-card { display: none !important; }

/* ② ③ 左上角一块：到站牌 + 地图 */
.outing-hud { position: absolute; left: 28px; top: 160px; z-index: 16; display: grid; gap: 8px; width: max-content; max-width: 260px;
  padding: 10px 12px 12px; border: 1px solid var(--fb-line-strong); border-radius: var(--fb-radius-md);
  background: rgba(10, 13, 15, .78); box-shadow: var(--fb-shadow-card); color: var(--fb-ink); pointer-events: none; }
.outing-hud[hidden], body:not(.is-outing) .outing-hud, body:not(.is-outing) .outing-pip { display: none !important; }
.outing-chip { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; align-items: baseline; }
.outing-chip b { font: 400 20px/24px var(--font-display); color: var(--fb-neon-cyan); letter-spacing: .02em; }
.outing-chip span { font: 600 15px/22px var(--font-body); color: var(--fb-ink); }
.outing-chip small { grid-column: 1 / -1; font: 500 12px/16px var(--font-body); color: var(--fb-ink-2); }
.outing-map { display: grid; grid-template-columns: auto 1fr; align-items: stretch; column-gap: 6px; }
.outing-map svg { width: 100%; min-width: 150px; height: auto; display: block; overflow: visible; }
.om-layers { list-style: none; margin: 0; padding: 4px 0 0; display: grid; grid-auto-rows: 1fr; font: 500 10px/1 var(--font-body); color: var(--fb-ink-3); }
.om-layers li { display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; }
.om-layers li.is-home { color: var(--fb-neon-magenta); }
.om-floor { stroke: var(--fb-line); stroke-width: 1; }
.om-floor.is-home { stroke: var(--fb-magenta-tint); }
.om-path { fill: none; stroke: var(--fb-neon-cyan); stroke-width: 1.6; stroke-linejoin: round; opacity: .85; }
.om-stop { fill: var(--fb-night); stroke: var(--fb-neon-cyan); stroke-width: 1.4; }
.om-now { fill: var(--fb-neon-cyan); stroke: var(--fb-ink); stroke-width: 1; filter: drop-shadow(0 0 4px var(--fb-neon-cyan)); }
.om-left { fill: var(--fb-ink-3); }

/* 连麦小窗：店里那位开口时弹出来，像直播里的连麦窗。电脑上挂在地图底下（右边一栏是卡片流），手机上挂右上角 */
.outing-pip { position: absolute; left: 28px; top: 356px; z-index: 16; margin: 0; width: 132px; overflow: hidden;
  border: 2px solid var(--who, var(--fb-neon-cyan)); border-radius: var(--fb-radius-md); background: var(--fb-surface-1);
  box-shadow: var(--fb-shadow-pop); animation: outing-pip-in var(--fb-dur-enter) var(--fb-ease-pop) both; pointer-events: none; }
.outing-pip img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--fb-surface-2); }
.outing-pip figcaption { display: grid; gap: 2px; padding: 6px 8px 8px; }
.outing-pip b { font: 600 13px/18px var(--font-body); color: var(--fb-ink); }
.outing-pip small { font: 500 11px/15px var(--font-body); color: var(--fb-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes outing-pip-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .outing-scene img { transition: none; } .outing-pip { animation: none; } }

/* 手机竖屏：图铺在上半截（人在画面偏右，裁的时候保住她），地图、到站牌缩成一条，连麦小窗缩小 */
@media (max-width: 600px) {
  .outing-scene img { object-position: 62% 40%; }
  .outing-scene::after { background: linear-gradient(180deg, rgba(5, 6, 8, .6) 0%, rgba(5, 6, 8, 0) 18%, rgba(5, 6, 8, 0) 34%, rgba(5, 6, 8, .9) 52%, rgba(5, 6, 8, .96) 100%); }
  .outing-hud { left: 10px; top: 122px; max-width: 58vw; padding: 5px 8px 6px; gap: 3px; background: rgba(10, 13, 15, .66); }
  .outing-chip { column-gap: 6px; }
  .outing-chip b { font-size: 14px; line-height: 17px; }
  .outing-chip span { font-size: 12px; line-height: 17px; }
  .outing-chip small { font-size: 10px; line-height: 13px; }
  .outing-map { grid-template-columns: 1fr; }
  .outing-map svg { min-width: 0; width: 132px; }
  .om-layers { display: none; } /* 竖屏只留线和点：层名看到站牌上那一行就够了 */
  .outing-pip { left: auto; right: 10px; top: 122px; width: 84px; }
  .outing-pip figcaption { padding: 4px 6px 6px; }
  .outing-pip b { font-size: 11px; line-height: 14px; }
  .outing-pip small { display: none; }
  .outing-lost { top: 30%; font-size: 12px; }
}
/* 手机横屏（矮）：一块缩到左上角 */
@media (max-height: 520px) and (min-width: 601px) {
  .outing-hud { left: 10px; top: 96px; padding: 5px 8px 6px; gap: 3px; background: rgba(10, 13, 15, .66); }
  .outing-chip b { font-size: 15px; line-height: 18px; }
  .outing-chip span { font-size: 13px; line-height: 18px; }
  .outing-map { grid-template-columns: 1fr; }
  .outing-map svg { min-width: 0; width: 120px; }
  .om-layers { display: none; }
  .outing-pip { left: auto; right: 10px; top: 96px; width: 92px; }
  .outing-pip small { display: none; }
}