:root {

  --fire:       #e2352b;
  --fire-rgb:   226,53,43;
  --fire-dark:  #5c1209;
  --fire-dark-rgb: 92,18,9;
  --fire-mid:   #a1241a;

  --frost:       #38bdf8;
  --frost-rgb:   56,189,248;
  --frost-dark:  #0e2a50;
  --frost-dark-rgb: 14,42,80;
  --frost-mid:   #1e5490;
  --frost-bright:#60a5fa;

  --nature:      #4ade80;
  --nature-rgb:  74,222,128;
  --nature-dark: #0a2b14;
  --nature-dark-rgb: 10,43,20;
  --nature-mid:  #165c28;

  --holy:        #f1f5f9;
  --holy-rgb:    241,245,249;
  --holy-dark:   #35365A;
  --holy-dark-rgb: 53,54,90;
  --holy-mid:    #5c4a99;
  --holy-bright: #e2e8f0;

  --shock:      #67e8f9;
  --shock-rgb:  103,232,249;
  --shock-dark: #0a3a42;
  --shock-dark-rgb: 10,58,66;
  --shock-mid:  #147a8c;

  --chaos:      #a73bcf;
  --chaos-rgb:  167,59,207;
  --chaos-dark: #34123f;
  --chaos-dark-rgb: 52,18,63;
  --chaos-mid:  #74268f;

  --radiance:       #f5c454;
  --radiance-rgb:   245,196,84;
  --radiance-dark:  #5c4a08;
  --radiance-dark-rgb: 92,74,8;
  --radiance-mid:   #9a7a10;
  --radiance-bright:#fde68a;
}

.el-badge {
  font-size: 0.5625rem; font-weight: 800; padding: 0.125rem 0.4375rem; border-radius: 6.25rem;
  flex-shrink: 0; letter-spacing: 0.06em;
}
.el-badge.Fire     { background: rgba(var(--fire-rgb),0.12);     color: var(--fire);     border: 1px solid rgba(var(--fire-rgb),0.3); }
.el-badge.Frost    { background: rgba(var(--frost-rgb),0.12);    color: var(--frost);    border: 1px solid rgba(var(--frost-rgb),0.3); }
.el-badge.Nature   { background: rgba(var(--nature-rgb),0.12);   color: var(--nature);   border: 1px solid rgba(var(--nature-rgb),0.3); }
.el-badge.Holy     { background: rgba(var(--holy-rgb),0.10);     color: var(--holy);     border: 1px solid rgba(var(--holy-rgb),0.28); }
.el-badge.Shock    { background: rgba(var(--shock-rgb),0.12);    color: var(--shock);    border: 1px solid rgba(var(--shock-rgb),0.3); }
.el-badge.Chaos    { background: rgba(var(--chaos-rgb),0.12);    color: var(--chaos);    border: 1px solid rgba(var(--chaos-rgb),0.3); }
.el-badge.Radiance { background: rgba(var(--radiance-rgb),0.14); color: var(--radiance); border: 1px solid rgba(var(--radiance-rgb),0.35); }

.gg-el.Fire     { color: var(--fire); }
.gg-el.Frost    { color: var(--frost); }
.gg-el.Nature   { color: var(--nature); }
.gg-el.Holy     { color: var(--holy); }
.gg-el.Shock    { color: var(--shock); }
.gg-el.Chaos    { color: var(--chaos); }
.gg-el.Radiance { color: var(--radiance); }

.el-img-grad.el-Fire     { background: linear-gradient(180deg, var(--fire-dark) 0%,     var(--fire-mid) 50%,     var(--fire) 100%); }
.el-img-grad.el-Frost    { background: linear-gradient(180deg, var(--frost-dark) 0%,    var(--frost-mid) 50%,    var(--frost-bright) 100%); }
.el-img-grad.el-Nature   { background: linear-gradient(180deg, var(--nature-dark) 0%,   var(--nature-mid) 50%,   var(--nature) 100%); }
.el-img-grad.el-Holy     { background: linear-gradient(180deg, var(--holy-dark) 0%,     var(--holy-mid) 50%,     var(--holy-bright) 100%); }
.el-img-grad.el-Shock    { background: linear-gradient(180deg, var(--shock-dark) 0%,    var(--shock-mid) 50%,    var(--shock) 100%); }
.el-img-grad.el-Chaos    { background: linear-gradient(180deg, var(--chaos-dark) 0%,    var(--chaos-mid) 50%,    var(--chaos) 100%); }
.el-img-grad.el-Radiance { background: linear-gradient(180deg, var(--radiance-dark) 0%, var(--radiance-mid) 50%, var(--radiance-bright) 100%); }