/* ============================================================
   CC短剧 duanju —— 设计令牌 + reset + 共用组件
   移动端优先；桌面居中成手机视图，两侧留黑。
   主题「红果进化 / 暖色日落」：暖白纸面 + ember→rose 渐变 + 金；
   数字身份用条形 grotesque 展示字（见 --dj-font-num）。
   ============================================================ */

/* ---- 数字展示字体（类型签名）----
   仅子集拉丁+数字+标点（Latin woff2 覆盖 U+0000-00FF）。
   用 unicode-range 把它锁在 ASCII 范围：即使把 --dj-font-num 用到中英混排上，
   CJK 也会自动回退系统 PingFang，绝不影响中文字形。 */
@font-face{
  font-family:"DJNum";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/barlow-semicondensed-600.woff2") format("woff2");
  unicode-range:U+0000-00FF;
}
@font-face{
  font-family:"DJNum";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/barlow-semicondensed-700.woff2") format("woff2");
  unicode-range:U+0000-00FF;
}

:root{
  /* 主色：品红（accent）。现有 linear-gradient(--dj-accent,--dj-accent-2) 即变品红渐变。
     备选正红/番茄 #F5252D（暖）见 ADR-0004：不满意时把这两支换成 #F5252D/#FF3B30 即可回切。 */
  --dj-accent:#FF2E63;
  --dj-accent-2:#FF1F5A;
  --dj-cyan:#22E0C8;                  /* 签名点缀：只用于极少量高光，绝不铺面积（见 ADR-0004） */
  --dj-like:#FF2E63;
  --dj-badge-new:#22C58A;
  --dj-gold:#F5B544;                 /* 评分 / 火焰 / 高光 */
  --dj-grad:linear-gradient(120deg,#FF3D8B,#FF1F5A);   /* 可复用品红渐变 */

  /* 暗色优先（dark-first）：浏览页与播放页统一深炭底。见 ADR-0004。 */
  --dj-bg:#0E0E12;
  --dj-card:#1A1A20;
  --dj-card-2:#23232B;               /* 卡内更浅一层填充（选集格/胶囊底等） */
  --dj-text:#F4F3F7;
  --dj-text-sub:#9A98A6;
  --dj-text-weak:#6C6A78;
  --dj-line:#2A2A33;
  --dj-fill:#23232B;

  /* 暗底投影：柔黑纵深 + 品红/青发光用于强调件 */
  --dj-shadow-card:0 2px 10px rgba(0,0,0,.35);
  --dj-shadow-pop:0 12px 30px rgba(0,0,0,.5);
  --dj-shadow-cta:0 8px 22px rgba(255,46,99,.42);
  --dj-glow-cyan:0 0 10px rgba(34,224,200,.55);

  /* 尺度 */
  --dj-radius:12px;
  --dj-radius-sm:8px;
  --dj-radius-lg:18px;
  --dj-radius-xl:22px;
  --dj-maxw:480px;

  /* 字体 */
  --dj-font-num:"DJNum","Barlow Semi Condensed","DIN Alternate",-apple-system,sans-serif;

  /* 字号阶梯 */
  --dj-fs-title:20px;   /* 区块大标题 */
  --dj-fs-lead:17px;    /* 剧名/强调 */
  --dj-fs-body:15px;    /* 正文/卡片标题 */
  --dj-fs-cap:13px;     /* 次要 */
  --dj-fs-micro:11px;   /* 角标/计数 */

  /* 缓动 */
  --dj-ease:cubic-bezier(.22,.61,.36,1);

  /* 安全区 */
  --dj-safe-t:env(safe-area-inset-top,0px);
  --dj-safe-b:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",
    "Microsoft YaHei",system-ui,sans-serif;
  color:var(--dj-text);
  background:#000;              /* 桌面两侧黑边 */
  font-size:var(--dj-fs-body);
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%;border:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input{font:inherit}
ul,li{list-style:none;margin:0;padding:0}

.dj-sr-only{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

/* 手机视图容器：暗色页面用 */
.dj-app{
  max-width:var(--dj-maxw);
  min-height:100vh;
  margin:0 auto;
  background:var(--dj-bg);
  position:relative;
  overflow-x:hidden;
  /* clip 裁剪横向溢出但不建立滚动容器，避免俘获内部 position:sticky（如固定顶栏） */
  overflow-x:clip;
}

/* ---- 图标 ---- */
.dj-icon{width:1em;height:1em;fill:currentColor;flex:none;vertical-align:-0.125em}

/* ---- 标签胶囊 ---- */
.dj-tag{
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:100px;
  font-size:var(--dj-fs-micro);line-height:1.5;
  color:var(--dj-text-sub);background:var(--dj-fill);
  white-space:nowrap;
}

/* ---- 热度角标（火焰 + 数字），覆在海报左下 ---- */
.dj-hits{
  position:absolute;left:7px;bottom:7px;z-index:2;
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 8px 3px 6px;border-radius:100px;
  font-size:var(--dj-fs-micro);font-weight:700;color:#fff;
  background:rgba(20,12,8,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.dj-hits .js-hits{font-family:var(--dj-font-num);letter-spacing:.2px}
.dj-hits .dj-icon{color:var(--dj-gold);font-size:12px}

/* ---- 通用卡片（瀑布流/搜索/筛选复用） ----
   注意：裸 .dj-card 会被播放器 feed 复用，故此处不改其 margin/结构，
   浏览态的纵向间距在 home.css 用 .dj-waterfall .dj-card 单独给。 */
.dj-card{display:block;margin-bottom:14px;break-inside:avoid}
.dj-card-pic{
  position:relative;width:100%;border-radius:var(--dj-radius);
  overflow:hidden;background:var(--dj-fill);
  aspect-ratio:3/4;                       /* 竖屏海报 */
  box-shadow:var(--dj-shadow-card);
}
/* 海报底部渐隐：托住热度角标、增加纵深，不至于压暗整张图 */
.dj-card-pic::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.34));
  pointer-events:none;
}
.dj-card-pic img{width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .4s var(--dj-ease)}
.dj-card-pic img.is-loaded{opacity:1}
.dj-card-title{
  margin:9px 2px 0;font-size:var(--dj-fs-body);font-weight:700;
  line-height:1.3;color:var(--dj-text);letter-spacing:-.1px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.dj-card-sub{
  margin:4px 2px 0;font-size:var(--dj-fs-cap);color:var(--dj-text-sub);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.dj-card{transition:transform .14s var(--dj-ease)}
.dj-card:active{transform:scale(.975)}

/* “新剧”角标 */
.dj-badge-new{
  position:absolute;left:0;top:0;z-index:2;
  padding:3px 9px;border-radius:var(--dj-radius) 0 var(--dj-radius) 0;
  font-size:var(--dj-fs-micro);font-weight:700;color:#fff;letter-spacing:.3px;
  background:var(--dj-badge-new);
}

/* ---- 空态 ---- */
.dj-empty{
  padding:64px 24px;text-align:center;color:var(--dj-text-weak);
}
.dj-empty .dj-icon{font-size:44px;color:var(--dj-line);margin-bottom:12px}
.dj-empty p{margin:0;font-size:var(--dj-fs-cap)}

/* ---- 分隔 ---- */
.dj-hr{height:8px;background:var(--dj-fill);border:0;margin:0}

/* ---- 无障碍 & 动效偏好 ---- */
:focus-visible{outline:2px solid var(--dj-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* 隐藏滚动条（横向 tab 等） */
.dj-noscrollbar{scrollbar-width:none;-ms-overflow-style:none}
.dj-noscrollbar::-webkit-scrollbar{display:none}