/* 富贵导航 · 视频页。 */

/* ===== 视频页 ===== */
.video-page .vp-head{text-align:center;margin-bottom:6px}
.vp-head h1{font-size:24px;font-weight:800;line-height:1.35}
.vp-head p{font-size:12px;color:var(--muted2);margin-top:4px}
.vp-layout{display:grid;grid-template-columns:160px minmax(0,1fr);gap:14px;margin-top:14px}
.vp-cats{display:flex;flex-direction:column;gap:8px;max-height:720px;overflow-y:auto;scrollbar-width:thin}
.vp-cat{display:flex;align-items:center;gap:7px;height:38px;border:1px solid var(--border);background:var(--chip-bg);color:var(--chip-text);border-radius:8px;font-size:12px;cursor:pointer;padding:0 10px;text-align:left;white-space:nowrap;overflow:hidden;transition:all .15s}
.vp-cat .mdi{font-size:16px;line-height:1;color:var(--vp-c,var(--primary));flex:0 0 auto;transition:color .15s}
.vp-cat span{overflow:hidden;text-overflow:ellipsis}
.vp-cat:hover{color:var(--primary);border-color:var(--primary)}
.vp-cat.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.vp-cat.on .mdi{color:#fff}
.vp-main{min-width:0;position:relative}

/* ================= 播放器（黑金 · 尊享影院） =================
   2026-11-04 重做：原来是浏览器原生 controls，和「头戴皇冠」的调性完全不搭。
   现在自绘控制条 + 金框 + 皇冠徽标，配色只在黑金两色里打转，不抢画面。
   尺寸仍沿用原来的 aspect-ratio:4/3 + max-height，避免版式跳动。 */
.vp-stage{
  position:relative;
  margin-top:26px;          /* 皇冠放大后要更多身位，让它整体坐在框上方 */
  background:#05060a;
  border:1px solid rgba(201,168,102,.34);
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:4/3;
  max-height:620px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 20px 46px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(201,168,102,.06) inset;
  outline:none;
  -webkit-tap-highlight-color:transparent;
}
.vp-stage:focus-visible{border-color:rgba(233,200,135,.75);box-shadow:0 0 0 3px rgba(233,200,135,.18),0 20px 46px -24px rgba(0,0,0,.8)}
/* 顶部一道极细金线，像镜框的上沿 */
.vp-stage::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(233,200,135,.55) 22%,rgba(251,235,196,.85) 50%,rgba(233,200,135,.55) 78%,transparent);
}
.vp-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#000}
.vp-stage.is-idle{cursor:none}

/* 皇冠：戴在框架上沿正中（框外一半、压住边框一半），播放/悬停时点亮 */
.vp-crown{
  position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  z-index:5;pointer-events:none;opacity:.66;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
  transition:opacity .25s ease, transform .25s ease;
  line-height:0;                 /* 不然 svg 会被行高撑出 7px，压框过多 */
}
.vp-crown svg{display:block}
.vp-main:hover .vp-crown,
.vp-main.is-playing .vp-crown{opacity:1;transform:translateX(-50%) translateY(1px)}
.vp-main.is-playing .vp-crown svg{animation:vpCrownGlow 3.2s ease-in-out infinite}
@keyframes vpCrownGlow{
  0%,100%{filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}
  50%{filter:drop-shadow(0 2px 10px rgba(233,200,135,.55))}
}

/* 分类/状态角标 */
.vp-badge{
  position:absolute;left:12px;top:10px;z-index:4;
  font-size:11px;letter-spacing:.3px;color:#f3e6c8;
  background:rgba(8,7,5,.62);border:1px solid rgba(201,168,102,.28);
  padding:3px 10px;border-radius:999px;
  opacity:0;transition:opacity .2s;pointer-events:none;backdrop-filter:blur(3px);
}
.vp-badge.show{opacity:1}

/* 中央大播放键 */
.vp-bigplay{
  position:absolute;inset:0;margin:auto;z-index:5;
  width:70px;height:70px;border-radius:50%;
  border:1px solid rgba(233,200,135,.45);
  background:radial-gradient(circle at 50% 38%,rgba(38,32,20,.9),rgba(0,0,0,.72));
  color:#f3dca6;font-size:30px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(2px);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.9), 0 0 0 6px rgba(233,200,135,.06);
  transition:transform .18s ease,opacity .2s ease,box-shadow .2s;
}
.vp-bigplay:hover{transform:scale(1.06);box-shadow:0 10px 34px -8px rgba(0,0,0,.9),0 0 0 8px rgba(233,200,135,.12)}
.vp-bigplay .mdi{margin-left:3px}
.vp-stage.is-playing .vp-bigplay,
.vp-stage.is-loading .vp-bigplay{opacity:0;pointer-events:none;transform:scale(.9)}

