/* ==========================================================================
   TV 大屏全屏直播与发现兴趣流样式表 (Live Discovery Fullscreen)
   规范：1920x1080 纯净 TV 沉浸大屏视觉，无操作辅助说明文字，纯原生遥控器焦点响应
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #fff;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 1080p 固定视口容器 (支持任意屏幕等比居中自适应缩放) */
.tv-viewport {
  position: relative;
  width: 1920px;
  height: 1080px;
  margin: 0 auto;
  overflow: hidden;
  background: #02040a;
  transform-origin: center center;
  flex-shrink: 0;
}

/* ================= 顶部不可落焦状态导航条 (严格对标 Figma 256:3527，按1080p等比缩放) ================= */
/* ================= 顶部不可落焦状态导航条 (严格对标 Figma 256:3527，按1080p等比缩放) ================= */
.top-nav-bar {
  position: absolute;
  top: 40px;
  left: 0;
  width: 1920px;
  height: 60px;
  z-index: 100;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.top-nav-bar.osd-hidden {
  opacity: 0;
  transform: translateY(-20px);
}

/* 双通道顶部导航栏：无论频道还是发现状态，位置绝对锁死居中，严禁任何横向位移或抖动 (100% 对标用户指令与截图) */
.top-nav-bar {
  position: absolute !important;
  top: 40px !important;
  left: 0 !important;
  width: 1920px !important;
  height: 60px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  transform: translateY(0) !important;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 100 !important;
  pointer-events: none !important;
}

.top-nav-bar.osd-hidden {
  opacity: 0 !important;
  transform: translateY(-20px) !important;
}

.top-nav-bar .nav-indicator-track {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 250px !important; /* 固定总宽 250px，严格居中 */
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 0 !important;
  transform: none !important;
  transition: none !important; /* 彻底禁用容器自身的 transform/位移 transition，杜绝任何抖动 */
  padding: 0 !important;
}

.top-nav-bar .nav-tab {
  width: 96px !important; /* 每个Tab固定96px，居中对齐 */
  text-align: center !important;
  display: inline-block !important;
  font-size: 36px !important;
  font-weight: 600 !important; /* 统一字重为 600，杜绝字宽变化导致的任何左右漂移 */
  transition: opacity 0.25s ease, text-shadow 0.25s ease !important; /* 仅渐变不透明度与投影 */
}

.top-nav-bar .nav-tab.active {
  opacity: 1 !important;
  text-shadow: 0 2px 14px rgba(255, 255, 255, 0.5) !important;
}

.top-nav-bar .nav-tab:not(.active) {
  opacity: 0.55 !important;
  text-shadow: none !important;
}

.top-nav-bar .nav-tab-dim {
  display: none !important;
}

.nav-indicator-track {
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.nav-tab {
  font-size: 36px; /* 字体放大2号 (36px)，TV大屏极速易读 */
  font-weight: 500;
  color: #ffffff;
  opacity: 0.55; /* 未选中状态微透 */
  letter-spacing: 0.5px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  user-select: none;
  flex-shrink: 0;
}

.nav-tab.active {
  font-size: 36px; /* 选中字号与其他一致，大气醒目 */
  font-weight: 700;
  color: #ffffff;
  opacity: 1; /* 选中 100% 饱满不透明 */
  text-shadow: 0 2px 14px rgba(255, 255, 255, 0.5);
}

/* 底部纯白微晶指示条 (left 必须为 0，完全由 JS transform 精确居中对齐文字正下方) */
.nav-slider-bar {
  position: absolute;
  bottom: -16px;
  left: 0; /* 必须为 0 消除基准偏移 */
  width: 42px;
  height: 6px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 0 24px rgba(56, 189, 248, 0.65);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), width 0.25s ease;
  pointer-events: none;
}

/* ================= 画面中央大屏暂停指示图标 (按 OK 键暂停时呈现，继续播放时隐去) ================= */
.video-center-pause-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 18;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-center-pause-indicator.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.pause-icon-circle {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: rgba(10, 16, 28, 0.68);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 32px rgba(56, 189, 248, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg-center-pause {
  width: 64px;
  height: 64px;
  display: block;
  filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.45));
}

/* ================= 横向双流主舞台 ================= */
.stream-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 3840px;
  height: 1080px;
  display: flex;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.stream-stage.mode-channel {
  transform: translateX(0);
}

.stream-stage.mode-discovery {
  transform: translateX(-1920px);
}

.stream-panel {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
}

/* 视频播放器外层容器 */
.video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  background: #000;
}

