@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-darker text-white font-sans antialiased;
    background-image: url('/public/images/bg-pattern.png');
    background-size: 100%;
    background-repeat: repeat;
    background-blend-mode: overlay;
  }

  /* Custom Typography Styles */
  .prose {
    --tw-prose-body: #e2e8f0;
    --tw-prose-headings: #f8fafc;
    --tw-prose-lead: #cbd5e1;
    --tw-prose-links: #10B981;
    --tw-prose-bold: #f8fafc;
    --tw-prose-counters: #94a3b8;
    --tw-prose-bullets: #94a3b8;
    --tw-prose-hr: #333333;
    --tw-prose-quotes: #f1f5f9;
    --tw-prose-quote-borders: #10B981;
    --tw-prose-captions: #94a3b8;
    --tw-prose-code: #f8fafc;
    --tw-prose-pre-code: #e2e8f0;
    --tw-prose-pre-bg: #242424;
    --tw-prose-th-borders: #333333;
    --tw-prose-td-borders: #242424;
  }

  .prose img {
    @apply rounded-lg my-6;
  }

  .prose a {
    @apply underline decoration-primary underline-offset-2 hover:decoration-blue-400;
  }

  .prose blockquote {
    @apply border-l-primary;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg font-medium transition-all duration-300 hover:bg-secondary hover:shadow-hover focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-darker;
  }

  .btn-secondary {
    @apply inline-flex items-center px-4 py-2 bg-card-bg text-white rounded-lg font-medium transition-all duration-300 hover:bg-card-hover border border-primary/30 hover:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-darker;
  }

  .game-card {
    @apply bg-card-bg rounded-xl overflow-hidden transition-all duration-300 hover:shadow-hover border border-gray-800/50 hover:border-primary/50;
  }

  .game-card-title {
    @apply font-semibold text-sm md:text-base truncate text-white px-3 py-2;
  }

  .game-card-content {
    @apply p-4 bg-gradient-to-b from-card-bg to-card-hover;
  }

  .game-card-overlay {
    @apply absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 to-transparent px-3 py-2 z-10;
  }

  .nav-link {
    @apply flex items-center gap-2 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-primary/10 transition-colors duration-300;
  }

  .nav-link.active {
    @apply text-white bg-primary bg-opacity-20 font-medium;
  }

  .sidebar-link {
    @apply flex items-center gap-3 px-4 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-primary/10 transition-colors duration-300;
  }

  .sidebar-link.active {
    @apply text-white bg-gradient-success bg-opacity-90 font-medium;
  }

  .game-grid {
    @apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6;
  }

  .category-badge {
    @apply bg-gradient-success text-white px-3 py-1 rounded-full text-xs font-medium flex items-center shadow-md z-10;
  }

  .neon-border {
    @apply border border-primary/50 shadow-hover;
  }

  .section-title {
    @apply text-2xl font-bold mb-6 flex items-center;
  }

  .section-title i {
    @apply mr-3 text-primary;
  }

  .hero-section {
    @apply bg-gradient-to-r from-dark to-card-bg rounded-3xl p-8 mb-12 relative overflow-hidden border border-primary/20;
    background-image: url('/public/images/hero-pattern.png'), linear-gradient(to right, #1A1A1A, #242424);
    background-size: cover;
    background-position: center;
  }

  .vip-badge {
    @apply bg-gradient-success text-white px-3 py-1 rounded-full text-xs font-medium shadow-hover;
  }

  .bonus-box {
    @apply bg-gradient-success rounded-2xl p-6 text-white relative overflow-hidden shadow-hover;
  }

  .game-stats {
    @apply flex items-center text-xs text-gray-400 mt-2 gap-3 px-3;
  }

  .game-stats span {
    @apply flex items-center;
  }

  .game-stats i {
    @apply mr-1 text-primary;
  }

  .search-bar {
    @apply bg-card-bg border border-gray-700 rounded-lg px-4 py-2 flex items-center transition-all duration-300 focus-within:border-primary focus-within:shadow-hover;
  }

  .search-bar input {
    @apply bg-transparent border-none outline-none text-white w-full placeholder-gray-500;
  }

  .search-bar button {
    @apply text-primary hover:text-white transition-colors;
  }

  .social-icon-link {
    @apply flex items-center justify-center w-10 h-10 bg-card-bg rounded-full text-white transition-all duration-300 hover:bg-primary hover:translate-y-[-2px] hover:shadow-hover;
  }

  /* Breadcrumb styles */
  .breadcrumb-item {
    @apply flex items-center;
  }

  .breadcrumb-text {
    @apply max-w-full transition-all duration-300;
  }

  /* Mobile breadcrumb truncation */
  @media (max-width: 640px) {
    .breadcrumb-text {
      @apply max-w-[80px] truncate;
    }

    .breadcrumb-text-last {
      @apply max-w-[120px] truncate;
    }
  }
}


