.effect-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.effect-icon {
  --effect-icon-size: 24px;
  --effect-color: #d7e1e5;
  --effect-fill: #22313a;
  --effect-glow: transparent;
  --effect-badge-gap: max(1px, calc(var(--effect-icon-size) * .025));
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  width: var(--effect-icon-size);
  height: var(--effect-icon-size);
  place-items: center;
  color: #edf6f2;
  vertical-align: middle;
  filter: drop-shadow(0 0 calc(var(--effect-icon-size) * .13) var(--effect-glow));
}

.effect-icon--buff {
  --effect-color: #63e7b0;
  --effect-fill: #153d34;
  --effect-glow: #63e7b055;
}

.effect-icon--debuff {
  --effect-color: #ff7289;
  --effect-fill: #47202b;
  --effect-glow: #ff728955;
}

.effect-icon--neutral {
  --effect-color: #e9c56a;
  --effect-fill: #453b21;
  --effect-glow: #e9c56a44;
}

.effect-icon__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.effect-icon__frame {
  fill: var(--effect-fill);
  stroke: var(--effect-color);
  stroke-width: 3;
  stroke-linejoin: round;
}

.effect-icon__inner {
  fill: #0c151bd9;
  stroke: var(--effect-color);
  stroke-width: 1;
  stroke-opacity: .36;
}

.effect-icon__glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.effect-icon__marker {
  color: var(--effect-color);
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.effect-icon--neutral .effect-icon__marker {
  fill: currentColor;
  stroke: none;
}

.effect-icon__badge {
  position: absolute;
  left: calc(50% + var(--effect-badge-gap));
  bottom: -13%;
  z-index: 1;
  min-width: 48%;
  max-width: none;
  padding: max(1px, calc(var(--effect-icon-size) * .035)) max(2px, calc(var(--effect-icon-size) * .09));
  border: max(1px, calc(var(--effect-icon-size) * .045)) solid var(--effect-color);
  border-radius: 999px;
  background: #071015;
  color: #fff;
  font-family: "Arial Narrow", "Roboto Condensed", Inter, "Noto Sans JP", system-ui, sans-serif;
  font-size: max(6px, calc(var(--effect-icon-size) * .27));
  font-stretch: condensed;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 1px 3px #000b;
}

.effect-icon--badge-wide .effect-icon__badge {
  min-width: 44%;
  padding-right: max(1px, calc(var(--effect-icon-size) * .055));
  padding-left: max(1px, calc(var(--effect-icon-size) * .055));
  font-size: max(5.75px, calc(var(--effect-icon-size) * .235));
  letter-spacing: -.06em;
}

.effect-icon--badge-xwide .effect-icon__badge {
  font-size: max(5.5px, calc(var(--effect-icon-size) * .21));
  letter-spacing: -.08em;
}

.effect-icon__duration {
  position: absolute;
  right: calc(50% + var(--effect-badge-gap));
  bottom: -13%;
  z-index: 2;
  min-width: 42%;
  padding: max(1px, calc(var(--effect-icon-size) * .035)) max(2px, calc(var(--effect-icon-size) * .08));
  border: max(1px, calc(var(--effect-icon-size) * .045)) solid var(--effect-color);
  border-radius: 999px;
  background: #071015;
  color: var(--effect-color);
  font-family: Inter, "Noto Sans JP", system-ui, sans-serif;
  font-size: max(7px, calc(var(--effect-icon-size) * .29));
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 1px 3px #000b;
}

.effect-icon--compact .effect-icon__badge {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .effect-icon {
    transition: filter 120ms ease, transform 120ms ease;
  }

  button:hover .effect-icon,
  .effect-icon:hover {
    filter: drop-shadow(0 0 calc(var(--effect-icon-size) * .22) var(--effect-color));
  }
}