/* Per-match presence. The pill stays beside the title in normal and pinned view. */
.player-section-heading > .player-heading-main {
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.player-heading-main h2 { min-width:0;white-space:nowrap; }
.online-viewers {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  gap:5px;
  padding:3px 8px;
  min-height:25px;
  border:1px solid #d8b66b66;
  border-radius:999px;
  background:rgba(0,0,0,.38);
  color:#d8b66b;
  font-size:10px;
  font-weight:500;
  line-height:1.4;
  white-space:nowrap;
}
.online-viewers-icon { width:13px;height:13px;flex:0 0 13px; }
.online-viewers [data-online-count] { color:#f0d18c;font-weight:700;font-variant-numeric:tabular-nums; }
.online-viewers-label { color:#b9ae97; }
.online-viewers-dot {
  width:5px;
  height:5px;
  flex:0 0 5px;
  border-radius:50%;
  background:#52cf92;
  opacity:0;
}
.online-viewers[data-state="online"] .online-viewers-dot {
  opacity:1;
  animation:online-viewers-pulse 2.8s ease-in-out infinite;
}
@keyframes online-viewers-pulse {
  0%,100% { box-shadow:0 0 0 0 #52cf9226; }
  50% { box-shadow:0 0 0 3px #52cf9208; }
}
@media (max-width:600px) {
  .player-section-heading { column-gap:6px; }
  .player-section-heading > .player-heading-main { gap:6px; }
  .online-viewers { gap:4px;padding:3px 6px;min-height:23px;font-size:10px; }
  .online-viewers-icon { width:12px;height:12px;flex-basis:12px; }
  .online-viewers-label { display:none; }
  .online-viewers-dot { width:4px;height:4px;flex-basis:4px; }
  .player-section-heading .player-pin { gap:4px;padding-inline:6px;font-size:10px; }
  .player-section-heading .player-pin .icon { width:13px;height:13px; }
}
@media (max-width:360px) {
  .player-section-heading,
  .watch-chat-layout.is-pinned .player-section-heading { padding-inline:7px;column-gap:5px; }
  .player-section-heading > .player-heading-main { gap:5px; }
  .player-heading-main h2 { font-size:10px; }
  .watch-chat-layout.is-pinned .player-heading-main h2 { font-size:10px; }
  .player-heading-main .status-dot { width:5px;height:5px;margin-right:3px; }
}
@media (prefers-reduced-motion:reduce) {
  .online-viewers[data-state="online"] .online-viewers-dot { animation:none; }
}