/* App-wide emoji replacement icons. Keep these vector-native for crisp UI. */
.ddx-icon {
  --ddx-gold: #fbbf24;
  --ddx-gold2: #ffe7a3;
  --ddx-violet: #8b4dff;
  --ddx-pink: #cf6bff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.18em;
  height: 1.18em;
  min-width: 1.18em;
  margin: 0 .16em;
  vertical-align: -.18em;
  border-radius: .42em;
  color: var(--ddx-gold);
  background:
    radial-gradient(circle at 35% 22%, rgba(255,231,163,.55), transparent 34%),
    linear-gradient(135deg, rgba(251,191,36,.20), rgba(139,77,255,.18));
  border: 1px solid rgba(251,191,36,.34);
  box-shadow: 0 0 .65em rgba(251,191,36,.22), inset 0 1px 0 rgba(255,255,255,.12);
  line-height: 1;
  flex: 0 0 auto;
}
.ddx-icon svg {
  width: 72%;
  height: 72%;
  display: block;
  overflow: visible;
}
.ddx-icon .ddx-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ddx-icon .ddx-fill {
  fill: currentColor;
}
.ddx-icon .ddx-soft {
  fill: currentColor;
  opacity: .28;
}
.ddx-icon.ddx-alert,
.ddx-icon.ddx-ban,
.ddx-icon.ddx-x {
  color: #ff6b6b;
  background: linear-gradient(135deg, rgba(255,107,107,.22), rgba(139,77,255,.12));
  border-color: rgba(255,107,107,.42);
}
.ddx-icon.ddx-check,
.ddx-icon.ddx-shield {
  color: #4ade80;
  background: linear-gradient(135deg, rgba(74,222,128,.20), rgba(139,77,255,.12));
  border-color: rgba(74,222,128,.42);
}
.ddx-icon.ddx-info,
.ddx-icon.ddx-search,
.ddx-icon.ddx-camera,
.ddx-icon.ddx-scan {
  color: #38bdf8;
  background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(139,77,255,.16));
  border-color: rgba(56,189,248,.36);
}
.ddx-icon.ddx-fire,
.ddx-icon.ddx-bolt {
  color: #fb923c;
  background: linear-gradient(135deg, rgba(251,146,60,.24), rgba(251,191,36,.13));
  border-color: rgba(251,146,60,.42);
}
.ddx-icon.ddx-gem,
.ddx-icon.ddx-orb,
.ddx-icon.ddx-palette,
.ddx-icon.ddx-ai {
  color: #cf6bff;
  background: linear-gradient(135deg, rgba(207,107,255,.22), rgba(56,189,248,.12));
  border-color: rgba(207,107,255,.42);
}
.ddx-icon.ddx-plain {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  margin: 0 .08em;
}

[data-dd-streak-chip]::before,
[data-dd-ai-badge]::before,
[data-dd-cta-button]::before,
.dd-hero-chip-label::before {
  content: "" !important;
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  font-size: 1em !important;
  flex: 0 0 auto !important;
  background: currentColor !important;
  filter: drop-shadow(0 0 5px currentColor) !important;
  vertical-align: -.12em !important;
  -webkit-mask: var(--ddx-mask-spark) center / contain no-repeat !important;
  mask: var(--ddx-mask-spark) center / contain no-repeat !important;
}
[data-dd-streak-chip]::before {
  --ddx-mask-spark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M13 2c2 5 6 6.7 6 11.2 0 4.5-3.1 7.8-7.2 7.8C8 21 5 18.1 5 14.3c0-3.3 1.8-5.5 4.8-8-.3 2.8.5 4.2 1.7 5.1.1-4 .7-6.9 1.5-9.4Z'/%3E%3C/svg%3E") !important;
}
[data-dd-cta-button]::before {
  --ddx-mask-spark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 7h4l1.6-2h4.8L16 7h4v12H4V7Zm8 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z'/%3E%3C/svg%3E") !important;
}
[data-dd-ai-badge]::before,
.dd-hero-chip-label::before {
  --ddx-mask-spark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2l2 7 7 3-7 2-2 8-3-8-7-2 7-3 3-7Z'/%3E%3C/svg%3E") !important;
}

.fsi-logo .ddx-icon,
.logo .ddx-icon,
.dq-icon .ddx-icon,
.rank-icon .ddx-icon,
.emoji .ddx-icon,
.banner-ico .ddx-icon,
.ai-ico .ddx-icon,
.trait-ico .ddx-icon {
  width: 1.35em;
  height: 1.35em;
  margin: 0;
}

button .ddx-icon,
.btn .ddx-icon,
.tab .ddx-icon,
.pill .ddx-icon {
  vertical-align: -.22em;
}