/* AI-Powered Pixel Art Chibi Battle Universe - Enhanced Styles */

/* Import pixel font */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Global pixel styles */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Press Start 2P', monospace;
  background: #0f0820;
  color: #fff;
  line-height: 1.6;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Pixelated image rendering */
.pixelated {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Main background with pixel dithering effect */
.pixel-background {
  background: linear-gradient(45deg, #0f0820 25%, #1a0d2e 25%, #1a0d2e 50%, #0f0820 50%, #0f0820 75%, #1a0d2e 75%);
  background-size: 8px 8px;
  animation: backgroundShift 20s linear infinite;
  min-height: 100vh;
}

@keyframes backgroundShift {
  0% { background-position: 0 0; }
  100% { background-position: 16px 16px; }
}

/* Header styles */
.pixel-header {
  position: relative;
  overflow: hidden;
  border-bottom: 4px solid #00ffff;
  box-shadow: 0 4px 0 #ff1493, 0 8px 0 #8a2be2;
}

@keyframes pixelGradient {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 50%; }
  50% { background-position: 50% 100%; }
  75% { background-position: 100% 0%; }
  100% { background-position: 0% 50%; }
}

/* AI-specific animations */
@keyframes dataFlow {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100vw) rotate(45deg); }
}

@keyframes earningsGlow {
  0%, 100% {
    text-shadow: 
      0 0 5px #00ff00,
      0 0 10px #00ff00,
      0 0 15px #00ff00,
      2px 2px 0 #000;
  }
  50% {
    text-shadow: 
      0 0 10px #00ff00,
      0 0 20px #00ff00,
      0 0 30px #00ff00,
      2px 2px 0 #000;
  }
}

/* AI Data Flow Effect */
.ai-data-flow {
  background-image: 
    repeating-linear-gradient(45deg, 
      transparent 0px, 
      transparent 10px, 
      rgba(0,255,255,0.1) 10px, 
      rgba(0,255,255,0.1) 12px
    );
  animation: dataFlow 3s linear infinite;
}

/* AI Power Meter */
.ai-power-meter .w-2 {
  border: 1px solid #000;
  box-shadow: 1px 1px 0 rgba(0,255,255,0.3);
}

