/* Asgore Central - Component Styles */

/* Media Player Components */
.music-player-container {
    @apply bg-white rounded-lg shadow-lg overflow-hidden;
}

.track-list {
    @apply divide-y divide-gray-200;
}

.track-item {
    @apply flex items-center p-4 hover:bg-gray-50 transition-colors;
}

.track-player {
    @apply bg-white rounded-lg p-6 shadow-md;
}

.track-artwork {
    @apply w-12 h-12 rounded-lg bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center text-white text-xl mr-4;
}

.track-info {
    @apply flex-1 min-w-0;
}

.track-title {
    @apply font-semibold text-gray-900 truncate text-lg mb-1;
}

.track-artist {
    @apply text-sm text-gray-600 truncate;
}

.track-controls {
    @apply flex items-center space-x-3;
}

.play-button {
    @apply w-12 h-12 rounded-full bg-purple-500 hover:bg-purple-600 flex items-center justify-center text-white transition-colors cursor-pointer;
}

.play-button.playing {
    @apply bg-purple-600;
}

.play-button.loading {
    @apply opacity-50 cursor-not-allowed;
}

.play-button:disabled {
    @apply opacity-50 cursor-not-allowed;
}

.track-duration {
    @apply text-sm text-gray-500 tabular-nums;
}

/* Progress Bar */
.progress-container {
    @apply w-full bg-gray-200 rounded-full h-2 mt-2;
}

.progress-bar {
    @apply bg-purple-500 h-2 rounded-full transition-all duration-300;
    width: 0%;
}

