/**
 * Icons Library - 40 Dynamic CSS Icons
 * Each icon is 32x32px, self-contained, pure CSS.
 * Usage: <div class="icon-box"><div class="icon-xxx"></div></div>
 */

/* ============================================================
   1. ATOM - 三轨道电子绕行
   ============================================================ */
.icon-atom {
    width: 32px; height: 32px; position: relative;
}
.icon-atom::before, .icon-atom::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    border: 1.5px solid rgba(126,203,245,0.5); border-radius: 50%;
}
.icon-atom::before {
    width: 24px; height: 24px; margin: -12px 0 0 -12px;
    border-left-color: transparent; border-right-color: transparent;
    animation: atomSpin1 2s linear infinite;
}
.icon-atom::after {
    width: 16px; height: 16px; margin: -8px 0 0 -8px;
    border-top-color: transparent; border-bottom-color: transparent;
    animation: atomSpin2 1.5s linear infinite reverse;
}
.icon-atom i {
    position: absolute; top: 50%; left: 50%;
    width: 6px; height: 6px; margin: -3px 0 0 -3px;
    background: rgba(126,203,245,0.9); border-radius: 50%;
    box-shadow: 0 0 6px rgba(126,203,245,0.5);
}
@keyframes atomSpin1 {
    0% { transform: rotateX(60deg) rotateZ(0deg); }
    100% { transform: rotateX(60deg) rotateZ(360deg); }
}
@keyframes atomSpin2 {
    0% { transform: rotateY(60deg) rotateZ(0deg); }
    100% { transform: rotateY(60deg) rotateZ(360deg); }
}

/* ============================================================
   2. PULSAR - 十字脉冲
   ============================================================ */
.icon-pulsar {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-pulsar::before, .icon-pulsar::after {
    content: ''; position: absolute; background: rgba(184,169,240,0.8);
    border-radius: 1px;
}
.icon-pulsar::before {
    width: 28px; height: 3px; animation: pulsarFade 1.4s ease-in-out infinite;
}
.icon-pulsar::after {
    width: 3px; height: 28px; animation: pulsarFade 1.4s ease-in-out infinite 0.7s;
}
@keyframes pulsarFade {
    0%, 100% { opacity: 0.2; transform: scale(0.6); }
    50% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px rgba(184,169,240,0.6); }
}

/* ============================================================
   3. NEBULA - 三色星云扩散
   ============================================================ */
.icon-nebula {
    width: 32px; height: 32px; position: relative;
}
.icon-nebula span {
    position: absolute; border-radius: 50%; opacity: 0.5;
    animation: nebulaDrift 3s ease-in-out infinite alternate;
}
.icon-nebula span:nth-child(1) {
    width: 16px; height: 16px; top: 4px; left: 4px;
    background: rgba(126,203,245,0.6); animation-delay: 0s;
}
.icon-nebula span:nth-child(2) {
    width: 12px; height: 12px; top: 12px; left: 14px;
    background: rgba(184,169,240,0.6); animation-delay: -1s;
}
.icon-nebula span:nth-child(3) {
    width: 10px; height: 10px; top: 14px; left: 6px;
    background: rgba(126,232,197,0.6); animation-delay: -2s;
}
@keyframes nebulaDrift {
    0% { transform: translate(0,0) scale(1); }
    100% { transform: translate(4px,-4px) scale(1.3); opacity: 0.3; }
}

/* ============================================================
   4. COMET - 彗星带尾
   ============================================================ */
.icon-comet {
    width: 32px; height: 32px; position: relative;
    overflow: hidden;
}
.icon-comet::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 6px; height: 6px; margin: -3px 0 0 -3px;
    background: rgba(255,255,255,0.9); border-radius: 50%;
    box-shadow: 0 0 8px rgba(255,255,255,0.5);
    animation: cometFly 2s ease-in-out infinite;
}
.icon-comet::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 20px; height: 2px; margin: -1px 0 0 -10px;
    background: linear-gradient(90deg, rgba(255,255,255,0.7), transparent);
    animation: cometTail 2s ease-in-out infinite;
}
@keyframes cometFly {
    0% { transform: translate(-10px, -6px); }
    50% { transform: translate(6px, 4px); }
    100% { transform: translate(-10px, -6px); }
}
@keyframes cometTail {
    0% { transform: translate(-10px, -6px) rotate(-30deg) scaleX(0.5); opacity: 0.3; }
    50% { transform: translate(6px, 4px) rotate(-30deg) scaleX(1.2); opacity: 0.8; }
    100% { transform: translate(-10px, -6px) rotate(-30deg) scaleX(0.5); opacity: 0.3; }
}

