/* 录制模式（?rec=1）—— 把界面收成一张固定像素的「卡片」：
   歌曲信息、物量条 + 4×4 面板，其余元素（曲库、控制条、加载进度、
   窄屏抽屉）全部不参与录制。

   构图是「类横屏」：整卡 1830 × 1372（≈ 4:3 宽扁），顶部一条信息栏，
   4×4 面板在下方居中。逐帧录制时由 tools/rec 按 #recCard 的包围盒截图，
   所以这里所有尺寸都写成固定 px，不跟窗口大小走 —— 换台机器录出来的
   构图必须一样。

   这些 px 是 1830×1372 的基准，--rec-scale 将字体、间距和面板统一缩放。
   默认 1440×1080 直接绘制较小 Canvas，原尺寸可通过 rw/rh 指定。

   卡内的字号 / 间距取播放器样式的 2 倍（播放器 26px 的曲名 → 52px），
   用 1 倍设备像素比截出来就等价于「播放器在 2 倍屏上」的清晰度。 */

html.rec, html.rec body {
  overflow: hidden;
  background: var(--void);
}

/* 整页只剩卡片：侧边栏 / 控制条 / 抽屉栏都不进来 */
html.rec #app { display: none !important; }

#recCard {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font);
  font-size: calc(28px * var(--rec-scale, 1));
}

/* —— 歌曲信息 —— */
#recCard .now-playing {
  display: grid;
  grid-template-columns: calc(264px * var(--rec-scale, 1)) calc(404px * var(--rec-scale, 1)) minmax(0, 1fr);
  gap: calc(36px * var(--rec-scale, 1));
  align-items: center;
  padding: calc(28px * var(--rec-scale, 1)) calc(46px * var(--rec-scale, 1)) calc(20px * var(--rec-scale, 1));
}

#recCard .cover-wrap {
  width: calc(264px * var(--rec-scale, 1));
  height: calc(264px * var(--rec-scale, 1));
  border-width: calc(2px * var(--rec-scale, 1));
  border-radius: calc(24px * var(--rec-scale, 1));
  align-self: center;
}

#recCard .np-main {
  gap: calc(12px * var(--rec-scale, 1));
  justify-content: center;
}

#recCard .np-kicker {
  font-size: calc(22px * var(--rec-scale, 1));
  font-weight: 700;
  letter-spacing: 0.16em;
}

#recCard .np-main h2 {
  font-size: calc(52px * var(--rec-scale, 1));
  font-weight: 700;
  line-height: 1.15;
}

#recCard .np-artist {
  font-size: calc(26px * var(--rec-scale, 1));
  margin-bottom: calc(8px * var(--rec-scale, 1));
}

#recCard .diff-row {
  gap: calc(16px * var(--rec-scale, 1));
  flex-wrap: nowrap;
  margin-bottom: 0;
}

#recCard .diff-btn {
  padding: calc(12px * var(--rec-scale, 1)) calc(28px * var(--rec-scale, 1));
  font-size: calc(24px * var(--rec-scale, 1));
  border-width: calc(2px * var(--rec-scale, 1));
  border-radius: calc(999px * var(--rec-scale, 1));
}

#recCard .np-side {
  justify-content: flex-end;
  align-self: end;
  margin-bottom: calc(14px * var(--rec-scale, 1));
  gap: calc(16px * var(--rec-scale, 1));
}

/* 直接搬入播放器物量图；不复制统计或播放进度逻辑。 */
#recCard .density-wrap {
  margin: 0;
  border-radius: 0;
  cursor: default;
}
#recCard .density-hud { display: none; }

#recCard .stat-row {
  grid-template-columns: repeat(3, max-content) minmax(0, 1fr);
  gap: calc(20px * var(--rec-scale, 1)) calc(50px * var(--rec-scale, 1));
}

#recCard .stat label {
  font-size: calc(20px * var(--rec-scale, 1));
}

#recCard .stat value {
  font-size: calc(36px * var(--rec-scale, 1));
  font-weight: 700;
}

/* —— 面板：吃掉卡片剩下的高度，水平居中 —— */
#recCard .panel-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 calc(46px * var(--rec-scale, 1)) calc(16px * var(--rec-scale, 1));
}

#recCard .panel-bezel {
  padding: calc(28px * var(--rec-scale, 1));
  border-width: calc(2px * var(--rec-scale, 1));
  border-radius: calc(40px * var(--rec-scale, 1));
}

#recCard .panel-inner {
  width: calc(962px * var(--rec-scale, 1)) !important;
  height: calc(962px * var(--rec-scale, 1)) !important;
  gap: calc(16px * var(--rec-scale, 1));
  padding: calc(20px * var(--rec-scale, 1));
  border-width: calc(2px * var(--rec-scale, 1));
  border-radius: calc(28px * var(--rec-scale, 1));
}

#recCard .pad { border-radius: calc(16px * var(--rec-scale, 1)); }

#recCard .marker-canvas {
  border-radius: calc(28px * var(--rec-scale, 1));
}

#recCard .panel-glow {
  border-radius: calc(52px * var(--rec-scale, 1));
}

#recCard .pad .idx {
  right: calc(12px * var(--rec-scale, 1));
  bottom: calc(8px * var(--rec-scale, 1));
  font-size: calc(18px * var(--rec-scale, 1));
}

/* 成片不带底部说明条（参考构图里没有它） */

/* 逐帧截图时页面时钟是「定格」的，CSS 过渡 / 动画跟的是真实时间，
   留着它们只会让某一帧捕捉到过度中的中间状态。判定态本身就够显眼，
   这里全部关掉，保证每一帧都只由 chart 时间决定。 */
#recCard .pad,
#recCard .pad::after,
#recCard .panel-glow,
#recCard .diff-btn {
  transition: none !important;
  animation: none !important;
}

#recCard .song-share-btn { display: none; }