/* 发现型「并排听」页面。设计令牌与各模块 tokens.css 同源。 */

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

body {
  /* 日文原题/日文艺人名专用字体：IBM Plex Sans SC 没有「綿」「変」等日本汉字写法，
     不指定就会掉回系统默认字体，字重与字形都跟页面对不上。只作用于 [lang="ja"]。 */
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  /* 原曲侧的强调色：默认浅灰蓝，与翻唱侧的玫瑰粉分工（播放态、贴纸描边、进度条）。
     每张卡渲染时由 JS 用封面提取的两个主色覆写这两个变量（data.js 里的 artC1/artC2，
     构建期算好并已钳进可读的明度/彩度区间）；没取到色的条目就留在这个默认灰蓝上。 */
  --color-orig: oklch(68% 0.065 247);
  --color-orig-2: oklch(68% 0.065 247);
  --color-orig-ink: oklch(20% 0.03 260);
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 15% 0%, oklch(94% 0.04 40 / 0.55), transparent 60%),
    radial-gradient(ellipse 60% 45% at 95% 12%, oklch(93% 0.045 12 / 0.4), transparent 65%);
}

.skip-link {
  position: absolute; left: -9999px; top: var(--space-md); z-index: 10;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink); color: var(--color-paper);
  font-family: var(--font-mono); font-size: var(--text-sm); border-radius: 2px;
}
.skip-link:focus { left: var(--page-gutter); }

.sheet {
  position: relative; z-index: 1;
  max-width: 66rem; margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.25rem) var(--page-gutter) var(--space-3xl);
}

/* ---------- 报头（收紧：首屏要给歌曲标题让位）---------- */
.mast__kicker {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral);
}
.mast__title {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 3.8rem); line-height: 0.92;
  letter-spacing: -0.035em; color: var(--color-ink);
}
.mast__title span {
  display: block; font-weight: 650;
  font-size: clamp(0.95rem, 2vw, 1.25rem); letter-spacing: 0.01em;
  line-height: 1.2; margin-top: var(--space-2xs); color: var(--color-accent-dark);
}
.mast__lede {
  max-width: 42rem; margin: var(--space-lg) 0 var(--space-xl);
  font-size: var(--text-lg); color: var(--color-ink-2); text-wrap: pretty;
}

/* ---------- 进度 ---------- */
.progress {
  display: flex; align-items: center; gap: var(--space-md);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.06em; color: var(--color-neutral);
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.progress__count b { font-size: var(--text-sm); color: var(--color-accent-dark); }
.progress__bar {
  flex: 1; height: 3px; max-width: 16rem;
  background: var(--color-rule-2); border-radius: 2px; overflow: hidden;
}
.progress__bar i { display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: var(--color-accent); transition: transform var(--dur-short) var(--ease-out); }
.progress__reset {
  border: 0; background: none; cursor: pointer; color: var(--color-muted);
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-decoration: underline; text-underline-offset: 3px; padding: 0;
}

/* ---------- 筛选：收在卡片下方，低调的纯文字 chips ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg);
  margin: var(--space-lg) 0 0;
}
.filters__group { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.filters__group::before {
  content: attr(aria-label); margin-right: var(--space-xs);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.1em; color: oklch(58% 0.03 266); text-transform: uppercase;
}
.chip {
  border: 0; background: transparent;
  color: var(--color-muted); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-xs);
  padding: 2px 8px; border-radius: 999px; line-height: 1.6;
  transition: background var(--dur-micro), color var(--dur-micro);
}
.chip:hover { color: var(--color-ink); }
.chip[aria-pressed="true"] {
  background: color-mix(in oklch, var(--color-accent) 20%, transparent);
  color: var(--color-accent-dark);
}
.chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- 回到顶部小胶囊：报头大标题滚出视口后的替身（大字变小字）---------- */
.top-pill {
  position: fixed; top: var(--space-md); left: 50%; z-index: var(--z-sticky);
  transform: translate(-50%, -10px);
  border: var(--rule-hair) solid color-mix(in oklch, var(--color-rule) 60%, transparent);
  background: color-mix(in oklch, var(--color-paper) 55%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  color: var(--color-ink-2); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em;
  padding: 6px 16px; border-radius: 999px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), color var(--dur-micro);
}
.top-pill.is-show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.top-pill:hover { color: var(--color-ink); }
.top-pill:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- 发现卡 ---------- */
#stage { margin-top: var(--space-lg); }
.card {
  position: relative;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--color-paper-2), var(--color-paper));
  padding: clamp(1.25rem, 4vw, 2.25rem);
  box-shadow: 0 1px 0 var(--color-rule-2), 0 18px 40px -32px oklch(30% 0.06 40 / 0.5);
}
@media (prefers-reduced-motion: no-preference) {
  .card.is-swap { animation: cardIn 240ms var(--ease-out); }
  @keyframes cardIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
}

