/* 回放 · 选英雄。整页一块主题色色块（设计系统 fb-block），颜色跟着中间那张卡：「全部」是青（回放那颗键的颜色），挑到谁就是谁的名牌色。
   上面一排人像卡（/design/heroflow.css），底下一张深色圆角卡写她是谁；再往下是她的局（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; transition: background-color var(--fb-dur-enter) var(--fb-ease-out); overflow-x: clip; }
.rp__in { max-width: calc(var(--fb-page-max) + 80px); margin: 0 auto; padding: 0 40px; }
.rp-cut { --fb-n: 3px; clip-path: var(--fb-shell-cut, none); }

/* ───────── 头 ───────── */
.rp-head { display: flex; align-items: baseline; gap: 16px; padding: 22px 0 4px; }
.rp-kick { margin: 0; font: 400 12px/16px var(--font-latin); letter-spacing: .14em; opacity: .78; order: 2; }
.rp-kick i { font-style: normal; opacity: .6; }
.rp-title { margin: 0; font: 400 44px/1.05 var(--font-display); letter-spacing: .04em; }

/* ───────── 选英雄：一排卡 + 中间那位的信息卡 ───────── */
.rp-flow { color: var(--on); margin-top: 6px; }
/* ───────── 她的局 ───────── */
.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: 40px 0 12px; }
.rp-list__title { display: flex; align-items: center; gap: 12px; margin: 0; font-weight: 400; }
.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; }
.rp-list__face .fb-avatar { --s: 40px; box-shadow: 0 0 0 2px var(--on); }
.rp-clear { --fb-n: 3px; 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: var(--fb-shell-cut, none); }
.rp-clear:active { transform: translateY(2px); }
.rp-clear[hidden] { display: none; }
.rp-filters { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 20px; }
.rp-filter { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rp-filter__k { flex: none; font: 700 12px/18px var(--font-body); letter-spacing: .3em; opacity: .8; }
.rp-shows, .rp-days { display: flex; flex-wrap: wrap; gap: 8px; }
/* 筛选小标签：深色小卡片键，亮起来是卡面的颜色反过来 */
.rp-chip { --fb-n: 3px; position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: 0; background: var(--card); color: var(--fb-ink); font: 500 13px/18px var(--font-body); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--card-line), inset 0 -3px 0 var(--f-deep); clip-path: var(--fb-shell-cut, none); 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-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; padding: 2px 8px; font: 700 12px/18px var(--font-body); clip-path: var(--fb-shell-cut, none); }
.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 { background: var(--fb-surface-3); color: var(--fb-ink-2); }
.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 { grid-row: span 1; 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__mvp { display: inline-block; padding: 0 6px; margin-right: 2px; background: var(--fb-gold); color: var(--fb-on-gold); font: 400 11px/18px var(--font-latin); font-style: normal; }
.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-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; } }
/* ───────── 手机竖屏：卡占得住，信息卡上下排；她的局一行一局（封面在左，右沿化进卡面） ───────── */
@media (max-width: 767px) {
  .rp__in { padding: 0 12px; }
  .rp-head { padding: 14px 4px 0; gap: 10px; }
  .rp-title { font-size: 34px; }
  .rp-kick { font-size: 11px; }
  .rp-list__head { margin: 28px 4px 10px; }
  .rp-list__title b { font-size: 28px; line-height: 34px; }
  .rp-filters { flex-direction: column; gap: 10px; }
  .rp-filter { align-items: flex-start; }
  .rp-filter__k { padding-top: 7px; letter-spacing: .2em; }
  .rp-shows, .rp-days { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .rp-shows::-webkit-scrollbar, .rp-days::-webkit-scrollbar { display: none; }
  .rp-chip { flex: none; }
  .rp-wall { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rp-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); }
  .rp-card__top { height: 100%; border-radius: var(--fb-radius-lg) 0 0 var(--fb-radius-lg); }
  .rp-card__cover { aspect-ratio: auto; height: 100%; min-height: 128px; --wash-mask: linear-gradient(90deg, #000 55%, transparent); }
  .rp-card__res { right: auto; left: 8px; top: 8px; }
  .rp-card__dur { top: auto; bottom: 8px; left: 8px; }
  .rp-card__play { display: none; }
  .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; }
}
/* ───────── 手机横屏、矮窗口：头收小，信息卡两栏收紧 ───────── */
@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-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .rp, .rp *, .rp *::before, .rp *::after { animation: none !important; transition: none !important; } }