@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-game-gradient {
        background: linear-gradient(135deg, #000000 0%, #111827 100%);
    }
    .text-game-gradient {
        background: linear-gradient(to right, #10B981, #06B6D4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .btn-game {
        @apply bg-[#10B981] hover:bg-[#059669] text-white font-bold py-3 px-8 transition-all duration-300 shadow-[0_0_15px_rgba(16,185,129,0.5)] hover:shadow-[0_0_25px_rgba(16,185,129,0.8)] hover:-translate-y-0.5 rounded-sm;
    }
    .btn-game-outline {
        @apply border-2 border-[#10B981] text-[#10B981] hover:bg-[#10B981] hover:text-black font-bold py-2.5 px-8 transition-all duration-300 shadow-[0_0_10px_rgba(16,185,129,0.2)] hover:shadow-[0_0_20px_rgba(16,185,129,0.5)] rounded-sm;
    }
    .glitch-border {
        border: 1px solid rgba(16,185,129,0.3);
        box-shadow: inset 0 0 10px rgba(16,185,129,0.1), 0 0 10px rgba(16,185,129,0.1);
    }
    .cyber-card {
        @apply bg-[#111827] border border-[#1F2937] hover:border-[#10B981] transition-colors duration-300 relative overflow-hidden;
    }
}