/* ============================================================
   Sun-BD 示範桌面直播（行銷頁與三語首頁共用）— 由 build_pages.py 自 scripts/live-stream.css 輸出
   Demo-desktop live stream, shared by the landing page and the localized homepages
   ============================================================ */

.lp-live {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  border: 1px solid var(--border);
  background: #05070f;
  overflow: hidden;
}
/* 中文：固定 16:9，畫面還沒進來時版面就不會跳動。English: a fixed 16:9 box stops the layout jumping before the first frame. */
.lp-live-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #05070f;
}
/* 中文：畫面是每秒換一張的 JPEG，不是影片；object-fit: contain 讓不同解析度的示範機都完整入框。
   English: the view is one JPEG per second rather than a video; contain keeps any demo-machine resolution fully in frame. */
.lp-live img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #05070f;
  display: block;
  /* 中文：**不要**在這裡加 transition。兩張不透明的圖做交叉淡入，中途合成亮度會凹一下，
     在深色底上看起來就是每秒閃一次；換圖靠 z-index 直接疊上去，完全不混合。
     English: do NOT add a transition here. Fading between two opaque frames dips the composite brightness halfway and reads as a
     once-a-second flash on the dark panel; the swap stacks the new layer with z-index instead, with no blending at all. */
  transition: none;
}
.lp-live-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(13,21,37,0.72);
}
.lp-live-head h3 {
  font-family: 'Noto Serif TC', 'Noto Serif SC', 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.lp-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* 中文：紅點只有在真的有畫面時才亮並閃爍，離線時轉為靜態灰點，不會假裝在播。
   English: the dot only lights and pulses while media is actually arriving; offline it goes grey instead of faking a live feed. */
.lp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #4a5568; }
.lp-live[data-state="live"] .lp-live-dot { background: #e0484b; animation: lpLivePulse 1.6s ease-in-out infinite; }
.lp-live[data-state="live"] .lp-live-badge { color: #e0484b; }
@keyframes lpLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.lp-live-offline {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 20px;
  background: linear-gradient(180deg, rgba(5,7,15,0.86), rgba(5,7,15,0.94));
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.7;
}
/* 中文：這一條不能省——.lp-live-offline 自己是 display:flex，作者樣式優先於 HTML 的 hidden，
   少了它畫面已經在播、「示範暫停中」還是會蓋在上面。
   English: this rule is mandatory: the overlay's own display:flex outranks the hidden attribute, and without it the
   "demo paused" notice stays on top of a picture that is already playing. */
.lp-live-offline[hidden] { display: none !important; }
.lp-live-offline strong { color: var(--text-primary); font-size: 15px; font-weight: 700; }
.lp-live-offline small { color: var(--text-muted); font-size: 12px; }
.lp-live-foot {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
}
@media (max-width: 768px) {
  .lp-live-head { padding: 8px 12px; }
  .lp-live-head h3 { font-size: 15px; }
  .lp-live-offline { font-size: 12px; }
}

/* ── ［全螢幕］按鈕：頁面上維持固定尺寸，放大與否由使用者決定。
   Fullscreen button: the page keeps a fixed-size embed and the visitor opts into a larger view. ── */
.lp-live-actions { display: inline-flex; align-items: center; gap: 10px; }
.lp-live-full {
  font: inherit; font-size: 11.5px; letter-spacing: 0.08em; line-height: 1.2;
  padding: 5px 12px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
  cursor: pointer; white-space: nowrap; transition: all 0.2s;
}
.lp-live-full:hover { color: var(--accent-gold); border-color: var(--accent-gold); }
/* 中文：全螢幕時框本身變成整個畫面，影片要填滿並維持比例。English: in fullscreen the frame becomes the screen. */
.lp-live-frame:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; background: #000; }
.lp-live-frame:-webkit-full-screen { width: 100vw; height: 100vh; background: #000; }