/* studio/static/studio/shop_fx.css - Point Shop Advanced Effects & Keyframe Animations */

/* ── Custom Properties for Spinning Animations ── */
@property --fx-spin-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --fx-galaxy-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ── Keyframe Animations ── */
@keyframes fx-pulse-glow {
  0%, 100% { box-shadow: 0 0 5px #00ffcc, 0 0 10px #00ffcc; border-color: #00ffcc; }
  50% { box-shadow: 0 0 15px #00ffcc, 0 0 25px #00ffcc; border-color: #80ffea; }
}

@keyframes fx-aurora-bg {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fx-rainbow-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fx-glitch-anim {
  0% { text-shadow: 2px 0 #ff007f, -2px 0 #00e5ff; }
  25% { text-shadow: -2px 0 #ff007f, 2px 0 #00e5ff; }
  50% { text-shadow: 2px -1px #ff007f, -2px 1px #00e5ff; }
  75% { text-shadow: -1px 2px #ff007f, 1px -2px #00e5ff; }
  100% { text-shadow: 2px 0 #ff007f, -2px 0 #00e5ff; }
}

@keyframes fx-spin-rotate {
  0% { --fx-spin-angle: 0deg; }
  100% { --fx-spin-angle: 360deg; }
}

@keyframes fx-galaxy-rotate {
  0% { --fx-galaxy-angle: 0deg; }
  100% { --fx-galaxy-angle: 360deg; }
}

@keyframes fx-lightning-spark {
  0%, 100% { box-shadow: 0 0 8px #00f0ff, 0 0 16px #0072ff; }
  50% { box-shadow: 0 0 18px #00ffff, 0 0 28px #3a88ff, inset 0 0 8px #ffffff; }
}

@keyframes fx-flame-flicker {
  0%, 100% { box-shadow: 0 0 10px #ff3300, 0 0 20px #ff9900; }
  50% { box-shadow: 0 0 16px #ff0000, 0 0 26px #ffcc00; }
}

@keyframes fx-neon-flicker-anim {
  0%, 100% { opacity: 1; text-shadow: 0 0 10px #ff007f, 0 0 20px #ff007f; }
  33% { opacity: 0.85; text-shadow: 0 0 5px #ff007f, 0 0 10px #ff007f; }
  66% { opacity: 1; text-shadow: 0 0 15px #00e5ff, 0 0 25px #00e5ff; }
}

@keyframes fx-shimmer-anim {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes fx-float-anim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ── Base Image & Avatar Wrapper Setup ── */
img.fx-on-img {
  --fx-w: 2px;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  object-fit: cover !important;
  outline: 0 !important;
  margin: calc(var(--fx-w) + 1px) !important;
}

img.fx-on-img[width=16], img.fx-on-img[width=18], img.fx-on-img[width=22], img.fx-on-img[width=24], img.fx-on-img[width=25] { --fx-w: 1.5px !important; }
img.fx-on-img[width=32], img.fx-on-img[width=35], img.fx-on-img[width=40] { --fx-w: 2.5px !important; }
img.fx-on-img[width=56] { --fx-w: 3.5px !important; }
img.fx-on-img.pf-avatar { --fx-w: 4.5px !important; }

.fx-wrap {
  --fx-w: 3px;
  display: inline-block;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* ── Frame FX Classes (Original + New) ── */
.fx-gold-frame {
  border: var(--fx-w, 3px) solid #ffd700 !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.7), inset 0 0 5px rgba(255, 215, 0, 0.5) !important;
}

.fx-rainbow-frame {
  border: var(--fx-w, 3px) solid transparent !important;
  background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000) !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  background-repeat: repeat, repeat !important;
  background-size: 200% 100% !important;
  
  animation: fx-rainbow-flow 4s infinite linear;
  box-shadow: 0 0 10px rgba(255, 0, 127, 0.4) !important;
}

.fx-neon-pulse {
  border: var(--fx-w, 3px) solid #00ffcc !important;
  animation: fx-pulse-glow 2s infinite ease-in-out;
}

.fx-fire-frame {
  border: var(--fx-w, 3px) solid #ff4500 !important;
  animation: fx-flame-flicker 1.8s infinite ease-in-out;
}

.fx-emerald-frame {
  border: var(--fx-w, 3px) solid #50c878 !important;
  box-shadow: 0 0 10px rgba(80, 200, 120, 0.6) !important;
}

.fx-aurora {
  border: var(--fx-w, 3px) solid transparent !important;
  background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #ff007f, #7928ca, #00dfd8, #ff007f) !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  background-repeat: repeat, repeat !important;
  background-size: 200% 200% !important;
  
  animation: fx-aurora-bg 3s infinite linear;
  box-shadow: 0 0 12px rgba(121, 40, 202, 0.5) !important;
}

.fx-holo {
  border: var(--fx-w, 3px) solid transparent !important;
  background-image: linear-gradient(#fff, #fff), linear-gradient(45deg, #e600e6, #00ffff, #ffff00, #e600e6) !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  background-repeat: repeat, repeat !important;
  background-size: 200% 200% !important;
  
  animation: fx-aurora-bg 3s infinite linear;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.6) !important;
}

.fx-spin-ring {
  border: var(--fx-w, 3px) solid transparent !important;
  background-image: linear-gradient(#fff, #fff), conic-gradient(from var(--fx-spin-angle), #00e5ff, #7928ca, #ff007f, #00e5ff) !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100% !important;
  animation: fx-spin-rotate 3s linear infinite;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.6) !important;
}

.fx-cosmic-frame {
  border: var(--fx-w, 3px) solid transparent !important;
  background-image: linear-gradient(#0f0f1a, #0f0f1a), linear-gradient(135deg, #8a2be2, #4b0082, #00ffff, #ff007f) !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  background-repeat: repeat, repeat !important;
  background-size: 300% 300% !important;
  
  animation: fx-aurora-bg 5s infinite ease-in-out;
  box-shadow: 0 0 15px rgba(138, 43, 226, 0.8) !important;
}

.fx-lightning-frame {
  border: var(--fx-w, 3px) solid #00f0ff !important;
  animation: fx-lightning-spark 1.2s infinite ease-in-out;
}

.fx-wave-frame {
  border: var(--fx-w, 3px) solid transparent !important;
  background-image: linear-gradient(#fff, #fff), linear-gradient(120deg, #00c6ff, #0072ff, #00f2fe, #4facfe) !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  background-repeat: repeat, repeat !important;
  background-size: 200% 200% !important;
  
  animation: fx-aurora-bg 3s infinite linear;
  box-shadow: 0 0 10px rgba(0, 198, 255, 0.5) !important;
}

.fx-diamond-frame {
  border: var(--fx-w, 3px) solid transparent !important;
  background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #e0c3fc, #8ec5fc, #ffffff, #e0c3fc) !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  background-repeat: repeat, repeat !important;
  background-size: 200% 200% !important;
  
  animation: fx-aurora-bg 2.5s infinite linear;
  box-shadow: 0 0 14px rgba(224, 195, 252, 0.8) !important;
}

.fx-blossom-frame {
  border: var(--fx-w, 3px) solid transparent !important;
  background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #ff9a9e, #fecfef, #feada6, #f5efef) !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  background-repeat: repeat, repeat !important;
  background-size: 200% 100% !important;
  
  animation: fx-rainbow-flow 4s infinite ease-in-out;
  box-shadow: 0 0 10px rgba(255, 154, 158, 0.6) !important;
}

.fx-snowflake-frame {
  border: var(--fx-w, 3px) solid transparent !important;
  background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #a1c4fd, #c2e9fb, #e0f2fe, #a1c4fd) !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  background-repeat: repeat, repeat !important;
  background-size: 200% 200% !important;
  
  animation: fx-aurora-bg 3.5s infinite linear;
  box-shadow: 0 0 12px rgba(161, 196, 253, 0.7) !important;
}

.fx-cyberscan-frame {
  border: var(--fx-w, 3px) solid #00ff66 !important;
  box-shadow: 0 0 8px #00ff66, inset 0 0 6px #00ff66 !important;
  animation: fx-pulse-glow 1.5s infinite ease-in-out;
}

.fx-galaxy-frame {
  border: var(--fx-w, 3px) solid transparent !important;
  background-image: linear-gradient(#0d0b1d, #0d0b1d), conic-gradient(from var(--fx-galaxy-angle), #7f00ff, #e100ff, #00ffff, #7f00ff) !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100% !important;
  animation: fx-galaxy-rotate 4s linear infinite;
  box-shadow: 0 0 14px rgba(225, 0, 255, 0.6) !important;
}

.fx-crown-frame {
  border: var(--fx-w, 3px) solid #ffb703 !important;
  box-shadow: 0 0 12px #ffb703, 0 0 20px #fb8500, inset 0 0 6px #ffe6a7 !important;
}

.fx-magma-frame {
  border: var(--fx-w, 3px) solid transparent !important;
  background-image: linear-gradient(#1a0500, #1a0500), linear-gradient(135deg, #ff4500, #ff0000, #ff8c00, #8b0000) !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  background-repeat: repeat, repeat !important;
  background-size: 200% 200% !important;
  
  animation: fx-aurora-bg 2.5s infinite ease-in-out;
  box-shadow: 0 0 14px rgba(255, 69, 0, 0.8) !important;
}

.fx-sakura-spin {
  border: var(--fx-w, 3px) solid transparent !important;
  background-image: linear-gradient(#fff, #fff), conic-gradient(from var(--fx-spin-angle), #ff758c, #ff7eb3, #7928ca, #ff758c) !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100% !important;
  animation: fx-spin-rotate 4s linear infinite;
  box-shadow: 0 0 10px rgba(255, 117, 140, 0.6) !important;
}

.fx-void-frame {
  border: var(--fx-w, 3px) solid transparent !important;
  background-image: linear-gradient(#05050a, #05050a), linear-gradient(135deg, #240046, #7b2cbf, #9d4edd, #10002b) !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  background-repeat: repeat, repeat !important;
  background-size: 200% 200% !important;
  
  animation: fx-aurora-bg 4s infinite linear;
  box-shadow: 0 0 16px rgba(157, 78, 221, 0.8) !important;
}

.fx-phoenix-frame {
  border: var(--fx-w, 3px) solid transparent !important;
  background-image: linear-gradient(#1f0000, #1f0000), linear-gradient(45deg, #d00000, #ffba08, #370617, #f72585) !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  background-repeat: repeat, repeat !important;
  background-size: 200% 200% !important;
  
  animation: fx-aurora-bg 2s infinite ease-in-out;
  box-shadow: 0 0 18px rgba(255, 186, 8, 0.9) !important;
}

/* Dark mode overrides for frames */
html.dark-mode .fx-rainbow-frame,
html.dark-mode .fx-aurora,
html.dark-mode .fx-holo,
html.dark-mode .fx-spin-ring,
html.dark-mode .fx-wave-frame,
html.dark-mode .fx-diamond-frame,
html.dark-mode .fx-blossom-frame,
html.dark-mode .fx-snowflake-frame,
html.dark-mode .fx-sakura-spin {
  background-clip: padding-box, border-box !important;
}

html.dark-mode .fx-rainbow-frame { background-image: linear-gradient(#16213e, #16213e), linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000) !important; }
html.dark-mode .fx-aurora        { background-image: linear-gradient(#16213e, #16213e), linear-gradient(135deg, #ff007f, #7928ca, #00dfd8, #ff007f) !important; }
html.dark-mode .fx-holo          { background-image: linear-gradient(#16213e, #16213e), linear-gradient(45deg, #e600e6, #00ffff, #ffff00, #e600e6) !important; }
html.dark-mode .fx-spin-ring     { background-image: linear-gradient(#16213e, #16213e), conic-gradient(from var(--fx-spin-angle), #00e5ff, #7928ca, #ff007f, #00e5ff) !important; }
html.dark-mode .fx-wave-frame    { background-image: linear-gradient(#16213e, #16213e), linear-gradient(120deg, #00c6ff, #0072ff, #00f2fe, #4facfe) !important; }
html.dark-mode .fx-diamond-frame { background-image: linear-gradient(#16213e, #16213e), linear-gradient(135deg, #e0c3fc, #8ec5fc, #ffffff, #e0c3fc) !important; }
html.dark-mode .fx-blossom-frame { background-image: linear-gradient(#16213e, #16213e), linear-gradient(90deg, #ff9a9e, #fecfef, #feada6, #f5efef) !important; }
html.dark-mode .fx-snowflake-frame { background-image: linear-gradient(#16213e, #16213e), linear-gradient(135deg, #a1c4fd, #c2e9fb, #e0f2fe, #a1c4fd) !important; }
html.dark-mode .fx-sakura-spin   { background-image: linear-gradient(#16213e, #16213e), conic-gradient(from var(--fx-spin-angle), #ff758c, #ff7eb3, #7928ca, #ff758c) !important; }

/* ── Nickname FX Classes ── */
.fx-rainbow-text {
  background: linear-gradient(90deg, #ff007f, #7928ca, #00dfd8, #ff007f);
  background-size: 200% auto;
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: fx-rainbow-flow 3s linear infinite;
  font-weight: bold;
}

.fx-glitch {
  color: #00e5ff;
  font-weight: bold;
  animation: fx-glitch-anim 1s infinite alternate;
}

.fx-gold-nick {
  color: #d4af37;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(212, 175, 55, 0.8), 1px 1px 2px #000;
}

.fx-neon-nick {
  color: #00ffcc;
  font-weight: bold;
  text-shadow: 0 0 8px #00ffcc, 0 0 15px #00ffcc;
}

.fx-cyber-nick {
  color: #ff007f;
  font-weight: bold;
  text-shadow: 0 0 8px #ff007f, 0 0 15px #7928ca;
}

.fx-sunset-nick {
  background: linear-gradient(90deg, #ff512f, #dd2476);
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  font-weight: bold;
}

.fx-legend-nick {
  background: linear-gradient(90deg, #ff4e50, #f9d423);
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(249, 212, 35, 0.5);
}

.fx-neon-flicker {
  color: #ff007f;
  font-weight: bold;
  animation: fx-neon-flicker-anim 1.5s infinite ease-in-out;
}

.fx-holo-shimmer {
  background: linear-gradient(90deg, #a8ebe9, #f7ceec, #e0c3fc, #8ec5fc, #a8ebe9);
  background-size: 200% auto;
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: fx-shimmer-anim 3s linear infinite;
  font-weight: bold;
}

.fx-flame-nick {
  color: #ff3300;
  font-weight: bold;
  text-shadow: 0 0 6px #ff6600, 0 0 12px #ffcc00;
}

.fx-ice-nick {
  color: #00b4d8;
  font-weight: bold;
  text-shadow: 0 0 6px #90e0ef, 0 0 12px #caf0f8;
}

.fx-magellan-nick {
  background: linear-gradient(90deg, #480ca8, #7209b7, #f72585, #4cc9f0);
  background-size: 200% auto;
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: fx-shimmer-anim 4s linear infinite;
  font-weight: bold;
}

.fx-typing-nick {
  color: #00ff66;
  font-weight: bold;
  font-family: monospace, monospace;
  text-shadow: 0 0 6px rgba(0, 255, 102, 0.8);
}

.fx-emerald-nick {
  background: linear-gradient(90deg, #0d3b66, #059669, #10b981, #34d399);
  background-size: 200% auto;
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  font-weight: bold;
}

.fx-rose-gold-nick {
  background: linear-gradient(90deg, #b76e79, #f7cad0, #e0a96d, #b76e79);
  background-size: 200% auto;
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: fx-shimmer-anim 3.5s linear infinite;
  font-weight: bold;
}

.fx-matrix-nick {
  color: #00ff00;
  font-weight: bold;
  text-shadow: 0 0 8px #00ff00, 0 0 15px #003300;
}

.fx-aurora-nick {
  background: linear-gradient(90deg, #56ab2f, #a8e063, #00c6ff, #0072ff);
  background-size: 200% auto;
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: fx-shimmer-anim 4s linear infinite;
  font-weight: bold;
}

.fx-galaxy-nick {
  background: linear-gradient(90deg, #833ab4, #fd1d1d, #fcb045, #833ab4);
  background-size: 200% auto;
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: fx-shimmer-anim 3s linear infinite;
  font-weight: bold;
}

.fx-shadow-lord-nick {
  color: #d8b4fe;
  font-weight: bold;
  text-shadow: 0 0 10px #7e22ce, 0 0 20px #3b0764;
}

/* ── Bubble FX Classes ── */
.fx-glass-bubble {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 20px 0 rgba(31, 38, 135, 0.15);
  color: #1e1e2e !important;
}
html.dark-mode .fx-glass-bubble {
  background: rgba(30, 30, 46, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f0f0f0 !important;
}

.fx-neon-bubble {
  background: #0f0f1a;
  border: 1.5px solid #00ffcc;
  color: #00ffcc !important;
  box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
}

.fx-cosmic-bubble {
  background: linear-gradient(135deg, #1a0033, #000033);
  border: 1px solid #8a2be2;
  color: #e0b0ff !important;
  box-shadow: 0 0 12px rgba(138, 43, 226, 0.4);
}

.fx-gold-bubble {
  background: linear-gradient(135deg, #fffdf0, #fff9d6);
  border: 1.5px solid #ffd700;
  color: #7a5c00 !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
html.dark-mode .fx-gold-bubble {
  background: linear-gradient(135deg, #2a2400, #1a1800);
  color: #ffeb80 !important;
}

.fx-crystal-bubble {
  background: linear-gradient(135deg, rgba(224, 242, 254, 0.9), rgba(186, 230, 253, 0.9));
  border: 1px solid #38bdf8;
  color: #0369a1 !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}
html.dark-mode .fx-crystal-bubble {
  background: linear-gradient(135deg, rgba(12, 74, 110, 0.9), rgba(3, 105, 161, 0.9));
  color: #e0f2fe !important;
}

.fx-blossom-bubble {
  background: linear-gradient(135deg, #fdf2f8, #fce7f3);
  border: 1.5px solid #f472b6;
  color: #831843 !important;
  box-shadow: 0 0 8px rgba(244, 114, 182, 0.3);
}
html.dark-mode .fx-blossom-bubble {
  background: linear-gradient(135deg, #500724, #831843);
  color: #fbcfe8 !important;
}

.fx-pixel-bubble {
  background: #f8fafc;
  border: 3px solid #0f172a;
  box-shadow: 3px 3px 0px #0f172a;
  color: #0f172a !important;
  font-family: monospace, monospace;
}
html.dark-mode .fx-pixel-bubble {
  background: #1e293b;
  border: 3px solid #38bdf8;
  box-shadow: 3px 3px 0px #38bdf8;
  color: #f8fafc !important;
}

.fx-letter-bubble {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  color: #78350f !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}
html.dark-mode .fx-letter-bubble {
  background: #451a03;
  border: 1px solid #d97706;
  color: #fef3c7 !important;
}

.fx-comic-bubble {
  background: #fef08a;
  border: 2px solid #000000;
  color: #000000 !important;
  font-weight: bold;
  box-shadow: 3px 3px 0px #000000;
}
html.dark-mode .fx-comic-bubble {
  background: #facc15;
  border: 2px solid #ffffff;
  color: #000000 !important;
  box-shadow: 3px 3px 0px #ffffff;
}

.fx-cyber-bubble {
  background: #030712;
  border: 1px solid #06b6d4;
  outline: 1px solid #ec4899;
  color: #22d3ee !important;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
}

.fx-midnight-bubble {
  background: linear-gradient(135deg, #0f172a, #1e1b4b);
  border: 1px solid #6366f1;
  color: #c7d2fe !important;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
}

.fx-emerald-bubble {
  background: linear-gradient(135deg, #064e3b, #022c22);
  border: 1.5px solid #10b981;
  color: #a7f3d0 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.fx-sunset-bubble {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1.5px solid #f97316;
  color: #7c2d12 !important;
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.3);
}
html.dark-mode .fx-sunset-bubble {
  background: linear-gradient(135deg, #431407, #7c2d12);
  color: #ffedd5 !important;
}

.fx-aurora-bubble {
  background: linear-gradient(135deg, #0d9488, #4f46e5);
  border: 1px solid #a7f3d0;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(13, 148, 136, 0.5);
}

.fx-arcade-bubble {
  background: #18181b;
  border: 2px solid #f43f5e;
  color: #38bdf8 !important;
  text-shadow: 0 0 5px #38bdf8;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.5);
}

.fx-royalty-bubble {
  background: linear-gradient(135deg, #2e1065, #3b0764);
  border: 1.5px solid #eab308;
  color: #fef08a !important;
  box-shadow: 0 0 14px rgba(234, 179, 8, 0.4);
}

/* ── Title FX Classes ── */
.fx-gold-title {
  background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
  color: #3d2800 !important;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(191, 149, 63, 0.4);
  border: 1px solid #d4af37;
}

.fx-legend-title {
  background: linear-gradient(45deg, #ff007f, #7928ca);
  color: #ffffff !important;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(255, 0, 127, 0.5);
  animation: fx-pulse-glow 3s infinite;
}

.fx-cosmic-title {
  background: linear-gradient(135deg, #000046, #1cb5e0);
  color: #ffffff !important;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(28, 181, 224, 0.4);
}

.fx-cyber-title {
  background: #000;
  color: #00ffcc !important;
  border: 1px solid #00ffcc;
  font-weight: bold;
  box-shadow: 0 0 6px #00ffcc;
}

.fx-bronze-title {
  background: linear-gradient(135deg, #78350f, #b45309, #d97706);
  color: #ffffff !important;
  font-weight: bold;
  border: 1px solid #f59e0b;
  box-shadow: 0 2px 4px rgba(180, 83, 9, 0.4);
}

.fx-silver-title {
  background: linear-gradient(135deg, #475569, #94a3b8, #cbd5e1);
  color: #0f172a !important;
  font-weight: bold;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 4px rgba(148, 163, 184, 0.4);
}

.fx-platinum-title {
  background: linear-gradient(135deg, #0284c7, #38bdf8, #e0f2fe);
  color: #0369a1 !important;
  font-weight: bold;
  border: 1px solid #7dd3fc;
  box-shadow: 0 2px 6px rgba(56, 189, 248, 0.5);
}

.fx-diamond-title {
  background: linear-gradient(135deg, #0f172a, #0284c7, #38bdf8);
  color: #ffffff !important;
  font-weight: bold;
  border: 1px solid #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
}

.fx-challenger-title {
  background: linear-gradient(135deg, #dc2626, #f59e0b, #ef4444);
  color: #ffffff !important;
  font-weight: bold;
  border: 1px solid #fef08a;
  animation: fx-pulse-glow 2s infinite ease-in-out;
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.8);
}

.fx-archmage-title {
  background: linear-gradient(135deg, #4c1d95, #7c3aed, #c084fc);
  color: #ffffff !important;
  font-weight: bold;
  border: 1px solid #e9d5ff;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.6);
}

.fx-valkyrie-title {
  background: linear-gradient(135deg, #fef08a, #f59e0b, #ffffff);
  color: #78350f !important;
  font-weight: bold;
  border: 1px solid #fbbf24;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.fx-nebula-title {
  background: linear-gradient(135deg, #312e81, #4338ca, #818cf8);
  color: #ffffff !important;
  font-weight: bold;
  border: 1px solid #c7d2fe;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
}

.fx-time-lord-title {
  background: linear-gradient(135deg, #78350f, #d97706, #0284c7);
  color: #ffffff !important;
  font-weight: bold;
  border: 1px solid #fcd34d;
  box-shadow: 0 0 8px rgba(217, 119, 6, 0.5);
}

.fx-dragon-title {
  background: linear-gradient(135deg, #7f1d1d, #b91c1c, #f87171);
  color: #ffffff !important;
  font-weight: bold;
  border: 1px solid #fca5a5;
  box-shadow: 0 0 10px rgba(185, 28, 28, 0.7);
}

.fx-immortal-title {
  background: linear-gradient(135deg, #fef3c7, #fde047, #ffffff);
  color: #713f12 !important;
  font-weight: bold;
  border: 1.5px solid #eab308;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.7);
}

.fx-overlord-title {
  background: linear-gradient(135deg, #09090b, #450a0a, #881337);
  color: #fda4af !important;
  font-weight: bold;
  border: 1px solid #f43f5e;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.7);
}

/* ── Accessibility: Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .fx-aurora,
  .fx-neon-pulse,
  .fx-holo,
  .fx-spin-ring,
  .fx-rainbow-frame,
  .fx-cosmic-frame,
  .fx-lightning-frame,
  .fx-wave-frame,
  .fx-diamond-frame,
  .fx-blossom-frame,
  .fx-snowflake-frame,
  .fx-cyberscan-frame,
  .fx-galaxy-frame,
  .fx-crown-frame,
  .fx-magma-frame,
  .fx-sakura-spin,
  .fx-void-frame,
  .fx-phoenix-frame,
  .fx-rainbow-text,
  .fx-glitch,
  .fx-legend-title,
  .fx-neon-flicker,
  .fx-holo-shimmer,
  .fx-magellan-nick,
  .fx-rose-gold-nick,
  .fx-aurora-nick,
  .fx-galaxy-nick,
  .fx-challenger-title {
    animation: none;
    transition: none !important;
  }
}