/* =========================================================================
   positions.css —— 版面位置控制面板（全部用百分比）
   -------------------------------------------------------------------------
   这个文件在最后加载，会覆盖 layout.css 里的固定像素坐标。
   你只改这个文件就能调所有元素的位置和大小，不用碰其它 CSS。

   ▍坐标规则
     横轴（left / width）  ：百分比 = 画布宽度的百分之几
     纵轴（top  / height） ：百分比 = 画布高度的百分之几
     画布默认铺满屏幕，所以「画布百分比」= 「屏幕百分比」。

   ▍每个元素四个参数
     --x  左边缘位置（画布宽度 %）        --w  宽度（画布宽度 %）
     --y  上边缘位置（画布高度 %）        --h  高度（画布高度 %）
     --h 写 auto（默认）= 高度按素材自身比例自动算，永不拉伸变形。

   ▍关于素材变形
     每个 SVG 都是按设计稿比例画好的，页面里默认保持它自己的比例。
     所以：盒子宽高比 ≠ 素材宽高比 时，画面会在盒子里居中留白。
     想让它刚好贴满盒子 → 把 --w 和 --h 调成下面的「素材比例」注释里的比值。

   ▍想恢复成「固定 414px 手机画布居中」
     把 --canvas-w 改成 414px、--canvas-h 改成 900.33px 即可，
     宽度超出屏幕时自动按窗口缩小（js/main.js 的 fitShell）。
   ========================================================================= */


/* ═══════════════════════════════════════════════════════════════════════
   0. 画布
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --canvas-w: 100%;          /* 画布宽度：100% = 铺满屏幕宽；也可写 414px / 60vw */
  --canvas-h: 100%;          /* 画布高度：100% = 铺满屏幕高；也可写 900.33px */
  --canvas-max-w: none;      /* 画布最大宽度，例如 520px 限制在桌面端不至于太宽 */
  --canvas-bg: var(--a2-bg); /* 画布底色：画布没盖住的地方（含任何素材留白）都显示这个色 */
}

/* ── 可选：锁定设计稿比例（1242 : 2701） ────────────────────────────────
   默认的 100% / 100% 会让画布铺满任意屏幕，元素按屏幕百分比重排 —— 手机竖屏
   都正常，但极宽的比例（横屏、桌面超宽屏）下，按「宽度百分比」定的尺寸会超过
   画布高度而溢出。如果你的页面要同时面对这些比例，把上面改成：

     --canvas-w: min(100vw, calc(100vh * 0.45983));   0.45983 = 1242 ÷ 2701
     --canvas-h: min(100vh, calc(100vw * 2.17473));   2.17473 = 2701 ÷ 1242
     --canvas-max-w: none;

   画布会保持设计稿比例，并在屏幕里居中，永远不会溢出或拉伸。
   ──────────────────────────────────────────────────────────────────── */

html,
body {
  height: 100%;
  min-height: 0;             /* 覆盖 layout.css 的 min-height:100vh —— 移动端 100vh
                                比实际可见区域高，会把画布顶出去、露出外面的底色 */
  margin: 0;
  padding: 0;
  overflow: hidden;          /* 画布铺满时不出现滚动条 */
  background: var(--canvas-bg);
}

body { display: block; }

/* 画布外层：固定铺满「可见视口」，而不是文档流高度。
   这样手机上地址栏收起/展开都不会在顶部或底部留出一条缝。
   画布比屏幕小时（锁定比例模式）自动居中留边。 */
.player-shell {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  background: var(--canvas-bg);
}

.phone-frame {
  width: var(--canvas-w);
  height: var(--canvas-h);
  max-width: var(--canvas-max-w);
}

.phone {
  width: 100%;
  height: 100%;
  border-radius: 0;          /* 铺满时不需要圆角；固定画布模式可改回 30px */
  box-shadow: none;
  background: var(--canvas-bg);
  transform: none;
}

/* 画布本体：取消 1242×2701 的固定尺寸与 scale，变成可任意比例的容器。
   同时作为容器查询上下文，供进度条气泡用 cqw 单位跟随画布缩放。
   底色兜底：任何素材因比例不符而留白时，露出的是画布底色而不是页面外的深色。 */
.stage {
  width: 100%;
  height: 100%;
  transform: none;
  background: var(--canvas-bg);
  container-type: size;
}


