@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto+Mono:wght@400;700&family=Orbitron:wght@400;700;900&display=swap');

.pixel-font {
    font-family: 'Press Start 2P', cursive;
    line-height: 1.6;
}

body {
    font-family: 'Roboto Mono', monospace;
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
    animation: backgroundShift 10s ease-in-out infinite alternate;
}

@keyframes backgroundShift {
    0% { background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); }
    100% { background: linear-gradient(135deg, #0f1419, #1a1a2e, #16213e); }
}

.pixelated {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Retro button styles */
button {
    border: 2px solid transparent;
    transition: all 0.2s ease;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
    box-shadow: 0 4px 0 rgba(0,0,0,0.3);
}

button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 0 rgba(0,0,0,0.3);
}

button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 0 rgba(0,0,0,0.3);
}

/* Card hover effects */
.bg-gray-800:hover {
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Pixel art border effect */
.border-yellow-400 {
    border-style: solid;
    border-image: repeating-linear-gradient(
        45deg,
        #fbbf24,
        #fbbf24 4px,
        transparent 4px,
        transparent 8px
    ) 2;
}

/* Subtle animation for generated art */
@keyframes pixelGlow {
    0%, 100% { 
        filter: brightness(1) contrast(1);
        box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
    }
    50% { 
        filter: brightness(1.1) contrast(1.1);
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
    }
}

.pixelated:hover {
    animation: pixelGlow 2s ease-in-out infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #374151;
}

::-webkit-scrollbar-thumb {
    background: #6B7280;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
}

/* Loading spinner for generating state */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading::after {
    content: "⚡";
    display: inline-block;
    animation: spin 1s linear infinite;
    margin-left: 8px;
}

/* Type badge colors */
.type-fire { background-color: #ff6666; }
.type-water { background-color: #6666ff; }
.type-grass { background-color: #66ff66; }
.type-electric { background-color: #ffff66; }
.type-psychic { background-color: #ff66ff; }
.type-ice { background-color: #66ffff; }
.type-dragon { background-color: #9966ff; }
.type-dark { background-color: #666666; }
.type-fairy { background-color: #ffb3ff; }
.type-fighting { background-color: #ff9966; }
.type-poison { background-color: #9966cc; }
.type-ground { background-color: #cc9966; }
.type-flying { background-color: #99ccff; }
.type-bug { background-color: #99cc66; }
.type-rock { background-color: #cccc66; }
.type-ghost { background-color: #9999cc; }
.type-steel { background-color: #b3b3cc; }
.type-normal { background-color: #cccccc; }