/* 回放 · 片库。整页一块主题色色块（设计系统 fb-block），回放那颗键的青色，不跟着谁变色（选英雄挪去了艺人页）。
   上面一排排筛选小标签（节目、日期、谁上桌、她拿的身份），底下「排第一的那局一张大的 + 一墙」：深色圆角卡、底边一道主题色厚边（fb-card），封面套淡滤镜（fb-wash）。
   自己的类都以 rp- 开头。 */
html { background: var(--fb-night); }
body.rp-body { margin: 0; min-height: 100vh; }
.rp { --theme: var(--fb-neon-cyan); min-height: calc(100vh - var(--fb-shell-tall)); padding: 0 0 72px; overflow-x: clip; }
.rp__in { max-width: calc(var(--fb-page-max) + 80px); margin: 0 auto; padding: 0 40px; }

/* ───────── 头 ───────── */
.rp-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding: 22px 0 4px; }
.rp-title { margin: 0; font: 400 44px/1.05 var(--font-display); letter-spacing: .04em; }
.rp-kick { margin: 0; font: 400 12px/16px var(--font-latin); letter-spacing: .14em; opacity: .78; }
.rp-kick i { font-style: normal; opacity: .6; }
.rp-total { margin-left: auto; font: 700 13px/20px var(--font-body); opacity: .82; }
.rp-note { margin: 4px 0 0; font: 500 13px/20px var(--font-body); opacity: .82; }
.rp-note[hidden] { display: none; }

/* ───────── 筛选：一排一种，左边一个小字头，右边一串小标签 ───────── */
.rp-filters { display: grid; gap: 10px; margin: 18px 0 6px; padding: 14px 16px; border-radius: var(--fb-radius-lg); background: color-mix(in srgb, var(--f-deep) 42%, transparent); }
.rp-filter { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: 10px; min-width: 0; }
.rp-filter[hidden] { display: none; }
.rp-filter__k { padding-top: 8px; font: 700 12px/18px var(--font-body); letter-spacing: .14em; color: var(--on); opacity: .85; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.rp-chips__wait { align-self: center; font: 500 12px/18px var(--font-body); color: var(--on); opacity: .75; }
/* 小标签：深色小卡片键，亮起来是卡面的颜色反过来 */
.rp-chip { --fb-n: 3px; position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border: 0; background: var(--card); color: var(--fb-ink); font: 500 13px/18px var(--font-body); cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--card-line), inset 0 -3px 0 var(--f-deep); clip-path: polygon(0 var(--fb-n), var(--fb-n) var(--fb-n), var(--fb-n) 0, calc(100% - var(--fb-n)) 0, calc(100% - var(--fb-n)) var(--fb-n), 100% var(--fb-n), 100% calc(100% - var(--fb-n)), calc(100% - var(--fb-n)) calc(100% - var(--fb-n)), calc(100% - var(--fb-n)) 100%, var(--fb-n) 100%, var(--fb-n) calc(100% - var(--fb-n)), 0 calc(100% - var(--fb-n))); transition: transform var(--fb-dur-state) var(--fb-ease-out); -webkit-tap-highlight-color: transparent; }
.rp-chip__n { font: 400 11px/16px var(--font-latin); color: var(--fb-ink-3); }
@media (hover: hover) { .rp-chip:not(:disabled):hover { transform: translateY(-2px); } }
.rp-chip:active { transform: translateY(2px); }
.rp-chip[aria-pressed="true"] { background: var(--fb-tube); color: var(--fb-night); font-weight: 700; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.rp-chip[aria-pressed="true"] .rp-chip__n { color: var(--fb-night); }
.rp-chip:disabled { opacity: .4; cursor: not-allowed; }
.rp-chip.is-hit { animation: rp-flash var(--fb-dur-state) steps(2, end) 1; }
.rp-chip:focus-visible { outline: 2px solid var(--fb-neon-cyan); outline-offset: -2px; }
@keyframes rp-flash { 0% { filter: brightness(1.8); } 100% { filter: none; } }
/* 谁上桌：头像 + 名字；挑中的那位亮成她的颜色 */
.rp-chip--who { padding-left: 5px; }
.rp-chip--who .fb-avatar { --s: 24px; box-shadow: 0 0 0 1.5px var(--a); }
.rp-chip--who[aria-pressed="true"] { background: var(--a); color: var(--a-ink, var(--fb-night)); }
.rp-chip--who[aria-pressed="true"] .fb-avatar { box-shadow: 0 0 0 1.5px var(--fb-night); }
.rp-chip--who[aria-pressed="true"] .rp-chip__n { color: inherit; opacity: .75; }
/* 霓虹棋子（/kit/roles/）挨着字：身份小标签、卡上的身份、MVP。棋子身子是深色的，描一圈很淡的白光 */
.rp-piece { width: 20px; height: 20px; flex: none; object-fit: contain; filter: drop-shadow(0 0 1px rgba(255,255,255,.75)) drop-shadow(0 0 4px rgba(255,255,255,.18)); }
.rp-chip .rp-piece { width: 24px; height: 24px; margin: 0 -2px 0 -4px; }

/* ───────── 列表头 ───────── */
.rp-list { scroll-margin-top: calc(var(--fb-shell-slim) + 12px); }
.rp-list__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 26px 0 12px; }
.rp-list__title { display: flex; align-items: center; gap: 12px; margin: 0; font-weight: 400; min-width: 0; }
.rp-list__title b { font: 400 34px/40px var(--font-display); letter-spacing: .04em; }
.rp-list__title small { font: 700 14px/20px var(--font-body); opacity: .8; white-space: nowrap; }
.rp-list__face .fb-avatar { --s: 40px; box-shadow: 0 0 0 2px var(--on); }
.rp-clear { --fb-n: 3px; flex: none; height: 32px; padding: 0 14px; border: 0; background: var(--card); color: var(--fb-ink); font: 500 13px/18px var(--font-body); cursor: pointer; box-shadow: inset 0 -3px 0 var(--f-deep); clip-path: polygon(0 var(--fb-n), var(--fb-n) var(--fb-n), var(--fb-n) 0, calc(100% - var(--fb-n)) 0, calc(100% - var(--fb-n)) var(--fb-n), 100% var(--fb-n), 100% calc(100% - var(--fb-n)), calc(100% - var(--fb-n)) calc(100% - var(--fb-n)), calc(100% - var(--fb-n)) 100%, var(--fb-n) 100%, var(--fb-n) calc(100% - var(--fb-n)), 0 calc(100% - var(--fb-n))); }
.rp-clear:active { transform: translateY(2px); }
.rp-clear[hidden] { display: none; }

