/* ─────────────────────────────────────────────────────────────────────
   icons.css — gameplay glyphs as pixel-art sprites, replacing the inline
   emoji the controller used to print. ONE @2x sheet (web/art/icons-sprite@2x.png,
   eleven 64px cells in a row) is drawn at any size through the --dk size var:
   background-size and -position both scale off it, so a single set of classes
   covers both the 32px default and the text-sized inline form. Pointing the
   32px draw at the 64px-cell @2x art keeps it crisp on hi-DPI (1:1 there).
   Order MUST match the sprite: salve bomb ward antidote relic coin lock die
   chronicle npc energy (see icons-sprite.json).
   ───────────────────────────────────────────────────────────────────────── */
.dk-icon {
  --dk: 32px;
  display: inline-block;
  flex: none;
  width: var(--dk);
  height: var(--dk);
  background-image: url(/art/icons-sprite@2x.png);
  background-repeat: no-repeat;
  background-size: calc(var(--dk) * 11) var(--dk);
  image-rendering: pixelated;
  vertical-align: middle;
}
/* Tuck one into a run of text: scale to the surrounding font, and let the
   browser smooth the steeper downscale (nearest-neighbour gets noisy that small). */
.dk-inline {
  --dk: 1.2em;
  vertical-align: -0.24em;
  image-rendering: auto;
}

.dk-icon--salve     { background-position: calc(var(--dk) *  0) 0; }
.dk-icon--bomb      { background-position: calc(var(--dk) * -1) 0; }
.dk-icon--ward      { background-position: calc(var(--dk) * -2) 0; }
.dk-icon--antidote  { background-position: calc(var(--dk) * -3) 0; }
.dk-icon--relic     { background-position: calc(var(--dk) * -4) 0; }
.dk-icon--coin      { background-position: calc(var(--dk) * -5) 0; }
.dk-icon--lock      { background-position: calc(var(--dk) * -6) 0; }
.dk-icon--die       { background-position: calc(var(--dk) * -7) 0; }
.dk-icon--chronicle { background-position: calc(var(--dk) * -8) 0; }
.dk-icon--npc       { background-position: calc(var(--dk) * -9) 0; }
.dk-icon--energy    { background-position: calc(var(--dk) * -10) 0; }