/* ═══════════════════════════════════════════════════════════════════════
   1. 通用规则：所有图层 / 按钮都读自己的 --x / --y / --w / --h
   ═══════════════════════════════════════════════════════════════════════ */

/* 内容列：除背景以外的所有元素都装在这一层里。
   竖屏时它就是整个画布（inset:0），所以百分比和「相对画布」完全等价；
   横屏时它收成一条居中竖列（见文件末尾第 3 节）。
   背景层是它的兄弟节点，不参与收窄，永远铺满整屏。 */
.stage__content {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.stage .layer,
.stage .ctrl {
  left: var(--x, 0%);
  top: var(--y, 0%);
  width: var(--w, 100%);
  height: var(--h, auto);
}


/* ═══════════════════════════════════════════════════════════════════════
   2. 逐元素参数
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 背景：整页底色 + 顶部深紫横条（横向拉伸铺满整屏） ─────────────────
   原版背景是一张满版 SVG（1242 × 2701，里面只有两个纯色矩形）。
   SVG 靠 preserveAspectRatio="none" 也能拉伸，但不同渲染环境对 SVG 缩放的
   处理不一致，横条有可能没铺到边。既然是两个纯色矩形，直接用 CSS 铺色
   更可靠 —— 宽度显式写成 100%，横向拉伸就是必然结果。

   做法：把背景层从「内容列的兄弟节点」提升成「独立的整屏层」：
     · position: fixed 钉在可见视口上，不受内容列的 overflow:hidden 裁剪
     · 100vw × 100dvh 显式指定尺寸，任何屏幕都通栏
     · 底色用 background-color，深紫横条用 linear-gradient 硬色标画出来
   内容列（.stage__content）叠在它上面，所以内容列两侧露出的就是这层底色。

   横条高度 = 屏高 × 4.1126%（设计稿 111.08 ÷ 2701）。
   想让横条更高 → 把 --bg-bar-ratio 改大，比如 0.06 就是 6%。
   ⚠️ --bg-bar-ratio 必须写成**无单位小数**：渐变里用 calc(值 × 100%) 转成
      百分比。直接写 "4.1126%" 会让 calc 算不出来（CSS 里百分比不能当乘数）。 */
:root {
  --bg-bar-ratio: 0.041126;   /* 深紫横条占屏幕高度的比例 */
}

.layer--bg {
  position: fixed;            /* 钉在可见视口，脱离内容列 */
  inset: 0;
  left: 0;
  top: 0;
  width: 100vw;               /* ← 横向拉伸到整个视口宽度 */
  height: 100dvh;             /* 跟可见高度走，地址栏收起/展开都不留缝 */
  z-index: 0;

  background-color: var(--a2-bg);
  background-image: linear-gradient(
    to bottom,
    var(--a2-ink) 0,
    var(--a2-ink) calc(var(--bg-bar-ratio) * 100%),   /* 深紫横条 */
    transparent calc(var(--bg-bar-ratio) * 100%),     /* 硬色标，下面让底色透出 */
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;  /* ← 横向 100%：横条跟着屏幕一起拉宽 */
}

/* 原来内联在 index.html 里的那张背景 SVG 不再需要（已由上面的 CSS 色块接管）。
   用 display:none 而不是删 HTML：不用改 index.html，想换回图形背景时
   把这条规则删掉即可。 */
.stage .a2svg--bg { display: none; }

/* 内容列抬到背景层之上 */
.stage__content { z-index: 1; }

/* ── 黑胶唱片（会旋转） ──────────────────────────────────────────────
   素材比例：1 : 1（852.39 × 852.39）
   默认 --h: auto 时永远是正圆；若手动给 --h 请保持与 --w 等比例，
   否则唱片会被压成椭圆。 */
.layer--record {
  --x: 15.700%;
  --y: 38.312%;
  --w: 68.630%;
  --h: auto;
  aspect-ratio: 1 / 1;
}

/* ── 文字层（标题「紫胶时光」+ 手写英文 + 装饰音符 + 唱片旁的小音符） ──
   素材比例：1242.27 : 2701.06（满版，和背景同比例）
   注意：这层是「整页文字」，缩放到满版时会整体居中，标题会跟着动。
   如果只想要标题本身，可以把 --h/--y/--w 收窄到标题那一块。 */
.layer--text {
  --x: 0%;
  --y: 0%;
  --w: 100%;
  --h: 100%;
}

/* ── Logo ───────────────────────────────────────────────────────────
   素材比例：154.19 : 138.21 = 1.1156 : 1 */
.layer--logo {
  --x: 43.800%;
  --y: 7.590%;
  --w: 12.415%;
  --h: auto;
  aspect-ratio: 154.19 / 138.21;
}

/* ── 主张文案（a2 陪您一起奏响…） ────────────────────────────────────
   素材比例：898.03 : 67.9 = 13.226 : 1 */
.layer--slogan {
  --x: 13.688%;
  --y: 73.232%;
  --w: 72.305%;
  --h: auto;
  aspect-ratio: 898.03 / 67.9;
}


/* ── 进度条 ─────────────────────────────────────────────────────────
   素材比例：1054.97 : 33.68 = 31.32 : 1
   进度条是自绘的（轨道 + 填充线 + 圆点滑块），不是原始素材。
   只需要调这个盒子的 --x/--y/--w，内部几何会自动跟着换算：
     圆点起点 = 素材坐标 16.84；终点 = 1051.97                     */
.layer--progress {
  --x: 7.649%;
  --y: 80.822%;
  --w: 84.941%;
  --h: auto;
  aspect-ratio: 1054.97 / 33.68;
}

/* 进度条拖动命中区：宽度正好等于圆点可移动区间（16.84 → 1051.97）。
   改这里一般不需要，除非你想让可点范围比视觉轨道更宽/更窄。 */
.stage .progress__hit {
  left: 1.5963%;             /* 16.84 / 1054.97 */
  width: 98.1197%;           /* (1051.97 - 16.84) / 1054.97 */
  height: 220%;              /* 比轨道高，方便手指点按 */
  top: 50%;
  transform: translateY(-50%);
}

/* 拖动时的时间气泡：字号跟随画布缩放。
   cqmin = 画布短边（竖屏时是宽、横屏时是高），两边得到的气泡一样大。 */
.stage .progress__tip {
  font-size: 12px;           /* 老浏览器回退值 */
  font-size: clamp(11px, 3.25cqmin, 16px);
  padding: 0.3em 0.65em;
  bottom: calc(100% + 1em);
  border-radius: 999px;
  line-height: 1.15;
}


/* ── 播放按钮 ───────────────────────────────────────────────────────
   素材比例：116.22 : 163.68 = 0.710 : 1 */
.ctrl--play {
  --x: 21.498%;
  --y: 83.747%;
  --w: 9.358%;
  --h: auto;
  aspect-ratio: 116.22 / 163.68;
}

/* ── 循环按钮 ───────────────────────────────────────────────────────
   素材比例：127.63 : 163.67 = 0.780 : 1 */
.ctrl--loop {
  --x: 68.196%;
  --y: 83.747%;
  --w: 10.276%;
  --h: auto;
  aspect-ratio: 127.63 / 163.67;
}


/* ═══════════════════════════════════════════════════════════════════════
   3. 横屏（宽 > 高）
   -----------------------------------------------------------------------
   横屏不改排布 —— 和竖屏完全一样的「一条竖列从上到下」，
   只是把内容收成一条保持设计稿比例（1242 : 2701）的竖列、按屏幕高度缩放，
   居中摆放；两侧空出来的地方由背景色（--canvas-bg）补上。
   背景层没有被收进这条竖列，所以它会横向拉伸铺满整屏 ——
   顶部那条深紫横条依然是通栏的。

   这样上面第 2 节的所有百分比数字在横屏下原样生效，不用另写一套。
   ═══════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) {

  /* 内容列 = 设计稿比例 × 屏幕高度，水平居中。
     --col-h: 内容列高度（= 屏幕高度 = 100vh）
     --col-w: 内容列宽度 = 高度 × (1242 / 2701) = 高度 × 0.45983 */
  .stage {
    --col-h: 100vh;
    --col-w: calc(var(--col-h) * 0.45983);
  }

  .stage__content {
    left: calc(50% - var(--col-w) / 2);
    top: 0;
    width: var(--col-w);
    height: var(--col-h);
  }
}