/* /live/stream  —  災害監視 Live 配信レイアウト  (1920 x 1080 固定)
 *
 *  ┌──────────────────────────────────────────────────────────┐
 *  │ HEADER  1920 x 72   … 名称 / 時刻 / カテゴリ件数 / LIVE      │
 *  ├──────────┬───────────────────────────┬──────────────────┤
 *  │ 左カラム   │        中央 全国マップ        │   右カラム        │
 *  │ 476px     │        flex (=900px)        │   476px          │
 *  │ ┌地震┐    │  全国の警戒地点をパルス表示    │  ┌鉄道┐          │
 *  │ │458px│   │  平穏時「現在、表示対象なし」  │  │458px│         │
 *  │ └────┘   │                             │  └────┘         │
 *  │ ┌豪雨┐    │                             │  ┌潮位┐          │
 *  │ │458px│   │                             │  │458px│         │
 *  │ └────┘   │                             │  └────┘         │
 *  ├──────────┴───────────────────────────┴──────────────────┤
 *  │ TICKER  1920 x 46   … 速報テロップ (marquee)               │
 *  └──────────────────────────────────────────────────────────┘
 *  本文高さ = 1080 - 72 - 46 = 962。padding 16/20 を含む。
 *  3カラム: 476 + gap14 + 900 + gap14 + 476 = 1880 (= 1920 - 左右20)。
 *  小窓高さ = (962 - 上下16 - gap14) / 2 = 458。
 */

:root {
  /* カテゴリ色 */
  --c-eq:      #ff4d3d;
  --c-eq-2:    #ff9a3c;
  --c-eq-3:    #ffc266;
  --c-rain:    #2f7bff;
  --c-rain-2:  #34d6ff;
  --c-rail:    #2bd576;
  --c-tide:    #c64be0;
  --c-tide-2:  #d24be0;
  --c-alert:   #ff2d2d;
  --c-safe:    #2bd576;

  /* レイアウト寸法 */
  --stage-w:   1920px;
  --stage-h:   1080px;
  --header-h:  72px;
  --ticker-h:  46px;
  --col-w:     476px;
  --gap:       14px;

  /* 面・文字 */
  --bg-0:    #070a11;
  --bg-1:    #0b1019;
  --bg-hdr:  #0a0f19;
  --panel:   rgba(255,255,255,.012);
  --line:    rgba(120,160,210,.16);
  --ink:     #e8edf5;
  --ink-2:   #c5cedd;
  --ink-3:   #8b97a9;
  --ink-4:   #6b7686;
  --mono:    'Share Tech Mono', ui-monospace, monospace;
  --sans:    'Zen Kaku Gothic New', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #04060a; overflow: hidden;
  font-family: var(--sans); color: var(--ink);
}

