body {
      box-sizing: border-box;
    }
    
    :root {
      --electric-blue: #4F46E5;
      --sunshine-yellow: #FBBF24;
      --mint-green: #10B981;
      --neon-purple: #8B5CF6;
      --coral-orange: #F97316;
    }
    
    * {
      font-family: 'Quicksand', sans-serif;
    }
    
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Nunito', sans-serif;
    }
    
    .gradient-text {
      background: linear-gradient(135deg, #4F46E5, #8B5CF6, #F97316);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .gradient-bg {
      background: linear-gradient(135deg, #4F46E5 0%, #8B5CF6 50%, #F97316 100%);
    }
    
    .gradient-bg-soft {
      background: linear-gradient(135deg, #EEF2FF 0%, #FDF4FF 50%, #FFF7ED 100%);
    }
    
    .card-hover {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .card-hover:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 20px 40px -12px rgba(79, 70, 229, 0.25);
    }
    
    .btn-bounce:hover {
      animation: bounce 0.5s ease infinite;
    }
    
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(5deg); }
    }
    
    @keyframes wiggle {
      0%, 100% { transform: rotate(-3deg); }
      50% { transform: rotate(3deg); }
    }
    
    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 20px rgba(79, 70, 229, 0.3); }
      50% { box-shadow: 0 0 40px rgba(79, 70, 229, 0.6); }
    }
    
    .floating-icon {
      animation: float 3s ease-in-out infinite;
    }
    
    .floating-icon:nth-child(2) { animation-delay: 0.5s; }
    .floating-icon:nth-child(3) { animation-delay: 1s; }
    .floating-icon:nth-child(4) { animation-delay: 1.5s; }
    
    .wiggle:hover {
      animation: wiggle 0.3s ease-in-out infinite;
    }
    
    .glow-effect {
      animation: pulse-glow 2s ease-in-out infinite;
    }
    
    .speech-bubble {
      position: relative;
      background: white;
      border-radius: 20px;
    }
    
    .speech-bubble::after {
      content: '';
      position: absolute;
      bottom: -15px;
      left: 30px;
      border-width: 15px 15px 0;
      border-style: solid;
      border-color: white transparent transparent;
    }
    
    .nav-link {
      position: relative;
      overflow: hidden;
    }
    
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, #4F46E5, #8B5CF6);
      transform: translateX(-100%);
      transition: transform 0.3s ease;
    }
    
    .nav-link:hover::after {
      transform: translateX(0);
    }
    
    .filter-btn.active {
      background: linear-gradient(135deg, #4F46E5, #8B5CF6);
      color: white;
    }
    
    .game-card {
      perspective: 1000px;
    }
    
    .game-card-inner {
      transition: transform 0.6s;
      transform-style: preserve-3d;
    }
    
    .game-card:hover .game-card-inner {
      transform: rotateY(10deg);
    }
    
    .scroll-smooth {
      scroll-behavior: smooth;
    }
    
    .modal-backdrop {
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
    }
    
    input:focus, textarea:focus, select:focus {
      outline: none;
      ring: 2px;
      ring-color: #4F46E5;
    }
    
    .star-rating {
      color: #FBBF24;
    }
    
    .progress-bar {
      transition: width 0.5s ease;
    }
    
    .category-icon {
      transition: all 0.3s ease;
    }
    
    .category-card:hover .category-icon {
      transform: scale(1.2) rotate(10deg);
    }
    
    @keyframes slideIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .slide-in {
      animation: slideIn 0.5s ease forwards;
    }
    
    .toast {
      animation: slideIn 0.3s ease forwards;
    }
    
    @keyframes confetti {
      0% { transform: translateY(0) rotate(0deg); opacity: 1; }
      100% { transform: translateY(100px) rotate(720deg); opacity: 0; }
    }
    
    .confetti {
      animation: confetti 1s ease forwards;
    }