/* American Typewriter（从 .ttc 拆出的单独字重，放 assets/fonts/）
   文件名约定：american-typewriter(.woff2/.ttf)=Regular(400)，american-typewriter-bold(.woff2/.ttf)=Bold(700) */
@font-face{
  font-family:'American Typewriter';
  src:url('/assets/fonts/american-typewriter.woff2') format('woff2'),
      url('/assets/fonts/american-typewriter.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'American Typewriter';
  src:url('/assets/fonts/american-typewriter-bold.woff2') format('woff2'),
      url('/assets/fonts/american-typewriter-bold.ttf') format('truetype');
  font-weight:700;font-style:normal;font-display:swap;
}

/* 菲比歌单（phoebesongs.html） */
.phb-wrap{width:100%;max-width:760px;margin:0 auto;}
.phb-toolbar{display:flex;justify-content:center;margin:10px 0 26px;}
.phb-shuffle{
  appearance:none;border:none;cursor:pointer;
  font-family:'American Typewriter','Courier New',Courier,monospace;font-size:15px;font-weight:400;color:#fff;
  background:linear-gradient(135deg,#7a4fd0,#5a8fd6);
  padding:7px 16px;border-radius:999px;
  box-shadow:0 4px 12px rgba(122,79,208,.4);
  transition:transform .12s ease, box-shadow .12s ease;
}
.phb-shuffle:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(122,79,208,.55);}
.phb-shuffle:active{transform:translateY(1px) scale(.98);}

.phb-setlist{display:flex;flex-direction:column;gap:22px;}
.phb-loading{color:var(--muted);text-align:center;font-size:14px;}

.phb-song{
  position:relative;display:flex;align-items:center;gap:16px;
  background:var(--bg-card);
  color:#f0eaf6;
  border-radius:8px;padding:20px 22px;
  box-shadow:0 10px 26px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.25);
  transform:rotate(var(--rot,0deg));
  transition:transform .25s ease, box-shadow .25s ease;
}
.phb-song:hover{transform:rotate(0deg) translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.3);}
.phb-song.pluck{animation:phb-pluck .5s ease;}
@keyframes phb-pluck{
  0%{transform:rotate(var(--rot)) scale(1);}
  28%{transform:rotate(calc(var(--rot) - 5deg)) scale(1.035);}
  58%{transform:rotate(calc(var(--rot) + 4deg)) scale(1.01);}
  100%{transform:rotate(var(--rot)) scale(1);}
}
.phb-song::before{ /* 胶带 */
  content:"";position:absolute;top:-12px;left:50%;
  width:96px;height:26px;transform:translateX(-50%) rotate(-3deg);
  background:rgba(238,228,248,.4);
  border-left:1px dashed rgba(0,0,0,.08);border-right:1px dashed rgba(0,0,0,.08);
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.phb-main{flex:1;min-width:0;}
.phb-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.phb-title{font-family:'American Typewriter','Courier New',Courier,monospace;font-weight:400;font-size:22px;line-height:1.15;margin:0;}
.phb-ep{font-size:12px;font-weight:700;color:#241712;background:var(--c,#888);padding:3px 9px;border-radius:999px;white-space:nowrap;}
.phb-lyrics{
  font-family:'American Typewriter','Courier New',Courier,monospace;font-size:16px;line-height:1.5;
  white-space:pre-line;margin:10px 0 0;color:#e4dcef;
  border-left:3px solid rgba(184,155,224,.45);padding-left:14px;
}
.phb-lyrics.is-clamped{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;position:relative;
}
.phb-lyrics.is-clamped::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1.5em;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--bg-card));
  pointer-events:none;
}
.phb-note{
  font-family:'American Typewriter','Courier New',Courier,monospace;font-size:14px;
  color:#b6a9c9;margin-top:10px;
}

/* 右侧播放按钮（音频库待建，先占位交互） */
.phb-play{
  flex:0 0 auto;align-self:center;
  width:50px;height:50px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#7a4fd0,#5a8fd6);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:3px;
  box-shadow:0 6px 16px rgba(122,79,208,.5);
  transition:transform .12s ease;
}
.phb-play:hover{transform:scale(1.06);}
.phb-play .tri{width:0;height:0;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px;}
.phb-play.playing{background:linear-gradient(135deg,#3f9e8c,#74c9b6);}
.phb-play.playing .tri{display:none;}
.phb-play .eq{display:none;align-items:flex-end;gap:3px;height:20px;}
.phb-play.playing .eq{display:flex;}
.phb-play .eq i{width:4px;background:#fff;border-radius:2px;animation:phb-eq .8s ease-in-out infinite;}
.phb-play .eq i:nth-child(1){height:8px;animation-delay:0s;}
.phb-play .eq i:nth-child(2){height:18px;animation-delay:.15s;}
.phb-play .eq i:nth-child(3){height:12px;animation-delay:.3s;}
@keyframes phb-eq{0%,100%{transform:scaleY(.5);}50%{transform:scaleY(1);}}

.phb-play .phb-progress{display:none;}
.phb-play-btn{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}

@media (max-width:520px){
  /* 播放按钮被响应式挤到第二行时：沿用原始圆形按钮样式，但与“说明”同行、靠右 */
  .phb-song{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "head   head"
      "lyrics lyrics"
      "note   play";
    gap:0 16px;align-items:center;
  }
  .phb-main{display:contents;}
  .phb-head{grid-area:head;}
  .phb-lyrics{grid-area:lyrics;}
  .phb-note{grid-area:note;align-self:center;}
  .phb-play{grid-area:play;align-self:center;}
  /* 无音频的卡片：播放按钮已不渲染，去掉空的 play 列与其列间距 */
  .phb-song--noaudio{
    grid-template-columns:1fr;
    grid-template-areas:
      "head"
      "lyrics"
      "note";
  }
}

/* ---------- 滚动过一屏后显示的「回到顶部」悬浮按钮（样式同 movies 的 .movies-backtop） ---------- */
.phb-backtop {
  position: fixed;
  right: 18px;
  bottom: 24px;
  z-index: 70;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(109, 74, 166, .88);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background .15s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.phb-backtop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.phb-backtop:hover { background: #6d4aa6; transform: translateY(-2px); }
.phb-backtop:active { transform: scale(.94); }

/* ---------- Surprise Me 选中态：半透遮罩（压暗其他区域）+ 卡片高亮外框（效果同 movies） ---------- */
.phb-pick-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(8, 5, 16, .62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.phb-pick-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* 选中的歌卡：金色高亮外框 + 微微放大回弹；z-index 高于遮罩(55)，浮在遮罩之上 */
.phb-song--picked {
  border-color: rgba(249, 200, 14, .9);
  box-shadow:
    0 0 0 2px rgba(249, 200, 14, .5),
    0 14px 34px rgba(249, 200, 14, .22),
    0 8px 20px rgba(0, 0, 0, .5);
  animation: phbCardPicked 1s ease;
  z-index: 60;
}
@keyframes phbCardPicked {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.05); }
  58%  { transform: scale(.99); }
  100% { transform: scale(1); }
}

/* 底部导航固定后，内容仍可完整滚动到按钮上方。 */
.app--home{padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px));}
.fixed-bottom-nav .admin-link{
  color:#c9bff0;padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
}
.fixed-bottom-nav .admin-link:hover{color:#fff;background:rgba(155,120,224,.22);}