/* =========================================================
 *  videofix.css —— "视频编码放不了"的提示层
 *
 *  为什么单独做一层而不是复用 imgload 的：
 *    失败原因不同，要解释的话也不同 ——
 *    图片是"没加载到"，视频是"加载到了但解不开"。
 *    后者必须说清"不是视频坏了"，否则用户会以为文件损失了。
 * ========================================================= */

.vfix {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  /* 默认不吃点击：卡片还能点开灯箱看详情 */
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.014) 0 2px,
      transparent 2px 9px),
    radial-gradient(120% 90% at 50% 40%,
      rgba(52, 44, 92, 0.62) 0%,
      rgba(26, 24, 48, 0.72) 48%,
      rgba(7, 8, 18, 0.9) 100%);
}
.vfix.is-on { display: flex; }

.vfix-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px;
  text-align: center;
  max-width: 92%;
}

.vfix-ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: rgba(255, 205, 160, 0.9);
  flex: none;
}
.vfix-ico svg { width: 100%; height: 100%; }

.vfix-txt {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2, #c3cbe4);
  letter-spacing: 0.01em;
}

.vfix-sub {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-4, #5f6884);
  max-width: 26em;
}

.vfix-dl {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin-top: 2px;
  padding: 5px 14px;
  border-radius: 99px;
  border: 1px solid rgba(255, 215, 154, 0.4);
  background: rgba(255, 215, 154, 0.1);
  color: var(--gold, #ffd79a);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.22s, background 0.22s, border-color 0.22s;
  -webkit-tap-highlight-color: transparent;
}
.vfix-dl:hover,
.vfix-dl:focus-visible {
  color: #241a08;
  background: linear-gradient(135deg, #ffe9bd, #ffc97f);
  border-color: transparent;
  outline: none;
}

/* ---------------- 小容器：只留一个图标 ---------------- */
/* 卡片上的预览视频、下载页的缩略图 —— 塞不下文字，
   靠角标提示，详情让用户点开灯箱看 */
.vfix.is-tiny .vfix-box { padding: 4px; gap: 0; }
.vfix.is-tiny .vfix-txt,
.vfix.is-tiny .vfix-sub,
.vfix.is-tiny .vfix-dl { display: none; }
.vfix.is-tiny .vfix-ico {
  width: 42%;
  max-width: 24px;
  height: auto;
  aspect-ratio: 1;
  opacity: 0.92;
}

/* 坏的视频本体压暗，别让黑色的画面撑着 */
video.is-vbroken {
  filter: brightness(0.3) saturate(0.3);
}

/* ---------------- 灯箱里：给足信息 ---------------- */
.lb-media .vfix-box { gap: 11px; padding: 20px; }
.lb-media .vfix-ico { width: 36px; height: 36px; }
.lb-media .vfix-txt { font-size: 14px; }
.lb-media .vfix-sub { font-size: 12px; }
.lb-media .vfix-dl { min-height: 36px; padding: 7px 20px; font-size: 12.5px; }
.lb-media .vfix { pointer-events: auto; }

/* 安静模式：没有动画要停，但保留这条说明方便查样式 */
html.calm .vfix-dl { transition: none; }

/* =========================================================
   加载中：转圈 + 进度
   ---------------------------------------------------------
   跨境实测 15~21 KB/s，一个 4MB 的视频要下 4 分钟。
   这段时间画面是黑的、点播放也没反应 ——
   不给个"正在加载 37%"，用户只会认为视频坏了。
   ========================================================= */
.vfix-wait {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 42%,
    rgba(30, 38, 70, 0.55) 0%,
    rgba(12, 15, 30, 0.78) 60%,
    rgba(5, 6, 12, 0.9) 100%);
}
.vfix.is-waiting .vfix-wait { display: flex; }
.vfix.is-waiting .vfix-box { display: none; }

.vfix-ring {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 215, 154, 0.22);
  border-top-color: var(--gold, #ffd79a);
  animation: vfixSpin 0.9s linear infinite;
  flex: none;
}
@keyframes vfixSpin { to { transform: rotate(360deg); } }

.vfix-prog {
  font-size: 11.5px;
  color: var(--ink-3, #8c96b4);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

/* 小容器：只留转圈 */
.vfix.is-tiny .vfix-prog { display: none; }
.vfix.is-tiny .vfix-ring { width: 16px; height: 16px; }

/* 灯箱里大一点 */
.lb-media .vfix-ring { width: 28px; height: 28px; }
.lb-media .vfix-prog { font-size: 13px; }

/* 安静模式 / 减少动效：不转圈，只留文字（进度数字仍在变，信息不丢） */
html.calm .vfix-ring,
html.no-anim .vfix-ring { animation: none; border-top-color: rgba(255, 215, 154, 0.5); }
@media (prefers-reduced-motion: reduce) {
  .vfix-ring { animation: none; border-top-color: rgba(255, 215, 154, 0.5); }
}

/* ---------------- 网络失败（不是编码问题） ----------------
   说清"视频没坏，只是没下进来"，按钮是"重新加载"。
   视觉上比编码那种更柔和 —— 这个是可以自己解决的。 */
.vfix[data-kind="neterr"] .vfix-ico { color: rgba(160, 200, 255, 0.9); }
.vfix[data-kind="neterr"] .vfix-dl {
  border-color: rgba(150, 190, 255, 0.42);
  background: rgba(150, 190, 255, 0.1);
  color: #b9d1ff;
}
.vfix[data-kind="neterr"] .vfix-dl:hover,
.vfix[data-kind="neterr"] .vfix-dl:focus-visible {
  color: #0a1020;
  background: linear-gradient(135deg, #d7e6ff, #9dc0ff);
  border-color: transparent;
}