@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&family=Amiri:wght@400;700&family=Tajawal:wght@300;400;500;700&display=swap');
@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';
@import './components/cursor.css';
@import './components/scrollbar.css';
@import './components/responsive-enhancements.css';
@import './components/loading-screen.css';
@import './components/header-desktop.css';
@import './components/header-tablet.css';
@import './components/header-mobile.css';
@import './components/modals.css';
@import './components/auth-buttons.css';
@import './components/social-media-float.css';
@import './components/footer.css';
@import './components/hero-section.css';
@import './components/server-info.css';
@import './components/edge-compatibility.css';
@import './components/cross-browser-compatibility.css';
@import './components/event-rank.css';
@import './components/player-modal.css';
@import './components/silkroad-inventory.css';
@import './components/enhanced-inventory-tooltips.css';
@import './components/inventory-tooltip-enhanced.css';
@import './components/job-badges.css';
@import './components/game-info.css';
@import './components/desktop-dashboard.css';
@import './components/tablet-dashboard.css';
@import './components/mobile-dashboard.css';
@import './components/dashboard-layout.css';
@import './components/4t-app.css';
@import './components/daily-tasks.css';
@import './components/vip-upgrade.css';
@import './smart-language.css';
@import './language-stability.css';
@import './mobile-navigation-active.css';
@import './components/quests.css';
@import './components/quest-rewards.css';
@import './components/shipping.css';
@import './components/item-shop.css';
@import './components/gift-shop.css';
@import './components/packages-shop.css';
@import './components/fast-events.css';
@import './components/welcome-event.css';
@import './components/congratulations-modal.css';
@import './components/facebook-history.css';
@import './components/team-dashboard.css';
@import './components/responsive-dashboard.css'; /* MUST BE LAST FOR RESPONSIVE TO WORK */

/* ===== Gaming Color Palette ===== */
:root {
  /* Primary Purple Gaming Colors */
  --color-game-purple-50: #f8f4ff;
  --color-game-purple-100: #f0e7ff;
  --color-game-purple-200: #e3d2ff;
  --color-game-purple-300: #d1b3ff;
  --color-game-purple-400: #bb86fc;
  --color-game-purple-500: #a855f7;
  --color-game-purple-600: #9333ea;
  --color-game-purple-700: #7c3aed;
  --color-game-purple-800: #6b21a8;
  --color-game-purple-900: #581c87;
  --color-game-purple-950: #3b0764;

  /* Neon Gaming Accents */
  --color-game-neon-cyan: #00ffff;
  --color-game-neon-cyan-dark: #00cccc;
  --color-game-neon-pink: #ff00ff;
  --color-game-neon-green: #39ff14;
  --color-game-neon-blue: #1e90ff;

  /* Text Colors */
  --color-text-primary: #ffffff;
  --color-text-secondary: #a0a0a0;
  --color-text-accent: var(--color-game-neon-cyan);

  /* Dark Gaming Background */
  --color-game-dark-bg: #0a0a0f;
  --color-game-dark-surface: #1a1a2e;
  --color-game-dark-card: #16213e;

  /* Gaming Gradients */
  --gradient-game-primary: linear-gradient(135deg, var(--color-game-purple-600), var(--color-game-purple-800));
  --gradient-game-secondary: linear-gradient(135deg, var(--color-game-neon-cyan), var(--color-game-purple-600));
  --gradient-game-accent: linear-gradient(135deg, var(--color-game-neon-pink), var(--color-game-purple-700));
  --gradient-game-dark: linear-gradient(135deg, var(--color-game-dark-bg), var(--color-game-dark-surface));

  /* Gaming Shadows */
  --shadow-game-glow: 0 0 20px rgba(168, 85, 247, 0.4);
  --shadow-game-neon: 0 0 30px rgba(0, 255, 255, 0.6);
  --shadow-game-purple: 0 4px 30px rgba(147, 51, 234, 0.3);
}

