/* ==========================================================================
   墨竹印象 · 沉浸式唱片页
   整个界面在这里退到最暗，只留一张墨盘、一杆唱臂、一列歌词。
   这是本设计唯一"用力"的地方：其余界面保持安静。
   ========================================================================== */

.stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-stage);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background:
    radial-gradient(1200px 700px at 32% 40%, rgba(57, 211, 196, 0.1), transparent 62%),
    radial-gradient(900px 620px at 78% 72%, rgba(190, 50, 39, 0.1), transparent 60%),
    linear-gradient(160deg, #090c0b, #060807 70%);
  animation: stage-in var(--dur-slow) var(--ease-settle) both;
}
@keyframes stage-in {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: none; }
}
.stage[hidden] { display: none; }

.stage__wash {
  /* 底纹（水墨山脊）已撤除。
     原因：它是一张位图，铺在画面正中必然露出自己的矩形边界——试过两次渐隐遮罩都没消掉
     （遮罩挂在元素上，而图只占元素底部一小块，渐隐区落在图外面）。
     它是纯装饰：撤掉不影响盘面、歌词、播放的任何功能，反而让舞台更干净。 */
  position: absolute;
  inset: 0;
  z-index: -1;
  background: none;
  opacity: 0;
}

/* 唱片页底部的寺院剪影：退到最暗处，只留轮廓 */

.stage__top {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  max-width: 1340px;
  margin: 0 auto;
}
.stage__brand { display: flex; align-items: center; gap: 8px; font-size: var(--fs-tiny); letter-spacing: 0.2em; color: var(--paper-faint); }
.stage__brand-cn { font-family: var(--font-cn-display); letter-spacing: 0.3em; color: var(--paper-dim); }
.stage__brand-dot { color: var(--seal); }
.stage__brand-ip { color: var(--river); }
.stage__quality { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--paper-faint); letter-spacing: 0.1em; }

.stage__body {
  /* 盘面居中：与寺院的中心对齐，形成"寺院是地方、唱片是主体"的一幅画。
     歌词不再是并列的一栏（那样盘面必然偏左），改成右侧浮栏。 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-6);
  min-height: 0;
  /* 整组居中：以前三栏铺满整宽，唱片贴左、右半屏是空的。
     加一层居中容器，沉浸页在宽屏上才像"一幅画"，而不是"从左往右排完就没了"。 */
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
}

/* ------------------------------------------------------------------ 唱盘 */

.deck {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}
.deck__platter { position: relative; width: min(336px, 33vh); aspect-ratio: 1; }

/* 背光：把墨盘从暗底里托出来，避免整页糊成一片 */
.deck__platter::before {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(57, 211, 196, 0.1), rgba(4, 7, 15, 0) 66%),
    radial-gradient(circle at 68% 74%, rgba(190, 50, 39, 0.1), rgba(4, 7, 15, 0) 58%);
  filter: blur(8px);
  pointer-events: none;
}

.deck__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background:
    /* 沟槽：细密同心纹，一亮一暗，才有黑胶的密度感 */
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.05) 0 1px,
      rgba(255, 255, 255, 0) 1px 2.6px,
      rgba(255, 255, 255, 0.022) 2.6px 3.4px,
      rgba(255, 255, 255, 0) 3.4px 5.2px),
    /* 主光：左上角一道柔和高光（影棚打光） */
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 46%),
    /* 盘体：中心略亮、外缘压暗 */
    radial-gradient(circle at 50% 50%, #1a1c22 0 26%, #0c0d11 58%, #05060a 100%);
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.95),
      /* 鎏金盘边：原来是一道纸白细线 + 青色微光，改成金线 + 金色外溢 */
      0 0 0 1.5px rgba(232, 200, 126, 0.85),
      0 0 0 3px rgba(10, 16, 28, 0.92),
      0 0 46px -4px rgba(200, 162, 83, 0.5),
      0 0 14px -2px rgba(232, 200, 126, 0.35),
    inset 0 0 90px rgba(0, 0, 0, 0.5);
  animation: spin 26s linear infinite;
  animation-play-state: paused;
}
/* 银环：给墨盘一个清楚的边，不然深色封面会融进背景 */
.deck__disc::before {
  content: "";
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  border: 1px solid rgba(228, 235, 240, 0.14);
  box-shadow: inset 0 0 0 1px rgba(4, 7, 15, 0.4);
  pointer-events: none;
  z-index: 2;
}
body.is-playing .deck__disc { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 金属盘：一道缓转的流光，让唱片即使暂停也"活着"（受光在金属表面游走） */
.deck__platter::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(255, 255, 255, 0.10) 26deg, transparent 64deg);
  mix-blend-mode: screen;
  animation: platter-sheen 9s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes platter-sheen { to { transform: rotate(360deg); } }

/* 盘面还没加载出来时的底：山水色，不闪空白 */
.deck__art-placeholder {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, rgba(22, 41, 74, 0.9), rgba(4, 7, 15, 0.98) 68%),
    linear-gradient(180deg, #0a1428, #04070f);
}

/* 内联进来的盘面：必须显式给尺寸，否则会按 SVG 的 800 原始尺寸溢出，
   只露出左上角一小块（这正是第一版经幡跑到画面边上的原因） */
/* 专属盘面本身就是一幅画，刻纹压淡，只留一点"这是张唱片"的暗示 */
.deck__disc.is-disc-face .deck__etch { opacity: 0.32; }

.deck__disc > .disc-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

.deck__disc > img,
.deck__disc > .cover-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: saturate(88%) contrast(104%) brightness(0.92);
}

.deck__etch { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; }

/* 唱片中心：只有一个轴孔。曲名交给旁边的标题，别压在盘面上 */
.deck__spindle {
  /* 主轴原本 11px 的深色圆点，正好压在圆标的塔瓶中央，在盘面上读成一块黑斑。
     改成真唱片那样的小"轴孔"：更小、带一点金属高光，不再抢画面。 */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #6b7480, #2a3038 60%, #0d1117 100%);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(10, 16, 28, 0.9), inset 0 1px 1px rgba(242, 245, 248, 0.25);
  z-index: 3;
}

.deck__shadow {
  position: absolute;
  inset: auto 8% -6% 8%;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7), transparent 72%);
  filter: blur(6px);
}

/* ------------------------------------------------------------------ A9 造型
   盘面从黑胶唱盘改为 B&O Beosound A9 一体式黑音箱：大黑圆盘 + 三根实木斜撑腿，
   盘心嵌一块圆形"屏幕"显示当前句歌词。唱臂保留（turntable 元素），盘心屏不随盘转。 */
.deck { position: relative; }

/* 三脚架：从圆盘下缘向地面撑开（腿比圆盘长，下截露在盘外），脚垫是金属小球 */
.deck__legs {
  position: absolute;
  left: 50%;
  top: 78%;
  width: 0;
  height: 0;
  z-index: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.deck__leg {
  position: absolute;
  left: -5px;
  top: 0;
  width: 11px;
  height: clamp(170px, 26vh, 300px);
  transform-origin: top center;
  border-radius: 6px 6px 4px 4px;
  background: linear-gradient(90deg, #34241680 0%, #6b4f3a 34%, #92704e 56%, #4f3826 100%);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.55), inset 1px 0 1px rgba(255, 255, 255, 0.18);
}
.deck__leg::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  width: 16px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #d6dde4, #6b7480 66%, #2a3038 100%);
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.5);
}
.deck__leg--l { transform: rotate(-32deg); }
.deck__leg--r { transform: rotate(32deg); }
.deck__leg--b { transform: rotate(0deg); }

/* 盘心屏：石黑底（中性石墨，只掺一点主色当呼吸），白字居中显示当前句 */
.deck__screen {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 63%;
  height: 63%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 13% 15%;
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(circle at 50% 42%, #1d2023 0%, #0c0e10 62%, #050607 100%);
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--tint, #2b3540) 12%, #17191c) 0%, #0b0c0e 62%, #050607 100%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(232, 200, 126, 0.16), 0 0 34px -6px rgba(232, 200, 126, 0.12);
}
.deck__screen::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.06), transparent 44%);
  pointer-events: none;
}
/* 盘心保留佛塔：白塔刻在石黑屏上。screen 混合让白塔线条以亮色清晰浮现，
   saturate 压掉画里夜空的蓝，保持石黑的中性；z-index:-1 垫在歌词后面。 */
.deck__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: url("../assets/disc-face.svg") center / 175% no-repeat;
  mix-blend-mode: screen;
  opacity: 0.9;
  filter: saturate(0.45);
  pointer-events: none;
}
.deck__screen-lyric {
  position: relative;
  margin: 0;
  max-width: 100%;
  font-family: var(--font-cn-display);
  font-size: clamp(15px, 1.9vh, 22px);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--paper);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
  opacity: 0.94;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  will-change: opacity, transform, filter;
}
/* 盘心屏当前句：随唱程以 --p 提亮 */
.deck__screen.is-active .deck__screen-lyric {
  filter: brightness(calc(0.82 + var(--p, 0) * 0.3));
}

/* 电影感：盘心屏当前句换句柔入 + 极轻呼吸（不碰 filter，避免覆盖上面的 --p 亮度） */
@keyframes screen-lyric-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 0.94; transform: translateY(0); }
}
@keyframes screen-breathe {
  0%, 100% { opacity: 0.94; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); }
  50% { opacity: 0.86; text-shadow: 0 1px 22px rgba(242, 245, 248, 0.22); }
}
.deck__screen-lyric.lyric-flip { animation: screen-lyric-in 520ms var(--ease-settle) both; }
.deck__screen.is-active .deck__screen-lyric:not(.lyric-flip) { animation: screen-breathe 6s ease-in-out infinite; }
.deck__screen.is-active .deck__screen-lyric.lyric-flip {
  animation: screen-lyric-in 520ms var(--ease-settle) both, screen-breathe 6s 520ms ease-in-out infinite;
}

/* 减少动态效果：关掉所有呼吸/抬入/旋转，但 --p 进度与墨色照常走，信息不丢 */
@media (prefers-reduced-motion: reduce) {
  .deck__disc { animation: none !important; }
  .deck__platter::after { animation: none !important; }
  .lyric.is-current { animation: none !important; }
  .deck__screen-lyric { animation: none !important; }
}