.fullscreen-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 频道直播暗角渐变遮罩 */
.channel-vignette-scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.5) 100%),
              linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.4) 25%, transparent 50%),
              linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, transparent 20%);
  pointer-events: none;
}

/* 换台瞬黑转场遮罩 (模拟机顶盒无缝硬切与解码锁台质感) */
.channel-switch-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition: opacity 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}

.channel-switch-mask.blink {
  opacity: 0.94;
}

/* 右上角切台极速 HUD 徽标 (100% 对标用户最新指令：“红框里显示3位频道好号。绿色字体”) */
.channel-quick-hud {
  position: absolute;
  top: 44px;
  right: 80px;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.channel-quick-hud.active {
  opacity: 1;
  transform: translateY(0);
}

.hud-num {
  font-size: 58px; /* 大号三位台号数字 */
  font-weight: 800;
  color: #22c55e; /* 经典电视纯正荧光绿 */
  letter-spacing: 2px;
  line-height: 1;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 0 24px rgba(34, 197, 94, 0.7);
  font-variant-numeric: tabular-nums;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 彻底去掉胶囊和文字，只保留红框中纯粹大号绿色三位台号 */
.hud-name,
.hud-quality {
  display: none !important;
}

/* ================= 频道直播 OSD 浮层 (左下角) ================= */
.channel-osd-container {
  position: absolute;
  left: 80px;
  bottom: 74px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 900px;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.channel-osd-container.osd-hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.channel-osd-container.osd-flash {
  animation: osdFlashPulse 0.4s ease-out;
}

@keyframes osdFlashPulse {
  0% { transform: scale(0.98); opacity: 0.8; }
  50% { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.channel-header-row {
  display: flex;
  align-items: center;
}

.channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 8px 22px 8px 18px;
  border-radius: 32px;
}

.channel-num {
  font-size: 32px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 1px;
}

.channel-name {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
}

.channel-quality {
  font-size: 15px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  background: linear-gradient(135deg, #d97706, #f59e0b);
  color: #fff;
  letter-spacing: 0.5px;
}

.channel-program-current {
  display: flex;
  align-items: center;
  gap: 14px;
}

.program-status-tag {
  font-size: 16px;
  font-weight: 700;
  background: rgba(56, 189, 248, 0.22);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.45);
  padding: 3px 12px;
  border-radius: 6px;
}

.program-title {
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.channel-progress-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 520px;
}

.channel-track {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  overflow: hidden;
}

.channel-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #60a5fa);
  border-radius: 3px;
}

.channel-time-tip {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  font-family: monospace;
}

.channel-program-next {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0.85;
}

.program-next-tag {
  font-size: 15px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.8);
  padding: 2px 10px;
  border-radius: 6px;
}

.program-next-title {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.82);
}

/* ================= 频道直播 EPG 侧边栏抽屉 ================= */
.channel-epg-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 480px;
  height: 1080px;
  background: rgba(10, 16, 28, 0.82);
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.6);
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 64px 36px;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.channel-epg-drawer.open {
  transform: translateX(0);
}

.epg-drawer-header {
  margin-bottom: 32px;
}

.epg-drawer-header h3 {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.epg-count {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
}

.epg-channel-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.epg-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid transparent;
  transition: all 0.25s ease;
  cursor: pointer;
}

.epg-item.active {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.5);
}

.epg-item:focus,
.epg-item.focused {
  outline: none;
  background: rgba(56, 189, 248, 0.22);
  border-color: #ffffff;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.6), inset 0 0 12px rgba(255, 255, 255, 0.3);
  transform: scale(1.02);
}

.epg-num {
  font-size: 26px;
  font-weight: 700;
  color: #38bdf8;
  min-width: 50px;
}

.epg-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.epg-title {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}

