/* ===== 影厅 · Video Hall ===== */
:root{
  --bg:#08090d;
  --bg-soft:#0d0f16;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);
  --text:#e9ebf2;
  --muted:#98a0b4;
  --dim:#6b7385;
  --accent:#6366f1;
  --accent-2:#a855f7;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 18px 48px -12px rgba(0,0,0,.75);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif;

  /* ---- 玻璃质感 ---- */
  --glass-fill:linear-gradient(150deg,rgba(255,255,255,.085),rgba(255,255,255,.026) 52%,rgba(255,255,255,.045));
  --glass-blur:blur(18px) saturate(165%);
  --glass-edge:rgba(255,255,255,.16);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(255,255,255,.035);
  --glass-drop:0 16px 42px -18px rgba(0,0,0,.72);
}

/* 给玻璃一点可折射的内容：几团柔和的彩色光晕 */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(680px 420px at 8% 4%,  rgba(99,102,241,.30), transparent 62%),
    radial-gradient(560px 380px at 94% 10%, rgba(168,85,247,.24), transparent 60%),
    radial-gradient(720px 520px at 78% 88%, rgba(34,211,238,.14), transparent 64%),
    radial-gradient(520px 380px at 14% 92%, rgba(236,72,153,.12), transparent 62%);
  filter:blur(6px);
}

*{box-sizing:border-box}
[hidden]{display:none !important}

/* ---------- 隐藏入口（点头像） ----------
   刻意不做任何暗示：没有 pointer 光标、没有 title 提示、
   没有 hover 变化、没有锁图标。头像看起来就是一张头像。 */
.avatar-box{cursor:default}

html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  background-image:
    radial-gradient(1100px 620px at 12% -12%, rgba(99,102,241,.20), transparent 62%),
    radial-gradient(900px 520px at 92% 0%, rgba(168,85,247,.15), transparent 60%);
  background-attachment:fixed;
}
h1,h2{margin:0;line-height:1.3}
button{font-family:inherit}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:11px;border:1px solid var(--line);
  background:var(--surface);color:var(--text);font-size:13.5px;font-weight:500;
  cursor:pointer;transition:.18s ease;white-space:nowrap;
}
.btn:hover{background:var(--surface-2);border-color:var(--line-strong);transform:translateY(-1px)}
.btn:active{transform:none}
.btn-ghost{background:transparent}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:transparent;color:#fff;font-weight:600;
  box-shadow:0 8px 22px -8px rgba(99,102,241,.85);
}
.btn-primary:hover{filter:brightness(1.09);background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.btn-primary:disabled{opacity:.55;cursor:default;filter:none}

/* ---------- 布局 ---------- */
.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(18px,2.4vw,32px);
  align-items:start;
  max-width:720px;
  margin:0 auto;
  padding:clamp(18px,2.6vw,32px) clamp(16px,3vw,34px) 56px;
}
.player-col{min-width:0}

/* ---------- 头像与寄语 ---------- */
.profile{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:flex-start;
  gap:13px;padding:2px 0 4px;
}
.avatar-box{
  width:58px;height:58px;flex:none;
  border-radius:50%;overflow:hidden;
  border:1.5px solid rgba(255,255,255,.18);
  box-shadow:0 8px 22px -10px rgba(0,0,0,.85),0 0 0 4px rgba(99,102,241,.12);
  background:var(--bg-soft);
}
.avatar{
  display:block;width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.52);transform-origin:50% 24%;
}
.motto{
  margin:0;padding:0;
  font-size:clamp(14px,1.7vw,15.5px);
  font-weight:500;letter-spacing:.8px;line-height:1.7;
  color:var(--text);
}
.motto::before{
  content:'';display:inline-block;vertical-align:middle;
  width:22px;height:1px;margin-right:11px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34));
}

