/* ============================================================
   danmaku.css — v2 三拍结算舞台 + 弹幕层
   #act-zone:结算时从下方升起的舞台(平时收起)
   Act1 模块产出流 / Act2 弹幕定格展台(热评截图:好评绿/差评红,爆款金/炎上红)
   Act3 乘区结算 + 营收行(#cs-rev 40px 金,乘区≥3 变金)
   ============================================================ */

/* ---------- 舞台:从下方升起 ---------- */
#act-zone{
  position:absolute;inset:0;z-index:20;
  display:flex;flex-direction:column;
  border:1px solid rgba(240,201,106,.5);border-radius:16px;
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(240,201,106,.07), transparent 60%),
    linear-gradient(165deg,rgba(16,23,38,.97),rgba(8,12,20,.98));
  box-shadow:inset 0 0 60px rgba(0,0,0,.5),0 0 40px rgba(0,0,0,.5);
  overflow:hidden;
}
#act-zone.active{animation:act-rise .45s cubic-bezier(.2,.9,.3,1.05)}
@keyframes act-rise{
  from{opacity:0;transform:translateY(36px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* 全局加速键(C5):结算舞台左上常驻 ⏩ */
#btn-skip-act{
  position:absolute;top:10px;left:10px;z-index:30;
  width:42px;height:42px;border-radius:10px;
  font-size:19px;line-height:1;
  color:var(--gold);
  border:1px solid rgba(240,201,106,.55);
  background:rgba(10,16,27,.85);
  transition:transform .15s ease,box-shadow .15s ease;
}
#btn-skip-act:hover{
  transform:scale(1.1);
  box-shadow:0 0 14px rgba(240,201,106,.4);
}

/* 三幕分栏 */
#act-zone .act{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  padding:14px 18px 12px 66px;   /* 左侧留出 ⏩ */
  overflow:hidden;
}
#act-zone .act + .act{border-top:1px dashed rgba(38,50,74,.7)}
.act-title{
  flex:none;
  font-size:12px;letter-spacing:.4em;
  color:var(--gold);
  opacity:.85;
  margin-bottom:6px;
}

/* ============================================================
   Act1 模块产出流
   ============================================================ */