.card__head { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
.card__title {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.3rem); line-height: 1.05;
  letter-spacing: -0.02em; color: var(--color-ink); text-wrap: balance;
}
/* 日文原题：JP 字体最粗到 700，字距也不能沿用拉丁标题的紧排 */
[lang="ja"] { font-family: var(--font-jp); }
.card__title[lang="ja"] { font-weight: 700; letter-spacing: -0.005em; }

/* 译名翻面按钮：贴在标题右侧的小胶囊，点一下把大标题翻成译名 */
.title-flip {
  flex: none; border: var(--rule-hair) solid var(--color-rule);
  background: transparent; color: var(--color-muted); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em;
  padding: 3px 10px; border-radius: 999px; line-height: 1.5;
  transition: border-color var(--dur-micro), color var(--dur-micro);
}
.title-flip:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }
.title-flip[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent-dark); }
.title-flip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .card__title.is-flip { animation: titleFlip 260ms var(--ease-out); transform-origin: 50% 0; }
  @keyframes titleFlip {
    from { opacity: 0.15; transform: rotateX(-82deg); }
    to   { opacity: 1; transform: none; }
  }
}
.card__by {
  margin: var(--space-xs) 0 var(--space-lg);
  font-size: var(--text-lg); color: var(--color-ink-2);
}
.card__by button {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--color-accent-dark); font: inherit;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px;
}
.card__by button:hover { text-decoration-style: solid; }
.card__by .meta {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-muted); letter-spacing: 0.04em; margin-left: var(--space-xs);
}
.card__by .meta:first-child { margin-left: 0; }

/* 选择器用前缀匹配（^=）：彩蛋行的两侧叫 origEgg / coverEgg，造型与主卡两侧完全一致，
   而 JS 里的 setPlaying 用的是精确 data-side，两行互不干扰。 */
/* ---------- 并排播放器（封面限宽，首屏能同时看到标题与封面）----------
   原曲大、翻唱小：翻唱侧整体下移让两张封面底边接近，加上各自的反向微倾，
   形成小唱片微微靠在大唱片肩上的姿态 */
.players {
  --orig-side: 22rem;      /* 左侧专辑封面的边长，右栏宽度由它换算 */
  display: grid; grid-template-columns: minmax(0, var(--orig-side)) minmax(0, 18.5rem);
  justify-content: center; gap: var(--space-sm);
  align-items: stretch;
}
/* 翻唱是视频时右栏加宽，让视频画面的短边达到左侧封面边长的 75%：
   横向 4:3 短边是高，宽 = 75% × 4/3；竖向 3:4 短边就是宽 = 75%。 */
.players--video { grid-template-columns: minmax(0, var(--orig-side)) minmax(0, calc(var(--orig-side) * 0.75 * 4 / 3)); }
.players--vert  { grid-template-columns: minmax(0, var(--orig-side)) minmax(0, calc(var(--orig-side) * 0.75)); }
.player[data-side^="cover"] { margin-top: 3rem; }
/* 面板不再有边框/底色/内边距：封面直接占满半栏，层级只剩外层 card 一层 */
.player {
  position: relative; display: flex; flex-direction: column;
  min-height: 100%;
}

/* 身份签：一半骑在封面上缘的描边文字贴纸——无底色，奶白粗描边呼应封面白边，
   像唱片上贴的 die-cut 字母贴纸（原曲=深蓝字 / 藤井風=粉字） */
