.play-panel .panel-label{align-items:center;gap:12px}
.online-activity{display:flex;align-items:center;gap:9px;flex-shrink:0;min-height:42px;padding:7px 10px;background:linear-gradient(115deg,#1b2c33ed,#17232beb);border:1px solid #819b8952;border-left:2px solid #a6c69b;box-shadow:0 4px 18px #0002;letter-spacing:0}
.activity-dot{position:relative;width:6px;height:6px;flex-shrink:0;border-radius:50%;background:#b8db9f;box-shadow:0 0 8px #b8db9f55}
.activity-dot:after{content:"";position:absolute;inset:-4px;border:1px solid #b8db9f80;border-radius:50%;animation:activity-pulse 2.8s ease-out infinite}
#activity-count{display:inline-block;min-width:2ch;font:700 25px/1 var(--display);font-variant-numeric:tabular-nums;text-align:center;color:#eac385}
.activity-label{font:500 9px/1 var(--mono);letter-spacing:1.1px;color:#dce6df}
.activity-bars{display:flex;align-items:flex-end;gap:2px;height:14px;margin-left:2px;opacity:.65}
.activity-bars i{width:2px;height:6px;background:#afc59e}.activity-bars i:nth-child(2){height:10px}.activity-bars i:nth-child(3){height:7px}.activity-bars i:nth-child(4){height:13px}
.online-activity.is-changing #activity-count{animation:activity-update .6s ease-out}
.online-activity.is-changing .activity-bars{animation:activity-update .6s ease-out}
@keyframes activity-pulse{0%{transform:scale(.65);opacity:.8}75%,100%{transform:scale(1.5);opacity:0}}
@keyframes activity-update{0%{transform:translateY(3px);opacity:.35}100%{transform:translateY(0);opacity:1}}
@media(max-width:400px){.play-panel .panel-label{gap:7px}.online-activity{gap:7px;padding:6px 8px}.activity-bars{display:none}.activity-label{font-size:8px}#activity-count{font-size:23px}}
@media(prefers-reduced-motion:reduce){.online-activity *,.online-activity *:after{animation:none!important}}