/* ============================================================
   DnD Карты v5.0.0 — визуальный слой (VFX)
   Холст эффектов, живые карты (наклон/параллакс), полоса HP с
   «хвостом» урона, иконки-маски единого набора, статусы, кубики.
   ============================================================ */

/* ---------------------------- холст эффектов ---------------------------- */
.dcc-vfx-canvas {
  position: absolute;
  pointer-events: none;
  z-index: 60;
  contain: strict;
}

/* ------------------------------ живые карты ----------------------------- */
.dcc-root .dcc-hc { transform-style: flat; }
.dcc-root .dcc-hc.dcc-tilt {
  --dcc-lift: -3px;
  transform: perspective(820px) translateY(var(--dcc-lift)) rotateX(var(--dcc-rx, 0deg)) rotateY(var(--dcc-ry, 0deg));
  transition: box-shadow .16s ease, border-color .16s ease;
  will-change: transform;
}
.dcc-root .dcc-hc.dcc-act.dcc-tilt { --dcc-lift: -6px; }
/* слои на разной глубине: портрет глубже рамки, плашка и значки — ближе */
.dcc-root .dcc-hc .dcc-art .dcc-img { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.dcc-root .dcc-hc.dcc-tilt .dcc-art .dcc-img {
  transition: none;
  transform: translate(calc(var(--dcc-mx, 0) * -6px), calc(var(--dcc-my, 0) * -5px)) scale(1.07);
}
.dcc-root .dcc-hc.dcc-tilt .dcc-bot { transform: translate(calc(var(--dcc-mx, 0) * 2.5px), calc(var(--dcc-my, 0) * 2px)); }
.dcc-root .dcc-hc.dcc-tilt .dcc-sts { transform: translate(calc(var(--dcc-mx, 0) * 4px), calc(var(--dcc-my, 0) * 3px)); }
/* блик за светом */
.dcc-root .dcc-hc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: calc(var(--dcc-hv, 0) * .9);
  background:
    radial-gradient(circle at calc(50% + var(--dcc-mx, 0) * 46%) calc(42% + var(--dcc-my, 0) * 46%), rgba(255, 248, 230, .32), rgba(255, 248, 230, 0) 46%),
    linear-gradient(calc(115deg + var(--dcc-mx, 0) * 25deg), rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, 0) 62%);
  mix-blend-mode: screen;
}

