/* =========================================================================
   layout.css —— 页面外壳 + 设计稿坐标
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--shell-bg-2) 0%, var(--shell-bg) 62%),
    var(--shell-bg);
  font: 400 14px/1.5 "Inter", system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #eee;
  -webkit-font-smoothing: antialiased;
}

/* ---- 外壳：把 414px 的手机画布居中，并在窗口过矮时整体缩小 ---------- */
.player-shell {
  display: grid;
  place-items: center;
}

.phone-frame {
  /* 外层盒子跟着缩放，避免缩放后仍占据原尺寸把页面撑开 */
  width: calc(var(--phone-w) * var(--shell-scale));
  height: calc(var(--phone-w) * (var(--design-h) / var(--design-w)) * var(--shell-scale));
}

.phone {
  position: relative;
  width: var(--phone-w);
  height: calc(var(--phone-w) * (var(--design-h) / var(--design-w)));
  overflow: hidden;
  border-radius: 30px;
  box-shadow: var(--shell-shadow);
  transform: scale(var(--shell-scale));
  transform-origin: 0 0;
  background: var(--a2-bg);
}

/* ---- 舞台：设计稿原始坐标系 1242 × 2701 ---------------------------- */
.stage {
  position: absolute;
  inset: 0 auto auto 0;
  width: calc(var(--design-w) * 1px);
  height: calc(var(--design-h) * 1px);
  transform: scale(var(--stage-scale));
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--a2-bg);
  user-select: none;
  -webkit-user-select: none;
}

/* ---- 图层：所有坐标 = 设计稿像素 ------------------------------------ */
.layer {
  position: absolute;
  margin: 0;
  padding: 0;
}

.layer--bg       { left: 0;       top: 0;       width: 1242px;   height: 2701px;   }
.layer--record   { left: 195px;   top: 1034.8px; width: 852.39px; height: 852.39px; }
.layer--text     { left: 0;       top: 0;       width: 1242px;   height: 2701px;   }
.layer--logo     { left: 544px;   top: 205px;   width: 154.19px; height: 138.21px; }
.layer--slogan   { left: 170px;   top: 1978px;  width: 898.03px; height: 67.9px;   }
.layer--progress { left: 95px;    top: 2183px;  width: 1054.97px; height: 33.68px; }

/* 内联 SVG 一律填满各自图层 */
.layer > svg,
.layer > .vinyl-spin > svg,
.ctrl__art > svg {
  display: block;
  width: 100%;
  height: 100%;
}