body {
  background: var(--gradient-game-dark);
  background: linear-gradient(135deg, #0a0a0f, #1a1a2e); /* Fallback for Edge */
  color: var(--color-game-purple-100);
  color: #f0e7ff; /* Fallback for Edge */
  font-family: 'Inter', system-ui, sans-serif;
}

/* Dark mode support for Edge compatibility */
.dark,
.dark * {
  color-scheme: dark;
}

/* Edge-specific fixes */
@supports not (color-scheme: dark) {
  .dark {
    background: #0a0a0f;
    color: #f0e7ff;
  }
}

/* Player Modal Clickable Elements */
.player-avatar,
.player-small-avatar,
.player-name,
.player-name-container {
  cursor: pointer;
  transition: all 0.3s ease;
}

.player-avatar:hover,
.player-small-avatar:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.player-name:hover,
.player-name-container:hover {
  color: #bb86fc !important;
  text-shadow: 0 0 8px rgba(187, 134, 252, 0.5);
}

/* Modal animations */
.modal-backdrop {
  backdrop-filter: blur(4px);
}

/* Enhanced Login Message Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px rgba(187, 134, 252, 0.5); }
  50% { box-shadow: 0 0 20px rgba(187, 134, 252, 0.8), 0 0 30px rgba(187, 134, 252, 0.6); }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wiggle {
  0%, 7% { transform: rotateZ(0); }
  15% { transform: rotateZ(-15deg); }
  20% { transform: rotateZ(10deg); }
  25% { transform: rotateZ(-10deg); }
  30% { transform: rotateZ(6deg); }
  35% { transform: rotateZ(-4deg); }
  40%, 100% { transform: rotateZ(0); }
}

.login-float {
  animation: float 3s ease-in-out infinite;
}

.login-glow {
  animation: glow 2s ease-in-out infinite alternate;
}

.login-slide-up {
  animation: slideInUp 0.6s ease-out;
}

.login-wiggle {
  animation: wiggle 2s ease-in-out infinite;
}

/* Particle Effects */
@keyframes sparkle {
  0%, 20% { opacity: 0; transform: scale(0) rotate(0deg); }
  25% { opacity: 1; transform: scale(1) rotate(90deg); }
  75% { opacity: 1; transform: scale(1) rotate(270deg); }
  100% { opacity: 0; transform: scale(0) rotate(360deg); }
}

.login-sparkle {
  animation: sparkle 3s linear infinite;
}

/* Gradient Text Animation */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.login-gradient-text {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient-shift 3s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@import './notifications.css';

/* ===== Dashboard Gaming Styles ===== */
.text-game-purple-400 {
  color: var(--color-game-purple-400) !important;
}

.text-game-purple-700 {
  color: var(--color-game-purple-700) !important;
}

.text-game-purple-800 {
  color: var(--color-game-purple-800) !important;
}

.bg-game-purple-50 {
  background-color: var(--color-game-purple-50) !important;
}

.from-game-purple-50 {
  --tw-gradient-from: var(--color-game-purple-50);
  --tw-gradient-to: rgba(248, 244, 255, 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-game-purple-100 {
  --tw-gradient-to: var(--color-game-purple-100);
}

/* Dashboard Menu Gaming Enhancements */
.dashboard-gaming-divider {
  background: linear-gradient(
    to right,
    transparent,
    var(--color-game-purple-300),
    var(--color-game-neon-cyan),
    var(--color-game-purple-300),
    transparent
  );
  height: 2px;
  border-radius: 1px;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

.dashboard-gaming-text {
  background: linear-gradient(45deg, var(--color-game-purple-400), var(--color-game-neon-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
  animation: gaming-text-glow 3s ease-in-out infinite alternate;
}

@keyframes gaming-text-glow {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.2); }
}

/* Gaming Button Effects */
.gaming-button-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

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

.gaming-button-hover:hover::before {
  left: 100%;
}

.gaming-button-hover:hover {
  box-shadow:
    0 0 20px rgba(168, 85, 247, 0.4),
    0 0 40px rgba(0, 255, 255, 0.2),
    inset 0 0 20px rgba(168, 85, 247, 0.1);
}

/* Gaming Scrollbar */
.gaming-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.gaming-scrollbar::-webkit-scrollbar-track {
  background: var(--color-game-dark-surface);
  border-radius: 4px;
}

.gaming-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to bottom,
    var(--color-game-purple-500),
    var(--color-game-purple-700)
  );
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

.gaming-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    to bottom,
    var(--color-game-neon-cyan),
    var(--color-game-purple-600)
  );
}