:root{
  --bg:#0a0d0b;
  --card:#121614;
  --card-2:#181d1a;
  --text:#e0e6e2;
  --dim:#8e968f;
  --muted:#5d655f;
  --green:#5a8f6e;
  --green-2:#3f6b51;
  --green-deep:#1c2e24;
  --green-bright:#8fc4a4;
  --warn:#e06c60;
  --sys-yellow:#e8b040;
  --film-row:64px;   /* 片单单行高度，5 行 = 片单区高度 */
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(900px 520px at 10% -10%, rgba(60,100,80,.10), transparent 62%),
    radial-gradient(760px 520px at 95% 108%, rgba(50,70,60,.07), transparent 60%),
    var(--bg);
  color:var(--text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.01em;
}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18);}
::-webkit-scrollbar-track{background:transparent;}
svg.icon{width:18px;height:18px;display:block;flex:0 0 auto;}

/* ==================== 顶栏 ==================== */
.topbar{
  height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;background:rgba(14,18,16,.78);
  backdrop-filter:blur(18px);position:relative;z-index:120;
}
/* z-index 必须高过播放器控制栏（82）。我 .player 只是 position:relative + z-index:auto，
   不创建层叠上下文，里面控制栏的 82 是拿到根上比大小的 —— 顶栏原来的 80 比不过，
   于是手机上头像下拉、分享卡片都被控制栏压住。120 > 82 就好，全屏时 player 是 99999，仍盖住顶栏。 */