/* ───────── 一局一张卡 ───────── */
.rp-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 26px 20px; }
.rp-card { display: flex; flex-direction: column; min-width: 0; }
.rp-card__top { position: relative; border-radius: var(--fb-radius-lg) var(--fb-radius-lg) 0 0; overflow: hidden; }
.rp-card__cover { aspect-ratio: 16 / 9; --wash-fade: 38%; }
.rp-card__cover img { transition: transform var(--fb-dur-enter) var(--fb-ease-out); }
@media (hover: hover) { .rp-card:hover .rp-card__cover img { transform: scale(1.04); } }
.rp-card__res { --fb-n: 2px; position: absolute; right: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; font: 700 12px/18px var(--font-body); clip-path: polygon(0 var(--fb-n), var(--fb-n) var(--fb-n), var(--fb-n) 0, calc(100% - var(--fb-n)) 0, calc(100% - var(--fb-n)) var(--fb-n), 100% var(--fb-n), 100% calc(100% - var(--fb-n)), calc(100% - var(--fb-n)) calc(100% - var(--fb-n)), calc(100% - var(--fb-n)) 100%, var(--fb-n) 100%, var(--fb-n) calc(100% - var(--fb-n)), 0 calc(100% - var(--fb-n))); }
.rp-card__res:has(.rp-piece) { padding-left: 3px; }
.rp-card__res.is-wolf { background: var(--fb-role-wolf); color: var(--fb-on-wolf); }
.rp-card__res.is-good { background: var(--fb-neon-green); color: var(--fb-on-green); }
.rp-card__res.is-none, .rp-card__res.is-lost { background: var(--fb-surface-3); color: var(--fb-ink-2); }
.rp-card__play { position: absolute; z-index: 2; right: 14px; bottom: 10px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(5,6,8,.72); border: 1.5px solid rgba(255,255,255,.5); color: #fff;
  transition: background var(--fb-dur-state), color var(--fb-dur-state), border-color var(--fb-dur-state), transform var(--fb-dur-state) var(--fb-ease-pop); }
