/* ═══ 暗能量注入组件样式 v1.0.3 ═══ */
.de-stars { position:fixed; inset:0; pointer-events:none; z-index:0; }

.de-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px; margin: 16px auto;
  padding: 22px 24px 20px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(30,18,60,0.82), rgba(14,8,36,0.88));
  border: 1px solid rgba(140,100,220,0.28);
  box-shadow: 0 0 50px rgba(90,50,160,0.28), inset 0 0 40px rgba(60,30,120,0.12);
  backdrop-filter: blur(10px);
  color: #e8e0ff;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  box-sizing: border-box;
}

.de-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.de-title { display: flex; flex-direction: column; }
.de-title h3 {
  font-size: 20px; letter-spacing: 2px; margin: 0;
  background: linear-gradient(90deg,#d4c0ff,#a070ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 24px rgba(150,100,255,0.25);
}
.de-title .de-sub { font-size: 10px; color: #7d6cb0; letter-spacing: 3px; margin-top: 2px; text-transform: uppercase; }
.de-stages { display: flex; align-items: center; gap: 6px; }
.de-dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid rgba(160,130,220,0.45);
  background: transparent;
  transition: all .5s ease;
}
.de-dot.done { background: #8a5cff; border-color: #b598ff; box-shadow: 0 0 10px #8a5cff; }
.de-dot.cur { background: #c9b4ff; border-color: #dccbff; box-shadow: 0 0 14px #c9b4ff; animation: dePulseDot 1.4s ease-in-out infinite; }
@keyframes dePulseDot { 0%,100%{transform:scale(1);} 50%{transform:scale(1.25);} }

.de-body { display: flex; gap: 20px; align-items: stretch; }
.de-orb-wrap {
  position: relative;
  width: 150px; height: 150px;
  flex: 0 0 150px;
  display: flex; align-items: center; justify-content: center;
}
.de-orbit {
  position: absolute; inset: -8px; border-radius: 50%;
  border: 1px dashed rgba(150,110,230,0.28);
  animation: deOrbitRot 22s linear infinite;
}
.de-orbit::before {
  content:""; position:absolute; width:8px; height:8px; border-radius:50%;
  background:#b598ff; top:-4px; left:50%; transform:translateX(-50%);
  box-shadow: 0 0 10px #b598ff;
}
@keyframes deOrbitRot { to { transform: rotate(360deg); } }

.de-orb {
  position: relative;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #2c1658 0%, #100628 55%, #050210 100%);
  box-shadow: 0 0 50px rgba(110,70,200,0.42), inset 0 0 40px #000;
  overflow: hidden;
  animation: deOrbBreath 5s ease-in-out infinite;
}
@keyframes deOrbBreath { 0%,100%{transform:scale(1);} 50%{transform:scale(1.02);} }

.de-cloud1, .de-cloud2 {
  position:absolute; inset:0; border-radius:50%;
  mix-blend-mode: screen;
  animation: deDrift1 16s ease-in-out infinite alternate;
}
.de-cloud1 {
  background: radial-gradient(circle at 60% 40%, rgba(120,70,210,0.35), transparent 55%),
              radial-gradient(circle at 30% 65%, rgba(80,40,160,0.3), transparent 50%);
}
.de-cloud2 {
  background: radial-gradient(circle at 40% 60%, rgba(150,90,230,0.22), transparent 52%),
              radial-gradient(circle at 70% 35%, rgba(90,50,180,0.26), transparent 48%);
  animation: deDrift2 24s ease-in-out infinite alternate;
}
@keyframes deDrift1 { to { transform: translate(8px,-6px) rotate(8deg); } }
@keyframes deDrift2 { to { transform: translate(-9px,7px) rotate(-10deg); } }

.de-noise {
  position:absolute; inset:0; border-radius:50%;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: overlay; opacity: .5;
  animation: deNoiseShift 3s steps(6) infinite;
}
@keyframes deNoiseShift { to { background-position: 8px 8px; } }

.de-fill {
  position:absolute; left:0; right:0; bottom:0; height:0%;
  background: linear-gradient(0deg, rgba(140,80,230,0.55), rgba(180,120,255,0.28));
  transition: height .9s cubic-bezier(.4,0,.2,1);
  border-top: 1px solid rgba(200,160,255,0.35);
}
.de-ripple {
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:140%; aspect-ratio:2/1; border-radius:50%;
  border:1px solid rgba(200,160,255,0.22);
  opacity:0; transition: opacity .6s;
  animation: deRippleMove 4s ease-in-out infinite;
}
.de-ripple.de-r2 { animation-delay:-2s; border-color:rgba(200,160,255,0.14); }
@keyframes deRippleMove { 0%,100%{transform:translate(-50%,0) scale(1);} 50%{transform:translate(-50%,-4px) scale(1.04);} }

.de-core {
  position:absolute; width:34%; height:34%; border-radius:50%;
  top:22%; left:24%;
  background: radial-gradient(circle, rgba(210,190,255,0.55), transparent 65%);
  filter: blur(4px); animation: deCorePulse 3.5s ease-in-out infinite;
}
@keyframes deCorePulse { 0%,100%{opacity:.7;transform:scale(1);} 50%{opacity:1;transform:scale(1.12);} }

.de-orb-glow {
  position:absolute; inset:0; border-radius:50%;
  box-shadow: 0 0 30px rgba(140,90,230,0.0);
  transition: box-shadow .8s; pointer-events:none;
}
.de-orb-wrap.charged .de-orb-glow { box-shadow: 0 0 60px rgba(160,100,255,0.55); }

.de-spark { position:absolute; width:3px; height:3px; border-radius:50%; background:#dccbff; box-shadow:0 0 6px #dccbff; opacity:0; pointer-events:none; }

.de-pulse-ring {
  position:absolute; left:50%; top:50%; width:40%; height:40%; border-radius:50%;
  border:2px solid rgba(210,180,255,0.7); transform:translate(-50%,-50%) scale(.5); opacity:0; pointer-events:none;
}
.de-bolt {
  position:absolute; width:2px; height:60%; left:50%; top:20%;
  background: linear-gradient(180deg, rgba(230,210,255,0.9), transparent);
  opacity:0; transform:translateX(-50%);
  filter: drop-shadow(0 0 4px #dccbff);
}
.de-bolt.de-b2 { left:38%; transform:translateX(-50%) rotate(-6deg); }
.de-bolt.de-b3 { left:62%; transform:translateX(-50%) rotate(6deg); }

.de-phase-label {
  position:absolute; bottom:-22px; left:0; right:0; text-align:center;
  font-size:11px; color:#9d8bc8; letter-spacing:1px;
}

.de-info { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.de-line { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.3; color: #cbb8ee; }
.de-line .de-k { color: #8a78b5; flex: 0 0 auto; letter-spacing: .5px; font-size: 12px; }
.de-line .de-v { font-weight: 700; color: #e8dcff; font-size: 13px; }
.de-line .de-v.de-cost { color: #ffd479; }
.de-line .de-v.de-gain { color: #c9b4ff; }
.de-line .de-v.de-buff { color: #7fe0a8; }
.de-line .de-v.de-debuff { color: #ff9d6e; }
.de-sep { height: 1px; background: linear-gradient(90deg, transparent, rgba(140,100,220,0.25), transparent); margin: 2px 0; }

.de-btn-wrap { margin-top: 16px; }
.de-inject {
  position:relative; width:100%; padding:12px; border:none; border-radius:12px; cursor:pointer;
  font-size:14px; letter-spacing:2px; font-weight:700; color:#fff;
  background: linear-gradient(135deg,#7a4fe0,#5a2ec0);
  box-shadow: 0 6px 22px rgba(100,60,200,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform .2s, filter .2s, box-shadow .2s;
  overflow:hidden;
}
.de-inject:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 8px 28px rgba(120,70,230,0.55); }
.de-inject:disabled { opacity:.55; cursor:not-allowed; }
.de-inject .de-charge {
  position:absolute; left:0; bottom:0; height:3px; width:0%;
  background: linear-gradient(90deg,#ffd479,#ffe9a8);
  box-shadow: 0 0 8px #ffd479;
  transition: width .05s linear;
}
.de-inject .de-lbl { position:relative; z-index:1; }

/* Toast 提示 */
.de-toast {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9);
  background: rgba(20,10,50,0.92); color: #e8dcff;
  padding: 14px 28px; border-radius: 12px;
  font-size: 14px; letter-spacing: 1px;
  border: 1px solid rgba(140,100,220,0.4);
  box-shadow: 0 0 40px rgba(100,60,200,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity .35s, transform .35s;
  z-index: 9999;
  white-space: nowrap;
}
.de-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }