/* ============================================================
   CC短剧 duanju —— 剧集详情页 detail.css
   氛围模糊头 + 白卡分区 + 集号网格 + 底部操作条（红果风）
   仅本页样式；令牌复用 base.css :root
   ============================================================ */
.dj-detail-body{background:#000}
.dj-detail{background:var(--dj-bg);padding-bottom:0}

/* ---------- 1) 氛围背景 + 顶栏 + 头部 ---------- */
.dj-detail-hero{
  position:relative;overflow:hidden;
  padding:calc(var(--dj-safe-t) + 6px) 0 30px;
  color:#fff;
}
.dj-detail-bg{position:absolute;inset:0;z-index:0;background:#3a3a40;overflow:hidden}
.dj-detail-bg::before{
  content:"";position:absolute;inset:-40px;
  background-image:var(--dj-hero-img);
  background-size:cover;background-position:center 22%;
  filter:blur(30px) saturate(1.25);
  transform:scale(1.15);
}
.dj-detail-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(20,20,26,.34) 0%,
    rgba(20,20,26,.16) 26%,
    rgba(20,20,26,.42) 74%,
    rgba(20,20,26,.66) 100%);
}

/* 2) 顶栏 */
.dj-detail-top{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  height:44px;padding:0 10px;
}
/* 顶栏按钮限定在 .dj-detail-top 内。播放页也加载 detail.css（复用详情内容片段），
   若此处用裸类 .dj-top-btn，会串味播放页顶栏——把倍速/详情按钮压成 38px 圆块。见 ADR-0005 */
.dj-detail-top .dj-top-actions{display:flex;align-items:center;gap:4px}
.dj-detail-top .dj-top-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;color:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.dj-detail-top .dj-top-btn .dj-icon{font-size:22px}
.dj-detail-top .dj-top-btn:active{background:rgba(255,255,255,.14)}

/* 3) 头部 */
.dj-detail-head{
  position:relative;z-index:2;
  display:flex;gap:14px;align-items:flex-start;
  padding:8px 16px 0;
}
.dj-head-cover{
  flex:none;width:104px;border-radius:var(--dj-radius);overflow:hidden;
  aspect-ratio:3/4;background:rgba(255,255,255,.12);
  box-shadow:0 8px 22px rgba(0,0,0,.34);
}
/* hero 封面为首屏 LCP 图：直接 src 立即加载，淡入用纯 CSS 动画驱动，
   不依赖 JS 加 .is-loaded —— 避免「背景在、前景海报隐形」的失效。 */
.dj-head-cover img{width:100%;height:100%;object-fit:cover;
  animation:dj-cover-in .4s ease both}
