/* ============================================================================
   PAINTED ICONS ON THE STATIC PAGES.

   The app renders these through `GlyphIcon`, which maps an emoji to a painted
   kit icon (⚓→anchor, 🏆→rankings, ✏→edit, 🗑→scrap, and the eight waters to
   their own medallions). The static pages had no equivalent and shipped the raw
   emoji, so the docs did not look like the game they document.

   Shared rather than pasted into each page's own <style>, for the same reason
   read-aloud.css is: this site has already had one thing drift into three
   versions by being hand-rolled per page.

   ⚠ A replaced IMAGE sits on the text baseline differently from a glyph, so an
   inline icon needs `vertical-align` or it rides too high and can strand itself
   when the line wraps (CLAUDE.md §6 records the in-app version of this trap).
   ============================================================================ */

/* Inline within a sentence — sized to the surrounding text, not fixed. */
.emji {
  display: inline-block;
  width: 1.05em; height: 1.05em;
  vertical-align: -0.17em;
  margin-right: .12em;
  object-fit: contain;
}

/* The water medallions in lore's card grid: a real badge, not a text glyph. */
img.ic {
  width: 22px; height: 22px; flex: none;
  display: block; object-fit: contain;
}