.side-tab {
  position: absolute; top: -1rem; left: var(--space-md); z-index: 4;
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.2rem; line-height: 1.2; letter-spacing: 0.01em;
  color: oklch(28% 0.06 265);
  -webkit-text-stroke: 5px oklch(96% 0.008 20);
  paint-order: stroke fill;
  transform: rotate(-2deg);
  filter: drop-shadow(0 3px 3px oklch(5% 0.01 265 / 0.45));
  pointer-events: none;
}
.side-tab--kaze {
  color: var(--color-accent);
  transform: rotate(1.5deg);
}
/* 原唱者贴纸：写原唱者本人的名字，可点开唱片内页（歌手介绍＋被翻唱曲目）。
   长名允许折行，最宽不越过封面右缘。 */
.side-tab--artist {
  pointer-events: auto; border: 0; padding: 0; background: none; cursor: pointer;
  max-width: calc(100% - 1.5rem); text-align: left;
  font-size: clamp(0.95rem, 2.4vw, 1.2rem); line-height: 1.15;
  -webkit-text-stroke-color: var(--color-orig);
  transition: transform var(--dur-micro) var(--ease-out), color var(--dur-micro);
}
@media (hover: hover) and (pointer: fine) {
  .side-tab--artist:hover { transform: rotate(-2deg) scale(1.04); }
}
.side-tab--artist:active { transform: rotate(-2deg) scale(0.98); }
.side-tab--artist:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* 翻卡角标：多版本时封面右上角的角标本身就是按钮（↺ n/N · 版本），点按换下一版 */
.cover-badge--flip {
  border: 0; cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-micro), transform var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cover-badge--flip:hover { background: oklch(11% 0.04 265 / 0.85); }
}
.cover-badge--flip:active { transform: scale(0.95); }
.cover-badge--flip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cover-body { display: flex; flex-direction: column; flex: 1; }

/* 大封面：视觉主角，正方形铺满面板宽度。
   贴纸式奶白描边 + 左右各反向微倾（参考 trevornoah.com 的 die-cut 贴纸头像），
   播放中摆正让位给强调色描边 */
.player__cover {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm); overflow: hidden; background: var(--color-rule-2);
  border: 5px solid oklch(96% 0.008 20);
  box-shadow: 0 10px 26px -12px oklch(5% 0.01 265 / 0.8);
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.player[data-side^="orig"] .player__cover { transform: rotate(-1.2deg); }
.player[data-side^="cover"] .player__cover { transform: rotate(2deg) translateX(-0.9rem); }
.player.is-playing .player__cover { transform: none; }
/* 翻唱侧播放中只摆正，不弹回原位（保持靠拢的横向位移） */
.player[data-side^="cover"].is-playing .player__cover { transform: translateX(-0.9rem); }
/* 画面比例随播放源变：音频（专辑封面）正方形，横向视频 4:3（YouTube 缩略图原生比例，
   整帧不裁），竖向视频（Shorts）3:4 */