@keyframes dj-cover-in{from{opacity:0}to{opacity:1}}
.dj-head-meta{flex:1;min-width:0;padding-top:4px}
.dj-head-title{
  margin:0;font-size:var(--dj-fs-title);font-weight:800;line-height:1.24;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.dj-head-sub{
  margin:10px 0 0;font-size:var(--dj-fs-cap);color:rgba(255,255,255,.86);
  display:flex;align-items:center;flex-wrap:wrap;gap:2px;
  text-shadow:0 1px 4px rgba(0,0,0,.35);
}
.dj-head-sub .dj-dot{margin:0 5px;font-style:normal;opacity:.6}
.dj-head-sub b{font-weight:700;font-family:var(--dj-font-num);letter-spacing:.2px}
.dj-head-score{
  margin:9px 0 0;display:inline-flex;align-items:baseline;gap:3px;
  color:var(--dj-gold);text-shadow:0 1px 4px rgba(0,0,0,.35);
}
.dj-head-score b{font-size:24px;font-weight:700;line-height:1;font-family:var(--dj-font-num);letter-spacing:.3px}
.dj-head-score span{font-size:var(--dj-fs-micro);opacity:.85}

/* ---------- 主体：白卡分区（浅色纸面上抬） ---------- */
.dj-detail-main{
  position:relative;z-index:3;
  background:var(--dj-bg);
  border-radius:16px 16px 0 0;
  margin-top:-14px;padding:6px 0 0;
}
.dj-block{
  background:var(--dj-card);
  margin:12px;padding:16px 15px;
  border-radius:var(--dj-radius-xl);
  box-shadow:var(--dj-shadow-card);
}
.dj-block + .dj-block{margin-top:12px}
.dj-block-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.dj-block-title{
  margin:0;font-size:var(--dj-fs-lead);font-weight:700;color:var(--dj-text);
  display:flex;align-items:baseline;gap:5px;white-space:nowrap;
}
.dj-block-count{font-style:normal;font-size:var(--dj-fs-cap);color:var(--dj-text-sub);font-weight:500}
.dj-block-more{
  display:inline-flex;align-items:center;gap:1px;
  font-size:var(--dj-fs-cap);color:var(--dj-text-sub);white-space:nowrap;
}
.dj-block-more .dj-icon{font-size:15px;color:var(--dj-text-weak)}

/* ---------- 4) 简介 ---------- */
.dj-detail-intro .dj-block-head{align-items:center;flex-wrap:wrap;row-gap:8px}
.dj-intro-tags{display:flex;flex-wrap:wrap;gap:7px;flex:1;min-width:0}
.dj-intro-body{position:relative}
.dj-intro-text{
  font-size:var(--dj-fs-body);line-height:1.62;color:var(--dj-text);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.dj-intro-text.is-open{-webkit-line-clamp:unset;overflow:visible}
.dj-intro-text :where(p,div,span){margin:0}
.dj-intro-toggle{
  display:block;margin:6px 0 0 auto;
  font-size:var(--dj-fs-cap);color:var(--dj-accent);font-weight:700;
}
.dj-intro-empty{margin:0;font-size:var(--dj-fs-cap);color:var(--dj-text-weak)}

/* ---------- 5) 剧集 ---------- */
/* 完结/更新状态胶囊 */
.dj-eps-status{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:100px;
  font-size:var(--dj-fs-micro);font-weight:700;
  color:var(--dj-accent);background:rgba(255,83,34,.10);
}
.dj-eps-status.is-end{color:var(--dj-badge-new);background:rgba(21,181,126,.12)}

/* signature：集数刻度尺 —— 追更进度可视化（胶片/票根边刻度感） */
.dj-ruler{margin:2px 0 16px}
.dj-ruler-track{
  position:relative;height:8px;border-radius:100px;overflow:hidden;
  /* 底：暗填充 + 竖向刻度线（胶片齿孔感） */
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.12) 0 1px, transparent 1px 12px),
    var(--dj-fill);
}
.dj-ruler-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;
  border-radius:100px;background:var(--dj-grad);
  box-shadow:0 0 10px rgba(255,46,99,.5);
  transition:width .6s var(--dj-ease);
}
/* 追更进度头：电光青刻度标记（签名高光，仅一处，遵守青纪律）。
   放在 fill 内右缘，随进度移动；width:0（无历史）时不可见。 */
.dj-ruler-fill::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:3px;
  background:var(--dj-cyan);box-shadow:var(--dj-glow-cyan);
}
.dj-ruler-legend{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-top:9px;font-size:var(--dj-fs-cap);color:var(--dj-text-sub);
}
.dj-ruler-here{font-weight:600}
.dj-ruler-here.is-active{color:var(--dj-cyan);font-weight:700}
.dj-ruler-total b{
  font-family:var(--dj-font-num);font-weight:700;font-size:19px;
  color:var(--dj-text);letter-spacing:.3px;margin-right:1px;
}