/* ---------- 播放器舞台（玻璃外框） ---------- */
.stage-wrap{
  position:relative;
  background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);
  border-radius:20px;
  padding:clamp(10px,1.5vw,18px);
  box-shadow:var(--glass-inner),var(--shadow);
}
.stage-wrap::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;
  background:linear-gradient(155deg,rgba(255,255,255,.46),rgba(255,255,255,.06) 32%,rgba(255,255,255,0) 56%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.stage{
  position:relative;
  width:100%;
  aspect-ratio:var(--ar,16/9);
  max-width:calc(var(--ar-num,1.7778) * 78vh);
  margin-inline:auto;
  background:#000;
  border-radius:12px;
  overflow:hidden;
  user-select:none;
  isolation:isolate;
  touch-action:pan-y;                 /* 纵向交给浏览器滚动，横向用于切换视频 */
}
/* 真正参与滑动的层：被 stage 的 overflow 裁切，不会露出黑边 */
.stage-inner{
  position:absolute;inset:0;
  will-change:transform,opacity;
  transition:transform .34s cubic-bezier(.22,.88,.3,1),opacity .34s ease;
}
.stage-inner.drag{transition:none}
/* ---------- 切换动画：缩放推进 ----------
   退场 0.13s / 进场 0.42s —— 退场必须远短于进场，否则中间会出现
   一段"两片都在淡但屏上没内容"的黑场。
   zoomIn 的起始透明度给 .12 而不是 0：衔接瞬间就算有一帧空档，
   底色也不是纯黑，而是上一片的残影，视觉上是连续的不是断开的。 */
.stage-inner.enter{animation:zoomIn .42s cubic-bezier(.22,1,.36,1)}
.stage-inner.leave{transition:transform .13s ease-in,opacity .13s ease-in}
@keyframes zoomIn{
  from{transform:scale(1.14);opacity:.12}
  to{transform:none;opacity:1}
}

/* ---------- 位置小圆点 ---------- */
.dots{display:flex;justify-content:center;align-items:center;gap:7px;padding:11px 0 1px}
.dot{
  width:7px;height:7px;flex:none;padding:0;
  border:none;border-radius:50%;
  background:rgba(255,255,255,.26);cursor:pointer;
  transition:width .24s cubic-bezier(.2,.9,.3,1.4),background .2s ease;
}
.dot:hover{background:rgba(255,255,255,.5)}
.dot.on{width:18px;border-radius:99px;background:rgba(255,255,255,.95)}

/* ---------- 播放列表（只看缩略图） ---------- */
.strip{margin-top:10px}
.strip-list{
  display:flex;gap:9px;overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:none;
}
.strip-list::-webkit-scrollbar{display:none}
.chip{
  flex:none;padding:0;line-height:0;
  border-radius:11px;cursor:pointer;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.11)}
.chip.on{
  border-color:rgba(167,139,250,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 1px rgba(139,92,246,.22);
}
.chip-thumb{
  display:block;width:46px;height:62px;
  border-radius:10px;
  background:#0b0c11 center/cover no-repeat;
  display:grid;place-items:center;color:#5a6172;
}
.stage video{
  display:block;width:100%;height:100%;
  object-fit:contain;background:#000;
  cursor:pointer;
}
.stage.paused{cursor:default}

/* 中心播放键 */
.big-play{
  position:absolute;inset:0;margin:auto;
  width:76px;height:76px;border-radius:50%;
  display:grid;place-items:center;
  border:none;cursor:pointer;
  background:rgba(12,13,18,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;
  box-shadow:0 12px 40px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,255,255,.22);
  transition:transform .2s cubic-bezier(.2,.9,.3,1.3),opacity .22s ease;
  padding-left:4px;z-index:3;
}
.big-play:hover{transform:scale(1.09)}
.big-play:active{transform:scale(.97)}
.stage.playing .big-play{opacity:0;pointer-events:none;transform:scale(.7)}

/* 加载中 */
.spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;z-index:4;pointer-events:none}
.spinner span{
  width:11px;height:11px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  animation:bounce 1.05s infinite ease-in-out;
}
.spinner span:nth-child(2){animation-delay:.16s}
.spinner span:nth-child(3){animation-delay:.32s}
@keyframes bounce{0%,80%,100%{transform:scale(.5);opacity:.45}40%{transform:scale(1);opacity:1}}