.epg-now {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
}


/* ================= 发现流全屏层 (Discovery Layer) ================= */
.discovery-panel {
  background: #000;
}

.discovery-ambient-scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 18%, transparent 35%),
    linear-gradient(to top, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.65) 30%, transparent 65%),
    radial-gradient(ellipse at 85% 50%, rgba(0, 0, 0, 0.35) 0%, transparent 60%);
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.6s ease;
}

/* 5秒静默态遮罩规范 (100% 对标用户最新指令：“上面的遮罩去掉 下面的遮罩透明度降低”) */
.stream-stage.osd-idle-dimmed .discovery-ambient-scrim,
.discovery-panel.osd-idle-dimmed .discovery-ambient-scrim {
  background:
    linear-gradient(to bottom, transparent 0%, transparent 100%), /* 上面的遮罩彻底去掉 */
    linear-gradient(to top, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.12) 16%, transparent 32%); /* 下面的遮罩透明度大幅降低，画面通透开阔 */
}

/* ================= 发现流左下角 OSD ================= */
.discovery-osd-container {
  position: absolute;
  left: 80px;
  bottom: 60px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 840px; /* 预留右侧拉出 5.5 个海报货架 (850px) 空间，左右各美其美，至少预留 78px 呼吸间距 */
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 暂停状态下：左侧信息区整体向上抬升，留出舒适安全间隙，杜绝被粗进度条压住 */
.discovery-panel.is-paused .discovery-osd-container,
.discovery-osd-container.is-paused {
  bottom: 108px;
}

.discovery-osd-container.osd-hidden {
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}

/* 5秒二态静默：隐藏博主卡和点赞按钮，剩余元素下对齐 (100% 对标用户最新指令) */
.discovery-osd-container.osd-idle-dimmed {
  max-width: 840px;
}

.discovery-osd-container.osd-idle-dimmed .discovery-author-row {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 5秒二态静默：隐藏底部细进度条 */
.discovery-panel.osd-idle-dimmed .discovery-bottom-progress-bar,
.stream-stage.osd-idle-dimmed .discovery-bottom-progress-bar {
  opacity: 0 !important;
  transform: translateY(16px) !important;
  pointer-events: none !important;
}

.discovery-osd-container.osd-idle-dimmed .discovery-titles {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.discovery-osd-container.osd-idle-dimmed .discovery-main-title {
  opacity: 1; /* 用户最新截图：白字饱满清晰，不再过暗 */
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.discovery-osd-container.osd-idle-dimmed .discovery-sub-title {
  opacity: 0.88;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.85);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.discovery-osd-container.osd-idle-dimmed .discovery-idle-like-tag {
  display: none !important; /* 第2态右侧有专用的点赞胶囊，不再在标题旁冗余显示 */
}

.discovery-titles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 840px;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.discovery-main-title-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.discovery-main-title {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
  margin: 0;
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 840px;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 伴随主标题的纯展示用点赞图标与数字 */
.discovery-idle-like-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.svg-idle-heart {
  width: 22px;
  height: 22px;
  fill: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8));
}

.idle-like-count {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.5px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

.discovery-sub-title {
  font-size: 20px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
  margin: 0;
  opacity: 1;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 博主信息与点赞胶囊行 */
.discovery-author-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 4px;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.author-card {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 68px; /* 与点赞按钮高度严格保持一致 */
  padding: 0 24px 0 8px;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px; /* 纯圆角胶囊 */
  transition: all 0.25s ease;
  cursor: pointer;
  outline: none;
}

.author-card:focus,
.author-card.focused {
  border-color: #ffffff !important;
  background: rgba(15, 23, 42, 0.92) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.6), 0 0 36px rgba(56, 189, 248, 0.55), inset 0 0 16px rgba(255, 255, 255, 0.35) !important;
  transform: scale(1.05) !important;
}

.author-avatar-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.author-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.natgeo-yellow-box {
  width: 44px;
  height: 44px;
  border: 3.5px solid #ffcc00;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  flex-shrink: 0;
}

.natgeo-inner-logo {
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1;
}

.author-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.author-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.author-name {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}

.author-badge-v {
  width: 18px;
  height: 18px;
  background: #0284c7;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.svg-badge-v {
  width: 12px;
  height: 12px;
  fill: #fff;
}

.author-meta {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.2;
}

/* 点赞心形胶囊 (与博主卡高度 68px 严格完全一致) */
.discovery-like-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 68px; /* 严格等于 68px */
  padding: 0 28px;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px; /* 纯圆角胶囊 */
  transition: all 0.25s ease;
  cursor: pointer;
  outline: none;
}

.discovery-like-btn:focus,
.discovery-like-btn.focused {
  border-color: #ffffff !important;
  background: rgba(15, 23, 42, 0.92) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.6), 0 0 36px rgba(56, 189, 248, 0.55), inset 0 0 16px rgba(255, 255, 255, 0.35) !important;
  transform: scale(1.05) !important;
}

.heart-icon-wrap {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  flex-shrink: 0;
}

.svg-heart {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  transition: all 0.25s ease;
}

.discovery-like-btn.liked .svg-heart {
  fill: #ff4d6d;
  stroke: #ff4d6d;
}

.like-count {
  font-size: 21px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}


/* ==========================================================================
   伴随式推荐卡片容器 (右下角)
   支持单节目卡片 (assoc-single-card) 与多节目并排卡片 (assoc-multi-shelf)
   ========================================================================== */
.assoc-recommend-wrapper {
  position: absolute;
  right: 72px;
  bottom: 60px;
  z-index: 30;
  width: 382px; /* 缩小15%后严格对应2.5张卡片净宽 (140*2 + 16*2 + 70 = 382px)，精准呈现2个半 */
  overflow: hidden;
  padding: 14px 10px; /* 为卡片聚焦放大 scale(1.06) 与两侧半透外发光预留充足安全呼吸空间 */
  box-sizing: content-box;
  pointer-events: none;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), width 0.42s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 暂停状态下：右侧推荐卡片/货架整体向上抬升，与左侧信息区对齐，杜绝被粗进度条压住，无论任何切片类型均严格锁定 2.5 张卡片 */
.discovery-panel.is-paused .assoc-recommend-wrapper,
.assoc-recommend-wrapper.is-paused {
  bottom: 108px;
  width: 382px !important; /* 缩小15%后严格对应2.5张卡片净宽 (140*2 + 16*2 + 70 = 382px)，杜绝单卡模式或任何异常导致露出超过2个半 */
  overflow: hidden !important;
  box-sizing: content-box;
}

/* 用户最新核心指令：“拉出完整多部推荐的时候控制列表长度，最多展示5个半海报，不光是暂停状态，其他场景也保持一致调整”
   严格对应 5.5 个卡片净宽：140*5 + 16*5 + 70 = 850px，在暂停态与常规播放等所有场景下统一控制列表长度 */
.assoc-recommend-wrapper.expanded-row,
.assoc-recommend-wrapper.is-paused.expanded-row {
  width: 850px !important;
  overflow: hidden !important;
}

.assoc-recommend-wrapper.visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* 单卡片模式仅在常规播放唤出单卡时生效，暂停状态下严禁生效 */
.assoc-recommend-wrapper.single-mode:not(.is-paused) {
  width: auto !important;
  overflow: visible !important;
  padding: 16px 24px !important;
}

/* ================= 1. 单节目关联卡片 (100% 对标 Figma 254:3255) ================= */
.assoc-single-card {
  display: none; /* 默认由 JS 控制激活形态 */
  position: relative;
  width: 530px;
  height: 215px;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.76);
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  padding: 16px 24px 16px 16px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7), 0 0 24px rgba(56, 189, 248, 0.2);
  align-items: center;
  gap: 22px;
  cursor: pointer;
  outline: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.assoc-single-card.active-type {
  display: flex;
}

.assoc-single-card.focused {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.6), 0 0 40px rgba(56, 189, 248, 0.7), inset 0 0 16px rgba(255, 255, 255, 0.35) !important;
  transform: scale(1.03) !important;
}