.player__cover--video { aspect-ratio: 4 / 3; background: #000; }
.player__cover--vert { aspect-ratio: 3 / 4; background: #000; }
/* 缩略图再做一次缩放：横向 hqdefault 自带上下黑边，放大 145% 裁掉；
   竖向（Shorts）反过来被 3:4 裁得过狠，缩到 90% 多留一点画面（四周留黑边如同信箱式留白）*/
.player__cover--video .player__art { transform: scale(1.45); }
.player__cover--vert .player__art { transform: scale(0.9); }
.player__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* 整幅画面即播放键：透明命中层铺满封面，压在角标/播放键/视频之下。
   键盘与读屏仍走可见的 .pbtn，这层只服务鼠标与触摸。 */
.cover-hit {
  position: absolute; inset: 0; z-index: 1;
  border: 0; padding: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.cover-hit:focus { outline: none; }
.player__cover--empty { display: grid; place-items: center; }
.player__cover--empty::after { content: "♪"; font-size: 3rem; color: var(--color-rule); }

/* 封面右上角角标：原曲年份 / 翻唱版本日期 */
.cover-badge {
  position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 3;
  padding: 2px 9px; border-radius: 999px;
  background: oklch(22% 0.02 40 / 0.72); color: var(--color-paper);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.02em;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* 播放键浮在封面右下角
   图标不用 ▶ 文本字符（字体基线/行高会让三角肉眼可见地偏出圆心），改用 CSS 图形：
   - 播放态：border 三角形，几何中心≠视觉重心——三角形三顶点均值决定的视觉重心落在
     底边（左）与顶点（右）连线的 1/3 处，即偏向左侧，所以要整体右移一点做补偿。
   - 暂停态：两根等宽色块拼成的双竖线，左右对称，天然居中，无需补偿。 */
.pbtn {
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--color-paper); color: var(--color-accent-dark);
  cursor: pointer; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 3px 12px -2px oklch(20% 0.05 40 / 0.55);
  transition: background var(--dur-micro), transform var(--dur-micro) var(--ease-out), color var(--dur-micro);
}
.pbtn--float { position: absolute; right: var(--space-sm); bottom: var(--space-sm); z-index: 2; }
/* 播放三角：border 三角形视觉重心偏左，整体右移约 8% 直径（46px * 8% ≈ 3.7px）补偿 */
.pbtn::before {
  content: ''; grid-area: 1 / 1; width: 0; height: 0;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 12px solid currentColor;
  transform: translateX(3.7px);
}
/* 暂停双竖线：两个 4px 色块 + 4px 间隙，左右对称天然居中，不需要位移补偿 */
.pbtn::after {
  content: ''; grid-area: 1 / 1; display: none; width: 14px; height: 14px;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 4px 14px; background-repeat: no-repeat;
  background-position: left center, right center;
}
@media (hover: hover) and (pointer: fine) {
  .pbtn:hover { background: var(--color-accent); color: var(--color-accent-ink); transform: scale(1.06); }
}
.pbtn:active { transform: scale(0.95); }
.pbtn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.player.is-playing .pbtn { background: var(--color-accent); color: var(--color-accent-ink); }
.player.is-playing .pbtn::before { display: none; }
.player.is-playing .pbtn::after { display: block; }

/* 视频 iframe 铺满封面区（盖住缩略图与播放键） */
.vid-mount { position: absolute; inset: 0; z-index: 2; background: #000; }
.vid-mount iframe { width: 100%; height: 100%; border: 0; display: block; }

/* 封面下方信息 */
.player__meta { margin-top: var(--space-sm); }
.player__track { font-weight: 600; font-size: var(--text-base); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.player__artist { font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-muted); margin-top: 3px; }

.seek { height: 3px; background: var(--color-rule-2); border-radius: 2px; overflow: hidden; margin-top: var(--space-sm); }
.seek i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--color-accent); }
.player__ext {
  display: inline-block; margin-top: var(--space-xs);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-muted); text-decoration: none;
}
.player__ext:hover { color: var(--color-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.player__none { font-size: var(--text-sm); color: var(--color-muted); font-style: italic;
  display: grid; place-items: center; text-align: center; aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm); background: var(--color-rule-2); padding: var(--space-md); }

/* ---------- 彩蛋：某些卡片下面藏一条后续故事（目前只有 Someday）---------- */
.egg { margin-top: var(--space-lg); padding-top: var(--space-md);
  border-top: var(--rule-hair) dashed var(--color-rule); }
.egg__toggle {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule); background: transparent;
  color: var(--color-ink-2); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em;
  padding: 5px 14px; border-radius: 999px;
  transition: border-color var(--dur-micro), color var(--dur-micro);
}
.egg__toggle:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }
.egg__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.egg__toggle[aria-expanded="true"] { border-color: var(--color-accent); color: var(--color-accent-dark); }
.egg__spark { font-size: 0.9em; }
.egg__body { margin-top: var(--space-lg); }
@media (prefers-reduced-motion: no-preference) {
  .egg__body { animation: eggIn 280ms var(--ease-out); }
  @keyframes eggIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
.egg__note {
  margin: 0 0 var(--space-md); text-align: center;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.06em; color: var(--color-muted);
}

/* ---------- 动作 ---------- */
.deck { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.deck__btn {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper);
  color: var(--color-ink-2); cursor: pointer; font: inherit; font-size: var(--text-sm);
  padding: var(--space-sm) var(--space-lg); border-radius: 999px;
  transition: background var(--dur-micro), border-color var(--dur-micro), color var(--dur-micro);
}
.deck__btn:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }
.deck__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.deck__btn--primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.deck__btn--primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--color-accent-ink); }
.deck__btn[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.deck__ico { font-size: 1.05em; }

/* ---------- 收藏板布局：黑胶居中；展开后黑胶移左、右侧唱片内页 ---------- */
.collection { display: flex; justify-content: center; align-items: flex-start; gap: var(--space-xl); }
.collection .vinyl { margin: 0; flex: none; transition: width var(--dur-short) var(--ease-out); }
.collection.is-open { justify-content: flex-start; }
.collection.is-open .vinyl { width: min(46%, 18rem); }

/* 唱片内页（歌单卡）：浅纸底，配色与黑胶呼应（深棕描边 + 红标色带 + 唱片孔）*/
.sleeve {
  flex: 1; min-width: 0; align-self: stretch; position: relative;
  border: var(--rule-hair) solid var(--color-tree-bark-dark);
  border-radius: var(--radius-sm) var(--radius-md) var(--radius-md) var(--radius-sm);
  background:
    radial-gradient(circle at 0 50%, transparent 11px, var(--color-tree-bark-dark) 11px 12px, transparent 12px),
    linear-gradient(180deg, var(--color-card-amber), var(--color-card-neutral));
  padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-xl);
  box-shadow: 0 12px 30px -18px oklch(28% 0.06 40 / 0.7);
}
.sleeve::before {  /* 左脊：唱片红标色带 */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-dark));
}
.sleeve__head { display: flex; align-items: baseline; gap: var(--space-sm); }
.sleeve__name { margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-xl); line-height: 1.05; color: var(--color-tree-bark-dark); text-wrap: balance; }
.sleeve__close { margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: 1.05rem; color: var(--color-muted); line-height: 1; }
.sleeve__close:hover { color: var(--color-accent-dark); }
/* 歌手简介：3-4 句，来自 bios.js；未收录时整段不出现 */
.sleeve__bio {
  margin: var(--space-sm) 0 var(--space-md); padding-bottom: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm); line-height: var(--leading-body);
  color: var(--color-ink-2); text-wrap: pretty;
}
.sleeve__bio a { color: var(--color-accent-dark); text-decoration: underline;
  text-underline-offset: 3px; white-space: nowrap; }
