/* Custom styles for Premium TTS */

/* Import Google Fonts for better cursive */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Great+Vibes&family=Pacifico&display=swap');

/* Motivational Quote Styling */
.motivational-quote {
  font-family: 'Dancing Script', 'Brush Script MT', cursive;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

/* Voice Button Emoji Glow Effects */
.voice-btn.selected {
  animation: selected-pulse 2s infinite;
}

@keyframes selected-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
  }
  50% {
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.7);
  }
}

/* Hover effects for voice buttons */
.voice-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Artful Expanded Fractal Pattern - Matching Console Green Theme */
body {
  position: relative;
  background: linear-gradient(135deg, #064e3b 0%, #065f46 25%, #047857 50%, #059669 75%, #065f46 100%);
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
}

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: 
    /* Large artistic tree fractals */
    url("data:image/svg+xml,%3Csvg width='400' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='3' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23glow)'%3E%3Cpath d='M200 550 L200 400 M200 400 L150 300 M200 400 L250 300 M150 300 L120 200 M150 300 L180 200 M250 300 L220 200 M250 300 L280 200 M120 200 L100 120 M120 200 L140 120 M180 200 L160 120 M180 200 L200 120 M220 200 L200 120 M220 200 L240 120 M280 200 L260 120 M280 200 L300 120' stroke='%2310b981' stroke-width='1' opacity='0.3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M100 500 L100 380 M100 380 L70 300 M100 380 L130 300' stroke='%2322c55e' stroke-width='0.8' opacity='0.25' fill='none' stroke-linecap='round'/%3E%3Cpath d='M300 500 L300 380 M300 380 L270 300 M300 380 L330 300' stroke='%2322c55e' stroke-width='0.8' opacity='0.25' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E"),
    /* Spiraling leaf patterns */
    url("data:image/svg+xml,%3Csvg width='500' height='500' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='leaf' x='0' y='0' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cpath d='M50 10 Q30 30 50 50 Q70 30 50 10' stroke='%2334d399' stroke-width='0.5' fill='none' opacity='0.2' transform='rotate(45 50 50)'/%3E%3Cpath d='M50 10 Q30 30 50 50 Q70 30 50 10' stroke='%2310b981' stroke-width='0.5' fill='none' opacity='0.2' transform='rotate(135 50 50)'/%3E%3Cpath d='M50 10 Q30 30 50 50 Q70 30 50 10' stroke='%23059669' stroke-width='0.5' fill='none' opacity='0.2' transform='rotate(225 50 50)'/%3E%3Cpath d='M50 10 Q30 30 50 50 Q70 30 50 10' stroke='%2386efac' stroke-width='0.5' fill='none' opacity='0.2' transform='rotate(315 50 50)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23leaf)'/%3E%3C/svg%3E"),
    /* Organic flow lines */
    url("data:image/svg+xml,%3Csvg width='800' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 200 Q200 100 400 200 T800 200' stroke='%2310b981' stroke-width='0.5' fill='none' opacity='0.15'/%3E%3Cpath d='M0 250 Q200 150 400 250 T800 250' stroke='%2322c55e' stroke-width='0.5' fill='none' opacity='0.15'/%3E%3Cpath d='M0 150 Q200 250 400 150 T800 150' stroke='%23059669' stroke-width='0.5' fill='none' opacity='0.15'/%3E%3C/svg%3E");
  background-size: 400px 600px, 500px 500px, 800px 400px;
  background-position: 0% 0%, 50% 50%, 100% 100%;
  z-index: 1;
  opacity: 0.4;
  mix-blend-mode: screen;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Additional Fractal Layer for More Visibility */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.4;
  pointer-events: none;
  background-image: 
    /* Enhanced Fern fractal patterns */
    radial-gradient(ellipse at 25% 30%, transparent 20%, rgba(134, 239, 172, 0.15) 25%, transparent 35%),
    radial-gradient(ellipse at 75% 70%, transparent 25%, rgba(134, 239, 172, 0.12) 30%, transparent 40%),
    /* Tree branch fractals */
    conic-gradient(from 45deg at 30% 60%, transparent 0deg, rgba(134, 239, 172, 0.08) 15deg, transparent 30deg, rgba(134, 239, 172, 0.1) 45deg, transparent 60deg),
    conic-gradient(from 225deg at 70% 40%, transparent 0deg, rgba(74, 222, 128, 0.08) 20deg, transparent 40deg),
    /* Leaf vein patterns - more visible */
    repeating-linear-gradient(60deg, transparent, transparent 10px, rgba(134, 239, 172, 0.08) 11px, transparent 12px),
    repeating-linear-gradient(-60deg, transparent, transparent 10px, rgba(74, 222, 128, 0.08) 11px, transparent 12px),
    repeating-linear-gradient(120deg, transparent, transparent 15px, rgba(34, 197, 94, 0.05) 16px, transparent 17px),
    /* Organic spiral fractals */
    radial-gradient(circle at 15% 85%, transparent 10%, rgba(134, 239, 172, 0.1) 15%, transparent 25%, rgba(74, 222, 128, 0.08) 30%, transparent 40%),
    radial-gradient(circle at 85% 15%, transparent 15%, rgba(34, 197, 94, 0.1) 20%, transparent 30%),
    /* Fine natural texture */
    repeating-radial-gradient(circle at 50% 50%, transparent 0px, transparent 5px, rgba(134, 239, 172, 0.05) 6px, transparent 8px);
  background-size: 
    400px 400px,
    450px 450px,
    300px 300px,
    350px 350px,
    80px 80px,
    80px 80px,
    120px 120px,
    250px 250px,
    280px 280px,
    100px 100px;
  background-position:
    0 0,
    200px 200px,
    100px 50px,
    -100px 150px,
    0 0,
    40px 40px,
    20px 60px,
    300px 100px,
    50px 300px,
    0 0;
  filter: contrast(1.2);
  mix-blend-mode: screen;
  animation: fractalShift 60s ease-in-out infinite;
}

