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

:root { color-scheme: dark; }

@layer base {
  html { -webkit-tap-highlight-color: transparent; }
  body {
    @apply bg-night-950 text-stone-200 font-sans antialiased;
    background-image:
      radial-gradient(1200px 600px at 10% -10%, rgba(51,181,106,.13), transparent 60%),
      radial-gradient(900px 500px at 100% 0%, rgba(139,63,224,.14), transparent 60%),
      radial-gradient(800px 600px at 50% 120%, rgba(217,161,47,.07), transparent 60%);
    background-attachment: fixed;
    min-height: 100vh;
  }
  body::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  h1, h2, h3 { @apply font-display tracking-tight text-stone-50; }
  ::selection { background: rgba(238,189,78,.35); }
  input, textarea, select { @apply outline-none; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: #1f3a2a; border-radius: 10px; border: 2px solid #050906; }
}

@layer components {
  .card {
    @apply relative rounded-2xl border border-white/[.06] bg-night-900/80 shadow-card backdrop-blur-sm;
  }
  .card-hover { @apply transition duration-300 hover:-translate-y-0.5 hover:border-gold-400/25; }
  .gold-text {
    background: linear-gradient(100deg, #fbe7b0 0%, #eebd4e 35%, #fff4d6 50%, #eebd4e 65%, #b07f1e 100%);
    background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
    @apply animate-shine;
  }
  .ruby-text { background: linear-gradient(100deg, #e9d5ff, #c084fc 50%, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .field-input {
    @apply w-full rounded-xl border border-white/10 bg-night-950/70 px-4 py-3 text-[15px] text-stone-100 placeholder:text-stone-500
           transition focus:border-gold-400/60 focus:ring-4 focus:ring-gold-400/10;
  }
  .label { @apply mb-1.5 block text-[13px] font-semibold text-stone-400; }
  .btn {
    @apply inline-flex select-none items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-bold transition
           duration-200 active:scale-[.97] disabled:pointer-events-none disabled:opacity-50;
  }
  .btn-gold { @apply btn bg-gradient-to-b from-gold-300 to-gold-500 text-night-950 shadow-glow hover:brightness-110; }
  .btn-ruby { @apply btn bg-gradient-to-b from-ruby-400 to-ruby-600 text-white shadow-ruby hover:brightness-110; }
  .btn-field { @apply btn bg-gradient-to-b from-field-400 to-field-600 text-night-950 hover:brightness-110; }
  .btn-ghost { @apply btn border border-white/10 bg-white/[.03] text-stone-200 hover:border-white/20 hover:bg-white/[.07]; }
  .btn-danger { @apply btn border border-red-500/30 bg-red-500/10 text-red-300 hover:bg-red-500/20; }
  .chip { @apply inline-flex items-center gap-1 rounded-full border border-white/10 bg-white/[.04] px-2.5 py-0.5 text-xs font-semibold; }
  .section-title { @apply flex items-center gap-2.5 font-display text-lg font-semibold text-stone-50 md:text-xl; }
  .tab { @apply whitespace-nowrap rounded-xl px-3.5 py-2 text-sm font-bold text-stone-400 transition hover:text-stone-100; }
  .tab-active { @apply bg-white/[.07] text-gold-300 shadow-[inset_0_0_0_1px_rgba(238,189,78,.25)]; }
  .soil {
    background:
      radial-gradient(circle at 20% 30%, rgba(0,0,0,.25) 0 2px, transparent 3px),
      radial-gradient(circle at 70% 60%, rgba(0,0,0,.2) 0 2px, transparent 3px),
      repeating-linear-gradient(0deg, #3b2716 0 9px, #33210f 9px 18px);
    background-size: 26px 26px, 34px 34px, auto;
  }
}

@layer utilities {
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { scrollbar-width: none; }
  .safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
}