/* ============================================================
   pf-dnd icon system — Iconify (Game Icons + Lucide) integration
   Loaded after tokens.css so var() lookups resolve.

   Iconify CDN injects <iconify-icon> custom elements that render
   inline SVG using `currentColor`. We size them to 1em so they
   align with the text they replace, and we provide a few
   semantic color helpers (danger / success / gold / muted).

   Graceful degrade: every iconify-icon is followed by an
   <span class="emoji-fallback">..emoji..</span>. If the Iconify
   CDN loads, `iconify-icon ~ .emoji-fallback` hides the emoji.
   If it fails, the custom element renders nothing and the emoji
   stays visible.
   ============================================================ */

iconify-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  /* SVG strokes pick this up via currentColor */
  color: inherit;
}

/* Semantic color modifiers. Tune to taste; tokens drive the palette. */
.icon-danger   { color: var(--accent-hot, #c0381e); }
.icon-success  { color: var(--good, #4a7a2a); }
.icon-gold     { color: var(--gold-bright, #e0b048); }
.icon-muted    { color: var(--ink-muted, #8a6f48); }
.icon-ink      { color: var(--ink, #2b1d0e); }

/* Kid PWA verb buttons set their container's font-size to 36-44px and the
   icon span inherits that, so 1em is already the right size. Just nudge the
   baseline to center the SVG vertically — these are tall cells. */
.verb-grid .verb .icon iconify-icon {
  vertical-align: -0.1em;
}

/* Graceful-degrade fallback: hide the emoji span ONLY when the iconify
   custom element rendered. If the CDN failed, iconify-icon is still in
   the DOM but contains no shadow content — :defined catches that case.
   The simpler sibling selector is good enough for the first release. */
iconify-icon + .emoji-fallback,
iconify-icon ~ .emoji-fallback {
  display: none;
}
/* And if iconify-icon never registered (CDN totally blocked), show the
   emoji again. `:not(:defined)` matches custom elements that the browser
   hasn't seen a definition for. */
iconify-icon:not(:defined) + .emoji-fallback,
iconify-icon:not(:defined) ~ .emoji-fallback {
  display: inline;
}

/* Hide the iconify-icon itself when undefined so we don't get a blank
   gap next to the visible emoji fallback. */
iconify-icon:not(:defined) {
  display: none;
}