/* ========= 外壳页 + 常驻音乐播放器 · 卡通风 =========
   配色 / 字体复用 style.css 里的 :root 变量。
   布局：iframe 占满视口上方，播放器固定在底部。 */

:root { --mb-h: 86px; }   /* 播放器条高度 */

html, body.shell {
  height: 100%;
  margin: 0;
  overflow: hidden;        /* 外壳不滚动，滚动发生在 iframe 内部 */
}

/* 全站背景循环视频 + 压暗层（铺在 iframe 下方） */
.bg-video {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.bg-scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  /* 压暗保证文字可读，同时仍能看见视频在动；想更亮/更暗调这里的透明度 */
  background: linear-gradient(180deg, rgba(8,22,44,.32), rgba(8,22,44,.48));
}

/* 顶部角落导航按钮（素材自带深藏青斜角底） */
.nav-corner {
  position: fixed; top: -10px; z-index: 60;   /* 上移：按下动效不会露出顶部缝隙 */
  width: clamp(150px, 16vw, 210px); aspect-ratio: 323 / 133;
  padding: 0; border: 0; background: top center/contain no-repeat; cursor: pointer;
  filter: none;
  transition: transform .1s, filter .1s;
}
.nav-corner:hover { filter: brightness(1.12); }
.nav-corner:active { transform: translateY(4px); }   /* 只下沉、不缩放，避免穿帮 */
.nav-back { left: 0;  background-image: url("../../Design/素材/UI框按钮/back.png"); }
.nav-home { right: 0; background-image: url("../../Design/素材/UI框按钮/home.png"); }

/* 内容区 iframe（透明，让背景视频透上来） */
.view-frame {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: var(--mb-h);
  width: 100%;
  height: calc(100% - var(--mb-h));
  border: 0;
  display: block;
  z-index: 2;
  background: transparent;
}

/* ---------- 底部播放器条 ---------- */
.music-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--mb-h);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-top: var(--stroke) solid var(--ink);
  box-shadow: 0 -5px 0 rgba(0,0,0,.3), 0 -14px 26px rgba(0,0,0,.4);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}