.sleeve__count { margin: var(--space-2xs) 0 var(--space-md); font-family: var(--font-mono);
  font-size: var(--text-xs); color: var(--color-muted); }
.sleeve__songs { margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1px var(--space-lg); }
.sleeve__item {
  display: flex; align-items: baseline; gap: var(--space-sm); width: 100%;
  border: 0; background: none; cursor: pointer; text-align: left; font: inherit;
  padding: 3px var(--space-xs); border-radius: var(--radius-sm);
  transition: background var(--dur-micro);
}
.sleeve__item:hover { background: oklch(100% 0 0 / 0.5); }
.sleeve__item[aria-current="true"] { background: var(--color-paper); box-shadow: inset 2px 0 0 var(--color-accent); }
.sleeve__song { font-size: var(--text-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink); }
.sleeve__times { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent-dark); }
.sleeve__year { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sleeve__seen { color: var(--color-accent-dark); font-size: var(--text-xs); }
@media (max-width: 44rem) {
  .collection, .collection.is-open { flex-direction: column; align-items: stretch; }
  .collection.is-open .vinyl { width: min(100%, 20rem); margin: 0 auto; }
}

/* ---------- 发现地图：黑胶收藏板 ---------- */
.map { margin-top: var(--space-2xl); padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule); }
.map__head { display: flex; align-items: baseline; gap: var(--space-md); margin-bottom: var(--space-lg); }
.map__label { margin: 0; font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral); }
.map__download { margin-left: auto; border: var(--rule-hair) solid var(--color-accent);
  background: var(--color-paper); color: var(--color-accent-dark); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-xs); padding: 5px 14px; border-radius: 999px;
  transition: background var(--dur-micro), color var(--dur-micro); }
.map__download:hover { background: var(--color-accent); color: var(--color-accent-ink); }

/* 黑胶唱片 */
.vinyl {
  position: relative; width: min(100%, 34rem); margin: 0 auto; aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.035) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 50% 50%, #2b2320 12%, #17110f 62%, #0b0807 100%);
  box-shadow: 0 20px 50px -20px oklch(20% 0.04 40 / 0.6), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.vinyl::after {  /* 中心红标 */
  content: ""; position: absolute; left: 50%; top: 50%; width: 40%; height: 40%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent) 0 62%, var(--color-accent-dark) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}
.vinyl__label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  text-align: center; color: var(--color-accent-ink); pointer-events: none; width: 38%;
}
.vinyl__label b { display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: 1; }
.vinyl__label span { display: block; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.06em; margin-top: 2px; opacity: 0.9; }
.vinyl__badges { position: absolute; inset: 0; z-index: 3; }

