/* Custom styles for Sprunki Game */

/* Navigation styles */
.nav-link {
    @apply inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-500 hover:text-gray-900;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.nav-link:hover {
    border-bottom-color: #4a90e2;
}

.nav-link.active {
    @apply text-blue-600;
    border-bottom-color: #4a90e2;
}

/* Game container styles */
.game-stage {
    background: linear-gradient(45deg, #1a1a1a 0%, #2d2d2d 100%);
    min-height: 400px;
}

/* Character styles */
.character-container {
    @apply relative cursor-pointer transition-transform duration-200;
}

.character-container:hover {
    transform: translateY(-2px);
}

.character-icon {
    @apply w-16 h-16 rounded-full bg-white shadow-lg flex items-center justify-center;
    transition: all 0.3s ease;
}

.character-icon:hover {
    box-shadow: 0 0 15px rgba(74, 144, 226, 0.5);
}

/* Animation keyframes */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse {
    animation: pulse 2s infinite;
}

/* Custom button styles */
.btn-primary {
    @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200;
}

.btn-secondary {
    @apply px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors duration-200;
}

/* Volume slider customization */
input[type="range"] {
    @apply w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer;
}

input[type="range"]::-webkit-slider-thumb {
    @apply appearance-none w-4 h-4 bg-blue-600 rounded-full cursor-pointer;
    border: 0;
}

/* Game grid styles */
.game-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.grid-slot {
    @apply aspect-square rounded-lg border-2 border-dashed border-gray-400 flex items-center justify-center;
    transition: all 0.3s ease;
}

.grid-slot:hover {
    @apply border-blue-500;
}

.grid-slot.active {
    @apply border-solid border-blue-600 bg-blue-50;
}

/* Loading animation */
.loading {
    @apply inline-block w-4 h-4 border-2 border-gray-200 rounded-full;
    border-top-color: #4a90e2;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive design adjustments */
@media (max-width: 640px) {
    .game-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .character-icon {
        @apply w-12 h-12;
    }
}

/* Toast notifications */
.toast {
    @apply fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg;
    animation: slideIn 0.3s ease-out;
}

.toast-success {
    @apply bg-green-500 text-white;
}

.toast-error {
    @apply bg-red-500 text-white;
}

@keyframes slideIn {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Modal styles */
.modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center;
    z-index: 50;
}

.modal-content {
    @apply bg-white rounded-lg shadow-xl p-6 max-w-md w-full mx-4;
    animation: modalFade 0.3s ease-out;
}

@keyframes modalFade {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Share button styles */
.share-button {
    @apply inline-flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors duration-200;
}

.share-button-twitter {
    @apply bg-[#1DA1F2] text-white hover:bg-[#1a91da];
}

.share-button-facebook {
    @apply bg-[#4267B2] text-white hover:bg-[#365899];
}

/* Flip card styles */
.flip-card {
    @apply relative w-full h-full;
    perspective: 1000px;
    transform-style: preserve-3d;
    min-height: 300px;
}

.flip-card-inner {
    @apply relative w-full h-full;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    @apply absolute w-full h-full;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.flip-card-front {
    transform: rotateY(0deg);
    z-index: 2;
}

.flip-card-back {
    transform: rotateY(180deg);
    background-color: white;
}

.dark .flip-card-back {
    background-color: #1a202c;
}

/* Game card additional styles */
.game-card {
    @apply relative overflow-hidden rounded-lg shadow-lg;
    height: 100%;
    min-height: 300px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.game-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.game-card img {
    @apply w-full h-48 object-cover;
    transition: transform 0.3s ease-in-out;
}

.game-card:hover img {
    transform: scale(1.05);
}

/* Mobile Menu Transitions */
#mobile-menu {
    transform: translateY(-100%);
}

#mobile-menu.translate-y-0 {
    transform: translateY(0);
}

#mobile-menu.-translate-y-full {
    transform: translateY(-100%);
}

/* Ensure smooth transitions */
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}