/* ---- fit-to-viewport (OBS 1920x1080 では scale=1) ---- */
.ls-fit {
  position: fixed; inset: 0; display: flex;
  align-items: center; justify-content: center; background: #04060a;
}
.ls-stage {
  width: var(--stage-w); height: var(--stage-h); flex: none; position: relative;
  background: radial-gradient(120% 90% at 50% 0%, #0c121d, #070a11 70%);
  transform-origin: center;
}

/* ============================ HEADER ============================ */
.ls-hdr {
  position: absolute; top: 0; left: 0; right: 0; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; padding: 0 28px;
  background: linear-gradient(180deg,#0e1626,#0a0f19); border-bottom: 1px solid var(--line);
}
.ls-brand { display: flex; align-items: center; gap: 14px; }
.ls-brand h1 { font-size: 22px; font-weight: 900; letter-spacing: .04em; line-height: 1; margin: 0; }
.ls-brand .sub { font: 11px var(--mono); color: var(--ink-3); letter-spacing: .18em; margin-top: 3px; }
.ls-clock { text-align: center; }
.ls-clock .t { font: 38px var(--mono); letter-spacing: .06em; line-height: 1; }
.ls-clock .d { font: 12px var(--mono); color: var(--ink-3); letter-spacing: .14em; margin-top: 3px; }
.ls-counts { display: flex; align-items: center; gap: 9px; }
.cbadge {
  display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 7px;
  background: color-mix(in srgb, var(--cc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cc) 45%, transparent);
}
.cbadge i { width: 8px; height: 8px; border-radius: 50%; background: var(--cc); }
.cbadge .lb { font-size: 12px; color: color-mix(in srgb, var(--cc) 55%, #fff); }
.cbadge .n  { font: 15px var(--mono); color: #fff; }
.cbadge--eq   { --cc: var(--c-eq); }
.cbadge--rain { --cc: var(--c-rain-2); }
.cbadge--rail { --cc: var(--c-rail); }
.cbadge--tide { --cc: var(--c-tide-2); }
.ls-live {
  display: flex; align-items: center; gap: 7px; padding: 8px 13px;
  border-radius: 7px; background: var(--c-alert); margin-left: 4px;
}
.ls-live i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: blink 1.4s infinite; }
.ls-live span { font-size: 14px; font-weight: 900; letter-spacing: .08em; }

/* ============================ BODY ============================ */
.ls-body {
  position: absolute; top: var(--header-h); left: 0; right: 0; bottom: var(--ticker-h);
  display: flex; gap: var(--gap); padding: 16px 20px;
}
.ls-col { width: var(--col-w); display: flex; flex-direction: column; gap: var(--gap); }
.ls-center { flex: 1; }

/* ---- 小窓 ---- */
.win {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  border: 2px solid var(--win); border-radius: 10px; overflow: hidden; background: var(--bg-1);
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--win) 15%,transparent),
              0 0 24px color-mix(in srgb,var(--win) 10%,transparent);
}
.win--eq   { --win: var(--c-eq); }
.win--rain { --win: var(--c-rain); }
.win--rail { --win: var(--c-rail); }
.win--tide { --win: var(--c-tide); }
.win-hd {
  display: flex; align-items: center; justify-content: space-between; padding: 9px 13px;
  background: linear-gradient(90deg, color-mix(in srgb,var(--win) 22%,transparent), transparent);
  border-bottom: 1px solid color-mix(in srgb,var(--win) 38%,transparent);
}
.win-hd h2 { font-size: 17px; font-weight: 800; line-height: 1; margin: 0; }
.win-hd .en { font: 10px var(--mono); color: color-mix(in srgb,var(--win) 55%,#fff); letter-spacing: .16em; margin-top: 2px; }

/* 情報提供元バッジ (Stream Phase 6-B) — 「警報が出ていない = 安全」ではなく「その情報源の
   守備範囲外は表示できていないだけ」の可能性があることを、各小窓ヘッダで明示する。
   例: 鉄道情報は ODPT 非対応路線 (一部JR等) の遅延情報を取得できない。 */
.win-title-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.win-src {
  font: 700 12px var(--mono); color: color-mix(in srgb, var(--win) 75%, #fff);
  border: 1px solid color-mix(in srgb, var(--win) 55%, transparent); border-radius: 4px;
  padding: 1px 6px; letter-spacing: .03em; white-space: nowrap;
}
.win-src-note { font: 12px var(--mono); color: var(--ink-4); white-space: nowrap; }
.win-meta { display: flex; align-items: center; gap: 8px; font: 12px var(--mono); color: #94a2b6; }
.win-meta .cyc { width: 7px; height: 7px; border-radius: 50%; background: var(--win); animation: cyc 8s infinite; }
.win-meta .cyc-note { font: 11px var(--mono); color: var(--ink-4); }
.win-meta .quiet { font: 12px var(--mono); color: #5d6878; }
.win-body { flex: 1; display: flex; min-height: 0; }
.win-side { width: 184px; padding: 9px 10px; border-right: 1px solid rgba(255,255,255,.06); background: var(--panel); overflow: hidden; }
.win-side--wide { width: 210px; }
.win-side--tide { width: 158px; padding: 11px 12px; }
.win-map { flex: 1; position: relative; overflow: hidden; }
.side-h { font: 10px var(--mono); color: var(--ink-4); letter-spacing: .14em; margin-bottom: 7px; }

/* 地震子画面 市区町村震度 (Stream Phase 5-A.1) — 履歴の下に縦積み。列全体を flex 化し、
   一覧が残り高さいっぱいまで伸びて自前スクロール (マーキー) するようにする。 */
.win--eq .win-side { display: flex; flex-direction: column; min-height: 0; }
#eq-history { flex: none; max-height: 42%; overflow: hidden; }

/* 鉄道子画面 詳細本文 (Stream Phase 5-B) — カード一覧の下に縦積み。地震子画面の
   #eq-muni と同じ方式で、小地図上の小さいポップアップでは見切れる長文をこちらで
   全文スクロール表示する。 */
.win-side--rail { display: flex; flex-direction: column; min-height: 0; padding: 0; }
.win-side--rail #rail-side { flex: none; max-height: 46%; overflow: hidden; padding: 9px 10px; }
.rail-detail {
  flex: 1; min-height: 0; margin: 0 10px 9px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column;
}
.rail-detail[hidden] { display: none; }
.rail-detail-h { margin-bottom: 5px; }
.rail-detail-viewport { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.rail-detail-track { display: flex; flex-direction: column; }
.rail-detail[data-railway-detail-scroll-mode="scrolling"] .rail-detail-track {
  animation: railDetailScroll var(--rail-detail-scroll-dur, 12s) linear infinite;
}
.rail-detail-copy { font: 12px var(--mono); line-height: 1.6; color: #d4dbe6; white-space: pre-wrap; word-break: break-word; }
.rail-detail-copy + .rail-detail-copy { margin-top: 14px; }
.rail-detail-empty { font: 12px var(--mono); color: #5d6878; }
.eq-muni {
  flex: 1; min-height: 0; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column;
}
.eq-muni[hidden] { display: none; }
.eq-muni-h { margin-bottom: 5px; }
.eq-muni-viewport { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.eq-muni-track { display: flex; flex-direction: column; }
.eq-muni[data-eq-muni-scroll-mode="scrolling"] .eq-muni-track {
  animation: eqMuniScroll var(--eq-muni-scroll-dur, 20s) linear infinite;
}
.eq-muni-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.03); }
.eq-muni-row .lv {
  flex: none; min-width: 24px; text-align: center; font: 700 11px var(--mono);
  border-radius: 3px; padding: 1px 3px; color: #07090e; background: #9e9e9e;
}
.eq-muni-row .area { flex: 1; min-width: 0; font-size: 12px; color: #d4dbe6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-muni-row .nc { flex: none; font: 9px var(--mono); color: var(--ink-4); }
.eq-muni-empty { font: 12px var(--mono); color: #5d6878; padding-top: 4px; }

/* 震度別 リスト行配色 (Stream Phase 5-A.1) */
.eq-muni-row--1        .lv { background: #b3d4f5; color: #111; }
.eq-muni-row--2        .lv { background: #3c9be8; color: #fff; }
.eq-muni-row--3        .lv { background: #39c468; color: #111; }
.eq-muni-row--4        .lv { background: #f9c74f; color: #111; }
.eq-muni-row--5-lower  .lv { background: #f8961e; color: #fff; }
.eq-muni-row--5-upper  .lv { background: #f3722c; color: #fff; }
.eq-muni-row--6-lower  .lv { background: #e53935; color: #fff; }
.eq-muni-row--6-upper  .lv { background: #b71c1c; color: #fff; }
.eq-muni-row--7        .lv { background: #4a148c; color: #fff; }

/* 小地図 (#eq-map, SVGフォールバック時) 上の市区町村震度マーカー — 震源マーカーより小さく、常時点滅させない */
.stream-eq-intensity-marker circle { animation: none !important; }
.stream-eq-intensity-marker--active circle:last-child { stroke-width: 3; }

/* 小地図 Leaflet化 (Stream Phase 5-A bundle) — divIcon版 市区町村震度マーカー。
   地図を隠さない小型の丸バッジ。震度番号中心・強震度ほど暖色/濃色にする。 */
.stream-eq-intensity-marker-icon { background: none; border: none; }
.stream-eq-intensity-marker {
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 9px var(--mono); color: #111; line-height: 1;
  border: 1.5px solid rgba(255,255,255,.55);
  box-shadow: 0 0 4px rgba(0,0,0,.55);
  background: #9e9e9e;
}
.stream-eq-intensity-marker--active {
  outline: 2px solid #fff;
  outline-offset: 1px;
}
.stream-eq-intensity-marker--1       { background: #b3d4f5; color: #111; }
.stream-eq-intensity-marker--2       { background: #3c9be8; color: #fff; }
.stream-eq-intensity-marker--3       { background: #39c468; color: #111; }
.stream-eq-intensity-marker--4       { background: #f9c74f; color: #111; }
.stream-eq-intensity-marker--5-lower { background: #f8961e; color: #fff; }
.stream-eq-intensity-marker--5-upper { background: #f3722c; color: #fff; }
.stream-eq-intensity-marker--6-lower { background: #e53935; color: #fff; }
.stream-eq-intensity-marker--6-upper { background: #b71c1c; color: #fff; }
.stream-eq-intensity-marker--7       { background: #4a148c; color: #fff; }

/* Phase 8-B: 小地図 (地震/キキクル・豪雨) の市区町村境界ラベル。
   面情報・マーカーの上に浮かせる想定のため、YouTube縮小表示でも潰れないコントラストを優先する。 */
.live-muni-label-icon { background: none; border: none; }
.live-muni-label {
  font: 700 10px var(--mono);
  color: #fff;
  white-space: nowrap;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 3px rgba(0,0,0,.8);
  transform: translate(-50%, -140%); /* 対応地点マーカーの少し上に表示し、マーカー自体は隠さない */
  pointer-events: none;
}

/* リスト行 */
.row { display: flex; align-items: center; gap: 7px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.row .tm  { font: 12px var(--mono); color: var(--ink-3); width: 34px; flex: none; }
.row .nm  { font-size: 12px; color: #d4dbe6; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .mag { font: 12px var(--mono); color: #9aa6b8; }
.chip { font: 12px var(--mono); font-weight: 700; color: #07090e; min-width: 20px; text-align: center; border-radius: 4px; padding: 1px 4px; }
.sq   { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.lv   { font-size: 11px; font-weight: 700; color: #fff; border-radius: 4px; padding: 1px 6px; }

/* 地図ポップアップ */
.popup {
  position: absolute; top: 10px; left: 10px; padding: 7px 11px;
  max-width: calc(100% - 20px); box-sizing: border-box;
  background: rgba(10,14,22,.82); border-radius: 7px; animation: fade .4s both;
}
.popup .p, .popup .l { overflow-wrap: break-word; }
.popup--eq   { border: 1px solid color-mix(in srgb,var(--c-eq) 50%,transparent); }
.popup--rain { border: 1px solid color-mix(in srgb,var(--c-rain) 50%,transparent); }
.popup .p { font-size: 14px; font-weight: 700; }
.popup .l { font: 12px var(--mono); margin-top: 1px; }
.popup--eq .p   { color: #ffd9d3; } .popup--eq .l   { color: #ff9a8a; }
.popup--rain .p { color: #d3e6ff; } .popup--rain .l { color: #8fc1ff; }
.popup.zoomin { animation: popIn .5s .4s both; }
/* ポップアップ内の補足行 (更新時刻など、本文より控えめに見せる) — 鉄道詳細以外の popup でも使う汎用クラス */
.popup-note { font: 11px var(--mono); color: #7c8798; margin-top: 3px; overflow-wrap: break-word; }

/* 鉄道詳細ポップアップ (Stream Phase 5-B) — 路線名/状態/事業者/更新時刻の概要のみ表示する
   (長文の詳細本文は #rail-detail 側の専用スクロールリストへ移動。小さいポップアップ内では
   長文が見切れてしまうため)。他の popup--* より横幅を確保する。 */
.popup--rail-detail {
  border: 1px solid color-mix(in srgb, var(--c-rail) 50%, transparent);
  width: 220px; max-width: 42%;
  display: flex; flex-direction: column; gap: 6px;
}
.rd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rd-name { font-size: 14px; font-weight: 700; color: #d3ffe6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-status { flex: none; font-size: 11px; font-weight: 700; color: #fff; border-radius: 4px; padding: 1px 6px; }
.rd-meta { display: flex; justify-content: space-between; gap: 8px; font: 12px var(--mono); color: #8fe0b8; }
.rd-note { font: 12px var(--mono); color: #5d6878; }

/* 平穏プレースホルダ (小窓) */
.win-empty {
  position: absolute; inset: 0; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.win-empty .m { font-size: 16px; font-weight: 700; color: var(--ink-3); }
.win-empty .s { font: 12px var(--mono); color: #5d6878; letter-spacing: .1em; }
.map-cap { position: absolute; bottom: 10px; left: 12px; font: 11px var(--mono); color: var(--ink-3); letter-spacing: .12em; }

/* 鉄道カード */
.rail-card { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; }
.rail-card .bar  { width: 5px; align-self: stretch; border-radius: 3px; flex: none; transition: width .15s ease; }
.rail-card .body { flex: 1; min-width: 0; }
.rail-card .nm   { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.rail-card .note { font-size: 12px; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-card .st   { font-size: 11px; font-weight: 700; color: #fff; border-radius: 4px; padding: 2px 6px; flex: none; }
.rail-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }

/* Phase 7-A.6: リストで選択中の障害路線 (地図側ハイライトと連動)。点滅はさせない — うるさくなるため */
.rail-card.is-selected {
  background: rgba(34, 197, 94, .12);
  outline: 1px solid rgba(74, 222, 128, .55);
  outline-offset: -1px;
}
.rail-card.is-selected .bar { width: 8px; }
.rail-empty i  { width: 8px; height: 8px; border-radius: 50%; background: var(--c-safe); }
.rail-empty .m { font-size: 14px; font-weight: 700; color: #a7e8c4; }
.rail-empty .s { font: 12px var(--mono); color: #5d6878; }

/* 潮位 */
.tide-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.tide-cell { flex: 1; display: flex; min-height: 0; padding: 9px 12px; gap: 10px; }
.tide-cell + .tide-cell { border-top: 1px solid rgba(255,255,255,.06); }
.tide-cell.alert { background: linear-gradient(90deg, color-mix(in srgb,var(--c-tide) 12%,transparent), transparent); }
.tide-info { width: 132px; flex: none; display: flex; flex-direction: column; justify-content: center; }
.tide-name { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; color: var(--ink); }
.tide-name .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-tide-2); }
.tide-flag { font-size: 10px; font-weight: 700; color: #fff; background: #c026d3; border-radius: 4px; padding: 1px 6px; margin-left: auto; }
.tide-now  { display: flex; align-items: baseline; gap: 3px; margin-top: 3px; }
.tide-now b    { font: 30px var(--mono); color: #f0d7f5; line-height: 1; font-weight: 400; }
.tide-now span { font-size: 13px; color: #b48cc0; }
.tide-hl { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 2px 10px; font: 12px var(--mono); color: var(--ink-2); }
.tide-hl .hi { color: #e879f9; } .tide-hl .lo { color: #5cc8ff; } .tide-hl .dv { color: #7ee0a0; }
.tide-chart { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; justify-content: center; }
/* Stream Phase 6-G: 8秒巡回でペアが切り替わった瞬間だけ再生するスライドイン (単調な瞬時切替の解消)。
   --tide-slide-delay は上下セルを少しずらして動きを出すための per-cell 遅延 (JS側で設定)。 */
.tide-cell.tide-slide-in { animation: tideSlideIn .45s var(--tide-slide-delay, 0ms) both; }

/* ---- 中央マップ ---- */
.ls-center {
  position: relative; border: 1px solid rgba(120,160,210,.18);
  border-radius: 10px; overflow: hidden; background: #080d15;
}
.center-map    { position: absolute; inset: 0; }

/* ---- 中央マップ Leaflet 本番地図 (Stream Phase 3-A) ----
   注意: .center-map は中央マップ (#center-map) と小窓地図 (#eq-map/#rain-map/#rail-map) で
   共有しているクラス。z-index はスタッキングコンテキスト分離が必要な #center-map だけに絞る
   (小窓側に同じ z-index を広げても、Stream Phase 5-A.1 で判明した下記のポップアップ不可視
   問題は解消しないことを実機検証済み)。
   小窓の Leaflet 地図化後、同じ .win-map 内の兄弟ポップアップ (#eq-overlay 等) が地図の内部pane
   (z-index 最大700) の背後に隠れて描画される問題は、静的CSSでは解消できず
   (Chromium の合成レイヤー確定タイミングに起因すると見られる描画不具合)、
   live-stream-map-view.js の _applyPopupStackingFix() (初回タイル読み込み完了後に
   新しい <style> 要素を差し込んでスタイル再計算を強制する) で対処している。 */
#center-map    { z-index: 1; }
.center-map .leaflet-container {
  background: #080d15; font-family: var(--sans); cursor: default; outline: none;
}
/* Leaflet 本体の既定CSS (leaflet.css) は .leaflet-container { background:#ddd } という
   明るいグレーを持っており、flyTo/fitBounds のズームアニメーション中 (.leaflet-zoom-anim)
   にタイル要素が一時的に visibility:hidden になる瞬間、この既定の明るい背景が透けて見え、
   スライド時に白っぽい画面が一瞬見えてしまう (実機検証で確認済み)。
   .center-map .leaflet-container 側の上書きだけでは効かない場面があったため、
   Leaflet本体と同じ詳細度の .leaflet-container 自体、および地図パン/ズーム時に
   実際に表示される各pane (tile/map pane) にも明示的に暗背景を敷いておく。 */
.leaflet-container { background: #080d15; }
.center-map .leaflet-tile-pane,
.center-map .leaflet-map-pane { background: #080d15; }
.center-map .leaflet-tile-pane { filter: brightness(.78) saturate(.82) contrast(1.05); }
.center-map .leaflet-control-attribution {
  background: rgba(8,12,20,.6); color: var(--ink-4); font-size: 9px;
  padding: 1px 6px; border-radius: 3px 0 0 0;
}
.center-map .leaflet-control-attribution a { color: var(--ink-3); }
.center-map .leaflet-control-container .leaflet-top,
.center-map .leaflet-control-container .leaflet-bottom { pointer-events: none; }
.center-map .leaflet-control-attribution { pointer-events: auto; }

/* パルスマーカー (Leaflet DivIcon) — SVG版 ring/core アニメーションを流用 */
.ls-pulse-icon { background: none; border: none; }
.ls-pulse { position: relative; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.ls-pulse-ring {
  position: absolute; width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--pulse-color); animation: ring 2.4s ease-out infinite;
}
.ls-pulse-core {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--pulse-color); border: 2px solid rgba(255,255,255,.9);
  animation: core 2.4s ease-in-out infinite;
}
.ls-pulse-label {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  font: 700 13px var(--mono); color: #fff; white-space: nowrap; margin-bottom: 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.ls-marker-icon { background: none; border: none; }

/* 本番データイベントマーカー (Stream Phase 3-B) — 常時多数出るため控えめな発光ドットのみ */
.stream-map-event-icon { background: none; border: none; }
.stream-map-event {
  position: relative; width: 16px; height: 16px;
}
.stream-map-event::before {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--evt-color); opacity: .75; animation: ring 2.6s ease-out infinite;
}
.stream-map-event::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--evt-color); border: 1.5px solid rgba(255,255,255,.85);
  animation: core 2.6s ease-in-out infinite;
}
.stream-map-event--earthquake { --evt-color: var(--c-eq); }
.stream-map-event--rain       { --evt-color: var(--c-rain-2); }
.stream-map-event--kikikuru   { --evt-color: var(--c-rain); }
.stream-map-event--railway    { --evt-color: var(--c-rail); }
.stream-map-event--tide       { --evt-color: var(--c-tide-2); }
.stream-map-event--critical::before,
.stream-map-event--critical::after { animation-duration: 1.6s; }
.stream-map-event--stale { opacity: .4; }
.stream-map-event--stale::before,
.stream-map-event--stale::after { animation: none; }

/* 自動巡回中の注目 event 強調 (Stream Phase 4-A) — 控えめに枠を1本足す程度に留める */
.stream-map-event--active::before {
  border-width: 3px; opacity: 1;
}
.stream-map-event--active::after {
  box-shadow: 0 0 0 2px rgba(255,255,255,.9);
}
.ls-pulse--active .ls-pulse-ring { border-width: 3.5px; }
.ls-pulse--active .ls-pulse-core { box-shadow: 0 0 0 2px rgba(255,255,255,.85); }

/* パネル項目側の注目強調 (Stream Phase 4-A/4-B) — 枠線+わずかな発光+小さな「注目」ラベルのみ、点滅はさせない */
.stream-panel-item--active,
.popup.stream-panel-item--active,
.rail-card.stream-panel-item--active,
.tide-cell.stream-panel-item--active {
  position: relative;
  outline: 1.5px solid rgba(255,255,255,.55);
  outline-offset: 2px;
  box-shadow: 0 0 14px rgba(255,255,255,.12);
}
.rail-card.stream-panel-item--active::before,
.tide-cell.stream-panel-item--active::before {
  content: '注目'; position: absolute; top: -7px; right: 6px; z-index: 1;
  font: 700 9px var(--mono); color: #07090e; background: #fff;
  padding: 1px 6px; border-radius: 4px; letter-spacing: .04em; line-height: 1.4;
}

/* 中央地図上の Focus HUD (Stream Phase 4-B) — 上部中央、パネル/テロップを隠さない小さな帯 */
.stream-focus-hud {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2;
  padding: 6px 14px; border-radius: 10px; max-width: 62%;
  background: rgba(8,12,20,.76); border: 1px solid rgba(255,255,255,.16);
  text-align: center; animation: hudIn .3s ease-out both;
}
.stream-focus-hud[hidden] { display: none; }
.stream-focus-hud-title {
  font-size: 13px; font-weight: 800; letter-spacing: .03em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stream-focus-hud-sub {
  font: 10px var(--mono); color: var(--ink-3); letter-spacing: .06em; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stream-focus-hud[data-focus-mode="focus"] { border-color: rgba(255,255,255,.28); }
@keyframes hudIn { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* Phase 7-A.6: 鉄道子画面 路線図 — 選択中路線ハイライト (白縁取り + 公式カラー太線 + 控えめ点滅)。
   路線図の通常レイヤーは preferCanvas:true 環境で Canvas 描画になるため CSS が効かない
   (renderer:L.svg() を強制した layer だけがこの class を持つ — live-stream-railway-layer.js 側で担保)。 */
.live-railway-selected-outline { pointer-events: none; }
.live-railway-selected-core {
  pointer-events: none;
  animation: live-railway-selected-pulse 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .75));
}
@keyframes live-railway-selected-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-pulse-ring, .ls-pulse-core,
  .stream-map-event::before, .stream-map-event::after,
  .stream-focus-hud,
  .eq-muni-track,
  .rail-detail-track,
  .live-railway-selected-core { animation: none !important; }
}
/* z-index: Leaflet の内部コントロール (.leaflet-top/.leaflet-bottom) は z-index:1000 を持つが、
   .center-map に z-index を与えて独立したスタッキングコンテキストを作ることでその内部に閉じ込め、
   これらオーバーレイUI要素より常に手前に出ないようにする (凡例が地図コントロールの裏に沈む問題の対策) */
.center-title  { position: absolute; top: 14px; left: 16px; z-index: 2; }
.center-title .t { font-size: 15px; font-weight: 800; letter-spacing: .05em; }
.center-title .s { font: 10px var(--mono); color: var(--ink-3); letter-spacing: .16em; margin-top: 2px; }
.level {
  position: absolute; top: 14px; right: 16px; z-index: 2; display: flex; align-items: center;
  gap: 7px; padding: 6px 11px; border-radius: 20px;
}
.level i    { width: 7px; height: 7px; border-radius: 50%; animation: blink 1.4s infinite; }
.level span { font-size: 12px; font-weight: 700; }
.level[data-lv="high"]  { background: rgba(255,45,45,.14); border: 1px solid color-mix(in srgb,var(--c-eq) 50%,transparent); }
.level[data-lv="high"] i    { background: var(--c-eq); }
.level[data-lv="high"] span { color: #ffb3aa; }
.level[data-lv="calm"]  { background: rgba(43,213,118,.12); border: 1px solid color-mix(in srgb,var(--c-safe) 40%,transparent); }
.level[data-lv="calm"] i    { background: var(--c-safe); }
.level[data-lv="calm"] span { color: var(--c-safe); }
.center-clock { position: absolute; bottom: 14px; left: 16px; z-index: 2; }
.center-clock .t { font: 28px var(--mono); line-height: 1; }
.center-clock .d { font: 11px var(--mono); color: var(--ink-3); margin-top: 3px; }
.legend {
  position: absolute; bottom: 14px; right: 16px; z-index: 2; display: flex; flex-direction: column;
  gap: 5px; padding: 9px 12px;
  background: rgba(8,12,20,.7); border: 1px solid rgba(255,255,255,.08); border-radius: 8px;
}
.legend div { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-2); }
.legend i   { width: 9px; height: 9px; border-radius: 50%; }
.center-empty {
  position: absolute; inset: 0; z-index: 2; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.center-empty .ring { width: 60px; height: 60px; border: 2px solid rgba(120,165,220,.4); border-radius: 50%; display: grid; place-items: center; }
.center-empty .ring div { width: 12px; height: 12px; border-radius: 50%; background: rgba(120,165,220,.5); }
.center-empty .m { font-size: 24px; font-weight: 800; letter-spacing: .04em; color: var(--ink-2); }
.center-empty .s { font: 12px var(--mono); color: var(--ink-4); letter-spacing: .16em; }

/* ============================ TICKER ============================ */
.ls-ticker {
  position: absolute; bottom: 0; left: 0; right: 0; height: var(--ticker-h);
  display: flex; align-items: center;
  background: var(--bg-hdr); border-top: 1px solid var(--line); overflow: hidden;
}
.ls-ticker .tag {
  flex: none; height: 100%; display: flex; align-items: center; padding: 0 16px;
  background: var(--c-alert); font-size: 14px; font-weight: 900; letter-spacing: .08em;
}
.ls-ticker .track { flex: 1; overflow: hidden; position: relative; height: 100%; }
.ls-ticker .move {
  position: absolute; top: 0; left: 0; height: 100%;
  display: flex; align-items: center; gap: 46px; white-space: nowrap;
  animation: marquee 34s linear infinite;
  font: 15px var(--mono); color: var(--ink-2);
}

/* ---- dev 状態スイッチ (配信では ?chrome=off で非表示) ---- */
.ls-dev { position: fixed; top: 10px; left: 10px; z-index: 99; display: flex; gap: 6px; font-family: var(--mono); }
.ls-dev button {
  font: 12px var(--mono); color: var(--ink-2); background: #111826;
  border: 1px solid #2a3648; border-radius: 6px; padding: 6px 12px; cursor: pointer;
}
.ls-dev button.on { background: var(--c-eq); border-color: var(--c-eq); color: #fff; }
.ls-dev.hidden { display: none; }

/* ============================ アニメーション ============================ */
@keyframes marquee { from { transform: translateX(0); }   to { transform: translateX(-50%); } }
@keyframes eqMuniScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes railDetailScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes blink   { 0%,100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes cyc     { 0%,45% { opacity: 1; } 55%,95% { opacity: .2; } 100% { opacity: 1; } }
@keyframes fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes ring    { 0% { transform: scale(.45); opacity: .85; } 70% { opacity: .18; } 100% { transform: scale(2.7); opacity: 0; } }
@keyframes core    { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes popIn   { 0% { opacity: 0; transform: translateY(-6px) scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes tideSlideIn { 0% { opacity: 0; transform: translateX(22px); } 100% { opacity: 1; transform: none; } }