/* --------------------------- полоса HP: хвост --------------------------- */
.dcc-root .dcc-hbar { position: relative; }
.dcc-root .dcc-hbar > b {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #fff1c2, #ff8f5c);
  border-radius: inherit;
}
.dcc-root .dcc-hbar > i { position: relative; background: linear-gradient(180deg, #7ee29a, #3fbf68); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.dcc-root .dcc-hbar.dcc-hbar-hurt > i { animation: dcc-vfx-barhurt .5s ease-out; }
.dcc-root .dcc-hbar.dcc-hbar-heal > i { animation: dcc-vfx-barheal .7s ease-out; }
@keyframes dcc-vfx-barhurt { 0% { filter: brightness(2.2) saturate(.3); } 100% { filter: none; } }
@keyframes dcc-vfx-barheal { 0% { filter: brightness(1.8); box-shadow: 0 0 10px #6ee7b7; } 100% { filter: none; } }
.dcc-root .dcc-shv[hidden] { display: none; }

/* ------------------------- иконки единого набора ------------------------ */
.dcc-ico {
  display: inline-block;
  width: 1.05em; height: 1.05em;
  vertical-align: -.17em;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.dcc-ico[data-ico="shield"] { --ico: url("../assets/icons/status/shield.svg"); color: #8fd8ff; }
.dcc-ico[data-ico="frost"] { --ico: url("../assets/icons/status/frost.svg"); color: #bfefff; }
.dcc-ico[data-ico="poise"] { --ico: url("../assets/icons/status/rock.svg"); color: #e2d3b8; }
.dcc-ico[data-ico="broken"] { --ico: url("../assets/icons/status/broken.svg"); color: #fca5a5; }

@media (prefers-reduced-motion: reduce) {
  .dcc-root .dcc-hc.dcc-tilt { transform: none; }
  .dcc-root .dcc-hc::after { display: none; }
}

/* ======================= значки статусов (единый набор) ======================= */
:is(.dcc-root, .dcc-vfx-ghosts) .dcc-st {
  --k: #94a3b8; --k2: #e2e8f0; --k3: #475569;
  width: 25px; height: 25px;
  padding: 0;
  font-size: 0;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%),
    radial-gradient(circle at 50% 55%, #1d1530 0%, #0b0812 72%);
  box-shadow:
    0 0 0 1.5px var(--k),
    0 0 0 3px rgba(6, 4, 12, .85),
    0 0 9px 1px color-mix(in srgb, var(--k) 55%, transparent),
    inset 0 -3px 6px rgba(0, 0, 0, .6);
  transition: transform .28s cubic-bezier(.2, 1.5, .4, 1), box-shadow .2s ease, filter .2s ease;
  overflow: visible;
}
:is(.dcc-root, .dcc-vfx-ghosts) .dcc-st:hover, :is(.dcc-root, .dcc-vfx-ghosts) .dcc-st:focus-within {
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), radial-gradient(circle at 50% 55%, #2a1f45 0%, #0d0916 72%);
  transform: scale(1.18);
  box-shadow: 0 0 0 1.5px var(--k2), 0 0 0 3px rgba(6, 4, 12, .9), 0 0 14px 3px color-mix(in srgb, var(--k) 75%, transparent), inset 0 -3px 6px rgba(0, 0, 0, .6);
  z-index: 5;
}
:is(.dcc-root, .dcc-vfx-ghosts) .dcc-st.dcc-st-buff { --k: #f5c542; --k2: #fff1b8; --k3: #b7791f; }
:is(.dcc-root, .dcc-vfx-ghosts) .dcc-st.dcc-st-debuff { --k: #f43f5e; --k2: #ffc4cf; --k3: #9f1239; }
:is(.dcc-root, .dcc-vfx-ghosts) .dcc-st.dcc-st-dot { --k: #fb923c; --k2: #ffe0c2; --k3: #c2410c; }
:is(.dcc-root, .dcc-vfx-ghosts) .dcc-st.dcc-st-control { --k: #a78bfa; --k2: #ede9fe; --k3: #6d28d9; }
:is(.dcc-root, .dcc-vfx-ghosts) .dcc-st.dcc-st-special { --k: #e879f9; --k2: #fbe2ff; --k3: #a21caf; }
:is(.dcc-root, .dcc-vfx-ghosts) .dcc-st.dcc-st-pas { --k: #8b93a7; --k2: #e5e7eb; --k3: #4b5563; opacity: .9; }

/* глиф — маска-силуэт, залитая градиентом цвета типа */
.dcc-sti {
  display: inline-block;
  width: 64%; height: 64%;
  background: linear-gradient(180deg, var(--k2, #fff) 0%, var(--k, #c4b5fd) 62%, var(--k3, #6d28d9) 100%);
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--k, #fff) 80%, transparent));
  pointer-events: none;
}
.dcc-sti.dcc-sti-full { background: var(--ico) center / contain no-repeat; -webkit-mask: none; mask: none; filter: none; }
:is(.dcc-root, .dcc-vfx-ghosts) .dcc-st > .dcc-sti { width: 15px; height: 15px; }
/* значок в плавающей подсказке */
.dcc-sti.dcc-sti-tip { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; --k: #c4b5fd; --k2: #fff; --k3: #8b5cf6; }

/* число стаков/раундов */
:is(.dcc-root, .dcc-vfx-ghosts) .dcc-stn {
  position: absolute;
  right: -5px; bottom: -4px;
  min-width: 13px; height: 13px;
  padding: 0 3px;
  border-radius: 7px;
  font: 800 9px/13px "Segoe UI", system-ui, sans-serif;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, #2a2040, #0d0a16);
  box-shadow: 0 0 0 1px var(--k), 0 1px 3px rgba(0, 0, 0, .8);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* жизненный цикл значка */
:is(.dcc-root, .dcc-vfx-ghosts) .dcc-st.dcc-st-wait { opacity: 0; transform: scale(.25); pointer-events: none; }
:is(.dcc-root, .dcc-vfx-ghosts) .dcc-st.dcc-st-in { animation: dcc-st-in .62s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes dcc-st-in {
  0% { transform: scale(.2) rotate(-25deg); opacity: 0; filter: brightness(3); }
  45% { transform: scale(1.4) rotate(6deg); opacity: 1; filter: brightness(1.9); }
  70% { transform: scale(.92) rotate(-2deg); filter: brightness(1.2); }
  100% { transform: scale(1) rotate(0); filter: none; }
}
:is(.dcc-root, .dcc-vfx-ghosts) .dcc-st.dcc-st-bump .dcc-stn { animation: dcc-st-bump .5s cubic-bezier(.2, 1.6, .4, 1); }
:is(.dcc-root, .dcc-vfx-ghosts) .dcc-st.dcc-st-bump { animation: dcc-st-glow .55s ease-out; }
@keyframes dcc-st-bump { 0% { transform: scale(1.9); background: var(--k); } 100% { transform: scale(1); } }
@keyframes dcc-st-glow { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.dcc-vfx-ghosts { position: absolute; inset: 0; pointer-events: none; z-index: 65; overflow: hidden; }
.dcc-vfx-ghosts .dcc-st-ghost {
  position: absolute !important;
  pointer-events: none;
  animation: dcc-st-out .6s cubic-bezier(.3, 0, .7, 1) forwards;
}
@keyframes dcc-st-out {
  0% { transform: scale(1); opacity: 1; filter: brightness(1.4); }
  35% { transform: scale(1.3); opacity: .9; filter: brightness(2.2) blur(0); }
  100% { transform: scale(.4) translateY(-6px); opacity: 0; filter: brightness(1) blur(3px); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.dcc-root, .dcc-vfx-ghosts) .dcc-st.dcc-st-in, :is(.dcc-root, .dcc-vfx-ghosts) .dcc-st.dcc-st-bump, .dcc-st-ghost { animation: none; }
}

/* ============================ лоток кубиков ============================ */
.dcc-root .dcc-d[data-cls] {
  --c: #c4b5fd;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 4px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, #1a1428), #0f0b18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 6px rgba(0, 0, 0, .4);
  color: #f3efff;
  font-size: 12px;
}
.dcc-root .dcc-d[data-cls].dcc-z { opacity: .32; filter: saturate(.3); }
.dcc-dico {
  width: 18px; height: 18px; border-radius: 5px;
  background:
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--c, #fff) 70%, #fff)) center / 72% 72% no-repeat;
  -webkit-mask: var(--ico) center / 72% no-repeat, linear-gradient(#000, #000);
  -webkit-mask-composite: source-over;
  mask: var(--ico) center / 72% no-repeat;
  background-color: transparent;
  filter: drop-shadow(0 0 3px var(--c, #fff));
}
.dcc-root .dcc-d .dcc-dn { font-weight: 800; font-variant-numeric: tabular-nums; }
.dcc-root .dcc-d .dcc-dname { opacity: .8; }
.dcc-root .dcc-d[data-cls="Варвар"] { --c: #e8590c; }
.dcc-root .dcc-d[data-cls="Бард"] { --c: #e64980; }
.dcc-root .dcc-d[data-cls="Воин"] { --c: #b8c4d6; }
.dcc-root .dcc-d[data-cls="Волшебник"] { --c: #4dabf7; }
.dcc-root .dcc-d[data-cls="Жрец"] { --c: #ffd43b; }
.dcc-root .dcc-d[data-cls="Колдун"] { --c: #ae3ec9; }
.dcc-root .dcc-d[data-cls="Паладин"] { --c: #fab005; }
.dcc-root .dcc-d[data-cls="Плут"] { --c: #63e6be; }
.dcc-root .dcc-d[data-cls="Друид"] { --c: #69db7c; }
.dcc-root .dcc-d[data-cls="Чародей"] { --c: #ff6b6b; }
.dcc-root .dcc-d[data-cls="U"] { --c: #e9ddff; }

/* ---------------------- UI motion: баннер, кнопки ---------------------- */
.dcc-root.dcc-vfx-busy .dcc-turnbanner, .dcc-vfx-busy .dcc-turnbanner { visibility: hidden; }
.dcc-root button:not(:disabled) { transition: transform .18s cubic-bezier(.2, 1.5, .4, 1), border-color .15s ease, box-shadow .2s ease, filter .15s ease; }
.dcc-root button:not(:disabled):not(.dcc-hc):hover { box-shadow: 0 0 0 1px rgba(196, 181, 253, .35), 0 6px 18px rgba(139, 92, 246, .22); }
.dcc-root button:not(:disabled):not(.dcc-hc):active { transform: translateY(1px) scale(.97); filter: brightness(1.15); transition-duration: .06s; }
.dcc-ico[data-ico="target"] { --ico: url("../assets/icons/status/target.svg"); color: #ff6b6b; filter: drop-shadow(0 0 4px rgba(255, 80, 80, .8)); }
.dcc-root .dcc-targetmark .dcc-ico { width: 22px; height: 22px; }
.dcc-fx-sticon .dcc-sti { width: 34px; height: 34px; --k: #fff; --k2: #fff; --k3: #c4b5fd; }

/* ===================== постоянные состояния карты (v5.0.2) ===================== */
/* карта с крыльями/аурой не обрезает то, что выходит за край; портрет и плашки — по-прежнему в скруглении */
.dcc-root .dcc-hc.dcc-hc-ovf { overflow: visible; z-index: 0; }
/* соседние карты лежат поверх крыльев/ауры — эффект не перекрывает чужой портрет */
.dcc-root .dcc-row > .dcc-hc:not(.dcc-hc-ovf) { z-index: 1; }
.dcc-root .dcc-hc.dcc-hc-ovf .dcc-art { overflow: hidden; border-radius: inherit; }
.dcc-root .dcc-hc.dcc-hc-ovf .dcc-top { border-radius: 12px 12px 0 0; }
.dcc-root .dcc-hc.dcc-hc-ovf .dcc-bot { border-radius: 0 0 12px 12px; }

/* --- ледяная глыба (Луна в «Ледяных оковах», любые оковы льда) --- */
.dcc-root .dcc-iceblock {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    url("../assets/vfx/ice-facets.svg") center / 100% 100% no-repeat,
    linear-gradient(162deg, rgba(235, 250, 255, .55) 0%, rgba(150, 210, 255, .22) 34%, rgba(205, 240, 255, .42) 58%, rgba(110, 175, 240, .34) 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75), inset 0 0 22px 4px rgba(200, 240, 255, .9), inset 0 -18px 30px rgba(120, 190, 255, .45);
  -webkit-backdrop-filter: blur(1.4px) saturate(.6) brightness(1.12);
  backdrop-filter: blur(1.4px) saturate(.6) brightness(1.12);
  overflow: hidden;
}
.dcc-root .dcc-iceblock > i {
  position: absolute; inset: -40% -60%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .55) 50%, transparent 58%);
  animation: dcc-ice-shine 3.6s ease-in-out infinite;
}
@keyframes dcc-ice-shine { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.dcc-root .dcc-hc.dcc-frozen.dcc-aura-enter .dcc-iceblock { animation: dcc-ice-in .75s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes dcc-ice-in {
  0% { clip-path: inset(100% 0 0 0); filter: brightness(2.5); }
  70% { clip-path: inset(0 0 0 0); filter: brightness(1.6); }
  100% { clip-path: inset(0 0 0 0); filter: none; }
}

/* --- чёрная аура (Фия после «Падения маски») --- */
.dcc-root .dcc-hc.dcc-has-aura { border-color: #2a0a3d; box-shadow: 0 0 0 2px #0a0010, 0 0 0 4px rgba(168, 85, 247, .55), 0 0 30px 10px rgba(0, 0, 0, .95), 0 0 60px 18px rgba(126, 34, 206, .55); }
.dcc-root .dcc-aura-dark { position: absolute; inset: -26px -22px -16px; z-index: -1; pointer-events: none; border-radius: 30px; }
/* языки чёрного пламени над картой */
.dcc-root .dcc-aura-dark::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: -14%; height: 40%;
  background:
    radial-gradient(ellipse 22% 60% at 20% 100%, rgba(8, 0, 14, .95), transparent 70%),
    radial-gradient(ellipse 18% 75% at 45% 100%, rgba(20, 0, 34, .95), transparent 70%),
    radial-gradient(ellipse 20% 55% at 72% 100%, rgba(8, 0, 14, .95), transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(126, 34, 206, .6), transparent 75%);
  filter: blur(3px) drop-shadow(0 0 5px rgba(168, 85, 247, .95)) drop-shadow(0 0 12px rgba(126, 34, 206, .7));
  transform-origin: 50% 100%;
  animation: dcc-aura-flame 1.6s ease-in-out infinite alternate;
}
/* тьма заползает и внутрь рамки — состояние читается на самом портрете */
.dcc-root .dcc-hc.dcc-has-aura .dcc-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 34px 12px rgba(6, 0, 12, .92), inset 0 0 8px 2px rgba(168, 85, 247, .75);
  animation: dcc-aura-breathe 2.4s ease-in-out infinite;
}
@keyframes dcc-aura-breathe { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes dcc-aura-flame { 0% { transform: scaleY(.85) skewX(-4deg); opacity: .8; } 100% { transform: scaleY(1.15) skewX(4deg); opacity: 1; } }
.dcc-root .dcc-aura-dark > i {
  position: absolute; inset: 0; border-radius: inherit;
  background: conic-gradient(from var(--dcc-aa, 0deg), transparent 0deg, rgba(8, 0, 14, .95) 40deg, transparent 95deg, rgba(30, 0, 50, .9) 160deg, transparent 210deg, rgba(4, 0, 8, .95) 270deg, transparent 320deg);
  filter: blur(9px);
  animation: dcc-aura-spin 5.5s linear infinite;
}
.dcc-root .dcc-aura-dark > i + i {
  inset: 6px;
  background: conic-gradient(from calc(90deg - var(--dcc-aa, 0deg)), transparent, rgba(147, 51, 234, .85) 60deg, transparent 120deg, rgba(10, 0, 20, .95) 200deg, transparent 260deg, rgba(168, 85, 247, .75) 320deg, transparent);
  animation: dcc-aura-spin 3.8s linear infinite;
}
/* крутится сам градиент (а не прямоугольник) — дым течёт вокруг карты */
@property --dcc-aa { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes dcc-aura-spin { to { --dcc-aa: 360deg; } }
.dcc-root .dcc-hc.dcc-aura-enter .dcc-aura-dark { animation: dcc-aura-in .9s ease-out both; }
@keyframes dcc-aura-in { 0% { transform: scale(.6); opacity: 0; filter: brightness(3); } 100% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .dcc-root .dcc-aura-dark > i, .dcc-root .dcc-iceblock > i { animation: none !important; }
}

/* ================= иконки предметов, реликвий и ресурсов (v5.0.2) ================= */
.dcc-gi {
  --g1: #ffffff; --g2: #e7dcff; --g3: #9a83d8;
  display: inline-block;
  width: 1.2em; height: 1.2em;
  vertical-align: -.24em;
  background: linear-gradient(180deg, var(--g1) 0%, var(--g2) 55%, var(--g3) 100%);
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--g3) 80%, transparent)) drop-shadow(0 1px 1px rgba(0, 0, 0, .7));
  flex: none;
}
.dcc-gi.dcc-gi-full { background: var(--ico) center / contain no-repeat; -webkit-mask: none; mask: none; }
/* редкость контейнера задаёт цвет значка — тот же язык, что у статусов */
.dcc-rar-common .dcc-gi, .dcc-gi-common { --g2: #e5e7eb; --g3: #8b93a7; }
.dcc-rar-rare .dcc-gi { --g2: #bbf7d0; --g3: #10b981; }
.dcc-rar-epic .dcc-gi { --g2: #f3d9ff; --g3: #a855f7; }
.dcc-rar-legendary .dcc-gi { --g2: #fde68a; --g3: #f59e0b; }
.dcc-rar-tower .dcc-gi, .dcc-rar-secret .dcc-gi { --g2: #fecdd3; --g3: #e11d48; }
/* крупные значки в карточках предметов/ресурсов */
.dcc-itemico .dcc-gi, .dcc-itemrowico .dcc-gi, .dcc-resico .dcc-gi { width: 1.1em; height: 1.1em; vertical-align: middle; }
.dcc-handrow .dcc-gi, .dcc-offerbtn .dcc-gi, .dcc-relicbtn .dcc-gi { --g2: #ccfbf1; --g3: #14b8a6; }
/* базовая тема делает всё внутри кнопок панели inline — значку нужна своя коробка */
.dnd-cards .dcc-root .dcc-side .dcc-acts > button > .dcc-gi, .dcc-root button > .dcc-gi, .dcc-root .dcc-dosename > .dcc-gi { display: inline-block; }

/* --- багровая аура «Мощи Хаоса» (Кайн) --- */
.dcc-root .dcc-hc.dcc-has-chaos { border-color: #5a0010; box-shadow: 0 0 0 2px #14020a, 0 0 0 4px rgba(255, 31, 61, .7), 0 0 30px 10px rgba(0, 0, 0, .9), 0 0 64px 20px rgba(255, 31, 61, .5), 0 0 90px 30px rgba(255, 176, 32, .18); }
.dcc-root .dcc-aura-chaos > i {
  background: conic-gradient(from var(--dcc-aa, 0deg), transparent 0deg, rgba(20, 2, 10, .95) 40deg, transparent 95deg, rgba(179, 0, 27, .9) 160deg, transparent 210deg, rgba(20, 2, 10, .95) 270deg, transparent 320deg);
  animation-duration: 3.2s;
}
.dcc-root .dcc-aura-chaos > i + i {
  background: conic-gradient(from calc(90deg - var(--dcc-aa, 0deg)), transparent, rgba(255, 31, 61, .9) 60deg, transparent 120deg, rgba(255, 176, 32, .55) 200deg, transparent 260deg, rgba(255, 31, 61, .8) 320deg, transparent);
  animation-duration: 2.2s;
}
.dcc-root .dcc-aura-chaos::before {
  background:
    radial-gradient(ellipse 22% 60% at 20% 100%, rgba(20, 2, 10, .95), transparent 70%),
    radial-gradient(ellipse 18% 80% at 45% 100%, rgba(120, 0, 20, .95), transparent 70%),
    radial-gradient(ellipse 20% 55% at 72% 100%, rgba(20, 2, 10, .95), transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(255, 31, 61, .7), transparent 75%);
  filter: blur(3px) drop-shadow(0 0 6px rgba(255, 31, 61, .95)) drop-shadow(0 0 14px rgba(255, 176, 32, .5));
  animation-duration: 1s;
}
.dcc-root .dcc-hc.dcc-has-chaos .dcc-art::after { box-shadow: inset 0 0 34px 12px rgba(20, 2, 10, .9), inset 0 0 10px 3px rgba(255, 31, 61, .85); }