:root {
  --enhancement-badge-size: 1.35rem;
  --enhancement-shielded: #60a5fa;
  --enhancement-locked: #f59e0b;
  --enhancement-volatile: #f87171;
  --enhancement-regrowth: #4ade80;
  --enhancement-bound: #a78bfa;
  --enhancement-teleport: #2dd4bf;
  --enhancement-rotate: #f472b6;
  --enhancement-multiply: #bef264;
}

.gem-cell.has-enhancement {
  overflow: visible;
  position: relative;
}

.enhancement-badge {
  align-items: center;
  background: rgb(15 23 42 / 0.92);
  border: 1px solid currentColor;
  border-radius: 999px;
  box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 0.35);
  color: var(--color-focus);
  display: inline-flex;
  height: var(--enhancement-badge-size);
  justify-content: center;
  padding: 0.12rem;
  pointer-events: none;
  position: absolute;
  right: -0.3rem;
  top: -0.3rem;
  width: var(--enhancement-badge-size);
}

.enhancement-badge img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.gem-cell.has-enhancement-shielded { box-shadow: inset 0 0 0 2px rgb(96 165 250 / 0.45); }
.gem-cell.has-enhancement-shielded .enhancement-badge { color: var(--enhancement-shielded); }
.gem-cell.has-enhancement-locked { box-shadow: inset 0 0 0 2px rgb(245 158 11 / 0.45); }
.gem-cell.has-enhancement-locked .enhancement-badge { color: var(--enhancement-locked); }
.gem-cell.has-enhancement-volatile { box-shadow: inset 0 0 0 2px rgb(248 113 113 / 0.5); }
.gem-cell.has-enhancement-volatile .enhancement-badge { color: var(--enhancement-volatile); }
.gem-cell.has-enhancement-regrowth { box-shadow: inset 0 0 0 2px rgb(74 222 128 / 0.45); }
.gem-cell.has-enhancement-regrowth .enhancement-badge { color: var(--enhancement-regrowth); }

.gem-cell.has-enhancement:focus-visible,
.gem-cell.has-enhancement:hover {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.enhancement-info p {
  margin: 0 0 var(--space-3);
}
.gem-cell.has-enhancement-bound { box-shadow: inset 0 0 0 2px rgb(167 139 250 / 0.5); }
.gem-cell.has-enhancement-bound .enhancement-badge { color: var(--enhancement-bound); }
.gem-cell.has-enhancement-teleport { box-shadow: inset 0 0 0 2px rgb(45 212 191 / 0.5); }
.gem-cell.has-enhancement-teleport .enhancement-badge { color: var(--enhancement-teleport); }
.gem-cell.has-enhancement-rotate { box-shadow: inset 0 0 0 2px rgb(244 114 182 / 0.5); }
.gem-cell.has-enhancement-rotate .enhancement-badge { color: var(--enhancement-rotate); }
.gem-cell.has-enhancement-multiply { box-shadow: inset 0 0 0 2px rgb(190 242 100 / 0.5); }
.gem-cell.has-enhancement-multiply .enhancement-badge { color: var(--enhancement-multiply); }