.mandala-master-wrapper { position: relative; width: 280px; height: 280px; margin: 0 auto; perspective: 1000px; }
.mandala-ultimate { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: transform 0.5s ease; }
.mandala-ultimate:hover { transform: scale(1.05); }
.mandala-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 0 15px rgba(255,255,255,0.05); animation: rotate 60s linear infinite; }
.ring-outer { width: 100%; height: 100%; border-width: 1.5px; border-style: double; }
.ring-middle { width: 85%; height: 85%; border-width: 1px; border-style: dashed; animation-duration: 45s; animation-direction: reverse; }
.ring-inner { width: 70%; height: 70%; border-width: 2px; border-style: solid; animation-duration: 30s; }
.mandala-pattern-geom { position: absolute; width: 65%; height: 65%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,0.05) 10deg, transparent 20deg); opacity: 0.6; animation: rotate 120s linear infinite; }
.spark-bottom { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background: #fff; border-radius: 50%; box-shadow: 0 0 20px #fff, 0 0 40px #fff; z-index: 100; animation: spark-glow 2s ease-in-out infinite; }
@keyframes spark-glow { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.8; } 50% { transform: translateX(-50%) scale(1.5); opacity: 1; } }
.result-content-box { position: relative; z-index: 20; text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.result-label-top { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.6); font-weight: 500; position: absolute; top: -70px; left: 50%; transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
.result-value-main { font-size: 4rem; font-weight: 900; line-height: 1; margin-top: 10px; }
.gold-variant .mandala-ring { border-color: rgba(255, 215, 0, 0.4); box-shadow: 0 0 20px rgba(255, 215, 0, 0.2); }
.gold-variant .result-value-main { color: #FFD700; text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.4); }
.gold-variant .spark-bottom { background: #FFD700; box-shadow: 0 0 20px #FFD700, 0 0 40px #FFD700; }
.cyan-variant .mandala-ring { border-color: rgba(0, 229, 255, 0.4); box-shadow: 0 0 20px rgba(0, 229, 255, 0.2); }
.cyan-variant .result-value-main { color: #00E5FF; text-shadow: 0 0 20px rgba(0, 229, 255, 0.8), 0 0 40px rgba(0, 229, 255, 0.4); }
.cyan-variant .spark-bottom { background: #00E5FF; box-shadow: 0 0 20px #00E5FF, 0 0 40px #00E5FF; }
.pink-variant .mandala-ring { border-color: rgba(255, 0, 127, 0.4); box-shadow: 0 0 20px rgba(255, 0, 127, 0.2); }
.pink-variant .result-value-main { color: #FF007F; text-shadow: 0 0 20px rgba(255, 0, 127, 0.8), 0 0 40px rgba(255, 0, 127, 0.4); }
.pink-variant .spark-bottom { background: #FF007F; box-shadow: 0 0 20px #FF007F, 0 0 40px #FF007F; }
.purple-variant .mandala-ring { border-color: rgba(168, 85, 247, 0.4); box-shadow: 0 0 20px rgba(168, 85, 247, 0.2); }
.purple-variant .result-value-main { color: #a855f7; text-shadow: 0 0 20px rgba(168, 85, 247, 0.8), 0 0 40px rgba(168, 85, 247, 0.4); }
.purple-variant .spark-bottom { background: #a855f7; box-shadow: 0 0 20px #a855f7, 0 0 40px #a855f7; }
.slow { animation-duration: 90s; } .slow-rev { animation-duration: 90s; animation-direction: reverse; }
.fast { animation-duration: 40s; } .fast-rev { animation-duration: 40s; animation-direction: reverse; }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.no-select { user-select: none; -webkit-user-select: none; }
.mandala-compact { width: 220px; height: 220px; }
.mandala-compact .result-value-main { font-size: 3rem; margin-top: 5px; }
.mandala-compact .result-label-top { font-size: 0.65rem; top: -55px; letter-spacing: 2px; }
.dbl-code-main { width: 340px; height: 340px; }
.dbl-code-main .result-value-main { font-size: 4rem; }

@media (max-width: 768px) {
    .mandala-master-wrapper { width: 220px !important; height: 220px !important; }
    .dbl-code-main { width: 280px !important; height: 280px !important; }
    .result-value-main { font-size: 2.5rem !important; }
    .mandala-compact { width: 100px !important; height: 100px !important; }
    .mandala-compact .result-value-main { font-size: 1.2rem !important; }
    .result-label-top { top: -45px; font-size: 0.6rem; letter-spacing: 1px; }
}