@layer components {

    /* --- Layout & Containers --- */
    .page-container {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8;
    }

    .section-container {
        @apply mb-12;
    }

    /* --- Cards --- */
    .card {
        @apply bg-gray-900/60 border border-gray-700/50 rounded-xl shadow-xl backdrop-blur-sm relative overflow-hidden;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
    }

    .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        pointer-events: none;
    }

    .card-hover {
        @apply transition-all duration-300 hover:border-yellow-400/50 hover:bg-gray-800/60;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
    }

    .card-hover:hover {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 15px rgba(251, 191, 36, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
        transform: translateY(-2px);
    }

    .card-header {
        @apply px-6 py-4 border-b border-gray-700 flex items-center justify-between;
    }

    .card-body {
        @apply p-6;
    }

    /* --- Typography --- */
    .page-title {
        @apply text-3xl md:text-4xl font-bold text-gray-100 mb-6;
    }

    .section-title {
        @apply text-2xl font-bold text-gray-100 mb-6 flex items-center gap-2;
    }

    .text-gradient-gold {
        @apply text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-yellow-200;
    }

    /* --- Buttons --- */
    .btn-base {
        @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed;
    }

    .btn-primary {
        @apply btn-base bg-yellow-500 hover:bg-yellow-400 text-gray-900 focus:ring-yellow-500;
    }

    .btn-secondary {
        @apply btn-base bg-gray-700 hover:bg-gray-600 text-gray-200 focus:ring-gray-500;
    }

    .btn-danger {
        @apply btn-base bg-red-900/50 hover:bg-red-900/70 text-red-200 border border-red-800 focus:ring-red-500;
    }

    .btn-sm {
        @apply px-3 py-1.5 text-sm;
    }

    .btn-icon {
        @apply p-2 rounded-lg hover:bg-gray-700 text-gray-400 hover:text-gray-200 transition-colors;
    }

    .action-btn-primary {
        @apply btn-secondary hover:border-yellow-500/50 hover:text-yellow-400;
    }

    /* --- Badges --- */
    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }

    .badge-sm {
        @apply px-2 py-0.5 text-[10px];
    }

    .badge-warning {
        @apply bg-yellow-900/30 text-yellow-400 border border-yellow-700/50;
    }

    .badge-info {
        @apply bg-blue-900/30 text-blue-400 border border-blue-700/50;
    }

    .badge-success {
        @apply bg-green-900/30 text-green-400 border border-green-700/50;
    }

    .badge-gray {
        @apply bg-gray-800 text-gray-300 border border-gray-700;
    }

    /* --- Forms --- */
    .form-group {
        @apply mb-6;
    }

    .form-label {
        @apply block text-sm font-medium text-gray-300 mb-2;
    }

    .form-input {
        @apply block w-full rounded-lg bg-gray-900 border-gray-700 text-gray-100 shadow-sm focus:border-yellow-500 focus:ring-yellow-500 sm:text-sm placeholder-gray-500;
    }

    .form-select {
        @apply block w-full rounded-lg bg-gray-900 border-gray-700 text-gray-100 shadow-sm focus:border-yellow-500 focus:ring-yellow-500 sm:text-sm;
    }

    .form-checkbox {
        @apply h-4 w-4 rounded border-gray-700 text-yellow-500 focus:ring-yellow-500 bg-gray-900;
    }

    /* --- Tables --- */
    .table-container {
        @apply overflow-x-auto rounded-lg border border-gray-700;
    }

    .table-base {
        @apply min-w-full divide-y divide-gray-700;
    }

    .table-head {
        @apply bg-gray-800;
    }

    .table-th {
        @apply px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider;
    }

    .table-body {
        @apply bg-gray-900/50 divide-y divide-gray-800;
    }

    .table-td {
        @apply px-6 py-4 whitespace-nowrap text-sm text-gray-300;
    }

    .table-row-hover {
        @apply hover:bg-gray-800/50 transition-colors;
    }

    /* --- Headers --- */
    .section-header {
        @apply text-sm font-black text-gray-400 uppercase tracking-[0.2em] mb-6 pl-4 border-l-4 border-yellow-500 bg-gray-800/40 py-2 rounded-r-lg flex items-center;
    }

    /* --- Premium Character Card (Series Page) --- */
    .character-card-premium {
        @apply relative overflow-hidden rounded-2xl bg-gray-900 border border-gray-800 shadow-2xl transition-all duration-500 group cursor-pointer;
        aspect-ratio: 4/5;
    }

    .character-card-premium:hover {
        @apply border-yellow-500 shadow-yellow-500/10 -translate-y-2;
    }

    .character-card-premium .avatar-container {
        @apply absolute inset-0 w-full h-full overflow-hidden;
    }

    .character-card-premium .avatar-image {
        @apply w-full h-full object-cover grayscale-[0.2] group-hover:grayscale-0 transition-all duration-700 group-hover:scale-105;
    }

    .character-card-premium .content-overlay {
        @apply absolute inset-x-0 bottom-0 p-5 bg-black/80 backdrop-blur-md border-t border-gray-800/50 transform translate-y-1 transition-transform duration-300 group-hover:translate-y-0;
    }

    .character-card-premium .character-name {
        @apply text-lg font-black text-white mb-0.5 group-hover:text-yellow-400 transition-colors tracking-tight uppercase leading-none;
    }

    .character-card-premium .character-level {
        @apply text-[10px] font-black text-yellow-500/80 uppercase tracking-[0.15em] flex items-center gap-1.5;
    }

    .character-card-premium .main-badge {
        @apply absolute top-4 left-4 z-20 px-3 py-1 rounded-md bg-yellow-500 text-[9px] font-black text-black uppercase tracking-widest shadow-xl border border-yellow-400/50;
    }

    /* --- Game-specific Features --- */
    .rarity-common {
        color: #9ca3af;
    }

    .rarity-uncommon {
        color: #10b981;
    }

    .rarity-rare {
        color: #3b82f6;
    }

    .rarity-epic {
        color: #a855f7;
    }

    .rarity-legendary {
        color: #f59e0b;
    }


    /* System Background Utility */
    .bg-system-grid {
        background-color: #0b0d11;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        background-attachment: fixed;
    }
}

/* Shimmer animation for teaser elements */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.animate-shimmer {
    animation: shimmer 3s ease-in-out infinite;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */