/* ==========================
   全局布局
   ========================== */
:root{
  /* 尺寸做了 clamp，4K 和普通屏都能看 */
  --padX: clamp(14px, 2.5vw, 42px);
  --padY: clamp(12px, 2.0vh, 32px);

  --titleFont: clamp(16px, 1.6vw, 28px);
  --subFont: clamp(12px, 1.1vw, 18px);

  --commentWidth: clamp(340px, 34vw, 760px);
  --commentHeight: clamp(230px, 34vh, 560px);
  --commentFontDefault: clamp(14px, 1.2vw, 20px);
  --commentFontLarge: clamp(18px, 1.5vw, 24px);
  --commentLine: 1.35;

  --glassBgA: rgba(0,0,0,.20);
  --glassBgB: rgba(0,0,0,.45);
  --glassStroke: rgba(255,255,255,.14);
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin: 0;
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: rgba(255,255,255,.92);

  /* 默认背景：纯 CSS 渐变（无需外部文件） */
  background:
    radial-gradient(1200px 900px at 70% 25%, rgba(255, 200, 120, .18), transparent 55%),
    radial-gradient(900px 900px at 20% 60%, rgba(120, 170, 255, .18), transparent 60%),
    linear-gradient(135deg, #0b0f1a 0%, #081024 45%, #0c0b1f 100%);
}

/* 背景图 / 背景视频（默认隐藏，不需要可删） */
#bgImage, #bgVideo{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;

  display: block; /* 想用就改成 block */
}
#bgImage{ filter: saturate(1.05) contrast(1.03) brightness(.9); }
#bgVideo{ filter: saturate(1.05) contrast(1.02) brightness(.85); }

/* ==========================
   顶部左侧：直播信息
   ========================== */
#liveHeader{
  position: fixed;
  left: var(--padX);
  top: var(--padY);
  z-index: 3;

  padding: clamp(10px, 1.1vw, 16px) clamp(12px, 1.4vw, 18px);
  border-radius: 18px;
  border: 1px solid var(--glassStroke);

  background: linear-gradient(135deg, rgba(0,0,0,.22), rgba(0,0,0,.45));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

.liveRow{
  display: flex;
  align-items: center;
  gap: 10px;
}
.liveDot{
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: #ff3b30;
  box-shadow: 0 0 0 0 rgba(255,59,48,.65);
  animation: pulse 1.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,59,48,.60); }
  70%{ box-shadow: 0 0 0 14px rgba(255,59,48,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,59,48,0); }
}
.liveBadge{
  font-weight: 700;
  letter-spacing: .8px;
  font-size: var(--subFont);
  opacity: .95;
}
.liveTitle{
  font-size: var(--titleFont);
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.liveSub{
  margin-top: 6px;
  font-size: var(--subFont);
  opacity: .88;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sep{ opacity: .65; }
.hint{ opacity: .72; }

/* ==========================
   左下角：评论区
   ========================== */
#commentDock{
  position: fixed;
  left: var(--padX);
  bottom: var(--padY);
  z-index: 3;

  width: var(--commentWidth);
  height: var(--commentHeight);

  padding: clamp(10px, 1.1vw, 16px);
  border-radius: 22px;

  border: 1px solid var(--glassStroke);
  background: linear-gradient(160deg, rgba(22, 24, 35, .22) 0%, rgba(0, 0, 0, .52) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 14px 40px rgba(0,0,0,.38);
}

.commentHeader{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  user-select: none;
}
.commentHeaderTitle{
  font-size: var(--subFont);
  font-weight: 800;
  letter-spacing: .4px;
  opacity: .95;
}
.commentHeaderTip{
  font-size: calc(var(--subFont) * .92);
  opacity: .72;
}

.commentList{
  height: calc(100% - 34px);
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;

  padding-right: 6px;
}

.comment{
  display: flex;
  gap: 10px;
  align-items: flex-start;

  font-size: var(--commentFontDefault);
  line-height: var(--commentLine);

  animation: commentIn .24s ease-out both;
}

@keyframes commentIn{
  from{
    transform: translateY(10px);
    opacity: 0;
    filter: blur(2px);
  }
  to{
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}

.userName{
  flex: 0 0 auto;
  font-weight: 800;
  opacity: .92;
  white-space: nowrap;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message{
  flex: 1 1 auto;
  opacity: .96;
  word-break: break-word;
}

.userName::after{
  content: ": ";
  opacity: .75;
  margin-left: 2px;
}

.commentDim{
  opacity: .60;
}

.lastHeaderSpan {
  padding-right: 20px;
}

/* ==========================
   顶部左侧：Logo 背景白色半透明渐变
   ========================== */
.logo {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 4px 8px;
}

.logo img {
  display: block;
  margin-bottom: -1px;
}
/* ==========================
   心心 canvas
   ========================== */
#heartsCanvas{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ==========================
   排名徽章
   ========================== */
.rankBox{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);

  background: linear-gradient(135deg, rgba(255, 215, 0, .18), rgba(0,0,0,.35));
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

.rankBox .trophy{
  font-size: clamp(14px, 1.2vw, 20px);
}

.rankBox .rankText{
  font-weight: 800;
  letter-spacing: .4px;
  font-size: clamp(12px, 1.05vw, 16px);
  opacity: .95;
}

/* ==========================
   右下角：CTA 按钮组
   ========================== */
#ctaDock{
  position: fixed;
  right: var(--padX);
  top: var(--padY);
  z-index: 4; /* 要比 canvas(2) 和评论/标题(3) 更高，确保可见 */

  display: flex;
  gap: 10px;
  align-items: center;
}

.ctaBtn{
  border: 0px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 10px 14px;

  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(0,0,0,.35));
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: clamp(12px, 1.05vw, 16px);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  cursor: pointer;
  user-select: none;
}

.ctaBtn:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.ctaBtn:active{
  transform: translateY(0px) scale(.98);
}



.ctaIcon{
  width: clamp(18px, 1.6vw, 22px);
  height: clamp(18px, 1.6vw, 22px);
  fill: rgba(255,255,255,.92);
  flex: 0 0 auto;
}

.ctaText{
  line-height: 1;
}

/* 可选：给三个按钮一点“不同味道” */
.ctaFollow{ background: linear-gradient(135deg, rgba(0,200,255,.18), rgba(0,0,0,.35)); }
.ctaShare { background: linear-gradient(135deg, rgba(160,120,255,.18), rgba(0,0,0,.35)); }
.ctaLike  { background: linear-gradient(135deg, rgba(255,80,160,.22), rgba(0,0,0,.35)); }