/* 收起：播放器滑下隐藏，内容区铺到底，右下角出现展开把手 */
body.mb-collapsed .music-bar { transform: translateY(110%); }
body.mb-collapsed .view-frame { bottom: 0; height: 100%; }
.mb-show-handle {
  position: fixed; right: 16px; z-index: 102;
  bottom: calc(var(--mb-h) + 14px);     /* 音乐栏打开时浮在其上方 */
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  font-size: 24px; color: var(--ink); cursor: pointer;
  background: linear-gradient(180deg, #ffe277, var(--accent) 55%, var(--accent-d));
  border: var(--stroke) solid var(--ink); box-shadow: 0 5px 0 var(--ink);
  transition: transform .08s, box-shadow .08s, filter .1s, bottom .32s cubic-bezier(.4,0,.2,1);
}
.mb-show-handle:hover { filter: brightness(1.1); }
.mb-show-handle:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.mb-show-handle.muted { background: var(--panel2); color: var(--muted); }
body.mb-collapsed .mb-show-handle { bottom: 16px; }   /* 收起时落到右下角 */

/* 播放模式按钮高亮一点点（区别于普通控制键） */
.mb-mode { font-size: 18px; }
.mb-mode.active-mode { color: var(--accent2); }
/* 收起按钮放在最右，略小 */
.mb-collapse { width: 40px; height: 40px; font-size: 16px; flex: none; }

/* 设置齿轮按钮（右下角、音乐按钮正上方，与音乐键同宽对齐） */
.gear-btn {
  position: fixed; right: 16px; z-index: 102;
  bottom: calc(var(--mb-h) + 82px);
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  font-size: 25px; color: #fff; cursor: pointer;
  background: var(--panel2); border: var(--stroke) solid var(--ink); box-shadow: 0 5px 0 var(--ink);
  transition: transform .12s, box-shadow .08s, filter .1s, bottom .32s cubic-bezier(.4,0,.2,1);
}
.gear-btn:hover { filter: brightness(1.12); transform: rotate(35deg); }
.gear-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
body.mb-collapsed .gear-btn { bottom: 84px; }

/* 齿轮弹出小菜单 */
.gear-menu {
  position: fixed; right: 82px; z-index: 103; bottom: calc(var(--mb-h) + 82px);
  display: none; flex-direction: column; gap: 6px; min-width: 150px; padding: 8px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: var(--stroke) solid var(--ink); border-radius: 14px; box-shadow: var(--hard);
  transition: bottom .32s cubic-bezier(.4,0,.2,1);
}
body.mb-collapsed .gear-menu { bottom: 84px; }
.gear-menu.open { display: flex; }
.gear-item {
  text-align: left; height: 40px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  font-family: var(--font-display); font-weight: 400; font-size: 15px; color: #fff;
  background: var(--panel2); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
}
.gear-item:hover { filter: brightness(1.12); }
.gear-item:active { transform: translateY(3px); box-shadow: none; }

/* 图标大小编辑：顶部确定 / 取消条 */
.icon-edit-bar {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%); z-index: 120;
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: var(--stroke) solid var(--ink); border-top: 0; border-radius: 0 0 16px 16px; box-shadow: var(--hard);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.icon-edit-bar.open { transform: translate(-50%, 0); }
.ieb-label { font-weight: 800; font-size: 13px; color: var(--muted); }
.ieb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 18px; border-radius: 10px; cursor: pointer;
  font-family: var(--font-display); font-weight: 400; font-size: 15px;
  border: var(--stroke) solid var(--ink); box-shadow: 0 4px 0 var(--ink);
}
.ieb-btn .ic { flex: none; }
.ieb-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.ieb-cancel { background: var(--panel2); color: #fff; }
.ieb-ok { background: linear-gradient(180deg, #ffe277, var(--accent) 60%); color: var(--ink); box-shadow: 0 4px 0 var(--ink); }  /* 厚度保持黑色 */
/* 作者模式顶部条复用 .icon-edit-bar；导出键用青蓝区别于完成键（底边统一黑色） */
.ieb-export { background: linear-gradient(180deg, #5fe0ff, var(--accent2) 60%); color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.author-edit-bar .ieb-label { max-width: 46vw; }

/* 左侧：旋转唱片 + 曲名 */
.mb-info {
  display: flex; align-items: center; gap: 14px;
  min-width: 0; flex: 1 1 240px;
}
.mb-disc {
  flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px; color: var(--ink);
  background: radial-gradient(circle at 50% 50%, #fff 0 18%, var(--accent) 19% 100%);
  border: var(--stroke) solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}
.mb-disc.spin { animation: mb-spin 3.2s linear infinite; }
@keyframes mb-spin { to { transform: rotate(360deg); } }

.mb-text { min-width: 0; }
.mb-title {
  font-family: var(--font-display);
  font-size: 17px; letter-spacing: .3px; color: #fff;
  text-shadow: 0 2px 0 var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mb-sub { font-size: 12px; color: var(--muted); font-weight: 700; margin-top: 2px; }

/* 中间：三个控制按钮 */
.mb-controls { display: flex; align-items: center; gap: 12px; flex: none; }
.mb-btn {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center;
  font-size: 20px; color: #fff; cursor: pointer;
  background: var(--panel2);
  border: var(--stroke) solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .08s, box-shadow .08s, filter .1s;
}
.mb-btn:hover { filter: brightness(1.12); }
.mb-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.mb-btn.mb-play {
  width: 58px; height: 58px; font-size: 24px;
  color: var(--ink);
  background: linear-gradient(180deg, #ffe277, var(--accent) 55%, var(--accent-d));
}

/* 右侧：进度条 */
.mb-progress {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 280px; min-width: 0;
}
.mb-time {
  font-family: var(--font-display); font-size: 13px;
  color: var(--muted); flex: none; width: 42px; text-align: center;
}
.mb-track {
  position: relative; flex: 1 1 auto; height: 14px; min-width: 60px;
  border-radius: 999px; cursor: pointer;
  background: var(--bg);
  border: var(--stroke) solid var(--ink);
  overflow: hidden;
}
.mb-fill {
  position: absolute; inset: 0; width: 0%;
  background: linear-gradient(180deg, #6fe0ff, var(--accent2) 60%, var(--accent2-d));
  border-right: 2px solid rgba(255,255,255,.5);
  transition: width .12s linear;
}

/* 窄屏：隐藏进度条，保留核心控制 */
@media (max-width: 720px) {
  :root { --mb-h: 78px; }
  .mb-progress { display: none; }
  .mb-sub { display: none; }
  .music-bar { gap: 12px; padding: 0 14px; }
}