.assoc-single-card:not(.focused) {
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75) !important;
  transform: none !important;
  outline: none !important;
}

.assoc-single-poster {
  position: relative;
  width: 140px;
  height: 180px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
  background: #000;
}

.assoc-single-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.assoc-single-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.assoc-single-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 14px;
  font-weight: 600;
  background: #0284c7;
  color: #fff;
  padding: 3px 12px;
  border-radius: 14px;
}

.assoc-single-title {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}

.assoc-single-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.assoc-single-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.assoc-meta-pill {
  font-size: 13px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  padding: 3px 12px;
  border-radius: 12px;
}

.assoc-single-arrow {
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.svg-chevron-right {
  width: 28px;
  height: 28px;
  fill: #fff;
  opacity: 0.85;
  transition: transform 0.25s ease;
}

.assoc-single-card:focus .svg-chevron-right,
.assoc-single-card.focused .svg-chevron-right {
  transform: translateX(4px);
  opacity: 1;
}

/* ================= 2. 多节目并排卡片货架 (严格展示2个半卡片，平滑横滑浏览) ================= */
.assoc-multi-shelf {
  display: none;
  align-items: center;
  gap: 16px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.assoc-multi-shelf.active-type {
  display: flex;
}

/* 竖图海报整体缩小 15% (由 164x243 缩至 140x206，圆角 14px) */
.multi-thumb-card {
  position: relative;
  width: 140px;
  height: 206px;
  border-radius: 14px;
  overflow: hidden;
  background: #0d1527;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.75);
  border: 2.5px solid transparent;
  cursor: pointer;
  outline: none;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.multi-thumb-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 用户指令 1：“落焦再展示节目名称”：未落焦时完全不展示，落焦时平滑浮现半透明渐变底节目标题
   用户最新指令：“落焦跑马” (落焦时若标题超出卡片宽度，平滑往复跑马灯滚动) */
.card-mini-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 4px 10px 4px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.68) 38%, rgba(0, 0, 0, 0.95) 100%);
  color: #ffffff;
  font-size: 18px; /* 放大 3 号大屏清晰字号 */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.2px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  box-sizing: border-box;
}

