/* ============================================================
   RX 现代视频播放器（player.css）
   纯自定义控件：自适应手机/电脑，深色半透明、简约现代
   ============================================================ */
.rx-player {
  --rx-accent: #d946ef;
  --rx-accent2: #a855f7;
  position: relative; width: 100%; background: #000; overflow: hidden;
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  outline: none;
}
.rx-player video { display: block; width: 100%; height: auto; background: #000; }

/* 手势层（透明，覆盖整个画面） */
.rx-stage { position: absolute; inset: 0; z-index: 5; touch-action: none; }

/* 顶部/底部渐变 */
.rx-gradient-top, .rx-gradient-bottom {
  position: absolute; left: 0; right: 0; z-index: 6; pointer-events: none;
  opacity: 1; transition: opacity .25s;
}
.rx-gradient-top { top: 0; height: 56px; background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent); }
.rx-gradient-bottom { bottom: 0; height: 86px; background: linear-gradient(to top, rgba(0,0,0,.72), transparent); }

.rx-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 8;
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  pointer-events: none;
}
.rx-title { color: rgba(255,255,255,.92); font-size: 13.5px; font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 底部控制条 */
.rx-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
  padding: 0 10px 8px; display: flex; flex-direction: column; gap: 2px;
}
.rx-controls-row { display: flex; align-items: center; gap: 4px; }

/* 进度条 */
.rx-progress {
  position: relative; width: 100%; height: 16px; cursor: pointer;
  display: flex; align-items: center; touch-action: none;
}
.rx-bar {
  position: relative; width: 100%; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.28); overflow: visible;
  transition: height .12s;
}
.rx-progress:hover .rx-bar, .rx-progress.dragging .rx-bar { height: 6px; }
.rx-buffered { position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: rgba(255,255,255,.35); border-radius: 999px; }
.rx-played { position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, var(--rx-accent2), var(--rx-accent));
  border-radius: 999px; }
.rx-scrubber {
  position: absolute; top: 50%; left: 0; width: 13px; height: 13px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.5); transform: translate(-50%,-50%) scale(0);
  transition: transform .12s;
}
.rx-progress:hover .rx-scrubber, .rx-progress.dragging .rx-scrubber { transform: translate(-50%,-50%) scale(1); }

/* 按钮 */
.rx-btn {
  flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; background: transparent; color: rgba(255,255,255,.92);
  border-radius: 8px; cursor: pointer; padding: 0;
  transition: background .15s, transform .12s;
}
.rx-btn:hover { background: rgba(255,255,255,.16); }
.rx-btn:active { transform: scale(.92); }
.rx-btn svg { width: 20px; height: 20px; fill: currentColor; }
.rx-btn.rx-rate { width: auto; min-width: 44px; font-size: 13px; font-weight: 700; padding: 0 8px; }
.rx-time { font-size: 12.5px; color: rgba(255,255,255,.9); font-variant-numeric: tabular-nums;
  font-family: Consolas, monospace; padding: 0 6px; white-space: nowrap; }
.rx-spacer { flex: 1; }

