/* Live player dots (mode-counts.js): a pulsing green dot with the number. Strong selectors because mode cards style every span inside them. */
html body .mode-live.mode-live{all:unset;box-sizing:border-box;display:inline-flex!important;align-items:center;gap:4px;padding:1px 6px 1px 4px!important;border-radius:999px;background:#22180fd9!important;border:1px solid #8fe3a666!important;color:#f3e0a8!important;font:800 11px/1.2 'Trebuchet MS',system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap;pointer-events:none;text-shadow:none!important;width:auto!important;height:auto!important;min-width:0!important;max-width:none!important;opacity:1!important;transform:none!important;filter:none!important;font-variant-numeric:tabular-nums}
html body .mode-live.mode-live::before{content:'';display:block;flex:none;width:7px;height:7px;border-radius:50%;background:#7dff8a;box-shadow:0 0 0 0 #7dff8aaa;animation:mode-live-ping 2s ease-out infinite}
/* A soft ring that grows out of the dot, like a heartbeat. */
@keyframes mode-live-ping{0%{box-shadow:0 0 0 0 #7dff8aaa}70%{box-shadow:0 0 0 6px #7dff8a00}100%{box-shadow:0 0 0 0 #7dff8a00}}
@media (prefers-reduced-motion:reduce){html body .mode-live.mode-live::before{animation:none;box-shadow:0 0 5px #7dff8a}}
html body :is(.battle-type-picker [data-battle],.world-private-mode,.queue-gems>.queue-gem).has-mode-live{position:relative}
html body :is(.battle-type-picker [data-battle],.world-private-mode)>.mode-live.mode-live{position:absolute!important;right:7px;top:7px;left:auto;z-index:4}
/* Format seals: the dot takes the place of the small diamond at the plaque's right end, inside the frame and clear of the selected check.
   The plaque is already a dark frame, so the dot drops its pill to stay compact on small phones. */
html body .queue-gems>.queue-gem>.mode-live.mode-live{position:absolute!important;right:5%;top:50%;left:auto;transform:translateY(-50%)!important;z-index:4;gap:3px;padding:0!important;background:none!important;border:0!important;font-size:11px!important;text-shadow:0 1px 2px #000c!important}
html body .queue-gems>.queue-gem.has-mode-live .queue-plaque-frame path[d^="m274 30"]{display:none}
/* Keep a counted seal's label clear of the dot. */
html body .queue-gems>.queue-gem.has-mode-live>strong{padding-right:12px!important;box-sizing:border-box}