/* 唱臂：起落是整页唯一被精心设计过的动作 */
.deck__arm {
  position: absolute;
  top: -4%;
  right: 2%;
  width: 30%;
  max-width: 104.3px;
  transform-origin: 80% 13%;
  transform: rotate(-26deg);
  transition: transform 900ms var(--ease-settle);
  filter: drop-shadow(0 9.5px 15.8px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}
body.is-playing .deck__arm { transform: rotate(2deg); }

/* ------------------------------------------------------------- 曲目信息 */

.stage__info { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
/* 曲名上方的红色题签已移到左侧标尺节点上，这里不再重复 */
.stage__title {
  font-family: var(--font-cn-display);
  font-size: clamp(26px, 3.2vw, 46px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: 0.02em;
}
/* 艺人行：小一号、字距拉开，长名可换行；行尾拖一道向右渐隐的短分隔线 */
.stage__artist {
  position: relative;
  align-self: flex-start;
  max-width: 100%;
  padding: 2px 0 14px;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--paper-dim);
  letter-spacing: 0.1em;
}
.stage__artist::after {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin-top: 12px;
  background: linear-gradient(90deg, rgba(242, 245, 248, 0.3), transparent);
}
.stage__artist span { color: var(--paper-faint); }
.stage__specs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  margin-top: var(--sp-1);
}
.spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--paper-faint);
  border: 1px solid var(--line);
  background: rgba(4, 7, 15, 0.3);
  font-family: var(--font-mono);
}
.spec-chip--lossless { color: #7fe6d8; border-color: var(--line-seal); background: rgba(190, 50, 39, 0.1); }
.spec-chip--hires { color: #e4ebf0; border-color: rgba(228, 235, 240, 0.32); background: rgba(228, 235, 240, 0.07); }
.spec-chip--hq { color: #8fd0c8; border-color: rgba(57, 211, 196, 0.32); }
.spec-chip--online { color: var(--river); border-color: var(--line-bamboo); background: rgba(57, 211, 196, 0.07); }

.stage__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.actbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px var(--sp-4);
  border-radius: 99px;
  border: 1px solid var(--line-strong);
  font-size: var(--fs-tiny);
  letter-spacing: 0.06em;
  color: var(--paper-dim);
  background: rgba(4, 7, 15, 0.28);
  transition: all var(--dur-fast);
}
.actbtn .ico { width: 16px; height: 16px; }
.actbtn:hover { color: var(--paper); border-color: var(--paper-ghost); background: rgba(242, 245, 248, 0.04); }
/* 主按钮：喜欢。朱砂实底，是这排唯一的重色，视线先落在这里 */
.stage__actions .actbtn:first-child {
  color: #f4e3dd;
  border-color: transparent;
  background: linear-gradient(180deg, rgba(214, 74, 58, 0.92), rgba(168, 42, 30, 0.92));
  box-shadow: 0 4px 14px rgba(190, 50, 39, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.stage__actions .actbtn:first-child:hover {
  color: #fff;
  background: linear-gradient(180deg, rgba(224, 84, 66, 0.98), rgba(178, 46, 33, 0.98));
  box-shadow: 0 6px 18px rgba(190, 50, 39, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.stage__actions .actbtn.is-on {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, rgba(224, 84, 66, 1), rgba(178, 46, 33, 1));
  box-shadow: 0 6px 20px rgba(190, 50, 39, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.stage__actions .actbtn.is-on .ico { fill: currentColor; }

/* ------------------------------------------------- 盘面：风与光
   盘面是内联进 DOM 的 SVG，所以能用页面的 CSS 驱动；
   动效只给三处，且都很轻——一张会转的唱片上，动得多的东西看起来是坏的。
   1. 经幡：十面各自错开相位地飘，风力不齐才像真风
   2. 门里的酥油灯：极缓的呼吸
   3. 拉萨河：一线微光缓慢流过
   （系统开启"减少动态效果"时，tokens.css 会把所有时长压到 1ms，自然静止） */

/* 风是一道波，不是每面各自乱晃。
   周期统一，相位由 SVG 里注入的 --d 逐面递增——整排于是读成"风从一端走到另一端"。 */
.flag {
  transform-box: fill-box;
  transform-origin: top center;
  animation: flag-flutter 2.9s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  animation-delay: var(--d, 0s);
}
/* 每面错开相位与快慢：整排一起摆会像节拍器，不像风 */
.disc-face .flag:nth-of-type(1) { animation-duration: 2.4s; animation-delay: -0.15s; }
.disc-face .flag:nth-of-type(2) { animation-duration: 3.1s; animation-delay: -0.9s; }
.disc-face .flag:nth-of-type(3) { animation-duration: 2.2s; animation-delay: -1.6s; }
.disc-face .flag:nth-of-type(4) { animation-duration: 3.4s; animation-delay: -0.5s; }
.disc-face .flag:nth-of-type(5) { animation-duration: 2.7s; animation-delay: -2.1s; }
.disc-face .flag:nth-of-type(6) { animation-duration: 2.9s; animation-delay: -1.2s; }
.disc-face .flag:nth-of-type(7) { animation-duration: 2.5s; animation-delay: -0.4s; }
.disc-face .flag:nth-of-type(8) { animation-duration: 3.2s; animation-delay: -1.9s; }

/* 莲花环与真言环：各自极缓慢地漂移，且方向相反。
   唱片本身 26 秒转一圈，这两圈慢到几乎只是"活着的痕迹"——
   曼陀罗的动法，不是转盘的动法。 */
.disc-face .petals,
.disc-face .mantra {
  transform-box: view-box;
  transform-origin: 400px 400px;
}
.disc-face .petals { animation: petals-drift 240s linear infinite; }
.disc-face .mantra { animation: mantra-drift 300s linear infinite; }

@keyframes petals-drift {
  to { transform: rotate(360deg); }
}
@keyframes mantra-drift {
  to { transform: rotate(-360deg); }
}

/* 盘面四盏灯的相位（灯焰与明暗的统一规则见上方"门口的酥油灯"） */
.disc-face .butter-lamps > g:nth-of-type(1) .lamp-flame { animation-duration: 2.0s; animation-delay: -0.2s; }
.disc-face .butter-lamps > g:nth-of-type(2) .lamp-flame { animation-duration: 2.6s; animation-delay: -1.1s; }
.disc-face .butter-lamps > g:nth-of-type(3) .lamp-flame { animation-duration: 2.3s; animation-delay: -0.7s; }
.disc-face .butter-lamps > g:nth-of-type(4) .lamp-flame { animation-duration: 2.8s; animation-delay: -1.7s; }

@keyframes lamp-flicker {
  0%,
  100% { opacity: 0.72; transform: scaleY(1) scaleX(1); }
  35% { opacity: 1; transform: scaleY(1.12) scaleX(0.94); }
  62% { opacity: 0.85; transform: scaleY(0.94) scaleX(1.05); }
}

/* 僧人手上的念珠：一线金光的呼吸 */
.disc-face .mala { animation: lamp-breath 4s ease-in-out infinite; }

@keyframes flag-flutter {
  0% { transform: rotate(0deg) translateY(0) scaleY(1); }
  18% { transform: rotate(9deg) translateY(-0.7px) scaleY(0.9); }
  42% { transform: rotate(-5deg) translateY(0.5px) scaleY(1.08); }
  68% { transform: rotate(6.5deg) translateY(-0.4px) scaleY(0.95); }
  86% { transform: rotate(-2deg) translateY(0.2px) scaleY(1.03); }
  100% { transform: rotate(0deg) translateY(0) scaleY(1); }
}

/* 门口的酥油灯（盘面、首屏寺院通用） */
.butter-lamp { animation: lamp-breath 5.5s ease-in-out infinite; }

/* 灯焰：逐盏错相闪动，相位由 --d 给 */
.lamp-flame {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: lamp-flicker 2.2s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

/* 斗篷：主体被风掀得时而张、时而收，两个尖角各自摆——幅度给足，
   因为这件衣服的体量全在那两个角上；袍身与下裙不动，人还是站得住的。 */
.robe-cape {
  transform-box: fill-box;
  transform-origin: center top;
  animation: cape-billow 5.2s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
@keyframes cape-billow {
  0%, 100% { transform: scaleX(1) skewX(0deg) rotate(0deg); }
  20% { transform: scaleX(1.12) skewX(-3.4deg) rotate(-1.4deg); }
  46% { transform: scaleX(0.94) skewX(2.6deg) rotate(1.1deg); }
  72% { transform: scaleX(1.07) skewX(-2deg) rotate(-0.7deg); }
}

.cape-tip {
  transform-box: fill-box;
  animation: cape-tip-flap 4.2s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
.cape-tip--l { transform-origin: right center; }
.cape-tip--r { transform-origin: left center; animation-duration: 4.8s; animation-delay: -1.1s; }

@keyframes cape-tip-flap {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  24% { transform: rotate(13deg) translateY(-1.4px); }
  52% { transform: rotate(-7deg) translateY(0.9px); }
  78% { transform: rotate(8deg) translateY(-0.8px); }
}

/* 僧袍的下摆与披单：幅度小一档——它们是同一个人的衣角，不是旗子 */
.robe-hem {
  transform-box: fill-box;
  transform-origin: top center;
  animation: robe-hem-sway 4.2s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  animation-delay: var(--d, 0s);
}
.robe-cloth {
  transform-box: fill-box;
  transform-origin: right center;
  animation: robe-cloth-lift 5.4s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
@keyframes robe-hem-sway {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  30% { transform: rotate(-3.2deg) translateX(-0.7px); }
  62% { transform: rotate(2.4deg) translateX(0.6px); }
}
@keyframes robe-cloth-lift {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  28% { transform: rotate(-5deg) translateY(-0.9px); }
  66% { transform: rotate(3deg) translateY(0.4px); }
}

/* 桑烟：整缕极缓上升 + 明暗呼吸，读作"在烧着" */
/* ༀ：不旋转、不位移，只做极缓的明暗呼吸。
   它是这幅画的光源——光晕、脚下的光滩、喇嘛身上的边光，全部用同一个周期，
   于是明暗是一起变的：光在呼吸，被照到的地方跟着呼吸。 */
.om,
.om-glow,
.light-pool,
.monk-glow,
.monk-rim { animation: om-breath 6.5s ease-in-out infinite; }
@keyframes om-breath {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}

.incense {
  animation: incense-rise 7s ease-in-out infinite;
}
@keyframes incense-rise {
  0%, 100% { transform: translateY(0); opacity: 0.34; }
  50% { transform: translateY(-4px); opacity: 0.55; }
}
@keyframes lamp-breath {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1.15; }
}

.disc-face .river { animation: river-glint 7.5s ease-in-out infinite; }
@keyframes river-glint {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ------------------------------------------------------------------ 歌词 */

/* 版式（引首 / 画心 / 底轴、三栏栅格、间距）全部搬到 stage-layout.css。
   这里只留歌词自身的排版与动效。
   旧的"绝对定位侧栏"方案已删除：它靠 calc(50% + min(270px, 28vh, 47vw) + 14px)
   这类写死的公式对齐，而盘面尺寸后来被改过四次，公式早就对不上——
   实测左栏与盘面间距 131px、右栏与盘面间距 269px，全页出现 9 个互不相同的对齐边。 */

.lyrics-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: var(--sp-2);
  flex: none;
}
.lyrics-tools .chipbtn { padding: 4px 10px; font-size: var(--fs-micro); }
.lyrics-tools .chipbtn.is-on { color: var(--ink-0); background: var(--paper); border-color: transparent; }

.stage__lyrics {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  padding: var(--sp-4) var(--sp-2);
  /* 只留很窄的渐隐，别把能读的行吃掉 */
  mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
}
/* 整篇模式：从第一句开始读，不自动滚动 */
.stage__lyrics.is-full { scroll-behavior: auto; }
.lyric {
  font-family: var(--font-cn-display);
  /* 2026-10-10：写死的 17px → var(--fs-lead)。
     它是"看着最久的那一档"，却全站唯一不跟令牌走，于是放大全站时歌词纹丝不动。 */
  font-size: var(--fs-lead);
  line-height: 1.72;
  letter-spacing: 0.04em;
  color: rgba(201, 211, 219, 0.38);
  padding: 7px 0;
  opacity: 0.55;
  filter: none;   /* 不做景深模糊：歌词要始终清晰可读，层次交给明暗与字重 */
  transition: color var(--dur-mid) var(--ease-ink), transform var(--dur-mid) var(--ease-ink), opacity var(--dur-mid) var(--ease-ink), filter var(--dur-mid) var(--ease-ink);
  transform-origin: left center;
  will-change: opacity, transform, filter;
}
.lyric--idle { font-family: var(--font-cn-ui); font-size: var(--fs-small); color: var(--paper-ghost); line-height: 1.9; max-width: 34ch; }
/* 无时间轴的占位/纯文本/署名行不参与景深模糊，保持可读 */
.lyric--idle, .lyric--plain, .lyric--credit { filter: none; opacity: 1; }
/* ---------------------------------------------------------- 歌词的动效

   原则：动感来自"唱到哪儿"，不是来自抖动。
   每行每帧会写入一个 --p（0→1，这一行唱了几成），下面三件事都由它驱动：
     1. 左侧朱砂竖条从下往上"填"——这一行唱到几成，红条就有多满
     2. 句子本身：唱过的部分亮、没唱的部分暗，像墨顺着句子染过去
     3. 新的一句接上时轻轻抬起（墨落纸）
   系统开启"减少动态效果"时，过渡被压到 1ms，但进度依旧在走——信息不会丢。 */

.lyric.is-current {
  color: var(--paper);
  opacity: 1;
  filter: blur(0);
  transform: scale(1.08);
  font-weight: 600;
  text-shadow: 0 0 30px rgba(242, 245, 248, 0.28);
  animation: lyric-rise 420ms var(--ease-settle) both, lyric-breathe 5.5s 420ms ease-in-out infinite;
}

@keyframes lyric-rise {
  from { opacity: 0.5; transform: translateY(8px) scale(1); }
  to { opacity: 1; transform: translateY(0) scale(1.03); }
}

/* 当前句极轻呼吸：只动 opacity / 辉光，不动 transform（避免和抬入的 scale 打架，也不触发重排） */
@keyframes lyric-breathe {
  0%, 100% { opacity: 1; text-shadow: 0 0 22px rgba(242, 245, 248, 0.12); }
  50% { opacity: 0.9; text-shadow: 0 0 32px rgba(242, 245, 248, 0.24); }
}

/* 1. 朱砂竖条：不再是一根固定高度的短线，而是一支正在走完的进度 */
.lyric.is-current::before {
  background: linear-gradient(
    180deg,
    var(--seal) calc(var(--p, 0) * 100%),
    rgba(190, 50, 39, 0.26) calc(var(--p, 0) * 100%)
  );
}

/* 2. 唱过 / 没唱：一道很窄的过渡带，读起来像笔尖而不是硬切。
      用 background-clip 上色，不支持时自动退回上面的纯色（不会变透明）。 */
@supports (-webkit-background-clip: text) {
  .lyric.is-current {
    background-image: linear-gradient(
      90deg,
      var(--paper) 0,
      var(--paper) calc(var(--p, 0) * 100% - 1.6%),
      rgba(201, 211, 219, 0.52) calc(var(--p, 0) * 100% + 1.6%),
      rgba(201, 211, 219, 0.52) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* 3. 邻句：不模糊，只比当前句暗一档、轻一档字重，层次照样拉开 */
.lyric.is-near { color: rgba(242, 245, 248, 0.42); opacity: 0.6; filter: none; }

/* 作词/作曲/编曲/制作人…是署名不是歌词，压小压暗，别占着最显眼的位置 */
.lyric--credit {
  font-family: var(--font-cn-ui);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: rgba(147, 160, 173, 0.5);
  padding: 2px 0;
}
.lyric.is-current::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 22px;
  margin-right: 10px;
  border-radius: 2px;
  background: var(--seal);
  vertical-align: -4px;
}
.lyric--plain { font-family: var(--font-cn-ui); font-size: var(--fs-small); color: var(--paper-dim); }

/* 藏文：上下叠写的字形需要更多行高，且不能加字距（会把音节拆散） */
.lyric--tibetan {
  font-family: var(--font-tibetan);
  font-size: 18px;
  line-height: 2.05;
  letter-spacing: 0;
  word-spacing: 0.02em;
}
.lyric--tibetan.is-current { transform: none; }
.stage__lyrics.is-tibetan .lyric { font-family: var(--font-tibetan); }

/* ------------------------------------------------------------------ 底部 */

.stage__bottom {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
}
.stage__time { font-family: var(--font-mono); font-size: var(--fs-tiny); color: var(--paper-faint); }
.stage__time:last-of-type { text-align: right; }
.track--stage { height: 22px; }
.track--stage .track__rail { height: 2px; }
.track--stage .track__fill { background: linear-gradient(90deg, var(--seal-deep), var(--seal-bright)); }
.track--stage .track__thumb { width: 12px; height: 12px; background: var(--seal-bright); }
.stage__ctrl { display: flex; align-items: center; gap: var(--sp-3); }
.playbtn--lg { width: 56px; height: 56px; }
.playbtn--lg .ico { width: 24px; height: 24px; }

/* 「显示歌词」开合与窄屏回退都归 stage-layout.css */

@media (max-width: 1180px) {
  /* 窄屏把歌词放到整行下方：必须给足高度并允许整页滚动，
     否则又回到"只能看见四五句"的老问题。 */
  .stage__lyrics-wrap {
    position: static;
    transform: none;
    width: auto;
    max-height: none;
  }
  .stage__body {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr);
    grid-template-areas: none;
    align-items: start;
    max-width: 1080px;
    overflow-y: auto;
    padding-bottom: var(--sp-4);
  }
  .stage__lyrics-wrap { grid-column: 1 / -1; height: min(52vh, 460px); }
  .deck__platter { width: min(340px, 34vh); }
}

@media (max-width: 860px) {
  .stage__body {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding: 0 var(--sp-4);
    overflow-y: auto;
  }
  .deck__platter { width: min(260px, 30vh); }
  /* 手机上不再藏掉歌词，给一条能读的横带 */
  .stage__lyrics-wrap { height: 40vh; }
  .lyric { font-size: 16px; }
  .stage__title { font-size: 26px; }
  .stage__bottom { grid-template-columns: 42px minmax(0, 1fr) 42px; padding: var(--sp-3) var(--sp-4) var(--sp-5); }
  .stage__ctrl { grid-column: 1 / -1; justify-content: center; }
  /* 唱片页底部的寺院剪影：退到最暗处，只留轮廓 */
/* 已停用：寺院不再作为唱片页背景（容器与内联代码都已移除）。
   要恢复的话：index.html 里加回 <span class="stage__monastery">，
   stage.js 里加回 inlineSvg('/assets/monastery.svg')，这段样式即生效。 */
.stage__monastery {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  /* 它是整个唱片页的"地方"——不是页脚的一条剪影，也不是中间的一个摆件。
     放大到接近满屏、贴底居中：盘面与文字浮在它上面。 */
  height: min(780px, 86vh);
  width: auto;
  opacity: 0.62;
  pointer-events: none;
  filter: drop-shadow(0 20px 40px rgba(4, 7, 15, 0.8));
  /* 以前从 74% 开始渐隐，正好把喇嘛与那串足迹抹掉。
     现在只收最后 8%：景要完整，人才在。 */
  mask-image: linear-gradient(180deg, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent);
}

.stage__monastery > svg {
  height: 100%;
  width: auto;
  display: block;
}

.stage__top { padding: var(--sp-3) var(--sp-4); }
}

/* 唱片页曲名：全站第二大的字，发丝 */
.stage__title {
  font-family: var(--font-thin);
  font-weight: var(--w-thin);
  letter-spacing: 0.12em;
  -webkit-font-smoothing: antialiased;
}
.stage__artist { font-weight: 300; letter-spacing: 0.06em; }

/* 藏文行必须显式指定字体，不能依赖系统回退：
   macOS 上回退可能选中 TibetanUnicode / TibetanMachineUni 这类旧字体，
   渲染出来是"带虚线圆圈的元音符号"——在 App 的 WKWebView 里尤其明显。
   Kailasa 是 macOS 自带的现代藏文字体，Noto Serif Tibetan 作为兜底。 */
.lyric--tibetan,
.lyric--tibetan .lyric__text,
[class*="lyric"][lang="bo"] {
  font-family: "Kailasa", "Noto Serif Tibetan", "Noto Sans Tibetan", "Jomolhari", "Microsoft Himalaya", serif !important;
  font-feature-settings: normal;
  font-variant-ligatures: normal;
  letter-spacing: 0;
  word-spacing: 0;
}

/* ═══════════════ 实物唱片：中央圆标 ═══════════════
   参考图：黑胶是实物质感，中央是一张印刷圆标。
   折中：黑胶做真实，圆标里仍放我们自己的画（只裁它的中心）。 */
/* 中央圆标：整幅画缩进来当"印刷标签"，不做裁切。
   之前用"放大 250% 再裁中心"，在绝对定位下算不准，白塔跑到了左边；
   缩整幅不会偏——而且圆标里能看见完整的曼陀罗，更像一张真标签。 */
.deck__label {
  /* 藏纸白底 + 墨线图标：小尺寸下最读得清的一种做法（也是真唱片圆标的样子）。
     之前把深色盘面画缩进圆标，糊成一团深色——那条路放弃了。 */
  position: absolute;
  inset: 21%;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 34% 28%, #fbfcfd, #eceff3 58%, #d5dbe1 100%);
  box-shadow:
    0 0 0 1px rgba(232, 200, 126, 0.55),
    0 8px 22px -10px rgba(0, 0, 0, 0.9),
    inset 0 0 22px rgba(20, 26, 34, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.deck__label > svg {
  position: static;
  width: 84%;
  height: 84%;
  transform: none;
  border-radius: 0;
  filter: none;
}
.deck__label > svg {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  inset: auto;
  transform: none;
  border-radius: 50%;
}

/* ═══════════════ ③ 桌面版式 —— 已移交 stage-layout.css ═══════════════
   这一块是"绝对定位侧栏"方案的最后一处：它把 .stage__info 用
   calc(50% + min(270px,28vh,47vw) + 14px) 摆到盘面左边，把 .stage__lyrics-wrap
   用 right/top:50% 摆到右侧浮栏，并给歌词栏压了 max-height: 68vh。
   实测后果：左栏间距 131px、右栏 269px（不对称），歌词栏被 68vh 截短、
   上下各留一条空带。现在三栏由一套栅格决定，这里整块撤除。 */

/* ═══════════════ ① 圆标对比度 ═══════════════
   圆标只有盘面的 46%，盘面画本身是深靛底——原样缩进去糊成一团深色。
   提亮 + 微增对比，让曼陀罗的环和小塔在那个尺寸下读得出来。 */
/* 圆标外圈的金线已并入 .deck__label 的 box-shadow */

/* ═══════════ 参考图方向：封面模糊底 · 圆标封面 · 细控件 · 歌词两档 ═══════════ */

/* ② 背景 = 封面自身的高斯模糊（质感来自封面，不再来自噪点） */
.stage::before {
  content: "";
  position: absolute;
  inset: -12%;
  /* 第一层是封面（有则用）；后面几层是暖色光晕与深底——
     没有封面时它们撑起画面的"颜色与质地"，不再是一片纯黑。 */
  background-image:
    var(--stage-cover, none),
    radial-gradient(58% 46% at 26% 26%, rgba(224, 87, 74, 0.20), transparent 62%),
    radial-gradient(52% 44% at 74% 66%, rgba(201, 162, 39, 0.16), transparent 60%),
    radial-gradient(70% 60% at 50% 50%, rgba(60, 74, 110, 0.30), transparent 70%),
    linear-gradient(160deg, #16141c 0%, #0d0c10 55%, #08080a 100%);
  background-size: cover, cover, cover, cover, cover;
  background-position: center;
  filter: blur(56px) saturate(1.2) brightness(0.62);
  opacity: 0.95;
  z-index: 0;
  pointer-events: none;
}
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 42%, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.58));
  z-index: 0;
  pointer-events: none;
}
.stage > * { position: relative; z-index: 1; }

/* ② 圆标 = 真实专辑封面（圆形裁切，无边框、无金色描边） */
.deck__label { background: #0c0c0e; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.deck__label > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
/* 只有真拿到封面图时才隐藏手绘图案；没封面时保留，否则圆标会变成空黑圆 */
.deck__label:has(> img) > svg { display: none; }

/* ③ 控制区：细线 + 白点拖手（去掉金色描边与多层装饰） */
.stage .timeline__rail { height: 3px; background: rgba(255, 255, 255, 0.20); border-radius: 2px; }
.stage .timeline__fill { background: #ffffff; border-radius: 2px; }
.stage .timeline__thumb {
  width: 11px; height: 11px;
  background: #ffffff;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.stage .playbtn {
  background: transparent;
  border: 1.6px solid rgba(255, 255, 255, 0.85);
  color: #fff;
}
.stage .playbtn svg { fill: #fff; }
.stage .iconbtn { color: rgba(255, 255, 255, 0.82); }
.stage .iconbtn:hover { color: #fff; }

/* ④ 歌词：已唱过淡灰、当前行朱砂、未唱亮白 */
.stage__lyrics .lyric { color: rgba(255, 255, 255, 0.38); letter-spacing: 0.02em; }
.stage__lyrics .lyric.is-past { color: rgba(255, 255, 255, 0.26); }
.stage__lyrics .lyric.is-current { color: #e0574a; font-weight: 500; }

/* ═══════════ 对齐参考图的细节 ═══════════ */

/* 歌词：上下渐隐（参考图里最上方几行是淡出的，不是硬切） */
.stage__lyrics-wrap {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
}
/* 歌词：行距与字号舒展一点，一列到底 */
.stage__lyrics .lyric {
  line-height: 1.95;
  font-size: 15px;
  padding: 5px 0;
}
/* 播放键：参考图里是更大的圆形描边按钮 */
.stage .playbtn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.stage .playbtn svg { width: 22px; height: 22px; }
/* 盘面投影：让黑胶从模糊底上"浮"起来 */
.deck__platter {
  filter: drop-shadow(0 26px 48px rgba(0, 0, 0, 0.55));
}
/* 舞台上的装饰（寺院/底纹）在参考图语言里没有位置——保持隐藏 */
.stage__monastery, .stage__wash { display: none !important; }

/* ═══════════ 唱片页：抬亮 + 去压黑 + 盘面层次 ═══════════ */
.stage { background: #1a1820 !important; }
/* 暗角减半（原来是 0.10 → 0.58，把画面压回近黑） */
.stage::after {
  background: radial-gradient(120% 90% at 50% 42%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.34) 100%) !important;
}
/* 模糊底抬亮（0.62 → 0.9），并让暖色光晕更明确 */
.stage::before {
  filter: blur(56px) saturate(1.3) brightness(0.9) !important;
  opacity: 1 !important;
}
/* 盘体：给一道清楚的径向高光，做出"黑胶被侧光照到"的层次 */
.deck__platter {
  background: radial-gradient(circle at 32% 26%, #3a3742 0%, #201e25 46%, #131217 78%, #0c0b0f 100%) !important;
}
/* 歌词两档在抬亮后重新校准 */
.stage__lyrics .lyric { color: rgba(255, 255, 255, 0.45) !important; }
.stage__lyrics .lyric.is-past { color: rgba(255, 255, 255, 0.3) !important; }
.stage__lyrics .lyric.is-current { color: #e8675a !important; }

/* ═══════════ 唱片页：再抬一档（用户连续反馈"太暗、没质感"）═══════════ */
.stage { background: #2a2731 !important; }              /* 近黑 → 明确的炭灰 */
.stage::before {
  filter: blur(64px) saturate(1.45) brightness(1.05) !important;   /* 让糊开的颜色真正显出来 */
  opacity: 1 !important;
}
.stage::after {                                          /* 暗角几乎撤掉 */
  background: radial-gradient(130% 100% at 50% 45%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 100%) !important;
}
/* 盘体：清楚的高光与一道亮边，让它成为"被光照到的物件" */
.deck__platter {
  background: radial-gradient(circle at 30% 24%, #4a4653 0%, #26242c 44%, #16151a 76%, #0e0d11 100%) !important;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.9), 0 0 90px -20px rgba(224, 87, 74, 0.22) !important;
}
/* 文字：标题纯白、歌词提亮，暗底上必须有足够的白 */
.stage__lyrics .lyric { color: rgba(255, 255, 255, 0.6) !important; }
.stage__lyrics .lyric.is-past { color: rgba(255, 255, 255, 0.38) !important; }
.stage__lyrics .lyric.is-current { color: #ff7a6b !important; font-weight: 600 !important; }
.stage__info, .stage__info * { color: rgba(255, 255, 255, 0.92) !important; }
.stage__info .muted, .stage__info small { color: rgba(255, 255, 255, 0.6) !important; }

/* ═══════════ 唱片页 · 暗部优化 ═══════════ */
/* 底色：有颜色的深（藏青），不是近黑 */
.stage { background: #1b2130 !important; }
/* 模糊底再提一点，让画面有颜色 */
.stage::before { filter: blur(64px) saturate(1.5) brightness(1.15) !important; }
/* 暗角几乎撤掉：它是把暗部压死的主因 */
.stage::after {
  background: radial-gradient(130% 100% at 50% 45%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%) !important;
}
/* 黑胶：给出清楚的受光面与暗面（暗部里最重要的"细节"就是圆盘自己的明暗过渡） */
.deck__platter {
  background:
    radial-gradient(circle at 30% 22%, #565e6e 0%, #333b4a 34%, #1e2430 62%, #12161f 88%, #0d1119 100%) !important;
}
/* 圆标：给一道内描边，避免它和盘面糊在一起 */
.deck__label { box-shadow: 0 0 0 1px rgba(220, 232, 255, 0.16), inset 0 0 22px rgba(0, 0, 0, 0.35) !important; }
/* 文字：暗底上提高一档，确保"有细节"看得见 */
.stage__lyrics .lyric { color: rgba(232, 240, 252, 0.66) !important; }
.stage__lyrics .lyric.is-past { color: rgba(232, 240, 252, 0.42) !important; }
.stage__lyrics .lyric.is-current { color: #ff8172 !important; }

/* ═══════════ 金属唱片 + 金色描边（按你的要求）═══════════
   材料从"哑光黑胶"换成"拉丝金属"：
   用 conic-gradient 做环向明暗（金属的旋转受光），
   再叠一层 repeating-conic 的细密条纹（车削纹），
   最外一道 1.5px 藏金描线 + 一圈金色外溢。 */

.deck__platter {
  border-radius: 50% !important;          /* 修：之前盘底是方形，看着像方块上放了唱片 */
  overflow: hidden;
  background:
    /* ③ 车削纹：极细的环向条纹 */
    repeating-conic-gradient(from 0deg,
      rgba(255, 255, 255, 0.045) 0deg 1.1deg,
      rgba(255, 255, 255, 0) 1.1deg 2.4deg),
    /* ② 拉丝受光：环向明暗交替（金属的关键） */
    conic-gradient(from 205deg,
      #262b35 0%, #5b6270 16%, #2b313c 33%, #1b202a 50%,
      #4d5462 68%, #232833 86%, #262b35 100%),
    /* ① 形体：左上一道光 */
    radial-gradient(circle at 33% 25%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 48%),
    #161a22 !important;
  box-shadow:
    0 0 0 1.5px #c9a227,                         /* 金色描线 */
    0 0 0 2.6px rgba(9, 11, 17, 0.92),           /* 深衬，压出边界 */
    0 0 46px -8px rgba(201, 162, 39, 0.35),      /* 金色外溢 */
    0 26px 54px -20px rgba(4, 8, 18, 0.72) !important;   /* 落影 */
}

.deck__disc { border-radius: 50% !important; }
/* 金属盘上的沟槽要更细更亮一点，否则会被金属纹理吃掉 */
.deck__disc::before {
  opacity: 0.85 !important;
  mix-blend-mode: screen !important;
}
/* 圆标：金属盘上给它一道金色细圈，和盘边呼应 */
.deck__label { box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.55), inset 0 0 22px rgba(0, 0, 0, 0.4) !important; }

/* ═══════════ 真鎏金盘边（替换之前那条平涂暗金）═══════════
   真金的质感来自：同一条边上同时有 亮金/中金/暗金 三段，并有一处高光。
   做法：conic-gradient 做环形渐变，再用 mask 挖成 2.6px 的细环。 */

.deck__platter {
  box-shadow:
    0 0 0 1px rgba(90, 70, 20, 0.9),                  /* 最内的暗衬，让金线"立"起来 */
    0 0 0 3px rgba(10, 12, 18, 0.95),                 /* 深环，隔开金色与盘面 */
    0 0 58px -6px rgba(232, 200, 126, 0.5),           /* 暖金外溢（提亮，不是发光特效） */
    0 28px 56px -20px rgba(4, 8, 18, 0.7) !important; /* 落影 */
}

/* 金色描线：环形渐变（暗金 #7A5C14 → 亮金 #F5E3A6 → 中金 #C9A227 → 高光） */
.deck__platter::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 205deg,
    #7a5c14 0%, #c9a227 12%, #f5e3a6 20%, #c9a227 28%,
    #8a6a1e 44%, #a5842c 58%, #f0d98a 68%, #c9a227 78%,
    #7a5c14 92%, #7a5c14 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.6px));
  pointer-events: none;
  z-index: 4;
}
/* 左上那处主光落点的金色高光（真鎏金最关键的一笔） */
.deck__platter::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: radial-gradient(28% 22% at 30% 22%, rgba(255, 246, 214, 0.85), rgba(255, 246, 214, 0) 70%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.2px), #000 calc(100% - 3.2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.2px), #000 calc(100% - 3.2px));
  pointer-events: none;
  z-index: 5;
}

/* ═══════════ 真实黑胶比例（对齐你给的两张参考）═══════════
   参考共同点：① 圆标很大（约盘面 58%），黑胶只留一圈窄边
               ② 盘体是哑光黑 + 极细密沟槽，不是亮金属
               ③ 只有一道柔和的弧形反光，没有花哨的环形条纹 */

/* ① 圆标再放大一档并加白细圈（参考图里圆标边缘有一道亮线） */
.deck__label {
  inset: 20% !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 6px 22px -6px rgba(0, 0, 0, 0.8) !important;
}

/* ② 盘体回到哑光黑：去掉亮金属条纹，只留"上亮下暗"的柔和反光 */
.deck__platter {
  background:
    radial-gradient(60% 44% at 34% 22%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 62%),
    conic-gradient(from 200deg, #191b20 0%, #24262c 18%, #17191e 42%, #101216 62%, #202329 82%, #191b20 100%),
    #121417 !important;
}

/* ③ 沟槽：更细更密（真唱片一圈挨着一圈） */
.deck__disc::before {
  background-image: repeating-radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.055) 0 1px,
    rgba(0, 0, 0, 0) 1px 3px
  ) !important;
  opacity: 0.9 !important;
}

/* ④ 金边收到"发丝级"（参考图里其实没有金线，留一线呼应你之前的要求） */
.deck__platter { box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.55), 0 0 0 1.5px rgba(9, 11, 17, 0.9), 0 30px 60px -22px rgba(3, 6, 12, 0.8) !important; }
.deck__platter::after { opacity: 0.55 !important; }   /* 环形金渐变压淡，只留一点金属味 */

/* ═══════════ 背景：青蓝（对齐参考图 2 的蓝绿底）═══════════ */
.stage {
  background: linear-gradient(180deg, #17454f 0%, #123a45 46%, #0e2c36 100%) !important;
}
/* 封面糊开的颜色改为"叠在青蓝上"（soft-light），不再是独立的一层底色 */
.stage::before {
  opacity: 0.55 !important;
  mix-blend-mode: soft-light !important;
  filter: blur(64px) saturate(1.25) brightness(0.95) !important;
}
/* 暗角也用青蓝体系（不是纯黑），避免把青蓝压灰 */
.stage::after {
  background: radial-gradient(130% 100% at 50% 45%, rgba(2, 18, 24, 0) 0%, rgba(2, 18, 24, 0.42) 100%) !important;
}
/* 歌词与文字在青蓝底上重新校准（青蓝偏冷，字要更白一点才清楚） */
.stage__lyrics .lyric { color: rgba(236, 245, 250, 0.7) !important; }
.stage__lyrics .lyric.is-past { color: rgba(236, 245, 250, 0.44) !important; }
.stage__lyrics .lyric.is-current { color: #ff8172 !important; }
.stage__info, .stage__info * { color: rgba(240, 248, 252, 0.94) !important; }
/* 顶部状态行与徽标：青蓝底上用半透明白，别用灰 */
.stage .chip, .stage .tag, .stage .badge {
  border-color: rgba(236, 245, 250, 0.22) !important;
  color: rgba(236, 245, 250, 0.85) !important;
}

/* ═══════════ 青蓝提亮一档 ═══════════ */
.stage {
  background: linear-gradient(180deg, #23616f 0%, #1b4d5c 44%, #143e4b 100%) !important;
}
.stage::before { opacity: 0.7 !important; filter: blur(64px) saturate(1.35) brightness(1.1) !important; }
.stage::after {
  background: radial-gradient(130% 100% at 50% 45%, rgba(2, 18, 24, 0) 0%, rgba(2, 18, 24, 0.26) 100%) !important;
}

/* ═══════════ 背景：磨砂材质 + 再提亮 ═══════════
   磨砂 = 均匀极细的颗粒（不是装饰噪点，也不是"脏"）；
   用 feTurbulence 生成一层颗粒，以 overlay 混合叠在青蓝上，
   颗粒只负责"材质"，不改变颜色。 */

.stage {
  background-color: #2a7280;
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='0.5'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #2f7d8c 0%, #276a78 46%, #1d5563 100%);
  background-size: 180px 180px, cover;
  background-blend-mode: overlay, normal;
}
/* 颗粒层单独再压一道（更明显但不脏：透明度极低 + 只在中灰区间） */
.stage::before {
  opacity: 0.62 !important;
  filter: blur(64px) saturate(1.4) brightness(1.12) !important;
}
.stage::after {
  background: radial-gradient(130% 100% at 50% 45%, rgba(2, 18, 24, 0) 0%, rgba(2, 18, 24, 0.2) 100%) !important;
}
/* 盘体在磨砂青蓝上要压得住：加深落影与一点冷调反光 */
.deck__platter {
  box-shadow:
    0 0 0 1px rgba(201, 162, 39, 0.5),
    0 0 0 1.6px rgba(9, 16, 22, 0.9),
    0 34px 64px -22px rgba(2, 12, 18, 0.85) !important;
}

/* ═══════════ 两圈金属（按你的要求：做两圈，并加宽）═══════════
   真唱片的边不是一条线，而是【外沿一圈 + 内侧一圈】两条同心金属带。
   用 ::after 画外圈、::before 画内圈，两条都走环形金属渐变。 */

/* 外圈：贴盘沿，9px 宽 */
.deck__platter::after {
  inset: -9px !important;
  background: conic-gradient(from 205deg,
    #6f5510 0%, #c9a227 10%, #fff0bd 18%, #d8b445 24%,
    #7d5f14 40%, #b08d2a 56%, #ffeaa8 66%, #c9a227 74%,
    #6f5510 88%, #6f5510 100%) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  opacity: 1 !important;
}

/* 内圈：离开盘沿约 16px，6px 宽，相位错开（两条金属不会同时最亮） */
.deck__platter::before {
  inset: 8px !important;
  background: conic-gradient(from 20deg,
    #5d470d 0%, #a8851f 14%, #f3e2a4 24%, #b8932c 34%,
    #6b5210 52%, #9c7a1c 68%, #efdb9a 78%, #a8851f 88%, #5d470d 100%) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)) !important;
}

/* 盘体阴影简化：两圈金属已提供边界，去掉多余的一圈深衬 */
.deck__platter {
  box-shadow:
    0 0 0 1px rgba(70, 54, 12, 0.85),
    0 0 66px -8px rgba(232, 200, 126, 0.42),
    0 34px 64px -22px rgba(2, 12, 18, 0.85) !important;
}

/* ═══════════ 金属收窄 + 去阴影反效果 ═══════════ */
/* 外圈：9px → 4px（贴盘沿，只留一道干净的金属线） */
.deck__platter::after {
  inset: -4px !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)) !important;
}
/* 内圈：6px → 2.5px，并往回收（离盘沿 16px → 9px） */
.deck__platter::before {
  inset: 6px !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)) !important;
}
/* 去掉所有"反效果"：深色描边、大落影、过强的金色外溢
   —— 只留一层很淡的暖光，让盘浮在青蓝上，不再有一圈黑/一道灰 */
.deck__platter {
  box-shadow: 0 0 40px -10px rgba(232, 200, 126, 0.22) !important;
}

/* ═══════════ 金属修正：盘体干净哑光，金属只在两圈上 ═══════════
   之前的问题：① 盘体上还留着 conic 金属 → 外沿一圈发灰的亮带 ✗
               ② 内外两圈只差 10px → 看着像"一条双线夹黑缝" ✗ */

/* ① 盘体：纯净的哑光黑 + 只留一道柔和的主光（不再有金属条纹） */
.deck__platter {
  background:
    radial-gradient(58% 42% at 34% 22%, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0) 64%),
    radial-gradient(circle at 50% 50%, #191d22 0%, #14171b 58%, #101317 100%) !important;
  box-shadow: 0 0 34px -12px rgba(232, 200, 126, 0.18) !important;   /* 只留极淡暖光 */
}

/* ② 外圈：正好压在盘沿上（inset 0），3px */
.deck__platter::after {
  inset: 0 !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)) !important;
  background: conic-gradient(from 200deg,
    #6a5210 0%, #c9a227 9%, #ffefb8 17%, #cfa93b 24%,
    #71540f 42%, #ab8827 58%, #f7e6a6 68%, #c9a227 76%,
    #6a5210 90%, #6a5210 100%) !important;
}

/* ③ 内圈：往里 26px（拉开距离，两圈才读得出是"两圈"），2px */
.deck__platter::before {
  inset: 26px !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)) !important;
  background: conic-gradient(from 30deg,
    #5d470d 0%, #a8851f 14%, #f3e2a4 26%, #b8932c 36%,
    #644c0e 54%, #9c7a1c 70%, #efdb9a 80%, #a8851f 90%, #5d470d 100%) !important;
}

/* ═══════════ 去掉唱片下方的投影 ═══════════
   三处会往下投影的地方一起清掉：
   ① .deck__platter 的 filter: drop-shadow(...)   ← 最明显的那道下影
   ② 盘体/圆标的 box-shadow 里的偏移阴影（0 Npx ...）
   ③ 保留 0 偏移的细圈（金环、圆标白圈），那不是阴影，是描边 */

.deck__platter {
  filter: none !important;
  box-shadow: none !important;
}
.deck__disc { box-shadow: none !important; filter: none !important; }
.deck__label {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) !important;   /* 只留白细圈 */
}
/* 舞台整体：把可能残留的下落阴影也清掉 */
.stage__body, .stage__info, .stage__lyrics-wrap { box-shadow: none !important; }

/* ═══════════ 标题区背后那块深色面板：强清 ═══════════
   参考图里标题、徽标、按钮是【直接浮在背景上】的，
   不该有任何面板底色、圆角、阴影或毛玻璃。
   注意：.stage__lyrics-wrap 不在这里 —— 它有一条 border-left，
   那是"画心"两卷之间的分界细线，不是面板描边（见 stage-layout.css）。 */
.stage__info,
.stage__body,
.stage__lyrics,
.stage__bar,
.stage__head,
.stage__actions {
  background: none !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  outline: none !important;
}
/* 同理：任何出现在舞台上的 ::before / ::after 装饰块也清掉 */
.stage__info::before, .stage__info::after,
.stage__body::before, .stage__body::after,
.stage__lyrics-wrap::before, .stage__lyrics-wrap::after {
  display: none !important;
  background: none !important;
}

/* ═══════════ 徽标按类别分色 ═══════════
   类别用矿物色一一对应，读一眼就知道每个标签是什么身份：
     ① 格式（FLAC / MP3 在线流）  → 纸白描边（中性）
     ② 音质（无损 / 高音质 / 标准）→ 石绿 #3F6F5E
     ③ 参数（24bit / 96kHz / 码率）→ 赭石 #9B5A2E
     ④ 音源（音源 02 / 来源）      → 青蓝 #3E8E9E
   说明：徽标是按顺序生成的，这里用位置定位；类别同色、每类有自己的底与描边。 */

/* 兜底：所有舞台徽标先统一形状 */
.stage__info .chip, .stage__info .tag, .stage__info .badge, .stage__info .srcchip {
  background: rgba(8, 30, 38, 0.35) !important;
  border: 1px solid rgba(236, 245, 250, 0.22) !important;
  color: rgba(236, 245, 250, 0.92) !important;
  border-radius: 999px !important;
  letter-spacing: 0.02em !important;
}
/* ① 第一枚 = 格式：纸白 */
.stage__info .chip:nth-of-type(1), .stage__info .tag:nth-of-type(1) {
  border-color: rgba(232, 226, 214, 0.55) !important;
  color: #f2ece1 !important;
}
/* ② 第二枚 = 音质：石绿 */
.stage__info .chip:nth-of-type(2), .stage__info .tag:nth-of-type(2) {
  background: rgba(63, 111, 94, 0.32) !important;
  border-color: rgba(99, 168, 142, 0.7) !important;
  color: #d7efe4 !important;
}
/* ③ 第三枚 = 参数/码率：赭石 */
.stage__info .chip:nth-of-type(3), .stage__info .tag:nth-of-type(3) {
  background: rgba(155, 90, 46, 0.3) !important;
  border-color: rgba(196, 124, 71, 0.7) !important;
  color: #f2ddcc !important;
}
/* ④ 第四枚及以后 = 音源等：青蓝 */
.stage__info .chip:nth-of-type(n + 4), .stage__info .tag:nth-of-type(n + 4) {
  background: rgba(62, 142, 158, 0.28) !important;
  border-color: rgba(116, 196, 210, 0.7) !important;
  color: #d8f2f7 !important;
}
/* 悬停/当前：略微提亮 */
.stage__info .chip:hover, .stage__info .tag:hover { filter: brightness(1.15); }
/* ═══════════ 徽标按【真实类别类名】上色 ═══════════
   生成函数已经给了 spec-chip--<kind>，按它上色，不再用位置猜。 */
.stage__info .spec-chip, #stageSpecs .spec-chip {
  background: rgba(8,30,38,0.42) !important;
  border: 1px solid rgba(236,245,250,0.24) !important;
  color: #eaf6fa !important;
  border-radius: 999px !important;
  letter-spacing: 0.02em !important;
}
.stage__info .spec-chip--format, #stageSpecs .spec-chip--format {
  background: rgba(232,226,214,0.14) !important;
  border-color: rgba(232,226,214,0.55) !important;
  color: #f2ece1 !important;
}
.stage__info .spec-chip--quality, #stageSpecs .spec-chip--quality {
  background: rgba(63,111,94,0.34) !important;
  border-color: rgba(99,168,142,0.75) !important;
  color: #d7efe4 !important;
}
.stage__info .spec-chip--param, #stageSpecs .spec-chip--param {
  background: rgba(155,90,46,0.3) !important;
  border-color: rgba(196,124,71,0.75) !important;
  color: #f2ddcc !important;
}
.stage__info .spec-chip--source, #stageSpecs .spec-chip--source {
  background: rgba(62,142,158,0.3) !important;
  border-color: rgba(116,196,210,0.75) !important;
  color: #d8f2f7 !important;
}

/* ═══════════ 徽标分色 · 按容器顺序（最终版）═══════════
   之前两次没生效的原因：
     ① 用 .stage__info .chip:nth-of-type() —— 类名不对（实际是 .spec-chip）
     ② 改按 spec-chip--<kind> 上色 —— 但调用处传的是变量，没有固定的 kind 值
   现在直接定位 #stageSpecs 的直接子元素（徽标就是这个容器的孩子），
   用 nth-child 按顺序给色，一定命中。 */

#stageSpecs .spec-chip,
.stage__info .spec-chip {
  border-radius: 999px !important;
  letter-spacing: 0.02em !important;
}
/* ① 格式（FLAC / MP3 在线流）：纸白 */
#stageSpecs .spec-chip:nth-child(1) {
  background: rgba(232, 226, 214, 0.14) !important;
  border: 1px solid rgba(232, 226, 214, 0.55) !important;
  color: #f4efe6 !important;
}
/* ② 音质（无损 / 高解析无损 / 高音质 / 标准）：石绿 */
#stageSpecs .spec-chip:nth-child(2) {
  background: rgba(63, 111, 94, 0.36) !important;
  border: 1px solid rgba(99, 168, 142, 0.78) !important;
  color: #d9f2e7 !important;
}
/* ③ 参数（24bit / 96kHz / 320 kbps）：赭石 */
#stageSpecs .spec-chip:nth-child(3) {
  background: rgba(155, 90, 46, 0.34) !important;
  border: 1px solid rgba(200, 128, 74, 0.78) !important;
  color: #f6e0cd !important;
}
/* ④ 第四枚起（码率 / 立体声 / 音源 / 回读音质等）：青蓝 */
#stageSpecs .spec-chip:nth-child(n + 4) {
  background: rgba(62, 142, 158, 0.32) !important;
  border: 1px solid rgba(120, 200, 214, 0.78) !important;
  color: #daf3f8 !important;
}
/* 悬停微亮 */
#stageSpecs .spec-chip:hover { filter: brightness(1.18); }

/* ═══════════ 撤销：徽标分色（回到统一素色）═══════════ */
#stageSpecs .spec-chip,
#stageSpecs .spec-chip:nth-child(1),
#stageSpecs .spec-chip:nth-child(2),
#stageSpecs .spec-chip:nth-child(3),
#stageSpecs .spec-chip:nth-child(n + 4),
.stage__info .spec-chip {
  background: rgba(8, 30, 38, 0.34) !important;
  border: 1px solid rgba(236, 245, 250, 0.26) !important;
  color: rgba(236, 245, 250, 0.92) !important;
  border-radius: 999px !important;
  filter: none !important;
}

/* ═══════════ 性能：止住每帧重绘（播放卡顿的根因）═══════════
   我加的特效里有三处"贵"的操作：
     ① .stage::before 全屏 blur(64px) —— 每帧重算 ✗
     ② body::before 噪点平铺 —— 随滚动重绘 ✗
     ③ 圆盘旋转 animation —— 未提升为合成层 ✗
   处理：把①③提升为独立合成层（GPU），把①的模糊半径降下来（放大代替模糊半径）。 */

.stage { contain: paint; }                      /* 限制重绘范围 */
.stage::before {
  /* 同样的视觉：先放大 1.15 倍，再用更小的半径模糊（代价显著降低） */
  transform: translateZ(0) scale(1.15) !important;
  filter: blur(38px) saturate(1.35) brightness(1.1) !important;
  will-change: filter, transform;
  backface-visibility: hidden;
}
.stage::after { will-change: opacity; transform: translateZ(0); }

/* 圆盘与唱臂：旋转动画走合成层，不再触发重排重绘 */
/* 性能注记：这里只允许 will-change，绝不能写 transform——
   圆盘的旋转动画用的就是 transform，一旦被静态声明占用就会停转 ✗ */
.deck__platter, .deck__disc, .deck__label, .deck__tonearm {
  will-change: transform;
  backface-visibility: hidden;
}

/* ═══════════ 卡顿根治：去掉实时高斯模糊 ═══════════
   全屏 filter: blur() 是这套界面里唯一"每帧都在算"的重活。
   改成静态多层渐变（颜色关系与糊开的封面接近），成本降为 0。
   封面本身仍留在圆标里（小尺寸，不需要模糊）。 */

.stage::before {
  background-image:
    radial-gradient(60% 48% at 26% 24%, rgba(224, 87, 74, 0.18), transparent 62%),
    radial-gradient(54% 46% at 74% 66%, rgba(201, 162, 39, 0.15), transparent 60%),
    radial-gradient(72% 62% at 50% 48%, rgba(62, 142, 158, 0.30), transparent 72%),
    linear-gradient(160deg, #17454f 0%, #123a45 52%, #0e2c36 100%) !important;
  filter: none !important;          /* ← 关键：不再有实时模糊 */
  transform: none !important;
  will-change: auto !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
/* 圆盘旋转：只保留旋转动画本身，去掉所有额外开销 */
/* 同上：只保留 will-change，不碰 transform */
.deck__disc, .deck__platter { will-change: transform; }
/* 经幡等小动画也限制在各自元素内 */
.deck__disc *, .deck__label * { animation-play-state: running; }
/* 全局：不再对任何元素使用实时背景模糊 */
.rail, .topbar, .dock, .panel, .card, .songlist, .queue, .stage__info {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ═══════════ 歌词追踪：当前行动态放大（聚焦效果）═══════════ */
.stage__lyrics .lyric {
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 300ms ease,
              color 220ms ease;
  will-change: transform;
}
.stage__lyrics .lyric.is-current {
  transform: scale(1.14) translateX(2px);
  color: #ff8172 !important;
  font-weight: 600 !important;
  text-shadow: 0 2px 18px rgba(224, 87, 74, 0.28);
}
.stage__lyrics .lyric.is-past { transform: scale(0.98); }
.stage__lyrics .lyric.is-next { transform: scale(1.02); opacity: 0.72; }
@media (prefers-reduced-motion: reduce) {
  .stage__lyrics .lyric { transition: color 200ms ease; }
  .stage__lyrics .lyric.is-current { transform: none; }
}

/* ═══════════ 「显示歌词」开合 ═══════════
   已移入 stage-layout.css：关闭时整栏（含分界细线）一起收起，
   剩下的盘面与信息栏回到居中两栏，不再偏左留空。 */


/* ═══════════════ 黑胶唱片回归（开盘机退场）═══════════════
   盘面回到黑胶：圆形哑光黑盘 + 鎏金发丝边 + 中心圆标（白塔 + 五色经幡）。
   开盘机的 DOM（走带 / 带盘 / 压带轮 / VU / 中央屏）保留在 #platter 里不删，
   这里整组隐藏；要恢复开盘机，把下面这两条 display 注释掉即可。 */
.deck__tape,
.deck__reel,
.deck__roller,
.deck__console,
.deck__legs { display: none !important; }
/* 金属唱臂：按之前"金属去除"的要求继续移除 */
.deck__arm { display: none !important; }
/* 黑胶盘恢复显示（index.html 上的 hidden 属性已去掉） */
.deck__disc { display: block !important; }
/* 黑胶是这页的主体，放大一档撑住画面（上限同时受高度与宽度约束，窄屏不会溢出） */
.deck__platter { width: min(420px, 44vh, 78vw) !important; }

/* ── 带盘：六辐金属盘，播放时转动 ── */
.deck__reel {
  position: absolute;
  top: -5%;
  width: 40%;
  aspect-ratio: 1;
  z-index: 1;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.55));
  animation: spin 9s linear infinite;
  animation-play-state: paused;
}
.deck__reel--l { left: 0.5%; }
.deck__reel--r { right: 0.5%; animation-duration: 6s; }
body.is-playing .deck__reel { animation-play-state: running; }

/* ── 走带与磁头桥 ── */
.deck__tape { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* 流动磁带：播放时虚线朝右（左盘→右盘）持续卷动，像真走带 */
.deck__tape-run { stroke-dashoffset: 0; }
body.is-playing .deck__tape-run { animation: tape-flow 1.1s linear infinite; }
@keyframes tape-flow { to { stroke-dashoffset: -56; } }
/* 压带轮：播放时飞转（切槽线旋转才读得出在转） */
.deck__roller {
  position: absolute;
  top: 53%;
  width: 3.4%;
  aspect-ratio: 1;
  z-index: 2;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #f2f5f8 0%, #c3ccd3 26%, #7d8791 58%, #2c333a 88%, #171c21 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 -2px 4px rgba(0, 0, 0, 0.45), inset 0 2px 3px rgba(255, 255, 255, 0.35);
  animation: spin 1.3s linear infinite;
  animation-play-state: paused;
}
.deck__roller::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent 45%, rgba(0, 0, 0, 0.55) 45% 55%, transparent 55%);
}
.deck__roller--l { left: 40.4%; }
.deck__roller--r { right: 40.4%; }
body.is-playing .deck__roller { animation-play-state: running; }

/* ── 下控制区：VU 表 + 中央显示屏 ── */
.deck__console {
  position: absolute;
  left: 7%; right: 7%; bottom: 6%;
  height: 24%;
  display: flex;
  align-items: stretch;
  gap: 4%;
  z-index: 3;
}
.deck__vu {
  flex: 0 0 17%;
  position: relative;
  border-radius: 7px;
  background: linear-gradient(180deg, #111418, #0a0c0f);
  box-shadow: inset 0 0 0 1px rgba(232, 200, 126, 0.22), inset 0 2px 8px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.deck__vu::before {
  content: "";
  position: absolute;
  inset: 16% 13%;
  border-radius: 4px;
  background: linear-gradient(180deg, #e0bb55 0%, #b8922f 100%);
  opacity: 0.85;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.45);
}
.deck__vu::after {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: 20%;
  width: 2px;
  height: 58%;
  border-radius: 1px;
  background: #26221a;
  transform-origin: bottom center;
  transform: rotate(-8deg);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}
body.is-playing .deck__vu::after { animation: vu-quiver 1.6s ease-in-out infinite; }
@keyframes vu-quiver {
  0%, 100% { transform: rotate(-9deg); }
  30% { transform: rotate(5deg); }
  55% { transform: rotate(-2deg); }
  78% { transform: rotate(8deg); }
}

/* 中央显示屏：由"圆形盘心屏"改为面板屏，白塔水印缩小沉底 */
.deck__screen {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: auto;
  flex: 1;
  height: 100%;
  min-height: 0;
  padding: 4px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, #101418, #090b0e);
  box-shadow:
    inset 0 0 0 1px rgba(232, 200, 126, 0.28),
    inset 0 2px 10px rgba(0, 0, 0, 0.72),
    0 0 18px -6px rgba(232, 200, 126, 0.22);
}
.deck__screen::after {
  /* 佛塔 + 经幡元素要清晰可见（取 disc-face.svg 中段的塔景）：
     115% 大小、取景对准塔与幡，透明度 0.38——读得出塔和五色幡，
     又不至于像之前 0.5 那样糊成一坨白雾压住歌名 */
  background-size: 115%;
  background-position: center 58%;
  opacity: 0.38;
}
.deck__screen-lyric { font-size: clamp(12px, 2vh, 16px); -webkit-line-clamp: 2; }

/* reduced-motion：带盘/压带轮/表针全部停 */
@media (prefers-reduced-motion: reduce) {
  .deck__reel, .deck__roller { animation: none !important; }
  .deck__vu::after { animation: none !important; }
}

/* ═══════════════ 唱片材质参考方案 · Vinyl Material v1 ═══════════════
   面向 3D / UI 复用的黑胶表面材质，参数与 3D 管线的对应关系：
   ┌ 3D 参数            └ CSS 对应物（改一个变量即换质感，随盘旋转、循环无缝）
   roughness  粗糙度  → --vm-groove：沟槽明暗对比（0=哑光平盘 / 1=标准压纹 / >1=重压纹）
   metalness  金属度  → --vm-metal：高光的冷色偏染浓度（黑胶≈0，全息≈1）
   normal     法线    → 同心圆 repeating-radial-gradient（1px 亮脊 + 2.2px 暗谷模拟凹凸）
   clearcoat  清漆层  → --vm-sheen：两道斜向弧形柔光（乙烯基的柔和反光，随盘转）
   dust/wear  磨损    → --vm-dust：外缘磨损亮环 + 三粒灰尘高光 + 两道细划痕弧
   分轨暗环            → 两道径向暗环（33% / 56%），把盘面分成"曲目带"
   变体：给 .deck__disc 追加类名即可切换（JS：disc.classList.add('vinyl--holo')）：
     默认      经典黑胶（近黑、标准沟槽、柔和高光）
     vinyl--tint    彩色半透明（深红透光感，高光更透）
     vinyl--frost   磨砂（沟槽压平、高光几乎收掉，灰调哑光）
     vinyl--holo    全息（彩虹衍射层 + 高金属度高光） */
.deck__disc {
  --vm-groove: 1;
  --vm-metal: 0;
  --vm-sheen: 0.09;
  --vm-dust: 1;
  --vm-holo: 0;
  --vm-c1: #1f2127;   /* 内圈受光色 */
  --vm-c2: #101218;   /* 中带 */
  --vm-c3: #08090d;   /* 外缘 */
  background:
    /* ── 清漆层：两道斜向柔光（乙烯基柔和反光）── */
    conic-gradient(from 218deg at 50% 50%,
      rgba(255, 255, 255, 0) 0deg,
      rgba(255, 255, 255, calc(var(--vm-sheen) * 1.9)) 24deg,
      rgba(255, 255, 255, 0) 66deg,
      rgba(255, 255, 255, 0) 178deg,
      rgba(255, 255, 255, var(--vm-sheen)) 206deg,
      rgba(255, 255, 255, 0) 244deg,
      rgba(255, 255, 255, 0) 360deg),
    /* ── 全息衍射层：--vm-holo=0 时整层透明 ── */
    conic-gradient(from 90deg,
      rgba(255, 80, 160, calc(0.06 * var(--vm-holo))) 0deg,
      rgba(80, 220, 255, calc(0.06 * var(--vm-holo))) 72deg,
      rgba(140, 255, 170, calc(0.06 * var(--vm-holo))) 144deg,
      rgba(255, 230, 110, calc(0.06 * var(--vm-holo))) 216deg,
      rgba(190, 120, 255, calc(0.06 * var(--vm-holo))) 288deg,
      rgba(255, 80, 160, calc(0.06 * var(--vm-holo))) 360deg),
    /* ── 磨损与灰尘：外缘亮环 + 三粒灰尘高光 + 两道划痕弧 ── */
    radial-gradient(circle, transparent 0 90.5%,
      rgba(255, 255, 255, calc(0.05 * var(--vm-dust))) 94%,
      rgba(255, 255, 255, calc(0.02 * var(--vm-dust))) 97.5%,
      transparent 100%),
    radial-gradient(2.2% 1.4% at 86% 12%, rgba(255, 255, 255, calc(0.11 * var(--vm-dust))), transparent 70%),
    radial-gradient(1.6% 1.2% at 12% 80%, rgba(255, 255, 255, calc(0.08 * var(--vm-dust))), transparent 70%),
    radial-gradient(1.2% 1.0% at 78% 88%, rgba(255, 255, 255, calc(0.07 * var(--vm-dust))), transparent 70%),
    conic-gradient(from 36deg,
      transparent 0deg,
      rgba(255, 255, 255, calc(0.05 * var(--vm-dust))) 7deg, transparent 8.4deg,
      transparent 131deg,
      rgba(255, 255, 255, calc(0.04 * var(--vm-dust))) 197deg, transparent 199deg,
      transparent 360deg),
    /* ── 分轨暗环：模拟"曲目之间"的过渡带 ── */
    radial-gradient(circle,
      transparent 0 30.6%, rgba(0, 0, 0, calc(0.5 * var(--vm-groove))) 31%, transparent 31.8%,
      transparent 55.4%, rgba(0, 0, 0, calc(0.5 * var(--vm-groove))) 55.8%, transparent 56.6%),
    /* ── 法线层：同心圆沟槽（1px 亮脊 + 暗谷，一圈挨一圈）── */
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, calc(0.05 * var(--vm-groove))) 0 1px,
      rgba(0, 0, 0, 0) 1px 2.2px,
      rgba(0, 0, 0, calc(0.16 * var(--vm-groove))) 2.2px 2.7px,
      rgba(0, 0, 0, 0) 2.7px 4.6px),
    /* ── 基底：受光面 → 外缘压暗 ── */
    radial-gradient(circle at 50% 50%, var(--vm-c1) 0 20%, var(--vm-c2) 45%, var(--vm-c3) 78%, #050609 100%) !important;
}
/* 旧沟槽层（::before 上的 repeating-radial）退役，避免和新法线层叠成摩尔纹 */
.deck__disc::before { background-image: none !important; }

/* ── 变体 A：彩色半透明（深红透光感，像彩胶唱片对着光）── */
.deck__disc.vinyl--tint {
  --vm-c1: #38141f;
  --vm-c2: #20090f;
  --vm-c3: #0e0407;
  --vm-sheen: 0.14;
  --vm-groove: 0.85;
}
/* ── 变体 B：磨砂（沟槽压平、高光收掉，灰调哑光）── */
.deck__disc.vinyl--frost {
  --vm-c1: #2c2f35;
  --vm-c2: #1a1d22;
  --vm-c3: #0e1013;
  --vm-groove: 0.35;
  --vm-sheen: 0.04;
  --vm-dust: 0.5;
}
/* ── 变体 C：全息（彩虹衍射 + 高金属度高光）── */
.deck__disc.vinyl--holo {
  --vm-holo: 1;
  --vm-metal: 1;
  --vm-sheen: 0.16;
  --vm-groove: 0.9;
}

/* ═══════════════ A9 音箱回归（参考 Beosound A9）═══════════════
   大盘黑织物面 + 三根实木斜腿 + 盘心圆屏（封面画 + 当前句歌词）。
   开盘机与黑胶的 DOM/CSS 都保留着，这段整体压过它们；
   要切回黑胶，把本段整段注释即可。 */

/* 1) 木腿回归 */
.deck__legs { display: block !important; }

/* 2) 盘面：纯哑光黑（不做织纹——两层 ±45° 细线会互相干涉出大块摩尔纹，
   就是之前圆标上缘那条"穿帮"暗带），只留左上一道柔光 */
.deck__disc {
  animation: none !important;
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.07), transparent 55%),
    radial-gradient(circle at 50% 50%, #1d2025 0%, #121419 55%, #0a0c0f 100%) !important;
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.06),
    inset 0 -14px 30px rgba(0, 0, 0, 0.55),
    0 40px 90px -30px rgba(0, 0, 0, 0.95) !important;
}
.deck__disc::before { display: none !important; }   /* 沟槽银环退场 */

/* 3) 盘面金边与鎏金流光退场 */
.deck__platter { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.9) !important; }
.deck__platter::after { content: none !important; }

/* 4) 中心圆标（白塔+经幡）原样保留——用户明确要求"里面的元素不动"。
   盘心屏（console/screen）继续隐藏，不盖住圆标；歌词只在右侧栏显示。 */
.deck__label { display: block !important; }

/* 5) S 形唱臂回归（参考图圈选的元素）：银色臂管 + 圆形轴座/平衡锤 + 唱头。
   静止时 -26° 抬在盘外，播放时落到 2° 搭在盘上（原有动画，无需改动）。
   注意它只压在盘面右上，不碰中心圆标。 */
.deck__arm { display: block !important; }

/* 6) 整组上移：盘体在画面里偏矮，抬高 6vh 给木腿留出完整落地空间 */
/* 唱臂由版式层接管（stage-layout.css 的 .deck__arm）：
   这里只保留起落动作本身。原来那行 translateY(-6vh) 已删——
   它把整个 .deck 往上顶 54px，盘心因此比左右两栏高 54px。 */


/* 7) 外框：两道干净的金环 + 一颗巡游金点。
   不再画 1px 细同心纹（它叠在盘面上会出摩尔纹）；
   "转圈"由金点沿内环走一圈来表现——26s/圈，眼睛能看见在转，又没有任何纹理干涉。 */
.deck__disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 0;   /* 外面：垫在最底下 */
  pointer-events: none;
  background:
    /* 巡游金点：落在内环（半径 61.2%）上，随层旋转绕圈 */
    radial-gradient(1% 1.6% at 50% 19.4%, rgba(232, 200, 126, 0.95), rgba(232, 200, 126, 0) 72%),
    /* 两道金色细环（圆标外、盘缘内） */
    radial-gradient(circle, transparent 0 60.5%, rgba(201, 162, 39, 0.42) 61.2%, transparent 62%),
    radial-gradient(circle, transparent 0 76.5%, rgba(201, 162, 39, 0.34) 76.8%, transparent 77.6%);
}
@media (prefers-reduced-motion: no-preference) {
  .deck__disc::after { animation: spin 26s linear infinite; }
}
/* 里面图置顶：圆标（白塔+经幡）压在所有盘面装饰之上 */
.deck__label { z-index: 5 !important; }
/* 内部图放大：直径由盘面的 60% → 72%，外圈黑环相应收窄（外面唱片缩小） */
.deck__label { inset: 14% !important; }
/* 去掉画自带的暗角与外环压暗：它们在图的外缘形成一圈暗带，读起来就是"穿帮"
   （r=400 暗角、r=392 外圈压暗、r=331 中环暗线，都在取景边缘或之外） */
.deck__label circle[r="400"],
.deck__label circle[r="392"],
.deck__label circle[r="331"] { display: none !important; }
/* 盘面整体收一档：内部图更大后，外框不需要这么大的黑面 */
.deck__platter { width: min(400px, 42vh, 76vw) !important; }
/* 双保险：二十四瓣莲花环（g.petals，r≈293-330）整个隐藏——
   取景无论怎么缩放，上缘都不会再露出锯齿残影 */
.deck__label .petals { display: none !important; }

/* ༀ 记号：经确认，正确位置就是圆标画里、白塔上方的天空（原生位置）。
   外圈那枚已移除，原生 .om / .om-glow 恢复显示（含呼吸动画）。 */

/* ═══════════ 圆标取景：ༀ 与经幡在上，塔身居中，玛尼堆/喇嘛在下 ═══════════
   disc-face.svg 整幅 768 见方。两个约束：
     ① 构图：ༀ ≈ 212 · 塔刹/经幡 ≈ 288-336 · 塔基 ≈ 460-560 · 灯/喇嘛 ≈ 594-660
     ② 遮瑕：内景墙垛/龛位元素在 r≈290-310，贴着取景边缘会露出半截锯齿——
        可见半径必须 ≤ 267（缩放 ≥ 150%）把它们整个排除在取景外。
   150% + 锚点 58%：ༀ 落顶部约 6%、经幡/塔刹在上三分之一、底部收住喇嘛。 */
.deck__label > svg {
  position: absolute !important;
  width: 150% !important;
  height: 150% !important;
  left: 50% !important;
  top: 58% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  filter: none !important;
}

/* ═══════════ 按你的要求：内部图放大 · 唱片缩小 · 修穿插 ═══════════ */

/* ① 圆标（里面的佛塔图案）放大：inset 20% → 13% */
.deck__label { inset: 13% !important; }

/* 已撤销：那两次"修唱臂"改错了类名，还把宽度放大到 46% → 反而造成穿插 ✗ */

/* ④ 歌词文字不要顶到最右边（避免贴着滚动条） */
.stage__lyrics .lyric { padding-right: 12px !important; }

/* ⑤ 顶部那排小按钮：压在歌词栏上方而不是文字上
   —— 已撤除：它写的 .lyric-tools 这个类名根本不存在（HTML 里是 .lyrics-tools），
   所以从来没生效过；"跟随 / 整篇"现在由版式层排进歌词栏的表头行。 */

/* ═══════════ 修正：盘回大一点 ═══════════ */
/* 盘面尺寸现在由版式层的 --disc-size 统一决定，这里不再重复声明。
   原先这一带还有一条 .stage__lyrics-wrap { width: min(30vw,380px) !important }，
   那是绝对定位时代留下的宽度，会把歌词栏卡在 380px、填不满栅格列——已删。 */


.deck__label {
  box-shadow: none !important;                 /* 去掉内描边与外阴影 */
  border: none !important;
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
      #000 0%, #000 58%, rgba(0, 0, 0, 0.82) 74%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(circle at 50% 50%,
      #000 0%, #000 58%, rgba(0, 0, 0, 0.82) 74%, rgba(0, 0, 0, 0) 100%);
}
/* 内部图案略微放大，让羽化区落在黑胶上而不是图案里 */
.deck__label > svg,
.deck__label > img { transform: scale(1.08) !important; transform-origin: center !important; }

/* 圆标内部再叠一层很淡的暗角，让中心更沉、边缘更融 */
.deck__label::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.35) 88%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}


.deck__label {
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
      #000 0%, #000 70%, rgba(0, 0, 0, 0.86) 84%, rgba(0, 0, 0, 0) 100%) !important;
  mask-image: radial-gradient(circle at 50% 50%,
      #000 0%, #000 70%, rgba(0, 0, 0, 0.86) 84%, rgba(0, 0, 0, 0) 100%) !important;
}
.deck__label > svg,
.deck__label > img { transform: scale(1.03) !important; }

/* 暗角：改到 74% 才开始、更淡，只负责缝合，不碰中心 */
.deck__label::after {
  background: radial-gradient(circle at 50% 50%,
      rgba(0,0,0,0) 74%, rgba(0,0,0,0.22) 90%, rgba(0,0,0,0.34) 100%) !important;
}
/* 明确兜底：圆标里的图案任何情况下都不许被隐藏 */
.deck__label > svg, .deck__label > img { display: block !important; opacity: 1 !important; visibility: visible !important; }


.deck__label > svg,
.deck__label > img {
  transform: scale(1.95) !important;   /* 1.03 → 1.95：塔填满内部 */
  transform-origin: 50% 50% !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* 缩放后中心更亮一点，塔的白色能压住深色底 */
.deck__label { background: #0d1626 !important; }
.deck__label::after {
  background: radial-gradient(circle at 50% 50%,
      rgba(0,0,0,0) 62%, rgba(0,0,0,0.18) 86%, rgba(0,0,0,0.3) 100%) !important;
}

/* ═══════════ 回到"佛塔可见"的干净状态 ═══════════
   前面几轮我加了遮罩/缩放/暗角/底色覆盖，结果把中心那座塔弄没了 ✗
   这里全部撤销，只保留两条明确的用户要求：
     ① 外面的唱片缩小   ② 圆标（内部图）放大 */

.deck__platter { width: min(312px, 31vh) !important; height: min(312px, 31vh) !important; }
.deck__label {
  inset: 13% !important;          /* 内部图放大 */
  background: none !important;    /* 不再覆盖底色 */
  box-shadow: none !important;
  border: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;    /* 不再羽化（它把塔一起淡掉了） */
}
.deck__label::after { display: none !important; }   /* 去掉暗角层 */
.deck__label > svg,
.deck__label > img {
  transform: none !important;     /* 不再缩放（1.95 把塔推出了可视区） */
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
  height: 100% !important;
}

/* ═══════════ 圆标图案权威声明（最后一条，压掉前面所有冲突）═══════════
   前面几十轮我陆续加过 display:none / scale / mask 等规则，
   它们叠在一起把中心那座塔弄没了 ✗。
   这一条放在文件最末尾并且全部 !important —— 图案必须显示、铺满、不缩放、不位移。 */

.deck__label > svg,
.deck__label > img,
.deck__label > .cover-svg,
.deck__label > picture > img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  object-fit: contain !important;
}
.deck__label {
  inset: 13% !important;
  background: none !important;
  overflow: hidden !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.deck__label::after, .deck__label::before { display: none !important; }
.deck__disc { overflow: visible !important; }

/* ═══════════ 佛塔放大 · 突出（在干净状态上做中心缩放）═══════════
   为什么现在才敢放大：遮罩、暗角、12 条冲突规则都已经压掉了 ✓
   现在只剩"缩放"这一个变量，效果可预期：
   图案以中心为原点放大 → 中部的塔占据圆标 → 边缘被圆标裁掉（干净） */

.deck__label { inset: 10% !important; }        /* 圆标再放大一点（13% → 10%） */
.deck__label > svg,
.deck__label > img {
  transform: scale(1.65) !important;           /* 1.0 → 1.65：塔明显变大 */
  transform-origin: 50% 52% !important;        /* 略偏下，让塔基不贴边 */
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.deck__platter { width: min(300px, 30vh) !important; height: min(300px, 30vh) !important; }

/* ═══════════ ① 唱片更真实 ═══════════
   真黑胶的三要素：极密沟槽 · 一道环向反光 · 边缘压暗（不是均匀的黑）。 */

/* 沟槽加密：每 1.6px 一组（亮 0.6px + 暗 1px），比之前细一倍 */
.deck__disc::before {
  background-image: repeating-radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.075) 0 0.6px,
    rgba(0, 0, 0, 0.28) 0.6px 1.6px
  ) !important;
  opacity: 0.95 !important;
}
/* 盘体：环向反光（金属车削感）+ 边缘内暗角（让盘"有厚度"） */
.deck__platter {
  background:
    radial-gradient(46% 34% at 32% 24%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 62%),
    conic-gradient(from 205deg,
      #1b1e23 0%, #34383f 13%, #1a1d22 33%, #11141a 52%,
      #2d3138 70%, #181b20 86%, #1b1e23 100%) !important;
  box-shadow:
    0 0 0 1px rgba(201, 162, 39, 0.5),
    inset 0 0 70px rgba(0, 0, 0, 0.55),
    0 30px 60px -26px rgba(0, 0, 0, 0.85) !important;
}

/* ═══════════ ② 亚克力通透面板 —— 已撤除 ═══════════
   这一轮给歌词栏与曲目信息区套了"半透明面板 + 20px 圆角 + 1px 亮边"。
   实测效果与参考图相反：它把标题和歌词装进两块毛玻璃卡片里，
   和自由浮在暗底上的唱片形成两种语言（DESIGN.md 05：唱片页只有唱片是有体积的物件，
   其余全是墨底上的字，不加卡片、不加面板描边）。
   版式层（stage-layout.css）用一道竖向细线做"画心"的分界，代替这块面板。 */

/* ═══════════ 黑胶：按实物光学重画（本节是全站盘面材质的最终值）═══════════════

   实物黑胶的辨识度几乎全在这四件事上，画对这四件就"真"了：

     ① 密纹。真唱片 12 吋、每面约 1500 条沟槽，摊在 96mm 上 ——
        在 400px 的屏幕上，沟槽周期只有 0.08px，**根本不可能看清**。
        所以"一圈圈细线"是画不真的：0.9px 的同心线在这尺寸上只会出摩尔纹，
        看起来像织物。这里改成低频同心纹（1.6/4.6px，亮度 2% 上下）当"织理暗示"，
        真正的密度感交给 ② 。

     ② 镜面反照。盘面的亮暗起伏全靠它：室内光源在盘面上留下几道弧形光带。
        关键在**它不随唱片旋转**——灯是固定的，旋转的是同心纹，
        于是观感是"光带不动，纹路在光带里走"。这正是黑胶在转的样子。
        所以反照画在 .deck__platter::after（不旋转）上，密纹在 .deck__disc（旋转）上。

     ③ 外缘。光亮黑胶的边会"切线"：外圈一道锐利高光弧（受光侧）+ 对侧一道暖色回光，
        再压一圈深色厚度。没有这道边，黑胶就只是一块圆形的暗色。

     ④ 中央圆标是**哑面纸**：比盘面亮一档、不反光，靠"压进盘面"的阴影与印刷细圈立住。
        镜面盘面 + 哑面圆标的材质对比，是黑胶最容易被认出来的那一处。

   腿已移除，唱片是悬在空间里的：重量由 .deck__shadow 的投影承担（见本节末尾）。

   注：本节多数声明带 !important —— stage.css 前面有十几轮历史迭代（其中一条把盘面
   设成了 #24282f 的纯色、一条画了 0.9px 的同心线、一条加了两道均匀金属环），
   同权重下压不住。等那份文件清理时，这里应当是唯一的盘面材质定义。 */

/* —— 盘面：密纹 + 分轨 + 盘体 ——
   两条几何约定，写在这里免得以后又算错（这两处都吃过亏）：
     ① 同心渐变一律写 `circle closest-side`：不写的话默认取 farthest-corner，
        百分比要乘 1.41 —— 于是"91% 处的外圈带"会落到盘外，"41% 处的收尾槽"
        会躲到圆标底下，画了半天什么都看不见。
     ② 圆标半径 = 盘径的 40%（圆标 inset 10%）。分轨带全部排在 80% 以外，
        也就是圆标之外那圈真正看得见的盘面上。 */
.deck__disc {
  background:
    /* 密纹：**不画**。这一条是被实测否决的——真唱片每面约 1500 条沟槽摊在 96mm 上，
       400px 屏幕里周期只有 0.08px；画成 2px 的同心细线后，放大截图里整个盘面
       变成一片水波纹（同心圆采样到方形像素网格上的摩尔纹），比不画难看得多。
       密度感交给下面三件：分轨带、镜面反照、外缘高光。 */
    /* 分轨：收尾槽 / 两道曲间 / 引出槽，全部落在圆标之外 */
    radial-gradient(circle closest-side at 50% 50%,
      rgba(255, 255, 255, 0) 0 81.5%,
      rgba(255, 255, 255, 0.06) 81.5% 83%,     /* 收尾槽：紧贴圆标外那一圈 */
      rgba(255, 255, 255, 0) 83% 87.5%,
      rgba(255, 255, 255, 0.045) 87.5% 88.6%,  /* 第一道曲间 */
      rgba(255, 255, 255, 0) 88.6% 92.5%,
      rgba(255, 255, 255, 0.055) 92.5% 93.6%,  /* 第二道曲间 */
      rgba(255, 255, 255, 0) 93.6% 96%,
      rgba(255, 255, 255, 0.09) 96% 97.8%,     /* 引出槽：外缘平滑区，最亮 */
      rgba(255, 255, 255, 0) 97.8%),
    /* 一整片斜向反光 —— 黑物件"有质感"的关键在**明暗分明**，不是把整体调灰：
       深底 + 有方向的强反照，才读得出"光亮的黑胶"；均匀抬亮只会读成哑光灰盘。 */
    linear-gradient(133deg,
      rgba(255, 255, 255, 0.055) 0%,
      rgba(255, 255, 255, 0.02) 20%,
      rgba(255, 255, 255, 0) 42%),
    /* 盘体：同心（closest-side，百分比 = 半径占比），深底但不再压到死黑 */
    radial-gradient(circle closest-side at 50% 50%,
      #2c323d 0 6%, #232833 34%, #191e26 62%, #10141a 86%, #0b0e13 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),      /* 盘面内缘的一道细光 */
    /* 倒角：外缘内 3px 先压暗，再让边缘那道高光切上去 —— 边因此有厚度 */
    inset 0 0 0 3px rgba(0, 0, 0, 0.42),
    inset 0 0 72px rgba(0, 0, 0, 0.3),              /* 内圈轻压，别压死 */
    0 30px 70px -30px rgba(0, 0, 0, 0.95),          /* 悬空物件的落地投影 */
    0 10px 26px -12px rgba(0, 0, 0, 0.85) !important;
  animation: spin 26s linear infinite;
  animation-play-state: paused;
}
body.is-playing .deck__disc { animation-play-state: running; }

/* —— 外缘：锐利高光弧 + 对侧暖色回光 —— */
.deck__disc::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from -8deg,
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 255, 255, 0.55) 16deg,
    rgba(255, 255, 255, 0.08) 42deg,
    rgba(255, 255, 255, 0) 74deg,
    rgba(255, 255, 255, 0) 198deg,
    rgba(255, 208, 158, 0.32) 248deg,
    rgba(255, 255, 255, 0) 292deg) !important;
  /* 只留最外 2.5%：读成"边缘切线"，而不是盘面上的第二道光。
     圆半径写成**显式长度**（--disc-size 的一半）：百分比形式要么按最远角算（1.41 倍），
     要么按 closest-side 算，改一处就会错一处——写死长度没有歧义。 */
  -webkit-mask-image: radial-gradient(circle calc(var(--disc-size) / 2) at 50% 50%, transparent 0 96.6%, #000 99%) !important;
  mask-image: radial-gradient(circle calc(var(--disc-size) / 2) at 50% 50%, transparent 0 96.6%, #000 99%) !important;
  opacity: 1 !important;
  mix-blend-mode: screen !important;
  pointer-events: none;
  z-index: 3;
}
/* 盘面自身那道 118° 横向高光撤掉 —— 它会跟着唱片一起转，而灯不该跟着转 */
.deck__disc::after { content: none !important; }

/* —— 镜面反照：固定在空间里的几道柔光（不随唱片旋转）——
   第一版用锥形楔块（conic 的几段亮弧），结果不对：锥形楔块的边界是**从圆心射出的直线**，
   在盘面上露成一道硬边，读起来像抹痕而不是反照。真实的黑胶反照是柔和的弧带
   （面光源在镜面上的映像），所以改用"盘外几个柔光源"的径向渐变——
   它们落在圆形盘面上，边界自然是弧的。 */
.deck__platter::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    /* 主光（左上，大面积柔光箱：盘面上"受光的那一半"） */
    radial-gradient(56% 42% at 22% 12%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 64%),
    /* 副光（右下，弱一档，把下半托起来） */
    radial-gradient(46% 36% at 88% 96%, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 62%),
    /* 一道窄而亮的灯管映像：锥形 + 长过渡，边界被上面两层压住，不露直边 */
    conic-gradient(from 4deg,
      rgba(255, 255, 255, 0) 0deg,
      rgba(255, 255, 255, 0.1) 13deg,
      rgba(255, 255, 255, 0.3) 26deg,
      rgba(255, 255, 255, 0.1) 39deg,
      rgba(255, 255, 255, 0) 54deg,
      rgba(255, 255, 255, 0) 360deg) !important;
  /* 中央圆标是哑面纸：反照不落在它上面。
     圆标半径 = 盘径的 40%，同样用显式长度写，避免百分比口径的歧义。 */
  -webkit-mask-image: radial-gradient(circle calc(var(--disc-size) * 0.4) at 50% 50%, transparent 0 95%, #000 100%) !important;
  mask-image: radial-gradient(circle calc(var(--disc-size) * 0.4) at 50% 50%, transparent 0 95%, #000 100%) !important;
  mix-blend-mode: screen !important;
  opacity: 1 !important;
  animation: none !important;
  pointer-events: none;
  z-index: 4;
}
/* 盘架不露面（唱片盖住它）。历史上这里画过四轮"真鎏金盘边"——
   两道 2–3px 的金环，会给唱片镶上一圈假金边。全部撤掉。
   注：金（--gold）按 DESIGN.md 只给寺院的屋顶用。 */
.deck__platter {
  background: none !important;
  box-shadow: none !important;
}
.deck__platter::before {
  background: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

/* —— 中央圆标：哑面纸 ——
   下面这套是**矢量圆标**（config 里 brand.labelArt = 'vector'）的纸感：
   亮一档的纸面 + 印刷细圈 + 压进盘面的阴影。
   照片圆标（默认 'photo'）不看这些背景色，但盒子上的圆角裁切与阴影仍然管用。 */
.deck__label {
  background:
    radial-gradient(circle at 40% 34%, #fbfcfd 0 42%, #eef1f4 70%, #dee3e9 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.85),      /* 印刷的内圈亮线 */
    inset 0 0 0 2px rgba(24, 30, 40, 0.1),          /* 纸的压痕 */
    inset 0 1px 2px rgba(255, 255, 255, 0.7),       /* 顶光落在纸面 */
    inset 0 -7px 16px rgba(24, 32, 44, 0.12),       /* 底部回光 */
    0 1px 0 rgba(255, 255, 255, 0.1),
    0 5px 14px -5px rgba(0, 0, 0, 0.8) !important;  /* 压进盘面 */
}

/* —— 照片圆标（brand.labelArt = 'photo'，默认）——
   脚本生成的画心（web/assets/disc-label-photo.png，720×720，带透明边）。
   几个要点：
     · 裁切交给 .deck__label 的 border-radius + overflow（那两行在别处，别删）；
       这张图裁成正方形时，**内切圆**正好落在原图的圆标范围内，所以四角那点黑胶
       永远露不出来 —— 换图时要保持这个前提：裁的是"圆标的外接正方形"，
       且以圆标的最小半径（注意 AI 图里的圆标常是略扁的椭圆）为准。
     · 下面这几条 !important 是必须的：stage.css 前面那几轮"佛塔放大 · 突出"
       写的是 `.deck__label > svg, .deck__label > img { transform: scale(1.65) }`
       —— 那是给矢量画里那座塔放大用的，但选择器里的 `> img` 把这张照片也一起命中了，
       照片于是被放大 1.65 倍（实测只看得到僧人的背），object-fit 还被压成 contain。
       这几个覆盖是专门还这笔账的；哪天清掉那几轮历史规则，这几条 !important 可以一并去掉。
       选择器写成 `.deck__label > img.deck__label-photo` 而不是单个类名：对方是
       `.deck__label > img`（一个类 + 一个元素），同权重下比我这个单类选择器高 ——
       只加 !important 是不够的，实测翻了车。 */
/* 那两处柔雾罩（.deck__label-veil）**已撤除**：它是为了盖旧圆标照片里"烧进画面"的那圈
   三角经幡（AI 把旗直接画在画里，抹不掉也裁不掉，因为它的半径和塔冠嵌套）。
   后来用户要求重画这张画心（"保留人物、佛塔，设计一条有空间感的路，融合背景，其余删掉"），
   新画心由 tools/make-label-art.py 生成 —— 天空是干净的渐变，经幡一开始就不存在，
   于是这四团与夜空同色的柔雾失去了用途，留着反而会在新天上留下四块深色斑。
   哪天要回退成旧照片，把 _temp/label-art-backup/disc-label-photo.orig.jpg 换回去，
   再把这里和 stage.js 里那行一并恢复即可（历史见 DESIGN.md 的圆标一节）。 */

/* 缩进的那一圈用同一张图补齐：模糊 + 压暗，做成"照片下面垫的一层同色底"，
   这样圆标边缘没有接缝，也不需要用任何补图手段（用户明确要求不改图）。
   放大 1.12 倍是为了让模糊后的边缘不至于透出圆标的底色。 */
.deck__label > img.deck__label-photo-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.12) !important;
  transform-origin: 50% 50% !important;
  border-radius: 50%;
  /* 亮度 0.72 而不是 0.6：压太黑会让"照片边"读成一道硬圈；
     模糊 20px 是为了让这一圈真的像虚化的延伸，而不是一层深色垫底 */
  filter: blur(20px) brightness(0.72) saturate(0.92);
}

/* 缩进那层（.deck__label-photo-bg）**已停用**：它是为旧照片"缩进一圈"服务的 ——
   照片缩了 14% 以后边缘会露白，就用同一张图的模糊放大版垫在下面接缝。
   新画心（tools/make-label-art.py）是**整幅设计**的：构图、暗角、路的近端都在 720×720 里
   安排好了，再缩进 7% 等于把路的下半截和暗角一起切掉，还凭空多出一圈边框感。
   现在照片满铺圆标，这层垫底被完全盖住，索性显式关掉，免得以后有人以为它还在起作用。 */
.deck__label > img.deck__label-photo-bg { display: none !important; }

/* 照片本体：满铺（不带缩进）。
   只留一道极细的亮边当作"印在唱片上的圆标"的分界；原来那圈外投影去掉了 ——
   满铺之后它没有可投影的落差，留着只会在黑胶上糊出一道灰圈。 */
.deck__label > img.deck__label-photo {
  position: absolute;
  inset: 0 !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;   /* 原规则是 contain，方图对方盒会留白边 */
  transform: none !important;     /* 那 1.65 倍是给矢量塔用的，照片不要 */
  transform-origin: 50% 50% !important;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* —— 照片圆标上的经幡（会飘的那一串）——
   结构与理由见 stage.js 的 buildGarland()：零尺寸的槽 + 挂在槽上的旗，
   所以这里只有"一次旋转（槽）"和"一次摆动（旗）"，没有变换顺序的坑。

   **只放在顶上那一段弧**（跨 ±75°、10 面），不是绕满一圈：
   原画与照片里的经幡都是自宝盖向两侧拉的一串；绕满一圈会读成"盘子上多了一圈花边"，
   还会和照片里自带的那圈挤在一起（实测 20 面绕满时用户就是这么说"数量多了"）。
   半径 0.36 盘径 = 圆标半径（0.4 盘径）的 0.90 —— 与矢量版同一个相对位置。
   旗是方块（真实经幡就是长方形布片），不是三角。 */
.deck__garland {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}
/* 经幡现在挂在圆标之外（.deck__label 的兄弟节点），所以要自己反向自转抵消盘的旋转，
   否则它会跟着盘一起转 —— 与圆标同一套写法、同一周期。 */
.deck__garland {
  /* 必须高过 .deck__label 的 z-index:5（那条是历史规则，圆标压在所有东西上面）——
     经幡现在挂在圆标之外、旗身垂在圆标边缘上，低于 5 就会被照片盖住，
     只剩圆标外那一点点露出来（实测就是这样）。 */
  z-index: 6;
  animation: spin-back 26s linear infinite !important;
  animation-play-state: paused;
}
body.is-playing .deck__garland { animation-play-state: running; }

/* 绳：与旗底边同半径的一段弧，画在 JS 里（见 buildGarland），这里只管放位 */
.deck__garland-string {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.deck__gs {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--f-a, 0deg));
}
.deck__gf {
  position: absolute;
  left: 0;
  /* 顶边落在半径线（绳）上，身子朝盘心方向垂下来 —— 真经幡就是布片挂在绳上 */
  top: calc(var(--disc-size) * -0.4);
  width: calc(var(--disc-size) * 0.048);
  height: calc(var(--disc-size) * 0.048);
  margin-left: calc(var(--disc-size) * -0.024); /* 半个旗宽，让旗以半径线居中 */
  background: var(--f-c, #f2f5f8);
  color: var(--f-t, #f2f5f8);
  opacity: 0.94;
  /* 布片上的内容：中心一个藏文字（六字真言之一），右下角一个罗马字注音，
     外面套一道细内框 —— 照真风马旗的样子。真旗上还有一圈回纹角花，
     在 19px 的尺寸上画不出细节，收成一道细线反而干净。 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 倾角：位置仍按弧上的角度摆（--f-a 在槽上），但旗身**回正 55%** ——
     参考图里的旗是随绳轻轻倾斜（两端约 ±30°），不是按半径立着（那样两端 ±65°，
     加了内框之后歪得更明显）。回正写在变量里、由 keyframes 直接引用，
     所以摆动与倾角是同一套变换，不用再套一层元素。 */
  /* --f-tilt（旗身回正的角度）由 JS 内联给出：正反两串的"正"不一样，
     在 CSS 里只看 --f-a 是分不清的。 */
  transform-origin: top center;
  animation: garland-flutter 2.9s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  animation-delay: var(--f-d, 0s);
}
/* 反面那串（`.deck__gf--out`）：绳在内侧、旗朝**外**垂 —— 屏幕上就是"往下"，
   与真的经幡一样顺重力。做法是把盒子顶边再往外推一个旗高（绳因此落在盒底边），
   摆动原点随之改到底边；旗上的字与注音各转 180°，读起来仍然朝上（不然是倒的）。
   **当前不用**：用户看过之后要求"下方的去除经幡"，`stage.js` 里那组已经注释掉。
   这段留着 —— 要恢复只需把 sets 里的第二项放回来，样式不用重写。 */
.deck__gf--out {
  top: calc(var(--disc-size) * -0.448);
  transform-origin: bottom center;
}
.deck__gf--out .deck__gf-syl,
.deck__gf--out .deck__gf-lat {
  transform: rotate(180deg);
}

/* 细内框：用 currentColor，跟着这一面的字色走 */
.deck__gf::before {
  content: "";
  position: absolute;
  inset: 7%;
  border: 0.5px solid currentColor;
  border-radius: 1px;
  opacity: 0.5;
}
/* 藏文字：**用 Noto Sans Tibetan，并走真粗体（700）**。
   Kailasa 是 macOS 的文本字面、笔画细，12px 下会发虚（用户："字体不一致"）；
   实测这台机器上 Noto Sans Tibetan 有真粗体（Kailasa 没有，只能合成假粗），
   笔画厚度才对得上参考图那种手写风马旗。没有 Noto 的机器回落到 Kailasa 合成粗，
   所以再补一道极细描边保证笔画够实。
   藏文字形常超出 em 盒，给一点上下内边距，别让它顶到内框。 */
.deck__gf-syl {
  font-family: "Noto Sans Tibetan", var(--font-tibetan);
  font-weight: 700;
  font-size: 0.7em;
  line-height: 1;
  padding: 0.04em 0;
  -webkit-text-stroke: 0.2px currentColor;
}
/* 罗马字注音：这个尺寸下只有 4–5px，读不出内容，但它是真旗上的一部分，
   远看就是一个"有字"的小记号 —— 留着，比空白干净。 */
.deck__gf-lat {
  position: absolute;
  right: 8%;
  bottom: 4%;
  font-family: var(--font-mono);
  font-size: 0.3em;
  letter-spacing: 0.02em;
  opacity: 0.8;
}
/* 摆动：绕顶边（绳）翻，倾角由 --f-tilt 兜底 —— keyframes 里直接引用它，
   所以"回正后的位置"和"摆动"是同一次变换，不需要再嵌一层。 */
@keyframes garland-flutter {
  0% { transform: rotate(var(--f-tilt, 0deg)) scaleY(1); }
  18% { transform: rotate(calc(var(--f-tilt, 0deg) + 8deg)) scaleY(0.92); }
  42% { transform: rotate(calc(var(--f-tilt, 0deg) - 5deg)) scaleY(1.08); }
  68% { transform: rotate(calc(var(--f-tilt, 0deg) + 6deg)) scaleY(0.95); }
  86% { transform: rotate(calc(var(--f-tilt, 0deg) - 2deg)) scaleY(1.03); }
  100% { transform: rotate(var(--f-tilt, 0deg)) scaleY(1); }
}

/* —— 轴孔：一个小孔，右下内壁吃光 —— */
.deck__spindle {
  width: 7px;
  height: 7px;
  background:
    radial-gradient(circle at 66% 72%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 52%),
    #090c11;
  box-shadow: 0 0 0 1px rgba(6, 10, 16, 0.9), inset 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* —— 刻纹（坛城）：像蚀刻在盘面上，只在光擦过时看得见 —— */
.deck__etch { opacity: 0.45; }

/* ═══════════ ༀ 环：五枚 OM 刻在收尾槽上 ═══════════
   和圆标里那枚 ༀ 是同一个记号（同一套藏文字体、同一个鎏金色 #e8c87e），
   沿收尾槽排五枚 —— 经幡五色、曼陀罗的常用基数都是五。

   （2026-09 备注：这一圈曾被撤掉过一轮，用户随即要求恢复。所以下面这几条别再顺手删——
   盘面上"两圈装饰挤在 40px 环带里"的担忧是真的，但用户要两圈，就按两圈做。）

   几处必须说清的做法：
   · **字用真藏文字**（U+0F00），不画路径、不"照着描"。系统里常并存多套旧式藏文字体，
     会把元音与下加字排散成带虚线圆圈的字形，所以字体栈固定走 --font-tibetan（Kailasa 起）。
   · **每枚的"上"指向盘外**，这是咒轮的排法（转经筒、唐卡上的咒环都这么排）：
     先把自己摆到盘心，再绕盘心转到各自的角度、推到半径处——旋转是"绕心转"，
     不是"自转"，所以顶上那枚正立、侧面的自然倾斜。
   · **半径 44.5%**：落在圆标之外（圆标半径 40%）、引线槽之内。
     不写死 px，按 --disc-size 算，所以盘大圈也大。
   · **不另加动画**：它刻在唱片上，唱片转它就转（26s/圈）——
     一个"印在盘上却自己转"的环，物理上说不通。
   · 亮度压到 0.55：它是暗处的刻痕，不是贴上去的金箔；光晕给一点点，让它从黑胶里透出来。 */
.deck__omring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}
.deck__om {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: var(--font-tibetan);
  font-size: calc(var(--disc-size) * 0.062);
  line-height: 1;
  /* 鎏金：不用纯色填充，用一道竖向渐变 —— 真鎏金是有明暗的（上缘吃光、下缘沉），
     纯色 + 低透明度只会读成"灰扑扑的刻痕"，实测用户看到的就是一团暗黄。
     因为是 background-clip: text，阴影只能用 filter: drop-shadow（text-shadow 在
     透明字色下不显示），两层：一层贴身亮边、一层向外散的光晕。 */
  color: transparent;
  background-image: linear-gradient(180deg,
    #ffeec0 0%,
    #f2d492 28%,
    #e8c87e 52%,
    #c9a44f 76%,
    #f5e0a6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 上下左右都留出墨迹空间。原因：background-clip: text 只填**盒内**的字形，
     而藏文字形（尤其 ༀ 顶上那组日月）常超出 em 盒 —— 超出部分直接变透明，
     看起来就是"字不全"。padding 给的是对称量，字形仍在盒心，
     所以下面那条 translate(-50%,-50%) 的定位不受影响。 */
  padding: 0.5em 0.35em;
  filter:
    drop-shadow(0 0 3px rgba(255, 226, 150, 0.65))
    drop-shadow(0 0 12px rgba(232, 200, 126, 0.4));
  opacity: 0.92; /* 原来 0.55：在近黑的盘面上几乎看不见 */
  transform:
    translate(-50%, -50%)
    rotate(var(--om-a, 0deg))
    translateY(calc(var(--disc-size) * -0.445));
}
.deck__om:nth-child(1) { --om-a: 0deg; }
.deck__om:nth-child(2) { --om-a: 72deg; }
.deck__om:nth-child(3) { --om-a: 144deg; }
.deck__om:nth-child(4) { --om-a: 216deg; }
.deck__om:nth-child(5) { --om-a: 288deg; }

/* ═══════════ 唱片壳：参考图那种浅色透明唱片 ═══════════
   用户要求（2026-09）：外框照参考图的样子加回来 —— 那张参考是一张"透明黑胶"：
   盘体是浅色的（不是黑胶的黑），上头的纹路是**亮线**，右侧一杆唱臂，中间一块深色圆标。
   我们照这个结构来：浅色盘体 + 同心亮纹 + 面光 + 银边 + 唱臂 + 贴地投影，
   中间保留圆标（照片：佛塔 / 经幡 / 人物 / 地面都在里面）。

   几处与"黑胶版"不同的地方：
     · 盘体亮、纹路亮：黑胶是"深底 + 亮纹"，这里是"浅底 + 更亮的纹"，所以密度靠
       alpha 的层次拉开，不能靠对比；
     · 反照压到黑胶版的一半以下：浅色盘上再叠强反照会糊成一片白；
     · 标签（照片）那圈**深色**正好当"印刷圆标"，与浅盘形成参考图里那种一深一浅的结构。 */
.deck__disc {
  background:
    /* ① 密纹：亮线，节奏均匀 —— 质感靠"匀"，不靠叠层 */
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.13) 0 1px,
      rgba(255, 255, 255, 0) 1px 3.2px),
    /* ② 压纹环：只两圈宽的亮环（参考图上一眼能数出来的那几圈），不铺满 */
    radial-gradient(circle closest-side at 50% 50%,
      rgba(255, 255, 255, 0) 0 62%,
      rgba(255, 255, 255, 0.1) 62% 62.9%, rgba(255, 255, 255, 0) 62.9% 76%,
      rgba(255, 255, 255, 0.075) 76% 76.9%, rgba(255, 255, 255, 0) 76.9%),
    /* ③ 面光：**只留这一层光**。原来盘体 4 层、再加边缘锥形光与两层柔光（约 7 层光
       互相打），读起来就是"光线杂"。现在一层从左上来的软光，其余收住。 */
    linear-gradient(145deg,
      rgba(250, 253, 255, 0.2),
      rgba(240, 247, 252, 0.08) 34%,
      rgba(226, 238, 246, 0.04) 72%),
    /* ④ 透明黑胶那种淡淡的乳白底 */
    rgba(232, 242, 249, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 22px 56px -28px rgba(0, 0, 0, 0.85),
    0 6px 20px -10px rgba(0, 0, 0, 0.55) !important;
  animation: spin 26s linear infinite !important; /* 动态：外框（盘体 + 纹路 + 边缘切线）26 秒一圈。
     必须 !important：早期"纯哑光黑"那轮写过 `.deck__disc { animation: none !important }`
     （当时是为了关掉一张静态黑胶的旋转），同权重下压不过它。 */
  animation-play-state: paused;
}
body.is-playing .deck__disc { animation-play-state: running; }

/* 中间那幅画**反向自转**，抵消外框的旋转 —— 于是"外框在转、画面不动"。
   用户要的是"外框动态、中间保留佛塔经幡人物地面"：一幅有人走路的画跟着转，
   人会横过来，那是错的。两边的周期与缓动必须完全一致（都是 26s linear），
   稍有差别就会看到画面缓慢漂移。 */
.deck__label {
  animation: spin-back 26s linear infinite !important;
  animation-play-state: paused;
}
body.is-playing .deck__label { animation-play-state: running; }
@keyframes spin-back { to { transform: rotate(-360deg); } }
/* 外缘：**一道均匀的亮边**，不再用锥形高光弧 ——
   那道光会随盘一起转，既是多余的光，也会被误读成"盘面上有块亮斑在跑"。 */
.deck__disc::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: none !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  pointer-events: none;
  z-index: 3;
}
/* 压纹缝：一道极淡的径向细线（真唱片压制时的合模缝），只画外圈那一段。
   它是**材料上的记号**、不是光 —— 转起来看得见，却不给盘面添乱。
   有了它，"外框在转"这件事才有参照物（同心圆是旋转对称的，光靠它看不出转）。 */
.deck__disc::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, rgba(255, 255, 255, 0) 1px);
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, transparent 0 44%, #000 48% 95%, transparent 100%) !important;
  mask-image: radial-gradient(circle closest-side at 50% 50%, transparent 0 44%, #000 48% 95%, transparent 100%) !important;
  pointer-events: none;
  z-index: 3;
}
/* 面光已由盘体那一层负责，柔光层全部撤掉 —— 这就是"光线杂"的来源 */
.deck__platter::after { content: none !important; }
/* 盘面刻纹与 ༀ 咒轮仍然不出现：参考图里盘面是干净的，中轴内容归圆标 */
.deck__etch,
.deck__omring { display: none !important; }
/* 唱臂回来（参考图右侧就有它），落地投影回来 */
.deck__arm { display: block !important; }
.deck__shadow {
  display: block !important;
  inset: auto 8% -7% 8%;
  height: clamp(28px, 7vh, 54px);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.28) 46%, transparent 74%);
  filter: blur(12px);
}