/* ================= 乐舞联 播放页样式 ================= */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#app { width: 100%; height: 100%; position: relative; overflow: hidden; }

/* ---------- 视频流容器 ---------- */
#video-container {
  position: absolute;
  inset: 0;
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  will-change: transform;
  transition: transform 0.28s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* 竖屏视频铺满，保证清晰原画 */
  background: #000;
}
.slide video.landscape {
  object-fit: contain;        /* 横屏视频 1:1 完整显示，不放大不裁切（竖屏视频不会加此class） */
}

.slide video.paused-state { opacity: 0.85; }

/* 底部渐暗蒙版，提升文字可读性（乐舞联风格） */
.slide::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

/* ---------- 顶部品牌栏（仅返回键） ---------- */
#top-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 10px;
  pointer-events: none;
}

/* 返回退出键 */
#back-btn {
  pointer-events: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  transition: transform 0.12s ease, background 0.2s ease;
  outline: none;
}
#back-btn svg { width: 22px; height: 22px; }
#back-btn:active { transform: scale(0.88); background: rgba(0,0,0,0.55); }

/* ---------- 左侧中上竖排品牌名（乐舞联） ---------- */
#brand-vertical {
  position: absolute;
  top: 38%;                /* 屏幕垂直中上位置 */
  left: 12px;
  z-index: 20;
  display: flex;
  flex-direction: column;  /* 竖排：乐→舞→联 从上到下 */
  align-items: center;
  gap: 5px;
  pointer-events: none;
}
.brand-v-badge {
  writing-mode: vertical-rl;      /* 竖排书写 */
  background: linear-gradient(135deg, #FE2C55, #FF7A45);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  padding: 9px 5px;
  border-radius: 10px 10px 10px 3px;
  letter-spacing: 6px;
  box-shadow: 0 2px 10px rgba(254, 44, 85, 0.45);
  text-indent: 6px;               /* 配合竖排让首字贴边，视觉居中 */
}
.brand-v-text {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ---------- 顶部声明（与顶部栏同一排） ---------- */
#disclaimer {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);   /* 上移到顶部，与乐舞联原来所在的一排 */
  left: 58px;               /* 避开左上角返回键 */
  right: 12px;
  z-index: 18;
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.9);
  font-size: 10.5px;
  line-height: 1.55;
  text-align: center;
  padding: 7px 10px;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  letter-spacing: 0.3px;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
#disclaimer .dis-tag {
  color: #FFD54A;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-right: 2px;
}

/* ---------- 底部信息区 ---------- */
.info {
  position: absolute;
  left: 16px; right: 92px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
  z-index: 10;
  color: #fff;
}

.info .title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.info .meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.9);
}