/* 头像徽章 pin */
.badge-pin {
  position: absolute; transform: translate(-50%, -50%);
  width: clamp(2.6rem, 9%, 3.4rem); aspect-ratio: 1; padding: 0;
  border: 2px solid var(--color-paper-2); border-radius: 50%; background: var(--color-neutral);
  cursor: pointer; overflow: visible;
  box-shadow: 0 3px 8px -1px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.3);
  transition: transform var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .badge-pin:hover { transform: translate(-50%, -50%) scale(1.15); z-index: 5; }
}
.badge-pin img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.badge-pin--text { display: grid; place-items: center; }
.badge-pin--text span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-paper); }
.badge-pin__n {
  position: absolute; right: -3px; bottom: -3px; min-width: 16px; height: 16px; padding: 0 3px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--color-accent); color: var(--color-accent-ink);
  font-family: var(--font-mono); font-size: 10px; line-height: 1;
  box-shadow: 0 0 0 1.5px var(--color-paper);
}
/* hover 显示艺人名 */
.badge-pin::after {
  content: attr(title); position: absolute; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%); white-space: nowrap; z-index: 6;
  background: var(--color-ink); color: var(--color-paper);
  font-family: var(--font-mono); font-size: var(--text-xs); padding: 3px 8px; border-radius: 4px;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-micro);
}
@media (hover: hover) and (pointer: fine) {
  .badge-pin:hover::after { opacity: 1; }
}

/* ---------- 分享图弹层（长按/右键保存）---------- */
.share-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: var(--space-lg); background: oklch(18% 0.02 40 / 0.64);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* 弹窗也是一张贴纸：奶白描边 + 微倾 + 弹入 */
.share-modal { background: var(--color-paper); border-radius: var(--radius-md);
  border: 6px solid oklch(96% 0.008 20);
  transform: rotate(-1.2deg);
  padding: var(--space-md); max-width: min(92vw, 30rem); text-align: center;
  box-shadow: 0 24px 64px -20px rgba(0,0,0,0.55); }
@media (prefers-reduced-motion: no-preference) {
  .share-modal { animation: stickerIn 260ms var(--ease-out); }
  @keyframes stickerIn {
    from { opacity: 0; transform: rotate(-4deg) scale(0.92); }
    to   { opacity: 1; transform: rotate(-1.2deg) scale(1); }
  }
}
.share-modal img { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; }
.share-tip { margin: var(--space-sm) 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.share-close { border: var(--rule-hair) solid var(--color-rule); background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-xs); padding: 5px 18px; border-radius: 999px; color: var(--color-ink-2); }
.share-close:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }

/* ---------- 页脚 ---------- */
.colophon { margin-top: var(--space-3xl); padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule); }

/* 翻唱源流专页推广卡：两张翻唱专辑封面做贴纸拼贴，整卡可点 */
.promo {
  display: flex; align-items: center; gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-paper-2), var(--color-paper));
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-micro);
}
@media (hover: hover) and (pointer: fine) {
  .promo:hover { border-color: var(--color-accent); }
  .promo:hover .promo__cta { color: var(--color-accent); }
  .promo:hover .promo__art img:first-child { transform: rotate(-6deg); }
  .promo:hover .promo__art img:last-child { transform: rotate(4.5deg); }
}
.promo__art { position: relative; flex: none; width: 8.75rem; height: 7.25rem; }
.promo__art img {
  position: absolute; width: 5.5rem; aspect-ratio: 1 / 1; object-fit: cover;
  border: 4px solid oklch(96% 0.008 20); border-radius: var(--radius-sm);
  box-shadow: 0 8px 20px -10px oklch(5% 0.01 265 / 0.8);
  transition: transform var(--dur-short) var(--ease-out);
}
.promo__art img:first-child { left: 0; top: 4px; transform: rotate(-4deg); }
.promo__art img:last-child { right: 0; bottom: 2px; transform: rotate(3deg); }
.promo__body { display: block; min-width: 0; }
.promo__title { display: block; font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-lg); color: var(--color-ink); }
.promo__desc { display: block; margin-top: var(--space-2xs);
  font-size: var(--text-sm); color: var(--color-neutral); text-wrap: pretty; }