.brand{display:flex;align-items:center;gap:11px;min-width:0;overflow:hidden;}
.logo{
  width:34px;height:34px;border-radius:11px;flex:0 0 auto;
  background:linear-gradient(140deg,#4d7c60 0%,#35563f 50%,#152219 100%);
  display:grid;place-items:center;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.95);
  position:relative;overflow:hidden;
}
.logo::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.28),transparent 58%);mix-blend-mode:overlay;}
.logo svg{width:17px;height:17px;color:#eaf2ed;position:relative;z-index:1;}
/* 换成图片后铺满整个圆角方块，并把渐变底和光斑去掉，避免透出原图底色 */
.logo:has(img){background:transparent;box-shadow:none;}
.logo:has(img)::after{display:none;}
.logo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.brand-text{display:flex;flex-direction:column;line-height:1.2;min-width:0;overflow:hidden;}
.brand-name{
  font-size:15px;font-weight:800;letter-spacing:.02em;
  background:linear-gradient(92deg,#eef4f0 10%,#a8c9b7 65%,#5a8f6e);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.brand-sub{font-size:10.5px;color:var(--muted);letter-spacing:.16em;margin-top:2px;white-space:nowrap;text-transform:uppercase;}

.topbar-right{display:flex;align-items:center;gap:9px;flex:0 0 auto;}
.pill{
  display:flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:99px;
  font-size:12px;color:#c2cbc5;background:rgba(255,255,255,.05);font-variant-numeric:tabular-nums;
}
.pill svg{width:14px;height:14px;opacity:.6;}
.pill.live{color:#9fc0ac;background:rgba(90,143,110,.12);letter-spacing:.1em;font-weight:600;font-size:11px;}
.pill.live i{
  width:6px;height:6px;border-radius:50%;background:#6fa586;
  box-shadow:0 0 0 0 rgba(90,143,110,.5);animation:liveDot 2.2s ease-out infinite;
}
@keyframes liveDot{
  0%{box-shadow:0 0 0 0 rgba(90,143,110,.5);}
  70%{box-shadow:0 0 0 7px rgba(90,143,110,0);}
  100%{box-shadow:0 0 0 0 rgba(90,143,110,0);}
}
.pill.clock{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12px;color:#7d857f;letter-spacing:.08em;}
.pill.sync{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:11px;color:#8fb29c;background:rgba(90,143,110,.10);}
.pill.sync.warn{color:#e0a860;background:rgba(224,168,96,.10);}
.pill.sync.bad{color:#e06c60;background:rgba(224,108,96,.10);}

.ibtn{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:none;color:#b8c1bb;cursor:pointer;transition:.18s;
}
.ibtn:hover{background:rgba(255,255,255,.10);color:#fff;}
.ibtn svg{width:17px;height:17px;display:block;}
.tbtn{
  height:32px;padding:0 13px;border-radius:99px;border:none;
  background:rgba(255,255,255,.055);color:#d5ddd8;font-size:12.5px;font-weight:600;
  font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.2s;
  text-decoration:none;white-space:nowrap;flex:0 0 auto;box-sizing:border-box;line-height:1;
}
.tbtn:hover{background:rgba(255,255,255,.10);}
.tbtn.primary{background:linear-gradient(120deg,#4d7c60,#2f5540);color:#eef5f0;box-shadow:0 5px 14px -8px rgba(0,0,0,.9);}
.tbtn.primary:hover{filter:brightness(1.1);}

/* ==================== 布局 ==================== */
main{
  display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:13px;padding:13px;
  height:calc(100vh - 60px);transition:grid-template-columns .3s ease;
}
/* 网格子项默认 min-width:auto，会被里面 nowrap 的长文本（片名 + 时长 + 描述）撑破，
   整列跟着一起变宽 —— 手机上就表现成「桌面版等比缩小」。一律压成 0，让它按容器宽缩。 */
main > *{min-width:0;}
body.theater main{grid-template-columns:minmax(0,1fr);}
body.theater .sidebar{display:none;}

/* ==================== 播放器 ==================== */
.stage-wrap{display:flex;flex-direction:column;min-height:0;min-width:0;}
.player{
  position:relative;flex:1;min-height:0;display:flex;flex-direction:column;
  background:#070908;border-radius:18px;overflow:hidden;
  box-shadow:0 28px 80px -36px rgba(0,0,0,.95);
}
.player:fullscreen{border-radius:0;}
/* overflow:clip —— 用 hidden 时内容超长会被浏览器自动 scrollTop，导致弹幕/中场层整体上移 */
.video-stage{position:relative;flex:1;min-height:0;overflow:hidden;overflow:clip;background:#000;}

#video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block;}

/* 无信号 / 加载 / 等待 */
.screen-layer{
  position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(ellipse 60% 50% at 50% 60%, rgba(30,46,38,.55), transparent 70%), #070908;
  transition:opacity .45s ease, visibility .45s;text-align:center;padding:20px;
}
.screen-layer.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.screen-layer .ico{font-size:40px;opacity:.7;filter:drop-shadow(0 0 18px rgba(90,143,110,.35));}
.screen-layer .tt{font-size:15px;font-weight:700;color:#cfe0d5;letter-spacing:.03em;}
.screen-layer .dd{font-size:12px;color:#7b847e;line-height:1.7;max-width:380px;}
.spinner{
  width:30px;height:30px;border-radius:50%;
  border:2px solid rgba(90,143,110,.18);border-top-color:#5a8f6e;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.grain{
  position:absolute;inset:-60%;opacity:.05;pointer-events:none;z-index:3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift .45s steps(2) infinite;
}
@keyframes grainShift{0%{transform:translate(0,0);}50%{transform:translate(-1.4%,1%);}100%{transform:translate(1%,-1.4%);}}
.vignette{position:absolute;inset:0;pointer-events:none;z-index:4;background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.7) 100%);}

.stage-tag{
  position:absolute;left:14px;top:14px;z-index:12;display:flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:8px;background:rgba(12,16,14,.55);backdrop-filter:blur(8px);
  font-size:10.5px;letter-spacing:.14em;color:#a9b2ac;font-weight:600;
}
.stage-tag .rec{width:5px;height:5px;border-radius:50%;background:#6fa586;animation:recBlink 2.4s steps(1) infinite;}
@keyframes recBlink{0%,48%{opacity:1;}49%,100%{opacity:.2;}}

/* 右下角常驻小字：浅灰 + 圆圈叹号。
   刻意不做成按钮、不加 hover，也不接 pointer-events —— 全屏时点画面要能收控制栏，
   它要是能点，就会吃掉那一块区域的点击。
   z-index 故意低于 .controls(82)：伪全屏时控制栏是绝对定位压在画面底部的，
   控制栏一出来就把它盖住，收起来又能看见，省得为了避开栏高写一堆固定偏移。 */
.ad-warn{
  position:absolute;right:12px;bottom:10px;z-index:16;
  display:flex;align-items:center;gap:5px;
  font-size:11px;line-height:1;letter-spacing:.01em;
  color:rgba(255,255,255,.38);
  text-shadow:0 1px 2px rgba(0,0,0,.9);
  pointer-events:none;user-select:none;white-space:nowrap;
}
.ad-warn svg{width:12px;height:12px;flex:0 0 auto;opacity:.9;}
/* 窄屏上字号再压一点，18 个字在 320px 宽的画面上也不至于挤到边 */
@media (max-width:420px){
  .ad-warn{right:8px;bottom:7px;font-size:10px;gap:4px;}
  .ad-warn svg{width:11px;height:11px;}
}

/* 弹幕永远在最上层：中场休息层(70)、认怂遮罩(30)都盖不住它 */
.danmaku-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:75;}
.danmaku{
  position:absolute;left:100%;white-space:nowrap;font-size:15.5px;font-weight:600;color:rgba(255,255,255,.94);
  text-shadow:0 1px 3px rgba(0,0,0,.98),0 0 16px rgba(0,0,0,.9);will-change:transform;
}
.danmaku.self{
  color:#eef5f0;padding:2px 11px;border-radius:99px;background:rgba(56,92,70,.88);
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}

/* ==================== 认怂模式：柔光渐晕 ==================== */
/* 以前用 SVG 硬边色块当"眼皮"，非等比缩放会把边缘的模糊拉变形，
   就会出现锯齿和一条生硬的过渡线。现在整块改用 CSS 渐变叠出来：
   上下最深 → 往中间自然淡开 → 中间留一大片透亮，全程没有硬边，也不依赖清晰度。 */
.squint{
  position:absolute;inset:0;z-index:30;pointer-events:none;
  opacity:0;transition:opacity .5s ease;
}
.player.scared .squint{opacity:1;}
.squint .lid{position:absolute;inset:-2% 0;display:block;pointer-events:none;will-change:transform;}

/* 上边：从上往下越来越淡 */
.squint .lid-t{
  background:linear-gradient(to bottom,
    rgba(2,5,4,.97) 0%,
    rgba(2,5,4,.955) 6%,
    rgba(2,5,4,.92) 12%,
    rgba(2,5,4,.86) 18%,
    rgba(2,5,4,.77) 24%,
    rgba(2,5,4,.65) 30%,
    rgba(2,5,4,.52) 35%,
    rgba(2,5,4,.39) 40%,
    rgba(2,5,4,.26) 45%,
    rgba(2,5,4,.15) 49%,
    rgba(2,5,4,.07) 53%,
    rgba(2,5,4,.02) 57%,
    rgba(2,5,4,0) 61%);
}
/* 下边：镜像 */
.squint .lid-b{
  background:linear-gradient(to top,
    rgba(2,5,4,.97) 0%,
    rgba(2,5,4,.955) 6%,
    rgba(2,5,4,.92) 12%,
    rgba(2,5,4,.86) 18%,
    rgba(2,5,4,.77) 24%,
    rgba(2,5,4,.65) 30%,
    rgba(2,5,4,.52) 35%,
    rgba(2,5,4,.39) 40%,
    rgba(2,5,4,.26) 45%,
    rgba(2,5,4,.15) 49%,
    rgba(2,5,4,.07) 53%,
    rgba(2,5,4,.02) 57%,
    rgba(2,5,4,0) 61%);
}
/* 左右两角再压一点，让"偷看"的范围收成一大片椭圆，而不是一条横带 */
.squint .lid-s{
  background:radial-gradient(ellipse 56% 47% at 50% 50%,
    rgba(2,5,4,0) 32%,
    rgba(2,5,4,.07) 48%,
    rgba(2,5,4,.17) 62%,
    rgba(2,5,4,.30) 76%,
    rgba(2,5,4,.44) 88%,
    rgba(2,5,4,.58) 100%);
}


/* 呼吸：极轻微的上下浮动，幅度用百分比，任何尺寸都不会突变 */
/* 认怂遮罩保持静止：以前这里还有眼皮呼吸(lidBreathT/B)和整体飘移(squintDrift)，
   实测画面亮度会在 17~28 之间反复起伏，看着像画面在喘气，已全部去掉 */

@keyframes lidBreathT{
  0%,100%{transform:translateY(0);}
  38%    {transform:translateY(-1.1%);}
  62%    {transform:translateY(.7%);}
}
@keyframes lidBreathB{
  0%,100%{transform:translateY(0);}
  32%    {transform:translateY(1.1%);}
  66%    {transform:translateY(-.7%);}
}
/* 整个渐晕极缓慢地飘一下，避免看起来像贴了一张静态图 */

@keyframes squintDrift{
  0%,100%{transform:translate(0,0);}
  33%    {transform:translate(.18%,-.14%);}
  67%    {transform:translate(-.16%,.12%);}
}

/* 画面本身轻微失焦 + 压暗（遮罩只负责上下渐深，压暗交给滤镜，两者叠加才不会死黑） */
.player.scared #video{filter:blur(2.2px) brightness(.72) saturate(.72) contrast(1.04);transition:filter .4s ease;}
.player.scared .grain{opacity:.12;}
.scared-badge{
  position:absolute;top:14px;left:50%;z-index:45;transform:translate(-50%,-14px);
  display:flex;align-items:center;gap:7px;padding:6px 13px;border-radius:99px;
  background:rgba(22,30,26,.94);color:#a6c9b4;font-size:11.5px;letter-spacing:.08em;font-weight:600;
  backdrop-filter:blur(10px);box-shadow:0 8px 22px -12px rgba(0,0,0,.95);
  opacity:0;pointer-events:none;transition:all .42s cubic-bezier(.2,.8,.3,1);
}
.scared-badge svg{width:14px;height:14px;}
.player.scared .scared-badge{opacity:1;transform:translate(-50%,0);}

.toast{
  position:absolute;left:50%;bottom:18px;z-index:90;transform:translate(-50%,12px);
  background:rgba(22,28,24,.96);color:#dfe6e1;font-size:12.5px;font-weight:500;
  padding:9px 18px;border-radius:11px;opacity:0;pointer-events:none;white-space:nowrap;
  backdrop-filter:blur(14px);box-shadow:0 16px 40px -14px rgba(0,0,0,.95);
  transition:all .3s cubic-bezier(.2,.8,.3,1);
}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* 控制条 */
.controls{
  position:relative;z-index:82;display:flex;align-items:center;gap:6px;
  height:56px;flex:0 0 auto;padding:0 10px 0 8px;
  background:linear-gradient(180deg,rgba(22,28,24,.96),rgba(9,12,10,.99));
  backdrop-filter:blur(14px);transition:opacity .32s ease,transform .32s ease;
}
.player.ui-hidden .controls{opacity:0;transform:translateY(100%);pointer-events:none;}
.player.ui-hidden{cursor:none;}

.cbtn{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:transparent;border:none;color:#aab3ad;cursor:pointer;padding:0;
  transition:background .18s,color .18s,transform .12s;font-family:inherit;
}
.cbtn:hover{background:rgba(255,255,255,.08);color:#fff;}
.cbtn.active{color:#a6c9b4;background:rgba(90,143,110,.16);}
.cbtn.off{opacity:.36;}
.cbtn:active{transform:scale(.92);}
.cbtn svg{width:19px;height:19px;}
/* 「重新加载」点了转一圈：不转的话画面本来就在转圈/黑着，看不出按钮有没有生效 */
#btnReload svg{transform-origin:50% 50%;}
#btnReload.spin svg{animation:reloadSpin .85s cubic-bezier(.4,.1,.4,1);}
@keyframes reloadSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.play-btn{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(130deg,#4d7c60,#2f5540);color:#eef5f0;border:none;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 5px 16px -8px rgba(0,0,0,.95);transition:.18s;flex:0 0 auto;
}
.play-btn:hover{filter:brightness(1.12);transform:scale(1.04);}
.play-btn:active{transform:scale(.95);}
.play-btn svg{width:18px;height:18px;}

.now{display:flex;align-items:center;gap:9px;margin-left:6px;min-width:0;flex:0 1 auto;}
.now-dot{width:5px;height:5px;border-radius:50%;flex:0 0 auto;background:#5a8f6e;box-shadow:0 0 8px rgba(90,143,110,.6);}
.now-title{font-size:13.5px;font-weight:600;color:#dbe3de;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em;}
.now-badge{flex:0 0 auto;font-size:9.5px;font-weight:700;letter-spacing:.12em;padding:2px 7px;border-radius:5px;color:#9fc0ac;background:rgba(90,143,110,.14);}
.now-left{flex:0 0 auto;font-size:10.5px;color:#6d7670;font-variant-numeric:tabular-nums;}

.inline-dm{display:none;align-items:center;gap:6px;flex:1;min-width:0;max-width:520px;margin:0 6px;position:relative;}
.player.is-fs .inline-dm{display:flex;}
.player.is-fs .now{flex:0 0 auto;max-width:30%;}
.fs-emoji-toggle{background:none;border:none;font-size:20px;cursor:pointer;padding:0 4px;line-height:1;opacity:.7;transition:.2s;flex:0 0 auto;}
.fs-emoji-toggle:hover{opacity:1;transform:scale(1.1);}
#fsDmInput{
  flex:1;min-width:0;height:32px;background:rgba(255,255,255,.06);border:none;border-radius:9px;
  padding:0 12px;color:var(--text);font-size:12.5px;font-family:inherit;outline:none;transition:.2s;
}
#fsDmInput::placeholder{color:#5d655f;}
#fsDmInput:focus{background:rgba(90,143,110,.13);box-shadow:0 0 0 2px rgba(90,143,110,.28);}
#fsDmSend{
  height:32px;padding:0 13px;border-radius:9px;border:none;
  background:linear-gradient(120deg,#4d7c60,#2f5540);color:#eef5f0;font-size:12px;font-weight:700;
  font-family:inherit;cursor:pointer;flex:0 0 auto;transition:.18s;
}
#fsDmSend:hover{filter:brightness(1.1);}
.fs-emoji-pop{
  position:absolute;bottom:calc(100% + 8px);left:0;width:302px;background:rgba(22,28,24,.98);
  border-radius:12px;padding:0 0 4px;display:none;flex-direction:column;overflow:hidden;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.95);z-index:100;
}
.fs-emoji-pop.open{display:flex;}
.fs-emoji-pop .ep-pane{max-height:176px;}

.cright{margin-left:auto;display:flex;align-items:center;gap:3px;flex:0 0 auto;}

.vol-wrap{position:relative;display:flex;align-items:center;}
.vol-pop{
  position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%,8px);
  width:44px;padding:14px 0 10px;border-radius:14px;background:rgba(22,28,24,.98);
  backdrop-filter:blur(16px);display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.95);z-index:60;
}
.vol-wrap:hover .vol-pop,.vol-wrap.pinned .vol-pop{opacity:1;pointer-events:auto;transform:translate(-50%,0);}
#volRange{
  -webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;
  width:5px;height:86px;border-radius:99px;
  background:linear-gradient(to top,#5a8f6e var(--fill,70%),rgba(255,255,255,.13) var(--fill,70%));
  outline:none;cursor:pointer;
}
#volRange::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;
  background:#dde6e0;cursor:pointer;box-shadow:0 0 8px rgba(90,143,110,.55),0 2px 6px rgba(0,0,0,.6);
}
.vol-num{font-size:10.5px;font-weight:700;color:#a3b0a8;font-variant-numeric:tabular-nums;letter-spacing:.04em;}

.r-wrap{position:relative;display:flex;align-items:center;}
.r-btn{
  height:32px;padding:0 11px;border-radius:10px;display:flex;align-items:center;gap:5px;
  background:transparent;border:none;color:#aab3ad;font-size:12px;font-weight:700;
  font-family:inherit;cursor:pointer;transition:.18s;letter-spacing:.03em;max-width:150px;
}
.r-btn:hover{background:rgba(255,255,255,.08);color:#fff;}
.r-btn.active{color:#a6c9b4;background:rgba(90,143,110,.16);}
.r-btn svg{width:15px;height:15px;}
.r-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.r-menu{
  position:absolute;bottom:calc(100% + 12px);right:0;min-width:150px;padding:5px;border-radius:13px;
  background:rgba(22,28,24,.99);backdrop-filter:blur(16px);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.95);
  opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s ease;z-index:60;
}
.r-menu.open{opacity:1;pointer-events:auto;transform:translateY(0);}
.r-menu button{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:8px 11px;border-radius:9px;background:none;border:none;color:#bcc5bf;
  font-size:12.5px;font-family:inherit;cursor:pointer;transition:.15s;text-align:left;white-space:nowrap;
}
.r-menu button:hover{background:rgba(255,255,255,.07);color:#fff;}
.r-menu button.on{color:#a6c9b4;font-weight:700;background:rgba(90,143,110,.14);}
.r-menu button.on::after{content:'✓';font-size:12px;color:#6fa586;}
.r-menu .empty{padding:8px 11px;font-size:12px;color:#6d7670;}

.scared-btn{
  display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:10px;
  background:transparent;border:none;color:#aab3ad;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;transition:.2s ease;
}
.scared-btn svg{width:16px;height:16px;}
.scared-btn:hover{background:rgba(255,255,255,.08);color:#fff;}
.scared-btn.active{background:rgba(90,143,110,.18);color:#a6c9b4;}

/* 高能预警 */
.warning-overlay{
  position:absolute;inset:0;z-index:100;background:rgba(5,8,6,.92);backdrop-filter:blur(12px);
  display:flex;justify-content:center;align-items:center;transition:opacity .5s ease,visibility .5s ease;
  overflow:auto;
}
.warning-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.warning-content{
  text-align:center;display:flex;flex-direction:column;align-items:center;padding:20px;
  animation:fadeInUp .6s ease;max-height:100%;overflow-y:auto;
}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
.warning-icon{font-size:64px;color:#ffb020;margin-bottom:20px;line-height:1;filter:drop-shadow(0 0 20px rgba(255,176,32,.4));}
.warning-title{font-size:28px;font-weight:800;color:#e06c60;letter-spacing:.1em;margin:0 0 16px 0;text-shadow:0 0 20px rgba(224,108,96,.4);}
.warning-desc{font-size:14px;color:#c2cbc5;line-height:1.8;margin:0 0 32px 0;letter-spacing:.02em;white-space:pre-line;}
.warning-btn{
  padding:12px 40px;border-radius:99px;border:none;background:linear-gradient(120deg,#e06c60,#d45043);
  color:#fff;font-size:15px;font-weight:700;font-family:inherit;letter-spacing:.05em;
  cursor:pointer;transition:.2s;
  box-shadow:0 8px 28px -8px rgba(224,108,96,.8),0 0 0 1px rgba(255,255,255,.1) inset;
}
.warning-btn:hover{filter:brightness(1.15);transform:translateY(-2px);}

/* ==================== 侧栏 ==================== */
.sidebar{display:flex;flex-direction:column;gap:12px;min-height:0;}
.panel{
  background:linear-gradient(180deg,rgba(18,22,20,.94),rgba(14,17,15,.94));
  border-radius:16px;display:flex;flex-direction:column;min-height:0;overflow:hidden;
  backdrop-filter:blur(10px);
}
.panel.playlist{flex:0 0 auto;max-height:none;}
.panel.chat{flex:1;min-height:0;}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px;flex:0 0 auto;white-space:nowrap;}
.panel-head h2{
  margin:0;font-size:12.5px;font-weight:700;color:#d2dad5;letter-spacing:.05em;
  display:flex;align-items:center;gap:7px;flex:0 0 auto;
}
.panel-head h2::before{content:'';width:3px;height:12px;border-radius:2px;background:linear-gradient(180deg,#5a8f6e,#1c2e24);}
/* 提示行永远单行：长了就横向滑动（手机上可以搓），滚动条藏起来。
   一旦允许折行，「今天还剩 N 张热度卡」就会把整个头部撑高，搜索框一开一关板块就跳。 */
.panel-hint{
  font-size:10.5px;color:var(--muted);letter-spacing:.03em;
  white-space:nowrap;overflow-x:auto;overflow-y:hidden;min-width:0;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.panel-hint::-webkit-scrollbar{display:none;height:0;}

/* 片单搜索：默认只露一个放大镜，点开才展开输入框，
   这样不占地方、也不跟「热度高的优先播」那行提示抢空间 */
.film-search-wrap{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;flex:1 1 auto;}
.film-search{
  width:0;padding:0;border:1px solid transparent;border-radius:99px;height:24px;
  background:rgba(255,255,255,.06);color:#e2eae5;font-size:11.5px;font-family:inherit;
  outline:none;opacity:0;transition:width .22s ease,opacity .18s ease,padding .22s ease,border-color .18s;
  min-width:0;
}
.film-search::-webkit-search-cancel-button{display:none;}
.film-search-wrap.open .film-search{
  width:132px;padding:0 10px;opacity:1;border-color:rgba(120,170,140,.35);
}
.film-search-wrap.open .film-search:focus{border-color:rgba(140,195,165,.6);background:rgba(255,255,255,.09);}
.film-search-wrap.open .panel-hint{display:none;}
.film-search-btn{
  flex:0 0 auto;width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;
  border:none;border-radius:50%;background:rgba(255,255,255,.06);cursor:pointer;transition:.18s;
}
.film-search-btn:hover{background:rgba(90,143,110,.22);}
.film-search-btn svg{
  width:12px;height:12px;fill:none;stroke:#9aa49e;stroke-width:2.1;
  stroke-linecap:round;transition:stroke .18s;
}
.film-search-btn:hover svg{stroke:#b9d5c5;}
.film-search-wrap.open .film-search-btn svg{stroke:#a6c9b4;}
.film-empty{padding:18px;text-align:center;color:#5d655f;font-size:12px;}

.category-tabs{display:flex;gap:6px;padding:0 13px 10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;flex:0 0 auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x;
  cursor:grab;user-select:none;-webkit-user-select:none;scroll-behavior:auto;}
/* 鼠标拖动过程中：不要文字选中、光标变抓手 */
.category-tabs.dragging{cursor:grabbing;}
.category-tabs.dragging button{pointer-events:none;}
.category-tabs::-webkit-scrollbar{display:none;}
.category-tabs button{
  flex:0 0 auto;padding:5px 12px;border-radius:99px;border:none;
  background:rgba(255,255,255,.06);color:#9ba49d;font-size:11.5px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:.2s;
}
.category-tabs button:hover{background:rgba(255,255,255,.1);color:#fff;}
.category-tabs button.active{background:rgba(90,143,110,.2);color:#a6c9b4;box-shadow:0 0 0 1px rgba(90,143,110,.3) inset;}

/* 片单固定高度：正好 5 部片，多出来的滚动看 */
.film-list{
  overflow-y:auto;padding:0 7px 7px;flex:0 1 auto;min-height:0;
  display:flex;flex-direction:column;gap:3px;
  max-height:calc(var(--film-row) * 5 + 12px + 7px);
  overscroll-behavior:contain;
}
.film-item{
  display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border-radius:12px;
  position:relative;transition:background .2s;height:var(--film-row);box-sizing:border-box;
}
.film-item:hover{background:rgba(255,255,255,.04);}
.film-item.is-live{background:linear-gradient(100deg,rgba(90,143,110,.11),rgba(90,143,110,.01) 70%);}
.film-idx{
  width:20px;flex:0 0 auto;text-align:right;font-family:"SF Mono",Menlo,Consolas,monospace;
  font-size:11px;color:#525b55;font-variant-numeric:tabular-nums;
}
.film-item.is-live .film-idx{color:#7fa88f;}
.film-info{flex:1;min-width:0;}
.film-title{font-size:13px;font-weight:600;color:#c8d1cb;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;}
.film-title .t{overflow:hidden;text-overflow:ellipsis;}
.film-item.is-live .film-title{color:#eef4f0;}
.badge-live{
  flex:0 0 auto;font-size:9px;font-weight:800;letter-spacing:.1em;padding:1.5px 6px;border-radius:5px;
  color:#eef5f0;background:linear-gradient(100deg,#4d7c60,#2f5540);
}
.badge-next{
  flex:0 0 auto;font-size:9px;font-weight:800;letter-spacing:.06em;padding:1.5px 6px;border-radius:5px;
  color:#a6c9b4;background:rgba(90,143,110,.16);
}
.film-sub{font-size:10.5px;color:#6d7670;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.heat-bar{height:3px;background:rgba(255,255,255,.06);border-radius:99px;margin-top:6px;overflow:hidden;}
.heat-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3f6b51,#5a8f6e);transition:width .55s cubic-bezier(.3,.9,.3,1);}
.heat-btn{
  position:relative;flex:0 0 auto;display:flex;align-items:center;gap:5px;height:28px;padding:0 9px;
  border-radius:99px;background:rgba(255,255,255,.05);border:none;color:#8fb29c;cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;transition:.18s ease;
}
.heat-btn:hover{background:rgba(90,143,110,.20);color:#eef5f0;}
.heat-btn:active{transform:scale(.93);}
.heat-btn svg{width:12px;height:12px;}
.heat-btn.pop{animation:popBtn .34s cubic-bezier(.3,1.6,.5,1);}
@keyframes popBtn{0%{transform:scale(1);}42%{transform:scale(1.14);}100%{transform:scale(1);}}
.float-num{
  position:absolute;right:4px;top:-4px;font-size:11px;font-weight:800;color:#a8c9b7;pointer-events:none;
  text-shadow:0 0 8px rgba(0,0,0,.9);animation:floatUp .92s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes floatUp{to{transform:translateY(-24px);opacity:0;}}

.chat-list{flex:1;min-height:0;overflow-y:auto;padding:10px 13px 12px;display:flex;flex-direction:column;gap:7px;scroll-behavior:smooth;}
.chat-msg{font-size:12.5px;line-height:1.55;animation:fadeIn .28s ease;display:flex;gap:8px;align-items:flex-start;}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
.chat-msg.sys{
  display:block;background:rgba(232,176,64,.1);border:1px solid rgba(232,176,64,.25);color:#e8b040;
  padding:5px 10px;border-radius:8px;font-size:11.5px;line-height:1.4;margin:2px 0;word-break:break-all;
}
.avatar{
  width:22px;height:22px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;
  font-size:10px;font-weight:800;color:#eef4f0;margin-top:1px;filter:saturate(.55) brightness(.92);
}
.msg-body{min-width:0;flex:1;}
.chat-msg .uname{color:#7d877f;font-size:11.5px;margin-right:5px;}
.chat-msg .utext{color:#c8d0ca;word-break:break-word;}
.chat-msg.self .uname{color:#8fb29c;}
.chat-msg.self .utext{color:#eef4f0;}

/* 表情面板：上面两个页签（图片表情 / 普通表情），下面一格内容。
   右侧聊天栏和全屏弹幕条共用这套 .ep-* 结构，只有外壳定位不同。 */
.emoji-panel{display:none;flex-direction:column;background:rgba(10,13,11,.6);flex:0 0 auto;}
.emoji-panel.open{display:flex;}
.ep-tabs{display:flex;gap:4px;padding:7px 8px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.ep-tab{
  flex:0 0 auto;background:none;border:none;border-bottom:2px solid transparent;
  color:#79857e;font-size:11.5px;font-family:inherit;letter-spacing:.02em;
  padding:4px 7px 6px;cursor:pointer;transition:color .16s,border-color .16s;
}
.ep-tab:hover{color:#c3cec7;}
.ep-tab.active{color:#e7efe9;border-bottom-color:rgba(232,176,64,.85);}
.ep-tab[hidden]{display:none;}
.ep-pane{padding:7px 8px 9px;max-height:134px;overflow-y:auto;}
.ep-pane[hidden]{display:none;}
.ep-pane[data-pane="txt"]{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;}
.ep-pane[data-pane="txt"][hidden]{display:none;}
.ep-pane[data-pane="img"]{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;}
.ep-pane[data-pane="img"][hidden]{display:none;}
.ep-pane button{background:none;border:none;font-size:17px;cursor:pointer;padding:3px 0;border-radius:7px;line-height:1.25;transition:background .14s,transform .14s;}
.ep-pane button:hover{background:rgba(255,255,255,.08);transform:scale(1.12);}
/* 图片格子：正方形缩略图，白底 + 3px 内边距，object-fit:contain 不裁不拉伸。
   以前是 object-fit:cover + 几乎透明的底 —— 深色线条的透明 PNG 压在深色面板上根本看不清。 */
.ep-pane .ep-sticker{padding:0;background:#fff;aspect-ratio:1/1;overflow:hidden;border-radius:9px;line-height:0;}
.ep-pane .ep-sticker:hover{background:#fff;transform:scale(1.05);}
.ep-sticker img{display:block;width:100%;height:100%;object-fit:contain;border-radius:9px;background:#fff;padding:3px;}
.ep-empty{grid-column:1/-1;padding:16px 4px;color:#6b756f;font-size:12px;text-align:center;}

.chat-input-row{display:flex;gap:7px;align-items:center;padding:10px;background:rgba(8,11,9,.55);flex:0 0 auto;}

/* 聊天里的预警图：最长边 100px，object-fit 保比例。
   这里千万别写死 width/height —— 表情包长宽比五花八门，写死就被压扁了。 */
/* 聊天栏里的图片表情：白底 + 一圈内边距。
   表情图多是透明 PNG 配深色线条，压在深色聊天底上几乎看不见，白底才看得清。
   播放器上飘的弹幕图不跟着改（见 .danmaku.dm-img），那边要透出画面。 */
.chat-sticker{
  display:block;max-width:100px;max-height:100px;width:auto;height:auto;
  margin-top:5px;border-radius:8px;background:#fff;padding:3px;
}
/* 从按钮里"弹"出来：--ox/--oy 由 JS 按按钮位置算，transform-origin 指过去，
   看起来就是从那个按钮长出来的，而不是凭空出现在列表里。 */
.chat-sticker.pop{
  transform-origin:var(--ox,50%) var(--oy,50%);
  animation:stickerPop .46s cubic-bezier(.2,.9,.26,1.18) both;
}
@keyframes stickerPop{
  0%{transform:scale(.06) rotate(-7deg);opacity:0;}
  62%{opacity:1;}
  100%{transform:scale(1) rotate(0deg);opacity:1;}
}
/* 弹幕里的图片表情：比聊天里稍小，飘过去不至于糊住画面，但 56px 在电脑上实在太小，放到 84 */
.danmaku.dm-img{padding:0;background:none;box-shadow:none;}
.danmaku.dm-img img{
  display:block;width:84px;height:84px;object-fit:contain;
  border-radius:6px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.75));
}
@media (max-width:600px){
  .danmaku.dm-img img{width:62px;height:62px;}
}
.emoji-toggle{
  width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:rgba(255,255,255,.05);
  border:none;color:#8e968f;display:grid;place-items:center;cursor:pointer;transition:.18s;
}
.emoji-toggle:hover{background:rgba(255,255,255,.10);color:#e0e6e2;}
.emoji-toggle.active{background:rgba(90,143,110,.18);color:#a6c9b4;}
.emoji-toggle svg{width:17px;height:17px;}
#chatInput{
  flex:1;min-width:0;background:rgba(255,255,255,.05);border:none;border-radius:11px;
  padding:9px 13px;color:var(--text);font-size:12.5px;font-family:inherit;outline:none;transition:.2s;
}
#chatInput::placeholder{color:#5d655f;}
#chatInput:focus{background:rgba(90,143,110,.10);box-shadow:0 0 0 2px rgba(90,143,110,.22);}
.send-btn{
  flex:0 0 auto;height:34px;padding:0 16px;border-radius:10px;border:none;
  background:linear-gradient(120deg,#4d7c60,#2f5540);color:#eef5f0;font-size:12.5px;font-weight:700;
  font-family:inherit;letter-spacing:.03em;cursor:pointer;transition:.18s;box-shadow:0 5px 14px -8px rgba(0,0,0,.9);
}
.send-btn:hover{filter:brightness(1.1);}
.send-btn:active{transform:scale(.95);}

/* ==================== 公告栏 ==================== */
.announce{
  flex:0 0 auto;border-radius:16px;overflow:hidden;position:relative;
  background:linear-gradient(122deg,rgba(90,143,110,.15),rgba(17,21,19,.94) 58%);
  box-shadow:0 0 0 1px rgba(90,143,110,.14) inset;
}
.announce[hidden]{display:none;}
.announce-head{
  display:flex;align-items:center;gap:7px;padding:11px 14px 5px;
  font-size:10.5px;font-weight:800;letter-spacing:.16em;color:#9fc0ac;
}
.announce-head .adot{
  width:6px;height:6px;border-radius:50%;background:#7db996;
  box-shadow:0 0 0 0 rgba(125,185,150,.5);animation:liveDot 2.6s ease-out infinite;
}
.announce-body{
  padding:0 14px 12px;font-size:12px;line-height:1.75;color:#c2cbc5;
  max-height:126px;overflow-y:auto;word-break:break-word;
}
.announce-body p{margin:0 0 6px;}
.announce-body p:last-child{margin:0;}
.announce-body b,.announce-body strong{color:#eef4f0;}
.announce-body a{color:#8fc4a4;text-decoration:underline;}
.announce-body img{max-width:100%;border-radius:8px;display:block;margin:4px 0;}
.announce-body hr{border:none;border-top:1px solid rgba(255,255,255,.08);margin:8px 0;}

/* ==================== 中场休息 · 老放映厅（恐怖，但让人松一口气） ====================
   设计：左边一张旧票根（暖纸 + 墨字倒计时），右边是下一场片名和一句台词；
   背景是一盏忽明忽暗的壁灯 + 底部暗红渗光 + 缓慢上浮的尘点 + 胶片齿孔与扫描线。
   主色偏暖，不刺眼；只在灯闪和安全出口的绿点上留一点不安。 */
.break-layer{
  position:absolute;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .55s ease,visibility .55s;
  background:#070505;overflow:hidden;
}
.break-layer.on{opacity:1;visibility:visible;}

/* 左上角那盏老壁灯：慢慢呼吸，偶尔闪一下 */
.break-layer::after{
  content:'';position:absolute;left:-16%;top:-44%;width:76%;height:124%;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 50% 50%,rgba(238,182,100,.16),rgba(238,182,100,.05) 44%,transparent 70%);
  animation:hbLamp 9.5s ease-in-out infinite;
}
@keyframes hbLamp{
  0%,100%{opacity:.72;}
  44%{opacity:.95;}
  49%{opacity:.5;}
  55%{opacity:1;}
}

/* 背景：暖光 + 底部暗红渗光 + 四角压黑 */
.break-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 56% 46% at 14% 6%,rgba(210,148,70,.17),transparent 62%),
    radial-gradient(ellipse 64% 52% at 90% 102%,rgba(126,20,15,.34),transparent 66%),
    radial-gradient(ellipse 120% 95% at 50% 50%,rgba(24,16,12,.32) 32%,rgba(6,5,4,.97) 84%),
    #070505;
}
.break-bg::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 48%,transparent 24%,rgba(0,0,0,.64) 74%,rgba(0,0,0,.94) 100%);
}
/* 胶片颗粒（SVG 噪声，纯 CSS 无需图片文件） */
.break-bg::before{
  content:'';position:absolute;inset:-25%;opacity:.26;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:hbGrain .9s steps(4) infinite;
}
@keyframes hbGrain{
  0%{transform:translate(0,0);}25%{transform:translate(-1.4%,1%);}
  50%{transform:translate(1%,-1.6%);}75%{transform:translate(1.6%,1.4%);}
}

/* 上下两条胶片齿孔，极慢地横移 */
.break-strips{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.7;}
.break-strips .strip{position:absolute;left:0;right:0;height:22px;background:rgba(226,206,172,.06);}
.break-strips .strip.top{top:0;}
.break-strips .strip.bot{bottom:0;transform:rotate(180deg);}
.break-strips .strip::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 10px 10px,rgba(5,4,4,.95) 4.1px,transparent 4.7px);
  background-size:20px 20px;
  animation:hbStripRun 70s linear infinite;
}
@keyframes hbStripRun{from{background-position:0 0;}to{background-position:200px 0;}}

/* 空气里的尘点：很慢地往上飘，制造「放映机还在转」的安静感 */
.break-dust{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
.break-dust span{
  position:absolute;bottom:-12px;border-radius:50%;opacity:var(--op,.28);
  background:#f4dfb4;box-shadow:0 0 6px rgba(244,223,180,.6);
  animation:dustUp var(--dur,20s) linear var(--delay,0s) infinite;
}
@keyframes dustUp{
  0%{transform:translate3d(0,0,0);opacity:0;}
  12%{opacity:var(--op,.28);}
  86%{opacity:var(--op,.28);}
  100%{transform:translate3d(var(--drift,0px),-78vh,0);opacity:0;}
}

.break-scan{
  position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.42;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.4) 0 1px,transparent 1px 3px);
  animation:hbScan 8.5s linear infinite;
  mix-blend-mode:multiply;
}
@keyframes hbScan{from{transform:translateY(0);}to{transform:translateY(12px);}}

.break-fit{
  position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  transform-origin:center center;transition:transform .25s ease;
}
.break-inner{
  position:relative;text-align:center;padding:14px 18px;max-width:min(980px,95%);
}
.break-layer.on .break-inner{animation:breakIn .7s cubic-bezier(.2,.8,.3,1) both;}
@keyframes breakIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

.break-custom{margin:0;font-size:13px;line-height:1.85;color:#c7b498;}
.break-custom h1,.break-custom h2,.break-custom h3{
  margin:0 0 9px;color:#f0e4cd;letter-spacing:.12em;font-size:21px;line-height:1.35;
  font-family:Georgia,"Songti SC","Times New Roman",serif;font-weight:700;
}
.break-custom p{margin:0 0 8px;}
.break-custom p:last-child{margin:0;}
.break-custom b,.break-custom strong{color:#f6ebd8;}
.break-custom a{color:#d9a184;text-decoration:underline;}
.break-custom img{max-width:100%;border-radius:2px;display:block;margin:10px auto;filter:sepia(.25) contrast(1.06);}
.break-custom .cd-inline{
  font-family:"Courier New",Consolas,monospace;color:#f2e5cd;font-weight:800;
  font-size:1.7em;letter-spacing:.06em;text-shadow:0 0 18px rgba(178,28,22,.45);
}

/* ——— 票根 ——— */
.hb-stage{
  --hb-ticket-w:clamp(216px,32vw,378px);
  display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,3.2vw,46px);text-align:left;
}
.hb-ticket{
  position:relative;flex:0 0 auto;width:var(--hb-ticket-w);
  padding:clamp(11px,1.7vh,19px) clamp(14px,1.9vw,24px) clamp(9px,1.3vh,15px);
  border-radius:3px;text-align:center;color:#241813;transform:rotate(-1.2deg);
  background:
    radial-gradient(circle at 22% 16%,rgba(255,255,255,.55),transparent 44%),
    linear-gradient(158deg,#f3e9d5 0%,#e7d7b8 48%,#d2be9a 100%);
  box-shadow:
    0 26px 62px -30px rgba(0,0,0,.98),
    0 0 0 1px rgba(60,36,24,.32),
    0 0 74px 6px rgba(150,32,22,.16),
    inset 0 1px 0 rgba(255,255,255,.62);
}
.hb-ticket::before{
  content:'';position:absolute;inset:0;border-radius:3px;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(93deg,rgba(120,86,52,.05) 0 1px,transparent 1px 5px);
  mix-blend-mode:multiply;
}
.hb-ticket-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.hb-kicker{
  display:inline-block;padding:2px 8px;border-radius:2px;border:1px solid rgba(168,52,43,.55);
  color:#a8342b;font-size:10px;font-weight:800;letter-spacing:.16em;transform:rotate(-2.2deg);
  white-space:nowrap;
}
.hb-serial{
  font-family:"SF Mono",Menlo,Consolas,monospace;font-size:7.5px;letter-spacing:.12em;
  color:rgba(36,24,19,.45);white-space:nowrap;
}
.hb-cd{
  display:block;margin:clamp(6px,1.3vh,13px) 0 0;
  font-family:"Courier New",Consolas,"SF Mono",monospace;
  font-size:clamp(38px,6vw,72px);font-weight:800;line-height:1;letter-spacing:.02em;
  color:#ece2d1;font-variant-numeric:tabular-nums;
  text-shadow:0 0 30px rgba(184,32,24,.55),0 0 4px rgba(255,226,203,.45),0 3px 0 rgba(0,0,0,.55);
  animation:hbCdFlick 8s steps(1) infinite;
}
.hb-ticket .hb-cd{
  /* 字号跟着票根宽度算：5 个字符 × 约 1.12em，任何字体下都不会顶出票根 */
  font-size:calc((var(--hb-ticket-w) - 50px) / 5.9);
  color:#241410;letter-spacing:.01em;white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.6),0 2px 6px rgba(80,44,24,.18);
}
@keyframes hbCdFlick{
  0%,17%,19%,54%,56.4%,100%{opacity:1;}
  18%,55%,56%,57%{opacity:.82;}
  18.5%{transform:translateX(-1px);}
  55.5%{transform:translateX(1.5px);}
}
/* 模板里的 {{countdown}} 会被包成 .cd-inline，必须让它继承外层字号与颜色 */
.hb-cd .cd-inline{
  font-size:1em !important;color:inherit !important;font-family:inherit !important;
  font-weight:inherit !important;letter-spacing:inherit !important;text-shadow:inherit !important;
}
.hb-cd-label{
  margin-top:6px;font-size:8.5px;letter-spacing:.3em;color:rgba(36,24,19,.5);
  text-transform:uppercase;
}
.hb-perf{
  height:0;margin:clamp(8px,1.3vh,13px) calc(-1 * clamp(14px,1.9vw,24px));
  border-top:1px dashed rgba(60,36,24,.34);
}
.hb-ticket-bot{
  display:flex;align-items:center;gap:8px;
  font-size:8px;letter-spacing:.16em;color:rgba(36,24,19,.5);text-transform:uppercase;
  white-space:nowrap;
}
.hb-ticket-bot i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(36,24,19,.28),transparent);}

/* ——— 右边：下一场 ——— */
.hb-side{flex:0 1 auto;min-width:0;max-width:clamp(190px,32vw,380px);text-align:left;}
.hb-exit{
  display:inline-flex;align-items:center;gap:7px;
  font-family:"SF Mono",Menlo,Consolas,monospace;font-size:9px;letter-spacing:.32em;color:#79d39b;
}
.hb-exit i{
  width:5px;height:5px;border-radius:50%;background:#4fd07f;
  box-shadow:0 0 10px rgba(79,208,127,.9);animation:hbExit 2.8s ease-in-out infinite;
}
@keyframes hbExit{0%,100%{opacity:1;}50%{opacity:.35;}}
.hb-next-label{
  margin-top:clamp(10px,1.6vh,18px);font-size:9px;letter-spacing:.32em;color:#9a7c58;
  text-transform:uppercase;
}
.hb-next-title{
  margin-top:6px;font-family:Georgia,"Songti SC","Times New Roman",serif;
  font-size:clamp(19px,2.5vw,33px);font-weight:700;color:#f6ead1;line-height:1.32;letter-spacing:.02em;
  text-shadow:0 2px 18px rgba(0,0,0,.9);
}
.hb-quote{
  font-family:Georgia,"Songti SC","Times New Roman",serif;font-style:italic;
  font-size:clamp(12px,1.2vw,14.5px);color:#b79b78;letter-spacing:.06em;
  margin:clamp(8px,1.4vh,14px) 0 0 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
}
.hb-tip{
  font-size:10.5px;color:#8d7357;letter-spacing:.14em;
  margin:6px 0 0 !important;
}
.hb-bar{
  height:3px;margin-top:clamp(10px,1.6vh,18px);border-radius:99px;overflow:hidden;
  background:rgba(226,190,130,.18);box-shadow:0 0 0 1px rgba(226,190,130,.06);
}
.hb-bar i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#9c2b22,#e3bd7f);
  transition:width .6s linear;
}

/* ——— 老模板兼容：hb-rest / hb-line ——— */
.hb-rest{display:flex;flex-direction:column;align-items:center;gap:4px;}
.hb-line{display:flex;align-items:center;gap:16px;width:100%;margin:2px 0;color:#8a7466;}
.hb-line::before,.hb-line::after{
  content:'';height:1px;flex:1;
  background:linear-gradient(90deg,transparent,rgba(158,52,40,.62),transparent);
}
.hb-line > span{
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;color:#9c8578;
}

/* ——— 内置倒计时圆盘 / 下一部（模板没写占位符时才出现） ——— */
.break-mid{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:16px;flex-wrap:wrap;}
.break-layer.custom-clock .break-ring-wrap{display:none;}
.break-layer.custom-next .break-next{display:none;}
.break-layer.no-mid .break-mid{display:none;}
.break-layer.custom-clock .break-mid{margin-top:14px;}
.break-ring-wrap{position:relative;width:106px;height:106px;flex:0 0 auto;}
.break-ring{width:106px;height:106px;transform:rotate(-90deg);display:block;}
.break-ring circle{fill:none;stroke-width:3;}
.ring-bg{stroke:rgba(226,206,172,.16);stroke-dasharray:2 6;}
.ring-fg{
  stroke:#b8332a;stroke-linecap:butt;stroke-dasharray:326.73;stroke-dashoffset:0;
  transition:stroke-dashoffset .4s linear;
  filter:drop-shadow(0 0 6px rgba(184,51,42,.6));
}
.break-num{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:"Courier New",Consolas,monospace;font-size:20px;font-weight:700;
  color:#eddfc6;font-variant-numeric:tabular-nums;letter-spacing:.02em;
  text-shadow:0 0 14px rgba(180,40,30,.5);
}
.break-next{text-align:left;max-width:250px;}
.break-layer.custom-clock .break-next{text-align:center;max-width:100%;}
.bn-label{
  display:block;font-size:9px;letter-spacing:.32em;color:#8a7365;margin-bottom:7px;text-transform:uppercase;
}
.bn-title{
  font-size:17px;font-weight:700;color:#f0e4cd;line-height:1.4;display:block;
  font-family:Georgia,"Songti SC",serif;letter-spacing:.03em;
}
.bn-sub{display:block;font-size:11px;color:#7a695e;margin-top:6px;letter-spacing:.06em;}
.break-foot{
  margin-top:clamp(10px,1.6vh,18px);font-size:10px;color:#6a5a51;letter-spacing:.26em;
  animation:hbFoot 9s steps(1) infinite;
}
@keyframes hbFoot{0%,46%,100%{opacity:.85;}47%,49%{opacity:.35;}48%{opacity:.7;}}

/* 中场休息时播放器里的零碎状态 */
.player.on-break .stage-tag{opacity:.25;}
.player.on-break .squint{opacity:0 !important;}
.player.on-break .scared-badge{opacity:0 !important;}

/* 屏幕不高时少显示几行，免得把聊天区挤没了 */
@media (max-height:780px) and (min-width:961px){
  .film-list{max-height:calc(var(--film-row) * 4 + 9px + 7px);}
}
@media (max-height:660px) and (min-width:961px){
  .film-list{max-height:calc(var(--film-row) * 3 + 6px + 7px);}
}

/* ==================== 响应式 ==================== */
@media (max-width:960px){
  body{overflow:auto;}
  /* 必须是 minmax(0,1fr)：写 1fr 时最小值是 min-content，会被长片名把整页撑到 767px */
  main{grid-template-columns:minmax(0,1fr);height:auto;padding:10px;gap:10px;}
  main > *{min-width:0;}
  .player{flex:none;aspect-ratio:16/9;min-height:200px;}
  .sidebar{height:auto;min-height:0;}
  .film-list{max-height:calc(var(--film-row) * 3 + 6px + 7px);}
  .brand-sub,.pill.clock,.pill.sync{display:none;}
  .now-badge,.r-btn span{display:none;}
  .scared-btn span{display:none;}
  .scared-btn{padding:0 9px;}
  .break-mid{gap:16px;}
  .break-custom h1,.break-custom h2,.break-custom h3{font-size:18px;}
  .hb-stage{gap:16px;}
}
@media (max-width:520px){
  .topbar{padding:0 12px;}
  .pill:not(.live){display:none;}
  .now{display:none;}
  /* 播放器高度只有 16:9，警告层和休息界面都要压紧，否则按钮会被底栏挤出可视区。
     注意：文案一个字都不能少（之前用 line-clamp 裁掉了，等于把提示删了），
     只能靠缩小图标和字号腾地方。 */
  .warning-icon{font-size:26px;margin-bottom:3px;}
  .warning-title{font-size:16px;margin-bottom:4px;letter-spacing:.06em;}
  .warning-desc{font-size:10.5px;line-height:1.5;margin-bottom:8px;}
  .warning-btn{padding:7px 22px;font-size:12.5px;}
  /* 控制栏浮在播放器底部、层级高于遮罩，会把「继续观看」按钮盖掉一截：
     遮罩底部留出底栏高度（含 iPhone 安全区），内容整体在剩余空间里居中。
     千万不要再加 max-height / overflow:hidden —— 那会把文案和按钮裁掉。 */
  .warning-overlay{
    align-items:center;
    padding:4px 12px calc(54px + env(safe-area-inset-bottom,0px));
  }
  .warning-content{padding:0;max-height:none;overflow:visible;}
  /* 只留票根 + 下一部，其余装饰收起来，免得在小屏上缩成一团 */
  .break-foot,.hb-quote,.hb-exit,.hb-serial,.hb-tip{display:none;}
  .break-inner{padding:8px 10px;max-width:98%;}
  .hb-stage{--hb-ticket-w:126px;gap:10px;}
  .hb-ticket{width:var(--hb-ticket-w);min-width:0;padding:6px 9px 5px;transform:rotate(-1deg);}
  .hb-kicker{font-size:8px;letter-spacing:.12em;padding:1px 5px;}
  .hb-ticket .hb-cd{font-size:calc((var(--hb-ticket-w) - 22px) / 5.6);margin:3px 0 0;}
  .hb-cd-label{font-size:7px;letter-spacing:.12em;margin-top:2px;}
  .hb-perf{margin:4px -9px;}
  .hb-ticket-bot{font-size:6.5px;letter-spacing:.08em;}
  .hb-side{max-width:52vw;}
  .hb-next-label{font-size:7.5px;letter-spacing:.16em;margin-top:0;}
  .hb-next-title{font-size:13px;margin-top:2px;}
  .hb-bar{margin-top:6px;}
  .break-mid{margin-top:7px;gap:10px;}
  .bn-label{font-size:8.5px;letter-spacing:.2em;margin-bottom:3px;}
  .bn-title{font-size:14px;}
  .bn-sub{font-size:9.5px;margin-top:2px;}
}
/* 播放器高度很矮（小窗 / 手机横屏）时的紧凑版 */
@media (max-height:400px){
  .hb-stage{--hb-ticket-w:140px;}
  .hb-ticket{padding:8px 12px 7px;transform:none;}
  .hb-ticket .hb-cd{margin:2px 0 0;}
  .hb-quote,.hb-tip,.break-foot{display:none;}
  .hb-next-label{margin-top:6px;}
  .hb-next-title{font-size:15px;}
  .break-strips{opacity:.3;}
}

/* ==================== 右键菜单 / 播放信息 ==================== */
.ctx-menu,.ctx-sub{
  position:absolute;z-index:96;min-width:164px;padding:6px;border-radius:13px;
  background:rgba(18,23,20,.985);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 26px 60px -20px rgba(0,0,0,.98);
  opacity:0;visibility:hidden;transform:scale(.97) translateY(-3px);transform-origin:top left;
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.ctx-menu.open,.ctx-sub.open{opacity:1;visibility:visible;transform:none;}
.ctx-menu button,.ctx-sub button{
  display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border-radius:9px;
  background:none;border:none;color:#c6cfc9;font-size:12.5px;font-weight:500;font-family:inherit;
  cursor:pointer;text-align:left;white-space:nowrap;transition:background .14s,color .14s;
}
.ctx-menu button:hover,.ctx-sub button:hover{background:rgba(90,143,110,.18);color:#fff;}
.ctx-menu button svg{width:15px;height:15px;opacity:.72;flex:0 0 auto;}
.ctx-menu button:hover svg{opacity:1;}
.ctx-menu button .more{margin-left:auto;font-style:normal;color:#5d655f;font-size:15px;line-height:1;}
.ctx-sub button.on{color:#a6c9b4;font-weight:700;background:rgba(90,143,110,.14);}
.ctx-sub button.on::after{content:'✓';margin-left:auto;font-size:11px;color:#6fa586;}
.ctx-sub .empty{padding:9px 11px;font-size:12px;color:#6d7670;}

.info-panel{
  position:absolute;right:14px;top:14px;z-index:97;width:252px;padding:12px 13px 9px;border-radius:14px;
  background:rgba(16,21,18,.975);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 26px 60px -22px rgba(0,0,0,.98);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.info-panel.hidden{opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;}
.ip-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.ip-head b{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:#9fb3a6;}
.ip-head button{
  background:none;border:none;color:#6d7670;font-size:16px;line-height:1;cursor:pointer;
  padding:2px 5px;border-radius:6px;transition:.15s;
}
.ip-head button:hover{color:#fff;background:rgba(255,255,255,.08);}
.ip-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:4.5px 0;font-size:11.5px;border-bottom:1px dashed rgba(255,255,255,.055);
}
.ip-row:last-child{border-bottom:none;}
.ip-row span{color:#78827c;flex:0 0 auto;}
.ip-row b{color:#dfe6e1;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;word-break:break-all;}
.ip-row b.warn{color:#e0a860;}
.ip-row b.bad{color:#e06c60;}
@media (max-width:760px){
  .info-panel{right:8px;top:8px;width:min(252px,calc(100% - 16px));}
}

/* 系统提示：进场提示 / 认怂提示都用默认琥珀色（黄色）；进场提示几秒后自己淡出 */
.chat-msg.sys{
  animation:fadeIn .28s ease;
}
.chat-msg.sys.out{
  opacity:0;transform:translateY(-6px);
  transition:opacity .5s ease,transform .5s ease;
}

/* ==================== 头像 / 我的临时信息 ==================== */
.usermenu{position:relative;flex:0 0 auto;}
.avatar-btn{
  position:relative;width:34px;height:34px;padding:0;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
  cursor:pointer;transition:.18s;display:block;overflow:visible;
}
.avatar-btn img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  filter:saturate(.82) contrast(1.05);
}
.avatar-btn:hover{border-color:rgba(140,190,160,.55);box-shadow:0 0 0 3px rgba(90,143,110,.14);}
.avatar-btn.on{border-color:rgba(140,190,160,.72);box-shadow:0 0 0 3px rgba(90,143,110,.2);}
.card-badge{
  position:absolute;right:-3px;bottom:-3px;min-width:15px;height:15px;padding:0 4px;
  border-radius:99px;background:linear-gradient(135deg,#c8912f,#8a5f18);color:#fff8e8;
  font-size:9.5px;font-weight:800;line-height:15px;text-align:center;
  border:1.5px solid rgba(14,18,16,.95);font-variant-numeric:tabular-nums;
  box-sizing:content-box;
}
.card-badge.empty{background:linear-gradient(135deg,#4a4f4b,#2c302d);color:#98a09a;}

.user-pop{
  position:absolute;right:0;top:calc(100% + 10px);width:262px;z-index:95;
  padding:13px;border-radius:15px;
  background:rgba(16,21,18,.985);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 28px 64px -22px rgba(0,0,0,.98);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.user-pop.hidden{opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);pointer-events:none;}
.up-head{display:flex;align-items:center;gap:10px;padding-bottom:11px;border-bottom:1px dashed rgba(255,255,255,.07);}
.up-av{
  width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.12);filter:saturate(.85);
}
.up-id{display:flex;flex-direction:column;gap:2px;min-width:0;}
.up-id b{font-size:13.5px;color:#eef4f0;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.up-id span{font-size:10.5px;color:#6f7873;letter-spacing:.04em;}
.up-field{padding:11px 0 3px;}
.up-field label{display:block;font-size:11px;color:#7d877f;margin-bottom:6px;}
.up-edit{display:flex;gap:6px;}
.up-edit input{
  flex:1;min-width:0;height:30px;padding:0 9px;border-radius:8px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  color:#e6ede8;font-size:12.5px;font-family:inherit;outline:none;transition:.16s;
}
.up-edit input:focus{border-color:rgba(140,190,160,.55);background:rgba(255,255,255,.08);}
.up-edit button{
  height:30px;padding:0 12px;border-radius:8px;border:none;cursor:pointer;
  background:linear-gradient(120deg,#4d7c60,#2f5540);color:#eef5f0;
  font-size:12px;font-weight:700;font-family:inherit;transition:.16s;flex:0 0 auto;
}
.up-edit button:hover{filter:brightness(1.12);}
.up-edit button:disabled{opacity:.45;cursor:default;filter:none;}
.up-tip{font-size:10.5px;color:#5f6862;line-height:1.5;margin-top:6px;}
.up-stat{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:10px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.07);
  font-size:11.5px;color:#8b948e;
}
.up-stat b{color:#e8b040;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;}
.up-stat b.empty{color:#6b736d;}
@media (max-width:760px){
  .avatar-btn{width:30px;height:30px;}
  .user-pop{width:min(262px,calc(100vw - 24px));right:-4px;}
}

/* ==================== 聊天历史分隔 ==================== */
.chat-divider{
  display:flex;align-items:center;gap:8px;margin:4px 0 2px;
  font-size:10.5px;color:#68716b;letter-spacing:.04em;flex:0 0 auto;
}
.chat-divider::before,.chat-divider::after{content:'';height:1px;flex:1;background:rgba(255,255,255,.07);}
.chat-divider span{white-space:nowrap;color:#7b847e;}
.chat-divider em{font-style:normal;color:#5c6560;}

/* ==================== 伪全屏（iOS 横屏全屏） ====================
   关键点：**只旋转画面层，控制栏不旋转**。
   整个播放器一起转的话，控制栏会转到屏幕边缘，iOS Safari 的地址栏/工具栏
   正好压在上面 → 暂停、退出全屏这些按钮点不到。
   所以这里让 .player 严格等于「可视区域」（尺寸由 JS 用 visualViewport 写进
   --fs-w / --fs-h，避免 100vh 把地址栏高度也算进去），控制栏钉在真实底部。 */
html.fs-lock,body.fs-lock{overflow:hidden!important;height:100%;}

.player.fake-fs{
  position:fixed!important;
  top:0;left:0;right:auto;bottom:auto;
  width:var(--fs-w,100vw);
  height:var(--fs-h,100dvh);
  margin:0!important;border-radius:0!important;
  display:block!important;
  z-index:99999;background:#000;overflow:hidden;
}
.player.fake-fs video{border-radius:0!important;}

/* 画面层铺满；竖屏时再整体旋转 90°（宽高互换，视觉上正好占满） */
.player.fake-fs .video-stage{
  position:absolute!important;inset:0;width:100%;height:100%;
}
.player.fake-fs.fake-fs-rot .video-stage{
  inset:auto;
  top:50%;left:50%;
  width:var(--fs-h,100dvh);
  height:var(--fs-w,100vw);
  transform:translate(-50%,-50%) rotate(90deg);
  transform-origin:center center;
}

/* 控制栏留在真实底部，并避开 iPhone 底部的小横条 */
.player.fake-fs .controls{
  position:absolute;left:0;right:0;bottom:0;
  height:auto;min-height:52px;
  padding-bottom:calc(4px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(22,28,24,.86),rgba(9,12,10,.97));
}

/* 全屏也要能发弹幕：伪全屏以前只放了按钮，弹幕栏被 display:none 一起藏了 */
.player.fake-fs .inline-dm{display:flex;flex:1 1 auto;min-width:0;max-width:none;margin:0 6px;}
.player.fake-fs .now{display:none;}

/* 手机全屏（原生全屏和伪全屏都算）：控制栏分两行 —— 按钮一行、表情+输入框一行。
   以前只在 ≤600px 才换行，横屏时（844px）输入框被挤到右边一条缝，看着像「跑到右边去了」。 */
@media (max-width:900px){
  .player.is-fs .controls,
  .player.fake-fs .controls{flex-wrap:wrap;row-gap:6px;padding-top:6px;}
  .player.is-fs .inline-dm,
  .player.fake-fs .inline-dm{order:9;flex:1 0 100%;margin:0;}
  .player.is-fs .cright,
  .player.fake-fs .cright{margin-left:auto;}
}
.player.fake-fs .fs-emoji-pop{width:min(300px,calc(100vw - 20px));}

/* 手机上没有侧栏可隐藏，剧场模式没意义，按钮直接收掉（.theater 逻辑留着，窄屏点了也不出来） */
@media (max-width:900px){
  #btnTheater{display:none;}
}

/* ==================== 头像面板底部入口 ==================== */
.up-links{
  display:flex;align-items:center;gap:8px;
  margin-top:11px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.07);
}
.up-links a,.up-links button{
  flex:1;height:29px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.04);color:#c3ccc6;
  font-size:11.5px;font-family:inherit;text-decoration:none;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s;
}
.up-links a:hover,.up-links button:hover{
  background:rgba(90,143,110,.18);border-color:rgba(140,190,160,.45);color:#e8f0ea;
}

/* ---------------- 顶栏「今日热度」（分享左边那个胶囊） ----------------
   数字是 visitsShow（真实访客 + 后台活跃度加成），每 2 秒随 state 更新。
   **只有火苗图标 + 数字**，不写任何文字标签（站长明确口径：这不是人气/在线人数）。
   配色走暖橘，跟分享/大厅那两个中性灰按钮区分开，一眼能看到。 */
.hot-chip{
  display:flex;align-items:center;gap:5px;height:30px;padding:0 10px 0 8px;border-radius:99px;
  border:1px solid rgba(224,150,96,.24);
  background:linear-gradient(180deg,rgba(224,150,96,.16),rgba(224,150,96,.06));
  color:#e9b489;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;
  cursor:default;user-select:none;
}
.hot-chip svg{width:14px;height:14px;color:#f08a4b;opacity:.95;flex:0 0 auto}
.hot-chip b{font-size:13px;font-weight:700;letter-spacing:.02em;color:#f4cba2;line-height:1}
.hot-chip.bump b{animation:hotBump .55s cubic-bezier(.2,.9,.3,1)}
@keyframes hotBump{
  0%{transform:scale(1)}
  38%{transform:scale(1.18);color:#ffe0bf}
  100%{transform:scale(1)}
}
@media (max-width:640px){
  .hot-chip{padding:0 8px}
}
@media (max-width:400px){
  .hot-chip{padding:0 7px;gap:4px}
  .hot-chip b{font-size:12px}
}

/* 顶栏左上：返回大厅 / 分享（从头像菜单里挪出来的，放在头像左侧） */
.top-act{
  display:flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:99px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);
  color:#b9c3bd;font-size:12px;font-family:inherit;cursor:pointer;
  text-decoration:none;white-space:nowrap;transition:background .16s,color .16s,border-color .16s;
}
.top-act svg{width:13px;height:13px;opacity:.65}
.top-act:hover{background:rgba(255,255,255,.08);color:#e3eae5;border-color:rgba(255,255,255,.14)}
.top-act:active{transform:scale(.97)}
.top-act.on{background:rgba(90,143,110,.18);border-color:rgba(140,190,160,.45);color:#e8f0ea}   /* 分享卡片开着时按钮亮起 */
@media (max-width:640px){
  .top-act{padding:0 8px}
  .top-act span{display:none}      /* 手机上只留图标，别把顶栏挤爆 */
}

/* ---------------- 分享弹窗（点顶栏「分享」弹出） ---------------- */
.share-wrap{position:relative;flex:0 0 auto;}
/* 钉在按钮左下角：right:0 让卡片右边缘跟按钮右边缘齐平，整块往左展开。
   max-width 兜住窄屏（320px 也不会顶出屏幕）。 */
.share-pop{
  position:absolute;right:0;top:calc(100% + 10px);width:288px;max-width:calc(100vw - 22px);
  padding:26px 20px 11px;border-radius:20px;text-align:center;z-index:99;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,#16161b 0%,#101014 100%);
  box-shadow:0 34px 74px -20px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.05);
  transform-origin:top right;
  transition:opacity .2s ease,transform .26s cubic-bezier(.22,1,.36,1),visibility .2s;
}
.share-pop.hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px) scale(.96);}
/* 内容错峰升起，跟参考稿一个节奏 */
.share-pop:not(.hidden) .sp-title{animation:shareRise .5s cubic-bezier(.22,1,.36,1) .04s backwards;}
.share-pop:not(.hidden) .sp-lede{animation:shareRise .5s cubic-bezier(.22,1,.36,1) .1s backwards;}
.share-pop:not(.hidden) .sp-primary{animation:shareRise .5s cubic-bezier(.22,1,.36,1) .16s backwards;}
.share-pop:not(.hidden) .sp-ghost{animation:shareRise .5s cubic-bezier(.22,1,.36,1) .21s backwards;}
@keyframes shareRise{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}

.share-pop .sp-close{
  position:absolute;top:10px;right:10px;width:26px;height:26px;display:grid;place-items:center;
  border:1px solid transparent;border-radius:50%;background:transparent;
  color:#5c5c66;font-size:11px;line-height:1;font-family:inherit;cursor:pointer;
  transition:.26s cubic-bezier(.22,1,.36,1);
}
.share-pop .sp-close:hover{color:#f2f2f5;border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.04);}

.share-pop .sp-title{
  margin:0 0 12px;
  font-family:"Songti SC","STSong","Source Han Serif SC","Noto Serif SC",Georgia,serif;
  font-size:22px;font-weight:600;line-height:1.42;letter-spacing:.01em;color:#fafafb;
}
.share-pop .sp-lede{margin:0 0 18px;font-size:12.5px;line-height:1.95;color:#9c9ca6;}
.share-pop .sp-lede em{font-style:normal;color:#e8b4bc;}   /* 玫瑰色点一句，跟参考稿一致 */

.share-pop .sp-primary{
  display:block;width:100%;padding:11px;border:0;border-radius:11px;
  background:linear-gradient(135deg,#f7eff1,#e3ccd2);color:#171219;
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.04em;cursor:pointer;
  transition:.28s cubic-bezier(.22,1,.36,1);
  box-shadow:0 12px 26px -13px rgba(232,180,188,.6);
}
.share-pop .sp-primary:hover{transform:translateY(-1px);box-shadow:0 16px 32px -13px rgba(232,180,188,.7);}
.share-pop .sp-primary:active{transform:translateY(0) scale(.995);}
.share-pop .sp-primary.done{background:linear-gradient(135deg,#e8f1ea,#cfe1d6);color:#15211a;box-shadow:none;}

.share-pop .sp-ghost{
  display:block;width:100%;margin-top:2px;padding:9px;border:0;background:none;
  color:#5c5c66;font-family:inherit;font-size:11.5px;letter-spacing:.04em;cursor:pointer;
  transition:.26s cubic-bezier(.22,1,.36,1);
}
.share-pop .sp-ghost:hover{color:#9c9ca6;}

@media (max-width:640px){
  .share-pop{width:270px;padding:24px 18px 9px;border-radius:18px;}
  .share-pop .sp-title{font-size:20px;margin-bottom:10px;}
  .share-pop .sp-lede{font-size:12px;margin-bottom:15px;}
  .share-pop .sp-primary{font-size:12.5px;padding:10px;}
}

/* 数据还没到时角标是空的：别显示一个空圆点（会先闪一下假数字 3） */
.card-badge:empty{display:none}

/* ---------------- 头像设置（头像弹层里） ---------------- */
.up-av-btn{
  position:relative;width:44px;height:44px;border-radius:50%;padding:0;border:none;
  background:transparent;cursor:pointer;flex:0 0 auto;overflow:hidden;
}
.up-av-btn .up-av{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block}
.up-av-btn .up-av-edit{
  position:absolute;inset:auto 0 0 0;height:15px;line-height:15px;text-align:center;
  font-size:9.5px;font-weight:700;color:#e8f0ea;background:rgba(0,0,0,.55);
  opacity:0;transition:opacity .18s;
}
.up-av-btn:hover .up-av-edit{opacity:1}
@media (hover:none){ .up-av-btn .up-av-edit{opacity:1} }   /* 手机没有 hover，常显 */
/* 点头像后闪一下下方预设头像区，告诉人"就是在这儿换"（不再弹文件选择器） */
.up-field.flash{border-radius:10px;animation:upFlash .9s ease;}
@keyframes upFlash{
  0%,52%{background:rgba(140,190,160,.15);box-shadow:inset 0 0 0 1px rgba(140,190,160,.32);}
  100%{background:transparent;box-shadow:inset 0 0 0 1px rgba(140,190,160,0);}
}

.av-grid{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.av-grid button{
  width:34px;height:34px;border-radius:50%;padding:0;border:2px solid transparent;
  cursor:pointer;overflow:hidden;background:rgba(255,255,255,.06);transition:transform .12s,border-color .12s;
}
.av-grid button svg{width:100%;height:100%;display:block}
.av-grid button:hover{transform:scale(1.08)}
.av-grid button.on{border-color:#6fa586;box-shadow:0 0 0 2px rgba(111,165,134,.22)}
.av-actions{display:flex;gap:7px}
.av-btn{
  flex:1;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);color:#c2cbc5;font-size:11.5px;font-family:inherit;cursor:pointer;
  transition:background .16s,color .16s;
}
.av-btn:hover{background:rgba(255,255,255,.1);color:#e8f0ea}

/* 聊天头像是图片时铺满圆角方块 */
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
/* 预设头像是 emoji，字号小一点才装得下 */
.avatar.av-preset{font-size:12px;filter:saturate(.8) brightness(1.02);}

/* ==================================================================
   iOS Safari：输入框字号小于 16px 时，一聚焦就自动放大整页
   （页面被强制 zoom，失去原来的滚动位置，得双指缩回去才恢复）。
   这是 WebKit 的既定行为，唯一可靠的办法是让输入框的 computed
   font-size 不低于 16px。
   触发方式用 html.is-ios（JS 检测后注入，见 room.js 顶部），
   不用 @supports 单打——那玩意儿在部分 iOS 版本上判断不准。
   视觉上用负字距 + 收紧行高，把 16px 拉回接近原来的观感。
   ================================================================== */
html.is-ios #chatInput,
html.is-ios #fsDmInput,
html.is-ios .film-search,
html.is-ios .up-edit input,
html.is-ios textarea,
html.is-ios select{
  font-size:16px !important;
  letter-spacing:-0.01em;
}
/* 16px 之后原来的高度装不下，纵向补一点，别把字裁掉 */
html.is-ios #chatInput{padding:7px 13px;line-height:1.25}
html.is-ios #fsDmInput{height:34px}
html.is-ios .film-search{height:26px}
html.is-ios .up-edit input{height:32px}