/* 看片会（watch-party.js）：放映角那块屏。只在 program=watchparty 的回放 / 直播里出现（body.wp-on）。
   只用设计系统（design/fable、design/tokens）的 token；狼人杀的阶段栏、阶段小签在看片会里收起来，进度看屏上的「第几条」。 */

.wp-on .st__side, .wp-on .st-kick {display:none !important}

/* 屏：电脑上挂在左边（狼人杀阶段栏让出来的那块，挡不着谁的脸，也不压右边的卡片流）；手机竖屏、横屏缩成一条「正在放」 */
.wp-screen {position:absolute;z-index:13;left:28px;top:150px;width:min(380px,27vw);
  display:grid;gap:6px;padding:12px 16px 10px;border:1px solid var(--fb-line-strong);border-radius:var(--fb-radius-md);
  background:linear-gradient(180deg,rgba(10,13,15,.88),rgba(10,13,15,.72));box-shadow:0 0 0 1px rgba(34,227,255,.12),0 0 28px rgba(34,227,255,.18);
  color:var(--fb-ink);pointer-events:none;overflow:hidden}
.wp-screen[hidden], .posterup .wp-screen {display:none}  /* 片头海报还盖着的时候不出屏，免得透过海报叠在片名上 */
.wp-screen::after {content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.wp-head {display:flex;align-items:center;gap:8px;min-width:0;font:400 12px/16px var(--font-latin),var(--font-body);letter-spacing:.08em;color:var(--fb-ink-3)}
.wp-head b {color:var(--fb-neon-cyan);font-weight:400}
.wp-src {flex:none;padding:1px 6px;border:1px solid currentColor;border-radius:var(--fb-radius-xs);color:var(--fb-neon-green)}
.wp-src--news {color:var(--fb-gold)}
.wp-src--guest {color:var(--fb-neon-magenta)}
.wp-by {margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp-link {flex:none;pointer-events:auto;color:var(--fb-neon-cyan);text-decoration:none;border-bottom:1px solid currentColor;line-height:14px}
.wp-link:hover {color:var(--fb-ink)}
.wp-link:focus-visible {outline:none;box-shadow:var(--fb-ring-focus)}
.wp-title {margin:0;font:700 20px/26px var(--font-body);letter-spacing:.02em;color:var(--fb-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 0 12px rgba(57,255,143,.25)}
.wp-meta {margin:0;font:400 12px/18px var(--font-body);color:var(--fb-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp-look {margin:0;font:400 12px/18px var(--font-body);color:var(--fb-ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wp-look::before {content:"上网机：";color:var(--fb-neon-cyan)}
.wp-ask {margin:0;padding:4px 8px;border-left:2px solid var(--fb-gold);background:var(--fb-gold-tint);font:400 13px/18px var(--font-body);color:var(--fb-ink)}
.wp-ask[hidden], .wp-look[hidden], .wp-meta[hidden] {display:none}

/* 弹幕：两道（手机一道），从右往左飘；刷了好几条的带个「×N」。动作少的设置下排成一行不动 */
.wp-lanes {position:relative;height:44px;margin-top:2px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.wp-lane {position:absolute;left:0;right:0;height:20px;white-space:nowrap}
.wp-lane:nth-child(2) {top:22px}
.wp-dm {position:absolute;left:100%;top:0;padding:0 2px;font:400 14px/20px var(--font-body);color:#fff;
  text-shadow:0 0 2px #000,0 0 6px rgba(0,0,0,.8);animation:wp-fly var(--wp-dur,9s) linear var(--wp-delay,0s) infinite both}
.wp-dm i {font-style:normal;margin-left:4px;font:400 11px/20px var(--font-latin);color:var(--fb-gold)}
.wp-dm.is-hot {color:var(--fb-neon-green)}
@keyframes wp-fly {from {transform:translateX(0)} to {transform:translateX(calc(-100% - var(--wp-w,380px)))}}
.wp-empty {font:400 12px/20px var(--font-body);color:var(--fb-ink-3)}

/* 投片王 / 片王：三条排成一张小榜 */
.wp-board {display:grid;gap:4px;margin:0;padding:0;list-style:none}
.wp-board li {display:flex;align-items:center;gap:8px;min-width:0;font:400 13px/20px var(--font-body);color:var(--fb-ink-2)}
.wp-board li b {flex:none;color:var(--fb-ink-3);font:400 12px/20px var(--font-latin)}
.wp-board li span {flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp-board li em {flex:none;font-style:normal;color:var(--fb-gold)}
.wp-board li.is-king {color:var(--fb-ink)}
.wp-board li.is-king b {color:var(--fb-gold)}

/* 手机竖屏：一条，挂在头像下面、「怎么玩」左边 */
@media (max-width: 760px) {
  .wp-screen {left:10px;right:72px;top:118px;width:auto;gap:2px;padding:6px 10px 4px}
  .wp-title {font-size:15px;line-height:20px;-webkit-line-clamp:1}
  .wp-head {font-size:11px;line-height:14px}
  .wp-look, .wp-ask, .wp-meta {display:none}
  .wp-lanes {height:20px}
  .wp-lane:nth-child(2) {display:none}
  .wp-dm {font-size:13px}
  .wp-board li {font-size:12px;line-height:17px}
  .wp-board li:not(.is-king):nth-child(n+3) {display:none}
}
/* 手机横屏：矮，一条压在左上，避开右边的卡片流 */
@media (max-height: 520px) and (min-width: 600px) {
  .wp-screen {left:140px;right:auto;top:44px;width:min(420px,calc(100vw - 440px));gap:2px;padding:5px 10px 3px}
  .wp-title {font-size:14px;line-height:18px;-webkit-line-clamp:1}
  .wp-head, .wp-look, .wp-ask, .wp-meta {display:none}
  .wp-lanes {height:20px}
  .wp-lane:nth-child(2) {display:none}
  .wp-board li:not(.is-king):nth-child(n+2) {display:none}
}
@media (prefers-reduced-motion: reduce) {
  .wp-dm {position:static;display:inline-block;animation:none;margin-right:10px}
  .wp-lane {display:flex;flex-wrap:nowrap;overflow:hidden}
}
/* 「怎么玩」卡片里看片会那几句 */
.wp-howto {display:grid;gap:6px;margin:8px 0 0;padding:0 0 0 18px;font:400 13px/20px var(--font-body);color:var(--fb-ink-2)}
.lite .wp-screen {box-shadow:none;background:rgba(10,13,15,.9)}
.lite .wp-screen::after {display:none}