/* 加载圈 */
.vp-spin{position:absolute;inset:0;margin:auto;z-index:5;width:46px;height:46px;display:flex;align-items:center;justify-content:center}
.vp-spin i{
  width:34px;height:34px;border-radius:50%;
  border:2px solid rgba(233,200,135,.22);
  border-top-color:#f3dca6;
  animation:vpSpin .8s linear infinite;
}
@keyframes vpSpin{to{transform:rotate(360deg)}}

/* 出错重试 */
.vp-retry{
  position:absolute;inset:0;margin:auto;z-index:6;height:38px;width:max-content;
  padding:0 18px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(233,200,135,.4);background:rgba(10,9,6,.86);color:#f3dca6;
  font-size:12.5px;display:inline-flex;align-items:center;gap:6px;
}
.vp-retry:hover{background:rgba(24,20,12,.92)}

/* ---------- 控制条 ---------- */
.vp-ctl{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  padding:26px 14px 10px;
  background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.55) 52%,transparent);
  opacity:1;transform:translateY(0);
  transition:opacity .22s ease,transform .22s ease;
}
.vp-stage.is-idle .vp-ctl{opacity:0;transform:translateY(8px);pointer-events:none}

.vp-progress{padding:8px 0 8px;cursor:pointer;outline:none}
.vp-track{position:relative;height:4px;border-radius:999px;background:rgba(255,255,255,.16);transition:height .15s ease}
.vp-progress:hover .vp-track,
.vp-progress:focus-visible .vp-track{height:6px}
.vp-buffer{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:rgba(255,255,255,.26)}
.vp-played{
  position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;
  background:linear-gradient(90deg,#b9922f,#e9c887 70%,#f7e4b6);
  box-shadow:0 0 10px rgba(233,200,135,.4);
}
.vp-knob{
  position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;
  background:#fff8e6;box-shadow:0 0 0 3px rgba(233,200,135,.22),0 1px 4px rgba(0,0,0,.65);
  opacity:0;transition:opacity .15s ease;
}
.vp-progress:hover .vp-knob,
.vp-progress:focus-visible .vp-knob,
.vp-progress.is-dragging .vp-knob{opacity:1}

.vp-row{display:flex;align-items:center;gap:3px}
.vp-btn{
  height:30px;min-width:30px;padding:0 6px;border:0;background:transparent;
  color:#e7e2d6;border-radius:7px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  font-size:12px;text-decoration:none;
  transition:background .15s,color .15s;
}
.vp-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.vp-btn:focus-visible{outline:2px solid rgba(233,200,135,.55);outline-offset:1px}
.vp-btn .mdi{font-size:18px;line-height:1}
.vp-time{font-size:12px;color:#cfc9bd;font-variant-numeric:tabular-nums;letter-spacing:.3px;margin-left:2px;white-space:nowrap}
.vp-gap{flex:1}

.vp-textbtn span{font-size:11.5px}
.vp-textbtn[aria-pressed="true"]{color:#f3dca6;background:rgba(233,200,135,.14)}
.vp-next{
  color:#f6e2b4;border:1px solid rgba(233,200,135,.38);
  background:linear-gradient(180deg,rgba(233,200,135,.16),rgba(233,200,135,.08));
  padding:0 10px;
}
.vp-next:hover{background:linear-gradient(180deg,rgba(233,200,135,.28),rgba(233,200,135,.14));color:#fff8e6}
.vp-rate{font-weight:600;min-width:36px;color:#e7e2d6}

/* 音量：悬停展开滑杆 */
.vp-vol{display:flex;align-items:center}
.vp-vol input[type="range"]{
  width:0;opacity:0;margin:0;height:4px;accent-color:#d9b46a;cursor:pointer;
  transition:width .2s ease,opacity .2s ease;
}
.vp-vol:hover input[type="range"],
.vp-vol input[type="range"]:focus{width:64px;opacity:1;margin-left:4px}

/* 全屏时铺满，圆角去掉 */
.vp-stage:fullscreen{aspect-ratio:auto;height:100%;border-radius:0;border-color:transparent;max-height:none}
.vp-stage:-webkit-full-screen{aspect-ratio:auto;height:100%;border-radius:0;max-height:none}

@media (max-width:820px){
  .vp-layout{grid-template-columns:1fr}
  .vp-cats{display:grid;grid-template-columns:repeat(3,1fr);max-height:none;overflow:visible}
  .vp-cat{padding:0 8px;gap:5px;font-size:11px}
  .vp-cat .mdi{font-size:14px}
  .vp-stage{aspect-ratio:4/5;margin-top:24px}
  .vp-ctl{padding:20px 10px 8px}
  .vp-textbtn span{display:none}          /* 手机只留图标，省地方 */
  .vp-rate,.vp-home{display:none}         /* 倍速和返回首页手机上用不到 */
  .vp-vol input[type="range"]{display:none}
  .vp-bigplay{width:60px;height:60px;font-size:26px}
  .vp-time{font-size:11.5px}
}