#act1-flow{
  flex:1;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;gap:2px;
  justify-content:flex-start;
}
.a1-row{
  display:flex;align-items:baseline;gap:10px;
  font-size:13px;line-height:1.6;
  animation:a1-in .3s ease-out;
}
@keyframes a1-in{
  from{opacity:0;transform:translateX(-12px)}
  to{opacity:1;transform:translateX(0)}
}
.a1-name{flex:none;max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.a1-tag{font-size:11px;color:var(--dim);letter-spacing:.05em}
.a1-v{
  margin-left:auto;
  font-family:var(--mono),monospace;font-variant-numeric:tabular-nums;
  font-size:17px;font-weight:700;color:var(--green);
}
.a1-row.new .a1-v{color:var(--gold);text-shadow:0 0 10px rgba(240,201,106,.45)}
.a1-row.new .a1-tag{color:var(--gold)}
.a1-row.reno .a1-v{color:var(--blue)}
.a1-row.others{opacity:.7}
.a1-row.deep .a1-tag{color:var(--green)}
.act-total{
  flex:none;margin-top:8px;padding-top:8px;
  border-top:1px solid rgba(240,201,106,.3);
  font-size:15px;color:var(--text);
  font-family:var(--mono),monospace;
}
.act-total b{color:var(--green);font-size:19px}
.act-total b.dau{color:var(--text)}

/* ============================================================
   Act2 弹幕层(定格展台 · 评论区截图,SPEC §5.6 M1)
   飞入 ≤0.4s × 乱序 delay(≤1350ms)→ 定格 3.5s → 5200ms 揭晓
   ============================================================ */
#act2{
  position:relative;
}
#act2-layer{
  position:absolute;inset:0;
  overflow:hidden;
  pointer-events:none;
}
/* 定格卡:预置槽位绝对定位(随机抖动 + 微旋转 ≤3° 由 JS 内联) */
.dmf{
  position:absolute;max-width:46%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  --rot:0deg;
  padding:2px 12px;border-radius:14px;
  background:rgba(10,16,27,.78);
  border:1px solid transparent;
  opacity:0;
  transform:rotate(var(--rot));
  animation:dmf-in .4s cubic-bezier(.2,.9,.3,1.05) forwards;
}
@keyframes dmf-in{
  from{opacity:0;transform:translateY(-26px) rotate(var(--rot)) scale(.92)}
  to{opacity:1;transform:translateY(0) rotate(var(--rot)) scale(1)}
}
/* skip 第一按:定格完成态,全部立即可见 */
#act2-layer.shown .dmf{
  animation:none;opacity:1;transform:rotate(var(--rot));
}
.dmf.good{color:var(--green);border-color:rgba(111,208,140,.35)}
.dmf.bad{color:var(--red);border-color:rgba(229,96,92,.35)}
.dmf.extra{color:#d88;font-style:italic;opacity:.92}
.dmf.gold{
  color:var(--gold);border-color:rgba(240,201,106,.6);
  text-shadow:0 0 12px rgba(240,201,106,.6);
}
.dmf.bad-blaze{
  color:#ff8f8c;border-color:rgba(229,96,92,.8);
  background:rgba(60,14,14,.8);
  text-shadow:0 0 10px rgba(229,96,92,.7);
}
/* 置顶热评:字号最大(≈21px),必读;点赞数 = 好评率可视化 */
.dmf.hot{
  max-width:92%;font-size:21px;font-weight:700;
  padding:4px 16px;border-radius:16px;
}
.dmf.hot .pin{
  font-style:normal;font-size:10px;font-weight:600;letter-spacing:.15em;
  color:var(--gold);border:1px solid rgba(240,201,106,.55);border-radius:4px;
  padding:0 5px;margin-right:9px;vertical-align:2px;
}
.dmf-like{
  margin-left:12px;font-size:13px;font-weight:600;
  font-family:var(--mono),monospace;font-variant-numeric:tabular-nums;
  color:var(--dim);
}
.dmf.gold .dmf-like{color:var(--gold)}
/* 右下"未读 +N":评论区读不完,截图只是切片 */
.dmf-unread{
  position:absolute;right:3.5%;bottom:5px;z-index:4;
  font-family:var(--mono),monospace;font-variant-numeric:tabular-nums;
  font-size:13px;color:var(--dim);
  background:rgba(10,16,27,.85);
  border:1px solid rgba(38,50,74,.65);border-radius:10px;
  padding:2px 10px;opacity:.95;
}
.dmf-unread::before{content:'💬 '}
/* 倒计时细条:定格起点(1500ms)出现,3.5s 线性走完,提示停留窗口 */
.dmf-timer{
  position:absolute;left:6%;bottom:8px;width:30%;height:3px;
  border-radius:2px;background:rgba(125,138,165,.22);overflow:hidden;
}
.dmf-timer i{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,rgba(240,201,106,.9),rgba(240,201,106,.5));
  animation:dmf-timer 3500ms linear forwards;
}
@keyframes dmf-timer{
  from{width:0}
  to{width:100%}
}
/* 爆款/炎上大红章:砸落在静态截图上(scale 1.6→1 + 抖动) */
.dm-stamp{
  position:absolute;top:50%;left:50%;z-index:5;
  transform:translate(-50%,-50%) rotate(-8deg) scale(1);
  font-size:clamp(38px,5vw,58px);font-weight:900;letter-spacing:.3em;
  animation:stamp-slam .5s cubic-bezier(.2,1.4,.3,1) both;
  pointer-events:none;
}
.dm-stamp.hit{
  color:var(--gold);
  text-shadow:0 0 30px rgba(240,201,106,.8),0 4px 0 rgba(0,0,0,.5);
}
.dm-stamp.blaze{
  color:var(--red);
  text-shadow:0 0 30px rgba(229,96,92,.8),0 4px 0 rgba(0,0,0,.5);
}
@keyframes stamp-slam{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1.6)}
  55%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(.96)}
  70%{transform:translate(-50%,-50%) rotate(-6deg) scale(1.05)}
  100%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}
}