@keyframes fractalShift {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  33% {
    transform: scale(1.05) rotate(1deg);
  }
  66% {
    transform: scale(0.98) rotate(-1deg);
  }
}

/* Custom Green Scrollbar */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(6, 95, 70, 0.3);
  border-radius: 10px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #10b981 0%, #059669 50%, #047857 100%);
  border-radius: 10px;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #34d399 0%, #10b981 50%, #059669 100%);
  border: 1px solid rgba(52, 211, 153, 0.5);
}

/* Custom scrollbar for textarea */
.custom-scrollbar::-webkit-scrollbar {
  width: 10px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(6, 95, 70, 0.2);
  border-radius: 5px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #10b981;
  border-radius: 5px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #34d399;
}

/* Range slider custom styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-track {
  background: rgba(255, 255, 255, 0.2);
  height: 6px;
  border-radius: 3px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: #a855f7;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  margin-top: -7px;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

input[type="range"]::-moz-range-track {
  background: rgba(255, 255, 255, 0.2);
  height: 6px;
  border-radius: 3px;
}

input[type="range"]::-moz-range-thumb {
  background: #a855f7;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: none;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

/* Audio player custom styling */
audio {
  filter: invert(1);
  border-radius: 8px;
}

/* Textarea focus glow */
textarea:focus {
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}

/* Button hover effects */
button {
  transition: all 0.2s ease;
}

button:hover {
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0);
}

/* Nature fractal decorative elements - Enhanced */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.2;
  pointer-events: none;
  background: 
    /* Fibonacci spiral overlay */
    radial-gradient(spiral at 38.2% 61.8%, transparent 30%, rgba(52, 211, 153, 0.05) 35%, transparent 40%),
    /* Golden ratio rectangles */
    linear-gradient(137.5deg, transparent 45%, rgba(16, 185, 129, 0.02) 45.5%, rgba(16, 185, 129, 0.02) 46%, transparent 46.5%),
    /* Tree ring fractals */
    repeating-radial-gradient(circle at 70% 30%, transparent 0, transparent 20px, rgba(34, 197, 94, 0.02) 21px, transparent 22px),
    repeating-radial-gradient(circle at 30% 70%, transparent 0, transparent 25px, rgba(74, 222, 128, 0.02) 26px, transparent 27px);
  background-size: 
    600px 600px,
    400px 400px,
    300px 300px,
    350px 350px;
  mix-blend-mode: multiply;
  animation: fractalPulse 45s ease-in-out infinite;
}

@keyframes fractalPulse {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.3;
  }
}

/* Responsive width for laptops */
@media (min-width: 1024px) {
  .container {
    max-width: 90% !important;
  }
}

/* Pulse animation for generating state - updated to green */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

button:disabled {
  animation: pulse 2s infinite;
}

/* Glass morphism effect */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Loading animation */
.loading-dots::after {
  content: '.';
  animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {
  0%, 20% {
    content: '.';
  }
  40% {
    content: '..';
  }
  60% {
    content: '...';
  }
  80%, 100% {
    content: '';
  }
}

/* Casino-style animations and house colors */
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 30s linear infinite;
}

/* Casino colors - house style */
:root {
  --casino-gold: #FFD700;
  --casino-purple: #9333ea;
  --casino-blue: #3b82f6;
  --casino-green: #10b981;
  --casino-gray: #6b7280;
}

/* Glowing effect for points */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.5),
                0 0 40px rgba(147, 51, 234, 0.3),
                0 0 60px rgba(147, 51, 234, 0.1);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.7),
                0 0 50px rgba(255, 215, 0, 0.5),
                0 0 70px rgba(255, 215, 0, 0.3);
  }
}

#pointsDisplay {
  animation: glow-pulse 3s ease-in-out infinite;
}

/* Casino notification bounce */
@keyframes casino-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-30px);
  }
  60% {
    transform: translateX(-50%) translateY(-15px);
  }
}

#casinoNotification {
  animation: casino-bounce 2s infinite;
}

/* Wheel container backdrop */
#casinoRewardsContainer::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  z-index: -1;
}

/* Motivational quote animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease-out;
}

/* Quote overlay glass effect */
#motivationalQuoteOverlay .relative {
  animation: fadeIn 0.5s ease-out, float 6s ease-in-out infinite;
}

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

/* Enhanced quote text styling */
#quoteText {
  background: linear-gradient(45deg, #FFD700, #FFA500, #FF69B4, #9333ea, #3b82f6);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientMove 4s ease infinite;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}