.promo__cta { display: inline-block; margin-top: var(--space-xs);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.04em; color: var(--color-accent-dark);
  transition: color var(--dur-micro); }

/* 想搜歌的用户：直达翻唱源流页尾搜索区 */
.promo__more {
  display: inline-block; margin: var(--space-sm) 0 var(--space-xl);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-muted); text-decoration: underline;
  text-decoration-style: dotted; text-underline-offset: 4px;
}
.promo__more:hover { color: var(--color-accent-dark); text-decoration-style: solid; }

/* 章节导航：等宽小字、退灰，与筛选 chips 同语言 */
.colophon__nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.colophon__nav a {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em;
  color: var(--color-muted); text-decoration: none;
  transition: color var(--dur-micro);
}
.colophon__nav a:hover { color: var(--color-accent-dark); }

@media (max-width: 40rem) {
  .promo { flex-direction: column; align-items: flex-start; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 40rem) {
  .players { grid-template-columns: 1fr; }
  /* 竖排后取消"底边对齐"的下移与横向靠拢 */
  .player[data-side^="cover"] { margin-top: 0; }
  .player[data-side^="cover"] .player__cover { transform: rotate(1.2deg); }
  .player[data-side^="cover"].is-playing .player__cover { transform: none; }
}

/* ==========================================================================
   深色舞台（仅此页）：在 body 上重定义 tokens，其余页面不受影响。
   深蓝夜幕底色让封面成为主角；强调色为玫瑰粉（呼应另外两页的暖玫瑰纸色），
   用于标题渐变、播放中状态、已收藏、进度数字与选中 chips。其余交互色退灰。
   ========================================================================== */
body {
  /* 深蓝夜幕 + 玫瑰粉文字（参考 trevornoah.com/about 的 navy×pink 配色）；
     粉色与另外两页的暖玫瑰纸色同源，形成"同一本书的夜晚章节" */
  --color-paper: oklch(25% 0.05 265);
  --color-paper-2: oklch(28.5% 0.052 263);
  --color-paper-3: oklch(32% 0.055 262);
  --color-paper-rose: oklch(28% 0.05 264);
  --color-ink: oklch(95.5% 0.01 20);
  --color-ink-2: oklch(87% 0.02 15);
  --color-neutral: oklch(75% 0.025 270);
  --color-muted: oklch(68% 0.028 268);
  --color-rule: oklch(40% 0.05 264);
  --color-rule-2: oklch(34% 0.048 264);
  --color-accent: oklch(79% 0.1 15);
  --color-accent-dark: oklch(84% 0.085 18);
  --color-accent-ink: oklch(24% 0.05 265);
  --color-focus: oklch(80% 0.09 235);
  --color-card-neutral: oklch(28% 0.05 264);
  --color-card-coral: oklch(28% 0.05 264);
  --color-card-amber: oklch(30% 0.05 262);
  --color-tree-bark-dark: oklch(42% 0.05 264);
}

/* 背景光晕：左上一抹玫瑰、右上一抹靛蓝，舞台感 */
body::before {
  background:
    radial-gradient(ellipse 90% 55% at 20% 0%, oklch(36% 0.07 10 / 0.32), transparent 62%),
    radial-gradient(ellipse 65% 45% at 92% 10%, oklch(34% 0.08 285 / 0.38), transparent 65%);
}

/* 标题文字：玫瑰粉渐变（呼应另外两页的暖玫瑰）*/
.mast__title, .card__title {
  background: linear-gradient(115deg, oklch(90% 0.05 8), oklch(79% 0.11 22));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: oklch(84% 0.08 15);
}

/* --- 强调色降级：以下交互原本用红棕 accent，深色版全部退成灰阶 --- */

/* 报头副题用粉色呼应；进度条填充退灰、进度数字保留强调色 */
.mast__title span {
  color: var(--color-accent-dark);
  -webkit-text-fill-color: currentColor; background: none;
}
.progress__bar i { background: oklch(58% 0.04 265); }
.progress__count b { color: var(--color-accent); }

/* 介绍文字提亮（曲名下的副行、卡片元信息） */
.player__artist { color: var(--color-neutral); }
.card__by .meta { color: var(--color-neutral); }

/* 卡片：深色面板 + 更深的投影 */
.card {
  box-shadow: 0 1px 0 oklch(30% 0.016 216 / 0.6), 0 24px 50px -30px oklch(5% 0.01 220 / 0.8);
}

/* 顺藤摸瓜链接退灰 */
.card__by button { color: var(--color-ink-2); }

/* 播放键：半透明深色圆 + 白图标浮在封面上，更融入 */
.pbtn {
  background: oklch(16% 0.045 265 / 0.55); color: oklch(97% 0 0);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 3px 12px -2px oklch(5% 0.01 265 / 0.6);
}
@media (hover: hover) and (pointer: fine) {
  .pbtn:hover { background: oklch(12% 0.04 265 / 0.72); color: oklch(97% 0 0); transform: scale(1.06); }
}
/* 播放中状态：强调色（三处之二） */
.player.is-playing .pbtn { background: var(--color-accent); color: var(--color-accent-ink); }
.player.is-playing .player__cover { box-shadow: 0 0 0 2px var(--color-accent), 0 8px 24px -14px oklch(5% 0.01 220 / 0.8); }
.seek i { background: var(--color-accent); }

/* 原曲侧改用浅灰蓝：贴纸描边、播放中的按钮与描边、进度条。
   翻唱侧仍是玫瑰粉，两侧一眼可分。 */
.player[data-side^="orig"] .player__cover {
  border-color: var(--color-orig);
  /* 贴纸描边下面再垫一圈次色，两色斜向过渡（border 本身不能上渐变，用外圈 shadow 补） */
  box-shadow: 0 0 0 1px var(--color-orig-2), 0 10px 26px -12px oklch(5% 0.01 265 / 0.8);
}
.player[data-side^="orig"].is-playing .pbtn {
  background: linear-gradient(135deg, var(--color-orig), var(--color-orig-2));
  color: var(--color-orig-ink);
}
.player[data-side^="orig"].is-playing .player__cover {
  box-shadow: 0 0 0 2px var(--color-orig), 0 0 0 5px color-mix(in oklch, var(--color-orig-2) 45%, transparent),
    0 8px 24px -14px oklch(5% 0.01 220 / 0.8);
}
.player[data-side^="orig"] .seek i { background: linear-gradient(90deg, var(--color-orig), var(--color-orig-2)); }

/* 封面空位占位符 */
.player__cover--empty::after { color: var(--color-muted); }

/* 封面角标（原曲·年份 / 藤井風·版本）：原样式文字用 --color-paper，
   深色化后变成深字压深底看不清，这里显式给亮色 + 更实的深底 */
.cover-badge {
  background: oklch(15% 0.045 265 / 0.8);
  color: oklch(95% 0.008 20);
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.08);
}