/* Image Gallery Components */
.gallery-grid {
    @apply grid gap-4;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.gallery-item {
    @apply relative group cursor-pointer overflow-hidden rounded-lg;
}

.gallery-image {
    @apply w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105 cursor-pointer;
}

.gallery-overlay {
    @apply absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 flex items-center justify-center;
}

.gallery-zoom-icon {
    @apply text-white text-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300;
}

.gallery-caption {
    @apply absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-3;
}

/* Image Modal */
.image-modal {
    backdrop-filter: blur(5px);
}

.modal-content {
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.nav-btn {
    @apply bg-black bg-opacity-50 rounded-full w-12 h-12 flex items-center justify-center transition-all duration-200;
}

.nav-btn:hover {
    @apply bg-opacity-70;
}

/* Content Cards */
.content-card {
    @apply bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden;
}

.content-card-header {
    @apply p-6 pb-4;
}

.content-card-title {
    @apply text-xl font-bold text-gray-900 mb-2;
}

.content-card-meta {
    @apply flex items-center space-x-4 text-sm text-gray-600;
}

.content-card-body {
    @apply px-6 pb-4;
}

.content-card-description {
    @apply text-gray-700 leading-relaxed mb-4;
}

.content-card-tags {
    @apply flex flex-wrap gap-2 mb-4;
}

.content-tag {
    @apply px-2 py-1 rounded-full text-xs font-medium;
}

.content-tag-meme {
    @apply bg-red-100 text-red-800;
}

.content-tag-music {
    @apply bg-purple-100 text-purple-800;
}

.content-tag-theory {
    @apply bg-blue-100 text-blue-800;
}

.content-tag-viral {
    @apply bg-red-100 text-red-800;
}

.content-tag-truck {
    @apply bg-yellow-100 text-yellow-800;
}

.content-tag-dess {
    @apply bg-purple-100 text-purple-800;
}

.content-card-footer {
    @apply px-6 py-4 bg-gray-50 border-t border-gray-200;
}

.content-actions {
    @apply flex items-center justify-between;
}

.action-buttons {
    @apply flex space-x-3;
}

.action-button {
    @apply flex items-center space-x-1 text-gray-600 hover:text-gray-900 transition-colors text-sm cursor-pointer;
}

.content-stats {
    @apply text-xs text-gray-500;
}

/* Timeline Components */
.timeline-container {
    @apply space-y-6;
}

.timeline-item {
    @apply flex items-start space-x-4;
}

.timeline-marker {
    @apply w-4 h-4 rounded-full flex-shrink-0 mt-1;
}

.timeline-content {
    @apply flex-1;
}

.timeline-date {
    @apply font-semibold text-sm mb-1;
}

.timeline-description {
    @apply text-gray-700 text-sm;
}

/* Character Comparison */
.character-comparison {
    @apply grid md:grid-cols-2 gap-8;
}

.character-side {
    @apply bg-white rounded-lg p-6 shadow-md text-center;
}

.character-side img {
    @apply w-32 h-32 mx-auto rounded-lg shadow-md mb-4;
}

.character-features {
    @apply space-y-2 text-left;
}

.character-feature {
    @apply flex items-center text-gray-700;
}

.character-feature-icon {
    @apply mr-2;
}

/* Stats Display */
.stats-grid {
    @apply grid grid-cols-2 md:grid-cols-4 gap-4;
}

.stat-card {
    @apply bg-white rounded-lg p-6 shadow-md text-center;
}

.stat-number {
    @apply text-3xl font-bold text-asgore-gold mb-2;
}

.stat-label {
    @apply text-gray-600 text-sm;
}

/* Meme Gallery */
.meme-gallery {
    @apply grid grid-cols-2 gap-4;
}

.meme-item {
    @apply text-center;
}

.meme-item img {
    @apply w-full rounded-lg shadow-md hover:shadow-lg transition-shadow cursor-pointer;
}

.meme-caption {
    @apply text-sm text-gray-600 mt-2;
}

/* Content Showcase */
.content-showcase {
    @apply mb-12;
}

.showcase-header {
    @apply flex items-center mb-6;
}

.showcase-icon {
    @apply text-4xl mr-4;
}

.showcase-title {
    @apply text-2xl font-bold text-gray-800;
}

.showcase-subtitle {
    @apply text-gray-600;
}

/* Expandable Content */
.expandable-content {
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

.expandable-content.expanded {
    max-height: 1000px;
}

.expandable-content.collapsed {
    max-height: 0;
}

.expand-button {
    @apply text-blue-600 hover:underline text-sm mt-2 cursor-pointer;
}

/* Loading States */
.loading-spinner {
    @apply inline-block w-6 h-6 border-2 border-gray-300 border-t-purple-500 rounded-full animate-spin;
}

.skeleton-loader {
    @apply animate-pulse;
}

.skeleton-header {
    @apply h-4 bg-gray-300 rounded w-3/4 mb-2;
}

.skeleton-content {
    @apply h-3 bg-gray-300 rounded w-full mb-1;
}

.skeleton-footer {
    @apply h-3 bg-gray-300 rounded w-1/2;
}

/* Audio Controls Custom Styling */
audio {
    @apply w-full;
}

audio::-webkit-media-controls-panel {
    background-color: #f3f4f6;
}

audio::-webkit-media-controls-play-button {
    background-color: #8b5cf6;
    border-radius: 50%;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .stats-grid {
        @apply grid-cols-2 gap-3;
    }
    
    .stat-card {
        @apply p-4;
    }
    
    .stat-number {
        @apply text-2xl;
    }
    
    .content-showcase {
        @apply p-4;
    }
    
    .timeline-item {
        @apply flex-col space-x-0 space-y-2;
    }
    
    .timeline-marker {
        @apply self-start;
    }
    
    .character-comparison {
        @apply grid-cols-1 gap-6;
    }
    
    .track-item {
        @apply flex-col items-start space-y-3;
    }
    
    .track-controls {
        @apply w-full justify-between;
    }
    
    .meme-gallery {
        @apply grid-cols-1;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
    
    .content-showcase {
        @apply p-6;
    }
    
    .character-comparison {
        @apply grid-cols-2 gap-8;
    }
}

@media (min-width: 1025px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    
    .content-showcase {
        @apply p-8;
    }
    
    .stats-grid {
        @apply grid-cols-4;
    }
}

/* High DPI Screens */
@media (min-resolution: 2dppx) {
    .gallery-image {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .content-card {
        @apply bg-gray-800 text-white;
    }
    
    .content-card-description {
        @apply text-gray-300;
    }
    
    .content-card-footer {
        @apply bg-gray-700 border-gray-600;
    }
    
    .track-item:hover {
        @apply bg-gray-700;
    }
    
    .track-player {
        @apply bg-gray-800 text-white;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}