/* Presence dots (assets/presence.js). The "playing now" state reuses the .live-dot green pulse
   already defined in assets/nav.css (loaded on every page, including its reduced-motion rule) —
   this file only adds the idle look, the larger profile-card variant, and the text chip. */
/* margin-left 7px = room for the 7px pulse ring (.live-dot box-shadow), so names inside overflow:hidden
   (ellipsis) containers never clip it. */
.af-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin:0 6px 0 7px; vertical-align:middle; flex:none; }
.af-dot-idle { background:none; border:1.5px solid #a9b1d6; box-sizing:border-box; }
.af-dot-lg { width:11px; height:11px; margin:0 8px 0 7px; }
.af-dot-lg.af-dot-idle { border-width:2px; }

.player-presence { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:-6px; font-size:.8rem; color:var(--muted); }

/* Country flag emoji after the presence dot. */
/* Flag emoji font: Windows has no flag emoji (shows "US" letters), so load Twemoji flag glyphs
   (country-flag-emoji-polyfill 0.1.8, MIT; Twemoji art CC-BY 4.0), self-hosted, regional indicators only. */
/* Flags: Google Noto Color Emoji flags (OFL, colorful waving style), COLRv1, self-hosted flags-only subset.
   tech() makes browsers without COLRv1 (Safari) skip it and use Apple's own flags; Twemoji is the last fallback. */
@font-face { font-family:"AF Flags Noto"; src:url("/assets/flags-noto.woff2") format("woff2") tech(color-COLRv1); unicode-range:U+1F1E6-1F1FF; font-display:swap; }
@font-face { font-family:"AF Flags"; src:url("/assets/flags.woff2") format("woff2"); unicode-range:U+1F1E6-1F1FF; font-display:swap; }
.af-flag { font-family:"AF Flags Noto", "Apple Color Emoji", "AF Flags", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; display:inline-block; margin-right:6px; font-size:.95em; line-height:1; vertical-align:-1px; }

/* Welcome toast for new signups (presence.js), bottom-left; appended to body, outside main.page. */
.af-toast { position:fixed; left:16px; bottom:16px; z-index:50; max-width:calc(100vw - 32px); padding:12px 18px; border-radius:14px;
            background:#1a1f3d; border:1px solid #ffb454; color:#f4f6ff; font-weight:600; text-decoration:none;
            box-shadow:0 10px 30px #0008; animation:af-toast-in .35s ease-out; transition:opacity .4s, transform .4s; }
.af-toast:hover { background:#232a52; }
.af-toast-out { opacity:0; transform:translateY(12px); }
@keyframes af-toast-in { from { opacity:0; transform:translateY(16px) scale(.96); } }
@media (prefers-reduced-motion:reduce) { .af-toast { animation:none; transition:none; } }