.multi-thumb-card.focused .card-mini-title {
  opacity: 1;
  transform: translateY(0);
}

.card-mini-title .mini-title-track {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-align: center; /* 未超长短标题默认居中对齐 */
}

/* 核心铁律：起跑点零偏差机制
   只要是超长标题 (.is-overflow) 或激活跑马 (.is-marquee)，无论聚焦与否，对齐基准永远严格靠左！
   确保文字始终从首字第一笔完整起点起跑，100% 杜绝首字被推入左侧负区间的阅读瑕疵与从居中到居左的跳闪 */
.card-mini-title.is-overflow .mini-title-track,
.card-mini-title.is-marquee .mini-title-track {
  text-align: left !important;
}

.card-mini-title .mini-title-content {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}

/* 超字跑马灯往复平滑滚动动效 (前段 10% 黄金停顿阅读前段，尾段 10% 停顿阅读后段，中间 38px/s 舒适平滑巡航) */
.card-mini-title.is-marquee .mini-title-content {
  animation: miniTitleMarqueeScroll var(--mini-marquee-duration, 5s) cubic-bezier(0.35, 0, 0.25, 1) infinite alternate;
}

@keyframes miniTitleMarqueeScroll {
  0%, 10% {
    transform: translateX(0);
  }
  90%, 100% {
    transform: translateX(var(--mini-marquee-dist, -50px));
  }
}

.multi-thumb-card.focused {
  border-color: #ffffff !important;
  box-shadow: 0 0 28px rgba(56, 189, 248, 0.95), inset 0 0 12px rgba(255, 255, 255, 0.5) !important;
  transform: scale(1.06) !important;
}

.multi-thumb-card:not(.focused) {
  border-color: transparent !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65) !important;
  transform: none !important;
  outline: none !important;
}