.rp-card__play svg { width: 18px; height: 18px; fill: currentColor; margin-left: 2px; }
.rp-card__dur { position: absolute; z-index: 2; left: 12px; top: 12px; }
@media (hover: hover) { .rp-card:hover .rp-card__play { background: var(--fb-neon-green); border-color: var(--fb-neon-green); color: var(--fb-on-green); transform: scale(1.08); } }
/* 卡身：左边大期号（卡面的颜色填、主题色描边，首页 029 的写法），右边节目和时间；底下名场面那句、一排上桌的人 */
.rp-card__body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 6px 16px 16px; }
.rp-card__num { font: 400 46px/1 var(--font-latin); color: var(--card); -webkit-text-stroke: 2px var(--theme); paint-order: stroke fill; letter-spacing: -.02em; }
.rp-card__show { display: grid; gap: 2px; margin: 0; min-width: 0; }
.rp-card__show b { font: 400 22px/28px var(--font-display); letter-spacing: .04em; }
.rp-card__show span { font: 500 12px/16px var(--font-mono); color: var(--fb-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-card__say { grid-column: 1 / -1; margin: 4px 0 0; font: 500 14px/22px var(--font-body); color: var(--fb-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rp-card__say[hidden] { display: none; }
.rp-card__say.is-none { color: var(--fb-ink-3); font-size: 13px; }
.rp-card__who { margin-left: 6px; font: 500 12px/18px var(--font-body); color: var(--fb-ink-3); white-space: nowrap; }
.rp-card__mvp { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px 0 2px; margin-right: 2px; background: var(--fb-gold); color: var(--fb-on-gold); font: 400 11px/18px var(--font-latin); font-style: normal; vertical-align: 1px; }
.rp-card__mvp .rp-piece { width: 18px; height: 18px; filter: none; }
.rp-card__mvpline { grid-column: 1 / -1; margin: 2px 0 0; font: 500 13px/20px var(--font-body); color: var(--fb-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rp-card__cast { grid-column: 1 / -1; display: flex; flex-wrap: nowrap; margin-top: 6px; min-width: 0; overflow: hidden; padding: 3px 0 3px 3px; }
.rp-card__cast .fb-avatar { --s: 26px; flex: none; box-shadow: 0 0 0 2px var(--card); }
.rp-card__cast .fb-avatar + .fb-avatar { margin-left: -7px; }
.rp-card__cast .fb-avatar.is-picked { z-index: 2; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--a); }
.rp-card__kick { grid-column: 1 / -1; margin: 0; font: 700 12px/18px var(--font-body); letter-spacing: .2em; color: var(--theme); }
.rp-card__go { grid-column: 1 / -1; justify-self: start; margin-top: 12px; }

/* 排第一的那局：一张大的，图在左、字在右（图的右沿化进卡面） */
.rp-lead { margin-bottom: 26px; }
.rp-lead[hidden] { display: none; }
.rp-card--lead { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.rp-card--lead .rp-card__top { border-radius: var(--fb-radius-lg) 0 0 var(--fb-radius-lg); }
.rp-card--lead .rp-card__cover { aspect-ratio: auto; height: 100%; min-height: 320px; --wash-fade: 22%; }
.rp-card--lead .rp-card__cover img { position: absolute; inset: 0; }   /* 图不撑高这张卡：卡多高看右边的字，图铺满左边 */
.rp-card--lead .rp-card__body { align-content: center; padding: 24px 28px 24px 18px; gap: 6px 14px; }
.rp-card--lead .rp-card__num { font-size: 72px; }
.rp-card--lead .rp-card__show b { font-size: 30px; line-height: 36px; }
.rp-card--lead .rp-card__show span { font-size: 13px; }
.rp-card--lead .rp-card__say { font-size: 17px; line-height: 27px; -webkit-line-clamp: 3; margin-top: 8px; }
.rp-card--lead .rp-card__cast .fb-avatar { --s: 30px; }

.rp-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 20px 34px; text-align: center; }
.rp-empty[hidden] { display: none; }
.rp-empty .fb-monster { --m: 44px; }
.rp-empty b { font: 400 28px/34px var(--font-display); letter-spacing: .04em; }
.rp-empty span { color: var(--fb-ink-3); font-size: 14px; }
.rp-load { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 14px/20px var(--font-body); }
.rp-load[hidden] { display: none; }

/* ───────── 平板、窄电脑 ───────── */
@media (min-width: 768px) and (max-width: 1099px) {
  .rp__in { padding: 0 16px; }
  .rp-card--lead { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .rp-card--lead .rp-card__num { font-size: 56px; }
}
/* ───────── 手机竖屏：筛选一排一排横着划；大的那张上下排；其余一行一局（封面在左，右沿化进卡面） ───────── */
@media (max-width: 767px) {
  .rp__in { padding: 0 12px; }
  .rp-head { padding: 14px 4px 0; gap: 4px 10px; }
  .rp-title { font-size: 34px; }
  .rp-kick { font-size: 11px; }
  .rp-note { padding: 0 4px; }
  .rp-filters { margin: 12px 0 4px; padding: 10px 0 10px 10px; gap: 8px; }
  .rp-filter { grid-template-columns: 1fr; gap: 4px; }
  .rp-filter__k { padding: 0 0 0 2px; font-size: 11px; letter-spacing: .14em; }
  .rp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 10px 4px 0; }
  .rp-chips::-webkit-scrollbar { display: none; }
  .rp-chip { flex: none; }
  .rp-list__head { margin: 20px 4px 10px; }
  .rp-list__title b { font-size: 26px; line-height: 32px; }
  .rp-wall { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rp-card:not(.rp-card--lead) { display: grid; grid-template-columns: 132px minmax(0, 1fr); }
  .rp-card:not(.rp-card--lead) .rp-card__top { height: 100%; border-radius: var(--fb-radius-lg) 0 0 var(--fb-radius-lg); }
  .rp-card:not(.rp-card--lead) .rp-card__cover { aspect-ratio: auto; height: 100%; min-height: 128px; --wash-mask: linear-gradient(90deg, #000 55%, transparent); }
  .rp-card:not(.rp-card--lead) .rp-card__res { right: auto; left: 8px; top: 8px; }
  .rp-card:not(.rp-card--lead) .rp-card__dur { top: auto; bottom: 8px; left: 8px; }
  .rp-card:not(.rp-card--lead) .rp-card__play { display: none; }
  .rp-card:not(.rp-card--lead) .rp-card__body { padding: 10px 12px 12px 6px; gap: 2px 8px; align-content: start; }
  .rp-card__num { font-size: 30px; -webkit-text-stroke-width: 1.5px; }
  .rp-card__show b { font-size: 18px; line-height: 24px; }
  .rp-card__say { font-size: 13px; line-height: 20px; }
  .rp-card__cast .fb-avatar { --s: 22px; }
  .rp-card__cast .fb-avatar + .fb-avatar { margin-left: -8px; }
  .rp-card__cast { margin-top: 4px; }
  .rp-card--lead { grid-template-columns: minmax(0, 1fr); }
  .rp-card--lead .rp-card__top { border-radius: var(--fb-radius-lg) var(--fb-radius-lg) 0 0; }
  .rp-card--lead .rp-card__cover { aspect-ratio: 16 / 9; height: auto; min-height: 0; --wash-mask: linear-gradient(180deg, #000 70%, transparent); }
  .rp-card--lead .rp-card__body { padding: 6px 16px 16px; }
  .rp-card--lead .rp-card__num { font-size: 46px; }
  .rp-card--lead .rp-card__show b { font-size: 24px; line-height: 30px; }
  .rp-card--lead .rp-card__say { font-size: 15px; line-height: 23px; }
  .rp-card--lead .rp-card__go { justify-self: stretch; }
}
/* ───────── 手机横屏、矮窗口：头收小；筛选也横着划，省高度 ───────── */
@media (min-width: 768px) and (max-height: 480px) {
  .rp__in { padding: 0 16px; }
  .rp-head { padding: 10px 0 0; } .rp-title { font-size: 30px; }
  .rp-filters { gap: 6px; padding: 8px 12px; }
  .rp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rp-chips::-webkit-scrollbar { display: none; }
  .rp-chip { flex: none; height: 30px; }
  .rp-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-card--lead .rp-card__cover { min-height: 220px; }
  .rp-card--lead .rp-card__num { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) { .rp, .rp *, .rp *::before, .rp *::after { animation: none !important; transition: none !important; } }