/* Goods icons (Content/GoodIcons.cs). The glyph files carry no frame; the medallion is drawn here,
   so the same glyph sits inline beside text and inside a medallion. Fixed colours rather than theme
   tokens: like a realm emblem, a medallion looks the same on every surface. */

.good-icon { width:1.25em; height:1.25em; vertical-align:-.28em; margin-right:.25em; }

.good-medal {
    position:relative; display:inline-grid; place-items:center; flex:none; border-radius:50%;
    background:radial-gradient(circle at 38% 30%, #56606f, #2c333d 72%);
    box-shadow:0 0 0 2px #9aa4b1, 0 0 0 3.5px #2a2f36, 0 2px 6px rgba(0,0,0,.7),
               inset 0 2px 4px rgba(255,255,255,.12), inset 0 -3px 6px rgba(0,0,0,.45);
}
.good-medal img { width:74%; height:74%; filter:drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.good-medal-gold {
    box-shadow:0 0 0 2px #d9b25c, 0 0 0 3.5px #5a4214, 0 0 10px rgba(217,178,92,.45),
               inset 0 2px 4px rgba(255,255,255,.12), inset 0 -3px 6px rgba(0,0,0,.45);
}
.good-medal-s { width:1.6rem; height:1.6rem; }
.good-medal-m { width:2.5rem; height:2.5rem; }
.good-medal-l { width:3.5rem; height:3.5rem; }

.good-count {
    position:absolute; right:-.3rem; bottom:-.3rem; min-width:1.15rem; height:1.15rem; padding:0 .25rem;
    border-radius:.6rem; background:#e9eef3; color:#1b1917; box-shadow:0 0 0 1.5px #3b434e;
    font:700 .7rem/1.15rem system-ui, sans-serif; text-align:center; font-variant-numeric:tabular-nums;
}