/* ================= 贴底全屏极简进度条 ================= */
.discovery-bottom-progress-bar {
  position: absolute;
  left: 80px;
  right: 80px;
  bottom: 24px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 0;
  border: none;
  background: transparent;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.discovery-bottom-progress-bar.osd-hidden {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

.progress-track {
  position: relative;
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: visible; /* 允许聚焦游标溢出呈现大圆球 */
}

.progress-buffered {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
}

.progress-played {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #60a5fa);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.8);
  border-radius: 3px;
}

.progress-time-label {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  font-family: monospace;
  min-width: 120px;
  text-align: right;
  transition: all 0.3s ease;
}

/* ================= 暂停状态下进度条调粗 (由 10px 进一步增粗至 14px，强化发光与时间码) ================= */
.discovery-bottom-progress-bar.is-paused .progress-track {
  height: 14px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.28);
  transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.discovery-bottom-progress-bar.is-paused .progress-buffered {
  border-radius: 7px;
}

.discovery-bottom-progress-bar.is-paused .progress-played {
  border-radius: 7px;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.95), 0 0 8px #ffffff;
}

.discovery-bottom-progress-bar.is-paused .progress-time-label {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

/* ================= 进度条获焦态 (100% 对标用户最新指令：“落焦的那个椭圆框去掉”) ================= */
.discovery-bottom-progress-bar.focused {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.discovery-bottom-progress-bar.focused .progress-track {
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.95), 0 0 30px rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.45);
}

.discovery-bottom-progress-bar.focused .progress-played {
  background: linear-gradient(90deg, #38bdf8, #ffffff);
  box-shadow: 0 0 20px rgba(56, 189, 248, 1), 0 0 14px #ffffff;
}

.progress-thumb-cursor {
  position: absolute;
  top: 50%;
  right: -13px;
  transform: translateY(-50%) scale(0);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  border: 2.5px solid #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 1), 0 0 24px rgba(255, 255, 255, 0.95);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.discovery-bottom-progress-bar.focused .progress-thumb-cursor {
  transform: translateY(-50%) scale(1);
}

.discovery-bottom-progress-bar.focused .progress-time-label {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(56, 189, 248, 1);
}

/* ================= 发现流右侧：视频中提到节目(3) 胶囊按钮 (大小高度和字体严格与左侧一致) ================= */
.discovery-mention-dock {
  position: absolute;
  right: 80px;
  bottom: 60px; /* 与左侧博主卡及点赞胶囊底边绝对平齐 (60px) */
  z-index: 30;
  display: flex;
  align-items: center;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 当处于暂停状态 (is-paused) 或推荐卡片货架展开时 (cards-open)，右侧胶囊彻底隐藏 (用户明确要求：暂停时右边不要胶囊了) */
.discovery-mention-dock.hidden,
.discovery-panel.cards-open .discovery-mention-dock,
.stream-stage.cards-open .discovery-mention-dock,
.discovery-panel.is-paused .discovery-mention-dock,
.stream-stage.is-paused .discovery-mention-dock {
  opacity: 0 !important;
  transform: translateY(8px) !important;
  pointer-events: none !important;
  display: none !important;
}

/* 胶囊按钮外观 (大小高度与左侧博主卡和点赞胶囊严格保持 68px 高度、完全一致的材质与阴影) */
.mention-pill-btn {
  height: 68px; /* 严格等于 68px，与左侧完全对齐 */
  padding: 0 24px 0 28px; /* 右侧配合箭头微调，视觉完美居中对称 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px; /* 文字与箭头之间舒适间距 */
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  color: #ffffff;
  outline: none;
  cursor: pointer;
  user-select: none;
  transition: all 0.25s ease;
}

/* 字体严格与左侧点赞数一致 (21px, 600, #fff, line-height: 1) */
.mention-text {
  font-size: 21px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1;
  white-space: nowrap;
}

/* 文字最后加一个 ">" (100% 对标用户最新指令与真机图) */
.mention-arrow {
  font-size: 21px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transform: translateY(-1px);
  transition: transform 0.25s ease, color 0.25s ease;
}

/* 大屏电视焦点高亮态 (TV Focus Engine 纯正发光反馈，与左侧点赞和博主卡高亮态 100% 一致) */
.mention-pill-btn:focus,
.mention-pill-btn.focused {
  border-color: #ffffff !important;
  background: rgba(15, 23, 42, 0.92) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.6), 0 0 36px rgba(56, 189, 248, 0.55), inset 0 0 16px rgba(255, 255, 255, 0.35) !important;
  transform: scale(1.05) !important;
  z-index: 2;
}

.mention-pill-btn:focus .mention-arrow,
.mention-pill-btn.focused .mention-arrow {
  color: #ffffff;
  transform: translateX(3px) translateY(-1px);
}

.mention-pill-btn:active {
  transform: scale(0.98);
}


/* ==========================================================================
   多节目全景大底板 (100% 对标 Figma 254:3260)
   左侧博主真人半身大写真 + 发光对话气泡，右侧一字排开 6 张竖版卡片大货架
   ========================================================================== */
.deep-shelf-drawer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1920px;
  height: 480px;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  opacity: 0;
  transform: translateY(120px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.deep-shelf-drawer.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.deep-shelf-backdrop {
  position: absolute;
  top: -120px;
  left: 0;
  width: 100%;
  height: 600px;
  background: linear-gradient(to top, rgba(2, 6, 18, 0.98) 0%, rgba(2, 6, 18, 0.88) 55%, rgba(2, 6, 18, 0.3) 85%, transparent 100%);
  pointer-events: none;
}

.deep-shelf-content {
  position: relative;
  z-index: 10;
  width: 1920px;
  height: 460px;
  display: flex;
  align-items: flex-end;
  padding-bottom: 36px;
}

/* 左侧：博主真人肖像与气泡对话区 (Figma 254:3260) */
.deep-shelf-author-zone {
  position: relative;
  width: 440px;
  height: 480px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* 极光发光气泡对话框 (Figma 254:3260) */
.deep-speech-bubble {
  position: absolute;
  top: 16px;
  left: 200px;
  z-index: 20;
  background: rgba(14, 28, 54, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1.5px solid #38bdf8;
  border-radius: 20px;
  padding: 14px 22px;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.5), inset 0 0 12px rgba(56, 189, 248, 0.2);
  white-space: nowrap;
}

.bubble-line {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.45;
  letter-spacing: 0.5px;
}

.bubble-tail {
  position: absolute;
  bottom: -9px;
  left: 28px;
  width: 16px;
  height: 16px;
  background: rgba(14, 28, 54, 0.9);
  border-right: 1.5px solid #38bdf8;
  border-bottom: 1.5px solid #38bdf8;
  transform: rotate(45deg);
}

.deep-author-portrait-crop {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 440px;
  height: 460px;
  overflow: visible;
  pointer-events: none;
}

.author-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
  display: block;
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.7));
}

/* 右侧：一字排开的 6 张竖版卡片大货架 (Figma 254:3260) */
.deep-shelf-rack-zone {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 10px;
  padding-right: 60px;
}

.shelf-cards-track {
  display: flex;
  align-items: center;
  gap: 22px;
  overflow-x: visible;
}

.shelf-card-unit {
  position: relative;
  width: 220px;
  height: 290px;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 2.5px solid transparent;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65);
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.shelf-card-unit.active,
.shelf-card-unit:focus,
.shelf-card-unit.focused {
  border-color: #38bdf8;
  background: rgba(15, 23, 42, 0.85);
  box-shadow: 0 0 32px rgba(56, 189, 248, 0.8), inset 0 0 14px rgba(255, 255, 255, 0.3);
  transform: translateY(-8px) scale(1.03);
}

.shelf-card-poster {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #000;
}

.shelf-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shelf-card-info {
  flex: 1;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.shelf-card-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shelf-card-episodes {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
}

/* 货架右侧大翻页箭头 */
.shelf-track-arrow-right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-left: 20px;
  flex-shrink: 0;
  cursor: pointer;
}

.svg-shelf-arrow {
  width: 44px;
  height: 44px;
  fill: #ffffff;
  opacity: 0.9;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.shelf-track-arrow-right:hover .svg-shelf-arrow {
  transform: translateX(4px);
  opacity: 1;
}

/* =========================================================================
   发现流右侧切片节目列表抽屉 (按返回键呼出，100% 对标 media_1790303038532.jpg)
   - 比例严格为 16:9
   - 当前正播节目缩略图左下角带蓝色三柱状跳动律动条动画
   - 呼出时自动落焦在当前正播节目的缩略图上
   - 落焦时带有蓝色高亮发光边框，并浮现节目标题名称
   ========================================================================= */

.discovery-playlist-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  height: 1080px;
  background: linear-gradient(270deg, rgba(5, 11, 24, 0.94) 0%, rgba(5, 11, 24, 0.72) 75%, transparent 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 120;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  overflow: hidden;
  transform: translateX(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  will-change: transform, opacity;
}

.discovery-playlist-drawer.open {
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 视口与定焦滑动轨道 (留足左右各 46px 发光与缩放安全呼吸带，彻底杜绝焦点边框与圆角被裁切) */
.playlist-cards-viewport {
  position: relative;
  width: 380px;
  height: 1080px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.playlist-cards-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 60px;
  padding-bottom: 750px; /* 充足的底部缓冲，确保即使最后一个卡片也能稳稳停留在第 2 位置 */
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* 严格 16:9 缩略图卡片 (288px * 162px，严格 16:9) */
.playlist-card-item {
  position: relative;
  width: 288px;
  height: 162px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #090e1a;
  border: 2.5px solid transparent;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.24s ease, box-shadow 0.24s ease;
}

.playlist-card-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 获焦状态：纯白高光边框与发光投影，与其他卡片组件 100% 统一，360度完整无裁切 */
.playlist-card-item.focused {
  border-color: #ffffff !important;
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.95), 0 0 38px rgba(56, 189, 248, 0.65), inset 0 0 10px rgba(255, 255, 255, 0.45) !important;
  transform: scale(1.06) !important;
  z-index: 10;
}

/* 正播律动均衡器图标 (对标 media_1790303038532.jpg 左下角蓝色三柱跳动动画) */
.playlist-card-eq {
  position: absolute;
  left: 12px;
  bottom: 12px;
  height: 18px;
  display: none;
  align-items: flex-end;
  gap: 3.5px;
  z-index: 6;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.playlist-card-item.is-playing .playlist-card-eq {
  display: flex;
}

.playlist-card-eq .eq-bar {
  width: 3.5px;
  background: #3b82f6;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.8);
}

.playlist-card-eq .bar-1 {
  height: 8px;
  animation: playlistEqBounce 0.65s ease-in-out infinite alternate;
}

.playlist-card-eq .bar-2 {
  height: 16px;
  animation: playlistEqBounce 0.85s ease-in-out infinite alternate 0.18s;
}

.playlist-card-eq .bar-3 {
  height: 11px;
  animation: playlistEqBounce 0.72s ease-in-out infinite alternate 0.32s;
}

@keyframes playlistEqBounce {
  0% {
    height: 4px;
    opacity: 0.7;
  }
  100% {
    height: 17px;
    opacity: 1;
  }
}

/* 用户最新指令：“字太小了 放大3号” (从 17px 放大 3 号至 23px，加粗 700 大屏醒目) */
.playlist-card-title-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 14px 12px 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(3, 7, 18, 0.72) 40%, rgba(3, 7, 18, 0.96) 100%);
  color: #ffffff;
  font-size: 23px; /* 放大3号，醒目大屏呈现 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.2px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  border-radius: 0 0 12px 12px;
}

/* 当卡片处于正播状态带有律动条时，左侧留出 38px 避让律动条 */
.playlist-card-item.is-playing .playlist-card-title-overlay {
  padding-left: 38px;
}

.playlist-card-title-overlay .marquee-text-track {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-align: left;
}

.playlist-card-title-overlay .marquee-text-content {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}

/* 超字跑马灯平滑往复滚动动效 (前段 10% 黄金停顿，尾段 10% 停顿，中间舒适巡航) */
.playlist-card-title-overlay.is-marquee .marquee-text-content {
  animation: playlistMarqueeScroll var(--marquee-duration, 5.5s) cubic-bezier(0.35, 0, 0.25, 1) infinite alternate;
}

@keyframes playlistMarqueeScroll {
  0%, 10% {
    transform: translateX(0);
  }
  90%, 100% {
    transform: translateX(var(--marquee-dist, -60px));
  }
}

.playlist-card-item.focused .playlist-card-title-overlay {
  opacity: 1 !important;
  transform: translateY(0) !important;
}