/* ============================================================================
   直播间卡片 —— 首页「血染力量 · 一起玩」块
   ----------------------------------------------------------------------------
   状态全部来自服务端 `GET /__live`（B 站公开接口 + 抖音 webcast 接口，由 `_serve.py` 代理）。
     · 未开播：封面区是大字的平台名（B站 / 抖音），卡片是普通入口
     · 已开播：封面区换成**实时画面**（B站 走它自己给的 keyframe；抖音 走服务端
       ffmpeg 从流里抓的一帧），卡片上方亮出「血染直播中」提示条
     · 取不到状态（沙箱无外网 / file:// 离线副本 / 接口抽风）：显示「点击进入」，不谎报开播
   ⚠️ 三张卡的样式是**同一套**（2026-09-18 抖音卡从"固定入口"升级成真状态卡后没改结构），
      所以这里所有规则都按 `.lv-card` 写，别加 `#lvBili` 这种单卡选择器。
   ⚠️ 四条硬规矩：
     ① <img> 初始**不挂 src**（见 index.html），这里再给它 `display:none`。
        双保险 —— 没 src 就不发请求，也就不可能在未开播时画出一块破图。
     ② `.lv-livebar` 带 `[hidden]`，但 `display:inline-flex` 会盖掉 `[hidden]` 的
        默认 `none` ⇒ **必须显式写 `.lv-livebar[hidden]{display:none}`**。
     ③ 前端只认自家 /__live 与 /__livepic，不碰任何第三方域名（跨域必被挡）。
     ④ 抖音的实时帧是 640px 宽的 JPEG、B 站的 keyframe 尺寸另算 ⇒ 只能
        `object-fit:cover` 让它自己铺满 16:9 框，⛔ 别写死宽高。
   ========================================================================== */

/* ---- 首页这块的联系方式已移除（2026-09-14 用户要求），.crd 由「左文右列表」
        收成单列：标题与卡片共用同一条居中列，标题仍左对齐（全站基调）。
        ⚠️ 只在 .crd-outer（首页独有）里覆盖 —— .crd/.crd-ways/.crd-row 是全站通用，
           guides / power 页脚的联系方式块还在用，绝不能改全局。
   ★★ 2026-09-19 v102：站长「网站首页 抖音和B站直播间这块 缩小一点 感觉太大了」。
      改前**实测**（1440×1000 视口，DOM 量、非估算）：整块 1404×**649**，占视口高 **71.5%**；
      两张卡各 403×382（封面 401×226）。→ 承载列 820 → **640**，内距与字号同步微收。
      ⚠️ 列宽必须**标题与卡片同时收**：只收卡片会让两块左边缘错开一百多像素（视觉敏感的人一眼看出）。
      ⚠️ 改后要**再量一次**（`_tmp/_lv_size.py`，改前/改后各一份 JSON 对比），
         ⛔ 别按实拍估"看着小了" —— 这是本站记过账的老坑。 ---- */
.crd-outer .crd{grid-template-columns:1fr;gap:0;justify-items:center}
.crd-outer .crd-intro{width:100%;max-width:640px}
.crd-outer .lv-wrap{width:100%}

/* ---- 承载容器：.crd 的下半部分，宽度收在同一条 640px 列里、内部居中 ---- */
.lv-wrap{
  grid-column:1/-1;align-self:stretch;
  display:flex;flex-direction:column;align-items:center;
  padding-top:20px;border-top:1px solid rgba(216,180,90,.16);
}

/* ---- 「血染直播中」：只有开播时才出现（未开播挂这条等于骗人） ---- */
.lv-livebar{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:13px;padding:6px 18px 6px 14px;
  font-family:var(--f-title);font-size:13.5px;letter-spacing:.3em;
  color:#15160f;
  background:linear-gradient(100deg,var(--gold-hi),var(--gold) 74%);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 0 0 1px rgba(201,169,97,.22),0 12px 34px -12px rgba(201,169,97,.6);
}
.lv-livebar[hidden]{display:none}   /* ⚠️ 不能省：见文件头备注 ② */
.lv-livebar i{
  width:7px;height:7px;border-radius:50%;background:#8f1d10;flex:none;
  animation:lvBlink 1.15s ease-in-out infinite;
}
@keyframes lvBlink{0%,100%{opacity:1}50%{opacity:.22}}

