/* LED 大屏 · 三模式（照片/视频/文本）
   复用运动会大屏 v14 的「1920×1080 恒定画框 + transform scale」范式：
   内容永远按 1920×1080 设计，再整体等比缩放，不会因视口重排错位。 */

html, body {
  height: 100%; margin: 0; background: #0f1420; overflow: hidden;
  font-family: 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
}
.led-stage {
  position: relative; width: 100%; height: 100%; overflow: hidden; background: #0f1420;
}
.led-stage > .site-page {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--led-scale, 1));
  transform-origin: center center;
  background: #0f1420; overflow: hidden;
}

/* 三种模式层叠在同一个画框里，靠 display 切换 */
.mode { position: absolute; inset: 0; display: none; }
.mode.active { display: block; }

/* ---------- 照片 ---------- */
.mode-photo { background: #0b1020; }
.mode-photo .slide {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: #0b1020;
}
.mode-photo .slide img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; transition: opacity .8s ease;
}
.mode-photo .caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 50px 28px; font-size: 34px; font-weight: 600; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.mode-photo .empty, .mode-video .empty, .mode-text .empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.55); font-size: 40px; text-align: center; padding: 40px;
}

/* ---------- 视频 ---------- */
.mode-video { background: #000; }
.mode-video video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000;
}

/* ---------- 文本 ---------- */
.mode-text { background: #0f2540; }
.mode-text .text-wrap {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  overflow: hidden; box-sizing: border-box;
}
.mode-text .text-content {
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
}
/* 滚动动画（跑马灯）：内容超出时上下滚动 */
.mode-text .anim-scroll .text-content { animation: txtscroll 12s linear infinite; }
@keyframes txtscroll {
  0% { transform: translateY(20%); }
  100% { transform: translateY(-20%); }
}
/* 淡入动画 */
.mode-text .anim-fade .text-content { animation: txtfade 2.5s ease-in-out infinite alternate; }
@keyframes txtfade { from { opacity: .55; } to { opacity: 1; } }
.mode-text .clock {
  position: absolute; right: 50px; bottom: 36px; font-size: 30px;
  color: rgba(255,255,255,.85); text-shadow: 0 2px 8px rgba(0,0,0,.45);
  font-variant-numeric: tabular-nums;
}

/* ---------- 静音提示（点屏开声） ---------- */
.unmute-hint {
  position: fixed; right: 16px; bottom: 14px; z-index: 50;
  background: rgba(0,0,0,.55); color: #fff; padding: 8px 14px; border-radius: 20px;
  font-size: 13px; cursor: pointer; display: none;
}