.tag-pk {
  background: linear-gradient(135deg, #FFD700, #FF7A00);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(255, 122, 0, 0.5);
}

.tag-side {
  background: rgba(255,255,255,0.2);
  padding: 3px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

/* ---------- 右下角操作区（只有"我顶"） ---------- */
.actions {
  position: absolute;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.btn-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 6px 4px;
  outline: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.btn-top .top-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  border: 1.5px solid rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: transform 0.12s ease, background 0.2s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.btn-top .top-icon svg {
  width: 30px;
  height: 30px;
}

.btn-top .top-label { font-size: 10px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.6); white-space: nowrap; }

.btn-top:active .top-icon { transform: scale(0.88); }

.btn-top.tapped .top-icon {
  background: linear-gradient(135deg, #FFD700, #FF7A00);
  border-color: #fff;
  color: #7a1f00;
  box-shadow: 0 2px 16px rgba(255, 160, 0, 0.7);
}

.btn-top .top-count {
  font-size: 13px;
  font-weight: 800;
  min-width: 34px;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

.btn-top.tapped .top-count { color: #FFD700; }

/* 顶一下弹出动画 */
.top-burst {
  position: fixed;
  z-index: 999;
  font-size: 40px;
  font-weight: 900;
  color: #FFD700;
  pointer-events: none;
  text-shadow: 0 0 20px rgba(255, 190, 0, 0.9), 0 2px 8px rgba(0,0,0,0.5);
  animation: burstUp 0.9s ease-out forwards;
}

@keyframes burstUp {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  25%  { opacity: 1; transform: translateY(-16px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-90px) scale(1); }
}

/* ---------- PK 对方按钮 ---------- */
.pk-btn-wrap {
  position: absolute;
  left: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  z-index: 12;
}

.pk-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #FFD700 0%, #FF9A1F 55%, #FE2C55 130%);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(254, 60, 80, 0.45), inset 0 -2px 6px rgba(0,0,0,0.15);
  transition: transform 0.12s ease, box-shadow 0.2s ease;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.pk-btn .pk-vs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 6px;
  background: #fff;
  color: #FE2C55;
  font-size: 12px;
  font-weight: 900;
}

.pk-btn:active { transform: scale(0.94); }

.pk-btn.switched {
  background: linear-gradient(135deg, #7C4DFF, #448AFF);
  box-shadow: 0 4px 18px rgba(80, 120, 255, 0.5), inset 0 -2px 6px rgba(0,0,0,0.15);
}

/* ---------- 底部进度条（可拖动跳转） ---------- */
#progress-wrap {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 30px;
  z-index: 15;
  touch-action: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

#progress-track {
  position: absolute;
  left: 10px; right: 10px;
  bottom: 7px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.28);
  overflow: visible;
}

#progress-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, #FE2C55, #FF7A45);
  box-shadow: 0 0 6px rgba(254, 44, 85, 0.6);
}

#progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  opacity: 0.9;
}

#progress-cur, #progress-dur {
  position: absolute;
  bottom: 13px;
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  background: rgba(0,0,0,0.35);
  padding: 1px 5px;
  border-radius: 6px;
  pointer-events: none;
}
#progress-cur { left: 8px; }
#progress-dur { right: 8px; }

/* 拖动时放大高亮 */
#progress-wrap.dragging #progress-thumb {
  width: 14px;
  height: 14px;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.25), 0 1px 4px rgba(0,0,0,0.5);
}

/* ---------- 加载 / 空状态 ---------- */
#loading {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #000;
  color: #fff;
  font-size: 13px;
  transition: opacity 0.3s ease;
}
#loading.hidden { opacity: 0; pointer-events: none; }

.spinner {
  width: 40px; height: 40px;
  border: 4px solid rgba(255,255,255,0.15);
  border-top-color: #FE2C55;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#empty-state {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  background: #111;
  text-align: center;
}
#empty-state.hidden { display: none; }
.empty-icon { font-size: 64px; }
#empty-state p { color: rgba(255,255,255,0.75); font-size: 15px; }
#empty-state a {
  color: #fff;
  background: linear-gradient(135deg, #FE2C55, #FF7A45);
  padding: 10px 22px;
  border-radius: 24px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

/* ---------- 滑动提示 ---------- */
#swipe-hint {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 60;
  background: rgba(0,0,0,0.65);
  color: #fff;
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 13px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  animation: hintFade 1.4s ease forwards;
  pointer-events: none;
}
#swipe-hint.hidden { display: none; }
@keyframes hintFade {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- 视频加载态 ---------- */
.slide .video-loading {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 30px; height: 30px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: #FE2C55;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  pointer-events: none;
}

/* 音量提示 */
#volume-hint {
  position: fixed;
  left: 50%; top: 30%;
  transform: translateX(-50%);
  z-index: 60;
  background: rgba(0,0,0,0.65);
  color: #fff;
  padding: 10px 18px;
  border-radius: 22px;
  font-size: 13px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.18);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
#volume-hint.show { opacity: 1; }

/* ===== 退出确认弹窗 ===== */
#exit-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
#exit-modal.hidden { display: none; }
.exit-mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}
.exit-box {
  position: relative;
  width: 82%;
  max-width: 330px;
  background: #1d1d22;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 30px 22px 20px;
  text-align: center;
  color: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  animation: exitPop 0.25s ease;
}
@keyframes exitPop {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.exit-icon { font-size: 42px; margin-bottom: 12px; }
.exit-title { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.exit-desc { font-size: 13.5px; color: #ccc; line-height: 1.75; margin-bottom: 20px; }
.exit-actions { display: flex; gap: 10px; }
.exit-btn {
  flex: 1;
  height: 44px;
  border: none;
  border-radius: 22px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.exit-cancel { background: #33333a; color: #fff; }
.exit-confirm { background: #FE2C55; color: #fff; }