/* 外链 hover 退灰 */
.player__ext:hover { color: var(--color-ink); }

/* 动作按钮：主按钮亮底反白已随 ink 翻转；hover 退灰 */
.deck__btn { background: transparent; }
.deck__btn:hover { border-color: oklch(50% 0.015 212); color: var(--color-ink); }
.deck__btn--primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.deck__btn--primary:hover { background: oklch(99% 0 0); border-color: oklch(99% 0 0); color: var(--color-paper); }
/* 已收藏：强调色（三处之三） */
.deck__btn[aria-pressed="true"] {
  background: transparent; border-color: var(--color-accent); color: var(--color-accent);
}

/* 收藏板：黑胶中心标与徽章数字保持强调色系（同属"已收藏"），内页退深 */
.map__download { background: transparent; }
.map__download:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.sleeve {
  background:
    radial-gradient(circle at 0 50%, transparent 11px, var(--color-tree-bark-dark) 11px 12px, transparent 12px),
    linear-gradient(180deg, oklch(30% 0.05 262), oklch(27% 0.05 264));
  box-shadow: 0 12px 30px -18px oklch(5% 0.01 265 / 0.85);
}
.sleeve__name { color: var(--color-ink); }
.sleeve__item:hover { background: oklch(100% 0 0 / 0.06); }
.sleeve__item[aria-current="true"] { background: oklch(100% 0 0 / 0.09); box-shadow: inset 2px 0 0 var(--color-accent); }
/* 头像 pin 也用贴纸式描边 */
.badge-pin { border: 3px solid oklch(96% 0.008 20); }
.badge-pin__n { box-shadow: 0 0 0 1.5px oklch(96% 0.008 20); }

/* 弹层 */
.share-overlay { background: oklch(8% 0.01 220 / 0.7); }