arisealert/src/arisealert.css

Enhanced Solo Leveling styled alert library with customizable colors and animations.

/*!
 * AriseAlert v1.1.0 - Enhanced Solo Leveling Edition
 * (c) 2025 Anique Ali
 * MIT License
 */

 @charset "UTF-8";
 @import url(https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&display=swap);
 @import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap);
 
 /* Theme Variables */
 :root {
   --arise-primary: #00d4ff;
   --arise-primary-light: #33ddff;
   --arise-primary-dark: #0099cc;
   --arise-bg: rgba(5,20,40,.98);
   --arise-text: #ffffff;
   --arise-text-light: #a0d4ff;
   --arise-border: #00d4ff;
   --arise-shadow: rgba(0,212,255,.8);
   --arise-success: #0f8;
   --arise-error: #e74c3c;
   --arise-warning: #ff9800;
   --arise-overlay: rgba(0,0,0,.3);
 }
 
 .arise-theme-light {
  --arise-primary: #d4af37;
  --arise-primary-light: #ffd700;
  --arise-primary-dark: #b8860b;
  --arise-bg: linear-gradient(135deg, rgba(250, 248, 240, 0.95) 0%, rgba(255, 253, 245, 0.98) 100%);
  --arise-text: #5d4037;
  --arise-text-light: #8d6e63;
  --arise-border: #d4af37;
  --arise-shadow: rgba(212, 175, 55, 0.8);
  --arise-success: #4caf50;
  --arise-error: #d32f2f;
  --arise-warning: #ff9800;
  --arise-overlay: rgba(139, 69, 19, 0.1);
  --arise-shadow-monarch: rgba(212, 175, 55, 0.8);
  --arise-glow-purple: rgba(212, 175, 55, 0.7);
  --arise-dark-purple: #8b4513;
}
 /* Alert Overlay */
 .arisealert-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     /* background: var(--arise-overlay); */
     /* backdrop-filter: blur(15px); */
     z-index: 999999;
     display: flex;
     justify-content: center;
     align-items: center;
     opacity: 0;
     visibility: hidden;
     transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
 }
 .arisealert-overlay.show {
   opacity: 1;
   visibility: visible;
 }

 .arise-theme-light .arisealert-overlay::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: radial-gradient(circle at 50% 50%, rgba(106, 0, 255, 0.1) 0%, transparent 70%);
   animation: monarch-aura 4s ease-in-out infinite alternate;
 }
 
 /* Alert Container */
 .arisealert-container {
   transform: scale(.7) translateY(80px) rotateX(15deg);
   opacity: 0;
   transition: all 0.8s cubic-bezier(.175, .885, .32, 1.275);
 }
 .arisealert-container.show {
   transform: scale(1) translateY(0) rotateX(0deg);
   opacity: 1;
 }
 
 /* Alert Panel */
 .arisealert-panel {
   background: var(--arise-bg);
   border: 3px solid var(--arise-border);
   border-radius: 0;
   padding: 40px 60px;
   min-width: 400px;
   max-width: 600px;
   position: relative;
   overflow: visible;
   box-shadow: 0 0 60px var(--arise-shadow);
   font-family: Orbitron,monospace;
   color: var(--arise-text);
 }
 .arisealert-panel::before {
   content: '';
   position: absolute;
   top: -5px;
   left: -5px;
   right: -5px;
   bottom: -5px;
   background: linear-gradient(45deg,var(--arise-primary),var(--arise-primary-dark),var(--arise-primary),var(--arise-primary-dark));
   background-size: 400% 400%;
   z-index: -1;
   animation: 3s ease-in-out infinite border-flow;
 }

 /* Enhanced Light Theme Panel */
 .arise-theme-light .arisealert-panel {
  background: linear-gradient(135deg, rgba(250, 248, 240, 0.95) 0%, rgba(255, 253, 245, 0.98) 100%);
  box-shadow: 
    0 0 40px rgba(212, 175, 55, 0.6),
    0 0 80px rgba(212, 175, 55, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.2);
}
 .arise-theme-light .arisealert-panel::before {
  background: linear-gradient(45deg, #d4af37, #ffd700, #b8860b, #d4af37, #daa520);
  background-size: 600% 600%;
  border-radius: 12px;
  /* animation: dungeon-border-flow 4s ease-in-out infinite; */
}

.arise-theme-light .arisealert-panel::after {
  background: linear-gradient(45deg, transparent, rgba(212, 175, 55, 0.15), transparent);
  /* animation: dungeon-aura 3s ease-in-out infinite alternate; */
}

 /* Solo Leveling Shadow Particles for Light Theme */
 .arise-theme-light .arisealert-panel .shadow-particles {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
   overflow: hidden;
 }
 .arise-theme-light .arisealert-panel .shadow-particles::before,
 .arise-theme-light .arisealert-panel .shadow-particles::after {
   color: #d4af37;
 }
 .arise-theme-light .arisealert-panel .shadow-particles::before {
   top: 10%;
   left: 20%;
   animation-delay: -2s;
 }
 .arise-theme-light .arisealert-panel .shadow-particles::after {
   top: 70%;
   right: 15%;
   animation-delay: -4s;
 }
 
 /* Alert Types */
 .arisealert-error {
   background: rgba(40,5,5,.98);
   border-color: var(--arise-error);
   /* animation: .5s ease-in-out infinite alternate danger-shake; */
 }
 .arisealert-error::before {
   background: linear-gradient(45deg,var(--arise-error),#c22,var(--arise-error),#c22);
 }
 .arisealert-warning {
   background: rgba(40,25,5,.98);
   border-color: var(--arise-warning);
   /* animation: 2s ease-in-out infinite warning-pulse; */
 }
 .arisealert-warning::before {
   background: linear-gradient(45deg,var(--arise-warning),#c80,var(--arise-warning),#c80);
 }
 .arisealert-success {
   background: rgba(0,30,10,.98);
   border-color: var(--arise-success);
 }
 .arisealert-success::before {
   background: linear-gradient(45deg,var(--arise-success),#0c6,var(--arise-success),#0c6);
 }
 
 /* Enhanced Light Theme Alert Types */
 .arise-theme-light .arisealert-error {
   background: linear-gradient(135deg, rgba(255, 235, 238, 0.95) 0%, rgba(255, 245, 245, 0.98) 100%);
   border-color: var(--arise-error);
   box-shadow: 
     0 0 30px rgba(211, 47, 47, 0.4),
     inset 0 0 20px rgba(255, 255, 255, 0.1);
 }
 .arise-theme-light .arisealert-error::before {
  background: linear-gradient(45deg, #d32f2f, #f44336, #ef5350, #d32f2f);
}
 
 .arise-theme-light .arisealert-warning {
   background: linear-gradient(135deg, rgba(255, 248, 225, 0.95) 0%, rgba(255, 253, 245, 0.98) 100%);
   border-color: var(--arise-warning);
   box-shadow: 
     0 0 30px rgba(255, 111, 0, 0.4),
     inset 0 0 20px rgba(255, 255, 255, 0.1);
   /* animation: monarch-warning-pulse 2s ease-in-out infinite; */
 }
 .arise-theme-light .arisealert-warning::before {
  background: linear-gradient(45deg, #ff9800, #ffa726, #ffb74d, #ff9800);
}
 
 .arise-theme-light .arisealert-success {
   background: linear-gradient(135deg, rgba(232, 245, 233, 0.95) 0%, rgba(240, 248, 240, 0.98) 100%);
   border-color: var(--arise-success);
   box-shadow: 
     0 0 30px rgba(0, 200, 83, 0.4),
     inset 0 0 20px rgba(255, 255, 255, 0.1);
 }
 .arise-theme-light .arisealert-success::before {
  background: linear-gradient(45deg, #4caf50, #66bb6a, #81c784, #4caf50);
}
 
 /* Alert Elements */
 .arisealert-corners {
   position: absolute;
   width: 100%;
   height: 100%;
   pointer-events: none;
   top: 0;
   left: 0;
 }
 .arisealert-corner {
   position: absolute;
   width: 40px;
   height: 40px;
   border: 3px solid var(--arise-border);
   box-shadow: 0 0 15px var(--arise-primary);
 }
 .arisealert-corner.top-left {
   top: -15px;
   left: -15px;
   border-right: none;
   border-bottom: none;
 }
 .arisealert-corner.top-right {
   top: -15px;
   right: -15px;
   border-left: none;
   border-bottom: none;
 }
 .arisealert-corner.bottom-left {
   bottom: -15px;
   left: -15px;
   border-right: none;
   border-top: none;
 }
 .arisealert-corner.bottom-right {
   bottom: -15px;
   right: -15px;
   border-left: none;
   border-top: none;
 }
 
 /* Enhanced Light Theme Corners */
 .arise-theme-light .arisealert-corner {
  border: 4px solid #d4af37;
  box-shadow: 
    0 0 20px rgba(212, 175, 55, 0.6),
    0 0 40px rgba(212, 175, 55, 0.3);
}
 .arise-theme-light .arisealert-corner::before {
   content: '';
   position: absolute;
   top: -2px;
   left: -2px;
   right: -2px;
   bottom: -2px;
   background: linear-gradient(45deg, var(--arise-primary), transparent, var(--arise-primary));
   z-index: -1;
   animation: corner-energy 2s linear infinite;
 }

 .arisealert-line {
   position: absolute;
   left: 60px;
   right: 60px;
   height: 3px;
   background: linear-gradient(90deg,transparent 0,rgba(0,212,255,.3) 10%,var(--arise-primary) 50%,rgba(0,212,255,.3) 90%,transparent 100%);
   box-shadow: 0 0 15px var(--arise-primary);
   animation: 2s ease-in-out infinite alternate line-pulse;
 }
 .arisealert-line.top {
   top: -18px;
 }
 .arisealert-line.bottom {
   bottom: -18px;
 }
 
 /* Enhanced Light Theme Lines */
 .arise-theme-light .arisealert-line {
  background: linear-gradient(90deg,
    transparent 0%, 
    rgba(212, 175, 55, 0.3) 10%, 
    #d4af37 30%,
    #ffd700 50%,
    #d4af37 70%,
    rgba(212, 175, 55, 0.3) 90%,
    transparent 100%);
  box-shadow: 
    0 0 20px rgba(212, 175, 55, 0.6),
    0 0 40px rgba(212, 175, 55, 0.2);
}
 .arise-theme-light .arisealert-line::after {
   content: '';
   position: absolute;
   top: -2px;
   left: 0;
   right: 0;
   height: 8px;
   background: linear-gradient(90deg,
     transparent 0%, 
     rgba(106, 0, 255, 0.1) 50%,
     transparent 100%);
   animation: line-shadow-flow 3s ease-in-out infinite;
 }

 .arisealert-icon {
   text-align: center;
   margin-bottom: 20px;
   position: relative;
 }
 .arisealert-icon .icon {
   font-size: 40px;
   color: var(--arise-primary);
   text-shadow: 0 0 20px var(--arise-primary);
   animation: 2s ease-in-out infinite alternate icon-glow;
 }
 
 /* Enhanced Light Theme Icons */
 .arise-theme-light .arisealert-icon .icon {
  color: #d4af37;
  text-shadow: 
    0 0 20px rgba(212, 175, 55, 0.8),
    0 0 40px rgba(212, 175, 55, 0.3);
}

.arise-theme-light .arisealert-icon::before {
  background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
}


 .arisealert-title {
   text-align: center;
   font-size: 24px;
   font-weight: 700;
   color: var(--arise-text);
   text-shadow: 0 0 15px var(--arise-primary);
   margin-bottom: 15px;
   letter-spacing: 2px;
   text-transform: uppercase;
 }
 
 /* Enhanced Light Theme Title */
 .arise-theme-light .arisealert-title {
  background: linear-gradient(135deg, #8b4513 0%, #d4af37 50%, #8b4513 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.arise-theme-light .arisealert-title::after {
  background: linear-gradient(135deg, #d4af37 0%, transparent 50%, #d4af37 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

 .arisealert-message {
   text-align: center;
   font-size: 16px;
   color: var(--arise-text-light);
   margin-bottom: 30px;
   line-height: 1.6;
 }

 /* Enhanced Light Theme Message */
 .arise-theme-light .arisealert-message {
   font-family: 'Rajdhani', sans-serif;
   font-weight: 500;
   color: var(--arise-text-light);
   text-shadow: 0 1px 2px rgba(106, 0, 255, 0.1);
 }

 .arisealert-actions {
   display: flex;
   justify-content: center;
   gap: 20px;
 }
 .arisealert-btn {
   padding: 12px 30px;
   background: linear-gradient(135deg,var(--arise-primary) 0,var(--arise-primary-dark) 100%);
   border: 2px solid var(--arise-primary);
   border-radius: 0;
   color: #000;
   font-family: Orbitron,monospace;
   font-weight: 700;
   font-size: 14px;
   cursor: pointer;
   transition: .3s;
   text-transform: uppercase;
   letter-spacing: 1px;
   box-shadow: 0 0 15px rgba(0,212,255,.5);
 }
 .arisealert-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 0 25px var(--arise-shadow);
 }
 .arisealert-btn.cancel {
   background: linear-gradient(135deg,#333 0,#555 100%);
   border-color: #666;
   color: #fff;
   box-shadow: 0 0 15px rgba(102,102,102,.5);
 }
 
 /* Enhanced Light Theme Buttons */
 .arise-theme-light .arisealert-btn {
  background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
  color: #ffffff;
  box-shadow: 
    0 0 20px rgba(212, 175, 55, 0.6),
    0 4px 15px rgba(212, 175, 55, 0.3);
}

.arise-theme-light .arisealert-btn:hover {
  box-shadow: 
    0 0 30px rgba(212, 175, 55, 0.8),
    0 8px 25px rgba(212, 175, 55, 0.4);
}
 .arise-theme-light .arisealert-btn.cancel {
   background: linear-gradient(135deg, #424242 0%, #616161 100%);
   border-color: transparent;
   color: #fff;
   box-shadow: 
     0 0 15px rgba(66, 66, 66, 0.5),
     0 4px 15px rgba(97, 97, 97, 0.3);
 }

 .arisealert-input {
   width: 100%;
   padding: 12px;
   margin: 10px 0;
   background: rgba(0,0,0,.5);
   border: 2px solid rgba(0,212,255,.3);
   border-radius: 8px;
   color: var(--arise-text);
   font-family: Orbitron,monospace;
   font-size: 14px;
 }
 .arisealert-input:focus {
   outline: 0;
   border-color: var(--arise-primary);
   box-shadow: 0 0 15px var(--arise-shadow);
 }
 
 /* Enhanced Light Theme Input */
 .arise-theme-light .arisealert-input {
  border: 3px solid rgba(212, 175, 55, 0.3);
  box-shadow: inset 0 2px 5px rgba(212, 175, 55, 0.1);
}

.arise-theme-light .arisealert-input:focus {
  border-color: #d4af37;
  box-shadow: 
    0 0 20px rgba(212, 175, 55, 0.6),
    inset 0 2px 8px rgba(212, 175, 55, 0.2);
}
 .arisealert-select {
   width: 100%;
   padding: 12px;
   margin: 10px 0;
   background: rgba(0,0,0,.7);
   border: 2px solid rgba(0,212,255,.3);
   border-radius: 8px;
   color: var(--arise-text);
   font-family: Orbitron,monospace;
 }
 
 /* Enhanced Light Theme Select */
 .arise-theme-light .arisealert-select {
  border: 3px solid rgba(212, 175, 55, 0.3);
  box-shadow: inset 0 2px 5px rgba(212, 175, 55, 0.1);
}


 .arisealert-progress {
   width: 100%;
   height: 20px;
   background: rgba(0,0,0,.5);
   border-radius: 10px;
   overflow: hidden;
   margin: 15px 0;
 }
 .arisealert-progress-bar {
   height: 100%;
   background: linear-gradient(90deg,var(--arise-primary),var(--arise-primary-dark));
   width: 0%;
   transition: width .3s;
   box-shadow: 0 0 15px var(--arise-shadow);
 }
 
 /* Enhanced Light Theme Progress */
 .arise-theme-light .arisealert-progress {
  border: 2px solid rgba(212, 175, 55, 0.3);
}

.arise-theme-light .arisealert-progress-bar {
  background: linear-gradient(90deg, #d4af37, #b8860b, #d4af37);
  box-shadow: 
    0 0 20px rgba(212, 175, 55, 0.6),
    inset 0 2px 8px rgba(255, 255, 255, 0.3);
}
 .arisealert-timer {
   font-size: 24px;
   color: var(--arise-primary);
   text-align: center;
   margin: 15px 0;
   text-shadow: 0 0 15px var(--arise-primary);
 }
 
 /* Enhanced Light Theme Timer */
 .arise-theme-light .arisealert-timer {
  color: #d4af37;
  text-shadow: 
    0 0 20px rgba(212, 175, 55, 0.8),
    0 0 40px rgba(212, 175, 55, 0.3);
}

 .arisealert-toast {
   position: fixed;
   top: 20px;
   right: 20px;
   max-width: 400px;
   z-index: 999999;
   transform: translateX(100%);
   transition: transform .3s;
 }
 .arisealert-toast.show {
   transform: translateX(0);
 }
 .arisealert-spinner {
   width: 40px;
   height: 40px;
   border: 3px solid rgba(0,212,255,.3);
   border-top: 3px solid var(--arise-primary);
   border-radius: 50%;
   animation: 1s linear infinite spin;
   margin: 20px auto;
 }
 
 /* Enhanced Light Theme Spinner */
 .arise-theme-light .arisealert-spinner {
  border: 4px solid rgba(212, 175, 55, 0.3);
  border-top: 4px solid #d4af37;
  border-right: 4px solid #ffd700;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
}

 .arisealert-image {
   max-width: 100%;
   height: auto;
   border-radius: 8px;
   margin: 15px 0;
   border: 2px solid var(--arise-primary);
 }
 
 /* Enhanced Light Theme Image */
 .arise-theme-light .arisealert-image {
  border: 3px solid #d4af37;
  box-shadow: 
    0 0 20px rgba(212, 175, 55, 0.6),
    0 4px 15px rgba(212, 175, 55, 0.2);
}
 .arise-theme-light .arisealert-image:hover {
   transform: scale(1.02);
 }

 .arisealert-premium-icon {
   display: inline-block;
   width: 40px;
   height: 40px;
   position: relative;
   margin: 0 auto;
 }
 .arisealert-premium-icon svg {
   width: 100%;
   height: 100%;
   fill: currentColor;
 }
 .arisealert-icon-spin {
   animation: 2s linear infinite spin;
 }
 .arisealert-icon-pulse {
   animation: 1.5s ease-in-out infinite pulse;
 }
 .arisealert-icon-bounce {
   animation: 1s ease-in-out infinite bounce;
 }
 
 /* Responsive */
 @media (max-width:768px) {
   .arisealert-panel {
     margin: 20px;
     padding: 30px 25px;
     min-width: auto;
     max-width: calc(100vw - 40px);
   }
   .arisealert-actions {
     flex-direction: column;
   }
 }
 
 /* Enhanced Animations */
 @keyframes border-flow {
   0%,100% { background-position: 0 50% }
   50% { background-position: 100% 50% }
 }

 @keyframes monarch-border-flow {
   0% { background-position: 0% 50% }
   25% { background-position: 100% 50% }
   50% { background-position: 200% 50% }
   75% { background-position: 100% 50% }
   100% { background-position: 0% 50% }
 }

 @keyframes monarch-aura {
   0% { 
     opacity: 0.3;
     transform: scale(1);
   }
   50% { 
     opacity: 0.6;
     transform: scale(1.2);
   }
   100% { 
     opacity: 0.3;
     transform: scale(1);
   }
 }

 @keyframes shadow-monarch-aura {
   0% { 
     opacity: 0.2;
     transform: scale(0.95) rotate(0deg);
   }
   50% { 
     opacity: 0.4;
     transform: scale(1.05) rotate(2deg);
   }
   100% { 
     opacity: 0.2;
     transform: scale(0.95) rotate(0deg);
   }
 }

 @keyframes float-particles {
   0% { 
     transform: translateY(0px) rotate(0deg);
     opacity: 0;
   }
   10% { 
     opacity: 0.6;
   }
   50% { 
     transform: translateY(-20px) rotate(180deg);
     opacity: 1;
   }
   90% { 
     opacity: 0.6;
   }
   100% { 
     transform: translateY(-40px) rotate(360deg);
     opacity: 0;
   }
 }

 @keyframes monarch-warning-pulse {
   0%, 100% { 
     transform: scale(1);
     box-shadow: 0 0 30px rgba(255, 111, 0, 0.4);
   }
   50% { 
     transform: scale(1.02);
     box-shadow: 0 0 50px rgba(255, 111, 0, 0.6);
   }
 }

 @keyframes monarch-corner-glow {
   0% { 
     box-shadow: 0 0 20px var(--arise-shadow-monarch);
   }
   100% { 
     box-shadow: 0 0 40px var(--arise-shadow-monarch), 0 0 60px rgba(106, 0, 255, 0.4);
   }
 }

 @keyframes corner-energy {
   0% { 
     opacity: 0.3;
     transform: scale(0.8);
   }
   50% { 
     opacity: 0.8;
     transform: scale(1.1);
   }
   100% { 
     opacity: 0.3;
     transform: scale(0.8);
   }
 }

 @keyframes monarch-line-pulse {
   0% { 
     opacity: 0.6;
     transform: scaleY(1);
   }
   100% { 
     opacity: 1;
     transform: scaleY(1.2);
   }
 }

 @keyframes line-shadow-flow {
   0% { 
     transform: translateX(-100%);
     opacity: 0;
   }
   50% { 
     opacity: 0.6;
   }
   100% { 
     transform: translateX(100%);
     opacity: 0;
   }
 }

 @keyframes monarch-icon-glow {
   0% { 
     transform: scale(1);
     text-shadow: 0 0 20px var(--arise-shadow-monarch);
   }
   100% { 
     transform: scale(1.15);
     text-shadow: 0 0 40px var(--arise-shadow-monarch), 0 0 60px rgba(106, 0, 255, 0.4);
   }
 }

 @keyframes icon-aura-pulse {
   0%, 100% { 
     transform: translate(-50%, -50%) scale(1);
     opacity: 0.3;
   }
   50% { 
     transform: translate(-50%, -50%) scale(1.3);
     opacity: 0.6;
   }
 }

 @keyframes title-glow {
   0% { 
     filter: brightness(1) contrast(1);
   }
   100% { 
     filter: brightness(1.2) contrast(1.1);
   }
 }

 @keyframes title-shine {
   0% { 
     transform: translateX(-100%);
   }
   50% { 
     transform: translateX(0%);
   }
   100% { 
     transform: translateX(100%);
   }
 }

 @keyframes progress-energy {
   0% { 
     box-shadow: 0 0 20px var(--arise-shadow-monarch);
   }
   100% { 
     box-shadow: 0 0 30px var(--arise-shadow-monarch), inset 0 0 10px rgba(255, 255, 255, 0.4);
   }
 }

 @keyframes timer-pulse {
   0% { 
     transform: scale(1);
     opacity: 0.8;
   }
   100% { 
     transform: scale(1.05);
     opacity: 1;
   }
 }

 @keyframes monarch-spin {
   0% { 
     transform: rotate(0deg);
     border-top-color: var(--arise-primary);
   }
   25% { 
     border-right-color: var(--arise-primary);
   }
   50% { 
     transform: rotate(180deg);
     border-bottom-color: var(--arise-primary);
   }
   75% { 
     border-left-color: var(--arise-primary);
   }
   100% { 
     transform: rotate(360deg);
     border-top-color: var(--arise-primary);
   }
 }

 /* Original Animations */
 @keyframes danger-shake {
   0% { transform: translateX(0) }
   25% { transform: translateX(-2px) }
   50% { transform: translateX(2px) }
   75% { transform: translateX(-1px) }
   100% { transform: translateX(1px) }
 }

 @keyframes warning-pulse {
   0%,100% { transform: scale(1) }
   50% { transform: scale(1.02) }
 }

 @keyframes line-pulse {
   0% { opacity: .6 }
   100% { opacity: 1 }
 }

 @keyframes icon-glow {
   0% { transform: scale(1) }
   100% { transform: scale(1.1) }
 }

 @keyframes spin {
   0%,from { transform: rotate(0) }
   100%,to { transform: rotate(360deg) }
 }

 @keyframes pulse {
   0%,100% { transform: scale(1); opacity: 1 }
   50% { transform: scale(1.1); opacity: .7 }
 }

 @keyframes bounce {
   0%,100%,20%,50%,80% { transform: translateY(0) }
   40% { transform: translateY(-10px) }
   60% { transform: translateY(-5px) }
 }

 /* Solo Leveling Special Effects for Light Theme */
 .arise-theme-light .monarch-shadow-effects {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
   overflow: hidden;
 }

 .arise-theme-light .monarch-shadow-effects::before {
   content: '▲';
   position: absolute;
   top: 20%;
   left: 10%;
   color: rgba(106, 0, 255, 0.4);
   font-size: 8px;
   animation: shadow-rune-float 8s linear infinite;
 }

 .arise-theme-light .monarch-shadow-effects::after {
   content: '◆';
   position: absolute;
   bottom: 30%;
   right: 20%;
   color: rgba(106, 0, 255, 0.4);
   font-size: 10px;
   animation: shadow-rune-float 6s linear infinite reverse;
 }

 @keyframes shadow-rune-float {
   0% { 
     transform: translateY(0px) rotate(0deg);
     opacity: 0;
   }
   10% { 
     opacity: 0.6;
   }
   50% { 
     transform: translateY(-30px) rotate(180deg);
     opacity: 1;
   }
   90% { 
     opacity: 0.6;
   }
   100% { 
     transform: translateY(-60px) rotate(360deg);
     opacity: 0;
   }
 }

 /* Monarch Power Surge Effect */
 .arise-theme-light .arisealert-panel.power-surge {
   animation: monarch-power-surge 3s ease-in-out infinite;
 }

 @keyframes monarch-power-surge {
   0%, 100% { 
     transform: scale(1);
     filter: brightness(1);
   }
   50% { 
     transform: scale(1.01);
     filter: brightness(1.1);
   }
 }

 /* Shadow Soldier Rank Effects */
 .arise-theme-light .rank-s {
   --arise-primary: #8b00ff;
   --arise-shadow-monarch: rgba(139, 0, 255, 0.8);
 }

 .arise-theme-light .rank-a {
   --arise-primary: #6a00ff;
   --arise-shadow-monarch: rgba(106, 0, 255, 0.7);
 }

 .arise-theme-light .rank-b {
   --arise-primary: #5500cc;
   --arise-shadow-monarch: rgba(85, 0, 204, 0.6);
 }

 /* Necromancer Glow Effect */
 .arise-theme-light .necromancer-glow {
   position: relative;
 }

 .arise-theme-light .necromancer-glow::before {
   content: '';
   position: absolute;
   top: -10px;
   left: -10px;
   right: -10px;
   bottom: -10px;
   background: radial-gradient(circle, rgba(106, 0, 255, 0.2) 0%, transparent 50%);
   border-radius: 50%;
   animation: necromancer-pulse 4s ease-in-out infinite;
 }

 @keyframes necromancer-pulse {
   0%, 100% { 
     transform: scale(0.8);
     opacity: 0.3;
   }
   50% { 
     transform: scale(1.2);
     opacity: 0.7;
   }
 }

 /* Mana Crystal Effect */
 .arise-theme-light .mana-crystal {
   position: relative;
   overflow: visible;
 }

 .arise-theme-light .mana-crystal::after {
  background: linear-gradient(45deg, #d4af37, #ffd700);
}


 @keyframes mana-crystal-glow {
   0% { 
     opacity: 0.6;
     transform: scale(1) rotate(0deg);
   }
   100% { 
     opacity: 1;
     transform: scale(1.2) rotate(45deg);
   }
 }

 /* System Window Effect */
 .arise-theme-light .system-window {
   border: 3px solid transparent;
   background: 
     linear-gradient(var(--arise-bg)) padding-box,
     linear-gradient(45deg, #6a00ff, #8b00ff, #6a00ff) border-box;
   position: relative;
 }

 .arise-theme-light .system-window::before {
  background: linear-gradient(135deg, #d4af37, #ffd700);
}
 @keyframes system-blink {
   0%, 90% { opacity: 1; }
   95% { opacity: 0.3; }
   100% { opacity: 1; }
 }


 
/* New Dungeon-Specific Animations */
@keyframes dungeon-border-flow {
  0% { background-position: 0% 50% }
  25% { background-position: 100% 50% }
  50% { background-position: 200% 50% }
  75% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

@keyframes dungeon-aura {
  0% { 
    opacity: 0.2;
    transform: scale(0.95) rotate(0deg);
  }
  50% { 
    opacity: 0.4;
    transform: scale(1.05) rotate(1deg);
  }
  100% { 
    opacity: 0.2;
    transform: scale(0.95) rotate(0deg);
  }
}

/* Add Dungeon Rank Classes */
.arise-theme-light.rank-s {
  --arise-primary: #ffd700;
  --arise-shadow-monarch: rgba(255, 215, 0, 0.8);
}

.arise-theme-light.rank-a {
  --arise-primary: #d4af37;
  --arise-shadow-monarch: rgba(212, 175, 55, 0.7);
}

.arise-theme-light.rank-b {
  --arise-primary: #b8860b;
  --arise-shadow-monarch: rgba(184, 134, 11, 0.6);
}