/* Enamel-pin badge emblems — Mario Kart–inspired depth, ggnomz palette */

:root {
  --badge-rim-light: #f3f6ff;
  --badge-rim-mid: #b7c3dc;
  --badge-rim-dark: #5f6f8c;
  --badge-emblem-icon: var(--color-gold, #fcdd71);
}

.badge-emblem {
  --badge-accent: var(--blue, #717eff);
  --badge-inner-a: #3a2a82;
  --badge-inner-b: #1a1048;
  --badge-icon: var(--badge-emblem-icon);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  color: var(--badge-icon);
  background: linear-gradient(
    148deg,
    var(--badge-rim-light) 0%,
    var(--badge-rim-mid) 42%,
    var(--badge-rim-dark) 54%,
    #dce4f8 100%
  );
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.32),
    0 5px 14px rgba(8, 4, 24, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.badge-emblem__shell {
  display: block;
  width: 100%;
  height: 100%;
  padding: 3px;
  box-sizing: border-box;
}

.badge-emblem__inlay {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.14) 0%, transparent 42%),
    linear-gradient(155deg, var(--badge-inner-a) 0%, var(--badge-inner-b) 100%);
  box-shadow:
    inset 0 0 0 2px var(--badge-accent),
    inset 0 0 0 3px rgba(255, 255, 255, 0.62),
    inset 0 -3px 8px rgba(0, 0, 0, 0.28);
}

.badge-emblem__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}

.badge-emblem__icon svg {
  display: block;
}

.badge-emblem__shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    128deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.08) 28%,
    transparent 52%
  );
}

.badge-emblem__spark {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.badge-emblem__spark--a {
  width: 3px;
  height: 3px;
  top: 14%;
  left: 20%;
}

.badge-emblem__spark--b {
  width: 2px;
  height: 2px;
  top: 24%;
  right: 18%;
  opacity: 0.75;
}

.badge-emblem--circle,
.badge-emblem--circle .badge-emblem__inlay {
  border-radius: 50%;
}

.badge-emblem--square,
.badge-emblem--square .badge-emblem__inlay {
  border-radius: 11px;
}

.badge-emblem--hex {
  clip-path: polygon(25% 4%, 75% 4%, 96% 50%, 75% 96%, 25% 96%, 4% 50%);
}

.badge-emblem--hex .badge-emblem__shell,
.badge-emblem--hex .badge-emblem__inlay {
  clip-path: polygon(25% 4%, 75% 4%, 96% 50%, 75% 96%, 25% 96%, 4% 50%);
}

.badge-emblem--shield {
  clip-path: polygon(50% 2%, 92% 16%, 92% 58%, 50% 98%, 8% 58%, 8% 16%);
}

.badge-emblem--shield .badge-emblem__shell,
.badge-emblem--shield .badge-emblem__inlay {
  clip-path: polygon(50% 2%, 92% 16%, 92% 58%, 50% 98%, 8% 58%, 8% 16%);
}

.badge-tag--pill .badge-tag__medal .badge-emblem__icon svg,
.badge-tag--micro .badge-tag__medal .badge-emblem__icon svg {
  display: block;
}

.badge-pill.badge-emblem,
.badge-micro.badge-emblem {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.badge-chip__visual.badge-emblem {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.badge-chip__visual.badge-emblem .badge-emblem__shell {
  padding: 4px;
}

.badge-chip__visual.badge-emblem .badge-emblem__icon svg {
  width: 28px;
  height: 28px;
}

.badge-emblem--vibe .badge-emblem__inlay {
  box-shadow:
    inset 0 0 0 2px var(--badge-accent),
    inset 0 0 0 3px rgba(255, 255, 255, 0.62),
    inset 0 -3px 8px rgba(0, 0, 0, 0.28);
}

.badge-emblem--steam_verified {
  --badge-accent: #8cccf9;
  --badge-inner-a: #1e4a72;
  --badge-inner-b: #0c2438;
  --badge-icon: #e8f6ff;
}

.badge-emblem--positive_contributor {
  --badge-accent: #b5ff3c;
  --badge-inner-a: #3d5a18;
  --badge-inner-b: #1a2810;
  --badge-icon: #efffcc;
}

.badge-emblem--squad_ready {
  --badge-accent: #717eff;
  --badge-inner-a: #353a8a;
  --badge-inner-b: #181c48;
  --badge-icon: #e8ebff;
}

.badge-emblem--featured_spotlight {
  --badge-accent: #f281f6;
  --badge-inner-a: #6a2878;
  --badge-inner-b: #321040;
  --badge-icon: #ffe8ff;
}

.badge-emblem--verified_clips {
  --badge-accent: #90cbf6;
  --badge-inner-a: #2a5080;
  --badge-inner-b: #122840;
  --badge-icon: #e6f4ff;
}

.badge-emblem--teamwork_champion {
  --badge-accent: #fcdd71;
  --badge-inner-a: #4a3088;
  --badge-inner-b: #221050;
  --badge-icon: #fff4c8;
}

.badge-emblem--chill {
  --badge-accent: #90cbf6;
  --badge-inner-a: #4a6a9a;
  --badge-inner-b: #283858;
  --badge-icon: #e8f4ff;
}

.badge-emblem--competitor {
  --badge-accent: #f281f6;
  --badge-inner-a: #7a3888;
  --badge-inner-b: #401858;
  --badge-icon: #ffe8ff;
}

.badge-emblem--mentor {
  --badge-accent: #fcdd71;
  --badge-inner-a: #6a5520;
  --badge-inner-b: #382c14;
  --badge-icon: #fff8dc;
}

.badge-emblem--learner {
  --badge-accent: #717eff;
  --badge-inner-a: #484ca0;
  --badge-inner-b: #282c60;
  --badge-icon: #eceeff;
}

.badge-emblem--silly {
  --badge-accent: #b5ff3c;
  --badge-inner-a: #5a7030;
  --badge-inner-b: #304018;
  --badge-icon: #f4ffd8;
}

.badge-emblem--day_one {
  --badge-accent: #b5ff3c;
  --badge-inner-a: #2a4a18;
  --badge-inner-b: #12240c;
  --badge-icon: #efffcc;
}

.badge-emblem--helping_hand {
  --badge-accent: #fcdd71;
  --badge-inner-a: #6a4020;
  --badge-inner-b: #381e10;
  --badge-icon: #fff4c8;
}

[class*="badge-emblem--first_"] {
  --badge-accent: #f281f6;
  --badge-inner-a: #3a2a82;
  --badge-inner-b: #170c40;
  --badge-icon: #fcdd71;
}

.badge-emblem--grinder {
  --badge-accent: #717eff;
  --badge-inner-a: #2a3088;
  --badge-inner-b: #141848;
  --badge-icon: #dde2ff;
}

.badge-emblem--builder {
  --badge-accent: #fcdd71;
  --badge-inner-a: #5a4a28;
  --badge-inner-b: #302814;
  --badge-icon: #fff8dc;
}

.badge-emblem--back_in_the_game {
  --badge-accent: #b5ff3c;
  --badge-inner-a: #3a6030;
  --badge-inner-b: #1c3018;
  --badge-icon: #f4ffd8;
}

.badge-emblem--lore_nerd {
  --badge-accent: #f281f6;
  --badge-inner-a: #5a2870;
  --badge-inner-b: #2c1040;
  --badge-icon: #ffe8ff;
}

html[data-theme="light"] .badge-emblem {
  box-shadow:
    0 2px 0 rgba(40, 20, 95, 0.12),
    0 5px 14px rgba(40, 20, 95, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(40, 20, 95, 0.08);
}