/* ---- 两张卡：并排居中，宽度收在 640px 内，桌面不散、手机单列 ---- */
.lv-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  width:100%;max-width:640px;
}

.lv-card{
  position:relative;display:block;overflow:hidden;text-decoration:none;
  border:1px solid rgba(216,180,90,.22);
  background:linear-gradient(180deg,rgba(17,17,18,.72),rgba(15,15,16,.9));
  transition:border-color .18s, transform .18s, background .18s, box-shadow .18s;
}
.lv-card:hover{
  border-color:var(--gold);
  background:linear-gradient(180deg,rgba(25,26,27,.9),rgba(6,12,25,.96));
}
.lv-card.on{
  border-color:rgba(216,180,90,.62);
  box-shadow:0 0 0 1px rgba(201,169,97,.26),0 16px 42px -20px rgba(201,169,97,.55);
}

/* ---- 封面区 ---- */
.lv-shot{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 120% at 50% 0%,rgba(201,169,97,.10),rgba(0,0,0,0) 62%),
    linear-gradient(160deg,#1a1c21,#0b0d11);
}
/* 未开播时封面上的大字平台名。letter-spacing 会在末字后也留空隙，
   用等量的 text-indent 把整块推回来，才是真正的视觉居中。
   （v102 随承载列 820→640 一起收：卡片窄了，平台名字号要跟着小，否则顶满封面。） */
.lv-shot b{
  font-family:var(--f-title);font-size:clamp(17px,1.8vw,25px);
  letter-spacing:.18em;text-indent:.18em;
  color:var(--gold);opacity:.72;
  transition:opacity .25s;
}
.lv-card:hover .lv-shot b{opacity:1}

.lv-shot img{
  display:none;                     /* ⚠️ 硬规矩 ① —— 未开播根本不该有图 */
  width:100%;height:100%;object-fit:cover;
}
.lv-card.on .lv-shot img{display:block}
.lv-card.on .lv-shot b{display:none}      /* 有实时画面了，平台名让位 */

.lv-shot::after{                    /* 底边压暗，让画面与下方文字区衔接干净 */
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;display:none;
  background:linear-gradient(180deg,rgba(8,9,12,0),rgba(8,9,12,.72));
  pointer-events:none;
}
.lv-card.on .lv-shot::after{display:block}

/* 开播但图没取到（断网 / 接口抽风）：退回平台名，不留一块空壳
   ⚠️⚠️ 带 `on` 的那两条**必须**比 `.lv-card.on .lv-shot img`（3 个类）更具体：
      第一版写成 `.lv-shot.picfail img`（2 个类）会被它压过去 —— 于是「开播卡上
      破图照样显示、大字照样藏」，写了兜底等于没兜。这是 2026-09-18 被 v78 的
      验收脚本 E7/E8 照出来的，从 v60 起一直是坏的（B站那张卡也在踩）。 */
.lv-card.on .lv-shot.picfail img{display:none}
.lv-card.on .lv-shot.picfail b{display:block}
.lv-shot.picfail img{display:none}
.lv-shot.picfail b{display:block}

/* ---- 文字区（v102：卡片窄了，内距与字号跟着收一档，别让文字把卡片顶高） ---- */
.lv-body{padding:10px 12px 12px}
.lv-top{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.8px}
.lv-plat{
  font-family:var(--f-title);font-size:12px;letter-spacing:1.5px;
  color:var(--gold);flex:none;
}
.lv-state{color:var(--parch-3);flex:none}
.lv-card.on .lv-state{color:var(--gold-hi)}
.lv-title{
  margin-top:6px;font-size:12.6px;line-height:1.55;color:var(--parch-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.6em;
}
.lv-card.on .lv-title{color:var(--parch)}
.lv-cmp{margin-top:5px;font-size:11px;color:var(--parch-3);letter-spacing:.4px}
.lv-go{
  display:block;margin-top:9px;padding-top:8px;
  border-top:1px solid rgba(216,180,90,.16);
  font-size:11.2px;letter-spacing:1.2px;color:var(--gold);
  font-family:var(--f-title);
}
.lv-card:hover .lv-go{color:var(--gold-hi)}

@media (max-width:900px){
  .lv-grid{grid-template-columns:1fr}
  .lv-wrap{padding-top:20px}
}

@media (prefers-reduced-motion:reduce){
  .lv-livebar i{animation:none}
  .lv-card,.lv-shot img,.lv-shot b{transition:none}
}