.ff-bb{
  display:flex;align-items:center;overflow:hidden;user-select:none;
  --bb-star:#d76a72;--bb-real:#c98f8f;--bb-ai:#b3928e;--bb-ticket:#e6d7ab;--bb-vip:#fff8e6;
}
.ff-bb-live{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  padding:0 10px 0 14px;height:100%;
  font-size:11px;font-weight:600;letter-spacing:.18em;
  color:rgba(245,214,123,.85);
}
.ff-bb-dot{
  width:6px;height:6px;border-radius:50%;background:#f0c75e;
  animation:ffBbPulse 1.6s ease-in-out infinite;
}
@keyframes ffBbPulse{0%,100%{opacity:1}50%{opacity:.3}}
.ff-bb-live .live-count{font-size:12px;font-weight:500;letter-spacing:0;color:rgba(239,233,220,.82);white-space:nowrap}
.ff-bb-live .live-count b{margin:0 1px 0 4px;font-size:14px;font-weight:800;color:#f1d67e;font-variant-numeric:tabular-nums}
.ff-bb-mask{
  flex:1 1 auto;height:100%;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 32px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 32px),transparent 100%);
}
.ff-bb-roll{
  display:flex;align-items:center;height:100%;width:max-content;white-space:nowrap;will-change:transform;
  animation:ffBbRoll var(--bb-dur,45s) linear infinite;
}
.ff-bb.paused .ff-bb-roll{animation-play-state:paused}
@keyframes ffBbRoll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.ff-bb-it{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#c9c0a8;padding:0 4px}
.ff-bb-it .nick{color:#f5d67b;font-weight:600}
.ff-bb-sep{
  display:inline-block;width:3px;height:3px;border-radius:50%;
  background:rgba(233,226,205,.55);margin:0 15px;flex:0 0 auto;
}
.ff-bb .k-star{color:var(--bb-star);font-weight:700}
.ff-bb .k-real{color:var(--bb-real);font-weight:650}
.ff-bb .k-ai{color:var(--bb-ai);font-weight:650}
.ff-bb .k-ticket{color:var(--bb-ticket);font-weight:600}
.ff-bb .k-vip{color:var(--bb-vip);font-weight:800;letter-spacing:.04em;text-shadow:0 0 7px rgba(245,214,123,.75),0 1px 3px rgba(0,0,0,.9)}

.ff-bb--feed{
  position:absolute;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom,0px));
  height:34px;z-index:16;opacity:.95;
}
.ff-bb--feed .ff-bb-live{text-shadow:0 1px 3px rgba(0,0,0,.9)}
.ff-bb--feed .ff-bb-dot{box-shadow:0 1px 3px rgba(0,0,0,.8)}
.ff-bb--feed .ff-bb-it{text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.5)}
.ff-bb--feed .ff-bb-sep{box-shadow:0 1px 2px rgba(0,0,0,.8)}

.ff-bb--card{
  height:40px;background:rgba(9,7,4,.55);
  border-bottom:1px solid rgba(240,199,94,.10);
}
.ff-bb--card .ff-bb-mask{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 18px,#000 46px,#000 calc(100% - 46px),transparent calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,transparent 18px,#000 46px,#000 calc(100% - 46px),transparent calc(100% - 18px),transparent 100%);
}

@media (prefers-reduced-motion:reduce){
  .ff-bb-roll{animation:none}
  .ff-bb-dot{animation:none}
}