/* ============================================================
   5. ECLIPSE - 日食遮罩
   ============================================================ */
.icon-eclipse {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-eclipse::before {
    content: ''; width: 22px; height: 22px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,220,150,0.9), rgba(255,180,80,0.5));
    box-shadow: 0 0 10px rgba(255,200,100,0.3);
}
.icon-eclipse::after {
    content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%;
    background: rgba(10,12,20,0.95); margin-left: -6px;
    animation: eclipseSlide 3s ease-in-out infinite;
}
@keyframes eclipseSlide {
    0%, 100% { transform: translateX(-8px); }
    50% { transform: translateX(8px); }
}

/* ============================================================
   6. WORMHOLE - 螺旋收缩
   ============================================================ */
.icon-wormhole {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-wormhole i {
    position: absolute; border: 1px solid rgba(126,232,197,0.4); border-radius: 50%;
    animation: wormholeSpiral 2s linear infinite;
}
.icon-wormhole i:nth-child(1) { width: 28px; height: 28px; animation-delay: 0s; }
.icon-wormhole i:nth-child(2) { width: 22px; height: 22px; animation-delay: -0.3s; }
.icon-wormhole i:nth-child(3) { width: 16px; height: 16px; animation-delay: -0.6s; }
.icon-wormhole i:nth-child(4) { width: 10px; height: 10px; animation-delay: -0.9s; }
@keyframes wormholeSpiral {
    0% { transform: rotate(0deg) scale(1); opacity: 0.8; }
    50% { transform: rotate(180deg) scale(0.6); opacity: 0.4; }
    100% { transform: rotate(360deg) scale(1); opacity: 0.8; }
}

/* ============================================================
   7. QUASAR - 四向射线爆发
   ============================================================ */
.icon-quasar {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-quasar::before {
    content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,100,100,0.9); box-shadow: 0 0 10px rgba(255,100,100,0.6);
    animation: quasarCore 1.2s ease-in-out infinite;
}
.icon-quasar i {
    position: absolute; width: 2px; height: 14px; border-radius: 1px;
    background: linear-gradient(to bottom, rgba(255,120,120,0.8), transparent);
}
.icon-quasar i:nth-child(1) { transform: rotate(0deg) translateY(-8px); animation: quasarRay 1.2s ease-in-out infinite; }
.icon-quasar i:nth-child(2) { transform: rotate(90deg) translateY(-8px); animation: quasarRay 1.2s ease-in-out infinite 0.3s; }
.icon-quasar i:nth-child(3) { transform: rotate(180deg) translateY(-8px); animation: quasarRay 1.2s ease-in-out infinite 0.6s; }
.icon-quasar i:nth-child(4) { transform: rotate(270deg) translateY(-8px); animation: quasarRay 1.2s ease-in-out infinite 0.9s; }
@keyframes quasarCore {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.5); }
}
@keyframes quasarRay {
    0%, 100% { opacity: 0.2; height: 10px; }
    50% { opacity: 1; height: 16px; }
}

/* ============================================================
   8. VOID - 黑洞吸积
   ============================================================ */
