/* 放映厅 · 今晚这一桌。整页一块主题色色块（fb-block），颜色跟着中间那张卡；没卡的时候是放映厅那颗键的绿。
   上面一张大的「在演 / 倒计时」，中间同一套选英雄的卡（/design/heroflow.css），下面上一局（深色圆角卡、底边一道主题色厚边，封面套淡滤镜、右沿化进卡面）。
   自己的类都以 th- 开头。 */
html { background: var(--fb-night); }
body.th-body { margin: 0; min-height: 100vh; }
.th { --theme: var(--fb-neon-green); 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; }
.th__in { max-width: calc(var(--fb-page-max) + 80px); margin: 0 auto; padding: 0 40px; }

/* ───────── 在演 / 倒计时 ───────── */
.th-now { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kick go" "title go" "clock go" "bet bet"; align-items: end; gap: 4px 24px; padding: 26px 0 8px; }
.th-kick { grid-area: kick; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font: 700 13px/20px var(--font-body); }
.th-kick span:last-child { font-weight: 500; opacity: .8; }
.th-dot { width: 10px; height: 10px; border: 2px solid currentColor; }
.th.is-live .th-dot { background: #ff3b47; border-color: #ff3b47; animation: fb-blink 1.2s steps(2, end) infinite; }
.th-title { grid-area: title; margin: 0; font: 400 58px/1.05 var(--font-display); letter-spacing: .04em; }
.th-clock { grid-area: clock; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 6px 0 0; }
.th-clock[hidden] { display: none; }
.th-clock span { font: 700 13px/20px var(--font-body); letter-spacing: .2em; }
.th-clock b { font: 400 44px/1 var(--font-latin); letter-spacing: .02em; }
.th-clock small { font: 500 12px/16px var(--font-mono); opacity: .75; }
.th-go { grid-area: go; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; align-self: center; }
.th-key-big { height: var(--fb-control-lg); padding: 0 26px; font-size: 16px; }
.th-bet { grid-area: bet; margin: 10px 0 0; font: 500 13px/20px var(--font-body); opacity: .82; }

/* ───────── 今晚这一桌 ───────── */
.th-cast { margin-top: 18px; }
.th-cast[hidden] { display: none; }
.th-cast__title { margin: 0; font: 400 32px/38px var(--font-display); letter-spacing: .04em; }
.th-cast__note { margin: 4px 0 0; font: 500 13px/20px var(--font-body); opacity: .82; }
.th-cast__note[hidden] { display: none; }
.th-flow { color: var(--on); margin-top: 4px; }

/* ───────── 上一局、全部回放 ───────── */
.th-more { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; margin-top: 30px; }
.th-last { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 0 18px 0 0; overflow: visible; min-width: 0; }
.th-last[hidden] { display: none; }
.th-last__pic { display: block; height: 124px; border-radius: var(--fb-radius-lg) 0 0 var(--fb-radius-lg); --wash-fade: 40%; }
.th-last__body { display: grid; gap: 4px; min-width: 0; padding: 12px 0; }
.th-last__body small { font: 700 12px/16px var(--font-body); letter-spacing: .2em; color: var(--theme); }
.th-last__body b { font: 400 26px/32px var(--font-display); letter-spacing: .04em; }
.th-last__body > span { font: 500 12px/16px var(--font-mono); color: var(--fb-ink-3); }
.th-last__mvp { font: 500 13px/20px var(--font-body) !important; color: var(--fb-ink-2) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.th-last__mvp[hidden] { display: none; }
.th-last__mvp i { 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; }
.th-last__play { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--fb-neon-green); color: var(--fb-on-green); }
.th-last__play svg { width: 20px; height: 20px; fill: currentColor; margin-left: 2px; }
.th-all { --fb-n: 4px; display: inline-flex; align-items: center; gap: 8px; height: var(--fb-control-lg); padding: 0 22px; background: var(--card); color: var(--fb-ink); font: 700 15px/20px var(--font-body); box-shadow: inset 0 -4px 0 var(--f-deep);
  clip-path: var(--fb-shell-cut, none); transition: transform var(--fb-dur-press); }
.th-all svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.th-all:active { transform: translateY(3px); }
.th-all:focus-visible, .th-last:focus-visible { outline: 2px solid var(--fb-neon-cyan); outline-offset: 3px; }
.th-load { display: flex; align-items: center; gap: 10px; max-width: calc(var(--fb-page-max) + 80px); margin: 20px auto 0; padding: 0 40px; font: 500 14px/20px var(--font-body); }
.th-load[hidden] { display: none; }

@media (min-width: 768px) and (max-width: 1099px) { .th__in { padding: 0 16px; } }
/* 手机竖屏：倒计时和键上下排，卡占得住，上一局一行 */
@media (max-width: 767px) {
  .th__in { padding: 0 12px; }
  .th-now { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kick" "title" "clock" "go" "bet"; padding: 16px 4px 4px; }
  .th-title { font-size: 40px; }
  .th-clock b { font-size: 34px; }
  .th-go { justify-content: stretch; margin-top: 10px; }
  .th-go .hf-key { flex: 1; }
  .th-cast { margin-top: 10px; }
  .th-cast__title { font-size: 26px; line-height: 32px; padding: 0 4px; }
  .th-cast__note { padding: 0 4px; }
  .th-more { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .th-last { grid-template-columns: 112px minmax(0, 1fr) auto; gap: 12px; padding-right: 12px; }
  .th-last__pic { height: 104px; }
  .th-last__body b { font-size: 20px; line-height: 26px; }
  .th-last__play { width: 40px; height: 40px; }
  .th-all { justify-content: center; }
}
/* 手机横屏：头收小 */
@media (min-width: 768px) and (max-height: 480px) {
  .th__in { padding: 0 16px; }
  .th-now { padding: 12px 0 2px; } .th-title { font-size: 36px; } .th-clock b { font-size: 30px; } .th-bet { margin-top: 4px; }
  .th-cast { margin-top: 6px; } .th-cast__title { font-size: 24px; line-height: 30px; }
}
@media (prefers-reduced-motion: reduce) { .th, .th *, .th *::before, .th *::after { animation: none !important; transition: none !important; } }