/* Microsoft Game Theme - Custom CSS */

/* Root Variables */
:root {
  /* Microsoft Blue Colors */
  --ms-blue-primary: #0078d4;
  --ms-blue-secondary: #106ebe;
  --ms-blue-light: #2899f5;
  --ms-blue-dark: #004578;
  
  /* Xbox Green Colors */
  --xbox-green: #107c10;
  --xbox-green-light: #16c60c;
  --xbox-green-dark: #0e5a0e;
  
  /* Microsoft Fluent Colors */
  --ms-purple: #8764b8;
  --ms-orange: #ff8c00;
  --ms-pink: #e3008c;
  --ms-teal: #00b7c3;
  
  /* Dark Theme Colors */
  --ms-bg-primary: #1e1e1e;
  --ms-bg-secondary: #2d2d30;
  --ms-bg-tertiary: #383838;
  --ms-bg-accent: #404040;
  
  /* Text Colors */
  --ms-text-primary: #ffffff;
  --ms-text-secondary: #cccccc;
  --ms-text-muted: #969696;
  
  /* Glass Effect */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--ms-blue-primary), var(--ms-blue-light));
  --gradient-xbox: linear-gradient(135deg, var(--xbox-green), var(--xbox-green-light));
  --gradient-purple: linear-gradient(135deg, var(--ms-purple), #a855f7);
  --gradient-background: linear-gradient(145deg, #1e1e1e 0%, #2d2d30 50%, #383838 100%);
  --gradient-card: linear-gradient(145deg, rgba(45, 45, 48, 0.8), rgba(56, 56, 56, 0.4));
}

/* Base Styles Override */
body {
  background: var(--gradient-background) !important;
  font-family: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--ms-text-primary) !important;
}

/* Glass Effect Base Class */
.glass-effect {
  background: var(--glass-bg);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* Modern Game Card */
.game-card {
  background: var(--gradient-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
}

.game-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  border-radius: 15px;
}

.game-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--ms-blue-light) !important;
  box-shadow: 
    0 20px 40px rgba(0, 120, 212, 0.2),
    0 10px 20px rgba(0, 0, 0, 0.3);
}

.game-card:hover::before {
  opacity: 0.1;
}

/* Game Card Image */
.game-card img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: brightness(0.95);
}

.game-card:hover img {
  transform: scale(1.1);
  filter: brightness(1.1);
}

/* Game Card Content */
.game-card-content {
  background: linear-gradient(180deg, 
    rgba(30, 30, 30, 0.9) 0%, 
    rgba(45, 45, 48, 0.95) 100%) !important;
  padding: 16px !important;
  position: relative;
}

.game-card-title {
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  color: var(--ms-text-primary) !important;
  margin: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  line-height: 1.3;
}

/* Category Badge */
.category-badge {
  background: var(--gradient-xbox) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(16, 124, 16, 0.4) !important;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.7rem;
}

/* Sidebar Modern Design */
.sidebar-bg {
  background: linear-gradient(180deg, 
    rgba(30, 30, 30, 0.95) 0%, 
    rgba(45, 45, 48, 0.98) 100%) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.sidebar-link {
  border-radius: 12px !important;
  margin: 4px 0 !important;
  padding: 14px 16px !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.sidebar-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-primary);
  transition: left 0.3s ease;
  z-index: -1;
}

.sidebar-link:hover::before,
.sidebar-link.active::before {
  left: 0;
}

.sidebar-link.active {
  background: var(--gradient-primary) !important;
  color: white !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.3);
}

.sidebar-link:hover {
  background: rgba(0, 120, 212, 0.1) !important;
  transform: translateX(4px);
}

/* Header Modern Design */
header {
  background: rgba(30, 30, 30, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Search Bar Modern Design */
.search-bar {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 24px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-bar:focus-within {
  border-color: var(--ms-blue-light) !important;
  box-shadow: 
    0 0 0 3px rgba(0, 120, 212, 0.2),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: scale(1.02);
}

.search-bar input {
  background: transparent !important;
  color: var(--ms-text-primary) !important;
  font-size: 0.95rem;
}

.search-bar input::placeholder {
  color: var(--ms-text-muted) !important;
}

.search-bar button {
  color: var(--ms-blue-light) !important;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.search-bar button:hover {
  background: rgba(0, 120, 212, 0.2);
  transform: scale(1.1);
}

/* Buttons Modern Design */
.btn-primary {
  background: var(--gradient-primary) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.3);
  text-transform: none;
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--ms-blue-light), var(--ms-blue-primary)) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 120, 212, 0.4);
}

.btn-secondary {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: rgba(0, 120, 212, 0.1) !important;
  border-color: var(--ms-blue-light) !important;
  transform: translateY(-2px);
}

/* Hero Section */
.hero-section {
  background: 
    radial-gradient(circle at 20% 80%, rgba(16, 124, 16, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0, 120, 212, 0.1) 0%, transparent 50%),
    var(--gradient-background) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 24px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(45deg, transparent 30%, rgba(0, 120, 212, 0.05) 50%, transparent 70%),
    linear-gradient(-45deg, transparent 30%, rgba(16, 124, 16, 0.05) 50%, transparent 70%);
  animation: shimmer 8s ease-in-out infinite;
}

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

/* Section Titles */
.section-title, h2 {
  color: var(--ms-text-primary) !important;
  font-weight: 700 !important;
  margin-bottom: 24px !important;
  position: relative;
}

.section-title::after, h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: 2px;
}

/* Game Grid Enhancement */
.game-grid {
  gap: 20px !important;
}

/* Play Button */
.play-button {
  background: var(--gradient-primary) !important;
  border: none;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.4);
}

.play-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 120, 212, 0.6);
}

.play-button i {
  color: white !important;
  font-size: 16px;
  margin-left: 2px; /* Offset for play icon */
}

/* Hover Overlays */
.game-card .absolute.inset-0 {
  background: linear-gradient(
    180deg, 
    rgba(0, 0, 0, 0) 0%, 
    rgba(0, 0, 0, 0.3) 50%, 
    rgba(0, 0, 0, 0.8) 100%
  ) !important;
}

/* Mobile Responsive Improvements */
@media (max-width: 768px) {
  .game-card {
    border-radius: 12px !important;
  }
  
  .game-card:hover {
    transform: translateY(-4px) scale(1.01);
  }
  
  .sidebar-link {
    border-radius: 8px !important;
    padding: 12px !important;
  }
  
  .btn-primary, .btn-secondary {
    padding: 10px 20px !important;
    border-radius: 8px !important;
  }
  
  .search-bar {
    border-radius: 20px !important;
  }
}

/* Animation Enhancements */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.game-card {
  animation: fadeInUp 0.6s ease-out;
}

.game-card:nth-child(even) {
  animation-delay: 0.1s;
}

.game-card:nth-child(3n) {
  animation-delay: 0.2s;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--ms-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--gradient-primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--ms-blue-light), var(--ms-blue-primary));
}

/* Loading States */
.loading {
  position: relative;
  overflow: hidden;
}

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

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

/* Focus States for Accessibility */
.game-card:focus-visible,
.sidebar-link:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid var(--ms-blue-light);
  outline-offset: 2px;
}

/* High Contrast Support */
@media (prefers-contrast: high) {
  :root {
    --glass-border: rgba(255, 255, 255, 0.3);
    --ms-text-secondary: #ffffff;
  }
  
  .game-card {
    border-color: rgba(255, 255, 255, 0.3) !important;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .game-card::before,
  .hero-section::before {
    animation: none;
  }
}