/* ============================================================
   GLOBAL EMOJI RENDERING - the single source of truth
   ============================================================

   This file is the ONE home for the `.emoji` / `.emoji-icon` /
   `[data-emoji]` rules. It used to live inline in templates/base.html,
   which meant the host/admin shell was the only shell where the rule
   existed at all: templates/display/display_base.html and
   templates/player/player_base.html defined it ZERO times, so any
   `class="emoji"` on a projector or a player phone silently degraded.

   EVERY shell links this file. Do NOT copy these rules into a template
   or a component - add the link, not the CSS.

   Why the rules are needed at all:

     1. Linux dev machines and Linux visitors have NO color-emoji font
        installed by default. Without an explicit chain that names the
        emoji fonts FIRST, every glyph renders as a monochrome outline.
        Body-level font-family inheritance is NOT enough - Vue scoped
        styles routinely re-set font-family deep in the tree.
     2. font-variant-emoji: emoji forces COLOR presentation even for the
        codepoints that default to text presentation, e.g. U+26A1,
        U+2605, U+2713.
     3. If the color-emoji families are not listed BEFORE the generic
        family, some browsers stop the missing-glyph search at the
        generic and never reach the emoji font.

   Noto Color Emoji is SELF-HOSTED (see fonts-app.css). There is no
   Google Fonts link - privacy browsers and blockers broke it, and a
   failed webfont plus font-variant-emoji rendered emoji BLANK.

   Usage:  <span class="emoji">*</span>        color glyph (default)
           <span class="emoji-icon">*</span>   monochrome admin glyph
           <i data-emoji>*</i>                 attribute form
   ============================================================ */

.emoji,
.emoji-icon,
[data-emoji] {
    font-family:
        'Noto Color Emoji',
        'Apple Color Emoji',
        'Segoe UI Emoji',
        'Twemoji Mozilla',
        'EmojiOne Color',
        'Android Emoji',
        'Segoe UI Symbol',
        sans-serif;
    font-variant-emoji: emoji;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    display: inline-block;
    vertical-align: -0.05em;
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
}

/* Monochrome variant for action-button glyphs (admin icons w/ U+FE0E) */
.emoji-icon {
    font-variant-emoji: text;
    vertical-align: middle;
}