/* 错误 */
.stage-error{
  position:absolute;inset:0;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:26px;text-align:center;
  background:rgba(8,9,13,.93);
  color:var(--muted);
}
.stage-error svg{color:#f87171;margin-bottom:2px}
.stage-error p{margin:0;font-size:15px;color:var(--text);font-weight:600}
.stage-error-tips{
  list-style:none;margin:10px 0 0;padding:0;
  max-width:330px;text-align:left;
  display:flex;flex-direction:column;gap:7px;
}
.stage-error-tips:empty{display:none}
.stage-error-tips li{
  position:relative;padding:8px 11px 8px 30px;
  border-radius:9px;
  background:var(--surface);border:1px solid var(--line);
  font-size:12.5px;line-height:1.55;color:var(--muted);
}
.stage-error-tips li::before{
  content:attr(data-n);position:absolute;left:10px;top:8px;
  width:14px;height:14px;border-radius:50%;
  background:rgba(99,102,241,.22);color:#a5b4fc;
  font-size:9.5px;font-weight:700;text-align:center;line-height:14px;
}
.stage-error-tips li b{color:var(--text);font-weight:600}
.stage-error code{
  padding:1px 5px;border-radius:4px;
  background:var(--surface-2);border:1px solid var(--line);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;
}

/* ---------- 控制条 ---------- */
.controls{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:38px 14px 11px;
  background:linear-gradient(to top,rgba(5,6,9,.94) 8%,rgba(5,6,9,.72) 45%,transparent);
  opacity:0;transform:translateY(8px);
  transition:opacity .25s ease,transform .25s ease;
  pointer-events:none;
}
/* 显示条件只有两个：暂停，或刚点过（2.6 秒内）。
   :hover 必须用 @media (hover:hover) 圈起来 —— 触屏浏览器点一下之后
   :hover 会「粘住」不消失，不加这层判断的话控制条会在手机上永久常驻。 */
.stage.paused .controls,
.stage.touch-active .controls{opacity:1;transform:none;pointer-events:auto}
@media (hover:hover){
  .stage:hover .controls{opacity:1;transform:none;pointer-events:auto}
}

/* 进度条 */
.progress{position:relative;height:20px;display:flex;align-items:center;cursor:pointer;margin-bottom:2px}
.progress-track{position:relative;width:100%;height:4.5px;border-radius:99px;background:rgba(255,255,255,.20);transition:height .16s ease}
.progress:hover .progress-track{height:7px}
.progress-buffer{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;background:rgba(255,255,255,.30)}
.progress-played{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.progress-knob{
  position:absolute;top:50%;left:0;
  width:13px;height:13px;border-radius:50%;
  background:#fff;transform:translate(-50%,-50%) scale(0);
  box-shadow:0 2px 8px rgba(0,0,0,.6);
  transition:transform .16s ease;
}
.progress:hover .progress-knob,.progress:focus-visible .progress-knob{transform:translate(-50%,-50%) scale(1)}
.progress:focus-visible{outline:none}
.progress:focus-visible .progress-track{box-shadow:0 0 0 3px rgba(99,102,241,.45)}
.scrub-tip{
  position:absolute;bottom:26px;transform:translateX(-50%);
  padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.86);
  font-size:12px;font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap;
  border:1px solid var(--line);
}

.controls-row{display:flex;align-items:center;gap:5px}
.spacer{flex:1}

.ctl{
  display:grid;place-items:center;
  width:36px;height:36px;flex:none;
  border:none;border-radius:9px;background:transparent;color:#fff;
  cursor:pointer;transition:background .16s ease,transform .16s ease;padding:0;
}
.ctl:hover{background:rgba(255,255,255,.14)}
.ctl:active{transform:scale(.92)}
.ctl-text{width:auto;padding:0 11px;font-size:12.5px;font-weight:600;letter-spacing:.3px;white-space:nowrap}

/* 音量条常驻：触屏没有 hover，靠 hover 展开等于没法调 */
.volume{display:flex;align-items:center;width:78px;overflow:hidden;transition:width .22s ease,opacity .22s ease}
#volume{-webkit-appearance:none;appearance:none;width:70px;height:4px;border-radius:99px;background:rgba(255,255,255,.25);cursor:pointer;margin:0 8px}
#volume::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.5)}
#volume::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:#fff;cursor:pointer}

.time{font-size:12.5px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.82);display:flex;gap:4px;padding:0 8px;white-space:nowrap}
.time b{font-weight:600;color:#fff}
.time i{font-style:normal;color:rgba(255,255,255,.42)}

/* 下拉菜单 */
.menu-wrap{position:relative}
.menu{
  position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);
  min-width:132px;padding:5px;
  background:rgba(16,18,25,.97);
  border:1px solid var(--line-strong);border-radius:11px;
  box-shadow:0 16px 40px rgba(0,0,0,.6);
  z-index:12;
}
.menu button{
  display:block;width:100%;text-align:left;
  padding:8px 11px;border:none;border-radius:7px;
  background:transparent;color:var(--text);font-size:13px;cursor:pointer;white-space:nowrap;
}
.menu button:hover{background:var(--surface-2)}
.menu button.on{color:#a5b4fc;font-weight:600}

/* ---------- 卡片（玻璃） ---------- */
.card{
  position:relative;
  background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);
  border-radius:var(--radius);
  box-shadow:var(--glass-inner),var(--glass-drop);
  padding:18px;
  margin-top:20px;
}
.card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;
  background:linear-gradient(155deg,rgba(255,255,255,.42),rgba(255,255,255,.06) 34%,rgba(255,255,255,0) 58%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.card h2{font-size:14.5px;font-weight:600;letter-spacing:.3px;margin-bottom:12px}

.link{color:#a5b4fc;font-style:normal;font-weight:500}

/* ---------- 提示条 ---------- */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(14px);
  z-index:200;
  padding:11px 20px;border-radius:12px;
  background:rgba(18,20,28,.97);border:1px solid var(--line-strong);
  box-shadow:0 16px 44px rgba(0,0,0,.6);
  font-size:13.5px;opacity:0;transition:.26s cubic-bezier(.2,.9,.3,1.1);
  pointer-events:none;max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 页脚 ---------- */
.foot{
  text-align:center;padding:24px 16px 40px;
  color:var(--dim);font-size:12.5px;
  border-top:1px solid var(--line);
}

/* ---------- 全屏 ---------- */
.stage:fullscreen{width:100vw;height:100vh;max-width:none;border-radius:0;aspect-ratio:auto;background:#000}
.stage:-webkit-full-screen{width:100vw;height:100vh;max-width:none;border-radius:0;background:#000}
.stage:fullscreen video{width:100%;height:100%}
.stage:fullscreen .big-play{width:88px;height:88px}

/* ---------- 响应式 ---------- */
@media (max-width:1040px){
  .stage{max-width:calc(var(--ar-num,1.7778) * 74vh)}
}
@media (max-width:640px){
  body{font-size:14.5px}
  .layout{padding-left:14px;padding-right:14px}
  .stage{max-width:calc(var(--ar-num,1.7778) * 80vh)}
  .chip-thumb{width:42px;height:56px}
  .volume{width:54px}
  #volume{width:46px;margin:0 4px}
  .time{padding:0 4px;font-size:11.5px}
  .ctl{width:32px;height:32px}
  .ctl-text{padding:0 8px;font-size:11.5px}
  .controls{padding:30px 8px 8px}
  .big-play{width:62px;height:62px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ⚠ 不要再藏 #minimax-floating-ball（平台注入的角标）。
   2026-10 微信以《微信外部链接内容管理规范》19.3「限制页面浏览渠道」为由，
   认定本站「微信展示效果和其他浏览器展示效果实质性不一致」，
   封禁了 mcode.cn 在微信内的直接访问，申诉被驳回。

   这里只做三件事：调层级、降透明度当水印、去掉底色贴到右下角。
   角标始终渲染、始终可见、始终可点，且各浏览器表现完全一致。悬停时恢复不透明。

   平台给角标的底色是 background:#222222（那不是边框，就是深色药丸底）。
   这里改成透明，只留 logo + MiniMax 文字当水印；悬停时给回一个深色小圆角片，
   明确它是个能点的元素，不是装饰。

   层级对照（本站）：背景 -1 / 页面正文 静态层 / 播放器 .stage-inner 3 /
   控制条 5 / 菜单 12 / toast 200。
   取 10 = 高于全部正文与播放器，低于 toast。

   ⚠ 两条底线，都不能越：
     1. z-index 不得低于 -1（页面背景），opacity 不得再低。
        一旦被背景完全遮住、或淡到看不见，就等于 display:none，
        又回到 19.3。规范第 20 条规定恶意对抗不再提供申诉渠道。
        .35 是当前下限，再低就逼近「看不见」，改之前先真机看一眼。
        同理，署名文字 .minimax-ball-text 不得隐藏 —— 那是品牌归属本体。
     2. 不得加 pointer-events:none。角标点不了 = 屏蔽平台原生功能，
        撞规范 19.4。它必须始终可点。
        关闭按钮 × 也已被移除（见文件末尾规则）—— 那是本次改动里离 19.4
        最近的一步：它删掉了平台自带的一个功能。之所以仍可接受，是因为
        角标本身完整保留、始终可见、署名清晰、点击仍跳转平台，
        删的只是"关掉它"这个动作，不产生任何隐藏效果。
        但请不要进一步把角标整个 display:none —— 那就真的是对抗了。

   角标真实结构（别猜类名，平台注入的）：
     #minimax-floating-ball
       └ .minimax-ball-content   ← 只装 logo + 文字，gap:8px
           ├ .minimax-logo-wave  ← 图形，去掉的就是这个
           └ .minimax-ball-text   ← "Created by MiniMax Agent" 完整署名
       └ .minimax-close-icon      ← 关闭按钮，是 ball-content 的兄弟节点，
                                    不是子节点，所以动 logo 不会影响它

   只去掉 logo 图形、保留完整署名字样：品牌归属仍然明确可读。
   底色、层级、透明度都不涉及"藏"，署名文字也始终可点。

   !important 是必需的，不能删，两个原因：
     1. 平台把它的 <style> 注入在 </body> 前，也就是位于我们这个 <link> 之后。
        两条规则特异性相同（都是 0-1-0-0），后写的赢 —— 不加 !important
        的话平台的 9999 会直接盖掉这里的值。
     2. 平台的 initFloatingBall() 会用内联样式 ball.style.opacity 做淡入动画
        （0 → 1）。内联的非 !important 样式压不过样式表里的 !important，
        所以 .35 才拦得住。 */
#minimax-floating-ball{
  z-index:10 !important;
  opacity:.35 !important;
  bottom:0 !important;
  right:0 !important;
  padding:4px 6px !important;
  background:transparent !important;
  border-radius:0 !important;
}
#minimax-floating-ball:hover{
  opacity:1 !important;
  background:rgba(40,40,40,.9) !important;
  border-radius:12px 0 0 0 !important;
}
/* 只留文字：去掉 logo 图形，并收掉它留下的 8px 间距 */
#minimax-floating-ball .minimax-logo-wave{display:none !important}
#minimax-floating-ball .minimax-ball-content{gap:0 !important}
/* 去掉关闭按钮 ×，文字贴到角上（padding 已收到 4px/6px） */
#minimax-floating-ball .minimax-close-icon{display:none !important}