.icon-void {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-void::before {
    content: ''; width: 10px; height: 10px; border-radius: 50%;
    background: rgba(10,12,20,1); border: 1px solid rgba(126,203,245,0.6);
    animation: voidSuck 2s ease-in-out infinite;
}
.icon-void::after {
    content: ''; position: absolute; width: 24px; height: 24px; border-radius: 50%;
    border: 1px dashed rgba(126,203,245,0.3);
    animation: voidSpin 3s linear infinite;
}
@keyframes voidSuck {
    0%, 100% { transform: scale(1); border-color: rgba(126,203,245,0.6); }
    50% { transform: scale(0.7); border-color: rgba(126,203,245,1); box-shadow: 0 0 8px rgba(126,203,245,0.4); }
}
@keyframes voidSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================================
   9. CRYSTAL - 六边形棱镜折射
   ============================================================ */
.icon-crystal {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-crystal::before {
    content: ''; width: 16px; height: 18px;
    background: linear-gradient(135deg, rgba(184,169,240,0.4), rgba(126,203,245,0.4));
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: crystalShine 2.5s ease-in-out infinite;
}
@keyframes crystalShine {
    0%, 100% { opacity: 0.5; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.4); box-shadow: 0 0 10px rgba(184,169,240,0.5); }
}

/* ============================================================
   10. AURORA - 极光波浪
   ============================================================ */
.icon-aurora {
    width: 32px; height: 32px; position: relative;
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
    align-items: center;
}
.icon-aurora i {
    height: 2px; border-radius: 1px;
    background: linear-gradient(90deg, transparent, rgba(126,232,197,0.7), transparent);
    animation: auroraFlow 2s ease-in-out infinite alternate;
}
.icon-aurora i:nth-child(1) { width: 24px; animation-delay: 0s; }
.icon-aurora i:nth-child(2) { width: 20px; animation-delay: 0.3s; }
.icon-aurora i:nth-child(3) { width: 26px; animation-delay: 0.6s; }
.icon-aurora i:nth-child(4) { width: 18px; animation-delay: 0.9s; }
@keyframes auroraFlow {
    0% { opacity: 0.3; transform: translateX(-4px) scaleX(0.8); }
    100% { opacity: 0.9; transform: translateX(4px) scaleX(1.1); }
}

/* ============================================================
   11. SINGULARITY - 奇点坍缩与爆发
   ============================================================ */
.icon-singularity {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-singularity::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.9);
    animation: singularityPulse 2s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes singularityPulse {
    0% { transform: scale(0.5); box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
    50% { transform: scale(1); box-shadow: 0 0 0 8px rgba(255,255,255,0); }
    100% { transform: scale(0.5); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ============================================================
   12. CONSTELLATION - 星座点连线闪烁
   ============================================================ */
.icon-constellation {
    width: 32px; height: 32px; position: relative;
}
.icon-constellation i {
    position: absolute; width: 3px; height: 3px; border-radius: 50%;
    background: rgba(255,255,255,0.8);
    animation: starTwinkle 1.5s ease-in-out infinite alternate;
}
.icon-constellation i:nth-child(1) { top: 6px; left: 8px; animation-delay: 0s; }
.icon-constellation i:nth-child(2) { top: 10px; left: 20px; animation-delay: 0.4s; }
.icon-constellation i:nth-child(3) { top: 20px; left: 6px; animation-delay: 0.8s; }
.icon-constellation i:nth-child(4) { top: 22px; left: 22px; animation-delay: 1.2s; }
.icon-constellation i:nth-child(5) { top: 14px; left: 14px; animation-delay: 0.2s; }
.icon-constellation svg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    stroke: rgba(255,255,255,0.2); stroke-width: 1; fill: none;
}
@keyframes starTwinkle {
    0% { opacity: 0.3; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 4px rgba(255,255,255,0.6); }
}

/* ============================================================
   13. NOVA - 新星多层爆发
   ============================================================ */
.icon-nova {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-nova i {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(255,200,100,0.5);
    animation: novaBurst 2s ease-out infinite;
}
.icon-nova i:nth-child(1) { width: 8px; height: 8px; animation-delay: 0s; }
.icon-nova i:nth-child(2) { width: 16px; height: 16px; animation-delay: 0.3s; }
.icon-nova i:nth-child(3) { width: 26px; height: 26px; animation-delay: 0.6s; }
@keyframes novaBurst {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ============================================================
   14. GRAVITY - 同心引力波纹
   ============================================================ */
.icon-gravity {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-gravity i {
    position: absolute; border-radius: 50%; border: 1px solid rgba(126,203,245,0.4);
    animation: gravityRipple 2s ease-out infinite;
}
.icon-gravity i:nth-child(1) { width: 8px; height: 8px; animation-delay: 0s; }
.icon-gravity i:nth-child(2) { width: 16px; height: 16px; animation-delay: 0.5s; }
.icon-gravity i:nth-child(3) { width: 24px; height: 24px; animation-delay: 1s; }
@keyframes gravityRipple {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(1.2); opacity: 0; }
}

/* ============================================================
   15. PHOTON - 光子弹跳路径
   ============================================================ */
.icon-photon {
    width: 32px; height: 32px; position: relative;
}
.icon-photon::before {
    content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255,255,255,0.9); box-shadow: 0 0 6px rgba(255,255,255,0.5);
    animation: photonBounce 1.8s ease-in-out infinite;
}
@keyframes photonBounce {
    0%, 100% { top: 4px; left: 4px; }
    25% { top: 4px; left: 24px; }
    50% { top: 24px; left: 24px; }
    75% { top: 24px; left: 4px; }
}

/* ============================================================
   16. TESSERACT - 超立方体旋转投影
   ============================================================ */
.icon-tesseract {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-tesseract::before {
    content: ''; width: 14px; height: 14px;
    border: 1.5px solid rgba(184,169,240,0.7);
    animation: tesseractRotate 3s linear infinite;
}
.icon-tesseract::after {
    content: ''; position: absolute; width: 14px; height: 14px;
    border: 1.5px solid rgba(184,169,240,0.3);
    animation: tesseractRotate 3s linear infinite reverse;
}
@keyframes tesseractRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================================
   17. RIFT - 空间裂缝开合
   ============================================================ */
.icon-rift {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-rift::before, .icon-rift::after {
    content: ''; position: absolute; width: 2px; height: 20px; border-radius: 1px;
    background: linear-gradient(to bottom, transparent, rgba(126,232,197,0.8), transparent);
}
.icon-rift::before {
    transform: rotate(15deg); animation: riftOpen1 2s ease-in-out infinite;
}
.icon-rift::after {
    transform: rotate(-15deg); animation: riftOpen2 2s ease-in-out infinite;
}
@keyframes riftOpen1 {
    0%, 100% { transform: rotate(5deg); opacity: 0.5; }
    50% { transform: rotate(25deg); opacity: 1; box-shadow: 0 0 6px rgba(126,232,197,0.5); }
}
@keyframes riftOpen2 {
    0%, 100% { transform: rotate(-5deg); opacity: 0.5; }
    50% { transform: rotate(-25deg); opacity: 1; box-shadow: 0 0 6px rgba(126,232,197,0.5); }
}

/* ============================================================
   18. ENTROPY - 粒子无序扩散
   ============================================================ */
.icon-entropy {
    width: 32px; height: 32px; position: relative;
}
.icon-entropy i {
    position: absolute; width: 3px; height: 3px; border-radius: 50%;
    background: rgba(255,255,255,0.6);
    animation: entropyScatter 2s ease-in-out infinite alternate;
}
.icon-entropy i:nth-child(1) { top: 50%; left: 50%; animation-delay: 0s; }
.icon-entropy i:nth-child(2) { top: 50%; left: 50%; animation-delay: 0.2s; }
.icon-entropy i:nth-child(3) { top: 50%; left: 50%; animation-delay: 0.4s; }
.icon-entropy i:nth-child(4) { top: 50%; left: 50%; animation-delay: 0.6s; }
.icon-entropy i:nth-child(5) { top: 50%; left: 50%; animation-delay: 0.8s; }
@keyframes entropyScatter {
    0% { transform: translate(0,0) scale(1); opacity: 0.8; }
    100% {
        transform: translate(
            calc(var(--dx, 10px)),
            calc(var(--dy, 10px))
        ) scale(0.5);
        opacity: 0.3;
    }
}
.icon-entropy i:nth-child(1) { --dx: -10px; --dy: -8px; }
.icon-entropy i:nth-child(2) { --dx: 12px; --dy: -6px; }
.icon-entropy i:nth-child(3) { --dx: -8px; --dy: 10px; }
.icon-entropy i:nth-child(4) { --dx: 10px; --dy: 8px; }
.icon-entropy i:nth-child(5) { --dx: 0px; --dy: -12px; }

/* ============================================================
   19. SYNAPSE - 神经突触电击
   ============================================================ */
.icon-synapse {
    width: 32px; height: 32px; position: relative;
}
.icon-synapse::before, .icon-synapse::after {
    content: ''; position: absolute; border-radius: 50%;
    background: rgba(184,169,240,0.8);
}
.icon-synapse::before { width: 8px; height: 8px; top: 8px; left: 6px; }
.icon-synapse::after { width: 8px; height: 8px; top: 16px; left: 18px; }
.icon-synapse i {
    position: absolute; top: 12px; left: 10px; width: 12px; height: 2px;
    background: linear-gradient(90deg, rgba(184,169,240,0.8), rgba(126,232,197,0.8));
    transform-origin: left center; transform: rotate(35deg);
    animation: synapseFire 1.2s ease-in-out infinite;
}
@keyframes synapseFire {
    0%, 100% { opacity: 0.2; transform: rotate(35deg) scaleX(0.5); }
    50% { opacity: 1; transform: rotate(35deg) scaleX(1.2); box-shadow: 0 0 6px rgba(184,169,240,0.6); }
}

/* ============================================================
   20. MATRIX - 矩阵下落
   ============================================================ */
.icon-matrix {
    width: 32px; height: 32px; position: relative;
    display: flex; justify-content: center; gap: 3px;
    overflow: hidden;
}
.icon-matrix i {
    width: 3px; height: 6px; border-radius: 1px;
    background: rgba(126,232,197,0.7);
    animation: matrixDrop 1.2s linear infinite;
}
.icon-matrix i:nth-child(1) { animation-delay: 0s; }
.icon-matrix i:nth-child(2) { animation-delay: 0.4s; }
.icon-matrix i:nth-child(3) { animation-delay: 0.8s; }
.icon-matrix i:nth-child(4) { animation-delay: 0.2s; }
.icon-matrix i:nth-child(5) { animation-delay: 0.6s; }
@keyframes matrixDrop {
    0% { transform: translateY(-8px); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateY(36px); opacity: 0; }
}

/* ============================================================
   21. PRISM - 棱镜分光三角
   ============================================================ */
.icon-prism {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-prism::before {
    content: ''; width: 0; height: 0;
    border-left: 8px solid transparent; border-right: 8px solid transparent;
    border-bottom: 14px solid rgba(255,255,255,0.8);
    animation: prismShift 2s ease-in-out infinite;
}
.icon-prism::after {
    content: ''; position: absolute; top: 18px; left: 10px;
    width: 12px; height: 3px; border-radius: 1px;
    background: linear-gradient(90deg, rgba(255,100,100,0.7), rgba(255,200,100,0.7), rgba(126,232,197,0.7));
    animation: prismRainbow 2s ease-in-out infinite;
}
@keyframes prismShift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
}
@keyframes prismRainbow {
    0%, 100% { opacity: 0.5; transform: scaleX(0.8); }
    50% { opacity: 1; transform: scaleX(1.2); }
}

/* ============================================================
   22. ECHO - 回声扩散圆
   ============================================================ */
.icon-echo {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-echo::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: rgba(126,203,245,0.9);
    animation: echoCenter 2s ease-in-out infinite;
}
.icon-echo i {
    position: absolute; border-radius: 50%; border: 1px solid rgba(126,203,245,0.3);
    animation: echoRing 2s ease-out infinite;
}
.icon-echo i:nth-child(1) { width: 14px; height: 14px; animation-delay: 0s; }
.icon-echo i:nth-child(2) { width: 22px; height: 22px; animation-delay: 0.6s; }
.icon-echo i:nth-child(3) { width: 30px; height: 30px; animation-delay: 1.2s; }
@keyframes echoCenter {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.8); }
}
@keyframes echoRing {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.3); opacity: 0; }
}

/* ============================================================
   23. FLUX - 磁通量波浪线
   ============================================================ */
.icon-flux {
    width: 32px; height: 32px; position: relative;
}
.icon-flux svg {
    width: 100%; height: 100%; overflow: visible;
}
.icon-flux path {
    fill: none; stroke: rgba(126,232,197,0.7); stroke-width: 1.5;
    stroke-dasharray: 40; stroke-dashoffset: 40;
    animation: fluxDraw 2s linear infinite;
}
@keyframes fluxDraw {
    0% { stroke-dashoffset: 40; }
    100% { stroke-dashoffset: 0; }
}

/* ============================================================
   24. NEXUS - 节点连线网络
   ============================================================ */
.icon-nexus {
    width: 32px; height: 32px; position: relative;
}
.icon-nexus i {
    position: absolute; width: 4px; height: 4px; border-radius: 50%;
    background: rgba(255,255,255,0.8);
    animation: nexusPulse 1.5s ease-in-out infinite alternate;
}
.icon-nexus i:nth-child(1) { top: 6px; left: 10px; animation-delay: 0s; }
.icon-nexus i:nth-child(2) { top: 14px; left: 22px; animation-delay: 0.3s; }
.icon-nexus i:nth-child(3) { top: 22px; left: 8px; animation-delay: 0.6s; }
.icon-nexus i:nth-child(4) { top: 18px; left: 20px; animation-delay: 0.9s; }
.icon-nexus i:nth-child(5) { top: 10px; left: 18px; animation-delay: 1.2s; }
@keyframes nexusPulse {
    0% { opacity: 0.3; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 4px rgba(255,255,255,0.5); }
}

/* ============================================================
   25. ORB - 魔法宝珠浮光
   ============================================================ */
.icon-orb {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-orb::before {
    content: ''; width: 14px; height: 14px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(126,203,245,0.4));
    animation: orbFloat 2.5s ease-in-out infinite;
}
.icon-orb::after {
    content: ''; position: absolute; width: 20px; height: 6px; border-radius: 50%;
    background: rgba(126,203,245,0.15); margin-top: 12px;
    animation: orbShadow 2.5s ease-in-out infinite;
}
@keyframes orbFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@keyframes orbShadow {
    0%, 100% { transform: scaleX(1); opacity: 0.3; }
    50% { transform: scaleX(0.7); opacity: 0.1; }
}

/* ============================================================
   26. RUNE - 符文外圈旋转
   ============================================================ */
.icon-rune {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-rune::before {
    content: ''; width: 18px; height: 18px; border-radius: 50%;
    border: 2px dashed rgba(184,169,240,0.6);
    animation: runeSpin 4s linear infinite;
}
.icon-rune::after {
    content: ''; position: absolute; width: 6px; height: 6px;
    background: rgba(184,169,240,0.9); clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    animation: runeWobble 2s ease-in-out infinite;
}
@keyframes runeSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes runeWobble {
    0%, 100% { transform: translateY(-2px); }
    50% { transform: translateY(2px); }
}

/* ============================================================
   27. SIGIL - 印记四角脉动
   ============================================================ */
.icon-sigil {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-sigil::before {
    content: ''; width: 10px; height: 10px;
    border: 1.5px solid rgba(255,100,100,0.7);
    animation: sigilPulse 1.5s ease-in-out infinite;
}
.icon-sigil::after {
    content: ''; position: absolute; width: 18px; height: 18px;
    border: 1px solid rgba(255,100,100,0.3);
    animation: sigilRotate 3s linear infinite;
}
@keyframes sigilPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.2) rotate(45deg); }
}
@keyframes sigilRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================================
   28. TIDE - 潮汐半圆弧
   ============================================================ */
.icon-tide {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-tide::before {
    content: ''; width: 22px; height: 11px;
    border-top-left-radius: 22px; border-top-right-radius: 22px;
    border: 2px solid rgba(126,232,197,0.6); border-bottom: none;
    animation: tideRise 2s ease-in-out infinite alternate;
}
.icon-tide::after {
    content: ''; position: absolute; bottom: 8px; width: 22px; height: 2px;
    background: rgba(126,232,197,0.3); border-radius: 1px;
    animation: tideLevel 2s ease-in-out infinite alternate;
}
@keyframes tideRise {
    0% { transform: scaleY(0.6); opacity: 0.4; }
    100% { transform: scaleY(1); opacity: 1; }
}
@keyframes tideLevel {
    0% { transform: translateY(3px); opacity: 0.2; }
    100% { transform: translateY(-2px); opacity: 0.6; }
}

/* ============================================================
   29. EMBER - 余烬明灭
   ============================================================ */
.icon-ember {
    width: 32px; height: 32px; position: relative;
}
.icon-ember i {
    position: absolute; border-radius: 50%;
    animation: emberFlicker 1.2s ease-in-out infinite alternate;
}
.icon-ember i:nth-child(1) { width: 5px; height: 5px; top: 12px; left: 12px; background: rgba(255,150,80,0.9); animation-delay: 0s; }
.icon-ember i:nth-child(2) { width: 3px; height: 3px; top: 8px; left: 18px; background: rgba(255,200,100,0.7); animation-delay: 0.3s; }
.icon-ember i:nth-child(3) { width: 4px; height: 4px; top: 18px; left: 8px; background: rgba(255,120,60,0.8); animation-delay: 0.6s; }
.icon-ember i:nth-child(4) { width: 2px; height: 2px; top: 16px; left: 20px; background: rgba(255,180,90,0.6); animation-delay: 0.9s; }
@keyframes emberFlicker {
    0% { opacity: 0.3; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 6px rgba(255,150,80,0.5); }
}

/* ============================================================
   30. FROST - 霜晶雪花旋转
   ============================================================ */
.icon-frost {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-frost::before {
    content: ''; width: 2px; height: 16px; border-radius: 1px;
    background: rgba(184,220,255,0.8); position: absolute;
    animation: frostSpin 4s linear infinite;
}
.icon-frost::after {
    content: ''; width: 16px; height: 2px; border-radius: 1px;
    background: rgba(184,220,255,0.8); position: absolute;
    animation: frostSpin 4s linear infinite;
}
.icon-frost i {
    position: absolute; width: 2px; height: 12px; border-radius: 1px;
    background: rgba(184,220,255,0.5);
}
.icon-frost i:nth-child(1) { transform: rotate(45deg); animation: frostSpin 4s linear infinite; }
.icon-frost i:nth-child(2) { transform: rotate(-45deg); animation: frostSpin 4s linear infinite reverse; }
@keyframes frostSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================================
   31. SPARK - 电弧Z字形跳跃
   ============================================================ */
.icon-spark {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-spark::before {
    content: ''; width: 3px; height: 16px;
    background: linear-gradient(to bottom, rgba(255,255,150,0.8), rgba(255,255,255,0.9), rgba(255,255,150,0.8));
    clip-path: polygon(50% 0%, 100% 30%, 50% 50%, 100% 80%, 50% 100%, 0% 70%, 50% 50%, 0% 20%);
    animation: sparkFlash 0.8s ease-in-out infinite alternate;
}
@keyframes sparkFlash {
    0% { opacity: 0.3; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.1); filter: brightness(1.3); }
}

/* ============================================================
   32. VORTEX - 双色漩涡咬合
   ============================================================ */
.icon-vortex {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-vortex::before, .icon-vortex::after {
    content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%;
}
.icon-vortex::before {
    border: 2px solid rgba(126,203,245,0.7); border-bottom-color: transparent; border-left-color: transparent;
    animation: vortexSpin1 1.5s linear infinite;
}
.icon-vortex::after {
    border: 2px solid rgba(184,169,240,0.7); border-top-color: transparent; border-right-color: transparent;
    animation: vortexSpin2 1.5s linear infinite;
}
@keyframes vortexSpin1 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes vortexSpin2 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

/* ============================================================
   33. BEACON - 灯塔扇形扫描
   ============================================================ */
.icon-beacon {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-beacon::before {
    content: ''; position: absolute; width: 16px; height: 16px;
    background: conic-gradient(from 0deg, rgba(126,232,197,0.8), transparent 60deg, transparent 300deg, rgba(126,232,197,0.8));
    border-radius: 50%; clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
    animation: beaconSweep 2s linear infinite;
}
.icon-beacon::after {
    content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%;
    background: rgba(126,232,197,0.9);
}
@keyframes beaconSweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================================
   34. DRONE - 环绕卫星
   ============================================================ */
.icon-drone {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-drone::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.8);
}
.icon-drone::after {
    content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
}
.icon-drone i {
    position: absolute; width: 4px; height: 4px; border-radius: 50%;
    background: rgba(126,203,245,0.9); margin-left: 10px;
    animation: droneOrbit 2s linear infinite;
}
@keyframes droneOrbit {
    0% { transform: rotate(0deg) translateX(10px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(10px) rotate(-360deg); }
}

/* ============================================================
   35. CORE - 核心裂变十字
   ============================================================ */
.icon-core {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-core::before, .icon-core::after {
    content: ''; position: absolute; background: rgba(255,100,100,0.8); border-radius: 1px;
    animation: coreSplit 2s ease-in-out infinite;
}
.icon-core::before { width: 20px; height: 3px; }
.icon-core::after { width: 3px; height: 20px; }
@keyframes coreSplit {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3) rotate(45deg); opacity: 0.6; box-shadow: 0 0 8px rgba(255,100,100,0.5); }
}

/* ============================================================
   36. SHARD - 碎片聚合三角
   ============================================================ */
.icon-shard {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-shard i {
    position: absolute; width: 0; height: 0;
    animation: shardGather 2s ease-in-out infinite alternate;
}
.icon-shard i:nth-child(1) {
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-bottom: 7px solid rgba(126,203,245,0.7);
    transform: translateY(-5px);
}
.icon-shard i:nth-child(2) {
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 7px solid rgba(184,169,240,0.7);
    transform: translate(-5px, 4px);
}
.icon-shard i:nth-child(3) {
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 7px solid rgba(126,232,197,0.7);
    transform: translate(5px, 4px);
}
@keyframes shardGather {
    0% { opacity: 0.4; transform: translate(var(--tx,0), var(--ty,0)) scale(0.7); }
    100% { opacity: 1; transform: translate(var(--tx,0), var(--ty,0)) scale(1); }
}
.icon-shard i:nth-child(1) { --tx: 0; --ty: -5px; }
.icon-shard i:nth-child(2) { --tx: -5px; --ty: 4px; }
.icon-shard i:nth-child(3) { --tx: 5px; --ty: 4px; }

/* ============================================================
   37. GATE - 传送门方框开启
   ============================================================ */
.icon-gate {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-gate::before {
    content: ''; width: 16px; height: 16px;
    border: 1.5px solid rgba(126,232,197,0.6);
    animation: gateOpen 2s ease-in-out infinite;
}
.icon-gate::after {
    content: ''; position: absolute; width: 6px; height: 6px;
    background: rgba(126,232,197,0.9);
    animation: gateCore 2s ease-in-out infinite;
}
@keyframes gateOpen {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.6; }
    50% { transform: rotate(90deg) scale(0.7); opacity: 1; box-shadow: 0 0 8px rgba(126,232,197,0.4); }
}
@keyframes gateCore {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.5); opacity: 0.5; }
}

/* ============================================================
   38. TOTEM - 图腾柱呼吸
   ============================================================ */
.icon-totem {
    width: 32px; height: 32px; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.icon-totem i {
    height: 5px; border-radius: 1px; background: rgba(184,169,240,0.7);
    animation: totemBreath 1.8s ease-in-out infinite alternate;
}
.icon-totem i:nth-child(1) { width: 16px; animation-delay: 0s; }
.icon-totem i:nth-child(2) { width: 12px; animation-delay: 0.3s; }
.icon-totem i:nth-child(3) { width: 16px; animation-delay: 0.6s; }
@keyframes totemBreath {
    0% { opacity: 0.4; transform: scaleX(0.8); }
    100% { opacity: 1; transform: scaleX(1); box-shadow: 0 0 4px rgba(184,169,240,0.4); }
}

/* ============================================================
   39. MIRROR - 镜面反射菱形
   ============================================================ */
.icon-mirror {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-mirror::before, .icon-mirror::after {
    content: ''; width: 10px; height: 10px;
    background: rgba(255,255,255,0.3); transform: rotate(45deg);
    animation: mirrorReflect 2s ease-in-out infinite;
}
.icon-mirror::after {
    position: absolute; background: rgba(255,255,255,0.7);
    animation: mirrorReflect 2s ease-in-out infinite reverse;
}
@keyframes mirrorReflect {
    0%, 100% { opacity: 0.3; transform: rotate(45deg) scale(1); }
    50% { opacity: 1; transform: rotate(45deg) scale(1.2); box-shadow: 0 0 8px rgba(255,255,255,0.4); }
}

/* ============================================================
   40. SEED - 种子萌发弧线
   ============================================================ */
.icon-seed {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.icon-seed::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: rgba(126,232,197,0.6); margin-top: 6px;
    animation: seedRoot 2s ease-in-out infinite;
}
.icon-seed::after {
    content: ''; position: absolute; width: 2px; height: 14px; border-radius: 1px;
    background: linear-gradient(to top, rgba(126,232,197,0.8), transparent);
    margin-bottom: 8px;
    animation: seedSprout 2s ease-in-out infinite;
}
@keyframes seedRoot {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.8); opacity: 0.7; }
}
@keyframes seedSprout {
    0%, 100% { transform: scaleY(0.6); opacity: 0.4; }
    50% { transform: scaleY(1.1); opacity: 1; box-shadow: 0 0 6px rgba(126,232,197,0.4); }
}