/* apps/web/src/ui/charms/charm-frames.css */
.charm-frame {
  width: 128px; height: 128px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.charm-frame.size-xs { width: 56px; height: 56px; border-radius: 10px; }
.charm-frame.size-sm { width: 80px; height: 80px; border-radius: 12px; }
.charm-frame.size-md { width: 96px; height: 96px; border-radius: 14px; }
/* Charm SVGs are authored at 60x60 with a 80x80 viewBox; scale them to fit
   any frame size proportionally instead of relying on the hardcoded width/
   height attributes (which would overflow the smaller xs frame). */
.charm-frame > svg { width: 70%; height: 70%; position: relative; z-index: 1; }

.charm-frame.common    { background: linear-gradient(180deg, #4a4a5a, #2a2a3a); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15); }
.charm-frame.rare      { background: linear-gradient(180deg, #1a4878, #0a2858); box-shadow: inset 0 0 0 2px #5cd6ff, 0 0 16px rgba(92,214,255,0.3); }
.charm-frame.epic      { background: linear-gradient(180deg, #5a1878, #2a0858); box-shadow: inset 0 0 0 2px #c878ff, 0 0 20px rgba(200,120,255,0.4); }
.charm-frame.legendary { background: linear-gradient(180deg, #785818, #4a3008); box-shadow: inset 0 0 0 2px #ffcc4a, 0 0 24px rgba(255,204,74,0.5); position: relative; overflow: hidden; }
.charm-frame.legendary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
  animation: charmShimmer 3s linear infinite;
}
@keyframes charmShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }