/* /assets/css/room-count.css — live public-room count badges.
 * Pairs with /assets/js/room-count.js. Include both wherever a
 * [data-room-count] element is used.
 */

/* lobby "Public rooms" tab badge — a small count pill */
.tab-count {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 999px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55);
    vertical-align: middle;
    transition: background 0.2s, color 0.2s;
}
.tab-count:empty { display: none; }
.tab-count.rc-live {
    background: #46e0a0;
    color: #06251a;
}

/* homepage tile badge — "● N waiting" */
.room-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #06251a;
    background: #46e0a0;
    box-shadow: 0 2px 10px -2px rgba(70, 224, 160, 0.6);
}
.room-pill::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #06251a;
    animation: rc-pulse 1.5s ease-in-out infinite;
}
.room-pill::after { content: ' waiting'; }
.room-pill.rc-zero,
.room-pill.rc-unknown { display: none; }

@keyframes rc-pulse { 50% { opacity: 0.25; } }