.dj-range{
  display:flex;gap:18px;overflow-x:auto;margin:0 -3px 14px;padding:0 3px 2px;
  -webkit-overflow-scrolling:touch;
}
.dj-range-tab{
  flex:none;font-size:var(--dj-fs-body);color:var(--dj-text-sub);
  padding:2px 0;position:relative;white-space:nowrap;transition:color .15s ease;
  font-variant-numeric:tabular-nums;
}
.dj-range-tab.is-active{color:var(--dj-text);font-weight:700}
.dj-range-tab.is-active::after{
  content:"";position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);
  width:18px;height:3px;border-radius:3px;background:var(--dj-grad);
}
.dj-ep-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.dj-ep{
  position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;border-radius:10px;
  background:var(--dj-fill);color:var(--dj-text);
  font-family:var(--dj-font-num);
  font-size:17px;font-weight:600;letter-spacing:.3px;
  transition:transform .12s var(--dj-ease),background .15s ease,color .15s ease;
}
.dj-ep:active{transform:scale(.94)}
/* 已看过的集：品红描边 + 弱化，形成「追到哪」的填充带 */
.dj-ep.is-watched{
  color:var(--dj-accent);background:rgba(255,46,99,.12);
  box-shadow:inset 0 0 0 1px rgba(255,46,99,.32);
}
.dj-ep.is-current{
  background:var(--dj-grad);color:#fff;
  box-shadow:var(--dj-shadow-cta);
}
/* 正在播放的小声波 */
.dj-ep.is-current::after{
  content:"";position:absolute;top:5px;right:6px;width:13px;height:10px;opacity:.95;
  background:
    linear-gradient(#fff,#fff) 0    100%/2px 45% no-repeat,
    linear-gradient(#fff,#fff) 4.5px 100%/2px 100% no-repeat,
    linear-gradient(#fff,#fff) 9px  100%/2px 65% no-repeat,
    linear-gradient(#fff,#fff) 13px 100%/2px 35% no-repeat;
  animation:dj-wave .9s ease-in-out infinite alternate;
}
@keyframes dj-wave{
  from{background-size:2px 45%,2px 100%,2px 65%,2px 35%}
  to  {background-size:2px 100%,2px 55%,2px 40%,2px 80%}
}

/* ---------- 6) 剧评 ---------- */
.dj-rate-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 12px;margin-bottom:6px;
  background:var(--dj-fill);border-radius:var(--dj-radius);
}
.dj-rate-label{font-size:var(--dj-fs-body);font-weight:600;color:var(--dj-text)}

/* 星级（背景描边 + 前景填充按分数裁切） */
.dj-stars{position:relative;display:inline-flex;line-height:0}
.dj-stars-bg,.dj-stars-fg{display:flex;gap:3px}
.dj-stars-bg{color:var(--dj-text-weak)}
.dj-stars-fg{position:absolute;left:0;top:0;overflow:hidden;color:#FFB020;white-space:nowrap}
.dj-stars-fg.is-full{position:static;overflow:visible}
.dj-stars .dj-icon{font-size:19px}
.dj-stars--sm .dj-icon{font-size:12px;color:#FFC53D}

.dj-review-list{margin:0;padding:0}
.dj-review-item{display:flex;gap:11px;padding:14px 0;border-top:1px solid var(--dj-line)}
.dj-review-item:first-child{border-top:0}
.dj-review-avatar{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--dj-fs-body);font-weight:700;color:#fff;
  background:linear-gradient(135deg,#FF7A45,#FF2C55);
  text-transform:uppercase;
}
.dj-review-body{flex:1;min-width:0}
.dj-review-top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.dj-review-name{
  font-size:var(--dj-fs-cap);font-weight:600;color:var(--dj-text-sub);
  max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dj-review-text{
  margin:0;font-size:var(--dj-fs-body);line-height:1.55;color:var(--dj-text);
  word-break:break-word;
}
.dj-review-foot{display:flex;align-items:center;justify-content:space-between;margin-top:7px}
.dj-review-time{font-size:var(--dj-fs-micro);color:var(--dj-text-weak)}
.dj-review-like{
  display:inline-flex;align-items:center;gap:4px;
  font-size:var(--dj-fs-cap);color:var(--dj-text-sub);
}
.dj-review-like .dj-icon{font-size:16px;color:var(--dj-text-weak)}
.dj-review-like em{font-style:normal}

/* ---------- 7) 底部固定条 ---------- */
.dj-foot-space{height:calc(64px + var(--dj-safe-b))}
.dj-detail-foot{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  z-index:20;width:100%;max-width:var(--dj-maxw);
  display:flex;align-items:center;gap:14px;
  padding:9px 16px calc(9px + var(--dj-safe-b));
  background:rgba(16,16,20,.86);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-top:1px solid var(--dj-line);
}
.dj-foot-fav{
  flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:46px;font-size:var(--dj-fs-micro);color:var(--dj-text-sub);
}
.dj-foot-fav .dj-icon{font-size:23px}
.dj-foot-fav-on{display:none;color:var(--dj-accent)}
.dj-foot-fav.is-on .dj-foot-fav-off{display:none}
.dj-foot-fav.is-on .dj-foot-fav-on{display:block}
.dj-foot-fav.is-on{color:var(--dj-accent)}
.dj-foot-play{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:46px;border-radius:100px;
  font-size:var(--dj-fs-lead);font-weight:700;color:#fff;
  background:var(--dj-grad);
  box-shadow:var(--dj-shadow-cta);
  transition:transform .12s var(--dj-ease),opacity .15s ease;
}
.dj-foot-play .dj-icon{font-size:20px}
.dj-foot-play:active{transform:scale(.985)}
.dj-foot-play.is-disabled{
  background:var(--dj-fill);color:var(--dj-text-weak);box-shadow:none;
}

@media (max-width:340px){
  .dj-ep-grid{grid-template-columns:repeat(5,1fr)}
  .dj-head-cover{width:92px}
}