/* Medallions and item slots (V2-SHELL).
   .medal            round, gold ring, dark rim, inner shadow. --m sets the size (default 44px).
     .numeral        a roman numeral or a rank: <span class="medal numeral">II</span>
     .gold .silver .bronze   the podium metals (with .numeral)
     .crimson        unique kills, danger marks: <span class="medal crimson"><svg class="icon">..skull</svg></span>
     .lg / .sm       64px / 32px
     [data-state="alive"|"down"]   live state: green ring / crimson body (uniques)
   .slot             square inventory frame for drops, rewards and recipe inputs. --s sets the size (default 44px).
     .wear .use .trade   colour by what the item is for (avatar to wear, consumable, trade at the exchange)
     An <img> inside renders the game icon pixel-crisp; an .icon is the fallback mark.
     For a game item use itemIcon(src, kind, { slot: 'trade lg' }) (js/lib/game.js): icon, fallback and slot in one.
   Both are decoration next to a text label: give them aria-hidden="true" unless they are the only label. */

.medal {
  --m: 44px;
  width: var(--m);
  height: var(--m);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-hi);
  background: radial-gradient(circle at 50% 30%, var(--ink-3), var(--ink-00) 78%);
  box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 4px var(--ink-00), 0 0 0 5px var(--gold-lo), inset 0 2px 6px rgb(var(--shadow-rgb) / 0.8), 0 6px 12px -4px rgb(var(--shadow-rgb) / 0.9);
}
.medal .icon { width: 50%; height: 50%; }
.medal.numeral { font: 700 calc(var(--m) * 0.4)/1 var(--font-label); font-variant-numeric: lining-nums; }
.medal.lg { --m: 64px; }
.medal.sm { --m: 32px; box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 3px var(--ink-00), inset 0 2px 4px rgb(var(--shadow-rgb) / 0.8); }
.medal.gold { color: #2A1E08; background-color: #D6AA52; background-image: radial-gradient(circle at 45% 30%, #FBE7A8, #D6AA52 55%, #8C6A2A 100%); }
.medal.silver { color: #1C2230; background-color: #B9C0CE; background-image: radial-gradient(circle at 45% 30%, #F4F6FA, #B9C0CE 55%, #6E7688 100%); box-shadow: 0 0 0 1.5px #D8DCE6, 0 0 0 4px var(--ink-00), 0 0 0 5px #6E7688, inset 0 -2px 6px rgb(var(--shadow-rgb) / 0.4), 0 6px 12px -4px rgb(var(--shadow-rgb) / 0.9); }
.medal.bronze { color: #2A1608; background-color: #C07A45; background-image: radial-gradient(circle at 45% 30%, #F2C49A, #C07A45 55%, #6E3E1C 100%); box-shadow: 0 0 0 1.5px #E0A673, 0 0 0 4px var(--ink-00), 0 0 0 5px #6E3E1C, inset 0 -2px 6px rgb(var(--shadow-rgb) / 0.4), 0 6px 12px -4px rgb(var(--shadow-rgb) / 0.9); }
.medal.crimson, .medal[data-state="down"] { color: var(--text); background-color: var(--crimson); background-image: radial-gradient(circle at 50% 30%, var(--crimson-hi), var(--crimson-lo) 80%); }
/* Live state on a medallion (uniques): alive = green inner ring, down = crimson body. A word beside it says the same. */
.medal[data-state="alive"] { box-shadow: 0 0 0 1.5px var(--ok), 0 0 0 4px var(--ink-00), 0 0 0 5px var(--gold-lo), inset 0 2px 6px rgb(var(--shadow-rgb) / 0.8), 0 6px 12px -4px rgb(var(--shadow-rgb) / 0.9); }

.slot {
  --s: 44px;
  width: var(--s);
  height: var(--s);
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-2);
  color: var(--accent-hi);
  background: linear-gradient(160deg, var(--ink-3), var(--ink-00));
  box-shadow: inset 0 0 0 1px var(--bronze), inset 0 0 0 3px var(--ink-00), inset 0 2px 8px rgb(var(--shadow-rgb) / 0.8);
}
.slot .icon { width: 58%; height: 58%; }
.slot img { width: calc(var(--s) - 10px); height: calc(var(--s) - 10px); image-rendering: pixelated; }
.slot.wear { color: var(--ok); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 55%, var(--bronze)), inset 0 0 0 3px var(--ink-00), inset 0 2px 8px rgb(var(--shadow-rgb) / 0.8); }
.slot.use { color: var(--info); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 50%, var(--bronze)), inset 0 0 0 3px var(--ink-00), inset 0 2px 8px rgb(var(--shadow-rgb) / 0.8); }
.slot.trade { color: var(--accent-hi); box-shadow: inset 0 0 0 1px var(--frame-hi), inset 0 0 0 3px var(--ink-00), inset 0 2px 8px rgb(var(--shadow-rgb) / 0.8); }
.slot.lg { --s: 56px; }
/* A slot drawn by itemIcon(src, kind, { slot }) in js/lib/game.js: the slot's frame replaces the item box's. */
.slot.item-icon { border: 0; }
.slot.item-icon img { width: calc(var(--s) - 12px); height: calc(var(--s) - 12px); }