/* ---- M5 归档:#event-feed 折叠条目,展开当版全部弹幕全文 ---- */
.feed-item.arch{cursor:pointer;user-select:none}
.feed-item.arch .arch-head{
  font-size:12px;letter-spacing:.03em;color:var(--text);
}
.feed-item.arch .arch-head .arrow{
  font-style:normal;display:inline-block;margin-left:4px;
  transition:transform .18s ease;
}
.feed-item.arch.open .arch-head .arrow{transform:rotate(90deg)}
.feed-item.arch .arch-body{
  margin-top:6px;padding:6px 9px;border-radius:6px;
  background:rgba(8,12,20,.72);
  display:flex;flex-direction:column;gap:2px;
}
.feed-item.arch .arch-body.hidden{display:none}
.arch-line{font-size:12px;line-height:1.55;white-space:normal;word-break:break-all}
.arch-line.good{color:var(--green)}
.arch-line.bad{color:var(--red)}
.arch-line.gold{color:var(--gold)}
.arch-line.bad-blaze,.arch-line.blaze{color:#ff8f8c}
.arch-line.extra{font-style:italic;color:#d88}
/* 幕末揭晓:好评率大数字 */
#act2-verdict{
  flex:none;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  min-height:34px;
  padding-top:4px;
}
#act2-verdict .gr{
  font-family:var(--mono),monospace;
  font-size:34px;font-weight:700;line-height:1;
  animation:stamp-pop .4s cubic-bezier(.2,1.6,.4,1);
}
@keyframes stamp-pop{
  from{transform:scale(1.8);opacity:0}
  to{transform:scale(1);opacity:1}
}
#act2-verdict .gr.good{color:var(--green)}
#act2-verdict .gr.bad{color:var(--red)}
#act2-verdict .gr.gold{color:var(--gold);text-shadow:0 0 18px rgba(240,201,106,.6)}
#act2-verdict .gr-label{font-size:12px;color:var(--dim);letter-spacing:.3em}
#act2-verdict .note{font-size:13px}
.verdict-lines{
  width:100%;
  font-size:12.5px;color:var(--dim);
  font-family:var(--mono),monospace;
}

/* ============================================================
   Act3 乘区结算 + 营收行
   ============================================================ */
#act3-flow{
  flex:1;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;gap:2px;
}
.a3-row{
  display:flex;align-items:baseline;gap:10px;
  font-size:13px;line-height:1.6;
  animation:a1-in .3s ease-out;
}
.a3-name{color:var(--text)}
.a3-tag{font-size:11px;color:var(--dim)}
.a3-v{
  margin-left:auto;
  font-family:var(--mono),monospace;font-variant-numeric:tabular-nums;
  font-size:16px;font-weight:700;
}
.a3-v.gold{color:var(--gold)}
.a3-v.bad{color:var(--red)}
.a3-row.sum{
  border-top:1px dashed rgba(240,201,106,.3);padding-top:4px;margin-top:2px;
}
.a3-row.accident .a3-name{color:var(--red)}

/* 营收行:全屏视觉焦点(40px 金色) */
.cs-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:4px 2px;
}
.cs-k{font-size:13px;color:var(--gold);letter-spacing:.35em}
.cs-v{
  font-family:var(--mono),monospace;
  font-variant-numeric:tabular-nums;
  font-size:clamp(30px,2.8vw,40px);font-weight:700;line-height:1.15;
  color:var(--text);
  text-align:right;
  text-shadow:0 2px 0 rgba(0,0,0,.5),0 0 22px rgba(201,212,232,.12);
}
#cs-rev.mult .cs-v{
  color:var(--gold);
  text-shadow:0 2px 0 rgba(0,0,0,.5),0 0 20px rgba(240,201,106,.55),0 0 48px rgba(240,201,106,.28);
}
.cs-row.bump .cs-v{animation:num-bump .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes num-bump{
  0%{transform:scale(1)}
  35%{transform:scale(1.3)}
  100%{transform:scale(1)}
}

/* 矮窗兜底:三幕收身 */
@media (max-height:760px){
  #act-zone .act{padding:8px 14px 8px 60px}
  .a1-v,.a3-v{font-size:14px}
  #act2-verdict .gr{font-size:26px}
  .dmf.hot{font-size:18px}
  .dmf-unread{font-size:12px}
  .cs-v{font-size:clamp(24px,2.2vw,32px)}
}