/* 「看过的」页面：顶栏、卡片、分区标题、分类按钮和各主题配色都沿用 music.css / music-aya.css，这里只写片单自己的部分 */

/* 顶部拼贴：海报是竖的，两行固定等高，各自裁成方块 */
.w-covers { grid-template-rows: 1fr 1fr; }
.w-covers img { min-height: 0; object-position: 50% 25%; }

/* ---------- 在看 / 在玩 ---------- */
.now { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.now:empty { display: none; }
.now-card {
  display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 16px 12px 12px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.now-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--yellow); }
.now-card img { width: 78px; height: 117px; object-fit: cover; border-radius: 8px; border: 1.5px solid var(--card-line); display: block; }
.now-text { display: grid; gap: 3px; min-width: 0; }
.now-k { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; letter-spacing: .08em; color: var(--accent); }
.now-dot { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; animation: now-pulse 1.8s ease-out infinite; }
@keyframes now-pulse { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(229, 72, 77, 0); } }
.now-text b { font-size: 20px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-text small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-text small:empty { display: none; }

/* ---------- 分类按钮（沿用歌单页的 .cats） ---------- */
.w-tools { display: block; margin-top: 16px; }

/* ---------- 海报墙 ---------- */
.posters { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 18px 14px; }
.posters li[hidden] { display: none; }
.posters .sec { margin-top: 1.4rem; }
.posters .sec:first-child { margin-top: 0; }
.posters .sec::after { order: 2; }
.sec-link { order: 3; font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; }
.sec-link:hover { color: var(--accent); }
.p-card { display: block; content-visibility: auto; contain-intrinsic-size: 132px 260px; }
.p-img {
  position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden;
  background: var(--chip-bg); border: 1.5px solid var(--card-line); box-shadow: 4px 4px 0 var(--card-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.p-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.p-card:hover .p-img { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--yellow); }
.p-t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 8px; padding: 0 2px; font-size: 13.5px; line-height: 1.32;
}
.p-m { display: block; padding: 0 2px; font-size: 11.5px; color: var(--muted); }
.p-m:empty { display: none; }
/* 最爱：海报外一圈主题色 + 左上角飘带 */
.poster.fav .p-img { outline: 3px solid var(--accent); outline-offset: 3px; }
.p-fav { position: absolute; left: 0; top: 10px; }
.p-fav::before {
  content: "♥ " attr(data-label); display: block; padding: 3px 9px 3px 7px; border-radius: 0 999px 999px 0;
  background: var(--accent); color: #fff; font-size: 11.5px; font-style: normal; letter-spacing: .04em; text-shadow: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

/* ---------- 窄屏（手机竖屏、Duo） ---------- */
@media (max-width: 640px) {
  .now { gap: 10px; margin-top: 12px; }
  .now-card { grid-template-columns: 48px minmax(0, 1fr); gap: 9px; padding: 9px; }
  .now-card img { width: 48px; height: 72px; border-radius: 6px; }
  .now-k { font-size: 11.5px; gap: 6px; }
  .now-text b { font-size: 15.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .now-text small { font-size: 11px; }
  .w-tools { margin-top: 12px; padding: 12px; }
  .posters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; margin-top: 16px; }
  .p-img { border-radius: 8px; box-shadow: 3px 3px 0 var(--card-shadow); }
  .p-t { font-size: 12.5px; margin-top: 6px; }
  .p-m { font-size: 10.5px; }
  .p-fav::before { font-size: 10px; padding: 2px 7px 2px 5px; }
}
/* 很窄（小手机）：在看 / 在玩上下排 */
@media (max-width: 340px) { .now { grid-template-columns: minmax(0, 1fr); } }
/* 展开的 Duo 内屏、小平板竖屏：一行 4 张 */
@media (min-width: 560px) and (max-width: 640px) { .posters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 手机横屏（很矮）：海报小一点，一行多放几张 */
@media (max-height: 500px) and (min-aspect-ratio: 3/2) {
  .posters { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .now-card { grid-template-columns: 52px minmax(0, 1fr); }
  .now-card img { width: 52px; height: 78px; }
}

/* ---------- 雨夜（电脑、手机横屏）：深色玻璃，金色小字 ---------- */
@media (pointer: fine) and (min-aspect-ratio: 6/5), (pointer: none) and (min-aspect-ratio: 6/5), (pointer: coarse) and (min-aspect-ratio: 2/1) {
  .now-k { color: var(--yellow); }
  .now-text b { font-family: var(--serif); font-style: italic; font-weight: 600; color: #FFE3A3; font-size: 22px; }
  .p-img { box-shadow: 0 .5rem 1.2rem rgba(0, 0, 0, .45); border-color: rgba(255, 210, 122, .35); }
  a.p-card:hover .p-img { box-shadow: 0 .7rem 1.6rem rgba(0, 0, 0, .55), 0 0 0 2px rgba(255, 210, 122, .6); }
  .poster.fav .p-img { outline-color: #FFD27A; }
  .p-fav::before { background: #F2C46D; color: #1A1D26; }
}
/* ---------- 绘梨衣（平板）：黑线框、方角、硬阴影 ---------- */
@media (pointer: coarse) and (min-aspect-ratio: 3/5) and (max-aspect-ratio: 2/1) {
  .now-card img, .p-img { border: 2px solid #111; border-radius: .2rem; }
  .p-img { box-shadow: 4px 4px 0 #111; }
  a.p-card:hover .p-img, .now-card:hover { box-shadow: 6px 6px 0 var(--accent); }
  .p-fav::before { border-radius: 0; background: #111; color: #FFD43B; }
  .poster.fav .p-img { outline: 3px solid var(--accent); }
}
/* ---------- 幽香（手机竖屏、竖向电脑窗口）：大圆角、暖色柔影、叶绿小字 ---------- */
@media (max-aspect-ratio: 3/5), (pointer: fine) and (max-aspect-ratio: 6/5), (pointer: none) and (max-aspect-ratio: 6/5) {
  .now-card img { border-radius: 12px; }
  .p-img { border-radius: 14px; box-shadow: 0 .45rem 1.1rem rgba(120, 80, 0, .2); }
  a.p-card:hover .p-img { box-shadow: 0 .6rem 1.4rem rgba(120, 80, 0, .28), 0 0 0 3px #F5B82E; }
  .poster.fav .p-img { outline-color: #F5B82E; }
  .p-fav::before { background: #F5B82E; color: #22170A; }
}

/* ---------- 射命丸文（Duo）：报纸文化版 —— 白边照片、红色印章 ---------- */
html.aya .now-card { border-radius: .3rem; }
html.aya .now-card:hover { box-shadow: .25rem .25rem 0 var(--ink); }
html.aya .now-card img { border-radius: 0; border: 3px solid #FBF8F0; box-shadow: 0 .2rem .5rem rgba(31, 27, 22, .3); transform: rotate(-2deg); }
html.aya .now-playing img { transform: rotate(2deg); }
html.aya .now-k { color: var(--red); }
html.aya .now-dot { background: var(--red); }
html.aya .p-img { border-radius: 0; border: 4px solid #FBF8F0; box-shadow: 0 .3rem .8rem rgba(31, 27, 22, .28); }
html.aya a.p-card:hover .p-img { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 .5rem 1.2rem rgba(31, 27, 22, .35); }
html.aya .poster.fav .p-img { outline: 2px solid var(--red); outline-offset: 2px; }
html.aya .p-fav { left: auto; right: 4px; top: 4px; }
html.aya .p-fav::before {
  content: attr(data-label); border-radius: .15rem; padding: 1px 6px; background: transparent; color: var(--red);
  border: 2px solid var(--red); transform: rotate(8deg); box-shadow: inset 0 0 0 1px rgba(184, 53, 43, .25); background: rgba(251, 248, 240, .9);
}
html.aya .sec-link { color: var(--ink-2, #4A4236); }