/* Earnings Display */
.earnings-display {
  box-shadow: 
    0 0 10px rgba(0,255,0,0.3),
    inset 0 0 5px rgba(0,255,0,0.1);
  border-image: linear-gradient(45deg, #00ff00, #32cd32) 1;
}

/* Text effects */
.pixel-text-shadow {
  text-shadow: 
    2px 2px 0 #000,
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000;
}

.pixel-text-glow {
  text-shadow: 
    0 0 5px #ff1493,
    0 0 10px #ff1493,
    0 0 15px #ff1493,
    2px 2px 0 #000,
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000;
}

.pixel-title {
  color: #ff69b4;
  text-shadow: 
    2px 2px 0 #000,
    0 0 10px #ff69b4;
}

.pixel-subtitle {
  color: #dda0dd;
  text-shadow: 1px 1px 0 #000;
}

/* Enhanced Button Styles */
.pixel-button,
.pixel-button-normal {
  background: linear-gradient(to bottom, #8a2be2 0%, #4b0082 100%);
  border: 2px solid #fff;
  border-radius: 0;
  color: #fff;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.1s ease;
  box-shadow: 2px 2px 0 #000;
  position: relative;
}

.pixel-button:hover,
.pixel-button-normal:hover {
  background: linear-gradient(to bottom, #9932cc 0%, #6a0dad 100%);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #000;
}

.pixel-button-active {
  background: linear-gradient(to bottom, #00ffff 0%, #0099cc 100%);
  border: 2px solid #fff;
  color: #000;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.3);
}

.pixel-button-big {
  background: linear-gradient(to bottom, #ff69b4 0%, #ff1493 100%);
  border: 3px solid #fff;
  border-radius: 0;
  color: #fff;
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.1s ease;
  box-shadow: 3px 3px 0 #000;
  text-transform: uppercase;
}

.pixel-button-big:hover {
  background: linear-gradient(to bottom, #ff8fc7 0%, #ff4da6 100%);
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 #000;
}

.pixel-button-enabled {
  background: linear-gradient(to bottom, #32cd32 0%, #228b22 100%);
  border: 3px solid #fff;
  animation: earningsGlow 2s ease-in-out infinite;
}

.pixel-button-disabled {
  background: linear-gradient(to bottom, #696969 0%, #2f2f2f 100%);
  border: 3px solid #888;
  color: #ccc;
  cursor: not-allowed;
}

/* AI-Enhanced Card Styles */
.ai-enhanced-card {
  position: relative;
  background: linear-gradient(to bottom, #2e1065 0%, #1a0d2e 100%);
  border: 2px solid #ff69b4;
  box-shadow: 
    2px 2px 0 #000,
    0 0 10px rgba(0,255,255,0.2);
  transition: all 0.3s ease;
}

.ai-enhanced-card:hover {
  border-color: #00ffff;
  box-shadow: 
    2px 2px 0 #000,
    0 0 20px rgba(0,255,255,0.5),
    inset 0 0 10px rgba(0,255,255,0.1);
  transform: scale(1.02) translateY(-2px);
}

.ai-recommended-glow {
  animation: aiRecommendGlow 2s ease-in-out infinite;
}

@keyframes aiRecommendGlow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(0,255,255,0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(0,255,255,0.8);
  }
}

/* Panel styles */
.pixel-panel {
  background: linear-gradient(to bottom, #2e1065 0%, #1a0d2e 100%);
  border: 3px solid #ff69b4;
  border-radius: 0;
  box-shadow: 
    3px 3px 0 #000,
    inset -2px -2px 0 rgba(0,0,0,0.5),
    inset 2px 2px 0 rgba(255,255,255,0.1);
  position: relative;
}

.pixel-panel::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #ff1493, #00ffff, #32cd32, #ff1493);
  background-size: 200% 200%;
  animation: borderGlow 4s linear infinite;
  z-index: -1;
  opacity: 0.3;
}

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

/* AI Market Styles */
.ai-creation-studio,
.ai-collaboration-hub {
  background: linear-gradient(to bottom, rgba(46,16,101,0.3) 0%, rgba(26,13,46,0.3) 100%);
  border-radius: 0;
  position: relative;
}

.marketplace-item {
  background: linear-gradient(to bottom, #2e1065 0%, #1a0d2e 100%);
  transition: all 0.3s ease;
}

.marketplace-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,255,255,0.2);
}

/* Earnings Styles */
.earnings-stat {
  position: relative;
  overflow: hidden;
}

.earnings-stat::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,255,255,0.2), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Battle Arena Enhancements */
.pixel-battle-arena {
  position: relative;
}

.pixel-battle-panel {
  background: linear-gradient(to bottom, #2e1065 0%, #1a0d2e 100%);
  border: 3px solid #ff4500;
  box-shadow: 
    3px 3px 0 #000,
    0 0 20px rgba(255,69,0,0.3);
}

/* AI Tournament Styles */
.ai-tournament-prediction {
  background: linear-gradient(to bottom, rgba(46,16,101,0.5) 0%, rgba(26,13,46,0.5) 100%);
  transition: all 0.3s ease;
}

.ai-tournament-prediction:hover {
  background: linear-gradient(to bottom, rgba(46,16,101,0.8) 0%, rgba(26,13,46,0.8) 100%);
  transform: translateY(-1px);
}

/* Leaderboard Enhancements */
.ai-leader-highlight {
  background: linear-gradient(to right, rgba(0,255,255,0.1) 0%, rgba(46,16,101,1) 30%);
  border-color: #00ffff;
  box-shadow: 
    2px 2px 0 #000,
    0 0 15px rgba(0,255,255,0.5);
}

.achievement-unlocked {
  background: linear-gradient(to bottom, #4b0082 0%, #2e1065 100%);
  border-color: #ffd700;
  animation: achievementPulse 2s ease-in-out infinite;
}

.achievement-locked {
  background: linear-gradient(to bottom, #333 0%, #222 100%);
  border-color: #666;
  opacity: 0.6;
}

@keyframes achievementPulse {
  0%, 100% {
    box-shadow: 2px 2px 0 #000;
  }
  50% {
    box-shadow: 
      2px 2px 0 #000,
      0 0 15px rgba(255,215,0,0.5);
  }
}

/* RPS Selection Enhanced */
.pixel-rps-selection {
  background: linear-gradient(to bottom, rgba(26,13,46,0.8) 0%, rgba(15,8,32,0.8) 100%);
  border: 2px solid #ff69b4;
  border-radius: 0;
  padding: 16px;
  margin-top: 16px;
  position: relative;
}

.pixel-rps-selection::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(45deg, 
      transparent 0px, 
      transparent 2px, 
      rgba(255,105,180,0.1) 2px, 
      rgba(255,105,180,0.1) 4px
    );
  pointer-events: none;
}

/* Settings & Forms */
.pixel-select,
.pixel-input {
  background: linear-gradient(to bottom, #1a0d2e 0%, #0f0820 100%);
  border: 2px solid #ff69b4;
  border-radius: 0;
  color: #fff;
  box-shadow: 
    inset 2px 2px 0 rgba(0,0,0,0.5),
    2px 2px 0 rgba(255,105,180,0.2);
  transition: all 0.3s ease;
}

.pixel-select:focus,
.pixel-input:focus {
  outline: none;
  border-color: #00ffff;
  box-shadow: 
    inset 2px 2px 0 rgba(0,0,0,0.5),
    0 0 10px rgba(0,255,255,0.5);
}

/* Responsive design */
@media (max-width: 768px) {
  .font-pixel {
    font-size: 8px;
  }
  
  .earnings-display {
    flex-direction: column;
    align-items: center;
  }
  
  .ai-power-meter {
    margin-bottom: 8px;
  }
  
  .pixel-button,
  .pixel-button-normal,
  .pixel-button-active {
    padding: 4px 6px;
  }
  
  .pixel-button-big {
    padding: 6px 12px;
  }
}

/* Custom scrollbar for AI theme */
::-webkit-scrollbar {
  width: 12px;
  background: #0f0820;
}

::-webkit-scrollbar-track {
  background: linear-gradient(to bottom, #1a0d2e 0%, #0f0820 100%);
  border: 2px solid #00ffff;
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #00ffff 0%, #0099cc 100%);
  border: 2px solid #fff;
  border-radius: 0;
  box-shadow: 2px 2px 0 #000;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #33ffff 0%, #00ccff 100%);
}

/* Special AI Animations */
@keyframes pixelBounce {
  0%, 20%, 60%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  80% {
    transform: translateY(-5px);
  }
}

@keyframes pixelPulse {
  0%, 100% {
    transform: scale(1);
    text-shadow: 2px 2px 0 #000, 0 0 10px currentColor;
  }
  50% {
    transform: scale(1.1);
    text-shadow: 2px 2px 0 #000, 0 0 20px currentColor, 0 0 30px currentColor;
  }
}

@keyframes pixelShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

/* New AI-specific utility classes */
.ai-glow {
  box-shadow: 0 0 20px rgba(0,255,255,0.5);
}

.earning-pulse {
  animation: earningsGlow 1.5s ease-in-out infinite;
}

.data-stream {
  position: relative;
  overflow: hidden;
}

.data-stream::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,255,255,0.3), transparent);
  animation: dataFlow 2s infinite;
}