/* 中央播放按钮 */
.rx-center {
  position: absolute; inset: 0; z-index: 7; display: grid; place-items: center;
  pointer-events: none;
}
.rx-center-btn {
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(0,0,0,.42); border: 1.5px solid rgba(255,255,255,.55);
  display: grid; place-items: center; color: #fff;
  backdrop-filter: blur(4px); transition: transform .15s, background .15s;
}
.rx-center-btn svg { width: 34px; height: 34px; fill: #fff; transform: translateX(2px); }
.rx-player.is-playing .rx-center { opacity: 0; }
.rx-player:not(.is-playing):hover .rx-center-btn { transform: scale(1.06); background: rgba(0,0,0,.55); }

/* 加载圈 */
.rx-spinner { width: 46px; height: 46px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.25); border-top-color: #fff; animation: rxspin .8s linear infinite; }
@keyframes rxspin { to { transform: rotate(360deg); } }
.rx-player:not(.is-loading) .rx-spinner { display: none; }
.rx-player.is-loading .rx-center-btn { display: none; }

/* 快进（长按）遮罩提示 */
.rx-ff {
  position: absolute; top: 50%; left: 50%; z-index: 9; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(0,0,0,.6); padding: 14px 22px; border-radius: 14px; color: #fff;
  pointer-events: none;
}
.rx-ff svg { width: 40px; height: 40px; fill: #fff; }
.rx-ff b { font-size: 16px; letter-spacing: 1px; }
.rx-player:not(.is-ff) .rx-ff { display: none; }

/* 双击快进/快退 涟漪 */
.rx-ripple { position: absolute; top: 0; left: 0; z-index: 7; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transform: translate(-50%,-50%); color: #fff; }
.rx-ripple svg { width: 30px; height: 30px; fill: rgba(255,255,255,.95); }
.rx-ripple b { font-size: 13px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.rx-ripple::before { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
  border-radius: 50%; background: rgba(255,255,255,.35); transform: translate(-50%,-50%);
  animation: rxripple .55s ease-out forwards; }
@keyframes rxripple { from { width: 12px; height: 12px; opacity: .9; } to { width: 86px; height: 86px; opacity: 0; } }
.rx-ripple { animation: rxfade .7s ease-out forwards; }
@keyframes rxfade { 0%,70% { opacity: 1; } 100% { opacity: 0; } }

/* 音量/亮度 竖向提示 */
.rx-meter {
  position: absolute; top: 50%; left: 50%; z-index: 9; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: rgba(0,0,0,.6); padding: 14px 18px; border-radius: 14px; color: #fff;
}
.rx-meter svg { width: 30px; height: 30px; fill: #fff; }
.rx-meter b { font-size: 15px; }
.rx-player:not(.is-meter) .rx-meter { display: none; }

/* 拖动进度预览时间 */
.rx-scrub-tip { position: absolute; bottom: 22px; left: 0; z-index: 9; transform: translateX(-50%);
  background: rgba(0,0,0,.78); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 6px;
  font-family: Consolas, monospace; pointer-events: none; white-space: nowrap; }
.rx-player:not(.is-scrubbing) .rx-scrub-tip { display: none; }

/* 控件自动隐藏 */
.rx-player.hide-controls .rx-gradient-top,
.rx-player.hide-controls .rx-gradient-bottom,
.rx-player.hide-controls .rx-topbar,
.rx-player.hide-controls .rx-controls { opacity: 0; }
.rx-player.hide-controls .rx-controls,
.rx-player.hide-controls .rx-topbar { pointer-events: none; }

/* 移动端微调 */
@media (max-width: 600px) {
  .rx-btn { width: 34px; height: 34px; }
  .rx-btn svg { width: 19px; height: 19px; }
  .rx-center-btn { width: 60px; height: 60px; }
  .rx-time { font-size: 11.5px; padding: 0 3px; }
  .rx-btn.rx-pip { display: none; }
}

/* ---------- 全屏：铺满屏幕并保持比例 ---------- */
.rx-player:fullscreen, .rx-player.is-fullscreen { width: 100%; height: 100%; }
.rx-player:fullscreen video, .rx-player.is-fullscreen video {
  width: 100%; height: 100%; object-fit: contain;
}

/* 电脑「网页级全屏」：全屏对象是 documentElement，播放器以 fixed 铺满视口，
   音乐等悬浮控件仍在其上层可见、可拖动 */
body.rx-webfs .rx-player.is-fullscreen {
  position: fixed; inset: 0; z-index: 9990;
  width: 100vw; height: 100vh; border-radius: 0;
}
body.rx-webfs .rx-player.is-fullscreen video {
  width: 100%; height: 100%; object-fit: contain;
}
/* 全屏闲置时统一隐藏光标（移动鼠标即恢复） */
body.rx-hide-cursor, body.rx-hide-cursor * { cursor: none !important; }

/* ---------- 后台缓冲：非阻塞小药丸（右上角） ---------- */
.rx-bgbuf {
  position: absolute; top: 12px; right: 12px; z-index: 18;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(10, 8, 20, .62); border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .9); font-size: 12px; line-height: 1;
  pointer-events: none; opacity: 0; transform: translateY(-6px);
  transition: opacity .25s, transform .25s;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-variant-numeric: tabular-nums;
}
.rx-bgbuf.show { opacity: 1; transform: translateY(0); }
.rx-bgbuf-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255, 255, .35); border-top-color: var(--rx-accent);
  animation: rxspin .75s linear infinite;
}
.rx-bgbuf-txt { white-space: nowrap; }

/* ---------- 播放失败兜底面板 ---------- */
.rx-center-err { display:none; flex-direction:column; align-items:center; gap:11px; color:#fff; text-align:center; padding:0 18px }
.rx-player.is-error .rx-center-err { display:flex }
.rx-player.is-error .rx-spinner, .rx-player.is-error .rx-center-btn { display:none }
.rx-err-ico { width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,.55);display:grid;place-items:center;font-size:22px;font-weight:700;opacity:.9 }
.rx-err-txt { font-size:13.5px; color:rgba(255,255,255,.88) }
.rx-err-btns { display:flex; gap:10px }
.rx-err-btn { border:1px solid rgba(255,255,.3); background:rgba(255,255,.08); color:#fff; font-size:12.5px; padding:7px 16px; border-radius:999px; cursor:pointer; transition:background .15s }
.rx-err-btn:hover { background:rgba(255,255,255,.18) }

/* ---------- 播放失败兜底面板（增强：标题 / 复制主按钮 / 复制成功提示） ---------- */
/* 失败时视频无内在尺寸会令容器塌陷、兜底弹窗被挤到顶部；错误态固定 16:9 舞台，保证弹窗居中完整 */
.rx-player.is-error { aspect-ratio: 16 / 9; min-height: 200px; }
.rx-player.is-error video { display: none; }
.rx-center-err { padding:22px 24px; max-width:88%;
  background:rgba(16,12,32,.74); border:1px solid rgba(255,255,255,.14); border-radius:20px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 18px 60px rgba(0,0,0,.45); }
.rx-err-title { font-size:17px; font-weight:800; letter-spacing:.5px; color:#fff; line-height:1.2 }
.rx-err-txt { line-height:1.7; max-width:340px }
.rx-err-btns { flex-wrap:wrap; justify-content:center }
.rx-err-btn { padding:8px 18px; transition:background .15s,transform .15s }
.rx-err-btn:hover { transform:translateY(-1px) }
.rx-err-btn.rx-err-copy { border:none; background:linear-gradient(135deg,var(--rx-accent2),var(--rx-accent)); color:#fff; font-weight:700; box-shadow:0 8px 22px rgba(217,70,239,.38) }
.rx-err-btn.rx-err-copy:hover { filter:brightness(1.08) }
/* 重试 / 打开链接：同主题玻璃描边样式（覆盖任何旧版残留的高饱和底色，三按钮风格统一） */
.rx-err-btn.rx-err-retry, .rx-err-btn.rx-err-open {
  border:1px solid rgba(217,70,239,.55); background:rgba(168,85,247,.14); color:#f5d0fe;
}
.rx-err-btn.rx-err-retry:hover, .rx-err-btn.rx-err-open:hover { background:rgba(168,85,247,.28); color:#fff }
/* 错误态隐藏快进 / 后台缓冲等悬浮提示，避免兜底面板信息干扰 */
.rx-player.is-error .rx-ff, .rx-player.is-error .rx-bgbuf, .rx-player.is-error .rx-meter { display:none }
.rx-err-copied { font-size:12.5px; color:#86efac; display:flex; align-items:center; gap:5px }
.rx-err-copied::before { content:'✓'; font-weight:800 }
@media (max-width:600px){ .rx-center-err{ padding:18px; gap:9px } .rx-err-title{ font-size:15.5px } .rx-err-txt{ font-size:12.5px } .rx-err-btn{ padding:8px 14px; font-size:12px } }

/* ============================================================
   外链 / 网盘跳转面板（直链自动在线播放，分享页自动跳转）
   ============================================================ */
.rx-jump {
  position: relative; width: 100%;
  aspect-ratio: 16 / 9; min-height: 240px;
  display: grid; place-items: center; padding: 22px;
  color: #fff; overflow: hidden;
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(168,85,247,.34), transparent 60%),
    radial-gradient(100% 120% at 80% 120%, rgba(217,70,239,.26), transparent 55%),
    linear-gradient(160deg, #140d26 0%, #0b0817 55%, #160a24 100%);
}
.rx-jump::before { /* 细网格，呼应赛博风 */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image:
    linear-gradient(rgba(168,85,247,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,.16) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(120% 120% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 120% at 50% 40%, #000 30%, transparent 78%);
}
.rx-jump-card {
  position: relative; z-index: 1; width: min(560px, 100%);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  padding: 26px 28px; border-radius: 20px;
  background: rgba(18, 12, 34, .62);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: rxJumpIn .42s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes rxJumpIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.rx-jump-ico {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, #a855f7, #d946ef);
  box-shadow: 0 10px 30px rgba(217, 70, 239, .42), inset 0 1px 0 rgba(255,255,255,.35);
}
.rx-jump-title { font-size: 18px; font-weight: 800; letter-spacing: .5px; }
.rx-jump-txt { font-size: 13.5px; line-height: 1.75; color: rgba(255,255,255,.82); max-width: 460px; }
.rx-jump-url {
  width: 100%; font-size: 12px; line-height: 1.5; color: rgba(233, 213, 255, .9);
  background: rgba(0,0,0,.28); border: 1px solid rgba(168,85,247,.28); border-radius: 10px;
  padding: 8px 12px; word-break: break-all; font-family: Consolas, monospace;
}
.rx-jump-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
.rx-jump-btns .btn { min-width: 132px; }
.rx-jump-hint { min-height: 18px; font-size: 12.5px; color: #86efac; }
.rx-jump-hint:empty { min-height: 0; }
.rx-jump-spin {
  width: 46px; height: 46px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.22); border-top-color: #d946ef;
  animation: rxspin .8s linear infinite;
}
.rx-link-loading .rx-jump-card { gap: 14px; }
@media (max-width: 600px) {
  .rx-jump { min-height: 220px; padding: 14px; }
  .rx-jump-card { padding: 20px 16px; gap: 10px; border-radius: 16px; }
  .rx-jump-ico { width: 54px; height: 54px; }
  .rx-jump-ico svg { width: 32px; height: 32px; }
  .rx-jump-title { font-size: 16px; }
  .rx-jump-txt { font-size: 12.5px; }
  .rx-jump-btns .btn { min-width: 0; flex: 1 1 132px; }
}